优化列表资产展示逻辑

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

@@ -5,28 +5,78 @@ import type { Listing } from '@/features/listings'
 import {
   formatHafCoinM,
   getCoinWan,
+  getDailyLoss,
   getListingDisplayPrice,
+  getListingResources,
   getListingTitle,
   getLoginMethod,
+  getOnlineTimeText,
   getServerRegion,
+  getSkinNames,
   hasAcceleratedSaleRatio,
   hasGiftResources,
   readAssetNumber,
   readAssetString,
-  getResourceQuantity,
-  getOnlineTimeText,
-  getSkinNames,
   getRatioValue,
-  getDailyLoss,
+  type ListingDisplayResource,
 } from '@/utils/listingDisplay'
 
 interface Props {
   listing: Listing
 }
 
+interface ListingCardStat {
+  label: string
+  value: string
+  tone?: 'accent' | 'highlight'
+  title?: string
+}
+
 const props = defineProps<Props>()
 
 const coverURL = computed(() => props.listing.cover_url || props.listing.screenshot_urls?.[0] || '')
+const dailyLoss = computed(() => getDailyLoss(props.listing))
+const skinNames = computed(() => getSkinNames(props.listing))
+const statItems = computed(() => buildStatItems(props.listing))
+const resourceItems = computed(() => getListingResources(props.listing))
+
+function buildStatItems(listing: Listing) {
+  const onlineTime = getOnlineTimeText(listing)
+  const secretKD = readAssetNumber(listing, 'secret_kd')
+  const skinText = skinNames.value.slice(0, 2).join('、')
+  const stats: ListingCardStat[] = [
+    { label: '哈夫币', value: formatHafCoinM(getCoinWan(listing)), tone: 'accent' },
+    { label: '保险格数', value: readAssetString(listing, 'season_insurance') },
+    { label: '体力/负重', value: formatLevelPair(listing) },
+    { label: '绝密KD', value: secretKD > 0 ? formatStatNumber(secretKD) : '' },
+    { label: '游戏段位', value: listing.rank_level },
+    { label: '所属区服', value: getServerRegion(listing) },
+    { label: '上号方式', value: getLoginMethod(listing) },
+    { label: '方便上号', value: onlineTime },
+    {
+      label: '持有皮肤',
+      value: skinText,
+      title: skinNames.value.join('、'),
+    },
+  ]
+
+  return stats.filter(stat => Boolean(stat.value))
+}
+
+function formatResourceQuantity(resource: ListingDisplayResource) {
+  const suffix = resource.key === 'awmAmmo' ? '发' : ''
+  return `${formatStatNumber(resource.quantity)}${suffix}`
+}
+
+function formatLevelPair(listing: Listing) {
+  const staminaLevel = readAssetString(listing, 'stamina_level')
+  const loadLevel = readAssetString(listing, 'load_level')
+  return [staminaLevel, loadLevel].filter(Boolean).join('/')
+}
+
+function formatStatNumber(value: number) {
+  return Number.isInteger(value) ? String(value) : value.toFixed(1)
+}
 </script>
 
 <template>
