修复刷新页面音频重复播放和打字机效果；token为0时不能使用。

src/store/emotionAudio.js

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { Howl } from 'howler'
 
 export const useEmotionAudioStore = defineStore('emotionAudio', {
     state: () => ({
@@ -21,6 +22,11 @@ export const useEmotionAudioStore = defineStore('emotionAudio', {
         },
         // 播放控制
         play() {
+            // 如果没有音频实例但有音频URL，先创建实例
+            if (!this.soundInstance && this.currentAudioUrl) {
+                this.createAudioInstance(this.currentAudioUrl)
+            }
+            
             if (this.soundInstance) {
                 if (this.isPaused && this.playbackPosition > 0) {
                     // 从暂停位置继续播放
@@ -83,6 +89,50 @@ export const useEmotionAudioStore = defineStore('emotionAudio', {
             this.ttsUrl = ''
             this.soundInstance = null
             this.nowSound = ''
+        },
+        // 创建音频实例
+        createAudioInstance(url) {
+            // 停止之前的音频
+            if (this.soundInstance) {
+                this.soundInstance.stop()
+            }
+            
+            // 创建新的音频实例
+            const newSound = new Howl({
+                src: [url],
+                html5: true,
+                format: ['mp3', 'wav'],
+                onplay: () => {
+                    this.isPlaying = true
+                    console.log('音频开始播放')
+                },
+                onend: () => {
+                    this.isPlaying = false
+                    this.isPaused = false
+                    this.playbackPosition = 0
+                    console.log('音频播放结束')
+                },
+                onstop: () => {
+                    this.isPlaying = false
+                    console.log('音频播放停止')
+                },
+                onpause: () => {
+                    this.isPlaying = false
+                    console.log('音频播放暂停')
+                },
+                onerror: (error) => {
+                    this.isPlaying = false
+                    console.error('音频播放错误:', error)
+                },
+                onload: () => {
+                    this.duration = newSound.duration()
+                    console.log('音频加载完成，时长:', this.duration)
+                }
+            })
+            
+            // 保存音频实例
+            this.soundInstance = newSound
+            this.nowSound = newSound
         }
     }
 })

src/views/AiEmotion.vue

@@ -247,6 +247,7 @@ const scenarioApplicationRef = ref(null); // 场景应用部分的引用
 const hasTriggeredAudio = ref(false); // 是否已触发音频播放
 const hasTriggeredTypewriter = ref(false); // 是否已触发打字机效果
 const intersectionObserver = ref(null); // 存储observer实例
+const isUserInitiated = ref(false); // 标记是否为用户主动搜索
 
 // 显示的文本内容（用于打字机效果）
 const displayedTexts = ref({
@@ -325,8 +326,8 @@ watch(currentStock, (newStock) => {
     stopAudio();
     // 清理音频URL，确保不会播放之前股票的音频
     audioUrl.value = '';
-    // 只停止音频播放，不清理currentAudioUrl，让新音频能正确设置
-    emotionAudioStore.stop();
+    // 清理store中的音频URL，确保不会播放之前股票的音频
+    emotionAudioStore.resetAudioState();
     // 清理正在进行的打字机效果定时器
     clearTypewriterTimers();
     // 重置触发状态，让每个股票都能独立触发效果
@@ -365,8 +366,7 @@ watch(currentStock, (newStock) => {
             disclaimer: true
           };
           
-          // 重要：即使已经显示过，也要播放当前股票的音频
-          // 提取音频URL并播放
+          // 提取音频URL但不自动播放，等待用户手动点击
           let voiceUrl = null;
           if (conclusion.url) {
             voiceUrl = conclusion.url.toString().trim().replace(/[`\s]/g, '');
@@ -381,10 +381,11 @@ watch(currentStock, (newStock) => {
           }
           
           if (voiceUrl && voiceUrl.startsWith('http')) {
-            console.log('切换到已显示股票，播放对应音频:', voiceUrl);
+            console.log('切换到已显示股票，准备音频URL但不自动播放:', voiceUrl);
             audioUrl.value = voiceUrl;
-            // 立即播放当前股票的音频
-            playAudio(voiceUrl);
+            // 同时更新store中的音频URL
+            emotionAudioStore.setCurrentAudioUrl(voiceUrl);
+            // 不自动播放，等待用户手动点击
           }
         } catch (error) {
           console.error('解析结论数据失败:', error);
@@ -413,6 +414,34 @@ watch(currentStock, (newStock) => {
         four: false,
         disclaimer: false
       };
+      
+      // 即使没有显示过，也需要设置音频URL以便用户手动播放
+      if (newStock.conclusionData) {
+        try {
+          const conclusion = JSON.parse(newStock.conclusionData);
+          let voiceUrl = null;
+          if (conclusion.url) {
+            voiceUrl = conclusion.url.toString().trim().replace(/[`\s]/g, '');
+          } else if (conclusion.audioUrl) {
+            voiceUrl = conclusion.audioUrl.toString().trim().replace(/[`\s]/g, '');
+          } else if (conclusion.voice_url) {
+            voiceUrl = conclusion.voice_url.toString().trim().replace(/[`\s]/g, '');
+          } else if (conclusion.audio) {
+            voiceUrl = conclusion.audio.toString().trim().replace(/[`\s]/g, '');
+          } else if (conclusion.tts_url) {
+            voiceUrl = conclusion.tts_url.toString().trim().replace(/[`\s]/g, '');
+          }
+          
+          if (voiceUrl && voiceUrl.startsWith('http')) {
+            console.log('切换到未显示股票，准备音频URL:', voiceUrl);
+            audioUrl.value = voiceUrl;
+            // 同时更新store中的音频URL
+            emotionAudioStore.setCurrentAudioUrl(voiceUrl);
+          }
+        } catch (error) {
+          console.error('解析结论数据失败:', error);
+        }
+      }
     }
 
     // 只有在页面已加载的情况下才渲染图表
@@ -523,37 +552,13 @@ watch(parsedConclusion, (newConclusion) => {
     if (voiceUrl && voiceUrl.startsWith('http')) {
       console.log('找到并清理后的语音URL:', voiceUrl);
       audioUrl.value = voiceUrl;
+      // 同时更新store中的音频URL
+      emotionAudioStore.setCurrentAudioUrl(voiceUrl);
       console.log('音频URL已准备，检查是否需要立即触发效果');
 
-      // 音频准备好后，如果页面已加载则立即触发效果
-      nextTick(() => {
-        setTimeout(() => {
-          if (currentStock.value?.stockInfo && isPageLoaded.value) {
-            const stockCode = currentStock.value.stockInfo.code || currentStock.value.stockInfo.symbol;
-
-            if (parsedConclusion.value && stockCode) {
-              // 如果该股票已经显示过，不需要再处理
-              if (stockTypewriterShown.value.has(stockCode)) {
-                return;
-              }
-
-              // 该股票第一次：播放音频和打字机效果
-              console.log('音频准备完成且页面已加载，立即触发效果');
-              hasTriggeredTypewriter.value = true;
-              hasTriggeredAudio.value = true;
-
-              startTypewriterEffect(parsedConclusion.value);
-
-              if (!stockAudioPlayed.value.has(stockCode)) {
-                console.log('立即开始音频播放');
-                stockAudioPlayed.value.set(stockCode, true);
-                playAudio(audioUrl.value);
-              }
-              stockTypewriterShown.value.set(stockCode, true);
-            }
-          }
-        }, 100); // 短暂延迟确保DOM更新完成
-      });
+      // 音频准备好后，只有在用户主动搜索时才自动触发效果
+      // 数据恢复时不自动播放音频和打字机效果
+      console.log('音频URL已准备完成，等待用户手动触发播放');
     } else {
       console.log('未找到有效的语音URL，原始URL:', newConclusion.url);
       console.log('结论数据中的所有字段:', Object.keys(newConclusion));
@@ -806,6 +811,8 @@ function startImageRotation() {
 // 发送消息方法
 async function handleSendMessage(input) {
   console.log("发送内容:", input);
+  // 标记为用户主动搜索
+  isUserInitiated.value = true;
 
   // 检查用户输入内容是否为空
   if (!input || !input.trim()) {
@@ -931,11 +938,11 @@ async function handleSendMessage(input) {
           renderCharts(currentStock.value.apiData);
           console.log('数据加载完成后开始渲染图表');
           
-          // 数据加载完成后立即触发音频和文本，不等待滚动到视口
-          if (parsedConclusion.value && audioUrl.value) {
+          // 只有在用户主动搜索时才自动触发音频和文本
+          if (isUserInitiated.value && parsedConclusion.value && audioUrl.value) {
             const stockCode = currentStock.value.stockInfo?.code || currentStock.value.stockInfo?.symbol;
             if (stockCode && !stockTypewriterShown.value.has(stockCode)) {
-              console.log('数据加载完成，立即触发音频和打字机效果');
+              console.log('用户主动搜索，立即触发音频和打字机效果');
               startTypewriterEffect(parsedConclusion.value);
               
               if (!stockAudioPlayed.value.has(stockCode)) {
@@ -945,6 +952,9 @@ async function handleSendMessage(input) {
               stockTypewriterShown.value.set(stockCode, true);
             }
           }
+          
+          // 重置用户主动搜索标志
+          isUserInitiated.value = false;
         }
       });
     } else {
@@ -1189,28 +1199,37 @@ function setupIntersectionObserver() {
           if (parsedConclusion.value && stockCode) {
             // 检查该股票是否是第一次触发
             if (!stockTypewriterShown.value.has(stockCode)) {
-              // 该股票第一次：播放音频和打字机效果
-              if (audioUrl.value) {
-                console.log('该股票第一次进入场景应用，开始打字机效果和音频播放');
-                hasTriggeredTypewriter.value = true;
-                hasTriggeredAudio.value = true;
-
-                // 开始打字机效果
-                startTypewriterEffect(parsedConclusion.value);
-
-                // 播放音频
-                if (!stockAudioPlayed.value.has(stockCode)) {
-                  console.log('开始音频播放');
-                  stockAudioPlayed.value.set(stockCode, true);
-                  playAudio(audioUrl.value);
-                }
+              // 该股票第一次进入视口：只显示文本，不自动播放音频和打字机效果
+              console.log('该股票第一次进入场景应用，直接显示完整内容，不自动播放');
+              
+              // 直接显示完整内容，不使用打字机效果
+              const conclusion = parsedConclusion.value;
+              displayedTexts.value = {
+                one1: conclusion.one1 || '',
+                one2: conclusion.one2 || '',
+                two: conclusion.two || '',
+                three: conclusion.three || '',
+                four: conclusion.four || '',
+                disclaimer: '该内容由AI生成，请注意甄别'
+              };
+              displayedTitles.value = {
+                one: 'L1: 情绪监控',
+                two: 'L2: 情绪解码',
+                three: 'L3: 情绪推演',
+                four: 'L4: 情绪套利'
+              };
+              // 显示所有有内容的模块
+              moduleVisibility.value = {
+                one: !!(conclusion.one1 || conclusion.one2),
+                two: !!conclusion.two,
+                three: !!conclusion.three,
+                four: !!conclusion.four,
+                disclaimer: true
+              };
 
-                // 记录该股票已显示过
-                stockTypewriterShown.value.set(stockCode, true);
-              } else {
-                console.log('音频尚未准备好，等待音频加载完成后再触发效果');
-                return;
-              }
+              // 记录该股票已显示过，但不播放音频
+              stockTypewriterShown.value.set(stockCode, true);
+              stockAudioPlayed.value.set(stockCode, true); // 标记为已播放，避免后续自动播放
             } else {
               // 非第一次或已经触发过：直接显示完整内容，不播放音频和打字机效果
               console.log('非第一次进入场景应用或已触发过，直接显示完整内容');
@@ -1285,11 +1304,40 @@ onMounted(async () => {
 
   startImageRotation();
 
-  // 等待DOM完全渲染后设置监听器
-  nextTick(() => {
-    setupIntersectionObserver();
-    // 移除自动滚动触发，改为在第二个工作流接口调用时触发
-  });
+  // 检查是否有已保存的股票数据需要恢复
+  if (emotionStore.stockList.length > 0 && emotionStore.activeStock) {
+    console.log('检测到已保存的股票数据，开始恢复页面状态（不自动播放音频）');
+    
+    // 恢复页面加载状态
+    isPageLoaded.value = true;
+    
+    // 等待DOM渲染后恢复图表和数据
+    nextTick(() => {
+      const currentStockData = emotionStore.activeStock;
+      if (currentStockData && currentStockData.apiData) {
+        console.log('恢复图表数据:', currentStockData.stockInfo.name);
+        renderCharts(currentStockData.apiData);
+        
+        // 恢复结论数据但不触发音频和打字机效果
+        if (currentStockData.conclusionData) {
+          conclusionData.value = currentStockData.conclusionData;
+          // 标记该股票的打字机效果和音频已经显示过，避免后续自动触发
+          const stockCode = currentStockData.stockInfo?.code || currentStockData.stockInfo?.symbol;
+          if (stockCode) {
+            stockTypewriterShown.value.set(stockCode, true);
+            stockAudioPlayed.value.set(stockCode, true);
+          }
+        }
+      }
+      
+      setupIntersectionObserver();
+    });
+  } else {
+    // 没有保存的数据，正常设置监听器
+    nextTick(() => {
+      setupIntersectionObserver();
+    });
+  }
 });
 
 // 组件卸载时清理定时器、音频和observer