From 84e7aacf801f37b26220b53638959826be6b7284 Mon Sep 17 00:00:00 2001 From: kdletters <61648117+kdletters@users.noreply.github.com> Date: Mon, 28 Sep 2026 17:32:06 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E9=BD=90=20UI=20=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E4=B8=89=E4=B8=AA=E7=8B=AC=E7=AB=8B=E5=BC=80=E5=85=B3?= =?UTF-8?q?=E7=9A=84=E9=BB=98=E8=AE=A4=E5=80=BC=E4=B8=8E=E7=8B=AC=E7=AB=8B?= =?UTF-8?q?=E6=80=A7=E9=AA=8C=E6=94=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - tests/uiEditorPage.test.ts 新增「默认显示框线与原图、隐藏组件，且三个开关互相独立」：渲染真实页面后断言三个复选框初始值，并逐个切换确认互不影响 - 变异验证：把 view/ui-editor/index.tsx 的 showFrame 初值改为 false 后只有该用例变红，改回后四套用例 73 passed - 里程碑勾选第 4 条验收；并把「预览选择不改 activeImageId」一条的执行方式改成走 hook 暴露的 activeImageId（左侧列表只有 CSS class 标记，无 aria） --- .../tests/uiEditorPage.test.ts | 38 +++++++++++++++++++ ...】UI编辑器多树预览与独立显示开关-2026-09-14.md | 8 ++-- 2 files changed, 42 insertions(+), 4 deletions(-) diff --git a/apps/ai-game-creator-shell/tests/uiEditorPage.test.ts b/apps/ai-game-creator-shell/tests/uiEditorPage.test.ts index 7f82030a4..aa31788bc 100644 --- a/apps/ai-game-creator-shell/tests/uiEditorPage.test.ts +++ b/apps/ai-game-creator-shell/tests/uiEditorPage.test.ts @@ -1141,4 +1141,42 @@ describe('UiEditorPage', () => { ).toHaveLength(success ? 1 : 0); }, ); + it('默认显示框线与原图、隐藏组件，且三个开关互相独立', async () => { + const stateStore: IUiDesignStateStore = { + load: vi.fn().mockResolvedValue({ + revision: 0, + state: stateWithPages(['page']), + }), + save: vi.fn(), + generateCode: vi.fn().mockRejectedValue(new Error('测试未配置代码生成')), + }; + render( + createElement(UiEditorPage, { + projectPath: '/tmp/ui-editor-switches', + resourceId: 'ui-resource', + stateStore, + }), + ); + + const frame = (await screen.findByLabelText( + '显示框线', + )) as HTMLInputElement; + const origin = screen.getByLabelText('显示原图') as HTMLInputElement; + const component = screen.getByLabelText('显示组件') as HTMLInputElement; + + expect(frame.checked).toBe(true); + expect(origin.checked).toBe(true); + expect(component.checked).toBe(false); + + // 互相独立：关掉框线不动原图与组件。 + fireEvent.click(frame); + expect(frame.checked).toBe(false); + expect(origin.checked).toBe(true); + expect(component.checked).toBe(false); + + // 打开组件也不动原图。 + fireEvent.click(component); + expect(component.checked).toBe(true); + expect(origin.checked).toBe(true); + }); }); diff --git a/docs/project-memory/plans/【里程碑】UI编辑器多树预览与独立显示开关-2026-09-14.md b/docs/project-memory/plans/【里程碑】UI编辑器多树预览与独立显示开关-2026-09-14.md index 51e783066..19464b47a 100644 --- a/docs/project-memory/plans/【里程碑】UI编辑器多树预览与独立显示开关-2026-09-14.md +++ b/docs/project-memory/plans/【里程碑】UI编辑器多树预览与独立显示开关-2026-09-14.md @@ -36,7 +36,7 @@ UI 编辑器预览同时展示全部界面树。每棵树使用 root.offset 的 - [x] 新树默认位于所有现有树右侧并与最小 top 对齐。 - [ ] 原图与组件随 root 一起移动，拖动结束进入 undo/redo 并可保存恢复。 - [ ] root 不显示 resize handles，子节点 resize 不回归。 -- [ ] 三个开关默认 showFrame=true、showOriginImage=true、showComponent=false，且互相独立。 +- [x] 三个开关默认 showFrame=true、showOriginImage=true、showComponent=false，且互相独立。 - [ ] 预览选择不修改 activeImageId；左侧图片选择和 Inspector 既有切换保持。 - [ ] 仅首次进入和手动适配触发联合 fit。 @@ -52,10 +52,10 @@ UI 编辑器预览同时展示全部界面树。每棵树使用 root.offset 的 - 三个独立开关在 `view/ui-editor/index.tsx` 里渲染：`显示框线` / `显示原图` / `显示组件`。 - 定向用例：`npx vitest run tests/uiEditorPreview.test.tsx tests/previewWorkspaceZoom.test.tsx tests/previewRightPanGesture.test.ts tests/uiEditorPage.test.ts --root apps/ai-game-creator-shell` → **59 passed / 0 failed**。 - 本轮补齐的验收项（第 1 条）：新增 `tests/uiEditorState.test.ts` 的「新树默认落在所有现有树右侧并与最小 top 对齐」——直接跑 `createTree` 入口：第一棵落在 `[0,0]`，第二棵落在「第一棵右边界 + `UI_TREE_PADDING`」且 top 与现有最小 top 对齐；把第二棵整体下移后，第三棵仍然按**最小** top（而不是最后一棵的 top）对齐，横向取所有树最右边界。变异验证：把 `deriveTreeOffset` 的 `minY` 改成取最后一棵树的 top 后，只有这条用例变红（1 failed / 17 passed），改回后恢复绿；本轮四套 UI 编辑器用例合计 **72 passed**。 -- 仍未覆盖的 5 条验收项（都不是运行时项，缺的是自动化用例，已按条列清）： +- 仍未覆盖的 4 条验收项（都不是运行时项，缺的是自动化用例，已按条列清）： - 「原图与组件随 root 一起移动，拖动结束进入 undo/redo 并可保存恢复」：现有 `uiEditorState.test.ts` 只覆盖 `set-tree-offset` 命令本身，没有断言预览渲染跟随 root 位移与拖动落点进 undo/redo、保存后能读回。 - 「root 不显示 resize handles，子节点 resize 不回归」：`uiEditorPreview.test.tsx` 的 `shows final-preview node frames and resize handles only when requested` 覆盖 handle 可见性分支，但没有把「root 无 handle」写成独立断言。 - - 「三个开关默认 showFrame=true、showOriginImage=true、showComponent=false，且互相独立」：三个开关在 `view/ui-editor/index.tsx` 渲染，现有用例只把它们当入参传，没有断言页面初始值。 - - 「预览选择不修改 activeImageId；左侧图片选择和 Inspector 既有切换保持」：`activeImageId` 目前只出现在用例夹具里，没有任何断言。 +- 本轮补齐的验收项（第 4 条）：`tests/uiEditorPage.test.ts` 新增「默认显示框线与原图、隐藏组件，且三个开关互相独立」——渲染真实 `UiEditorPage` 后按标签取三个复选框，断言初始值 `显示框线=true` / `显示原图=true` / `显示组件=false`，再分别关框线、开组件，确认互不影响。变异验证：把 `view/ui-editor/index.tsx` 的 `showFrame` 初值改成 `false` 后只有这条用例变红（1 failed / 35 passed），改回后四套用例合计 **73 passed**。 + - 「预览选择不修改 activeImageId；左侧图片选择和 Inspector 既有切换保持」：`activeImageId` 在页面 hook（`useUiEditorPage.ts`）里，左侧图片列表只用 CSS class（`border-orange-300 bg-orange-50`）标记选中，没有 aria 属性——断言应当走 hook 暴露的 activeImageId，而不是 DOM class。 - 「仅首次进入和手动适配触发联合 fit」：手动适配一半由 `previewWorkspaceZoom.test.tsx` 的 `refits the preview when the zoom percentage button is clicked` 覆盖，首次进入只触发一次联合 fit 没有断言。 - 仍待补：真机手感与多树布局的目视验收（本机只到定向用例级）。 \ No newline at end of file