chore: update

package-lock.json

@@ -11,7 +11,6 @@
         "@ant-design/icons": "^5.3.7",
         "@fortaine/fetch-event-source": "^3.0.6",
         "@reduxjs/toolkit": "^1.9.7",
-        "@rollup/rollup-linux-x64-gnu": "*",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-react": "^1.0.6",
         "@wangeditor/plugin-link-card": "^1.0.0",

src/layout/index.jsx

-import { useState, useEffect } from 'react'
+import { useState, useEffect, Suspense } from 'react'
 import { Layout, Flex } from 'antd'
 import { Outlet, Link } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
@@ -66,16 +66,20 @@ export default function AppLayout() {
             </Link>
           </div>
           <Menu menuList={menuList}></Menu>
+          {menuList.length ? (
             <Flex align="center" gap="small">
               <Message></Message>
               <User></User>
               <Logout></Logout>
             </Flex>
+          ) : null}
         </Header>
         <Breadcrumb menuList={menuList}></Breadcrumb>
       </div>
       <Content className="layout-content">
+        <Suspense>
           <Outlet />
+        </Suspense>
       </Content>
     </Layout>
   )

src/pages/css/index.css

-.ant-modal .ant-modal-close {
-  inset-inline-end: initial;
-}
-.delModal .ant-btn-primary,
-.footer .ant-btn-primary {
-  background: #aa1941;
-  border-radius: 4px;
-  color: #ffffff;
-  font-size: 14px;
-}
-.delModal .ant-btn-primary:hover,
-.footer .ant-btn-primary:hover {
-  background: #aa194283 !important;
-}
-.delModal .ant-btn-default,
-.footer .ant-btn-default {
-  background: #ffffff;
-  border-radius: 4px;
-  border: 1px solid #aa1941;
-  font-size: 14px;
-  color: #aa1941;
-}
-.delModal .ant-btn-default:hover,
-.footer .ant-btn-default:hover {
-  background: #ffffff7c !important;
-  border-color: #aa194283 !important;
-  color: #aa194283 !important;
-}

src/pages/user-module/css/index.css

