MuMuAINovel/frontend/INSTALLATION.md

安装和测试指南

1. 安装前端依赖

在完成所有代码更改后，需要安装新添加的npm包：

cd frontend
npm install

这将安装以下新依赖：

• react-diff-viewer-continued: 用于版本对比的diff查看器

2. 重启后端服务

由于修改了数据模型，需要重启后端服务以加载新的模型定义：

# 在项目根目录
cd backend
python -m uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

3. 启动前端开发服务器

cd frontend
npm run dev

4. 测试功能流程

4.1 基本流程测试

1. 打开章节列表

   • 进入任意项目
   • 查看章节列表

2. 分析章节

   • 点击某个章节的"分析"按钮
   • 等待AI分析完成
   • 查看分析结果和改进建议

3. 重新生成章节

   • 在分析结果页面，点击"根据建议重新生成"
   • 选择要应用的建议
   • 可以添加自定义修改要求
   • 配置生成参数（字数、保留元素等）
   • 勾选"保存为版本历史"（不勾选自动应用）
   • 点击"开始重新生成"
   • 观察流式生成过程

4. 查看版本对比

   • 生成完成后，点击"查看版本对比"按钮
   • 进入版本管理器界面

5. 版本管理操作

   • 版本列表: 查看所有历史版本
   • 预览版本: 点击"预览"查看某个版本的完整内容
   • 对比版本:
     • 点击第一个版本的"对比"按钮
     • 再点击第二个版本的"对比"按钮
     • 自动切换到"对比"标签页
     • 查看并排diff对比
   • 恢复版本: 点击"恢复"将章节内容还原到该版本
   • 删除版本: 删除不需要的历史版本（当前激活版本不能删除）

4.2 测试场景

场景1：优化情感描写

1. 分析一个章节
2. 查看建议中关于情感的建议
3. 重新生成时选择情感相关建议
4. 设置重点优化方向为"情感渲染"
5. 生成后对比新旧版本的差异

场景2：调整节奏

1. 选择节奏问题的建议
2. 添加自定义指令："加快前半部分节奏，增强紧张感"
3. 设置目标字数适当减少（如从3000减到2500）
4. 生成后查看结构变化

场景3：版本管理

1. 对同一章节重新生成多次（使用不同建议）
2. 在版本管理器中浏览所有版本
3. 对比不同版本的差异
4. 选择最满意的版本恢复

5. 验证清单

• 依赖安装无错误
• 前后端服务正常启动
• 章节分析功能正常
• 重新生成功能正常
• 流式生成显示正常
• 版本保存成功
• 版本列表显示正确
• 版本预览功能正常
• 版本对比diff显示正确
• 版本恢复功能正常
• 版本删除功能正常
• 移动端适配正常

6. 常见问题

Q1: 依赖安装失败

# 清除缓存重试
npm cache clean --force
npm install

Q2: 后端启动报错

• 检查是否运行了数据库迁移脚本
• 确认模型定义与数据库表结构一致

Q3: 版本对比不显示

• 检查浏览器控制台是否有JavaScript错误
• 确认react-diff-viewer-continued正确安装

Q4: 重新生成后看不到新内容

• 检查是否勾选了"自动应用"
• 查看版本管理器中是否有新版本记录

7. 性能优化建议

1. 首次加载优化

   • react-diff-viewer-continued是较大的依赖
   • 可以考虑代码分割（lazy loading）

2. 版本列表优化

   • 如果版本过多，考虑分页加载
   • 添加版本数量限制提示

3. diff计算优化

   • 对于超长文本，可以限制diff行数
   • 添加加载提示

8. 下一步优化方向

1. AI质量评分对比

   • 在版本对比时显示质量分数变化
   • 自动标注改进/退步的指标

2. 批量操作

   • 支持批量删除历史版本
   • 支持版本导出/导入

3. 协作功能

   • 版本评论和讨论
   • 多人协作编辑

4. 智能推荐

   • 基于历史生成结果推荐最佳配置
   • 学习用户偏好自动调整参数