Merge remote-tracking branch 'origin/develop' into develop

src/view/safeCheck/safeCheck_edit/index.vue

@@ -91,7 +91,17 @@
           maxlength="1000"
           show-word-limit
           rows="4"
-        />
+        >
+          <template #right-icon>
+            <van-icon 
+              name="volume-o" 
+              size="20" 
+              :color="isRecording ? '#ee0a24' : '#1989fa'"
+              @click="toggleVoiceInput"
+              style="margin-right: 8px; cursor: pointer;"
+            />
+          </template>
+        </van-field>
 
         <van-field
           border
@@ -145,10 +155,69 @@
 
   <van-dialog v-model:show="showDialogVisible" title="删除文件" show-cancel-button
               confirm-button-color="#ee0124" message="确定删除该文件吗?" @confirm="onDelete" />
+
+  <!-- 语音识别弹窗 -->
+  <van-dialog
+    v-model:show="showVoiceDialog"
+    title="语音输入"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    :close-on-click-overlay="true"
+    width="90%"
+  >
+    <div style="padding: 20px; text-align: center;">
+      <van-icon 
+        name="volume-o" 
+        size="60" 
+        :color="isRecording ? '#ee0a24' : '#1989fa'"
+        :class="{ 'pulsing': isRecording }"
+      />
+      <div style="margin-top: 20px; font-size: 16px; color: #323233;">
+        {{ isRecording ? '正在录音，请说话...' : voiceErrorMessage || '点击开始录音' }}
+      </div>
+      <!-- 错误信息显示 -->
+      <div v-if="voiceErrorMessage && !isRecording" style="margin-top: 15px; padding: 10px; background: #fff7e6; border-radius: 4px; border-left: 3px solid #ff9800;">
+        <div style="font-size: 14px; color: #ff9800; text-align: left;">
+          {{ voiceErrorMessage }}
+        </div>
+      </div>
+      <!-- 识别结果显示 -->
+      <div v-if="recognizedText" style="margin-top: 15px; padding: 10px; background: #f7f8fa; border-radius: 4px; text-align: left; max-height: 150px; overflow-y: auto;">
+        <div style="font-size: 14px; color: #666; margin-bottom: 5px;">识别结果：</div>
+        <div style="font-size: 14px; color: #323233; word-break: break-all;">{{ recognizedText }}</div>
+      </div>
+      <div style="margin-top: 20px; display: flex; justify-content: center; gap: 10px;">
+        <van-button 
+          v-if="!isRecording" 
+          type="primary" 
+          size="small" 
+          @click="startRecognition"
+        >
+          开始录音
+        </van-button>
+        <van-button 
+          v-else 
+          type="danger" 
+          size="small" 
+          @click="stopRecognition"
+        >
+          停止录音
+        </van-button>
+        <van-button 
+          v-if="recognizedText" 
+          type="primary" 
+          size="small" 
+          @click="confirmVoiceText"
+        >
+          确认使用
+        </van-button>
+      </div>
+    </div>
+  </van-dialog>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, getCurrentInstance, nextTick } from 'vue';
+import { ref, reactive, onMounted, getCurrentInstance, nextTick, onUnmounted } from 'vue';
 import { closeToast, Dialog, showFailToast, showLoadingToast, showSuccessToast, showToast } from 'vant';
 
 const { proxy } = getCurrentInstance();
@@ -356,7 +425,180 @@ import AttachmentS3Image from '@/components/AttachmentS3Image.vue';
       }
     });
   };
