✨ feat(pricing+endpoints+ui): wire custom endpoint mapping end‑to‑end and overhaul visual JSON editor

Backend (Go)
- Include custom endpoints in each model’s SupportedEndpointTypes by parsing Model.Endpoints (JSON) and appending keys alongside native endpoint types.
- Build a global supportedEndpointMap map[string]EndpointInfo{path, method} by:
  - Seeding with native defaults.
  - Overriding/adding from models.endpoints (accepts string path → default POST, or {path, method}).
- Expose supported_endpoint at the top level of /api/pricing (vendors-like), removing per-model duplication.
- Fix default path for EndpointTypeOpenAIResponse to /v1/responses.
- Keep concurrency/caching for pricing retrieval intact.

Frontend (React)
- Fetch supported_endpoint in useModelPricingData and propagate to PricingPage → ModelDetailSideSheet → ModelEndpoints.
- ModelEndpoints
  - Resolve path+method via endpointMap; replace {model} with actual model name.
  - Fix mobile visibility; always show path and HTTP method.
- JSONEditor
  - Wrap with Form.Slot to inherit form layout; simplify visual styles.
  - Use Tabs for “Visual” / “Manual” modes.
  - Unify editors: key-value editor now supports nested JSON:
    - “+” to convert a primitive into an object and add nested fields.
    - Add “Convert to value” for two‑way toggle back from object.
    - Stable key rename without reordering rows; new rows append at bottom.
    - Use Row/Col grid for clean alignment; region editor uses Form.Slot + grid.
- Editing flows
  - EditModelModal / EditPrefillGroupModal use JSONEditor (editorType='object') for endpoint mappings.
  - PrefillGroupManagement renders endpoint group items by JSON keys.

Data expectations / compatibility
- models.endpoints should be a JSON object mapping endpoint type → string path or {path, method}. Strings default to POST.
- No schema changes; existing TEXT field continues to store JSON.

QA
- /api/pricing now returns custom endpoint types and global supported_endpoint.
- UI shows both native and custom endpoints; paths/methods render on mobile; nested editing works and preserves order.

common/endpoint_defaults.go

@@ -0,0 +1,32 @@
+package common
+
+import "one-api/constant"
+
+// EndpointInfo 描述单个端点的默认请求信息
+// path: 上游路径
+// method: HTTP 请求方式，例如 POST/GET
+// 目前均为 POST，后续可扩展
+//
+// json 标签用于直接序列化到 API 输出
+// 例如：{"path":"/v1/chat/completions","method":"POST"}
+
+type EndpointInfo struct {
+    Path   string `json:"path"`
+    Method string `json:"method"`
+}
+
+// defaultEndpointInfoMap 保存内置端点的默认 Path 与 Method
+var defaultEndpointInfoMap = map[constant.EndpointType]EndpointInfo{
+    constant.EndpointTypeOpenAI:          {Path: "/v1/chat/completions", Method: "POST"},
+    constant.EndpointTypeOpenAIResponse:  {Path: "/v1/responses", Method: "POST"},
+    constant.EndpointTypeAnthropic:       {Path: "/v1/messages", Method: "POST"},
+    constant.EndpointTypeGemini:          {Path: "/v1beta/models/{model}:generateContent", Method: "POST"},
+    constant.EndpointTypeJinaRerank:      {Path: "/rerank", Method: "POST"},
+    constant.EndpointTypeImageGeneration: {Path: "/v1/images/generations", Method: "POST"},
+}
+
+// GetDefaultEndpointInfo 返回指定端点类型的默认信息以及是否存在
+func GetDefaultEndpointInfo(et constant.EndpointType) (EndpointInfo, bool) {
+    info, ok := defaultEndpointInfoMap[et]
+    return info, ok
+}

controller/pricing.go

@@ -44,6 +44,7 @@ func GetPricing(c *gin.Context) {
 		"vendors":      model.GetVendors(),
 		        "group_ratio":  groupRatio,
         "usable_group": usableGroup,
+        "supported_endpoint": model.GetSupportedEndpointMap(),
     })
 }
 

model/pricing.go

