F

src/layouts/AuthLayout/components/Menus.jsx

 
 export default (props) => {
   const { theme, items, location } = props;
-
+  const [openKeys, setOpenKeys] = React.useState([]);
+  const selectedKeys = [location.pathname]
   // const selectedKeys = React.useMemo(() => {
   //   const parts = location.pathname.split('/').filter(Boolean);
   //   const keys = parts.reduce((acc, it) => {
   //   return keys;
   // }, [location.pathname]);
 
-  const selectedKeys = [location.pathname];
+
+  console.log(items)
   return (
     <Menu
       mode="inline"
       theme={theme}
       items={items}
       selectedKeys={selectedKeys}
+      openKeys={openKeys}
+      onOpenChange={setOpenKeys}
     />
   )
 }

src/pages/TransactionInquiry/index.jsx

+import React from 'react'
+export default (props) => {
+return (
+<div></div>
+)
+}

src/pages/payment/index.jsx

+import React from 'react'
+export default (props) => {
+return (
+<div></div>
+)
+}

src/pages/quantumcredit/index.jsx

+import React from 'react'
+export default (props) => {
+return (
+<div></div>
+)
+}

src/pages/quantumstored/index.jsx

+import React from 'react'
+export default (props) => {
+return (
+<div></div>
+)
+}

src/pages/recipientmanagement/index.jsx

+import React from 'react'
+export default (props) => {
+return (
+<div></div>
+)
+}

src/pages/storeforeignexchange/index.jsx

+import React from 'react'
+export default (props) => {
+return (
+<div></div>
+)
+}

src/routes/menus.jsx

-import { Link } from 'react-router-dom';
-import { getPath } from './utils';
+import { Link } from "react-router-dom";
+import { getPath } from "./utils";
 
 // 菜单是否显示
 // 没有 meta 或者 meta.title 为空, 或者 meta.hideInMenu = true 的 都不显示
-const isShow = item => item.meta && item.meta.title && !item.meta.hideInMenu;
+const isShow = (item) => item.meta && item.meta.title && !item.meta.hideInMenu;
 
 const hasChildren = (list) => {
   if (!list || list.length < 1) return false;
 
   // 如果子元素全部都是不显示的, 说明子菜单不需要显示
-  return list.filter(it => !isShow(it)).length !== list.length;
-}
-
-export const getMenuItems = (routes = [], fullPath = '/') => {
-  return routes.map(route => {
-    const path = getPath(fullPath, route.path);
-
-    //
-    if (!isShow(route)) return false;
-    
-    const children = hasChildren(route.children) ? getMenuItems(route.children, path) : false;
-
-    const { target, title, icon } = route.meta || {}
-
-    // 坑爹 react-router v6 不支持 hash 路由的 target 跳转
-    const label = target === '_blank' ?
-      <a href={`${window.location.pathname}#${path}`} target={target}>{title}</a>
-      : (
-        path.indexOf('http') === 0  ? <a href={path} target="_blank">{title}</a>
-        : <Link to={path} target={target}>{title}</Link>
+  return list.filter((it) => !isShow(it)).length !== list.length;
+};
+
+export const getMenuItems = (routes = [], fullPath = "/") => {
+  return routes
+    .map((route) => {
+      const path = getPath(fullPath, route.path);
+
+      //
+      if (!isShow(route)) return false;
+
+      const children = hasChildren(route.children)
+        ? getMenuItems(route.children, path)
+        : false;
+
+      const { target, title, icon ,menuType} = route.meta || {};
+
+      // 坑爹 react-router v6 不支持 hash 路由的 target 跳转
+      const label =
+        target === "_blank" ? (
+          <a href={`${window.location.pathname}#${path}`} target={target}>
+            {title}
+          </a>
+        ) : path.indexOf("http") === 0 ? (
+          <a href={path} target="_blank">
+            {title}
+          </a>
+        ) : (
+          <Link to={path} target={target}>
+            {title}
+          </Link>
+        );
+      return Object.assign(
+        {
+          key: path,
+          label: children || menuType ? title : label          ,
+          type: menuType,
+          title,
+          icon ,
+        },
+        children && { children }
       );
-
-    return Object.assign(
-      {
-        key: path,
-        label,
-        title,
-        icon,
-      },
-      children && { children },
-    )
-  }).filter(Boolean);
-}
+    })
+    .filter(Boolean);
+};

src/routes/routes.jsx

   UserOutlined,
   SolutionOutlined,
   FileTextOutlined,
+  CreditCardOutlined,
+  IdcardOutlined,
 } from "@ant-design/icons";
 import { Outlet, Navigate } from "react-router-dom";
 import AuthLayout from "@/layouts/AuthLayout";
 import Incorporation from "@/pages/incorporation";
 import EcologicalPartner from "@/pages/ecologicalpartner";
 import AccountSettings from "@/pages/accountsettings";
+import PayMent from "@/pages/payment";
+import RecipientManagement from "@/pages/recipientmanagement";
+import StoreForeignExchange from "@/pages/storeforeignexchange";
+import QuantuMstored from "@/pages/quantumstored";
+import QuantumCredit from "@/pages/quantumcredit";
+import TransactionInquiry from "@/pages/transactioninquiry";
 import FirstPage from "@/pages/firstPage/index";
 
-
-import QLogin from '@/pages/qLogin/index';
-import QRegister from '@/pages/qRegister/index';
+import QLogin from "@/pages/qLogin/index";
+import QRegister from "@/pages/qRegister/index";
 
 /**
  * meta 用来扩展自定义数据数据
     element: <Outlet />,
     meta: {
       title: "全球账户",
-      icon: <SolutionOutlined />,
+      icon: <IdcardOutlined />,
     },
     children: [
       {
-        path: `accountmanagement`,
+        path: "accountmanagement",
         element: <AccountManagement />,
         meta: {
           title: "账户管理",
           icon: <SolutionOutlined />,
         },
       },
+      {
+        path: "payment",
+        element: <PayMent />,
+        meta: {
+          title: "付款",
+          icon: <SolutionOutlined />,
+        },
+      },
+      {
+        path: "recipientmanagement",
+        element: <RecipientManagement />,
+        meta: {
+          title: "收款方管理",
+          icon: <SolutionOutlined />,
+        },
+      },
+      {
+        path: "storeforeignexchange",
+        element: <StoreForeignExchange />,
+        meta: {
+          title: "店铺和结汇额度管理",
+          icon: <SolutionOutlined />,
+        },
+      },
+    ],
+  },
+  {
+    path: "quantum",
+    element: <Outlet />,
+    meta: {
+      title: "量子卡",
+      icon: <CreditCardOutlined/>,
+    },
+    children: [
+      {
+        path: "quantumstored",
+        element: <QuantuMstored />,
+        meta: {
+          title: "量子储值卡",
+        },
+      },
+      {
+        path: "quantumcredit",
+        element: <QuantumCredit />,
+        meta: {
+          title: "量子额度卡",
+        },
+      },  {
+        path: "transactioninquiry",
+        element: <TransactionInquiry />,
+        meta: {
+          title: "交易查询",
+        },
+      },
     ],
   },
   {