新版官网模板

app/layouts/default.vue

@@ -0,0 +1,71 @@
+<template>
+  <div :class="{ 'layout-wrapper--loading': spinning }" class="layout-wrapper">
+    <!-- 加载遮罩 -->
+    <div v-if="spinning" class="layout-loading-mask">
+      <a-spin size="large" />
+    </div>
+    <a-layout class="min-h-screen layout-shell">
+      <SiteHeader />
+      <a-layout-content class="content">
+        <slot />
+      </a-layout-content>
+      <SiteFooter />
+    </a-layout>
+  </div>
+</template>
+
+<script lang="ts" setup>
+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 spinning = computed(() => bootstrapping.value || navigating.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
+    })
+  })
+}
+</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>