fix: 侧边栏布局更改

package.json

@@ -149,7 +149,6 @@
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "4.0.1",
     "prettier": "^2.1.2",
-    "react-activation": "^0.5.5",
     "react-app-polyfill": "^1.0.6",
     "react-dev-utils": "^10.2.1",
     "resolve": "1.15.0",
@@ -174,18 +173,16 @@
     "workbox-webpack-plugin": "4.3.1"
   },
   "dependencies": {
+    "react-activation": "^0.5.5",
     "@ant-design/icons": "^4.2.2",
     "antd": "^4.6.4",
     "axios": "^0.20.0",
-    "immutable": "^4.0.0-rc.12",
     "mobx": "^6.0.1",
     "mobx-react": "^7.0.0",
     "nprogress": "^0.2.0",
-    "react": "^16.13.1",
+    "react": "^17.0.1",
     "react-dom": "^16.13.1",
-    "react-redux": "^7.2.1",
-    "react-router-dom": "^5.2.0",
-    "redux": "^4.0.5",
-    "redux-immutable": "^4.0.0"
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0"
   }
 }

src/App.tsx

@@ -3,6 +3,7 @@ import history from '@/utils/history'
 import 'nprogress/nprogress.css'
 import React from 'react'
 import { AliveScope } from 'react-activation'
+// import { Provider } from 'react-keep-alive'
 import { Router, Switch } from 'react-router-dom'
 import './index.scss'
 import { routeConfig } from './router/routes'
@@ -15,7 +16,6 @@ const App = () =>{
             <Guards routeConfig={routeConfig}></Guards>
           </Switch>
         </AliveScope>
-
       </Router >
     </div>
   )

src/components/Menu/index.tsx

