vue_zhongyou 1.0.22 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_zhongyou",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "",
   "main": "index.js",
   "keywords": [],

package//345/212/237/350/203/275/344/273/243/347/240/201//345/275/225/351/237/263/inputCom.vue

@@ -0,0 +1,591 @@
+template
+<template>
+  <div class="input-area">
+    <!-- 输入区域 -->
+    <div v-if="!isReadyRecording" class="input-wrapper">
+        <van-field
+            v-model="inputText"
+            type="textarea"
+            rows="1"
+            autosize
+            placeholder="输入您的问题..."
+            :disabled="isLoading"
+            @keydown.enter.exact.prevent="handleEnter"
+            @keydown.shift.enter.exact="handleShiftEnter"
+            @focus="handleInputFocus"
+            class="chat-input"
+        />
+        <img v-if="inputText.length === 0" @click="handleClickBtn('recording')" src="@/assets/svg/voice.svg" alt="清除图标" class="clear-icon" />
+        <img v-else @click="handleEnter" src="@/assets/svg/send.svg" alt="发送图标" class="send-icon" />
+    </div>
+    <!-- 录音区域 -->
+    <div v-else
+        class="voice-container"
+        :class="{
+            recording: isRecording
+        }" 
+        @touchstart.prevent="startRecord" @touchend="handleTouchEnd" 
+        @touchmove="handleTouchMove"
+        @touchcancel="cancelRecord" 
+        @mousedown.prevent="startRecord" 
+        @mouseup="handleMouseUp"
+        @mouseleave="handleMouseLeave"
+    >
+        <div class="btn-tip" v-show="isRecording">{{ isTouchInside ? '松手发送，上移取消' : '松手取消' }}</div>
+        <div v-if="isRecording" class="waveform-container" ref="waveformRef"></div>
+        <div v-show="!isRecording" class="input-wrapper" style="display: flex; align-items: center;max-width: 100%;gap: 8px;">
+            <div class="hold-say">按住说话</div>
+            <img src="@/assets/svg/sendText.svg" alt="录音图标" class="voice-icon" 
+                @mousedown.stop @touchstart.stop @click.stop="handleClickBtn('cancel')"
+            />
+        </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted,nextTick } from 'vue'
+import WaveSurfer from 'wavesurfer.js'
+
+const props = defineProps({
+  isLoading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['sendMessage'])
+
+const inputText = ref('')
+const isReadyRecording = ref(false) // 是否准备好录音
+
+
+
+const handleEnter = () => {
+  if (inputText.value.trim()) {
+    emit('sendMessage', inputText.value)
+    inputText.value = ''
+  }
+}
+
+const handleShiftEnter = () => {
+  inputText.value += '\n'
+}
+
+const handleInputFocus = () => {
+  if (props.isLoading) {
+    setTimeout(() => {
+      inputText.value = ''
+    }, 500)
+  }
+}
+const handleClickBtn = (type) => {
+  if (type === 'recording') {
+    isReadyRecording.value = true
+  } else if (type === 'cancel') {
+    isReadyRecording.value = false
+  }
+}
+
+defineExpose({
+  inputText
+})
+
+
+
+// 录音逻辑
+
+const isRecording = ref(false)
+const audioUrl = ref('')
+const recordTip = ref('')
+const isTouchInside = ref(true) // 跟踪触摸是否在按钮内
+const voiceButtonRef = ref(null)
+const waveformRef = ref(null)
+let mediaRecorder = null // 媒体录制器实例
+let stream = null // 音频流
+let recordTimer = null // 录音定时器
+const audioChunks = ref([]) // 存储录音二进制数据
+const waveSurferInstance = ref(null) // 波形图实例
+const audioContext = ref(null) // 音频上下文
+const analyser = ref(null) // 分析器
+const source = ref(null) // 音频源
+const animationFrame = ref(null) // 动画帧
+const dataArray = ref(null) // 音频数据数组
+
+onUnmounted(() => {
+  cancelRecord()
+  // 确保清理所有资源
+  if (animationFrame.value) {
+    cancelAnimationFrame(animationFrame.value);
+  }
+  if (waveSurferInstance.value) {
+    waveSurferInstance.value.destroy();
+    waveSurferInstance.value = null;
+  }
+  if (audioContext.value) {
+    audioContext.value.close();
+    audioContext.value = null;
+  }
+})
+// 开始录音（使用原生MediaRecorder）
+const startRecord = async () => {
+  try {
+    // 判断浏览器是否支持录音API
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+      recordTip.value = '当前浏览器不支持录音功能'
+      return
+    }
+    
+    // 获取麦克风权限，开启音频流
+    stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    
+    // 检测浏览器支持的音频格式
+    let options = { mimeType: 'audio/webm' }
+    if (MediaRecorder.isTypeSupported('audio/webm;codecs=opus')) {
+      options = { mimeType: 'audio/webm;codecs=opus' }
+    } else if (MediaRecorder.isTypeSupported('audio/webm')) {
+      options = { mimeType: 'audio/webm' }
+    } else if (MediaRecorder.isTypeSupported('audio/ogg;codecs=opus')) {
+      options = { mimeType: 'audio/ogg;codecs=opus' }
+    } else if (MediaRecorder.isTypeSupported('audio/mp4')) {
+      options = { mimeType: 'audio/mp4' }
+    }
+    
+    mediaRecorder = new MediaRecorder(stream, options)
+    audioChunks.value = []
+    recordTip.value = ''
+
+    // 实时收集录音数据
+    mediaRecorder.ondataavailable = (e) => {
+      audioChunks.value.push(e.data)
+    }
+
+    // 开始录音
+    mediaRecorder.start()
+    isRecording.value = true
+    recordTip.value = '正在录音...'
+    
+    // 设置最长录音时间为1分钟
+    recordTimer = setTimeout(() => {
+      stopRecord();
+      recordTip.value = '录音已超时（最长1分钟）';
+    }, 60 * 1000); // 60秒
+    
+    // 创建实时波形图
+    await createRealTimeWaveform();
+  } catch (err) {
+    console.error('录音开启失败：', err)
+    const errMap = {
+      'NotAllowedError': '麦克风权限被拒绝！请开启',
+      'NotFoundError': '未检测到麦克风',
+      'SecurityError': '请在HTTPS环境下使用'
+    };
+    recordTip.value = errMap[err.name] || `录音失败：${err.message}`;
+    isRecording.value = false
+  }
+}
+
+// 停止录音
+const stopRecord = () => {
+    if (!isRecording.value || !mediaRecorder) return
+    if (mediaRecorder.state !== 'recording') return
+
+    // 清除录音定时器
+    if (recordTimer) {
+      clearTimeout(recordTimer);
+      recordTimer = null;
+    }
+
+    // 停止录音并释放麦克风
+    mediaRecorder.stop()
+    stream.getTracks().forEach(track => track.stop())
+    isRecording.value = false
+
+    // 将音频转换为WAV格式
+        const convertToWav = async (blob) => {
+            return new Promise(async (resolve, reject) => {
+                try {
+                    // 创建音频上下文
+                    const audioContext = new (window.AudioContext || window.webkitAudioContext)({
+                      sampleRate: 16000 // 设置采样率为16000Hz，这是语音识别常用采样率
+                    })
+                    
+                    // 将Blob转换为ArrayBuffer
+                    const arrayBuffer = await blob.arrayBuffer()
+                    
+                    // 解码音频数据
+                    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer)
+                    
+                    // 创建WAV文件头
+                    const numOfChan = audioBuffer.numberOfChannels
+                    const length = audioBuffer.length * numOfChan * 2
+                    const buffer = new ArrayBuffer(44 + length)
+                    const view = new DataView(buffer)
+                    
+                    // RIFF标识符
+                    writeString(view, 0, 'RIFF')
+                    // 文件长度
+                    view.setUint32(4, 32 + length, true)
+                    // WAVE标识符
+                    writeString(view, 8, 'WAVE')
+                    // fmt标识符
+                    writeString(view, 12, 'fmt ')
+                    // fmt块长度
+                    view.setUint32(16, 16, true)
+                    // 格式类型 (PCM)
+                    view.setUint16(20, 1, true)
+                    // 通道数
+                    view.setUint16(22, numOfChan, true)
+                    // 采样率
+                    view.setUint32(24, audioBuffer.sampleRate, true)
+                    // 字节率
+                    view.setUint32(28, audioBuffer.sampleRate * numOfChan * 2, true)
+                    // 块对齐
+                    view.setUint16(32, numOfChan * 2, true)
+                    // 位深度
+                    view.setUint16(34, 16, true)
+                    // data标识符
+                    writeString(view, 36, 'data')
+                    // 数据长度
+                    view.setUint32(40, length, true)
+                    
+                    // 将PCM数据写入缓冲区
+                    floatTo16BitPCM(view, 44, audioBuffer.getChannelData(0))
+                    if (numOfChan === 2) {
+                        floatTo16BitPCM(view, 44 + audioBuffer.length * 2, audioBuffer.getChannelData(1))
+                    }
+                    
+                    // 创建WAV Blob
+                    const wavBlob = new Blob([view], { type: 'audio/wav' })
+                    resolve(wavBlob)
+                } catch (error) {
+                    reject(error)
+                }
+            })
+        }
+        
+        // 辅助函数：写入字符串到DataView
+        const writeString = (view, offset, string) => {
+            for (let i = 0; i < string.length; i++) {
+                view.setUint8(offset + i, string.charCodeAt(i))
+            }
+        }
+        
+        // 辅助函数：将32位浮点数转换为16位PCM
+        const floatTo16BitPCM = (view, offset, buffer) => {
+            for (let i = 0; i < buffer.length; i++, offset += 2) {
+                const s = Math.max(-1, Math.min(1, buffer[i]))
+                view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true)
+            }
+        }
+        
+        // 录音结束的回调 - 生成音频文件
+        mediaRecorder.onstop = async () => {
+            try {
+                console.log(audioChunks.value);
+                
+                // 使用录制时的实际MIME类型
+                const audioBlob = new Blob(audioChunks.value, { type: mediaRecorder.mimeType })
+                
+                // 转换为WAV格式
+                // audioUrl.value = URL.createObjectURL(audioBlob)
+                const wavBlob = await convertToWav(audioBlob)
+                
+                audioUrl.value = URL.createObjectURL(wavBlob)
+                recordTip.value = '录音完成，已自动播放'
+
+                // ✅ 核心：这里把 wavBlob 传给后端做【语音转文字】即可
+                // 传参格式：new FormData().append('file', wavBlob, 'voice.wav')
+                console.log('原始录音文件Blob对象：', audioBlob)
+                console.log('原始录音文件MIME类型：', mediaRecorder.mimeType)
+                console.log('原始录音文件大小：', audioBlob.size)
+                console.log('WAV格式录音文件Blob对象：', wavBlob)
+                console.log('WAV格式录音文件MIME类型：', wavBlob.type)
+                console.log('WAV格式录音文件大小：', wavBlob.size)
+            } catch (error) {
+                console.error('音频转换失败：', error)
+                recordTip.value = '音频转换失败'
+            }
+        }
+    // 停止波形图
+    stopRealTimeWaveform();
+}
+
+// 检查触摸点是否在元素内
+const isTouchWithinElement = (event, element) => {
+    const touch = event.touches[0] || event.changedTouches[0];
+    const rect = element.getBoundingClientRect();
+    return (
+        touch.clientX >= rect.left &&
+        touch.clientX <= rect.right &&
+        touch.clientY >= rect.top &&
+        touch.clientY <= rect.bottom
+    );
+};
+
+// 检查鼠标是否在元素内
+const isMouseWithinElement = (event, element) => {
+    const rect = element.getBoundingClientRect();
+    return (
+        event.clientX >= rect.left &&
+        event.clientX <= rect.right &&
+        event.clientY >= rect.top &&
+        event.clientY <= rect.bottom
+    );
+};
+
+// 触摸移动事件处理
+const handleTouchMove = (event) => {
+    const button = event.currentTarget;
+    isTouchInside.value = isTouchWithinElement(event, button);
+};
+
+// 触摸结束事件处理
+const handleTouchEnd = (event) => {
+    console.log('触摸结束事件触发');
+    if (!isRecording.value) return;
+
+    const button = event.currentTarget;
+    const isWithin = isTouchWithinElement(event, button);
+
+    if (isWithin) {
+        // 手指在按钮内松开，停止录音（发送）
+        stopRecord();
+    } else {
+        // 手指在按钮外松开，取消录音
+        cancelRecord();
+    }
+};
+
+// 鼠标抬起事件处理
+const handleMouseUp = (event) => {
+    console.log('鼠标抬起事件触发');
+    if (!isRecording.value) return;
+
+    const button = event.currentTarget;
+    const isWithin = isMouseWithinElement(event, button);
+
+    if (isWithin) {
+        // 鼠标在按钮内抬起，停止录音（发送）
+        stopRecord();
+    } else {
+        // 鼠标在按钮外抬起，取消录音
+        cancelRecord();
+    }
+};
+
+// 鼠标离开事件处理
+const handleMouseLeave = (event) => {
+    console.log('鼠标离开按钮区域');
+    
+    if (isRecording.value) {
+        // 鼠标离开按钮区域，取消录音
+        cancelRecord();
+    }
+};
+
+// 创建实时波形图
+  const createRealTimeWaveform = async () => {
+    if (!mediaRecorder) return
+
+    // 确保 DOM 已更新
+    await nextTick();
+    
+    // 如果已有波形图实例，先销毁
+    if (waveSurferInstance.value) {
+      waveSurferInstance.value.destroy();
+      waveSurferInstance.value = null;
+    }
+    
+    // 创建音频上下文和分析器
+    audioContext.value = new (window.AudioContext || window.webkitAudioContext)();
+    analyser.value = audioContext.value.createAnalyser();
+    source.value = audioContext.value.createMediaStreamSource(stream);
+    source.value.connect(analyser.value);
+    
+    // 配置分析器
+    analyser.value.fftSize = 256;
+    const bufferLength = analyser.value.frequencyBinCount;
+    dataArray.value = new Uint8Array(bufferLength);
+    
+    
+    // 使用 canvas 手动绘制波形
+    const container = waveformRef.value;
+    if (!container) return;
+    
+    // 确保容器干净
+    container.innerHTML = '';
+    
+    // 创建 canvas 元素
+    const canvas = document.createElement('canvas');
+    canvas.width = container.clientWidth || 160;
+    canvas.height = container.clientHeight || 50;
+    
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    container.appendChild(canvas);
+    
+    const ctx = canvas.getContext('2d');
+    
+    // 实时绘制波形
+    const draw = () => {
+      if (!isRecording.value || !analyser.value || !ctx) {
+        if (animationFrame.value) {
+          cancelAnimationFrame(animationFrame.value);
+          animationFrame.value = null;
+        }
+        return;
+      }
+      
+      // 获取频率数据
+      analyser.value.getByteFrequencyData(dataArray.value);
+      
+      
+      // 清空画布
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      
+      // 设置波形颜色
+      ctx.fillStyle = '#fff';
+      
+      // 计算每个条的宽度和间距
+      const barWidth = 2;
+      const barSpacing = 2;
+      const totalBarWidth = barWidth + barSpacing;
+      
+      // 绘制波形条
+      for (let i = 0; i < dataArray.value.length; i++) {
+        const value = dataArray.value[i];
+        const percent = value / 255; // 转换为0到1的范围
+        
+        // 设置最小高度为canvas高度的5%，最大高度为canvas高度的80%
+        const minHeight = canvas.height * 0.1;
+        const maxHeight = canvas.height * 0.6;
+        const height = Math.max(minHeight, Math.min(canvas.height * percent, maxHeight));
+        const offset = (canvas.height - height) / 2;
+        const x = i * totalBarWidth;
+        
+        // 绘制条形
+        ctx.fillRect(x, offset, barWidth, height);
+      }
+      
+      animationFrame.value = requestAnimationFrame(draw);
+    };
+    
+    draw();
+    };
+
+// 停止实时波形图
+const stopRealTimeWaveform = () => {
+  if (animationFrame.value) {
+    cancelAnimationFrame(animationFrame.value);
+    animationFrame.value = null;
+  }
+  
+  if (audioContext.value) {
+    audioContext.value.close();
+    audioContext.value = null;
+  }
+  
+  if (analyser.value) {
+    analyser.value = null;
+  }
+  
+  if (source.value) {
+    source.value = null;
+  }
+  
+  // 清空波形图容器
+  const container = waveformRef.value;
+  if (container) {
+    container.innerHTML = '';
+  }
+};
+
+// 取消录音（手指滑出按钮、页面销毁时触发）
+const cancelRecord = () => {
+  if (isRecording.value && mediaRecorder) {
+    // 清除录音定时器
+    if (recordTimer) {
+      clearTimeout(recordTimer);
+      recordTimer = null;
+    }
+    mediaRecorder.stop()
+    stream?.getTracks().forEach(track => track.stop())
+    audioChunks.value = []
+    isRecording.value = false
+    recordTip.value = '已取消录音'
+  }
+  // 停止波形图
+  stopRealTimeWaveform();
+  // 重置触摸状态
+  isTouchInside.value = true;
+}
+
+</script>
+
+<style scoped>
+.input-area {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border-top: 1px solid #ebedf0;
+  /* padding: 8px 12px;
+  padding-bottom: calc(8px + env(safe-area-inset-bottom)); */
+  z-index: 100;
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+}
+
+.chat-input {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.send-btn {
+  height: 32px;
+}
+
+.btn-tip{
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    transform: translate(-50%,-100%);
+    text-align: center;
+    color: #848080;
+}
+.recording{
+    background: #2217eb;
+}
+
+.voice-container{
+    width: 100%;
+    position: relative;
+    .waveform-container {
+        position: absolute;
+        z-index: 200;
+        height: 100px;
+        /* height: 100%; */
+        /* height: 80px; */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+    }
+
+    .hold-say{
+        flex: 1;
+        height: 44px;
+        text-align: center;
+        line-height: 44px;
+        color: #848080;
+        font-weight: bold;
+    }
+}
+
+</style>