✨ feat: 完善进度条 & 进度调节时间吸附

imsyy · imsyy · commit f5db0f80e086 · 2025-12-15T16:43:50.000+08:00
diff --git a/src/components/Player/PlayerSlider.vue b/src/components/Player/PlayerSlider.vue
@@ -17,14 +17,18 @@
 </template>
 
 <script setup lang="ts">
-import { useStatusStore } from "@/stores";
+import { useMusicStore, useSettingStore, useStatusStore } from "@/stores";
 import { msToTime } from "@/utils/time";
 import { usePlayerController } from "@/core/player/PlayerController";
+import { LyricLine } from "@applemusic-like-lyrics/lyric";
 
 withDefaults(defineProps<{ showTooltip?: boolean }>(), { showTooltip: true });
 
-const player = usePlayerController();
+const musicStore = useMusicStore();
 const statusStore = useStatusStore();
+const settingStore = useSettingStore();
+
+const player = usePlayerController();
 
 // 拖动时的临时值
 const dragValue = ref(0);
@@ -45,9 +49,7 @@ const sliderProgress = computed({
       return;
     }
     // 结束或者为点击
-    useThrottleFn((value: number) => {
-      player.setSeek(value);
-    }, 30);
+    useThrottleFn((value: number) => setSeek(value), 30);
   },
 });
 
@@ -62,12 +64,47 @@ const startDrag = () => {
 const endDrag = () => {
   isDragging.value = false;
   // 直接更改进度
-  player.setSeek(dragValue.value);
+  setSeek(dragValue.value);
+};
+
+/**
+ * 获取当前时间最近一句歌词
+ * @param value 当前时间
+ * @returns 最近一句歌词的开始时间和内容
+ */
+const getCurrentLyric = (value: number) => {
+  const lyric = toRaw(musicStore.songLyric.lrcData);
+  if (!lyric?.length) return null;
+  //  查找最近一句歌词
+  let nearestLyric: LyricLine | null = null;
+  for (let i = lyric.length - 1; i >= 0; i--) {
+    if (value >= lyric[i].startTime) {
+      nearestLyric = lyric[i];
+      break;
+    }
+  }
+  return {
+    time: nearestLyric?.startTime,
+    text: nearestLyric?.words?.[0]?.word || "",
+  };
+};
+
+// 调节进度
+const setSeek = (value: number) => {
+  if (settingStore.progressAdjustLyric) {
+    const nearestLyric = getCurrentLyric(value);
+    player.setSeek(nearestLyric?.time ?? value);
+    return;
+  }
+  player.setSeek(value);
 };
 
 // 格式化提示
 const formatTooltip = (value: number) => {
-  return `${msToTime(value)} / ${msToTime(statusStore.duration)}`;
+  const nearestLyric = getCurrentLyric(value);
+  return nearestLyric
+    ? `${msToTime(value)} / ${nearestLyric.text.length > 30 ? nearestLyric.text.slice(0, 30) + "..." : nearestLyric.text}`
+    : msToTime(value);
 };
 </script>
 
@@ -85,5 +122,20 @@ const formatTooltip = (value: number) => {
       }
     }
   }
