feats

src/index.less

@@ -49,6 +49,10 @@ html, body, #root {
   }
 }
 
+.ant-menu-horizontal > .ant-menu-item a {
+  color: #fff !important;
+}
+
 
 // 兼容 360
 .ant-pro-sider-collapsed-button {

src/layouts/AuthLayout/components/Header/SplitMenu.jsx

@@ -14,7 +14,7 @@ export default (props) => {
 
   const onClick = (item) => {
     onChange(item.key);
-    navigate(item.key);
+    // navigate(item.key);
   };
 
   React.useEffect(() => {

src/layouts/AuthLayout/components/Menus.jsx

@@ -36,6 +36,6 @@ export default (props) => {
   // }, [location.pathname]);
 
   return (
-    <Menu style={menuStyle} theme={theme} items={items} onClick={onClick} selectedKeys={[location.pathname]} />
+    <Menu style={menuStyle} theme={theme} items={items} selectedKeys={[location.pathname]} />
   )
 }

src/layouts/AuthLayout/index.jsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useMemo, useState } from 'react';
 import { Layout, Spin } from 'antd';
-import { useLocation } from "react-router-dom";
+import { useLocation, Outlet } from "react-router-dom";
 import { useModel } from '@/store';
 import { getItems } from '@/routes/menus';
+import useRoute from '@/utils/hooks/useRoute';
 import RequireLogin from './components/RequireLogin';
 import SiderBar from './components/SiderBar';
 import Header from './components/Header';
@@ -23,6 +24,7 @@ export default (props) => {
   useReady({ user, setUser });
 
   const location = useLocation();
+  const currentRoute = useRoute();
 
   const onSplitMenuChange = (key) => {
     const target = allMenus.filter(x => x.key === key)[0];
@@ -35,13 +37,19 @@ export default (props) => {
     <Spin spinning={!user} size="large">
       <HtmlTitle />
       <RequireLogin>
-        <Layout style={{ minHeight: '100vh' }}>
-          <Header theme={theme} menus={allMenus} location={location} onMenuChange={onSplitMenuChange} />
-          <Layout>
-            <SiderBar theme={theme} menus={siderMenus} location={location} />
-            <Container location={location} />
-          </Layout>
-        </Layout>
+        {
+          currentRoute && currentRoute.meta && currentRoute.meta.noLayout
+            ? <Outlet />
+            : (
+              <Layout style={{ minHeight: '100vh' }}>
+                <Header theme={theme} menus={allMenus} location={location} onMenuChange={onSplitMenuChange} />
+                <Layout>
+                  <SiderBar theme={theme} menus={siderMenus} location={location} />
+                  <Container location={location} />
+                </Layout>
+              </Layout>
+            )
+        }
       </RequireLogin>
     </Spin>
   );

src/layouts/Container.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
+import useRoute from '@/utils/hooks/useRoute';
 
 const containerStyle = {
   margin: '24px 24px 0 24px',
@@ -7,8 +8,12 @@ const containerStyle = {
 }
 
 export default (props) => {
+
+  const currentRoute = useRoute();
+  const style = currentRoute.meta && currentRoute.meta.noLayout ? { height: '100%' } : containerStyle;
+
   return (
-    <div style={containerStyle}>
+    <div style={style}>
       <Outlet />
     </div>
   )

src/pages/guaranteeTask/print/index.jsx

@@ -4,7 +4,7 @@ import { Button } from 'antd';
 import { useSearchParams } from 'react-router-dom';
 import { getGuaranteeTask } from '@/services/guaranteeTask';
 import { getGuaranteeDetailList } from '@/services/guaranteeTask';
-import Styles from './style.less';
+import Styles from './style.module.less';
 
 export default (props) => {
   const [dataSource, setDataSource] = useState({});

src/routes/Router.jsx

@@ -2,6 +2,8 @@ import { createHashRouter, RouterProvider } from "react-router-dom";
 import routes from './routes'
 
 const router = createHashRouter(routes);
+export const hashRouter = true;
+
 export default (props) => {
   return <RouterProvider router={router} />
 }

src/routes/menus.jsx

@@ -1,4 +1,6 @@
+import { Link } from 'react-router-dom';
 import routes from './routes';
+import { hashRouter } from './Router';
 
 let routeArr = [];
 
@@ -22,20 +24,20 @@ const getMenuItems = (dts = [], fullPath = '/') => {
   return dts.map(item => {
     const path = getPath(fullPath, item.path);
 
-    routeArr.push({
-      ...item,
-      path,
-    });
-
     //
     if (!isShow(item)) return false;
     
     const children = hasChildren(item.children) ? getMenuItems(item.children, path) : false;
 
+    // 坑爹 react-router v6 不支持 hash 路由的 target 跳转
+    const label = hashRouter && item.meta && item.meta.target === '_blank' ?
+      <a href={`${window.location.pathname}#${path}`} target={item.meta.target}>{item.meta.title}</a>
+      : <Link to={path} target={item.meta.target}>{item.meta.title}</Link>;
+
     return Object.assign(
       {
         key: path,
-        label: item.meta.title,
+        label,
         title: item.meta.title,
         icon: item.meta.icon,
       },
@@ -44,10 +46,24 @@ const getMenuItems = (dts = [], fullPath = '/') => {
   }).filter(Boolean);
 }
 
+const flatten = (routes, parent) => {
+  (routes || []).forEach((route) => {
+    const path = getPath(parent, route.path);
+    routeArr.push({
+      ...route,
+      path
+    });
+
+    if (route.children) {
+      flatten(route.children, path);
+    }
+  });
+}
+
 const getItems = () => getMenuItems(routes[0]?.children);
 const getRouteArr = () => {
   if (routeArr.length < 1) {
-    getItems();
+    flatten(routes, '/');
   }
   return routeArr;
 }

src/routes/routes.jsx

@@ -35,6 +35,8 @@ import RotationChartEdit from '@/pages/rotationChart/edit';
  * {
  *    title: 用于页面或者菜单的标题, 没有此字段, 菜单不会显示
  *    hideInMenu: 布尔值, 如果为 false, 菜单不会显示
+ *    noLayout: 布尔值, 如果为 true, 将不会使用默认布局
+ *    target: 字符串, 如果为 _blank, 将在新窗口打开
  * }
  */
 
@@ -86,6 +88,8 @@ export default [
             element: <GuaranteeTaskPrint />,
             meta: {
               hideInMenu: true,
+              noLayout: true,
+              target: '_blank',
               title: '任务执行',
             },
           }

src/store/models/system.js

@@ -11,14 +11,10 @@ export default function useSystem() {
     company: '云致科技'
   });
 
-  // 页面标题
-  const [title, setTitle] = useState();
-
   return {
     theme,
     updateTheme,
     app,
-    title,
-    setTitle,
+    hashRoute: true,
   }
 }