feat: 语音的弹窗封装到了组件内

components/Speech/RecordingPopup.vue

@@ -0,0 +1,106 @@
+<template>
+  <uni-popup position="center" :mask-click-able="false" ref="popupRef" type="center" :safe-area="false" :custom-style="{width: '100%', height: '100vh', borderRadius: 0, position: 'fixed', top: '0', left: '0', zIndex: 9999}">
+    <view class="recording-popup">
+      <view class="recording-wave">
+        <!-- 波形动画 -->
+        <view class="wave-animation"></view>
+      </view>
+      <view class="recording-text">
+        {{ isSlideToText ? '松开发送 转文字' : '松开发送' }}
+      </view>
+      <view class="recording-cancel" @click="handleCancel">
+        取消
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  isSlideToText: Boolean
+})
+
+const emit = defineEmits(['cancel'])
+
+const popupRef = ref(null)
+
+// 打开弹窗
+const open = () => {
+  if (popupRef.value) {
+    popupRef.value.open()
+  }
+}
+
+// 关闭弹窗
+const close = () => {
+  if (popupRef.value) {
+    popupRef.value.close()
+  }
+}
+
+// 处理取消
+const handleCancel = () => {
+  emit('cancel')
+  close()
+}
+
+// 暴露方法
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style scoped lang="scss">
+/* 录音弹窗样式 */
+.recording-popup {
+  width: 100% !important;
+  height: 100vh !important;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  padding: 40px 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+}
+
+.recording-wave {
+  width: 240px;
+  height: 240px;
+  border-radius: 50%;
+  background-color: rgba(76, 217, 100, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 40px;
+}
+
+.wave-animation {
+  width: 160px;
+  height: 160px;
+  /* 这里可以添加波形动画 */
+  background-image: url('/static/wave_icon.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.recording-text {
+  font-size: 20px;
+  margin-bottom: 40px;
+}
+
+.recording-cancel {
+  font-size: 18px;
+  color: #CCCCCC;
+  margin-top: 20px;
+}
+</style>

components/Speech/VoiceResultPopup.vue

@@ -0,0 +1,123 @@
+<template>
+  <uni-popup position="center" :mask-click-able="false" ref="popupRef" type="center" :safe-area="false" :custom-style="{width: '100%', height: '100vh', borderRadius: 0, position: 'fixed', top: '0', left: '0', zIndex: 9999}">
+    <view class="voice-result-popup">
+      <view class="voice-result-bubble">
+        {{ voiceText }}
+      </view>
+      <view class="voice-result-actions">
+        <view class="action-button cancel" @click="handleCancel">取消</view>
+        <view class="action-button voice" @click="handleSendVoice">发送原语音</view>
+        <view class="action-button send" @click="handleSendText">发送</view>
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  voiceText: String
+})
+
+const emit = defineEmits(['cancel', 'sendVoice', 'sendText'])
+
+const popupRef = ref(null)
+
+// 打开弹窗
+const open = () => {
+  if (popupRef.value) {
+    popupRef.value.open()
+  }
+}
+
+// 关闭弹窗
+const close = () => {
+  if (popupRef.value) {
+    popupRef.value.close()
+  }
+}
+
+// 处理取消
+const handleCancel = () => {
+  emit('cancel')
+  close()
+}
+
+// 处理发送原语音
+const handleSendVoice = () => {
+  emit('sendVoice', { text: props.voiceText })
+  close()
+}
+
+// 处理发送文本
+const handleSendText = () => {
+  emit('sendText', { text: props.voiceText })
+  close()
+}
+
+// 暴露方法
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style scoped lang="scss">
+/* 语音结果弹窗样式 */
+.voice-result-popup {
+  width: 100% !important;
+  height: 100vh !important;
+  background-color: white;
+  border-radius: 0;
+  padding: 40px 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+}
+
+.voice-result-bubble {
+  background-color: #4CD964;
+  color: white;
+  padding: 25px;
+  border-radius: 18px;
+  border-top-left-radius: 4px;
+  margin-bottom: 40px;
+  min-height: 100px;
+  font-size: 20px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.voice-result-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  padding-bottom: 40px;
+}
+
+.action-button {
+  padding: 12px 24px;
+  border-radius: 30px;
+  font-size: 18px;
+}
+
+.cancel {
+  color: #666666;
+  background-color: #F5F5F5;
+}
+
+.voice {
+  color: #007AFF;
+  background-color: #E8F0FE;
+}
+
+.send {
+  color: white;
+  background-color: #007AFF;
+}
+</style>

pages/chat/ChatInputArea.vue

@@ -8,28 +8,12 @@
 
     <!-- 输入框/语音按钮容器 -->
     <view class="input-button-container">
