# OKR 绩效系统 · 前端去 AI 味改造 v2（信息架构重构）

**日期**：2026-06-20
**作者**：ZCode（基于与产品负责人 wangkangyjy 的头脑风暴）
**状态**：待审查
**前置规格**：`2026-06-18-flow-audit-and-medtech-ui-design.md`（v1，已完成 token 化与反模式清理）

---

## 0. 背景与任务范围

v1 已完成「表面反模式清理」（去 emoji、去硬编码色、token 化、verify 脚本守卫），两轮 GPT 迭代后验收脚本全部通过。但**用户反馈「AI 味基本没改掉」**。

**根因诊断**：AI 味不在代码规范层（那层已经干净），而在**信息架构层**——营销式 hero 标题区、彩色胶囊徽章、情感化引导卡、低密度卡片堆叠。GPT 迭代只动了视觉层（style），没动信息架构（template 结构），所以效果等于没改。

本规格（v2）是 v1 之后的**第二阶段**：在已干净的 token 基础上，**重构 5 个样板页的信息架构**，从「讲故事」转向「看数据」，达成用户选定的 **D 风格 = AI 科研外壳 + 临床数据内核**。

**已确认的决策**（来自头脑风暴）：
- 风格：D = AI 科研外壳（留白克制、下划线式输入、大写小字标签）+ 临床数据内核（表格化、高密度、对照式）
- 力度：B = 中度重构（重排信息架构，视觉 token 只增不改，更新 verify 脚本断言）
- 范围：v1 的 5 个样板页（LoginView / MainLayout / MyOkrView / ScoringEditView / MyResultView）
- MyOkrView 进度更新入口：侧边抽屉（保持表格干净）
- ScoringEditView：三列对照（证据 · 自评分 · 终评），保留「自评 vs 终评差异」提示
- MyResultView：删等级圆环，改数据条构成 + 历史趋势；自评表单态保持现状（只改结果态）
- LoginView：全屏左右分栏（左深色品牌区 + 右白表单），下划线式输入框

**不在本次范围（YAGNI）**：
- 不动其余 ~10 个页面（视觉可能与新样板页有轻微脱节，待样板页验收后再决定是否套用）
- 不改业务逻辑、API、数据库
- 不引入图标库依赖（几何图标用内联 SVG 或 unicode 几何字符）
- 不做深色模式

---

## 1. 设计语言定义（D 风格的具体化）

### 1.1 信息架构原则

| 原则 | 含义 | 反模式（禁止） |
|---|---|---|
| **工具栏顶栏** | 标题降级进顶部工具栏，和周期/状态/操作挤一行 | ❌ 独立的大标题 hero 区 |
| **表格化数据** | O/KR、评分项用表格/网格行展示，一屏看全 | ❌ 大卡片纵向堆叠 |
| **对照式布局** | 评分页三列对照（证据·自评·终评），结果页自评vs终评 | ❌ 左右两栏各说各话 |
| **数字优先** | 进度用 `72%` + `21600/30000`，状态用色点 | ❌ 渐变进度条、彩色胶囊 tag |
| **区段用色带标题** | OKR/绩效区段用 1 行医疗青小标题分隔 | ❌ 大卡片包裹 + section 胶囊徽章 |
| **大写小字标签** | 表头、字段名用 uppercase + letter-spacing 0.5px | ❌ 营销式副标题口号 |

### 1.2 theme.css 增量 token（只增不改）

```css
:root {
  /* 已有 token 全部保留，以下为 v2 新增 */

  /* 数据表格系统 */
  --table-row-height: 40px;
  --table-row-height-compact: 32px;
  --table-header-bg: var(--color-surface-subtle);
  --table-row-hover: var(--color-surface-muted);
  --table-row-group-bg: var(--color-surface-tint-brand);  /* O 分组行浅底 */
  --table-border: var(--color-border-soft);

  /* 工具栏顶栏 */
  --toolbar-height: 48px;
  --toolbar-bg: var(--color-surface-subtle);
  --toolbar-border: var(--color-border);

  /* 状态色点（6px 圆点，替代彩色 tag） */
  --dot-size: 6px;

  /* 区段色带标题 */
  --section-band-bg: var(--color-surface-tint-info);
  --section-band-color: var(--color-medical);
  --section-band-font-size: 11px;
  --section-band-letter-spacing: 0.3px;

  /* 大写小字标签（表头/字段名） */
  --label-uppercase: uppercase;
  --label-letter-spacing: 0.5px;
  --label-font-size: 10px;

  /* 侧边栏 v2 加深 */
  --color-sidebar-bg: #1d166b;   /* 从 #2b1f99 加深 */

  /* 登录页品牌区渐变 */
  --color-login-brand-from: #1d166b;
  --color-login-brand-to: #120d4a;
}
```

