优化pc页面ui大小和商品管理的表格项目

frontend/src/views/admin/AdminListingsView.vue

@@ -5,8 +5,17 @@ import { computed, reactive } from 'vue'
 import { fetchAdminListings, type AdminListingQuery, type Listing } from '@/api/listings'
 import { useAdminTable } from '@/composables/useAdminTable'
 import { useMoney } from '@/composables/useMoney'
-import { listingReviewStatusLabel, listingStatusLabel } from '@/utils/statusLabels'
-import { formatDateTime } from '@/utils/time'
+import {
+  assetRegions,
+  formatEstimatedRentalDuration,
+  formatHafCoinM,
+  formatListingCode,
+  formatRatio,
+  getCoinWan,
+  getDailyLoss,
+  getResourceQuantity,
+  getSkinGroup,
+} from '@/utils/listingDisplay'
 
 const money = useMoney()
 
@@ -38,22 +47,63 @@ function listingPrice(row: Listing) {
   return money(row.price)
 }
 
-function ownerName(row: Listing) {
-  return row.owner_phone || row.owner_nickname || `号主 ${row.owner_id}`
+function listingCoinM(row: Listing) {
+  return formatHafCoinM(getCoinWan(row))
 }
 
-function statusType(status: string) {
-  if (status === 'published') return 'success'
-  if (status === 'rented') return 'warning'
-  if (status === 'offline') return 'info'
-  return ''
+function assetText(row: Listing, key: string) {
+  const value = row.asset_summary?.[key]
+  if (typeof value === 'number') return formatQuantity(value)
+  if (typeof value === 'string' && value.trim()) return value.trim()
+  return '-'
 }
 
-function reviewType(status: string) {
-  if (status === 'approved') return 'success'
-  if (status === 'pending') return 'warning'
-  if (status === 'rejected') return 'danger'
-  return 'info'
+function levelText(row: Listing, key: string) {
+  const value = assetText(row, key)
+  return value === '-' ? value : value.replace(/级$/, '')
+}
+
+function regionText(row: Listing) {
+  const regions = assetRegions(row)
+  return regions.length ? regions.join('、') : '-'
+}
+
+function resourceText(row: Listing, key: string) {
+  const quantity = getResourceQuantity(row, key)
+  return quantity > 0 ? formatQuantity(quantity) : '-'
+}
+
+function skinGroupText(row: Listing, groupKey: string) {
+  const skins = getSkinGroup(row, groupKey)
+  return skins.length ? skins.join('、') : '-'
+}
+
+function characterAndWeaponSkinText(row: Listing) {
+  const groups = [
+    { label: '红皮', key: 'operatorRed' },
+    { label: '金皮', key: 'operatorGold' },
+    { label: '武器', key: 'weapon' },
+  ]
+  const parts = groups
+    .map((group) => {
+      const names = getSkinGroup(row, group.key)
+      return names.length ? `${group.label}：${names.join('、')}` : ''
+    })
+    .filter(Boolean)
+  return parts.length ? parts.join(' / ') : '-'
+}
+
+function rentAndDepositText(row: Listing) {
+  return `${listingPrice(row)}/${money(row.deposit_amount)}`
+}
+
+function estimateTitle(row: Listing) {
+  return `按哈夫币 ${listingCoinM(row)}、日耗 ${getDailyLoss(row)} 估算`
+}
+
+function formatQuantity(value: number) {
+  const rounded = Math.round(value * 10) / 10
+  return Number.isInteger(rounded) ? `${rounded}` : rounded.toFixed(1)
 }
 </script>
 
@@ -63,7 +113,7 @@ function reviewType(status: string) {
       <div class="page-header">
         <p class="eyebrow">Listings</p>
         <h1>商品管理</h1>
-        <p>查看全部租号商品、号主、区服平台、价格押金、上架状态和审核状态。</p>
+        <p>查看商品编码、地区、上号方式、账号资产、租金押金、比例和预计租期。</p>
       </div>
       <div class="toolbar-actions">
         <el-button @click="resetFilters">重置</el-button>
@@ -116,47 +166,73 @@ function reviewType(status: string) {
       </el-form-item>
     </el-form>
 
-    <el-table v-loading="loading" class="table-panel" :data="listings">
-      <el-table-column prop="id" label="ID" width="80" />
-      <el-table-column label="商品" min-width="220">
+    <el-table
+      v-loading="loading"
+      class="table-panel admin-listings-table"
+      :data="listings"
+      row-key="id"
+      stripe
+      empty-text="暂无商品"
+    >
+      <el-table-column label="商品编码" width="88">
         <template #default="{ row }">
-          <strong>{{ row.title }}</strong>
-          <span class="table-subtext">账号 ID: {{ row.account_id }}</span>
+          <strong class="listing-code">{{ formatListingCode(row) }}</strong>
         </template>
       </el-table-column>
-      <el-table-column label="号主" min-width="150">
+      <el-table-column label="地区" width="86">
+        <template #default="{ row }">{{ regionText(row) }}</template>
+      </el-table-column>
+      <el-table-column prop="login_platform" label="上号方式" width="78" />
+      <el-table-column label="哈夫币(M)" width="82">
+        <template #default="{ row }">{{ listingCoinM(row) }}</template>
+      </el-table-column>
+      <el-table-column label="保险" width="54">
+        <template #default="{ row }">{{ assetText(row, 'season_insurance') }}</template>
+      </el-table-column>
+      <el-table-column label="体力(级)" width="68">
+        <template #default="{ row }">{{ levelText(row, 'stamina_level') }}</template>
+      </el-table-column>
+      <el-table-column label="负重(级)" width="68">
+        <template #default="{ row }">{{ levelText(row, 'load_level') }}</template>
+      </el-table-column>
+      <el-table-column label="账号等级" width="74">
+        <template #default="{ row }">{{ assetText(row, 'fire_level') }}</template>
+      </el-table-column>
+      <el-table-column label="绝密KD" width="66">
+        <template #default="{ row }">{{ assetText(row, 'secret_kd') }}</template>
+      </el-table-column>
+      <el-table-column label="awm子弹" width="72">
+        <template #default="{ row }">{{ resourceText(row, 'awmAmmo') }}</template>
+      </el-table-column>
+      <el-table-column label="六头" width="48">
+        <template #default="{ row }">{{ resourceText(row, 'helmet6') }}</template>
+      </el-table-column>
+      <el-table-column label="六甲" width="48">
+        <template #default="{ row }">{{ resourceText(row, 'armor6') }}</template>
+      </el-table-column>
+      <el-table-column label="特殊刀皮" width="104">
         <template #default="{ row }">
-          <strong>{{ ownerName(row) }}</strong>
-          <span class="table-subtext">ID: {{ row.owner_id }}</span>
+          {{ skinGroupText(row, 'melee') }}
         </template>
       </el-table-column>
-      <el-table-column prop="server_region" label="区服" width="120" />
-      <el-table-column prop="login_platform" label="平台" width="120" />
-      <el-table-column prop="rank_level" label="段位" width="110" />
-      <el-table-column prop="haf_coin_amount" label="哈夫币" width="110" />
-      <el-table-column label="价格" width="100">
-        <template #default="{ row }">{{ listingPrice(row) }}</template>
-      </el-table-column>
-      <el-table-column label="押金" width="100">
-        <template #default="{ row }">{{ money(row.deposit_amount) }}</template>
-      </el-table-column>
-      <el-table-column label="商品状态" width="110">
+      <el-table-column label="人物红皮/人物金皮/武器皮肤" min-width="226">
         <template #default="{ row }">
-          <el-tag :type="statusType(row.status)">{{ listingStatusLabel(row.status) }}</el-tag>
+          {{ characterAndWeaponSkinText(row) }}
         </template>
       </el-table-column>
-      <el-table-column label="审核状态" width="110">
+      <el-table-column label="租金/押金" width="90">
+        <template #default="{ row }">{{ rentAndDepositText(row) }}</template>
+      </el-table-column>
+      <el-table-column label="比例" width="62">
+        <template #default="{ row }">{{ formatRatio(row) }}</template>
+      </el-table-column>
+      <el-table-column label="租期" width="82">
         <template #default="{ row }">
-          <el-tag :type="reviewType(row.review_status)">{{ listingReviewStatusLabel(row.review_status) }}</el-tag>
+          <span :title="estimateTitle(row)">{{ formatEstimatedRentalDuration(row) }}</span>
+          <span class="table-subtext">日耗 {{ getDailyLoss(row) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="上架时间" min-width="180">
-        <template #default="{ row }">{{ formatDateTime(row.published_at) }}</template>
-      </el-table-column>
-      <el-table-column label="更新时间" min-width="180">
-        <template #default="{ row }">{{ formatDateTime(row.updated_at) }}</template>
-      </el-table-column>
-      <el-table-column label="操作" width="110">
+      <el-table-column label="详情" width="60">
         <template #default="{ row }">
           <RouterLink :to="`/admin/listings/${row.id}`">
             <el-button size="small">详情</el-button>