vue_zhongyou 1.0.22 → 1.0.24

package/package.json

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

package//345/212/237/350/203/275/344/273/243/347/240/201/AI/345/257/271/350/257/235/aiChatPage.vue

@@ -30,10 +30,13 @@
                 <!-- 文字介绍 -->
                 <div v-if="message.output" class="message-output" v-html="formatMessage(message.output)"></div>
                 <!-- 表单内容 -->
-                <ChatForm 
+                <DynamicMobileForm
+                  v-model="message.formData"
                   :schema="message.formSchema"
-                  :model-value="message.formData || {}"
-                  @submit="handleFormSubmit(index, $event)"
+                  submit-button-label="确认"
+                  reset-button-label="重置"
+                  @submit="handleSubmit"
+                  @change="handleChange"
                 />
               </div>
               
@@ -81,7 +84,12 @@
     </div>
 
     <!-- 输入区域 -->
-    <div class="input-area">
+    <inputCom
+      ref="inputComRef"
+      :isLoading="isLoading"
+      @sendMessage="sendMessage"
+    ></inputCom>
+    <!-- <div class="input-area">
       <div class="input-wrapper">
         <van-field
           v-model="inputText"
@@ -106,15 +114,17 @@
           发送
         </van-button>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script setup>
-import { ref, nextTick, onMounted, watch } from 'vue'
+import { ref, nextTick, onMounted, watch, onUnmounted } from 'vue'
 import { showToast } from 'vant'
 import ChatForm from '@/components/ChatForm.vue'
 import NewChatCardList from '@/components/newChatCardList.vue'
+import DynamicMobileForm from '@/components/dynamicMobileForm.vue'
+import inputCom from '@/components/inputCom.vue'
 
 // 消息列表
 const messages = ref([])
@@ -126,6 +136,13 @@ const isLoading = ref(false)
 const chatContainerRef = ref(null)
 // 会话ID
 const sessionId = ref('')