@@ -1,8 +1,10 @@
 package model
 
 import (
+    "encoding/json"
     "fmt"
     "strings"
+
     "one-api/common"
     "one-api/constant"
     "one-api/setting/ratio_setting"
@@ -35,6 +37,7 @@ type PricingVendor struct {
 var (
     pricingMap         []Pricing
     vendorsList        []PricingVendor
+    supportedEndpointMap map[string]common.EndpointInfo
     lastGetPricingTime time.Time
     updatePricingLock  sync.Mutex
 
@@ -176,12 +179,9 @@ func updatePricing() {
 	//这里使用切片而不是Set，因为一个模型可能支持多个端点类型，并且第一个端点是优先使用端点
 	modelSupportEndpointsStr := make(map[string][]string)
 
+    // 先根据已有能力填充原生端点
     for _, ability := range enableAbilities {
-		endpoints, ok := modelSupportEndpointsStr[ability.Model]
+        endpoints := modelSupportEndpointsStr[ability.Model]
-		if !ok {
-			endpoints = make([]string, 0)
-			modelSupportEndpointsStr[ability.Model] = endpoints
-		}
         channelTypes := common.GetEndpointTypesByChannelType(ability.ChannelType, ability.Model)
         for _, channelType := range channelTypes {
             if !common.StringsContains(endpoints, string(channelType)) {
@@ -191,6 +191,23 @@ func updatePricing() {
         modelSupportEndpointsStr[ability.Model] = endpoints
     }
 
+    // 再补充模型自定义端点
+    for modelName, meta := range metaMap {
+        if strings.TrimSpace(meta.Endpoints) == "" {
+            continue
+        }
+        var raw map[string]interface{}
+        if err := json.Unmarshal([]byte(meta.Endpoints), &raw); err == nil {
+            endpoints := modelSupportEndpointsStr[modelName]
+            for k := range raw {
+                if !common.StringsContains(endpoints, k) {
+                    endpoints = append(endpoints, k)
+                }
+            }
+            modelSupportEndpointsStr[modelName] = endpoints
+        }
+    }
+
 	modelSupportEndpointTypes = make(map[string][]constant.EndpointType)
 	for model, endpoints := range modelSupportEndpointsStr {
 		supportedEndpoints := make([]constant.EndpointType, 0)
@@ -201,6 +218,45 @@ func updatePricing() {
 		modelSupportEndpointTypes[model] = supportedEndpoints
     }
 
+    // 构建全局 supportedEndpointMap（默认 + 自定义覆盖）
+    supportedEndpointMap = make(map[string]common.EndpointInfo)
+    // 1. 默认端点
+    for _, endpoints := range modelSupportEndpointTypes {
+        for _, et := range endpoints {
+            if info, ok := common.GetDefaultEndpointInfo(et); ok {
+                if _, exists := supportedEndpointMap[string(et)]; !exists {
+                    supportedEndpointMap[string(et)] = info
+                }
+            }
+        }
+    }
+    // 2. 自定义端点（models 表）覆盖默认
+    for _, meta := range metaMap {
+        if strings.TrimSpace(meta.Endpoints) == "" {
+            continue
+        }
+        var raw map[string]interface{}
+        if err := json.Unmarshal([]byte(meta.Endpoints), &raw); err == nil {
+            for k, v := range raw {
+                switch val := v.(type) {
+                case string:
+                    supportedEndpointMap[k] = common.EndpointInfo{Path: val, Method: "POST"}
+                case map[string]interface{}:
+                    ep := common.EndpointInfo{Method: "POST"}
+                    if p, ok := val["path"].(string); ok {
+                        ep.Path = p
+                    }
+                    if m, ok := val["method"].(string); ok {
+                        ep.Method = strings.ToUpper(m)
+                    }
+                    supportedEndpointMap[k] = ep
+                default:
+                    // ignore unsupported types
+                }
+            }
+        }
+    }
+
     pricingMap = make([]Pricing, 0)
     for model, groups := range modelGroupsMap {
         pricing := Pricing{
@@ -244,3 +300,8 @@ func updatePricing() {
 
     lastGetPricingTime = time.Now()
 }
+
+// GetSupportedEndpointMap 返回全局端点到路径的映射
+func GetSupportedEndpointMap() map[string]common.EndpointInfo {
+    return supportedEndpointMap
+}

web/src/components/common/ui/JSONEditor.js

@@ -1,25 +1,25 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  Space,
   Button,
   Form,
-  Card,
   Typography,
   Banner,
-  Row,
+  Tabs,
-  Col,
+  TabPane,
+  Card,
+  Input,
   InputNumber,
   Switch,
-  Select,
+  TextArea,
-  Input,
+  Row,
+  Col,
 } from '@douyinfe/semi-ui';
 import {
   IconCode,
-  IconEdit,
   IconPlus,
   IconDelete,
-  IconSetting,
+  IconRefresh,
 } from '@douyinfe/semi-icons';
 
 const { Text } = Typography;
@@ -34,8 +34,7 @@ const JSONEditor = ({
   showClear = true,
   template,
   templateLabel,
-  editorType = 'keyValue', // keyValue, object, region
+  editorType = 'keyValue',
-  autosize = true,
   rules = [],
   formApi = null,
   ...props
@@ -45,7 +44,7 @@ const JSONEditor = ({
   // 初始化JSON数据
   const [jsonData, setJsonData] = useState(() => {
     // 初始化时解析JSON数据
-    if (value && value.trim()) {
+    if (typeof value === 'string' && value.trim()) {
       try {
         const parsed = JSON.parse(value);
         return parsed;
@@ -53,13 +52,16 @@ const JSONEditor = ({
         return {};
       }
     }
+    if (typeof value === 'object' && value !== null) {
+      return value;
+    }
     return {};
   });
 
   // 根据键数量决定默认编辑模式
   const [editMode, setEditMode] = useState(() => {
     // 如果初始JSON数据的键数量大于10个，则默认使用手动模式
-    if (value && value.trim()) {
+    if (typeof value === 'string' && value.trim()) {
       try {
         const parsed = JSON.parse(value);
         const keyCount = Object.keys(parsed).length;
@@ -76,7 +78,12 @@ const JSONEditor = ({
   // 数据同步 - 当value变化时总是更新jsonData（如果JSON有效）
   useEffect(() => {
     try {
-      const parsed = value && value.trim() ? JSON.parse(value) : {};
+      let parsed = {};
+      if (typeof value === 'string' && value.trim()) {
+        parsed = JSON.parse(value);
+      } else if (typeof value === 'object' && value !== null) {
+        parsed = value;
+      }
       setJsonData(parsed);
       setJsonError('');
     } catch (error) {
@@ -86,7 +93,6 @@ const JSONEditor = ({
     }
   }, [value]);
 
-
   // 处理可视化编辑的数据变化
   const handleVisualChange = useCallback((newData) => {
     setJsonData(newData);
@@ -127,7 +133,12 @@ const JSONEditor = ({
     } else {
       // 从手动模式切换到可视化模式，需要验证JSON
       try {
-        const parsed = value && value.trim() ? JSON.parse(value) : {};
+        let parsed = {};
+        if (typeof value === 'string' && value.trim()) {
+          parsed = JSON.parse(value);
+        } else if (typeof value === 'object' && value !== null) {
+          parsed = value;
+        }
         setJsonData(parsed);
         setJsonError('');
         setEditMode('visual');
@@ -143,11 +154,11 @@ const JSONEditor = ({
   const addKeyValue = useCallback(() => {
     const newData = { ...jsonData };
     const keys = Object.keys(newData);
-    let newKey = 'key';
     let counter = 1;
+    let newKey = `field_${counter}`;
     while (newData.hasOwnProperty(newKey)) {
-      newKey = `key${counter}`;
+      counter += 1;
-      counter++;
+      newKey = `field_${counter}`;
     }
     newData[newKey] = '';
     handleVisualChange(newData);
@@ -162,11 +173,15 @@ const JSONEditor = ({
 
   // 更新键名
   const updateKey = useCallback((oldKey, newKey) => {
-    if (oldKey === newKey) return;
+    if (oldKey === newKey || !newKey) return;
-    const newData = { ...jsonData };
+    const newData = {};
-    const value = newData[oldKey];
+    Object.entries(jsonData).forEach(([k, v]) => {
-    delete newData[oldKey];
+      if (k === oldKey) {
-    newData[newKey] = value;
+        newData[newKey] = v;
+      } else {
+        newData[k] = v;
+      }
+    });
     handleVisualChange(newData);
   }, [jsonData, handleVisualChange]);
 
@@ -220,9 +235,6 @@ const JSONEditor = ({
       <div className="space-y-1">
         {entries.length === 0 && (
           <div className="text-center py-6 px-4">
-            <div className="text-gray-400 mb-2">
-              <IconCode size={32} />
-            </div>
             <Text type="tertiary" className="text-gray-500 text-sm">
               {t('暂无数据，点击下方按钮添加键值对')}
             </Text>
@@ -230,54 +242,35 @@ const JSONEditor = ({
         )}
 
         {entries.map(([key, value], index) => (
-          <Card key={index} className="!p-3 !border-gray-200 !rounded-md hover:shadow-sm transition-shadow duration-200">
+          <Row key={index} gutter={8} align="middle">
-            <Row gutter={12} align="middle">
+            <Col span={6}>
-              <Col span={10}>
-                <div className="space-y-1">
-                  <Text type="tertiary" size="small">{t('键名')}</Text>
               <Input
                 placeholder={t('键名')}
                 value={key}
                 onChange={(newKey) => updateKey(key, newKey)}
-                    size="small"
               />
-                </div>
             </Col>
-              <Col span={11}>
+            <Col span={16}>
-                <div className="space-y-1">
+              {renderValueInput(key, value)}
-                  <Text type="tertiary" size="small">{t('值')}</Text>
-                  <Input
-                    placeholder={t('值')}
-                    value={value}
-                    onChange={(newValue) => updateValue(key, newValue)}
-                    size="small"
-                  />
-                </div>
             </Col>
-              <Col span={3}>
+            <Col span={2}>
-                <div className="flex justify-center pt-4">
               <Button
                 icon={<IconDelete />}
                 type="danger"
                 theme="borderless"
-                    size="small"
                 onClick={() => removeKeyValue(key)}
-                    className="hover:bg-red-50"
+                style={{ width: '100%' }}
               />
-                </div>
             </Col>
           </Row>
-          </Card>
         ))}
 
-        <div className="flex justify-center pt-1">
+        <div className="mt-2 flex justify-center">
           <Button
             icon={<IconPlus />}
-            onClick={addKeyValue}
-            size="small"
-            theme="solid"
             type="primary"
-            className="shadow-sm hover:shadow-md transition-shadow px-4"
+            theme="outline"
+            onClick={addKeyValue}
           >
             {t('添加键值对')}
           </Button>
@@ -286,76 +279,39 @@ const JSONEditor = ({
     );
   };
 
-  // 渲染对象编辑器（用于复杂JSON）
+  // 添加嵌套对象
-  const renderObjectEditor = () => {
+  const flattenObject = useCallback((parentKey) => {
-    const entries = Object.entries(jsonData);
+    const newData = { ...jsonData };
+    let primitive = '';
+    const obj = newData[parentKey];
+    if (obj && typeof obj === 'object') {
+      const firstKey = Object.keys(obj)[0];
+      if (firstKey !== undefined) {
+        const firstVal = obj[firstKey];
+        if (typeof firstVal !== 'object') primitive = firstVal;
+      }
+    }
+    newData[parentKey] = primitive;
+    handleVisualChange(newData);
+  }, [jsonData, handleVisualChange]);
 
-    return (
+  const addNestedObject = useCallback((parentKey) => {
-      <div className="space-y-1">
+    const newData = { ...jsonData };
-        {entries.length === 0 && (
+    if (typeof newData[parentKey] !== 'object' || newData[parentKey] === null) {
-          <div className="text-center py-6 px-4">
+      newData[parentKey] = {};
-            <div className="text-gray-400 mb-2">
+    }
-              <IconSetting size={32} />
+    const existingKeys = Object.keys(newData[parentKey]);
-            </div>
+    let counter = 1;
-            <Text type="tertiary" className="text-gray-500 text-sm">
+    let newKey = `field_${counter}`;
-              {t('暂无参数，点击下方按钮添加请求参数')}
+    while (newData[parentKey].hasOwnProperty(newKey)) {
-            </Text>
+      counter += 1;
-          </div>
+      newKey = `field_${counter}`;
-        )}
+    }
+    newData[parentKey][newKey] = '';
+    handleVisualChange(newData);
+  }, [jsonData, handleVisualChange]);
 
-        {entries.map(([key, value], index) => (
+  // 渲染参数值输入控件（支持嵌套）
-          <Card key={index} className="!p-3 !border-gray-200 !rounded-md hover:shadow-sm transition-shadow duration-200">
-            <Row gutter={12} align="middle">
-              <Col span={8}>
-                <div className="space-y-1">
-                  <Text type="tertiary" size="small">{t('参数名')}</Text>
-                  <Input
-                    placeholder={t('参数名')}
-                    value={key}
-                    onChange={(newKey) => updateKey(key, newKey)}
-                    size="small"
-                  />
-                </div>
-              </Col>
-              <Col span={13}>
-                <div className="space-y-1">
-                  <Text type="tertiary" size="small">{t('参数值')} ({typeof value})</Text>
-                  {renderValueInput(key, value)}
-                </div>
-              </Col>
-              <Col span={3}>
-                <div className="flex justify-center pt-4">
-                  <Button
-                    icon={<IconDelete />}
-                    type="danger"
-                    theme="borderless"
-                    size="small"
-                    onClick={() => removeKeyValue(key)}
-                    className="hover:bg-red-50"
-                  />
-                </div>
-              </Col>
-            </Row>
-          </Card>
-        ))}
-        
-        <div className="flex justify-center pt-1">
-          <Button
-            icon={<IconPlus />}
-            onClick={addKeyValue}
-            size="small"
-            theme="solid"
-            type="primary"
-            className="shadow-sm hover:shadow-md transition-shadow px-4"
-          >
-            {t('添加参数')}
-          </Button>
-        </div>
-      </div>
-    );
-  };
-
-  // 渲染参数值输入控件
   const renderValueInput = (key, value) => {
     const valueType = typeof value;
 
@@ -365,9 +321,8 @@ const JSONEditor = ({
           <Switch
             checked={value}
             onChange={(newValue) => updateValue(key, newValue)}
-            size="small"
           />
-          <Text type="tertiary" size="small" className="ml-2">
+          <Text type="tertiary" className="ml-2">
             {value ? t('true') : t('false')}
           </Text>
         </div>
@@ -379,7 +334,6 @@ const JSONEditor = ({
         <InputNumber
           value={value}
           onChange={(newValue) => updateValue(key, newValue)}
-          size="small"
           style={{ width: '100%' }}
           step={key === 'temperature' ? 0.1 : 1}
           precision={key === 'temperature' ? 2 : 0}
@@ -388,24 +342,136 @@ const JSONEditor = ({
       );
     }
 
-    // 字符串类型或其他类型
+    if (valueType === 'object' && value !== null) {
+      // 渲染嵌套对象
+      const entries = Object.entries(value);
       return (
+        <Card className="!rounded-2xl">
+          {entries.length === 0 && (
+            <Text type="tertiary" className="text-gray-500 text-xs">
+              {t('空对象，点击下方加号添加字段')}
+            </Text>
+          )}
+
+          {entries.map(([nestedKey, nestedValue], index) => (
+            <Row key={index} gutter={4} align="middle" className="mb-1">
+              <Col span={8}>
                 <Input
-        placeholder={t('参数值')}
+                  size="small"
-        value={String(value)}
+                  placeholder={t('键名')}
+                  value={nestedKey}
+                  onChange={(newKey) => {
+                    const newData = { ...jsonData };
+                    const oldValue = newData[key][nestedKey];
+                    delete newData[key][nestedKey];
+                    newData[key][newKey] = oldValue;
+                    handleVisualChange(newData);
+                  }}
+                />
+              </Col>
+              <Col span={14}>
+                {typeof nestedValue === 'object' && nestedValue !== null ? (
+                  <TextArea
+                    size="small"
+                    rows={2}
+                    value={JSON.stringify(nestedValue, null, 2)}
+                    onChange={(txt) => {
+                      try {
+                        const obj = txt.trim() ? JSON.parse(txt) : {};
+                        const newData = { ...jsonData };
+                        newData[key][nestedKey] = obj;
+                        handleVisualChange(newData);
+                      } catch {
+                        // ignore parse error
+                      }
+                    }}
+                  />
+                ) : (
+                  <Input
+                    size="small"
+                    placeholder={t('值')}
+                    value={String(nestedValue)}
                     onChange={(newValue) => {
-          // 尝试转换为适当的类型
+                      const newData = { ...jsonData };
                       let convertedValue = newValue;
                       if (newValue === 'true') convertedValue = true;
                       else if (newValue === 'false') convertedValue = false;
                       else if (!isNaN(newValue) && newValue !== '' && newValue !== '0') {
                         convertedValue = Number(newValue);
                       }
+                      newData[key][nestedKey] = convertedValue;
+                      handleVisualChange(newData);
+                    }}
+                  />
+                )}
+              </Col>
+              <Col span={2}>
+                <Button
+                  size="small"
+                  icon={<IconDelete />}
+                  type="danger"
+                  theme="borderless"
+                  onClick={() => {
+                    const newData = { ...jsonData };
+                    delete newData[key][nestedKey];
+                    handleVisualChange(newData);
+                  }}
+                  style={{ width: '100%' }}
+                />
+              </Col>
+            </Row>
+          ))}
 
+          <div className="flex justify-center mt-1 gap-2">
+            <Button
+              size="small"
+              icon={<IconPlus />}
+              type="tertiary"
+              onClick={() => addNestedObject(key)}
+            >
+              {t('添加字段')}
+            </Button>
+            <Button
+              size="small"
+              icon={<IconRefresh />}
+              type="tertiary"
+              onClick={() => flattenObject(key)}
+            >
+              {t('转换为值')}
+            </Button>
+          </div>
+        </Card>
+      );
+    }
+
+    // 字符串或其他原始类型
+    return (
+      <div className="flex items-center gap-1">
+        <Input
+          placeholder={t('参数值')}
+          value={String(value)}
+          onChange={(newValue) => {
+            let convertedValue = newValue;
+            if (newValue === 'true') convertedValue = true;
+            else if (newValue === 'false') convertedValue = false;
+            else if (!isNaN(newValue) && newValue !== '' && newValue !== '0') {
+              convertedValue = Number(newValue);
+            }
             updateValue(key, convertedValue);
           }}
-        size="small"
         />
+        <Button
+          icon={<IconPlus />}
+          type="tertiary"
+          onClick={() => {
+            // 将当前值转换为对象
+            const newData = { ...jsonData };
+            newData[key] = { '1': value };
+            handleVisualChange(newData);
+          }}
+          title={t('转换为对象')}
+        />
+      </div>
     );
   };
 
@@ -416,77 +482,59 @@ const JSONEditor = ({
     const modelEntries = entries.filter(([key]) => key !== 'default');
 
     return (
-      <div className="space-y-1">
+      <div className="space-y-2">
         {/* 默认区域 */}
-        <Card className="!p-2 !border-blue-200 !bg-blue-50">
+        <Form.Slot label={t('默认区域')}>
-          <div className="flex items-center mb-1">
-            <Text strong size="small" className="text-blue-700">{t('默认区域')}</Text>
-          </div>
           <Input
             placeholder={t('默认区域，如: us-central1')}
             value={defaultEntry ? defaultEntry[1] : ''}
             onChange={(value) => updateValue('default', value)}
-            size="small"
           />
-        </Card>
+        </Form.Slot>
 
         {/* 模型专用区域 */}
-        <div className="space-y-1">
+        <Form.Slot label={t('模型专用区域')}>
-          <Text strong size="small">{t('模型专用区域')}</Text>
+          <div>
             {modelEntries.map(([modelName, region], index) => (
-            <Card key={index} className="!p-3 !border-gray-200 !rounded-md hover:shadow-sm transition-shadow duration-200">
+              <Row key={index} gutter={8} align="middle" className="mb-2">
-              <Row gutter={12} align="middle">
                 <Col span={10}>
-                  <div className="space-y-1">
-                    <Text type="tertiary" size="small">{t('模型名称')}</Text>
                   <Input
                     placeholder={t('模型名称')}
                     value={modelName}
                     onChange={(newKey) => updateKey(modelName, newKey)}
-                      size="small"
                   />
-                  </div>
                 </Col>
-                <Col span={11}>
+                <Col span={12}>
-                  <div className="space-y-1">
-                    <Text type="tertiary" size="small">{t('区域')}</Text>
                   <Input
                     placeholder={t('区域')}
                     value={region}
                     onChange={(newValue) => updateValue(modelName, newValue)}
-                      size="small"
                   />
-                  </div>
                 </Col>
-                <Col span={3}>
+                <Col span={2}>
-                  <div className="flex justify-center pt-4">
                   <Button
                     icon={<IconDelete />}
                     type="danger"
                     theme="borderless"
-                      size="small"
                     onClick={() => removeKeyValue(modelName)}
-                      className="hover:bg-red-50"
+                    style={{ width: '100%' }}
                   />
-                  </div>
                 </Col>
               </Row>
-            </Card>
             ))}
 
-          <div className="flex justify-center pt-1">
+            <div className="mt-2 flex justify-center">
               <Button
                 icon={<IconPlus />}
                 onClick={addKeyValue}
-              size="small"
-              theme="solid"
                 type="primary"
-              className="shadow-sm hover:shadow-md transition-shadow px-4"
+                theme="outline"
               >
                 {t('添加模型区域')}
               </Button>
             </div>
           </div>
+        </Form.Slot>
       </div>
     );
   };
@@ -497,7 +545,6 @@ const JSONEditor = ({
       case 'region':
         return renderRegionEditor();
       case 'object':
-        return renderObjectEditor();
       case 'keyValue':
       default:
         return renderKeyValueEditor();
@@ -507,84 +554,53 @@ const JSONEditor = ({
   const hasJsonError = jsonError && jsonError.trim() !== '';
 
   return (
-    <div className="space-y-1">
+    <Form.Slot label={label}>
-      {/* Label统一显示在上方 */}
+      <Card
-      {label && (
+        header={
-        <div className="flex items-center">
+          <div className="flex justify-between items-center">
-          <Text className="text-sm font-medium text-gray-900">{label}</Text>
+            <Tabs
-        </div>
+              type="slash"
-      )}
+              activeKey={editMode}
+              onChange={(key) => {
+                if (key === 'manual' && editMode === 'visual') {
+                  setEditMode('manual');
+                } else if (key === 'visual' && editMode === 'manual') {
+                  toggleEditMode();
+                }
+              }}
+            >
+              <TabPane tab={t('可视化')} itemKey="visual" />
+              <TabPane tab={t('手动编辑')} itemKey="manual" />
+            </Tabs>
 
-      {/* 编辑模式切换 */}
-      <div className="flex items-center justify-between p-2 bg-gray-50 rounded-md">
-        <div className="flex items-center gap-2">
-          {editMode === 'visual' && (
-            <Text type="tertiary" size="small" className="bg-blue-100 text-blue-700 px-2 py-0.5 rounded text-xs">
-              {t('可视化模式')}
-            </Text>
-          )}
-          {editMode === 'manual' && (
-            <Text type="tertiary" size="small" className="bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs">
-              {t('手动编辑模式')}
-            </Text>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
             {template && templateLabel && (
               <Button
-              size="small"
                 type="tertiary"
                 onClick={fillTemplate}
-              className="!text-semi-color-primary hover:bg-blue-50 text-xs"
+                size="small"
               >
                 {templateLabel}
               </Button>
             )}
-          <Space size="tight">
-            <Button
-              size="small"
-              type={editMode === 'visual' ? 'primary' : 'tertiary'}
-              icon={<IconEdit />}
-              onClick={toggleEditMode}
-              disabled={editMode === 'manual' && hasJsonError}
-              className={editMode === 'visual' ? 'shadow-sm' : ''}
-            >
-              {t('可视化')}
-            </Button>
-            <Button
-              size="small"
-              type={editMode === 'manual' ? 'primary' : 'tertiary'}
-              icon={<IconCode />}
-              onClick={toggleEditMode}
-              className={editMode === 'manual' ? 'shadow-sm' : ''}
-            >
-              {t('手动编辑')}
-            </Button>
-          </Space>
           </div>
-      </div>
+        }
-
+        headerStyle={{ padding: '12px 16px' }}
+        bodyStyle={{ padding: '16px' }}
+        className="!rounded-2xl"
+      >
         {/* JSON错误提示 */}
         {hasJsonError && (
           <Banner
             type="danger"
             description={`JSON 格式错误: ${jsonError}`}
-          className="!rounded-md text-sm"
+            className="mb-3"
           />
         )}
 
         {/* 编辑器内容 */}
         {editMode === 'visual' ? (
           <div>
-          <Card className="!p-3 !border-gray-200 !shadow-sm !rounded-md bg-white">
             {renderVisualEditor()}
-          </Card>
-          {/* 可视化模式下的额外文本显示在下方 */}
-          {extraText && (
-            <div className="text-xs text-gray-600 mt-0.5">
-              {extraText}
-            </div>
-          )}
             {/* 隐藏的Form字段用于验证和数据绑定 */}
             <Form.Input
               field={field}
@@ -596,26 +612,34 @@ const JSONEditor = ({
             />
           </div>
         ) : (
-        <Form.TextArea
+          <div>
-          field={field}
+            <TextArea
               placeholder={placeholder}
               value={value}
               onChange={handleManualChange}
               showClear={showClear}
               rows={Math.max(8, value ? value.split('\n').length : 8)}
+            />
+            {/* 隐藏的Form字段用于验证和数据绑定 */}
+            <Form.Input
+              field={field}
+              value={value}
               rules={rules}
+              style={{ display: 'none' }}
               noLabel={true}
               {...props}
             />
+          </div>
         )}
 
-      {/* 额外文本在手动编辑模式下显示 */}
+        {/* 额外文本显示在卡片底部 */}
-      {extraText && editMode === 'manual' && (
+        {extraText && (
-        <div className="text-xs text-gray-600">
+          <div className="text-gray-600 mt-3 pt-3">
             {extraText}
           </div>
         )}
-    </div>
+      </Card>
+    </Form.Slot>
   );
 };
 

web/src/components/table/model-pricing/layout/PricingPage.jsx

@@ -80,6 +80,7 @@ const PricingPage = () => {
         displayPrice={pricingData.displayPrice}
         showRatio={allProps.showRatio}
         vendorsMap={pricingData.vendorsMap}
+        endpointMap={pricingData.endpointMap}
         t={pricingData.t}
       />
     </div>

web/src/components/table/model-pricing/modal/ModelDetailSideSheet.jsx

@@ -47,6 +47,7 @@ const ModelDetailSideSheet = ({
   showRatio,
   usableGroup,
   vendorsMap,
+  endpointMap,
   t,
 }) => {
   const isMobile = useIsMobile();
@@ -82,7 +83,7 @@ const ModelDetailSideSheet = ({
         {modelData && (
           <>
             <ModelBasicInfo modelData={modelData} vendorsMap={vendorsMap} t={t} />
-            <ModelEndpoints modelData={modelData} t={t} />
+            <ModelEndpoints modelData={modelData} endpointMap={endpointMap} t={t} />
             <ModelPricingTable
               modelData={modelData}
               selectedGroup={selectedGroup}

web/src/components/table/model-pricing/modal/components/ModelEndpoints.jsx

@@ -23,31 +23,45 @@ import { IconLink } from '@douyinfe/semi-icons';
 
 const { Text } = Typography;
 
-const ModelEndpoints = ({ modelData, t }) => {
+const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
   const renderAPIEndpoints = () => {
-    const endpoints = [];
+    if (!modelData) return null;
 
-    if (modelData?.supported_endpoint_types) {
+    const mapping = endpointMap;
-      modelData.supported_endpoint_types.forEach(endpoint => {
+    const types = modelData.supported_endpoint_types || [];
-        endpoints.push({ name: endpoint, type: endpoint });
+
-      });
+    return types.map(type => {
+      const info = mapping[type] || {};
+      let path = info.path || '';
+      // 如果路径中包含 {model} 占位符，替换为真实模型名称
+      if (path.includes('{model}')) {
+        const modelName = modelData.model_name || modelData.modelName || '';
+        path = path.replaceAll('{model}', modelName);
       }
-
+      const method = info.method || 'POST';
-    return endpoints.map((endpoint, index) => (
+      return (
         <div
-        key={index}
+          key={type}
           className="flex justify-between border-b border-dashed last:border-0 py-2 last:pb-0"
           style={{ borderColor: 'var(--semi-color-border)' }}
         >
           <span className="flex items-center pr-5">
             <Badge dot type="success" className="mr-2" />
-          {endpoint.name}：
+            {type}{path && '：'}
-          <span className="text-gray-500 hidden md:inline">https://api.newapi.pro</span>
+            {path && (
-          /v1/chat/completions
+              <span className="text-gray-500 md:ml-1 break-all">
+                {path}
               </span>
-        <span className="text-gray-500 text-xs hidden md:inline">POST</span>
+            )}
+          </span>
+          {path && (
+            <span className="text-gray-500 text-xs md:ml-1">
+              {method}
+            </span>
+          )}
         </div>
-    ));
+      );
+    });
   };
 
   return (

web/src/components/table/models/modals/EditModelModal.jsx

@@ -18,6 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState, useEffect, useRef, useMemo } from 'react';
+import JSONEditor from '../../../common/ui/JSONEditor';
 import {
   SideSheet,
   Form,
@@ -109,7 +110,7 @@ const EditModelModal = (props) => {
     vendor_id: undefined,
     vendor: '',
     vendor_icon: '',
-    endpoints: [],
+    endpoints: '',
     name_rule: props.editingModel?.model_name ? 0 : undefined, // 通过未配置模型过来的固定为精确匹配
     status: true,
   });
@@ -132,15 +133,9 @@ const EditModelModal = (props) => {
         } else {
           data.tags = [];
         }
-        // 处理endpoints
+        // endpoints 保持原始 JSON 字符串，若为空设为空串
-        if (data.endpoints) {
+        if (!data.endpoints) {
-          try {
+          data.endpoints = '';
-            data.endpoints = JSON.parse(data.endpoints);
-          } catch (e) {
-            data.endpoints = [];
-          }
-        } else {
-          data.endpoints = [];
         }
         // 处理status，将数字转为布尔值
         data.status = data.status === 1;
@@ -188,7 +183,7 @@ const EditModelModal = (props) => {
       const submitData = {
         ...values,
         tags: Array.isArray(values.tags) ? values.tags.join(',') : values.tags,
-        endpoints: JSON.stringify(values.endpoints || []),
+        endpoints: values.endpoints || '',
         status: values.status ? 1 : 0,
       };
 
@@ -382,36 +377,15 @@ const EditModelModal = (props) => {
                     />
                   </Col>
                   <Col span={24}>
-                    <Form.TagInput
+                    <JSONEditor
                       field='endpoints'
-                      label={t('支持端点')}
+                      label={t('端点映射')}
-                      placeholder={t('输入端点名称，按回车添加')}
+                      placeholder={'{\n  "openai": {"path": "/v1/chat/completions", "method": "POST"}\n}'}
-                      addOnBlur
+                      value={values.endpoints}
-                      showClear
+                      onChange={(val) => formApiRef.current?.setValue('endpoints', val)}
-                      style={{ width: '100%' }}
+                      formApi={formApiRef.current}
-                      {...(endpointGroups.length > 0 && {
+                      editorType='object'
-                        extraText: (
+                      extraText={t('留空则使用默认端点；支持 {path, method}')}
-                          <Space wrap>
-                            {endpointGroups.map(group => (
-                              <Button
-                                key={group.id}
-                                size='small'
-                                type='primary'
-                                onClick={() => {
-                                  if (formApiRef.current) {
-                                    const currentEndpoints = formApiRef.current.getValue('endpoints') || [];
-                                    const newEndpoints = [...currentEndpoints, ...(group.items || [])];
-                                    const uniqueEndpoints = [...new Set(newEndpoints)];
-                                    formApiRef.current.setValue('endpoints', uniqueEndpoints);
-                                  }
-                                }}
-                              >
-                                {group.name}
-                              </Button>
-                            ))}
-                          </Space>
-                        )
-                      })}
                     />
                   </Col>
                   <Col span={24}>

web/src/components/table/models/modals/EditPrefillGroupModal.jsx

@@ -17,7 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import JSONEditor from '../../../common/ui/JSONEditor';
 import {
   SideSheet,
   Button,
@@ -49,6 +50,13 @@ const EditPrefillGroupModal = ({ visible, onClose, editingGroup, onSuccess }) =>
   const formRef = useRef(null);
   const isEdit = editingGroup && editingGroup.id !== undefined;
 
+  const [selectedType, setSelectedType] = useState(editingGroup?.type || 'tag');
+
+  // 当外部传入的编辑组类型变化时同步 selectedType
+  useEffect(() => {
+    setSelectedType(editingGroup?.type || 'tag');
+  }, [editingGroup?.type]);
+
   const typeOptions = [
     { label: t('模型组'), value: 'model' },
     { label: t('标签组'), value: 'tag' },
@@ -61,8 +69,12 @@ const EditPrefillGroupModal = ({ visible, onClose, editingGroup, onSuccess }) =>
     try {
       const submitData = {
         ...values,
-        items: Array.isArray(values.items) ? values.items : [],
       };
+      if (values.type === 'endpoint') {
+        submitData.items = values.items || '';
+      } else {
+        submitData.items = Array.isArray(values.items) ? values.items : [];
+      }
 
       if (editingGroup.id) {
         submitData.id = editingGroup.id;
@@ -146,11 +158,17 @@ const EditPrefillGroupModal = ({ visible, onClose, editingGroup, onSuccess }) =>
             description: editingGroup?.description || '',
             items: (() => {
               try {
+                if (editingGroup?.type === 'endpoint') {
+                  // 保持原始字符串
                   return typeof editingGroup?.items === 'string'
-                  ? JSON.parse(editingGroup.items)
+                    ? editingGroup.items
-                  : editingGroup?.items || [];
+                    : JSON.stringify(editingGroup.items || {}, null, 2);
+                }
+                return Array.isArray(editingGroup?.items)
+                  ? editingGroup.items
+                  : [];
               } catch {
-                return [];
+                return editingGroup?.type === 'endpoint' ? '' : [];
               }
             })(),
           }}
@@ -186,6 +204,7 @@ const EditPrefillGroupModal = ({ visible, onClose, editingGroup, onSuccess }) =>
                     optionList={typeOptions}
                     rules={[{ required: true, message: t('请选择组类型') }]}
                     style={{ width: '100%' }}
+                    onChange={(val) => setSelectedType(val)}
                   />
                 </Col>
                 <Col span={24}>
@@ -213,6 +232,17 @@ const EditPrefillGroupModal = ({ visible, onClose, editingGroup, onSuccess }) =>
               </div>
               <Row gutter={12}>
                 <Col span={24}>
+                  {selectedType === 'endpoint' ? (
+                    <JSONEditor
+                      field="items"
+                      label={t('端点映射')}
+                      value={formRef.current?.getValue('items') ?? (typeof editingGroup?.items === 'string' ? editingGroup.items : JSON.stringify(editingGroup.items || {}, null, 2))}
+                      onChange={(val) => formRef.current?.setValue('items', val)}
+                      editorType='object'
+                      placeholder={'{\n  "openai": {"path": "/v1/chat/completions", "method": "POST"}\n}'}
+                      extraText={t('键为端点类型，值为路径和方法对象')}
+                    />
+                  ) : (
                     <Form.TagInput
                       field="items"
                       label={t('项目')}
@@ -221,6 +251,7 @@ const EditPrefillGroupModal = ({ visible, onClose, editingGroup, onSuccess }) =>
                       showClear
                       style={{ width: '100%' }}
                     />
+                  )}
                 </Col>
               </Row>
             </Card>

web/src/components/table/models/modals/PrefillGroupManagement.jsx

@@ -137,8 +137,22 @@ const PrefillGroupManagement = ({ visible, onClose }) => {
       title: t('项目内容'),
       dataIndex: 'items',
       key: 'items',
-      render: (items) => {
+      render: (items, record) => {
         try {
+          if (record.type === 'endpoint') {
+            const obj = typeof items === 'string' ? JSON.parse(items || '{}') : (items || {});
+            const keys = Object.keys(obj);
+            if (keys.length === 0) return <Text type="tertiary">{t('暂无项目')}</Text>;
+            return renderLimitedItems({
+              items: keys,
+              renderItem: (key, idx) => (
+                <Tag key={idx} size="small" shape='circle' color={stringToColor(key)}>
+                  {key}
+                </Tag>
+              ),
+              maxDisplay: 3,
+            });
+          }
           const itemsArray = typeof items === 'string' ? JSON.parse(items) : items;
           if (!Array.isArray(itemsArray) || itemsArray.length === 0) {
             return <Text type="tertiary">{t('暂无项目')}</Text>;

web/src/hooks/model-pricing/useModelPricingData.js

@@ -48,6 +48,7 @@ export const useModelPricingData = () => {
   const [loading, setLoading] = useState(true);
   const [groupRatio, setGroupRatio] = useState({});
   const [usableGroup, setUsableGroup] = useState({});
+  const [endpointMap, setEndpointMap] = useState({});
 
   const [statusState] = useContext(StatusContext);
   const [userState] = useContext(UserContext);
@@ -159,7 +160,7 @@ export const useModelPricingData = () => {
     setLoading(true);
     let url = '/api/pricing';
     const res = await API.get(url);
-    const { success, message, data, vendors, group_ratio, usable_group } = res.data;
+    const { success, message, data, vendors, group_ratio, usable_group, supported_endpoint } = res.data;
     if (success) {
       setGroupRatio(group_ratio);
       setUsableGroup(usable_group);
@@ -172,6 +173,7 @@ export const useModelPricingData = () => {
         });
       }
       setVendorsMap(vendorMap);
+      setEndpointMap(supported_endpoint || {});
       setModelsFormat(data, group_ratio, vendorMap);
     } else {
       showError(message);
@@ -279,6 +281,7 @@ export const useModelPricingData = () => {
     loading,
     groupRatio,
     usableGroup,
+    endpointMap,
 
     // 计算属性
     priceRate,