feat(dc): Complete Tool C quick action buttons Phase 1-2 - 7 functions

Summary:
- Implement 7 quick action functions (filter, recode, binning, conditional, dropna, compute, pivot)
- Refactor to pre-written Python functions architecture (stable and secure)
- Add 7 Python operations modules with full type hints
- Add 7 frontend Dialog components with user-friendly UI
- Fix NaN serialization issues and auto type conversion
- Update all related documentation

Technical Details:
- Python: operations/ module (filter.py, recode.py, binning.py, conditional.py, dropna.py, compute.py, pivot.py)
- Backend: QuickActionService.ts with 7 execute methods
- Frontend: 7 Dialog components with complete validation
- Toolbar: Enable 7 quick action buttons

Status: Phase 1-2 completed, basic testing passed, ready for further testing
This commit is contained in:
2025-12-08 17:38:08 +08:00
parent af325348b8
commit f729699510
158 changed files with 13814 additions and 273 deletions

View File

@@ -0,0 +1,118 @@
# **UI/UX 视觉优化建议书AI 临床研究平台 \- 数据清洗页**
## **0\. 核心痛点总结 (Executive Summary)**
* **缺乏层次感 (Visual Hierarchy)** 页面元素过于扁平,重点不突出,视觉流线混乱。
* **色彩杂乱 (Color Consistency)** 品牌色(紫/蓝)与功能色(绿、红)搭配生硬,缺乏统一度。尤其是表格内的报错色过于刺眼。
* **空间利用率低 (Spacing & Layout)** 顶部工具栏占用过多纵向空间,导致核心数据区域(表格)展示不全。
* **细节粗糙 (Craftsmanship)** 边框、圆角、阴影处理生硬,字体排版缺乏韵律。
## **1\. 全局样式建议 (Global Styles)**
### **1.1 字体 (Typography)**
* **现状:** 看起来使用了系统默认的宋体或无衬线体,字重单一,导致界面显得陈旧且阅读累。
* **建议:**
* **中文字体:** 优先使用 PingFang SC (Mac) / Microsoft YaHei UI (Windows) / Noto Sans SC。
* **英文字体/数字:** 尤其是在**表格**和**代码**区域,必须使用等宽字体或现代无衬线体(如 Inter, Roboto, JetBrains Mono确保数字对齐美观。
* **字重:** 建立层级。
* 一级标题(如页面左上角 Logo 旁Medium/Bold, 16px-18px。
* 正文Regular, 14px。
* 辅助文字如时间、次要标签Regular, 12px, 颜色变浅。
### **1.2 色彩体系 (Color Palette)**
* **现状:** \* 主色调是紫蓝色,但 Excel 图标是绿色,"导出结果"是深色,"运行代码"又是另一种绿。
* 表格内的红色背景(缺失值)饱和度过高,像是在“报错”,会让用户感到焦虑。
* **建议:**
* **统一主色:** 既然 Logo 是蓝紫色,页面上的主按钮(如“导出结果”)应与其呼应,或者使用中性的深空灰/黑。
* **降噪:** 去除不必要的背景色。顶部的操作按钮(生成新变量等)目前有浅色背景,显得很脏。建议改为**透明背景 \+ 悬停微交互**。
* **警告色优化:** \* 表格中的缺失值(红色背景区域)请改为**浅粉色背景 (\#FEF2F2)** 配 **红色文字 (\#EF4444)**,或者干脆只把文字标红,去掉背景。现在的色块太重了。
### **1.3 阴影与深度 (Shadows & Elevation)**
* **现状:** 几乎全平,缺乏悬浮感,导致 AI 助手侧边栏和主内容的界限不清晰。
* **建议:**
* 给**AI 助手侧边栏**增加左侧阴影box-shadow: \-4px 0 20px rgba(0,0,0,0.05)),让它浮在内容之上,或者用一根极细的分割线(\#E5E7EB
* 顶部的操作卡片去掉边框,改为轻微的悬浮阴影。
## **2\. 顶部导航栏 (Global Header)**
* **Logo 区域:** “AI临床研究平台”字体加粗颜色加深。
* **菜单项:** \* 当前的“智能数据清洗”选中态是一个深色圆角矩形,显得很笨重。
* **修改建议:** 去掉背景色,改为文字加粗 \+ 底部加一条 2px 的品牌色横条Underline style或者文字颜色变亮。这样更现代。
* **右侧用户信息:** 头像太小,文字排版拥挤。增加头像尺寸(至 32px 或 36px让名字和角色上下排列或增加间距。
## **3\. 二级工具栏 (Secondary Toolbar)**
这是问题最大的区域之一。
### **3.1 左侧:返回与文件信息**
* **返回工作台:** 按钮太大、太抢眼。它是一个次要操作。
* **修改:** 改为纯文本链接 \< 返回工作台 或者一个极简的图标按钮,放在最左侧。
* **文件名:** 目前是 G 鼓膜穿孔数据-test.xlsx。
* **建议:** 字体加大加粗18px作为当前页面的核心标题。旁边的“科研数据编辑器 Pro”标签可以缩小做成精制的 Tag胶囊样式
### **3.2 中间:操作按钮组 (生成新变量、时间差...)**
* **现状:** 六个巨大的方形按钮,图标很小,文字很大,且下面有一大片空白。这种布局极度浪费垂直空间。
* **修改方案:**
* **方案 A现代平铺** 去掉方框背景,改为**图标+文字**的横向排列。图标 16px文字 14px鼠标悬停时出现浅灰色圆角背景。
* **方案 B分组** 将这些功能归类放入“数据处理”下拉菜单中,只把最高频的 2-3 个放出来。
* **关键点:** 请大幅减小这些按钮的高度!把空间留给下面的表格。
### **3.3 右侧:搜索框**
* **现状:** 搜索框高度过高,背景色灰度如果不合适会显得脏。
* **建议:** 高度缩小至 32px 或 36px。背景色纯白 \+ 浅灰边框,或者极浅的灰色背景(\#F3F4F6无边框。
## **4\. 核心数据表格 (Data Grid) \- 重灾区**
表格是本页面的灵魂,目前看起来像是一个未加样式的 HTML 原生 Table。
* **表头 (Header)**
* **现状:** 字体普通,背景白,分割线重。漏斗图标(筛选)太黑太重。
* **修改:** \* 表头背景色改为极浅的灰色(\#F9FAFB
* 字体颜色加深(\#374151字重 Medium。
* 高度固定(例如 40px文字垂直居中。
* 筛选图标改为浅灰色,鼠标悬停时变深。
* **行与单元格 (Rows & Cells)**
* **行高:** 目前行高有点挤,但为了展示更多数据可以接受。建议增加“舒适/紧凑”的切换模式。
* **斑马纹:** 建议开启隔行变色Zebra striping偶数行给极浅的底色\#F9FAFB有助于横向阅读。
* **边框:** **去掉纵向边框!** 现代表格通常只保留横向分割线。这会让界面瞬间清爽 50%。
* **数字对齐:** 所有数值列(年龄、术前听力、时长)必须**右对齐**!文字列(性别)左对齐或居中。这是数据展示的基本原则。
* **异常值高亮 (The Pink Areas)**
* **现状:** 也就是那些缺失值 \-,背景是粉红色,太丑了。
* **修改:** \* 将单元格背景色改为透明。
* 将缺失值 \- 改为文字 NA 或 Missing更专业
* 文字颜色设为橙色或红色,字体缩小。
* 如果必须要有背景请使用极淡的红Opacity 10%)。
## **5\. 右侧 AI 助手 (AI Sidebar)**
* **面板容器:**
* 目前的边框太硬。建议去掉左侧边框,改用阴影(如上文所述)。
* 标题栏 "AI 数据清洗助手" 下面那条绿线太生硬,建议去掉,直接用字重区分。
* **对话气泡 (Chat Bubbles)**
* **AI 气泡:** 目前是灰色方块。建议改为纯白卡片 \+ 淡淡的投影或者极浅的品牌色背景浅紫。圆角加大12px \- 16px
* **用户气泡:** 建议右对齐,使用品牌主色(蓝/紫)背景,白字。
* **代码块:** 黑色背景是 OK 的,但 "运行代码" 按钮那个绿色太像 Bootstrap 的默认绿了。
* **建议:** 按钮做小一点,放在代码块右上角,或者做成幽灵按钮(透明背景+边框)。
* **输入框 (底栏)**
* 截图中未完全展示,但建议输入框悬浮在底部,留出足够的 Padding。
## **6\. 微交互与反馈 (Micro-interactions)**
* **Hover 状态:** 所有的按钮、表格行,鼠标放上去时必须有颜色变化(变深或变浅),现在的界面感觉是静止的。
* **滚动条:** 表格右侧的滚动条是浏览器默认的样式,非常粗糙。请前端使用 CSS 修改滚动条样式Webkit Scrollbar使其变细、颜色变浅灰色圆角不抢视觉重点。
## **7\. 总结:给前端的直接修改清单**
1. **表格去纵向边框**,只留横线,颜色 \#E5E7EB。
2. **数值列右对齐**
3. **顶部大按钮改小**,改为“图标左+文字右”的布局,高度不超过 40px。
4. **字体统一**为 PingFang SC / Inter表格数字用等宽字体。
5. **缺失值背景色去掉**,改为文字变红。
6. **AI 侧边栏增加左侧阴影**,区分层级。
7. **主色调统一**去掉Excel绿、报警红等多余杂色。