版本变更V3.31添加识图功能

inventory-web/src/App.vue

@@ -239,7 +239,7 @@ const handleLogout = () => {
     <footer v-if="!isLoginPage" class="app-footer">
       <span class="version-tag">
         <el-icon style="vertical-align: middle; margin-right: 4px"><InfoFilled /></el-icon>
-        当前版本:V3.30（添加AI助手版）
+        当前版本:V3.31（识图版）
       </span>
     </footer>
 

inventory-web/src/components/ImageSearchDialog.vue

@@ -2,7 +2,8 @@
   <el-dialog
       v-model="visible"
       title="以图搜图"
-      width="680px"
+      width="95%"
+      style="max-width: 680px;"
       destroy-on-close
       :close-on-click-modal="false"
       @close="handleClose"
@@ -13,21 +14,21 @@
         <el-upload
             ref="uploadRef"
             class="image-uploader"
-            drag
             :auto-upload="false"
             :show-file-list="false"
             accept="image/*"
+            capture="environment"
             :on-change="handleFileChange"
         >
           <div v-if="!previewUrl" class="upload-placeholder">
-            <el-icon class="upload-icon" :size="48"><UploadFilled /></el-icon>
-            <div class="upload-text">点击或拖拽图片上传</div>
-            <div class="upload-hint">支持 jpg/png/gif 等格式</div>
+            <el-icon class="upload-icon" :size="48"><Camera /></el-icon>
+            <div class="upload-text">点击拍照或选择图片</div>
+            <div class="upload-hint">支持 jpg/png 格式</div>
           </div>
           <div v-else class="preview-wrapper">
             <img :src="previewUrl" class="preview-image" />
             <div class="preview-overlay">
-              <el-button size="small" @click.stop="clearImage">重新选择</el-button>
+              <el-button size="small" @click.stop="clearImage">重新拍照</el-button>
             </div>
           </div>
         </el-upload>
@@ -79,12 +80,6 @@
             <div class="item-actions">
               <el-button
                   type="primary"
-                  size="small"
-                  @click="handleUse(item)"
-              >
-                使用此物料
-              </el-button>
-              <el-button
                   size="small"
                   @click="handleView(item)"
               >
@@ -104,7 +99,7 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { UploadFilled, Loading, Picture, WarningFilled } from '@element-plus/icons-vue'
+import { Camera, Loading, Picture, WarningFilled } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { imageSearch, type ImageSearchItem } from '@/api/common/upload'
 
@@ -189,11 +184,9 @@ const clearImage = () => {
 }
 
 const fullImageUrl = (path: string) => {
-  if (!path) return ''
-  // 相对路径转完整 URL
-  if (path.startsWith('http')) return path
-  const baseUrl = import.meta.env.VITE_API_BASE_URL || window.location.origin
-  return baseUrl + path
+  if (!path) return '';
+  // 直接原样返回，完全信任后端传过来的 image_url
+  return path.startsWith('http') ? path : path;
 }
 
 const handleImgError = (e: Event) => {
@@ -455,4 +448,33 @@ const resetState = () => {
   gap: 6px;
   flex: 0 0 auto;
 }
+
+/* ---- 新增：移动端适配样式 ---- */
+@media screen and (max-width: 768px) {
+  .image-search-body {
+    flex-direction: column;
+    gap: 16px;
+    min-height: auto;
+  }
+
+  .upload-section {
+    flex: none;
+    width: 100%;
+  }
+
+  :deep(.el-upload), :deep(.el-upload-dragger) {
+    height: 160px;
+  }
+
+  .preview-image {
+    max-height: 140px;
+    width: auto;
+    object-fit: contain;
+  }
+
+  .result-section {
+    width: 100%;
+    max-height: 50vh;
+  }
+}
 </style>

inventory-web/src/views/material/list.vue

@@ -571,6 +571,7 @@
       <ImageSearchDialog
           v-model="imageSearchVisible"
           @use="handleImageSearchUse"
+          @view="handleImageSearchView"
       />
 
       <!-- 预警设置弹窗 -->
@@ -1698,11 +1699,19 @@ const handleCameraConfirm = async (file: File) => {
   }
 };
 
-// 以图搜图 - 使用物料
-const handleImageSearchUse = (item: ImageSearchItem) => {
-  // 跳转到该物料详情页，或填充到表单
-  router.push({ path: '/material/list', query: { keyword: item.spec_model } });
-  ElMessage.success(`已定位物料: ${item.product_name}`);
+// 点击"查看详情"：直接在当前页面应用规格型号并搜索
+const handleImageSearchView = (item: any) => {
+  // 1. 关闭以图搜图弹窗
+  imageSearchVisible.value = false;
+
+  // 2. 将选中的规格型号填入搜索表单的 keyword 中
+  queryParams.keyword = item.spec_model;
+
+  // 3. 触发列表的查询函数，刷新表格数据
+  handleQuery();
+
+  // 4. 给出友好提示
+  ElMessage.success(`已应用物料规格: ${item.spec_model} 进行搜索`);
 };
 
 const addCondition = () => {