staff_data/apps/web/src/app/main/layout/NavigationMenu.tsx

import React, { useEffect, useState } from "react";
import { Menu } from "antd";
// import { useSelector } from "react-redux";
import { useNavigate, useLocation } from "react-router-dom";
// import styles from "./index.module.less";
// import logo from "../../assets/logo.png";

function getItem(
  label: any,
  key: any,
  icon: any,
  children: any,
  type: any,
  // permission: any
) {
  return {
    key,
    icon,
    children,
    label,
    type,
    // permission,
  };
}
const items = [
  getItem(
    "首页概览",
    "/",
    <i className={`iconfont icon-icon-home`} />,
    null,
    null,
  ),
  getItem(
    "人员信息",
    "/staffinformation",
    <i className="iconfont icon-icon-category" />,
    null,
    null,
  ),
  getItem(
    "人员总览",
    "/staff",
    <i className="iconfont icon-icon-category" />,
    null,
    null,
  ),
  getItem(
    "系统日志",
    "/systemlog",
    <i className="iconfont icon-icon-category" />,
    null,
    null,
  ),
  getItem(
    "系统设置",
    "/admin",
    <i className="iconfont icon-icon-user" />,
    [
      getItem("部门设置", "/admin/department", null, null, null),
      getItem("角色设置", "/admin/role", null, null, null),
    ],
    null,
  ),
];

const NavigationMenu: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const children2Parent: any = {
    "^/plan/weekplan": ["/plan"],
    "^/plan/monthplan": ["/plan"],
    "^/admin/department": ["/admin"],
    "^/admin/role": ["/admin"],
    "^/admin/term": ["/admin"],
    "^/admin/taxonomy": ["/admin"],
    "^/admin/rolemap": ["/admin"],
    "^/admin/transform": ["/admin"],
    "^/admin/app_config": ["/admin"],
  };

  // 选中的菜单
  const [selectedKeys, setSelectedKeys] = useState<string[]>([
    location.pathname,
  ]);
  // 展开菜单
  const [openKeys, setOpenKeys] = useState<string[]>([]);
  // const permissions = useSelector(
  //   (state: any) => state.loginUser.value.permissions
  // );
  const [activeMenus, setActiveMenus] = useState<any>(items);

  const onClick = (e: any) => {
    const path = e.key;
    // 立即更新选中状态
    setSelectedKeys([path]);
    
    // 根据不同路径设置展开状态
    if (path === "/staffinformation") {
      setOpenKeys(["/staffinformation"]);
    } else if (path === "/staff") {
      setOpenKeys(["/staff"]);
    } else if (path.startsWith("/assessment/") || path.startsWith("/plan/")) {
      setOpenKeys([path.split('/').slice(0, 2).join('/')]);
    } else if(path.startsWith("/admin/")){
      setOpenKeys(["/admin"]);
    }
    else {
      setOpenKeys(openKeyMerge(path));
    }
    
    // 执行导航
    navigate(path);
  };
  // console.log(items)
  useEffect(() => {
    setActiveMenus(items);
    // console.log(activeMenus)
  },[items])
  // useEffect(() => {
  //   checkMenuPermissions(items, permissions);
  // }, [items, permissions]);

  // const checkMenuPermissions = (items: any, permissions: any) => {
  //   let menus: any = [];
  //   if (permissions.length === 0) {
  //     setActiveMenus(menus);
  //     return;
  //   }

  //   for (let i in items) {
  //     let menuItem = items[i];
  //     // 一级菜单=>没有子菜单&配置了权限
  //     if (menuItem.children === null) {
  //       if (
  //         menuItem.permission !== null &&
  //         typeof permissions[menuItem.permission] === "undefined"
  //       ) {
  //         continue;
  //       }
  //       menus.push(menuItem);
  //       continue;
  //     }
  //     let children = [];

  //     for (let j in menuItem.children) {
  //       let childrenItem = menuItem.children[j];

  //       if (
  //         typeof permissions[childrenItem.permission] !== "undefined" ||
  //         !childrenItem.permission
  //       ) {
  //         // 存在权限
  //         children.push(childrenItem);
  //       }
  //     }

  //     if (children.length > 0) {
  //       menus.push(Object.assign({}, menuItem, { children: children }));
  //     }
  //   }
  //   setActiveMenus(menus);
  // };

  const hit = (pathname: string): string[] => {
    // 使用精确的路径匹配
    const exactPaths = {
      "/staffinformation": ["/staffinformation"],
      "/staff": ["/staff"],
      "/": ["/"]
    };

    // 先检查精确匹配
    if (exactPaths[pathname]) {
      return exactPaths[pathname];
    }

    // 再检查正则匹配的子路径
    for (let p in children2Parent) {
      const regex = new RegExp(p);
      if (regex.test(pathname)) {
        return children2Parent[p];
      }
    }
    return [];
  };

  const openKeyMerge = (pathname: string): string[] => {
    let newOpenKeys = hit(pathname);
    for (let i = 0; i < openKeys.length; i++) {
      let isIn = false;
      for (let j = 0; j < newOpenKeys.length; j++) {
        if (newOpenKeys[j] === openKeys[i]) {
          isIn = true;
          break;
        }
      }
      if (isIn) {
        continue;
      }
      newOpenKeys.push(openKeys[i]);
    }
    return newOpenKeys;
  };

  // 修改 useEffect 中的路径判断逻辑
  useEffect(() => {
    const currentPath = location.pathname;
    setSelectedKeys([currentPath]);
    
    // 对于根路径特殊处理
    if (currentPath === "/") {
      setOpenKeys([]);
      return;
    }
    
    // 使用修改后的 hit 函数获取正确的 openKeys
    const newOpenKeys = openKeyMerge(currentPath);
    setOpenKeys(newOpenKeys);
  }, [location.pathname]);

  return (
    <div className='w-[200px] h-full bg-#fff'>
      <div
        style={{
          textDecoration: "none",
          cursor: "pointer",
          position: "sticky",
          top: 0,
          zIndex: 10,
          background: "#fff",
        }}
        onClick={() => {
          window.location.href = "/";
        }}
      >
        {/* 此处为版权标识，严禁删改
        <img src={logo}  className="w-[124px] h-[40px]"/> */}
      </div>
      <div className='w-[200px] h-[calc(100%-74px)] overflow-y-auto overflow-x-hidden'>
        <Menu
          onClick={onClick}
          style={{
            width: 200,
            background: "#ffffff",
          }}
          selectedKeys={selectedKeys}
          openKeys={openKeys}
          mode="inline"
          items={activeMenus}
          onSelect={(data: any) => {
            setSelectedKeys(data.selectedKeys);
          }}
          onOpenChange={(keys: any) => {
            setOpenKeys(keys);
          }}
        />
      </div>
    </div>
  );
};

