超管后台 - 菜单

SuperAdmin/app/dashboard/layout.tsx

@@ -1,12 +1,11 @@
 "use client"
 
 import type React from "react"
-
 import { useState } from "react"
-import Link from "next/link"
-import { usePathname } from "next/navigation"
 import { Button } from "@/components/ui/button"
-import { LayoutDashboard, Users, Settings, LogOut, Menu, X } from "lucide-react"
+import { Menu, X, LogOut } from "lucide-react"
+import { Sidebar } from "@/components/layout/sidebar"
+import { Header } from "@/components/layout/header"
 
 export default function DashboardLayout({
   children,
@@ -14,25 +13,6 @@ export default function DashboardLayout({
   children: React.ReactNode
 }) {
   const [sidebarOpen, setSidebarOpen] = useState(true)
-  const pathname = usePathname()
-
-  const navItems = [
-    {
-      title: "项目管理",
-      href: "/dashboard/projects",
-      icon: <LayoutDashboard className="h-5 w-5" />,
-    },
-    {
-      title: "客户池",
-      href: "/dashboard/customers",
-      icon: <Users className="h-5 w-5" />,
-    },
-    {
-      title: "管理员权限",
-      href: "/dashboard/admins",
-      icon: <Settings className="h-5 w-5" />,
-    },
-  ]
 
   return (
     <div className="flex h-screen overflow-hidden">
@@ -45,55 +25,17 @@ export default function DashboardLayout({
 
       {/* Sidebar */}
       <div
-        className={`bg-primary text-primary-foreground w-64 flex-shrink-0 transition-all duration-300 ease-in-out ${
+        className={`bg-background border-r w-64 flex-shrink-0 transition-all duration-300 ease-in-out ${
           sidebarOpen ? "translate-x-0" : "-translate-x-full"
         } md:translate-x-0 fixed md:relative z-40 h-full`}
       >
-        <div className="flex flex-col h-full">
-          <div className="flex items-center justify-center h-16 border-b border-primary/10">
-            <h1 className="text-xl font-bold">超级管理员后台</h1>
-          </div>
-          <nav className="flex-1 overflow-y-auto py-4">
-            <ul className="space-y-1 px-2">
-              {navItems.map((item) => (
-                <li key={item.href}>
-                  <Link
-                    href={item.href}
-                    className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors hover:bg-primary-foreground hover:text-primary ${
-                      pathname.startsWith(item.href) ? "bg-primary-foreground text-primary" : ""
-                    }`}
-                  >
-                    {item.icon}
-                    {item.title}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </nav>
-          <div className="border-t border-primary/10 p-4">
-            <Button
-              variant="outline"
-              className="w-full justify-start gap-2 bg-transparent text-primary-foreground hover:bg-primary-foreground hover:text-primary"
-              onClick={() => {
-                // Handle logout
-                window.location.href = "/login"
-              }}
-            >
-              <LogOut className="h-5 w-5" />
-              退出登录
-            </Button>
-          </div>
-        </div>
+        <Sidebar />
       </div>
 
       {/* Main content */}
-      <div className="flex-1 overflow-y-auto">
-        <header className="h-16 border-b flex items-center px-6 bg-background">
-          <h2 className="text-lg font-medium">
-            {navItems.find((item) => pathname.startsWith(item.href))?.title || "仪表盘"}
-          </h2>
-        </header>
-        <main className="p-6">{children}</main>
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-y-auto p-6">{children}</main>
       </div>
     </div>
   )

SuperAdmin/components/layout/header.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { LogOut, Settings, User } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+interface AdminInfo {
+  id: number;
+  name: string;
+  account: string;
+}
+
+export function Header() {
+  const [adminInfo, setAdminInfo] = useState<AdminInfo | null>(null)
+
+  useEffect(() => {
+    // 从本地存储获取管理员信息
+    const info = localStorage.getItem("admin_info")
+    if (info) {
+      try {
+        setAdminInfo(JSON.parse(info))
+      } catch (e) {
+        console.error("解析管理员信息失败", e)
+      }
+    }
+  }, [])
+
+  const handleLogout = () => {
+    localStorage.removeItem("admin_token")
+    localStorage.removeItem("admin_info")
+    window.location.href = "/login"
+  }
+
+  return (
+    <header className="h-16 border-b px-6 flex items-center justify-between bg-background">
+      <div className="flex-1"></div>
+
+      <div className="flex items-center gap-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-9 w-9 rounded-full p-0 relative">
+              <span className="sr-only">用户菜单</span>
+              <User className="h-5 w-5" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <div className="px-2 py-1.5 text-sm font-medium">
+              {adminInfo?.name || "管理员"}
+            </div>
+            <div className="px-2 py-1.5 text-xs text-muted-foreground">
+              {adminInfo?.account || ""}
+            </div>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem asChild>
+              <a href="/settings" className="cursor-pointer flex items-center">
+                <Settings className="mr-2 h-4 w-4" />
+                设置
+              </a>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={handleLogout} className="cursor-pointer text-red-600">
+              <LogOut className="mr-2 h-4 w-4" />
+              退出登录
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  )
+} 

SuperAdmin/components/layout/sidebar.tsx

@@ -0,0 +1,186 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { getMenus, type MenuItem } from "@/lib/menu-api"
+import * as LucideIcons from "lucide-react"
+import { ChevronDown, ChevronRight } from "lucide-react"
+
+export function Sidebar() {
+  const pathname = usePathname()
+  const [menus, setMenus] = useState<MenuItem[]>([])
+  const [loading, setLoading] = useState(true)
+  // 使用Set来存储已展开的菜单ID
+  const [expandedMenus, setExpandedMenus] = useState<Set<number>>(new Set())
+
+  useEffect(() => {
+    const fetchMenus = async () => {
+      setLoading(true)
+      try {
+        const data = await getMenus()
+        setMenus(data || [])
+        
+        // 自动展开当前活动菜单的父菜单
+        autoExpandActiveMenuParent(data || []);
+      } catch (error) {
+        console.error("获取菜单失败:", error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchMenus()
+  }, [])
+
+  // 自动展开当前活动菜单的父菜单
+  const autoExpandActiveMenuParent = (menuItems: MenuItem[]) => {
+    const newExpandedMenus = new Set<number>();
+    
+    // 递归查找当前路径匹配的菜单项
+    const findActiveMenu = (items: MenuItem[], parentIds: number[] = []) => {
+      for (const item of items) {
+        const currentPath = pathname === "/" ? "/dashboard" : pathname;
+        const itemPath = item.path;
+        
+        if (currentPath === itemPath || currentPath.startsWith(itemPath + "/")) {
+          // 将所有父菜单ID添加到展开集合
+          parentIds.forEach(id => newExpandedMenus.add(id));
+          return true;
+        }
+        
+        if (item.children && item.children.length > 0) {
+          const found = findActiveMenu(item.children, [...parentIds, item.id]);
+          if (found) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+    
+    findActiveMenu(menuItems);
+    setExpandedMenus(newExpandedMenus);
+  };
+
+  // 切换菜单展开状态
+  const toggleMenu = (menuId: number) => {
+    setExpandedMenus(prev => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(menuId)) {
+        newExpanded.delete(menuId);
+      } else {
+        newExpanded.add(menuId);
+      }
+      return newExpanded;
+    });
+  };
+
+  // 获取Lucide图标组件
+  const getLucideIcon = (iconName: string) => {
+    if (!iconName) return null;
+    const Icon = (LucideIcons as any)[iconName];
+    return Icon ? <Icon className="h-4 w-4 mr-2" /> : null;
+  };
+
+  // 递归渲染菜单项
+  const renderMenuItem = (item: MenuItem) => {
+    const hasChildren = item.children && item.children.length > 0;
+    const isExpanded = expandedMenus.has(item.id);
+    const isActive = pathname === item.path;
+    const isChildActive = hasChildren && item.children!.some(child => 
+      pathname === child.path || pathname.startsWith(child.path + "/")
+    );
+
+    return (
+      <li key={item.id}>
+        {hasChildren ? (
+          <div className="flex flex-col">
+            <button
+              onClick={() => toggleMenu(item.id)}
+              className={`flex items-center justify-between px-4 py-2 rounded-md text-sm w-full text-left ${
+                isActive || isChildActive
+                  ? "bg-primary text-primary-foreground"
+                  : "hover:bg-accent hover:text-accent-foreground"
+              }`}
+            >
+              <div className="flex items-center">
+                {item.icon && getLucideIcon(item.icon)}
+                {item.title}
+              </div>
+              {isExpanded ? (
+                <ChevronDown className="h-4 w-4" />
+              ) : (
+                <ChevronRight className="h-4 w-4" />
+              )}
+            </button>
+            
+            {isExpanded && hasChildren && (
+              <ul className="ml-4 mt-1 space-y-1">
+                {item.children!.map(child => {
+                  const isChildItemActive = pathname === child.path;
+                  return (
+                    <li key={child.id}>
+                      <Link
+                        href={child.path}
+                        className={`flex items-center px-4 py-2 rounded-md text-sm ${
+                          isChildItemActive
+                            ? "text-primary font-medium"
+                            : "hover:bg-accent hover:text-accent-foreground"
+                        }`}
+                      >
+                        {child.icon && getLucideIcon(child.icon)}
+                        {child.title}
+                      </Link>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+        ) : (
+          <Link
+            href={item.path}
+            className={`flex items-center px-4 py-2 rounded-md text-sm ${
+              isActive
+                ? "bg-primary text-primary-foreground"
+                : "hover:bg-accent hover:text-accent-foreground"
+            }`}
+          >
+            {item.icon && getLucideIcon(item.icon)}
+            {item.title}
+          </Link>
+        )}
+      </li>
+    );
+  };
+
+  return (
+    <div className="w-64 border-r bg-background h-full flex flex-col">
+      <div className="p-4 border-b">
+        <h2 className="text-lg font-bold">超级管理员</h2>
+      </div>
+
+      <nav className="flex-1 overflow-auto p-2">
+        {loading ? (
+          // 加载状态
+          <div className="space-y-2">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <div key={i} className="h-10 rounded animate-pulse bg-gray-200"></div>
+            ))}
+          </div>
+        ) : menus.length > 0 ? (
+          // 菜单项
+          <ul className="space-y-1">
+            {menus.map(renderMenuItem)}
+          </ul>
+        ) : (
+          // 无菜单数据
+          <div className="text-center py-8 text-gray-500">
+            <p>暂无菜单数据</p>
+          </div>
+        )}
+      </nav>
+    </div>
+  );
+} 

SuperAdmin/lib/menu-api.ts

@@ -0,0 +1,154 @@
+/**
+ * 菜单项接口
+ */
+export interface MenuItem {
+  id: number;
+  title: string;
+  path: string;
+  icon?: string;
+  parent_id: number;
+  status: number;
+  sort: number;
+  children?: MenuItem[];
+}
+
+/**
+ * 从服务器获取菜单数据
+ * @param onlyEnabled 是否只获取启用的菜单
+ * @returns Promise<MenuItem[]>
+ */
+export async function getMenus(onlyEnabled: boolean = true): Promise<MenuItem[]> {
+  try {
+    // API基础路径从环境变量获取
+    const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000';
+    
+    // 构建API URL
+    const url = `${apiBaseUrl}/menu/tree?only_enabled=${onlyEnabled ? 1 : 0}`;
+    
+    // 获取存储的token
+    const token = typeof window !== 'undefined' ? localStorage.getItem('admin_token') : null;
+    
+    // 发起请求
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': token ? `Bearer ${token}` : ''
+      },
+      credentials: 'include'
+    });
+    
+    // 处理响应
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    const result = await response.json();
+    
+    if (result.code === 200) {
+      return result.data;
+    } else {
+      console.error('获取菜单失败:', result.msg);
+      return [];
+    }
+  } catch (error) {
+    console.error('获取菜单出错:', error);
+    return [];
+  }
+}
+
+/**
+ * 保存菜单
+ * @param menuData 菜单数据
+ * @returns Promise<boolean>
+ */
+export async function saveMenu(menuData: Partial<MenuItem>): Promise<boolean> {
+  try {
+    const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000';
+    const url = `${apiBaseUrl}/menu/save`;
+    const token = typeof window !== 'undefined' ? localStorage.getItem('admin_token') : null;
+    
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': token ? `Bearer ${token}` : ''
+      },
+      body: JSON.stringify(menuData)
+    });
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    const result = await response.json();
+    return result.code === 200;
+  } catch (error) {
+    console.error('保存菜单出错:', error);
+    return false;
+  }
+}
+
+/**
+ * 删除菜单
+ * @param id 菜单ID
+ * @returns Promise<boolean>
+ */
+export async function deleteMenu(id: number): Promise<boolean> {
+  try {
+    const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000';
+    const url = `${apiBaseUrl}/menu/delete/${id}`;
+    const token = typeof window !== 'undefined' ? localStorage.getItem('admin_token') : null;
+    
+    const response = await fetch(url, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': token ? `Bearer ${token}` : ''
+      }
+    });
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    const result = await response.json();
+    return result.code === 200;
+  } catch (error) {
+    console.error('删除菜单出错:', error);
+    return false;
+  }
+}
+
+/**
+ * 更新菜单状态
+ * @param id 菜单ID
+ * @param status 状态 (0-禁用, 1-启用)
+ * @returns Promise<boolean>
+ */
+export async function updateMenuStatus(id: number, status: 0 | 1): Promise<boolean> {
+  try {
+    const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000';
+    const url = `${apiBaseUrl}/menu/status`;
+    const token = typeof window !== 'undefined' ? localStorage.getItem('admin_token') : null;
+    
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': token ? `Bearer ${token}` : ''
+      },
+      body: JSON.stringify({ id, status })
+    });
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    const result = await response.json();
+    return result.code === 200;
+  } catch (error) {
+    console.error('更新菜单状态出错:', error);
+    return false;
+  }
+}