react-resize-demo 1.0.2 → 2.0.1

package/CHANGELOG.md

@@ -5,6 +5,99 @@
 格式基于 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.0.0/)，
 版本号遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/)。
 
+## [2.0.0] - 2026-01-10
+
+### 🎉 重大版本更新
+
+这是一个重大版本更新，包含架构重构、组件拆分、命名修正和打包优化等多项重要改进。
+
+### ✨ 新增
+
+- **模块化架构**
+  - 新增 `types/` 目录，集中管理所有 TypeScript 类型定义
+  - 新增 `utils/` 目录，统一管理工具函数和核心逻辑
+  - 新增 `components/shared/` 目录，存放共享的 Context 和 Hook
+
+- **组件拆分**
+  - 将组件拆分为独立的功能模块：
+    - `ResizePanelGroup/` - 容器组件，管理布局
+    - `ResizePanel/` - 面板组件，展示内容
+    - `ResizeHandle/` - 拖拽手柄组件，处理交互
+    - `shared/context` - 共享状态管理
+
+- **分层打包**
+  - 使用 `preserveModules` 保持源码目录结构
+  - 支持按需导入，更好的 Tree-shaking
+  - 提供 CJS 和 ESM 双格式支持
+  - 类型定义独立打包到 `dist/types/`
+
+- **命名修正**
+  - 修正所有命名：`Resizeable` → `Resizable`（正确拼写）
+  - 保留向后兼容的旧命名导出
+
+### 🔄 变更
+
+- **项目结构重构**
+  - `src/core/` → `src/utils/`（更语义化的命名）
+  - 组件从单一文件夹拆分为多个独立文件夹
+  - 所有 `.js` 文件转换为 `.ts`，完整的 TypeScript 支持
+
+- **打包产物结构**
+  ```
+  dist/
+  ├── index.js              # CJS 主入口
+  ├── esm/                  # ESM 模块
+  │   ├── index.js
+  │   ├── components/
+  │   ├── utils/
+  │   └── types/
+  ├── components/           # CJS 组件
+  ├── utils/                # CJS 工具
+  └── types/                # 类型定义
+  ```
+
+- **导入路径**
+  - 支持分层导入：
+    ```typescript
+    import { ResizablePanelGroup } from 'react-resize-demo';
+    import { ResizablePanel } from 'react-resize-demo/components/ResizePanel';
+    import { ResizeAbleCore } from 'react-resize-demo/utils';
+    import type { VirtualConfig } from 'react-resize-demo/types';
+    ```
+
+### 🔧 改进
+
+- **代码质量**
+  - 完整的 TypeScript 类型支持
+  - 移除所有 `@ts-expect-error` 注释
+  - 优化导入路径，更清晰的模块依赖
+
+- **开发体验**
+  - 更清晰的目录结构，便于维护
+  - 组件职责单一，易于扩展
+  - 统一的导出入口
+
+- **性能优化**
+  - 支持 Tree-shaking，按需导入减少打包体积
+  - 保持模块结构，优化构建性能
+
+### 📝 向后兼容
+
+- 保留了旧的导出名称（`ResizeablePanelGroup`、`ResizeablePanel` 等）
+- 主入口导入方式保持不变
+- 现有代码无需修改即可使用
+
+### 🚨 破坏性变更
+
+- 如果直接导入子模块路径，需要更新导入路径
+- 内部 API 结构发生变化，但公共 API 保持兼容
+
+### 📚 文档
+
+- 更新 README，反映新的架构和使用方式
+- 更新项目结构说明
+- 添加分层导入示例
+
 ## [1.0.3] - 2026-01-09
 
 ### 新增
@@ -73,4 +166,3 @@
 - 支持设置面板最小尺寸
 - 支持拖拽调整相邻面板的宽度/高度
 - 实现了级联调整：当面板达到最小值时，自动从相邻面板获取空间
-

package/README.md

@@ -1,42 +1,51 @@
 # react-resize-demo
 
