Compare commits
2 Commits
d6c7ca7aec
...
99b82810c2
| Author | SHA1 | Date | |
|---|---|---|---|
| 99b82810c2 | |||
| d2e650a434 |
@@ -1,5 +1,5 @@
|
||||
.command-wrapper {
|
||||
background-color: #00a6ff;
|
||||
background-color: $theme-color-500;
|
||||
border-radius: 20px 4px 20px 20px;
|
||||
padding: 8px 24px;
|
||||
width: max-content;
|
||||
|
||||
@@ -188,7 +188,7 @@ const addForm = () => {
|
||||
font-weight: 600;
|
||||
margin-bottom: 20rpx;
|
||||
color: #333;
|
||||
border-left: 6rpx solid #00a6ff;
|
||||
border-left: 6rpx solid $theme-color-500;
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
@@ -214,7 +214,7 @@ const addForm = () => {
|
||||
.add-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: #00a6ff;
|
||||
background: $theme-color-500;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8rpx;
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<view class="form-wrapper">
|
||||
<view class="form-header">
|
||||
<uni-icons class="minus" color="#00A6FF" size="22" type="minus" />
|
||||
<uni-icons class="minus uni-color" color="opacity" size="22" type="minus" />
|
||||
<text class="form-title">{{ title }}</text>
|
||||
<uni-icons
|
||||
v-if="showDeleteIcon"
|
||||
class="delete"
|
||||
color="#00A6FF"
|
||||
class="delete uni-color"
|
||||
color="opacity"
|
||||
size="22"
|
||||
type="trash"
|
||||
@click="handleDelete"
|
||||
|
||||
@@ -29,6 +29,10 @@ $form-transition: all 0.2s ease;
|
||||
padding: 10px 12px;
|
||||
min-height: 44px;
|
||||
|
||||
.uni-color {
|
||||
color: $theme-color-500;
|
||||
}
|
||||
|
||||
.minus,
|
||||
.delete {
|
||||
height: 22px;
|
||||
@@ -50,7 +54,7 @@ $form-transition: all 0.2s ease;
|
||||
margin-left: 8px;
|
||||
font-size: $uni-font-size-lg;
|
||||
font-weight: 500;
|
||||
color: $form-primary-color;
|
||||
color: $theme-color-500;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -110,7 +114,7 @@ $form-transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-bottom-color: $form-primary-color;
|
||||
border-bottom-color: $theme-color-500;
|
||||
|
||||
&::placeholder {
|
||||
opacity: 0.5;
|
||||
|
||||
@@ -48,6 +48,6 @@
|
||||
);
|
||||
font-size: $uni-font-size-sm;
|
||||
font-weight: 500;
|
||||
color: #00a6ff;
|
||||
color: $theme-color-500;
|
||||
border-radius: $uni-border-radius-50px;
|
||||
}
|
||||
|
||||
@@ -107,7 +107,7 @@ defineExpose({
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #00a6ff;
|
||||
background-color: $theme-color-500;
|
||||
height: 44px;
|
||||
border-radius: $uni-border-radius-50px;
|
||||
}
|
||||
|
||||
@@ -8,6 +8,6 @@
|
||||
border-radius: 10px;
|
||||
padding: 8px 16px;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: #00a6ff;
|
||||
color: $theme-color-500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -185,7 +185,7 @@
|
||||
.confirm-btn {
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
background: linear-gradient(179deg, #00a6ff 0%, #0256ff 100%);
|
||||
background: linear-gradient(179deg, $theme-color-500 0%, $theme-color-700 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, nextTick, onMounted, defineExpose } from "vue";
|
||||
import { ref, computed, watch, nextTick, onMounted, defineExpose, onUnmounted } from "vue";
|
||||
import RecordingWaveBtn from "@/components/Speech/RecordingWaveBtn.vue";
|
||||
import { getCurrentConfig } from "@/constant/base";
|
||||
|
||||
@@ -103,6 +103,32 @@ const isFocused = ref(false);
|
||||
const keyboardHeight = ref(0);
|
||||
const isVoiceMode = ref(false);
|
||||
const visibleWaveBtn = ref(false);
|
||||
const isRecording = ref(false);
|
||||
let watchDogTimer = null;
|
||||
|
||||
const resetUI = () => {
|
||||
isRecording.value = false;
|
||||
visibleWaveBtn.value = false;
|
||||
try {
|
||||
if (recordingWaveBtnRef.value) {
|
||||
recordingWaveBtnRef.value.stopAnimation();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("resetUI stopAnimation error", e);
|
||||
}
|
||||
if (watchDogTimer) {
|
||||
clearTimeout(watchDogTimer);
|
||||
watchDogTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const startWatchDog = (timeout = 10000) => {
|
||||
if (watchDogTimer) clearTimeout(watchDogTimer);
|
||||
watchDogTimer = setTimeout(() => {
|
||||
console.warn("recording watchdog triggered, forcing UI reset");
|
||||
resetUI();
|
||||
}, timeout);
|
||||
};
|
||||
|
||||
// 保持和父组件同步
|
||||
watch(
|
||||
@@ -127,8 +153,9 @@ const toggleVoiceMode = () => {
|
||||
|
||||
// 处理语音按钮长按开始
|
||||
const handleVoiceTouchStart = () => {
|
||||
try {
|
||||
manager.start({ lang: "zh_CN" });
|
||||
|
||||
isRecording.value = true;
|
||||
visibleWaveBtn.value = true;
|
||||
|
||||
// 启动音频条动画
|
||||
@@ -137,32 +164,54 @@ const handleVoiceTouchStart = () => {
|
||||
recordingWaveBtnRef.value.startAnimation();
|
||||
}
|
||||
});
|
||||
startWatchDog(10000);
|
||||
} catch (err) {
|
||||
console.error("record start error:", err);
|
||||
// 保底清理
|
||||
resetUI();
|
||||
}
|
||||
};
|
||||
|
||||
// 处理语音按钮长按结束
|
||||
const handleVoiceTouchEnd = () => {
|
||||
manager.stop();
|
||||
|
||||
// 停止音频条动画
|
||||
// 如果本地状态不是录音中,也确保 UI 恢复
|
||||
if (!isRecording.value) {
|
||||
if (recordingWaveBtnRef.value) {
|
||||
recordingWaveBtnRef.value.stopAnimation();
|
||||
}
|
||||
|
||||
visibleWaveBtn.value = false;
|
||||
if (watchDogTimer) {
|
||||
clearTimeout(watchDogTimer);
|
||||
watchDogTimer = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
manager.stop();
|
||||
} catch (err) {
|
||||
console.error("record stop error:", err);
|
||||
} finally {
|
||||
// 无论 stop 是否抛错,都保证 UI 恢复
|
||||
resetUI();
|
||||
}
|
||||
};
|
||||
|
||||
// 处理发送原语音
|
||||
const initRecord = () => {
|
||||
manager.onRecognize = (res) => {
|
||||
let text = res.result;
|
||||
let text = res.result || "";
|
||||
inputMessage.value = text;
|
||||
};
|
||||
// 识别结束事件
|
||||
manager.onStop = (res) => {
|
||||
console.log(res, 37);
|
||||
let text = res.result;
|
||||
let text = (res && res.result) || "";
|
||||
|
||||
if (text == "") {
|
||||
// 保证 UI 恢复(防止未走 handleVoiceTouchEnd)
|
||||
resetUI();
|
||||
|
||||
if (text === "") {
|
||||
console.log("没有说话");
|
||||
return;
|
||||
}
|
||||
@@ -171,6 +220,12 @@ const initRecord = () => {
|
||||
// 在语音识别完成后发送消息
|
||||
emit("send", text);
|
||||
};
|
||||
|
||||
// 错误处理,确保 UI 重置
|
||||
manager.onError = (err) => {
|
||||
console.error("record manager error", err);
|
||||
resetUI();
|
||||
};
|
||||
};
|
||||
|
||||
// 监听键盘高度变化
|
||||
@@ -188,6 +243,18 @@ onMounted(() => {
|
||||
initRecord();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
try {
|
||||
manager.stop && manager.stop();
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
manager.onRecognize = null;
|
||||
manager.onStop = null;
|
||||
manager.onError = null;
|
||||
resetUI();
|
||||
});
|
||||
|
||||
const sendMessage = () => {
|
||||
if (props.isSessionActive) {
|
||||
// 如果会话进行中,调用停止请求函数
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
}
|
||||
|
||||
.date-item.active {
|
||||
background-color: #00a6ff;
|
||||
background-color: $theme-color-500;
|
||||
}
|
||||
.date-item.active .label,
|
||||
.date-item.active .date {
|
||||
|
||||
Reference in New Issue
Block a user