-      <textarea
+      <textarea ref="textareaRef" class="textarea" type="text" :placeholder="placeholder" cursor-spacing="65"
-          ref="textareaRef"
+        confirm-type='done' v-model="inputMessage" @confirm="sendMessage" @focus="handleFocus" @blur="handleBlur"
-          class="textarea"
+        @touchstart="handleTouchStart" @touchend="handleTouchEnd" :confirm-hold="true" auto-height
-          type="text"
+        :show-confirm-bar='false' :hold-keyboard="holdKeyboard" :adjust-position="true" maxlength="300" />
-          :placeholder="placeholder"
-          cursor-spacing="65"
-          confirm-type='done'
-          v-model="inputMessage"
-          @confirm="sendMessage"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          @touchstart="handleTouchStart"
-          @touchend="handleTouchEnd"
-          :confirm-hold="true"
-          auto-height
-          :show-confirm-bar='false'
-          :hold-keyboard="holdKeyboard"
-          :adjust-position="true"
-          maxlength="300"
-        />
 
-      <view
+      <!-- <view
             v-if="isVoiceMode"
             class="hold-to-talk-button"
             @touchstart.stop="startRecording"
@@ -37,11 +21,14 @@
             @touchmove.stop="handleTouchMove"
           >
             按住说话 
+          </view> -->
+      <view v-if="isVoiceMode" class="hold-to-talk-button" @click.stop="startRecording">
+        按住说话
       </view>
     </view>
 
     <view class="input-container-send">
-      <view v-if="!isVoiceMode" class="input-container-send-btn" @click="sendMessage">
+      <view class="input-container-send-btn" @click="sendMessage">
         <image v-if="props.isSessionActive" src='/static/input_stop_icon.png'></image>
         <image v-else src='/static/input_send_icon.png'></image>
       </view>
@@ -49,40 +36,18 @@
 
   </view>
 
-  <!-- 录音界面 -->
+  <!-- 使用封装的弹窗组件 -->
-  <uni-popup v-model:show="isRecording" position="center" :mask-click-able="false">
+  <RecordingPopup ref="recordingPopupRef" :is-slide-to-text="isSlideToText" @cancel="handleRecordingCancel" />
-    <view class="recording-popup">
-      <view class="recording-wave">
-        <!-- 波形动画 -->
-        <view class="wave-animation"></view>
-      </view>
-      <view class="recording-text">
-        {{ isSlideToText ? '松开发送 转文字' : '松开发送' }}
-      </view>
-      <view class="recording-cancel">
-        取消
-      </view>
-    </view>
-  </uni-popup>
 
+  <VoiceResultPopup ref="voiceResultPopupRef" :voice-text="voiceText" @cancel="cancelVoice" @sendVoice="handleSendVoice"
+    @sendText="handleSendText" />
 
-  <!-- 语音结果界面 -->
-  <uni-popup v-model:show="showVoiceResult" position="center" :mask-click-able="false">
-    <view class="voice-result-popup">
-      <view class="voice-result-bubble">
-        {{ voiceText }}
-      </view>
-      <view class="voice-result-actions">
-        <view class="action-button cancel" @click="cancelVoice">取消</view>
-        <view class="action-button voice">发送原语音</view>
-        <view class="action-button send" @click="sendVoiceMessage">发送</view>
-      </view>
-    </view>
-  </uni-popup>
 </template>
 
 <script setup>
