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

## 1. 集成目标

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

## 2. 当前结构

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

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

## 3. 打开文档流程

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

关闭流程：

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

## 4. 接口边界

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

```ts
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 中追加临时状态。实施前应先确定文档版本、并发冲突、用户身份和错误恢复策略。