体验修复:概览看当日具体任务+模板实时对账+打卡圈缩小+孩子我的记录

- 家长学习概览日历点击某天可查看当日具体任务及完成状态(1.1)
- 今日任务快照改为实时对账:模板删除则移除未完成快照、新增则补上,
  解决"模板无任务但孩子端仍显示"(1.2);历史日保持不变
- 孩子端打卡选中圈由 size-12 缩小到 size-9,更精致(2.1)
- 孩子端新增"我的记录":累计打卡天数 + 最近7天已完成任务(2.2)

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

src/app/kid/page.tsx

@@ -7,7 +7,7 @@ import { SUBJECT_ORDER, subjectMeta } from "@/lib/subjects";
 import { todayStr } from "@/lib/dates";
 import { getSessionUser } from "@/lib/auth";
 import { streakOf } from "@/lib/streak";
-import { dayTasks } from "@/lib/tasks";
+import { dayTasks, childCheckStats } from "@/lib/tasks";
 import { listPoints, passedByPoint } from "@/lib/grammar";
 import { TaskCard } from "./task-card";
 
@@ -17,9 +17,10 @@ export default async function KidPage() {
   if (user.role !== "child") redirect("/parent");
 
   const today = todayStr();
-  const [tasks, streak] = await Promise.all([
+  const [tasks, streak, stats] = await Promise.all([
     dayTasks(user.id, today),
     streakOf(user.id),
+    childCheckStats(user.id, 7),
   ]);
   const doneCount = tasks.filter((t) => t.status === "done").length;
   const allDone = tasks.length > 0 && doneCount === tasks.length;
@@ -128,6 +129,27 @@ export default async function KidPage() {
           )}
         </>
       )}
