style: endpoint selection

src/components/metadata-list/index.tsx

@@ -57,7 +57,7 @@ const MetadataList: React.FC<MetadataListProps> = ({
     >
       {dataList.map((item, index) => (
         <ItemContainer key={index}>
-          {children ? children(item, index) : null}
+          {children?.(item, index)}
           {!disabled && (
             <Button
               size="small"

src/components/seal-form/input-number.tsx

@@ -76,6 +76,7 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
       >
         <InputNumber
           {...rest}
+          placeholder={placeholder}
           ref={inputRef}
           autoComplete="off"
           onFocus={handleOnFocus}

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

@@ -175,6 +175,7 @@ const SealCascader: React.FC<
       >
         <Cascader
           {...rest}
+          placeholder={placeholder}
           suffixIcon={<IconFont type="icon-down"></IconFont>}
           optionRender={
             optionNode

src/components/seal-form/wrapper/input.ts

@@ -179,6 +179,9 @@ const InputWrapper = styled.div`
   .ant-input-textarea-allow-clear.ant-input-affix-wrapper {
     padding: 0;
   }
+  .ant-input-number-input:placeholder-shown {
+    font-size: var(--ant-font-size);
+  }
 `;
 
 export default InputWrapper;

src/components/seal-form/wrapper/select.ts

@@ -10,6 +10,9 @@ const SelectWrapper = styled.div`
     &.dropdown-visible {
       .__wrapper__ {
         .ant-cascader.ant-select.ant-select-outlined {
+          border-color: var(--ant-input-active-border-color) !important;
+          outline: 0;
+          background-color: var(--ant-input-active-bg);
           border-bottom: none !important;
           border-radius: ${BORDERRADIUS}px ${BORDERRADIUS}px 0 0;
           transition: all 0.2s ease;
@@ -82,7 +85,7 @@ const SelectWrapper = styled.div`
         }
 
         .ant-select .ant-select-input {
-          top: 5px !important;
+          top: 5px;
         }
         .ant-select-placeholder {
           position: absolute;
@@ -93,6 +96,14 @@ const SelectWrapper = styled.div`
         .ant-select .ant-select-content {
           padding-block: 0px 0;
         }
+        .ant-select.ant-cascader {
+          .ant-select-placeholder {
+            top: 0px !important;
+          }
+          .ant-select-input {
+            top: -6px !important;
+          }
+        }
       }
     }
     .ant-select-selection-overflow-item > span {

src/pages/model-access/forms/endpoints.tsx

@@ -1,19 +1,91 @@
-import LabelSelector from '@/components/label-selector';
 import { LabelSelectorContext } from '@/components/label-selector/context';
+import MetadataList from '@/components/metadata-list';
+import SealCascader from '@/components/seal-form/seal-cascader';
+import SealInput from '@/components/seal-form/seal-input';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
+import { useState } from 'react';
 import { FormData } from '../config/types';
 
+const providerModelList = [
+  {
+    label: 'Deployments',
+    value: 'deployments',
+    children: [
+      {
+        label: 'qwen3-0.6b',
+        value: 'qwen3-0.6b',
+        key: '1',
+        provider_id: 1,
+        model_id: 101
+      },
+      {
+        label: 'deepseek',
+        value: 'deepseek',
+        key: '2',
+        provider_id: 1,
+        model_id: 102
+      }
+    ]
+  },
+  {
+    label: 'Doubao',
+    value: 'doubao',
+    children: [
+      {
+        label: 'qwen3-0.6b',
+        value: 'qwen3-0.6b',
+        key: '3',
+        provider_id: 2,
+        model_id: 201
+      },
+      {
+        label: 'deepseek',
+        value: 'deepseek',
+        key: '4',
+        provider_id: 2,
+        model_id: 202
+      }
+    ]
+  }
+];
+
 const Endpoints = () => {
   const intl = useIntl();
   const form = Form.useFormInstance<FormData>();
   const endpoints = Form.useWatch('endpoints', form);
+  const [dataList, setDataList] = useState<
+    {
+      provider_model_name: string;
+      weight: number;
+      model_id: number;
+      provider_id: number;
+    }[]
+  >(endpoints || []);
 
   const handleEndpointsChange = (labels: Record<string, any>) => {
     form.setFieldValue('endpoints', labels);
   };
 
+  const handleOnAdd = () => {
+    const newDataList = [
+      ...dataList,
+      {
+        provider_model_name: '',
+        weight: 1,
+        model_id: 0,
+        provider_id: 0
+      }
+    ];
+    setDataList(newDataList);
+  };
+
+  const handleOnDelete = (index: number, item: any) => {
+    const newDataList = dataList.filter((_, i) => i !== index);
+    setDataList(newDataList);
+  };
+
   return (
     <>
       <LabelSelectorContext.Provider
@@ -58,13 +130,39 @@ const Endpoints = () => {
             })
           ]}
         >
-          <LabelSelector
+          <MetadataList
-            isAutoComplete
             label={'Endpoints'}
-            labels={endpoints}
+            dataList={dataList}
             btnText="Add Endpoint"
-            onChange={handleEndpointsChange}
+            onAdd={handleOnAdd}
-          ></LabelSelector>
+            onDelete={handleOnDelete}
+          >
+            {(item, index) => (
+              <>
+                <SealCascader
+                  required
+                  showSearch
+                  expandTrigger="hover"
+                  multiple={false}
+                  classNames={{
+                    popup: {
+                      root: 'cascader-popup-wrapper gpu-selector'
+                    }
+                  }}
+                  maxTagCount={1}
+                  placeholder="provider/model"
+                  options={providerModelList}
+                  showCheckedStrategy="SHOW_CHILD"
+                  getPopupContainer={(triggerNode) => triggerNode.parentNode}
+                ></SealCascader>
+                <span className="seprator">:</span>
+                <SealInput.Number
+                  style={{ flex: 60 }}
+                  placeholder="weight"
+                ></SealInput.Number>
+              </>
+            )}
+          </MetadataList>
         </Form.Item>
       </LabelSelectorContext.Provider>
     </>