优化 AGC 标题栏布局 #613

New Issue

2026-10-04T13:49:34+08:00

suzmii commented

2026-10-04 13:49:34 +08:00

现象

AGC 工作台顶栏在常见窗口宽度下排版崩坏（用户现场截图给出四处）：

#	现象
1	顶栏换行：一行放不下时溢出被摊到两个容器上，第二行只剩「播放」与「智能体修订 · 2026/10/3 14:21:05」，两行控件分裂
2	版本入口不贴右缘：被前面按钮的文本宽度顶到中间，同一行在不同时刻位置不一致
3	「播放」与「运行」重复：两个入口说的是同一件事（切运行视图 + 载入游戏资源）
4	运行画面没有刷新入口：游戏预览不是 vite dev 的实时刷新，改完代码只能切到资源管理再切回来才能重载页面（飞书讨论里 @董羽秦提的「单独的刷新（可以浮动在运行 tab 里）」）

原因

apps/ai-game-creator-shell/src/styles.css：.game-workbench-view-tabs 与 .game-workbench-view-actions 都是 flex-wrap: wrap，工具条自身 justify-content: space-between——宽度不够时两个子元素各自换行。
动作区按内容排布，版本入口不是「最后一个贴右」的锚点，而版本名本身很长（创建原因 · 时间）。
「播放」按钮的 onClick 就是 showRunView() + onPlay()，「运行」页签只有 showRunView()。
运行画面只有「全屏预览」一枚浮层控件；运行页在另一个 loopback 端口上，跨域 iframe 不能 contentWindow.location.reload()。

打算怎么改

顶栏一行到底 + 三档降级：flex-wrap: nowrap + overflow: hidden；新增纯判据 workbenchToolbarModel.ts（档位顺序 full → compact-version → collapsed-actions）与 useWorkbenchToolbarLayout（ResizeObserver 管可用宽度、MutationObserver 管内容变化；每次量宽把候选档位真的写到 DOM 再读 scrollWidth），档位落在工具条 data-layout 上，样式只声明每一档藏什么。
版本入口钉最右 + 分级显示：margin-left: auto 钉在动作区最右；显示 版本 N（原因 · 时间），N 复用资源画布版本卡片的编号口径；空间不足先只留 版本 N（括号那一层整体收起）。入口默认不参与收缩，避免省略号把溢出「吃掉」使档位判定失灵。
「打开项目目录 / 资源面板 / 整理画布」收进「更多」下拉（第二档）：菜单里是同一批动作，禁用口径与行内按钮一致。
「播放」并入「运行」页签：页签前加 ▶ 图标，点页签＝切视图 + 载入游戏资源；不可运行时页签不置灰、点了既不切视图也不发播放请求，只出既有提示。
运行画面新增「刷新运行画面」：浮在画面右下角（全屏那一枚左侧），点击＝确认预览还活着 + 重新载入页面。

验收判据

1280 / 1240 / 1100 窗口下顶栏始终一行，版本入口贴最右缘；
空间不足先只留 版本 N，再不足把三枚动作收进「更多」；「更多」里点「资源面板」真的开面板；
点「运行」页签＝原「播放」的行为（再点一次＝重跑）；不可运行时不切视图、不发播放请求；
「刷新运行画面」点一下把页面重新载入（iframe 换新节点、src 不变）；
定向用例 + 全量 AGC 用例 + typecheck / eslint / encoding / doc-index 全绿。

范围

只改 AGC 前端（顶栏排版、运行页签语义、运行画面浮层控件）+ 定向用例 + PRD / 验收 / 决策记录文档；不改后端、OpenAPI 契约与 SpacetimeDB。

