revert(listings): 首页卡片恢复使用原生 img 与公开缩略图链路 (16KB秒开)

frontend/src/features/listings/components/ListingCard.vue

@@ -2,7 +2,6 @@
 import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
 import type { Listing } from '@/features/listings'
-import AuthImage from '@/shared/components/business/AuthImage.vue'
 import { formatCent, formatMoney } from '@/shared/utils/money'
 import {
   formatEstimatedRentalDuration,
@@ -23,7 +22,6 @@ import {
   formatHafCoinM,
   readAssetString,
   isTopTierInsurance,
-  getCoinScreenshotURL,
   type ListingDisplayResource,
 } from '@/shared/utils/listingDisplay'
 
@@ -33,8 +31,8 @@ interface Props {
 
 const props = defineProps<Props>()
 
-// 封面图片：仅展示纯币截图单张，避免 OSS 爆发高频请求错误
-const coverURL = computed(() => getCoinScreenshotURL(props.listing))
+// 封面图片：优先使用后端生成的公开缩略图（16KB秒开，免鉴权）
+const coverURL = computed(() => props.listing.cover_url || props.listing.screenshot_urls?.[0] || '')
 
 // 基础元信息
 const listingCode = computed(() => formatListingCode(props.listing))
@@ -102,15 +100,15 @@ function formatStatNumber(value: number) {
 
 <template>
   <RouterLink class="hfb-listing-card" :to="`/listings/${listing.id}`">
-    <!-- 左侧：4:3 黄金比例单张封面（展示纯币截图） -->
+    <!-- 左侧：4:3 黄金比例单张封面（后端公开缩略图，秒级加载） -->
     <div class="card-media">
-      <AuthImage
+      <img
         v-if="coverURL"
-        :source="coverURL"
+        :src="coverURL"
         :alt="getListingTitle(listing)"
-        image-class="media-img"
-        fallback-class="media-fallback"
-        fit="cover"
+        loading="lazy"
+        decoding="async"
+        class="media-img"
       />
       <div v-else class="media-empty">HFB</div>
 
@@ -299,7 +297,6 @@ function formatStatNumber(value: number) {
   cursor: pointer;
 }
 
-.card-media :deep(img),
 .card-media img {
   width: 100%;
   height: 100%;
@@ -308,25 +305,10 @@ function formatStatNumber(value: number) {
   transition: transform 0.25s ease;
 }
 
-.hfb-listing-card:hover .card-media :deep(img),
 .hfb-listing-card:hover .card-media img {
   transform: scale(1.03);
 }
 
-.card-media :deep(.auth-image-fallback) {
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
-  border: none;
-  border-radius: 0;
-  background: #f1f5f9;
-  color: #94a3b8;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .media-empty {
   display: flex;
   align-items: center;

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

@@ -9,7 +9,6 @@ import {
   useListingCollections,
   type ListingCollectionItem,
 } from '@/features/listings/composables/useListingCollections'
-import AuthImage from '@/shared/components/business/AuthImage.vue'
 import { formatCent, formatMoney } from '@/shared/utils/money'
 import {
   formatHafCoinM,
@@ -17,7 +16,6 @@ import {
   getCoinWan,
   getListingDisplayPrice,
   getListingTitle,
-  getCoinScreenshotURL,
 } from '@/shared/utils/listingDisplay'
 
 const route = useRoute()
@@ -138,11 +136,12 @@ function timeText(item: ListingCollectionItem) {
     <section v-else class="mobile-list">
       <article v-for="item in activeItems" :key="item.listing.id" class="mobile-card">
         <RouterLink :to="detailPath(item)" class="mobile-card-main">
-          <AuthImage
-            v-if="getCoinScreenshotURL(item.listing)"
-            :source="getCoinScreenshotURL(item.listing)"
+          <img
+            v-if="item.listing.cover_url || item.listing.screenshot_urls?.[0]"
+            :src="item.listing.cover_url || item.listing.screenshot_urls?.[0]"
             :alt="getListingTitle(item.listing)"
-            fit="cover"
+            loading="lazy"
+            decoding="async"
           />
           <div v-else class="mobile-cover-empty">HFB</div>
           <div class="mobile-info">

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

@@ -728,20 +728,6 @@
   display: block;
 }
 
-.mobile-card-media .auth-image-fallback {
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
-  border: none;
-  border-radius: 0;
-  background: #f1f5f9;
-  color: #94a3b8;
-  font-size: 11px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .media-empty {
   display: flex;
   align-items: center;

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

@@ -53,7 +53,6 @@ import {
   hasAcceleratedSaleRatio,
   hasGiftResources,
   isTopTierInsurance,
-  getCoinScreenshotURL,
   getCoinWan,
   formatHafCoinM,
   readAssetString,
@@ -1046,13 +1045,12 @@ syncMobileHomeQuery()
               <div class="mobile-card-body">
                 <!-- 左侧封面 -->
                 <div class="mobile-card-media">
-                  <AuthImage
-                    v-if="getCoinScreenshotURL(item)"
-                    :source="getCoinScreenshotURL(item)"
+                  <img
+                    v-if="item.cover_url || item.screenshot_urls?.[0]"
+                    :src="item.cover_url || item.screenshot_urls?.[0]"
                     :alt="formatListingCode(item)"
-                    image-class="mobile-media-img"
-                    fallback-class="mobile-media-fallback"
-                    fit="cover"
+                    loading="lazy"
+                    decoding="async"
                   />
                   <div v-else class="media-empty">HFB</div>
 

frontend/src/shared/utils/listingDisplay.ts

@@ -411,28 +411,8 @@ export function isTopTierInsurance(value: string | undefined | null): boolean {
 }
 
 /**
- * 获取账号封面/纯币截图（仅展示一张，优先纯币截图，其次封面图，其次首张截图）
+ * 获取账号封面图（优先公开缩略图接口，其次首张截图）
  */
 export function getCoinScreenshotURL(item: Listing): string {
-  const groups = item.asset_summary?.screenshot_groups
-  if (typeof groups === 'object' && groups !== null) {
-    const groupRecord = groups as Record<string, unknown>
-    const orderedKeys = ['coin', 'tencentSecurity', 'skin', 'gameId', 'totalAsset']
-    for (const key of orderedKeys) {
-      const urls = groupRecord[key]
-      if (Array.isArray(urls)) {
-        const found = urls.find(url => typeof url === 'string' && Boolean(url))
-        if (found) return found
-      }
-    }
-    for (const key of Object.keys(groupRecord)) {
-      if (orderedKeys.includes(key)) continue
-      const urls = groupRecord[key]
-      if (Array.isArray(urls)) {
-        const found = urls.find(url => typeof url === 'string' && Boolean(url))
-        if (found) return found
-      }
-    }
-  }
   return item.cover_url || item.screenshot_urls?.[0] || ''
 }