+// 输入组件引用
+const inputComRef = ref(null)
+// SSE连接引用
+const eventSourceRef = ref(null)
+// 当前正在接收流式响应的消息索引
+const streamingMessageIndex = ref(-1)
+
 
 // 判断消息类型
 const isTextMessage = (message) => {
@@ -190,10 +207,8 @@ const generateSuggestions = (content) => {
   // 这里可以根据实际内容生成相关的推荐信息
   // 目前先使用一些示例推荐信息
   const sampleSuggestions = [
-    '您还可以询问相关问题',
-    '了解更多详细信息',
-    '查看相关文档',
-    '获取更多帮助'
+    '查找当前待办',
+    '发起出差流程',
   ]
   
   // 根据内容类型生成不同的推荐信息
@@ -206,9 +221,9 @@ const generateSuggestions = (content) => {
       return ['比较不同产品', '查看用户评价', '获取优惠信息']
     }
   } else if (content && content.type === 'form') {
-    return ['查看表单填写示例', '了解字段含义', '下载填写模板']
+    return ['查找当前待办', '查看我发起的流程',]
   } else if (content && content.type === 'cardList') {
-    return ['筛选产品类别', '按价格排序', '查看更多产品']
+    return ['创建出差流程', '创建请假流程', '查看待办列表']
   }
   
   // 默认推荐信息
@@ -217,169 +232,165 @@ const generateSuggestions = (content) => {
 
 // 发送消息
 const sendMessage = async () => {
-  const text = inputText.value.trim()
+  const text = inputComRef.value.inputText.trim()
   if (!text || isLoading.value) return
 
+  // 关闭之前的SSE连接
+  if (eventSourceRef.value) {
+    eventSourceRef.value.close()
+    eventSourceRef.value = null
+  }
+
   // 添加用户消息
   addMessage('user', text)
-  inputText.value = ''
+  inputComRef.value.inputText = ''
 
   // 添加AI加载消息
   addMessage('assistant', '', true)
   isLoading.value = true
 
-  // 拼装一下请求体
-  let requestBody = {
+  // 记录当前消息索引
+  streamingMessageIndex.value = messages.value.length - 1
+
+  // 拼装请求体
+  const requestBody = {
     sessionId: sessionId.value,
     input: text,
     payload: {
-      sceneType : "QUERY",
-      queryType : "CREATOR",
-      processType : "BUSINESS_TRIP",
+      sceneType: "QUERY",
+      queryType: "CREATOR",
+      processType: "BUSINESS_TRIP",
       queryBackLogReq: {
         userId: '123456',
-        pageNum:1,
+        pageNum: 1,
         pageSize: 10
       }
     }
   }
 
   try {
-    // 模拟AI回复（实际应该调用API）
-    await simulateAIResponse(text)
+    // 创建SSE连接
+    const baseURL = import.meta.env.VITE_API_BASE_URL || ''
+    const url = `${baseURL}/api/ai/chat/stream`
+    
+    // 构建查询参数
+    const params = new URLSearchParams()
+    params.append('sessionId', requestBody.sessionId)
+    params.append('input', requestBody.input)
+    params.append('payload', JSON.stringify(requestBody.payload))
+    
+    const fullUrl = `${url}?${params.toString()}`
+    
+    // 创建EventSource连接
+    eventSourceRef.value = new EventSource(fullUrl)
+    
+    // 监听消息事件
+    eventSourceRef.value.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data)
+        handleSSEMessage(data)
+      } catch (error) {
+        console.error('解析SSE消息失败:', error)
+      }
+    }
+    
+    // 监听错误事件
+    eventSourceRef.value.onerror = (error) => {
+      console.error('SSE连接错误:', error)
+      handleSSEError()
+    }
+    
+    // 监听连接打开事件
+    eventSourceRef.value.onopen = () => {
+      console.log('SSE连接已建立')
+    }
+    
   } catch (error) {
-    console.error('发送消息失败:', error)
-    showToast('发送失败，请重试')
-    // 移除加载中的消息
-    messages.value.pop()
-  } finally {
-    isLoading.value = false
+    console.error('创建SSE连接失败:', error)
+    showToast('连接失败，请重试')
+    handleSSEError()
   }
 }
 
