feat: 语音输入交互完善

pages/chat/ChatInputArea.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="input-area-wrapper">
-    <view class="area-input">
+    <view v-if="!visibleWaveBtn" class="area-input">
       <!-- 语音/键盘切换 -->
       <view class="input-container-voice" @click="toggleVoiceMode">
         <image v-if="!isVoiceMode" src="/static/input_voice_icon.png"></image>
@@ -11,6 +11,7 @@
       <view class="input-button-container">
         <textarea
           ref="textareaRef"
+          v-if="!isVoiceMode"
           :class="['textarea', ios ? 'ios' : 'android']"
           type="text"
           cursor-spacing="65"
@@ -33,9 +34,11 @@
         <view
           v-if="isVoiceMode"
           class="hold-to-talk-button"
-          @click.stop="startRecording"
+          @longpress="handleVoiceTouchStart"
+          @touchend="handleVoiceTouchEnd"
+          @touchcancel="handleVoiceTouchEnd"
         >
-          按住说话
+          按住 说话
         </view>
       </view>
 
@@ -50,27 +53,17 @@
       </view>
     </view>
 
-    <!-- 使用封装的弹窗组件 -->
-    <RecordingPopup
-      ref="recordingPopupRef"
-      :is-slide-to-text="isSlideToText"
-      @cancel="handleRecordingCancel"
-    />
-
-    <VoiceResultPopup
-      ref="voiceResultPopupRef"
-      :voice-text="voiceText"
-      @cancel="cancelVoice"
-      @sendVoice="handleSendVoice"
-      @sendText="handleSendText"
-    />
+    <!-- 录音按钮 -->
+    <RecordingWaveBtn v-if="visibleWaveBtn" ref="recordingWaveBtnRef" />
   </view>
 </template>
 
 <script setup>
