JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_继续开发语音按钮

This commit is contained in:
田岩
2026-03-03 17:58:22 +08:00
parent d307b6b6d7
commit 60e7f272d8
18 changed files with 385 additions and 223 deletions
+1
View File
@@ -58,6 +58,7 @@
"@dcloudio/vite-plugin-uni": "3.0.0-4060620250520001",
"@vue/runtime-core": "^3.4.21",
"sass": "1.77.0",
"typescript": "^5.9.3",
"vite": "5.2.8"
}
}
+8 -3
View File
@@ -47,8 +47,8 @@ export enum ControlCode {
AI_ANSWER_OVER = 0b0100, // 本轮AI回答的文本内容已经全部返回
AI_CLUE = 0b0101, // 需要AI提示命令(发后端)
AI_CLUE_OVER = 0b0110, // AI提示命令已经全部返回
FRNOT_TO_SERVER_OVER = 0b0111, // 语音按钮已经抬起
SERVER_TO_FRNOT_OVER = 0b1000, // 后端已经返回本次全部内容
FRONT_TO_SERVER_OVER = 0b0111, // 语音按钮已经抬起
SERVER_TO_FRONT_OVER = 0b1000, // 后端已经返回本次全部内容
}
@@ -97,6 +97,11 @@ export enum ControlCommand {
FINISH_PLAY = 0b0010, // 一句话播放结束
}
export interface ControlBody {
type: ControlCode; // type 是必选属性,关联你的 ControlCode 枚举
[key: string]: any; // 索引签名:兼容后端返回的任意动态属性(txt/ossKey 等)
}
/**
* 解包返回结果接口
*/
@@ -108,7 +113,7 @@ export interface UnpackedResult {
compression : CompressionType;
compressionName : keyof typeof CompressionType;
sequence : number; // 消息顺序号(0~65535,默认0
body : Uint8Array | string | object | unknown[] | null; // PING 消息可能返回 null
body : Uint8Array | string | object | unknown[] | null | ControlBody; // PING 消息可能返回 null
}
/**
-2
View File
@@ -83,12 +83,10 @@ const hideLoading = () => uni.hideLoading()
// 根据姓名的长度生成对应的带星号格式
export const formatName = (name) => {
// 处理空值或非字符串情况
if (!name || typeof name !== 'string') {
return '';
}
const familyName = name.charAt(0); // 取姓氏(第一个字符)
const givenNameLength = name.length - 1; // 名字部分的长度
Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

+1 -1
View File
@@ -1,4 +1,4 @@
.talk-btns {
.talk-btns-components {
position: flex;
left: 0;
bottom: 0;
+117 -68
View File
@@ -3,66 +3,74 @@
flex-direction: column;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
background-color: rgba(0, 0, 0, 0.85);
position: relative;
}
/* 1. 定义通用的向右移出动画(核心:添加时长,解决秒没) */
@keyframes moveRightOut {
0% {
right: 0; /* 初始位置 */
}
100% {
right: -400rpx; /* 目标位置:向右移出400rpx */
}
0% {
right: 0; /* 初始位置 */
}
100% {
right: -400rpx; /* 目标位置:向右移出400rpx */
}
}
/* 2. 定义通用的向左移出动画(适配 btn-box-1) */
@keyframes moveLeftOut {
0% {
left: 0; /* 初始位置 */
}
100% {
left: -400rpx; /* 目标位置:向左移出400rpx */
}
0% {
left: 0; /* 初始位置 */
}
100% {
left: -400rpx; /* 目标位置:向左移出400rpx */
}
}
/* 2. 定义通用的向左移出动画(适配 btn-box-1) */
@keyframes moveBottomOut {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
0% {
transform: translateY(0%);
}
100% {
transform: translateY(130%);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.page-box {
position: relative;
height: 500rpx;
transition: margin-bottom 0.2s ease-out;
}
.page-1 {
position: absolute;
width: 100%;
bottom: 0;
&.voice_to_text{
&.voice_to_text {
.btn-box-1 {
animation: moveLeftOut 0.3s ease-out forwards;
/* 清除冲突样式 */
transform: none !important;
transition: none !important;
}
.btn-box-2 {
animation: moveRightOut 0.3s ease-out forwards;
/* 清除冲突样式 */
transform: none !important;
transition: none !important;
}
.circle-bg-box{
animation: moveBottomOut 0.3s ease-out forwards;
}
animation: moveLeftOut 0.3s ease-out forwards;
}
.btn-box-2 {
animation: moveRightOut 0.3s ease-out forwards;
}
.circle-bg-box {
animation: moveBottomOut 0.3s ease-out forwards;
}
}
// 仅语音
&.voice-only {
.btn-box-1,
.btn-box-2 {
display: none;
}
.btn-box-3 {
display: block !important;
}
}
// 两侧按钮
.btns-box {
@@ -73,7 +81,6 @@
z-index: 1200;
justify-content: space-around;
position: relative;
.btn-box {
position: absolute;
height: 164rpx;
@@ -90,6 +97,13 @@
transition: right 0.3s ease-out;
right: -40rpx;
}
.btn-box-3 {
position: absolute;
height: 124rpx;
transform: scale(1.2);
bottom: 30rpx;
display: none;
}
}
// 底部半圆
.circle-bg-box {
@@ -110,40 +124,52 @@
}
}
}
.page-2{
.page-2 {
width: 100%;
overflow: hidden;
padding-bottom: 50rpx;
font-size: 28rpx;
text-align: center;
display: none;
z-index: 12000;
z-index: 1200;
justify-content: space-around;
margin-bottom:234rpx;;
margin-bottom: 214rpx;
position: absolute;
bottom: 0;
opacity: 0;
visibility: hidden; // 初始不可见且不占交互位置
&.voice_to_text {
display: flex !important;
visibility: visible; // 激活后可见
animation: fadeIn 0.4s ease-out 0.1s forwards;
display: flex !important;
visibility: visible; // 激活后可见
animation: fadeIn 0.4s ease-out 0.1s forwards;
}
.transVoiceIng {
width: 154rpx;
height: 154rpx;
overflow: hidden;
overflow: visible;
position: relative;
z-index: 12010;
z-index: 1200;
&.cancel-btn {
background: url(@/static/images/course/cancel-btn.png) no-repeat;
background-size: cover;
}
&.trans-btn {
background: url(@/static/images/course/trans-btn.png) no-repeat;
background-size: cover;
}
.btn-text {
position: absolute;
top: calc(100% + 15rpx); /* 按钮底部+10rpx间距,避免贴边 */
left: 50%;
transform: translateX(-50%);
/* 2. 强制显示 + 最高层级,防止被遮挡 */
display: block !important;
z-index: 10000;
color: rgb(163, 163, 163);
font-size: 28rpx;
white-space: nowrap;
}
}
.send-btn {
position: relative;
@@ -154,12 +180,36 @@
background-color: #d8d8d8;
border-radius: 77rpx;
font-size: 33rpx;
z-index: 12010;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
.send-btn-loading,
.send-btn-text {
display: none;
}
}
&.init > .send-btn > .send-btn-loading {
display: block !important;
pointer-events: none;
cursor: not-allowed;
}
&.success > .send-btn > .send-btn-text {
display: block !important;
}
&.failed .send-btn {
pointer-events: none;
cursor: not-allowed;
background-color: rgb(80, 80, 80);
color: rgb(106, 106, 106);
.send-btn-text {
display: block !important;
}
}
}
.talk-dialog-box{
position: absolute;
bottom: 520rpx ;
.talk-dialog-box {
position: relative;
// bottom: 560rpx;
width: 100%;
display: flex;
justify-content: center;
@@ -173,7 +223,7 @@
// 滑动到离开变红
&.is-out {
background-color: #ff3e49;
&::after {
background-color: #ff3e49;
}
@@ -199,9 +249,11 @@
transition: left 0.3s ease-out; // 时长0.3秒,ease-out缓动(结束时变慢,更自然)
}
// 控制下边箭头指向发送
&.init::after {
&.init::after,
&.success::after {
left: 78% !important;
}
&.failed {
width: 506rpx;
height: 114rpx;
@@ -211,11 +263,15 @@
background-color: #ff3e49;
}
// 激活错误提示框
.error-tip-div{
.error-tip-div {
display: flex !important;
visibility: visible; // 激活后可见
// animation: fadeIn 0.4s ease-out 0.1s forwards;
}
.textarea {
// display: none;
visibility: hidden; // 初始不可见且不占交互位置
}
}
}
.talk-dialog {
@@ -239,29 +295,22 @@
top: 50%;
transform: translate(-50%, -50%);
}
.error-tip-div{
.error-tip-div {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
display: none;
visibility: hidden; // 初始不可见且不占交互位置
display: flex;
align-items: center;
color: #ffffff;
font-size: 24rpx;
font-weight: 400;
.img{
.img {
margin-right: 10rpx;
width: 26rpx;
height: 26rpx;
}
}
}
@@ -4,7 +4,11 @@ export { default as cancelBtn } from './assets/cancel.png';
export { default as cancelActiveBtn } from './assets/cancel-active.png';
export { default as translateBtn } from './assets/translate.png';
export { default as translateActiveBtn } from './assets/translate-active.png';
export { default as closeBtn } from './assets/close.png';
export { default as closeActiveBtn } from './assets/close-active.png';
export { default as voiceWhiteBtn } from './assets/voice-white.gif';
export const icKeyboardSvg = () : string => {
const svgXml = `
<svg t="1772357429950" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1775" width="200" height="200"><path d="M513.788813 938.289925c-113.566274 0-220.223734-44.167967-300.444149-124.388381-80.220415-80.220415-124.388382-186.877876-124.388382-300.44415s44.167967-220.227983 124.388382-300.448398c165.543834-165.548083 435.348714-165.548083 600.892548 0 165.548083 165.548083 165.548083 435.348714 0 600.892548-80.220415 80.220415-186.877876 124.388382-300.44415 124.388381z m0-785.973112c-92.538158 0-185.072066 35.453344-255.379651 105.756681-68.2001 68.204349-105.75668 158.63927-105.756681 255.3839s37.556581 187.175303 105.756681 255.379652c68.204349 68.2001 158.936697 106.054108 255.379651 105.75668 96.74888 0 187.179552-37.556581 255.379652-105.75668 140.912598-140.912598 140.912598-369.850954 0-510.759303-70.303336-70.307585-162.841494-105.75668-255.379652-105.756681z" fill="#515151" p-id="1776"></path><path d="M318.672199 341.705826h46.313693c11.047303 0 19.545228 8.497925 19.545228 19.120332v46.313693c0 10.622407-8.497925 19.120332-19.120332 19.120332h-46.738589c-10.622407 0.424896-19.120332-8.073029-19.120332-18.695436v-46.738589c0-10.622407 8.497925-19.120332 19.120332-19.120332zM488.630705 341.705826h46.313693c11.047303 0 19.545228 8.497925 19.545229 19.120332v46.313693c0 10.622407-8.497925 19.120332-19.120332 19.120332h-46.73859c-10.622407 0.424896-19.120332-8.073029-19.120332-18.695436v-46.738589c0-10.622407 8.497925-19.120332 19.120332-19.120332zM658.589212 341.705826h46.313693c11.047303 0 19.545228 8.497925 19.545228 19.120332v46.313693c0 10.622407-8.497925 19.120332-19.120332 19.120332h-46.738589c-10.622407 0.424896-19.120332-8.073029-19.120332-18.695436v-46.738589c0-10.622407 8.497925-19.120332 19.120332-19.120332zM318.672199 469.174705h46.313693c10.622407 0 19.120332 8.497925 19.120332 19.120332v46.313693c0 10.622407-8.497925 19.120332-19.120332 19.120332H318.672199c-10.622407 0.424896-19.120332-8.073029-19.120332-18.695435v-46.73859c0-10.622407 8.497925-19.120332 19.120332-19.120332zM488.630705 469.174705h46.313693c10.622407 0 19.120332 8.497925 19.120332 19.120332v46.313693c0 10.622407-8.497925 19.120332-19.120332 19.120332h-46.313693c-10.622407 0.424896-19.120332-8.073029-19.120332-18.695435v-46.73859c0-10.622407 8.497925-19.120332 19.120332-19.120332zM658.589212 469.174705h46.313693c10.622407 0 19.120332 8.497925 19.120332 19.120332v46.313693c0 10.622407-8.497925 19.120332-19.120332 19.120332h-46.313693c-10.622407 0.424896-19.120332-8.073029-19.120332-18.695435v-46.73859c0-10.622407 8.497925-19.120332 19.120332-19.120332zM458.887967 660.378025h106.224066c17.420747 0 31.86722 14.446473 31.86722 31.86722s-14.446473 31.86722-31.86722 31.86722h-106.224066c-17.420747 0-31.86722-14.446473-31.86722-31.86722s14.446473-31.86722 31.86722-31.86722z" fill="#515151" p-id="1777"></path></svg>
+83 -62
View File
@@ -1,11 +1,13 @@
import { ErrorCode, ShowErrorTipOptions } from './touch-btn.types';
import { get_base_url } from '@/api/request.js';
import { getToken } from '@/common/common.js';
import { getToken, getPhoneEnvBool } from '@/common/common.js';
const IsAndEnv = getPhoneEnvBool('AND')
// const url = '/trapractice/voiceCallSocket/voiceCall'
// const url = '/traapp/voiceTransSocket/open';
const url = '/traapp/voiceAiModelSocket/open';
// const url = '/traapp/asrAiModelSocket/open';
const url = '/traapp/asrAiModelSocket/open';
const _baseUrl = get_base_url(url).split('http').join('ws');
// const _baseUrl = '';
export const wsUrl = _baseUrl + url + '?summary=' + getToken();
const windowInfo = uni.getWindowInfo();
// 安全区域信息
@@ -17,58 +19,48 @@ export const bottomAreaTopBoundary = safeArea.bottom - btnHeight;
// 屏幕横向分割线
export const horizontalSplitX = safeArea.right / 2;
// 假设你在 Vue3 环境中,ws、wsStatus 是 ref 响应式变量
import { ref } from 'vue';
const ws = ref(null);
const wsStatus = ref(false);
/**
* 封装WebSocket连接为Promise
* @param {string} wsUrl - WebSocket连接地址
* @returns {Promise<UniApp.SocketTask>} 成功时返回WS实例,失败时reject错误信息
*/
export const initWebSocket = (wsUrl: string): Promise<UniApp.SocketTask> => {
return new Promise((resolve, reject) => {
// 1. 创建WS连接
const ws = uni.connectSocket({
url: wsUrl,
fail: (err) => {
console.error('WS连接创建失败:', err);
// 连接创建失败直接reject
reject(new Error(`WS连接创建失败:${err.errMsg || err.message}`));
},
success: () => {
console.log('WS连接创建请求已发送');
}
});
export const initWebSocket = (wsUrl : string) : Promise<UniApp.SocketTask> => {
return new Promise((resolve, reject) => {
// 1. 创建WS连接
const ws = uni.connectSocket({
url: wsUrl,
fail: (err) => {
console.error('WS连接创建失败:', err);
// 连接创建失败直接reject
reject(new Error(`WS连接创建失败:${err.errMsg || err.message}`));
},
success: () => {
}
});
// 2. 监听连接成功(核心:连接成功时resolve,返回WS实例)
const onOpenHandler = (res) => {
resolve(ws);
};
// 2. 监听连接成功(核心:连接成功时resolve,返回WS实例
const onOpenHandler = (res) => {
console.log('ws已连接', res);
// resolve返回WS实例
resolve(ws);
};
// 4. 监听连接错误(出错时reject
const onErrorHandler = (err) => {
console.log('WS连接错误', err);
// reject返回错误信息
reject(new Error(`WS连接错误:${err.errMsg || err.message}`));
};
// 4. 监听连接错误(出错时reject
const onErrorHandler = (err) => {
console.log('WS连接错误', err);
// reject返回错误信息
reject(new Error(`WS连接错误${err.errMsg || err.message}`));
};
// 5. 监听连接关闭(如果在open前关闭,也reject)
const onCloseHandler = (err) => {
console.log('WS连接已关闭', err);
// 连接未成功就关闭,执行reject
reject(new Error(`WS连接已关闭:${err.errMsg || err.message}`));
};
// 绑定监听事件
ws.onOpen(onOpenHandler);
ws.onError(onErrorHandler);
ws.onClose(onCloseHandler);
});
// 5. 监听连接关闭(如果在open前关闭,也reject
const onCloseHandler = (err) => {
console.log('WS连接已关闭', err);
// 连接未成功就关闭,执行reject
reject(new Error(`WS连接已关闭${err.errMsg || err.message}`));
};
// 绑定监听事件
ws.onOpen(onOpenHandler);
ws.onError(onErrorHandler);
ws.onClose(onCloseHandler);
});
};
/**
@@ -78,19 +70,48 @@ export const initWebSocket = (wsUrl: string): Promise<UniApp.SocketTask> => {
* @returns 固定返回false(保持原有返回值类型)
*/
export function showErrorTip(
errorCode: ErrorCode,
options: ShowErrorTipOptions = {}
): boolean {
// 解构可选参数,设置默认延迟时间为200ms
const { delayTime = 200 } = options;
errorCode : ErrorCode,
options : ShowErrorTipOptions = {}
) : boolean {
// 解构可选参数,设置默认延迟时间为200ms
const { delayTime = 200 } = options;
// 延迟显示对应的错误提示
setTimeout(() => {
uni.showToast({
title: errorCode, // 直接使用枚举值作为提示文本
icon: 'none'
});
}, delayTime); // 使用传入的延迟时间(或默认200ms)
// 延迟显示对应的错误提示
setTimeout(() => {
uni.showToast({
title: errorCode, // 直接使用枚举值作为提示文本
icon: 'none'
});
}, delayTime); // 使用传入的延迟时间(或默认200ms)
return false;
}
/**
* 跨平台震动反馈封装(适配安卓/iOS)轻震
* @returns {Promise<boolean>} 是否成功触发震动
*/
export const vibrateLight = () : void => {
// #ifdef APP-PLUS
try {
if (IsAndEnv) {
uni.vibrateShort({
success: function () {
console.log('success');
}
});
} else {
let UIImpactFeedbackGenerator = plus.ios.importClass(
'UIImpactFeedbackGenerator'
)
let impact = new UIImpactFeedbackGenerator()
impact.prepare()
impact.init(1)
impact.impactOccurred()
}
} catch (error) {
console.error('震动功能执行异常:', error);
}
// #endif
}
return false;
}
+35 -3
View File
@@ -6,7 +6,7 @@
* - 'text_input' : 文字输入中状态(文字输入面板展开,用户正在输入)
* - 'voice_to_text' : 语音转文字状态(独立的语音转文字页面/面板展开)
*/
export type StatusType = 'default' | 'voice_recording' | 'text_input' | 'voice_to_text';
export type StatusType = 'default' | 'voice_recording' | 'text_input' | 'voice_to_text' | 'voice_send_ing';
/**
* 语音转文字的子状态(仅当主状态为 voice_to_text 时生效)
@@ -14,7 +14,7 @@ export type StatusType = 'default' | 'voice_recording' | 'text_input' | 'voice_t
export type VoiceToTextSubStatus =
| '' // 纯空
| 'init' // 初始化(刚进入语音转文字页面)
| 'loading' // 转换中(正在处理语音→文字)
// | 'loading' // 转换中(正在处理语音→文字)
| 'success' // 转换完成(成功得到文字结果)
| 'failed'; // 转换失败(网络/识别错误等)
@@ -31,4 +31,36 @@ export enum ErrorCode {
export interface ShowErrorTipOptions {
// 提示框延迟显示时间(毫秒),默认200ms
delayTime?: number;
}
}
/**
* 触摸按钮组件的自定义事件类型定义
* 包含录音、提交、加载相关的所有事件及参数规范
*/
export type TouchBtnEmits = {
/**
* 提交语音内容(语音转文字完成后触发)
* @param voiceData - 语音相关数据(包含ossKey、识别文本等核心字段)
* @param duration - 录音时长(单位:毫秒),用于校验最短录音时长
*/
submitVoice: [params: { ossKey: string; text: string }];
/**
* 提交文字答案(用户确认识别结果/手动编辑后触发)
* @param answerText - 最终提交的文字答案内容
* @param isManualEdit - 是否手动编辑过识别结果(true=手动修改,false=纯语音识别)
*/
submitAnswer: [answerText: string, isManualEdit: boolean];
/**
* 开始录音(用户点击录音按钮时触发)
* @param recordParams - 录音初始化参数(可选,默认使用组件内置配置)
*/
startRecord: [recordParams?: { sampleRate: number; channels: number }];
/**
* 发送加载状态(提交语音/文字时触发,控制父组件加载动画)
* @param isLoading - 是否处于加载中(true=显示加载,false=隐藏加载)
* @param loadingText - 加载提示文本(可选,默认:"处理中..."
*/
sendLoading: [params: { recordId: string; loadingText?: string }];
};
+103 -64
View File
@@ -1,29 +1,28 @@
<template>
<view>
<view class="talk-btns" :class="{action:isRecording, inputMode:!isInputVisible}">
<view class="talk-btns-components" :class="{action:isRecording, inputMode:!isInputVisible}">
<view class="touch-btn" @click="disabled_click">
<button v-if="!isTextOnlyMode && isInputVisible" class="voice-btn" @touchstart="startRecord"
@touchend="stopRecord()" @touchmove="handleMove" @touchcancel="stopRecord()" :plain="true">
<text class="voice-text">{{ isRecording ? '松开发送' : '按住说话' }}</text>
</button>
<input v-if="!isVoiceOnlyMode && !isInputVisible" class="input-box" ref="inputRef" v-model="inputText"
:maxlength="props.textValueLength" :adjustPosition="true"
:maxlength="props.maxlength" :adjustPosition="true"
placeholderStyle="color:#999999;font-size:26rpx" placeholder="请输入文字"
:disabled="props.isDisabled"></input>
:disabled="props.isDisabled" @click="disabled_click"></input>
</view>
<view class="talk-right-icon-div" v-if="!isTextOnlyMode && !isVoiceOnlyMode">
<image class="talk-right-icon" :src="talkRightIcon" mode="widthFix" @click="changeBtn"></image>
</view>
</view>
<!-- :class="{ 'is-out': isOutStatus === '02', 'is-translate': isOutStatus === '03', voice_to_text_status: status === 'voice_to_text'}" -->
<uni-popup ref="popupRef" class="popup">
<view class="overlay-box">
<uni-popup ref="popupRef" class="popup" @touchmove.stop.prevent="false">
<view class="overlay-box" >
<view class="fl1"></view>
<view class="talk-dialog-box">
<view class="talk-dialog-div" :class="dialogDynamicClasses">
<view class="talk-dialog" >
<image :src="voiceWhiteBtn" mode="" class="gif-box"></image>
<uv-textarea ref="inputRef" v-model="textAreaText" :maxlength="255" @click.stop
<uv-textarea class="textarea" ref="inputRef" v-model="textAreaText" :maxlength="255" @click.stop
customStyle="background: #ffffff00; padding-bottom: 50rpx; color: #fff; caret-color: #fff"
text-style="color: #fff" border="none" placeholderStyle="color:#999999;font-size:26rpx;"
placeholder=""></uv-textarea>
@@ -37,32 +36,36 @@
</view>
</view>
<!-- 第一形态两侧按钮 -->
<view class="page-1" :class="[ status]">
<view class="btns-box">
<!-- 左侧取消按钮 -->
<image class="btn-box btn-box-1" :src="isOutStatus == '02' ? cancelActiveBtn : cancelBtn"
mode="heightFix" @click="closePopup()"></image>
<!-- 右侧转文字按钮 -->
<image class="btn-box btn-box-2" :src="isOutStatus == '03' ? translateActiveBtn : translateBtn"
mode="heightFix"></image>
<view class="page-box" :style="{marginBottom:pageBoxMarginBottom}">
<view class="page-1" :class="[status, props.mode]">
<view class="btns-box">
<!-- 左侧取消按钮 -->
<image class="btn-box btn-box-1" :src="isOutStatus == '02' ? cancelActiveBtn : cancelBtn"
mode="heightFix" @click="closePopup()"></image>
<!-- 右侧转文字按钮 -->
<image class="btn-box btn-box-2" :src="isOutStatus == '03' ? translateActiveBtn : translateBtn"
mode="heightFix"></image>
<image class="btn-box-3" :src="isOutStatus == '02'? closeActiveBtn : closeBtn"
mode="heightFix" @click="closePopup()"></image>
</view>
<!-- 下方按钮 -->
<view class="circle-bg-box">
<view class="tips-box">松开发送</view>
</view>
</view>
<!-- 下方按钮 -->
<view class="circle-bg-box">
<view class="tips-box">松开发送</view>
<!-- 第二形态 -->
<view class="page-2" :class="[ status, voice_to_text_status]" >
<!-- 左侧XX -->
<view class="transVoiceIng cancel-btn" @click="closePopup()"><text class="btn-text">取消</text></view>
<!-- 中间发送原语音 -->
<view class="transVoiceIng trans-btn" @click="testFun()"><text class="btn-text">发送原语音</text></view>
<!-- 右侧发送按钮椭圆 -->
<view class="send-btn" @click="send_msg()">
<view class="send-btn-text">发送</view>
<CommonLoading class="send-btn-loading" color="#444"/>
</view>
</view>
</view>
<!-- 第二形态 -->
<view class="page-2" :class="[ status, voice_to_text_status]">
<!-- 左侧XX -->
<view class="transVoiceIng cancel-btn" @click="closePopup()"></view>
<!-- 中间发送原语音 -->
<view class="transVoiceIng trans-btn" @click="testFun()"></view>
<!-- 右侧发送按钮椭圆 -->
<view class="send-btn">发送</view>
</view>
</view>
</uni-popup>
</view>
@@ -70,26 +73,32 @@
<script setup lang="ts">
// 导出图片
import { cancelBtn, cancelActiveBtn, translateBtn, translateActiveBtn, voiceWhiteBtn, icKeyboardSvg, iconMicSvg, iconSendSvg, iconRecognizeErrorSvg } from './touch-btn.images';
import { cancelBtn, cancelActiveBtn, translateBtn, translateActiveBtn, voiceWhiteBtn,closeBtn,closeActiveBtn, icKeyboardSvg, iconMicSvg, iconSendSvg, iconRecognizeErrorSvg } from './touch-btn.images';
import { StatusType, VoiceToTextSubStatus,ErrorCode } from './touch-btn.types';
import { wsUrl, bottomAreaTopBoundary, horizontalSplitX, initWebSocket, showErrorTip } from './touch-btn';
import type {TouchBtnEmits } from './touch-btn.types';
import { wsUrl, bottomAreaTopBoundary, horizontalSplitX, initWebSocket, showErrorTip, vibrateLight } from './touch-btn';
import { ref, computed, onMounted, nextTick, watch, reactive } from 'vue';
import common from '@/common/common';
import { onHide, onLaunch } from '@dcloudio/uni-app';
import common from '@/common/common';
import {setupKeyboardHeightListener} from '@/common/common';
import { startAudioRecord, stopAudioRecord, preRequestRecordPermission } from '@/uni_modules/ty-recording';
import { ProtocolCodec, MessageType, ControlCommand, ControlCode } from '@/common/protocolCodec';
import { ProtocolCodec, MessageType, ControlCommand, ControlCode, ControlBody } from '@/common/protocolCodec';
import permissionApi from '@/common/permission';
const emit = defineEmits(['submit']);
const emit = defineEmits<TouchBtnEmits>();
const pageBoxMarginBottom = ref('0px'); // 适配输入法
const ws = ref(null);
const wsStatus = ref(false);
const status = ref<StatusType>('default');
const voice_to_text_status = ref<VoiceToTextSubStatus>('init');
const popupRef = ref(null);
// 'uploadVoice'
// const emit = defineEmits(['submitVoice', 'submitAnswer', 'startRecord', 'sendLoading']);
const props = defineProps({
// mode控制功能模式
mode: {
type: String,
default: 'both',
default: 'voice-only',
validator: (value : string) => {
return ['voice-only', 'text-only', 'both'].includes(value);
}
@@ -106,6 +115,7 @@
default: '发送回答中,请稍后再试!',
type: String
},
// 禁用时候点击反馈的文本
disabledText: {
default: '请稍后再试!',
type: String
@@ -118,7 +128,7 @@
default: '当前状态不能发送内容!',
type: String
},
textValueLength: {
maxlength: {
type: Number,
default: 500
},
@@ -144,6 +154,7 @@
return classes;
});
const recordId = ref('');
const allText = ref('');
const tempText = ref('');
const inputText = ref('');
@@ -167,6 +178,8 @@
const isOutStatus = computed(() => {
const { y: touchY, x: touchX } = touchPos;
if (touchY >= bottomAreaTopBoundary) return '01';
// 仅语音模式只能返回02,就是取消
if(props.mode === 'voice-only') return '02';
return touchX < horizontalSplitX ? '02' : '03';
});
// 监听按下移动
@@ -180,10 +193,11 @@
}
// 开启语音
const startRecord = async (obj : { touches : any[]; }) => {
if(props.isDisabled) return;
try {
const state = await permissionApi.judgeIosPermission('record');
if (state === 'not determined') { // 苹果专用
preRequestRecordPermission(() => { })
preRequestRecordPermission(() => {})
return;
}
} catch (e) {
@@ -203,11 +217,29 @@
ws.value.onMessage((res : { data : Uint8Array | ArrayBuffer; }) => {
try {
const { msgType, body } = ProtocolCodec.unpack(res.data);
console.log('msgType', msgType, body);
if (msgType === MessageType.TEXT_MESSAGE) {
tempText.value = '';
allText.value = allText.value + body;
} else if (msgType === MessageType.TIP_MESSAGE) {
// tempText.value = body;A
tempText.value = body as string;
} else if (msgType === MessageType.CONTROL_CMD) { // 返回结束消息
const controlBody = body as ControlBody;
if(controlBody.type === ControlCode.SERVER_TO_FRONT_OVER) {
if(controlBody?.txt === '') { //说明没有识别到文字
voice_to_text_status.value = 'failed'
// todo
} else { // 识别成功
voice_to_text_status.value = 'success'
const ossKey = controlBody?.ossKey;
const text = controlBody?.txt;
// todo
console.log('ossKey', ossKey);
emit('submitVoice', {ossKey,text})
}
}
}
} catch (e) {
console.log('后端发来的信息有问题');
@@ -218,11 +250,7 @@
console.log('网络出现问题');
})
pressTimer.value = setTimeout(() => {
uni.vibrateShort({
success: function () {
console.log('success');
}
});
vibrateLight() // 触感震动
// 重设按下位置
const changedTouche = obj.touches[0];
touchPos.x = changedTouche.clientX;
@@ -233,15 +261,13 @@
popupRef.value.open();
startAudioRecord({
onFrame: (pcmData : any) => {
if (wsStatus.value) {
console.log('已连接', pcmData.length);
ws.value.send({
data: ProtocolCodec.pack(MessageType.AUDIO_DATA, pcmData)
});
if (wsStatus.value && ws.value) {
ws.value.send({ data: ProtocolCodec.pack(MessageType.AUDIO_DATA, pcmData)});
}
},
onStart: (res : any) => {
console.log('启动', res);
recordId.value = res.recordId ?? ''
},
onStop: () => {
console.log('关闭');
@@ -253,7 +279,7 @@
}
}
});
}, 140)
}, 120)
};
// 结束录音
@@ -263,9 +289,14 @@
const stopRecord = async (errrStatus='') => {
clearTimeout(pressTimer.value);
if (!isRecording.value) return; // 未处于录音状态
if (isOutStatus.value === '03') { // 转换文字状态
console.log('已发送', '03转文字');
switchFromVoiceToText()
if (isOutStatus.value === '03') {
status.value = 'voice_to_text' //主状态设置为转文字
voice_to_text_status.value = 'init'
} else if(isOutStatus.value === '01') {
status.value = 'voice_send_ing' //主状态设置为语音发送中
}
if(['01', '03'].includes(isOutStatus.value)) { // 向后端发送抬手动作
ws.value && ws.value.send({ data: ProtocolCodec.pack(MessageType.CONTROL_CMD, { type: ControlCode.FRONT_TO_SERVER_OVER})});
}
const recordDurationMs = Date.now() - recordStartTime.value;
if (isOutStatus.value !== '02') { // 取消的时候,不校验最低时间
@@ -290,7 +321,8 @@
});
}
stopAudioRecord(); // 关掉录音
if (isOutStatus.value !== '03' || errrStatus === 'networkError') { // 转文字时候不关遮罩层,网络错误必须关
if (isOutStatus.value !== '03' || errrStatus === 'networkError') { // 转文字时候不关遮罩层,网络错误必须关遮罩层
popupRef.value.close();
// 关掉弹窗后的提示
if(errrStatus === 'networkError') {
@@ -299,22 +331,18 @@
return showErrorTip(ErrorCode.ShortRecord)
}
}
if(isOutStatus.value === '01' && status.value == 'voice_send_ing') {
emit('sendLoading', {recordId:recordId.value})
}
};
// 从录音状态切换成转文字状态
const switchFromVoiceToText = () => {
status.value = 'voice_to_text'
ws.value && ws.value.send({ data: ProtocolCodec.pack(MessageType.CONTROL_CMD, { type: ControlCode.FRNOT_TO_SERVER_OVER, ossID: '', text: '' }) });
voice_to_text_status.value = 'init'
// 执行动画
}
// 发送文本
const showKeyboard = () => {
if (isInputVisible.value) {
const inputTextTram = inputText.value.trim();
if (inputTextTram) {
emit('submit', 'text', inputTextTram);
// emit('submit', 'text', inputTextTram);
} else {
common.msg('不能发送空白消息!');
}
@@ -322,18 +350,29 @@
isInputVisible.value = !isInputVisible.value;
}
};
// 切换键盘语音
const changeBtn = () => {
if (props.isDisabled) return;
isInputVisible.value = !isInputVisible.value;
inputText.value = '';
};
// 禁用时点击给的提示
const disabled_click = () => {
console.log('禁用时点击给的提示');
if (props.isDisabled) common.msg(props.disabledText);
};
const send_msg = () => {
console.log('点击发送');
}
setupKeyboardHeightListener((height:number) => {
const _height = Math.max(height - 100, 0)
pageBoxMarginBottom.value = `${_height}px`;
});
// 外面调用放弃这次
const give_up = () => {
console.log('调用结束语音回答');
+7 -7
View File
@@ -111,13 +111,13 @@
</view>
</scroll-view>
</view>
<!-- <TouchBtn class="talk-btns" @uploadVoice="uploadRecordNow" @submitAnswer="submitAnswerNow"
@startRecord="startRecordCallback" :loadingText="sendLoadingText" :isLoading="!answerIsOver"
:adjustPosition="true" :isDisabled="isHistory" /> -->
<touch-btn @uploadVoice="uploadRecordNow" @submitAnswer="submitAnswerNow"
<TouchBtn class="talk-btns" @uploadVoice="uploadRecordNow" @submitAnswer="submitAnswerNow"
@startRecord="startRecordCallback" :loadingText="sendLoadingText" :isLoading="!answerIsOver"
:adjustPosition="true" :isDisabled="isHistory" />
<!-- <touch-btn @uploadVoice="uploadRecordNow" @submitAnswer="submitAnswerNow"
@startRecord="startRecordCallback" :loadingText="sendLoadingText" :isLoading="!answerIsOver"
:adjustPosition="true" :isDisabled="isHistory" /> -->
<History ref="historyRef" @showDetail="showHistoryDetail"></History>
<PreviewVue ref="previewRef" />
</scroll-view>
@@ -146,7 +146,7 @@
import {
setupKeyboardHeightListener
} from '@/common/common';
// import TouchBtn from '@/pages/course/components/touchBtn.vue';
import TouchBtn from '@/pages/course/components/touchBtn.vue';
import TalkingItem from './components/talking-item.vue';
import PreviewVue from './components/preview.vue';
import {
@@ -707,6 +707,7 @@
const sendText = (item) => {
submitAnswerNow(item);
};
// 发送语音
const uploadRecordNow = (voicePath, voiceTime) => {
// /traask/traAskchat/voiceTrans
@@ -823,7 +824,6 @@
const getQuestionList = () => {
queryHotQuestionApi().then((res) => {
console.log(res);
questionList.value = res.body
.map((t) => {
return {
+12 -4
View File
@@ -80,7 +80,7 @@
:onlyVoice="true"
:answerMethod="answerMethod"
/>
<TouchBtn
<!-- <TouchBtn
v-else
class="talk-btns"
ref="touchBtnRef"
@@ -91,7 +91,16 @@
:adjustPosition="false"
:isDisabled="false"
:answerMethod="answerMethod"
/> -->
<touch-btn
v-else
class="talk-btns"
ref="touchBtnRef"
@uploadVoice="touchBtnSubmit('voice', $event)"
@submitAnswer="touchBtnSubmit('text', $event)"
:isLoading="touchIsDisabled"
loadingText="只能进行一条回答"
:answerMethod="answerMethod"
/>
</view>
@@ -112,7 +121,7 @@
import Subject from '@/components/examination/subject.vue';
import CharactersSubject from '@/components/examination/characters-subject.vue';
// import TouchBtn from '@/components/examination/touchBtn.vue';
import TouchBtn from '@/pages/course/components/touchBtn.vue';
// import TouchBtn from '@/pages/course/components/touchBtn.vue';
import TouchBtnOnlyVoice from '@/pages/course/components/touchBtnOnlyVoice.vue';
import common from '@/common/common';
import { setPageCache, formatSeconds, getPageCache, setupKeyboardHeightListener } from '@/common/common';
@@ -395,7 +404,6 @@
practiceStartTime = new Date().getTime();
setupKeyboardHeightListener((height) => {
popup_input_bottom.value = `${height}px`;
console.log('需要卸载吗');
});
});
const result_click = async ({ key }) => {
@@ -1,3 +1,3 @@
{
"minSdkVersion": "21"
"minSdkVersion": "35"
}
@@ -22,7 +22,8 @@ const minBufferSize = AudioRecord.getMinBufferSize(sampleRate, channelConfig, au
const bufferSize = minBufferSize * 2;
let audioRecord : AudioRecord | null = null;
let recordThread : Thread | null = null;
// 新增:录音启动时间戳(毫秒)
let recordStartTime: number | null = null;
// ========== 2. 对外暴露的便捷方法(符合UTS导出规范) ==========
@UTSJS.keepAlive
export function startAudioRecord(options : StartAudioRecordOptions) : void {
@@ -43,9 +44,12 @@ export function startAudioRecord(options : StartAudioRecordOptions) : void {
isRecording.set(true)
const _recordThread = new Thread(() => {
_audioRecord.startRecording(); // 开始采集
const recordId = `${new Date().getTime()}_${Math.floor(Math.random() * 10000)}`;
recordStartTime = new Date().getTime();
options.onStart?.({
startTime:1111111
startTime: recordStartTime as number,
sampleRate:sampleRate as number,
recordId: recordId
} as AudioStartRes);
console.log('AudioRecord已启动采集');
const buffer = new ByteArray(bufferSize); // 缓冲区只创建一次,避免重复分配内存
@@ -96,5 +100,4 @@ export function stopAudioRecord() : void {
}
}
}
export function preRequestRecordPermission(callback?: (granted: boolean) => void) {}
export function preRequestRecordPermission(callback ?: (granted : boolean) => void) { callback?.(true); }
@@ -125,7 +125,7 @@ export function startAudioRecord(options: StartAudioRecordOptions): void {
console.log("硬件原生格式:", inputFormat.commonFormat);
recordStartTime = new Date().getTime();
// 1. 生成录音唯一标识(UUID,方便多录音实例管理)
const recordId = `${new Date().getTime()}-${Math.floor(Math.random() * 10000)}`;
const recordId = `${new Date().getTime()}_${Math.floor(Math.random() * 10000)}`;
options.onStart?.({
recordId: recordId, // 唯一标识
sampleRate: inputFormat.sampleRate, // 采样率
@@ -6,7 +6,7 @@
// 成功开启录音的回调参数:返回录音基础配置
export type AudioStartRes = {
recordId ?: string; // 录音唯一标识(方便多录音实例管理)
recordId : string; // 录音唯一标识(方便多录音实例管理)
sampleRate ?: number; // 采样率(如16000
startTime : number; // 开启时间戳(毫秒)
};
+3 -1
View File
@@ -3,6 +3,7 @@
"moduleResolution": "NodeNext", // 或 "Node"
"module": "NodeNext", // 与 moduleResolution 保持一致
"target": "ES2022",
"strict": false, // 新手建议先关闭严格模式,避免过多报错
"jsx": "preserve",
"lib": ["ES2022", "DOM"],
"baseUrl": ".", // 表示以 tsconfig.json 所在目录为基准
@@ -11,5 +12,6 @@
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules"]
}