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