孩子端单词入口改与语法一致的突出渐变卡(显示已点亮天数)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jacobxu666
2026-08-05 23:25:30 +08:00
co-authored by Claude Opus 4.8
parent 2244f4e3ec
commit 3473ecbf2b
+24 -10
View File
@@ -1,7 +1,10 @@
import { BookOpen, Flame } from "lucide-react";
import { BookOpen, Flame, Languages } from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";
import { and, eq, sql } from "drizzle-orm";
import { BackgroundBlobs } from "@/components/background-blobs";
import { db } from "@/db";
import { wordProgress } from "@/db/schema";
import { cn } from "@/lib/utils";
import { SUBJECT_ORDER, subjectMeta } from "@/lib/subjects";
import { todayStr } from "@/lib/dates";
@@ -31,6 +34,13 @@ export default async function KidPage() {
const gGoal = gPoints.find((p) => !gPassed.has(p.pointId));
const gDone = gPassed.size;
// 单词入口:已点亮天数
const [wd] = await db
.select({ n: sql<number>`COUNT(*)` })
.from(wordProgress)
.where(and(eq(wordProgress.childUserId, user.id), eq(wordProgress.passed, true)));
const wDone = wd.n;
return (
<main className="relative mx-auto min-h-dvh max-w-lg space-y-5 p-4 pb-10">
<BackgroundBlobs />
@@ -63,16 +73,20 @@ export default async function KidPage() {
</div>
</Link>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
<Link href="/words" className="block sm:col-span-2">
<div className="flex items-center gap-2 rounded-xl border border-slate-100 bg-white p-3 shadow-soft transition-transform duration-200 hover:-translate-y-0.5">
<span className="text-xl">🔤</span>
<div>
<p className="text-sm font-bold text-slate-900">单词打卡</p>
<p className="text-xs text-muted-foreground">每天 15 词,发音/详情/跟读/检测</p>
</div>
<Link href="/words" className="block">
<div className="flex items-center gap-3 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 p-4 text-white shadow-btn transition-transform duration-200 hover:-translate-y-0.5">
<div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-white/20">
<Languages className="size-6" />
</div>
</Link>
<div className="min-w-0 flex-1">
<p className="text-xs font-medium opacity-90">英语单词 · 已点亮 {wDone} 天</p>
<p className="truncate text-base font-bold">每天 15 词,发音/跟读/检测</p>
</div>
<span className="shrink-0 text-lg">→</span>
</div>
</Link>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
<Link href="/weekly" className="block">
<div className="flex items-center gap-2 rounded-xl border border-slate-100 bg-white p-3 shadow-soft transition-transform duration-200 hover:-translate-y-0.5">
<span className="text-xl">📝</span>