超管后台 - 菜单

Server/application/superadmin/config/route.php

@@ -2,4 +2,13 @@
 use think\facade\Route;
 
 // 超级管理员认证相关路由
-Route::post('auth/login', 'app\\superadmin\\controller\\Auth@login'); 
+Route::post('auth/login', 'app\\superadmin\\controller\\Auth@login');
+
+// 菜单管理相关路由
+Route::group('menu', function () {
+    Route::get('tree', 'app\\superadmin\\controller\\Menu@getMenuTree');
+    Route::get('list', 'app\\superadmin\\controller\\Menu@getMenuList');
+    Route::post('save', 'app\\superadmin\\controller\\Menu@saveMenu');
+    Route::delete('delete/:id', 'app\\superadmin\\controller\\Menu@deleteMenu');
+    Route::post('status', 'app\\superadmin\\controller\\Menu@updateStatus');
+}); 

Server/application/superadmin/controller/Menu.php

@@ -0,0 +1,151 @@
+<?php
+namespace app\superadmin\controller;
+
+use think\Controller;
+use app\superadmin\model\Menu as MenuModel;
+
+/**
+ * 菜单控制器
+ */
+class Menu extends Controller
+{
+    /**
+     * 获取菜单列表（树状结构）
+     * @return \think\response\Json
+     */
+    public function getMenuTree()
+    {
+        // 参数处理
+        $onlyEnabled = $this->request->param('only_enabled', 1);
+        $useCache = $this->request->param('use_cache', 1);
+        
+        // 调用模型获取菜单树
+        $menuTree = MenuModel::getMenuTree($onlyEnabled, $useCache);
+        
+        return json([
+            'code' => 200,
+            'msg' => '获取成功',
+            'data' => $menuTree
+        ]);
+    }
+    
+    /**
+     * 获取所有菜单（平铺结构，便于后台管理）
+     * @return \think\response\Json
+     */
+    public function getMenuList()
+    {
+        // 查询条件
+        $where = [];
+        $status = $this->request->param('status');
+        if ($status !== null && $status !== '') {
+            $where[] = ['status', '=', intval($status)];
+        }
+        
+        // 获取所有菜单
+        $menus = MenuModel::where($where)
+            ->order('sort', 'asc')
+            ->select();
+        
+        return json([
+            'code' => 200,
+            'msg' => '获取成功',
+            'data' => $menus
+        ]);
+    }
+    
+    /**
+     * 添加或更新菜单
+     * @return \think\response\Json
+     */
+    public function saveMenu()
+    {
+        if (!$this->request->isPost()) {
+            return json(['code' => 405, 'msg' => '请求方法不允许']);
+        }
+        
+        // 获取参数
+        $data = $this->request->post();
+        
+        // 验证参数
+        $validate = $this->validate($data, [
+            'title|菜单名称' => 'require|max:50',
+            'path|路由路径' => 'require|max:100',
+            'parent_id|父菜单ID' => 'require|number',
+            'status|状态' => 'require|in:0,1',
+            'sort|排序' => 'require|number',
+        ]);
+        
+        if ($validate !== true) {
+            return json(['code' => 400, 'msg' => $validate]);
+        }
+        
+        // 保存菜单
+        $result = MenuModel::saveMenu($data);
+        
+        if ($result) {
+            return json(['code' => 200, 'msg' => '保存成功']);
+        } else {
+            return json(['code' => 500, 'msg' => '保存失败']);
+        }
+    }
+    
+    /**
+     * 删除菜单
+     * @param int $id 菜单ID
+     * @return \think\response\Json
+     */
+    public function deleteMenu($id)
+    {
+        if (!$this->request->isDelete()) {
+            return json(['code' => 405, 'msg' => '请求方法不允许']);
+        }
+        
+        if (empty($id) || !is_numeric($id)) {
+            return json(['code' => 400, 'msg' => '参数错误']);
+        }
+        
+        $result = MenuModel::deleteMenu($id);
+        
+        if ($result) {
+            return json(['code' => 200, 'msg' => '删除成功']);
+        } else {
+            return json(['code' => 500, 'msg' => '删除失败，可能存在子菜单']);
+        }
+    }
+    
+    /**
+     * 更新菜单状态
+     * @return \think\response\Json
+     */
+    public function updateStatus()
+    {
+        if (!$this->request->isPost()) {
+            return json(['code' => 405, 'msg' => '请求方法不允许']);
+        }
+        
+        $id = $this->request->post('id');
+        $status = $this->request->post('status');
+        
+        if (empty($id) || !is_numeric($id) || !in_array($status, [0, 1])) {
+            return json(['code' => 400, 'msg' => '参数错误']);
+        }
+        
+        $menu = MenuModel::find($id);
+        if (!$menu) {
+            return json(['code' => 404, 'msg' => '菜单不存在']);
+        }
+        
+        $menu->status = $status;
+        $result = $menu->save();
+        
+        // 清除缓存
+        MenuModel::clearMenuCache();
+        
+        if ($result) {
+            return json(['code' => 200, 'msg' => '状态更新成功']);
+        } else {
+            return json(['code' => 500, 'msg' => '状态更新失败']);
+        }
+    }
+} 

