From 5292ede3c574338c55154c4395e60f67e7ca0716 Mon Sep 17 00:00:00 2001
From: zoujing <zoujing@gogpay.cn>
Date: Wed, 6 Aug 2025 16:04:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BE=93=E5=85=A5=E6=A1=86=E7=9A=84?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/chat/ChatInputArea.vue   | 332 +++++++++++++++++++++++++++++----
 static/input_keyboard_icon.png | Bin 0 -> 1696 bytes
 2 files changed, 300 insertions(+), 32 deletions(-)
 create mode 100644 static/input_keyboard_icon.png

diff --git a/pages/chat/ChatInputArea.vue b/pages/chat/ChatInputArea.vue
index d111f49..74932fe 100644
--- a/pages/chat/ChatInputArea.vue
+++ b/pages/chat/ChatInputArea.vue
@@ -1,35 +1,84 @@
 <template>
   <view class="area-input">
-    <!-- 发送语音 -->
-    <view class="input-container-voice">
-      <image src='/static/input_voice_icon.png'></image>
+    <!-- 语音/键盘切换 -->
+    <view class="input-container-voice" @click="toggleVoiceMode">
+      <image v-if="!isVoiceMode" src='/static/input_voice_icon.png'></image>
+      <image v-else src='/static/input_keyboard_icon.png'></image>
     </view>
-    <!-- 输入框 -->
-    <textarea
-      ref="textareaRef"
-      class="textarea"
-      type="text"
-      :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 class="input-container-send" @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 class="input-button-container">
+      <textarea
+          ref="textareaRef"
+          class="textarea"
+          type="text"
+          :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
+          v-if="isVoiceMode"
+          class="hold-to-talk-button"
+          @touchstart.stop="startRecording"
+          @touchend.stop="stopRecording"
+          @touchmove.stop="handleTouchMove"
+        >
+          按住说话
+        </view>
     </view>
+
+    <view class="input-container-send">
+      <view v-if="!isVoiceMode" 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>
+    </view>
+
   </view>
+
+  <!-- 录音界面 -->
+  <uni-popup v-model:show="isRecording" position="center" :mask-click-able="false">
+    <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>
+
+
+  <!-- 语音结果界面 -->
+  <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>
@@ -41,13 +90,20 @@ const props = defineProps({
   isSessionActive: Boolean,
   stopRequest: Function
 })
-const emit = defineEmits(['update:inputMessage', 'send', 'noHideKeyboard', 'keyboardShow', 'keyboardHide'])
+const emit = defineEmits(['update:inputMessage', 'send', 'noHideKeyboard', 'keyboardShow', 'keyboardHide', 'sendVoice'])
 
 const textareaRef = ref(null)
 const placeholder = ref('快告诉朵朵您在想什么~')
 const inputMessage = ref(props.inputMessage || '')
 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)
 
 
 // 保持和父组件同步
@@ -55,6 +111,85 @@ watch(() => props.inputMessage, (val) => {
   inputMessage.value = val
 })
 
+// 切换语音/文本模式
+const toggleVoiceMode = () => {
+  isVoiceMode.value = !isVoiceMode.value
+}
+
+// 开始录音
+const startRecording = () => {
+  isRecording.value = true
+
+  return
+  recordingTime.value = 0
+  // 启动录音计时器
+  recordingTimer.value = setInterval(() => {
+    recordingTime.value += 1
+  }, 1000)
+
+  // 调用uni-app录音API
+  uni.startRecord({
+    success: (res) => {
+      // 录音成功，处理录音文件
+      const tempFilePath = res.tempFilePath
+      // 这里可以添加语音转文字的逻辑
+      // 模拟语音转文字
+      setTimeout(() => {
+        voiceText.value = '这是语音转文字的结果'
+        showVoiceResult.value = true
+      }, 1000)
+    },
+    fail: (err) => {
+      console.error('录音失败:', err)
+      isRecording.value = false
+      clearInterval(recordingTimer.value)
+    }
+  })
+}
+
+// 结束录音
+const stopRecording = () => {
+  isRecording.value = false
+
+  return
+  clearInterval(recordingTimer.value)
+
+  // 如果录音时间小于1秒，取消录音
+  if (recordingTime.value < 1) {
+    uni.stopRecord()
+    return
+  }
+
+  // 停止录音
+  uni.stopRecord()
+}
+
+// 处理滑动事件
+const handleTouchMove = (e) => {
+  // 检测滑动位置，判断是否需要转文字
+  // 这里只是示例逻辑，需要根据实际UI调整
+  const touchY = e.touches[0].clientY
+  // 假设滑动到某个位置以下转为文字
+  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
+}
+
 // 监听键盘高度变化
 onMounted(() => {
   // 监听键盘弹起
@@ -123,7 +258,8 @@ const blurInput = () => {
 defineExpose({
   focusInput,
   blurInput,
-  isFocused
+  isFocused,
+  toggleVoiceMode
 })
 
 </script>
@@ -147,6 +283,7 @@ defineExpose({
 			height: 44px;
 			flex-shrink: 0;
 			align-self: flex-end;
+			cursor: pointer;
 
 			image {
 				width: 22px;
@@ -154,6 +291,26 @@ defineExpose({
 			}
 		}
 
+		.input-button-container {
+			flex: 1;
+			position: relative;
+			height: 44px;
+		}
+
+		.hold-to-talk-button {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			color: #333333;
+			font-size: 16px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			background-color: #FFFFFF;
+		}
+
 		.input-container-send {
 			display: flex;
 			align-items: center;
@@ -163,6 +320,14 @@ defineExpose({
 			flex-shrink: 0;
 			align-self: flex-end;
 
+      .input-container-send-btn {
+        display: flex;
+				align-items: center;
+				justify-content: center;
+        width: 100%;
+        height: 100%;
+      }
+
 			image {
 				width: 28px;
 				height: 28px;
@@ -170,13 +335,116 @@ defineExpose({
 		}
 
 		.textarea {
-			flex: 1;
+      flex: 1;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
 			max-height: 92px;
-			min-height: 22px;
+			min-height: 44px;
 			font-size: 16px;
 			line-height: 22px;
-			margin-bottom: 2px;
+      padding: 3px 0 0;
 			align-items: center;
+      justify-content: center;
+		}
+
+		/* 确保textarea在iOS上的样式正常 */
+		.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>
diff --git a/static/input_keyboard_icon.png b/static/input_keyboard_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..e95d006d8ff94294646521ea336ebae63e7e55c0
GIT binary patch
literal 1696
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

literal 0
HcmV?d00001