HaHafeng
f729699510
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
118 lines
8.0 KiB
Markdown
118 lines
8.0 KiB
Markdown
# **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绿、报警红等多余杂色。 |