一、云笔记哪些功能
核心能力（第一阶段）
- 笔记 CRUD
- 富文本 / Markdown 编辑
- 自动保存
- 多端同步（Web 优先）
- 历史版本
进阶能力（第二阶段）
- 标签 / 文件夹
- 全文搜索
- 离线编辑 & 冲突解决
- 笔记导出（PDF / Markdown）
高阶能力（第三阶段）
- 多人协作
- 评论 & 光标跟随
- AI 总结 / 搜索 / 重写
- 权限 & 分享链接
设计目标：架构一开始就支持“单人 → 多人 → AI”演进
二、整体系统架构（全局视角）
我会采用 “前端主导 + 后端服务化 + 实时通道” 的经典结构：
┌──────── Web / H5 / Desktop ────────┐
│ Editor + State + Sync + Cache │
└───────────────▲────────────────────┘
│
WebSocket / SSE
│
┌───────────────┴────────────────────┐
│ API Gateway / Auth / Sync Server │
└───────────────▲────────────────────┘
│
┌──────────┴──────────┐
│ │
Document Service Search / AI
│ │
Database Vector DB / ES前端不是“页面层”，而是“离线 + 协作客户端”
三、前端架构设计（重点）
技术选型（理性，不堆栈）
- 框架：
Vue3 + Composition API - 编辑器内核：
- Markdown：
Milkdown / TipTap - 富文本：
ProseMirror
- Markdown：
- 状态管理：
- 本地：
Pinia - 协作态：
Yjs
- 本地：
- 网络：
- REST（初始化）
- WebSocket（同步）
前端分层设计（非常关键）
├─ pages // 路由页面
├─ editor // 编辑器内核（高复杂度）
├─ services // API / WebSocket
├─ stores // Pinia
├─ domain // 业务模型（笔记、版本、协作）
├─ infra // 缓存 / IndexedDB / Sync编辑器是一个“子系统”，必须单独拆
四、数据模型设计（前后端统一）
笔记核心模型
Note {
id
title
content (JSON / Delta)
version
updatedAt
}本地缓存模型
LocalNote {
noteId
snapshot
pendingOps
syncStatus
}前端一定要有“未同步状态”概念
五、离线 & 自动同步设计（云笔记的灵魂）
设计原则
- 编辑永远不阻塞
- 网络变化用户无感
- 冲突可回放
实现方案
- IndexedDB 存全文
- 操作日志（Op Log）
- 后台同步任务
Edit → Local Apply → Op Queue
↓
Network Available
↓
Sync & Merge面试官会非常喜欢这一段
六、多人协作设计（进阶亮点）
技术核心
- CRDT（Yjs / Automerge）
- WebSocket 房间
- Awareness（光标、选区）
协作层拆分
- 文档状态（CRDT）
- 用户状态（Awareness）
- 权限校验（Server）
前端承担 70% 的复杂度
七、性能与体验优化
编辑性能
- 大文档分块
- 节流保存
- 虚拟渲染
网络性能
- 增量同步
- 压缩 Delta
- 心跳 & 重连
八、安全 & 权限设计
- Token + Refresh
- 笔记级 ACL
- 分享链接（只读 / 可编辑）
- 操作审计日志
九、AI 能力如何自然接入（加分项）
AI 是“能力插件”，不是核心依赖
- 总结：基于当前文档
- 搜索：向量索引
- 重写：编辑器选区
Editor Selection
↓
AI Service
↓
Patch Apply「云笔记当成一个离线优先、编辑器驱动、可协作的前端应用来设计。 前端不只是渲染层，而是承担了状态管理、同步、冲突解决和用户体验的大部分复杂度，后端更多是存储和协调者。」