-  
+
+  /***********************语音识别功能******************************/
+  // 语音识别相关状态
+  const isRecording = ref(false);
+  const showVoiceDialog = ref(false);
+  const recognizedText = ref('');
+  const voiceErrorMessage = ref('');
+  let recognition = null;
+
+  // 检查浏览器是否支持语音识别
+  function checkSpeechRecognitionSupport() {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognition) {
+      showToast({
+        type: 'fail',
+        message: '您的浏览器不支持语音识别功能'
+      });
+      return false;
+    }
+    return true;
+  }
+
+  // 初始化语音识别
+  function initSpeechRecognition() {
+    if (!checkSpeechRecognitionSupport()) {
+      return;
+    }
+
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    recognition = new SpeechRecognition();
+    
+    // 设置语言为中文
+    recognition.lang = 'zh-CN';
+    // 连续识别
+    recognition.continuous = true;
+    // 返回临时结果
+    recognition.interimResults = true;
+
+    // 识别开始
+    recognition.onstart = () => {
+      isRecording.value = true;
+      recognizedText.value = '';
+      voiceErrorMessage.value = '';
+    };
+
+    // 识别结果
+    recognition.onresult = (event) => {
+      let interimTranscript = '';
+      let finalTranscript = '';
+
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const transcript = event.results[i][0].transcript;
+        if (event.results[i].isFinal) {
+          finalTranscript += transcript;
+        } else {
+          interimTranscript += transcript;
+        }
+      }
+
+      recognizedText.value = finalTranscript || interimTranscript;
+    };
+
+    // 识别错误
+    recognition.onerror = (event) => {
+      console.error('语音识别错误:', event.error);
+      isRecording.value = false;
+      
+      let errorMessage = '语音识别出错';
+      switch (event.error) {
+        case 'no-speech':
+          errorMessage = '未检测到语音，请重试';
+          break;
+        case 'audio-capture':
+          errorMessage = '无法访问麦克风，请检查权限';
+          break;
+        case 'not-allowed':
+          errorMessage = '麦克风权限被拒绝，请在浏览器设置中允许';
+          break;
+        case 'network':
+          errorMessage = '网络错误，请检查网络连接';
+          break;
+        case 'aborted':
+          errorMessage = '语音识别已中断';
+          break;
+        case 'service-not-allowed':
+          errorMessage = '语音识别服务不可用';
+          break;
+        default:
+          errorMessage = `语音识别出错: ${event.error}`;
+      }
+      
+      voiceErrorMessage.value = errorMessage;
+      
+      showToast({
+        type: 'fail',
+        message: errorMessage
+      });
+    };
+
+    // 识别结束
+    recognition.onend = () => {
+      isRecording.value = false;
+    };
+  }
+
+  // 切换语音输入
+  function toggleVoiceInput() {
+    if (!checkSpeechRecognitionSupport()) {
+      return;
+    }
+
+    if (!recognition) {
+      initSpeechRecognition();
+    }
+
+    showVoiceDialog.value = true;
+    recognizedText.value = '';
+    voiceErrorMessage.value = '';
+  }
+
+  // 开始识别
+  function startRecognition() {
+    if (!recognition) {
+      initSpeechRecognition();
+    }
+
+    // 清除之前的错误信息
+    voiceErrorMessage.value = '';
+    recognizedText.value = '';
+
+    try {
+      recognition.start();
+    } catch (error) {
+      console.error('启动语音识别失败:', error);
+      voiceErrorMessage.value = '启动语音识别失败，请重试';
+      showToast({
+        type: 'fail',
+        message: '启动语音识别失败，请重试'
+      });
+    }
+  }
+
+  // 停止识别
+  function stopRecognition() {
+    if (recognition && isRecording.value) {
+      recognition.stop();
+    }
+  }
+
+  // 确认使用识别的文本
+  function confirmVoiceText() {
+    if (recognizedText.value) {
+      // 如果已有内容，追加；否则直接设置
+      if (form.value.checkResult) {
+        form.value.checkResult += recognizedText.value;
+      } else {
+        form.value.checkResult = recognizedText.value;
+      }
+      recognizedText.value = '';
+      voiceErrorMessage.value = '';
+      showVoiceDialog.value = false;
+      showToast({
+        type: 'success',
+        message: '已添加语音识别内容'
+      });
+    }
+  }
+
+  // 组件卸载时清理
+  onUnmounted(() => {
+    if (recognition && isRecording.value) {
+      recognition.stop();
+    }
+  });
 
 </script>
 
@@ -369,4 +611,19 @@ import AttachmentS3Image from '@/components/AttachmentS3Image.vue';
   padding: 10px;
 }
 
+.pulsing {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.7;
+  }
+}
+
 </style>