feat: 增强封盘状态处理与用户界面反馈

- 在 draw-status-meta.ts 中新增 isHallSealedCountdownUi 函数以判断封盘状态
- 在 hall-bet-preview-dialog.tsx 中添加 allowSubmit 属性,控制提交按钮状态
- 更新 hall-betting-grid.tsx 以显示封盘提示与禁用下注功能
- 在 hall-draw-panel.tsx 中优化封盘状态的视觉反馈
- 修改 hall-screen.tsx 的注释以反映封盘相关的界面变化
This commit is contained in:
2026-05-11 14:00:51 +08:00
parent 09ef46e171
commit 1922a29f49
5 changed files with 75 additions and 17 deletions

View File

@@ -6,6 +6,14 @@ export type DrawStatusHud = {
countdownKind: "close" | "draw" | "cooldown" | "none"; countdownKind: "close" | "draw" | "cooldown" | "none";
}; };
/**
* 界面文档 §4.2「封盘」展示:`closing`(封盘中)与 `closed`(待开奖)——
* 倒计时区域使用错误色 #ff4d4f并提示「请选择下一期」。
*/
export function isHallSealedCountdownUi(status: string): boolean {
return status === "closing" || status === "closed";
}
/** 对齐界面文档 §4.2 状态文案与 PRD 期号状态 */ /** 对齐界面文档 §4.2 状态文案与 PRD 期号状态 */
export function drawStatusHud(status: string): DrawStatusHud { export function drawStatusHud(status: string): DrawStatusHud {
switch (status) { switch (status) {

View File

@@ -22,6 +22,8 @@ type HallBetPreviewDialogProps = {
currencyCode: string; currencyCode: string;
data: TicketPreviewData | null; data: TicketPreviewData | null;
placing: boolean; placing: boolean;
/** 界面 §4.2:封盘后禁止提交,主按钮文案为「已封盘」 */
allowSubmit?: boolean;
onConfirmPlace: () => void; onConfirmPlace: () => void;
}; };
@@ -56,6 +58,7 @@ export function HallBetPreviewDialog({
currencyCode, currencyCode,
data, data,
placing, placing,
allowSubmit = true,
onConfirmPlace, onConfirmPlace,
}: HallBetPreviewDialogProps) { }: HallBetPreviewDialogProps) {
const summary = data?.summary; const summary = data?.summary;
@@ -71,6 +74,15 @@ export function HallBetPreviewDialog({
§6.3 §6.3
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
{!allowSubmit ? (
<Alert className="mt-3 border-[#ff4d4f]/35 bg-[#ff4d4f]/8 text-[#ff4d4f] dark:bg-[#ff4d4f]/12">
<AlertTriangleIcon />
<AlertTitle></AlertTitle>
<AlertDescription className="text-xs leading-relaxed">
§4.2
</AlertDescription>
</Alert>
) : null}
</div> </div>
<ScrollArea className="max-h-[min(52vh,360px)] border-y px-4"> <ScrollArea className="max-h-[min(52vh,360px)] border-y px-4">
@@ -160,8 +172,8 @@ export function HallBetPreviewDialog({
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={placing}> <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={placing}>
</Button> </Button>
<Button type="button" onClick={onConfirmPlace} disabled={!data || placing}> <Button type="button" onClick={onConfirmPlace} disabled={!data || placing || !allowSubmit}>
{placing ? "提交中…" : "确认提交"} {placing ? "提交中…" : allowSubmit ? "确认提交" : "已封盘"}
</Button> </Button>
</div> </div>
</DialogContent> </DialogContent>

View File

@@ -18,6 +18,7 @@ import { mapTicketBetError } from "@/features/hall/hall-bet-errors";
import { HallBetAmountInput } from "@/features/hall/hall-bet-amount-input"; import { HallBetAmountInput } from "@/features/hall/hall-bet-amount-input";
import { HallBetPreviewDialog } from "@/features/hall/hall-bet-preview-dialog"; import { HallBetPreviewDialog } from "@/features/hall/hall-bet-preview-dialog";
import { HallBetNumberInput } from "@/features/hall/hall-bet-number-input"; import { HallBetNumberInput } from "@/features/hall/hall-bet-number-input";
import { isHallSealedCountdownUi } from "@/features/draw/draw-status-meta";
import { import {
playNeedsDigitSlot, playNeedsDigitSlot,
playNeedsDimension, playNeedsDimension,
@@ -195,6 +196,7 @@ export function HallBettingGrid() {
const maxBet = selectedRow?.config?.max_bet_amount ?? 999_999_999; const maxBet = selectedRow?.config?.max_bet_amount ?? 999_999_999;
const tableDisabled = !isBettable || catalogState.kind !== "ok"; const tableDisabled = !isBettable || catalogState.kind !== "ok";
const sealedBetUi = Boolean(display && isHallSealedCountdownUi(display.status));
const [previewOpen, setPreviewOpen] = useState(false); const [previewOpen, setPreviewOpen] = useState(false);
const [previewData, setPreviewData] = useState<TicketPreviewData | null>(null); const [previewData, setPreviewData] = useState<TicketPreviewData | null>(null);
@@ -271,6 +273,10 @@ export function HallBettingGrid() {
const handlePlace = async () => { const handlePlace = async () => {
if (!display || !previewData) return; if (!display || !previewData) return;
if (!isBettable) {
toast.error("已封盘,无法提交。");
return;
}
const line = buildLine(); const line = buildLine();
if (!line) { if (!line) {
toast.error("提交前数据已变化,请关闭预览后重试。"); toast.error("提交前数据已变化,请关闭预览后重试。");
@@ -328,13 +334,23 @@ export function HallBettingGrid() {
<div <div
className={cn( className={cn(
"space-y-5 transition-opacity", "space-y-5 transition-opacity",
tableDisabled && "pointer-events-none opacity-50", tableDisabled && "pointer-events-none",
tableDisabled && (sealedBetUi ? "opacity-[0.52]" : "opacity-50"),
)} )}
> >
{!isBettable && display ? ( {!isBettable && display ? (
<p className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-800 dark:text-rose-200"> sealedBetUi ? (
{display.status} §6.3 §4.2 <div className="space-y-1 rounded-lg border border-[#ff4d4f]/35 bg-[#ff4d4f]/8 px-3 py-2 text-sm text-[#ff4d4f] dark:bg-[#ff4d4f]/10">
<p className="font-medium">
§4.2
</p> </p>
<p className="text-xs leading-relaxed"></p>
</div>
) : (
<p className="rounded-lg border border-muted-foreground/30 bg-muted/50 px-3 py-2 text-sm text-muted-foreground">
{display.status}
</p>
)
) : null} ) : null}
<HallPlaySwitcher <HallPlaySwitcher
@@ -437,7 +453,12 @@ export function HallBettingGrid() {
return ( return (
<> <>
<Card className={cn(!isBettable && display && "border-rose-500/30")}> <Card
className={cn(
sealedBetUi && "border-[#ff4d4f]/40 bg-muted/30",
!isBettable && display && !sealedBetUi && "border-muted-foreground/20 bg-muted/20",
)}
>
<CardHeader> <CardHeader>
<CardTitle className="text-base"></CardTitle> <CardTitle className="text-base"></CardTitle>
<CardDescription> <CardDescription>
@@ -456,6 +477,7 @@ export function HallBettingGrid() {
currencyCode={currencyCode} currencyCode={currencyCode}
data={previewData} data={previewData}
placing={placeLoading} placing={placeLoading}
allowSubmit={isBettable}
onConfirmPlace={() => void handlePlace()} onConfirmPlace={() => void handlePlace()}
/> />
</> </>

View File

@@ -11,13 +11,16 @@ import {
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { drawStatusHud } from "@/features/draw/draw-status-meta"; import { drawStatusHud, isHallSealedCountdownUi } from "@/features/draw/draw-status-meta";
import { useHallDrawLive } from "@/features/hall/use-hall-draw-live"; import { useHallDrawLive } from "@/features/hall/use-hall-draw-live";
import { formatSecondsClock } from "@/lib/format-gmt"; import { formatSecondsClock } from "@/lib/format-gmt";
import { formatLotteryInstant } from "@/lib/player-datetime"; import { formatLotteryInstant } from "@/lib/player-datetime";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import type { DrawCurrentPayload } from "@/types/api/draw-current"; import type { DrawCurrentPayload } from "@/types/api/draw-current";
/** 界面文档 §1.4:错误/封盘 #ff4d4f */
const UI_DOC_ERROR = "text-[#ff4d4f]";
function CountdownStrip({ function CountdownStrip({
hud, hud,
payload, payload,
@@ -25,6 +28,8 @@ function CountdownStrip({
hud: ReturnType<typeof drawStatusHud>; hud: ReturnType<typeof drawStatusHud>;
payload: DrawCurrentPayload; payload: DrawCurrentPayload;
}) { }) {
const sealedCountdown = isHallSealedCountdownUi(payload.status);
if (hud.countdownKind === "close" && payload.seconds_to_close > 0) { if (hud.countdownKind === "close" && payload.seconds_to_close > 0) {
return ( return (
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
@@ -37,12 +42,17 @@ function CountdownStrip({
} }
if (hud.countdownKind === "draw" && payload.seconds_to_draw > 0) { if (hud.countdownKind === "draw" && payload.seconds_to_draw > 0) {
return ( return (
<p className="text-sm text-muted-foreground"> <p
className={cn(
"text-sm",
sealedCountdown ? cn(UI_DOC_ERROR, "font-medium") : "text-muted-foreground",
)}
>
:{" "} :{" "}
<span <span
className={cn( className={cn(
"font-mono text-base font-semibold tabular-nums", "font-mono text-base font-semibold tabular-nums",
payload.status === "closing" && "text-rose-600 dark:text-rose-400", sealedCountdown ? UI_DOC_ERROR : "text-foreground",
)} )}
> >
{formatSecondsClock(payload.seconds_to_draw)} {formatSecondsClock(payload.seconds_to_draw)}
@@ -112,9 +122,12 @@ export function HallDrawPanel() {
} }
const hud = drawStatusHud(display.status); const hud = drawStatusHud(display.status);
const sealedUi = isHallSealedCountdownUi(display.status);
return ( return (
<Card className={cn(display.status === "closing" && "border-rose-500/40")}> <Card
className={cn(sealedUi && "border-[#ff4d4f]/45")}
>
<CardHeader className="space-y-1 pb-2"> <CardHeader className="space-y-1 pb-2">
<div className="flex flex-wrap items-start justify-between gap-2"> <div className="flex flex-wrap items-start justify-between gap-2">
<div className="min-w-0"> <div className="min-w-0">
@@ -143,11 +156,14 @@ export function HallDrawPanel() {
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<CountdownStrip hud={hud} payload={display} /> <CountdownStrip hud={hud} payload={display} />
{(display.status === "closing" || display.status === "closed") && ( {sealedUi ? (
<p className="text-xs text-rose-600 dark:text-rose-400"> <div className={cn("space-y-1 text-xs", UI_DOC_ERROR)}>
§6.3 §13.3 <p className="font-medium">
</p> </p>
)} <p></p>
</div>
) : null}
{Array.isArray(display.result_items) && display.result_items.length > 0 ? ( {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"> <div className="rounded-lg border border-dashed border-border bg-muted/30 p-3 text-xs text-muted-foreground">
23 {" "} 23 {" "}

View File

@@ -6,7 +6,7 @@ import { HallPlayCatalogPanel } from "@/features/hall/hall-play-catalog-panel";
import { HallWalletStrip } from "@/features/hall/hall-wallet-strip"; import { HallWalletStrip } from "@/features/hall/hall-wallet-strip";
/** /**
* 下注大厅:钱包条 §4 + 当期期号 §4.2;玩法目录阶段 4§12.3;下注表格阶段 5§13.3 * 下注大厅:钱包条 §4 + 当期期号 §4.2(封盘置灰 / 倒计时错误色 / WS+轮询);玩法目录 §12.3;下注表格 §13.3。
*/ */
export function HallScreen() { export function HallScreen() {
return ( return (