AGC 画布三项：生成任务侧栏右上角 / 拖到对话批量引用 / 替换面板画布点选 #441

Merged

suzmii merged 8 commits from feat/agc-canvas-ux-followups into master 2026-09-21 07:51:07 +08:00

Conversation 0 Commits 8 Files Changed 24

+2346 -681

suzmii commented 2026-09-21 06:14:17 +08:00

Member

Copy Link

Copy Source

背景

承接 docs/project-memory/todos/【待办】画布验收后续修复-2026-09-18.md 的「后续需求」三条，加上客户端验收现场两条截图反馈（任务开关与工具条重叠、开关与面板并排）。全部落在 AGC 前端与一个共享画布组件，未动 Rust / SpacetimeDB / external v1 / OpenAPI / src-tauri。

需求与落地

1. 生成任务列表移入画布右上角（照抄美术画布位置与开合方式，保留当前样式）

• 位置从「左侧贴边 position: fixed」改为画布右上角：锚点是 .game-workbench-stage 网格里与工作面同一个单元格的条目（grid-row 按 placement 分档：资源栏目画布 3 / UI 编辑器 2 / 运行表现层 2 / -1），不再用写死 top 的绝对定位——工具条换行变高也不会压上去。
• 开合形态：收起态只有那一枚开关，展开态只有面板（两者不同框），收起走面板头部 × 或点画布外部；提交受理后自动展开。
• 样式仍全部走 AGC 的 --platform-* token（开关沿用原工具条那枚次级胶囊外观，只多一档面板投影），没有照搬网页端的固定色值。工具条上原有的重复入口删除。

2. 拖动素材到对话实现批量 @ 引用

• 资源卡按住拖到右侧 Agent 对话栏，松手即按这次拖动真正参与位移的那批（多选整批、单选只引用按住的那张）插入引用；落点铺虚线框 +「松手即可 @ 引用 N 项素材」，拖回画布内松手仍是原来的排版语义（写手动坐标）。
• 引用构造与资源卡工具条那枚「引用」按钮逐字一致（只认已登记 manifest 素材、source: resource-card），派发走新增的批量事件 RESOURCE_REFERENCE_INSERT_MANY_EVENT（一次事务插入、只聚焦一次）；一条也构造不出来时用提示条说明原因。

3. 替换面板支持在画布上点选目标

• 候选面板从全屏弹窗改为画布右上角的非模态浮层（共享组件新增 opt-in nonModal；网页端美术画布不传，弹窗行为逐字不变）：面板开着时画布照常可点，点中合法候选即落成面板里的当前选择，写入仍然只由「确认」发起；非法目标在面板里报因、零写入。
• 面板里已输入的搜索与分类筛选不被重置（同步点由显式序号 initialSelectionRevision 给，不吃数组引用）。
• 旧的「点选替换」按钮、画布提示条与点选态退役：同一个功能不留两条 UI 路径；合法性判据仍复用 resolveResourceReplacementPick，写入仍是同一个 confirm 函数。

前后对照

面	改前	改后
生成任务侧栏位置	画布左侧贴边（fixed）	画布右上角（网格条目，随工作面分档）
生成任务入口	工具条那一枚按钮（资源 / 运行各渲染一次）	右上角一枚开关；展开后让位给面板
@ 引用	输入框 @ 或卡片工具条「引用」按钮（一次一张）	还能把卡拖到对话栏整批引用
替换面板	全屏弹窗 + 「点选替换」（关弹窗→点中即提交）	非模态浮层；画布点选只设目标，确认才写
替换的合法目标	与弹窗同一条权威候选 + 同一套拒绝文案	不变（同一条 resolveResourceReplacementPick）

验证（均在本机执行）

