You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

130 lines
4.3 KiB

<script lang="ts" setup>
import { computed, unref } from 'vue'
2 years ago
import { Layout } from 'ant-design-vue'
import LayoutMenu from '../menu/index.vue'
import LayoutTrigger from '../trigger/index.vue'
import { ErrorAction, FullScreen, LayoutBreadcrumb, Notify, UserDropDown } from './components'
import { propTypes } from '@/utils/propTypes'
2 years ago
import { AppLocalePicker, AppLogo, AppSearch, AppSizePicker } from '@/components/Application'
2 years ago
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
import { useRootSetting } from '@/hooks/setting/useRootSetting'
import { MenuModeEnum, MenuSplitTyeEnum } from '@/enums/menuEnum'
import { SettingButtonPositionEnum } from '@/enums/appEnum'
import { useAppInject } from '@/hooks/web/useAppInject'
import { useDesign } from '@/hooks/web/useDesign'
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
import { useLocale } from '@/locales/useLocale'
defineOptions({ name: 'LayoutHeader' })
2 years ago
const props = defineProps({
fixed: propTypes.bool,
})
const Header = Layout.Header
const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'), {
loading: true,
2 years ago
})
const { prefixCls } = useDesign('layout-header')
const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting()
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting()
const { getHeaderTheme, getShowFullScreen, getShowNotice, getShowContent, getShowBread, getShowHeaderLogo, getShowHeader, getShowSearch }
= useHeaderSetting()
2 years ago
const { getShowLocalePicker } = useLocale()
const { getIsMobile } = useAppInject()
const getHeaderClass = computed(() => {
const theme = unref(getHeaderTheme)
return [
prefixCls,
{
[`${prefixCls}--fixed`]: props.fixed,
[`${prefixCls}--mobile`]: unref(getIsMobile),
[`${prefixCls}--${theme}`]: theme,
},
2 years ago
]
})
const getShowSetting = computed(() => {
if (!unref(getShowSettingButton))
2 years ago
return false
2 years ago
const settingButtonPosition = unref(getSettingButtonPosition)
if (settingButtonPosition === SettingButtonPositionEnum.AUTO)
2 years ago
return unref(getShowHeader)
2 years ago
return settingButtonPosition === SettingButtonPositionEnum.HEADER
})
const getLogoWidth = computed(() => {
if (!unref(getIsMixMode) || unref(getIsMobile))
2 years ago
return {}
2 years ago
const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth)
return { width: `${width}px` }
})
const getSplitType = computed(() => {
return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE
})
const getMenuMode = computed(() => {
return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null
})
</script>
<template>
<Header :class="getHeaderClass">
<!-- left start -->
<div :class="`${prefixCls}-left`">
<!-- logo -->
<AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" />
<LayoutTrigger
v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile"
:theme="getHeaderTheme"
:sider="false"
/>
<LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
</div>
<!-- left end -->
<!-- menu start -->
<div v-if="getShowTopMenu && !getIsMobile" :class="`${prefixCls}-menu`">
<LayoutMenu :is-horizontal="true" :theme="getHeaderTheme" :split-type="getSplitType" :menu-mode="getMenuMode" />
</div>
<!-- menu-end -->
<!-- action -->
<div :class="`${prefixCls}-action`">
<AppSearch v-if="getShowSearch" :class="`${prefixCls}-action__item `" />
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
<FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
<AppSizePicker :show-text="false" :class="`${prefixCls}-action__item`" />
<AppLocalePicker v-if="getShowLocalePicker" :reload="true" :show-text="false" :class="`${prefixCls}-action__item`" />
<UserDropDown :theme="getHeaderTheme" />
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
</div>
</Header>
</template>
2 years ago
<style lang="less">
@import './index.less';
</style>