d8d-vite-starter/src/client/admin/menu.tsx

import React from 'react';
import { useNavigate } from 'react-router';
import { useAuth } from './hooks/AuthProvider';
import type { MenuProps } from 'antd';
import {
  UserOutlined,
  DashboardOutlined,
  TeamOutlined,
  InfoCircleOutlined,
  CustomerServiceOutlined,
  DollarOutlined,
  CalendarOutlined
} from '@ant-design/icons';
import {
  FileTextOutlined,
  DatabaseOutlined,
  FileProtectOutlined,
  HistoryOutlined,
  AuditOutlined
} from '@ant-design/icons';

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 navigate = useNavigate();
  const { logout: handleLogout } = useAuth();
  const [collapsed, setCollapsed] = React.useState(false);
  const [openKeys, setOpenKeys] = React.useState<string[]>([]);

  // 基础菜单项配置
  const menuItems: MenuItem[] = [
    {
      key: 'dashboard',
      label: '控制台',
      icon: <DashboardOutlined />,
      path: '/admin/dashboard'
    },
    {
      key: 'users',
      label: '用户管理',
      icon: <TeamOutlined />,
      path: '/admin/users',
      permission: 'user:manage'
    },
    {
      key: 'crm',
      label: '客户关系管理',
      icon: <CustomerServiceOutlined />,
      children: [
        {
          key: 'customers-all',
          label: '全部客户',
          path: '/admin/clients',
          permission: 'client:manage'
        },
        {
          key: 'customers-pending',
          label: '待审核',
          path: '/admin/clients/pending',
          permission: 'client:manage'
        },
        {
          key: 'customers-approved',
          label: '已审核',
          path: '/admin/clients/approved',
          permission: 'client:manage'
        },
        {
          key: 'customers-rejected',
          label: '已拒绝',
          path: '/admin/clients/rejected',
          permission: 'client:manage'
        },
        {
          key: 'contacts',
          label: '联系人管理',
          path: '/admin/contacts',
          permission: 'contact:manage'
        },
        {
          key: 'order-records',
          label: '订单记录',
          path: '/admin/order-records',
          permission: 'order:manage'
        },
        {
          key: 'follow-up-records',
          label: '跟单记录',
          path: '/admin/follow-up-records',
          permission: 'followup:manage'
        },
      ]
    },
    {
      key: 'system',
      label: '系统管理',
      icon: <DatabaseOutlined />,
      children: [
        {
          key: 'areas',
          label: '区域管理',
          path: '/admin/areas',
          permission: 'area:manage'
        },
        {
          key: 'files',
          label: '文件管理',
          icon: <FileTextOutlined />,
          path: '/admin/files',
          permission: 'file:manage'
        },
        {
          key: 'logs',
          label: '系统日志',
          icon: <HistoryOutlined />,
          path: '/admin/logs',
          permission: 'log:view'
        }
      ]
    },
    {
      key: 'finance',
      label: '财务管理',
      icon: <FileProtectOutlined />,
      children: [
        {
          key: 'expenses',
          label: '费用管理',
          path: '/admin/expenses',
          permission: 'expense:manage'
        }
      ]
    },
    {
      key: 'contract',
      label: '合同管理',
      icon: <AuditOutlined />,
      children: [
        {
          key: 'contracts',
          label: '合同列表',
          path: '/admin/contracts',
          permission: 'contract:manage'
        },
        {
          key: 'contract-renews',
          label: '合同续签',
          path: '/admin/contract-renews',
          permission: 'contract:renew'
        }
      ]
    }
  ];

  // 用户菜单项
  const userMenuItems: MenuProps['items'] = [
    {
      key: 'profile',
      label: '个人资料',
      icon: <UserOutlined />
    },
    {
      key: 'logout',
      label: '退出登录',
      icon: <InfoCircleOutlined />,
      danger: true,
      onClick: () => handleLogout()
    }
  ];

  // 处理菜单点击
  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
  };
};