顶栏两端留给两枚大分组:排序分段收行尾,版本入口移到它左边
Project CI / Backend tests (pull_request) Failing after 18s
Project CI / AI game creator shell Rust crates (pull_request) Successful in 3m14s
Project CI / AI game creator shell Rust lane 2/2 (pull_request) Successful in 5m11s
Project CI / Repository checks (pull_request) Failing after 25s
Project CI / AI game creator shell Rust lane 1/2 (pull_request) Successful in 6m4s
Project CI / Frontend tests (pull_request) Successful in 2m37s
Project CI / AI game creator shell web tests (pull_request) Successful in 2m9s
Project CI / Native shell tests (pull_request) Successful in 5m32s

- index.tsx:把「依赖 / 类型」分段从动作区中部挪到动作行最后一个子元素,版本入口紧邻其左(版本不再是最右那一枚)
- styles.css:排序分段左边距的注释改成与左邻无关(现在左邻是版本入口)
- 用例:资源版本切换新增顶栏顺序断言(版本入口在排序分段之前、排序分段是动作行行尾);生成任务侧栏用例改判排序分段为动作行最后一个子元素
- 文档:PRD 两端分组条款、验收用例 S16 入口位置、决策记录、改动后对照图与 README 重拍
This commit is contained in:
2026-10-04 17:14:26 +08:00
parent 9eb537c6ff
commit 206c625a58
12 changed files with 75 additions and 44 deletions
@@ -131,7 +131,7 @@
- 资源总览的“资源依赖 / 资源类型”视图切换使用连通的分段按钮组,相邻选项共享边界并保持唯一选中语义。每个分段都必须有清晰的键盘焦点指示,焦点环不得被分段容器的圆角或 `overflow` 裁切。
- 右侧 Supervisor 对话中,用户消息使用右对齐、最大宽度受限的主题暖色气泡,assistant 消息保持左对齐;消息换行不得产生水平溢出,执行过程卡继续占满消息区可用宽度。消息列表必须约束在右侧对话列内并独立滚动,不得覆盖中央资源或运行视图;提交按钮必须保留随状态变化的可访问名称。气泡正文在 light / dark 平台主题下均须满足 WCAG AA 普通文本 `4.5:1` 对比度。
- 客户端正式产品仍只按最小 `1280×720` 横屏合同交付,并保留 `1280×800` 默认窗口与既有基线验收;更窄浏览器样式只负责不崩溃和开发兼容,不改成移动端创作工作台。
- 工作台顶部工具条固定**一行到底**:左侧只有「资源管理 / 运行」模式切换,**「运行」页签本身就是播放入口**(页签前带 ▶ 图标;切过去即启动本地预览,不再单开一枚「播放」按钮,也不再弹出 `game.run_local` 二次确认;运行视图空态与预览失败态靠再点一次该页签重跑,不可运行时页签不置灰、点了不切视图并出提示)。**站在运行视图上却没有画面时自动补发一次载入**(典型场景:从别的项目切过来,工作台不重挂,运行视图原样留下而画面已经没了),同一个项目只自动补一次,画面已在就不重复启动。右侧动作区贴右,**版本入口钉在最右缘**、固定显示 `版本 N`,空间够时补上括号里的「创建原因 + 时间」,空间不足按固定顺序降级:先只留 `版本 N`,再把「打开项目目录 / 资源面板 / 整理画布」收进「更多」下拉——任何宽度都不把控件甩到第二行。运行画面右下角提供「刷新运行画面」:游戏预览不是实时刷新,改完代码需要重载页面。
- 工作台顶部工具条固定**一行到底**,**两枚体量最大的分组控件分居这一行两端**:左端「资源管理 / 运行」模式分段,右端「依赖 / 类型」排序分段;中间依次是动作按钮与版本入口,**版本入口紧邻排序分段左侧**(不放在最右)、固定显示 `版本 N`,空间够时补上括号里的「创建原因 + 时间」。「运行」页签本身就是播放入口(页签前带 ▶ 图标;切过去即启动本地预览,不再单开一枚「播放」按钮,也不再弹出 `game.run_local` 二次确认;运行视图空态与预览失败态靠再点一次该页签重跑,不可运行时页签不置灰、点了不切视图并出提示)。**站在运行视图上却没有画面时自动补发一次载入**(典型场景:从别的项目切过来,工作台不重挂,运行视图原样留下而画面已经没了),同一个项目只自动补一次,画面已在就不重复启动。空间不足按固定顺序降级:先只留 `版本 N`,再把「打开项目目录 / 资源面板 / 整理画布」收进「更多」下拉——任何宽度都不把控件甩到第二行,右端始终由「依赖 / 类型」收住。运行画面右下角提供「刷新运行画面」:游戏预览不是实时刷新,改完代码需要重载页面。
- 创建模式素材画布的“素材名称”是用户可编辑的正式输出名称;“资源用途”是 manifest subtype,不向普通用户开放自由文本。新增资源默认“普通游戏美术”,可从普通游戏美术、统一视觉规范、游戏界面原型、核心美术图集四项中选择。图片精修继承源名称和用途,不显示创建模式保存设置;候选图片只从选中图片的“设为最终图”提交。精修顶栏只保留返回、导入、定位当前最终图、撤销和重做,删除进入图片上下文工具栏,通用 AI 生成只保留给创建模式。图片输出统一使用 PNG;创建模式工具动作与保存设置分层展示,“保存到项目”在 `1280×800` 和窄容器中都必须完整可见。
- 首页创作输入区与“最近项目”之间不展示共享项目状态文本,“最近项目”标题下也不追加解释性副标题;默认、成功、进行中或失败状态均不得在该位置形成文字行,项目管理页继续保留自己的状态反馈。
@@ -24,12 +24,12 @@
- 背景:用户现场截图指出四个问题(改动前的形态与口径见 `docs/technical/assets/agc-toolbar-layout-after-20261004/README.md`):① 顶栏放不下时两侧容器各自 `flex-wrap: wrap`,第二行只剩「播放」与版本入口,两行控件分裂;② 版本入口不贴右缘,被前面按钮的文本宽度顶开;③「播放」与「运行」两个入口说的是同一件事;④ 运行画面里的游戏不是 vite dev 的实时刷新,改完代码只能切到资源管理再切回来才能重载页面(飞书讨论里提的「单独的刷新」)。
- 决策(顶栏排版):工具条改**一行到底**(`flex-wrap: nowrap` + `overflow: hidden`),空间不足不再换行,而是按固定顺序降级、档位写在工具条的 `data-layout` 上:`full` → `compact-version`(版本入口只留 `版本 N`)→ `collapsed-actions`(`打开项目目录 / 资源面板 / 整理画布` 收进「更多」下拉)。顺序与 1px 判定余量是纯函数(`workbenchToolbarModel.ts`,单独用例钉顺序);档位由 `useWorkbenchToolbarLayout` 实测写入——`ResizeObserver` 管可用宽度、`MutationObserver` 管**内容**变化(切运行页、出现「恢复草稿」都不改顶栏宽度,只看尺寸会停在旧档位上),每次量宽都把候选档位真的写到 DOM 再读 `scrollWidth`。档位不参与 React 状态:写的是工具条自己的属性,React 不声明就不会覆盖;也没用容器查询(阈值随模式与按钮出现与否变化,写死必然抖)。
- 决策(两个「吞掉溢出」的坑,都是实测踩出来的):`overflow: hidden` 的 flex 子项能缩到 0 或靠省略号吸收溢出,档位判定就永远量不到真实溢出——所以版本入口默认 `min-width: max-content`(只在 `collapsed-actions` 档放开为 `0`,那一档已退无可退,省略号才是兜底)、「依赖 / 类型」分段补 `flex: 0 0 auto`(此前窄宽度下被压成 0 宽)。`max-width: 1000px` / `max-width: 760px` 两处把工具条改成 `flex-direction: column` 的媒体查询删除(那是「第二行」的另一个来源,降级已由档位负责),`≤1000px` 里给动作区的 `justify-content: flex-end` 一并删除(溢出会甩到左边,`scrollWidth` 看不见)。最后一档确实放不下时(视口远小于 1280 合同宽度)才改右对齐:宁可裁左边,也不把钉在最右的版本入口裁没。
- 决策(版本入口):`margin-left: auto` 钉在动作区最右;显示 `版本 N(原因 · 时间)`,其中 `版本 N` 复用资源画布版本卡的编号口径(`manifest.versions` 落盘顺序 + 1,`formatIterationVersionTitle`),括号里那截是独立一层(`formatIterationVersionDetail`)——窄档位收掉的是这一层而不是整枚入口;可访问名、菜单项与排障文案一律保留完整标识。
- 决策(版本入口与两端分组):工具条这一行**两端留给体量最大的两枚分组控件**——左端「资源管理 / 运行」、右端「依赖 / 类型」(用户口径:「最大的这两个放两边」),中间依次是动作按钮与版本入口;版本入口 `margin-left: auto` 推到动作区右侧,且紧邻排序分段左侧(用户口径:「版本应该在依赖 / 类型左边」),不再是最右那一枚。显示 `版本 N(原因 · 时间)`,其中 `版本 N` 复用资源画布版本卡的编号口径(`manifest.versions` 落盘顺序 + 1,`formatIterationVersionTitle`),括号里那截是独立一层(`formatIterationVersionDetail`)——窄档位收掉的是这一层而不是整枚入口;可访问名、菜单项与排障文案一律保留完整标识。DOM 顺序由 `tests/resourceVersionSwitch.test.tsx`(版本入口在排序分段之前)与 `tests/resourceCanvasGenerationTasksSidebarDismiss.test.tsx`(排序分段是动作行最后一个子元素)双向钉住。
- 决策(播放并入运行 + 刷新入口):删掉独立的「播放」按钮,「运行」页签前加 ▶ 图标,点页签=`showRunView()` + `onPlay?.()`(与旧播放按钮逐字等价,含「再点一次=重跑」);不可运行时页签不置灰、点了既不切视图也不发播放请求,只出既有提示。运行画面右下角新增「刷新运行画面」(全屏那一枚左侧):`onPlay` 命中活体预览只切视图、不重启服务,真正重载页面靠换 `iframe` 的元素身份(`LocalGamePreviewFrame` 新增 `reloadNonce`)——运行页在另一个端口上,跨域 iframe 里 `contentWindow.location.reload()` 会被浏览器挡掉。
- 决策(进入项目自动载入):站在运行视图上却没有画面可看时自动补发一次 `onPlay`——典型现场是从别的项目切过来(工作台不重挂,`mode` 是工作台自己的 state,上一条项目的运行视图原样留下而画面已经没了),用户只会看到「客户端运行画面尚未载入」,像坏了一样。只在**没有画面且可运行**时发;`showRunView` 先记账再自己发播放(`autoRunPreviewProjectRef`)所以点页签不会被重复触发;同一个项目只自动补一次,失败不打转,手动重跑仍走页签或画面上的刷新按钮。
- 边界:不改后端、契约与 SpacetimeDB;`runAvailable` / `showRunView` 的门槛语义不变,自动切运行的两条路径(会话内已确认的预览、播放请求)不走 `showRunView`,不会多发播放请求。窄于合同宽度只保证不崩,不做移动端布局。
- 影响范围:`apps/ai-game-creator-shell/src/{styles.css,view/project-development/{index.tsx,workbenchToolbarModel.ts,useWorkbenchToolbarLayout.ts,WorkbenchMoreActionsMenu.tsx},features/resource-canvas/{GameRunVersionPicker.tsx,resourceCanvasVersionBindingModel.ts},features/project-workspace/LocalGamePreviewFrame.tsx}`;用例 `tests/{workbenchToolbarLayout,runPreviewRefresh,runAutoLoadOnEnter}.test.ts(x)`(新增)、`tests/appSurface/project-development.suite.ts`、`tests/{gameRunToolbarActionsStyle,resourceCanvasVersionBindingModel}.test.ts`;文档 `docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md`、`docs/technical/【测试用例】AGC资源工作台V3端到端验收-2026-09-11.md`(S17 改写 + 新增 S17a)、`docs/README.md`、新目录 `docs/technical/assets/agc-toolbar-layout-after-20261004/`。
- 验证:`npx vitest run apps/ai-game-creator-shell/tests`(200 passed / 1 skipped 文件,1928 passed / 17 skipped 用例,末次全量);定向 8 个文件 253 passed;`npm run typecheck`(在 `apps/ai-game-creator-shell`,含 `check:tests:types`——只跑 `tsc -p tsconfig.json` 覆盖不到 `tests/`)、eslint `--max-warnings 0`、`prettier --check`、`npm run check:encoding`、`npm run check:doc-index`、`git diff --check` 全绿。真机几何用一次性 Vite 夹具在真实 Chromium 里逐档实测(视口 1412 / 1240 / 1100 / 1024 / 960 / 860 / 800 / 760 / 700 / 640 / 560 / 480 / 400):始终单行、版本入口贴右(`chipRightGap = 0`)、1240/1100 走 `compact-version`、1024/800/700/640/560/480 走 `collapsed-actions`,「更多」下拉三条动作可点且点「资源面板」真的开面板、点「刷新运行画面」`iframe` 换新节点而 `src` 不变;截图见 `docs/technical/assets/agc-toolbar-layout-after-20261004/`。
- 验证:`npx vitest run apps/ai-game-creator-shell/tests`(200 passed / 1 skipped 文件,1929 passed / 17 skipped 用例,末次全量);定向 8 个文件 253 passed;`npm run typecheck`(在 `apps/ai-game-creator-shell`,含 `check:tests:types`——只跑 `tsc -p tsconfig.json` 覆盖不到 `tests/`)、eslint `--max-warnings 0`、`prettier --check`、`npm run check:encoding`、`npm run check:doc-index`、`git diff --check` 全绿。真机几何用一次性 Vite 夹具在真实 Chromium 里逐档实测(视口 1412 / 1240 / 1100 / 1024 / 960 / 860 / 800 / 760 / 700 / 640 / 560 / 480 / 400):始终单行、排序分段贴右缘(`工具栏右缘 - padding - 排序分段右缘 = 0`)、版本入口始终在排序分段左侧、1240/1100 走 `compact-version`、1024/800/700/640/560/480 走 `collapsed-actions`,「更多」下拉三条动作可点且点「资源面板」真的开面板、点「刷新运行画面」`iframe` 换新节点而 `src` 不变;截图见 `docs/technical/assets/agc-toolbar-layout-after-20261004/`。
## 2026-10-03 AGC 画布引用统一走「活跃聊天输入区」注册表(Issue 602)
Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 44 KiB