• 仓库根 npx vitest run：378 文件全过，4537 通过 / 34 跳过 / 0 失败
• 定向：resourceCanvasAssetGenerationTasksPanel 12 / …SidebarStyle 11 / …SidebarDismiss 5 / …BackgroundClose 5、resourceCardReferenceDropModel 5、resourceCanvasChatReferenceDrop 4、resourceReferenceInput 30、resourceVersionReplacement 19、projectAssetPickerDialogShellStyle 7、ImageCanvasEditorView 64、ImageCanvasEditorGenerationIntegration 44
• tsc -p apps/ai-game-creator-shell/tsconfig.json --noEmit、npm run check:encoding（5060 文件）、git diff --check、prettier / eslint 全过
• 文档同步：PRD §3.10 / §5.3 / §7.8 / §7.9、验收用例 S15a、功能说明「拖拽引用」一节、decision-log 四条 2026-09-21 决策、画布验收待办登记

已知未覆盖 / 风险

• 真机目视未做：三处落点与手感的客户端观感、窄屏（≤480px）只有声明级断言。
• 替换轮的行为变更：写入从「点中即提交」改为「确认才提交」，旧点选入口 / 提示条 / 点选态退役——若产品口径要保留「点中即换」，回退这一处即可。
• 同一条后续需求里的**「复制对话保留有效引用」未做**。
• 网格实现要点：锚点与工作面同格，因此三处容器显式钉住 grid-column: 1，否则画布会被自动列放置挤进隐式第二列、宽度压窄一半。

提交

• d56b5ff15 生成任务侧栏移到画布右上角
• 9639a080c 资源卡拖到对话栏批量 @ 引用
• de502e9bc 替换面板改非模态浮层 + 画布点选目标
• 7148ff9ea 验收修正：锚点改挂画布那一格、展开后开关让位

