🦄 refactor: 重构为毫秒单位

Author: imsyy

src/components/Player/CountDown.vue

@@ -36,8 +36,8 @@ const props = defineProps<{
 // 是否显示
 const isShow = computed(() => {
   if (!settingStore.countDownShow) return false;
-  // 计算实时时间 - 0.5是否小于开始 + 持续时间，小于则显示，否则不显示
-  return props.seek + 0.5 < props.start + props.duration;
+  // 计算实时时间 - 0.5s 是否小于开始 + 持续时间，小于则显示，否则不显示
+  return props.seek + 500 < props.start + props.duration;
 });
 
 // 计算每个点的透明度

src/components/Player/LyricMenu.vue

@@ -1,12 +1,12 @@
 <template>
   <n-flex class="menu" justify="center" vertical>
-    <div class="menu-icon" @click="changeOffset(-0.5)">
+    <div class="menu-icon" @click="changeOffset(-500)">
       <SvgIcon name="Replay5" />
     </div>
     <span class="time" @click="resetOffset()">
       {{ currentTimeOffsetValue }}
     </span>
-    <div class="menu-icon" @click="changeOffset(0.5)">
+    <div class="menu-icon" @click="changeOffset(500)">
       <SvgIcon name="Forward5" />
     </div>
     <div class="divider" />
@@ -29,16 +29,18 @@ const statusStore = useStatusStore();
 const currentSongId = computed(() => musicStore.playSong?.id as number | undefined);
 
 /**
- * 当前进度偏移值
+ * 当前进度偏移值（显示为秒，保留1位小数）
  */
 const currentTimeOffsetValue = computed(() => {
   const currentTimeOffset = statusStore.getSongOffset(currentSongId.value);
-  return currentTimeOffset > 0 ? `+${currentTimeOffset}` : currentTimeOffset;
+  // 将毫秒转换为秒显示（保留1位小数）
+  const offsetSeconds = (currentTimeOffset / 1000).toFixed(1);
+  return currentTimeOffset > 0 ? `+${offsetSeconds}` : offsetSeconds;
 });
 
 /**
  * 改变进度偏移
- * @param delta 偏移量
+ * @param delta 偏移量（单位：毫秒）
  */
 const changeOffset = (delta: number) => {
   statusStore.incSongOffset(currentSongId.value, delta);

src/components/Player/MainAMLyric.vue

@@ -36,8 +36,7 @@
 import { LyricPlayer } from "@applemusic-like-lyrics/vue";
 import { LyricLine } from "@applemusic-like-lyrics/core";
 import { useMusicStore, useSettingStore, useStatusStore } from "@/stores";
-import { msToS } from "@/utils/time";
-import { getLyricLanguage } from "@/utils/lyric";
+import { getLyricLanguage } from "@/utils/format";
 import player from "@/utils/player";
 import LyricMenu from "./LyricMenu.vue";
 
@@ -48,16 +47,13 @@ const settingStore = useSettingStore();
 const lyricPlayerRef = ref<any | null>(null);
 
 // 实时播放进度
-const playSeek = ref<number>(
-  Math.floor((player.getSeek() + statusStore.getSongOffset(musicStore.playSong?.id)) * 1000),
-);
+const playSeek = ref<number>(player.getSeek() + statusStore.getSongOffset(musicStore.playSong?.id));
 
 // 实时更新播放进度
 const { pause: pauseSeek, resume: resumeSeek } = useRafFn(() => {
   const songId = musicStore.playSong?.id;
-  const offsetSeconds = statusStore.getSongOffset(songId);
-  const seekInSeconds = player.getSeek() + offsetSeconds;
-  playSeek.value = Math.floor(seekInSeconds * 1000);
+  const offsetTime = statusStore.getSongOffset(songId);
+  playSeek.value = player.getSeek() + offsetTime;
 });
 
 // 歌词主色
@@ -84,9 +80,9 @@ const amLyricsData = computed<LyricLine[]>(() => {
 // 进度跳转
 const jumpSeek = (line: any) => {
   if (!line?.line?.lyricLine?.startTime) return;
-  const time = msToS(line.line.lyricLine.startTime);
-  const offsetSeconds = statusStore.getSongOffset(musicStore.playSong?.id);
-  player.setSeek(time - offsetSeconds);
+  const time = line.line.lyricLine.startTime;
+  const offsetMs = statusStore.getSongOffset(musicStore.playSong?.id);
+  player.setSeek(time - offsetMs);
   player.play();
 };
 

src/components/Player/MainLyric.vue

@@ -34,7 +34,7 @@
               <!-- 倒计时 -->
               <CountDown
                 :start="0"
-                :duration="(musicStore.songLyric.yrcData[0].startTime || 0) / 1000"
+                :duration="musicStore.songLyric.yrcData[0].startTime || 0"
                 :seek="playSeek"
                 :playing="statusStore.playStatus"
               />
@@ -50,15 +50,15 @@
                   // on: statusStore.lyricIndex === index,
                   // 当播放时间大于等于当前歌词的开始时间
                   on:
-                    (playSeek >= item.startTime / 1000 && playSeek < item.endTime / 1000) ||
+                    (playSeek >= item.startTime && playSeek < item.endTime) ||
                     statusStore.lyricIndex === index,
                   'is-bg': item.isBG,
                   'is-duet': item.isDuet,
                 },
               ]"
               :style="{
                 filter: settingStore.lyricsBlur
-                  ? (playSeek >= item.startTime / 1000 && playSeek < item.endTime / 1000) ||
+                  ? (playSeek >= item.startTime && playSeek < item.endTime) ||
                     statusStore.lyricIndex === index
                     ? 'blur(0)'
                     : `blur(${Math.min(Math.abs(statusStore.lyricIndex - index) * 1.8, 10)}px)`
@@ -75,8 +75,8 @@
                     'content-text': true,
                     'content-long':
                       settingStore.showYrcLongEffect &&
-                      (text.endTime - item.startTime) / 1000 >= 1.5 &&
-                      playSeek <= text.endTime / 1000,
+                      text.endTime - item.startTime >= 1500 &&
+                      playSeek <= text.endTime,
                     'end-with-space': text.word.endsWith(' ') || text.startTime === 0,
                   }"
                 >
@@ -105,17 +105,14 @@
                 v-if="
                   settingStore.countDownShow &&
                   item.startTime > 0 &&
-                  ((musicStore.songLyric.yrcData[index + 1]?.startTime || 0) - item.endTime) /
-                    1000 >=
-                    10
+                  (musicStore.songLyric.yrcData[index + 1]?.startTime || 0) - item.endTime >= 10000
                 "
                 class="count-down-content"
               >
                 <CountDown
-                  :start="item.endTime / 1000"
+                  :start="item.endTime"
                   :duration="
-                    ((musicStore.songLyric.yrcData[index + 1]?.startTime || 0) - item.endTime) /
-                    1000
+                    (musicStore.songLyric.yrcData[index + 1]?.startTime || 0) - item.endTime
                   "
                   :seek="playSeek"
                   :playing="statusStore.playStatus"
@@ -130,7 +127,7 @@
               <!-- 倒计时 -->
               <CountDown
                 :start="0"
-                :duration="(musicStore.songLyric.lrcData[0].startTime || 0) / 1000"
+                :duration="musicStore.songLyric.lrcData[0].startTime || 0"
                 :seek="playSeek"
                 :playing="statusStore.playStatus"
               />
@@ -171,12 +168,11 @@
 </template>
 
 <script setup lang="ts">
-// import type { LyricContentType } from "@/types/main";
 import { LyricWord } from "@applemusic-like-lyrics/lyric";
 import { NScrollbar } from "naive-ui";
 import { useMusicStore, useSettingStore, useStatusStore } from "@/stores";
 import player from "@/utils/player";
-import { getLyricLanguage } from "@/utils/lyric";
+import { getLyricLanguage } from "@/utils/format";
 import { isElectron } from "@/utils/env";
 import LyricMenu from "./LyricMenu.vue";
 
@@ -238,14 +234,14 @@ const getYrcStyle = (wordData: LyricWord, lyricIndex: number) => {
 
   // 判断当前行是否处于激活状态
   const isLineActive =
-    (currentSeek >= currentLine.startTime / 1000 && currentSeek < currentLine.endTime / 1000) ||
+    (currentSeek >= currentLine.startTime && currentSeek < currentLine.endTime) ||
     statusStore.lyricIndex === lyricIndex;
 
   // 如果当前歌词行不是激活状态，返回固定样式，避免不必要的计算
   if (!isLineActive) {
     if (settingStore.showYrcAnimation) {
       // 判断单词是否已经唱过：已唱过保持填充状态(0%)，未唱到保持未填充状态(100%)
-      const hasPlayed = currentSeek >= wordData.endTime / 1000;
+      const hasPlayed = currentSeek >= wordData.endTime;
       return {
         WebkitMaskPositionX: hasPlayed ? "0%" : "100%",
       };
@@ -257,30 +253,28 @@ const getYrcStyle = (wordData: LyricWord, lyricIndex: number) => {
   // 激活状态的样式计算
   if (settingStore.showYrcAnimation) {
     // 如果播放状态不是加载中，且当前单词的时间加上持续时间减去播放进度大于 0
-    if (statusStore.playLoading === false && wordData.endTime / 1000 - currentSeek > 0) {
+    if (statusStore.playLoading === false && wordData.endTime - currentSeek > 0) {
       return {
         transitionDuration: `0s, 0s, 0.35s`,
         transitionDelay: `0ms`,
         WebkitMaskPositionX: `${
           100 -
           Math.max(
-            ((currentSeek - wordData.startTime / 1000) /
-              ((wordData.endTime - wordData.startTime) / 1000)) *
-              100,
+            ((currentSeek - wordData.startTime) / (wordData.endTime - wordData.startTime)) * 100,
             0,
           )
         }%`,
       };
     }
     // 预计算时间差，避免重复计算
-    const timeDiff = wordData.startTime - currentSeek * 1000;
+    const timeDiff = wordData.startTime - currentSeek;
     return {
       transitionDuration: `${wordData.endTime - wordData.startTime}ms, ${(wordData.endTime - wordData.startTime) * 0.8}ms, 0.35s`,
       transitionDelay: `${timeDiff}ms, ${timeDiff + (wordData.endTime - wordData.startTime) * 0.5}ms, 0ms`,
     };
   } else {
     // 无动画模式：根据单词时间判断透明度
-    return statusStore.playLoading === false && wordData.startTime / 1000 >= currentSeek
+    return statusStore.playLoading === false && wordData.startTime >= currentSeek
       ? { opacity: 0 }
       : { opacity: 1 };
   }
@@ -290,8 +284,8 @@ const getYrcStyle = (wordData: LyricWord, lyricIndex: number) => {
 const jumpSeek = (time: number) => {
   if (!time) return;
   lrcMouseStatus.value = false;
-  const offsetSeconds = statusStore.getSongOffset(musicStore.playSong?.id);
-  player.setSeek(time / 1000 - offsetSeconds);
+  const offsetMs = statusStore.getSongOffset(musicStore.playSong?.id);
+  player.setSeek(time - offsetMs);
   player.play();
 };
 

src/components/Player/MainPlayer.vue

@@ -161,8 +161,8 @@
             vertical
           >
             <div class="time">
-              <n-text depth="2">{{ secondsToTime(statusStore.currentTime) }}</n-text>
-              <n-text depth="2">{{ secondsToTime(statusStore.duration) }}</n-text>
+              <n-text depth="2">{{ msToTime(statusStore.currentTime) }}</n-text>
+              <n-text depth="2">{{ msToTime(statusStore.duration) }}</n-text>
             </div>
             <!-- 定时关闭 -->
             <n-tag
@@ -189,7 +189,7 @@
 <script setup lang="ts">
 import type { DropdownOption } from "naive-ui";
 import { useMusicStore, useStatusStore, useDataStore, useSettingStore } from "@/stores";
-import { secondsToTime, convertSecondsToTime } from "@/utils/time";
+import { msToTime, convertSecondsToTime } from "@/utils/time";
 import { renderIcon, coverLoaded } from "@/utils/helper";
 import { toLikeSong } from "@/utils/auth";
 import {

src/components/Player/PlayerControl.vue

@@ -76,9 +76,9 @@
           </div>
           <!-- 进度条 -->
           <div class="slider">
-            <span>{{ secondsToTime(statusStore.currentTime) }}</span>
+            <span>{{ msToTime(statusStore.currentTime) }}</span>
             <PlayerSlider :show-tooltip="false" />
-            <span>{{ secondsToTime(statusStore.duration) }}</span>
+            <span>{{ msToTime(statusStore.duration) }}</span>
           </div>
         </div>
         <n-flex class="right" align="center" justify="end">
@@ -92,7 +92,7 @@
 
 <script setup lang="ts">
 import { useMusicStore, useStatusStore, useDataStore } from "@/stores";
-import { secondsToTime } from "@/utils/time";
+import { msToTime } from "@/utils/time";
 import { openDownloadSong, openPlaylistAdd } from "@/utils/modal";
 import { toLikeSong } from "@/utils/auth";
 import player from "@/utils/player";

src/components/Player/PlayerSlider.vue

@@ -18,8 +18,8 @@
 
 <script setup lang="ts">
 import { useStatusStore } from "@/stores";
+import { msToTime } from "@/utils/time";
 import player from "@/utils/player";
-import { secondsToTime } from "@/utils/time";
 
 withDefaults(defineProps<{ showTooltip?: boolean }>(), { showTooltip: true });
 
@@ -66,7 +66,7 @@ const endDrag = () => {
 
 // 格式化提示
 const formatTooltip = (value: number) => {
-  return `${secondsToTime(value)} / ${secondsToTime(statusStore.duration)}`;
+  return `${msToTime(value)} / ${msToTime(statusStore.duration)}`;
 };
 </script>
 

src/stores/status.ts

@@ -175,28 +175,42 @@ export const useStatusStore = defineStore("status", {
     },
   },
   actions: {
-    /** 获取指定歌曲的偏移（默认 0） */
+    /**
+     * 获取指定歌曲的偏移
+     * 单位：毫秒
+     */
     getSongOffset(songId?: number): number {
       if (!songId) return 0;
-      return this.currentTimeOffsetMap?.[songId] ?? 0;
+      const offsetTime = this.currentTimeOffsetMap?.[songId] ?? 0;
+      return Math.floor(offsetTime * 1000);
     },
-    /** 设置指定歌曲的偏移 */
+    /**
+     * 设置指定歌曲的偏移
+     * @param songId 歌曲 id
+     * @param offset 偏移量（单位：毫秒）
+     */
     setSongOffset(songId?: number, offset: number = 0) {
       if (!songId) return;
       if (!this.currentTimeOffsetMap) this.currentTimeOffsetMap = {};
-      const fixed = Number(offset.toFixed(2));
+      // 将毫秒转换为秒存储（保留2位小数）
+      const offsetSeconds = offset / 1000;
+      const fixed = Number(offsetSeconds.toFixed(2));
       if (fixed === 0) {
         // 为 0 时移除记录，避免占用空间
         delete this.currentTimeOffsetMap[songId];
       } else {
         this.currentTimeOffsetMap[songId] = fixed;
       }
     },
-    /** 调整指定歌曲的偏移（增量） */
-    incSongOffset(songId?: number, delta: number = 0.5) {
+    /**
+     * 调整指定歌曲的偏移（增量）
+     * @param songId 歌曲 id
+     * @param delta 偏移增量（单位：毫秒，默认 500ms）
+     */
+    incSongOffset(songId?: number, delta: number = 500) {
       if (!songId) return;
       const current = this.getSongOffset(songId);
-      const next = Number((current + delta).toFixed(2));
+      const next = current + delta;
       if (next === 0) {
         delete this.currentTimeOffsetMap[songId];
       } else {

src/utils/format.ts

@@ -267,3 +267,17 @@ const getCoverSizeUrl = (url: string, size: number | null = null) => {
     return "/images/song.jpg?assest";
   }
 };
+
+/**
+ * 检测歌词语言
+ * @param lyric 歌词内容
+ * @returns 语言代码（"ja" | "zh-CN" | "en"）
+ */
+export const getLyricLanguage = (lyric: string): string => {
+  // 判断日语 根据平假名和片假名
+  if (/[\u3040-\u309f\u30a0-\u30ff]/.test(lyric)) return "ja";
+  // 判断简体中文 根据中日韩统一表意文字基本区
+  if (/[\u4e00-\u9fa5]/.test(lyric)) return "zh-CN";
+  // 默认英语
+  return "en";
+};