hongxilin
/
AIxiaocaishen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'songjie/feature-20250628160649-上线前优化' into milestone-20250710-上线前优化

master
宋杰 1 day ago
parent
c12f8728be 682dc4e1ca
commit
d0eb423f06
2 changed files with 280 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 301
      src/views/AIchat.vue
  2. 8
      src/views/AiEmotion.vue

301
src/views/AIchat.vue
View File

@ -156,6 +156,9 @@ const playAudioSequence = (audioUrls) => {
audioStore.isPlaying = false;
audioStore.isPaused = false;
audioStore.playbackPosition = 0;
// 清除音频实例，确保下次点击从头开始
audioStore.soundInstance = null;
audioStore.nowSound = null;
if (audioSequence.length > 0) {
audioStore.setCurrentAudioUrl(audioSequence[0]);
}
@ -230,22 +233,33 @@ const playAudioSequence = (audioUrls) => {
// 重写togglePlayPause方法以支持音频序列控制
const originalTogglePlayPause = audioStore.togglePlayPause;
audioStore.togglePlayPause = () => {
console.log('音频控制按钮被点击');
console.log('当前播放状态:', audioStore.isPlaying);
console.log('当前暂停状态:', audioStore.isPaused);
console.log('当前音频实例:', audioStore.soundInstance);
console.log('当前索引:', currentIndex, '音频序列长度:', audioSequence.length);
if (audioStore.soundInstance) {
if (audioStore.isPlaying) {
// 暂停当前音频
console.log('暂停当前音频');
audioStore.pause();
} else if (audioStore.isPaused) {
// 从暂停位置继续播放
console.log('从暂停位置继续播放');
audioStore.play();
} else {
// 重新开始播放当前音频或从头开始播放序列
console.log('重新开始播放，当前索引:', currentIndex);
if (currentIndex >= audioSequence.length) {
console.log('所有音频已播放完成，从头开始');
currentIndex = 0; // 重置到第一个音频
}
playNext();
}
} else {
// 没有音频实例时，从头开始播放
console.log('没有音频实例，从头开始播放');
currentIndex = 0;
playNext();
}
@ -467,7 +481,7 @@ const processTypingQueue = async () => {
};
// 添加打字机任务到队列
const addTypingTask = (message, content, speed = 50) => {
const addTypingTask = (message, content, speed) => {
typingQueue.value.push({ message, content, speed });
processTypingQueue();
};
@ -620,13 +634,179 @@ watch(
four: { completed: false, result: null, error: null },
};
// 音频预加载状态跟踪
const audioPreloadStatus = {
one: { loaded: false, url: null },
two: { loaded: false, url: null },
three: { loaded: false, url: null },
four: { loaded: false, url: null }
};
// 音频播放队列管理
const audioQueue = ref([]);
const isPlayingAudio = ref(false);
// 播放音频队列
const playNextAudio = () => {
if (audioQueue.value.length === 0 || isPlayingAudio.value) {
return;
}
isPlayingAudio.value = true;
const audioInfo = audioQueue.value.shift();
console.log(`开始播放${audioInfo.name}音频`);
if (audioStore.nowSound) {
audioStore.nowSound.stop();
}
const audio = new Howl({
src: [audioInfo.url],
html5: true,
format: ["mp3", "acc"],
rate: 1.2,
onplay: () => {
audioStore.isPlaying = true;
audioStore.isPaused = false;
console.log(`${audioInfo.name}音频开始播放`);
},
onpause: () => {
audioStore.isPlaying = false;
audioStore.isPaused = true;
audioStore.playbackPosition = audio.seek() || 0;
console.log(`${audioInfo.name}音频已暂停，位置:`, audioStore.playbackPosition);
},
onresume: () => {
audioStore.isPlaying = true;
audioStore.isPaused = false;
console.log(`${audioInfo.name}音频继续播放`);
},
onend: () => {
audioStore.isPlaying = false;
audioStore.isPaused = false;
audioStore.playbackPosition = 0;
isPlayingAudio.value = false;
console.log(`${audioInfo.name}音频播放完成`);
// 播放下一个音频
setTimeout(() => {
playNextAudio();
}, 100);
},
onstop: () => {
audioStore.isPlaying = false;
audioStore.isPaused = false;
audioStore.playbackPosition = 0;
isPlayingAudio.value = false;
console.log(`${audioInfo.name}音频已停止`);
},
onloaderror: (id, err) => {
console.error(`${audioInfo.name}音频播放失败:`, err);
isPlayingAudio.value = false;
// 播放下一个音频
setTimeout(() => {
playNextAudio();
}, 100);
}
});
// 设置当前音频URL到store
audioStore.setCurrentAudioUrl(audioInfo.url);
audioStore.nowSound = audio;
audioStore.setAudioInstance(audio);
audio.play();
};
// 添加音频到播放队列
const addToAudioQueue = (url, name) => {
if (url && audioStore.isVoiceEnabled) {
audioQueue.value.push({ url, name });
console.log(`音频${name}已添加到播放队列`);
// 如果当前没有播放音频，立即开始播放
if (!isPlayingAudio.value) {
playNextAudio();
}
}
};
// 重写audioStore的togglePlayPause方法以支持队列播放控制
const originalTogglePlayPause = audioStore.togglePlayPause;
audioStore.togglePlayPause = () => {
console.log('主页音频控制按钮被点击');
console.log('当前音频状态 - isPlaying:', audioStore.isPlaying, 'isPaused:', audioStore.isPaused);
console.log('当前音频实例:', audioStore.soundInstance);
if (audioStore.soundInstance) {
if (audioStore.isPlaying) {
// 暂停当前音频
console.log('暂停当前音频');
audioStore.soundInstance.pause();
} else if (audioStore.isPaused && audioStore.playbackPosition > 0) {
// 从暂停位置继续播放
console.log('从暂停位置继续播放音频，位置:', audioStore.playbackPosition);
audioStore.soundInstance.seek(audioStore.playbackPosition);
audioStore.soundInstance.play();
} else {
// 重新开始播放
console.log('重新开始播放音频');
audioStore.soundInstance.play();
}
} else {
console.log('没有音频实例，尝试播放队列中的音频');
// 没有音频实例时，尝试播放队列中的音频
if (!isPlayingAudio.value && audioQueue.value.length > 0) {
playNextAudio();
}
}
};
// 预加载音频函数
const preloadAudio = (url, apiKey) => {
if (!url || !audioStore.isVoiceEnabled) {
audioPreloadStatus[apiKey].loaded = true;
return Promise.resolve();
}
return new Promise((resolve) => {
const audio = new Howl({
src: [url],
html5: true,
format: ["mp3", "acc"],
rate: 1.2,
preload: true,
onload: () => {
console.log(`音频${apiKey}预加载完成:`, url);
audioPreloadStatus[apiKey].loaded = true;
audioPreloadStatus[apiKey].url = url;
resolve();
},
onloaderror: (id, err) => {
console.error(`音频${apiKey}预加载失败:`, err);
audioPreloadStatus[apiKey].loaded = true; // 标记为已处理，避免阻塞
resolve();
}
});
});
};
// 检查第一个接口是否可以开始输出（文本和音频都准备好）
const canStartFirstOutput = () => {
return apiStatus.one.completed && audioPreloadStatus.one.loaded;
};
// 检查并按顺序执行代码的函数
const checkAndExecuteInOrder = () => {
// 检查OneAPI
if (apiStatus.one.completed && !apiStatus.one.executed) {
// 检查OneAPI - 只有当文本和音频都准备好时才开始输出
if (canStartFirstOutput() && !apiStatus.one.executed) {
apiStatus.one.executed = true;
if (apiStatus.one.result) {
console.log("执行OneAPI代码:", apiStatus.one.result);
console.log("执行OneAPI代码（文本和音频同步开始）:", apiStatus.one.result);
// 将第一个音频添加到播放队列
if (audioPreloadStatus.one.url) {
addToAudioQueue(audioPreloadStatus.one.url, "第一个");
}
// 在这里添加OneAPI成功后需要执行的代码
// 删除正在为您生成信息
chatStore.messages.pop();
@ -690,7 +870,7 @@ watch(
// }
// }, 50); // 调整速度为50ms/字符
addTypingTask(aiMessage1, ["", ac1], 50);
addTypingTask(aiMessage1, ["", ac1], 130);
// chatStore.messages.push({
// sender: "ai",
@ -866,6 +1046,12 @@ watch(
apiStatus.two.executed = true;
if (apiStatus.two.result) {
console.log("执行TwoAPI代码:", apiStatus.two.result);
// 将第二个音频添加到播放队列
if (audioPreloadStatus.two.url) {
addToAudioQueue(audioPreloadStatus.two.url, "第二个");
}
// 在这里添加TwoAPI成功后需要执行的代码
// 添加标题2
addTypingTask(
@ -918,7 +1104,7 @@ watch(
// aiMessage2.isTyping = false;
// }
// }, 50); // 调整速度为50ms/字符
addTypingTask(aiMessage2, ["", ac2], 50);
addTypingTask(aiMessage2, ["", ac2], 130);
// chatStore.messages.push({
// sender: "ai",
@ -938,6 +1124,12 @@ watch(
apiStatus.three.executed = true;
if (apiStatus.three.result) {
console.log("执行ThreeAPI代码:", apiStatus.three.result);
// 将第三个音频添加到播放队列
if (audioPreloadStatus.three.url) {
addToAudioQueue(audioPreloadStatus.three.url, "第三个");
}
// 在这里添加ThreeAPI成功后需要执行的代码
// 添加标题3-2
addTypingTask(
@ -994,7 +1186,7 @@ watch(
// }
// }, 50); // 调整速度为50ms/字符
addTypingTask(aiMessage3, [ac31, ac32], 50);
addTypingTask(aiMessage3, [ac31, ac32], 180);
// chatStore.messages.push({
// sender: "ai",
@ -1075,7 +1267,7 @@ watch(
addTypingTask(
aiMessage4,
[ac41, ac42, ac43, ac44, ac45, ac46, ac47, ac48],
50
180
);
// chatStore.messages.push({
@ -1096,6 +1288,12 @@ watch(
apiStatus.four.executed = true;
if (apiStatus.four.result) {
console.log("执行FourAPI代码:", apiStatus.four.result);
// 将第四个音频添加到播放队列
if (audioPreloadStatus.four.url) {
addToAudioQueue(audioPreloadStatus.four.url, "第四个");
}
// 在这里添加FourAPI成功后需要执行的代码
// 添加标题3-4
addTypingTask(
@ -1153,7 +1351,7 @@ watch(
// }
// }, 50); // 调整速度为50ms/字符
addTypingTask(aiMessage5, [ac51, ac52, ac53, ac54], 50);
addTypingTask(aiMessage5, [ac51, ac52, ac53, ac54], 180);
// chatStore.messages.push({
// sender: "ai",
@ -1184,7 +1382,7 @@ watch(
// }
// }, 50); // 调整速度为50ms/字符
addTypingTask(aiMessage6, ["", ac6], 100);
addTypingTask(aiMessage6, ["", ac6], 180);
// chatStore.messages.push({
// sender: "ai",
@ -1203,47 +1401,34 @@ watch(
apiStatus.four.completed &&
apiStatus.four.executed
) {
console.log("所有API已完成，开始收集音频URL");
// 收集所有音频URL
console.log("所有API已完成，开始收集预加载的音频URL");
// 收集所有预加载的音频URL
const audioUrls = [];
console.log("API返回结果检查:");
console.log("result21:", result21);
console.log("result22:", result22);
console.log("result23:", result23);
console.log("result24:", result24);
console.log("预加载音频状态检查:");
console.log("audioPreloadStatus:", audioPreloadStatus);
if (result21?.data?.url) {
console.log("添加result21音频URL:", result21.data.url);
audioUrls.push(result21.data.url.trim());
if (audioPreloadStatus.one.url) {
console.log("添加预加载音频URL one:", audioPreloadStatus.one.url);
audioUrls.push(audioPreloadStatus.one.url);
}
if (result22?.data?.url) {
console.log("添加result22音频URL:", result22.data.url);
audioUrls.push(result22.data.url.trim());
if (audioPreloadStatus.two.url) {
console.log("添加预加载音频URL two:", audioPreloadStatus.two.url);
audioUrls.push(audioPreloadStatus.two.url);
}
if (result23?.data?.url) {
console.log("添加result23音频URL:", result23.data.url);
audioUrls.push(result23.data.url.trim());
if (audioPreloadStatus.three.url) {
console.log("添加预加载音频URL three:", audioPreloadStatus.three.url);
audioUrls.push(audioPreloadStatus.three.url);
}
if (result24?.data?.url) {
console.log("添加result24音频URL:", result24.data.url);
audioUrls.push(result24.data.url.trim());
if (audioPreloadStatus.four.url) {
console.log("添加预加载音频URL four:", audioPreloadStatus.four.url);
audioUrls.push(audioPreloadStatus.four.url);
}
console.log("收集到的音频URLs:", audioUrls);
console.log("收集到的预加载音频URLs:", audioUrls);
console.log("语音是否启用:", audioStore.isVoiceEnabled);
// 开始轮流播放音频
if (audioUrls.length > 0 && audioStore.isVoiceEnabled) {
console.log("开始播放音频序列");
playAudioSequence(audioUrls);
} else {
console.log(
"跳过音频播放 - audioUrls长度:",
audioUrls.length,
"语音启用状态:",
audioStore.isVoiceEnabled
);
}
// 音频播放逻辑已移至各个接口的执行代码中
console.log("所有接口执行完成，音频已在各接口中单独播放");
}
};
@ -1255,12 +1440,20 @@ watch(
apiStatus.one.completed = true;
apiStatus.one.result = result21;
// 预加载第一个接口的音频
if (result21?.data?.url) {
await preloadAudio(result21.data.url.trim(), 'one');
} else {
audioPreloadStatus.one.loaded = true;
}
// 检查是否可以执行
checkAndExecuteInOrder();
} catch (error) {
console.error("OneAPI失败:", error);
apiStatus.one.completed = true;
apiStatus.one.error = error;
audioPreloadStatus.one.loaded = true; // 失败时也标记为已处理
// 即使失败也要检查后续执行
checkAndExecuteInOrder();
}
@ -1274,12 +1467,20 @@ watch(
apiStatus.two.completed = true;
apiStatus.two.result = result22;
// 预加载第二个接口的音频
if (result22?.data?.url) {
await preloadAudio(result22.data.url.trim(), 'two');
} else {
audioPreloadStatus.two.loaded = true;
}
// 检查是否可以执行
checkAndExecuteInOrder();
} catch (error) {
console.error("TwoAPI失败:", error);
apiStatus.two.completed = true;
apiStatus.two.error = error;
audioPreloadStatus.two.loaded = true;
checkAndExecuteInOrder();
}
};
@ -1292,12 +1493,20 @@ watch(
apiStatus.three.completed = true;
apiStatus.three.result = result23;
// 预加载第三个接口的音频
if (result23?.data?.url) {
await preloadAudio(result23.data.url.trim(), 'three');
} else {
audioPreloadStatus.three.loaded = true;
}
// 检查是否可以执行
checkAndExecuteInOrder();
} catch (error) {
console.error("ThreeAPI失败:", error);
apiStatus.three.completed = true;
apiStatus.three.error = error;
audioPreloadStatus.three.loaded = true;
checkAndExecuteInOrder();
}
};
@ -1310,12 +1519,20 @@ watch(
apiStatus.four.completed = true;
apiStatus.four.result = result24;
// 预加载第四个接口的音频
if (result24?.data?.url) {
await preloadAudio(result24.data.url.trim(), 'four');
} else {
audioPreloadStatus.four.loaded = true;
}
// 检查是否可以执行
checkAndExecuteInOrder();
} catch (error) {
console.error("FourAPI失败:", error);
apiStatus.four.completed = true;
apiStatus.four.error = error;
audioPreloadStatus.four.loaded = true;
checkAndExecuteInOrder();
}
};

8
src/views/AiEmotion.vue
View File

@ -20,10 +20,6 @@
</div>
</div>
</div>
<!-- 股票标签页 -->
<StockTabs />
<!-- 加载提示 -->
<div v-if="isLoading" class="loading-container">
<div class="loading-content">
@ -31,6 +27,10 @@
<div class="loading-text">AI小财神正在加载图表数据和音频内容，请稍候...</div>
</div>
</div>
<!-- 股票标签页 -->
<StockTabs />
<!-- 渲染整个页面 -->
<div v-if="isPageLoaded" class="class01">

Write Preview
Loading…
Cancel
Save