From 84c780a6f807629fcbc5b40f1787f1aba7460b85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Sat, 12 Sep 2026 20:45:36 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=20UI=20=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E5=85=A8=E5=B1=8F=E5=A4=96=E5=A3=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

通过 portal 将资源编辑器挂载到 body 并覆盖标题栏以下区域

移除外层 FocusTrap，保留内部确认对话框的模态行为

统一左右浮动面板的顶部与底部留白
---
 .../src/view/ui-editor/index.tsx              | 211 +++++++++++-------
 1 file changed, 134 insertions(+), 77 deletions(-)

diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/index.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/index.tsx
index 4e551bb6a..c03871d8a 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/index.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/index.tsx
@@ -1,5 +1,6 @@
 import { Redo2, Undo2, X } from 'lucide-react';
 import { type ReactNode, useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 import { ThemedModal } from '../../components/modal/ThemedModal';
 import {
@@ -11,7 +12,10 @@ import { EditorDialogs } from './components/EditorDialogs';
 import { ImportOverview } from './components/ImportOverview';
 import { InputSidebar } from './components/InputSidebar';
 import { InspectorSidebar } from './components/Inspector/InspectorSidebar';
-import { PreviewWorkspace } from './components/preview/PreviewWorkspace';
+import {
+  PreviewWorkspace,
+  type UiEditorRenderMode,
+} from './components/preview/PreviewWorkspace';
 import { RecognitionOverview } from './components/RecognitionOverview';
 import { SeparationOverview } from './components/SeparationOverview';
 import { ToolNavigation } from './components/ToolNavigation';
@@ -71,8 +75,34 @@ export default function UiEditorPage({
   const [generateAfterWarning, setGenerateAfterWarning] = useState(false);
   const [generateSuccess, setGenerateSuccess] = useState<string | null>(null);
   const [returnConfirmOpen, setReturnConfirmOpen] = useState(false);
-  const [leftPanelOpen, setLeftPanelOpen] = useState(true);
-  const [rightPanelOpen, setRightPanelOpen] = useState(true);
+  const [renderMode, setRenderMode] =
+    useState<UiEditorRenderMode>('editor-overlay');
+  const [showFrame, setShowFrame] = useState(false);
+  const overview =
+    session.input.activeStep === 'structure-recognition' ? (
+      <RecognitionOverview
+        uiTrees={session.input.uiTrees}
+        onFocusStatusNode={(treeId, nodeId) => {
+          session.input.focusNode(treeId, nodeId);
+          session.input.highlightStatusField(nodeId, 'layout_status');
+        }}
+      />
+    ) : session.input.activeStep === 'asset-separation' ? (
+      <SeparationOverview
+        uiTrees={session.input.uiTrees}
+        sprites={session.input.sprites}
+        onFocusStatusNode={(treeId, nodeId) => {
+          session.input.focusNode(treeId, nodeId);
+          session.input.highlightStatusField(nodeId, 'component_status');
+        }}
+      />
+    ) : (
+      <ImportOverview
+        images={session.input.images}
+        sprites={session.input.sprites}
+        uiTrees={session.input.uiTrees}
+      />
+    );
   const saveDisabled =
     session.save.isSaving ||
     session.save.isGenerating ||
@@ -163,20 +193,41 @@ export default function UiEditorPage({
     onBack?.();
   }
 
-  return (
+  const editorContent = (
     <main className="relative flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-(--platform-body-fill) text-(--platform-text-strong)">
       {resourceId ? (
-        <header className="flex shrink-0 flex-wrap items-center justify-between gap-2 border-b border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) px-4 py-2">
-          <button
-            type="button"
-            aria-label="关闭 UI 编辑器"
-            className="rounded-lg p-1.5 hover:bg-black/4"
-            onClick={requestBack}
-          >
-            <X size={18} aria-hidden="true" />
-          </button>
+        <header className="absolute left-1/2 top-4 z-30 flex w-[min(1000px,calc(100%_-_2rem))] -translate-x-1/2 flex-wrap items-center justify-between gap-2 rounded-xl border border-(--platform-subpanel-border) [background:var(--platform-subpanel-fill)] px-4 py-2 shadow-xl backdrop-blur">
           <strong className="text-sm">{resourceLabel ?? 'UI 设计'}</strong>
           <div className="game-workbench-editor-actions">
+            <div className="flex items-center rounded-lg border border-(--platform-subpanel-border) bg-white/70 p-0.5 text-xs">
+              <button
+                type="button"
+                className={`rounded-md px-2 py-1 ${renderMode === 'editor-overlay' ? 'bg-blue-600 text-white' : 'text-(--platform-text-soft)'}`}
+                aria-pressed={renderMode === 'editor-overlay'}
+                onClick={() => setRenderMode('editor-overlay')}
+              >
+                编辑叠加
+              </button>
+              <button
+                type="button"
+                className={`rounded-md px-2 py-1 ${renderMode === 'final-preview' ? 'bg-orange-500 text-white' : 'text-(--platform-text-soft)'}`}
+                aria-pressed={renderMode === 'final-preview'}
+                onClick={() => setRenderMode('final-preview')}
+              >
+                最终预览
+              </button>
+            </div>
+            {renderMode === 'final-preview' ? (
+              <label className="inline-flex cursor-pointer select-none items-center gap-1.5 rounded-lg px-2 py-1 text-xs text-(--platform-text-soft)">
+                <input
+                  type="checkbox"
+                  checked={showFrame}
+                  onChange={(event) => setShowFrame(event.target.checked)}
+                  className="size-3 accent-orange-500"
+                />
+                <span>显示框线</span>
+              </label>
+            ) : null}
             <button
               type="button"
               className="inline-flex items-center gap-1 rounded-lg border border-(--platform-subpanel-border) px-2.5 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-40"
@@ -200,6 +251,14 @@ export default function UiEditorPage({
             {walletEntry ? (
               <div className="game-workbench-editor-wallet">{walletEntry}</div>
             ) : null}
+            <button
+              type="button"
+              className="rounded-lg border border-(--platform-subpanel-border) px-2.5 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-40"
+              disabled={session.canvas.isLocked}
+              onClick={session.canvas.openClearDialog}
+            >
+              清空
+            </button>
             <button
               type="button"
               className="rounded-lg bg-orange-600 px-3 py-1.5 text-sm font-semibold text-white disabled:opacity-60"
@@ -222,9 +281,19 @@ export default function UiEditorPage({
           </div>
         </header>
       ) : null}
+      {resourceId ? (
+        <button
+          type="button"
+          aria-label="关闭 UI 编辑器"
+          className="absolute left-4 top-4 z-40 grid size-9 place-items-center rounded-lg border border-(--platform-subpanel-border) [background:var(--platform-subpanel-fill)] shadow-[0_12px_28px_rgb(67_48_37_/_14%)]"
+          onClick={requestBack}
+        >
+          <X size={18} aria-hidden="true" />
+        </button>
+      ) : null}
       {session.save.saveError ? (
         <div
-          className="mx-4 mt-3 flex shrink-0 items-center justify-between gap-3 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-800"
+          className="relative z-20 mx-4 mt-3 flex shrink-0 items-center justify-between gap-3 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-800"
           role="alert"
         >
           <span>{session.save.saveError}</span>
@@ -232,7 +301,7 @@ export default function UiEditorPage({
       ) : null}
       {session.save.generateError ? (
         <div
-          className="mx-4 mt-3 flex shrink-0 items-center justify-between gap-3 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-800"
+          className="relative z-20 mx-4 mt-3 flex shrink-0 items-center justify-between gap-3 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-800"
           role="alert"
         >
           <span>代码生成失败：{session.save.generateError}</span>
@@ -240,75 +309,50 @@ export default function UiEditorPage({
       ) : null}
       {generateSuccess ? (
         <div
-          className="mx-4 mt-3 shrink-0 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-800"
+          className="relative z-20 mx-4 mt-3 shrink-0 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-800"
           role="status"
         >
           {generateSuccess}
         </div>
       ) : null}
       <div className="absolute inset-0 min-h-0 min-w-0 overflow-hidden">
-        <PreviewWorkspace canvas={session.canvas} />
-      </div>
-      <div className="pointer-events-none absolute inset-0 z-10">
-        <div className="pointer-events-auto absolute left-0 top-0 w-[min(24rem,24vw)] max-w-[24rem] overflow-hidden">
-          {leftPanelOpen ? <InputSidebar input={session.input} /> : null}
-          <button
-            type="button"
-            className="absolute right-1 top-1 rounded bg-(--platform-subpanel-fill)/90 px-2 py-1 text-xs"
-            onClick={() => setLeftPanelOpen((value) => !value)}
+        <PreviewWorkspace
+          canvas={session.canvas}
+          renderMode={renderMode}
+          onRenderModeChange={setRenderMode}
+          showFrame={showFrame}
+          onShowFrameChange={setShowFrame}
+        />
+        <div className="pointer-events-none absolute inset-0 z-10">
+          <div
+            className="pointer-events-auto absolute bottom-20 left-4 top-16 w-[24%] min-w-[280px] max-w-[360px] select-none overflow-hidden rounded-xl border border-(--platform-subpanel-border) [background:var(--platform-subpanel-fill)] shadow-[0_18px_44px_rgb(67_48_37_/_16%)]"
+            onDragStart={(event) => event.preventDefault()}
           >
-            {leftPanelOpen ? '收起' : '展开'}
-          </button>
-        </div>
-        <div className="pointer-events-auto absolute left-1/2 top-0 w-[min(44rem,44vw)] -translate-x-1/2">
-          <ToolNavigation
-            activeStep={session.workflow.activeStep}
-            furthestStepIndex={session.workflow.furthestStepIndex}
-            disabled={session.workflow.isBusy}
-            onChange={session.workflow.requestStepChange}
-          />
-          <WorkflowActionCard workflow={session.workflow} />
-        </div>
-        <div className="pointer-events-auto absolute right-0 top-0 w-[min(32rem,32vw)] max-w-[32rem] overflow-hidden">
-          {rightPanelOpen ? (
-            <>
-              {session.input.activeStep === 'structure-recognition' ? (
-                <RecognitionOverview
-                  uiTrees={session.input.uiTrees}
-                  onFocusStatusNode={(treeId, nodeId) => {
-                    session.input.focusNode(treeId, nodeId);
-                    session.input.highlightStatusField(nodeId, 'layout_status');
-                  }}
-                />
-              ) : session.input.activeStep === 'asset-separation' ? (
-                <SeparationOverview
-                  uiTrees={session.input.uiTrees}
-                  sprites={session.input.sprites}
-                  fonts={session.input.fonts}onFocusStatusNode={(treeId, nodeId) => {
-                    session.input.focusNode(treeId, nodeId);
-                    session.input.highlightStatusField(
-                      nodeId,
-                      'component_status',
-                    );
-                  }}
-                />
-              ) : (
-                <ImportOverview
-                  images={session.input.images}
-                  sprites={session.input.sprites}
-                  uiTrees={session.input.uiTrees}
-                />
-              )}
-              <InspectorSidebar inspector={session.inspector} />
-            </>
-          ) : null}
-          <button
-            type="button"
-            className="absolute left-1 top-1 rounded bg-(--platform-subpanel-fill)/90 px-2 py-1 text-xs"
-            onClick={() => setRightPanelOpen((value) => !value)}
-          >
-            {rightPanelOpen ? '收起' : '展开'}
-          </button>
+            <InputSidebar input={session.input} />
+          </div>
+          <div className="absolute bottom-4 left-1/2 z-20 w-[min(760px,calc(100%_-_2rem))] -translate-x-1/2">
+            <div
+              className="pointer-events-auto flex w-full select-none flex-col gap-2 overflow-hidden rounded-xl border border-(--platform-subpanel-border) [background:var(--platform-subpanel-fill)] shadow-[0_18px_44px_rgb(67_48_37_/_16%)]"
+              onDragStart={(event) => event.preventDefault()}
+            >
+              <ToolNavigation
+                activeStep={session.workflow.activeStep}
+                furthestStepIndex={session.workflow.furthestStepIndex}
+                disabled={session.workflow.isBusy}
+                onChange={session.workflow.requestStepChange}
+              />
+              <WorkflowActionCard workflow={session.workflow} />
+            </div>
+            <div
+              className="pointer-events-auto absolute bottom-0 right-full mr-3 w-64 select-none overflow-hidden rounded-xl border border-(--platform-subpanel-border) [background:var(--platform-subpanel-fill)] shadow-[0_18px_44px_rgb(67_48_37_/_16%)]"
+              onDragStart={(event) => event.preventDefault()}
+            >
+              {overview}
+            </div>
+          </div>
+          <div className="pointer-events-auto absolute bottom-20 right-4 top-16 flex w-[32%] min-w-[320px] max-w-[480px] flex-col overflow-hidden rounded-xl border border-(--platform-subpanel-border) [background:var(--platform-subpanel-fill)] shadow-[0_18px_44px_rgb(67_48_37_/_16%)]">
+            <InspectorSidebar inspector={session.inspector} />
+          </div>
         </div>
       </div>
       <EditorDialogs dialogs={session.dialogs} />
@@ -423,6 +467,19 @@ export default function UiEditorPage({
       </ThemedModal>
     </main>
   );
+
+  if (!resourceId) return editorContent;
+
+  if (typeof document === 'undefined') return editorContent;
+
+  return createPortal(
+    <div className="platform-theme platform-theme--light fixed inset-0 z-50 !bg-transparent !p-0">
+      <section className="h-full w-full rounded-none p-0 outline-none focus:outline-none">
+        {editorContent}
+      </section>
+    </div>,
+    document.body,
+  );
 }
 
 function stepLabel(step: UiEditorWorkflowProjection['activeStep'] | undefined) {