From 51910e6740c2fee173a1bdf213b6d8c93db941ec Mon Sep 17 00:00:00 2001
From: scarqin <scarqin@gmail.com>
Date: Wed, 25 Dec 2024 17:53:15 +0800
Subject: [PATCH] feat: support sort table

---
 .../keySettings/components/ApiKeyModal.tsx    |  6 ++--
 .../core/src/pages/keySettings/index.tsx      | 29 ++++++++++++++-----
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/frontend/packages/core/src/pages/keySettings/components/ApiKeyModal.tsx b/frontend/packages/core/src/pages/keySettings/components/ApiKeyModal.tsx
index 8bbbf393..6a3627e0 100644
--- a/frontend/packages/core/src/pages/keySettings/components/ApiKeyModal.tsx
+++ b/frontend/packages/core/src/pages/keySettings/components/ApiKeyModal.tsx
@@ -8,7 +8,7 @@ interface ApiKeyModalProps {
   visible: boolean
   onCancel: () => void
   onSave: (values: any) => void
-  vendorName: string
+  providerName: string
   mode: 'add' | 'edit'
   initialValues?: Partial<APIKey>
   defaultKeyNumber?: number
@@ -20,7 +20,7 @@ const ApiKeyModal: React.FC<ApiKeyModalProps> = ({
   visible,
   onCancel,
   onSave,
-  vendorName,
+  providerName,
   mode,
   initialValues,
   defaultKeyNumber = 1
@@ -76,7 +76,7 @@ const ApiKeyModal: React.FC<ApiKeyModalProps> = ({
 
   return (
     <Modal
-      title={mode === 'add' ? $t('添加 {{vendorName}} APIKey', { vendorName }) : $t('编辑 APIKey')}
+      title={mode === 'add' ? $t(`添加 ${providerName} APIKey`) : $t('编辑 APIKey')}
       open={visible}
       onCancel={onCancel}
       onOk={handleOk}
diff --git a/frontend/packages/core/src/pages/keySettings/index.tsx b/frontend/packages/core/src/pages/keySettings/index.tsx
index d05e3c8e..db7f1495 100644
--- a/frontend/packages/core/src/pages/keySettings/index.tsx
+++ b/frontend/packages/core/src/pages/keySettings/index.tsx
@@ -14,6 +14,7 @@ import { APIKey } from './types'
 const KeySettings: React.FC = () => {
   const pageListRef = useRef<ActionType>(null)
   const [selectedProvider, setSelectedProvider] = useState<string>('openai')
+  const [providerName, setProviderName] = useState<string>('')
   const [modalVisible, setModalVisible] = useState(false)
   const [modalMode, setModalMode] = useState<'add' | 'edit'>('add')
   const [editingKey, setEditingKey] = useState<APIKey | null>(null)
@@ -23,8 +24,26 @@ const KeySettings: React.FC = () => {
 
   useEffect(() => {
     pageListRef.current?.reload()
+    fetchProviderName()
   }, [selectedProvider])
 
+  const fetchProviderName = async () => {
+    try {
+      const response = await fetchData<{ code: number; data: { providers: { id: string; name: string }[] } }>(
+        'simple/ai/providers',
+        { method: 'GET' }
+      )
+      if (response.code === STATUS_CODE.SUCCESS) {
+        const provider = response.data.providers.find((p) => p.id === selectedProvider)
+        if (provider) {
+          setProviderName(provider.name)
+        }
+      }
+    } catch (error) {
+      console.error('Failed to fetch provider name:', error)
+    }
+  }
+
   useEffect(() => {}, [])
 
   const handleEdit = (record: APIKey) => {
@@ -142,12 +161,6 @@ const KeySettings: React.FC = () => {
       })
 
       if (response.code === STATUS_CODE.SUCCESS) {
-        setApiKeys(
-          newDataSource.map((item, index) => ({
-            ...item,
-            priority: index + 1
-          }))
-        )
         message.success($t('排序成功'))
         pageListRef.current?.reload()
       } else {
@@ -158,7 +171,7 @@ const KeySettings: React.FC = () => {
     }
   }
 
-  const requestApiKeys = async (params: { pageSize: number; current: number }) => {
+  const requestApiKeys = async (params: any) => {
     try {
       const response = await fetchData<BasicResponse<{ data: APIKey[] }>>('ai/resource/keys', {
         method: 'GET',
@@ -325,7 +338,7 @@ const KeySettings: React.FC = () => {
           mode={modalMode}
           onCancel={handleModalCancel}
           onSave={handleSave}
-          vendorName={selectedProvider}
+          providerName={providerName}
           initialValues={
             editingKey
               ? {