The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

src/inter.ts (1)

1-13: 命名不一致：接口使用 section，文档与样式使用 content，建议新增别名并标注弃用

DrawerClassNames/DrawerStyles 中是 section，但 README 与样式体系（如 -content）更贴近 “content”。为避免使用者困惑与类型不匹配，建议在类型上新增 content，并将 section 标注为 deprecated，保证向后兼容。

建议变更：

 export interface DrawerClassNames {
   mask?: string;
   wrapper?: string;
-  section?: string;
+  /** @deprecated 请使用 `content` */
+  section?: string;
+  content?: string;
   resizableLine?: string;
 }

 export interface DrawerStyles {
-  mask?: React.CSSProperties;
-  wrapper?: React.CSSProperties;
-  section?: React.CSSProperties;
+  mask?: React.CSSProperties;
+  wrapper?: React.CSSProperties;
+  /** @deprecated 请使用 `content` */
+  section?: React.CSSProperties;
+  content?: React.CSSProperties;
   resizableLine?: React.CSSProperties;
 }

（如代码中有读取 section 的实现，建议同时支持 content ?? section。）

tsconfig.json (1)

16-16: 明确排除 .dumi 目录，避免被通配重新包含

当前 include 使用 "/*.ts"、"/*.tsx" 会再次把 .dumi 目录纳入编译范围。若期望排除 .dumi（以及构建产物），建议补充 exclude，提高 ts 编译性能并避免噪音类型报错。

建议变更：

-  "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"]
+  "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": [".dumi", "node_modules", "dist"]

src/inter.ts (1)

5-5: 新增 resizableLine 类型后请同步 README 的 classNames/styles 说明

接口已增加 resizableLine?: string 与 resizableLine?: React.CSSProperties，但 README 的 API 表格中 classNames 与 styles 的对象结构未包含该键，文档与实现不一致，建议同步更新文档。

我可以附带一段 README 的表格更新 diff，是否需要我起一个跟进 PR？

Also applies to: 12-12

README.md (3)

47-48: 补充 resizableLine 的类型说明，保持与代码一致

classNames/styles 的类型签名未包含 resizableLine，与 src/inter.ts 定义不一致，建议补上：

建议变更（文档示意）：

-| classNames      | { mask?: string; content?: string; wrapper?: string; }                      | -                                      | pass className to target area                                                 |
-| styles          | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | -                                      | pass style to target area                                                     |
+| classNames      | { mask?: string; content?: string; wrapper?: string; resizableLine?: string; }                      | - | pass className to target area |
+| styles          | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; resizableLine?: CSSProperties; } | - | pass style to target area |

---

55-55: 文档类型更精确：placement 可标注为联合类型

代码侧已导出 Placement 类型（如 PR 摘要所述），文档仍是 string。建议文档同步为更精确的联合类型（'left' | 'right' | 'top' | 'bottom' 或引用 Placement），提升消费者可读性。

---

59-59: 拼写错误：React.createElement

React.creactElement 应为 React.createElement。

建议变更：

- | getContainer    | string \| func \| HTMLElement                                               | `body`                                 | Return the mount node for Drawer. if is `null` use React.creactElement        |
+ | getContainer    | string \| func \| HTMLElement                                               | `body`                                 | Return the mount node for Drawer. If it is `null`, use React.createElement    |

assets/index.less (3)

62-107: 提升可用性：防止拖拽时选中文本与多指缩放干扰

建议为可拖拽线增加 user-select: none 与 touch-action: none，在移动端和触摸板上会更稳。

