소스 검색

feat(photography): 增强LOGO上传功能与错误处理

- 添加LOGO加载错误状态管理
- 实现图片加载失败时的错误提示
- 优化LOGO上传交互逻辑
- 增加错误状态下上传区域样式变化
- 完善LOGO删除与重置功能
- 移除冗余的addLogo方法逻辑
panqiuyao 1 주 전
부모
커밋
2826812d82
1개의 변경된 파일39개의 추가작업 그리고 36개의 파일을 삭제
  1. 39 36
      frontend/src/views/Photography/detail.vue

+ 39 - 36
frontend/src/views/Photography/detail.vue

@@ -250,16 +250,22 @@
                   主图LOGO
                 </div>
                 <div class="logo-upload-area">
-                  <div v-if="!form.logo_path" class="logo-upload-placeholder" @click="openLogoUpload">
+                  <div
+                    v-if="!form.logo_path"
+                    class="logo-upload-placeholder"
+                    :class="{ 'is-error': logoLoadError }"
+                    @click="openLogoUpload"
+                  >
                     <div class="logo-upload-icon">
                       <img src="@/assets/images/detail/sctp.png" />
 
                     </div>
                     <div class="logo-upload-text">点击或拖拽上传</div>
-                    <div class="logo-upload-hint">支持PNG、JPG格式</div>
+                    <div class="logo-upload-hint" v-if="logoLoadError">图片加载出错或已被删除,请重新上传</div>
+                    <div class="logo-upload-hint" v-else>支持PNG、JPG格式</div>
                   </div>
                   <div v-else class="logo-upload-preview">
-                    <img :src="'file:///' + form.logo_path" alt="LOGO预览" class="logo-preview-image" />
+                    <img :src="'file:///' + form.logo_path" alt="LOGO预览" class="logo-preview-image" @error="handleLogoLoadError" />
                     <div class="logo-upload-actions">
                       <span class="logo-action-btn" @click.stop="previewLogo">
                         <el-icon><ZoomIn /></el-icon>
@@ -1587,16 +1593,24 @@ const openLoadingDialog = (timer: number) => {
 
 //logo
 const logoList = ref([])
+const logoLoadError = ref(false)
 const logoPreviewVisible = ref(false)
 const logoPreviewUrl = ref('')
 
 // 打开LOGO上传
+const handleLogoSelected = (path?: string) => {
+  if (!path) return
+  form.logo_path = path
+  logoLoadError.value = false
+  saveLogoToCache(form.logo_path)
+}
+
 const openLogoUpload = () => {
   clientStore.ipc.removeAllListeners(icpList.utils.openImage);
   clientStore.ipc.send(icpList.utils.openImage);
   clientStore.ipc.on(icpList.utils.openImage, async (event, result) => {
     if (result && result.filePath) {
-      await addLogo(result.filePath)
+      handleLogoSelected(result.filePath)
     }
     clientStore.ipc.removeAllListeners(icpList.utils.openImage);
   })
@@ -1621,6 +1635,7 @@ const removeLogo = () => {
       console.log('deleteLogo', result);
       form.logo_path = ''
       saveLogoToCache('')
+      logoLoadError.value = false
       // 从列表中移除
       const index = logoList.value.indexOf(currentLogoPath)
       if (index > -1) {
@@ -1631,6 +1646,15 @@ const removeLogo = () => {
   }
 }
 
+const handleLogoLoadError = () => {
+  if (!logoLoadError.value) {
+    logoLoadError.value = true
+    form.logo_path = ''
+    saveLogoToCache('')
+    ElMessage.warning('LOGO加载出错或文件已被删除,请重新上传')
+  }
+}
+
 const getLogolist = async () => {
   clientStore.ipc.send(icpList.generate.getLogoList);
   clientStore.ipc.on(icpList.generate.getLogoList, async (event, result) => {
@@ -1640,6 +1664,7 @@ const getLogolist = async () => {
     // 只使用第一个LOGO(如果存在且当前没有选择)
     if(logoList.value.length && !form.logo_path){
       form.logo_path = logoList.value[0]
+      logoLoadError.value = false
       // 保存默认LOGO到缓存
       saveLogoToCache(form.logo_path)
     }
@@ -1647,38 +1672,6 @@ const getLogolist = async () => {
   })
 }
 
-const addLogo = async (path) => {
-  console.log('addLogo', path);
-  clientStore.ipc.send(icpList.generate.addLogo, {
-    logo_path: path
-  });
-  clientStore.ipc.on(icpList.generate.addLogo, async (event, result) => {
-    console.log('addLogo result', result);
-
-    if (result.code === 0) {
-      console.log("添加成功")
-      if(result.data.logo){
-        const newLogo = result.data.logo
-        form.logo_path = newLogo
-        // 保存新添加的LOGO到缓存
-        saveLogoToCache(form.logo_path)
-        // 保持数组格式:如果列表中没有,添加到数组;如果已有,更新数组(保持兼容性)
-        const index = logoList.value.indexOf(newLogo)
-        if(index < 0){
-          // 新LOGO,添加到数组(保持数组格式兼容性)
-          logoList.value.push(newLogo)
-        } else {
-          // 已存在的LOGO,移动到第一个位置(UI只显示第一个)
-          logoList.value.splice(index, 1)
-          logoList.value.unshift(newLogo)
-        }
-      }
-    }
-    clientStore.ipc.removeAllListeners(icpList.generate.addLogo);
-  })
-}
-
-
 function selectExcel() {
   clientStore.ipc.removeAllListeners(icpList.utils.openFile);
   clientStore.ipc.send(icpList.utils.openFile, {
@@ -2352,6 +2345,16 @@ const selectFolder = () => {
     font-size: 12px;
     color: #999;
   }
+
+  &.is-error {
+    border-color: #FF4D4F;
+    background: #FFF2F0;
+
+    .logo-upload-text,
+    .logo-upload-hint {
+      color: #FF4D4F;
+    }
+  }
 }
 
 .logo-upload-preview {