Merge remote-tracking branch 'origin/master' into feat/ui-editor-v3

# Conflicts:
#	docs/project-memory/shared-memory/pitfalls.md

.husky/pre-commit

@@ -1 +1,4 @@
+# Git 在链接工作树里执行 Hook 时会注入 GIT_DIR 等仓库定位变量，优先级高于 cwd；
+# 子进程（npm、lint-staged、测试夹具）会继承它们并写到真实仓库，故在入口统一清除。
+unset GIT_DIR GIT_WORK_TREE GIT_INDEX_FILE GIT_COMMON_DIR GIT_PREFIX GIT_CONFIG_PARAMETERS GIT_CEILING_DIRECTORIES
 npm run format:staged

.husky/pre-push

@@ -1 +1,4 @@
+# Git 在链接工作树里执行 Hook 时会注入 GIT_DIR 等仓库定位变量，优先级高于 cwd；
+# 钩子链（npm → check:repository-ci → 测试夹具）会继承它们并写到真实仓库，故在入口统一清除。
+unset GIT_DIR GIT_WORK_TREE GIT_INDEX_FILE GIT_COMMON_DIR GIT_PREFIX GIT_CONFIG_PARAMETERS GIT_CEILING_DIRECTORIES
 npm run check:pre-push-master -- "$@"

apps/ai-game-creator-shell/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genarrative/ai-game-creator-shell",
   "private": true,
