Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-05 12:44:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

refactor(frontend): extract OutboundFormModal core protocol fields

Browse source 
OutboundFormModal.tsx 1622 -> 1538. Moved the shared protocol core field blocks (vmess/vless ID, vmess security, vless encryption/reverseTag, trojan/ss password, ss method/uot, socks/http user/pass) into outbound-core-fields.tsx; dropped now-unused schema/option imports. Per-protocol snapshots unchanged -> no behavior change. typecheck/lint/build green.
This commit is contained in:
MHSanaei 2026-05-30 17:03:39 +02:00
parent c7917d12d3
commit 15ecd0aa78
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
2 changed files with 105 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
frontend/src/pages/xray/outbounds/OutboundFormModal.tsx
View file

@ -26,10 +26,6 @@ import {
import { parseOutboundLink } from '@/lib/xray/outbound-link-parser'; import { parseOutboundLink } from '@/lib/xray/outbound-link-parser';
import { import {
OutboundFormBaseSchema, OutboundFormBaseSchema,
ShadowsocksOutboundFormSettingsSchema,
TrojanOutboundFormSettingsSchema,
VlessOutboundFormSettingsSchema,
VmessOutboundFormSettingsSchema,
type OutboundFormValues, type OutboundFormValues,
} from '@/schemas/forms/outbound-form'; } from '@/schemas/forms/outbound-form';
import { import {
@ -47,7 +43,6 @@ import {
canEnableTls, canEnableTls,
canEnableTlsFlow, canEnableTlsFlow,
} from '@/lib/xray/protocol-capabilities'; } from '@/lib/xray/protocol-capabilities';
import { SSMethodSchema } from '@/schemas/protocols/shared/shadowsocks';
import { antdRule } from '@/utils/zodForm'; import { antdRule } from '@/utils/zodForm';
import { import {
@ -58,9 +53,7 @@ import {
MODE_OPTIONS, MODE_OPTIONS,
NETWORK_OPTIONS, NETWORK_OPTIONS,
PROTOCOL_OPTIONS, PROTOCOL_OPTIONS,
SECURITY_OPTIONS,
SERVER_PROTOCOLS, SERVER_PROTOCOLS,
SS_METHOD_OPTIONS,
UTLS_OPTIONS, UTLS_OPTIONS,
} from './outbound-form-constants'; } from './outbound-form-constants';
import { import {
@ -69,6 +62,7 @@ import {
isMuxAllowed, isMuxAllowed,
newStreamSlice, newStreamSlice,
} from './outbound-form-helpers'; } from './outbound-form-helpers';
import { OutboundCoreProtocolFields } from './outbound-core-fields';
import { OutboundOnlyProtocolFields } from './outbound-only-fields'; import { OutboundOnlyProtocolFields } from './outbound-only-fields';
import { FreedomOutboundFields } from './outbound-freedom-fields'; import { FreedomOutboundFields } from './outbound-freedom-fields';
import { WireguardOutboundFields } from './outbound-wireguard-fields'; import { WireguardOutboundFields } from './outbound-wireguard-fields';
@ -418,88 +412,7 @@ export default function OutboundFormModal({
</> </>
)} )}
{(protocol === 'vmess' || protocol === 'vless') && ( <OutboundCoreProtocolFields protocol={protocol} />
<Form.Item
label="ID"
name={['settings', 'id']}
rules={[antdRule(VmessOutboundFormSettingsSchema.shape.id, t)]}
>
<Input placeholder="UUID" />
</Form.Item>
)}
{protocol === 'vmess' && (
<Form.Item
label={t('security')}
name={['settings', 'security']}
rules={[antdRule(VmessOutboundFormSettingsSchema.shape.security, t)]}
>
<Select options={SECURITY_OPTIONS} />
</Form.Item>
)}
{protocol === 'vless' && (
<>
<Form.Item
label={t('encryption')}
name={['settings', 'encryption']}
rules={[antdRule(VlessOutboundFormSettingsSchema.shape.encryption, t)]}
>
<Input />
</Form.Item>
<Form.Item label={t('pages.clients.reverseTag')} name={['settings', 'reverseTag']}>
<Input placeholder={t('pages.xray.outboundForm.optional')} />
</Form.Item>
</>
)}
{(protocol === 'trojan' || protocol === 'shadowsocks') && (
<Form.Item
label={t('password')}
name={['settings', 'password']}
rules={[
antdRule(
protocol === 'trojan'
? TrojanOutboundFormSettingsSchema.shape.password
: ShadowsocksOutboundFormSettingsSchema.shape.password,
t,
),
]}
>
<Input />
</Form.Item>
)}
{protocol === 'shadowsocks' && (
<>
<Form.Item
label={t('encryption')}
name={['settings', 'method']}
rules={[antdRule(SSMethodSchema, t)]}
>
<Select options={SS_METHOD_OPTIONS} />
</Form.Item>
<Form.Item
label={t('pages.xray.outboundForm.udpOverTcp')}
name={['settings', 'uot']}
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item label={t('pages.xray.outboundForm.uotVersion')} name={['settings', 'UoTVersion']}>
<InputNumber min={1} max={2} />
</Form.Item>
</>
)}
{(protocol === 'socks' || protocol === 'http') && (
<>
<Form.Item label={t('username')} name={['settings', 'user']}>
<Input />
</Form.Item>
<Form.Item label={t('password')} name={['settings', 'pass']}>
<Input />
</Form.Item>
</>
)}
<OutboundOnlyProtocolFields protocol={protocol} /> <OutboundOnlyProtocolFields protocol={protocol} />

103
frontend/src/pages/xray/outbounds/outbound-core-fields.tsx Normal file
View file

@ -0,0 +1,103 @@
import { useTranslation } from 'react-i18next';
import { Form, Input, InputNumber, Select, Switch } from 'antd';
import {
ShadowsocksOutboundFormSettingsSchema,
TrojanOutboundFormSettingsSchema,
VlessOutboundFormSettingsSchema,
VmessOutboundFormSettingsSchema,
} from '@/schemas/forms/outbound-form';
import { SSMethodSchema } from '@/schemas/protocols/shared/shadowsocks';
import { antdRule } from '@/utils/zodForm';
import { SECURITY_OPTIONS, SS_METHOD_OPTIONS } from './outbound-form-constants';
export function OutboundCoreProtocolFields({ protocol }: { protocol: string }) {
const { t } = useTranslation();
return (
<>
{(protocol === 'vmess' || protocol === 'vless') && (
<Form.Item
label="ID"
name={['settings', 'id']}
rules={[antdRule(VmessOutboundFormSettingsSchema.shape.id, t)]}
>
<Input placeholder="UUID" />
</Form.Item>
)}
{protocol === 'vmess' && (
<Form.Item
label={t('security')}
name={['settings', 'security']}
rules={[antdRule(VmessOutboundFormSettingsSchema.shape.security, t)]}
>
<Select options={SECURITY_OPTIONS} />
</Form.Item>
)}
{protocol === 'vless' && (
<>
<Form.Item
label={t('encryption')}
name={['settings', 'encryption']}
rules={[antdRule(VlessOutboundFormSettingsSchema.shape.encryption, t)]}
>
<Input />
</Form.Item>
<Form.Item label={t('pages.clients.reverseTag')} name={['settings', 'reverseTag']}>
<Input placeholder={t('pages.xray.outboundForm.optional')} />
</Form.Item>
</>
)}
{(protocol === 'trojan' || protocol === 'shadowsocks') && (
<Form.Item
label={t('password')}
name={['settings', 'password']}
rules={[
antdRule(
protocol === 'trojan'
? TrojanOutboundFormSettingsSchema.shape.password
: ShadowsocksOutboundFormSettingsSchema.shape.password,
t,
),
]}
>
<Input />
</Form.Item>
)}
{protocol === 'shadowsocks' && (
<>
<Form.Item
label={t('encryption')}
name={['settings', 'method']}
rules={[antdRule(SSMethodSchema, t)]}
>
<Select options={SS_METHOD_OPTIONS} />
</Form.Item>
<Form.Item
label={t('pages.xray.outboundForm.udpOverTcp')}
name={['settings', 'uot']}
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item label={t('pages.xray.outboundForm.uotVersion')} name={['settings', 'UoTVersion']}>
<InputNumber min={1} max={2} />
</Form.Item>
</>
)}
{(protocol === 'socks' || protocol === 'http') && (
<>
<Form.Item label={t('username')} name={['settings', 'user']}>
<Input />
</Form.Item>
<Form.Item label={t('password')} name={['settings', 'pass']}>
<Input />
</Form.Item>
</>
)}
</>
);
}