From 1d86cf0621c2f112698af60ab0ac5eecde15e9fd Mon Sep 17 00:00:00 2001
From: Jeff Gu <idevs@foxmail.com>
Date: Tue, 14 Apr 2026 21:38:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E5=B0=86=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E5=AF=BC=E8=88=AA=E9=A1=B9=E6=8C=89=E7=BB=84=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E4=BB=A5=E6=8F=90=E5=8D=87=E5=8F=AF=E8=AF=BB=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/layout/Sidebar.tsx | 44 ++++++++++++++++------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 608b598..c783dbc 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -20,20 +20,23 @@ import {
 import { useAuthStore } from "@/store/auth";
 import { useState } from "react";
 
+type NavGroup = "总览" | "管理" | "工具" | "系统";
+
 interface NavItem {
   title: string;
   href: string;
   icon: React.ComponentType<{ className?: string }>;
+  group: NavGroup;
 }
 
 const navItems: NavItem[] = [
-  { title: "总览看板", href: "/dashboard", icon: BarChart3 },
-  { title: "使用日志", href: "/usage-logs", icon: FileText },
-  { title: "渠道管理", href: "/channels", icon: LinkIcon },
-  { title: "令牌管理", href: "/tokens", icon: Key },
-  { title: "定价管理", href: "/pricing", icon: DollarSign },
-  { title: "系统设置", href: "/settings", icon: SlidersHorizontal },
-  { title: "API 测试", href: "/api-test", icon: TestTube2 },
+  { title: "总览看板", href: "/dashboard", icon: BarChart3, group: "总览" },
+  { title: "渠道管理", href: "/channels", icon: LinkIcon, group: "管理" },
+  { title: "令牌管理", href: "/tokens", icon: Key, group: "管理" },
+  { title: "定价管理", href: "/pricing", icon: DollarSign, group: "管理" },
+  { title: "使用日志", href: "/usage-logs", icon: FileText, group: "工具" },
+  { title: "API 测试", href: "/api-test", icon: TestTube2, group: "工具" },
+  { title: "系统设置", href: "/settings", icon: SlidersHorizontal, group: "系统" },
 ];
 
 interface SidebarProps {
@@ -111,6 +114,21 @@ export function Sidebar({
     );
   };
 
+  const groupedNavItems = (() => {
+    const groups: Record<NavGroup, NavItem[]> = {
+      总览: [],
+      管理: [],
+      工具: [],
+      系统: [],
+    };
+    navItems.forEach((item) => {
+      groups[item.group].push(item);
+    });
+    return groups;
+  })();
+
+  const groupOrder: NavGroup[] = ["总览", "管理", "工具", "系统"];
+
   return (
     <aside
       className={cn(
@@ -147,11 +165,13 @@ export function Sidebar({
 
       {/* Navigation */}
       <nav className="flex-1 px-2.5 py-3 overflow-y-auto scrollbar-thin">
-        <div className="space-y-1">
-          {navItems.map((item) => (
-            <NavLink key={item.href} item={item} />
-          ))}
-        </div>
+        {groupOrder.map((group) => (
+          <div key={group} className={cn("space-y-1", group !== groupOrder[0] && "mt-3 pt-3 border-t border-border/30")}>
+            {groupedNavItems[group].map((item) => (
+              <NavLink key={item.href} item={item} />
+            ))}
+          </div>
+        ))}
       </nav>
 
       {/* Footer */}