docs: add comments to the src/components directory

web/src/components/SearchInput/index.tsx

@@ -1,19 +1,49 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-02 15:24:23 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-02 15:24:23 
+ */
+/**
+ * SearchInput Component
+ * 
+ * A search input component with debounce and throttle support:
+ * - Configurable debounce delay for search optimization
+ * - Optional throttle mode for rate limiting
+ * - Search icon prefix
+ * - Clear button
+ * - Internationalized placeholder
+ * 
+ * @component
+ */
+
 import { useState, type FC, useCallback, useRef } from 'react';
 import { Input, type InputProps } from 'antd';
 import { useTranslation } from 'react-i18next';
+
 import searchIcon from '@/assets/images/search.svg'
 
+/** Props interface for SearchInput component */
 interface SearchInputProps {
+  /** Placeholder text */
   placeholder?: string;
+  /** Callback fired when search value changes */
   onSearch?: (value: string) => void;
+  /** Debounce delay in milliseconds (default: 300) */
   debounceDelay?: number;
+  /** Throttle delay in milliseconds (overrides debounce if set) */
   throttleDelay?: number;
+  /** Default input value */
   defaultValue?: string;
+  /** Custom styles */
   style?: Record<string, string | number>;
+  /** Additional CSS classes */
   className?: string;
+  /** Input size */
   size?: InputProps['size']
 }
 
+/** Search input component with debounce and throttle support */
 const SearchInput: FC<SearchInputProps> = ({
   placeholder,
   onSearch,
@@ -29,7 +59,7 @@ const SearchInput: FC<SearchInputProps> = ({
   const throttleRef = useRef<boolean>(false);
   const lastCallRef = useRef<number>(0);
 
-  // 防抖函数
+  /** Debounce function - delays callback execution until after delay period */
   const debounce = useCallback(<T extends (...args: any[]) => void>(callback: T, delay: number) => {
     return (...args: Parameters<T>) => {
       if (timerRef.current) {
@@ -41,7 +71,7 @@ const SearchInput: FC<SearchInputProps> = ({
     };
   }, []);
 
-  // 节流函数
+  /** Throttle function - limits callback execution to once per delay period */
   const throttle = useCallback(<T extends (...args: any[]) => void>(callback: T, delay: number) => {
     return (...args: Parameters<T>) => {
       const now = Date.now();
@@ -56,12 +86,12 @@ const SearchInput: FC<SearchInputProps> = ({
     };
   }, []);
 
-  // 处理输入变化
+  /** Handle input change with debounce or throttle based on configuration */
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     setValue(newValue);
 
-    // 根据是否设置了throttleDelay来决定使用防抖还是节流
+    /** Decide whether to use debounce or throttle based on throttleDelay setting */
     if (onSearch) {
       if (throttleDelay) {
         const throttledSearch = throttle(() => {