From 8981f425715ea3d68b30657051f917052cac0467 Mon Sep 17 00:00:00 2001 From: chansee97 Date: Wed, 26 Jun 2024 19:19:29 +0800 Subject: [PATCH] fix: layout typo --- locales/en_US.json | 3 ++- locales/zh_CN.json | 3 ++- package.json | 1 + pnpm-lock.yaml | 11 +++++++++++ src/hooks/useEcharts.ts | 3 +++ src/layouts/components/common/LayoutSelector.vue | 12 +++++------- src/layouts/mixMenu.layout.vue | 4 +++- src/store/app/index.ts | 7 +------ src/store/index.ts | 4 ++-- src/store/tab.ts | 7 +------ 10 files changed, 31 insertions(+), 24 deletions(-) diff --git a/locales/en_US.json b/locales/en_US.json index 9a1ee20..1d60415 100644 --- a/locales/en_US.json +++ b/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", diff --git a/locales/zh_CN.json b/locales/zh_CN.json index b71aab3..6008c42 100644 --- a/locales/zh_CN.json +++ b/locales/zh_CN.json @@ -59,7 +59,8 @@ "getRouteError": "获取路由失败，请稍后再试", "layoutSetting": "布局设置", "leftMenu": "左侧菜单", - "topMenu": "顶部菜单" + "topMenu": "顶部菜单", + "mixMenu": "混合菜单" }, "http": { "400": "请求出现语法错误", diff --git a/package.json b/package.json index 684300c..1d11519 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3582ce0..41f5392 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts index 04de3ef..8ef304b 100644 --- a/src/hooks/useEcharts.ts +++ b/src/hooks/useEcharts.ts @@ -78,6 +78,9 @@ export function useEcharts(el: Ref, chartOptions: Ref Boolean(el && chart)) async function render() { + // 宽或高不存在时不渲染 + if (!width || !height) return + const chartTheme = appStore.colorMode ? 'dark' : 'light' await nextTick() if (el) { diff --git a/src/layouts/components/common/LayoutSelector.vue b/src/layouts/components/common/LayoutSelector.vue index 0000c51..09967dd 100644 --- a/src/layouts/components/common/LayoutSelector.vue +++ b/src/layouts/components/common/LayoutSelector.vue @@ -12,11 +12,10 @@ const value = defineModel('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'" > -
-
+
@@ -45,16 +44,15 @@ const value = defineModel('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'" > -
+
-
- {{ $t('app.topMenu') }} + {{ $t('app.mixMenu') }}
diff --git a/src/layouts/mixMenu.layout.vue b/src/layouts/mixMenu.layout.vue index 8a475b1..eb4d416 100644 --- a/src/layouts/mixMenu.layout.vue +++ b/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([]) function handleSideMenu(key: string) { + // @ts-ignore const targetMenu = routeStore.menus.find(i => i.key === key) if (targetMenu) { sideMenu.value = targetMenu.children ? targetMenu.children : [targetMenu] diff --git a/src/store/app/index.ts b/src/store/app/index.ts index 0285e99..fb71251 100644 --- a/src/store/app/index.ts +++ b/src/store/app/index.ts @@ -124,11 +124,6 @@ export const useAppStore = defineStore('app-store', { }, }, persist: { - enabled: true, - strategies: [ - { - storage: localStorage, - }, - ], + storage: localStorage, }, }) diff --git a/src/store/index.ts b/src/store/index.ts index cdddb70..acb3543 100644 --- a/src/store/index.ts +++ b/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) } diff --git a/src/store/tab.ts b/src/store/tab.ts index 047019f..459b9e2 100644 --- a/src/store/tab.ts +++ b/src/store/tab.ts @@ -97,11 +97,6 @@ export const useTabStore = defineStore('tab-store', { }, }, persist: { - enabled: true, - strategies: [ - { - storage: sessionStorage, - }, - ], + storage: sessionStorage, }, })