优化后台订单列表展示并支持商品标题与SKU规格

2026-09-10 09:39:19 +08:00
parent fe2a28454d
commit 4544622cb3
13 changed files with 655 additions and 51 deletions
@@ -1,5 +1,5 @@
 import { ArrowLeftOutlined } from '@ant-design/icons'
-import { Alert, Button, Card, Descriptions, Skeleton, Space, Table, Typography } from 'antd'
+import { Alert, Button, Card, Descriptions, Skeleton, Space, Table, Tag, Typography } from 'antd'
 import type { TableColumnsType } from 'antd'
 import { useQuery } from '@tanstack/react-query'
 import { useNavigate, useParams } from 'react-router'
@@ -115,7 +115,16 @@ export default function AdminOrderDetailPage() {
          <Descriptions.Item label="更新时间">
            {formatAdminDateTime(detail.order.updatedAt)}
          </Descriptions.Item>
-          <Descriptions.Item label="商品摘要">{detail.order.itemSummary || '-'}</Descriptions.Item>
+          <Descriptions.Item label="商品摘要">
+            <div className="cell-stack" style={{ gap: 4 }}>
+              <span>{detail.order.itemTitle || detail.order.itemSummary || '-'}</span>
+              {detail.order.skuNick ? (
+                <Tag color="blue" style={{ margin: 0, width: 'fit-content' }}>
+                  {detail.order.skuNick}
+                </Tag>
+              ) : null}
+            </div>
+          </Descriptions.Item>
        </Descriptions>
      </Card>

@@ -126,8 +135,26 @@ export default function AdminOrderDetailPage() {
          dataSource={detail.items}
          scroll={{ x: 760 }}
          columns={[
-            { title: '商品', dataIndex: 'itemTitle', minWidth: 240 },
-            { title: 'SKU', dataIndex: 'skuCode', minWidth: 180 },
+            {
+              title: '商品',
+              dataIndex: 'itemTitle',
+              minWidth: 240,
+              render: (value) => <strong>{value || '-'}</strong>,
+            },
+            {
+              title: 'SKU / 规格',
+              minWidth: 180,
+              render: (_, item) => (
+                <div className="cell-stack" style={{ gap: 4 }}>
+                  {item.skuNick ? (
+                    <Tag color="blue" style={{ margin: 0, width: 'fit-content' }}>
+                      {item.skuNick}
+                    </Tag>
+                  ) : null}
+                  <span className="muted">{item.skuCode || item.skuName || '-'}</span>
+                </div>
+              ),
+            },
            { title: '数量', dataIndex: 'quantity', width: 90 },
            { title: '履约模式', dataIndex: 'deliveryMode', minWidth: 140 },
          ]}
@@ -1,5 +1,5 @@
 import { SearchOutlined, ReloadOutlined } from '@ant-design/icons'
-import { Button, Card, Form, Input, Select, Space, Table, Typography } from 'antd'
+import { Button, Card, Form, Input, Select, Space, Table, Tag, Typography } from 'antd'
 import type { TableColumnsType } from 'antd'
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useMemo } from 'react'
@@ -102,15 +102,76 @@ export default function AdminOrdersPage() {
    },
    {
      title: '商品 / 任务',
-      minWidth: 220,
-      render: (_, row) => (
-        <div className="cell-stack">
-          <span>{row.itemSummary || '-'}</span>
-          <span className="muted">
-            商品 {row.itemCount} · 数量 {row.totalQuantity} · 任务 {row.taskCount}
-          </span>
-        </div>
-      ),
+      minWidth: 260,
+      render: (_, row) => {
+        const itemTitle = row.itemTitle || row.itemSummary || '-'
+        const skuNick = row.skuNick
+        const items = row.items && row.items.length > 0 ? row.items : null
+
+        return (
+          <div className="cell-stack" style={{ gap: 4 }}>
+            {items && items.length > 1 ? (
+              <div className="cell-stack" style={{ gap: 4 }}>
+                {items.slice(0, 2).map((item, idx) => (
+                  <div key={idx} className="cell-stack" style={{ gap: 2 }}>
+                    <Typography.Text
+                      strong
+                      ellipsis={{ tooltip: item.itemTitle }}
+                      style={{ maxWidth: 360 }}
+                    >
+                      {item.itemTitle || '-'}
+                    </Typography.Text>
+                    {item.skuNick ? (
+                      <Space size={4} wrap>
+                        <Tag
+                          color="blue"
+                          style={{
+                            margin: 0,
+                            maxWidth: 320,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                          }}
+                          title={`规格：${item.skuNick}`}
+                        >
+                          {item.skuNick}
+                        </Tag>
+                      </Space>
+                    ) : null}
+                  </div>
+                ))}
+                {items.length > 2 ? <span className="muted">等 {items.length} 种商品</span> : null}
+              </div>
+            ) : (
+              <>
+                <Typography.Text strong ellipsis={{ tooltip: itemTitle }} style={{ maxWidth: 360 }}>
+                  {itemTitle}
+                </Typography.Text>
+                {skuNick ? (
+                  <Space size={4} wrap>
+                    <Tag
+                      color="blue"
+                      style={{
+                        margin: 0,
+                        maxWidth: 320,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                      title={`规格：${skuNick}`}
+                    >
+                      {skuNick}
+                    </Tag>
+                  </Space>
+                ) : null}
+              </>
+            )}
+            <span className="muted">
+              商品 {row.itemCount} · 数量 {row.totalQuantity} · 任务 {row.taskCount}
+            </span>
+          </div>
+        )
+      },
    },
    {
      title: '状态',
@@ -8,6 +8,12 @@ export interface AdminOrderFulfillmentProgress {
  customerStatus: string
 }

+export interface AdminOrderItemSummary {
+  itemTitle: string
+  skuNick: string
+  quantity: number
+}
+
 export interface AdminOrderListItem {
  orderId: number
  provider: string
@@ -29,6 +35,9 @@ export interface AdminOrderListItem {
  itemCount: number
  totalQuantity: number
  itemSummary: string
+  itemTitle?: string
+  skuNick?: string
+  items?: AdminOrderItemSummary[]
  taskCount: number
  resourceStatus: string
  customerStatus: string
@@ -56,6 +65,8 @@ export interface AdminOrderDetail {
    createdAt: string
    updatedAt: string
    itemSummary: string
+    itemTitle?: string
+    skuNick?: string
    rawPayload: Record<string, unknown>
    fulfillmentProgress: AdminOrderFulfillmentProgress
  }
@@ -64,6 +75,7 @@ export interface AdminOrderDetail {
    skuCode: string
    skuName: string
    itemTitle: string
+    skuNick?: string
    quantity: number
    deliveryMode: string
    spec: Record<string, unknown>