refactor(home): 优化主页布局和运行控制面板
- 将主页左右布局改为弹性布局,左侧程序列表占2/5宽度,右侧控制区域占3/5宽度 - 移除程序列表组件的固定宽度设置,使其能够自适应布局 - 在运行控制面板中添加主轴最小尺寸限制以优化空间使用 - 移除暂停/继续按钮中的占位按钮,简化按钮逻辑 - 修改开始/继续按钮为暂停/继续按钮,支持运行中状态切换 - 更新按钮图标和文字根据当前运行状态动态显示 - 移除运行状态指示器,精简界面元素
This commit is contained in:
@@ -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()),
|
||||||
|
|||||||
@@ -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),
|
||||||
|
|||||||
@@ -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,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user