chore: quick create route

src/atoms/routes.ts

@@ -0,0 +1,6 @@
+import { atom } from 'jotai';
+
+export const registerRouteConfigAtom = atom<Record<string, any>>({
+  initialValues: null,
+  create: false
+});

src/components/seal-form/seal-textarea.tsx

@@ -96,8 +96,6 @@ const SealTextArea: React.FC<InputTextareaProps & SealFormItemProps> = (
     onInput?.(e);
   };
 
-  console.log('style=========', style, rest);
-
   return (
     <InputWrapper className="textarea-input-wrapper">
       <Wrapper

src/locales/en-US/clusters.ts

@@ -52,9 +52,9 @@ export default {
   'clusters.addworker.nvidiaNotes-02':
     'If a model directory already exists on the worker, you can specify the path to mount it.',
   'clusters.addworker.hygonNotes': `If <span class="bold-text">/opt/hyhal</span> or <span class="bold-text">/opt/dtk</span> does not exist, create symbolic links pointing to the corresponding Hygon installation paths, for example: <span class="desc-fill">ln -s /path/to/hyhal /opt/hyhal</span> <span class="desc-fill">ln -s /path/to/dtk /opt/dtk</span>.`,
-  'clusters.addworker.corexNotes': `If the <span class="bold-text">/lib/modules</span> directory does not exist, create a symbolic link to the Iluvatar installation path:  
+  'clusters.addworker.corexNotes': `If the <span class="bold-text">/lib/modules</span> directory does not exist, create a symbolic link to the Iluvatar SDK installation path:  
 <span class="bold-text">ln -s /path/to/corex /lib/modules</span>. Same applies to the <span class="bold-text">/usr/local/corex</span> directory.`,
-  'clusters.addworker.metaxNotes': `If the <span class="bold-text">/opt/mxdriver</span> directory does not exist, create a symbolic link to the MetaX installation path:  
+  'clusters.addworker.metaxNotes': `If the <span class="bold-text">/opt/mxdriver</span> directory does not exist, create a symbolic link to the MetaX driver and SDK installation path:  
 <span class="bold-text">ln -s /path/to/metax /opt/mxdriver</span>. Same applies to the <span class="bold-text">/opt/maca</span> directory.`,
   'clusters.addworker.cambriconNotes': `If the <span class="bold-text">/usr/local/neuware</span> directory does not exist, create a symbolic link to the Cambricon installation path:  
 <span class="bold-text">ln -s /path/to/neuware /usr/local/neuware</span>.`,

src/locales/en-US/provider.ts

@@ -22,5 +22,6 @@ export default {
   'providers.form.rules.models': 'Please select at least one model',
   'providers.form.rules.tokens': 'Please enter a valid API Key',
   'providers.form.rules.model': 'Please select a model',
-  'providers.form.model.duplicate': 'Duplicate model exists'
+  'providers.form.model.duplicate': 'Duplicate model exists',
+  'providers.table.registerRoute': 'Register Route'
 };

src/locales/ja-JP/clusters.ts

@@ -52,9 +52,9 @@ export default {
   'clusters.addworker.nvidiaNotes-02':
     'If a model directory already exists on the worker, you can specify the path to mount it.',
   'clusters.addworker.hygonNotes': `If <span class="bold-text">/opt/hyhal</span> or <span class="bold-text">/opt/dtk</span> does not exist, create symbolic links pointing to the corresponding Hygon installation paths, for example: <span class="desc-fill">ln -s /path/to/hyhal /opt/hyhal</span> <span class="desc-fill">ln -s /path/to/dtk /opt/dtk</span>.`,
-  'clusters.addworker.corexNotes': `If the <span class="bold-text">/lib/modules</span> directory does not exist, create a symbolic link to the Iluvatar installation path:  
+  'clusters.addworker.corexNotes': `If the <span class="bold-text">/lib/modules</span> directory does not exist, create a symbolic link to the Iluvatar SDK installation path:  
 <span class="bold-text">ln -s /path/to/corex /lib/modules</span>. Same applies to the <span class="bold-text">/usr/local/corex</span> directory.`,
-  'clusters.addworker.metaxNotes': `If the <span class="bold-text">/opt/mxdriver</span> directory does not exist, create a symbolic link to the MetaX installation path:  
+  'clusters.addworker.metaxNotes': `If the <span class="bold-text">/opt/mxdriver</span> directory does not exist, create a symbolic link to the MetaX driver and SDK installation path:  
 <span class="bold-text">ln -s /path/to/metax /opt/mxdriver</span>. Same applies to the <span class="bold-text">/opt/maca</span> directory.`,
   'clusters.addworker.cambriconNotes': `If the <span class="bold-text">/usr/local/neuware</span> directory does not exist, create a symbolic link to the Cambricon installation path:  
 <span class="bold-text">ln -s /path/to/neuware /usr/local/neuware</span>.`,
@@ -179,8 +179,8 @@ export default {
 // 44. 'clusters.addworker.nvidiaNotes-01': 'If multiple outbound IPs exist, specify the one you want the worker to use. Please double-check with <span class="bold-text">hostname -I | xargs -n1</span>.',
 // 45. 'clusters.addworker.nvidiaNotes-02': 'If a model directory already exists on the worker, you can specify the path to mount it.',
 // 46. 'clusters.addworker.hygonNotes': `If <span class="bold-text">/opt/hyhal</span> or <span class="bold-text">/opt/dtk</span> does not exist, create symbolic links pointing to the corresponding Hygon installation paths, for example: <span class="desc-fill">ln -s /path/to/hyhal /opt/hyhal</span> <span class="desc-fill">ln -s /path/to/dtk /opt/dtk</span>.`,
-// 47. 'clusters.addworker.corexNotes': 'If the <span class="bold-text">/lib/modules</span> directory does not exist, create a symbolic link to the Iluvatar installation path: <span class="bold-text">ln -s /path/to/corex /lib/modules</span>. Same applies to the <span class="bold-text">/usr/local/corex</span> directory.',
+// 47. 'clusters.addworker.corexNotes': 'If the <span class="bold-text">/lib/modules</span> directory does not exist, create a symbolic link to the Iluvatar SDK installation path: <span class="bold-text">ln -s /path/to/corex /lib/modules</span>. Same applies to the <span class="bold-text">/usr/local/corex</span> directory.',
-// 48. 'clusters.addworker.metaxNotes': 'If the <span class="bold-text">/opt/mxdriver</span> directory does not exist, create a symbolic link to the MetaX installation path: <span class="bold-text">ln -s /path/to/metax /opt/mxdriver</span>. Same applies to the <span class="bold-text">/opt/maca</span> directory.',
+// 48. 'clusters.addworker.metaxNotes': 'If the <span class="bold-text">/opt/mxdriver</span> directory does not exist, create a symbolic link to the MetaX driver and SDK installation path: <span class="bold-text">ln -s /path/to/metax /opt/mxdriver</span>. Same applies to the <span class="bold-text">/opt/maca</span> directory.',
 // 49. 'clusters.addworker.cambriconNotes': 'If the <span class="bold-text">/usr/local/neuware</span> directory does not exist, create a symbolic link to the Cambricon installation path: <span class="bold-text">ln -s /path/to/neuware /usr/local/neuware</span>.'
 // 50. 'clusters.addworker.hygonNotes-02': 'If device detection fails, try removing <span class="bold-text">--env ROCM_SMI_LIB_PATH=/opt/hyhal/lib</span>.',
 // 51.  'clusters.addworker.selectCluster': 'Select Cluster',

src/locales/ja-JP/provider.ts

@@ -22,5 +22,6 @@ export default {
   'providers.form.rules.models': 'Please select at least one model',
   'providers.form.rules.tokens': 'Please enter a valid API Key',
   'providers.form.rules.model': 'Please select a model',
-  'providers.form.model.duplicate': 'Duplicate model exists'
+  'providers.form.model.duplicate': 'Duplicate model exists',
+  'providers.table.registerRoute': 'Register Route'
 };

src/locales/ru-RU/clusters.ts

@@ -53,9 +53,9 @@ export default {
     'Если директория с моделями уже существует на воркере, вы можете указать путь для её монтирования.',
   'clusters.addworker.hygonNotes': `If <span class="bold-text">/opt/hyhal</span> or <span class="bold-text">/opt/dtk</span> does not exist, create symbolic links pointing to the corresponding Hygon installation paths, for example: <span class="desc-fill">ln -s /path/to/hyhal /opt/hyhal</span> <span class="desc-fill">ln -s /path/to/dtk /opt/dtk</span>.`,
   'clusters.addworker.corexNotes':
-    'Если директория <span class="bold-text">/lib/modules</span> не существует, создайте символическую ссылку на путь установки Iluvatar: <span class="bold-text">ln -s /path/to/corex /lib/modules</span>. Аналогично для директории <span class="bold-text">/usr/local/corex</span>.',
+    'Если директория <span class="bold-text">/lib/modules</span> не существует, создайте символическую ссылку на путь установки Iluvatar SDK: <span class="bold-text">ln -s /path/to/corex /lib/modules</span>. Аналогично для директории <span class="bold-text">/usr/local/corex</span>.',
   'clusters.addworker.metaxNotes':
-    'Если директория <span class="bold-text">/opt/mxdriver</span> не существует, создайте символическую ссылку на путь установки MetaX: <span class="bold-text">ln -s /path/to/metax /opt/mxdriver</span>. Аналогично для директории <span class="bold-text">/opt/maca</span>.',
+    'Если директория <span class="bold-text">/opt/mxdriver</span> не существует, создайте символическую ссылку на путь установки MetaX SDK: <span class="bold-text">ln -s /path/to/metax /opt/mxdriver</span>. Аналогично для директории <span class="bold-text">/opt/maca</span>.',
   'clusters.addworker.cambriconNotes':
     'Если директория <span class="bold-text">/usr/local/neuware</span> не существует, создайте символическую ссылку на путь установки Cambricon: <span class="bold-text">ln -s /path/to/neuware /usr/local/neuware</span>.',
   'clusters.addworker.hygonNotes-02':

src/locales/ru-RU/provider.ts

@@ -22,5 +22,6 @@ export default {
   'providers.form.rules.models': 'Please select at least one model',
   'providers.form.rules.tokens': 'Please enter a valid API Key',
   'providers.form.rules.model': 'Please select a model',
-  'providers.form.model.duplicate': 'Duplicate model exists'
+  'providers.form.model.duplicate': 'Duplicate model exists',
+  'providers.table.registerRoute': 'Register Route'
 };

src/locales/zh-CN/clusters.ts

@@ -53,9 +53,9 @@ export default {
   <span class="desc-fill line-6">ln -s /path/to/hyhal /opt/hyhal</span>
   <span class="desc-fill line-6">ln -s /path/to/dtk /opt/dtk</span>`,
   'clusters.addworker.corexNotes':
-    '如果 <span class="bold-text">/lib/modules</span> 目录不存在，请创建指向天数智芯安装路径的符号链接：<span class="bold-text">ln -s /path/to/corex /lib/modules</span>。与 <span class="bold-text">/usr/local/corex</span> 目录相同。',
+    '如果 <span class="bold-text">/lib/modules</span> 目录不存在，请创建指向天数智芯 SDK 安装路径的符号链接：<span class="bold-text">ln -s /path/to/corex /lib/modules</span>。与 <span class="bold-text">/usr/local/corex</span> 目录相同。',
   'clusters.addworker.metaxNotes':
-    '如果 <span class="bold-text">/opt/mxdriver</span> 目录不存在，请创建指向沐曦安装路径的符号链接：<span class="bold-text">ln -s /path/to/metax /opt/mxdriver</span>。与 <span class="bold-text">/opt/maca</span> 目录相同。',
+    '如果 <span class="bold-text">/opt/mxdriver</span> 目录不存在，请创建指向沐曦驱动和 SDK 安装路径的符号链接：<span class="bold-text">ln -s /path/to/metax /opt/mxdriver</span>。与 <span class="bold-text">/opt/maca</span> 目录相同。',
   'clusters.addworker.cambriconNotes':
     '如果 <span class="bold-text">/usr/local/neuware</span> 目录不存在，请创建指向寒武纪安装路径的符号链接：<span class="bold-text">ln -s /path/to/neuware /usr/local/neuware</span>。',
   'clusters.addworker.hygonNotes-02':

src/locales/zh-CN/provider.ts

@@ -22,5 +22,6 @@ export default {
   'providers.form.rules.models': '请选择至少一个模型',
   'providers.form.rules.tokens': '请输入有效的 API Key',
   'providers.form.rules.model': '请选择模型',
-  'providers.form.model.duplicate': '存在相同的模型'
+  'providers.form.model.duplicate': '存在相同的模型',
+  'providers.table.registerRoute': '注册路由'
 };

src/pages/maas-provider/config/index.ts

@@ -30,6 +30,11 @@ export const rowActionList = [
     label: 'common.button.edit',
     icon: icons.EditOutlined
   },
+  {
+    key: 'registerRoute',
+    label: 'providers.table.registerRoute',
+    icon: icons.CaptivePortal
+  },
   {
     key: 'copy',
     label: 'common.button.clone',

src/pages/maas-provider/forms/supported-models.tsx

@@ -98,7 +98,7 @@ const SupportedModels = () => {
               if (!value || value.length === 0) {
                 return Promise.reject(
                   new Error(
-                    getRuleMessage('input', 'providers.form.rules.models')
+                    intl.formatMessage({ id: 'providers.form.rules.models' })
                   )
                 );
               }
@@ -106,7 +106,7 @@ const SupportedModels = () => {
               if (value.some((item: ProviderModel) => !item.name)) {
                 return Promise.reject(
                   new Error(
-                    getRuleMessage('select', 'providers.form.rules.model')
+                    intl.formatMessage({ id: 'providers.form.rules.model' })
                   )
                 );
               }

src/pages/maas-provider/hooks/use-provider-columns.tsx

@@ -1,10 +1,10 @@
 // columns.ts
 import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
-import { SealColumnProps } from '@/components/seal-table/types';
 import { tableSorter } from '@/config/settings';
 import { useIntl } from '@umijs/max';
 import { Tag } from 'antd';
+import { ColumnsType } from 'antd/lib/table';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
 import ProviderLogo from '../components/provider-logo';
@@ -16,10 +16,18 @@ import { MaasProviderItem, ProviderModel } from '../config/types';
 const useProviderColumns = (
   handleSelect: (val: string, record: MaasProviderItem) => void,
   onCellClick?: (record: MaasProviderItem, dataIndex: string) => void
-): SealColumnProps[] => {
+): ColumnsType<MaasProviderItem> => {
   const intl = useIntl();
 
   return useMemo(() => {
+    const setActionList = (record: MaasProviderItem) => {
+      return rowActionList.filter((action) => {
+        if (action.key === 'registerRoute') {
+          return record.models && record.models.length > 0;
+        }
+        return true;
+      });
+    };
     return [
       {
         title: intl.formatMessage({ id: 'common.table.name' }),
@@ -84,7 +92,7 @@ const useProviderColumns = (
         minWidth: 120,
         render: (value: string, record: MaasProviderItem) => (
           <DropdownButtons
-            items={rowActionList}
+            items={setActionList(record)}
             onSelect={(val) => handleSelect(val, record)}
           ></DropdownButtons>
         )

src/pages/maas-provider/hooks/use-register-route.ts

@@ -0,0 +1,36 @@
+import { registerRouteConfigAtom } from '@/atoms/routes';
+import { modelCategoriesMap } from '@/pages/llmodels/config';
+import { useNavigate } from '@umijs/max';
+import { useAtom } from 'jotai';
+
+const useRegisterRoute = () => {
+  const navigate = useNavigate();
+  const [, setRegisterRouteConfig] = useAtom(registerRouteConfigAtom);
+
+  const handleRegisterRoute = (record: any) => {
+    const model = record.models?.[0] || {};
+    const initialValues = {
+      name: model.name || '',
+      categories: [model.category || modelCategoriesMap.llm],
+      routeTargets: [
+        {
+          weight: 100,
+          provider_model_name: model.name,
+          provider_id: record.id,
+          parentId: record.id
+        }
+      ]
+    };
+    setRegisterRouteConfig({
+      initialValues,
+      create: true
+    });
+    navigate('/models/routes');
+  };
+
+  return {
+    handleRegisterRoute
+  };
+};
+
+export default useRegisterRoute;

src/pages/maas-provider/index.tsx

@@ -1,15 +1,12 @@
-import { expandKeysAtom } from '@/atoms/clusters';
 import DeleteModal from '@/components/delete-modal';
 import IconFont from '@/components/icon-font';
 import { FilterBar } from '@/components/page-tools';
 import { PageAction } from '@/config';
 import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
-import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { ConfigProvider, message, Table } from 'antd';
-import { useAtom } from 'jotai';
 import _ from 'lodash';
 import NoResult from '../_components/no-result';
 import PageBox from '../_components/page-box';
@@ -24,6 +21,7 @@ import AddMaasProvider from './components/add-provider-modal';
 import { FormData, MaasProviderItem as ListItem } from './config/types';
 import useCreateProvider from './hooks/use-create-provider';
 import useProviderColumns from './hooks/use-provider-columns';
+import useRegisterRoute from './hooks/use-register-route';
 
 const MaasProvider: React.FC = () => {
   const {
@@ -45,10 +43,8 @@ const MaasProvider: React.FC = () => {
     API: MAAS_PROVIDERS_API,
     contentForDelete: 'menu.models.providers'
   });
-  const [expandAtom] = useAtom(expandKeysAtom);
-  const { handleExpandChange, handleExpandAll, expandedRowKeys } =
-    useExpandedRowKeys(expandAtom);
   const intl = useIntl();
+  const { handleRegisterRoute } = useRegisterRoute();
   const { openProviderModalStatus, openProviderModal, closeProviderModal } =
     useCreateProvider({
       refresh: handleSearch
@@ -117,6 +113,10 @@ const MaasProvider: React.FC = () => {
         }
       );
     }
+
+    if (val === 'registerRoute') {
+      handleRegisterRoute(row);
+    }
   });
 
   const renderEmpty = (type?: string) => {

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

@@ -10,6 +10,7 @@ import ModelRouteForm from '../forms';
 type AddModalProps = {
   title: string;
   action: PageActionType;
+  realAction?: string;
   open: boolean;
   currentData?: ListItem; // Used when action is EDIT
   onOk: (values: FormData) => void;
@@ -18,6 +19,7 @@ type AddModalProps = {
 const AddProvider: React.FC<AddModalProps> = ({
   title,
   action,
+  realAction,
   open,
   currentData,
   onOk,
@@ -75,8 +77,10 @@ const AddProvider: React.FC<AddModalProps> = ({
       <ModelRouteForm
         ref={form}
         action={action}
+        realAction={realAction}
         currentData={currentData}
         onFinish={onFinish}
+        open={open}
         onFallbackChange={(changed: boolean) => {
           setIsChanged(changed);
         }}

src/pages/model-routes/config/form-context.ts

@@ -4,6 +4,7 @@ import { createContext, useContext } from 'react';
 interface FormContextProps {
   onFallbackChange?: (changed: boolean) => void;
   action?: PageActionType;
+  realAction?: string;
   currentData?: any;
 }
 

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

@@ -4,6 +4,7 @@ import { PageActionType } from '@/config/types';
 import CollapsePanel from '@/pages/_components/collapse-panel';
 import { useWrapperContext } from '@/pages/_components/column-wrapper/use-wrapper-context';
 import ScrollSpyTabs from '@/pages/_components/scroll-spy-tabs';
+import { modelCategoriesMap } from '@/pages/llmodels/config';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
@@ -22,8 +23,17 @@ import Targets from './targets';
 
 interface ProviderFormProps {
   ref?: any;
+  open: boolean;
   action: PageActionType;
-  currentData?: ListItem; // Used when action is EDIT
+  realAction?: string;
+  currentData?: ListItem & {
+    routeTargets?: {
+      weight?: number;
+      model_id?: number;
+      provider_id?: number;
+      provider_model_name?: string;
+    }[];
+  }; // Used when action is EDIT
   onFinish: (values: FormData) => Promise<void>;
   onFallbackChange?: (changed: boolean) => void;
 }
@@ -36,14 +46,16 @@ const TABKeysMap = {
 };
 
 const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
-  const { action, currentData, onFinish, onFallbackChange } = props;
   const intl = useIntl();
+  const { action, realAction, currentData, open, onFinish, onFallbackChange } =
+    props;
   const { getScrollElementScrollableHeight } = useWrapperContext();
   const [activeKey, setActiveKey] = useState<string[]>([TABKeysMap.BASIC]);
   const [form] = Form.useForm();
   const scrollTabsRef = useRef<any>(null);
   const targetsRef = useRef<any>(null);
   const { generateTargetData, fetchTargets } = useEditTargets();
+
   const segmentOptions = [
     {
       value: TABKeysMap.BASIC,
@@ -117,7 +129,32 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
     setActiveKey(Array.isArray(keys) ? keys : [keys]);
   };
 
+  // init form values
   useEffect(() => {
+    if (!open) {
+      form.resetFields();
+      return;
+    }
+
+    const initDataList = async (
+      targets: {
+        weight?: number;
+        model_id?: number;
+        provider_id?: number;
+        provider_model_name?: string;
+      }[]
+    ) => {
+      // init targets form list
+      targetsRef.current?.initDataList(
+        targets?.map((ep) => ({
+          weight: ep.weight,
+          value: ep.model_id
+            ? ['deployments', ep.model_id]
+            : [ep.provider_id, ep.provider_model_name]
+        })) || []
+      );
+    };
+
     const initEditionForm = async () => {
       const targetList = await fetchTargets(currentData!.id);
       const { targets, fallbackTarget } = generateTargetData(targetList);
@@ -129,15 +166,7 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
         fallback_target: fallbackTarget
       });
 
-      // init targets form list
+      initDataList(targets);
-      targetsRef.current?.initDataList(
-        targets?.map((ep) => ({
-          weight: ep.weight,
-          value: ep.model_id
-            ? ['deployments', ep.model_id]
-            : [ep.provider_id, ep.provider_model_name]
-        })) || []
-      );
 
       // init fallback value
       if (fallbackTarget) {
@@ -148,12 +177,22 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
         });
       }
     };
+
+    const initRegisterForm = () => {
+      form.setFieldsValue({
+        ...currentData,
+        targets: currentData?.routeTargets || []
+      });
+      initDataList(currentData?.routeTargets || []);
+    };
+
+    // --- register from provider page ---
     if (action === PageAction.EDIT && currentData) {
       initEditionForm();
-    } else {
+    } else if (realAction === 'register' && currentData) {
-      form.resetFields();
+      initRegisterForm();
     }
-  }, [action, currentData, form]);
+  }, [action, currentData, form, open, realAction]);
 
   useImperativeHandle(ref, () => ({
     submit: () => {
@@ -177,12 +216,14 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
       }}
       getScrollElementScrollableHeight={getScrollElementScrollableHeight}
     >
-      <FormContext.Provider value={{ onFallbackChange, action, currentData }}>
+      <FormContext.Provider
+        value={{ onFallbackChange, action, realAction, currentData }}
+      >
         <Form
           form={form}
           onFinish={handleOnFinish}
           initialValues={{
-            categories: [],
+            categories: [modelCategoriesMap.llm],
             meta: {}
           }}
         >

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

@@ -102,6 +102,7 @@ const TargetsForm = forwardRef((props, ref) => {
         value: []
       }
     ];
+
     form.setFieldValue('targets', newTargets);
   };
 
@@ -239,6 +240,12 @@ const TargetsForm = forwardRef((props, ref) => {
     fetchSourceModels();
   }, []);
 
+  useEffect(() => {
+    if (action === PageAction.CREATE) {
+      handleOnAdd();
+    }
+  }, [action]);
+
   return (
     <>
       <Form.Item

src/pages/model-routes/hooks/use-create-route.ts

@@ -11,10 +11,12 @@ const useCreateRoute = (options?: { refresh: () => void }) => {
     action: PageActionType;
     currentData?: ListItem;
     title: string;
+    realAction?: string;
   }>({
     open: false,
     action: PageAction.CREATE,
     currentData: undefined,
+    realAction: undefined,
     title: ''
   });
 
@@ -32,6 +34,21 @@ const useCreateRoute = (options?: { refresh: () => void }) => {
     saveScrollHeight();
   };
 
+  const registerRoute = (
+    action: PageActionType,
+    title: string,
+    currentData?: ListItem
+  ) => {
+    setOpenModalStatus({
+      open: true,
+      action,
+      realAction: 'register',
+      currentData,
+      title: title
+    });
+    saveScrollHeight();
+  };
+
   const closeModal = () => {
     setOpenModalStatus({
       open: false,
@@ -46,6 +63,7 @@ const useCreateRoute = (options?: { refresh: () => void }) => {
     openRouteModalStatus: openModalStatus,
     setOpenRouteModalStatus: setOpenModalStatus,
     openRouteModal: openModal,
+    registerRouteModal: registerRoute,
     closeRouteModal: closeModal
   };
 };

src/pages/model-routes/index.tsx

@@ -1,4 +1,5 @@
 import { expandKeysAtom } from '@/atoms/clusters';
+import { registerRouteConfigAtom } from '@/atoms/routes';
 import DeleteModal from '@/components/delete-modal';
 import IconFont from '@/components/icon-font';
 import { FilterBar } from '@/components/page-tools';
@@ -73,8 +74,12 @@ const ModelRoutes: React.FC = () => {
     expandedRowKeys
   } = useExpandedRowKeys(expandAtom);
   const intl = useIntl();
-  const { openRouteModalStatus, openRouteModal, closeRouteModal } =
+  const {
-    useCreateRoute();
+    openRouteModalStatus,
+    openRouteModal,
+    registerRouteModal,
+    closeRouteModal
+  } = useCreateRoute();
   const {
     openAccessControlModal,
     closeAccessControlModal,
@@ -83,6 +88,9 @@ const ModelRoutes: React.FC = () => {
   const { sourceModels, fetchSourceModels } = useTargetSourceModels();
   const { handleOpenPlayGround } = useOpenPlayground();
   const { apiAccessInfo, openViewAPIInfo, closeViewAPIInfo } = useViewApIInfo();
+  const [registerRouteConfig, setRegisterRouteConfig] = useAtom(
+    registerRouteConfigAtom
+  );
   const [modelList, setModelsList] = useState<Global.BaseOption<number>[]>([]);
 
   useEffect(() => {
@@ -102,6 +110,14 @@ const ModelRoutes: React.FC = () => {
     fetchModels();
   }, []);
 
+  const handleCloseRouteModal = () => {
+    closeRouteModal();
+    setRegisterRouteConfig({
+      initialValues: null,
+      create: false
+    });
+  };
+
   const handleClickDropdown = () => {
     openRouteModal(
       PageAction.CREATE,
@@ -131,14 +147,14 @@ const ModelRoutes: React.FC = () => {
         updateExpandedRowKeys([data.id, ...expandedRowKeys]);
       }
       fetchData();
-      closeRouteModal();
+      handleCloseRouteModal();
       message.success(intl.formatMessage({ id: 'common.message.success' }));
     } catch (error) {}
   };
 
   const handleModalCancel = () => {
     console.log('handleModalCancel');
-    closeRouteModal();
+    handleCloseRouteModal();
   };
 
   const handleEditProvider = (row: ListItem) => {
@@ -247,6 +263,16 @@ const ModelRoutes: React.FC = () => {
     fetchSourceModels();
   }, []);
 
+  useEffect(() => {
+    if (registerRouteConfig.create && dataSource.loadend) {
+      registerRouteModal(
+        PageAction.CREATE,
+        intl.formatMessage({ id: 'routes.button.add' }),
+        registerRouteConfig.initialValues
+      );
+    }
+  }, [registerRouteConfig, dataSource.loadend]);
+
   const columns = useRoutesColumns(handleSelect);
 
   return (
@@ -318,6 +344,7 @@ const ModelRoutes: React.FC = () => {
       </PageBox>
       <AddRouteModal
         open={openRouteModalStatus.open}
+        realAction={openRouteModalStatus.realAction}
         action={openRouteModalStatus.action}
         title={openRouteModalStatus.title}
         currentData={openRouteModalStatus.currentData}