From a42ed5c3882663b824ea3ade9d958ef197178411 Mon Sep 17 00:00:00 2001
From: Ran_Chen <1908198662@qq.com>
Date: Wed, 9 Apr 2025 11:00:10 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8E=B7=E5=8F=96=E9=9F=B3=E8=89=B2=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E7=9A=84=E6=8E=A5=E5=8F=A3=E5=AE=9E=E7=8E=B0=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96AudioPlayer=E8=AD=A6=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/manager-web/src/apis/api.js              |  5 +-
 main/manager-web/src/apis/module/timbre.js    | 28 ++++++
 .../src/components/AudioPlayer.vue            |  4 +-
 main/manager-web/src/components/TtsModel.vue  | 94 ++++++++++++-------
 main/manager-web/src/views/ModelConfig.vue    | 13 ++-
 5 files changed, 106 insertions(+), 38 deletions(-)
 create mode 100644 main/manager-web/src/apis/module/timbre.js

diff --git a/main/manager-web/src/apis/api.js b/main/manager-web/src/apis/api.js
index c1468791..2b5372dd 100755
--- a/main/manager-web/src/apis/api.js
+++ b/main/manager-web/src/apis/api.js
@@ -4,13 +4,15 @@ import agent from './module/agent.js'
 import device from './module/device.js'
 import model from './module/model.js'
 import user from './module/user.js'
+import timbre from "./module/timbre.js";
 
 /**
  * 接口地址
  * 开发时自动读取使用.env.development文件
  * 编译时自动读取使用.env.production文件
  */
