TimeCapsule

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

功能特性

• 文字记录 — 快速记录想法，支持自动保存
• 照片拍摄 — 调用前置摄像头拍照
• 音频录制 — 最长 30 秒的语音记录
• 位置标记 — 记录当前地理坐标
• 时间线浏览 — 按年份分组，支持展开/折叠
• 回复与追问 — 对任意记录进行回复，或向未来的自己提问
• 回忆闪现 — 随机展示 30 天前的历史记录
• 人生阶段归档 — 自动检测人生事件（毕业、入职、搬家等），归档为阶段
• 月度报告 — 基于词频分析生成每月 changelog
• 自传生成 — 从记录中提取关键事件生成个人自传
• 回顾密码 — 可选密码保护，查看 30 天前的记录需输入密码
• AES-256 加密 — 可选的内容加密存储
• 深色模式 — 跟随系统或手动切换
• 中英文支持 — 界面支持中文和英文
• 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                    # 英文翻译