mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-05 20:54:14 +00:00
refactor(frontend): extract inbound sockopt + external-proxy blocks
Move the inbound Sockopt (~250 lines) and External Proxy stream blocks out of InboundFormModal into presentational components under inbounds/form/transport/, mirroring the outbound extraction. Each takes its toggle handler (toggleSockopt / toggleExternalProxy) as a prop and keeps its render-prop getFieldValue gate. InboundFormModal drops from 1708 to 1332 lines. Extend inbound-form-blocks.test.tsx with isolated render-snapshot coverage for both (SockoptForm seeded enabled + happyEyeballs; ExternalProxyForm seeded with one TLS entry). No behavior change.
This commit is contained in:
MHSanaei
parent
2aec803181
commit
7739c3367d
6 changed files with 492 additions and 385 deletions
|
|
@ -22,7 +22,6 @@ import {
|
|||
ArrowDownOutlined,
|
||||
ArrowUpOutlined,
|
||||
DeleteOutlined,
|
||||
MinusOutlined,
|
||||
PlusOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
|
|
@ -47,18 +46,10 @@ import {
|
|||
} from '@/schemas/forms/inbound-form';
|
||||
import { antdRule } from '@/utils/zodForm';
|
||||
import {
|
||||
ALPN_OPTION,
|
||||
Address_Port_Strategy,
|
||||
DOMAIN_STRATEGY_OPTION,
|
||||
Protocols,
|
||||
SNIFFING_OPTION,
|
||||
TCP_CONGESTION_OPTION,
|
||||
UTLS_FINGERPRINT,
|
||||
} from '@/schemas/primitives';
|
||||
import {
|
||||
HappyEyeballsSchema,
|
||||
SockoptStreamSettingsSchema,
|
||||
} from '@/schemas/protocols/stream/sockopt';
|
||||
import { SockoptStreamSettingsSchema } from '@/schemas/protocols/stream/sockopt';
|
||||
import { HysteriaStreamSettingsSchema } from '@/schemas/protocols/stream/hysteria';
|
||||
import { TlsStreamSettingsSchema } from '@/schemas/protocols/security/tls';
|
||||
import { RealityStreamSettingsSchema } from '@/schemas/protocols/security/reality';
|
||||
|
|
@ -86,10 +77,12 @@ import {
|
|||
WireguardFields,
|
||||
} from './protocols';
|
||||
import {
|
||||
ExternalProxyForm,
|
||||
GrpcForm,
|
||||
HttpUpgradeForm,
|
||||
KcpForm,
|
||||
RawForm,
|
||||
SockoptForm,
|
||||
WsForm,
|
||||
XhttpForm,
|
||||
} from './transport';
|
||||
|
|
@ -1058,378 +1051,9 @@ export default function InboundFormModal({
|
|||
|
||||
{network === 'kcp' && <KcpForm />}
|
||||
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prev, curr) => {
|
||||
const a = (prev.streamSettings as { externalProxy?: unknown[] } | undefined)?.externalProxy;
|
||||
const b = (curr.streamSettings as { externalProxy?: unknown[] } | undefined)?.externalProxy;
|
||||
return (Array.isArray(a) ? a.length : 0) !== (Array.isArray(b) ? b.length : 0);
|
||||
}}
|
||||
>
|
||||
{({ getFieldValue }) => {
|
||||
const arr = getFieldValue(['streamSettings', 'externalProxy']);
|
||||
const on = Array.isArray(arr) && arr.length > 0;
|
||||
return (
|
||||
<>
|
||||
<Form.Item label={t('pages.inbounds.form.externalProxy')}>
|
||||
<Switch checked={on} onChange={toggleExternalProxy} />
|
||||
</Form.Item>
|
||||
{on && (
|
||||
<Form.List name={['streamSettings', 'externalProxy']}>
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
<Form.Item label=" " colon={false}>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={() => add({
|
||||
forceTls: 'same',
|
||||
dest: '',
|
||||
port: 443,
|
||||
remark: '',
|
||||
sni: '',
|
||||
fingerprint: '',
|
||||
alpn: [],
|
||||
})}
|
||||
>
|
||||
<PlusOutlined />
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Form.Item wrapperCol={{ span: 24 }}>
|
||||
{fields.map((field) => (
|
||||
<div key={field.key} style={{ margin: '8px 0' }}>
|
||||
<Space.Compact block>
|
||||
<Form.Item name={[field.name, 'forceTls']} noStyle>
|
||||
<Select
|
||||
style={{ width: '20%' }}
|
||||
options={[
|
||||
{ value: 'same', label: t('pages.inbounds.same') },
|
||||
{ value: 'none', label: t('none') },
|
||||
{ value: 'tls', label: 'TLS' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'dest']} noStyle>
|
||||
<Input style={{ width: '30%' }} placeholder={t('host')} />
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'port']} noStyle>
|
||||
<InputNumber style={{ width: '15%' }} min={1} max={65535} />
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'remark']} noStyle>
|
||||
<Input style={{ width: '25%' }} placeholder={t('pages.inbounds.remark')} />
|
||||
</Form.Item>
|
||||
<InputAddon onClick={() => remove(field.name)}>
|
||||
<MinusOutlined />
|
||||
</InputAddon>
|
||||
</Space.Compact>
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prev, curr) =>
|
||||
prev.streamSettings?.externalProxy?.[field.name]?.forceTls
|
||||
!== curr.streamSettings?.externalProxy?.[field.name]?.forceTls
|
||||
}
|
||||
>
|
||||
{({ getFieldValue }) => {
|
||||
const ft = getFieldValue([
|
||||
'streamSettings', 'externalProxy', field.name, 'forceTls',
|
||||
]);
|
||||
if (ft !== 'tls') return null;
|
||||
return (
|
||||
<Space.Compact style={{ marginTop: 6 }} block>
|
||||
<Form.Item name={[field.name, 'sni']} noStyle>
|
||||
<Input style={{ width: '30%' }} placeholder={t('pages.inbounds.form.sniPlaceholder')} />
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'fingerprint']} noStyle>
|
||||
<Select
|
||||
style={{ width: '30%' }}
|
||||
placeholder={t('pages.inbounds.form.fingerprint')}
|
||||
options={[
|
||||
{ value: '', label: t('pages.inbounds.form.defaultOption') },
|
||||
...Object.values(UTLS_FINGERPRINT).map((fp) => ({
|
||||
value: fp,
|
||||
label: fp,
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'alpn']} noStyle>
|
||||
<Select
|
||||
mode="multiple"
|
||||
style={{ width: '40%' }}
|
||||
placeholder="ALPN"
|
||||
options={Object.values(ALPN_OPTION).map((a) => ({
|
||||
value: a,
|
||||
label: a,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Space.Compact>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
</div>
|
||||
))}
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
<ExternalProxyForm toggleExternalProxy={toggleExternalProxy} />
|
||||
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prev, curr) => {
|
||||
const a = (prev.streamSettings as { sockopt?: object } | undefined)?.sockopt;
|
||||
const b = (curr.streamSettings as { sockopt?: object } | undefined)?.sockopt;
|
||||
return !!a !== !!b;
|
||||
}}
|
||||
>
|
||||
{({ getFieldValue }) => {
|
||||
const sock = getFieldValue(['streamSettings', 'sockopt']);
|
||||
const on = !!sock && typeof sock === 'object' && Object.keys(sock).length > 0;
|
||||
return (
|
||||
<>
|
||||
<Form.Item label="Sockopt">
|
||||
<Switch checked={on} onChange={toggleSockopt} />
|
||||
</Form.Item>
|
||||
{on && (
|
||||
<>
|
||||
<Form.Item name={['streamSettings', 'sockopt', 'mark']} label={t('pages.inbounds.form.routeMark')}>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpKeepAliveInterval']}
|
||||
label={t('pages.inbounds.form.tcpKeepAliveInterval')}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpKeepAliveIdle']}
|
||||
label={t('pages.inbounds.form.tcpKeepAliveIdle')}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item name={['streamSettings', 'sockopt', 'tcpMaxSeg']} label={t('pages.inbounds.form.tcpMaxSeg')}>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpUserTimeout']}
|
||||
label={t('pages.inbounds.form.tcpUserTimeout')}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpWindowClamp']}
|
||||
label={t('pages.inbounds.form.tcpWindowClamp')}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'acceptProxyProtocol']}
|
||||
label={t('pages.inbounds.form.proxyProtocol')}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpFastOpen']}
|
||||
label={t('pages.inbounds.form.tcpFastOpen')}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpMptcp']}
|
||||
label={t('pages.inbounds.form.multipathTcp')}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'penetrate']}
|
||||
label={t('pages.inbounds.form.penetrate')}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'V6Only']}
|
||||
label={t('pages.inbounds.form.v6Only')}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'domainStrategy']}
|
||||
label={t('pages.xray.wireguard.domainStrategy')}
|
||||
>
|
||||
<Select
|
||||
style={{ width: '50%' }}
|
||||
options={Object.values(DOMAIN_STRATEGY_OPTION).map((d) => ({ value: d, label: d }))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpcongestion']}
|
||||
label={t('pages.inbounds.form.tcpCongestion')}
|
||||
>
|
||||
<Select
|
||||
style={{ width: '50%' }}
|
||||
options={Object.values(TCP_CONGESTION_OPTION).map((c) => ({ value: c, label: c }))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={['streamSettings', 'sockopt', 'tproxy']} label="TProxy">
|
||||
<Select
|
||||
style={{ width: '50%' }}
|
||||
options={[
|
||||
{ value: 'off', label: 'Off' },
|
||||
{ value: 'redirect', label: 'Redirect' },
|
||||
{ value: 'tproxy', label: 'TProxy' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={['streamSettings', 'sockopt', 'dialerProxy']} label={t('pages.inbounds.form.dialerProxy')}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'interfaceName']}
|
||||
label={t('pages.inbounds.info.interfaceName')}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'trustedXForwardedFor']}
|
||||
label={t('pages.inbounds.form.trustedXForwardedFor')}
|
||||
>
|
||||
<Select
|
||||
mode="tags"
|
||||
style={{ width: '100%' }}
|
||||
tokenSeparators={[',']}
|
||||
options={[
|
||||
{ value: 'CF-Connecting-IP', label: 'CF-Connecting-IP' },
|
||||
{ value: 'X-Real-IP', label: 'X-Real-IP' },
|
||||
{ value: 'True-Client-IP', label: 'True-Client-IP' },
|
||||
{ value: 'X-Client-IP', label: 'X-Client-IP' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'addressPortStrategy']}
|
||||
label={t('pages.inbounds.form.addressPortStrategy')}
|
||||
>
|
||||
<Select
|
||||
style={{ width: '50%' }}
|
||||
options={Object.values(Address_Port_Strategy).map((v) => ({ value: v, label: v }))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item shouldUpdate noStyle>
|
||||
{({ getFieldValue, setFieldValue }) => {
|
||||
const he = getFieldValue(['streamSettings', 'sockopt', 'happyEyeballs']);
|
||||
const hasHe = he != null;
|
||||
return (
|
||||
<>
|
||||
<Form.Item label="Happy Eyeballs">
|
||||
<Switch
|
||||
checked={hasHe}
|
||||
onChange={(v) => {
|
||||
setFieldValue(
|
||||
['streamSettings', 'sockopt', 'happyEyeballs'],
|
||||
v ? HappyEyeballsSchema.parse({}) : undefined,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
{hasHe && (
|
||||
<>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'tryDelayMs']}
|
||||
label={t('pages.inbounds.form.tryDelayMs')}
|
||||
>
|
||||
<InputNumber min={0} placeholder="0 disabled — 250 recommended" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'prioritizeIPv6']}
|
||||
label={t('pages.inbounds.form.prioritizeIPv6')}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'interleave']}
|
||||
label={t('pages.inbounds.form.interleave')}
|
||||
>
|
||||
<InputNumber min={1} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'maxConcurrentTry']}
|
||||
label={t('pages.inbounds.form.maxConcurrentTry')}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
<Form.List name={['streamSettings', 'sockopt', 'customSockopt']}>
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
<Form.Item label={t('pages.inbounds.form.customSockopt')}>
|
||||
<Button
|
||||
type="dashed"
|
||||
size="small"
|
||||
onClick={() => add({ type: 'int', level: '6', opt: '', value: '' })}
|
||||
>
|
||||
+ {t('pages.inbounds.form.addCustomOption')}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
{fields.map((field) => (
|
||||
<Space.Compact key={field.key} style={{ display: 'flex', marginBottom: 8 }}>
|
||||
<Form.Item name={[field.name, 'system']} noStyle>
|
||||
<Select
|
||||
placeholder="all"
|
||||
allowClear
|
||||
style={{ width: 100 }}
|
||||
options={[
|
||||
{ value: 'linux', label: 'linux' },
|
||||
{ value: 'windows', label: 'windows' },
|
||||
{ value: 'darwin', label: 'darwin' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'type']} noStyle>
|
||||
<Select
|
||||
style={{ width: 80 }}
|
||||
options={[
|
||||
{ value: 'int', label: 'int' },
|
||||
{ value: 'str', label: 'str' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'level']} noStyle>
|
||||
<Input placeholder="level (6=TCP)" style={{ width: 100 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'opt']} noStyle>
|
||||
<Input placeholder="opt" style={{ width: 120 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'value']} noStyle>
|
||||
<Input placeholder="value" style={{ flex: 1 }} />
|
||||
</Form.Item>
|
||||
<Button danger onClick={() => remove(field.name)}>−</Button>
|
||||
</Space.Compact>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
<SockoptForm toggleSockopt={toggleSockopt} />
|
||||
|
||||
<FinalMaskForm
|
||||
name={['streamSettings', 'finalmask']}
|
||||
|
|
|
|||
136
frontend/src/pages/inbounds/form/transport/external-proxy.tsx
Normal file
136
frontend/src/pages/inbounds/form/transport/external-proxy.tsx
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Form, Input, InputNumber, Select, Space, Switch } from 'antd';
|
||||
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
import { InputAddon } from '@/components/ui';
|
||||
import { ALPN_OPTION, UTLS_FINGERPRINT } from '@/schemas/primitives';
|
||||
|
||||
export default function ExternalProxyForm({
|
||||
toggleExternalProxy,
|
||||
}: {
|
||||
toggleExternalProxy: (on: boolean) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prev, curr) => {
|
||||
const a = (prev.streamSettings as { externalProxy?: unknown[] } | undefined)?.externalProxy;
|
||||
const b = (curr.streamSettings as { externalProxy?: unknown[] } | undefined)?.externalProxy;
|
||||
return (Array.isArray(a) ? a.length : 0) !== (Array.isArray(b) ? b.length : 0);
|
||||
}}
|
||||
>
|
||||
{({ getFieldValue }) => {
|
||||
const arr = getFieldValue(['streamSettings', 'externalProxy']);
|
||||
const on = Array.isArray(arr) && arr.length > 0;
|
||||
return (
|
||||
<>
|
||||
<Form.Item label={t('pages.inbounds.form.externalProxy')}>
|
||||
<Switch checked={on} onChange={toggleExternalProxy} />
|
||||
</Form.Item>
|
||||
{on && (
|
||||
<Form.List name={['streamSettings', 'externalProxy']}>
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
<Form.Item label=" " colon={false}>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={() => add({
|
||||
forceTls: 'same',
|
||||
dest: '',
|
||||
port: 443,
|
||||
remark: '',
|
||||
sni: '',
|
||||
fingerprint: '',
|
||||
alpn: [],
|
||||
})}
|
||||
>
|
||||
<PlusOutlined />
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Form.Item wrapperCol={{ span: 24 }}>
|
||||
{fields.map((field) => (
|
||||
<div key={field.key} style={{ margin: '8px 0' }}>
|
||||
<Space.Compact block>
|
||||
<Form.Item name={[field.name, 'forceTls']} noStyle>
|
||||
<Select
|
||||
style={{ width: '20%' }}
|
||||
options={[
|
||||
{ value: 'same', label: t('pages.inbounds.same') },
|
||||
{ value: 'none', label: t('none') },
|
||||
{ value: 'tls', label: 'TLS' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'dest']} noStyle>
|
||||
<Input style={{ width: '30%' }} placeholder={t('host')} />
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'port']} noStyle>
|
||||
<InputNumber style={{ width: '15%' }} min={1} max={65535} />
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'remark']} noStyle>
|
||||
<Input style={{ width: '25%' }} placeholder={t('pages.inbounds.remark')} />
|
||||
</Form.Item>
|
||||
<InputAddon onClick={() => remove(field.name)}>
|
||||
<MinusOutlined />
|
||||
</InputAddon>
|
||||
</Space.Compact>
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prev, curr) =>
|
||||
prev.streamSettings?.externalProxy?.[field.name]?.forceTls
|
||||
!== curr.streamSettings?.externalProxy?.[field.name]?.forceTls
|
||||
}
|
||||
>
|
||||
{({ getFieldValue }) => {
|
||||
const ft = getFieldValue([
|
||||
'streamSettings', 'externalProxy', field.name, 'forceTls',
|
||||
]);
|
||||
if (ft !== 'tls') return null;
|
||||
return (
|
||||
<Space.Compact style={{ marginTop: 6 }} block>
|
||||
<Form.Item name={[field.name, 'sni']} noStyle>
|
||||
<Input style={{ width: '30%' }} placeholder={t('pages.inbounds.form.sniPlaceholder')} />
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'fingerprint']} noStyle>
|
||||
<Select
|
||||
style={{ width: '30%' }}
|
||||
placeholder={t('pages.inbounds.form.fingerprint')}
|
||||
options={[
|
||||
{ value: '', label: t('pages.inbounds.form.defaultOption') },
|
||||
...Object.values(UTLS_FINGERPRINT).map((fp) => ({
|
||||
value: fp,
|
||||
label: fp,
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'alpn']} noStyle>
|
||||
<Select
|
||||
mode="multiple"
|
||||
style={{ width: '40%' }}
|
||||
placeholder="ALPN"
|
||||
options={Object.values(ALPN_OPTION).map((a) => ({
|
||||
value: a,
|
||||
label: a,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Space.Compact>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
</div>
|
||||
))}
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,3 +4,5 @@ export { default as GrpcForm } from './grpc';
|
|||
export { default as XhttpForm } from './xhttp';
|
||||
export { default as HttpUpgradeForm } from './httpupgrade';
|
||||
export { default as KcpForm } from './kcp';
|
||||
export { default as ExternalProxyForm } from './external-proxy';
|
||||
export { default as SockoptForm } from './sockopt';
|
||||
|
|
|
|||
270
frontend/src/pages/inbounds/form/transport/sockopt.tsx
Normal file
270
frontend/src/pages/inbounds/form/transport/sockopt.tsx
Normal file
|
|
@ -0,0 +1,270 @@
|
|||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Form, Input, InputNumber, Select, Space, Switch } from 'antd';
|
||||
|
||||
import {
|
||||
Address_Port_Strategy,
|
||||
DOMAIN_STRATEGY_OPTION,
|
||||
TCP_CONGESTION_OPTION,
|
||||
} from '@/schemas/primitives';
|
||||
import { HappyEyeballsSchema } from '@/schemas/protocols/stream/sockopt';
|
||||
|
||||
export default function SockoptForm({
|
||||
toggleSockopt,
|
||||
}: {
|
||||
toggleSockopt: (on: boolean) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prev, curr) => {
|
||||
const a = (prev.streamSettings as { sockopt?: object } | undefined)?.sockopt;
|
||||
const b = (curr.streamSettings as { sockopt?: object } | undefined)?.sockopt;
|
||||
return !!a !== !!b;
|
||||
}}
|
||||
>
|
||||
{({ getFieldValue }) => {
|
||||
const sock = getFieldValue(['streamSettings', 'sockopt']);
|
||||
const on = !!sock && typeof sock === 'object' && Object.keys(sock).length > 0;
|
||||
return (
|
||||
<>
|
||||
<Form.Item label="Sockopt">
|
||||
<Switch checked={on} onChange={toggleSockopt} />
|
||||
</Form.Item>
|
||||
{on && (
|
||||
<>
|
||||
<Form.Item name={['streamSettings', 'sockopt', 'mark']} label={t('pages.inbounds.form.routeMark')}>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpKeepAliveInterval']}
|
||||
label={t('pages.inbounds.form.tcpKeepAliveInterval')}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpKeepAliveIdle']}
|
||||
label={t('pages.inbounds.form.tcpKeepAliveIdle')}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item name={['streamSettings', 'sockopt', 'tcpMaxSeg']} label={t('pages.inbounds.form.tcpMaxSeg')}>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpUserTimeout']}
|
||||
label={t('pages.inbounds.form.tcpUserTimeout')}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpWindowClamp']}
|
||||
label={t('pages.inbounds.form.tcpWindowClamp')}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'acceptProxyProtocol']}
|
||||
label={t('pages.inbounds.form.proxyProtocol')}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpFastOpen']}
|
||||
label={t('pages.inbounds.form.tcpFastOpen')}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpMptcp']}
|
||||
label={t('pages.inbounds.form.multipathTcp')}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'penetrate']}
|
||||
label={t('pages.inbounds.form.penetrate')}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'V6Only']}
|
||||
label={t('pages.inbounds.form.v6Only')}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'domainStrategy']}
|
||||
label={t('pages.xray.wireguard.domainStrategy')}
|
||||
>
|
||||
<Select
|
||||
style={{ width: '50%' }}
|
||||
options={Object.values(DOMAIN_STRATEGY_OPTION).map((d) => ({ value: d, label: d }))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'tcpcongestion']}
|
||||
label={t('pages.inbounds.form.tcpCongestion')}
|
||||
>
|
||||
<Select
|
||||
style={{ width: '50%' }}
|
||||
options={Object.values(TCP_CONGESTION_OPTION).map((c) => ({ value: c, label: c }))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={['streamSettings', 'sockopt', 'tproxy']} label="TProxy">
|
||||
<Select
|
||||
style={{ width: '50%' }}
|
||||
options={[
|
||||
{ value: 'off', label: 'Off' },
|
||||
{ value: 'redirect', label: 'Redirect' },
|
||||
{ value: 'tproxy', label: 'TProxy' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={['streamSettings', 'sockopt', 'dialerProxy']} label={t('pages.inbounds.form.dialerProxy')}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'interfaceName']}
|
||||
label={t('pages.inbounds.info.interfaceName')}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'trustedXForwardedFor']}
|
||||
label={t('pages.inbounds.form.trustedXForwardedFor')}
|
||||
>
|
||||
<Select
|
||||
mode="tags"
|
||||
style={{ width: '100%' }}
|
||||
tokenSeparators={[',']}
|
||||
options={[
|
||||
{ value: 'CF-Connecting-IP', label: 'CF-Connecting-IP' },
|
||||
{ value: 'X-Real-IP', label: 'X-Real-IP' },
|
||||
{ value: 'True-Client-IP', label: 'True-Client-IP' },
|
||||
{ value: 'X-Client-IP', label: 'X-Client-IP' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'addressPortStrategy']}
|
||||
label={t('pages.inbounds.form.addressPortStrategy')}
|
||||
>
|
||||
<Select
|
||||
style={{ width: '50%' }}
|
||||
options={Object.values(Address_Port_Strategy).map((v) => ({ value: v, label: v }))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item shouldUpdate noStyle>
|
||||
{({ getFieldValue, setFieldValue }) => {
|
||||
const he = getFieldValue(['streamSettings', 'sockopt', 'happyEyeballs']);
|
||||
const hasHe = he != null;
|
||||
return (
|
||||
<>
|
||||
<Form.Item label="Happy Eyeballs">
|
||||
<Switch
|
||||
checked={hasHe}
|
||||
onChange={(v) => {
|
||||
setFieldValue(
|
||||
['streamSettings', 'sockopt', 'happyEyeballs'],
|
||||
v ? HappyEyeballsSchema.parse({}) : undefined,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
{hasHe && (
|
||||
<>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'tryDelayMs']}
|
||||
label={t('pages.inbounds.form.tryDelayMs')}
|
||||
>
|
||||
<InputNumber min={0} placeholder="0 disabled — 250 recommended" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'prioritizeIPv6']}
|
||||
label={t('pages.inbounds.form.prioritizeIPv6')}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'interleave']}
|
||||
label={t('pages.inbounds.form.interleave')}
|
||||
>
|
||||
<InputNumber min={1} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'maxConcurrentTry']}
|
||||
label={t('pages.inbounds.form.maxConcurrentTry')}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
<Form.List name={['streamSettings', 'sockopt', 'customSockopt']}>
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
<Form.Item label={t('pages.inbounds.form.customSockopt')}>
|
||||
<Button
|
||||
type="dashed"
|
||||
size="small"
|
||||
onClick={() => add({ type: 'int', level: '6', opt: '', value: '' })}
|
||||
>
|
||||
+ {t('pages.inbounds.form.addCustomOption')}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
{fields.map((field) => (
|
||||
<Space.Compact key={field.key} style={{ display: 'flex', marginBottom: 8 }}>
|
||||
<Form.Item name={[field.name, 'system']} noStyle>
|
||||
<Select
|
||||
placeholder="all"
|
||||
allowClear
|
||||
style={{ width: 100 }}
|
||||
options={[
|
||||
{ value: 'linux', label: 'linux' },
|
||||
{ value: 'windows', label: 'windows' },
|
||||
{ value: 'darwin', label: 'darwin' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'type']} noStyle>
|
||||
<Select
|
||||
style={{ width: 80 }}
|
||||
options={[
|
||||
{ value: 'int', label: 'int' },
|
||||
{ value: 'str', label: 'str' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'level']} noStyle>
|
||||
<Input placeholder="level (6=TCP)" style={{ width: 100 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'opt']} noStyle>
|
||||
<Input placeholder="opt" style={{ width: 120 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name={[field.name, 'value']} noStyle>
|
||||
<Input placeholder="value" style={{ flex: 1 }} />
|
||||
</Form.Item>
|
||||
<Button danger onClick={() => remove(field.name)}>−</Button>
|
||||
</Space.Compact>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
|
|
@ -36,6 +36,12 @@ exports[`inbound security forms > TlsForm field structure is stable 1`] = `
|
|||
]
|
||||
`;
|
||||
|
||||
exports[`inbound transport forms > ExternalProxyForm field structure is stable (one TLS entry) 1`] = `
|
||||
[
|
||||
"External Proxy",
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`inbound transport forms > GrpcForm field structure is stable 1`] = `
|
||||
[
|
||||
"Service Name",
|
||||
|
|
@ -71,6 +77,36 @@ exports[`inbound transport forms > RawForm field structure is stable 1`] = `
|
|||
]
|
||||
`;
|
||||
|
||||
exports[`inbound transport forms > SockoptForm field structure is stable (enabled + happy eyeballs) 1`] = `
|
||||
[
|
||||
"Sockopt",
|
||||
"Route Mark",
|
||||
"TCP Keep Alive Interval",
|
||||
"TCP Keep Alive Idle",
|
||||
"TCP Max Seg",
|
||||
"TCP User Timeout",
|
||||
"TCP Window Clamp",
|
||||
"Proxy Protocol",
|
||||
"TCP Fast Open",
|
||||
"Multipath TCP",
|
||||
"Penetrate",
|
||||
"V6 Only",
|
||||
"Domain Strategy",
|
||||
"TCP Congestion",
|
||||
"TProxy",
|
||||
"Dialer Proxy",
|
||||
"Interface name",
|
||||
"Trusted X-Forwarded-For",
|
||||
"Address+port strategy",
|
||||
"Happy Eyeballs",
|
||||
"Try delay (ms)",
|
||||
"Prioritize IPv6",
|
||||
"Interleave",
|
||||
"Max concurrent try",
|
||||
"Custom sockopt",
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`inbound transport forms > WsForm field structure is stable 1`] = `
|
||||
[
|
||||
"Proxy Protocol",
|
||||
|
|
|
|||
|
|
@ -3,10 +3,12 @@ import { Form, type FormInstance } from 'antd';
|
|||
import type { ReactNode } from 'react';
|
||||
|
||||
import {
|
||||
ExternalProxyForm,
|
||||
GrpcForm,
|
||||
HttpUpgradeForm,
|
||||
KcpForm,
|
||||
RawForm,
|
||||
SockoptForm,
|
||||
WsForm,
|
||||
XhttpForm,
|
||||
} from '@/pages/inbounds/form/transport';
|
||||
|
|
@ -14,13 +16,22 @@ import { RealityForm, TlsForm } from '@/pages/inbounds/form/security';
|
|||
import type { InboundFormValues } from '@/schemas/forms/inbound-form';
|
||||
import { renderWithProviders, fieldLabels } from './test-utils';
|
||||
|
||||
function FormHarness({ children }: { children: (form: FormInstance<InboundFormValues>) => ReactNode }) {
|
||||
function FormHarness({
|
||||
children,
|
||||
initialValues,
|
||||
}: {
|
||||
children: (form: FormInstance<InboundFormValues>) => ReactNode;
|
||||
initialValues?: Record<string, unknown>;
|
||||
}) {
|
||||
const [form] = Form.useForm<InboundFormValues>();
|
||||
return <Form form={form}>{children(form)}</Form>;
|
||||
return <Form form={form} initialValues={initialValues}>{children(form)}</Form>;
|
||||
}
|
||||
|
||||
function renderInForm(node: (form: FormInstance<InboundFormValues>) => ReactNode) {
|
||||
return renderWithProviders(<FormHarness>{node}</FormHarness>);
|
||||
function renderInForm(
|
||||
node: (form: FormInstance<InboundFormValues>) => ReactNode,
|
||||
initialValues?: Record<string, unknown>,
|
||||
) {
|
||||
return renderWithProviders(<FormHarness initialValues={initialValues}>{node}</FormHarness>);
|
||||
}
|
||||
|
||||
const noop = () => {};
|
||||
|
|
@ -55,6 +66,34 @@ describe('inbound transport forms', () => {
|
|||
renderInForm((form) => <XhttpForm form={form} />);
|
||||
expect(fieldLabels()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('ExternalProxyForm field structure is stable (one TLS entry)', () => {
|
||||
renderInForm(
|
||||
() => <ExternalProxyForm toggleExternalProxy={noop} />,
|
||||
{
|
||||
streamSettings: {
|
||||
externalProxy: [{
|
||||
forceTls: 'tls',
|
||||
dest: '',
|
||||
port: 443,
|
||||
remark: '',
|
||||
sni: '',
|
||||
fingerprint: '',
|
||||
alpn: [],
|
||||
}],
|
||||
},
|
||||
},
|
||||
);
|
||||
expect(fieldLabels()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('SockoptForm field structure is stable (enabled + happy eyeballs)', () => {
|
||||
renderInForm(
|
||||
() => <SockoptForm toggleSockopt={noop} />,
|
||||
{ streamSettings: { sockopt: { happyEyeballs: {} } } },
|
||||
);
|
||||
expect(fieldLabels()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('inbound security forms', () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue