From 15ecd0aa78ad60d709e7820649733b1996e9704d Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Sat, 30 May 2026 17:03:39 +0200
Subject: [PATCH] refactor(frontend): extract OutboundFormModal core protocol
 fields

OutboundFormModal.tsx 1622 -> 1538. Moved the shared protocol core field blocks (vmess/vless ID, vmess security, vless encryption/reverseTag, trojan/ss password, ss method/uot, socks/http user/pass) into outbound-core-fields.tsx; dropped now-unused schema/option imports. Per-protocol snapshots unchanged -> no behavior change. typecheck/lint/build green.
---
 .../xray/outbounds/OutboundFormModal.tsx      |  91 +---------------
 .../xray/outbounds/outbound-core-fields.tsx   | 103 ++++++++++++++++++
 2 files changed, 105 insertions(+), 89 deletions(-)
 create mode 100644 frontend/src/pages/xray/outbounds/outbound-core-fields.tsx

diff --git a/frontend/src/pages/xray/outbounds/OutboundFormModal.tsx b/frontend/src/pages/xray/outbounds/OutboundFormModal.tsx
index e323d87e..ec2cf352 100644
--- a/frontend/src/pages/xray/outbounds/OutboundFormModal.tsx
+++ b/frontend/src/pages/xray/outbounds/OutboundFormModal.tsx
@@ -26,10 +26,6 @@ import {
 import { parseOutboundLink } from '@/lib/xray/outbound-link-parser';
 import {
   OutboundFormBaseSchema,
-  ShadowsocksOutboundFormSettingsSchema,
-  TrojanOutboundFormSettingsSchema,
-  VlessOutboundFormSettingsSchema,
-  VmessOutboundFormSettingsSchema,
   type OutboundFormValues,
 } from '@/schemas/forms/outbound-form';
 import {
@@ -47,7 +43,6 @@ import {
   canEnableTls,
   canEnableTlsFlow,
 } from '@/lib/xray/protocol-capabilities';
-import { SSMethodSchema } from '@/schemas/protocols/shared/shadowsocks';
 import { antdRule } from '@/utils/zodForm';
 
 import {
@@ -58,9 +53,7 @@ import {
   MODE_OPTIONS,
   NETWORK_OPTIONS,
   PROTOCOL_OPTIONS,
-  SECURITY_OPTIONS,
   SERVER_PROTOCOLS,
-  SS_METHOD_OPTIONS,
   UTLS_OPTIONS,
 } from './outbound-form-constants';
 import {
@@ -69,6 +62,7 @@ import {
   isMuxAllowed,
   newStreamSlice,
 } from './outbound-form-helpers';
+import { OutboundCoreProtocolFields } from './outbound-core-fields';
 import { OutboundOnlyProtocolFields } from './outbound-only-fields';
 import { FreedomOutboundFields } from './outbound-freedom-fields';
 import { WireguardOutboundFields } from './outbound-wireguard-fields';
@@ -418,88 +412,7 @@ export default function OutboundFormModal({
                       </>
                     )}
 
-                    {(protocol === 'vmess' || protocol === 'vless') && (
-                      <Form.Item
-                        label="ID"
-                        name={['settings', 'id']}
-                        rules={[antdRule(VmessOutboundFormSettingsSchema.shape.id, t)]}
-                      >
-                        <Input placeholder="UUID" />
-                      </Form.Item>
-                    )}
-                    {protocol === 'vmess' && (
-                      <Form.Item
-                        label={t('security')}
-                        name={['settings', 'security']}
-                        rules={[antdRule(VmessOutboundFormSettingsSchema.shape.security, t)]}
-                      >
-                        <Select options={SECURITY_OPTIONS} />
-                      </Form.Item>
-                    )}
-                    {protocol === 'vless' && (
-                      <>
-                        <Form.Item
-                          label={t('encryption')}
-                          name={['settings', 'encryption']}
-                          rules={[antdRule(VlessOutboundFormSettingsSchema.shape.encryption, t)]}
-                        >
-                          <Input />
-                        </Form.Item>
-                        <Form.Item label={t('pages.clients.reverseTag')} name={['settings', 'reverseTag']}>
-                          <Input placeholder={t('pages.xray.outboundForm.optional')} />
-                        </Form.Item>
-                      </>
-                    )}
-
-                    {(protocol === 'trojan' || protocol === 'shadowsocks') && (
-                      <Form.Item
-                        label={t('password')}
-                        name={['settings', 'password']}
-                        rules={[
-                          antdRule(
-                            protocol === 'trojan'
-                              ? TrojanOutboundFormSettingsSchema.shape.password
-                              : ShadowsocksOutboundFormSettingsSchema.shape.password,
-                            t,
-                          ),
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
-                    )}
-
-                    {protocol === 'shadowsocks' && (
-                      <>
-                        <Form.Item
-                          label={t('encryption')}
-                          name={['settings', 'method']}
-                          rules={[antdRule(SSMethodSchema, t)]}
-                        >
-                          <Select options={SS_METHOD_OPTIONS} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t('pages.xray.outboundForm.udpOverTcp')}
-                          name={['settings', 'uot']}
-                          valuePropName="checked"
-                        >
-                          <Switch />
-                        </Form.Item>
-                        <Form.Item label={t('pages.xray.outboundForm.uotVersion')} name={['settings', 'UoTVersion']}>
-                          <InputNumber min={1} max={2} />
-                        </Form.Item>
-                      </>
-                    )}
-
-                    {(protocol === 'socks' || protocol === 'http') && (
-                      <>
-                        <Form.Item label={t('username')} name={['settings', 'user']}>
-                          <Input />
-                        </Form.Item>
-                        <Form.Item label={t('password')} name={['settings', 'pass']}>
-                          <Input />
-                        </Form.Item>
-                      </>
-                    )}
+                    <OutboundCoreProtocolFields protocol={protocol} />
 
                     <OutboundOnlyProtocolFields protocol={protocol} />
 
diff --git a/frontend/src/pages/xray/outbounds/outbound-core-fields.tsx b/frontend/src/pages/xray/outbounds/outbound-core-fields.tsx
new file mode 100644
index 00000000..c920b9a5
--- /dev/null
+++ b/frontend/src/pages/xray/outbounds/outbound-core-fields.tsx
@@ -0,0 +1,103 @@
+import { useTranslation } from 'react-i18next';
+import { Form, Input, InputNumber, Select, Switch } from 'antd';
+
+import {
+  ShadowsocksOutboundFormSettingsSchema,
+  TrojanOutboundFormSettingsSchema,
+  VlessOutboundFormSettingsSchema,
+  VmessOutboundFormSettingsSchema,
+} from '@/schemas/forms/outbound-form';
+import { SSMethodSchema } from '@/schemas/protocols/shared/shadowsocks';
+import { antdRule } from '@/utils/zodForm';
+
+import { SECURITY_OPTIONS, SS_METHOD_OPTIONS } from './outbound-form-constants';
+
+export function OutboundCoreProtocolFields({ protocol }: { protocol: string }) {
+  const { t } = useTranslation();
+  return (
+    <>
+      {(protocol === 'vmess' || protocol === 'vless') && (
+        <Form.Item
+          label="ID"
+          name={['settings', 'id']}
+          rules={[antdRule(VmessOutboundFormSettingsSchema.shape.id, t)]}
+        >
+          <Input placeholder="UUID" />
+        </Form.Item>
+      )}
+      {protocol === 'vmess' && (
+        <Form.Item
+          label={t('security')}
+          name={['settings', 'security']}
+          rules={[antdRule(VmessOutboundFormSettingsSchema.shape.security, t)]}
+        >
+          <Select options={SECURITY_OPTIONS} />
+        </Form.Item>
+      )}
+      {protocol === 'vless' && (
+        <>
+          <Form.Item
+            label={t('encryption')}
+            name={['settings', 'encryption']}
+            rules={[antdRule(VlessOutboundFormSettingsSchema.shape.encryption, t)]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item label={t('pages.clients.reverseTag')} name={['settings', 'reverseTag']}>
+            <Input placeholder={t('pages.xray.outboundForm.optional')} />
+          </Form.Item>
+        </>
+      )}
+
+      {(protocol === 'trojan' || protocol === 'shadowsocks') && (
+        <Form.Item
+          label={t('password')}
+          name={['settings', 'password']}
+          rules={[
+            antdRule(
+              protocol === 'trojan'
+                ? TrojanOutboundFormSettingsSchema.shape.password
+                : ShadowsocksOutboundFormSettingsSchema.shape.password,
+              t,
+            ),
+          ]}
+        >
+          <Input />
+        </Form.Item>
+      )}
+
+      {protocol === 'shadowsocks' && (
+        <>
+          <Form.Item
+            label={t('encryption')}
+            name={['settings', 'method']}
+            rules={[antdRule(SSMethodSchema, t)]}
+          >
+            <Select options={SS_METHOD_OPTIONS} />
+          </Form.Item>
+          <Form.Item
+            label={t('pages.xray.outboundForm.udpOverTcp')}
+            name={['settings', 'uot']}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item label={t('pages.xray.outboundForm.uotVersion')} name={['settings', 'UoTVersion']}>
+            <InputNumber min={1} max={2} />
+          </Form.Item>
+        </>
+      )}
+
+      {(protocol === 'socks' || protocol === 'http') && (
+        <>
+          <Form.Item label={t('username')} name={['settings', 'user']}>
+            <Input />
+          </Form.Item>
+          <Form.Item label={t('password')} name={['settings', 'pass']}>
+            <Input />
+          </Form.Item>
+        </>
+      )}
+    </>
+  );
+}