From 80bedb481e867659928845b52b11e2cfae9d7251 Mon Sep 17 00:00:00 2001 From: Li Kui <90845831+likui628@users.noreply.github.com> Date: Thu, 2 Nov 2023 17:51:19 +0800 Subject: [PATCH] fix: the app config recovered from persistence had been overwritten (#247) * fix: the app config recovered from persistence had been overwritten * refactor: abstract out the initAppConfigStore function --- apps/admin/src/init-application.ts | 17 +- apps/admin/src/main.ts | 8 +- packages/hooks/src/config/useAppConfig.ts | 9 +- packages/stores/src/modules/appConfig.ts | 224 ++++++++++------------ 4 files changed, 120 insertions(+), 138 deletions(-) diff --git a/apps/admin/src/init-application.ts b/apps/admin/src/init-application.ts index 489557cf..8d51fa97 100644 --- a/apps/admin/src/init-application.ts +++ b/apps/admin/src/init-application.ts @@ -17,6 +17,7 @@ import { useDesign, useAppConfig, usePromise, + initAppConfig, } from '@vben/hooks' import { getAllParentPath, @@ -41,7 +42,7 @@ import { siteSetting } from '@/config' // 如果模块相互依赖严重，则需要对外提供解耦方式，由调用方去进行参数传递 // 各个模块需要提供 `bridge` 文件作为解耦方式 async function initPackages() { - const _initRequest = () => { + const _initRequest = async () => { const { apiUrl } = getGlobalConfig(import.meta.env) const { t } = useI18n() initRequest({ @@ -74,14 +75,14 @@ async function initPackages() { }) } - const _initComp = () => { + const _initComp = async () => { initComp({ useLocale, localeList, useAppStore, }) } - const _initLayout = () => { + const _initLayout = async () => { initLayout({ useAppConfig, useRootSetting, @@ -111,17 +112,11 @@ async function initPackages() { await Promise.all([_initRequest(), _initComp(), _initLayout()]) } -// Initial project configuration -function initAppConfigStore() { - const appConfig = useAppConfig() - appConfig.setAppConfig(projectSetting) -} - export async function initApplication() { // ! Need to pay attention to the timing of execution // ! 需要注意调用时机 await initPackages() - // Initialize internal system configuration - initAppConfigStore() + // Initial project configuration + initAppConfig(projectSetting) } diff --git a/apps/admin/src/main.ts b/apps/admin/src/main.ts index 502b89f2..7d28b94d 100644 --- a/apps/admin/src/main.ts +++ b/apps/admin/src/main.ts @@ -11,23 +11,25 @@ import { initApplication } from './init-application' import { registerComponents } from '../init-components' ;(async () => { const app = createApp(App) - setupPinia(app) - //注册组件 + + // Register Global Components await registerComponents(app) await initApplication() - // Register Global Components // Multilingual configuration // Asynchronous case: language files may be obtained from the server side await setupI18n(app) + // Init Router const router = InitRouter(import.meta.env.VITE_PUBLIC_PATH) app.use(router) await setupRouteGuard() await router.isReady() + app.mount('#app') + // When Closing mock, Tree Shaking `mockjs` dep if (__VITE_USE_MOCK__) { import('../mock/_mock-server').then(({ setupProdMockServer }) => diff --git a/packages/hooks/src/config/useAppConfig.ts b/packages/hooks/src/config/useAppConfig.ts index 6e17de75..a93d5000 100644 --- a/packages/hooks/src/config/useAppConfig.ts +++ b/packages/hooks/src/config/useAppConfig.ts @@ -1,10 +1,17 @@ -import { storeToRefs, useAppConfig as appConfigStore } from '@vben/stores' +import { + initAppConfigStore, + storeToRefs, + useAppConfig as appConfigStore, +} from '@vben/stores' import { DefineAppConfigOptions } from '@vben/types' import { HandlerSettingEnum, NavBarModeEnum } from '@vben/constants' import { _merge } from '@vben/utils' import { computed, reactive, unref } from 'vue' import { useClipboard, _omit } from '@vben/utils' +export const initAppConfig = (options: DefineAppConfigOptions) => { + initAppConfigStore(options) +} export const useAppConfig = () => { const useAppConfigStore = appConfigStore() const appConfigOptions = storeToRefs(useAppConfigStore) diff --git a/packages/stores/src/modules/appConfig.ts b/packages/stores/src/modules/appConfig.ts index f69eb74d..9d384a75 100644 --- a/packages/stores/src/modules/appConfig.ts +++ b/packages/stores/src/modules/appConfig.ts @@ -27,100 +27,108 @@ import { TriggerEnum, } from '@vben/constants' +const defaultOptions: DefineAppConfigOptions = { + theme: ThemeEnum.LIGHT, + navBarMode: NavBarModeEnum.SIDEBAR, + themeColor: '', + showThemeModeToggle: true, + openKeepAlive: true, + useOpenBackTop: true, + closeMessageOnSwitch: false, + removeAllHttpPending: true, + permissionCacheType: CacheTypeEnum.LOCAL, + settingButtonPosition: SettingButtonPositionEnum.AUTO, + openSettingDrawer: false, + permissionMode: PermissionModeEnum.ROUTE_MAPPING, + sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP, + grayMode: false, + colorWeak: false, + lockTime: 0, + useLockPage: false, + canEmbedIFramePage: true, + closeMixSidebarOnChange: false, + sidebar: { + theme: ThemeEnum.LIGHT, + show: true, + visible: true, + bgColor: SIDE_BAR_BG_COLOR_LIST[0], + fixed: false, + width: 210, + mixSidebarWidth: 80, + collapsedWidth: 48, + collapsed: false, + trigger: TriggerEnum.CENTER, + }, + menu: { + show: true, + canDrag: false, + split: false, + mode: MenuModeEnum.VERTICAL, + accordion: false, + collapsedShowTitle: false, + mixSideTrigger: MixSidebarTriggerEnum.CLICK, + mixSideFixed: false, + topMenuAlign: 'start', + dropdownPlacement: 'top-start', + subMenuWidth: 0, + }, + header: { + theme: ThemeEnum.DARK, + show: true, + visible: true, + bgColor: HEADER_PRESET_BG_COLOR_LIST[0], + fixed: false, + height: 48, + showDoc: true, + showBreadCrumb: true, + showBreadCrumbIcon: true, + showFullScreen: true, + showNotice: true, + showSearch: true, + showLocalePicker: true, + showSetting: true, + }, + logo: { + show: true, + visible: true, + showTitle: true, + }, + tabTar: { + show: true, + visible: true, + height: 36, + cache: true, + canDrag: false, + showFold: true, + showQuick: true, + showRedo: true, + }, + content: { + fullScreen: false, + mode: ContentLayoutEnum.FULL, + }, + footer: { + height: 60, + show: false, + visible: false, + }, + transition: { + enable: true, + basicTransition: RouterTransitionEnum.FADE_SIDE, + openPageLoading: true, + openNProgress: false, + }, +} + +// Must be called before the first use of useAppConfig +export const initAppConfigStore = (options: DefineAppConfigOptions) => { + Object.assign(defaultOptions, options) + useAppConfig() +} + export const useAppConfig = defineStore({ id: 'APP_CONFIG', - state: (): DefineAppConfigOptions => ({ - theme: ThemeEnum.LIGHT, - navBarMode: NavBarModeEnum.SIDEBAR, - themeColor: '', - showThemeModeToggle: true, - openKeepAlive: true, - useOpenBackTop: true, - closeMessageOnSwitch: false, - removeAllHttpPending: true, - permissionCacheType: CacheTypeEnum.LOCAL, - settingButtonPosition: SettingButtonPositionEnum.AUTO, - openSettingDrawer: false, - permissionMode: PermissionModeEnum.ROUTE_MAPPING, - sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP, - grayMode: false, - colorWeak: false, - lockTime: 0, - useLockPage: false, - canEmbedIFramePage: true, - closeMixSidebarOnChange: false, - sidebar: { - theme: ThemeEnum.LIGHT, - show: true, - visible: true, - bgColor: SIDE_BAR_BG_COLOR_LIST[0], - fixed: false, - width: 210, - mixSidebarWidth: 80, - collapsedWidth: 48, - collapsed: false, - trigger: TriggerEnum.CENTER, - }, - menu: { - show: true, - canDrag: false, - split: false, - mode: MenuModeEnum.VERTICAL, - accordion: false, - collapsedShowTitle: false, - mixSideTrigger: MixSidebarTriggerEnum.CLICK, - mixSideFixed: false, - topMenuAlign: 'start', - dropdownPlacement: 'top-start', - subMenuWidth: 0, - }, - header: { - theme: ThemeEnum.DARK, - show: true, - visible: true, - bgColor: HEADER_PRESET_BG_COLOR_LIST[0], - fixed: false, - height: 48, - showDoc: true, - showBreadCrumb: true, - showBreadCrumbIcon: true, - showFullScreen: true, - showNotice: true, - showSearch: true, - showLocalePicker: true, - showSetting: true, - }, - logo: { - show: true, - visible: true, - showTitle: true, - }, - tabTar: { - show: true, - visible: true, - height: 36, - cache: true, - canDrag: false, - showFold: true, - showQuick: true, - showRedo: true, - }, - content: { - fullScreen: false, - mode: ContentLayoutEnum.FULL, - }, - footer: { - height: 60, - show: false, - visible: false, - }, - transition: { - enable: true, - basicTransition: RouterTransitionEnum.FADE_SIDE, - openPageLoading: true, - openNProgress: false, - }, - }), + state: (): DefineAppConfigOptions => ({ ...defaultOptions }), getters: { isSidebar: (state) => state.navBarMode === NavBarModeEnum.SIDEBAR, isTopMenu: (state) => state.navBarMode === NavBarModeEnum.TOP_MENU, @@ -216,35 +224,5 @@ export const useAppConfig = defineStore({ _assign(this.transition, value) }, }, - persist: { - // excludedPaths: ['openSettingDrawer'], // Temporarily invalid - paths: [ - 'theme', - 'navBarMode', - 'themeColor', - 'showThemeModeToggle', - 'openKeepAlive', - 'useOpenBackTop', - 'closeMessageOnSwitch', - 'removeAllHttpPending', - 'permissionCacheType', - 'settingButtonPosition', - 'permissionMode', - 'sessionTimeoutProcessing', - 'grayMode', - 'colorWeak', - 'lockTime', - 'useLockPage', - 'canEmbedIFramePage', - 'closeMixSidebarOnChange', - 'sidebar', - 'menu', - 'header', - 'logo', - 'tabTar', - 'content', - 'footer', - 'transition', - ], - }, + persist: true, })