YGChatCS/pages/chat/ChatInputArea.vue

<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-button-container">
        <textarea
          ref="textareaRef"
          v-if="!isVoiceMode"
          class="textarea"
          type="text"
          cursor-spacing="20"
          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>
      </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>

    <!-- 录音按钮 -->
    <RecordingWaveBtn v-if="visibleWaveBtn" ref="recordingWaveBtnRef" />
  </view>
</template>

<script setup>
import { ref, watch, nextTick, onMounted, computed, defineExpose } from "vue";
import RecordingWaveBtn from "@/components/Speech/RecordingWaveBtn.vue";

const plugin = requirePlugin("WechatSI");
const manager = plugin.getRecordRecognitionManager();

const props = defineProps({
  modelValue: String,
  holdKeyboard: Boolean,
  isSessionActive: Boolean,
  stopRequest: Function,
});
const emit = defineEmits([
  "update:modelValue",
  "send",
  "noHideKeyboard",
  "keyboardShow",
  "keyboardHide",
  "sendVoice",
]);

const textareaRef = ref(null);
const recordingWaveBtnRef = ref(null);
const placeholder = ref("快告诉朵朵您在想什么~");
const inputMessage = ref(props.modelValue || "");
const isFocused = ref(false);
const keyboardHeight = ref(0);
const isVoiceMode = ref(false);
const visibleWaveBtn = ref(false);

// 保持和父组件同步
watch(
  () => props.modelValue,
  (val) => {
    inputMessage.value = val;
  }
);

// 当子组件的 inputMessage 变化时，通知父组件（但要避免循环更新）
watch(inputMessage, (val) => {
  // 只有当值真正不同时才emit，避免循环更新
  if (val !== props.modelValue) {
    emit("update:modelValue", val);
  }
});

// 切换语音/文本模式
const toggleVoiceMode = () => {
  isVoiceMode.value = !isVoiceMode.value;
};

// 处理语音按钮长按开始
const handleVoiceTouchStart = () => {
  manager.start({ lang: "zh_CN" });

  visibleWaveBtn.value = true;

  // 启动音频条动画
  nextTick(() => {
    if (recordingWaveBtnRef.value) {
      recordingWaveBtnRef.value.startAnimation();
    }
  });
};

// 处理语音按钮长按结束
const handleVoiceTouchEnd = () => {
  manager.stop();

  // 停止音频条动画
  if (recordingWaveBtnRef.value) {
    recordingWaveBtnRef.value.stopAnimation();
  }

  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;

    if (text == "") {
      console.log("没有说话");
      return;
    }

    inputMessage.value = text;
    // 在语音识别完成后发送消息
    emit("send", text);
  };
};

// 监听键盘高度变化
onMounted(() => {
  // 监听键盘弹起
  uni.onKeyboardHeightChange((res) => {
    keyboardHeight.value = res.height;
    if (res.height) {
      emit("keyboardShow", res.height);
    } else {
      emit("keyboardHide");
    }
  });

  initRecord();
});

const sendMessage = () => {
  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();
      });
    }
  }
};

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 });
</script>

<style scoped lang="scss">
.area-input {
  display: flex;
  align-items: center;
  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;
    align-self: flex-end;
    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;
    background-color: #ffffff;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
  }

  .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;
    }
  }

  .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>