赵忠林
5e26fdc7fb
- 添加 .dockerignore 和 .env.example 配置文件 - 添加 .gitignore 忽略规则配置 - 创建服务端代理API路由（_file、_modules、_server） - 集成 Ant Design Vue 组件库并配置SSR样式提取 - 定义API响应类型封装 - 创建基础布局组件（blank、console） - 实现应用中心页面和组件（AppsCenter） - 添加文章列表测试页面 - 配置控制台导航菜单结构 - 实现控制台头部组件 - 创建联系页面表单
79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<template>
|
|
<a-spin :spinning="spinning" size="large" tip="加载中..." class="layout-spin">
|
|
<a-layout class="min-h-screen layout-shell" :class="{ 'layout-shell--pending': spinning }">
|
|
<SiteHeader />
|
|
<a-layout-content class="content">
|
|
<slot />
|
|
</a-layout-content>
|
|
<SiteFooter />
|
|
</a-layout>
|
|
</a-spin>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import SiteFooter from '@/components/SiteFooter.vue'
|
|
import SiteHeader from '@/components/SiteHeader.vue'
|
|
import { nextTick } from 'vue'
|
|
|
|
const nuxtApp = useNuxtApp()
|
|
const bootstrapping = ref(true)
|
|
const navigating = ref(false)
|
|
const siteInfoTimeoutReached = ref(false)
|
|
|
|
const { pending: siteInfoPending, error: siteInfoError } = useSiteInfo()
|
|
|
|
const siteInfoBlocking = computed(
|
|
() => siteInfoPending.value && !siteInfoError.value && !siteInfoTimeoutReached.value
|
|
)
|
|
|
|
const spinning = computed(() => bootstrapping.value || navigating.value || siteInfoBlocking.value)
|
|
|
|
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
|
|
})
|
|
|
|
// Never let an external API stall the whole UI forever.
|
|
window.setTimeout(() => {
|
|
siteInfoTimeoutReached.value = true
|
|
}, 2500)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content {
|
|
background: #fff;
|
|
}
|
|
|
|
.layout-shell {
|
|
transition: opacity 0.12s ease;
|
|
}
|
|
|
|
.layout-shell--pending {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.layout-spin {
|
|
display: block;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.layout-spin :deep(.ant-spin-nested-loading),
|
|
.layout-spin :deep(.ant-spin-container) {
|
|
min-height: 100vh;
|
|
}
|
|
</style>
|