ctms/docs/plans/2026-03-04-ctms-enterprise-ui-design.md

CTMS 企业级 UI 改造设计方案（第一阶段）

1. 目标与边界

1.1 North Star（1-2 周）

将 CTMS 从“功能可用”升级为“管理层一眼认可的企业级系统”，聚焦：

1. 视觉统一：10 个核心页面采用同一套视觉语言。
2. 信息层级清晰：标题、指标、风险、操作区一眼分层。
3. 专业可信：克制、高密度但不混乱、细节一致。

1.2 In Scope（第一阶段）

1. 全局壳层：侧边栏、顶栏、面包屑、页面头、卡片容器。
2. 设计基础：色彩/字体/间距/圆角/阴影/状态色 token 统一。
3. 高曝光 10 页：
   • /project/overview
   • /project/milestones
   • /subjects
   • /risk-issues/sae
   • /risk-issues/pd
   • /risk-issues/monitoring-visits
   • /fees/contracts
   • /fees/special
   • /file-versions
   • /admin/projects/:projectId
4. 轻交互：筛选区、表格工具栏、主次按钮层级、空态/加载态统一。

1.3 Out of Scope（第一阶段不做）

1. 业务流程重构和权限逻辑改动。
2. 新增复杂图表引擎或大规模前端架构迁移。
3. 全量页面一次性翻新。

2. 视觉方向与设计系统基线

2.1 视觉方向

Executive Clinical Minimalism（管理层临床极简）

关键词：克制、秩序、可信、少而精。 避免：花哨渐变、互联网运营感、过度装饰。

2.2 品牌识别锚点

1. 深海军蓝 + 冷灰主色体系，传达管理层报告感。
2. 高对比标题 + 低饱和数据面，强化信息主次。
3. 统一壳层卡片语言，确保跨页面一致识别。

2.3 最小设计系统（MDS）

1. Tokens
   • Color：brand / text / bg / border / status
   • Type：Display（标题） + UI（正文） 双字体体系
   • Space：8pt 网格（4/8/12/16/24/32）
   • Radius/Shadow：统一 3 档，页面禁止自定义分叉
2. 组件皮肤（Element Plus 主题化）
   • Button（主/次/危险/幽灵）
   • Input/Select/DatePicker
   • Table（表头、行高、hover、密度）
   • Card/Section Header/Tag
3. 交互规则
   • 页面主按钮固定在右上主操作区
   • 筛选条统一（左筛选、右动作）
   • 表格区统一“工具栏-表格-分页”三段结构

2.4 第一阶段质量门槛

1. 10 页视觉一致性 >= 90%。
2. 不出现第三套颜色、第三套圆角、第三套按钮风格。
3. 1366 桌面与 iPad 宽度保持结构稳定。

3. 优先级与里程碑

3.1 优先级

P0（必须完成）

1. 全局壳层统一：Layout.vue + main.css + unified-page.css。
2. 10 个核心页面统一改造（见 In Scope）。
3. 统一状态体系：加载态、空态、错误态、禁用态、风险高亮态。

P1（有余量时）

1. 表单页统一（新建/编辑页头、分组、主次按钮）。
2. 克制型关键动效（入场/hover）。

P2（后续阶段）

1. 全模块扩展（知识库、启动授权细分页）。
2. 深度交互优化（跨页筛选记忆、快捷操作）。
3. 主题扩展（暗色/品牌变体，按需）。

3.2 两周里程碑

M1（第 1-3 天）：视觉基线锁定

1. 冻结 tokens（颜色/字体/间距/阴影/圆角）。
2. 产出 3 类样板页（概览、列表、详情）。
3. 评审后锁定不可随意改动项。

M2（第 4-7 天）：高曝光页面落地（第一批）

1. 完成 P0 页面中的 6 页。
2. 统一页面头、筛选条、表格工具栏、分页区。
3. 首轮一致性巡检与收敛。

M3（第 8-10 天）：P0 收敛（第二批）

1. 完成剩余 4 页。
2. 统一空态/加载态/错误态。
3. 窄屏最小可用适配。

M4（第 11-14 天）：验收与打磨

1. 演示路径串联：概览 -> 风险 -> 进度 -> 费用。
2. 视觉一致性检查（目标 >= 90%）。
3. 性能与可访问性快速校验并修复阻断项。

4. 执行架构与风险控制

4.1 双轨并行执行

1. 轨道 A（20%）：Design System 底座
   • 固化 token、组件皮肤、壳层规范。
2. 轨道 B（80%）：核心页面改造
   • 严格按 P0 页面推进，仅做视觉 + 轻交互。

4.2 工作机制

1. 每日节奏：样板页 -> 批量套用 -> 巡检收敛。
2. 每 2 天一次统一性评审（跨页面对齐）。
3. 决策优先级：统一性 > 局部美化。

4.3 主要风险与控制

1. 风格分叉
   • 控制：样式入口收敛到全局 token 与统一壳层 class。
2. 时间被细节吞没
   • 控制：先结构统一，后细节打磨；P1 不挤占 P0。
3. 观感升级但管理层不买账
   • 控制：围绕高管路径做演示脚本。
4. 样式改动引入回归
   • 控制：每页改造后执行关键路径 smoke（筛选/跳转/分页/导出）。

5. 第一阶段验收清单

1. 统一性：10 页通过同一套视觉检查项。
2. 观感：15 分钟演示无明显风格跳变与信息噪声。
3. 可用性：主操作、筛选、列表关系明确。
4. 稳定性：桌面与窄屏无结构破坏。
5. 风险控制：无新增业务逻辑缺陷。

6. 决策结论

1. 采用“Design System 20% + 页面改造 80%”双轨并行。
2. 第一阶段严格完成 P0；P1 仅在余量下执行。
3. 下一步进入实施计划拆解（writing-plans）。