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

src/components/touch-btn/style/index.scss

@@ -1,4 +1,4 @@
-.talk-btns {
+.talk-btns-components {
 	position: flex;
 	left: 0;
 	bottom: 0;

src/components/touch-btn/style/popup.scss

@@ -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;
 		}
 	}
-	
-	
-	
-	
-	
-	
 }

src/components/touch-btn/touch-btn.images.ts

@@ -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>

src/components/touch-btn/touch-btn.ts

@@ -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;
-}

src/components/touch-btn/touch-btn.types.ts

@@ -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 }];
+};
+

src/components/touch-btn/touch-btn.vue

@@ -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('调用结束语音回答');