vben
6 years ago
26 changed files with 167 additions and 218 deletions
@ -0,0 +1,45 @@ |
|||
<!-- |
|||
* @Description: The reason is that tsx will report warnings under multi-level nesting. |
|||
--> |
|||
<template> |
|||
<div> |
|||
<router-view> |
|||
<template v-slot="{ Component, route }"> |
|||
<keep-alive v-if="openCache" :include="getCaches"> |
|||
<component :is="Component" :key="route.fullPath" /> |
|||
</keep-alive> |
|||
<component v-else :is="Component" :key="route.fullPath" /> |
|||
</template> |
|||
</router-view> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { computed, defineComponent, unref } from 'vue'; |
|||
|
|||
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; |
|||
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; |
|||
|
|||
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting'; |
|||
import { useCache } from './useCache'; |
|||
|
|||
export default defineComponent({ |
|||
setup() { |
|||
const { getCaches } = useCache(false); |
|||
|
|||
const { getShowMultipleTab } = useMultipleTabSetting(); |
|||
|
|||
const { getOpenKeepAlive } = useRootSetting(); |
|||
|
|||
const { getBasicTransition, getEnableTransition } = useTransitionSetting(); |
|||
|
|||
const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab)); |
|||
|
|||
return { |
|||
getCaches, |
|||
getBasicTransition, |
|||
openCache, |
|||
getEnableTransition, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,72 @@ |
|||
import type { FunctionalComponent } from 'vue'; |
|||
|
|||
import { computed, defineComponent, unref, Transition, KeepAlive } from 'vue'; |
|||
import { RouterView, RouteLocation } from 'vue-router'; |
|||
|
|||
import FrameLayout from '/@/layouts/iframe/index.vue'; |
|||
|
|||
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; |
|||
|
|||
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting'; |
|||
import { useCache } from './useCache'; |
|||
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; |
|||
|
|||
interface DefaultContext { |
|||
Component: FunctionalComponent; |
|||
route: RouteLocation; |
|||
} |
|||
|
|||
export default defineComponent({ |
|||
name: 'PageLayout', |
|||
setup() { |
|||
const { getCaches } = useCache(true); |
|||
const { getShowMultipleTab } = useMultipleTabSetting(); |
|||
|
|||
const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting(); |
|||
|
|||
const { getBasicTransition, getEnableTransition } = useTransitionSetting(); |
|||
|
|||
const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab)); |
|||
|
|||
return () => { |
|||
return ( |
|||
<> |
|||
<RouterView> |
|||
{{ |
|||
default: ({ Component, route }: DefaultContext) => { |
|||
// No longer show animations that are already in the tab
|
|||
const cacheTabs = unref(getCaches); |
|||
const isInCache = cacheTabs.includes(route.name as string); |
|||
const name = |
|||
isInCache && route.meta.loaded && unref(getEnableTransition) |
|||
? 'fade-slide' |
|||
: null; |
|||
|
|||
const renderComp = () => <Component key={route.fullPath} />; |
|||
|
|||
const PageContent = unref(openCache) ? ( |
|||
<KeepAlive>{renderComp()}</KeepAlive> |
|||
) : ( |
|||
renderComp() |
|||
); |
|||
|
|||
return unref(getEnableTransition) ? ( |
|||
<Transition |
|||
name={name || route.meta.transitionName || unref(getBasicTransition)} |
|||
mode="out-in" |
|||
appear={true} |
|||
> |
|||
{() => PageContent} |
|||
</Transition> |
|||
) : ( |
|||
PageContent |
|||
); |
|||
}, |
|||
}} |
|||
</RouterView> |
|||
{unref(getCanEmbedIFramePage) && <FrameLayout />} |
|||
</> |
|||
); |
|||
}; |
|||
}, |
|||
}); |
|||
@ -1,21 +0,0 @@ |
|||
<template> |
|||
<ParentLayout :isPage="true" /> |
|||
<FrameLayout v-if="getCanEmbedIFramePage" /> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
|
|||
import FrameLayout from '/@/layouts/iframe/index.vue'; |
|||
|
|||
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; |
|||
|
|||
import ParentLayout from '/@/layouts/parent/index.vue'; |
|||
export default defineComponent({ |
|||
components: { ParentLayout, FrameLayout }, |
|||
setup() { |
|||
const { getCanEmbedIFramePage } = useRootSetting(); |
|||
|
|||
return { getCanEmbedIFramePage }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,73 +0,0 @@ |
|||
<!-- |
|||
* @Description: The reason is that tsx will report warnings under multi-level nesting. |
|||
--> |
|||
<template> |
|||
<div> |
|||
<router-view> |
|||
<template #default="{ Component, route }"> |
|||
<transition v-bind="transitionEvent" :name="getName(route)" mode="out-in" appear> |
|||
<keep-alive v-if="openCache" :include="getCaches"> |
|||
<component :max="getMax" :is="Component" :key="route.fullPath" /> |
|||
</keep-alive> |
|||
<component v-else :max="getMax" :is="Component" :key="route.fullPath" /> |
|||
</transition> |
|||
</template> |
|||
</router-view> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { computed, defineComponent, unref } from 'vue'; |
|||
import { RouteLocationNormalized } from 'vue-router'; |
|||
|
|||
import { useTransition } from './useTransition'; |
|||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; |
|||
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; |
|||
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; |
|||
|
|||
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting'; |
|||
import { useCache } from './useCache'; |
|||
|
|||
export default defineComponent({ |
|||
props: { |
|||
isPage: { |
|||
type: Boolean, |
|||
}, |
|||
}, |
|||
setup(props) { |
|||
const { getCaches } = useCache(props.isPage); |
|||
|
|||
const { getShowMenu } = useMenuSetting(); |
|||
|
|||
const { getOpenKeepAlive } = useRootSetting(); |
|||
|
|||
const { getBasicTransition, getEnableTransition } = useTransitionSetting(); |
|||
|
|||
const { getMax } = useMultipleTabSetting(); |
|||
|
|||
const transitionEvent = useTransition(); |
|||
|
|||
const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMenu)); |
|||
|
|||
function getName(route: RouteLocationNormalized) { |
|||
if (!unref(getEnableTransition)) { |
|||
return null; |
|||
} |
|||
const cacheTabs = unref(getCaches); |
|||
const isInCache = cacheTabs.includes(route.name as string); |
|||
const name = isInCache && route.meta.inTab ? 'fade-slide' : null; |
|||
|
|||
return name || route.meta.transitionName || unref(getBasicTransition); |
|||
} |
|||
|
|||
return { |
|||
getCaches, |
|||
getMax, |
|||
transitionEvent, |
|||
getBasicTransition, |
|||
getName, |
|||
openCache, |
|||
getEnableTransition, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,22 +0,0 @@ |
|||
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting'; |
|||
|
|||
import { appStore } from '/@/store/modules/app'; |
|||
import { tryOnUnmounted } from '/@/utils/helper/vueHelper'; |
|||
|
|||
export function useTransition() { |
|||
function handleAfterEnter() { |
|||
const { getOpenPageLoading, getEnableTransition } = useTransitionSetting(); |
|||
if (!getOpenPageLoading.value || !getEnableTransition.value) return; |
|||
// Close loading after the route switching animation ends
|
|||
appStore.setPageLoadingAction(false); |
|||
} |
|||
|
|||
tryOnUnmounted(() => { |
|||
handleAfterEnter(); |
|||
stop(); |
|||
}); |
|||
|
|||
return { |
|||
onAfterEnter: handleAfterEnter, |
|||
}; |
|||
} |
|||
@ -1,50 +1,32 @@ |
|||
import type { Router } from 'vue-router'; |
|||
import { tabStore } from '/@/store/modules/tab'; |
|||
import { appStore } from '/@/store/modules/app'; |
|||
import { userStore } from '/@/store/modules/user'; |
|||
import { getParams } from '/@/router/helper/routeHelper'; |
|||
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting'; |
|||
import { unref } from 'vue'; |
|||
|
|||
const { getOpenPageLoading, getEnableTransition } = useTransitionSetting(); |
|||
const { getOpenPageLoading } = useTransitionSetting(); |
|||
export function createPageLoadingGuard(router: Router) { |
|||
let isFirstLoad = true; |
|||
router.beforeEach(async (to) => { |
|||
const { openKeepAlive, multiTabsSetting: { show } = {} } = appStore.getProjectConfig; |
|||
if (!userStore.getTokenState) { |
|||
return true; |
|||
} |
|||
|
|||
if (!unref(getEnableTransition) && unref(getOpenPageLoading)) { |
|||
appStore.commitPageLoadingState(true); |
|||
if (to.meta.loaded) { |
|||
return true; |
|||
} |
|||
|
|||
if (show && openKeepAlive && !isFirstLoad) { |
|||
const tabList = tabStore.getTabsState; |
|||
|
|||
const isOpen = tabList.some((tab) => tab.path === to.path); |
|||
appStore.setPageLoadingAction(!isOpen); |
|||
} else { |
|||
if (unref(getOpenPageLoading)) { |
|||
appStore.setPageLoadingAction(true); |
|||
return true; |
|||
} |
|||
|
|||
return true; |
|||
}); |
|||
router.afterEach(async (to, from) => { |
|||
const realToPath = to.path.replace(getParams(to), ''); |
|||
const realFormPath = from.path.replace(getParams(from), ''); |
|||
if ( |
|||
(!unref(getEnableTransition) && unref(getOpenPageLoading)) || |
|||
isFirstLoad || |
|||
to.meta.afterCloseLoading || |
|||
realToPath === realFormPath |
|||
) { |
|||
router.afterEach(async () => { |
|||
if (unref(getOpenPageLoading)) { |
|||
setTimeout(() => { |
|||
appStore.commitPageLoadingState(false); |
|||
}, 110); |
|||
isFirstLoad = false; |
|||
}, 300); |
|||
} |
|||
|
|||
return true; |
|||
}); |
|||
} |
|||
|
|||
Loading…
Reference in new issue