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:
2025-12-02 21:53:24 +08:00
parent f240aa9236
commit d4d33528c7
83 changed files with 21863 additions and 1601 deletions

View File

@@ -0,0 +1,89 @@
# **PRD智能数据清洗工作台 (The Data Cleaning Portal)**
| 文档版本 | V1.0 (基于原型 V2) |
| :---- | :---- |
| **产品形态** | Web 端综合仪表盘 (Dashboard) |
| **核心价值** | 作为数据清洗模块的统一入口,提供工具启动、异步任务监控、数据资产管理及跨工具流转能力。 |
| **目标用户** | 临床医生、科研助理 |
## **一、 产品架构图 (Product Architecture)**
工作台处于系统的二级导航位置,向下连接三个具体工具,横向连接任务与数据。
全局导航 \-\> **工作台 (本PRD)** \-\> (工具 A, 工具 B, 工具 C)
## **二、 核心功能需求 (Functional Requirements)**
### **1\. 全局导航集成 (Global Navigation)**
* **P0:** 必须无缝嵌入现有系统顶部导航栏。
* **位置:** 位于 知识库 与 智能数据分析 之间。
* **状态:** 点击后高亮显示“智能数据清洗”。
### **2\. 工具启动区 (The Launcher)**
* **P0:** **三卡片入口:** 醒目展示三个核心工具的入口卡片。
* **工具 A (超级合并器):** 强调“多源数据合并、ID对齐”。
* **工具 B (病历结构化机器人):** 强调“AI 提取、非结构化转结构化”。
* **工具 C (科研数据编辑器):** 强调“在线清洗、缺失值处理”。
* **交互:** 点击卡片,以**全屏模态框**或**新页面**形式打开对应工具。
### **3\. 任务流转中心 (Task Flow Hub) —— 核心交互**
* **P0:** **最近任务列表:** 展示用户最近发起的 10 条任务。
* **字段定义:** 任务名称 | 所属工具(A/B/C) | 状态(处理中/完成/失败) | 进度条 | 操作。
* **P0:** **状态实时更新:**
* **处理中:** 显示动态进度条(如 45%)。
* **失败:** 显示红色警告,支持查看错误日志。
* **P0:** **智能流转操作 (Smart Action)**
* 基于任务类型,动态推荐下一步操作:
* **工具 A 完成后:** 显示按钮 \[下载\] 和 \[去 AI 提取\] (跳转工具 B)。
* **工具 B 完成后:** 显示按钮 \[下载\] 和 \[去清洗\] (跳转工具 C)。
* **工具 C 完成后:** 显示按钮 \[下载\]。
### **4\. 数据资产库 (Data Asset Library) —— V2 核心升级**
* **P0:** **Tab 分栏视图:**
* **\[全部\]**
* **\[处理结果\] (Outputs):** 存放工具 A/B/C 生成的最终文件。图标使用绿色/蓝色区分。
* **\[原始上传\] (Inputs):** 存放用户直接上传的底表。图标使用灰色区分。
* **P0:** **资产卡片信息:**
* 文件名、标签(如“已清洗”、“已脱敏”)、行数、修改时间。
* **P0:** **快捷操作 (Hover Actions):**
* 鼠标悬停在卡片上时,显示操作按钮:
* \[下载\]: 下载到本地。
* \[去处理\]: 如果是原始文件,点击跳转到工具选择页(或默认工具 A
* \[分析\]: 如果是处理结果,点击跳转到“智能数据分析”模块(未来规划)。
* **P0:** **原始文件上传入口:**
* 底部固定按钮 \[+ 上传原始文件到库\],允许用户将本地 Excel 存入云端备用。
## **三、 界面原型参考 (UI Reference)**
请严格参考 智能数据清洗工作台\_原型演示\_V2.html。
* **布局:** 顶部为 Launcher下方分为左右两栏左 2/3 为任务,右 1/3 为资产)。
* **视觉风格:**
* 工具 A蓝色系 (Blue)
* 工具 B紫色系 (Purple)
* 工具 C翠绿色系 (Emerald)
* 状态色:处理中(蓝)、成功(绿)、失败(红)、警告(橙)。
## **四、 数据交互逻辑 (Data Logic)**
1. **任务轮询 (Polling):**
* 工作台加载时,调用 GET /api/tasks/recent。
* 若列表中有状态为 processing 的任务,每隔 5 秒轮询一次状态更新,直到完成。
2. **跨工具流转 (Handoff):**
* 当用户点击 \[去 AI 提取\] 时:
* 前端获取该任务的 resultFileId。
* 跳转路由至 /tools/b?sourceFileId={resultFileId}。
* 工具 B 初始化时,自动加载该文件,无需用户重新上传。
3. **资产管理:**
* 工具 A/B/C 产生的最终结果,需自动注册到 DataAsset 表中,并标记 type='output'。
* 用户手动上传的文件,注册为 type='input'。
## **五、 埋点与统计需求**
* **UV/PV:** 工作台访问量。
* **CTR:** 三个工具卡片的点击率(判断哪个工具最常用)。
* **流转率:** 用户点击“去 AI 提取”等流转按钮的比例(判断工作流是否顺畅)。