From 931250e99a2677316f42bfd770b4395e1c1a8fe3 Mon Sep 17 00:00:00 2001 From: kdletters <61648117+kdletters@users.noreply.github.com> Date: Mon, 28 Sep 2026 17:30:28 +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=E5=A4=9A=E6=A0=91=E6=8E=92=E5=B8=83=E9=AA=8C=E6=94=B6?= =?UTF-8?q?=E9=A1=B9=E5=B9=B6=E5=88=97=E5=87=BA=E5=85=B6=E4=BD=99=E4=BA=94?= =?UTF-8?q?=E6=9D=A1=E7=BC=BA=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - tests/uiEditorState.test.ts 新增「新树默认落在所有现有树右侧并与最小 top 对齐」：直接跑 createTree 入口，断言第一棵 [0,0]、第二棵按已有右边界加 UI_TREE_PADDING、把第二棵下移后第三棵仍按最小 top 对齐 - 变异验证：把 deriveTreeOffset 的 minY 改成取最后一棵树的 top 后只有该用例变红，改回后四套用例 72 passed - 里程碑勾选第 1 条验收，并把其余 5 条各自缺什么断言逐条写清（root handle、三个开关默认值、activeImageId、首次联合 fit、拖动 undo/redo 与保存恢复） --- .../tests/uiEditorState.test.ts | 37 +++++++++++++++++++ ...】UI编辑器多树预览与独立显示开关-2026-09-14.md | 6 ++- ...】UI编辑器多树预览与独立显示开关-2026-09-14.md | 9 ++++- 3 files changed, 50 insertions(+), 2 deletions(-) diff --git a/apps/ai-game-creator-shell/tests/uiEditorState.test.ts b/apps/ai-game-creator-shell/tests/uiEditorState.test.ts index 737ce9d09..e7e5d1c85 100644 --- a/apps/ai-game-creator-shell/tests/uiEditorState.test.ts +++ b/apps/ai-game-creator-shell/tests/uiEditorState.test.ts @@ -12,7 +12,9 @@ import type { SpriteAsset } from '../src/features/ui-editor/types/SpriteAsset'; import type { State } from '../src/features/ui-editor/types/State'; import type { UIDesignImage } from '../src/features/ui-editor/types/UIDesignImage'; import { + createTree, EMPTY_UI_EDITOR_STATE, + UI_TREE_PADDING, useUiEditorState, } from '../src/features/ui-editor/useUiEditorState'; @@ -737,3 +739,38 @@ describe('useUiEditorState', () => { }); }); }); + +describe('多树预览的默认排布', () => { + it('新树默认落在所有现有树右侧并与最小 top 对齐', () => { + const state: State = { + ...structuredClone(EMPTY_UI_EDITOR_STATE), + ui_design_images: { + 'page-1': image('page-1'), + 'page-2': image('page-2'), + 'page-3': image('page-3'), + }, + ui_trees: [], + }; + + const first = createTree(state, 'page-1'); + expect(first.root.offset).toEqual({ min: [0, 0], max: [100, 80] }); + state.ui_trees = [first]; + + const second = createTree(state, 'page-2'); + expect(second.root.offset).toEqual({ + min: [100 + UI_TREE_PADDING, 0], + max: [200 + UI_TREE_PADDING, 80], + }); + + // 把第二棵树整体下移：第三棵必须按「所有现有树的最小 top」对齐（即第一棵的 0）， + // 而不是跟着最后一棵树的 top 走；横向则取所有树里最右边界再加固定 padding。 + second.root.offset = { min: [148, 60], max: [248, 140] }; + state.ui_trees = [first, second]; + + const third = createTree(state, 'page-3'); + expect(third.root.offset).toEqual({ + min: [248 + UI_TREE_PADDING, 0], + max: [348 + UI_TREE_PADDING, 80], + }); + }); +}); diff --git a/docs/project-memory/plans/【实施计划】UI编辑器多树预览与独立显示开关-2026-09-14.md b/docs/project-memory/plans/【实施计划】UI编辑器多树预览与独立显示开关-2026-09-14.md index eda92d191..a27d76085 100644 --- a/docs/project-memory/plans/【实施计划】UI编辑器多树预览与独立显示开关-2026-09-14.md +++ b/docs/project-memory/plans/【实施计划】UI编辑器多树预览与独立显示开关-2026-09-14.md @@ -39,4 +39,8 @@ - 数据与布局契约在现役代码里：`features/ui-editor/types/NodeOffset.ts`（含 min/max 派生）、`src-tauri/src/ui_editor/layout/offset.rs`、`view/ui-editor/components/preview/previewGrid.ts`。 - 三个独立开关在 `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**。 -- 仍待补：真机手感与多树布局的目视验收（本机只到定向用例级）。 \ No newline at end of file +- 仍待补：真机手感与多树布局的目视验收（本机只到定向用例级）。 + +## 本轮核对（2026-09-28） + +- 里程碑第 1 条验收（新树默认排布）已由 ests/uiEditorState.test.ts 的新用例 + 变异验证钉住，四套 UI 编辑器用例 72 passed；其余 5 条的缺口与各自需要补的断言见里程碑《本轮核对》。 diff --git a/docs/project-memory/plans/【里程碑】UI编辑器多树预览与独立显示开关-2026-09-14.md b/docs/project-memory/plans/【里程碑】UI编辑器多树预览与独立显示开关-2026-09-14.md index 4c88885e9..51e783066 100644 --- a/docs/project-memory/plans/【里程碑】UI编辑器多树预览与独立显示开关-2026-09-14.md +++ b/docs/project-memory/plans/【里程碑】UI编辑器多树预览与独立显示开关-2026-09-14.md @@ -33,7 +33,7 @@ UI 编辑器预览同时展示全部界面树。每棵树使用 root.offset 的 ## 验收标准 -- [ ] 新树默认位于所有现有树右侧并与最小 top 对齐。 +- [x] 新树默认位于所有现有树右侧并与最小 top 对齐。 - [ ] 原图与组件随 root 一起移动，拖动结束进入 undo/redo 并可保存恢复。 - [ ] root 不显示 resize handles，子节点 resize 不回归。 - [ ] 三个开关默认 showFrame=true、showOriginImage=true、showComponent=false，且互相独立。 @@ -51,4 +51,11 @@ UI 编辑器预览同时展示全部界面树。每棵树使用 root.offset 的 - 数据与布局契约在现役代码里：`features/ui-editor/types/NodeOffset.ts`（含 min/max 派生）、`src-tauri/src/ui_editor/layout/offset.rs`、`view/ui-editor/components/preview/previewGrid.ts`。 - 三个独立开关在 `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 条验收项（都不是运行时项，缺的是自动化用例，已按条列清）： + - 「原图与组件随 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` 目前只出现在用例夹具里，没有任何断言。 + - 「仅首次进入和手动适配触发联合 fit」：手动适配一半由 `previewWorkspaceZoom.test.tsx` 的 `refits the preview when the zoom percentage button is clicked` 覆盖，首次进入只触发一次联合 fit 没有断言。 - 仍待补：真机手感与多树布局的目视验收（本机只到定向用例级）。 \ No newline at end of file