xiaokang/lotteryFront
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance UI consistency and improve spacing across components

Browse Source 
- Added styles for player-side toast notifications to improve user feedback.
- Adjusted padding and spacing in various components for a more cohesive layout.
- Updated card and dialog components to streamline visual hierarchy and enhance readability.
- Refactored player panel and navigation elements for better alignment and user experience.
This commit is contained in:
kang
2026-05-21 17:28:06 +08:00
parent 496ed10981
commit 0cd85ae287
33 changed files with 253 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(player)/(main)/results/[drawNo]/page.tsx
View File

@@ -9,7 +9,7 @@ export default async function DrawResultByNoPage(props: PageProps) {
const drawNo = decodeURIComponent(raw); const drawNo = decodeURIComponent(raw);
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-3">
<DrawResultDetailScreen drawNo={drawNo} /> <DrawResultDetailScreen drawNo={drawNo} />
</div> </div>
); );

2
src/app/(player)/(main)/results/page.tsx
View File

@@ -2,7 +2,7 @@ import { DrawResultsListScreen } from "@/features/results/draw-results-list-scre
export default function DrawResultsHistoryPage() { export default function DrawResultsHistoryPage() {
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-3">
<DrawResultsListScreen /> <DrawResultsListScreen />
</div> </div>
); );

28
src/app/globals.css
View File

@@ -127,4 +127,32 @@
html { html {
@apply font-sans; @apply font-sans;
} }
}
/* 玩家端 Toast：顶部居中、紧凑尺寸（位置见 components/ui/sonner.tsx） */
[data-sonner-toaster] {
--width: min(280px, calc(100vw - 24px));
}
[data-sonner-toast][data-styled="true"] {
padding: 8px 12px;
font-size: 12px;
line-height: 1.35;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}
[data-sonner-toast][data-styled="true"] [data-title] {
font-size: 12px;
font-weight: 600;
line-height: 1.35;
}
[data-sonner-toast][data-styled="true"] [data-description] {
font-size: 11px;
line-height: 1.35;
}
[data-sonner-toast][data-styled="true"] [data-icon] svg {
width: 14px;
height: 14px;
} }

2
src/components/layout/player-app-shell.tsx
View File

