From 6e365fd18704bbf13eb1e29f1b372091f7a49df9 Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Wed, 13 Aug 2025 19:12:29 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E8=BE=93=E5=85=A5=E6=A1=86?=
 =?UTF-8?q?=E7=9A=84=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 | 422 +++++++++++++++++------------------
 1 file changed, 210 insertions(+), 212 deletions(-)

diff --git a/pages/chat/ChatInputArea.vue b/pages/chat/ChatInputArea.vue
index 2bac061..8f325e2 100644
--- a/pages/chat/ChatInputArea.vue
+++ b/pages/chat/ChatInputArea.vue
@@ -1,62 +1,65 @@
 <template>
-  <view class="input-area-wrapper">
-    <view v-if="!visibleWaveBtn" class="area-input">
-      <!-- 语音/键盘切换 -->
-      <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>
+    <view class="input-area-wrapper">
+        <view v-if="!visibleWaveBtn" class="area-input">
+            <!-- 语音/键盘切换 -->
+            <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>
 
-      <!-- 输入框/语音按钮容器 -->
-      <view class="input-button-container">
-        <textarea
-          ref="textareaRef"
-          v-if="!isVoiceMode"
-          :class="['textarea', ios ? 'ios' : 'android']"
-          type="text"
-          cursor-spacing="65"
-          confirm-type="send"
-          v-model="inputMessage"
-          auto-height
-          :confirm-hold="true"
-          :placeholder="placeholder"
-          :show-confirm-bar="false"
-          :hold-keyboard="holdKeyboard"
-          :adjust-position="true"
-          :disable-default-padding="true"
-          maxlength="300"
-          @confirm="sendMessage"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          @touchstart="handleTouchStart"
-          @touchend="handleTouchEnd"
-        />
+            <!-- 输入框/语音按钮容器 -->
+            <view class="input-button-container">
+                <textarea
+                    ref="textareaRef"
+                    v-if="!isVoiceMode"
+                    :class="['textarea', ios ? 'ios' : 'android']"
+                    type="text"
+                    cursor-spacing="65"
+                    confirm-type="send"
+                    v-model="inputMessage"
+                    auto-height
+                    :confirm-hold="true"
+                    :placeholder="placeholder"
+                    :show-confirm-bar="false"
+                    :hold-keyboard="holdKeyboard"
+                    :adjust-position="true"
+                    :disable-default-padding="true"
+                    maxlength="300"
+                    @confirm="sendMessage"
+                    @focus="handleFocus"
+                    @blur="handleBlur"
+                    @touchstart="handleTouchStart"
+                    @touchend="handleTouchEnd"
+                />
 
-        <view
-          v-if="isVoiceMode"
-          class="hold-to-talk-button"
-          @longpress="handleVoiceTouchStart"
-          @touchend="handleVoiceTouchEnd"
-          @touchcancel="handleVoiceTouchEnd"
-        >
-          按住 说话
+                <view
+                    v-if="isVoiceMode"
+                    class="hold-to-talk-button"
+                    @longpress="handleVoiceTouchStart"
+                    @touchend="handleVoiceTouchEnd"
+                    @touchcancel="handleVoiceTouchEnd"
+                >
+                    按住 说话
+                </view>
+            </view>
+
+            <view class="input-container-send">
+                <view 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>
-      </view>
 
-      <view class="input-container-send">
-        <view 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>
+        <!-- 录音按钮 -->
+        <RecordingWaveBtn v-if="visibleWaveBtn" ref="recordingWaveBtnRef" />
     </view>
-
-    <!-- 录音按钮 -->
-    <RecordingWaveBtn v-if="visibleWaveBtn" ref="recordingWaveBtnRef" />
-  </view>
 </template>
 
 <script setup>
@@ -67,18 +70,18 @@ const plugin = requirePlugin("WechatSI");
 const manager = plugin.getRecordRecognitionManager();
 
 const props = defineProps({
-  modelValue: String,
-  holdKeyboard: Boolean,
-  isSessionActive: Boolean,
-  stopRequest: Function,
+    modelValue: String,
+    holdKeyboard: Boolean,
+    isSessionActive: Boolean,
+    stopRequest: Function,
 });
 const emit = defineEmits([
-  "update:modelValue",
-  "send",
-  "noHideKeyboard",
-  "keyboardShow",
-  "keyboardHide",
-  "sendVoice",
+    "update:modelValue",
+    "send",
+    "noHideKeyboard",
+    "keyboardShow",
+    "keyboardHide",
+    "sendVoice",
 ]);
 
 const textareaRef = ref(null);
