diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx
index f4bd82d..40d46e2 100644
--- a/src/components/layout/AppShell.tsx
+++ b/src/components/layout/AppShell.tsx
@@ -7,7 +7,9 @@ import { Topbar } from "./Topbar";
 import { HomePage } from "@/components/pages/HomePage";
 import { AssistantPage } from "@/components/pages/AssistantPage";
 import { AssistantWorkflowPage } from "@/components/pages/AssistantWorkflowPage";
-import { ComponentsPage } from "@/components/pages/ComponentsPage";
+import { ComponentsModelsPage } from "@/components/pages/ComponentsModelsPage";
+import { ComponentsKnowledgePage } from "@/components/pages/ComponentsKnowledgePage";
+import { ComponentsToolsPage } from "@/components/pages/ComponentsToolsPage";
 import { HistoryPage } from "@/components/pages/HistoryPage";
 import { TestPage } from "@/components/pages/TestPage";
 import { WorkflowPage } from "@/components/pages/WorkflowPage";
@@ -17,12 +19,15 @@ export type NavKey =
   | "home"
   | "assistant-prompt"
   | "assistant-workflow"
-  | "components"
+  | "components-models"
+  | "components-knowledge"
+  | "components-tools"
   | "history"
   | "test"
   | "workflow"
   | "profile";
 
+
 export function AppShell() {
   const [active, setActive] = useState<NavKey>("home");
   const [collapsed, setCollapsed] = useState(false);
@@ -45,7 +50,9 @@ export function AppShell() {
           {active === "assistant-prompt" && <AssistantPage />}
           {active === "assistant-workflow" && <AssistantWorkflowPage />}
 
-          {active === "components" && <ComponentsPage />}
+          {active === "components-models" && <ComponentsModelsPage />}
+          {active === "components-knowledge" && <ComponentsKnowledgePage />}
+          {active === "components-tools" && <ComponentsToolsPage />}
           {active === "history" && <HistoryPage />}
           {active === "test" && <TestPage />}
           {active === "workflow" && <WorkflowPage />}
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index b58d24f..b09cd0a 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -3,9 +3,12 @@
 import {
   Bot,
   Boxes,
+  Brain,
   ChevronLeft,
   ChevronRight,
   Clock3,
+  Database,
+  Wrench,
   FileText,
   Home,
   PlayCircle,
@@ -27,10 +30,8 @@ const mainItems: Array<{
   icon: React.ComponentType<{ size?: number }>;
 }> = [
   { key: "home", label: "控制台", icon: Home },
-  { key: "components", label: "组件库", icon: Boxes },
   { key: "history", label: "历史记录", icon: Clock3 },
   { key: "test", label: "测试助手", icon: PlayCircle },
-  { key: "workflow", label: "工作流", icon: Workflow },
 ];
 
 const assistantSubItems: Array<{
@@ -42,6 +43,16 @@ const assistantSubItems: Array<{
   { key: "assistant-workflow", label: "工作流模式", icon: Workflow },
 ];
 
+const componentSubItems: Array<{
+  key: NavKey;
+  label: string;
+  icon: React.ComponentType<{ size?: number }>;
+}> = [
+  { key: "components-models", label: "模型资源", icon: Brain },
+  { key: "components-knowledge", label: "知识库", icon: Database },
+  { key: "components-tools", label: "工具资源", icon: Wrench },
+];
+
 export function Sidebar({
   active,
   collapsed,
@@ -51,6 +62,9 @@ export function Sidebar({
   const assistantActive =
     active === "assistant-prompt" || active === "assistant-workflow";
 
+  const componentActive =
+    active === "components-models" || active === "components-knowledge" || active === "components-tools";
+
   return (
     <aside
       className={[
@@ -134,6 +148,47 @@ export function Sidebar({
             </div>
           </div>
 
+          <div className="pt-2">
+            {collapsed ? (
+              <div
+                className="flex h-8 items-center justify-center"
+                aria-hidden="true"
+                title="组件库"
+              >
+                <span className="h-px w-6 rounded-full bg-hairline-strong" />
+              </div>
+            ) : (
+              <div
+                className={[
+                  "flex h-11 w-full items-center gap-3 rounded-full px-3 text-sm",
+                  componentActive ? "text-foreground" : "text-muted-foreground",
+                ].join(" ")}
+              >
+                <Boxes size={18} />
+                <span className="font-medium">组件库</span>
+              </div>
+            )}
+
+            <div
+              className={[
+                "mt-1 space-y-1 transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+                collapsed ? "pl-0" : "pl-5",
+              ].join(" ")}
+            >
+              {componentSubItems.map((item) => (
+                <NavButton
+                  key={item.key}
+                  active={active === item.key}
+                  collapsed={collapsed}
+                  icon={item.icon}
+                  label={item.label}
+                  onClick={() => onNavigate(item.key)}
+                  small
+                />
+              ))}
+            </div>
+          </div>
+
           <div className="pt-2">
             {mainItems.slice(1).map((item) => (
               <NavButton
diff --git a/src/components/pages/ComponentsKnowledgePage.tsx b/src/components/pages/ComponentsKnowledgePage.tsx
new file mode 100644
index 0000000..d3c6408
--- /dev/null
+++ b/src/components/pages/ComponentsKnowledgePage.tsx
@@ -0,0 +1,11 @@
+import { PlaceholderPage } from "./PlaceholderPage";
+
+export function ComponentsKnowledgePage() {
+  return (
+    <PlaceholderPage
+      label="资源管理"
+      title="知识库"
+      description="统一管理大语言模型、语音识别、声音资源、知识库与工具插件。"
+    />
+  );
+}
diff --git a/src/components/pages/ComponentsModelsPage.tsx b/src/components/pages/ComponentsModelsPage.tsx
new file mode 100644
index 0000000..d4561a1
--- /dev/null
+++ b/src/components/pages/ComponentsModelsPage.tsx
@@ -0,0 +1,11 @@
+import { PlaceholderPage } from "./PlaceholderPage";
+
+export function ComponentsModelsPage() {
+  return (
+    <PlaceholderPage
+      label="资源管理"
+      title="模型资源"
+      description="统一管理大语言模型、语音识别、声音资源、知识库与工具插件。"
+    />
+  );
+}
diff --git a/src/components/pages/ComponentsPage.tsx b/src/components/pages/ComponentsToolsPage.tsx
similarity index 77%
rename from src/components/pages/ComponentsPage.tsx
rename to src/components/pages/ComponentsToolsPage.tsx
index dfa2be1..44dd6cb 100644
--- a/src/components/pages/ComponentsPage.tsx
+++ b/src/components/pages/ComponentsToolsPage.tsx
@@ -1,10 +1,10 @@
 import { PlaceholderPage } from "./PlaceholderPage";
 
-export function ComponentsPage() {
+export function ComponentsToolsPage() {
   return (
     <PlaceholderPage
       label="资源管理"
-      title="组件库"
+      title="工具资源"
       description="统一管理大语言模型、语音识别、声音资源、知识库与工具插件。"
     />
   );