From 6d83eb3f38fd95cff0a4733a718d6531b17a6b57 Mon Sep 17 00:00:00 2001 From: Li Kui <90845831+likui628@users.noreply.github.com> Date: Thu, 7 Sep 2023 22:35:52 +0800 Subject: [PATCH 1/8] done --- .../src/hooks/setting/useHeaderSetting.ts | 2 +- .../admin/src/hooks/setting/useMenuSetting.ts | 2 +- .../admin/src/hooks/setting/useRootSetting.ts | 112 ------------------ apps/admin/src/hooks/web/useLockScreen.ts | 2 +- apps/admin/src/init-application.ts | 2 +- packages/hooks/src/index.ts | 1 + packages/hooks/src/setting/index.ts | 1 + packages/hooks/src/setting/useRootSetting.ts | 94 +++++++++++++++ packages/layouts/bridge.ts | 5 +- 9 files changed, 103 insertions(+), 118 deletions(-) delete mode 100644 apps/admin/src/hooks/setting/useRootSetting.ts create mode 100644 packages/hooks/src/setting/index.ts create mode 100644 packages/hooks/src/setting/useRootSetting.ts diff --git a/apps/admin/src/hooks/setting/useHeaderSetting.ts b/apps/admin/src/hooks/setting/useHeaderSetting.ts index 9c77f38a..db564b29 100644 --- a/apps/admin/src/hooks/setting/useHeaderSetting.ts +++ b/apps/admin/src/hooks/setting/useHeaderSetting.ts @@ -6,7 +6,7 @@ import { computed, unref } from 'vue' import { useAppConfig } from '@vben/hooks' import { useMenuSetting } from '@/hooks/setting/useMenuSetting' -import { useRootSetting } from '@/hooks/setting/useRootSetting' +import { useRootSetting } from '@vben/hooks' import { useFullContent } from '@/hooks/web/useFullContent' import { MenuModeEnum } from '@vben/constants' diff --git a/apps/admin/src/hooks/setting/useMenuSetting.ts b/apps/admin/src/hooks/setting/useMenuSetting.ts index d7c45f6f..70f28a4c 100644 --- a/apps/admin/src/hooks/setting/useMenuSetting.ts +++ b/apps/admin/src/hooks/setting/useMenuSetting.ts @@ -13,7 +13,7 @@ import { TriggerEnum, } from '@vben/constants' import { useFullContent } from '@/hooks/web/useFullContent' -import { useRootSetting } from '@/hooks/setting/useRootSetting' +import { useRootSetting } from '@vben/hooks' const mixSideHasChildren = ref(false) diff --git a/apps/admin/src/hooks/setting/useRootSetting.ts b/apps/admin/src/hooks/setting/useRootSetting.ts deleted file mode 100644 index e8198dcf..00000000 --- a/apps/admin/src/hooks/setting/useRootSetting.ts +++ /dev/null @@ -1,112 +0,0 @@ -// import type { ProjectConfig } from '@/types' -import { computed } from 'vue' -import { useConfigStoreWithOut } from '@/store/config' -import { useAppStoreWithOut } from '@/store/modules/app' -import { ContentLayoutEnum } from '@vben/constants' - -// type RootSetting = Omit< -// ProjectConfig, -// 'locale' | 'headerSetting' | 'menuSetting' | 'multiTabsSetting' -// > - -export function useRootSetting() { - - const configStore = useConfigStoreWithOut() - const appStore = useAppStoreWithOut() - - const getPageLoading = computed(() => appStore.getPageLoading) - - const getOpenKeepAlive = computed( - () => configStore.getProjectConfig.openKeepAlive, - ) - - const getSettingButtonPosition = computed( - () => configStore.getProjectConfig.settingButtonPosition, - ) - - const getCanEmbedIFramePage = computed( - () => configStore.getProjectConfig.canEmbedIFramePage, - ) - - const getPermissionMode = computed( - () => configStore.getProjectConfig.permissionMode, - ) - - const getShowLogo = computed(() => configStore.getProjectConfig.showLogo) - - const getContentMode = computed(() => configStore.getProjectConfig.contentMode) - - const getUseOpenBackTop = computed( - () => configStore.getProjectConfig.useOpenBackTop, - ) - - const getShowSettingButton = computed( - () => configStore.getProjectConfig.showSettingButton, - ) - - const getShowFooter = computed(() => configStore.getProjectConfig.showFooter) - - const getShowBreadCrumb = computed( - () => configStore.getProjectConfig.showBreadCrumb, - ) - - const getThemeColor = computed(() => configStore.getProjectConfig.themeColor) - - const getShowBreadCrumbIcon = computed( - () => configStore.getProjectConfig.showBreadCrumbIcon, - ) - - const getFullContent = computed(() => configStore.getProjectConfig.fullContent) - - const getColorWeak = computed(() => configStore.getProjectConfig.colorWeak) - - const getGrayMode = computed(() => configStore.getProjectConfig.grayMode) - - const getLockTime = computed(() => configStore.getProjectConfig.lockTime) - - const getShowDarkModeToggle = computed( - () => configStore.getProjectConfig.showDarkModeToggle, - ) - - const getLayoutContentMode = computed(() => - configStore.getProjectConfig.contentMode === ContentLayoutEnum.FULL - ? ContentLayoutEnum.FULL - : ContentLayoutEnum.FIXED, - ) - // TODO 待实现 - // const getDarkMode = computed(() => configStore.getDarkMode) - - // TODO 待实现 - // function setRootSetting(setting: Partial) { - // configStore.setProjectConfig(setting) - // } - // TODO 待实现 - // function setDarkMode(mode: ThemeEnum) { - // configStore.setDarkMode(mode) - // } - return { - // setRootSetting, - - getSettingButtonPosition, - getFullContent, - getColorWeak, - getGrayMode, - getLayoutContentMode, - getPageLoading, - getOpenKeepAlive, - getCanEmbedIFramePage, - getPermissionMode, - getShowLogo, - getShowBreadCrumb, - getShowBreadCrumbIcon, - getUseOpenBackTop, - getShowSettingButton, - getShowFooter, - getContentMode, - getLockTime, - getThemeColor, - // getDarkMode, - // setDarkMode, - getShowDarkModeToggle, - } -} diff --git a/apps/admin/src/hooks/web/useLockScreen.ts b/apps/admin/src/hooks/web/useLockScreen.ts index a6e70168..8f4417bf 100644 --- a/apps/admin/src/hooks/web/useLockScreen.ts +++ b/apps/admin/src/hooks/web/useLockScreen.ts @@ -4,7 +4,7 @@ import { useThrottleFn } from '@vben/utils' import { useLockStore } from '@/store/lock' import { useConfigStore } from '@/store/config' import { useUserStore } from '@/store/user' -import { useRootSetting } from '#/hooks/setting/useRootSetting' +import { useRootSetting } from '@vben/hooks' import { BASIC_LOCK_PATH } from '@vben/constants' import { router } from '@/router' diff --git a/apps/admin/src/init-application.ts b/apps/admin/src/init-application.ts index d67b1f9f..55df5645 100644 --- a/apps/admin/src/init-application.ts +++ b/apps/admin/src/init-application.ts @@ -7,7 +7,7 @@ import { projectSetting } from './setting' import { initComp } from '@vben/vbencomponents' import { initLayout } from '@vben/layouts' import { localeList } from '@vben/locale/src/config' -import { useRootSetting } from '@/hooks/setting/useRootSetting' +import { useRootSetting } from '@vben/hooks' import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting' import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting' import { diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index 3f367a53..a1ee565c 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -6,3 +6,4 @@ export * from './useContext' export * from './useRefs' export * from './config' export * from './event' +export * from './setting' diff --git a/packages/hooks/src/setting/index.ts b/packages/hooks/src/setting/index.ts new file mode 100644 index 00000000..49e2593e --- /dev/null +++ b/packages/hooks/src/setting/index.ts @@ -0,0 +1 @@ +export * from './useRootSetting' diff --git a/packages/hooks/src/setting/useRootSetting.ts b/packages/hooks/src/setting/useRootSetting.ts new file mode 100644 index 00000000..abd29bbe --- /dev/null +++ b/packages/hooks/src/setting/useRootSetting.ts @@ -0,0 +1,94 @@ +import { computed } from 'vue' +import { ContentLayoutEnum } from '@vben/constants' +import { useAppConfig } from '../config' + +// type RootSetting = Omit< +// ProjectConfig, +// 'locale' | 'headerSetting' | 'menuSetting' | 'multiTabsSetting' +// > + +export function useRootSetting() { + const appStore = useAppConfig() + + const getPageLoading = computed(() => appStore.transition.openPageLoading) + + const getOpenKeepAlive = computed(() => appStore.openKeepAlive) + + const getSettingButtonPosition = computed( + () => appStore.settingButtonPosition, + ) + + const getCanEmbedIFramePage = computed(() => appStore.canEmbedIFramePage) + + const getPermissionMode = computed(() => appStore.permissionMode) + + const getShowLogo = computed(() => appStore.logo.show) + + const getContentMode = computed(() => appStore.content.mode) + + const getUseOpenBackTop = computed(() => appStore.useOpenBackTop) + + const getShowSettingButton = computed(() => appStore.header.showSetting) + + const getShowFooter = computed(() => appStore.footer.show) + + const getShowBreadCrumb = computed(() => appStore.header.showBreadCrumb) + + const getThemeColor = computed(() => appStore.themeColor) + + const getShowBreadCrumbIcon = computed( + () => appStore.header.showBreadCrumbIcon, + ) + + const getFullContent = computed(() => appStore.content.fullScreen) + + const getColorWeak = computed(() => appStore.colorWeak) + + const getGrayMode = computed(() => appStore.grayMode) + + const getLockTime = computed(() => appStore.lockTime) + + const getShowDarkModeToggle = computed(() => appStore.showThemeModeToggle) + + const getLayoutContentMode = computed(() => + appStore.content.mode === ContentLayoutEnum.FULL + ? ContentLayoutEnum.FULL + : ContentLayoutEnum.FIXED, + ) + // TODO 待实现 + // const getDarkMode = computed(() => configStore.getDarkMode) + + // TODO 待实现 + // function setRootSetting(setting: Partial) { + // configStore.setProjectConfig(setting) + // } + // TODO 待实现 + // function setDarkMode(mode: ThemeEnum) { + // configStore.setDarkMode(mode) + // } + return { + // setRootSetting, + + getSettingButtonPosition, + getFullContent, + getColorWeak, + getGrayMode, + getLayoutContentMode, + getPageLoading, + getOpenKeepAlive, + getCanEmbedIFramePage, + getPermissionMode, + getShowLogo, + getShowBreadCrumb, + getShowBreadCrumbIcon, + getUseOpenBackTop, + getShowSettingButton, + getShowFooter, + getContentMode, + getLockTime, + getThemeColor, + // getDarkMode, + // setDarkMode, + getShowDarkModeToggle, + } +} diff --git a/packages/layouts/bridge.ts b/packages/layouts/bridge.ts index ae26857f..3610b530 100644 --- a/packages/layouts/bridge.ts +++ b/packages/layouts/bridge.ts @@ -1,8 +1,9 @@ import { VNode } from 'vue' import { RouteLocationNormalized } from 'vue-router' +import { useRootSetting } from '@vben/hooks' export interface ContextOptions { - useRootSetting: () => unknown + useRootSetting: () => typeof useRootSetting useAppStore: () => unknown useConfigStore: () => unknown useHeaderSetting: () => unknown @@ -31,7 +32,7 @@ export interface ContextOptions { } export let context: ContextOptions = { - useRootSetting: () => undefined, + useRootSetting: () => useRootSetting, useAppStore: () => undefined, useConfigStore: () => undefined, useUserStore: () => undefined, From 59a68429eefd62a0569d8345e5c0fa6c50f64594 Mon Sep 17 00:00:00 2001 From: Li Kui <90845831+likui628@users.noreply.github.com> Date: Fri, 8 Sep 2023 07:02:24 +0800 Subject: [PATCH 2/8] useMenuSetting&useFullContent --- .../src/hooks/setting/useHeaderSetting.ts | 3 +- apps/admin/src/init-application.ts | 4 +- packages/hooks/src/setting/index.ts | 1 + packages/hooks/src/setting/useMenuSetting.ts | 199 ++++++++++++++++++ packages/hooks/src/web/index.ts | 1 + packages/hooks/src/web/useFullContent.ts | 28 +++ packages/layouts/bridge.ts | 6 +- 7 files changed, 235 insertions(+), 7 deletions(-) create mode 100644 packages/hooks/src/setting/useMenuSetting.ts create mode 100644 packages/hooks/src/web/useFullContent.ts diff --git a/apps/admin/src/hooks/setting/useHeaderSetting.ts b/apps/admin/src/hooks/setting/useHeaderSetting.ts index db564b29..65e83906 100644 --- a/apps/admin/src/hooks/setting/useHeaderSetting.ts +++ b/apps/admin/src/hooks/setting/useHeaderSetting.ts @@ -5,8 +5,7 @@ import { computed, unref } from 'vue' // import { useConfigStoreWithOut } from '@/store/config' import { useAppConfig } from '@vben/hooks' -import { useMenuSetting } from '@/hooks/setting/useMenuSetting' -import { useRootSetting } from '@vben/hooks' +import { useRootSetting, useMenuSetting } from '@vben/hooks' import { useFullContent } from '@/hooks/web/useFullContent' import { MenuModeEnum } from '@vben/constants' diff --git a/apps/admin/src/init-application.ts b/apps/admin/src/init-application.ts index 55df5645..84bae9e7 100644 --- a/apps/admin/src/init-application.ts +++ b/apps/admin/src/init-application.ts @@ -7,7 +7,7 @@ import { projectSetting } from './setting' import { initComp } from '@vben/vbencomponents' import { initLayout } from '@vben/layouts' import { localeList } from '@vben/locale/src/config' -import { useRootSetting } from '@vben/hooks' +import { useMenuSetting, useRootSetting } from '@vben/hooks' import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting' import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting' import { @@ -25,7 +25,7 @@ import { useMultipleTabStore } from '@/store/multipleTab' import { listenerRouteChange } from '@/logics/mitt/routeChange' import { useAppStore } from '@/store/modules/app' import Logo from '@/layout/components/logo.vue' -import { useMenuSetting } from '@/hooks/setting/useMenuSetting' + import { useLockStore } from '@/store/lock' import { unref } from 'vue' import { useLockScreen } from '@/hooks/web/useLockScreen' diff --git a/packages/hooks/src/setting/index.ts b/packages/hooks/src/setting/index.ts index 49e2593e..baa68f37 100644 --- a/packages/hooks/src/setting/index.ts +++ b/packages/hooks/src/setting/index.ts @@ -1 +1,2 @@ export * from './useRootSetting' +export * from './useMenuSetting' diff --git a/packages/hooks/src/setting/useMenuSetting.ts b/packages/hooks/src/setting/useMenuSetting.ts new file mode 100644 index 00000000..3f116b31 --- /dev/null +++ b/packages/hooks/src/setting/useMenuSetting.ts @@ -0,0 +1,199 @@ +import type { MenuSetting } from '@vben/types' + +import { computed, unref, ref } from 'vue' + +import { useAppConfig } from '../config' + +import { + SIDE_BAR_MINI_WIDTH, + SIDE_BAR_SHOW_TIT_MINI_WIDTH, + MenuModeEnum, + MenuTypeEnum, + TriggerEnum, +} from '@vben/constants' +import { useRootSetting } from './useRootSetting' +import { useFullContent } from '../web' + +const mixSideHasChildren = ref(false) + +export function useMenuSetting() { + const { getFullContent: fullContent } = useFullContent() + const configStore = useAppConfig() + const { getShowLogo } = useRootSetting() + const getShowSidebar = computed(() => { + return ( + unref(getSplit) || + (unref(getShowMenu) && + unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && + !unref(fullContent)) + ) + }) + + // TODO + const getCollapsed = computed(() => false) + + // TODO + const getMenuType = computed(() => 'sidebar') + + const getMenuMode = computed(() => configStore.menu.mode) + + // TODO + const getMenuFixed = computed(() => true) + + // TODO + const getShowMenu = computed(() => true) + + // TODO + const getMenuHidden = computed(() => false) + + const getMenuWidth = computed(() => configStore.sidebar.width) + + const getTrigger = computed(() => configStore.sidebar.trigger) + + const getMenuTheme = computed(() => configStore.sidebar.theme) + + const getSplit = computed(() => configStore.menu.split) + + const getMenuBgColor = computed(() => configStore.sidebar.bgColor) + + const getMixSideTrigger = computed(() => configStore.menu.mixSideTrigger) + + const getCanDrag = computed(() => configStore.menu.canDrag) + + const getAccordion = computed(() => configStore.menu.accordion) + + const getMixSideFixed = computed(() => configStore.menu.mixSideFixed) + + const getTopMenuAlign = computed(() => configStore.menu.topMenuAlign) + + const getCloseMixSidebarOnChange = computed( + () => configStore.closeMixSidebarOnChange, + ) + + const getIsSidebarType = computed( + () => unref(getMenuType) === MenuTypeEnum.SIDEBAR, + ) + + const getIsTopMenu = computed( + () => unref(getMenuType) === MenuTypeEnum.TOP_MENU, + ) + + const getMenuShowLogo = computed( + () => unref(getShowLogo) && unref(getIsSidebarType), + ) + + const getCollapsedShowTitle = computed( + () => configStore.menu.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 } = configStore.menu + 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): void { + configStore.setAppConfig({ menu: 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, + getMenuShowLogo, + } +} diff --git a/packages/hooks/src/web/index.ts b/packages/hooks/src/web/index.ts index f47471e8..209c2a1f 100644 --- a/packages/hooks/src/web/index.ts +++ b/packages/hooks/src/web/index.ts @@ -3,3 +3,4 @@ export * from './useLayout' export * from './useTheme' export * from './useAppInject' export * from './useAppContext' +export * from './useFullContent' diff --git a/packages/hooks/src/web/useFullContent.ts b/packages/hooks/src/web/useFullContent.ts new file mode 100644 index 00000000..024475f1 --- /dev/null +++ b/packages/hooks/src/web/useFullContent.ts @@ -0,0 +1,28 @@ +import { computed, unref } from 'vue' + +import { useAppConfig } from '../config' + +import { useRouter } from 'vue-router' + +/** + * @description: Full screen display content + */ +export const useFullContent = () => { + const appStore = useAppConfig() + const router = useRouter() + const { currentRoute } = router + + // Whether to display the content in full screen without displaying the menu + const getFullContent = computed(() => { + // Query parameters, the full screen is displayed when the address bar has a full parameter + const route = unref(currentRoute) + const query = route.query + if (query && Reflect.has(query, '__full__')) { + return true + } + // Return to the configuration in the configuration file + return appStore.content.fullScreen + }) + + return { getFullContent } +} diff --git a/packages/layouts/bridge.ts b/packages/layouts/bridge.ts index 3610b530..6d6a146f 100644 --- a/packages/layouts/bridge.ts +++ b/packages/layouts/bridge.ts @@ -1,6 +1,6 @@ import { VNode } from 'vue' import { RouteLocationNormalized } from 'vue-router' -import { useRootSetting } from '@vben/hooks' +import { useRootSetting,useMenuSetting } from '@vben/hooks' export interface ContextOptions { useRootSetting: () => typeof useRootSetting @@ -10,7 +10,7 @@ export interface ContextOptions { useTabs: () => unknown useUserStore: () => unknown useAppInject: () => unknown - useMenuSetting: () => unknown + useMenuSetting: () => typeof useMenuSetting useMultipleTabSetting: () => unknown useMultipleTabStore: () => unknown useTransitionSetting: () => unknown @@ -37,7 +37,7 @@ export let context: ContextOptions = { useConfigStore: () => undefined, useUserStore: () => undefined, useHeaderSetting: () => undefined, - useMenuSetting: () => undefined, + useMenuSetting: () => useMenuSetting, useMultipleTabSetting: () => undefined, useTransitionSetting: () => undefined, useLockStore: () => undefined, From 352832db9fd6f827b9e3000e7676d34c15dd6b73 Mon Sep 17 00:00:00 2001 From: Li Kui <90845831+likui628@users.noreply.github.com> Date: Fri, 8 Sep 2023 07:07:43 +0800 Subject: [PATCH 3/8] delete files --- .../src/hooks/setting/useHeaderSetting.ts | 4 +- .../admin/src/hooks/setting/useMenuSetting.ts | 199 ------------------ apps/admin/src/hooks/web/useFullContent.ts | 28 --- 3 files changed, 1 insertion(+), 230 deletions(-) delete mode 100644 apps/admin/src/hooks/setting/useMenuSetting.ts delete mode 100644 apps/admin/src/hooks/web/useFullContent.ts diff --git a/apps/admin/src/hooks/setting/useHeaderSetting.ts b/apps/admin/src/hooks/setting/useHeaderSetting.ts index 65e83906..c1cd2c8f 100644 --- a/apps/admin/src/hooks/setting/useHeaderSetting.ts +++ b/apps/admin/src/hooks/setting/useHeaderSetting.ts @@ -2,11 +2,9 @@ import type { HeaderSetting } from '@vben/types' import { computed, unref } from 'vue' -// import { useConfigStoreWithOut } from '@/store/config' -import { useAppConfig } from '@vben/hooks' +import { useAppConfig, useFullContent } from '@vben/hooks' import { useRootSetting, useMenuSetting } from '@vben/hooks' -import { useFullContent } from '@/hooks/web/useFullContent' import { MenuModeEnum } from '@vben/constants' export function useHeaderSetting() { diff --git a/apps/admin/src/hooks/setting/useMenuSetting.ts b/apps/admin/src/hooks/setting/useMenuSetting.ts deleted file mode 100644 index 70f28a4c..00000000 --- a/apps/admin/src/hooks/setting/useMenuSetting.ts +++ /dev/null @@ -1,199 +0,0 @@ -import type { MenuSetting } from '@vben/types' - -import { computed, unref, ref } from 'vue' - -// import { useConfigStoreWithOut } from '@/store/config' -import { useAppConfig } from '@vben/hooks' - -import { - SIDE_BAR_MINI_WIDTH, - SIDE_BAR_SHOW_TIT_MINI_WIDTH, - MenuModeEnum, - MenuTypeEnum, - TriggerEnum, -} from '@vben/constants' -import { useFullContent } from '@/hooks/web/useFullContent' -import { useRootSetting } from '@vben/hooks' - -const mixSideHasChildren = ref(false) - -// todo src/hooks 在往 @VBen\hooks 转移 -export function useMenuSetting() { - const { getFullContent: fullContent } = useFullContent() - const configStore = useAppConfig() - // const useAppConfigStore = appConfigStore() - const { getShowLogo } = useRootSetting() - const getShowSidebar = computed(() => { - return ( - unref(getSplit) || - (unref(getShowMenu) && - unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && - !unref(fullContent)) - ) - }) - - const getCollapsed = computed(() => false) - - const getMenuType = computed(() => 'sidebar') - - const getMenuMode = computed(() => configStore.menu.mode) - - const getMenuFixed = computed(() => true) - - const getShowMenu = computed(() => true) - - const getMenuHidden = computed(() => false) - - const getMenuWidth = computed(() => 210) - - const getTrigger = computed(() => 'HEADER') - - const getMenuTheme = computed(() => 'dark') - - const getSplit = computed(() => configStore.menu.split) - - const getMenuBgColor = computed(() => '#001529') - - const getMixSideTrigger = computed( - () => configStore.menu.mixSideTrigger, - ) - - const getCanDrag = computed(() => configStore.menu.canDrag) - - const getAccordion = computed(() => configStore.menu.accordion) - - const getMixSideFixed = computed(() => configStore.menu.mixSideFixed) - - const getTopMenuAlign = computed(() => configStore.menu.topMenuAlign) - - const getCloseMixSidebarOnChange = computed( - () => false, - ) - - const getIsSidebarType = computed( - () => unref(getMenuType) === MenuTypeEnum.SIDEBAR, - ) - - const getIsTopMenu = computed( - () => unref(getMenuType) === MenuTypeEnum.TOP_MENU, - ) - - const getMenuShowLogo = computed( - () => unref(getShowLogo) && unref(getIsSidebarType), - ) - - const getCollapsedShowTitle = computed( - () => configStore.menu.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 } = configStore.menu - 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): void { - configStore.setAppConfig({ menu: 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, - getMenuShowLogo, - } -} diff --git a/apps/admin/src/hooks/web/useFullContent.ts b/apps/admin/src/hooks/web/useFullContent.ts deleted file mode 100644 index ed5f10f5..00000000 --- a/apps/admin/src/hooks/web/useFullContent.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { computed, unref } from 'vue' - -import { useConfigStoreWithOut } from '@/store/config' - -import { useRouter } from 'vue-router' - -/** - * @description: Full screen display content - */ -export const useFullContent = () => { - const appStore = useConfigStoreWithOut() - const router = useRouter() - const { currentRoute } = router - - // Whether to display the content in full screen without displaying the menu - const getFullContent = computed(() => { - // Query parameters, the full screen is displayed when the address bar has a full parameter - const route = unref(currentRoute) - const query = route.query - if (query && Reflect.has(query, '__full__')) { - return true - } - // Return to the configuration in the configuration file - return appStore.getProjectConfig.fullContent - }) - - return { getFullContent } -} From 422757d55ca6a0a93048ef00e7686b0a89bab26c Mon Sep 17 00:00:00 2001 From: Li Kui <90845831+likui628@users.noreply.github.com> Date: Fri, 8 Sep 2023 09:15:08 +0800 Subject: [PATCH 4/8] useHeaderSetting --- apps/admin/src/init-application.ts | 3 +-- packages/hooks/src/setting/index.ts | 1 + .../hooks/src}/setting/useHeaderSetting.ts | 10 +++++++--- packages/layouts/bridge.ts | 6 +++--- 4 files changed, 12 insertions(+), 8 deletions(-) rename {apps/admin/src/hooks => packages/hooks/src}/setting/useHeaderSetting.ts (95%) diff --git a/apps/admin/src/init-application.ts b/apps/admin/src/init-application.ts index 84bae9e7..2462ade6 100644 --- a/apps/admin/src/init-application.ts +++ b/apps/admin/src/init-application.ts @@ -7,9 +7,8 @@ import { projectSetting } from './setting' import { initComp } from '@vben/vbencomponents' import { initLayout } from '@vben/layouts' import { localeList } from '@vben/locale/src/config' -import { useMenuSetting, useRootSetting } from '@vben/hooks' +import { useHeaderSetting, useMenuSetting, useRootSetting } from '@vben/hooks' import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting' -import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting' import { getAllParentPath, getChildrenMenus, diff --git a/packages/hooks/src/setting/index.ts b/packages/hooks/src/setting/index.ts index baa68f37..0a186e99 100644 --- a/packages/hooks/src/setting/index.ts +++ b/packages/hooks/src/setting/index.ts @@ -1,2 +1,3 @@ export * from './useRootSetting' export * from './useMenuSetting' +export * from './useHeaderSetting' diff --git a/apps/admin/src/hooks/setting/useHeaderSetting.ts b/packages/hooks/src/setting/useHeaderSetting.ts similarity index 95% rename from apps/admin/src/hooks/setting/useHeaderSetting.ts rename to packages/hooks/src/setting/useHeaderSetting.ts index c1cd2c8f..b8c57264 100644 --- a/apps/admin/src/hooks/setting/useHeaderSetting.ts +++ b/packages/hooks/src/setting/useHeaderSetting.ts @@ -2,11 +2,15 @@ import type { HeaderSetting } from '@vben/types' import { computed, unref } from 'vue' -import { useAppConfig, useFullContent } from '@vben/hooks' - -import { useRootSetting, useMenuSetting } from '@vben/hooks' import { MenuModeEnum } from '@vben/constants' +import { + useAppConfig, + useFullContent, + useRootSetting, + useMenuSetting, +} from '..' + export function useHeaderSetting() { const { getFullContent } = useFullContent() const configStore = useAppConfig() diff --git a/packages/layouts/bridge.ts b/packages/layouts/bridge.ts index 6d6a146f..3ca1ff09 100644 --- a/packages/layouts/bridge.ts +++ b/packages/layouts/bridge.ts @@ -1,12 +1,12 @@ import { VNode } from 'vue' import { RouteLocationNormalized } from 'vue-router' -import { useRootSetting,useMenuSetting } from '@vben/hooks' +import { useRootSetting, useMenuSetting, useHeaderSetting } from '@vben/hooks' export interface ContextOptions { useRootSetting: () => typeof useRootSetting useAppStore: () => unknown useConfigStore: () => unknown - useHeaderSetting: () => unknown + useHeaderSetting: () => typeof useHeaderSetting useTabs: () => unknown useUserStore: () => unknown useAppInject: () => unknown @@ -36,7 +36,7 @@ export let context: ContextOptions = { useAppStore: () => undefined, useConfigStore: () => undefined, useUserStore: () => undefined, - useHeaderSetting: () => undefined, + useHeaderSetting: () => useHeaderSetting, useMenuSetting: () => useMenuSetting, useMultipleTabSetting: () => undefined, useTransitionSetting: () => undefined, From 54fc933f1b3ef8150dea5f811ccf4008b679ffd7 Mon Sep 17 00:00:00 2001 From: Li Kui <90845831+likui628@users.noreply.github.com> Date: Fri, 8 Sep 2023 09:19:06 +0800 Subject: [PATCH 5/8] useMultipleTabSetting --- apps/admin/src/init-application.ts | 3 +-- packages/hooks/src/setting/index.ts | 1 + .../hooks/src}/setting/useMultipleTabSetting.ts | 4 +--- packages/layouts/bridge.ts | 11 ++++++++--- 4 files changed, 11 insertions(+), 8 deletions(-) rename {apps/admin/src/hooks => packages/hooks/src}/setting/useMultipleTabSetting.ts (87%) diff --git a/apps/admin/src/init-application.ts b/apps/admin/src/init-application.ts index 2462ade6..c8817159 100644 --- a/apps/admin/src/init-application.ts +++ b/apps/admin/src/init-application.ts @@ -7,7 +7,7 @@ import { projectSetting } from './setting' import { initComp } from '@vben/vbencomponents' import { initLayout } from '@vben/layouts' import { localeList } from '@vben/locale/src/config' -import { useHeaderSetting, useMenuSetting, useRootSetting } from '@vben/hooks' +import { useHeaderSetting, useMenuSetting, useMultipleTabSetting, useRootSetting } from '@vben/hooks' import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting' import { getAllParentPath, @@ -29,7 +29,6 @@ import { useLockStore } from '@/store/lock' import { unref } from 'vue' import { useLockScreen } from '@/hooks/web/useLockScreen' import { siteSetting } from '@/config' -import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting' // To decouple the modules below `packages/*`, they no longer depend on each other // If the modules are heavily dependent on each other, you need to provide a decoupling method, and the caller will pass the parameters // Each module needs to provide `bridge` file as a decoupling method diff --git a/packages/hooks/src/setting/index.ts b/packages/hooks/src/setting/index.ts index 0a186e99..4b9ad2de 100644 --- a/packages/hooks/src/setting/index.ts +++ b/packages/hooks/src/setting/index.ts @@ -1,3 +1,4 @@ export * from './useRootSetting' export * from './useMenuSetting' export * from './useHeaderSetting' +export * from './useMultipleTabSetting' diff --git a/apps/admin/src/hooks/setting/useMultipleTabSetting.ts b/packages/hooks/src/setting/useMultipleTabSetting.ts similarity index 87% rename from apps/admin/src/hooks/setting/useMultipleTabSetting.ts rename to packages/hooks/src/setting/useMultipleTabSetting.ts index 562afc94..5d506311 100644 --- a/apps/admin/src/hooks/setting/useMultipleTabSetting.ts +++ b/packages/hooks/src/setting/useMultipleTabSetting.ts @@ -1,9 +1,7 @@ import type { MultiTabsSetting } from '@vben/types' import { computed } from 'vue' - -// import { useConfigStoreWithOut } from '@/store/config'; -import { useAppConfig } from '@vben/hooks' +import { useAppConfig } from '..' export function useMultipleTabSetting() { const configStore = useAppConfig() diff --git a/packages/layouts/bridge.ts b/packages/layouts/bridge.ts index 3ca1ff09..be239295 100644 --- a/packages/layouts/bridge.ts +++ b/packages/layouts/bridge.ts @@ -1,6 +1,11 @@ import { VNode } from 'vue' import { RouteLocationNormalized } from 'vue-router' -import { useRootSetting, useMenuSetting, useHeaderSetting } from '@vben/hooks' +import { + useRootSetting, + useMenuSetting, + useHeaderSetting, + useMultipleTabSetting, +} from '@vben/hooks' export interface ContextOptions { useRootSetting: () => typeof useRootSetting @@ -11,7 +16,7 @@ export interface ContextOptions { useUserStore: () => unknown useAppInject: () => unknown useMenuSetting: () => typeof useMenuSetting - useMultipleTabSetting: () => unknown + useMultipleTabSetting: () => typeof useMultipleTabSetting useMultipleTabStore: () => unknown useTransitionSetting: () => unknown useLockStore: () => unknown @@ -38,7 +43,7 @@ export let context: ContextOptions = { useUserStore: () => undefined, useHeaderSetting: () => useHeaderSetting, useMenuSetting: () => useMenuSetting, - useMultipleTabSetting: () => undefined, + useMultipleTabSetting: () => useMultipleTabSetting, useTransitionSetting: () => undefined, useLockStore: () => undefined, useLockScreen: () => undefined, From 2dfa9156450e9062dee652d707fe1c3351c62580 Mon Sep 17 00:00:00 2001 From: Li Kui <90845831+likui628@users.noreply.github.com> Date: Fri, 8 Sep 2023 09:24:55 +0800 Subject: [PATCH 6/8] useTransitionSetting --- .../src/hooks/setting/useTransitionSetting.ts | 31 ----------------- apps/admin/src/init-application.ts | 9 +++-- packages/hooks/src/setting/index.ts | 1 + .../hooks/src/setting/useTransitionSetting.ts | 33 +++++++++++++++++++ packages/layouts/bridge.ts | 5 +-- 5 files changed, 44 insertions(+), 35 deletions(-) delete mode 100644 apps/admin/src/hooks/setting/useTransitionSetting.ts create mode 100644 packages/hooks/src/setting/useTransitionSetting.ts diff --git a/apps/admin/src/hooks/setting/useTransitionSetting.ts b/apps/admin/src/hooks/setting/useTransitionSetting.ts deleted file mode 100644 index 04b45f35..00000000 --- a/apps/admin/src/hooks/setting/useTransitionSetting.ts +++ /dev/null @@ -1,31 +0,0 @@ -import type { TransitionSetting } from '@vben/types'; - -import { computed } from 'vue'; - -import { useConfigStoreWithOut } from '@/store/config' - -export function useTransitionSetting() { - const configStore = useConfigStoreWithOut(); - - const getEnableTransition = computed(() => configStore.getTransitionSetting?.enable); - - const getOpenNProgress = computed(() => configStore.getTransitionSetting?.openNProgress); - - const getOpenPageLoading = computed((): boolean => { - return !!configStore.getTransitionSetting?.openPageLoading; - }); - - const getBasicTransition = computed(() => configStore.getTransitionSetting?.basicTransition); - - function setTransitionSetting(transitionSetting: Partial) { - configStore.setProjectConfig({ transitionSetting }); - } - return { - setTransitionSetting, - - getEnableTransition, - getOpenNProgress, - getOpenPageLoading, - getBasicTransition, - }; -} diff --git a/apps/admin/src/init-application.ts b/apps/admin/src/init-application.ts index c8817159..7c36ce04 100644 --- a/apps/admin/src/init-application.ts +++ b/apps/admin/src/init-application.ts @@ -7,8 +7,13 @@ import { projectSetting } from './setting' import { initComp } from '@vben/vbencomponents' import { initLayout } from '@vben/layouts' import { localeList } from '@vben/locale/src/config' -import { useHeaderSetting, useMenuSetting, useMultipleTabSetting, useRootSetting } from '@vben/hooks' -import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting' +import { + useHeaderSetting, + useMenuSetting, + useMultipleTabSetting, + useRootSetting, + useTransitionSetting, +} from '@vben/hooks' import { getAllParentPath, getChildrenMenus, diff --git a/packages/hooks/src/setting/index.ts b/packages/hooks/src/setting/index.ts index 4b9ad2de..a9b58ab5 100644 --- a/packages/hooks/src/setting/index.ts +++ b/packages/hooks/src/setting/index.ts @@ -2,3 +2,4 @@ export * from './useRootSetting' export * from './useMenuSetting' export * from './useHeaderSetting' export * from './useMultipleTabSetting' +export * from './useTransitionSetting' diff --git a/packages/hooks/src/setting/useTransitionSetting.ts b/packages/hooks/src/setting/useTransitionSetting.ts new file mode 100644 index 00000000..7f7073d4 --- /dev/null +++ b/packages/hooks/src/setting/useTransitionSetting.ts @@ -0,0 +1,33 @@ +import type { TransitionSetting } from '@vben/types' + +import { computed } from 'vue' + +import { useAppConfig } from '..' + +export function useTransitionSetting() { + const configStore = useAppConfig() + + const getEnableTransition = computed(() => configStore.transition.enable) + + const getOpenNProgress = computed(() => configStore.transition.openNProgress) + + const getOpenPageLoading = computed((): boolean => { + return !!configStore.transition.openPageLoading + }) + + const getBasicTransition = computed( + () => configStore.transition.basicTransition, + ) + + function setTransitionSetting(transitionSetting: Partial) { + configStore.setAppConfig({ transition: transitionSetting }) + } + return { + setTransitionSetting, + + getEnableTransition, + getOpenNProgress, + getOpenPageLoading, + getBasicTransition, + } +} diff --git a/packages/layouts/bridge.ts b/packages/layouts/bridge.ts index be239295..0c5ce6fa 100644 --- a/packages/layouts/bridge.ts +++ b/packages/layouts/bridge.ts @@ -5,6 +5,7 @@ import { useMenuSetting, useHeaderSetting, useMultipleTabSetting, + useTransitionSetting, } from '@vben/hooks' export interface ContextOptions { @@ -18,7 +19,7 @@ export interface ContextOptions { useMenuSetting: () => typeof useMenuSetting useMultipleTabSetting: () => typeof useMultipleTabSetting useMultipleTabStore: () => unknown - useTransitionSetting: () => unknown + useTransitionSetting: () => typeof useTransitionSetting useLockStore: () => unknown useLockScreen: () => unknown listenerRouteChange: ( @@ -44,7 +45,7 @@ export let context: ContextOptions = { useHeaderSetting: () => useHeaderSetting, useMenuSetting: () => useMenuSetting, useMultipleTabSetting: () => useMultipleTabSetting, - useTransitionSetting: () => undefined, + useTransitionSetting: () => useTransitionSetting, useLockStore: () => undefined, useLockScreen: () => undefined, useAppInject: () => undefined, From 48e5a2942682f67e6259b24994fee45afb8f05db Mon Sep 17 00:00:00 2001 From: Li Kui <90845831+likui628@users.noreply.github.com> Date: Fri, 8 Sep 2023 09:56:16 +0800 Subject: [PATCH 7/8] misc --- apps/admin/src/hooks/event/use-breakpoint.ts | 91 --------------- .../src/hooks/event/use-event-listener.ts | 61 ---------- apps/admin/src/hooks/event/use-scroll-to.ts | 65 ----------- apps/admin/src/hooks/useRootSetting.ts | 109 ------------------ apps/admin/src/hooks/useTabs.ts | 102 ---------------- apps/admin/src/hooks/web/use-app-inject.ts | 10 -- apps/admin/src/hooks/web/useAppContext.ts | 17 --- apps/admin/src/init-application.ts | 6 +- .../src/layout/components/app/AppProvider.tsx | 3 +- packages/hooks/src/web/index.ts | 1 + .../hooks/src}/web/useDesign.ts | 0 packages/layouts/bridge.ts | 10 +- 12 files changed, 11 insertions(+), 464 deletions(-) delete mode 100644 apps/admin/src/hooks/event/use-breakpoint.ts delete mode 100644 apps/admin/src/hooks/event/use-event-listener.ts delete mode 100644 apps/admin/src/hooks/event/use-scroll-to.ts delete mode 100644 apps/admin/src/hooks/useRootSetting.ts delete mode 100644 apps/admin/src/hooks/useTabs.ts delete mode 100644 apps/admin/src/hooks/web/use-app-inject.ts delete mode 100644 apps/admin/src/hooks/web/useAppContext.ts rename {apps/admin/src/hooks => packages/hooks/src}/web/useDesign.ts (100%) diff --git a/apps/admin/src/hooks/event/use-breakpoint.ts b/apps/admin/src/hooks/event/use-breakpoint.ts deleted file mode 100644 index 079dc353..00000000 --- a/apps/admin/src/hooks/event/use-breakpoint.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { ref, computed, ComputedRef, unref } from 'vue' -import { screenMap, ScreenSizeEnum, ScreenValueEnum } from '@vben/constants' -import { useEventListener } from './use-event-listener' - -let globalScreenRef: ComputedRef -let globalWidthRef: ComputedRef -let globalRealWidthRef: ComputedRef - -export interface CreateCallbackParams { - screen: ComputedRef - width: ComputedRef - realWidth: ComputedRef - screenEnum: typeof ScreenValueEnum - screenMap: Map - sizeEnum: typeof ScreenSizeEnum -} - -export function useBreakpoint() { - return { - screenRef: computed(() => unref(globalScreenRef)), - widthRef: globalWidthRef, - screenEnum: ScreenValueEnum, - realWidthRef: globalRealWidthRef, - } -} - -// Just call it once -export function createBreakpointListen( - fn?: (opt: CreateCallbackParams) => void, -) { - const screenRef = ref(ScreenSizeEnum.XL) - const realWidthRef = ref(window.innerWidth) - - function getWindowWidth() { - const width = document.body.clientWidth - const xs = screenMap.get(ScreenSizeEnum.XS)! - const sm = screenMap.get(ScreenSizeEnum.SM)! - const md = screenMap.get(ScreenSizeEnum.MD)! - const lg = screenMap.get(ScreenSizeEnum.LG)! - const xl = screenMap.get(ScreenSizeEnum.XL)! - if (width < xs) { - screenRef.value = ScreenSizeEnum.XS - } else if (width < sm) { - screenRef.value = ScreenSizeEnum.SM - } else if (width < md) { - screenRef.value = ScreenSizeEnum.MD - } else if (width < lg) { - screenRef.value = ScreenSizeEnum.LG - } else if (width < xl) { - screenRef.value = ScreenSizeEnum.XL - } else { - screenRef.value = ScreenSizeEnum.XXL - } - realWidthRef.value = width - } - - useEventListener({ - el: window, - name: 'resize', - - listener: () => { - getWindowWidth() - resizeFn() - }, - // wait: 100, - }) - - getWindowWidth() - globalScreenRef = computed(() => unref(screenRef)) - globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!) - globalRealWidthRef = computed((): number => unref(realWidthRef)) - - function resizeFn() { - fn?.({ - screen: globalScreenRef, - width: globalWidthRef, - realWidth: globalRealWidthRef, - screenEnum: ScreenValueEnum, - screenMap, - sizeEnum: ScreenSizeEnum, - }) - } - - resizeFn() - return { - screenRef: globalScreenRef, - screenEnum: ScreenValueEnum, - widthRef: globalWidthRef, - realWidthRef: globalRealWidthRef, - } -} diff --git a/apps/admin/src/hooks/event/use-event-listener.ts b/apps/admin/src/hooks/event/use-event-listener.ts deleted file mode 100644 index f1bb9f99..00000000 --- a/apps/admin/src/hooks/event/use-event-listener.ts +++ /dev/null @@ -1,61 +0,0 @@ -import type { Ref } from 'vue' -import { ref, watch, unref } from 'vue' -import { useThrottleFn, useDebounceFn } from '@vben/utils' - -export type RemoveEventFn = () => void -export interface UseEventParams { - el?: Element | Ref | Window | any - name: string - listener: EventListener - options?: boolean | AddEventListenerOptions - autoRemove?: boolean - isDebounce?: boolean - wait?: number -} -export function useEventListener({ - el = window, - name, - listener, - options, - autoRemove = true, - isDebounce = true, - wait = 80, -}: UseEventParams): { removeEvent: RemoveEventFn } { - /* eslint-disable-next-line */ - let remove: RemoveEventFn = () => {} - const isAddRef = ref(false) - - if (el) { - const element = ref(el as Element) as Ref - - const handler = isDebounce - ? useDebounceFn(listener, wait) - : useThrottleFn(listener, wait) - const realHandler = wait ? handler : listener - const removeEventListener = (e: Element) => { - isAddRef.value = true - e.removeEventListener(name, realHandler, options) - } - const addEventListener = (e: Element) => - e.addEventListener(name, realHandler, options) - - const removeWatch = watch( - element, - (v, _ov, cleanUp) => { - if (v) { - !unref(isAddRef) && addEventListener(v) - cleanUp(() => { - autoRemove && removeEventListener(v) - }) - } - }, - { immediate: true }, - ) - - remove = () => { - removeEventListener(element.value) - removeWatch() - } - } - return { removeEvent: remove } -} diff --git a/apps/admin/src/hooks/event/use-scroll-to.ts b/apps/admin/src/hooks/event/use-scroll-to.ts deleted file mode 100644 index 9ce3e257..00000000 --- a/apps/admin/src/hooks/event/use-scroll-to.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { isFunction, isUndefined } from '@vben/utils' -import { ref, unref } from 'vue' - -export interface ScrollToParams { - el: any - to: number - duration?: number - callback?: () => any -} - -const easeInOutQuad = (t: number, b: number, c: number, d: number) => { - t /= d / 2 - if (t < 1) { - return (c / 2) * t * t + b - } - t-- - return (-c / 2) * (t * (t - 2) - 1) + b -} -const move = (el: HTMLElement, amount: number) => { - el.scrollTop = amount -} - -const position = (el: HTMLElement) => { - return el.scrollTop -} - -export function useScrollTo({ - el, - to, - duration = 500, - callback, -}: ScrollToParams) { - const isActiveRef = ref(false) - const start = position(el) - const change = to - start - const increment = 20 - let currentTime = 0 - duration = isUndefined(duration) ? 500 : duration - - const animateScroll = function () { - if (!unref(isActiveRef)) { - return - } - currentTime += increment - const val = easeInOutQuad(currentTime, start, change, duration) - move(el, val) - if (currentTime < duration && unref(isActiveRef)) { - requestAnimationFrame(animateScroll) - } else { - if (callback && isFunction(callback)) { - callback() - } - } - } - const run = () => { - isActiveRef.value = true - animateScroll() - } - - const stop = () => { - isActiveRef.value = false - } - - return { start: run, stop } -} diff --git a/apps/admin/src/hooks/useRootSetting.ts b/apps/admin/src/hooks/useRootSetting.ts deleted file mode 100644 index 345a241b..00000000 --- a/apps/admin/src/hooks/useRootSetting.ts +++ /dev/null @@ -1,109 +0,0 @@ -import type { ProjectConfig } from '@vben/types' -import { computed } from 'vue' -import { useConfigStoreWithOut } from '@/store/config' -import { ContentLayoutEnum } from '@vben/constants' - -type RootSetting = Omit< - ProjectConfig, - 'locale' | 'headerSetting' | 'menuSetting' | 'multiTabsSetting' -> - -export function useRootSetting() { - const appStore = useConfigStoreWithOut() - - const getPageLoading = computed(() => appStore.getPageLoading) - - const getOpenKeepAlive = computed( - () => appStore.getProjectConfig.openKeepAlive, - ) - - const getSettingButtonPosition = computed( - () => appStore.getProjectConfig.settingButtonPosition, - ) - - const getCanEmbedIFramePage = computed( - () => appStore.getProjectConfig.canEmbedIFramePage, - ) - - const getPermissionMode = computed( - () => appStore.getProjectConfig.permissionMode, - ) - - const getShowLogo = computed(() => appStore.getProjectConfig.showLogo) - - const getContentMode = computed(() => appStore.getProjectConfig.contentMode) - - const getUseOpenBackTop = computed( - () => appStore.getProjectConfig.useOpenBackTop, - ) - - const getShowSettingButton = computed( - () => appStore.getProjectConfig.showSettingButton, - ) - - const getShowFooter = computed(() => appStore.getProjectConfig.showFooter) - - const getShowBreadCrumb = computed( - () => appStore.getProjectConfig.showBreadCrumb, - ) - - const getThemeColor = computed(() => appStore.getProjectConfig.themeColor) - - const getShowBreadCrumbIcon = computed( - () => appStore.getProjectConfig.showBreadCrumbIcon, - ) - - const getFullContent = computed(() => appStore.getProjectConfig.fullContent) - - const getColorWeak = computed(() => appStore.getProjectConfig.colorWeak) - - const getGrayMode = computed(() => appStore.getProjectConfig.grayMode) - - const getLockTime = computed(() => appStore.getProjectConfig.lockTime) - - const getShowDarkModeToggle = computed( - () => appStore.getProjectConfig.showDarkModeToggle, - ) - - const getLayoutContentMode = computed(() => - appStore.getProjectConfig.contentMode === ContentLayoutEnum.FULL - ? ContentLayoutEnum.FULL - : ContentLayoutEnum.FIXED, - ) - // TODO 待实现 - // const getDarkMode = computed(() => appStore.getDarkMode) - - // TODO 待实现 - // function setRootSetting(setting: Partial) { - // appStore.setProjectConfig(setting) - // } - // TODO 待实现 - // function setDarkMode(mode: ThemeEnum) { - // appStore.setDarkMode(mode) - // } - return { - // setRootSetting, - - getSettingButtonPosition, - getFullContent, - getColorWeak, - getGrayMode, - getLayoutContentMode, - getPageLoading, - getOpenKeepAlive, - getCanEmbedIFramePage, - getPermissionMode, - getShowLogo, - getShowBreadCrumb, - getShowBreadCrumbIcon, - getUseOpenBackTop, - getShowSettingButton, - getShowFooter, - getContentMode, - getLockTime, - getThemeColor, - // getDarkMode, - // setDarkMode, - getShowDarkModeToggle, - } -} diff --git a/apps/admin/src/hooks/useTabs.ts b/apps/admin/src/hooks/useTabs.ts deleted file mode 100644 index 7b289d1a..00000000 --- a/apps/admin/src/hooks/useTabs.ts +++ /dev/null @@ -1,102 +0,0 @@ -import type { RouteLocationNormalized, Router } from 'vue-router' - -import { useRouter } from 'vue-router' -import { unref } from 'vue' -import { useAppStore } from '@/store/modules/app' -import { useMultipleTabStore } from '@/store/multipleTab' -import { TabActionEnum } from '@vben/constants' - -export function useTabs(_router?: Router) { - const appStore = useAppStore() - - function canIUseTabs(): boolean { - const { show } = appStore.getMultiTabsSetting - if (!show) { - throw new Error( - 'The multi-tab page is currently not open, please open it in the settings！', - ) - } - return !!show - } - - const tabStore = useMultipleTabStore() - const router = _router || useRouter() - - const { currentRoute } = router - - function getCurrentTab() { - const route = unref(currentRoute) - - return tabStore.getTabList.find((item) => item.fullPath === route.fullPath)! - } - - async function updateTabTitle(title: string, tab?: RouteLocationNormalized) { - const canIUse = canIUseTabs - if (!canIUse) { - return - } - const targetTab = tab || getCurrentTab() - await tabStore.setTabTitle(title, targetTab) - } - - async function updateTabPath(path: string, tab?: RouteLocationNormalized) { - const canIUse = canIUseTabs - if (!canIUse) { - return - } - const targetTab = tab || getCurrentTab() - await tabStore.updateTabPath(path, targetTab) - } - - async function handleTabAction( - action: TabActionEnum, - tab?: RouteLocationNormalized, - ) { - const canIUse = canIUseTabs - if (!canIUse) { - return - } - const currentTab = getCurrentTab() - switch (action) { - case TabActionEnum.REFRESH_PAGE: - await tabStore.refreshPage(router) - break - - case TabActionEnum.CLOSE_ALL: - await tabStore.closeAllTab(router) - break - - case TabActionEnum.CLOSE_LEFT: - await tabStore.closeLeftTabs(currentTab, router) - break - - case TabActionEnum.CLOSE_RIGHT: - await tabStore.closeRightTabs(currentTab, router) - break - - case TabActionEnum.CLOSE_OTHER: - await tabStore.closeOtherTabs(currentTab, router) - break - - case TabActionEnum.CLOSE_CURRENT: - case TabActionEnum.CLOSE: - await tabStore.closeTab(tab || currentTab, router) - break - } - } - - return { - refreshPage: () => handleTabAction(TabActionEnum.REFRESH_PAGE), - closeAll: () => handleTabAction(TabActionEnum.CLOSE_ALL), - closeLeft: () => handleTabAction(TabActionEnum.CLOSE_LEFT), - closeRight: () => handleTabAction(TabActionEnum.CLOSE_RIGHT), - closeOther: () => handleTabAction(TabActionEnum.CLOSE_OTHER), - closeCurrent: () => handleTabAction(TabActionEnum.CLOSE_CURRENT), - close: (tab?: RouteLocationNormalized) => - handleTabAction(TabActionEnum.CLOSE, tab), - setTitle: (title: string, tab?: RouteLocationNormalized) => - updateTabTitle(title, tab), - updatePath: (fullPath: string, tab?: RouteLocationNormalized) => - updateTabPath(fullPath, tab), - } -} diff --git a/apps/admin/src/hooks/web/use-app-inject.ts b/apps/admin/src/hooks/web/use-app-inject.ts deleted file mode 100644 index 53fc32f0..00000000 --- a/apps/admin/src/hooks/web/use-app-inject.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { computed, unref } from 'vue' -import { useAppProviderContext } from './useAppContext' - -export function useAppInject() { - const values = useAppProviderContext() - - return { - getIsMobile: computed(() => unref(values.isMobile)), - } -} diff --git a/apps/admin/src/hooks/web/useAppContext.ts b/apps/admin/src/hooks/web/useAppContext.ts deleted file mode 100644 index 3a38324b..00000000 --- a/apps/admin/src/hooks/web/useAppContext.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { createContext, useContext } from '@vben/hooks' -import { InjectionKey, Ref } from 'vue' - -export interface AppProviderContextProps { - prefixCls: Ref - isMobile: Ref -} - -const key: InjectionKey = Symbol() - -export function createAppProviderContext(context: AppProviderContextProps) { - return createContext(context, key) -} - -export function useAppProviderContext() { - return useContext(key) -} diff --git a/apps/admin/src/init-application.ts b/apps/admin/src/init-application.ts index 7c36ce04..0b66f2b9 100644 --- a/apps/admin/src/init-application.ts +++ b/apps/admin/src/init-application.ts @@ -8,11 +8,14 @@ import { initComp } from '@vben/vbencomponents' import { initLayout } from '@vben/layouts' import { localeList } from '@vben/locale/src/config' import { + useAppInject, useHeaderSetting, useMenuSetting, useMultipleTabSetting, useRootSetting, + useTabs, useTransitionSetting, + useDesign } from '@vben/hooks' import { getAllParentPath, @@ -21,9 +24,6 @@ import { getMenus, getShallowMenus, } from '@vben/router' -import { useDesign } from '@/hooks/web/useDesign' -import { useAppInject } from '@/hooks/web/use-app-inject' -import { useTabs } from '@/hooks/useTabs' import { useAppConfig, usePromise } from '@vben/hooks' import { useMultipleTabStore } from '@/store/multipleTab' import { listenerRouteChange } from '@/logics/mitt/routeChange' diff --git a/apps/admin/src/layout/components/app/AppProvider.tsx b/apps/admin/src/layout/components/app/AppProvider.tsx index b6da17c2..4404a406 100644 --- a/apps/admin/src/layout/components/app/AppProvider.tsx +++ b/apps/admin/src/layout/components/app/AppProvider.tsx @@ -1,10 +1,9 @@ -import {createBreakpointListen} from '@/hooks/event/use-breakpoint' import {namespace} from '@/setting' import {defineComponent, toRefs, ref, unref} from 'vue' -import {createAppProviderContext} from '@/hooks/web/useAppContext' import {useConfigStoreWithOut} from '@/store/config' import {useMsg, useNotice} from '@vben/vbencomponents' import {setMsg, setNoice} from '@vben/request' +import { createAppProviderContext, createBreakpointListen } from '@vben/hooks' const props = { /** diff --git a/packages/hooks/src/web/index.ts b/packages/hooks/src/web/index.ts index 209c2a1f..c66c1db1 100644 --- a/packages/hooks/src/web/index.ts +++ b/packages/hooks/src/web/index.ts @@ -4,3 +4,4 @@ export * from './useTheme' export * from './useAppInject' export * from './useAppContext' export * from './useFullContent' +export * from './useDesign' diff --git a/apps/admin/src/hooks/web/useDesign.ts b/packages/hooks/src/web/useDesign.ts similarity index 100% rename from apps/admin/src/hooks/web/useDesign.ts rename to packages/hooks/src/web/useDesign.ts diff --git a/packages/layouts/bridge.ts b/packages/layouts/bridge.ts index 0c5ce6fa..7bbc18fb 100644 --- a/packages/layouts/bridge.ts +++ b/packages/layouts/bridge.ts @@ -6,6 +6,8 @@ import { useHeaderSetting, useMultipleTabSetting, useTransitionSetting, + useTabs, + useDesign, } from '@vben/hooks' export interface ContextOptions { @@ -13,7 +15,7 @@ export interface ContextOptions { useAppStore: () => unknown useConfigStore: () => unknown useHeaderSetting: () => typeof useHeaderSetting - useTabs: () => unknown + useTabs: () => typeof useTabs useUserStore: () => unknown useAppInject: () => unknown useMenuSetting: () => typeof useMenuSetting @@ -27,7 +29,7 @@ export interface ContextOptions { immediate?: boolean, ) => unknown usePromise: (fn: Function, config?: unknown) => unknown - useDesign: (scope: string) => unknown + useDesign: typeof useDesign getMenus: () => Promise getCurrentParentPath: (currentPath: string) => Promise getShallowMenus: () => Promise @@ -53,8 +55,8 @@ export let context: ContextOptions = { listenerRouteChange: (listenerRouteChange: (route) => void, immediate?) => true, usePromise: (fn: Function, config) => undefined, - useTabs: () => undefined, - useDesign: (scope: string) => undefined, + useTabs: () => useTabs, + useDesign: useDesign, getMenus: async () => ({}), getCurrentParentPath: async (currentPath: string) => ({}), getShallowMenus: async () => ({}), From aec4fb90338150ba6f19b274f0986bf96c801767 Mon Sep 17 00:00:00 2001 From: Li Kui <90845831+likui628@users.noreply.github.com> Date: Fri, 8 Sep 2023 10:09:34 +0800 Subject: [PATCH 8/8] event hooks --- packages/hooks/src/event/index.ts | 5 +++-- .../hooks/src/event/{use-breakpoint.ts => useBreakpoint.ts} | 2 +- .../src/event/{use-event-listener.ts => useEventListener.ts} | 0 .../hooks/src/event/{use-scroll-to.ts => useScrollTo.ts} | 0 4 files changed, 4 insertions(+), 3 deletions(-) rename packages/hooks/src/event/{use-breakpoint.ts => useBreakpoint.ts} (97%) rename packages/hooks/src/event/{use-event-listener.ts => useEventListener.ts} (100%) rename packages/hooks/src/event/{use-scroll-to.ts => useScrollTo.ts} (100%) diff --git a/packages/hooks/src/event/index.ts b/packages/hooks/src/event/index.ts index 9db1c087..de459d47 100644 --- a/packages/hooks/src/event/index.ts +++ b/packages/hooks/src/event/index.ts @@ -1,2 +1,3 @@ -export * from './use-breakpoint' -export * from './use-scroll-to' +export * from './useBreakpoint' +export * from './useScrollTo' +export * from './useEventListener' diff --git a/packages/hooks/src/event/use-breakpoint.ts b/packages/hooks/src/event/useBreakpoint.ts similarity index 97% rename from packages/hooks/src/event/use-breakpoint.ts rename to packages/hooks/src/event/useBreakpoint.ts index 079dc353..e5d854a8 100644 --- a/packages/hooks/src/event/use-breakpoint.ts +++ b/packages/hooks/src/event/useBreakpoint.ts @@ -1,6 +1,6 @@ import { ref, computed, ComputedRef, unref } from 'vue' import { screenMap, ScreenSizeEnum, ScreenValueEnum } from '@vben/constants' -import { useEventListener } from './use-event-listener' +import { useEventListener } from './useEventListener' let globalScreenRef: ComputedRef let globalWidthRef: ComputedRef diff --git a/packages/hooks/src/event/use-event-listener.ts b/packages/hooks/src/event/useEventListener.ts similarity index 100% rename from packages/hooks/src/event/use-event-listener.ts rename to packages/hooks/src/event/useEventListener.ts diff --git a/packages/hooks/src/event/use-scroll-to.ts b/packages/hooks/src/event/useScrollTo.ts similarity index 100% rename from packages/hooks/src/event/use-scroll-to.ts rename to packages/hooks/src/event/useScrollTo.ts