docs: add comments to the src/components directory

web/src/components/RbDrawer/index.tsx

@@ -3,14 +3,27 @@
  * @Version: 0.0.1
  * @Author: yujiangping
  * @Date: 2025-11-07 14:16:33
- * @LastEditors: yujiangping
- * @LastEditTime: 2025-11-27 20:02:46
+ * @LastEditors: ZhaoYing
+ * @LastEditTime: 2026-02-02 15:23:01 
  */
+/**
+ * RbDrawer Component
+ * 
+ * A customized drawer component that extends Ant Design's Drawer with:
+ * - Internal state management for open/close
+ * - Custom close button in header
+ * - Full-height flex layout for content
+ * - Automatic state synchronization with external control
+ * 
+ * @component
+ */
+
 import { type FC, useState, useEffect } from 'react'
 import { Button, Drawer, Space } from 'antd';
 import type { DrawerProps } from 'antd';
 import { CloseOutlined  } from '@ant-design/icons';
 
+/** Custom drawer component with internal state management and custom close button */
 const RbDrawer: FC<DrawerProps> =({
     children,
     size = 'large',
@@ -18,30 +31,32 @@ const RbDrawer: FC<DrawerProps> =({
     onClose,
     ...props
 }) => {
-  // 内部状态管理，组件内部完全控制 open 状态
+  /** Internal state management - component fully controls open state internally */
   const [internalOpen, setInternalOpen] = useState(false);
   
-  // 当外部 open 变化时，同步到内部状态
+  /** Sync internal state when external open prop changes */
   useEffect(() => {
     if (externalOpen !== undefined) {
       setInternalOpen(externalOpen);
     }
   }, [externalOpen]);
   
-  // 确保当外部 open 为 true 时，内部状态也同步为 true（处理重复打开的情况）
+  /** Ensure internal state syncs to true when external open is true (handles repeated opening) */
   useEffect(() => {
     if (externalOpen === true && !internalOpen) {
       setInternalOpen(true);
     }
   }, [externalOpen, internalOpen]);
 
+  /** Handle drawer close - updates internal state and notifies parent */
   const handleClose = (e: React.MouseEvent | React.KeyboardEvent) => {
-    // 更新内部状态，关闭抽屉
+    /** Update internal state to close drawer */
     setInternalOpen(false);
-    // 如果外部传入了 onClose，调用它通知外部
+    /** If external onClose is provided, call it to notify parent */
     onClose?.(e);
   }
 
+  /** Handle close button click */
   const handleButtonClose = (e: React.MouseEvent) => {
     handleClose(e);
   }
@@ -56,11 +71,13 @@ const RbDrawer: FC<DrawerProps> =({
       open={internalOpen}
       extra={
         <Space>
+          {/* Custom close button in header */}
           <Button type='text' icon={<CloseOutlined />} onClick={handleButtonClose}/>
         </Space>
       }
       {...props}
     >
+      {/* Full-height flex container for content */}
       <div className='rb:flex rb:flex-col rb:h-full'>
         {children}
       </div>