chore: quick create route

2026-02-12 12:20:05 +08:00
parent b21fe0ac4c
commit 07664b5f22
21 changed files with 202 additions and 47 deletions
@@ -0,0 +1,6 @@
+import { atom } from 'jotai';
+
+export const registerRouteConfigAtom = atom<Record<string, any>>({
+  initialValues: null,
+  create: false
+});
@@ -96,8 +96,6 @@ const SealTextArea: React.FC<InputTextareaProps & SealFormItemProps> = (
    onInput?.(e);
  };

-  console.log('style=========', style, rest);
-
  return (
    <InputWrapper className="textarea-input-wrapper">
      <Wrapper
@@ -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>.`,
@@ -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'
 };
@@ -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.',
-// 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.',
+// 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 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',
@@ -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'
 };
@@ -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':
@@ -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'
 };
@@ -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':
@@ -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': '注册路由'
 };
@@ -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',
@@ -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' })
                  )
                );
              }
@@ -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>
        )
@@ -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;
@@ -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) => {
@@ -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);
        }}
@@ -4,6 +4,7 @@ import { createContext, useContext } from 'react';
 interface FormContextProps {
  onFallbackChange?: (changed: boolean) => void;
  action?: PageActionType;
+  realAction?: string;
  currentData?: any;
 }

@@ -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
-      targetsRef.current?.initDataList(
-        targets?.map((ep) => ({
-          weight: ep.weight,
-          value: ep.model_id
-            ? ['deployments', ep.model_id]
-            : [ep.provider_id, ep.provider_model_name]
-        })) || []
-      );
+      initDataList(targets);

      // 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 {
-      form.resetFields();
+    } else if (realAction === 'register' && currentData) {
+      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: {}
          }}
        >
@@ -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
@@ -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
  };
 };
@@ -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 } =
-    useCreateRoute();
+  const {
+    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}