feat(core): 初始化项目基础架构和CMS功能模块
- 添加Docker相关配置文件(.dockerignore, .env.example, .gitignore) - 实现服务端API代理功能,支持文件、模块和服务器API转发 - 创建文章详情页、栏目文章列表页和单页内容展示页面 - 集成Ant Design Vue组件库并实现SSR样式提取功能 - 定义API响应数据结构类型和应用布局组件 - 开发开发者应用中心和文章管理页面 - 实现CMS导航菜单获取和多租户切换功能
This commit is contained in:
78
app/layouts/default.vue
Normal file
78
app/layouts/default.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user