docs: add comments to the src/components directory

web/src/components/FormItem/DescWrapper.tsx

@@ -1,6 +1,25 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-02 15:05:16 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-02 15:05:16 
+ */
+/**
+ * DescWrapper Component
+ * 
+ * A styled wrapper for displaying description text in forms.
+ * Provides consistent typography and styling for form field descriptions.
+ * 
+ * @component
+ */
+
 import clsx from "clsx";
 import type { FC, ReactNode } from "react";
 
+/**
+ * @param desc - Description content (string or React node)
+ * @param className - Additional CSS classes for customization
+ */
 const DescWrapper: FC<{desc: string | ReactNode, className?: string}> = ({desc, className}) => {
   return (
     <div className={clsx(className, "rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4 ")}>

web/src/components/FormItem/LabelWrapper.tsx

@@ -1,9 +1,30 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-02 15:05:41 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-02 15:05:41 
+ */
+/**
+ * LabelWrapper Component
+ * 
+ * A styled wrapper for displaying form field labels with optional child content.
+ * Provides consistent typography and layout for form labels.
+ * 
+ * @component
+ */
+
 import clsx from "clsx";
 import type { FC, ReactNode } from "react";
 
+/**
+ * @param title - Label text or React node to display
+ * @param className - Additional CSS classes for customization
+ * @param children - Optional child content to render below the label
+ */
 const LabelWrapper: FC<{ title: string | ReactNode, className?: string; children?: ReactNode}> = ({title, className, children}) => {
   return (
     <div className={clsx(className)}>
+      {/* Label title with consistent styling */}
       <div className="rb:text-[14px] rb:font-medium rb:leading-5">{title}</div>
       {children}
     </div>

web/src/components/FormItem/SwitchFormItem.tsx

@@ -1,17 +1,36 @@
-import { Switch, Form, ConfigProvider } from "antd";
-import useSize from 'antd/lib/config-provider/hooks/useSize'
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-02 15:06:24 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-02 15:50:49
+ */
+/**
+ * SwitchFormItem Component
+ * 
+ * A form item component that combines a switch control with a label and optional description.
+ * Provides a consistent layout for switch-based form fields.
+ * 
+ * @component
+ */
+
+import { Switch, Form } from "antd";
 import type { FC, ReactNode } from "react";
-import { useContext } from "react";
 
 import LabelWrapper from './LabelWrapper'
 import DescWrapper from './DescWrapper'
 
 interface SwitchFormItemProps {
+  /** Label text or React node */
   title: string | ReactNode;
+  /** Optional description text or React node */
   desc?: string | ReactNode;
+  /** Form field name (string or nested path array) */
   name: string | string[];
+  /** Switch size */
   size?: 'small' | 'default'
+  /** Additional CSS classes */
   className?: string;
+  /** Whether the switch is disabled */
   disabled?: boolean;
 }
 
@@ -23,14 +42,13 @@ const SwitchFormItem: FC<SwitchFormItemProps> = ({
   className,
   disabled
 }) => {
-  const componentSize = useSize()
-  console.log('componentSize', componentSize)
-  
   return (
     <div className={`${className} rb:flex rb:items-center rb:justify-between`}>
+      {/* Label and description section */}
       <LabelWrapper title={title}>
         {desc && <DescWrapper desc={desc} className="rb:mt-2" />}
       </LabelWrapper>
+      {/* Switch control */}
       <Form.Item
         name={name}
         valuePropName="checked"