优化客服群聊订单信息展示

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

@@ -10,6 +10,7 @@ import {
   formatListingCode,
   getListingChips,
   getListingResources,
+  getListingSkinGroups,
   getListingTitle,
   getLoginMethod,
   getServerRegion,
@@ -29,13 +30,13 @@ 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 skinGroups = computed(() => getListingSkinGroups(props.listing))
+const skinSummaryText = computed(() =>
+  skinGroups.value.map(group => `${group.title}: ${group.options.join(' / ')}`).join(' ｜ ')
+)
 const chipItems = computed(() => getListingChips(props.listing))
 const resourceItems = computed(() => getListingResources(props.listing))
 const rentalDuration = computed(() => formatEstimatedRentalDuration(props.listing))
-const visibleSkinNames = computed(() => skinNames.value.slice(0, 4))
-const skinOverflowCount = computed(() =>
-  Math.max(0, skinNames.value.length - visibleSkinNames.value.length)
-)
 const accessTags = computed(() =>
   [getServerRegion(props.listing), getLoginMethod(props.listing)]
     .filter(Boolean)
@@ -113,10 +114,10 @@ function formatStatNumber(value: number) {
         </span>
       </div>
 
-      <div v-if="skinNames.length" class="skin-line" :title="skinNames.join('、')">
+      <div v-if="skinGroups.length" class="skin-line" :title="skinNames.join('、')">
         <span class="line-title">皮肤</span>
-        <span class="skin-list">{{ visibleSkinNames.join(' / ') }}</span>
-        <span v-if="skinOverflowCount" class="skin-count">+{{ skinOverflowCount }}</span>
+        <span class="skin-list">{{ skinSummaryText }}</span>
+        <span class="skin-count">{{ skinNames.length }}款</span>
       </div>
 
       <div v-if="resourceItems.length" class="resource-line">