Tighten printable report rows and align phonetics with words

projects/xiaoshu-admin/src/app/pages/operations-learning-reports.component.html

@@ -64,7 +64,7 @@
     <dl class="report-meta"><div><dt>学员</dt><dd>{{ report.studentName }}</dd></div><div><dt>陪练老师</dt><dd>{{ report.coachName }}</dd></div><div><dt>课程</dt><dd>{{ report.courseName }}</dd></div><div><dt>学习日期</dt><dd>{{ report.studyDate }} @if(report.appointmentAt){ {{ report.appointmentAt | date:'HH:mm' }} }</dd></div><div><dt>课型</dt><dd>{{ report.classTypeLabel }}</dd></div><div><dt>预约编号</dt><dd>{{ report.appointmentId || '历史记录' }}</dd></div></dl>
     @if(reportVariant()==='full'){<section class="report-summary"><article><strong>{{ report.learnedCount }}</strong><span>学习单词</span></article><article><strong>{{ report.masteredCount }}</strong><span>已掌握</span></article><article><strong>{{ report.reviewDueCount }}</strong><span>待复习</span></article><article><strong>{{ report.unmarkedCount }}</strong><span>未标记</span></article><article><strong>{{ report.masteryRate | number:'1.0-1' }}%</strong><span>掌握率</span></article></section>}
     @if (reportVariant()==='full') {
-    <section class="pdf-section"><h2>单词学习明细</h2><table class="word-table"><thead><tr><th>#</th><th>单词 / 音标</th><th>中文释义</th><th>学习结果</th></tr></thead><tbody>@for (word of report.words; track word.index) { <tr class="word-row"><td>{{ word.index }}</td><td><strong>{{ word.word }}</strong><small>{{ word.phonetic || '—' }}</small>@if(word.example){<em>{{ word.example }}</em>}</td><td>{{ word.meaning || '暂无释义' }}</td><td><span [attr.data-result]="word.result">{{ word.resultLabel }}</span></td></tr> } @empty { <tr><td colspan="4">没有可展示的单词明细</td></tr> }</tbody></table></section>
+    <section class="pdf-section"><h2>单词学习明细</h2><table class="word-table"><thead><tr><th>#</th><th>单词 / 音标</th><th>中文释义</th><th>学习结果</th></tr></thead><tbody>@for (word of report.words; track word.index) { <tr class="word-row" [class.word-row-with-example]="word.example"><td>{{ word.index }}</td><td><div class="word-heading"><strong>{{ word.word }}</strong><small>{{ word.phonetic || '—' }}</small></div>@if(word.example){<em>{{ word.example }}</em>}</td><td>{{ word.meaning || '暂无释义' }}</td><td><span [attr.data-result]="word.result">{{ word.resultLabel }}</span></td></tr> } @empty { <tr><td colspan="4">没有可展示的单词明细</td></tr> }</tbody></table></section>
     } @else {
       <section class="pdf-section"><h2>{{ reportVariant()==='english' ? '看英文，填写中文释义' : '看中文，填写英文单词' }}</h2>
         <p class="worksheet-hint">共 {{ report.words.length }} 个单词，请独立填写；完成后对照完整学习报表核对。</p>

projects/xiaoshu-admin/src/app/pages/operations-learning-reports.component.scss

@@ -396,7 +396,7 @@
 }
 .word-table th:nth-child(2),
 .word-table td:nth-child(2) {
-  width: 29%;
+  width: 37%;
 }
 .word-table th:last-child,
 .word-table td:last-child {
@@ -405,7 +405,7 @@
 .word-table small,
 .word-table em {
   display: block;
-  margin-top: 3px;
+  margin-top: 2.1px;
   color: #788781;
   font-size: 14px;
   font-style: normal;
@@ -416,6 +416,26 @@
 .word-row {
   break-inside: avoid;
 }
+.word-row td {
+  padding-block: 6.3px;
+  line-height: 1.05;
+}
+.word-table:not(.worksheet-table) .word-row td {
+  height: 55.3px;
+  vertical-align: middle;
+}
+.word-table:not(.worksheet-table) .word-row-with-example td {
+  height: 72.1px;
+}
+.word-heading {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  column-gap: 6px;
+}
+.word-heading small {
+  margin: 0;
+}
 .word-table [data-result="mastered"] {
   color: #197052;
 }
@@ -433,7 +453,7 @@
 .worksheet-table th:nth-child(odd), .worksheet-table td:nth-child(odd) { width: 24%; }
 .worksheet-table th:nth-child(even), .worksheet-table td:nth-child(even) { width: 26%; }
 .worksheet-table th:first-child, .worksheet-table td:first-child { text-align: left; }
-.worksheet-table td { height: 64px; vertical-align: middle; }
+.worksheet-table td { height: 44.8px; vertical-align: middle; }
 .worksheet-table .worksheet-empty { background: #fff; }
 .worksheet-sheet { min-height: 0; padding-bottom: 7mm; }
 .worksheet-sheet .pdf-title { padding-bottom: 14px; }
@@ -441,6 +461,7 @@
 .worksheet-sheet .report-meta div { padding: 8px 10px; }
 .worksheet-sheet .pdf-section { margin-top: 14px; }
 .worksheet-sheet .worksheet-table th, .worksheet-sheet .worksheet-table td { padding: 7px 6px; }
+.worksheet-sheet .worksheet-table .word-row td { padding-block: 4.9px; }
 .word-prompt { font-size: 20px; font-weight: 600; }
 .review-words { font-size: 10px; line-height: 1.8; overflow-wrap: anywhere; }
 .review-section { break-inside: avoid; }

projects/xiaoshu-mobile/src/app/features/appointment/lesson-report-pdf.component.html

@@ -4,7 +4,7 @@
     <dl class="report-meta"><div><dt>学员</dt><dd>{{ report.studentName }}</dd></div><div><dt>陪练老师</dt><dd>{{ report.coachName }}</dd></div><div><dt>课程</dt><dd>{{ report.courseName }}</dd></div><div><dt>学习日期</dt><dd>{{ report.studyDate }} @if(report.appointmentAt){ {{ report.appointmentAt.slice(11, 16) }} }</dd></div><div><dt>课型</dt><dd>{{ report.classTypeLabel }}</dd></div><div><dt>预约编号</dt><dd>{{ report.appointmentId || '历史记录' }}</dd></div></dl>
     @if(variant()==='full') {
     <section class="report-summary"><article><strong>{{ report.learnedCount }}</strong><span>学习单词</span></article><article><strong>{{ report.masteredCount }}</strong><span>已掌握</span></article><article><strong>{{ report.reviewDueCount }}</strong><span>待复习</span></article><article><strong>{{ report.unmarkedCount }}</strong><span>未标记</span></article><article><strong>{{ report.masteryRate | number:'1.0-1' }}%</strong><span>掌握率</span></article></section>
-    <section class="pdf-section"><h2>单词学习明细</h2><table class="word-table"><thead><tr><th>#</th><th>单词 / 音标</th><th>中文释义</th><th>学习结果</th></tr></thead><tbody>@for (word of report.words; track word.index) { <tr class="word-row"><td>{{ word.index }}</td><td><strong>{{ word.word }}</strong><small>{{ word.phonetic || '—' }}</small>@if(word.example){<em>{{ word.example }}</em>}</td><td>{{ word.meaning || '暂无释义' }}</td><td><span [attr.data-result]="word.result">{{ word.resultLabel }}</span></td></tr> } @empty { <tr><td colspan="4">没有可展示的单词明细</td></tr> }</tbody></table></section>
+    <section class="pdf-section"><h2>单词学习明细</h2><table class="word-table"><thead><tr><th>#</th><th>单词 / 音标</th><th>中文释义</th><th>学习结果</th></tr></thead><tbody>@for (word of report.words; track word.index) { <tr class="word-row" [class.word-row-with-example]="word.example"><td>{{ word.index }}</td><td><div class="word-heading"><strong>{{ word.word }}</strong><small>{{ word.phonetic || '—' }}</small></div>@if(word.example){<em>{{ word.example }}</em>}</td><td>{{ word.meaning || '暂无释义' }}</td><td><span [attr.data-result]="word.result">{{ word.resultLabel }}</span></td></tr> } @empty { <tr><td colspan="4">没有可展示的单词明细</td></tr> }</tbody></table></section>
     } @else {
       <section class="pdf-section"><h2>{{ variant()==='english' ? '看英文，填写中文释义' : '看中文，填写英文单词' }}</h2>
         <p class="worksheet-hint">共 {{ report.words.length }} 个单词，请独立填写；完成后对照完整学习报表核对。</p>

projects/xiaoshu-mobile/src/app/features/appointment/lesson-report-pdf.component.scss

@@ -137,7 +137,7 @@
 }
 .word-table th:nth-child(2),
 .word-table td:nth-child(2) {
-  width: 29%;
+  width: 37%;
 }
 .word-table th:last-child,
 .word-table td:last-child {
@@ -146,7 +146,7 @@
 .word-table small,
 .word-table em {
   display: block;
-  margin-top: 3px;
+  margin-top: 2.1px;
   color: #788781;
   font-size: 14px;
   font-style: normal;
@@ -157,6 +157,26 @@
 .word-row {
   break-inside: avoid;
 }
+.word-row td {
+  padding-block: 6.3px;
+  line-height: 1.05;
+}
+.word-table:not(.worksheet-table) .word-row td {
+  height: 55.3px;
+  vertical-align: middle;
+}
+.word-table:not(.worksheet-table) .word-row-with-example td {
+  height: 72.1px;
+}
+.word-heading {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  column-gap: 6px;
+}
+.word-heading small {
+  margin: 0;
+}
 .word-table [data-result="mastered"] {
   color: #197052;
 }
@@ -208,7 +228,7 @@
 .worksheet-table th:nth-child(odd), .worksheet-table td:nth-child(odd) { width: 24%; }
 .worksheet-table th:nth-child(even), .worksheet-table td:nth-child(even) { width: 26%; }
 .worksheet-table th:first-child, .worksheet-table td:first-child { text-align: left; }
-.worksheet-table td { height: 64px; vertical-align: middle; }
+.worksheet-table td { height: 44.8px; vertical-align: middle; }
 .worksheet-table .worksheet-empty { background: #fff; }
 .worksheet-sheet { min-height: 0; padding-bottom: 7mm; }
 .worksheet-sheet .pdf-title { padding-bottom: 14px; }
@@ -216,4 +236,5 @@
 .worksheet-sheet .report-meta div { padding: 8px 10px; }
 .worksheet-sheet .pdf-section { margin-top: 14px; }
 .worksheet-sheet .worksheet-table th, .worksheet-sheet .worksheet-table td { padding: 7px 6px; }
+.worksheet-sheet .worksheet-table .word-row td { padding-block: 4.9px; }
 .word-prompt { font-size: 20px; font-weight: 600; }