mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-06 13:14:11 +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 { useEffect, useMemo, useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import {
|
import {
|
||||||
Button,
|
|
||||||
Form,
|
Form,
|
||||||
Input,
|
Input,
|
||||||
InputNumber,
|
InputNumber,
|
||||||
|
|
@ -13,7 +12,7 @@ import {
|
||||||
Tabs,
|
Tabs,
|
||||||
message,
|
message,
|
||||||
} from 'antd';
|
} from 'antd';
|
||||||
import { FinalMaskForm, HysteriaMasqueradeForm } from '@/lib/xray/forms/transport';
|
import { FinalMaskForm } from '@/lib/xray/forms/transport';
|
||||||
import { JsonEditor } from '@/components/form';
|
import { JsonEditor } from '@/components/form';
|
||||||
import { Wireguard } from '@/utils';
|
import { Wireguard } from '@/utils';
|
||||||
import {
|
import {
|
||||||
|
|
@ -26,15 +25,7 @@ import {
|
||||||
OutboundFormBaseSchema,
|
OutboundFormBaseSchema,
|
||||||
type OutboundFormValues,
|
type OutboundFormValues,
|
||||||
} from '@/schemas/forms/outbound-form';
|
} from '@/schemas/forms/outbound-form';
|
||||||
import {
|
import { SNIFFING_OPTION } from '@/schemas/primitives';
|
||||||
DOMAIN_STRATEGY_OPTION,
|
|
||||||
SNIFFING_OPTION,
|
|
||||||
TCP_CONGESTION_OPTION,
|
|
||||||
} from '@/schemas/primitives';
|
|
||||||
import {
|
|
||||||
HappyEyeballsSchema,
|
|
||||||
SockoptStreamSettingsSchema,
|
|
||||||
} from '@/schemas/protocols/stream/sockopt';
|
|
||||||
import {
|
import {
|
||||||
canEnableReality,
|
canEnableReality,
|
||||||
canEnableStream,
|
canEnableStream,
|
||||||
|
|
@ -44,7 +35,6 @@ import {
|
||||||
import { antdRule } from '@/utils/zodForm';
|
import { antdRule } from '@/utils/zodForm';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
ADDRESS_PORT_STRATEGY_OPTIONS,
|
|
||||||
FLOW_OPTIONS,
|
FLOW_OPTIONS,
|
||||||
HYSTERIA_NETWORK_OPTION,
|
HYSTERIA_NETWORK_OPTION,
|
||||||
NETWORK_OPTIONS,
|
NETWORK_OPTIONS,
|
||||||
|
|
@ -54,7 +44,6 @@ import {
|
||||||
import {
|
import {
|
||||||
buildAddModeValues,
|
buildAddModeValues,
|
||||||
hysteriaStreamSlice,
|
hysteriaStreamSlice,
|
||||||
isMuxAllowed,
|
|
||||||
newStreamSlice,
|
newStreamSlice,
|
||||||
} from './outbound-form-helpers';
|
} from './outbound-form-helpers';
|
||||||
import {
|
import {
|
||||||
|
|
@ -74,8 +63,11 @@ import {
|
||||||
import {
|
import {
|
||||||
GrpcForm,
|
GrpcForm,
|
||||||
HttpUpgradeForm,
|
HttpUpgradeForm,
|
||||||
|
HysteriaForm,
|
||||||
KcpForm,
|
KcpForm,
|
||||||
|
MuxForm,
|
||||||
RawForm,
|
RawForm,
|
||||||
|
SockoptForm,
|
||||||
WsForm,
|
WsForm,
|
||||||
XhttpForm,
|
XhttpForm,
|
||||||
} from './transport';
|
} from './transport';
|
||||||
|
|
@ -523,29 +515,7 @@ export default function OutboundFormModal({
|
||||||
|
|
||||||
{network === 'xhttp' && <XhttpForm form={form} onXmuxToggle={onXmuxToggle} />}
|
{network === 'xhttp' && <XhttpForm form={form} onXmuxToggle={onXmuxToggle} />}
|
||||||
|
|
||||||
{network === 'hysteria' && (
|
{network === 'hysteria' && <HysteriaForm form={form} />}
|
||||||
<>
|
|
||||||
<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} />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
@ -605,270 +575,7 @@ export default function OutboundFormModal({
|
||||||
|
|
||||||
{security === 'reality' && realityAllowed && <RealityForm />}
|
{security === 'reality' && realityAllowed && <RealityForm />}
|
||||||
|
|
||||||
{((streamAllowed && network) || !streamAllowed) && (
|
{((streamAllowed && network) || !streamAllowed) && <SockoptForm form={form} />}
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<FinalMaskForm
|
<FinalMaskForm
|
||||||
name={['streamSettings', 'finalmask']}
|
name={['streamSettings', 'finalmask']}
|
||||||
|
|
@ -877,55 +584,7 @@ export default function OutboundFormModal({
|
||||||
form={form}
|
form={form}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{(() => {
|
<MuxForm form={form} protocol={protocol} network={network} />
|
||||||
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>
|
|
||||||
);
|
|
||||||
})()}
|
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
|
|
||||||
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 GrpcForm } from './grpc';
|
||||||
export { default as HttpUpgradeForm } from './httpupgrade';
|
export { default as HttpUpgradeForm } from './httpupgrade';
|
||||||
export { default as XhttpForm } from './xhttp';
|
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