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/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')}';
}