default model

update workflows actions/download-artifact to v4

frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx

@@ -1,269 +0,0 @@
-'use client'
-
-import { BasicResponse } from '@common/const/const'
-import { useGlobalContext } from '@common/contexts/GlobalStateContext'
-import { useFetch } from '@common/hooks/http'
-import { $t } from '@common/locales'
-import {
-  CoordinateExtent,
-  Edge,
-  EdgeTypes,
-  Node,
-  NodeTypes,
-  PanOnScrollMode,
-  ReactFlow,
-  useEdgesState,
-  useNodesState
-} from '@xyflow/react'
-import '@xyflow/react/dist/style.css'
-import { Button, Space, Spin } from 'antd'
-import { useCallback, useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import CustomEdge from './components/CustomEdge'
-import { KeyStatusNode } from './components/KeyStatusNode'
-import { ModelCardNode } from './components/ModelCardNode'
-import { ServiceCardNode } from './components/NodeComponents'
-import { LAYOUT } from './constants'
-import './styles.css'
-import { ModelListData } from './types'
-
-export type ApiResponse = BasicResponse<{
-  backup: {
-    id: string
-    name: string
-  }
-  providers: ModelListData[]
-}>
-
-const calculateNodePositions = (models: ModelListData[], startY = LAYOUT.NODE_START_Y, gap = LAYOUT.NODE_GAP) => {
-  return models.reduce(
-    (acc, model, index) => {
-      const y = startY + index * gap
-      return {
-        ...acc,
-        [model.id]: {
-          x: LAYOUT.MODEL_NODE_X,
-          y
-        },
-        [`${model.id}-keys`]: {
-          x: LAYOUT.KEY_NODE_X,
-          y: y + 16
-        }
-      }
-    },
-    {} as Record<string, { x: number; y: number }>
-  )
-}
-
-const nodeTypes: NodeTypes = {
-  modelCard: ModelCardNode,
-  keyCard: KeyStatusNode,
-  serviceCard: ServiceCardNode
-} as const
-
-const edgeTypes: EdgeTypes = {
-  custom: CustomEdge
-}
-
-const AIFlowChart = () => {
-  const [modelData, setModelData] = useState<ModelListData[]>([])
-  const [loading, setLoading] = useState(false)
-  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])
-  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([])
-  const { fetchData } = useFetch()
-  const { aiConfigFlushed } = useGlobalContext()
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    setLoading(true)
-    fetchData<ApiResponse>('ai/providers/configured', {
-      method: 'GET',
-      eoTransformKeys: ['default_llm']
-      // eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/'
-    })
-      .then((response) => {
-        const mockApiResponse: ApiResponse = response as ApiResponse
-        setModelData(mockApiResponse.data.providers)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [aiConfigFlushed])
-
-  useEffect(() => {
-    if (!modelData.length) return
-
-    const positions = calculateNodePositions(modelData)
-    const firstSuccessModel = modelData.find((model) => model.status === 'enabled')
-    console.log(firstSuccessModel)
-
-    // subtract 5 to make sure the service node is aligned with the top model node
-    const serviceY = positions[modelData[0].id].y - 5
-    const newNodes = [
-      {
-        id: 'apiService',
-        type: 'serviceCard',
-        position: { x: LAYOUT.SERVICE_NODE_X, y: serviceY },
-        draggable: false,
-        data: {
-          title: 'API Services',
-          count: modelData.length
-        }
-      },
-      ...modelData.map((model) => ({
-        id: model.id,
-        type: 'modelCard',
-        position: positions[model.id],
-        data: {
-          name: model.name,
-          status: model.status,
-          defaultLlm: model.defaultLlm,
-          logo: model.logo,
-          id: model.id,
-          alternativeModel: firstSuccessModel
-        }
-      })),
-      ...modelData.map((model) => ({
-        id: `${model.id}-keys`,
-        type: 'keyCard',
-        position: positions[`${model.id}-keys`],
-        data: {
-          title: '',
-          keys: (model.keys || []).map((key, index) => ({
-            id: key.id,
-            status: key.status,
-            priority: index + 1
-          }))
-        }
-      }))
-    ]
-
-    const newEdges: any = [
-      ...modelData.map((model) => ({
-        id: `service-${model.id}`,
-        source: 'apiService',
-        target: model.id,
-        label: `${model.api_count} apis`,
-        data: {
-          id: model.id,
-          status: model.status
-        },
-        animated: true,
-        style: { stroke: model.status === 'enabled' ? '#52c41a' : '#ff4d4f' }
-      })),
-      ...modelData.map((model) => ({
-        id: `${model.id}-keys-edge`,
-        source: model.id,
-        target: `${model.id}-keys`,
-        label: `${model.key_count} keys`,
-        data: { id: model.id },
-        animated: true
-      }))
-    ]
-    setNodes(newNodes)
-    setEdges(newEdges)
-  }, [modelData])
-
-  const calculateExtent = useCallback(() => {
-    const left = LAYOUT.SERVICE_NODE_X
-    const right = LAYOUT.KEY_NODE_X
-    const top = 0 // Allow slight negative scroll to reduce top padding
-    const bottom = LAYOUT.NODE_START_Y + modelData.length * LAYOUT.NODE_GAP
-    return [
-      [left, top],
-      [right, bottom < 100 ? 5000 : bottom]
-    ] as CoordinateExtent
-  }, [modelData.length])
-
-  const updateProviderOrder = async (sortedProviderIds: string[]) => {
-    await fetchData('ai/provider/sort', {
-      method: 'PUT',
-      body: JSON.stringify({
-        providers: sortedProviderIds
-      })
-    })
-  }
-
-  const onNodeDragStop: any = useCallback((_: any, node: Node<any>) => {
-    if (node.type !== 'modelCard') return
-
-    setNodes((nds) => {
-      const modelNodes = nds.filter((n) => n.type === 'modelCard')
-      const sortedNodes = [...modelNodes].sort((a, b) => a.position.y - b.position.y)
-      const sortedProviderIds = sortedNodes.map((node) => node.id)
-
-      // Update provider order outside of setNodes callback
-      updateProviderOrder(sortedProviderIds)
-      // Update all node positions in a single pass
-      return nds.map((n) => {
-        if (n.type === 'modelCard') {
-          const index = sortedNodes.findIndex((sn) => sn.id === n.id)
-          return {
-            ...n,
-            position: {
-              x: LAYOUT.MODEL_NODE_X,
-              y: LAYOUT.NODE_START_Y + index * LAYOUT.NODE_GAP
-            }
-          }
-        }
-        if (n.type === 'keyCard') {
-          const modelId = n.id.replace('-keys', '')
-          const modelNode = sortedNodes.find((mn) => mn.id === modelId)
-          if (modelNode) {
-            const index = sortedNodes.findIndex((sn) => sn.id === modelId)
-            return {
-              ...n,
-              position: {
-                x: LAYOUT.KEY_NODE_X,
-                y: LAYOUT.NODE_START_Y + index * LAYOUT.NODE_GAP + 16
-              }
-            }
-          }
-        }
-        return n
-      })
-    })
-  }, [])
-
-  return (
-    <div className="w-full h-full">
-      {loading ? (
-        <div className="flex justify-center items-center h-full">
-          <Spin size="large" />
-        </div>
-      ) : modelData.length === 0 ? (
-        <Space className="flex flex-col justify-center items-center h-[200px]">
-          <div>{$t('未配置 AI 模型')}</div>
-          <Button type="primary" onClick={() => navigate('/aisetting?status=unconfigure')}>
-            {$t('前往设置')}
-          </Button>
-        </Space>
-      ) : (
-        <ReactFlow
-          nodes={nodes}
-          edges={edges}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          onNodeDragStop={onNodeDragStop}
-          proOptions={{ hideAttribution: true }}
-          draggable={false}
-          nodeTypes={nodeTypes}
-          elementsSelectable={false}
-          edgeTypes={edgeTypes}
-          zoomOnScroll={false}
-          panOnDrag={false}
-          zoomOnPinch={false}
-          zoomOnDoubleClick={false}
-          panOnScroll={true}
-          panOnScrollMode={PanOnScrollMode.Vertical}
-          defaultEdgeOptions={{
-            type: 'custom'
-          }}
-          translateExtent={calculateExtent()}
-        />
-      )}
-    </div>
-  )
-}
-
-export default AIFlowChart

