fix: the app config recovered from persistence had been overwritten

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)
 }

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 }) =>

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)

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,
 })