FIX: 修复讲解页翻译与播放器间距

echo-loop · echo-loop · commit e178edbb7665 · 2026-07-13T20:08:10.000+08:00
- 收紧讲解页原句与翻译间距
- 收紧播放器底部状态间距
- 修复讲解页自动翻译缓存 key 不一致
diff --git a/TASKS.md b/TASKS.md
@@ -60,6 +60,9 @@
 
 ## 最近完成（保留近两周）
 
+- [x] 2026-07-13 19:56：修复讲解页自动翻译早于前后句上下文就绪导致写入无上下文缓存 key；自动翻译现在等待上下文稳定后再请求，避免返回页面缓存 miss。
+- [x] 2026-07-13 17:13：收紧随心听与学习页底部播放状态 label 到底部的间距，移动端压缩安全区占用，给上方内容更多空间。
+- [x] 2026-07-13 16:52：收紧句子讲解页原句与内联翻译之间的垂直间距，并补充组件回归测试。
 - [x] 2026-07-13 16:25：修复 CI 字典面板测试桩未覆盖增量 TTS 预热，避免落到真实控制器导致 `_coordinator` 未初始化。
 - [x] 2026-07-13 16:01：统一翻译加载态与解析加载态，翻译请求中按钮保留圆形进度，内容区改用单行 AI 骨架屏。
 - [x] 2026-07-13 15:42：修复意群手动点击超额后被提醒节流吞掉的问题，三类 AI 按钮手动超额均强制弹订阅提醒。