frontend/packages/core/src/pages/aiSetting/AIUnconfigure.tsx

@@ -1,136 +0,0 @@
-import Icon, { LoadingOutlined } from '@ant-design/icons'
-import WithPermission from '@common/components/aoplatform/WithPermission'
-import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const'
-import { useGlobalContext } from '@common/contexts/GlobalStateContext'
-import { useFetch } from '@common/hooks/http'
-import { $t } from '@common/locales'
-import { App, Button, Card, Empty, Spin, Tag } from 'antd'
-import { memo, useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useAiSetting } from './contexts/AiSettingContext'
-import { AiSettingListItem } from './types'
-
-const CardBox = memo(({ provider }: { provider: AiSettingListItem }) => {
-  const { openConfigModal } = useAiSetting()
-  const navigate = useNavigate()
-
-  const handleOpenModal = async (provider: AiSettingListItem) => {
-    await openConfigModal(provider)
-    navigate('/aisetting?status=configure')
-  }
-
-  return (
-    <Card
-      title={
-        <div className="flex w-full items-center justify-between gap-[4px]">
-          <div className="flex flex-1 overflow-hidden items-center  gap-[4px]">
-            <span
-              className=" flex items-center h-[22px]  ai-setting-svg-container"
-              dangerouslySetInnerHTML={{ __html: provider.logo }}
-            ></span>
-            <span className="font-normal truncate">{provider.name}</span>
-          </div>
-          <Tag
-            bordered={false}
-            color={provider.configured ? 'green' : undefined}
-            className="h-[22px] px-[4px] text-center"
-          >
-            {provider.configured ? $t('已配置') : $t('未配置')}
-          </Tag>
-        </div>
-      }
-      className="shadow-[0_5px_10px_0_rgba(0,0,0,0.05)] rounded-[10px] overflow-visible  h-[156px] m-0 flex flex-col "
-      classNames={{ header: 'border-b-[0px] p-[20px] px-[24px]', body: 'pt-0 flex-1' }}
-    >
-      <div className="flex flex-col justify-between h-full gap-btnbase">
-        <div className="flex items-center w-full h-[32px]  flex-1">
-          {provider.configured && (
-            <>
-              <label className="text-nowrap">{$t('默认')}：</label>
-              <span className="overflow-hidden flex-1 truncate">{provider.defaultLlm}</span>
-            </>
-          )}
-        </div>
-        <WithPermission access="system.settings.ai_provider.view">
-          <Button
-            block
-            icon={<Icon icon="ic:outline-settings" width={18} height={18} />}
-            onClick={() => handleOpenModal(provider)}
-            classNames={{ icon: 'h-[18px]' }}
-          >
-            {$t('设置')}
-          </Button>
-        </WithPermission>
-      </div>
-    </Card>
-  )
-})
-const ModelCardArea = ({ modelList, className }: { modelList: AiSettingListItem[]; className?: string }) => {
-  return (
-    <>
-      {modelList.length > 0 ? (
-        <div
-          className={className}
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
-            gap: '20px'
-          }}
-        >
-          {modelList.map((provider: AiSettingListItem) => (
-            <CardBox key={provider.id} provider={provider} />
-          ))}
-        </div>
-      ) : (
-        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-      )}
-    </>
-  )
-}
-
-const AIUnConfigure = () => {
-  const [modelData, setModelData] = useState<AiSettingListItem[]>([])
-  const { fetchData } = useFetch()
-  const [loading, setLoading] = useState<boolean>(false)
-  const { aiConfigFlushed } = useGlobalContext()
-
-  useEffect(() => {
-    setLoading(true)
-    fetchData<BasicResponse<{ providers: Omit<AiSettingListItem>[] }>>(`ai/providers/unconfigured`, {
-      method: 'GET',
-      eoTransformKeys: ['default_llm', 'default_llm_logo']
-    })
-      .then((response) => {
-        const { code, data, msg } = response
-        if (code === STATUS_CODE.SUCCESS) {
-          setModelData(data.providers)
-        } else {
-          const { message } = App.useApp()
-          message.error(msg || $t(RESPONSE_TIPS.error))
-        }
-      })
-      .finally(() => setLoading(false))
-  }, [aiConfigFlushed])
-
-  return (
-    <Spin
-      className="h-full"
-      wrapperClassName="h-full pr-PAGE_INSIDE_X"
-      indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}
-      spinning={loading}
-    >
-      {modelData && modelData.length > 0 ? (
-        <div>
-          {modelData.filter((item) => !item.configured).length > 0 && (
-            <>
-              <ModelCardArea modelList={modelData.filter((item) => !item.configured) || []} />
-            </>
-          )}
-        </div>
-      ) : (
-        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-      )}
-    </Spin>
-  )
-}
-export default AIUnConfigure

