初始化2

app/layouts/default.vue

@@ -0,0 +1,66 @@
+<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 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-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>