@@ -50,83 +100,30 @@ const coverURL = computed(() => props.listing.cover_url || props.listing.screens
     <div class="card-details">
       <div class="card-title-row">
         <h3>{{ getListingTitle(listing) }}</h3>
-        <span class="daily-loss">日耗 {{ getDailyLoss(listing) }}</span>
+        <span v-if="dailyLoss" class="daily-loss">日耗 {{ dailyLoss }}</span>
       </div>
 
-      <div class="stats-grid">
-        <div class="stats-col">
-          <div class="stat-row">
-            <label>哈夫币</label>
-            <strong>{{ formatHafCoinM(getCoinWan(listing)) }}</strong>
-          </div>
-          <div class="stat-row">
-            <label>保险格数</label>
-            <span>{{ readAssetString(listing, 'season_insurance') || '--' }}</span>
-          </div>
-          <div class="stat-row">
-            <label>体力/负重</label>
-            <span
-              >{{ readAssetString(listing, 'stamina_level') }}/{{
-                readAssetString(listing, 'load_level')
-              }}</span
-            >
-          </div>
-        </div>
-
-        <div class="stats-col">
-          <div class="stat-row">
-            <label>AWM子弹</label>
-            <span :class="{ highlight: getResourceQuantity(listing, 'awmAmmo') > 0 }">
-              {{ getResourceQuantity(listing, 'awmAmmo') }}发
+      <div class="info-panel">
+        <div class="panel-title">基础资料</div>
+        <div class="info-grid">
+          <div v-for="stat in statItems" :key="stat.label" class="info-item">
+            <label>{{ stat.label }}</label>
+            <strong v-if="stat.tone === 'accent'">{{ stat.value }}</strong>
+            <span v-else :class="{ highlight: stat.tone === 'highlight' }" :title="stat.title">
+              {{ stat.value }}<em v-if="stat.label === '持有皮肤' && skinNames.length > 2">...</em>
             </span>
           </div>
-          <div class="stat-row">
-            <label>六级头甲</label>
-            <span>
-              {{ getResourceQuantity(listing, 'helmet6') }}头 /
-              {{ getResourceQuantity(listing, 'armor6') }}甲
-            </span>
-          </div>
-          <div class="stat-row">
-            <label>其他重器</label>
-            <span
-              >巴雷特 {{ getResourceQuantity(listing, 'barrett') }} / 喷子
-              {{ getResourceQuantity(listing, 'shotgun') }}</span
-            >
-          </div>
         </div>
+      </div>
 
-        <div class="stats-col">
-          <div class="stat-row">
-            <label>绝密KD</label>
-            <strong>{{ readAssetNumber(listing, 'secret_kd') || '--' }}</strong>
-          </div>
-          <div class="stat-row">
-            <label>游戏段位</label>
-            <span>{{ listing.rank_level || '未公开' }}</span>
-          </div>
-          <div class="stat-row">
-            <label>所属区服</label>
-            <span>{{ getServerRegion(listing) }}</span>
-          </div>
-        </div>
-
-        <div class="stats-col">
-          <div class="stat-row">
-            <label>上号方式</label>
-            <span>{{ getLoginMethod(listing) }}</span>
-          </div>
-          <div class="stat-row">
-            <label>方便上号</label>
-            <span class="time-text">{{ getOnlineTimeText(listing) || '全天候' }}</span>
-          </div>
-          <div class="stat-row skins-row">
-            <label>持有皮肤</label>
-            <span class="skins-text" :title="getSkinNames(listing).join(', ')">
-              {{ getSkinNames(listing).slice(0, 2).join(', ') || '暂无皮肤' }}
-              <em v-if="getSkinNames(listing).length > 2">...</em>
-            </span>
-          </div>
+      <div v-if="resourceItems.length" class="resource-panel">
+        <div class="panel-title">额外物资</div>
+        <div class="resource-chips">
+          <span v-for="resource in resourceItems" :key="resource.key" class="resource-chip">
+            <em>{{ resource.label }}</em>
+            <strong>{{ formatResourceQuantity(resource) }}</strong>
+            <small v-if="resource.mode === '赠送'">赠送</small>
+          </span>
         </div>
       </div>
     </div>
@@ -233,14 +230,16 @@ const coverURL = computed(() => props.listing.cover_url || props.listing.screens
 .card-details {
   display: flex;
   flex-direction: column;
+  gap: 12px;
   min-width: 0;
 }
 
 .card-title-row {
   display: flex;
+  gap: 12px;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16px;
+  margin-bottom: 0;
 }
 
 .card-title-row h3 {
@@ -254,6 +253,7 @@ const coverURL = computed(() => props.listing.cover_url || props.listing.screens
 }
 
 .daily-loss {
+  flex: 0 0 auto;
   padding: 4px 10px;
   background: #f1f5f9;
   border-radius: 6px;
@@ -262,46 +262,121 @@ const coverURL = computed(() => props.listing.cover_url || props.listing.screens
   color: #64748b;
 }
 
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
+.info-panel,
+.resource-panel {
+  border-radius: 14px;
+  background: #f8fafc;
 }
 
-.stats-col {
+.info-panel {
+  padding: 10px 12px 12px;
+}
+
+.resource-panel {
   display: flex;
-  flex-direction: column;
   gap: 12px;
+  align-items: flex-start;
+  padding: 10px 12px;
 }
 
-.stat-row {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.stat-row label {
+.panel-title {
+  flex: 0 0 auto;
+  margin-bottom: 8px;
   font-size: 11px;
   color: #94a3b8;
-  font-weight: 600;
+  font-weight: 800;
+  letter-spacing: 0.04em;
 }
 
-.stat-row span,
-.stat-row strong {
+.resource-panel .panel-title {
+  margin: 4px 0 0;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
+  gap: 8px 10px;
+}
+
+.info-item {
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid #edf1f7;
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.info-item label {
+  display: block;
+  margin-bottom: 3px;
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: 700;
+}
+
+.info-item span,
+.info-item strong {
+  display: block;
+  overflow: hidden;
   font-size: 13px;
   color: #334155;
-  font-weight: 600;
+  font-weight: 700;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.stat-row strong {
+.info-item strong {
   color: #ff6a00;
 }
 
-.stat-row .highlight {
+.info-item .highlight {
   color: #10b981;
   font-weight: 700;
 }
 
+.resource-chips {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.resource-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  max-width: 100%;
+  padding: 6px 10px;
+  border: 1px solid #fed7aa;
+  border-radius: 999px;
+  background: #fff7ed;
+  color: #9a3412;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.resource-chip em {
+  overflow: hidden;
+  font-style: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.resource-chip strong {
+  color: #ea580c;
+}
+
+.resource-chip small {
+  padding: 1px 5px;
+  border-radius: 999px;
+  background: #dcfce7;
+  color: #15803d;
+  font-size: 10px;
+  font-weight: 800;
+}
+
 .card-price {
   display: flex;
   flex-direction: column;

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

@@ -337,7 +337,6 @@
   gap: 6px;
 }
 
-.trust-badge,
 .server-badge,
 .card-chip-row span {
   padding: 3px 7px;
@@ -347,11 +346,6 @@
   font-size: 11px;
 }
 
-.trust-badge {
-  background: #ecfdf5;
-  color: #047857;
-}
-
 .card-footer {
   margin-top: 10px;
 }

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

@@ -512,7 +512,6 @@ function uniqueOptions(values: string[]) {
               </div>
               <p class="card-subtitle">{{ getListingSubtitle(item) }}</p>
               <div class="card-badges-row">
-                <span class="trust-badge">押金秒退</span>
                 <span class="server-badge">{{ getServerRegion(item) }}</span>
                 <span v-if="getLoginMethod(item)" class="server-badge">
                   {{ getLoginMethod(item) }}