优化loading加载

layouts/default.vue

@@ -39,14 +39,29 @@
 
 <script setup>
 import { GithubOutlined } from '@ant-design/icons-vue'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 
 const loading = ref(true)
 
+const checkPageLoaded = () => {
+  if (document.readyState === 'complete') {
+    loading.value = false
+  }
+}
+
 onMounted(() => {
-    setTimeout(() => {
-        loading.value = false
-    }, 300)
+  // 检查当前页面状态
+  if (document.readyState === 'complete') {
+    loading.value = false
+  } else {
+    // 添加页面加载完成事件监听
+    window.addEventListener('load', checkPageLoaded)
+  }
+})
+
+onBeforeUnmount(() => {
+  // 清理事件监听
+  window.removeEventListener('load', checkPageLoaded)
 })
 </script>
 

pages/index.vue

@@ -5,27 +5,46 @@
     <main class="max-h-screen bg-gray-100 p-4">
         <div class="mx-auto w-full max-w-3xl mb-8">
             <div class="space-y-4">
-                <NuxtLink to="/alipan-tv-token" class="block">
-                    <a-card hoverable>
+                <template v-for="tool in tools" :key="tool.id">
+                    <NuxtLink v-if="tool.available" :to="tool.path" class="block">
+                        <a-card hoverable>
+                            <template #title>
+                                <h2 class="text-xl font-medium" :class="tool.available ? 'text-gray-800' : 'text-gray-400'">
+                                    {{ tool.title }}
+                                </h2>
+                            </template>
+                            <p :class="tool.available ? 'text-gray-600' : 'text-gray-400'">{{ tool.description }}</p>
+                        </a-card>
+                    </NuxtLink>
+                    <a-card v-else hoverable>
                         <template #title>
-                            <h2 class="text-xl font-medium text-gray-800">阿里云盘TV授权</h2>
+                            <h2 class="text-xl font-medium text-gray-400">{{ tool.title }}</h2>
                         </template>
-                        <p class="text-gray-600">获取阿里云盘TV端的授权令牌</p>
+                        <p class="text-gray-400">{{ tool.description }}</p>
                     </a-card>
-                </NuxtLink>
-
-                <a-card hoverable>
-                    <template #title>
-                        <h2 class="text-xl font-medium text-gray-400">敬请期待</h2>
-                    </template>
-                    <p class="text-gray-400">更多工具正在开发中...</p>
-                </a-card>
+                </template>
             </div>
         </div>
     </main>
 </template>
 
 <script setup>
+const tools = [
+    {
+        id: 1,
+        title: '阿里云盘TV授权',
+        description: '获取阿里云盘TV端的授权令牌',
+        path: '/alipan-tv-token',
+        available: true
+    },
+    {
+        id: 2,
+        title: '敬请期待',
+        description: '更多工具正在开发中...',
+        path: '',
+        available: false
+    }
+];
 </script>
 
 <style scoped>