From a30e99a160e6ff2d3eafe8b59db06626b00dcf0c Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Mon, 28 Sep 2026 07:32:20 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E5=88=9B=E5=BB=BA=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=20Space=20wrap=20=E6=94=B9=20Row/Col=20?=
 =?UTF-8?q?=E6=A0=85=E6=A0=BC=EF=BC=8C=E7=AA=84=E5=B1=8F=E6=8D=A2=E8=A1=8C?=
 =?UTF-8?q?=E7=A8=B3=E5=AE=9A=EF=BC=88=E8=B5=B0=E6=9F=A5=20P2-#11=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/browsers/new.tsx | 40 +++++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/browsers/new.tsx b/web/src/pages/browsers/new.tsx
index 4321f86..a32377c 100644
--- a/web/src/pages/browsers/new.tsx
+++ b/web/src/pages/browsers/new.tsx
@@ -2,7 +2,7 @@
 // 高级指纹参数用 antd Collapse 收纳；空值不提交，收敛到 seed 驱动。
 import { useEffect, useState } from 'react';
 import { history } from '@umijs/max';
-import { Alert, App, Button, Card, Checkbox, Collapse, Form, Input, InputNumber, Select, Space, Typography } from 'antd';
+import { Alert, App, Button, Card, Checkbox, Col, Collapse, Form, Input, InputNumber, Row, Select, Space, Typography } from 'antd';
 import { create, getList } from '@/services/api';
 import { conflictMessage } from '@/utils/helpers';
 
@@ -106,10 +106,13 @@ export default function Page() {
       </div>
       <Card variant="outlined">
         <Form form={form} layout="vertical" onFinish={submit}>
-          <Space size={16} wrap style={{ display: 'flex' }}>
+          <Row gutter={[16, 0]}>
+            <Col xs={24} md={12} xl={8}>
             <Form.Item name="name" label="环境名称" required rules={[{ required: true, message: '请输入环境名称' }]} extra="展示名称，支持中文，如：店铺一号">
               <Input maxLength={64} />
             </Form.Item>
+            </Col>
+            <Col xs={24} md={12} xl={8}>
             <Form.Item
               name="alias"
               label="别名"
@@ -122,9 +125,13 @@ export default function Page() {
             >
               <Input placeholder="如：shop-01" />
             </Form.Item>
+            </Col>
+            <Col xs={24} md={12} xl={8}>
             <Form.Item name="gateway" label="网关" required rules={[{ required: true, message: '请选择网关' }]} extra={gateways.length === 0 ? '请先在「网关管理」注册网关' : '环境由该 native gateway 管理'}>
               <Select style={{ width: 200 }} placeholder="选择网关" disabled={gateways.length === 0} options={gateways.map((item) => ({ value: item.name, label: item.name }))} />
             </Form.Item>
+            </Col>
+            <Col xs={24} md={12} xl={8}>
             <Form.Item
               name="seed"
               label="Fingerprint Seed"
@@ -137,9 +144,13 @@ export default function Page() {
             >
               <InputNumber min={1} max={2147483647} style={{ width: 180 }} />
             </Form.Item>
+            </Col>
+            <Col xs={24} md={12} xl={8}>
             <Form.Item name="account_id" label="社媒账号" required rules={[{ required: true, message: '请选择账号' }]} extra={pausedAccounts.length === 0 ? '请先准备已授权且暂停的账号' : '绑定后该账号固定使用此环境'}>
               <Select style={{ width: 240 }} placeholder="选择账号" disabled={pausedAccounts.length === 0} options={pausedAccounts.map((item) => ({ value: item.id, label: `${item.id} · ${item.platform}` }))} />
             </Form.Item>
+            </Col>
+            <Col xs={24} md={12} xl={8}>
             <Form.Item name="network_exit_id" label="网络出口" extra="留空时使用当前机器网络出口直连">
               <Select
                 style={{ width: 240 }}
@@ -148,7 +159,8 @@ export default function Page() {
                 options={healthyExits.map((item) => ({ value: item.id, label: `${item.id} · ${item.protocol}://${item.host}:${item.port}` }))}
               />
             </Form.Item>
-          </Space>
+            </Col>
+          </Row>
           <Collapse
             ghost
             items={[
@@ -156,35 +168,53 @@ export default function Page() {
                 key: 'advanced',
                 label: '高级指纹参数',
                 children: (
-                  <Space size={16} wrap style={{ display: 'flex' }}>
+                  <Row gutter={[16, 0]}>
+                    <Col xs={24} md={12} xl={8}>
                     <Form.Item name="platform" label="操作系统 platform">
                       <Select style={{ width: 140 }} allowClear placeholder="默认" options={platformOptions} />
                     </Form.Item>
+                    </Col>
+                    <Col xs={24} md={12} xl={8}>
                     <Form.Item name="platform_version" label="系统版本 platform-version" extra="如 11.0.0">
                       <Input style={{ width: 140 }} />
                     </Form.Item>
+                    </Col>
+                    <Col xs={24} md={12} xl={8}>
                     <Form.Item name="brand" label="浏览器品牌 brand">
                       <Select style={{ width: 140 }} allowClear placeholder="默认 Chromium" options={brandOptions} />
                     </Form.Item>
+                    </Col>
+                    <Col xs={24} md={12} xl={8}>
                     <Form.Item name="brand_version" label="品牌版本 brand-version" extra="如 132.0.6834.159">
                       <Input style={{ width: 160 }} />
                     </Form.Item>
+                    </Col>
+                    <Col xs={24} md={12} xl={8}>
                     <Form.Item name="hardware_concurrency" label="CPU 核心数 hardware-concurrency" extra="留空由种子生成">
                       <InputNumber min={1} max={128} style={{ width: 100 }} />
                     </Form.Item>
+                    </Col>
+                    <Col xs={24} md={12} xl={8}>
                     <Form.Item name="lang" label="语言 lang" extra="如 zh-CN">
                       <Input style={{ width: 120 }} />
                     </Form.Item>
+                    </Col>
+                    <Col xs={24} md={12} xl={8}>
                     <Form.Item name="accept_lang" label="接受语言 accept-lang" extra="如 zh-CN,en-US">
                       <Input style={{ width: 160 }} />
                     </Form.Item>
+                    </Col>
+                    <Col xs={24} md={12} xl={8}>
                     <Form.Item name="timezone" label="时区 timezone" extra="如 Asia/Shanghai">
                       <Input style={{ width: 160 }} />
                     </Form.Item>
+                    </Col>
+                    <Col xs={24} md={12} xl={8}>
                     <Form.Item name="disable_spoofing" label="禁用指纹伪装 disable-spoofing">
                       <Checkbox.Group options={spoofingFields.map((field) => ({ value: field, label: field }))} />
                     </Form.Item>
-                  </Space>
+                    </Col>
+                  </Row>
                 ) },
             ]}
           />