export default NavigationMenu;


















// import { Menu } from "antd";
// import { useNavigate, useLocation } from "react-router-dom";

// export default function NavigationMenu() {
//     const navigate = useNavigate();
//     const location = useLocation();
//     console.log(location.pathname);
//     // 导航菜单项配置
//   const menuItems = [
//     { key: 'staff', label: '人员总览', path: '/' }, // 将path改为根路径
//     { key: 'plan', label: '培训计划', path: '/plan' },
//     { key: 'day', label: '每日填报', path: '/daily' },
//     { key: 'exam', label: '考核成绩', path: '/exam' },
//   ];

//   return (
//     <>
//         <Menu
//           theme="dark"
//           mode="inline"
//           className="!bg-transparent !border-0 pt-4 [&_.ant-menu-item]:!mt-2"
//           selectedKeys={[ // 改用selectedKeys替代defaultSelectedKeys
//             menuItems.find((item) => location.pathname.startsWith(item.path))?.key,
//           ]}
//         >
//           {menuItems.map((item) => (
//             <Menu.Item
//               key={item.key}
//               className="!h-14 !flex !items-center !text-gray-300 hover:!text-white group !rounded-lg mx-4"
//               onClick={() => navigate(item.path)}
//             >
//               <div className="flex items-center justify-center w-full px-4 transition-all duration-300 h-full rounded-lg">
//                 <span className="text-xl font-medium">{item.label}</span>
//               </div>
//             </Menu.Item>
//           ))}
//         </Menu>
//     </>
//   );
// }