家长中心重组:学习概览+功能管理;孩子可增删;详情页头部加间距

- 顶部两标签:学习概览(合并查看已完成/需完成任务,日历点某天看明细)
  与功能管理
- 功能管理含:任务管理(原任务模板日历)、课程管理(语法编辑+周测)、
  孩子管理(增/删孩子)、设备管理(新设备激活+当前登录设备)
- 孩子端英语知识点详情页头部增加元素间距,不再拥挤

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

src/app/learn/[id]/page.tsx

@@ -21,7 +21,7 @@ export default async function LessonPage({ params }: { params: Promise<{ id: str
   return (
     <main className="relative mx-auto max-w-2xl space-y-5 p-4 pb-12">
       <BackgroundBlobs />
-      <header className="space-y-2">
+      <header className="space-y-3">
         <Link href="/learn" className="text-sm font-medium text-indigo-600">
           ← 课程地图
         </Link>
@@ -32,8 +32,10 @@ export default async function LessonPage({ params }: { params: Promise<{ id: str
             <Badge className="bg-emerald-100 text-emerald-700 hover:bg-emerald-100">已点亮</Badge>
           )}
         </div>
-        <h1 className="text-2xl font-extrabold tracking-tight text-slate-900">{point.title}</h1>
-        {point.summary && <p className="text-indigo-600">🎯 {point.summary}</p>}
+        <h1 className="mt-1 text-2xl font-extrabold leading-snug tracking-tight text-slate-900">
+          {point.title}
+        </h1>
+        {point.summary && <p className="mt-1 text-indigo-600">🎯 {point.summary}</p>}
       </header>
 
       <div className="rounded-2xl border border-slate-100 bg-white p-5 shadow-soft">

src/app/parent/actions.ts

@@ -162,3 +162,38 @@ export async function revokeSession(sessionId: number) {
   await db.delete(sessions).where(eq(sessions.id, sessionId));
   revalidatePath("/parent");
 }
+
+// ===== 孩子管理:增/删 =====
+export async function addChild(formData: FormData): Promise<string | null> {
+  const parent = await getSessionUser();
+  if (!parent || parent.role !== "parent") return "请先以家长身份登录";
+  const name = String(formData.get("name") ?? "").trim();
+  if (!name) return "请填写孩子称呼";
+  const [mx] = await db
+    .select({ m: sql<number>`COALESCE(MAX(${users.sortOrder}), -1)` })
+    .from(users)
+    .where(eq(users.familyId, parent.familyId));
+  await db.insert(users).values({
+    familyId: parent.familyId,
+    role: "child",
+    displayName: name,
+    sortOrder: mx.m + 1,
+  });
+  revalidatePath("/parent");
+  revalidatePath("/learn");
+  return null;
+}
+
+export async function removeChild(childId: number): Promise<void> {
+  const parent = await getSessionUser();
+  if (!parent || parent.role !== "parent") return;
+  const [row] = await db
+    .select({ id: users.id })
+    .from(users)
+    .where(and(eq(users.id, childId), eq(users.familyId, parent.familyId), eq(users.role, "child")))
+    .limit(1);
+  if (!row) return;
+  await db.delete(users).where(eq(users.id, childId));
+  revalidatePath("/parent");
+  revalidatePath("/learn");
+}

src/app/parent/child-manage.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Trash2, UserPlus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { addChild, removeChild } from "./actions";
+
+// 孩子管理:增加/删除孩子
+export function ChildManage({ kids }: { kids: { id: number; name: string }[] }) {
+  const [name, setName] = useState("");
+  const [msg, setMsg] = useState("");
+  const [pending, startTransition] = useTransition();
+
+  const add = (e: React.FormEvent) => {
+    e.preventDefault();
+    setMsg("");
+    const fd = new FormData();
+    fd.set("name", name);
+    startTransition(async () => {
+      const r = await addChild(fd);
+      if (r?.error) setMsg(r.error);
+      else {
+        setName("");
+        setMsg("已添加,用孩子设备激活即可");
+      }
+    });
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1.5">
+        {kids.map((k) => (
+          <div key={k.id} className="flex items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm">
+            <span className="font-medium text-slate-800">{k.name}</span>
+            <button
+              type="button"
+              aria-label={`删除 ${k.name}`}
+              className="text-muted-foreground hover:text-destructive"
+              onClick={() => {
+                if (confirm(`确定删除「${k.name}」?其打卡/学习记录会一并删除。`))
+                  startTransition(() => removeChild(k.id));
+              }}
+            >
+              <Trash2 className="size-4" />
+            </button>
+          </div>
+        ))}
+      </div>
+      <form onSubmit={add} className="flex items-end gap-2">
+        <div className="flex-1 space-y-1">
+          <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="新孩子称呼,如:徐子惠" maxLength={20} />
+        </div>
+        <Button type="submit" disabled={pending || !name.trim()}>
+          <UserPlus className="size-4" /> 添加
+        </Button>
+      </form>
+      {msg && <p className="text-xs text-muted-foreground">{msg}</p>}
+    </div>
+  );
+}

src/app/parent/dashboard.tsx

@@ -5,6 +5,7 @@ import { logout } from "@/app/login/actions";
 import { BackgroundBlobs } from "@/components/background-blobs";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ChildManage } from "./child-manage";
 import { DevicesTab } from "./devices-tab";
 import { OverviewTab } from "./overview-tab";
 import { TemplatesTab } from "./templates-tab";
@@ -26,7 +27,6 @@ export type OverviewData = {
     days: Record<string, DayCell>;
   }[];
 };
-
 export type TemplatesData = {
   kids: {
     id: number;
@@ -43,7 +43,6 @@ export type TemplatesData = {
     }[];
   }[];
 };
-
 export type DevicesData = {
   rows: {
     id: number;
@@ -54,11 +53,20 @@ export type DevicesData = {
     isCurrent: boolean;
   }[];
 };
-
 export type WeeklyRow = { childName: string; weekKey: string; score: number; passed: boolean };
 
 const tabCls = "data-[state=active]:bg-white data-[state=active]:text-indigo-600 data-[state=active]:shadow-soft";
 
+function Section({ title, desc, children }: { title: string; desc?: string; children: React.ReactNode }) {
+  return (
+    <section className="rounded-xl border border-slate-100 bg-white p-4 shadow-soft">
+      <h3 className="font-extrabold text-slate-900">{title}</h3>
+      {desc && <p className="mt-0.5 text-xs text-muted-foreground">{desc}</p>}
+      <div className="mt-3">{children}</div>
+    </section>
+  );
+}
+
 export function ParentDashboard({
   overview,
   templates,
@@ -85,26 +93,25 @@ export function ParentDashboard({
       </header>
 
       <Tabs defaultValue="overview">
-        <TabsList className="grid w-full grid-cols-3 bg-slate-100/80">
+        <TabsList className="grid w-full grid-cols-2 bg-slate-100/80">
           <TabsTrigger value="overview" className={tabCls}>
             学习概览
           </TabsTrigger>
-          <TabsTrigger value="templates" className={tabCls}>
-            任务模板
-          </TabsTrigger>
-          <TabsTrigger value="courses" className={tabCls}>
-            课程管理
+          <TabsTrigger value="feature" className={tabCls}>
+            功能管理
           </TabsTrigger>
         </TabsList>
 
         <TabsContent value="overview" className="mt-4">
           <OverviewTab data={overview} />
         </TabsContent>
-        <TabsContent value="templates" className="mt-4">
+
+        <TabsContent value="feature" className="mt-4 space-y-4">
+          <Section title="任务管理" desc="配置孩子每天的任务内容,支持某一天/每周X/某一周/日期区间">
             <TemplatesTab data={templates} />
-        </TabsContent>
-        <TabsContent value="courses" className="mt-4">
-          <div className="space-y-4">
+          </Section>
+
+          <Section title="课程管理" desc="英语语法课程编辑与每周检测成绩">
             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
               <Link href="/parent/grammar" className="block">
                 <div className="rounded-xl border border-slate-100 bg-white p-4 shadow-soft transition-transform duration-200 hover:-translate-y-0.5">
@@ -124,8 +131,15 @@ export function ParentDashboard({
                 </div>
               </div>
             </div>
+          </Section>
+
+          <Section title="孩子管理" desc="增加或删除孩子,删除会连同其记录一起删除">
+            <ChildManage kids={overview.kids.map((k) => ({ id: k.id, name: k.name }))} />
+          </Section>
+
+          <Section title="设备管理" desc="新设备激活与当前登录设备">
             <DevicesTab data={devices} kids={overview.kids.map((k) => ({ id: k.id, name: k.name }))} />
-          </div>
+          </Section>
         </TabsContent>
       </Tabs>
     </main>