From d43d1180520e772e461fe8bd0021083497064bc8 Mon Sep 17 00:00:00 2001
From: yun <tianyun@popi.art>
Date: Mon, 13 Jul 2026 12:38:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=B5=84=E6=BA=90=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ResourceManagerDrawer.tsx      | 18 +++----
 .../__tests__/ResourceManagerDrawer.test.tsx  | 51 +++++++++++++++++++
 2 files changed, 60 insertions(+), 9 deletions(-)
 create mode 100644 src/components/__tests__/ResourceManagerDrawer.test.tsx

diff --git a/src/components/ResourceManagerDrawer.tsx b/src/components/ResourceManagerDrawer.tsx
index f9aedd80..ea65142b 100644
--- a/src/components/ResourceManagerDrawer.tsx
+++ b/src/components/ResourceManagerDrawer.tsx
@@ -17,7 +17,7 @@ type ResourceManagerTab = "canvas" | "assets";
 
 export function ResourceManagerDrawer({ open, onClose }: ResourceManagerDrawerProps) {
   const { t } = useI18n();
-  const [activeTab, setActiveTab] = useState<ResourceManagerTab>("canvas");
+  const [activeTab, setActiveTab] = useState<ResourceManagerTab>("assets");
 
   const tabButtonClass = (tab: ResourceManagerTab) => [
     "flex h-8 items-center gap-1.5 rounded-lg px-3 text-sm font-semibold transition-colors",
@@ -66,14 +66,6 @@ export function ResourceManagerDrawer({ open, onClose }: ResourceManagerDrawerPr
 
         <div className="px-4 pt-3">
           <div className="flex items-center gap-1">
-            <button
-              type="button"
-              className={tabButtonClass("canvas")}
-              onClick={() => setActiveTab("canvas")}
-            >
-              <NodeIndexOutlined className="text-[14px]" />
-              <span>{t("resourceManager.tabCanvas")}</span>
-            </button>
             <button
               type="button"
               className={tabButtonClass("assets")}
@@ -82,6 +74,14 @@ export function ResourceManagerDrawer({ open, onClose }: ResourceManagerDrawerPr
               <FolderOpenOutlined className="text-[14px]" />
               <span>{t("resourceManager.tabAssets")}</span>
             </button>
+            <button
+              type="button"
+              className={tabButtonClass("canvas")}
+              onClick={() => setActiveTab("canvas")}
+            >
+              <NodeIndexOutlined className="text-[14px]" />
+              <span>{t("resourceManager.tabCanvas")}</span>
+            </button>
           </div>
         </div>
 
diff --git a/src/components/__tests__/ResourceManagerDrawer.test.tsx b/src/components/__tests__/ResourceManagerDrawer.test.tsx
new file mode 100644
index 00000000..cc168ba0
--- /dev/null
+++ b/src/components/__tests__/ResourceManagerDrawer.test.tsx
@@ -0,0 +1,51 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+
+import { ResourceManagerDrawer } from "@/components/ResourceManagerDrawer";
+
+const translations: Record<string, string> = {
+  "common.close": "Close",
+  "resourceManager.title": "Resource Manager",
+  "resourceManager.tabCanvas": "Canvas",
+  "resourceManager.tabAssets": "Assets",
+};
+
+vi.mock("@/i18n", () => ({
+  useI18n: () => ({
+    t: (key: string) => translations[key] ?? key,
+  }),
+}));
+
+vi.mock("@/components/AssetLibraryDrawer", () => ({
+  AssetLibraryPanel: ({ active }: { active?: boolean }) => (
+    <div data-active={String(active)} data-testid="asset-library-panel">
+      Asset Library Panel
+    </div>
+  ),
+}));
+
+vi.mock("@/components/CanvasOutlineDrawer", () => ({
+  CanvasOutlinePanel: () => <div data-testid="canvas-outline-panel">Canvas Outline Panel</div>,
+}));
+
+describe("ResourceManagerDrawer", () => {
+  it("shows assets first and selects assets by default", () => {
+    render(<ResourceManagerDrawer open onClose={vi.fn()} />);
+
+    const buttons = screen.getAllByRole("button");
+    const tabButtons = buttons.filter((button) => ["Assets", "Canvas"].includes(button.textContent ?? ""));
+
+    expect(tabButtons.map((button) => button.textContent)).toEqual(["Assets", "Canvas"]);
+    expect(screen.getByTestId("asset-library-panel")).toHaveAttribute("data-active", "true");
+    expect(screen.queryByTestId("canvas-outline-panel")).not.toBeInTheDocument();
+  });
+
+  it("switches to the canvas panel when the canvas tab is clicked", () => {
+    render(<ResourceManagerDrawer open onClose={vi.fn()} />);
+
+    fireEvent.click(within(screen.getByText("Canvas").closest("button")!).getByText("Canvas"));
+
+    expect(screen.getByTestId("canvas-outline-panel")).toBeInTheDocument();
+    expect(screen.queryByTestId("asset-library-panel")).not.toBeInTheDocument();
+  });
+});