Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-05-31 18:24:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refactor(forms): modernize random buttons in client + outbound modals

Browse source 
Replace the last holdouts of the old random-affordance patterns:
- ClientFormModal's five "↻" text buttons (email / subId / auth /
  password / uuid) now use <Button icon={<ReloadOutlined />} /> so
  they match the icon-based actions elsewhere in the form.
- OutboundFormModal's WireGuard private-key SyncOutlined-in-label
  becomes a real button inside a Space.Compact next to the key
  field — same pattern the inbound side already uses.

The shared .random-icon CSS class has no remaining consumers after
this and the previous inbound-form pass, so drop it from utils.css.
This commit is contained in:
MHSanaei 2026-05-27 13:43:35 +02:00
parent 9d2a4f217e
commit 43288e6686
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
3 changed files with 21 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/pages/clients/ClientFormModal.tsx
View file

@ -14,6 +14,7 @@ import {
Tag, Tag,
message, message,
} from 'antd'; } from 'antd';
import { ReloadOutlined } from '@ant-design/icons';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs'; import type { Dayjs } from 'dayjs';
@ -369,7 +370,7 @@ export default function ClientFormModal({
style={{ flex: 1 }} style={{ flex: 1 }}
onChange={(e) => update('email', e.target.value)} onChange={(e) => update('email', e.target.value)}
/> />
<Button onClick={() => update('email', RandomUtil.randomLowerAndNum(12))}>↻</Button> <Button icon={<ReloadOutlined />} onClick={() => update('email', RandomUtil.randomLowerAndNum(12))} />
</Space.Compact> </Space.Compact>
</Form.Item> </Form.Item>
</Col> </Col>
@ -377,7 +378,7 @@ export default function ClientFormModal({
<Form.Item label={t('pages.clients.subId')}> <Form.Item label={t('pages.clients.subId')}>
<Space.Compact style={{ display: 'flex' }}> <Space.Compact style={{ display: 'flex' }}>
<Input value={form.subId} style={{ flex: 1 }} onChange={(e) => update('subId', e.target.value)} /> <Input value={form.subId} style={{ flex: 1 }} onChange={(e) => update('subId', e.target.value)} />
<Button onClick={() => update('subId', RandomUtil.randomLowerAndNum(16))}>↻</Button> <Button icon={<ReloadOutlined />} onClick={() => update('subId', RandomUtil.randomLowerAndNum(16))} />
</Space.Compact> </Space.Compact>
</Form.Item> </Form.Item>
</Col> </Col>
@ -388,7 +389,7 @@ export default function ClientFormModal({
<Form.Item label={t('pages.clients.hysteriaAuth')}> <Form.Item label={t('pages.clients.hysteriaAuth')}>
<Space.Compact style={{ display: 'flex' }}> <Space.Compact style={{ display: 'flex' }}>
<Input value={form.auth} style={{ flex: 1 }} onChange={(e) => update('auth', e.target.value)} /> <Input value={form.auth} style={{ flex: 1 }} onChange={(e) => update('auth', e.target.value)} />
<Button onClick={() => update('auth', RandomUtil.randomLowerAndNum(16))}>↻</Button> <Button icon={<ReloadOutlined />} onClick={() => update('auth', RandomUtil.randomLowerAndNum(16))} />
</Space.Compact> </Space.Compact>
</Form.Item> </Form.Item>
</Col> </Col>
@ -396,7 +397,7 @@ export default function ClientFormModal({
<Form.Item label={t('pages.clients.password')}> <Form.Item label={t('pages.clients.password')}>
<Space.Compact style={{ display: 'flex' }}> <Space.Compact style={{ display: 'flex' }}>
<Input value={form.password} style={{ flex: 1 }} onChange={(e) => update('password', e.target.value)} /> <Input value={form.password} style={{ flex: 1 }} onChange={(e) => update('password', e.target.value)} />
<Button onClick={() => update('password', RandomUtil.randomLowerAndNum(16))}>↻</Button> <Button icon={<ReloadOutlined />} onClick={() => update('password', RandomUtil.randomLowerAndNum(16))} />
</Space.Compact> </Space.Compact>
</Form.Item> </Form.Item>
</Col> </Col>
@ -407,7 +408,7 @@ export default function ClientFormModal({
<Form.Item label={t('pages.clients.uuid')}> <Form.Item label={t('pages.clients.uuid')}>
<Space.Compact style={{ display: 'flex' }}> <Space.Compact style={{ display: 'flex' }}>
<Input value={form.uuid} style={{ flex: 1 }} onChange={(e) => update('uuid', e.target.value)} /> <Input value={form.uuid} style={{ flex: 1 }} onChange={(e) => update('uuid', e.target.value)} />
<Button onClick={() => update('uuid', RandomUtil.randomUUID())}>↻</Button> <Button icon={<ReloadOutlined />} onClick={() => update('uuid', RandomUtil.randomUUID())} />
</Space.Compact> </Space.Compact>
</Form.Item> </Form.Item>
</Col> </Col>

33
frontend/src/pages/xray/OutboundFormModal.tsx
View file

@ -13,7 +13,7 @@ import {
Tabs, Tabs,
message, message,
} from 'antd'; } from 'antd';
import { DeleteOutlined, MinusOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons'; import { DeleteOutlined, MinusOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
import FinalMaskForm from '@/components/FinalMaskForm'; import FinalMaskForm from '@/components/FinalMaskForm';
import HeaderMapEditor from '@/components/HeaderMapEditor'; import HeaderMapEditor from '@/components/HeaderMapEditor';
@ -977,23 +977,20 @@ export default function OutboundFormModal({
<Form.Item label={t('pages.inbounds.address')} name={['settings', 'address']}> <Form.Item label={t('pages.inbounds.address')} name={['settings', 'address']}>
<Input placeholder="comma-separated, e.g. 10.0.0.1,fd00::1" /> <Input placeholder="comma-separated, e.g. 10.0.0.1,fd00::1" />
</Form.Item> </Form.Item>
<Form.Item <Form.Item label={t('pages.inbounds.privatekey')}>
label={ <Space.Compact block>
<> <Form.Item name={['settings', 'secretKey']} noStyle>
{t('pages.inbounds.privatekey')} <Input style={{ width: 'calc(100% - 32px)' }} />
<SyncOutlined </Form.Item>
className="random-icon" <Button
onClick={() => { icon={<ReloadOutlined />}
const pair = Wireguard.generateKeypair(); onClick={() => {
form.setFieldValue(['settings', 'secretKey'], pair.privateKey); const pair = Wireguard.generateKeypair();
form.setFieldValue(['settings', 'pubKey'], pair.publicKey); form.setFieldValue(['settings', 'secretKey'], pair.privateKey);
}} form.setFieldValue(['settings', 'pubKey'], pair.publicKey);
/> }}
</> />
} </Space.Compact>
name={['settings', 'secretKey']}
>
<Input />
</Form.Item> </Form.Item>
<Form.Item label={t('pages.inbounds.publicKey')} name={['settings', 'pubKey']}> <Form.Item label={t('pages.inbounds.publicKey')} name={['settings', 'pubKey']}>
<Input disabled /> <Input disabled />

6
frontend/src/styles/utils.css
View file

@ -16,12 +16,6 @@
.zero-margin { margin: 0; } .zero-margin { margin: 0; }
.random-icon {
margin-left: 4px;
cursor: pointer;
color: var(--ant-color-primary);
}
.danger-icon { .danger-icon {
margin-left: 8px; margin-left: 8px;
cursor: pointer; cursor: pointer;