# OKR Performance 系统全量重构 ## 项目路径 `/Users/destiny/dev/emoon/projects/okr-performance` ## 重构目标 将现有 OKR 绩效管理系统从「Element Plus 默认风格」全面升级为 **Cohere 编辑式克制设计语言 × 医梦品牌色体系**，同时补齐原型中新增页面所需的后端接口。 --- ## 一、设计令牌（已完成，直接复制） 设计令牌已预编译在以下路径，请直接复制到前端样式目录： ```bash 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"` 对应区块进行重构。核心要求： #### 通用规则（所有页面） 1. **底色**：从 `#f5f8fa`（浅灰蓝）→ `#ffffff`（纯白画布） 2. **卡片**：移除所有 `box-shadow`，改为 `1px solid var(--color-border)` + `border-radius: var(--radius-md)`（16px） 3. **按钮**：全部改为药丸形 `border-radius: var(--radius-pill)`（9999px） - 主操作按钮：青底 `#3ad4d8` + 深色文字 - 次要按钮：1px 边框 + 透明底 + hover 青色边框 4. **表格**： - 偶数行背景：`var(--color-accent-micro)`（极浅青 `rgba(58,212,216,0.035)`） - hover 行：`var(--color-accent-hover-bg)`（浅青 `rgba(58,212,216,0.06)`） - 表头：纯白底 + 底部分隔线，字号 13px 全大写 5. **输入框**：focus 环改为 `0 0 0 3px var(--color-accent-glow)`（青色发光环） 6. **链接**：统一使用 `var(--color-accent)` 青色，hover 加深 7. **字号体系**：body 15px、标题 22px/32px/62px、微文字 12px 8. **禁用 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 中新增以下字段： ```java - aiInsights (List): 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（`