react-component · QdabuliuQ · Aug 11, 2025 · Aug 11, 2025 · Aug 12, 2025 · Aug 12, 2025
diff --git a/assets/index.less b/assets/index.less
@@ -30,7 +30,7 @@
   &-content-wrapper {
     position: absolute;
     z-index: @zIndex;
-    overflow: hidden;
+    // overflow: hidden;
     transition: transform @duration;
 
     &-hidden {
@@ -58,6 +58,53 @@
     background: #fff;
     pointer-events: auto;
   }
+
+  // Resizable styles
+  &-resizable-line {
+    position: absolute;
+    z-index: 1;
+    pointer-events: auto;
+
+    &:hover {
+      background-color: #1890ff !important;
+    }
+
+    &-dragging {
+      background-color: #1890ff !important;
+    }
+
+    &-left {
+      top: 0;
+      bottom: 0;
+      right: -3px;
+      width: 6px;
+      cursor: ew-resize;
+    }
+
+    &-right {
+      top: 0;
+      bottom: 0;
+      left: -3px;
+      width: 6px;
+      cursor: ew-resize;
+    }
+
+    &-top {
+      left: 0;
+      right: 0;
+      bottom: -3px;
+      height: 6px;
+      cursor: ns-resize;
+    }
+
+    &-bottom {
+      left: 0;
+      right: 0;
+      top: -3px;
+      height: 6px;
+      cursor: ns-resize;
+    }
+  }
 }
 
 // .@{drawer} {

diff --git a/docs/demo/resizable.md b/docs/demo/resizable.md
@@ -0,0 +1,8 @@
+---
+title: Resizable
+nav:
+  title: Resizable
+  path: /resizable
+---
+
+<code src="../examples/resizable.tsx"></code>
diff --git a/docs/examples/base.tsx b/docs/examples/base.tsx
@@ -20,7 +20,7 @@ const Demo = () => {
         afterOpenChange={(c: boolean) => {
           console.log('transitionEnd: ', c);
         }}
-        placement="right"
+        placement="top"
         // width={400}
         width="60%"
         // Motion

diff --git a/docs/examples/resizable.tsx b/docs/examples/resizable.tsx
@@ -0,0 +1,122 @@
+import {
+  AppstoreOutlined,
+  MailOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
+import { Menu } from 'antd';
+import * as React from 'react';
+
+import Drawer from 'rc-drawer';
+
+import 'antd/lib/menu/style';
+import 'antd/lib/style';
+
+import '../../assets/index.less';
+import './assets/index.less';
+import motionProps from './motion';
+
+const { SubMenu } = Menu;
+const MenuItemGroup = Menu.ItemGroup;
+
+export default () => {
+  const [open, setOpen] = React.useState(false);
+  const [placement, setPlacement] = React.useState<
+    'left' | 'right' | 'top' | 'bottom'
+  >('right');
+  const [resizable, setResizable] = React.useState(true);
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <button onClick={() => setOpen(true)} style={{ marginRight: 8 }}>
+          打开抽屉
+        </button>
+        <label style={{ marginRight: 8 }}>
+          <input
+            type="checkbox"
+            checked={resizable}
+            onChange={e => setResizable(e.target.checked)}
+          />
+          可拖拽调整大小
+        </label>
+        <span>位置：</span>
+        <select
+          value={placement}
+          onChange={e => setPlacement(e.target.value as any)}
+        >
+          <option value="left">左侧</option>
+          <option value="right">右侧</option>
+          <option value="top">顶部</option>
+          <option value="bottom">底部</option>
+        </select>
+      </div>
+      <Drawer
+        width={placement === 'left' || placement === 'right' ? 320 : undefined}
+        height={placement === 'top' || placement === 'bottom' ? 240 : undefined}
+        placement={placement}
+        open={open}
+        onClose={() => setOpen(false)}
+        resizable={resizable}
+        {...motionProps}
+      >
+        <Menu
+          defaultSelectedKeys={['1']}
+          defaultOpenKeys={['sub1']}
+          mode="inline"
+        >
+          <SubMenu
+            key="sub1"
+            title={
+              <span>
+                <MailOutlined />
+                <span>导航一</span>
+              </span>
+            }
+          >
+            <MenuItemGroup key="g1" title="分组1">
+              <Menu.Item key="1">选项1</Menu.Item>
+              <Menu.Item key="2">选项2</Menu.Item>
+            </MenuItemGroup>
+            <MenuItemGroup key="g2" title="分组2">
+              <Menu.Item key="3">选项3</Menu.Item>
+              <Menu.Item key="4">选项4</Menu.Item>
+            </MenuItemGroup>
+          </SubMenu>
+          <SubMenu
+            key="sub2"
+            title={
+              <span>
+                <AppstoreOutlined />
+                <span>导航二</span>
+              </span>
+            }
+          >
+            <Menu.Item key="5">选项5</Menu.Item>
+            <Menu.Item key="6">选项6</Menu.Item>
+            <SubMenu key="sub3" title="子菜单">
+              <Menu.Item key="7">选项7</Menu.Item>
+              <Menu.Item key="8">选项8</Menu.Item>
+            </SubMenu>
+          </SubMenu>
+          <SubMenu
+            key="sub4"
+            title={
+              <span>
+                <SettingOutlined />
+                <span>导航三</span>
+              </span>
+            }
+          >
+            <Menu.Item key="9">选项9</Menu.Item>
+            <Menu.Item key="10">选项10</Menu.Item>
+            <Menu.Item key="11">选项11</Menu.Item>
+            <Menu.Item key="12">选项12</Menu.Item>
+          </SubMenu>
+        </Menu>
+        <div style={{ marginTop: 24, color: '#888' }}>
+          <p>你可以拖拽抽屉边缘调整大小（仅在勾选“可拖拽调整大小”时生效）。</p>
+        </div>
+      </Drawer>
+    </div>
+  );
+};
diff --git a/src/Drawer.tsx b/src/Drawer.tsx
@@ -26,6 +26,11 @@ export interface DrawerProps
   panelRef?: React.Ref<HTMLDivElement>;
   classNames?: DrawerClassNames;
   styles?: DrawerStyles;
+  /** 是否启用调整大小功能 */
+  resizable?: boolean;
+  onResize?: (size: number) => void;
+  onResizeStart?: () => void;
+  onResizeEnd?: () => void;
 }
 
 const Drawer: React.FC<DrawerProps> = props => {
@@ -48,6 +53,9 @@ const Drawer: React.FC<DrawerProps> = props => {
     onClick,
     onKeyDown,
     onKeyUp,
+    onResize,
+    onResizeStart,
+    onResizeEnd,
 
     // Refs
     panelRef,
@@ -114,6 +122,9 @@ const Drawer: React.FC<DrawerProps> = props => {
     onClick,
     onKeyDown,
     onKeyUp,
+    onResize,
+    onResizeStart,
+    onResizeEnd,
   };
   const drawerPopupProps = {
     ...props,

diff --git a/src/DrawerPopup.tsx b/src/DrawerPopup.tsx
@@ -11,6 +11,7 @@ import type {
   DrawerPanelEvents,
 } from './DrawerPanel';
 import DrawerPanel from './DrawerPanel';
+import ResizableLine from './ResizableLine';
 import { parseWidthHeight } from './util';
 import type { DrawerClassNames, DrawerStyles } from './inter';
 
@@ -75,6 +76,12 @@ export interface DrawerPopupProps
   // styles
   styles?: DrawerStyles;
   drawerRender?: (node: React.ReactNode) => React.ReactNode;
+
+  // resizable
+  resizable?: boolean;
+  onResize?: (size: number) => void;
+  onResizeStart?: () => void;
+  onResizeEnd?: () => void;
 }
 
 function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
@@ -120,9 +127,13 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
     onClick,
     onKeyDown,
     onKeyUp,
+    onResize,
+    onResizeStart,
+    onResizeEnd,
 
     styles,
     drawerRender,
+    resizable,
   } = props;
 
   // ================================ Refs ================================
@@ -280,6 +291,61 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
     onKeyUp,
   };
 
