fix(admin): 拆分广告发奖与播放状态

feat(admin): 领券点位分数支持查看明细 (#56 )
## 变更内容 - 领券记录列表的点位成功率展示为成功数/尝试数，例如 8/8 - 点击分数弹出点位明细 - 逐条展示点位名称、ID、成功、已领、失败或跳过状态 - 失败点位额外展示失败原因 - 无逐券埋点的旧记录显示 - ## 依赖 - 依赖 app-server #153 提供 point_success_count、point_total_count 和 point_details ## 验证 - npx tsc --noEmit - npm run build - 本地实际验证 8/8 全部成功和 7/8 含失败原因两种状态 --------- Co-authored-by: guke <guke@wonderable.ai> Co-authored-by: linkeyu <798648091@qq.com> Reviewed-on: #56 Co-authored-by: linkeyu <linkeyu@wonderable.ai> Co-committed-by: linkeyu <linkeyu@wonderable.ai>
2026-07-22 11:49:26 +08:00 · 2026-07-22 11:46:47 +08:00
2 changed files with 200 additions and 29 deletions
@@ -66,21 +66,89 @@ const APP_TAG: Record<string, { color: string; label: string }> = {
  test: { color: 'default', label: '测试应用' },
 };

-// 发奖状态 → 颜色 + 中文(含「不发金币的原因」:提前关闭/未满10秒/缺eCPM/次数超限)
-const STATUS_TAG: Record<string, { color: string; label: string }> = {
-  granted: { color: 'green', label: '已发' },
-  capped: { color: 'orange', label: '次数超限' },
-  ecpm_missing: { color: 'red', label: '缺 eCPM' },
+const REWARD_STATUS_HINT: Record<string, string> = {
+  granted: '已完成金币发放',
+  capped: '次数超限，未发金币',
+  ecpm_missing: '缺少有效 eCPM，未发金币',
+  too_short: '播放时长未达到发奖条件，未发金币',
+  closed_early: '用户提前关闭广告，未发金币',
+};
+
+const PLAYBACK_STATUS_TAG: Record<string, { color: string; label: string }> = {
+  completed: { color: 'green', label: '已完成' },
  too_short: { color: 'gold', label: '未满10秒' },
  closed_early: { color: 'default', label: '提前关闭' },
+  unknown: { color: 'default', label: '未知' },
 };
-const STATUS_HINT: Record<string, string> = {
-  granted: '已满足当前客户端发奖条件并完成金币发放。',
-  too_short: '旧版 Draw 信息流观看不足 10 秒，不发金币；新版按观看比例发放时会记为已发。',
-  closed_early: '用户在达到发奖条件前主动关闭，不发金币。',
-  capped: '已达到次数上限，不再发金币。',
-  ecpm_missing: '缺少有效 eCPM，无法计算金币。',
-};
+
+function rewardStatuses(row: AdRevenueRow): string[] {
+  if (row.sub_rewards?.length) return row.sub_rewards.map((reward) => reward.status);
+  return row.status ? [row.status] : [];
+}
+
+function rewardStatusTag(row: AdRevenueRow) {
+  const statuses = rewardStatuses(row);
+  if (!row.has_reward || statuses.length === 0) {
+    return { color: 'default', label: '无记录', hint: '仅记录到广告展示，没有对应发奖记录。' };
+  }
+
+  const grantedCount = statuses.filter((status) => status === 'granted').length;
+  const reasonSummary = Object.entries(
+    statuses
+      .filter((status) => status !== 'granted')
+      .reduce<Record<string, number>>((counts, status) => {
+        counts[status] = (counts[status] ?? 0) + 1;
+        return counts;
+      }, {}),
+  )
+    .map(([status, count]) => `${REWARD_STATUS_HINT[status] ?? status} ${count} 条`)
+    .join('；');
+
+  if (grantedCount === statuses.length) {
+    return { color: 'green', label: '已发', hint: `已完成金币发放${statuses.length > 1 ? ` ${statuses.length} 条` : ''}。` };
+  }
+  if (grantedCount > 0) {
+    return {
+      color: 'blue',
+      label: '部分已发',
+      hint: `已发 ${grantedCount} 条，未发 ${statuses.length - grantedCount} 条${reasonSummary ? `；${reasonSummary}` : ''}。`,
+    };
+  }
+  return { color: 'default', label: '未发', hint: reasonSummary ? `${reasonSummary}。` : '未发放金币。' };
+}
+
+function playbackStatusTag(row: AdRevenueRow) {
+  const statuses = rewardStatuses(row);
+  if (statuses.length === 0) {
+    return row.has_impression
+      ? { color: 'blue', label: '仅展示', hint: '记录到广告展示，但没有对应的播放结果。' }
+      : { color: 'default', label: '无记录', hint: '没有可用的广告播放记录。' };
+  }
+
+  const playbackCounts = statuses.reduce<Record<string, number>>((counts, status) => {
+    const playbackStatus =
+      status === 'too_short' || status === 'closed_early'
+        ? status
+        : status === 'granted' || status === 'capped' || status === 'ecpm_missing'
+          ? 'completed'
+          : 'unknown';
+    counts[playbackStatus] = (counts[playbackStatus] ?? 0) + 1;
+    return counts;
+  }, {});
+  const entries = Object.entries(playbackCounts);
+  if (entries.length === 1) {
+    const [status, count] = entries[0];
+    const tag = PLAYBACK_STATUS_TAG[status];
+    return {
+      ...tag,
+      hint: `${tag.label}${count > 1 ? ` ${count} 条` : ''}。`,
+    };
+  }
+  const hint = entries
+    .map(([status, count]) => `${PLAYBACK_STATUS_TAG[status].label} ${count} 条`)
+    .join('；');
+  return { color: 'purple', label: '混合状态', hint: `${hint}。` };
+}

 const fmtFactorRange = (a: number | null, b: number | null) => {
  if (a == null) return '-';
@@ -485,12 +553,20 @@ export default function AdRevenueReportPage() {
    },
    {
      title: '发奖状态',
-      dataIndex: 'status',
+      key: 'reward_status',
      width: 100,
-      render: (s: string | null) => {
-        if (!s) return <Tooltip title="仅记录广告展示，没有对应发奖事件。"><Tag>仅展示</Tag></Tooltip>;
-        const t = STATUS_TAG[s] ?? { color: 'default', label: s };
-        return <Tooltip title={STATUS_HINT[s]}><Tag color={t.color}>{t.label}</Tag></Tooltip>;
+      render: (_: unknown, row: AdRevenueRow) => {
+        const tag = rewardStatusTag(row);
+        return <Tooltip title={tag.hint}><Tag color={tag.color}>{tag.label}</Tag></Tooltip>;
+      },
+    },
+    {
+      title: '广告播放状态',
+      key: 'playback_status',
+      width: 120,
+      render: (_: unknown, row: AdRevenueRow) => {
+        const tag = playbackStatusTag(row);
+        return <Tooltip title={tag.hint}><Tag color={tag.color}>{tag.label}</Tag></Tooltip>;
      },
    },
    {
@@ -532,7 +608,8 @@ export default function AdRevenueReportPage() {
    'ecpm_yuan',
    'revenue_yuan',
    'actual_coin',
-    'status',
+    'reward_status',
+    'playback_status',
    'ad_type',
    'app_env',
    'our_code_id',
@@ -10,9 +10,11 @@ import {
  DatePicker,
  Divider,
  Input,
+  Popover,
  Row,
  Select,
  Space,
+  Spin,
  Statistic,
  Table,
  Tag,
@@ -72,9 +74,23 @@ interface CouponDataRow {
  app_env: string | null;
  started_at: string;
  claimed_count: number | null;
+  point_success_count: number | null;
+  point_total_count: number | 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;
@@ -116,6 +132,94 @@ const STATUS_TAG: Record<string, { color: string; label: string }> = {
  abandoned: { color: 'orange', label: '中途退出' },
 };

+const POINT_STATUS_TAG: Record<string, { color: string; label: string }> = {
+  success: { color: 'success', label: '成功' },
+  already_claimed: { color: 'processing', label: '已领' },
+  failed: { color: 'error', label: '失败' },
+  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`;
@@ -495,17 +599,7 @@ export default function CouponDataPage() {
      title: '点位成功率',
      key: 'point_success_rate',
      width: 110,
-      render: (_: unknown, r: CouponDataRow) => (
-        <Tooltip title="当前接口未返回本场应领点位及逐点结果，前端不使用全局均值冒充本场成功率。">
-          {r.trace_url ? (
-            <a href={r.trace_url} target="_blank" rel="noreferrer">
-              查看明细
-            </a>
-          ) : (
-            <Typography.Text type="secondary">待埋点</Typography.Text>
-          )}
-        </Tooltip>
-      ),
+      render: (_: unknown, r: CouponDataRow) => <PointScorePopover row={r} />,
    },
    {
      title: '广告收益',