From fa3ac93010bea3805438ee3ab0a182bfbf7423da Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期一, 27 五月 2024 16:19:31 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/layouts/default/header/index.vue | 250 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 250 insertions(+), 0 deletions(-)
diff --git a/src/layouts/default/header/index.vue b/src/layouts/default/header/index.vue
new file mode 100644
index 0000000..4fb6c62
--- /dev/null
+++ b/src/layouts/default/header/index.vue
@@ -0,0 +1,250 @@
+<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" />
+ <!-- 娆㈣繋璇� -->
+ <span v-if="getShowContent && getShowBreadTitle && !getIsMobile" :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`,'headerIntroductionClass']"> 娆㈣繋杩涘叆 {{ '鏅鸿兘涓嵂骞茬嚗鏈烘暟瀛楀寲杞﹂棿' }} </span>
+ </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`">
+ <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
+
+ <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`" />
+
+ <LockScreen v-if="getUseLockPage" />
+
+ <AppLocalePicker v-if="getShowLocalePicker" :reload="true" :showText="false" :class="`${prefixCls}-action__item`" />
+
+ <UserDropDown :theme="getHeaderTheme" />
+
+ <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
+ </div>
+ </Header>
+ <LoginSelect ref="loginSelectRef" @success="loginSelectOk"></LoginSelect>
+</template>
+<script lang="ts">
+ import { defineComponent, unref, computed, ref, onMounted, toRaw } from 'vue';
+ import { useGlobSetting } from '/@/hooks/setting';
+ import { propTypes } from '/@/utils/propTypes';
+
+ import { Layout } from 'ant-design-vue';
+ import { AppLogo } from '/@/components/Application';
+ import LayoutMenu from '../menu/index.vue';
+ 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 { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+ import { SettingButtonPositionEnum } from '/@/enums/appEnum';
+ import { AppLocalePicker } from '/@/components/Application';
+
+ import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction, LockScreen } from './components';
+ import { useAppInject } from '/@/hooks/web/useAppInject';
+ import { useDesign } from '/@/hooks/web/useDesign';
+
+ import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+ import { useLocale } from '/@/locales/useLocale';
+
+ import LoginSelect from '/@/views/sys/login/LoginSelect.vue';
+ import { useUserStore } from '/@/store/modules/user';
+
+ export default defineComponent({
+ name: 'LayoutHeader',
+ components: {
+ Header: Layout.Header,
+ AppLogo,
+ LayoutTrigger,
+ LayoutBreadcrumb,
+ LayoutMenu,
+ UserDropDown,
+ AppLocalePicker,
+ FullScreen,
+ Notify,
+ AppSearch,
+ ErrorAction,
+ LockScreen,
+ LoginSelect,
+ SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
+ loading: true,
+ }),
+ },
+ props: {
+ fixed: propTypes.bool,
+ },
+ setup(props) {
+ const { prefixCls } = useDesign('layout-header');
+ const userStore = useUserStore();
+ const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
+ const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
+ const { title } = useGlobSetting();
+
+ const {
+ getHeaderTheme,
+ getShowFullScreen,
+ getShowNotice,
+ getShowContent,
+ getShowBread,
+ getShowHeaderLogo,
+ getShowHeader,
+ getShowSearch,
+ getUseLockPage,
+ getShowBreadTitle,
+ } = useHeaderSetting();
+
+ 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,
+ },
+ ];
+ });
+
+ const getShowSetting = computed(() => {
+ if (!unref(getShowSettingButton)) {
+ return false;
+ }
+ const settingButtonPosition = unref(getSettingButtonPosition);
+
+ if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
+ return unref(getShowHeader);
+ }
+ return settingButtonPosition === SettingButtonPositionEnum.HEADER;
+ });
+
+ 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 getMenuMode = computed(() => {
+ return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
+ });
+
+ /**
+ * 棣栭〉澶氱鎴烽儴闂ㄥ脊绐楅�昏緫
+ */
+ const loginSelectRef = ref();
+
+ function showLoginSelect() {
+ //update-begin---author:liusq Date:20220101 for锛氬垽鏂櫥褰曡繘鏉ユ槸鍚﹂渶瑕佸脊绐楅�夋嫨绉熸埛----
+ //鍒ゆ柇鏄惁鏄櫥闄嗚繘鏉�
+ const loginInfo = toRaw(userStore.getLoginInfo) || {};
+ if (!!loginInfo.isLogin) {
+ loginSelectRef.value.show(loginInfo);
+ }
+ //update-end---author:liusq Date:20220101 for锛氬垽鏂櫥褰曡繘鏉ユ槸鍚﹂渶瑕佸脊绐楅�夋嫨绉熸埛----
+ }
+
+ function loginSelectOk() {
+ console.log('鎴愬姛銆傘�傘�傘�傘��');
+ }
+
+ onMounted(() => {
+ showLoginSelect();
+ });
+
+ return {
+ prefixCls,
+ getHeaderClass,
+ getShowHeaderLogo,
+ getHeaderTheme,
+ getShowHeaderTrigger,
+ getIsMobile,
+ getShowBreadTitle,
+ getShowBread,
+ getShowContent,
+ getSplitType,
+ getSplit,
+ getMenuMode,
+ getShowTopMenu,
+ getShowLocalePicker,
+ getShowFullScreen,
+ getShowNotice,
+ getUseErrorHandle,
+ getLogoWidth,
+ getIsMixSidebar,
+ getShowSettingButton,
+ getShowSetting,
+ getShowSearch,
+ getUseLockPage,
+ loginSelectOk,
+ loginSelectRef,
+ title
+ };
+ },
+ });
+</script>
+<style lang="less">
+ @import './index.less';
+ //update-begin---author:scott ---date:2022-09-30 for锛氶粯璁ら殣钘忛《閮ㄨ彍鍗曢潰鍖呭睉-----------
+ //椤堕儴娆㈣繋璇睍绀烘牱寮�
+ @prefix-cls: ~'@{namespace}-layout-header';
+
+ .@{prefix-cls} {
+ display: flex;
+ padding: 0 8px;
+ align-items: center;
+
+ .headerIntroductionClass {
+ margin-right: 4px;
+ margin-bottom: 2px;
+ border-bottom: 0px;
+ border-left: 0px;
+ }
+
+ &--light {
+ .headerIntroductionClass {
+ color: @breadcrumb-item-normal-color;
+ }
+ }
+
+ &--dark {
+ .headerIntroductionClass {
+ color: rgba(255, 255, 255, 0.6);
+ }
+ .anticon {
+ color: rgba(255, 255, 255, 0.8);
+ }
+ }
+ //update-end---author:scott ---date::2022-09-30 for锛氶粯璁ら殣钘忛《閮ㄨ彍鍗曢潰鍖呭睉--------------
+ }
+</style>
--
Gitblit v1.9.3