Test: Has the blockage been fixed?

META-Xiao · META-Xiao · commit b7bf1135ebf5 · 2026-02-24T02:10:23.000+08:00
diff --git a/api/index.ts b/api/index.ts
@@ -0,0 +1,8 @@
+// Vercel Serverless 函数入口
+import type { VercelRequest, VercelResponse } from '@vercel/node';
+import app from '../backend/server';
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  return app(req as any, res as any);
+}
+
diff --git a/frontend/index.html b/frontend/index.html
@@ -6,66 +6,83 @@
   <title>TesLongXiao の 主页</title>
   <link rel="icon" type="image/svg+xml" href="/vite.svg">
   
-  <!-- DNS 预解析 -->
-  <link rel="dns-prefetch" href="https://fonts.googleapis.com">
-  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
-  <link rel="dns-prefetch" href="https://code.iconify.design">
-  
-  <!-- 预连接 -->
+  <!-- 预连接关键域名 -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="dns-prefetch" href="https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com">
+  <link rel="dns-prefetch" href="https://api.teslongxiao.cn">
+  <link rel="dns-prefetch" href="https://cdn.xcnya.cn">
   
-  <!-- 关键字体预加载 -->
-  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=Cinzel:wght@400;500;600;700&display=swap" as="style">
-  <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=Cinzel:wght@400;500;600;700&display=swap" rel="stylesheet">
-  
-  <!-- Iconify Icons - 异步加载 -->
-  <script async src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
-  
-  <!-- 内联关键 CSS 防止闪烁 -->
+  <!-- 关键 CSS 内联，避免外部请求 -->
   <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    
-    body {
-      margin: 0;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-        sans-serif;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      background: #0a0e27;
-      color: #fff;
-      overflow-x: hidden;
-    }
-    
-    #app {
-      min-height: 100vh;
+    /* 使用系统字体作为后备，避免字体加载阻塞 */
+    :root {
+      --font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
     }
+  </style>
+  
+  <!-- 字体异步加载 -->
+  <script>
+    console.log('[Index] HTML 开始解析')
     
