okr-performance/docs/superpowers/specs/2026-06-13-frontend-medtech-redesign.md

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：

: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

: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 通过。
• 未修改后端业务代码和接口契约。