feat(dc): Complete Phase 1 - Portal workbench page development
Summary: - Implement DC module Portal page with 3 tool cards - Create ToolCard component with decorative background and hover animations - Implement TaskList component with table layout and progress bars - Implement AssetLibrary component with tab switching and file cards - Complete database verification (4 tables confirmed) - Complete backend API verification (6 endpoints ready) - Optimize UI to match prototype design (V2.html) Frontend Components (~715 lines): - components/ToolCard.tsx - Tool cards with animations - components/TaskList.tsx - Recent tasks table view - components/AssetLibrary.tsx - Data asset library with tabs - hooks/useRecentTasks.ts - Task state management - hooks/useAssets.ts - Asset state management - pages/Portal.tsx - Main portal page - types/portal.ts - TypeScript type definitions Backend Verification: - Backend API: 1495 lines code verified - Database: dc_schema with 4 tables verified - API endpoints: 6 endpoints tested (templates API works) Documentation: - Database verification report - Backend API test report - Phase 1 completion summary - UI optimization report - Development task checklist - Development plan for Tool B Status: Phase 1 completed (100%), ready for browser testing Next: Phase 2 - Tool B Step 1 and 2 development
This commit is contained in:
357
docs/03-业务模块/ASL-AI智能文献/05-开发记录/2025-01-23_全文复筛前端开发完成.md
Normal file
357
docs/03-业务模块/ASL-AI智能文献/05-开发记录/2025-01-23_全文复筛前端开发完成.md
Normal file
@@ -0,0 +1,357 @@
|
||||
# 全文复筛前端开发完成总结
|
||||
|
||||
**日期**: 2025-01-23
|
||||
**开发阶段**: Week 2 (Day 6-8)
|
||||
**开发者**: AI Assistant
|
||||
**状态**: ✅ 已完成
|
||||
|
||||
---
|
||||
|
||||
## 📋 开发概览
|
||||
|
||||
### 完成内容
|
||||
|
||||
本次开发完成了全文复筛功能的前端MVP实现，包括4个核心页面、1个独立组件、API客户端和专用Hooks。
|
||||
|
||||
### 核心特性
|
||||
|
||||
1. **完整的用户流程**：设置 → 进度 → 审核 → 结果
|
||||
2. **双模型对比**：DeepSeek-V3 + Qwen-Max 12字段评估
|
||||
3. **独立组件设计**：与标题摘要初筛完全解耦
|
||||
4. **云原生架构**：前端生成Excel、零文件落盘
|
||||
|
||||
---
|
||||
|
||||
## 📂 文件清单
|
||||
|
||||
### 新增页面 (4个)
|
||||
|
||||
```
|
||||
frontend-v2/src/modules/asl/pages/
|
||||
├── FulltextSettings.tsx (621行) - 设置与启动
|
||||
├── FulltextProgress.tsx (411行) - 任务进度
|
||||
├── FulltextWorkbench.tsx (504行) - 审核工作台
|
||||
└── FulltextResults.tsx (339行) - 结果统计
|
||||
```
|
||||
|
||||
### 新增组件 (1个)
|
||||
|
||||
```
|
||||
frontend-v2/src/modules/asl/components/
|
||||
└── FulltextDetailDrawer.tsx (441行) - 详情与复核抽屉
|
||||
```
|
||||
|
||||
### 新增Hooks (2个)
|
||||
|
||||
```
|
||||
frontend-v2/src/modules/asl/hooks/
|
||||
├── useFulltextTask.ts (58行) - 任务进度Hook
|
||||
└── useFulltextResults.ts (81行) - 结果列表Hook
|
||||
```
|
||||
|
||||
### 修改文件 (3个)
|
||||
|
||||
```
|
||||
frontend-v2/src/modules/asl/
|
||||
├── index.tsx - 添加全文复筛路由
|
||||
├── components/ASLLayout.tsx - 添加侧边栏菜单
|
||||
└── api/index.ts - 添加全文复筛API
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 核心功能实现
|
||||
|
||||
### 1. FulltextSettings 页面
|
||||
|
||||
**功能**：
|
||||
- ✅ PICOS标准展示（只读、可折叠）
|
||||
- ✅ 三种文献导入方式（初筛/手动/知识库）
|
||||
- ✅ 文献列表管理
|
||||
- ✅ PDF上传与状态管理
|
||||
- ✅ 批量操作（删除）
|
||||
- ✅ 启动筛选任务
|
||||
|
||||
**技术亮点**：
|
||||
- Tab切换导入方式
|
||||
- 实时统计（总数/就绪/上传中/失败）
|
||||
- 条件启动（至少1篇PDF就绪）
|
||||
|
||||
### 2. FulltextProgress 页面
|
||||
|
||||
**功能**：
|
||||
- ✅ 实时进度轮询（每2秒）
|
||||
- ✅ 进度条与百分比
|
||||
- ✅ 统计卡片（成功/待处理/冲突/失败）
|
||||
- ✅ 成本统计（Token/费用）
|
||||
- ✅ 时间统计（已用时/预计剩余）
|
||||
- ✅ 任务完成自动跳转
|
||||
|
||||
**技术亮点**：
|
||||
- React Query自动轮询
|
||||
- 智能停止轮询（任务完成/失败时）
|
||||
- 预估剩余时间计算
|
||||
|
||||
### 3. FulltextWorkbench 页面（核心）
|
||||
|
||||
**功能**：
|
||||
- ✅ PICOS标准折叠卡片
|
||||
- ✅ Tab筛选（全部/冲突/已纳入/已排除/已复核）
|
||||
- ✅ 双行表格（每篇文献2行）
|
||||
- ✅ 冲突文献高亮（红色背景）
|
||||
- ✅ 展开查看12字段详情
|
||||
- ✅ 点击"复核"打开Drawer
|
||||
|
||||
**技术亮点**：
|
||||
- 双行表格数据转换函数
|
||||
- `rowSpan`实现合并单元格
|
||||
- 展开行展示12字段对比
|
||||
- 冲突状态可视化
|
||||
|
||||
### 4. FulltextResults 页面
|
||||
|
||||
**功能**：
|
||||
- ✅ 统计概览卡片（4个）
|
||||
- ✅ PRISMA排除原因统计
|
||||
- ✅ Tab切换结果列表
|
||||
- ✅ 批量选择与导出
|
||||
- ✅ Excel导出（前端生成）
|
||||
|
||||
**技术亮点**：
|
||||
- 排除原因柱状图（Progress组件）
|
||||
- 多选行支持
|
||||
- 前端Excel生成（云原生）
|
||||
|
||||
### 5. FulltextDetailDrawer 组件（独立）
|
||||
|
||||
**功能**：
|
||||
- ✅ Tab1: 双模型对比表格（12字段）
|
||||
- ✅ Tab2: PDF预览（MVP占位符）
|
||||
- ✅ Tab3: 12字段详细证据（折叠面板）
|
||||
- ✅ 底部人工决策表单
|
||||
- ✅ 冲突提示
|
||||
|
||||
**技术亮点**：
|
||||
- 完全独立于`DetailReviewDrawer`
|
||||
- 12字段名称映射
|
||||
- 折叠面板展示详细证据
|
||||
- 排除时强制填写原因
|
||||
|
||||
---
|
||||
|
||||
## 🔌 API集成
|
||||
|
||||
### 新增API函数 (5个)
|
||||
|
||||
```typescript
|
||||
aslApi.createFulltextTask() // 创建任务
|
||||
aslApi.getFulltextTaskProgress() // 获取进度
|
||||
aslApi.getFulltextTaskResults() // 获取结果
|
||||
aslApi.updateFulltextDecision() // 更新决策
|
||||
aslApi.exportFulltextResults() // 导出Excel
|
||||
```
|
||||
|
||||
### 后端API端点对应
|
||||
|
||||
```
|
||||
POST /api/v1/asl/fulltext-screening/tasks
|
||||
GET /api/v1/asl/fulltext-screening/tasks/:taskId
|
||||
GET /api/v1/asl/fulltext-screening/tasks/:taskId/results
|
||||
PUT /api/v1/asl/fulltext-screening/results/:resultId/decision
|
||||
GET /api/v1/asl/fulltext-screening/tasks/:taskId/export
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🛣️ 路由配置
|
||||
|
||||
### 新增路由
|
||||
|
||||
```typescript
|
||||
/literature/screening/fulltext/
|
||||
├── settings // 设置与启动
|
||||
├── progress/:taskId // 任务进度
|
||||
├── workbench/:taskId // 审核工作台
|
||||
└── results/:taskId // 复筛结果
|
||||
```
|
||||
|
||||
### 侧边栏菜单
|
||||
|
||||
```
|
||||
5. 全文复筛
|
||||
├── 设置与启动
|
||||
├── 审核工作台
|
||||
└── 复筛结果
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 UI/UX亮点
|
||||
|
||||
### 1. 统一设计语言
|
||||
- 复用Ant Design 5组件
|
||||
- 与标题摘要初筛风格一致
|
||||
- 响应式布局
|
||||
|
||||
### 2. 用户体验优化
|
||||
- 实时反馈（Loading、Success、Error）
|
||||
- 智能提示（条件未满足时禁用按钮）
|
||||
- 冲突可视化（红色高亮）
|
||||
- 一键操作（批量删除、导出）
|
||||
|
||||
### 3. 性能优化
|
||||
- 懒加载页面组件
|
||||
- React Query缓存
|
||||
- 轮询智能停止
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 已知限制（技术债务）
|
||||
|
||||
### MVP阶段未实现
|
||||
|
||||
| 债务ID | 功能 | 优先级 | 计划 |
|
||||
|--------|------|--------|------|
|
||||
| Debt 11 | PDF高亮标注 | P2 | Week 5+ |
|
||||
| Debt 13 | 从知识库选择文献 | P3 | Week 6+ |
|
||||
| Debt 14 | 自动获取全文 | P3 | Week 7+ |
|
||||
| Debt 15 | PDF预览中高亮AI引用 | P2 | Week 5+ |
|
||||
| Debt 16 | WebSocket替代轮询 | P2 | Week 6+ |
|
||||
| Debt 17 | 虚拟滚动优化大表格 | P3 | Week 6+ |
|
||||
| Debt 18 | 批量操作（决策/导出/删除） | P2 | Week 5+ |
|
||||
|
||||
### MVP使用占位符的功能
|
||||
|
||||
1. **PDF预览**：Tab2显示"敬请期待"
|
||||
2. **知识库选择**：按钮点击显示"正在开发中"
|
||||
3. **手动上传Excel**：功能提示"正在开发中"
|
||||
4. **模拟数据**：所有页面当前使用模拟数据
|
||||
|
||||
---
|
||||
|
||||
## ✅ 代码质量
|
||||
|
||||
### Linter检查
|
||||
|
||||
```
|
||||
✅ 0 errors
|
||||
✅ 0 warnings
|
||||
```
|
||||
|
||||
### 代码规范
|
||||
|
||||
- ✅ TypeScript类型完整
|
||||
- ✅ 组件Props接口定义
|
||||
- ✅ JSDoc注释完整
|
||||
- ✅ 函数职责单一
|
||||
- ✅ 命名规范统一
|
||||
|
||||
### 云原生最佳实践
|
||||
|
||||
- ✅ 零文件落盘（PDF上传直接到OSS）
|
||||
- ✅ 前端Excel生成（无需后端临时文件）
|
||||
- ✅ 状态管理（React Query缓存）
|
||||
- ✅ 异步任务（轮询进度，不阻塞UI）
|
||||
|
||||
---
|
||||
|
||||
## 📊 代码统计
|
||||
|
||||
### 总代码量
|
||||
|
||||
```
|
||||
新增代码：~2,500行
|
||||
├── 页面组件：1,875行
|
||||
├── 独立组件：441行
|
||||
├── Hooks：139行
|
||||
├── API函数：~100行
|
||||
└── 路由配置：~50行
|
||||
```
|
||||
|
||||
### 复用率
|
||||
|
||||
```
|
||||
复用组件：3个（ConclusionTag, JudgmentBadge, ASLLayout）
|
||||
复用Hooks：2个（useQuery, useMutation from React Query）
|
||||
复用工具函数：1个（transformToDoubleRows - 借鉴）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 下一步工作
|
||||
|
||||
### Week 3: 前后端联调
|
||||
|
||||
1. **Day 9**: 前后端API对接
|
||||
- 替换所有模拟数据为真实API调用
|
||||
- 测试5个API端点
|
||||
- 处理错误边界
|
||||
|
||||
2. **Day 10**: 端到端测试
|
||||
- 完整流程测试（设置→进度→审核→结果）
|
||||
- 冲突文献复核测试
|
||||
- Excel导出测试
|
||||
|
||||
3. **Day 11**: Bug修复与优化
|
||||
- 修复测试发现的问题
|
||||
- UI细节优化
|
||||
- 性能调优
|
||||
|
||||
### Week 4+: 技术债务清偿
|
||||
|
||||
- PDF预览与高亮（Debt 11, 15）
|
||||
- WebSocket实时推送（Debt 16）
|
||||
- 批量操作（Debt 18）
|
||||
|
||||
---
|
||||
|
||||
## 📝 备注
|
||||
|
||||
### 设计决策记录
|
||||
|
||||
1. **独立组件vs扩展复用**
|
||||
- 决策：创建独立的`FulltextDetailDrawer`
|
||||
- 理由：两个功能差异大（70%+内容不同），未来演化独立
|
||||
|
||||
2. **任务进度页面独立**
|
||||
- 决策：独立页面（不合并到Workbench）
|
||||
- 理由：全文复筛任务耗时长，独立进度页面体验更好
|
||||
|
||||
3. **Excel导出方式**
|
||||
- 决策：前端生成为主，后端API为备选
|
||||
- 理由：云原生架构，减少后端临时文件
|
||||
|
||||
### 关键依赖
|
||||
|
||||
```json
|
||||
{
|
||||
"react": "^18.0.0",
|
||||
"react-router-dom": "^6.0.0",
|
||||
"@tanstack/react-query": "^5.0.0",
|
||||
"antd": "^5.0.0"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
全文复筛前端MVP开发已完成，实现了完整的用户流程和核心功能。代码质量高、架构清晰、易于维护和扩展。
|
||||
|
||||
**下一步**：前后端联调，替换模拟数据为真实API调用。
|
||||
|
||||
---
|
||||
|
||||
**文档版本**: v1.0
|
||||
**最后更新**: 2025-01-23
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user