Server/application/superadmin/model/Menu.php

@@ -0,0 +1,144 @@
+<?php
+namespace app\superadmin\model;
+
+use think\Model;
+use think\facade\Cache;
+
+/**
+ * 菜单模型类
+ */
+class Menu extends Model
+{
+    // 设置数据表名
+    protected $name = 'menus';
+    
+    // 设置数据表前缀
+    protected $prefix = 'tk_';
+    
+    // 设置主键
+    protected $pk = 'id';
+    
+    // 自动写入时间戳
+    protected $autoWriteTimestamp = true;
+    
+    // 定义时间戳字段名
+    protected $createTime = 'create_time';
+    protected $updateTime = 'update_time';
+    
+    /**
+     * 获取所有菜单，并组织成树状结构
+     * @param bool $onlyEnabled 是否只获取启用的菜单
+     * @param bool $useCache 是否使用缓存
+     * @return array
+     */
+    public static function getMenuTree($onlyEnabled = true, $useCache = true)
+    {
+        $cacheKey = 'superadmin_menu_tree' . ($onlyEnabled ? '_enabled' : '_all');
+        
+        // 如果使用缓存并且缓存中有数据，则直接返回缓存数据
+//        if ($useCache && Cache::has($cacheKey)) {
+//            return Cache::get($cacheKey);
+//        }
+        
+        // 查询条件
+        $where = [];
+        if ($onlyEnabled) {
+            $where[] = ['status', '=', 1];
+        }
+        
+        // 获取所有菜单
+        $allMenus = self::where($where)
+            ->order('sort', 'asc')
+            ->select()
+            ->toArray();
+        
+        // 组织成树状结构
+        $menuTree = self::buildMenuTree($allMenus);
+        
+        // 缓存结果
+        if ($useCache) {
+            Cache::set($cacheKey, $menuTree, 3600); // 缓存1小时
+        }
+        
+        return $menuTree;
+    }
+    
+    /**
+     * 构建菜单树
+     * @param array $menus 所有菜单
+     * @param int $parentId 父菜单ID
+     * @return array
+     */
+    private static function buildMenuTree($menus, $parentId = 0)
+    {
+        $tree = [];
+        
+        foreach ($menus as $menu) {
+            if ($menu['parent_id'] == $parentId) {
+                $children = self::buildMenuTree($menus, $menu['id']);
+                if (!empty($children)) {
+                    $menu['children'] = $children;
+                }
+                $tree[] = $menu;
+            }
+        }
+        
+        return $tree;
+    }
+    
+    /**
+     * 清除菜单缓存
+     */
+    public static function clearMenuCache()
+    {
+        Cache::delete('superadmin_menu_tree_enabled');
+        Cache::delete('superadmin_menu_tree_all');
+    }
+    
+    /**
+     * 添加或更新菜单
+     * @param array $data 菜单数据
+     * @return bool
+     */
+    public static function saveMenu($data)
+    {
+        if (isset($data['id']) && $data['id'] > 0) {
+            // 更新
+            $menu = self::find($data['id']);
+            if (!$menu) {
+                return false;
+            }
+            $result = $menu->save($data);
+        } else {
+            // 新增
+            $menu = new self();
+            $result = $menu->save($data);
+        }
+        
+        // 清除缓存
+        self::clearMenuCache();
+        
+        return $result !== false;
+    }
+    
+    /**
+     * 删除菜单
+     * @param int $id 菜单ID
+     * @return bool
+     */
+    public static function deleteMenu($id)
+    {
+        // 查找子菜单
+        $childCount = self::where('parent_id', $id)->count();
+        if ($childCount > 0) {
+            return false; // 有子菜单不能删除
+        }
+        
+        $result = self::destroy($id);
+        
+        // 清除缓存
+        self::clearMenuCache();
+        
+        return $result !== false;
+    }
+} 

