From 673d1bc51142ebe8b498671f4d1d95892983b532 Mon Sep 17 00:00:00 2001
From: jacobxu666 <jacobxu666@gmail.com>
Date: Wed, 5 Aug 2026 21:53:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=92=A4=E5=9B=9E=E5=AD=A9=E5=AD=90=E7=AB=AF?=
 =?UTF-8?q?=E5=8D=95=E8=AF=8D=E9=A1=B5=E7=BD=91=E6=A0=BC;=E5=AE=B6?=
 =?UTF-8?q?=E9=95=BF=E7=AB=AF=E8=B7=9F=E8=AF=BB=E5=BD=95=E9=9F=B3=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=94=B9=E4=B8=80=E8=A1=8C=E5=A4=9A=E4=B8=AA(?=
 =?UTF-8?q?=E6=8D=A2=E8=A1=8C=E6=8E=92=E5=B8=83)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 撤回 word-day 网格改动,恢复原卡片布局
- 家长端"单词跟读录音"(课程管理+学习概览)改为圆角标签自动换行,
  一行多个,每个含单词+播放按钮

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/app/parent/dashboard.tsx    | 10 +++++-----
 src/app/parent/overview-tab.tsx |  8 ++++----
 src/app/words/word-day.tsx      | 31 +++++++++++++------------------
 3 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/src/app/parent/dashboard.tsx b/src/app/parent/dashboard.tsx
index 0704a08..98e99a0 100644
--- a/src/app/parent/dashboard.tsx
+++ b/src/app/parent/dashboard.tsx
@@ -151,13 +151,13 @@ export function ParentDashboard({
               </div>
               <div className="rounded-xl border border-slate-100 bg-white p-4 shadow-soft sm:col-span-2">
                 <p className="font-bold text-slate-900">🎙️ 单词跟读录音</p>
-                <div className="mt-2 space-y-2">
+                <div className="mt-2 flex flex-wrap gap-2">
                   {recordings.length === 0 && <p className="text-xs text-muted-foreground">暂无跟读录音</p>}
                   {recordings.map((r, i) => (
-                    <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>
-                      <PlayBtn src={r.url} />
+                    <div key={i} className="flex items-center gap-1.5 rounded-full bg-slate-50 px-2.5 py-1 text-sm ring-1 ring-slate-100">
+                      <span className="text-xs text-muted-foreground">{r.childName}</span>
+                      <span className="font-medium text-slate-800">{r.word}</span>
+                      <PlayBtn src={r.url} className="size-6" />
                     </div>
                   ))}
                 </div>
diff --git a/src/app/parent/overview-tab.tsx b/src/app/parent/overview-tab.tsx
index 262798f..675e135 100644
--- a/src/app/parent/overview-tab.tsx
+++ b/src/app/parent/overview-tab.tsx
@@ -157,11 +157,11 @@ export function OverviewTab({ data }: { data: OverviewData }) {
                   {cell.recs.length === 0 ? (
                     <p className="text-sm text-muted-foreground">当天无跟读录音</p>
                   ) : (
-                    <div className="space-y-1.5">
+                    <div className="flex flex-wrap gap-2">
                       {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>
-                          <PlayBtn src={r.url} />
+                        <div key={i} className="flex items-center gap-1.5 rounded-full bg-white px-2.5 py-1 text-sm ring-1 ring-slate-100">
+                          <span className="font-medium text-slate-800">{r.word}</span>
+                          <PlayBtn src={r.url} className="size-6" />
                         </div>
                       ))}
                     </div>
diff --git a/src/app/words/word-day.tsx b/src/app/words/word-day.tsx
index 3b8c395..b0a83cb 100644
--- a/src/app/words/word-day.tsx
+++ b/src/app/words/word-day.tsx
@@ -136,39 +136,34 @@ export function WordDayClient({
         <span className="text-xs text-muted-foreground">已学 {learnedSet.size}/{items.length}</span>
       </header>
 
-      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+      <div className="space-y-2">
         {items.map((it) => {
           const done = learnedSet.has(it.word);
           return (
-            <div key={it.word} className="rounded-xl border border-slate-100 bg-white p-2.5 shadow-soft">
-              <div className="flex items-center gap-1.5">
-                <button type="button" onClick={() => speak(it.word)} className="shrink-0 text-indigo-600" title="发音">
-                  <Volume2 className="size-4" />
+            <div key={it.word} className="rounded-xl border border-slate-100 bg-white p-3 shadow-soft">
+              <div className="flex items-center gap-2">
+                <button type="button" onClick={() => speak(it.word)} className="text-indigo-600" title="发音">
+                  <Volume2 className="size-5" />
                 </button>
-                <button type="button" onClick={() => openDetail(it.word)} className="min-w-0 flex-1 truncate text-left text-sm font-bold text-slate-900">
-                  {it.word}
+                <button type="button" onClick={() => openDetail(it.word)} className="text-left">
+                  <span className="text-base font-bold text-slate-900">{it.word}</span>
                 </button>
+                <span className="ml-1 flex-1 truncate text-sm text-muted-foreground">{it.meaning}</span>
+                <RecordBtn day={day} word={it.word} />
                 <button
                   type="button"
                   onClick={() => toggleLearn(it.word)}
                   className={cn(
-                    "flex size-6 shrink-0 items-center justify-center rounded-full border-2",
+                    "flex size-8 shrink-0 items-center justify-center rounded-full border-2",
                     done ? "border-transparent bg-gradient-to-br from-emerald-400 to-emerald-600 text-white" : "border-slate-300",
                   )}
                   title="学会"
                 >
-                  {done && <Check className="size-3.5" strokeWidth={3} />}
-                </button>
-              </div>
-              <p className="mt-1 truncate text-xs text-muted-foreground">{it.meaning}</p>
-              <div className="mt-1.5 flex items-center justify-between">
-                <RecordBtn day={day} word={it.word} />
-                <button type="button" onClick={() => openDetail(it.word)} className="text-xs text-indigo-600">
-                  详情
+                  {done && <Check className="size-4" strokeWidth={3} />}
                 </button>
               </div>
               {open === it.word && (
-                <div className="mt-2 space-y-1 rounded-lg bg-slate-50 p-2 text-xs">
+                <div className="mt-2 space-y-1 rounded-lg bg-slate-50 p-2 text-sm">
                   <p className="text-slate-800">
                     <span className="font-medium text-indigo-600">释义:</span>
                     {it.meaning || "见例句"}
@@ -179,7 +174,7 @@ export function WordDayClient({
                   </p>
                   <p className="text-slate-700">
                     <span className="font-medium text-indigo-600">形近词:</span>
-                    {it.similar.map((s) => s.word).join("、") || "无"}
+                    {it.similar.map((s) => `${s.word}(${s.meaning})`).join("、") || "无"}
                   </p>
                 </div>
               )}