赵忠林
91e9a8c20f
- 添加了.dockerignore、.env.example和.gitignore配置文件 - 实现了文件服务器、模块API和服务器API的代理功能 - 创建了动态路由页面用于展示文章列表和详情 - 实现了商品详情页面包括图片展示和价格信息 - 添加了静态页面展示功能支持富文本内容渲染 - 配置了SEO元数据和面包屑导航组件
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: transparent;
|
|
}
|
|
|
|
.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>
|