d8d-admin-mobile-starter-public/client/admin/menu.tsx

import React from 'react';
import { useNavigate } from 'react-router';
import type { MenuProps } from 'antd';
import {
  UserOutlined,
  DashboardOutlined,
  TeamOutlined,
  SettingOutlined,
  FileOutlined,
  MessageOutlined,
  InfoCircleOutlined,
  BarChartOutlined,
  EnvironmentOutlined,
  MoonOutlined,
  SunOutlined,
  CalendarOutlined,
  DatabaseOutlined,
  PieChartOutlined,
  MonitorOutlined
} from '@ant-design/icons';
import { useTheme } from './hooks_sys.tsx';

export interface MenuItem {
  key: string;
  label: string;
  icon?: React.ReactNode;
  children?: MenuItem[];
  path?: string;
  permission?: string;
}

/**
 * 菜单搜索 Hook
 * 封装菜单搜索相关逻辑
 */
export const useMenuSearch = (menuItems: MenuItem[]) => {
  const [searchText, setSearchText] = React.useState('');

  // 过滤菜单项
  const filteredMenuItems = React.useMemo(() => {
    if (!searchText) return menuItems;
    
    const filterItems = (items: MenuItem[]): MenuItem[] => {
      return items
        .map(item => {
          // 克隆对象避免修改原数据
          const newItem = { ...item };
          if (newItem.children) {
            newItem.children = filterItems(newItem.children);
          }
          return newItem;
        })
        .filter(item => {
          // 保留匹配项或其子项匹配的项
          const match = item.label.toLowerCase().includes(searchText.toLowerCase());
          if (match) return true;
          if (item.children?.length) return true;
          return false;
        });
    };
    
    return filterItems(menuItems);
  }, [menuItems, searchText]);

  // 清除搜索
  const clearSearch = () => {
    setSearchText('');
  };

  return {
    searchText,
    setSearchText,
    filteredMenuItems,
    clearSearch
  };
};

