重构 UI 编辑器全屏外壳

通过 portal 将资源编辑器挂载到 body 并覆盖标题栏以下区域移除外层 FocusTrap，保留内部确认对话框的模态行为统一左右浮动面板的顶部与底部留白
2026-09-12 20:45:36 +08:00
parent ae2d59906b
commit db7f04f33f
1 changed files with 134 additions and 77 deletions
@@ -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}
-                  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) {