建议变更：

   &-resizable-line {
     position: absolute;
     z-index: 2;
     pointer-events: auto;
+    user-select: none;
+    touch-action: none;

---

68-74: 避免硬编码品牌色，改为可配置变量

#1890ff 是 Ant Design v4 的主色，rc-drawer 作为独立库建议使用可配置变量，避免与主题脱钩。可新增局部变量，默认值保留原色以兼容。

建议变更：

+@resizer-active-color: #1890ff; // 可按需覆写
 ...
   &-resizable-line {
@@
-    &:hover {
-      background-color: #1890ff !important;
-    }
+    &:hover {
+      background-color: @resizer-active-color !important;
+    }
@@
-    &-dragging {
-      background-color: #1890ff !important;
-    }
+    &-dragging {
+      background-color: @resizer-active-color !important;
+    }

---

110-117: z-index 定义重复且数值不一致，建议统一

本文件前部 .@{prefixCls} 已设置 z-index: @zIndex（当前为 1050），此处再次设置为 9999。两处相同选择器的重复定义会以较晚出现者为准，建议统一到变量，避免维护困惑与潜在层级问题。

建议其一（更易维护）：改为使用变量

-  z-index: 9999;
+  z-index: @zIndex;

建议其二（若确需抬高层级）：统一在顶部提升变量值

-@zIndex: 1050;
+@zIndex: 9999;

请确认期望行为，并选择其一。

docs/demo/resizable.md (1)

2-2: 标题大小写与导航不一致，建议统一

Front matter 中的 title 为小写“resizable”，而 nav.title 为“Resizable”。为保持文档一致性与站点导航显示统一，建议首字母大写。

-title: resizable
+title: Resizable

tests/index.spec.tsx (1)

479-516: 增强用例稳定性并覆盖回调行为断言

• 使用 getContainer={false}，减少与 Portal/文档滚动相关的偶发性影响。
• 将拖拽序列包裹在 act 中，避免 React 状态更新告警。
• 覆盖 onResize/onResizeStart/onResizeEnd 回调是否触发及参数正确性的断言，提升行为验证完整性。

 it('should support resizable', () => {
-  const { unmount } = render(
-    <Drawer resizable open placement="left" width={200} />,
-  );
+  const onResizeStart = jest.fn();
+  const onResize = jest.fn();
+  const onResizeEnd = jest.fn();
+  const { unmount } = render(
+    <Drawer
+      resizable
+      open
+      placement="left"
+      width={200}
+      getContainer={false}
+      onResizeStart={onResizeStart}
+      onResize={onResize}
+      onResizeEnd={onResizeEnd}
+    />,
+  );

   // Mock getBoundingClientRect for the content wrapper to simulate real DOM dimensions
   const contentWrapper = document.querySelector(
     '.rc-drawer-content-wrapper',
   ) as HTMLElement;
   const mockGetBoundingClientRect = jest.fn(
     () =>
       ({
         width: 200,
         height: 400,
         top: 0,
         left: 0,
         bottom: 400,
         right: 200,
         x: 0,
         y: 0,
         toJSON: () => ({}),
       }) as DOMRect,
   );
   contentWrapper.getBoundingClientRect = mockGetBoundingClientRect;

   const resizableLine = document.querySelector('.rc-drawer-resizable-line');
   expect(resizableLine).toBeTruthy();

-  // Simulate drag from 200px to 100px (should reduce width by 100px)
-  fireEvent.mouseDown(resizableLine, { clientX: 200 });
-  fireEvent.mouseMove(document, { clientX: 100, clientY: 0 });
-  fireEvent.mouseUp(document, { clientX: 100, clientY: 0 });
+  // Simulate drag from 200px to 100px (should reduce width by 100px)
+  act(() => {
+    fireEvent.mouseDown(resizableLine!, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 100, clientY: 0 });
+    fireEvent.mouseUp(document, { clientX: 100, clientY: 0 });
+  });

   expect(document.querySelector('.rc-drawer-content-wrapper')).toHaveStyle({
     width: '100px',
   });
+  expect(onResizeStart).toHaveBeenCalledTimes(1);
+  expect(onResize).toHaveBeenCalled();
+  // 最后一笔应为 100 宽度（或高度，取决于 placement）
+  expect(onResize).toHaveBeenLastCalledWith(100);
+  expect(onResizeEnd).toHaveBeenCalledTimes(1);
   unmount();
 });

docs/examples/resizable.tsx (3)

8-8: 建议优化类型导入路径

从'@/index'导入类型可能导致构建路径解析问题。建议使用相对路径或明确的包名导入。

-import type { Placement } from '@/index';
+import type { Placement } from 'rc-drawer';

---

42-42: key属性可能导致不必要的重新挂载

使用placement作为key会在每次placement变化时强制重新挂载Drawer组件，这可能不是期望的行为。考虑移除key属性或使用更稳定的标识符。

-key={placement}

---

47-52: 改进示例文案的用户体验

文案可以更清晰地说明调整大小的操作方式。

-<p>
-  You can drag the drawer edge to resize (only works when
-  &quot;Resizable&quot; is checked).
-</p>
+<p>
+  拖拽抽屉边缘可调整大小（仅在勾选"Resizable"时有效）。
+</p>

src/ResizableLine.tsx (4)

24-24: 重新考虑minSize默认值

默认minSize为100可能过大，特别是对于移动端或小屏幕设备。建议设置更小的默认值或根据方向动态调整。

-minSize = 100,
+minSize = 48,

---

82-84: maxSize验证逻辑可以简化

当前的maxSize检查有些冗余，可以简化条件判断。

-// Only apply maxSize if it's a valid positive number
-if (maxSize !== undefined && maxSize > 0 && newSize > maxSize) {
+if (maxSize && newSize > maxSize) {

---

100-112: handleMouseUp中的重复代码

与handleMouseDown中的父元素获取逻辑重复，建议提取为共用函数。

+const getParentSize = React.useCallback(() => {
+  const parentElement = lineRef.current?.parentElement;
+  if (!parentElement) return 0;
+  const rect = parentElement.getBoundingClientRect();
+  return isHorizontal ? rect.width : rect.height;
+}, [isHorizontal]);

 const handleMouseUp = React.useCallback(() => {
   if (isDragging) {
     onDraggingChange?.(false);
-    // Get the final size after resize
-    const parentElement = lineRef.current?.parentElement;
-    if (parentElement) {
-      const rect = parentElement.getBoundingClientRect();
-      const finalSize = isHorizontal ? rect.width : rect.height;
+    const finalSize = getParentSize();
+    if (finalSize > 0) {
       onResizeEnd?.(finalSize);
-    }
   }
-}, [isDragging, onResizeEnd, isHorizontal, onDraggingChange]);
+}, [isDragging, onResizeEnd, onDraggingChange, getParentSize]);

---

135-140: resizeLineStyle可以优化

style对象的构建可以更高效，避免每次渲染时创建新对象。

-const resizeLineStyle: React.CSSProperties = {
-  position: 'absolute',
-  zIndex: 2,
-  cursor: isHorizontal ? 'col-resize' : 'row-resize',
-  ...style,
-};
+const resizeLineStyle = React.useMemo<React.CSSProperties>(() => ({
+  position: 'absolute',
+  zIndex: 2,
+  cursor: isHorizontal ? 'col-resize' : 'row-resize',
+  ...style,
+}), [isHorizontal, style]);

src/DrawerPopup.tsx (1)

297-301: 状态初始化可以优化

建议为currentSize提供更明确的初始值，而不是undefined。

-const [currentSize, setCurrentSize] = React.useState<number>();
+const [currentSize, setCurrentSize] = React.useState<number | undefined>(undefined);

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

src/DrawerPopup.tsx (1)

358-362: overflow 设置为 'none' 是无效值，应按场景使用 'visible' 或 'hidden'

这里将 style.overflow 设为 'none'，CSS 不支持该值。若要让拖拽手柄（有 -3px 偏移）在 wrapper 外可见，应在 resizable 时使用 'visible'；而非 resizable 场景建议维持 'hidden'（与历史行为一致，避免 wrapper 出现滚动条）。

-    if (resizable) {
-      style.overflow = 'none';
-    } else {
-      style.overflow = 'auto';
-    }
+    if (resizable) {
+      style.overflow = 'visible';
+    } else {
+      style.overflow = 'hidden';
+    }

assets/index.less (1)

62-107: 拖拽手柄建议增强可用性与可访问性（触控/选择/命中区域）

当前手柄宽高为 6px，hover/dragging 才着色，缺少移动端和防选中文本的样式，实际交互可能较难命中并与内容选择冲突。

建议增强：

• 添加 touch-action: none; user-select: none; 避免移动端滚动/文本选择干扰。
• 默认 background-color: transparent，hover/dragging 再显色。
• 可考虑将热区扩大到 8–10px（按需）。

示例增补（可合入 &-resizable-dragger 基类内）：

 &-resizable-dragger {
   position: absolute;
   z-index: 2;
   pointer-events: auto;
+  background-color: transparent;
+  touch-action: none;
+  user-select: none;

src/inter.ts (1)

1-13: 新增 dragger 自定义入口命名与定位合理，建议补充注释以稳定 API 语义

新增 dragger?: string 与 dragger?: React.CSSProperties 能覆盖拖拽线的 className 与 style，命名与现有讨论一致。为便于下游理解与避免误用（与 handle/section 概念混淆），建议在接口上补充 JSDoc 注释，说明其仅作用于“可调整尺寸的分隔线/热区”。

示例注释（非必须）：

/** resizable 模式下的拖拽手柄（分隔线）容器样式/类名 */
dragger?: string;
dragger?: React.CSSProperties;

docs/examples/resizable.tsx (3)

14-19: 移除多余类型断言，直接类型化 buttons 数组

placement 的状态已是 Placement，此处对每一项使用 as Placement 属于冗余断言。直接在数组上声明类型更清晰安全。

-  const buttons = [
-    { placement: 'left' as Placement, label: 'Left Drawer' },
-    { placement: 'right' as Placement, label: 'Right Drawer' },
-    { placement: 'top' as Placement, label: 'Top Drawer' },
-    { placement: 'bottom' as Placement, label: 'Bottom Drawer' },
-  ];
+  const buttons: Array<{ placement: Placement; label: string }> = [
+    { placement: 'left', label: 'Left Drawer' },
+    { placement: 'right', label: 'Right Drawer' },
+    { placement: 'top', label: 'Top Drawer' },
+    { placement: 'bottom', label: 'Bottom Drawer' },
+  ];

---

42-42: 移除冗余断言

placement 已是 Placement 类型，无需再次断言。

-        placement={placement as Placement}
+        placement={placement}

---

30-36: 给按钮添加 type="button" 以避免在 Form 环境误触发提交

示例中按钮若被嵌入到 form 内，默认 type="submit" 可能触发表单提交。加上 type="button" 更稳妥。

-          <button
+          <button
+            type="button"
             key={placement}
             onClick={() => openDrawer(placement)}
             style={{ padding: '8px 16px' }}
           >

src/DrawerPopup.tsx (3)

347-366: 在拖拽时禁用过渡已处理，但建议对 width/height 的单位与数值混用做防御

当前在 currentSize 存在时用数值覆盖 width/height，与可能的字符串（如 '20vw'）互斥，这符合预期。但在开启拖拽后从一个字符串单位切换为纯数值时，视觉上会突然以 px 为单位进行变化，这是可接受的设计权衡。若要更平滑，可以在开始拖拽时解析并固定为像素基准（可选）。

---

298-313: maxSize 计算仅依赖 parentElement 尺寸，嵌套/inline 场景需再确认

wrapperRef.current.parentElement?.getBoundingClientRect() 在 getContainer={false} 或复杂嵌套下可能不是你期望的可用空间（例如父级有 padding/滚动容器）。建议后续结合实际容器（portal 容器或视口）确认，或暴露 maxSize/getMaxSize 参数以供高级用法覆盖。

---

416-417: 拖拽手柄无语义/无可访问性支持，建议增加角色与可见文本隐藏说明（可选）

可考虑为手柄添加 role="separator"、aria-orientation，并通过 aria-label 或 title 提示“拖拽以调整尺寸”。键盘可达的可调整大小（如使用左右/上下箭头）属于更高阶改进，可择机迭代。

src/hooks/useDrag.ts (1)

1-26: 建议新增 Pointer 事件支持以兼容触屏设备（可选）

当前仅监听 mouse 事件。实际在移动端/触摸屏上会缺乏交互。可以使用 Pointer 事件统一处理（pointerdown/move/up），或补充 touch* 事件。

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

src/DrawerPopup.tsx (2)

358-362: overflow 样式设置逻辑可能需要调整

当前实现中，resizable 为 true 时设置 overflow: 'visible'，这可能会导致内容溢出。建议保持 overflow: 'hidden'，因为内部内容区域已经有独立的滚动处理。

 if (resizable) {
-  style.overflow = 'visible';
+  style.overflow = 'hidden';
 } else {
   style.overflow = 'hidden';
 }

---

333-345: 容器引用传递问题会导致拖拽起始尺寸测量失败

当前通过 container: wrapperRef.current 传递的是值而非引用，首次渲染时 wrapperRef.current 为 null，这会导致 useDrag hook 内部无法正确获取容器元素，进而影响拖拽尺寸的计算。

修改为传递 ref 引用：

 const { dragElementProps, isDragging } = useDrag({
   prefixCls: `${prefixCls}-resizable`,
   direction: placement,
   className: drawerClassNames?.dragger,
   style: styles?.dragger,
   minSize: 0,
   maxSize,
   disabled: !resizable,
-  container: wrapperRef.current,
+  containerRef: wrapperRef,
   onResize: handleResize,
   onResizeStart: handleResizeStart,
   onResizeEnd: handleResizeEnd,
 });

同时需要更新 useDrag hook 的接口定义，将 container 参数改为 containerRef: React.RefObject<HTMLElement>。

src/DrawerPopup.tsx (3)

302-312: calculateMaxSize 可能在父容器未渲染时计算不准确

calculateMaxSize 方法依赖于父容器的尺寸，但在某些情况下（如初始渲染或父容器尺寸变化）可能获取不到准确的尺寸。建议添加边界检查和重试机制。

 const calculateMaxSize = React.useCallback(() => {
   if (wrapperRef.current) {
     const rect = wrapperRef.current.parentElement?.getBoundingClientRect();
+    if (!rect || rect.width === 0 || rect.height === 0) {
+      // 延迟重试，等待容器渲染完成
+      requestAnimationFrame(() => calculateMaxSize());
+      return;
+    }
     const newMaxSize =
       placement === 'left' || placement === 'right'
         ? (rect?.width ?? 0)
         : (rect?.height ?? 0);
     setMaxSize(newMaxSize);
   }
 }, [placement]);

---

368-370: 需要监听容器尺寸变化

当前仅在初始化时计算 maxSize，如果容器尺寸发生变化（如窗口大小调整），maxSize 不会更新。建议添加 ResizeObserver 监听容器尺寸变化。

 // Initialize maxSize calculation
 React.useEffect(() => {
   calculateMaxSize();
+  
+  if (!wrapperRef.current?.parentElement) return;
+  
+  const resizeObserver = new ResizeObserver(() => {
+    calculateMaxSize();
+  });
+  
+  resizeObserver.observe(wrapperRef.current.parentElement);
+  
+  return () => {
+    resizeObserver.disconnect();
+  };
 }, [calculateMaxSize]);

---

416-416: 拖拽手柄需要添加无障碍属性

拖拽手柄缺少必要的无障碍属性，如 role、aria-label 等，这会影响屏幕阅读器用户的使用体验。

-{resizable && <div {...dragElementProps} />}
+{resizable && (
+  <div 
+    {...dragElementProps}
+    role="separator"
+    aria-label="调整抽屉大小"
+    aria-orientation={placement === 'left' || placement === 'right' ? 'vertical' : 'horizontal'}
+    aria-valuemin={0}
+    aria-valuemax={maxSize}
+    aria-valuenow={currentSize}
+    tabIndex={0}
+  />
+)}

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

README.md (1)

74-76: onResize/Start/End 描述存在误导，建议更正措辞并明确返回参数含义

• onResize 的描述明显是从键盘事件复制而来，容易误解。
• 建议明确 size 的语义（px，且随 placement 决定是宽度或高度），并统一三者的触发时机说明。

可在 README 中对这三行做如下修改：

-| onResize           | (size: number) => void                                                      | -                                      | Trigger when mouse keyup on drawer panel
+| onResize           | (size: number) => void                                                      | -                                      | Fires while resizing via dragging. size is current width/height in px depending on placement.
-| onResizeStart      | () => void                                                                  | -                                      | Trigger when resize starts
+| onResizeStart      | () => void                                                                  | -                                      | Fires when resizing starts (mouse/touch down on the dragger).
-| onResizeEnd        | () => void                                                                  | -                                      | Trigger when resize ends
+| onResizeEnd        | () => void                                                                  | -                                      | Fires when resizing ends (mouse/touch up). Use onResize for latest size.

如实现里希望在结束时也拿到最终尺寸，可考虑将 onResizeEnd 的签名扩展为 (size: number) => void（需与实现保持一致后再改文档）。

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.