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