### 1.3 新增通用组件（在 components.css 注册）

- `.data-toolbar` — 工具栏顶栏容器（替代 page-hero）
- `.data-table` — 表格化数据容器（O 分组行 + KR 缩进子行）
- `.section-band` — 区段色带标题（替代 section-head 胶囊）
- `.status-dot` — 6px 状态色点（替代 effect="dark" round tag）
- `.metric-bar` — 水平数据条（构成展示，如 OKR 81%）
- `.uppercase-label` — 大写小字标签
- `.side-drawer` — 侧边抽屉（KR 详情/进度更新）
- `.compare-grid-3` — 三列对照网格（评分页）

---

## 2. 五个样板页改造蓝图

### 页面 1：MyOkrView（我的 OKR）— 改动最大

**核心**：从「卡片堆叠」改为「工具栏 + 表格化 O/KR 视图」。

#### 结构变更

```
当前：page-hero → state-banner → rules-card → section-head(胶囊) → okr-card × N
目标：data-toolbar(标题+周期+状态+操作) → data-table(O分组行+KR缩进行)
      → 空态用工具栏按钮引导（不用大引导卡）
```

#### data-toolbar 顶栏（替代 hero）
- 左：页面标题（13px 600）+ 分隔符 + 周期名 + 状态色点标签
- 右：距周期结束天数 + 主操作按钮（"制定 OKR" / "更新进度"）

#### data-table 表格列定义

| 列 | 内容 | 宽度 |
|---|---|---|
| 标识 | O1/O2（分组行，accent 色）或 `└`（KR 缩进行） | 28px |
| 标题 | O 标题（加粗）/ KR 标题（次要色） | flex |
| 权重 | 仅 KR 行（40/35/25） | 44px |
| 进度 | 仅 KR 行，百分比（brand 色 600） | 60px |
| 当前/目标 | 仅 KR 行，`21600/30000` | 90px |
| 状态 | 色点（●进行中/●阻塞/●完成） | 56px |

- O 行：浅底（`--table-row-group-bg`），显示 O 标题 + 整体进度 + 整体状态点
- KR 行：缩进 28px，前缀 `└`，次要文字色
- 点击 O 行：展开/折叠 KR（默认展开）
- 点击 KR 行：打开**侧边抽屉**（KR 详情 + 进度历史 + 更新进度表单）

#### 四个状态分支的处理

| 周期状态 | 表格内容 | 特殊处理 |
|---|---|---|
| OKR_ALIGN（有 myOkr） | 表格只读展示 | 顶部工具栏「编辑 OKR」按钮 → 现有 dialog |
| OKR_ALIGN（无 myOkr） | 空态 | 工具栏「制定 OKR」按钮，表格区显示极简空态文案（不用大引导卡） |
| EXECUTING | 表格 + KR 可更新进度 | 点 KR 行 → 抽屉内 input-number 更新 |
| ASSESSING | 表格只读 | 工具栏提示「去完成绩效自评」按钮 |

#### 删除清单
- `page-hero` / `hero-info`
- `section-badge.personal/.superior/.review`（胶囊徽章）
- `section-head` 整个结构
- `hint-card`（大图标引导卡）→ 改工具栏按钮 + 表格空态
- `okr-card` / `okr-grid`（卡片容器）
- KR 行内联的 input-number + el-select + 更新按钮 → 移入抽屉
- 所有 `effect="dark" round` 的 el-tag

#### 上级 OKR 对齐区（OKR_ALIGN 且无 myOkr 时）
- 上级 OKR 也表格化展示，KR 行标注「指派给我」（用 accent 淡底小标签，非胶囊）
- 待审核 OKR（pendingReviews）同样表格化，「操作」列放通过/驳回

---

### 页面 2：ScoringEditView（绩效评分）— 三列对照

