From 4733b3c9192d8fd2ae35a95dc2ef64e8e1a6f897 Mon Sep 17 00:00:00 2001
From: scarqin <scarqin@gmail.com>
Date: Tue, 24 Dec 2024 18:14:50 +0800
Subject: [PATCH] feat: apikeys

---
 frontend/.windsurfrules                       |  11 +-
 .../keySettings/components/EditKeyModal.tsx   |  67 ++++++
 .../keySettings/components/StatusFilter.tsx   |  40 ++++
 .../core/src/pages/keySettings/index.tsx      | 200 +++++++++++++++++-
 4 files changed, 313 insertions(+), 5 deletions(-)
 create mode 100644 frontend/packages/core/src/pages/keySettings/components/EditKeyModal.tsx
 create mode 100644 frontend/packages/core/src/pages/keySettings/components/StatusFilter.tsx

diff --git a/frontend/.windsurfrules b/frontend/.windsurfrules
index 9e10462d..23f6c91c 100644
--- a/frontend/.windsurfrules
+++ b/frontend/.windsurfrules
@@ -14,4 +14,13 @@ Create detailed components with these requirements:
    - Update current packages/core/src/pages/Root.tsx with new comprehensive code
    - Don't forget root route (page.tsx) handling
    - You MUST complete the entire prompt before stopping
-​
\ No newline at end of file
+​11. Table component should use <PageList>
+12. use `const { fetchData } = useFetch()` to fetch http data,such as ```  fetchData<BasicResponse<{ profile: UserInfoType }>>('account/profile', { method: 'GET' }).then((response) => {
+      const { code, data, msg } = response
+      if (code === STATUS_CODE.SUCCESS) {
+        setUserInfo(data.profile)
+        dispatch({ type: 'UPDATE_USERDATA', userData: data.profile })
+      } else {
+        message.error(msg || $t(RESPONSE_TIPS.error))
+      }
+    })```
\ No newline at end of file
diff --git a/frontend/packages/core/src/pages/keySettings/components/EditKeyModal.tsx b/frontend/packages/core/src/pages/keySettings/components/EditKeyModal.tsx
new file mode 100644
index 00000000..ae0e4833
--- /dev/null
+++ b/frontend/packages/core/src/pages/keySettings/components/EditKeyModal.tsx
@@ -0,0 +1,67 @@
+import { $t } from '@common/locales'
+import { DatePicker, Form, Input, Modal, Switch, theme } from 'antd'
+import dayjs from 'dayjs'
+import React from 'react'
+
+interface EditKeyModalProps {
+  visible: boolean
+  onCancel: () => void
+  onSave: (values: any) => void
+  initialValues?: {
+    key: string
+    expirationDate: string
+    enabled: boolean
+  }
+}
+
+const EditKeyModal: React.FC<EditKeyModalProps> = ({ visible, onCancel, onSave, initialValues }) => {
+  const [form] = Form.useForm()
+  const { token } = theme.useToken()
+
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields()
+      onSave({
+        ...values,
+        expirationDate: values.expirationDate.format('YYYY-MM-DD')
+      })
+    } catch (error) {
+      console.error('Validation failed:', error)
+    }
+  }
+
+  return (
+    <Modal title={$t('Edit API Key')} open={visible} onCancel={onCancel} onOk={handleOk} destroyOnClose>
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={{
+          ...initialValues,
+          expirationDate: initialValues?.expirationDate ? dayjs(initialValues.expirationDate) : undefined
+        }}
+      >
+        <Form.Item
+          name="key"
+          label={$t('API Key')}
+          rules={[{ required: true, message: $t('Please input the API key') }]}
+        >
+          <Input.Password />
+        </Form.Item>
+
+        <Form.Item
+          name="expirationDate"
+          label={$t('Expiration Date')}
+          rules={[{ required: true, message: $t('Please select expiration date') }]}
+        >
+          <DatePicker style={{ width: '100%' }} />
+        </Form.Item>
+
+        <Form.Item name="enabled" label={$t('Enabled')} valuePropName="checked">
+          <Switch checkedChildren={$t('Yes')} unCheckedChildren={$t('No')} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}
+
+export default EditKeyModal
diff --git a/frontend/packages/core/src/pages/keySettings/components/StatusFilter.tsx b/frontend/packages/core/src/pages/keySettings/components/StatusFilter.tsx
new file mode 100644
index 00000000..64cc18e9
--- /dev/null
+++ b/frontend/packages/core/src/pages/keySettings/components/StatusFilter.tsx
@@ -0,0 +1,40 @@
+import { $t } from '@common/locales'
+import { Select, Space, theme } from 'antd'
+import React from 'react'
+
+interface StatusFilterProps {
+  value: string[]
+  onChange: (value: string[]) => void
+}
+
+const StatusFilter: React.FC<StatusFilterProps> = ({ value, onChange }) => {
+  const { token } = theme.useToken()
+
+  const options = [
+    { label: $t('Normal'), value: 'normal', color: token.colorSuccess },
+    { label: $t('Exceeded'), value: 'exceeded', color: token.colorError },
+    { label: $t('Expired'), value: 'expired', color: token.colorWarning },
+    { label: $t('Disabled'), value: 'disabled', color: token.colorTextDisabled },
+    { label: $t('Error'), value: 'error', color: token.colorError }
+  ]
+
+  return (
+    <Space>
+      <span>{$t('Status')}:</span>
+      <Select
+        mode="multiple"
+        value={value}
+        onChange={onChange}
+        style={{ width: 300 }}
+        placeholder={$t('Filter by status')}
+        allowClear
+        options={options.map((option) => ({
+          ...option,
+          label: <span style={{ color: option.color }}>{option.label}</span>
+        }))}
+      />
+    </Space>
+  )
+}
+
+export default StatusFilter
diff --git a/frontend/packages/core/src/pages/keySettings/index.tsx b/frontend/packages/core/src/pages/keySettings/index.tsx
index 0320b35b..f81a7c9d 100644
--- a/frontend/packages/core/src/pages/keySettings/index.tsx
+++ b/frontend/packages/core/src/pages/keySettings/index.tsx
@@ -1,16 +1,208 @@
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
+import { ActionType } from '@ant-design/pro-components'
 import InsidePage from '@common/components/aoplatform/InsidePage'
