2026-07-16-workspace-action-focus-redesign.md 3.5 KB

工作台首页「行动焦点」重设计规格

背景

当前工作台首页把待办、团队指标、风险和团队概览拆成多组等权重大卡片,首屏元素拥挤、信息重复,无法快速回答“我现在应该做什么”。部分辅助文字对比度偏低,也偏离已确认的 Cohere 白色画布、深靛蓝产品带和克制留白风格。

目标

  • 首页第一优先级是用户的下一项待办。
  • 减少卡片墙和重复指标,以留白、字号、分隔线建立层级。
  • 延续深靛蓝 #2b1f99、青色 #3ad4d8、纯白表面与 1px 中性边框。
  • 提高辅助文字对比度,正文和关键标签不得使用难辨认的浅灰。
  • 保留现有工作台数据、权限和跳转行为,不修改后端接口。

已确认方案

采用 A「行动焦点」。页面从上到下分为四层:

  1. 周期标题:显示当前周期名称与阶段,底部使用单条中性分隔线。
  2. 主行动区:左侧深靛蓝主行动面板展示第一项待办、待办说明和直达按钮;右侧白色上下文面板展示近期节点、风险状态和团队提交。
  3. 团队脉搏:仅 Leader 有团队摘要时显示。四项指标压缩为单行、上下边框分隔的平面信息带,不再使用独立统计卡。
  4. 风险提示:无风险时显示一条低噪声绿色状态文字;有风险时展示真实风险条目,保留现有人员信息,不生成虚构洞察。

状态与行为

  • 有待办时,主行动区展示 workspace.todos[0],按钮跳转到该待办的 targetUrl
  • 多个待办只在主面板显示总数;当前范围不新增轮播、展开列表或待办排序规则。
  • 无待办时,主行动区切换为“当前暂无待办”,不展示伪操作按钮。
  • teamSummary 时显示团队上下文和团队脉搏;普通员工没有团队摘要时,主行动区扩展占据可用宽度。
  • 风险和截止节点继续使用 workspace.risksworkspace.deadlines;不改变业务口径。
  • 团队成员指标继续链接到团队 OKR,并携带当前 periodId

视觉规范

  • 页面最大内容宽度维持约 1120px,桌面端使用更充足的纵向间距。
  • 主行动区是唯一深色大面积表面;不再为每个数字增加彩色顶边。
  • 标题和正文使用 --color-text,辅助信息最低使用 --color-text-secondary--color-text-muted 仅用于非关键元信息。
  • 主操作使用青色药丸按钮;无渐变、玻璃模糊或浮动阴影。
  • 团队指标使用等宽数字、细分隔线和平面白底,不重复外层圆角卡。

响应式

  • > 820px:主行动区与上下文面板左右排列,团队脉搏为四列。
  • <= 820px:主行动区与上下文面板纵向排列,团队脉搏为两列。
  • <= 640px:进一步收紧页边距和字号,按钮保持可点击高度;不得产生横向滚动。

修改范围

  • 修改 frontend/src/views/workspace/WorkspaceView.vue 的结构与局部样式。
  • 更新工作台视觉契约测试,锁定主行动层级、平面团队脉搏和高对比度文案。
  • 不修改 Pinia store、API、路由、后端或数据库。

验收标准

  • 首屏第一视觉焦点是“下一项待办”,而非三张统计卡。
  • 同一团队数据不在顶部和底部重复展示为两组大卡。
  • 无待办、无团队摘要、有风险和无风险四类状态均可读且不空洞。
  • 1440px、1024px 和 768px 视口下布局无拥挤、遮挡或横向滚动。
  • 前端测试和生产构建通过。