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,105 @@
# **PRDTool C \- 科研数据编辑器 (The Research Editor)**
| 文档版本 | V2.1 (扁平化 \+ 长宽转换版) |
| :---- | :---- |
| **产品形态** | Web 端在线编辑器Local-First 架构,类 Excel 体验) |
| **核心价值** | 提供比 Excel 更懂科研的轻量级清洗工具。通过“扁平化工具栏”和“智能侧边栏”,让医生在不写代码的情况下完成变量加工、质量治理和样本筛选。 |
| **目标用户** | 对数据质量有洁癖的科研人员、临床医生 |
## **一、 产品流程图 (User Flow)**
数据导入(上传/流转) \-\> 性能准入与降采样 \-\> 在线清洗(工具栏全局操作 \+ 侧边栏列操作) \-\> 版本快照 \-\> 导出分析集
## **二、 核心功能需求 (Functional Requirements)**
### **1\. 顶部扁平工具栏 (The Flat Toolbar) —— 核心交互**
*不再使用复杂的 Tab 分组,核心科研功能一字排开,所见即所得。*
#### **1.1 变量加工 (Variable Processing)**
* **P0: 生成新变量 (Generate Variable):**
* **功能:** 弹窗提供公式构建器。
* **支持:** 加减乘除、括号、以及 ln() (对数)、exp() 等医学常用函数。
* **场景:** 计算 BMI \= weight / (height/100)^2。
* **P0: 计算时间差 (Time Delta):**
* **功能:** 选择 起始日期列 和 结束日期列,自动生成差值。
* **单位:** 支持按 天、月、年 输出。
* **场景:** 计算 年龄、住院天数、PFS/OS。
* **P0: 长宽转换 (Reshape/Pivot) —— \[V2.1 新增\]:**
* **功能:** 将“一人多行(长表)”转换为“一人一行(宽表)”。
* **配置项:**
1. **唯一ID (Index):** 如 病人ID。
2. **区分列 (Columns):** 如 就诊时间 或 次序 (用于生成后缀)。
3. **值列 (Values):** 如 白细胞, B超 (需要铺平的数据)。
* **场景:** 处理重复测量数据,为 SPSS 重复测量方差分析做准备。
#### **1.2 数据治理 (Data Governance)**
* **P0: 拆分数据集 (Split Dataset):**
* **功能:** 按某一列的唯一值如“中心ID”将大表拆分为多个 Excel 文件或 Sheet。
* **P0: 跨列规则检查 (Cross-column Logic):**
* **功能:** 定义逻辑规则(如 IF 性别='男' AND 怀孕='是'),在网格中高亮错误行。
#### **1.3 样本筛选 (Cohort Selection)**
* **P0: 构建入排标准 (Cohort Builder):**
* **功能:** 高级筛选器。支持多条件组合AND/OR
* **输出:** 筛选结果可“另存为新数据集”或“标记为排除”。
### **2\. 右侧智能侧边栏 (Smart Insight Panel) —— 交互灵魂**
*当用户点击表格的某一列时,侧边栏自动滑出,根据列类型提供特定的清洗工具。*
#### **2.1 选中“数值型”列(如年龄、白细胞)**
* **P0: 统计概览:** 显示分布直方图 (Histogram)、最大值、最小值。
* **P0: 异常值检测:**
* 自动标记偏离分布(如 \> 3σ的值。
* 提供按钮:处理异常(支持截断或置空)。
* **P0: 生成分类变量 (Binning):**
* **功能:** 将连续数值转为分类。
* **交互:** 设置切点(如 60生成新列\<60, \>=60
* **P0: 缺失值填补:** 提供 均值、中位数 填补选项。
#### **2.2 选中“文本/分类”列(如性别、诊断)**
* **P0: 统计概览:** 显示频次图 (Bar Chart)。
* **P0: 数值映射 (Recode):**
* **功能:** 将文本转为统计数值。
* **交互:** 列出所有唯一值Male, Female用户输入目标值1, 0
* **P0: 设为敏感字段 (Masking):** 一键脱敏(替换为 \*\*\*\*\*\*)。
* **P1: 智能纯化 (Smart Clean):** 若检测到 \>10、\<0.01 等含符号数值,提供一键提取数字功能。
### **3\. 超级网格 (The Grid)**
* **P0: 视觉反馈:**
* **空值:** 背景显示淡红色。
* **脏数据:** 类型不匹配的值显示紫色文字。
* **列头图标:** 明确标识变量类型(\# 数值, A 文本, 📅 日期)。
* **P0: 基础操作:** 列宽拖拽、列排序、双击单元格编辑。
### **4\. 性能与导出 (System)**
* **P0: 性能准入 (Guardrails):**
* 行数 \< 5万全量加载。
* 行数 \> 5万提示降采样预览或引导使用后端批处理。
* **P1: 自动快照 (Auto-Save):** 每 10 次操作自动保存到 IndexedDB防止浏览器崩溃丢失。
* **P0: 导出定义:**
* 导出 Excel/CSV。
* **加分项:** 导出时附带变量类型定义Metadata
## **三、 界面原型参考 (UI Reference)**
请参考 工具C\_科研数据编辑器\_原型设计\_V2\_演示.html。
* **布局:** 顶部单行工具栏 \+ 中间全屏网格 \+ 右侧可折叠侧边栏。
* **交互:** 点击“长宽转换”按钮弹出配置模态框。
## **四、 风险规避 (Risk Mitigation)**
1. **计算精度丢失:**
* *解法:* 必须集成 math.js 库进行所有数学运算。
2. **Pivot 导致内存溢出:**
* *问题:* 长宽转换可能会导致列数爆炸Column Explosion
* *解法:* 在执行 Pivot 前,预计算结果列数。如果列数 \> 1000阻止操作并提示用户减少“区分列”的唯一值数量。