clxx 2.1.4 → 2.1.5

package/README.md

@@ -46,8 +46,8 @@ pnpm add clxx
 
 ```json
 {
-  "react": "^19.2.0",
-  "react-dom": "^19.2.0"
+  "react": "^19.2.4",
+  "react-dom": "^19.2.4"
 }
 ```
 

package/build/Alert/style.js

@@ -67,7 +67,7 @@ export const style = {
             marginLeft: "-.5px",
             width: "1px",
             backgroundColor: "#c0c0c0",
-            transform: `scale(${1 / devicePixelRatio}, 1)`,
+            transform: `scale(${1 / window.devicePixelRatio}, 1)`,
         },
     },
     btn: [

package/build/AutoGrid/index.js

@@ -27,15 +27,22 @@ export function AutoGrid(props) {
         // 生成一个能创建表格的二维数组
         let list = [];
         React.Children.forEach(children, (child) => {
-            if (child !== null) {
+            if (child !== null && child !== undefined) {
                 if (list.length === 0 || list[list.length - 1].length >= cols) {
                     list.push([]);
                 }
                 list[list.length - 1].push(child);
             }
         });
+        // 用空占位符补齐最后一行，避免最后一行元素宽度不一致
+        if (list.length > 0) {
+            const lastRow = list[list.length - 1];
+            while (lastRow.length < cols) {
+                lastRow.push(_jsx("div", { style: { visibility: 'hidden' } }, `placeholder-${lastRow.length}`));
+            }
+        }
         return list;
-    }, [children]);
+    }, [children, cols]);
     // 元素的最终样式
     const finalItemBoxStyle = [
         style.itemBoxStyle,

package/build/Clickable/index.js

@@ -24,13 +24,7 @@ export function Clickable(props) {
     }, [activeClassName, activeStyle]);
     const finalActiveStyle = defaultActiveStyle || activeStyle;
     const touchable = is('touchable');
-    const [boxClass, setBoxClass] = useState(className);
-    const [boxStyle, setBoxStyle] = useState(style);
-    // 监控属性的更新
-    useEffect(() => {
-        setBoxClass(className);
-        setBoxStyle(style);
-    }, [className, style]);
+    const [isActive, setIsActive] = useState(false);
     // 标记是否正处于触摸状态
     const touchRef = useRef(false);
     const onStart = (event) => {
@@ -40,26 +34,15 @@ export function Clickable(props) {
             if (!bubble) {
                 event.stopPropagation();
             }
-            // 激活目标样式
-            if (typeof activeClassName === 'string') {
-                setBoxClass(typeof boxClass === 'string'
-                    ? `${boxClass} ${activeClassName}`
-                    : activeClassName);
-            }
-            if (typeof finalActiveStyle === 'object') {
-                setBoxStyle(typeof boxStyle === 'object'
-                    ? Object.assign(Object.assign({}, boxStyle), finalActiveStyle) : finalActiveStyle);
-            }
+            setIsActive(true);
         }
     };
-    // onEnd返回记忆的版本，防止下一个effect中无意义重复执行
     const onEnd = useCallback(() => {
         if (touchRef.current) {
             touchRef.current = false;
-            setBoxClass(className);
-            setBoxStyle(style);
+            setIsActive(false);
         }
-    }, [className, style]);
+    }, []);
     // PC环境释放逻辑
     useEffect(() => {
         if (!disable && !touchable) {
@@ -70,7 +53,14 @@ export function Clickable(props) {
             };
         }
     }, [disable, touchable, onEnd]);
-    const fullAttrs = Object.assign(Object.assign({}, attrs), { className: boxClass, style: boxStyle });
+    // 根据激活状态计算最终的 className 和 style
+    const finalClassName = isActive && typeof activeClassName === 'string'
+        ? (typeof className === 'string' ? `${className} ${activeClassName}` : activeClassName)
+        : className;
+    const finalStyle = isActive && typeof finalActiveStyle === 'object'
+        ? (typeof style === 'object' ? Object.assign(Object.assign({}, style), finalActiveStyle) : finalActiveStyle)
+        : style;
+    const fullAttrs = Object.assign(Object.assign({}, attrs), { className: finalClassName, style: finalStyle });
     // 非禁用状态有点击态行为
     if (!disable) {
         if (touchable) {

package/build/Container/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Global } from "@emotion/react";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState, } from "react";
 import { getContextValue } from "../context";
 import { useWindowResize } from "../Effect/useWindowResize";
 import { useViewport } from "../Effect/useViewport";