-// 模拟AI回复（实际应该替换为真实的API调用）
-const simulateAIResponse = async (userMessage) => {
-  // 模拟网络延迟
-  await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 1000))
-
-  // 移除加载中的消息
-  const loadingMessage = messages.value.pop()
-
-  // 生成模拟回复
-  let response = ''
-  if (userMessage.includes('你好') || userMessage.includes('您好')) {
-    response = '您好！很高兴为您服务。'
-  } else if (userMessage.includes('帮助') || userMessage.includes('功能')) {
-    response = '我可以帮您解答问题、提供建议、分析数据等。请告诉我您需要什么帮助？'
-  } else if (userMessage.includes('时间')) {
-    response = `当前时间是：${new Date().toLocaleString('zh-CN')}`
-  } else if (userMessage.includes('表单')) {
-    // 返回表单类型消息，带介绍文字
-    response = {
-      type: 'form',
-      output: '请您填写以下信息，以便我们为您提供更好的服务。所有信息都将严格保密，请放心填写。',
-      schema: [
-        {
-          field: 'name',
-          label: '姓名',
-          type: 'input',
-          placeholder: '请输入您的姓名',
-          rules: [{ required: true, message: '请输入姓名' }]
-        },
-        {
-          field: 'email',
-          label: '邮箱',
-          type: 'input',
-          placeholder: '请输入您的邮箱',
-          rules: [{ required: true, message: '请输入邮箱' }, { pattern: /\w+@\w+\.\w+/, message: '邮箱格式不正确' }]
-        },
-        {
-          field: 'age',
-          label: '年龄',
-          type: 'input',
-          placeholder: '请输入您的年龄'
-        },
-        {
-          field: 'gender',
-          label: '性别',
-          type: 'radio',
-          options: [
-            { label: '男', value: 'male' },
-            { label: '女', value: 'female' }
-          ]
-        },
-        {
-          field: 'hobbies',
-          label: '爱好',
-          type: 'checkbox',
-          options: [
-            { label: '阅读', value: 'reading' },
-            { label: '运动', value: 'sports' },
-            { label: '音乐', value: 'music' },
-            { label: '旅行', value: 'travel' }
-          ]
-        },
-        {
-          field: 'bio',
-          label: '个人简介',
-          type: 'textarea',
-          placeholder: '请简单介绍一下自己',
-          rows: 3
-        }
-      ]
+// 处理SSE消息
+const handleSSEMessage = (data) => {
+  const messageIndex = streamingMessageIndex.value
+  if (messageIndex === -1 || !messages.value[messageIndex]) return
+  
+  const currentMessage = messages.value[messageIndex]
+  
+  // 根据消息类型处理
+  if (data.type === 'text') {
+    // 文本流式更新
+    if (typeof currentMessage.content !== 'string') {
+      currentMessage.content = ''
     }
-  } else if (userMessage.includes('列表') || userMessage.includes('卡片')) {
-    // 返回列表卡片类型消息，带介绍文字
-    // TODO 生成这种卡片列表的时候，要初始化一个这张卡片的独有的page,用来做分页
-    const items = [
-      {
-        title: '产品A',
-        subtitle: '高性能计算服务',
-        statusName : '待审',
-        creator : '刘松煜',
-        createTime : '2023-10-01 10:00:00',
-        currentNode : '节点1',
-        dpName : '信息科技部',
-      },
-      {
-        title: '产品B',
-        subtitle: '云存储解决方案',
-        statusName : '驳回',
-        creator : '刘松煜',
-        createTime : '2023-10-01 10:00:00',
-        currentNode : '节点1',
-        dpName : '固定收益投资部',
-      },
-      {
-        title: '信息科技部xxxaaaa啊啊啊你还是低哦是大家扫IDiOS滴哦啊啊大家送啊点喝酒哦洒几滴撒娇都i爱睡觉',
-        subtitle: '人工智能平台',
-        statusName : '待审',
-        creator : '刘松煜',
-        createTime : '2023-10-01',
-        currentNode : '节点1',
-        dpName : '信息科技部',
-      }
-    ];
-    const total = 10
+    currentMessage.content += data.content || ''
+    scrollToBottom()
+  } else if (data.type === 'form') {
+    // 表单消息
+    currentMessage.type = 'form'
+    currentMessage.formSchema = data.schema
+    currentMessage.formData = data.data || {}
+    if (data.output) {
+      currentMessage.output = data.output
+    }
+  } else if (data.type === 'cardList') {
+    // 列表卡片消息
+    for (let key in data) {
+      currentMessage[key] = data[key]
+    }
+  } else if (data.type === 'done') {
+    // 流式传输完成
+    currentMessage.loading = false
+    isLoading.value = false
+    
+    // 为AI助手消息添加推荐信息
+    currentMessage.suggestions = generateSuggestions(currentMessage.content)
     
-    response = {
-      type: 'cardList',
-      output: '根据您的需求，我们为您推荐以下几款热门产品，您可以点击查看详细信息或进行相关操作：',
-      showLoadMore: items.length < total, // 根据当前items长度与总数的比较来确定是否显示"查看更多"
-      currentPage: 1,
-      pageSize: 10,
-      total: total,
-      items: items,
-      loading: false // 初始化加载状态
+    // 关闭SSE连接
+    if (eventSourceRef.value) {
+      eventSourceRef.value.close()
+      eventSourceRef.value = null
     }
-  } else {
-    response = `我理解您说的是："${userMessage}"。这是一个很好的问题，让我为您详细解答...\n\n（这是模拟回复，实际使用时需要接入真实的AI API）`
+    streamingMessageIndex.value = -1
+  } else if (data.type === 'error') {
+    // 错误消息
+    handleSSEError(data.message || '服务器错误')
   }
+}
 
-  // 添加AI回复
-  addMessage('assistant', response, false)
+// 处理SSE错误
+const handleSSEError = (errorMessage = '连接中断，请重试') => {
+  console.error('SSE错误:', errorMessage)
+  
+  const messageIndex = streamingMessageIndex.value
+  if (messageIndex !== -1 && messages.value[messageIndex]) {
+    messages.value[messageIndex].loading = false
+    if (!messages.value[messageIndex].content) {
+      messages.value[messageIndex].content = errorMessage
+    }
+  }
+  
+  isLoading.value = false
+  showToast(errorMessage)
+  
+  // 关闭SSE连接
+  if (eventSourceRef.value) {
+    eventSourceRef.value.close()
+    eventSourceRef.value = null
+  }
+  streamingMessageIndex.value = -1
 }
 
+// 组件卸载时清理SSE连接
+onUnmounted(() => {
+  if (eventSourceRef.value) {
+    eventSourceRef.value.close()
+    eventSourceRef.value = null
+  }
+})
+
 // 格式化消息内容（支持换行）
 const formatMessage = (content) => {
   if (!content) return ''
@@ -440,7 +451,7 @@ const handleShiftEnter = () => {
 }
 
 // 处理表单提交
-const handleFormSubmit = (index, formData) => {
+const handleSubmit = (formData) => {
   // 在实际应用中，这里应该将表单数据发送到服务器
   console.log('表单提交数据:', formData)
   
@@ -463,7 +474,7 @@ const handleCardActionClick = (index, { action, item, index: itemIndex }) => {
 const handleSuggestionClick = (suggestion) => {
   console.log('Suggestion clicked:', suggestion)
   // 将推荐信息作为用户消息发送
-  inputText.value = suggestion
+  inputComRef.value.inputText = suggestion
   sendMessage()
 }
 
@@ -612,6 +623,7 @@ const handleLoadMore = (message) => {
   display: flex;
   flex-direction: column;
   // max-width: 75%;
+  flex: 1;
   gap: 6px;
 }
 
@@ -688,45 +700,7 @@ const handleLoadMore = (message) => {
   }
 }
 
-.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: flex-end;
-    gap: 8px;
-    max-width: 100%;
-  }
-
-  .chat-input {
-    flex: 1;
-    background: #f7f8fa;
-    border-radius: 20px;
-    padding: 8px 12px;
-    min-height: 40px;
-    max-height: 120px;
-
-    :deep(.van-field__control) {
-      font-size: 15px;
-      line-height: 1.5;
-    }
-  }
 
-  .send-btn {
-    flex-shrink: 0;
-    height: 40px;
-    padding: 0 20px;
-    border-radius: 20px;
-  }
-}
 
 
 /* 推荐信息样式 */
@@ -745,6 +719,7 @@ const handleLoadMore = (message) => {
 .suggestion-tag {
   margin-right: 8px;
   margin-bottom: 8px;
+  padding: 4px;
   background-color: #f0f0f0;
   border-color: #ddd;
   color: #666;

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>

package//345/212/237/350/203/275/344/273/243/347/240/201//351/241/265/351/235/242/345/223/215/345/272/224/345/274/217/351/200/202/351/205/215/vite.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import { createVuePlugin } from 'vite-plugin-vue2'
+import px2rem from 'postcss-pxtorem'
+
+export default defineConfig({
+  plugins: [
+    createVuePlugin()
+  ],
+  css: {
+    postcss: {
+      plugins: [
+        px2rem({
+          rootValue: 16, // 设计稿为375px时，rootValue设为16（16px * 375/375 = 16px）
+          propList: ['*'],
+          minPixelValue: 1,
+        })
+      ]
+    }
+  }
+})