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
@@ -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}