From 64706b61d5146a5bbed2e3b371b936506203e3da Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Fri, 5 Jun 2026 16:30:05 +0800
Subject: [PATCH] Enhance AppShell and Sidebar components with new navigation
 for components

Updated the AppShell component to include new pages for models, knowledge, and tools under the components section. Refactored the Sidebar to introduce a dedicated section for these components, improving navigation structure and user experience. Added new placeholder pages for ComponentsModelsPage, ComponentsKnowledgePage, and ComponentsToolsPage, each with relevant titles and descriptions.
---
 src/components/layout/AppShell.tsx            | 13 +++-
 src/components/layout/Sidebar.tsx             | 59 ++++++++++++++++++-
 .../pages/ComponentsKnowledgePage.tsx         | 11 ++++
 src/components/pages/ComponentsModelsPage.tsx | 11 ++++
 ...onentsPage.tsx => ComponentsToolsPage.tsx} |  4 +-
 5 files changed, 91 insertions(+), 7 deletions(-)
 create mode 100644 src/components/pages/ComponentsKnowledgePage.tsx
 create mode 100644 src/components/pages/ComponentsModelsPage.tsx
 rename src/components/pages/{ComponentsPage.tsx => ComponentsToolsPage.tsx} (77%)

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="统一管理大语言模型、语音识别、声音资源、知识库与工具插件。"
     />
   );