@@ -92,142 +95,142 @@ const visibleWaveBtn = ref(false);
 
 // 判断当前平台是否为iOS
 const ios = computed(() => {
-  return uni.getSystemInfoSync().platform === "ios";
+    return uni.getSystemInfoSync().platform === "ios";
 });
 
 // 保持和父组件同步
 watch(
-  () => props.modelValue,
-  (val) => {
-    inputMessage.value = val;
-  }
+    () => props.modelValue,
+    (val) => {
+        inputMessage.value = val;
+    }
 );
 
 // 当子组件的 inputMessage 变化时，通知父组件（但要避免循环更新）
 watch(inputMessage, (val) => {
-  // 只有当值真正不同时才emit，避免循环更新
-  if (val !== props.modelValue) {
-    emit("update:modelValue", val);
-  }
+    // 只有当值真正不同时才emit，避免循环更新
+    if (val !== props.modelValue) {
+        emit("update:modelValue", val);
+    }
 });
 
 // 切换语音/文本模式
 const toggleVoiceMode = () => {
-  isVoiceMode.value = !isVoiceMode.value;
+    isVoiceMode.value = !isVoiceMode.value;
 };
 
 // 处理语音按钮长按开始
 const handleVoiceTouchStart = () => {
-  manager.start({ lang: "zh_CN" });
+    manager.start({ lang: "zh_CN" });
 
-  visibleWaveBtn.value = true;
+    visibleWaveBtn.value = true;
 
-  // 启动音频条动画
-  nextTick(() => {
-    if (recordingWaveBtnRef.value) {
-      recordingWaveBtnRef.value.startAnimation();
-    }
-  });
+    // 启动音频条动画
+    nextTick(() => {
+        if (recordingWaveBtnRef.value) {
+            recordingWaveBtnRef.value.startAnimation();
+        }
+    });
 };
 
 // 处理语音按钮长按结束
 const handleVoiceTouchEnd = () => {
-  manager.stop();
+    manager.stop();
 
-  // 停止音频条动画
-  if (recordingWaveBtnRef.value) {
-    recordingWaveBtnRef.value.stopAnimation();
-  }
+    // 停止音频条动画
+    if (recordingWaveBtnRef.value) {
+        recordingWaveBtnRef.value.stopAnimation();
+    }
 
-  visibleWaveBtn.value = false;
+    visibleWaveBtn.value = false;
 };
 
 // 处理发送原语音
 const initRecord = () => {
-  manager.onRecognize = (res) => {
-    let text = res.result;
-    inputMessage.value = text;
-  };
-  // 识别结束事件
-  manager.onStop = (res) => {
-    console.log(res, 37);
-    let text = res.result;
+    manager.onRecognize = (res) => {
+        let text = res.result;
+        inputMessage.value = text;
+    };
+    // 识别结束事件
+    manager.onStop = (res) => {
+        console.log(res, 37);
+        let text = res.result;
 
-    if (text == "") {
-      console.log("没有说话");
-      return;
-    }
+        if (text == "") {
+            console.log("没有说话");
+            return;
+        }
 
-    inputMessage.value = text;
-    // 在语音识别完成后发送消息
-    emit("send", text);
-  };
+        inputMessage.value = text;
+        // 在语音识别完成后发送消息
+        emit("send", text);
+    };
 };
 
 // 监听键盘高度变化
 onMounted(() => {
-  // 监听键盘弹起
-  uni.onKeyboardHeightChange((res) => {
-    keyboardHeight.value = res.height;
-    if (res.height) {
-      emit("keyboardShow", res.height);
-    } else {
-      emit("keyboardHide");
-    }
-  });
+    // 监听键盘弹起
+    uni.onKeyboardHeightChange((res) => {
+        keyboardHeight.value = res.height;
+        if (res.height) {
+            emit("keyboardShow", res.height);
+        } else {
+            emit("keyboardHide");
+        }
+    });
 
-  initRecord();
+    initRecord();
 });
 
 const sendMessage = () => {
-  if (props.isSessionActive) {
-    // 如果会话进行中，调用停止请求函数
-    if (props.stopRequest) {
-      props.stopRequest();
-    }
-  } else {
-    // 否则发送新消息
-    if (!inputMessage.value.trim()) return;
-    emit("send", inputMessage.value);
+    if (props.isSessionActive) {
+        // 如果会话进行中，调用停止请求函数
+        if (props.stopRequest) {
+            props.stopRequest();
+        }
+    } else {
+        // 否则发送新消息
+        if (!inputMessage.value.trim()) return;
+        emit("send", inputMessage.value);
 
-    // 发送后保持焦点（可选）
-    if (props.holdKeyboard && textareaRef.value) {
-      nextTick(() => {
-        textareaRef.value.focus();
-      });
+        // 发送后保持焦点（可选）
+        if (props.holdKeyboard && textareaRef.value) {
+            nextTick(() => {
+                textareaRef.value.focus();
+            });
+        }
     }
-  }
 };
 
 const handleFocus = () => {
-  isFocused.value = true;
-  emit("noHideKeyboard");
+    isFocused.value = true;
+    emit("noHideKeyboard");
 };
 
 const handleBlur = () => {
-  isFocused.value = false;
+    isFocused.value = false;
 };
 
 const handleTouchStart = () => {
-  emit("noHideKeyboard");
+    emit("noHideKeyboard");
 };
 
 const handleTouchEnd = () => {
-  emit("noHideKeyboard");
+    emit("noHideKeyboard");
 };
 
 // 手动聚焦输入框
 const focusInput = () => {
-  if (textareaRef.value) {
-    textareaRef.value.focus();
-  }
+    if (textareaRef.value) {
+        textareaRef.value.focus();
+    }
 };
 
 // 手动失焦输入框
 const blurInput = () => {
-  if (textareaRef.value) {
-    textareaRef.value.blur();
-  }
+    if (textareaRef.value) {
+        textareaRef.value.blur();
+    }
 };
 
 // 暴露方法给父组件
@@ -236,92 +239,87 @@ defineExpose({ focusInput });
 
 <style scoped lang="scss">
 .area-input {
-  display: flex;
-  align-items: flex-end;
-  border-radius: 22px;
-  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;
     align-items: center;
-    justify-content: center;
-    width: 44px;
-    height: 44px;
-
-    image {
-      width: 22px;
-      height: 22px;
-    }
-  }
-
-  .input-button-container {
-    flex: 1;
-    position: relative;
-  }
-
-  .hold-to-talk-button {
-    width: 100%;
-    height: 44px;
-    color: #333333;
-    font-size: 16px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    border-radius: 22px;
     background-color: #ffffff;
-    transition: all 0.2s ease;
-    user-select: none;
-    -webkit-user-select: none;
-  }
+    box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
+    margin: 0 12px;
+    margin-bottom: 8px;
 
-  .input-container-send {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 44px;
-    height: 44px;
+    .input-container-voice {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-self: flex-end;
+        width: 44px;
+        height: 44px;
 
-    .input-container-send-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
+        image {
+            width: 22px;
+            height: 22px;
+        }
     }
 
-    image {
-      width: 28px;
-      height: 28px;
-    }
-  }
-
-  .textarea {
-    flex: 1;
-    box-sizing: border-box;
-    width: 100%;
-    max-height: 92px;
-    min-height: 44px;
-    font-size: 16px;
-    line-height: normal;
-
-    &.android {
-      padding: 12px 0;
+    .input-button-container {
+        flex: 1;
+        position: relative;
     }
 
-    &.ios {
-      padding: 6px 0;
+    .hold-to-talk-button {
+        width: 100%;
+        height: 44px;
+        color: #333333;
+        font-size: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #ffffff;
+        transition: all 0.2s ease;
+        user-select: none;
+        -webkit-user-select: none;
     }
 
-    &::placeholder {
-      color: #cccccc;
-      line-height: normal;
+    .input-container-send {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-self: flex-end;
+        width: 44px;
+        height: 44px;
+
+        .input-container-send-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+        }
+
+        image {
+            width: 28px;
+            height: 28px;
+        }
     }
 
-    &:focus {
-      outline: none;
+    .textarea {
+        flex: 1;
+        box-sizing: border-box;
+        width: 100%;
+        max-height: 92px;
+        min-height: 22px;
+        font-size: 16px;
+        line-height: 22px;
+        margin: 6px 0;
+
+        &::placeholder {
+            color: #cccccc;
+            line-height: normal;
+        }
+
+        &:focus {
+            outline: none;
+        }
     }
-  }
 }
 </style>