refactor(home): 优化主页布局和运行控制面板

- 将主页左右布局改为弹性布局,左侧程序列表占2/5宽度,右侧控制区域占3/5宽度
- 移除程序列表组件的固定宽度设置,使其能够自适应布局
- 在运行控制面板中添加主轴最小尺寸限制以优化空间使用
- 移除暂停/继续按钮中的占位按钮,简化按钮逻辑
- 修改开始/继续按钮为暂停/继续按钮,支持运行中状态切换
- 更新按钮图标和文字根据当前运行状态动态显示
- 移除运行状态指示器,精简界面元素
This commit is contained in:
Developer
2026-06-04 17:22:38 +08:00
parent 37d2af70b7
commit 736c36a98e
3 changed files with 24 additions and 74 deletions

View File

@@ -93,20 +93,24 @@ class _HomePageState extends ConsumerState<HomePage>
padding: const EdgeInsets.all(20), padding: const EdgeInsets.all(20),
child: Row( child: Row(
children: [ children: [
// 左侧:程序列表(运行时锁定) // 左侧:程序列表(运行时锁定),占 2/5 宽度
Opacity( Expanded(
opacity: runState.status == RunStatus.idle ? 1.0 : 0.6, flex: 2,
child: IgnorePointer( child: Opacity(
ignoring: runState.status != RunStatus.idle, opacity: runState.status == RunStatus.idle ? 1.0 : 0.6,
child: const ProgramList(), child: IgnorePointer(
ignoring: runState.status != RunStatus.idle,
child: const ProgramList(),
),
), ),
), ),
const SizedBox(width: 20), const SizedBox(width: 20),
// 右侧:运行控制区域 // 右侧:运行控制区域,占 3/5 宽度
Expanded( Expanded(
flex: 3,
child: Column( child: Column(
children: [ children: [
const Expanded(child: RunningControlPanel()), const RunningControlPanel(),
if (runState.status != RunStatus.idle) ...[ if (runState.status != RunStatus.idle) ...[
const SizedBox(height: 16), const SizedBox(height: 16),
const Expanded(child: RunStatusMonitor()), const Expanded(child: RunStatusMonitor()),

View File

@@ -18,7 +18,6 @@ class ProgramList extends ConsumerWidget {
final programsNotifier = ref.read(programsProvider.notifier); final programsNotifier = ref.read(programsProvider.notifier);
return Container( return Container(
width: 380,
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppTheme.cardBg, color: AppTheme.cardBg,
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),

View File

@@ -42,6 +42,7 @@ class RunningControlPanel extends ConsumerWidget {
return Padding( return Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
// 当前选中程序显示 // 当前选中程序显示
@@ -117,20 +118,6 @@ class RunningControlPanel extends ConsumerWidget {
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 12),
// 暂停/继续按钮(待机态禁用)
Expanded(
child: SizedBox(
height: 48,
child: CommonButton(
text: l10n?.pause ?? '暂停',
icon: Icons.pause,
type: ButtonType.secondary,
enabled: false,
onPressed: null,
),
),
),
const SizedBox(width: 12),
// 停止按钮(待机态禁用) // 停止按钮(待机态禁用)
Expanded( Expanded(
child: SizedBox( child: SizedBox(
@@ -163,6 +150,7 @@ class RunningControlPanel extends ConsumerWidget {
return Padding( return Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
// 当前程序名称 // 当前程序名称
@@ -204,7 +192,7 @@ class RunningControlPanel extends ConsumerWidget {
// 控制按钮 // 控制按钮
Row( Row(
children: [ children: [
// 开始/继续按钮 // 暂停/继续按钮(运行中切换)
Expanded( Expanded(
flex: 2, flex: 2,
child: SizedBox( child: SizedBox(
@@ -212,27 +200,18 @@ class RunningControlPanel extends ConsumerWidget {
child: CommonButton( child: CommonButton(
text: runState.status == RunStatus.paused text: runState.status == RunStatus.paused
? (l10n?.continue_ ?? '继续') ? (l10n?.continue_ ?? '继续')
: (l10n?.run ?? '运行'), : (l10n?.pause ?? '暂停'),
icon: runState.status == RunStatus.paused icon: runState.status == RunStatus.paused
? Icons.play_arrow ? Icons.play_arrow
: Icons.play_arrow, : Icons.pause,
type: ButtonType.primary, type: ButtonType.primary,
onPressed: () => runNotifier.resume(), onPressed: () {
), if (runState.status == RunStatus.paused) {
), runNotifier.resume();
), } else {
const SizedBox(width: 12), runNotifier.pause();
// 暂停按钮 }
Expanded( },
child: SizedBox(
height: 48,
child: CommonButton(
text: l10n?.pause ?? '暂停',
icon: Icons.pause,
type: ButtonType.warning,
onPressed: runState.status == RunStatus.paused
? null
: () => runNotifier.pause(),
), ),
), ),
), ),
@@ -251,38 +230,6 @@ class RunningControlPanel extends ConsumerWidget {
), ),
], ],
), ),
const SizedBox(height: 12),
// 状态指示
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 8,
height: 8,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: runState.status == RunStatus.paused
? AppTheme.accentWarning
: AppTheme.statusRunning,
),
),
const SizedBox(width: 8),
Text(
runState.status == RunStatus.paused
? (l10n?.paused ?? '已暂停')
: (l10n?.running ?? '运行中'),
style: TextStyle(
color: runState.status == RunStatus.paused
? AppTheme.accentWarning
: AppTheme.statusRunning,
fontWeight: FontWeight.w500,
fontSize: 12,
),
),
],
),
], ],
), ),
); );