|
@@ -3,7 +3,13 @@ import './index.less';
|
|
import type { FunctionalComponent } from 'vue';
|
|
import type { FunctionalComponent } from 'vue';
|
|
import type { Component } from '/@/components/types';
|
|
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 { Layout, Tooltip, Badge } from 'ant-design-vue';
|
|
import { AppLogo } from '/@/components/Application';
|
|
import { AppLogo } from '/@/components/Application';
|
|
@@ -24,7 +30,7 @@ import { useModal } from '/@/components/Modal';
|
|
|
|
|
|
import { useFullscreen } from '/@/hooks/web/useFullScreen';
|
|
import { useFullscreen } from '/@/hooks/web/useFullScreen';
|
|
import { useTabs } from '/@/hooks/web/useTabs';
|
|
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 { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
|
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
|
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
|
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
|
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
|
@@ -61,9 +67,9 @@ export default defineComponent({
|
|
fixed: propTypes.bool,
|
|
fixed: propTypes.bool,
|
|
},
|
|
},
|
|
setup(props) {
|
|
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 logoRef = ref<ComponentRef>(null);
|
|
const { refreshPage } = useTabs();
|
|
const { refreshPage } = useTabs();
|
|
const { t } = useI18n();
|
|
const { t } = useI18n();
|
|
@@ -88,22 +94,22 @@ export default defineComponent({
|
|
const [register, { openModal }] = useModal();
|
|
const [register, { openModal }] = useModal();
|
|
const { toggleFullscreen, isFullscreenRef } = useFullscreen();
|
|
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 headerClass = computed(() => {
|
|
const theme = unref(getHeaderTheme);
|
|
const theme = unref(getHeaderTheme);
|
|
@@ -129,7 +135,7 @@ export default defineComponent({
|
|
}
|
|
}
|
|
|
|
|
|
function renderHeaderContent() {
|
|
function renderHeaderContent() {
|
|
- const width = unref(logoWidthRef);
|
|
|
|
|
|
+ // const width = unref(logoWidthRef);
|
|
return (
|
|
return (
|
|
<div class="layout-header__content ">
|
|
<div class="layout-header__content ">
|
|
{unref(getShowHeaderLogo) && (
|
|
{unref(getShowHeaderLogo) && (
|
|
@@ -146,7 +152,8 @@ export default defineComponent({
|
|
)}
|
|
)}
|
|
|
|
|
|
{unref(getShowTopMenu) && (
|
|
{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
|
|
<LayoutMenu
|
|
isHorizontal={true}
|
|
isHorizontal={true}
|
|
class={`justify-${unref(getTopMenuAlign)}`}
|
|
class={`justify-${unref(getTopMenuAlign)}`}
|