-.normal-container {
-  width: calc(100% - 50px);
-  margin: 0 auto;
-}
-.normal-container .ant-form-item,
-.normal-container .ant-form-item span,
-.normal-container Input {
-  background: none !important;
-}
-.normal-container .ant-Input -affix-wrapper {
-  border-radius: 0;
-  border: none;
-  border-bottom: 1px solid #bfbfbf;
-}
-.normal-container .ant-Input -affix-wrapper:focus,
-.normal-container .ant-Input -affix-wrapper:focus-within {
-  box-shadow: none !important;
-}
-.normal-container .ant-Input -affix-wrapper:focus {
-  border-color: #af1c40;
-}
-.normal-container .login-header {
-  font-size: 24px;
-  font-family: 'Source Han Sans CN';
-  font-weight: bold;
-  font-style: italic;
-  color: #000000;
-}
-.normal-container .img-logo {
-  text-align: left;
-}
-.normal-container .img-logo .img {
-  display: block;
-  margin-bottom: 20px;
-}
-.normal-container .form-data-container {
-  padding: 50px 0px 0;
-}
-.normal-container .form-data-container .captcha {
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid #d8d8d8;
-  border-radius: 5px;
-  cursor: pointer;
-}
-.normal-container .login-submit-btn button {
-  width: 100%;
-  border-radius: 0;
-  background-color: #af1c40;
-}
-.captcha-container {
-  width: 450px;
-  height: 480px;
-  background: #ffffff;
-  box-shadow: 0px 5px 18px 0px rgba(139, 139, 139, 0.33);
-  width: calc(100% - 50px);
-  margin: 0 auto;
-  margin-bottom: 20px;
-}
-.captcha-container .rotateWrap button {
-  width: 300px;
-  line-height: 30px;
-}
-.captcha-container .rotateWrap .top-s {
-  font-size: 12px;
-  color: #ccc;
-  display: block;
-  text-align: center;
-  margin-left: 25px;
-  margin-top: 25px;
-  padding-top: 40px;
-  margin-bottom: 5px;
-}
-.captcha-container .rotateWrap .top-x {
-  font-size: 18px;
-  color: black;
-  display: block;
-  text-align: center;
-  margin-bottom: 45px;
-}
-.captcha-container .rotateWrap .cuo {
-  float: right;
-  margin-right: 10px;
-  margin-top: 5px;
-  cursor: pointer;
-  padding-top: 20px;
-  padding-right: 20px;
-}
-.captcha-container .rotateWrap .control-bor-active {
-  border: 1px solid #9b2a5d;
-}
-.captcha-container .rotateWrap .slideDragBtn {
-  background-color: #9b2a5d;
-}
-.captcha-container .rotateWrap .slideDragBtn .control-btn-ico {
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAyCAYAAAATIfj2AAAAAXNSR0IArs4c6QAAAoRJREFUaAXtmb9OVFEQxjcQKGyspIPK2FvrA+gDAC8AL6C+gGIidvx5ABtqeABCDZSEFjtNLLTRwoLo+jvZJcBhvpnrLlPs5kzyhT3z5/vOzM1y757b6zVrE2gTaBNoE5iWCfT7/VnwAXwbonyeHbe/wgHunTfcF6KboLZPYWGQAGEKbyDb6yFcroxl62GxkwBhCq8jOQg5wr+JPQ0JREIWr5C7diP8ESj7TODhdXb3T9Sl8IY7QPgBOAfKDkISIwGyFF5D6q4L8Sfgp+oI/5u7VbEnizdWJgPxZaehS2LPOxFVSVm8lYy9RHzbaeorsQW70vdm8fqqRBGeA8dA2RGBmZCoSqAmhbeSsZeIL4LvQNl7u9L3QpbC66sOo4i/AH9FR8X/shNRlZTFW8nYS8TfioaK+wdYsit9L3UpvL4qUYRnwCFQdkpgPiSqEqhJ4a1k7CXij8AXoGzXrvS9kKXw+qrDKOLPQLkPKVvtRFQlQZbCW8nYS8RfqW7w/wKP7Urfm8Xrqw6jiO8DZXudSIwkCFN4DanbLoSXwB/R0dnt7O6rUXj/+84utrOFX3Gdi5ou7ixerc0UX4srU9zjfIdSeHUnRNhwyn+jLN6omeh+seMSiCDNpPAKuYEb0ZQ7ehav20wJIvwOKCtP46M+y6Xwug2x2el52qaZ6HfLhjsNEcziFXIDN6Lll+UJUHZEQN2LJDc1KbxS8CqA8PScKdDMClBWnrZHPfVJ4b26COZfNjs953I0k3LCmcVrXpGbToS9M+gL4hln2yPz3ty7+ZkNq9ceE/v2QTW0Zk6go9MZ1Fi8oTzCm6C2iX6DV78LLQ1mvGO9F97wCrWENoE2gTaBiZ/AP+8/LMb6T9MeAAAAAElFTkSuQmCC) no-repeat center center;
-  background-size: 100% 100%;
-}
-.captcha-container .rotateWrap body {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}

src/routes/baseRouter.jsx

-import { lazy } from 'react'
-// import { Navigate } from 'react-router-dom'
-import { authComponent } from './lazyLoadAndDelay' // 添加一个固定的延迟时间，以便你可以看到加载状态
-
-import Layout from '@/layout/index'
-
-const baseRouter = [
-  {
-    path: '/',
-    element: authComponent(Layout),
-    children: [
-      {
-        path: '/userinfo',
-        Component: lazy(() => import('@/pages/user-module/userInfo'))
-      }
-    ]
-  },
-  {
-    path: '/login',
-    Component: lazy(() => import('@/pages/user-module')),
-    children: [
-      {
-        index: true,
-        Component: lazy(() => import('@/pages/user-module/login'))
-      }
-    ]
-  }
-  // { path: '*', element: <Navigate to="/" /> }
-]
-
-export default baseRouter

