|
|
|
@ -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
6 years ago