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

web/src/views/ApplicationConfig/components/VariableList/ApiExtensionModal.tsx

@@ -1,3 +1,14 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:26:18 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 16:26:18 
+ */
+/**
+ * API Extension Modal
+ * Allows configuring external API endpoints for dynamic variable options
+ */
+
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import { Form, Input } from 'antd';
 import { useTranslation } from 'react-i18next';
@@ -7,10 +18,17 @@ import RbModal from '@/components/RbModal'
 
 const FormItem = Form.Item;
 
+/**
+ * Component props
+ */
 interface ApiExtensionModalProps {
+  /** Callback to refresh API extension list */
   refresh: () => void;
 }
 
+/**
+ * Modal for adding API extensions
+ */
 const ApiExtensionModal = forwardRef<ApiExtensionModalRef, ApiExtensionModalProps>(({
   refresh
 }, ref) => {
@@ -21,18 +39,19 @@ const ApiExtensionModal = forwardRef<ApiExtensionModalRef, ApiExtensionModalProp
 
   const values = Form.useWatch([], form);
 
-  // 封装取消方法，添加关闭弹窗逻辑
+  /** Close modal and reset form */
   const handleClose = () => {
     setVisible(false);
     form.resetFields();
     setLoading(false)
   };
 
+  /** Open modal */
   const handleOpen = () => {
       form.resetFields();
     setVisible(true);
   };
-  // 封装保存方法，添加提交逻辑
+  /** Save API extension configuration */
   const handleSave = () => {
     form
       .validateFields()
@@ -46,7 +65,7 @@ const ApiExtensionModal = forwardRef<ApiExtensionModalRef, ApiExtensionModalProp
       });
   }
 
