Files
storyforge/docs/superpowers/specs/2026-03-28-homepage-workbench-redesign-design.md
2026-03-28 03:33:57 +08:00

9.3 KiB
Raw Blame History

StoryForge 首页工作台改版设计

  • 日期2026-03-28
  • 状态:已完成脑暴与结构确认,待进入实现计划
  • 范围:web/storyforge-web-v4

1. 背景

当前首页存在几个持续影响使用效率的问题:

  • 首屏同时铺开项目状态、重点账号、生产任务、依赖状态、说明性信息,阅读压力过高。
  • 信息密度主要靠文字解释堆出来,用户需要先“读懂页面”,才能开始做事。
  • 首页同时承担了工作台、汇报页、系统状态板三种角色,导致优先级混乱。
  • 管理员与普通用户共享首页主体是合理的,但系统级治理内容不应该继续挤占首页主体空间。

本次改版不重做视觉风格,不换皮,不重建整体导航语言。重点是沿用现有 Web V4 的工作台风格,对首页信息架构做减法和重排。

2. 目标与非目标

2.1 目标

  • 用户打开首页后,第一眼能判断“今天先做什么”。
  • 首页默认站在“当前项目”视角,而不是全工作区汇总视角。
  • 保留项目概览能力,但把它降到动作判断之后。
  • 让首页从“说明页”变回“工作台”。
  • 管理员的系统级治理入口保留,但通过独立管理员配置台承接,不污染首页主体。
  • 为后续主 Agent 驱动首页动作推荐提供稳定的页面骨架。

2.2 非目标

  • 本轮不重做全站视觉语言。
  • 本轮不重新设计左侧主导航。
  • 本轮不实现完整管理员配置台,只定义首页与管理员配置台的边界。
  • 本轮不实现主 Agent 新能力本身,只定义首页与主 Agent 的交互入口。

3. 设计原则

3.1 动作优先,说明后置

首页的第一职责不是解释系统做了什么,而是帮助用户决定下一步做什么。

3.2 当前项目优先于全局汇总

首页默认站在当前选中项目。全局工作区信息仅作为轻量上下文出现,不作为首页主体。

3.3 一次只让用户看一类信息

项目进度、重点账号、生产任务不再同时展开,而是通过 tab 切换,在同一内容区按需展示。

3.4 详细说明按需打开

首页仅保留做决定所需的最短说明。详细原因、执行计划、历史上下文收进详情页、弹层或主 Agent 窗口。

3.5 管理与业务分层

系统依赖健康、系统存储状态、系统级 Agent 管理、用户策略审计等系统治理信息,不再占首页主体,而由管理员配置台承接。

4. 最终推荐结构

本次确认采用“人类决策优先”的首页结构,也就是本地草图中的 v6 方向。

4.1 页面顺序

首页从上到下按以下顺序组织:

  1. 页面标题与主操作
  2. 轻量上下文条
  3. “今天先做什么”动作区
  4. “项目概览”tab 区
  5. 全局主 Agent 悬浮入口

4.2 页面标题与主操作

顶部保留现有的页面标题区域,继续使用现在的样式体系:

  • 标题:项目总台
  • 说明文字:保留极短说明,强调这是当前项目的工作决策入口
  • 右侧主操作:保留现有常用动作,例如 新建项目 / 导入主页 / 创建 Agent

该区域的职责是建立页面定位,不承担细节展示。

4.3 轻量上下文条

标题下方保留一条轻量上下文条,用于说明“我现在在哪”。

建议包含:

  • 当前工作区
  • 当前项目
  • 账号数量
  • 任务数量
  • Agent 数量

交互要求:

  • 当前项目 必须可点击,并支持项目切换。
  • 账号 / 任务 / Agent 以可点击胶囊入口呈现,分别跳到对应视图或筛选后的工作页。
  • 该区域不再承载大段文字,也不承载多余解释。

4.4 今天先做什么

这是首页第一优先级模块,也是本次改版的核心。

结构

  • 1 条主动作
  • 2 条次动作

主动作

主动作展示为一张更醒目的主卡片,但仍保持现有卡片风格。

只保留:

  • 动作标题
  • 一句最短原因
  • 2-3 个极短标签,例如 最优先 / 预计耗时 / 关联类型
  • 三个操作:查看原因 / 去处理 / 交给主 Agent

不再在首页内展开长说明。

次动作

次动作展示为两条压缩行。

每条只保留:

  • 编号
  • 动作标题
  • 一句超短说明
  • 两个操作按钮

目的不是完整说明任务,而是提供“快速扫读与进入”的入口。

推荐逻辑

  • 首页默认展示 3 条今日动作。
  • 优先由主 Agent 生成。
  • 如果主 Agent 不可用,则回退到规则系统。
  • 推荐动作默认与当前项目绑定。

与主 Agent 的关系

点击 交给主 Agent 时:

  • 自动打开右下角主 Agent 悬浮窗口
  • 先展示执行计划确认卡
  • 用户确认后才开始执行
  • 执行进度在主 Agent 窗口里持续更新