## 背景 承接 `docs/project-memory/todos/【待办】画布验收后续修复-2026-09-18.md` 的「后续需求」三条，加上客户端验收现场两条截图反馈（任务开关与工具条重叠、开关与面板并排）。全部落在 AGC 前端与一个共享画布组件，**未动** Rust / SpacetimeDB / external v1 / OpenAPI / `src-tauri`。 ## 需求与落地 **1. 生成任务列表移入画布右上角（照抄美术画布位置与开合方式，保留当前样式）** - 位置从「左侧贴边 `position: fixed`」改为**画布右上角**：锚点是 `.game-workbench-stage` 网格里**与工作面同一个单元格**的条目（`grid-row` 按 `placement` 分档：资源栏目画布 3 / UI 编辑器 2 / 运行表现层 `2 / -1`），不再用写死 `top` 的绝对定位——工具条换行变高也不会压上去。 - 开合形态：**收起态只有那一枚开关，展开态只有面板**（两者不同框），收起走面板头部 × 或点画布外部；提交受理后自动展开。 - 样式仍全部走 AGC 的 `--platform-*` token（开关沿用原工具条那枚次级胶囊外观，只多一档面板投影），没有照搬网页端的固定色值。工具条上原有的重复入口删除。 **2. 拖动素材到对话实现批量 @ 引用** - 资源卡按住拖到右侧 Agent 对话栏，松手即按这次拖动真正参与位移的那批（多选整批、单选只引用按住的那张）插入引用；落点铺虚线框 +「松手即可 @ 引用 N 项素材」，**拖回画布内松手仍是原来的排版语义**（写手动坐标）。 - 引用构造与资源卡工具条那枚「引用」按钮**逐字一致**（只认已登记 manifest 素材、`source: resource-card`），派发走新增的批量事件 `RESOURCE_REFERENCE_INSERT_MANY_EVENT`（一次事务插入、只聚焦一次）；一条也构造不出来时用提示条说明原因。 **3. 替换面板支持在画布上点选目标** - 候选面板从全屏弹窗改为**画布右上角的非模态浮层**（共享组件新增 opt-in `nonModal`；网页端美术画布不传，弹窗行为逐字不变）：面板开着时画布照常可点，点中合法候选即落成**面板里的当前选择**，写入仍然只由「确认」发起；非法目标在面板里报因、零写入。 - 面板里已输入的搜索与分类筛选不被重置（同步点由显式序号 `initialSelectionRevision` 给，不吃数组引用）。 - 旧的「点选替换」按钮、画布提示条与点选态退役：同一个功能不留两条 UI 路径；合法性判据仍复用 `resolveResourceReplacementPick`，写入仍是同一个 `confirm` 函数。 ## 前后对照 | 面 | 改前 | 改后 | | --- | --- | --- | | 生成任务侧栏位置 | 画布左侧贴边（`fixed`） | 画布右上角（网格条目，随工作面分档） | | 生成任务入口 | 工具条那一枚按钮（资源 / 运行各渲染一次） | 右上角一枚开关；展开后让位给面板 | | @ 引用 | 输入框 `@` 或卡片工具条「引用」按钮（一次一张） | 还能把卡拖到对话栏整批引用 | | 替换面板 | 全屏弹窗 + 「点选替换」（关弹窗→点中即提交） | 非模态浮层；画布点选只设目标，确认才写 | | 替换的合法目标 | 与弹窗同一条权威候选 + 同一套拒绝文案 | 不变（同一条 `resolveResourceReplacementPick`） | ## 验证（均在本机执行） - 仓库根 `npx vitest run`：**378 文件全过，4537 通过 / 34 跳过 / 0 失败** - 定向：`resourceCanvasAssetGenerationTasksPanel` 12 / `…SidebarStyle` 11 / `…SidebarDismiss` 5 / `…BackgroundClose` 5、`resourceCardReferenceDropModel` 5、`resourceCanvasChatReferenceDrop` 4、`resourceReferenceInput` 30、`resourceVersionReplacement` 19、`projectAssetPickerDialogShellStyle` 7、`ImageCanvasEditorView` 64、`ImageCanvasEditorGenerationIntegration` 44 - `tsc -p apps/ai-game-creator-shell/tsconfig.json --noEmit`、`npm run check:encoding`（5060 文件）、`git diff --check`、prettier / eslint 全过 - 文档同步：PRD §3.10 / §5.3 / §7.8 / §7.9、验收用例 S15a、功能说明「拖拽引用」一节、decision-log 四条 2026-09-21 决策、画布验收待办登记 ## 已知未覆盖 / 风险 - **真机目视未做**：三处落点与手感的客户端观感、窄屏（≤480px）只有声明级断言。 - **替换轮的行为变更**：写入从「点中即提交」改为「确认才提交」，旧点选入口 / 提示条 / 点选态退役——若产品口径要保留「点中即换」，回退这一处即可。 - 同一条后续需求里的**「复制对话保留有效引用」未做**。 - 网格实现要点：锚点与工作面同格，因此三处容器显式钉住 `grid-column: 1`，否则画布会被自动列放置挤进隐式第二列、宽度压窄一半。 ## 提交 - `d56b5ff15` 生成任务侧栏移到画布右上角 - `9639a080c` 资源卡拖到对话栏批量 @ 引用 - `de502e9bc` 替换面板改非模态浮层 + 画布点选目标 - `7148ff9ea` 验收修正：锚点改挂画布那一格、展开后开关让位

suzmii added 5 commits 2026-09-21 06:14:17 +08:00

AGC「生成任务」侧栏移到画布右上角：开关常驻、面板贴着它展开 ... d56b5ff15a

- 新增右上角锚点 game-resource-generation-tasks-anchor，挂在 game-workbench-stage 内；资源栏目画布与 UI 编辑器用画布顶边那一档，运行表现层下移让开右上角的版本入口。
- 开关改由 ResourceCanvasAssetGenerationTasksPanelView 自己渲染（保留 data-resource-generation-task-toggle 与计数属性、可访问名唯一），收起态只剩这一枚开关；工具条上两处重复入口与宿主那份 resourceAssetGenerationInFlightCount 一并删除。
- 面板自己不再定位，改由 max-height 封顶 + 内部滚动；进场 / 退场动画位移方向跟着锚点翻到正 X。
- 开关沿用原工具条那枚次级胶囊外观，颜色 / 圆角 / 字重 / 阴影继续全部走平台 token。
- 测试：面板用例新增「折叠只剩右上角开关」「开关计数与面板头部同源」「锚点按工作面分档」；样式用例改为锚点坐标 / 运行档下移 / 面板不再自定位 / 开关走 token；dismiss 用例改为右上角入口且工具条不再有生成任务按钮。
- 文档：PRD 3.10 与更新时间、decision-log 新增 2026-09-21 条目、画布验收待办登记第四批并勾掉该条。

