docs: add comments to the src/components directory

web/src/components/Table/index.module.css

@@ -1,3 +0,0 @@
-.row {
-  color: #5B6167;
-}

web/src/components/Table/index.tsx

@@ -1,32 +1,73 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-02 15:29:46 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-02 15:32:11
+ */
+/**
+ * RbTable Component
+ * 
+ * A table component with built-in pagination and API integration:
+ * - Automatic data fetching from API
+ * - Pagination with customizable page size
+ * - Row selection support
+ * - Custom empty state
+ * - Configurable scroll behavior
+ * - Exposes loadData and getList methods via ref
+ * 
+ * @component
+ */
+
 import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import { Table } from 'antd';
 import type { TableProps } from 'antd';
-import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
+import type { ColumnsType } from 'antd/es/table';
 import { useTranslation } from 'react-i18next';
+
 import { request } from '@/utils/request';
-import styles from './index.module.css';
 import Empty from '@/components/Empty';
 
+interface TablePaginationConfig { pagesize: number; page: number; }
+
+/** Props interface for Table component */
 interface TableComponentProps extends Omit<TableProps, 'pagination'> {
+  /** Table column definitions */
   columns: ColumnsType;
+  /** API endpoint URL for data fetching */
   apiUrl?: string;
+  /** Query parameters for API request */
   apiParams?: Record<string, unknown>;
+  /** Pagination configuration or boolean to enable/disable */
   pagination?: boolean | TablePaginationConfig;
+  /** Key to use for row identification */
   rowKey: string;
+  /** Row selection configuration */
   rowSelection?: TableProps['rowSelection'];
+  /** Initial data to display (used when no API) */
   initialData?: Record<string, unknown>[];
+  /** Size of empty state icon */
   emptySize?: number;
+  /** Custom empty state text */
   emptyText?: string;
+  /** Whether to enable scroll */
   isScroll?: boolean;
-  scrollX?: number | string | true; // 支持自定义横向滚动宽度
-  scrollY?: number | string; // 支持自定义纵向滚动高度
+  /** Custom horizontal scroll width */
+  scrollX?: number | string | true;
+  /** Custom vertical scroll height */
+  scrollY?: number | string;
+  /** Key name for current page in API params */
   currentPageKey?: string;
 }
+
+/** Ref methods exposed to parent component */
 export interface TableRef {
+  /** Reload data from first page */
   loadData: () => void;
+  /** Fetch data with specific pagination */
   getList: (pageData: TablePaginationConfig) => void;
 }
 
+/** Filter out empty or invalid parameters from API request */
 const dealSo = (params: any) => {
   let so: any = {}
   Object.keys(params).forEach(key => {
@@ -38,7 +79,9 @@ const dealSo = (params: any) => {
 
   return so
 }
-const TableComponent = forwardRef<TableRef, TableComponentProps>(({
+
+/** Table component with pagination and API integration */
+const RbTable = forwardRef<TableRef, TableComponentProps>(({
   columns,
   apiUrl,
   apiParams,
@@ -63,14 +106,14 @@ const TableComponent = forwardRef<TableRef, TableComponentProps>(({
   });
   const [total, setTotal] = useState(0);
 
+  /** Sync initial data when provided without API */
   useEffect(() => {
     if (initialData && !apiUrl) {
       setData(initialData)
     }
   }, [initialData, apiUrl])
 
-  // 数据加载
-  // 表格初始化
+  /** Initialize table and load data from first page */
   const loadData = () => {
     if (apiUrl) {
       getList({
@@ -79,7 +122,8 @@ const TableComponent = forwardRef<TableRef, TableComponentProps>(({
       })
     }
   }
-  // 获取数据
+  
+  /** Fetch data from API with pagination */
   const getList = (pageData: TablePaginationConfig) => {
     if (!apiUrl) {
       return
@@ -93,10 +137,10 @@ const TableComponent = forwardRef<TableRef, TableComponentProps>(({
       params = { ...params, ...pageData, [currentPageKey]: pageData.page}
     }
     setLoading(true)
-    // 构建查询参数并调用API
+    /** Build query parameters and call API */
     request.get(apiUrl, params)
       .then((res: any) => {
-        // 支持两种响应格式：直接返回 total 或在 page 对象中返回
+        /** Support two response formats: direct total or total in page object */
         const totalCount = res.page?.total ?? res.total ?? 0;
         setTotal(totalCount)
         setData(Array.isArray(res.items) ? res.items : Array.isArray(res.hosts) ? res.hosts : Array.isArray(res.list) ? res.list : res || [])
@@ -107,20 +151,21 @@ const TableComponent = forwardRef<TableRef, TableComponentProps>(({
         setLoading(false)
       })
   }
-  // 初始化和apiParams变化时重新加载数据
+  
+  /** Reload data when initialized or apiParams changes */
   useEffect(() => {
     loadData()
   }, [apiParams])
 
-  // 分页相关
-  // 切换分页
+  /** Handle page change event */
   const handlePageChange = (page: number, pagesize: number) => {
     getList({
       page: page,
       pagesize
     })
   }
-  // 分页配置
+  
+  /** Pagination configuration with i18n support */
   const paginationConfig = pagination ? ({
     ...(typeof pagination === 'object' ? pagination : {}),
     ...currentPagination,
@@ -132,19 +177,19 @@ const TableComponent = forwardRef<TableRef, TableComponentProps>(({
   }) : false;
 
 
-  // 暴露给父组件的方法
+  /** Expose loadData and getList methods to parent component via ref */
   useImperativeHandle(ref, () => ({
     loadData,
     getList,
   }));
 
-  // 计算 scroll 配置
+  /** Calculate scroll configuration based on props */
   const getScrollConfig = () => {
     if (!isScroll && !scrollX && !scrollY) return undefined;
     
     const config: { x?: number | string | true; y?: number | string } = {};
     
-    // 只有在有数据时才应用横向滚动
+    /** Only apply horizontal scroll when there is data */
     if (scrollX !== undefined && data.length > 0) {
       config.x = scrollX;
     } else if (isScroll) {
@@ -169,8 +214,7 @@ const TableComponent = forwardRef<TableRef, TableComponentProps>(({
       dataSource={data}
       pagination={paginationConfig}
       rowSelection={rowSelection}
-      rowClassName={styles.row}
-      className={styles.table}
+      rowClassName="rb:text-[#5B6167]"
       locale={{ emptyText: <Empty size={emptySize} subTitle={emptyText} /> }}
       scroll={getScrollConfig()}
       tableLayout="auto"
@@ -178,4 +222,4 @@ const TableComponent = forwardRef<TableRef, TableComponentProps>(({
   );
 });
 
-export default TableComponent;
+export default RbTable;