# 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）。