feat: 语音样式调整

components/Speech/RecordingPopup.vue

@@ -2,6 +2,7 @@
   <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>

components/Speech/VoiceResultPopup.vue

@@ -1,12 +1,11 @@
 <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}">
+  <uni-popup position="center" :mask-click-able="false" ref="popupRef" type="center" :safe-area="false" :custom-style="{ width: '100%', maxWidth: '100vw', borderRadius: 0, position: 'fixed', top: '0', left: '0', zIndex: 9999 }">
     <view class="voice-result-popup">
       <view class="voice-result-bubble">
-        {{ voiceText }}
+        <textarea v-model="editedVoiceText" class="editable-textarea" placeholder="语音转换结果"></textarea>
       </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>
@@ -14,15 +13,23 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   voiceText: String
 })
 
-const emit = defineEmits(['cancel', 'sendVoice', 'sendText'])
+const emit = defineEmits(['cancel', 'sendText'])
 
 const popupRef = ref(null)
+const editedVoiceText = ref(props.voiceText || '')
+
+// 监听props变化，更新编辑框内容
+watch(() => props.voiceText,
+  (newValue) => {
+    editedVoiceText.value = newValue || ''
+  }
+)
 
 // 打开弹窗
 const open = () => {
@@ -44,15 +51,9 @@ const handleCancel = () => {
   close()
 }
 
-// 处理发送原语音
-const handleSendVoice = () => {
-  emit('sendVoice', { text: props.voiceText })
-  close()
-}
-
 // 处理发送文本
 const handleSendText = () => {
-  emit('sendText', { text: props.voiceText })
+  emit('sendText', { text: editedVoiceText.value })
   close()
 }
 
@@ -67,57 +68,73 @@ defineExpose({
 /* 语音结果弹窗样式 */
 .voice-result-popup {
   width: 100% !important;
-  height: 100vh !important;
-  background-color: white;
-  border-radius: 0;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.7);
   padding: 40px 20px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999;
+  justify-content: flex-end;
+  box-sizing: border-box;
 }
 
 .voice-result-bubble {
-  background-color: #4CD964;
+  background-color: #00A6FF;
   color: white;
-  padding: 25px;
-  border-radius: 18px;
-  border-top-left-radius: 4px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 16px;
+  border-radius: 10px;
   margin-bottom: 40px;
-  min-height: 100px;
-  font-size: 20px;
-  flex: 1;
+  min-height: 120px;
+  max-height: 400px;
+  font-size: 16px;
   overflow-y: auto;
+
+	box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.1);
+	border-radius: 20px 4px 20px 20px;
+	border: 1px solid;
+	border-color: #FFFFFF;
+}
+
+.editable-textarea {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  color: white;
+  font-size: 16px;
+}
+
+.editable-textarea:focus {
+  outline: none;
 }
 
 .voice-result-actions {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
+  gap: 20px;
+  width: 100%;
+  max-width: 600px;
   margin-top: 20px;
-  padding-bottom: 40px;
+  padding-bottom: 20px;
 }
 
 .action-button {
   padding: 12px 24px;
   border-radius: 30px;
   font-size: 18px;
+  min-width: 120px;
+  text-align: center;
 }
 
 .cancel {
-  color: #666666;
-  background-color: #F5F5F5;
-}
-
-.voice {
-  color: #007AFF;
-  background-color: #E8F0FE;
+  color: #F5F5F5;
+  border: 1px solid;
+	border-color: #F5F5F5;
 }
 
 .send {
-  color: white;
-  background-color: #007AFF;
+  color: #333;
+  background-color: #F5F5F5;
 }
+
 </style>

pages/chat/ChatInputArea.vue

@@ -201,7 +201,11 @@ const cancelVoice = () => {
 const testPopup = () => {
   // 模拟开始录音，打开录音弹窗
   isRecording.value = true
+  console.log("===========1")
+
   if (recordingPopupRef.value) {
+      console.log("===========2")
+
     recordingPopupRef.value.open()
   }
 
@@ -215,7 +219,7 @@ const testPopup = () => {
     if (voiceResultPopupRef.value) {
       voiceResultPopupRef.value.open()
     }
-  }, 2000)
+  }, 3000)
 }
 
 

pages/chat/styles/ChatMainList.scss

@@ -88,8 +88,8 @@
 		z-index: 1;
 		transition: padding-bottom 0.3s ease;
 		/* 确保输入区域始终可见 */
-		transform: translateZ(0);
-		-webkit-transform: translateZ(0);
+		// transform: translateZ(0);
+		// -webkit-transform: translateZ(0);
 	}
 	
 	.area-input {