Merge pull request #472 from souvenp/feat/menu-expand

feat: 左上角菜单展开状态持久保存

src/main/set.json

@@ -28,6 +28,7 @@
   "contentZoomFactor": 1,
   "autoTheme": false,
   "manualTheme": "light",
+  "isMenuExpanded": false,
   "customApiPlugin": "",
   "customApiPluginName": ""
 }

src/renderer/layout/components/AppMenu.vue

@@ -1,15 +1,15 @@
 <template>
   <div>
     <!-- menu -->
-    <div class="app-menu" :class="{ 'app-menu-expanded': isText }">
+    <div class="app-menu" :class="{ 'app-menu-expanded': settingsStore.setData.isMenuExpanded }">
       <div class="app-menu-header">
-        <div class="app-menu-logo" @click="isText = !isText">
+        <div class="app-menu-logo" @click="toggleMenu">
           <img :src="icon" class="w-9 h-9" alt="logo" />
         </div>
       </div>
       <div class="app-menu-list">
         <div v-for="(item, index) in menus" :key="item.path" class="app-menu-item">
-          <n-tooltip :delay="200" :disabled="isText || isMobile" placement="bottom">
+          <n-tooltip :delay="200"  :disabled="settingsStore.setData.isMenuExpanded || isMobile" placement="bottom">
             <template #trigger>
               <router-link class="app-menu-item-link" :to="item.path">
                 <i
@@ -18,14 +18,14 @@
                   :class="item.meta.icon"
                 ></i>
                 <span
-                  v-if="isText"
+                  v-if="settingsStore.setData.isMenuExpanded"
                   class="app-menu-item-text ml-3"
                   :class="isChecked(index) ? 'text-green-500' : ''"
                   >{{ t(item.meta.title) }}</span
                 >
               </router-link>
             </template>
-            <div v-if="!isText">{{ t(item.meta.title) }}</div>
+            <div v-if="!settingsStore.setData.isMenuExpanded">{{ t(item.meta.title) }}</div>
           </n-tooltip>
         </div>
       </div>
@@ -40,6 +40,7 @@ import { useRoute } from 'vue-router';
 
 import icon from '@/assets/icon.png';
 import { isMobile } from '@/utils';
+import { useSettingsStore } from '@/store';
 
 const props = defineProps({
   size: {
@@ -62,6 +63,7 @@ const props = defineProps({
 
 const route = useRoute();
 const path = ref(route.path);
+const settingsStore = useSettingsStore();
 watch(
   () => route.path,
   async (newParams) => {
@@ -83,7 +85,11 @@ const iconStyle = (index: number) => {
   return style;
 };
 
-const isText = ref(false);
+const toggleMenu = () => {
+  settingsStore.setSetData({
+    isMenuExpanded: !settingsStore.setData.isMenuExpanded
+  });
+};
 </script>
 
 <style lang="scss" scoped>