-    /* Loading 占位符 */
-    .app-loading {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      background: linear-gradient(180deg, rgba(10, 14, 39, 1) 0%, rgba(26, 31, 58, 1) 50%, rgba(10, 14, 39, 1) 100%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 9999;
+    // 延迟加载字体，避免阻塞渲染
+    if ('requestIdleCallback' in window) {
+      requestIdleCallback(function() {
+        var link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = 'https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=Cinzel:wght@400;500;600;700&display=swap';
+        document.head.appendChild(link);
+      });
+    } else {
+      setTimeout(function() {
+        var link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = 'https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=Cinzel:wght@400;500;600;700&display=swap';
+        document.head.appendChild(link);
+      }, 100);
     }
+  </script>
+  
+  <!-- Iconify 图标库 - 立即加载 -->
+  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js" defer></script>
+  
+  <!-- 内联关键 CSS 防止闪烁 -->
+  <style>
+    *{margin:0;padding:0;box-sizing:border-box}
+    body{margin:0;font-family:var(--font-fallback);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0e27;color:#fff;overflow-x:hidden}
+    #app{min-height:100vh}
+    .app-loading{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(180deg,rgba(10,14,39,1) 0%,rgba(26,31,58,1) 50%,rgba(10,14,39,1) 100%);display:flex;align-items:center;justify-content:center;z-index:9999}
+    .app-loading::after{content:'Loading...';font-size:2rem;color:rgba(202,215,255,0.9);animation:pulse 1.5s ease-in-out infinite}
+    @keyframes pulse{0%,100%{opacity:0.5}50%{opacity:1}}
   </style>
 </head>
 <body>
   <div id="app">
     <!-- 初始加载占位符 -->
     <div class="app-loading"></div>
   </div>
+  <script>
+    console.log('[Index] 开始加载 main.js')
+    console.time('[Index] main.js 加载时间')
+  </script>
   <script type="module" src="/src/main.js"></script>
+  <script>
+    // 移除 loading 占位符
+    window.addEventListener('load', function() {
+      console.timeEnd('[Index] main.js 加载时间')
+      console.log('[Index] 窗口完全加载')
+      setTimeout(function() {
+        var loading = document.querySelector('.app-loading');
+        if (loading) {
+          loading.style.transition = 'opacity 0.5s ease';
+          loading.style.opacity = '0';
+          setTimeout(function() {
+            loading.remove();
+            console.log('[Index] Loading 占位符已移除')
+          }, 500);
+        }
+      }, 100);
+    });
+  </script>
 </body>
 </html>
diff --git a/frontend/public/music/playlist.json b/frontend/public/music/playlist.json
@@ -4,20 +4,20 @@
     "name": "pinKing",
     "artist": "ChiliChill、陈Z-STUDIO",
     "url": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/music/1.mp3",
-    "cover": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/img/1.jpg"
+    "cover": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/img/1.jpg?x-oss-process=image/resize,w_200,h_200/quality,q_80"
   },
   {
     "id": 2,
     "name": "不及",
     "artist": "蔡诗芸、陈Z-STUDIO、HOYO-MiX",
     "url": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/music/2.mp3",
-    "cover": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/img/2.jpg"
+    "cover": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/img/2.jpg?x-oss-process=image/resize,w_200,h_200/quality,q_80"
   },
   {
     "id": 3,
     "name": "Automaton Waltz",
     "artist": "PLUM",
     "url": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/music/3.mp3",
-    "cover": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/img/3.jpg"
+    "cover": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/img/3.jpg?x-oss-process=image/resize,w_200,h_200/quality,q_80"
   }
 ]
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,18 +1,30 @@
 <template>
   <div id="app" class="relative min-h-screen">
-    <router-view />
+    <router-view v-slot="{ Component }">
+      <transition name="fade" mode="out-in">
+        <component :is="Component" />
+      </transition>
+    </router-view>
   </div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+import { onMounted, onBeforeMount } from 'vue'
+
+console.log('[App] App.vue 组件开始初始化')
+
+onBeforeMount(() => {
+  console.log('[App] App.vue onBeforeMount')
+})
 
 onMounted(() => {
+  console.log('[App] App.vue onMounted')
   // 页面加载动画
   document.body.style.opacity = '0'
   setTimeout(() => {
     document.body.style.transition = 'opacity 1s ease'
     document.body.style.opacity = '1'
+    console.log('[App] 页面淡入动画完成')
   }, 100)
 })
 </script>
@@ -21,5 +33,15 @@ onMounted(() => {
 #app {
   font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>
 
diff --git a/frontend/src/components/cards/LinkCard.vue b/frontend/src/components/cards/LinkCard.vue
@@ -12,6 +12,10 @@
         :src="link.icon" 
         :alt="link.name" 
         class="w-full h-full rounded-full object-cover border-2 border-white/10"
+        loading="lazy"
+        decoding="async"
+        width="64"
+        height="64"
         @error="handleImageError"
       />
       <Icon v-else :icon="link.icon || 'ri:link'" width="48" height="48" />
diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -1,7 +1,17 @@
+console.log('[Main] 开始加载应用...')
+console.time('[Main] 总加载时间')
+
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
 import './assets/main.css'
+import { logPerformance, logResourceTiming } from './utils/performance'
+
+console.log('[Main] Vue 和样式已导入')
+
+// 启动性能监控
+logPerformance()
+logResourceTiming()
 
 // 路由配置
 const router = createRouter({
@@ -10,7 +20,15 @@ const router = createRouter({
     {
       path: '/',
       name: 'Home',
-      component: () => import('./views/Home.vue')
+      component: () => {
+        console.log('[Router] 开始加载 Home.vue...')
+        console.time('[Router] Home.vue 加载时间')
+        return import('./views/Home.vue').then(module => {
+          console.timeEnd('[Router] Home.vue 加载时间')
+          console.log('[Router] Home.vue 加载完成')
+          return module
+        })
+      }
     }
   ],
   scrollBehavior(to, from, savedPosition) {
@@ -24,7 +42,15 @@ const router = createRouter({
   }
 })
 
+console.log('[Main] 路由配置完成')
+
 const app = createApp(App)
+console.log('[Main] App 实例创建完成')
+
 app.use(router)
+console.log('[Main] 路由已注册')
+
 app.mount('#app')
+console.log('[Main] App 已挂载到 DOM')
+console.timeEnd('[Main] 总加载时间')
 
diff --git a/frontend/src/utils/performance.js b/frontend/src/utils/performance.js
@@ -0,0 +1,73 @@
+// 性能监控工具
+export function logPerformance() {
+  if (typeof window === 'undefined') return
+
+  window.addEventListener('load', () => {
+    setTimeout(() => {
+      const perfData = window.performance.timing
+      const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart
+      const connectTime = perfData.responseEnd - perfData.requestStart
+      const renderTime = perfData.domComplete - perfData.domLoading
+      const domReadyTime = perfData.domContentLoadedEventEnd - perfData.navigationStart
+
+      console.group(' 性能指标')
+      console.log(`页面总加载时间: ${pageLoadTime}ms`)
+      console.log(`服务器连接时间: ${connectTime}ms`)
+      console.log(`DOM 渲染时间: ${renderTime}ms`)
+      console.log(`DOM Ready 时间: ${domReadyTime}ms`)
+      console.groupEnd()
+
+      // 检测慢加载
+      if (pageLoadTime > 3000) {
+        console.warn('⚠️  页面加载较慢，超过 3 秒')
+      }
+      if (connectTime > 1000) {
+        console.warn('⚠️  服务器响应较慢，超过 1 秒')
+      }
+    }, 0)
+  })
+}
+
+// 监控资源加载
+export function logResourceTiming() {
+  if (typeof window === 'undefined') return
+
+  window.addEventListener('load', () => {
+    setTimeout(() => {
+      const resources = window.performance.getEntriesByType('resource')
+      
+      console.group('📦 资源加载详情')
+      
+      // 按类型分组
+      const grouped = {}
+      resources.forEach(resource => {
+        const type = resource.initiatorType
+        if (!grouped[type]) grouped[type] = []
+        grouped[type].push({
+          name: resource.name.split('/').pop(),
+          duration: Math.round(resource.duration),
+          size: resource.transferSize
+        })
+      })
+
+      Object.keys(grouped).forEach(type => {
+        const items = grouped[type]
+        const totalTime = items.reduce((sum, item) => sum + item.duration, 0)
+        const totalSize = items.reduce((sum, item) => sum + (item.size || 0), 0)
+        
+        console.log(`${type}: ${items.length} 个文件, ${totalTime}ms, ${(totalSize / 1024).toFixed(2)}KB`)
+        
+        // 显示最慢的资源
+        const slowest = items.sort((a, b) => b.duration - a.duration).slice(0, 3)
+        slowest.forEach(item => {
+          if (item.duration > 500) {
+            console.warn(`  ⚠️  ${item.name}: ${item.duration}ms`)
+          }
+        })
+      })
+      
+      console.groupEnd()
+    }, 0)
+  })
+}
+
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
diff --git a/vercel.json b/vercel.json

Original file line number	Diff line number	Diff line change
`@@ -4,20 +4,20 @@`
`4`	`4`	`"name": "pinKing",`
`5`	`5`	`"artist": "ChiliChill、陈Z-STUDIO",`
`6`	`6`	`"url": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/music/1.mp3",`
`7`		`- "cover": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/img/1.jpg"`
	`7`	`+ "cover": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/img/1.jpg?x-oss-process=image/resize,w_200,h_200/quality,q_80"`
`8`	`8`	`},`
`9`	`9`	`{`
`10`	`10`	`"id": 2,`
`11`	`11`	`"name": "不及",`
`12`	`12`	`"artist": "蔡诗芸、陈Z-STUDIO、HOYO-MiX",`
`13`	`13`	`"url": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/music/2.mp3",`
`14`		`- "cover": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/img/2.jpg"`
	`14`	`+ "cover": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/img/2.jpg?x-oss-process=image/resize,w_200,h_200/quality,q_80"`
`15`	`15`	`},`
`16`	`16`	`{`
`17`	`17`	`"id": 3,`
`18`	`18`	`"name": "Automaton Waltz",`
`19`	`19`	`"artist": "PLUM",`
`20`	`20`	`"url": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/music/3.mp3",`
`21`		`- "cover": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/img/3.jpg"`
	`21`	`+ "cover": "https://image-host-for-meta.oss-cn-hangzhou.aliyuncs.com/MusicPlayer/img/3.jpg?x-oss-process=image/resize,w_200,h_200/quality,q_80"`
`22`	`22`	`}`
`23`	`23`	`]`