From f613e25407de9485a8728489476d0d625b1dc9de Mon Sep 17 00:00:00 2001
From: biss <bishsh2006@outlook.com>
Date: Wed, 16 Sep 2026 21:27:29 +0800
Subject: [PATCH] Add exam countdown and task overview

---
 app/checkin-client.tsx     | 57 +++++++++++++++++++++++++++++---------
 app/globals.css            |  5 ++++
 app/tasks/page.tsx         |  3 ++
 app/tasks/tasks-client.tsx | 32 +++++++++++++++++++++
 4 files changed, 84 insertions(+), 13 deletions(-)
 create mode 100644 app/tasks/page.tsx
 create mode 100644 app/tasks/tasks-client.tsx

diff --git a/app/checkin-client.tsx b/app/checkin-client.tsx
index f091913..3bed7f4 100644
--- a/app/checkin-client.tsx
+++ b/app/checkin-client.tsx
@@ -1,14 +1,45 @@
 "use client";
-import {useEffect,useMemo,useState} from "react";
-import {CalendarDays,CheckCircle2,Cloud,ChevronLeft,ChevronRight} from "lucide-react";
-import {Checkbox} from "@/components/ui/checkbox";
-import {Progress} from "@/components/ui/progress";
-import {daysBetween,plan} from "./plan";
-type Rec={doneTasks:string;mood:string;note:string};
-const fmt=(s:string)=>new Intl.DateTimeFormat("zh-CN",{month:"long",day:"numeric",weekday:"short",timeZone:"UTC"}).format(new Date(s+"T00:00:00Z"));
-export default function CheckinClient(){const [selected,setSelected]=useState(Math.max(0,Math.min(89,daysBetween("2026-09-13"))));const [month,setMonth]=useState(8);const [records,setRecords]=useState<Record<string,Rec>>({});const [status,setStatus]=useState("正在读取云端进度…");const [saving,setSaving]=useState(false);const day=plan[selected],record=records[day.date]||{doneTasks:"[]",mood:"",note:""};const done=useMemo(()=>{try{return JSON.parse(record.doneTasks)as string[]}catch{return[]}},[record.doneTasks]);const total=plan.reduce((n,p)=>n+p.tasks.length,0),finished=Object.values(records).reduce((n,r)=>{try{return n+JSON.parse(r.doneTasks).length}catch{return n}},0);const complete=plan.filter(p=>{try{return JSON.parse(records[p.date]?.doneTasks||"[]").length===p.tasks.length}catch{return false}}).length;const blanks=Array(new Date(Date.UTC(2026,month,1)).getUTCDay()).fill(null),length=new Date(Date.UTC(2026,month+1,0)).getUTCDate();const dates=Array.from({length},(_,i)=>"2026-"+String(month+1).padStart(2,"0")+"-"+String(i+1).padStart(2,"0"));
-useEffect(()=>{fetch("/api/progress").then(async r=>{const x=await r.json();if(!r.ok)throw Error(x.error);const all:Record<string,Rec>={};x.progress.forEach((p:Rec&{planDate:string})=>all[p.planDate]=p);setRecords(all);setStatus("云端同步已开启");}).catch(e=>setStatus(e.message));},[]);
-async function save(next:Rec){setRecords(v=>({...v,[day.date]:next}));setSaving(true);try{const r=await fetch("/api/progress",{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({date:day.date,doneTasks:JSON.parse(next.doneTasks),mood:next.mood,note:next.note})}),x=await r.json();if(!r.ok)throw Error(x.error);setRecords(v=>({...v,[day.date]:x.progress}));setStatus("已保存到云端");}catch(e){setStatus(e instanceof Error?e.message:"保存失败");}finally{setSaving(false)}}
-const toggle=(key:string,on:boolean)=>void save({...record,doneTasks:JSON.stringify(on?[...done,key]:done.filter(x=>x!==key))});
-return <main><div className="shell"><header><div><p className="eyebrow">CET-6 · 2026</p><h1>大学英语六级 · 90天打卡</h1><p className="sub">从今天的一件事开始，完成比完美重要。</p></div><p className="sync"><Cloud size={16}/>{saving?"正在云端保存…":status}</p></header><section className="stats"><Stat icon={<CheckCircle2/>} value={Math.round(finished/total*100)+"%"} label="总体完成度" detail={finished+" / "+total+" 项任务"}/><Stat icon={<CalendarDays/>} value={complete+" 天"} label="完整完成" detail="目标共 90 天"/><Stat icon={<CheckCircle2/>} value={day.phase} label="当前阶段" detail="12 月 12 日笔试"/></section><section className="calendar"><div className="calendar-head"><div><p className="eyebrow">CHECK-IN CALENDAR</p><h2>打卡日历</h2></div><div className="month-tabs">{[8,9,10,11].map(m=><button className={month===m?"active":""} onClick={()=>setMonth(m)} key={m}>{m+1}月</button>)}</div></div><div className="weekdays">{["日","一","二","三","四","五","六"].map(x=><span key={x}>{x}</span>)}</div><div className="calendar-grid">{blanks.map((_,i)=><span key={"e"+i}/>)}{dates.map(date=>{const idx=plan.findIndex(p=>p.date===date),p=plan[idx];let n=0;try{n=JSON.parse(records[date]?.doneTasks||"[]").length}catch{}const full=p&&n===p.tasks.length,partial=p&&n>0&&!full;return <button disabled={!p} key={date} onClick={()=>{if(p){setSelected(idx);setMonth(new Date(date+"T00:00:00Z").getUTCMonth())}}} className={"calendar-day "+(idx===selected?"chosen ":"")+(full?"full ":partial?"partial ":"")+(p?"":"outside")}><b>{Number(date.slice(-2))}</b>{p&&<small>{full?"完成":partial?n+"/"+p.tasks.length:"待打卡"}</small>}</button>})}</div><p className="calendar-note"><i className="full-dot"/>全部完成 <i className="partial-dot"/>进行中 <span>点击日期即可查看并打卡</span></p></section><section className="layout"><article className="card"><div className="hero"><button className="round" onClick={()=>setSelected(n=>Math.max(0,n-1))} disabled={!selected}><ChevronLeft/></button><div><p>{day.phase} · {day.week}</p><h2>{fmt(day.date)}</h2><small>已完成 {done.length} / {day.tasks.length} 项</small></div><button className="round" onClick={()=>setSelected(n=>Math.min(89,n+1))} disabled={selected===89}><ChevronRight/></button><Progress value={done.length/day.tasks.length*100}/></div><div className="body"><div className="tasks">{day.tasks.map(t=><label className={done.includes(t.key)?"task done":"task"} key={t.key}><Checkbox checked={done.includes(t.key)} onCheckedChange={v=>toggle(t.key,v===true)}/><b>{t.label}</b><span>{t.text}</span></label>)}</div><div className="review"><p>今日状态</p><div>{["专注","平稳","有点累","需要调整"].map(m=><button className={record.mood===m?"pill active":"pill"} key={m} onClick={()=>void save({...record,mood:record.mood===m?"":m})}>{m}</button>)}</div><label>一句复盘（可选）<textarea value={record.note} onChange={e=>setRecords(x=>({...x,[day.date]:{...record,note:e.target.value}}))} onBlur={()=>void save(record)} placeholder="今天的收获、卡住的地方，或明天要调整的一点。"/></label></div></div></article><aside><div className="dark"><p>当前阶段</p><h2>{day.phase}</h2><p>每天稳步推进，答案会慢慢变得清楚。</p></div><div className="side"><b>90 天阶段</b>{["Ⅰ 恢复期 · 9/13–10/5","Ⅱ 专项期 · 10/6–11/2","Ⅲ 真题期 · 11/3–11/29","Ⅳ 冲刺期 · 11/30–12/11"].map(x=><p key={x}>{x}</p>)}</div></aside></section></div></main>}
-function Stat({icon,value,label,detail}:{icon:React.ReactNode;value:string;label:string;detail:string}){return <div className="stat"><span>{icon}</span><p>{label}</p><strong>{value}</strong><small>{detail}</small></div>}
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { CalendarDays, CheckCircle2, ChevronLeft, ChevronRight, Cloud, LayoutList, Timer } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Progress } from "@/components/ui/progress";
+import { daysBetween, plan } from "./plan";
+
+type Rec = { doneTasks: string; mood: string; note: string };
+const fmt = (s: string) => new Intl.DateTimeFormat("zh-CN", { month: "long", day: "numeric", weekday: "short", timeZone: "UTC" }).format(new Date(s + "T00:00:00Z"));
+const parseTasks = (value?: string) => { try { return JSON.parse(value || "[]") as string[]; } catch { return []; } };
+
+export default function CheckinClient() {
+  const [selected, setSelected] = useState(Math.max(0, Math.min(89, daysBetween("2026-09-13"))));
+  const [month, setMonth] = useState(8);
+  const [records, setRecords] = useState<Record<string, Rec>>({});
+  const [status, setStatus] = useState("正在读取云端进度…");
+  const [saving, setSaving] = useState(false);
+  const [now, setNow] = useState(Date.now());
+  const day = plan[selected], record = records[day.date] || { doneTasks: "[]", mood: "", note: "" };
+  const done = useMemo(() => parseTasks(record.doneTasks), [record.doneTasks]);
+  const total = plan.reduce((n, p) => n + p.tasks.length, 0);
+  const finished = Object.values(records).reduce((n, r) => n + parseTasks(r.doneTasks).length, 0);
+  const complete = plan.filter(p => parseTasks(records[p.date]?.doneTasks).length === p.tasks.length).length;
+  const blanks = Array(new Date(Date.UTC(2026, month, 1)).getUTCDay()).fill(null);
+  const length = new Date(Date.UTC(2026, month + 1, 0)).getUTCDate();
+  const dates = Array.from({ length }, (_, i) => "2026-" + String(month + 1).padStart(2, "0") + "-" + String(i + 1).padStart(2, "0"));
+  const seconds = Math.max(0, Math.floor((new Date("2026-12-12T09:00:00+08:00").getTime() - now) / 1000));
+  const remaining = { days: Math.floor(seconds / 86400), hours: Math.floor(seconds % 86400 / 3600), minutes: Math.floor(seconds % 3600 / 60) };
+
+  useEffect(() => { const id = window.setInterval(() => setNow(Date.now()), 30000); return () => window.clearInterval(id); }, []);
+  useEffect(() => { fetch("/api/progress").then(async r => { const x = await r.json(); if (!r.ok) throw Error(x.error); const all: Record<string, Rec> = {}; x.progress.forEach((p: Rec & { planDate: string }) => all[p.planDate] = p); setRecords(all); setStatus("云端同步已开启"); }).catch(e => setStatus(e.message)); }, []);
+  async function save(next: Rec) { setRecords(v => ({ ...v, [day.date]: next })); setSaving(true); try { const r = await fetch("/api/progress", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ date: day.date, doneTasks: parseTasks(next.doneTasks), mood: next.mood, note: next.note }) }), x = await r.json(); if (!r.ok) throw Error(x.error); setRecords(v => ({ ...v, [day.date]: x.progress })); setStatus("已保存到云端"); } catch (e) { setStatus(e instanceof Error ? e.message : "保存失败"); } finally { setSaving(false); } }
+  const toggle = (key: string, on: boolean) => void save({ ...record, doneTasks: JSON.stringify(on ? [...done, key] : done.filter(x => x !== key)) });
+
+  return <main><div className="shell">
+    <header><div><p className="eyebrow">CET-6 · 2026</p><h1>大学英语六级 · 90天打卡</h1><p className="sub">从今天的一件事开始，完成比完美重要。</p></div><div className="header-actions"><Link className="overview-link" href="/tasks"><LayoutList size={17} />任务总览</Link><p className="sync"><Cloud size={16} />{saving ? "正在云端保存…" : status}</p></div></header>
+    <section className="stats"><Stat icon={<CheckCircle2 />} value={Math.round(finished / total * 100) + "%"} label="总体完成度" detail={finished + " / " + total + " 项任务"} /><Stat icon={<CalendarDays />} value={complete + " 天"} label="完整完成" detail="目标共 90 天" /><Stat icon={<CheckCircle2 />} value={day.phase} label="当前阶段" detail="12 月 12 日笔试" /><div className="countdown"><span><Timer size={19} /></span><p>距离六级笔试</p><strong>{remaining.days}<em>天</em> {remaining.hours}<em>时</em> {remaining.minutes}<em>分</em></strong><small>2026 年 12 月 12 日 09:00</small></div></section>
+    <section className="calendar"><div className="calendar-head"><div><p className="eyebrow">CHECK-IN CALENDAR</p><h2>打卡日历</h2></div><div className="month-tabs">{[8, 9, 10, 11].map(m => <button className={month === m ? "active" : ""} onClick={() => setMonth(m)} key={m}>{m + 1}月</button>)}</div></div><div className="weekdays">{["日", "一", "二", "三", "四", "五", "六"].map(x => <span key={x}>{x}</span>)}</div><div className="calendar-grid">{blanks.map((_, i) => <span key={"e" + i} />)}{dates.map(date => { const idx = plan.findIndex(p => p.date === date), p = plan[idx], n = parseTasks(records[date]?.doneTasks).length, full = !!p && n === p.tasks.length, partial = !!p && n > 0 && !full; return <button disabled={!p} key={date} onClick={() => { if (p) { setSelected(idx); setMonth(new Date(date + "T00:00:00Z").getUTCMonth()); } }} className={"calendar-day " + (idx === selected ? "chosen " : "") + (full ? "full " : partial ? "partial " : "") + (p ? "" : "outside")}><b>{Number(date.slice(-2))}</b>{p && <small>{full ? "完成" : partial ? n + "/" + p.tasks.length : "待打卡"}</small>}</button>; })}</div><p className="calendar-note"><i className="full-dot" />全部完成 <i className="partial-dot" />进行中 <span>点击日期即可查看并打卡</span></p></section>
+    <section className="layout"><article className="card"><div className="hero"><button className="round" onClick={() => setSelected(n => Math.max(0, n - 1))} disabled={!selected}><ChevronLeft /></button><div><p>{day.phase} · {day.week}</p><h2>{fmt(day.date)}</h2><small>已完成 {done.length} / {day.tasks.length} 项</small></div><button className="round" onClick={() => setSelected(n => Math.min(89, n + 1))} disabled={selected === 89}><ChevronRight /></button><Progress value={done.length / day.tasks.length * 100} /></div><div className="body"><div className="tasks">{day.tasks.map(t => <label className={done.includes(t.key) ? "task done" : "task"} key={t.key}><Checkbox checked={done.includes(t.key)} onCheckedChange={v => toggle(t.key, v === true)} /><b>{t.label}</b><span>{t.text}</span></label>)}</div><div className="review"><p>今日状态</p><div>{["专注", "平稳", "有点累", "需要调整"].map(m => <button className={record.mood === m ? "pill active" : "pill"} key={m} onClick={() => void save({ ...record, mood: record.mood === m ? "" : m })}>{m}</button>)}</div><label>一句复盘（可选）<textarea value={record.note} onChange={e => setRecords(x => ({ ...x, [day.date]: { ...record, note: e.target.value } }))} onBlur={() => void save(record)} placeholder="今天的收获、卡住的地方，或明天要调整的一点。" /></label></div></div></article><aside><div className="dark"><p>当前阶段</p><h2>{day.phase}</h2><p>每天稳步推进，答案会慢慢变得清楚。</p></div><div className="side"><b>90 天阶段</b>{["Ⅰ 恢复期 · 9/13–10/5", "Ⅱ 专项期 · 10/6–11/2", "Ⅲ 真题期 · 11/3–11/29", "Ⅳ 冲刺期 · 11/30–12/11"].map(x => <p key={x}>{x}</p>)}</div></aside></section>
+  </div></main>;
+}
+
+function Stat({ icon, value, label, detail }: { icon: React.ReactNode; value: string; label: string; detail: string }) { return <div className="stat"><span>{icon}</span><p>{label}</p><strong>{value}</strong><small>{detail}</small></div>; }
diff --git a/app/globals.css b/app/globals.css
index 2be40e7..6560e1b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -138,3 +138,8 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+.header-actions{display:flex;align-items:center;gap:10px}.overview-link{display:inline-flex;align-items:center;gap:7px;border:1px solid #bfdbfe;background:#fff;color:#1d4ed8;border-radius:999px;padding:10px 14px;font-size:.9rem;font-weight:700;text-decoration:none;white-space:nowrap}.overview-link:hover{background:#eff6ff}.countdown{background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;border-radius:18px;padding:18px;box-shadow:0 12px 28px #bfdbfe}.countdown span{float:right;color:#bfdbfe}.countdown p,.countdown small{display:block;margin:0;color:#dbeafe;font-size:.82rem}.countdown strong{display:block;margin:12px 0 4px;font-size:1.45rem;letter-spacing:.02em}.countdown em{font-style:normal;font-size:.75rem;color:#bfdbfe;margin-right:3px}.task-overview{max-width:1040px}.overview-status{margin:-15px 0 20px;color:#64748b;font-size:.85rem}.type-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:24px}.type-card{min-height:145px;text-align:left;background:#fff;border:1px solid #dbeafe;border-radius:16px;padding:16px;cursor:pointer;transition:.18s transform,.18s box-shadow}.type-card:hover,.type-card.selected{transform:translateY(-2px);box-shadow:0 12px 25px #dbeafe}.type-card.selected{outline:2px solid currentColor}.type-card>div{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.type-card span{font-weight:700}.type-card b{font-size:.8rem;color:#475569}.type-card small{display:block;margin-top:12px;color:#64748b;line-height:1.45;font-size:.76rem}.type-card [role=progressbar]{height:7px;margin-top:14px;background:#e2e8f0}.type-card.blue{color:#2563eb}.type-card.violet{color:#7c3aed}.type-card.teal{color:#0f766e}.type-card.orange{color:#c2410c}.type-card.rose{color:#be123c}.task-list-panel{background:#fff;border:1px solid #dbeafe;border-radius:18px;overflow:hidden;box-shadow:0 14px 35px #dbeafe}.task-list-head{padding:24px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(115deg,#eff6ff,#fff);border-bottom:1px solid #dbeafe}.task-list-head h2{margin:5px 0;font-size:1.5rem}.task-list-head p{margin:0;color:#64748b}.type-progress{text-align:right}.type-progress b{display:block;font-size:1.5rem;color:#1d4ed8}.type-progress span{font-size:.8rem;color:#64748b}.all-tasks{display:grid}.task-row{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:15px 22px;border-bottom:1px solid #eef2ff;color:#172554;text-decoration:none}.task-row:last-child{border-bottom:0}.task-row:hover{background:#f8fbff}.task-state{color:#94a3b8}.task-row.completed .task-state{color:#2563eb}.task-row.completed{background:#fbfdff}.task-row b{font-size:.85rem}.task-row p{margin:4px 0 0;line-height:1.45}.task-row small{font-size:.76rem;color:#64748b;white-space:nowrap}
+@media(max-width:900px){.type-cards{grid-template-columns:repeat(3,1fr)}}
+@media(max-width:760px){.header-actions{align-items:flex-start;flex-direction:column}.type-cards{grid-template-columns:repeat(2,1fr)}.task-list-head{align-items:flex-start;flex-direction:column}.type-progress{text-align:left}.task-row{grid-template-columns:24px 1fr;padding:14px}.task-row small{grid-column:2}.countdown{grid-column:span 2}}
+@media(max-width:420px){.type-cards{grid-template-columns:1fr}.countdown{grid-column:auto}.task-row p{font-size:.9rem}}
diff --git a/app/tasks/page.tsx b/app/tasks/page.tsx
new file mode 100644
index 0000000..e2e0f93
--- /dev/null
+++ b/app/tasks/page.tsx
@@ -0,0 +1,3 @@
+import TasksClient from "./tasks-client";
+
+export default function TasksPage() { return <TasksClient />; }
diff --git a/app/tasks/tasks-client.tsx b/app/tasks/tasks-client.tsx
new file mode 100644
index 0000000..13e7d21
--- /dev/null
+++ b/app/tasks/tasks-client.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { ArrowLeft, CheckCircle2, Circle, ListChecks } from "lucide-react";
+import { Progress } from "@/components/ui/progress";
+import { TaskKey, plan } from "../plan";
+
+type Rec = { doneTasks: string };
+const groups: { key: TaskKey; title: string; hint: string; color: string }[] = [
+  { key: "vocab", title: "词汇", hint: "积累与回炉高频词、搭配和错词", color: "blue" },
+  { key: "listening", title: "听力", hint: "长对话、讲座、精听与模考", color: "violet" },
+  { key: "reading", title: "阅读", hint: "仔细阅读、长篇匹配和错题复盘", color: "teal" },
+  { key: "output", title: "输出", hint: "写作、翻译与可复用表达", color: "orange" },
+  { key: "review", title: "复盘", hint: "记录错因、用时与下阶段重点", color: "rose" },
+];
+const parsed = (value?: string) => { try { return JSON.parse(value || "[]") as string[]; } catch { return []; } };
+
+export default function TasksClient() {
+  const [records, setRecords] = useState<Record<string, Rec>>({});
+  const [active, setActive] = useState<TaskKey>("vocab");
+  const [status, setStatus] = useState("正在读取完成情况…");
+  useEffect(() => { fetch("/api/progress").then(async r => { const x = await r.json(); if (!r.ok) throw Error(x.error); const all: Record<string, Rec> = {}; x.progress.forEach((p: Rec & { planDate: string }) => all[p.planDate] = p); setRecords(all); setStatus("已同步云端进度"); }).catch(e => setStatus(e.message)); }, []);
+  const overview = useMemo(() => groups.map(group => { const tasks = plan.flatMap(day => day.tasks.filter(task => task.key === group.key).map(task => ({ ...task, date: day.date, week: day.week, phase: day.phase }))); const complete = tasks.filter(task => parsed(records[task.date]?.doneTasks).includes(group.key)).length; return { ...group, tasks, complete }; }), [records]);
+  const selected = overview.find(x => x.key === active)!;
+  return <main><div className="shell task-overview">
+    <header><div><p className="eyebrow">PLAN OVERVIEW</p><h1>任务总览</h1><p className="sub">按任务类型查看全部安排和完成情况。</p></div><Link className="overview-link" href="/"><ArrowLeft size={17} />返回打卡</Link></header>
+    <p className="overview-status">{status}</p>
+    <section className="type-cards">{overview.map(group => <button key={group.key} onClick={() => setActive(group.key)} className={"type-card " + group.color + (active === group.key ? " selected" : "")}><div><span>{group.title}</span><b>{group.complete} / {group.tasks.length}</b></div><Progress value={group.tasks.length ? group.complete / group.tasks.length * 100 : 0} /><small>{group.hint}</small></button>)}</section>
+    <section className="task-list-panel"><div className="task-list-head"><div><p className="eyebrow">{selected.title.toUpperCase()}</p><h2>{selected.title}任务</h2><p>{selected.hint}</p></div><div className="type-progress"><b>{selected.complete} / {selected.tasks.length}</b><span>已完成</span></div></div><div className="all-tasks">{selected.tasks.map((task, i) => { const complete = parsed(records[task.date]?.doneTasks).includes(active); return <Link href="/" className={complete ? "task-row completed" : "task-row"} key={task.date + i}><span className="task-state">{complete ? <CheckCircle2 size={19} /> : <Circle size={19} />}</span><div><b>{task.date.slice(5).replace("-", "月")}日 · {task.week}</b><p>{task.text}</p></div><small>{task.phase}</small></Link>; })}</div></section>
+  </div></main>;
+}