From 29cc708f4f976e3b789ed962e9d030dfbf8605ef Mon Sep 17 00:00:00 2001
From: zhaoying <yzhao96@best-inc.com>
Date: Thu, 18 Dec 2025 12:35:42 +0800
Subject: [PATCH] feat(web): api key

---
 .../ApiKeyManagement/components/ApiKeyDetailModal.tsx     | 8 ++++----
 web/src/views/ApiKeyManagement/index.tsx                  | 6 +++---
 .../views/ApplicationConfig/components/ApiKeyModal.tsx    | 1 +
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx b/web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx
index 2c154f51..2899a306 100644
--- a/web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx
+++ b/web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, useImperativeHandle, useState } from 'react';
-import { Switch, Button } from 'antd';
+import { Switch, Button, Tooltip } from 'antd';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import type { ApiKey, ApiKeyModalRef } from '../types';
@@ -51,8 +51,8 @@ const ApiKeyDetailModal = forwardRef<ApiKeyModalRef, { handleCopy: (content: str
             { key === 'created_at'
               ? formatDateTime(data[key], 'YYYY-MM-DD HH:mm:ss')
               : key === 'is_expired'
-                ? <Tag>{data[key] ? t('apiKey.inactive') : t('apiKey.active')}</Tag>
-                : String(data[key as keyof ApiKey])
+                ? <Tag color={data[key] ? 'error' : 'processing'}>{data[key] ? t('apiKey.inactive') : t('apiKey.active')}</Tag>
+                : <Tooltip title={String(data[key as keyof ApiKey])}>{String(data[key as keyof ApiKey])}</Tooltip>
             }
           </span>
         </div>
@@ -91,7 +91,7 @@ const ApiKeyDetailModal = forwardRef<ApiKeyModalRef, { handleCopy: (content: str
         <div className="rb:flex rb:justify-between rb:gap-5 rb:font-regular rb:text-[14px] rb:mt-3">
           <span className="rb:text-[#5B6167]">{t(`apiKey.expires_at`)}</span>
           <span>
-            {data.expires_at ? formatDateTime(data.expires_at as number, 'yyyy-MM-DD') : '-'}
+            {data.expires_at ? formatDateTime(data.expires_at as number, 'YYYY-MM-DD HH:mm:ss') : '-'}
           </span>
           </div>
       </>}
diff --git a/web/src/views/ApiKeyManagement/index.tsx b/web/src/views/ApiKeyManagement/index.tsx
index 007526de..fee8bf08 100644
--- a/web/src/views/ApiKeyManagement/index.tsx
+++ b/web/src/views/ApiKeyManagement/index.tsx
@@ -72,12 +72,12 @@ const ApiKeyManagement: React.FC = () => {
               <div key={key} className={clsx("rb:flex rb:justify-between rb:gap-5 rb:font-regular rb:text-[14px]", {
                 'rb:mt-3': index !== 0
               })}>
-                <span className="rb:text-[#5B6167]">{t(`apiKey.${key}`)}</span>
-                <span>
+                <span className="rb:text-[#5B6167] rb:w-20">{t(`apiKey.${key}`)}</span>
+                <span className="rb:flex-1 rb:text-left rb:py-px rb:rounded rb:font-medium">
                   { key === 'created_at'
                     ? formatDateTime(apiKeyItem[key], 'YYYY-MM-DD HH:mm:ss')
                     : key === 'is_expired'
-                    ? <Tag>{apiKeyItem[key] ? t('apiKey.inactive') : t('apiKey.active')}</Tag>
+                      ? <Tag color={apiKeyItem[key] ? 'error' : 'processing'}>{apiKeyItem[key] ? t('apiKey.inactive') : t('apiKey.active')}</Tag>
                     : String(apiKeyItem[key as keyof ApiKey])
                   }
                 </span>
diff --git a/web/src/views/ApplicationConfig/components/ApiKeyModal.tsx b/web/src/views/ApplicationConfig/components/ApiKeyModal.tsx
index 2b18f07a..54740436 100644
--- a/web/src/views/ApplicationConfig/components/ApiKeyModal.tsx
+++ b/web/src/views/ApplicationConfig/components/ApiKeyModal.tsx
@@ -45,6 +45,7 @@ const ApiKeyModal = forwardRef<ApiKeyModalRef, ApiKeyModalProps>(({
           ...values,
           type: application.type,
           resource_id: application.id,
+          scopes: ['app']
         })
         .then(() => {
           handleClose()