From b684ea38d459aeb7a3647c41158e7aca0a4903b3 Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Tue, 10 Mar 2026 23:23:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20SafeImage=20?=
 =?UTF-8?q?=E5=AE=89=E5=85=A8=E5=9B=BE=E7=89=87=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加带错误处理和默认占位的图片组件，防止图片加载失败导致页面异常
---
 .../src/components/common/SafeImage.vue       | 119 ++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 flash-sale-frontend/src/components/common/SafeImage.vue

diff --git a/flash-sale-frontend/src/components/common/SafeImage.vue b/flash-sale-frontend/src/components/common/SafeImage.vue
new file mode 100644
index 0000000..f9322d7
--- /dev/null
+++ b/flash-sale-frontend/src/components/common/SafeImage.vue
@@ -0,0 +1,119 @@
+<template>
+  <div :class="['safe-image', wrapperClass, { 'is-clickable': clickable }]" @click="handleClick">
+    <div v-if="!loaded" class="safe-image__placeholder">
+      <div class="safe-image__shimmer"></div>
+    </div>
+    <img
+      :src="currentSrc"
+      :alt="alt"
+      :class="['safe-image__img', imgClass, { 'is-loaded': loaded }]"
+      :loading="lazy ? 'lazy' : 'eager'"
+      @load="handleLoad"
+      @error="handleError"
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { DEFAULT_PRODUCT_IMAGE, resolveImageUrl } from '@/utils/image'
+
+interface Props {
+  src?: string | null
+  alt?: string
+  imgClass?: string
+  wrapperClass?: string
+  lazy?: boolean
+  clickable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alt: '',
+  imgClass: '',
+  wrapperClass: '',
+  lazy: true,
+  clickable: false,
+})
+
+const emit = defineEmits<{
+  click: []
+}>()
+
+const currentSrc = ref(DEFAULT_PRODUCT_IMAGE)
+const loaded = ref(false)
+const fallbackApplied = ref(false)
+
+const resetSource = () => {
+  currentSrc.value = resolveImageUrl(props.src)
+  loaded.value = false
+  fallbackApplied.value = false
+}
+
+watch(() => props.src, resetSource, { immediate: true })
+
+const handleLoad = () => {
+  loaded.value = true
+}
+
+const handleError = () => {
+  if (fallbackApplied.value) {
+    loaded.value = true
+    return
+  }
+
+  fallbackApplied.value = true
+  currentSrc.value = DEFAULT_PRODUCT_IMAGE
+}
+
+const handleClick = () => {
+  if (props.clickable) {
+    emit('click')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.safe-image {
+  position: relative;
+  overflow: hidden;
+  background: #f8fafc;
+
+  &.is-clickable {
+    cursor: pointer;
+  }
+
+  &__placeholder {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
+  }
+
+  &__shimmer {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
+    animation: shimmer 1.4s infinite;
+  }
+
+  &__img {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    display: block;
+
+    &.is-loaded {
+      opacity: 1;
+    }
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+</style>