feat(dc): Complete Tool B frontend development with UI optimization
- Implement Tool B 5-step workflow (upload, schema, processing, verify, result) - Add back navigation button to Portal - Optimize Step 2 field list styling to match prototype - Fix step 3 label: 'dual-blind' to 'dual-model' - Create API service layer with 7 endpoints - Integrate Tool B route into DC module - Add comprehensive TypeScript types Components (~1100 lines): - index.tsx: Main Tool B entry with state management - Step1Upload.tsx: File upload and health check - Step2Schema.tsx: Smart template configuration - Step3Processing.tsx: Dual-model extraction progress - Step4Verify.tsx: Conflict verification workbench - Step5Result.tsx: Result display - StepIndicator.tsx: Step progress component - api/toolB.ts: API service layer Status: Frontend complete, ready for API integration
This commit is contained in:
336
docs/03-业务模块/DC-数据清洗整理/06-开发记录/ToolB浏览器测试计划-2025-12-03.md
Normal file
336
docs/03-业务模块/DC-数据清洗整理/06-开发记录/ToolB浏览器测试计划-2025-12-03.md
Normal file
@@ -0,0 +1,336 @@
|
||||
# Tool B 浏览器测试计划
|
||||
|
||||
**日期**: 2025-12-03
|
||||
**测试人员**: 开发团队
|
||||
**测试范围**: Tool B（病历结构化机器人）完整流程
|
||||
**测试环境**:
|
||||
- 前端: http://localhost:5173
|
||||
- 后端: http://localhost:3000
|
||||
|
||||
---
|
||||
|
||||
## 📋 测试清单
|
||||
|
||||
### 一、前置条件
|
||||
- [ ] 前端服务已启动（`npm run dev` in frontend-v2）
|
||||
- [ ] 后端服务已启动（`npm run dev` in backend）
|
||||
- [ ] 数据库已启动（PostgreSQL）
|
||||
- [ ] 浏览器已打开（推荐Chrome/Edge）
|
||||
|
||||
---
|
||||
|
||||
### 二、Step 1：文件上传与健康检查
|
||||
|
||||
#### 测试点1.1：页面访问
|
||||
- [ ] 访问 `http://localhost:5173/data-cleaning/tool-b`
|
||||
- [ ] 页面能正常加载
|
||||
- [ ] 顶部显示"病历结构化机器人"
|
||||
- [ ] 步骤指示器显示"1. 选列与体检"高亮
|
||||
- [ ] 双模型标识显示（DeepSeek-V3 & Qwen-Max）
|
||||
|
||||
#### 测试点1.2：文件上传
|
||||
- [ ] 看到虚线边框的上传区域
|
||||
- [ ] 点击能触发文件选择对话框
|
||||
- [ ] 选择Excel文件后能显示文件信息
|
||||
- 文件名显示正确
|
||||
- 文件大小显示
|
||||
- 行数显示
|
||||
- [ ] "更换文件"按钮可用
|
||||
|
||||
#### 测试点1.3：列选择
|
||||
- [ ] 下拉框显示3个选项：
|
||||
- 出院小结 (Summary_Text)
|
||||
- 病理报告 (Pathology)
|
||||
- 错误示范：病人ID列
|
||||
- [ ] 选择列后触发健康检查
|
||||
|
||||
#### 测试点1.4：健康检查
|
||||
- [ ] 选择"病理报告"
|
||||
- 显示Loading状态（旋转图标）
|
||||
- 1秒后显示绿色成功卡片
|
||||
- 显示"健康度优秀，预计消耗约 450.0k Token"
|
||||
- 显示统计信息（平均字符、空值率、预计Token）
|
||||
- [ ] 选择"病人ID列"
|
||||
- 显示红色警告卡片
|
||||
- 显示"空值率过高（85.0%），该列不适合提取"
|
||||
- "下一步"按钮禁用
|
||||
|
||||
#### 测试点1.5：导航
|
||||
- [ ] 健康检查通过后，"下一步"按钮可用
|
||||
- [ ] 点击"下一步"进入Step 2
|
||||
|
||||
**预期结果**: 所有功能正常，UI流畅，无控制台错误
|
||||
|
||||
---
|
||||
|
||||
### 三、Step 2：智能模板配置
|
||||
|
||||
#### 测试点2.1：页面状态
|
||||
- [ ] 步骤指示器显示"2. 智能模版"高亮
|
||||
- [ ] Step 1指示器显示为完成状态（绿色勾）
|
||||
- [ ] 页面显示紫色背景的配置区域
|
||||
|
||||
#### 测试点2.2：疾病类型选择
|
||||
- [ ] 下拉框默认选中"肺癌 (Lung Cancer)"
|
||||
- [ ] 切换到"糖尿病 (Diabetes)"
|
||||
- [ ] 切换到"高血压 (Hypertension)"
|
||||
- [ ] 切换后字段列表更新
|
||||
|
||||
#### 测试点2.3：报告类型选择
|
||||
- [ ] 下拉框默认选中"病理报告 (Pathology)"
|
||||
- [ ] 切换到"入院记录 (Admission Note)"
|
||||
- [ ] 切换后字段列表更新
|
||||
|
||||
#### 测试点2.4：字段列表
|
||||
- [ ] 左侧显示字段列表
|
||||
- [ ] 肺癌病理报告显示5个字段：
|
||||
- 病理类型
|
||||
- 分化程度
|
||||
- 肿瘤大小
|
||||
- 淋巴结转移
|
||||
- 免疫组化
|
||||
- [ ] 每个字段显示名称和描述
|
||||
- [ ] 字段可以编辑（点击输入框修改）
|
||||
|
||||
#### 测试点2.5：字段操作
|
||||
- [ ] 点击"添加字段"按钮
|
||||
- 新增一行"新字段 / 描述..."
|
||||
- 可以编辑新字段
|
||||
- [ ] 点击删除按钮（垃圾桶图标）
|
||||
- 字段被删除
|
||||
- [ ] 删除所有字段
|
||||
- 显示"请选择模板或添加字段"
|
||||
- "开始提取"按钮禁用
|
||||
|
||||
#### 测试点2.6：Prompt预览
|
||||
- [ ] 右侧显示深色代码编辑器
|
||||
- [ ] 显示"System Prompt Preview"标题
|
||||
- [ ] Prompt内容实时更新（根据字段变化）
|
||||
- [ ] 代码高亮显示（紫色/蓝色/绿色）
|
||||
- [ ] 显示JSON格式的字段定义
|
||||
|
||||
#### 测试点2.7：导航
|
||||
- [ ] 点击"上一步"返回Step 1
|
||||
- [ ] 点击"开始提取"进入Step 3
|
||||
|
||||
**预期结果**: 模板配置流畅，Prompt实时预览，无错误
|
||||
|
||||
---
|
||||
|
||||
### 四、Step 3：双盲提取进度
|
||||
|
||||
#### 测试点3.1：页面状态
|
||||
- [ ] 步骤指示器显示"3. 双盲提取"高亮
|
||||
- [ ] Step 1和2显示为完成状态
|
||||
- [ ] 页面居中显示进度动画
|
||||
|
||||
#### 测试点3.2：动画效果
|
||||
- [ ] 显示旋转的圆环（紫色边框）
|
||||
- [ ] 内部显示2个圆点（蓝色和橙色）
|
||||
- [ ] 圆点有弹跳动画
|
||||
- [ ] 标题显示"双盲提取交叉验证中..."
|
||||
|
||||
#### 测试点3.3：进度条
|
||||
- [ ] 进度条从0%开始
|
||||
- [ ] 进度条平滑增长
|
||||
- [ ] 进度条达到100%
|
||||
|
||||
#### 测试点3.4：日志输出
|
||||
- [ ] 显示日志面板（slate背景）
|
||||
- [ ] 日志按时间顺序输出：
|
||||
- "初始化双模型引擎 (DeepSeek-V3 & Qwen-Max)..."
|
||||
- "PII 脱敏完成..."
|
||||
- "DeepSeek: 提取进度 XX%"
|
||||
- "Qwen: 提取进度 XX%"
|
||||
- "正在进行交叉验证 (Cross-Validation)..."
|
||||
- [ ] 日志有时间戳
|
||||
- [ ] 日志有光标闪烁
|
||||
|
||||
#### 测试点3.5：自动跳转
|
||||
- [ ] 进度达到100%后等待0.8秒
|
||||
- [ ] 自动跳转到Step 4
|
||||
|
||||
**预期结果**: 进度动画流畅，日志输出正常，自动跳转
|
||||
|
||||
---
|
||||
|
||||
### 五、Step 4：冲突验证工作台（核心功能）
|
||||
|
||||
#### 测试点4.1：页面状态
|
||||
- [ ] 步骤指示器显示"4. 交叉验证"高亮
|
||||
- [ ] 顶部显示双模型标识（DeepSeek蓝色 / Qwen橙色）
|
||||
- [ ] 显示统计信息
|
||||
- 总数据: 3
|
||||
- X 条冲突待裁决（应该是2条）
|
||||
|
||||
#### 测试点4.2：工具栏
|
||||
- [ ] 显示"导出当前结果"按钮
|
||||
- [ ] 显示"完成并入库"按钮
|
||||
- [ ] 冲突计数实时更新
|
||||
- [ ] 当所有冲突解决后，显示"所有冲突已解决"（绿色）
|
||||
|
||||
#### 测试点4.3：数据网格
|
||||
- [ ] 显示表格布局
|
||||
- [ ] 表头包含：# / 原文摘要 / 病理类型 / 分化程度 / 肿瘤大小 / 淋巴结转移 / 免疫组化 / 状态
|
||||
- [ ] 显示3行数据
|
||||
- [ ] 行号显示正确（1, 2, 3）
|
||||
|
||||
#### 测试点4.4：数据行1（有冲突）
|
||||
- [ ] 原文摘要显示"病理诊断：(右肺上叶)浸润性腺癌..."
|
||||
- [ ] 病理类型：显示单一值"浸润性腺癌"（一致）
|
||||
- [ ] 分化程度：显示2个按钮
|
||||
- DS按钮："未提及"（蓝色边框）
|
||||
- QW按钮："中分化"（橙色边框）
|
||||
- 背景为橙色（冲突标识）
|
||||
- [ ] 肿瘤大小：显示2个按钮（冲突）
|
||||
- [ ] 淋巴结转移：显示2个按钮（冲突）
|
||||
- [ ] 免疫组化：显示2个按钮（冲突）
|
||||
- [ ] 状态：显示"待裁决"（橙色徽章，pulse动画）
|
||||
|
||||
#### 测试点4.5：数据行2（无冲突）
|
||||
- [ ] 原文摘要显示"送检(左肺下叶)组织..."
|
||||
- [ ] 所有字段显示单一值（绿色勾）
|
||||
- [ ] 状态：显示"通过"（绿色徽章）
|
||||
|
||||
#### 测试点4.6：数据行3（有冲突）
|
||||
- [ ] 原文摘要显示"右肺中叶穿刺活检..."
|
||||
- [ ] 免疫组化字段有冲突
|
||||
- [ ] 状态：显示"待裁决"
|
||||
|
||||
#### 测试点4.7：冲突采纳
|
||||
- [ ] 点击行1的"分化程度" DS按钮
|
||||
- 单元格变为已解决状态
|
||||
- 显示"未提及"（无冲突按钮）
|
||||
- 悬停显示重置按钮
|
||||
- [ ] 点击行1的"肿瘤大小" QW按钮
|
||||
- 单元格变为已解决状态
|
||||
- 显示"3.2*2.5*2.0cm"
|
||||
- [ ] 依次解决所有冲突
|
||||
- 冲突计数减少
|
||||
- 行状态变为"通过"
|
||||
- 所有冲突解决后显示"所有冲突已解决"
|
||||
|
||||
#### 测试点4.8：侧边栏
|
||||
- [ ] 点击任意行
|
||||
- 右侧滑出侧边栏
|
||||
- 侧边栏显示"病历原文详情"
|
||||
- 显示Row ID
|
||||
- 显示完整原文（非摘要）
|
||||
- [ ] 原文显示格式正确（字体、行距）
|
||||
- [ ] 底部显示"快速导航"标签
|
||||
- 冲突字段显示橙色
|
||||
- 已解决字段显示白色
|
||||
- [ ] 点击X按钮关闭侧边栏
|
||||
- 侧边栏滑出
|
||||
- [ ] 点击表格其他行
|
||||
- 侧边栏内容更新
|
||||
|
||||
#### 测试点4.9：交互体验
|
||||
- [ ] 鼠标悬停行高亮（bg-slate-50）
|
||||
- [ ] 选中行高亮（bg-purple-50/50）
|
||||
- [ ] 冲突按钮hover效果（边框加深）
|
||||
- [ ] 表格可滚动
|
||||
- [ ] 侧边栏动画流畅（300ms transition）
|
||||
|
||||
#### 测试点4.10：导航
|
||||
- [ ] 点击"完成并入库"进入Step 5
|
||||
|
||||
**预期结果**: 验证工作台功能完整，交互流畅，冲突裁决正常
|
||||
|
||||
---
|
||||
|
||||
### 六、Step 5：结果展示
|
||||
|
||||
#### 测试点5.1：页面状态
|
||||
- [ ] 步骤指示器显示"5. 完成"高亮
|
||||
- [ ] 所有步骤显示为完成状态
|
||||
- [ ] 页面居中显示
|
||||
|
||||
#### 测试点5.2：成功图标
|
||||
- [ ] 显示绿色圆形背景
|
||||
- [ ] 内部显示绿色勾图标
|
||||
- [ ] 标题显示"结构化处理完成"
|
||||
|
||||
#### 测试点5.3：统计信息
|
||||
- [ ] 显示处理总结文案
|
||||
- "双模型交叉验证已完成"
|
||||
- "人工裁决修正了 X 条冲突数据"
|
||||
- "最终数据集包含 3 条高质量记录"
|
||||
|
||||
#### 测试点5.4：统计卡片
|
||||
- [ ] 左侧卡片：隐私安全
|
||||
- 显示盾牌图标
|
||||
- 显示"PII 已脱敏"
|
||||
- [ ] 右侧卡片：Token 消耗
|
||||
- 显示闪电图标
|
||||
- 显示"~450k Tokens"
|
||||
|
||||
#### 测试点5.5：操作按钮
|
||||
- [ ] "下载结果 Excel"按钮
|
||||
- 白色背景，灰色边框
|
||||
- Hover效果正常
|
||||
- [ ] "去编辑器清洗"按钮
|
||||
- 绿色背景
|
||||
- 有阴影
|
||||
- Hover效果正常
|
||||
|
||||
**预期结果**: 结果页显示正常，统计准确，按钮可用
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Bug追踪
|
||||
|
||||
### 发现的问题
|
||||
| # | 严重性 | 位置 | 描述 | 状态 |
|
||||
|---|--------|------|------|------|
|
||||
| 1 | | | | ⏳ |
|
||||
| 2 | | | | ⏳ |
|
||||
| 3 | | | | ⏳ |
|
||||
|
||||
---
|
||||
|
||||
## 📊 测试结果
|
||||
|
||||
### 功能完整性
|
||||
- [ ] Step 1: 文件上传与健康检查 - ___%
|
||||
- [ ] Step 2: 智能模板配置 - ___%
|
||||
- [ ] Step 3: 双盲提取进度 - ___%
|
||||
- [ ] Step 4: 冲突验证工作台 - ___%
|
||||
- [ ] Step 5: 结果展示 - ___%
|
||||
|
||||
### 综合评分
|
||||
- **功能完整性**: ___/100
|
||||
- **UI美观度**: ___/100
|
||||
- **交互流畅度**: ___/100
|
||||
- **代码质量**: ___/100
|
||||
|
||||
### 最终结论
|
||||
- [ ] ✅ 通过 - 可以提交Git
|
||||
- [ ] ⚠️ 通过但有小问题 - 记录问题后提交
|
||||
- [ ] ❌ 不通过 - 需要修复后重测
|
||||
|
||||
---
|
||||
|
||||
## 📝 测试记录
|
||||
|
||||
### 测试环境
|
||||
- 浏览器: _______________
|
||||
- 操作系统: _______________
|
||||
- 前端版本: _______________
|
||||
- 后端版本: _______________
|
||||
- 测试日期: 2025-12-03
|
||||
- 测试人员: _______________
|
||||
|
||||
### 测试备注
|
||||
```
|
||||
（请在这里记录测试过程中的任何发现、建议或问题）
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**测试完成后，请更新此文档并标记所有测试点的完成状态！**
|
||||
|
||||
Reference in New Issue
Block a user