实现页面模板与用户管理页面基本功能

Signed-off-by: luorijun <luorijun@outlook.com>

src/app/(root)/navigation.tsx

@@ -6,6 +6,7 @@ import {
   ChevronsRight,
   ClipboardList,
   Code,
+  ComputerIcon,
   Database,
   DollarSign,
   FileText,
@@ -21,9 +22,16 @@ import {
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { createContext, type ReactNode, useContext, useState } from "react"
+import { twJoin } from "tailwind-merge"
 import { Button } from "@/components/ui/button"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 // Navigation Context
 interface NavigationContextType {
@@ -44,19 +52,19 @@ const useNavigation = () => {
   return context
 }
 
-// NavigationGroup Component
-interface NavigationGroupProps {
+// NavGroup Component
+interface NavGroupProps {
   title: string
   children: ReactNode
 }
 
-function NavigationGroup({ title, children }: NavigationGroupProps) {
+function NavGroup({ title, children }: NavGroupProps) {
   const { collapsed } = useNavigation()
 
   return (
     <div className="px-3">
       {!collapsed && (
-        <h3 className="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
+        <h3 className="px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
           {title}
         </h3>
       )}
@@ -65,40 +73,51 @@ function NavigationGroup({ title, children }: NavigationGroupProps) {
   )
 }
 
-// NavigationItem Component
-interface NavigationItemProps {
+// NavItem Component
+interface NavItemProps {
   href: string
   icon: LucideIcon
   label: string
 }
 
-function NavigationItem({ href, icon: Icon, label }: NavigationItemProps) {
+function NavItem({ href, icon: Icon, label }: NavItemProps) {
   const { collapsed, isActive } = useNavigation()
   const active = isActive(href)
 
-  return (
-    <li>
-      <Link
-        href={href}
-        className={`flex items-center px-3 py-2 rounded-md transition-colors ${
-          active
-            ? "bg-blue-50 text-blue-700"
-            : "text-gray-700 hover:bg-gray-100"
-        }`}
-      >
-        <Icon
-          className={`h-5 w-5 ${active ? "text-blue-600" : "text-gray-500"}`}
-        />
-        {!collapsed && (
-          <span className="ml-3 font-medium text-sm">{label}</span>
-        )}
-      </Link>
-    </li>
+  const linkContent = (
+    <Link
+      href={href}
+      className={`flex items-center ${
+        collapsed ? "justify-center w-10 h-10" : "px-3 py-2"
+      } rounded-md transition-colors ${
+        active
+          ? "bg-accent text-accent-foreground"
+          : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+      }`}
+    >
+      <Icon className={`h-5 w-5 ${collapsed ? "" : "flex-shrink-0"}`} />
+      {!collapsed && <span className="ml-3 font-medium text-sm">{label}</span>}
+    </Link>
   )
+
+  if (collapsed) {
+    return (
+      <li>
+        <Tooltip>
+          <TooltipTrigger asChild>{linkContent}</TooltipTrigger>
+          <TooltipContent side="right">
+            <p>{label}</p>
+          </TooltipContent>
+        </Tooltip>
+      </li>
+    )
+  }
+
+  return <li>{linkContent}</li>
 }
 
-// NavigationSeparator Component
-function NavigationSeparator() {
+// NavSeparator Component
+function NavSeparator() {
   const { collapsed } = useNavigation()
 
   if (collapsed) return null
@@ -126,128 +145,92 @@ export default function Navigation() {
   }
 
   return (
-    <NavigationContext.Provider value={contextValue}>
-      <aside
-        className={`bg-white border-r border-gray-200 transition-all duration-300 ease-in-out flex flex-col ${
-          collapsed ? "w-20" : "w-64"
-        }`}
-      >
-        {/* Logo */}
-        <div className="h-16 flex items-center px-5 border-b border-gray-200">
-          {!collapsed ? (
-            <span className="text-xl font-bold tracking-wide text-gray-800">
-              管理系统
-            </span>
-          ) : (
-            <span className="text-xl font-bold mx-auto text-gray-800">系</span>
+    <TooltipProvider delayDuration={0}>
+      <NavigationContext.Provider value={contextValue}>
+        <aside
+          className={twJoin(
+            "bg-background border-r border-border transition-all duration-300 ease-in-out flex flex-col",
+            collapsed ? "w-16" : "w-64",
           )}
-        </div>
-
-        {/* Navigation Menu */}
-        <ScrollArea className="flex-1 py-4">
-          <nav className="space-y-4">
-            {/* 概览 */}
-            <NavigationGroup title="概览">
-              <NavigationItem href="/" icon={Home} label="首页" />
-              <NavigationItem
-                href="/statistics"
-                icon={BarChart3}
-                label="数据统计"
-              />
-            </NavigationGroup>
-
-            <NavigationSeparator />
-
-            {/* IP 资源 */}
-            <NavigationGroup title="IP 资源">
-              <NavigationItem
-                href="/proxy/nodes"
-                icon={Globe}
-                label="节点列表"
-              />
-              <NavigationItem
-                href="/proxy/pools"
-                icon={Server}
-                label="IP池管理"
-              />
-              <NavigationItem
-                href="/proxy/sources"
-                icon={Database}
-                label="代理源管理"
-              />
-            </NavigationGroup>
-
-            <NavigationSeparator />
-
-            {/* 客户 */}
-            <NavigationGroup title="客户">
-              <NavigationItem href="/clients" icon={Users} label="客户管理" />
-              <NavigationItem
-                href="/packages"
-                icon={Package}
-                label="套餐管理"
-              />
-              <NavigationItem
-                href="/orders"
-                icon={ClipboardList}
-                label="订单管理"
-              />
-            </NavigationGroup>
-
-            <NavigationSeparator />
-
-            {/* 运营 */}
-            <NavigationGroup title="运营">
-              <NavigationItem
-                href="/api/management"
-                icon={Code}
-                label="API管理"
-              />
-              <NavigationItem
-                href="/traffic"
-                icon={Activity}
-                label="流量监控"
-              />
-              <NavigationItem
-                href="/billing"
-                icon={DollarSign}
-                label="计费系统"
-              />
-            </NavigationGroup>
-
-            <NavigationSeparator />
-
-            {/* 系统 */}
-            <NavigationGroup title="系统">
-              <NavigationItem
-                href="/settings"
-                icon={Settings}
-                label="系统设置"
-              />
-              <NavigationItem href="/security" icon={Shield} label="安全管理" />
-              <NavigationItem href="/logs" icon={FileText} label="系统日志" />
-            </NavigationGroup>
-          </nav>
-        </ScrollArea>
-
-        {/* Toggle Button */}
-        <div className="p-4 border-t border-gray-200 mt-auto">
-          <Button
-            variant="ghost"
-            onClick={() => setCollapsed(!collapsed)}
-            className="w-full justify-center text-gray-600 hover:bg-gray-100"
-          >
-            {collapsed ? (
-              <ChevronsRight className="h-5 w-5" />
+        >
+          {/* Logo */}
+          <div className="h-16 flex items-center justify-center border-b border-border">
+            {!collapsed ? (
+              <span className="text-xl font-bold tracking-wide text-foreground">
+                管理系统
+              </span>
             ) : (
-              <>
-                <ChevronsLeft className="h-5 w-5" />
-                <span className="ml-2 text-sm">收起菜单</span>
-              </>
+              <span className="text-xl font-bold mx-auto text-foreground">
+                <ComputerIcon />
+              </span>
             )}
-          </Button>
-        </div>
-      </aside>
-    </NavigationContext.Provider>
+          </div>
+
+          {/* Navigation Menu */}
+          <ScrollArea className="flex-1 py-3">
+            <nav className="space-y-3">
+              {/* 概览 */}
+              <NavGroup title="概览">
+                <NavItem href="/" icon={Home} label="首页" />
+                <NavItem href="/statistics" icon={BarChart3} label="数据统计" />
+              </NavGroup>
+
+              <NavSeparator />
+
+              {/* IP 资源 */}
+              <NavGroup title="IP 资源">
+                <NavItem href="/proxy/nodes" icon={Globe} label="节点列表" />
+                <NavItem href="/proxy/pools" icon={Server} label="IP池管理" />
+              </NavGroup>
+
+              <NavSeparator />
+
+              {/* 客户 */}
+              <NavGroup title="客户">
+                <NavItem href="/user" icon={Users} label="客户管理" />
+                <NavItem href="/resources" icon={Package} label="套餐管理" />
+                <NavItem href="/orders" icon={ClipboardList} label="订单管理" />
+              </NavGroup>
+
+              <NavSeparator />
+
+              {/* 运营 */}
+              <NavGroup title="运营">
+                <NavItem href="/api/management" icon={Code} label="API管理" />
+                <NavItem href="/traffic" icon={Activity} label="流量监控" />
+                <NavItem href="/billing" icon={DollarSign} label="计费系统" />
+              </NavGroup>
+
+              <NavSeparator />
+
+              {/* 系统 */}
+              <NavGroup title="系统">
+                <NavItem href="/settings" icon={Settings} label="系统设置" />
+                <NavItem href="/security" icon={Shield} label="安全管理" />
+                <NavItem href="/logs" icon={FileText} label="系统日志" />
+              </NavGroup>
+            </nav>
+          </ScrollArea>
+
+          {/* Toggle Button */}
+          <div className="p-4 border-t border-border mt-auto">
+            <Button
+              variant="ghost"
+              onClick={() => setCollapsed(!collapsed)}
+              className="w-full justify-center text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+            >
+              {collapsed ? (
+                <ChevronsRight className="h-5 w-5" />
+              ) : (
+                <>
+                  <ChevronsLeft className="h-5 w-5" />
+                  <span className="ml-2 text-sm">收起菜单</span>
+                </>
+              )}
+            </Button>
+          </div>
+        </aside>
+      </NavigationContext.Provider>
+    </TooltipProvider>
   )
 }