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>