From 8c2e26ec8741b6ba869d426c1c31605bfc6eca3a Mon Sep 17 00:00:00 2001 From: Developer <91611@user.local> Date: Fri, 5 Jun 2026 10:03:41 +0800 Subject: [PATCH] =?UTF-8?q?feat(home):=20=E6=9B=B4=E6=96=B0=E5=AE=8C?= =?UTF-8?q?=E6=88=90=E9=A1=B5=E9=9D=A2UI=E5=B9=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E4=B8=B2=E5=8F=A3=E8=BF=9E=E6=8E=A5=E7=8A=B6=E6=80=81=E7=AE=A1?= =?UTF-8?q?=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 更新设备屏幕尺寸配置从1920*1080调整为1024x600 - 添加完成页面的AppBar导航和返回功能 - 重构CompletePage布局，使用SafeArea和ConstrainedBox适配不同屏幕 - 添加国际化支持的完成按钮文本 - 优化完成页面视觉元素，包括图标大小和间距调整 - 实现串口连接状态的响应式管理，解决UI状态同步问题 - 优化串口运行器的状态更新逻辑，实现乐观更新机制 - 调整完成页面按钮布局，提供完成和重新运行选项 --- AGENTS.md | 2 +- lib/core/localization/app_localizations.dart | 3 + .../device/providers/serial_provider.dart | 30 ++ .../device/services/serial_runner.dart | 9 +- lib/features/home/pages/complete_page.dart | 258 ++++++++++-------- lib/features/home/widgets/status_bar.dart | 2 +- 6 files changed, 187 insertions(+), 117 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 8dc1c64..6a2232a 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -163,4 +163,4 @@ AppLocalizations 支持中文(zh)和英文(en)，使用 `AppLocalizations.of(con ## 其他说明 1. 需求文档：[已确认-污水毒品快检一体机_功能需求文档.md](docs/%E5%B7%B2%E7%A1%AE%E8%AE%A4-%E6%B1%A1%E6%B0%B4%E6%AF%92%E5%93%81%E5%BF%AB%E6%A3%80%E4%B8%80%E4%BD%93%E6%9C%BA_%E5%8A%9F%E8%83%BD%E9%9C%80%E6%B1%82%E6%96%87%E6%A1%A3.md) -2. 运行设备屏幕尺寸为1920*1080(横屏),UI设计必须支持此尺寸 \ No newline at end of file +2. 运行设备屏幕尺寸为1024x600(横屏),屏幕密度为200，UI设计必须支持此尺寸 \ No newline at end of file diff --git a/lib/core/localization/app_localizations.dart b/lib/core/localization/app_localizations.dart index 7b0c545..f4c2267 100644 --- a/lib/core/localization/app_localizations.dart +++ b/lib/core/localization/app_localizations.dart @@ -93,6 +93,7 @@ class AppLocalizations { // 完成提示 String get runComplete => _localizedValues[locale.languageCode]?['runComplete'] ?? '运行完成'; String get sampleDropGuide => _localizedValues[locale.languageCode]?['sampleDropGuide'] ?? '请将样本滴入检测卡'; + String get complete => _localizedValues[locale.languageCode]?['complete'] ?? '完成'; // 补充缺失的翻译 String get lightOn => _localizedValues[locale.languageCode]?['lightOn'] ?? '亮'; @@ -198,6 +199,7 @@ class AppLocalizations { 'noData': '暂无数据', 'runComplete': '运行完成', 'sampleDropGuide': '请将样本滴入检测卡', + 'complete': '完成', 'lightOn': '亮', 'lightOff': '暗', 'enabled': '启用', @@ -300,6 +302,7 @@ class AppLocalizations { 'noData': 'No Data', 'runComplete': 'Complete', 'sampleDropGuide': 'Drop sample to test card', + 'complete': 'Done', 'lightOn': 'On', 'lightOff': 'Off', 'enabled': 'Enabled', diff --git a/lib/features/device/providers/serial_provider.dart b/lib/features/device/providers/serial_provider.dart index 384dc68..b940df2 100644 --- a/lib/features/device/providers/serial_provider.dart +++ b/lib/features/device/providers/serial_provider.dart @@ -1,3 +1,5 @@ +import 'dart:async'; + import 'package:flutter_riverpod/flutter_riverpod.dart'; import '../../../core/database/database_service.dart'; @@ -16,6 +18,34 @@ final serialPortServiceProvider = Provider((ref) { return service; }); +/// 串口连接状态（响应式） +/// +/// 直接 `ref.watch(serialPortServiceProvider).state` 不会触发 UI 重建， +/// 因为 [SerialPortService] 内部 `_state` 的变化不会冒泡到 Provider 层。 +/// 这里把状态抽出为独立的 StateNotifierProvider，让状态栏等 UI 能即时 +/// 反映连接/断开事件，避免出现"标题栏显示已连接、实际下发失败"的错觉。 +class SerialConnectionStateNotifier + extends StateNotifier { + SerialConnectionStateNotifier(this._service) : super(_service.state) { + _sub = _service.connectionStateChanges.listen((s) => state = s); + } + + final SerialPortService _service; + late final StreamSubscription _sub; + + @override + void dispose() { + _sub.cancel(); + super.dispose(); + } +} + +final serialConnectionStateProvider = StateNotifierProvider< + SerialConnectionStateNotifier, SerialConnectionState>((ref) { + final service = ref.watch(serialPortServiceProvider); + return SerialConnectionStateNotifier(service); +}); + /// 启动自动连接服务 /// /// 通过 [main] 中的 ProviderContainer 在 runApp 之前触发一次， diff --git a/lib/features/device/services/serial_runner.dart b/lib/features/device/services/serial_runner.dart index 9687c8f..4fae767 100644 --- a/lib/features/device/services/serial_runner.dart +++ b/lib/features/device/services/serial_runner.dart @@ -66,6 +66,9 @@ class JsonSerialRunner implements Runner { final messageId = _msg.nextId(); _pendingCreateTaskId = messageId; final msg = payload.toMessage(messageId, needAck: true); + // 乐观更新：与 RunStateNotifier 的运行态保持一致， + // 避免在 create_task 应答到达前的窗口里，pause/stop 被状态守卫静默丢弃。 + status = RunnerStatus.running; DeviceLog.info('Runner.start: program="${program.name}" steps=${steps.length} ' 'temperature=${program.temperature} airflow=${program.airflowTime}'); _msg.send(msg).then((ok) { @@ -132,9 +135,9 @@ class JsonSerialRunner implements Runner { if (ack.ack != _pendingCreateTaskId) return; _pendingCreateTaskId = null; DeviceLog.info('Runner received create_task ack: id=${ack.messageId}'); - // ack 即视为下位机已接受任务，进入 running 状态 - if (status == RunnerStatus.idle || status == RunnerStatus.error) { - status = RunnerStatus.running; + // 状态已由 start() 乐观置为 running，此处仅启动本地兜底倒计时。 + // 若发送失败，.then() 已将 status 置为 error，不应再启动倒计时。 + if (status == RunnerStatus.running) { _startLocalTicker(); } } diff --git a/lib/features/home/pages/complete_page.dart b/lib/features/home/pages/complete_page.dart index 145f31c..09e0482 100644 --- a/lib/features/home/pages/complete_page.dart +++ b/lib/features/home/pages/complete_page.dart @@ -7,6 +7,12 @@ import '../../../shared/widgets/common_button.dart'; import '../../device/providers/run_state_provider.dart'; /// 运行完成提示页面 +/// +/// 页面提供两种返回设备控制页的方式： +/// 1. 顶部 AppBar 的返回箭头 +/// 2. 卡片底部的「完成」主按钮 +/// +/// 内部使用 [SingleChildScrollView] 包裹，避免在父级高度受限时按钮被裁切。 class CompletePage extends ConsumerWidget { const CompletePage({super.key}); @@ -16,115 +22,143 @@ class CompletePage extends ConsumerWidget { final runState = ref.watch(runStateProvider); final runNotifier = ref.read(runStateProvider.notifier); + /// 完成并返回设备控制页 + void finishAndGoHome() { + runNotifier.reset(); + context.go('/'); + } + return Scaffold( - body: Container( - color: AppTheme.backgroundColor, + backgroundColor: AppTheme.backgroundColor, + appBar: AppBar( + backgroundColor: AppTheme.backgroundColor, + elevation: 0, + leading: IconButton( + icon: const Icon(Icons.arrow_back), + color: AppTheme.textPrimary, + tooltip: l10n?.complete ?? '完成', + onPressed: finishAndGoHome, + ), + title: Text( + l10n?.runComplete ?? '运行完成', + style: TextStyle( + color: AppTheme.textPrimary, + fontSize: 18, + fontWeight: FontWeight.w600, + ), + ), + ), + body: SafeArea( child: Center( - child: Container( - width: 600, - padding: const EdgeInsets.all(40), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(16), - boxShadow: [ - BoxShadow( - color: Colors.black.withValues(alpha: 0.15), - blurRadius: 20, - offset: const Offset(0, 10), - ), - ], - ), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - // 成功图标 - Container( - width: 100, - height: 100, - decoration: BoxDecoration( - color: AppTheme.successColor.withValues(alpha: 0.1), - shape: BoxShape.circle, - ), - child: Icon( - Icons.check_circle, - size: 60, - color: AppTheme.successColor, - ), - ), - - const SizedBox(height: 24), - - // 标题 - Text( - l10n?.runComplete ?? '程序运行完成', - style: TextStyle( - color: AppTheme.textPrimary, - fontSize: 28, - fontWeight: FontWeight.bold, - ), - ), - - const SizedBox(height: 16), - - // 提示信息 - Container( - padding: const EdgeInsets.symmetric( - horizontal: 24, - vertical: 12, - ), - decoration: BoxDecoration( - color: AppTheme.warningColor.withValues(alpha: 0.1), - borderRadius: BorderRadius.circular(8), - ), - child: Text( - l10n?.sampleDropGuide ?? '请将样本滴入检测卡', - style: TextStyle( - color: AppTheme.warningColor, - fontSize: 16, - ), - ), - ), - - const SizedBox(height: 32), - - // 操作示意图 - _buildOperationGuide(), - - const SizedBox(height: 32), - - // 按钮区域 - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - // 返回首页按钮 - CommonButton( - text: l10n?.backToHome ?? '返回首页', - icon: Icons.home, - type: ButtonType.primary, - onPressed: () { - runNotifier.reset(); - context.go('/'); - }, - ), - const SizedBox(width: 24), - - // 重新运行按钮 - CommonButton( - text: l10n?.runAgain ?? '重新运行', - icon: Icons.refresh, - type: ButtonType.secondary, - onPressed: () { - final program = runState.currentProgram; - if (program != null) { - runNotifier.reset(); - runNotifier.start(program); - context.go('/'); - } - }, + child: ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 600), + child: SingleChildScrollView( + padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16), + child: Container( + padding: const EdgeInsets.all(32), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(16), + boxShadow: [ + BoxShadow( + color: Colors.black.withValues(alpha: 0.15), + blurRadius: 20, + offset: const Offset(0, 10), ), ], ), - ], + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + // 成功图标 + Container( + width: 80, + height: 80, + decoration: BoxDecoration( + color: AppTheme.successColor.withValues(alpha: 0.1), + shape: BoxShape.circle, + ), + child: Icon( + Icons.check_circle, + size: 48, + color: AppTheme.successColor, + ), + ), + + const SizedBox(height: 16), + + // 标题 + Text( + l10n?.runComplete ?? '程序运行完成', + style: TextStyle( + color: AppTheme.textPrimary, + fontSize: 24, + fontWeight: FontWeight.bold, + ), + ), + + const SizedBox(height: 12), + + // 提示信息 + Container( + padding: const EdgeInsets.symmetric( + horizontal: 20, + vertical: 10, + ), + decoration: BoxDecoration( + color: AppTheme.warningColor.withValues(alpha: 0.1), + borderRadius: BorderRadius.circular(8), + ), + child: Text( + l10n?.sampleDropGuide ?? '请将样本滴入检测卡', + style: TextStyle( + color: AppTheme.warningColor, + fontSize: 15, + ), + ), + ), + + const SizedBox(height: 20), + + // 操作示意图 + _buildOperationGuide(), + + const SizedBox(height: 24), + + // 按钮区域：完成（主按钮）+ 重新运行（次按钮） + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + // 完成按钮 - 主操作，返回设备控制页 + CommonButton( + text: l10n?.complete ?? '完成', + icon: Icons.check_circle, + type: ButtonType.primary, + onPressed: finishAndGoHome, + ), + const SizedBox(width: 16), + + // 重新运行按钮 + CommonButton( + text: l10n?.runAgain ?? '重新运行', + icon: Icons.refresh, + type: ButtonType.secondary, + onPressed: () { + final program = runState.currentProgram; + if (program != null) { + runNotifier.reset(); + runNotifier.start(program); + context.go('/'); + } else { + finishAndGoHome(); + } + }, + ), + ], + ), + ], + ), + ), ), ), ), @@ -135,7 +169,7 @@ class CompletePage extends ConsumerWidget { /// 操作指引示意图 Widget _buildOperationGuide() { return Container( - padding: const EdgeInsets.all(20), + padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: AppTheme.backgroundColor, borderRadius: BorderRadius.circular(8), @@ -151,7 +185,7 @@ class CompletePage extends ConsumerWidget { fontWeight: FontWeight.w500, ), ), - const SizedBox(height: 16), + const SizedBox(height: 12), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ @@ -171,15 +205,15 @@ class CompletePage extends ConsumerWidget { return Column( children: [ Container( - width: 50, - height: 50, + width: 44, + height: 44, decoration: BoxDecoration( color: AppTheme.primaryColor.withValues(alpha: 0.1), borderRadius: BorderRadius.circular(8), ), - child: Icon(icon, color: AppTheme.primaryColor, size: 24), + child: Icon(icon, color: AppTheme.primaryColor, size: 22), ), - const SizedBox(height: 8), + const SizedBox(height: 6), Text( '$number', style: TextStyle( @@ -188,7 +222,7 @@ class CompletePage extends ConsumerWidget { fontWeight: FontWeight.bold, ), ), - const SizedBox(height: 4), + const SizedBox(height: 2), Text( text, style: TextStyle( @@ -199,4 +233,4 @@ class CompletePage extends ConsumerWidget { ], ); } -} \ No newline at end of file +} diff --git a/lib/features/home/widgets/status_bar.dart b/lib/features/home/widgets/status_bar.dart index 6902576..f3ab31c 100644 --- a/lib/features/home/widgets/status_bar.dart +++ b/lib/features/home/widgets/status_bar.dart @@ -78,7 +78,7 @@ class _StatusBarState extends ConsumerState { Widget build(BuildContext context) { final l10n = AppLocalizations.of(context); final deviceInfo = ref.watch(deviceInfoProvider); - final serialState = ref.watch(serialPortServiceProvider).state; + final serialState = ref.watch(serialConnectionStateProvider); return Container( height: 56,