done (#87)

vbenjs · Sep 8, 2023 · 124c5a9 · 124c5a9
1 parent fb6a4a6
commit 124c5a9
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 59 deletions.
diff --git a/packages/hooks/src/config/useAppConfig.ts b/packages/hooks/src/config/useAppConfig.ts
@@ -1,28 +1,15 @@
-import {
-  StoreGeneric,
-  storeToRefs,
-  useAppConfig as appConfigStore,
-} from '@vben/stores'
+import { storeToRefs, useAppConfig as appConfigStore } from '@vben/stores'
 import { DefineAppConfigOptions } from '@vben/types'
 import { HandlerSettingEnum, ThemeEnum } from '@vben/constants'
 import { _merge } from '@vben/utils'
 import { computed, reactive, unref } from 'vue'
 import { useClipboard, _omit } from '@vben/utils'
 
-type DefineAppConfigStoreGetters = {
-  isSidebar: boolean
-  isTopMenu: boolean
-  isMixSidebar: boolean
-  isMix: boolean
-  isMixMode: boolean
-  isHorizontal: boolean
-}
 export const useAppConfig = () => {
   const useAppConfigStore = appConfigStore()
-  const appConfigOptions = storeToRefs(
-    useAppConfigStore as StoreGeneric,
-  ) as unknown as DefineAppConfigOptions & DefineAppConfigStoreGetters
+  const appConfigOptions = storeToRefs(useAppConfigStore)
   const { openSettingDrawer, sidebar, menu, isMixSidebar } = appConfigOptions
+
   const setAppConfig = (configs: DeepPartial<DefineAppConfigOptions>) => {
     useAppConfigStore.$patch((state) => {
       _merge(state, configs)
@@ -42,7 +29,7 @@ export const useAppConfig = () => {
   }
 
   function baseHandler(event: HandlerSettingEnum, value: any) {
-    setAppConfig(handlerResults(event, value, appConfigOptions))
+    setAppConfig(handlerResults(event, value, useAppConfigStore.$state))
   }
 
   async function copyConfigs() {

diff --git a/packages/hooks/src/setting/useHeaderSetting.ts b/packages/hooks/src/setting/useHeaderSetting.ts
@@ -46,26 +46,26 @@ export function useHeaderSetting() {
     () => !unref(getIsSidebarType) && unref(getShowHeader),
   )
 
-  const getShowDoc = computed(() => configStore.header.showDoc)
+  const getShowDoc = computed(() => configStore.header.value.showDoc)
 
-  const getHeaderTheme = computed(() => configStore.header.theme)
+  const getHeaderTheme = computed(() => configStore.header.value.theme)
 
-  const getShowHeader = computed(() => configStore.header.show)
+  const getShowHeader = computed(() => configStore.header.value.show)
 
-  const getFixed = computed(() => configStore.header.fixed)
+  const getFixed = computed(() => configStore.header.value.fixed)
 
-  const getHeaderBgColor = computed(() => configStore.header.bgColor)
+  const getHeaderBgColor = computed(() => configStore.header.value.bgColor)
 
-  const getShowSearch = computed(() => configStore.header.showSearch)
+  const getShowSearch = computed(() => configStore.header.value.showSearch)
 
   const getUseLockPage = computed(() => false)
 
-  const getShowFullScreen = computed(() => configStore.header.showFullScreen)
+  const getShowFullScreen = computed(() => configStore.header.value.showFullScreen)
   const getShowLocalePicker = computed(
-    () => configStore.header.showLocalePicker,
+    () => configStore.header.value.showLocalePicker,
   )
 
-  const getShowNotice = computed(() => configStore.header.showNotice)
+  const getShowNotice = computed(() => configStore.header.value.showNotice)
 
   const getShowBread = computed(() => {
     return (

diff --git a/packages/hooks/src/setting/useMenuSetting.ts b/packages/hooks/src/setting/useMenuSetting.ts
@@ -35,7 +35,7 @@ export function useMenuSetting() {
   // TODO
   const getMenuType = computed(() => 'sidebar')
 
-  const getMenuMode = computed(() => configStore.menu.mode)
+  const getMenuMode = computed(() => configStore.menu.value.mode)
 
   // TODO
   const getMenuFixed = computed(() => true)
@@ -46,25 +46,25 @@ export function useMenuSetting() {
   // TODO
   const getMenuHidden = computed(() => false)
 
-  const getMenuWidth = computed(() => configStore.sidebar.width)
+  const getMenuWidth = computed(() => configStore.sidebar.value.width)
 
-  const getTrigger = computed(() => configStore.sidebar.trigger)
+  const getTrigger = computed(() => configStore.sidebar.value.trigger)
 
-  const getMenuTheme = computed(() => configStore.sidebar.theme)
+  const getMenuTheme = computed(() => configStore.sidebar.value.theme)
 
-  const getSplit = computed(() => configStore.menu.split)
+  const getSplit = computed(() => configStore.menu.value.split)
 
-  const getMenuBgColor = computed(() => configStore.sidebar.bgColor)
+  const getMenuBgColor = computed(() => configStore.sidebar.value.bgColor)
 
-  const getMixSideTrigger = computed(() => configStore.menu.mixSideTrigger)
+  const getMixSideTrigger = computed(() => configStore.menu.value.mixSideTrigger)
 
-  const getCanDrag = computed(() => configStore.menu.canDrag)
+  const getCanDrag = computed(() => configStore.menu.value.canDrag)
 
-  const getAccordion = computed(() => configStore.menu.accordion)
+  const getAccordion = computed(() => configStore.menu.value.accordion)
 
-  const getMixSideFixed = computed(() => configStore.menu.mixSideFixed)
+  const getMixSideFixed = computed(() => configStore.menu.value.mixSideFixed)
 
-  const getTopMenuAlign = computed(() => configStore.menu.topMenuAlign)
+  const getTopMenuAlign = computed(() => configStore.menu.value.topMenuAlign)
 
   const getCloseMixSidebarOnChange = computed(
     () => configStore.closeMixSidebarOnChange,
@@ -83,7 +83,7 @@ export function useMenuSetting() {
   )
 
   const getCollapsedShowTitle = computed(
-    () => configStore.menu.collapsedShowTitle,
+    () => configStore.menu.value.collapsedShowTitle,
   )
 
   const getShowTopMenu = computed(() => {
@@ -127,7 +127,7 @@ export function useMenuSetting() {
   })
 
   const getMiniWidthNumber = computed(() => {
-    const { collapsedShowTitle } = configStore.menu
+    const { collapsedShowTitle } = configStore.menu.value
     return collapsedShowTitle
       ? SIDE_BAR_SHOW_TIT_MINI_WIDTH
       : SIDE_BAR_MINI_WIDTH

diff --git a/packages/hooks/src/setting/useMultipleTabSetting.ts b/packages/hooks/src/setting/useMultipleTabSetting.ts
@@ -6,13 +6,13 @@ import { useAppConfig } from '..'
 export function useMultipleTabSetting() {
   const configStore = useAppConfig()
 
-  const getShowMultipleTab = computed(() => configStore.tabTar.show)
+  const getShowMultipleTab = computed(() => configStore.tabTar.value.show)
 
-  const getShowQuick = computed(() => configStore.tabTar.showQuick)
+  const getShowQuick = computed(() => configStore.tabTar.value.showQuick)
 
-  const getShowRedo = computed(() => configStore.tabTar.showRedo)
+  const getShowRedo = computed(() => configStore.tabTar.value.showRedo)
 
-  const getShowFold = computed(() => configStore.tabTar.showFold)
+  const getShowFold = computed(() => configStore.tabTar.value.showFold)
 
   function setMultipleTabSetting(multiTabsSetting: Partial<MultiTabsSetting>) {
     configStore.setAppConfig({ tabTar: multiTabsSetting })

diff --git a/packages/hooks/src/setting/useRootSetting.ts b/packages/hooks/src/setting/useRootSetting.ts
@@ -10,7 +10,9 @@ import { useAppConfig } from '../config'
 export function useRootSetting() {
   const appStore = useAppConfig()
 
-  const getPageLoading = computed(() => appStore.transition.openPageLoading)
+  const getPageLoading = computed(
+    () => appStore.transition.value.openPageLoading,
+  )
 
   const getOpenKeepAlive = computed(() => appStore.openKeepAlive)
 
@@ -22,25 +24,25 @@ export function useRootSetting() {
 
   const getPermissionMode = computed(() => appStore.permissionMode)
 
-  const getShowLogo = computed(() => appStore.logo.show)
+  const getShowLogo = computed(() => appStore.logo.value.show)
 
-  const getContentMode = computed(() => appStore.content.mode)
+  const getContentMode = computed(() => appStore.content.value.mode)
 
   const getUseOpenBackTop = computed(() => appStore.useOpenBackTop)
 
-  const getShowSettingButton = computed(() => appStore.header.showSetting)
+  const getShowSettingButton = computed(() => appStore.header.value.showSetting)
 
-  const getShowFooter = computed(() => appStore.footer.show)
+  const getShowFooter = computed(() => appStore.footer.value.show)
 
-  const getShowBreadCrumb = computed(() => appStore.header.showBreadCrumb)
+  const getShowBreadCrumb = computed(() => appStore.header.value.showBreadCrumb)
 
   const getThemeColor = computed(() => appStore.themeColor)
 
   const getShowBreadCrumbIcon = computed(
-    () => appStore.header.showBreadCrumbIcon,
+    () => appStore.header.value.showBreadCrumbIcon,
   )
 
-  const getFullContent = computed(() => appStore.content.fullScreen)
+  const getFullContent = computed(() => appStore.content.value.fullScreen)
 
   const getColorWeak = computed(() => appStore.colorWeak)
 
@@ -51,7 +53,7 @@ export function useRootSetting() {
   const getShowDarkModeToggle = computed(() => appStore.showThemeModeToggle)
 
   const getLayoutContentMode = computed(() =>
-    appStore.content.mode === ContentLayoutEnum.FULL
+    appStore.content.value.mode === ContentLayoutEnum.FULL
       ? ContentLayoutEnum.FULL
       : ContentLayoutEnum.FIXED,
   )

diff --git a/packages/hooks/src/setting/useTransitionSetting.ts b/packages/hooks/src/setting/useTransitionSetting.ts
@@ -7,16 +7,16 @@ import { useAppConfig } from '..'
 export function useTransitionSetting() {
   const configStore = useAppConfig()
 
-  const getEnableTransition = computed(() => configStore.transition.enable)
+  const getEnableTransition = computed(() => configStore.transition.value.enable)
 
-  const getOpenNProgress = computed(() => configStore.transition.openNProgress)
+  const getOpenNProgress = computed(() => configStore.transition.value.openNProgress)
 
   const getOpenPageLoading = computed((): boolean => {
-    return !!configStore.transition.openPageLoading
+    return !!configStore.transition.value.openPageLoading
   })
 
   const getBasicTransition = computed(
-    () => configStore.transition.basicTransition,
+    () => configStore.transition.value.basicTransition,
   )
 
   function setTransitionSetting(transitionSetting: Partial<TransitionSetting>) {

diff --git a/packages/hooks/src/web/useFullContent.ts b/packages/hooks/src/web/useFullContent.ts
@@ -1,7 +1,5 @@
 import { computed, unref } from 'vue'
-
 import { useAppConfig } from '../config'
-
 import { useRouter } from 'vue-router'
 
 /**
@@ -21,7 +19,7 @@ export const useFullContent = () => {
       return true
     }
     // Return to the configuration in the configuration file
-    return appStore.content.fullScreen
+    return appStore.content.value.fullScreen
   })
 
   return { getFullContent }