更新

.umirc.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "umi";
 import routes from './config/routes/index'
 
 export default defineConfig({
+  hash: true,
   routes,
   npmClient: 'yarn',
 });

config/routes/index.ts

@@ -42,27 +42,27 @@ const routes = [
 
   // ------------------------------MY管理----------------------------------
   // 密钥体管理
-  // { path: '/KeyBodyManage/name', name: '密钥体格式导入', component: '@/pages/MY/KeyBodyManage/name' },
+  { path: '/KeyBodyManage/formatImport', name: '密钥体格式导入', component: '@/pages/MY/KeyBodyManage/FormatImport' },
-  // { path: '/KeyBodyManage/name', name: '密钥体格式发布', component: '@/pages/MY/KeyBodyManage/name' },
+  { path: '/KeyBodyManage/formatPublishing', name: '密钥体格式发布', component: '@/pages/MY/KeyBodyManage/FormatPublishing' },
-  // { path: '/KeyBodyManage/name', name: '密钥体申请', component: '@/pages/MY/KeyBodyManage/name' },
+  { path: '/KeyBodyManage/application', name: '密钥体申请', component: '@/pages/MY/KeyBodyManage/Application' },
-  // { path: '/KeyBodyManage/name', name: '密钥体导入', component: '@/pages/MY/KeyBodyManage/name' },
+  { path: '/KeyBodyManage/import', name: '密钥体导入', component: '@/pages/MY/KeyBodyManage/Import' },
-  // { path: '/KeyBodyManage/name', name: '密钥体接收单', component: '@/pages/MY/KeyBodyManage/name' },
+  { path: '/KeyBodyManage/receiptForm', name: '密钥体接收单', component: '@/pages/MY/KeyBodyManage/ReceiptForm' },
-  // { path: '/KeyBodyManage/name', name: '已清理密钥体', component: '@/pages/MY/KeyBodyManage/name' },
+  { path: '/KeyBodyManage/cleaned', name: '已清理密钥体', component: '@/pages/MY/KeyBodyManage/Cleaned' },
-  // { path: '/KeyBodyManage/name', name: '密钥体代号对照表', component: '@/pages/MY/KeyBodyManage/name' },
+  { path: '/KeyBodyManage/codeComparisonTable', name: '密钥体代号对照表', component: '@/pages/MY/KeyBodyManage/CodeComparisonTable' },
-  // { path: '/KeyBodyManage/name', name: '向下级配发', component: '@/pages/MY/KeyBodyManage/name' },
+  { path: '/KeyBodyManage/subordinateDistr', name: '向下级配发', component: '@/pages/MY/KeyBodyManage/SubordinateDistr' },
-  // { path: '/KeyBodyManage/name', name: '向邮箱配发', component: '@/pages/MY/KeyBodyManage/name' },
+  { path: '/KeyBodyManage/emailDistr', name: '向邮箱配发', component: '@/pages/MY/KeyBodyManage/EmailDistr' },
-  // { path: '/KeyBodyManage/name', name: '向专用密码管理系统配发', component: '@/pages/MY/KeyBodyManage/name' },
+  { path: '/KeyBodyManage/systemDistr', name: '向专用密码管理系统配发', component: '@/pages/MY/KeyBodyManage/SystemDistr' },
-  // { path: '/KeyBodyManage/name', name: '密钥体配发三联单', component: '@/pages/MY/KeyBodyManage/name' },
+  { path: '/KeyBodyManage/distrTriple', name: '密钥体配发三联单', component: '@/pages/MY/KeyBodyManage/DistrTriple' },
-  // { path: '/KeyBodyManage/name', name: '明文载体包封', component: '@/pages/MY/KeyBodyManage/name' },
+  { path: '/KeyBodyManage/plaintext', name: '明文载体包封', component: '@/pages/MY/KeyBodyManage/Plaintext' },
-  // { path: '/KeyBodyManage/name', name: '密文载体包封', component: '@/pages/MY/KeyBodyManage/name' },
+  { path: '/KeyBodyManage/ciphertext', name: '密文载体包封', component: '@/pages/MY/KeyBodyManage/Ciphertext' },
   // 密钥管理
-  // { path: '/KeyManage/name', name: '管理系统管理盘数据维护', component: '@/pages/MY/KeyManage/name' },
+  { path: '/KeyManage/dataMaintenance', name: '管理系统管理盘数据维护', component: '@/pages/MY/KeyManage/DataMaintenance' },
-  // { path: '/KeyManage/name', name: '统型完善普密设备密钥互通关系配置', component: '@/pages/MY/KeyManage/name' },
+  { path: '/KeyManage/relationConfig', name: '统型完善普密设备密钥互通关系配置', component: '@/pages/MY/KeyManage/RelationConfig' },
-  // { path: '/KeyManage/name', name: '管理密钥装配', component: '@/pages/MY/KeyManage/name' },
+  { path: '/KeyManage/manageKeys', name: '管理密钥装配', component: '@/pages/MY/KeyManage/ManageKeys' },
-  // { path: '/KeyManage/name', name: '用户密钥装配', component: '@/pages/MY/KeyManage/name' },
+  { path: '/KeyManage/userKey', name: '用户密钥装配', component: '@/pages/MY/KeyManage/UserKey' },
-  // { path: '/KeyManage/name', name: '专用密钥装配', component: '@/pages/MY/KeyManage/name' },
+  { path: '/KeyManage/privateKey', name: '专用密钥装配', component: '@/pages/MY/KeyManage/PrivateKey' },
-  // { path: '/KeyManage/name', name: '密钥配置查询', component: '@/pages/MY/KeyManage/name' },
+  { path: '/KeyManage/keyConfigQuery', name: '密钥配置查询', component: '@/pages/MY/KeyManage/KeyConfigQuery' },
-  // { path: '/KeyManage/name', name: '密钥配发三联单', component: '@/pages/MY/KeyManage/name' },
+  { path: '/KeyManage/tripleKeyDistri', name: '密钥配发三联单', component: '@/pages/MY/KeyManage/TripleKeyDistri' },
   // 邮箱管理
   { path: '/mailboxManage/index', name: '邮箱管理', component: '@/pages/MY/MailboxManage/index' },
   // ---------------------------------------------------------------------------
@@ -70,10 +70,10 @@ const routes = [
 
   // ------------------------------SB管理----------------------------------
   // 设备管理
-  // { path: '/DeviceManage/name', name: '执勤区配置', component: '@/pages/SB/DeviceManage/name' },
+  { path: '/DeviceManage/dutyAreaConfig', name: '执勤区配置', component: '@/pages/SB/DeviceManage/DutyAreaConfig' },
-  // { path: '/DeviceManage/name', name: '数据同步', component: '@/pages/SB/DeviceManage/name' },
+  { path: '/DeviceManage/dataSync', name: '数据同步', component: '@/pages/SB/DeviceManage/DataSync' },
-  // { path: '/DeviceManage/name', name: '远程维护', component: '@/pages/SB/DeviceManage/name' },
+  { path: '/DeviceManage/remoteMaintenance', name: '远程维护', component: '@/pages/SB/DeviceManage/RemoteMaintenance' },
-  // { path: '/DeviceManage/name', name: '报号维护', component: '@/pages/SB/DeviceManage/name' },
+  { path: '/DeviceManage/numberMaintenance', name: '报号维护', component: '@/pages/SB/DeviceManage/NumberMaintenance' },
   // 日志管理
   { path: '/logManage/index', name: '日志管理', component: '@/pages/SB/LogManage/index' },
   // 审计管理

src/components/LeftMenuOne/index.less

@@ -16,9 +16,9 @@
     right: 20px;
     width: 0;
     height: 0;
-    border-top: 6px solid #fff;
+    border-left: 6px solid #fff;
-    border-right: 6px solid transparent;
+    border-bottom: 6px solid transparent;
-    border-left: 6px solid transparent;
+    border-top: 6px solid transparent;
     transition: all 0.15s ease-in;
   }
 }

