fix: layout typo

locales/en_US.json

@@ -59,7 +59,8 @@
     "getRouteError": "Failed to obtain route, please try again later.",
     "layoutSetting": "Layout settings",
     "leftMenu": "Left menu",
-    "topMenu": "Top menu"
+    "topMenu": "Top menu",
+    "mixMenu": "Mix menu"
   },
   "login": {
     "signInTitle": "Login",

locales/zh_CN.json

@@ -59,7 +59,8 @@
     "getRouteError": "获取路由失败，请稍后再试",
     "layoutSetting": "布局设置",
     "leftMenu": "左侧菜单",
-    "topMenu": "顶部菜单"
+    "topMenu": "顶部菜单",
+    "mixMenu": "混合菜单"
   },
   "http": {
     "400": "请求出现语法错误",

package.json

@@ -58,6 +58,7 @@
     "md-editor-v3": "^4.15.2",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "quill": "^2.0.2",
     "radash": "^12.1.0",
     "vue": "^3.4.29",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ dependencies:
   pinia-plugin-persist:
     specifier: ^1.0.0
     version: 1.0.0(pinia@2.1.7)(vue@3.4.30)
+  pinia-plugin-persistedstate:
+    specifier: ^3.2.1
+    version: 3.2.1(pinia@2.1.7)
   quill:
     specifier: ^2.0.2
     version: 2.0.2
@@ -4583,6 +4586,14 @@ packages:
       vue-demi: 0.12.5(vue@3.4.30)
     dev: false
 
+  /pinia-plugin-persistedstate@3.2.1(pinia@2.1.7):
+    resolution: {integrity: sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==}
+    peerDependencies:
+      pinia: ^2.0.0
+    dependencies:
+      pinia: 2.1.7(typescript@5.5.2)(vue@3.4.30)
+    dev: false
+
   /pinia@2.1.7(typescript@5.5.2)(vue@3.4.30):
     resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==}
     peerDependencies:

src/hooks/useEcharts.ts

@@ -78,6 +78,9 @@ export function useEcharts(el: Ref<HTMLElement | null>, chartOptions: Ref<ECOpti
   const isRendered = computed(() => Boolean(el && chart))
 
   async function render() {
+    // 宽或高不存在时不渲染
+    if (!width || !height) return
+
     const chartTheme = appStore.colorMode ? 'dark' : 'light'
     await nextTick()
     if (el) {

src/layouts/components/common/LayoutSelector.vue

@@ -12,11 +12,10 @@ const value = defineModel<LayoutMode>('value', { required: true })
           :class="{
             'outline outline-2': value === 'leftMenu',
           }"
-          class="grid grid-cols-[20%_1fr] grid-rows-[20%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
+          class="grid grid-cols-[20%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
           @click="value = 'leftMenu'"
         >
-          <div class="bg-[var(--primary-color)] row-span-2" />
+          <div class="bg-[var(--primary-color)]" />
-          <div class="bg-[var(--primary-color-suppl)]" />
           <div class="bg-[var(--divider-color)]" />
         </n-el>
       </template>
@@ -45,16 +44,15 @@ const value = defineModel<LayoutMode>('value', { required: true })
           :class="{
             'outline outline-2': value === 'mixMenu',
           }"
-          class="grid grid-cols-[20%_1fr] grid-rows-[15%_15%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
+          class="grid grid-cols-[20%_1fr] grid-rows-[20%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
           @click="value = 'mixMenu'"
         >
-          <div class="bg-[var(--primary-color)] row-span-3" />
+          <div class="bg-[var(--primary-color)] row-span-2" />
           <div class="bg-[var(--primary-color)]" />
-          <div class="bg-[var(--primary-color-suppl)]" />
           <div class="bg-[var(--divider-color)]" />
         </n-el>
       </template>
-      <span> {{ $t('app.topMenu') }} </span>
+      <span> {{ $t('app.mixMenu') }} </span>
     </n-tooltip>
   </div>
 </template>

src/layouts/mixMenu.layout.vue

@@ -46,11 +46,13 @@ onMounted(() => {
 
   // 根据当前页面获取选中菜单和对应侧边菜单
   const currentMenuKey = pageRoute.matched[1].path
-  updateTopMenu(currentMenuKey)
+  handleSideMenu(currentMenuKey)
+  activeTopMenu.value = currentMenuKey
 })
 
 const sideMenu = ref<MenuOption[]>([])
 function handleSideMenu(key: string) {
+  // @ts-ignore
   const targetMenu = routeStore.menus.find(i => i.key === key)
   if (targetMenu) {
     sideMenu.value = targetMenu.children ? targetMenu.children : [targetMenu]

src/store/app/index.ts

@@ -124,11 +124,6 @@ export const useAppStore = defineStore('app-store', {
     },
   },
   persist: {
-    enabled: true,
+    storage: localStorage,
-    strategies: [
-      {
-        storage: localStorage,
-      },
-    ],
   },
 })

src/store/index.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue'
-import piniaPluginPersist from 'pinia-plugin-persist'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 export * from './app/index'
 export * from './auth'
@@ -9,6 +9,6 @@ export * from './tab'
 // 安装pinia全局状态库
 export function installPinia(app: App) {
   const pinia = createPinia()
-  pinia.use(piniaPluginPersist)
+  pinia.use(piniaPluginPersistedstate)
   app.use(pinia)
 }

src/store/tab.ts

@@ -97,11 +97,6 @@ export const useTabStore = defineStore('tab-store', {
     },
   },
   persist: {
-    enabled: true,
+    storage: sessionStorage,
-    strategies: [
-      {
-        storage: sessionStorage,
-      },
-    ],
   },
 })