**核心**：从「左右两栏分散卡片」改为「三列对照表：证据 · 自评分 · 终评」。

#### 结构变更

```
当前：page-hero → review-workbench(evidence-panel | decision-panel)
目标：data-toolbar(考评+员工+周期+提交) → compare-grid-3(证据 | 自评分 | 终评)
      → 区段色带分隔 OKR/绩效/加减分 → 底部固定总览栏
```

#### 三列对照网格（compare-grid-3）

| 左列（证据·员工自评） | 中列（自评分） | 右列（你的终评） |
|---|---|---|
| KR 标题 + 实际进度 + 完成率 + 阻塞天数 | 员工自评分数（13px 700） | 终评下拉（卓越/良好/达标分级） |

- 列宽：`1.4fr 70px 1fr`
- OKR 区段：每条 KR 一行三列对照
- 绩效区段：每个维度一行三列对照
- 加减分行：对照展示

#### 区段色带标题（section-band）
- 医疗青底（`--section-band-bg`）+ 医疗青字（`--color-medical`）
- 文案：「OKR 目标达成 · 满分 60」「绩效维度 · 满分 40」
- 替代当前的大卡片 panel-head

#### OKR 进度日志
- 当前左侧的「更新记录」列表 → 移入点击 KR 行展开的折叠区（或抽屉）
- 表格主区只保留 KR 摘要 + 完成率，保持高密度

#### 底部固定总览栏
- 吸附在底部（`position: sticky; bottom: 0`）
- 内容：终评总分（20px 700）+ 等级标签（色点+字母）+ **「自评 83.5 · 差异 −2.3」**
- 替代当前右上角的 result-preview 渐变卡

#### 自评 vs 终评差异提示（新功能）
- 差异 = 终评总分 − 自评总分
- |差异| ≥ 10 时：总览栏差异文字变 warning 色 + tooltip「打分偏差较大，建议复核」
- 联动诊断报告严重-3（自评与终评一致性校验）的 UI 解法

#### 响应式降级
- ≥1280px：三列对照
- <1280px：降级为「证据在上 + 打分在下」堆叠，但每行仍保留「自评 X → 终评 Y」对照信息

#### 删除清单
- `page-hero` / `hero-info`
- `evidence-panel` / `decision-panel` 大卡片容器（改为 compare-grid-3 网格）
- `okr-record-card` / `orr-kr-card` 嵌套卡片
- `self-block` / `self-total-bar` 分散块（合并进对照表）
- `result-preview` 渐变卡（改底部总览栏）
- 所有 `effect="dark" round` 的 el-tag

---

### 页面 3：MyResultView（我的绩效结果）— 删圆环，建数据视图

**核心**：删 conic-gradient 等级圆环，改为「数据卡 + 构成条 + 历史趋势」。

**注意**：自评表单态（showSelfForm 为 true 时）**保持现状不动**，本规格只改结果展示态。

#### 结构变更（结果态）

```
当前：page-hero → score-hero(grade-ring + 渐变) → score-breakdown 卡片 → 操作按钮(✓💬)
目标：data-toolbar → result-grid(左大数字+等级 | 右构成条)
      → 自评vs终评对照行 → 操作栏 → 历史趋势条形图
```

#### result-grid 主结果区（两栏）
- 左栏（200px 固定）：
  - 「本期终评」大写小字标签
  - 总分大数字（40px 700）
  - 等级标签（色点 + 字母 A + 描述）
  - 「较上期 ▲+5.2 分」（需历史数据，无历史时显示「首次考评」）
- 右栏（flex）：
  - 「得分构成」大写小字标签
  - 4 行 metric-bar：OKR / 绩效 / 加分 / 扣分
  - 每行：标签 + 分数（48.5 / 60）+ 水平进度条（81% 填充）

#### 自评 vs 终评对照行
- 三列网格：OKR / 绩效 / 总分
- 每列：「自评 50.0 → 终评 48.5」