diff --git a/lib/screens/player_screen.dart b/lib/screens/player_screen.dart
@@ -34,6 +34,7 @@ const kPlayerSingleSentenceSwipeAreaKey = ValueKey(
 const kPlayerBookmarkSingleSentenceSwipeAreaKey = ValueKey(
   'player-bookmark-single-sentence-swipe-area',
 );
+const kPlayerInfoBarStatusRowKey = ValueKey('player-info-bar-status-row');
 
 class PlayerScreen extends ConsumerStatefulWidget {
   const PlayerScreen({super.key});
@@ -735,6 +736,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen>
             ),
           ),
           child: SafeArea(
+            bottom: false,
             child: Column(
               mainAxisSize: MainAxisSize.min,
               children: [
@@ -822,6 +824,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen>
     final iconColor = mutedColor;
 
     final statusRow = Row(
+      key: kPlayerInfoBarStatusRowKey,
       mainAxisSize: MainAxisSize.min,
       children: [
         // 模式标签（列表/精听）依赖字幕分句，无字幕时隐藏。
@@ -878,10 +881,17 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen>
       ],
     );
 
+    final mediaPadding = MediaQuery.paddingOf(context);
+    final bottomPadding = centered
+        ? (mediaPadding.bottom * 0.35).clamp(4.0, AppSpacing.s).toDouble()
+        : AppSpacing.s;
+
     return Container(
-      padding: const EdgeInsets.symmetric(
-        horizontal: AppSpacing.m,
-        vertical: AppSpacing.s,
+      padding: EdgeInsets.fromLTRB(
+        AppSpacing.m,
+        AppSpacing.s,
+        AppSpacing.m,
+        bottomPadding,
       ),
       child: centered
           ? Center(child: statusRow)
diff --git a/lib/widgets/common/practice_playback_footer.dart b/lib/widgets/common/practice_playback_footer.dart
@@ -11,6 +11,10 @@ import '../guide_flow.dart';
 import '../practice/practice_play_count_label.dart';
 import 'playback_controls.dart';
 
+const kPracticePlaybackFooterLabelKey = ValueKey(
+  'practice-playback-footer-label',
+);
+
 /// 练习页面共享底部控制区
 class PracticePlaybackFooter extends StatelessWidget {
   /// 是否可以返回上一句
@@ -67,11 +71,19 @@ class PracticePlaybackFooter extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final mediaPadding = MediaQuery.paddingOf(context);
+    final isMobile = MediaQuery.sizeOf(context).width < 600;
+    final bottomPadding = isMobile
+        ? (mediaPadding.bottom * 0.35)
+              .clamp(AppSpacing.xs, AppSpacing.s)
+              .toDouble()
+        : AppSpacing.m;
+
     return Padding(
-      padding: const EdgeInsets.only(
+      padding: EdgeInsets.only(
         left: AppSpacing.l,
         right: AppSpacing.l,
-        bottom: AppSpacing.m,
+        bottom: bottomPadding,
       ),
       child: Column(
         mainAxisSize: MainAxisSize.min,
@@ -87,6 +99,7 @@ class PracticePlaybackFooter extends StatelessWidget {
           ),
           const SizedBox(height: AppSpacing.s),
           PracticePlayCountLabel(
+            key: kPracticePlaybackFooterLabelKey,
             isManualMode: isManualMode,
             playCountText: playCountText,
             statusSuffixText: statusSuffixText,
diff --git a/lib/widgets/practice/annotation_content_view.dart b/lib/widgets/practice/annotation_content_view.dart
@@ -772,11 +772,33 @@ class _AnnotationContentViewState extends ConsumerState<AnnotationContentView> {
         .watch(learningSettingsProvider)
         .autoExpandCachedAnnotation;
     // watch 共享字幕投影：撑起其 autoDispose 生命周期（视图在屏则常驻）+ 同步取前后句。
+    // 翻译缓存 key 包含前后句，必须等字幕投影就绪后才允许自动翻译；
+    // 否则首帧会用 null/null 写入无上下文 key，返回页面时再用带上下文 key 读取就会 miss。
     final audioItemId = widget.audioItemId;
-    final sentences = (audioItemId != null && audioItemId.isNotEmpty)
-        ? ref.watch(audioSentencesProvider(audioItemId)).valueOrNull
+    final hasSentenceContextSource =
+        audioItemId != null &&
+        audioItemId.isNotEmpty &&
+        widget.sentenceIndex != null;
+    final sentencesAsync = (audioItemId != null && audioItemId.isNotEmpty)
+        ? ref.watch(audioSentencesProvider(audioItemId))
         : null;
-    final (previousText, nextText) = _neighborTexts(sentences);
+    final translationContextReady =
+        !hasSentenceContextSource || (sentencesAsync?.hasValue ?? false);
+    final sentences = translationContextReady
+        ? sentencesAsync?.valueOrNull
+        : null;
+    final (previousText, nextText) = translationContextReady
+        ? _neighborTexts(sentences)
+        : (null, null);
+
+    Future<(String?, String?)> resolveTranslationContext() async {
+      if (!hasSentenceContextSource) return (null, null);
+      final loadedSentences =
+          sentencesAsync?.valueOrNull ??
+          await ref.read(audioSentencesProvider(audioItemId).future);
+      return _neighborTexts(loadedSentences);
+    }
+
     final cachedTranslation = autoExpand
         ? ai
               ?.getCachedTranslation(
@@ -889,12 +911,14 @@ class _AnnotationContentViewState extends ConsumerState<AnnotationContentView> {
                       ? (cancelToken, source) async* {
                           var hasContent = false;
                           try {
+                            final (requestPreviousText, requestNextText) =
+                                await resolveTranslationContext();
                             // await for（非 yield*）确保流内 auth/quota 错误在本
                             // try 内重抛，从而弹登录/订阅（与 onRequestAnalysis 语义一致）。
                             await for (final t in ai.getTranslationStream(
                               widget.text,
-                              previous: previousText,
-                              next: nextText,
+                              previous: requestPreviousText,
+                              next: requestNextText,
                               targetLanguage: nativeLanguage,
                               accessToken: accessToken,
                               cancelToken: cancelToken,
@@ -975,7 +999,8 @@ class _AnnotationContentViewState extends ConsumerState<AnnotationContentView> {
                       : null,
                   cachedTranslation: cachedTranslation,
                   cachedAnalysis: cachedAnalysis,
-                  autoLoadTranslation: shouldAutoLoadSentenceAi,
+                  autoLoadTranslation:
+                      shouldAutoLoadSentenceAi && translationContextReady,
                   autoLoadAnalysis: shouldAutoLoadSentenceAi,
                   onTranslationUserIntent: () {
                     ref
diff --git a/lib/widgets/practice/practice_play_count_label.dart b/lib/widgets/practice/practice_play_count_label.dart
@@ -9,7 +9,6 @@ library;
 import 'package:flutter/material.dart';
 
 import '../../l10n/app_localizations.dart';
-import '../../theme/app_theme.dart';
 
 /// 格式化练习页的遍数文案。
 ///
@@ -55,10 +54,7 @@ class PracticePlayCountLabel extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: AppSpacing.m),
-      child: isManualMode ? _buildManualLabel() : _buildAutoLabel(),
-    );
+    return isManualMode ? _buildManualLabel() : _buildAutoLabel();
   }
 
   /// 手动模式：高亮 "手动"
diff --git a/lib/widgets/practice/sentence_annotation_card.dart b/lib/widgets/practice/sentence_annotation_card.dart
@@ -32,6 +32,12 @@ enum ContentLoadState { idle, loading, loaded, error }
 /// 意群显示模式
 enum SenseGroupMode { off, medium, fine }
 
+/// 句子顶部留白，给词组选区手柄圆点让位。
+const double _sentenceTopPadding = AppSpacing.m - 4;
+
+/// 句子与内联翻译之间的留白，保持译文贴近原句。
+const double _sentenceBottomPadding = AppSpacing.xs;
+
 /// 标注模式句子卡片
 ///
 /// 句子文本经 [SelectableSentenceText] 渲染（点词查词 + 词组选区手柄），
@@ -909,12 +915,14 @@ class SentenceAnnotationCardState extends State<SentenceAnnotationCard> {
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         // 句子文本 — 意群色块模式或纯 RichText（带长按/右键复制整句）。
-        // 上下留白给选区手柄圆点（悬在首行上方/末行下方各约 12dp）让位，
-        // 避免遮挡；上方留白由外部工具栏缩小间距补偿（annotation_content_view）。
+        // 顶部留白给选区手柄圆点让位；底部收紧，让译文紧跟原句。
         _wrapGuide(
           widget.sentenceGuideStep,
           Padding(
-            padding: const EdgeInsets.symmetric(vertical: AppSpacing.m - 4),
+            padding: const EdgeInsets.only(
+              top: _sentenceTopPadding,
+              bottom: _sentenceBottomPadding,
+            ),
             child: sentenceBody,
           ),
         ),
@@ -953,7 +961,7 @@ class SentenceAnnotationCardState extends State<SentenceAnnotationCard> {
         );
       case ContentLoadState.loaded:
         content = Padding(
-          padding: const EdgeInsets.only(top: AppSpacing.xs),
+          padding: EdgeInsets.zero,
           child: Text(
             _translationContent ?? '',
             style: theme.textTheme.bodyMedium?.copyWith(
diff --git a/test/screens/player_screen_test.dart b/test/screens/player_screen_test.dart
@@ -329,6 +329,44 @@ void main() {
         await _disposeTree(tester);
       });
 
+      testWidgets('移动端状态 label 不再占用完整底部安全区', (tester) async {
+        tester.view.physicalSize = const Size(390, 844);
+        tester.view.devicePixelRatio = 1.0;
+        tester.view.padding = const FakeViewPadding(bottom: 34);
+        addTearDown(tester.view.resetPhysicalSize);
+        addTearDown(tester.view.resetDevicePixelRatio);
+        addTearDown(tester.view.resetPadding);
+
+        final item = createTestAudioItem();
+        final sentences = createTestSentences(count: 3);
+
+        await tester.pumpWidget(
+          createTestScreen(
+            const PlayerScreen(),
+            locale: const Locale('zh'),
+            overrides: _audioOverrides(
+              practiceState: ListeningPracticeState(
+                currentAudioItem: item,
+                sentences: sentences,
+                currentFullIndex: 0,
+              ),
+            ),
+          ),
+        );
+        await tester.pump();
+
+        final statusRowBottom = tester
+            .getRect(find.byKey(kPlayerInfoBarStatusRowKey))
+            .bottom;
+        final screenBottom =
+            tester.view.physicalSize.height / tester.view.devicePixelRatio;
+
+        // 底部状态行只保留压缩后的 8px 间距，避免 Home indicator 的 34px
+        // 全量安全区把播放器控制面板顶高，给上方正文留出更多空间。
+        expect(screenBottom - statusRowBottom, closeTo(8, 0.1));
+        await _disposeTree(tester);
+      });
+
       testWidgets('恢复断点后进度条首帧显示当前绝对位置，不回到 0:00', (tester) async {
         final item = createTestAudioItem();
         final sentences = createTestSentences(count: 6);
diff --git a/test/widgets/annotation_content_view_auth_test.dart b/test/widgets/annotation_content_view_auth_test.dart
diff --git a/test/widgets/practice_playback_footer_test.dart b/test/widgets/practice_playback_footer_test.dart
diff --git a/test/widgets/sentence_annotation_card_test.dart b/test/widgets/sentence_annotation_card_test.dart
