Compare commits

..

6 Commits

Author SHA1 Message Date
zhuzihao 281cfdb0e4 feat: 反馈加反馈类型/运营回复 + 提现加提现类型筛选 (#34)
用户反馈后台 + 提现审核后台的运营字段与筛选。

- 反馈页:新增「反馈类型」列(比价反馈/普通反馈 + 场景)、顶部「反馈类型」筛选;审核抽屉采纳/拒绝
  都能填「给用户的回复」(用户端可见),并回显反馈类型/场景/运营回复。
- 提现页:新增「提现类型」列(福利页提现/邀请提现)、顶部「提现类型」筛选,详情抽屉展示提现类型。
- types.ts:Feedback 加 source/scene/admin_reply,WithdrawOrder 加 source。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: zzhyyyyy <2685922758@qq.com>
Reviewed-on: #34
Co-authored-by: zhuzihao <zhuzihao@wonderable.ai>
Co-committed-by: zhuzihao <zhuzihao@wonderable.ai>
2026-07-02 19:50:09 +08:00
zhuzihao 2727eaa929 feat(ad-revenue): 收益报表按一次比价/领券聚合展开 + 用户收益详情抽屉 (#33)
- 主表按「单次广告行为」展示:一次比价/领券聚成父行、广告类型标「N 条」,点「+」展开看该次逐条
  发奖复算;信息流统一显示「Draw 信息流」,类型筛选去掉「信息流」选项。
- 新增点用户手机号弹半屏抽屉(UserAdRevenueDrawer,复用 withdraws 的 UserRewardPanel):展示该用户
  看广告统计(6 项)+ 金币记录;抽屉统计区 eCPM 改「元/千」,并补微信昵称。
- 一次比价/领券行显示预估收益(row_revenue_yuan,发奖侧折算);去掉「一致」列 + 应发≠实发行标红 +
  顶部对账 Alert(发奖走「所见即所得」display_coin,与公式复算本就对不上,属噪音)。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: zzhyyyyy <2685922758@qq.com>
Reviewed-on: #33
Co-authored-by: zhuzihao <zhuzihao@wonderable.ai>
Co-committed-by: zhuzihao <zhuzihao@wonderable.ai>
2026-07-02 08:57:04 +08:00
chenshuobo af74ecf9d3 fix: 恢复后台左侧分组导航并补充领券数据入口 (#32)
Co-authored-by: lowmaster-chen <1119780489@qq.com>
Reviewed-on: #32
Co-authored-by: chenshuobo <chenshuobo@wonderable.ai>
Co-committed-by: chenshuobo <chenshuobo@wonderable.ai>
2026-07-01 21:47:46 +08:00
zhuzihao 3102a96bd3 feat: 运营后台「领券数据」页 (#31)
- 侧边栏在「用户反馈」后、「广告配置」前加「领券数据」菜单(/coupon-data)。
- 两段式:汇总卡(领券发起数 / 完成数 / 平均耗时 + 耗时 P5/P50/P95/P99)+ 自研零依赖 SVG 趋势图
  (发起 / 完成数双柱 + 平均耗时线,按天 / 按小时)+ 逐条领券明细表。
- 「发起平台」=发起来源(傻瓜比价 / 美团 / 淘宝 / 京东);trace 列有 trace_url 给可点链接;
  手机号列可点 → 复用通用 UserRecordsDrawer 看该用户全部领券(为其加了可选 rewardSuffix prop)。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: zzhyyyyy <2685922758@qq.com>
Reviewed-on: #31
Co-authored-by: zhuzihao <zhuzihao@wonderable.ai>
Co-committed-by: zhuzihao <zhuzihao@wonderable.ai>
2026-06-30 22:59:09 +08:00
chenshuobo 7f5dde5c2f feat: 补齐数据大盘京东 CPS 与金币展示 (#29)
改了什么:数据大盘总收入/CPS 收入纳入京东 CPS;京东 CPS 卡片展示有效/无效订单;刷新按钮改为同步全部 CPS 订单;ARPU 展示产品确认的昨日活跃用户分母;激励视频金币展示真实值并标注已计入领券奖励。

验证方式:npx tsc --noEmit;浏览器验证 /dashboard 已显示京东 CPS、ARPU 分母和激励视频金币。

---------

Co-authored-by: lowmaster-chen <1119780489@qq.com>
Reviewed-on: #29
Co-authored-by: chenshuobo <chenshuobo@wonderable.ai>
Co-committed-by: chenshuobo <chenshuobo@wonderable.ai>
2026-06-30 21:56:55 +08:00
zhuzihao c8293d57b3 调现金弹窗:目标账户选择 + 四项必填校验 + 邀请余额展示 (#30)
- 新增「目标账户」单选(金币兑现金账户 / 邀请账户),默认不选、必选
- 操作方式改为必选无默认(原默认「增减」),进来需手动选
- 四项(目标账户/操作方式/现金变动/原因)全部必填必选:标题带红星 *,
  点确定时缺项 → 字段下方红字报错并阻断提交
- 提交携带 account;弹窗顶部余额行加显「邀请奖励金」(UserOverview 新字段)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: zzhyyyyy <2685922758@qq.com>
Reviewed-on: #30
Co-authored-by: zhuzihao <zhuzihao@wonderable.ai>
Co-committed-by: zhuzihao <zhuzihao@wonderable.ai>
2026-06-30 12:02:52 +08:00
12 changed files with 1667 additions and 239 deletions
@@ -0,0 +1,84 @@
'use client';
// 点收益报表里的用户手机号 → 半屏抽屉展示该用户的广告收益详情(统计卡 + 金币记录)。
// 复用「提现详情」里的 UserRewardPanel(数据走 /users/{id}/reward-stats + /coin-records);
// 用户基本信息(昵称/注册时间/钱包)取自 /users/{id} 概览。抽屉样式(width 50% 半屏)与提现详情一致。
import { useEffect, useState } from 'react';
import { Drawer } from 'antd';
import { api } from '@/lib/api';
import type { WithdrawUserSnapshot } from '@/lib/types';
import UserRewardPanel from '../withdraws/UserRewardPanel';
// GET /admin/api/users/{id} 概览里我们要用到的子集(前端未单独定义 AdminUserOverview 类型)。
interface UserOverviewResp {
user: {
id: number;
phone: string;
nickname: string | null;
status: string;
wechat_nickname: string | null;
created_at: string;
last_login_at: string;
};
cash_balance_cents: number;
withdraw_total: number;
withdraw_success_cents: number;
}
interface Props {
open: boolean;
onClose: () => void;
userId: number | null;
phone: string | null; // 报表行已有的手机号:概览拉取失败时兜底展示
}
export default function UserAdRevenueDrawer({ open, onClose, userId, phone }: Props) {
// UserRewardPanel 的 user 快照:它只读 phone/nickname/wechat_nickname/created_at,其余按 snapshot 形状补齐。
const [user, setUser] = useState<WithdrawUserSnapshot | null>(null);
useEffect(() => {
if (!open || userId == null) return;
let alive = true;
setUser(null);
api
.get<UserOverviewResp>(`/admin/api/users/${userId}`)
.then((r) => {
if (!alive) return;
const o = r.data;
setUser({
id: o.user.id,
phone: o.user.phone,
nickname: o.user.nickname,
status: o.user.status,
wechat_nickname: o.user.wechat_nickname, // 概览接口已返回微信昵称
wechat_avatar_url: null,
created_at: o.user.created_at,
last_login_at: o.user.last_login_at,
cash_balance_cents: o.cash_balance_cents,
withdraw_total: o.withdraw_total,
withdraw_success_cents: o.withdraw_success_cents,
});
})
.catch(() => {
// 概览失败:退回只带手机号,昵称/注册天数显示「-」,不阻塞统计/金币记录(它们由 userId 独立拉)
if (alive) setUser(phone ? ({ phone } as WithdrawUserSnapshot) : null);
});
return () => {
alive = false;
};
}, [open, userId, phone]);
return (
<Drawer
title={`用户广告收益详情${phone ? ` · ${phone}` : ''}`}
width="50%"
open={open}
onClose={onClose}
destroyOnHidden
>
{/* userId 就绪即渲染;UserRewardPanel 内部按 userId 自行拉统计与金币记录,user 基本信息随后补上。
statsVariant="ad":统计区只显示 6 项看广告统计(累计提现/现金余额/激励视频观看数+eCPM/draw观看数+eCPM) */}
{userId != null && <UserRewardPanel userId={userId} user={user} statsVariant="ad" />}
</Drawer>
);
}
+65 -59
View File
@@ -40,13 +40,15 @@ import type {
AdRevenueRow,
AdRevenueTypeStat,
} from '@/lib/types';
import UserAdRevenueDrawer from './UserAdRevenueDrawer';
const { RangePicker } = DatePicker;
// 广告类型标签
const TYPE_TAG: Record<string, { color: string; label: string }> = {
reward_video: { color: 'blue', label: '激励视频' },
feed: { color: 'purple', label: '信息流' },
// 历史误标 feed(领券/比价广告修 adType 之前上报)一律按 Draw 信息流显示——业务已全切 Draw
feed: { color: 'geekblue', label: 'Draw 信息流' },
draw: { color: 'geekblue', label: 'Draw 信息流' },
withdrawal_video: { color: 'gold', label: '提现激励视频' },
};
@@ -131,12 +133,6 @@ const DETAIL_COLUMNS: ColumnsType<AdRevenueRecord> = [
},
{ title: '应发金币', dataIndex: 'expected_coin', width: 100, render: (v: number) => <b>{v}</b> },
{ title: '实发金币', dataIndex: 'actual_coin', width: 100 },
{
title: '一致',
dataIndex: 'matched',
width: 80,
render: (m: boolean) => (m ? <Tag color="green"></Tag> : <Tag color="red"> </Tag>),
},
];
// 趋势图(纯 SVG,零依赖):柱=展示条数(左轴),橙线=客户端预估收益元(右轴),
@@ -309,6 +305,8 @@ export default function AdRevenueReportPage() {
const [queriedLimit, setQueriedLimit] = useState<number>(500);
const [loading, setLoading] = useState(false);
const [formulaOpen, setFormulaOpen] = useState(false);
// 点用户手机号弹出的「用户广告收益详情」半屏抽屉(userId + 手机号;null=关闭)
const [userDrawer, setUserDrawer] = useState<{ userId: number; phone: string | null } | null>(null);
// 当前选择是否跨多天:跨多天时「按小时」无意义,粒度强制按天
const rangeMultiDay = range[0].format('YYYY-MM-DD') !== range[1].format('YYYY-MM-DD');
@@ -364,25 +362,39 @@ export default function AdRevenueReportPage() {
title: '用户',
dataIndex: 'user_phone',
width: 150,
render: (phone: string | null, r: AdRevenueRow) =>
phone ? (
<span>
{phone}
<Typography.Text type="secondary" style={{ fontSize: 11, marginLeft: 6 }}>
#{r.user_id}
</Typography.Text>
</span>
) : (
<Typography.Text type="secondary">#{r.user_id}</Typography.Text>
),
render: (phone: string | null, r: AdRevenueRow) => (
// 点手机号/用户 → 打开该用户「广告收益详情」半屏抽屉(统计卡 + 金币记录)
<a onClick={() => setUserDrawer({ userId: r.user_id, phone })}>
{phone ? (
<span>
{phone}
<Typography.Text type="secondary" style={{ fontSize: 11, marginLeft: 6 }}>
#{r.user_id}
</Typography.Text>
</span>
) : (
<span>#{r.user_id}</span>
)}
</a>
),
},
{
title: '广告类型',
dataIndex: 'ad_type',
width: 110,
render: (s: string) => {
width: 130,
render: (s: string, r: AdRevenueRow) => {
const t = TYPE_TAG[s] ?? { color: 'default', label: s };
return <Tag color={t.color}>{t.label}</Tag>;
return (
<span>
<Tag color={t.color}>{t.label}</Tag>
{/* 一次比价/领券聚合了多条广告时标出条数,点「+」展开看逐条 */}
{r.sub_count && r.sub_count > 1 ? (
<Typography.Text type="secondary" style={{ fontSize: 11 }}>
{r.sub_count}
</Typography.Text>
) : null}
</span>
);
},
},
{
@@ -428,7 +440,11 @@ export default function AdRevenueReportPage() {
dataIndex: 'revenue_yuan',
width: 110,
align: 'right',
render: (v: number, r: AdRevenueRow) => (r.has_impression ? v.toFixed(4) : '-'),
// 一次比价/领券聚合行用 row_revenue_yuan(该次发奖广告 eCPM 折算之和),其它行用展示侧 revenue_yuan
render: (v: number, r: AdRevenueRow) => {
const rev = r.row_revenue_yuan ?? v;
return r.has_impression || rev > 0 ? rev.toFixed(4) : '-';
},
},
{
title: '发奖状态',
@@ -456,18 +472,6 @@ export default function AdRevenueReportPage() {
render: (v: number, r: AdRevenueRow) =>
r.has_reward ? v : <Typography.Text type="secondary">-</Typography.Text>,
},
{
title: '一致',
dataIndex: 'matched',
width: 70,
align: 'center',
render: (m: boolean, r: AdRevenueRow) =>
r.has_reward ? (
m ? <Tag color="green"></Tag> : <Tag color="red"> </Tag>
) : (
<Typography.Text type="secondary">-</Typography.Text>
),
},
{
title: '广告位ID',
dataIndex: 'our_code_id',
@@ -527,6 +531,10 @@ export default function AdRevenueReportPage() {
title="收益口径说明"
content={
<div style={{ maxWidth: 360, fontSize: 13, lineHeight: 1.7 }}>
<b> = 广</b>( / / );· Draw
( / eCPM / ),+
<br />
<br />
广(onAdShow) eCPM ( ÷1000
),<b>广</b>;穿/,,
<b>穿</b> 0广ID / ,
@@ -578,7 +586,6 @@ export default function AdRevenueReportPage() {
style={{ width: 150 }}
options={[
{ value: 'reward_video', label: '激励视频' },
{ value: 'feed', label: '信息流' },
{ value: 'draw', label: 'Draw 信息流' },
{ value: 'withdrawal_video', label: '提现激励视频' },
]}
@@ -792,22 +799,6 @@ export default function AdRevenueReportPage() {
</Card>
)}
{data && (
<Space direction="vertical" style={{ width: '100%', marginBottom: 12 }}>
{data.mismatch_count > 0 ? (
<Alert
type="error"
showIcon
message={`${data.total} 条广告事件,其中 ${data.mismatch_count} 条应发≠实发(✗);应发−实发 合计 ${
derived && derived.coinGap >= 0 ? '+' : ''
}${derived?.coinGap ?? 0} 金币(正=少发/负=多发)——公式可能未生效或发奖有问题。定位到具体记录可用后端逐条审计接口。`}
/>
) : (
<Alert type="success" showIcon message={`${data.total} 条广告事件,应发与实发全部一致。`} />
)}
</Space>
)}
{data &&
(queriedMultiDay
? (data.daily?.length ?? 0) > 0
@@ -884,12 +875,27 @@ export default function AdRevenueReportPage() {
}}
size="small"
scroll={{ x: 1380 }}
rowClassName={(r) => (r.has_reward && !r.matched ? 'row-mismatch' : '')}
expandable={{
// 每行都可展开(左侧恒有 + 号):有发奖看「金币复算因子」;纯展示看「展示明细」。
rowExpandable: () => true,
expandedRowRender: (r) =>
r.reward_detail ? (
r.sub_rewards && r.sub_rewards.length > 0 ? (
<div>
<Typography.Text strong>广</Typography.Text>{' '}
<Typography.Text type="secondary">
( {r.sub_count ?? r.sub_rewards.length} · {r.expected_coin} / {r.actual_coin})
</Typography.Text>
<Table<AdRevenueRecord>
style={{ marginTop: 8 }}
rowKey="record_id"
columns={DETAIL_COLUMNS}
dataSource={r.sub_rewards}
pagination={false}
size="small"
scroll={{ x: 900 }}
/>
</div>
) : r.reward_detail ? (
<div>
<Typography.Text strong></Typography.Text>{' '}
<Typography.Text type="secondary">
@@ -903,7 +909,6 @@ export default function AdRevenueReportPage() {
pagination={false}
size="small"
scroll={{ x: 900 }}
rowClassName={(d) => (d.matched ? '' : 'row-mismatch')}
/>
</div>
) : (
@@ -979,11 +984,12 @@ export default function AdRevenueReportPage() {
</Typography.Paragraph>
</Modal>
<style jsx global>{`
.row-mismatch > td {
background: #fff1f0 !important;
}
`}</style>
<UserAdRevenueDrawer
open={!!userDrawer}
userId={userDrawer?.userId ?? null}
phone={userDrawer?.phone ?? null}
onClose={() => setUserDrawer(null)}
/>
</div>
);
}
+677
View File
@@ -0,0 +1,677 @@
'use client';
import { useCallback, useEffect, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import {
App,
Button,
Card,
Col,
DatePicker,
Divider,
Input,
Row,
Select,
Space,
Statistic,
Table,
Tag,
Typography,
} from 'antd';
import dayjs, { type Dayjs } from 'dayjs';
import { api, errMsg } from '@/lib/api';
import { formatUtcTime } from '@/lib/format';
import UserRecordsDrawer from '@/components/UserRecordsDrawer';
const { RangePicker } = DatePicker;
// ── 领券数据看板类型(仅本页用,内联定义)──
interface CouponDataSummary {
started_count: number;
completed_count: number;
avg_elapsed_ms: number | null;
p5_ms: number | null;
p50_ms: number | null;
p95_ms: number | null;
p99_ms: number | null;
}
interface CouponDataDaily {
date: string;
started_count: number;
completed_count: number;
avg_elapsed_ms: number | null;
}
interface CouponDataHourly {
hour: number;
started_count: number;
completed_count: number;
avg_elapsed_ms: number | null;
}
interface CouponDataRow {
id: number;
trace_id: string;
user_id: number | null;
user_phone: string | null;
user_nickname: string | null;
status: string;
platforms: string[] | null;
origin_package: string | null;
elapsed_ms: number | null;
platform_elapsed: Record<string, number> | null;
device_model: string | null;
rom: string | null;
app_env: string | null;
started_at: string;
claimed_count: number | null;
trace_url: string | null;
}
interface CouponDataReport {
date_from: string;
date_to: string;
summary: CouponDataSummary;
daily: CouponDataDaily[];
hourly: CouponDataHourly[];
total: number;
items: CouponDataRow[];
}
// 发起来源 App 包名 → 中文(「发起平台」列):空=傻瓜比价首页发起,外卖 App 包名→对应平台。
function originLabel(pkg: string | null): string {
if (!pkg) return '傻瓜比价';
if (pkg.includes('meituan') || pkg.includes('sankuai')) return '美团';
if (pkg.includes('taobao') || pkg.includes('ele')) return '淘宝';
if (pkg.includes('jingdong') || pkg.includes('jd')) return '京东';
return pkg;
}
// 领券状态 → 颜色 + 中文(started 无终态 = 中途流失)
const STATUS_TAG: Record<string, { color: string; label: string }> = {
started: { color: 'default', label: '未完成' },
completed: { color: 'green', label: '完成' },
failed: { color: 'red', label: '失败' },
abandoned: { color: 'orange', label: '中途退出' },
};
// ms → "1.5s"(空值显示 -)
const fmtSec = (ms: number | null | undefined): string =>
ms == null ? '-' : `${(ms / 1000).toFixed(1)}s`;
// 点手机号弹出的「该用户全部领券」抽屉列(精简版:单用户,不含用户/手机号列)。
const RECORD_COLUMNS: ColumnsType<CouponDataRow> = [
{ title: '时间', dataIndex: 'started_at', width: 160, render: (v: string) => formatUtcTime(v) },
{
title: '状态',
dataIndex: 'status',
width: 80,
render: (s: string) => {
const t = STATUS_TAG[s] ?? { color: 'default', label: s };
return <Tag color={t.color}>{t.label}</Tag>;
},
},
{ title: '发起平台', dataIndex: 'origin_package', width: 90, render: (pkg: string | null) => originLabel(pkg) },
{ title: '耗时', dataIndex: 'elapsed_ms', width: 80, align: 'right', render: (v: number | null) => fmtSec(v) },
{ title: '美团', key: 'mt', width: 70, align: 'right', render: (_: unknown, r: CouponDataRow) => fmtSec(r.platform_elapsed?.['meituan-waimai']) },
{ title: '淘宝', key: 'tb', width: 70, align: 'right', render: (_: unknown, r: CouponDataRow) => fmtSec(r.platform_elapsed?.['taobao-shanguang']) },
{ title: '京东', key: 'jd', width: 70, align: 'right', render: (_: unknown, r: CouponDataRow) => fmtSec(r.platform_elapsed?.['jd-waimai']) },
{
title: 'trace',
dataIndex: 'trace_id',
width: 90,
render: (v: string, r: CouponDataRow) =>
r.trace_url ? (
<a href={r.trace_url} target="_blank" rel="noreferrer" title={v}>trace</a>
) : (
<Typography.Text type="secondary" style={{ fontSize: 12 }}>{v.slice(0, 6)}</Typography.Text>
),
},
];
// ── 趋势图(纯 SVG,零依赖,复用广告报表同款):浅蓝柱=发起数、深蓝柱=完成数(左轴 次数),橙线=平均耗时(右轴 秒)──
const CHART_BAR_STARTED = '#bae0ff';
const CHART_BAR_COMPLETED = '#1677ff';
const CHART_LINE = '#fa8c16';
interface TrendPoint {
label: string; // x 轴刻度(小时数 / MM-DD)
tip: string; // hover 原生 tooltip
started: number;
completed: number;
avgSec: number | null; // 平均耗时(秒);该桶无完成为 null(不画线点)
}
// 按天聚合:用 from..to 补齐空缺日为 0,轴连续。
function aggregateDaily(dateFrom: string, dateTo: string, daily: CouponDataDaily[]): TrendPoint[] {
const map = new Map(daily.map((d) => [d.date, d]));
const out: TrendPoint[] = [];
let cur = dayjs(dateFrom);
let guard = 0;
while (cur.format('YYYY-MM-DD') <= dateTo && guard < 400) {
const ds = cur.format('YYYY-MM-DD');
const d = map.get(ds);
const started = d?.started_count ?? 0;
const completed = d?.completed_count ?? 0;
const avgSec = d?.avg_elapsed_ms != null ? d.avg_elapsed_ms / 1000 : null;
out.push({
label: ds.slice(5),
tip: `${ds} 发起 ${started} · 完成 ${completed} · 平均耗时 ${avgSec == null ? '-' : avgSec.toFixed(1) + 's'}`,
started,
completed,
avgSec,
});
cur = cur.add(1, 'day');
guard += 1;
}
return out;
}
// 按小时聚合(023)。
function aggregateHourly(rows: CouponDataHourly[]): TrendPoint[] {
const byHour = new Map(rows.map((r) => [r.hour, r]));
return Array.from({ length: 24 }, (_, h) => {
const r = byHour.get(h);
const started = r?.started_count ?? 0;
const completed = r?.completed_count ?? 0;
const avgSec = r?.avg_elapsed_ms != null ? r.avg_elapsed_ms / 1000 : null;
return {
label: String(h),
tip: `${String(h).padStart(2, '0')}:00 发起 ${started} · 完成 ${completed} · 平均耗时 ${avgSec == null ? '-' : avgSec.toFixed(1) + 's'}`,
started,
completed,
avgSec,
};
});
}
function TrendChart({ points }: { points: TrendPoint[] }) {
const n = points.length;
const maxBar = Math.max(1, ...points.map((p) => p.started));
const maxSec = Math.max(1e-9, ...points.map((p) => p.avgSec ?? 0));
const W = 960;
const H = 280;
const padL = 48;
const padR = 56;
const padT = 16;
const padB = 32;
const plotW = W - padL - padR;
const plotH = H - padT - padB;
const step = plotW / Math.max(1, n);
const barW = Math.min(24, step * 0.5);
const yBase = padT + plotH;
const barX = (i: number) => padL + i * step + (step - barW) / 2;
const cx = (i: number) => padL + i * step + step / 2;
const barH = (v: number) => (v / maxBar) * plotH;
const secY = (v: number) => yBase - (v / maxSec) * plotH;
// X 轴刻度按天/按小时尽量每格都标(≤31 个点每个都标,超出才抽稀),避免跨度稍大就隔天显示。
const labelEvery = Math.max(1, Math.ceil(n / 31));
// 平均耗时线:仅 avgSec 非 null 的点连线(无完成的桶断开)。
const linePts = points
.map((p, i) => (p.avgSec == null ? null : `${cx(i)},${secY(p.avgSec)}`))
.filter((x): x is string => x !== null)
.join(' ');
return (
<svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: 'block' }} role="img" aria-label="趋势图">
{[0, 0.25, 0.5, 0.75, 1].map((t) => {
const y = yBase - t * plotH;
return (
<g key={t}>
<line x1={padL} y1={y} x2={W - padR} y2={y} stroke="#f0f0f0" />
<text x={padL - 8} y={y + 4} textAnchor="end" fontSize={11} fill={CHART_BAR_COMPLETED}>
{Math.round(maxBar * t)}
</text>
<text x={W - padR + 8} y={y + 4} textAnchor="start" fontSize={11} fill={CHART_LINE}>
{(maxSec * t).toFixed(1)}
</text>
</g>
);
})}
{/* 发起数柱(浅) */}
{points.map((p, i) => (
<rect
key={`s-${i}`}
x={barX(i)}
y={yBase - barH(p.started)}
width={barW}
height={barH(p.started)}
fill={CHART_BAR_STARTED}
rx={2}
>
<title>{p.tip}</title>
</rect>
))}
{/* 完成数柱(深,窄,叠中间) */}
{points.map((p, i) => {
const cw = barW * 0.55;
return (
<rect
key={`c-${i}`}
x={cx(i) - cw / 2}
y={yBase - barH(p.completed)}
width={cw}
height={barH(p.completed)}
fill={CHART_BAR_COMPLETED}
rx={1}
>
<title>{p.tip}</title>
</rect>
);
})}
{/* 平均耗时线(橙,右轴) */}
<polyline points={linePts} fill="none" stroke={CHART_LINE} strokeWidth={2} />
{points.map((p, i) =>
p.avgSec == null ? null : (
<circle key={`p-${i}`} cx={cx(i)} cy={secY(p.avgSec)} r={2.5} fill={CHART_LINE}>
<title>{p.tip}</title>
</circle>
),
)}
{points.map((p, i) =>
i % labelEvery === 0 || i === n - 1 ? (
<text key={`x-${i}`} x={cx(i)} y={H - 14} textAnchor="middle" fontSize={11} fill="#999">
{p.label}
</text>
) : null,
)}
</svg>
);
}
// 领券数据看板:上半汇总卡 + 按天/小时趋势(参考广告收益大盘),下半逐条领券明细。
// 数据源 coupon_session(客户端 /api/v1/coupon/session 两段上报);耗时统计只算 completed。
export default function CouponDataPage() {
const { message } = App.useApp();
const [range, setRange] = useState<[Dayjs, Dayjs]>([dayjs().subtract(6, 'day'), dayjs()]);
const [user, setUser] = useState<string>('');
const [appEnv, setAppEnv] = useState<string>('prod');
const [granularity, setGranularity] = useState<'day' | 'hour'>('day');
const [sortBy, setSortBy] = useState<'time' | 'elapsed'>('time');
const [limit, setLimit] = useState<number>(100);
const [page, setPage] = useState<number>(1);
const [queriedGranularity, setQueriedGranularity] = useState<'day' | 'hour'>('day');
const [queriedMultiDay, setQueriedMultiDay] = useState(false);
const [queriedLimit, setQueriedLimit] = useState<number>(100);
const [data, setData] = useState<CouponDataReport | null>(null);
const [loading, setLoading] = useState(false);
// 点手机号:抽屉看该用户全部领券(总次数 + 记录)
const [recordsUser, setRecordsUser] = useState<{ userId: number; phone: string | null } | null>(null);
const openUserRecords = (r: CouponDataRow) => {
if (r.user_id != null) setRecordsUser({ userId: r.user_id, phone: r.user_phone });
};
// 跨多天时「按小时」无意义,粒度强制按天(同广告报表)。
const rangeMultiDay = range[0].format('YYYY-MM-DD') !== range[1].format('YYYY-MM-DD');
const load = useCallback(
async (targetPage = 1, targetLimit = limit, targetSort = sortBy) => {
const from = range[0].format('YYYY-MM-DD');
const to = range[1].format('YYYY-MM-DD');
const multiDay = from !== to;
const gran = multiDay ? 'day' : granularity;
setLoading(true);
try {
const res = await api.get<CouponDataReport>('/admin/api/coupon-data', {
params: {
date_from: from,
date_to: to,
user: user.trim() || undefined,
app_env: appEnv,
granularity: gran,
limit: targetLimit,
offset: (targetPage - 1) * targetLimit,
sort: targetSort,
},
});
setData(res.data);
setPage(targetPage);
setQueriedLimit(targetLimit);
setQueriedGranularity(gran);
setQueriedMultiDay(multiDay);
} catch (e) {
message.error(errMsg(e));
} finally {
setLoading(false);
}
},
[range, user, appEnv, granularity, limit, sortBy, message],
);
useEffect(() => {
load();
// 仅首次自动拉近 7 天;之后由「查询」按钮触发
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const columns: ColumnsType<CouponDataRow> = [
{
title: '用户',
dataIndex: 'user_nickname',
width: 140,
render: (_: unknown, r: CouponDataRow) => {
if (r.user_nickname) {
return (
<span>
{r.user_nickname}
{r.user_id != null && (
<Typography.Text type="secondary" style={{ fontSize: 11, marginLeft: 6 }}>
#{r.user_id}
</Typography.Text>
)}
</span>
);
}
if (r.user_id != null) return <Typography.Text type="secondary">#{r.user_id}</Typography.Text>;
return <Typography.Text type="secondary"></Typography.Text>;
},
},
{
title: '手机号',
dataIndex: 'user_phone',
width: 130,
// 点手机号 → 抽屉看该用户全部领券(参考低价审核/反馈页)。游客(无 user_id)不可点。
render: (phone: string | null, r: CouponDataRow) =>
r.user_id != null ? (
<a onClick={() => openUserRecords(r)}>{phone || `#${r.user_id}`}</a>
) : (
<Typography.Text type="secondary"></Typography.Text>
),
},
{
title: '状态',
dataIndex: 'status',
width: 90,
render: (s: string) => {
const t = STATUS_TAG[s] ?? { color: 'default', label: s };
return <Tag color={t.color}>{t.label}</Tag>;
},
},
{
title: '发起平台',
dataIndex: 'origin_package',
width: 110,
render: (pkg: string | null) => originLabel(pkg),
},
{
title: '耗时',
dataIndex: 'elapsed_ms',
width: 90,
align: 'right',
render: (v: number | null) => fmtSec(v),
},
{
title: '美团耗时',
key: 'mt_elapsed',
width: 90,
align: 'right',
render: (_: unknown, r: CouponDataRow) => fmtSec(r.platform_elapsed?.['meituan-waimai']),
},
{
title: '淘宝耗时',
key: 'tb_elapsed',
width: 90,
align: 'right',
render: (_: unknown, r: CouponDataRow) => fmtSec(r.platform_elapsed?.['taobao-shanguang']),
},
{
title: '京东耗时',
key: 'jd_elapsed',
width: 90,
align: 'right',
render: (_: unknown, r: CouponDataRow) => fmtSec(r.platform_elapsed?.['jd-waimai']),
},
{
title: '机型/ROM',
key: 'device',
width: 200,
render: (_: unknown, r: CouponDataRow) => {
const parts = [r.device_model, r.rom].filter(Boolean);
return parts.length ? parts.join(' / ') : <Typography.Text type="secondary">-</Typography.Text>;
},
},
{
title: '时间',
dataIndex: 'started_at',
width: 165,
render: (v: string) => formatUtcTime(v),
},
{
title: '领券 trace',
dataIndex: 'trace_id',
width: 150,
// 有 trace_url(pricebot 上云,仅 completed)→ 可点链接打开完整现场;否则降级为可复制 trace_id。
render: (v: string, r: CouponDataRow) =>
r.trace_url ? (
<a href={r.trace_url} target="_blank" rel="noreferrer" title={v}>
trace{v.slice(0, 8)}
</a>
) : (
<Typography.Text copyable={{ text: v }} style={{ fontSize: 12 }}>
{v.slice(0, 8)}
</Typography.Text>
),
},
];
const summary = data?.summary;
const items = data?.items ?? [];
return (
<div>
<Space align="center" style={{ display: 'flex', marginBottom: 16 }}>
<h2 style={{ margin: 0 }}></h2>
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
;/
</Typography.Text>
</Space>
<Card size="small" style={{ marginBottom: 16 }}>
<Space wrap size="middle" align="center">
<Space size={6}>
<Typography.Text type="secondary"></Typography.Text>
<RangePicker
value={range}
onChange={(v) => v && v[0] && v[1] && setRange([v[0], v[1]])}
allowClear={false}
presets={[
{ label: '今天', value: [dayjs(), dayjs()] },
{ label: '近 7 天', value: [dayjs().subtract(6, 'day'), dayjs()] },
{ label: '近 30 天', value: [dayjs().subtract(29, 'day'), dayjs()] },
]}
/>
</Space>
<Space size={6}>
<Typography.Text type="secondary"></Typography.Text>
<Input
placeholder="手机号/昵称"
value={user}
onChange={(e) => setUser(e.target.value)}
onPressEnter={() => load(1)}
allowClear
style={{ width: 150 }}
/>
</Space>
<Space size={6}>
<Typography.Text type="secondary"></Typography.Text>
<Select
value={appEnv}
onChange={setAppEnv}
style={{ width: 120 }}
options={[
{ value: 'prod', label: '正式(prod)' },
{ value: 'dev', label: '测试(dev)' },
{ value: 'all', label: '全部' },
]}
/>
</Space>
<Space size={6}>
<Typography.Text type="secondary"></Typography.Text>
<Select
value={rangeMultiDay ? 'day' : granularity}
onChange={setGranularity}
disabled={rangeMultiDay}
style={{ width: 110 }}
title={rangeMultiDay ? '跨多天仅支持按天' : undefined}
options={[
{ value: 'day', label: '按天' },
{ value: 'hour', label: '按小时' },
]}
/>
</Space>
<Space size={6}>
<Typography.Text type="secondary"></Typography.Text>
<Select
value={sortBy}
onChange={(v) => {
setSortBy(v);
load(1, limit, v);
}}
style={{ width: 130 }}
options={[
{ value: 'time', label: '时间倒序' },
{ value: 'elapsed', label: '耗时倒序' },
]}
/>
</Space>
<Space size={6}>
<Typography.Text type="secondary"></Typography.Text>
<Select
value={limit}
onChange={(v) => {
setLimit(v);
load(1, v);
}}
style={{ width: 120 }}
options={[20, 50, 100, 200, 500].map((nn) => ({ value: nn, label: `${nn} 条/页` }))}
/>
</Space>
<Button type="primary" onClick={() => load(1)} loading={loading}>
</Button>
</Space>
</Card>
{summary && (
<Card size="small" style={{ marginBottom: 16 }}>
<Row gutter={[16, 12]}>
<Col flex="1 1 0">
<Statistic title="领券发起数" value={summary.started_count} />
</Col>
<Col flex="1 1 0">
<Statistic title="领券完成数" value={summary.completed_count} />
</Col>
<Col flex="1 1 0">
<Statistic title="平均耗时" value={fmtSec(summary.avg_elapsed_ms)} />
</Col>
</Row>
<Divider style={{ marginTop: 16, marginBottom: 16 }} />
<Row gutter={[16, 12]}>
<Col flex="1 1 0">
<Statistic title="耗时 5 分位" value={fmtSec(summary.p5_ms)} />
</Col>
<Col flex="1 1 0">
<Statistic title="耗时 50 分位" value={fmtSec(summary.p50_ms)} />
</Col>
<Col flex="1 1 0">
<Statistic title="耗时 95 分位" value={fmtSec(summary.p95_ms)} />
</Col>
<Col flex="1 1 0">
<Statistic title="耗时 99 分位" value={fmtSec(summary.p99_ms)} />
</Col>
</Row>
</Card>
)}
{data &&
(queriedMultiDay
? (data.daily?.length ?? 0) > 0
: queriedGranularity === 'hour' && (data.hourly?.length ?? 0) > 0) && (
<Card
size="small"
title={queriedMultiDay ? '按天趋势' : '按小时趋势'}
style={{ marginBottom: 16 }}
extra={
<Space size={16}>
<span style={{ fontSize: 12, color: '#666' }}>
<span
style={{
display: 'inline-block',
width: 10,
height: 10,
background: CHART_BAR_STARTED,
borderRadius: 2,
marginRight: 4,
}}
/>
</span>
<span style={{ fontSize: 12, color: '#666' }}>
<span
style={{
display: 'inline-block',
width: 10,
height: 10,
background: CHART_BAR_COMPLETED,
borderRadius: 2,
marginRight: 4,
}}
/>
</span>
<span style={{ fontSize: 12, color: '#666' }}>
<span
style={{
display: 'inline-block',
width: 14,
borderTop: `2px solid ${CHART_LINE}`,
marginRight: 4,
verticalAlign: 'middle',
}}
/>
()
</span>
</Space>
}
>
{queriedMultiDay ? (
<TrendChart points={aggregateDaily(data.date_from, data.date_to, data.daily)} />
) : (
<TrendChart points={aggregateHourly(data.hourly)} />
)}
</Card>
)}
<Table
rowKey="trace_id"
columns={columns}
dataSource={items}
loading={loading}
pagination={{
current: page,
pageSize: queriedLimit,
total: data?.total ?? 0,
showSizeChanger: false,
showTotal: (t) => `${t}`,
onChange: (p) => load(p, queriedLimit),
}}
size="small"
scroll={{ x: 1450 }}
/>
<UserRecordsDrawer<CouponDataRow>
open={recordsUser != null}
onClose={() => setRecordsUser(null)}
userId={recordsUser?.userId ?? null}
phone={recordsUser?.phone ?? null}
endpoint="/admin/api/coupon-data/user-records"
columns={RECORD_COLUMNS}
recordLabel="领券"
countLabel="领券次数"
rewardLabel="领到券张数"
rewardSuffix="张"
rewardOf={(r) => r.claimed_count ?? 0}
/>
</div>
);
}
+329 -92
View File
@@ -1,7 +1,7 @@
'use client';
import { useEffect, useMemo, useState } from 'react';
import { Alert, Select, Spin, Tag, Tooltip, message } from 'antd';
import { useEffect, useMemo, useState, type ReactNode } from 'react';
import { Alert, App, Select, Spin, Tag, Tooltip } from 'antd';
import { CalendarOutlined, InfoCircleOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { api } from '@/lib/api';
@@ -10,6 +10,8 @@ import type { AdRevenueReport, DashboardOverview } from '@/lib/types';
type PeriodKey = 'yesterday' | '7d' | '30d';
type TrendSeriesKey = 'dau' | 'newUsers' | 'comparisons';
type DashboardTrendPoint = DashboardOverview['period']['trend'][number];
type DeltaTone = 'muted' | 'up' | 'down' | 'flat';
type DeltaInfo = { value: ReactNode; tone: DeltaTone };
const PERIODS: { key: PeriodKey; label: string; days: number }[] = [
{ key: 'yesterday', label: '昨日', days: 1 },
@@ -35,6 +37,72 @@ const fmtYuan = (yuan: number | null | undefined) => (yuan == null ? '--' : `¥$
const fmtMsAsSeconds = (ms: number | null | undefined) => (ms == null ? '--' : (ms / 1000).toFixed(1));
const pct = (v: number | null | undefined) => (v == null ? '--' : `${(v * 100).toFixed(1)}%`);
const compact = (v: number) => (v >= 1000 ? `${(v / 1000).toFixed(v >= 10000 ? 0 : 1)}k` : String(v));
const fmtCoinAmount = (v: number | null | undefined) => {
if (v == null) return '--';
if (Math.abs(v) >= 10000) return `${(v / 10000).toFixed(2).replace(/\.?0+$/, '')}`;
return numberFmt.format(v);
};
const CMP_LABEL = 'vs 上周期';
function withCompare(main: string) {
return (
<>
{main}
<span className="cmp">{CMP_LABEL}</span>
</>
);
}
function percentDelta(current: number | null | undefined, previous: number | null | undefined): DeltaInfo {
if (current == null || previous == null) return { value: '暂无上期', tone: 'flat' };
if (previous === 0) {
if (current === 0) return { value: withCompare('持平'), tone: 'flat' };
return { value: '上期为 0', tone: current > 0 ? 'up' : 'down' };
}
const diff = (current - previous) / Math.abs(previous);
if (Math.abs(diff) < 0.0005) return { value: withCompare('持平'), tone: 'flat' };
const arrow = diff > 0 ? '▲' : '▼';
return {
value: withCompare(`${arrow} ${(Math.abs(diff) * 100).toFixed(1)}%`),
tone: diff > 0 ? 'up' : 'down',
};
}
function pointDelta(current: number | null | undefined, previous: number | null | undefined): DeltaInfo {
if (current == null || previous == null) return { value: '暂无上期', tone: 'flat' };
const diff = (current - previous) * 100;
if (Math.abs(diff) < 0.05) return { value: withCompare('持平'), tone: 'flat' };
const arrow = diff > 0 ? '▲' : '▼';
return {
value: withCompare(`${arrow} ${Math.abs(diff).toFixed(1)}pt`),
tone: diff > 0 ? 'up' : 'down',
};
}
function durationDelta(currentMs: number | null | undefined, previousMs: number | null | undefined): DeltaInfo {
if (currentMs == null || previousMs == null) return { value: '暂无上期', tone: 'flat' };
const diffSeconds = (currentMs - previousMs) / 1000;
if (Math.abs(diffSeconds) < 0.05) return { value: withCompare('持平'), tone: 'flat' };
return diffSeconds < 0
? { value: `${Math.abs(diffSeconds).toFixed(1)}s 更快`, tone: 'up' }
: { value: `${Math.abs(diffSeconds).toFixed(1)}s 更慢`, tone: 'down' };
}
function moneyDeltaCents(current: number | null | undefined, previous: number | null | undefined): DeltaInfo {
if (current == null || previous == null) return { value: '暂无上期', tone: 'flat' };
const diff = current - previous;
if (Math.abs(diff) < 0.5) return { value: withCompare('持平'), tone: 'flat' };
const arrow = diff > 0 ? '▲' : '▼';
return {
value: withCompare(`${arrow} ${fmtCents(Math.abs(diff))}`),
tone: diff > 0 ? 'up' : 'down',
};
}
function ratioBadge(value: number | null | undefined, total: number | null | undefined): DeltaInfo {
if (value == null || total == null || total <= 0) return { value: '占 --', tone: 'flat' };
return { value: `${((value / total) * 100).toFixed(1)}%`, tone: 'flat' };
}
function periodRange(period: PeriodKey) {
const p = PERIODS.find((it) => it.key === period) ?? PERIODS[0];
@@ -43,6 +111,12 @@ function periodRange(period: PeriodKey) {
return { start, end, label: `${start.format('MM-DD')} ~ ${end.format('MM-DD')}`, days: p.days };
}
function previousPeriodRange(range: ReturnType<typeof periodRange>) {
const end = range.start.subtract(1, 'day');
const start = end.subtract(range.days - 1, 'day');
return { start, end, label: `${start.format('MM-DD')} ~ ${end.format('MM-DD')}` };
}
function retentionTitle(period: PeriodKey) {
if (period === '7d') return '近 7 日新增留存';
if (period === '30d') return '近 30 日新增留存';
@@ -92,6 +166,16 @@ function sceneAdEcpm(summary: ReturnType<typeof adSceneSummary>) {
return fmtYuan((summary.revenue_yuan / summary.impressions) * 1000);
}
function cpsCommissionCents(data: DashboardOverview | null | undefined) {
if (!data?.cps.available) return null;
return (data.cps.meituan_commission_cents ?? 0) + (data.cps.jd_commission_cents ?? 0);
}
function revenueYuan(ad: AdRevenueReport | null | undefined, cpsCents: number | null | undefined) {
if (ad?.total_revenue_yuan == null && cpsCents == null) return null;
return (ad?.total_revenue_yuan ?? 0) + ((cpsCents ?? 0) / 100);
}
function niceMax(v: number) {
if (v <= 5) return 5;
if (v <= 10) return 10;
@@ -99,7 +183,7 @@ function niceMax(v: number) {
return Math.ceil(v / base) * base;
}
function StatusText({ children, tone = 'muted' }: { children: React.ReactNode; tone?: 'muted' | 'ok' | 'warn' }) {
function StatusText({ children, tone = 'muted' }: { children: ReactNode; tone?: 'muted' | 'ok' | 'warn' }) {
return <span className={`status status-${tone}`}>{children}</span>;
}
@@ -107,8 +191,8 @@ function DeltaBadge({
children,
tone = 'muted',
}: {
children: React.ReactNode;
tone?: 'muted' | 'up' | 'down';
children: ReactNode;
tone?: DeltaTone;
}) {
return <span className={`delta delta-${tone}`}>{children}</span>;
}
@@ -116,11 +200,15 @@ function DeltaBadge({
function MiniSpark({
color = '#2F6BFF',
down,
flat,
}: {
color?: string;
down?: boolean;
flat?: boolean;
}) {
const points = down
const points = flat
? '0,16 13,16 26,15 39,16 52,15 65,16 78,15'
: down
? '0,8 13,10 26,9 39,14 52,12 65,18 78,20'
: '0,24 13,22 26,20 39,15 52,13 65,8 78,5';
return (
@@ -149,9 +237,9 @@ function StatCard({
status?: string;
tone?: 'muted' | 'ok' | 'warn';
emphasis?: boolean;
spark?: 'up' | 'down';
delta?: string;
deltaTone?: 'muted' | 'up' | 'down';
spark?: 'up' | 'down' | 'flat';
delta?: ReactNode;
deltaTone?: DeltaTone;
}) {
return (
<div className={`stat-card${emphasis ? ' stat-card-emphasis' : ''}`}>
@@ -168,7 +256,13 @@ function StatCard({
{value}
{unit && value !== '--' && <span>{unit}</span>}
</div>
{spark && <MiniSpark color={spark === 'down' ? '#EF4444' : '#2F6BFF'} down={spark === 'down'} />}
{spark && (
<MiniSpark
color={spark === 'down' ? '#EF4444' : '#2F6BFF'}
down={spark === 'down'}
flat={spark === 'flat'}
/>
)}
</div>
{delta ? <DeltaBadge tone={deltaTone}>{delta}</DeltaBadge> : status && <StatusText tone={tone}>{status}</StatusText>}
</div>
@@ -181,18 +275,20 @@ function RevenueCard({
meta,
accent,
delta,
deltaTone = 'up',
}: {
title: string;
value: string;
meta?: { label: string; value: string }[];
accent?: 'blue' | 'green' | 'yellow' | 'red';
delta?: string;
accent?: 'blue' | 'green' | 'yellow' | 'red' | 'jd';
delta?: ReactNode;
deltaTone?: DeltaTone;
}) {
return (
<div className={`revenue-card ${accent ? `rev-${accent}` : ''}`}>
<div className="revenue-top">
<div className="revenue-tag">{title}</div>
{delta && <DeltaBadge tone="up">{delta}</DeltaBadge>}
{delta && <DeltaBadge tone={deltaTone}>{delta}</DeltaBadge>}
</div>
<div className="revenue-value">{value}</div>
{meta && meta.length > 0 && (
@@ -349,9 +445,12 @@ function TrendChart({ rangeLabel, points }: { rangeLabel: string; points: Dashbo
}
export default function DashboardPage() {
const { message } = App.useApp();
const [period, setPeriod] = useState<PeriodKey>('yesterday');
const [data, setData] = useState<DashboardOverview | null>(null);
const [previousData, setPreviousData] = useState<DashboardOverview | null>(null);
const [adReport, setAdReport] = useState<AdRevenueReport | null>(null);
const [previousAdReport, setPreviousAdReport] = useState<AdRevenueReport | null>(null);
const [loading, setLoading] = useState(true);
const [adLoading, setAdLoading] = useState(false);
const [overviewError, setOverviewError] = useState<string | null>(null);
@@ -361,7 +460,9 @@ export default function DashboardPage() {
const [cpsSyncing, setCpsSyncing] = useState(false);
const range = useMemo(() => periodRange(period), [period]);
const previousRange = useMemo(() => previousPeriodRange(range), [range]);
const periodData = data?.period ?? null;
const previousPeriodData = previousData?.period ?? null;
const adAvgEcpm = avgEcpm(adReport);
const rewardVideoAdSummary = adTypeSummary(adReport, 'reward_video');
const couponAdSummary = adSceneSummary(adReport, 'coupon');
@@ -381,44 +482,84 @@ export default function DashboardPage() {
const regularTaskCoinTotal =
periodData?.coins.regular_task_coin_total ??
((signinCoinTotal ?? 0) + (signinBoostCoinTotal ?? 0) + (taskCoinTotal ?? 0));
const cpsCommissionCents = data?.cps.meituan_commission_cents;
const cpsAvailable = data?.cps.available === true;
const totalRevenueYuan =
adReport?.total_revenue_yuan == null && (!cpsAvailable || cpsCommissionCents == null)
? null
: (adReport?.total_revenue_yuan ?? 0) + (cpsAvailable ? (cpsCommissionCents ?? 0) / 100 : 0);
const meituanCpsCommissionCents = data?.cps.meituan_commission_cents;
const jdCpsCommissionCents = data?.cps.jd_commission_cents;
const totalCpsCommissionCents = cpsCommissionCents(data);
const previousTotalCpsCommissionCents = cpsCommissionCents(previousData);
const totalRevenueYuan = revenueYuan(adReport, totalCpsCommissionCents);
const previousTotalRevenueYuan = revenueYuan(previousAdReport, previousTotalCpsCommissionCents);
const yesterdayTrendPoint = periodData?.trend?.[periodData.trend.length - 1];
const yesterdayActiveUsers = yesterdayTrendPoint?.active_users ?? null;
const arpuYuan =
totalRevenueYuan == null || yesterdayActiveUsers == null || yesterdayActiveUsers <= 0
? null
: totalRevenueYuan / yesterdayActiveUsers;
const cpsRevenueText = cpsAvailable ? fmtCents(cpsCommissionCents) : '--';
const cpsRevenueText = cpsAvailable ? fmtCents(totalCpsCommissionCents) : '--';
const meituanCpsRevenueText = cpsAvailable ? fmtCents(meituanCpsCommissionCents) : '--';
const jdCpsRevenueText = cpsAvailable ? fmtCents(jdCpsCommissionCents) : '--';
const cpsHitRate = !cpsAvailable || data?.cps.meituan_hit_rate == null ? '--' : pct(data.cps.meituan_hit_rate);
const retentionValue =
periodData?.users.retention_rate == null
? '--'
: (periodData.users.retention_rate * 100).toFixed(1);
const activeUserDelta = percentDelta(periodData?.users.active, previousPeriodData?.users.active);
const newUserDelta = percentDelta(periodData?.users.new, previousPeriodData?.users.new);
const retentionDelta = pointDelta(periodData?.users.retention_rate, previousPeriodData?.users.retention_rate);
const retentionSpark: 'up' | 'down' | 'flat' | undefined =
periodData?.users.retention_rate == null
? undefined
: retentionDelta.tone === 'down'
? 'down'
: retentionDelta.tone === 'up' || periodData.users.retention_rate >= 1
? 'up'
: 'flat';
const comparisonTotalDelta = percentDelta(periodData?.comparison.total, previousPeriodData?.comparison.total);
const comparisonSuccessDelta = percentDelta(periodData?.comparison.success, previousPeriodData?.comparison.success);
const comparisonOrderedDelta = percentDelta(periodData?.comparison.ordered, previousPeriodData?.comparison.ordered);
const durationDeltaInfo = durationDelta(
periodData?.comparison.average_duration_ms,
previousPeriodData?.comparison.average_duration_ms,
);
const averageSavedDelta = moneyDeltaCents(
periodData?.comparison.average_saved_cents,
previousPeriodData?.comparison.average_saved_cents,
);
const totalRevenueDelta = percentDelta(totalRevenueYuan, previousTotalRevenueYuan);
const adRevenueDelta = percentDelta(adReport?.total_revenue_yuan, previousAdReport?.total_revenue_yuan);
const cpsRevenueDelta = percentDelta(totalCpsCommissionCents, previousTotalCpsCommissionCents);
const grantedCoinDelta = percentDelta(periodData?.coins.granted_total, previousPeriodData?.coins.granted_total);
const couponCoinRatio = ratioBadge(couponRewardCoinTotal, periodData?.coins.granted_total);
const comparisonCoinRatio = ratioBadge(comparisonRewardCoinTotal, periodData?.coins.granted_total);
const rewardVideoCoinRatio = ratioBadge(periodData?.coins.reward_video_coin_total, periodData?.coins.granted_total);
const regularTaskCoinRatio = ratioBadge(regularTaskCoinTotal, periodData?.coins.granted_total);
useEffect(() => {
let alive = true;
setLoading(true);
setOverviewError(null);
api
.get<DashboardOverview>('/admin/api/stats/overview', {
params: {
date_from: range.start.format('YYYY-MM-DD'),
date_to: range.end.format('YYYY-MM-DD'),
},
})
.then((r) => {
const currentParams = {
date_from: range.start.format('YYYY-MM-DD'),
date_to: range.end.format('YYYY-MM-DD'),
};
const previousParams = {
date_from: previousRange.start.format('YYYY-MM-DD'),
date_to: previousRange.end.format('YYYY-MM-DD'),
};
Promise.allSettled([
api.get<DashboardOverview>('/admin/api/stats/overview', { params: currentParams }),
api.get<DashboardOverview>('/admin/api/stats/overview', { params: previousParams }),
])
.then(([current, previous]) => {
if (!alive) return;
setData(r.data);
setUpdatedAt(dayjs().format('YYYY-MM-DD HH:mm'));
})
.catch(() => {
if (!alive) return;
setOverviewError('总览接口加载失败');
if (current.status === 'fulfilled') {
setData(current.value.data);
setUpdatedAt(dayjs().format('YYYY-MM-DD HH:mm'));
} else {
setData(null);
setOverviewError('总览接口加载失败');
}
setPreviousData(previous.status === 'fulfilled' ? previous.value.data : null);
})
.finally(() => {
if (alive) setLoading(false);
@@ -426,29 +567,37 @@ export default function DashboardPage() {
return () => {
alive = false;
};
}, [range.start, range.end, refreshKey]);
}, [range.start, range.end, previousRange.start, previousRange.end, refreshKey]);
useEffect(() => {
let alive = true;
setAdLoading(true);
setAdError(null);
api
.get<AdRevenueReport>('/admin/api/ad-revenue-report', {
params: {
date_from: range.start.format('YYYY-MM-DD'),
date_to: range.end.format('YYYY-MM-DD'),
granularity: 'day',
limit: 1000,
},
})
.then((r) => {
const currentParams = {
date_from: range.start.format('YYYY-MM-DD'),
date_to: range.end.format('YYYY-MM-DD'),
granularity: 'day',
limit: 1000,
};
const previousParams = {
date_from: previousRange.start.format('YYYY-MM-DD'),
date_to: previousRange.end.format('YYYY-MM-DD'),
granularity: 'day',
limit: 1000,
};
Promise.allSettled([
api.get<AdRevenueReport>('/admin/api/ad-revenue-report', { params: currentParams }),
api.get<AdRevenueReport>('/admin/api/ad-revenue-report', { params: previousParams }),
])
.then(([current, previous]) => {
if (!alive) return;
setAdReport(r.data);
})
.catch(() => {
if (!alive) return;
setAdReport(null);
setAdError('广告收益接口加载失败');
if (current.status === 'fulfilled') {
setAdReport(current.value.data);
} else {
setAdReport(null);
setAdError('广告收益接口加载失败');
}
setPreviousAdReport(previous.status === 'fulfilled' ? previous.value.data : null);
})
.finally(() => {
if (alive) setAdLoading(false);
@@ -456,7 +605,7 @@ export default function DashboardPage() {
return () => {
alive = false;
};
}, [range.start, range.end]);
}, [range.start, range.end, previousRange.start, previousRange.end]);
if (loading) return <Spin style={{ display: 'block', marginTop: 80 }} />;
@@ -464,7 +613,7 @@ export default function DashboardPage() {
return <Alert type="error" showIcon message={overviewError ?? '数据大盘加载失败'} />;
}
const syncMeituanCps = async () => {
const syncCpsOrders = async () => {
setCpsSyncing(true);
try {
const resp = await api.post<{
@@ -476,12 +625,13 @@ export default function DashboardPage() {
params: {
date_from: range.start.format('YYYY-MM-DD'),
date_to: range.end.format('YYYY-MM-DD'),
platform: 'all',
},
});
message.success(`已同步 ${resp.data.fetched}`);
setRefreshKey((v) => v + 1);
} catch {
message.error('美团订单刷新失败');
message.error('CPS 订单刷新失败');
} finally {
setCpsSyncing(false);
}
@@ -527,20 +677,20 @@ export default function DashboardPage() {
<h3></h3>
<span></span>
</div>
<div className="grid g5">
<StatCard title="总用户" value={fmtInt(data.users.total)} status="累计用户数" tone="ok" spark="up" />
<div className="grid g4">
<StatCard
title="活跃用户"
value={fmtInt(periodData?.users.active)}
status="本期活跃去重"
tone="ok"
hint="当前按本期内进入 App、完成比价记录、开始领券流程任一满足去重;未完成上报的比价开始事件待后续补埋点。"
delta={activeUserDelta.value}
deltaTone={activeUserDelta.tone}
hint="当前按本期内登录、开始比价、开始领券任一满足去重;比价按 real_compare_start,领券按 real_coupon_start/claim_started。"
spark="up"
/>
<StatCard
title="新增用户"
value={fmtInt(periodData?.users.new)}
status="本期新用户"
delta={newUserDelta.value}
deltaTone={newUserDelta.tone}
hint="当前按注册时间落在所选日期范围统计;若产品要按首次进入 App/首次流程启动定义新增,需要补首次行为聚合。"
spark="up"
/>
@@ -548,16 +698,16 @@ export default function DashboardPage() {
title={retentionTitle(period)}
value={retentionValue}
unit="%"
status={`${fmtInt(periodData?.users.retained_new_users)} / ${fmtInt(periodData?.users.new)} 新用户`}
tone="warn"
delta={retentionDelta.value}
deltaTone={retentionDelta.tone}
hint={periodData?.users.retention_note ?? '暂无留存数据'}
spark="down"
spark={retentionSpark}
/>
<StatCard
title="比价次数"
value={fmtInt(periodData?.comparison.total)}
status="本期比价次数"
tone="muted"
delta={comparisonTotalDelta.value}
deltaTone={comparisonTotalDelta.tone}
spark="up"
/>
</div>
@@ -571,23 +721,43 @@ export default function DashboardPage() {
<span></span>
</div>
<div className="grid g5">
<StatCard title="发起比价" value={fmtInt(periodData?.comparison.total)} unit="次" status="本期发起次数" />
<StatCard title="比价成功" value={fmtInt(periodData?.comparison.success)} unit="次" status={pct(compareSuccessRate)} tone="ok" />
<StatCard
title="发起比价"
value={fmtInt(periodData?.comparison.total)}
unit="次"
delta={comparisonTotalDelta.value}
deltaTone={comparisonTotalDelta.tone}
/>
<StatCard
title="比价成功"
value={fmtInt(periodData?.comparison.success)}
unit="次"
delta={comparisonSuccessDelta.value}
deltaTone={comparisonSuccessDelta.tone}
hint={`当前成功率 ${pct(compareSuccessRate)}`}
/>
<StatCard
title="成功下单"
value={fmtInt(periodData?.comparison.ordered)}
unit="单"
status="已下单记录"
delta={comparisonOrderedDelta.value}
deltaTone={comparisonOrderedDelta.tone}
hint="按比价记录页同一口径:用户有通过比价产生的下单记录,且店名与比价记录店名一致,则这条比价记录记为已下单。"
/>
<StatCard
title="平均耗时"
value={fmtMsAsSeconds(averageDurationMs)}
unit="秒"
status={averageDurationMs == null ? '暂无耗时数据' : '本期平均耗时'}
delta={durationDeltaInfo.value}
deltaTone={durationDeltaInfo.tone}
hint="按比价记录页同一口径:取所选日期范围内已上报耗时的比价记录,求平均后换算为秒。"
/>
<StatCard title="平均节省金额" value={fmtCents(periodData?.comparison.average_saved_cents)} status="有节省的成功比价" />
<StatCard
title="平均节省金额"
value={fmtCents(periodData?.comparison.average_saved_cents)}
delta={averageSavedDelta.value}
deltaTone={averageSavedDelta.tone}
/>
</div>
</section>
@@ -597,7 +767,7 @@ export default function DashboardPage() {
<h3></h3>
<span>
{cpsAvailable
? (adError ? '广告收益接口当前后端不可用,美团 CPS 已接入' : '广告收益与美团 CPS 已接入')
? (adError ? '广告收益接口当前后端不可用,美团/京东 CPS 已接入' : '广告收益与美团/京东 CPS 已接入')
: (adError ? '广告收益接口当前后端不可用,订单/佣金数据待接' : '广告收益已接入,订单/佣金数据待接')}
</span>
</div>
@@ -607,6 +777,8 @@ export default function DashboardPage() {
title="总收入"
value={adLoading ? '--' : fmtYuan(totalRevenueYuan)}
accent="blue"
delta={totalRevenueDelta.value}
deltaTone={totalRevenueDelta.tone}
meta={[
{ label: '广告收入', value: adLoading ? '--' : fmtYuan(adReport?.total_revenue_yuan) },
{ label: 'CPS 收入', value: cpsRevenueText },
@@ -615,38 +787,58 @@ export default function DashboardPage() {
<RevenueCard
title="广告收入"
value={adLoading ? '--' : fmtYuan(adReport?.total_revenue_yuan)}
meta={[{ label: '展示数', value: adLoading ? '--' : fmtInt(adReport?.total_impressions) }]}
delta={adRevenueDelta.value}
deltaTone={adRevenueDelta.tone}
meta={[
{
label: '占总收入',
value:
totalRevenueYuan && totalRevenueYuan > 0 && adReport?.total_revenue_yuan != null
? `${((adReport.total_revenue_yuan / totalRevenueYuan) * 100).toFixed(1)}%`
: '--',
},
]}
/>
<RevenueCard
title="CPS 收入"
value={cpsRevenueText}
meta={[{ label: '来源', value: cpsAvailable ? '美团已接,淘宝/京东暂空' : '订单/佣金待接' }]}
delta={cpsRevenueDelta.value}
deltaTone={cpsRevenueDelta.tone}
meta={[
{
label: '占总收入',
value:
totalRevenueYuan && totalRevenueYuan > 0 && totalCpsCommissionCents != null
? `${(((totalCpsCommissionCents / 100) / totalRevenueYuan) * 100).toFixed(1)}%`
: '--',
},
]}
/>
<RevenueCard
title="ARPU"
value={adLoading ? '--' : fmtYuan(arpuYuan)}
meta={[
{ label: '口径', value: '收入 / 活跃用户' },
{ label: 'ARPPU', value: '待确认付费用户口径' },
{ label: '口径', value: '收入 / 昨日活跃用户' },
{ label: '分母', value: yesterdayActiveUsers == null ? '--' : `${fmtInt(yesterdayActiveUsers)}` },
]}
/>
</div>
<div className="sub-label cps-sub-label">
<span>CPS </span>
<button type="button" onClick={syncMeituanCps} disabled={cpsSyncing}>
{cpsSyncing ? '刷新中' : '刷新美团订单'}
<button type="button" onClick={syncCpsOrders} disabled={cpsSyncing}>
{cpsSyncing ? '刷新中' : '刷新 CPS 订单'}
</button>
</div>
<div className="grid g4">
<RevenueCard
title="总 CPS 收益"
value={cpsRevenueText}
meta={[{ label: '来源', value: cpsAvailable ? '美团订单佣金,淘宝/京东暂空' : '订单/佣金待接' }]}
meta={[{ label: '来源', value: cpsAvailable ? '美团+京东订单佣金,淘宝暂未接入' : '订单/佣金待接' }]}
/>
<RevenueCard
title="美团 CPS"
value={cpsRevenueText}
value={meituanCpsRevenueText}
meta={[
{ label: '订单量', value: cpsAvailable ? fmtInt(data?.cps.meituan_order_count) : '待订单数据' },
{
@@ -658,8 +850,16 @@ export default function DashboardPage() {
]}
accent="yellow"
/>
<RevenueCard title="淘宝 CPS" value="--" meta={[{ label: '状态', value: '后续接入后填写' }]} accent="red" />
<RevenueCard title="京东 CPS" value="--" meta={[{ label: '状态', value: '后续接入后填写' }]} accent="red" />
<RevenueCard title="淘宝 CPS" value="--" meta={[{ label: '状态', value: '暂未接入' }]} accent="red" />
<RevenueCard
title="京东 CPS"
value={jdCpsRevenueText}
meta={[
{ label: '有效订单', value: cpsAvailable ? fmtInt(data?.cps.jd_order_count) : '待订单数据' },
{ label: '无效订单', value: cpsAvailable ? fmtInt(data?.cps.jd_invalid_count ?? 0) : '待订单数据' },
]}
accent="jd"
/>
</div>
<div className="sub-label">广</div>
@@ -705,32 +905,58 @@ export default function DashboardPage() {
<span className="bar" />
<h3></h3>
<Tag color="warning"></Tag>
<span></span>
<span> = = </span>
</div>
<div className="grid g6">
<StatCard title="本期发放金币" value={fmtInt(periodData?.coins.granted_total)} status="本期发放合计" />
<StatCard
title="本期发放金币"
value={fmtInt(periodData?.coins.granted_total)}
delta={grantedCoinDelta.value}
deltaTone={grantedCoinDelta.tone}
emphasis
/>
<StatCard
title="领券奖励金币"
value={fmtInt(couponRewardCoinTotal)}
status="领券相关发放"
delta={couponCoinRatio.value}
deltaTone={couponCoinRatio.tone}
/>
<StatCard
title="比价奖励金币"
value={fmtInt(comparisonRewardCoinTotal)}
status="比价相关发放"
delta={comparisonCoinRatio.value}
deltaTone={comparisonCoinRatio.tone}
/>
<StatCard
title="激励视频金币"
value={fmtInt(periodData?.coins.reward_video_coin_total)}
delta={rewardVideoCoinRatio.value}
deltaTone={rewardVideoCoinRatio.tone}
hint="独立统计激励视频发放,不再重复计入领券奖励。"
/>
<StatCard title="激励视频金币" value="--" status="并入领券奖励" />
<StatCard
title="常规任务金币"
value={fmtInt(regularTaskCoinTotal)}
status="任务等发放"
delta={regularTaskCoinRatio.value}
deltaTone={regularTaskCoinRatio.tone}
/>
<StatCard
title="本期提现金额"
value={fmtCents(periodData?.cash.withdraw_success_cents)}
delta="实付现金"
deltaTone="flat"
/>
<StatCard title="本期提现金额" value={fmtCents(periodData?.cash.withdraw_success_cents)} status="成功提现" />
</div>
<div className="risk-note">
{fmtInt(periodData?.coins.granted_total)} {fmtCents(periodData?.cash.withdraw_success_cents)}
{fmtInt(data.coins.granted_total)} {fmtCents(data.cash.withdraw_success_cents)}
广广
<div>
4 <b>{fmtCoinAmount(periodData?.coins.granted_total)}</b>
<b>{fmtYuan((periodData?.coins.granted_total ?? 0) / 1000)}</b>
<b>{fmtCents(periodData?.cash.withdraw_success_cents)}</b>
<b>{fmtCoinAmount(data.coins.granted_total)}</b>
<b>{fmtCents(data.cash.withdraw_success_cents)}</b>/
/ 4
</div>
</div>
</section>
@@ -772,7 +998,7 @@ export default function DashboardPage() {
--coin: #ffb300;
--p-mt-waimai: #ffc300;
--p-taobao: #ff4400;
--p-jd: #e1251b;
--p-jd: #b91c1c;
--radius: 10px;
--shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.04);
color: var(--ink);
@@ -967,10 +1193,17 @@ export default function DashboardPage() {
font-weight: 600;
}
.status-muted,
.delta-muted {
.delta-muted,
.delta-flat {
color: var(--ink-3);
background: #f1f3f7;
}
.delta .cmp {
margin-left: 3px;
color: var(--ink-3);
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
font-weight: 400;
}
.status-ok,
.delta-up {
color: var(--up);
@@ -1144,6 +1377,10 @@ export default function DashboardPage() {
background: var(--p-taobao);
color: #fff;
}
.rev-jd .revenue-tag {
background: var(--p-jd);
color: #fff;
}
.revenue-value {
color: var(--ink);
font-family: "DIN Alternate", "Helvetica Neue", sans-serif;
@@ -49,6 +49,17 @@ const statusTag = (s: string) => {
return <Tag color={m.color}>{m.label}</Tag>;
};
// 反馈类型:comparison=比价反馈 / profile(及旧数据)=普通反馈
const SOURCE_META: Record<string, { label: string; color: string }> = {
comparison: { label: '比价反馈', color: 'geekblue' },
profile: { label: '普通反馈', color: 'default' },
};
const sourceTag = (s: string) => {
const m = SOURCE_META[s] ?? { label: '普通反馈', color: 'default' };
return <Tag color={m.color}>{m.label}</Tag>;
};
function FeedbackImages({ images }: { images: string[] | null }) {
if (!images || !images.length) return <Text type="secondary"></Text>;
return (
@@ -113,12 +124,14 @@ export default function FeedbackHandleDrawer({ feedback, open, onClose, onDone }
await api.post(`/admin/api/feedbacks/${feedback.id}/approve`, {
reward_coins: v.reward_coins,
note: v.note?.trim() || null,
reply: v.reply?.trim() || null,
});
message.success(`已采纳,发放 ${v.reward_coins} 金币`);
} else {
await api.post(`/admin/api/feedbacks/${feedback.id}/reject`, {
reason: v.reason.trim(),
note: v.note?.trim() || null,
reply: v.reply?.trim() || null,
});
message.success('已拒绝');
}
@@ -155,6 +168,14 @@ export default function FeedbackHandleDrawer({ feedback, open, onClose, onDone }
<Text type="secondary">
{feedback.user_id} · {formatWallTime(feedback.created_at)}
</Text>
<div style={{ marginTop: 6 }}>
{sourceTag(feedback.source)}
{feedback.scene ? (
<Text type="secondary" style={{ marginLeft: 6 }}>
:{feedback.scene}
</Text>
) : null}
</div>
<Paragraph style={{ whiteSpace: 'pre-wrap', marginTop: 8, marginBottom: 8 }}>
{feedback.content || '-'}
</Paragraph>
@@ -200,7 +221,11 @@ export default function FeedbackHandleDrawer({ feedback, open, onClose, onDone }
</div>
)}
<div style={{ marginTop: 6 }}>
:{feedback.review_note || <Text type="secondary"></Text>}
():{feedback.review_note || <Text type="secondary"></Text>}
</div>
<div style={{ marginTop: 6 }}>
():
{feedback.admin_reply || <Text type="secondary"></Text>}
</div>
{isPending(feedback.status) && (
<div style={{ marginTop: 6 }}>
@@ -243,11 +268,23 @@ export default function FeedbackHandleDrawer({ feedback, open, onClose, onDone }
</Form.Item>
<Form.Item
name="note"
label="采纳要点 / 审核备注(选填)"
label="采纳要点 / 审核备注(选填,内部)"
rules={[{ max: 256, message: '最多 256 字' }]}
>
<Input.TextArea rows={3} maxLength={256} showCount placeholder="如:建议已采纳,将在下个版本上线" />
</Form.Item>
<Form.Item
name="reply"
label="给用户的回复(选填,用户端可见)"
rules={[{ max: 256, message: '最多 256 字' }]}
>
<Input.TextArea
rows={2}
maxLength={256}
showCount
placeholder="将展示在用户的「我的反馈」里,如:感谢反馈,已收到~"
/>
</Form.Item>
</>
) : (
<>
@@ -268,6 +305,18 @@ export default function FeedbackHandleDrawer({ feedback, open, onClose, onDone }
>
<Input.TextArea rows={2} maxLength={256} showCount placeholder="运营内部备注" />
</Form.Item>
<Form.Item
name="reply"
label="给用户的回复(选填,用户端可见)"
rules={[{ max: 256, message: '最多 256 字' }]}
>
<Input.TextArea
rows={2}
maxLength={256}
showCount
placeholder="除未采纳原因外,想额外对用户说的话(选填)"
/>
</Form.Item>
</>
)}
</Form>
@@ -294,7 +343,10 @@ export default function FeedbackHandleDrawer({ feedback, open, onClose, onDone }
<Text type="secondary">
#{h.id} · {formatWallTime(h.created_at)}
</Text>
{statusTag(h.status)}
<Space size={4}>
{sourceTag(h.source)}
{statusTag(h.status)}
</Space>
</div>
<Paragraph
style={{ whiteSpace: 'pre-wrap', margin: '6px 0 0' }}
@@ -313,6 +365,9 @@ export default function FeedbackHandleDrawer({ feedback, open, onClose, onDone }
:{h.reject_reason || '-'}
</Text>
)}
{h.admin_reply ? (
<div style={{ fontSize: 12, marginTop: 2 }}>:{h.admin_reply}</div>
) : null}
</div>
))}
</Space>
+62 -5
View File
@@ -49,7 +49,42 @@ const statusTag = (s: string) => {
return <Tag color={m.color}>{m.label}</Tag>;
};
// 审核结果展示(采纳=金币+批注 / 未采纳=原因 / 待审核=-),主表与「该用户全部反馈」抽屉共用
// 反馈类型:comparison=比价反馈(比价结果页入口) / profile=普通反馈(「我的」页入口)。
// 旧数据与未识别来源按普通反馈展示。
const SOURCE_META: Record<string, { label: string; color: string }> = {
comparison: { label: '比价反馈', color: 'geekblue' },
profile: { label: '普通反馈', color: 'default' },
};
const SOURCE_OPTIONS = [
{ value: 'comparison', label: '比价反馈' },
{ value: 'profile', label: '普通反馈' },
];
// 反馈类型标签 +(比价反馈时)问题场景副标题
const renderSource = (f: Feedback) => {
const m = SOURCE_META[f.source] ?? { label: '普通反馈', color: 'default' };
return (
<Space direction="vertical" size={0}>
<Tag color={m.color}>{m.label}</Tag>
{f.scene ? (
<Text type="secondary" style={{ fontSize: 12 }}>
{f.scene}
</Text>
) : null}
</Space>
);
};
// 用户可见的运营回复留言(采纳/未采纳都可能有)
const replyLine = (f: Feedback) =>
f.admin_reply ? (
<Text style={{ fontSize: 12 }} ellipsis>
:{f.admin_reply}
</Text>
) : null;
// 审核结果展示(采纳=金币+批注 / 未采纳=原因 / 回复留言 / 待审核=-),主表与「该用户全部反馈」抽屉共用
const renderReview = (f: Feedback) => {
if (f.status === 'adopted') {
return (
@@ -60,14 +95,18 @@ const renderReview = (f: Feedback) => {
{f.review_note}
</Text>
) : null}
{replyLine(f)}
</Space>
);
}
if (f.status === 'rejected') {
return (
<Text type="secondary" style={{ fontSize: 12 }} ellipsis>
:{f.reject_reason || '-'}
</Text>
<Space direction="vertical" size={0}>
<Text type="secondary" style={{ fontSize: 12 }} ellipsis>
:{f.reject_reason || '-'}
</Text>
{replyLine(f)}
</Space>
);
}
return <Text type="secondary">-</Text>;
@@ -95,6 +134,7 @@ const renderDeviceOs = (f: Feedback) => {
const RECORD_COLUMNS: ColumnsType<Feedback> = [
{ title: '提交时间', dataIndex: 'created_at', width: 150, render: (v: string) => formatWallTime(v) },
{ title: '状态', dataIndex: 'status', width: 80, render: statusTag },
{ title: '反馈类型', key: 'source', width: 100, render: (_: unknown, f: Feedback) => renderSource(f) },
{
title: '内容',
dataIndex: 'content',
@@ -116,6 +156,7 @@ const RECORD_COLUMNS: ColumnsType<Feedback> = [
export default function FeedbacksPage() {
// 筛选草稿:点「查询」才应用(避免输入即刷新)
const [status, setStatus] = useState<string | undefined>();
const [source, setSource] = useState<string | undefined>();
const [userId, setUserId] = useState('');
const [content, setContent] = useState('');
const [createdRange, setCreatedRange] = useState<[Dayjs, Dayjs] | null>(null);
@@ -158,6 +199,7 @@ export default function FeedbacksPage() {
const search = () =>
setApplied({
status,
source,
user_id: userId.trim() ? Number(userId.trim()) : undefined,
content: content.trim() || undefined,
created_from: createdRange?.[0] ? createdRange[0].startOf('day').toISOString() : undefined,
@@ -166,6 +208,7 @@ export default function FeedbacksPage() {
const resetFilters = () => {
setStatus(undefined);
setSource(undefined);
setUserId('');
setContent('');
setCreatedRange(null);
@@ -216,6 +259,12 @@ export default function FeedbacksPage() {
width: 120,
render: (v: string | null) => v || <Text type="secondary"></Text>,
},
{
title: '反馈类型',
key: 'source',
width: 110,
render: (_: unknown, f: Feedback) => renderSource(f),
},
{
title: '提交版本号',
dataIndex: 'app_version',
@@ -325,6 +374,14 @@ export default function FeedbacksPage() {
{ value: 'rejected', label: '未采纳' },
]}
/>
<Select
placeholder="反馈类型"
value={source}
onChange={setSource}
allowClear
style={{ width: 130 }}
options={SOURCE_OPTIONS}
/>
<Input
placeholder="用户ID"
value={userId}
@@ -367,7 +424,7 @@ export default function FeedbacksPage() {
onChange: onPageChange,
}}
onChange={onTableChange}
scroll={{ x: 1610 }}
scroll={{ x: 1720 }}
/>
<FeedbackHandleDrawer
+246 -30
View File
@@ -8,10 +8,10 @@ import {
DatabaseOutlined,
FileSearchOutlined,
FlagOutlined,
GiftOutlined,
HeartOutlined,
LogoutOutlined,
MessageOutlined,
MobileOutlined,
MoneyCollectOutlined,
NotificationOutlined,
ProfileOutlined,
@@ -20,25 +20,66 @@ import {
TeamOutlined,
UserOutlined,
} from '@ant-design/icons';
import { Avatar, Dropdown, Layout, Menu } from 'antd';
import { Avatar, Dropdown, Layout, Tooltip } from 'antd';
import { clearAuth, getAdmin, getToken } from '@/lib/auth';
import type { AdminInfo } from '@/lib/types';
const { Sider, Header, Content } = Layout;
const MENU = [
{ key: '/dashboard', icon: <DashboardOutlined />, label: '数据大盘' },
{ key: '/users', icon: <UserOutlined />, label: '用户管理' },
{ key: '/devices', icon: <MobileOutlined />, label: '设备管理' },
{ key: '/device-liveness', icon: <HeartOutlined />, label: '设备存活' },
{ key: '/withdraws', icon: <MoneyCollectOutlined />, label: '提现管理' },
{ key: '/price-reports', icon: <FlagOutlined />, label: '低价审核' },
{ key: '/comparison-records', icon: <ProfileOutlined />, label: '比价记录' },
{ key: '/feedbacks', icon: <MessageOutlined />, label: '用户反馈' },
{ key: '/ad-revenue', icon: <NotificationOutlined />, label: '广告配置' },
{ key: '/ad-revenue-report', icon: <BarChartOutlined />, label: '广告收益' },
{ key: '/cps', icon: <ShareAltOutlined />, label: 'CPS 分发' },
{ key: '/config', icon: <SettingOutlined />, label: '系统配置' },
type NavItem = {
key: string;
icon: React.ReactNode;
label: string;
superOnly?: boolean;
};
type NavGroup =
| (NavItem & { children?: never })
| {
key: string;
icon: React.ReactNode;
label: string;
children: NavItem[];
superOnly?: boolean;
};
const hasChildren = (group: NavGroup): group is NavGroup & { children: NavItem[] } =>
Array.isArray(group.children);
const NAV_GROUPS: NavGroup[] = [
{
key: 'dashboard',
icon: <DashboardOutlined />,
label: '看板',
children: [
{ key: '/dashboard', icon: <DashboardOutlined />, label: '数据大盘' },
{ key: '/coupon-data', icon: <GiftOutlined />, label: '领券数据' },
{ key: '/ad-revenue-report', icon: <BarChartOutlined />, label: '广告收益' },
{ key: '/comparison-records', icon: <ProfileOutlined />, label: '比价记录' },
{ key: '/cps', icon: <ShareAltOutlined />, label: 'CPS收益' },
{ key: '/device-liveness', icon: <HeartOutlined />, label: '设备存活' },
],
},
{
key: 'reward-review',
icon: <MoneyCollectOutlined />,
label: '奖励审核',
children: [
{ key: '/withdraws', icon: <MoneyCollectOutlined />, label: '提现审核' },
{ key: '/price-reports', icon: <FlagOutlined />, label: '低价审核' },
{ key: '/feedbacks', icon: <MessageOutlined />, label: '用户反馈' },
],
},
{
key: 'data-config',
icon: <SettingOutlined />,
label: '数据配置',
children: [
{ key: '/config', icon: <SettingOutlined />, label: '系统配置' },
{ key: '/ad-revenue', icon: <NotificationOutlined />, label: '广告配置' },
{ key: '/users', icon: <UserOutlined />, label: '用户管理' },
],
},
{ key: '/admins', icon: <TeamOutlined />, label: '管理员', superOnly: true },
{ key: '/event-logs', icon: <DatabaseOutlined />, label: '埋点日志' },
{ key: '/audit-logs', icon: <FileSearchOutlined />, label: '审计日志' },
@@ -48,6 +89,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
const router = useRouter();
const pathname = usePathname();
const [admin, setAdmin] = useState<AdminInfo | null>(null);
const [collapsed, setCollapsed] = useState(false);
useEffect(() => {
if (!getToken()) {
@@ -59,14 +101,19 @@ export default function MainLayout({ children }: { children: React.ReactNode })
if (!admin) return null; // 守卫期间不闪烁内容
const items = MENU.filter((m) => !m.superOnly || admin.role === 'super_admin').map((m) => ({
key: m.key,
icon: m.icon,
label: m.label,
}));
// 选中态:取路径一级(/users/123 → /users)
// 选中态:取路径一级(/users/123 -> /users)
const selectedKey = '/' + (pathname.split('/')[1] || 'dashboard');
const canShow = (item: { superOnly?: boolean }) => !item.superOnly || admin.role === 'super_admin';
const visibleGroups = NAV_GROUPS
.filter(canShow)
.map((group) => {
if (!hasChildren(group)) return group;
return { ...group, children: group.children.filter(canShow) };
})
.filter((group) => !hasChildren(group) || group.children.length > 0);
const flatNavItems = visibleGroups.flatMap((group) =>
hasChildren(group) ? group.children : [group],
);
const logout = () => {
clearAuth();
@@ -75,7 +122,15 @@ export default function MainLayout({ children }: { children: React.ReactNode })
return (
<Layout style={{ minHeight: '100vh' }}>
<Sider theme="dark" breakpoint="lg" collapsible>
<Sider
theme="dark"
breakpoint="lg"
collapsible
collapsed={collapsed}
collapsedWidth={72}
width={220}
onCollapse={setCollapsed}
>
<div
style={{
height: 48,
@@ -88,13 +143,61 @@ export default function MainLayout({ children }: { children: React.ReactNode })
>
</div>
<Menu
theme="dark"
mode="inline"
selectedKeys={[selectedKey]}
items={items}
onClick={({ key }) => router.push(key)}
/>
<nav className={`side-nav${collapsed ? ' side-nav-collapsed' : ''}`} aria-label="后台导航">
{collapsed
? flatNavItems.map((item) => (
<Tooltip key={item.key} title={item.label} placement="right">
<button
type="button"
className={`nav-icon-button${selectedKey === item.key ? ' is-selected' : ''}`}
onClick={() => router.push(item.key)}
aria-label={item.label}
>
{item.icon}
</button>
</Tooltip>
))
: visibleGroups.map((group) => {
const isGroup = hasChildren(group);
const groupSelected = isGroup
? group.children.some((child) => child.key === selectedKey)
: selectedKey === group.key;
if (!isGroup) {
return (
<button
key={group.key}
type="button"
className={`nav-primary nav-direct${groupSelected ? ' is-selected' : ''}`}
onClick={() => router.push(group.key)}
>
<span className="nav-primary-icon">{group.icon}</span>
<span>{group.label}</span>
</button>
);
}
return (
<section key={group.key} className={`nav-group${groupSelected ? ' is-active' : ''}`}>
<div className="nav-primary">
<span className="nav-primary-icon">{group.icon}</span>
<span>{group.label}</span>
</div>
<div className="nav-children">
{group.children.map((child) => (
<button
key={child.key}
type="button"
className={`nav-child${selectedKey === child.key ? ' is-selected' : ''}`}
onClick={() => router.push(child.key)}
>
<span className="nav-child-icon">{child.icon}</span>
<span>{child.label}</span>
</button>
))}
</div>
</section>
);
})}
</nav>
</Sider>
<Layout>
<Header
@@ -120,6 +223,119 @@ export default function MainLayout({ children }: { children: React.ReactNode })
</Header>
<Content style={{ margin: 24 }}>{children}</Content>
</Layout>
<style jsx global>{`
.side-nav {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 10px 14px;
}
.nav-group {
padding: 6px 0 8px;
}
.nav-group + .nav-group,
.nav-group + .nav-direct,
.nav-direct + .nav-direct {
margin-top: 4px;
}
.nav-primary {
display: flex;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 0 12px;
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
}
.nav-primary-icon,
.nav-child-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
}
.nav-direct,
.nav-child,
.nav-icon-button {
border: 0;
cursor: pointer;
font: inherit;
text-align: left;
}
.nav-direct {
width: 100%;
border-radius: 8px;
background: transparent;
}
.nav-direct:hover,
.nav-direct.is-selected {
background: #1677ff;
color: #fff;
}
.nav-direct:hover .nav-primary-icon,
.nav-direct.is-selected .nav-primary-icon {
color: #fff;
}
.nav-children {
display: flex;
flex-direction: column;
gap: 2px;
margin-left: 34px;
margin-top: -2px;
padding-right: 2px;
}
.nav-child {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 34px;
border-radius: 8px;
background: transparent;
color: rgba(255, 255, 255, 0.72);
font-size: 13px;
padding: 0 10px;
}
.nav-child:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.nav-child.is-selected {
background: #1677ff;
color: #fff;
font-weight: 600;
}
.nav-child.is-selected .nav-child-icon {
color: #fff;
}
.nav-group.is-active .nav-primary {
color: #fff;
}
.side-nav-collapsed {
align-items: center;
gap: 6px;
padding: 0 8px 14px;
}
.nav-icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: transparent;
color: rgba(255, 255, 255, 0.72);
font-size: 17px;
}
.nav-icon-button:hover,
.nav-icon-button.is-selected {
background: #1677ff;
color: #fff;
}
`}</style>
</Layout>
);
}
+48 -24
View File
@@ -39,10 +39,12 @@ const PAGE_SIZE = 10; // 金币记录每页条数
interface Props {
userId: number;
user: WithdrawUserSnapshot | null;
// 统计区字段集:withdraw(默认,提现详情:含提现细分) / ad(广告收益详情:只看看广告观看统计,对齐参考图 6 项)
statsVariant?: 'withdraw' | 'ad';
}
/** 提现详情抽屉:用户基本信息 + 互斥时间筛选 + 看广告/提现统计区 + 金币发放记录表。 */
export default function UserRewardPanel({ userId, user }: Props) {
/** 用户看广告/提现详情:基本信息 + 互斥时间筛选 + 统计区(按 statsVariant 取字段集)+ 金币发放记录表。 */
export default function UserRewardPanel({ userId, user, statsVariant = 'withdraw' }: Props) {
const [mode, setMode] = useState<'all' | 'range'>('all'); // all=注册至今 / range=自定义区间
const [range, setRange] = useState<[Dayjs, Dayjs] | null>(null);
const [stats, setStats] = useState<UserRewardStats | null>(null);
@@ -164,7 +166,7 @@ export default function UserRewardPanel({ userId, user }: Props) {
</Space>
</Space>
{/* 统计区(受时间筛选;现金余额为当前快照) */}
{/* 统计区(受时间筛选;现金余额为当前快照)。ad 视图只保留看广告观看统计(对齐参考图 6 项) */}
<Descriptions bordered size="small" column={2} style={{ marginBottom: 8 }}>
<Descriptions.Item label="累计提现">
{stats ? yuan(stats.withdraw_success_cents) : '-'}
@@ -172,29 +174,51 @@ export default function UserRewardPanel({ userId, user }: Props) {
<Descriptions.Item label="现金余额">
{stats ? yuan(stats.cash_balance_cents) : '-'}
</Descriptions.Item>
<Descriptions.Item label="提现总次数">{stats?.withdraw_total ?? '-'}</Descriptions.Item>
<Descriptions.Item label="传统任务提现">
{stats ? yuan(stats.traditional_task_cash_cents) : '-'}
</Descriptions.Item>
<Descriptions.Item label="累计激励视频数">
{stats?.reward_video_count ?? '-'}
</Descriptions.Item>
<Descriptions.Item label="平均激励视频ECPM">
{stats ? `${stats.reward_video_avg_ecpm} 分/千` : '-'}
</Descriptions.Item>
<Descriptions.Item label="激励视频提现">
{stats ? yuan(stats.reward_video_cash_cents) : '-'}
</Descriptions.Item>
<Descriptions.Item label="累计信息流广告数">{stats?.feed_count ?? '-'}</Descriptions.Item>
<Descriptions.Item label="平均信息流广告ECPM">
{stats ? `${stats.feed_avg_ecpm} 分/千` : '-'}
</Descriptions.Item>
<Descriptions.Item label="信息流广告提现">
{stats ? yuan(stats.feed_cash_cents) : '-'}
</Descriptions.Item>
{statsVariant === 'ad' ? (
<>
<Descriptions.Item label="激励视频观看数">
{stats?.reward_video_count ?? '-'}
</Descriptions.Item>
{/* eCPM 均按元展示(reward_video / feed avg_ecpm 原始为分/千次,÷100 转元) */}
<Descriptions.Item label="平均激励视频ECPM">
{stats ? `${(stats.reward_video_avg_ecpm / 100).toFixed(2)} 元/千` : '-'}
</Descriptions.Item>
<Descriptions.Item label="draw信息流视频观看数">
{stats?.feed_count ?? '-'}
</Descriptions.Item>
<Descriptions.Item label="平均draw信息流ECPM">
{stats ? `${(stats.feed_avg_ecpm / 100).toFixed(2)} 元/千` : '-'}
</Descriptions.Item>
</>
) : (
<>
<Descriptions.Item label="提现总次数">{stats?.withdraw_total ?? '-'}</Descriptions.Item>
<Descriptions.Item label="传统任务提现">
{stats ? yuan(stats.traditional_task_cash_cents) : '-'}
</Descriptions.Item>
<Descriptions.Item label="累计激励视频数">
{stats?.reward_video_count ?? '-'}
</Descriptions.Item>
<Descriptions.Item label="平均激励视频ECPM">
{stats ? `${stats.reward_video_avg_ecpm} 分/千` : '-'}
</Descriptions.Item>
<Descriptions.Item label="激励视频提现">
{stats ? yuan(stats.reward_video_cash_cents) : '-'}
</Descriptions.Item>
<Descriptions.Item label="累计信息流广告数">{stats?.feed_count ?? '-'}</Descriptions.Item>
<Descriptions.Item label="平均信息流广告ECPM">
{stats ? `${stats.feed_avg_ecpm} 分/千` : '-'}
</Descriptions.Item>
<Descriptions.Item label="信息流广告提现">
{stats ? yuan(stats.feed_cash_cents) : '-'}
</Descriptions.Item>
</>
)}
</Descriptions>
<Text type="secondary" style={{ fontSize: 12 }}>
(,);eCPM /,
{statsVariant === 'ad'
? '统计随上方时间筛选(现金余额除外,为当前快照);eCPM 均按元展示(原始分/千次 ÷100)。'
: '统计随上方时间筛选(现金余额除外,为当前快照);eCPM 单位分/千次,同金币审计。'}
</Text>
{/* 金币记录 */}
+36 -1
View File
@@ -104,6 +104,19 @@ const SORT_OPTIONS = [
{ value: 'created_at', label: '申请时间' },
{ value: 'amount_cents', label: '提现金额' },
];
// 提现类型:coin_cash=福利页提现(金币兑换现金) / invite_cash=邀请提现(邀请奖励金)
const SOURCE_LABEL: Record<string, string> = {
coin_cash: '福利页提现',
invite_cash: '邀请提现',
};
const SOURCE_COLOR: Record<string, string> = {
coin_cash: 'blue',
invite_cash: 'purple',
};
const SOURCE_OPTIONS = [
{ value: 'coin_cash', label: '福利页提现' },
{ value: 'invite_cash', label: '邀请提现' },
];
const DATE_FIELD_OPTIONS = [
{ value: 'created_at', label: '申请时间' },
{ value: 'updated_at', label: '更新时间' },
@@ -184,9 +197,11 @@ export default function WithdrawsPage() {
const [sortBy, setSortBy] = useState<'created_at' | 'amount_cents'>('created_at');
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
const [quickFilter, setQuickFilter] = useState<string | undefined>(undefined);
const [source, setSource] = useState<string | undefined>(undefined);
const filters: Record<string, unknown> = {};
if (activeStatus !== 'all') filters.status = activeStatus;
if (source) filters.source = source;
if (keyword.trim()) filters.keyword = keyword.trim();
if (dateRange?.[0]) filters.date_from = dateRange[0].startOf('day').toISOString();
if (dateRange?.[1]) filters.date_to = dateRange[1].endOf('day').toISOString();
@@ -211,6 +226,7 @@ export default function WithdrawsPage() {
setSortBy('created_at');
setSortOrder('desc');
setQuickFilter(undefined);
setSource(undefined);
};
const applyQuickFilter = (value?: string) => {
@@ -481,6 +497,12 @@ export default function WithdrawsPage() {
width: 120,
render: (v: number) => <Text strong>{yuan(v)}</Text>,
},
{
title: '提现类型',
dataIndex: 'source',
width: 110,
render: (v: string) => <Tag color={SOURCE_COLOR[v] || 'default'}>{SOURCE_LABEL[v] || v}</Tag>,
},
{
title: '累计提现',
dataIndex: 'cumulative_success_cents',
@@ -724,6 +746,14 @@ export default function WithdrawsPage() {
}}
onSearch={(value) => setKeyword(value.trim())}
/>
<Select
value={source}
allowClear
placeholder="提现类型"
style={{ width: 140 }}
options={SOURCE_OPTIONS}
onChange={(value?: string) => setSource(value)}
/>
<Select
value={quickFilter}
allowClear
@@ -849,7 +879,7 @@ export default function WithdrawsPage() {
showTotal: (t) => `${t}`,
onChange: onPageChange,
}}
scroll={{ x: 1350 }}
scroll={{ x: 1460 }}
onRow={(record) => ({
onClick: () => openDetail(record),
style: { cursor: 'pointer' },
@@ -881,6 +911,11 @@ export default function WithdrawsPage() {
<Descriptions.Item label="金额">
<Text strong>{yuan(detail.order.amount_cents)}</Text>
</Descriptions.Item>
<Descriptions.Item label="提现类型">
<Tag color={SOURCE_COLOR[detail.order.source] || 'default'}>
{SOURCE_LABEL[detail.order.source] || detail.order.source}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="提现实名">
{detail.order.user_name || '-'}
</Descriptions.Item>
+42 -23
View File
@@ -3,7 +3,7 @@
// 调金币 / 调现金弹窗(受控)。列表页与用户详情页共用,避免两处各写一套。
// 每个弹窗自带「增减 / 设为指定值」两种模式;打开时拉一次 360 概览展示当前余额。
import { useEffect, useState } from 'react';
import { App, Form, Input, InputNumber, Modal, Segmented } from 'antd';
import { App, Form, Input, InputNumber, Modal, Radio, Segmented } from 'antd';
import { api, errMsg } from '@/lib/api';
import { yuan } from '@/lib/format';
import type { UserOverview } from '@/lib/types';
@@ -17,15 +17,19 @@ interface ModalProps {
onDone?: () => void; // 调整成功后回调(刷新余额/列表)
}
const balanceLine = (balances: { coin: number; cashCents: number } | null) => (
type Balances = { coin: number; cashCents: number; inviteCashCents: number };
const balanceLine = (balances: Balances | null) => (
<p style={{ color: '#888', marginBottom: 12 }}>
当前余额:金币 {balances ? balances.coin : '…'} {balances ? yuan(balances.cashCents) : ''}
当前余额:金币 {balances ? balances.coin : '…'} (){' '}
{balances ? yuan(balances.cashCents) : '…'} {' '}
{balances ? yuan(balances.inviteCashCents) : '…'}
</p>
);
// 弹窗打开时拉一次该用户余额;用户切换/关闭时丢弃过期响应(alive 标记防竞态)。
function useBalances(userId: number | undefined, open: boolean) {
const [balances, setBalances] = useState<{ coin: number; cashCents: number } | null>(null);
const [balances, setBalances] = useState<Balances | null>(null);
useEffect(() => {
if (!open || userId == null) {
setBalances(null);
@@ -36,7 +40,12 @@ function useBalances(userId: number | undefined, open: boolean) {
api
.get<UserOverview>(`/admin/api/users/${userId}`)
.then((r) => {
if (alive) setBalances({ coin: r.data.coin_balance, cashCents: r.data.cash_balance_cents });
if (alive)
setBalances({
coin: r.data.coin_balance,
cashCents: r.data.cash_balance_cents,
inviteCashCents: r.data.invite_cash_balance_cents,
});
})
.catch(() => {});
return () => {
@@ -113,39 +122,39 @@ export function AdjustCoinModal({ user, open, onClose, onDone }: ModalProps) {
export function AdjustCashModal({ user, open, onClose, onDone }: ModalProps) {
const { message } = App.useApp();
const [form] = Form.useForm();
const [mode, setMode] = useState<'delta' | 'set'>('delta');
// 操作方式改为表单必选项(无默认、手动选);用 watch 驱动金额栏文案/最小值
const mode = Form.useWatch('mode', form) as 'delta' | 'set' | undefined;
const balances = useBalances(user?.id, open);
useEffect(() => {
if (open) {
setMode('delta');
form.resetFields();
}
if (open) form.resetFields(); // 目标账户 / 操作方式 都重置为「未选」
}, [open, form]);
// 输入元,×100 转分后调后端(主要给无现金用户发钱直接测试提现)
const submit = async () => {
if (!user) return;
const v = await form.validateFields();
const v = await form.validateFields(); // 任一必填/必选缺失 → 该项下方红字 + 阻断提交
const amountCents = Math.round(Number(v.amount_yuan) * 100);
if (mode === 'delta' && amountCents === 0) {
if (v.mode === 'delta' && amountCents === 0) {
message.warning('金额不能为 0(且不小于 1 分)');
return;
}
if (mode === 'set' && amountCents < 0) {
if (v.mode === 'set' && amountCents < 0) {
message.warning('目标金额不能为负');
return;
}
const acctName = v.account === 'invite_cash' ? '邀请奖励金' : '现金';
try {
await api.post(`/admin/api/users/${user.id}/cash`, {
mode,
account: v.account,
mode: v.mode,
amount_cents: amountCents,
reason: v.reason,
});
message.success(
mode === 'set'
? `已设为 ¥${(amountCents / 100).toFixed(2)} 现金`
: `${amountCents > 0 ? '发放' : '扣减'} ¥${(Math.abs(amountCents) / 100).toFixed(2)} 现金`,
v.mode === 'set'
? `已设为 ¥${(amountCents / 100).toFixed(2)} ${acctName}`
: `${amountCents > 0 ? '发放' : '扣减'} ¥${(Math.abs(amountCents) / 100).toFixed(2)} ${acctName}`,
);
onClose();
onDone?.();
@@ -164,10 +173,20 @@ export function AdjustCashModal({ user, open, onClose, onDone }: ModalProps) {
>
{balanceLine(balances)}
<Form form={form} layout="vertical">
<Form.Item label="操作方式">
<Segmented
value={mode}
onChange={(v) => setMode(v as 'delta' | 'set')}
<Form.Item name="account" label="目标账户" rules={[{ required: true, message: '请选择目标账户' }]}>
<Radio.Group
optionType="button"
buttonStyle="solid"
options={[
{ label: '金币兑现金账户', value: 'coin_cash' },
{ label: '邀请账户', value: 'invite_cash' },
]}
/>
</Form.Item>
<Form.Item name="mode" label="操作方式" rules={[{ required: true, message: '请选择操作方式' }]}>
<Radio.Group
optionType="button"
buttonStyle="solid"
options={[
{ label: '增减', value: 'delta' },
{ label: '设为指定值', value: 'set' },
@@ -182,7 +201,7 @@ export function AdjustCashModal({ user, open, onClose, onDone }: ModalProps) {
: '现金变动(元,正=发放,负=扣减;不可扣成负)'
}
rules={[
{ required: true },
{ required: true, message: '请输入现金变动金额' },
...(mode === 'set' ? [{ type: 'number' as const, min: 0, message: '目标值不能为负' }] : []),
]}
>
@@ -194,7 +213,7 @@ export function AdjustCashModal({ user, open, onClose, onDone }: ModalProps) {
min={mode === 'set' ? 0 : undefined}
/>
</Form.Item>
<Form.Item name="reason" label="原因(入审计)" rules={[{ required: true }]}>
<Form.Item name="reason" label="原因(入审计)" rules={[{ required: true, message: '请填写原因' }]}>
<Input.TextArea rows={2} />
</Form.Item>
</Form>
+3 -1
View File
@@ -21,6 +21,7 @@ interface Props<T> {
countLabel: string; // 顶部计数卡标题,如「提交总计」/「上报总计」
rewardLabel: string; // 顶部奖励卡标题,如「提交奖励总计」/「上报奖励总计」
rewardOf: (item: T) => number; // 单条已发奖励金币(未采纳/未通过返回 0)
rewardSuffix?: string; // 第二个汇总卡单位,默认「金币」;领券场景可传「张」(领到券张数)等
}
export default function UserRecordsDrawer<T extends { id: number }>({
@@ -34,6 +35,7 @@ export default function UserRecordsDrawer<T extends { id: number }>({
countLabel,
rewardLabel,
rewardOf,
rewardSuffix = '金币',
}: Props<T>) {
const [items, setItems] = useState<T[]>([]);
const [total, setTotal] = useState(0);
@@ -91,7 +93,7 @@ export default function UserRecordsDrawer<T extends { id: number }>({
<>
<Space size={48} style={{ marginBottom: 20 }}>
<Statistic title={countLabel} value={total} />
<Statistic title={rewardLabel} value={rewardTotal} suffix="金币" />
<Statistic title={rewardLabel} value={rewardTotal} suffix={rewardSuffix} />
</Space>
{items.length === 0 ? (
<Empty description={`该用户暂无${recordLabel}`} style={{ marginTop: 24 }} />
+17 -1
View File
@@ -81,6 +81,7 @@ export interface UserOverview {
user: UserListItem;
coin_balance: number;
cash_balance_cents: number;
invite_cash_balance_cents: number; // 邀请奖励金余额(与 cash_balance_cents 物理隔离)
total_coin_earned: number;
comparison_total: number;
comparison_success: number;
@@ -116,6 +117,8 @@ export interface WithdrawOrder {
user_id: number;
out_bill_no: string;
amount_cents: number;
// 提现类型:coin_cash(福利页提现,金币兑换现金) / invite_cash(邀请提现,邀请奖励金)
source: string;
user_name: string | null;
status: string; // reviewing / pending / success / failed / rejected
wechat_state: string | null;
@@ -238,12 +241,17 @@ export interface Feedback {
user_id: number;
content: string;
contact: string;
// 反馈来源入口:profile(「我的」页=普通反馈) / comparison(比价结果页=比价反馈)
source: string;
// 比价反馈的问题场景(找错商品/优惠不对…);普通反馈为 null
scene: string | null;
images: string[] | null;
// pending(审核中) / adopted(已采纳) / rejected(未采纳);历史数据可能为 new
status: string;
reject_reason: string | null; // 未采纳原因(用户端可见)
reward_coins: number | null; // 采纳后发放金币
review_note: string | null; // 审核批注(采纳要点 / 内部备注)
review_note: string | null; // 审核批注(采纳要点 / 内部备注,用户不可见)
admin_reply: string | null; // 运营给用户的回复留言(用户端可见)
reviewed_by_admin_id: number | null;
reviewed_at: string | null;
created_at: string;
@@ -424,6 +432,7 @@ export interface AdRevenueRow {
impressions: number; // 本行展示条数 1/0(供日汇总、趋势图复用)
ecpm: string | null; // 分/千次;展示行取展示值,纯发奖行取发奖采用值
revenue_yuan: number; // 本次展示预估收益(元);纯发奖行=0
row_revenue_yuan?: number | null; // 主表逐行显示用:一次比价/领券聚合行=该次发奖广告 eCPM 折算之和;其它行空(回退 revenue_yuan)
adn: string | null; // 实际填充 ADN;纯发奖行为空
slot_id: string | null; // 底层 mediation rit;纯发奖行为空
// ── 发奖侧 ──
@@ -433,6 +442,8 @@ export interface AdRevenueRow {
actual_coin: number; // 实发金币;纯展示=0
matched: boolean; // 本条应发==实发;纯展示恒 true(不计对账)
reward_detail: AdRevenueRecord | null; // 发奖复算明细(点行展开下钻);纯展示为空
sub_rewards?: AdRevenueRecord[]; // 一次比价/领券聚合行的组内逐条明细(同整场 ad_session_id 的多条广告);展开渲染多行
sub_count?: number; // 本行聚合的发奖条数:一次比价/领券=该次广告条数(≥1);激励视频/纯展示=1
}
export interface AdRevenueReport {
@@ -536,6 +547,11 @@ export interface DashboardOverview {
meituan_miss_count: number;
meituan_unknown_rate_count: number;
meituan_hit_rate: number | null;
jd_order_count?: number;
jd_commission_cents?: number;
jd_actual_commission_cents?: number;
jd_estimated_commission_cents?: number;
jd_invalid_count?: number;
};
}