feat(admin): 优化商品与支付配置列表

frontend/src/features/admin/api/paymentConfig.ts

@@ -19,10 +19,7 @@ export interface PaymentConfig {
   status: string
   environment: string
   business_tags: string[] | null
-  reference_count: number
-  total_transactions: number
-  total_amount_cent: number
-  last_used_at: string | null
+  has_payment_records: boolean
   created_by: number | null
   updated_by: number | null
   created_at: string

frontend/src/features/admin/views/AdminListingsView.vue

@@ -62,7 +62,8 @@ const publishOptions = ref(emptyListingPublishOptions)
 const listingColumnUnits = {
   code: 68,
   zone: 70,
-  region: 100,
+  region: 62,
+  login: 38,
   core: 80,
   level: 58,
   equipment: 78,
@@ -161,10 +162,11 @@ const screenshotColumns = [
     read: (row: Listing) => zoneCompensationText(row),
   },
   {
-    label: '地区/上号/纯币',
-    width: 140,
-    read: (row: Listing) => regionLoginCoinText(row),
+    label: '地区/纯币',
+    width: 105,
+    read: (row: Listing) => regionCoinText(row),
   },
+  { label: '上号方式', width: 70, read: (row: Listing) => loginMethodText(row) },
   {
     label: '保险/体力/负重',
     width: 112,
@@ -179,8 +181,8 @@ const screenshotColumns = [
   { label: '皮肤资产', width: 189, read: (row: Listing) => skinAssetText(row) },
   { label: '人脸/全英雄', width: 81, read: (row: Listing) => faceHeroText(row) },
   { label: '号主备注', width: 112, read: (row: Listing) => ownerRemarkText(row) },
-  { label: '租客纯币价格', width: 101, read: (row: Listing) => renterPureCoinPriceText(row) },
   { label: '租期', width: 70, read: (row: Listing) => rentalPeriodText(row) },
+  { label: '租客纯币价格', width: 101, read: (row: Listing) => renterPureCoinPriceText(row) },
   { label: '租金/押金', width: 106, read: (row: Listing) => rentAndDepositText(row) },
   { label: '比例', width: 42, read: (row: Listing) => formatRatio(row) },
   { label: '详情', width: 64, read: () => '详情' },
@@ -517,7 +519,7 @@ function renderTableScreenshotCanvas(rows: Listing[]) {
     drawCellText(
       ctx,
       headerLines[columnIndex] ?? [column.label],
-      x + cellPaddingX,
+      x + column.width / 2,
       y + cellPaddingY + 12,
       lineHeight
     )
@@ -538,7 +540,7 @@ function renderTableScreenshotCanvas(rows: Listing[]) {
         columnIndex === 0
           ? '700 13px Arial, "Microsoft YaHei", sans-serif'
           : '13px Arial, "Microsoft YaHei", sans-serif'
-      drawCellText(ctx, lines, x + cellPaddingX, y + cellPaddingY + 14, lineHeight)
+      drawCellText(ctx, lines, x + column.width / 2, y + cellPaddingY + 14, lineHeight)
       x += column.width
     }
     drawLine(ctx, paddingX, y + rowHeight, paddingX + tableWidth, y + rowHeight)
@@ -569,12 +571,13 @@ function wrapCanvasText(ctx: CanvasRenderingContext2D, text: string, maxWidth: n
 function drawCellText(
   ctx: CanvasRenderingContext2D,
   lines: string[],
-  x: number,
+  centerX: number,
   y: number,
   lineHeight: number
 ) {
+  ctx.textAlign = 'center'
   lines.forEach((line, index) => {
-    ctx.fillText(line, x, y + index * lineHeight)
+    ctx.fillText(line, centerX, y + index * lineHeight)
   })
 }
 
@@ -648,8 +651,12 @@ function zoneCompensationText(row: Listing) {
   return `${zone}\n${compensation}`
 }
 
-function regionLoginCoinText(row: Listing) {
-  return [regionText(row), row.login_platform || '-', listingCoinM(row)].join('\n')
+function regionCoinText(row: Listing) {
+  return [regionText(row), listingCoinM(row)].join('\n')
+}
+
+function loginMethodText(row: Listing) {
+  return row.login_platform?.trim() || '-'
 }
 
 function insuranceSlotText(row: Listing) {
@@ -1070,15 +1077,22 @@ function formatQuantity(value: number) {
         </template>
       </el-table-column>
       <el-table-column
-        label="地区/上号/纯币"
+        label="地区/纯币"
         :width="listingColumnWidths.region"
         show-overflow-tooltip
         label-class-name="listing-merged-header"
       >
         <template #default="{ row }">
-          <span class="listing-multiline-cell">{{ regionLoginCoinText(row) }}</span>
+          <span class="listing-multiline-cell">{{ regionCoinText(row) }}</span>
         </template>
       </el-table-column>
+      <el-table-column
+        label="上号方式"
+        :width="listingColumnWidths.login"
+        label-class-name="listing-merged-header"
+      >
+        <template #default="{ row }">{{ loginMethodText(row) }}</template>
+      </el-table-column>
       <el-table-column
         label="保险/体力/负重"
         :width="listingColumnWidths.core"
@@ -1130,6 +1144,12 @@ function formatQuantity(value: number) {
       <el-table-column label="号主备注" :width="listingColumnWidths.remark" show-overflow-tooltip>
         <template #default="{ row }">{{ ownerRemarkText(row) }}</template>
       </el-table-column>
+      <el-table-column label="租期" :width="listingColumnWidths.period">
+        <template #default="{ row }">
+          <span :title="estimateTitle(row)">{{ formatEstimatedRentalDuration(row) }}</span>
+          <span v-if="getDailyLoss(row)" class="table-subtext">日耗 {{ getDailyLoss(row) }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="租客纯币价格" :width="listingColumnWidths.purePrice">
         <template #default="{ row }">
           <span :title="`租客纯币价格（不含消耗品）${renterPureCoinPriceText(row)}`">
@@ -1137,12 +1157,6 @@ function formatQuantity(value: number) {
           </span>
         </template>
       </el-table-column>
-      <el-table-column label="租期" :width="listingColumnWidths.period">
-        <template #default="{ row }">
-          <span :title="estimateTitle(row)">{{ formatEstimatedRentalDuration(row) }}</span>
-          <span v-if="getDailyLoss(row)" class="table-subtext">日耗 {{ getDailyLoss(row) }}</span>
-        </template>
-      </el-table-column>
       <el-table-column label="租金/押金" :width="listingColumnWidths.rentDeposit">
         <template #default="{ row }">{{ rentAndDepositText(row) }}</template>
       </el-table-column>

frontend/src/features/admin/views/AdminPaymentConfigsView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import {
   Plus,
   Refresh,
@@ -19,8 +19,6 @@ import {
   importPaymentConfigBackup,
   type PaymentConfig,
 } from '@/features/admin/api/paymentConfig'
-import { formatDateTime } from '@/shared/utils/time'
-import { formatCent } from '@/shared/utils/money'
 import { readError } from '@/shared/utils/error'
 import PaymentConfigDialog from '../components/PaymentConfigDialog.vue'
 
@@ -69,10 +67,6 @@ const environmentOptions = [
   { label: '测试环境', value: 'sandbox' },
 ]
 
-const filteredConfigs = computed(() => {
-  return configs.value
-})
-
 onMounted(() => {
   loadConfigs()
 })
@@ -267,10 +261,6 @@ function formatEnvironment(env: string) {
   return map[env] || env
 }
 
-function formatAmount(amountCent: number) {
-  return formatCent(amountCent)
-}
-
 function getEnvironmentClass(env: string) {
   const map: Record<string, string> = {
     production: 'env-production',
@@ -298,12 +288,12 @@ function tableRowClassName({ row }: { row: PaymentConfig }) {
 }
 
 function canDeleteConfig(row: PaymentConfig) {
-  return (row.reference_count || 0) <= 0
+  return !row.has_payment_records
 }
 
 function deleteDisabledReason(row: PaymentConfig) {
   if (canDeleteConfig(row)) return '删除配置'
-  return `已有 ${row.reference_count || 0} 条支付记录引用，需要保留用于退款、查询和回调验签`
+  return '已有支付记录引用，需要保留用于退款、查询和回调验签'
 }
 </script>
 
@@ -413,7 +403,7 @@ function deleteDisabledReason(row: PaymentConfig) {
 
       <div class="table-container">
         <el-table
-          :data="filteredConfigs"
+          :data="configs"
           v-loading="loading"
           class="payment-config-table custom-enterprise-table"
           :row-class-name="tableRowClassName"
@@ -456,27 +446,6 @@ function deleteDisabledReason(row: PaymentConfig) {
               <span v-else class="standby-badge">备用</span>
             </template>
           </el-table-column>
-          <el-table-column label="支付记录" min-width="150">
-            <template #default="{ row }">
-              <div class="usage-cell">
-                <div>成功: {{ row.total_transactions }} 笔</div>
-                <div :class="{ 'usage-reference-locked': (row.reference_count || 0) > 0 }">
-                  引用: {{ row.reference_count || 0 }} 条
-                </div>
-                <div>金额: ¥{{ formatAmount(row.total_amount_cent) }}</div>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="last_used_at"
-            label="最后成功支付"
-            min-width="180"
-            show-overflow-tooltip
-          >
-            <template #default="{ row }">
-              {{ row.last_used_at ? formatDateTime(row.last_used_at, '-') : '-' }}
-            </template>
-          </el-table-column>
           <el-table-column label="操作" width="226" class-name="operation-column">
             <template #default="{ row }">
               <div class="action-buttons">
@@ -789,20 +758,6 @@ function deleteDisabledReason(row: PaymentConfig) {
   font-weight: 600;
 }
 
-.usage-cell {
-  display: grid;
-  gap: 4px;
-  font-size: 12px;
-  line-height: 1.35;
-  color: #3f4654;
-  white-space: nowrap;
-}
-
-.usage-reference-locked {
-  color: #dc2626;
-  font-weight: 600;
-}
-
 .action-buttons {
   display: flex;
   align-items: center;

frontend/src/styles/admin.css

@@ -1144,12 +1144,14 @@ h1 {
 .admin-listings-table.el-table th {
   font-size: 11px;
   letter-spacing: 0;
+  text-align: center;
   text-transform: none;
 }
 
 .admin-listings-table.el-table .cell {
   padding: 0 5px;
   line-height: 1.35;
+  text-align: center;
   white-space: normal;
   word-break: break-word;
 }
@@ -1191,6 +1193,7 @@ h1 {
 
 .admin-listings-table.el-table .el-table__cell {
   padding: 8px 0;
+  text-align: center;
 }
 
 .admin-listings-table.el-table .el-button--small {