frontend/packages/core/src/pages/aiSetting/AiSettingList.tsx

@@ -3,9 +3,8 @@ import { useI18n } from '@common/locales'
 import { Tabs } from 'antd'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import AIFlowChart from './AIFlowChart'
-import AIUnConfigure from './AIUnconfigure'
 import { AiSettingProvider } from './contexts/AiSettingContext'
+import OnlineModelList from './OnlineModelList'
 
 const CONTENT_STYLE = { height: 'calc(-300px + 100vh)' } as const
 
@@ -38,21 +37,17 @@ const AiSettingContent = () => {
           items={[
             {
               key: 'flow',
-              label: $t('已设置'),
+              label: $t('在线模型'),
               children: (
                 <div className="overflow-auto" style={CONTENT_STYLE}>
-                  <AIFlowChart />
+                  <OnlineModelList />
                 </div>
               )
             },
             {
               key: 'config',
-              label: $t('未设置'),
+              label: $t('本地模型'),
-              children: (
+              children: <div className="overflow-auto" style={CONTENT_STYLE}></div>
-                <div className="overflow-auto" style={CONTENT_STYLE}>
-                  <AIUnConfigure />
-                </div>
-              )
             }
           ]}
         />

frontend/packages/core/src/pages/aiSetting/AiSettingModal.tsx

@@ -1,14 +1,13 @@
-import { QuestionCircleOutlined } from '@ant-design/icons'
 import { Codebox } from '@common/components/postcat/api/Codebox'
 import { BasicResponse, PLACEHOLDER, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const'
 import { useFetch } from '@common/hooks/http'
 import { $t } from '@common/locales'
-import { App, Form, InputNumber, Select, Switch, Tag, Tooltip } from 'antd'
+import { App, Form, Select, Switch, Tag } from 'antd'
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
 import { AiProviderLlmsItems, ModelDetailData } from './types'
 
 export type AiSettingModalContentProps = {
-  entity: ModelDetailData & { defaultLlm: string }
+  entity?: { id: string | undefined; defaultLlm: string | undefined }
   readOnly: boolean
 }
 
@@ -23,12 +22,41 @@ const AiSettingModalContent = forwardRef<AiSettingModalContentHandle, AiSettingM
   const { fetchData } = useFetch()
   const [llmList, setLlmList] = useState<AiProviderLlmsItems[]>()
   const [loading, setLoading] = useState<boolean>(false)
-  const [enableState, setEnableState] = useState<boolean>(entity.status === 'enabled')
+  const [enableState, setEnableState] = useState<boolean>(true)
+  const [status, setStatus] = useState<string>('enabled')
+  const [providers, setProviders] = useState<Array<{ id: string; name: string }>>([])
+  const [selectedProvider, setSelectedProvider] = useState<string>(entity?.id || '')
+
+  const getUnconfiguredProviders = () => {
+    if (entity?.id) return
+    fetchData<BasicResponse<{ providers: Array<{ id: string; name: string }> }>>('ai/providers/unconfigured', {
+      method: 'GET',
+      eoTransformKeys: ['default_llm']
+    }).then((response) => {
+      const { code, data, msg } = response
+      if (code === STATUS_CODE.SUCCESS) {
+        setProviders(data.providers)
+        if (data.providers.length > 0) {
+          const provider = data.providers[0]
+          setSelectedProvider(provider.id)
+          form.setFieldsValue({
+            provider: provider.id,
+            defaultLlm: provider.defaultLlm
+          })
+        }
+      } else {
+        message.error(msg || $t(RESPONSE_TIPS.error))
+      }
+    })
+  }
+
   const getLlmList = () => {
+    if (!selectedProvider) return
+
     setLoading(true)
     fetchData<BasicResponse<{ llms: AiProviderLlmsItems[] }>>(`ai/provider/llms`, {
       method: 'GET',
-      eoParams: { provider: entity.id }
+      eoParams: { provider: selectedProvider }
     })
       .then((response) => {
         const { code, data, msg } = response
@@ -42,56 +70,80 @@ const AiSettingModalContent = forwardRef<AiSettingModalContentHandle, AiSettingM
         setLoading(false)
       })
   }
+  const initData = async () => {
+    if (entity?.id) {
+      message.loading($t(RESPONSE_TIPS.loading))
+      const { code, data, msg } = await fetchData<BasicResponse<{ provider: ModelDetailData }>>('ai/provider/config', {
+        method: 'GET',
+        eoParams: { provider: entity.id },
+        eoTransformKeys: ['get_apikey_url', 'default_llm']
+      })
+      message.destroy()
+      if (code !== STATUS_CODE.SUCCESS) {
+        message.error(msg || $t(RESPONSE_TIPS.error))
+        return
+      }
+      const provider = data.provider
+      form.setFieldsValue({
+        defaultLlm: provider.defaultLlm,
+        config: provider.config ? JSON.stringify(JSON.parse(provider.config), null, 2) : '',
+        enable: provider.status === 'enabled'
+      })
+      setStatus(provider.status)
+      return
+    }
+    form.setFieldsValue({
+      defaultLlm: entity?.defaultLlm,
+      config: '',
+      enable: true
+    })
+  }
+
+  useEffect(() => {
+    getUnconfiguredProviders()
+  }, [])
 
   useEffect(() => {
     getLlmList()
-    try {
+  }, [selectedProvider])
-      form.setFieldsValue({
+
-        defaultLlm: entity.defaultLlm,
+  useEffect(() => {
-        config: entity!.config ? JSON.stringify(JSON.parse(entity!.config), null, 2) : '',
+    initData()
-        priority: entity.priority || 1,
+  }, [entity])
-        enable: entity.status === 'enabled'
-      })
-    } catch (e) {
-      form.setFieldsValue({
-        defaultLlm: entity.defaultLlm,
-        config: '',
-        priority: 1,
-        enable: true
-      })
-    }
-  }, [])
 
   const save: () => Promise<boolean | string> = () => {
-    return new Promise((resolve, reject) => {
+    return new Promise(async (resolve, reject) => {
-      form
+      try {
-        .validateFields()
+        form
-        .then((value) => {
+          .validateFields()
-          const finalValue = {
+          .then((value) => {
-            ...value,
+            const finalValue = {
-            priority: Math.max(1, value.priority)
+              ...value,
-          }
+              priority: Math.max(1, value.priority)
+            }
 
-          fetchData<BasicResponse<null>>('ai/provider/config', {
+            fetchData<BasicResponse<null>>('ai/provider/config', {
-            method: 'PUT',
+              method: entity ? 'PUT' : 'POST',
-            eoParams: { provider: entity?.id },
+              eoParams: { provider: selectedProvider },
-            eoBody: finalValue,
+              eoBody: finalValue,
-            eoTransformKeys: ['defaultLlm']
+              eoTransformKeys: ['defaultLlm']
-            // eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/'
-          })
-            .then((response) => {
-              const { code, msg } = response
-              if (code === STATUS_CODE.SUCCESS) {
-                message.success(msg || $t(RESPONSE_TIPS.success))
-                resolve(true)
-              } else {
-                message.error(msg || $t(RESPONSE_TIPS.error))
-                reject(msg || $t(RESPONSE_TIPS.error))
-              }
             })
-            .catch((errorInfo) => reject(errorInfo))
+              .then((response) => {
-        })
+                const { code, msg } = response
-        .catch((errorInfo) => reject(errorInfo))
+                if (code === STATUS_CODE.SUCCESS) {
+                  message.success(msg || $t(RESPONSE_TIPS.success))
+                  resolve(true)
+                } else {
+                  message.error(msg || $t(RESPONSE_TIPS.error))
+                  reject(msg || $t(RESPONSE_TIPS.error))
+                }
+              })
+              .catch((errorInfo) => reject(errorInfo))
+          })
+          .catch((errorInfo) => reject(errorInfo))
+      } catch (error) {
+        reject(error)
+      }
     })
   }
 
@@ -117,6 +169,15 @@ const AiSettingModalContent = forwardRef<AiSettingModalContentHandle, AiSettingM
       autoComplete="off"
       disabled={readOnly}
     >
+      {!entity?.id && (
+        <Form.Item label={$t('供应商')} name="provider" rules={[{ required: true, message: $t('请选择供应商') }]}>
+          <Select
+            placeholder={$t('请选择供应商')}
+            onChange={(value) => setSelectedProvider(value)}
+            options={providers.map((p) => ({ label: p.name, value: p.id }))}
+          />
+        </Form.Item>
+      )}
       <Form.Item<ModelDetailData> label={$t('默认模型')} name="defaultLlm" rules={[{ required: true }]}>
         <Select
           className="w-INPUT_NORMAL"
@@ -134,34 +195,6 @@ const AiSettingModalContent = forwardRef<AiSettingModalContentHandle, AiSettingM
         ></Select>
       </Form.Item>
 
-      <Form.Item<ModelDetailData>
-        label={
-          <span className="flex items-center">
-            {$t('负载优先级')}
-            <Tooltip
-              title={$t('负载优先级决定在原供应商异常或停用后，优先使用哪一个供应商。优先级数字越小，优先级越高。')}
-            >
-              <QuestionCircleOutlined className="ml-1 text-gray-500" />
-            </Tooltip>
-          </span>
-        }
-        name="priority"
-        rules={[
-          { required: true },
-          {
-            validator: async (_, value) => {
-              if (value <= 0) {
-                throw new Error($t('优先级必须大于 0'))
-              }
-              return Promise.resolve()
-            }
-          }
-        ]}
-        initialValue={1}
-      >
-        <InputNumber className="w-INPUT_NORMAL" min={1} placeholder={$t('请输入优先级')} />
-      </Form.Item>
-
       <Form.Item<ModelDetailData> label={$t('API Key（默认 Key）')} name="config">
         <Codebox
           editorTheme="vs-dark"
@@ -172,15 +205,14 @@ const AiSettingModalContent = forwardRef<AiSettingModalContentHandle, AiSettingM
           enableToolbar={false}
         />
       </Form.Item>
-
+      {entity?.id && (
-      {entity.configured && (
         <Form.Item className="p-4 bg-white rounded-lg" label={$t('LLM 状态管理')}>
           <div className="flex justify-between items-center">
             <div>
               <span className="text-gray-600">{$t('当前调用状态：')}</span>
-              {entity.status === 'enabled' && <Tag color="success">{$t('正常')}</Tag>}
+              {status === 'enabled' && <Tag color="success">{$t('正常')}</Tag>}
-              {entity.status === 'disabled' && <Tag color="warning">{$t('停用')}</Tag>}
+              {status === 'disabled' && <Tag color="warning">{$t('停用')}</Tag>}
-              {entity.status === 'abnormal' && <Tag color="error">{$t('异常')}</Tag>}
+              {status === 'abnormal' && <Tag color="error">{$t('异常')}</Tag>}
             </div>
             <Form.Item name="enable" valuePropName="checked" noStyle>
               <Switch
@@ -193,7 +225,7 @@ const AiSettingModalContent = forwardRef<AiSettingModalContentHandle, AiSettingM
               />
             </Form.Item>
           </div>
-          {(entity.status === 'enabled' && !enableState) || (entity.status !== 'enabled' && enableState) ? (
+          {(status === 'enabled' && !enableState) || (status !== 'enabled' && enableState) ? (
             <div className="mt-2 text-sm text-gray-500">* {getTooltipText(enableState)}</div>
           ) : null}
         </Form.Item>

frontend/packages/core/src/pages/aiSetting/OnlineModelList.tsx

@@ -0,0 +1,167 @@
+import { ActionType } from '@ant-design/pro-components'
+import PageList, { PageProColumns } from '@common/components/aoplatform/PageList'
+import TableBtnWithPermission from '@common/components/aoplatform/TableBtnWithPermission'
+import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const'
+import { useFetch } from '@common/hooks/http'
+import { $t } from '@common/locales'
+import { App, Divider, Space, Typography } from 'antd'
+import React, { useRef, useState } from 'react'
+import { useAiSetting } from './contexts/AiSettingContext'
+import { AiSettingListItem, ModelListData } from './types'
+
+const OnlineModelList: React.FC = () => {
+  const pageListRef = useRef<ActionType>(null)
+  const { message } = App.useApp()
+  const { fetchData } = useFetch()
+  const [searchWord, setSearchWord] = useState<string>('')
+  const [total, setTotal] = useState<number>(0)
+  const { openConfigModal } = useAiSetting()
+
+  const handleEdit = (record: ModelListData) => {
+    openConfigModal({ id: record.id, defaultLlm: record.defaultLlm } as AiSettingListItem)
+  }
+
+  const handleAdd = () => {
+    openConfigModal()
+  }
+
+  const handleDelete = async (id: string) => {
+    try {
+      const response = await fetchData<BasicResponse<any>>('ai/provider', {
+        method: 'DELETE',
+        eoParams: {
+          provider: id
+        }
+        // eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/'
+      })
+
+      if (response.code === STATUS_CODE.SUCCESS) {
+        message.success($t('删除成功'))
+        pageListRef.current?.reload()
+      } else {
+        message.error(response.msg || RESPONSE_TIPS.error)
+      }
+    } catch (error) {
+      message.error(RESPONSE_TIPS.error)
+    }
+  }
+
+  const requestList = async (params: any) => {
+    try {
+      const response = await fetchData<BasicResponse<{ data: ModelListData[] }>>('ai/providers/configured', {
+        method: 'GET',
+        eoParams: {
+          page_size: params.pageSize,
+          keyword: searchWord,
+          page: params.current
+        },
+        eoTransformKeys: ['default_llm']
+        // eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/'
+      })
+
+      if (response.code === STATUS_CODE.SUCCESS) {
+        setTotal(response.data.total)
+        return {
+          data: response.data.providers,
+          success: true,
+          total: response.data.total
+        }
+      } else {
+        message.error(response.msg || $t(RESPONSE_TIPS.error))
+        return {
+          data: [],
+          success: false,
+          total: response.data.total
+        }
+      }
+    } catch (error) {
+      return {
+        data: [],
+        success: false,
+        total: 0
+      }
+    }
+  }
+  const statusEnum = {
+    enabled: { text: <Typography.Text type="success">{$t('正常')}</Typography.Text> },
+    disabled: { text: <Typography.Text type="warning">{$t('停用')}</Typography.Text> },
+    abnormal: { text: <Typography.Text type="danger">{$t('异常')}</Typography.Text> }
+  }
+
+  const operation: PageProColumns<ModelListData>[] = [
+    {
+      title: '',
+      key: 'option',
+      btnNums: 4,
+      fixed: 'right',
+      valueType: 'option',
+      render: (_: React.ReactNode, entity: ModelListData) => [
+        <TableBtnWithPermission
+          access="system.devops.ai_provider.edit"
+          key="edit"
+          btnType="edit"
+          onClick={() => handleEdit(entity)}
+          btnTitle={$t('设置')}
+        />,
+        <Divider type="vertical" className="mx-0" />,
+        <TableBtnWithPermission
+          access="system.devops.ai_provider.edit"
+          key="delete"
+          btnType="delete"
+          onClick={() => handleDelete(entity.id as string)}
+          btnTitle={$t('删除')}
+        />
+      ]
+    }
+  ]
+
+  const columns: PageProColumns<ModelListData>[] = [
+    {
+      title: $t('名称'),
+      dataIndex: 'name',
+      render: (dom: React.ReactNode, entity: ModelListData) => <Space>{entity.name}</Space>
+    },
+    {
+      title: $t('状态'),
+      dataIndex: 'status',
+      ellipsis: true,
+      valueType: 'select',
+      // filters: true,
+      // onFilter: true,
+      valueEnum: statusEnum,
+      render: (dom: React.ReactNode, entity: ModelListData) => statusEnum[entity.status]?.text || entity.status
+    },
+    {
+      title: $t('默认模型'),
+      dataIndex: 'defaultLlm'
+    },
+    {
+      title: $t('Apis'),
+      dataIndex: 'api_count'
+    },
+    {
+      title: $t('Keys'),
+      dataIndex: 'key_count'
+    },
+    ...operation
+  ]
+
+  return (
+    <PageList
+      ref={pageListRef}
+      rowKey="id"
+      request={requestList}
+      onSearchWordChange={(e) => {
+        setSearchWord(e.target.value)
+        pageListRef.current?.reload()
+      }}
+      showPagination={true}
+      searchPlaceholder={$t('请输入名称搜索')}
+      columns={columns}
+      addNewBtnTitle={$t('添加模型')}
+      onAddNewBtnClick={handleAdd}
+    />
+  )
+}
+
+export default OnlineModelList

frontend/packages/core/src/pages/aiSetting/components/CustomEdge.tsx

@@ -1,72 +0,0 @@
-import { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, useStore } from '@xyflow/react'
-
-export default function CustomEdge({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  style = {},
-  markerEnd,
-  label,
-  data,
-  source,
-  target
-}: EdgeProps) {
-  // Get all edges to check for duplicates
-  const edges = useStore((state) => state.edges)
-
-  // Find duplicate edges between the same source and target
-  const duplicateEdges = edges.filter((edge) => edge.source === source && edge.target === target)
-  const edgeIndex = duplicateEdges.findIndex((edge) => edge.id === id)
-
-  // Adjust the path if this is a duplicate edge
-  const offset = edgeIndex * 20 // 20px offset for each duplicate edge
-
-  const [edgePath] = getSmoothStepPath({
-    sourceX,
-    sourceY: sourceY,
-    sourcePosition,
-    targetX,
-    targetY: targetY + offset,
-    targetPosition,
-    borderRadius: 16
-  })
-
-  const modelId = data?.id
-
-  return (
-    <>
-      <BaseEdge
-        path={edgePath}
-        markerEnd={markerEnd}
-        style={{
-          ...style,
-          cursor: 'pointer'
-        }}
-      />
-      {label && (
-        <EdgeLabelRenderer>
-          <a
-            href={`${label?.toString().includes('apis') ? '/aiApis' : '/keysetting'}?modelId=${modelId}`}
-            target="_blank"
-            style={{
-              position: 'absolute',
-              transform: `translate(${targetX - 80}px,${targetY - 20 + offset}px)`,
-              borderRadius: '4px',
-              fontSize: 12,
-              fontWeight: 500,
-              cursor: 'pointer',
-              pointerEvents: 'all',
-              textDecoration: 'none'
-            }}
-          >
-            {label}
-          </a>
-        </EdgeLabelRenderer>
-      )}
-    </>
-  )
-}

frontend/packages/core/src/pages/aiSetting/components/KeyStatusNode.tsx

@@ -1,53 +0,0 @@
-import { Handle, Position } from '@xyflow/react'
-import React from 'react'
-import { KeyData } from '../types'
-
-interface KeyStatusNodeData {
-  id: string
-  title: string
-  keys: KeyData[]
-}
-
-const KEY_SIZE = '1.25rem' // 20px
-const KEY_GAP = '0.25rem' // 4px
-const MAX_KEYS = 10
-
-export const KeyStatusNode: React.FC<{ data: KeyStatusNodeData }> = ({ data }) => {
-  const { title, keys = [] } = data
-  const totalKeys = keys.length
-  const keyWidth = totalKeys > 5 ? `calc((100% - ${(totalKeys - 1) * 0.25}rem) / ${totalKeys})` : KEY_SIZE
-  return (
-    <div
-      className="relative p-4 bg-white rounded-lg shadow-sm node-card nodrag"
-      style={{ border: '1px solid var(--border-color)' }}
-    >
-      <Handle type="target" position={Position.Left} />
-      <div className="flex flex-col">
-        <div className="text-sm text-gray-900">{title}</div>
-        <div
-          className="flex gap-1 w-full"
-          style={{
-            minWidth: keys.length > 5 ? '118px' : 'auto',
-            maxWidth: `calc(${MAX_KEYS} * ${KEY_SIZE} + (${MAX_KEYS} - 1) * ${KEY_GAP})`,
-            minHeight: KEY_SIZE
-          }}
-        >
-          {keys.map((key) => (
-            <div
-              key={key.id}
-              style={{
-                width: keyWidth,
-                height: KEY_SIZE
-              }}
-              className={`
-                  flex-shrink-0
-                  ${key.status === 'normal' ? 'bg-green-500' : 'bg-red-500'}
-                  transition-all duration-200 hover:opacity-80
-                `}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}

frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx

@@ -1,76 +0,0 @@
-import { $t } from '@common/locales'
-import { Icon } from '@iconify/react'
-import { Handle, Position } from '@xyflow/react'
-import React from 'react'
-import { useAiSetting } from '../contexts/AiSettingContext'
-import { AiSettingListItem, ModelDetailData, ModelStatus } from '../types'
-
-type ModelCardNodeData = ModelDetailData & {
-  id: string
-  position: { x: number; y: number }
-  alternativeModel?: ModelDetailData
-}
-
-export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) => {
-  const { name, status, defaultLlm, logo, alternativeModel } = data
-  const { openConfigModal } = useAiSetting()
-
-  const getStatusIcon = (status: ModelStatus) => {
-    switch (status) {
-      case 'enabled':
-        return { icon: 'mdi:check-circle', color: 'text-green-500' }
-      case 'disabled':
-        return { icon: 'mdi:pause-circle', color: 'text-gray-400' }
-      case 'abnormal':
-        return { icon: 'mdi:alert-circle', color: 'text-red-500' }
-    }
-  }
-
-  const statusConfig = getStatusIcon(status)
-
-  return (
-    <>
-      <div
-        className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px] group"
-        style={{ border: '1px solid var(--border-color)' }}
-      >
-        <Handle type="target" position={Position.Left} />
-        <Handle type="source" position={Position.Right} />
-        <div>
-          <div className="flex justify-between items-center">
-            <div className="flex gap-2 items-center">
-              <div className="flex flex-1 overflow-hidden items-center gap-[4px]">
-                <span
-                  className="flex items-center h-[22px] ai-setting-svg-container"
-                  dangerouslySetInnerHTML={{ __html: logo }}
-                ></span>
-              </div>
-              <span className="text-base text-gray-900 max-w-[180px] truncate">{name}</span>
-              <Icon icon={statusConfig?.icon} className={`text-xl ${statusConfig?.color}`} />
-            </div>
-
-            {/* Action buttons */}
-            <div className="flex gap-2 transition-opacity duration-200">
-              <Icon
-                icon="mdi:cog"
-                className="text-xl text-gray-400 cursor-pointer hover:text-[--primary-color]"
-                onClick={() => {
-                  openConfigModal({ id: data.id, defaultLlm: defaultLlm } as AiSettingListItem)
-                }}
-              />
-            </div>
-          </div>
-          <div className="mt-2 text-sm text-gray-500">
-            {$t('默认：')}
-            {defaultLlm}
-          </div>
-        </div>
-      </div>
-          {status !== 'enabled' && alternativeModel && (
-            <div className="ml-4 mt-1 text-sm text-gray-500">
-              {$t('关联 API 已转用')} {alternativeModel.name}/{alternativeModel.defaultLlm}
-            </div>
-          )}
-    </>
-  )
-}

frontend/packages/core/src/pages/aiSetting/components/NodeComponents.tsx

@@ -1,3 +0,0 @@
-export { KeyStatusNode } from './KeyStatusNode'
-export { ModelCardNode } from './ModelCardNode'
-export { ServiceCardNode } from './ServiceCardNode'

frontend/packages/core/src/pages/aiSetting/components/ServiceCardNode.tsx

@@ -1,18 +0,0 @@
-import { Icon } from '@iconify/react'
-import { Handle, NodeProps, Position } from '@xyflow/react'
-import React from 'react'
-
-export const ServiceCardNode: React.FC<NodeProps> = () => {
-  return (
-    <div
-      className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[150px]  nodrag"
-      style={{ border: '1px solid var(--border-color)' }}
-    >
-      <Handle type="source" position={Position.Right} />
-      <div className="flex flex-col gap-2 items-center">
-        <Icon icon="mdi:robot" className="text-3xl text-[--primary-color]" />
-        <span className="text-base text-gray-900">AI Services</span>
-      </div>
-    </div>
-  )
-}

frontend/packages/core/src/pages/aiSetting/contexts/AiSettingContext.tsx

@@ -1,45 +1,30 @@
 import Icon from '@ant-design/icons'
-import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const'
 import { useGlobalContext } from '@common/contexts/GlobalStateContext'
-import { useFetch } from '@common/hooks/http'
 import { $t } from '@common/locales'
 import { checkAccess } from '@common/utils/permission'
 import { App } from 'antd'
 import { createContext, useContext, useRef } from 'react'
 import AiSettingModalContent, { AiSettingModalContentHandle } from '../AiSettingModal'
-import { AiSettingListItem, ModelDetailData } from '../types'
+import { AiSettingListItem } from '../types'
 
 interface AiSettingContextType {
-  openConfigModal: (entity: AiSettingListItem) => Promise<void>
+  openConfigModal: (entity?: AiSettingListItem) => Promise<void>
 }
 
 const AiSettingContext = createContext<AiSettingContextType | undefined>(undefined)
 
 export const AiSettingProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const { modal, message } = App.useApp()
+  const { modal } = App.useApp()
-  const { fetchData } = useFetch()
   const { aiConfigFlushed, setAiConfigFlushed, accessData } = useGlobalContext()
   const modalRef = useRef<AiSettingModalContentHandle>()
 
-  const openConfigModal = async (entity: AiSettingListItem) => {
+  const openConfigModal = async (entity?: AiSettingListItem) => {
-    message.loading($t(RESPONSE_TIPS.loading))
-    const { code, data, msg } = await fetchData<BasicResponse<{ provider: ModelDetailData }>>('ai/provider/config', {
-      method: 'GET',
-      eoParams: { provider: entity!.id },
-      eoTransformKeys: ['get_apikey_url']
-    })
-    message.destroy()
-    if (code !== STATUS_CODE.SUCCESS) {
-      message.error(msg || $t(RESPONSE_TIPS.error))
-      return
-    }
-
     modal.confirm({
       title: $t('模型配置'),
       content: (
         <AiSettingModalContent
           ref={modalRef}
-          entity={{ ...data.provider, defaultLlm: entity.defaultLlm }}
+          entity={{ id: entity?.id, defaultLlm: entity?.defaultLlm }}
           readOnly={!checkAccess('system.devops.ai_provider.edit', accessData)}
         />
       ),
@@ -58,10 +43,10 @@ export const AiSettingProvider: React.FC<{ children: React.ReactNode }> = ({ chi
             <a
               target="_blank"
               rel="noopener noreferrer"
-              href={data.provider.getApikeyUrl}
+              // href={data.provider.getApikeyUrl}
               className="flex items-center gap-[8px]"
             >
-              <span>{$t('从 (0) 获取 API KEY', [data.provider.name])}</span>
+              {/* <span>{$t('从 (0) 获取 API KEY', [data.provider.name])}</span> */}
               <Icon icon="ic:baseline-open-in-new" width={16} height={16} />
             </a>
             <div>

frontend/packages/core/src/pages/aiSetting/types.ts

@@ -1,10 +1,10 @@
-export type ModelStatus = 'enabled' | 'abnormal'|'disabled'
+export type ModelStatus = 'enabled' | 'abnormal' | 'disabled'
-export type KeyStatus ='normal' | 'abnormal'|'disabled'
+export type KeyStatus = 'normal' | 'abnormal' | 'disabled'
 
 export interface KeyData {
   id: string
   name: string
-  status: KeyStatus,
+  status: KeyStatus
 }
 
 export interface ModelListData {
@@ -17,16 +17,14 @@ export interface ModelListData {
   key_count: number
   keys: KeyData[]
 }
-export interface ModelDetailData extends ModelListData{
+export interface ModelDetailData extends ModelListData {
-  enable:boolean
+  enable: boolean
-  config: string,
+  config: string
-  priority?: number
   getApikeyUrl: string
   status: ModelStatus
   configured: boolean
 }
 
-
 export type AiSettingListItem = {
   name: string
   id: string
@@ -53,5 +51,3 @@ export type AiProviderDefaultConfig = {
   defaultLlm: string
   scopes: string[]
 }
-
-

frontend/packages/core/src/pages/playground/index.tsx

@@ -1,7 +1,5 @@
 'use client'
 
-import AIFlowChart from '../aiSetting/AIFlowChart'
-
 export default function Playground() {
-  return <AIFlowChart />
+  return <iframe src="/playground" />
 }