37d2af70b7
- 新增 AutoSerialConnect 服务：启动后自动连接第一个 USB 串口设备， 固定 115200/8/N/1，连接失败时每 3s 重试，断开后重新进入重试循环 - main.dart 通过 ProviderContainer 在 runApp 之前触发 autoSerialConnectProvider - 移除设置页「串口配置」菜单项及对应面板分支 - StatusBar 在「设备运行状态」前增加串口连接状态指示（已连接/连接中/未连接）
316 lines
9.0 KiB
Dart
316 lines
9.0 KiB
Dart
import 'dart:async';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import '../../../core/localization/app_localizations.dart';
|
|
import '../../../core/theme/app_theme.dart';
|
|
import '../../../shared/widgets/status_indicator.dart';
|
|
import '../../device/providers/device_info_provider.dart';
|
|
import '../../device/providers/serial_provider.dart';
|
|
import '../../device/services/serial_port_service.dart';
|
|
|
|
/// 状态栏标签项数据
|
|
class StatusBarTab {
|
|
final IconData icon;
|
|
final String label;
|
|
const StatusBarTab({required this.icon, required this.label});
|
|
}
|
|
|
|
/// 状态栏组件 - 明亮工业风格
|
|
/// 显示: 设备名称 | 导航标签 | 灯按钮 | 状态指示器 | 实时时钟
|
|
///
|
|
/// [tabs] 不为空时,会在设备名右侧渲染胶囊样式的导航标签按钮组,
|
|
/// 由父组件通过 [currentTabIndex] 和 [onTabChanged] 控制切换。
|
|
class StatusBar extends ConsumerStatefulWidget {
|
|
final bool isRunning;
|
|
final VoidCallback? onLightToggle;
|
|
final List<StatusBarTab> tabs;
|
|
final int currentTabIndex;
|
|
final ValueChanged<int>? onTabChanged;
|
|
|
|
const StatusBar({
|
|
super.key,
|
|
this.isRunning = false,
|
|
this.onLightToggle,
|
|
this.tabs = const [],
|
|
this.currentTabIndex = 0,
|
|
this.onTabChanged,
|
|
});
|
|
|
|
@override
|
|
ConsumerState<StatusBar> createState() => _StatusBarState();
|
|
}
|
|
|
|
class _StatusBarState extends ConsumerState<StatusBar> {
|
|
String _currentTime = '';
|
|
Timer? _timer;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_updateTime();
|
|
_timer = Timer.periodic(const Duration(seconds: 1), (_) => _updateTime());
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_timer?.cancel();
|
|
super.dispose();
|
|
}
|
|
|
|
/// 更新当前时间显示
|
|
void _updateTime() {
|
|
final now = DateTime.now();
|
|
_currentTime =
|
|
'${now.year}-${_twoDigits(now.month)}-${_twoDigits(now.day)} '
|
|
'${_twoDigits(now.hour)}:${_twoDigits(now.minute)}:${_twoDigits(now.second)}';
|
|
if (mounted) setState(() {});
|
|
}
|
|
|
|
String _twoDigits(int n) => n.toString().padLeft(2, '0');
|
|
|
|
/// 切换照明开关
|
|
Future<void> _onLightTap() async {
|
|
widget.onLightToggle?.call();
|
|
await ref.read(deviceInfoProvider.notifier).toggleLight();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final l10n = AppLocalizations.of(context);
|
|
final deviceInfo = ref.watch(deviceInfoProvider);
|
|
final serialState = ref.watch(serialPortServiceProvider).state;
|
|
|
|
return Container(
|
|
height: 56,
|
|
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.primaryColor,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withValues(alpha: 0.08),
|
|
blurRadius: 4,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
const Icon(Icons.precision_manufacturing, color: Colors.white, size: 22),
|
|
const SizedBox(width: 10),
|
|
Text(
|
|
l10n?.deviceName ?? '污水毒品前处理一体机',
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 17,
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
if (widget.tabs.isNotEmpty) ...[
|
|
const SizedBox(width: 32),
|
|
_buildNavTabs(),
|
|
],
|
|
const Spacer(),
|
|
_LightToggleButton(
|
|
isOn: deviceInfo.lightingOn,
|
|
onTap: _onLightTap,
|
|
),
|
|
const SizedBox(width: 20),
|
|
_SerialConnectionIndicator(state: serialState),
|
|
const SizedBox(width: 20),
|
|
StatusIndicator(
|
|
text: widget.isRunning
|
|
? (l10n?.running ?? '运行中')
|
|
: (l10n?.idle ?? '未运行'),
|
|
status: widget.isRunning
|
|
? DeviceStatusType.running
|
|
: DeviceStatusType.idle,
|
|
),
|
|
const SizedBox(width: 20),
|
|
Text(
|
|
_currentTime,
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 13,
|
|
fontFamily: 'monospace',
|
|
fontWeight: FontWeight.normal,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 构建标题栏内嵌的导航标签按钮组(胶囊样式)
|
|
Widget _buildNavTabs() {
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: List.generate(widget.tabs.length, (index) {
|
|
final tab = widget.tabs[index];
|
|
return Padding(
|
|
padding: EdgeInsets.only(right: index == widget.tabs.length - 1 ? 0 : 6),
|
|
child: _NavTabButton(
|
|
icon: tab.icon,
|
|
label: tab.label,
|
|
selected: index == widget.currentTabIndex,
|
|
onTap: () => widget.onTabChanged?.call(index),
|
|
),
|
|
);
|
|
}),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 标题栏内嵌的导航标签按钮(胶囊样式)
|
|
/// 选中时使用半透明白色背景突出,未选中时仅显示文字
|
|
class _NavTabButton extends StatelessWidget {
|
|
final IconData icon;
|
|
final String label;
|
|
final bool selected;
|
|
final VoidCallback? onTap;
|
|
|
|
const _NavTabButton({
|
|
required this.icon,
|
|
required this.label,
|
|
required this.selected,
|
|
this.onTap,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Material(
|
|
color: Colors.transparent,
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
borderRadius: BorderRadius.circular(18),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 180),
|
|
height: 36,
|
|
padding: const EdgeInsets.symmetric(horizontal: 14),
|
|
decoration: BoxDecoration(
|
|
color: selected
|
|
? Colors.white.withValues(alpha: 0.22)
|
|
: Colors.transparent,
|
|
borderRadius: BorderRadius.circular(18),
|
|
border: Border.all(
|
|
color: selected
|
|
? Colors.white.withValues(alpha: 0.35)
|
|
: Colors.transparent,
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
icon,
|
|
size: 16,
|
|
color: selected
|
|
? Colors.white
|
|
: Colors.white.withValues(alpha: 0.78),
|
|
),
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
label,
|
|
style: TextStyle(
|
|
color: selected
|
|
? Colors.white
|
|
: Colors.white.withValues(alpha: 0.85),
|
|
fontSize: 14,
|
|
fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _LightToggleButton extends StatelessWidget {
|
|
final bool isOn;
|
|
final VoidCallback? onTap;
|
|
const _LightToggleButton({this.isOn = false, this.onTap});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Material(
|
|
color: Colors.transparent,
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
borderRadius: BorderRadius.circular(20),
|
|
child: Container(
|
|
width: 40,
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
color: isOn
|
|
? Colors.white.withValues(alpha: 0.25)
|
|
: Colors.white.withValues(alpha: 0.1),
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(
|
|
color: Colors.white.withValues(alpha: 0.3),
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Icon(
|
|
isOn ? Icons.lightbulb : Icons.lightbulb_outline_rounded,
|
|
color: isOn ? Colors.yellowAccent : Colors.white.withValues(alpha: 0.8),
|
|
size: 20,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 串口连接状态指示器
|
|
///
|
|
/// 位于「设备运行状态」之前，反映当前 USB 串口的连接情况。
|
|
class _SerialConnectionIndicator extends StatelessWidget {
|
|
final SerialConnectionState state;
|
|
const _SerialConnectionIndicator({required this.state});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final connected = state == SerialConnectionState.connected;
|
|
final connecting = state == SerialConnectionState.connecting;
|
|
final text = connected
|
|
? '已连接'
|
|
: connecting
|
|
? '连接中'
|
|
: '未连接';
|
|
final color = connected
|
|
? AppTheme.statusRunning
|
|
: connecting
|
|
? AppTheme.statusPaused
|
|
: AppTheme.statusStopped;
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
width: 10,
|
|
height: 10,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: color,
|
|
),
|
|
),
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
text,
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 13,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|