+
+      <section className="rounded-xl border border-slate-100 bg-white p-4 shadow-soft">
+        <div className="flex items-center justify-between">
+          <h2 className="text-base font-extrabold text-slate-900">我的记录</h2>
+          <span className="text-sm font-bold text-indigo-600">累计打卡 {stats.totalDays} 天</span>
+        </div>
+        {stats.recent.length === 0 ? (
+          <p className="mt-2 text-sm text-muted-foreground">还没有完成记录,从今天开始吧!</p>
+        ) : (
+          <div className="mt-3 space-y-2">
+            {stats.recent.map((d) => (
+              <div key={d.date} className="rounded-lg bg-slate-50 p-2">
+                <p className="text-xs font-medium text-muted-foreground">
+                  {d.date === today ? "今天" : d.date} · 完成 {d.tasks.length} 项
+                </p>
+                <p className="mt-1 text-sm text-slate-700">{d.tasks.join("、")}</p>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
     </main>
   );
 }

src/app/kid/task-card.tsx

@@ -87,13 +87,13 @@ export function TaskCard({
           onClick={onToggle}
           disabled={busy}
           aria-label={done ? "取消完成" : "标记完成"}
-          className={`flex size-12 shrink-0 items-center justify-center rounded-full border-2 transition-all duration-200 ${
+          className={`flex size-9 shrink-0 items-center justify-center rounded-full border-2 transition-all duration-200 ${
             done
-              ? "border-transparent bg-gradient-to-br from-emerald-400 to-emerald-600 text-white shadow-[0_0_16px_rgba(16,185,129,0.4)]"
+              ? "border-transparent bg-gradient-to-br from-emerald-400 to-emerald-600 text-white shadow-[0_0_12px_rgba(16,185,129,0.35)]"
               : "border-slate-300 hover:border-indigo-400"
           }`}
         >
-          {done && <Check className="size-7" strokeWidth={3} />}
+          {done && <Check className="size-5" strokeWidth={3} />}
         </button>
         <div className="min-w-0 flex-1">
           <p

src/app/parent/dashboard.tsx

@@ -9,7 +9,13 @@ import { DevicesTab } from "./devices-tab";
 import { OverviewTab } from "./overview-tab";
 import { TemplatesTab } from "./templates-tab";
 
-export type DayCell = { done: number; total: number; grammar: number; weekly: number | null };
+export type DayCell = {
+  done: number;
+  total: number;
+  grammar: number;
+  weekly: number | null;
+  tasks: { title: string; status: "pending" | "done"; subject: string }[];
+};
 export type OverviewData = {
   kids: {
     id: number;

src/app/parent/overview-tab.tsx

@@ -3,12 +3,14 @@
 import { useState } from "react";
 import { cn } from "@/lib/utils";
 import { addDays, dowOf, todayStr } from "@/lib/dates";
+import { subjectMeta } from "@/lib/subjects";
 import { Button } from "@/components/ui/button";
 import type { OverviewData } from "./dashboard";
 
-// 学习概览:按孩子的月日历,展示每日 打卡/语法/周检测 情况
+// 学习概览:按孩子的月日历,展示每日 打卡/语法/周检测,点某天看当日具体任务
 export function OverviewTab({ data }: { data: OverviewData }) {
   const [kidId, setKidId] = useState(data.kids[0]?.id);
+  const [selected, setSelected] = useState(todayStr());
   const kid = data.kids.find((k) => k.id === kidId) ?? data.kids[0];
   if (!kid) return null;
 
@@ -70,10 +72,11 @@ export function OverviewTab({ data }: { data: OverviewData }) {
             return (
               <div
                 key={d}
-                title={`${d} 打卡${c?.done ?? 0}/${c?.total ?? 0} 语法${c?.grammar ?? 0} ${c?.weekly != null ? `周测${c.weekly}` : ""}`}
+                onClick={() => setSelected(d)}
+                title={`${d} 打卡${c?.done ?? 0}/${c?.total ?? 0}`}
                 className={cn(
-                  "flex aspect-square flex-col items-center justify-center rounded-lg border text-sm",
+                  "flex aspect-square cursor-pointer flex-col items-center justify-center rounded-lg border text-sm transition-colors",
-                  isToday ? "border-indigo-400 ring-1 ring-indigo-300" : "border-slate-100",
+                  selected === d ? "border-indigo-400 ring-1 ring-indigo-300" : "border-slate-100 hover:border-indigo-300",
                   "bg-white",
                 )}
               >
@@ -96,6 +99,38 @@ export function OverviewTab({ data }: { data: OverviewData }) {
           <span className="mr-2 inline-flex items-center gap-1"><span className="size-2 rounded-full bg-indigo-500" />语法点亮</span>
           <span className="inline-flex items-center gap-1"><span className="size-2 rounded-full bg-violet-500" />周检测</span>
         </p>
+
+        <div className="mt-4 rounded-lg border border-slate-100 bg-slate-50/60 p-3">
+          <p className="text-sm font-bold text-slate-900">
+            {selected} {selected === today ? "(今天)" : ""} 的具体任务
+          </p>
+          {(() => {
+            const cell = kid.days[selected];
+            if (!cell || cell.tasks.length === 0)
+              return <p className="mt-1 text-sm text-muted-foreground">这一天没有打卡任务。</p>;
+            return (
+              <div className="mt-2 space-y-1.5">
+                {cell.tasks.map((t, i) => {
+                  const sm = subjectMeta(t.subject);
+                  return (
+                    <div key={i} className="flex items-center gap-2 rounded-full bg-white px-3 py-1 text-sm ring-1 ring-slate-100">
+                      <span className={cn("size-1.5 rounded-full", sm.dot)} />
+                      <span className="text-slate-700">{t.title}</span>
+                      <span
+                        className={cn(
+                          "ml-auto rounded-full px-2 py-0.5 text-xs font-medium",
+                          t.status === "done" ? "bg-emerald-100 text-emerald-700" : "bg-slate-100 text-slate-500",
+                        )}
+                      >
+                        {t.status === "done" ? "已完成" : "未完成"}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })()}
+        </div>
       </div>
     </div>
   );

src/app/parent/page.tsx

@@ -49,7 +49,12 @@ export default async function ParentPage() {
   for (const kid of kids) {
     const [instRows, gRows, wRows, wrongRow, gDone] = await Promise.all([
       db
-        .select({ date: taskInstances.date, status: taskInstances.status })
+        .select({
+          date: taskInstances.date,
+          status: taskInstances.status,
+          title: taskInstances.title,
+          subject: taskInstances.subject,
+        })
         .from(taskInstances)
         .where(and(eq(taskInstances.childUserId, kid.id), gte(taskInstances.date, mStart), lte(taskInstances.date, mEnd))),
       db
@@ -75,6 +80,7 @@ export default async function ParentPage() {
         total: inst.length,
         grammar,
         weekly: w ? w.score : null,
+        tasks: inst.map((r) => ({ title: r.title, status: r.status, subject: r.subject })),
       };
     }
     overview.kids.push({

src/lib/tasks.ts

@@ -2,7 +2,7 @@
 import { and, asc, eq, inArray } from "drizzle-orm";
 import { db } from "@/db";
 import { photos, taskInstances, taskTemplates } from "@/db/schema";
-import { dowOf, mondayOf } from "@/lib/dates";
+import { dowOf, mondayOf, todayStr, daysAgo } from "@/lib/dates";
 import { viewUrl } from "@/lib/oss";
 
 // 模板是否覆盖某一天(weekly/date/range/week 四种生效方式)
@@ -18,6 +18,83 @@ function coversDate(
   return false;
 }
 
+// 生成/对账某天任务快照。历史日:只生成一次(保历史);今天:实时对账,
+// 模板删了→移除未完成快照,模板加了→补上,保证孩子端与家长模板一致。
+export async function ensureDay(childId: number, date: string) {
+  const isToday = date === todayStr();
+  await db.transaction(async (tx) => {
+    const all = await tx
+      .select()
+      .from(taskTemplates)
+      .where(eq(taskTemplates.childUserId, childId))
+      .orderBy(asc(taskTemplates.sortOrder));
+    const templates = all.filter((t) => coversDate(t, date));
+    const instances = await tx
+      .select()
+      .from(taskInstances)
+      .where(and(eq(taskInstances.childUserId, childId), eq(taskInstances.date, date)));
+
+    if (!isToday) {
+      if (instances.length > 0) return;
+      if (templates.length > 0)
+        await tx.insert(taskInstances).values(
+          templates.map((t) => ({
+            childUserId: childId,
+            date,
+            title: t.title,
+            subject: t.subject,
+            requiresPhoto: t.requiresPhoto,
+            sortOrder: t.sortOrder,
+            sourceTemplateId: t.id,
+          })),
+        );
+      return;
+    }
+
+    // 今天:对账
+    const tIds = new Set(templates.map((t) => t.id));
+    for (const inst of instances) {
+      if (
+        inst.status === "pending" &&
+        inst.sourceTemplateId != null &&
+        !tIds.has(inst.sourceTemplateId)
+      ) {
+        await tx.delete(taskInstances).where(eq(taskInstances.id, inst.id));
+      }
+    }
+    const haveIds = new Set(instances.map((i) => i.sourceTemplateId));
+    for (const t of templates) {
+      if (!haveIds.has(t.id)) {
+        await tx.insert(taskInstances).values({
+          childUserId: childId,
+          date,
+          title: t.title,
+          subject: t.subject,
+          requiresPhoto: t.requiresPhoto,
+          sortOrder: t.sortOrder,
+          sourceTemplateId: t.id,
+        });
+      }
+    }
+  });
+}
+
+// 孩子打卡统计:累计打卡天数 + 最近 n 天已完成任务
+export async function childCheckStats(childId: number, n = 7) {
+  const rows = await db
+    .select({ date: taskInstances.date, status: taskInstances.status, title: taskInstances.title })
+    .from(taskInstances)
+    .where(eq(taskInstances.childUserId, childId));
+  const doneDates = new Set(rows.filter((r) => r.status === "done").map((r) => r.date));
+  const recent: { date: string; tasks: string[] }[] = [];
+  for (let i = 0; i < n; i++) {
+    const d = daysAgo(i);
+    const done = rows.filter((r) => r.date === d && r.status === "done").map((r) => r.title);
+    if (done.length > 0) recent.push({ date: d, tasks: done });
+  }
+  return { totalDays: doneDates.size, recent };
+}
+
 export type TaskView = {
   id: number;
   title: string;
@@ -28,39 +105,6 @@ export type TaskView = {
   photoUrls: string[];
 };
 
-// 确保某天的任务快照存在:第一次访问当天时由模板生成,之后读快照
-export async function ensureDay(childId: number, date: string) {
-  await db.transaction(async (tx) => {
-    const existing = await tx
-      .select({ id: taskInstances.id })
-      .from(taskInstances)
-      .where(and(eq(taskInstances.childUserId, childId), eq(taskInstances.date, date)))
-      .limit(1);
-    if (existing.length > 0) return;
-
-    const all = await tx
-      .select()
-      .from(taskTemplates)
-      .where(eq(taskTemplates.childUserId, childId))
-      .orderBy(asc(taskTemplates.sortOrder));
-    const templates = all.filter((t) => coversDate(t, date));
-
-    if (templates.length > 0) {
-      await tx.insert(taskInstances).values(
-        templates.map((t) => ({
-          childUserId: childId,
-          date,
-          title: t.title,
-          subject: t.subject,
-          requiresPhoto: t.requiresPhoto,
-          sortOrder: t.sortOrder,
-          sourceTemplateId: t.id,
-        })),
-      );
-    }
-  });
-}
-
 // 孩子端当日任务视图(含照片签名地址)
 export async function dayTasks(childId: number, date: string): Promise<TaskView[]> {
   await ensureDay(childId, date);