400 lines
8.7 KiB
Vue
400 lines
8.7 KiB
Vue
<template>
|
||
<view class="input-area-wrapper">
|
||
<view 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"
|
||
:class="['textarea', ios ? 'ios' : 'android']"
|
||
type="text"
|
||
cursor-spacing="65"
|
||
confirm-type="done"
|
||
v-model="inputMessage"
|
||
auto-height
|
||
:confirm-hold="true"
|
||
:placeholder="placeholder"
|
||
:show-confirm-bar="false"
|
||
:hold-keyboard="holdKeyboard"
|
||
:adjust-position="true"
|
||
maxlength="300"
|
||
@confirm="sendMessage"
|
||
@focus="handleFocus"
|
||
@blur="handleBlur"
|
||
@touchstart="handleTouchStart"
|
||
@touchend="handleTouchEnd"
|
||
/>
|
||
|
||
<view
|
||
v-if="isVoiceMode"
|
||
class="hold-to-talk-button"
|
||
@click.stop="startRecording"
|
||
>
|
||
按住说话
|
||
</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>
|
||
|
||
<!-- 使用封装的弹窗组件 -->
|
||
<RecordingPopup
|
||
ref="recordingPopupRef"
|
||
:is-slide-to-text="isSlideToText"
|
||
@cancel="handleRecordingCancel"
|
||
/>
|
||
|
||
<VoiceResultPopup
|
||
ref="voiceResultPopupRef"
|
||
:voice-text="voiceText"
|
||
@cancel="cancelVoice"
|
||
@sendVoice="handleSendVoice"
|
||
@sendText="handleSendText"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch, nextTick, onMounted, computed } from "vue";
|
||
import RecordingPopup from "@/components/Speech/RecordingPopup.vue";
|
||
import VoiceResultPopup from "@/components/Speech/VoiceResultPopup.vue";
|
||
|
||
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 placeholder = ref("快告诉朵朵您在想什么~");
|
||
const inputMessage = ref(props.modelValue || "");
|
||
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);
|
||
const recordingPopupRef = ref(null);
|
||
const voiceResultPopupRef = ref(null);
|
||
|
||
// 判断当前平台是否为iOS
|
||
const ios = computed(() => {
|
||
return uni.getSystemInfoSync().platform === "ios";
|
||
});
|
||
|
||
// 保持和父组件同步
|
||
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 startRecording = () => {
|
||
console.log("startRecording");
|
||
isRecording.value = true;
|
||
recordingTime.value = 0;
|
||
// 启动录音计时器
|
||
recordingTimer.value = setInterval(() => {
|
||
recordingTime.value += 1;
|
||
}, 1000);
|
||
|
||
// 打开录音弹窗
|
||
if (recordingPopupRef.value) {
|
||
recordingPopupRef.value.open();
|
||
}
|
||
|
||
// 调用uni-app录音API
|
||
uni.startRecord({
|
||
success: (res) => {
|
||
// 录音成功，处理录音文件
|
||
const tempFilePath = res.tempFilePath;
|
||
// 这里可以添加语音转文字的逻辑
|
||
// 模拟语音转文字
|
||
setTimeout(() => {
|
||
voiceText.value = "这是语音转文字的结果";
|
||
showVoiceResult.value = true;
|
||
// 打开语音结果弹窗
|
||
if (voiceResultPopupRef.value) {
|
||
voiceResultPopupRef.value.open();
|
||
}
|
||
}, 1000);
|
||
},
|
||
fail: (err) => {
|
||
console.error("录音失败:", err);
|
||
isRecording.value = false;
|
||
clearInterval(recordingTimer.value);
|
||
if (recordingPopupRef.value) {
|
||
recordingPopupRef.value.close();
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
// 处理录音弹窗取消
|
||
const handleRecordingCancel = () => {
|
||
isRecording.value = false;
|
||
clearInterval(recordingTimer.value);
|
||
uni.stopRecord();
|
||
};
|
||
|
||
// 处理发送原语音
|
||
const handleSendVoice = (data) => {
|
||
// 发送语音逻辑
|
||
emit("sendVoice", {
|
||
text: data.text,
|
||
// 可以添加语音文件路径等信息
|
||
});
|
||
showVoiceResult.value = false;
|
||
isVoiceMode.value = false;
|
||
};
|
||
|
||
// 处理发送文本
|
||
const handleSendText = (data) => {
|
||
// 发送文本逻辑
|
||
emit("sendVoice", {
|
||
text: data.text,
|
||
// 可以添加语音文件路径等信息
|
||
});
|
||
showVoiceResult.value = false;
|
||
isVoiceMode.value = false;
|
||
};
|
||
|
||
// 取消语音
|
||
const cancelVoice = () => {
|
||
showVoiceResult.value = false;
|
||
isVoiceMode.value = false;
|
||
};
|
||
|
||
// 测试弹窗方法
|
||
const testPopup = () => {
|
||
// 模拟开始录音，打开录音弹窗
|
||
isRecording.value = true;
|
||
console.log("===========1");
|
||
|
||
if (recordingPopupRef.value) {
|
||
console.log("===========2");
|
||
|
||
recordingPopupRef.value.open();
|
||
}
|
||
|
||
// 2秒后关闭录音弹窗，打开语音结果弹窗
|
||
setTimeout(() => {
|
||
if (recordingPopupRef.value) {
|
||
recordingPopupRef.value.close();
|
||
}
|
||
voiceText.value = "测试语音转文字结果";
|
||
showVoiceResult.value = true;
|
||
if (voiceResultPopupRef.value) {
|
||
voiceResultPopupRef.value.open();
|
||
}
|
||
}, 3000);
|
||
};
|
||
|
||
// 监听键盘高度变化
|
||
onMounted(() => {
|
||
// 监听键盘弹起
|
||
uni.onKeyboardHeightChange((res) => {
|
||
keyboardHeight.value = res.height;
|
||
if (res.height > 0) {
|
||
emit("keyboardShow", res.height);
|
||
} else {
|
||
emit("keyboardHide");
|
||
}
|
||
});
|
||
});
|
||
|
||
const sendMessage = () => {
|
||
if (isVoiceMode.value) {
|
||
testPopup();
|
||
return;
|
||
}
|
||
|
||
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,
|
||
blurInput,
|
||
isFocused,
|
||
toggleVoiceMode,
|
||
});
|
||
</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;
|
||
width: 44px;
|
||
height: 44px;
|
||
|
||
image {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
}
|
||
|
||
.input-button-container {
|
||
flex: 1;
|
||
position: relative;
|
||
height: 44px;
|
||
}
|
||
|
||
.hold-to-talk-button {
|
||
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;
|
||
justify-content: center;
|
||
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: 44px;
|
||
font-size: 16px;
|
||
line-height: normal;
|
||
|
||
&.android {
|
||
padding: 11px 0;
|
||
}
|
||
|
||
&.ios {
|
||
padding: 4px 0;
|
||
}
|
||
|
||
&::placeholder {
|
||
color: #cccccc;
|
||
line-height: normal;
|
||
}
|
||
|
||
&:focus {
|
||
outline: none;
|
||
}
|
||
}
|
||
}
|
||
</style>
|