style(web): translate the comments in the src/views directory into English

2026-02-03 18:38:04 +08:00
parent a191e32f71
commit 9e195ea63b
155 changed files with 4169 additions and 586 deletions
--- a/web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx
+++ b/web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx
@@ -1,7 +1,14 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 15:52:44 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-03 15:54:22
+ */
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import { Switch, Button, Tooltip } 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';
@@ -9,16 +16,29 @@ import { formatDateTime } from '@/utils/format'
 import Tag from '@/components/Tag'
 import { maskApiKeys } from '@/utils/apiKeyReplacer';

+/**
+ * Modal component for viewing API key details
+ * Displays read-only information about an API key
+ */
 const ApiKeyDetailModal = forwardRef<ApiKeyModalRef, { handleCopy: (content: string) => void }>(({ handleCopy }, ref) => {
+  // Hooks
  const { t } = useTranslation();
+  
+  // State
  const [visible, setVisible] = useState(false);
  const [data, setData] = useState<ApiKey>({} as ApiKey)

-  // 封装取消方法，添加关闭弹窗逻辑
+  /**
+   * Close the modal
+   */
  const handleClose = () => {
    setVisible(false);
  };

+  /**
+   * Open modal and fetch API key details
+   * @param apiKey - API key item to view
+   */
  const handleOpen = (apiKey?: ApiKey) => {
    if (apiKey?.id) {
      getApiKey(apiKey.id)
@@ -29,7 +49,9 @@ const ApiKeyDetailModal = forwardRef<ApiKeyModalRef, { handleCopy: (content: str
    }
  };

-  // 暴露给父组件的方法
+  /**
+   * Expose methods to parent component via ref
+   */
  useImperativeHandle(ref, () => ({
    handleOpen,
    handleClose
--- a/web/src/views/ApiKeyManagement/components/ApiKeyModal.tsx
+++ b/web/src/views/ApiKeyManagement/components/ApiKeyModal.tsx
@@ -1,28 +1,48 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 15:52:47 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 15:52:47 
+ */
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import { Form, Input, Switch, App, DatePicker } from 'antd';
 import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs'
+
 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;

+/**
+ * Props for ApiKeyModal component
+ */
 interface CreateModalProps {
+  /** Callback to refresh parent list after save */
  refresh: () => void;
 }

+/**
+ * Modal component for creating or editing API keys
+ * Handles API key configuration including permissions and expiration
+ */
 const ApiKeyModal = forwardRef<ApiKeyModalRef, CreateModalProps>(({
  refresh,
 }, ref) => {
+  // Hooks
  const { t } = useTranslation();
  const { message } = App.useApp();
-  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm<ApiKey>();
+  
+  // State
+  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [editVo, setEditVo] = useState<ApiKey | null>(null);

-  // 封装取消方法，添加关闭弹窗逻辑
+  /**
+   * Close modal and reset form state
+   */
  const handleClose = () => {
    setVisible(false);
    form.resetFields();
@@ -30,10 +50,14 @@ const ApiKeyModal = forwardRef<ApiKeyModalRef, CreateModalProps>(({
    setEditVo(null);
  };

+  /**
+   * Open modal for creating or editing
+   * @param apiKey - Optional API key data for edit mode
+   */
  const handleOpen = (apiKey?: ApiKey) => {
    if (apiKey?.id) {
      const { scopes = [], expires_at } = apiKey
-      // 编辑模式，填充表单
+      // Edit mode - populate form with existing data
      form.setFieldsValue({
        name: apiKey.name,
        description: apiKey.description,
@@ -46,7 +70,10 @@ const ApiKeyModal = forwardRef<ApiKeyModalRef, CreateModalProps>(({
    setVisible(true);
  };

-  // 封装保存方法，添加提交逻辑
+  /**
+   * Validate and submit form data
+   * Creates new API key or updates existing one
+   */
  const handleSave = async () => {
    form.validateFields()
      .then((values) => {
@@ -59,7 +86,7 @@ const ApiKeyModal = forwardRef<ApiKeyModalRef, CreateModalProps>(({
        if (rag) {
          scopes.push('rag')
        }
-        // 准备新的/更新的API Key数据
+        // Prepare new/updated API key data
        const apiKeyData = {
          ...rest,
          scopes,
@@ -78,7 +105,9 @@ const ApiKeyModal = forwardRef<ApiKeyModalRef, CreateModalProps>(({
      })
  }

-  // 暴露给父组件的方法
+  /**
+   * Expose methods to parent component via ref
+   */
  useImperativeHandle(ref, () => ({
    handleOpen,
    handleClose
--- a/web/src/views/ApiKeyManagement/index.tsx
+++ b/web/src/views/ApiKeyManagement/index.tsx
@@ -1,8 +1,16 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 15:52:50 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 15:52:50 
+ */
 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 copy from 'copy-to-clipboard'
+
 import type { ApiKey, ApiKeyModalRef } from './types';
 import ApiKeyModal from './components/ApiKeyModal';
 import ApiKeyDetailModal from './components/ApiKeyDetailModal';
@@ -11,26 +19,49 @@ 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';

+/**
+ * API Key Management page component
+ * Manages service API keys with CRUD operations
+ */
 const ApiKeyManagement: React.FC = () => {
+  // Hooks
  const { t } = useTranslation();
  const { modal, message } = App.useApp();
+  
+  // Refs
  const apiKeyModalRef = useRef<ApiKeyModalRef>(null);
  const apiKeyDetailModalRef = useRef<ApiKeyModalRef>(null)
  const scrollListRef = useRef<PageScrollListRef>(null)

+  /**
+   * Refresh the API key list
+   */
  const refresh = () => {
    scrollListRef.current?.refresh();
  }
  
+  /**
+   * Open modal to create or edit API key
+   * @param item - Optional API key item for edit mode
+   */
  const handleEdit = (item?: ApiKey) => {
    apiKeyModalRef.current?.handleOpen(item);
  }
+  
+  /**
+   * Open modal to view API key details
+   * @param item - API key item to view
+   */
  const handleView = (item: ApiKey) => {
    apiKeyDetailModalRef.current?.handleOpen(item);
  }
+  
+  /**
+   * Delete API key with confirmation
+   * @param item - API key item to delete
+   */
  const handleDelete = (item: ApiKey) => {
    modal.confirm({
      title: t('common.confirmDeleteDesc', { name: item.name }),
@@ -46,6 +77,10 @@ const ApiKeyManagement: React.FC = () => {
      }
    })
  }
+  /**
+   * Copy content to clipboard
+   * @param content - Content to copy
+   */
  const handleCopy = (content: string) => {
    copy(content)
    message.success(t('common.copySuccess'))
--- a/web/src/views/ApiKeyManagement/types.ts
+++ b/web/src/views/ApiKeyManagement/types.ts
@@ -1,39 +1,76 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 15:52:53 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 15:52:53 
+ */
 import type { Dayjs } from 'dayjs'
 import { maskApiKeys } from '@/utils/apiKeyReplacer'

+/**
+ * API Key data structure
+ */
 export interface ApiKey {
+  /** Unique identifier */
  id: string;
+  /** API key name */
  name: string;
+  /** Optional description */
  description?: string;
+  /** API key type */
  type: 'agent' | 'multi_agent' | 'workflow' | 'service';
-  scopes?: string[]; // 'memory' | 'rag' | 'app'
+  /** Permission scopes: 'memory' | 'rag' | 'app' */
+  scopes?: string[];

+  /** The actual API key string */
  api_key: string;
+  /** Whether the key is active */
  is_active: boolean;
+  /** Whether the key has expired */
  is_expired: boolean;
+  /** Creation timestamp */
  created_at: number;
+  /** Expiration timestamp or Dayjs object */
  expires_at?: number | Dayjs;
+  /** Memory engine permission flag */
  memory?: boolean;
+  /** RAG/Knowledge base permission flag */
  rag?: boolean;

-
+  /** Last update timestamp */
  updated_at: string;
+  /** Queries per second limit */
  qps_limit?: number;
+  /** Daily request limit */
  daily_request_limit?: number;

+  /** Rate limit */
  rate_limit?: number;
+  /** Total number of requests made */
  total_requests: number;
+  /** Quota used */
  quota_used: number;
+  /** Quota limit */
  quota_limit: number;
 }

+/**
+ * Ref methods exposed by API Key modal components
+ */
 export interface ApiKeyModalRef {
+  /**
+   * Open the modal
+   * @param apiKey - Optional API key data for edit mode
+   */
  handleOpen: (apiKey?: ApiKey) => void;
+  /** Close the modal */
  handleClose: () => void;
 }

 /**
- * 获取掩码后的API密钥
+ * Get masked API key for display
+ * @param apiKey - The API key to mask
+ * @returns Masked API key string
 */
 export const getMaskedApiKey = (apiKey: string): string => {
  return maskApiKeys(apiKey)