Feat(AI):TTS功能实现

aiChat/views/index.vue

@@ -32,6 +32,10 @@
       }"
       class="fix-tabbar-body"
     >
+      <!-- <button @click="ttsHandle({
+        content: '是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项。临床试验统计分析结果生成系统是服务于医学研究的数据处理平台。系统聚焦临床试验数据，可对患者入组信息、疗效指标、安全性数据等进行标准化统计分析，自动生成包含描述性统计、假设检验、生存分析等内容的结果报告。支持可视化图表输出，如疗效对比柱状图、不良事件分布饼图等，直观呈现数据特征。具备灵活的参数配置功能，可适配不同试验设计与分析需求，助力研究者高效完成数据解读，为药物研发、临床研究结论输出提供精准的统计支持。',
+        conversationId: '123'
+      })">播放</button> -->
       <block v-if="chatMessageListLength < 1">
         <view class="home-focus-wrap">
           <view class="focus-guide-wrap">
@@ -234,15 +238,18 @@
                       重新生成
                     </view>
                     <view
+                      :class="{
+                        'playing': audioPlayId === item.conversationId && isPlayAudio
+                      }"
                       class="item"
                       @click="ttsHandle(item)"
                     >
                       <image
-                        :src="webUrl + '/aiChat/icon-04.png'"
+                        :src="webUrl + '/aiChat/' + ((audioPlayId === item.conversationId && isPlayAudio) ? 'audio-on' : 'audio-off') +'.png'"
                         class="icon"
                         mode="widthFix"
                       />
-                      播放
+                      语音播放
                     </view>
                     <view class="item item2" @click="copyMoreInfoHandle(item)">拷贝</view>
                   </view>