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

web/src/views/ApplicationManagement/components/ApplicationModal.tsx

@@ -1,32 +1,57 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:34:09 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-03 16:35:30
+ */
+/**
+ * Application Modal
+ * Modal for creating and editing applications
+ * Supports three application types: agent, multi_agent, and workflow
+ */
+
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import { Form, Input } from 'antd';
 import { useTranslation } from 'react-i18next';
+
 import RadioGroupCard from '@/components/RadioGroupCard'
 import AgentIcon from '@/assets/images/application/agent.svg'
 import ClusterIcon from '@/assets/images/application/cluster.svg'
 import WorkflowIcon from '@/assets/images/application/workflow.svg'
-
 import type { ApplicationModalData, ApplicationModalRef, Application } from '../types'
 import RbModal from '@/components/RbModal'
 import { addApplication, updateApplication } from '@/api/application'
 
 const FormItem = Form.Item;
 
+/**
+ * Component props
+ */
 interface ApplicationModalProps {
+  /** Callback to refresh application list */
   refresh: () => void;
 }
 
+/**
+ * Supported application types
+ */
 const types = [
   'agent',
   'multi_agent',
   'workflow'
 ]
+/**
+ * Application type icon mapping
+ */
 const typeIcons: Record<string, string> = {
   agent: AgentIcon,
   multi_agent: ClusterIcon,
   workflow: WorkflowIcon
 }
 
