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

refactor(frontend): split inbound wireguard & shadowsocks protocol forms

Browse source 
Extract the wireguard and shadowsocks protocol blocks from InboundFormModal into inbounds/form/protocols/{wireguard,shadowsocks}.tsx (presentational; form + regen handlers / isSSWith2022 passed as props). Drop now-unused Divider + SSMethodSchema imports. Verbatim relocation; inbound snapshots unchanged -> no behavior change. typecheck/lint/build green.
This commit is contained in:
MHSanaei 2026-05-30 18:26:56 +02:00
parent afd44ed687
commit e8381564a6
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
4 changed files with 192 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
frontend/src/pages/inbounds/form/InboundFormModal.tsx
View file

@ -5,7 +5,6 @@ import {
Button, Button,
Card, Card,
Checkbox, Checkbox,
Divider,
Empty, Empty,
Form, Form,
Input, Input,
@ -41,7 +40,6 @@ import {
canEnableTls, canEnableTls,
isSS2022, isSS2022,
} from '@/lib/xray/protocol-capabilities'; } from '@/lib/xray/protocol-capabilities';
import { SSMethodSchema } from '@/schemas/protocols/shared/shadowsocks';
import { getRandomRealityTarget } from '@/models/reality-targets'; import { getRandomRealityTarget } from '@/models/reality-targets';
import { import {
InboundFormBaseSchema, InboundFormBaseSchema,
@ -84,7 +82,7 @@ import { InputAddon } from '@/components/ui';
import './InboundFormModal.css'; import './InboundFormModal.css';
import { AdvancedAllEditor, AdvancedSliceEditor } from './advanced-editors'; import { AdvancedAllEditor, AdvancedSliceEditor } from './advanced-editors';
import { TunFields, TunnelFields } from './protocols'; import { ShadowsocksFields, TunFields, TunnelFields, WireguardFields } from './protocols';
const { TextArea } = Input; const { TextArea } = Input;
import { coerceInboundJsonField, type DBInbound } from '@/models/dbinbound'; import { coerceInboundJsonField, type DBInbound } from '@/models/dbinbound';
@ -948,111 +946,7 @@ export default function InboundFormModal({
const protocolTab = ( const protocolTab = (
<> <>
{protocol === Protocols.WIREGUARD && ( {protocol === Protocols.WIREGUARD && <WireguardFields wgPubKey={wgPubKey} regenInboundWg={regenInboundWg} regenWgPeerKeypair={regenWgPeerKeypair} />}
<>
<Form.Item label={t('pages.xray.wireguard.secretKey')}>
<Space.Compact block>
<Form.Item name={['settings', 'secretKey']} noStyle>
<Input style={{ width: 'calc(100% - 32px)' }} />
</Form.Item>
<Button icon={<ReloadOutlined />} onClick={regenInboundWg} />
</Space.Compact>
</Form.Item>
<Form.Item label={t('pages.xray.wireguard.publicKey')}>
<Input value={wgPubKey} disabled />
</Form.Item>
<Form.Item name={['settings', 'mtu']} label="MTU">
<InputNumber />
</Form.Item>
<Form.Item
name={['settings', 'noKernelTun']}
label={t('pages.inbounds.info.noKernelTun')}
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.List name={['settings', 'peers']}>
{(fields, { add, remove }) => (
<>
<Form.Item label={t('pages.inbounds.form.peers')}>
<Button
size="small"
onClick={() => {
const kp = Wireguard.generateKeypair();
add({
privateKey: kp.privateKey,
publicKey: kp.publicKey,
allowedIPs: ['10.0.0.2/32'],
keepAlive: 0,
});
}}
>
<PlusOutlined /> {t('pages.inbounds.form.addPeer')}
</Button>
</Form.Item>
{fields.map((field, idx) => (
<div key={field.key} className="wg-peer">
<Divider titlePlacement="center">
<Space>
<span>{t('pages.inbounds.info.peerNumber', { n: idx + 1 })}</span>
{fields.length > 1 && (
<Button
size="small"
danger
icon={<MinusOutlined />}
onClick={() => remove(field.name)}
/>
)}
</Space>
</Divider>
<Form.Item label={t('pages.xray.wireguard.secretKey')}>
<Space.Compact block>
<Form.Item name={[field.name, 'privateKey']} noStyle>
<Input style={{ width: 'calc(100% - 32px)' }} />
</Form.Item>
<Button
icon={<ReloadOutlined />}
onClick={() => regenWgPeerKeypair(field.name)}
/>
</Space.Compact>
</Form.Item>
<Form.Item name={[field.name, 'publicKey']} label={t('pages.xray.wireguard.publicKey')}>
<Input />
</Form.Item>
<Form.Item name={[field.name, 'preSharedKey']} label="PSK">
<Input />
</Form.Item>
<Form.List name={[field.name, 'allowedIPs']}>
{(ipFields, { add: addIp, remove: removeIp }) => (
<Form.Item label={t('pages.xray.wireguard.allowedIPs')}>
<Button size="small" onClick={() => addIp('')}>
<PlusOutlined />
</Button>
{ipFields.map((ipField) => (
<Space.Compact key={ipField.key} block className="mt-4">
<Form.Item name={ipField.name} noStyle>
<Input />
</Form.Item>
{ipFields.length > 1 && (
<Button size="small" onClick={() => removeIp(ipField.name)}>
<MinusOutlined />
</Button>
)}
</Space.Compact>
))}
</Form.Item>
)}
</Form.List>
<Form.Item name={[field.name, 'keepAlive']} label={t('pages.inbounds.form.keepAlive')}>
<InputNumber min={0} />
</Form.Item>
</div>
))}
</>
)}
</Form.List>
</>
)}
{protocol === Protocols.TUN && <TunFields />} {protocol === Protocols.TUN && <TunFields />}
@ -1131,57 +1025,7 @@ export default function InboundFormModal({
</> </>
)} )}
{protocol === Protocols.SHADOWSOCKS && ( {protocol === Protocols.SHADOWSOCKS && <ShadowsocksFields form={form} isSSWith2022={isSSWith2022} />}
<>
<Form.Item name={['settings', 'method']} label={t('pages.inbounds.form.encryptionMethod')}>
<Select
onChange={(v) => {
form.setFieldValue(
['settings', 'password'],
RandomUtil.randomShadowsocksPassword(v as string),
);
}}
options={SSMethodSchema.options.map((m) => ({ value: m, label: m }))}
/>
</Form.Item>
{isSSWith2022 && (
<Form.Item label={t('password')}>
<Space.Compact block>
<Form.Item name={['settings', 'password']} noStyle>
<Input style={{ width: 'calc(100% - 32px)' }} />
</Form.Item>
<Button
icon={<ReloadOutlined />}
onClick={() => {
const method = form.getFieldValue(['settings', 'method']);
form.setFieldValue(
['settings', 'password'],
RandomUtil.randomShadowsocksPassword(method as string),
);
}}
/>
</Space.Compact>
</Form.Item>
)}
<Form.Item name={['settings', 'network']} label={t('pages.inbounds.network')}>
<Select
style={{ width: 120 }}
options={[
{ value: 'tcp,udp', label: 'TCP, UDP' },
{ value: 'tcp', label: 'TCP' },
{ value: 'udp', label: 'UDP' },
]}
/>
</Form.Item>
<Form.Item
name={['settings', 'ivCheck']}
label="ivCheck"
valuePropName="checked"
>
<Switch />
</Form.Item>
</>
)}
{protocol === Protocols.VLESS && ( {protocol === Protocols.VLESS && (
<> <>

2
frontend/src/pages/inbounds/form/protocols/index.ts
View file

@ -1,2 +1,4 @@
export { default as TunFields } from './tun'; export { default as TunFields } from './tun';
export { default as TunnelFields } from './tunnel'; export { default as TunnelFields } from './tunnel';
export { default as ShadowsocksFields } from './shadowsocks';
export { default as WireguardFields } from './wireguard';

67
frontend/src/pages/inbounds/form/protocols/shadowsocks.tsx Normal file
View file

@ -0,0 +1,67 @@
import { useTranslation } from 'react-i18next';
import { Button, Form, Input, Select, Space, Switch, type FormInstance } from 'antd';
import { ReloadOutlined } from '@ant-design/icons';
import { RandomUtil } from '@/utils';
import { SSMethodSchema } from '@/schemas/protocols/shared/shadowsocks';
import type { InboundFormValues } from '@/schemas/forms/inbound-form';
interface ShadowsocksFieldsProps {
form: FormInstance<InboundFormValues>;
isSSWith2022: boolean;
}
export default function ShadowsocksFields({ form, isSSWith2022 }: ShadowsocksFieldsProps) {
const { t } = useTranslation();
return (
<>
<Form.Item name={['settings', 'method']} label={t('pages.inbounds.form.encryptionMethod')}>
<Select
onChange={(v) => {
form.setFieldValue(
['settings', 'password'],
RandomUtil.randomShadowsocksPassword(v as string),
);
}}
options={SSMethodSchema.options.map((m) => ({ value: m, label: m }))}
/>
</Form.Item>
{isSSWith2022 && (
<Form.Item label={t('password')}>
<Space.Compact block>
<Form.Item name={['settings', 'password']} noStyle>
<Input style={{ width: 'calc(100% - 32px)' }} />
</Form.Item>
<Button
icon={<ReloadOutlined />}
onClick={() => {
const method = form.getFieldValue(['settings', 'method']);
form.setFieldValue(
['settings', 'password'],
RandomUtil.randomShadowsocksPassword(method as string),
);
}}
/>
</Space.Compact>
</Form.Item>
)}
<Form.Item name={['settings', 'network']} label={t('pages.inbounds.network')}>
<Select
style={{ width: 120 }}
options={[
{ value: 'tcp,udp', label: 'TCP, UDP' },
{ value: 'tcp', label: 'TCP' },
{ value: 'udp', label: 'UDP' },
]}
/>
</Form.Item>
<Form.Item
name={['settings', 'ivCheck']}
label="ivCheck"
valuePropName="checked"
>
<Switch />
</Form.Item>
</>
);
}

120
frontend/src/pages/inbounds/form/protocols/wireguard.tsx Normal file
View file

@ -0,0 +1,120 @@
import { useTranslation } from 'react-i18next';
import { Button, Divider, Form, Input, InputNumber, Space, Switch } from 'antd';
import { MinusOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
import { Wireguard } from '@/utils';
interface WireguardFieldsProps {
wgPubKey: string;
regenInboundWg: () => void;
regenWgPeerKeypair: (name: number) => void;
}
export default function WireguardFields({ wgPubKey, regenInboundWg, regenWgPeerKeypair }: WireguardFieldsProps) {
const { t } = useTranslation();
return (
<>
<Form.Item label={t('pages.xray.wireguard.secretKey')}>
<Space.Compact block>
<Form.Item name={['settings', 'secretKey']} noStyle>
<Input style={{ width: 'calc(100% - 32px)' }} />
</Form.Item>
<Button icon={<ReloadOutlined />} onClick={regenInboundWg} />
</Space.Compact>
</Form.Item>
<Form.Item label={t('pages.xray.wireguard.publicKey')}>
<Input value={wgPubKey} disabled />
</Form.Item>
<Form.Item name={['settings', 'mtu']} label="MTU">
<InputNumber />
</Form.Item>
<Form.Item
name={['settings', 'noKernelTun']}
label={t('pages.inbounds.info.noKernelTun')}
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.List name={['settings', 'peers']}>
{(fields, { add, remove }) => (
<>
<Form.Item label={t('pages.inbounds.form.peers')}>
<Button
size="small"
onClick={() => {
const kp = Wireguard.generateKeypair();
add({
privateKey: kp.privateKey,
publicKey: kp.publicKey,
allowedIPs: ['10.0.0.2/32'],
keepAlive: 0,
});
}}
>
<PlusOutlined /> {t('pages.inbounds.form.addPeer')}
</Button>
</Form.Item>
{fields.map((field, idx) => (
<div key={field.key} className="wg-peer">
<Divider titlePlacement="center">
<Space>
<span>{t('pages.inbounds.info.peerNumber', { n: idx + 1 })}</span>
{fields.length > 1 && (
<Button
size="small"
danger
icon={<MinusOutlined />}
onClick={() => remove(field.name)}
/>
)}
</Space>
</Divider>
<Form.Item label={t('pages.xray.wireguard.secretKey')}>
<Space.Compact block>
<Form.Item name={[field.name, 'privateKey']} noStyle>
<Input style={{ width: 'calc(100% - 32px)' }} />
</Form.Item>
<Button
icon={<ReloadOutlined />}
onClick={() => regenWgPeerKeypair(field.name)}
/>
</Space.Compact>
</Form.Item>
<Form.Item name={[field.name, 'publicKey']} label={t('pages.xray.wireguard.publicKey')}>
<Input />
</Form.Item>
<Form.Item name={[field.name, 'preSharedKey']} label="PSK">
<Input />
</Form.Item>
<Form.List name={[field.name, 'allowedIPs']}>
{(ipFields, { add: addIp, remove: removeIp }) => (
<Form.Item label={t('pages.xray.wireguard.allowedIPs')}>
<Button size="small" onClick={() => addIp('')}>
<PlusOutlined />
</Button>
{ipFields.map((ipField) => (
<Space.Compact key={ipField.key} block className="mt-4">
<Form.Item name={ipField.name} noStyle>
<Input />
</Form.Item>
{ipFields.length > 1 && (
<Button size="small" onClick={() => removeIp(ipField.name)}>
<MinusOutlined />
</Button>
)}
</Space.Compact>
))}
</Form.Item>
)}
</Form.List>
<Form.Item name={[field.name, 'keepAlive']} label={t('pages.inbounds.form.keepAlive')}>
<InputNumber min={0} />
</Form.Item>
</div>
))}
</>
)}
</Form.List>
</>
);
}