80 lines
2.0 KiB
Vue
80 lines
2.0 KiB
Vue
<template>
|
|
<div class="layout-wrapper" :class="{ 'layout-wrapper--loading': spinning }">
|
|
<!-- 加载遮罩 -->
|
|
<div v-if="spinning" class="layout-loading-mask">
|
|
<a-spin size="large" />
|
|
</div>
|
|
<a-layout class="min-h-screen layout-shell">
|
|
<PortalHeader v-if="!hideLayoutHeader" />
|
|
<a-layout-content class="content">
|
|
<slot />
|
|
</a-layout-content>
|
|
<PortalFooter v-if="usePortalFooter" />
|
|
<SiteFooter v-else />
|
|
</a-layout>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import PortalHeader from '@/components/PortalHeader.vue'
|
|
import PortalFooter from '@/components/PortalFooter.vue'
|
|
import SiteFooter from '@/components/SiteFooter.vue'
|
|
import { nextTick } from 'vue'
|
|
|
|
const nuxtApp = useNuxtApp()
|
|
const route = useRoute()
|
|
const bootstrapping = ref(true)
|
|
const navigating = ref(false)
|
|
const portalFooterRoutePrefixes = ['/news', '/reference', '/consultation', '/expert', '/think-tank', '/hanmo', '/about']
|
|
|
|
const spinning = computed(() => bootstrapping.value || navigating.value)
|
|
const hideLayoutHeader = computed(() => route.meta?.hideLayoutHeader === true)
|
|
const usePortalFooter = computed(() => {
|
|
return portalFooterRoutePrefixes.some((prefix) => route.path === prefix || route.path.startsWith(`${prefix}/`))
|
|
})
|
|
|
|
if (import.meta.client) {
|
|
nuxtApp.hooks.hook('page:start', () => {
|
|
navigating.value = true
|
|
})
|
|
|
|
nuxtApp.hooks.hook('page:finish', () => {
|
|
navigating.value = false
|
|
})
|
|
|
|
onMounted(async () => {
|
|
// Wait for hydration + one paint to reduce CSS flicker (antdv cssinjs / tailwind).
|
|
await nextTick()
|
|
requestAnimationFrame(() => {
|
|
bootstrapping.value = false
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content {
|
|
background: #fff;
|
|
}
|
|
|
|
.layout-wrapper {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.layout-loading-mask {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.layout-shell {
|
|
transition: opacity 0.12s ease;
|
|
}
|
|
</style>
|