|
|
@@ -8,6 +8,8 @@ import {
|
|
|
unref,
|
|
|
computed,
|
|
|
ref,
|
|
|
+ nextTick,
|
|
|
+ watchEffect,
|
|
|
// nextTick
|
|
|
} from 'vue';
|
|
|
|
|
|
@@ -30,7 +32,7 @@ import { useModal } from '/@/components/Modal';
|
|
|
|
|
|
import { useFullscreen } from '/@/hooks/web/useFullScreen';
|
|
|
import { useTabs } from '/@/hooks/web/useTabs';
|
|
|
-// import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
|
|
|
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
|
|
|
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
|
|
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
|
|
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
|
|
@@ -68,9 +70,9 @@ export default defineComponent({
|
|
|
fixed: propTypes.bool,
|
|
|
},
|
|
|
setup(props) {
|
|
|
- // let logoEl: Element | null | undefined;
|
|
|
+ let logoEl: Element | null | undefined;
|
|
|
|
|
|
- // const logoWidthRef = ref(200);
|
|
|
+ const logoWidthRef = ref(200);
|
|
|
const logoRef = ref<ComponentRef>(null);
|
|
|
|
|
|
const injectValue = useLayoutContext();
|
|
|
@@ -78,7 +80,13 @@ export default defineComponent({
|
|
|
const { refreshPage } = useTabs();
|
|
|
const { t } = useI18n();
|
|
|
|
|
|
- const { getShowTopMenu, getShowHeaderTrigger, getSplit, getTopMenuAlign } = useMenuSetting();
|
|
|
+ const {
|
|
|
+ getShowTopMenu,
|
|
|
+ getShowHeaderTrigger,
|
|
|
+ getSplit,
|
|
|
+ getTopMenuAlign,
|
|
|
+ getIsHorizontal,
|
|
|
+ } = useMenuSetting();
|
|
|
|
|
|
const { getShowLocale } = useLocaleSetting();
|
|
|
const { getUseErrorHandle, getShowBreadCrumbIcon } = useRootSetting();
|
|
|
@@ -98,22 +106,13 @@ export default defineComponent({
|
|
|
const [register, { openModal }] = useModal();
|
|
|
const { toggleFullscreen, isFullscreenRef } = useFullscreen();
|
|
|
|
|
|
- // useWindowSizeFn(
|
|
|
- // () => {
|
|
|
- // nextTick(() => {
|
|
|
- // if (!unref(getShowTopMenu)) return;
|
|
|
- // let width = 0;
|
|
|
- // if (!logoEl) {
|
|
|
- // logoEl = unref(logoRef)?.$el;
|
|
|
- // } else {
|
|
|
- // width += logoEl.clientWidth;
|
|
|
- // }
|
|
|
- // logoWidthRef.value = width + 80;
|
|
|
- // });
|
|
|
- // },
|
|
|
- // 200,
|
|
|
- // { immediate: true }
|
|
|
- // );
|
|
|
+ useWindowSizeFn(
|
|
|
+ () => {
|
|
|
+ calcTopMenuWidth();
|
|
|
+ },
|
|
|
+ 100,
|
|
|
+ { immediate: false }
|
|
|
+ );
|
|
|
|
|
|
const headerClass = computed(() => {
|
|
|
const theme = unref(getHeaderTheme);
|
|
|
@@ -132,6 +131,25 @@ export default defineComponent({
|
|
|
return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
|
|
|
});
|
|
|
|
|
|
+ watchEffect(() => {
|
|
|
+ if (unref(getIsHorizontal)) {
|
|
|
+ calcTopMenuWidth();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ function calcTopMenuWidth() {
|
|
|
+ nextTick(() => {
|
|
|
+ if (!unref(getShowTopMenu)) return;
|
|
|
+ let width = 0;
|
|
|
+ if (!logoEl) {
|
|
|
+ logoEl = unref(logoRef)?.$el;
|
|
|
+ }
|
|
|
+ if (!logoEl) return;
|
|
|
+ width += logoEl.clientWidth;
|
|
|
+ logoWidthRef.value = width + 80;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
function handleToErrorList() {
|
|
|
push(PageEnum.ERROR_LOG_PAGE).then(() => {
|
|
|
errorStore.commitErrorListCountState(0);
|
|
|
@@ -143,7 +161,7 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
function renderHeaderContent() {
|
|
|
- // const width = unref(logoWidthRef);
|
|
|
+ const width = unref(logoWidthRef);
|
|
|
return (
|
|
|
<div class="layout-header__content ">
|
|
|
{unref(getShowHeaderLogo) && (
|
|
|
@@ -162,8 +180,8 @@ export default defineComponent({
|
|
|
)}
|
|
|
|
|
|
{unref(getShowTopMenu) && unref(isPc) && (
|
|
|
- // <div class={[`layout-header__menu `]} style={{ width: `calc(100% - ${width}px)` }}>
|
|
|
- <div class={[`layout-header__menu `]}>
|
|
|
+ <div class={[`layout-header__menu `]} style={{ width: `calc(100% - ${width}px)` }}>
|
|
|
+ {/* <div class={[`layout-header__menu `]}> */}
|
|
|
<LayoutMenu
|
|
|
isHorizontal={true}
|
|
|
class={`justify-${unref(getTopMenuAlign)}`}
|
vben