feat: 语音输入框的条件编译
This commit is contained in:
@@ -2,7 +2,11 @@
|
||||
<view class="input-area-wrapper">
|
||||
<view v-if="!visibleWaveBtn" class="area-input">
|
||||
<!-- 语音/键盘切换 -->
|
||||
<view class="input-container-voice" @click="toggleVoiceMode">
|
||||
<view
|
||||
v-if="isSpeechRecognitionSupported"
|
||||
class="input-container-voice"
|
||||
@click="toggleVoiceMode"
|
||||
>
|
||||
<image
|
||||
class="voice-icon"
|
||||
v-if="!isVoiceMode"
|
||||
@@ -16,7 +20,10 @@
|
||||
</view>
|
||||
|
||||
<!-- 输入框/语音按钮容器 -->
|
||||
<view class="input-button-container">
|
||||
<view
|
||||
class="input-button-container"
|
||||
:class="{ 'input-button-container--no-voice': !isSpeechRecognitionSupported }"
|
||||
>
|
||||
<textarea
|
||||
ref="textareaRef"
|
||||
v-if="!isVoiceMode"
|
||||
@@ -77,8 +84,15 @@ import { ref, computed, watch, nextTick, onMounted, defineExpose, onUnmounted }
|
||||
import RecordingWaveBtn from "@/components/Speech/RecordingWaveBtn.vue";
|
||||
import { getCurrentConfig } from "@/constant/base";
|
||||
|
||||
let manager = null;
|
||||
const isSpeechRecognitionSupported = ref(false);
|
||||
|
||||
// WechatSI 是微信小程序插件,App 原生基座没有 requirePlugin。
|
||||
// #ifdef MP-WEIXIN
|
||||
const plugin = requirePlugin("WechatSI");
|
||||
const manager = plugin.getRecordRecognitionManager();
|
||||
manager = plugin.getRecordRecognitionManager();
|
||||
isSpeechRecognitionSupported.value = !!manager;
|
||||
// #endif
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: String,
|
||||
@@ -151,11 +165,13 @@ watch(inputMessage, (val) => {
|
||||
|
||||
// 切换语音/文本模式
|
||||
const toggleVoiceMode = () => {
|
||||
if (!isSpeechRecognitionSupported.value) return;
|
||||
isVoiceMode.value = !isVoiceMode.value;
|
||||
};
|
||||
|
||||
// 处理语音按钮长按开始
|
||||
const handleVoiceTouchStart = () => {
|
||||
if (!manager) return;
|
||||
try {
|
||||
manager.start({ lang: "zh_CN" });
|
||||
isRecording.value = true;
|
||||
@@ -177,6 +193,11 @@ const handleVoiceTouchStart = () => {
|
||||
|
||||
// 处理语音按钮长按结束
|
||||
const handleVoiceTouchEnd = () => {
|
||||
if (!manager) {
|
||||
resetUI();
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果本地状态不是录音中,也确保 UI 恢复
|
||||
if (!isRecording.value) {
|
||||
if (recordingWaveBtnRef.value) {
|
||||
@@ -202,6 +223,8 @@ const handleVoiceTouchEnd = () => {
|
||||
|
||||
// 处理发送原语音
|
||||
const initRecord = () => {
|
||||
if (!manager) return;
|
||||
|
||||
manager.onRecognize = (res) => {
|
||||
let text = res.result || "";
|
||||
inputMessage.value = text;
|
||||
@@ -247,14 +270,16 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
try {
|
||||
manager.stop && manager.stop();
|
||||
} catch (e) {
|
||||
// ignore
|
||||
if (manager) {
|
||||
try {
|
||||
manager.stop && manager.stop();
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
manager.onRecognize = null;
|
||||
manager.onStop = null;
|
||||
manager.onError = null;
|
||||
}
|
||||
manager.onRecognize = null;
|
||||
manager.onStop = null;
|
||||
manager.onError = null;
|
||||
resetUI();
|
||||
});
|
||||
|
||||
|
||||
@@ -24,6 +24,10 @@
|
||||
.input-button-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
&--no-voice {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.hold-to-talk-button {
|
||||
|
||||
Reference in New Issue
Block a user