版本变更V3.31添加识图功能
This commit is contained in:
@ -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>
|
||||
Reference in New Issue
Block a user