diff --git a/apps/admin/src/hooks/setting/useHeaderSetting.ts b/apps/admin/src/hooks/setting/useHeaderSetting.ts
index 3ea7120d..9c77f38a 100644
--- a/apps/admin/src/hooks/setting/useHeaderSetting.ts
+++ b/apps/admin/src/hooks/setting/useHeaderSetting.ts
@@ -2,7 +2,8 @@ import type { HeaderSetting } from '@vben/types'
 
 import { computed, unref } from 'vue'
 
-import { useConfigStoreWithOut } from '@/store/config'
+// import { useConfigStoreWithOut } from '@/store/config'
+import { useAppConfig } from '@vben/hooks'
 
 import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
 import { useRootSetting } from '@/hooks/setting/useRootSetting'
@@ -11,13 +12,10 @@ import { MenuModeEnum } from '@vben/constants'
 
 export function useHeaderSetting() {
   const { getFullContent } = useFullContent()
-  const configStore = useConfigStoreWithOut()
+  const configStore = useAppConfig()
 
   const getShowFullHeaderRef = computed(() => {
-    return (
-      (!unref(getFullContent) &&
-        unref(getShowHeader))
-    )
+    return !unref(getFullContent) && unref(getShowHeader)
   })
 
   const getUnFixedAndFull = computed(
@@ -47,28 +45,26 @@ export function useHeaderSetting() {
     () => !unref(getIsSidebarType) && unref(getShowHeader),
   )
 
-  const getShowDoc = computed(() => configStore.getHeaderSetting.showDoc)
+  const getShowDoc = computed(() => configStore.header.showDoc)
 
-  const getHeaderTheme = computed(() => configStore.getHeaderSetting.theme)
+  const getHeaderTheme = computed(() => configStore.header.theme)
 
-  const getShowHeader = computed(() => configStore.getHeaderSetting.show)
+  const getShowHeader = computed(() => configStore.header.show)
 
-  const getFixed = computed(() => configStore.getHeaderSetting.fixed)
+  const getFixed = computed(() => configStore.header.fixed)
 
-  const getHeaderBgColor = computed(() => configStore.getHeaderSetting.bgColor)
+  const getHeaderBgColor = computed(() => configStore.header.bgColor)
 
-  const getShowSearch = computed(() => configStore.getHeaderSetting.showSearch)
+  const getShowSearch = computed(() => configStore.header.showSearch)
 
-  const getUseLockPage = computed(() => configStore.getHeaderSetting.useLockPage)
+  const getUseLockPage = computed(() => false)
 
-  const getShowFullScreen = computed(
-    () => configStore.getHeaderSetting.showFullScreen,
-  )
+  const getShowFullScreen = computed(() => configStore.header.showFullScreen)
   const getShowLocalePicker = computed(
-    () => configStore.getHeaderSetting.showLocalePicker,
+    () => configStore.header.showLocalePicker,
   )
 
-  const getShowNotice = computed(() => configStore.getHeaderSetting.showNotice)
+  const getShowNotice = computed(() => configStore.header.showNotice)
 
   const getShowBread = computed(() => {
     return (
@@ -90,7 +86,7 @@ export function useHeaderSetting() {
 
   // Set header configuration
   function setHeaderSetting(headerSetting: Partial<HeaderSetting>) {
-    configStore.setProjectConfig({ headerSetting })
+    configStore.setAppConfig({ header: headerSetting })
   }
   return {
     setHeaderSetting,
diff --git a/apps/admin/src/hooks/setting/useMenuSetting.ts b/apps/admin/src/hooks/setting/useMenuSetting.ts
index c39a5346..d7c45f6f 100644
--- a/apps/admin/src/hooks/setting/useMenuSetting.ts
+++ b/apps/admin/src/hooks/setting/useMenuSetting.ts
@@ -2,7 +2,8 @@ import type { MenuSetting } from '@vben/types'
 
 import { computed, unref, ref } from 'vue'
 
-import { useConfigStoreWithOut } from '@/store/config'
+// import { useConfigStoreWithOut } from '@/store/config'
+import { useAppConfig } from '@vben/hooks'
 
 import {
   SIDE_BAR_MINI_WIDTH,
@@ -12,13 +13,15 @@ import {
   TriggerEnum,
 } from '@vben/constants'
 import { useFullContent } from '@/hooks/web/useFullContent'
-import {useRootSetting} from "@/hooks/setting/useRootSetting";
+import { useRootSetting } from '@/hooks/setting/useRootSetting'
 
 const mixSideHasChildren = ref(false)
 
+// todo src/hooks 在往 @VBen\hooks 转移
 export function useMenuSetting() {
   const { getFullContent: fullContent } = useFullContent()
-  const configStore = useConfigStoreWithOut()
+  const configStore = useAppConfig()
+  // const useAppConfigStore = appConfigStore()
   const { getShowLogo } = useRootSetting()
   const getShowSidebar = computed(() => {
     return (
@@ -29,46 +32,42 @@ export function useMenuSetting() {
     )
   })
 
-  const getCollapsed = computed(() => configStore.getMenuSetting.collapsed)
+  const getCollapsed = computed(() => false)
 
-  const getMenuType = computed(() => configStore.getMenuSetting.type)
+  const getMenuType = computed(() => 'sidebar')
 
-  const getMenuMode = computed(() => configStore.getMenuSetting.mode)
+  const getMenuMode = computed(() => configStore.menu.mode)
 
-  const getMenuFixed = computed(() => configStore.getMenuSetting.fixed)
+  const getMenuFixed = computed(() => true)
 
-  const getShowMenu = computed(() => configStore.getMenuSetting.show)
+  const getShowMenu = computed(() => true)
 
-  const getMenuHidden = computed(() => configStore.getMenuSetting.hidden)
+  const getMenuHidden = computed(() => false)
 
-  const getMenuWidth = computed(() => configStore.getMenuSetting.menuWidth)
+  const getMenuWidth = computed(() => 210)
 
-  const getTrigger = computed(() => configStore.getMenuSetting.trigger)
+  const getTrigger = computed(() => 'HEADER')
 
-  const getMenuTheme = computed(() => configStore.getMenuSetting.theme)
+  const getMenuTheme = computed(() => 'dark')
 
-  const getSplit = computed(() => configStore.getMenuSetting.split)
+  const getSplit = computed(() => configStore.menu.split)
 
-  const getMenuBgColor = computed(() => configStore.getMenuSetting.bgColor)
+  const getMenuBgColor = computed(() => '#001529')
 
   const getMixSideTrigger = computed(
-    () => configStore.getMenuSetting.mixSideTrigger,
+    () => configStore.menu.mixSideTrigger,
   )
 
-  const getCanDrag = computed(() => configStore.getMenuSetting.canDrag)
+  const getCanDrag = computed(() => configStore.menu.canDrag)
 
-  const getAccordion = computed(() => configStore.getMenuSetting.accordion)
+  const getAccordion = computed(() => configStore.menu.accordion)
 
-  const getMixSideFixed = computed(
-    () => configStore.getMenuSetting.mixSideFixed,
-  )
+  const getMixSideFixed = computed(() => configStore.menu.mixSideFixed)
 
-  const getTopMenuAlign = computed(
-    () => configStore.getMenuSetting.topMenuAlign,
-  )
+  const getTopMenuAlign = computed(() => configStore.menu.topMenuAlign)
 
   const getCloseMixSidebarOnChange = computed(
-    () => configStore.getMenuSetting.closeMixSidebarOnChange,
+    () => false,
   )
 
   const getIsSidebarType = computed(
@@ -80,18 +79,17 @@ export function useMenuSetting() {
   )
 
   const getMenuShowLogo = computed(
-    ()=> unref(getShowLogo) && unref(getIsSidebarType)
+    () => unref(getShowLogo) && unref(getIsSidebarType),
   )
 
   const getCollapsedShowTitle = computed(
-    () => configStore.getMenuSetting.collapsedShowTitle,
+    () => configStore.menu.collapsedShowTitle,
   )
 
   const getShowTopMenu = computed(() => {
     return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit)
   })
 
-
   const getShowHeaderTrigger = computed(() => {
     if (
       unref(getMenuType) === MenuTypeEnum.TOP_MENU ||
@@ -129,7 +127,7 @@ export function useMenuSetting() {
   })
 
   const getMiniWidthNumber = computed(() => {
-    const { collapsedShowTitle } = configStore.getMenuSetting
+    const { collapsedShowTitle } = configStore.menu
     return collapsedShowTitle
       ? SIDE_BAR_SHOW_TIT_MINI_WIDTH
       : SIDE_BAR_MINI_WIDTH
@@ -155,7 +153,7 @@ export function useMenuSetting() {
 
   // Set menu configuration
   function setMenuSetting(menuSetting: Partial<MenuSetting>): void {
-    configStore.setProjectConfig({ menuSetting })
+    configStore.setAppConfig({ menu: menuSetting })
   }
 
   function toggleCollapsed() {
@@ -196,6 +194,6 @@ export function useMenuSetting() {
     getMixSideTrigger,
     getMixSideFixed,
     mixSideHasChildren,
-    getMenuShowLogo
+    getMenuShowLogo,
   }
 }
diff --git a/apps/admin/src/hooks/setting/useMultipleTabSetting.ts b/apps/admin/src/hooks/setting/useMultipleTabSetting.ts
index 32a7ba7a..562afc94 100644
--- a/apps/admin/src/hooks/setting/useMultipleTabSetting.ts
+++ b/apps/admin/src/hooks/setting/useMultipleTabSetting.ts
@@ -1,22 +1,23 @@
-import type { MultiTabsSetting } from '@vben/types';
+import type { MultiTabsSetting } from '@vben/types'
 
-import { computed } from 'vue';
+import { computed } from 'vue'
 
-import { useConfigStoreWithOut } from '@/store/config';
+// import { useConfigStoreWithOut } from '@/store/config';
+import { useAppConfig } from '@vben/hooks'
 
 export function useMultipleTabSetting() {
-  const configStore = useConfigStoreWithOut()
+  const configStore = useAppConfig()
 
-  const getShowMultipleTab = computed(() => configStore.getMultiTabsSetting.show);
+  const getShowMultipleTab = computed(() => configStore.tabTar.show)
 
-  const getShowQuick = computed(() => configStore.getMultiTabsSetting.showQuick);
+  const getShowQuick = computed(() => configStore.tabTar.showQuick)
 
-  const getShowRedo = computed(() => configStore.getMultiTabsSetting.showRedo);
+  const getShowRedo = computed(() => configStore.tabTar.showRedo)
 
-  const getShowFold = computed(() => configStore.getMultiTabsSetting.showFold);
+  const getShowFold = computed(() => configStore.tabTar.showFold)
 
   function setMultipleTabSetting(multiTabsSetting: Partial<MultiTabsSetting>) {
-    configStore.setProjectConfig({ multiTabsSetting });
+    configStore.setAppConfig({ tabTar: multiTabsSetting })
   }
   return {
     setMultipleTabSetting,
@@ -24,5 +25,5 @@ export function useMultipleTabSetting() {
     getShowQuick,
     getShowRedo,
     getShowFold,
-  };
+  }
 }