feat(pkb): Complete PKB module frontend migration with V3 design

Summary: - Implement PKB Dashboard and Workspace pages based on V3 prototype - Add single-layer header with integrated Tab navigation - Implement 3 work modes: Full Text, Deep Read, Batch Processing - Integrate Ant Design X Chat component for AI conversations - Create BatchModeComplete with template selection and document processing - Add compact work mode selector with dropdown design Backend: - Migrate PKB controllers and services to /modules/pkb structure - Register v2 API routes at /api/v2/pkb/knowledge - Maintain dual API routes for backward compatibility Technical details: - Use Zustand for state management - Handle SSE streaming responses for AI chat - Support document selection for Deep Read mode - Implement batch processing with progress tracking Known issues: - Batch processing API integration pending - Knowledge assets page navigation needs optimization Status: Frontend functional, pending refinement
2026-01-06 22:15:42 +08:00
parent b31255031e
commit 5a17d096a7
226 changed files with 14899 additions and 224 deletions
--- a/docs/08-项目管理/PKB前端验证指南.md
+++ b/docs/08-项目管理/PKB前端验证指南.md
@@ -0,0 +1,272 @@
+# PKB前端功能验证指南
+
+## 🎯 验证目标
+
+验证PKB模块前端功能是否正常运行，包括：
+1. ✅ Dashboard页面渲染
+2. ✅ 创建知识库流程
+3. ✅ Workspace页面及3种工作模式
+4. ✅ Ant Design X Chat集成
+
+---
+
+## 🚀 快速启动
+
+### 1. 启动后端服务
+```bash
+cd D:\MyCursor\AIclinicalresearch\backend
+npm run dev
+```
+
+### 2. 启动前端服务
+```bash
+cd D:\MyCursor\AIclinicalresearch\frontend-v2
+npm run dev
+```
+
+### 3. 访问页面
+打开浏览器访问：`http://localhost:5173/knowledge-base/dashboard`
+
+---
+
+## ✅ 验证清单
+
+### 阶段1：Dashboard页面验证
+
+#### 1.1 页面渲染
+- [ ] 页面正常加载，无白屏
+- [ ] 创建知识库卡片显示正常（蓝色渐变背景）
+- [ ] 5个知识库类型图标显示正常
+- [ ] 现有知识库卡片列表显示（如果有数据）
+
+#### 1.2 创建知识库流程
+**步骤**:
+1. 点击"创建知识库"卡片
+2. 验证Modal弹出
+3. 选择"临床指南"类型
+4. 点击"下一步"
+5. 输入名称："测试知识库V5"
+6. 选择科室："心内科"
+7. 点击"下一步"
+8. 查看文件上传界面
+9. 点击"完成并进入工作台"
+
+**预期结果**:
+- [ ] Modal正常弹出
+- [ ] 3步向导正常切换
+- [ ] 表单验证生效（名称必填）
+- [ ] 成功创建后跳转到Workspace
+
+#### 1.3 样式检查
+- [ ] 创建卡片高度为240px
+- [ ] 卡片圆角为rounded-xl
+- [ ] 悬停时有shadow-lg效果
+- [ ] "进入工作台"按钮为slate-800背景
+
+---
+
+### 阶段2：Workspace页面验证
+
+#### 2.1 页面布局
+- [ ] 深色Header（bg-slate-900）高度为h-14
+- [ ] "返回知识库列表"按钮显示
+- [ ] 知识库名称显示正确
+- [ ] Tab导航显示（智能问答、知识资产）
+- [ ] 默认激活"智能问答"Tab
+
+#### 2.2 智能问答Tab
+**工作模式选择器**:
+- [ ] Collapse组件正常展开/收起
+- [ ] 3种模式Radio正常显示
+- [ ] 全文阅读模式：显示Token使用率圆形进度条
+- [ ] 逐篇精读模式：显示文档选择下拉框
+- [ ] 批处理模式：显示模板选择下拉框
+
+**全文阅读模式**:
+1. 选择"全文阅读模式"
+2. 查看欢迎消息
+3. 输入测试问题："请总结这个知识库的主要内容"
+4. 点击发送
+
+**预期结果**:
+- [ ] 欢迎消息正常显示
+- [ ] 输入框正常工作
+- [ ] 消息发送成功
+- [ ] AI回复正常显示（流式输出）
+- [ ] 消息气泡样式正确（AI: slate-50, 用户: blue-600）
+
+**逐篇精读模式**:
+1. 选择"逐篇精读模式"
+2. 在下拉框中选择1-2篇文档
+3. 查看"已选择 X 篇文档"提示
+4. 输入测试问题
+5. 发送消息
+
+**预期结果**:
+- [ ] 文档选择正常
+- [ ] 最多选5篇限制生效
+- [ ] Alert提示显示
+- [ ] Chat界面正常工作
+
+**批处理模式**:
+1. 选择"批处理模式"
+2. 选择模板："临床研究信息提取"
+3. 点击"开始执行"
+4. 查看进度条
+
+**预期结果**:
+- [ ] 模板选择正常
+- [ ] 执行按钮可点击
+- [ ] 进度条正常显示
+
+#### 2.3 知识资产Tab
+1. 点击"知识资产"Tab
+2. 查看文档列表表格
+
+**预期结果**:
+- [ ] Tab切换正常
+- [ ] 表格正常显示
+- [ ] 文档信息正确（文件名、状态、大小、Tokens、上传时间）
+- [ ] MinerU解析状态徽章正确显示
+- [ ] 删除按钮显示（悬停时）
+
+#### 2.4 PDF侧边栏
+1. 在智能问答Tab中
+2. 点击右侧"展开 PDF 预览"按钮
+3. 查看PDF侧边栏
+
+**预期结果**:
+- [ ] 侧边栏从右侧滑入（animate-slide-in-right）
+- [ ] 宽度为45%
+- [ ] 关闭按钮正常工作
+- [ ] PDF模拟背景正常显示
+
+---
+
+### 阶段3：样式精确度验证
+
+#### 3.1 Dashboard样式
+```css
+✅ 创建卡片: bg-gradient-to-br from-blue-50 to-indigo-50
+✅ 卡片高度: h-[240px]
+✅ 按钮颜色: bg-slate-800 hover:bg-blue-600
+✅ 圆角: rounded-xl
+```
+
+#### 3.2 Workspace样式
+```css
+✅ Header: h-14 bg-slate-900
+✅ Tab激活: border-blue-600 text-blue-600 font-bold
+✅ PDF侧边栏: w-[45%] bg-slate-100
+✅ 消息气泡: bg-slate-50 (AI) / bg-blue-600 (用户)
+```
+
+---
+
+## 🐛 常见问题排查
+
+### 问题1：页面白屏
+**可能原因**:
+- 路由配置错误
+- 组件导入错误
+- API调用失败
+
+**排查步骤**:
+1. 打开浏览器控制台查看错误
+2. 检查Network面板API请求
+3. 检查`moduleRegistry.ts`中PKB模块注册
+
+### 问题2：API请求失败
+**可能原因**:
+- 后端服务未启动
+- API路由不匹配
+- CORS问题
+
+**排查步骤**:
+1. 确认后端服务运行在`http://localhost:3000`
+2. 检查API路由是否为`/api/v2/pkb/*`
+3. 查看后端日志
+
+### 问题3：Chat组件不显示
+**可能原因**:
+- ChatContainer导入路径错误
+- conversationType配置错误
+- requestFn函数错误
+
+**排查步骤**:
+1. 检查`@/shared/components/Chat`导入
+2. 确认`conversationType="pkb"`
+3. 检查`providerConfig.requestFn`实现
+
+### 问题4：样式不正确
+**可能原因**:
+- Tailwind CSS未生效
+- class名称拼写错误
+- 浏览器缓存
+
+**排查步骤**:
+1. 清除浏览器缓存
+2. 检查Tailwind配置
+3. 使用浏览器DevTools检查元素样式
+
+---
+
+## 📊 验证报告模板
+
+```markdown
+## PKB前端验证报告
+
+**验证时间**: YYYY-MM-DD HH:mm
+**验证人**: XXX
+**浏览器**: Chrome/Firefox/Safari
+
+### Dashboard页面
+- [ ] 页面渲染: ✅/❌
+- [ ] 创建流程: ✅/❌
+- [ ] 样式正确: ✅/❌
+- **问题**: （如有）
+
+### Workspace页面
+- [ ] 页面布局: ✅/❌
+- [ ] 智能问答Tab: ✅/❌
+- [ ] 知识资产Tab: ✅/❌
+- [ ] PDF侧边栏: ✅/❌
+- **问题**: （如有）
+
+### 工作模式
+- [ ] 全文阅读: ✅/❌
+- [ ] 逐篇精读: ✅/❌
+- [ ] 批处理: ✅/❌
+- **问题**: （如有）
+
+### 总体评价
+- **完成度**: XX%
+- **建议**: XXX
+```
+
+---
+
+## 🎯 验证成功标准
+
+### 必须通过（P0）
+- ✅ Dashboard页面正常渲染
+- ✅ 创建知识库流程完整
+- ✅ Workspace页面正常显示
+- ✅ 3种工作模式可切换
+- ✅ Chat组件正常工作
+
+### 应该通过（P1）
+- ✅ 样式100%遵循设计稿
+- ✅ 动画效果流畅
+- ✅ 响应式布局正常
+
+### 可以优化（P2）
+- 🔄 文件上传功能
+- 🔄 批处理结果展示
+- 🔄 PDF真实内容预览
+
+---
+
+**下一步**: 根据验证结果修复问题，然后进入RVW模块迁移！
+
+