# OKR 绩效系统前端医疗科技化重构设计

日期：2026-06-13

## 背景

医梦AI OKR 绩效系统准备在公司内部上线。现有前端功能完整，覆盖登录、考核周期、OKR 对齐、团队 OKR、绩效自评、上级评分、绩效沟通、组织架构、模板配置和操作日志。主要问题不是业务缺失，而是视觉语言偏通用 AI 后台：高频使用紫青配色、圆角卡片、轻阴影、emoji 和分散的 scoped 样式，削弱了医疗科技公司内部系统应有的专业性、可靠性和审计感。

本次重构采用“方案 B：设计系统 + 重点页面重构”。先建立统一视觉系统，再重构最影响观感和工作效率的核心页面。业务逻辑、接口契约、权限模型和后端不纳入本阶段改动。

## 设计定位

目标风格：现代医疗科技型内部工作台。

关键词：

- 专业：避免营销页、赛博风、过度装饰和泛 AI 视觉。
- 可靠：用清晰状态、稳定布局、审计信息和低噪声交互建立信任。
- 精密：像医疗数据工作台，而不是普通 SaaS 卡片墙。
- 高效：提高 OKR、评分、周期流转等高频页面的信息密度。

公司主题色保留：

- 品牌深色：`#2b1f99`
- 科技青色：`#3ad4d8`

使用约束：

- `#2b1f99` 用作品牌锚点、主按钮、当前导航、关键标题和少量高权重标记。
- `#3ad4d8` 用作活跃状态、进度、焦点态和医疗科技感强调。
- 内容区避免大面积紫色或青色背景。
- 禁止使用大面积蓝紫渐变、漂浮光斑、营销式 hero 或纯装饰插画。

## 现状判断

已确认的主要问题：

1. 样式分散。至少 17 个 Vue 文件包含 scoped style，重复定义页面标题、卡片、表格、空状态、阴影和圆角。
2. 色彩硬编码严重。品牌色、状态色、背景色和弱文本色散落在页面组件中。
3. 页面结构同质化。多个页面采用 `page-hero + 白色圆角卡片 + 轻阴影`，缺少业务特征。
4. 内部系统质感不足。OKR 和评分页面大量使用 emoji、亮色 badge、圆角按钮，降低正式感。
5. 关键信息层级不足。评分页、周期页和 OKR 页还没有形成“流程、状态、证据、决策”的稳定结构。

## 改造目标

可量化验收指标：

| 指标 | 目标 |
| --- | --- |
| 颜色硬编码 | 核心页面硬编码颜色减少 70% 以上 |
| 重复样式 | 页面标题、面板、空状态、状态条等重复 CSS 减少 60% 以上 |
| 圆角体系 | 统一为 4px、6px、8px，避免大面积 12px+ 圆角 |
| 阴影使用 | 大面积阴影减少 60% 以上，主要使用边框、分隔线和浅底色 |
| emoji | 业务页面 emoji 全部替换为 Element Plus 图标或正式文本 |
| 响应式 | 1366px、1440px、1920px、移动宽度下无明显重叠和断行问题 |
| 构建 | `npm run build` 通过 |
| 业务行为 | 不改变现有 API、路由和主要交互流程 |

## 视觉系统

### 色彩 token

建议新增统一样式入口，例如 `frontend/src/styles/theme.css`，并在 `main.js` 或 `App.vue` 引入。

核心 token：

```css
:root {
  --color-brand: #2b1f99;
  --color-brand-strong: #1d166b;
  --color-brand-soft: #eceaf8;
  --color-accent: #3ad4d8;
  --color-accent-strong: #17a9ad;
  --color-accent-soft: #e5fbfc;

  --color-bg: #f5f8fa;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8fafc;
  --color-border: #dfe7ee;
  --color-border-soft: #edf2f6;

  --color-text: #18212f;
  --color-text-secondary: #5f6b7a;
  --color-text-muted: #8a97a8;

  --color-success: #2e9d65;
  --color-warning: #c98219;
  --color-danger: #c94a4a;
  --color-info: #4c6f91;
}
```

状态语义：

- 进行中 / 当前：accent 青色。
- 完成 / 通过：success 绿色。
- 待处理 / 考评中：warning 琥珀色。
- 驳回 / 风险：danger 红色。
- 草稿 / 归档：info 或中性灰蓝。

