第一期:家庭自学打卡系统

- 家长手机号登录 + 孩子设备一次性激活(长期会话) - 周模板自动生成每日任务快照,支持拍照凭证直传对象存储 - 连击计算(空白日自动达成)、家长补卡带标记 - 家长端三标签:今日概览 / 任务模板 / 设备管理 - Docker 独立输出,经 Traefik 接入 jump.hn12301.net Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-02 23:19:13 +08:00
commit af7a144d58
57 changed files with 8875 additions and 0 deletions
@@ -0,0 +1,91 @@
+"use client";
+
+import { useTransition } from "react";
+import { Flame } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { makeupTask } from "./actions";
+import type { OverviewData } from "./dashboard";
+
+const DOW_LABELS = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+
+function dateLabel(date: string) {
+  const [y, m, d] = date.split("-").map(Number);
+  const dow = new Date(Date.UTC(y, m - 1, d)).getUTCDay();
+  return `${m}月${d}日 ${DOW_LABELS[dow]}`;
+}
+
+export function OverviewTab({ data }: { data: OverviewData }) {
+  const [, startTransition] = useTransition();
+
+  return (
+    <div className="space-y-4">
+      {data.kids.map((kid) => (
+        <Card key={kid.id}>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-lg">{kid.name}</CardTitle>
+            <div className="flex items-center gap-1 text-orange-600">
+              <Flame className="size-5" fill="currentColor" />
+              <span className="font-bold">{kid.streak}</span>
+              <span className="text-xs">天连击</span>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <p className="text-sm text-muted-foreground">
+              今日完成 {kid.today.done} / {kid.today.total} 项
+            </p>
+            <div className="space-y-2">
+              {kid.week.map((day) => (
+                <div key={day.date} className="rounded-lg border p-2">
+                  <p className="mb-1 text-xs font-medium text-muted-foreground">
+                    {dateLabel(day.date)}
+                    {day.isToday && " · 今天"}
+                  </p>
+                  {day.tasks.length === 0 ? (
+                    <p className="text-xs text-muted-foreground">无任务(自动保持连击)</p>
+                  ) : (
+                    <div className="flex flex-wrap gap-1.5">
+                      {day.tasks.map((t) => (
+                        <span key={t.id} className="inline-flex items-center gap-1">
+                          <Badge variant={t.status === "done" ? "default" : "secondary"}>
+                            {t.title}
+                            {t.isMakeup && " · 补"}
+                          </Badge>
+                          {!day.isToday && t.status === "pending" && (
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="h-5 px-1.5 text-xs"
+                              onClick={() =>
+                                startTransition(() => makeupTask(t.id, true))
+                              }
+                            >
+                              补卡
+                            </Button>
+                          )}
+                          {!day.isToday && t.isMakeup && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-5 px-1.5 text-xs"
+                              onClick={() =>
+                                startTransition(() => makeupTask(t.id, false))
+                              }
+                            >
+                              撤销
+                            </Button>
+                          )}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}