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

@@ -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 />}

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

src/components/pages/ComponentsKnowledgePage.tsx

@@ -0,0 +1,11 @@
+import { PlaceholderPage } from "./PlaceholderPage";
+
+export function ComponentsKnowledgePage() {
+  return (
+    <PlaceholderPage
+      label="资源管理"
+      title="知识库"
+      description="统一管理大语言模型、语音识别、声音资源、知识库与工具插件。"
+    />
+  );
+}

src/components/pages/ComponentsModelsPage.tsx

@@ -0,0 +1,11 @@
+import { PlaceholderPage } from "./PlaceholderPage";
+
+export function ComponentsModelsPage() {
+  return (
+    <PlaceholderPage
+      label="资源管理"
+      title="模型资源"
+      description="统一管理大语言模型、语音识别、声音资源、知识库与工具插件。"
+    />
+  );
+}

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