### 布局 token

```css
:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;

  --shadow-panel: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-popover: 0 12px 28px rgba(15, 23, 42, 0.12);

  --space-page-x: 24px;
  --space-page-y: 20px;
  --layout-sidebar: 220px;
  --layout-topbar: 52px;
}
```

原则：

- 面板用 `1px` 边框和轻微阴影，不做漂浮卡片堆叠。
- 内容页背景统一浅冷灰。
- 高密度工作页减少大标题占用，优先展示周期、人员、状态和待办。

### 字体和排版

保持系统中文字体栈，避免引入不可控外部字体。

建议字号：

- 页面标题：22px 或 24px，不再使用 28px 大标题作为默认。
- 分区标题：15px 或 16px。
- 表格和业务文本：13px 或 14px。
- 辅助信息：12px。
- 数字结果：根据场景 24px、32px、40px，但仅用于绩效总分等关键数据。

### Element Plus 覆盖

新增统一覆盖层，减少页面内重复样式：

- 按钮默认不使用 `round`，统一 6px 圆角。
- `el-card` 尽量减少使用；优先自定义业务面板类。
- `el-tag` 降低饱和度，避免大量 dark tag。
- 表格统一表头背景、行高、hover 和边框。
- Dialog 的标题、footer、表单间距统一。

## 通用组件和样式模式

建议优先抽象为样式类，不急于过度组件化。稳定后再提取 Vue 组件。

第一阶段需要的通用模式：

1. `PageHeader` / `.app-page-header`
   - 页面标题、描述、主要操作、当前周期/状态摘要。

2. `.med-panel`
   - 白色业务面板，统一边框、圆角、内边距、标题。

3. `.status-strip`
   - 周期状态、OKR 状态、自评状态的横向提示条。

4. `.metric-row` / `.metric-card`
   - 分数、完成率、周期数量、待办数量等指标。

5. `.evidence-panel`
   - 评分页左侧证据区：OKR 记录、自评、更新日志。

6. `.decision-panel`
   - 评分页右侧决策区：打分、公式、结果预览、提交。

7. `.empty-state`
   - 空数据提示统一样式。

8. `.audit-note`
   - 归档、不可修改、审核、时间戳等审计信息。

## 页面改造方案

### 1. 主布局 `MainLayout.vue`

目标：建立系统第一印象。

改造点：

- 侧边栏继续使用深品牌色，但降低亮度和饱和噪声。
- logo 区从居中展示改为更像企业系统的品牌栏。
- 菜单 active 状态使用左侧细线 + 浅青文本，不使用过亮背景。
- 顶部栏高度从 48px 调整到 52px，强化边界和用户信息。
- 通知面板改为更清晰的消息列表，未读状态使用青色细点或左边线。
- 用户角色 tag 降低饱和度，避免彩虹角色色影响专业感。

### 2. 登录页 `LoginView.vue`

目标：从“AI 暗色科技登录页”改为“医疗科技公司内部系统入口”。

改造点：

- 背景改为浅冷灰或低亮度品牌底，不使用 radial 科技光晕。
- 登录卡片改为企业内控入口面板，显示系统名、组织名、账号登录。
- 保留 logo，但减少大尺寸品牌展示。
- 注册入口弱化。如内部系统不希望开放注册，后续可单独讨论是否隐藏。
- 输入框和按钮使用统一 Element Plus 覆盖。

### 3. 考核周期 `PeriodListView.vue`

目标：从卡片列表升级为周期生命周期工作台。

改造点：

- 顶部显示周期总览：进行中、待发布、考评中、已归档数量。
- 周期列表按状态分组，但减少彩色 badge，使用状态点和左边线。
- 管理员操作区明确主次：发布、锁定、进入考评、归档、删除。
- 状态说明变成紧凑的流程提示，而不是每张卡片重复大段说明。
- 批量创建预览统一为表格化列表。

### 4. 我的 OKR `MyOkrView.vue`

目标：强化对齐关系和阶段任务。

改造点：

- 去掉 emoji，规则区改为“OKR 编写标准”信息面板。
- 上级 OKR、我的 OKR、待审核 OKR 使用一致的目标/关键结果结构。
- `O` 和 `KR` 标记改为克制的胶囊或短标签。
- 对齐上级 KR 的选择区改成医疗系统式清单，显示承接来源、负责人、目标值。
- 阻塞状态和驳回状态使用明确风险样式，但不大面积红底。

