将 AdminRiskPage 改名为 AdminRiskIndexPage，并接入 RiskIndexConsole 组件。
This commit is contained in:
195
src/modules/risk/risk-pool-detail-console.tsx
Normal file
195
src/modules/risk/risk-pool-detail-console.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user