docs: 前端去 AI 味改造 v2 设计规格（信息架构重构）

诊断 v1 的根因：AI 味不在代码规范层（已清理干净），而在信息架构层
（hero/胶囊/引导卡/卡片堆叠）。v2 在干净 token 基础上重构 5 个样板页
的信息架构，达成 D 风格（AI 科研外壳 + 临床数据内核）。

关键决策（来自头脑风暴）：
- 力度 B：重排信息架构，视觉 token 只增不改
- MyOkrView: 卡片堆叠 → 工具栏 + 表格化 O/KR + 侧边抽屉更新进度
- ScoringEditView: 两栏分散 → 三列对照（证据·自评·终评）+ 自评差异提示
- MyResultView: 删等级圆环 → 数据条构成 + 历史趋势
- MainLayout: 去 emoji + 细化选中态 + 加深背景
- LoginView: 全屏分栏 + 下划线式输入框

含 verify 脚本断言更新、4 步实施顺序、验收标准、风险回退。

docs/superpowers/specs/2026-06-20-medtech-ui-revamp-v2-design.md

@@ -0,0 +1,422 @@
+# 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 即可完整回退，不影响后端与业务逻辑。