体验修复:概览看当日具体任务+模板实时对账+打卡圈缩小+孩子我的记录
- 家长学习概览日历点击某天可查看当日具体任务及完成状态(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>
This commit is contained in:
jacobxu666
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
11c2997409
commit
053f818158
+24
-2
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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",
|
||||
isToday ? "border-indigo-400 ring-1 ring-indigo-300" : "border-slate-100",
|
||||
"flex aspect-square cursor-pointer flex-col items-center justify-center rounded-lg border text-sm transition-colors",
|
||||
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>
|
||||
);
|
||||
|
||||
@@ -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({
|
||||
|
||||
Reference in New Issue
Block a user