clxx 2.1.2 → 2.1.4

package/build/Ago/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import dayjs from 'dayjs';
 import { AgoValue } from '../utils/ago';
 export interface AgoProps extends React.HTMLProps<HTMLSpanElement | HTMLDivElement> {

package/build/Alert/Wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Interpolation, Theme } from '@emotion/react';
 import * as CSS from 'csstype';
 export interface AlertWrapperProps {

package/build/Alert/Wrapper.js

@@ -7,19 +7,19 @@ export function AlertWrapper(props) {
     // 可定制的样式
     titleStyle, descStyle, btnStyle, cancelStyle, confirmStyle, } = props;
     // 标题样式
-    let titleCss = [style.title];
-    if (description) {
-        titleCss.push({ paddingBottom: 0 });
-    }
-    titleCss.push(titleStyle);
+    let titleCss = [
+        style.title,
+        description ? { paddingBottom: 0 } : {},
+        titleStyle
+    ];
     // 展示按钮组
-    let btnBoxCss = [style.btnBox];
-    if (showCancel) {
-        btnBoxCss.push(style.btnBoxWithCancel);
-    }
-    return (_jsxs("div", Object.assign({ css: style.container }, { children: [_jsxs("div", Object.assign({ css: style.content }, { children: [_jsx("div", Object.assign({ css: titleCss }, { children: title })), description && _jsx("div", Object.assign({ css: [style.desc, descStyle] }, { children: description }))] })), _jsxs(Row, Object.assign({ alignItems: "stretch", css: btnBoxCss }, { children: [showCancel && (_jsx(Clickable, Object.assign({ css: [style.btn, btnStyle, cancelStyle, { color: cancelColor }], onClick: onCancel, activeStyle: {
+    let btnBoxCss = [
+        style.btnBox,
+        showCancel ? style.btnBoxWithCancel : {}
+    ];
+    return (_jsxs("div", { css: style.container, children: [_jsxs("div", { css: style.content, children: [_jsx("div", { css: titleCss, children: title }), description && _jsx("div", { css: [style.desc, descStyle], children: description })] }), _jsxs(Row, { alignItems: "stretch", css: btnBoxCss, children: [showCancel && (_jsx(Clickable, { css: [style.btn, btnStyle, cancelStyle, { color: cancelColor }], onClick: onCancel, activeStyle: {
                             backgroundColor: `#c0c0c022`,
-                        } }, { children: cancel }))), _jsx(Clickable, Object.assign({ css: [style.btn, btnStyle, confirmStyle, { color: confirmColor }], onClick: onConfirm, activeStyle: {
+                        }, children: cancel })), _jsx(Clickable, { css: [style.btn, btnStyle, confirmStyle, { color: confirmColor }], onClick: onConfirm, activeStyle: {
                             backgroundColor: `#c0c0c022`,
-                        } }, { children: confirm }))] }))] })));
+                        }, children: confirm })] })] }));
 }

package/build/Alert/index.js