-import { ref, watch, nextTick, onMounted, computed } from "vue";
-import RecordingPopup from "@/components/Speech/RecordingPopup.vue";
-import VoiceResultPopup from "@/components/Speech/VoiceResultPopup.vue";
+import { ref, watch, nextTick, onMounted, computed, defineExpose } from "vue";
+import RecordingWaveBtn from "@/components/Speech/RecordingWaveBtn.vue";
+
+const plugin = requirePlugin("WechatSI");
+const manager = plugin.getRecordRecognitionManager();
 
 const props = defineProps({
   modelValue: String,
@@ -88,19 +81,13 @@ const emit = defineEmits([
 ]);
 
 const textareaRef = ref(null);
+const recordingWaveBtnRef = ref(null);
 const placeholder = ref("快告诉朵朵您在想什么~");
 const inputMessage = ref(props.modelValue || "");
 const isFocused = ref(false);
 const keyboardHeight = ref(0);
 const isVoiceMode = ref(false);
-const isRecording = ref(false);
-const recordingTime = ref(0);
-const recordingTimer = ref(null);
-const voiceText = ref("");
-const showVoiceResult = ref(false);
-const isSlideToText = ref(false);
-const recordingPopupRef = ref(null);
-const voiceResultPopupRef = ref(null);
+const visibleWaveBtn = ref(false);
 
 // 判断当前平台是否为iOS
 const ios = computed(() => {
@@ -128,106 +115,52 @@ const toggleVoiceMode = () => {
   isVoiceMode.value = !isVoiceMode.value;
 };
 
-// 开始录音
-const startRecording = () => {
-  console.log("startRecording");
-  isRecording.value = true;
-  recordingTime.value = 0;
-  // 启动录音计时器
-  recordingTimer.value = setInterval(() => {
-    recordingTime.value += 1;
-  }, 1000);
+// 处理语音按钮长按开始
+const handleVoiceTouchStart = () => {
+  manager.start({ lang: "zh_CN" });
 
-  // 打开录音弹窗
-  if (recordingPopupRef.value) {
-    recordingPopupRef.value.open();
-  }
+  visibleWaveBtn.value = true;
 
-  // 调用uni-app录音API
-  uni.startRecord({
-    success: (res) => {
-      // 录音成功，处理录音文件
-      const tempFilePath = res.tempFilePath;
-      // 这里可以添加语音转文字的逻辑
-      // 模拟语音转文字
-      setTimeout(() => {
-        voiceText.value = "这是语音转文字的结果";
-        showVoiceResult.value = true;
-        // 打开语音结果弹窗
-        if (voiceResultPopupRef.value) {
-          voiceResultPopupRef.value.open();
-        }
-      }, 1000);
-    },
-    fail: (err) => {
-      console.error("录音失败:", err);
-      isRecording.value = false;
-      clearInterval(recordingTimer.value);
-      if (recordingPopupRef.value) {
-        recordingPopupRef.value.close();
-      }
-    },
+  // 启动音频条动画
+  nextTick(() => {
+    if (recordingWaveBtnRef.value) {
+      recordingWaveBtnRef.value.startAnimation();
+    }
   });
 };
 
-// 处理录音弹窗取消
-const handleRecordingCancel = () => {
-  isRecording.value = false;
-  clearInterval(recordingTimer.value);
-  uni.stopRecord();
+// 处理语音按钮长按结束
+const handleVoiceTouchEnd = () => {
+  manager.stop();
+
+  // 停止音频条动画
+  if (recordingWaveBtnRef.value) {
+    recordingWaveBtnRef.value.stopAnimation();
+  }
+
+  visibleWaveBtn.value = false;
 };
 
 // 处理发送原语音
-const handleSendVoice = (data) => {
-  // 发送语音逻辑
-  emit("sendVoice", {
-    text: data.text,
-    // 可以添加语音文件路径等信息
-  });
-  showVoiceResult.value = false;
-  isVoiceMode.value = false;
-};
+const initRecord = () => {
+  manager.onRecognize = (res) => {
+    let text = res.result;
+    inputMessage.value = text;
+  };
+  // 识别结束事件
+  manager.onStop = (res) => {
+    console.log(res, 37);
+    let text = res.result;
 
-// 处理发送文本
-const handleSendText = (data) => {
-  // 发送文本逻辑
-  emit("sendVoice", {
-    text: data.text,
-    // 可以添加语音文件路径等信息
-  });
-  showVoiceResult.value = false;
-  isVoiceMode.value = false;
-};
-
-// 取消语音
-const cancelVoice = () => {
-  showVoiceResult.value = false;
-  isVoiceMode.value = false;
-};
-
-// 测试弹窗方法
-const testPopup = () => {
-  // 模拟开始录音，打开录音弹窗
-  isRecording.value = true;
-  console.log("===========1");
-
-  if (recordingPopupRef.value) {
-    console.log("===========2");
-
-    recordingPopupRef.value.open();
-  }
-
-  // 2秒后关闭录音弹窗，打开语音结果弹窗
-  setTimeout(() => {
-    if (recordingPopupRef.value) {
-      recordingPopupRef.value.close();
+    if (text == "") {
+      console.log("没有说话");
+      return;
     }
-    voiceText.value = "测试语音转文字结果";
-    showVoiceResult.value = true;
-    if (voiceResultPopupRef.value) {
-      voiceResultPopupRef.value.open();
-    }
-  }, 3000);
+
+    inputMessage.value = text;
+    // 在语音识别完成后发送消息
+    emit("send", text);
+  };
 };
 
 // 监听键盘高度变化
@@ -235,20 +168,17 @@ onMounted(() => {
   // 监听键盘弹起
   uni.onKeyboardHeightChange((res) => {
     keyboardHeight.value = res.height;
-    if (res.height > 0) {
+    if (res.height) {
       emit("keyboardShow", res.height);
     } else {
       emit("keyboardHide");
     }
   });
+
+  initRecord();
 });
 
 const sendMessage = () => {
-  if (isVoiceMode.value) {
-    testPopup();
-    return;
-  }
-
   if (props.isSessionActive) {
     // 如果会话进行中，调用停止请求函数
     if (props.stopRequest) {
@@ -300,18 +230,13 @@ const blurInput = () => {
 };
 
 // 暴露方法给父组件
-defineExpose({
-  focusInput,
-  blurInput,
-  isFocused,
-  toggleVoiceMode,
-});
+defineExpose({ focusInput });
 </script>
 
 <style scoped lang="scss">
 .area-input {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   border-radius: 22px;
   background-color: #ffffff;
   box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
@@ -338,13 +263,16 @@ defineExpose({
 
   .hold-to-talk-button {
     width: 100%;
-    height: 100%;
+    height: 44px;
     color: #333333;
     font-size: 16px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #ffffff;
+    transition: all 0.2s ease;
+    user-select: none;
+    -webkit-user-select: none;
   }
 
   .input-container-send {
@@ -378,11 +306,11 @@ defineExpose({
     line-height: normal;
 
     &.android {
-      padding: 11px 0;
+      padding: 12px 0;
     }
 
     &.ios {
-      padding: 4px 0;
+      padding: 6px 0;
     }
 
     &::placeholder {

pages/index/index.vue

@@ -1,14 +1,11 @@
 <template>
-  
   <view class="container">
-	  <ChatMainList/>
+    <ChatMainList />
   </view>
-  
 </template>
 
 <script setup>
 import ChatMainList from "../chat/ChatMainList.vue";
-
 </script>
 
 <style lang="scss" scoped>