///
/**
* 可拖拽两栏(左结果 / 右详情)宽度的 hook。
*
* 设计要点:
* - **按「占比」而非绝对像素**存储右栏宽度。低代码宿主会给 `document.body`
* 施加 `transform: scale(...)`,鼠标 `clientX` 与元素 `getBoundingClientRect`
* 都在同一「视觉坐标系」里,二者相除得到的占比与缩放无关,天然抵消缩放影响;
* - 拖拽期间在 body 上临时锁 `user-select` / `cursor`,避免选中文本、光标乱跳;
* - 通过 min/max 占比夹取,避免某一栏被拖到 0。
*/
export interface UseResizablePaneOptions {
/** 初始右栏占比(0~1) @default 0.34 */
initialRatio?: number;
/** 右栏最小占比 @default 0.24 */
minRatio?: number;
/** 右栏最大占比 @default 0.6 */
maxRatio?: number;
}
export interface UseResizablePaneResult {
/** 右栏当前占比(0~1) */
ratio: number;
/** 右栏宽度百分比字符串,可直接用于 style.width / flexBasis(如 '34%') */
rightWidth: string;
/** 绑定到「两栏容器」上的 ref(用于换算鼠标位置 → 占比) */
containerRef: React.RefObject;
/** 绑定到分隔条的 onMouseDown */
onResizerMouseDown: (e: React.MouseEvent) => void;
/** 是否正在拖拽(可用于给分隔条加高亮态) */
resizing: boolean;
}
export declare function useResizablePane(options?: UseResizablePaneOptions): UseResizablePaneResult;