3x-ui-agent/frontend/src/pages/inbounds/form/ForwardingTab.tsx

import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useFormContext, useWatch } from 'react-hook-form';
import { Alert, Button, Form, Input, InputNumber, Radio, Select, Space } from 'antd';

import { FormField } from '@/components/form/rhf';
import { HttpUtil } from '@/utils';
import type { ForwardingSpec } from '@/schemas/forms/inbound-form';

interface ForwardTarget {
  id: number;
  remark: string;
  tag: string;
  protocol: string;
  listen: string;
  port: number;
  enable: boolean;
  nodeId: number | null;
  nodeName: string;
}

// Parse a landing link into manual-forwarding fields. Accepts the plain
// URL form (socks5://user:pass@host:port, also socks:// and http://) and
// the whole-link base64 variant common in share links.
export function parseLandingLink(raw: string): Partial<ForwardingSpec> | null {
  const link = raw.trim();
  if (!link) return null;
  const tryUrl = (s: string): Partial<ForwardingSpec> | null => {
    try {
      const u = new URL(s);
      if (!['socks5:', 'socks:', 'http:', 'https:'].includes(u.protocol)) return null;
      const port = u.port ? parseInt(u.port, 10) : 0;
      if (!u.hostname || !port) return null;
      return {
        protocol: u.protocol === 'http:' || u.protocol === 'https:' ? 'http' : 'socks5',
        address: u.hostname,
        port,
        username: decodeURIComponent(u.username || ''),
        password: decodeURIComponent(u.password || ''),
      };
    } catch {
      return null;
    }
  };
  const direct = tryUrl(link);
  if (direct) return direct;
  try {
    const decoded = atob(link.replace(/-/g, '+').replace(/_/g, '/'));
    return tryUrl(decoded.includes('://') ? decoded : `socks5://${decoded}`);
  } catch {
    return null;
  }
}

export default function ForwardingTab({ currentId }: { currentId?: number }) {
  const { t } = useTranslation();
  const { control, setValue } = useFormContext();
  const mode = useWatch({ control, name: 'forwarding.mode' });
  const landing = useWatch({ control, name: 'forwarding.landing' });
  const [targets, setTargets] = useState<ForwardTarget[]>([]);
  const [link, setLink] = useState('');
  const [linkError, setLinkError] = useState('');

  useEffect(() => {
    let alive = true;
    HttpUtil.get('/panel/api/inbounds/forwardTargets')
      .then((msg) => {
        if (alive && msg?.success && Array.isArray(msg.obj)) {
          setTargets(msg.obj as ForwardTarget[]);
        }
      })
      .catch(() => {});
    return () => {
      alive = false;
    };
  }, []);

  const applyLink = () => {
    const parsed = parseLandingLink(link);
    if (!parsed) {
      setLinkError(t('pages.inbounds.forwarding.importFailed'));
      return;
    }
    setLinkError('');
    const opts = { shouldDirty: true, shouldValidate: true };
    setValue('forwarding.protocol', parsed.protocol ?? 'socks5', opts);
    setValue('forwarding.address', parsed.address ?? '', opts);
    setValue('forwarding.port', parsed.port ?? 0, opts);
    setValue('forwarding.username', parsed.username ?? '', opts);
    setValue('forwarding.password', parsed.password ?? '', opts);
  };

  return (
    <>
      <FormField name="forwarding.mode" label={t('pages.inbounds.forwarding.mode')}>
        <Radio.Group
          options={[
            { value: 'direct', label: t('pages.inbounds.forwarding.direct') },
            { value: 'forward', label: t('pages.inbounds.forwarding.forward') },
          ]}
        />
      </FormField>

      {mode === 'forward' && (
        <>
          <FormField name="forwarding.landing" label={t('pages.inbounds.forwarding.landing')}>
            <Radio.Group
              options={[
                { value: 'managed', label: t('pages.inbounds.forwarding.managed') },
                { value: 'manual', label: t('pages.inbounds.forwarding.manual') },
              ]}
            />
          </FormField>

          {landing === 'managed' ? (
            <FormField
              name="forwarding.targetInboundId"
              label={t('pages.inbounds.forwarding.target')}
            >
              <Select
                showSearch
                placeholder={t('pages.inbounds.forwarding.targetPlaceholder')}
                options={targets
                  .filter((x) => x.id !== currentId)
                  .map((x) => ({
                    value: x.id,
                    disabled: !x.enable,
                    label: `${x.nodeName || t('pages.inbounds.localPanel')} · ${x.remark || x.tag} (${x.listen || '*'}:${x.port})${x.enable ? '' : ` (${t('pages.inbounds.forwarding.targetDisabled')})`}`,
                  }))}
              />
            </FormField>
          ) : (
            <>
              <FormField name="forwarding.address" label={t('pages.inbounds.forwarding.address')}>
                <Input placeholder="10.240.64.2" />
              </FormField>
              <FormField name="forwarding.port" label={t('pages.inbounds.forwarding.port')}>
                <InputNumber min={1} max={65535} />
              </FormField>
              <FormField name="forwarding.protocol" label={t('pages.inbounds.forwarding.protocol')}>
                <Select
                  options={[
                    { value: 'socks5', label: 'SOCKS5' },
                    { value: 'http', label: 'HTTP' },
                  ]}
                />
              </FormField>
              <FormField name="forwarding.username" label={t('pages.inbounds.forwarding.username')}>
                <Input autoComplete="off" />
              </FormField>
              <FormField name="forwarding.password" label={t('pages.inbounds.forwarding.password')}>
                <Input.Password autoComplete="off" />
              </FormField>
              <Form.Item label={t('pages.inbounds.forwarding.importLink')}>
                <Space.Compact style={{ width: '100%' }}>
                  <Input
                    value={link}
                    onChange={(e) => setLink(e.target.value)}
                    placeholder={t('pages.inbounds.forwarding.importPlaceholder')}
                  />
                  <Button onClick={applyLink}>{t('pages.inbounds.forwarding.importApply')}</Button>
                </Space.Compact>
                {linkError && <div style={{ color: '#ff4d4f', marginTop: 4 }}>{linkError}</div>}
              </Form.Item>
            </>
          )}

          <Alert type="info" showIcon message={t('pages.inbounds.forwarding.help')} />
        </>
      )}
    </>
  );
}