feat: 更新音乐播放器界面和功能

- 调整播放器底部样式，优化进度条和操作按钮布局
- 修复音量控制拖动功能
- 更新音乐数据源，增加更多歌曲分类和曲目
- 优化图片资源路径和命名规范
- 添加新的SVG图标和背景元素
- 修复播放进度条选择器错误
- 调整标签样式和交互效果

static/js/song-request-station.js

@@ -124,10 +124,8 @@ const search = createApp({
         const audioPlayer = ref(null);
 
         const clickSongs = (songs) => {
-            console.log("songs", songs.length);
             const randomIndex = Math.floor(Math.random() * songs.length);
             const item = songs[randomIndex];
-            console.log("随机选择的 item:", item);
             manageAudio(item);
         };
 
@@ -136,12 +134,12 @@ const search = createApp({
             const audio = audioPlayer.value;
             closeAll();
             setTimeout(() => {
-                if (audio?.src != item.path) audio.src = item.path;
+                console.log("item", item);
 
+                if (audio?.src != item.path) audio.src = item.path;
                 // audio.src = "https://app.gter.net/image/miniApp/mp3/1.mp3";
-                audio.play().then(() => {
-                    playData.value = { ...item, state: true };
-                });
+                audio.src = "/static/mp3/1.MP3";
+                audio.play().then(() => (playData.value = { ...item, state: true }));
             }, 500);
         };
 
@@ -250,18 +248,17 @@ const search = createApp({
             // 更新时间显示
             currentTimeFormatted.value = formatTime(currentTime);
             durationFormatted.value = formatTime(duration);
-
-            console.log("p", p);
         };
 
         // 快进 和 后退 10秒
         const fastForward = (type = "fast") => {
             if (!audioPlayer.value) return;
-            const src = playData.value?.playurl || "";
-            const area = playData.value?.area || "";
+            console.log("playData.value", playData.value);
+
+            const src = playData.value?.path || "";
 
             if (audioPlayer.value.src != src) {
-                manageAudio(src, area);
+                manageAudio(playData.value);
                 return;
             }
 
@@ -312,11 +309,14 @@ const search = createApp({
         };
 
         const handleBarDragBottomDrag = (event) => {
+            // console.log("event", event);
+
             if (!isBarBottomDragging) return;
 
             // 获取音量进度条元素
-            const progressBar = document.querySelector(".bottom-play .middle .progress-bar");
+            const progressBar = document.querySelector(".bottom-play .bottom-middle .progress-bar");
             if (!progressBar) return;
+            console.log("14111111111");
 
             const rect = progressBar.getBoundingClientRect();
 
@@ -326,6 +326,7 @@ const search = createApp({
             dragPosition = Math.max(0, Math.min(dragPosition, rect.width));
 
             const percentage = dragPosition / rect.width;
+
             updatePlay(percentage);
         };
 
@@ -335,9 +336,10 @@ const search = createApp({
             let newTime = duration * percentage;
             newTime = Math.max(0, Math.min(duration, newTime));
             audioPlayer.value.currentTime = newTime;
+
             getProgress();
         };
 
-        return { handleBarDragBottomClick, closeAll, fastForward, progress, durationFormatted, currentTimeFormatted, rePlay, handleVolumeHide, handleVolumeShow, stopDrag, handleVolumeDrag, startDrag, volumeShow, handleVolumeClick, setVolumePercentage, volume, audioPlayer, playData, handleMouseleave, handleMouseenter, clickSongs, tags, tagsFill, containerFill, container };
+        return { startBarDragBottom, handleBarDragBottomClick, closeAll, fastForward, progress, durationFormatted, currentTimeFormatted, rePlay, handleVolumeHide, handleVolumeShow, stopDrag, handleVolumeDrag, startDrag, volumeShow, handleVolumeClick, setVolumePercentage, volume, audioPlayer, playData, handleMouseleave, handleMouseenter, clickSongs, tags, tagsFill, containerFill, container };
     },
 }).mount("#song-request-station");