vue_zhongyou 1.0.20 → 1.0.22

package/package.json

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

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

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1766727537085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1891" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 85.333c234.667 0 426.667 192 426.667 426.667S746.667 938.667 512 938.667 85.333 746.667 85.333 512 277.333 85.333 512 85.333zM505.6 320c-4.267 2.133-6.4 2.133-12.8 8.533l-153.6 153.6c-12.8 12.8-12.8 32 0 44.8 12.8 12.8 32 12.8 44.8 0l96-96v251.734c0 17.066 14.933 32 32 32s32-14.934 32-32V430.933l96 96c12.8 12.8 32 12.8 44.8 0s12.8-32 0-44.8l-153.6-153.6c-6.4-6.4-8.533-8.533-12.8-8.533s-8.533-2.133-12.8 0z" p-id="1892" fill="#0061b0"></path></svg>

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

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1766728091085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9111" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 1012.8c-68.8 0-132.8-12.8-195.2-40-59.2-25.6-112-62.4-158.4-107.2-46.4-46.4-81.6-100.8-107.2-158.4C25.6 644.8 11.2 580.8 11.2 512s12.8-132.8 40-195.2c25.6-59.2 62.4-112 107.2-158.4 46.4-46.4 100.8-83.2 158.4-107.2C379.2 25.6 443.2 11.2 512 11.2s132.8 12.8 195.2 40c60.8 25.6 112 62.4 158.4 107.2 46.4 46.4 83.2 100.8 107.2 158.4 25.6 62.4 40 126.4 40 195.2s-12.8 132.8-40 195.2c-25.6 60.8-62.4 112-107.2 158.4-46.4 46.4-100.8 83.2-158.4 107.2-62.4 27.2-126.4 40-195.2 40zM512 80C273.6 80 80 273.6 80 512s193.6 432 432 432 432-193.6 432-432S750.4 80 512 80z" fill="#515151" p-id="9112"></path><path d="M284.8 424h-9.6c-20.8 0-36.8-16-36.8-36.8V336c0-20.8 16-36.8 36.8-36.8h9.6c20.8 0 36.8 16 36.8 36.8v51.2c0 20.8-17.6 36.8-36.8 36.8zM441.6 424H432c-20.8 0-36.8-16-36.8-36.8V336c0-20.8 16-36.8 36.8-36.8h9.6c20.8 0 36.8 16 36.8 36.8v51.2c-1.6 20.8-17.6 36.8-36.8 36.8zM596.8 424h-9.6c-20.8 0-36.8-16-36.8-36.8V336c0-20.8 16-36.8 36.8-36.8h9.6c20.8 0 36.8 16 36.8 36.8v51.2c0 20.8-16 36.8-36.8 36.8zM753.6 424h-9.6c-20.8 0-36.8-16-36.8-36.8V336c0-20.8 16-36.8 36.8-36.8h9.6c20.8 0 36.8 16 36.8 36.8v51.2c0 20.8-16 36.8-36.8 36.8zM280 598.4h-9.6c-20.8 0-36.8-16-36.8-36.8v-51.2c0-20.8 16-36.8 36.8-36.8h9.6c20.8 0 36.8 16 36.8 36.8v51.2c0 20.8-16 36.8-36.8 36.8zM436.8 598.4h-9.6c-20.8 0-36.8-16-36.8-36.8v-51.2c0-20.8 16-36.8 36.8-36.8h9.6c20.8 0 36.8 16 36.8 36.8v51.2c0 20.8-16 36.8-36.8 36.8zM593.6 598.4h-9.6c-20.8 0-36.8-16-36.8-36.8v-51.2c0-20.8 16-36.8 36.8-36.8h9.6c20.8 0 36.8 16 36.8 36.8v51.2c-1.6 20.8-17.6 36.8-36.8 36.8zM748.8 598.4h-9.6c-20.8 0-36.8-16-36.8-36.8v-51.2c0-20.8 16-36.8 36.8-36.8h9.6c20.8 0 36.8 16 36.8 36.8v51.2c0 20.8-16 36.8-36.8 36.8zM721.6 740.8H308.8c-17.6 0-33.6-14.4-33.6-33.6v-9.6c0-17.6 14.4-33.6 33.6-33.6h412.8c17.6 0 33.6 14.4 33.6 33.6v9.6c0 19.2-16 33.6-33.6 33.6z" fill="#515151" p-id="9113"></path></svg>

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

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1766727960981" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6671" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 981.3504A469.3504 469.3504 0 1 0 512 42.6496a469.3504 469.3504 0 0 0 0 938.7008z m0-861.9008a392.5504 392.5504 0 1 1 0 785.1008 392.5504 392.5504 0 0 1 0-785.1008z" fill="#515151" p-id="6672"></path><path d="M552.704 513.9456q0-79.5136-56.2176-135.7824a38.4 38.4 0 1 0-54.272 54.272q33.6896 33.792 33.6896 81.5104t-33.7408 81.408a38.4 38.4 0 1 0 54.3232 54.3744q56.2176-56.2688 56.2176-135.7824zM645.8368 271.5136q101.0176 101.0176 101.0176 243.9168 0 142.848-101.0176 243.8656a38.4 38.4 0 1 1-54.3232-54.272q78.5408-78.592 78.5408-189.5936 0-111.104-78.5408-189.5936a38.4 38.4 0 1 1 54.272-54.3232z" fill="#515151" p-id="6673"></path><path d="M371.2 526.9504q0 2.816-0.256 5.632-0.3072 2.816-0.8704 5.632-0.512 2.7136-1.3312 5.4272t-1.9456 5.3248q-1.024 2.6112-2.4064 5.12-1.3312 2.5088-2.9184 4.864-1.536 2.3552-3.328 4.5056-1.792 2.2016-3.84 4.1984-1.9968 2.048-4.1472 3.7888-2.2016 1.792-4.5568 3.3792-2.3552 1.536-4.864 2.9184-2.4576 1.3312-5.12 2.4064-2.56 1.0752-5.2736 1.8944-2.7136 0.8192-5.5296 1.3824-2.7648 0.512-5.5808 0.8192t-5.632 0.3072q-2.816 0-5.632-0.3072-2.816-0.256-5.632-0.8192-2.7648-0.512-5.4784-1.3824-2.6624-0.8192-5.3248-1.8944-2.56-1.0752-5.12-2.4064-2.4576-1.3312-4.8128-2.9184-2.3552-1.536-4.5568-3.3792-2.1504-1.792-4.1472-3.7888-2.048-1.9968-3.84-4.1984-1.792-2.1504-3.328-4.5056-1.5872-2.3552-2.9184-4.864-1.3312-2.5088-2.4064-5.12-1.1264-2.56-1.9456-5.3248-0.8192-2.7136-1.3312-5.4784-0.5632-2.7648-0.8704-5.632Q256 529.8176 256 526.9504q0-2.816 0.256-5.632 0.3072-2.816 0.8704-5.5808 0.512-2.7648 1.3312-5.4784t1.9456-5.3248q1.024-2.56 2.4064-5.12 1.3312-2.4576 2.9184-4.8128 1.536-2.3552 3.328-4.5568t3.84-4.1984q1.9968-1.9968 4.1472-3.7888 2.2016-1.792 4.5568-3.3792 2.3552-1.536 4.864-2.8672 2.4576-1.3824 5.12-2.4576 2.56-1.024 5.2736-1.8944 2.7136-0.8192 5.5296-1.3824 2.7648-0.512 5.5808-0.8192 2.816-0.256 5.632-0.256t5.632 0.256q2.816 0.3072 5.632 0.8192 2.7648 0.5632 5.4784 1.3824 2.6624 0.8192 5.3248 1.8944 2.56 1.0752 5.12 2.4576 2.4576 1.3312 4.8128 2.8672 2.3552 1.5872 4.5568 3.3792 2.1504 1.792 4.1472 3.7888 2.048 2.048 3.84 4.1984 1.792 2.2016 3.328 4.5568 1.5872 2.3552 2.9184 4.8128 1.3312 2.56 2.4064 5.12 1.1264 2.6112 1.9456 5.3248t1.3312 5.4784q0.5632 2.7648 0.8704 5.632 0.256 2.7648 0.256 5.632z" fill="#515151" p-id="6674"></path></svg>

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

