submenu

frontend/package.json

@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "ant-design-vue": "^1.7.2",
+    "ant-design-vue": "^1.7.8",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "store": "^2.0.12",

frontend/src/api/main.js

@@ -31,11 +31,11 @@ const specialIpcRoute = {
 }
 
 /**
- * 访问http服务
+ * 访问内置http服务
  */
 const requestHttp = (uri, parameter) => {
+  // url转换
   const url = uri.split('.').join('/');
-  console.log('url:', url);
   return request({
     url: url,
     method: 'post', 

frontend/src/config/router.config.js

@@ -2,12 +2,8 @@
  * 基础路由
  * @type { *[] }
  */
- import {AppSider, Menu} from '@/layouts'
+import {AppSider, Menu} from '@/layouts'
 
- const RouteView = {
-   name: 'RouteView',
-   render: (h) => h('router-view')
- }
 export const constantRouterMap = [
   {
     path: '/',
@@ -17,13 +13,10 @@ export const constantRouterMap = [
         path: '/base',
         name: 'Base',
         component: Menu,
+        props: { id: 'base' },
+        redirect: { name: 'BaseFileIndex' },
         children: [
           {
-            path: '/base/index',
-            name: 'BaseIndex',
-            component: () => import('@/views/base/file/Index')
-          },
-          {
             path: '/base/file/index',
             name: 'BaseFileIndex',
             component: () => import('@/views/base/file/Index')
@@ -91,9 +84,18 @@ export const constantRouterMap = [
         ]  
       },
       {
-        path: '/other/index',
-        name: 'OtherIndex',
-        component: () => import('@/views/other/Index')
+        path: '/other',
+        name: 'Other',
+        component: Menu,
+        props: { id: 'other' },
+        redirect: { name: 'OtherTestIndex' },
+        children: [
+          {
+            path: '/other/test/index',
+            name: 'OtherTestIndex',
+            component: () => import('@/views/other/test/Index')
+          },
+        ] 
       }
     ]
   }

frontend/src/config/subMenu.js

@@ -0,0 +1,87 @@
+/**
+ * 子菜单
+ */
+export default {
+	base: {
+		'menu_100' : {
+			icon: 'profile',
+			title: '文件',
+			pageName: 'BaseFileIndex',
+			params: {}
+		},
+		'menu_300' : {
+			icon: 'profile',
+			title: '通信',
+			pageName: 'BaseSocketIndex',
+			params: {}
+		},
+		'menu_301' : {
+			icon: 'profile',
+			title: '数据库',
+			pageName: 'BaseDBIndex',
+			params: {}
+		},
+		'menu_400' : {
+			icon: 'profile',
+			title: '视图',
+			pageName: 'BaseWindowViewIndex',
+			params: {}
+		},
+		'menu_401' : {
+			icon: 'profile',
+			title: '窗口',
+			pageName: 'BaseWindowIndex',
+			params: {}
+		},
+		'menu_405' : {
+			icon: 'profile',
+			title: '桌面通知',
+			pageName: 'BaseNotificationIndex',
+			params: {}
+		},
+		'menu_407' : {
+			icon: 'profile',
+			title: '电源监控',
+			pageName: 'BasePowerMonitorIndex',
+			params: {}
+		},
+		'menu_409' : {
+			icon: 'profile',
+			title: '屏幕信息',
+			pageName: 'BaseScreenIndex',
+			params: {}
+		},
+		'menu_411' : {
+			icon: 'profile',
+			title: '系统主题',
+			pageName: 'BaseThemeIndex',
+			params: {}
+		},   
+		'menu_412' : {
+			icon: 'profile',
+			title: '自动更新',
+			pageName: 'BaseUpdaterIndex',
+			params: {}
+		},    
+		'menu_500' : {
+			icon: 'profile',
+			title: '软件调用',
+			pageName: 'BaseSoftwareIndex',
+			params: {}
+		},
+		'menu_900' : {
+			icon: 'profile',
+			title: '测试',
+			pageName: 'BaseTestApiIndex',
+			params: {}
+		}                                                 
+	},
+	other: {
+		'menu_100' : {
+			icon: 'profile',
+			title: '测试',
+			pageName: 'OtherTestIndex',
+			params: {}
+		},
+	}	
+}

frontend/src/layouts/AppSider.vue

@@ -8,7 +8,7 @@
       <div class="logo">
         <img class="pic-logo" src="~@/assets/logo.png">
       </div>
-      <a-menu class="menu-item" theme="light" mode="inline" :default-selected-keys="['menu_1']" @click="menuHandle">
+      <a-menu class="menu-item" theme="light" mode="inline" :default-selected-keys="[default_key]" @click="menuHandle">
         <a-menu-item v-for="(menuInfo, index) in menu" :key="index">
           <a-icon :type="menuInfo.icon" />
           {{ menuInfo.title }}
@@ -28,29 +28,37 @@ export default {
   data() {
     return {
       collapsed: true,
+      default_key: 'menu_1',
+      current: '',
       menu: {
         'menu_1' : {
           icon: 'home',
-          title: '功能',
-          pageName: 'BaseIndex',
+          title: '框架',
+          pageName: 'Base',
           params: {},
         },
         'menu_2' : {
-          icon: 'profile',
+          icon: 'desktop',
           title: '其它',
-          pageName: 'OtherIndex',
+          pageName: 'Other',
           params: {},
-        }
+        },              
       }
     };
   },
-  created () {},
+  created () {
+    //console.log('[sider] [created] 1');
+  },
   mounted () {
-    this.menuHandle({key: 'menu_1'})
+    //console.log('[sider] [mounted] 2');
+    this.menuHandle()
   },
   methods: {
-    menuHandle (item) {
-      const linkInfo = this.menu[item.key]
+    menuHandle (e) {
+      this.current = e ? e.key : this.default_key;
+      //console.log('[sider] [methods] 3');
+      //console.log('[sider] [methods] current', this.current);
+      const linkInfo = this.menu[this.current]
       console.log('[home] load page:', linkInfo.pageName);
       this.$router.push({ name: linkInfo.pageName, params: linkInfo.params})
     },

frontend/src/layouts/Menu.vue

@@ -4,7 +4,7 @@
       theme="light"
       class="layout-sider"
     >
-      <a-menu theme="light" mode="inline" :default-selected-keys="['menu_100']">
+      <a-menu theme="light" mode="inline" :default-selected-keys="[default_key]" :selected-keys="[current]" @click="menuClick">
         <a-menu-item v-for="(menuInfo, subIndex) in menu" :key="subIndex">
           <router-link :to="{ name: menuInfo.pageName, params: menuInfo.params}">
             <span>{{ menuInfo.title }}</span>
@@ -20,95 +20,50 @@
   </a-layout>
 </template>
 <script>
+import subMenu from '@/config/subMenu'
+
 export default {
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }
+  },
   data() {
     return {
-      menu: {
-        'menu_100' : {
-          icon: 'profile',
-          title: '文件',
-          pageName: 'BaseFileIndex',
-          params: {}
-        },
-        'menu_300' : {
-          icon: 'profile',
-          title: '通信',
-          pageName: 'BaseSocketIndex',
-          params: {}
-        },
-        'menu_301' : {
-          icon: 'profile',
-          title: '数据库',
-          pageName: 'BaseDBIndex',
-          params: {}
-        },
-        'menu_400' : {
-          icon: 'profile',
-          title: '视图',
-          pageName: 'BaseWindowViewIndex',
-          params: {}
-        },
-        'menu_401' : {
-          icon: 'profile',
-          title: '窗口',
-          pageName: 'BaseWindowIndex',
-          params: {}
-        },
-        'menu_405' : {
-          icon: 'profile',
-          title: '桌面通知',
-          pageName: 'BaseNotificationIndex',
-          params: {}
-        },
-        'menu_407' : {
-          icon: 'profile',
-          title: '电源监控',
-          pageName: 'BasePowerMonitorIndex',
-          params: {}
-        },
-        'menu_409' : {
-          icon: 'profile',
-          title: '屏幕信息',
-          pageName: 'BaseScreenIndex',
-          params: {}
-        },
-        'menu_411' : {
-          icon: 'profile',
-          title: '系统主题',
-          pageName: 'BaseThemeIndex',
-          params: {}
-        },   
-        'menu_412' : {
-          icon: 'profile',
-          title: '自动更新',
-          pageName: 'BaseUpdaterIndex',
-          params: {}
-        },    
-        'menu_500' : {
-          icon: 'profile',
-          title: '软件调用',
-          pageName: 'BaseSoftwareIndex',
-          params: {}
-        },
-        'menu_900' : {
-          icon: 'profile',
-          title: '测试',
-          pageName: 'BaseTestApiIndex',
-          params: {}
-        }                                                 
-      }
+      menu:{},
+      default_key: 'menu_100',
+      current: '',
+      keys: []
     };
   },
+  watch: {
+    id: function () {
+      this.menuHandle();
+    },
+  },
   created () {
   },
   mounted () {
-    this.menuHandle({key: 'menu_100'})
+    this.menuHandle();
   },
   methods: {
-    menuHandle (item) {
-      const linkInfo = this.menu[item.key]
-      this.$router.push({ name: linkInfo.pageName, params: linkInfo.params})
-    }
+    menuHandle () {
+      this.current = this.default_key; 
+      switch (this.id) {
+        case 'base' :
+          this.menu = subMenu.base;
+          break;
+        case 'other' :
+          this.menu = subMenu.other;
+          break;                                    
+      }
+      const linkInfo = this.menu[this.current];
+      this.$router.push({ name: linkInfo.pageName, params: linkInfo.params});
+    },
+    menuClick(e) {
+      this.current = e.key;
+    },
   }
 };
 </script>