Server/database/create_menu_table.sql

@@ -0,0 +1,35 @@
+-- 创建菜单表
+CREATE TABLE IF NOT EXISTS `tk_menus` (
+  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '菜单ID',
+  `title` varchar(50) NOT NULL COMMENT '菜单名称',
+  `path` varchar(100) NOT NULL COMMENT '路由路径',
+  `icon` varchar(50) DEFAULT NULL COMMENT '图标名称',
+  `parent_id` int(11) NOT NULL DEFAULT '0' COMMENT '父菜单ID，0表示顶级菜单',
+  `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '状态：1启用，0禁用',
+  `sort` int(11) NOT NULL DEFAULT '0' COMMENT '排序，数值越小越靠前',
+  `create_time` int(11) DEFAULT NULL COMMENT '创建时间',
+  `update_time` int(11) DEFAULT NULL COMMENT '更新时间',
+  PRIMARY KEY (`id`),
+  KEY `idx_parent_id` (`parent_id`),
+  KEY `idx_status` (`status`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='系统菜单表';
+
+-- 插入超级管理员顶级菜单
+INSERT INTO `tk_menus` (`title`, `path`, `icon`, `parent_id`, `status`, `sort`, `create_time`, `update_time`) VALUES
+('仪表盘', '/dashboard', 'LayoutDashboard', 0, 1, 10, UNIX_TIMESTAMP(), UNIX_TIMESTAMP()),
+('项目管理', '/dashboard/projects', 'FolderKanban', 0, 1, 20, UNIX_TIMESTAMP(), UNIX_TIMESTAMP()),
+('客户池', '/dashboard/customers', 'Users', 0, 1, 30, UNIX_TIMESTAMP(), UNIX_TIMESTAMP()),
+('管理员权限', '/dashboard/admins', 'Settings', 0, 1, 40, UNIX_TIMESTAMP(), UNIX_TIMESTAMP()),
+('系统设置', '/settings', 'Cog', 0, 1, 50, UNIX_TIMESTAMP(), UNIX_TIMESTAMP());
+
+-- 插入子菜单
+INSERT INTO `tk_menus` (`title`, `path`, `icon`, `parent_id`, `status`, `sort`, `create_time`, `update_time`) VALUES
+('项目列表', '/dashboard/projects', 'List', 2, 1, 21, UNIX_TIMESTAMP(), UNIX_TIMESTAMP()),
+('新建项目', '/dashboard/projects/new', 'PlusCircle', 2, 1, 22, UNIX_TIMESTAMP(), UNIX_TIMESTAMP()),
+('客户管理', '/dashboard/customers', 'Users', 3, 1, 31, UNIX_TIMESTAMP(), UNIX_TIMESTAMP()),
+('客户分析', '/dashboard/customers/analytics', 'BarChart', 3, 1, 32, UNIX_TIMESTAMP(), UNIX_TIMESTAMP()),
+('管理员列表', '/dashboard/admins', 'UserCog', 4, 1, 41, UNIX_TIMESTAMP(), UNIX_TIMESTAMP()),
+('角色管理', '/dashboard/admins/roles', 'ShieldCheck', 4, 1, 42, UNIX_TIMESTAMP(), UNIX_TIMESTAMP()),
+('权限设置', '/dashboard/admins/permissions', 'Lock', 4, 1, 43, UNIX_TIMESTAMP(), UNIX_TIMESTAMP()),
+('基本设置', '/settings/general', 'Settings', 5, 1, 51, UNIX_TIMESTAMP(), UNIX_TIMESTAMP()),
+('安全设置', '/settings/security', 'Shield', 5, 1, 52, UNIX_TIMESTAMP(), UNIX_TIMESTAMP()); 

Server/scripts/init-menu.php

@@ -0,0 +1,173 @@
+<?php
+/**
+ * 菜单表初始化脚本
+ * 执行该脚本，会创建菜单表并插入初始菜单数据
+ * 执行方式: php init-menu.php
+ */
+
+// 定义应用目录
+define('APP_PATH', __DIR__ . '/../application/');
+define('RUNTIME_PATH', __DIR__ . '/../runtime/');
+define('ROOT_PATH', __DIR__ . '/../');
+
+// 加载框架引导文件
+require __DIR__ . '/../thinkphp/base.php';
+
+// 加载环境变量
+use think\facade\Env;
+$rootPath = realpath(__DIR__ . '/../');
+Env::load($rootPath . '/.env');
+
+// 读取数据库配置
+$dbConfig = [
+    'type'     => Env::get('database.type', 'mysql'),
+    'hostname' => Env::get('database.hostname', '127.0.0.1'),
+    'database' => Env::get('database.database', 'database'),
+    'username' => Env::get('database.username', 'root'),
+    'password' => Env::get('database.password', 'root'),
+    'hostport' => Env::get('database.hostport', '3306'),
+    'charset'  => Env::get('database.charset', 'utf8mb4'),
+    'prefix'   => Env::get('database.prefix', 'tk_'),
+];
+
+// 连接数据库
+try {
+    $dsn = "{$dbConfig['type']}:host={$dbConfig['hostname']};port={$dbConfig['hostport']};dbname={$dbConfig['database']};charset={$dbConfig['charset']}";
+    $pdo = new PDO($dsn, $dbConfig['username'], $dbConfig['password']);
+    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+    echo "数据库连接成功！\n";
+} catch (PDOException $e) {
+    die("数据库连接失败: " . $e->getMessage() . "\n");
+}
+
+// 创建菜单表SQL
+$createTableSql = "
+CREATE TABLE IF NOT EXISTS `{$dbConfig['prefix']}menus` (
+  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '菜单ID',
+  `title` varchar(50) NOT NULL COMMENT '菜单名称',
+  `path` varchar(100) NOT NULL COMMENT '路由路径',
+  `icon` varchar(50) DEFAULT NULL COMMENT '图标名称',
+  `parent_id` int(11) NOT NULL DEFAULT '0' COMMENT '父菜单ID，0表示顶级菜单',
+  `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '状态：1启用，0禁用',
+  `sort` int(11) NOT NULL DEFAULT '0' COMMENT '排序，数值越小越靠前',
+  `create_time` int(11) DEFAULT NULL COMMENT '创建时间',
+  `update_time` int(11) DEFAULT NULL COMMENT '更新时间',
+  PRIMARY KEY (`id`),
+  KEY `idx_parent_id` (`parent_id`),
+  KEY `idx_status` (`status`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='系统菜单表';
+";
+
+// 执行创建表SQL
+try {
+    $pdo->exec($createTableSql);
+    echo "菜单表创建成功！\n";
+} catch (PDOException $e) {
+    echo "菜单表创建失败: " . $e->getMessage() . "\n";
+}
+
+// 检查表中是否已有数据
+$checkSql = "SELECT COUNT(*) FROM `{$dbConfig['prefix']}menus`";
+try {
+    $count = $pdo->query($checkSql)->fetchColumn();
+    if ($count > 0) {
+        echo "菜单表中已有 {$count} 条数据，跳过数据初始化\n";
+        exit(0);
+    }
+} catch (PDOException $e) {
+    echo "检查数据失败: " . $e->getMessage() . "\n";
+    exit(1);
+}
+
+// 插入顶级菜单数据
+$topMenus = [
+    ['仪表盘', '/dashboard', 'LayoutDashboard', 0, 1, 10],
+    ['项目管理', '/dashboard/projects', 'FolderKanban', 0, 1, 20],
+    ['客户池', '/dashboard/customers', 'Users', 0, 1, 30],
+    ['管理员权限', '/dashboard/admins', 'Settings', 0, 1, 40],
+    ['系统设置', '/settings', 'Cog', 0, 1, 50],
+];
+
+$insertTopMenuSql = "INSERT INTO `{$dbConfig['prefix']}menus` 
+                    (`title`, `path`, `icon`, `parent_id`, `status`, `sort`, `create_time`, `update_time`) 
+                    VALUES (?, ?, ?, ?, ?, ?, ?, ?)";
+
+$timestamp = time();
+$insertStmt = $pdo->prepare($insertTopMenuSql);
+
+$pdo->beginTransaction();
+try {
+    foreach ($topMenus as $index => $menu) {
+        $insertStmt->execute([
+            $menu[0], // title
+            $menu[1], // path
+            $menu[2], // icon
+            $menu[3], // parent_id
+            $menu[4], // status
+            $menu[5], // sort
+            $timestamp,
+            $timestamp
+        ]);
+    }
+    $pdo->commit();
+    echo "顶级菜单数据插入成功！\n";
+} catch (PDOException $e) {
+    $pdo->rollBack();
+    echo "顶级菜单数据插入失败: " . $e->getMessage() . "\n";
+    exit(1);
+}
+
+// 查询刚插入的顶级菜单ID
+$menuIds = [];
+$queryTopMenuSql = "SELECT id, title FROM `{$dbConfig['prefix']}menus` WHERE parent_id = 0";
+try {
+    $topMenusResult = $pdo->query($queryTopMenuSql)->fetchAll(PDO::FETCH_ASSOC);
+    foreach ($topMenusResult as $menu) {
+        $menuIds[$menu['title']] = $menu['id'];
+    }
+} catch (PDOException $e) {
+    echo "查询顶级菜单失败: " . $e->getMessage() . "\n";
+    exit(1);
+}
+
+// 插入子菜单数据
+$subMenus = [
+    ['项目列表', '/dashboard/projects', 'List', $menuIds['项目管理'], 1, 21],
+    ['新建项目', '/dashboard/projects/new', 'PlusCircle', $menuIds['项目管理'], 1, 22],
+    ['客户管理', '/dashboard/customers', 'Users', $menuIds['客户池'], 1, 31],
+    ['客户分析', '/dashboard/customers/analytics', 'BarChart', $menuIds['客户池'], 1, 32],
+    ['管理员列表', '/dashboard/admins', 'UserCog', $menuIds['管理员权限'], 1, 41],
+    ['角色管理', '/dashboard/admins/roles', 'ShieldCheck', $menuIds['管理员权限'], 1, 42],
+    ['权限设置', '/dashboard/admins/permissions', 'Lock', $menuIds['管理员权限'], 1, 43],
+    ['基本设置', '/settings/general', 'Settings', $menuIds['系统设置'], 1, 51],
+    ['安全设置', '/settings/security', 'Shield', $menuIds['系统设置'], 1, 52],
+];
+
+$insertSubMenuSql = "INSERT INTO `{$dbConfig['prefix']}menus` 
+                    (`title`, `path`, `icon`, `parent_id`, `status`, `sort`, `create_time`, `update_time`) 
+                    VALUES (?, ?, ?, ?, ?, ?, ?, ?)";
+
+$pdo->beginTransaction();
+try {
+    $insertStmt = $pdo->prepare($insertSubMenuSql);
+    foreach ($subMenus as $menu) {
+        $insertStmt->execute([
+            $menu[0], // title
+            $menu[1], // path
+            $menu[2], // icon
+            $menu[3], // parent_id
+            $menu[4], // status
+            $menu[5], // sort
+            $timestamp,
+            $timestamp
+        ]);
+    }
+    $pdo->commit();
+    echo "子菜单数据插入成功！\n";
+} catch (PDOException $e) {
+    $pdo->rollBack();
+    echo "子菜单数据插入失败: " . $e->getMessage() . "\n";
+    exit(1);
+}
+
+echo "菜单初始化完成！\n";

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;
+  }
+}