新增 ImportOverview 组件

新增 `ImportOverview` 组件
集成至 `InputSidebar`，展示导入资源和组件概览

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>
+  );
+}

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}