- 家长手机号登录 + 孩子设备一次性激活(长期会话) - 周模板自动生成每日任务快照,支持拍照凭证直传对象存储 - 连击计算(空白日自动达成)、家长补卡带标记 - 家长端三标签:今日概览 / 任务模板 / 设备管理 - Docker 独立输出,经 Traefik 接入 jump.hn12301.net Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useActionState } from "react";
|
|
import { createActivationCode, type CreateCodeState } from "./actions";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
|
|
// 激活码生成卡片:点按钮生成,大号显示 6 位码,15 分钟有效
|
|
export function ActivationCard({
|
|
childId,
|
|
childName,
|
|
}: {
|
|
childId: number;
|
|
childName: string;
|
|
}) {
|
|
const [state, formAction, pending] = useActionState<CreateCodeState, FormData>(
|
|
createActivationCode,
|
|
null,
|
|
);
|
|
|
|
return (
|
|
<Card>
|
|
<CardContent className="flex items-center justify-between gap-4 p-4">
|
|
<div>
|
|
<p className="font-medium">{childName}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{state?.code
|
|
? "激活码 15 分钟内有效,只用一次"
|
|
: "在孩子的 iPad 上打开网站,输入激活码"}
|
|
</p>
|
|
</div>
|
|
{state?.code ? (
|
|
<span className="text-3xl font-bold tracking-[0.3em]">{state.code}</span>
|
|
) : (
|
|
<form action={formAction}>
|
|
<input type="hidden" name="childId" value={childId} />
|
|
<Button type="submit" disabled={pending}>
|
|
{pending ? "生成中…" : "生成激活码"}
|
|
</Button>
|
|
</form>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|