JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_继续开发语音按钮
This commit is contained in:
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -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,4 +1,4 @@
|
||||
.talk-btns {
|
||||
.talk-btns-components {
|
||||
position: flex;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
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. 定义通用的向右移出动画(核心:添加时长,解决秒没) */
|
||||
@@ -31,7 +31,7 @@
|
||||
transform: translateY(0%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
transform: translateY(130%);
|
||||
}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
@@ -42,6 +42,11 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.page-box {
|
||||
position: relative;
|
||||
height: 500rpx;
|
||||
transition: margin-bottom 0.2s ease-out;
|
||||
}
|
||||
.page-1 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@@ -49,21 +54,24 @@
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
// 仅语音
|
||||
&.voice-only {
|
||||
.btn-box-1,
|
||||
.btn-box-2 {
|
||||
display: none;
|
||||
}
|
||||
.btn-box-3 {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
// 两侧按钮
|
||||
.btns-box {
|
||||
height: 240rpx;
|
||||
@@ -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 {
|
||||
@@ -113,12 +127,13 @@
|
||||
.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;
|
||||
@@ -131,10 +146,9 @@
|
||||
.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;
|
||||
@@ -144,6 +158,18 @@
|
||||
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 ;
|
||||
position: relative;
|
||||
// bottom: 560rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -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;
|
||||
@@ -216,6 +268,10 @@
|
||||
visibility: visible; // 激活后可见
|
||||
// animation: fadeIn 0.4s ease-out 0.1s forwards;
|
||||
}
|
||||
.textarea {
|
||||
// display: none;
|
||||
visibility: hidden; // 初始不可见且不占交互位置
|
||||
}
|
||||
}
|
||||
}
|
||||
.talk-dialog {
|
||||
@@ -246,7 +302,6 @@
|
||||
position: absolute;
|
||||
display: none;
|
||||
visibility: hidden; // 初始不可见且不占交互位置
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
@@ -258,10 +313,4 @@
|
||||
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>
|
||||
|
||||
@@ -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,13 +19,6 @@ 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连接地址
|
||||
@@ -40,14 +35,11 @@ export const initWebSocket = (wsUrl: string): Promise<UniApp.SocketTask> => {
|
||||
reject(new Error(`WS连接创建失败:${err.errMsg || err.message}`));
|
||||
},
|
||||
success: () => {
|
||||
console.log('WS连接创建请求已发送');
|
||||
}
|
||||
});
|
||||
|
||||
// 2. 监听连接成功(核心:连接成功时resolve,返回WS实例)
|
||||
const onOpenHandler = (res) => {
|
||||
console.log('ws已连接', res);
|
||||
// resolve返回WS实例
|
||||
resolve(ws);
|
||||
};
|
||||
|
||||
@@ -94,3 +86,32 @@ export function showErrorTip(
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
|
||||
@@ -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'; // 转换失败(网络/识别错误等)
|
||||
|
||||
@@ -32,3 +32,35 @@ 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 }];
|
||||
};
|
||||
|
||||
|
||||
@@ -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">
|
||||
<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,8 +36,8 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第一形态两侧按钮 -->
|
||||
<view class="page-1" :class="[ status]">
|
||||
|
||||
<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"
|
||||
@@ -46,6 +45,8 @@
|
||||
<!-- 右侧转文字按钮 -->
|
||||
<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">
|
||||
@@ -55,14 +56,16 @@
|
||||
<!-- 第二形态 -->
|
||||
<view class="page-2" :class="[ status, voice_to_text_status]" >
|
||||
<!-- 左侧XX -->
|
||||
<view class="transVoiceIng cancel-btn" @click="closePopup()"></view>
|
||||
<view class="transVoiceIng cancel-btn" @click="closePopup()"><text class="btn-text">取消</text></view>
|
||||
<!-- 中间发送原语音 -->
|
||||
<view class="transVoiceIng trans-btn" @click="testFun()"></view>
|
||||
<view class="transVoiceIng trans-btn" @click="testFun()"><text class="btn-text">发送原语音</text></view>
|
||||
<!-- 右侧发送按钮(椭圆) -->
|
||||
<view class="send-btn">发送</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>
|
||||
</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,6 +193,7 @@
|
||||
}
|
||||
// 开启语音
|
||||
const startRecord = async (obj : { touches : any[]; }) => {
|
||||
if(props.isDisabled) return;
|
||||
try {
|
||||
const state = await permissionApi.judgeIosPermission('record');
|
||||
if (state === 'not determined') { // 苹果专用
|
||||
@@ -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('调用结束语音回答');
|
||||
|
||||
@@ -111,12 +111,12 @@
|
||||
</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" />
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
@@ -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"]
|
||||
}
|
||||
Reference in New Issue
Block a user