src/routes/index.jsx

-import { useEffect } from 'react'
-import { useRoutes, Navigate } from 'react-router-dom'
-import { filterAsyncRouter } from './lazyLoadAndDelay'
-import { useSelector } from 'react-redux'
-import baseRouter from './baseRouter'
-
-const addDefaultNavigation = (menuRoutes) => {
-  menuRoutes.forEach((item) => {
-    const children = item.children
-
-    if (children && children.length > 0) {
-      // 如果有子项，递归调用 addDefaultNavigation
-      addDefaultNavigation(children)
-
-      // 在 children 数组的开头添加默认导航项
-      children.unshift({
-        index: true,
-        element: <Navigate to={children[0].path} />
-      })
-    }
-  })
-  return menuRoutes
-}
+import { useRoutes } from 'react-router-dom'
+import routes from './routes'
 
 const GetRoutesDynamic = () => {
-  // 合并路由
-  const { menuRouter } = useSelector((state) => state.user)
-  useEffect(() => {
-    if (menuRouter?.length) {
-      const menuRoutes = filterAsyncRouter(menuRouter)
-      const hasRoute = baseRouter[0].children
-      const newMenus = addDefaultNavigation(menuRoutes)
-      const firstObj = {
-        index: true,
-        element: <Navigate to={newMenus[0].path} />
-      }
-      baseRouter[0].children = [firstObj, ...newMenus, ...hasRoute]
-    }
-  }, [menuRouter])
-  console.log(baseRouter)
-  const element = useRoutes(baseRouter)
+  const element = useRoutes(routes)
 
   return <>{element}</>
 }

src/routes/lazyLoadAndDelay.jsx

-import { lazy, Suspense } from 'react';
-import { useRoutes, Navigate } from 'react-router-dom';
-import { Spin } from 'antd';
+import { lazy, Suspense } from 'react'
+import { Navigate } from 'react-router-dom'
+import { Spin } from 'antd'
+
 /*** 实现路由懒加载* @param Comp 懒加载组件* @returns */
 const lazyLoad = (Comp) => {
   return (
     <Suspense fallback={<Spin />}>
       <Comp />
     </Suspense>
-  );
-};
-
-const delayForDemo = (promise) => {
-  return new Promise((resolve) => {
-    setTimeout(resolve, 2000);
-  }).then(() => promise);
-};
+  )
+}
 
 const Modules = import.meta.glob('../pages/**/*.jsx') // 在vite中必须这样动态引入所有组件地址
 const lazyLoadModule = (moduleName) => {
@@ -28,7 +23,7 @@ const lazyLoadModule = (moduleName) => {
 }
 
 const filterAsyncRouter = (menuData) => {
-  let temp = [];
+  let temp = []
   menuData.forEach((item) => {
     const route = {
       name: item.name,
@@ -40,14 +35,14 @@ const filterAsyncRouter = (menuData) => {
       route.children = filterAsyncRouter(item.children) // 如有有嵌套路由则递归加载
     }
     temp.push(route)
-  });
+  })
 
-  return temp;
+  return temp
 }
 
 const authComponent = (Com) => {
-  const token = localStorage.getItem('kiwi.token') || true;
-  return token ? lazyLoad(Com) : <Navigate to='/login' />;
-};
+  const token = localStorage.getItem('kiwi.token') || true
+  return token ? lazyLoad(Com) : <Navigate to="/login" />
+}
 
-export { lazyLoad, lazyLoadModule, delayForDemo, authComponent, filterAsyncRouter };
+export { lazyLoad, lazyLoadModule, authComponent, filterAsyncRouter }

src/store/modules/user.js

@@ -5,7 +5,7 @@ const initialState = {
   menuRouter: [],
   menuListRouter: [],
   userInfo: {},
-  operationPermissionsList: {},
+  operationPermissionsList: [],
   treeChapter: {
     saveBookId: '',
     saveChapterId: '',