4.5 项目概览 tab 区

项目概览保留,但下沉为第二优先级模块。

顶部 tab

保留 3 个入口:

  • 项目进度
  • 重点账号 / 对标
  • 生产任务

交互原则:

  • 三者使用一致的卡片风格
  • 当前激活项有明显高亮
  • 只能在下方内容区展示当前 tab 的内容
  • 不允许把三类内容再次同时铺开

内容区

下方只承接当前 tab 的内容。

例如:

  • 选中“项目进度”时,只展示阶段信息、下一步和阶段风险
  • 选中“重点账号 / 对标”时,只展示重点对象和当前需要关注的变化
  • 选中“生产任务”时,只展示与生产执行有关的关键状态

要求:

  • 内容区不得再重复出现其他 tab 的明细
  • 不再保留首页底部额外的“当前项目推进详情 / 重点账号对标”独立大区块
  • 所有详细内容通过 tab 切换进入,而不是继续堆在首页下面

4.6 主 Agent 悬浮入口

首页右下角保留全局主 Agent 悬浮入口。

定义如下:

  • 对全站固定存在,不局限于首页
  • 在首页中承担“接住动作交接”的作用
  • 用户可最小化,让 Agent 后台继续运行
  • 再次打开时,能看到近期执行状态与工作进度

首页只负责给出入口,不负责承载完整对话信息。

5. 首页与管理员配置台边界

首页主体在管理员和普通用户之间保持一致。

管理员额外差异:

  • 左侧导航出现 管理员配置台

管理员配置台承接的内容:

  • 系统依赖健康
  • 系统存储状态
  • 系统级主 Agent 管理
  • 系统级平台 Agent 管理
  • 用户策略查看
  • 管理员覆盖查看、代改、回滚、审计

明确不放在管理员配置台首页中的内容:

  • 说明性流程配置

明确不继续挤在首页主体中的内容:

  • 系统依赖健康
  • 系统存储状态
  • 长跟踪摘要列表
  • 说明性流程卡片

6. Agent 与策略边界

本次首页改版需要遵守已确认的 Agent 逻辑:

  • 全系统只有一个系统级主 Agent
  • 每个平台有系统级平台 Agent
  • 用户只与主 Agent 对话
  • 用户对平台策略的修改由主 Agent 理解并下发
  • 用户策略按用户隔离,不能影响其他用户
  • 用户策略支持长期与阶段性生效,默认长期
  • 管理员可以代改和回滚用户策略,但形成管理员覆盖层,不吞掉用户控制权
  • 用户侧需要明确看到管理员覆盖存在、原因和时间

这些规则不会在首页一次性完整展示,但会影响首页动作推荐与主 Agent 交接方式。

7. 状态与异常处理

7.1 无当前项目

若当前没有选中项目:

  • 首页标题和上下文条仍保留
  • “今天先做什么”区域切成建项目/选项目导向
  • 概览区不展示业务数据,只展示项目切换或创建入口

7.2 主 Agent 不可用

若主 Agent 暂时不可用:

  • 今日动作仍显示 3 条
  • 标注为“规则推荐”
  • 交给主 Agent 按钮禁用或转为提示

7.3 当前 tab 无内容

若某个 tab 当前为空:

  • 内容区展示极简空态
  • 提供进入对应模块的行动入口
  • 不用长段解释

8. 数据与实现影响

本次改版优先重组现有信息,不要求后端新增完整新接口。

前端可优先基于当前已有能力组织数据:

  • /v2/me/dashboard
  • 当前项目数据
  • 当前项目相关账号/对标数据
  • 当前项目相关任务摘要
  • 主 Agent 推荐结果或规则回退结果

如现有 dashboard 数据不足,可在实现阶段补最小必要字段,但应避免为首页堆出新的大而全接口。

9. 实现边界建议

为了降低风险,建议按以下顺序实现:

  1. 先重排首页骨架顺序
  2. 再把“今天先做什么”改成 1 主 2 次
  3. 再把项目概览改成单内容区 tab
  4. 最后移除首页中冗余的重复区块

这次实现不应同时重做其他页面。

10. 验收标准

改版完成后,应满足以下标准:

  • 用户打开首页后,首屏不会再看到大段堆叠说明
  • 首页第一屏可在 3 秒内读完主要信息
  • 用户能在第一屏明确看到“当前项目”和“今天先做什么”
  • 今日动作区是 1 主 2 次 结构
  • 项目概览采用 tab 切换,下方只显示当前分类内容
  • 首页不再保留重复的项目推进详情与重点账号详情大区块
  • 管理员配置台通过左侧导航独立进入,而不是继续塞在首页主体

11. 后续计划入口

当本 spec 通过后,下一步进入实现计划,重点拆为:

  • 首页结构重排
  • 动作区轻量化
  • 概览 tab 单内容区切换
  • 管理员配置台入口显式化
  • 主 Agent 悬浮入口与动作交接衔接