xiaokang/lotteryAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

将 AdminRiskPage 改名为 AdminRiskIndexPage，并接入 RiskIndexConsole 组件。

Browse Source
This commit is contained in:
kang
2026-05-11 11:52:53 +08:00
parent 78045de9a3
commit 0103d25426
16 changed files with 1033 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/modules/risk/risk-draw-header.tsx Normal file
View File

@@ -0,0 +1,57 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { getAdminDraw } from "@/api/admin-draws";
import { DrawStatusBadge } from "@/modules/draws/draw-status-badge";
import { LotteryApiBizError } from "@/types/api/errors";
import type { AdminDrawShowData } from "@/types/api/admin-draws";
export function RiskDrawHeader({ drawId }: { drawId: number }) {
const [draw, setDraw] = useState<AdminDrawShowData | null>(null);
const [error, setError] = useState<string | null>(null);
const load = useCallback(async () => {
setError(null);
try {
const d = await getAdminDraw(drawId);
setDraw(d);
} catch (e) {
const msg =
e instanceof LotteryApiBizError ? e.message : "无法加载期号信息";
setError(msg);
setDraw(null);
}
}, [drawId]);
useEffect(() => {
queueMicrotask(() => {
void load();
});
}, [load]);
if (error) {
return <p className="text-sm text-destructive">{error}</p>;
}
if (!draw) {
return <p className="text-sm text-muted-foreground">加载期号…</p>;
}
return (
<div className="mb-4 space-y-1">
<h1 className="text-xl font-semibold tracking-tight">
风控 · 第 {draw.draw_no} 期
</h1>
<p className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
<span>数据库状态</span>
<DrawStatusBadge status={draw.status} />
<span className="text-xs opacity-80">（大厅展示态：{draw.hall_preview_status}）</span>
</p>
<p className="text-xs text-muted-foreground">
产品文档：监控热门号码、售罄与风险占用；数据来自真实下注写入的 `risk_pools` /
`risk_pool_lock_logs`。
</p>
</div>
);
}

101
src/modules/risk/risk-index-console.tsx Normal file
View File

