工作台首页「行动焦点」重设计规格
背景
当前工作台首页把待办、团队指标、风险和团队概览拆成多组等权重大卡片,首屏元素拥挤、信息重复,无法快速回答“我现在应该做什么”。部分辅助文字对比度偏低,也偏离已确认的 Cohere 白色画布、深靛蓝产品带和克制留白风格。
目标
- 首页第一优先级是用户的下一项待办。
- 减少卡片墙和重复指标,以留白、字号、分隔线建立层级。
- 延续深靛蓝
#2b1f99、青色 #3ad4d8、纯白表面与 1px 中性边框。
- 提高辅助文字对比度,正文和关键标签不得使用难辨认的浅灰。
- 保留现有工作台数据、权限和跳转行为,不修改后端接口。
已确认方案
采用 A「行动焦点」。页面从上到下分为四层:
- 周期标题:显示当前周期名称与阶段,底部使用单条中性分隔线。
- 主行动区:左侧深靛蓝主行动面板展示第一项待办、待办说明和直达按钮;右侧白色上下文面板展示近期节点、风险状态和团队提交。
- 团队脉搏:仅 Leader 有团队摘要时显示。四项指标压缩为单行、上下边框分隔的平面信息带,不再使用独立统计卡。
- 风险提示:无风险时显示一条低噪声绿色状态文字;有风险时展示真实风险条目,保留现有人员信息,不生成虚构洞察。
状态与行为
- 有待办时,主行动区展示
workspace.todos[0],按钮跳转到该待办的 targetUrl。
- 多个待办只在主面板显示总数;当前范围不新增轮播、展开列表或待办排序规则。
- 无待办时,主行动区切换为“当前暂无待办”,不展示伪操作按钮。
- 有
teamSummary 时显示团队上下文和团队脉搏;普通员工没有团队摘要时,主行动区扩展占据可用宽度。
- 风险和截止节点继续使用
workspace.risks 与 workspace.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 视口下布局无拥挤、遮挡或横向滚动。
- 前端测试和生产构建通过。