mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-05 20:54:14 +00:00
66348db37d
Move the inbound TLS and Reality stream-security blocks out of InboundFormModal into presentational components under inbounds/form/security/. The Radio.Group security selector stays in the modal; TlsForm and RealityForm receive their cert/key/ECH generation handlers and the saving flag as props. InboundFormModal drops from 2105 to 1708 lines. Add inbound-form-blocks.test.tsx: render-snapshot coverage for each extracted transport (raw/ws/grpc/kcp/httpupgrade/xhttp) and security (tls/reality) component in isolation inside a minimal Form. The full modal cannot exercise the stream/security tabs in jsdom because they are gated behind Form.useWatch values that do not propagate in the test harness, so component-level snapshots are the regression net for these blocks. No behavior change.
1708 lines
65 KiB
TypeScript
1708 lines
65 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import dayjs from 'dayjs';
|
||
import {
|
||
Button,
|
||
Card,
|
||
Checkbox,
|
||
Empty,
|
||
Form,
|
||
Input,
|
||
InputNumber,
|
||
Modal,
|
||
Radio,
|
||
Select,
|
||
Space,
|
||
Switch,
|
||
Tabs,
|
||
Tooltip,
|
||
message,
|
||
} from 'antd';
|
||
import {
|
||
ArrowDownOutlined,
|
||
ArrowUpOutlined,
|
||
DeleteOutlined,
|
||
MinusOutlined,
|
||
PlusOutlined,
|
||
} from '@ant-design/icons';
|
||
|
||
import { HttpUtil, NumberFormatter, RandomUtil, SizeFormatter, Wireguard } from '@/utils';
|
||
import {
|
||
rawInboundToFormValues,
|
||
formValuesToWirePayload,
|
||
} from '@/lib/xray/inbound-form-adapter';
|
||
import { createDefaultInboundSettings } from '@/lib/xray/inbound-defaults';
|
||
import {
|
||
canEnableReality,
|
||
canEnableStream,
|
||
canEnableTls,
|
||
isSS2022,
|
||
} from '@/lib/xray/protocol-capabilities';
|
||
import { getRandomRealityTarget } from '@/models/reality-targets';
|
||
import {
|
||
InboundFormBaseSchema,
|
||
InboundFormSchema,
|
||
type FallbackRow,
|
||
type InboundFormValues,
|
||
} 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 { HysteriaStreamSettingsSchema } from '@/schemas/protocols/stream/hysteria';
|
||
import { TlsStreamSettingsSchema } from '@/schemas/protocols/security/tls';
|
||
import { RealityStreamSettingsSchema } from '@/schemas/protocols/security/reality';
|
||
import { SniffingSchema } from '@/schemas/primitives/sniffing';
|
||
import { TcpStreamSettingsSchema } from '@/schemas/protocols/stream/tcp';
|
||
import { KcpStreamSettingsSchema } from '@/schemas/protocols/stream/kcp';
|
||
import { WsStreamSettingsSchema } from '@/schemas/protocols/stream/ws';
|
||
import { GrpcStreamSettingsSchema } from '@/schemas/protocols/stream/grpc';
|
||
import { HttpUpgradeStreamSettingsSchema } from '@/schemas/protocols/stream/httpupgrade';
|
||
import { XHttpStreamSettingsSchema } from '@/schemas/protocols/stream/xhttp';
|
||
import { DateTimePicker } from '@/components/form';
|
||
import { FinalMaskForm } from '@/lib/xray/forms/transport';
|
||
import { InputAddon } from '@/components/ui';
|
||
import './InboundFormModal.css';
|
||
|
||
import { AdvancedAllEditor, AdvancedSliceEditor } from './advanced-editors';
|
||
import {
|
||
HttpFields,
|
||
HysteriaFields,
|
||
MixedFields,
|
||
ShadowsocksFields,
|
||
TunFields,
|
||
TunnelFields,
|
||
VlessFields,
|
||
WireguardFields,
|
||
} from './protocols';
|
||
import {
|
||
GrpcForm,
|
||
HttpUpgradeForm,
|
||
KcpForm,
|
||
RawForm,
|
||
WsForm,
|
||
XhttpForm,
|
||
} from './transport';
|
||
import { RealityForm, TlsForm } from './security';
|
||
|
||
import { coerceInboundJsonField, type DBInbound } from '@/models/dbinbound';
|
||
import type { NodeRecord } from '@/api/queries/useNodesQuery';
|
||
|
||
// Pattern A rewrite of InboundFormModal. Built as a sibling file so the
|
||
// build stays green while the rewrite progresses section by section.
|
||
// InboundsPage continues to render the old InboundFormModal.tsx until the
|
||
// atomic swap at the end (Core Decision 7).
|
||
|
||
|
||
const PROTOCOL_OPTIONS = Object.values(Protocols).map((p) => ({ value: p, label: p }));
|
||
const TRAFFIC_RESETS = ['never', 'hourly', 'daily', 'weekly', 'monthly'] as const;
|
||
const NODE_ELIGIBLE_PROTOCOLS = new Set<string>([
|
||
Protocols.VLESS,
|
||
Protocols.VMESS,
|
||
Protocols.TROJAN,
|
||
Protocols.SHADOWSOCKS,
|
||
Protocols.HYSTERIA,
|
||
Protocols.WIREGUARD,
|
||
]);
|
||
|
||
interface InboundFormModalProps {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
onSaved: () => void;
|
||
mode: 'add' | 'edit';
|
||
dbInbound: DBInbound | null;
|
||
dbInbounds: DBInbound[];
|
||
availableNodes?: NodeRecord[];
|
||
}
|
||
|
||
function buildAddModeValues(): InboundFormValues {
|
||
const settings = createDefaultInboundSettings('vless') ?? undefined;
|
||
return rawInboundToFormValues({
|
||
protocol: 'vless',
|
||
settings,
|
||
streamSettings: {
|
||
network: 'tcp',
|
||
security: 'none',
|
||
tcpSettings: TcpStreamSettingsSchema.parse({ header: { type: 'none' } }),
|
||
},
|
||
sniffing: SniffingSchema.parse({}),
|
||
port: RandomUtil.randomInteger(10000, 60000),
|
||
listen: '',
|
||
tag: '',
|
||
enable: true,
|
||
trafficReset: 'never',
|
||
});
|
||
}
|
||
|
||
export default function InboundFormModal({
|
||
open,
|
||
onClose,
|
||
onSaved,
|
||
mode,
|
||
dbInbound,
|
||
dbInbounds,
|
||
availableNodes,
|
||
}: InboundFormModalProps) {
|
||
const { t } = useTranslation();
|
||
const [messageApi, messageContextHolder] = message.useMessage();
|
||
const [form] = Form.useForm<InboundFormValues>();
|
||
const [saving, setSaving] = useState(false);
|
||
const fallbackKeyRef = useRef(0);
|
||
const [fallbacks, setFallbacks] = useState<FallbackRow[]>([]);
|
||
|
||
const selectableNodes = (availableNodes || []).filter((n) => n.enable);
|
||
const protocol = (Form.useWatch('protocol', form) ?? '') as string;
|
||
const isNodeEligible = NODE_ELIGIBLE_PROTOCOLS.has(protocol);
|
||
const sniffingEnabled = Form.useWatch(['sniffing', 'enabled'], form) ?? false;
|
||
const vlessEncryption = Form.useWatch(['settings', 'encryption'], form) ?? '';
|
||
const ssMethod = Form.useWatch(['settings', 'method'], form);
|
||
const isSSWith2022 = isSS2022({
|
||
protocol,
|
||
settings: typeof ssMethod === 'string' ? { method: ssMethod } : {},
|
||
});
|
||
const mixedUdpOn = Form.useWatch(['settings', 'udp'], form) ?? false;
|
||
const network = Form.useWatch(['streamSettings', 'network'], form) ?? '';
|
||
const security = Form.useWatch(['streamSettings', 'security'], form) ?? 'none';
|
||
const streamEnabled = canEnableStream({ protocol });
|
||
const isFallbackHost =
|
||
(protocol === Protocols.VLESS || protocol === Protocols.TROJAN)
|
||
&& network === 'tcp'
|
||
&& (security === 'tls' || security === 'reality');
|
||
|
||
const fallbackChildOptions = (dbInbounds || [])
|
||
.filter((ib) => ib.id !== dbInbound?.id)
|
||
.map((ib) => ({
|
||
label: `${ib.remark || `#${ib.id}`} · ${ib.protocol}:${ib.port}`,
|
||
value: ib.id,
|
||
}));
|
||
|
||
const loadFallbacks = async (masterId: number | null) => {
|
||
if (!masterId) {
|
||
setFallbacks([]);
|
||
return;
|
||
}
|
||
const msg = await HttpUtil.get(`/panel/api/inbounds/${masterId}/fallbacks`);
|
||
if (!msg?.success || !Array.isArray(msg.obj)) {
|
||
setFallbacks([]);
|
||
return;
|
||
}
|
||
setFallbacks(
|
||
(msg.obj as {
|
||
childId: number;
|
||
name?: string;
|
||
alpn?: string;
|
||
path?: string;
|
||
dest?: string;
|
||
xver?: number;
|
||
}[])
|
||
.map((r) => ({
|
||
rowKey: `fb-${++fallbackKeyRef.current}`,
|
||
childId: r.childId,
|
||
name: r.name || '',
|
||
alpn: r.alpn || '',
|
||
path: r.path || '',
|
||
dest: r.dest || '',
|
||
xver: r.xver || 0,
|
||
})),
|
||
);
|
||
};
|
||
|
||
const saveFallbacks = async (masterId: number) => {
|
||
if (!masterId) return true;
|
||
const payload = {
|
||
fallbacks: fallbacks.filter((c) => c.childId).map((c, i) => ({
|
||
childId: c.childId,
|
||
name: c.name,
|
||
alpn: c.alpn,
|
||
path: c.path,
|
||
dest: c.dest,
|
||
xver: Number(c.xver) || 0,
|
||
sortOrder: i,
|
||
})),
|
||
};
|
||
const msg = await HttpUtil.post(
|
||
`/panel/api/inbounds/${masterId}/fallbacks`,
|
||
payload,
|
||
{ headers: { 'Content-Type': 'application/json' } },
|
||
);
|
||
return !!msg?.success;
|
||
};
|
||
|
||
// Derive a fallback row's SNI / ALPN / Path / xver from a child
|
||
// inbound's streamSettings — what the legacy panel auto-filled when an
|
||
// operator wired a fallback target. SNI/ALPN come straight off the
|
||
// child's TLS block; path depends on the child's transport (ws/grpc
|
||
// /httpupgrade carry an explicit path; tcp/kcp/xhttp have no path of
|
||
// their own). xver stays 0 unless the child explicitly opts in via
|
||
// PROXY-protocol sockopt.
|
||
const deriveFallbackDefaults = (childId: number): Partial<FallbackRow> => {
|
||
const child = (dbInbounds || []).find((ib) => ib.id === childId);
|
||
if (!child) return {};
|
||
const stream = coerceInboundJsonField(child.streamSettings);
|
||
const tls = (stream.tlsSettings as Record<string, unknown> | undefined) ?? {};
|
||
const network = typeof stream.network === 'string' ? stream.network : '';
|
||
const sni = typeof tls.serverName === 'string' ? tls.serverName : '';
|
||
const alpnArr = Array.isArray(tls.alpn) ? tls.alpn : [];
|
||
const alpn = alpnArr.filter((v) => typeof v === 'string').join(',');
|
||
let path = '';
|
||
if (network === 'ws') {
|
||
const ws = (stream.wsSettings as Record<string, unknown> | undefined) ?? {};
|
||
if (typeof ws.path === 'string') path = ws.path;
|
||
} else if (network === 'grpc') {
|
||
const grpc = (stream.grpcSettings as Record<string, unknown> | undefined) ?? {};
|
||
if (typeof grpc.serviceName === 'string') path = grpc.serviceName;
|
||
} else if (network === 'httpupgrade') {
|
||
const hu = (stream.httpupgradeSettings as Record<string, unknown> | undefined) ?? {};
|
||
if (typeof hu.path === 'string') path = hu.path;
|
||
} else if (network === 'xhttp') {
|
||
const xh = (stream.xhttpSettings as Record<string, unknown> | undefined) ?? {};
|
||
if (typeof xh.path === 'string') path = xh.path;
|
||
}
|
||
return { name: sni, alpn, path, xver: 0 };
|
||
};
|
||
|
||
const addFallback = () => {
|
||
setFallbacks((prev) => [...prev, {
|
||
rowKey: `fb-${++fallbackKeyRef.current}`,
|
||
childId: null,
|
||
name: '',
|
||
alpn: '',
|
||
path: '',
|
||
dest: '',
|
||
xver: 0,
|
||
}]);
|
||
};
|
||
|
||
const updateFallback = (rowKey: string, patch: Partial<FallbackRow>) => {
|
||
setFallbacks((prev) => prev.map((r) => {
|
||
if (r.rowKey !== rowKey) return r;
|
||
// When the picker selects a new child inbound and the row hasn't
|
||
// been hand-edited yet (sni/alpn/path/dest all blank, xver = 0),
|
||
// pull the SNI/ALPN/Path defaults off that child. Operators who
|
||
// intentionally typed values keep them — we only fill the empties.
|
||
if (typeof patch.childId === 'number' && patch.childId !== r.childId) {
|
||
const isPristine = !r.name && !r.alpn && !r.path && !r.dest && r.xver === 0;
|
||
if (isPristine) return { ...r, ...patch, ...deriveFallbackDefaults(patch.childId) };
|
||
}
|
||
return { ...r, ...patch };
|
||
}));
|
||
};
|
||
|
||
const removeFallback = (idx: number) => {
|
||
setFallbacks((prev) => prev.filter((_, i) => i !== idx));
|
||
};
|
||
|
||
// Move a fallback row up/down by swapping adjacent indices. The order
|
||
// is persisted via the fallback row's sortOrder (rebuilt by index on
|
||
// save), so reordering survives reloads.
|
||
const moveFallback = (idx: number, direction: -1 | 1) => {
|
||
setFallbacks((prev) => {
|
||
const target = idx + direction;
|
||
if (target < 0 || target >= prev.length) return prev;
|
||
const next = prev.slice();
|
||
[next[idx], next[target]] = [next[target], next[idx]];
|
||
return next;
|
||
});
|
||
};
|
||
|
||
// One-shot: add a fresh fallback row for every eligible inbound (i.e.
|
||
// every option in fallbackChildOptions) that is not already wired up.
|
||
// Convenient for operators who want catch-all routing to every host
|
||
// they manage on the panel.
|
||
const addAllFallbacks = () => {
|
||
setFallbacks((prev) => {
|
||
const alreadyHave = new Set(prev.map((r) => r.childId));
|
||
const additions = fallbackChildOptions
|
||
.filter((opt) => !alreadyHave.has(opt.value))
|
||
.map<FallbackRow>((opt) => {
|
||
const derived = deriveFallbackDefaults(opt.value);
|
||
return {
|
||
rowKey: `fb-${++fallbackKeyRef.current}`,
|
||
childId: opt.value,
|
||
name: derived.name ?? '',
|
||
alpn: derived.alpn ?? '',
|
||
path: derived.path ?? '',
|
||
dest: '',
|
||
xver: derived.xver ?? 0,
|
||
};
|
||
});
|
||
if (additions.length === 0) return prev;
|
||
return [...prev, ...additions];
|
||
});
|
||
};
|
||
|
||
const genRealityKeypair = async () => {
|
||
setSaving(true);
|
||
try {
|
||
const msg = await HttpUtil.get('/panel/api/server/getNewX25519Cert');
|
||
if (msg?.success) {
|
||
const obj = msg.obj as { privateKey: string; publicKey: string };
|
||
form.setFieldValue(['streamSettings', 'realitySettings', 'privateKey'], obj.privateKey);
|
||
form.setFieldValue(['streamSettings', 'realitySettings', 'settings', 'publicKey'], obj.publicKey);
|
||
}
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const clearRealityKeypair = () => {
|
||
form.setFieldValue(['streamSettings', 'realitySettings', 'privateKey'], '');
|
||
form.setFieldValue(['streamSettings', 'realitySettings', 'settings', 'publicKey'], '');
|
||
};
|
||
|
||
const genMldsa65 = async () => {
|
||
setSaving(true);
|
||
try {
|
||
const msg = await HttpUtil.get('/panel/api/server/getNewmldsa65');
|
||
if (msg?.success) {
|
||
const obj = msg.obj as { seed: string; verify: string };
|
||
form.setFieldValue(['streamSettings', 'realitySettings', 'mldsa65Seed'], obj.seed);
|
||
form.setFieldValue(['streamSettings', 'realitySettings', 'settings', 'mldsa65Verify'], obj.verify);
|
||
}
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const clearMldsa65 = () => {
|
||
form.setFieldValue(['streamSettings', 'realitySettings', 'mldsa65Seed'], '');
|
||
form.setFieldValue(['streamSettings', 'realitySettings', 'settings', 'mldsa65Verify'], '');
|
||
};
|
||
|
||
const randomizeRealityTarget = () => {
|
||
const tgt = getRandomRealityTarget() as { target: string; sni: string };
|
||
form.setFieldValue(['streamSettings', 'realitySettings', 'target'], tgt.target);
|
||
form.setFieldValue(
|
||
['streamSettings', 'realitySettings', 'serverNames'],
|
||
tgt.sni.split(',').map((s) => s.trim()).filter(Boolean),
|
||
);
|
||
};
|
||
|
||
const randomizeShortIds = () => {
|
||
form.setFieldValue(
|
||
['streamSettings', 'realitySettings', 'shortIds'],
|
||
RandomUtil.randomShortIds().split(',').map((s) => s.trim()).filter(Boolean),
|
||
);
|
||
};
|
||
|
||
const getNewEchCert = async () => {
|
||
const sni = form.getFieldValue(['streamSettings', 'tlsSettings', 'serverName']);
|
||
setSaving(true);
|
||
try {
|
||
const msg = await HttpUtil.post('/panel/api/server/getNewEchCert', { sni });
|
||
if (msg?.success) {
|
||
const obj = msg.obj as { echServerKeys: string; echConfigList: string };
|
||
form.setFieldValue(['streamSettings', 'tlsSettings', 'echServerKeys'], obj.echServerKeys);
|
||
form.setFieldValue(['streamSettings', 'tlsSettings', 'settings', 'echConfigList'], obj.echConfigList);
|
||
}
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const clearEchCert = () => {
|
||
form.setFieldValue(['streamSettings', 'tlsSettings', 'echServerKeys'], '');
|
||
form.setFieldValue(['streamSettings', 'tlsSettings', 'settings', 'echConfigList'], '');
|
||
};
|
||
|
||
const generateRandomPinHash = () => {
|
||
const bytes = new Uint8Array(32);
|
||
crypto.getRandomValues(bytes);
|
||
let binary = '';
|
||
for (const b of bytes) binary += String.fromCharCode(b);
|
||
const hash = btoa(binary);
|
||
const current = (form.getFieldValue(
|
||
['streamSettings', 'tlsSettings', 'settings', 'pinnedPeerCertSha256'],
|
||
) as string[] | undefined) ?? [];
|
||
form.setFieldValue(
|
||
['streamSettings', 'tlsSettings', 'settings', 'pinnedPeerCertSha256'],
|
||
[...current, hash],
|
||
);
|
||
};
|
||
|
||
const setCertFromPanel = async (certName: number) => {
|
||
setSaving(true);
|
||
try {
|
||
const msg = await HttpUtil.post('/panel/setting/all', undefined, { silent: true });
|
||
if (msg?.success) {
|
||
const obj = msg.obj as { webCertFile?: string; webKeyFile?: string };
|
||
if (!obj.webCertFile && !obj.webKeyFile) {
|
||
messageApi.warning(t('pages.inbounds.setDefaultCertEmpty'));
|
||
return;
|
||
}
|
||
form.setFieldValue(
|
||
['streamSettings', 'tlsSettings', 'certificates', certName, 'certificateFile'],
|
||
obj.webCertFile ?? '',
|
||
);
|
||
form.setFieldValue(
|
||
['streamSettings', 'tlsSettings', 'certificates', certName, 'keyFile'],
|
||
obj.webKeyFile ?? '',
|
||
);
|
||
}
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const clearCertFiles = (certName: number) => {
|
||
form.setFieldValue(
|
||
['streamSettings', 'tlsSettings', 'certificates', certName, 'certificateFile'],
|
||
'',
|
||
);
|
||
form.setFieldValue(
|
||
['streamSettings', 'tlsSettings', 'certificates', certName, 'keyFile'],
|
||
'',
|
||
);
|
||
};
|
||
|
||
const onSecurityChange = async (next: string) => {
|
||
const current = (form.getFieldValue('streamSettings') as Record<string, unknown>) ?? {};
|
||
const cleaned: Record<string, unknown> = { ...current, security: next };
|
||
delete cleaned.tlsSettings;
|
||
delete cleaned.realitySettings;
|
||
if (next === 'tls') {
|
||
const tls = TlsStreamSettingsSchema.parse({}) as Record<string, unknown>;
|
||
tls.certificates = [{
|
||
useFile: true,
|
||
certificateFile: '',
|
||
keyFile: '',
|
||
certificate: [],
|
||
key: [],
|
||
oneTimeLoading: false,
|
||
usage: 'encipherment',
|
||
buildChain: false,
|
||
}];
|
||
cleaned.tlsSettings = tls;
|
||
}
|
||
if (next === 'reality') {
|
||
const reality = RealityStreamSettingsSchema.parse({}) as Record<string, unknown>;
|
||
const tgt = getRandomRealityTarget() as { target: string; sni: string };
|
||
reality.target = tgt.target;
|
||
reality.serverNames = tgt.sni.split(',').map((s) => s.trim()).filter(Boolean);
|
||
reality.shortIds = RandomUtil.randomShortIds().split(',').map((s) => s.trim()).filter(Boolean);
|
||
cleaned.realitySettings = reality;
|
||
}
|
||
form.setFieldValue('streamSettings', cleaned);
|
||
if (next === 'reality') {
|
||
try {
|
||
const msg = await HttpUtil.get('/panel/api/server/getNewX25519Cert');
|
||
if (msg?.success) {
|
||
const obj = msg.obj as { privateKey: string; publicKey: string };
|
||
form.setFieldValue(['streamSettings', 'realitySettings', 'privateKey'], obj.privateKey);
|
||
form.setFieldValue(['streamSettings', 'realitySettings', 'settings', 'publicKey'], obj.publicKey);
|
||
}
|
||
} catch {
|
||
// best-effort: leave keypair fields empty if server call fails
|
||
}
|
||
}
|
||
};
|
||
|
||
const toggleExternalProxy = (on: boolean) => {
|
||
if (on) {
|
||
const port = (form.getFieldValue('port') as number) ?? 443;
|
||
form.setFieldValue(['streamSettings', 'externalProxy'], [{
|
||
forceTls: 'same',
|
||
dest: typeof window !== 'undefined' ? window.location.hostname : '',
|
||
port,
|
||
remark: '',
|
||
sni: '',
|
||
fingerprint: '',
|
||
alpn: [],
|
||
}]);
|
||
} else {
|
||
form.setFieldValue(['streamSettings', 'externalProxy'], []);
|
||
}
|
||
};
|
||
|
||
const toggleSockopt = (on: boolean) => {
|
||
if (on) {
|
||
form.setFieldValue(
|
||
['streamSettings', 'sockopt'],
|
||
SockoptStreamSettingsSchema.parse({}),
|
||
);
|
||
} else {
|
||
form.setFieldValue(['streamSettings', 'sockopt'], undefined);
|
||
}
|
||
};
|
||
const wgSecretKey = Form.useWatch(['settings', 'secretKey'], form);
|
||
const wgPubKey = typeof wgSecretKey === 'string' && wgSecretKey.length > 0
|
||
? Wireguard.generateKeypair(wgSecretKey).publicKey
|
||
: '';
|
||
|
||
const regenInboundWg = () => {
|
||
const kp = Wireguard.generateKeypair();
|
||
form.setFieldValue(['settings', 'secretKey'], kp.privateKey);
|
||
};
|
||
|
||
const regenWgPeerKeypair = (peerName: number) => {
|
||
const kp = Wireguard.generateKeypair();
|
||
form.setFieldValue(['settings', 'peers', peerName, 'privateKey'], kp.privateKey);
|
||
form.setFieldValue(['settings', 'peers', peerName, 'publicKey'], kp.publicKey);
|
||
};
|
||
|
||
const matchesVlessAuth = (
|
||
block: { id?: string; label?: string } | undefined | null,
|
||
authId: string,
|
||
) => {
|
||
if (block?.id === authId) return true;
|
||
const label = (block?.label || '').toLowerCase().replace(/[-_\s]/g, '');
|
||
if (authId === 'mlkem768') return label.includes('mlkem768');
|
||
if (authId === 'x25519') return label.includes('x25519');
|
||
return false;
|
||
};
|
||
|
||
const getNewVlessEnc = async (authId: string) => {
|
||
if (!authId) return;
|
||
setSaving(true);
|
||
try {
|
||
const msg = await HttpUtil.get('/panel/api/server/getNewVlessEnc');
|
||
if (!msg?.success) return;
|
||
const obj = msg.obj as {
|
||
auths?: { decryption: string; encryption: string; label?: string; id?: string }[];
|
||
};
|
||
const block = (obj.auths || []).find((a) => matchesVlessAuth(a, authId));
|
||
if (!block) return;
|
||
form.setFieldValue(['settings', 'decryption'], block.decryption);
|
||
form.setFieldValue(['settings', 'encryption'], block.encryption);
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const clearVlessEnc = () => {
|
||
form.setFieldValue(['settings', 'decryption'], 'none');
|
||
form.setFieldValue(['settings', 'encryption'], 'none');
|
||
};
|
||
|
||
const selectedVlessAuth = (() => {
|
||
const enc = typeof vlessEncryption === 'string' ? vlessEncryption : '';
|
||
if (!enc || enc === 'none') return 'None';
|
||
const parts = enc.split('.').filter(Boolean);
|
||
const authKey = parts[parts.length - 1] || '';
|
||
if (!authKey) return t('pages.inbounds.vlessAuthCustom');
|
||
return authKey.length > 300
|
||
? t('pages.inbounds.vlessAuthMlkem768')
|
||
: t('pages.inbounds.vlessAuthX25519');
|
||
})();
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
const initial = mode === 'edit' && dbInbound
|
||
? rawInboundToFormValues(dbInbound)
|
||
: buildAddModeValues();
|
||
form.resetFields();
|
||
form.setFieldsValue(initial);
|
||
if (
|
||
mode === 'edit'
|
||
&& dbInbound
|
||
&& (dbInbound.protocol === Protocols.VLESS || dbInbound.protocol === Protocols.TROJAN)
|
||
) {
|
||
loadFallbacks(dbInbound.id);
|
||
} else {
|
||
setFallbacks([]);
|
||
}
|
||
|
||
}, [open, mode, dbInbound, form]);
|
||
|
||
// Why: protocol picker reset cascades through the form — clearing the
|
||
// settings DU branch and dropping a nodeId that no longer applies. The
|
||
// legacy modal did this imperatively in onProtocolChange; here we hook
|
||
// into AntD's onValuesChange and let setFieldValue keep the rest of
|
||
// the form state intact.
|
||
const onValuesChange = (changed: Partial<InboundFormValues>) => {
|
||
if (mode === 'edit') return;
|
||
if ('protocol' in changed && typeof changed.protocol === 'string') {
|
||
const next = changed.protocol;
|
||
const settings = createDefaultInboundSettings(next) ?? undefined;
|
||
form.setFieldValue('settings', settings);
|
||
if (!NODE_ELIGIBLE_PROTOCOLS.has(next)) {
|
||
form.setFieldValue('nodeId', null);
|
||
}
|
||
// Hysteria uses its dedicated transport — force the network branch
|
||
// so the stream tab renders the hysteria sub-form, not the leftover
|
||
// tcpSettings from the previous protocol. When leaving hysteria,
|
||
// snap back to TCP so the standard network selector has a valid
|
||
// starting point.
|
||
if (next === Protocols.HYSTERIA) {
|
||
const tls = TlsStreamSettingsSchema.parse({}) as Record<string, unknown>;
|
||
tls.certificates = [{
|
||
useFile: true,
|
||
certificateFile: '',
|
||
keyFile: '',
|
||
certificate: [],
|
||
key: [],
|
||
oneTimeLoading: false,
|
||
usage: 'encipherment',
|
||
buildChain: false,
|
||
}];
|
||
form.setFieldValue('streamSettings', {
|
||
network: 'hysteria',
|
||
security: 'tls',
|
||
hysteriaSettings: HysteriaStreamSettingsSchema.parse({}),
|
||
tlsSettings: tls,
|
||
// Hysteria2 needs an obfs wrapper on the FinalMask side; seed
|
||
// it with salamander + a random password so the listener boots
|
||
// with a usable default. Re-selecting Hysteria from another
|
||
// protocol re-runs this and refreshes the password — that's
|
||
// intentional, the form was already being reset.
|
||
finalmask: {
|
||
tcp: [],
|
||
udp: [{
|
||
type: 'salamander',
|
||
settings: { password: RandomUtil.randomLowerAndNum(16) },
|
||
}],
|
||
},
|
||
});
|
||
} else {
|
||
const current = form.getFieldValue('streamSettings') as { network?: string } | undefined;
|
||
if (current?.network === 'hysteria') {
|
||
form.setFieldValue('streamSettings', { network: 'tcp', security: 'none', tcpSettings: {} });
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
const submit = async () => {
|
||
try {
|
||
await form.validateFields();
|
||
} catch {
|
||
return;
|
||
}
|
||
// Why getFieldsValue(true) instead of the validateFields return value:
|
||
// rc-component/form's validateFields filters its output by REGISTERED
|
||
// name paths. settings.clients and settings.fallbacks have no Form.Item
|
||
// bound to them (clients are managed via the standalone Client modal,
|
||
// not inside this inbound modal) — so validateFields would drop them
|
||
// and the update wire payload would silently delete every client on
|
||
// every save. getFieldsValue(true) returns the entire form store and
|
||
// keeps those sub-trees intact.
|
||
const values = form.getFieldsValue(true) as InboundFormValues;
|
||
const parsed = InboundFormSchema.safeParse(values);
|
||
if (!parsed.success) {
|
||
const issue = parsed.error.issues[0];
|
||
const path = Array.isArray(issue?.path) && issue.path.length > 0
|
||
? issue.path.join('.')
|
||
: '';
|
||
const baseMsg = issue?.message ?? 'somethingWentWrong';
|
||
const display = path ? `${path}: ${baseMsg}` : baseMsg;
|
||
messageApi.error(t(baseMsg, { defaultValue: display }));
|
||
console.error('[InboundFormModal] schema validation failed', {
|
||
path: issue?.path,
|
||
message: issue?.message,
|
||
values,
|
||
});
|
||
return;
|
||
}
|
||
setSaving(true);
|
||
try {
|
||
const payload = formValuesToWirePayload(parsed.data);
|
||
const url = mode === 'edit' && dbInbound
|
||
? `/panel/api/inbounds/update/${dbInbound.id}`
|
||
: '/panel/api/inbounds/add';
|
||
const msg = await HttpUtil.post(url, payload);
|
||
if (msg?.success) {
|
||
if (isFallbackHost) {
|
||
const obj = msg.obj as { id?: number; Id?: number } | null;
|
||
const masterId = mode === 'edit'
|
||
? dbInbound!.id
|
||
: (obj?.id ?? obj?.Id ?? 0);
|
||
if (masterId) await saveFallbacks(masterId);
|
||
}
|
||
onSaved();
|
||
onClose();
|
||
}
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const title = mode === 'edit'
|
||
? t('pages.inbounds.modifyInbound')
|
||
: t('pages.inbounds.addInbound');
|
||
|
||
const okText = mode === 'edit'
|
||
? t('pages.clients.submitEdit')
|
||
: t('create');
|
||
|
||
const basicTab = (
|
||
<>
|
||
<Form.Item name="tag" hidden noStyle><Input /></Form.Item>
|
||
<Form.Item name="up" hidden noStyle><InputNumber /></Form.Item>
|
||
<Form.Item name="down" hidden noStyle><InputNumber /></Form.Item>
|
||
<Form.Item name="total" hidden noStyle><InputNumber /></Form.Item>
|
||
<Form.Item name="expiryTime" hidden noStyle><InputNumber /></Form.Item>
|
||
<Form.Item name="lastTrafficResetTime" hidden noStyle><InputNumber /></Form.Item>
|
||
<Form.Item name="clientStats" hidden noStyle><Input /></Form.Item>
|
||
|
||
<Form.Item name="enable" label={t('enable')} valuePropName="checked">
|
||
<Switch />
|
||
</Form.Item>
|
||
|
||
<Form.Item name="remark" label={t('pages.inbounds.remark')}>
|
||
<Input />
|
||
</Form.Item>
|
||
|
||
{selectableNodes.length > 0 && isNodeEligible && (
|
||
<Form.Item name="nodeId" label={t('pages.inbounds.deployTo')}>
|
||
<Select
|
||
disabled={mode === 'edit'}
|
||
placeholder={t('pages.inbounds.localPanel')}
|
||
allowClear
|
||
options={selectableNodes.map((n) => ({
|
||
value: n.id,
|
||
label: `${n.name}${n.status === 'offline' ? ' (offline)' : ''}`,
|
||
disabled: n.status === 'offline',
|
||
}))}
|
||
/>
|
||
</Form.Item>
|
||
)}
|
||
|
||
<Form.Item name="protocol" label={t('pages.inbounds.protocol')}>
|
||
<Select disabled={mode === 'edit'} options={PROTOCOL_OPTIONS} />
|
||
</Form.Item>
|
||
|
||
<Form.Item name="listen" label={t('pages.inbounds.address')}>
|
||
<Input placeholder={t('pages.inbounds.monitorDesc')} />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="port"
|
||
label={t('pages.inbounds.port')}
|
||
rules={[antdRule(InboundFormBaseSchema.shape.port, t)]}
|
||
>
|
||
<InputNumber min={1} max={65535} />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label={
|
||
<Tooltip title={t('pages.inbounds.meansNoLimit')}>
|
||
{t('pages.inbounds.totalFlow')}
|
||
</Tooltip>
|
||
}
|
||
>
|
||
<Form.Item
|
||
noStyle
|
||
shouldUpdate={(prev, curr) => prev.total !== curr.total}
|
||
>
|
||
{({ getFieldValue, setFieldValue }) => {
|
||
const totalBytes = (getFieldValue('total') as number) ?? 0;
|
||
const totalGB = totalBytes
|
||
? Math.round((totalBytes / SizeFormatter.ONE_GB) * 100) / 100
|
||
: 0;
|
||
return (
|
||
<InputNumber
|
||
value={totalGB}
|
||
min={0}
|
||
step={1}
|
||
onChange={(v) => {
|
||
const bytes = NumberFormatter.toFixed(
|
||
(Number(v) || 0) * SizeFormatter.ONE_GB,
|
||
0,
|
||
);
|
||
setFieldValue('total', bytes);
|
||
}}
|
||
/>
|
||
);
|
||
}}
|
||
</Form.Item>
|
||
</Form.Item>
|
||
|
||
<Form.Item name="trafficReset" label={t('pages.inbounds.periodicTrafficResetTitle')}>
|
||
<Select
|
||
options={TRAFFIC_RESETS.map((r) => ({
|
||
value: r,
|
||
label: t(`pages.inbounds.periodicTrafficReset.${r}`),
|
||
}))}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label={
|
||
<Tooltip title={t('pages.inbounds.leaveBlankToNeverExpire')}>
|
||
{t('pages.inbounds.expireDate')}
|
||
</Tooltip>
|
||
}
|
||
>
|
||
<Form.Item
|
||
noStyle
|
||
shouldUpdate={(prev, curr) => prev.expiryTime !== curr.expiryTime}
|
||
>
|
||
{({ getFieldValue, setFieldValue }) => {
|
||
const expiry = (getFieldValue('expiryTime') as number) ?? 0;
|
||
return (
|
||
<DateTimePicker
|
||
value={expiry > 0 ? dayjs(expiry) : null}
|
||
onChange={(d) => setFieldValue('expiryTime', d ? d.valueOf() : 0)}
|
||
/>
|
||
);
|
||
}}
|
||
</Form.Item>
|
||
</Form.Item>
|
||
</>
|
||
);
|
||
|
||
const fallbacksCard = (
|
||
<Card size="small" className="mt-12" title={t('pages.inbounds.fallbacks.title') || 'Fallbacks'}>
|
||
{fallbacks.length === 0 && (
|
||
<Empty
|
||
description={t('pages.inbounds.fallbacks.empty') || 'No fallbacks yet'}
|
||
styles={{ image: { height: 40 } }}
|
||
style={{ margin: '8px 0 12px' }}
|
||
/>
|
||
)}
|
||
{fallbacks.map((record, idx) => (
|
||
<div
|
||
key={record.rowKey}
|
||
style={{ border: '1px solid var(--app-border-tertiary)', borderRadius: 6, padding: '10px 12px', marginBottom: 8 }}
|
||
>
|
||
<Space.Compact block style={{ marginBottom: 6 }}>
|
||
<Select
|
||
value={record.childId}
|
||
options={fallbackChildOptions}
|
||
placeholder={t('pages.inbounds.fallbacks.pickInbound') || 'Pick an inbound'}
|
||
showSearch={{
|
||
filterOption: (input, option) =>
|
||
((option?.label as string) || '').toLowerCase().includes(input.toLowerCase()),
|
||
}}
|
||
style={{ width: '100%' }}
|
||
onChange={(v) => updateFallback(record.rowKey, { childId: v })}
|
||
/>
|
||
<Button
|
||
disabled={idx === 0}
|
||
onClick={() => moveFallback(idx, -1)}
|
||
title={t('pages.inbounds.form.moveUp')}
|
||
>
|
||
<ArrowUpOutlined />
|
||
</Button>
|
||
<Button
|
||
disabled={idx === fallbacks.length - 1}
|
||
onClick={() => moveFallback(idx, 1)}
|
||
title={t('pages.inbounds.form.moveDown')}
|
||
>
|
||
<ArrowDownOutlined />
|
||
</Button>
|
||
<Button danger onClick={() => removeFallback(idx)}>
|
||
<DeleteOutlined />
|
||
</Button>
|
||
</Space.Compact>
|
||
<Space.Compact block>
|
||
<InputAddon>SNI</InputAddon>
|
||
<Input
|
||
placeholder={t('pages.inbounds.fallbacks.matchAny') || 'any'}
|
||
value={record.name}
|
||
onChange={(e) => updateFallback(record.rowKey, { name: e.target.value })}
|
||
/>
|
||
<InputAddon>ALPN</InputAddon>
|
||
<Input
|
||
placeholder={t('pages.inbounds.fallbacks.matchAny') || 'any'}
|
||
value={record.alpn}
|
||
onChange={(e) => updateFallback(record.rowKey, { alpn: e.target.value })}
|
||
/>
|
||
<InputAddon>Path</InputAddon>
|
||
<Input
|
||
placeholder="/"
|
||
value={record.path}
|
||
onChange={(e) => updateFallback(record.rowKey, { path: e.target.value })}
|
||
/>
|
||
<InputAddon>Dest</InputAddon>
|
||
<Input
|
||
placeholder={t('pages.inbounds.fallbacks.destPlaceholder') || 'auto'}
|
||
value={record.dest}
|
||
onChange={(e) => updateFallback(record.rowKey, { dest: e.target.value })}
|
||
/>
|
||
<InputAddon>xver</InputAddon>
|
||
<InputNumber
|
||
min={0}
|
||
max={2}
|
||
value={record.xver}
|
||
onChange={(v) => updateFallback(record.rowKey, { xver: Number(v) || 0 })}
|
||
/>
|
||
</Space.Compact>
|
||
</div>
|
||
))}
|
||
<Space>
|
||
<Button size="small" onClick={addFallback}>
|
||
<PlusOutlined /> {t('pages.inbounds.fallbacks.add') || 'Add fallback'}
|
||
</Button>
|
||
<Button
|
||
size="small"
|
||
onClick={addAllFallbacks}
|
||
disabled={fallbackChildOptions.length === 0
|
||
|| fallbacks.length >= fallbackChildOptions.length}
|
||
title={t('pages.inbounds.form.addAllFallbackTooltip')}
|
||
>
|
||
{t('pages.inbounds.form.addAll')}
|
||
</Button>
|
||
</Space>
|
||
</Card>
|
||
);
|
||
|
||
const protocolTab = (
|
||
<>
|
||
{protocol === Protocols.WIREGUARD && <WireguardFields wgPubKey={wgPubKey} regenInboundWg={regenInboundWg} regenWgPeerKeypair={regenWgPeerKeypair} />}
|
||
|
||
{protocol === Protocols.TUN && <TunFields />}
|
||
|
||
{protocol === Protocols.TUNNEL && <TunnelFields />}
|
||
|
||
{protocol === Protocols.HTTP && <HttpFields />}
|
||
{protocol === Protocols.MIXED && <MixedFields mixedUdpOn={mixedUdpOn} />}
|
||
|
||
{protocol === Protocols.SHADOWSOCKS && <ShadowsocksFields form={form} isSSWith2022={isSSWith2022} />}
|
||
|
||
{protocol === Protocols.VLESS && <VlessFields saving={saving} selectedVlessAuth={selectedVlessAuth} network={network} security={security} getNewVlessEnc={getNewVlessEnc} clearVlessEnc={clearVlessEnc} />}
|
||
|
||
{isFallbackHost && fallbacksCard}
|
||
</>
|
||
);
|
||
|
||
// Switching `network` swaps which per-network key (tcpSettings,
|
||
// wsSettings, grpcSettings, ...) appears on the wire. Clear the old
|
||
// network's blob and seed the new one with the schema defaults so the
|
||
// Form.Items inside it have valid initial values (KCP needs MTU=1350
|
||
// etc., not empty strings).
|
||
// Seed each network's settings blob with its Zod schema defaults so
|
||
// every Form.Item inside the network sub-form has a defined starting
|
||
// value. XHTTP in particular has ~20 fields (sessionPlacement,
|
||
// seqPlacement, xPaddingMethod, uplinkHTTPMethod, ...) whose value
|
||
// is the literal "" sentinel meaning "let xray-core pick its
|
||
// default". Without seeding "", the Form.Item reads `undefined` and
|
||
// the Select shows blank instead of the "Default (path)" option.
|
||
const newStreamSlice = (n: string): Record<string, unknown> => {
|
||
switch (n) {
|
||
case 'tcp': return TcpStreamSettingsSchema.parse({ header: { type: 'none' } });
|
||
case 'kcp': return KcpStreamSettingsSchema.parse({});
|
||
case 'ws': return WsStreamSettingsSchema.parse({});
|
||
case 'grpc': return GrpcStreamSettingsSchema.parse({});
|
||
case 'httpupgrade': return HttpUpgradeStreamSettingsSchema.parse({});
|
||
case 'xhttp': return XHttpStreamSettingsSchema.parse({});
|
||
default: return {};
|
||
}
|
||
};
|
||
const onNetworkChange = (next: string) => {
|
||
const ALL = ['tcpSettings', 'kcpSettings', 'wsSettings', 'grpcSettings', 'httpupgradeSettings', 'xhttpSettings'];
|
||
const current = (form.getFieldValue('streamSettings') as Record<string, unknown>) ?? {};
|
||
const cleaned: Record<string, unknown> = { ...current, network: next };
|
||
for (const k of ALL) {
|
||
if (k !== `${next}Settings`) delete cleaned[k];
|
||
}
|
||
cleaned[`${next}Settings`] = newStreamSlice(next);
|
||
// mKCP wants a UDP mask wrapper on the FinalMask side; seed it with
|
||
// `mkcp-original` so the inbound boots with a sensible default
|
||
// instead of unobfuscated mKCP traffic. The user can still edit or
|
||
// clear the mask via the FinalMask section.
|
||
if (next === 'kcp') {
|
||
const fm = (cleaned.finalmask as Record<string, unknown> | undefined) ?? {};
|
||
const udp = Array.isArray(fm.udp) ? (fm.udp as unknown[]) : [];
|
||
const hasMkcp = udp.some((m) => {
|
||
const entry = m as { type?: string };
|
||
return entry?.type === 'mkcp-original';
|
||
});
|
||
if (!hasMkcp) {
|
||
cleaned.finalmask = {
|
||
...fm,
|
||
udp: [...udp, { type: 'mkcp-original', settings: {} }],
|
||
};
|
||
}
|
||
}
|
||
form.setFieldValue('streamSettings', cleaned);
|
||
};
|
||
|
||
const streamTab = (
|
||
<>
|
||
{protocol !== Protocols.HYSTERIA && (
|
||
<Form.Item label={t('transmission')} name={['streamSettings', 'network']}>
|
||
<Select
|
||
style={{ width: '75%' }}
|
||
onChange={onNetworkChange}
|
||
options={[
|
||
{ value: 'tcp', label: 'RAW' },
|
||
{ value: 'kcp', label: 'mKCP' },
|
||
{ value: 'ws', label: 'WebSocket' },
|
||
{ value: 'grpc', label: 'gRPC' },
|
||
{ value: 'httpupgrade', label: 'HTTPUpgrade' },
|
||
{ value: 'xhttp', label: 'XHTTP' },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
)}
|
||
|
||
{/* Inbound Hysteria stream sub-form. The transport for hysteria
|
||
isn't user-selectable (always 'hysteria'), so the network
|
||
dropdown is hidden above. Fields here mirror the legacy
|
||
HysteriaStreamSettings inbound class: version is locked to 2,
|
||
auth + udpIdleTimeout are required, masquerade is an optional
|
||
sub-object that lets xray-core disguise the listener as an
|
||
HTTP server when probed. */}
|
||
{protocol === Protocols.HYSTERIA && <HysteriaFields form={form} />}
|
||
|
||
{network === 'tcp' && <RawForm />}
|
||
|
||
{network === 'ws' && <WsForm />}
|
||
|
||
{network === 'grpc' && <GrpcForm />}
|
||
|
||
{network === 'xhttp' && <XhttpForm form={form} />}
|
||
|
||
{network === 'httpupgrade' && <HttpUpgradeForm />}
|
||
|
||
{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>
|
||
|
||
<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>
|
||
|
||
<FinalMaskForm
|
||
name={['streamSettings', 'finalmask']}
|
||
network={network as string}
|
||
protocol={protocol}
|
||
form={form}
|
||
/>
|
||
</>
|
||
);
|
||
|
||
const securityTab = (
|
||
<>
|
||
<Form.Item name={['streamSettings', 'security']} hidden noStyle>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item label={t('pages.inbounds.securityTab')}>
|
||
<Form.Item
|
||
noStyle
|
||
shouldUpdate={(prev, curr) =>
|
||
prev.streamSettings?.security !== curr.streamSettings?.security
|
||
|| prev.streamSettings?.network !== curr.streamSettings?.network
|
||
|| prev.protocol !== curr.protocol
|
||
}
|
||
>
|
||
{({ getFieldValue }) => {
|
||
const sec = getFieldValue(['streamSettings', 'security']) ?? 'none';
|
||
const net = getFieldValue(['streamSettings', 'network']) ?? '';
|
||
const proto = getFieldValue('protocol') ?? '';
|
||
const tlsOk = canEnableTls({ protocol: proto, streamSettings: { network: net, security: sec } });
|
||
const realityOk = canEnableReality({ protocol: proto, streamSettings: { network: net, security: sec } });
|
||
const tlsOnly = proto === Protocols.HYSTERIA;
|
||
return (
|
||
<Radio.Group
|
||
value={sec}
|
||
buttonStyle="solid"
|
||
disabled={!tlsOk}
|
||
onChange={(e) => onSecurityChange(e.target.value)}
|
||
>
|
||
{!tlsOnly && <Radio.Button value="none">{t('none')}</Radio.Button>}
|
||
<Radio.Button value="tls">TLS</Radio.Button>
|
||
{realityOk && <Radio.Button value="reality">Reality</Radio.Button>}
|
||
</Radio.Group>
|
||
);
|
||
}}
|
||
</Form.Item>
|
||
</Form.Item>
|
||
|
||
{security === 'tls' && (
|
||
<TlsForm
|
||
saving={saving}
|
||
setCertFromPanel={setCertFromPanel}
|
||
clearCertFiles={clearCertFiles}
|
||
generateRandomPinHash={generateRandomPinHash}
|
||
getNewEchCert={getNewEchCert}
|
||
clearEchCert={clearEchCert}
|
||
/>
|
||
)}
|
||
|
||
{security === 'reality' && (
|
||
<RealityForm
|
||
saving={saving}
|
||
randomizeRealityTarget={randomizeRealityTarget}
|
||
randomizeShortIds={randomizeShortIds}
|
||
genRealityKeypair={genRealityKeypair}
|
||
clearRealityKeypair={clearRealityKeypair}
|
||
genMldsa65={genMldsa65}
|
||
clearMldsa65={clearMldsa65}
|
||
/>
|
||
)}
|
||
</>
|
||
);
|
||
|
||
const advancedTab = (
|
||
<div className="advanced-shell">
|
||
<div className="advanced-panel">
|
||
<div className="advanced-panel__header">
|
||
<div>
|
||
<div className="advanced-panel__title">{t('pages.inbounds.advanced.title')}</div>
|
||
<div className="advanced-panel__subtitle">{t('pages.inbounds.advanced.subtitle')}</div>
|
||
</div>
|
||
</div>
|
||
<Tabs
|
||
className="advanced-inner-tabs"
|
||
items={[
|
||
{
|
||
key: 'all',
|
||
label: t('pages.inbounds.advanced.all'),
|
||
children: (
|
||
<>
|
||
<div className="advanced-editor-meta">
|
||
{t('pages.inbounds.advanced.allHelp')}
|
||
</div>
|
||
<AdvancedAllEditor form={form} streamEnabled={streamEnabled} />
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
key: 'settings',
|
||
label: t('pages.inbounds.advanced.settings'),
|
||
children: (
|
||
<>
|
||
<div className="advanced-editor-meta">
|
||
{t('pages.inbounds.advanced.settingsHelp')}{' '}
|
||
<code>{'{ settings: { ... } }'}</code>.
|
||
</div>
|
||
<AdvancedSliceEditor
|
||
form={form}
|
||
path="settings"
|
||
wrapKey="settings"
|
||
minHeight="320px"
|
||
maxHeight="540px"
|
||
/>
|
||
</>
|
||
),
|
||
},
|
||
...(streamEnabled
|
||
? [{
|
||
key: 'stream',
|
||
label: t('pages.inbounds.advanced.stream'),
|
||
children: (
|
||
<>
|
||
<div className="advanced-editor-meta">
|
||
{t('pages.inbounds.advanced.streamHelp')}{' '}
|
||
<code>{'{ streamSettings: { ... } }'}</code>.
|
||
</div>
|
||
<AdvancedSliceEditor
|
||
form={form}
|
||
path="streamSettings"
|
||
wrapKey="streamSettings"
|
||
minHeight="320px"
|
||
maxHeight="540px"
|
||
/>
|
||
</>
|
||
),
|
||
}]
|
||
: []),
|
||
{
|
||
key: 'sniffing',
|
||
label: t('pages.inbounds.advanced.sniffing'),
|
||
children: (
|
||
<>
|
||
<div className="advanced-editor-meta">
|
||
{t('pages.inbounds.advanced.sniffingHelp')}{' '}
|
||
<code>{'{ sniffing: { ... } }'}</code>.
|
||
</div>
|
||
<AdvancedSliceEditor
|
||
form={form}
|
||
path="sniffing"
|
||
wrapKey="sniffing"
|
||
minHeight="240px"
|
||
maxHeight="420px"
|
||
/>
|
||
</>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
const sniffingTab = (
|
||
<>
|
||
<Form.Item name={['sniffing', 'enabled']} label={t('enable')} valuePropName="checked">
|
||
<Switch />
|
||
</Form.Item>
|
||
|
||
{sniffingEnabled && (
|
||
<>
|
||
<Form.Item name={['sniffing', 'destOverride']} wrapperCol={{ span: 24 }}>
|
||
<Checkbox.Group>
|
||
{Object.entries(SNIFFING_OPTION).map(([key, value]) => (
|
||
<Checkbox key={key} value={value}>{key}</Checkbox>
|
||
))}
|
||
</Checkbox.Group>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name={['sniffing', 'metadataOnly']}
|
||
label={t('pages.inbounds.sniffingMetadataOnly')}
|
||
valuePropName="checked"
|
||
>
|
||
<Switch />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name={['sniffing', 'routeOnly']}
|
||
label={t('pages.inbounds.sniffingRouteOnly')}
|
||
valuePropName="checked"
|
||
>
|
||
<Switch />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name={['sniffing', 'ipsExcluded']}
|
||
label={t('pages.inbounds.sniffingIpsExcluded')}
|
||
>
|
||
<Select
|
||
mode="tags"
|
||
tokenSeparators={[',']}
|
||
placeholder="IP/CIDR/geoip:*/ext:*"
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name={['sniffing', 'domainsExcluded']}
|
||
label={t('pages.inbounds.sniffingDomainsExcluded')}
|
||
>
|
||
<Select
|
||
mode="tags"
|
||
tokenSeparators={[',']}
|
||
placeholder="domain:*/ext:*"
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</Form.Item>
|
||
</>
|
||
)}
|
||
</>
|
||
);
|
||
|
||
return (
|
||
<>
|
||
{messageContextHolder}
|
||
<Modal
|
||
open={open}
|
||
title={title}
|
||
okText={okText}
|
||
cancelText={t('close')}
|
||
confirmLoading={saving}
|
||
mask={{ closable: false }}
|
||
width={780}
|
||
onOk={submit}
|
||
onCancel={onClose}
|
||
destroyOnHidden
|
||
>
|
||
<Form
|
||
form={form}
|
||
colon={false}
|
||
labelCol={{ sm: { span: 8 } }}
|
||
wrapperCol={{ sm: { span: 14 } }}
|
||
onValuesChange={onValuesChange}
|
||
>
|
||
<Tabs items={[
|
||
// forceRender on every tab so all Form.Items register at modal
|
||
// open, not lazily on first visit. Without it, AntD's items API
|
||
// lazy-mounts inactive tabs — their fields don't register, so
|
||
// Form.useWatch on a parent path (e.g. 'sniffing') returns the
|
||
// partial-view {} until the user touches the tab and the
|
||
// inner Form.Item for `sniffing.enabled` registers.
|
||
{ key: 'basic', label: t('pages.xray.basicTemplate'), children: basicTab, forceRender: true },
|
||
...(([
|
||
Protocols.VLESS,
|
||
Protocols.SHADOWSOCKS,
|
||
Protocols.HTTP,
|
||
Protocols.MIXED,
|
||
Protocols.TUNNEL,
|
||
Protocols.TUN,
|
||
Protocols.WIREGUARD,
|
||
] as string[]).includes(protocol) || isFallbackHost
|
||
? [{ key: 'protocol', label: t('pages.inbounds.protocol'), children: protocolTab, forceRender: true }]
|
||
: []),
|
||
...(streamEnabled
|
||
? [
|
||
{ key: 'stream', label: t('pages.inbounds.streamTab'), children: streamTab, forceRender: true },
|
||
{ key: 'security', label: t('pages.inbounds.securityTab'), children: securityTab, forceRender: true },
|
||
]
|
||
: []),
|
||
{ key: 'sniffing', label: t('pages.inbounds.sniffingTab'), children: sniffingTab, forceRender: true },
|
||
{ key: 'advanced', label: t('pages.xray.advancedTemplate'), children: advancedTab, forceRender: true },
|
||
]} />
|
||
</Form>
|
||
</Modal>
|
||
</>
|
||
);
|
||
}
|