### 5. 绩效考评 `ScoringEditView.vue`

目标：做成评审工作台，这是第一阶段最重要页面。

布局：

- 左侧：证据区，占 52% 左右。
- 右侧：评分决策区，占 420-480px，可在宽屏固定或保持独立滚动。
- 低于断点后上下堆叠，保持原响应式能力。

左侧证据区：

- OKR 完整记录。
- KR 完成率、目标值、当前值、权重。
- 进度日志。
- 员工自评和说明。

右侧决策区：

- OKR 逐 KR 打分。
- 工作成果维度评分。
- 加减分说明。
- 公式、总分、评级。
- 提交按钮。

改造点：

- 总分结果使用稳定的数据面板，不使用紫色大块背景。
- 自评引用以“参考值”形式呈现，避免干扰主评分。
- 加减分必须保留说明输入，视觉上强调审计留痕。

### 6. 我的绩效 / 历史绩效

目标：结果页体现确认、沟通闭环和归档可信度。

改造点：

- 结果总览包括总分、评级、状态、周期。
- OKR 与工作成果分开展示贡献。
- 自评与上级评分对比改为结构化对照。
- 确认按钮和反馈沟通状态明确。
- 历史记录强调归档和不可修改。

### 7. 组织、模板、日志等管理页

第一阶段只做全局样式适配：

- 继承统一页面标题、表格、按钮和面板。
- 不重构业务布局。
- 操作日志保留高密度表格感，避免卡片化。

## 实施顺序

1. 新增全局样式基础
   - `frontend/src/styles/theme.css`
   - `frontend/src/styles/components.css`
   - `frontend/src/styles/element-plus.css`
   - 在入口引入。

2. 改造主布局和登录页
   - 先建立整体气质。
   - 验证导航、通知、登录流程不受影响。

3. 改造周期页和 PeriodBanner
   - 统一周期状态表达。
   - 提供后续 OKR、评分页复用样式。

4. 改造我的 OKR 页面
   - 替换 emoji。
   - 统一 OKR/KR 信息结构。

5. 改造绩效考评页
   - 重构左右工作台视觉结构。
   - 保持计算逻辑不变。

6. 改造我的绩效和历史绩效
   - 统一结果呈现和归档语义。

7. 管理页统一适配
   - 表格、空状态、按钮、面板。

8. 视觉 QA 和构建验证
   - `npm run build`
   - 桌面宽度 1366、1440、1920 检查。
   - 移动或窄屏检查评分页、OKR 页不重叠。

## 非目标

本阶段不做：

- 不改后端接口。
- 不改数据库结构。
- 不改变评分公式。
- 不改变 OKR 周期状态机。
- 不引入大型 UI 框架替换 Element Plus。
- 不做营销首页。
- 不做复杂动画、3D、插画系统。
- 不处理开放注册策略，除非后续明确要求。

## 风险和应对

风险 1：全局覆盖 Element Plus 影响已有页面。

应对：覆盖规则使用 `.app-shell` 或明确类名约束，避免无边界覆盖。

风险 2：页面 scoped 样式仍然覆盖新样式。

应对：先保留页面结构，逐页移除重复样式；每次只改一个页面组。

风险 3：评分页改动影响计算信任。

应对：评分逻辑不动，只改展示结构；改造后用同一输入检查总分、评级、提交 payload 不变。

风险 4：主题色使用过度，仍显 AI 感。

应对：品牌深色只做锚点，科技青只做活跃和焦点；内容区以中性色和细边框为主。

## 验收清单

- 登录页符合内部医疗科技系统入口气质。
- 主布局在折叠和展开状态下稳定。
- 周期页能一眼看出当前阶段、下一步动作和管理员操作。
- 我的 OKR 页面能清楚表达上级承接、本人目标、待审核事项。
- 绩效考评页左侧证据、右侧决策分区明确。
- 结果页能清楚表达分数组成、确认状态、反馈状态。
- 所有核心页面无 emoji。
- 核心页面无明显大面积渐变、漂浮光斑、营销式装饰。
- `npm run build` 通过。
- 未修改后端业务代码和接口契约。