From dd784f1f4ce7cb4f86c36aab256caed53a08eaf8 Mon Sep 17 00:00:00 2001
From: gaoshuaixing <gaoshuaixing@bilibili.com>
Date: Mon, 30 Dec 2024 18:39:08 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=20UI=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue                 |  13 ++--
 frontend/src/layouts/AppSider.vue    | 103 ++++++++++++---------------
 frontend/src/layouts/Menu.vue        |  78 +++++++++-----------
 frontend/src/views/os/file/Index.vue |   3 +-
 package.json                         |   2 +-
 5 files changed, 90 insertions(+), 109 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 9a6e2d3..f9684e6 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,13 +1,14 @@
 <template>
     <router-view/>
 </template>
+<script setup>
+import { onMounted } from 'vue';
 
-<script>
-export default {
-  name: 'App',
-  setup() {
-    document.getElementById('loadingPage').remove()
+onMounted(() => {
+  const loadingElement = document.getElementById('loadingPage');
+  if (loadingElement) {
+    loadingElement.remove();
   }
-}
+});
 </script>
 <style lang="less"></style>
diff --git a/frontend/src/layouts/AppSider.vue b/frontend/src/layouts/AppSider.vue
index b000f5d..a9ff2b4 100644
--- a/frontend/src/layouts/AppSider.vue
+++ b/frontend/src/layouts/AppSider.vue
@@ -29,65 +29,56 @@
     </a-layout>
   </a-layout>
 </template>
-<script>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
 
-export default {
-  name: 'AppSider',
-  data() {
-    return {
-      collapsed: true,
-      current: 'menu_1',
-      menu: {
-        'menu_1' : {
-          icon: 'icon-fengche',
-          title: '框架',
-          pageName: 'Framework',
-          params: {
-            // test: 'hello'
-          },
-        },
-        'menu_2' : {
-          icon: 'icon-niudan',
-          title: '系统',
-          pageName: 'Os',
-          params: {},
-        },
-        'menu_3' : {
-          icon: 'icon-liuxing',
-          title: '特效',
-          pageName: 'Effect',
-          params: {},
-        },   
-        'menu_4' : {
-          icon: 'icon-gouwu',
-          title: 'cross',
-          pageName: 'Cross',
-          params: {},
-        },          
-      }
-    };
-  },
-  created () {
-  },
-  mounted () {
-    this.menuHandle()
-  },
-  methods: {
-    menuHandle (e) {
-      console.log('sider menu e:', e);
-      this.current = e ? e.key : this.current;
-      console.log('sider menu current:', this.current);
+const router = useRouter();
 
-      const linkInfo = this.menu[this.current]
-      console.log('[home] load linkInfo:', linkInfo);
-      this.$router.push({ name: linkInfo.pageName, params: linkInfo.params})
-    },
-    changeMenu(e) {
-      console.log('sider menu e:', e);
-      //this.current = e.key;
-    }
+const collapsed = ref(true);
+const current = ref('menu_1');
+const menu = ref({
+  'menu_1': {
+    icon: 'icon-fengche',
+    title: '框架',
+    pageName: 'Framework',
+    params: {}
   },
-};
+  'menu_2': {
+    icon: 'icon-niudan',
+    title: '系统',
+    pageName: 'Os',
+    params: {}
+  },
+  'menu_3': {
+    icon: 'icon-liuxing',
+    title: '特效',
+    pageName: 'Effect',
+    params: {}
+  },
+  'menu_4': {
+    icon: 'icon-gouwu',
+    title: 'cross',
+    pageName: 'Cross',
+    params: {}
+  }
+});
+
+onMounted(() => {
+  menuHandle();
+});
+
+function menuHandle(e) {
+  console.log('sider menu e:', e);
+  if (e) {
+    current.value = e.key;
+  }
+  console.log('sider menu current:', current.value);
+
+  const linkInfo = menu.value[current.value];
+  console.log('[home] load linkInfo:', linkInfo);
+  router.push({ name: linkInfo.pageName, params: linkInfo.params });
+}
 </script>
 <style lang="less" scoped>
 // 嵌套
diff --git a/frontend/src/layouts/Menu.vue b/frontend/src/layouts/Menu.vue
index 40e64d8..d327c5a 100644
--- a/frontend/src/layouts/Menu.vue
+++ b/frontend/src/layouts/Menu.vue
@@ -23,53 +23,43 @@
     </a-layout>
   </a-layout>
 </template>
-<script>
-// import { reactive } from 'vue'; 
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
 import subMenu from '@/router/subMenu';
 
-export default {
-  props: {
-    id: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      menu:{},
-      //selectedKeys: ['menu_100'],
-      current: 'menu_100',
-      keys: []
-    };
-  },
-  watch: {
-    id: function () {
-      console.log('watch id ----- ', this.id);
-      this.current = 'menu_100';
-      this.menuHandle();
-    },
-  },
-  created () {
-  },
-  mounted () {
-    this.menuHandle();
-  },
-  methods: {
-    menuHandle () {
-      // 该组件优先被加载了，所以没拿到参数
-      //console.log('params:', this.$route);
-    
-      console.log('menu ------ id:', this.id);
-      this.menu = subMenu[this.id];
-      const linkInfo = this.menu[this.current];
-      this.$router.push({ name: linkInfo.pageName, params: linkInfo.params});
-    },
-    changeMenu(e) {
-      console.log('changeMenu e:', e);
-      this.current = e.key;
-    }
+const props = defineProps({
+  id: {
+    type: String,
+    default: ''
   }
-};
+});
+
+const router = useRouter();
+const current = ref('menu_100');
+const menu = ref({});
+
+watch(() => props.id, (newValue) => {
+  console.log('watch menu id ', newValue);
+  // 切换 appSider 时，重置 current
+  current.value = "menu_100"
+  menuHandle();
+});
+
+onMounted(() => {
+  menuHandle();
+});
+
+function menuHandle() {
+  console.log('handle menu id:', props.id);
+  menu.value = subMenu[props.id];
+  const linkInfo = menu.value[current.value];
+  router.push({ name: linkInfo.pageName, params: linkInfo.params });
+}
+
+function changeMenu(e) {
+  current.value = e.key;
+}
 </script>
 <style lang="less" scoped>
 #app-menu {
diff --git a/frontend/src/views/os/file/Index.vue b/frontend/src/views/os/file/Index.vue
index 7dcee03..06b6386 100644
--- a/frontend/src/views/os/file/Index.vue
+++ b/frontend/src/views/os/file/Index.vue
@@ -53,9 +53,8 @@
 <script setup>
 import { ipcApiRoute } from '@/api';
 import { ipc } from '@/utils/ipcRenderer';
-import storage from 'store2';
 
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 import { message } from 'ant-design-vue';
 
 const fileList = [
diff --git a/package.json b/package.json
index 8dbd564..902cede 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "cross-env": "^7.0.3",
     "debug": "^4.4.0",
     "ee-bin": "file:.yalc/ee-bin",
-    "electron": "^29.4.0",
+    "electron": "^31.7.6",
     "electron-builder": "^25.1.8"
   },
   "dependencies": {