export const useMenu = () => {
  const { isDark, toggleTheme } = useTheme();
  const navigate = useNavigate();
  const [collapsed, setCollapsed] = React.useState(false);
  const [openKeys, setOpenKeys] = React.useState<string[]>([]);

  // 基础菜单项配置
  const menuItems: MenuItem[] = [
    {
      key: 'dashboard',
      label: '控制台',
      icon: <DashboardOutlined />,
      path: '/admin/dashboard'
    },
    {
      key: 'monitor',
      icon: <DatabaseOutlined />,
      label: '监控管理',
      children: [
        {
          key: 'device-monitor',
          label: '设备实时监控',
          path: '/admin/device-monitor',
        },
        {
          key: 'temperature-humidity',
          label: '温湿度监控',
          path: '/admin/temperature-humidity',
        },
        {
          key: 'smoke-water',
          label: '烟感及水浸监控',
          path: '/admin/smoke-water',
        },
        {
          key: 'device-map',
          label: '设备地图监控',
          path: '/admin/device-map',
        },
        {
          key: 'alert-records',
          label: '告警记录',
          path: '/admin/alert-records',
        },
        {
          key: 'alert-handle-logs',
          label: '告警处理记录',
          path: '/admin/alert-handle-logs',
        },
        {
          key: 'alert-notify-configs',
          label: '告警通知配置',
          path: '/admin/alert-notify-configs',
        },
        {
          key: 'device-alert-rules',
          label: '设备告警规则',
          path: '/admin/device-alert-rules',
        },
      ],
    },
    {
      key: 'zichan',
      icon: <CalendarOutlined />,
      label: '资产管理',
      children: [
        {
          key: 'zichan-categorys',
          label: '资产分类',
          path: '/admin/zichan-categorys'
        },
        {
          key: 'zichan-areas',
          label: '资产区域',
          path: '/admin/zichan-areas',
        },
        {
          key: 'zichan-info',
          label: '资产信息',
          path: '/admin/zichan',
        },
        {
          key: 'zichan-transfer',
          label: '资产流转',
          path: '/admin/zichan-transfer',
        },
      ],
    },
    {
      key: 'device',
      icon: <SettingOutlined />,
      label: '设备管理',
      children: [
        {
          key: 'device-types',
          label: '设备类型',
          path: '/admin/device-types',
        },
        {
          key: 'device-instances',
          label: '设备实例',
          path: '/admin/device-instances',
        },
        {
          key: 'modbus-rtu-devices',
          label: 'Modbus RTU设备',
          path: '/admin/modbus-rtu-devices',
        },
        {
          key: "greenhouse-protocol",
          label: "温室协议设置",
          path: "/admin/greenhouse-protocol"
        },
        {
          key: 'racks',
          label: '机柜管理',
          path: '/admin/racks',
        },
        {
          key: 'rack-server-types',
          label: '机柜服务器类型',
          path: '/admin/rack-server-types',
        },
        {
          key: 'rack-servers',
          label: '机柜服务器',
          path: '/admin/rack-servers',
        },
      ],
    },
    {
      key: "work-orders",
      label: "工单管理",
      icon: <MonitorOutlined />,
      path: "/admin/work-orders"
    },
    {
      key: 'inspection',
      label: '巡检管理',
      icon: <MonitorOutlined />,
      path: '/admin/inspections'
    },
    {
      key: 'analysis',
      icon: <PieChartOutlined />,
      label: '分析报表',
      children: [
        {
          key: 'analysis-alert-trend',
          label: '告警趋势图',
          path: '/admin/analysis/alert-trend',
        },
        {
          key: 'analysis-asset-category',
          label: '资产分类统计图',
          path: '/admin/analysis/asset-category',
        },
        {
          key: 'analysis-online-devices',
          label: '设备在线统计图',
          path: '/admin/analysis/online-devices',
        },
        {
          key: 'analysis-asset-transfer',
          label: '资产流转统计图',
          path: '/admin/analysis/asset-transfer',
        },
      ],
    },
    {
      key: 'users',
      label: '用户管理',
      icon: <TeamOutlined />,
      path: '/admin/users',
      permission: 'user:manage'
    },
    {
      key: 'settings',
      label: '系统设置',
      icon: <SettingOutlined />,
      children: [
        {
          key: 'theme-settings',
          label: '主题设置',
          path: '/admin/theme-settings',
          permission: 'system:settings'
        },
        {
          key: 'system-settings',
          label: '系统配置',
          path: '/admin/settings',
          permission: 'system:settings'
        }
      ]
    },
    {
      key: 'content',
      label: '内容管理',
      icon: <FileOutlined />,
      children: [
        {
          key: 'know-info',
          label: '知识库',
          path: '/admin/know-info',
          permission: 'content:manage'
        },
        {
          key: 'file-library',
          label: '文件库',
          path: '/admin/file-library',
          permission: 'content:manage'
        }
      ]
    },
    {
      key: 'messages',
      label: '消息中心',
      icon: <MessageOutlined />,
      path: '/admin/messages',
      permission: 'message:view'
    },
    {
      key: 'sms-module',
      label: '短信模块',
      icon: <MessageOutlined />,
      path: '/admin/sms-module',
      permission: 'message:view'
    },
    {
      key: 'charts',
      label: '数据图表',
      icon: <BarChartOutlined />,
      path: '/admin/chart-dashboard',
      permission: 'chart:view'
    },
    {
      key: 'maps',
      label: '地图',
      icon: <EnvironmentOutlined />,
      path: '/admin/map-dashboard',
      permission: 'map:view'
    }
  ];

  // 用户菜单项
  const userMenuItems: MenuProps['items'] = [
    {
      key: 'profile',
      label: '个人资料',
      icon: <UserOutlined />
    },
    {
      key: 'theme',
      label: isDark ? '切换到亮色模式' : '切换到暗色模式',
      icon: isDark ? <SunOutlined /> : <MoonOutlined />,
      onClick: () => toggleTheme()
    },
    {
      key: 'logout',
      label: '退出登录',
      icon: <InfoCircleOutlined />,
      danger: true
    }
  ];

  // 处理菜单点击
  const handleMenuClick = (item: MenuItem) => {
    if (item.path) {
      navigate(item.path);
    }
  };

  // 处理菜单展开变化
  const onOpenChange = (keys: string[]) => {
    const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
    setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
  };

  return {
    menuItems,
    userMenuItems,
    openKeys,
    collapsed,
    setCollapsed,
    handleMenuClick,
    onOpenChange
  };
};