chore: show fallback change warning

src/pages/model-routes/components/add-route-modal.tsx

@@ -1,8 +1,10 @@
+import AlertBlockInfo from '@/components/alert-info/block';
+import ModalFooter from '@/components/modal-footer';
 import { PageActionType } from '@/config/types';
 import FormDrawer from '@/pages/_components/form-drawer';
+import { useIntl } from '@umijs/max';
 import React, { useRef } from 'react';
 import { FormData, RouteItem as ListItem } from '../config/types';
-
 import ModelRouteForm from '../forms';
 
 type AddModalProps = {
@@ -21,6 +23,8 @@ const AddProvider: React.FC<AddModalProps> = ({
   onOk,
   onCancel
 }) => {
+  const intl = useIntl();
+  const [isChanged, setIsChanged] = React.useState(false);
   const form = useRef<any>(null);
 
   const handleSubmit = () => {
@@ -45,12 +49,37 @@ const AddProvider: React.FC<AddModalProps> = ({
       onCancel={handleCancel}
       onSubmit={handleSubmit}
       width={600}
+      footer={
+        <div style={{ paddingInline: 24, paddingBottom: 8 }}>
+          {isChanged && (
+            <AlertBlockInfo
+              type="warning"
+              contentStyle={{ paddingInline: 0 }}
+              message={intl.formatMessage({
+                id: 'routes.form.fallback.warning'
+              })}
+            ></AlertBlockInfo>
+          )}
+          <ModalFooter
+            onOk={handleSubmit}
+            onCancel={onCancel}
+            styles={{
+              wrapper: {
+                paddingTop: 16
+              }
+            }}
+          ></ModalFooter>
+        </div>
+      }
     >
       <ModelRouteForm
         ref={form}
         action={action}
         currentData={currentData}
         onFinish={onFinish}
+        onFallbackChange={(changed: boolean) => {
+          setIsChanged(changed);
+        }}
       />
     </FormDrawer>
   );