feat: 一些优化

src/api/song.js

@@ -47,8 +47,8 @@ export const getMusicNumUrl = async (id) => {
   //   process.env.NODE_ENV === "development"
   //     ? "kuwo,qq,pyncmd,kugou"
   //     : "qq,pyncmd,kugou";
-  // const url = `${import.meta.env.VITE_UNM_API}match?id=${id}&server=${server}`;
-  const url = `${import.meta.env.VITE_UNM_API}match?id=${id}`;
+  const server = "kuwo,qq,pyncmd,kugou";
+  const url = `${import.meta.env.VITE_UNM_API}match?id=${id}&server=${server}`;
   const response = await fetch(url, {
     method: "GET",
     headers: {

src/components/Player/CountDown.vue

@@ -1,5 +1,5 @@
 <template>
-  <Transition mode="out-in" appear>
+  <Transition mode="out-in" appear v-if="music.getPlaySongLyric">
     <div
       class="countdown"
       :style="{ animationPlayState: music.getPlayState ? 'running' : 'paused' }"
@@ -24,33 +24,35 @@ const music = musicStore();
 // 剩余点数
 const remainingPoint = ref(0);
 // 总时长
-const totalDuration = ref(
-  music.getPlaySongLyric.hasYrc
-    ? music.getPlaySongLyric?.yrc[0].time
-    : music.getPlaySongLyric?.lrc[0].time
-);
+const totalDuration = ref(0);
 
 // 监听歌曲时长变化
 watch(
   () => music.getPlaySongTime.currentTime,
   (val) => {
-    if (music.getPlaySongLyric.lrc[0]) {
-      const remainingTime = totalDuration.value - val - 0.5;
-      const progress = 1 - remainingTime / totalDuration.value;
-      remainingPoint.value = Number(Math.floor(3 * progress));
+    if (music.getPlaySongLyric) {
+      const lyric =
+        music.getPlaySongLyric.lrc[0] || music.getPlaySongLyric.yrc[0];
+      if (lyric) {
+        totalDuration.value = lyric.time;
+        const remainingTime = totalDuration.value - val - 0.5;
+        const progress = 1 - remainingTime / totalDuration.value;
+        remainingPoint.value = Number(Math.floor(3 * progress));
+      }
     }
   }
 );
 
 // 监听歌曲改变
 watch(
-  () => music.getPlaySongLyric?.lrc,
+  () => music.getPlaySongLyric,
   (val) => {
-    if (music.getPlaySongLyric.lrc[0]) {
-      totalDuration.value = music.getPlaySongLyric.hasYrc
-        ? music.getPlaySongLyric?.yrc[0].time
-        : val[0].time;
-      remainingPoint.value = 0;
+    if (val) {
+      const lyric = val.lrc[0] || val.yrc[0];
+      if (lyric) {
+        totalDuration.value = lyric.time;
+        remainingPoint.value = 0;
+      }
     }
   }
 );
@@ -67,6 +69,7 @@ watch(
   opacity: 0;
   transform: scale(0);
 }
+
 .countdown {
   animation: breathe 5s ease-in-out infinite;
   .point {
@@ -77,13 +80,16 @@ watch(
     }
   }
 }
+
 @keyframes breathe {
   0% {
     transform: scale(0.95);
   }
+
   50% {
     transform: scale(1.1);
   }
+
   100% {
     transform: scale(0.95);
   }

src/components/Player/RollingLyrics.vue

@@ -203,7 +203,7 @@ const lrcTextClick = (time) => {
     opacity: 0.3;
     transform: scale(0.9);
     transform-origin: left bottom;
-    transition: transform 0.3s ease, opacity 0.3s ease;
+    transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
     cursor: pointer;
     .lyric {
       display: flex;
@@ -303,6 +303,14 @@ const lrcTextClick = (time) => {
   &::-webkit-scrollbar {
     display: none;
   }
+  &:hover {
+    .lrc,
+    .yrc {
+      &.blur {
+        filter: blur(0) !important;
+      }
+    }
+  }
   &.cover {
     height: 80vh;
   }

src/components/Player/index.vue

@@ -188,18 +188,25 @@
             </template>
             {{ $t("menu.add") }}
           </n-popover>
-          <div class="pattern">
-            <n-icon
-              :component="
-                persistData.playSongMode === 'normal'
-                  ? PlayCycle
-                  : persistData.playSongMode === 'random'
-                  ? ShuffleOne
-                  : PlayOnce
-              "
-              @click="music.setPlaySongMode()"
-            />
-          </div>
+          <n-dropdown
+            trigger="hover"
+            :options="patternOptions"
+            :show-arrow="true"
+            @select="patternClick"
+          >
+            <div class="pattern">
+              <n-icon
+                :component="
+                  persistData.playSongMode === 'normal'
+                    ? PlayCycle
+                    : persistData.playSongMode === 'random'
+                    ? ShuffleOne
+                    : PlayOnce
+                "
+                @click="music.setPlaySongMode()"
+              />
+            </div>
+          </n-dropdown>
           <n-popover trigger="hover" :keep-alive-on-hover="false">
             <template #trigger>
               <div :class="music.showPlayList ? 'playlist open' : 'playlist'">
@@ -358,6 +365,19 @@ const getPlaySongData = (data, level = setting.songLevel) => {
   }
 };
 
+// 图标渲染
+const renderIcon = (icon) => {
+  return () => {
+    return h(
+      NIcon,
+      { style: { transform: "translateX(1px)" } },
+      {
+        default: () => icon,
+      }
+    );
+  };
+};
+
 // 网易云解灰
 const getMusicNumUrlData = (id) => {
   getMusicNumUrl(id)
@@ -404,6 +424,30 @@ const volumeMute = () => {
   }
 };
 
+// 播放模式数据
+const patternOptions = ref([
+  {
+    label: t("general.name.random"),
+    key: "random",
+    icon: renderIcon(h(ShuffleOne)),
+  },
+  {
+    label: t("general.name.single"),
+    key: "single",
+    icon: renderIcon(h(PlayOnce)),
+  },
+  {
+    label: t("general.name.normal"),
+    key: "normal",
+    icon: renderIcon(h(PlayCycle)),
+  },
+]);
+
+// 播放模式点击
+const patternClick = (val) => {
+  music.setPlaySongMode(val);
+};
+
 // 歌曲更换事件
 const songChange = debounce(500, (val) => {
   if (val === undefined) {

src/components/Provider/index.vue

@@ -21,7 +21,7 @@
     <n-loading-bar-provider>
       <n-dialog-provider>
         <n-notification-provider>
-          <n-message-provider>
+          <n-message-provider :max="1">
             <slot></slot>
             <NaiveProviderContent />
           </n-message-provider>

src/locale/lang/en.js

@@ -184,6 +184,9 @@ export default {
       cloudUsed: "Used {used}%, Remaining {remaining} G",
       simiVideo: "Similar Videos",
       restore: "Restore",
+      random: "Random play",
+      single: "Single loop",
+      normal: "list loop",
     },
     dialog: {
       check: "Check",

src/locale/lang/zh-CN.js

@@ -182,6 +182,9 @@ export default {
       cloudUsed: "已用 {used}%，剩余 {remaining} G",
       simiVideo: "相似视频",
       restore: "恢复默认",
+      random: "随机播放",
+      single: "单曲循环",
+      normal: "列表循环",
     },
     dialog: {
       check: "检查",

src/store/musicData.js

@@ -229,40 +229,36 @@ const useMusicDataStore = defineStore("musicData", {
       return this.persistData.likeList.includes(id);
     },
     // 移入移除喜欢列表
-    changeLikeList(id, like = true) {
+    async changeLikeList(id, like = true) {
       const user = userStore();
       const list = this.persistData.likeList;
       const exists = list.includes(id);
-      if (user.userLogin) {
-        if (like) {
-          if (!exists) {
-            setLikeSong(id, like).then((res) => {
-              if (res.code == 200) {
-                list.push(id);
-                $message.info(getLanguageData("loveSong"));
-              } else {
-                $message.error(getLanguageData("loveSongError"));
-              }
-            });
-          } else {
+      if (!user.userLogin) {
+        $message.error(getLanguageData("needLogin"));
+        return;
+      }
+      try {
+        const res = await setLikeSong(id, like);
+        if (res.code === 200) {
+          if (like && !exists) {
+            list.push(id);
+            $message.info(getLanguageData("loveSong"));
+          } else if (!like && exists) {
+            list.splice(list.indexOf(id), 1);
+            $message.info(getLanguageData("loveSongRemove"));
+          } else if (like && exists) {
             $message.info(getLanguageData("loveSongRepeat"));
           }
         } else {
-          if (exists) {
-            setLikeSong(id, like).then((res) => {
-              if (res.code == 200) {
-                list.splice(list.indexOf(id), 1);
-                $message.info(getLanguageData("loveSongRemove"));
-              } else {
-                $message.error(getLanguageData("loveSongRemoveError"));
-              }
-            });
+          if (like) {
+            $message.error(getLanguageData("loveSongError"));
           } else {
-            $message.error(getLanguageData("loveSongNoFound"));
+            $message.error(getLanguageData("loveSongRemoveError"));
           }
         }
-      } else {
-        $message.error(getLanguageData("needLogin"));
+      } catch (error) {
+        console.error(getLanguageData("loveSongError"), error);
+        $message.error(getLanguageData("loveSongError"));
       }
     },
     // 更改音乐播放状态
@@ -347,23 +343,36 @@ const useMusicDataStore = defineStore("musicData", {
       this.playSongLyricIndex = index === -1 ? lyrics.length - 1 : index - 1;
     },
     // 设置当前播放模式
-    setPlaySongMode() {
-      if (this.persistData.playSongMode === "normal") {
-        this.persistData.playSongMode = "random";
-        $message.info(getLanguageData("random"), {
-          icon: () => h(NIcon, null, { default: () => h(ShuffleOne) }),
-        });
-      } else if (this.persistData.playSongMode === "random") {
-        this.persistData.playSongMode = "single";
-        $message.info(getLanguageData("single"), {
-          icon: () => h(NIcon, null, { default: () => h(PlayOnce) }),
-        });
+    setPlaySongMode(value = null) {
+      const modeObj = {
+        normal: PlayCycle,
+        random: ShuffleOne,
+        single: PlayOnce,
+      };
+      if (value && value in modeObj) {
+        this.persistData.playSongMode = value;
       } else {
-        this.persistData.playSongMode = "normal";
-        $message.info(getLanguageData("normal"), {
-          icon: () => h(NIcon, null, { default: () => h(PlayCycle) }),
-        });
+        switch (this.persistData.playSongMode) {
+          case "normal":
+            this.persistData.playSongMode = "random";
+            value = "random";
+            break;
+          case "random":
+            this.persistData.playSongMode = "single";
+            value = "single";
+            break;
+          default:
+            this.persistData.playSongMode = "normal";
+            value = "normal";
+            break;
+        }
       }
+      $message.info(getLanguageData(value), {
+        icon: () =>
+          h(NIcon, null, {
+            default: () => h(modeObj[this.persistData.playSongMode]),
+          }),
+      });
     },
     // 上下曲调整
     setPlaySongIndex(type) {

src/utils/Player.js

@@ -81,12 +81,15 @@ export const createSound = (src, autoPlay = true) => {
       music.setPlayState(true);
       const songName = music.getPlaySongData.name;
       const songArtist = music.getPlaySongData.artist[0].name;
-      $message.info(songName + " - " + songArtist, {
-        icon: () =>
-          h(NIcon, null, {
-            default: () => h(MusicNoteFilled),
-          }),
-      });
+      // 播放通知
+      if (typeof $message !== "undefined") {
+        $message.info(songName + " - " + songArtist, {
+          icon: () =>
+            h(NIcon, null, {
+              default: () => h(MusicNoteFilled),
+            }),
+        });
+      }
       console.log("开始播放：" + songName + " - " + songArtist);
       // 获取播放器信息
       timeupdateInterval = setInterval(() => checkAudioTime(sound, music), 250);