i-tools/layouts/default.vue

<template>
    <div v-if="loading" class="loading-overlay">
        <div class="loading-container">
            <div class="loading-wave">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="loading-text">加载中...</div>
        </div>
    </div>
    <a-layout class="layout">
        <a-layout-header class="header">
            <div class="header-content max-w-3xl mx-auto px-4 flex items-center">
                <NuxtLink to="/" class="logo">
                    <a-typography-title :level="4" class="!mb-0 !text-white">爱拓工具箱</a-typography-title>
                </NuxtLink>
            </div>
        </a-layout-header>

        <a-layout-content class="site-layout-content">
            <div class="max-w-3xl mx-auto w-full">
                <slot />
            </div>
        </a-layout-content>

        <a-layout-footer style="text-align: center">
            <a-typography-link href="https://github.com/iLay1678/i-tools" target="_blank">
                <template #icon>
                    <GithubOutlined />
                </template>
                GitHub
            </a-typography-link>
        </a-layout-footer>
    </a-layout>
</template>

<script setup>
import { GithubOutlined } from '@ant-design/icons-vue'
import { ref, onMounted, onBeforeUnmount } from 'vue'

const loading = ref(true)

const checkPageLoaded = () => {
  if (document.readyState === 'complete') {
    loading.value = false
  }
}

onMounted(() => {
  // 检查当前页面状态
  if (document.readyState === 'complete') {
    loading.value = false
  } else {
    // 添加页面加载完成事件监听
    window.addEventListener('load', checkPageLoaded)
  }
})

onBeforeUnmount(() => {
  // 清理事件监听
  window.removeEventListener('load', checkPageLoaded)
})
</script>

<style scoped>
.layout {
    min-height: 100vh;
}

.header {
    position: fixed;
    z-index: 1;
    width: 100%;
}

.header-content {
    height: 64px;
}

.logo {
    float: left;
    height: 31px;
    margin: 16px 0;
}

.site-layout-content {
    padding: 0 24px;
    margin-top: 64px;
    min-height: calc(100vh - 64px - 70px);
}

:deep(.ant-layout-header) {
    padding: 0;
}

:deep(.ant-menu) {
    border-bottom: none;
}
</style>