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