TimeCapsule

一个纯客户端的个人时间胶囊应用，记录想法、照片、音频和位置。所有数据存储在浏览器 IndexedDB 中，无需后端服务。

功能特性

• 文字记录 — 快速记录想法，支持自动保存
• 照片拍摄 — 调用前置摄像头拍照
• 音频录制 — 最长 30 秒的语音记录
• 位置标记 — 记录当前地理坐标
• 时间线浏览 — 按年份分组，支持展开/折叠
• 回复与追问 — 对任意记录进行回复，或向未来的自己提问
• 回忆闪现 — 随机展示 30 天前的历史记录
• 人生阶段归档 — 自动检测人生事件（毕业、入职、搬家等），归档为阶段
• 月度报告 — 基于词频分析生成每月 changelog
• 自传生成 — 从记录中提取关键事件生成个人自传
• 本地加密门禁 — 首次使用必须设置本地密码，未解锁前不会进入主界面
• AES-GCM 加密存储 — 记录内容、阶段说明、照片和音频在写入 IndexedDB 前加密
• 深色模式 — 跟随系统或手动切换
• 中英文支持 — 界面支持中文和英文
• PWA — 可安装到手机主屏幕，支持离线使用
• 数据导入/导出 — 默认导出密码加密 JSON，明文导出需主动勾选

技术栈

• React 19 + TypeScript
• Vite 8
• Tailwind CSS v4
• Dexie 4 (IndexedDB)
• lucide-react (图标)
• compromise (英文 NLP)
• vite-plugin-pwa (Service Worker)

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建（测试 PWA 功能）
npm run preview

移动端适配

应用采用响应式布局：

• 桌面端 (>= 768px) — 左侧时间线 + 右侧详情面板的双栏布局
• 移动端 (< 768px) — 全屏详情面板，时间线作为抽屉式侧边栏从左侧滑出

移动端特性：

• 汉堡菜单打开时间线抽屉，选择记录后自动收起
• 标题栏次要操作合并到溢出菜单
• 底部输入栏支持 iOS safe area
• 使用 100dvh 动态视口高度，适配移动端地址栏

项目结构

src/
  App.tsx                    # 根组件，布局与状态管理
  main.tsx                   # 入口，I18nProvider 包裹
  index.css                  # Tailwind v4 + 全局样式
  components/
    layout/
      TitleBar.tsx           # 顶部标题栏（响应式）
      InputBar.tsx           # 底部输入栏
    timeline/
      Timeline.tsx           # 时间线列表
      TimelineItem.tsx       # 单条记录行
      TimelineItemDot.tsx    # 折叠态小圆点
      YearGroup.tsx          # 年份分组手风琴
    detail/
      DetailPanel.tsx        # 详情面板容器
      RecordDetail.tsx       # 记录详情视图
      FlashbackCard.tsx      # 回忆闪现卡片
      ReplyInput.tsx         # 回复输入框
      OverdueQuestions.tsx   # 过期未回答问题
      AskFutureDialog.tsx    # 向未来提问弹窗
      PhotoViewer.tsx        # 照片查看器
      AudioPlayer.tsx        # 音频播放器
      PhaseDialog.tsx        # 人生阶段归档弹窗
    input/
      CameraCapture.tsx      # 相机拍照弹窗
      AudioCapture.tsx       # 内联录音组件
    common/
      Modal.tsx              # 通用弹窗（Portal）
      StarToggle.tsx         # 收藏按钮
    settings/
      ExportImport.tsx       # 数据备份弹窗
      PasswordGate.tsx       # 密码验证组件
    bio/
      BioGenerator.tsx       # 自传生成弹窗
  hooks/
    useIsMobile.ts           # 响应式断点检测
    useDatabase.ts           # Dexie live query hooks
    useAutoSave.ts           # 防抖自动保存
    useDarkMode.ts           # 深色模式
    useCamera.ts             # 摄像头流管理
    useMediaRecorder.ts      # 录音
    useOverdueQuestions.ts   # 过期问题查询
    useChangelog.ts          # 月度报告生成
  db/
    index.ts                 # Dexie 数据库定义
    records.ts               # 记录 CRUD
    blobs.ts                 # 二进制数据存储
    phases.ts                # 阶段 CRUD
  utils/
    dateUtils.ts             # 日期格式化与分组
    phaseDetection.ts        # 人生事件关键词检测
    analysis.ts              # 词频分析与情绪分析
    crypto.ts                # AES-256-GCM 加密
  i18n/
    index.tsx                # I18n Provider + Hook
    zh.ts                    # 中文翻译
    en.ts                    # 英文翻译

公网部署安全

这个应用仍然是纯静态站，没有后端账号系统。公网部署时建议组合使用：

• HTTPS
• Basic Auth
• 本地 IndexedDB 加密门禁
• 安全响应头与 noindex

可直接参考：

• DEPLOYMENT.md
• deploy/nginx.conf
• deploy/Caddyfile

Nginx Basic Auth 示例：

sudo apt install apache2-utils
sudo htpasswd -c /etc/nginx/.htpasswd your-user

上线后检查：

curl -I https://example.com

应能看到 Content-Security-Policy、X-Frame-Options: DENY、Permissions-Policy、Referrer-Policy: no-referrer 和 X-Robots-Tag: noindex。未通过 Basic Auth 时，浏览器应只显示认证弹窗，不应直接进入应用。

数据安全说明

首次打开应用必须设置至少 8 位本地密码。应用会用 PBKDF2 派生 AES-GCM 密钥，并把已有明文记录迁移为加密记录。密码不会上传，也不会存储明文；忘记密码后无法解密本地数据。

导入备份会替换当前 IndexedDB 数据。导入器会限制文件大小、记录类型、字段白名单和媒体 MIME 类型，并拒绝未知字段或畸形 blob 数据。默认备份是二次密码加密 JSON；仅在设置页主动勾选时才会导出明文 JSON。