From 5e18a46e3fa0c2a279587224a827be7ab4c3f90d Mon Sep 17 00:00:00 2001
From: JianYu Zheng <2375294554@qq.com>
Date: Wed, 9 Jul 2025 11:48:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=B0=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E5=A3=B0=E7=BA=B9=E9=80=89=E6=8B=A9=E7=9A=84=E6=97=B6?=
 =?UTF-8?q?=E5=80=99=E5=8F=AF=E4=BB=A5=E5=90=AC=E5=8F=96=E9=9F=B3=E9=A2=91?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=20--VoicePrintDialog.vue=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=90=AC=E5=8F=96=E9=9F=B3=E9=A2=91=E7=9A=84=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/VoicePrintDialog.vue       | 57 ++++++++++++++++++-
 1 file changed, 55 insertions(+), 2 deletions(-)

diff --git a/main/manager-web/src/components/VoicePrintDialog.vue b/main/manager-web/src/components/VoicePrintDialog.vue
index a9f861db..b549f6e2 100644
--- a/main/manager-web/src/components/VoicePrintDialog.vue
+++ b/main/manager-web/src/components/VoicePrintDialog.vue
@@ -14,8 +14,13 @@
       <el-form :model="form" :rules="rules" ref="form" label-width="110px" label-position="left" class="param-form">
         <el-form-item label="声纹向量" prop="audioId" class="form-item">
           <el-select v-model="form.audioId" placeholder="请选择一条语言消息" class="custom-select">
-            <el-option v-for="item in valueTypeOptions" :key="item.audioId" :label="item.content"
-              :value="item.audioId" />
+            <el-option v-for="item in valueTypeOptions" :key="item.audioId" :label="item.content" :value="item.audioId">
+              <span style="float: left">{{ item.content }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">
+                <i :class="getAudioIconClass(item.audioId)" @click.stop="playAudio(item.audioId)"
+                  class="audio-icon"></i>
+              </span>
+            </el-option>
           </el-select>
         </el-form-item>
 
@@ -71,6 +76,8 @@ export default {
     return {
       dialogKey: Date.now(),
       saving: false,
+      playingAudioId: null,
+      audioElement: null,
       valueTypeOptions: [
         { audioId: '', content: '' }
       ],
@@ -88,6 +95,45 @@ export default {
     };
   },
   methods: {
+    getAudioIconClass(audioId) {
+      if (this.playingAudioId === audioId) {
+        return 'el-icon-loading';
+      }
+      return 'el-icon-video-play';
+    },
+    playAudio(audioId) {
+      if (this.playingAudioId === audioId) {
+        // 如果正在播放当前音频，则停止播放
+        if (this.audioElement) {
+          this.audioElement.pause();
+          this.audioElement = null;
+        }
+        this.playingAudioId = null;
+        return;
+      }
+
+      // 停止当前正在播放的音频
+      if (this.audioElement) {
+        this.audioElement.pause();
+        this.audioElement = null;
+      }
+
+      // 先获取音频下载ID
+      this.playingAudioId = audioId;
+      api.agent.getAudioId(audioId, (res) => {
+        if (res.data && res.data.data) {
+          // 使用获取到的下载ID播放音频
+          this.audioElement = new Audio(api.getServiceUrl() + `/agent/play/${res.data.data}`);
+
+          this.audioElement.onended = () => {
+            this.playingAudioId = null;
+            this.audioElement = null;
+          };
+
+          this.audioElement.play();
+        }
+      });
+    },
     submit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
@@ -148,6 +194,13 @@ export default {
 </style>
 
 <style scoped lang="scss">
+.audio-icon {
+  font-size: 20px;
+  cursor: pointer;
+  margin: 0 5px;
+  color: #1890ff;
+}
+
 .param-dialog-wrapper {
   .dialog-container {
     padding: 24px 32px;