/// 服务端上传历史页(UI-03 页面 16「Server records」)。 /// /// GET /uploads(operationId listUploads)游标分页展示**当前账号跨设备** /// 的上传会话记录:标题 +「全部设备 · 当前账号」副标题明确**跨设备服务端 /// 口径**;顶部说明条强调本机待传队列在「上传」页——本机队列是 drift /// 任务库(TaskStore),两者数据源与生命周期不同,不合并统计(A19)。 /// 相册/日期为客户端过滤(已加载记录内),分页按服务端原序继续;下拉 /// 刷新 + 加载更多失败可重试。 /// /// 记录不含 filename 与设备名(契约 UploadSessionRecord 无该字段),行首 /// 展示 clientTaskId 前 8 位作识别;设备来源做**安全回退**——sourceDeviceId /// 与本机 [DeviceId] 一致标「本设备」,否则显示通用占位(不展示裸设备 /// ID,不编造设备名)。 library; import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import '../core/api_client.dart'; import '../core/app_exception.dart'; import '../core/device_id.dart'; import '../core/error_codes.dart'; import '../core/error_l10n.dart'; import '../features/albums/album_format.dart'; import '../features/albums/providers.dart'; import '../features/photos/models.dart'; import '../features/uploads/models.dart'; import '../features/uploads/queue_controller.dart'; import '../l10n/app_localizations.dart'; import '../ui/components/empty_state.dart'; import '../ui/components/error_state.dart'; import '../ui/components/state_badge.dart'; import '../ui/tokens.dart'; /// 服务端上传历史(从上传中心「History」入口进入;无根底部导航)。 class ServerHistoryPage extends ConsumerStatefulWidget { const ServerHistoryPage({super.key}); @override ConsumerState createState() => _ServerHistoryPageState(); } class _ServerHistoryPageState extends ConsumerState { static const int _pageSize = 20; List _items = const []; String? _nextCursor; bool _hasMore = false; bool _loading = true; bool _loadingMore = false; /// 加载更多失败(页脚重试行出现;重试成功后清除)。 bool _loadMoreFailed = false; String? _loadMoreErrorCode; String? _errorCode; /// 客户端次级筛选(相册 × 时间;作用于已加载记录)。 String? _albumId; QueueTimeFilter _time = QueueTimeFilter.all; /// 本机设备标识(「本设备」标记比对,A19)。 String? _ownDeviceId; @override void initState() { super.initState(); _reload(); unawaited( ref.read(deviceIdProvider).value().then((id) { if (mounted) setState(() => _ownDeviceId = id); }), ); } Future _reload() async { setState(() { _loading = true; _errorCode = null; _loadMoreFailed = false; }); try { final page = await ref .read(apiClientProvider) .listUploads(limit: _pageSize); if (mounted) { setState(() { _items = page.items; _nextCursor = page.nextCursor; _hasMore = page.hasMore; _loading = false; }); } } on AppException catch (e) { if (mounted) { setState(() { _errorCode = e.code; _loading = false; }); } } on Object { if (mounted) { setState(() { _errorCode = ErrorCodes.internalError; _loading = false; }); } } } /// 下拉刷新:保留当前列表(不切换全局加载态);失败以 snackbar 提示。 Future _refresh() async { try { final page = await ref .read(apiClientProvider) .listUploads(limit: _pageSize); if (mounted) { setState(() { _items = page.items; _nextCursor = page.nextCursor; _hasMore = page.hasMore; _loadMoreFailed = false; }); } } on Object { if (mounted) { ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text(AppLocalizations.of(context).errorGeneric), ), ); } } } Future _loadMore() async { if (_loading || _loadingMore || !_hasMore) return; setState(() { _loadingMore = true; _loadMoreFailed = false; }); try { final page = await ref.read(apiClientProvider).listUploads( cursor: _nextCursor, limit: _pageSize, ); if (mounted) { setState(() { _items = [..._items, ...page.items]; _nextCursor = page.nextCursor; _hasMore = page.hasMore; _loadingMore = false; }); } } on AppException catch (e) { // 页脚重试行(§4 页面 16:加载失败可重试),不弹全局错误。 if (mounted) { setState(() { _loadingMore = false; _loadMoreFailed = true; _loadMoreErrorCode = e.code; }); } } on Object { if (mounted) { setState(() { _loadingMore = false; _loadMoreFailed = true; _loadMoreErrorCode = ErrorCodes.internalError; }); } } } /// 已加载记录按相册 × 时间过滤(分页按服务端原序继续,不因过滤中断)。 List get _visibleItems { final cutoff = _time.since(DateTime.now()); return _items.where((record) { if (_albumId != null && record.albumId != _albumId) return false; if (cutoff != null && record.createdAt.toLocal().isBefore(cutoff)) { return false; } return true; }).toList(); } @override Widget build(BuildContext context) { final l10n = AppLocalizations.of(context); final theme = Theme.of(context); final albums = ref.watch(albumListProvider).items; final selectedAlbum = _albumId == null ? null : albums.where((a) => a.id == _albumId).firstOrNull; return Scaffold( appBar: AppBar( // 标题 + 跨设备副标题(§4 页面 16:Server records · All devices)。 title: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Text(l10n.serverRecords), Text( l10n.serverSubtitle, style: theme.textTheme.bodySmall?.copyWith( color: theme.colorScheme.onSurfaceVariant, ), ), ], ), ), body: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ // A19 标注说明条:与「上传」页(本机任务库)的数据源区分。 Card( margin: const EdgeInsets.fromLTRB(kSpace16, kSpace12, kSpace16, 0), child: Padding( padding: const EdgeInsets.all(kSpace12), child: Row( children: [ Icon( Icons.devices_outlined, size: 18, color: theme.colorScheme.onSurfaceVariant, ), const SizedBox(width: kSpace8), Expanded( child: Text( l10n.serverHistoryBanner, style: theme.textTheme.bodySmall?.copyWith( color: theme.colorScheme.onSurfaceVariant, ), ), ), ], ), ), ), Padding( padding: const EdgeInsets.fromLTRB( kSpace16, kSpace8, kSpace16, kSpace4), child: Row( children: [ PopupMenuButton( initialValue: _albumId ?? '', onSelected: (albumId) => setState(() { _albumId = albumId == '' ? null : albumId; }), itemBuilder: (context) => [ PopupMenuItem( value: '', child: Text(l10n.queueAlbumFilterAll), ), for (final album in albums) PopupMenuItem( value: album.id, child: Text( albumDisplayTitle(album, l10n.localeName), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), ], child: _FilterPill( icon: Icons.photo_album_outlined, label: selectedAlbum == null ? l10n.queueAlbumFilterAll : albumDisplayTitle(selectedAlbum, l10n.localeName), ), ), const SizedBox(width: kSpace8), PopupMenuButton( initialValue: _time, onSelected: (time) => setState(() => _time = time), itemBuilder: (context) => [ for (final time in QueueTimeFilter.values) PopupMenuItem( value: time, child: Text(switch (time) { QueueTimeFilter.all => l10n.queueTimeAll, QueueTimeFilter.today => l10n.uploadsToday, QueueTimeFilter.last7Days => l10n.queueTimeLast7Days, QueueTimeFilter.last30Days => l10n.queueTimeLast30Days, }), ), ], child: _FilterPill( icon: Icons.schedule_outlined, label: switch (_time) { QueueTimeFilter.all => l10n.queueTimeAll, QueueTimeFilter.today => l10n.uploadsToday, QueueTimeFilter.last7Days => l10n.queueTimeLast7Days, QueueTimeFilter.last30Days => l10n.queueTimeLast30Days, }, ), ), ], ), ), Expanded(child: _buildBody(l10n)), ], ), ); } Widget _buildBody(AppLocalizations l10n) { if (_loading) { return const Center(child: CircularProgressIndicator()); } if (_errorCode != null) { return ErrorState( message: l10n.messageForErrorCode(_errorCode!), onRetry: _reload, ); } final visible = _visibleItems; if (visible.isEmpty) { return EmptyState( icon: Icons.cloud_done_outlined, title: l10n.serverHistoryEmpty, ); } return RefreshIndicator( onRefresh: _refresh, child: ListView.builder( physics: const AlwaysScrollableScrollPhysics(), itemCount: visible.length + (_hasMore || _loadingMore ? 1 : 0), itemBuilder: (context, index) { if (index >= visible.length) { if (_loadMoreFailed) { return _LoadMoreFailedRow( message: l10n.messageForErrorCode( _loadMoreErrorCode ?? ErrorCodes.networkError, ), onRetry: _loadMore, ); } return const Padding( padding: EdgeInsets.symmetric(vertical: 16), child: Center( child: SizedBox( height: 24, width: 24, child: CircularProgressIndicator(strokeWidth: 2), ), ), ); } // 预取触发;加载更多失败后停住——页脚重试行接管(不自动循环 // 重试,§4 页面 16)。 if (index >= visible.length - 3 && _hasMore && !_loadingMore && !_loadMoreFailed) { WidgetsBinding.instance.addPostFrameCallback((_) => _loadMore()); } return _sessionTile(context, visible[index]); }, ), ); } Widget _sessionTile(BuildContext context, UploadSessionRecord record) { final l10n = AppLocalizations.of(context); final theme = Theme.of(context); // createdAt 以本机时区展示(记录跨相册,无单一相册时区可依)。 final local = record.createdAt.toLocal(); final time = '${local.year}/${local.month}/${local.day} ' '${local.hour.toString().padLeft(2, '0')}:' '${local.minute.toString().padLeft(2, '0')}'; // 设备来源安全回退:本机 → 「本设备」;其余 → 通用占位(契约无设备 // 名,不展示裸 ID、不编造名称)。 final ownDevice = _ownDeviceId != null && record.sourceDeviceId == _ownDeviceId; final deviceLabel = ownDevice ? l10n.thisDevice : l10n.serverDeviceUnknown; return Padding( padding: const EdgeInsets.fromLTRB(kSpace16, kSpace8, kSpace12, kSpace8), child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ // 契约无图片 URL——中性占位(不伪造缩略图)。 Container( width: 48, height: 48, decoration: BoxDecoration( color: theme.colorScheme.surfaceContainerHighest, borderRadius: BorderRadius.circular(kRadiusBadge), ), child: Icon( Icons.cloud_done_outlined, size: 24, color: theme.colorScheme.onSurfaceVariant, ), ), const SizedBox(width: kSpace12), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( '${record.clientTaskId.substring(0, 8)} · ' '${(record.expectedBytes / 1024).round()} KB', maxLines: 1, overflow: TextOverflow.ellipsis, style: theme.textTheme.bodyMedium?.copyWith( fontWeight: FontWeight.w600, fontFeatures: const [FontFeature.tabularFigures()], ), ), const SizedBox(height: 2), Text( '$time · $deviceLabel', maxLines: 1, overflow: TextOverflow.ellipsis, style: theme.textTheme.bodySmall?.copyWith( color: theme.colorScheme.onSurfaceVariant, ), ), ], ), ), Wrap( spacing: 6, runSpacing: 4, crossAxisAlignment: WrapCrossAlignment.center, children: [ StateBadge( compact: true, variant: switch (record.state) { UploadSessionState.confirmed => BadgeVariant.success, UploadSessionState.pending => BadgeVariant.info, UploadSessionState.cancelled || UploadSessionState.expired => BadgeVariant.neutral, }, label: _sessionStateLabel(l10n, record.state), ), StateBadge( compact: true, variant: switch (record.photo.processingState) { PhotoProcessingState.ready => BadgeVariant.success, PhotoProcessingState.processing || PhotoProcessingState.uploaded => BadgeVariant.info, PhotoProcessingState.pendingUpload => BadgeVariant.warning, PhotoProcessingState.processingFailed => BadgeVariant.error, }, label: _processingLabel(l10n, record.photo.processingState), ), ], ), ], ), ); } static String _sessionStateLabel( AppLocalizations l10n, UploadSessionState state, ) { switch (state) { case UploadSessionState.pending: return l10n.uploadStatePending; case UploadSessionState.confirmed: return l10n.serverConfirmed; case UploadSessionState.cancelled: return l10n.uploadStateCancelled; case UploadSessionState.expired: return l10n.uploadStateExpired; } } static String _processingLabel( AppLocalizations l10n, PhotoProcessingState s, ) { switch (s) { case PhotoProcessingState.pendingUpload: return l10n.procPendingUpload; case PhotoProcessingState.uploaded: return l10n.procUploaded; case PhotoProcessingState.processing: return l10n.serverProcessing; case PhotoProcessingState.ready: return l10n.serverReady; case PhotoProcessingState.processingFailed: return l10n.procProcessingFailed; } } } /// 筛选药丸(相册/日期入口):边框胶囊 + 展开箭头(§4 页面 16)。 /// /// 作为 [PopupMenuButton.child] 使用——点击弹下拉菜单选择筛选值。 class _FilterPill extends StatelessWidget { const _FilterPill({required this.icon, required this.label}); final IconData icon; final String label; @override Widget build(BuildContext context) { final theme = Theme.of(context); return Container( padding: const EdgeInsets.symmetric(horizontal: 12), height: 36, decoration: BoxDecoration( borderRadius: BorderRadius.circular(999), border: Border.all(color: theme.colorScheme.outlineVariant), ), child: Row( mainAxisSize: MainAxisSize.min, children: [ Icon(icon, size: 16, color: theme.colorScheme.onSurfaceVariant), const SizedBox(width: 6), ConstrainedBox( constraints: const BoxConstraints(maxWidth: 140), child: Text( label, maxLines: 1, overflow: TextOverflow.ellipsis, style: theme.textTheme.bodySmall?.copyWith( color: theme.colorScheme.onSurfaceVariant, ), ), ), Icon( Icons.arrow_drop_down, size: 18, color: theme.colorScheme.onSurfaceVariant, ), ], ), ); } } /// 加载更多失败页脚:错误说明 + 重试(§4 页面 16)。 class _LoadMoreFailedRow extends StatelessWidget { const _LoadMoreFailedRow({required this.message, required this.onRetry}); final String message; final VoidCallback onRetry; @override Widget build(BuildContext context) { final l10n = AppLocalizations.of(context); final theme = Theme.of(context); return Padding( padding: const EdgeInsets.symmetric(horizontal: kSpace16, vertical: 8), child: Row( children: [ Icon(Icons.cloud_off, size: 16, color: theme.colorScheme.error), const SizedBox(width: kSpace8), Expanded( child: Text( message, style: theme.textTheme.bodySmall?.copyWith( color: theme.colorScheme.onSurfaceVariant, ), ), ), TextButton.icon( onPressed: onRetry, icon: const Icon(Icons.refresh, size: 16), label: Text(l10n.retry), ), ], ), ); } }