perf(admin): 点击后加载领券点位明细

src/app/(main)/coupon-data/page.tsx

@@ -14,6 +14,7 @@ import {
   Row,
   Select,
   Space,
+  Spin,
   Statistic,
   Table,
   Tag,
@@ -75,15 +76,21 @@ interface CouponDataRow {
   claimed_count: number | null;
   point_success_count: number | null;
   point_total_count: number | null;
-  point_details: Array<{
-    coupon_id: string;
-    coupon_name: string | null;
-    status: string;
-    reason: string | null;
-  }>;
+  // 兼容旧后端的内嵌明细；新后端不再返回，改为点击后按 trace 加载。
+  point_details?: CouponPointDetail[];
   trace_url: string | null;
   ad_revenue_yuan: number | null; // 本次领券看的信息流广告预估收益(元);未填充为 null
 }
+interface CouponPointDetail {
+  coupon_id: string;
+  coupon_name: string | null;
+  status: string;
+  reason: string | null;
+}
+interface CouponPointDetailsOut {
+  trace_id: string;
+  items: CouponPointDetail[];
+}
 interface CouponDataReport {
   date_from: string;
   date_to: string;
@@ -132,6 +139,87 @@ const POINT_STATUS_TAG: Record<string, { color: string; label: string }> = {
   skipped: { color: 'default', label: '跳过' },
 };
 
+function PointScorePopover({ row }: { row: CouponDataRow }) {
+  const { message } = App.useApp();
+  const [details, setDetails] = useState<CouponPointDetail[] | null>(row.point_details ?? null);
+  const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  if (row.point_success_count == null || row.point_total_count == null || row.point_total_count <= 0) {
+    return <Typography.Text type="secondary">-</Typography.Text>;
+  }
+  const score = `${row.point_success_count}/${row.point_total_count}`;
+  const loadDetails = async () => {
+    if (details !== null || loading) return;
+    setLoading(true);
+    setLoadError(null);
+    try {
+      const response = await api.get<CouponPointDetailsOut>('/admin/api/coupon-data/point-details', {
+        params: { trace_id: row.trace_id },
+      });
+      setDetails(response.data.items);
+    } catch (error) {
+      const errorMessage = errMsg(error);
+      setLoadError(errorMessage);
+      message.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Popover
+      trigger="click"
+      placement="bottomLeft"
+      title={`点位明细（${score}）`}
+      onOpenChange={(open) => {
+        if (open) void loadDetails();
+      }}
+      content={(
+        <div style={{ width: 380, maxHeight: 360, overflowY: 'auto' }}>
+          {loading || (details === null && loadError === null) ? (
+            <Spin size="small" style={{ display: 'block', margin: '24px auto' }} />
+          ) : loadError ? (
+            <Typography.Text type="danger">明细加载失败，请关闭后重试</Typography.Text>
+          ) : details && details.length > 0 ? details.map((point, index) => {
+            const status = POINT_STATUS_TAG[point.status] ?? {
+              color: 'default', label: point.status,
+            };
+            return (
+              <div
+                key={`${point.coupon_id}-${index}`}
+                style={{
+                  padding: '8px 0',
+                  borderBottom: index < details.length - 1 ? '1px solid #f0f0f0' : undefined,
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <Typography.Text>{point.coupon_name || point.coupon_id}</Typography.Text>
+                    {point.coupon_name ? (
+                      <div><Typography.Text type="secondary">{point.coupon_id}</Typography.Text></div>
+                    ) : null}
+                  </div>
+                  <Tag color={status.color} style={{ marginInlineEnd: 0 }}>{status.label}</Tag>
+                </div>
+                {point.reason ? (
+                  <div style={{ marginTop: 4 }}>
+                    <Typography.Text type="danger">原因：{point.reason}</Typography.Text>
+                  </div>
+                ) : null}
+              </div>
+            );
+          }) : (
+            <Typography.Text type="secondary">暂无点位明细</Typography.Text>
+          )}
+        </div>
+      )}
+    >
+      <Button type="link" size="small" style={{ height: 'auto', padding: 0 }}>{score}</Button>
+    </Popover>
+  );
+}
+
 // ms → "1.5s"(空值显示 -)
 const fmtSec = (ms: number | null | undefined): string =>
   ms == null ? '-' : `${(ms / 1000).toFixed(1)}s`;
@@ -511,55 +599,7 @@ export default function CouponDataPage() {
       title: '点位成功率',
       key: 'point_success_rate',
       width: 110,
-      render: (_: unknown, r: CouponDataRow) => {
-        if (r.point_success_count == null || r.point_total_count == null || r.point_total_count <= 0) {
-          return <Typography.Text type="secondary">-</Typography.Text>;
-        }
-        const score = `${r.point_success_count}/${r.point_total_count}`;
-        const details = r.point_details ?? [];
-        return (
-          <Popover
-            trigger="click"
-            placement="bottomLeft"
-            title={`点位明细（${score}）`}
-            content={(
-              <div style={{ width: 380, maxHeight: 360, overflowY: 'auto' }}>
-                {details.length > 0 ? details.map((point, index) => {
-                  const status = POINT_STATUS_TAG[point.status] ?? {
-                    color: 'default', label: point.status,
-                  };
-                  return (
-                    <div
-                      key={`${point.coupon_id}-${index}`}
-                      style={{
-                        padding: '8px 0',
-                        borderBottom: index < details.length - 1 ? '1px solid #f0f0f0' : undefined,
-                      }}
-                    >
-                      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <Typography.Text>{point.coupon_name || point.coupon_id}</Typography.Text>
-                          {point.coupon_name ? (
-                            <div><Typography.Text type="secondary">{point.coupon_id}</Typography.Text></div>
-                          ) : null}
-                        </div>
-                        <Tag color={status.color} style={{ marginInlineEnd: 0 }}>{status.label}</Tag>
-                      </div>
-                      {point.reason ? (
-                        <div style={{ marginTop: 4 }}>
-                          <Typography.Text type="danger">原因：{point.reason}</Typography.Text>
-                        </div>
-                      ) : null}
-                    </div>
-                  );
-                }) : <Typography.Text type="secondary">暂无点位明细</Typography.Text>}
-              </div>
-            )}
-          >
-            <Button type="link" size="small" style={{ height: 'auto', padding: 0 }}>{score}</Button>
-          </Popover>
-        );
-      },
+      render: (_: unknown, r: CouponDataRow) => <PointScorePopover row={r} />,
     },
     {
       title: '广告收益',