hanhan/englishPk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize PK page responsive layout

Browse Source
This commit is contained in:
寒寒
2026-06-30 16:22:55 +08:00
parent a5a35272fe
commit 68bc72ff2a
2 changed files with 356 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pk/page.tsx
+46 -43
View File
@@ -35,6 +35,7 @@ type AppSettings = {
};
const grades: Grade[] = ["小班", "中班", "大班"];
const pkPageCursorClass = "cursor-hammer";
function shuffleArray<T>(array: T[]) {
const next = [...array];
@@ -58,14 +59,14 @@ function TeamCard({
return (
<div
className={cn(
"flex-1 rounded-lg border-4 p-[clamp(10px,1.6vw,16px)] text-center transition",
"pk-team-card flex-1 rounded-lg border-4 p-[clamp(10px,1.6vw,16px)] text-center transition",
red ? "bg-red-50 text-red-700" : "bg-blue-50 text-blue-700",
active && (red ? "border-red-400 shadow-lg" : "border-blue-400 shadow-lg"),
!active && "border-transparent",
)}
>
<div className="text-[clamp(16px,1.8vw,22px)] font-bold">{red ? "🔴 红队" : "🔵 蓝队"}</div>
<div className="text-[clamp(30px,4vw,48px)] font-black leading-tight">{score}</div>
<div className="pk-team-label text-[clamp(16px,1.8vw,22px)] font-bold">{red ? "🔴 红队" : "🔵 蓝队"}</div>
<div className="pk-team-score text-[clamp(30px,4vw,48px)] font-black leading-tight">{score}</div>
</div>
);
}
@@ -292,25 +293,25 @@ export default function PkPage() {
if (!started) {
return (
<main className="mx-auto grid min-h-[calc(100vh-56px)] max-w-5xl place-items-center px-4 py-8">
<section className="w-full rounded-[28px] bg-white p-[clamp(24px,5vw,64px)] text-center shadow-soft">
<div className="mb-5 text-[clamp(72px,11vw,126px)] leading-none">🦊 VS 🦓</div>
<h1 className="text-balance text-[clamp(32px,5vw,56px)] font-black text-rose-500">字母单词PK赛</h1>
<p className="mt-4 text-[clamp(17px,2vw,22px)] text-slate-600">
<main className={cn(pkPageCursorClass, "pk-start-stage mx-auto grid min-h-[calc(100vh-56px)] max-w-5xl place-items-center px-4 py-4")}>
<section className="pk-start-card w-full rounded-[24px] bg-white p-[clamp(18px,3vw,36px)] text-center shadow-soft">
<div className="pk-start-visual mb-2 text-[clamp(54px,8vw,92px)] leading-none">🦊 VS 🦓</div>
<h1 className="pk-start-title text-balance text-[clamp(28px,4vw,44px)] font-black text-rose-500">字母单词PK赛</h1>
<p className="pk-start-subtitle mt-2 text-[clamp(15px,1.6vw,19px)] text-slate-600">
红队蓝队轮流答题，答对加{settings.scorePerCorrect}分
{settings.scorePerWrong > 0 ? `，答错扣${settings.scorePerWrong}分。` : "，答错不扣分。"}
</p>
<div className="mx-auto mt-8 grid max-w-3xl gap-5 rounded-2xl border bg-slate-50 p-5 text-left sm:p-6">
<div className="pk-start-panel mx-auto mt-5 grid max-w-3xl gap-3 rounded-2xl border bg-slate-50 p-4 text-left">
<div>
<div className="mb-3 text-sm font-semibold text-slate-600">选择年级</div>
<div className="mb-2 text-xs font-semibold text-slate-600">选择年级</div>
<div className="grid grid-cols-3 gap-3">
{grades.map((grade) => (
<button
key={grade}
onClick={() => setSelectedGrade(grade)}
className={cn(
"rounded-lg border bg-white px-4 py-3 text-center text-base font-bold transition hover:border-rose-300",
"pk-start-choice rounded-lg border bg-white px-4 py-2.5 text-center text-base font-bold transition hover:border-rose-300",
selectedGrade === grade && "border-rose-500 bg-rose-50 text-rose-700 shadow-sm",
)}
>
@@ -321,14 +322,14 @@ export default function PkPage() {
</div>
<div>
<div className="mb-3 text-sm font-semibold text-slate-600">选择班级类型</div>
<div className="mb-2 text-xs font-semibold text-slate-600">选择班级类型</div>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
{classTypes.map((classType) => (
<button
key={classType.id}
onClick={() => setSelectedClassTypeId(classType.id)}
className={cn(
"rounded-lg border bg-white px-4 py-3 text-center text-base font-bold transition hover:border-blue-300",
"pk-start-choice rounded-lg border bg-white px-4 py-2.5 text-center text-base font-bold transition hover:border-blue-300",
selectedClassTypeId === classType.id && "border-blue-500 bg-blue-50 text-blue-700 shadow-sm",
)}
>
@@ -338,7 +339,7 @@ export default function PkPage() {
</div>
</div>
<div className="rounded-lg bg-white px-4 py-3 text-center text-sm text-slate-600">
<div className="pk-start-summary rounded-lg bg-white px-4 py-2 text-center text-sm text-slate-600">
当前选择：<span className="font-bold text-slate-900">{selectedGrade}</span>
<span className="mx-2 text-slate-300">/</span>
<span className="font-bold text-slate-900">{selectedClassType?.name ?? "未选择班型"}</span>
@@ -350,13 +351,13 @@ export default function PkPage() {
</div>
{!loadingSetup && availableWords.length === 0 && (
<p className="mt-4 text-sm font-medium text-red-500">当前年级和班级类型没有启用题目，请先到后台管理启用词库。</p>
<p className="pk-start-warning mt-4 text-sm font-medium text-red-500">当前年级和班级类型没有启用题目，请先到后台管理启用词库。</p>
)}
<button
onClick={startGame}
disabled={loadingSetup || availableWords.length === 0}
className="mt-8 rounded-full bg-rose-500 px-12 py-4 text-[clamp(18px,2vw,24px)] font-bold text-white shadow-lg transition hover:bg-rose-600 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none"
className="pk-start-button mt-5 rounded-full bg-rose-500 px-10 py-3 text-[clamp(17px,1.8vw,21px)] font-bold text-white shadow-lg transition hover:bg-rose-600 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none"
>
{loadingSetup ? "加载中..." : "开始PK"}
</button>
@@ -367,13 +368,13 @@ export default function PkPage() {
if (ended) {
return (
<main className="mx-auto grid min-h-[calc(100vh-56px)] max-w-5xl place-items-center px-4 py-8">
<section className="w-full rounded-[28px] bg-white p-[clamp(28px,6vw,72px)] text-center shadow-soft">
<div className="mb-5 text-[clamp(72px,10vw,118px)] leading-none">{winner === "draw" ? "🤝" : "🏆"}</div>
<h1 className="text-[clamp(32px,5vw,54px)] font-black text-rose-500">PK结束！</h1>
<main className={cn(pkPageCursorClass, "pk-end-stage mx-auto grid min-h-[calc(100vh-56px)] max-w-5xl place-items-center px-4 py-8")}>
<section className="pk-end-card w-full rounded-[28px] bg-white p-[clamp(28px,6vw,72px)] text-center shadow-soft">
<div className="pk-end-visual mb-5 text-[clamp(72px,10vw,118px)] leading-none">{winner === "draw" ? "🤝" : "🏆"}</div>
<h1 className="pk-end-title text-[clamp(32px,5vw,54px)] font-black text-rose-500">PK结束！</h1>
<p
className={cn(
"mt-4 text-[clamp(26px,4vw,44px)] font-black",
"pk-end-result mt-4 text-[clamp(26px,4vw,44px)] font-black",
winner === "red" && "text-red-600",
winner === "blue" && "text-blue-600",
winner === "draw" && "text-amber-500",
@@ -381,19 +382,19 @@ export default function PkPage() {
>
{winner === "red" ? "🔴 红队获胜！" : winner === "blue" ? "🔵 蓝队获胜！" : "平局！势均力敌！"}
</p>
<div className="mx-auto mt-8 grid max-w-lg grid-cols-2 gap-4">
<div className="rounded-lg bg-red-50 p-5 text-red-700">
<div className="pk-end-score-grid mx-auto mt-8 grid max-w-lg grid-cols-2 gap-4">
<div className="pk-end-score-card rounded-lg bg-red-50 p-5 text-red-700">
<div className="font-bold">红队</div>
<div className="text-4xl font-black">{scoreRed}</div>
<div className="pk-end-score text-4xl font-black">{scoreRed}</div>
</div>
<div className="rounded-lg bg-blue-50 p-5 text-blue-700">
<div className="pk-end-score-card rounded-lg bg-blue-50 p-5 text-blue-700">
<div className="font-bold">蓝队</div>
<div className="text-4xl font-black">{scoreBlue}</div>
<div className="pk-end-score text-4xl font-black">{scoreBlue}</div>
</div>
</div>
<button
onClick={startGame}
className="mt-8 inline-flex items-center gap-2 rounded-full bg-rose-500 px-10 py-4 text-lg font-bold text-white shadow-lg transition hover:bg-rose-600"
className="pk-end-button mt-8 inline-flex items-center gap-2 rounded-full bg-rose-500 px-10 py-4 text-lg font-bold text-white shadow-lg transition hover:bg-rose-600"
>
<RotateCcw className="size-5" />
再来一局
@@ -404,12 +405,12 @@ export default function PkPage() {
}
return (
<main className="mx-auto min-h-[calc(100vh-56px)] max-w-7xl px-4 py-5 sm:px-6 sm:py-8">
<section className="relative overflow-hidden rounded-[28px] bg-white p-[clamp(18px,3vw,34px)] shadow-soft">
<main className={cn(pkPageCursorClass, "pk-game-stage mx-auto min-h-[calc(100vh-56px)] max-w-7xl px-4 py-5 sm:px-6 sm:py-8")}>
<section className="pk-game-card relative overflow-hidden rounded-[28px] bg-white p-[clamp(18px,3vw,34px)] shadow-soft">
{answerState !== "idle" && (
<div
className={cn(
"z-10 mb-4 flex flex-col items-center gap-3 rounded-lg border bg-white/95 px-4 py-3 text-center text-[clamp(16px,1.8vw,22px)] font-black shadow-lg backdrop-blur md:absolute md:right-[clamp(18px,3vw,34px)] md:top-[clamp(18px,3vw,34px)] md:mb-0 md:max-w-[360px]",
"pk-answer-feedback z-10 mb-4 flex flex-col items-center gap-3 rounded-lg border bg-white/95 px-4 py-3 text-center text-[clamp(16px,1.8vw,22px)] font-black shadow-lg backdrop-blur md:absolute md:right-[clamp(18px,3vw,34px)] md:top-[clamp(18px,3vw,34px)] md:mb-0 md:max-w-[360px]",
answerState === "correct" && "border-emerald-100 text-emerald-600",
answerState === "wrong" && "border-red-100 text-red-500",
)}
@@ -431,14 +432,14 @@ export default function PkPage() {
</div>
)}
<div className="mb-[clamp(12px,2vw,22px)] text-center">
<h1 className="text-[clamp(26px,3vw,38px)] font-black text-rose-500">单词PK大作战</h1>
<p className="mt-2 text-sm font-medium text-slate-500">
<div className="pk-game-header mb-[clamp(12px,2vw,22px)] text-center">
<h1 className="pk-game-title text-[clamp(26px,3vw,38px)] font-black text-rose-500">单词PK大作战</h1>
<p className="pk-game-meta mt-2 text-sm font-medium text-slate-500">
{selectedGrade} / {selectedClassType?.name ?? "班型"} / {roundWords.length} 道题
</p>
</div>
<div className="grid gap-[clamp(18px,3vw,34px)] lg:grid-cols-[minmax(300px,0.9fr)_minmax(420px,1.25fr)]">
<div className="pk-game-grid grid gap-[clamp(18px,3vw,34px)] lg:grid-cols-[minmax(300px,0.9fr)_minmax(420px,1.25fr)]">
<div className="flex min-w-0 flex-col">
<div className="flex items-center gap-[clamp(10px,1.8vw,18px)]">
<TeamCard team="red" active={currentTeam === "red"} score={scoreRed} />
@@ -448,7 +449,7 @@ export default function PkPage() {
<div
className={cn(
"mt-4 rounded-lg px-4 py-3 text-center text-[clamp(18px,2vw,23px)] font-black",
"pk-current-turn mt-4 rounded-lg px-4 py-3 text-center text-[clamp(18px,2vw,23px)] font-black",
currentTeam === "red" ? "bg-red-50 text-red-700" : "bg-blue-50 text-blue-700",
)}
>
@@ -459,11 +460,11 @@ export default function PkPage() {
<div className="h-full rounded-full bg-emerald-500 transition-all" style={{ width: `${progress}%` }} />
</div>
<div className="flex flex-1 flex-col items-center justify-center py-[clamp(24px,5vw,70px)] text-center">
<div className="pk-listen-area flex flex-1 flex-col items-center justify-center py-[clamp(24px,5vw,70px)] text-center">
<p className="text-[clamp(16px,1.7vw,20px)] text-slate-600">听一听，这是哪个单词？</p>
<button
onClick={() => void speakWord(currentWord)}
className="mt-4 grid size-[clamp(62px,6vw,80px)] place-items-center rounded-full bg-rose-400 text-white shadow-lg transition hover:scale-105 hover:bg-rose-500"
className="pk-speak-button mt-4 grid size-[clamp(62px,6vw,80px)] place-items-center rounded-full bg-rose-400 text-white shadow-lg transition hover:scale-105 hover:bg-rose-500"
aria-label="重新朗读当前单词"
>
<Volume2 className="size-[clamp(28px,3vw,36px)]" />
@@ -476,7 +477,7 @@ export default function PkPage() {
<div className="flex min-w-0 flex-col justify-center">
<div
className={cn(
"grid grid-cols-1 gap-[clamp(14px,2vw,22px)] sm:grid-cols-2",
"pk-answer-grid grid grid-cols-1 gap-[clamp(14px,2vw,22px)] sm:grid-cols-2",
optionCount >= 6 && "xl:grid-cols-3",
)}
>
@@ -489,7 +490,7 @@ export default function PkPage() {
key={option.id}
onClick={() => checkAnswer(option)}
className={cn(
"flex min-h-[clamp(104px,18vh,188px)] flex-col items-center justify-center rounded-[20px] border-4 bg-white p-4 text-[clamp(22px,3vw,34px)] font-black transition hover:-translate-y-1 hover:border-sky-300 hover:shadow-lg",
"pk-option-button flex min-h-[clamp(104px,18vh,188px)] flex-col items-center justify-center rounded-[20px] border-4 bg-white p-4 text-[clamp(22px,3vw,34px)] font-black transition hover:-translate-y-1 hover:border-sky-300 hover:shadow-lg",
answerState === "idle" && "border-slate-200",
revealCorrect && "border-emerald-400 bg-emerald-50 text-emerald-700",
selected && answerState === "wrong" && "border-red-400 bg-red-50 text-red-700",
@@ -537,8 +538,10 @@ function AdaptiveWordText({ text, variant }: { text: string; variant: "hero" | "
<span
className={cn(
"mx-auto block max-w-full whitespace-pre-line text-center font-black leading-[1.05] tracking-normal",
variant === "hero" && "mt-4 text-blue-500 [text-shadow:3px_3px_0_#dbeafe]",
variant === "option" && "mt-3 text-slate-900",
"pk-word-text",
variant === "hero" && "pk-word-text-hero mt-4 text-blue-500 [text-shadow:3px_3px_0_#dbeafe]",
variant === "option" && "pk-word-text-option mt-3 text-slate-900",
`pk-word-size-${size}`,
sizeClass,
isVeryLongSingleWord && "max-w-[min(100%,14ch)] [overflow-wrap:anywhere]",
)}
@@ -608,10 +611,10 @@ function WordImage({ value, label }: { value: string; label: string }) {
<img
src={value}
alt={label}
className="size-[clamp(54px,7vw,92px)] rounded-lg object-contain"
className="pk-word-image size-[clamp(54px,7vw,92px)] rounded-lg object-contain"
/>
);
}
return <span className="text-[clamp(44px,6vw,76px)] leading-none">{value}</span>;
return <span className="pk-word-emoji text-[clamp(44px,6vw,76px)] leading-none">{value}</span>;
}