-const DEV_API_SERVICE = process.env.VUE_APP_API_BASE_URL
+// const DEV_API_SERVICE = process.env.VUE_APP_API_BASE_URL
+const DEV_API_SERVICE = 'https://2662r3426b.vicp.fun/xiaozhi'
 
 /**
  * 根据开发环境返回接口url
@@ -29,4 +31,5 @@ export default {
     agent,
     device,
     model,
+    timbre,
 }
diff --git a/main/manager-web/src/apis/module/timbre.js b/main/manager-web/src/apis/module/timbre.js
new file mode 100644
index 00000000..e00198a8
--- /dev/null
+++ b/main/manager-web/src/apis/module/timbre.js
@@ -0,0 +1,28 @@
+// timbre.js
+import { getServiceUrl } from '../api';
+import RequestService from '../httpRequest';
+
+export default {
+  getVoiceList(params, callback) {
+    const queryParams = new URLSearchParams({
+      ttsModelId: params.ttsModelId,
+      page: params.page || 1,
+      limit: params.limit || 10,
+      name: params.name || ''
+    }).toString();
+
+    RequestService.sendRequest()
+      .url(`${getServiceUrl()}/ttsVoice?${queryParams}`)
+      .method('GET')
+      .success((res) => {
+        RequestService.clearRequestTime();
+        callback(res.data || []);
+      })
+      .fail((err) => {
+        console.error('获取音色列表失败:', err);
+        RequestService.reAjaxFun(() => {
+          this.getVoiceList(params, callback);
+        });
+      }).send();
+  },
+}
\ No newline at end of file
diff --git a/main/manager-web/src/components/AudioPlayer.vue b/main/manager-web/src/components/AudioPlayer.vue
index 1af0df87..2e066614 100644
--- a/main/manager-web/src/components/AudioPlayer.vue
+++ b/main/manager-web/src/components/AudioPlayer.vue
@@ -360,8 +360,8 @@ onUnmounted(() => {
   left: -14px;
   width: 30px;
   height: 60px;
-  -webkit-appearance: slider-vertical;
-  writing-mode: bt-lr;
+  writing-mode: vertical-lr;
+  direction: rtl;
   opacity: 0;
   cursor: pointer;
   z-index: 2;
diff --git a/main/manager-web/src/components/TtsModel.vue b/main/manager-web/src/components/TtsModel.vue
index fe31f087..3ca93db0 100644
--- a/main/manager-web/src/components/TtsModel.vue
+++ b/main/manager-web/src/components/TtsModel.vue
@@ -4,7 +4,8 @@
       width="75%"
       @close="handleClose"
       :show-close="false"
-      :append-to-body="true">
+      :append-to-body="true"
+      :close-on-click-modal="true">
     <button class="custom-close-btn" @click="handleClose">
       ×
     </button>
@@ -15,6 +16,7 @@
           @scroll="handleScroll"
       >
         <el-table
+            v-loading="loading"
             :data="filteredTtsModels"
             style="width: 100%;"
             class="data-table"
@@ -46,7 +48,8 @@
           <el-table-column label="试听" align="center" min-width="225" class-name="audio-column">
             <template slot-scope="scope">
               <div class="custom-audio-container">
-                <AudioPlayer :audioUrl="getAudioUrl(scope.row.voiceCode)"/>
+                <AudioPlayer :audioUrl="scope.row.voiceDemo"/>
+<!--                <AudioPlayer :audioUrl="'https://music.163.com/song/media/outer/url?id=5257138.mp3'"/>-->
               </div>
             </template>
           </el-table-column>
@@ -104,6 +107,7 @@
 
 <script>
 import AudioPlayer from './AudioPlayer.vue'
+import Api from "@/apis/api";
 
 export default {
   components: {AudioPlayer},
@@ -111,49 +115,36 @@ export default {
     visible: {
       type: Boolean,
       default: false
+    },
+    ttsModelId: {
+      type: String,
+      required: true
     }
   },
   data() {
     return {
       localVisible: this.visible,
-      activeModel: 'EdgeTTS',
       searchQuery: '',
       editDialogVisible: false,
       editVoiceData: {},
-      ttsModels: [
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: 'AAAA国少', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-        {voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '', selected: false},
-      ],
+      ttsModels: [],
       currentPage: 1,
-      pageSize: 4,
-      total: 20,
+      pageSize: 100,
+      total: 0,
       isDragging: false,
       startY: 0,
       scrollTop: 0,
       selectAll: false,
-      selectedRows: []
+      selectedRows: [],
+      loading: false,
     };
   },
   watch: {
     visible(newVal) {
       this.localVisible = newVal;
       if (newVal) {
+        this.currentPage = 1;
+        this.loadData(); // 对话框显示时加载数据
         this.$nextTick(() => {
           this.updateScrollbar();
         });
@@ -184,15 +175,45 @@ export default {
     window.removeEventListener('mousemove', this.handleDrag);
   },
   methods: {
-    handleClose() {
-      this.localVisible = false;
-      this.$emit('update:visible', false);
-      this.ttsModels.forEach(model => {
-        model.remark = '';
+    loadData() {
+      const params = {
+        ttsModelId: this.ttsModelId,
+        page: this.currentPage,
+        limit: this.pageSize,
+        name: this.searchQuery
+      };
+      Api.timbre.getVoiceList(params, (data) => {
+        console.log(data.data.list);
+        if (data.code === 0) {
+          this.ttsModels = data.data.list.map(item => ({
+            id: item.id || '',
+            voiceCode: item.ttsVoice || '',
+            voiceName: item.name || '未命名音色',
+            languageType: item.languages || '',
+            remark: item.remark || '',
+            voiceDemo: item.voiceDemo || '',
+            selected: false,
+            editing: false
+          }));
+          this.total = data.total;
+        } else {
+          this.$message.error(data.msg || '获取音色列表失败');
+        }
+      }, (err) => {
+        console.error('加载失败:', err);
+        this.$message.error('加载音色数据失败');
       });
     },
-    getAudioUrl(voiceCode) {
-      return `https://music.163.com/song/media/outer/url?id=5257138.mp3`;
+    handleClose() {
+      // 重置状态
+      this.ttsModels = [];
+      this.currentPage = 1;
+      this.total = 0;
+      this.selectAll = false;
+      this.searchQuery = '';
+
+      this.localVisible = false;
+      this.$emit('update:visible', false);
     },
     updateScrollbar() {
       const container = this.$refs.tableContainer;
@@ -224,6 +245,13 @@ export default {
       scrollbarThumb.style.top = `${Math.min(thumbTop, maxTop)}px`;
     },
     handleScroll() {
+      const container = this.$refs.tableContainer;
+      if (container.scrollTop + container.clientHeight >= container.scrollHeight - 50) {
+        if (this.currentPage * this.pageSize < this.total) {
+          this.currentPage++;
+          this.loadData();
+        }
+      }
       this.updateThumbPosition();
     },
     startDrag(e) {
diff --git a/main/manager-web/src/views/ModelConfig.vue b/main/manager-web/src/views/ModelConfig.vue
index 01d149bd..0594740b 100644
--- a/main/manager-web/src/views/ModelConfig.vue
+++ b/main/manager-web/src/views/ModelConfig.vue
@@ -80,7 +80,11 @@
             </el-table-column>
             <el-table-column v-if="activeTab === 'tts'" label="音色管理" align="center">
               <template slot-scope="scope">
-                <el-button type="text" size="mini" @click="ttsDialogVisible = true" class="voice-management-btn">
+                <el-button
+                  type="text"
+                  size="mini"
+                  @click="openTtsDialog(scope.row)"
+                  class="voice-management-btn">
                   音色管理
                 </el-button>
               </template>
@@ -124,7 +128,7 @@
 
       <ModelEditDialog :modelType="activeTab" :visible.sync="editDialogVisible" :modelData="editModelData"
         @save="handleModelSave" />
-      <TtsModel :visible.sync="ttsDialogVisible" />
+        <TtsModel :visible.sync="ttsDialogVisible" :ttsModelId="selectedTtsModelId"/>
       <AddModelDialog :modelType="activeTab" :visible.sync="addDialogVisible" @confirm="handleAddConfirm" />
     </div>
 
@@ -151,6 +155,7 @@ export default {
       editDialogVisible: false,
       editModelData: {},
       ttsDialogVisible: false,
+      selectedTtsModelId: '',
       modelList: [],
       currentPage: 1,
       pageSize: 5,
@@ -200,6 +205,10 @@ export default {
   },
 
   methods: {
+    openTtsDialog(row) {
+      this.selectedTtsModelId = row.id;
+      this.ttsDialogVisible = true;
+    },
     headerCellClassName({ column, columnIndex }) {
       if (columnIndex === 0) {
         return 'custom-selection-header';