Summary: - Implement Prompt management infrastructure and core services - Build admin portal frontend with light theme - Integrate CodeMirror 6 editor for non-technical users Phase 3.5.1: Infrastructure Setup - Create capability_schema for Prompt storage - Add prompt_templates and prompt_versions tables - Add prompt:view/edit/debug/publish permissions - Migrate RVW prompts to database (RVW_EDITORIAL, RVW_METHODOLOGY) Phase 3.5.2: PromptService Core - Implement gray preview logic (DRAFT for debuggers, ACTIVE for users) - Module-level debug control (setDebugMode) - Handlebars template rendering - Variable extraction and validation (extractVariables, validateVariables) - Three-level disaster recovery (database -> cache -> hardcoded fallback) Phase 3.5.3: Management API - 8 RESTful endpoints (/api/admin/prompts/*) - Permission control (PROMPT_ENGINEER can edit, SUPER_ADMIN can publish) Phase 3.5.4: Frontend Management UI - Build admin portal architecture (AdminLayout, OrgLayout) - Add route system (/admin/*, /org/*) - Implement PromptListPage (filter, search, debug switch) - Implement PromptEditor (CodeMirror 6 simplified for clinical users) - Implement PromptEditorPage (edit, save, publish, test, version history) Technical Details: - Backend: 6 files, ~2044 lines (prompt.service.ts 596 lines) - Frontend: 9 files, ~1735 lines (PromptEditorPage.tsx 399 lines) - CodeMirror 6: Line numbers, auto-wrap, variable highlight, search, undo/redo - Chinese-friendly: 15px font, 1.8 line-height, system fonts Next Step: Phase 3.5.5 - Integrate RVW module with PromptService Tested: Backend API tests passed (8/8), Frontend pending user testing Status: Ready for Phase 3.5.5 RVW integration
279 lines
6.1 KiB
Markdown
279 lines
6.1 KiB
Markdown
# 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模块迁移!
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|