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([]); // 基础菜单项配置 const menuItems: MenuItem[] = [ { key: 'dashboard', label: '控制台', icon: , path: '/admin/dashboard' }, { key: 'monitor', icon: , 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: , 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: , 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: , path: "/admin/work-orders" }, { key: 'inspection', label: '巡检管理', icon: , path: '/admin/inspections' }, { key: 'analysis', icon: , 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: , path: '/admin/users', permission: 'user:manage' }, { key: 'settings', label: '系统设置', icon: , 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: , 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: , path: '/admin/messages', permission: 'message:view' }, { key: 'sms-module', label: '短信模块', icon: , path: '/admin/sms-module', permission: 'message:view' }, { key: 'charts', label: '数据图表', icon: , path: '/admin/chart-dashboard', permission: 'chart:view' }, { key: 'maps', label: '地图', icon: , path: '/admin/map-dashboard', permission: 'map:view' } ]; // 用户菜单项 const userMenuItems: MenuProps['items'] = [ { key: 'profile', label: '个人资料', icon: }, { key: 'theme', label: isDark ? '切换到亮色模式' : '切换到暗色模式', icon: isDark ? : , onClick: () => toggleTheme() }, { key: 'logout', label: '退出登录', icon: , 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 }; };