chore: show fallback change warning

src/pages/model-routes/forms/index.tsx

@@ -14,6 +14,7 @@ import {
   useRef,
   useState
 } from 'react';
+import FormContext from '../config/form-context';
 import { FormData, RouteItem as ListItem } from '../config/types';
 import useEditTargets from '../hooks/use-edit-targets';
 import Basic from './basic';
@@ -24,6 +25,7 @@ interface ProviderFormProps {
   action: PageActionType;
   currentData?: ListItem; // Used when action is EDIT
   onFinish: (values: FormData) => Promise<void>;
+  onFallbackChange?: (changed: boolean) => void;
 }
 
 const TABKeysMap = {
@@ -34,7 +36,7 @@ const TABKeysMap = {
 };
 
 const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
-  const { action, currentData, onFinish } = props;
+  const { action, currentData, onFinish, onFallbackChange } = props;
   const intl = useIntl();
   const { getScrollElementScrollableHeight } = useWrapperContext();
   const [activeKey, setActiveKey] = useState<string[]>([TABKeysMap.BASIC]);
@@ -175,29 +177,31 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
       }}
       getScrollElementScrollableHeight={getScrollElementScrollableHeight}
     >
-      <Form
-        form={form}
-        onFinish={handleOnFinish}
-        initialValues={{
-          categories: [],
-          meta: {}
-        }}
-      >
-        <Basic />
-        <CollapsePanel
-          activeKey={activeKey}
-          accordion={false}
-          onChange={handleOnCollapseChange}
-          items={[
-            {
-              key: TABKeysMap.TARGETS,
-              label: intl.formatMessage({ id: 'routes.form.target.title' }),
-              forceRender: true,
-              children: <Targets ref={targetsRef}></Targets>
-            }
-          ]}
-        ></CollapsePanel>
-      </Form>
+      <FormContext.Provider value={{ onFallbackChange, action, currentData }}>
+        <Form
+          form={form}
+          onFinish={handleOnFinish}
+          initialValues={{
+            categories: [],
+            meta: {}
+          }}
+        >
+          <Basic />
+          <CollapsePanel
+            activeKey={activeKey}
+            accordion={false}
+            onChange={handleOnCollapseChange}
+            items={[
+              {
+                key: TABKeysMap.TARGETS,
+                label: intl.formatMessage({ id: 'routes.form.target.title' }),
+                forceRender: true,
+                children: <Targets ref={targetsRef}></Targets>
+              }
+            ]}
+          ></CollapsePanel>
+        </Form>
+      </FormContext.Provider>
     </ScrollSpyTabs>
   );
 });

src/pages/model-routes/forms/targets.tsx

@@ -1,21 +1,31 @@
 import MetadataList from '@/components/metadata-list';
 import SealCascader from '@/components/seal-form/seal-cascader';
 import SealInput from '@/components/seal-form/seal-input';
+import { PageAction } from '@/config';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
-import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from 'react';
+import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
 import useTargetSourceModels from '../hooks/use-target-source-models';
 
 const TargetsForm = forwardRef((props, ref) => {
+  const { onFallbackChange, action } = useFormContext();
   const intl = useIntl();
   const { getRuleMessage } = useAppUtils();
   const { sourceModels, fetchSourceModels } = useTargetSourceModels();
   const [validTriggered, setValidTriggered] = useState<boolean>(false);
   const form = Form.useFormInstance<FormData>();
   const targets = Form.useWatch('targets', form) || [];
+  const fallbackCacheRef = useRef<{ value: any[] }>({ value: [] });
   const [fallbackValues, setFallbackValues] = useState<{ value: any[] }>({
     value: []
   });
@@ -29,6 +39,7 @@ const TargetsForm = forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({
     initFallbackValues: (values: { value: any[] }) => {
       setFallbackValues(values);
+      fallbackCacheRef.current = values;
     },
     initDataList: (
       list: {
@@ -105,6 +116,10 @@ const TargetsForm = forwardRef((props, ref) => {
     setFallbackValues({
       value: value
     });
+    if (action === PageAction.EDIT) {
+      const isEqual = _.isEqual(fallbackCacheRef.current.value, value);
+      onFallbackChange?.(!isEqual);
+    }
   };
 
   const handleOnWeightChange = (value: any, index: number) => {