|
|
|
@ -3,7 +3,13 @@ import './index.less'; |
|
|
|
import type { FunctionalComponent } from 'vue'; |
|
|
|
import type { Component } from '/@/components/types'; |
|
|
|
|
|
|
|
import { defineComponent, unref, computed, ref, nextTick } from 'vue'; |
|
|
|
import { |
|
|
|
defineComponent, |
|
|
|
unref, |
|
|
|
computed, |
|
|
|
ref, |
|
|
|
// nextTick
|
|
|
|
} from 'vue'; |
|
|
|
|
|
|
|
import { Layout, Tooltip, Badge } from 'ant-design-vue'; |
|
|
|
import { AppLogo } from '/@/components/Application'; |
|
|
|
@ -24,7 +30,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'; |
|
|
|
@ -61,9 +67,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 { refreshPage } = useTabs(); |
|
|
|
const { t } = useI18n(); |
|
|
|
@ -88,22 +94,22 @@ 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(
|
|
|
|
// () => {
|
|
|
|
// 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 }
|
|
|
|
// );
|
|
|
|
|
|
|
|
const headerClass = computed(() => { |
|
|
|
const theme = unref(getHeaderTheme); |
|
|
|
@ -129,7 +135,7 @@ export default defineComponent({ |
|
|
|
} |
|
|
|
|
|
|
|
function renderHeaderContent() { |
|
|
|
const width = unref(logoWidthRef); |
|
|
|
// const width = unref(logoWidthRef);
|
|
|
|
return ( |
|
|
|
<div class="layout-header__content "> |
|
|
|
{unref(getShowHeaderLogo) && ( |
|
|
|
@ -146,7 +152,8 @@ export default defineComponent({ |
|
|
|
)} |
|
|
|
|
|
|
|
{unref(getShowTopMenu) && ( |
|
|
|
<div class={[`layout-header__menu `]} style={{ width: `calc(100% - ${width}px)` }}> |
|
|
|
// <div class={[`layout-header__menu `]} style={{ width: `calc(100% - ${width}px)` }}>
|
|
|
|
<div class={[`layout-header__menu `]}> |
|
|
|
<LayoutMenu |
|
|
|
isHorizontal={true} |
|
|
|
class={`justify-${unref(getTopMenuAlign)}`} |
|
|
|
|