feat: 更新依赖与增强功能
- 在 package.json 和 package-lock.json 中新增 laravel-echo 和 pusher-js 依赖 - 在 API 模块中新增 draw 相关函数的导出 - 在 PlayerAppShell 组件中引入 PlayerBottomNav 以增强底部导航 - 在 HallScreen 组件中引入 HallDrawPanel 以展示当前期号
This commit is contained in:
264
src/features/hall/hall-draw-panel.tsx
Normal file
264
src/features/hall/hall-draw-panel.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
|
||||
import { getDrawCurrent } 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 { drawStatusHud } from "@/features/draw/draw-status-meta";
|
||||
import { formatSecondsClock } from "@/lib/format-gmt";
|
||||
import { getLotteryEcho } from "@/lib/lottery-echo";
|
||||
import { formatLotteryInstant } from "@/lib/player-datetime";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { DrawCurrentPayload } from "@/types/api/draw-current";
|
||||
|
||||
/** 界面文档 §2.1：`draw.countdown` / `draw.status_change` / `result.published` 载荷 */
|
||||
type HallWsEnvelope = {
|
||||
data: DrawCurrentPayload | null;
|
||||
emitted_at_ms?: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* 「服务器时间为准」：以载荷里的 `seconds_*` 为基准、`emitted_at_ms` 为锚点在本地推演（兜底 HTTP 或未收到秒的间隙）。
|
||||
*/
|
||||
function applySnapshotDrift(
|
||||
payload: DrawCurrentPayload,
|
||||
emittedAtMs: number,
|
||||
nowMs: number,
|
||||
): DrawCurrentPayload {
|
||||
const elapsed = Math.max(0, Math.floor((nowMs - emittedAtMs) / 1000));
|
||||
return {
|
||||
...payload,
|
||||
seconds_to_close: Math.max(0, payload.seconds_to_close - elapsed),
|
||||
seconds_to_draw: Math.max(0, payload.seconds_to_draw - elapsed),
|
||||
seconds_remaining_in_cooldown:
|
||||
payload.seconds_remaining_in_cooldown == null
|
||||
? null
|
||||
: Math.max(0, payload.seconds_remaining_in_cooldown - elapsed),
|
||||
};
|
||||
}
|
||||
|
||||
function CountdownStrip({
|
||||
hud,
|
||||
payload,
|
||||
}: {
|
||||
hud: ReturnType<typeof drawStatusHud>;
|
||||
payload: DrawCurrentPayload;
|
||||
}) {
|
||||
if (hud.countdownKind === "close" && payload.seconds_to_close > 0) {
|
||||
return (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
封盘倒计时:{" "}
|
||||
<span className="font-mono text-base font-semibold tabular-nums text-foreground">
|
||||
{formatSecondsClock(payload.seconds_to_close)}
|
||||
</span>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
if (hud.countdownKind === "draw" && payload.seconds_to_draw > 0) {
|
||||
return (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
距离开奖:{" "}
|
||||
<span
|
||||
className={cn(
|
||||
"font-mono text-base font-semibold tabular-nums",
|
||||
payload.status === "closing" && "text-rose-600 dark:text-rose-400",
|
||||
)}
|
||||
>
|
||||
{formatSecondsClock(payload.seconds_to_draw)}
|
||||
</span>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
if (hud.countdownKind === "cooldown" && payload.seconds_remaining_in_cooldown != null) {
|
||||
return (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
冷静期剩余:{" "}
|
||||
<span className="font-mono text-base font-semibold tabular-nums text-foreground">
|
||||
{formatSecondsClock(payload.seconds_remaining_in_cooldown)}
|
||||
</span>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 界面文档 §2.1 / §2.2：WebSocket `draw.countdown`、`draw.status_change`、`result.published`；
|
||||
* 降级：每 30s 轮询 `GET draw/current`。
|
||||
*/
|
||||
export function HallDrawPanel() {
|
||||
const [raw, setRaw] = useState<DrawCurrentPayload | null | undefined>(undefined);
|
||||
const [emittedAtMs, setEmittedAtMs] = useState(() => Date.now());
|
||||
/** 推演用「当前毫秒」；`draw.countdown` 每秒到仍保留，避免零星丢包时停摆 */
|
||||
const [nowMs, setNowMs] = useState(() => Date.now());
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const mergeFromWs = useCallback((evt: HallWsEnvelope) => {
|
||||
setRaw(evt.data);
|
||||
setEmittedAtMs(evt.emitted_at_ms ?? Date.now());
|
||||
}, []);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
setError(null);
|
||||
const d = await getDrawCurrent();
|
||||
setRaw(d);
|
||||
setEmittedAtMs(Date.now());
|
||||
} catch {
|
||||
setError("加载失败，请下拉刷新");
|
||||
setRaw(undefined);
|
||||
}
|
||||
}, []);
|
||||
|
||||
/** §2.2：WS 不可用或降级时每 30s 拉倒计时 */
|
||||
const refreshMs = useMemo(() => {
|
||||
if (raw === undefined) return 10_000;
|
||||
return raw ? 30_000 : 12_000;
|
||||
}, [raw]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = window.setTimeout(() => {
|
||||
void load();
|
||||
}, 0);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [load]);
|
||||
|
||||
useEffect(() => {
|
||||
const id = window.setInterval(() => {
|
||||
void load();
|
||||
}, refreshMs);
|
||||
return () => window.clearInterval(id);
|
||||
}, [load, refreshMs]);
|
||||
|
||||
useEffect(() => {
|
||||
const bump = () => setNowMs(Date.now());
|
||||
bump();
|
||||
const sid = window.setInterval(bump, 1000);
|
||||
const onVisibility = () => {
|
||||
if (document.visibilityState === "visible") bump();
|
||||
};
|
||||
document.addEventListener("visibilitychange", onVisibility);
|
||||
return () => {
|
||||
window.clearInterval(sid);
|
||||
document.removeEventListener("visibilitychange", onVisibility);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const echo = getLotteryEcho();
|
||||
if (!echo) return;
|
||||
|
||||
echo
|
||||
.channel("lottery-hall")
|
||||
.listen(".draw.countdown", mergeFromWs)
|
||||
.listen(".draw.status_change", mergeFromWs)
|
||||
.listen(".result.published", mergeFromWs);
|
||||
|
||||
return () => {
|
||||
echo.leave("lottery-hall");
|
||||
};
|
||||
}, [mergeFromWs]);
|
||||
|
||||
const display: DrawCurrentPayload | null | undefined =
|
||||
raw === undefined || raw === null ? raw : applySnapshotDrift(raw, emittedAtMs, nowMs);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className="border-destructive/40">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">当期期号</CardTitle>
|
||||
<CardDescription>{error}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex gap-2">
|
||||
<Button type="button" variant="secondary" size="sm" onClick={() => void load()}>
|
||||
重试
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (raw === undefined || display === undefined) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="space-y-2 pb-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
<Skeleton className="h-4 w-52" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Skeleton className="h-12 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (raw === null || display === null) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">当期期号</CardTitle>
|
||||
<CardDescription>暂无可用期号，请稍后再试</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const hud = drawStatusHud(display.status);
|
||||
|
||||
return (
|
||||
<Card className={cn(display.status === "closing" && "border-rose-500/40")}>
|
||||
<CardHeader className="space-y-1 pb-2">
|
||||
<div className="flex flex-wrap items-start justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<CardTitle className="text-base leading-tight">
|
||||
第 {display.draw_no} 期
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1">
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className={cn("inline-block size-2 rounded-full", hud.dotClass)} />
|
||||
<span>{hud.label}</span>
|
||||
</span>
|
||||
{display.draw_time ? (
|
||||
<span className="text-xs opacity-90">
|
||||
计划开奖：{formatLotteryInstant(display.draw_time)}
|
||||
</span>
|
||||
) : null}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Link
|
||||
href="/results"
|
||||
className={cn(buttonVariants({ variant: "outline", size: "sm" }), "shrink-0")}
|
||||
>
|
||||
开奖结果
|
||||
</Link>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<CountdownStrip hud={hud} payload={display} />
|
||||
{(display.status === "closing" || display.status === "closed") && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
下注表格封盘置灰见实施计划 docs/06 §11.7、§13.3；当前可先前往「开奖结果」查看已发布往期。
|
||||
</p>
|
||||
)}
|
||||
{Array.isArray(display.result_items) && display.result_items.length > 0 ? (
|
||||
<div className="rounded-lg border border-dashed border-border bg-muted/30 p-3 text-xs text-muted-foreground">
|
||||
本期号码已发布，完整 23 组展示见{" "}
|
||||
<Link href={`/results/${encodeURIComponent(display.draw_no)}`} className="font-medium text-primary underline-offset-4 hover:underline">
|
||||
当期结果
|
||||
</Link>
|
||||
。
|
||||
</div>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -9,24 +9,28 @@ import {
|
||||
} from "@/components/ui/card";
|
||||
|
||||
import { HallWalletStrip } from "@/features/hall/hall-wallet-strip";
|
||||
import { HallDrawPanel } from "@/features/hall/hall-draw-panel";
|
||||
|
||||
/**
|
||||
* 下注大厅：顶部钱包条对齐高保真稿；以下为期号/表格占位。
|
||||
* 下注大厅：钱包条 §4 + 当期期号 §4.2；表格与封盘态见 docs/06 §11.7、§13.3。
|
||||
*/
|
||||
export function HallScreen() {
|
||||
return (
|
||||
<div className="flex flex-col gap-5">
|
||||
<HallWalletStrip />
|
||||
<HallDrawPanel />
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">下注大厅</CardTitle>
|
||||
<CardTitle className="text-base">下注表格</CardTitle>
|
||||
<CardDescription>
|
||||
Issue No.、倒计时、2D/3D/4D 表格与 Submit Bet 将按界面文档 §4.2 接续开发。
|
||||
2D / 3D / 4D 动态列在阶段 5 接入玩法配置后按界面 §4.2 渲染（实施计划 docs/06
|
||||
§13.3「承接阶段 3」）。
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
封盘态、WebSocket 降级轮询等与 PRD §2 一致时再接入。
|
||||
封盘整表置灰、按钮「已封盘」与 WebSocket 倒计时见 docs/06 §11.7 表、§13.3、§16.2
|
||||
第二轮。
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user