fix(automation): 修回被我上一处改动挤坏的布局(5 张卡横排、无间距)
## 是我引入的回归
上一轮为了修「保存时存错作业」,我把各卡自己的 `<Form layout="inline">`
提到了外层统一包一层。但 `layout="inline"` **会把直接子元素排成一行** ——
于是 5 张 Card 横着挤在一起,还把原有的间距吃掉了(用户截图:一点间隔都没有)。
**同一个改动同时修了一个 bug、引入了一个 UI 回归** —— 说明我当时只验证了
"能存对作业",没看渲染结果。
## 修法
- 外层 Form 里加 **`<Space direction="vertical" size={16}>`** 纵向容器,
Card 恢复竖排、16px 间距
- 每张 Card `width: 100%`(不再由内容决定宽度)
- 字段行用 `<Space wrap size={16}>` 显式撑开,按钮组单独一段 `marginLeft: 16`
保留上一轮的关键修复:**仍然只有一层 Form**(`Form.Item` 靠 `[job.key, 字段]`
区分),保存按钮仍是显式 `onClick={() => saveJob(job)}` —— 不再依赖
"哪个 Form 的 onFinish 生效"。
并用注释把两个坑都写清了(各自包 Form 会存错作业;直接放 inline 子元素会挤成一行),
避免下次再踩。
## 验证
前端 build 通过。
This commit is contained in:
@@ -274,6 +274,9 @@ export default function AutomationPage() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<Form form={forms} layout="inline">
|
<Form form={forms} layout="inline">
|
||||||
|
{/* ⚠️ 必须有个纵向容器:`layout="inline"` 会把直接子元素排成一行,
|
||||||
|
5 张 Card 会横着挤在一起且丢掉间距(真踩过)。 */}
|
||||||
|
<Space direction="vertical" size={16} style={{ width: '100%' }}>
|
||||||
{jobs.map((job) => (
|
{jobs.map((job) => (
|
||||||
<Card
|
<Card
|
||||||
key={job.key}
|
key={job.key}
|
||||||
@@ -291,7 +294,7 @@ export default function AutomationPage() {
|
|||||||
</Typography.Text>
|
</Typography.Text>
|
||||||
) : null
|
) : null
|
||||||
}
|
}
|
||||||
style={{ marginBottom: 16 }}
|
style={{ width: '100%' }}
|
||||||
>
|
>
|
||||||
<Descriptions size="small" column={2} style={{ marginBottom: 16 }}>
|
<Descriptions size="small" column={2} style={{ marginBottom: 16 }}>
|
||||||
<Descriptions.Item label="最近运行">
|
<Descriptions.Item label="最近运行">
|
||||||
@@ -319,6 +322,8 @@ export default function AutomationPage() {
|
|||||||
点第一张卡的保存,跑的其实是**最后一张卡**的保存(真踩过:
|
点第一张卡的保存,跑的其实是**最后一张卡**的保存(真踩过:
|
||||||
存「账号资料定时补全」提示的是「积分到期补记」,即存错了作业)。
|
存「账号资料定时补全」提示的是「积分到期补记」,即存错了作业)。
|
||||||
Form 统一提到这一层外面,各卡只用 Form.Item 的 [job.key, 字段] 区分。 */}
|
Form 统一提到这一层外面,各卡只用 Form.Item 的 [job.key, 字段] 区分。 */}
|
||||||
|
{/* 字段行:显式 gap 撑开,别让输入框挤在一起 */}
|
||||||
|
<Space wrap size={16} align="end" style={{ rowGap: 8 }}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name={[job.key, "enabled"]}
|
name={[job.key, "enabled"]}
|
||||||
label="启用"
|
label="启用"
|
||||||
@@ -346,8 +351,8 @@ export default function AutomationPage() {
|
|||||||
<Form.Item name={[job.key, "concurrency"]} label="并发">
|
<Form.Item name={[job.key, "concurrency"]} label="并发">
|
||||||
<InputNumber min={1} max={16} disabled={!canManage} />
|
<InputNumber min={1} max={16} disabled={!canManage} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item>
|
</Space>
|
||||||
<Space>
|
<Space size={8} style={{ marginLeft: 16 }}>
|
||||||
<Button
|
<Button
|
||||||
type="primary"
|
type="primary"
|
||||||
disabled={!canManage}
|
disabled={!canManage}
|
||||||
@@ -370,8 +375,7 @@ export default function AutomationPage() {
|
|||||||
立即跑一次
|
立即跑一次
|
||||||
</Button>
|
</Button>
|
||||||
</Popconfirm>
|
</Popconfirm>
|
||||||
</Space>
|
</Space>
|
||||||
</Form.Item>
|
|
||||||
{!canManage && (
|
{!canManage && (
|
||||||
<Typography.Text type="secondary">
|
<Typography.Text type="secondary">
|
||||||
当前账号只能查看,修改配置需要 automation:manage 权限。
|
当前账号只能查看,修改配置需要 automation:manage 权限。
|
||||||
@@ -379,6 +383,7 @@ export default function AutomationPage() {
|
|||||||
)}
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
|
</Space>
|
||||||
</Form>
|
</Form>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user