feat(guess): 添加猜歌游戏音频播放和结果反馈功能

- 新增音频播放控制逻辑，支持播放、暂停和结束事件
- 添加答对/答错音效和视觉反馈
- 实现答题结果状态管理（正确、错误、胜利）
- 优化界面布局和响应式设计
- 新增返回首页功能
- 添加答案模式显示选项

static/js/guess.js

@@ -2,20 +2,36 @@ const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
 const search = createApp({
     setup() {
         const musicData = ref([
-            ["A组 世界在转动.MP3", "A组《来吧，占领我的无私》"],
+            ["A组 世界在转动.MP3", "A组《来吧，占领我的无私》.MP3"],
             ["B组 《远方》.MP3", "B组 大闹天宫.MP3", "B组 下一站旅行.MP3"],
             ["C组 旧唱片.MP3", "C组 梅雨季.MP3", "C组 尊重成长共赢.MP3", "C组《弥留》.MP3"],
         ]);
 
-        let step = ref(0); // null 是未开始 0 是第一题
+        let step = ref(null); // null 是未开始 0 是第一题
+        let detailsHeight = ref(500)
+        const detailsRef = ref(null)
+
+        let isAnswer = ref(false)
 
         onMounted(() => {
             console.log("init");
             init();
+
+            console.log("detailsRef", detailsRef.value);
+
+            const searchParams = new URLSearchParams(window.location.search);
+            isAnswer.value = searchParams.has('answer') ? true : false;
+
+            nextTick(() => {
+                if (detailsRef.value) {
+                    detailsHeight.value = detailsRef.value.clientHeight
+                    console.log(detailsHeight.value);
+                }
+            })
+
         });
 
         const init = () => {
-            // 将 musicData 里的 二维值打乱
             musicData.value.forEach((item) => {
                 item.sort(() => Math.random() - 0.5);
             });
@@ -29,18 +45,76 @@ const search = createApp({
 
         // 添加一个方法来切换到下一题
         const nextStep = () => {
-            if (step.value < musicData.value.length - 1) {
-                step.value++;
-            } else {
-                // 所有问题都回答完毕，可以重置或显示结果
-                // step.value = null;
-            }
+            step.value++;
         };
+        const audioPlayer = ref(null)
+        const audiozSrc = ref("")
+
 
         const play = (item) => {
             console.log("item", item);
+            audioPlayer.value.src = './static/mp3/guess/' + item
+            audioPlayer.value.play()
+
+            audiozSrc.value = item
         };
 
-        return { play, step, begin, musicData, nextStep };
+        const stop = () => {
+            audioPlayer.value.pause()
+            audiozSrc.value = ""
+        }
+
+        const playSucceed = () => {
+            audioPlayer.value.src = './static/mp3/guess/succeed.mp3'
+            audioPlayer.value.play()
+        }
+        const playLose = () => {
+            audioPlayer.value.src = './static/mp3/guess/lose.mp3'
+            audioPlayer.value.play()
+        }
+
+        const audioEnd = () => {
+            console.log("结束");
+
+            audiozSrc.value = ""
+        }
+
+        const select = (item, index) => {
+            stop()
+            if (item.indexOf("《") !== -1) {
+                playSucceed()
+                if (step.value == musicData.value.length - 1) {
+                    winState.value = true
+                } else {
+                    replyState.value = true
+                    autoSkip()
+                }
+            } else {
+                loseState.value = true
+                playLose()
+            }
+        }
+
+        let replyState = ref(false)
+        let winState = ref(false)
+        let loseState = ref(false)
+
+        const autoSkip = () => {
+            setTimeout(() => {
+                replyState.value = false
+                nextStep()
+            }, 2000)
+        }
+
+        const backHome = () => {
+            step.value = null
+            replyState.value = false
+            winState.value = false
+            loseState.value = false
+        }
+
+
+
+        return { isAnswer, detailsHeight, detailsRef, audioEnd, playSucceed, stop, audiozSrc, audioPlayer, backHome, select, loseState, winState, replyState, play, step, begin, musicData, nextStep };
     },
 }).mount("#guess");