From 566d80311ab0466927de652918bc79adb565f285 Mon Sep 17 00:00:00 2001
From: jacobxu666 <jacobxu666@gmail.com>
Date: Wed, 5 Aug 2026 21:10:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BD=95=E9=9F=B3=E5=9B=9E=E6=94=BE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E5=8D=95=E4=B8=AA=E6=92=AD=E6=94=BE=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?(=E6=97=A0=E8=BF=9B=E5=BA=A6=E6=9D=A1),=E4=B8=8E=E5=8D=95?=
 =?UTF-8?q?=E8=AF=8D=E8=AF=BB=E9=9F=B3=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/app/parent/dashboard.tsx    |  3 ++-
 src/app/parent/overview-tab.tsx |  3 ++-
 src/components/play-audio.tsx   | 31 +++++++++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/components/play-audio.tsx

diff --git a/src/app/parent/dashboard.tsx b/src/app/parent/dashboard.tsx
index e496c58..0704a08 100644
--- a/src/app/parent/dashboard.tsx
+++ b/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>
diff --git a/src/app/parent/overview-tab.tsx b/src/app/parent/overview-tab.tsx
index b14d925..262798f 100644
--- a/src/app/parent/overview-tab.tsx
+++ b/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>
diff --git a/src/components/play-audio.tsx b/src/components/play-audio.tsx
new file mode 100644
index 0000000..4653c3e
--- /dev/null
+++ b/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>
+  );
+}