@@ -35,9 +35,9 @@ export function showAlert(option) {
         (_a = config.onCancel) === null || _a === void 0 ? void 0 : _a.call(config);
     });
     props.onConfirm = () => __awaiter(this, void 0, void 0, function* () {
-        var _b;
+        var _a;
         yield closeDialog();
-        (_b = config.onConfirm) === null || _b === void 0 ? void 0 : _b.call(config);
+        (_a = config.onConfirm) === null || _a === void 0 ? void 0 : _a.call(config);
     });
     // 创建对话框
     const closeDialog = showDialog({

package/build/AutoGrid/index.js

@@ -18,10 +18,10 @@ import { normalizeUnit } from '../utils/cssUtil';
  * @param props
  */
 export function AutoGrid(props) {
-    let { children, cols = 1, gap = 0, isSquare = false, itemStyle, containerStyle } = props, extra = __rest(props, ["children", "cols", "gap", "isSquare", "itemStyle", "containerStyle"]);
+    const { children, cols: rawCols = 1, gap: rawGap = 0, isSquare = false, itemStyle, containerStyle } = props, extra = __rest(props, ["children", "cols", "gap", "isSquare", "itemStyle", "containerStyle"]);
     // 规范化数字单位
-    cols = +cols;
-    gap = normalizeUnit(gap);
+    const cols = +rawCols;
+    const gap = normalizeUnit(rawGap);
     // 获取表格数据
     const getGridData = useCallback(() => {
         // 生成一个能创建表格的二维数组
@@ -51,28 +51,23 @@ export function AutoGrid(props) {
         const gridData = getGridData();
         return gridData.map((row, rowIndex) => {
             // 每行的槽样式，最后一行没有
-            let finalRowStyle = [style.rowStyle];
-            if (rowIndex !== gridData.length - 1) {
-                // 最后一行不需要marginBottom
-                finalRowStyle.push({
-                    marginBottom: gap,
-                });
-            }
-            return (_jsx("div", Object.assign({ css: finalRowStyle }, { children: row.map((item, colIndex) => {
-                    let finalCss = [...finalItemBoxStyle];
-                    // 如果是方形的，加入方形相关的样式
-                    if (isSquare) {
-                        finalCss.push(style.itemBoxSquare);
-                    }
-                    finalCss.push(itemStyle);
+            let finalRowStyle = [
+                style.rowStyle,
+                rowIndex !== gridData.length - 1 ? { marginBottom: gap } : {}
+            ];
+            return (_jsx("div", { css: finalRowStyle, children: row.map((item, colIndex) => {
+                    let finalCss = [
+                        ...finalItemBoxStyle,
+                        itemStyle
+                    ];
                     if (isSquare) {
-                        return (_jsx("div", Object.assign({ css: finalCss }, { children: _jsx("div", Object.assign({ css: style.itemInnerStyle }, { children: item })) }), colIndex));
+                        return (_jsx("div", { css: [...finalCss, style.itemBoxSquare], children: _jsx("div", { css: style.itemInnerStyle, children: item }) }, colIndex));
                     }
                     else {
-                        return (_jsx("div", Object.assign({ css: finalItemBoxStyle }, { children: item }), colIndex));
+                        return (_jsx("div", { css: finalCss, children: item }, colIndex));
                     }
-                }) }), rowIndex));
+                }) }, rowIndex));
         });
     };
-    return (_jsx("div", Object.assign({}, extra, { css: [containerStyle] }, { children: showContent() })));
+    return (_jsx("div", Object.assign({}, extra, { css: [containerStyle], children: showContent() })));
 }

package/build/AutoGrid/style.d.ts

@@ -1,7 +1,7 @@
 export declare const style: {
-    itemBoxStyle: import("@emotion/utils").SerializedStyles;
-    itemBoxSquare: import("@emotion/utils").SerializedStyles;
-    itemNull: import("@emotion/utils").SerializedStyles;
-    itemInnerStyle: import("@emotion/utils").SerializedStyles;
-    rowStyle: import("@emotion/utils").SerializedStyles;
+    itemBoxStyle: import("@emotion/react").SerializedStyles;
+    itemBoxSquare: import("@emotion/react").SerializedStyles;
+    itemNull: import("@emotion/react").SerializedStyles;
+    itemInnerStyle: import("@emotion/react").SerializedStyles;
+    rowStyle: import("@emotion/react").SerializedStyles;
 };

package/build/CarouselNotice/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Interpolation, Theme } from '@emotion/react';
 import * as CSS from 'csstype';
 export interface CarouselNoticeOption extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {

package/build/CarouselNotice/index.js

@@ -54,16 +54,16 @@ export function CarouselNotice(props) {
         }
         const itemCss = [style.item, justifyStyle];
         if (list.length === 1) {
-            return (_jsx("div", Object.assign({ css: [itemCss, itemStyle] }, { children: list[0] }), 0));
+            return (_jsx("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
         }
         const showList = [];
         if (current === list.length - 1) {
-            showList.push(_jsx("div", Object.assign({ css: [itemCss, itemStyle] }, { children: list[list.length - 1] }), current));
-            showList.push(_jsx("div", Object.assign({ css: [itemCss, itemStyle] }, { children: list[0] }), 0));
+            showList.push(_jsx("div", { css: [itemCss, itemStyle], children: list[list.length - 1] }, current));
+            showList.push(_jsx("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
         }
         else {
-            showList.push(_jsx("div", Object.assign({ css: [itemCss, itemStyle] }, { children: list[current] }), current));
-            showList.push(_jsx("div", Object.assign({ css: [itemCss, itemStyle] }, { children: list[current + 1] }), current + 1));
+            showList.push(_jsx("div", { css: [itemCss, itemStyle], children: list[current] }, current));
+            showList.push(_jsx("div", { css: [itemCss, itemStyle], children: list[current + 1] }, current + 1));
         }
         return showList;
     };
@@ -92,5 +92,5 @@ export function CarouselNotice(props) {
         setAnimation(false);
     };
     return (Array.isArray(list) &&
-        list.length > 0 && (_jsx("div", Object.assign({}, attrs, { css: [style.box, { width, height }, containerStyle] }, { children: _jsx("div", Object.assign({ onAnimationEnd: animationEnd, css: [style.wrapper, getAnimation(), wrapperStyle] }, { children: showContent() })) }))));
+        list.length > 0 && (_jsx("div", Object.assign({}, attrs, { css: [style.box, { width, height }, containerStyle], children: _jsx("div", { onAnimationEnd: animationEnd, css: [style.wrapper, getAnimation(), wrapperStyle], children: showContent() }) }))));
 }

package/build/CarouselNotice/style.d.ts

@@ -1,3 +1,8 @@
 import { Interpolation, Theme } from "@emotion/react";
-export declare const Bubble: import("@emotion/serialize").Keyframes;
+export declare const Bubble: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
 export declare const style: Record<string, Interpolation<Theme>>;

package/build/CarouselNotice/style.js

@@ -1,12 +1,12 @@
 import { keyframes } from "@emotion/react";
 import { adaptive } from "../utils/cssUtil";
-export const Bubble = keyframes `
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(-50%);
-  }
+export const Bubble = keyframes `
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-50%);
+  }
 `;
 export const style = {
     box: [

package/build/Clickable/index.d.ts

@@ -3,10 +3,10 @@ import React from 'react';
  * 可触摸元素的属性，兼容PC
  */
 export interface ClickableProps extends React.HTMLProps<HTMLDivElement> {
-    children: React.ReactNode;
-    bubble: boolean;
-    activeClassName: string;
-    activeStyle: React.CSSProperties;
-    disable: boolean;
+    children?: React.ReactNode;
+    bubble?: boolean;
+    activeClassName?: string;
+    activeStyle?: React.CSSProperties;
+    disable?: boolean;
 }
 export declare function Clickable(props: Partial<ClickableProps>): import("@emotion/react/jsx-runtime").JSX.Element;

package/build/Clickable/index.js

@@ -10,16 +10,19 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useCallback, useRef, useState, useEffect, } from 'react';
+import React, { useCallback, useRef, useState, useEffect, } from 'react';
 import { is } from '../utils/is';
 export function Clickable(props) {
     let { children, bubble = true, className, activeClassName, style, activeStyle, disable = false } = props, attrs = __rest(props, ["children", "bubble", "className", "activeClassName", "style", "activeStyle", "disable"]);
     // 如果激活样式和激活类都不存在，则设置激活默认样式
-    if (!activeClassName && !activeStyle) {
-        activeStyle = {
-            opacity: 0.6,
-        };
-    }
+    // 使用 useMemo 避免每次渲染都创建新对象
+    const defaultActiveStyle = React.useMemo(() => {
+        if (!activeClassName && !activeStyle) {
+            return { opacity: 0.6 };
+        }
+        return activeStyle;
+    }, [activeClassName, activeStyle]);
+    const finalActiveStyle = defaultActiveStyle || activeStyle;
     const touchable = is('touchable');
     const [boxClass, setBoxClass] = useState(className);
     const [boxStyle, setBoxStyle] = useState(style);
@@ -43,9 +46,9 @@ export function Clickable(props) {
                     ? `${boxClass} ${activeClassName}`
                     : activeClassName);
             }
-            if (typeof activeStyle === 'object') {
+            if (typeof finalActiveStyle === 'object') {
                 setBoxStyle(typeof boxStyle === 'object'
-                    ? Object.assign(Object.assign({}, boxStyle), activeStyle) : activeStyle);
+                    ? Object.assign(Object.assign({}, boxStyle), finalActiveStyle) : finalActiveStyle);
             }
         }
     };

package/build/Container/index.d.ts

@@ -1,5 +1,5 @@
-import { Interpolation, Theme } from '@emotion/react';
-import React from 'react';
+import { Interpolation, Theme } from "@emotion/react";
+import React from "react";
 export interface ContainerProps {
     globalStyle?: Interpolation<Theme>;
     children?: React.ReactNode;

package/build/Container/index.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Global } from '@emotion/react';
-import React, { useCallback, useEffect, useState } from 'react';
-import { getContextValue } from '../context';
-import { useWindowResize } from '../Effect/useWindowResize';
-import round from 'lodash/round';
-import { useViewport } from '../Effect/useViewport';
+import { Global } from "@emotion/react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { getContextValue } from "../context";
+import { useWindowResize } from "../Effect/useWindowResize";
+import { useViewport } from "../Effect/useViewport";
 /**
  * 自适应容器
  * @param props
@@ -14,74 +13,100 @@ export function Container(props) {
     const { minDocWidth, maxDocWidth } = getContextValue();
     // 获取环境变量
     const { designWidth = 750, globalStyle, children } = props;
-    // 获取期待的根字体尺寸，采用rem布局
-    const expectFontSize = useCallback(() => {
-        const winWidth = window.innerWidth;
-        let expectFontSize;
-        if (winWidth >= maxDocWidth) {
-            expectFontSize = (maxDocWidth * 100) / designWidth;
+    // 计算根字体尺寸的函数（使用 useCallback 避免重复创建）
+    const calculateFontSize = useCallback((width) => {
+        let targetWidth = width;
+        if (width >= maxDocWidth) {
+            targetWidth = maxDocWidth;
         }
-        else if (winWidth <= minDocWidth) {
-            expectFontSize = (minDocWidth * 100) / designWidth;
+        else if (width <= minDocWidth) {
+            targetWidth = minDocWidth;
         }
-        else {
-            expectFontSize = (winWidth * 100) / designWidth;
-        }
-        return expectFontSize;
+        return (targetWidth * 100) / designWidth;
     }, [designWidth, minDocWidth, maxDocWidth]);
-    // 基准字体尺寸
-    const [baseFontSize, setBaseFontSize] = useState(expectFontSize());
+    // 基准字体尺寸（初始化时计算一次）
+    const [baseFontSize, setBaseFontSize] = useState(() => calculateFontSize(window.innerWidth));
+    // 是否已完成初始化（包括字体缩放修正）
+    const [isInitialized, setIsInitialized] = useState(false);
+    // 字体缩放修正逻辑（处理浏览器字体设置影响）
+    // 使用 useLayoutEffect 在 DOM 更新后立即同步执行，避免闪烁
+    useEffect(() => {
+        // 只在未初始化时检查一次
+        if (isInitialized)
+            return;
+        // 延迟到下一帧检查，确保 DOM 已经应用了 baseFontSize
+        requestAnimationFrame(() => {
+            const computedSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+            // 如果计算出的字体大小与期望不符（说明被浏览器字体设置影响了）
+            // 使用较大的容差值，避免浮点数精度问题导致的无限循环
+            if (typeof computedSize === "number" &&
+                computedSize > 0 &&
+                Math.abs(computedSize - baseFontSize) > 1 // 容差 1px，避免过度敏感
+            ) {
+                // 计算浏览器的字体缩放比例
+                const scaleFactor = computedSize / baseFontSize;
+                // 通过反向缩放修正字体大小
+                // 例如：期望 50px，实际 60px（1.2倍），则设置 50/1.2 ≈ 41.67px
+                const correctedSize = Math.round((baseFontSize / scaleFactor) * 10) / 10;
+                // 只修正一次，然后标记为已初始化
+                setBaseFontSize(correctedSize);
+                setIsInitialized(true);
+            }
+            else {
+                // 字体大小正确，直接标记为已初始化
+                setIsInitialized(true);
+            }
+        });
+    }, [baseFontSize, isInitialized]);
     // 页面大小变化时，基准字体同步变化
-    useWindowResize(() => setBaseFontSize(() => expectFontSize()));
-    // 字体缩放逻辑
-    const scaleFont = useCallback(() => {
-        let computeSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
-        if (typeof computeSize === 'number' && computeSize !== baseFontSize) {
-            setBaseFontSize(round(Math.pow(baseFontSize, 2) / computeSize, 1));
-        }
-    }, [baseFontSize]);
-    // 字体更新时，同步更新缩放逻辑
-    useEffect(scaleFont, [scaleFont]);
+    // 使用 requestAnimationFrame 批量处理，避免频繁更新
+    useWindowResize(() => {
+        requestAnimationFrame(() => {
+            const newFontSize = calculateFontSize(window.innerWidth);
+            if (newFontSize !== baseFontSize) {
+                setBaseFontSize(newFontSize);
+            }
+        });
+    });
     // 设置meta, 确保viewport的合法逻辑
     useViewport();
-    // 一些页面的初始化逻辑
+    // 页面初始化逻辑
     useEffect(() => {
-        // 激活iOS上的:active
+        // 激活iOS上的:active伪类
         const activable = () => { };
-        document.body.addEventListener('touchstart', activable);
+        document.body.addEventListener("touchstart", activable, { passive: true });
         return () => {
-            document.body.removeEventListener('touchstart', activable);
+            document.body.removeEventListener("touchstart", activable);
         };
     }, []);
+    // 使用 useMemo 缓存媒体查询样式，避免每次渲染都重新计算
+    const mediaQueryStyles = useMemo(() => ({
+        [`@media (min-width: ${maxDocWidth}px)`]: {
+            html: {
+                fontSize: `${(100 * maxDocWidth) / designWidth}px`,
+            },
+        },
+        [`@media (max-width: ${minDocWidth}px)`]: {
+            html: {
+                fontSize: `${(100 * minDocWidth) / designWidth}px`,
+            },
+        },
+    }), [designWidth, minDocWidth, maxDocWidth]);
     return (_jsxs(React.Fragment, { children: [_jsx(Global, { styles: [
-                    {
-                        '*': {
-                            boxSizing: 'border-box',
-                        },
-                        html: {
-                            WebkitTapHighlightColor: 'transparent',
-                            WebkitOverflowScrolling: 'touch',
-                            WebkitTextSizeAdjust: '100%',
+                    Object.assign({ "*": {
+                            boxSizing: "border-box",
+                        }, html: {
+                            WebkitTapHighlightColor: "transparent",
+                            WebkitOverflowScrolling: "touch",
+                            WebkitTextSizeAdjust: "100%",
                             fontSize: `${baseFontSize}px`,
-                            touchAction: 'manipulation',
-                        },
-                        body: {
-                            fontSize: '16px',
-                            margin: '0 auto',
+                            touchAction: "manipulation",
+                        }, body: {
+                            fontSize: "16px",
+                            margin: "0 auto",
                             maxWidth: `${maxDocWidth}px`,
                             minWidth: `${minDocWidth}px`,
-                        },
-                        [`@media (min-width: ${maxDocWidth}px)`]: {
-                            html: {
-                                fontSize: `${(100 * maxDocWidth) / designWidth}px`,
-                            },
-                        },
-                        [`@media (max-width: ${minDocWidth}px)`]: {
-                            html: {
-                                fontSize: `${(100 * minDocWidth) / designWidth}px`,
-                            },
-                        },
-                    },
+                        } }, mediaQueryStyles),
                     globalStyle,
-                ] }), children] }));
+                ] }), isInitialized ? children : null] }));
 }

package/build/Countdowner/index.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { Interpolation, Theme } from '@emotion/react';
 import { CountdownOption } from '../utils/Countdown';
 export interface CountdownerOption extends CountdownOption, React.HTMLProps<HTMLDivElement> {
-    seperator?: React.ReactNode;
-    seperatorStyle?: Interpolation<Theme>;
+    separator?: React.ReactNode;
+    separatorStyle?: Interpolation<Theme>;
     containerStyle?: Interpolation<Theme>;
     numberStyle?: Interpolation<Theme>;
     renderNumber?: (value: number, key?: string) => React.ReactNode;
-    renderSeperator?: (value: number, key?: string) => React.ReactNode;
+    renderSeparator?: (value: number, key?: string) => React.ReactNode;
 }
 export declare function Countdowner(props: CountdownerOption): import("@emotion/react/jsx-runtime").JSX.Element;

package/build/Countdowner/index.js

@@ -14,8 +14,11 @@ import React, { useEffect, useState } from 'react';
 import { Countdown, } from '../utils/Countdown';
 import { RowStart } from '../Flex/Row';
 export function Countdowner(props) {
-    let { remain = 0, seperator = ':', format = 'his', onUpdate, onEnd, seperatorStyle, containerStyle, numberStyle, renderNumber, renderSeperator } = props, extra = __rest(props, ["remain", "seperator", "format", "onUpdate", "onEnd", "seperatorStyle", "containerStyle", "numberStyle", "renderNumber", "renderSeperator"]);
+    let { remain = 0, separator = ':', format = 'his', onUpdate, onEnd, separatorStyle, containerStyle, numberStyle, renderNumber, renderSeparator } = props, extra = __rest(props, ["remain", "separator", "format", "onUpdate", "onEnd", "separatorStyle", "containerStyle", "numberStyle", "renderNumber", "renderSeparator"]);
     const [value, setValue] = useState(null);
+    // 使用 ref 保存最新的回调，避免频繁重建倒计时实例
+    const callbacksRef = React.useRef({ onUpdate, onEnd });
+    callbacksRef.current = { onUpdate, onEnd };
     let content = [];
     if (value && typeof value === 'object') {
         for (let i = 0; i < format.length; i++) {
@@ -28,19 +31,19 @@ export function Countdowner(props) {
             }
             else {
                 // 默认以span包围，且数字不足10的时候有前置0
-                numberComponent = (_jsx("span", Object.assign({ css: numberStyle }, { children: num < 10 ? `0${num}` : num })));
+                numberComponent = (_jsx("span", { css: numberStyle, children: num < 10 ? `0${num}` : num }));
             }
             content.push(_jsx(React.Fragment, { children: numberComponent }, i));
             // 添加分隔符，最后一个数字不需要分隔符
             if (i !== format.length - 1) {
-                let seperatorComponent;
-                if (typeof renderSeperator === 'function') {
-                    seperatorComponent = renderSeperator(num, key);
+                let separatorComponent;
+                if (typeof renderSeparator === 'function') {
+                    separatorComponent = renderSeparator(num, key);
                 }
                 else {
-                    seperatorComponent = seperator ? (_jsx("span", Object.assign({ css: seperatorStyle }, { children: seperator }))) : null;
+                    separatorComponent = separator ? (_jsx("span", { css: separatorStyle, children: separator })) : null;
                 }
-                content.push(_jsx(React.Fragment, { children: seperatorComponent }, `s${i}`));
+                content.push(_jsx(React.Fragment, { children: separatorComponent }, `s${i}`));
             }
         }
     }
@@ -49,11 +52,15 @@ export function Countdowner(props) {
             format,
             remain,
             onUpdate(current) {
+                var _a, _b;
                 setValue(current);
-                onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(current);
+                // 使用 ref 中的最新回调
+                (_b = (_a = callbacksRef.current).onUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, current);
             },
             onEnd() {
-                onEnd === null || onEnd === void 0 ? void 0 : onEnd();
+                var _a, _b;
+                // 使用 ref 中的最新回调
+                (_b = (_a = callbacksRef.current).onEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
             },
         });
         instance.start();
@@ -62,6 +69,6 @@ export function Countdowner(props) {
             instance.stop();
             instance = null;
         };
-    }, [format, remain]);
-    return (_jsx(RowStart, Object.assign({}, extra, { css: containerStyle }, { children: content })));
+    }, [format, remain]); // ← 移除 onUpdate 和 onEnd 依赖
+    return (_jsx(RowStart, Object.assign({}, extra, { css: containerStyle, children: content })));
 }

package/build/Dialog/Wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /** @jsx jsx */
 import { Theme, Interpolation } from "@emotion/react";
 import { DialogType, AnimationStatus } from "./style";

package/build/Dialog/Wrapper.js

@@ -5,20 +5,17 @@ export function Wrapper(props) {
     const { type = "center", status = "show", children, onHide, showMask = true, maskColor, maskStyle, boxStyle, onBlankClick, } = props;
     const { animation, keyframes } = getAnimation(type, status);
     // 选取特定的类型对应的样式
-    let boxCss = [style.boxCss];
-    if (["pullUp", "pullDown", "pullLeft", "pullRight"].includes(type)) {
-        boxCss.push(style[type]);
-    }
+    let boxCss = [
+        style.boxCss,
+        ["pullUp", "pullDown", "pullLeft", "pullRight"].includes(type) ? style[type] : {}
+    ];
     // 遮罩的样式
     let maskCss = [
         style.mask,
         status === "show" ? style.maskShow : style.maskHide,
         maskStyle,
+        maskColor ? { backgroundColor: maskColor } : {}
     ];
-    // 遮罩颜色
-    if (maskColor) {
-        maskCss.push({ backgroundColor: maskColor });
-    }
     // 空白处点击
     const blankClick = (event) => {
         if (event.target === event.currentTarget) {
@@ -26,9 +23,9 @@ export function Wrapper(props) {
             onBlankClick === null || onBlankClick === void 0 ? void 0 : onBlankClick(event);
         }
     };
-    return (_jsxs(Overlay, Object.assign({ css: { overflow: "hidden" }, centerContent: type === "center", maskColor: "transparent", fullScreen: true, onClick: showMask ? undefined : blankClick }, { children: [showMask && _jsx("div", { css: maskCss, onClick: blankClick }), _jsx("div", Object.assign({ css: [boxCss, boxStyle, animation], onAnimationEnd: (event) => {
+    return (_jsxs(Overlay, { css: { overflow: "hidden" }, centerContent: type === "center", maskColor: "transparent", fullScreen: true, onClick: showMask ? undefined : blankClick, children: [showMask && _jsx("div", { css: maskCss, onClick: blankClick }), _jsx("div", { css: [boxCss, boxStyle, animation], onAnimationEnd: (event) => {
                     if (status === "hide" && event.animationName === keyframes.name) {
                         onHide === null || onHide === void 0 ? void 0 : onHide();
                     }
-                } }, { children: children }))] })));
+                }, children: children })] }));
 }

package/build/Dialog/style.d.ts

@@ -1,18 +1,23 @@
 import { Keyframes } from "@emotion/serialize";
-export declare const maskHide: Keyframes;
+export declare const maskHide: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
 export type DialogType = "center" | "pullUp" | "pullDown" | "pullLeft" | "pullRight";
 export type AnimationStatus = "show" | "hide";
 export declare function getAnimation(type: DialogType, status: AnimationStatus): {
     keyframes: Keyframes;
-    animation: import("@emotion/utils").SerializedStyles;
+    animation: import("@emotion/react").SerializedStyles;
 };
 export declare const style: {
-    maskShow: import("@emotion/utils").SerializedStyles;
-    maskHide: import("@emotion/utils").SerializedStyles;
-    mask: import("@emotion/utils").SerializedStyles;
-    boxCss: import("@emotion/utils").SerializedStyles;
-    pullUp: import("@emotion/utils").SerializedStyles;
-    pullDown: import("@emotion/utils").SerializedStyles;
-    pullLeft: import("@emotion/utils").SerializedStyles;
-    pullRight: import("@emotion/utils").SerializedStyles;
+    maskShow: import("@emotion/react").SerializedStyles;
+    maskHide: import("@emotion/react").SerializedStyles;
+    mask: import("@emotion/react").SerializedStyles;
+    boxCss: import("@emotion/react").SerializedStyles;
+    pullUp: import("@emotion/react").SerializedStyles;
+    pullDown: import("@emotion/react").SerializedStyles;
+    pullLeft: import("@emotion/react").SerializedStyles;
+    pullRight: import("@emotion/react").SerializedStyles;
 };