|
| 1 | +# 熵减移动端 PWA 版设计(MVP:课堂助手 + 空白笔记 + 番茄钟) |
| 2 | + |
| 3 | +> 日期:2026-08-16 | 状态:待评审 | 分支:dev |
| 4 | +> 背景:评估"把当前 Electron 桌面项目移植到 iOS/Android"的工作量后,确认走项目既定策略 |
| 5 | +> (PWA 优先,见 docs/product/requirements-pool.md EXP-006 与 docs/Foresight/innovation-features-catalog.md), |
| 6 | +> 首批范围锁定三个功能 + 桌面↔移动数据同步。 |
| 7 | +
|
| 8 | +## 1. 目标与范围 |
| 9 | + |
| 10 | +### 1.1 目标 |
| 11 | + |
| 12 | +在现有代码库上增加第二条运行时——**PWA(浏览器/移动端)**,首批交付: |
| 13 | + |
| 14 | +1. **番茄钟**:移动端可用,计时准确(后台节流不丢时间),到点通知 |
| 15 | +2. **空白笔记**:移动端可读写,数据落 IndexedDB(Dexie),与桌面端同构 |
| 16 | +3. **课堂助手**:两种形态—— |
| 17 | + - 实时课堂:麦克风录音 → 转写 → AI 结构化笔记(参考 OPPO AI 笔记能力) |
| 18 | + - **视频转笔记**:导入视频文件(手机录屏/网课下载)→ 复用网关 `analyze-video` → 生成笔记 |
| 19 | +4. **桌面 ↔ 移动数据同步**:账号绑定 + sync-service 增量同步 |
| 20 | + |
| 21 | +### 1.2 明确不做(MVP 之外) |
| 22 | + |
| 23 | +- 原生 App(Capacitor 壳 / React Native / SwiftUI)——Phase 2 再评估 |
| 24 | +- 系统级"全局快捷键/侧边栏截屏识别"(移动浏览器平台禁止采集其他 App 画面)——Phase 2 用 iOS Share Extension / Android 分享意图近似替代 |
| 25 | +- 端侧 WASM 流式转写——Phase 1.5 可选项(见 §5) |
| 26 | +- 其余 24 个功能模块的移动端适配 |
| 27 | + |
| 28 | +## 2. 现状盘点(关键事实) |
| 29 | + |
| 30 | +| # | 事实 | 影响 | |
| 31 | +|---|------|------| |
| 32 | +| F1 | `storageFactory.ts` 已双模式:检测不到 `window.electronAPI` 自动走 Dexie/IndexedDB,且内置 IndexedDB→SQLite 迁移 | 数据层 PWA 零改动可跑 | |
| 33 | +| F2 | `asrTranscriber.ts` 已实现"本地 ASR 优先 → 云端降级",PWA 下自动直走云端 `/api/v1/asr/transcribe`(重试+并发信号量) | 课堂转写链路浏览器端现成 | |
| 34 | +| F3 | `tickSlice.ts` 已有墙钟校准(endAt 误差>1s 吸附)+ `visibilitychange` 前台恢复立即 tick;`sendNotification` 用 Web Notification API | 番茄钟后台节流不丢时间 | |
| 35 | +| F4 | notes 的 28 处 IPC 全部有 `window.electronAPI` 守卫,PWA 下自动静默降级 | 笔记模块不会报错,但剪藏/PDF/桌面采集会消失 | |
| 36 | +| F5 | `vite.config.ts` 已配置 VitePWA(manifest+SW);设计系统已有移动端 BottomNav/响应式方案;`useDeviceCapability`/`useReducedMotion` 已就绪 | 基建前置条件已具备 | |
| 37 | +| F6 | 网关已有 `POST /api/v1/multimodal/analyze-video`(multipart ≤500MB,Gemini 原生视频 → Qwen-VL ffmpeg 抽帧降级,300s 超时);桌面 `videoAnalyzeHandler.ts` 仅为薄封装 | 视频转笔记能力后端已完整,移动端只缺文件选择+上传 UI | |
| 38 | +| F7 | 桌面流式 ASR = `streamingAsr.ts`(平台无关编排)+ `SherpaAsrService`(sherpa-onnx-node 原生);`asrFilters.ts` 已在共享 `src/lib/capture` | 提炼 StreamingAsrProvider 适配器的前提已具备 | |
| 39 | +| F8 | sync-service 是 Go/WebSocket,浏览器可直连;`OfflineQueue` 有测试;`@automerge` 为 WASM 跨端可用 | 同步链路技术选型无障碍 | |
| 40 | + |
| 41 | +## 3. 架构设计 |
| 42 | + |
| 43 | +### 3.1 运行时判定(沿用现有模式) |
| 44 | + |
| 45 | +``` |
| 46 | +getRuntimeEnvironment(): 'pwa' | 'electron' // 已存在,window.electronAPI 判定 |
| 47 | +``` |
| 48 | + |
| 49 | +- 存储、AI 客户端、同步均按此环境选择实现;不新增第三运行时判定 |
| 50 | +- PWA 构建产物:`vite build`(非 ELECTRON_BUILD)即产出 PWA(现有配置),新增移动端部署目标(静态托管 + HTTPS) |
| 51 | + |
| 52 | +### 3.2 课堂助手移动端捕获适配器(新增核心件) |
| 53 | + |
| 54 | +``` |
| 55 | +CaptureAdapter 接口(新增,client/src/features/classroom/capture/) |
| 56 | +├── ElectronCaptureAdapter ← 现有桌面实现(屏幕/窗口/系统音频/本地 ASR),保持不动 |
| 57 | +└── WebCaptureAdapter ← 新增:getUserMedia 麦克风 + MediaRecorder 分段 + 云端 ASR |
| 58 | +``` |
| 59 | + |
| 60 | +- 会话编排(useSessionControl / useClassroomEvents)增加环境分支;移动端隐藏窗口选择/屏幕采集 UI |
| 61 | +- 转写:MVP 走云端分段(`transcribeWithRetry` 已现成);Phase 1.5 换 WASM 流式 |
| 62 | +- 视频转笔记:`<input type="file" accept="video/*">` → `aiClient` multipart 上传 `/api/v1/multimodal/analyze-video` → 结构化笔记入库 |
| 63 | + |
| 64 | +### 3.3 ASR 适配器(Phase 1.5,桌面同步受益) |
| 65 | + |
| 66 | +``` |
| 67 | +StreamingAsrProvider 接口(新增,client/src/lib/asr/) |
| 68 | +├── SherpaNodeProvider ← 桌面:sherpa-onnx-node(保留原生性能) |
| 69 | +└── SherpaWasmProvider ← 移动:web worker + sherpa-onnx-web(WASM+SIMD) |
| 70 | + ↑ 共享流式编排层(从 streamingAsr.ts 提炼:partial 节流/端点断句/热词/静音跳过/SenseVoice 重打分) |
| 71 | +``` |
| 72 | + |
| 73 | +- 桌面收益:原生绑定构建失败的场景可降级 WASM(缓解 node-gyp/electron-rebuild CI 痛点);web 预览模式可用流式 ASR |
| 74 | +- 注意:桌面性能不依赖 WASM(原生快 2–5 倍),桌面默认仍走原生 |
| 75 | + |
| 76 | +### 3.4 数据同步(MVP 含) |
| 77 | + |
| 78 | +- 复用 sync-service(WebSocket)+ OfflineQueue + Automerge CRDT(均已存在) |
| 79 | +- 新增:账号绑定流程(supabase 登录在 PWA 已兼容)、浏览器端同步链路验证、冲突策略确认 |
| 80 | +- 数据归属:PWA 与桌面共用同一账号命名空间,key 兼容(keban 库名等品牌豁免约定不变) |
| 81 | + |
| 82 | +### 3.5 平台限制的既定取舍 |
| 83 | + |
| 84 | +| 桌面能力 | 移动 PWA 处理 | |
| 85 | +|----------|--------------| |
| 86 | +| 屏幕/窗口采集 | 移除(移动浏览器无 getDisplayMedia);替代:视频文件导入 | |
| 87 | +| 系统音频环回 | 移除;替代:麦克风录音 | |
| 88 | +| 托盘/全局快捷键 | 移除;替代:通知栏/页面内快捷入口 | |
| 89 | +| 本地 Ollama | 移除;走云端 AI 网关(项目已有完整降级链) | |
| 90 | +| 后台运行 | 浏览器标签后台会被节流:录音停止并提示;番茄钟靠墙钟校准+通知 | |
| 91 | +| better-sqlite3 | Dexie/IndexedDB(F1) | |
| 92 | + |
| 93 | +## 4. 工作量估算 |
| 94 | + |
| 95 | +假设:1 名熟悉代码库的全栈工程师全职;不含产品设计、上架、市场。 |
| 96 | + |
| 97 | +| 工作项 | 工期 | 说明 | |
| 98 | +|--------|------|------| |
| 99 | +| 横切基建(PWA 构建/部署、移动端导航与布局、iOS Safari 细节、音频手势解锁) | 1–1.5 周 | VitePWA 已配置 | |
| 100 | +| 番茄钟(UI 适配 + 通知流程) | 1–1.5 周 | 计时引擎已就绪(F3) | |
| 101 | +| 空白笔记(编辑器移动适配、存储验证、剪藏/PDF 浏览器替代) | 2.5–3.5 周 | 最大单项是编辑器触控/键盘适配 | |
| 102 | +| 课堂助手-录音转写(WebCaptureAdapter + 云端分段 ASR) | 3–4.5 周 | 60 处 IPC 中捕获链路需重写 | |
| 103 | +| 课堂助手-视频转笔记(文件选择 + 上传 + 复用 analyze-video) | 0.5–1 周 | 后端现成(F6) | |
| 104 | +| 桌面 ↔ 移动同步(账号绑定 + 浏览器端验证) | 1–2 周 | 底子已具备(F8) | |
| 105 | +| 联调 + 移动端测试 + 打磨 | 1–1.5 周 | 双端回归 | |
| 106 | +| **合计** | **约 10–15 周(≈2.5–3.5 人月)** | 2 人并行约 6–8 周 | |
| 107 | + |
| 108 | +可选项: |
| 109 | +- 端侧 WASM 流式转写(StreamingAsrProvider,§3.3):**+1.5–2.5 周**,体验追平 OPPO 实时感、可离线,桌面同时获得降级路径 |
| 110 | +- Capacitor 壳 + Share Extension/分享意图(Phase 2):**+2–3 周**,获得"任意 App 分享视频→熵减"的原生触发体验 |
| 111 | + |
| 112 | +## 5. 里程碑 |
| 113 | + |
| 114 | +- **M1(第 1–3 周)**:横切基建 + 番茄钟可跑;PWA 部署上线内测 |
| 115 | +- **M2(第 3–7 周)**:空白笔记移动端可用(读写 + 同步打通) |
| 116 | +- **M3(第 6–10 周)**:课堂助手录音转写 + 视频转笔记可用 |
| 117 | +- **M4(第 9–12 周)**:全量联调、双端回归、性能打磨、发布 |
| 118 | +- **Phase 1.5**:WASM 流式转写(可选,+1.5–2.5 周) |
| 119 | +- **Phase 2**:Capacitor 壳评估(分享扩展、后台录音、推送) |
| 120 | + |
| 121 | +## 6. 验收标准(MVP) |
| 122 | + |
| 123 | +1. PWA 可在 iOS Safari / Android Chrome 添加到主屏幕,离线打开可用(SW 缓存) |
| 124 | +2. 番茄钟:切后台/锁屏 5 分钟再回来,计时不漂移(墙钟校准),到点通知可达 |
| 125 | +3. 空白笔记:新建/编辑/搜索/文件夹/链接在移动端可用;数据持久化于 IndexedDB |
| 126 | +4. 课堂助手:麦克风录音 → 分段转写 → AI 生成结构化笔记全链路通;导入视频 → analyze-video → 笔记入库 |
| 127 | +5. 桌面 ↔ 移动:同一账号登录后数据双向增量同步,离线操作入队,恢复网络后补齐 |
| 128 | +6. 桌面端回归:Electron 现有功能不受影响(适配器模式,桌面路径不变) |
| 129 | +7. 仓库门禁:`npm run check` 通过(lint/typecheck×2/test) |
| 130 | + |
| 131 | +## 7. 风险与缓解 |
| 132 | + |
| 133 | +| 风险 | 等级 | 缓解 | |
| 134 | +|------|------|------| |
| 135 | +| iOS Safari 音频/通知限制(需用户手势解锁 AudioContext;通知需添加到主屏幕) | 中 | 引导流程 + 文档说明 | |
| 136 | +| 移动端编辑器体验(TipTap 触控/虚拟键盘) | 中 | 编辑器工具栏折叠 + 移动端专项测试 | |
| 137 | +| 同步冲突(桌面/移动双写) | 中 | OfflineQueue 已存在 + Automerge CRDT + 冲突策略验证 | |
| 138 | +| 3D 场景移动端性能(three.js) | 低 | useDeviceCapability/useReducedMotion 降级(已存在) | |
| 139 | +| 视频上传体积(≤500MB 限制、移动网络) | 低 | 上传进度 + 压缩提示 | |
0 commit comments