From 7f5b781c9b476eb1c74dd637cbf9ee54bc71acfd Mon Sep 17 00:00:00 2001 From: Ben Lin <maobin001@msn.com> Date: 星期六, 08 三月 2025 11:16:59 +0800 Subject: [PATCH] 页面跳转更新 --- src/layouts/default/index.vue | 87 +++++++++++++++++++++---------------------- 1 files changed, 43 insertions(+), 44 deletions(-) diff --git a/src/layouts/default/index.vue b/src/layouts/default/index.vue index de7fcae..e0d64f0 100644 --- a/src/layouts/default/index.vue +++ b/src/layouts/default/index.vue @@ -2,7 +2,7 @@ <Layout :class="prefixCls" v-bind="lockEvents"> <LayoutFeatures /> <LayoutHeader fixed v-if="getShowFullHeaderRef" /> - <Layout :class="[layoutClass]"> + <Layout :class="[layoutClass, `${prefixCls}-out`]"> <LayoutSideBar v-if="getShowSidebar || getIsMobile" /> <Layout :class="`${prefixCls}-main`"> <LayoutMultipleHeader /> @@ -13,61 +13,50 @@ </Layout> </template> -<script lang="ts"> - import { defineComponent, computed, unref } from 'vue'; +<script lang="ts" setup> + import { computed, unref } from 'vue'; import { Layout } from 'ant-design-vue'; - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; + import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'; import LayoutHeader from './header/index.vue'; import LayoutContent from './content/index.vue'; import LayoutSideBar from './sider/index.vue'; import LayoutMultipleHeader from './header/MultipleHeader.vue'; - import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; - import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; - import { useDesign } from '/@/hooks/web/useDesign'; - import { useLockPage } from '/@/hooks/web/useLockPage'; + import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'; + import { useMenuSetting } from '@/hooks/setting/useMenuSetting'; + import { useDesign } from '@/hooks/web/useDesign'; + import { useLockPage } from '@/hooks/web/useLockPage'; - import { useAppInject } from '/@/hooks/web/useAppInject'; + import { useAppInject } from '@/hooks/web/useAppInject'; - export default defineComponent({ - name: 'DefaultLayout', - components: { - LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')), - LayoutFooter: createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')), - LayoutHeader, - LayoutContent, - LayoutSideBar, - LayoutMultipleHeader, - Layout, - }, - setup() { - const { prefixCls } = useDesign('default-layout'); - const { getIsMobile } = useAppInject(); - const { getShowFullHeaderRef } = useHeaderSetting(); - const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting(); + import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting'; - // Create a lock screen monitor - const lockEvents = useLockPage(); + const LayoutFeatures = createAsyncComponent(() => import('@/layouts/default/feature/index.vue')); + const LayoutFooter = createAsyncComponent(() => import('@/layouts/default/footer/index.vue')); - const layoutClass = computed(() => { - let cls: string[] = ['ant-layout']; - if (unref(getIsMixSidebar) || unref(getShowMenu)) { - cls.push('ant-layout-has-sider'); - } - return cls; - }); + defineOptions({ name: 'DefaultLayout' }); - return { - getShowFullHeaderRef, - getShowSidebar, - prefixCls, - getIsMobile, - getIsMixSidebar, - layoutClass, - lockEvents, - }; - }, + const { prefixCls } = useDesign('default-layout'); + const { getIsMobile } = useAppInject(); + const { getShowFullHeaderRef } = useHeaderSetting(); + const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting(); + const { getAutoCollapse } = useMultipleTabSetting(); + + // Create a lock screen monitor + const lockEvents = useLockPage(); + + const layoutClass = computed(() => { + let cls: string[] = ['ant-layout']; + if (unref(getIsMixSidebar) || unref(getShowMenu)) { + cls.push('ant-layout-has-sider'); + } + + if (!unref(getShowMenu) && unref(getAutoCollapse)) { + cls.push('ant-layout-auto-collapse-tabs'); + } + + return cls; }); </script> <style lang="less"> @@ -89,4 +78,14 @@ margin-left: 1px; } } + + .@{prefix-cls}-out { + &.ant-layout-has-sider { + .@{prefix-cls} { + &-main { + margin-left: 1px; + } + } + } + } </style> -- Gitblit v1.9.3