@@ -13,85 +13,72 @@ export function Container(props) {
     const { minDocWidth, maxDocWidth } = getContextValue();
     // 获取环境变量
     const { designWidth = 750, globalStyle, children } = props;
-    // 计算根字体尺寸的函数（使用 useCallback 避免重复创建）
+    // 计算理论根字体大小（未经浏览器缩放修正）
     const calculateFontSize = useCallback((width) => {
-        let targetWidth = width;
-        if (width >= maxDocWidth) {
-            targetWidth = maxDocWidth;
-        }
-        else if (width <= minDocWidth) {
-            targetWidth = minDocWidth;
-        }
+        const targetWidth = Math.min(Math.max(width, minDocWidth), maxDocWidth);
         return (targetWidth * 100) / designWidth;
     }, [designWidth, minDocWidth, maxDocWidth]);
-    // 基准字体尺寸（初始化时计算一次）
-    const [baseFontSize, setBaseFontSize] = useState(() => calculateFontSize(window.innerWidth));
-    // 是否已完成初始化（包括字体缩放修正）
+    // 理论基准字体大小（跟随窗口尺寸变化）
+    const [rawFontSize, setRawFontSize] = useState(() => calculateFontSize(window.innerWidth));
+    // 浏览器字体缩放因子（>1 表示用户放大了系统字体，<1 表示缩小）
+    // 独立存储，使得 resize 后缩放修正依然生效
+    const [scaleFactor, setScaleFactor] = useState(1);
+    // 是否已完成字体缩放检测
     const [isInitialized, setIsInitialized] = useState(false);
-    // 字体缩放修正逻辑（处理浏览器字体设置影响）
-    // 使用 useLayoutEffect 在 DOM 更新后立即同步执行，避免闪烁
-    useEffect(() => {
-        // 只在未初始化时检查一次
+    // 修正后的字体大小：统一对所有字体计算应用缩放修正
+    const correctedFontSize = useMemo(() => scaleFactor === 1
+        ? rawFontSize
+        : Math.round((rawFontSize / scaleFactor) * 10) / 10, [rawFontSize, scaleFactor]);
+    // 字体缩放检测
+    // Emotion 的 <Global> 通过 useInsertionEffect 注入样式，早于 useLayoutEffect
+    // 因此 useLayoutEffect 内 getComputedStyle 可正确读取已注入的字体大小
+    // 检测和修正均在浏览器绘制前同步完成，避免闪烁
+    useLayoutEffect(() => {
+        // 缩放因子在页面生命周期内不变，只需检测一次
         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]);
-    // 页面大小变化时，基准字体同步变化
-    // 使用 requestAnimationFrame 批量处理，避免频繁更新
+        const computedSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+        // 如果计算出的字体大小与期望不符（说明被浏览器字体设置影响了）
+        // 容差 1px，避免浮点精度导致误判
+        if (computedSize > 0 && Math.abs(computedSize - rawFontSize) > 1) {
+            // 记录缩放因子，后续所有字体计算（包括 resize）都会自动应用
+            setScaleFactor(computedSize / rawFontSize);
+        }
+        setIsInitialized(true);
+    }, [rawFontSize, isInitialized]);
+    // 窗口大小变化时更新理论字体大小
+    // correctedFontSize 通过 useMemo 自动应用 scaleFactor 修正
     useWindowResize(() => {
-        requestAnimationFrame(() => {
-            const newFontSize = calculateFontSize(window.innerWidth);
-            if (newFontSize !== baseFontSize) {
-                setBaseFontSize(newFontSize);
-            }
-        });
+        setRawFontSize(calculateFontSize(window.innerWidth));
     });
-    // 设置meta, 确保viewport的合法逻辑
+    // 设置 viewport meta
     useViewport();
-    // 页面初始化逻辑
+    // 激活 iOS 上的 :active 伪类
     useEffect(() => {
-        // 激活iOS上的:active伪类
-        const activable = () => { };
-        document.body.addEventListener("touchstart", activable, { passive: true });
+        const noop = () => { };
+        document.body.addEventListener("touchstart", noop, { passive: true });
         return () => {
-            document.body.removeEventListener("touchstart", activable);
+            document.body.removeEventListener("touchstart", noop);
         };
     }, []);
-    // 使用 useMemo 缓存媒体查询样式，避免每次渲染都重新计算
-    const mediaQueryStyles = useMemo(() => ({
-        [`@media (min-width: ${maxDocWidth}px)`]: {
-            html: {
-                fontSize: `${(100 * maxDocWidth) / designWidth}px`,
+    // 媒体查询边界样式（同样应用缩放修正，与 JS 计算保持一致）
+    const mediaQueryStyles = useMemo(() => {
+        const correct = (size) => scaleFactor === 1
+            ? size
+            : Math.round((size / scaleFactor) * 10) / 10;
+        return {
+            [`@media (min-width: ${maxDocWidth}px)`]: {
+                html: {
+                    fontSize: `${correct((100 * maxDocWidth) / designWidth)}px`,
+                },
             },
-        },
-        [`@media (max-width: ${minDocWidth}px)`]: {
-            html: {
-                fontSize: `${(100 * minDocWidth) / designWidth}px`,
+            [`@media (max-width: ${minDocWidth}px)`]: {
+                html: {
+                    fontSize: `${correct((100 * minDocWidth) / designWidth)}px`,
+                },
             },
-        },
-    }), [designWidth, minDocWidth, maxDocWidth]);
+        };
+    }, [designWidth, minDocWidth, maxDocWidth, scaleFactor]);
     return (_jsxs(React.Fragment, { children: [_jsx(Global, { styles: [
                     Object.assign({ "*": {
                             boxSizing: "border-box",
@@ -99,7 +86,7 @@ export function Container(props) {
                             WebkitTapHighlightColor: "transparent",
                             WebkitOverflowScrolling: "touch",
                             WebkitTextSizeAdjust: "100%",
-                            fontSize: `${baseFontSize}px`,
+                            fontSize: `${correctedFontSize}px`,
                             touchAction: "manipulation",
                         }, body: {
                             fontSize: "16px",

package/build/Dialog/style.js

@@ -117,7 +117,7 @@ export function getAnimation(type, status) {
     return {
         keyframes,
         animation: css({
-            animation: `${keyframes} 300ms ease`,
+            animation: `${keyframes} 300ms ease forwards`,
         }),
     };
 }
@@ -126,7 +126,7 @@ export const style = {
         animation: `${maskShow} 300ms ease`,
     }),
     maskHide: css({
-        animation: `${maskHide} 300ms ease`,
+        animation: `${maskHide} 300ms ease forwards`,
     }),
     mask: css({
         zIndex: 1,

package/build/Overlay/index.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useLayoutEffect, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import { getContextValue } from "../context";
 import { useWindowResize } from "../Effect/useWindowResize";
@@ -23,13 +23,6 @@ export function Overlay(props) {
     const { children, outside = false, centerContent = true, fullScreen = true, maskColor = "rgba(0, 0, 0, .6)" } = props, extra = __rest(props, ["children", "outside", "centerContent", "fullScreen", "maskColor"]);
     const [mount, setMount] = useState(null);
     const [innerWidth, setInnerWidth] = useState(window.innerWidth);
-    // 这里是为了修复一个非挂载状态触发resize事件的bug
-    const isUnmount = useRef(false);
-    useEffect(() => {
-        return () => {
-            isUnmount.current = true;
-        };
-    }, []);
     useLayoutEffect(() => {
         if (outside) {
             const div = document.createElement("div");
@@ -42,9 +35,7 @@ export function Overlay(props) {
     }, [outside]);
     // 页面大小变化时，innerWidth 也会更新
     useWindowResize(() => {
-        if (!isUnmount.current) {
-            setInnerWidth(window.innerWidth);
-        }
+        setInnerWidth(window.innerWidth);
     });
     const ctx = getContextValue();
     // 使用 useMemo 缓存样式计算，避免每次渲染都重新计算

package/build/ScrollView/index.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Indicator } from "../Indicator";
 import { RowCenter } from "../Flex/Row";
 import { style } from "./style";
@@ -31,19 +31,22 @@ export function ScrollView(props) {
     // 节流控制
     const throttleTimer = useRef(undefined);
     const lastCallTime = useRef(0);
-    // 使用 ref 保存最新的回调函数，避免闭包陈旧
-    const callbacksRef = useRef({
+    // 使用 ref 保存所有滚动处理需要的 props，彻底消除陈旧闭包
+    const propsRef = useRef({
         onScroll,
         onReachTop,
         onReachBottom,
+        reachTopThreshold,
+        reachBottomThreshold,
     });
-    // 每次渲染都更新 ref 中的回调
-    callbacksRef.current = {
+    propsRef.current = {
         onScroll,
         onReachTop,
         onReachBottom,
+        reachTopThreshold,
+        reachBottomThreshold,
     };
-    // container是否有滚动条
+    // container 是否有滚动条
     const [hasScrollBar, setHasScrollBar] = useState(false);
     // 检查是否有滚动条
     const checkScrollBar = useCallback(() => {
@@ -72,41 +75,24 @@ export function ScrollView(props) {
             resizeObserver.disconnect();
         };
     }, [checkScrollBar]);
-    // 滚动回调（带节流）
-    const scrollCallback = useCallback((rawEvent) => {
-        const now = Date.now();
-        // 节流控制
-        if (scrollThrottle > 0 && now - lastCallTime.current < scrollThrottle) {
-            // 清除之前的定时器
-            if (throttleTimer.current) {
-                clearTimeout(throttleTimer.current);
-            }
-            // 设置新的定时器，确保最后一次调用会被执行
-            throttleTimer.current = window.setTimeout(() => {
-                handleScroll(rawEvent);
-            }, scrollThrottle);
-            return;
-        }
-        lastCallTime.current = now;
-        handleScroll(rawEvent);
-    }, [scrollThrottle, reachTopThreshold, reachBottomThreshold]);
-    // 实际的滚动处理逻辑
-    const handleScroll = useCallback((rawEvent) => {
-        var _a, _b, _c, _d, _e, _f;
+    // 核心滚动处理逻辑
+    // 所有外部值从 ref 读取，deps 为空，引用永远稳定，不存在闭包过期问题
+    const processScroll = useCallback((rawEvent) => {
         const box = container.current;
         if (!box)
             return;
-        // 已经滚动的距离
+        const { onScroll, onReachTop, onReachBottom, reachTopThreshold, reachBottomThreshold, } = propsRef.current;
         const scrollTop = box.scrollTop;
-        // 滚动容器的包含滚动内容的高度
         const contentHeight = box.scrollHeight;
-        // 滚动容器的视口高度
-        const containerHeight = Math.min(box.clientHeight, box.offsetHeight);
-        // 最大可滚动距离
+        // clientHeight 即可视区域高度（不含 border），无需 Math.min(clientHeight, offsetHeight)
+        const containerHeight = box.clientHeight;
         const maxScroll = contentHeight - containerHeight;
-        // 计算滚动方向
-        const direction = scrollTop > lastScrollTop.current ? "downward" : "upward";
-        // 生成滚动事件参数
+        // 防止零位移时误判方向（如内容变化触发的 scroll 事件）
+        if (scrollTop === lastScrollTop.current && lastScrollTop.current !== 0) {
+            return;
+        }
+        // scrollTop 增大 => 向下滚动；相等（初始 0→0）视为向下
+        const direction = scrollTop >= lastScrollTop.current ? "downward" : "upward";
         const event = {
             containerHeight,
             contentHeight,
@@ -115,42 +101,74 @@ export function ScrollView(props) {
             direction,
             rawEvent,
         };
-        // 调用通用滚动事件（使用 ref 中的最新回调）
-        (_b = (_a = callbacksRef.current).onScroll) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
         // 触顶逻辑（防止重复触发）
         if (direction === "upward" && scrollTop <= reachTopThreshold) {
             if (!hasReachedTop.current) {
                 hasReachedTop.current = true;
-                hasReachedBottom.current = false; // 重置触底标记
-                (_d = (_c = callbacksRef.current).onReachTop) === null || _d === void 0 ? void 0 : _d.call(_c, event);
+                hasReachedBottom.current = false;
+                onReachTop === null || onReachTop === void 0 ? void 0 : onReachTop(event);
             }
         }
         else if (scrollTop > reachTopThreshold) {
             hasReachedTop.current = false;
         }
         // 触底逻辑（防止重复触发）
-        if (direction === "downward" && scrollTop >= maxScroll - reachBottomThreshold) {
+        if (direction === "downward" &&
+            maxScroll > 0 &&
+            scrollTop >= maxScroll - reachBottomThreshold) {
             if (!hasReachedBottom.current) {
                 hasReachedBottom.current = true;
-                hasReachedTop.current = false; // 重置触顶标记
-                (_f = (_e = callbacksRef.current).onReachBottom) === null || _f === void 0 ? void 0 : _f.call(_e, event);
+                hasReachedTop.current = false;
+                onReachBottom === null || onReachBottom === void 0 ? void 0 : onReachBottom(event);
             }
         }
         else if (scrollTop < maxScroll - reachBottomThreshold) {
             hasReachedBottom.current = false;
         }
-        // 更新scrollTop上次的值
         lastScrollTop.current = scrollTop;
-    }, [reachTopThreshold, reachBottomThreshold]);
+    }, []);
+    // 节流滚动回调（leading + trailing）
+    const scrollCallback = useCallback((rawEvent) => {
+        // 不节流时直接执行
+        if (scrollThrottle <= 0) {
+            processScroll(rawEvent);
+            return;
+        }
+        const now = Date.now();
+        const elapsed = now - lastCallTime.current;
+        if (elapsed >= scrollThrottle) {
+            // 前沿立即执行
+            lastCallTime.current = now;
+            processScroll(rawEvent);
+            // 消除挂起的尾部定时器
+            if (throttleTimer.current !== undefined) {
+                clearTimeout(throttleTimer.current);
+                throttleTimer.current = undefined;
+            }
+        }
+        else {
+            // 尾部调用：按剩余时间调度，保证滚动停止后最终状态被处理
+            if (throttleTimer.current !== undefined) {
+                clearTimeout(throttleTimer.current);
+            }
+            throttleTimer.current = window.setTimeout(() => {
+                lastCallTime.current = Date.now();
+                throttleTimer.current = undefined;
+                // 尾部调用不传 rawEvent（已过期），processScroll 从 DOM 读取实时位置
+                processScroll();
+            }, scrollThrottle - elapsed);
+        }
+    }, [scrollThrottle, processScroll]);
     // 清理节流定时器
-    useLayoutEffect(() => {
+    useEffect(() => {
         return () => {
-            if (throttleTimer.current) {
+            if (throttleTimer.current !== undefined) {
                 clearTimeout(throttleTimer.current);
             }
         };
     }, []);
-    // loading内容
+    // loading 内容
     let showLoadingContent = null;
     if (showLoading) {
         if (!loadingContent) {

package/build/Toast/index.js

@@ -26,11 +26,13 @@ export function showToast(option) {
  */
 let portalDOM = null;
 export function showUniqToast(option) {
-    if (!portalDOM) {
-        portalDOM = createPortalDOM();
+    // 先清理上一个 Toast 的 DOM 容器，避免快速连续调用时旧容器泄漏
+    if (portalDOM) {
+        portalDOM.unmount();
+        portalDOM = null;
     }
+    portalDOM = createPortalDOM();
     let props = {};
-    // 默认Toast是唯一的
     if (React.isValidElement(option) || typeof option !== 'object') {
         props.content = option;
     }

package/build/utils/Countdown.js

@@ -14,8 +14,14 @@ export class Countdown {
          * s：秒
          */
         this.format = ['d', 'h', 'i', 's'];
-        if (typeof option.remain === 'number' && option.remain >= 0) {
-            this.total = this.remain = option.remain;
+        if (typeof option.remain === 'string') {
+            const parsed = parseFloat(option.remain);
+            if (!isNaN(parsed) && parsed >= 0) {
+                this.total = this.remain = Math.floor(parsed);
+            }
+        }
+        else if (typeof option.remain === 'number' && option.remain >= 0) {
+            this.total = this.remain = Math.floor(option.remain);
         }
         // 倒计时需要展示的时间格式
         if (typeof option.format === 'string') {
@@ -75,11 +81,12 @@ export class Countdown {
             }
         }, 1000); // ← 添加 1000ms 间隔
     }
-    // 停止倒计时
+    // 停止倒计时（暂停并保留当前剩余时间，可再次 start 恢复）
     stop() {
         var _a;
-        this.total = this.remain;
         (_a = this._stopTick) === null || _a === void 0 ? void 0 : _a.call(this);
+        this._stopTick = undefined;
+        this.total = this.remain;
     }
     /**
      * 格式化每次更新的值

package/build/utils/ago.js

@@ -6,80 +6,67 @@ import dayjs from 'dayjs';
 export function ago(date) {
     const now = dayjs();
     const input = dayjs(date);
-    const aYearAgo = now.subtract(1, 'year');
-    const aMonthAgo = now.subtract(1, 'month');
-    const aDayAgo = now.subtract(1, 'day');
-    const aHourAgo = now.subtract(1, 'hour');
-    const aMinuteAgo = now.subtract(1, 'minute');
-    // 多少年前
-    if (input.isBefore(aYearAgo)) {
-        const diff = now.year() - input.year();
-        const nYearsAgo = now.subtract(diff, 'year');
-        let showNum = diff;
-        if (input.isAfter(nYearsAgo)) {
-            showNum = diff - 1;
-        }
+    if (!input.isValid()) {
         return {
-            num: showNum,
+            num: 0,
+            unit: 's',
+            format: '刚刚',
+        };
+    }
+    const isFuture = input.isAfter(now);
+    const from = isFuture ? now : input;
+    const to = isFuture ? input : now;
+    const years = to.diff(from, 'year');
+    if (years >= 1) {
+        return {
+            num: years,
             unit: 'y',
-            format: `${showNum}年前`,
+            format: `${years}年${isFuture ? '后' : '前'}`,
         };
     }
-    // 多少月前
-    if (input.isBefore(aMonthAgo)) {
-        let showNum = 1;
-        for (let n = 2; n <= 12; n++) {
-            const nMonthAgo = now.subtract(n, 'month');
-            if (input.isAfter(nMonthAgo)) {
-                showNum = n - 1;
-                break;
-            }
-        }
+    const months = to.diff(from, 'month');
+    if (months >= 1) {
         return {
-            num: showNum,
+            num: months,
             unit: 'm',
-            format: `${showNum}个月前`,
+            format: `${months}个月${isFuture ? '后' : '前'}`,
         };
     }
-    // 多少天前
-    if (input.isBefore(aDayAgo)) {
-        const showNum = Math.floor((now.unix() - input.unix()) / 86400);
+    const days = to.diff(from, 'day');
+    if (days >= 1) {
         return {
-            num: showNum,
+            num: days,
             unit: 'd',
-            format: `${showNum}天前`,
+            format: `${days}天${isFuture ? '后' : '前'}`,
         };
     }
-    // 多少小时前
-    if (input.isBefore(aHourAgo)) {
-        const showNum = Math.floor((now.unix() - input.unix()) / 3600);
+    const hours = to.diff(from, 'hour');
+    if (hours >= 1) {
         return {
-            num: showNum,
+            num: hours,
             unit: 'h',
-            format: `${showNum}个小时前`,
+            format: `${hours}小时${isFuture ? '后' : '前'}`,
         };
     }
-    // 多少分钟前
-    if (input.isBefore(aMinuteAgo)) {
-        const showNum = Math.floor((now.unix() - input.unix()) / 60);
+    const minutes = to.diff(from, 'minute');
+    if (minutes >= 1) {
         return {
-            num: showNum,
+            num: minutes,
             unit: 'i',
-            format: `${showNum}分钟前`,
+            format: `${minutes}分钟${isFuture ? '后' : '前'}`,
         };
     }
-    // 多少秒前
-    const showNum = now.unix() - input.unix();
-    let format;
-    if (showNum > 10) {
-        format = `${showNum}秒前`;
-    }
-    else {
-        format = '刚刚';
+    const seconds = to.diff(from, 'second');
+    if (seconds < 10) {
+        return {
+            num: seconds,
+            unit: 's',
+            format: isFuture ? '马上' : '刚刚',
+        };
     }
     return {
-        num: showNum,
+        num: seconds,
         unit: 's',
-        format,
+        format: `${seconds}秒${isFuture ? '后' : '前'}`,
     };
 }

package/build/utils/createApp.js

@@ -79,23 +79,38 @@ export function createApp(option) {
                 yield (onBefore === null || onBefore === void 0 ? void 0 : onBefore(normalizedPath));
                 // 加载并显示页面
                 if (typeof render === "function") {
-                    const pageContent = yield render(normalizedPath);
-                    // 如果返回 null/undefined，视为页面未找到
-                    if (pageContent === null || pageContent === undefined) {
+                    try {
+                        const pageContent = yield render(normalizedPath);
+                        // 如果返回 null/undefined，视为页面未找到
+                        if (pageContent === null || pageContent === undefined) {
+                            if (typeof notFound === "function") {
+                                setPage(yield notFound(normalizedPath));
+                            }
+                            else {
+                                // 默认 404 页面
+                                setPage(_jsxs("div", { children: ["Not Found: ", normalizedPath] }));
+                            }
+                            return;
+                        }
+                        setPage(pageContent);
+                    }
+                    catch (_a) {
+                        // 动态 import 失败等场景
                         if (typeof notFound === "function") {
                             setPage(yield notFound(normalizedPath));
                         }
                         else {
-                            // 默认 404 页面
                             setPage(_jsxs("div", { children: ["Not Found: ", normalizedPath] }));
                         }
                         return;
                     }
-                    setPage(pageContent);
                 }
                 // 页面加载后钩子
                 yield (onAfter === null || onAfter === void 0 ? void 0 : onAfter(normalizedPath));
-            }), [onBefore, onAfter, loading, render, notFound]);
+            }), 
+            // 所有外部变量在闭包创建时已捕获，不会变化
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            []);
             /**
              * 监听路由变化
              */
@@ -119,8 +134,8 @@ export function createApp(option) {
         else if (option.target instanceof HTMLElement) {
             mount = option.target;
         }
-        else {
-            throw new Error("No mounted object is specified");
+        if (!mount) {
+            throw new Error(`Mount target not found: ${typeof option.target === "string" ? option.target : "invalid element"}`);
         }
         const root = createRoot(mount);
         root.render(_jsx(App, {}));

package/build/utils/defaultScroll.d.ts

@@ -1,9 +1,9 @@
-/**
- * 检测是否支持passive事件绑定
- */
-export declare let passiveSupported: boolean;
 /**
  * 禁用和启用默认滚动
+ *
+ * 注意：现代浏览器将 document/documentElement 上的 touchmove 监听器
+ * 默认视为 passive: true，此时 preventDefault() 会静默失效。
+ * 因此必须显式声明 passive: false 才能真正阻止默认滚动行为。
  */
 export declare const defaultScroll: {
     disable(): void;

package/build/utils/defaultScroll.js

@@ -1,16 +1,3 @@
-/**
- * 检测是否支持passive事件绑定
- */
-export let passiveSupported = false;
-try {
-    window.addEventListener('test', () => undefined, Object.defineProperty({}, 'passive', {
-        get: function () {
-            passiveSupported = true;
-        },
-    }));
-    // eslint-disable-next-line no-empty
-}
-catch (err) { }
 /**
  * 触摸移动事件处理器
  */
@@ -19,12 +6,16 @@ const touchMoveHandler = (event) => {
 };
 /**
  * 禁用和启用默认滚动
+ *
+ * 注意：现代浏览器将 document/documentElement 上的 touchmove 监听器
+ * 默认视为 passive: true，此时 preventDefault() 会静默失效。
+ * 因此必须显式声明 passive: false 才能真正阻止默认滚动行为。
  */
 export const defaultScroll = {
     disable() {
-        document.documentElement.addEventListener('touchmove', touchMoveHandler, passiveSupported ? { capture: false, passive: false } : false);
+        document.documentElement.addEventListener('touchmove', touchMoveHandler, { capture: false, passive: false });
     },
     enable() {
-        document.documentElement.removeEventListener('touchmove', touchMoveHandler, passiveSupported ? { capture: false } : false);
+        document.documentElement.removeEventListener('touchmove', touchMoveHandler, { capture: false });
     },
 };

package/build/utils/dom.js

@@ -20,15 +20,12 @@ export function createPortalDOM(point) {
             root.render(component);
         },
         unmount() {
-            root.unmount();
-            if (container instanceof HTMLDivElement) {
-                if (typeof container.remove === 'function') {
-                    container.remove();
-                }
-                else {
-                    mountPoint.removeChild(container);
-                }
+            // 先从 DOM 移除容器，再卸载 React 树
+            // 避免 React 18+ 在已卸载的根上发出警告
+            if (container.parentNode) {
+                container.parentNode.removeChild(container);
             }
+            root.unmount();
         },
     };
 }

package/build/utils/jsonp.js

@@ -25,20 +25,23 @@ export function jsonp(url_1) {
             }
             const urlObject = new URL(url);
             urlObject.searchParams.set(callbackName, funcName);
+            // 清理辅助函数
+            const cleanup = () => {
+                delete window[funcName];
+                script.remove();
+            };
             // 创建全局script
             const script = document.createElement('script');
             script.src = urlObject.href;
             document.body.appendChild(script);
             script.onerror = (error) => {
+                cleanup();
                 reject(error);
             };
             // 创建全局函数
             window[funcName] = (result) => {
+                cleanup();
                 resolve(result);
-                // 删除全局函数
-                delete window[funcName];
-                // 删除临时脚本
-                script.remove();
             };
         });
     });

package/build/utils/request.js

@@ -210,42 +210,32 @@ export function sendRequest(option) {
     return __awaiter(this, void 0, void 0, function* () {
         const { url, fetchOption, timeout } = parseRequestOption(option);
         const controller = new AbortController();
-        return Promise.race([
-            // 网络请求
-            fetch(url, Object.assign(Object.assign({}, fetchOption), { signal: controller.signal }))
-                .then((response) => {
-                return response.json();
-            })
-                .then((result) => {
-                return result;
-            })
-                .catch((error) => {
-                // 如果是主动取消的请求，返回超时错误
-                if (error.name === 'AbortError') {
-                    const result = {
-                        code: -10001,
-                        message: "Network request timeout",
-                    };
-                    return result;
-                }
+        // 超时定时器，请求完成后清除以防泄漏
+        const timeoutId = window.setTimeout(() => {
+            controller.abort();
+        }, timeout !== null && timeout !== void 0 ? timeout : 30000);
+        try {
+            const response = yield fetch(url, Object.assign(Object.assign({}, fetchOption), { signal: controller.signal }));
+            const result = yield response.json();
+            return result;
+        }
+        catch (error) {
+            if (error.name === 'AbortError') {
                 const result = {
-                    code: -10000,
-                    message: "An exception occurred in the network request",
+                    code: -10001,
+                    message: "Network request timeout",
                 };
                 return result;
-            }),
-            // 超时逻辑
-            new Promise((resolve) => {
-                window.setTimeout(() => {
-                    controller.abort(); // 取消请求
-                    const result = {
-                        code: -10001,
-                        message: "Network request timeout",
-                    };
-                    resolve(result);
-                }, timeout !== null && timeout !== void 0 ? timeout : 30000);
-            }),
-        ]);
+            }
+            const result = {
+                code: -10000,
+                message: "An exception occurred in the network request",
+            };
+            return result;
+        }
+        finally {
+            clearTimeout(timeoutId);
+        }
     });
 }
 /**

package/build/utils/tick.js

@@ -4,42 +4,35 @@
  * @param interval
  */
 export function tick(callback, interval) {
-    // 执行状态，是否正在执行
     let isRunning;
     let frame;
     let frameId;
-    // 设置了tick的间隔
-    if (interval && typeof interval === 'number') {
+    // 有效的正整数间隔才走间隔分支
+    if (typeof interval === 'number' && interval > 0) {
         let lastTick = Date.now();
         frame = () => {
-            if (!isRunning) {
+            if (!isRunning)
                 return;
-            }
             frameId = requestAnimationFrame(frame);
             const now = Date.now();
-            // 每次间隔频率逻辑上保持一致，即使帧频不一致
             if (now - lastTick >= interval) {
-                // 本次tick的时间为上次的时间加上频率间隔
-                lastTick = lastTick + interval;
+                // 直接对齐到当前时间，避免长时间后台切回后的追赶风暴
+                lastTick = now;
                 callback();
             }
         };
     }
-    // 没有设置tick的间隔
     else {
+        // 没有设置 interval 或 interval <= 0 时，每帧执行
         frame = () => {
-            if (!isRunning) {
+            if (!isRunning)
                 return;
-            }
             frameId = requestAnimationFrame(frame);
-            // 没有设置interval时，每帧都执行
             callback();
         };
     }
-    // 开始执行
     isRunning = true;
     frameId = requestAnimationFrame(frame);
-    // 返回一个可以立即停止的函数
     return () => {
         isRunning = false;
         cancelAnimationFrame(frameId);

package/build/utils/uniqKey.js

@@ -1,16 +1,16 @@
 let keyIndex = 0;
-let last = Date.now();
+let lastTimestamp = 0;
 /**
  * 生成一个全局唯一的key
  * @returns
  */
 export function uniqKey() {
-    keyIndex += 1;
-    let now = Date.now();
-    if (now !== last && keyIndex > 1e9) {
+    const now = Date.now();
+    // 时间戳变化时重置计数器
+    if (now !== lastTimestamp) {
         keyIndex = 0;
+        lastTimestamp = now;
     }
-    const key = now.toString(36) + keyIndex.toString(36);
-    last = now;
-    return key;
+    keyIndex += 1;
+    return now.toString(36) + keyIndex.toString(36);
 }

package/build/utils/wait.js

@@ -31,13 +31,13 @@ export function waitUntil(condition, maxTime) {
         return new Promise((resolve) => {
             const stop = tick(() => {
                 const now = Date.now();
-                const result = condition();
                 // 超时返回false
                 if (now - start >= maxTime) {
                     stop();
                     resolve(false);
                     return;
                 }
+                const result = condition();
                 // 处理结果
                 const handle = (res) => {
                     if (res) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clxx",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "Basic JS library for mobile devices",
   "main": "./build/index.js",
   "module": "./build/index.js",
@@ -35,20 +35,20 @@
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "dayjs": "^1.11.18",
+    "dayjs": "^1.11.19",
     "history": "^5.3.0",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.23"
   },
   "peerDependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.20",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "csstype": "^3.1.3",
-    "rimraf": "^6.0.1",
+    "@types/lodash": "^4.17.24",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "csstype": "^3.2.3",
+    "rimraf": "^6.1.3",
     "typescript": "^5.9.3"
   }
 }

package/test/eslint.config.js

@@ -10,12 +10,15 @@ export default defineConfig([
     files: ['**/*.{js,jsx}'],
     extends: [
       js.configs.recommended,
-      reactHooks.configs['recommended-latest'],
+      reactHooks.configs.flat['recommended-latest'],
       reactRefresh.configs.vite,
     ],
     languageOptions: {
       ecmaVersion: 2020,
-      globals: globals.browser,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
       parserOptions: {
         ecmaVersion: 'latest',
         ecmaFeatures: { jsx: true },

package/test/package.json

@@ -10,18 +10,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@eslint/js": "^9.36.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "eslint": "^9.36.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.22",
-    "globals": "^16.4.0",
-    "vite": "^7.1.7"
+    "@eslint/js": "^9.39.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^9.39.3",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "vite": "^7.3.1"
   }
 }

package/test/src/ago/index.jsx

@@ -2,6 +2,8 @@ import React from "react";
 import { Ago } from "@";
 
 export default function Index() {
+  const now = 1583314718595;
+
   return (
     <div>
       <p>2019-11-2</p>
@@ -17,7 +19,7 @@ export default function Index() {
       <Ago date="2018/07/06 12:04:36" style={{ color: "red" }} />
       <hr />
       <p>Date.now()</p>
-      <Ago date={Date.now()} style={{ color: "red" }} />
+      <Ago date={now} style={{ color: "red" }} />
       <hr />
       <p>new Date("2012-07-16 12:30:06")</p>
       <Ago date={new Date("2012-07-16 12:30:06")} style={{ color: "red" }} />

package/test/src/index.jsx

@@ -7,7 +7,8 @@ createApp({
   target: "#root",
   // maxDocWidth: 10000,
   async render(pathname) {
-    let page = await import(`./${pathname}/index.jsx`);
+    const module = await import(`./${pathname}/index.jsx`);
+    const Page = module.default;
     if (pathname === 'index') {
       return <Home />;
     }
@@ -23,7 +24,7 @@ createApp({
           </button>
         </div>
         <div className="demo">
-          <page.default />
+          <Page />
         </div>
       </>
     );