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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/kid/page.tsx

@@ -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">
-        <Link href="/words" className="block sm:col-span-2">
+        <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 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">
+          <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-white/20">
-            <span className="text-xl">🔤</span>
+            <Languages className="size-6" />
-            <div>
-              <p className="text-sm font-bold text-slate-900">单词打卡</p>
-              <p className="text-xs text-muted-foreground">每天 15 词,发音/详情/跟读/检测</p>
-            </div>
           </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>