@baishuyun/ai-design 2.0.37 → 2.1.0-alpha.0

package/src/hooks/use-resizable-width.ts

@@ -1,129 +1,129 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-interface UseResizableWidthOptions {
-  /** 宽度范围 [min, max]，单位 px */
-  range: [number, number];
-  /** 初始宽度，未指定时取 range 上限 */
-  initialWidth?: number;
-  /** 反转拖拽方向：拖拽鼠标向右时宽度减小而非增大 */
-  invertDrag?: boolean;
-  /** localStorage 键名，用于持久化用户拖拽偏好。提供后会在 mount 时读取、drag end 时保存 */
-  storageKey?: string;
-}
-
-interface UseResizableWidthResult {
-  /** 当前宽度 */
-  width: number;
-  /** 拖拽手柄的 onMouseDown 处理器 */
-  handleMouseDown: (e: React.MouseEvent) => void;
-  /** 是否正在拖拽 */
-  isDragging: boolean;
-  /** 是否到达边缘（最小或最大值） */
-  isAtEdge: boolean;
-}
-
-/**
- * 支持通过拖拽调整宽度的 Hook
- * @param options 配置项：宽度范围、初始宽度
- * @returns 当前宽度、拖拽处理器、拖拽状态
- */
-export const useResizableWidth = ({
-  range,
-  initialWidth,
-  invertDrag,
-  storageKey,
-}: UseResizableWidthOptions): UseResizableWidthResult => {
-  const [minWidth, maxWidth] = range;
-
-  const resolveInitialWidth = (): number => {
-    if (storageKey) {
-      try {
-        const stored = localStorage.getItem(storageKey);
-        if (stored !== null) {
-          const parsed = Number(stored);
-          if (!Number.isNaN(parsed) && parsed >= minWidth && parsed <= maxWidth) {
-            return parsed;
-          }
-        }
-      } catch { /* localStorage unavailable */ }
-    }
-    return initialWidth ?? maxWidth;
-  };
-
-  const [width, setWidth] = useState<number>(resolveInitialWidth);
-  const [isDragging, setIsDragging] = useState(false);
-
-  const stateRef = useRef({
-    startX: 0,
-    startWidth: 0,
-  });
-
-  const handleMouseMove = useCallback(
-    (e: MouseEvent) => {
-      const delta = e.clientX - stateRef.current.startX;
-      const adjustedDelta = invertDrag ? -delta : delta;
-      const newWidth = Math.min(
-        Math.max(stateRef.current.startWidth + adjustedDelta, minWidth),
-        maxWidth
-      );
-
-      setWidth(newWidth);
-    },
-    [minWidth, maxWidth, invertDrag]
-  );
-
-  const hasDraggedRef = useRef(false);
-
-  const handleMouseUp = useCallback(() => {
-    setIsDragging(false);
-    hasDraggedRef.current = true;
-    document.body.style.userSelect = '';
-    document.removeEventListener('mousemove', handleMouseMove);
-    document.removeEventListener('mouseup', handleMouseUp);
-
-    window.dispatchEvent(new Event('resize'));
-    document.body.style.cursor = '';
-  }, [handleMouseMove]);
-
-  // Persist width to localStorage after drag ends
-  useEffect(() => {
-    if (!isDragging && hasDraggedRef.current && storageKey) {
-      try { localStorage.setItem(storageKey, String(width)); } catch { /* unavailable */ }
-    }
-  }, [isDragging, storageKey, width]);
-
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      setIsDragging(true);
-      stateRef.current = {
-        startX: e.clientX,
-        startWidth: width,
-      };
-      document.body.style.userSelect = 'none';
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-
-      document.body.style.cursor = 'col-resize'; // 设置全局拖拽光标
-    },
-    [width, handleMouseMove, handleMouseUp]
-  );
-
-  useEffect(() => {
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-      document.body.style.userSelect = '';
-
-      document.body.style.cursor = ''; // 清理光标样式
-    };
-  }, [handleMouseMove, handleMouseUp]);
-
-  const isAtEdge = width === minWidth || width === maxWidth;
-
-  return {
-    width,
-    handleMouseDown,
-    isDragging,
-    isAtEdge,
-  };
-};
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface UseResizableWidthOptions {
+  /** 宽度范围 [min, max]，单位 px */
+  range: [number, number];
+  /** 初始宽度，未指定时取 range 上限 */
+  initialWidth?: number;
+  /** 反转拖拽方向：拖拽鼠标向右时宽度减小而非增大 */
+  invertDrag?: boolean;
+  /** localStorage 键名，用于持久化用户拖拽偏好。提供后会在 mount 时读取、drag end 时保存 */
+  storageKey?: string;
+}
+
+interface UseResizableWidthResult {
+  /** 当前宽度 */
+  width: number;
+  /** 拖拽手柄的 onMouseDown 处理器 */
+  handleMouseDown: (e: React.MouseEvent) => void;
+  /** 是否正在拖拽 */
+  isDragging: boolean;
+  /** 是否到达边缘（最小或最大值） */
+  isAtEdge: boolean;
+}
+
+/**
+ * 支持通过拖拽调整宽度的 Hook
+ * @param options 配置项：宽度范围、初始宽度
+ * @returns 当前宽度、拖拽处理器、拖拽状态
+ */
+export const useResizableWidth = ({
+  range,
+  initialWidth,
+  invertDrag,
+  storageKey,
+}: UseResizableWidthOptions): UseResizableWidthResult => {
+  const [minWidth, maxWidth] = range;
+
+  const resolveInitialWidth = (): number => {
+    if (storageKey) {
+      try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored !== null) {
+          const parsed = Number(stored);
+          if (!Number.isNaN(parsed) && parsed >= minWidth && parsed <= maxWidth) {
+            return parsed;
+          }
+        }
+      } catch { /* localStorage unavailable */ }
+    }
+    return initialWidth ?? maxWidth;
+  };
+
+  const [width, setWidth] = useState<number>(resolveInitialWidth);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const stateRef = useRef({
+    startX: 0,
+    startWidth: 0,
+  });
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      const delta = e.clientX - stateRef.current.startX;
+      const adjustedDelta = invertDrag ? -delta : delta;
+      const newWidth = Math.min(
+        Math.max(stateRef.current.startWidth + adjustedDelta, minWidth),
+        maxWidth
+      );
+
+      setWidth(newWidth);
+    },
+    [minWidth, maxWidth, invertDrag]
+  );
+
+  const hasDraggedRef = useRef(false);
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    hasDraggedRef.current = true;
+    document.body.style.userSelect = '';
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+
+    window.dispatchEvent(new Event('resize'));
+    document.body.style.cursor = '';
+  }, [handleMouseMove]);
+
+  // Persist width to localStorage after drag ends
+  useEffect(() => {
+    if (!isDragging && hasDraggedRef.current && storageKey) {
+      try { localStorage.setItem(storageKey, String(width)); } catch { /* unavailable */ }
+    }
+  }, [isDragging, storageKey, width]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      setIsDragging(true);
+      stateRef.current = {
+        startX: e.clientX,
+        startWidth: width,
+      };
+      document.body.style.userSelect = 'none';
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+
+      document.body.style.cursor = 'col-resize'; // 设置全局拖拽光标
+    },
+    [width, handleMouseMove, handleMouseUp]
+  );
+
+  useEffect(() => {
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.userSelect = '';
+
+      document.body.style.cursor = ''; // 清理光标样式
+    };
+  }, [handleMouseMove, handleMouseUp]);
+
+  const isAtEdge = width === minWidth || width === maxWidth;
+
+  return {
+    width,
+    handleMouseDown,
+    isDragging,
+    isAtEdge,
+  };
+};

