From fb13609c0a1474911eef239ad178356398741dd4 Mon Sep 17 00:00:00 2001
From: gaoshuaixing <gaoshuaixing@bilibili.com>
Date: Thu, 13 Jul 2023 19:18:00 +0800
Subject: [PATCH] vue3

---
 electron/config/config.default.js    |  2 +-
 frontend/package.json                |  2 +-
 frontend/src/layouts/AppSider.vue    | 44 +++++++++++++++++++++++-----
 frontend/src/layouts/Menu.vue        | 43 +++++++++++++++++----------
 frontend/src/router/routerMap.js     |  1 +
 frontend/src/views/os/file/Index.vue |  2 +-
 6 files changed, 68 insertions(+), 26 deletions(-)

diff --git a/electron/config/config.default.js b/electron/config/config.default.js
index de1be48..724f0e9 100644
--- a/electron/config/config.default.js
+++ b/electron/config/config.default.js
@@ -33,7 +33,7 @@ module.exports = (appInfo) => {
   /**
    * 开发者工具
    */
-  config.openDevTools = false;
+  config.openDevTools = true;
 
   /**
    * 应用程序顶部菜单
diff --git a/frontend/package.json b/frontend/package.json
index a2dd300..937bb13 100644
--- a/frontend/package.json
+++ b/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"
diff --git a/frontend/src/layouts/AppSider.vue b/frontend/src/layouts/AppSider.vue
index c870794..7d3e5a0 100644
--- a/frontend/src/layouts/AppSider.vue
+++ b/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})
     },
   },
diff --git a/frontend/src/layouts/Menu.vue b/frontend/src/layouts/Menu.vue
index a2a27e8..3e297ad 100644
--- a/frontend/src/layouts/Menu.vue
+++ b/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>
diff --git a/frontend/src/router/routerMap.js b/frontend/src/router/routerMap.js
index 48a06ab..aae35d3 100644
--- a/frontend/src/router/routerMap.js
+++ b/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: [
           {
diff --git a/frontend/src/views/os/file/Index.vue b/frontend/src/views/os/file/Index.vue
index 5c4789b..94d5bcf 100644
--- a/frontend/src/views/os/file/Index.vue
+++ b/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">
           点击 或 拖拽文件到这里