x

src/index.tsx

@@ -4,6 +4,8 @@ import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
+
+
 ReactDOM.render(
   <App />,
   document.getElementById('root')

src/layout/basicPage.tsx

@@ -5,7 +5,7 @@ import SiderMenu from './siderMenu';
 import './index.scss';
 
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
-
+import { withRouter, RouteComponentProps } from 'react-router-dom';
 const { Header, Footer, Content } = Layout;
 
 // 如果没有相应的登录校验跳转login页面
@@ -22,7 +22,7 @@ interface BasicPageI {
 }
 
 // 基本的 layout 布局
-const BasicPage: React.FC<BasicPageI> = props => {
+const BasicPage: React.FC<RouteComponentProps> = props => {
   const [collapsed, set_collapse] = useState(false);
   const [menuWidth, set_menuWidth] = useState(200);
   const token = sessionStorage.getItem('token') || 888;
@@ -35,6 +35,7 @@ const BasicPage: React.FC<BasicPageI> = props => {
       <Layout style={{ minHeight: '100vh' }}>
         <SiderMenu
           collapsed={collapsed}
+          pathName={props.match.path}
           style={{
             overflow: 'auto',
             height: '100vh',
@@ -77,4 +78,4 @@ const BasicPage: React.FC<BasicPageI> = props => {
     return <Login />;
   }
 };
-export default BasicPage;
+export default withRouter(BasicPage);

src/layout/siderMenu.tsx

 import React, { useState, useEffect } from 'react';
 import { Layout, Menu } from 'antd';
 import { Link } from 'react-router-dom';
+import { createFromIconfontCN } from '@ant-design/icons';
 
-import { PieChartOutlined, UserOutlined } from '@ant-design/icons';
+const MyIcon = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_n8ucanheuka6pqfr.js' // 在 iconfont.cn 上生成
+});
 
 const { Sider } = Layout;
 const { SubMenu } = Menu;
 
 interface ConfigI {
   collapsed: boolean;
+  pathName: string;
   style?: any;
 }
 
 const MenuBar: React.FC<ConfigI> = props => {
-  const [defKey, set_defKey] = useState('1');
-  const [openKey, set_openKey] = useState('');
-
-  useEffect(() => {
-    let menu_defKey = window.sessionStorage.getItem('menu_defKey') || '1';
-    let menu_openKey = window.sessionStorage.getItem('menu_openKey') || '1';
-    // console.log('menu_defKey', menu_defKey);
-    // console.log('menu_openKey', menu_openKey);
-    set_defKey(menu_defKey);
-    set_openKey(menu_openKey);
-  }, []);
+  const [defKey, set_defKey] = useState(
+    window.sessionStorage.getItem('menu_defKey') || '1'
+  );
+  const [openKey, set_openKey] = useState(
+    window.sessionStorage.getItem('menu_openKey') || '1'
+  );
 
   const routerConf = [
     {
       key: '1',
       title: '订单列表',
       path: '/orderList',
-      icon: <PieChartOutlined />
+      icon: 'icon-gongdan',
+      subs: []
     },
     {
       key: '2',
       title: '兑换码',
       path: '',
-      icon: <UserOutlined />,
+      icon: 'icon-set',
       subs: [
         {
           key: '3',
           title: '兑换码列表',
           path: '/exchangeCode',
-          icon: ''
+          icon: 'icon-jixiao'
         },
         {
           key: '4',
           title: '兑换码生成',
           path: '/generateCode',
-          icon: ''
+          icon: 'icon-people'
         }
       ]
     }
   ];
 
+  useEffect(() => {
+    matchPath(routerConf);
+  }, []);
+
+  const matchPath = (routerConf: any[]) => {
+    const curPathName = props.pathName;
+
+    const match = (routeItem: any, defKey: string, openKey: string) => {
+      if (routeItem.path === curPathName) {
+        set_defKey(defKey);
+        set_openKey(openKey);
+        window.sessionStorage.setItem('menu_defKey', defKey);
+        window.sessionStorage.setItem('menu_openKey', openKey);
+      }
+    };
+
+    routerConf.map(item => {
+      if (item.subs.length === 0) {
+        match(item, item.key, item.key);
+      }
+      if (item.subs.length) {
+        item.subs.map((d: any) => {
+          match(d, d.key, item.key);
+        });
+      }
+    });
+  };
+
+  const CreateIcon = (type: string) => {
+    return <MyIcon type={type} />;
+  };
+
   const CreateItem = (item: any) => {
     return (
-      <Menu.Item key={item.key} icon={item.icon}>
+      <Menu.Item key={item.key} icon={CreateIcon(item.icon)}>
         <Link to={item.path}>{item.title}</Link>
       </Menu.Item>
     );
@@ -66,7 +98,11 @@ const MenuBar: React.FC<ConfigI> = props => {
     return routerConf.map(item => {
       if (item.subs && item.subs.length > 0) {
         return (
-          <SubMenu key={item.key} icon={item.icon} title={item.title}>
+          <SubMenu
+            key={item.key}
+            icon={CreateIcon(item.icon)}
+            title={item.title}
+          >
             {item.subs.map(idx => CreateItem(idx))}
           </SubMenu>
         );
@@ -108,8 +144,7 @@ const MenuBar: React.FC<ConfigI> = props => {
         <Menu
           theme="dark"
           defaultSelectedKeys={[defKey]}
-          defaultOpenKeys={['2']}
-          // defaultOpenKeys={[openKey]}
+          defaultOpenKeys={[openKey]}
           selectedKeys={[defKey]}
           mode="inline"
           onClick={handleClick}