xinyouhe/photo-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile): UI-03 capture and upload pages (13-16)

Browse Source 
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-09-22 02:06:23 +08:00
parent 8bd09eefb9
commit ab51616c70
13 changed files with 1907 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mobile/lib/pages/server_history_page.dart
+377 -114
View File
@@ -1,14 +1,16 @@
/// 服务端上传历史页（UI-01 §4.4 主题统一，P3 计划 Task 6 / A19 语义）。
/// 服务端上传历史页（UI-03 页面 16「Server records」）。
///
/// GET /uploads（operationId listUploads）游标分页展示**当前账号跨设备**
/// 的上传会话记录：会话状态 / photo.processingState / sourceDeviceId /
/// 创建时间。页面标题即「服务端历史（跨设备）」，顶部说明条明确「本机
/// 待传队列在上传页」——本机队列是 drift 任务库（TaskStore），两者数据源
/// 与生命周期不同，不合并统计（A19 标注要求）。
/// 的上传会话记录：标题 +「全部设备 · 当前账号」副标题明确**跨设备服务端
/// 口径**；顶部说明条强调本机待传队列在「上传」页——本机队列是 drift
/// 任务库（TaskStore），两者数据源与生命周期不同，不合并统计（A19）。
/// 相册/日期为客户端过滤（已加载记录内），分页按服务端原序继续；下拉
/// 刷新 + 加载更多失败可重试。
///
/// 记录不含 filename（契约 UploadSessionRecord 无该字段），行首展示
/// clientTaskId 前 8 位作识别；sourceDeviceId 与本机 [DeviceId] 一致时
/// 标记「本设备」。
/// 记录不含 filename 与设备名（契约 UploadSessionRecord 无该字段），行首
/// 展示 clientTaskId 前 8 位作识别；设备来源做**安全回退**——sourceDeviceId
/// 与本机 [DeviceId] 一致标「本设备」，否则显示通用占位（不展示裸设备
/// ID，不编造设备名）。
library;
import 'dart:async';
@@ -21,15 +23,18 @@ 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});
@@ -45,8 +50,16 @@ class _ServerHistoryPageState extends ConsumerState<ServerHistoryPage> {
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;
@@ -65,6 +78,7 @@ class _ServerHistoryPageState extends ConsumerState<ServerHistoryPage> {
setState(() {
_loading = true;
_errorCode = null;
_loadMoreFailed = false;
});
try {
final page = await ref
@@ -95,9 +109,37 @@ class _ServerHistoryPageState extends ConsumerState<ServerHistoryPage> {
}
}
/// 下拉刷新：保留当前列表（不切换全局加载态）；失败以 snackbar 提示。
Future<void> _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<void> _loadMore() async {
if (_loading || _loadingMore || !_hasMore) return;
setState(() => _loadingMore = true);
setState(() {
_loadingMore = true;
_loadMoreFailed = false;
});
try {
final page = await ref.read(apiClientProvider).listUploads(
cursor: _nextCursor,
@@ -111,36 +153,63 @@ class _ServerHistoryPageState extends ConsumerState<ServerHistoryPage> {
_loadingMore = false;
});
}
} on AppException {
} on AppException catch (e) {
// 页脚重试行（§4 页面 16：加载失败可重试），不弹全局错误。
if (mounted) {
setState(() => _loadingMore = false);
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
AppLocalizations.of(context)
.messageForErrorCode(ErrorCodes.networkError),
),
),
);
setState(() {
_loadingMore = false;
_loadMoreFailed = true;
_loadMoreErrorCode = e.code;
});
}
} on Object {
if (mounted) {
setState(() => _loadingMore = false);
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(AppLocalizations.of(context).errorGeneric),
),
);
setState(() {
_loadingMore = false;
_loadMoreFailed = true;
_loadMoreErrorCode = ErrorCodes.internalError;
});
}
}
}
/// 已加载记录按相册 × 时间过滤（分页按服务端原序继续，不因过滤中断）。
List<UploadSessionRecord> 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(title: Text(l10n.serverHistoryTitle)),
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: [
@@ -169,105 +238,217 @@ class _ServerHistoryPageState extends ConsumerState<ServerHistoryPage> {
),
),
),
Expanded(
child: _loading
? const Center(child: CircularProgressIndicator())
: _errorCode != null
? ErrorState(
message: l10n.messageForErrorCode(_errorCode!),
onRetry: _reload,
)
: _items.isEmpty
? EmptyState(
icon: Icons.cloud_done_outlined,
title: l10n.serverHistoryEmpty,
)
: ListView.builder(
itemCount: _items.length +
(_hasMore || _loadingMore ? 1 : 0),
itemBuilder: (context, index) {
if (index >= _items.length) {
return const Padding(
padding: EdgeInsets.symmetric(vertical: 16),
child: Center(
child: SizedBox(
height: 24,
width: 24,
child: CircularProgressIndicator(
strokeWidth: 2,
),
),
),
);
}
if (index >= _items.length - 3 &&
_hasMore &&
!_loadingMore) {
WidgetsBinding.instance.addPostFrameCallback(
(_) => _loadMore(),
);
}
return _sessionTile(l10n, theme, _items[index]);
},
),
Padding(
padding: const EdgeInsets.fromLTRB(
kSpace16, kSpace8, kSpace16, kSpace4),
child: Row(
children: [
PopupMenuButton<String>(
initialValue: _albumId ?? '',
onSelected: (albumId) => setState(() {
_albumId = albumId == '' ? null : albumId;
}),
itemBuilder: (context) => [
PopupMenuItem<String>(
value: '',
child: Text(l10n.queueAlbumFilterAll),
),
for (final album in albums)
PopupMenuItem<String>(
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<QueueTimeFilter>(
initialValue: _time,
onSelected: (time) => setState(() => _time = time),
itemBuilder: (context) => [
for (final time in QueueTimeFilter.values)
PopupMenuItem<QueueTimeFilter>(
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 _sessionTile(
AppLocalizations l10n,
ThemeData theme,
UploadSessionRecord record,
) {
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')}';
final deviceShort = record.sourceDeviceId?.substring(0, 8);
// 设备来源安全回退：本机 → 「本设备」；其余 → 通用占位（契约无设备
// 名，不展示裸 ID、不编造名称）。
final ownDevice =
_ownDeviceId != null && record.sourceDeviceId == _ownDeviceId;
return ListTile(
leading: const Icon(Icons.cloud_done_outlined),
title: Text(
'${record.clientTaskId.substring(0, 8)} · '
'${(record.expectedBytes / 1024).round()} KB',
style: theme.textTheme.bodyMedium?.copyWith(
fontFeatures: const [FontFeature.tabularFigures()],
),
),
subtitle: Text(
deviceShort == null
? time
: '$time · $deviceShort${ownDevice ? '（${l10n.thisDevice}）' : ''}',
),
trailing: Wrap(
spacing: 6,
runSpacing: 4,
crossAxisAlignment: WrapCrossAlignment.center,
final deviceLabel = ownDevice ? l10n.thisDevice : l10n.serverDeviceUnknown;
return Padding(
padding: const EdgeInsets.fromLTRB(kSpace16, kSpace8, kSpace12, kSpace8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.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),
// 契约无图片 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,
),
),
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),
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),
),
],
),
],
),
@@ -282,7 +463,7 @@ class _ServerHistoryPageState extends ConsumerState<ServerHistoryPage> {
case UploadSessionState.pending:
return l10n.uploadStatePending;
case UploadSessionState.confirmed:
return l10n.uploadStateConfirmed;
return l10n.serverConfirmed;
case UploadSessionState.cancelled:
return l10n.uploadStateCancelled;
case UploadSessionState.expired:
@@ -300,11 +481,93 @@ class _ServerHistoryPageState extends ConsumerState<ServerHistoryPage> {
case PhotoProcessingState.uploaded:
return l10n.procUploaded;
case PhotoProcessingState.processing:
return l10n.procProcessing;
return l10n.serverProcessing;
case PhotoProcessingState.ready:
return l10n.procReady;
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),
),
],
),
);
}
}