|
|
@@ -3,31 +3,17 @@
|
|
|
<!-- 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"
|
|
|
- />
|
|
|
+ <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 :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
|
|
|
- <LayoutMenu
|
|
|
- :isHorizontal="true"
|
|
|
- :theme="getHeaderTheme"
|
|
|
- :splitType="getSplitType"
|
|
|
- :menuMode="getMenuMode"
|
|
|
- />
|
|
|
+ <LayoutMenu :isHorizontal="true" :theme="getHeaderTheme" :splitType="getSplitType" :menuMode="getMenuMode" />
|
|
|
</div>
|
|
|
<!-- menu-end -->
|
|
|
|
|
|
@@ -41,159 +27,174 @@
|
|
|
|
|
|
<HelpDoc />
|
|
|
|
|
|
- <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
|
|
|
+ <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
|
|
|
+
|
|
|
|
|
|
- <AppLocalePicker
|
|
|
- v-if="getShowLocalePicker"
|
|
|
- :reload="true"
|
|
|
- :showText="false"
|
|
|
- :class="`${prefixCls}-action__item`"
|
|
|
- />
|
|
|
+ <AppLocalePicker v-if="getShowLocalePicker" :reload="true" :showText="false" :class="`${prefixCls}-action__item`" />
|
|
|
|
|
|
<UserDropDown :theme="getHeaderTheme" />
|
|
|
+ <img :src="outSys" alt="" srcset="" class="outSys" @click="outSysWay">
|
|
|
+ <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
|
|
|
|
|
|
- <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
|
|
|
</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';
|
|
|
- import LayoutMenu from '../menu/index.vue';
|
|
|
- import LayoutTrigger from '../trigger/index.vue';
|
|
|
- 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 } 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 HelpDoc from './components/HelpDoc.vue';
|
|
|
-
|
|
|
- export default defineComponent({
|
|
|
- name: 'LayoutHeader',
|
|
|
- components: {
|
|
|
- Header: Layout.Header,
|
|
|
- AppLogo,
|
|
|
- LayoutTrigger,
|
|
|
- LayoutBreadcrumb,
|
|
|
- LayoutMenu,
|
|
|
- UserDropDown,
|
|
|
- AppLocalePicker,
|
|
|
- FullScreen,
|
|
|
- Notify,
|
|
|
- ErrorAction,
|
|
|
- SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
|
|
|
- loading: true,
|
|
|
- }),
|
|
|
- HelpDoc,
|
|
|
- },
|
|
|
- props: {
|
|
|
- fixed: propTypes.bool,
|
|
|
- },
|
|
|
- setup(props) {
|
|
|
- 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();
|
|
|
-
|
|
|
- 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;
|
|
|
- });
|
|
|
-
|
|
|
- return {
|
|
|
+import { defineComponent, unref, computed } from 'vue';
|
|
|
+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 { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
|
|
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
|
|
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
|
|
+import { useUserStore } from '/@/store/modules/user';
|
|
|
+
|
|
|
+import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
|
|
|
+import { SettingButtonPositionEnum } from '/@/enums/appEnum';
|
|
|
+import { AppLocalePicker } from '/@/components/Application';
|
|
|
+
|
|
|
+import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction } 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 HelpDoc from './components/HelpDoc.vue';
|
|
|
+import outSys from "/@/assets/images/outSys.svg";
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'LayoutHeader',
|
|
|
+ components: {
|
|
|
+ Header: Layout.Header,
|
|
|
+ AppLogo,
|
|
|
+ LayoutTrigger,
|
|
|
+ LayoutBreadcrumb,
|
|
|
+ LayoutMenu,
|
|
|
+ UserDropDown,
|
|
|
+ AppLocalePicker,
|
|
|
+ FullScreen,
|
|
|
+ Notify,
|
|
|
+ ErrorAction,
|
|
|
+ SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
|
|
|
+ loading: true,
|
|
|
+ }),
|
|
|
+ HelpDoc,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ fixed: propTypes.bool,
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ 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();
|
|
|
+
|
|
|
+ const { getShowLocalePicker } = useLocale();
|
|
|
+
|
|
|
+ const { getIsMobile } = useAppInject();
|
|
|
+
|
|
|
+ const getHeaderClass = computed(() => {
|
|
|
+ const theme = unref(getHeaderTheme);
|
|
|
+ return [
|
|
|
prefixCls,
|
|
|
- getHeaderClass,
|
|
|
- getShowHeaderLogo,
|
|
|
- getHeaderTheme,
|
|
|
- getShowHeaderTrigger,
|
|
|
- getIsMobile,
|
|
|
- getShowBread,
|
|
|
- getShowContent,
|
|
|
- getSplitType,
|
|
|
- getSplit,
|
|
|
- getMenuMode,
|
|
|
- getShowTopMenu,
|
|
|
- getShowLocalePicker,
|
|
|
- getShowFullScreen,
|
|
|
- getShowNotice,
|
|
|
- getUseErrorHandle,
|
|
|
- getLogoWidth,
|
|
|
- getIsMixSidebar,
|
|
|
- getShowSettingButton,
|
|
|
- getShowSetting,
|
|
|
- getShowSearch,
|
|
|
- };
|
|
|
- },
|
|
|
- });
|
|
|
+ {
|
|
|
+ [`${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 ? 220 : unref(getMenuWidth);//sjl,之前是180
|
|
|
+ return { width: `${width}px` };
|
|
|
+ });
|
|
|
+
|
|
|
+ const getSplitType = computed(() => {
|
|
|
+ return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
|
|
|
+ });
|
|
|
+
|
|
|
+ const getMenuMode = computed(() => {
|
|
|
+ return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
|
|
|
+ });
|
|
|
+
|
|
|
+ const userStore = useUserStore();
|
|
|
+
|
|
|
+ function outSysWay() {
|
|
|
+ userStore.confirmLoginOut();
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ outSysWay,
|
|
|
+ outSys,
|
|
|
+ prefixCls,
|
|
|
+ getHeaderClass,
|
|
|
+ getShowHeaderLogo,
|
|
|
+ getHeaderTheme,
|
|
|
+ getShowHeaderTrigger,
|
|
|
+ getIsMobile,
|
|
|
+ getShowBread,
|
|
|
+ getShowContent,
|
|
|
+ getSplitType,
|
|
|
+ getSplit,
|
|
|
+ getMenuMode,
|
|
|
+ getShowTopMenu,
|
|
|
+ getShowLocalePicker,
|
|
|
+ getShowFullScreen,
|
|
|
+ getShowNotice,
|
|
|
+ getUseErrorHandle,
|
|
|
+ getLogoWidth,
|
|
|
+ getIsMixSidebar,
|
|
|
+ getShowSettingButton,
|
|
|
+ getShowSetting,
|
|
|
+ getShowSearch,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
- @import './index.less';
|
|
|
+@import './index.less';
|
|
|
+
|
|
|
+.outSys {
|
|
|
+ cursor: pointer;
|
|
|
+ border-left: solid 1px #74AFEA;
|
|
|
+ padding-left: 15px;
|
|
|
+ padding-right: 15px;
|
|
|
+ margin-left: 6px;
|
|
|
+}
|
|
|
</style>
|
sujunling
