fix(ui): 创建环境表单 Space wrap 改 Row/Col 栅格,窄屏换行稳定(走查 P2-#11)

This commit is contained in:
2026-09-28 07:32:20 +08:00
parent 637900c5fd
commit a30e99a160
+35 -5
View File
@@ -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>
) },
]}
/>