fix: FoldButton

@vben/hooks 调整

packages/hooks/src/config/useAppConfig.ts

@@ -8,7 +8,7 @@ import { useClipboard, _omit } from '@vben/utils'
 export const useAppConfig = () => {
   const useAppConfigStore = appConfigStore()
   const appConfigOptions = storeToRefs(useAppConfigStore)
-  const { openSettingDrawer, sidebar, menu, isMixSidebar, isSidebar } =
+  const { openSettingDrawer, sidebar, menu, isMixSidebar, isSidebar, header } =
     appConfigOptions
 
   const setAppConfig = (configs: DeepPartial<DefineAppConfigOptions>) => {
@@ -60,6 +60,7 @@ export const useAppConfig = () => {
     }
     return unref(menu).collapsedShowTitle && unref(sidebar).collapsed
   })
+
   return {
     ...appConfigOptions,
     setAppConfig,

packages/hooks/src/setting/useHeaderSetting.ts

@@ -60,7 +60,9 @@ export function useHeaderSetting() {
 
   const getUseLockPage = computed(() => false)
 
-  const getShowFullScreen = computed(() => configStore.header.value.showFullScreen)
+  const getShowFullScreen = computed(
+    () => configStore.header.value.showFullScreen,
+  )
   const getShowLocalePicker = computed(
     () => configStore.header.value.showLocalePicker,
   )

packages/hooks/src/setting/useMenuSetting.ts

@@ -37,7 +37,7 @@ export function useMenuSetting() {
 
   const getMenuFixed = computed(() => configStore.sidebar.value.fixed)
 
-  const getShowMenu = computed(() => configStore.sidebar.value.show)
+  const getShowMenu = computed(() => configStore.menu.value.show)
 
   const getMenuHidden = computed(() => !configStore.sidebar.value.visible)
 

packages/layouts/src/components/header.vue

@@ -13,17 +13,17 @@ import {
   ThemeEnum,
   NavBarModeEnum,
 } from '@vben/constants'
-import { useAppConfig } from '@vben/hooks'
-const { isMixSidebar, isTopMenu, isMix, sidebar, menu, header } = useAppConfig()
-const {
+import {
+  useAppConfig,
+  useMenuSetting,
   useHeaderSetting,
   useRootSetting,
-  useMenuSetting,
-  useConfigStore,
-  Logo,
-  useAppInject,
-  useMultipleTabSetting,
-} = context
+  useAppTheme,
+} from '@vben/hooks'
+
+const { isMixSidebar, isTopMenu, isMix, sidebar, menu, header } = useAppConfig()
+
+const { useConfigStore, Logo, useAppInject, useMultipleTabSetting } = context
 const {
   getShowBread,
   getShowFullScreen,
@@ -34,12 +34,11 @@ const {
   getShowFullHeaderRef,
   getShowHeaderLogo,
 } = useHeaderSetting()
-const { getDarkMode } = useConfigStore()
+const { isDark } = useAppTheme()
 const { getSettingButtonPosition, getShowSettingButton } = useRootSetting()
 const { getMenuType, getMenuWidth, getIsTopMenu } = useMenuSetting()
 const { getIsMobile } = useAppInject()
 const { getShowMultipleTab } = useMultipleTabSetting()
-const isDark = computed(() => getDarkMode == ThemeEnum.DARK)
 const getShowSetting = computed(() => {
   if (!unref(getShowSettingButton)) {
     return false

packages/layouts/src/components/index.ts

@@ -1,7 +1,7 @@
-import {h} from "vue";
-import {VbenIconify} from "@vben/vbencomponents";
+import { h } from 'vue'
+import { VbenIconify } from '@vben/vbencomponents'
 
-export const renderIcon = (icon: string ) => {
+export const renderIcon = (icon: string) => {
   if (!icon) return undefined
   return () => h(VbenIconify, { icon })
 }

packages/layouts/src/components/tabs/components/FoldButton.vue

@@ -1,31 +1,31 @@
 <script setup lang="ts">
-import { context } from '../../../../bridge'
-import {computed, unref} from 'vue'
+import { computed, unref } from 'vue'
 import { triggerWindowResize } from '@vben/utils'
-const { useMenuSetting, useHeaderSetting } = context
-const { getShowMenu, setMenuSetting } = useMenuSetting();
-const { getShowHeader, setHeaderSetting } = useHeaderSetting();
-const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
+import { useMenuSetting, useHeaderSetting } from '@vben/hooks'
+const { getShowMenu, setMenuSetting } = useMenuSetting()
+const { getShowHeader, setHeaderSetting } = useHeaderSetting()
+const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader))
 
 const getIcon = computed(() =>
   unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full',
-);
-
+)
 function handleFold() {
-  const isUnFold = unref(getIsUnFold);
+  // 设置菜单和头部是否显示
   setMenuSetting({
-    show: isUnFold,
-    hidden: !isUnFold,
-  });
-  setHeaderSetting({ show: isUnFold });
-  triggerWindowResize();
-}
+    show: !unref(getShowMenu),
+  })
+  setHeaderSetting({ show: !unref(getShowHeader) })
 
+  triggerWindowResize()
+}
 </script>
 
 <template>
-  <div @click="handleFold" class="h-full w-32px border-l flex-center border-[var(--n-border-color)] cursor-pointer">
-    <VbenIconify :icon="getIcon"/>
+  <div
+    @click="handleFold"
+    class="h-full w-32px border-l flex-center border-[var(--n-border-color)] cursor-pointer"
+  >
+    <VbenIconify :icon="getIcon" />
   </div>
 </template>
 

packages/layouts/src/left-menu.vue

@@ -4,23 +4,22 @@ import LayoutMenu from './components/menu/index.vue'
 import LayoutHeader from './components/header.vue'
 import LayoutMain from './components/main.vue'
 import LayoutFooter from './components/footer.vue'
-import { useAppConfig } from '@vben/hooks'
-
+import { useAppConfig, useMenuSetting } from '@vben/hooks'
+const { getShowMenu, getCollapsed } = useMenuSetting()
 const { headerRef, contentStyle, mainStyle, footerRef, contentRef } =
   useComposables()
-
 const { toggleCollapse, sidebar, footer } = useAppConfig()
 </script>
 <template>
   <VbenLayout has-sider class="h-full">
     <VbenLayoutSider
-      v-if="sidebar.show"
+      v-if="getShowMenu"
       show-trigger
       bordered
       :collapsed-width="sidebar.collapsedWidth"
       :width="sidebar.width"
       collapse-mode="width"
-      :collapsed="sidebar.collapsed"
+      :collapsed="getCollapsed"
       @update:collapsed="toggleCollapse"
     >
       <slot name="sider">