feat(admin): Add user management and upgrade to module permission system
Features - User Management (Phase 4.1): - Database: Add user_modules table for fine-grained module permissions - Database: Add 4 user permissions (view/create/edit/delete) to role_permissions - Backend: UserService (780 lines) - CRUD with tenant isolation - Backend: UserController + UserRoutes (648 lines) - 13 API endpoints - Backend: Batch import users from Excel - Frontend: UserListPage (412 lines) - list/filter/search/pagination - Frontend: UserFormPage (341 lines) - create/edit with module config - Frontend: UserDetailPage (393 lines) - details/tenant/module management - Frontend: 3 modal components (592 lines) - import/assign/configure - API: GET/POST/PUT/DELETE /api/admin/users/* endpoints Architecture Upgrade - Module Permission System: - Backend: Add getUserModules() method in auth.service - Backend: Login API returns modules array in user object - Frontend: AuthContext adds hasModule() method - Frontend: Navigation filters modules based on user.modules - Frontend: RouteGuard checks requiredModule instead of requiredVersion - Frontend: Remove deprecated version-based permission system - UX: Only show accessible modules in navigation (clean UI) - UX: Smart redirect after login (avoid 403 for regular users) Fixes: - Fix UTF-8 encoding corruption in ~100 docs files - Fix pageSize type conversion in userService (String to Number) - Fix authUser undefined error in TopNavigation - Fix login redirect logic with role-based access check - Update Git commit guidelines v1.2 with UTF-8 safety rules Database Changes: - CREATE TABLE user_modules (user_id, tenant_id, module_code, is_enabled) - ADD UNIQUE CONSTRAINT (user_id, tenant_id, module_code) - INSERT 4 permissions + role assignments - UPDATE PUBLIC tenant with 8 module subscriptions Technical: - Backend: 5 new files (~2400 lines) - Frontend: 10 new files (~2500 lines) - Docs: 1 development record + 2 status updates + 1 guideline update - Total: ~4900 lines of code Status: User management 100% complete, module permission system operational
This commit is contained in:
@@ -1,105 +1,118 @@
|
||||
# **UI/UX 隗<EFBFBD>ァ我シ伜喧蟒コ隶ョ荵ヲ<EFBFBD>哂I 荳エ蠎顔<E8A08E>皮ゥカ蟷ウ蜿ー \- 謨ー謐ョ貂<EFBDAE>エ鈴。?*
|
||||
# **UI/UX 视觉优化建议书:AI 临床研究平台 \- 数据清洗页**
|
||||
|
||||
## **0\. 核心痛点总结 (Executive Summary)**
|
||||
|
||||
* **郛コ荵丞アよャ。諢?(Visual Hierarchy)<EFBFBD>?* 鬘オ髱「蜈<EFBDA2>エ<EFBFBD>霑<EFBFBD>コ取堰蟷ウ<E89FB7>碁㍾轤ケ荳咲ェ∝<EFBDAA><E2889D>瑚ァ<E7919A>ァ画オ∫コソ豺キ荵ア縲?
|
||||
* **濶イ蠖ゥ譚ゆケア (Color Consistency)<EFBFBD>?* 蜩∫煙濶イ<E6BFB6>育エ?闢晢シ我ク主粥閭ス濶イ<E6BFB6>育サソ縲∫コ「<EFBDBA>画政驟咲函遑ャ<E98191>檎シコ荵冗サ滉ク蠎ヲ縲ょー、蜈カ譏ッ陦ィ譬シ蜀<EFBDBC>噪謚・髞呵牡霑<E789A1>コ主絢逵シ縲?
|
||||
* **遨コ髣エ蛻ゥ逕ィ邇<EFBFBD>ス<EFBFBD> (Spacing & Layout)<EFBFBD>?* 鬘カ驛ィ蟾・蜈キ譬丞頃逕ィ霑<EFBDA8>、夂コオ蜷醍ゥコ髣エ<E9ABA3>悟ッシ閾エ譬ク蠢<EFBDB8>焚謐ョ蛹コ蝓滂シ郁。ィ譬シ<E8ADAC>牙ア慕、コ荳榊<E88DB3>縲?
|
||||
* **扈<EFBFBD>鰍邊礼ウ<EFBFBD> (Craftsmanship)<EFBFBD>?* 霎ケ譯<EFBDB9>∝怕隗偵<E581B5>亢蠖ア螟<EFBDB1>炊逕溽。ャ<EFBDA1>悟ュ嶺ス捺賜迚育シコ荵城涎蠕九?
|
||||
* **缺乏层次感 (Visual Hierarchy):** 页面元素过于扁平,重点不突出,视觉流线混乱。
|
||||
* **色彩杂乱 (Color Consistency):** 品牌色(紫/蓝)与功能色(绿、红)搭配生硬,缺乏统一度。尤其是表格内的报错色过于刺眼。
|
||||
* **空间利用率低 (Spacing & Layout):** 顶部工具栏占用过多纵向空间,导致核心数据区域(表格)展示不全。
|
||||
* **细节粗糙 (Craftsmanship):** 边框、圆角、阴影处理生硬,字体排版缺乏韵律。
|
||||
|
||||
## **1\. 全局样式建议 (Global Styles)**
|
||||
|
||||
### **1.1 字体 (Typography)**
|
||||
|
||||
* **邇ー迥カ<EFBFBD>?* 逵玖オキ譚・菴ソ逕ィ莠<EFBDA8>ウサ扈滄サ倩ョ、逧<EFBDA4>ョ倶ス捺<EFBDBD>譌<EFBFBD>陦ャ郤ソ菴難シ悟ュ鈴㍾蜊穂ク<EFBDB8>悟ッシ閾エ逡碁擇譏セ蠕鈴刪譌ァ荳秘<E88DB3>隸サ邏ッ縲?
|
||||
* **蟒コ隶ョ<EFBFBD>?*
|
||||
* **荳ュ譁<EFBFBD>ュ嶺ス難シ?* 莨伜<E88EA8>菴ソ逕ィ PingFang SC (Mac) / Microsoft YaHei UI (Windows) / Noto Sans SC縲?
|
||||
* **闍ア譁<EFBFBD>ュ嶺ス<EFBFBD>/謨ー蟄暦シ?* 蟆、蜈カ譏ッ蝨ィ**陦ィ譬シ**蜥?*莉」遐<EFBDA3>**蛹コ蝓滂シ悟ソ<E6829F>。サ菴ソ逕ィ遲牙ョス蟄嶺ス捺<EFBDBD>邇ー莉」譌<EFBDA3>陦ャ郤ソ菴難シ亥ヲ<E4BAA5> Inter, Roboto, JetBrains Mono<EFBFBD>会シ檎。ョ菫晄焚蟄怜ッケ鮨千セ手ァゅ?
|
||||
* **蟄鈴㍾<EFBFBD>?* 蟒コ遶句アらコァ縲?
|
||||
* 荳郤ァ譬<EFBFBD>「假シ亥ヲる。オ髱「蟾ヲ荳願ァ<EFBFBD> Logo 譌<>シ会シ哺edium/Bold, 16px-18px縲?
|
||||
* 豁」譁<EFBFBD>シ啌egular, 14px縲?
|
||||
* 霎<EFBFBD>勧譁<EFBFBD>ュ暦シ亥ヲよ慮髣エ縲∵ャ。隕∵<EFBFBD><EFBFBD>ュセ<EFBFBD>会シ啌egular, 12px, 鬚懆牡蜿俶オ<EFBFBD>?
|
||||
* **现状:** 看起来使用了系统默认的宋体或无衬线体,字重单一,导致界面显得陈旧且阅读累。
|
||||
* **建议:**
|
||||
* **中文字体:** 优先使用 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)**
|
||||
|
||||
* **邇ー迥カ<EFBFBD>?* \* 荳サ濶イ隹<EFBDB2>弍邏ォ闢晁牡<E69981>御ス?Excel 蝗セ譬<EFBDBE>弍扈ソ濶イ<E6BFB6><EFBDB2>"蟇シ蜃コ扈捺棡"譏ッ豺ア濶イ<E6BFB6><EFBDB2>"霑占。御サ」遐<EFBDA3>"蜿域弍蜿ヲ荳遘咲サソ縲?
|
||||
* 陦ィ譬シ蜀<EFBFBD>噪郤「濶イ閭梧勹<EFBFBD>育シコ螟ア蛟シ<EFBFBD>蛾・ア蜥悟コヲ霑<EFBFBD>ォ假シ悟ワ譏ッ蝨ィ窶懈冠髞吮晢シ御シ夊ョゥ逕ィ謌キ諢溷芦辟ヲ陌代?
|
||||
* **蟒コ隶ョ<EFBFBD>?*
|
||||
* **扈滉ク荳サ濶イ<EFBFBD>?* 譌「辟カ Logo 譏ッ闢晉エォ濶イ<E6BFB6>碁。オ髱「荳顔噪荳サ謖蛾聴<E89BBE>亥ヲや懷ッシ蜃コ扈捺棡窶晢シ牙コ比ク主<EFBDB8>蜻シ蠎費シ梧<EFBDBC>閠<EFBFBD>スソ逕ィ荳ュ諤ァ逧<EFBDA7>キア遨コ轣?鮟代?
|
||||
* **髯榊飭<EFBFBD>?* 蜴サ髯、荳榊ソ<E6A68A>ヲ∫噪閭梧勹濶イ縲る。カ驛ィ逧<EFBDA8>桃菴懈潔髓ョ<E9AB93>育函謌先眠蜿倬㍼遲会シ臥岼蜑肴怏豬<E6808F>牡閭梧勹<E6A2A7>梧仞蠕怜セ郁э縲ょサコ隶ョ謾ケ荳?*騾乗<E9A8BE>閭梧勹 \+ 謔ャ蛛懷セョ莠、莠?*縲?
|
||||
* **隴ヲ蜻願牡莨伜喧<EFBFBD><EFBFBD>** \* 陦ィ譬シ荳ュ逧<EFBDAD>シコ螟ア蛟シ<E89B9F>育コ「濶イ閭梧勹蛹コ蝓滂シ芽ッキ謾ケ荳コ**豬<>イ芽牡閭梧<E996AD>?(\#FEF2F2)** 驟?**郤「濶イ譁<EFBDB2>ュ<EFBFBD> (\#EF4444)**<2A>梧<EFBFBD>閠<EFBFBD>ケイ閼<EFBDB2>宵謚頑枚蟄玲<E89F84><E78EB2>コ「<EFBDBA>悟悉謗芽レ譎ッ縲ら鴫蝨ィ逧<EFBDA8>牡蝮怜、ェ驥堺コ<E5A0BA>?
|
||||
### **1.3 髦エ蠖ア荳取キア蠎?(Shadows & Elevation)**
|
||||
* **现状:** \* 主色调是紫蓝色,但 Excel 图标是绿色,"导出结果"是深色,"运行代码"又是另一种绿。
|
||||
* 表格内的红色背景(缺失值)饱和度过高,像是在“报错”,会让用户感到焦虑。
|
||||
* **建议:**
|
||||
* **统一主色:** 既然 Logo 是蓝紫色,页面上的主按钮(如“导出结果”)应与其呼应,或者使用中性的深空灰/黑。
|
||||
* **降噪:** 去除不必要的背景色。顶部的操作按钮(生成新变量等)目前有浅色背景,显得很脏。建议改为**透明背景 \+ 悬停微交互**。
|
||||
* **警告色优化:** \* 表格中的缺失值(红色背景区域)请改为**浅粉色背景 (\#FEF2F2)** 配 **红色文字 (\#EF4444)**,或者干脆只把文字标红,去掉背景。现在的色块太重了。
|
||||
|
||||
* **邇ー迥カ<E8BFA5>?* 蜃<>荵主<E88DB5>蟷ウ<E89FB7>檎シコ荵乗ぎ豬ョ諢滂シ悟ッシ閾?AI 蜉ゥ謇倶セァ霎ケ譬丞柱荳サ蜀<EFBDBB>ョケ逧<EFBDB9>阜髯蝉ク肴ク<E882B4>匆縲?
|
||||
* **蟒コ隶ョ<E99AB6>?*
|
||||
* 扈?*AI 蜉ゥ謇倶セァ霎ケ譬?*蠅槫刈蟾ヲ萓ァ髦エ蠖ア<E8A096><EFBDB1>ox-shadow: \-4px 0 20px rgba(0,0,0,0.05)<29>会シ瑚ョゥ螳<EFBDA9>オョ蝨ィ蜀<EFBDA8>ョケ荵倶ク奇シ梧<EFBDBC>閠<EFBFBD>畑荳譬ケ譫∫サ<E288AB>噪蛻<E599AA>牡郤ソ<E983A4><EFBDBF>#E5E7EB<EFBFBD>峨?
|
||||
* 鬘カ驛ィ逧<EFBDA8>桃菴懷今迚<E4BB8A>悉謗芽セケ譯<EFBDB9>シ梧隼荳コ霓サ蠕ョ逧<EFBDAE>ぎ豬ョ髦エ蠖ア縲?
|
||||
## **2\. 鬘カ驛ィ蟇シ闊ェ譬?(Global Header)**
|
||||
### **1.3 阴影与深度 (Shadows & Elevation)**
|
||||
|
||||
* **Logo 蛹コ蝓滂シ?* 窶廣I荳エ蠎顔<E8A08E>皮ゥカ蟷ウ蜿ー窶晏ュ嶺ス灘刈邊暦シ碁「懆牡蜉<E789A1>豺ア縲?
|
||||
* **闖懷黒鬘ケ<EFBFBD><EFBFBD>** \* 蠖灘燕逧<E78795>懈匱閭ス謨ー謐ョ貂<EFBDAE>エ冷晞我クュ諤∵弍荳荳ェ豺ア濶イ蝨<EFBDB2>ァ堤洸蠖「<E8A096>梧仞蠕怜セ育ャィ驥阪?
|
||||
* **菫ョ謾ケ蟒コ隶ョ<EFBFBD>?* 蜴サ謗芽レ譎ッ濶イ<E6BFB6>梧隼荳コ譁<EFBDBA>ュ怜刈邊<E58888> \+ 蠎暮Κ蜉<CE9A>荳譚?2px 逧<>刀迚瑚牡讓ェ譚。<E8AD9A><EFBDA1>nderline style<6C>会シ梧<EFBDBC>閠<EFBFBD>枚蟄鈴「懆牡蜿倅コョ縲りソ呎<EFBDBF>キ譖エ邇ー莉」縲?
|
||||
* **蜿ウ萓ァ逕ィ謌キ菫。諱ッ<E8ABB1>?* 螟エ蜒丞、ェ蟆擾シ梧枚蟄玲賜迚域凶謖、縲ょ「槫刈螟エ蜒丞ーコ蟇ク<E89F87>郁<EFBFBD>?32px 謌?36px<70>会シ瑚ョゥ蜷榊ュ怜柱隗定牡荳贋ク区賜蛻玲<E89BBB>蠅槫刈髣エ霍昴?
|
||||
## **3\. 莠檎コァ蟾・蜈キ譬?(Secondary Toolbar)**
|
||||
* **现状:** 几乎全平,缺乏悬浮感,导致 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)**
|
||||
|
||||
这是问题最大的区域之一。
|
||||
|
||||
霑呎弍髣ョ鬚俶怙螟ァ逧<EFBFBD>玄蝓滉ケ倶ク縲?
|
||||
### **3.1 左侧:返回与文件信息**
|
||||
|
||||
* **霑泌屓蟾・菴懷床<EFBFBD><EFBFBD>** 謖蛾聴螟ェ螟ァ縲∝、ェ謚「逵シ縲ょョ<E38287>弍荳荳ェ谺。隕∵桃菴懊?
|
||||
* **菫ョ謾ケ<EFBFBD>?* 謾ケ荳コ郤ッ譁<EFBDAF>悽體セ謗?\< 霑泌屓蟾・菴懷<E88FB4>?謌冶<E586B6>ク荳ェ譫∫ョ逧<C280>崟譬<E5B49F>潔髓ョ<E9AB93>梧叛蝨ィ譛蟾ヲ萓ァ縲?
|
||||
* **譁<EFBFBD>サカ蜷搾シ<EFBFBD>** 逶ョ蜑肴<E89C91>?G 鮠楢<E9AEA0>遨ソ蟄疲焚謐ョ-test.xlsx縲?
|
||||
* **蟒コ隶ョ<EFBFBD>?* 蟄嶺ス灘刈螟ァ蜉<EFBDA7>邊暦シ?8px<70>会シ御ス應クコ蠖灘燕鬘オ髱「逧<EFBDA2><E980A7>ク蠢<EFBDB8><E8A0A2><EFBFBD>「倥よ浴霎ケ逧<EFBDB9>懃ァ醍<EFBDA7>疲焚謐ョ郛冶セ大勣 Pro窶晄<E7AAB6><E69984>ュセ蜿ッ莉・郛ゥ蟆擾シ悟★謌千イセ蛻カ逧?Tag<61>郁Ω蝗頑<E89D97>キ蠑擾シ峨?
|
||||
* **返回工作台:** 按钮太大、太抢眼。它是一个次要操作。
|
||||
* **修改:** 改为纯文本链接 \< 返回工作台 或者一个极简的图标按钮,放在最左侧。
|
||||
* **文件名:** 目前是 G 鼓膜穿孔数据-test.xlsx。
|
||||
* **建议:** 字体加大加粗(18px),作为当前页面的核心标题。旁边的“科研数据编辑器 Pro”标签可以缩小,做成精制的 Tag(胶囊样式)。
|
||||
|
||||
### **3.2 中间:操作按钮组 (生成新变量、时间差...)**
|
||||
|
||||
* **邇ー迥カ<EFBFBD>?* 蜈ュ荳ェ蟾ィ螟ァ逧<EFBDA7>婿蠖「謖蛾聴<E89BBE>悟崟譬<E5B49F>セ亥ー擾シ梧枚蟄怜セ亥、ァ<EFBDA4>御ク比ク矩擇譛我ク螟ァ迚<EFBDA7>ゥコ逋ス縲りソ咏ァ榊ク<E6A68A>ア譫∝コヲ豬ェ雍ケ蝙ら峩遨コ髣エ縲?
|
||||
* **菫ョ謾ケ譁ケ譯茨シ?*
|
||||
* **譁ケ譯<EFBFBD> A<>育鴫莉」蟷ウ體コ<E9AB94>会シ?* 蜴サ謗画婿譯<E5A9BF>レ譎ッ<E8AD8E>梧隼荳?*蝗セ譬<EFBDBE>+譁<>ュ<EFBFBD>**逧<>ィェ蜷第賜蛻励ょ崟譬?16px<70>梧枚蟄?14px<70>碁シ<E7A281>譬<EFBFBD>ぎ蛛懈慮蜃コ邇ー豬<EFBDB0><E8B1AC>濶イ蝨<EFBDB2>ァ定レ譎ッ縲?
|
||||
* **譁ケ譯<EFBFBD> B<>亥<EFBFBD>扈<EFBFBD>シ会シ?* 蟆<>ソ吩コ帛粥閭ス蠖堤アサ謾セ蜈・窶懈焚謐ョ螟<EFBDAE>炊窶昜ク区級闖懷黒荳ュ<E88DB3>悟宵謚頑怙鬮倬「醍<EFBDA2>?2-3 荳ェ謾セ蜃コ譚・縲?
|
||||
* **蜈ウ髞ョ轤ケ<EFBFBD><EFBFBD>** 隸キ螟ァ蟷<EFBDA7>㍼蟆剰ソ吩コ帶潔髓ョ逧<EFBDAE>ォ伜コヲ<EFBDBA>∵滑遨コ髣エ逡咏サ吩ク矩擇逧<E69387>。ィ譬シ縲?
|
||||
* **现状:** 六个巨大的方形按钮,图标很小,文字很大,且下面有一大片空白。这种布局极度浪费垂直空间。
|
||||
* **修改方案:**
|
||||
* **方案 A(现代平铺):** 去掉方框背景,改为**图标+文字**的横向排列。图标 16px,文字 14px,鼠标悬停时出现浅灰色圆角背景。
|
||||
* **方案 B(分组):** 将这些功能归类放入“数据处理”下拉菜单中,只把最高频的 2-3 个放出来。
|
||||
* **关键点:** 请大幅减小这些按钮的高度!把空间留给下面的表格。
|
||||
|
||||
### **3.3 右侧:搜索框**
|
||||
|
||||
* **邇ー迥カ<EFBFBD>?* 謳懃エ「譯<EFBDA2>ォ伜コヲ霑<EFBDA6>ォ假シ瑚レ譎ッ濶イ轣ー蠎ヲ螯よ棡荳榊粋騾ゆシ壽仞蠕苓э縲?
|
||||
* **蟒コ隶ョ<EFBFBD>?* 鬮伜コヲ郛ゥ蟆剰<E89F86>?32px 謌?36px縲りレ譎ッ濶イ郤ッ逋ス \+ 豬<><E8B1AC>霎ケ譯<EFBDB9>シ梧<EFBDBC>閠<EFBFBD>栫豬<E6A0AB>噪轣ー濶イ閭梧勹<E6A2A7><E58BB9>#F3F4F6<EFBFBD>画裏霎ケ譯<EFBFBD>?
|
||||
## **4\. 譬ク蠢<EFBDB8>焚謐ョ陦ィ譬シ (Data Grid) \- 驥咲∪蛹?*
|
||||
* **现状:** 搜索框高度过高,背景色灰度如果不合适会显得脏。
|
||||
* **建议:** 高度缩小至 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%)。
|
||||
|
||||
陦ィ譬シ譏ッ譛ャ鬘オ髱「逧<EFBFBD><EFBFBD>鬲ゑシ檎岼蜑咲恚襍キ譚・蜒乗弍荳荳ェ譛ェ蜉<EFBFBD>譬キ蠑冗噪 HTML 蜴溽函 Table縲?
|
||||
* **陦ィ螟エ (Header)<29>?*
|
||||
* **邇ー迥カ<E8BFA5>?* 蟄嶺ス捺勸騾夲シ瑚レ譎ッ逋ス<E9808B>悟<EFBFBD>蜑イ郤ソ驥阪よシ乗沫蝗セ譬<EFBDBE>シ育ュ幃会シ牙、ェ鮟大、ェ驥阪?
|
||||
* **菫ョ謾ケ<E8ACBE>?* \* 陦ィ螟エ閭梧勹濶イ謾ケ荳コ譫∵オ<E288B5>噪轣ー濶イ<E6BFB6><EFBDB2>#F9FAFB<EFBFBD>峨?
|
||||
* 蟄嶺ス馴「懆牡蜉<E789A1>豺ア<E8B1BA><EFBDB1>#374151<EFBFBD>会シ悟ュ鈴㍾ Medium縲?
|
||||
* 鬮伜コヲ蝗コ螳夲シ井セ句ヲ?40px<70>会シ梧枚蟄怜桙逶エ螻<EFBDB4>クュ縲?
|
||||
* 遲幃牙崟譬<E5B49F>隼荳コ豬<EFBDBA><E8B1AC>濶イ<E6BFB6>碁シ<E7A281>譬<EFBFBD>ぎ蛛懈慮蜿俶キア縲?
|
||||
* **陦御ク主黒蜈<E9BB92><E89C88>?(Rows & Cells)<29>?*
|
||||
* **陦碁ォ假シ?* 逶ョ蜑崎。碁ォ俶怏轤ケ謖、<E8AC96>御ス<E5BEA1>クコ莠<EFBDBA>ア慕、コ譖エ螟壽焚謐ョ蜿ッ莉・謗・蜿励ょサコ隶ョ蠅槫刈窶懆<E7AAB6>騾?邏ァ蜃鯛晉噪蛻<E599AA>困讓。蠑上?
|
||||
* **譁鷹ゥャ郤ケ<E983A4><EFBDB9>** 蟒コ隶ョ蠑蜷ッ髫碑。悟序濶イ<E6BFB6><EFBDB2>ebra striping<6E>会シ悟<EFBDBC>謨ー陦檎サ呎栫豬<E6A0AB>噪蠎戊牡<E6888A><E789A1>#F9FAFB<EFBFBD>会シ梧怏蜉ゥ莠取ィェ蜷鷹<EFBFBD>隸サ縲?
|
||||
* **霎ケ譯<EFBDB9>シ?* **蜴サ謗臥コオ蜷題セケ譯<EFBDB9>シ?* 邇ー莉」陦ィ譬シ騾壼クク蜿ェ菫晉蕗讓ェ蜷大<E89CB7>蜑イ郤ソ縲りソ吩シ夊ョゥ逡碁擇迸ャ髣エ貂<EFBDB4>或 50%縲?
|
||||
* **謨ー蟄怜ッケ鮨撰シ?* 謇譛画焚蛟シ蛻暦シ亥ケエ鮴<EFBDB4>∵惘蜑榊成蜉帙∵慮髟ソ<E9AB9F>牙ソ<E78999>。サ**蜿ウ蟇ケ鮨?*<2A>∵枚蟄怜<E89F84><E6809C>域ァ蛻ォ<E89BBB>牙キヲ蟇ケ鮨先<E9AEA8>螻<EFBFBD>クュ縲りソ呎弍謨ー謐ョ螻慕、コ逧<EFBDBA>渕譛ャ蜴溷<E89CB4>縲?
|
||||
* **蠑ょクク蛟シ鬮倅コ?(The Pink Areas)<29>?*
|
||||
* **邇ー迥カ<E8BFA5>?* 荵溷ーア譏ッ驍」莠帷シコ螟ア蛟?\-<2D>瑚レ譎ッ譏ッ邊臥コ「濶イ<E6BFB6>悟、ェ荳台コ<E58FB0>?
|
||||
* **菫ョ謾ケ<E8ACBE>?* \* 蟆<>黒蜈<E9BB92><E89C88>シ閭梧勹濶イ謾ケ荳コ騾乗<E9A8BE>縲?
|
||||
* 蟆<>シコ螟ア蛟?\- 謾ケ荳コ譁<EFBDBA>ュ<EFBFBD> NA 謌?Missing<6E>域峩荳謎ク夲シ峨?
|
||||
* 譁<>ュ鈴「懆牡隶セ荳コ讖呵牡謌也コ「濶イ<E6BFB6>悟ュ嶺ス鍋シゥ蟆上?
|
||||
* 螯よ棡蠢<E6A3A1>。サ隕∵怏閭梧勹<E6A2A7>瑚ッキ菴ソ逕ィ譫∵キ。逧<EFBDA1>コ「<EFBDBA><EFBDA2>pacity 10%<25>峨?
|
||||
## **5\. 右侧 AI 助手 (AI Sidebar)**
|
||||
|
||||
* **髱「譚ソ螳ケ蝎ィ<EFBFBD>?*
|
||||
* 逶ョ蜑咲噪霎ケ譯<EFBFBD>、ェ遑ャ縲ょサコ隶ョ蜴サ謗牙キヲ萓ァ霎ケ譯<EFBFBD>シ梧隼逕ィ髦エ蠖ア<EFBFBD>亥ヲゆク頑枚謇霑ー<EFBFBD>峨?
|
||||
* 譬<EFBFBD>「俶<EFBFBD>?"AI 謨ー謐ョ貂<EFBDAE>エ怜勧謇<E58BA7>" 荳矩擇驍」譚。扈ソ郤ソ螟ェ逕溽。ャ<EFBDA1>悟サコ隶ョ蜴サ謗会シ檎峩謗・逕ィ蟄鈴㍾蛹コ蛻<EFBDBA>?
|
||||
* **蟇ケ隸晄ー疲ウ。 (Chat Bubbles)<EFBFBD>?*
|
||||
* **AI 豌疲ウ。<EFBFBD>?* 逶ョ蜑肴弍轣ー濶イ譁ケ蝮励ょサコ隶ョ謾ケ荳コ郤ッ逋ス蜊。迚?\+ 豺。豺。逧<EFBDA1>兜蠖ア<E8A096>梧<EFBFBD>閠<EFBFBD>栫豬<E6A0AB>噪蜩∫煙濶イ閭梧勹<E6A2A7>域オ<E59F9F>エォ<EFBDB4>峨ょ怕隗貞刈螟ァ<E89E9F><EFBDA7>12px \- 16px<EFBFBD>峨?
|
||||
* **逕ィ謌キ豌疲ウ。<EFBFBD>?* 蟒コ隶ョ蜿ウ蟇ケ鮨撰シ御スソ逕ィ蜩∫煙荳サ濶イ<E6BFB6>郁統/邏ォ<E9828F>芽レ譎ッ<E8AD8E>檎區蟄励?
|
||||
* **莉」遐∝摎<EFBFBD><EFBFBD>** 鮟題牡閭梧勹譏?OK 逧<>シ御ス?"霑占。御サ」遐<EFBDA3>" 謖蛾聴驍」荳ェ扈ソ濶イ螟ェ蜒<EFBDAA> Bootstrap 逧<>サ倩ョ、扈ソ莠<EFBDBF>?
|
||||
* **蟒コ隶ョ<EFBFBD>?* 謖蛾聴蛛壼ー丈ク轤ケ<E8BDA4>梧叛蝨ィ莉」遐∝摎蜿ウ荳願ァ抵シ梧<EFBDBC>閠<EFBFBD>★謌仙ケス轣オ謖蛾聴<E89BBE>磯乗<C280>閭梧勹+霎ケ譯<EFBDB9>シ峨?
|
||||
* **霎灘<EFBFBD>譯?(蠎墓<E8A08E><E5A293>)<29>?*
|
||||
* 謌ェ蝗セ荳ュ譛ェ螳悟<EFBFBD>螻慕、コ<EFBFBD>御ス<EFBFBD>サコ隶ョ霎灘<EFBFBD>譯<EFBFBD>ぎ豬ョ蝨ィ蠎暮Κ<EFBFBD>檎蕗蜃コ雜ウ螟溽噪 Padding縲?
|
||||
* **面板容器:**
|
||||
* 目前的边框太硬。建议去掉左侧边框,改用阴影(如上文所述)。
|
||||
* 标题栏 "AI 数据清洗助手" 下面那条绿线太生硬,建议去掉,直接用字重区分。
|
||||
* **对话气泡 (Chat Bubbles):**
|
||||
* **AI 气泡:** 目前是灰色方块。建议改为纯白卡片 \+ 淡淡的投影,或者极浅的品牌色背景(浅紫)。圆角加大(12px \- 16px)。
|
||||
* **用户气泡:** 建议右对齐,使用品牌主色(蓝/紫)背景,白字。
|
||||
* **代码块:** 黑色背景是 OK 的,但 "运行代码" 按钮那个绿色太像 Bootstrap 的默认绿了。
|
||||
* **建议:** 按钮做小一点,放在代码块右上角,或者做成幽灵按钮(透明背景+边框)。
|
||||
* **输入框 (底栏):**
|
||||
* 截图中未完全展示,但建议输入框悬浮在底部,留出足够的 Padding。
|
||||
|
||||
## **6\. 微交互与反馈 (Micro-interactions)**
|
||||
|
||||
* **Hover 迥カ諤<EFBFBD>シ<EFBFBD>** 謇譛臥噪謖蛾聴縲∬。ィ譬シ陦鯉シ碁シ<E7A281>譬<EFBFBD>叛荳雁悉譌カ蠢<EFBDB6>。サ譛蛾「懆牡蜿伜喧<E4BC9C>亥序豺ア謌門序豬<E5BA8F>シ会シ檎鴫蝨ィ逧<EFBDA8>阜髱「諢溯ァ画弍髱呎ュ「逧<EFBDA2>?
|
||||
* **貊壼勘譚。<EFBFBD><EFBFBD>** 陦ィ譬シ蜿ウ萓ァ逧<EFBDA7>サ壼勘譚。譏ッ豬剰ァ亥勣鮟倩ョ、逧<EFBDA4><E980A7>キ蠑擾シ碁撼蟶ク邊礼ウ吶りッキ蜑咲ォッ菴ソ逕ィ CSS 菫ョ謾ケ貊壼勘譚。譬キ蠑擾シ<E693BE>ebkit Scrollbar<61>会シ御スソ蜈カ蜿倡サ<E580A1><EFBFBD>「懆牡蜿俶オ<E4BFB6>シ育<EFBDBC>濶イ蝨<EFBDB2>ァ抵シ会シ御ク肴瓦隗<E793A6>ァ蛾㍾轤ケ縲?
|
||||
## **7\. 諤サ扈難シ夂サ吝燕遶ッ逧<EFBDAF>峩謗・菫ョ謾ケ貂<EFBDB9><E8B282>?*
|
||||
* **Hover 状态:** 所有的按钮、表格行,鼠标放上去时必须有颜色变化(变深或变浅),现在的界面感觉是静止的。
|
||||
* **滚动条:** 表格右侧的滚动条是浏览器默认的样式,非常粗糙。请前端使用 CSS 修改滚动条样式(Webkit Scrollbar),使其变细、颜色变浅(灰色圆角),不抢视觉重点。
|
||||
|
||||
1. **陦ィ譬シ蜴サ郤オ蜷題セケ譯?*<2A>悟宵逡呎ィェ郤ソ<E983A4>碁「懆牡 \#E5E7EB縲?
|
||||
2. **謨ー蛟シ蛻怜承蟇ケ鮨?*縲?
|
||||
3. **鬘カ驛ィ螟ァ謖蛾聴謾ケ蟆?*<2A>梧隼荳コ窶懷崟譬<E5B49F>キヲ+譁<>ュ怜承窶晉噪蟶<E599AA>ア<EFBDB1>碁ォ伜コヲ荳崎カ<E5B48E>ソ<EFBFBD> 40px縲?
|
||||
4. **蟄嶺ス鍋サ滉ク**荳?PingFang SC / Inter<65>瑚。ィ譬シ謨ー蟄礼畑遲牙ョス蟄嶺ス薙?
|
||||
5. **郛コ螟ア蛟シ閭梧勹濶イ蜴サ謗<EFBFBD>**<EFBFBD>梧隼荳コ譁<EFBFBD>ュ怜序郤「縲?
|
||||
6. **AI 萓ァ霎ケ譬丞「槫刈蟾ヲ萓ァ髦エ蠖?*<2A>悟玄蛻<E78E84>アらコァ縲?
|
||||
7. **荳サ濶イ隹<EFBDB2>サ滉ク**<EFBFBD>悟悉謗右xcel扈ソ縲∵冠隴ヲ郤「遲牙、壻ス呎揩濶イ縲
|
||||
## **7\. 总结:给前端的直接修改清单**
|
||||
|
||||
1. **表格去纵向边框**,只留横线,颜色 \#E5E7EB。
|
||||
2. **数值列右对齐**。
|
||||
3. **顶部大按钮改小**,改为“图标左+文字右”的布局,高度不超过 40px。
|
||||
4. **字体统一**为 PingFang SC / Inter,表格数字用等宽字体。
|
||||
5. **缺失值背景色去掉**,改为文字变红。
|
||||
6. **AI 侧边栏增加左侧阴影**,区分层级。
|
||||
7. **主色调统一**,去掉Excel绿、报警红等多余杂色。
|
||||
Reference in New Issue
Block a user