From 5f1c69f5325c17de900360c6ca1035e4087af684 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 17 Aug 2026 14:36:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=9C=80=E7=BB=88=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=A1=86=E7=BA=BF=E5=BC=80=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

最终预览新增 Show frame 开关并显示框线与拖拽控件

编辑叠加模式仅显示参考图与节点编辑框，不渲染组件内容
---
 .../components/preview/PreviewWorkspace.tsx   | 12 ++++++++
 .../components/preview/UiTreeRenderer.tsx     | 28 +++++++++++--------
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/PreviewWorkspace.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/PreviewWorkspace.tsx
index 5425f495e..b721b1d55 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/PreviewWorkspace.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/PreviewWorkspace.tsx
@@ -42,6 +42,7 @@ export function PreviewWorkspace({
   const [spaceHeld, setSpaceHeld] = useState(false);
   const [renderMode, setRenderMode] =
     useState<UiEditorRenderMode>('editor-overlay');
+  const [showFrame, setShowFrame] = useState(false);
   const tree = controller.treeForActiveImage ?? null;
   const logicalSize = useMemo(() => {
     if (!activeImage) return null;
@@ -252,6 +253,16 @@ export function PreviewWorkspace({
               最终预览
             </button>
           </div>
+          {renderMode === 'final-preview' ? (
+            <button
+              type="button"
+              className={`rounded-md border px-2 py-1 text-[10px] ${showFrame ? 'border-orange-500 bg-orange-50 text-orange-700' : 'border-(--platform-subpanel-border) text-(--platform-text-soft)'}`}
+              aria-pressed={showFrame}
+              onClick={() => setShowFrame((current) => !current)}
+            >
+              Show frame
+            </button>
+          ) : null}
           <span className="text-[10px] text-(--platform-text-soft)">
             {Object.keys(controller.images).length} 张界面图 ·{' '}
             {Object.keys(controller.sprites).length} 项素材
@@ -300,6 +311,7 @@ export function PreviewWorkspace({
                 <UiTreeRenderer
                   tree={tree}
                   renderMode={renderMode}
+                  showFrame={showFrame}
                   selectedNodeId={controller.selectedNodeId}
                   resources={{
                     previewUrls,
diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/UiTreeRenderer.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/UiTreeRenderer.tsx
index b1bf554e8..6deddddfb 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/UiTreeRenderer.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/UiTreeRenderer.tsx
@@ -20,6 +20,7 @@ type NodePointerDown = (
 type UiTreeRendererProps = {
   tree: UITree | null;
   renderMode: UiEditorRenderMode;
+  showFrame: boolean;
   selectedNodeId: NodeId | null;
   resources: PreviewComponentResources;
   onSelectNode: (id: NodeId) => void;
@@ -56,6 +57,7 @@ function RenderNode({
   node,
   isRoot,
   renderMode,
+  showFrame,
   selectedNodeId,
   resources,
   onSelectNode,
@@ -76,13 +78,14 @@ function RenderNode({
   }
 
   const isEditorOverlay = renderMode === 'editor-overlay';
+  const isFrameVisible = isEditorOverlay || showFrame;
   return (
     <div
       data-node-id={node.id}
       className={`absolute min-h-0 min-w-0 ${isRoot ? 'cursor-default' : 'cursor-move'}`}
       style={{
         ...geometry,
-        ...(isEditorOverlay
+        ...(isFrameVisible
           ? {
               outline:
                 selectedNodeId === node.id
@@ -104,25 +107,28 @@ function RenderNode({
       onPointerMove={onNodePointerMove}
       onPointerUp={onNodePointerUp}
       onPointerCancel={onNodePointerUp}
-      title={isEditorOverlay ? node.metadata.name || undefined : undefined}
+      title={isFrameVisible ? node.metadata.name || undefined : undefined}
     >
-      {isEditorOverlay && node.metadata.name ? (
+      {isFrameVisible && node.metadata.name ? (
         <span className="pointer-events-none absolute left-0 top-0 max-w-full truncate bg-blue-600/80 px-1 text-[9px] leading-4 text-white">
           {node.metadata.name}
         </span>
       ) : null}
-      {node.components.map((component, index) => (
-        <ComponentView
-          key={`${node.id}:component:${index}`}
-          component={component}
-          resources={resources}
-        />
-      ))}
+      {renderMode === 'final-preview'
+        ? node.components.map((component, index) => (
+            <ComponentView
+              key={`${node.id}:component:${index}`}
+              component={component}
+              resources={resources}
+            />
+          ))
+        : null}
       {node.children.map((child) => (
         <RenderNode
           key={child.id}
           node={child}
           renderMode={renderMode}
+          showFrame={showFrame}
           selectedNodeId={selectedNodeId}
           resources={resources}
           onSelectNode={onSelectNode}
@@ -135,7 +141,7 @@ function RenderNode({
           viewportScale={viewportScale}
         />
       ))}
-      {isEditorOverlay && !isRoot && selectedNodeId === node.id
+      {isFrameVisible && !isRoot && selectedNodeId === node.id
         ? RESIZE_HANDLES.map((handle) => (
             <div
               key={handle.id}