From fb7cfa42c7e7e889cd73fac71c98a540cfaa7ce7 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:41:18 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=20UI=20=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E8=B0=83=E8=AF=95=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将组件绑定调试按钮与状态提示移入左侧输入面板

移除右下角重复的调试浮层
---
 .../ui-editor/components/InputSidebar.tsx     | 23 ++++++-
 .../components/preview/PreviewWorkspace.tsx   | 17 ++---
 .../src/view/ui-editor/index.tsx              | 62 -------------------
 3 files changed, 26 insertions(+), 76 deletions(-)

diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/InputSidebar.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/InputSidebar.tsx
index 4d21ffd46..175f9e189 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/components/InputSidebar.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/InputSidebar.tsx
@@ -1,4 +1,4 @@
-import { Image as ImageIcon, Plus } from 'lucide-react';
+import { Image as ImageIcon, Plus, ScanSearch } from 'lucide-react';
 
 import type { UiEditorPageController } from '../useUiEditorPage';
 import { ImportOverview } from './ImportOverview';
@@ -27,6 +27,22 @@ export function InputSidebar({
   return (
     <aside className="min-h-0 overflow-y-auto border-r border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) p-3">
       <div className="mb-3 grid gap-2">
+        <button
+          type="button"
+          className="inline-flex items-center gap-1.5 rounded-lg bg-orange-500 px-3 py-2 text-left text-xs font-semibold text-white"
+          onClick={controller.checkPrerequisites}
+        >
+          <ScanSearch size={14} /> 检查前置数据
+        </button>
+        <button
+          type="button"
+          className="rounded-lg bg-emerald-600 px-3 py-2 text-left text-xs font-semibold text-white disabled:cursor-wait disabled:opacity-60"
+          onClick={() => void controller.bindComponents()}
+          disabled={controller.isBinding || controller.editor.isLocked}
+          title="调试：绑定组件"
+        >
+          {controller.isBinding ? '组件绑定中…' : '绑定组件'}
+        </button>
         <button
           type="button"
           className="rounded-lg bg-violet-600 px-3 py-2 text-left text-xs font-semibold text-white disabled:cursor-wait disabled:opacity-60"
@@ -73,6 +89,11 @@ export function InputSidebar({
             {controller.suggestionStatus}
           </p>
         ) : null}
+        {controller.bindingStatus ? (
+          <p className="m-0 rounded-lg border border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) px-3 py-2 text-xs">
+            {controller.bindingStatus}
+          </p>
+        ) : null}
       </div>
       <section className="rounded-xl border border-(--platform-subpanel-border) bg-white/35 p-3">
         <div className="flex items-center justify-between">
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 b721b1d55..34b49300d 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
@@ -12,7 +12,7 @@ import {
   CanvasWorld,
   ZoomControls,
 } from '@genarrative/image-canvas-react';
-import { Image as ImageIcon, Minus, Plus, ScanSearch } from 'lucide-react';
+import { Image as ImageIcon, Minus, Plus } from 'lucide-react';
 import {
   type PointerEvent as ReactPointerEvent,
   useCallback,
@@ -59,11 +59,7 @@ export function PreviewWorkspace({
       return null;
     }
     return { width, height };
-  }, [
-    activeImage?.pixel_size[0],
-    activeImage?.pixel_size[1],
-    activeImage?.pixels_per_unit,
-  ]);
+  }, [activeImage]);
 
   const nodeInteractions = useNodeTransformInteraction({
     activeImageId,
@@ -125,6 +121,8 @@ export function PreviewWorkspace({
   useEffect(() => {
     fitToCanvas();
     controller.clearNodeSelection();
+    // This effect intentionally follows the active image, not every controller render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeImageId, fitToCanvas]);
 
   useEffect(() => {
@@ -406,13 +404,6 @@ export function PreviewWorkspace({
         >
           清空
         </button>
-        <button
-          type="button"
-          className="inline-flex items-center gap-1.5 rounded-lg bg-orange-500 px-3 py-2 text-xs font-semibold text-white"
-          onClick={controller.checkPrerequisites}
-        >
-          <ScanSearch size={14} /> 检查前置数据
-        </button>
       </footer>
     </section>
   );
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 80fc1b5fe..483cbf4b4 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
@@ -156,68 +156,6 @@ export default function UiEditorPage({
           </button>
         </div>
       </ThemedModal>
-      <div className="fixed bottom-4 right-4 z-30 flex max-w-xs flex-col items-end gap-2">
-        {controller.suggestionStatus ? (
-          <p className="rounded-lg border border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) px-3 py-2 text-xs shadow-lg">
-            {controller.suggestionStatus}
-          </p>
-        ) : null}
-        {controller.recognitionStatus ? (
-          <p className="rounded-lg border border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) px-3 py-2 text-xs shadow-lg">
-            {controller.recognitionStatus}
-          </p>
-        ) : null}
-        {controller.mergeStatus ? (
-          <p className="rounded-lg border border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) px-3 py-2 text-xs shadow-lg">
-            {controller.mergeStatus}
-          </p>
-        ) : null}
-        {controller.bindingStatus ? (
-          <p className="rounded-lg border border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) px-3 py-2 text-xs shadow-lg">
-            {controller.bindingStatus}
-          </p>
-        ) : null}
-        <button
-          type="button"
-          className="rounded-full bg-emerald-600 px-4 py-3 text-sm font-semibold text-white shadow-lg transition hover:bg-emerald-700 disabled:cursor-wait disabled:opacity-60"
-          onClick={() => void controller.bindComponents()}
-          disabled={controller.isBinding || controller.editor.isLocked}
-          title="调试：绑定组件"
-        >
-          {controller.isBinding ? '组件绑定中…' : '绑定组件'}
-        </button>
-        <button
-          type="button"
-          className="rounded-full bg-violet-600 px-4 py-3 text-sm font-semibold text-white shadow-lg transition hover:bg-violet-700 disabled:cursor-wait disabled:opacity-60"
-          onClick={() => void controller.mergeUi()}
-          disabled={
-            controller.isMerging ||
-            controller.editor.isLocked ||
-            controller.editor.state.ui_trees.length === 0
-          }
-          title="调试：合并 UI 树"
-        >
-          {controller.isMerging ? '界面树合并中…' : '合并 UI 树'}
-        </button>
-        <button
-          type="button"
-          className="rounded-full bg-blue-600 px-4 py-3 text-sm font-semibold text-white shadow-lg transition hover:bg-blue-700 disabled:cursor-wait disabled:opacity-60"
-          onClick={() => void controller.recognizeUi()}
-          disabled={controller.isRecognizing || controller.editor.isLocked}
-          title="调试：识别 UI 结构"
-        >
-          {controller.isRecognizing ? '结构识别中…' : '识别 UI 结构'}
-        </button>
-        <button
-          type="button"
-          className="rounded-full bg-orange-500 px-4 py-3 text-sm font-semibold text-white shadow-lg transition hover:bg-orange-600 disabled:cursor-wait disabled:opacity-60"
-          onClick={() => void controller.suggestUiDesignSemantics()}
-          disabled={controller.isSuggesting || controller.editor.isLocked}
-          title="调试：识别参考图语义"
-        >
-          {controller.isSuggesting ? '识别中…' : '识别参考图语义'}
-        </button>
-      </div>
     </main>
   );
 }