huangsheng/kuaishai2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 将主页左右布局改为弹性布局，左侧程序列表占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
Download Patch File Download Diff File Expand all files Collapse all files

20
lib/features/home/pages/home_page.dart
View File

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

1
lib/features/home/widgets/program_list.dart
View File

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

77
lib/features/home/widgets/running_control_panel.dart
View File

@@ -42,6 +42,7 @@ class RunningControlPanel extends ConsumerWidget {
return Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 当前选中程序显示
@@ -117,20 +118,6 @@ class RunningControlPanel extends ConsumerWidget {
),
),
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(
child: SizedBox(
@@ -163,6 +150,7 @@ class RunningControlPanel extends ConsumerWidget {
return Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 当前程序名称
@@ -204,7 +192,7 @@ class RunningControlPanel extends ConsumerWidget {
// 控制按钮
Row(
children: [
// 开始/继续按钮
// 暂停/继续按钮（运行中切换）
Expanded(
flex: 2,
child: SizedBox(
@@ -212,27 +200,18 @@ class RunningControlPanel extends ConsumerWidget {
child: CommonButton(
text: runState.status == RunStatus.paused
? (l10n?.continue_ ?? '继续')
: (l10n?.run ?? '运行'),
: (l10n?.pause ?? '暂停'),
icon: runState.status == RunStatus.paused
? Icons.play_arrow
: Icons.play_arrow,
: Icons.pause,
type: ButtonType.primary,
onPressed: () => runNotifier.resume(),
),
),
),
const SizedBox(width: 12),
// 暂停按钮
Expanded(
child: SizedBox(
height: 48,
child: CommonButton(
text: l10n?.pause ?? '暂停',
icon: Icons.pause,
type: ButtonType.warning,
onPressed: runState.status == RunStatus.paused
? null
: () => runNotifier.pause(),
onPressed: () {
if (runState.status == RunStatus.paused) {
runNotifier.resume();
} else {
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,
),
),
],
),
],
),
);