feat: 更新依赖与增强功能
- 在 package.json 和 package-lock.json 中新增 laravel-echo 和 pusher-js 依赖 - 在 API 模块中新增 draw 相关函数的导出 - 在 PlayerAppShell 组件中引入 PlayerBottomNav 以增强底部导航 - 在 HallScreen 组件中引入 HallDrawPanel 以展示当前期号
This commit is contained in:
130
src/features/results/draw-result-detail-screen.tsx
Normal file
130
src/features/results/draw-result-detail-screen.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import { getDrawResultByNo } from "@/api/draw";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { TwentyThreeResultsGrid } from "@/features/results/twenty-three-results-grid";
|
||||
import { formatLotteryInstant } from "@/lib/player-datetime";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { DrawResultDetailPayload } from "@/types/api/draw-results";
|
||||
|
||||
type DrawResultDetailScreenProps = {
|
||||
drawNo: string;
|
||||
};
|
||||
|
||||
/** §4.6 开奖结果详情：23 分区 + [< >] 切换 */
|
||||
export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps) {
|
||||
const [data, setData] = useState<DrawResultDetailPayload | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const row = await getDrawResultByNo(drawNo);
|
||||
setData(row);
|
||||
} catch {
|
||||
setData(null);
|
||||
setError("该期开奖结果不可用或不存在");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [drawNo]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-7 w-48" />
|
||||
<Skeleton className="h-4 w-56" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Skeleton className="h-48 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !data) {
|
||||
return (
|
||||
<Card className="border-destructive/40">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">开奖结果</CardTitle>
|
||||
<CardDescription>{error ?? "无数据"}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-wrap gap-2">
|
||||
<Button type="button" size="sm" variant="secondary" onClick={() => void load()}>
|
||||
重试
|
||||
</Button>
|
||||
<Link href="/results" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
|
||||
返回列表
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Card>
|
||||
<CardHeader className="space-y-3 pb-2">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
{data.previous_draw_no ? (
|
||||
<Link
|
||||
href={`/results/${encodeURIComponent(data.previous_draw_no)}`}
|
||||
className={cn(buttonVariants({ variant: "outline", size: "sm" }), "min-w-[5rem]")}
|
||||
>
|
||||
‹ 上一期
|
||||
</Link>
|
||||
) : (
|
||||
<Button type="button" variant="outline" size="sm" className="min-w-[5rem]" disabled>
|
||||
‹ 上一期
|
||||
</Button>
|
||||
)}
|
||||
<CardTitle className="text-center font-mono text-lg">
|
||||
{data.draw_no}
|
||||
</CardTitle>
|
||||
{data.next_draw_no ? (
|
||||
<Link
|
||||
href={`/results/${encodeURIComponent(data.next_draw_no)}`}
|
||||
className={cn(buttonVariants({ variant: "outline", size: "sm" }), "min-w-[5rem]")}
|
||||
>
|
||||
下一期 ›
|
||||
</Link>
|
||||
) : (
|
||||
<Button type="button" variant="outline" size="sm" className="min-w-[5rem]" disabled>
|
||||
下一期 ›
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<CardDescription className="text-center font-mono text-sm">
|
||||
开奖时间:{" "}
|
||||
{formatLotteryInstant(data.draw_time_iso ?? data.draw_time ?? null)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-2">
|
||||
<TwentyThreeResultsGrid numbers={data.results} />
|
||||
<p className="mt-4 text-xs text-muted-foreground">
|
||||
中奖号码高亮、「查看我的中奖情况」跳转注单并按该期筛选：见实施计划 docs/06 §11.7、§14.3「承接阶段
|
||||
3」（界面 §4.6）。
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
137
src/features/results/draw-results-list-screen.tsx
Normal file
137
src/features/results/draw-results-list-screen.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import { getDrawResults } from "@/api/draw";
|
||||
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 { Skeleton } from "@/components/ui/skeleton";
|
||||
import { formatLotteryInstant } from "@/lib/player-datetime";
|
||||
import type { DrawResultListItem } from "@/types/api/draw-results";
|
||||
|
||||
/** §4.6 历史列表 + 默认最新一期入口 */
|
||||
export function DrawResultsListScreen() {
|
||||
const [items, setItems] = useState<DrawResultListItem[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [date, setDate] = useState("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchList = useCallback(async () => {
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getDrawResults({
|
||||
page: 1,
|
||||
size: 30,
|
||||
business_date: /^\d{4}-\d{2}-\d{2}$/.test(date) ? date : undefined,
|
||||
});
|
||||
setItems(res.items);
|
||||
} catch {
|
||||
setError("加载失败");
|
||||
setItems(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [date]);
|
||||
|
||||
useEffect(() => {
|
||||
void fetchList();
|
||||
}, [fetchList]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-end">
|
||||
<div className="flex flex-1 flex-col gap-1.5">
|
||||
<Label htmlFor="biz-date">按业务日筛选</Label>
|
||||
<Input
|
||||
id="biz-date"
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
className="max-w-xs"
|
||||
/>
|
||||
</div>
|
||||
<Button type="button" variant="secondary" size="sm" onClick={() => void fetchList()}>
|
||||
应用
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-6 w-32" />
|
||||
<Skeleton className="h-4 w-48" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Skeleton className="h-24 w-full" />
|
||||
<Skeleton className="h-24 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : error ? (
|
||||
<Card className="border-destructive/40">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">开奖结果</CardTitle>
|
||||
<CardDescription>{error}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button type="button" size="sm" onClick={() => void fetchList()}>
|
||||
重试
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : items && items.length === 0 ? (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">开奖结果</CardTitle>
|
||||
<CardDescription>暂无开奖结果</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="flex flex-col gap-3">
|
||||
{items?.map((row) => (
|
||||
<Card key={row.draw_no}>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<CardTitle className="font-mono text-base">{row.draw_no}</CardTitle>
|
||||
<Link
|
||||
href={`/results/${encodeURIComponent(row.draw_no)}`}
|
||||
className="text-sm font-medium text-primary underline-offset-4 hover:underline"
|
||||
>
|
||||
查看详情 →
|
||||
</Link>
|
||||
</div>
|
||||
<CardDescription className="font-mono text-xs">
|
||||
开奖时间：
|
||||
{formatLotteryInstant(row.draw_time_iso ?? row.draw_time ?? null)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid grid-cols-3 gap-2 text-center font-mono text-sm">
|
||||
<div className="rounded-md border bg-card py-2">
|
||||
<div className="text-[10px] uppercase text-muted-foreground">1st</div>
|
||||
<div className="font-semibold">{row.results["1st"]}</div>
|
||||
</div>
|
||||
<div className="rounded-md border bg-card py-2">
|
||||
<div className="text-[10px] uppercase text-muted-foreground">2nd</div>
|
||||
<div className="font-semibold">{row.results["2nd"]}</div>
|
||||
</div>
|
||||
<div className="rounded-md border bg-card py-2">
|
||||
<div className="text-[10px] uppercase text-muted-foreground">3rd</div>
|
||||
<div className="font-semibold">{row.results["3rd"]}</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
src/features/results/twenty-three-results-grid.tsx
Normal file
53
src/features/results/twenty-three-results-grid.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import type { DrawResultsNumbers } from "@/types/api/draw-results";
|
||||
|
||||
type TwentyThreeResultsGridProps = {
|
||||
numbers: DrawResultsNumbers;
|
||||
};
|
||||
|
||||
/**
|
||||
* §4.6 开奖结果页：头/二/三奖 + Starter 10 + Consolation 10
|
||||
*/
|
||||
export function TwentyThreeResultsGrid({ numbers }: TwentyThreeResultsGridProps) {
|
||||
const starters = numbers.starter ?? [];
|
||||
const consos = numbers.consolation ?? [];
|
||||
|
||||
const cellCls =
|
||||
"flex min-h-[2.75rem] items-center justify-center rounded-md border border-border bg-card font-mono text-base font-semibold tracking-wide tabular-nums";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{(["1st", "2nd", "3rd"] as const).map((key) => (
|
||||
<div key={key} className="flex flex-col gap-1.5 text-center">
|
||||
<span className="text-xs font-medium uppercase text-muted-foreground">
|
||||
{key === "1st" ? "头奖" : key === "2nd" ? "二奖" : "三奖"}
|
||||
</span>
|
||||
<div className={cellCls}>{numbers[key] || "—"}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-foreground">特别奖 (Starter)</p>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<div key={`s-${i}`} className={cellCls}>
|
||||
{starters[i] ?? "—"}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-foreground">安慰奖 (Consolation)</p>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<div key={`c-${i}`} className={cellCls}>
|
||||
{consos[i] ?? "—"}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user