docs: add comments to the src/components directory

web/src/components/SliderInput/index.tsx

@@ -1,19 +1,52 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-02 15:26:44 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-02 15:26:44 
+ */
+/**
+ * SliderInput Component
+ * 
+ * A combined slider and input number component for precise value control:
+ * - Synchronized slider and input number
+ * - Value range validation
+ * - Optional label and marks
+ * - Customizable tooltip
+ * - Disabled state support
+ * 
+ * @component
+ */
+
 import { useState, useEffect, type FC } from 'react';
 import { Slider, InputNumber, Row, Col } from 'antd';
 
+/** Props interface for SliderInput component */
 interface SliderInputProps {
+  /** Current value */
   value?: number;
+  /** Callback fired when value changes */
   onChange?: (value: number | null) => void;
+  /** Minimum value */
   min?: number;
+  /** Maximum value */
   max?: number;
+  /** Step increment */
   step?: number;
+  /** Default value */
   defaultValue?: number;
+  /** Whether the component is disabled */
   disabled?: boolean;
+  /** Optional label text */
   label?: string;
+  /** Additional CSS classes for container */
   className?: string;
+  /** Additional CSS classes for slider */
   sliderClassName?: string;
+  /** Additional CSS classes for input */
   inputClassName?: string;
+  /** Marks to display on slider */
   marks?: Record<number, string | { style: React.CSSProperties; label: string }>;
+  /** Tooltip configuration */
   tooltip?: {
     open?: boolean;
     placement?: 'top' | 'left' | 'right' | 'bottom';
@@ -21,6 +54,7 @@ interface SliderInputProps {
   };
 }
 
+/** Slider with input number component for precise value control */
 const SliderInput: FC<SliderInputProps> = ({
   value,
   onChange,
@@ -38,23 +72,26 @@ const SliderInput: FC<SliderInputProps> = ({
 }) => {
   const [internalValue, setInternalValue] = useState<number>(value ?? defaultValue);
 
+  /** Sync internal value when external value changes */
   useEffect(() => {
     if (value !== undefined && value !== internalValue) {
       setInternalValue(value);
     }
   }, [value]);
 
+  /** Handle slider value change */
   const handleSliderChange = (newValue: number) => {
     setInternalValue(newValue);
     onChange?.(newValue);
   };
 
+  /** Handle input number value change with range validation */
   const handleInputChange = (newValue: number | null) => {
     if (newValue === null) {
       return;
     }
     
-    // 确保值在范围内
+    /** Ensure value is within min/max range */
     let validValue = newValue;
     if (newValue < min) {
       validValue = min;
@@ -68,12 +105,14 @@ const SliderInput: FC<SliderInputProps> = ({
 
   return (
     <div className={`rb:w-full ${className}`}>
+      {/* Optional label */}
       {label && (
         <div className="rb:text-sm rb:font-medium rb:text-gray-700">
           {label}
         </div>
       )}
       <Row gutter={16} align="middle">
+        {/* Slider component */}
         <Col flex="auto">
           <Slider
             min={min}
@@ -87,6 +126,7 @@ const SliderInput: FC<SliderInputProps> = ({
             className={sliderClassName}
           />
         </Col>
+        {/* Input number component */}
         <Col flex="120px">
           <InputNumber
             min={min}