feat：修复键盘的问题

pages/chat/ChatInputArea.vue

@@ -6,6 +6,7 @@
     </view>
     <!-- 输入框 -->
     <textarea
+      ref="textareaRef"
       class="textarea"
       type="text"
       :placeholder="placeholder"
@@ -13,11 +14,15 @@
       confirm-type='done'
       v-model="inputMessage"
       @confirm="sendMessage"
-      @touchend="handleNoHideKeyboard"
+      @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">
@@ -27,33 +32,90 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
 
 const props = defineProps({
   inputMessage: String,
   holdKeyboard: Boolean
 })
-const emit = defineEmits(['update:inputMessage', 'send', 'noHideKeyboard'])
+const emit = defineEmits(['update:inputMessage', 'send', 'noHideKeyboard', 'keyboardShow', 'keyboardHide'])
 
+const textareaRef = ref(null)
 const placeholder = ref('快告诉朵朵您在想什么~')
 const inputMessage = ref(props.inputMessage || '')
+const isFocused = ref(false)
+const keyboardHeight = ref(0)
 
 // 保持和父组件同步
 watch(() => props.inputMessage, (val) => {
   inputMessage.value = val
 })
 
+// 监听键盘高度变化
+onMounted(() => {
+  // 监听键盘弹起
+  uni.onKeyboardHeightChange((res) => {
+    keyboardHeight.value = res.height
+    if (res.height > 0) {
+      emit('keyboardShow', res.height)
+    } else {
+      emit('keyboardHide')
+    }
+  })
+})
+
 const sendMessage = () => {
   if (!inputMessage.value.trim()) return;
   emit('send', inputMessage.value)
   inputMessage.value = ''
   emit('update:inputMessage', inputMessage.value)
+  
+  // 发送后保持焦点（可选）
+  if (props.holdKeyboard && textareaRef.value) {
+    nextTick(() => {
+      textareaRef.value.focus()
+    })
+  }
 }
 
-const handleNoHideKeyboard = () => {
+const handleFocus = () => {
+  isFocused.value = true
   emit('noHideKeyboard')
 }
 
+const handleBlur = () => {
+  isFocused.value = false
+}
+
+const handleTouchStart = () => {
+  emit('noHideKeyboard')
+}
+
+const handleTouchEnd = () => {
+  emit('noHideKeyboard')
+}
+
+// 手动聚焦输入框
+const focusInput = () => {
+  if (textareaRef.value) {
+    textareaRef.value.focus()
+  }
+}
+
+// 手动失焦输入框
+const blurInput = () => {
+  if (textareaRef.value) {
+    textareaRef.value.blur()
+  }
+}
+
+// 暴露方法给父组件
+defineExpose({
+  focusInput,
+  blurInput,
+  isFocused
+})
+
 </script>
 
 <style scoped lang="scss">
@@ -64,6 +126,8 @@ const handleNoHideKeyboard = () => {
 		background-color: #FFFFFF;
 		box-shadow: 0px 0px 20px 0px rgba(52,25,204,0.05);
 		margin: 0 12px;
+		/* 确保输入框在安全区域内 */
+		margin-bottom: 8px;
 				
 		.input-container-voice {
 			display: flex;