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（只增不改）

: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）

.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` 新增断言

// 新增工具栏/表格/对照类检查
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. 实施顺序

theme.css 增量 token（第 1.2 节，只增不改）
components.css 新增通用组件类（第 1.3 节）
改造 MainLayout 侧边栏（最简单，建立视觉基调）
改造 LoginView（独立页面，验证 D 风格）
改造 MyOkrView（最复杂，建立表格化范式 + 抽屉）
改造 ScoringEditView（复用表格范式，三列对照）
改造 MyResultView（复用数据条范式）
更新 verify 脚本（第 3 节）
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 即可完整回退，不影响后端与业务逻辑。

2026-06-20-medtech-ui-revamp-v2-design.md 18 KB Permalink History Raw

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

0. 背景与任务范围

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

1.1 信息架构原则

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

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

2. 五个样板页改造蓝图

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

结构变更

data-toolbar 顶栏（替代 hero）

data-table 表格列定义

四个状态分支的处理

删除清单

上级 OKR 对齐区（OKR_ALIGN 且无 myOkr 时）

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

结构变更

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

区段色带标题（section-band）

OKR 进度日志

底部固定总览栏

自评 vs 终评差异提示（新功能）

响应式降级

删除清单

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

结构变更（结果态）

result-grid 主结果区（两栏）

自评 vs 终评对照行

历史趋势条形图（底部）

操作栏

删除清单

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

侧边栏改动

顶栏改动

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

结构变更

左侧深色品牌区

右侧表单区（纯白科研感）

下划线式输入框实现（自定义 .underline-input）

3. verify 脚本更新

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

3.2 verify-scoring-contract.mjs 保留不动

4. 实施顺序

5. 验收标准

信息架构

视觉规范

数据契约（保持 v1）

构建部署

6. 风险与回退

2026-06-20-medtech-ui-revamp-v2-design.md 18 KB

Permalink History Raw

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

3.2 `verify-scoring-contract.mjs` 保留不动