@@ -20,7 +20,7 @@ export function PlayerAppShell({ children }: PlayerAppShellProps): ReactNode {
return ( return (
<div className="min-h-dvh bg-white text-foreground"> <div className="min-h-dvh bg-white text-foreground">
<NetworkStatusBanner /> <NetworkStatusBanner />
<main className="mx-auto flex w-full max-w-lg flex-col pb-[calc(4rem+env(safe-area-inset-bottom,0px)+1.5rem)]"> <main className="mx-auto flex w-full max-w-lg flex-col pb-[calc(3.5rem+env(safe-area-inset-bottom,0px)+0.75rem)]">
{children} {children}
</main> </main>
<PlayerBottomNav /> <PlayerBottomNav />

11
src/components/layout/player-bottom-nav.tsx
View File

@@ -3,7 +3,7 @@
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { BarChart3, BookOpen, ClipboardList, Home, Wallet } from "lucide-react"; import { BarChart3, ClipboardList, Home, Wallet } from "lucide-react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -30,13 +30,6 @@ const tabs = [
icon: ClipboardList, icon: ClipboardList,
match: (p: string) => p === "/orders" || p.startsWith("/orders/"), match: (p: string) => p === "/orders" || p.startsWith("/orders/"),
}, },
{
href: "/rules",
labelKey: "nav.rules",
labelDefault: "规则",
icon: BookOpen,
match: (p: string) => p === "/rules",
},
{ {
href: "/wallet", href: "/wallet",
labelKey: "nav.wallet", labelKey: "nav.wallet",
@@ -58,7 +51,7 @@ export function PlayerBottomNav() {
className="fixed bottom-0 left-0 right-0 z-50 border-t border-[#e4ebf5] bg-white/96 pb-[env(safe-area-inset-bottom,0px)] shadow-[0_-10px_30px_rgba(15,23,42,0.08)] backdrop-blur-md" className="fixed bottom-0 left-0 right-0 z-50 border-t border-[#e4ebf5] bg-white/96 pb-[env(safe-area-inset-bottom,0px)] shadow-[0_-10px_30px_rgba(15,23,42,0.08)] backdrop-blur-md"
aria-label={t("nav.aria")} aria-label={t("nav.aria")}
> >
<div className="mx-auto grid h-16 w-full max-w-lg grid-rows-1 [grid-template-columns:repeat(5,minmax(0,1fr))]"> <div className="mx-auto grid h-14 w-full max-w-lg grid-rows-1 grid-cols-4">
{tabs.map(({ href, labelKey, labelDefault, icon: Icon, match }) => { {tabs.map(({ href, labelKey, labelDefault, icon: Icon, match }) => {
const active = match(pathname); const active = match(pathname);
const label = t(labelKey, { defaultValue: labelDefault }); const label = t(labelKey, { defaultValue: labelDefault });

79
src/components/layout/player-panel.tsx
View File

@@ -7,12 +7,15 @@ import { Bell, ChevronLeft } from "lucide-react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { LanguageSwitcher } from "@/components/language-switcher"; import { LanguageSwitcher } from "@/components/language-switcher";
import {
playerHeaderControl,
playerPageHeader,
playerPageInset,
} from "@/lib/player-spacing";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
type PlayerPanelProps = { type PlayerPanelProps = {
title: string; title: string;
subtitle?: string;
eyebrow?: string;
children: ReactNode; children: ReactNode;
backHref?: string; backHref?: string;
backLabel?: string; backLabel?: string;
@@ -22,7 +25,6 @@ type PlayerPanelProps = {
export function PlayerPanel({ export function PlayerPanel({
title, title,
subtitle,
children, children,
backHref = "/hall", backHref = "/hall",
backLabel, backLabel,
@@ -37,42 +39,53 @@ export function PlayerPanel({
<div className={cn("mx-auto w-full max-w-[480px]", containerClassName)}> <div className={cn("mx-auto w-full max-w-[480px]", containerClassName)}>
<section <section
className={cn( className={cn(
"overflow-hidden bg-white px-4 pb-8 pt-4 text-slate-900", "overflow-hidden bg-white text-slate-900",
playerPageInset,
className, className,
)} )}
> >
<div className="mb-3 flex items-center gap-2 px-1 pt-3"> <header className={playerPageHeader}>
<Link <div className="flex min-w-0 justify-start">
href={backHref} <Link
className="flex h-9 shrink-0 items-center gap-1 rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-2.5 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]" href={backHref}
> className={cn(
<ChevronLeft className="size-4" aria-hidden /> playerHeaderControl,
{resolvedBackLabel} "gap-0.5 rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-2 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]",
</Link> )}
<div className="min-w-0 flex-1 text-center"> >
<h1 className="truncate text-lg font-black tracking-normal text-[#0b3f96]"> <ChevronLeft className="size-4 shrink-0" aria-hidden />
<span className="max-w-[4.5rem] truncate">{resolvedBackLabel}</span>
</Link>
</div>
<div className="min-w-0 max-w-[min(52vw,12rem)] justify-self-center text-center">
<h1 className="truncate text-base font-black leading-tight text-[#0b3f96]">
{title} {title}
</h1> </h1>
{subtitle ? (
<p className="truncate text-[11px] font-medium text-slate-500">
{subtitle}
</p>
) : null}
</div> </div>
<LanguageSwitcher
variant="minimal" <div className="flex min-w-0 items-center justify-end gap-1">
showFlag={false} <LanguageSwitcher
className="shrink-0 rounded-full border border-[#e4eaf4] bg-[#f8fafc]" variant="minimal"
/> showFlag={false}
<button className={cn(
type="button" playerHeaderControl,
className="relative flex size-9 shrink-0 items-center justify-center rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]" "rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:py-0 [&_button]:text-xs",
aria-label={t("navigation.notifications")} )}
> />
<Bell className="size-5" aria-hidden /> <button
<span className="absolute right-2 top-2 size-2 rounded-full bg-[#ff143d]" /> type="button"
</button> className={cn(
</div> playerHeaderControl,
"relative size-8 rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]",
)}
aria-label={t("navigation.notifications")}
>
<Bell className="size-4" aria-hidden />
<span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-[#ff143d]" />
</button>
</div>
</header>
{children} {children}
</section> </section>
</div> </div>

8
src/components/ui/card.tsx
View File

@@ -12,7 +12,7 @@ function Card({
data-slot="card" data-slot="card"
data-size={size} data-size={size}
className={cn( className={cn(
"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", "group/card flex flex-col gap-3 overflow-hidden rounded-xl bg-card py-3 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-2 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
className className
)} )}
{...props} {...props}
@@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
<div <div
data-slot="card-header" data-slot="card-header"
className={cn( className={cn(
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3", "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-3 group-data-[size=sm]/card:px-2.5 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-3 group-data-[size=sm]/card:[.border-b]:pb-2",
className className
)} )}
{...props} {...props}
@@ -73,7 +73,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="card-content" data-slot="card-content"
className={cn("px-4 group-data-[size=sm]/card:px-3", className)} className={cn("px-3 group-data-[size=sm]/card:px-2.5", className)}
{...props} {...props}
/> />
) )
@@ -84,7 +84,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
<div <div
data-slot="card-footer" data-slot="card-footer"
className={cn( className={cn(
"flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3", "flex items-center rounded-b-xl border-t bg-muted/50 p-3 group-data-[size=sm]/card:p-2.5",
className className
)} )}
{...props} {...props}

38
src/components/ui/sonner.tsx
View File

@@ -10,35 +10,39 @@ const Toaster = ({ ...props }: ToasterProps) => {
return ( return (
<Sonner <Sonner
theme={theme as ToasterProps["theme"]} theme={theme as ToasterProps["theme"]}
position="top-center"
offset={10}
mobileOffset={{
top: "calc(8px + env(safe-area-inset-top, 0px))",
}}
gap={6}
visibleToasts={2}
duration={2800}
closeButton={false}
className="toaster group" className="toaster group"
icons={{ icons={{
success: ( success: <CircleCheckIcon className="size-3.5 shrink-0" />,
<CircleCheckIcon className="size-4" /> info: <InfoIcon className="size-3.5 shrink-0" />,
), warning: <TriangleAlertIcon className="size-3.5 shrink-0" />,
info: ( error: <OctagonXIcon className="size-3.5 shrink-0" />,
<InfoIcon className="size-4" /> loading: <Loader2Icon className="size-3.5 shrink-0 animate-spin" />,
),
warning: (
<TriangleAlertIcon className="size-4" />
),
error: (
<OctagonXIcon className="size-4" />
),
loading: (
<Loader2Icon className="size-4 animate-spin" />
),
}} }}
style={ style={
{ {
"--normal-bg": "var(--popover)", "--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)", "--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)", "--normal-border": "var(--border)",
"--border-radius": "var(--radius)", "--border-radius": "calc(var(--radius) * 0.8)",
"--width": "min(280px, calc(100vw - 24px))",
} as React.CSSProperties } as React.CSSProperties
} }
toastOptions={{ toastOptions={{
classNames: { classNames: {
toast: "cn-toast", toast:
"cn-toast !min-h-0 !w-full !max-w-[min(280px,calc(100vw-24px))] !items-center !gap-2 !rounded-lg !border !px-3 !py-2 !text-xs !shadow-md",
title: "!text-xs !font-semibold !leading-snug",
description: "!text-[11px] !leading-snug !text-muted-foreground",
icon: "!mr-0 !size-3.5",
}, },
}} }}
{...props} {...props}

12
src/features/hall/hall-bet-preview-dialog.tsx
View File

@@ -4,6 +4,7 @@ import {
AlertTriangleIcon, AlertTriangleIcon,
CheckCircle2, CheckCircle2,
LoaderCircle, LoaderCircle,
Lock,
WalletCards, WalletCards,
XIcon, XIcon,
} from "lucide-react"; } from "lucide-react";
@@ -137,7 +138,7 @@ export function HallBetPreviewDialog({
showCloseButton={false} showCloseButton={false}
className="flex max-h-[calc(100dvh-24px)] flex-col gap-0 overflow-hidden rounded-2xl border-[#e4ebf6] bg-white p-0 shadow-[0_18px_60px_rgba(15,23,42,0.18)] ring-[#e8eef7] sm:max-h-[min(92vh,760px)] sm:max-w-lg" className="flex max-h-[calc(100dvh-24px)] flex-col gap-0 overflow-hidden rounded-2xl border-[#e4ebf6] bg-white p-0 shadow-[0_18px_60px_rgba(15,23,42,0.18)] ring-[#e8eef7] sm:max-h-[min(92vh,760px)] sm:max-w-lg"
> >
<div className="relative shrink-0 px-4 pb-3 pt-5 sm:px-5"> <div className="relative shrink-0 px-3 pb-2.5 pt-4 sm:px-4">
<button <button
type="button" type="button"
onClick={() => onOpenChange(false)} onClick={() => onOpenChange(false)}
@@ -172,9 +173,9 @@ export function HallBetPreviewDialog({
</div> </div>
<div <div
className="min-h-0 flex-1 overflow-y-auto border-y border-[#e8eef7] px-4 sm:px-5" className="min-h-0 flex-1 overflow-y-auto border-y border-[#e8eef7] px-3 sm:px-4"
> >
<div className="space-y-4 py-4"> <div className="space-y-3 py-3">
{!data ? ( {!data ? (
<p className="text-sm text-slate-500">{t("hall.preview.empty")}</p> <p className="text-sm text-slate-500">{t("hall.preview.empty")}</p>
) : ( ) : (
@@ -291,7 +292,7 @@ export function HallBetPreviewDialog({
</div> </div>
</div> </div>
<div className="grid shrink-0 grid-cols-2 gap-3 border-t border-[#e8eef7] bg-white p-4 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:p-5"> <div className="grid shrink-0 grid-cols-2 gap-2.5 border-t border-[#e8eef7] bg-white p-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] sm:p-4">
<Button <Button
type="button" type="button"
variant="outline" variant="outline"
@@ -305,8 +306,9 @@ export function HallBetPreviewDialog({
type="button" type="button"
onClick={onConfirmPlace} onClick={onConfirmPlace}
disabled={!data || placing || !allowSubmit} disabled={!data || placing || !allowSubmit}
className="h-12 rounded-lg border-0 bg-[#e5002c] text-base font-black text-white shadow-[0_10px_24px_rgba(229,0,44,0.28)] hover:bg-[#d10028] disabled:bg-slate-300 disabled:shadow-none" className="h-12 gap-2 rounded-lg border-0 bg-[#e5002c] text-base font-black text-white shadow-[0_10px_24px_rgba(229,0,44,0.28)] hover:bg-[#d10028] disabled:bg-slate-500 disabled:opacity-100 disabled:shadow-none"
> >
{!allowSubmit && !placing ? <Lock className="size-5 shrink-0" aria-hidden /> : null}
{placing {placing
? t("hall.preview.submitting") ? t("hall.preview.submitting")
: allowSubmit : allowSubmit

14
src/features/hall/hall-bet-result-dialog.tsx
View File

@@ -42,7 +42,7 @@ export function HallBetResultDialog({
showCloseButton={false} showCloseButton={false}
className="flex max-h-[calc(100dvh-24px)] flex-col gap-0 overflow-hidden rounded-2xl border-[#e4ebf6] bg-white p-0 shadow-[0_18px_60px_rgba(15,23,42,0.18)] ring-[#e8eef7] sm:max-h-[min(92vh,760px)] sm:max-w-lg" className="flex max-h-[calc(100dvh-24px)] flex-col gap-0 overflow-hidden rounded-2xl border-[#e4ebf6] bg-white p-0 shadow-[0_18px_60px_rgba(15,23,42,0.18)] ring-[#e8eef7] sm:max-h-[min(92vh,760px)] sm:max-w-lg"
> >
<div className="relative shrink-0 px-4 pb-3 pt-7 text-center sm:px-5"> <div className="relative shrink-0 px-3 pb-2.5 pt-5 text-center sm:px-4">
<button <button
type="button" type="button"
onClick={() => onOpenChange(false)} onClick={() => onOpenChange(false)}
@@ -54,7 +54,7 @@ export function HallBetResultDialog({
<div className="mx-auto flex size-16 items-center justify-center rounded-full border-4 border-emerald-100 bg-white text-emerald-600 shadow-[0_10px_24px_rgba(22,163,74,0.12)]"> <div className="mx-auto flex size-16 items-center justify-center rounded-full border-4 border-emerald-100 bg-white text-emerald-600 shadow-[0_10px_24px_rgba(22,163,74,0.12)]">
<CheckCircle2 className="size-11" strokeWidth={2.5} /> <CheckCircle2 className="size-11" strokeWidth={2.5} />
</div> </div>
<DialogHeader className="mt-4 items-center gap-2"> <DialogHeader className="mt-3 items-center gap-2">
<DialogTitle className="text-2xl font-black text-slate-950"> <DialogTitle className="text-2xl font-black text-slate-950">
{t("hall.result.title")} {t("hall.result.title")}
</DialogTitle> </DialogTitle>
@@ -68,9 +68,9 @@ export function HallBetResultDialog({
</div> </div>
<div <div
className="min-h-0 flex-1 overflow-y-auto border-y border-[#e8eef7] px-4 sm:px-5" className="min-h-0 flex-1 overflow-y-auto border-y border-[#e8eef7] px-3 sm:px-4"
> >
<div className="space-y-4 py-4"> <div className="space-y-3 py-3">
{!data ? ( {!data ? (
<p className="text-sm text-slate-500"> <p className="text-sm text-slate-500">
{t("hall.result.empty")} {t("hall.result.empty")}
@@ -92,7 +92,7 @@ export function HallBetResultDialog({
</div> </div>
</div> </div>
<div className="flex items-center justify-between gap-3 rounded-lg border border-[#dbe7ff] bg-[#f4f8ff] px-4 py-3"> <div className="flex items-center justify-between gap-3 rounded-lg border border-[#dbe7ff] bg-[#f4f8ff] px-3 py-2.5">
<div className="flex min-w-0 items-center gap-3"> <div className="flex min-w-0 items-center gap-3">
<span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-[#0755c7] text-white"> <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-[#0755c7] text-white">
<ClipboardList className="size-5" /> <ClipboardList className="size-5" />
@@ -106,7 +106,7 @@ export function HallBetResultDialog({
</span> </span>
</div> </div>
<div className="grid gap-2 rounded-lg border border-[#e8eef7] bg-white px-4 py-3 text-xs text-slate-600 sm:grid-cols-2"> <div className="grid gap-2 rounded-lg border border-[#e8eef7] bg-white px-3 py-2.5 text-xs text-slate-600 sm:grid-cols-2">
<p> <p>
{t("hall.result.orderNo")}:{" "} {t("hall.result.orderNo")}:{" "}
<span className="font-mono font-black text-[#0b3f96]">{data.order_no}</span> <span className="font-mono font-black text-[#0b3f96]">{data.order_no}</span>
@@ -198,7 +198,7 @@ export function HallBetResultDialog({
</div> </div>
</div> </div>
<div className="grid shrink-0 grid-cols-2 gap-3 border-t border-[#e8eef7] bg-white p-4 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:p-5"> <div className="grid shrink-0 grid-cols-2 gap-2.5 border-t border-[#e8eef7] bg-white p-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] sm:p-4">
<Button <Button
type="button" type="button"
variant="outline" variant="outline"

25
src/features/hall/hall-betting-grid.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { CirclePlus, Ticket, Trash2, Star } from "lucide-react"; import { CirclePlus, Lock, Ticket, Trash2, Star } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { toast } from "sonner"; import { toast } from "sonner";
@@ -865,7 +865,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
if (catalogState.kind === "error") { if (catalogState.kind === "error") {
return ( return (
<section className="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700"> <section className="rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
<p>{catalogState.message}</p> <p>{catalogState.message}</p>
<Button <Button
type="button" type="button"
@@ -886,7 +886,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
return ( return (
<> <>
<section className="space-y-4" aria-label={t("hall.aria")}> <section className="space-y-3" aria-label={t("hall.aria")}>
<div className="rounded-xl border border-[#e8eef7] bg-white p-1 shadow-[0_6px_18px_rgba(30,64,175,0.06)]"> <div className="rounded-xl border border-[#e8eef7] bg-white p-1 shadow-[0_6px_18px_rgba(30,64,175,0.06)]">
<div className="grid grid-cols-4 gap-1"> <div className="grid grid-cols-4 gap-1">
{categoryTabs.map((tab) => { {categoryTabs.map((tab) => {
@@ -920,7 +920,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
</div> </div>
{jackpot?.enabled ? ( {jackpot?.enabled ? (
<div className="rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 via-white to-[#f8fbff] px-4 py-3"> <div className="rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 via-white to-[#f8fbff] px-3 py-2.5">
<div className="flex flex-wrap items-center justify-between gap-2"> <div className="flex flex-wrap items-center justify-between gap-2">
<div> <div>
<p className="text-[11px] font-black uppercase tracking-normal text-amber-700"> <p className="text-[11px] font-black uppercase tracking-normal text-amber-700">
@@ -946,7 +946,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
<div className="mx-auto flex size-14 items-center justify-center rounded-full bg-slate-200 text-slate-600"> <div className="mx-auto flex size-14 items-center justify-center rounded-full bg-slate-200 text-slate-600">
<Ticket className="size-7" aria-hidden /> <Ticket className="size-7" aria-hidden />
</div> </div>
<p className="mt-4 text-lg font-bold text-slate-900"> <p className="mt-3 text-lg font-bold text-slate-900">
{t("hall.closed.title")} {t("hall.closed.title")}
</p> </p>
<p className="mt-1 text-xs">{t("hall.closed.subtitle")}</p> <p className="mt-1 text-xs">{t("hall.closed.subtitle")}</p>
@@ -1236,7 +1236,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
</button> </button>
</div> </div>
<div className="flex items-center justify-between rounded-xl border border-[#e9eef7] bg-[#f8fbff] px-4 py-3 text-sm shadow-[0_6px_20px_rgba(15,23,42,0.04)]"> <div className="flex items-center justify-between rounded-xl border border-[#e9eef7] bg-[#f8fbff] px-3 py-2.5 text-sm shadow-[0_6px_20px_rgba(15,23,42,0.04)]">
<span className="text-xs font-medium text-slate-500"> <span className="text-xs font-medium text-slate-500">
{t("hall.table.draftTotal")} {t("hall.table.draftTotal")}
</span> </span>
@@ -1255,9 +1255,18 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
type="button" type="button"
disabled={!canSubmit || previewLoading} disabled={!canSubmit || previewLoading}
onClick={() => void handlePreview()} onClick={() => void handlePreview()}
className="h-12 w-full rounded-xl border-0 bg-[#e5002c] text-base font-bold text-white shadow-[0_8px_20px_rgba(229,0,44,0.26)] hover:bg-[#d10028]" className={cn(
"h-12 w-full gap-2 rounded-xl border-0 text-base font-bold text-white",
!isBettable
? "bg-slate-500 shadow-none hover:bg-slate-500 disabled:opacity-100"
: "bg-[#e5002c] shadow-[0_8px_20px_rgba(229,0,44,0.26)] hover:bg-[#d10028]",
)}
> >
<Ticket className="size-5" aria-hidden /> {!isBettable ? (
<Lock className="size-5 shrink-0" aria-hidden />
) : (
<Ticket className="size-5 shrink-0" aria-hidden />
)}
{previewLoading {previewLoading
? t("hall.table.previewing") ? t("hall.table.previewing")
: !isBettable : !isBettable

8
src/features/hall/hall-draw-panel.tsx
View File

@@ -90,7 +90,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
if (error) { if (error) {
return ( return (
<section className="mb-4 rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700"> <section className="mb-3 rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
<p>{t(error, { defaultValue: error })}</p> <p>{t(error, { defaultValue: error })}</p>
<Button <Button
type="button" type="button"
@@ -107,7 +107,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
if (raw === undefined || display === undefined) { if (raw === undefined || display === undefined) {
return ( return (
<section className="mb-4 rounded-xl border border-[#e3ebf6] bg-white p-3 shadow-sm"> <section className="mb-3 rounded-xl border border-[#e3ebf6] bg-white p-3 shadow-sm">
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
<Skeleton className="h-14 rounded-lg" /> <Skeleton className="h-14 rounded-lg" />
<Skeleton className="h-14 rounded-lg" /> <Skeleton className="h-14 rounded-lg" />
@@ -119,7 +119,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
if (raw === null || display === null) { if (raw === null || display === null) {
return ( return (
<section className="mb-4 rounded-xl border border-[#e3ebf6] bg-white px-3 py-4 text-center text-sm text-slate-500 shadow-sm"> <section className="mb-3 rounded-xl border border-[#e3ebf6] bg-white px-3 py-3 text-center text-sm text-slate-500 shadow-sm">
{t("draw.noIssue")} {t("draw.noIssue")}
</section> </section>
); );
@@ -130,7 +130,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
return ( return (
<section <section
className={cn( className={cn(
"mb-4 overflow-hidden rounded-xl border border-[#e1e9f5] bg-white shadow-[0_6px_20px_rgba(15,23,42,0.06)]", "mb-3 overflow-hidden rounded-xl border border-[#e1e9f5] bg-white shadow-[0_6px_20px_rgba(15,23,42,0.06)]",
sealedUi && "border-red-200 bg-red-50/30", sealedUi && "border-red-200 bg-red-50/30",
)} )}
aria-label={t("draw.currentIssue")} aria-label={t("draw.currentIssue")}

2
src/features/hall/hall-play-catalog-panel.tsx
View File

@@ -142,7 +142,7 @@ export function HallPlayCatalogPanel() {
); );
return ( return (
<div className="space-y-6"> <div className="space-y-3">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t("hall.playCatalog.meta", { {t("hall.playCatalog.meta", {
currency: data.currency_code, currency: data.currency_code,

75
src/features/hall/hall-screen.tsx
View File

@@ -12,6 +12,8 @@ import { HallWalletStrip } from "@/features/hall/hall-wallet-strip";
import { JackpotBurstOverlay } from "@/features/hall/jackpot-burst-overlay"; import { JackpotBurstOverlay } from "@/features/hall/jackpot-burst-overlay";
import { useHallDrawLive } from "@/features/hall/use-hall-draw-live"; import { useHallDrawLive } from "@/features/hall/use-hall-draw-live";
import { useJackpotBurstLive } from "@/features/hall/use-jackpot-burst-live"; import { useJackpotBurstLive } from "@/features/hall/use-jackpot-burst-live";
import { playerHeaderControl, playerPageInset } from "@/lib/player-spacing";
import { cn } from "@/lib/utils";
/** /**
* 下注大厅：钱包条 §4 + 当期期号 §4.2（封盘置灰 / 倒计时错误色 / WS+轮询）；玩法目录 §12.3；下注表格 §13.3。 * 下注大厅：钱包条 §4 + 当期期号 §4.2（封盘置灰 / 倒计时错误色 / WS+轮询）；玩法目录 §12.3；下注表格 §13.3。
@@ -24,40 +26,49 @@ export function HallScreen() {
return ( return (
<div className="mx-auto w-full max-w-[480px]"> <div className="mx-auto w-full max-w-[480px]">
<section className="overflow-hidden bg-white px-4 pb-8 pt-4 text-slate-900"> <section className={cn("overflow-hidden bg-white text-slate-900", playerPageInset)}>
<div className="mb-2 flex items-center gap-1 px-1 pt-2"> <header className="mb-2 flex min-h-9 items-center gap-2">
<div className="flex min-w-0 flex-1 items-center"> <div className="flex min-w-0 flex-1 items-center">
<div className="inline-flex min-w-0 items-center"> <Image
<Image src="/logo.png"
src="/logo.png" alt="Nlotto"
alt="Nlotto" width={243}
width={243} height={84}
height={84} className="h-8 w-auto max-w-[min(100%,200px)] object-contain object-left"
className="h-9 w-auto max-w-[min(100%,220px)] object-contain object-left" priority
priority />
/>
</div>
</div> </div>
<LanguageSwitcher <div className="flex shrink-0 items-center gap-1">
variant="minimal" <LanguageSwitcher
showFlag={false} variant="minimal"
className="shrink-0 rounded-full border border-[#e4eaf4] bg-[#f8fafc]" showFlag={false}
/> className={cn(
<Link playerHeaderControl,
href="/rules" "rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:py-0 [&_button]:text-xs",
className="shrink-0 rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-3 py-1.5 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]" )}
> />
{tp("nav.rules")} <Link
</Link> href="/rules"
<button className={cn(
type="button" playerHeaderControl,
className="relative flex size-8 shrink-0 items-center justify-center rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]" "rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-2.5 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]",
aria-label={t("navigation.notifications")} )}
> >
<Bell className="size-4" aria-hidden /> {tp("nav.rules")}
<span className="absolute right-1.5 top-1.5 size-2 rounded-full bg-[#ff143d]" /> </Link>
</button> <button
</div> type="button"
className={cn(
playerHeaderControl,
"relative size-8 rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]",
)}
aria-label={t("navigation.notifications")}
>
<Bell className="size-4" aria-hidden />
<span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-[#ff143d]" />
</button>
</div>
</header>
<HallDrawPanel drawLive={drawLive} /> <HallDrawPanel drawLive={drawLive} />

6
src/features/hall/hall-wallet-strip.tsx
View File

@@ -86,10 +86,10 @@ export function HallWalletStrip() {
const availableMinor = Number(balance?.available_balance ?? 0); const availableMinor = Number(balance?.available_balance ?? 0);
return ( return (
<section className="mb-4 space-y-3" aria-label={t("wallet.balance")}> <section className="mb-3 space-y-2.5" aria-label={t("wallet.balance")}>
<div <div
className={cn( className={cn(
"relative overflow-hidden rounded-xl bg-[#e5002c] px-4 py-4 text-white shadow-[0_10px_28px_rgba(229,0,44,0.25)]", "relative overflow-hidden rounded-xl bg-[#e5002c] px-3 py-3 text-white shadow-[0_10px_28px_rgba(229,0,44,0.25)]",
)} )}
> >
<Image <Image
@@ -116,7 +116,7 @@ export function HallWalletStrip() {
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-2.5">
<TransferInDialog <TransferInDialog
idPrefix="hall-" idPrefix="hall-"
triggerVariant="hall" triggerVariant="hall"

6
src/features/hall/jackpot-burst-overlay.tsx
View File

@@ -84,19 +84,19 @@ export function JackpotBurstOverlay({ event, onClose }: JackpotBurstOverlayProps
</div> </div>
<div className="w-full space-y-2 text-left text-sm"> <div className="w-full space-y-2 text-left text-sm">
<div className="flex items-center justify-between gap-4 rounded-md bg-white/[0.05] px-3 py-2"> <div className="flex items-center justify-between gap-3 rounded-md bg-white/[0.05] px-3 py-2">
<span className="text-slate-300"> <span className="text-slate-300">
{t("hall.jackpotBurst.amount")} {t("hall.jackpotBurst.amount")}
</span> </span>
<span className="text-right font-black text-[#f5c542]">{amount}</span> <span className="text-right font-black text-[#f5c542]">{amount}</span>
</div> </div>
<div className="flex items-center justify-between gap-4 rounded-md bg-white/[0.05] px-3 py-2"> <div className="flex items-center justify-between gap-3 rounded-md bg-white/[0.05] px-3 py-2">
<span className="text-slate-300"> <span className="text-slate-300">
{t("hall.jackpotBurst.winners")} {t("hall.jackpotBurst.winners")}
</span> </span>
<span className="font-bold">{event.winner_count}</span> <span className="font-bold">{event.winner_count}</span>
</div> </div>
<div className="flex items-center justify-between gap-4 rounded-md bg-white/[0.05] px-3 py-2"> <div className="flex items-center justify-between gap-3 rounded-md bg-white/[0.05] px-3 py-2">
<span className="text-slate-300"> <span className="text-slate-300">
{t("hall.jackpotBurst.triggerLabel")} {t("hall.jackpotBurst.triggerLabel")}
</span> </span>

14
src/features/orders/ticket-order-detail-screen.tsx
View File

@@ -99,12 +99,10 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
return ( return (
<PlayerPanel <PlayerPanel
title={t("orders.betDetail")} title={t("orders.betDetail")}
subtitle={ticketNo}
eyebrow={t("brand.name")}
backHref="/orders" backHref="/orders"
backLabel={t("orders.title")} backLabel={t("orders.title")}
> >
<div className="space-y-4"> <div className="space-y-3">
<Skeleton className="h-12 rounded-xl" /> <Skeleton className="h-12 rounded-xl" />
<Skeleton className="h-56 rounded-xl" /> <Skeleton className="h-56 rounded-xl" />
</div> </div>
@@ -116,12 +114,10 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
return ( return (
<PlayerPanel <PlayerPanel
title={t("orders.betDetail")} title={t("orders.betDetail")}
subtitle={ticketNo}
eyebrow={t("brand.name")}
backHref="/orders" backHref="/orders"
backLabel={t("orders.title")} backLabel={t("orders.title")}
> >
<div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700"> <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
<p>{error ?? t("orders.noData")}</p> <p>{error ?? t("orders.noData")}</p>
<Button <Button
type="button" type="button"
@@ -179,12 +175,10 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
return ( return (
<PlayerPanel <PlayerPanel
title={t("orders.betDetail")} title={t("orders.betDetail")}
subtitle={data.ticket_no}
eyebrow={t("brand.name")}
backHref="/orders" backHref="/orders"
backLabel={t("orders.title")} backLabel={t("orders.title")}
> >
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-3">
<Card className="ring-0 border border-[#e8eef7] bg-white shadow-[0_8px_28px_rgba(15,23,42,0.05)]"> <Card className="ring-0 border border-[#e8eef7] bg-white shadow-[0_8px_28px_rgba(15,23,42,0.05)]">
<CardHeader className="space-y-2 border-b border-[#edf2f9] pb-3"> <CardHeader className="space-y-2 border-b border-[#edf2f9] pb-3">
<div className="flex flex-wrap items-center justify-between gap-2"> <div className="flex flex-wrap items-center justify-between gap-2">
@@ -198,7 +192,7 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
{t("orders.orderNo", { orderNo: data.order_no ?? "—" })} {t("orders.orderNo", { orderNo: data.order_no ?? "—" })}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4 text-sm"> <CardContent className="space-y-3 text-sm">
<div className="space-y-2.5 text-xs"> <div className="space-y-2.5 text-xs">
<div className="flex items-baseline justify-between gap-3"> <div className="flex items-baseline justify-between gap-3">
<span className="shrink-0 text-slate-500">{t("orders.drawNo")}</span> <span className="shrink-0 text-slate-500">{t("orders.drawNo")}</span>

8
src/features/orders/ticket-orders-list-screen.tsx
View File

@@ -156,11 +156,9 @@ export function TicketOrdersListScreen() {
return ( return (
<PlayerPanel <PlayerPanel
title={t("orders.title")} title={t("orders.title")}
subtitle={t("orders.subtitle")}
eyebrow={t("brand.name")}
containerClassName="max-w-[720px]" containerClassName="max-w-[720px]"
> >
<div className="space-y-4"> <div className="space-y-3">
<div className="rounded-2xl border border-[#dfe9f8] bg-white p-3 shadow-[0_10px_28px_rgba(15,23,42,0.05)] sm:p-4"> <div className="rounded-2xl border border-[#dfe9f8] bg-white p-3 shadow-[0_10px_28px_rgba(15,23,42,0.05)] sm:p-4">
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
@@ -333,7 +331,7 @@ export function TicketOrdersListScreen() {
))} ))}
</div> </div>
) : error ? ( ) : error ? (
<div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700"> <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
<p>{error}</p> <p>{error}</p>
<Button <Button
type="button" type="button"
@@ -345,7 +343,7 @@ export function TicketOrdersListScreen() {
</Button> </Button>
</div> </div>
) : items.length === 0 ? ( ) : items.length === 0 ? (
<div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-4 py-10 text-center"> <div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-3 py-8 text-center">
<p className="text-sm font-bold text-slate-700">{t("orders.empty")}</p> <p className="text-sm font-bold text-slate-700">{t("orders.empty")}</p>
<Link <Link
href="/hall" href="/hall"

4
src/features/player/entry-gate.tsx
View File

@@ -256,7 +256,7 @@ export function EntryGate() {
</div> </div>
</div> </div>
<div className="flex flex-1 flex-col px-4 py-6"> <div className="flex flex-1 flex-col px-3 py-5">
{phase === "loading" ? ( {phase === "loading" ? (
<div className="mx-auto w-full max-w-md"> <div className="mx-auto w-full max-w-md">
<div className="mb-6 flex items-center gap-2"> <div className="mb-6 flex items-center gap-2">
@@ -279,7 +279,7 @@ export function EntryGate() {
</div> </div>
</div> </div>
<div className="space-y-4"> <div className="space-y-3">
{steps.map((step) => ( {steps.map((step) => (
<div key={step.id} className="flex items-start gap-3"> <div key={step.id} className="flex items-start gap-3">
<div <div

6
src/features/results/check-winning-screen.tsx
View File

@@ -90,7 +90,7 @@ export function CheckWinningScreen() {
return ( return (
<PlayerPanel title={t("results.check.title")} backHref="/results" backLabel={t("results.title")}> <PlayerPanel title={t("results.check.title")} backHref="/results" backLabel={t("results.title")}>
<div className="space-y-4"> <div className="space-y-3">
<section className="overflow-hidden rounded-2xl border border-red-100 bg-white shadow-[0_12px_32px_rgba(15,23,42,0.06)]"> <section className="overflow-hidden rounded-2xl border border-red-100 bg-white shadow-[0_12px_32px_rgba(15,23,42,0.06)]">
<div className="bg-gradient-to-b from-red-50 to-white px-5 pb-5 pt-8 text-center"> <div className="bg-gradient-to-b from-red-50 to-white px-5 pb-5 pt-8 text-center">
<div className="mx-auto flex size-24 items-center justify-center rounded-full bg-white text-[#e5002c] shadow-[0_18px_40px_rgba(229,0,44,0.14)]"> <div className="mx-auto flex size-24 items-center justify-center rounded-full bg-white text-[#e5002c] shadow-[0_18px_40px_rgba(229,0,44,0.14)]">
@@ -104,7 +104,7 @@ export function CheckWinningScreen() {
</p> </p>
</div> </div>
<div className="space-y-3 px-4 pb-4"> <div className="space-y-2.5 px-3 pb-3">
<label className="block space-y-1.5"> <label className="block space-y-1.5">
<span className="text-xs font-black text-slate-700"> <span className="text-xs font-black text-slate-700">
{t("results.check.ticketNumber")} {t("results.check.ticketNumber")}
@@ -265,7 +265,7 @@ function WinningResultDialog({
<p className="font-black text-slate-950"> <p className="font-black text-slate-950">
{t("results.check.drawInfo")} {t("results.check.drawInfo")}
</p> </p>
<div className="mt-3 grid grid-cols-2 gap-4 text-slate-500"> <div className="mt-2.5 grid grid-cols-2 gap-3 text-slate-500">
<div> <div>
<p className="text-xs">{t("results.check.issueNo")}</p> <p className="text-xs">{t("results.check.issueNo")}</p>
<p className="mt-1 font-mono font-black text-slate-900">{data.draw.draw_no}</p> <p className="mt-1 font-mono font-black text-slate-900">{data.draw.draw_no}</p>

14
src/features/results/draw-result-detail-screen.tsx
View File

@@ -108,12 +108,10 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
return ( return (
<PlayerPanel <PlayerPanel
title={t("results.detailTitle")} title={t("results.detailTitle")}
subtitle={drawNo}
eyebrow={t("results.title")}
backHref="/results" backHref="/results"
backLabel={t("results.title")} backLabel={t("results.title")}
> >
<div className="space-y-4"> <div className="space-y-3">
<Skeleton className="h-12 rounded-xl" /> <Skeleton className="h-12 rounded-xl" />
<Skeleton className="h-56 rounded-xl" /> <Skeleton className="h-56 rounded-xl" />
</div> </div>
@@ -125,12 +123,10 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
return ( return (
<PlayerPanel <PlayerPanel
title={t("results.detailTitle")} title={t("results.detailTitle")}
subtitle={drawNo}
eyebrow={t("results.title")}
backHref="/results" backHref="/results"
backLabel={t("results.title")} backLabel={t("results.title")}
> >
<div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700"> <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
<p>{error ?? t("results.noData")}</p> <p>{error ?? t("results.noData")}</p>
<Button type="button" size="sm" variant="secondary" onClick={() => void load()}> <Button type="button" size="sm" variant="secondary" onClick={() => void load()}>
{t("actions.retry")} {t("actions.retry")}
@@ -156,12 +152,10 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
return ( return (
<PlayerPanel <PlayerPanel
title={t("results.detailTitle")} title={t("results.detailTitle")}
subtitle={data.draw_no}
eyebrow={t("results.title")}
backHref="/results" backHref="/results"
backLabel={t("results.title")} backLabel={t("results.title")}
> >
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-3">
<JackpotResultsStrip currencyCode={currency} /> <JackpotResultsStrip currencyCode={currency} />
<Card className="overflow-hidden border-[#e5edf8] bg-white shadow-[0_10px_28px_rgba(15,23,42,0.06)]"> <Card className="overflow-hidden border-[#e5edf8] bg-white shadow-[0_10px_28px_rgba(15,23,42,0.06)]">
@@ -209,7 +203,7 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
)} )}
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-4 pt-4"> <CardContent className="space-y-3 pt-3">
<div className="rounded-xl border border-[#e8eef7] bg-[#f8fbff] p-3 shadow-[0_4px_14px_rgba(15,23,42,0.04)]"> <div className="rounded-xl border border-[#e8eef7] bg-[#f8fbff] p-3 shadow-[0_4px_14px_rgba(15,23,42,0.04)]">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<p className="text-sm font-black text-[#0b3f96]"> <p className="text-sm font-black text-[#0b3f96]">

8
src/features/results/draw-results-list-screen.tsx
View File

@@ -108,8 +108,8 @@ export function DrawResultsListScreen() {
}, [fetchList, lastPage, loading, loadingMore, page]); }, [fetchList, lastPage, loading, loadingMore, page]);
return ( return (
<PlayerPanel title={t("results.title")} subtitle={t("results.subtitle")} eyebrow={t("brand.name")}> <PlayerPanel title={t("results.title")}>
<div className="space-y-4"> <div className="space-y-3">
<JackpotResultsStrip currencyCode={jackpotCurrency} /> <JackpotResultsStrip currencyCode={jackpotCurrency} />
<div className="rounded-xl border border-[#e6edf8] bg-[#f8fbff] p-3"> <div className="rounded-xl border border-[#e6edf8] bg-[#f8fbff] p-3">
@@ -215,7 +215,7 @@ export function DrawResultsListScreen() {
<Skeleton className="h-28 rounded-xl" /> <Skeleton className="h-28 rounded-xl" />
</div> </div>
) : error ? ( ) : error ? (
<div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700"> <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
<p>{error}</p> <p>{error}</p>
<Button <Button
type="button" type="button"
@@ -227,7 +227,7 @@ export function DrawResultsListScreen() {
</Button> </Button>
</div> </div>
) : items && items.length === 0 ? ( ) : items && items.length === 0 ? (
<div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-4 py-10 text-center text-sm text-slate-500"> <div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-3 py-8 text-center text-sm text-slate-500">
{t("results.empty")} {t("results.empty")}
</div> </div>
) : ( ) : (

2
src/features/results/twenty-three-results-grid.tsx
View File

@@ -72,7 +72,7 @@ export function TwentyThreeResultsGrid({
]; ];
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-3">
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
{prizeCards.map((card) => ( {prizeCards.map((card) => (
<div <div

3
src/features/rules/play-rules-screen.tsx
View File

@@ -81,11 +81,10 @@ export function PlayRulesScreen() {
return ( return (
<PlayerPanel <PlayerPanel
title={t("rules.title")} title={t("rules.title")}
subtitle={t("rules.subtitle")}
backHref="/hall" backHref="/hall"
className="bg-[#f7f9fd]" className="bg-[#f7f9fd]"
> >
<div className="space-y-4"> <div className="space-y-3">
<Card className="border-[#dbe7fb] bg-white shadow-sm"> <Card className="border-[#dbe7fb] bg-white shadow-sm">
<CardHeader className="space-y-3 pb-3"> <CardHeader className="space-y-3 pb-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">

2
src/features/wallet/transfer-in-screen.tsx
View File

@@ -48,7 +48,7 @@ export function TransferInScreen() {
if (loading && !balance) { if (loading && !balance) {
return ( return (
<div className="space-y-4"> <div className="space-y-3">
<Skeleton className="h-8 w-40" /> <Skeleton className="h-8 w-40" />
<Skeleton className="h-48 w-full rounded-xl" /> <Skeleton className="h-48 w-full rounded-xl" />
</div> </div>

2
src/features/wallet/transfer-out-screen.tsx
View File

@@ -48,7 +48,7 @@ export function TransferOutScreen() {
if (loading && !balance) { if (loading && !balance) {
return ( return (
<div className="space-y-4"> <div className="space-y-3">
<Skeleton className="h-8 w-40" /> <Skeleton className="h-8 w-40" />
<Skeleton className="h-48 w-full rounded-xl" /> <Skeleton className="h-48 w-full rounded-xl" />
</div> </div>

2
src/features/wallet/wallet-logs-block.tsx
View File

@@ -188,7 +188,7 @@ export function LogRow({
: "border-blue-200 bg-blue-50 text-blue-700"; : "border-blue-200 bg-blue-50 text-blue-700";
return ( return (
<li className="rounded-2xl border border-[#e1eaf6] bg-white px-4 py-3.5 text-sm shadow-[0_10px_28px_rgba(15,23,42,0.06)]"> <li className="rounded-2xl border border-[#e1eaf6] bg-white px-3 py-3 text-sm shadow-[0_10px_28px_rgba(15,23,42,0.06)]">
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">

6
src/features/wallet/wallet-logs-screen.tsx
View File

@@ -98,14 +98,12 @@ export function WalletLogsScreen() {
return ( return (
<PlayerPanel <PlayerPanel
title={t("wallet.logsTitle")} title={t("wallet.logsTitle")}
subtitle={t("wallet.logsSubtitle")}
eyebrow={t("brand.name")}
backHref="/wallet" backHref="/wallet"
backLabel={t("wallet.title")} backLabel={t("wallet.title")}
> >
<div className="space-y-4"> <div className="space-y-3">
{error ? ( {error ? (
<div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700"> <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
<p>{error}</p> <p>{error}</p>
<Button <Button
type="button" type="button"

8
src/features/wallet/wallet-screen.tsx
View File

@@ -140,10 +140,10 @@ export function WalletScreen() {
}, [hasMore, loadMore, loading, loadingMore, logsLoading]); }, [hasMore, loadMore, loading, loadingMore, logsLoading]);
return ( return (
<PlayerPanel title={t("wallet.title")} subtitle={t("wallet.subtitle")} eyebrow={t("brand.name")}> <PlayerPanel title={t("wallet.title")}>
<div className="space-y-4"> <div className="space-y-3">
{error ? ( {error ? (
<div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700"> <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
<p>{error}</p> <p>{error}</p>
<Button <Button
type="button" type="button"
@@ -155,7 +155,7 @@ export function WalletScreen() {
</div> </div>
) : null} ) : null}
<section className="relative overflow-hidden rounded-xl bg-[#e5002c] px-4 py-5 text-white shadow-[0_10px_28px_rgba(229,0,44,0.25)]"> <section className="relative overflow-hidden rounded-xl bg-[#e5002c] px-3 py-4 text-white shadow-[0_10px_28px_rgba(229,0,44,0.25)]">
<Image <Image
src="/entry/image5.png" src="/entry/image5.png"
alt="" alt=""

8
src/features/wallet/wallet-transfer-dialogs.tsx
View File

@@ -59,13 +59,13 @@ export function TransferInDialog({
{resolvedTriggerLabel} {resolvedTriggerLabel}
</Button> </Button>
<DialogContent showCloseButton className="gap-0 overflow-hidden p-0 sm:max-w-md"> <DialogContent showCloseButton className="gap-0 overflow-hidden p-0 sm:max-w-md">
<DialogHeader className="space-y-1.5 border-b border-border px-5 py-4 text-left"> <DialogHeader className="space-y-1.5 border-b border-border px-4 py-3 text-left">
<DialogTitle className="text-lg font-semibold">{t("wallet.transferInTitle")}</DialogTitle> <DialogTitle className="text-lg font-semibold">{t("wallet.transferInTitle")}</DialogTitle>
<DialogDescription className="text-sm leading-relaxed"> <DialogDescription className="text-sm leading-relaxed">
{t("wallet.dialogInDescription", { currency })} {t("wallet.dialogInDescription", { currency })}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="px-5 py-4"> <div className="px-4 py-3">
<TransferInPanel <TransferInPanel
variant="dialog" variant="dialog"
currency={currency} currency={currency}
@@ -117,13 +117,13 @@ export function TransferOutDialog({
{resolvedTriggerLabel} {resolvedTriggerLabel}
</Button> </Button>
<DialogContent showCloseButton className="gap-0 overflow-hidden p-0 sm:max-w-md"> <DialogContent showCloseButton className="gap-0 overflow-hidden p-0 sm:max-w-md">
<DialogHeader className="space-y-1.5 border-b border-border px-5 py-4 text-left"> <DialogHeader className="space-y-1.5 border-b border-border px-4 py-3 text-left">
<DialogTitle className="text-lg font-semibold">{t("wallet.transferOutTitle")}</DialogTitle> <DialogTitle className="text-lg font-semibold">{t("wallet.transferOutTitle")}</DialogTitle>
<DialogDescription className="text-sm leading-relaxed"> <DialogDescription className="text-sm leading-relaxed">
{t("wallet.dialogOutDescription")} {t("wallet.dialogOutDescription")}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="px-5 py-4"> <div className="px-4 py-3">
<TransferOutPanel <TransferOutPanel
variant="dialog" variant="dialog"
currency={currency} currency={currency}

15
src/features/wallet/wallet-transfer-forms.tsx
View File

@@ -24,6 +24,7 @@ import {
parseDecimalInputToMinor, parseDecimalInputToMinor,
} from "@/lib/money"; } from "@/lib/money";
import { useCurrencyCatalog } from "@/hooks/use-currency-catalog"; import { useCurrencyCatalog } from "@/hooks/use-currency-catalog";
import { randomIdempotentKey } from "@/lib/utils";
import { formatWalletClientError } from "@/lib/wallet-api-error"; import { formatWalletClientError } from "@/lib/wallet-api-error";
import { LotteryApiBizError } from "@/types/api/errors"; import { LotteryApiBizError } from "@/types/api/errors";
@@ -57,7 +58,7 @@ type PanelVariant = "dialog" | "page";
function TransferInfoBlock({ children }: { children: ReactNode }) { function TransferInfoBlock({ children }: { children: ReactNode }) {
return ( return (
<div className="rounded-lg border border-border bg-muted/40 px-4 py-3 text-sm leading-relaxed"> <div className="rounded-lg border border-border bg-muted/40 px-3 py-2.5 text-sm leading-relaxed">
{children} {children}
</div> </div>
); );
@@ -160,7 +161,7 @@ export function TransferInPanel({
await postWalletTransferIn({ await postWalletTransferIn({
amount: parsedMinor, amount: parsedMinor,
currency, currency,
idempotent_key: crypto.randomUUID(), idempotent_key: randomIdempotentKey(),
}); });
toast.success(t("wallet.successIn")); toast.success(t("wallet.successIn"));
setAmountText(""); setAmountText("");
@@ -205,7 +206,7 @@ export function TransferInPanel({
return ( return (
<> <>
<div className="grid gap-4"> <div className="grid gap-3">
<TransferInfoBlock> <TransferInfoBlock>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
{t("wallet.mainBalance")}{" "} {t("wallet.mainBalance")}{" "}
@@ -292,7 +293,7 @@ export function TransferOutPanel({
await postWalletTransferOut({ await postWalletTransferOut({
amount: parsedMinor, amount: parsedMinor,
currency, currency,
idempotent_key: crypto.randomUUID(), idempotent_key: randomIdempotentKey(),
}); });
toast.success(t("wallet.successOut")); toast.success(t("wallet.successOut"));
setAmountText(""); setAmountText("");
@@ -337,7 +338,7 @@ export function TransferOutPanel({
return ( return (
<> <>
<div className="grid gap-4"> <div className="grid gap-3">
<TransferInfoBlock> <TransferInfoBlock>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
{t("wallet.lotteryAvailable")}{" "} {t("wallet.lotteryAvailable")}{" "}
@@ -395,8 +396,6 @@ export function TransferInPage({
return ( return (
<PlayerPanel <PlayerPanel
title={t("wallet.transferInTitle")} title={t("wallet.transferInTitle")}
subtitle={t("wallet.transferInSubtitle", { currency })}
eyebrow={t("wallet.title")}
backHref="/wallet" backHref="/wallet"
backLabel={t("wallet.title")} backLabel={t("wallet.title")}
> >
@@ -431,8 +430,6 @@ export function TransferOutPage({
return ( return (
<PlayerPanel <PlayerPanel
title={t("wallet.transferOutTitle")} title={t("wallet.transferOutTitle")}
subtitle={t("wallet.transferOutSubtitle", { currency })}
eyebrow={t("wallet.title")}
backHref="/wallet" backHref="/wallet"
backLabel={t("wallet.title")} backLabel={t("wallet.title")}
> >

11
src/lib/player-spacing.ts Normal file
View File

@@ -0,0 +1,11 @@
/** 玩家端统一紧凑间距（页面壳、区块堆叠、区块间距） */
export const playerPageInset = "px-3 pb-6 pt-2";
/** 顶栏：左右等宽列 + 居中标题，避免返回键与标题高低不齐 */
export const playerPageHeader =
"mb-2 grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-x-2";
/** 顶栏左右控件统一高度 */
export const playerHeaderControl =
"inline-flex h-8 shrink-0 items-center justify-center";
export const playerStack = "space-y-3";
export const playerStackGap = "gap-3";
export const playerSectionMb = "mb-3";

12
src/lib/utils.ts
View File

@@ -4,3 +4,15 @@ import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs))
} }
/** 幂等键：优先 Web Crypto，HTTP/旧环境回退为类 UUID 字符串 */
export function randomIdempotentKey(): string {
if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
return crypto.randomUUID()
}
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
const r = (Math.random() * 16) | 0
const v = c === "x" ? r : (r & 0x3) | 0x8
return v.toString(16)
})
}