学习概览日历可查看当日语法检测+跟读录音;修复跟读录音签名

- 学习概览选中某天展示:打卡任务+英语语法检测(分数)+单词跟读录音(回放)
- 修复跟读录音无法听:Safari 录音为 audio/mp4,原写死 audio/webm 致签名
  不匹配上传失败;改为按实际录音类型签名,扩展名 m4a/webm

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jacobxu666
2026-08-05 20:53:04 +08:00
co-authored by Claude Opus 4.8
parent cbe99e94f0
commit b8db3ae707
5 changed files with 91 additions and 28 deletions
+60 -21
View File
@@ -100,33 +100,72 @@ export function OverviewTab({ data }: { data: OverviewData }) {
<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">
<div className="mt-4 space-y-3 rounded-lg border border-slate-100 bg-slate-50/60 p-3">
<p className="text-sm font-bold text-slate-900">
{selected} {selected === today ? "(今天)" : ""} 的具体任务
{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>;
if (!cell) return <p className="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 className="space-y-3">
<div>
<p className="mb-1 text-xs font-medium text-muted-foreground">打卡任务</p>
{cell.tasks.length === 0 ? (
<p className="text-sm text-muted-foreground">无打卡任务</p>
) : (
<div className="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>
<p className="mb-1 text-xs font-medium text-muted-foreground">英语语法检测</p>
{cell.gtests.length === 0 ? (
<p className="text-sm text-muted-foreground">当天未做语法检测</p>
) : (
<div className="space-y-1">
{cell.gtests.map((g, i) => (
<p key={i} className="truncate text-xs text-slate-600">
{g.title} · {g.score} 分 {g.passed ? "✅" : "❌"}
</p>
))}
</div>
)}
</div>
<div>
<p className="mb-1 text-xs font-medium text-muted-foreground">单词跟读录音</p>
{cell.recs.length === 0 ? (
<p className="text-sm text-muted-foreground">当天无跟读录音</p>
) : (
<div className="space-y-1.5">
{cell.recs.map((r, i) => (
<div key={i} className="flex items-center gap-2 text-sm">
<span className="w-20 shrink-0 font-medium text-slate-800">{r.word}</span>
<audio controls src={r.url} className="h-8 flex-1" />
</div>
))}
</div>
)}
</div>
</div>
);
})()}