Cheng Zhou
152 lines
5.2 KiB
Markdown
152 lines
5.2 KiB
Markdown
# 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）。
|