xiaokang/lotteryFront
1
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);
return (
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-3">
<DrawResultDetailScreen drawNo={drawNo} />
</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() {
return (
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-3">
<DrawResultsListScreen />
</div>
);

28
src/app/globals.css
View File

@@ -127,4 +127,32 @@
html {
@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 (
<div className="min-h-dvh bg-white text-foreground">
<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}
</main>
<PlayerBottomNav />

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

@@ -3,7 +3,7 @@
import Link from "next/link";
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 { cn } from "@/lib/utils";
@@ -30,13 +30,6 @@ const tabs = [
icon: ClipboardList,
match: (p: string) => p === "/orders" || p.startsWith("/orders/"),
},
{
href: "/rules",
labelKey: "nav.rules",
labelDefault: "规则",
icon: BookOpen,
match: (p: string) => p === "/rules",
},
{
href: "/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"
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 }) => {
const active = match(pathname);
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 { LanguageSwitcher } from "@/components/language-switcher";
import {
playerHeaderControl,
playerPageHeader,
playerPageInset,
} from "@/lib/player-spacing";
import { cn } from "@/lib/utils";
type PlayerPanelProps = {
title: string;
subtitle?: string;
eyebrow?: string;
children: ReactNode;
backHref?: string;
backLabel?: string;
@@ -22,7 +25,6 @@ type PlayerPanelProps = {
export function PlayerPanel({
title,
subtitle,
children,
backHref = "/hall",
backLabel,
@@ -37,42 +39,53 @@ export function PlayerPanel({
<div className={cn("mx-auto w-full max-w-[480px]", containerClassName)}>
<section
className={cn(
"overflow-hidden bg-white px-4 pb-8 pt-4 text-slate-900",
"overflow-hidden bg-white text-slate-900",
playerPageInset,
className,
)}
>
<div className="mb-3 flex items-center gap-2 px-1 pt-3">
<Link
href={backHref}
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]"
>
<ChevronLeft className="size-4" aria-hidden />
{resolvedBackLabel}
</Link>
<div className="min-w-0 flex-1 text-center">
<h1 className="truncate text-lg font-black tracking-normal text-[#0b3f96]">
<header className={playerPageHeader}>
<div className="flex min-w-0 justify-start">
<Link
href={backHref}
className={cn(
playerHeaderControl,
"gap-0.5 rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-2 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]",
)}
>
<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}
</h1>
{subtitle ? (
<p className="truncate text-[11px] font-medium text-slate-500">
{subtitle}
</p>
) : null}
</div>
<LanguageSwitcher
variant="minimal"
showFlag={false}
className="shrink-0 rounded-full border border-[#e4eaf4] bg-[#f8fafc]"
/>
<button
type="button"
className="relative flex size-9 shrink-0 items-center justify-center rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]"
aria-label={t("navigation.notifications")}
>
<Bell className="size-5" aria-hidden />
<span className="absolute right-2 top-2 size-2 rounded-full bg-[#ff143d]" />
</button>
</div>
<div className="flex min-w-0 items-center justify-end gap-1">
<LanguageSwitcher
variant="minimal"
showFlag={false}
className={cn(
playerHeaderControl,
"rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:py-0 [&_button]:text-xs",
)}
/>
<button
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>
{children}
</section>
</div>

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

@@ -12,7 +12,7 @@ function Card({
data-slot="card"
data-size={size}
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
)}
{...props}
@@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card-header"
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
)}
{...props}
@@ -73,7 +73,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
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}
/>
)
@@ -84,7 +84,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card-footer"
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
)}
{...props}

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

@@ -10,35 +10,39 @@ const Toaster = ({ ...props }: ToasterProps) => {
return (
<Sonner
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"
icons={{
success: (
<CircleCheckIcon className="size-4" />
),
info: (
<InfoIcon className="size-4" />
),
warning: (
<TriangleAlertIcon className="size-4" />
),
error: (
<OctagonXIcon className="size-4" />
),
loading: (
<Loader2Icon className="size-4 animate-spin" />
),
success: <CircleCheckIcon className="size-3.5 shrink-0" />,
info: <InfoIcon className="size-3.5 shrink-0" />,
warning: <TriangleAlertIcon className="size-3.5 shrink-0" />,
error: <OctagonXIcon className="size-3.5 shrink-0" />,
loading: <Loader2Icon className="size-3.5 shrink-0 animate-spin" />,
}}
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
"--border-radius": "var(--radius)",
"--border-radius": "calc(var(--radius) * 0.8)",
"--width": "min(280px, calc(100vw - 24px))",
} as React.CSSProperties
}
toastOptions={{
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}

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

@@ -4,6 +4,7 @@ import {
AlertTriangleIcon,
CheckCircle2,
LoaderCircle,
Lock,
WalletCards,
XIcon,
} from "lucide-react";
@@ -137,7 +138,7 @@ export function HallBetPreviewDialog({
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"
>
<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
type="button"
onClick={() => onOpenChange(false)}
@@ -172,9 +173,9 @@ export function HallBetPreviewDialog({
</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 ? (
<p className="text-sm text-slate-500">{t("hall.preview.empty")}</p>
) : (
@@ -291,7 +292,7 @@ export function HallBetPreviewDialog({
</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
type="button"
variant="outline"
@@ -305,8 +306,9 @@ export function HallBetPreviewDialog({
type="button"
onClick={onConfirmPlace}
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
? t("hall.preview.submitting")
: allowSubmit

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

@@ -42,7 +42,7 @@ export function HallBetResultDialog({
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"
>
<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
type="button"
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)]">
<CheckCircle2 className="size-11" strokeWidth={2.5} />
</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">
{t("hall.result.title")}
</DialogTitle>
@@ -68,9 +68,9 @@ export function HallBetResultDialog({
</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 ? (
<p className="text-sm text-slate-500">
{t("hall.result.empty")}
@@ -92,7 +92,7 @@ export function HallBetResultDialog({
</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">
<span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-[#0755c7] text-white">
<ClipboardList className="size-5" />
@@ -106,7 +106,7 @@ export function HallBetResultDialog({
</span>
</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>
{t("hall.result.orderNo")}:{" "}
<span className="font-mono font-black text-[#0b3f96]">{data.order_no}</span>
@@ -198,7 +198,7 @@ export function HallBetResultDialog({
</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
type="button"
variant="outline"

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

@@ -1,6 +1,6 @@
"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 { useTranslation } from "react-i18next";
import { toast } from "sonner";
@@ -865,7 +865,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
if (catalogState.kind === "error") {
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>
<Button
type="button"
@@ -886,7 +886,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
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="grid grid-cols-4 gap-1">
{categoryTabs.map((tab) => {
@@ -920,7 +920,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
</div>
{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>
<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">
<Ticket className="size-7" aria-hidden />
</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")}
</p>
<p className="mt-1 text-xs">{t("hall.closed.subtitle")}</p>
@@ -1236,7 +1236,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
</button>
</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">
{t("hall.table.draftTotal")}
</span>
@@ -1255,9 +1255,18 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
type="button"
disabled={!canSubmit || previewLoading}
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
? t("hall.table.previewing")
: !isBettable

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

@@ -90,7 +90,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
if (error) {
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>
<Button
type="button"
@@ -107,7 +107,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
if (raw === undefined || display === undefined) {
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">
<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) {
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")}
</section>
);
@@ -130,7 +130,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
return (
<section
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",
)}
aria-label={t("draw.currentIssue")}

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

@@ -142,7 +142,7 @@ export function HallPlayCatalogPanel() {
);
return (
<div className="space-y-6">
<div className="space-y-3">
<p className="text-xs text-muted-foreground">
{t("hall.playCatalog.meta", {
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 { useHallDrawLive } from "@/features/hall/use-hall-draw-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。
@@ -24,40 +26,49 @@ export function HallScreen() {
return (
<div className="mx-auto w-full max-w-[480px]">
<section className="overflow-hidden bg-white px-4 pb-8 pt-4 text-slate-900">
<div className="mb-2 flex items-center gap-1 px-1 pt-2">
<section className={cn("overflow-hidden bg-white text-slate-900", playerPageInset)}>
<header className="mb-2 flex min-h-9 items-center gap-2">
<div className="flex min-w-0 flex-1 items-center">
<div className="inline-flex min-w-0 items-center">
<Image
src="/logo.png"
alt="Nlotto"
width={243}
height={84}
className="h-9 w-auto max-w-[min(100%,220px)] object-contain object-left"
priority
/>
</div>
<Image
src="/logo.png"
alt="Nlotto"
width={243}
height={84}
className="h-8 w-auto max-w-[min(100%,200px)] object-contain object-left"
priority
/>
</div>
<LanguageSwitcher
variant="minimal"
showFlag={false}
className="shrink-0 rounded-full border border-[#e4eaf4] bg-[#f8fafc]"
/>
<Link
href="/rules"
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>
<button
type="button"
className="relative flex size-8 shrink-0 items-center justify-center 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-2 rounded-full bg-[#ff143d]" />
</button>
</div>
<div className="flex shrink-0 items-center gap-1">
<LanguageSwitcher
variant="minimal"
showFlag={false}
className={cn(
playerHeaderControl,
"rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:py-0 [&_button]:text-xs",
)}
/>
<Link
href="/rules"
className={cn(
playerHeaderControl,
"rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-2.5 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]",
)}
>
{tp("nav.rules")}
</Link>
<button
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} />

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

@@ -86,10 +86,10 @@ export function HallWalletStrip() {
const availableMinor = Number(balance?.available_balance ?? 0);
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
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
@@ -116,7 +116,7 @@ export function HallWalletStrip() {
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-2 gap-2.5">
<TransferInDialog
idPrefix="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 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">
{t("hall.jackpotBurst.amount")}
</span>
<span className="text-right font-black text-[#f5c542]">{amount}</span>
</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">
{t("hall.jackpotBurst.winners")}
</span>
<span className="font-bold">{event.winner_count}</span>
</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">
{t("hall.jackpotBurst.triggerLabel")}
</span>

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

@@ -99,12 +99,10 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
return (
<PlayerPanel
title={t("orders.betDetail")}
subtitle={ticketNo}
eyebrow={t("brand.name")}
backHref="/orders"
backLabel={t("orders.title")}
>
<div className="space-y-4">
<div className="space-y-3">
<Skeleton className="h-12 rounded-xl" />
<Skeleton className="h-56 rounded-xl" />
</div>
@@ -116,12 +114,10 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
return (
<PlayerPanel
title={t("orders.betDetail")}
subtitle={ticketNo}
eyebrow={t("brand.name")}
backHref="/orders"
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>
<Button
type="button"
@@ -179,12 +175,10 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
return (
<PlayerPanel
title={t("orders.betDetail")}
subtitle={data.ticket_no}
eyebrow={t("brand.name")}
backHref="/orders"
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)]">
<CardHeader className="space-y-2 border-b border-[#edf2f9] pb-3">
<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 ?? "—" })}
</CardDescription>
</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="flex items-baseline justify-between gap-3">
<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 (
<PlayerPanel
title={t("orders.title")}
subtitle={t("orders.subtitle")}
eyebrow={t("brand.name")}
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="flex items-center justify-between gap-3">
<div className="min-w-0 flex-1">
@@ -333,7 +331,7 @@ export function TicketOrdersListScreen() {
))}
</div>
) : 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>
<Button
type="button"
@@ -345,7 +343,7 @@ export function TicketOrdersListScreen() {
</Button>
</div>
) : 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>
<Link
href="/hall"

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

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

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

@@ -90,7 +90,7 @@ export function CheckWinningScreen() {
return (
<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)]">
<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)]">
@@ -104,7 +104,7 @@ export function CheckWinningScreen() {
</p>
</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">
<span className="text-xs font-black text-slate-700">
{t("results.check.ticketNumber")}
@@ -265,7 +265,7 @@ function WinningResultDialog({
<p className="font-black text-slate-950">
{t("results.check.drawInfo")}
</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>
<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>

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

@@ -108,12 +108,10 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
return (
<PlayerPanel
title={t("results.detailTitle")}
subtitle={drawNo}
eyebrow={t("results.title")}
backHref="/results"
backLabel={t("results.title")}
>
<div className="space-y-4">
<div className="space-y-3">
<Skeleton className="h-12 rounded-xl" />
<Skeleton className="h-56 rounded-xl" />
</div>
@@ -125,12 +123,10 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
return (
<PlayerPanel
title={t("results.detailTitle")}
subtitle={drawNo}
eyebrow={t("results.title")}
backHref="/results"
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>
<Button type="button" size="sm" variant="secondary" onClick={() => void load()}>
{t("actions.retry")}
@@ -156,12 +152,10 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
return (
<PlayerPanel
title={t("results.detailTitle")}
subtitle={data.draw_no}
eyebrow={t("results.title")}
backHref="/results"
backLabel={t("results.title")}
>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-3">
<JackpotResultsStrip currencyCode={currency} />
<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>
</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="flex items-center justify-between gap-2">
<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]);
return (
<PlayerPanel title={t("results.title")} subtitle={t("results.subtitle")} eyebrow={t("brand.name")}>
<div className="space-y-4">
<PlayerPanel title={t("results.title")}>
<div className="space-y-3">
<JackpotResultsStrip currencyCode={jackpotCurrency} />
<div className="rounded-xl border border-[#e6edf8] bg-[#f8fbff] p-3">
@@ -215,7 +215,7 @@ export function DrawResultsListScreen() {
<Skeleton className="h-28 rounded-xl" />
</div>
) : 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>
<Button
type="button"
@@ -227,7 +227,7 @@ export function DrawResultsListScreen() {
</Button>
</div>
) : 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")}
</div>
) : (

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

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

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

@@ -81,11 +81,10 @@ export function PlayRulesScreen() {
return (
<PlayerPanel
title={t("rules.title")}
subtitle={t("rules.subtitle")}
backHref="/hall"
className="bg-[#f7f9fd]"
>
<div className="space-y-4">
<div className="space-y-3">
<Card className="border-[#dbe7fb] bg-white shadow-sm">
<CardHeader className="space-y-3 pb-3">
<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) {
return (
<div className="space-y-4">
<div className="space-y-3">
<Skeleton className="h-8 w-40" />
<Skeleton className="h-48 w-full rounded-xl" />
</div>

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

@@ -48,7 +48,7 @@ export function TransferOutScreen() {
if (loading && !balance) {
return (
<div className="space-y-4">
<div className="space-y-3">
<Skeleton className="h-8 w-40" />
<Skeleton className="h-48 w-full rounded-xl" />
</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";
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="min-w-0 flex-1">
<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 (
<PlayerPanel
title={t("wallet.logsTitle")}
subtitle={t("wallet.logsSubtitle")}
eyebrow={t("brand.name")}
backHref="/wallet"
backLabel={t("wallet.title")}
>
<div className="space-y-4">
<div className="space-y-3">
{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>
<Button
type="button"

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

@@ -140,10 +140,10 @@ export function WalletScreen() {
}, [hasMore, loadMore, loading, loadingMore, logsLoading]);
return (
<PlayerPanel title={t("wallet.title")} subtitle={t("wallet.subtitle")} eyebrow={t("brand.name")}>
<div className="space-y-4">
<PlayerPanel title={t("wallet.title")}>
<div className="space-y-3">
{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>
<Button
type="button"
@@ -155,7 +155,7 @@ export function WalletScreen() {
</div>
) : 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
src="/entry/image5.png"
alt=""

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

@@ -59,13 +59,13 @@ export function TransferInDialog({
{resolvedTriggerLabel}
</Button>
<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>
<DialogDescription className="text-sm leading-relaxed">
{t("wallet.dialogInDescription", { currency })}
</DialogDescription>
</DialogHeader>
<div className="px-5 py-4">
<div className="px-4 py-3">
<TransferInPanel
variant="dialog"
currency={currency}
@@ -117,13 +117,13 @@ export function TransferOutDialog({
{resolvedTriggerLabel}
</Button>
<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>
<DialogDescription className="text-sm leading-relaxed">
{t("wallet.dialogOutDescription")}
</DialogDescription>
</DialogHeader>
<div className="px-5 py-4">
<div className="px-4 py-3">
<TransferOutPanel
variant="dialog"
currency={currency}

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

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