mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-06 21:24:10 +00:00
refactor(frontend): extract outbound sockopt/mux/hysteria transport blocks
Move the last three oversized inline stream blocks out of OutboundFormModal into presentational components under xray/outbounds/transport/: SockoptForm (~260 lines, the worst offender), MuxForm, and HysteriaForm. Each takes the form instance; MuxForm also takes protocol/network and keeps its isMuxAllowed gate. OutboundFormModal drops from 962 to 621 lines and no inline section now exceeds the 250-line guideline. Existing outbound-form-modal snapshots already cover sockopt/mux and stay byte-identical, confirming no behavior change.
This commit is contained in:
MHSanaei
parent
66348db37d
commit
2aec803181
5 changed files with 382 additions and 349 deletions
|
|
@ -1,7 +1,6 @@
|
|||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
|
|
@ -13,7 +12,7 @@ import {
|
|||
Tabs,
|
||||
message,
|
||||
} from 'antd';
|
||||
import { FinalMaskForm, HysteriaMasqueradeForm } from '@/lib/xray/forms/transport';
|
||||
import { FinalMaskForm } from '@/lib/xray/forms/transport';
|
||||
import { JsonEditor } from '@/components/form';
|
||||
import { Wireguard } from '@/utils';
|
||||
import {
|
||||
|
|
@ -26,15 +25,7 @@ import {
|
|||
OutboundFormBaseSchema,
|
||||
type OutboundFormValues,
|
||||
} from '@/schemas/forms/outbound-form';
|
||||
import {
|
||||
DOMAIN_STRATEGY_OPTION,
|
||||
SNIFFING_OPTION,
|
||||
TCP_CONGESTION_OPTION,
|
||||
} from '@/schemas/primitives';
|
||||
import {
|
||||
HappyEyeballsSchema,
|
||||
SockoptStreamSettingsSchema,
|
||||
} from '@/schemas/protocols/stream/sockopt';
|
||||
import { SNIFFING_OPTION } from '@/schemas/primitives';
|
||||
import {
|
||||
canEnableReality,
|
||||
canEnableStream,
|
||||
|
|
@ -44,7 +35,6 @@ import {
|
|||
import { antdRule } from '@/utils/zodForm';
|
||||
|
||||
import {
|
||||
ADDRESS_PORT_STRATEGY_OPTIONS,
|
||||
FLOW_OPTIONS,
|
||||
HYSTERIA_NETWORK_OPTION,
|
||||
NETWORK_OPTIONS,
|
||||
|
|
@ -54,7 +44,6 @@ import {
|
|||
import {
|
||||
buildAddModeValues,
|
||||
hysteriaStreamSlice,
|
||||
isMuxAllowed,
|
||||
newStreamSlice,
|
||||
} from './outbound-form-helpers';
|
||||
import {
|
||||
|
|
@ -74,8 +63,11 @@ import {
|
|||
import {
|
||||
GrpcForm,
|
||||
HttpUpgradeForm,
|
||||
HysteriaForm,
|
||||
KcpForm,
|
||||
MuxForm,
|
||||
RawForm,
|
||||
SockoptForm,
|
||||
WsForm,
|
||||
XhttpForm,
|
||||
} from './transport';
|
||||
|
|
@ -523,29 +515,7 @@ export default function OutboundFormModal({
|
|||
|
||||
{network === 'xhttp' && <XhttpForm form={form} onXmuxToggle={onXmuxToggle} />}
|
||||
|
||||
{network === 'hysteria' && (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.version')}
|
||||
name={['streamSettings', 'hysteriaSettings', 'version']}
|
||||
>
|
||||
<InputNumber min={2} max={2} disabled style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.authPassword')}
|
||||
name={['streamSettings', 'hysteriaSettings', 'auth']}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.udpIdleTimeout')}
|
||||
name={['streamSettings', 'hysteriaSettings', 'udpIdleTimeout']}
|
||||
>
|
||||
<InputNumber min={1} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<HysteriaMasqueradeForm form={form} />
|
||||
</>
|
||||
)}
|
||||
{network === 'hysteria' && <HysteriaForm form={form} />}
|
||||
</>
|
||||
)}
|
||||
|
||||
|
|
@ -605,270 +575,7 @@ export default function OutboundFormModal({
|
|||
|
||||
{security === 'reality' && realityAllowed && <RealityForm />}
|
||||
|
||||
{((streamAllowed && network) || !streamAllowed) && (
|
||||
<Form.Item shouldUpdate noStyle>
|
||||
{() => {
|
||||
const hasSockopt = !!form.getFieldValue([
|
||||
'streamSettings',
|
||||
'sockopt',
|
||||
]);
|
||||
return (
|
||||
<>
|
||||
<Form.Item label={t('pages.xray.outboundForm.sockopts')}>
|
||||
<Switch
|
||||
checked={hasSockopt}
|
||||
onChange={(checked) => {
|
||||
form.setFieldValue(
|
||||
['streamSettings', 'sockopt'],
|
||||
checked ? SockoptStreamSettingsSchema.parse({}) : undefined,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
{hasSockopt && (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.dialerProxy')}
|
||||
name={['streamSettings', 'sockopt', 'dialerProxy']}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.wireguard.domainStrategy')}
|
||||
name={['streamSettings', 'sockopt', 'domainStrategy']}
|
||||
>
|
||||
<Select
|
||||
options={Object.values(DOMAIN_STRATEGY_OPTION).map((v) => ({
|
||||
value: v,
|
||||
label: v,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.addressPortStrategy')}
|
||||
name={['streamSettings', 'sockopt', 'addressPortStrategy']}
|
||||
>
|
||||
<Select options={ADDRESS_PORT_STRATEGY_OPTIONS} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.keepAliveInterval')}
|
||||
name={['streamSettings', 'sockopt', 'tcpKeepAliveInterval']}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.tcpFastOpen')}
|
||||
name={['streamSettings', 'sockopt', 'tcpFastOpen']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.multipathTcp')}
|
||||
name={['streamSettings', 'sockopt', 'tcpMptcp']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.penetrate')}
|
||||
name={['streamSettings', 'sockopt', 'penetrate']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.markFwmark')}
|
||||
name={['streamSettings', 'sockopt', 'mark']}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.interface')}
|
||||
name={['streamSettings', 'sockopt', 'interfaceName']}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="TProxy"
|
||||
name={['streamSettings', 'sockopt', 'tproxy']}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ value: 'off', label: 'off' },
|
||||
{ value: 'redirect', label: 'redirect' },
|
||||
{ value: 'tproxy', label: 'tproxy' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.tcpCongestion')}
|
||||
name={['streamSettings', 'sockopt', 'tcpcongestion']}
|
||||
>
|
||||
<Select
|
||||
options={Object.values(TCP_CONGESTION_OPTION).map((v) => ({
|
||||
value: v,
|
||||
label: v,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.ipv6Only')}
|
||||
name={['streamSettings', 'sockopt', 'V6Only']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.acceptProxyProtocol')}
|
||||
name={['streamSettings', 'sockopt', 'acceptProxyProtocol']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.tcpUserTimeoutMs')}
|
||||
name={['streamSettings', 'sockopt', 'tcpUserTimeout']}
|
||||
>
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.tcpKeepAliveIdleS')}
|
||||
name={['streamSettings', 'sockopt', 'tcpKeepAliveIdle']}
|
||||
>
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.tcpMaxSeg')}
|
||||
name={['streamSettings', 'sockopt', 'tcpMaxSeg']}
|
||||
>
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.tcpWindowClamp')}
|
||||
name={['streamSettings', 'sockopt', 'tcpWindowClamp']}
|
||||
>
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.trustedXForwardedFor')}
|
||||
name={['streamSettings', 'sockopt', 'trustedXForwardedFor']}
|
||||
>
|
||||
<Select
|
||||
mode="tags"
|
||||
tokenSeparators={[',', ' ']}
|
||||
placeholder="trusted-proxy.example,10.0.0.0/8"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item shouldUpdate noStyle>
|
||||
{() => {
|
||||
const he = form.getFieldValue([
|
||||
'streamSettings', 'sockopt', 'happyEyeballs',
|
||||
]);
|
||||
const hasHe = he != null;
|
||||
return (
|
||||
<>
|
||||
<Form.Item label="Happy Eyeballs">
|
||||
<Switch
|
||||
checked={hasHe}
|
||||
onChange={(v) => {
|
||||
form.setFieldValue(
|
||||
['streamSettings', 'sockopt', 'happyEyeballs'],
|
||||
v ? HappyEyeballsSchema.parse({}) : undefined,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
{hasHe && (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.tryDelayMs')}
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'tryDelayMs']}
|
||||
>
|
||||
<InputNumber min={0} style={{ width: '100%' }} placeholder="0 (disabled) — 250 recommended" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.prioritizeIPv6')}
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'prioritizeIPv6']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.interleave')}
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'interleave']}
|
||||
>
|
||||
<InputNumber min={1} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.maxConcurrentTry')}
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'maxConcurrentTry']}
|
||||
>
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</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 (decimal)" 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>
|
||||
)}
|
||||
{((streamAllowed && network) || !streamAllowed) && <SockoptForm form={form} />}
|
||||
|
||||
<FinalMaskForm
|
||||
name={['streamSettings', 'finalmask']}
|
||||
|
|
@ -877,55 +584,7 @@ export default function OutboundFormModal({
|
|||
form={form}
|
||||
/>
|
||||
|
||||
{(() => {
|
||||
const flow = (form.getFieldValue(['settings', 'flow']) ?? '') as string;
|
||||
if (!isMuxAllowed(protocol, flow, network)) return null;
|
||||
return (
|
||||
<Form.Item shouldUpdate noStyle>
|
||||
{() => {
|
||||
const muxEnabled = !!form.getFieldValue(['mux', 'enabled']);
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t('pages.settings.mux')}
|
||||
name={['mux', 'enabled']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
{muxEnabled && (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t('pages.settings.subFormats.concurrency')}
|
||||
name={['mux', 'concurrency']}
|
||||
>
|
||||
<InputNumber min={-1} max={1024} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.settings.subFormats.xudpConcurrency')}
|
||||
name={['mux', 'xudpConcurrency']}
|
||||
>
|
||||
<InputNumber min={-1} max={1024} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.settings.subFormats.xudpUdp443')}
|
||||
name={['mux', 'xudpProxyUDP443']}
|
||||
>
|
||||
<Select
|
||||
options={['reject', 'allow', 'skip'].map((v) => ({
|
||||
value: v,
|
||||
label: v,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
);
|
||||
})()}
|
||||
<MuxForm form={form} protocol={protocol} network={network} />
|
||||
</>
|
||||
),
|
||||
},
|
||||
|
|
|
|||
32
frontend/src/pages/xray/outbounds/transport/hysteria.tsx
Normal file
32
frontend/src/pages/xray/outbounds/transport/hysteria.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { useTranslation } from 'react-i18next';
|
||||
import { Form, Input, InputNumber, type FormInstance } from 'antd';
|
||||
|
||||
import { HysteriaMasqueradeForm } from '@/lib/xray/forms/transport';
|
||||
import type { OutboundFormValues } from '@/schemas/forms/outbound-form';
|
||||
|
||||
export default function HysteriaForm({ form }: { form: FormInstance<OutboundFormValues> }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.version')}
|
||||
name={['streamSettings', 'hysteriaSettings', 'version']}
|
||||
>
|
||||
<InputNumber min={2} max={2} disabled style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.authPassword')}
|
||||
name={['streamSettings', 'hysteriaSettings', 'auth']}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.udpIdleTimeout')}
|
||||
name={['streamSettings', 'hysteriaSettings', 'udpIdleTimeout']}
|
||||
>
|
||||
<InputNumber min={1} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<HysteriaMasqueradeForm form={form} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,3 +4,6 @@ export { default as WsForm } from './ws';
|
|||
export { default as GrpcForm } from './grpc';
|
||||
export { default as HttpUpgradeForm } from './httpupgrade';
|
||||
export { default as XhttpForm } from './xhttp';
|
||||
export { default as HysteriaForm } from './hysteria';
|
||||
export { default as SockoptForm } from './sockopt';
|
||||
export { default as MuxForm } from './mux';
|
||||
|
|
|
|||
63
frontend/src/pages/xray/outbounds/transport/mux.tsx
Normal file
63
frontend/src/pages/xray/outbounds/transport/mux.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import { useTranslation } from 'react-i18next';
|
||||
import { Form, InputNumber, Select, Switch, type FormInstance } from 'antd';
|
||||
|
||||
import type { OutboundFormValues } from '@/schemas/forms/outbound-form';
|
||||
|
||||
import { isMuxAllowed } from '../outbound-form-helpers';
|
||||
|
||||
interface MuxFormProps {
|
||||
form: FormInstance<OutboundFormValues>;
|
||||
protocol: string;
|
||||
network: string;
|
||||
}
|
||||
|
||||
export default function MuxForm({ form, protocol, network }: MuxFormProps) {
|
||||
const { t } = useTranslation();
|
||||
const flow = (form.getFieldValue(['settings', 'flow']) ?? '') as string;
|
||||
if (!isMuxAllowed(protocol, flow, network)) return null;
|
||||
return (
|
||||
<Form.Item shouldUpdate noStyle>
|
||||
{() => {
|
||||
const muxEnabled = !!form.getFieldValue(['mux', 'enabled']);
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t('pages.settings.mux')}
|
||||
name={['mux', 'enabled']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
{muxEnabled && (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t('pages.settings.subFormats.concurrency')}
|
||||
name={['mux', 'concurrency']}
|
||||
>
|
||||
<InputNumber min={-1} max={1024} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.settings.subFormats.xudpConcurrency')}
|
||||
name={['mux', 'xudpConcurrency']}
|
||||
>
|
||||
<InputNumber min={-1} max={1024} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.settings.subFormats.xudpUdp443')}
|
||||
name={['mux', 'xudpProxyUDP443']}
|
||||
>
|
||||
<Select
|
||||
options={['reject', 'allow', 'skip'].map((v) => ({
|
||||
value: v,
|
||||
label: v,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
276
frontend/src/pages/xray/outbounds/transport/sockopt.tsx
Normal file
276
frontend/src/pages/xray/outbounds/transport/sockopt.tsx
Normal file
|
|
@ -0,0 +1,276 @@
|
|||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Form, Input, InputNumber, Select, Space, Switch, type FormInstance } from 'antd';
|
||||
|
||||
import { DOMAIN_STRATEGY_OPTION, TCP_CONGESTION_OPTION } from '@/schemas/primitives';
|
||||
import { HappyEyeballsSchema, SockoptStreamSettingsSchema } from '@/schemas/protocols/stream/sockopt';
|
||||
import type { OutboundFormValues } from '@/schemas/forms/outbound-form';
|
||||
|
||||
import { ADDRESS_PORT_STRATEGY_OPTIONS } from '../outbound-form-constants';
|
||||
|
||||
export default function SockoptForm({ form }: { form: FormInstance<OutboundFormValues> }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Form.Item shouldUpdate noStyle>
|
||||
{() => {
|
||||
const hasSockopt = !!form.getFieldValue([
|
||||
'streamSettings',
|
||||
'sockopt',
|
||||
]);
|
||||
return (
|
||||
<>
|
||||
<Form.Item label={t('pages.xray.outboundForm.sockopts')}>
|
||||
<Switch
|
||||
checked={hasSockopt}
|
||||
onChange={(checked) => {
|
||||
form.setFieldValue(
|
||||
['streamSettings', 'sockopt'],
|
||||
checked ? SockoptStreamSettingsSchema.parse({}) : undefined,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
{hasSockopt && (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.dialerProxy')}
|
||||
name={['streamSettings', 'sockopt', 'dialerProxy']}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.wireguard.domainStrategy')}
|
||||
name={['streamSettings', 'sockopt', 'domainStrategy']}
|
||||
>
|
||||
<Select
|
||||
options={Object.values(DOMAIN_STRATEGY_OPTION).map((v) => ({
|
||||
value: v,
|
||||
label: v,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.addressPortStrategy')}
|
||||
name={['streamSettings', 'sockopt', 'addressPortStrategy']}
|
||||
>
|
||||
<Select options={ADDRESS_PORT_STRATEGY_OPTIONS} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.keepAliveInterval')}
|
||||
name={['streamSettings', 'sockopt', 'tcpKeepAliveInterval']}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.tcpFastOpen')}
|
||||
name={['streamSettings', 'sockopt', 'tcpFastOpen']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.multipathTcp')}
|
||||
name={['streamSettings', 'sockopt', 'tcpMptcp']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.penetrate')}
|
||||
name={['streamSettings', 'sockopt', 'penetrate']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.markFwmark')}
|
||||
name={['streamSettings', 'sockopt', 'mark']}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.interface')}
|
||||
name={['streamSettings', 'sockopt', 'interfaceName']}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="TProxy"
|
||||
name={['streamSettings', 'sockopt', 'tproxy']}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ value: 'off', label: 'off' },
|
||||
{ value: 'redirect', label: 'redirect' },
|
||||
{ value: 'tproxy', label: 'tproxy' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.tcpCongestion')}
|
||||
name={['streamSettings', 'sockopt', 'tcpcongestion']}
|
||||
>
|
||||
<Select
|
||||
options={Object.values(TCP_CONGESTION_OPTION).map((v) => ({
|
||||
value: v,
|
||||
label: v,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.ipv6Only')}
|
||||
name={['streamSettings', 'sockopt', 'V6Only']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.acceptProxyProtocol')}
|
||||
name={['streamSettings', 'sockopt', 'acceptProxyProtocol']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.tcpUserTimeoutMs')}
|
||||
name={['streamSettings', 'sockopt', 'tcpUserTimeout']}
|
||||
>
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.xray.outboundForm.tcpKeepAliveIdleS')}
|
||||
name={['streamSettings', 'sockopt', 'tcpKeepAliveIdle']}
|
||||
>
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.tcpMaxSeg')}
|
||||
name={['streamSettings', 'sockopt', 'tcpMaxSeg']}
|
||||
>
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.tcpWindowClamp')}
|
||||
name={['streamSettings', 'sockopt', 'tcpWindowClamp']}
|
||||
>
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.trustedXForwardedFor')}
|
||||
name={['streamSettings', 'sockopt', 'trustedXForwardedFor']}
|
||||
>
|
||||
<Select
|
||||
mode="tags"
|
||||
tokenSeparators={[',', ' ']}
|
||||
placeholder="trusted-proxy.example,10.0.0.0/8"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item shouldUpdate noStyle>
|
||||
{() => {
|
||||
const he = form.getFieldValue([
|
||||
'streamSettings', 'sockopt', 'happyEyeballs',
|
||||
]);
|
||||
const hasHe = he != null;
|
||||
return (
|
||||
<>
|
||||
<Form.Item label="Happy Eyeballs">
|
||||
<Switch
|
||||
checked={hasHe}
|
||||
onChange={(v) => {
|
||||
form.setFieldValue(
|
||||
['streamSettings', 'sockopt', 'happyEyeballs'],
|
||||
v ? HappyEyeballsSchema.parse({}) : undefined,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
{hasHe && (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.tryDelayMs')}
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'tryDelayMs']}
|
||||
>
|
||||
<InputNumber min={0} style={{ width: '100%' }} placeholder="0 (disabled) — 250 recommended" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.prioritizeIPv6')}
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'prioritizeIPv6']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.interleave')}
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'interleave']}
|
||||
>
|
||||
<InputNumber min={1} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.form.maxConcurrentTry')}
|
||||
name={['streamSettings', 'sockopt', 'happyEyeballs', 'maxConcurrentTry']}
|
||||
>
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</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 (decimal)" 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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue