From 93b9846fc6cc486a012db0bad907550b78f471e4 Mon Sep 17 00:00:00 2001
From: DXC <duxingchen@iris-rs.cn>
Date: Fri, 5 Jun 2026 15:47:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=A5=E5=9B=BE=E6=90=9C=E5=9B=BE?=
 =?UTF-8?q?=E9=9B=86=E6=88=90=E6=8B=8D=E7=85=A7=E5=8A=9F=E8=83=BD=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E7=9B=B4=E6=8E=A5=E8=B0=83=E8=B5=B7=E6=91=84?=
 =?UTF-8?q?=E5=83=8F=E5=A4=B4=E6=90=9C=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ImageSearchDialog.vue      | 68 ++++++++++++++++++-
 1 file changed, 66 insertions(+), 2 deletions(-)

diff --git a/inventory-web/src/components/ImageSearchDialog.vue b/inventory-web/src/components/ImageSearchDialog.vue
index 22aae49..2c5c5c4 100644
--- a/inventory-web/src/components/ImageSearchDialog.vue
+++ b/inventory-web/src/components/ImageSearchDialog.vue
@@ -33,6 +33,17 @@
           </div>
         </el-upload>
 
+        <!-- 拍照按钮 -->
+        <el-button
+            v-if="!previewUrl"
+            type="primary"
+            class="camera-btn"
+            @click="openCamera"
+        >
+          <el-icon><VideoCamera /></el-icon>
+          调起摄像头拍照
+        </el-button>
+
         <div v-if="searching" class="loading-tip">
           <el-icon class="is-loading"><Loading /></el-icon>
           <span>正在识别图片并检索...</span>
@@ -94,15 +105,33 @@
     <template #footer>
       <el-button @click="handleClose">关闭</el-button>
     </template>
+
+    <!-- 拍照弹窗 -->
+    <el-dialog
+        v-model="cameraVisible"
+        title="拍照"
+        width="95%"
+        style="max-width: 480px; height: 80vh; padding: 0;"
+        append-to-body
+        destroy-on-close
+        :close-on-click-modal="false"
+        @close="closeCamera"
+    >
+      <WebRtcCamera
+          @cancel="closeCamera"
+          @photo-submit="handleCameraSubmit"
+      />
+    </el-dialog>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { Camera, Loading, Picture, WarningFilled } from '@element-plus/icons-vue'
+import { Camera, Loading, Picture, WarningFilled, VideoCamera } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { imageSearch, type ImageSearchItem } from '@/api/common/upload'
+import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue'
 
 const router = useRouter()
 
@@ -126,6 +155,9 @@ const searching = ref(false)
 const searched = ref(false)
 const results = ref<ImageSearchItem[]>([])
 
+// 拍照相关
+const cameraVisible = ref(false)
+
 watch(() => props.modelValue, (val) => {
   visible.value = val
   if (!val) {
@@ -137,6 +169,27 @@ watch(visible, (val) => {
   emit('update:modelValue', val)
 })
 
+// 拍照相关方法
+const openCamera = () => {
+  cameraVisible.value = true
+}
+
+const closeCamera = () => {
+  cameraVisible.value = false
+}
+
+const handleCameraSubmit = (file: File) => {
+  // 关闭拍照弹窗
+  closeCamera()
+
+  // 生成预览
+  currentFile.value = file
+  previewUrl.value = URL.createObjectURL(file)
+
+  // 立即触发搜图
+  doSearch(file)
+}
+
 const handleFileChange = (uploadFile: any) => {
   const file = uploadFile.raw
   if (!file) return
@@ -179,6 +232,9 @@ const doSearch = async (file: File) => {
 }
 
 const clearImage = () => {
+  if (previewUrl.value) {
+    URL.revokeObjectURL(previewUrl.value)
+  }
   previewUrl.value = ''
   currentFile.value = null
   results.value = []
@@ -188,7 +244,6 @@ const clearImage = () => {
 
 const fullImageUrl = (path: string) => {
   if (!path) return '';
-  // 直接原样返回，完全信任后端传过来的 image_url
   return path.startsWith('http') ? path : path;
 }
 
@@ -219,6 +274,9 @@ const handleClose = () => {
 }
 
 const resetState = () => {
+  if (previewUrl.value) {
+    URL.revokeObjectURL(previewUrl.value)
+  }
   previewUrl.value = ''
   currentFile.value = null
   searching.value = false
@@ -234,6 +292,12 @@ const resetState = () => {
   min-height: 380px;
 }
 
+/* 拍照按钮 */
+.camera-btn {
+  width: 100%;
+  margin-top: 8px;
+}
+
 /* ── 左侧上传区 ── */
 .upload-section {
   flex: 0 0 220px;