feats

package.json

@@ -10,11 +10,11 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.8.0",
-    "@ant-design/pro-components": "^2.3.46",
+    "@ant-design/pro-components": "^2.3.51",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-react": "^1.0.6",
     "@zjxpcyc/react-tiny-store": "^2.0.1",
-    "antd": "^5.0.5",
+    "antd": "^5.1.2",
     "axios": "^1.2.0",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.7",

src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.jsx

@@ -1,10 +1,22 @@
-import { useState } from 'react'
-
+import React from 'react';
+import 'dayjs/locale/zh-cn';
+import locale from 'antd/locale/zh_CN';
+import { ConfigProvider } from 'antd';
+import Router from './routes/Router'
+import { useModel } from './store';
 
 function App() {
-  const [count, setCount] = useState(0)
 
-  return null;
+  const { antThemeData } = useModel('system');
+  const theme = React.useMemo(() => ({token: antThemeData}), [antThemeData]);
+
+  console.log(theme)
+
+  return (
+    <ConfigProvider locale={locale} theme={theme}>
+      <Router />
+    </ConfigProvider>
+  );
 }
 
 export default App

src/layouts/AuthLayout/components/Menus.jsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { Menu } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import useRoute from '@/utils/hooks/useRoute';
 
-const menuStyle = { height: '100%' };
+const menuStyle = { height: '100%', borderRight: 0 };
 
 export default (props) => {
   const { theme, items, location } = props;
+  const navigate = useNavigate();
+  const { meta } = useRoute() || {};
 
   // const selectedKeys = React.useMemo(() => {
   //   const parts = location.pathname.split('/').filter(Boolean);
@@ -20,7 +24,33 @@ export default (props) => {
 
   const selectedKeys = [location.pathname];
 
+  const onClick = ({key}) => {
+    const path = key
+    if (path.indexOf('http') > -1) {
+      document.createElement('a');
+      a.href = path;
+      a.target = '_blank';
+      a.click();
+    } else {
+      if (meta?.target === '_blank') {
+        document.createElement('a');
+        a.href = `${window.location.pathname}#${path}`
+        a.target = '_blank';
+        a.click();
+      } else {
+        navigate(path);
+      }
+    }
+  }
+
   return (
-    <Menu style={menuStyle} theme={theme} items={items} selectedKeys={selectedKeys} />
+    <Menu
+      mode="inline"
+      style={menuStyle}
+      theme={theme}
+      items={items}
+      selectedKeys={selectedKeys}
+      onClick={onClick}
+    />
   )
 }

src/layouts/AuthLayout/components/SiderBar.jsx

@@ -15,7 +15,7 @@ export default (props) => {
 
 
   return (
-    <Sider className='layout-sidebar' theme={theme} defaultCollapsed collapsible width={width}>
+    <Sider className='layout-sidebar' theme={theme} collapsible width={width}>
       <Menus theme={theme} items={menus} location={location} />
     </Sider>
   );

src/main.jsx

@@ -1,16 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import 'dayjs/locale/zh-cn';
-import locale from 'antd/locale/zh_CN';
-import { ConfigProvider } from 'antd';
-import Router from './routes/Router'
 import './index.less'
-import { Provider } from './store'
+import { Provider } from './store';
+import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <Provider>
-    <ConfigProvider locale={locale}>
-      <Router />
-    </ConfigProvider>
+    <App />
   </Provider>
 )

src/routes/menus.jsx

@@ -25,22 +25,22 @@ export const getMenuItems = (routes = [], fullPath = '/') => {
     
     const children = hasChildren(route.children) ? getMenuItems(route.children, path) : false;
 
-    const { target, title, icon } = route.meta || {}
+    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>
-      );
+    // // 坑爹 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,
-        title,
+        label: title,
         icon,
+        type: menuType,
       },
       children && { children },
     )

src/routes/routes.jsx

@@ -42,6 +42,7 @@ import QuestionList from "@/pages/question/list";
  *    noFooter: 布尔值, 如果为 true, 将没有底部 footer
  *    target: 字符串, 如果为 _blank, 将在新窗口打开
  *    permission: 对应服务器端权限名称
+ *    menuType: ANTD 的 menuItem 的 type 属性,
  * }
  */
 
@@ -50,12 +51,43 @@ export const authRoutes = [
     path: 'index',
     element: <Index />,
   },
+  {
+    path: "check",
+    element: <Outlet />,
+    meta: {
+      title: '模拟测评',
+      icon: <ProjectOutlined />,
+      menuType: 'group',
+      // permission: 'form',
+    },
+    children: [
+      {
+        index: true,
+        element: <CheckList />,
+      },
+      {
+        path: "list",
+        element: <CheckList />,
+        meta: {
+          title: '测评列表',
+        }
+      },
+      {
+        path: "edit",
+        element: <CheckEdit />,
+        meta: {
+          title: '测评维护',
+        }
+      }
+    ]
+  },
   {
     path: "system",
     element: <Outlet />,
     meta: {
       title: '系统管理',
       icon: <SettingOutlined />,
+      menuType: 'group',
       // permission: 'form',
     },
     children: [
@@ -166,35 +198,6 @@ export const authRoutes = [
 
     ]
   },
-  {
-    path: "check",
-    element: <Outlet />,
-    meta: {
-      title: '模拟测评',
-      icon: <ProjectOutlined />,
-      // permission: 'form',
-    },
-    children: [
-      {
-        index: true,
-        element: <CheckList />,
-      },
-      {
-        path: "list",
-        element: <CheckList />,
-        meta: {
-          title: '测评列表',
-        }
-      },
-      {
-        path: "edit",
-        element: <CheckEdit />,
-        meta: {
-          title: '测评维护',
-        }
-      }
-    ]
-  }
 
   // {
   //   path: "form",

src/store/models/system.js

@@ -1,8 +1,12 @@
-import { useState, useCallback } from "react";
+import { useState } from "react";
 
 export default function useSystem() {
   // 主题
   const [theme, updateTheme] = useState('light');
+  const [antThemeData] = useState({
+    borderRadius: 6,
+    colorPrimary: '#1677ff',
+  });
 
   // 其他配置
   const [app, setApp] = useState({
@@ -13,6 +17,7 @@ export default function useSystem() {
 
   return {
     theme,
+    antThemeData,
     updateTheme,
     app,
     hashRoute: true,