| 提交 | 用户 | age | ||
| 00fe0e | 1 | |
| H | 2 | <template> |
| 3 | <div> | |
| 63d608 | 4 | <a-layout class="default-theme" style="display: flex; height: 100%; background-color: #fff"> |
| H | 5 | <a-layout-sider width="250" style="border-inline-end: 1px solid rgb(5 5 5 / 6%)" :style="siderStyle" v-show="collapseStore.isOpen"> |
| 00fe0e | 6 | <LeftNav></LeftNav> |
| 63d608 | 7 | </a-layout-sider> |
| H | 8 | <a-layout> |
| 9 | <a-layout-content :style="contentStyle"> | |
| 00fe0e | 10 | <RouterView> |
| H | 11 | <template #default="{ Component, route }"> |
| 12 | <transition | |
| 13 | :name=" | |
| 14 | getTransitionName({ | |
| 15 | route, | |
| 16 | openCache, | |
| 17 | enableTransition: getEnableTransition, | |
| 18 | cacheTabs: getCaches, | |
| 19 | def: getBasicTransition, | |
| 20 | }) | |
| 21 | " | |
| 22 | mode="out-in" | |
| 23 | appear | |
| 24 | > | |
| 25 | <keep-alive v-if="openCache" :include="getCaches"> | |
| 26 | <component :is="Component" :key="route.fullPath" /> | |
| 27 | </keep-alive> | |
| 28 | <component v-else :is="Component" :key="route.fullPath" /> | |
| 29 | </transition> | |
| 30 | </template> | |
| 31 | </RouterView> | |
| 63d608 | 32 | </a-layout-content> |
| H | 33 | </a-layout> |
| 34 | </a-layout> | |
| 00fe0e | 35 | <div @click="fuToggleContent(!collapseStore.isOpen)" class="toggle-btn" :class="collapseStore.isOpen ? 'iconOpen' : 'onIconOpen'"> |
| H | 36 | <LeftOutlined v-if="collapseStore.isOpen" /> |
| 37 | <RightOutlined v-else /> | |
| 38 | </div> | |
| 39 | <FrameLayout v-if="getCanEmbedIFramePage" /> | |
| 40 | </div> | |
| 28c484 | 41 | </template> |
| S | 42 | |
| 43 | <script lang="ts" setup> | |
| 00fe0e | 44 | import { PageWrapper } from '@/components/Page'; |
| a9a03d | 45 | import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'; |
| H | 46 | import LeftNav from '@/views/email/components/LeftMenu/index.vue'; |
| 00fe0e | 47 | import { computed, unref, ref } from 'vue'; |
| 28c484 | 48 | |
| 00fe0e | 49 | import FrameLayout from '@/layouts/iframe/index.vue'; |
| 28c484 | 50 | |
| 00fe0e | 51 | import { useRootSetting } from '@/hooks/setting/useRootSetting'; |
| 28c484 | 52 | |
| 00fe0e | 53 | import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting'; |
| H | 54 | import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting'; |
| 55 | ||
| 56 | import { useMultipleTabStore } from '@/store/modules/multipleTab'; | |
| 57 | ||
| 58 | defineOptions({ name: 'PageLayout' }); | |
| 59 | import type { FunctionalComponent } from 'vue'; | |
| 60 | import type { RouteLocation } from 'vue-router'; | |
| 61 | ||
| 62 | export interface DefaultContext { | |
| 63 | Component: FunctionalComponent & { type: Recordable }; | |
| 64 | route: RouteLocation; | |
| 28c484 | 65 | } |
| 63d608 | 66 | const siderStyle = { |
| H | 67 | lineHeight: '120px', |
| 68 | backgroundColor:'#fff', | |
| 69 | }; | |
| 70 | const contentStyle = { | |
| 71 | lineHeight: '120px', | |
| 72 | backgroundColor:'#fff', | |
| 00fe0e | 73 | |
| 63d608 | 74 | }; |
| 00fe0e | 75 | function getTransitionName({ |
| H | 76 | route, |
| 77 | openCache, | |
| 78 | cacheTabs, | |
| 79 | enableTransition, | |
| 80 | def, | |
| 81 | }: Pick<DefaultContext, 'route'> & { | |
| 82 | enableTransition: boolean; | |
| 83 | openCache: boolean; | |
| 84 | def: string; | |
| 85 | cacheTabs: string[]; | |
| 86 | }): string | undefined { | |
| 87 | if (!enableTransition) { | |
| 88 | return undefined; | |
| 89 | } | |
| 90 | ||
| 91 | const isInCache = cacheTabs.includes(route.name as string); | |
| 92 | const transitionName = 'fade-slide'; | |
| 93 | let name: string | undefined = transitionName; | |
| 94 | ||
| 95 | if (openCache) { | |
| 96 | name = isInCache && route.meta.loaded ? transitionName : undefined; | |
| 97 | } | |
| 98 | return name || (route.meta.transitionName as string) || def; | |
| 99 | } | |
| 100 | ||
| 101 | const { getShowMultipleTab } = useMultipleTabSetting(); | |
| 102 | const tabStore = useMultipleTabStore(); | |
| 103 | ||
| 104 | const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting(); | |
| 105 | ||
| 106 | const { getBasicTransition, getEnableTransition } = useTransitionSetting(); | |
| 107 | ||
| 108 | const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab)); | |
| 109 | ||
| 110 | const getCaches = computed((): string[] => { | |
| 111 | if (!unref(getOpenKeepAlive)) { | |
| 112 | return []; | |
| 113 | } | |
| 114 | return tabStore.getCachedTabList; | |
| 115 | }); | |
| 116 | import { useDesign } from '@/hooks/web/useDesign'; | |
| 117 | ||
| 118 | const { prefixCls } = useDesign('email'); | |
| 119 | ||
| 120 | ||
| 121 | import { useCollapseStore } from '@/store/modules/useCollapseStore'; | |
| 122 | const collapseStore = useCollapseStore(); | |
| 123 | function fuToggleContent(is) { | |
| 124 | collapseStore.toggle(is); | |
| 125 | } | |
| 126 | </script> | |
| 127 | <style lang="less" scoped> | |
| 128 | @prefix-cls: ~'@{namespace}-email'; | |
| 129 | .@{prefix-cls} { | |
| 130 | .splitpanes__pane { | |
| 131 | display: flex; | |
| 132 | align-items: center; | |
| 133 | justify-content: center; | |
| 134 | background-color: #fff; | |
| 135 | } | |
| 136 | } | |
| 137 | ||
| 138 | ||
| 139 | .toggle-btn { | |
| 140 | display: flex; | |
| 141 | position: absolute; | |
| 142 | z-index: 99; | |
| 143 | top: 45%; | |
| 144 | width: 20px; /* 原始宽度 */ | |
| 145 | height: 54px; | |
| 146 | transform: translateY(-50%); | |
| 147 | border-left: none; | |
| 148 | border-radius: 0 10px 10px 0; | |
| 149 | background: #dfe1e5; | |
| 150 | } | |
| 151 | ||
| 152 | .onOpen { | |
| 63d608 | 153 | width: 86vw; |
| 00fe0e | 154 | } |
| H | 155 | |
| 156 | .isOpen { | |
| 63d608 | 157 | width: 100vw; |
| 00fe0e | 158 | } |
| H | 159 | |
| 160 | .iconOpen { | |
| 63d608 | 161 | left: 250px; |
| 00fe0e | 162 | } |
| H | 163 | |
| 164 | .onIconOpen { | |
| 165 | left: 0%; | |
| 166 | } | |
| 28c484 | 167 | </style> |
