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:
@@ -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) {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
<p className="font-medium">
|
||||||
|
已封盘:表格置灰且不可编辑;倒计时区域见上方期号卡片(界面文档 §4.2)。
|
||||||
|
</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()}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -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 组展示见{" "}
|
||||||
|
|||||||
@@ -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 (
|
||||||
|
|||||||
Reference in New Issue
Block a user