src/components/LeftMenuOne/index.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import styles from './index.less';
-import {history} from 'umi';
+import {history, useLocation, useParams} from 'umi';
 
 interface PageProps {
   data: Array<{
@@ -16,6 +16,7 @@ interface PageProps {
 const LeftMenuCom: FC<PageProps> = ({ data }) => {
 
   const [list, setList] = useState<any>([]);
+  const route = useLocation();
 
   useEffect(() => {
     data.forEach((item,index) => {
@@ -38,7 +39,7 @@ const LeftMenuCom: FC<PageProps> = ({ data }) => {
               setList([...list])
             }}>
               <div>{item.name}</div>
-              <div className={styles.triangle} style={{ transform: list[index].check ? 'rotate(180deg)' : '' }}></div>
+              <div className={styles.triangle} style={{ transform: list[index].check ? 'rotate(90deg)' : '' }}></div>
             </div>
             {/* 列表 */}
             <div className={styles.item_warp} style={{ display: list[index].check ? 'block' : 'none' }}>
@@ -47,7 +48,9 @@ const LeftMenuCom: FC<PageProps> = ({ data }) => {
                   return (
                     <div className={styles.item1} key={index1}  onClick={() => history.push(item1.url) }>
                       <div className={styles.item1_img}></div>
-                      <div className={styles.item1_name}>{item1.name}</div>
+                      <div className={styles.item1_name} style={{color: (route.pathname == item1.url ? 'red' : '')}}>
+                        {item1.name}
+                      </div>
                     </div>
                   )
                 })

src/components/LeftMenuTwo/index.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from 'react';
-import { history } from "umi";
+import { history, useLocation } from "umi";
 import styles from './index.less';
 
 interface PageProps {
@@ -16,6 +16,7 @@ interface PageProps {
 const LeftMenuCom: FC<PageProps> = ({ data }) => {
 
   const [list, setList] = useState<any>([]);
+  const route = useLocation();
 
   useEffect(() => {
     setList([...data])
@@ -27,7 +28,9 @@ const LeftMenuCom: FC<PageProps> = ({ data }) => {
         return (
           <div className={styles.item1} key={index} onClick={() => history.push(item.url)}>
             <div className={styles.item1_img}></div>
-            <div className={styles.item1_name}>{item.name}</div>
+            <div className={styles.item1_name} style={{color: (route.pathname == item.url ? 'red' : '')}}>
+              {item.name}
+            </div>
           </div>
         )
       })}

src/layouts/index.tsx

@@ -1,5 +1,5 @@
 
-import { Outlet, history } from 'umi';
+import { Outlet, history, useLocation } from 'umi';
 import styles from './index.less';
 import { useEffect, useState } from 'react';
 import { MenuType, tabsType } from '@/utils/menu';
@@ -48,14 +48,36 @@ export default function Layout() {
   const [active, setActive] = useState<number>(1);
   const [activeName, setActiveName] = useState<any>('GLQ远程维护');
 
+  // 获取布局信息
+  let layoutInfo: any = localStorage.getItem('layoutInfo');
+  layoutInfo = JSON.parse(layoutInfo);
+
   useEffect(() => {
-    setTabList([...tabsType[selectVal]])
+    // 校验浏览器是否有储存的布局信息
+    if (layoutInfo) {
+      setActive(layoutInfo.active);
+      setActiveName(layoutInfo.activeName);
+      setSelectVal(layoutInfo.selectVal);
+      setTabList([...tabsType[layoutInfo.selectVal]]);
+    } else {
+      setTabList([...tabsType[selectVal]]);
+    }
   }, [])
 
+  // 页面销毁前记录下当前布局信息
+  window.addEventListener('beforeunload', function (event) {
+    let layoutInfo: any = {
+      selectVal: selectVal,
+      active: active,
+      activeName: activeName,
+    }
+    localStorage.setItem('layoutInfo', JSON.stringify(layoutInfo));
+  });
+
   useEffect(() => {
-    if (tabList.length > 0) {
+    // 条件判断： 当选择框的值发生改变时，在（tabList长度大于0 并且 没有发现记录布局的数据）时 ，默认进入第一个模块的页面
+    if (tabList.length > 0 && !layoutInfo) {
       setActiveName(tabList[0].name)
-
       let info = MenuType[tabList[0].name];
       if (info[0].data) {
         history.push(`${info[0].data[0].url}`)
@@ -65,7 +87,6 @@ export default function Layout() {
     }
   }, [selectVal])
 
-
   return (
     <div id={styles.layout_main}>
       {/* 顶部导航 */}
@@ -81,6 +102,8 @@ export default function Layout() {
             value={selectVal}
             style={{ width: 180 }}
             onChange={(e) => {
+              // 改变下拉框数据时将布局信息清空
+              localStorage.setItem('layoutInfo', JSON.stringify(null));
               setSelectVal(e)
               setTabList([...tabsType[e]])
               setActive(1)

src/pages/MY/KeyBodyManage/CodeComparisonTable/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyBodyManage/DistrTriple/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyBodyManage/EmailDistr/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyBodyManage/FormatImport/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyBodyManage/FormatPublishing/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyBodyManage/Import/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyBodyManage/Plaintext/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyBodyManage/ReceiptForm/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyBodyManage/SubordinateDistr/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyBodyManage/SystemDistr/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyManage/DataMaintenance/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyManage/KeyConfigQuery/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyManage/ManageKeys/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyManage/PrivateKey/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyManage/RelationConfig/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyManage/TripleKeyDistri/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/MY/KeyManage/UserKey/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/SB/DeviceManage/DataSync/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      数据同步
+    </div>
+  );
+}

src/pages/SB/DeviceManage/DutyAreaConfig/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/SB/DeviceManage/NumberMaintenance/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/pages/SB/DeviceManage/RemoteMaintenance/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  );
+}

src/utils/menu.ts

@@ -85,39 +85,39 @@ export const MenuType: any = {
       name: '密钥体格式管理',
       check: true,
       data: [
-        { name: '密钥体格式导入', url: '', img: '' },
+        { name: '密钥体格式导入', url: '/KeyBodyManage/formatImport', img: '' },
-        { name: '密钥体格式发布', url: '', img: '' },
+        { name: '密钥体格式发布', url: '/KeyBodyManage/formatPublishing', img: '' },
       ]
     }, {
       name: '密钥体申请',
       check: true,
       data: [
-        { name: '密钥体申请', url: '', img: '' }
+        { name: '密钥体申请', url: '/KeyBodyManage/application', img: '' }
       ]
     }, {
       name: '密钥体导入',
       check: true,
       data: [
-        { name: '密钥体导入', url: '', img: '' },
+        { name: '密钥体导入', url: '/KeyBodyManage/import', img: '' },
-        { name: '密钥体接收单', url: '', img: '' },
+        { name: '密钥体接收单', url: '/KeyBodyManage/receiptForm', img: '' },
-        { name: '已清理密钥体', url: '', img: '' },
+        { name: '已清理密钥体', url: '/KeyBodyManage/cleaned', img: '' },
-        { name: '密钥体代号对照表', url: '', img: '' }
+        { name: '密钥体代号对照表', url: '/KeyBodyManage/codeComparisonTable', img: '' }
       ]
     }, {
       name: '密钥体配发',
       check: true,
       data: [
-        { name: '向下级配发', url: '', img: '' },
+        { name: '向下级配发', url: '/KeyBodyManage/subordinateDistr', img: '' },
-        { name: '向邮箱配发', url: '', img: '' },
+        { name: '向邮箱配发', url: '/KeyBodyManage/emailDistr', img: '' },
-        { name: '向专用密码管理系统配发', url: '', img: '' },
+        { name: '向专用密码管理系统配发', url: '/KeyBodyManage/systemDistr', img: '' },
-        { name: '密钥体配发三联单', url: '', img: '' },
+        { name: '密钥体配发三联单', url: '/KeyBodyManage/distrTriple', img: '' },
       ]
     }, {
       name: '密钥体载体包封',
       check: true,
       data: [
-        { name: '明文载体包封', url: '', img: '' },
+        { name: '明文载体包封', url: '/KeyBodyManage/plaintext', img: '' },
-        { name: '密文载体包封', url: '', img: '' },
+        { name: '密文载体包封', url: '/KeyBodyManage/ciphertext', img: '' },
       ]
     },
   ],
@@ -126,13 +126,13 @@ export const MenuType: any = {
       name: '密钥装配',
       check: true,
       data: [
-        { name: '管理系统管理盘数据维护', url: '', img: '' },
+        { name: '管理系统管理盘数据维护', url: '/KeyManage/dataMaintenance', img: '' },
-        { name: '统型完善普密设备密钥互通关系配置', url: '', img: '' },
+        { name: '统型完善普密设备密钥互通关系配置', url: '/KeyManage/relationConfig', img: '' },
-        { name: '管理密钥装配', url: '', img: '' },
+        { name: '管理密钥装配', url: '/KeyManage/manageKeys', img: '' },
-        { name: '用户密钥装配', url: '', img: '' },
+        { name: '用户密钥装配', url: '/KeyManage/userKey', img: '' },
-        { name: '专用密钥装配', url: '', img: '' },
+        { name: '专用密钥装配', url: '/KeyManage/privateKey', img: '' },
-        { name: '密钥配置查询', url: '', img: '' },
+        { name: '密钥配置查询', url: '/KeyManage/keyConfigQuery', img: '' },
-        { name: '密钥配发三联单', url: '', img: '' }
+        { name: '密钥配发三联单', url: '/KeyManage/tripleKeyDistri', img: '' }
       ]
     },
     { name: '密码机安装', check: true, data: [] },
@@ -150,10 +150,10 @@ export const MenuType: any = {
       name: '系统配置',
       check: true,
       data: [
-        { name: '执勤区配置', url: '', img: '' },
+        { name: '执勤区配置', url: '/DeviceManage/dutyAreaConfig', img: '' },
-        { name: '数据同步', url: '', img: '' },
+        { name: '数据同步', url: '/DeviceManage/dataSync', img: '' },
-        { name: '远程维护', url: '', img: '' },
+        { name: '远程维护', url: '/DeviceManage/remoteMaintenance', img: '' },
-        { name: '报号维护', url: '', img: '' },
+        { name: '报号维护', url: '/DeviceManage/numberMaintenance', img: '' },
       ]
     },
   ],