@@ -0,0 +1,101 @@
"use client";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { getAdminDraws } from "@/api/admin-draws";
import { buttonVariants } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { DrawStatusBadge } from "@/modules/draws/draw-status-badge";
import { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
import { cn } from "@/lib/utils";
import { LotteryApiBizError } from "@/types/api/errors";
import type { AdminDrawListData, AdminDrawListItem } from "@/types/api/admin-draws";
export function RiskIndexConsole() {
const formatDt = useAdminDateTimeFormatter();
const [data, setData] = useState<AdminDrawListData | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const load = useCallback(async () => {
setLoading(true);
setError(null);
try {
const d = await getAdminDraws({ page: 1, per_page: 50 });
setData(d);
} catch (e) {
const msg =
e instanceof LotteryApiBizError ? e.message : "加载期号列表失败";
setError(msg);
setData(null);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
queueMicrotask(() => {
void load();
});
}, [load]);
return (
<Card>
<CardHeader>
<CardTitle className="text-lg">风控中心</CardTitle>
<CardDescription>
选择期号进入：风险占用流水、热门号码（按占用比）、售罄列表、单号码风险池详情（实施计划 §13.4）。
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{error ? <p className="text-sm text-destructive">{error}</p> : null}
{loading ? (
<p className="text-sm text-muted-foreground">加载中…</p>
) : (
<div className="overflow-x-auto rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>期号</TableHead>
<TableHead>状态</TableHead>
<TableHead>封盘时间</TableHead>
<TableHead className="text-right">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{(data?.items ?? []).map((row: AdminDrawListItem) => (
<TableRow key={row.id}>
<TableCell className="font-mono font-medium">{row.draw_no}</TableCell>
<TableCell>
<DrawStatusBadge status={row.status} />
</TableCell>
<TableCell className="text-sm text-muted-foreground">
{row.close_time ? formatDt(row.close_time) : "—"}
</TableCell>
<TableCell className="text-right">
<Link
href={`/admin/risk/draws/${row.id}/occupancy`}
className={cn(buttonVariants({ variant: "secondary", size: "sm" }))}
>
进入风控
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)}
</CardContent>
</Card>
);
}

192
src/modules/risk/risk-lock-logs-console.tsx Normal file
View File

@@ -0,0 +1,192 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { getAdminRiskPoolLockLogs } from "@/api/admin-risk";
import { AdminListPaginationFooter } from "@/components/admin/admin-list-pagination-footer";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
import { formatAdminMinorUnits } from "@/lib/money";
import { LotteryApiBizError } from "@/types/api/errors";
import type { AdminRiskLockLogListData, AdminRiskLockLogRow } from "@/types/api/admin-risk";
const ACTION_ALL = "__all__";
export function RiskLockLogsConsole({ drawId }: { drawId: number }) {
const formatDt = useAdminDateTimeFormatter();
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(25);
const [data, setData] = useState<AdminRiskLockLogListData | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [draftNumber, setDraftNumber] = useState("");
const [appliedNumber, setAppliedNumber] = useState("");
const [draftAction, setDraftAction] = useState<string>(ACTION_ALL);
const [appliedAction, setAppliedAction] = useState<string>(ACTION_ALL);
const load = useCallback(async () => {
setLoading(true);
setError(null);
try {
const d = await getAdminRiskPoolLockLogs(drawId, {
page,
per_page: perPage,
normalized_number: appliedNumber.trim() === "" ? undefined : appliedNumber.trim(),
action_type:
appliedAction === ACTION_ALL
? undefined
: (appliedAction as "lock" | "release"),
});
setData(d);
} catch (e) {
const msg =
e instanceof LotteryApiBizError ? e.message : "加载占用流水失败";
setError(msg);
setData(null);
} finally {
setLoading(false);
}
}, [drawId, page, perPage, appliedAction, appliedNumber]);
useEffect(() => {
queueMicrotask(() => {
void load();
});
}, [load]);
return (
<Card>
<CardHeader>
<CardTitle className="text-lg">风险占用流水</CardTitle>
<CardDescription>
每次下注锁定 / 回滚释放写入 `risk_pool_lock_logs`；可按号码与动作筛选（产品文档：后台监控风险占用）。
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid max-w-full gap-3 sm:grid-cols-[minmax(0,8rem)_minmax(0,10rem)_auto] sm:items-end">
<div className="space-y-1.5">
<Label htmlFor="risk-log-number">号码（4 位）</Label>
<Input
id="risk-log-number"
inputMode="numeric"
maxLength={4}
value={draftNumber}
onChange={(e) => setDraftNumber(e.target.value.replace(/\D/g, "").slice(0, 4))}
placeholder="可选"
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="risk-log-action">动作</Label>
<Select
modal={false}
value={draftAction}
onValueChange={(v) => {
if (v) setDraftAction(v);
}}
>
<SelectTrigger id="risk-log-action" size="sm" className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value={ACTION_ALL}>不限</SelectItem>
<SelectItem value="lock">锁定 lock</SelectItem>
<SelectItem value="release">释放 release</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex gap-2 sm:justify-end">
<Button
type="button"
size="sm"
onClick={() => {
setAppliedNumber(draftNumber);
setAppliedAction(draftAction);
setPage(1);
}}
>
应用筛选
</Button>
</div>
</div>
{error ? <p className="text-sm text-destructive">{error}</p> : null}
{loading && !data ? (
<p className="text-sm text-muted-foreground">加载中…</p>
) : (
<>
<div className="overflow-x-auto rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>时间</TableHead>
<TableHead>号码</TableHead>
<TableHead>动作</TableHead>
<TableHead className="text-right">金额</TableHead>
<TableHead>来源</TableHead>
<TableHead>注单号</TableHead>
<TableHead>玩法</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{(data?.items ?? []).map((row: AdminRiskLockLogRow) => (
<TableRow key={row.id}>
<TableCell className="whitespace-nowrap text-xs text-muted-foreground">
{row.created_at ? formatDt(row.created_at) : "—"}
</TableCell>
<TableCell className="font-mono text-sm">{row.normalized_number}</TableCell>
<TableCell className="text-sm">{row.action_type}</TableCell>
<TableCell className="text-right text-sm tabular-nums">
{formatAdminMinorUnits(row.amount)}
</TableCell>
<TableCell className="text-xs text-muted-foreground">
{row.source_reason ?? "—"}
</TableCell>
<TableCell className="font-mono text-xs">{row.ticket_no ?? "—"}</TableCell>
<TableCell className="text-xs">{row.play_code ?? "—"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{data ? (
<AdminListPaginationFooter
selectId={`risk-logs-${drawId}`}
total={data.meta.total}
page={data.meta.current_page}
lastPage={data.meta.last_page}
perPage={data.meta.per_page}
loading={loading}
onPerPageChange={(n) => {
setPerPage(n);
setPage(1);
}}
onPageChange={setPage}
/>
) : null}
</>
)}
</CardContent>
</Card>
);
}

195
src/modules/risk/risk-pool-detail-console.tsx Normal file
View File

@@ -0,0 +1,195 @@
"use client";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { getAdminRiskPoolDetail } from "@/api/admin-risk";
import { AdminListPaginationFooter } from "@/components/admin/admin-list-pagination-footer";
import { buttonVariants } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
import { formatAdminMinorUnits } from "@/lib/money";
import { cn } from "@/lib/utils";
import { LotteryApiBizError } from "@/types/api/errors";
import type { AdminRiskPoolDetailLogRow, AdminRiskPoolShowData } from "@/types/api/admin-risk";
export function RiskPoolDetailConsole({
drawId,
number4d,
}: {
drawId: number;
number4d: string;
}) {
const formatDt = useAdminDateTimeFormatter();
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(20);
const [data, setData] = useState<AdminRiskPoolShowData | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const load = useCallback(async () => {
setLoading(true);
setError(null);
try {
const d = await getAdminRiskPoolDetail(drawId, number4d, { page, per_page: perPage });
setData(d);
} catch (e) {
const msg =
e instanceof LotteryApiBizError ? e.message : "加载风险池详情失败";
setError(msg);
setData(null);
} finally {
setLoading(false);
}
}, [drawId, number4d, page, perPage]);
useEffect(() => {
queueMicrotask(() => {
void load();
});
}, [load]);
if (error && !data) {
return (
<Card className="border-destructive/40">
<CardHeader>
<CardTitle className="text-lg">风险池详情</CardTitle>
<CardDescription>{error}</CardDescription>
</CardHeader>
<CardContent>
<Link
href={`/admin/risk/draws/${drawId}/pools`}
className={cn(buttonVariants({ variant: "outline", size: "sm" }))}
>
返回列表
</Link>
</CardContent>
</Card>
);
}
if (loading && !data) {
return <p className="text-sm text-muted-foreground">加载中…</p>;
}
if (!data) {
return null;
}
const { pool, logs } = data;
return (
<div className="space-y-6">
<div className="flex flex-wrap items-center justify-between gap-2">
<Link
href={`/admin/risk/draws/${drawId}/pools`}
className={cn(buttonVariants({ variant: "ghost", size: "sm" }))}
>
← 返回全部风险池
</Link>
</div>
<Card>
<CardHeader>
<CardTitle className="text-lg">
号码 <span className="font-mono">{pool.normalized_number}</span>
</CardTitle>
<CardDescription>
期号 {data.draw_no} · 封顶与占用来自 `risk_pools`；售罄表示剩余额度为 0（产品文档 §6.4）。
</CardDescription>
</CardHeader>
<CardContent className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
<div className="rounded-lg border bg-muted/40 p-3">
<p className="text-xs text-muted-foreground">封顶额</p>
<p className="mt-1 font-mono text-sm font-medium tabular-nums">
{formatAdminMinorUnits(pool.total_cap_amount)}
</p>
</div>
<div className="rounded-lg border bg-muted/40 p-3">
<p className="text-xs text-muted-foreground">已占用（最坏赔付预留）</p>
<p className="mt-1 font-mono text-sm font-medium tabular-nums">
{formatAdminMinorUnits(pool.locked_amount)}
</p>
</div>
<div className="rounded-lg border bg-muted/40 p-3">
<p className="text-xs text-muted-foreground">剩余可售</p>
<p className="mt-1 font-mono text-sm font-medium tabular-nums">
{formatAdminMinorUnits(pool.remaining_amount)}
</p>
</div>
<div className="rounded-lg border bg-muted/40 p-3">
<p className="text-xs text-muted-foreground">售罄</p>
<p className="mt-1 text-sm font-medium">{pool.is_sold_out ? "是" : "否"}</p>
<p className="mt-0.5 text-xs text-muted-foreground">
占用比{" "}
{pool.usage_ratio != null ? `${(pool.usage_ratio * 100).toFixed(2)}%` : "—"}
</p>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-base">本号码占用 / 释放流水</CardTitle>
<CardDescription>与「风险占用」页同一数据源，此处限定单号码。</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="overflow-x-auto rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>时间</TableHead>
<TableHead>动作</TableHead>
<TableHead className="text-right">金额</TableHead>
<TableHead>来源</TableHead>
<TableHead>注单号</TableHead>
<TableHead>玩法</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{logs.items.map((row: AdminRiskPoolDetailLogRow) => (
<TableRow key={row.id}>
<TableCell className="whitespace-nowrap text-xs text-muted-foreground">
{row.created_at ? formatDt(row.created_at) : "—"}
</TableCell>
<TableCell className="text-sm">{row.action_type}</TableCell>
<TableCell className="text-right text-sm tabular-nums">
{formatAdminMinorUnits(row.amount)}
</TableCell>
<TableCell className="text-xs text-muted-foreground">
{row.source_reason ?? "—"}
</TableCell>
<TableCell className="font-mono text-xs">{row.ticket_no ?? "—"}</TableCell>
<TableCell className="text-xs">{row.play_code ?? "—"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
<AdminListPaginationFooter
selectId={`risk-pool-detail-${drawId}-${number4d}`}
total={logs.meta.total}
page={logs.meta.current_page}
lastPage={logs.meta.last_page}
perPage={logs.meta.per_page}
loading={loading}
onPerPageChange={(n) => {
setPerPage(n);
setPage(1);
}}
onPageChange={setPage}
/>
</CardContent>
</Card>
</div>
);
}

196
src/modules/risk/risk-pools-console.tsx Normal file
View File

@@ -0,0 +1,196 @@
"use client";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { getAdminRiskPools } from "@/api/admin-risk";
import { AdminListPaginationFooter } from "@/components/admin/admin-list-pagination-footer";
import { buttonVariants } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { formatAdminMinorUnits } from "@/lib/money";
import { cn } from "@/lib/utils";
import { LotteryApiBizError } from "@/types/api/errors";
import type { AdminRiskPoolListData, AdminRiskPoolRow } from "@/types/api/admin-risk";
const SORT_OPTIONS: { value: "usage_desc" | "locked_desc" | "remaining_asc" | "number_asc"; label: string }[] =
[
{ value: "usage_desc", label: "占用比 ↓（热门）" },
{ value: "locked_desc", label: "已占用额 ↓" },
{ value: "remaining_asc", label: "剩余额 ↑（紧俏）" },
{ value: "number_asc", label: "号码 ↑" },
];
type RiskPoolsConsoleProps = {
drawId: number;
title: string;
description: string;
soldOutOnly: boolean;
defaultSort: "usage_desc" | "locked_desc" | "remaining_asc" | "number_asc";
allowSortChange?: boolean;
};
export function RiskPoolsConsole({
drawId,
title,
description,
soldOutOnly,
defaultSort,
allowSortChange = false,
}: RiskPoolsConsoleProps) {
const [sort, setSort] = useState(defaultSort);
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(25);
const [data, setData] = useState<AdminRiskPoolListData | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const load = useCallback(async () => {
setLoading(true);
setError(null);
try {
const d = await getAdminRiskPools(drawId, {
page,
per_page: perPage,
sold_out_only: soldOutOnly,
sort,
});
setData(d);
} catch (e) {
const msg =
e instanceof LotteryApiBizError ? e.message : "加载风险池失败";
setError(msg);
setData(null);
} finally {
setLoading(false);
}
}, [drawId, page, perPage, soldOutOnly, sort]);
useEffect(() => {
queueMicrotask(() => {
void load();
});
}, [load]);
return (
<Card>
<CardHeader className="space-y-2">
<CardTitle className="text-lg">{title}</CardTitle>
<CardDescription>{description}</CardDescription>
{allowSortChange ? (
<div className="flex max-w-xs flex-col gap-2 sm:flex-row sm:items-end">
<div className="space-y-1.5">
<Label htmlFor="risk-pool-sort">排序</Label>
<Select
modal={false}
value={sort}
onValueChange={(v) => {
if (!v) return;
setSort(v as typeof sort);
setPage(1);
}}
>
<SelectTrigger id="risk-pool-sort" size="sm" className="w-full sm:w-52">
<SelectValue />
</SelectTrigger>
<SelectContent>
{SORT_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>
{o.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
) : null}
</CardHeader>
<CardContent className="space-y-4">
{error ? <p className="text-sm text-destructive">{error}</p> : null}
{loading && !data ? (
<p className="text-sm text-muted-foreground">加载中…</p>
) : (
<>
<div className="overflow-x-auto rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>号码</TableHead>
<TableHead className="text-right">封顶</TableHead>
<TableHead className="text-right">已占用</TableHead>
<TableHead className="text-right">剩余</TableHead>
<TableHead className="text-right">占用比</TableHead>
<TableHead>售罄</TableHead>
<TableHead className="text-right">详情</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{(data?.items ?? []).map((row: AdminRiskPoolRow) => (
<TableRow key={row.normalized_number}>
<TableCell className="font-mono font-medium">{row.normalized_number}</TableCell>
<TableCell className="text-right text-sm tabular-nums">
{formatAdminMinorUnits(row.total_cap_amount)}
</TableCell>
<TableCell className="text-right text-sm tabular-nums">
{formatAdminMinorUnits(row.locked_amount)}
</TableCell>
<TableCell className="text-right text-sm tabular-nums">
{formatAdminMinorUnits(row.remaining_amount)}
</TableCell>
<TableCell className="text-right text-sm tabular-nums">
{row.usage_ratio != null ? `${(row.usage_ratio * 100).toFixed(2)}%` : "—"}
</TableCell>
<TableCell>{row.is_sold_out ? "是" : "否"}</TableCell>
<TableCell className="text-right">
<Link
href={`/admin/risk/draws/${drawId}/pools/${row.normalized_number}`}
className={cn(
buttonVariants({ variant: "link", size: "sm" }),
"h-auto p-0",
)}
>
查看
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{data ? (
<AdminListPaginationFooter
selectId={`risk-pools-${drawId}-${soldOutOnly ? "so" : "all"}`}
total={data.meta.total}
page={data.meta.current_page}
lastPage={data.meta.last_page}
perPage={data.meta.per_page}
loading={loading}
onPerPageChange={(n) => {
setPerPage(n);
setPage(1);
}}
onPageChange={setPage}
/>
) : null}
</>
)}
</CardContent>
</Card>
);
}

46
src/modules/risk/risk-subnav.tsx Normal file
View File

@@ -0,0 +1,46 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
const segments = [
{ suffix: "/occupancy", key: "occupancy", label: "风险占用" },
{ suffix: "/hot", key: "hot", label: "热门号码" },
{ suffix: "/sold-out", key: "sold-out", label: "售罄列表" },
{ suffix: "/pools", key: "pools", label: "全部风险池" },
] as const;
export function RiskSubnav({ drawId }: { drawId: string }) {
const pathname = usePathname();
const base = `/admin/risk/draws/${drawId}`;
return (
<nav className="mb-6 flex flex-wrap gap-2 border-b border-border pb-3">
{segments.map(({ suffix, key, label }) => {
const href = `${base}${suffix}`;
const active =
pathname === href ||
(key === "pools" && pathname?.startsWith(`${base}/pools`));
return (
<Link
key={key}
href={href}
className={cn(buttonVariants({ variant: active ? "default" : "outline", size: "sm" }))}
>
{label}
</Link>
);
})}
<Link
href="/admin/risk"
className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "ml-auto")}
>
更换期号
</Link>
</nav>
);
}