feat(flutter): 重做收藏与观看历史页

lib/core/data/services/watch_records_controller.dart

@@ -128,11 +128,19 @@ class WatchRecordsController extends ChangeNotifier {
     final seen = <String>{};
     return [
       for (final progress in recent)
-        if (seen.add(progress.dramaId)) WatchRecord(progress: progress),
+        if (seen.add(progress.dramaId))
+          WatchRecord(
+            progress: progress,
+            drama: _detailCache[progress.dramaId],
+            detailLoading: !_detailCache.containsKey(progress.dramaId),
+          ),
     ];
   }
 
   Future<void> _hydrate(List<String> dramaIds) async {
+    for (final id in dramaIds) {
+      if (_detailCache.containsKey(id)) await _loadDetail(id);
+    }
     final queue = [
       for (final id in dramaIds)
         if (!_detailCache.containsKey(id)) id,

lib/l10n/app_en.arb

@@ -500,6 +500,19 @@
   "recordDeleteFailed": "Could not delete this record. Please retry.",
   "recordClearFailed": "Could not clear watch history. Please retry.",
   "clearAll": "Clear all",
+  "watchRecordsCount": "{count} records",
+  "@watchRecordsCount": {
+    "placeholders": {
+      "count": {"type": "int"}
+    }
+  },
+  "favoritesCount": "{count} favorites",
+  "@favoritesCount": {
+    "placeholders": {
+      "count": {"type": "int"}
+    }
+  },
+  "favoriteLongPressHint": "Long press a card to remove",
   "clearWatchHistoryTitle": "Clear watch history?",
   "clearWatchHistoryMessage": "This removes the watch history from your account.",
   "confirmClear": "Clear",

lib/l10n/app_id.arb

@@ -474,6 +474,9 @@
   "recordDeleteFailed": "Gagal menghapus riwayat ini. Coba lagi.",
   "recordClearFailed": "Gagal menghapus semua riwayat. Coba lagi.",
   "clearAll": "Hapus semua",
+  "watchRecordsCount": "{count} riwayat",
+  "favoritesCount": "{count} favorit",
+  "favoriteLongPressHint": "Tekan lama kartu untuk menghapus",
   "clearWatchHistoryTitle": "Hapus riwayat tontonan?",
   "clearWatchHistoryMessage": "Semua riwayat akan dihapus dari akun kamu.",
   "confirmClear": "Hapus",

lib/l10n/app_localizations.dart

@@ -2074,6 +2074,24 @@ abstract class AppLocalizations {
   /// **'Clear all'**
   String get clearAll;
 
+  /// No description provided for @watchRecordsCount.
+  ///
+  /// In en, this message translates to:
+  /// **'{count} records'**
+  String watchRecordsCount(int count);
+
+  /// No description provided for @favoritesCount.
+  ///
+  /// In en, this message translates to:
+  /// **'{count} favorites'**
+  String favoritesCount(int count);
+
+  /// No description provided for @favoriteLongPressHint.
+  ///
+  /// In en, this message translates to:
+  /// **'Long press a card to remove'**
+  String get favoriteLongPressHint;
+
   /// No description provided for @clearWatchHistoryTitle.
   ///
   /// In en, this message translates to:

lib/l10n/app_localizations_en.dart

@@ -1068,6 +1068,19 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get clearAll => 'Clear all';
 
+  @override
+  String watchRecordsCount(int count) {
+    return '$count records';
+  }
+
+  @override
+  String favoritesCount(int count) {
+    return '$count favorites';
+  }
+
+  @override
+  String get favoriteLongPressHint => 'Long press a card to remove';
+
   @override
   String get clearWatchHistoryTitle => 'Clear watch history?';
 

lib/l10n/app_localizations_id.dart

@@ -1068,6 +1068,19 @@ class AppLocalizationsId extends AppLocalizations {
   @override
   String get clearAll => 'Hapus semua';
 
+  @override
+  String watchRecordsCount(int count) {
+    return '$count riwayat';
+  }
+
+  @override
+  String favoritesCount(int count) {
+    return '$count favorit';
+  }
+
+  @override
+  String get favoriteLongPressHint => 'Tekan lama kartu untuk menghapus';
+
   @override
   String get clearWatchHistoryTitle => 'Hapus riwayat tontonan?';
 

lib/l10n/app_localizations_zh.dart

@@ -1049,6 +1049,19 @@ class AppLocalizationsZh extends AppLocalizations {
   @override
   String get clearAll => '清空';
 
+  @override
+  String watchRecordsCount(int count) {
+    return '共 $count 条';
+  }
+
+  @override
+  String favoritesCount(int count) {
+    return '共 $count 部';
+  }
+
+  @override
+  String get favoriteLongPressHint => '长按卡片可取消收藏';
+
   @override
   String get clearWatchHistoryTitle => '清空观看记录？';
 

lib/l10n/app_zh.arb

@@ -436,6 +436,9 @@
   "recordDeleteFailed": "删除记录失败，请重试。",
   "recordClearFailed": "清空观看记录失败，请重试。",
   "clearAll": "清空",
+  "watchRecordsCount": "共 {count} 条",
+  "favoritesCount": "共 {count} 部",
+  "favoriteLongPressHint": "长按卡片可取消收藏",
   "clearWatchHistoryTitle": "清空观看记录？",
   "clearWatchHistoryMessage": "这会从当前账号移除全部观看记录。",
   "confirmClear": "清空",

lib/pages/favorites/favorites_page.dart

@@ -8,18 +8,35 @@ import 'package:provider/provider.dart';
 import '../../core/data/models/drama.dart';
 import '../../core/data/services/auth_controller.dart';
 import '../../core/data/services/favorite_controller.dart';
+import '../../core/formatting/count_format.dart';
 import '../../core/formatting/error_text.dart';
 import '../../core/platform/haptics.dart';
 import '../../core/theme/app_colors.dart';
 import '../../core/theme/app_theme.dart';
 import '../../core/widgets/auth_gate.dart';
 import '../../core/widgets/empty_state.dart';
-import '../../core/widgets/library_drama_tile.dart';
+import '../../core/widgets/remote_image.dart';
-import '../../core/widgets/plain_page_scaffold.dart';
+import '../../core/widgets/subpage_header.dart';
 import '../../l10n/app_localizations.dart';
 import '../drama_detail/drama_detail_view.dart';
 import 'favorites_binding.dart';
 
+const double _pageHorizontal = 14;
+const double _cardRadius = 14;
+const double _cardPadding = 10;
+const double _coverWidth = 80;
+const double _coverHeight = 106;
+const double _coverRadius = 10;
+const double _removeSize = 28;
+const double _removeIconSize = 15;
+const double _statsFontSize = 12;
+const double _metaFontSize = 11;
+const double _titleFontSize = 15;
+const int _maxTags = 2;
+const double _emptyListHeight = 360;
+
+final RegExp _tagSplitter = RegExp(r'[,/、·]');
+
 /// 独立我的收藏页。
 class FavoritesPage extends StatefulWidget {
   const FavoritesPage({super.key});
@@ -53,14 +70,27 @@ class _FavoritesPageState extends State<FavoritesPage> {
     final signedIn = context.watch<AuthController>().isSignedIn;
     return Theme(
       data: AppTheme.light(),
-      child: PlainPageScaffold(
+      child: Scaffold(
-        pageKey: const Key('favorites-page'),
+        key: const Key('favorites-page'),
-        backKey: const Key('favorites-back'),
+        backgroundColor: AppColors.ink,
+        body: SafeArea(
+          child: Column(
+            children: [
+              AppSubpageHeader(
                 title: l10n.myFavorites,
+                backKey: const Key('favorites-back'),
+              ),
+              Expanded(
                 child: signedIn
-            ? _FavoritesBody(favorites: context.watch<FavoriteController>())
+                    ? _FavoritesBody(
+                        favorites: context.watch<FavoriteController>(),
+                      )
                     : const AuthGatePanel(),
               ),
+            ],
+          ),
+        ),
+      ),
     );
   }
 }
@@ -74,50 +104,107 @@ class _FavoritesBody extends StatelessWidget {
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
     if (favorites.loading && favorites.cards.isEmpty) {
-      return const Center(child: CircularProgressIndicator());
+      return const Center(
+        child: CircularProgressIndicator(key: Key('favorites-loading')),
+      );
     }
     if (favorites.error != null && favorites.cards.isEmpty) {
-      return EmptyState(
+      return _refreshable(
+        favorites,
+        children: [
+          SizedBox(
+            height: _emptyListHeight,
+            child: EmptyState(
               key: const Key('favorites-error'),
               icon: Icons.cloud_off_rounded,
               title: errorText(l10n, favorites.error, l10n.favoritesError),
               actionLabel: l10n.retry,
               actionKey: const Key('favorites-retry'),
               onAction: () => unawaited(favorites.load()),
+            ),
+          ),
+        ],
       );
     }
     if (favorites.cards.isEmpty) {
-      return EmptyState(
+      return _refreshable(
+        favorites,
+        children: [
+          SizedBox(
+            height: _emptyListHeight,
+            child: EmptyState(
               key: const Key('favorites-empty'),
               icon: Icons.favorite_border_rounded,
               title: l10n.noFavorites,
               subtitle: l10n.emptyHint,
+            ),
+          ),
+        ],
       );
     }
-    return RefreshIndicator(
+    return _refreshable(
-      onRefresh: favorites.load,
+      favorites,
-      child: ListView.separated(
+      children: [
-        padding: const EdgeInsets.fromLTRB(16, 12, 16, 28),
+        _summary(l10n),
-        itemCount: favorites.cards.length,
+        for (final (index, drama) in favorites.cards.indexed) ...[
-        separatorBuilder: (_, _) => const SizedBox(height: 10),
+          if (index > 0) const SizedBox(height: 10),
-        itemBuilder: (context, index) {
+          _FavoriteCard(
-          final drama = favorites.cards[index];
-          return LibraryDramaTile(
-            key: ValueKey('favorite-card-${drama.id}'),
             drama: drama,
-            onTap: () => _open(context, drama),
+            onOpen: () => _open(context, drama),
-            trailing: IconButton(
+            onRemove: () => _remove(context, drama.id),
-              key: ValueKey('favorite-remove-${drama.id}'),
-              tooltip: l10n.remove,
-              onPressed: () => _remove(context, drama.id),
-              icon: const Icon(
-                Icons.favorite_rounded,
-                color: AppColors.favorite,
           ),
+        ],
+      ],
+    );
+  }
+
+  Widget _refreshable(
+    FavoriteController favorites, {
+    required List<Widget> children,
+  }) {
+    return RefreshIndicator(
+      color: AppColors.blue,
+      backgroundColor: AppColors.card,
+      strokeWidth: 2,
+      onRefresh: favorites.load,
+      child: ListView(
+        physics: const AlwaysScrollableScrollPhysics(),
+        padding: const EdgeInsets.fromLTRB(
+          _pageHorizontal,
+          4,
+          _pageHorizontal,
+          28,
+        ),
+        children: children,
       ),
     );
-        },
+  }
+
+  Widget _summary(AppLocalizations l10n) {
+    return Row(
+      children: [
+        Text(
+          l10n.favoritesCount(favorites.cards.length),
+          key: const Key('favorites-count'),
+          style: const TextStyle(
+            color: AppColors.muted,
+            fontSize: _statsFontSize,
           ),
+        ),
+        const Spacer(),
+        Flexible(
+          child: Text(
+            l10n.favoriteLongPressHint,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            textAlign: TextAlign.end,
+            style: const TextStyle(
+              color: AppColors.subtle,
+              fontSize: _metaFontSize,
+            ),
+          ),
+        ),
+      ],
     );
   }
 
@@ -137,3 +224,189 @@ class _FavoritesBody extends StatelessWidget {
     ).showSnackBar(SnackBar(content: Text(l10n.favoriteToggleFailed)));
   }
 }
+
+class _FavoriteCard extends StatelessWidget {
+  const _FavoriteCard({
+    required this.drama,
+    required this.onOpen,
+    required this.onRemove,
+  });
+
+  final Drama drama;
+  final VoidCallback onOpen;
+  final VoidCallback onRemove;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final tags = _tags();
+    return Container(
+      key: ValueKey('favorite-card-${drama.id}'),
+      decoration: BoxDecoration(
+        color: AppColors.card,
+        borderRadius: BorderRadius.circular(_cardRadius),
+        boxShadow: const [AppTheme.cardShadow],
+      ),
+      child: Material(
+        color: Colors.transparent,
+        borderRadius: BorderRadius.circular(_cardRadius),
+        clipBehavior: Clip.antiAlias,
+        child: InkWell(
+          onTap: onOpen,
+          onLongPress: onRemove,
+          child: Padding(
+            padding: const EdgeInsets.all(_cardPadding),
+            child: Stack(
+              children: [
+                Row(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    ClipRRect(
+                      borderRadius: BorderRadius.circular(_coverRadius),
+                      child: RemoteImage(
+                        drama.posterUrl,
+                        key: ValueKey('favorite-cover-${drama.id}'),
+                        width: _coverWidth,
+                        height: _coverHeight,
+                      ),
+                    ),
+                    const SizedBox(width: 12),
+                    Expanded(
+                      child: Padding(
+                        padding: const EdgeInsets.only(
+                          right: _removeSize,
+                          top: 2,
+                        ),
+                        child: SizedBox(
+                          height: _coverHeight,
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                drama.title,
+                                key: ValueKey('favorite-title-${drama.id}'),
+                                maxLines: 2,
+                                overflow: TextOverflow.ellipsis,
+                                style: const TextStyle(
+                                  color: AppColors.onSurface,
+                                  fontSize: _titleFontSize,
+                                  fontWeight: FontWeight.w700,
+                                ),
+                              ),
+                              const SizedBox(height: 6),
+                              if (tags.isNotEmpty)
+                                SizedBox(
+                                  height: 20,
+                                  child: SingleChildScrollView(
+                                    scrollDirection: Axis.horizontal,
+                                    physics:
+                                        const NeverScrollableScrollPhysics(),
+                                    child: Row(
+                                      children: [
+                                        for (final tag in tags)
+                                          Padding(
+                                            padding: const EdgeInsets.only(
+                                              right: 5,
+                                            ),
+                                            child: Container(
+                                              padding:
+                                                  const EdgeInsets.symmetric(
+                                                    horizontal: 6,
+                                                    vertical: 2,
+                                                  ),
+                                              decoration: BoxDecoration(
+                                                color: AppColors.raised,
+                                                borderRadius:
+                                                    BorderRadius.circular(6),
+                                              ),
+                                              child: Text(
+                                                tag,
+                                                maxLines: 1,
+                                                overflow: TextOverflow.ellipsis,
+                                                style: const TextStyle(
+                                                  color: AppColors.muted,
+                                                  fontSize: _metaFontSize,
+                                                ),
+                                              ),
+                                            ),
+                                          ),
+                                      ],
+                                    ),
+                                  ),
+                                ),
+                              const Spacer(),
+                              Row(
+                                children: [
+                                  const Icon(
+                                    Icons.local_fire_department_rounded,
+                                    color: AppColors.blue,
+                                    size: 13,
+                                  ),
+                                  const SizedBox(width: 3),
+                                  Text(
+                                    formatInteractionCount(drama.viewCount),
+                                    style: const TextStyle(
+                                      color: AppColors.muted,
+                                      fontSize: _metaFontSize,
+                                    ),
+                                  ),
+                                  const Spacer(),
+                                  Text(
+                                    l10n.episodeCountLabel(drama.episodeCount),
+                                    style: const TextStyle(
+                                      color: AppColors.muted,
+                                      fontSize: _metaFontSize,
+                                    ),
+                                  ),
+                                ],
+                              ),
+                            ],
+                          ),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+                Positioned(
+                  top: 0,
+                  right: 0,
+                  child: SizedBox.square(
+                    dimension: _removeSize,
+                    child: Material(
+                      color: AppColors.badgePink,
+                      shape: const CircleBorder(),
+                      clipBehavior: Clip.antiAlias,
+                      child: IconButton(
+                        key: ValueKey('favorite-remove-${drama.id}'),
+                        tooltip: l10n.remove,
+                        padding: EdgeInsets.zero,
+                        onPressed: onRemove,
+                        icon: const Icon(
+                          Icons.favorite_rounded,
+                          color: AppColors.favorite,
+                          size: _removeIconSize,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  List<String> _tags() {
+    final values = <String>[];
+    for (final source in [drama.genre, drama.category]) {
+      for (final part in source.split(_tagSplitter)) {
+        final value = part.trim();
+        if (value.isNotEmpty && !values.contains(value)) values.add(value);
+        if (values.length == _maxTags) return values;
+      }
+    }
+    return values;
+  }
+}

lib/pages/watch_records/watch_records_page.dart

@@ -6,24 +6,25 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
 import '../../core/data/models/drama.dart';
-import '../../core/data/models/watch_record.dart';
 import '../../core/data/repositories/catalog_repository.dart';
 import '../../core/data/repositories/watch_history_repository.dart';
 import '../../core/data/services/auth_controller.dart';
 import '../../core/data/services/watch_records_controller.dart';
 import '../../core/formatting/error_text.dart';
-import '../../core/formatting/localized_date_time.dart';
 import '../../core/platform/haptics.dart';
 import '../../core/theme/app_colors.dart';
-import '../../core/theme/app_dimens.dart';
 import '../../core/theme/app_theme.dart';
 import '../../core/widgets/auth_gate.dart';
 import '../../core/widgets/empty_state.dart';
-import '../../core/widgets/plain_page_scaffold.dart';
+import '../../core/widgets/subpage_header.dart';
-import '../../core/widgets/remote_image.dart';
 import '../../l10n/app_localizations.dart';
 import '../drama_detail/drama_detail_view.dart';
 import 'watch_records_binding.dart';
+import 'widgets/watch_record_card.dart';
+
+const double _pageHorizontal = 14;
+const double _statsFontSize = 12;
+const double _emptyListHeight = 360;
 
 /// 独立观看记录页。
 class WatchRecordsPage extends StatelessWidget {
@@ -35,11 +36,24 @@ class WatchRecordsPage extends StatelessWidget {
     final l10n = AppLocalizations.of(context)!;
     return Theme(
       data: AppTheme.light(),
-      child: PlainPageScaffold(
+      child: Scaffold(
-        pageKey: const Key('watch-records-page'),
+        key: const Key('watch-records-page'),
-        backKey: const Key('watch-records-back'),
+        backgroundColor: AppColors.ink,
+        body: SafeArea(
+          child: Column(
+            children: [
+              AppSubpageHeader(
                 title: l10n.watchHistory,
-        child: signedIn ? const _WatchRecordsBody() : const AuthGatePanel(),
+                backKey: const Key('watch-records-back'),
+              ),
+              Expanded(
+                child: signedIn
+                    ? const _WatchRecordsBody()
+                    : const AuthGatePanel(),
+              ),
+            ],
+          ),
+        ),
       ),
     );
   }
@@ -82,52 +96,97 @@ class _WatchRecordsBodyState extends State<_WatchRecordsBody> {
   Widget _content(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
     if (controller.loading && controller.records.isEmpty) {
-      return const Center(child: CircularProgressIndicator());
+      return const Center(
+        child: CircularProgressIndicator(key: Key('watch-records-loading')),
+      );
     }
     if (controller.error != null && controller.records.isEmpty) {
-      return _FailureState(
+      return _refreshable(
+        children: [
+          SizedBox(
+            height: _emptyListHeight,
+            child: _FailureState(
               message: errorText(l10n, controller.error, l10n.progressError),
               onRetry: controller.load,
+            ),
+          ),
+        ],
       );
     }
     if (controller.records.isEmpty) {
-      return EmptyState(
+      return _refreshable(
+        children: [
+          SizedBox(
+            height: _emptyListHeight,
+            child: EmptyState(
               key: const Key('watch-records-empty'),
               icon: Icons.history_rounded,
               title: l10n.noWatchRecords,
               subtitle: l10n.emptyHint,
+            ),
+          ),
+        ],
       );
     }
-    return Column(
+    return _refreshable(
       children: [
-        Align(
+        _summary(l10n),
-          alignment: Alignment.centerRight,
+        for (final (index, record) in controller.records.indexed) ...[
-          child: TextButton.icon(
+          if (index > 0) const SizedBox(height: 10),
-            key: const Key('watch-records-clear'),
+          WatchRecordCard(
-            onPressed: controller.clearing ? null : _confirmClear,
-            icon: const Icon(Icons.delete_sweep_outlined),
-            label: Text(l10n.clearAll),
-          ),
-        ),
-        Expanded(
-          child: RefreshIndicator(
-            onRefresh: controller.load,
-            child: ListView.separated(
-              padding: const EdgeInsets.fromLTRB(16, 4, 16, 28),
-              itemCount: controller.records.length,
-              separatorBuilder: (_, _) => const SizedBox(height: 10),
-              itemBuilder: (context, index) {
-                final record = controller.records[index];
-                return _RecordTile(
             record: record,
             onRetry: () => controller.retryDetail(record.dramaId),
             onRemove: () => _remove(record.dramaId),
-                  onOpen: record.drama == null
+            onOpen: record.drama == null ? null : () => _open(record.drama!),
-                      ? null
-                      : () => _open(record.drama!),
-                );
-              },
           ),
+        ],
+      ],
+    );
+  }
+
+  Widget _refreshable({required List<Widget> children}) {
+    return RefreshIndicator(
+      color: AppColors.blue,
+      backgroundColor: AppColors.card,
+      strokeWidth: 2,
+      onRefresh: controller.load,
+      child: ListView(
+        physics: const AlwaysScrollableScrollPhysics(),
+        padding: const EdgeInsets.fromLTRB(
+          _pageHorizontal,
+          4,
+          _pageHorizontal,
+          28,
+        ),
+        children: children,
+      ),
+    );
+  }
+
+  Widget _summary(AppLocalizations l10n) {
+    return Row(
+      children: [
+        Text(
+          l10n.watchRecordsCount(controller.records.length),
+          key: const Key('watch-records-count'),
+          style: const TextStyle(
+            color: AppColors.muted,
+            fontSize: _statsFontSize,
+          ),
+        ),
+        const Spacer(),
+        TextButton.icon(
+          key: const Key('watch-records-clear'),
+          onPressed: controller.clearing ? null : _confirmClear,
+          style: TextButton.styleFrom(
+            foregroundColor: AppColors.blue,
+            minimumSize: const Size(44, 36),
+            padding: const EdgeInsets.symmetric(horizontal: 8),
+          ),
+          icon: const Icon(Icons.delete_sweep_outlined, size: 16),
+          label: Text(
+            l10n.clearAll,
+            style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w700),
           ),
         ),
       ],
@@ -182,181 +241,6 @@ class _WatchRecordsBodyState extends State<_WatchRecordsBody> {
   }
 }
 
-class _RecordTile extends StatelessWidget {
-  const _RecordTile({
-    required this.record,
-    required this.onRetry,
-    required this.onRemove,
-    this.onOpen,
-  });
-
-  final WatchRecord record;
-  final VoidCallback onRetry;
-  final VoidCallback onRemove;
-  final VoidCallback? onOpen;
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
-    if (record.detailFailed) {
-      return _FailedRecordTile(record: record, onRetry: onRetry);
-    }
-    final drama = record.drama;
-    if (drama == null || record.detailLoading) {
-      return Container(
-        key: ValueKey('watch-record-${record.dramaId}'),
-        height: AppDimens.watchPlaceholderHeight,
-        decoration: BoxDecoration(
-          color: AppColors.card,
-          borderRadius: BorderRadius.circular(AppDimens.innerRadius),
-        ),
-        child: const Padding(
-          padding: EdgeInsets.all(AppDimens.innerPadding),
-          child: Center(
-            child: SizedBox(
-              width: 22,
-              height: 22,
-              child: CircularProgressIndicator(strokeWidth: 2),
-            ),
-          ),
-        ),
-      );
-    }
-    final episodeLabel = record.episodeNumber > 0
-        ? l10n.episodeLabel(record.episodeNumber)
-        : l10n.episodeUnavailable;
-    return Material(
-      key: ValueKey('watch-record-${record.dramaId}'),
-      color: AppColors.card,
-      borderRadius: BorderRadius.circular(AppDimens.innerRadius),
-      clipBehavior: Clip.antiAlias,
-      child: InkWell(
-        onTap: onOpen,
-        child: Padding(
-          padding: const EdgeInsets.all(AppDimens.innerPadding),
-          child: Row(
-            children: [
-              ClipRRect(
-                borderRadius: BorderRadius.circular(8),
-                child: RemoteImage(drama.posterUrl, width: 72, height: 96),
-              ),
-              const SizedBox(width: 12),
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      drama.title,
-                      maxLines: 2,
-                      overflow: TextOverflow.ellipsis,
-                      style: const TextStyle(
-                        color: Colors.white,
-                        fontSize: AppDimens.listTitle,
-                        fontWeight: FontWeight.w700,
-                      ),
-                    ),
-                    const SizedBox(height: 5),
-                    Text(
-                      episodeLabel,
-                      key: ValueKey('watch-record-episode-${record.dramaId}'),
-                      style: const TextStyle(
-                        color: AppColors.muted,
-                        fontSize: AppDimens.caption,
-                      ),
-                    ),
-                    const SizedBox(height: 7),
-                    ClipRRect(
-                      borderRadius: BorderRadius.circular(
-                        AppDimens.progressRadius,
-                      ),
-                      child: LinearProgressIndicator(
-                        minHeight: AppDimens.progressHeight,
-                        value: record.progress.fraction,
-                        backgroundColor: Colors.white24,
-                        valueColor: const AlwaysStoppedAnimation(
-                          AppColors.blueSoft,
-                        ),
-                      ),
-                    ),
-                    const SizedBox(height: 6),
-                    Text(
-                      l10n.resumeProgress(
-                        _clock(record.progress.position),
-                        _clock(record.progress.duration),
-                      ),
-                      style: const TextStyle(
-                        color: AppColors.blueSoft,
-                        fontSize: AppDimens.caption,
-                      ),
-                    ),
-                    if (record.progress.updatedAt != null)
-                      Text(
-                        l10n.updatedAtLabel(
-                          formatLocalizedDateTime(
-                            context,
-                            record.progress.updatedAt!,
-                          ),
-                        ),
-                        key: ValueKey('watch-record-updated-${record.dramaId}'),
-                        style: const TextStyle(
-                          color: AppColors.muted,
-                          fontSize: AppDimens.caption,
-                        ),
-                      ),
-                  ],
-                ),
-              ),
-              IconButton(
-                key: ValueKey('watch-record-remove-${record.dramaId}'),
-                tooltip: l10n.remove,
-                onPressed: onRemove,
-                icon: const Icon(Icons.close_rounded),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-class _FailedRecordTile extends StatelessWidget {
-  const _FailedRecordTile({required this.record, required this.onRetry});
-
-  final WatchRecord record;
-  final VoidCallback onRetry;
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
-    return Container(
-      key: ValueKey('watch-record-failed-${record.dramaId}'),
-      padding: const EdgeInsets.all(AppDimens.innerPadding),
-      decoration: BoxDecoration(
-        color: AppColors.card,
-        borderRadius: BorderRadius.circular(AppDimens.innerRadius),
-      ),
-      child: Row(
-        children: [
-          const Icon(Icons.broken_image_outlined, color: Colors.white38),
-          const SizedBox(width: 12),
-          Expanded(
-            child: Text(
-              l10n.detailLoadFailed,
-              style: const TextStyle(color: Colors.white70),
-            ),
-          ),
-          TextButton(
-            key: ValueKey('watch-record-retry-${record.dramaId}'),
-            onPressed: onRetry,
-            child: Text(l10n.retryDetail),
-          ),
-        ],
-      ),
-    );
-  }
-}
-
 class _FailureState extends StatelessWidget {
   const _FailureState({required this.message, required this.onRetry});
 
@@ -375,9 +259,3 @@ class _FailureState extends StatelessWidget {
     );
   }
 }
-
-String _clock(Duration value) {
-  final minutes = value.inMinutes;
-  final seconds = value.inSeconds.remainder(60);
-  return '$minutes:${seconds.toString().padLeft(2, '0')}';
-}

lib/pages/watch_records/widgets/watch_record_card.dart

@@ -0,0 +1,248 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/data/models/watch_record.dart';
+import '../../../core/formatting/localized_date_time.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_theme.dart';
+import '../../../core/widgets/remote_image.dart';
+import '../../../l10n/app_localizations.dart';
+
+const double _cardRadius = 14;
+const double _cardPadding = 10;
+const double _coverWidth = 72;
+const double _coverHeight = 96;
+const double _coverRadius = 10;
+const double _removeSize = 28;
+const double _removeIconSize = 16;
+const double _progressHeight = 4;
+const double _progressRadius = 2;
+const double _statsFontSize = 12;
+const double _metaFontSize = 11;
+const double _titleFontSize = 15;
+
+/// 观看记录卡片：覆盖加载、失败与完整记录三种状态。
+class WatchRecordCard extends StatelessWidget {
+  const WatchRecordCard({
+    super.key,
+    required this.record,
+    required this.onRetry,
+    required this.onRemove,
+    this.onOpen,
+  });
+
+  final WatchRecord record;
+  final VoidCallback onRetry;
+  final VoidCallback onRemove;
+  final VoidCallback? onOpen;
+
+  @override
+  Widget build(BuildContext context) {
+    if (record.detailFailed) {
+      return _FailedRecordTile(record: record, onRetry: onRetry);
+    }
+    final drama = record.drama;
+    if (drama == null || record.detailLoading) {
+      return _loadingCard();
+    }
+    final l10n = AppLocalizations.of(context)!;
+    final episodeLabel = record.episodeNumber > 0
+        ? l10n.episodeLabel(record.episodeNumber)
+        : l10n.episodeUnavailable;
+    return _card(
+      onTap: onOpen,
+      child: Stack(
+        children: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              ClipRRect(
+                borderRadius: BorderRadius.circular(_coverRadius),
+                child: RemoteImage(
+                  drama.posterUrl,
+                  key: ValueKey('watch-record-cover-${record.dramaId}'),
+                  width: _coverWidth,
+                  height: _coverHeight,
+                ),
+              ),
+              const SizedBox(width: 12),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.only(right: _removeSize),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        drama.title,
+                        key: ValueKey('watch-record-title-${record.dramaId}'),
+                        maxLines: 2,
+                        overflow: TextOverflow.ellipsis,
+                        style: const TextStyle(
+                          color: AppColors.onSurface,
+                          fontSize: _titleFontSize,
+                          fontWeight: FontWeight.w700,
+                        ),
+                      ),
+                      const SizedBox(height: 4),
+                      Text(
+                        episodeLabel,
+                        key: ValueKey('watch-record-episode-${record.dramaId}'),
+                        style: const TextStyle(
+                          color: AppColors.muted,
+                          fontSize: _statsFontSize,
+                        ),
+                      ),
+                      const SizedBox(height: 8),
+                      ClipRRect(
+                        borderRadius: BorderRadius.circular(_progressRadius),
+                        child: LinearProgressIndicator(
+                          minHeight: _progressHeight,
+                          value: record.progress.fraction,
+                          backgroundColor: AppColors.border,
+                          valueColor: const AlwaysStoppedAnimation(
+                            AppColors.blue,
+                          ),
+                        ),
+                      ),
+                      const SizedBox(height: 4),
+                      Text(
+                        '${_clock(record.progress.position)} / '
+                        '${_clock(record.progress.duration)}',
+                        style: const TextStyle(
+                          color: AppColors.muted,
+                          fontSize: _metaFontSize,
+                        ),
+                      ),
+                      if (record.progress.updatedAt != null)
+                        Text(
+                          l10n.updatedAtLabel(
+                            formatLocalizedDateTime(
+                              context,
+                              record.progress.updatedAt!,
+                            ),
+                          ),
+                          key: ValueKey(
+                            'watch-record-updated-${record.dramaId}',
+                          ),
+                          style: const TextStyle(
+                            color: AppColors.subtle,
+                            fontSize: _metaFontSize,
+                          ),
+                        ),
+                    ],
+                  ),
+                ),
+              ),
+            ],
+          ),
+          Positioned(top: 0, right: 0, child: _removeButton(l10n.remove)),
+        ],
+      ),
+    );
+  }
+
+  Widget _loadingCard() => Container(
+    key: ValueKey('watch-record-${record.dramaId}'),
+    padding: const EdgeInsets.all(_cardPadding),
+    decoration: _cardDecoration(),
+    child: const SizedBox(
+      height: _coverHeight,
+      child: Center(child: CircularProgressIndicator(strokeWidth: 2)),
+    ),
+  );
+
+  Widget _card({required VoidCallback? onTap, required Widget child}) {
+    return Container(
+      key: ValueKey('watch-record-${record.dramaId}'),
+      decoration: _cardDecoration(),
+      child: Material(
+        color: Colors.transparent,
+        borderRadius: BorderRadius.circular(_cardRadius),
+        clipBehavior: Clip.antiAlias,
+        child: InkWell(
+          onTap: onTap,
+          child: Padding(
+            padding: const EdgeInsets.all(_cardPadding),
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+
+  BoxDecoration _cardDecoration() => BoxDecoration(
+    color: AppColors.card,
+    borderRadius: BorderRadius.circular(_cardRadius),
+    boxShadow: const [AppTheme.cardShadow],
+  );
+
+  Widget _removeButton(String tooltip) {
+    return SizedBox.square(
+      dimension: _removeSize,
+      child: Material(
+        color: AppColors.raised,
+        shape: const CircleBorder(),
+        clipBehavior: Clip.antiAlias,
+        child: IconButton(
+          key: ValueKey('watch-record-remove-${record.dramaId}'),
+          tooltip: tooltip,
+          padding: EdgeInsets.zero,
+          onPressed: onRemove,
+          icon: const Icon(
+            Icons.close_rounded,
+            size: _removeIconSize,
+            color: AppColors.muted,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _FailedRecordTile extends StatelessWidget {
+  const _FailedRecordTile({required this.record, required this.onRetry});
+
+  final WatchRecord record;
+  final VoidCallback onRetry;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return Container(
+      key: ValueKey('watch-record-${record.dramaId}'),
+      decoration: BoxDecoration(
+        color: AppColors.card,
+        borderRadius: BorderRadius.circular(_cardRadius),
+        boxShadow: const [AppTheme.cardShadow],
+      ),
+      child: Container(
+        key: ValueKey('watch-record-failed-${record.dramaId}'),
+        padding: const EdgeInsets.all(_cardPadding),
+        child: Row(
+          children: [
+            const Icon(Icons.broken_image_outlined, color: AppColors.muted),
+            const SizedBox(width: 12),
+            Expanded(
+              child: Text(
+                l10n.detailLoadFailed,
+                style: const TextStyle(color: AppColors.muted, fontSize: 12),
+              ),
+            ),
+            TextButton(
+              key: ValueKey('watch-record-retry-${record.dramaId}'),
+              onPressed: onRetry,
+              child: Text(l10n.retryDetail),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+String _clock(Duration value) {
+  final minutes = value.inMinutes;
+  final seconds = value.inSeconds.remainder(60);
+  return '$minutes:${seconds.toString().padLeft(2, '0')}';
+}

test/library/favorites_page_test.dart

@@ -10,6 +10,7 @@ import 'package:fruitshorts/core/data/services/auth_controller.dart';
 import 'package:fruitshorts/core/data/services/auth_session_store.dart';
 import 'package:fruitshorts/core/data/services/favorite_controller.dart';
 import 'package:fruitshorts/core/platform/haptics.dart';
+import 'package:fruitshorts/core/theme/app_colors.dart';
 import 'package:fruitshorts/core/widgets/empty_state.dart';
 import 'package:fruitshorts/l10n/app_localizations.dart';
 import 'package:fruitshorts/pages/favorites/favorites_page.dart';
@@ -47,9 +48,35 @@ void main() {
 
     await _pumpPage(tester, auth: auth, favorites: favorites);
 
+    expect(find.byKey(const Key('favorites-page')), findsOneWidget);
+    expect(find.byKey(const Key('favorites-back')), findsOneWidget);
+    expect(
+      tester.widget<Text>(find.byKey(const Key('favorites-count'))).data,
+      '2 favorites',
+    );
+    expect(find.text('Long press a card to remove'), findsOneWidget);
     expect(find.text('Drama signal'), findsOneWidget);
     expect(find.text('Drama city'), findsOneWidget);
+    final title = tester.widget<Text>(
+      find.byKey(const Key('favorite-title-signal')),
+    );
+    expect(title.style?.color, AppColors.onSurface);
+    expect(title.style?.fontSize, 15);
+    expect(
+      tester.getSize(find.byKey(const Key('favorite-cover-signal'))),
+      const Size(80, 106),
+    );
     expect(find.byKey(const Key('favorite-remove-signal')), findsOneWidget);
+    expect(
+      tester.getSize(find.byKey(const Key('favorite-remove-signal'))),
+      const Size(28, 28),
+    );
+    final refresh = tester.widget<RefreshIndicator>(
+      find.byType(RefreshIndicator),
+    );
+    expect(refresh.color, AppColors.blue);
+    expect(refresh.backgroundColor, AppColors.card);
+    expect(refresh.strokeWidth, 2);
   });
 
   testWidgets('should_keep_card_and_show_failure_when_remove_fails', (

test/watch/watch_records_controller_test.dart

@@ -72,6 +72,43 @@ void main() {
     expect(controller.error, isNull);
   });
 
+  test('should_reuse_cached_details_when_records_are_loaded_again', () async {
+    final history = ControlledWatchHistory([_progress('1'), _progress('2')]);
+    final catalog = ScriptedWatchCatalog();
+    final controller = WatchRecordsController(
+      history: history,
+      catalog: catalog,
+    );
+
+    await controller.load();
+    await controller.load();
+
+    expect(catalog.calls, ['1', '2']);
+    expect(
+      controller.records.every(
+        (record) => !record.detailLoading && record.drama != null,
+      ),
+      isTrue,
+    );
+  });
+
+  test('should_keep_existing_records_when_refresh_fails', () async {
+    final history = ControlledWatchHistory([_progress('1')]);
+    final controller = WatchRecordsController(
+      history: history,
+      catalog: ScriptedWatchCatalog(),
+    );
+    await controller.load();
+
+    history.failRecent = true;
+    await controller.load();
+
+    expect(controller.loading, isFalse);
+    expect(controller.error, 'progressError');
+    expect(controller.records.single.drama?.id, '1');
+    expect(controller.records.single.detailLoading, isFalse);
+  });
+
   test('should_keep_other_records_when_one_detail_request_fails', () async {
     final history = ControlledWatchHistory([_progress('1'), _progress('2')]);
     final catalog = ScriptedWatchCatalog(failedIds: {'1'});

test/watch/watch_records_page_test.dart

@@ -12,6 +12,7 @@ import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart
 import 'package:fruitshorts/core/data/services/auth_controller.dart';
 import 'package:fruitshorts/core/data/services/auth_session_store.dart';
 import 'package:fruitshorts/core/platform/haptics.dart';
+import 'package:fruitshorts/core/theme/app_colors.dart';
 import 'package:fruitshorts/core/widgets/empty_state.dart';
 import 'package:fruitshorts/l10n/app_localizations.dart';
 import 'package:fruitshorts/pages/watch_records/watch_records_page.dart';
@@ -47,11 +48,46 @@ void main() {
     await _pumpPage(tester, auth: auth, history: history, catalog: catalog);
 
     expect(find.byKey(const Key('watch-records-page')), findsOneWidget);
+    expect(find.byKey(const Key('watch-records-back')), findsOneWidget);
+    expect(
+      tester.widget<Text>(find.byKey(const Key('watch-records-count'))).data,
+      '1 records',
+    );
     expect(find.text('The Signal'), findsOneWidget);
+    final title = tester.widget<Text>(
+      find.byKey(const Key('watch-record-title-the-signal-demo')),
+    );
+    expect(title.style?.color, AppColors.onSurface);
+    expect(title.style?.fontSize, 15);
+    expect(
+      tester.getSize(
+        find.byKey(const Key('watch-record-cover-the-signal-demo')),
+      ),
+      const Size(72, 96),
+    );
+    expect(
+      tester.getSize(
+        find.byKey(const Key('watch-record-remove-the-signal-demo')),
+      ),
+      const Size(28, 28),
+    );
     expect(
       find.byKey(const Key('watch-record-episode-the-signal-demo')),
       findsOneWidget,
     );
+    final refresh = tester.widget<RefreshIndicator>(
+      find.byType(RefreshIndicator),
+    );
+    expect(refresh.color, AppColors.blue);
+    expect(refresh.backgroundColor, AppColors.card);
+    expect(refresh.strokeWidth, 2);
+    final list = tester.widget<ListView>(
+      find.descendant(
+        of: find.byType(RefreshIndicator),
+        matching: find.byType(ListView),
+      ),
+    );
+    expect(list.physics, isA<AlwaysScrollableScrollPhysics>());
   });
 
   testWidgets(