OKR Performance 系统全量重构

项目路径

/Users/destiny/dev/emoon/projects/okr-performance

重构目标

将现有 OKR 绩效管理系统从「Element Plus 默认风格」全面升级为 Cohere 编辑式克制设计语言 × 医梦品牌色体系，同时补齐原型中新增页面所需的后端接口。

一、设计令牌（已完成，直接复制）

设计令牌已预编译在以下路径，请直接复制到前端样式目录：

cp /Users/destiny/Library/Application\ Support/Open\ Design/namespaces/release-stable/data/projects/a238d238-0a60-492d-a2de-b339c0fbd8ba/design-tokens/theme.css \
   /Users/destiny/dev/emoon/projects/okr-performance/frontend/src/styles/theme.css

cp /Users/destiny/Library/Application\ Support/Open\ Design/namespaces/release-stable/data/projects/a238d238-0a60-492d-a2de-b339c0fbd8ba/design-tokens/components.css \
   /Users/destiny/dev/emoon/projects/okr-performance/frontend/src/styles/components.css

cp /Users/destiny/Library/Application\ Support/Open\ Design/namespaces/release-stable/data/projects/a238d238-0a60-492d-a2de-b339c0fbd8ba/design-tokens/element-plus.css \
   /Users/destiny/dev/emoon/projects/okr-performance/frontend/src/styles/element-plus.css

这三个文件包含：

文件	内容
`theme.css`	71 个 CSS 变量（Cohere 白底画布 + 医梦品牌色 `#2b1f99`/`#3ad4d8` + 5 色语义系统）
`components.css`	组件样式（移除所有 gradient/glass，纯白卡片 + 1px 边框 + 药丸按钮）
`element-plus.css`	Element Plus 全覆盖（pill 圆角 + 青色 hover + Cohere 表格）

变量名 100% 向后兼容，不会破坏任何现有 .vue 文件中引用的 var(--color-*)。

二、前端重构要求

2.1 设计原型参考

原型文件位于： /Users/destiny/Library/Application Support/Open Design/namespaces/release-stable/data/projects/a238d238-0a60-492d-a2de-b339c0fbd8ba/index.html

在浏览器中打开该文件可查看全部 18 个页面的设计效果。左侧导航可切换页面。

2.2 全局布局壳层重构

现有壳层：AppShell.vue + ModuleRail.vue + ContextNav.vue + SystemStatusBar.vue

重构要点：

移除三层玻璃态（backdrop-filter: blur() 全部去掉）
ModuleRail 背景从靛蓝渐变改为纯深靛蓝 #2b1f99
ContextNav 和 StatusBar 背景改为纯白 + 1px 底边框 var(--color-border)
导航选中态：黑底 + 2px 青色发光环 var(--color-accent-glow)
侧栏宽度保持 220px，左侧模块栏 64px
SystemStatusBar 高度 28px，文字 11px

2.3 页面逐一重构（17 个页面）

每个页面按照原型中的 data-page="xxx" 对应区块进行重构。核心要求：

通用规则（所有页面）

底色：从 #f5f8fa（浅灰蓝）→ #ffffff（纯白画布）
卡片：移除所有 box-shadow，改为 1px solid var(--color-border) + border-radius: var(--radius-md)（16px）
按钮：全部改为药丸形 border-radius: var(--radius-pill)（9999px）
- 主操作按钮：青底 #3ad4d8 + 深色文字
- 次要按钮：1px 边框 + 透明底 + hover 青色边框
表格：
- 偶数行背景：var(--color-accent-micro)（极浅青 rgba(58,212,216,0.035)）
- hover 行：var(--color-accent-hover-bg)（浅青 rgba(58,212,216,0.06)）
- 表头：纯白底 + 底部分隔线，字号 13px 全大写
输入框：focus 环改为 0 0 0 3px var(--color-accent-glow)（青色发光环）
链接：统一使用 var(--color-accent) 青色，hover 加深
字号体系：body 15px、标题 22px/32px/62px、微文字 12px
禁用 emoji 作为图标：全部替换为 SVG 内联图标或 Element Plus icon 组件