+  // ============================ Resizable ============================
+  const [currentSize, setCurrentSize] = React.useState<number>();
+  const [isDragging, setIsDragging] = React.useState(false);
+
+  const handleResize = React.useCallback(
+    (size: number) => {
+      setCurrentSize(size);
+      onResize?.(size);
+    },
+    [onResize],
+  );
+
+  const handleResizeStart = React.useCallback(() => {
+    setIsDragging(true);
+    onResizeStart?.();
+  }, [onResizeStart]);
+
+  const handleResizeEnd = React.useCallback(() => {
+    setIsDragging(false);
+    onResizeEnd?.();
+  }, [onResizeEnd]);
+
+  const dynamicWrapperStyle = React.useMemo(() => {
+    const style: React.CSSProperties = { ...wrapperStyle };
+
+    if (currentSize !== undefined && resizable) {
+      if (placement === 'left' || placement === 'right') {
+        style.width = currentSize;
+      } else {
+        style.height = currentSize;
+      }
+    }
+
+    if (resizable) {
+      style.overflow = 'none';
+    } else {
+      style.overflow = 'auto';
+    }
+
+    return style;
+  }, [wrapperStyle, currentSize, resizable, placement]);
+
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+  const [maxSize, setMaxSize] = React.useState(0);
+  React.useEffect(() => {
+    if (wrapperRef.current) {
+      const rect = wrapperRef.current.parentElement?.getBoundingClientRect();
+      setMaxSize(
+        placement === 'left' || placement === 'right'
+          ? (rect?.width ?? 0)
+          : (rect?.height ?? 0),
+      );
+    }
+  }, [wrapperRef.current]);
+
   const panelNode: React.ReactNode = (
     <CSSMotion
       key="panel"
@@ -311,18 +377,31 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
         );
         return (
           <div
+            ref={wrapperRef}
             className={classNames(
               `${prefixCls}-content-wrapper`,
               drawerClassNames?.wrapper,
-              motionClassName,
+              !isDragging && motionClassName,
             )}
             style={{
-              ...wrapperStyle,
+              ...dynamicWrapperStyle,
               ...motionStyle,
               ...styles?.wrapper,
             }}
             {...pickAttrs(props, { data: true })}
           >
+            <ResizableLine
+              prefixCls={`${prefixCls}-resizable`}
+              direction={placement}
+              resizable={resizable}
+              className={drawerClassNames?.resizableLine}
+              style={styles?.resizableLine}
+              minSize={0}
+              maxSize={maxSize}
+              onResize={handleResize}
+              onResizeStart={handleResizeStart}
+              onResizeEnd={handleResizeEnd}
+            />
             {drawerRender ? drawerRender(content) : content}
           </div>
         );