|
<template>
|
<div>
|
<a-layout class="default-theme" style="display: flex; height: 100%; background-color: #fff">
|
<a-layout-sider width="250" style="border-inline-end: 1px solid rgb(5 5 5 / 6%)" :style="siderStyle" v-show="collapseStore.isOpen">
|
<LeftNav></LeftNav>
|
</a-layout-sider>
|
<a-layout>
|
<a-layout-content :style="contentStyle">
|
<RouterView>
|
<template #default="{ Component, route }">
|
<transition
|
:name="
|
getTransitionName({
|
route,
|
openCache,
|
enableTransition: getEnableTransition,
|
cacheTabs: getCaches,
|
def: getBasicTransition,
|
})
|
"
|
mode="out-in"
|
appear
|
>
|
<keep-alive v-if="openCache" :include="getCaches">
|
<component :is="Component" :key="route.fullPath" />
|
</keep-alive>
|
<component v-else :is="Component" :key="route.fullPath" />
|
</transition>
|
</template>
|
</RouterView>
|
</a-layout-content>
|
</a-layout>
|
</a-layout>
|
<div @click="fuToggleContent(!collapseStore.isOpen)" class="toggle-btn" :class="collapseStore.isOpen ? 'iconOpen' : 'onIconOpen'">
|
<LeftOutlined v-if="collapseStore.isOpen" />
|
<RightOutlined v-else />
|
</div>
|
<FrameLayout v-if="getCanEmbedIFramePage" />
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { PageWrapper } from '@/components/Page';
|
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
|
import LeftNav from '@/views/email/components/LeftMenu/index.vue';
|
import { computed, unref, ref } from 'vue';
|
|
import FrameLayout from '@/layouts/iframe/index.vue';
|
|
import { useRootSetting } from '@/hooks/setting/useRootSetting';
|
|
import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
|
import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
|
|
import { useMultipleTabStore } from '@/store/modules/multipleTab';
|
|
defineOptions({ name: 'PageLayout' });
|
import type { FunctionalComponent } from 'vue';
|
import type { RouteLocation } from 'vue-router';
|
|
export interface DefaultContext {
|
Component: FunctionalComponent & { type: Recordable };
|
route: RouteLocation;
|
}
|
const siderStyle = {
|
lineHeight: '120px',
|
backgroundColor:'#fff',
|
};
|
const contentStyle = {
|
lineHeight: '120px',
|
backgroundColor:'#fff',
|
|
};
|
function getTransitionName({
|
route,
|
openCache,
|
cacheTabs,
|
enableTransition,
|
def,
|
}: Pick<DefaultContext, 'route'> & {
|
enableTransition: boolean;
|
openCache: boolean;
|
def: string;
|
cacheTabs: string[];
|
}): string | undefined {
|
if (!enableTransition) {
|
return undefined;
|
}
|
|
const isInCache = cacheTabs.includes(route.name as string);
|
const transitionName = 'fade-slide';
|
let name: string | undefined = transitionName;
|
|
if (openCache) {
|
name = isInCache && route.meta.loaded ? transitionName : undefined;
|
}
|
return name || (route.meta.transitionName as string) || def;
|
}
|
|
const { getShowMultipleTab } = useMultipleTabSetting();
|
const tabStore = useMultipleTabStore();
|
|
const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
|
|
const { getBasicTransition, getEnableTransition } = useTransitionSetting();
|
|
const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
|
|
const getCaches = computed((): string[] => {
|
if (!unref(getOpenKeepAlive)) {
|
return [];
|
}
|
return tabStore.getCachedTabList;
|
});
|
import { useDesign } from '@/hooks/web/useDesign';
|
|
const { prefixCls } = useDesign('email');
|
|
|
import { useCollapseStore } from '@/store/modules/useCollapseStore';
|
const collapseStore = useCollapseStore();
|
function fuToggleContent(is) {
|
collapseStore.toggle(is);
|
}
|
</script>
|
<style lang="less" scoped>
|
@prefix-cls: ~'@{namespace}-email';
|
.@{prefix-cls} {
|
.splitpanes__pane {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #fff;
|
}
|
}
|
|
|
.toggle-btn {
|
display: flex;
|
position: absolute;
|
z-index: 99;
|
top: 45%;
|
width: 20px; /* 原始宽度 */
|
height: 54px;
|
transform: translateY(-50%);
|
border-left: none;
|
border-radius: 0 10px 10px 0;
|
background: #dfe1e5;
|
}
|
|
.onOpen {
|
width: 86vw;
|
}
|
|
.isOpen {
|
width: 100vw;
|
}
|
|
.iconOpen {
|
left: 250px;
|
}
|
|
.onIconOpen {
|
left: 0%;
|
}
|
</style>
|