-  "version": "0.1.29",
+  "version": "0.1.45",
   "type": "module",
   "scripts": {
     "dev": "node scripts/start-tauri-dev.mjs",

apps/ai-game-creator-shell/src-tauri/Cargo.lock

@@ -1725,7 +1725,7 @@ dependencies = [
 
 [[package]]
 name = "genarrative-ai-game-creator-shell"
-version = "0.1.29"
+version = "0.1.45"
 dependencies = [
  "agent-runtime-core",
  "axum",

apps/ai-game-creator-shell/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "genarrative-ai-game-creator-shell"
-version = "0.1.29"
+version = "0.1.45"
 edition = "2021"
 publish = false
 

apps/ai-game-creator-shell/src-tauri/capabilities/main.json

@@ -1,11 +1,12 @@
 {
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "main",
-  "description": "AI 游戏创作主窗口允许读取系统剪贴板图片，用于粘贴素材附件；允许弹出原生打开/保存对话框用于素材上传与导出。",
+  "description": "AI 游戏创作主窗口允许读写系统剪贴板，用于粘贴素材附件和复制生成文件路径；允许弹出原生打开/保存对话框用于素材上传与导出。",
   "windows": ["client"],
   "permissions": [
     "clipboard-manager:allow-read-image",
     "clipboard-manager:allow-read-text",
+    "clipboard-manager:allow-write-text",
     "core:image:allow-rgba",
     "core:image:allow-size",
     "core:resources:allow-close",

apps/ai-game-creator-shell/src-tauri/src/ui_editor/commands/merge.rs

@@ -172,6 +172,7 @@ mod materialize {
     use crate::ui_editor::layout::node::{
         Node as LayoutNode, NodeMetadata, NodeSource, StageStatus,
     };
+    use crate::ui_editor::layout::offset::NodeOffset;
     use crate::ui_editor::layout::transform::Transform;
     use crate::ui_editor::state::{State, UITree};
     use crate::ui_editor::utils::{random_node_id, NodeId, UIDesignImageId};
@@ -302,6 +303,7 @@ mod materialize {
                         component: None,
                         children_display_mode: ChildrenDisplayMode::Exclusive,
                         children: members.into_iter().map(|member| member.node).collect(),
+                        offset: NodeOffset::default(),
                     },
                     priority,
                     src_ui_design,

apps/ai-game-creator-shell/src-tauri/src/ui_editor/commands/recognition.rs

@@ -9,6 +9,7 @@ use crate::ui_editor::layout::children_display_mode::ChildrenDisplayMode;
 use crate::ui_editor::layout::control_layout::ControlLayout;
 use crate::ui_editor::layout::dimension::UIRect;
 use crate::ui_editor::layout::node::{Node as LayoutNode, NodeMetadata, NodeSource, StageStatus};
+use crate::ui_editor::layout::offset::NodeOffset;
 use crate::ui_editor::layout::transform::Transform;
 use crate::ui_editor::resource::ui_design_image::UIDesignImage;
 use crate::ui_editor::state::{State, UITree};
@@ -322,6 +323,7 @@ fn convert_node(
         component: source.component.clone().into_option(),
         children_display_mode: ChildrenDisplayMode::Stack,
         children,
+        offset: NodeOffset::default(),
     })
 }
 
@@ -858,6 +860,7 @@ pub(crate) async fn recognize_ui_impl_with_provider(
                 component: recognition_root.component.into_option(),
                 children_display_mode: ChildrenDisplayMode::Stack,
                 children,
+                offset: NodeOffset::default(),
             };
             // Tree identity and root identity are assigned by Rust, never chosen by the model.
             ui_trees.push(UITree {

apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/mod.rs

@@ -2,4 +2,5 @@ pub mod children_display_mode;
 pub mod control_layout;
 pub mod dimension;
 pub mod node;
+pub mod offset;
 pub mod transform;

apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/node.rs

@@ -1,6 +1,7 @@
 use crate::ui_editor::component::Component;
 use crate::ui_editor::layout::children_display_mode::ChildrenDisplayMode;
 use crate::ui_editor::layout::control_layout::ControlLayout;
+use crate::ui_editor::layout::offset::NodeOffset;
 use crate::ui_editor::utils::NodeId;
 use serde::{Deserialize, Serialize};
 use ts_rs::TS;
@@ -14,6 +15,7 @@ pub struct Node {
     pub component: Option<Component>,
     pub children_display_mode: ChildrenDisplayMode,
     pub children: Vec<Node>,
+    pub offset: NodeOffset,
 }
 
 #[derive(Clone, Debug, Deserialize, PartialEq, Serialize, TS)]

apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/offset.rs

@@ -0,0 +1,18 @@
+use serde::{Deserialize, Serialize};
+use ts_rs::TS;
+
+#[derive(Clone, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
+pub struct NodeOffset {
+    pub min: [f32; 2],
+    pub max: [f32; 2],
+}
+
+impl Default for NodeOffset {
+    fn default() -> Self {
+        Self {
+            min: [0.0, 0.0],
+            max: [0.0, 0.0],
+        }
+    }
+}

apps/ai-game-creator-shell/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "陶泥儿",
-  "version": "0.1.29",
+  "version": "0.1.45",
   "identifier": "world.genarrative.ai-game-creator",
   "build": {
     "beforeDevCommand": "npm --prefix ../.. run agc:serve",

apps/ai-game-creator-shell/src/features/ui-editor/stageStatusOverview.ts

@@ -1,4 +1,5 @@
 import type { Node as UiNode } from './types/Node';
+import type { NodeId } from './types/NodeId';
 import type { NodeMetadata } from './types/NodeMetadata';
 import type { StageStatus } from './types/StageStatus';
 import type { UIDesignImageId } from './types/UIDesignImageId';
@@ -14,6 +15,11 @@ export type UiTreeNodeTarget = {
   node: UiNode;
 };
 
+export type UiTreeNodeCursor = {
+  treeId: UIDesignImageId;
+  nodeId: NodeId;
+};
+
 export type StageStatusOverview = {
   total: number;
   needsAttention: number;
@@ -79,22 +85,28 @@ export function getStageStatusTargets(
 
 export function getNextUiTreeNodeTarget(
   targets: UiTreeNodeTarget[],
-  previousNodeId: string | null,
+  previous: string | UiTreeNodeCursor | null,
 ): UiTreeNodeTarget | null {
   if (targets.length === 0) return null;
-  const previousIndex = targets.findIndex(
+  const previousIndex =
-    ({ node }) => node.id === previousNodeId,
+    typeof previous === 'string'
-  );
+      ? targets.findIndex(({ node }) => node.id === previous)
+      : previous
+        ? targets.findIndex(
+            ({ treeId, node }) =>
+              treeId === previous.treeId && node.id === previous.nodeId,
+          )
+        : -1;
   return targets[(previousIndex + 1) % targets.length] ?? null;
 }
 
 export function getNextMatchingUiTreeNodeTarget(
   uiTrees: UITree[],
-  previousNodeId: string | null,
+  previous: string | UiTreeNodeCursor | null,
   matches: (target: UiTreeNodeTarget) => boolean,
 ): UiTreeNodeTarget | null {
   return getNextUiTreeNodeTarget(
     collectUiTreeNodeTargets(uiTrees).filter(matches),
-    previousNodeId,
+    previous,
   );
 }

apps/ai-game-creator-shell/src/features/ui-editor/types/Node.ts

@@ -4,5 +4,6 @@ import type { Component } from "./Component";
 import type { ControlLayout } from "./ControlLayout";
 import type { NodeId } from "./NodeId";
 import type { NodeMetadata } from "./NodeMetadata";
+import type { NodeOffset } from "./NodeOffset";
 
-export type Node = { id: NodeId, layout: ControlLayout, metadata: NodeMetadata, component: Component | null, children_display_mode: ChildrenDisplayMode, children: Array<Node>, };
+export type Node = { id: NodeId, layout: ControlLayout, metadata: NodeMetadata, component: Component | null, children_display_mode: ChildrenDisplayMode, children: Array<Node>, offset: NodeOffset };

apps/ai-game-creator-shell/src/features/ui-editor/types/NodeOffset.ts

@@ -0,0 +1,4 @@
+export type NodeOffset = {
+  min: [number, number];
+  max: [number, number];
+};

apps/ai-game-creator-shell/src/features/ui-editor/useUiEditorState.ts

@@ -17,6 +17,7 @@ import type { FontAssetId } from './types/FontAssetId';
 import type { Node } from './types/Node';
 import type { NodeId } from './types/NodeId';
 import type { NodeMetadata } from './types/NodeMetadata';
+import type { NodeOffset } from './types/NodeOffset';
 import type { SpriteAsset } from './types/SpriteAsset';
 import type { SpriteAssetId } from './types/SpriteAssetId';
 import type { SpriteBorder } from './types/SpriteBorder';
@@ -34,6 +35,7 @@ export const EMPTY_UI_EDITOR_STATE: State = {
 };
 
 const MAX_HISTORY_LENGTH = 100;
+export const UI_TREE_PADDING = 48;
 
 export type UiEditorOperationFailureReason =
   | 'locked'
@@ -156,6 +158,7 @@ function createPageRoot(state: State): Node {
     component: null,
     children_display_mode: 'Stack',
     children: [],
+    offset: { min: [0, 0], max: [0, 0] },
   };
 }
 
@@ -187,9 +190,53 @@ function createHumanNode(state: State): Node {
     component: null,
     children_display_mode: 'Stack',
     children: [],
+    offset: { min: [0, 0], max: [0, 0] },
   };
 }
 
+function treeSize(state: State, treeId: UIDesignImageId): [number, number] {
+  const image = state.ui_design_images[treeId];
+  if (
+    !image ||
+    !Number.isFinite(image.pixels_per_unit) ||
+    image.pixels_per_unit <= 0
+  ) {
+    throw new Error(`界面图 ${treeId} 缺少合法尺寸`);
+  }
+  return [
+    image.pixel_size[0] / image.pixels_per_unit,
+    image.pixel_size[1] / image.pixels_per_unit,
+  ];
+}
+
+function deriveTreeOffset(state: State, treeId: UIDesignImageId): NodeOffset {
+  const [width, height] = treeSize(state, treeId);
+  const existing = state.ui_trees.filter(
+    (tree) => tree.src_ui_design !== treeId,
+  );
+  if (existing.length === 0) return { min: [0, 0], max: [width, height] };
+  const maxX = Math.max(
+    ...existing.map(
+      (tree) =>
+        tree.root.offset.min[0] + treeSize(state, tree.src_ui_design)[0],
+    ),
+  );
+  const minY = Math.min(...existing.map((tree) => tree.root.offset.min[1]));
+  return {
+    min: [maxX + UI_TREE_PADDING, minY],
+    max: [maxX + UI_TREE_PADDING + width, minY + height],
+  };
+}
+
+export function createTree(
+  state: State,
+  treeId: UIDesignImageId,
+  root = createPageRoot(state),
+) {
+  root.offset = deriveTreeOffset(state, treeId);
+  return { src_ui_design: treeId, root };
+}
+
 function synchronizeDesignImageTrees(state: State): void {
   const imageIds = new Set(Object.keys(state.ui_design_images));
   state.ui_trees = state.ui_trees.filter((tree) =>
@@ -197,7 +244,7 @@ function synchronizeDesignImageTrees(state: State): void {
   );
   for (const [id] of Object.entries(state.ui_design_images)) {
     if (!state.ui_trees.some((tree) => tree.src_ui_design === id)) {
-      state.ui_trees.push({ src_ui_design: id, root: createPageRoot(state) });
+      state.ui_trees.push(createTree(state, id));
     }
   }
 }
@@ -951,6 +998,34 @@ export function useUiEditorState(initialState: State = EMPTY_UI_EDITOR_STATE) {
     [commit, guard],
   );
 
+  const setTreeOffset = useCallback(
+    (
+      treeId: UIDesignImageId,
+      min: [number, number],
+    ): UiEditorOperationResult => {
+      const blocked = guard();
+      if (blocked) return blocked;
+      if (!min.every(Number.isFinite)) return { ok: false, reason: 'invalid' };
+      const current = stateRef.current;
+      const tree = current.ui_trees.find(
+        (candidate) => candidate.src_ui_design === treeId,
+      );
+      if (!tree) return { ok: false, reason: 'missing' };
+      const size = treeSize(current, treeId);
+      const next = cloneState(current);
+      const nextTree = next.ui_trees.find(
+        (candidate) => candidate.src_ui_design === treeId,
+      )!;
+      nextTree.root.offset = {
+        min: [...min],
+        max: [min[0] + size[0], min[1] + size[1]],
+      };
+      commit(next);
+      return { ok: true, value: undefined };
+    },
+    [commit, guard],
+  );
+
   const insertNodeAfter = useCallback(
     (
       treeId: UIDesignImageId,
@@ -1464,6 +1539,7 @@ export function useUiEditorState(initialState: State = EMPTY_UI_EDITOR_STATE) {
     setSpriteBorder,
     insertNode,
     insertNodeAfter,
+    setTreeOffset,
     deleteNode,
     setNodeTransform,
     setNodeLayout,

apps/ai-game-creator-shell/src/view/ui-editor/components/InputSidebar.tsx

@@ -70,6 +70,7 @@ export function InputSidebar({ input }: { input: UiEditorInputProjection }) {
       component: null,
       children_display_mode: 'Stack',
       children: uiTrees.map((tree) => tree.root),
+      offset: { min: [0, 0], max: [0, 0] },
     };
   }, [uiTrees]);
 
@@ -83,8 +84,14 @@ export function InputSidebar({ input }: { input: UiEditorInputProjection }) {
           treeIdForNode={(nodeId) => treeIdByNodeId.get(nodeId) ?? null}
           isNodePreviewVisible={input.isNodePreviewVisible}
           onSelectNode={(treeId, nodeId) => {
-            input.selectDesignImage(treeId);
+            // react-arborist emits `onSelect` when its controlled `selection`
-            input.selectNode(nodeId);
+            // prop is updated. Overview navigation updates the selection and
+            // the status highlight in the same render, so treating that
+            // programmatic notification as a fresh user selection would clear
+            // the highlight before it can be painted. Only mutate selection
+            // state when the target actually differs from the current one.
+            const sameNode = input.selectedNodeId === nodeId;
+            if (!sameNode) input.selectNode(nodeId);
           }}
           onToggleNodeVisibility={(nodeId) =>
             input.toggleNodePreviewVisibility(nodeId)

apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/InspectorSidebar.tsx

@@ -284,7 +284,7 @@ function NodeInspector({
   onMetadataChange,
   highlightedStatusField,
   onTransformChange,
-  onLayoutChange,
+  // onLayoutChange,
   sprites,
   previewUrls,
   fonts,
@@ -483,11 +483,11 @@ function NodeInspector({
         readOnly={transformReadOnly || isReadOnly}
         onChange={onTransformChange}
       />
-      <LayoutEditor
+      {/*<LayoutEditor*/}
-        node={node}
+      {/*  node={node}*/}
-        readOnly={isReadOnly}
+      {/*  readOnly={isReadOnly}*/}
-        onChange={onLayoutChange}
+      {/*  onChange={onLayoutChange}*/}
-      />
+      {/*/>*/}
       <ComponentPanel
         key={node.id}
         component={node.component}
@@ -511,6 +511,7 @@ function NodeInspector({
   );
 }
 
+// eslint-disable-next-line unused-imports/no-unused-vars
 function LayoutEditor({
   node,
   readOnly,
@@ -826,11 +827,26 @@ function NodeStageSelect({
   const attentionTone = kind === 'Blocked' ? 'blocked' : 'review';
 
   useEffect(() => {
-    if (!highlight) return;
+    const statusRow = statusRowRef.current;
-    statusRowRef.current?.scrollIntoView({
+    if (!highlight || !statusRow) return;
+    statusRow.scrollIntoView({
       block: 'nearest',
       behavior: 'smooth',
     });
+
+    // 强制制造一次样式边界，避免 A → B → A 时浏览器复用已完成的动画。
+    statusRow.classList.remove('ui-editor-status-attention');
+    void statusRow.offsetWidth;
+    statusRow.classList.add('ui-editor-status-attention');
+
+    // 多节点切换会复用 Inspector 树，显式重启动画，确保回到已查看节点时
+    // 仍能再次播放提示，而不是依赖 class/key 的重协调行为。
+    if (typeof statusRow.getAnimations === 'function') {
+      for (const animation of statusRow.getAnimations()) {
+        animation.cancel();
+        animation.play();
+      }
+    }
   }, [highlight]);
 
   return (

apps/ai-game-creator-shell/src/view/ui-editor/components/RecognitionOverview.tsx

@@ -44,7 +44,7 @@ export function RecognitionOverview({
         Overview
       </span>
       <h2 className="m-0 text-sm font-semibold">识别概览</h2>
-      <div className="mt-3 grid grid-cols-2 gap-2">
+      <div className="mt-3 grid grid-cols-4 gap-2">
         <OverviewValue label="已识别 Node" value={overview.total} />
         <OverviewAction
           label="待用户检查"

apps/ai-game-creator-shell/src/view/ui-editor/components/SeparationOverview.tsx

@@ -47,7 +47,7 @@ export function SeparationOverview({
         Overview
       </span>
       <h2 className="m-0 text-sm font-semibold">自动切分素材概览</h2>
-      <div className="mt-3 grid grid-cols-2 gap-2">
+      <div className="mt-3 grid grid-cols-4 gap-2">
         <OverviewValue
           label="需要切分素材的组件"
           value={overview.componentsNeedingAssets}

apps/ai-game-creator-shell/src/view/ui-editor/components/UiEditorCopyPathButton.tsx

@@ -0,0 +1,44 @@
+import { writeText } from '@tauri-apps/plugin-clipboard-manager';
+import { Copy } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export function UiEditorCopyPathButton({
+  relativePath,
+}: {
+  relativePath: string;
+}) {
+  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>(
+    'idle',
+  );
+
+  useEffect(() => setCopyState('idle'), [relativePath]);
+
+  async function copyPath() {
+    setCopyState('idle');
+    try {
+      await writeText(relativePath);
+      setCopyState('copied');
+    } catch (error) {
+      setCopyState('failed');
+      throw error;
+    }
+  }
+
+  return (
+    <>
+      {copyState === 'failed' ? (
+        <p className="mt-2 text-xs text-red-600" role="alert">
+          复制失败，请手动复制路径。
+        </p>
+      ) : null}
+      <button
+        type="button"
+        className="inline-flex items-center gap-1.5 rounded-lg border border-(--platform-subpanel-border) px-3 py-2 text-xs"
+        onClick={() => void copyPath()}
+      >
+        <Copy size={14} aria-hidden="true" />
+        {copyState === 'copied' ? '已复制' : '复制路径'}
+      </button>
+    </>
+  );
+}

apps/ai-game-creator-shell/src/view/ui-editor/components/UiEditorSaveResultModal.tsx

@@ -0,0 +1,140 @@
+import { ThemedModal } from '../../../components/modal/ThemedModal';
+import { UiEditorCopyPathButton } from './UiEditorCopyPathButton';
+
+export type UiEditorSaveResultNotice =
+  | {
+      kind: 'saved';
+    }
+  | {
+      kind: 'generated';
+      relativePath: string;
+    }
+  | {
+      kind: 'failure';
+      message: string;
+      retryLabel?: string;
+      onRetry?: () => void;
+    };
+
+export function UiEditorSaveResultModal({
+  notice,
+  onClose,
+}: {
+  notice: UiEditorSaveResultNotice | null;
+  onClose: () => void;
+}) {
+  return (
+    <ThemedModal
+      open={notice !== null}
+      onClose={onClose}
+      ariaLabel={ariaLabelForNotice(notice)}
+      panelClassName="w-[min(460px,calc(100vw-2rem))] rounded-2xl p-5"
+    >
+      {notice?.kind === 'generated' ? (
+        <GeneratedNotice relativePath={notice.relativePath} onClose={onClose} />
+      ) : notice?.kind === 'saved' ? (
+        <SimpleNotice title="保存成功" onClose={onClose} />
+      ) : notice?.kind === 'failure' ? (
+        <FailureNotice notice={notice} onClose={onClose} />
+      ) : null}
+    </ThemedModal>
+  );
+}
+
+function GeneratedNotice({
+  relativePath,
+  onClose,
+}: {
+  relativePath: string;
+  onClose: () => void;
+}) {
+  return (
+    <>
+      <h2 className="m-0 text-base font-semibold">代码已生成</h2>
+      <p className="mt-3 text-sm text-(--platform-text-soft)">生成文件路径</p>
+      <code className="mt-2 block select-text break-all rounded-lg bg-black/5 px-3 py-2 text-xs leading-5">
+        {relativePath}
+      </code>
+      <div className="mt-5">
+        <UiEditorCopyPathButton relativePath={relativePath} />
+        <div className="mt-3 flex justify-end">
+          <button
+            type="button"
+            className="rounded-lg bg-orange-600 px-3 py-2 text-xs font-semibold text-white"
+            onClick={onClose}
+          >
+            关闭
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function SimpleNotice({
+  title,
+  onClose,
+}: {
+  title: string;
+  onClose: () => void;
+}) {
+  return (
+    <>
+      <h2 className="m-0 text-base font-semibold">{title}</h2>
+      <div className="mt-5 flex justify-end">
+        <button
+          type="button"
+          className="rounded-lg bg-orange-600 px-3 py-2 text-xs font-semibold text-white"
+          onClick={onClose}
+        >
+          关闭
+        </button>
+      </div>
+    </>
+  );
+}
+
+function FailureNotice({
+  notice,
+  onClose,
+}: {
+  notice: Extract<UiEditorSaveResultNotice, { kind: 'failure' }>;
+  onClose: () => void;
+}) {
+  return (
+    <>
+      <h2 className="m-0 text-base font-semibold">操作失败</h2>
+      <p className="mt-3 whitespace-pre-line text-sm leading-6 text-red-700">
+        {notice.message}
+      </p>
+      <div className="mt-5 flex flex-wrap justify-end gap-2">
+        <button
+          type="button"
+          className="rounded-lg border border-(--platform-subpanel-border) px-3 py-2 text-xs"
+          onClick={onClose}
+        >
+          关闭
+        </button>
+        {notice.onRetry ? (
+          <button
+            type="button"
+            className="rounded-lg bg-orange-600 px-3 py-2 text-xs font-semibold text-white"
+            onClick={() => {
+              onClose();
+              notice.onRetry?.();
+            }}
+          >
+            {notice.retryLabel ?? '重试'}
+          </button>
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+function ariaLabelForNotice(notice: UiEditorSaveResultNotice | null) {
+  if (notice?.kind === 'generated') return '代码已生成';
+  if (notice?.kind === 'saved') return '保存成功';
+  if (notice?.kind === 'failure') return '操作失败';
+  return '保存结果';
+}

apps/ai-game-creator-shell/src/view/ui-editor/components/preview/UiTreeRenderer.tsx

@@ -20,17 +20,17 @@ import { resolveExclusiveVisibleChildId } from './exclusiveVisibility';
 
 export type { ResizeHandle } from '../../../../features/ui-editor/nodeTransformGeometry';
 
-export type UiEditorRenderMode = 'editor-overlay' | 'final-preview';
-
 type NodePointerDown = (
   event: ReactPointerEvent<HTMLDivElement>,
   node: UiNode,
+  treeId?: string,
 ) => void;
 
 type UiTreeRendererProps = {
   tree: UITree | null;
-  renderMode: UiEditorRenderMode;
+  treeId?: string;
   showFrame: boolean;
+  showComponent: boolean;
   hiddenNodeIds: ReadonlySet<NodeId>;
   previewTransforms?: ReadonlyMap<NodeId, UiNode['layout']['transform']>;
   selectedNodeId: NodeId | null;
@@ -41,6 +41,7 @@ type UiTreeRendererProps = {
     event: ReactMouseEvent<HTMLDivElement>,
     node: UiNode,
     isPageRoot: boolean,
+    treeId?: string,
   ) => void;
   onNodePointerDown: NodePointerDown;
   onNodePointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
@@ -50,6 +51,7 @@ type UiTreeRendererProps = {
     event: ReactPointerEvent<HTMLDivElement>,
     node: UiNode,
     handle: ResizeHandle,
+    treeId?: string,
   ) => void;
   onNodeResizePointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
   onNodeResizePointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
@@ -81,10 +83,11 @@ const EMPTY_PREVIEW_TRANSFORMS: ReadonlyMap<
 
 function RenderNode({
   node,
+  treeId,
   isRoot,
   parentContainer,
-  renderMode,
   showFrame,
+  showComponent,
   hiddenNodeIds,
   previewTransforms,
   selectedNodeId,
@@ -124,8 +127,8 @@ function RenderNode({
     return null;
   }
 
-  const isEditorOverlay = renderMode === 'editor-overlay';
+  const isSelected = selectedNodeId === node.id;
-  const isFrameVisible = isEditorOverlay || showFrame;
+  const isFrameVisible = showFrame || isSelected;
   const receivesPointerGesture = parentContainer === undefined;
   const hasDirectPointerGesture = receivesPointerGesture && !isRoot;
   const exclusiveVisibleChildId =
@@ -170,15 +173,14 @@ function RenderNode({
             }
       }
       onContextMenu={(event) => {
-        if (!isEditorOverlay) return;
         event.preventDefault();
         event.stopPropagation();
         onSelectNode(node.id);
-        onNodeContextMenu(event, node, Boolean(isRoot));
+        onNodeContextMenu(event, node, Boolean(isRoot), treeId);
       }}
       onPointerDown={
         receivesPointerGesture
-          ? (event) => onNodePointerDown(event, node)
+          ? (event) => onNodePointerDown(event, node, treeId)
           : undefined
       }
       onPointerMove={receivesPointerGesture ? onNodePointerMove : undefined}
@@ -191,10 +193,10 @@ function RenderNode({
           {node.metadata.name}
         </span>
       ) : null}
-      {node.component ? (
+      {showComponent && node.component ? (
         <ComponentView component={node.component} resources={resources} />
       ) : null}
-      {renderMode === 'final-preview' && selectedNodeId === node.id ? (
+      {isSelected ? (
         <ExclusiveChildrenTabs
           parent={node}
           isChildVisible={(nodeId) => nodeId === exclusiveVisibleChildId}
@@ -207,13 +209,14 @@ function RenderNode({
           <RenderNode
             key={child.id}
             node={child}
+            treeId={treeId}
             parentContainer={
               isContainer(node.layout.container)
                 ? node.layout.container
                 : undefined
             }
-            renderMode={renderMode}
             showFrame={showFrame}
+            showComponent={showComponent}
             hiddenNodeIds={hiddenNodeIds}
             previewTransforms={activePreviewTransforms}
             selectedNodeId={selectedNodeId}
@@ -254,7 +257,7 @@ function RenderNode({
                 touchAction: 'none',
               }}
               onPointerDown={(event) =>
-                onNodeResizePointerDown(event, node, handle.id)
+                onNodeResizePointerDown(event, node, handle.id, treeId)
               }
               onPointerMove={onNodeResizePointerMove}
               onPointerUp={onNodeResizePointerUp}

apps/ai-game-creator-shell/src/view/ui-editor/components/preview/previewGrid.ts

@@ -0,0 +1,26 @@
+/** 背景网格的基础世界步长；缩放时按 2 倍档位调整屏幕密度。 */
+export const PREVIEW_GRID_BASE_STEP = 28;
+const PREVIEW_GRID_MIN_SCREEN_SPACING = 20;
+const PREVIEW_GRID_MAX_SCREEN_SPACING = 40;
+
+/**
+ * 选择一个离散的世界步长，让网格圆点在屏幕上保持可读密度。
+ * 背景位置仍使用 viewport 的屏幕平移量，因此切档不会破坏世界原点对齐。
+ */
+export function resolvePreviewGridStep(viewportScale: number): number {
+  if (!Number.isFinite(viewportScale) || viewportScale <= 0) {
+    return PREVIEW_GRID_BASE_STEP;
+  }
+
+  let step = PREVIEW_GRID_BASE_STEP;
+  let screenSpacing = step * viewportScale;
+  while (screenSpacing < PREVIEW_GRID_MIN_SCREEN_SPACING) {
+    step *= 2;
+    screenSpacing *= 2;
+  }
+  while (screenSpacing >= PREVIEW_GRID_MAX_SCREEN_SPACING) {
+    step /= 2;
+    screenSpacing /= 2;
+  }
+  return step;
+}