jianghaifeng/ReelShort
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-20 16:31:59 +08:00
1 parent 7285a1cd4e
commit 794dc87083
14 files changed
+855 -272
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/core/data/services/watch_records_controller.dart
+9 -1
View File
@@ -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
+13
View File
@@ -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
+3
View File
@@ -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
+18
View File
@@ -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
+13
View File
@@ -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
+13
View File
@@ -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
+13
View File
@@ -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
+3
View File
@@ -436,6 +436,9 @@
"recordDeleteFailed": "删除记录失败，请重试。",
"recordClearFailed": "清空观看记录失败，请重试。",
"clearAll": "清空",
"watchRecordsCount": "共 {count} 条",
"favoritesCount": "共 {count} 部",
"favoriteLongPressHint": "长按卡片可取消收藏",
"clearWatchHistoryTitle": "清空观看记录？",
"clearWatchHistoryMessage": "这会从当前账号移除全部观看记录。",
"confirmClear": "清空",
lib/pages/favorites/favorites_page.dart
+317 -44
View File
@@ -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/plain_page_scaffold.dart';
import '../../core/widgets/remote_image.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,13 +70,26 @@ class _FavoritesPageState extends State<FavoritesPage> {
final signedIn = context.watch<AuthController>().isSignedIn;
return Theme(
data: AppTheme.light(),
child: PlainPageScaffold(
pageKey: const Key('favorites-page'),
backKey: const Key('favorites-back'),
title: l10n.myFavorites,
child: signedIn
? _FavoritesBody(favorites: context.watch<FavoriteController>())
: const AuthGatePanel(),
child: Scaffold(
key: const Key('favorites-page'),
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>(),
)
: const AuthGatePanel(),
),
],
),
),
),
);
}
@@ -74,53 +104,110 @@ 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(
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()),
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(
key: const Key('favorites-empty'),
icon: Icons.favorite_border_rounded,
title: l10n.noFavorites,
subtitle: l10n.emptyHint,
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(
onRefresh: favorites.load,
child: ListView.separated(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 28),
itemCount: favorites.cards.length,
separatorBuilder: (_, _) => const SizedBox(height: 10),
itemBuilder: (context, index) {
final drama = favorites.cards[index];
return LibraryDramaTile(
key: ValueKey('favorite-card-${drama.id}'),
return _refreshable(
favorites,
children: [
_summary(l10n),
for (final (index, drama) in favorites.cards.indexed) ...[
if (index > 0) const SizedBox(height: 10),
_FavoriteCard(
drama: drama,
onTap: () => _open(context, drama),
trailing: IconButton(
key: ValueKey('favorite-remove-${drama.id}'),
tooltip: l10n.remove,
onPressed: () => _remove(context, drama.id),
icon: const Icon(
Icons.favorite_rounded,
color: AppColors.favorite,
),
),
);
},
onOpen: () => _open(context, drama),
onRemove: () => _remove(context, drama.id),
),
],
],
);
}
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,
),
),
),
],
);
}
Future<void> _open(BuildContext context, Drama drama) async {
await Navigator.of(context).push<void>(
MaterialPageRoute(builder: (_) => DramaDetailPage(drama: drama)),
@@ -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
+105 -227
View File
@@ -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/remote_image.dart';
import '../../core/widgets/subpage_header.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(
pageKey: const Key('watch-records-page'),
backKey: const Key('watch-records-back'),
title: l10n.watchHistory,
child: signedIn ? const _WatchRecordsBody() : const AuthGatePanel(),
child: Scaffold(
key: const Key('watch-records-page'),
backgroundColor: AppColors.ink,
body: SafeArea(
child: Column(
children: [
AppSubpageHeader(
title: l10n.watchHistory,
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(
message: errorText(l10n, controller.error, l10n.progressError),
onRetry: controller.load,
return _refreshable(
children: [
SizedBox(
height: _emptyListHeight,
child: _FailureState(
message: errorText(l10n, controller.error, l10n.progressError),
onRetry: controller.load,
),
),
],
);
}
if (controller.records.isEmpty) {
return EmptyState(
key: const Key('watch-records-empty'),
icon: Icons.history_rounded,
title: l10n.noWatchRecords,
subtitle: l10n.emptyHint,
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(
alignment: Alignment.centerRight,
child: TextButton.icon(
key: const Key('watch-records-clear'),
onPressed: controller.clearing ? null : _confirmClear,
icon: const Icon(Icons.delete_sweep_outlined),
label: Text(l10n.clearAll),
_summary(l10n),
for (final (index, record) in controller.records.indexed) ...[
if (index > 0) const SizedBox(height: 10),
WatchRecordCard(
record: record,
onRetry: () => controller.retryDetail(record.dramaId),
onRemove: () => _remove(record.dramaId),
onOpen: record.drama == null ? 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,
),
),
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
? null
: () => _open(record.drama!),
);
},
),
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
+248
View File
@@ -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')}';
}