+import PageList from '@common/components/aoplatform/PageList'
+import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const'
+import { useFetch } from '@common/hooks/http'
 import { $t } from '@common/locales'
-import React from 'react'
+import { Badge, Button, message, Select, Space, Tooltip } from 'antd'
+import React, { useEffect, useRef, useState } from 'react'
+import EditKeyModal from './components/EditKeyModal'
+import StatusFilter from './components/StatusFilter'
+
+interface APIKey {
+  id: string
+  key: string
+  status: 'normal' | 'exceeded' | 'expired' | 'disabled' | 'error'
+  expirationDate: string
+  priority: number
+  isDefault: boolean
+}
 
 const KeySettings: React.FC = () => {
+  const actionRef = useRef<ActionType>()
+  const [selectedProvider, setSelectedProvider] = useState<string>('openai')
+  const [statusFilter, setStatusFilter] = useState<string[]>([])
+  const [editModalVisible, setEditModalVisible] = useState(false)
+  const [editingKey, setEditingKey] = useState<APIKey | null>(null)
+  const [apiKeys, setApiKeys] = useState<APIKey[]>([])
+  const { fetchData } = useFetch()
+
+  useEffect(() => {
+    fetchData<BasicResponse<{ data: APIKey[] }>>('ai/resource/keys', {
+      method: 'GET',
+      eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/'
+    }).then((response) => {
+      const { code, data, msg } = response
+      if (code === STATUS_CODE.SUCCESS) {
+        setApiKeys(data.keys)
+      } else {
+        message.error(msg || $t(RESPONSE_TIPS.error))
+      }
+    })
+  }, [])
+
+  const statusColors = {
+    normal: '#52c41a',
+    exceeded: '#ff4d4f',
+    expired: '#faad14',
+    disabled: '#d9d9d9',
+    error: '#ff4d4f'
+  }
+
+  const handleEdit = (record: APIKey) => {
+    setEditingKey(record)
+    setEditModalVisible(true)
+  }
+
+  const handleSave = (values: any) => {
+    if (editingKey) {
+      const newKeys = apiKeys.map((key) =>
+        key.id === editingKey.id
+          ? {
+              ...key,
+              key: values.key,
+              expirationDate: values.expirationDate,
+              status: values.enabled ? 'normal' : 'disabled'
+            }
+          : key
+      )
+      setApiKeys(newKeys)
+    }
+    setEditModalVisible(false)
+    setEditingKey(null)
+  }
+
+  const handleDelete = (id: string) => {
+    setApiKeys(apiKeys.filter((key) => key.id !== id))
+  }
+
+  const handleDragSortEnd = async (beforeIndex: number, afterIndex: number, newDataSource: APIKey[]) => {
+    setApiKeys(
+      newDataSource.map((item, index) => ({
+        ...item,
+        priority: index + 1
+      }))
+    )
+  }
+
+  const columns = [
+    {
+      title: $t('API Key'),
+      dataIndex: 'key',
+      render: (text: string, record: APIKey) => (
+        <Space>
+          {text}
+          {record.isDefault && <Badge count={$t('Default')} style={{ backgroundColor: statusColors.normal }} />}
+        </Space>
+      )
+    },
+    {
+      title: $t('状态'),
+      dataIndex: 'status',
+      render: (status: keyof typeof statusColors) => (
+        <Badge
+          status="processing"
+          text={status.charAt(0).toUpperCase() + status.slice(1)}
+          style={{ color: statusColors[status] }}
+        />
+      )
+    },
+    {
+      title: $t('过期时间'),
+      dataIndex: 'expirationDate'
+    },
+    {
+      title: $t('优先级'),
+      dataIndex: 'priority'
+    },
+    {
+      title: $t('操作'),
+      key: 'actions',
+      render: (_: unknown, record: APIKey) => (
+        <Space>
+          <Tooltip title={$t('Edit')}>
+            <Button
+              type="text"
+              icon={<EditOutlined />}
+              disabled={record.isDefault}
+              onClick={() => handleEdit(record)}
+            />
+          </Tooltip>
+          <Tooltip title={$t('Delete')}>
+            <Button
+              type="text"
+              icon={<DeleteOutlined />}
+              disabled={record.isDefault}
+              danger
+              onClick={() => handleDelete(record.id)}
+            />
+          </Tooltip>
+        </Space>
+      ),
+      width: 120,
+      btnNums: 2
+    }
+  ]
+
+  // const filteredKeys = statusFilter.length > 0 ? apiKeys.filter((key) => statusFilter.includes(key.status)) : apiKeys
+  const filteredKeys = apiKeys
+
+  const beforeSearchNode = [
+    <Select
+      key="provider"
+      value={selectedProvider}
+      onChange={setSelectedProvider}
+      style={{ width: 200 }}
+      options={[
+        { label: 'OpenAI', value: 'openai' },
+        { label: 'Anthropic', value: 'anthropic' }
+      ]}
+    />,
+    <StatusFilter key="status" value={statusFilter} onChange={setStatusFilter} />
+  ]
+
   return (
     <InsidePage
       className="overflow-y-auto pb-PAGE_INSIDE_B"
-      pageTitle={$t('key 模型')}
-      description={$t('配置好 AI 模型后，你可以使用对应的大模型来创建 AI 服务')}
+      pageTitle={$t('APIKey 资源池')}
+      description={$t('支持单个 API 模型供应商下创建多个 APIKey，并可对多个 APIKEY 进行智能负载均衡')}
       showBorder={false}
       scrollPage={false}
-    ></InsidePage>
+    >
+      <PageList
+        actionRef={actionRef}
+        columns={columns}
+        dataSource={filteredKeys}
+        dragSortKey="sort"
+        onDragSortEnd={handleDragSortEnd}
+        beforeSearchNode={beforeSearchNode}
+        addNewBtnTitle={$t('添加 API Key')}
+        onAddNewBtnClick={() => {
+          setEditingKey(null)
+          setEditModalVisible(true)
+        }}
+        rowKey="id"
+      />
+
+      <EditKeyModal
+        visible={editModalVisible}
+        onCancel={() => {
+          setEditModalVisible(false)
+          setEditingKey(null)
+        }}
+        onSave={handleSave}
+        initialValues={
+          editingKey
+            ? {
+                key: editingKey.key,
+                expirationDate: editingKey.expirationDate,
+                enabled: editingKey.status !== 'disabled'
+              }
+            : undefined
+        }
+      />
+    </InsidePage>
   )
 }