#### 历史趋势条形图（底部）
- 展示最近 4 期成绩，本期高亮（brand 色），其余灰色
- 高度 48px 的 mini bar chart
- **数据源已确认缺失**：当前 API 仅有 `scoreApi.getMyResult(periodId)`（单期）和 `getKrHistory`（KR 进度历史），**无「我的历史绩效列表」接口**。
- **实施方案（前端兜底，不新增后端接口）**：
  - 方案一（推荐）：前端轮询 `scoreApi.getMyResult(periodId)`，需要历史周期 ID 列表 → 由 `periodApi.list()` 取最近 4 个已归档周期，逐个查 `getMyResult`。N+1 查询但数据量小（最多 4 次），可接受。
  - 方案二：若轮询成本过高或数据缺失，**隐藏趋势区**，显示空态文案「暂无历史成绩」，不阻塞页面。
  - 实现时优先尝试方案一，失败回退方案二。**本规格不新增后端接口**（保持「不动后端」边界）。

#### 操作栏
- 三个等宽按钮：「确认结果」「提起申诉」「查看面谈记录」
- 扁平化：边框 + 文字，确认态用 brand 淡底高亮
- 删除 ✓ 💬 emoji

#### 删除清单
- `page-hero` / `hero-info`
- `score-hero` 整个区（含 conic-gradient grade-ring + linear-gradient 背景）
- `grade-ring` / `grade-letter` 圆环组件
- `score-breakdown` 卡片（改 metric-bar）
- emoji 按钮文案
- `effect="dark" round` 的 el-tag

---

### 页面 4：MainLayout（主架）— 侧边栏微调

**核心**：去 emoji、细化选中态、加深背景、强化分组标签。

#### 侧边栏改动
- 背景深度：`#2b1f99` → `#1d166b`（`--color-sidebar-bg`）
- 菜单图标：删 emoji（📅🎯👥✏️💬），改单色几何字符（▦ ◎ ⬡ ⇄ ▱ ◠）或 el-icon
- 选中态：左边框 3px → 2px，底色 rgba(58,212,216,0.1) → 0.08
- 分组标题（考评管理/系统管理）：改极淡大写小字（letter-spacing 0.8px，opacity 0.35）
- 品牌区副标题：「OKR 绩效管理」→ 大写小字「OKR · 绩效」
- 心电波形装饰线保留，opacity 保持 0.5

#### 顶栏改动
- 面包屑保留
- 角色 tag：`round` → 方角（radius 4px）
- 通知 badge 颜色对齐 brand

---

### 页面 5：LoginView（登录页）— 全屏分栏 + 下划线输入

**核心**：从「浅底居中两栏」改为「全屏左深色品牌区 + 右白表单」，输入框改下划线式。

#### 结构变更

```
当前：浅底 grid(品牌区 | 表单卡) 居中
目标：全屏 grid(左深色品牌区 1.2fr | 右白表单 1fr) 撑满
```

#### 左侧深色品牌区
- 背景：`linear-gradient(135deg, #1d166b, #120d4a)`
- 顶部：logo + 「医梦AI」（小字 600）
- 中下部：
  - 主文案「绩效运营工作台」（18px 600）
  - 功能直述（替代营销口号）：「目标对齐 · 进度可追溯 · 结果可解释 · 医疗级数据严谨」
  - 心电波形装饰线（保留，opacity 0.6）
- 分子节点 SVG：右下角，opacity 0.08（更淡）

#### 右侧表单区（纯白科研感）
- 「Internal Access」大写小字 eyebrow（letter-spacing 1.5px）
- 「账号登录」标题（14px 500，letter-spacing 0.3px）
- **下划线式输入框**（自定义 Element Plus）：
  - 字段名用大写小字标签（用户名/密码，letter-spacing 0.5px）
  - 输入区只有底部 1px 边框（`border-bottom: 1px solid var(--color-border)`）
  - focus 时下边框变 accent 色
  - 去掉 Element Plus 默认的填充背景和圆角
- 登录按钮：radius 6px → 4px，letter-spacing 0.5px，文字「登 录」
- 底部辅助文案：「账号由 HR 管理员创建」

#### 下划线式输入框实现（自定义 .underline-input）
```css
.underline-input :deep(.el-input__wrapper) {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 4px 0;
}
.underline-input :deep(.el-input__wrapper.is-focus) {
  border-bottom-color: var(--color-accent);
  box-shadow: none;
}
.underline-input :deep(.el-input__wrapper:hover) {
  border-bottom-color: var(--color-accent);
}
```

---

## 3. verify 脚本更新

### 3.1 `verify-medtech-theme.mjs` 新增断言

