소스 검색

feat(frontend): FinalMaskForm rewrite to Pattern A + wire into both modals

Rewrite FinalMaskForm.tsx from a class-coupled component (mutated
stream.finalmask.tcp[] via .addTcpMask/.delTcpMask methods, notified
parent via onChange callback) into a Pattern A sub-form: takes a
NamePath base, a FormInstance, and the surrounding network/protocol,
then composes Form.List + Form.Item at absolute paths under that base.

All array structures use nested Form.List — tcp/udp mask arrays, the
clients/servers groups in header-custom (Form.List of Form.List of
ItemEditor), and the noise list. Type Selects use onChange to reset
the settings sub-object via form.setFieldValue, mirroring the legacy
changeMaskType behavior. The kcp.mtu side effect on xdns type change
is preserved.

Wired into both InboundFormModal and OutboundFormModal stream tabs,
placed after the sockopt section. The component is the first Pattern A
consumer of nested Form.List inside another Form.List, so it stands
as the reference for future nested-array sub-forms.
MHSanaei 7 시간 전
부모
커밋
e978428ca3
3개의 변경된 파일457개의 추가작업 그리고 522개의 파일을 삭제
  1. 441 522
      frontend/src/components/FinalMaskForm.tsx
  2. 8 0
      frontend/src/pages/inbounds/InboundFormModal.tsx
  3. 8 0
      frontend/src/pages/xray/OutboundFormModal.tsx

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 441 - 522
frontend/src/components/FinalMaskForm.tsx


+ 8 - 0
frontend/src/pages/inbounds/InboundFormModal.tsx

@@ -64,6 +64,7 @@ import { SockoptStreamSettingsSchema } from '@/schemas/protocols/stream/sockopt'
 import { TlsStreamSettingsSchema } from '@/schemas/protocols/security/tls';
 import { TlsStreamSettingsSchema } from '@/schemas/protocols/security/tls';
 import { RealityStreamSettingsSchema } from '@/schemas/protocols/security/reality';
 import { RealityStreamSettingsSchema } from '@/schemas/protocols/security/reality';
 import DateTimePicker from '@/components/DateTimePicker';
 import DateTimePicker from '@/components/DateTimePicker';
+import FinalMaskForm from '@/components/FinalMaskForm';
 import HeaderMapEditor from '@/components/HeaderMapEditor';
 import HeaderMapEditor from '@/components/HeaderMapEditor';
 import InputAddon from '@/components/InputAddon';
 import InputAddon from '@/components/InputAddon';
 import JsonEditor from '@/components/JsonEditor';
 import JsonEditor from '@/components/JsonEditor';
@@ -2022,6 +2023,13 @@ export default function InboundFormModal({
           </Form.Item>
           </Form.Item>
         </>
         </>
       )}
       )}
+
+      <FinalMaskForm
+        name={['streamSettings', 'finalmask']}
+        network={network as string}
+        protocol={protocol}
+        form={form}
+      />
     </>
     </>
   );
   );
 
 

+ 8 - 0
frontend/src/pages/xray/OutboundFormModal.tsx

@@ -15,6 +15,7 @@ import {
 } from 'antd';
 } from 'antd';
 import { DeleteOutlined, MinusOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
 import { DeleteOutlined, MinusOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
 
 
+import FinalMaskForm from '@/components/FinalMaskForm';
 import HeaderMapEditor from '@/components/HeaderMapEditor';
 import HeaderMapEditor from '@/components/HeaderMapEditor';
 import InputAddon from '@/components/InputAddon';
 import InputAddon from '@/components/InputAddon';
 import JsonEditor from '@/components/JsonEditor';
 import JsonEditor from '@/components/JsonEditor';
@@ -2140,6 +2141,13 @@ export default function OutboundFormModal({
                       </Form.Item>
                       </Form.Item>
                     )}
                     )}
 
 
+                    <FinalMaskForm
+                      name={['streamSettings', 'finalmask']}
+                      network={network}
+                      protocol={protocol}
+                      form={form}
+                    />
+
                     {(() => {
                     {(() => {
                       const flow = (form.getFieldValue(['settings', 'flow']) ?? '') as string;
                       const flow = (form.getFieldValue(['settings', 'flow']) ?? '') as string;
                       if (!isMuxAllowed(protocol, flow, network)) return null;
                       if (!isMuxAllowed(protocol, flow, network)) return null;

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.