<template>
|
<div>
|
<PageWrapper :class="`${prefixCls}`" dense contentFullHeight fixedHeight>
|
<div class="default-theme" style="display: flex; height: 100%; background-color: #fff">
|
<div style="width: 10%; height: 100%">
|
<LeftNav></LeftNav>
|
</div>
|
<div style="width: 84%; height: 100%">
|
<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>
|
</div>
|
</div>
|
</PageWrapper>
|
<FrameLayout v-if="getCanEmbedIFramePage" />
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { PageWrapper } from '@/components/Page';
|
import { Splitpanes, Pane } from 'splitpanes';
|
|
import LeftNav from '@/views/email/components/LeftMenu/index.vue';
|
import { computed, unref } 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 { getTransitionName } from './transition';
|
|
import { useMultipleTabStore } from '@/store/modules/multipleTab';
|
|
defineOptions({ name: 'PageLayout' });
|
|
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');
|
</script>
|
<style lang="less" scoped>
|
@prefix-cls: ~'@{namespace}-email';
|
.@{prefix-cls} {
|
.splitpanes__pane {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #fff;
|
}
|
}
|
</style>
|
