项目初始化

web-vue/packages/core/hooks/setting/useMenuSetting.ts

@@ -0,0 +1,158 @@
+import type { MenuSetting } from '@jeesite/types/config';
+
+import { computed, unref, ref } from 'vue';
+
+import { useAppStore } from '@jeesite/core/store/modules/app';
+
+import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '@jeesite/core/enums/appEnum';
+import { MenuModeEnum, MenuTypeEnum, TriggerEnum } from '@jeesite/core/enums/menuEnum';
+import { useFullContent } from '@jeesite/core/hooks/web/useFullContent';
+
+const mixSideHasChildren = ref(false);
+
+export function useMenuSetting() {
+  const { getFullContent: fullContent } = useFullContent();
+  const appStore = useAppStore();
+
+  const getShowSidebar = computed(() => {
+    return (
+      // unref(getSplit) ||
+      unref(getShowMenu) && unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && !unref(fullContent)
+    );
+  });
+
+  const getCollapsed = computed(() => appStore.getMenuSetting.collapsed);
+
+  const getMenuType = computed(() => appStore.getMenuSetting.type);
+
+  const getMenuMode = computed(() => appStore.getMenuSetting.mode);
+
+  const getMenuFixed = computed(() => appStore.getMenuSetting.fixed);
+
+  const getShowMenu = computed(() => appStore.getMenuSetting.show);
+
+  const getMenuHidden = computed(() => appStore.getMenuSetting.hidden);
+
+  const getMenuWidth = computed(() => appStore.getMenuSetting.menuWidth);
+
+  const getTrigger = computed(() => appStore.getMenuSetting.trigger);
+
+  const getMenuTheme = computed(() => appStore.getMenuSetting.theme);
+
+  const getSplit = computed(() => appStore.getMenuSetting.split);
+
+  const getMenuBgColor = computed(() => appStore.getMenuSetting.bgColor);
+
+  const getMixSideTrigger = computed(() => appStore.getMenuSetting.mixSideTrigger);
+
+  const getCanDrag = computed(() => appStore.getMenuSetting.canDrag);
+
+  const getAccordion = computed(() => appStore.getMenuSetting.accordion);
+
+  const getMixSideFixed = computed(() => appStore.getMenuSetting.mixSideFixed);
+
+  const getTopMenuAlign = computed(() => appStore.getMenuSetting.topMenuAlign);
+
+  const getCloseMixSidebarOnChange = computed(() => appStore.getMenuSetting.closeMixSidebarOnChange);
+
+  const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDEBAR);
+
+  const getIsTopMenu = computed(() => unref(getMenuType) === MenuTypeEnum.TOP_MENU);
+
+  const getCollapsedShowTitle = computed(() => appStore.getMenuSetting.collapsedShowTitle);
+
+  const getShowTopMenu = computed(() => {
+    return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit);
+  });
+
+  const getShowHeaderTrigger = computed(() => {
+    if (unref(getMenuType) === MenuTypeEnum.TOP_MENU || !unref(getShowMenu) || unref(getMenuHidden)) {
+      return false;
+    }
+
+    return unref(getTrigger) === TriggerEnum.HEADER;
+  });
+
+  const getIsHorizontal = computed(() => {
+    return unref(getMenuMode) === MenuModeEnum.HORIZONTAL;
+  });
+
+  const getIsMixSidebar = computed(() => {
+    return unref(getMenuType) === MenuTypeEnum.MIX_SIDEBAR;
+  });
+
+  const getIsMixMode = computed(() => {
+    return unref(getMenuMode) === MenuModeEnum.INLINE && unref(getMenuType) === MenuTypeEnum.MIX;
+  });
+
+  const getRealWidth = computed(() => {
+    if (unref(getIsMixSidebar)) {
+      return unref(getCollapsed) && !unref(getMixSideFixed) ? unref(getMiniWidthNumber) : unref(getMenuWidth);
+    }
+    return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth);
+  });
+
+  const getMiniWidthNumber = computed(() => {
+    const { collapsedShowTitle } = appStore.getMenuSetting;
+    return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
+  });
+
+  const getCalcContentWidth = computed(() => {
+    const width =
+      unref(getIsTopMenu) || !unref(getShowMenu) || (unref(getSplit) && unref(getMenuHidden))
+        ? 0
+        : unref(getIsMixSidebar)
+          ? (unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH) +
+            (unref(getMixSideFixed) && unref(mixSideHasChildren) ? unref(getRealWidth) : 0)
+          : unref(getRealWidth);
+
+    return `calc(100% - ${unref(width)}px)`;
+  });
+
+  // Set menu configuration
+  function setMenuSetting(menuSetting: Partial<MenuSetting>): void {
+    appStore.setProjectConfig({ menuSetting });
+  }
+
+  function toggleCollapsed() {
+    setMenuSetting({
+      collapsed: !unref(getCollapsed),
+    });
+  }
+  return {
+    setMenuSetting,
+
+    toggleCollapsed,
+
+    getMenuFixed,
+    getRealWidth,
+    getMenuType,
+    getMenuMode,
+    getShowMenu,
+    getCollapsed,
+    getMiniWidthNumber,
+    getCalcContentWidth,
+    getMenuWidth,
+    getTrigger,
+    getSplit,
+    getMenuTheme,
+    getCanDrag,
+    getCollapsedShowTitle,
+    getIsHorizontal,
+    getIsSidebarType,
+    getAccordion,
+    getShowTopMenu,
+    getShowHeaderTrigger,
+    getTopMenuAlign,
+    getMenuHidden,
+    getIsTopMenu,
+    getMenuBgColor,
+    getShowSidebar,
+    getIsMixMode,
+    getIsMixSidebar,
+    getCloseMixSidebarOnChange,
+    getMixSideTrigger,
+    getMixSideFixed,
+    mixSideHasChildren,
+  };
+}