优化视频展示逻辑，更新视频封面和信息格式化，调整相关视频数量，增强用户体验

src/views/Home.vue

@@ -132,9 +132,10 @@
         @click="playVideo(video)"
         class="group rounded-2xl overflow-hidden bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10 transition"
       >
-        <div class="aspect-[9/12] relative">
+        <!-- 横屏封面 -->
+        <div class="aspect-[16/9] relative">
           <VideoProcessor
-            :cover-url="'https://sftp.69mediatest.com/resources/2412/L4PBMJ1MKVE8/cover'"
+            :cover-url="video.cover"
             :alt="video.name"
             cover-class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
           />
@@ -144,13 +145,36 @@
             {{ formatDuration(video.duration) }}
           </div>
         </div>
+
+        <!-- 视频信息 -->
         <div class="p-3">
-          <h3 class="text-[15px] font-medium text-white/90 truncate">
+          <h3 class="text-sm font-medium text-white/90 line-clamp-2 mb-1">
             {{ video.name }}
           </h3>
-          <p class="text-xs text-white/50 mt-0.5 truncate">
-            {{ video.view }} 次观看 · {{ video.like }} 点赞
+          <p class="text-xs text-white/50 truncate">
+            {{ formatNumber(video.view) }} 次观看 ·
+            {{ formatNumber(video.like) }} 点赞
           </p>
+
+          <!-- 标签信息（移动端隐藏） -->
+          <div
+            v-if="video.taginfo && video.taginfo.length > 0"
+            class="hidden sm:flex flex-wrap gap-1 mt-2"
+          >
+            <span
+              v-for="tag in video.taginfo.slice(0, 2)"
+              :key="tag.hash"
+              class="px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-xs text-white/70"
+            >
+              {{ tag.name }}
+            </span>
+            <span
+              v-if="video.taginfo.length > 2"
+              class="px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-xs text-white/50"
+            >
+              +{{ video.taginfo.length - 2 }}
+            </span>
+          </div>
         </div>
       </article>
     </div>
@@ -486,6 +510,15 @@ const formatDuration = (duration: string | number): string => {
   return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
 };
 
+// 格式化数字
+const formatNumber = (num: string | number): string => {
+  const n = parseInt(String(num));
+  if (n >= 10000) {
+    return `${(n / 10000).toFixed(1)}万`;
+  }
+  return n.toString();
+};
+
 // 图片加载错误处理已移至 VideoProcessor 组件
 
 // 跳转到指定页面
@@ -623,8 +656,8 @@ const playVideo = (video: any) => {
     params: { id: video.id },
     query: {
       name: video.name,
-      cover: "https://sftp.69mediatest.com/resources/2412/L4PBMJ1MKVE8/cover",
-      m3u8: "https://sftp.69mediatest.com/resources/2412/L4PBMJ1MKVE8/play",
+      cover: video.cover,
+      m3u8: video.m3u8,
       duration: video.duration,
       view: video.view,
       like: video.like,

src/views/VideoPlayer.vue

@@ -164,34 +164,56 @@
       <!-- 相关推荐 -->
       <div v-if="relatedVideos.length > 0" class="space-y-4">
         <h3 class="text-sm font-medium text-white/80">相关推荐</h3>
-        <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
+        <div class="grid grid-cols-2 gap-3">
           <article
-            v-for="video in relatedVideos.slice(0, 15)"
+            v-for="video in relatedVideos.slice(0, 12)"
             :key="video.id"
             @click="playVideo(video)"
             class="group rounded-xl overflow-hidden bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10 transition"
           >
-            <div class="aspect-[9/12] relative">
+            <!-- 横屏封面 -->
+            <div class="aspect-[16/9] relative">
               <VideoProcessor
-                :cover-url="'https://sftp.69mediatest.com/resources/2412/L4PBMJ1MKVE8/cover'"
+                :cover-url="video.cover"
                 :alt="video.name"
                 cover-class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
               />
               <div
-                class="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1.5 py-0.5 rounded"
+                class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded"
               >
                 {{ formatDuration(video.duration) }}
               </div>
             </div>
-            <div class="p-2">
-              <h4
-                class="text-xs font-medium text-white/90 leading-tight line-clamp-2"
-              >
+
+            <!-- 视频信息 -->
+            <div class="p-3">
+              <h4 class="text-sm font-medium text-white/90 line-clamp-2 mb-1">
                 {{ video.name }}
               </h4>
-              <p class="text-xs text-white/50 mt-0.5">
-                {{ formatNumber(video.view) }} 观看
+              <p class="text-xs text-white/50 truncate">
+                {{ formatNumber(video.view) }} 次观看 ·
+                {{ formatNumber(video.like) }} 点赞
               </p>
+
+              <!-- 标签信息（移动端隐藏） -->
+              <div
+                v-if="video.taginfo && video.taginfo.length > 0"
+                class="hidden sm:flex flex-wrap gap-1 mt-2"
+              >
+                <span
+                  v-for="tag in video.taginfo.slice(0, 2)"
+                  :key="tag.hash"
+                  class="px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-xs text-white/70"
+                >
+                  {{ tag.name }}
+                </span>
+                <span
+                  v-if="video.taginfo.length > 2"
+                  class="px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-xs text-white/50"
+                >
+                  +{{ video.taginfo.length - 2 }}
+                </span>
+              </div>
             </div>
           </article>
         </div>
@@ -335,8 +357,8 @@ const loadVideoInfo = () => {
     videoInfo.value = {
       id: videoId,
       name: videoData.name || `视频 ${videoId}`,
-      cover: "https://sftp.69mediatest.com/resources/2412/L4PBMJ1MKVE8/cover",
-      m3u8: "https://sftp.69mediatest.com/resources/2412/L4PBMJ1MKVE8/play",
+      cover: videoData.cover || "",
+      m3u8: videoData.m3u8 || "",
       duration: videoData.duration || 0,
       view: videoData.view || 0,
       like: videoData.like || 0,
@@ -367,11 +389,11 @@ const loadRelatedVideos = async () => {
       // 生成1-10之间的随机页码
       const randomPage = Math.floor(Math.random() * 10) + 1;
 
-      // 获取15个该标签下的最热视频
+      // 获取12个该标签下的最热视频
       const response = await searchVideoByTags(
         device,
         randomPage,
-        15,
+        12,
         randomTag.hash,
         "long",
         "view"
@@ -381,7 +403,7 @@ const loadRelatedVideos = async () => {
         // 过滤掉当前视频
         relatedVideos.value = response.data.list
           .filter((video: any) => video.id !== videoInfo.value.id)
-          .slice(0, 15);
+          .slice(0, 12);
       }
     } else {
       // 如果没有标签，则获取全局最热视频
@@ -390,7 +412,7 @@ const loadRelatedVideos = async () => {
       const response = await searchVideoByTags(
         device,
         randomPage,
-        15,
+        12,
         undefined,
         "long",
         "view"
@@ -399,7 +421,7 @@ const loadRelatedVideos = async () => {
       if (response.status === 0 && response.data?.list) {
         relatedVideos.value = response.data.list
           .filter((video: any) => video.id !== videoInfo.value.id)
-          .slice(0, 15);
+          .slice(0, 12);
       }
     }
   } catch (error) {