From 8dc4b8a6f1fa37e2c535c51a1d8675c4966f7129 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=91=E8=8B=A5=E4=B8=BA=E7=8E=8B?=
 <ifwangs400@gmail.com>
Date: Fri, 13 Dec 2024 14:43:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96loading=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/default.vue | 23 +++++++++++++++++++----
 pages/index.vue     | 43 +++++++++++++++++++++++++++++++------------
 2 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 6cd4f77..c9f4a23 100644
--- a/layouts/default.vue
+++ b/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>
 
diff --git a/pages/index.vue b/pages/index.vue
index 0165d2e..c8a7a15 100644
--- a/pages/index.vue
+++ b/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>