+/**
+ * Modal for creating and editing applications
+ */
 const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(({
   refresh
 }, ref) => {
@@ -38,7 +63,7 @@ const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(
 
   const values = Form.useWatch([], form);
 
-  // 封装取消方法，添加关闭弹窗逻辑
+  /** Close modal and reset form */
   const handleClose = () => {
     setVisible(false);
     form.resetFields();
@@ -46,6 +71,7 @@ const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(
     setEditVo(null)
   };
 
+  /** Open modal with optional application data for editing */
   const handleOpen = (application?: Application) => {
     if (application) {
       setEditVo(application || null)
@@ -59,7 +85,7 @@ const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(
     }
     setVisible(true);
   };
-  // 封装保存方法，添加提交逻辑
+  /** Save application (create or update) */
   const handleSave = () => {
     form
       .validateFields()
@@ -83,7 +109,7 @@ const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(
       });
   }
 
-  // 暴露给父组件的方法
+  /** Expose methods to parent component */
   useImperativeHandle(ref, () => ({
     handleOpen,
     handleClose

web/src/views/ApplicationManagement/index.tsx

@@ -1,8 +1,21 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:34:12 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 16:34:12 
+ */
+/**
+ * Application Management Page
+ * Displays and manages all applications in the workspace
+ * Supports creating, editing, and deleting applications
+ */
+
 import React, { useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Row, Col, App } from 'antd';
 import clsx from 'clsx';
 import { DeleteOutlined } from '@ant-design/icons';
+
 import type { Application, ApplicationModalRef, Query } from './types';
 import ApplicationModal from './components/ApplicationModal';
 import SearchInput from '@/components/SearchInput'
@@ -11,6 +24,9 @@ import { getApplicationListUrl, deleteApplication } from '@/api/application'
 import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
 import { formatDateTime } from '@/utils/format';
 
+/**
+ * Application management main component
+ */
 const ApplicationManagement: React.FC = () => {
   const { t } = useTranslation();
   const { modal } = App.useApp();
@@ -18,16 +34,20 @@ const ApplicationManagement: React.FC = () => {
   const applicationModalRef = useRef<ApplicationModalRef>(null);
   const scrollListRef = useRef<PageScrollListRef>(null)
 
+  /** Refresh application list */
   const refresh = () => {
     scrollListRef.current?.refresh();
   }
   
+  /** Open create application modal */
   const handleCreate = () => {
     applicationModalRef.current?.handleOpen();
   }
+  /** Navigate to application configuration page */
   const handleEdit = (item: Application) => {
     window.open(`/#/application/config/${item.id}`);
   }
+  /** Delete application with confirmation */
   const handleDelete = (item: Application) => {
     modal.confirm({
       title: t('common.confirmDeleteDesc', { name: item.name }),

web/src/views/ApplicationManagement/types.ts

@@ -1,76 +1,174 @@
-// 应用数据类型
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:34:15 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 16:34:15 
+ */
+/**
+ * Type definitions for Application Management
+ */
+
+/**
+ * Search query parameters
+ */
 export interface Query {
+  /** Search keyword */
   search: string;
 }
+
+/**
+ * Application data structure
+ */
 export interface Application {
+  /** Application ID */
   id: string;
+  /** Workspace ID */
   workspace_id: string;
+  /** Creator user ID */
   created_by: string;
+  /** Application name */
   name: string;
+  /** Application description */
   description?: string;
+  /** Icon URL */
   icon?: string;
+  /** Icon type */
   icon_type?: string;
+  /** Application type: agent, multi_agent, or workflow */
   type: 'agent' | 'multi_agent' | 'workflow';
+  /** Visibility setting */
   visibility: string;
+  /** Application status */
   status: string;
+  /** Application tags */
   tags: string[];
+  /** Current release version ID */
   current_release_id?: string;
+  /** Whether application is active */
   is_active: boolean;
+  /** Whether application is shared */
   is_shared: boolean;
+  /** Creation timestamp */
   created_at: number;
+  /** Last update timestamp */
   updated_at: number;
 }
 
-// 创建表单数据类型
+/**
+ * Application creation/edit form data
+ */
 export interface ApplicationModalData {
+  /** Application name */
   name: string;
+  /** Application type */
   type: string;
+  /** Application description */
   description?: string;
+  /** Icon upload data */
   icon: {
     url: string;
     uid: string | number;
   }[];
 }
 
-// 定义组件暴露的方法接口
+/**
+ * Application modal ref interface
+ */
 export interface ApplicationModalRef {
+  /** Open modal with optional application data for editing */
   handleOpen: (application?: Application) => void;
 }
+
+/**
+ * Model configuration modal ref interface
+ */
 export interface ModelConfigModalRef {
+  /** Open modal with application data */
   handleOpen: (application?: Application) => void;
 }
+
+/**
+ * Model configuration form data
+ */
 export interface ModelConfigModalData {
+  /** Selected model */
   model: string;
+  /** Additional configuration fields */
   [key: string]: string;
 }
+
+/**
+ * AI prompt modal ref interface
+ */
 export interface AiPromptModalRef {
+  /** Open modal with application data */
   handleOpen: (application?: Application) => void;
 }
+
+/**
+ * Variable modal ref interface
+ */
 export interface VariableModalRef {
+  /** Open modal with application data */
   handleOpen: (application?: Application) => void;
 }
+
+/**
+ * Variable modal props
+ */
 export interface VariableModalProps {
+  /** Callback to refresh variable list */
   refresh: () => void;
 }
+
+/**
+ * Variable edit modal ref interface
+ */
 export interface VariableEditModalRef {
+  /** Open modal with optional variable data */
   handleOpen: (values?: Variable) => void;
 }
+
+/**
+ * Variable data structure
+ */
 export interface Variable {
+  /** Variable index */
   index?: number;
+  /** Variable type */
   type: string;
+  /** Variable key */
   key: string;
+  /** Variable name */
   name: string;
+  /** Maximum length for string types */
   maxLength?: number;
+  /** Default value */
   defaultValue?: string;
+  /** Options for select type */
   options?: string[];
+  /** Whether variable is required */
   required: boolean;
+  /** Whether variable is hidden */
   hidden?: boolean;
 }
+
+/**
+ * API extension configuration data
+ */
 export interface ApiExtensionModalData {
+  /** Extension name */
   name: string;
+  /** API endpoint URL */
   apiEndpoint: string;
+  /** API authentication key */
   apiKey: string;
 }
+
+/**
+ * API extension modal ref interface
+ */
 export interface ApiExtensionModalRef {
+  /** Open API extension modal */
   handleOpen: () => void;
 }