From a864e67a6ccf2bf2067794e65fc7444785bb1365 Mon Sep 17 00:00:00 2001
From: scarqin <scarqin@gmail.com>
Date: Wed, 25 Dec 2024 14:43:29 +0800
Subject: [PATCH] feat: encapsulation select options

---
 .../src/components/AIProviderSelect/index.tsx | 43 +++++++++++++++++++
 .../core/src/pages/keySettings/index.tsx      | 30 ++++++-------
 2 files changed, 55 insertions(+), 18 deletions(-)
 create mode 100644 frontend/packages/core/src/components/AIProviderSelect/index.tsx

diff --git a/frontend/packages/core/src/components/AIProviderSelect/index.tsx b/frontend/packages/core/src/components/AIProviderSelect/index.tsx
new file mode 100644
index 00000000..2c568c4d
--- /dev/null
+++ b/frontend/packages/core/src/components/AIProviderSelect/index.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Select, Space } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+export interface AIProviderOption {
+  label: string;
+  value: string;
+}
+
+interface AIProviderSelectProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  style?: React.CSSProperties;
+  options?: AIProviderOption[];
+}
+
+const defaultOptions: AIProviderOption[] = [
+  { label: 'OpenAI', value: 'openai' },
+  { label: 'Anthropic', value: 'anthropic' }
+];
+
+const AIProviderSelect: React.FC<AIProviderSelectProps> = ({
+  value,
+  onChange,
+  style = { width: 200 },
+  options = defaultOptions
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Space className="flex items-center">
+      <span>{t('AI 供应商')}:</span>
+      <Select
+        value={value}
+        onChange={onChange}
+        style={style}
+        options={options}
+      />
+    </Space>
+  );
+};
+
+export default AIProviderSelect;
diff --git a/frontend/packages/core/src/pages/keySettings/index.tsx b/frontend/packages/core/src/pages/keySettings/index.tsx
index 2959acd4..fc99c916 100644
--- a/frontend/packages/core/src/pages/keySettings/index.tsx
+++ b/frontend/packages/core/src/pages/keySettings/index.tsx
@@ -5,11 +5,12 @@ import TableBtnWithPermission from '@common/components/aoplatform/TableBtnWithPe
 import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const'
 import { useFetch } from '@common/hooks/http'
 import { $t } from '@common/locales'
-import { Divider, message, Select, Space, Typography } from 'antd'
+import AIProviderSelect from '@core/components/AIProviderSelect'
+import { Divider, message, Space, Typography } from 'antd'
 import React, { useEffect, useRef, useState } from 'react'
 import ApiKeyModal from './components/ApiKeyModal'
 
-export interface APIKey {
+export interface APIKey extends Record<string, unknown> {
   id: string
   name: string
   status: 'normal' | 'exceeded' | 'expired' | 'disabled' | 'error'
@@ -157,12 +158,15 @@ const KeySettings: React.FC = () => {
       filters: true,
       onFilter: true,
       valueEnum: statusEnum,
-      render: (status: APIKey['status']) => statusEnum[status]?.text || status
+      render: (dom: React.ReactNode, entity: APIKey) => statusEnum[entity.status]?.text || entity.status
     },
     {
       title: $t('已用 Token'),
       dataIndex: 'use_token',
-      render: (value: number) => value.toLocaleString()
+      render: (dom: React.ReactNode, entity: APIKey) => {
+        const value = entity.use_token
+        return value.toLocaleString()
+      }
     },
     {
       title: $t('编辑时间'),
@@ -171,7 +175,9 @@ const KeySettings: React.FC = () => {
     {
       title: $t('过期时间'),
       dataIndex: 'expire_time',
-      render: (expireTime: string) => (expireTime === '0' ? $t('永不过期') : expireTime)
+      render: (dom: React.ReactNode, entity: APIKey) => {
+        return entity.expire_time === '0' ? $t('永不过期') : entity.expire_time
+      }
     },
     ...operation
   ]
@@ -184,19 +190,7 @@ const KeySettings: React.FC = () => {
       showBorder={false}
       scrollPage={false}
     >
-      <Space className="flex items-center">
-        <span>{$t('AI 供应商')}:</span>
-        <Select
-          key="provider"
-          value={selectedProvider}
-          onChange={setSelectedProvider}
-          style={{ width: 200 }}
-          options={[
-            { label: 'OpenAI', value: 'openai' },
-            { label: 'Anthropic', value: 'anthropic' }
-          ]}
-        />
-      </Space>
+      <AIProviderSelect value={selectedProvider} onChange={setSelectedProvider} />
       <PageList
         actionRef={actionRef}
         rowKey="id"