useHeaderSetting.ts 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import type { HeaderSetting } from '/#/config';
  2. import { computed, unref } from 'vue';
  3. import { useAppStore } from '/@/store/modules/app';
  4. import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  5. import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  6. import { useFullContent } from '/@/hooks/web/useFullContent';
  7. import { MenuModeEnum } from '/@/enums/menuEnum';
  8. export function useHeaderSetting() {
  9. const { getFullContent } = useFullContent();
  10. const appStore = useAppStore();
  11. const getShowFullHeaderRef = computed(() => {
  12. return (
  13. !unref(getFullContent) &&
  14. unref(getShowMixHeaderRef) &&
  15. unref(getShowHeader) &&
  16. !unref(getIsTopMenu) &&
  17. !unref(getIsMixSidebar)
  18. );
  19. });
  20. const getUnFixedAndFull = computed(() => !unref(getFixed) && !unref(getShowFullHeaderRef));
  21. const getShowInsetHeaderRef = computed(() => {
  22. const need = !unref(getFullContent) && unref(getShowHeader);
  23. return (
  24. (need && !unref(getShowMixHeaderRef)) ||
  25. (need && unref(getIsTopMenu)) ||
  26. (need && unref(getIsMixSidebar))
  27. );
  28. });
  29. const {
  30. getMenuMode,
  31. getSplit,
  32. getShowHeaderTrigger,
  33. getIsSidebarType,
  34. getIsMixSidebar,
  35. getIsTopMenu,
  36. } = useMenuSetting();
  37. const { getShowBreadCrumb, getShowLogo } = useRootSetting();
  38. const getShowMixHeaderRef = computed(() => !unref(getIsSidebarType) && unref(getShowHeader));
  39. const getShowDoc = computed(() => appStore.getHeaderSetting.showDoc);
  40. const getHeaderTheme = computed(() => appStore.getHeaderSetting.theme);
  41. const getShowHeader = computed(() => appStore.getHeaderSetting.show);
  42. const getFixed = computed(() => appStore.getHeaderSetting.fixed);
  43. const getHeaderBgColor = computed(() => appStore.getHeaderSetting.bgColor);
  44. const getShowSearch = computed(() => appStore.getHeaderSetting.showSearch);
  45. const getUseLockPage = computed(() => appStore.getHeaderSetting.useLockPage);
  46. const getShowFullScreen = computed(() => appStore.getHeaderSetting.showFullScreen);
  47. const getShowNotice = computed(() => appStore.getHeaderSetting.showNotice);
  48. const getShowBread = computed(() => {
  49. return (
  50. unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && unref(getShowBreadCrumb) && !unref(getSplit)
  51. );
  52. });
  53. const getShowHeaderLogo = computed(() => {
  54. return unref(getShowLogo) && !unref(getIsSidebarType) && !unref(getIsMixSidebar);
  55. });
  56. const getShowContent = computed(() => {
  57. return unref(getShowBread) || unref(getShowHeaderTrigger);
  58. });
  59. // Set header configuration
  60. function setHeaderSetting(headerSetting: Partial<HeaderSetting>) {
  61. appStore.setProjectConfig({ headerSetting });
  62. }
  63. return {
  64. setHeaderSetting,
  65. getShowDoc,
  66. getShowSearch,
  67. getHeaderTheme,
  68. getUseLockPage,
  69. getShowFullScreen,
  70. getShowNotice,
  71. getShowBread,
  72. getShowContent,
  73. getShowHeaderLogo,
  74. getShowHeader,
  75. getFixed,
  76. getShowMixHeaderRef,
  77. getShowFullHeaderRef,
  78. getShowInsetHeaderRef,
  79. getUnFixedAndFull,
  80. getHeaderBgColor,
  81. };
  82. }