From e5f2d2d5d2b7b85d30c862acfec1d77eea643fa8 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sun, 4 Oct 2026 21:43:38 +0800
Subject: [PATCH] =?UTF-8?q?fix(automation):=20=E4=BF=AE=E5=9B=9E=E8=A2=AB?=
 =?UTF-8?q?=E6=88=91=E4=B8=8A=E4=B8=80=E5=A4=84=E6=94=B9=E5=8A=A8=E6=8C=A4?=
 =?UTF-8?q?=E5=9D=8F=E7=9A=84=E5=B8=83=E5=B1=80=EF=BC=885=20=E5=BC=A0?=
 =?UTF-8?q?=E5=8D=A1=E6=A8=AA=E6=8E=92=E3=80=81=E6=97=A0=E9=97=B4=E8=B7=9D?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 是我引入的回归

上一轮为了修「保存时存错作业」，我把各卡自己的 `<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 通过。
---
 web/frontend/src/pages/AutomationPage.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/frontend/src/pages/AutomationPage.tsx b/web/frontend/src/pages/AutomationPage.tsx
index 7efbe33..a20b17e 100644
--- a/web/frontend/src/pages/AutomationPage.tsx
+++ b/web/frontend/src/pages/AutomationPage.tsx
@@ -274,6 +274,9 @@ export default function AutomationPage() {
         />
 
         <Form form={forms} layout="inline">
+          {/* ⚠️ 必须有个纵向容器：`layout="inline"` 会把直接子元素排成一行，
+              5 张 Card 会横着挤在一起且丢掉间距（真踩过）。 */}
+          <Space direction="vertical" size={16} style={{ width: '100%' }}>
         {jobs.map((job) => (
           <Card
             key={job.key}
@@ -291,7 +294,7 @@ export default function AutomationPage() {
                 </Typography.Text>
               ) : null
             }
-            style={{ marginBottom: 16 }}
+            style={{ width: '100%' }}
           >
             <Descriptions size="small" column={2} style={{ marginBottom: 16 }}>
               <Descriptions.Item label="最近运行">
@@ -319,6 +322,8 @@ export default function AutomationPage() {
                 点第一张卡的保存，跑的其实是**最后一张卡**的保存（真踩过：
                 存「账号资料定时补全」提示的是「积分到期补记」，即存错了作业）。
                 Form 统一提到这一层外面，各卡只用 Form.Item 的 [job.key, 字段] 区分。 */}
+              {/* 字段行：显式 gap 撑开，别让输入框挤在一起 */}
+              <Space wrap size={16} align="end" style={{ rowGap: 8 }}>
               <Form.Item
                 name={[job.key, "enabled"]}
                 label="启用"
@@ -346,8 +351,8 @@ export default function AutomationPage() {
               <Form.Item name={[job.key, "concurrency"]} label="并发">
                 <InputNumber min={1} max={16} disabled={!canManage} />
               </Form.Item>
-              <Form.Item>
-                <Space>
+              </Space>
+              <Space size={8} style={{ marginLeft: 16 }}>
                   <Button
                     type="primary"
                     disabled={!canManage}
@@ -370,8 +375,7 @@ export default function AutomationPage() {
                       立即跑一次
                     </Button>
                   </Popconfirm>
-                </Space>
-              </Form.Item>
+              </Space>
             {!canManage && (
               <Typography.Text type="secondary">
                 当前账号只能查看，修改配置需要 automation:manage 权限。
@@ -379,6 +383,7 @@ export default function AutomationPage() {
             )}
           </Card>
         ))}
+          </Space>
         </Form>
       </Card>