优化核销展示

apps/frontend/src/pages/admin/AdminKuaishouIndustryPage.tsx

@@ -207,10 +207,10 @@ export default function AdminKuaishouIndustryPage() {
     () => [
       {
         title: '券码',
-        minWidth: 220,
+        width: 168,
         render: (_, row) => (
           <div className="cell-stack">
-            <Typography.Text strong copyable>
+            <Typography.Text strong copyable ellipsis={{ tooltip: row.voucherCode }}>
               {row.voucherCode}
             </Typography.Text>
             <span className="muted">序号：{row.unitIndex}</span>
@@ -218,20 +218,44 @@ export default function AdminKuaishouIndustryPage() {
         ),
       },
       {
-        title: '订单 / 任务',
-        minWidth: 220,
-        render: (_, row) => (
-          <div className="cell-stack">
-            <Typography.Text copyable>{row.oid || '-'}</Typography.Text>
-            <span className="muted">
-              任务：{row.taskId || '-'} / 订单：{row.orderId || '-'}
-            </span>
-          </div>
-        ),
+        title: '订单商品',
+        // 主列自适应：订单号 + 商品名，避免额外「商品」列占宽
+        ellipsis: true,
+        render: (_, row) => {
+          const skuName = String(row.skuName || '').trim()
+          const skuCode = String(row.skuCode || '').trim()
+          const productLabel = skuName || (skuCode ? `编码 ${skuCode}` : '')
+          const taskLabel = row.taskNo
+            ? `${row.taskNo}${row.taskId ? ` (#${row.taskId})` : ''}`
+            : row.taskId
+              ? `#${row.taskId}`
+              : '-'
+
+          return (
+            <div className="cell-stack">
+              <Typography.Text copyable={Boolean(row.oid)} ellipsis={{ tooltip: row.oid || undefined }}>
+                {row.oid || '-'}
+              </Typography.Text>
+              {productLabel ? (
+                <Typography.Text
+                  ellipsis={{ tooltip: skuCode ? `${skuName || '-'}（${skuCode}）` : productLabel }}
+                >
+                  {productLabel}
+                </Typography.Text>
+              ) : (
+                <span className="muted">未关联商品</span>
+              )}
+              <span className="muted">
+                任务 {taskLabel}
+                {row.orderId ? ` · 订单 #${row.orderId}` : ''}
+              </span>
+            </div>
+          )
+        },
       },
       {
         title: '状态',
-        width: 150,
+        width: 118,
         render: (_, row) => (
           <div className="cell-stack">
             <Tag color={getVoucherStatusColor(row.status)}>{getVoucherStatusLabel(row.status)}</Tag>
@@ -243,38 +267,38 @@ export default function AdminKuaishouIndustryPage() {
       },
       {
         title: '店铺',
-        minWidth: 180,
+        width: 128,
+        ellipsis: true,
         render: (_, row) =>
           renderShopCell(
             row.shopName || shopNameBySellerId.get(String(row.sellerId || '').trim()) || '',
             row.sellerId,
             isSupportOnly ? '' : row.tokenMasked,
+            { compact: true },
           ),
       },
       {
         title: '核销',
-        minWidth: 180,
-        render: (_, row) => (
-          <div className="cell-stack">
-            <span>{row.consumeSerialNum || '-'}</span>
-            <span className="muted">{formatAdminDateTime(row.consumedAt)}</span>
-          </div>
-        ),
+        width: 132,
+        render: (_, row) => {
+          const serial = String(row.consumeSerialNum || '').trim()
+          const consumedAt = formatAdminDateTime(row.consumedAt)
+          return (
+            <div className="cell-stack">
+              <span title={serial || undefined}>{consumedAt !== '-' ? consumedAt : serial || '-'}</span>
+              {serial && consumedAt !== '-' ? (
+                <Typography.Text type="secondary" ellipsis={{ tooltip: serial }} className="muted">
+                  {serial}
+                </Typography.Text>
+              ) : null}
+            </div>
+          )
+        },
       },
-      ...(isSupportOnly
-        ? []
-        : [
-            {
-              title: '更新时间',
-              width: 170,
-              render: (_: unknown, row: AdminKuaishouIndustryVoucher) =>
-                formatAdminDateTime(row.updatedAt),
-            },
-          ]),
       {
         title: '操作',
         fixed: 'right' as const,
-        width: isSupportOnly ? 100 : 120,
+        width: isSupportOnly ? 88 : 72,
         render: (_: unknown, row: AdminKuaishouIndustryVoucher) => {
           if (isSupportOnly) {
             const canConsume = row.status === 'UNUSED'
@@ -796,14 +820,17 @@ export default function AdminKuaishouIndustryPage() {
     )
   }
 
-  function renderVoucherTable(scrollX = 1180) {
+  function renderVoucherTable(scrollX?: number) {
     return (
       <Table
         rowKey="id"
+        size="middle"
+        tableLayout="fixed"
         columns={columns}
         dataSource={vouchers}
         loading={voucherLoading}
-        scroll={{ x: scrollX }}
+        // 列已压缩；仅在极窄容器时横向滚动
+        scroll={scrollX ? { x: scrollX } : undefined}
         pagination={buildAdminTablePagination({
           current: voucherFilters.page,
           pageSize: voucherFilters.pageSize,
@@ -818,7 +845,7 @@ export default function AdminKuaishouIndustryPage() {
     return (
       <div className="page-stack">
         {renderVoucherFilters()}
-        <Card title="本地券码">{renderVoucherTable(1080)}</Card>
+        <Card title="本地券码">{renderVoucherTable()}</Card>
       </div>
     )
   }
@@ -829,7 +856,9 @@ export default function AdminKuaishouIndustryPage() {
         {renderVoucherFilters()}
 
         <div className="kuaishou-industry-split">
-          <Card title="本地券码">{renderVoucherTable()}</Card>
+          <Card title="本地券码" className="kuaishou-industry-voucher-card">
+            {renderVoucherTable(760)}
+          </Card>
 
           <Card title="接口操作">
             <div className="kuaishou-industry-tool-grid">
@@ -1295,15 +1324,33 @@ function renderShopCell(
   shopName?: string | null,
   sellerId?: string | null,
   tokenMasked?: string | null,
+  options: { compact?: boolean } = {},
 ) {
   const name = String(shopName || '').trim()
   const id = String(sellerId || '').trim()
   const token = String(tokenMasked || '').trim()
+  const compact = options.compact === true
 
   if (!name && !id) {
     return <span>-</span>
   }
 
+  const tipParts = [
+    name || null,
+    id ? `ID：${id}` : null,
+    token ? `Token：${token}` : null,
+  ].filter(Boolean)
+  const tip = tipParts.join('\n')
+
+  if (compact) {
+    return (
+      <div className="cell-stack" title={tip}>
+        <Typography.Text ellipsis={{ tooltip: tip }}>{name || id}</Typography.Text>
+        {name && id ? <span className="muted">ID：{id}</span> : null}
+      </div>
+    )
+  }
+
   return (
     <div className="cell-stack">
       <span>{name || id}</span>

apps/frontend/src/styles/main.css

@@ -308,11 +308,24 @@ select {
 
 .kuaishou-industry-split {
   display: grid;
-  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.75fr);
+  /* 本地券码优先占宽，减少表格横向滚动 */
+  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.55fr);
   gap: 16px;
   align-items: start;
 }
 
+.kuaishou-industry-voucher-card {
+  min-width: 0;
+}
+
+.kuaishou-industry-voucher-card .ant-table {
+  font-size: 13px;
+}
+
+.kuaishou-industry-voucher-card .ant-table-cell {
+  vertical-align: top;
+}
+
 .kuaishou-industry-tool-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

apps/frontend/src/types/admin/kuaishou-industry.ts

@@ -17,10 +17,16 @@ export interface AdminKuaishouIndustryVoucher {
   oid: string
   orderId: number | null
   taskId: number | null
+  /** 关联履约任务号（列表 join 可选） */
+  taskNo?: string
   unitIndex: number
   sellerId: string
   /** 来自行业店铺配置的展示名（customShopName 优先） */
   shopName: string
+  /** 关联订单商品编码（列表 join） */
+  skuCode?: string
+  /** 关联订单商品名称（列表 join） */
+  skuName?: string
   tokenMasked: string
   status: string
   validStartTime: number