Compare commits

..

2 Commits

Author SHA1 Message Date
linkeyu 12687bef5a fix(admin): 拆分广告发奖与播放状态 2026-07-22 11:49:26 +08:00
linkeyu f3cfd622a7 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:46:47 +08:00
3 changed files with 206 additions and 31 deletions
+95 -18
View File
@@ -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',
+105 -11
View File
@@ -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: '广告收益',
+6 -2
View File
@@ -499,7 +499,12 @@ export default function DashboardPage() {
const tokenCostYuan = periodData?.comparison.token_cost_total_yuan ?? null;
const couponRewardCoinTotal = periodData?.coins.coupon_reward_coin_total;
const comparisonRewardCoinTotal = periodData?.coins.comparison_reward_coin_total;
const regularTaskCoinTotal = periodData?.coins.regular_task_coin_total;
const signinCoinTotal = periodData?.coins.signin_coin_total;
const signinBoostCoinTotal = periodData?.coins.signin_boost_coin_total;
const taskCoinTotal = periodData?.coins.task_coin_total;
const regularTaskCoinTotal =
periodData?.coins.regular_task_coin_total ??
((signinCoinTotal ?? 0) + (signinBoostCoinTotal ?? 0) + (taskCoinTotal ?? 0));
const cpsAvailable = data?.cps.available === true;
const meituanCpsCommissionCents = data?.cps.meituan_commission_cents;
const jdCpsCommissionCents = data?.cps.jd_commission_cents;
@@ -1072,7 +1077,6 @@ export default function DashboardPage() {
value={fmtInt(regularTaskCoinTotal)}
delta={regularTaskCoinRatio.value}
deltaTone={regularTaskCoinRatio.tone}
hint="每日签到、历史签到膨胀、通知/其他任务、上报更低价和反馈采纳的实发金币之和。"
/>
<StatCard
title="本期提现金额"