修复移动端 AW炫彩回收图片预览白条问题

改用居中弹层与 AuthImage 鉴权加载，替代 showImagePreview，兼容私有与公开图地址。

frontend/src/features/listings/views/MobileHomeView.css

@@ -930,3 +930,43 @@
 .home-footer-copyright {
   color: #a0aab6;
 }
+
+/* AW炫彩回收预览（teleport 到 body） */
+.aw-recycle-preview {
+  display: flex;
+  flex-direction: column;
+  max-height: 86vh;
+  overflow: hidden;
+  background: #fff;
+}
+
+.aw-recycle-preview-head {
+  flex-shrink: 0;
+  padding: 14px 44px 10px 16px;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.aw-recycle-preview-head h3 {
+  margin: 0;
+  color: #17233d;
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.aw-recycle-preview-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px;
+  background: #f8fafc;
+}
+
+.aw-recycle-preview-body :deep(.aw-recycle-preview-img) {
+  display: block;
+  width: 100%;
+  max-height: calc(86vh - 72px);
+  object-fit: contain;
+  border-radius: 10px;
+  background: #fff;
+}

frontend/src/features/listings/views/MobileHomeView.vue

@@ -21,8 +21,8 @@ import {
   type AWRecycleConfig,
   type HomeBannerSlide,
 } from '@/features/listings/api/homeConfig'
-import { showImagePreview, showToast } from 'vant'
+import { showToast } from 'vant'
-import { fetchFileBlobByURL } from '@/shared/api/files'
+import AuthImage from '@/shared/components/business/AuthImage.vue'
 import MobileHomeFilterSheet, { type FilterSection } from './MobileHomeFilterSheet.vue'
 import {
   clearStoredHomeQuery,
@@ -80,6 +80,7 @@ const searchValue = ref('')
 const announcements = ref<string[]>(defaultHomeAnnouncements)
 const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners)
 const awRecycle = ref<AWRecycleConfig>({ ...defaultAWRecycleConfig })
+const awRecyclePreviewVisible = ref(false)
 const supportLoading = ref(false)
 const showBackTop = ref(false)
 const mobilePageSize = 10
@@ -476,32 +477,12 @@ async function loadHomeConfig() {
   }
 }
 
-async function openAWRecycle() {
+function openAWRecycle() {
-  const source = awRecycle.value.image_url
+  if (!awRecycle.value.image_url) {
-  if (!source) {
     showToast({ message: '回收说明图片尚未配置', icon: 'warning-o' })
     return
   }
-  try {
+  awRecyclePreviewVisible.value = true
-    // 私有 /api/files/object 需带鉴权拉取；公开 /api/public/files 可直接预览
-    let previewURL = source
-    if (
-      source.includes('/api/files/object') ||
-      source.includes('/api/admin/files/object')
-    ) {
-      const blob = await fetchFileBlobByURL(source)
-      previewURL = URL.createObjectURL(blob)
-    }
-    showImagePreview({
-      images: [previewURL],
-      closeable: true,
-    })
-  } catch {
-    showToast({
-      message: '图片加载失败，请在后台重新上传（需使用公开图）',
-      icon: 'cross',
-    })
-  }
 }
 
 async function onRefresh() {
@@ -1077,6 +1058,32 @@ syncMobileHomeQuery()
       <van-icon name="arrow-up" :size="20" />
     </button>
 
+    <van-popup
+      v-model:show="awRecyclePreviewVisible"
+      position="center"
+      round
+      closeable
+      teleport="body"
+      class="aw-recycle-popup"
+      :style="{ width: 'min(92vw, 420px)', maxHeight: '86vh' }"
+    >
+      <div class="aw-recycle-preview">
+        <header class="aw-recycle-preview-head">
+          <h3>{{ awRecycle.title }}</h3>
+        </header>
+        <div class="aw-recycle-preview-body">
+          <AuthImage
+            v-if="awRecycle.image_url"
+            :source="awRecycle.image_url"
+            :alt="awRecycle.title"
+            fit="contain"
+            image-class="aw-recycle-preview-img"
+          />
+          <van-empty v-else description="暂无展示图片" />
+        </div>
+      </div>
+    </van-popup>
+
     <MobileBottomNav />
   </main>
 </template>