|
|
@@ -0,0 +1,356 @@
|
|
|
+# 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` 通过。
|
|
|
+- 未修改后端业务代码和接口契约。
|
wangkangyjy