资源卡拖到对话栏实现批量 @ 引用 ... 9639a080c6

- 新增落点模型 resourceCardReferenceDropModel：对话栏矩形量取（0 x 0 判成没有落点，避免画布内拖动被误判）、命中判据、引用构造与落点提示文案。
- 引用构造与工具条「引用」按钮逐字一致（只认已登记 manifest 素材、source 为 resource-card、kind/分类/标签取自资源投影），一条都构造不出来时用提示条说明原因。
- 拖动中指针落到对话栏上即从排版切到引用：卡片不再跟指针走，改铺虚线落点浮层并提示「松手即可 @ 引用 N 项素材」；拖回画布内松手仍是原来的排版语义。
- 批量范围与拖动位移同一个集合（多选整批、单选只引用按住的那张）；新增批量事件 RESOURCE_REFERENCE_INSERT_MANY_EVENT，App 侧一次插入整批并只聚焦一次，空批次不派发。
- 对话栏挂 ref（不 document.querySelector）、落点浮层按对话栏当时的屏幕矩形铺在根节点上，不改对话栏自身的定位与排版。
- 测试：新增落点模型用例 5 条与画布集成用例 4 条（单卡/多选/拖回画布/pointercancel），resourceReferenceInput 新增批量事件与一次插入整批 chip 两条，共 39 条定向全绿。
- 文档：功能说明新增「拖拽引用」一节与完成清单条目、PRD 更新时间、decision-log 新增 2026-09-21 条目。

替换面板改为非模态浮层，支持在画布上点选替换目标 ... de502e9bc3

- 共享选择组件新增 opt-in nonModal：不铺遮罩、不做焦点陷阱、限高 + 内部滚动，Esc 在 document 阶段截断后取消，关掉即卸载；网页端美术画布不传，弹窗行为逐字不变。
- 新增 initialSelectionRevision：面板开着时宿主换了目标才重同步当前选择，面板里的搜索词与分类筛选不被重置。
- AGC 侧把候选面板锚到画布右上角（任务开关下方），壳样式放共享样式表、宿主只负责锚定；面板开着时画布照常可点，点中合法候选落成面板当前选择，写入仍只由「确认」发起。
- 退役旧的「点选替换」按钮、画布提示条与 resourceReplacementPickMode：同一个功能不留两条 UI 路径；合法性判据仍复用 resolveResourceReplacementPick，写入仍是同一个 confirm 函数。
- 确认时用画布点选结果兜底，避免点完当帧按确认误报「请选择一个替换素材」。
- 测试：替换用例 4 条点选路径改写为非模态 + 面板点选（含四类非法目标在面板内报因、Esc 只收面板），新增「画布点选不清掉面板搜索/分类」；共享组件用例新增 nonModal 形态与浮层壳声明级契约。
- 文档：PRD 5.3 / 7.8 第 8 条改写、验收用例 S15a 改写、decision-log 新增 2026-09-21 条目、待办文档登记三项并勾掉对应需求。

替换点选判据的注释口径跟上新流程 ... b20d980ba7

- resolveResourceReplacementPick 的注释里「点选态」「点选替换」改为「画布点选」「面板里的当前替换目标」，与退役掉的按钮 / 提示条口径一致；只改注释，行为不变。

验收修正：任务锚点改挂画布那一格，展开后开关让位 ... 7148ff9eaf

