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

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>