-  // 暴露给父组件的方法
+  /** Expose methods to parent component */
   useImperativeHandle(ref, () => ({
     handleOpen,
     handleClose

web/src/views/ApplicationConfig/components/VariableList/VariableEditModal.tsx

@@ -1,3 +1,15 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:26:27 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 16:26:27 
+ */
+/**
+ * Variable Edit Modal
+ * Allows creating and editing application input variables
+ * Supports multiple variable types: text, paragraph, number, dropdown, checkbox, API variable
+ */
+
 import { forwardRef, useImperativeHandle, useState, useRef } from 'react';
 import { Form, Input, Select, InputNumber, Checkbox, Tag, Divider, Button } from 'antd';
 import { useTranslation } from 'react-i18next';
@@ -9,10 +21,17 @@ import ApiExtensionModal from './ApiExtensionModal'
 
 const FormItem = Form.Item;
 
+/**
+ * Component props
+ */
 interface VariableEditModalProps {
+  /** Callback to update variable */
   refreshTable: (values: Variable) => void;
 }
 
+/**
+ * Supported variable types
+ */
 const types = [
   'text', 
   'paragraph', 
@@ -21,6 +40,9 @@ const types = [
   // 'checkbox', 
   // 'apiVariable'
 ]
+/**
+ * Variable type to data type mapping
+ */
 const variableType = {
   text: 'string',
   paragraph: 'string',
@@ -30,6 +52,9 @@ const variableType = {
   apiVariable: 'string',
 }
 
+/**
+ * Modal for editing variables
+ */
 const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProps>(({
   refreshTable
 }, ref) => {
@@ -42,7 +67,7 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
 
   const values = Form.useWatch([], form);
 
-  // 封装取消方法，添加关闭弹窗逻辑
+  /** Close modal and reset form */
   const handleClose = () => {
     setVisible(false);
     form.resetFields();
@@ -50,6 +75,7 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
     setEditVo(null)
   };
 
+  /** Open modal with optional variable data */
   const handleOpen = (variable?: Variable) => {
     setVisible(true);
     if (variable) {
@@ -59,7 +85,7 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
       form.resetFields();
     }
   };
-  // 封装保存方法，添加提交逻辑
+  /** Save variable configuration */
   const handleSave = () => {
     form.validateFields().then((values) => {
       refreshTable({
@@ -70,12 +96,12 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
     })
   }
 
-  // 暴露给父组件的方法
+  /** Expose methods to parent component */
   useImperativeHandle(ref, () => ({
     handleOpen,
     handleClose
   }));
-  // 变量类型改变时，更新初始化其他字段值
+  /** Handle variable type change */
   const handleChangeType = (value: Variable['type']) => {
     if (value) {
       form.setFieldsValue({
@@ -90,7 +116,7 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
       })
     }
   }
-  // 添加 API 扩展
+  /** Add API extension */
   const addApiExtension = () => {
     apiExtensionModalRef.current?.handleOpen()
   }

web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx

@@ -1,6 +1,19 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:26:32 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 16:26:32 
+ */
+/**
+ * Variable List Component
+ * Manages application input variables configuration
+ * Allows adding, editing, and removing variables
+ */
+
 import { type FC, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Space, Button, Switch, Form } from 'antd'
+
 import variablesEmpty from '@/assets/images/application/variablesEmpty.svg'
 import Card from '../Card'
 import Table from '@/components/Table';
@@ -8,17 +21,27 @@ import type { Variable, VariableEditModalRef } from './types'
 import Empty from '@/components/Empty'
 import VariableEditModal from './VariableEditModal'
 
+/**
+ * Component props
+ */
 interface VariableListProps {
+  /** Current variable list */
   value?: Variable[];
+  /** Callback when variables change */
   onChange?: (value: Variable[]) => void;
 }
-const VariableList: FC<VariableListProps> = ({value = [], onChange}) => {
+
+/**
+ * Variable list management component
+ */const VariableList: FC<VariableListProps> = ({value = [], onChange}) => {
   const { t } = useTranslation()
   const variableEditModalRef = useRef<VariableEditModalRef>(null)
   
+  /** Open variable edit modal */
   const handleAddVariable = () => {
     variableEditModalRef.current?.handleOpen()
   }
+  /** Save variable changes */
   const handleSaveVariable = (variable: Variable) => {
     const newList = [...(value || [])]
     if (variable.index !== undefined && variable.index >= 0) {

web/src/views/ApplicationConfig/components/VariableList/types.ts

@@ -1,28 +1,69 @@
-export interface Variable {
-  index?: number;
-  name: string;
-  display_name: string;
-  type: string;
-  required: boolean;
-  max_length?: number;
-  description?: string;
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:26:21 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 16:26:21 
+ */
+/**
+ * Type definitions for variable configuration in application settings
+ */
 
+/**
+ * Variable definition for application input
+ */
+export interface Variable {
+  /** Variable index in list */
+  index?: number;
+  /** Variable name (identifier) */
+  name: string;
+  /** Display name shown to users */
+  display_name: string;
+  /** Variable data type (string, number, select, etc.) */
+  type: string;
+  /** Whether variable is required */
+  required: boolean;
+  /** Maximum length for string types */
+  max_length?: number;
+  /** Variable description */
+  description?: string;
+  /** Unique key for React rendering */
   key?: string;
+  /** Default value */
   default_value?: string;
+  /** Options for select type variables */
   options?: string[];
+  /** API extension for dynamic options */
   api_extension?: string;
+  /** Whether variable is hidden from UI */
   hidden?: boolean;
+  /** Current value */
   value?: any;
 }
+
+/**
+ * Modal ref for variable editing
+ */
 export interface VariableEditModalRef {
+  /** Open modal with optional existing variable data */
   handleOpen: (values?: Variable) => void;
 }
 
+/**
+ * API extension configuration data
+ */
 export interface ApiExtensionModalData {
+  /** Extension name */
   name: string;
+  /** API endpoint URL */
   apiEndpoint: string;
+  /** API authentication key */
   apiKey: string;
 }
+
+/**
+ * Modal ref for API extension configuration
+ */
 export interface ApiExtensionModalRef {
+  /** Open API extension modal */
   handleOpen: () => void;
 }