录音回放改为单个播放按钮(无进度条),与单词读音一致

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

src/app/parent/dashboard.tsx

@@ -9,6 +9,7 @@ import { ChildManage } from "./child-manage";
 import { DevicesTab } from "./devices-tab";
 import { OverviewTab } from "./overview-tab";
 import { TemplatesTab } from "./templates-tab";
+import { PlayBtn } from "@/components/play-audio";
 
 export type DayCell = {
   done: number;
@@ -156,7 +157,7 @@ export function ParentDashboard({
                     <div key={i} className="flex items-center gap-2 text-sm">
                       <span className="w-16 shrink-0 text-xs text-muted-foreground">{r.childName}</span>
                       <span className="w-20 shrink-0 font-medium text-slate-800">{r.word}</span>
-                      <audio controls src={r.url} className="h-8 flex-1" />
+                      <PlayBtn src={r.url} />
                     </div>
                   ))}
                 </div>

src/app/parent/overview-tab.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { cn } from "@/lib/utils";
 import { addDays, dowOf, todayStr } from "@/lib/dates";
 import { subjectMeta } from "@/lib/subjects";
+import { PlayBtn } from "@/components/play-audio";
 import { Button } from "@/components/ui/button";
 import type { OverviewData } from "./dashboard";
 
@@ -160,7 +161,7 @@ export function OverviewTab({ data }: { data: OverviewData }) {
                       {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" />
+                          <PlayBtn src={r.url} />
                         </div>
                       ))}
                     </div>

src/components/play-audio.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useState } from "react";
+import { Volume2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// 单个播放按钮:点击播放音频,不显示进度条(与单词读音一致)
+export function PlayBtn({ src, className }: { src: string; className?: string }) {
+  const [playing, setPlaying] = useState(false);
+  const play = () => {
+    const a = new Audio(src);
+    a.onended = () => setPlaying(false);
+    a.onerror = () => setPlaying(false);
+    setPlaying(true);
+    a.play();
+  };
+  return (
+    <button
+      type="button"
+      onClick={play}
+      className={cn(
+        "flex size-8 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 hover:bg-indigo-200",
+        playing && "bg-indigo-600 text-white",
+        className,
+      )}
+      title="播放"
+    >
+      <Volume2 className="size-4" />
+    </button>
+  );
+}