-import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import { ref, watch, nextTick, onMounted } from 'vue'
+import RecordingPopup from '@/components/Speech/RecordingPopup.vue'
+import VoiceResultPopup from '@/components/Speech/VoiceResultPopup.vue'
 
 const props = defineProps({
   modelValue: String,
@@ -104,6 +69,8 @@ const recordingTimer = ref(null)
 const voiceText = ref('')
 const showVoiceResult = ref(false)
 const isSlideToText = ref(false)
+const recordingPopupRef = ref(null)
+const voiceResultPopupRef = ref(null)
 
 
 // 保持和父组件同步
@@ -126,15 +93,19 @@ const toggleVoiceMode = () => {
 
 // 开始录音
 const startRecording = () => {
+  console.log('startRecording')
   isRecording.value = true
-
-  return
   recordingTime.value = 0
   // 启动录音计时器
   recordingTimer.value = setInterval(() => {
     recordingTime.value += 1
   }, 1000)
 
+  // 打开录音弹窗
+  if (recordingPopupRef.value) {
+    recordingPopupRef.value.open()
+  }
+
   // 调用uni-app录音API
   uni.startRecord({
     success: (res) => {
@@ -145,23 +116,40 @@ const startRecording = () => {
       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()
+      }
     }
   })
 }
 
+// 处理录音弹窗取消
+const handleRecordingCancel = () => {
+  isRecording.value = false
+  clearInterval(recordingTimer.value)
+  uni.stopRecord()
+}
+
 // 结束录音
 const stopRecording = () => {
   isRecording.value = false
-
-  return
   clearInterval(recordingTimer.value)
 
+  // 关闭录音弹窗
+  if (recordingPopupRef.value) {
+    recordingPopupRef.value.close()
+  }
+
   // 如果录音时间小于1秒，取消录音
   if (recordingTime.value < 1) {
     uni.stopRecord()
@@ -172,6 +160,28 @@ const stopRecording = () => {
   uni.stopRecord()
 }
 
+// 处理发送原语音
+const handleSendVoice = (data) => {
+  // 发送语音逻辑
+  emit('sendVoice', {
+    text: data.text,
+    // 可以添加语音文件路径等信息
+  })
+  showVoiceResult.value = false
+  isVoiceMode.value = false
+}
+
+// 处理发送文本
+const handleSendText = (data) => {
+  // 发送文本逻辑
+  emit('sendVoice', {
+    text: data.text,
+    // 可以添加语音文件路径等信息
+  })
+  showVoiceResult.value = false
+  isVoiceMode.value = false
+}
+
 // 处理滑动事件
 const handleTouchMove = (e) => {
   // 检测滑动位置，判断是否需要转文字
@@ -181,23 +191,35 @@ const handleTouchMove = (e) => {
   isSlideToText.value = touchY < 200
 }
 
-// 发送语音
-const sendVoiceMessage = () => {
-  // 发送语音逻辑
-  emit('sendVoice', {
-    text: voiceText.value,
-    // 可以添加语音文件路径等信息
-  })
-  showVoiceResult.value = false
-  isVoiceMode.value = false
-}
-
 // 取消语音
 const cancelVoice = () => {
   showVoiceResult.value = false
   isVoiceMode.value = false
 }
 
+// 测试弹窗方法
+const testPopup = () => {
+  // 模拟开始录音，打开录音弹窗
+  isRecording.value = true
+  if (recordingPopupRef.value) {
+    recordingPopupRef.value.open()
+  }
+
+  // 2秒后关闭录音弹窗，打开语音结果弹窗
+  setTimeout(() => {
+    if (recordingPopupRef.value) {
+      recordingPopupRef.value.close()
+    }
+    voiceText.value = '测试语音转文字结果'
+    showVoiceResult.value = true
+    if (voiceResultPopupRef.value) {
+      voiceResultPopupRef.value.open()
+    }
+  }, 2000)
+}
+
+
+
 // 监听键盘高度变化
 onMounted(() => {
   // 监听键盘弹起
@@ -212,6 +234,11 @@ onMounted(() => {
 })
 
 const sendMessage = () => {
+  if (isVoiceMode.value) {
+    testPopup()
+    return
+  }
+
   if (props.isSessionActive) {
     // 如果会话进行中，调用停止请求函数
     if (props.stopRequest) {
@@ -273,12 +300,12 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-	.area-input {
+.area-input {
   display: flex;
   align-items: center;
   border-radius: 22px;
   background-color: #FFFFFF;
-		box-shadow: 0px 0px 20px 0px rgba(52,25,204,0.05);
+  box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
   margin: 0 12px;
   /* 确保输入框在安全区域内 */
   margin-bottom: 8px;
@@ -362,97 +389,9 @@ defineExpose({
   .textarea::-webkit-input-placeholder {
     color: #CCCCCC;
   }
+
   .textarea:focus {
     outline: none;
   }
-	}
+}
-
-	/* 录音弹窗样式 */
-	.recording-popup {
-		width: 280px;
-		height: 280px;
-		background-color: rgba(0, 0, 0, 0.7);
-		border-radius: 20px;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		color: white;
-	}
-
-	.recording-wave {
-		width: 160px;
-		height: 160px;
-		border-radius: 50%;
-		background-color: rgba(76, 217, 100, 0.3);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		margin-bottom: 20px;
-	}
-
-	.wave-animation {
-		width: 100px;
-		height: 100px;
-		/* 这里可以添加波形动画 */
-		background-image: url('/static/wave_icon.png');
-		background-size: contain;
-		background-repeat: no-repeat;
-		background-position: center;
-	}
-
-	.recording-text {
-		font-size: 16px;
-		margin-bottom: 20px;
-	}
-
-	.recording-cancel {
-		font-size: 14px;
-		color: #CCCCCC;
-	}
-
-	/* 语音结果弹窗样式 */
-	.voice-result-popup {
-		width: 300px;
-		background-color: white;
-		border-radius: 16px;
-		padding: 20px;
-	}
-
-	.voice-result-bubble {
-		background-color: #4CD964;
-		color: white;
-		padding: 15px;
-		border-radius: 18px;
-		border-top-left-radius: 4px;
-		margin-bottom: 20px;
-		min-height: 60px;
-		font-size: 16px;
-	}
-
-	.voice-result-actions {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.action-button {
-		padding: 8px 16px;
-		border-radius: 20px;
-		font-size: 14px;
-	}
-
-	.cancel {
-		color: #666666;
-		background-color: #F5F5F5;
-	}
-
-	.voice {
-		color: #007AFF;
-		background-color: #E8F0FE;
-	}
-
-	.send {
-		color: white;
-		background-color: #007AFF;
-	}
 </style>