修掉生图弹窗点输入框就弹素材选择框:label 转发点击到 @ 按钮
Project CI / AI game creator shell Rust shard 3/4 (pull_request) Has been cancelled
Project CI / AI game creator shell Rust shard 4/4 (pull_request) Has been cancelled
Project CI / AI game creator shell Rust smoke (pull_request) Has been cancelled
Project CI / AI game creator shell Rust crates (pull_request) Has been cancelled
Project CI / Backend tests (pull_request) Has been cancelled
Project CI / Native shell tests (pull_request) Has been cancelled
Project CI / Frontend tests (pull_request) Has been cancelled
Project CI / Repository checks (pull_request) Has been cancelled
Project CI / AI game creator shell web tests (pull_request) Has been cancelled
Project CI / AI game creator shell Rust shard 1/4 (pull_request) Has been cancelled
Project CI / AI game creator shell Rust shard 2/4 (pull_request) Has been cancelled

- 现象:点生成提示词输入框任意位置都会弹出「选择素材」。根因是这一格用 `<label>` 包住,而 `<label>` 会把点击转发给内部第一个可标注控件——正好是引用输入区里的「插入素材引用」按钮
- 处理:该格改为 `<div>` 包裹;可访问名仍由控件自身的 aria-label 提供(引用输入区 `ariaLabel` 与 `PlatformTextField` 的 `aria-label`),不依赖 label 关联
- 用例:`resourceCanvasAssetGenerationReferences` 新增「点提示词输入区不该自己弹出素材选择框,只有 @ 按钮才开」——先用旧代码复现出红灯再修
- 顺带扫过资源工作台其余 `<label>`:都只包纯 input / textarea(音频与视频生成面板用纯 textarea,没有 @ 按钮),无同类隐患
- 待办文档补「2026-09-21 第三批」:卡片浮层提交即关、动画面板样式整档照抄与守卫升级、本条 label 修复
This commit is contained in:
2026-09-21 00:37:08 +08:00
parent 55259683b8
commit aa3e29f04e
3 changed files with 49 additions and 2 deletions
@@ -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
@@ -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 =
@@ -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/用户素材名的正式来源。