feature: add api key

2025-12-16 13:54:41 +08:00
parent 36cab874fa
commit 44ceee3f42
18 changed files with 1028 additions and 169 deletions
--- a/web/src/api/apiKey.ts
+++ b/web/src/api/apiKey.ts
@@ -0,0 +1,33 @@
+import { request } from '@/utils/request'
+import type { ApiKey } from '@/views/ApiKeyManagement/types'
+
+// API Key列表
+export const getApiKeyListUrl = '/apikeys'
+export const getApiKeyList = (data: Record<string, unknown>) => {
+  return request.get(getApiKeyListUrl, data)
+}
+
+// API Key详情
+export const getApiKey = (id: string) => {
+  return request.get(`/apikeys/${id}`)
+}
+
+// 创建API Key
+export const createApiKey = (values: ApiKey) => {
+  return request.post('/apikeys', values)
+}
+
+// 更新API Key
+export const updateApiKey = (id: string, values: ApiKey) => {
+  return request.put(`/apikeys/${id}`, values)
+}
+
+// 删除 API Key
+export const deleteApiKey = (id: string) => {
+  return request.delete(`/apikeys/${id}`)
+}
+
+// 使用统计
+export const getApiKeyStats = (app_key_id: string) => {
+  return request.get(`/apikeys/${app_key_id}/stats`)
+}
--- a/web/src/assets/images/menu/userMemory_active.svg
+++ b/web/src/assets/images/menu/userMemory_active.svg
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 29</title>
-    <g id="V1.0版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="红熊空间-应用管理" transform="translate(-24, -249)" stroke="#212332">
-            <g id="记忆库" transform="translate(12, 241)">
-                <g id="编组-29" transform="translate(12, 8)">
-                    <g id="编组-30" transform="translate(1.5, 2)">
-                        <path d="M5.15208739,12 L3.96504286,11.9873871 C3.14287934,11.9786512 2.48098017,11.3096817 2.48098017,10.4874718 L2.48098017,8.17573134 L2.48098017,8.17573134 L0.701703053,7.96314675 C0.482349244,7.93693878 0.325773604,7.73787163 0.351981572,7.51851782 C0.360586526,7.44649662 0.388612869,7.37817062 0.433061291,7.3208519 L1.79815052,5.56049306 L1.79815052,5.56049306 L1.79815052,5.43150782 C1.79815052,2.43176888 4.30576994,0 7.39907526,0 C10.4923806,0 13,2.43176888 13,5.43150782" id="路径" stroke-linecap="round"></path>
-                        <path d="M8,6 L11,6 C11.5522847,6 12,6.44771525 12,7 L12,11 C12,11.5522847 11.5522847,12 11,12 L8,12 C7.44771525,12 7,11.5522847 7,11 L7,7 C7,6.44771525 7.44771525,6 8,6 Z" id="矩形"></path>
-                        <line x1="7" y1="8" x2="12" y2="8" id="路径-26"></line>
-                        <line x1="7" y1="10" x2="12" y2="10" id="路径-26备份"></line>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -33,6 +33,7 @@ export const en = {
      knowledgeCreateDataset: 'Create Dataset',
      knowledgeDocumentDetails: 'Document Details',
      userMemoryDetail: 'UserMemory Detail',
+      apiKeyManagement: 'API KEY Management',
    },
    dashboard: {
      totalMemoryCapacity: 'Total Memory Capacity',
@@ -117,7 +118,7 @@ export const en = {
      triplet_count_desc: 'Build {{entities_count}} entity nodes and {{relations_count}} relation connections',
      temporal_count: 'Time extraction',
      temporal_count_desc: 'Record {{count}} time series information',
-      
+
      dialogue: 'Dialogue',
      chunk: 'Chunk',
      statement: 'Statement',
@@ -735,7 +736,7 @@ export const en = {
      workflowDesc: 'To be opened, please stay tuned',
      editApplication: 'Edit Application Info',

-      
+
      currentModel: 'Current Model',
      modelConfig: 'Model Config',
      parameterConfig: 'Parameter Config',
@@ -929,7 +930,7 @@ export const en = {
      similarity_threshold: 'Semantic similarity threshold',
      similarity_threshold_desc: 'Only return results with semantic similarity higher than this threshold',
      similarity_threshold_desc1: 'The minimum similarity threshold for semantic retrieval',
-      
+
      vector_similarity_weight: 'Vector Similarity Weight',
      vector_similarity_weight_desc: 'Only return results with BM25 scores above this threshold',
      vector_similarity_weight_desc1: 'The minimum BM25 score threshold for word segmentation retrieval',
@@ -947,7 +948,7 @@ export const en = {
      versionNameTip: 'Version number format: v[major version number].[next version number].[revision number] (e.g. v1.3.0)',
      agentName: 'Agent Name',
      roleType: 'Role Type',
-      
+
      coordinator: 'Coordinator',
      analyzer: 'Analyzer',
      executor: 'Executor',
@@ -957,8 +958,28 @@ export const en = {
      capabilities: 'Capabilities',
      subAgent: 'Sub Agent',
      maxChatCount: 'Add up to 4 models',
-      addApiKey: 'Add API Key',
-      ReplyException: 'Reply exception'  
+      ReplyException: 'Reply exception',
+
+      endpointConfigurationSubTitle: 'Configure API access address and supported HTTP methods',
+      apiKeys: 'API Keys Management',
+      apiKeySubTitle: 'Manage API keys, view usage and traffic statistics for each key',
+      addApiKey: 'Add New API Key',
+      apiKeyName: 'Key Name',
+      apiKeyNamePlaceholder: 'e.g.: Production, Testing, Development',
+      apiKeyDescPlaceholder: 'Describe the purpose of this Key',
+      apiKeyTotal: 'Total Keys',
+      apiKeyRequestTotal: 'Total Requests',
+      qps: 'Average QPS',
+      qpsLimit: 'QPS Limit',
+      qpsLimitTip: '(Requests per second)',
+      apiLimitConfig: 'Rate Limiting Configuration',
+      qpsLimitDesc: 'Limit the maximum number of requests this Key can make per second',
+      dailyUsageLimit: 'Daily Usage Limit',
+      dailyUsageLimitDesc: 'Limit the maximum total number of requests this Key can make per day',
+      dailyUsageLimitUnit: 'times/day',
+      apiKeyDeleteContent: 'Once deleted, it cannot be recovered, and applications using this Key will not be able to access the API',
+      currentValue: 'Current Value',
+      qpsLimitUnit: 'times/second',
    },
    userMemory: {
      userMemory: 'User Memory',
@@ -1057,7 +1078,7 @@ export const en = {

      extractTheNumberOfEntities: 'Extract the number of entities',
      extractTheNumberOfEntitiesDesc: 'Merge after deduplication: {{num}} (exact: {{exact}}, fuzzy: {{fuzzy}}, LLM: {{llm}})',
-      
+
      numberOfEntityDisambiguation: 'Number of entity disambiguation',
      numberOfEntityDisambiguationDesc: 'Total {{num}} times (blocking: {{block_count}})',

@@ -1162,7 +1183,6 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
        failed: 'Failed'
      },
      time: 'Time: ',
-      
      text_preprocessing_desc: 'Text split into {{count}} semantic fragments',
      knowledge_extraction_desc: 'Knowledge extraction completed, identified {{entities}} entities, {{statements}} statements, {{temporal_ranges_count}} temporal extractions, {{triplets}} triplets',
      creating_nodes_edges_desc: 'Entity relationship creation completed, {{num}} relationships in total',
@@ -1250,6 +1270,31 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
      tableEmpty: 'There are currently no data',
      loadingEmpty: 'The content is loading…',
      loadingEmptyDesc: 'Your content is on its way by rocket! It will soon land on your screen'
-    }
+    },
+    apiKey: {
+      name: 'Project Name',
+      createApiKey: 'Create API Key',
+      updateApiKey: 'Edit API Key',
+      id: 'ID',
+      created_at: 'Created At',
+      description: 'Description',
+      memoryEngine: 'Memory Engine',
+      knowledgeBase: 'Knowledge Base',
+      advancedSettings: 'Advanced Settings',
+      expires_at: 'Expiration At',
+      apiKey: 'API Key',
+      status: 'Status',
+      createdAt: 'Created At',
+      expiresAt: 'Expires At',
+      requestsPerMinute: 'Requests/Minute',
+      viewDetail: 'View Details',
+      disable: 'Disable',
+      enable: 'Enable',
+      baseInfo: 'Basic Information',
+      permissionInfo: 'Permission Information',
+      is_expired: 'Status',
+      active: 'Active',
+      inactive: 'Expired'
+    },
  },
 };
--- a/web/src/i18n/zh.ts
+++ b/web/src/i18n/zh.ts
@@ -28,16 +28,18 @@ export const zh = {
      spaceManagement: '空间管理',
      memoryExtractionEngine: '记忆提取引擎',
      forgettingEngine: '遗忘引擎',
+      apiKeyManagement: 'API KEY管理',
      knowledgePrivate: '详情',
      knowledgeShare: '详情',
      knowledgeCreateDataset: '新建数据集',
      knowledgeDocumentDetails: '详情',
      userMemoryDetail: '用户记忆详情',
+      toolManagement: '工具管理',
    },
    knowledgeBase: {
      home: '首页',
      selectSpace: '请选择空间',
-      preview:'预览',
+      preview: '预览',
      pleaseUploadFileFirst: '请先上传文件',
      shareSuccess: '分享成功',
      shareFailed: '分享失败',
@@ -288,7 +290,7 @@ export const zh = {
      number: '数字',
      checkbox: '复选框',
      apiVariable: 'API变量',
-      
+
      displayName: '显示名称',
      maxLength: '最大长度',
      required: '必填',
@@ -467,7 +469,7 @@ export const zh = {
      similarity_threshold: '语义相似度阈值',
      similarity_threshold_desc: '仅返回语义相似度高于此阈值的结果',
      similarity_threshold_desc1: '语义检索的最小相似度阈值',
-      
+
      vector_similarity_weight: '向量相似度权重',
      vector_similarity_weight_desc: '仅返回BM25分数高于此阈值的结果',
      vector_similarity_weight_desc1: '分词检索的最小BM25分数阈值',
@@ -481,6 +483,27 @@ export const zh = {
      chooseKnowledge: '选择知识库',
      active: '活跃',
      inactive: '不活跃',
+
+      endpointConfigurationSubTitle: '配置 API 访问地址和支持的 HTTP 方法',
+      apiKeys: 'API Keys 管理',
+      apiKeySubTitle: '管理 API 密钥，查看每个密钥的使用情况和流量统计',
+      addApiKey: '添加新 API Key',
+      apiKeyName: 'Key 名称',
+      apiKeyNamePlaceholder: '例如：生产环境、测试环境、开发环境',
+      apiKeyDescPlaceholder: '描述这个 Key 的用途',
+      apiKeyTotal: '总 Keys',
+      apiKeyRequestTotal: '总请求数',
+      qps: '平均 QPS',
+      qpsLimit: 'QPS 限制',
+      qpsLimitTip: '（每秒请求数）',
+      apiLimitConfig: '限流配置',
+      qpsLimitDesc: '限制此 Key 每秒最多可以发起的请求数',
+      dailyUsageLimit: '日调用量限制',
+      dailyUsageLimitDesc: '限制此 Key 每天最多可以发起的请求总数',
+      dailyUsageLimitUnit: '次/天',
+      apiKeyDeleteContent: '删除后将无法恢复，使用此Key的应用将无法访问 API',
+      currentValue: '当前值',
+      qpsLimitUnit: '次/秒',
    },
    // 角色管理相关翻译
    role: {
@@ -618,7 +641,7 @@ export const zh = {
      triplet_count_desc: '构建{{entities_count}}个实体节点和{{relations_count}}个关系连接',
      temporal_count: '时间提取',
      temporal_count_desc: '记录{{count}}条时间序列信息',
-      
+
      dialogue: '对话',
      chunk: '分块',
      statement: '语句',
@@ -1027,7 +1050,7 @@ export const zh = {

      minimumRetention: '时间遗忘率 (λ_time)',
      minimumRetentionDesc: '控制记忆随时间的遗忘速度，值越高时间越短',
-      forgettingRate: '记忆遗忘率 (λ_mem)',      
+      forgettingRate: '记忆遗忘率 (λ_mem)',
      forgettingRateDesc: '控制记忆遗忘的速度，值越高遗忘越快',
      offset: '最小保留度 (offset)',
      offsetDesc: '控制记忆保留的最小保留阈值   遗忘这地方改个文字描述',
@@ -1130,7 +1153,7 @@ export const zh = {

      extractTheNumberOfEntities: '提取实体数量',
      extractTheNumberOfEntitiesDesc: '去重后合并：{{num}}（精确：{{exact}}，模糊：{{fuzzy}}，LLM：{{llm}}）',
-      
+
      numberOfEntityDisambiguation: '实体消歧数量',
      numberOfEntityDisambiguationDesc: '总计{{num}}次（阻止：{{block_count}}）',

@@ -1217,7 +1240,6 @@ export const zh = {

 学生：那我换到唐朝史：安史之乱后，中央已开始整顿，为何藩镇割据反而加剧？
 记忆熊：安史之乱后藩镇割据加剧的原因包括：节度使掌握募兵权、财政调度权与军事指挥权，形成地方军阀；中央财政因均田制瓦解和租庸调失效而衰退，难以支撑军队，导致地方军事力量依附节度使；募兵制使士兵效忠个人而非国家；宦官掌控禁军，文官集团失势，中央制衡能力削弱。`,
-      
      warning: '当您修改左侧的配置项后，点击【调试】，提取结论将在此处实时更新',
      processing: '配置已更新，正在重新萃取示例记忆...',
      success: '记忆萃取完成！',
@@ -1234,7 +1256,6 @@ export const zh = {
        failed: '失败'
      },
      time: '耗时: ',
-      
      text_preprocessing_desc: '文本切分为{{count}}个语义片段',
      knowledge_extraction_desc: '知识抽取完成，共识别{{entities}}个实体,{{statements}}个句子, {{temporal_ranges_count}}个时间提取, {{triplets}}个三元组',
      creating_nodes_edges_desc: '实体关系创建完成，共{{num}}条关系',
@@ -1357,6 +1378,31 @@ export const zh = {
      title: '页面未找到',
      description: '请求的页面不存在。',
      backToHome: '返回首页'
-    }
+    },
+    apiKey: {
+      name: '项目名称',
+      createApiKey: '创建API Key',
+      updateApiKey: '编辑API Key',
+      id: 'ID',
+      created_at: '创建时间',
+      description: '描述',
+      memoryEngine: '记忆引擎',
+      knowledgeBase: '知识库',
+      advancedSettings: '高级设置',
+      expires_at: '过期时间',
+      apiKey: 'API Key',
+      status: '状态',
+      createdAt: '创建时间',
+      expiresAt: '过期时间',
+      requestsPerMinute: '次/分钟',
+      viewDetail: '查看详情',
+      disable: '禁用',
+      enable: '启用',
+      baseInfo: '基础信息',
+      permissionInfo: '授权信息',
+      is_expired: '状态',
+      active: '活跃',
+      inactive: '过期'
+    },
  },
 }
--- a/web/src/routes/index.tsx
+++ b/web/src/routes/index.tsx
@@ -54,6 +54,7 @@ const componentMap: Record<string, LazyExoticComponent<ComponentType<object>>> =
  UserManagement: lazy(() => import('@/views/UserManagement')),
  ModelManagement: lazy(() => import('@/views/ModelManagement')),
  SpaceManagement: lazy(() => import('@/views/SpaceManagement')),
+  ApiKeyManagement: lazy(() => import('@/views/ApiKeyManagement')),
  Login: lazy(() => import('@/views/Login')),
  InviteRegister: lazy(() => import('@/views/InviteRegister')),
  NoPermission: lazy(() => import('@/views/NoPermission')),
--- a/web/src/routes/routes.json
+++ b/web/src/routes/routes.json
@@ -25,6 +25,7 @@
      { "path": "/knowledge-base/:knowledgeBaseId/share", "element": "Share" },
      { "path": "/knowledge-base/:knowledgeBaseId/create-dataset", "element": "CreateDataset" },
      { "path": "/knowledge-base/:knowledgeBaseId/DocumentDetails", "element": "DocumentDetails" },
+      { "path": "/api-key", "element": "ApiKeyManagement" },
      { "path": "/no-permission", "element": "NoPermission" },
      { "path": "/*", "element": "NotFound" }
    ]
--- a/web/src/store/menu.json
+++ b/web/src/store/menu.json
@@ -243,6 +243,21 @@
      "icon": null,
      "iconActive": null,
      "subs": null
+    },
+    {
+      "id": 11,
+      "parent": 0,
+      "code": "apiKey",
+      "label": "API KEY管理",
+      "i18nKey": "menu.apiKeyManagement",
+      "path": "/api-key",
+      "enable": true,
+      "display": true,
+      "level": 1,
+      "sort": 0,
+      "icon": null,
+      "iconActive": null,
+      "subs": null
    }
  ]
 }
--- a/web/src/utils/apiKeyReplacer.ts
+++ b/web/src/utils/apiKeyReplacer.ts
@@ -0,0 +1,46 @@
+/**
+ * API密钥替换工具
+ */
+
+const API_KEY_PATTERNS = {
+  service: /sk-service-[A-Za-z0-9_-]+/g,
+  agent: /sk-agent-[A-Za-z0-9_-]+/g,
+  multiAgent: /sk-multi_agent-[A-Za-z0-9_-]+/g,
+  workflow: /sk-workflow-[A-Za-z0-9_-]+/g
+}
+const API_KEY_PREFIX = {
+  service: 'sk-service-',
+  agent: 'sk-agent-',
+  multiAgent: 'sk-multi_agent-',
+  workflow: 'sk-workflow-'
+}
+
+/**
+ * 替换文本中的API密钥为*号
+ * @param text 原始文本
+ * @returns 替换后的文本
+ */
+export const maskApiKeys = (text: string): string => {
+  if (!text) return text
+  let result = text
+
+  Object.keys(API_KEY_PREFIX).map(type => {
+    const key = type as keyof typeof API_KEY_PREFIX
+    result = result.replace(API_KEY_PATTERNS[key as keyof typeof API_KEY_PREFIX], (match) => {
+      const prefixLength = API_KEY_PREFIX[key].length
+      const prefix = match.substring(0, prefixLength)
+      return prefix + '*'.repeat(match.length - prefixLength)
+    })
+  })
+
+  return result
+}
+
+/**
+ * 检测文本中是否包含API密钥
+ * @param text 待检测文本
+ * @returns 是否包含API密钥
+ */
+export const hasApiKeys = (text: string): boolean => {
+  return Object.values(API_KEY_PATTERNS).some(pattern => pattern.test(text))
+}
--- a/web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx
+++ b/web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx
@@ -0,0 +1,102 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Switch, Button } from 'antd';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import type { ApiKey, ApiKeyModalRef } from '../types';
+import RbModal from '@/components/RbModal'
+import { getApiKey  } from '@/api/apiKey';
+import { formatDateTime } from '@/utils/format'
+import Tag from '@/components/Tag'
+import { maskApiKeys } from '@/utils/apiKeyReplacer';
+
+const ApiKeyDetailModal = forwardRef<ApiKeyModalRef, { handleCopy: (content: string) => void }>(({ handleCopy }, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [data, setData] = useState<ApiKey>({} as ApiKey)
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setVisible(false);
+  };
+
+  const handleOpen = (apiKey?: ApiKey) => {
+    if (apiKey?.id) {
+      getApiKey(apiKey.id)
+        .then((res) => {
+          setVisible(true);
+          setData(res as ApiKey)
+        })
+    }
+  };
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbModal
+      title={t('apiKey.viewDetail')}
+      open={visible}
+      onCancel={handleClose}
+    >
+      <div className="rb:text-[#5B6167] rb:font-medium rb:leading-5 rb:mb-4">{t('apiKey.baseInfo')}</div>
+      {['id', 'name', 'is_expired', 'created_at'].map((key, index) => (
+        <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 className="rb:text-right rb:flex-1 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">
+            { 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])
+            }
+          </span>
+        </div>
+      ))}
+
+      <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-5 rb:p-[8px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:leading-5">
+        {maskApiKeys(data.api_key)}
+
+        <Button className="rb:px-2! rb:h-7! rb:group" onClick={() => handleCopy(data.api_key)}>
+          <div
+            className="rb:w-4 rb:h-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]"
+          ></div>
+          {t('common.copy')}
+        </Button>
+      </div>
+
+      <div className="rb:text-[#5B6167] rb:font-medium rb:leading-5 rb:my-4">{t('apiKey.permissionInfo')}</div>
+
+      <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.memoryEngine`)}</span>
+        <span>
+          <Switch checked={data.scopes?.includes('memory')} disabled />
+        </span>
+      </div>
+      <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.knowledgeBase`)}</span>
+        <span>
+          <Switch checked={data.scopes?.includes('rag')} disabled />
+        </span>
+      </div>
+
+      {/* 高级设置 */}
+      {data.expires_at && <>
+        <div className="rb:text-[#5B6167] rb:font-medium rb:leading-5 rb:my-4">{t('apiKey.advancedSettings')}</div>
+
+        <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') : '-'}
+          </span>
+          </div>
+      </>}
+    </RbModal>
+  );
+});
+
+export default ApiKeyDetailModal;
--- a/web/src/views/ApiKeyManagement/components/ApiKeyModal.tsx
+++ b/web/src/views/ApiKeyManagement/components/ApiKeyModal.tsx
@@ -0,0 +1,153 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Input, Switch, App, DatePicker } from 'antd';
+import { useTranslation } from 'react-i18next';
+import type { ApiKey, ApiKeyModalRef } from '../types';
+import RbModal from '@/components/RbModal'
+import dayjs from 'dayjs'
+import { createApiKey, updateApiKey  } from '@/api/apiKey';
+
+const FormItem = Form.Item;
+
+interface CreateModalProps {
+  refresh: () => void;
+}
+
+const ApiKeyModal = forwardRef<ApiKeyModalRef, CreateModalProps>(({
+  refresh,
+}, ref) => {
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<ApiKey>();
+  const [loading, setLoading] = useState(false);
+  const [editVo, setEditVo] = useState<ApiKey | null>(null);
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setLoading(false);
+    setEditVo(null);
+  };
+
+  const handleOpen = (apiKey?: ApiKey) => {
+    if (apiKey?.id) {
+      const { scopes = [], expires_at } = apiKey
+      // 编辑模式，填充表单
+      form.setFieldsValue({
+        name: apiKey.name,
+        description: apiKey.description,
+        memory: scopes.includes('memory'),
+        rag: scopes.includes('rag'),
+        expires_at: expires_at ? dayjs(expires_at) : undefined
+      });
+      setEditVo(apiKey);
+    }
+    setVisible(true);
+  };
+
+  // 封装保存方法，添加提交逻辑
+  const handleSave = async () => {
+    form.validateFields()
+      .then((values) => {
+        const { memory, rag, expires_at, ...rest } = values
+        let scopes = []
+
+        if (memory) {
+          scopes.push('memory')
+        }
+        if (rag) {
+          scopes.push('rag')
+        }
+        // 准备新的/更新的API Key数据
+        const apiKeyData = {
+          ...rest,
+          scopes,
+          expires_at: expires_at ? dayjs(expires_at.valueOf()).endOf('day').valueOf() : null,
+          type: 'service'
+        };
+        setLoading(true)
+        const req = editVo?.id ? updateApiKey(editVo.id, apiKeyData as ApiKey) : createApiKey(apiKeyData as ApiKey)
+        
+        req.then(() => {
+            refresh();
+            handleClose();
+            message.success(t(editVo ? 'common.updateSuccess' : 'common.createSuccess'));
+          })
+          .finally(() => setLoading(false))
+      })
+  }
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbModal
+      title={editVo ? t('apiKey.updateApiKey') : t('apiKey.createApiKey')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.save')}
+      onOk={handleSave}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+      >
+        <div className="rb:text-[#5B6167] rb:font-medium rb:leading-5 rb:mb-4">{t('apiKey.baseInfo')}</div>
+        <FormItem
+          name="name"
+          label={t('apiKey.name')}
+          rules={[{ required: true, message: t('common.pleaseEnter') }]}
+        >
+          <Input placeholder={t('common.enter')} />
+        </FormItem>
+        
+        <FormItem
+          name="description"
+          label={t('apiKey.description')}
+        >
+          <Input.TextArea placeholder={t('common.pleaseEnter')} rows={3} />
+        </FormItem>
+
+        <div className="rb:text-[#5B6167] rb:font-medium rb:leading-5 rb:mb-4">{t('apiKey.permissionInfo')}</div>
+
+        <FormItem
+          name="memory"
+          label={t('apiKey.memoryEngine')}
+          layout="horizontal"
+          valuePropName="checked"
+        >
+          <Switch />
+        </FormItem>
+
+        <FormItem
+          name="rag"
+          label={t('apiKey.knowledgeBase')}
+          layout="horizontal"
+          valuePropName="checked"
+        >
+          <Switch />
+        </FormItem>
+
+        {/* 高级设置 */}
+        <div className="rb:text-[#5B6167] rb:font-medium rb:leading-5 rb:mb-4">{t('apiKey.advancedSettings')}</div>
+
+        <FormItem
+          name="expires_at"
+          label={t('apiKey.expires_at')}
+        >
+          <DatePicker
+            className="rb:w-full"
+            disabledDate={(current) => current && current < dayjs().subtract(1, 'day').endOf('day')}
+          />
+        </FormItem>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default ApiKeyModal;
--- a/web/src/views/ApiKeyManagement/index.tsx
+++ b/web/src/views/ApiKeyManagement/index.tsx
@@ -0,0 +1,125 @@
+import React, { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, App, Space } from 'antd';
+import clsx from 'clsx';
+import { DeleteOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons';
+import type { ApiKey, ApiKeyModalRef } from './types';
+import ApiKeyModal from './components/ApiKeyModal';
+import ApiKeyDetailModal from './components/ApiKeyDetailModal';
+import RbCard from '@/components/RbCard/Card'
+import { getApiKeyListUrl, deleteApiKey } from '@/api/apiKey';
+import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
+import { formatDateTime } from '@/utils/format';
+import Tag from '@/components/Tag'
+import copy from 'copy-to-clipboard'
+import { maskApiKeys } from '@/utils/apiKeyReplacer';
+
+const ApiKeyManagement: React.FC = () => {
+  const { t } = useTranslation();
+  const { modal, message } = App.useApp();
+  const apiKeyModalRef = useRef<ApiKeyModalRef>(null);
+  const apiKeyDetailModalRef = useRef<ApiKeyModalRef>(null)
+  const scrollListRef = useRef<PageScrollListRef>(null)
+
+  const refresh = () => {
+    scrollListRef.current?.refresh();
+  }
+  
+  const handleEdit = (item?: ApiKey) => {
+    apiKeyModalRef.current?.handleOpen(item);
+  }
+  const handleView = (item: ApiKey) => {
+    apiKeyDetailModalRef.current?.handleOpen(item);
+  }
+  const handleDelete = (item: ApiKey) => {
+    modal.confirm({
+      title: t('common.confirmDeleteDesc', { name: item.name }),
+      okText: t('common.delete'),
+      okType: 'danger',
+      onOk: () => {
+      deleteApiKey(item.id)
+        .then(() => {
+          refresh();
+          message.success(t('common.deleteSuccess'))
+        })
+      }
+    })
+  }
+  const handleCopy = (content: string) => {
+    copy(content)
+    message.success(t('common.copySuccess'))
+  }
+  return (
+    <>
+      <div className="rb:flex rb:justify-end rb:mb-3 rb:p-4">
+        <Button type="primary" onClick={() => handleEdit()}>
+          {t('apiKey.createApiKey')}
+        </Button>
+      </div>
+
+      <PageScrollList
+        ref={scrollListRef}
+        url={getApiKeyListUrl}
+        query={{ is_active: true, type: 'service' }}
+        column={2}
+        renderItem={(item: Record<string, unknown>) => {
+          let apiKeyItem = item as unknown as ApiKey
+          return (
+            <RbCard 
+              title={apiKeyItem.name}
+          >
+            {['id', 'is_expired', 'created_at'].map((key, index) => (
+              <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>
+                  { 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>
+                    : String(apiKeyItem[key as keyof ApiKey])
+                  }
+                </span>
+              </div>
+            ))}
+
+            <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-5 rb:p-[8px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:leading-5">
+              {maskApiKeys(apiKeyItem.api_key)}
+              
+              <Button className="rb:px-2! rb:h-7! rb:group" onClick={() => handleCopy(apiKeyItem.api_key)}>
+                <div 
+                  className="rb:w-4 rb:h-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]" 
+                ></div>
+                {t('common.copy')}
+              </Button>
+            </div>
+
+            <Space className="rb:pt-2 rb:min-h-6.25">
+              {apiKeyItem.scopes?.includes('memory') && <Tag>{t('apiKey.memoryEngine')}</Tag>}
+              {apiKeyItem.scopes?.includes('rag') && <Tag color="success">{t('apiKey.knowledgeBase')}</Tag>}
+            </Space>
+
+            <div className="rb:mt-5 rb:flex rb:justify-end rb:gap-2.5">
+              <Button icon={<EyeOutlined />} onClick={() => handleView(apiKeyItem)}></Button>
+              <Button icon={<EditOutlined />} onClick={() => handleEdit(apiKeyItem)}></Button>
+              <Button icon={<DeleteOutlined />} onClick={() => handleDelete(apiKeyItem)}></Button>
+            </div>
+            </RbCard>
+          );
+        }}
+      />
+
+      <ApiKeyModal
+        ref={apiKeyModalRef}
+        refresh={refresh}
+      />
+      <ApiKeyDetailModal
+        ref={apiKeyDetailModalRef}
+        handleCopy={handleCopy}
+      />
+    </>
+  );
+};
+
+export default ApiKeyManagement;
--- a/web/src/views/ApiKeyManagement/types.ts
+++ b/web/src/views/ApiKeyManagement/types.ts
@@ -0,0 +1,40 @@
+import type { Dayjs } from 'dayjs'
+import { maskApiKeys } from '@/utils/apiKeyReplacer'
+
+export interface ApiKey {
+  id: string;
+  name: string;
+  description?: string;
+  type: 'agent' | 'multi_agent' | 'workflow' | 'service';
+  scopes?: string[]; // 'memory' | 'rag' | 'app'
+
+  api_key: string;
+  is_active: boolean;
+  is_expired: boolean;
+  created_at: number;
+  expires_at?: number | Dayjs;
+  memory?: boolean;
+  rag?: boolean;
+
+
+  updated_at: string;
+  qps_limit?: number;
+  daily_request_limit?: number;
+
+  rate_limit?: number;
+  total_requests: number;
+  quota_used: number;
+  quota_limit: number;
+}
+
+export interface ApiKeyModalRef {
+  handleOpen: (apiKey?: ApiKey) => void;
+  handleClose: () => void;
+}
+
+/**
+ * 获取掩码后的API密钥
+ */
+export const getMaskedApiKey = (apiKey: string): string => {
+  return maskApiKeys(apiKey)
+}
--- a/web/src/views/ApplicationConfig/Api.tsx
+++ b/web/src/views/ApplicationConfig/Api.tsx
@@ -1,153 +1,189 @@
-import { type FC, useState } from 'react';
+import { type FC, useState, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Space, App
-  // Slider, Input, 
-  // Form, 
-  // Checkbox
-} from 'antd';
+import { Button, Space, App, Statistic, Row, Col, Divider } from 'antd';
 import copy from 'copy-to-clipboard'

 import Card from './components/Card';
-// import qpsRestrictions from '@/assets/images/application/qpsRestrictions.svg'
-// import dailyAdjustmentDosage from '@/assets/images/application/dailyAdjustmentDosage.svg'
-// import tokenCap from '@/assets/images/application/tokenCap.svg'
+import type { Application } from '@/views/ApplicationManagement/types'
+import type { ApiKeyModalRef, ApiKeyConfigModalRef } from './types'
+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 { maskApiKeys } from '@/utils/apiKeyReplacer'

-// const limitList = [
-//   { key: 'qpsRestrictions', value: '10', icon: qpsRestrictions, unit: ' times/second' },
-//   { key: 'dailyAdjustmentDosage', value: '1000', icon: dailyAdjustmentDosage, unit: ' times/day' },
-//   { key: 'tokenCap', value: '10', icon: tokenCap, unit: 'M Tokens/day' },
-// ]
-// const sdkList = ['pythonSDK', 'nodejsSDK', 'goSDK', 'curlExample']
-
-const Api: FC<{apiKeyList?: string[]}> = ({apiKeyList = []}) => {
+const Api: FC<{ application: Application | null }> = ({ application }) => {
  const { t } = useTranslation();
  const [activeMethods, setActiveMethod] = useState(['GET']);
-  const { message } = App.useApp()
-  // const [form] = Form.useForm();
+  const { message, modal } = App.useApp()
  const copyContent = window.location.origin + '/v1/chat'
+  const apiKeyModalRef = useRef<ApiKeyModalRef>(null);
+  const apiKeyConfigModalRef = useRef<ApiKeyConfigModalRef>(null);
+  const [apiKeyList, setApiKeyList] = useState<ApiKey[]>([])

  const handleCopy = (content: string) => {
    copy(content)
    message.success(t('common.copySuccess'))
  }
-  return (
-    <div className="rb:w-[1000px] rb:mt-[20px] rb:pb-[20px] rb:mx-auto">
-      {/* <Form form={form} layout="vertical"> */}
-        <Space size={20} direction="vertical" style={{width: '100%'}}>
-          <Card title={t('application.endpointConfiguration')}>
-            <div className="rb:p-[20px_20px_24px_20px] rb:bg-[#F0F3F8] rb:border rb:border-[#DFE4ED] rb:rounded-[8px]">
-              <Space size={8}>
-                {['GET', 'POST', 'PUT', 'DELETE'].map((method) => (
-                  <Button key={method} type={activeMethods.includes(method) ? 'primary' : 'default'} onClick={() => setActiveMethod(prev => activeMethods.includes(method) ? prev.filter(m => m !== method) : [...prev, method])}>
-                    {method}
-                  </Button>
-                ))}
-              </Space>

-              <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-[20px] rb:p-[20px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-[8px] rb:leading-[20px]">
-                {copyContent}
-                
-                <Button className="rb:px-[8px]! rb:h-[28px]! rb:group" onClick={() => handleCopy(copyContent)}>
+  useEffect(() => {
+    getApiList()
+  }, [])
+  const getApiList = () => {
+    if (!application) {
+      return
+    }
+    setApiKeyList([])
+    getApiKeyList({
+      type: application.type,
+      is_active: true,
+      resource_id: application.id,
+      page: 1,
+      pagesize: 10,
+    }).then(res => {
+      const response = res as { items: ApiKey[] }
+      const list = response.items ?? []
+      getAllStats(list)
+    })
+  }
+  const getAllStats = (list: ApiKey[]) => {
+   const allList: ApiKey[] = []
+   list.forEach(async item => {
+      await getApiKeyStats(item.id)
+        .then(res => {
+          const response = res as { requests_today: number; total_requests: number; quota_limit: number; quota_used: number; }
+          allList.push({
+            ...item,
+            ...response,
+          })
+          setApiKeyList(prev => [...prev, {
+            ...item,
+            ...response,
+          }])
+        })
+    })
+
+  }
+  const handleAdd = () => {
+    apiKeyModalRef.current?.handleOpen()
+  }
+  const handleEdit = (vo: ApiKey) => {
+    apiKeyConfigModalRef.current?.handleOpen(vo)
+  }
+  const handleDelete = (vo: ApiKey) => {
+      modal.confirm({
+        title: t('common.confirmDeleteDesc', { name: vo.name }),
+        content: t('application.apiKeyDeleteContent'),
+        okText: t('common.delete'),
+        okType: 'danger',
+        onOk: () => {
+          
+        }
+      })
+  }
+
+  // 计算total_requests总数
+  const totalRequests = apiKeyList.reduce((total, item) => total + item.total_requests, 0);
+  return (
+    <div className="rb:w-[1000px] rb:mt-5 rb:pb-5 rb:mx-auto">
+      <Space size={20} direction="vertical" style={{width: '100%'}}>
+        <Card 
+          title={t('application.endpointConfiguration')}
+        >
+          <div className="rb:text-[#5B6167] rb:text-[12px] rb:mb-2">{t('application.endpointConfigurationSubTitle')}</div>
+          <div className="rb:p-[20px_20px_24px_20px] rb:bg-[#F0F3F8] rb:border rb:border-[#DFE4ED] rb:rounded-lg">
+            <Space size={8}>
+              {['GET', 'POST', 'PUT', 'DELETE'].map((method) => (
+                <Button key={method} type={activeMethods.includes(method) ? 'primary' : 'default'} onClick={() => setActiveMethod(prev => activeMethods.includes(method) ? prev.filter(m => m !== method) : [...prev, method])}>
+                  {method}
+                </Button>
+              ))}
+            </Space>
+
+            <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-5 rb:p-[20px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:leading-5">
+              {copyContent}
+              
+              <Button className="rb:px-2! rb:h-7! rb:group" onClick={() => handleCopy(copyContent)}>
+                <div 
+                  className="rb:w-4 rb:h-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]" 
+                ></div>
+                {t('common.copy')}
+              </Button>
+            </div>
+          </div>
+        </Card>
+        <Card
+          title={t('application.apiKeys')}
+          extra={
+            <Button style={{padding: '0 8px', height: '24px'}} onClick={handleAdd}>+ {t('application.addApiKey')}</Button>
+          }
+        >
+          <div className="rb:text-[#5B6167] rb:text-[12px] rb:mb-2">{t('application.apiKeySubTitle')}</div>
+          {/* 总览数据 */}
+          <Row>
+            <Col span={6}>
+              <Statistic title={t('application.apiKeyTotal')} value={apiKeyList.length} />
+            </Col>
+            <Col span={6}>
+              <Statistic title={t('application.apiKeyRequestTotal')} value={totalRequests} />
+            </Col>
+          </Row>
+          {/* API Key 列表 */}
+          {apiKeyList.sort((a, b) => b.created_at - a.created_at).map(item => (
+            <div key={item.id} className="rb:mt-4 rb:p-[10px_12px] rb:bg-[#F0F3F8] rb:border rb:border-[#DFE4ED] rb:rounded-lg">
+              <div className="rb:flex rb:items-center rb:justify-between">
+                <div className="rb:flex rb:items-center rb:max-w-[calc(100%-92px)]">
+                  <div className="rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:flex-1">{item.name}</div>
+                  <Tag className="rb:ml-2">ID: {item.id}</Tag>
+                </div>
+                <Space>
                  <div 
-                    className="rb:w-[16px] rb:h-[16px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]" 
+                    className="rb:w-6 rb:h-6 rb:cursor-pointer rb:bg-[url('@/assets/images/editBorder.svg')] rb:hover:bg-[url('@/assets/images/editBg.svg')]" 
+                    onClick={() => handleEdit(item)}
+                  ></div>
+                  <div 
+                    className="rb:w-6 rb:h-6 rb:cursor-pointer rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]" 
+                    onClick={() => handleDelete(item)}
+                  ></div>
+                </Space>
+              </div>
+              <div className="rb:mb-3 rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-5 rb:p-[8px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:leading-5">
+                {maskApiKeys(item.api_key)}
+                
+                <Button className="rb:px-2! rb:h-7! rb:group" onClick={() => handleCopy(item.api_key)}>
+                  <div 
+                    className="rb:w-4 rb:h-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]" 
                  ></div>
                  {t('common.copy')}
                </Button>
              </div>
+ 
+              <Row gutter={12}>
+                <Col span={8}>
+                  <Statistic valueStyle={{ fontSize: '18px' }} title={t('application.apiKeyRequestTotal')} value={item.total_requests} />
+                </Col>
+                <Col span={8}>
+                  <Statistic valueStyle={{ fontSize: '18px' }} title={t('application.qps')} value={item.quota_used} />
+                </Col>
+                <Col span={8}>
+                  <Statistic valueStyle={{ fontSize: '18px' }} title={t('application.qpsLimit')} value={item.rate_limit} />
+                </Col>
+              </Row>
            </div>
-          </Card>
-          <Card
-            title={t('application.authenticationMethod')}
-            // extra={
-            //   <Button style={{padding: '0 8px', height: '24px'}} onClick={handleAdd}>+ {t('application.addApiKey')}</Button>
-            // }
-          >
-            <div className="rb:p-[10px_20px] rb:bg-[#F0F3F8] rb:border rb:border-[#DFE4ED] rb:rounded-[8px] rb:font-medium rb:text-center">
-              {t('application.apiKeyTitle')}
-              <p className="rb:mt-[6px] rb:text-[#5B6167] rb:text-[12px] rb:font-regular">{t('application.apiKeyDesc')}</p>
-            </div>
-            {apiKeyList.map((item, index) => (
-              <div key={index} className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-[20px] rb:p-[12px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-[8px] rb:leading-[20px]">
-                {item}
+          ))}
+        </Card>
+      </Space>

-                <Space>
-                  <Button className="rb:px-[8px]! rb:h-[28px]! rb:group" onClick={() => handleCopy(item)}>
-                    <div 
-                      className="rb:w-[16px] rb:h-[16px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]" 
-                    ></div>
-                    {t('common.copy')}
-                  </Button>
-                  {/* <div 
-                    className="rb:w-[24px] rb:h-[24px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')] rb:hover:bg-[url('@/assets/images/delete_hover.svg')]" 
-                    onClick={() => handleDelete(index)}
-                  ></div> */}
-                </Space>
-              </div>
-            ))}
-          </Card>
-          {/* <Card title={t('application.requestResponseExample')}>
-            <div className="rb:mb-[12px] rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:font-regular">
-              {t('application.requestExample')}
-              <Button>{t('application.downloadPostmanCollection')}</Button>
-            </div>
-            <div className="rb:p-[16px_20px] rb:bg-[#F0F3F8] rb:rounded-[8px] rb:text-[#5B6167] rb:leading-[18px]">
-              curl -X POST  https://api.example.com/v1/agent/execute  \ -H "Authorization: Bearer YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d 
-            </div>
-
-            <div className="rb:mb-[12px] rb:mt-[24px] rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:font-regular">
-              {t('application.responseExample')}
-            </div>
-            <div className="rb:p-[16px_20px] rb:bg-[#F0F3F8] rb:rounded-[8px] rb:text-[#5B6167] rb:leading-[18px]">
-              curl -X POST  https://api.example.com/v1/agent/execute  \ -H "Authorization: Bearer YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d 
-            </div>
-          </Card>
-          <Card title={t('application.rateLimitingStrategy')}>
-            <div className="rb:grid rb:grid-cols-3 rb:gap-[18px]">
-              {limitList.map(item => (
-                <div key={item.key} className="rb:border rb:border-[#DFE4ED] rb:bg-[#FBFDFF] rb:rounded-[8px] rb:p-[16px_20px]">
-                  <div className="rb:flex rb:justify-between">
-                    <div className="rb:leading-[20px]">
-                      {t(`application.${item.key}`)}
-                      <div className="rb:text-[14px] rb:font-medium rb:text-[#155EEF] rb:mt-[8px]">{item.value}{item.unit}</div>
-                    </div>
-                    <img src={item.icon} className="rb:w-[24px] rb:h-[24px]" />
-                  </div>
-                  <Slider style={{ margin: '24px 0 0 0' }} value={item.value} />
-                </div>
-              ))}
-            </div>
-          </Card>
-          <Card title={t('application.sdkDownload')}>
-            <div className="rb:grid rb:grid-cols-4 rb:gap-[16px]">
-              {sdkList.map(item => (
-                <div key={item} className="rb:border rb:border-[#DFE4ED] rb:bg-[#FBFDFF] rb:rounded-[8px] rb:p-[24px_20px] rb:text-center">
-                  {t(`application.${item}`)}
-                </div>
-              ))}
-            </div>
-          </Card>
-          <Card title={t('application.advancedSettings')}>
-            <Form.Item 
-              name="WebhookReturnsTimeout"
-              label={<>{t('application.WebhookReturnsTimeout')}<span className="rb:text-[#5B6167] rb:text-[12px] rb:font-regular"> ({t('application.WebhookReturnsTimeoutDesc')})</span></>}
-            >
-              <Input disabled />
-            </Form.Item>
-            <Form.Item 
-              name="whitelistIP"
-              label={<>{t('application.whitelistIP')}<span className="rb:text-[#5B6167] rb:text-[12px] rb:font-regular"> ({t('application.whitelistIPDesc')})</span></>}
-            >
-              <Input.TextArea rows={4} />
-            </Form.Item>
-            <Form.Item 
-              name="whitelistIP"
-              className="rb:mb-[0]!"
-            >
-              <Checkbox>{t('application.publicAPIDocumentation')}</Checkbox>
-            </Form.Item>
-          </Card> */}
-        </Space>
-      {/* </Form> */}
+      <ApiKeyModal
+        ref={apiKeyModalRef}
+        application={application}
+        refresh={getApiList}
+      />
+      <ApiKeyConfigModal
+        ref={apiKeyConfigModalRef}
+        refresh={getApiList}
+      />
    </div>
  );
 }
--- a/web/src/views/ApplicationConfig/components/ApiKeyConfigModal.tsx
+++ b/web/src/views/ApplicationConfig/components/ApiKeyConfigModal.tsx
@@ -0,0 +1,127 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Slider } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type {  ApiKeyConfigModalRef } from '../types'
+import RbModal from '@/components/RbModal'
+import { updateApiKey } from '@/api/apiKey';
+import type { ApiKey } from '@/views/ApiKeyManagement/types'
+
+interface ApiKeyConfigModalProps {
+  refresh: () => void;
+}
+const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProps>(({
+  refresh
+}, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<ApiKey>();
+  const [loading, setLoading] = useState(false)
+  const values = Form.useWatch<ApiKey>([], form)
+  const [editVo, setEditVo] = useState<ApiKey>({} as ApiKey)
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setLoading(false)
+  };
+
+  const handleOpen = (apiKey: ApiKey) => {
+    setVisible(true);
+    setEditVo(apiKey)
+    form.setFieldsValue({
+      daily_request_limit: apiKey.daily_request_limit,
+      rate_limit: apiKey.rate_limit
+    });
+  };
+  // 封装保存方法，添加提交逻辑
+  const handleSave = () => {
+    form.validateFields()
+      .then((values) => {
+        updateApiKey(editVo.id, {
+          ...editVo,
+          ...values
+        })
+        handleClose()
+        refresh()
+      })
+  }
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbModal
+      title={t('application.apiLimitConfig')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.save')}
+      onOk={handleSave}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        className="rb:px-2.5!"
+        scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
+      >
+        {/* QPS 限制（每秒请求数） */}
+        <>
+          <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
+            {t(`application.qpsLimit`)}({t('application.qpsLimitTip')})
+          </div>
+          <div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:mb-2">
+            {t('application.qpsLimitDesc')}
+          </div>
+          <div className="rb:pl-2">
+            <Form.Item
+              name="rate_limit"
+            >
+              <Slider 
+                style={{ margin: '0' }} 
+                min={1} 
+                max={100} 
+                step={1}
+              />
+            </Form.Item>
+            <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:mt-[-26px]">
+              1
+              <span>{t('application.currentValue')}: {values?.rate_limit}{t('application.qpsLimitUnit')}</span>
+            </div>
+          </div>
+        </>
+        {/* 日调用量限制 */}
+        <>
+          <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mt-6 rb:mb-2">
+            {t(`application.dailyUsageLimit`)}
+          </div>
+          <div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:mb-2">
+            {t('application.dailyUsageLimitDesc')}
+          </div>
+          <div className="rb:pl-2">
+            <Form.Item
+              name="daily_request_limit"
+            >
+              <Slider 
+                style={{ margin: '0' }} 
+                min={100} 
+                max={100000} 
+                step={100}
+              />
+            </Form.Item>
+            <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:mt-[-26px]">
+              100
+              <span>{t('application.currentValue')}: {values?.daily_request_limit}{t('application.dailyUsageLimitUnit')}</span>
+            </div>
+          </div>
+        </>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default ApiKeyConfigModal;
--- a/web/src/views/ApplicationConfig/components/ApiKeyModal.tsx
+++ b/web/src/views/ApplicationConfig/components/ApiKeyModal.tsx
@@ -0,0 +1,103 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Input, App } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { Application } from '@/views/ApplicationManagement/types'
+import type { ApiKeyModalRef } from '../types'
+import { createApiKey  } from '@/api/apiKey';
+import RbModal from '@/components/RbModal'
+
+const FormItem = Form.Item;
+
+interface ApiKeyModalProps {
+  refresh: () => void;
+  application?: Application | null;
+}
+
+const ApiKeyModal = forwardRef<ApiKeyModalRef, ApiKeyModalProps>(({
+  refresh,
+  application
+}, ref) => {
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false)
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setLoading(false)
+  };
+
+  const handleOpen = () => {
+    setVisible(true);
+      form.resetFields();
+  };
+  // 封装保存方法，添加提交逻辑
+  const handleSave = () => {
+    if (!application) return
+    form.validateFields()
+      .then((values) => {
+        setLoading(true)
+        createApiKey({
+          ...values,
+          type: application.type,
+          resource_id: application.id,
+        })
+        .then(() => {
+          handleClose()
+          refresh()
+          message.success(t('common.createSuccess'))
+        })
+        .finally(() => {
+          setLoading(false)
+        })
+      })
+  }
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbModal
+      title={t('application.addApiKey')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.create')}
+      onOk={handleSave}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
+      >
+        {/* Key 名称 */}
+        <FormItem
+          name="name"
+          label={t('application.apiKeyName')}
+          rules={[
+            { required: true, message: t('common.pleaseEnter') },
+            { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: t('application.invalidVariableName') },
+          ]}
+        >
+          <Input placeholder={t('application.apiKeyNamePlaceholder')} />
+        </FormItem>
+        {/* 描述 */}
+        <FormItem
+          name="description"
+          label={t('application.description')}
+        >
+          <Input.TextArea placeholder={t('application.apiKeyDescPlaceholder')} />
+        </FormItem>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default ApiKeyModal;
--- a/web/src/views/ApplicationConfig/index.tsx
+++ b/web/src/views/ApplicationConfig/index.tsx
@@ -8,9 +8,7 @@ import Api from './Api'
 import ReleasePage from './ReleasePage'
 import Cluster from './Cluster'
 import { getApplication } from '@/api/application'
-import { randomString } from '@/utils/common'

-const apiKeyList = [`app-${randomString(24, false)}`]
 const ApplicationConfig: React.FC = () => {
  const { id } = useParams();
  const agentRef = useRef<AgentRef>(null)
@@ -52,7 +50,7 @@ const ApplicationConfig: React.FC = () => {
      />
      {activeTab === 'arrangement' && application?.type === 'agent' && <Agent ref={agentRef} />}
      {activeTab === 'arrangement' && application?.type === 'multi_agent' && <Cluster application={application as Application} />}
-      {activeTab === 'api' && <Api apiKeyList={apiKeyList} />}
+      {activeTab === 'api' && <Api application={application} />}
      {activeTab === 'release' && <ReleasePage data={application as Application} refresh={getApplicationInfo} />}
    </>
  );
--- a/web/src/views/ApplicationConfig/types.ts
+++ b/web/src/views/ApplicationConfig/types.ts
@@ -187,4 +187,10 @@ export interface SubAgentItem {
 }
 export interface SubAgentModalRef {
  handleOpen: (agent?: SubAgentItem) => void;
+}
+export interface ApiKeyModalRef {
+  handleOpen: () => void;
+}
+export interface ApiKeyConfigModalRef {
+  handleOpen: (apiKey: ApiKey) => void;
 }
--- a/web/src/views/ApplicationManagement/types.ts
+++ b/web/src/views/ApplicationManagement/types.ts
@@ -7,7 +7,7 @@ export interface Application {
  description?: string;
  icon?: string;
  icon_type?: string;
-  type: string;
+  type: 'agent' | 'multi_agent' | 'workflow';
  visibility: string;
  status: string;
  tags: string[];