```js
// 新增工具栏/表格/对照类检查
const layoutChecks = new Map([
  ['src/views/okr/MyOkrView.vue', 'data-toolbar'],      // 替代 page-hero
  ['src/views/okr/MyOkrView.vue', 'data-table'],        // 新增表格
  ['src/views/scoring/ScoringEditView.vue', 'compare-grid-3'],  // 三列对照
  ['src/views/scoring/ScoringEditView.vue', 'section-band'],    // 区段色带
  ['src/views/scoring/MyResultView.vue', 'metric-bar'],         // 数据条
  ['src/components/MainLayout.vue', 'clinical-sidebar'],        // 已有，保留
])

// 禁用类检查（新增）
const bannedPatterns = [
  { pattern: /page-hero/, message: '禁止 page-hero（改用 data-toolbar）' },
  { pattern: /section-badge/, message: '禁止 section-badge 胶囊徽章' },
  { pattern: /grade-ring/, message: '禁止 grade-ring 圆环' },
  { pattern: /score-hero/, message: '禁止 score-hero 渐变区' },
  { pattern: /hint-card/, message: '禁止 hint-card 大引导卡' },
  { pattern: /conic-gradient/, message: '禁止 conic-gradient' },
]
```

### 3.2 `verify-scoring-contract.mjs` 保留不动
评分口径（OKR 60 + 绩效 40）已在 v1 确认正确，本次不改口径，契约脚本无需动。

---

## 4. 实施顺序

1. **theme.css 增量 token**（第 1.2 节，只增不改）
2. **components.css 新增通用组件类**（第 1.3 节）
3. **改造 MainLayout 侧边栏**（最简单，建立视觉基调）
4. **改造 LoginView**（独立页面，验证 D 风格）
5. **改造 MyOkrView**（最复杂，建立表格化范式 + 抽屉）
6. **改造 ScoringEditView**（复用表格范式，三列对照）
7. **改造 MyResultView**（复用数据条范式）
8. **更新 verify 脚本**（第 3 节）
9. **`npm run build` + 复制到 backend/static**

---

## 5. 验收标准

### 信息架构
- [ ] 5 个样板页无 `page-hero` / `section-badge` / `grade-ring` / `score-hero` / `hint-card` / `conic-gradient`
- [ ] MyOkrView 用 `data-toolbar` + `data-table`，KR 进度更新走侧边抽屉
- [ ] ScoringEditView 用 `compare-grid-3` 三列对照 + `section-band` 区段 + 底部总览栏（含自评差异）
- [ ] MyResultView 用 `metric-bar` 构成条 + 历史趋势，无圆环
- [ ] MainLayout 侧边栏无 emoji，选中态 2px 边框
- [ ] LoginView 全屏分栏 + 下划线式输入框

### 视觉规范
- [ ] 无硬编码十六进制色值（除 SVG 内描边色）
- [ ] 无 emoji、无渐变发光胶囊、无营销口号
- [ ] 状态用色点（status-dot），不用 effect="dark" round tag
- [ ] 区段标题用色带（section-band），不用大卡片

### 数据契约（保持 v1）
- [ ] 评分口径 OKR 60 + 绩效 40 不变（`verify-scoring-contract.mjs` 通过）
- [ ] 自评/终评/结果展示统一口径

### 构建部署
- [ ] `verify-medtech-theme.mjs` 通过（含新增断言）
- [ ] `verify-scoring-contract.mjs` 通过
- [ ] `npm run build` 成功
- [ ] 产物已复制到 `backend/src/main/resources/static/`

---

## 6. 风险与回退

| 风险 | 影响 | 缓解 |
|---|---|---|
| 表格化后小屏（<1280px）挤压 | 评分页三列对照降级 | 预设响应式降级方案（第 2 节页面 2） |
| 历史趋势数据接口不存在 | MyResultView 趋势图空 | 隐藏趋势区 + 显示空态文案，不阻塞 |
| 侧边抽屉与现有 dialog 冲突 | MyOkrView 编辑流程 | 抽屉只承载进度更新，编辑 OKR 仍走现有 dialog |
| 其余 ~10 页视觉脱节 | 全站一致性 | 本次不处理，样板页验收后再评估套用 |

**回退**：所有改动在 5 个样板页 + theme.css + components.css + verify 脚本范围内，git revert 对应 commit 即可完整回退，不影响后端与业务逻辑。