From f24e8232f8d8a652b0ea346a1946d178978ccd12 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Mon, 9 Dec 2024 20:39:32 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=BF=AE=E5=A4=8D=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MvPlayer.vue | 74 +++++++++++++++++++++++++++++++++++--
 src/views/list/index.vue    | 14 ++++---
 src/views/mv/index.vue      | 12 +++---
 3 files changed, 86 insertions(+), 14 deletions(-)

diff --git a/src/components/MvPlayer.vue b/src/components/MvPlayer.vue
index 56fd7ca..cb91c12 100644
--- a/src/components/MvPlayer.vue
+++ b/src/components/MvPlayer.vue
@@ -90,7 +90,7 @@
             </div>
 
             <div class="right-controls">
-              <div class="volume-control custom-slider">
+              <div v-if="!isMobile" class="volume-control custom-slider">
                 <n-tooltip placement="top">
                   <template #trigger>
                     <n-button quaternary circle @click="toggleMute">
@@ -172,7 +172,7 @@
 
 <script setup lang="ts">
 import { NButton, NIcon, NSlider, NTooltip } from 'naive-ui';
-import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 
 import { getMvUrl } from '@/api/mv';
@@ -300,6 +300,7 @@ onUnmounted(() => {
   if (cursorTimer) {
     clearTimeout(cursorTimer);
   }
+  unlockScreenOrientation();
 });
 
 // 监听 currentMv 的变化
@@ -390,7 +391,28 @@ const checkFullscreenAPI = () => {
   };
 };
 
-// 切换全屏状态
+// 添加横屏锁定功能
+const lockScreenOrientation = async () => {
+  try {
+    if ('orientation' in screen) {
+      await (screen as any).orientation.lock('landscape');
+    }
+  } catch (error) {
+    console.warn('无法锁定屏幕方向:', error);
+  }
+};
+
+const unlockScreenOrientation = () => {
+  try {
+    if ('orientation' in screen) {
+      (screen as any).orientation.unlock();
+    }
+  } catch (error) {
+    console.warn('无法解锁屏幕方向:', error);
+  }
+};
+
+// 修改切换全屏状态的方法
 const toggleFullscreen = async () => {
   const api = checkFullscreenAPI();
 
@@ -403,9 +425,17 @@ const toggleFullscreen = async () => {
     if (!api.fullscreenElement) {
       await videoContainerRef.value?.requestFullscreen();
       isFullscreen.value = true;
+      // 在移动端进入全屏时锁定横屏
+      if (window.innerWidth <= 768) {
+        await lockScreenOrientation();
+      }
     } else {
       await document.exitFullscreen();
       isFullscreen.value = false;
+      // 退出全屏时解锁屏幕方向
+      if (window.innerWidth <= 768) {
+        unlockScreenOrientation();
+      }
     }
   } catch (error) {
     console.error('切换全屏失败:', error);
@@ -513,16 +543,54 @@ watch(showControls, (newValue) => {
     resetCursorTimer();
   }
 });
+
+const isMobile = computed(() => store.state.isMobile);
 </script>
 
 <style scoped lang="scss">
 .mv-detail {
   @apply w-full h-full bg-black relative;
 
+  // 添加横屏模式支持
+  @media screen and (orientation: landscape) {
+    height: 100vh !important;
+    width: 100vw !important;
+  }
+
   .video-container {
     @apply w-full h-full relative;
     transition: cursor 0.3s ease;
 
+    // 移动端适配
+    @media (max-width: 768px) {
+      .custom-controls {
+        .controls-main {
+          @apply flex-wrap gap-2 justify-center;
+
+          .left-controls,
+          .right-controls {
+            @apply w-full justify-center;
+          }
+
+          .time-display {
+            @apply order-first w-full text-center mb-2;
+          }
+        }
+      }
+
+      // 调整标题样式
+      .mv-detail-title {
+        .title {
+          @apply text-base max-w-full;
+        }
+      }
+
+      // 调整进度条
+      .progress-bar {
+        @apply mb-2;
+      }
+    }
+
     &.cursor-hidden {
       * {
         cursor: none !important;
diff --git a/src/views/list/index.vue b/src/views/list/index.vue
index d5c7b27..ae1e936 100644
--- a/src/views/list/index.vue
+++ b/src/views/list/index.vue
@@ -11,7 +11,7 @@ defineOptions({
   name: 'List',
 });
 
-const TOTAL_ITEMS = 40; // 每页数量
+const TOTAL_ITEMS = 42; // 每页数量
 
 const recommendList = ref<any[]>([]);
 const showMusic = ref(false);
@@ -162,12 +162,12 @@ watch(
 .recommend {
   @apply w-full h-full bg-none;
   &-title {
-    @apply text-lg font-bold text-white pb-4;
+    @apply text-lg font-bold text-white pb-2;
   }
 
   &-list {
     @apply grid gap-x-8 gap-y-6 pb-28 pr-4;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
   &-item {
     @apply flex flex-col;
@@ -218,10 +218,12 @@ watch(
 }
 
 .mobile {
+  .recommend-title {
+    @apply text-xl font-bold px-4;
+  }
+
   .recommend-list {
-    @apply px-4;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1rem;
+    @apply px-4 gap-4;
   }
 }
 </style>
diff --git a/src/views/mv/index.vue b/src/views/mv/index.vue
index 8d11243..6a43cd3 100644
--- a/src/views/mv/index.vue
+++ b/src/views/mv/index.vue
@@ -58,7 +58,7 @@ const initLoading = ref(false);
 const loadingMore = ref(false);
 const currentIndex = ref(0);
 const offset = ref(0);
-const limit = ref(30);
+const limit = ref(28);
 const hasMore = ref(true);
 
 const getItemAnimationDelay = (index: number) => {
@@ -158,12 +158,12 @@ const isPrevDisabled = computed(() => currentIndex.value === 0);
   @apply relative h-full w-full;
 
   &-title {
-    @apply text-xl font-bold;
+    @apply text-xl font-bold pb-2;
   }
 
   &-content {
     @apply grid gap-4 pb-28 mt-2 pr-4;
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   }
 
   .mv-item {
@@ -217,10 +217,12 @@ const isPrevDisabled = computed(() => currentIndex.value === 0);
 }
 
 .mobile {
+  .mv-list-title {
+    @apply text-xl font-bold px-4;
+  }
+
   .mv-list-content {
     @apply px-4;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1rem;
   }
 }