@@ -2,22 +2,23 @@
本目录是「优化 AGC 标题栏布局」(`fix/agc-toolbar-layout`)的改动后截图,供 PR 与后续回归对照使用。四张图都取自一次性冒烟夹具(`.codex/skills/agc-workbench-browser-smoke`:真实 Chromium 挂 `ProjectDevelopmentView`,不是 Tauri 客户端),因此没有客户端窗口边框与左侧启动器侧栏。
| 文件 | 画面 | 改动后的形态 |
| ------------------------------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `01-toolbar-resources-full-1412.jpg` | 资源管理页(窗口 1412) | 顶栏一行到底:左侧只剩「资源管理 / 运行」,右侧动作全部内联,版本入口钉在最右缘并显示完整标识 `版本 1(智能体修订 · 2026/10/3 14:21:05)` |
| `02-toolbar-resources-compact-1240.jpg` | 资源管理页(窗口 1240) | 空间不足第一档:版本入口收成 `版本 1`,动作一枚不动、不换行 |
| `03-toolbar-more-menu-800.jpg` | 资源管理页(窗口 800) | 空间不足第二档:`打开项目目录 / 资源面板 / 整理画布` 收进「更多」下拉,展开即同一批动作 |
| `04-toolbar-run-tab-and-preview-refresh-1412.jpg` | 运行页(窗口 1412) | 「播放」并入「运行」页签(页签前带 ▶);运行画面右下角多一枚「刷新运行画面」,与「全屏预览」并列 |
| 文件 | 画面 | 改动后的形态 |
| ------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `01-toolbar-resources-full-1412.jpg` | 资源管理页(窗口 1412) | 顶栏一行到底:**两端是两枚大分组**——左端「资源管理 / 运行」,右端「依赖 / 类型」;中间依次是动作按钮与版本入口,版本入口紧邻排序分段左侧并显示完整标识 `版本 1(智能体修订 · 2026/10/3 14:21:05)` |
| `02-toolbar-resources-compact-1240.jpg` | 资源管理页(窗口 1240) | 空间不足第一档:版本入口收成 `版本 1`,其余一枚不动、不换行,行尾仍由「依赖 / 类型」收住 |
| `03-toolbar-more-menu-800.jpg` | 资源管理页(窗口 800) | 空间不足第二档:`打开项目目录 / 资源面板 / 整理画布` 收进「更多」下拉,展开即同一批动作;行尾仍由「依赖 / 类型」收住 |
| `04-toolbar-run-tab-and-preview-refresh-1412.jpg` | 运行页(窗口 1412) | 「播放」并入「运行」页签(页签前带 ▶);运行画面右下角多一枚「刷新运行画面」,与「全屏预览」并列 |
改动前的问题(用户现场截图):
1. 顶栏放不下时两侧各自 `flex-wrap: wrap`:第二行只剩「播放」与版本入口,两行控件分裂;
2. 版本入口不贴右缘,被前面按钮的文本宽度顶开;
3. 「播放」与「运行」是两个入口说同一件事;
4. 运行画面里的游戏不是实时刷新,改完代码只能切到资源管理再切回来重载。
4. 运行画面里的游戏不是实时刷新,改完代码只能切到资源管理再切回来重载;
5. 两枚体量最大的分组控件(「资源管理 / 运行」「依赖 / 类型」)挤在同一侧,版本入口又压在「依赖 / 类型」右边——现在两枚大分组分居一行两端,版本入口在排序分段左侧。
相关文档口径已同步到:
- [`docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md`](../../../prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md)(顶部工具条那一行)
- [`docs/technical/【测试用例】AGC资源工作台V3端到端验收-2026-09-11.md`](../【测试用例】AGC资源工作台V3端到端验收-2026-09-11.md)(S17 播放、S19 刷新)
- [`docs/project-memory/shared-memory/decision-log.md`](../../../project-memory/shared-memory/decision-log.md)(顶栏降级档位决策)
- [`docs/technical/【测试用例】AGC资源工作台V3端到端验收-2026-09-11.md`](../【测试用例】AGC资源工作台V3端到端验收-2026-09-11.md)(S17 播放、S17a 刷新)
- [`docs/project-memory/shared-memory/decision-log.md`](../../../project-memory/shared-memory/decision-log.md)(顶栏降级档位与两端分组决策)
@@ -63,7 +63,7 @@
| 步骤 | 操作 | 期望结果 | 对应 PRD 条款 | 怎么判"过了" | 已知例外 / 未做项 |
| ---------------------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **S16** 版本切换 | 运行模块**右上角**版本选择器 → 切到另一版本 | 触发钮显示当前版本;切换后资源卡「当前使用」高亮与 **@ 面板「当前版本素材」同步更新**,并重载当前预览 | L165、L190、L324、L530;#309 C7 | `aria-label="当前版本:<label>"`、菜单 `role="listbox" aria-label="切换游戏版本"`、选项 `role="option" aria-selected`;`[data-used-by-current-version="true"]` 集合随切换变化 | **C7 只做记录层 + UI 层**;"历史版本独有资源集合被运行时按版本加载"需新增版本化资源解析机制,**本轮未实现**;版本卡卡面**不渲染**「项目修订 / 父版本」文字 |
| **S16** 版本切换 | 顶栏动作区的版本入口(「依赖 / 类型」左侧,运行页与资源页都在)→ 切到另一版本 | 触发钮显示当前版本;切换后资源卡「当前使用」高亮与 **@ 面板「当前版本素材」同步更新**,并重载当前预览 | L165、L190、L324、L530;#309 C7 | `aria-label="当前版本:<label>"`、菜单 `role="listbox" aria-label="切换游戏版本"`、选项 `role="option" aria-selected`;`[data-used-by-current-version="true"]` 集合随切换变化 | **C7 只做记录层 + UI 层**;"历史版本独有资源集合被运行时按版本加载"需新增版本化资源解析机制,**本轮未实现**;版本卡卡面**不渲染**「项目修订 / 父版本」文字 |
| **S17** 播放 | 顶部「运行」页签(页签前带 ▶ 图标) | 切到运行视图并启动本地预览;**不再弹 `game.run_local` 二次确认**;预览占满中央可用区、无 iframe 滚动条;**站在运行视图却没有画面时(例如从别的项目切过来)自动补发一次载入**,同一个项目不重复补发 | L16、L71–72、L122、L493 | `data-resource-view-state` 变为 `undefined`;`await window.__TAURI__.core.invoke('get_local_game_preview_status',{projectPath})` → `status==='running'` 且有 `url`(形如 `http://127.0.0.1:<随机端口>/`) | 播放并进「运行」页签,**没有独立的「播放」按钮**:不可运行时(`runAvailable === false`)页签不置灰,点了既不切视图也不发播放请求,只出提示「首个可运行原型尚未完成,运行视图暂不可用」(与 PRD L165 表述不同,见 7.4) |
| **S17a** 刷新运行画面 | 运行画面右下角「刷新运行画面」(全屏那一枚左边) | 重新载入游戏页面:游戏预览不是 vite dev 的实时刷新,改完代码要看到新一版只有重载页面这一条路(此前只能切到资源管理再切回来) | L134 | `iframe` 换成新 DOM 节点且 `src` 不变(跨域 iframe 里 `contentWindow.location.reload()` 会被浏览器挡掉,实现走 React `key` 换元素身份);点击同时向宿主确认一次预览还活着(`onPlay` 命中活体预览不重启服务)。没有活预览时**不渲染**这枚按钮 | 全屏里照旧可用(两枚按钮都在画面那一格内);只重载页面,不重跑构建 |
| **S18** 停止与退出收尾 | 聊天侧工程操作组点「停止预览」;或关闭客户端 | 预览停止、manifest `preview` 对齐 `stopped`(清 url/port);退出时也统一收尾 | L165 | 停止后 `get_local_game_preview_status` 非 running;`.agent/logs/preview.log` 追加 `stopped`;退出后重开同一项目应落回 `resource-overview` | 停止按钮**不在**运行视图工具栏,在工作台右侧工程操作组;退出失败会打 `preview.gui_exit.stop_failed` |