From 337d93ff5115caf25f84f94333dcc731a108928f Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Tue, 20 Jan 2026 15:50:51 +0800
Subject: [PATCH] style: endpoint selection

---
 src/components/metadata-list/index.tsx     |   2 +-
 src/components/seal-form/input-number.tsx  |   1 +
 src/components/seal-form/seal-cascader.tsx |   1 +
 src/components/seal-form/wrapper/input.ts  |   3 +
 src/components/seal-form/wrapper/select.ts |  13 ++-
 src/pages/model-access/forms/endpoints.tsx | 110 +++++++++++++++++++--
 6 files changed, 122 insertions(+), 8 deletions(-)

diff --git a/src/components/metadata-list/index.tsx b/src/components/metadata-list/index.tsx
index 4ba73877..e318f8e0 100644
--- a/src/components/metadata-list/index.tsx
+++ b/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"
diff --git a/src/components/seal-form/input-number.tsx b/src/components/seal-form/input-number.tsx
index 3aadd8f5..80752e65 100644
--- a/src/components/seal-form/input-number.tsx
+++ b/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}
diff --git a/src/components/seal-form/seal-cascader.tsx b/src/components/seal-form/seal-cascader.tsx
index a9356423..a6c4f9e9 100644
--- a/src/components/seal-form/seal-cascader.tsx
+++ b/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
diff --git a/src/components/seal-form/wrapper/input.ts b/src/components/seal-form/wrapper/input.ts
index 55b6e5f4..5b26d1b7 100644
--- a/src/components/seal-form/wrapper/input.ts
+++ b/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;
diff --git a/src/components/seal-form/wrapper/select.ts b/src/components/seal-form/wrapper/select.ts
index dad53251..0849b5cf 100644
--- a/src/components/seal-form/wrapper/select.ts
+++ b/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 {
diff --git a/src/pages/model-access/forms/endpoints.tsx b/src/pages/model-access/forms/endpoints.tsx
index 17be3dc4..79cba0eb 100644
--- a/src/pages/model-access/forms/endpoints.tsx
+++ b/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
-            isAutoComplete
+          <MetadataList
             label={'Endpoints'}
-            labels={endpoints}
+            dataList={dataList}
             btnText="Add Endpoint"
-            onChange={handleEndpointsChange}
-          ></LabelSelector>
+            onAdd={handleOnAdd}
+            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>
     </>