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

package/src/components/office-container.tsx

@@ -1,265 +1,289 @@
-import { FC, useCallback, useEffect, useRef } from 'react';
-import { useResizableWidth } from '../hooks/use-resizable-width';
-import { useColumnAppear } from '../hooks/use-column-appear';
-import classNames from 'classnames';
-
-export type FullScreenPart = 'leftCol' | 'rightCol' | 'none';
-
-export interface IOfficeContainerProps {
-    headerHeight?: number;
-
-    hideLeftCol?: boolean;
-
-    leftColWidthRange?: [number, number];
-    rightColWidthRange?: [number, number];
-
-    leftColCls?: string;
-    rightColCls?: string;
-
-    leftColHeaderElement?: React.ReactNode;
-    leftColContentElement?: React.ReactNode;
-    rightColHeaderElement?: React.ReactNode;
-    rightColContentElement?: React.ReactNode;
-
-    fullscreenPart?: FullScreenPart;
-
-    children?: React.ReactNode;
-
-    onResize?: (leftColWid: number, rightColWid: number) => void;
-
-    /** localStorage 键名，用于持久化用户拖拽的列宽偏好 */
-    storageKey?: string;
-
-    className?: string;
-}
-
-
-export const OfficeContainer: FC<IOfficeContainerProps> = ({
-    headerHeight = 64,
-    hideLeftCol = false,
-    leftColWidthRange = [340, 500],
-    rightColWidthRange,
-    leftColCls,
-    rightColCls,
-    children,
-    leftColHeaderElement,
-    leftColContentElement,
-    rightColHeaderElement,
-    rightColContentElement,
-    fullscreenPart = 'none',
-    className,
-    onResize,
-    storageKey,
-}) => {
-    const isRightResizable = !!rightColWidthRange;
-    const activeRange = rightColWidthRange ?? leftColWidthRange;
-
-    const transitioningRef = useRef(false);
-    const mountRef = useRef(true);
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    const { width, handleMouseDown, isDragging } = useResizableWidth({
-        range: activeRange,
-        initialWidth: activeRange[0],
-        invertDrag: isRightResizable,
-        storageKey,
-    });
-
-    const isLeftFullscreen = fullscreenPart === 'leftCol';
-    const isRightFullscreen = fullscreenPart === 'rightCol';
-    const isFullscreen = isLeftFullscreen || isRightFullscreen;
-
-    const leftHidden = hideLeftCol || isRightFullscreen;
-    const rightHidden = isLeftFullscreen;
-
-    // ---- column appear/hide animation ----
-
-    const {
-        colRef: leftColRef,
-        getTransitionStyle: leftTransitionStyle,
-    } = useColumnAppear({ hidden: leftHidden });
-
-    const {
-        colRef: rightColRef,
-        getTransitionStyle: rightTransitionStyle,
-    } = useColumnAppear({ hidden: rightHidden });
-
-    // ---- 列宽计算：始终返回明确像素值，避免 flex 计算宽与 transition 冲突 ----
-
-    const leftColInnerRef = useRef<HTMLDivElement>(null);
-    const rightColInnerRef = useRef<HTMLDivElement>(null);
-
-    const getColWidth = useCallback((col: 'left' | 'right'): number | string => {
-        if (col === 'left') {
-            if (hideLeftCol || isRightFullscreen) return 0;
-            if (isLeftFullscreen) return '100%';
-            if (isRightResizable) {
-                if (leftColInnerRef.current) return leftColInnerRef.current.offsetWidth;
-                return `calc(100% - ${width}px)`;
-            }
-            return width;
-        }
-        // right col
-        if (isLeftFullscreen) return 0;
-        if (isRightFullscreen) return '100%';
-        if (isRightResizable) return width;
-        if (rightColInnerRef.current) return rightColInnerRef.current.offsetWidth;
-        return `calc(100% - ${width}px)`;
-    }, [hideLeftCol, isLeftFullscreen, isRightFullscreen, isRightResizable, width]);
-
-    useEffect(() => {
-        if (!onResize || transitioningRef.current) return;
-        const raf = requestAnimationFrame(() => {
-            const leftW = leftColRef.current?.offsetWidth ?? 0;
-            const rightW = rightColRef.current?.offsetWidth ?? 0;
-            onResize(leftW, rightW);
-        });
-        return () => cancelAnimationFrame(raf);
-    }, [width, fullscreenPart, hideLeftCol, isRightResizable, onResize]);
-
-    // Set guard when fullscreen/hide triggers CSS transitions. Skip mount.
-    useEffect(() => {
-        if (mountRef.current) {
-            mountRef.current = false;
-            return;
-        }
-        transitioningRef.current = true;
-    }, [fullscreenPart, hideLeftCol]);
-
-    // Fire onResize after CSS width transitions complete
-    useEffect(() => {
-        if (!onResize) return;
-
-        let resolved = false;
-        const onWidthTransitionEnd = (e: TransitionEvent) => {
-            if (e.propertyName !== 'width' || resolved) return;
-            resolved = true;
-            transitioningRef.current = false;
-            const leftW = leftColRef.current?.offsetWidth ?? 0;
-            const rightW = rightColRef.current?.offsetWidth ?? 0;
-            onResize(leftW, rightW);
-        };
-
-        const leftEl = leftColRef.current;
-        const rightEl = rightColRef.current;
-
-        leftEl?.addEventListener('transitionend', onWidthTransitionEnd);
-        rightEl?.addEventListener('transitionend', onWidthTransitionEnd);
-
-        const fallback = setTimeout(() => {
-            if (resolved) return;
-            resolved = true;
-            transitioningRef.current = false;
-            const leftW = leftColRef.current?.offsetWidth ?? 0;
-            const rightW = rightColRef.current?.offsetWidth ?? 0;
-            onResize(leftW, rightW);
-        }, 500);
-
-        return () => {
-            leftEl?.removeEventListener('transitionend', onWidthTransitionEnd);
-            rightEl?.removeEventListener('transitionend', onWidthTransitionEnd);
-            clearTimeout(fallback);
-        };
-    }, [fullscreenPart, hideLeftCol, onResize]);
-
-    // Fire onResize on browser zoom / window resize
-    useEffect(() => {
-        if (!onResize) return;
-        const el = containerRef.current;
-        if (!el) return;
-
-        const observer = new ResizeObserver(() => {
-            if (transitioningRef.current) return;
-            requestAnimationFrame(() => {
-                const leftW = leftColRef.current?.offsetWidth ?? 0;
-                const rightW = rightColRef.current?.offsetWidth ?? 0;
-                onResize(leftW, rightW);
-            });
-        });
-
-        observer.observe(el);
-        return () => observer.disconnect();
-    }, [onResize]);
-
-    const borderColorCls = 'border-[#0265fc]';
-
-    // 全屏时补全 shrink-0，确保 width: 100% 或 width: 0 不会被 flex 容器挤压
-    const leftFlexCls = isFullscreen
-        ? 'shrink-0'
-        : isRightResizable
-            ? 'flex-1'
-            : 'shrink-0';
-    const rightFlexCls = isFullscreen
-        ? 'shrink-0'
-        : isRightResizable
-            ? 'shrink-0'
-            : 'flex-1';
-
-    // 滚动条使用 scrollbar-gutter: stable 预留空间，避免 overflow 切换时布局抖动
-    const contentCls = 'flex-1 min-h-0 overflow-auto w-full';
-    const contentStyle: React.CSSProperties = { /*scrollbarGutter: 'stable' */};
-
-    return (
-        <div ref={containerRef} className={classNames("relative h-full w-full flex overflow-hidden", className)}>
-            {/* fullscreen overlay */}
-            {children && (
-                <div>
-                    {children}
-                </div>
-            )}
-
-            {/* left col */}
-            <div
-                ref={leftColRef}
-                className={classNames("h-full flex flex-col relative office-left-col", leftColCls, leftFlexCls, {
-                    "pointer-events-none": hideLeftCol || isRightFullscreen,
-                    "opacity-0": hideLeftCol || isRightFullscreen,
-                    "overflow-hidden": /* isRightFullscreen */ true,
-                })}
-                style={{ ...leftTransitionStyle, width: getColWidth('left'), ...(isDragging ? { transition: 'none' } : {}) }}
-            >
-                <div
-                    ref={leftColInnerRef}
-                    className="shrink-0 w-full overflow-hidden"
-                    style={{ height: headerHeight, background: '#fff' }}
-                >
-                    {leftColHeaderElement}
-                </div>
-                <div className={contentCls} style={contentStyle}>
-                    {leftColContentElement}
-                </div>
-                {/* resizer */}
-                {!isFullscreen && (
-                    <div
-                        className={classNames(`h-full w-5 cursor-col-resize z-10 flex justify-center group absolute top-0 right-0 hover:border-r hover:${borderColorCls}`, {
-                            [`border-r ${borderColorCls}`]: isDragging,
-                        })}
-                        onMouseDown={handleMouseDown}
-                    />
-                )}
-            </div>
-
-            {/* right col */}
-            <div
-                ref={rightColRef}
-                className={classNames("h-full flex flex-col min-w-0 office-right-col", rightColCls, rightFlexCls, {
-                    "pointer-events-none": isLeftFullscreen,
-                    "opacity-0": isLeftFullscreen,
-                    "overflow-hidden": isLeftFullscreen,
-                })}
-                style={{ ...rightTransitionStyle, width: getColWidth('right'), ...(isDragging ? { transition: 'none' } : {}) }}
-            >
-                <div
-                    ref={rightColInnerRef}
-                    className="shrink-0 w-full"
-                    style={{ height: headerHeight, background: "#fff" }}
-                >
-                    {rightColHeaderElement}
-                </div>
-                <div className={contentCls} style={contentStyle}>
-                    {rightColContentElement}
-                </div>
-            </div>
-        </div>
-    );
-};
+import { FC, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+import { useResizableWidth } from '../hooks/use-resizable-width';
+import { useColumnAppear } from '../hooks/use-column-appear';
+import classNames from 'classnames';
+
+export type FullScreenPart = 'leftCol' | 'rightCol' | 'none';
+
+export interface IOfficeContainerProps {
+    headerHeight?: number;
+
+    hideLeftCol?: boolean;
+
+    leftColWidthRange?: [number, number];
+    rightColWidthRange?: [number, number];
+
+    leftColCls?: string;
+    rightColCls?: string;
+
+    leftColHeaderElement?: React.ReactNode;
+    leftColContentElement?: React.ReactNode;
+    rightColHeaderElement?: React.ReactNode;
+    rightColContentElement?: React.ReactNode;
+
+    fullscreenPart?: FullScreenPart;
+
+    children?: React.ReactNode;
+
+    onResize?: (leftColWid: number, rightColWid: number) => void;
+
+    /** localStorage 键名，用于持久化用户拖拽的列宽偏好 */
+    storageKey?: string;
+
+    className?: string;
+}
+
+
+export const OfficeContainer: FC<IOfficeContainerProps> = ({
+    headerHeight = 64,
+    hideLeftCol = false,
+    leftColWidthRange = [340, 500],
+    rightColWidthRange,
+    leftColCls,
+    rightColCls,
+    children,
+    leftColHeaderElement,
+    leftColContentElement,
+    rightColHeaderElement,
+    rightColContentElement,
+    fullscreenPart = 'none',
+    className,
+    onResize,
+    storageKey,
+}) => {
+    const isRightResizable = !!rightColWidthRange;
+    const activeRange = rightColWidthRange ?? leftColWidthRange;
+
+    const transitioningRef = useRef(false);
+    const mountRef = useRef(true);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const onResizeRef = useRef(onResize);
+
+    useEffect(() => {
+        onResizeRef.current = onResize;
+    }, [onResize]);
+
+    const { width, handleMouseDown, isDragging } = useResizableWidth({
+        range: activeRange,
+        initialWidth: activeRange[0],
+        invertDrag: isRightResizable,
+        storageKey,
+    });
+
+    const isLeftFullscreen = fullscreenPart === 'leftCol';
+    const isRightFullscreen = fullscreenPart === 'rightCol';
+    const isFullscreen = isLeftFullscreen || isRightFullscreen;
+
+    const leftHidden = hideLeftCol || isRightFullscreen;
+    const rightHidden = isLeftFullscreen;
+
+    // ---- column appear/hide animation ----
+
+    const {
+        colRef: leftColRef,
+        getTransitionStyle: leftTransitionStyle,
+    } = useColumnAppear({ hidden: leftHidden });
+
+    const {
+        colRef: rightColRef,
+        getTransitionStyle: rightTransitionStyle,
+    } = useColumnAppear({ hidden: rightHidden });
+
+    // ---- 列宽计算：始终返回明确像素值，避免 flex 计算宽与 transition 冲突 ----
+
+    const leftColInnerRef = useRef<HTMLDivElement>(null);
+    const rightColInnerRef = useRef<HTMLDivElement>(null);
+
+    const getColWidth = useCallback((col: 'left' | 'right'): number | string => {
+        if (col === 'left') {
+            if (hideLeftCol || isRightFullscreen) return 0;
+            if (isLeftFullscreen) return '100%';
+            if (isRightResizable) {
+                if (leftColInnerRef.current) return leftColInnerRef.current.offsetWidth;
+                return `calc(100% - ${width}px)`;
+            }
+            return width;
+        }
+        // right col
+        if (isLeftFullscreen) return 0;
+        if (isRightFullscreen) return '100%';
+        if (isRightResizable) return width;
+        if (rightColInnerRef.current) return rightColInnerRef.current.offsetWidth;
+        return `calc(100% - ${width}px)`;
+    }, [hideLeftCol, isLeftFullscreen, isRightFullscreen, isRightResizable, width]);
+
+    const getTargetColWidths = useCallback((): [number, number] => {
+        const containerWidth = containerRef.current?.offsetWidth ?? 0;
+
+        if (isLeftFullscreen) return [containerWidth, 0];
+        if (isRightFullscreen) return [0, containerWidth];
+
+        if (hideLeftCol) {
+            if (isRightResizable) return [0, width];
+            return [0, Math.max(containerWidth - width, 0)];
+        }
+
+        if (isRightResizable) {
+            return [Math.max(containerWidth - width, 0), width];
+        }
+
+        return [width, Math.max(containerWidth - width, 0)];
+    }, [hideLeftCol, isLeftFullscreen, isRightFullscreen, isRightResizable, width]);
+
+    useLayoutEffect(() => {
+        if (!onResize || transitioningRef.current) return;
+        const leftW = leftColRef.current?.offsetWidth ?? 0;
+        const rightW = rightColRef.current?.offsetWidth ?? 0;
+        onResize(leftW, rightW);
+    }, [width, fullscreenPart, hideLeftCol, isRightResizable, onResize]);
+
+    // Set guard when fullscreen/hide triggers CSS transitions. Skip mount.
+    // Immediately report the final target widths so the host portal can size
+    // itself before paint, instead of waiting for the width transition to end.
+    useLayoutEffect(() => {
+        if (mountRef.current) {
+            mountRef.current = false;
+            return;
+        }
+        transitioningRef.current = true;
+        const [leftW, rightW] = getTargetColWidths();
+        onResizeRef.current?.(leftW, rightW);
+    }, [fullscreenPart, hideLeftCol, getTargetColWidths]);
+
+    // Fire onResize after CSS width transitions complete
+    useEffect(() => {
+        if (!onResize) return;
+
+        let resolved = false;
+        const onWidthTransitionEnd = (e: TransitionEvent) => {
+            if (e.propertyName !== 'width' || resolved) return;
+            resolved = true;
+            transitioningRef.current = false;
+            const leftW = leftColRef.current?.offsetWidth ?? 0;
+            const rightW = rightColRef.current?.offsetWidth ?? 0;
+            onResize(leftW, rightW);
+        };
+
+        const leftEl = leftColRef.current;
+        const rightEl = rightColRef.current;
+
+        leftEl?.addEventListener('transitionend', onWidthTransitionEnd);
+        rightEl?.addEventListener('transitionend', onWidthTransitionEnd);
+
+        const fallback = setTimeout(() => {
+            if (resolved) return;
+            resolved = true;
+            transitioningRef.current = false;
+            const leftW = leftColRef.current?.offsetWidth ?? 0;
+            const rightW = rightColRef.current?.offsetWidth ?? 0;
+            onResize(leftW, rightW);
+        }, 500);
+
+        return () => {
+            leftEl?.removeEventListener('transitionend', onWidthTransitionEnd);
+            rightEl?.removeEventListener('transitionend', onWidthTransitionEnd);
+            clearTimeout(fallback);
+        };
+    }, [fullscreenPart, hideLeftCol, onResize]);
+
+    // Fire onResize on browser zoom / window resize
+    useEffect(() => {
+        if (!onResize) return;
+        const el = containerRef.current;
+        if (!el) return;
+
+        const observer = new ResizeObserver(() => {
+            if (transitioningRef.current) return;
+            requestAnimationFrame(() => {
+                const leftW = leftColRef.current?.offsetWidth ?? 0;
+                const rightW = rightColRef.current?.offsetWidth ?? 0;
+                onResize(leftW, rightW);
+            });
+        });
+
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [onResize]);
+
+    const borderColorCls = 'border-[#0265fc]';
+
+    // 全屏时补全 shrink-0，确保 width: 100% 或 width: 0 不会被 flex 容器挤压
+    const leftFlexCls = isFullscreen
+        ? 'shrink-0'
+        : isRightResizable
+            ? 'flex-1'
+            : 'shrink-0';
+    const rightFlexCls = isFullscreen
+        ? 'shrink-0'
+        : isRightResizable
+            ? 'shrink-0'
+            : 'flex-1';
+
+    // 滚动条使用 scrollbar-gutter: stable 预留空间，避免 overflow 切换时布局抖动
+    const contentCls = 'flex-1 min-h-0 overflow-auto w-full';
+    const contentStyle: React.CSSProperties = { /*scrollbarGutter: 'stable' */};
+
+    return (
+        <div ref={containerRef} className={classNames("relative h-full w-full flex overflow-hidden", className)}>
+            {/* fullscreen overlay */}
+            {children && (
+                <div>
+                    {children}
+                </div>
+            )}
+
+            {/* left col */}
+            <div
+                ref={leftColRef}
+                className={classNames("h-full flex flex-col relative office-left-col", leftColCls, leftFlexCls, {
+                    "pointer-events-none": hideLeftCol || isRightFullscreen,
+                    "opacity-0": hideLeftCol || isRightFullscreen,
+                    "overflow-hidden": /* isRightFullscreen */ true,
+                })}
+                style={{ ...leftTransitionStyle, width: getColWidth('left'), ...(isDragging ? { transition: 'none' } : {}) }}
+            >
+                <div
+                    ref={leftColInnerRef}
+                    className="shrink-0 w-full overflow-hidden"
+                    style={{ height: headerHeight, background: '#fff' }}
+                >
+                    {leftColHeaderElement}
+                </div>
+                <div className={contentCls} style={contentStyle}>
+                    {leftColContentElement}
+                </div>
+                {/* resizer */}
+                {!isFullscreen && (
+                    <div
+                        className={classNames(`h-full w-5 cursor-col-resize z-10 flex justify-center group absolute top-0 right-0 hover:border-r hover:${borderColorCls}`, {
+                            [`border-r ${borderColorCls}`]: isDragging,
+                        })}
+                        onMouseDown={handleMouseDown}
+                    />
+                )}
+            </div>
+
+            {/* right col */}
+            <div
+                ref={rightColRef}
+                className={classNames("h-full flex flex-col min-w-0 office-right-col", rightColCls, rightFlexCls, {
+                    "pointer-events-none": isLeftFullscreen,
+                    "opacity-0": isLeftFullscreen,
+                    "overflow-hidden": isLeftFullscreen,
+                })}
+                style={{ ...rightTransitionStyle, width: getColWidth('right'), ...(isDragging ? { transition: 'none' } : {}) }}
+            >
+                <div
+                    ref={rightColInnerRef}
+                    className="shrink-0 w-full"
+                    style={{ height: headerHeight, background: "#fff" }}
+                >
+                    {rightColHeaderElement}
+                </div>
+                <div className={contentCls} style={contentStyle}>
+                    {rightColContentElement}
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/components/option-item.tsx

@@ -1,28 +1,28 @@
-import { ReactNode } from "react";
-
-export interface OptionItemProps {
-    bgColor?: string;
-    color?: string;
-    label?: ReactNode;
-    children?: ReactNode;
-}
-
-export const OptionItem = ({
-    bgColor = "#E8F4FF",
-    color = "#0265FF",
-    label,
-    children,
-}: OptionItemProps
-) => {
-    return (
-        <div
-            className="flex items-center justify-center gap-1.5 px-1.5 h-[26px] rounded-[100px] text-[13px]"
-            style={{
-                backgroundColor: bgColor,
-                color: color,
-            }}
-        >
-            {label || children}
-        </div>
-    )
+import { ReactNode } from "react";
+
+export interface OptionItemProps {
+    bgColor?: string;
+    color?: string;
+    label?: ReactNode;
+    children?: ReactNode;
+}
+
+export const OptionItem = ({
+    bgColor = "#E8F4FF",
+    color = "#0265FF",
+    label,
+    children,
+}: OptionItemProps
+) => {
+    return (
+        <div
+            className="flex items-center justify-center gap-1.5 px-1.5 h-[26px] rounded-[100px] text-[13px]"
+            style={{
+                backgroundColor: bgColor,
+                color: color,
+            }}
+        >
+            {label || children}
+        </div>
+    )
 }