feat(listings): 演示商品数据与哈夫币展示

frontend/src/features/listings/ListingCollectionsPage.tsx

@@ -13,7 +13,7 @@ import {
 } from '@/features/listings/collectionsApi'
 import { useListingCollections } from '@/features/listings/collections'
 import { useSessionStore } from '@/stores/session'
-import { formatDateTime, formatMoney } from '@/shared/utils/format'
+import { formatCoinM, formatDateTime, formatMoney } from '@/shared/utils/format'
 
 type TabKey = 'history' | 'favorite'
 
@@ -218,7 +218,7 @@ export function ListingCollectionsPage() {
                     </Tag>
                   </Space>
                   <div className="collections-item__meta">
-                    <span>哈夫币 {item.listing.haf_coin_amount?.toLocaleString() ?? '—'}</span>
+                    <span>哈夫币 {formatCoinM(item.listing.haf_coin_amount)}</span>
                     <span>押金 {formatMoney(item.listing.deposit_amount_cent)}</span>
                   </div>
                 </div>

frontend/src/features/listings/ListingDetailPage.tsx

@@ -42,6 +42,7 @@ import {
   usePostRentalNotice,
 } from '@/features/orders/api'
 import { useSessionStore } from '@/stores/session'
+import { formatCoinM } from '@/shared/utils/format'
 import type { Listing } from '@/shared/api/types'
 
 function money(cents: number) {
@@ -285,7 +286,7 @@ export function ListingDetailPage() {
               </div>
               <div>
                 <span>哈夫币</span>
-                <strong>{data.haf_coin_amount.toLocaleString()} M</strong>
+                <strong>{formatCoinM(data.haf_coin_amount)}</strong>
               </div>
               <div>
                 <span>号主</span>
@@ -444,7 +445,7 @@ export function ListingDetailPage() {
           <Descriptions.Item label="租金">{money(data.price_cent)}</Descriptions.Item>
           <Descriptions.Item label="押金">{money(data.deposit_amount_cent)}</Descriptions.Item>
           <Descriptions.Item label="哈夫币">
-            {data.haf_coin_amount.toLocaleString()} M
+            {formatCoinM(data.haf_coin_amount)}
           </Descriptions.Item>
           <Descriptions.Item label="号主">
             {data.owner_nickname || `#${data.owner_id}`}

frontend/src/features/listings/ListingListPage.tsx

@@ -42,6 +42,7 @@ import {
   type ListingFilterState,
 } from '@/features/listings/ListingFilterPanel'
 import { fetchListingPublishOptions } from '@/features/seller/options'
+import { formatCoinM } from '@/shared/utils/format'
 import type { Listing } from '@/shared/api/types'
 
 const PAGE_SIZE = 20
@@ -79,9 +80,37 @@ function assetText(item: Listing, key: string) {
 }
 
 function ratioText(item: Listing) {
+  const published = Number(item.asset_summary?.publish_ratio ?? 0)
+  if (published > 0) return `${published}w`
   const priceYuan = item.price_cent / 100
-  if (priceYuan <= 0 || !item.haf_coin_amount) return ''
-  return `${((item.haf_coin_amount / priceYuan) * 100).toFixed(0)}w`
+  const coinM = item.haf_coin_amount / 1_000_000
+  if (priceYuan <= 0 || coinM <= 0) return ''
+  return `${((coinM / priceYuan) * 100).toFixed(0)}w`
+}
+
+function skinNames(item: Listing): string[] {
+  const groups = item.asset_summary?.skin_groups
+  if (!groups || typeof groups !== 'object') return []
+  const names: string[] = []
+  Object.values(groups as Record<string, unknown>).forEach(value => {
+    if (!Array.isArray(value)) return
+    value.forEach(name => {
+      if (typeof name === 'string' && name) names.push(name)
+    })
+  })
+  return Array.from(new Set(names)).slice(0, 8)
+}
+
+function resourceItems(item: Listing): { label: string; quantity: number }[] {
+  const raw = item.asset_summary?.resources
+  if (!Array.isArray(raw)) return []
+  return raw
+    .map(entry => {
+      const row = (entry ?? {}) as Record<string, unknown>
+      return { label: String(row.label ?? row.key ?? ''), quantity: Number(row.quantity ?? 0) }
+    })
+    .filter(row => row.label && row.quantity > 0)
+    .slice(0, 6)
 }
 
 function ListingCover({ item }: { item: Listing }) {
@@ -102,7 +131,7 @@ function ListingCover({ item }: { item: Listing }) {
 
 function ListingRow({ item }: { item: Listing }) {
   const specs = [
-    { label: '哈夫币', value: `${item.haf_coin_amount.toLocaleString()}M` },
+    { label: '哈夫币', value: formatCoinM(item.haf_coin_amount) },
     { label: '保险', value: assetText(item, 'season_insurance') },
     { label: '体力', value: assetText(item, 'stamina_level') },
     { label: '负重', value: assetText(item, 'load_level') },
@@ -111,6 +140,8 @@ function ListingRow({ item }: { item: Listing }) {
     { label: '区服', value: item.server_region },
     { label: '折算比', value: ratioText(item) ? `1元≈${ratioText(item)}` : '' },
   ].filter(spec => spec.value)
+  const skins = skinNames(item)
+  const resources = resourceItems(item)
 
   return (
     <article className="listing-row">
@@ -145,6 +176,26 @@ function ListingRow({ item }: { item: Listing }) {
             </span>
           ))}
         </div>
+
+        {skins.length > 0 ? (
+          <div className="listing-row__skins">
+            <em>精选皮肤</em>
+            {skins.map(name => (
+              <span key={name}>{name}</span>
+            ))}
+          </div>
+        ) : null}
+
+        {resources.length > 0 ? (
+          <div className="listing-row__resources">
+            <em>仓库物资</em>
+            {resources.map(row => (
+              <span key={row.label}>
+                {row.label} {row.quantity}
+              </span>
+            ))}
+          </div>
+        ) : null}
       </div>
 
       <div className="listing-row__side">
@@ -194,7 +245,7 @@ function ListingGridCard({ item }: { item: Listing }) {
           {item.rank_level ? <Tag bordered={false}>{item.rank_level}</Tag> : null}
         </div>
         <div className="listing-card__meta">
-          <span>哈夫币 {item.haf_coin_amount.toLocaleString()}</span>
+          <span>哈夫币 {formatCoinM(item.haf_coin_amount)}</span>
           <span>{item.owner_nickname || '商行认证号主'}</span>
         </div>
         <div className="listing-card__price-row">