| 提交 | 用户 | age | ||
| 00fe0e | 1 | <template> |
| H | 2 | <div> |
| 3 | <PageWrapper :class="`${prefixCls}`" dense contentFullHeight fixedHeight> | |
| a9a03d | 4 | <div class="default-theme" style="display: flex; height: 100%; background-color: #fff"> |
| H | 5 | <div style="width: 10%; height: 100%"> |
| 00fe0e | 6 | <LeftNav></LeftNav> |
| H | 7 | </div> |
| a9a03d | 8 | <div style="width: 84%; height: 100%"> |
| 00fe0e | 9 | <RouterView> |
| H | 10 | <template #default="{ Component, route }"> |
| 11 | <transition | |
| 12 | :name=" | |
| 13 | getTransitionName({ | |
| 14 | route, | |
| 15 | openCache, | |
| 16 | enableTransition: getEnableTransition, | |
| 17 | cacheTabs: getCaches, | |
| 18 | def: getBasicTransition, | |
| 19 | }) | |
| 20 | " | |
| 21 | mode="out-in" | |
| 22 | appear | |
| 23 | > | |
| 24 | <keep-alive v-if="openCache" :include="getCaches"> | |
| 25 | <component :is="Component" :key="route.fullPath" /> | |
| 26 | </keep-alive> | |
| 27 | <component v-else :is="Component" :key="route.fullPath" /> | |
| 28 | </transition> | |
| 29 | </template> | |
| 30 | </RouterView> | |
| 31 | </div> | |
| 32 | </div> | |
| 33 | </PageWrapper> | |
| 34 | <FrameLayout v-if="getCanEmbedIFramePage" /> | |
| 35 | </div> | |
| 36 | </template> | |
| 37 | ||
| 38 | <script lang="ts" setup> | |
| a9a03d | 39 | import { PageWrapper } from '@/components/Page'; |
| H | 40 | import { Splitpanes, Pane } from 'splitpanes'; |
| 00fe0e | 41 | |
| a9a03d | 42 | import LeftNav from '@/views/email/components/LeftMenu/index.vue'; |
| 00fe0e | 43 | import { computed, unref } from 'vue'; |
| H | 44 | |
| 45 | import FrameLayout from '@/layouts/iframe/index.vue'; | |
| 46 | ||
| 47 | import { useRootSetting } from '@/hooks/setting/useRootSetting'; | |
| 48 | ||
| 49 | import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting'; | |
| 50 | import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting'; | |
| 51 | import { getTransitionName } from './transition'; | |
| 52 | ||
| 53 | import { useMultipleTabStore } from '@/store/modules/multipleTab'; | |
| 54 | ||
| 55 | defineOptions({ name: 'PageLayout' }); | |
| 56 | ||
| 57 | const { getShowMultipleTab } = useMultipleTabSetting(); | |
| 58 | const tabStore = useMultipleTabStore(); | |
| 59 | ||
| 60 | const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting(); | |
| 61 | ||
| 62 | const { getBasicTransition, getEnableTransition } = useTransitionSetting(); | |
| 63 | ||
| 64 | const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab)); | |
| 65 | ||
| 66 | const getCaches = computed((): string[] => { | |
| 67 | if (!unref(getOpenKeepAlive)) { | |
| 68 | return []; | |
| 69 | } | |
| 70 | return tabStore.getCachedTabList; | |
| 71 | }); | |
| 72 | import { useDesign } from '@/hooks/web/useDesign'; | |
| 73 | ||
| 74 | const { prefixCls } = useDesign('email'); | |
| 75 | </script> | |
| 76 | <style lang="less" scoped> | |
| 77 | @prefix-cls: ~'@{namespace}-email'; | |
| 78 | .@{prefix-cls} { | |
| 79 | .splitpanes__pane { | |
| 80 | display: flex; | |
| 81 | align-items: center; | |
| 82 | justify-content: center; | |
| 83 | background-color: #fff; | |
| 84 | } | |
| 85 | } | |
| 86 | </style> | |
