细化导航栏样式

src/app/(root)/layout.tsx

@@ -3,7 +3,7 @@
 import { ReactNode, useState } from 'react'
 import { useRouter, usePathname } from 'next/navigation'
 import { logout } from '@/actions/auth'
-import { LogOutIcon } from 'lucide-react'
+import { LayoutDashboardIcon, LogOutIcon, User2Icon } from 'lucide-react'
 import Link from 'next/link'
 import { cn } from '@/lib/utils'
 import { DoorClosedIcon } from 'lucide-react'
@@ -70,14 +70,18 @@ export default function DashboardLayout({
       {/* 主要内容区域 */}
       <div className="flex-auto overflow-hidden flex">
         {/* 侧边栏 */}
-        <nav className="flex-none basis-64 border-r flex flex-col p-3 gap-2">
+        <nav className="flex-none basis-64 border-r flex flex-col p-3">
-          <NavbarItem href="/gatewayinfo" active={isActive('/gatewayinfo')}><DoorClosedIcon size={20} />网关信息</NavbarItem>
+          <NavbarTitle>路由节点</NavbarTitle>
-          <NavbarItem href="/gatewayConfig" active={isActive('/gatewayConfig')}><DoorClosedLockedIcon size={20} />网关配置</NavbarItem>
-          <NavbarItem href="/gatewayMonitor" active={isActive('/gatewayMonitor')}><DoorOpenIcon size={20} />配置总览</NavbarItem>
           <NavbarItem href="/cityNodeStats" active={isActive('/cityNodeStats')}><MapPinnedIcon size={20} />城市信息</NavbarItem>
+          <NavbarTitle>代理网关</NavbarTitle>
+          <NavbarItem href="/gatewayinfo" active={isActive('/gatewayinfo')}><DoorClosedIcon size={20} />网关列表</NavbarItem>
+          <NavbarItem href="/gatewayConfig" active={isActive('/gatewayConfig')}><DoorClosedLockedIcon size={20} />网关配置</NavbarItem>
+          <NavbarItem href="/gatewayMonitor" active={isActive('/gatewayMonitor')}><LayoutDashboardIcon size={20} />配置总览</NavbarItem>
+          <NavbarTitle>边缘节点</NavbarTitle>
+          <NavbarItem href="/edge" active={isActive('/edge')}><GitForkIcon size={20} />节点列表</NavbarItem>
           <NavbarItem href="/allocationStatus" active={isActive('/allocationStatus')}><ContainerIcon size={20} />分配状态</NavbarItem>
-          <NavbarItem href="/edge" active={isActive('/edge')}><GitForkIcon size={20} />节点信息</NavbarItem>
+          <NavbarTitle>其他</NavbarTitle>
-          <NavbarItem href="/settings" active={isActive('/settings')}><SettingsIcon size={20} />设置</NavbarItem>
+          <NavbarItem href="/settings" active={isActive('/settings')}><User2Icon size={20} />用户管理</NavbarItem>
         </nav>
 
         {/* 内容区域 */}
@@ -89,6 +93,16 @@ export default function DashboardLayout({
   )
 }
 
+function NavbarTitle(props: {
+  children: ReactNode
+}) {
+  return (
+    <h3 className="text-sm text-weak h-8 flex items-end px-2 pb-1">
+      {props.children}
+    </h3>
+  )
+}
+
 function NavbarItem(props: {
   href: string
   active: boolean

src/app/globals.css

@@ -6,6 +6,7 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-weak: var(--weak);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
   --color-sidebar-ring: var(--sidebar-ring);
@@ -45,8 +46,11 @@
 
 :root {
   --radius: 0.625rem;
+  
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
+  --weak: oklch(0.6 0 0);
+
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);