新编辑器集成快速参考

🎯 核心原则

保留聊天面板,完全重写EditorPanel

❌ 不要改: ChatPanel、ResizableLayout、App.tsx
✅ 完全重写: EditorPanel (删除旧代码,直接集成BlockEditor)

📁 文件变更速查

✅ 完全不变的文件

src/
├── App.tsx                        ✅ 不动
├── components/
│   ├── ChatPanel/                ✅ 整个目录不动
│   │   ├── ChatPanel.tsx
│   │   ├── MessageList.tsx
│   │   ├── MessageItem.tsx
│   │   └── MessageInput.tsx
│   ├── Layout/
│   │   └── ResizableLayout.tsx   ✅ 不动
│   └── ExportRecordList/         ✅ 不动
└── stores/
    ├── uiStore.ts                ✅ 不动
    └── chatStore.ts              ✅ 不动

⭐ 新增的文件

src/
├── components/
│   └── Editor/                   ⭐ 新增整个目录
│       ├── BlockEditor.tsx
│       ├── BlockCanvas.tsx
│       ├── BlockRenderer.tsx
│       ├── blocks/
│       └── toolbar/
├── stores/
│   └── editorStore.ts            ⭐ 新增
├── services/
│   └── blockService.ts           ⭐ 新增
├── types/
│   └── editor.ts                 ⭐ 新增
└── utils/
    ├── blockOperations.ts        ⭐ 新增
    ├── richTextConverter.ts      ⭐ 新增
    └── styleResolver.ts          ⭐ 新增

🔧 需要重写的文件

src/components/EditorPanel/
├── EditorPanel.tsx               🔧 完全重写(删除旧代码)
└── EditorPanel.css               🔧 新增

❌ 需要删除的文件

src/components/EditorPanel/
├── WYSIWYGEditor.tsx             ❌ 删除
├── WYSIWYGEditor.css             ❌ 删除
└── 其他MDXEditor相关文件          ❌ 删除

# MDXEditor依赖
package.json:
  - @mdxeditor/editor              ❌ 删除依赖

📝 EditorPanel重写示例

新的EditorPanel.tsx

// src/components/EditorPanel/EditorPanel.tsx
import React from 'react';
import { BlockEditor } from '../Editor/BlockEditor';
import './EditorPanel.css';

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

/**
 * EditorPanel - 文档编辑面板
 * 极简外壳,直接集成BlockEditor
 */
export const EditorPanel: React.FC<EditorPanelProps> = ({
  documentId,
  initialDocumentName,
  onClose
}) => {
  return (
    <div className="editor-panel">
      <BlockEditor 
        documentId={documentId}
        onClose={onClose}
      />
    </div>
  );
};

export default EditorPanel;

Props接口保持兼容

// ✅ App.tsx传递的Props保持不变
<EditorPanel 
  documentId={previewDocumentId}
  initialDocumentName={previewDocumentName}
  onClose={handleCloseEditor}
/>

// EditorPanel接收后传递给BlockEditor
// initialDocumentName在BlockEditor内部使用

🧪 测试检查清单

基础功能

左侧聊天面板正常显示消息
发送消息功能正常
点击"预览"按钮打开右侧编辑器
BlockEditor正确加载blocks数据
编辑并保存文档
关闭编辑器返回导出记录列表
ResizableLayout拖拽调整正常

集成测试

# 1. 安装依赖(新增的packages)
npm install

# 2. 运行开发服务器
npm run dev

# 3. 测试流程
# - 发送聊天消息
# - 点击"预览"按钮
# - 验证BlockEditor显示
# - 编辑文档并保存
# - 关闭编辑器
# - 验证聊天面板功能未受影响

🚀 开发流程

第1步: 创建feature分支 (Week 1)

git checkout -b feature/new-block-editor

第2步: 独立开发BlockEditor (Week 1-6)

# 在新目录开发,不影响主分支
src/components/Editor/

第3步: 重写EditorPanel (Week 7)

# 1. 备份旧文件
git mv src/components/EditorPanel src/components/EditorPanel.backup

# 2. 创建新EditorPanel
mkdir src/components/EditorPanel
# 创建新的EditorPanel.tsx(极简外壳)

# 3. 删除MDXEditor依赖
npm uninstall @mdxeditor/editor

第4步: 本地测试 (Week 7)

npm run dev

# 测试:
# - 聊天功能
# - 打开编辑器
# - 编辑和保存
# - 关闭编辑器
# - 布局拖拽

第5步: 合并到主分支 (Week 8)

git checkout main
git merge feature/new-block-editor

# 部署到测试环境
npm run build
# 部署...

# 团队测试1-2周

第6步: 清理旧代码 (Week 9-10)

# 确认稳定后删除备份
rm -rf src/components/EditorPanel.backup

# 提交清理
git add .
git commit -m "chore: remove old editor backup"

⚠️ 注意事项

DO ✅

✅ 创建feature分支独立开发
✅ 备份旧EditorPanel(git mv到.backup)
✅ 完全重写EditorPanel(极简外壳)
✅ 保持Props接口不变
✅ 完整测试聊天功能
✅ 确认稳定后删除备份和旧依赖

DON'T ❌

❌ 不要修改App.tsx
❌ 不要修改ChatPanel任何文件
❌ 不要修改ResizableLayout
❌ 不要修改uiStore、chatStore
❌ 不要保留WYSIWYGEditor代码(除非在.backup中)

🔗 相关文档

集成详细方案: 新编辑器与聊天面板集成方案.md
架构设计: 新编辑器架构设计.md
开发手册: 新编辑器开发手册.md
实现路线图: 新编辑器实现路线图.md

💡 快速问答

Q: 聊天功能会受影响吗?
A: 不会,ChatPanel完全独立,EditorPanel只是右侧面板的一部分。

Q: 需要修改多少文件?
A: 需要重写1个文件(EditorPanel.tsx),新增约20个文件在新目录。

Q: 如何快速回滚?
A: 从Git历史恢复或使用备份目录(.backup)恢复。

Q: 开发期间如何不影响其他人?
A: 在feature分支开发,主分支功能不受影响。合并前充分测试。

Q: 旧的WYSIWYGEditor代码还保留吗?
A: 建议备份1-2周后删除,确保新编辑器稳定运行。

版本: v1.0
更新: 2026-07-03

集成快速参考.md 6.2 KB History Raw