-一个 React 可调整大小面板组件库，支持水平和垂直方向的布局调整。
+一个现代化的 React 可调整大小面板组件库，支持水平和垂直方向的布局调整，具备完整的 TypeScript 支持和模块化架构。
 
-## 特性
+**源码地址**: [https://gitee.com/zugechen/react-resize-demo](https://gitee.com/zugechen/react-resize-demo)
 
-- ✅ 支持水平和垂直方向的布局
-- ✅ 可拖拽调整相邻面板的宽度/高度
-- ✅ 支持设置面板最小尺寸
-- ✅ 级联调整：当面板达到最小值时，自动从相邻面板获取空间
-- ✅ 拖拽器与面板完全解耦，灵活可扩展
+## ✨ 特性
+
+- ✅ **双向布局**：支持水平和垂直方向的布局
+- ✅ **拖拽调整**：可拖拽调整相邻面板的宽度/高度
+- ✅ **最小尺寸**：支持设置面板最小尺寸限制
+- ✅ **级联调整**：当面板达到最小值时，自动从相邻面板获取空间
 - ✅ **虚拟化拖拽**：支持虚拟节点模式，拖拽时创建虚拟框架，提升性能
-- ✅ TypeScript 支持
+- ✅ **TypeScript**：完整的 TypeScript 类型支持
+- ✅ **模块化架构**：清晰的目录结构，支持按需导入
+- ✅ **Tree-shaking**：支持 Tree-shaking，减少打包体积
 
-## 安装
+## 📦 安装
 
 ```bash
 npm install react-resize-demo
+# 或
+yarn add react-resize-demo
+# 或
+pnpm add react-resize-demo
 ```
 
-## 使用
+## 🚀 快速开始
+
+### 基础用法
 
 ```tsx
-import { ResizeablePanelGroup, ResizeablePanel } from 'react-resize-demo';
+import { ResizablePanelGroup, ResizablePanel } from 'react-resize-demo';
 
 function App() {
   return (
     <div style={{ width: '100%', height: '500px' }}>
-      <ResizeablePanelGroup direction="horizontal">
-        <ResizeablePanel minSize={100} onResize={(width) => console.log(width)}>
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel minSize={100}>
           <div>Panel 1</div>
-        </ResizeablePanel>
-        <ResizeablePanel minSize={200}>
+        </ResizablePanel>
+        <ResizablePanel minSize={200}>
           <div>Panel 2</div>
-        </ResizeablePanel>
-        <ResizeablePanel minSize={300}>
+        </ResizablePanel>
+        <ResizablePanel minSize={300}>
           <div>Panel 3</div>
-        </ResizeablePanel>
-      </ResizeablePanelGroup>
+        </ResizablePanel>
+      </ResizablePanelGroup>
     </div>
   );
 }
@@ -45,17 +54,17 @@ function App() {
 ### 垂直布局
 
 ```tsx
-<ResizeablePanelGroup direction="vertical" style={{ height: '500px' }}>
-  <ResizeablePanel minSize={100}>
+<ResizablePanelGroup direction="vertical" style={{ height: '500px' }}>
+  <ResizablePanel minSize={100}>
     <div>顶部面板</div>
-  </ResizeablePanel>
-  <ResizeablePanel minSize={200}>
+  </ResizablePanel>
+  <ResizablePanel minSize={200}>
     <div>中间面板</div>
-  </ResizeablePanel>
-  <ResizeablePanel minSize={100}>
+  </ResizablePanel>
+  <ResizablePanel minSize={100}>
     <div>底部面板</div>
-  </ResizeablePanel>
-</ResizeablePanelGroup>
+  </ResizablePanel>
+</ResizablePanelGroup>
 ```
 
 ### 虚拟化模式
@@ -64,17 +73,17 @@ function App() {
 
 ```tsx
 // 启用虚拟化（使用默认样式）
-<ResizeablePanelGroup virtual={true}>
-  <ResizeablePanel minSize={100}>
+<ResizablePanelGroup virtual={true}>
+  <ResizablePanel minSize={100}>
     <div>Panel 1</div>
-  </ResizeablePanel>
-  <ResizeablePanel minSize={200}>
+  </ResizablePanel>
+  <ResizablePanel minSize={200}>
     <div>Panel 2</div>
-  </ResizeablePanel>
-</ResizeablePanelGroup>
+  </ResizablePanel>
+</ResizablePanelGroup>
 
 // 启用虚拟化（自定义样式）
-<ResizeablePanelGroup 
+<ResizablePanelGroup 
   virtual={true}
   virtualConfig={{
     style: { 
@@ -85,20 +94,75 @@ function App() {
     className: 'custom-virtual-node'
   }}
 >
-  <ResizeablePanel minSize={100}>
+  <ResizablePanel minSize={100}>
     <div>Panel 1</div>
-  </ResizeablePanel>
-  <ResizeablePanel minSize={200}>
+  </ResizablePanel>
+  <ResizablePanel minSize={200}>
     <div>Panel 2</div>
-  </ResizeablePanel>
-</ResizeablePanelGroup>
+  </ResizablePanel>
+</ResizablePanelGroup>
+```
+
+### 按需导入
+
+支持分层导入，实现更好的 Tree-shaking：
+
+```tsx
+// 从主入口导入（推荐）
+import { ResizablePanelGroup, ResizablePanel } from 'react-resize-demo';
+
+// 按需导入组件
+import { ResizablePanelGroup } from 'react-resize-demo/components/ResizePanelGroup';
+import { ResizablePanel } from 'react-resize-demo/components/ResizePanel';
+
+// 导入工具函数
+import { ResizeAbleCore } from 'react-resize-demo/utils';
+
+// 导入类型
+import type { VirtualConfig, ResizeDirection } from 'react-resize-demo/types';
+```
+
+## 🎮 运行 Demo
+
+要查看和体验完整的 demo 示例（包括虚拟化模式、性能对比等），请从源码运行：
+
+### 步骤
+
+1. **Clone 源码仓库**
+
+```bash
+git clone https://gitee.com/zugechen/react-resize-demo.git
+cd react-resize-demo
 ```
 
-## API
+2. **安装依赖**
 
-### ResizeablePanelGroup
+```bash
+npm install
+# 或
+pnpm install
+```
 
-面板组容器组件，用于包裹多个 `ResizeablePanel`。
+3. **启动 Demo**
+
+```bash
+npm run demo
+```
+
+这将启动一个开发服务器（默认端口 3000），你可以在浏览器中查看和测试所有功能示例。
+
+### Demo 包含的内容
+
+- ✅ 基础用法示例（水平/垂直布局）
+- ✅ 虚拟化模式演示
+- ✅ 性能对比测试
+- ✅ 复杂内容场景演示
+
+## 📖 API 文档
+
+### ResizablePanelGroup
+
+面板组容器组件，用于包裹多个 `ResizablePanel`。
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
@@ -106,6 +170,7 @@ function App() {
 | virtual | `boolean` | `false` | 是否启用虚拟化模式 |
 | virtualConfig | `VirtualConfig` | `{}` | 虚拟化配置（仅在 virtual=true 时生效） |
 | style | `React.CSSProperties` | - | 自定义样式 |
+| children | `React.ReactNode` | - | 子元素（通常是多个 ResizablePanel） |
 
 #### VirtualConfig
 
@@ -117,7 +182,7 @@ function App() {
 | style | `React.CSSProperties` | - | 虚拟节点的自定义样式 |
 | className | `string` | - | 虚拟节点的自定义类名 |
 
-### ResizeablePanel
+### ResizablePanel
 
 可调整大小的面板组件。
 
@@ -127,12 +192,65 @@ function App() {
 | onResize | `(width: number) => void` | - | 面板尺寸变化时的回调函数 |
 | children | `React.ReactNode` | - | 面板内容 |
 
-## 开发
+### Context & Hooks
+
+```tsx
+import { ResizableContext, useResizableContext } from 'react-resize-demo';
+
+// 在组件内部使用
+const { 
+  panelCount, 
+  registerPanel, 
+  unregisterPanel,
+  getPanelInfo,
+  direction,
+  virtualConfig 
+} = useResizableContext();
+```
+
+## 🏗️ 项目结构
+
+```
+react-resize-demo/
+├── src/                          # 源代码目录
+│   ├── components/               # 组件目录
+│   │   ├── ResizePanelGroup/     # 容器组件
+│   │   │   └── index.tsx
+│   │   ├── ResizePanel/          # 面板组件
+│   │   │   └── index.tsx
+│   │   ├── ResizeHandle/         # 拖拽手柄组件
+│   │   │   └── index.tsx
+│   │   ├── shared/               # 共享资源
+│   │   │   └── context.tsx       # Context 定义
+│   │   └── index.tsx             # 组件统一导出
+│   ├── utils/                    # 工具函数
+│   │   ├── resizeAble.ts         # 拖拽调整核心类
+│   │   ├── virtualNode.ts        # 虚拟节点管理模块
+│   │   └── index.ts              # 工具函数导出
+│   ├── types/                    # 类型定义
+│   │   └── index.ts              # 所有类型定义
+│   └── index.ts                  # 主入口文件
+├── demo/                         # 本地测试Demo
+│   ├── App.tsx                   # Demo应用
+│   └── ...
+├── dist/                         # 构建输出目录
+│   ├── index.js                  # CJS 主入口
+│   ├── esm/                      # ESM 模块
+│   ├── components/               # CJS 组件
+│   ├── utils/                    # CJS 工具
+│   └── types/                    # 类型定义
+├── rollup.config.mjs             # Rollup构建配置
+└── package.json                  # 项目配置
+```
+
+## 🔧 开发
 
 ### 安装依赖
 
 ```bash
 npm install
+# 或
+pnpm install
 ```
 
 ### 构建库
@@ -141,7 +259,7 @@ npm install
 npm run build
 ```
 
-### 运行本地Demo
+### 运行 Demo（开发模式）
 
 ```bash
 npm run demo
@@ -149,13 +267,31 @@ npm run demo
 
 这将启动一个开发服务器，你可以在浏览器中查看和测试组件。
 
-### 构建Demo
+### 构建 Demo（生产模式）
 
 ```bash
 npm run demo:build
 ```
 
-## 工作原理
+### 类型检查
+
+```bash
+npm run type-check
+```
+
+### 代码检查
+
+```bash
+npm run lint
+```
+
+### 监听模式构建
+
+```bash
+npm run build:watch
+```
+
+## 💡 工作原理
 
 组件通过拖拽器（ResizeHandle）来调整相邻面板的尺寸：
 - **向右拖拽**：扩大左侧面板，缩小右侧面板（如果右侧面板达到最小值，继续从后续面板获取空间）
@@ -175,83 +311,40 @@ npm run demo:build
 - 提供视觉反馈：虚拟节点可以有不同的样式（如半透明、虚线边框等）
 - 适用于复杂内容：当面板内容复杂时，虚拟化可以避免拖拽时的性能问题
 
-## 项目结构
-
-```
-react-resize-demo/
-├── src/                      # 源代码目录
-│   ├── components/           # 组件目录
-│   │   ├── ResizePanel/      # 可调整大小面板组件
-│   │   └── ExampleComponent/ # 示例组件
-│   ├── core/                  # 核心逻辑
-│   │   ├── resizeAble.js      # 拖拽调整核心类
-│   │   └── virtualNode.js     # 虚拟节点管理模块
-│   ├── utils/                 # 工具函数
-│   ├── types/                 # 类型定义
-│   └── index.ts              # 入口文件
-├── demo/                      # 本地测试Demo
-│   ├── App.tsx                # Demo应用
-│   ├── main.tsx               # Demo入口
-│   └── index.html             # HTML模板
-├── dist/                      # 构建输出目录
-├── rollup.config.mjs          # Rollup构建配置
-├── vite.config.ts             # Vite库构建配置
-├── vite.demo.config.ts         # Vite Demo配置
-├── CHANGELOG.md               # 变更日志
-└── package.json               # 项目配置
-```
-
-## 开发
-
-### 安装依赖
-
-```bash
-npm install
-```
-
-### 构建库
-
-```bash
-npm run build
-```
+## 🔄 迁移指南
 
-### 运行本地Demo
-
-```bash
-npm run demo
-```
+### 从 1.x 升级到 2.0
 
-这将启动一个开发服务器，你可以在浏览器中查看和测试组件。
+2.0 版本保持了向后兼容，现有代码无需修改即可使用：
 
-### 构建Demo
+```tsx
+// ✅ 仍然可用（向后兼容）
+import { ResizeablePanelGroup, ResizeablePanel } from 'react-resize-demo';
 
-```bash
-npm run demo:build
+// ✅ 推荐使用新的正确拼写
+import { ResizablePanelGroup, ResizablePanel } from 'react-resize-demo';
 ```
 
-### 类型检查
-
-```bash
-npm run type-check
-```
+### 新功能
 
-### 代码检查
+如果你想要使用新的分层导入功能：
 
-```bash
-npm run lint
+```tsx
+// 按需导入，更好的 Tree-shaking
+import { ResizablePanelGroup } from 'react-resize-demo/components/ResizePanelGroup';
+import { ResizablePanel } from 'react-resize-demo/components/ResizePanel';
 ```
 
-## 版本历史
+## 📝 版本历史
 
 查看 [CHANGELOG.md](./CHANGELOG.md) 了解详细的版本变更历史。
 
-## 发布到npm
+## 📄 License
 
-1. 确保代码已构建：`npm run build`
-2. 更新版本号：`npm version patch|minor|major`
-3. 发布：`npm publish`
+MIT
 
-## License
+## 🤝 贡献
 
-MIT
+欢迎提交 Issue 和 Pull Request！
 
+**源码仓库**: [https://gitee.com/zugechen/react-resize-demo](https://gitee.com/zugechen/react-resize-demo)

package/dist/components/ResizeHandle/index.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var resizeAble = require('../../utils/resizeAble.js');
+var context = require('../shared/context.js');
+
+const ResizeHandle = ({ prePanelIndex, nextPanelIndex, direction, }) => {
+    const handleRef = React.useRef(null);
+    const coreInstanceRef = React.useRef(null);
+    const { getPanelInfo, panelCount, virtualConfig } = context.useResizableContext();
+    React.useEffect(() => {
+        // 确保所需的面板索引都已注册
+        // 需要确保 nextPanelIndex 对应的面板已经注册（因为索引从0开始，所以需要 >= nextPanelIndex + 1）
+        if (panelCount <= nextPanelIndex || !handleRef.current) {
+            return;
+        }
+        const prePanelInfo = getPanelInfo(prePanelIndex);
+        const nextPanelInfo = getPanelInfo(nextPanelIndex);
+        if (!prePanelInfo || !nextPanelInfo)
+            return;
+        // 获取拖拽器的尺寸
+        const handleSize = handleRef.current
+            ? (direction === 'horizontal'
+                ? handleRef.current.offsetWidth
+                : handleRef.current.offsetHeight)
+            : (direction === 'horizontal' ? 10 : 10); // 默认10px
+        coreInstanceRef.current = new resizeAble.default({
+            prePanelEl: prePanelInfo.panelEl,
+            nextPanelEl: nextPanelInfo.panelEl,
+            getPanelInfo,
+            prePanelIndex,
+            nextPanelIndex,
+            direction,
+            virtualEnabled: virtualConfig.enabled || false,
+            virtualConfig: {
+                style: virtualConfig.style,
+                className: virtualConfig.className,
+            },
+            handleSize, // 传递拖拽器尺寸
+        });
+        // 将拖拽器的开始/移动/结束事件绑定至核心类
+        const handleEl = handleRef.current;
+        let isResizing = false;
+        let startPos = 0;
+        const startResize = (e) => {
+            e.preventDefault();
+            isResizing = true;
+            startPos = direction === 'horizontal' ? e.clientX : e.clientY;
+            if (coreInstanceRef.current) {
+                coreInstanceRef.current.startResize();
+            }
+        };
+        const onResizeMove = (e) => {
+            if (!isResizing || !coreInstanceRef.current)
+                return;
+            const currentPos = direction === 'horizontal' ? e.clientX : e.clientY;
+            const delta = currentPos - startPos;
+            coreInstanceRef.current.onResize(delta);
+        };
+        const endResize = () => {
+            if (isResizing && coreInstanceRef.current) {
+                isResizing = false;
+                coreInstanceRef.current.endResize();
+            }
+        };
+        handleEl.addEventListener('mousedown', startResize);
+        document.addEventListener('mousemove', onResizeMove);
+        document.addEventListener('mouseup', endResize);
+        return () => {
+            handleEl.removeEventListener('mousedown', startResize);
+            document.removeEventListener('mousemove', onResizeMove);
+            document.removeEventListener('mouseup', endResize);
+            if (coreInstanceRef.current) {
+                coreInstanceRef.current.destroy();
+            }
+        };
+    }, [prePanelIndex, nextPanelIndex, direction, getPanelInfo, panelCount, virtualConfig]);
+    const isHorizontal = direction === 'horizontal';
+    return (jsxRuntime.jsx("div", { ref: handleRef, style: {
+            position: 'relative',
+            width: isHorizontal ? '10px' : '100%',
+            height: isHorizontal ? '100%' : '10px',
+            backgroundColor: '#000',
+            cursor: isHorizontal ? 'ew-resize' : 'ns-resize',
+            zIndex: 1000,
+            flexShrink: 0,
+        } }));
+};
+
+exports.ResizeHandle = ResizeHandle;
+//# sourceMappingURL=index.js.map

package/dist/components/ResizeHandle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ResizeHandle/index.tsx"],"sourcesContent":["/**\r\n * 拖拽手柄组件\r\n * 负责处理面板之间的拖拽调整功能\r\n */\r\nimport React, { useRef, useEffect } from 'react';\r\nimport ResizeAbleCore from '../../utils/resizeAble';\r\nimport { useResizableContext } from '../shared/context';\r\nimport { ResizeDirection } from '../../types';\r\n\r\nexport interface ResizeHandleProps {\r\n    prePanelIndex: number;\r\n    nextPanelIndex: number;\r\n    direction: ResizeDirection;\r\n}\r\n\r\nexport const ResizeHandle: React.FC<ResizeHandleProps> = ({\r\n    prePanelIndex,\r\n    nextPanelIndex,\r\n    direction,\r\n}) => {\r\n    const handleRef = useRef<HTMLDivElement>(null);\r\n    const coreInstanceRef = useRef<InstanceType<typeof ResizeAbleCore> | null>(null);\r\n    const { getPanelInfo, panelCount, virtualConfig } = useResizableContext();\r\n\r\n    useEffect(() => {\r\n        // 确保所需的面板索引都已注册\r\n        // 需要确保 nextPanelIndex 对应的面板已经注册（因为索引从0开始，所以需要 >= nextPanelIndex + 1）\r\n        if (panelCount <= nextPanelIndex || !handleRef.current) {\r\n            return;\r\n        }\r\n        \r\n        const prePanelInfo = getPanelInfo(prePanelIndex);\r\n        const nextPanelInfo = getPanelInfo(nextPanelIndex);\r\n        if(!prePanelInfo || !nextPanelInfo) return;\r\n        \r\n        // 获取拖拽器的尺寸\r\n        const handleSize = handleRef.current \r\n            ? (direction === 'horizontal' \r\n                ? handleRef.current.offsetWidth \r\n                : handleRef.current.offsetHeight)\r\n            : (direction === 'horizontal' ? 10 : 10); // 默认10px\r\n        \r\n        coreInstanceRef.current = new ResizeAbleCore({\r\n            prePanelEl: prePanelInfo.panelEl,\r\n            nextPanelEl: nextPanelInfo.panelEl,\r\n            getPanelInfo,\r\n            prePanelIndex,\r\n            nextPanelIndex,\r\n            direction,\r\n            virtualEnabled: virtualConfig.enabled || false,\r\n            virtualConfig: {\r\n                style: virtualConfig.style,\r\n                className: virtualConfig.className,\r\n            },\r\n            handleSize, // 传递拖拽器尺寸\r\n        });\r\n\r\n        // 将拖拽器的开始/移动/结束事件绑定至核心类\r\n        const handleEl = handleRef.current;\r\n        let isResizing = false;\r\n        let startPos = 0;\r\n\r\n        const startResize = (e: MouseEvent) => {\r\n            e.preventDefault();\r\n            isResizing = true;\r\n            startPos = direction === 'horizontal' ? e.clientX : e.clientY;\r\n            if (coreInstanceRef.current) {\r\n                coreInstanceRef.current.startResize();\r\n            }\r\n        };\r\n        \r\n        const onResizeMove = (e: MouseEvent) => {\r\n            if(!isResizing || !coreInstanceRef.current) return;\r\n            const currentPos = direction === 'horizontal' ? e.clientX : e.clientY;\r\n            const delta = currentPos - startPos;\r\n            coreInstanceRef.current.onResize(delta);\r\n        };\r\n        \r\n        const endResize = () => {\r\n            if(isResizing && coreInstanceRef.current) {\r\n                isResizing = false;\r\n                coreInstanceRef.current.endResize();\r\n            }\r\n        }\r\n        \r\n        handleEl.addEventListener('mousedown', startResize);\r\n        document.addEventListener('mousemove', onResizeMove);\r\n        document.addEventListener('mouseup', endResize);\r\n        \r\n        return () => {\r\n            handleEl.removeEventListener('mousedown', startResize);\r\n            document.removeEventListener('mousemove', onResizeMove);\r\n            document.removeEventListener('mouseup', endResize);\r\n            if(coreInstanceRef.current) {\r\n                coreInstanceRef.current.destroy();\r\n            }\r\n        }\r\n    }, [prePanelIndex, nextPanelIndex, direction, getPanelInfo, panelCount, virtualConfig]);\r\n\r\n    const isHorizontal = direction === 'horizontal';\r\n    return (\r\n        <div\r\n            ref={handleRef}\r\n            style={{\r\n                position: 'relative',\r\n                width: isHorizontal ? '10px' : '100%',\r\n                height: isHorizontal ? '100%' : '10px',\r\n                backgroundColor: '#000',\r\n                cursor: isHorizontal ? 'ew-resize' : 'ns-resize',\r\n                zIndex: 1000,\r\n                flexShrink: 0,\r\n            }}\r\n        />\r\n    )\r\n};\r\n\r\n"],"names":["useRef","useResizableContext","useEffect","ResizeAbleCore","_jsx"],"mappings":"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"}

package/dist/components/ResizePanel/index.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var context = require('../shared/context.js');
+
+const ResizePanel = ({ children, minSize = 100,
+// onResize, // 暂时未使用，保留以备将来使用
+ }) => {
+    const panelRef = React.useRef(null);
+    const panelIndexRef = React.useRef(-1);
+    const { registerPanel, unregisterPanel, direction } = context.useResizableContext();
+    React.useEffect(() => {
+        if (!panelRef.current)
+            return;
+        const panelEl = panelRef.current;
+        panelIndexRef.current = registerPanel(panelEl, minSize);
+        return () => {
+            unregisterPanel(panelEl);
+        };
+    }, [minSize, registerPanel, unregisterPanel]);
+    return (jsxRuntime.jsx("div", { ref: panelRef, style: {
+            flex: 1,
+            minWidth: direction === 'horizontal' ? minSize : undefined,
+            minHeight: direction === 'vertical' ? minSize : undefined,
+            width: 'auto',
+            overflow: 'hidden',
+            position: 'relative',
+        }, children: jsxRuntime.jsx("div", { style: { height: '100%', padding: 16 }, children: children }) }));
+};
+
+exports.ResizePanel = ResizePanel;
+//# sourceMappingURL=index.js.map