package/src/hooks/use-select-popover-position.ts

@@ -1,74 +1,74 @@
-import { useState, useCallback } from 'react';
-
-interface UseSelectPopoverPositionOptions {
-  estimatedHeight?: number;
-  gap?: number;
-  minWidth?: number;
-  zIndex?: number;
-}
-
-export function useSelectPopoverPosition(
-  triggerRef: React.RefObject<HTMLElement | null>,
-  options?: UseSelectPopoverPositionOptions,
-): {
-  popoverStyle: React.CSSProperties;
-  updatePopoverPosition: () => void;
-};
-
-export function useSelectPopoverPosition(
-  getTrigger: () => HTMLElement | null,
-  options?: UseSelectPopoverPositionOptions,
-): {
-  popoverStyle: React.CSSProperties;
-  updatePopoverPosition: () => void;
-};
-
-export function useSelectPopoverPosition(
-  triggerRefOrGetter:
-    | React.RefObject<HTMLElement | null>
-    | (() => HTMLElement | null),
-  options: UseSelectPopoverPositionOptions = {},
-) {
-  const {
-    estimatedHeight = 450,
-    gap = 4,
-    minWidth = 240,
-    zIndex = 9999,
-  } = options;
-
-  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
-
-  const getTrigger: () => HTMLElement | null =
-    typeof triggerRefOrGetter === 'function'
-      ? triggerRefOrGetter
-      : () => triggerRefOrGetter.current;
-
-  const updatePopoverPosition = useCallback(() => {
-    const trigger = getTrigger();
-    if (!trigger) return;
-
-    const rect = trigger.getBoundingClientRect();
-    const spaceBelow = window.innerHeight - rect.bottom - gap;
-    const spaceAbove = rect.top - gap;
-    const positionBelow =
-      spaceBelow >= estimatedHeight || spaceBelow >= spaceAbove;
-
-    setPopoverStyle({
-      position: 'fixed',
-      top: positionBelow ? rect.bottom + gap : undefined,
-      bottom: positionBelow
-        ? undefined
-        : window.innerHeight - rect.top + gap,
-      left: rect.left,
-      minWidth: Math.max(rect.width, minWidth),
-      maxHeight: Math.min(
-        estimatedHeight,
-        positionBelow ? spaceBelow : spaceAbove,
-      ),
-      zIndex,
-      pointerEvents: 'auto',
-    });
-  }, [getTrigger, estimatedHeight, gap, minWidth, zIndex]);
-
-  return { popoverStyle, updatePopoverPosition } as const;
-}
+import { useState, useCallback } from 'react';
+
+interface UseSelectPopoverPositionOptions {
+  estimatedHeight?: number;
+  gap?: number;
+  minWidth?: number;
+  zIndex?: number;
+}
+
+export function useSelectPopoverPosition(
+  triggerRef: React.RefObject<HTMLElement | null>,
+  options?: UseSelectPopoverPositionOptions,
+): {
+  popoverStyle: React.CSSProperties;
+  updatePopoverPosition: () => void;
+};
+
+export function useSelectPopoverPosition(
+  getTrigger: () => HTMLElement | null,
+  options?: UseSelectPopoverPositionOptions,
+): {
+  popoverStyle: React.CSSProperties;
+  updatePopoverPosition: () => void;
+};
+
+export function useSelectPopoverPosition(
+  triggerRefOrGetter:
+    | React.RefObject<HTMLElement | null>
+    | (() => HTMLElement | null),
+  options: UseSelectPopoverPositionOptions = {},
+) {
+  const {
+    estimatedHeight = 450,
+    gap = 4,
+    minWidth = 240,
+    zIndex = 9999,
+  } = options;
+
+  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
+
+  const getTrigger: () => HTMLElement | null =
+    typeof triggerRefOrGetter === 'function'
+      ? triggerRefOrGetter
+      : () => triggerRefOrGetter.current;
+
+  const updatePopoverPosition = useCallback(() => {
+    const trigger = getTrigger();
+    if (!trigger) return;
+
+    const rect = trigger.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom - gap;
+    const spaceAbove = rect.top - gap;
+    const positionBelow =
+      spaceBelow >= estimatedHeight || spaceBelow >= spaceAbove;
+
+    setPopoverStyle({
+      position: 'fixed',
+      top: positionBelow ? rect.bottom + gap : undefined,
+      bottom: positionBelow
+        ? undefined
+        : window.innerHeight - rect.top + gap,
+      left: rect.left,
+      minWidth: Math.max(rect.width, minWidth),
+      maxHeight: Math.min(
+        estimatedHeight,
+        positionBelow ? spaceBelow : spaceAbove,
+      ),
+      zIndex,
+      pointerEvents: 'auto',
+    });
+  }, [getTrigger, estimatedHeight, gap, minWidth, zIndex]);
+
+  return { popoverStyle, updatePopoverPosition } as const;
+}

