编辑器与聊天面板集成方案

1. 集成目标

当前应用保留聊天工作流和左右双面板布局，右侧编辑能力已经统一使用块编辑器。聊天面板不需要感知具体 block 组件，只负责创建或打开文档，并通过 UI store 传递文档 ID。

2. 当前结构

App
├── ChatPanel
│   ├── MessageList
│   ├── MessageItem
│   └── MessageInput
└── ResizableLayout
    └── 右侧视图
        ├── ExportRecordList
        └── EditorPanel
            └── EditorWithOutline
                ├── DocumentOutline
                └── BlockEditor

App.tsx 使用 React.lazy 加载面板。右侧视图的选择由 uiStore.previewDocumentId 决定：有文档 ID 时显示编辑器，否则显示导出记录。

3. 打开文档流程

聊天消息中的预览操作
  -> MessageItem
  -> uiStore.openDocumentPreview(documentId, documentName)
  -> App 读取 previewDocumentId
  -> EditorPanel
  -> EditorWithOutline
  -> BlockEditor
  -> editorStore.loadDocument(documentId)
  -> blockService.getBlocks(documentId)

关闭流程：

用户点击工具栏关闭。
如果 hasModified 为 true，显示未保存确认框。
用户确认后调用 onClose。
App 清除预览状态，右侧返回导出记录列表。

4. 接口边界

聊天面板与编辑器之间只传递稳定的面板参数：

interface EditorPanelProps {
  documentId: string;
  initialDocumentName?: string | null;
  onClose: () => void;
}

聊天组件不应直接操作 editorStore.blocks，编辑器也不应直接读取聊天消息。跨面板状态使用 uiStore，文档内容使用 editorStore，聊天内容使用 chatStore。

5. 数据和服务分工

层	负责内容
`chatStore`	消息、会话、流式 AI 回复
`documentStore`	文档创建和文档基础操作
`uiStore`	预览文档、面板偏好和全局 UI 状态
`editorStore`	blocks、脏块、保存、重试和编辑状态
`blockService`	blocks API 请求
`exportService`	后端 Word 导出
`clientExportService`	浏览器 PDF 和 Markdown 导出

6. 兼容性规则

EditorPanel 继续保留，不能将 App 直接改为调用内部 block 组件。
不再保留旧 WYSIWYGEditor、MDXEditor 或 Feature Flag 分支。
新增编辑器能力应优先放在 Editor 子树或 editorStore，避免扩大 ChatPanel 的职责。
文档名称只用于工具栏显示，不应覆盖后端返回的 block 数据。
后端返回的旧格式文档如果无法转换为 blocks，应显示明确错误，不要在前端隐式猜测格式。

7. 集成验证

基础流程

ChatPanel 可以加载和发送消息。
聊天消息中的文档预览操作可以打开右侧编辑器。
编辑器可以加载标题、段落、表格、图片和目录 block。
修改内容后出现未保存状态。
自动保存和手动保存均能更新后端。
关闭未保存文档时显示确认框。
关闭后右侧恢复导出记录列表。

资源和性能

ChatPanel、EditorPanel 和 ExportRecordList 使用懒加载。
PDF 和截图库只在 PDF 导出时加载。
mammoth 只在 Word 内容解析时加载。
生产验证使用 npm run serve:prod，不要用开发服务器替代 Lighthouse 目标。

8. 后续扩展边界

协同编辑、版本回滚、搜索替换和权限隔离都需要后端协议支持，不能只在 ChatPanel 或 EditorPanel 中追加临时状态。实施前应先确定文档版本、并发冲突、用户身份和错误恢复策略。

新编辑器与聊天面板集成方案.md 3.8 KB History Raw