Compare commits

..

1 Commits

Author SHA1 Message Date
zzhyyyyy ea6aca18fc feat(ad-revenue): 收益报表分页、eCPM 元列、场景筛选与逐行展开
- 列:eCPM 新增「元」列;广告位ID 移到「一致」列后。
- 分页:「每页条数」接后端 offset 真分页,可翻页看当前筛选下全部数据(原仅展示截断的前 N 条)。
- 场景:「场景」下推后端作为全局筛选(随查询生效,同时影响明细/合计/趋势),移除前端仅过滤当前数据的旧逻辑与过时提示。
- 趋势:按小时趋势改用后端全量 hourly,不受分页影响。
- 展开:明细表每行左侧都有展开号——发奖行看金币复算因子,纯展示行看展示明细(eCPM/收益/ADN/底层rit/代码位/来源)。
- 文案:修正金币规则弹窗「信息流每满10秒折1条」→「一条广告=1条」。
- types 新增 AdRevenueHourly + hourly 字段。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-27 16:25:25 +08:00
7 changed files with 177 additions and 1876 deletions
+40 -206
View File
@@ -20,7 +20,6 @@ import {
Statistic,
Table,
Tag,
Tooltip,
Typography,
} from 'antd';
import {
@@ -38,7 +37,6 @@ import type {
AdRevenueRecord,
AdRevenueReport,
AdRevenueRow,
AdRevenueTypeStat,
} from '@/lib/types';
const { RangePicker } = DatePicker;
@@ -139,21 +137,18 @@ const DETAIL_COLUMNS: ColumnsType<AdRevenueRecord> = [
},
];
// 趋势图(纯 SVG,零依赖):柱=展示条数(左轴),线=客户端预估收益元(右轴),
// 绿线=穿山甲后台预估收益元(右轴,仅按天且有数据时出现)。x 轴按传入点序。
// 趋势图(纯 SVG,零依赖):柱=展示条数(左轴),线=预估收益元(右轴)。x 轴按传入点序。
const CHART_BAR = '#69b1ff';
const CHART_LINE = '#fa8c16';
const CHART_LINE2 = '#52c41a'; // 穿山甲后台收益线
interface TrendPoint {
label: string; // x 轴刻度文案(小时数 / MM-DD)
tip: string; // hover 原生 tooltip 全文
impressions: number;
revenue: number;
pangleRevenue: number | null; // 穿山甲后台预估收益(元);无则 null(不画绿线点)
}
// 按小时聚合(023),数据源是 hourly(后端全量聚合,不受分页影响)。穿山甲为天级,小时视图无该线。
// 按小时聚合(023),数据源是 hourly(后端全量聚合,不受分页影响)
function aggregateHourly(rows: AdRevenueHourly[]): TrendPoint[] {
const byHour = Array.from({ length: 24 }, (_, h) => ({ hour: h, impressions: 0, revenue: 0 }));
for (const r of rows) {
@@ -166,12 +161,10 @@ function aggregateHourly(rows: AdRevenueHourly[]): TrendPoint[] {
tip: `${String(b.hour).padStart(2, '0')}:00 展示 ${b.impressions} 条 · 预估收益 ${b.revenue.toFixed(4)}`,
impressions: b.impressions,
revenue: b.revenue,
pangleRevenue: null,
}));
}
// 按天聚合,数据源是 daily(全量,不受 limit 影响);用 from..to 补齐空缺日为 0,轴连续
// 穿山甲收益(pangle_revenue_yuan)为 null 时该日不画绿线点(T+1 未出/非全量视图)。
// 按天聚合,数据源是 daily(全量,不受 limit 影响);用 from..to 补齐空缺日为 0,轴连续
function aggregateDaily(dateFrom: string, dateTo: string, daily: AdRevenueDaily[]): TrendPoint[] {
const map = new Map(daily.map((d) => [d.date, d]));
const out: TrendPoint[] = [];
@@ -182,14 +175,11 @@ function aggregateDaily(dateFrom: string, dateTo: string, daily: AdRevenueDaily[
const d = map.get(ds);
const impressions = d?.impressions ?? 0;
const revenue = d?.revenue_yuan ?? 0;
const pangleRevenue = d?.pangle_revenue_yuan ?? null;
const pangleTip = pangleRevenue != null ? ` · 穿山甲收益 ${pangleRevenue.toFixed(4)}` : '';
out.push({
label: ds.slice(5),
tip: `${ds} 展示 ${impressions} 条 · 预估收益 ${revenue.toFixed(4)}${pangleTip}`,
tip: `${ds} 展示 ${impressions} 条 · 预估收益 ${revenue.toFixed(4)}`,
impressions,
revenue,
pangleRevenue,
});
cur = cur.add(1, 'day');
guard += 1;
@@ -200,11 +190,7 @@ function aggregateDaily(dateFrom: string, dateTo: string, daily: AdRevenueDaily[
function TrendChart({ points }: { points: TrendPoint[] }) {
const n = points.length;
const maxImp = Math.max(1, ...points.map((p) => p.impressions));
const maxRev = Math.max(
1e-9,
...points.map((p) => p.revenue),
...points.map((p) => p.pangleRevenue ?? 0),
);
const maxRev = Math.max(1e-9, ...points.map((p) => p.revenue));
const W = 960;
const H = 280;
@@ -260,24 +246,6 @@ function TrendChart({ points }: { points: TrendPoint[] }) {
<title>{p.tip}</title>
</circle>
))}
{/* 穿山甲后台收益线(绿,仅非 null 的天画;按天且已同步 T+1 数据时出现) */}
{(() => {
const pp = points
.map((p, i) => ({ i, v: p.pangleRevenue, tip: p.tip }))
.filter((x): x is { i: number; v: number; tip: string } => x.v != null);
if (pp.length === 0) return null;
const pangleLine = pp.map((x) => `${cx(x.i)},${revY(x.v)}`).join(' ');
return (
<g>
<polyline points={pangleLine} fill="none" stroke={CHART_LINE2} strokeWidth={2} />
{pp.map((x) => (
<circle key={`p-${x.i}`} cx={cx(x.i)} cy={revY(x.v)} r={2.5} fill={CHART_LINE2}>
<title>{x.tip}</title>
</circle>
))}
</g>
);
})()}
{points.map((p, i) =>
i % labelEvery === 0 || i === n - 1 ? (
<text key={i} x={cx(i)} y={H - 14} textAnchor="middle" fontSize={11} fill="#999">
@@ -300,7 +268,6 @@ export default function AdRevenueReportPage() {
// 「场景」作为后端全局筛选(feed_scene):同时影响明细 / 合计 / 趋势,与「用户 / 类型」一致,点「查询」生效。
const [scene, setScene] = useState<string | undefined>();
const [granularity, setGranularity] = useState<'day' | 'hour'>('day');
const [sortBy, setSortBy] = useState<'time' | 'ecpm'>('time'); // 明细排序:time=时间倒序 / ecpm=eCPM 倒序
const [limit, setLimit] = useState<number>(500); // 每页条数(分页大小)
const [page, setPage] = useState<number>(1); // 当前页码(后端分页;1 起)
const [queriedGranularity, setQueriedGranularity] = useState<'day' | 'hour'>('day'); // 本次结果对应的粒度,决定是否显示「小时」列
@@ -315,7 +282,7 @@ export default function AdRevenueReportPage() {
// load(目标页, 每页条数):分页与筛选都经它。offset 由 页码×每页 算;场景(feed_scene)随筛选下推后端。
const load = useCallback(
async (targetPage = 1, targetLimit = limit, targetSort = sortBy) => {
async (targetPage = 1, targetLimit = limit) => {
const from = range[0].format('YYYY-MM-DD');
const to = range[1].format('YYYY-MM-DD');
const multiDay = from !== to;
@@ -332,7 +299,6 @@ export default function AdRevenueReportPage() {
granularity: gran,
limit: targetLimit,
offset: (targetPage - 1) * targetLimit,
sort: targetSort,
},
});
setData(res.data);
@@ -346,7 +312,7 @@ export default function AdRevenueReportPage() {
setLoading(false);
}
},
[range, userId, adType, scene, granularity, limit, sortBy],
[range, userId, adType, scene, granularity, limit],
);
useEffect(() => {
@@ -484,11 +450,14 @@ export default function AdRevenueReportPage() {
},
];
// 派生指标(全部基于全量 total_* 字段,不受分页影响,准):
// 发奖成本(元)= 实发金币÷汇率;预估毛利 = 收益−发奖成本;发奖占收益比 = 发奖成本÷收益;
// 应发实发差额(金币)= 应发−实发(正=少发/负=多发);ARPU = 预估收益÷今日DAU(仅今日)
// 派生指标(全部基于全量 total_* 字段,不受 limit 截断影响,准):
// 平均 eCPM = 收益÷展示×1000;发奖成本(元)= 实发金币÷汇率;预估毛利 = 收益−发奖成本;
// 发奖占收益比 = 发奖成本÷收益;应发实发差额(金币)= 应发−实发(正=少发/负=多发)。
const derived = data
? {
avgEcpm: data.total_impressions
? (data.total_revenue_yuan / data.total_impressions) * 1000
: 0,
payoutYuan: data.total_actual_coin / COIN_PER_YUAN,
grossProfit: data.total_revenue_yuan - data.total_actual_coin / COIN_PER_YUAN,
payoutRatioPct:
@@ -496,17 +465,9 @@ export default function AdRevenueReportPage() {
? (data.total_actual_coin / COIN_PER_YUAN / data.total_revenue_yuan) * 100
: null,
coinGap: data.total_expected_coin - data.total_actual_coin,
// ARPU(今日)= 预估广告收益 ÷ 今日 DAU;dau 为 null(历史/多天)或 0 时不可算 → null,前端显示「-」。
arpu: data.dau && data.dau > 0 ? data.total_revenue_yuan / data.dau : null,
}
: null;
// 第二行大盘「分广告类型」:draw / 激励视频 各自 收益 / eCPM / 展示条数;eCPM = 收益÷展示×1000。
const drawStat = data?.type_stats?.draw;
const rvStat = data?.type_stats?.reward_video;
const ecpmOf = (s?: AdRevenueTypeStat) =>
s && s.impressions > 0 ? (s.revenue_yuan / s.impressions) * 1000 : 0;
// 明细直接用后端返回的当前页 items(「场景」已由后端 feed_scene 全局过滤,前端不再二次筛)。
const items = data?.items ?? [];
@@ -530,11 +491,6 @@ export default function AdRevenueReportPage() {
广(onAdShow) eCPM ( ÷1000
),<b>广</b>;穿/,,
<b>穿</b> 0广ID / ,
<br />
<br />
<b>穿(T+1)</b>穿 GroMore API(,):
<b>穿</b>= revenue<b>API</b>= ADN 穿//,
<b></b>(//);,
</div>
}
>
@@ -613,21 +569,6 @@ export default function AdRevenueReportPage() {
]}
/>
</Space>
<Space size={6}>
<Typography.Text type="secondary"></Typography.Text>
<Select
value={sortBy}
onChange={(v) => {
setSortBy(v);
load(1, limit, v); // 改排序:回第 1 页并重查
}}
style={{ width: 130 }}
options={[
{ value: 'time', label: '时间倒序' },
{ value: 'ecpm', label: 'eCPM 倒序' },
]}
/>
</Space>
<Space size={6}>
<Typography.Text type="secondary"></Typography.Text>
<Select
@@ -650,46 +591,41 @@ export default function AdRevenueReportPage() {
<Card size="small" style={{ marginBottom: 16 }}>
<Divider orientation="left" plain style={{ marginTop: 0, marginBottom: 16 }}>
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
广
</Typography.Text>
</Divider>
<Row gutter={[16, 12]}>
<Col flex="1 1 0">
<Col span={6}>
<Statistic title="展示条数合计" value={data.total_impressions} />
</Col>
<Col span={6}>
<Statistic title="平均 eCPM(元/千次)" value={derived.avgEcpm} precision={2} />
</Col>
<Col span={6}>
<Statistic title="预估收益合计(元)" value={data.total_revenue_yuan} precision={4} />
</Col>
<Col flex="1 1 0">
<Statistic
title={
<Tooltip title="每活跃用户广告预估收入 = 预估收益 ÷ 今日 DAU;DAU 仅今日口径,历史/多天显示 -">
<span>
ARPU()
<InfoCircleOutlined style={{ marginLeft: 4 }} />
</span>
</Tooltip>
}
value={derived.arpu ?? '-'}
precision={4}
/>
<Col span={6}>
<Statistic title="广告事件数" value={data.total} />
</Col>
<Col flex="1 1 0">
<Statistic
title={
<Tooltip title="今日活跃用户(复用大盘口径 last_login_at = 今日登录过);仅查询=今日时有值,历史/多天显示 -">
<span>
DAU
<InfoCircleOutlined style={{ marginLeft: 4 }} />
</span>
</Tooltip>
}
value={data.dau ?? '-'}
/>
</Row>
<Divider orientation="left" plain style={{ marginTop: 20, marginBottom: 16 }}>
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
</Typography.Text>
</Divider>
<Row gutter={[16, 12]}>
<Col span={6}>
<Statistic title="应发金币合计" value={data.total_expected_coin} />
</Col>
<Col flex="1 1 0">
<Statistic title="发金币合计(元)" value={derived.payoutYuan} precision={4} />
<Col span={6}>
<Statistic title="发金币合计" value={data.total_actual_coin} />
</Col>
<Col flex="1 1 0">
<Col span={6}>
<Statistic title="发奖成本(元)" value={derived.payoutYuan} precision={4} />
</Col>
<Col span={6}>
<Statistic
title="预估广告毛利(元)"
title="预估毛利(元)"
value={derived.grossProfit}
precision={4}
prefix={derived.grossProfit >= 0 ? <RiseOutlined /> : <FallOutlined />}
@@ -701,94 +637,6 @@ export default function AdRevenueReportPage() {
</Typography.Text>
</Col>
</Row>
<Divider orientation="left" plain style={{ marginTop: 20, marginBottom: 16 }}>
<Tooltip title="来自穿山甲 GroMore 数据 API(后台结算口径,T+1 次日出数)。穿山甲不提供分用户/类型/场景维度,故仅在「全量视图」(未按用户/类型/场景筛选)展示;按代码位×应用×日期汇总。revenue=预估收益、收益API=各 ADN 回传更接近结算。">
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
穿(T+1)
<InfoCircleOutlined style={{ marginLeft: 4 }} />
</Typography.Text>
</Tooltip>
</Divider>
{data.pangle_revenue_available ? (
<Row gutter={[16, 12]}>
<Col flex="1 1 0">
<Statistic
title="穿山甲预估收益(元)"
value={data.total_pangle_revenue_yuan ?? 0}
precision={4}
/>
</Col>
<Col flex="1 1 0">
<Statistic
title="穿山甲收益API(元)"
value={data.total_pangle_api_revenue_yuan ?? '-'}
precision={data.total_pangle_api_revenue_yuan == null ? undefined : 4}
/>
{data.total_pangle_api_revenue_yuan == null && (
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
Reporting /
</Typography.Text>
)}
</Col>
<Col flex="1 1 0">
<Statistic
title={
<Tooltip title="客户端预估相对穿山甲预估的高估幅度 =(客户端预估 − 穿山甲预估)÷ 穿山甲预估;客户端按 onAdShow 计、不滤无效曝光,通常偏高">
<span>
<InfoCircleOutlined style={{ marginLeft: 4 }} />
</span>
</Tooltip>
}
value={
data.total_pangle_revenue_yuan && data.total_pangle_revenue_yuan > 0
? ((data.total_revenue_yuan - data.total_pangle_revenue_yuan) /
data.total_pangle_revenue_yuan) *
100
: '-'
}
precision={
data.total_pangle_revenue_yuan && data.total_pangle_revenue_yuan > 0
? 1
: undefined
}
suffix={
data.total_pangle_revenue_yuan && data.total_pangle_revenue_yuan > 0 ? '%' : ''
}
/>
</Col>
</Row>
) : (
<Typography.Text type="secondary" style={{ fontSize: 13 }}>
本视图无穿山甲后台收益:(//)
穿 T+1 , <Typography.Text code>scripts/sync_pangle_revenue</Typography.Text>
</Typography.Text>
)}
<Divider orientation="left" plain style={{ marginTop: 20, marginBottom: 16 }}>
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
广
</Typography.Text>
</Divider>
<Row gutter={[16, 12]}>
<Col span={4}>
<Statistic title="Draw 信息流收益(元)" value={drawStat?.revenue_yuan ?? 0} precision={4} />
</Col>
<Col span={4}>
<Statistic title="Draw 信息流 eCPM(元/千次)" value={ecpmOf(drawStat)} precision={2} />
</Col>
<Col span={4}>
<Statistic title="Draw 信息流条数" value={drawStat?.impressions ?? 0} />
</Col>
<Col span={4}>
<Statistic title="激励视频收益(元)" value={rvStat?.revenue_yuan ?? 0} precision={4} />
</Col>
<Col span={4}>
<Statistic title="激励视频 eCPM(元/千次)" value={ecpmOf(rvStat)} precision={2} />
</Col>
<Col span={4}>
<Statistic title="激励视频条数" value={rvStat?.impressions ?? 0} />
</Col>
</Row>
</Card>
)}
@@ -841,22 +689,8 @@ export default function AdRevenueReportPage() {
verticalAlign: 'middle',
}}
/>
()
()
</span>
{queriedMultiDay && (
<span style={{ fontSize: 12, color: '#666' }}>
<span
style={{
display: 'inline-block',
width: 14,
borderTop: `2px solid ${CHART_LINE2}`,
marginRight: 4,
verticalAlign: 'middle',
}}
/>
穿()
</span>
)}
</Space>
}
>
+61 -77
View File
@@ -1,10 +1,8 @@
'use client';
import { useEffect, useState } from 'react';
import { App, Button, Card, Input, InputNumber, Space, Spin, Switch, Tabs, Tag, Tooltip } from 'antd';
import { App, Button, Card, Input, InputNumber, Space, Spin, Switch, Tag, Tooltip } from 'antd';
import { api, errMsg } from '@/lib/api';
import HomeMarqueeSeeds from './HomeMarqueeSeeds';
import HomeStatsConfig from './HomeStatsConfig';
interface ConfigItem {
key: string;
@@ -82,66 +80,9 @@ export default function ConfigPage() {
}
};
if (loading) return <Spin style={{ display: 'block', marginTop: 80 }} />;
const groups = [...new Set(items.map((i) => i.group))];
const welfareConfig = loading ? (
<Spin style={{ display: 'block', marginTop: 24 }} />
) : (
groups.map((g) => (
<Card key={g} title={g} size="small" style={{ marginBottom: 16 }}>
{items
.filter((i) => i.group === g)
.map((item) => (
<div
key={item.key}
style={{ marginBottom: 12, paddingBottom: 12, borderBottom: '1px solid #f0f0f0' }}
>
<div style={{ marginBottom: 4 }}>
<b>{item.label}</b> {item.overridden ? <Tag color="blue"></Tag> : <Tag></Tag>}
{item.help && (
<Tooltip title={item.help}>
<span style={{ color: '#999', marginLeft: 6, fontSize: 12, cursor: 'help' }}>
</span>
</Tooltip>
)}
</div>
<Space wrap>
{item.type === 'bool' ? (
<Switch
checked={!!edits[item.key]}
onChange={(v) => setEdits({ ...edits, [item.key]: v })}
/>
) : item.type === 'int' ? (
<InputNumber
value={edits[item.key]}
onChange={(v) => setEdits({ ...edits, [item.key]: v })}
style={{ width: 180 }}
/>
) : (
<Input
value={edits[item.key]}
onChange={(e) => setEdits({ ...edits, [item.key]: e.target.value })}
style={{ width: 380 }}
placeholder={
item.type === 'int_list' ? '逗号分隔,如 10, 20, 30' : 'JSON,如 {"key": 100}'
}
/>
)}
<Button
type="primary"
size="small"
loading={saving === item.key}
onClick={() => save(item)}
>
</Button>
<span style={{ color: '#bbb', fontSize: 12 }}> {JSON.stringify(item.default)}</span>
</Space>
</div>
))}
</Card>
))
);
return (
<div>
@@ -149,21 +90,64 @@ export default function ConfigPage() {
<p style={{ color: '#999' }}>
() / ,
</p>
<Tabs
items={[
{
key: 'home',
label: '首页',
children: (
<>
<HomeStatsConfig />
<HomeMarqueeSeeds />
</>
),
},
{ key: 'welfare', label: '福利页', children: welfareConfig },
]}
/>
{groups.map((g) => (
<Card key={g} title={g} size="small" style={{ marginBottom: 16 }}>
{items
.filter((i) => i.group === g)
.map((item) => (
<div
key={item.key}
style={{ marginBottom: 12, paddingBottom: 12, borderBottom: '1px solid #f0f0f0' }}
>
<div style={{ marginBottom: 4 }}>
<b>{item.label}</b>{' '}
{item.overridden ? <Tag color="blue"></Tag> : <Tag></Tag>}
{item.help && (
<Tooltip title={item.help}>
<span style={{ color: '#999', marginLeft: 6, fontSize: 12, cursor: 'help' }}>
</span>
</Tooltip>
)}
</div>
<Space wrap>
{item.type === 'bool' ? (
<Switch
checked={!!edits[item.key]}
onChange={(v) => setEdits({ ...edits, [item.key]: v })}
/>
) : item.type === 'int' ? (
<InputNumber
value={edits[item.key]}
onChange={(v) => setEdits({ ...edits, [item.key]: v })}
style={{ width: 180 }}
/>
) : (
<Input
value={edits[item.key]}
onChange={(e) => setEdits({ ...edits, [item.key]: e.target.value })}
style={{ width: 380 }}
placeholder={
item.type === 'int_list' ? '逗号分隔,如 10, 20, 30' : 'JSON,如 {"key": 100}'
}
/>
)}
<Button
type="primary"
size="small"
loading={saving === item.key}
onClick={() => save(item)}
>
</Button>
<span style={{ color: '#bbb', fontSize: 12 }}>
{JSON.stringify(item.default)}
</span>
</Space>
</div>
))}
</Card>
))}
</div>
);
}
@@ -49,7 +49,7 @@ interface PreviewItem {
const yuan = (cents: number) => (cents / 100).toFixed(2);
/** 首页轮播「种子」管理(真实记录不足时的兜底假数据,现为「生成规则」)。「系统配置 / 首页」里的一个区块。 */
/** 首页轮播「种子」管理(真实记录不足时的兜底假数据,现为「生成规则」)。「数据大盘」页的一个区块。 */
export default function HomeMarqueeSeeds() {
const { message } = App.useApp();
const [seeds, setSeeds] = useState<Seed[]>([]);
@@ -246,7 +246,7 @@ function buildBody(metric: string, e: Edit, immediate: boolean): Record<string,
return body;
}
/** 首页三门面数字(帮助用户/完成比价/累计节省)的展示模式配置。「系统配置 / 首页」里的一个区块。 */
/** 首页三门面数字(帮助用户/完成比价/累计节省)的展示模式配置。作为「数据大盘」页的一个区块。 */
export default function HomeStatsConfig() {
const { message, modal } = App.useApp();
const [items, setItems] = useState<StatItem[]>([]);
File diff suppressed because it is too large Load Diff
+29 -243
View File
@@ -11,6 +11,7 @@ import {
HeartOutlined,
LogoutOutlined,
MessageOutlined,
MobileOutlined,
MoneyCollectOutlined,
NotificationOutlined,
ProfileOutlined,
@@ -19,65 +20,25 @@ import {
TeamOutlined,
UserOutlined,
} from '@ant-design/icons';
import { Avatar, Dropdown, Layout, Tooltip } from 'antd';
import { Avatar, Dropdown, Layout, Menu } from 'antd';
import { clearAuth, getAdmin, getToken } from '@/lib/auth';
import type { AdminInfo } from '@/lib/types';
const { Sider, Header, Content } = Layout;
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: '/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: '用户管理' },
],
},
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: '系统配置' },
{ key: '/admins', icon: <TeamOutlined />, label: '管理员', superOnly: true },
{ key: '/event-logs', icon: <DatabaseOutlined />, label: '埋点日志' },
{ key: '/audit-logs', icon: <FileSearchOutlined />, label: '审计日志' },
@@ -87,7 +48,6 @@ 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()) {
@@ -99,19 +59,14 @@ 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)
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();
@@ -120,15 +75,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
return (
<Layout style={{ minHeight: '100vh' }}>
<Sider
theme="dark"
breakpoint="lg"
collapsible
collapsed={collapsed}
collapsedWidth={72}
width={220}
onCollapse={setCollapsed}
>
<Sider theme="dark" breakpoint="lg" collapsible>
<div
style={{
height: 48,
@@ -141,61 +88,13 @@ export default function MainLayout({ children }: { children: React.ReactNode })
>
</div>
<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>
<Menu
theme="dark"
mode="inline"
selectedKeys={[selectedKey]}
items={items}
onClick={({ key }) => router.push(key)}
/>
</Sider>
<Layout>
<Header
@@ -221,119 +120,6 @@ 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>
);
}
+4 -91
View File
@@ -369,9 +369,7 @@ export interface AdRevenueRecord {
export interface AdRevenueDaily {
date: string; // 北京时间 YYYY-MM-DD
impressions: number;
revenue_yuan: number; // 客户端预估收益(eCPM 折算)
pangle_revenue_yuan: number | null; // 穿山甲后台预估收益(GroMore revenue);非全量视图/无数据为 null
pangle_api_revenue_yuan: number | null; // 穿山甲收益API(更接近结算);未配/当天/无数据为 null
revenue_yuan: number;
expected_coin: number;
actual_coin: number;
}
@@ -385,18 +383,6 @@ export interface AdRevenueHourly {
actual_coin: number;
}
// 广告收益报表:按广告类型(ad_type)的小计(展示条数 + 预估收益;eCPM 前端用 收益÷展示×1000 算)
export interface AdRevenueTypeStat {
impressions: number; // 该类型展示条数合计
revenue_yuan: number; // 该类型预估收益合计(元)
}
export interface AdRevenueTypeBreakdown extends AdRevenueTypeStat {
ad_type: string;
expected_coin: number;
actual_coin: number;
}
// 广告收益报表:一次广告事件(逐条一行)。激励视频展示+发奖按 ad_session_id 合并;信息流展示/发奖各自成行。
export interface AdRevenueRow {
event_key: string; // 事件稳定唯一键(前端 rowKey)
@@ -430,64 +416,16 @@ export interface AdRevenueReport {
date_to: string; // 结束日 北京时间 YYYY-MM-DD(闭区间;单日时与 date_from 相同)
daily: AdRevenueDaily[]; // 按日期汇总序列(全量,供按天趋势图)
hourly: AdRevenueHourly[]; // 按小时汇总序列(全量,供按小时趋势图;按天查询时为空)
type_stats: Record<string, AdRevenueTypeStat>; // 按广告类型小计;前端取 draw / reward_video
dau: number | null; // 今日活跃(复用大盘 last_login_at);仅查询=今日时有值,否则 null
total: number; // 当前筛选下的分页总条数(全量,不受分页影响)
truncated: boolean; // 当前页之后是否还有更多事件(分页后前端不再据此报警)
total_impressions: number;
total_revenue_yuan: number; // 客户端预估收益合计(eCPM 折算)
total_pangle_revenue_yuan: number | null; // 穿山甲后台预估收益合计(GroMore revenue);非全量视图/无数据为 null
total_pangle_api_revenue_yuan: number | null; // 穿山甲收益API合计(更接近结算);未配/当天/非全量视图为 null
pangle_revenue_available: boolean; // 本次结果是否带穿山甲后台收益(全量视图且已同步到数据)
total_revenue_yuan: number;
total_expected_coin: number;
total_actual_coin: number;
mismatch_count: number; // 应发≠实发的发奖条数
by_ad_type?: Record<string, AdRevenueTypeBreakdown>;
items: AdRevenueRow[];
}
export interface DashboardPeriodTrendPoint {
date: string;
active_users: number;
new_users: number;
comparisons: number;
}
export interface DashboardPeriodStats {
date_from: string;
date_to: string;
users: {
new: number;
active: number;
retained_new_users: number;
retention_rate: number | null;
retention_note: string;
};
comparison: {
total: number;
success: number;
success_rate: number;
ordered: number;
average_duration_ms: number | null;
average_saved_cents: number | null;
};
coins: {
granted_total: number;
reward_video_coin_total: number;
feed_ad_coin_total: number;
signin_coin_total: number;
signin_boost_coin_total: number;
task_coin_total: number;
coupon_reward_coin_total: number;
comparison_reward_coin_total: number;
regular_task_coin_total: number;
};
cash: {
withdraw_success_cents: number;
};
trend: DashboardPeriodTrendPoint[];
}
export interface DashboardOverview {
users: {
total: number;
@@ -497,17 +435,7 @@ export interface DashboardOverview {
new_today: number;
dau: number;
};
coins: {
granted_total: number;
reward_video_coin_total?: number;
reward_video_watch_count?: number;
feed_ad_coin_total?: number;
feed_ad_watch_count?: number;
signin_coin_total?: number;
signin_count?: number;
signin_boost_coin_total?: number;
signin_boost_watch_count?: number;
};
coins: { granted_total: number };
cash: {
withdraw_success_cents: number;
withdraw_pending_count: number;
@@ -515,23 +443,8 @@ export interface DashboardOverview {
withdraw_failed_count: number;
};
comparison: { total: number; success: number; success_rate: number };
period: DashboardPeriodStats;
feedback: { new: number };
cps: {
available: boolean;
note: string;
meituan_order_count?: number;
meituan_commission_cents?: number;
meituan_hit_count?: number;
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;
};
cps: { available: boolean; note: string };
}
export interface PriceReport {