vue3

electron/config/config.default.js

@@ -33,7 +33,7 @@ module.exports = (appInfo) => {
   /**
    * 开发者工具
    */
-  config.openDevTools = false;
+  config.openDevTools = true;
 
   /**
    * 应用程序顶部菜单

frontend/package.json

@@ -2,7 +2,7 @@
   "name": "ee",
   "version": "1.0.0",
   "scripts": {
-    "dev": "vite --host --port 3000",
+    "dev": "vite --host --port 8080",
     "build-staging": "vite build --mode staging",
     "build": "vite build",
     "serve": "vite preview"

frontend/src/layouts/AppSider.vue

@@ -4,11 +4,18 @@
       v-model="collapsed"
       theme="light"
       class="layout-sider"
+      width="80"
     >
       <div class="logo">
         <img class="pic-logo" src="~@/assets/logo.png">
       </div>
-      <a-menu class="menu-item" theme="light" mode="inline" :default-selected-keys="[default_key]" @click="menuHandle">
+      <a-menu 
+        class="menu-item" 
+        theme="light" 
+        mode="inline"
+        :selectedKeys="state.selectedKeys"
+        @click="handleClick"
+      >
         <a-menu-item v-for="(menuInfo, index) in menu" :key="index">
           <!-- <a-icon :type="menuInfo.icon" /> -->
           {{ menuInfo.title }}
@@ -23,19 +30,43 @@
   </a-layout>
 </template>
 <script>
+import { reactive } from 'vue';
+// import { useRoute, useRouter } from 'vue-router'
+
+// const Router = useRouter()
+// const Route = useRoute()
+// :default-selected-keys="[current]"
+
 export default {
   name: 'AppSider',
+  setup() {
+    const state = reactive({
+      selectedKeys: ['menu_1'],
+    });
+    
+    const handleClick = e => {
+      state.selectedKeys = [e.key];
+      console.log('state.selectedKeys:', state.selectedKeys)
+      //menuHandle ()
+    };
+
+    return {
+      state,
+      handleClick,
+    };
+  },
   data() {
     return {
       collapsed: true,
-      default_key: 'menu_1',
-      current: '',
+      current: 'menu_1',
       menu: {
         'menu_1' : {
           icon: 'home',
           title: '框架',
           pageName: 'Framework',
-          params: {},
+          params: {
+            // test: 'hello'
+          },
         },
         'menu_2' : {
           icon: 'desktop',
@@ -64,10 +95,9 @@ export default {
     this.menuHandle()
   },
   methods: {
-    menuHandle (e) {
-      this.current = e ? e.key : this.default_key;
+    menuHandle () {
       const linkInfo = this.menu[this.current]
-      console.log('[home] load page:', linkInfo.pageName);
+      console.log('[home] load linkInfo:', linkInfo);
       this.$router.push({ name: linkInfo.pageName, params: linkInfo.params})
     },
   },

frontend/src/layouts/Menu.vue

@@ -4,7 +4,11 @@
       theme="light"
       class="layout-sider"
     >
-      <a-menu theme="light" mode="inline" :default-selected-keys="[default_key]" :selected-keys="[current]" @click="menuClick">
+      <a-menu 
+        theme="light" 
+        mode="inline" 
+        :selectedKeys="state.selectedKeys"
+        @click="handleClick">
         <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,9 +24,25 @@
   </a-layout>
 </template>
 <script>
-import subMenu from '@/config/subMenu'
+import { reactive } from 'vue';
+// :default-selected-keys="[default_key]" 
+import subMenu from '@/config/subMenu';
 
 export default {
+  setup() {
+    const state = reactive({
+      selectedKeys: ['menu_100'],
+    });
+    
+    const handleClick = e => {
+      state.selectedKeys = [e.key];
+    };
+
+    return {
+      state,
+      handleClick,
+    };
+  },
   props: {
     id: {
       type: String,
@@ -32,8 +52,7 @@ export default {
   data() {
     return {
       menu:{},
-      default_key: 'menu_100',
-      current: '',
+      current: 'menu_100',
       keys: []
     };
   },
@@ -49,22 +68,14 @@ export default {
   },
   methods: {
     menuHandle () {
-      this.current = this.default_key;
+      // 该组件优先被加载了，所以没拿到参数
+      //console.log('params:', this.$route);
+    
+      console.log('menu ------ id:', this.id);
       this.menu = subMenu[this.id];
-      // 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>

frontend/src/router/routerMap.js

@@ -18,6 +18,7 @@ const constantRouterMap = [
         name: 'Framework',
         component: () => import('@/layouts/Menu.vue'),
         props: { id: 'framework' },
+        //props: true,
         redirect: { name: 'FrameworkSocketIpc' },
         children: [
           {

frontend/src/views/os/file/Index.vue

@@ -57,7 +57,7 @@
         @change="handleFileChange"
       >
         <p class="ant-upload-drag-icon">
-          <a-icon type="inbox" />
+          <!-- <icon-font type="inbox" /> -->
         </p>
         <p class="ant-upload-text">
           点击 或 拖拽文件到这里