@@ -0,0 +1,453 @@
+<template>
+    <div class="voice-container">
+        <div class="btn-tip" v-show="isRecording">{{ isTouchInside ? '松手发送，上移取消' : '松手取消' }}</div>
+        <button 
+            class="voice-btn" 
+            :class="{
+                recording: isRecording
+            }" 
+            @touchstart.prevent="startRecord" @touchend="handleTouchEnd" 
+            @touchmove="handleTouchMove"
+            @touchcancel="cancelRecord" 
+            @mousedown.prevent="startRecord" 
+            @mouseup="handleMouseUp"
+            @mouseleave="handleMouseLeave"
+            ref="voiceButtonRef">
+            <div v-if="isRecording" class="waveform-container" ref="waveformRef"></div>
+            <span v-else class="btn-text">按住说话</span>
+        </button>
+    </div>
+    
+    <audio v-if="audioUrl" :src="audioUrl" controls autoplay preload="auto" class="audio-player" />
+    <p class="tip">{{ recordTip }}</p>
+</template>
+
+<script setup>
+import { ref, onUnmounted, nextTick } from 'vue'
+import WaveSurfer from 'wavesurfer.js'
+
+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
+
+    // 录音结束的回调 - 生成音频文件
+    mediaRecorder.onstop = () => {
+        // 使用录制时的实际MIME类型
+        const audioBlob = new Blob(audioChunks.value, { type: mediaRecorder.mimeType })
+        audioUrl.value = URL.createObjectURL(audioBlob)
+        recordTip.value = '录音完成，已自动播放'
+
+        // ✅ 核心：这里把 audioBlob 传给后端做【语音转文字】即可
+        // 传参格式：new FormData().append('file', audioBlob, 'voice.webm') - 根据实际格式调整文件名
+        console.log('录音文件Blob对象：', audioBlob)
+        console.log('录音文件MIME类型：', mediaRecorder.mimeType)
+        console.log('录音文件大小：', audioBlob.size)
+    }
+    // 停止波形图
+    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) => {
+    if (!isRecording.value) return;
+
+    const button = event.currentTarget;
+    const isWithin = isTouchWithinElement(event, button);
+
+    if (isWithin) {
+        // 手指在按钮内松开，停止录音（发送）
+        stopRecord();
+    } else {
+        // 手指在按钮外松开，取消录音
+        cancelRecord();
+    }
+};
+
+// 鼠标抬起事件处理
+const handleMouseUp = (event) => {
+    if (!isRecording.value) return;
+
+    const button = event.currentTarget;
+    const isWithin = isMouseWithinElement(event, button);
+
+    if (isWithin) {
+        // 鼠标在按钮内抬起，停止录音（发送）
+        stopRecord();
+    } else {
+        // 鼠标在按钮外抬起，取消录音
+        cancelRecord();
+    }
+};
+
+// 鼠标离开事件处理
+const handleMouseLeave = (event) => {
+    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>
+/* 样式和之前一致，无需修改 */
+.voice-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 50px;
+    position: relative;
+}
+
+.btn-tip{
+    position: absolute;
+    top: 0px;
+    transform: translateY(-100%);
+}
+
+.voice-btn {
+    width: 200px;
+    height: 40px;
+    background: #d2d3de;
+    color: #3f3e3e;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.voice-btn.recording {
+    background: #2217eb;
+    /* animation: breath 1.2s infinite ease-in-out; */
+}
+
+@keyframes breath {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.05);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+.waveform-container {
+    width: 160px;
+    /* height: 60px; */
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.btn-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    pointer-events: none;
+}
+
+.btn-text-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    pointer-events: none;
+    font-size: 14px;
+    text-align: center;
+    width: 100%;
+}
+
+.audio-player {
+    margin-top: 20px;
+    width: 90%;
+}
+
+.tip {
+    color: #666;
+    margin-top: 15px;
+    font-size: 14px;
+}
+</style>