261 lines
8.7 KiB
TypeScript
261 lines
8.7 KiB
TypeScript
"use client";
|
|
|
|
import type { TFunction } from "i18next";
|
|
import {
|
|
AlertCircle,
|
|
AlertTriangle,
|
|
CheckCircle2,
|
|
Globe,
|
|
Loader2,
|
|
RefreshCw,
|
|
ShieldCheck,
|
|
} from "lucide-react";
|
|
import Image from "next/image";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { LanguageSwitcher } from "@/components/language-switcher";
|
|
import { Button, buttonVariants } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type DesktopEntryStepStatus = "pending" | "in-progress" | "done" | "error";
|
|
|
|
type DesktopEntryStep = {
|
|
id: "token" | "account" | "hall";
|
|
status: DesktopEntryStepStatus;
|
|
};
|
|
|
|
type DesktopFailureRow = {
|
|
code?: string;
|
|
detailKey?: string;
|
|
fallbackMessage?: string;
|
|
};
|
|
|
|
type PlayerEntryDesktopProps = {
|
|
phase: "loading" | "success" | "failed";
|
|
waitingForToken: boolean;
|
|
progress: number;
|
|
steps: DesktopEntryStep[];
|
|
failureDetails: DesktopFailureRow[];
|
|
t: TFunction<"entry">;
|
|
tc: TFunction<"common">;
|
|
mainSiteUrl: string;
|
|
onRetry: () => void;
|
|
};
|
|
|
|
/** PC Token 入场校验，视觉与账号密码登录保持一致。 */
|
|
export function PlayerEntryDesktop({
|
|
phase,
|
|
waitingForToken,
|
|
progress,
|
|
steps,
|
|
failureDetails,
|
|
t,
|
|
tc,
|
|
mainSiteUrl,
|
|
onRetry,
|
|
}: PlayerEntryDesktopProps) {
|
|
const isLoading = phase === "loading" || waitingForToken;
|
|
|
|
return (
|
|
<div className="relative hidden min-h-0 flex-1 overflow-y-auto lg:flex lg:items-center lg:justify-center lg:px-4 lg:py-4 xl:px-8 xl:py-10">
|
|
<div className="pointer-events-none absolute inset-0" aria-hidden>
|
|
<Image
|
|
src="/entry/login-pc-bg.png"
|
|
alt=""
|
|
fill
|
|
sizes="100vw"
|
|
className="object-cover object-center"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative z-10 flex min-h-[min(560px,calc(100dvh-2rem))] w-full max-w-[960px] overflow-hidden rounded-[1.5rem] bg-white shadow-[0_24px_80px_rgba(15,23,42,0.12)] xl:min-h-[min(640px,88vh)] xl:max-w-[1080px] xl:rounded-[2rem]">
|
|
<div className="relative w-[min(48%,400px)] shrink-0 self-stretch overflow-hidden bg-[#f8fafc] xl:w-[min(50%,460px)]">
|
|
<Image
|
|
src="/entry/login-pc-hero.png"
|
|
alt={t("header.backgroundAlt")}
|
|
fill
|
|
sizes="(max-width: 1280px) 400px, 460px"
|
|
className="object-cover object-center"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex min-w-0 flex-1 flex-col px-6 py-5 xl:px-10 xl:py-10">
|
|
<div className="flex justify-end">
|
|
<LanguageSwitcher variant="pill" menuAlign="end" showFlag={false} useFullLabel />
|
|
</div>
|
|
|
|
<div className="mx-auto flex w-full max-w-[25rem] flex-1 flex-col justify-center">
|
|
{isLoading ? (
|
|
<EntryProgress progress={progress} steps={steps} t={t} />
|
|
) : null}
|
|
{phase === "failed" ? (
|
|
<EntryFailure
|
|
details={failureDetails}
|
|
mainSiteUrl={mainSiteUrl}
|
|
onRetry={onRetry}
|
|
t={t}
|
|
tc={tc}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-2 text-xs font-medium text-slate-500">
|
|
<ShieldCheck className="size-4 text-red-500" aria-hidden />
|
|
<span>{t("footer.secure")}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EntryProgress({
|
|
progress,
|
|
steps,
|
|
t,
|
|
}: Pick<PlayerEntryDesktopProps, "progress" | "steps" | "t">) {
|
|
return (
|
|
<>
|
|
<div className="mb-8 flex items-center gap-3">
|
|
<div className="flex size-10 items-center justify-center rounded-lg bg-red-600 text-white shadow-[0_6px_16px_rgba(220,38,38,0.2)]">
|
|
<Globe className="size-5" aria-hidden />
|
|
</div>
|
|
<div>
|
|
<h1 className="font-semibold text-slate-900">{t("loading.title")}</h1>
|
|
<p className="mt-0.5 text-xs text-slate-500">{t("loading.progress")}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-8">
|
|
<div className="mb-2 flex justify-between text-xs text-slate-500">
|
|
<span>{t("loading.progress")}</span>
|
|
<span className="font-semibold text-red-600">{progress}%</span>
|
|
</div>
|
|
<div className="h-2 overflow-hidden rounded-full bg-slate-100">
|
|
<div
|
|
className="h-full rounded-full bg-red-600 transition-all duration-500"
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-5">
|
|
{steps.map((step) => (
|
|
<div key={step.id} className="flex items-start gap-3">
|
|
<StepIcon status={step.status} />
|
|
<div className="min-w-0 flex-1 pt-0.5">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="font-medium text-slate-800">{t(`steps.${step.id}.title`)}</span>
|
|
<StepBadge status={step.status} />
|
|
</div>
|
|
<p className="mt-1 text-xs leading-5 text-slate-500">
|
|
{t(`steps.${step.id}.description`)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function EntryFailure({
|
|
details,
|
|
mainSiteUrl,
|
|
onRetry,
|
|
t,
|
|
tc,
|
|
}: Pick<PlayerEntryDesktopProps, "mainSiteUrl" | "onRetry" | "t" | "tc"> & {
|
|
details: DesktopFailureRow[];
|
|
}) {
|
|
return (
|
|
<div>
|
|
<div className="mb-7 text-center">
|
|
<div className="mx-auto mb-4 flex size-14 items-center justify-center rounded-full bg-red-50 text-red-600">
|
|
<AlertTriangle className="size-7" aria-hidden />
|
|
</div>
|
|
<h1 className="text-xl font-bold text-red-600">{t("failure.title")}</h1>
|
|
<p className="mt-1 text-sm text-slate-500">{t("failure.subtitle")}</p>
|
|
</div>
|
|
|
|
{details.length > 0 ? (
|
|
<div className="mb-6 overflow-hidden rounded-xl border border-red-100 bg-red-50/60">
|
|
<div className="border-b border-red-100 bg-red-50 px-4 py-2.5 text-sm font-medium text-red-800">
|
|
{t("failure.detailsTitle")}
|
|
</div>
|
|
<div className="divide-y divide-red-100">
|
|
{details.map((detail, index) => (
|
|
<div key={`${detail.code}-${index}`} className="grid grid-cols-[2rem_6.5rem_minmax(0,1fr)] gap-2 px-4 py-3 text-xs">
|
|
<span className="text-slate-400">{index + 1}</span>
|
|
<span className="font-medium text-slate-700">{detail.code ?? tc("errors.general")}</span>
|
|
<span className="leading-5 text-slate-600">
|
|
{detail.detailKey
|
|
? t(detail.detailKey)
|
|
: (detail.fallbackMessage ?? t("errors.unknown"))}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="flex gap-3">
|
|
<Button onClick={onRetry} className="flex-1 gap-2 bg-red-600 text-white hover:bg-red-700" type="button">
|
|
<RefreshCw className="size-4" aria-hidden />
|
|
{t("failure.reenter")}
|
|
</Button>
|
|
{mainSiteUrl ? (
|
|
<a
|
|
href={mainSiteUrl}
|
|
target="_top"
|
|
rel="noopener noreferrer"
|
|
className={cn(buttonVariants({ variant: "outline" }), "flex-1")}
|
|
>
|
|
{t("failure.backToMainSite")}
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StepIcon({ status }: { status: DesktopEntryStepStatus }) {
|
|
const className = cn(
|
|
"flex size-8 shrink-0 items-center justify-center rounded-full border-2",
|
|
status === "done" && "border-emerald-500 bg-emerald-500 text-white",
|
|
status === "in-progress" && "border-blue-600 bg-blue-600 text-white",
|
|
status === "pending" && "border-slate-200 bg-slate-50 text-slate-400",
|
|
status === "error" && "border-red-500 bg-red-500 text-white",
|
|
);
|
|
|
|
return (
|
|
<div className={className}>
|
|
{status === "done" ? <CheckCircle2 className="size-4" aria-hidden /> : null}
|
|
{status === "in-progress" ? <Loader2 className="size-4 animate-spin" aria-hidden /> : null}
|
|
{status === "pending" ? <div className="size-2 rounded-full bg-current" aria-hidden /> : null}
|
|
{status === "error" ? <AlertCircle className="size-4" aria-hidden /> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StepBadge({ status }: { status: DesktopEntryStepStatus }) {
|
|
const { t } = useTranslation("common");
|
|
const className = cn(
|
|
"shrink-0 rounded px-2 py-0.5 text-xs font-medium",
|
|
status === "done" && "bg-emerald-50 text-emerald-700",
|
|
status === "in-progress" && "bg-blue-50 text-blue-700",
|
|
status === "pending" && "bg-slate-100 text-slate-500",
|
|
status === "error" && "bg-red-50 text-red-700",
|
|
);
|
|
const label = {
|
|
done: t("status.done"),
|
|
"in-progress": t("status.inProgress"),
|
|
pending: t("status.pending"),
|
|
error: t("status.failed"),
|
|
}[status];
|
|
|
|
return <span className={className}>{label}</span>;
|
|
}
|