package/src/hooks/use-shadow.ts

@@ -1,127 +1,127 @@
-import { useState, useEffect, useRef } from 'react';
-
-interface UseShadowOptions {
-  /** Shadow DOM挂载的根元素（默认挂到body） */
-  rootEl?: HTMLElement;
-  /** 要注入到Shadow DOM中的样式文本 */
-  style?: string;
-  /** Shadow内部容器的类名 */
-  containerClasses?: string[];
-  /** 包裹Shadow的外层元素类名 */
-  wrapperClasses?: string[];
-  /** 包裹元素的内联样式 */
-  wrapperStyle?: React.CSSProperties;
-
-  extraHtml?: string;
-
-  id: string;
-}
-
-/**
- * 通用的创建Shadow DOM的Hook
- * @param options 配置项：样式、根元素、类名等
- * @returns Shadow DOM内部的容器元素（用于React Portal挂载）
- */
-export const useShadow = ({
-  id,
-  style = '',
-  rootEl,
-  containerClasses = [],
-  wrapperClasses = [],
-  wrapperStyle = {},
-  extraHtml = '',
-}: UseShadowOptions): { shadowContainer: HTMLElement | null; destroy: () => void } => {
-  const [shadowContainer, setShadowContainer] = useState<HTMLElement | null>(null);
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    wrapperRef.current?.classList.add(...wrapperClasses);
-    shadowContainer?.classList.add(...containerClasses);
-  }, [wrapperClasses, containerClasses]);
-
-  useEffect(() => {
-    if (wrapperRef.current) {
-      Object.entries(wrapperStyle).forEach(([key, value]) => {
-        if (value !== undefined) {
-          // @ts-ignore
-          wrapperRef.current!.style[key as any] = value;
-        }
-      });
-    }
-  }, [wrapperStyle]);
-
-  useEffect(() => {
-    // Cleanup previous shadow container if it exists
-    if (wrapperRef.current && wrapperRef.current.parentNode) {
-      wrapperRef.current.parentNode.removeChild(wrapperRef.current);
-      wrapperRef.current = null;
-    }
-
-    try {
-      // 1. 创建外层包裹元素（挂载Shadow Root的载体）
-      const wrapperEl = document.createElement('div');
-      wrapperEl.classList.add(...wrapperClasses, 'wrapper');
-      // wrapperEl.style.height = '100%';
-      wrapperRef.current = wrapperEl;
-
-      // apply wrapper styles
-      Object.entries(wrapperStyle).forEach(([key, value]) => {
-        if (value !== undefined) {
-          // @ts-ignore
-          wrapperEl.style[key as any] = value;
-        }
-      });
-
-      // 2. 创建并挂载Shadow Root
-      const shadowRoot = wrapperEl.attachShadow({ mode: 'open' });
-
-      // 注入额外的HTML内容
-      if (extraHtml) {
-        shadowRoot.innerHTML = extraHtml;
-      }
-
-      // 3. 注入样式到Shadow DOM
-      if (style) {
-        const styleEl = document.createElement('style');
-        styleEl.textContent = style;
-        shadowRoot.appendChild(styleEl);
-      }
-
-      // 4. 创建Shadow内部的容器（最终挂载React Portal的元素）
-      const containerEl = document.createElement('div');
-      containerEl.classList.add(...containerClasses, 'shadow-container');
-      shadowRoot.appendChild(containerEl);
-
-      // 5. 将外层元素挂载到指定根节点
-      const mountRoot = rootEl || document.body;
-      mountRoot.appendChild(wrapperEl);
-
-      setShadowContainer(containerEl);
-    } catch (error) {
-      console.error('创建Shadow DOM失败:', error);
-      setShadowContainer(null);
-    }
-
-    // Cleanup on unmount or when rootEl changes
-    // return () => {
-    //   if (wrapperRef.current && wrapperRef.current.parentNode) {
-    //     wrapperRef.current.parentNode.removeChild(wrapperRef.current);
-    //     wrapperRef.current = null;
-    //   }
-    // };
-  }, [rootEl]); // Recreate when rootEl changes
-
-  if (shadowContainer) {
-    shadowContainer.id = id;
-  }
-
-  return {
-    shadowContainer,
-    destroy: () => {
-      if (wrapperRef.current && wrapperRef.current.parentNode) {
-        wrapperRef.current.parentNode.removeChild(wrapperRef.current);
-        wrapperRef.current = null;
-      }
-    },
-  };
-};
+import { useState, useEffect, useRef } from 'react';
+
+interface UseShadowOptions {
+  /** Shadow DOM挂载的根元素（默认挂到body） */
+  rootEl?: HTMLElement;
+  /** 要注入到Shadow DOM中的样式文本 */
+  style?: string;
+  /** Shadow内部容器的类名 */
+  containerClasses?: string[];
+  /** 包裹Shadow的外层元素类名 */
+  wrapperClasses?: string[];
+  /** 包裹元素的内联样式 */
+  wrapperStyle?: React.CSSProperties;
+
+  extraHtml?: string;
+
+  id: string;
+}
+
+/**
+ * 通用的创建Shadow DOM的Hook
+ * @param options 配置项：样式、根元素、类名等
+ * @returns Shadow DOM内部的容器元素（用于React Portal挂载）
+ */
+export const useShadow = ({
+  id,
+  style = '',
+  rootEl,
+  containerClasses = [],
+  wrapperClasses = [],
+  wrapperStyle = {},
+  extraHtml = '',
+}: UseShadowOptions): { shadowContainer: HTMLElement | null; destroy: () => void } => {
+  const [shadowContainer, setShadowContainer] = useState<HTMLElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    wrapperRef.current?.classList.add(...wrapperClasses);
+    shadowContainer?.classList.add(...containerClasses);
+  }, [wrapperClasses, containerClasses]);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+      Object.entries(wrapperStyle).forEach(([key, value]) => {
+        if (value !== undefined) {
+          // @ts-ignore
+          wrapperRef.current!.style[key as any] = value;
+        }
+      });
+    }
+  }, [wrapperStyle]);
+
+  useEffect(() => {
+    // Cleanup previous shadow container if it exists
+    if (wrapperRef.current && wrapperRef.current.parentNode) {
+      wrapperRef.current.parentNode.removeChild(wrapperRef.current);
+      wrapperRef.current = null;
+    }
+
+    try {
+      // 1. 创建外层包裹元素（挂载Shadow Root的载体）
+      const wrapperEl = document.createElement('div');
+      wrapperEl.classList.add(...wrapperClasses, 'wrapper');
+      // wrapperEl.style.height = '100%';
+      wrapperRef.current = wrapperEl;
+
+      // apply wrapper styles
+      Object.entries(wrapperStyle).forEach(([key, value]) => {
+        if (value !== undefined) {
+          // @ts-ignore
+          wrapperEl.style[key as any] = value;
+        }
+      });
+
+      // 2. 创建并挂载Shadow Root
+      const shadowRoot = wrapperEl.attachShadow({ mode: 'open' });
+
+      // 注入额外的HTML内容
+      if (extraHtml) {
+        shadowRoot.innerHTML = extraHtml;
+      }
+
+      // 3. 注入样式到Shadow DOM
+      if (style) {
+        const styleEl = document.createElement('style');
+        styleEl.textContent = style;
+        shadowRoot.appendChild(styleEl);
+      }
+
+      // 4. 创建Shadow内部的容器（最终挂载React Portal的元素）
+      const containerEl = document.createElement('div');
+      containerEl.classList.add(...containerClasses, 'shadow-container');
+      shadowRoot.appendChild(containerEl);
+
+      // 5. 将外层元素挂载到指定根节点
+      const mountRoot = rootEl || document.body;
+      mountRoot.appendChild(wrapperEl);
+
+      setShadowContainer(containerEl);
+    } catch (error) {
+      console.error('创建Shadow DOM失败:', error);
+      setShadowContainer(null);
+    }
+
+    // Cleanup on unmount or when rootEl changes
+    // return () => {
+    //   if (wrapperRef.current && wrapperRef.current.parentNode) {
+    //     wrapperRef.current.parentNode.removeChild(wrapperRef.current);
+    //     wrapperRef.current = null;
+    //   }
+    // };
+  }, [rootEl]); // Recreate when rootEl changes
+
+  if (shadowContainer) {
+    shadowContainer.id = id;
+  }
+
+  return {
+    shadowContainer,
+    destroy: () => {
+      if (wrapperRef.current && wrapperRef.current.parentNode) {
+        wrapperRef.current.parentNode.removeChild(wrapperRef.current);
+        wrapperRef.current = null;
+      }
+    },
+  };
+};