## 现象 AGC 工作台顶栏在常见窗口宽度下排版崩坏（用户现场截图给出四处）： | # | 现象 | |---|---| | 1 | **顶栏换行**：一行放不下时溢出被摊到两个容器上，第二行只剩「播放」与「智能体修订 · 2026/10/3 14:21:05」，两行控件分裂 | | 2 | **版本入口不贴右缘**：被前面按钮的文本宽度顶到中间，同一行在不同时刻位置不一致 | | 3 | **「播放」与「运行」重复**：两个入口说的是同一件事（切运行视图 + 载入游戏资源） | | 4 | **运行画面没有刷新入口**：游戏预览不是 vite dev 的实时刷新，改完代码只能切到资源管理再切回来才能重载页面（飞书讨论里 @董羽秦提的「单独的刷新（可以浮动在运行 tab 里）」） | ## 原因 1. `apps/ai-game-creator-shell/src/styles.css`：`.game-workbench-view-tabs` 与 `.game-workbench-view-actions` 都是 `flex-wrap: wrap`，工具条自身 `justify-content: space-between`——宽度不够时两个子元素各自换行。 2. 动作区按内容排布，版本入口不是「最后一个贴右」的锚点，而版本名本身很长（`创建原因 · 时间`）。 3. 「播放」按钮的 `onClick` 就是 `showRunView() + onPlay()`，「运行」页签只有 `showRunView()`。 4. 运行画面只有「全屏预览」一枚浮层控件；运行页在另一个 loopback 端口上，跨域 iframe 不能 `contentWindow.location.reload()`。 ## 打算怎么改 1. **顶栏一行到底 + 三档降级**：`flex-wrap: nowrap` + `overflow: hidden`；新增纯判据 `workbenchToolbarModel.ts`（档位顺序 `full → compact-version → collapsed-actions`）与 `useWorkbenchToolbarLayout`（`ResizeObserver` 管可用宽度、`MutationObserver` 管内容变化；每次量宽把候选档位真的写到 DOM 再读 `scrollWidth`），档位落在工具条 `data-layout` 上，样式只声明每一档藏什么。 2. **版本入口钉最右 + 分级显示**：`margin-left: auto` 钉在动作区最右；显示 `版本 N（原因 · 时间）`，`N` 复用资源画布版本卡片的编号口径；空间不足先只留 `版本 N`（括号那一层整体收起）。入口默认不参与收缩，避免省略号把溢出「吃掉」使档位判定失灵。 3. **「打开项目目录 / 资源面板 / 整理画布」收进「更多」下拉**（第二档）：菜单里是同一批动作，禁用口径与行内按钮一致。 4. **「播放」并入「运行」页签**：页签前加 ▶ 图标，点页签＝切视图 + 载入游戏资源；不可运行时页签不置灰、点了既不切视图也不发播放请求，只出既有提示。 5. **运行画面新增「刷新运行画面」**：浮在画面右下角（全屏那一枚左侧），点击＝确认预览还活着 + 重新载入页面。 ## 验收判据 - 1280 / 1240 / 1100 窗口下顶栏始终一行，版本入口贴最右缘； - 空间不足先只留 `版本 N`，再不足把三枚动作收进「更多」；「更多」里点「资源面板」真的开面板； - 点「运行」页签＝原「播放」的行为（再点一次＝重跑）；不可运行时不切视图、不发播放请求； - 「刷新运行画面」点一下把页面重新载入（`iframe` 换新节点、`src` 不变）； - 定向用例 + 全量 AGC 用例 + typecheck / eslint / encoding / doc-index 全绿。 ## 范围只改 AGC 前端（顶栏排版、运行页签语义、运行画面浮层控件）+ 定向用例 + PRD / 验收 / 决策记录文档；不改后端、OpenAPI 契约与 SpacetimeDB。

suzmii added the

Priority

Medium

3

Kind/Enhancement labels 2026-10-04 13:49:34 +08:00

suzmii self-assigned this 2026-10-04 13:49:34 +08:00

suzmii referenced a pull request that will close this issue

2026-10-04 14:23:13 +08:00

优化 AGC 工作台顶栏布局：一行到底、版本入口钉右分级、播放并入运行页签（Issue #613） #615

suzmii closed this issue

2026-10-04 20:04:32 +08:00

Sign in to join this conversation.