Blame view

src/layouts/default/header/index.vue 5.73 KB
vben authored
1
2
3
4
5
<template>
  <Header :class="getHeaderClass">
    <!-- left start -->
    <div :class="`${prefixCls}-left`">
      <!-- logo -->
6
7
8
      <AppLogo
        v-if="getShowHeaderLogo || getIsMobile"
        :class="`${prefixCls}-logo`"
vben authored
9
        :theme="getHeaderTheme"
10
        :style="getLogoWidth"
vben authored
11
      />
12
      <LayoutTrigger
13
14
15
        v-if="
          (getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile
        "
vben authored
16
        :theme="getHeaderTheme"
17
        :sider="false"
vben authored
18
      />
19
      <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
vben authored
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
    </div>
    <!-- left end -->

    <!-- menu start -->
    <div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
      <LayoutMenu
        :isHorizontal="true"
        :theme="getHeaderTheme"
        :splitType="getSplitType"
        :menuMode="getMenuMode"
      />
    </div>
    <!-- menu-end -->

    <!-- action  -->
    <div :class="`${prefixCls}-action`">
36
      <AppSearch :class="`${prefixCls}-action__item `" />
vben authored
37
38
      <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
vben authored
39
40
      <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
vben authored
41
42
      <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
vben authored
43
44
45
46
47
48
49

      <AppLocalePicker
        v-if="getShowLocale"
        :reload="true"
        :showText="false"
        :class="`${prefixCls}-action__item`"
      />
vben authored
50
51
52

      <UserDropDown :theme="getHeaderTheme" />
53
      <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
vben authored
54
55
56
57
58
59
60
61
62
63
    </div>
  </Header>
</template>
<script lang="ts">
  import { defineComponent, unref, computed } from 'vue';

  import { propTypes } from '/@/utils/propTypes';

  import { Layout } from 'ant-design-vue';
  import { AppLogo } from '/@/components/Application';
64
  import LayoutMenu from '../menu/index.vue';
vben authored
65
66
67
68
69
70
71
72
73
74
  import LayoutTrigger from '../trigger/index.vue';

  import { AppSearch } from '/@/components/Application';

  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting';

  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
75
  import { SettingButtonPositionEnum } from '/@/enums/appEnum';
vben authored
76
77
  import { AppLocalePicker } from '/@/components/Application';
78
  import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components';
vben authored
79
80
81
  import { useAppInject } from '/@/hooks/web/useAppInject';
  import { useDesign } from '/@/hooks/web/useDesign';
vben authored
82
83
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
vben authored
84
85
86
87
88
89
90
91
92
93
94
95
96
97
  export default defineComponent({
    name: 'LayoutHeader',
    components: {
      Header: Layout.Header,
      AppLogo,
      LayoutTrigger,
      LayoutBreadcrumb,
      LayoutMenu,
      UserDropDown,
      AppLocalePicker,
      FullScreen,
      Notify,
      AppSearch,
      ErrorAction,
vben authored
98
99
100
      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
        loading: true,
      }),
vben authored
101
102
103
104
105
106
    },
    props: {
      fixed: propTypes.bool,
    },
    setup(props) {
      const { prefixCls } = useDesign('layout-header');
107
108
109
110
111
112
      const {
        getShowTopMenu,
        getShowHeaderTrigger,
        getSplit,
        getIsMixMode,
        getMenuWidth,
113
        getIsMixSidebar,
114
      } = useMenuSetting();
vben authored
115
      const { getShowLocale } = useLocaleSetting();
116
117
118
119
120
      const {
        getUseErrorHandle,
        getShowSettingButton,
        getSettingButtonPosition,
      } = useRootSetting();
vben authored
121
122
123
124
125
126
127
128
129

      const {
        getHeaderTheme,
        getUseLockPage,
        getShowFullScreen,
        getShowNotice,
        getShowContent,
        getShowBread,
        getShowHeaderLogo,
130
        getShowHeader,
vben authored
131
132
133
134
135
136
137
138
      } = useHeaderSetting();

      const { getIsMobile } = useAppInject();

      const getHeaderClass = computed(() => {
        const theme = unref(getHeaderTheme);
        return [
          prefixCls,
139
140
141
142
143
          {
            [`${prefixCls}--fixed`]: props.fixed,
            [`${prefixCls}--mobile`]: unref(getIsMobile),
            [`${prefixCls}--${theme}`]: theme,
          },
vben authored
144
145
146
        ];
      });
147
148
149
150
151
152
153
154
155
156
157
158
      const getShowSetting = computed(() => {
        if (!unref(getShowSettingButton)) {
          return false;
        }
        const settingButtonPosition = unref(getSettingButtonPosition);

        if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
          return unref(getShowHeader);
        }
        return settingButtonPosition === SettingButtonPositionEnum.HEADER;
      });
159
      const getLogoWidth = computed(() => {
160
        if (!unref(getIsMixMode) || unref(getIsMobile)) {
161
162
163
164
165
166
          return {};
        }
        const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
        return { width: `${width}px` };
      });
vben authored
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
      const getSplitType = computed(() => {
        return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
      });

      const getMenuMode = computed(() => {
        return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
      });

      return {
        prefixCls,
        getHeaderClass,
        getShowHeaderLogo,
        getHeaderTheme,
        getShowHeaderTrigger,
        getIsMobile,
        getShowBread,
        getShowContent,
        getSplitType,
185
        getSplit,
vben authored
186
187
188
189
190
191
192
        getMenuMode,
        getShowTopMenu,
        getShowLocale,
        getShowFullScreen,
        getShowNotice,
        getUseLockPage,
        getUseErrorHandle,
193
        getLogoWidth,
194
        getIsMixSidebar,
vben authored
195
        getShowSettingButton,
196
        getShowSetting,
vben authored
197
198
199
200
201
202
203
      };
    },
  });
</script>
<style lang="less">
  @import './index.less';
</style>