优化api密钥

frontend/src/pages/MerchantCenter.tsx

@@ -8,6 +8,7 @@ import {
   Input,
   InputNumber,
   Modal,
+  Popconfirm,
   Select,
   Space,
   Table,
@@ -206,14 +207,10 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
     }
   }, [ledger.page, ledger.size, merchantRole])
 
-  const loadAPIClients = useCallback(async (role = merchantRole) => {
-    if (role !== 'owner' && role !== 'operator') {
-      setApiClients([])
-      return
-    }
+  const loadAPIClients = useCallback(async () => {
     const clientData = await merchantApi.apiClients()
     setApiClients(clientData || [])
-  }, [merchantRole])
+  }, [])
 
   const loadCallbacks = useCallback(async (role = merchantRole) => {
     if (role !== 'owner' && role !== 'operator') {
@@ -245,7 +242,7 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
         await loadWallet(undefined, undefined, role)
         return
       case 'api':
-        await loadAPIClients(role)
+        await loadAPIClients()
         return
       case 'callbacks':
         await loadCallbacks(role)
@@ -457,6 +454,16 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
     }
   }
 
+  const deleteAPIClient = async (record: ApiClient) => {
+    try {
+      await merchantApi.deleteApiClient(record.id)
+      message.success('密钥已删除')
+      loadAPIClients()
+    } catch (e) {
+      message.error(e instanceof Error ? e.message : '删除失败')
+    }
+  }
+
   const toggleCallback = async (record: CallbackSubscription) => {
     try {
       await merchantApi.updateCallbackStatus(record.id, record.status === 'active' ? 'disabled' : 'active')
@@ -550,11 +557,24 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
     {
       title: '操作',
       key: 'action',
-      width: 100,
+      width: 150,
       render: (_, record) => canManage ? (
-        <Button type="link" size="small" onClick={() => toggleAPIClient(record)}>
-          {record.status === 'active' ? '禁用' : '启用'}
-        </Button>
+        <Space size={0}>
+          <Button type="link" size="small" onClick={() => toggleAPIClient(record)}>
+            {record.status === 'active' ? '禁用' : '启用'}
+          </Button>
+          <Popconfirm
+            title="删除该密钥？"
+            description={record.status === 'active' ? '请先停用该密钥再删除' : '删除后不可恢复，使用该密钥的对接方将无法调用开放接口。'}
+            okText="删除"
+            okButtonProps={{ danger: true }}
+            onConfirm={() => deleteAPIClient(record)}
+          >
+            <Button type="link" size="small" danger disabled={record.status === 'active'}>
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
       ) : '-',
     },
   ]