From aa3e29f04ed48573f7fc6f7da5c66e005bd5e717 Mon Sep 17 00:00:00 2001
From: Suzumiya <suzmii@qq.com>
Date: Mon, 21 Sep 2026 00:37:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=8E=89=E7=94=9F=E5=9B=BE=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E7=82=B9=E8=BE=93=E5=85=A5=E6=A1=86=E5=B0=B1=E5=BC=B9?=
 =?UTF-8?q?=E7=B4=A0=E6=9D=90=E9=80=89=E6=8B=A9=E6=A1=86=EF=BC=9Alabel=20?=
 =?UTF-8?q?=E8=BD=AC=E5=8F=91=E7=82=B9=E5=87=BB=E5=88=B0=20@=20=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 现象：点生成提示词输入框任意位置都会弹出「选择素材」。根因是这一格用 `<label>` 包住，而 `<label>` 会把点击转发给内部第一个可标注控件——正好是引用输入区里的「插入素材引用」按钮
- 处理：该格改为 `<div>` 包裹；可访问名仍由控件自身的 aria-label 提供（引用输入区 `ariaLabel` 与 `PlatformTextField` 的 `aria-label`），不依赖 label 关联
- 用例：`resourceCanvasAssetGenerationReferences` 新增「点提示词输入区不该自己弹出素材选择框，只有 @ 按钮才开」——先用旧代码复现出红灯再修
- 顺带扫过资源工作台其余 `<label>`：都只包纯 input / textarea（音频与视频生成面板用纯 textarea，没有 @ 按钮），无同类隐患
- 待办文档补「2026-09-21 第三批」：卡片浮层提交即关、动画面板样式整档照抄与守卫升级、本条 label 修复
---
 ...ResourceCanvasAssetGenerationPanelView.tsx | 10 +++++--
 ...ceCanvasAssetGenerationReferences.test.tsx | 30 +++++++++++++++++++
 .../【待办】画布验收后续修复-2026-09-18.md    | 11 +++++++
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/apps/ai-game-creator-shell/src/features/resource-canvas/ResourceCanvasAssetGenerationPanelView.tsx b/apps/ai-game-creator-shell/src/features/resource-canvas/ResourceCanvasAssetGenerationPanelView.tsx
index 520299e8b..09d0b4a26 100644
--- a/apps/ai-game-creator-shell/src/features/resource-canvas/ResourceCanvasAssetGenerationPanelView.tsx
+++ b/apps/ai-game-creator-shell/src/features/resource-canvas/ResourceCanvasAssetGenerationPanelView.tsx
@@ -408,7 +408,13 @@ export function ResourceCanvasAssetGenerationPanelView({
             onChange={(event) => setAssetName(event.currentTarget.value)}
           />
         </label>
-        <label>
+        {/*
+          这一格**不能**用 `<label>` 包：`<label>` 会把点击转发给内部第一个可标注控件，而这一格里
+          第一个可标注控件是引用输入区的「插入素材引用」按钮——于是点输入框任意位置都会弹出素材
+          选择框（客户端验收现场那条）。两边的可访问名都由控件自身的 `aria-label` 提供（引用输入区
+          的 `ariaLabel` 与 `PlatformTextField` 的 `aria-label`），不依赖 label 关联。
+        */}
+        <div>
           <span>生成提示词</span>
           {referenceEnabled ? (
             /*
@@ -444,7 +450,7 @@ export function ResourceCanvasAssetGenerationPanelView({
               onChange={(event) => setPrompt(event.currentTarget.value)}
             />
           )}
-        </label>
+        </div>
         {action.adjustableDimensions ? (
           <div className="resource-canvas-asset-generation-dimensions">
             <PlatformSegmentedTabs
diff --git a/apps/ai-game-creator-shell/tests/resourceCanvasAssetGenerationReferences.test.tsx b/apps/ai-game-creator-shell/tests/resourceCanvasAssetGenerationReferences.test.tsx
index 08fb245ee..be6c4c2ba 100644
--- a/apps/ai-game-creator-shell/tests/resourceCanvasAssetGenerationReferences.test.tsx
+++ b/apps/ai-game-creator-shell/tests/resourceCanvasAssetGenerationReferences.test.tsx
@@ -300,6 +300,36 @@ describe('生成面板的参考接线', () => {
     });
   });
 
+  test('点提示词输入区不该自己弹出素材选择框', async () => {
+    const user = userEvent.setup();
+    const imageAsset = asset('asset-a', 'image/png', 'assets/素材-a.png');
+    render(
+      <ResourceCanvasAssetGenerationPanelView
+        action={imageAction}
+        assets={[imageAsset]}
+        projectPath="/tmp/project"
+        draft={{
+          prompt: '',
+          assetName: '猫',
+          aspectRatio: '1:1',
+          imageSize: '1K',
+          references: [],
+        }}
+        onSubmit={vi.fn()}
+        onClose={() => undefined}
+      />,
+    );
+
+    await user.click(screen.getByLabelText('生成提示词'));
+    expect(screen.queryByRole('dialog', { name: '选择素材' })).toBeNull();
+
+    // 只有「插入素材引用」这一枚按钮才打开选择器。
+    await user.click(screen.getByRole('button', { name: '插入素材引用' }));
+    expect(
+      await screen.findByRole('dialog', { name: '选择素材' }),
+    ).not.toBeNull();
+  });
+
   test('超限时提交被挡住并给出原因', async () => {
     const user = userEvent.setup();
     const onSubmit =
diff --git a/docs/project-memory/todos/【待办】画布验收后续修复-2026-09-18.md b/docs/project-memory/todos/【待办】画布验收后续修复-2026-09-18.md
index fccf1316f..4864b5824 100644
--- a/docs/project-memory/todos/【待办】画布验收后续修复-2026-09-18.md
+++ b/docs/project-memory/todos/【待办】画布验收后续修复-2026-09-18.md
@@ -29,6 +29,17 @@
 - 已知未做：成功之后**再次提交**仍会再派生一次（按用户显式重复计费），前端没有做"同提示词去重"；原生账本 schema、Rust 门禁与请求载荷都没有改动。
 - 本机执行过：新增模型用例 9 条与快速编辑两套新用例（提交当帧进侧栏 / 收口为已完成、在途重复提交被拦），两处新判据都做过变异验证（改回旧实现即红灯）；定向 7 个文件 97 条全绿；`tests/appSurface.test.ts` 与本批基线逐条一致（16 失败均为本分支既有，未新增）；`npm --prefix apps/ai-game-creator-shell run typecheck` 通过。远程 CI 与真实客户端验收仍未跑。
 
+### 2026-09-21 第三批（卡片浮层生命周期与画布样式，待客户端验收）
+
+验收现场又报三条：①「生成动画」面板样式与美术画布不一致（缩略图、预设、提交按钮落回默认流）；② 该浮层失焦不收起；③ 生图弹窗里**点提示词输入框任意位置**都会弹出「选择素材」。
+
+- 产品口径澄清后按「**卡片浮层只用于提交任务，提交完生命周期就结束**」改：快速编辑 / 生成动画点提交当帧即关面板（不等 IPC、不留等待态），进度与结果全在「生成任务」侧栏；受理后的失败不再重开面板（侧栏收口为失败 + 提示条、草稿回落到「未完成编辑」），只有点击瞬间就失败留在面板里。原「生成中不关」判据与此一并退役。
+- 派生请求身份改为按「入口 + 资源路径」记忆：重开面板再提交、提示词没变就沿用同一 `operationId` / 幂等键，重试仍命中同一 operation 账本。
+- 动画面板样式改为**按网页端整档照抄**：补上第二条同名规则（`.image-canvas-editor__generation-close` 的浮层内绝对定位——只搬第一条时关闭键会掉进网格流、跑到面板正中）、提示词聚焦 / `aria-invalid` 两档、composer 内参数簇底色，以及 `@media (max-width: 760px)` 整档；同时删掉面板里重复回显提示词的「动画描述」行。
+- 新增样式缺口守卫 `tests/resourceCanvasCharacterAnimationPanelStyle.test.tsx`：按 `src/main.tsx` 的真实 import 关系解析 AGC 加载的样式表，逐条比对「网页端命中该面板的规则（选择器 + 声明）AGC 是否都有一条」。第一版守卫只比选择器，漏掉了同名覆盖，已按现口径收紧。
+- 生图弹窗那个是 `<label>` 转发点击：`<label>` 会把点击交给内部第一个可标注控件，而这一格里第一个正是引用输入区的「插入素材引用」按钮。输入区改为 `<div>` 包裹（可访问名仍由控件自身 `aria-label` 提供），并补一条「点输入区不该自己弹出选择框、只有 @ 按钮才开」的用例——先用旧代码复现出红灯再修。
+- 本机执行过：定向 `projectResourceLiveIntegration` 32 条、`resourceCanvasQuickEditDraft` 10 条、`resourceCanvasFloatingDismiss` 18 条、样式守卫 3 条、`resourceCanvasAssetGenerationReferences` 10 条（含新增复现用例）等全绿；网页端 `ImageCanvasEditorGenerationIntegration` 44 条 + 面板 6 条全绿；`typecheck`、`check:encoding`、`git diff --check`、prettier、eslint 通过；`tests/appSurface.test.ts` 与基线逐条一致（16 失败均为本分支既有）。远程 CI 与真实客户端观感仍需复看。
+
 ## 后续需求
 
 - 资源卡顶部独立名称区与全类型统一样式，确认 assetName/用户素材名的正式来源。