+  :deep(.n-slider-handles) {
+    .n-slider-handle {
+      opacity: 0;
+      transform: scale(0.6);
+    }
+  }
+  &:hover,
+  &.drag {
+    :deep(.n-slider-handles) {
+      .n-slider-handle {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/Setting/PlaySetting.vue b/src/components/Setting/PlaySetting.vue
@@ -30,6 +30,13 @@
         </div>
         <n-switch v-model:value="settingStore.memoryLastSeek" class="set" :round="false" />
       </n-card>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">进度调节吸附最近歌词</n-text>
+          <n-text class="tip" :depth="3">进度调节时吸附最近一句歌词</n-text>
+        </div>
+        <n-switch v-model:value="settingStore.progressAdjustLyric" class="set" :round="false" />
+      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">音乐渐入渐出</n-text>
@@ -192,6 +199,13 @@
           />
         </n-card>
       </n-collapse-transition>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">播放器主色跟随封面</n-text>
+          <n-text class="tip" :depth="3">播放器主颜色是否跟随封面主色，下一曲生效</n-text>
+        </div>
+        <n-switch v-model:value="settingStore.playerFollowCoverColor" class="set" :round="false" />
+      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">显示前奏倒计时</n-text>
diff --git a/src/core/player/PlayerController.ts b/src/core/player/PlayerController.ts
@@ -539,7 +539,10 @@ class PlayerController {
     return Math.floor(audioManager.currentTime * 1000);
   }
 
-  /** 设置进度 */
+  /**
+   * 设置进度
+   * @param time 时间 (ms)
+   */
   public setSeek(time: number) {
     const statusStore = useStatusStore();
     const audioManager = useAudioManager();
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
@@ -12,17 +12,17 @@ export interface SettingState {
   themeMode: "light" | "dark" | "auto";
   /** 主题类别 */
   themeColorType:
-  | "default"
-  | "orange"
-  | "blue"
-  | "pink"
-  | "brown"
-  | "indigo"
-  | "green"
-  | "purple"
-  | "yellow"
-  | "teal"
-  | "custom";
+    | "default"
+    | "orange"
+    | "blue"
+    | "pink"
+    | "brown"
+    | "indigo"
+    | "green"
+    | "purple"
+    | "yellow"
+    | "teal"
+    | "custom";
   /** 主题自定义颜色 */
   themeCustomColor: string;
   /** 全局着色 */
@@ -103,14 +103,14 @@ export interface SettingState {
   proxyPort: number;
   /** 歌曲音质 */
   songLevel:
-  | "standard"
-  | "higher"
-  | "exhigh"
-  | "lossless"
-  | "hires"
-  | "jyeffect"
-  | "sky"
-  | "jymaster";
+    | "standard"
+    | "higher"
+    | "exhigh"
+    | "lossless"
+    | "hires"
+    | "jyeffect"
+    | "sky"
+    | "jymaster";
   /** 播放设备 */
   playDevice: "default" | string;
   /** 自动播放 */
@@ -141,6 +141,8 @@ export interface SettingState {
   autoHidePlayerMeta: boolean;
   /** 记忆最后进度 */
   memoryLastSeek: boolean;
+  /** 进度调节吸附最近歌词 */
+  progressAdjustLyric: boolean;
   /** 显示播放列表数量 */
   showPlaylistCount: boolean;
   /** 是否显示音乐频谱 */
@@ -250,6 +252,8 @@ export interface SettingState {
   registryProtocol: {
     orpheus: boolean;
   };
+  /** 播放器跟随封面主色 */
+  playerFollowCoverColor: boolean;
 }
 
 export const useSettingStore = defineStore("setting", {
@@ -297,6 +301,7 @@ export const useSettingStore = defineStore("setting", {
     playerBackgroundFlowSpeed: 4,
     autoHidePlayerMeta: true,
     memoryLastSeek: true,
+    progressAdjustLyric: false,
     showPlaylistCount: true,
     showSpectrums: false,
     smtcOpen: true,
@@ -376,6 +381,7 @@ export const useSettingStore = defineStore("setting", {
     registryProtocol: {
       orpheus: false,
     },
+    playerFollowCoverColor: true,
   }),
   getters: {
     /**
@@ -432,11 +438,12 @@ export const useSettingStore = defineStore("setting", {
       }
       window.$message.info(
         `已切换至
-        ${this.themeMode === "auto"
-          ? "跟随系统"
-          : this.themeMode === "light"
-            ? "浅色模式"
-            : "深色模式"
+        ${
+          this.themeMode === "auto"
+            ? "跟随系统"
+            : this.themeMode === "light"
+              ? "浅色模式"
+              : "深色模式"
         }`,
         {
           showIcon: false,
diff --git a/src/style/main.scss b/src/style/main.scss
@@ -104,10 +104,20 @@ audio {
 
 // slider
 .n-slider {
-  .n-slider-rail {
-    backdrop-filter: blur(10px);
+  // .n-slider-rail {
+  //   backdrop-filter: blur(10px);
+  // }
+  .n-slider-handle {
+    transition:
+      opacity 0.3s var(--n-bezier),
+      box-shadow 0.2s var(--n-bezier),
+      transform 0.3s var(--n-bezier),
+      background-color 0.3s var(--n-bezier) !important;
   }
 }
+.n-slider-handle-indicator {
+  --n-indicator-border-radius: 8px !important;
+}
 
 // popover
 .n-popover {
@@ -124,9 +134,11 @@ audio {
         color: rgb(var(--main-cover-color));
       }
     }
-    .n-slider{
-      --n-handle-color: rgb(var(--main-cover-color));     --n-rail-color: rgba(var(--main-cover-color), 0.2);
-      --n-rail-color-hover: rgba(var(--main-cover-color), 0.3);   --n-fill-color: rgb(var(--main-cover-color));
+    .n-slider {
+      --n-handle-color: rgb(var(--main-cover-color));
+      --n-rail-color: rgba(var(--main-cover-color), 0.2);
+      --n-rail-color-hover: rgba(var(--main-cover-color), 0.3);
+      --n-fill-color: rgb(var(--main-cover-color));
       --n-fill-color-hover: rgb(var(--main-cover-color));
     }
   }
diff --git a/src/utils/color.ts b/src/utils/color.ts
@@ -158,6 +158,7 @@ export const getCoverColorData = (dom: HTMLImageElement) => {
 export const getCoverColor = async (coverUrl: string) => {
   if (!coverUrl) return;
   const statusStore = useStatusStore();
+  const settingStore = useSettingStore();
   // 创建图像元素
   const image = new Image();
   image.crossOrigin = "Anonymous";
@@ -167,6 +168,9 @@ export const getCoverColor = async (coverUrl: string) => {
     // 获取图片数据
     const coverColorData = getCoverColorData(image);
     if (coverColorData) statusStore.songCoverTheme = coverColorData;
+    if (!settingStore.playerFollowCoverColor) {
+      statusStore.songCoverTheme.main = { r: 239, g: 239, b: 239 };
+    }
     // 移除元素
     image.remove();
   };
