CRM系统前端
查看 | 历史 | 提交 | 提交对比
vince
2024-07-31 ea5c66b6eb49a98100f926e37b69d70ad0fb1d01
提交 | 用户 | age
a65ad9 1 <template>
b0c2ca 2   <Layout.Header :class="getHeaderClass">
a65ad9 3     <!-- left start -->
V 4     <div :class="`${prefixCls}-left`">
5       <!-- logo -->
c774a6 6       <AppLogo
V 7         v-if="getShowHeaderLogo || getIsMobile"
8         :class="`${prefixCls}-logo`"
9         :theme="getHeaderTheme"
de2555 10         :style="getLogoWidth"
c774a6 11       />
a65ad9 12       <LayoutTrigger
e6db0d 13         v-if="
V 14           (getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile
15         "
a65ad9 16         :theme="getHeaderTheme"
V 17         :sider="false"
18       />
c774a6 19       <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
a65ad9 20     </div>
V 21     <!-- left end -->
22
23     <!-- menu start -->
aaf2fd 24     <div v-if="getShowTopMenu && !getIsMobile" :class="`${prefixCls}-menu`">
a65ad9 25       <LayoutMenu
V 26         :isHorizontal="true"
27         :theme="getHeaderTheme"
28         :splitType="getSplitType"
29         :menuMode="getMenuMode"
30       />
31     </div>
32     <!-- menu-end -->
33
34     <!-- action  -->
35     <div :class="`${prefixCls}-action`">
ea5c66 36       <UpgradePrompt class="mr-2" />
V 37
aaf2fd 38       <AppSearch v-if="getShowSearch" :class="`${prefixCls}-action__item `" />
a65ad9 39
c774a6 40       <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
a65ad9 41
c774a6 42       <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
a65ad9 43
c774a6 44       <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
a65ad9 45
V 46       <AppLocalePicker
f6cef1 47         v-if="getShowLocalePicker"
a65ad9 48         :reload="true"
V 49         :showText="false"
50         :class="`${prefixCls}-action__item`"
51       />
576150 52
V 53       <UserDropDown :theme="getHeaderTheme" />
54
da0491 55       <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
a65ad9 56     </div>
aaf2fd 57   </Layout.Header>
a65ad9 58 </template>
aaf2fd 59 <script lang="ts" setup>
a65ad9 60   import { Layout } from 'ant-design-vue';
aaf2fd 61   import { computed, unref } from 'vue';
IW 62
63   import { AppLocalePicker, AppLogo, AppSearch } from '@/components/Application';
64   import { SettingButtonPositionEnum } from '@/enums/appEnum';
65   import { MenuModeEnum, MenuSplitTyeEnum } from '@/enums/menuEnum';
66   import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
67   import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
68   import { useRootSetting } from '@/hooks/setting/useRootSetting';
69   import { useAppInject } from '@/hooks/web/useAppInject';
70   import { useDesign } from '@/hooks/web/useDesign';
71   import { useLocale } from '@/locales/useLocale';
72   import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
73   import { propTypes } from '@/utils/propTypes';
74
ea5c66 75   import UpgradePrompt from './components/UpgradePrompt.vue';
b335e7 76   import LayoutMenu from '../menu/index.vue';
a65ad9 77   import LayoutTrigger from '../trigger/index.vue';
aaf2fd 78   import { ErrorAction, FullScreen, LayoutBreadcrumb, Notify, UserDropDown } from './components';
a65ad9 79
aaf2fd 80   const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'), {
IW 81     loading: true,
82   });
83   defineOptions({ name: 'LayoutHeader' });
a65ad9 84
aaf2fd 85   const props = defineProps({
IW 86     fixed: propTypes.bool,
87   });
88   const { prefixCls } = useDesign('layout-header');
89   const {
90     getShowTopMenu,
91     getShowHeaderTrigger,
92     getSplit,
93     getIsMixMode,
94     getMenuWidth,
95     getIsMixSidebar,
96   } = useMenuSetting();
97   const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
a65ad9 98
aaf2fd 99   const {
IW 100     getHeaderTheme,
101     getShowFullScreen,
102     getShowNotice,
103     getShowContent,
104     getShowBread,
105     getShowHeaderLogo,
106     getShowHeader,
107     getShowSearch,
108   } = useHeaderSetting();
a65ad9 109
aaf2fd 110   const { getShowLocalePicker } = useLocale();
576150 111
aaf2fd 112   const { getIsMobile } = useAppInject();
a65ad9 113
aaf2fd 114   const getHeaderClass = computed(() => {
IW 115     const theme = unref(getHeaderTheme);
116     return [
117       prefixCls,
118       {
119         [`${prefixCls}--fixed`]: props.fixed,
120         [`${prefixCls}--mobile`]: unref(getIsMobile),
121         [`${prefixCls}--${theme}`]: theme,
122       },
123     ];
124   });
f6cef1 125
aaf2fd 126   const getShowSetting = computed(() => {
IW 127     if (!unref(getShowSettingButton)) {
128       return false;
129     }
130     const settingButtonPosition = unref(getSettingButtonPosition);
a65ad9 131
aaf2fd 132     if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
IW 133       return unref(getShowHeader);
134     }
135     return settingButtonPosition === SettingButtonPositionEnum.HEADER;
136   });
a65ad9 137
aaf2fd 138   const getLogoWidth = computed(() => {
IW 139     if (!unref(getIsMixMode) || unref(getIsMobile)) {
140       return {};
141     }
142     const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
143     return { width: `${width}px` };
144   });
da0491 145
aaf2fd 146   const getSplitType = computed(() => {
IW 147     return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
148   });
da0491 149
aaf2fd 150   const getMenuMode = computed(() => {
IW 151     return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
a65ad9 152   });
V 153 </script>
154 <style lang="less">
ba2415 155   @import url('./index.less');
a65ad9 156 </style>