@@ -15,8 +15,6 @@ interface iMenuProps {
 class NavSider extends Component<iMenuProps, any> {
   render() {
     const { list: MeunList } = this.props
-    console.log(userState.userInfo)
-
     return (
       <div className="main-nav">
         <div className="logo"><img src={logo}></img></div>

src/components/Navigation/index.tsx

@@ -4,12 +4,13 @@ import { NavigationGuardsProps, RouteModel } from '@/types/router'
 import { combinationPath } from '@/utils/util'
 import React, { Component } from 'react'
 import KeepAlive from 'react-activation'
+// import { KeepAlive } from 'react-keep-alive'
 import { Redirect, Route } from "react-router-dom"
 class NavigationGuards extends Component<NavigationGuardsProps, any> {
-    // constructor(props: NavigationGuardsProps) {
-    //     super(props)
-    //     userState.check()
-    // }
+    constructor(props: NavigationGuardsProps) {
+        super(props)
+        userState.check()
+    }
     /**
      * 判断pathTarget是否包涵pathConfig/
      * 即，pathConfig是否为pathTarget的子路径
@@ -31,7 +32,6 @@ class NavigationGuards extends Component<NavigationGuardsProps, any> {
     shouldComponentUpdate(nextProps: any) {
         //与上次请求的路径相同时不重新渲染
         if (this.props.location.pathname === nextProps.location.pathname) return false
-        userState.check()
         return true
     }
 
@@ -55,7 +55,6 @@ class NavigationGuards extends Component<NavigationGuardsProps, any> {
     }
 
     render() {
-        console.log("路由守卫渲染")
         const { location, routeConfig, match } = this.props
         //如果没有提供routeConfig则不做任何事情
         if (!routeConfig || routeConfig.length <= 0) { return null }
@@ -65,7 +64,6 @@ class NavigationGuards extends Component<NavigationGuardsProps, any> {
         //用户当前希望访问的路径
         const targetPath: string | undefined = location?.pathname
 
-
         //如果访问子菜单，则跳转到子菜单的默认路由
         if (targetPath && frameState.defaultRouteMapping.has(targetPath)) {
             const targetDefaultRoute: string = frameState.defaultRouteMapping.get(targetPath) as string
@@ -75,8 +73,8 @@ class NavigationGuards extends Component<NavigationGuardsProps, any> {
         const findRes = targetPath && NavigationGuards.findTargetRoute(parentPath, targetPath, routeConfig)
         const targetRoute: RouteModel | null | "" | undefined | Error = findRes && findRes.targetRoute
 
-        const isLogin = userState.isLogin
 
+        const isLogin = userState.isLogin
 
         if (targetRoute instanceof Error) return <ErrorPage/>
 
@@ -108,6 +106,7 @@ function LoginHandler(props: { targetRoute: RouteModel, ErrorPage: any }): any {
     const { targetRoute, ErrorPage } = props
     const { path, auth } = targetRoute
     const noCache = targetRoute.meta?.noCache ? targetRoute.meta.noCache : false
+
     if (path === '/login') {
         return <Redirect to="/console/dashboard"></Redirect>
     } else if (!auth || NavigationGuards.permissionAuthentication(auth, userState.role)) {
@@ -117,7 +116,7 @@ function LoginHandler(props: { targetRoute: RouteModel, ErrorPage: any }): any {
                     noCache ?
                         <targetRoute.component {...props} routeConfig={targetRoute.childRoutes}></targetRoute.component> :
                         (
-                            <KeepAlive id={`${path}`}>
+                            <KeepAlive id={path}>
                                 <targetRoute.component {...props} routeConfig={targetRoute.childRoutes}></targetRoute.component>
                             </KeepAlive>
                         )

src/index.scss

@@ -17,20 +17,26 @@ body {
       width: 100%;
       height: 100%;
       .ka-wrapper {
-        width: 100% !important;
-        height: 100% !important;
-        padding: 0;
-        margin: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        width: 100%;
+        height: 100%;
         .ka-content {
-          width: 100% !important;
-          height: 100% !important;
-          padding: 0;
-          margin: 0;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          width: 100%;
+          height: 100%;
         }
       }
     }
   }
 }
+.panel-content {
+  position: fixed;
+  left: 175px;
+}
 #nprogress .bar {
   height: 2px !important;
   background: #1890ff !important;

src/layout/NavSide/index.tsx

@@ -6,18 +6,19 @@ import React from 'react'
 import { Switch } from 'react-router-dom'
 export default function NavSide(props: any) {
   const { routeConfig, match } = props
-  console.log(routeConfig)
 
   const menuList: iMenuItem[] = routeConfig?.filter((item: RouteModel) => item.meta).map((item: RouteModel) => {
     return { path: combinationPath(match.path, item.path), ...item.meta }
   })
 
   return (
-    <div className="pi-flex-row">
+    <div className="pi-flex-row pi-height-100P">
       <Menu list={menuList}></Menu>
-      <Switch>
-        <Guards routeConfig={routeConfig} match={match}></Guards>
-      </Switch>
+      <div className="pi-flex-row pi-height-100P">
+        <Switch>
+          <Guards routeConfig={routeConfig} match={match}></Guards>
+        </Switch>
+      </div>
     </div>
   )
 }

src/pages/Management/Info/index.tsx

@@ -1,9 +1,17 @@
+import Header from '@/components/Header'
+import Slot from '@/components/Header/slot'
+import { Button } from 'antd'
 import React from 'react'
 
 export default function Info() {
   return (
-    <div>
-      <h1>项目信息</h1>
-    </div>
+    <div className="content-wrap">
+      <Header title="项目信息">
+        <Slot position="right">
+          <Button type="primary" size="small">保存修改</Button>
+        </Slot>
+      </Header>
+      <div className="pi-flex-column"></div>
+      </div>
   )
 }

src/pages/Management/Setting/index.tsx

@@ -1,10 +1,17 @@
+import Header from '@/components/Header'
+import Slot from '@/components/Header/slot'
+import { Button } from 'antd'
 import React from 'react'
 
-export default function Setting() {
+export default function Info() {
   return (
-    <div>
-
-      <h1>项目设置</h1>
-    </div>
+    <div className="content-wrap">
+      <Header title="账号设置">
+        <Slot position="right">
+          <Button type="primary" size="small">添加账号</Button>
+        </Slot>
+      </Header>
+      <div className="pi-flex-column"></div>
+      </div>
   )
 }

src/pages/Management/components/leftSide/index.scss

@@ -1,8 +1,11 @@
 .panel-sidebar {
+  position: fixed;
+  left: 55px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   width: 120px;
+  height: 100vh;
   background: #fbfcfd;
   border-right: 1px solid #dddddd;
   .sidebar-title {

src/pages/Management/components/leftSide/index.tsx

@@ -2,7 +2,8 @@ import { iNavSide } from '@/types/router'
 import React from 'react'
 import { Link } from 'react-router-dom'
 import "./index.scss"
-const leftSide:React.FC<iNavSide> = ({ childRoutes }) => {
+
+const leftSide:React.FC<iNavSide> = ({ childRoutes, location }) => {
   const pathname = location.pathname
   return (
     <div className="panel-sidebar">
@@ -11,9 +12,6 @@ const leftSide:React.FC<iNavSide> = ({ childRoutes }) => {
         { childRoutes.map((item, idx) =>
           item.meta && <Link key={idx} to={item.path} className={pathname.indexOf(item.path) !== -1 ? 'nav-link active' : 'nav-link'}>{item.meta.title}</Link>
         )}
-				{/* <Link>项目信息</Link>
-				<Link>账号设置</Link>
-				<Link>标段管理</Link> */}
       </div>
     </div>
   )

src/pages/Management/index.scss

@@ -0,0 +1 @@
+

src/pages/Management/index.tsx

@@ -7,10 +7,12 @@ const Management:React.FC<NavigationGuardsProps> = props => {
   const { routeConfig, match, location } = props
   return (
     <>
-      <LeftSide childRoutes={routeConfig}></LeftSide>
-      <Switch>
-          <Guards routeConfig={routeConfig} match={match} location={location}></Guards>
-      </Switch>
+      <LeftSide childRoutes={routeConfig} location={location}></LeftSide>
+      <div className="panel-content">
+        <Switch>
+            <Guards routeConfig={routeConfig} match={match} location={location}></Guards>
+        </Switch>
+      </div>
     </>
   )
 }

src/router/routes.ts

@@ -1,17 +1,11 @@
 /**路由配置信息 */
 
-// 重定向的写法只能是
-// {
-//   path: '/',
-//   redirect: '/console'
-// }
-
 import AsyncModuleLoader from "@/components/AsyncModuleLoader/index"
 import { RouteModel } from '@/types/router'
 export const routeConfig: RouteModel[] = [
   {
     path: '/',
-    redirect: '/console'
+    redirect: '/console/dashboard'
   },
   {
     path: '/login',

src/store/mobx/frame/index.ts

@@ -50,9 +50,6 @@ class RouterState {
         this.routeNameMapping = pathNameMapping
         this.handledRouteConfig = handledRouteConfig
         this.defaultRouteMapping = defaultRouteMapping
-        console.log("routeNameMapping", pathNameMapping)
-        console.log("handledRouteConfig", handledRouteConfig)
-        console.log("defaultRouteMapping", defaultRouteMapping)
     }
 
     @observable routeNameMapping: Map<string, string> = new Map();

src/types/router.d.ts

@@ -11,6 +11,7 @@ interface RouteModel {
 
 interface iNavSide extends RouteProps {
   childRoutes: RouteModel[]
+  location: any
 }
 interface iMenu {
   icon?: string;