From 0c9216b91df5e9ba06ca9f38017cf553f3476a76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Thu, 13 Aug 2026 17:31:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20`ImportOverview`=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 `ImportOverview` 组件
集成至 `InputSidebar`，展示导入资源和组件概览
---
 .../ui-editor/components/ImportOverview.tsx   | 68 +++++++++++++++++++
 .../ui-editor/components/InputSidebar.tsx     |  7 ++
 2 files changed, 75 insertions(+)
 create mode 100644 apps/ai-game-creator-shell/src/view/ui-editor/components/ImportOverview.tsx

diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/ImportOverview.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/ImportOverview.tsx
new file mode 100644
index 000000000..1d68da7f1
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/ImportOverview.tsx
@@ -0,0 +1,68 @@
+import type { Node as UiNode } from '../../../features/ui-editor/types/Node';
+import type { SpriteAsset } from '../../../features/ui-editor/types/SpriteAsset';
+import type { UIDesignImage } from '../../../features/ui-editor/types/UIDesignImage';
+import type { UITree } from '../../../features/ui-editor/types/UITree';
+
+function countUiComponents(nodes: UiNode[]): number {
+  return nodes.reduce(
+    (total, node) => total + node.components.length + countUiComponents(node.children),
+    0,
+  );
+}
+
+export function ImportOverview({
+  images,
+  sprites,
+  uiTrees,
+}: {
+  images: Record<string, UIDesignImage>;
+  sprites: Record<string, SpriteAsset>;
+  uiTrees: UITree[];
+}) {
+  const componentCount = uiTrees.reduce(
+    (total, tree) => total + countUiComponents(tree.children),
+    0,
+  );
+
+  return (
+    <section
+      className="mt-3 rounded-xl border border-(--platform-subpanel-border) bg-white/35 p-3"
+      aria-label="导入概览"
+    >
+      <div className="flex items-center justify-between">
+        <div>
+          <span className="text-[10px] font-semibold tracking-wider text-(--platform-text-soft) uppercase">
+            Overview
+          </span>
+          <h2 className="m-0 text-sm font-semibold">导入概览</h2>
+        </div>
+      </div>
+      <div className="mt-3 grid grid-cols-3 gap-2">
+        <div className="rounded-lg border border-(--platform-subpanel-border) bg-white/45 p-2 text-center">
+          <strong className="block text-base font-semibold text-(--platform-text-strong)">
+            {Object.keys(images).length}
+          </strong>
+          <span className="block text-[10px] text-(--platform-text-soft)">
+            界面图数量
+          </span>
+        </div>
+        <div className="rounded-lg border border-(--platform-subpanel-border) bg-white/45 p-2 text-center">
+          <strong className="block text-base font-semibold text-(--platform-text-strong)">
+            {Object.keys(sprites).length}
+          </strong>
+          <span className="block text-[10px] text-(--platform-text-soft)">
+            素材数量
+          </span>
+        </div>
+        <div className="rounded-lg border border-(--platform-subpanel-border) bg-white/45 p-2 text-center">
+          <strong className="block text-base font-semibold text-(--platform-text-strong)">
+            {componentCount}
+          </strong>
+          <span className="block text-[10px] text-(--platform-text-soft)">
+            已有组件
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+}
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 a760c58b7..370756c29 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,6 +1,7 @@
 import { Image as ImageIcon, Plus } from 'lucide-react';
 
 import type { UiEditorPageController } from '../useUiEditorPage';
+import { ImportOverview } from './ImportOverview';
 import { UiTreePanel } from './UiTreePanel';
 
 export function InputSidebar({ controller }: { controller: UiEditorPageController }) {
@@ -125,6 +126,12 @@ export function InputSidebar({ controller }: { controller: UiEditorPageControlle
         </div>
       </section>
 
+      <ImportOverview
+        images={images}
+        sprites={sprites}
+        uiTrees={editor.state.ui_trees}
+      />
+
       {activeTool !== 'input' ? (
         <UiTreePanel nodes={treeForActiveImage?.children ?? null} />
       ) : null}