- 重叠：右上角锚点不再用 position: absolute + 写死的 top（工具条是 stage 第一行、高度随按钮换行变化），改为 stage 网格里与工作面同一个单元格的条目：grid-row 按 placement 分档 + grid-column 1 + justify-self end + align-self start + margin；同格的三处容器也显式钉住第 1 列，避免画布被自动列放置挤进隐式第二列。
- 并排：开关只在完全收起时渲染（收起动画期间也不画），展开态画布右上角只留面板，收起走面板头部 × 或点画布外部。
- 测试：面板用例新增「展开时开关让位」、计数用例拆成收起查开关 / 展开查面板；样式用例改判网格条目坐标与窄屏 justify-self: stretch；dismiss 用例改走面板 × 收起、收起后开关回来能再打开。
- 文档：PRD 3.10 与更新时间、decision-log 新增 2026-09-21 验收修正条目、待办文档补登记该修正。

suzmii added 2 commits 2026-09-21 06:26:30 +08:00

自查修正：拖到对话落点逐值比较、替换面板锚进画布容器并与任务面板互斥 ... 5467ed6d7b

- 拖动落点改逐值比较 sameResourceCardReferenceDrop（条数 + 对话栏矩形四值），指针在对话栏上移动不再每帧 setState、不再每帧重渲染工作台。
- 替换面板从 stage 顶层移进画布容器 .game-resource-book-manager（本身 position: relative），top 3.2rem 排在任务开关下方；相对 stage 写死的偏移会在工具条换行时压上去，与刚修的任务开关是同一类隐患。
- 打开替换会话时收起「生成任务」面板：画布右上角同一时刻只留一块浮层（任务照旧在账本里推进）。
- 面板上方补一行「替换源素材：<显示名>」：非模态之后画布上的源素材光环会被空白点击清掉，源身份得在面板这一侧留一份可读说法。
- 测试：替换用例新增「面板锚在画布容器里、写明源素材、并与任务面板互斥」（20 passed）、落点模型新增逐值比较用例（6 passed）。
- 文档：decision-log 新增本批自查条目、待办文档补登记、验收用例 C9 注脚改为 nonModal 形态。

Merge remote-tracking branch 'origin/master' into feat/agc-canvas-ux-followups 1a507dbf2d

suzmii marked the pull request as ready for review 2026-09-21 07:51:00 +08:00

suzmii added 1 commit 2026-09-21 07:51:01 +08:00

Merge branch 'master' into feat/agc-canvas-ux-followups 4172534bab

suzmii merged commit 3815d00c84 into master 2026-09-21 07:51:07 +08:00

suzmii deleted branch feat/agc-canvas-ux-followups 2026-09-21 07:51:07 +08:00

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

Compat/Breaking

Breaking change that won't be backward compatible

Kind/Bug

Something is not working

Kind/Documentation

Documentation changes

Kind/Enhancement

Improve existing functionality

Kind/Feature

New functionality

Kind/Security

This is security issue

Kind/Testing

Issue or pull request related to testing

Priority

Critical

1

The priority is critical

Priority

High

2

The priority is high

Priority

Low

4

The priority is low

Priority

Medium

3

The priority is medium

Reviewed

Confirmed

1

Issue has been confirmed

Reviewed

Duplicate

2

This issue or pull request already exists

Reviewed

Invalid

3

Invalid issue

Reviewed

Won't Fix

3

This issue won't be fixed

Status

Abandoned

3

Somebody has started to work on this but abandoned work

Status

Blocked

1

Something is blocking this issue or pull request

Status

Need More Info

2

Feedback is required to reproduce issue or to continue work

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

HuangJiaJia JenkenB k88936 (王德宇) kdletters (段舒康) laura2008 (王乐) lhk229 (孔令弘) Loer (农洛儿) loong suzmii (董羽秦) taobaisu (叶东旭) wuxiangwanzi (王子民) YixuanLiu ziyu

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: GenarrativeAI/Genarrative#441