refactor(home): 优化运行状态监控界面布局和参数显示
- 将程序名文本包装在Flexible组件中并添加省略号处理 - 为步骤信息添加Flexible组件以改善布局 - 使用ScrollableVIew包装内容以支持滚动 - 重构步骤参数显示为三列布局 - 移除硬编码的温度和磁力时间参数 - 更新速度、持续时间和样品体积的单位显示 - 从状态栏移除设备名称显示 - 从设置菜单移除USB导入功能选项
This commit is contained in:
Developer
@@ -25,73 +25,81 @@ class RunStatusMonitor extends ConsumerWidget {
|
|||||||
borderRadius: BorderRadius.circular(8),
|
borderRadius: BorderRadius.circular(8),
|
||||||
border: Border.all(color: AppTheme.borderSubtle, width: 1),
|
border: Border.all(color: AppTheme.borderSubtle, width: 1),
|
||||||
),
|
),
|
||||||
child: Column(
|
child: SingleChildScrollView(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
child: Column(
|
||||||
children: [
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
// 标题 + 程序名
|
children: [
|
||||||
Row(
|
// 标题 + 程序名
|
||||||
children: [
|
Row(
|
||||||
Text(
|
children: [
|
||||||
l10n?.runningMonitor ?? '运行状态监控',
|
Text(
|
||||||
style: const TextStyle(
|
l10n?.runningMonitor ?? '运行状态监控',
|
||||||
color: AppTheme.textHeading,
|
style: const TextStyle(
|
||||||
fontSize: 15,
|
color: AppTheme.textHeading,
|
||||||
fontWeight: FontWeight.w600,
|
fontSize: 15,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
const Spacer(),
|
||||||
const Spacer(),
|
Flexible(
|
||||||
Text(
|
child: Text(
|
||||||
runState.currentProgram?.name ?? '',
|
runState.currentProgram?.name ?? '',
|
||||||
style: const TextStyle(
|
maxLines: 1,
|
||||||
color: AppTheme.accentPrimary,
|
overflow: TextOverflow.ellipsis,
|
||||||
fontSize: 18,
|
style: const TextStyle(
|
||||||
fontWeight: FontWeight.w700,
|
color: AppTheme.accentPrimary,
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: FontWeight.w700,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
],
|
||||||
],
|
),
|
||||||
),
|
|
||||||
|
|
||||||
const SizedBox(height: 14),
|
const SizedBox(height: 14),
|
||||||
|
|
||||||
// 进度信息横排 (孔位 / 步骤 / 剩余时间)
|
// 进度信息横排 (孔位 / 步骤 / 剩余时间)
|
||||||
Row(
|
Row(
|
||||||
children: [
|
children: [
|
||||||
// 当前孔位
|
// 当前孔位
|
||||||
_buildInfoBlock(
|
_buildInfoBlock(
|
||||||
label: l10n?.currentHole ?? '当前孔位',
|
label: l10n?.currentHole ?? '当前孔位',
|
||||||
value: runState.currentWell ?? '--',
|
value: runState.currentWell ?? '--',
|
||||||
valueColor: AppTheme.textHeading,
|
valueColor: AppTheme.textHeading,
|
||||||
),
|
),
|
||||||
const SizedBox(width: 20),
|
const SizedBox(width: 20),
|
||||||
// 当前步骤
|
// 当前步骤
|
||||||
_buildInfoBlock(
|
Flexible(
|
||||||
label: l10n?.currentStep ?? '当前步骤',
|
child: _buildInfoBlock(
|
||||||
value: '${l10n?.stepNo ?? '步骤'} ${runState.currentStepIndex + 1}',
|
label: l10n?.currentStep ?? '当前步骤',
|
||||||
subValue: runState.currentStep?.name ?? '--',
|
value: '${l10n?.stepNo ?? '步骤'} ${runState.currentStepIndex + 1}',
|
||||||
valueColor: AppTheme.accentInfo,
|
subValue: runState.currentStep?.name ?? '--',
|
||||||
),
|
valueColor: AppTheme.accentInfo,
|
||||||
const SizedBox(width: 20),
|
),
|
||||||
// 剩余时间
|
),
|
||||||
_buildInfoBlock(
|
const SizedBox(width: 20),
|
||||||
label: l10n?.remainingTime ?? '剩余时间',
|
// 剩余时间
|
||||||
value: runState.formattedRemainingTime,
|
_buildInfoBlock(
|
||||||
valueColor: AppTheme.textHeading,
|
label: l10n?.remainingTime ?? '剩余时间',
|
||||||
valueSize: 20,
|
value: runState.formattedRemainingTime,
|
||||||
),
|
valueColor: AppTheme.textHeading,
|
||||||
],
|
valueSize: 20,
|
||||||
),
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
|
||||||
const SizedBox(height: 14),
|
const SizedBox(height: 14),
|
||||||
|
|
||||||
// 总进度条
|
// 总进度条
|
||||||
_buildProgressBar(l10n, runState),
|
_buildProgressBar(l10n, runState),
|
||||||
|
|
||||||
const SizedBox(height: 14),
|
const SizedBox(height: 14),
|
||||||
|
|
||||||
// 步骤参数
|
// 步骤参数
|
||||||
if (runState.currentStep != null)
|
if (runState.currentStep != null)
|
||||||
_buildStepParams(l10n, runState.currentStep!),
|
_buildStepParams(l10n, runState.currentStep!),
|
||||||
],
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -190,53 +198,26 @@ class RunStatusMonitor extends ConsumerWidget {
|
|||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(height: 2),
|
const SizedBox(height: 8),
|
||||||
if (step.mixTime > 0)
|
Row(
|
||||||
_buildParamRow(
|
children: [
|
||||||
l10n?.speed ?? '转速',
|
_buildInfoBlock(
|
||||||
'${step.speed} 档',
|
label: l10n?.speed ?? '速度',
|
||||||
),
|
value: '${step.speed} ${l10n?.speedLevel ?? '档'}',
|
||||||
if (step.magnetTime > 0)
|
),
|
||||||
_buildParamRow(
|
const SizedBox(width: 20),
|
||||||
l10n?.temperature ?? '温度',
|
_buildInfoBlock(
|
||||||
'65.0 °C',
|
label: l10n?.duration ?? '持续时间',
|
||||||
),
|
value: '${step.mixTime} s',
|
||||||
_buildParamRow(
|
),
|
||||||
l10n?.duration ?? '持续时间',
|
const SizedBox(width: 20),
|
||||||
step.mixTime > 0 ? '${step.mixTime} min' : '--',
|
_buildInfoBlock(
|
||||||
),
|
label: l10n?.sampleVolume ?? '样品体积',
|
||||||
_buildParamRow(
|
value: '${step.volume} μL',
|
||||||
l10n?.sampleVolume ?? '样品体积',
|
),
|
||||||
'10.0 mL',
|
],
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 参数行
|
|
||||||
Widget _buildParamRow(String label, String value) {
|
|
||||||
return Padding(
|
|
||||||
padding: const EdgeInsets.symmetric(vertical: 2),
|
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
label,
|
|
||||||
style: const TextStyle(
|
|
||||||
color: AppTheme.textTertiary,
|
|
||||||
fontSize: 11,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const Spacer(),
|
|
||||||
Text(
|
|
||||||
value,
|
|
||||||
style: const TextStyle(
|
|
||||||
color: AppTheme.textPrimary,
|
|
||||||
fontSize: 11,
|
|
||||||
fontFamily: 'monospace',
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -95,21 +95,7 @@ class _StatusBarState extends ConsumerState<StatusBar> {
|
|||||||
),
|
),
|
||||||
child: Row(
|
child: Row(
|
||||||
children: [
|
children: [
|
||||||
Row(
|
const Icon(Icons.precision_manufacturing, color: Colors.white, size: 22),
|
||||||
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) ...[
|
if (widget.tabs.isNotEmpty) ...[
|
||||||
const SizedBox(width: 32),
|
const SizedBox(width: 32),
|
||||||
_buildNavTabs(),
|
_buildNavTabs(),
|
||||||
|
|||||||
@@ -5,10 +5,9 @@ import '../../../core/theme/app_theme.dart';
|
|||||||
import '../../../shared/widgets/common_button.dart';
|
import '../../../shared/widgets/common_button.dart';
|
||||||
import '../widgets/language_panel.dart';
|
import '../widgets/language_panel.dart';
|
||||||
import '../widgets/password_panel.dart';
|
import '../widgets/password_panel.dart';
|
||||||
import '../widgets/usb_import_panel.dart';
|
|
||||||
|
|
||||||
/// 设置页菜单
|
/// 设置页菜单
|
||||||
enum _SettingsMenu { upgrade, language, password, usbImport }
|
enum _SettingsMenu { upgrade, language, password }
|
||||||
|
|
||||||
/// 系统设置页面
|
/// 系统设置页面
|
||||||
class SettingsPage extends ConsumerStatefulWidget {
|
class SettingsPage extends ConsumerStatefulWidget {
|
||||||
@@ -85,14 +84,6 @@ class _SettingsPageState extends ConsumerState<SettingsPage> {
|
|||||||
onTap: () => setState(
|
onTap: () => setState(
|
||||||
() => _currentMenu = _SettingsMenu.password),
|
() => _currentMenu = _SettingsMenu.password),
|
||||||
),
|
),
|
||||||
// U盘导入
|
|
||||||
_buildMenuItem(
|
|
||||||
icon: Icons.usb,
|
|
||||||
title: l10n?.usbImport ?? 'U盘导入',
|
|
||||||
selected: _currentMenu == _SettingsMenu.usbImport,
|
|
||||||
onTap: () => setState(
|
|
||||||
() => _currentMenu = _SettingsMenu.usbImport),
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -120,7 +111,6 @@ class _SettingsPageState extends ConsumerState<SettingsPage> {
|
|||||||
return switch (_currentMenu) {
|
return switch (_currentMenu) {
|
||||||
_SettingsMenu.language => const LanguagePanel(),
|
_SettingsMenu.language => const LanguagePanel(),
|
||||||
_SettingsMenu.password => const PasswordPanel(),
|
_SettingsMenu.password => const PasswordPanel(),
|
||||||
_SettingsMenu.usbImport => const UsbImportPanel(),
|
|
||||||
_SettingsMenu.upgrade => _buildUpgradeContent(),
|
_SettingsMenu.upgrade => _buildUpgradeContent(),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user