feature: app's api key support delete

web/src/views/ApplicationConfig/Api.tsx

@@ -1,6 +1,6 @@
 import { type FC, useState, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Space, App, Statistic, Row, Col, Divider } from 'antd';
+import { Button, Space, App, Statistic, Row, Col } from 'antd';
 import copy from 'copy-to-clipboard'
 
 import Card from './components/Card';
@@ -10,7 +10,7 @@ import type { ApiKey } from '@/views/ApiKeyManagement/types'
 import ApiKeyModal from './components/ApiKeyModal';
 import ApiKeyConfigModal from './components/ApiKeyConfigModal';
 import Tag from '@/components/Tag'
-import { getApiKeyList, getApiKeyStats } from '@/api/apiKey';
+import { getApiKeyList, getApiKeyStats, deleteApiKey } from '@/api/apiKey';
 import { maskApiKeys } from '@/utils/apiKeyReplacer'
 
 const Api: FC<{ application: Application | null }> = ({ application }) => {
@@ -44,7 +44,7 @@ const Api: FC<{ application: Application | null }> = ({ application }) => {
     }).then(res => {
       const response = res as { items: ApiKey[] }
       const list = response.items ?? []
-      getAllStats(list)
+      getAllStats([...list])
     })
   }
   const getAllStats = (list: ApiKey[]) => {
@@ -78,7 +78,11 @@ const Api: FC<{ application: Application | null }> = ({ application }) => {
         okText: t('common.delete'),
         okType: 'danger',
         onOk: () => {
-          
+          deleteApiKey(vo.id)
+            .then(() => {
+              getApiList();
+              message.success(t('common.deleteSuccess'))
+            })
         }
       })
   }

web/src/views/ApplicationConfig/components/ApiKeyConfigModal.tsx

@@ -18,13 +18,14 @@ const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProp
   const [form] = Form.useForm<ApiKey>();
   const [loading, setLoading] = useState(false)
   const values = Form.useWatch<ApiKey>([], form)
-  const [editVo, setEditVo] = useState<ApiKey>({} as ApiKey)
+  const [editVo, setEditVo] = useState<ApiKey | null>(null)
 
   // 封装取消方法，添加关闭弹窗逻辑
   const handleClose = () => {
-    setVisible(false);
     form.resetFields();
     setLoading(false)
+    setEditVo(null)
+    setVisible(false);
   };
 
   const handleOpen = (apiKey: ApiKey) => {
@@ -37,6 +38,7 @@ const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProp
   };
   // 封装保存方法，添加提交逻辑
   const handleSave = () => {
+    if (!editVo?.id) return
     form.validateFields()
       .then((values) => {
         updateApiKey(editVo.id, {
@@ -88,7 +90,7 @@ const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProp
                 step={1}
               />
             </Form.Item>
-            <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:mt-[-26px]">
+            <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:-mt-6.5">
               1
               <span>{t('application.currentValue')}: {values?.rate_limit}{t('application.qpsLimitUnit')}</span>
             </div>
@@ -113,7 +115,7 @@ const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProp
                 step={100}
               />
             </Form.Item>
-            <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:mt-[-26px]">
+            <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:-mt-6.5">
               100
               <span>{t('application.currentValue')}: {values?.daily_request_limit}{t('application.dailyUsageLimitUnit')}</span>
             </div>