语义色使用规范

颜色	变量	场景
青色 `#3ad4d8`	`--color-accent`	主按钮、数据高亮、进度条、链接、focus 环
深靛蓝 `#2b1f99`	`--color-dark`	侧栏背景、登录品牌面板、O pill 标签
暖橙 `#f59e0b`	`--color-orange-*`	超时、延迟、扣分、待处理、警告
深红 `#dc2626`	`--color-red-*`	严重、紧急、未达标、申诉中
绿色 `#2e9d65`	`--color-green-*`	已完成、已通过、正常
靛蓝 `#2b1f99`（浅层）	`--color-indigo-*`	柱状图渐变、非紧急进度条

页面级重构清单

页面	特殊要求
LoginView	深靛蓝左侧品牌面板 + 白色右侧表单，Cohere 式双栏布局
WorkspaceView	巨型标题「工作台」+ AI 绩效洞察暗卡（`--color-dark-surface` 底）+ 4 个指标卡顶部色条（青/靛蓝/橙/红）+ 风险预警红色标签 + 待办列表
MyOkrView	O pill → 深靛蓝底白字 + 4 个 KR 卡片左侧 4px 色条（青/靛蓝/靛蓝/红）+ 进度条 `var(--color-accent)` 青色，< 40% 进度自动变为红色
TeamOkrView	成员卡片网格 + 部门目标树 + 进度汇总条 + 延迟标签（橙底）
AlignmentView	目标对齐层级图（CSS 树形连接线）+ 未对齐高亮红色 border
OkrExecutionView	甘特图风格时间轴 + 里程碑标记 + 超时/延迟橙色标签
MyResultView	86 分巨型青色数字 + 四维分解条（青/靛蓝/橙/绿渐变）+ 评级徽章
HistoryView	多周期对比表格 + 柱状图 Q1-Q4 靛蓝渐变（opacity 0.25→0.85）+ 当前周期青色柱发光
ScoringListView	待评分人员表格 + 状态标签（待评/已完成/申诉中）+ 批量操作药丸按钮
ScoringEditView	双栏对比（自评 vs 上级）+ 评分滑块 + 扣分项红色进度条
ScoreAppealView	申诉工单列表 + 状态流（待处理→处理中→已解决）+ 红色 tag 标记紧急申诉
FeedbackView	对话式反馈记录 + AI 辅助建议暗卡
PeriodListView	周期时间轴 + 阶段标签（制定→对齐→执行→评分→归档）
KpiTemplateView	模板卡片 + 权重配置 + 评分规则摘要
DimensionConfigView	维度列表 + conic-gradient 权重饼图
OrgView	树形组织图 + 部门成员表格
NotificationView	通知列表 + 未读标记（青色圆点）+ 类型筛选
LogView	日志表格 + 操作类型过滤 + 分页

2.4 组件重构

组件	重构内容
`MetricBar.vue`	进度条颜色支持 `accent/indigo/orange/red/green` 五种语义色
`StatusLabel.vue`	新增 `overdue/critical/completed/pending` 四个语义状态
`PeriodBanner.vue`	移除渐变背景 → 纯白 + 1px 底边框
`PageContextBar.vue`	移除 blur 背景 → 纯白 + 底边框
`WorkflowRail.vue`	步骤条改为 pill 圆角 + 青色 active 态
`AsyncState.vue`	Loading/Empty/Error 状态图标改为 SVG（非 emoji）

三、后端新增接口

原型中部分功能在现有 API 中缺少对应端点，需要新增：

3.1 OKR 模块新增

GET  /api/okr/period/{periodId}/alignment-graph    # OKR 对齐关系图数据（树形结构 + 连接关系）
GET  /api/okr/period/{periodId}/execution-timeline  # 执行进度时间轴（甘特图数据：里程碑 + 时间范围 + 实际进度）
GET  /api/okr/period/{periodId}/risk-items          # 风险项列表（延迟/未对齐/进度落后）

