项目文档 · 2026.10.21
项目说明：把一家人的记忆放进同一个地方
Keepsake 的设计目标、功能结构、媒体方案、技术选型与当前边界。
Keepsake 是一个面向一家三口的家庭记忆网站。它不追求成为� 容平台，也不试图把所有生活都变成� �开作品。它更像一本可以随时翻开的家庭档案，把� �片、� 行影像、文字和那些当时觉得普通、以后却可能很珍贵的日子放在一起。
为什么做这个项目
社交平台会让� 容快速滚动，� �片、视频和文字也容易散落在不同应用里。几年以后，我们可能还记得去过哪里，却很难再找到一个地方，完整地看见那一天的� �线、说过的话和当时的� 绪。
Keepsake 想解决的问题很� �体：
- 把家庭� �片按� 行和时间整理起来
- 用视频保留� �片无法表达的现场感
- 用文章记录� �片背后的� 事
- 让家庭成员在手机和电脑上都能浏览
- 保持视觉� �制，让� 容本身成为重点
当前已经� �备的功能
家庭首页
首页使用横� � �片建立第一印象，并展示家庭统计、精选相册、� 行影像和最新文章。相册统计直接来自媒体库，� 容增加后不需要手动改数字。
相册浏览
相册页面采用两级浏览方式：
- “� �部”只显示每本相册的第一张封面
- 点击相册后，显示该相册的� �部� �片
- � �片支持灯箱预览和浏览器本地收藏
相册标题和上传日期直接来自媒体文件夹名称，不需要逐张维护标题。
� 行影像
� 行视频保存在 Bilibili，网站通过官方播放器嵌� �。项目不保存视频文件，只维护视频编号、标题和文字说明。
文字记录
文章使用 Markdown 管理，适合保存� 行手记、成长记录和项目文档。文章页面采用偏� 读的排版，强调长文本的可读性。
主题与语言
- 支持亮色与暗色主题
- 记住浏览器中的主题偏好
- 支持中文和英文界面切换
- 相册和视频标题支持双语字段
PWA
网站支持安� 到桌面，并缓存� 要的静态资源。需要注意，私人� �片不建议在� �用电脑上长期保留离线副本。
当前的媒体方案
� �片不使用传统的“� �复制到网站项目，再一起提交”方式，而是由本地媒体服务实时读取� �片目录。
浏览� �片时，流程大致是：
- 页面请求媒体� 单
- 服务端扫描相册目录
- 返回相册、� �片数量、日期和图片地址
- 浏览器请求� �体� �片
- 服务端读取原图并按需转换为 WebP
这种方案有几个优点：
- 原图不会进� � Git 仓库
- 项目体积更小
- 新增相册后不需要重新登记大量图片信息
- 图片在输出时统一压缩和限制尺寸
同时也带来一个明确限制：网站� 须运行在能够访问本地� �片目录的电脑上。普通静态托管平台无法直接访问家庭电脑中的� �片，因此不能把当前版本当作纯静态站发布。
相册组织原则
相册使用“相册标题 + 上传日期”的文件夹名称，� �片按数字顺序命名。特殊图片使用固定用途目录，例如首页横� 、视频封面和文章封面。
这套规则让日常维护保持简单：新增一次� 行时，只需要新建相册文件夹、整理� �片顺序，不需要同时修改页面代码和图片� �置。
技术选型
| 技术 | 作用 |
|---|---|
| Nuxt 4 | 路由、服务端接口、构建与页面渲染 |
| Vue 3 | 页面组件和交互状态 |
| TypeScript | 数据结构与错误检查 |
| Tailwind CSS 4 | 响应式布局和视觉样式 |
| Nuxt Content | Markdown 文章解析 |
| Nuxt i18n | 中英文界面 |
| Pinia | 相册选择、主题和本地收藏 |
| Sharp | 运行时图片读取和 WebP 转换 |
| Reka UI | 无障碍菜单、灯箱和弹窗 |
| Motion for Vue | 首页进场动画 |
| Vite PWA | 安� 与离线资源缓存 |
设计原则
� 容优� �
视觉� �素服务于� �片和文字，不使用过多� 饰干扰� 读。卡片、标题和留白都围绕浏览节奏设计。
数据与视图分离
页面组件只负责展示。相册信息和媒体地址由接口返回，� 行视频的文字索引和文章正文保持独立。
移动端优� �被认真对�
导航、标题字号、相册网格和灯箱都针对窄屏重新设计，而不是简单缩小桌面页面。
私人� 容� 须可控
家庭� �片不应依赖“别人猜不到网址”来保护。正式� �开部署前，需要明确访问控制、备份和� �片权限策略。
当前边界
- 没有后台管理界面
- 没有用户登录和权限系统
- 没有数据库
- � �片依赖家庭电脑在线
- 文章和视频说明仍由代码维护
- 相册收藏只保存在当前浏览器
这些边界不是缺陷，而是当前阶段的选择。项目优� �验证视觉、� 读体验和媒体浏览方式，再决定是否进� �数据化阶段。
下一步
当前最值得升级的不是页面数量，而是数据管理方式。建议将相册、� �片、文章、视频和媒体资源� �数据迁移到 MySQL，并把图片文件放到对象存储或家庭 NAS。这样可以获得更稳定的远程访问、权限管理、� �文检索和后台编辑能力。
� �体演进方案见同系列的《项目建议：用 MySQL 管好� �片、文章和视频》。