3.2 绩效模块新增

GET  /api/scores/statistics                         # 评分统计（分布饼图：S/A/B/C/D 人数 + 平均分 + 中位数）
GET  /api/scores/trend                              # 个人历史趋势（最近 N 个周期的得分变化，用于柱状图）

3.3 通知模块增强

GET  /api/notifications/unread-by-type              # 按类型分组的未读数（系统/绩效/提醒/申诉）

3.4 工作台增强

现有 GET /api/workspace/overview 需在返回 DTO 中新增以下字段：

- aiInsights (List<AiInsightDto>): AI 绩效洞察列表
  - type: RISK / SUGGESTION / MILESTONE
  - severity: INFO / WARN / CRITICAL
  - title: 标题
  - description: 详细说明
  - relatedEntityId: 关联实体 ID
- riskCount: 风险项总数
- overdueCount: 超时项总数

3.5 操作日志增强

现有 GET /api/system/logs 需增加以下可选查询参数：

?action=CREATE/UPDATE/DELETE/SUBMIT/APPROVE/REJECT   # 按操作类型过滤
?entityType=OKR/KR/SCORE/PERIOD/USER                  # 按实体类型过滤
?startDate=2025-01-01&endDate=2025-12-31              # 按日期范围过滤

3.6 数据库迁移

如果上述新增接口需要额外字段或表，请在 DatabaseMigrationRunner.java 中新增迁移版本，并在 schema.sql 中同步更新。所有迁移必须向后兼容（ALTER TABLE ... ADD COLUMN 仅在列不存在时执行）。

四、技术约束

前端

Vue 3 Composition API（<script setup> 语法）
Element Plus 2.6——不替换 UI 库，仅通过 CSS 变量覆盖样式
所有新组件使用 var(--color-*) 引用 Token，不得使用裸色值
图标使用 Element Plus Icon 组件或内联 SVG，不得使用 emoji
保持现有路由结构不变，不新增路由

后端

Spring Boot 3.2.5 + MyBatis-Plus 3.5.6
SQLite 数据库（文件路径 backend/data/okr-performance.db）
所有新增 API 必须遵循现有 ApiResult<T> 统一响应格式
所有新增 API 必须遵循现有 JWT 认证 + 角色鉴权机制
Controller/Service/Mapper 分层与现有代码风格一致
新增数据库迁移必须幂等（可重复执行不报错）

兼容性

不破坏现有 API 契约（已有端点不改路径、不改请求/响应结构）
不破坏现有数据库表结构（仅做增量迁移）
前端所有页面必须编译通过（npm run build 无错误）
后端所有测试必须通过（mvn test 无失败）

五、执行顺序

复制设计令牌：将 3 个 CSS 文件复制到 frontend/src/styles/
重构壳层：AppShell.vue → ModuleRail.vue → ContextNav.vue → SystemStatusBar.vue
重构通用组件：MetricBar / StatusLabel / PeriodBanner / PageContextBar / WorkflowRail / AsyncState
重构页面：按原型逐页重构（工作台 → OKR → 绩效 → 管理 → 系统）
后端新增接口：按 3.1 → 3.2 → 3.3 → 3.4 → 3.5 顺序实现
数据库迁移：执行增量迁移脚本
集成测试：npm run build + mvn test + 手动端到端测试
对照原型验收：在浏览器中打开原型 index.html 逐页比对

六、验收标准

前端 17 个页面全部使用新的 Cohere 设计令牌
页面风格与原型 index.html 一致——纯白画布、药丸按钮、1px 边框驱动层次、5 色语义系统
所有裸色值（#xxx）仅在 theme.css 的 :root 块中出现
超时/扣分/严重场景统一使用橙红语义色
图标全部使用 SVG/Element Plus Icon，无 emoji
后端 7 个新接口全部可用 + 2 个增强接口返回包含新字段
前端 npm run build 零错误
后端 mvn test 全部通过
数据库迁移幂等可重复执行

CODEX_REFACTOR_PROMPT.md 11 KB 고유링크 히스토리 Raw