clxx 2.1.4 → 2.1.6

package/build/Fixed/index.js

@@ -0,0 +1,37 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export function Fixed(props) {
+    const { children, position = "bottom" } = props, extra = __rest(props, ["children", "position"]);
+    const styles = {
+        position: "fixed",
+    };
+    if (position === "top") {
+        styles.top = 0;
+        styles.width = "100%";
+        styles.left = 0;
+    }
+    else if (position === "bottom") {
+        styles.bottom = 0;
+        styles.width = "100%";
+        styles.left = 0;
+    }
+    else if (position === "left") {
+        styles.left = 0;
+        styles.height = "100%";
+    }
+    else if (position === "right") {
+        styles.right = 0;
+        styles.height = "100%";
+    }
+    return (_jsx("div", Object.assign({}, props, { css: styles }, extra, { children: props.children })));
+}

package/build/Indicator/index.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import React from 'react';
-import { adaptive, normalizeUnit } from '../utils/cssUtil';
+import { normalizeUnit } from '../utils/cssUtil';
 import { getBarChangeKeyFrames } from './style';
 /**
  * SVG转圈指示器，一般用作loading效果
@@ -39,10 +39,10 @@ export function Indicator(props) {
         typeof size !== 'undefined' ? {
             width: normalizeUnit(size),
             height: normalizeUnit(size),
-        } : adaptive({
-            width: 60,
-            height: 60,
-        })
+        } : {
+            width: '.6rem',
+            height: '.6rem',
+        }
     ], [size]);
     const svgStyle = React.useMemo(() => css({
         width: '100%',

package/build/Loading/style.js

@@ -1,5 +1,4 @@
 import { keyframes } from "@emotion/react";
-import { adaptive } from "../utils/cssUtil";
 export const LoadingShow = keyframes `
   from {
     opacity: 0;
@@ -17,14 +16,14 @@ export const LoadingHide = keyframes `
   }
 `;
 export const style = {
-    boxCommon: adaptive({
+    boxCommon: {
         backgroundColor: `rgba(0, 0, 0, .8)`,
-        borderRadius: 16,
-    }),
-    box: adaptive({
-        width: 160,
-        height: 160,
-    }),
+        borderRadius: '.16rem',
+    },
+    box: {
+        width: '1.6rem',
+        height: '1.6rem',
+    },
     boxShow: {
         animation: `${LoadingShow} 200ms`,
     },
@@ -32,18 +31,18 @@ export const style = {
         animation: `${LoadingHide} 200ms`,
     },
     boxWithExtra: [
-        adaptive({ padding: 30 }),
+        { padding: '.3rem' },
         {
-            "> div:first-of-type": adaptive({
-                width: 48,
-                height: 48,
-            }),
+            "> div:first-of-type": {
+                width: '.48rem',
+                height: '.48rem',
+            },
         },
     ],
-    hint: adaptive({
+    hint: {
         color: "#f5f5f5dd",
         whiteSpace: "nowrap",
-        fontSize: 28,
-        marginLeft: 20,
-    }),
+        fontSize: '.28rem',
+        marginLeft: '.2rem',
+    },
 };

package/build/Overlay/index.js

@@ -10,10 +10,8 @@ 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";
 /**
  * 覆盖层，可以作为通用遮罩
  * @param props
@@ -22,14 +20,6 @@ import { useWindowResize } from "../Effect/useWindowResize";
 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");
@@ -40,36 +30,18 @@ export function Overlay(props) {
             };
         }
     }, [outside]);
-    // 页面大小变化时，innerWidth 也会更新
-    useWindowResize(() => {
-        if (!isUnmount.current) {
-            setInnerWidth(window.innerWidth);
-        }
-    });
-    const ctx = getContextValue();
     // 使用 useMemo 缓存样式计算，避免每次渲染都重新计算
     const style = useMemo(() => {
         const styles = [];
         // 如果是全屏，设置全屏样式
         if (fullScreen) {
-            // 获取宽度
-            let width = innerWidth;
-            if (width >= ctx.maxDocWidth) {
-                width = ctx.maxDocWidth;
-            }
-            else if (width <= ctx.minDocWidth) {
-                width = ctx.minDocWidth;
-            }
             styles.push({
                 zIndex: 9999,
                 position: "fixed",
                 top: 0,
-                left: "50%",
-                marginLeft: `-${width / 2}px`,
-                width: `${width}px`,
+                left: 0,
+                width: "100%",
                 height: "100%",
-                maxWidth: `${ctx.maxDocWidth}px`,
-                minWidth: `${ctx.minDocWidth}px`,
                 backgroundColor: maskColor,
             });
         }
@@ -82,7 +54,7 @@ export function Overlay(props) {
             });
         }
         return styles;
-    }, [fullScreen, innerWidth, ctx.maxDocWidth, ctx.minDocWidth, maskColor, centerContent]);
+    }, [fullScreen, maskColor, centerContent]);
     const content = (_jsx("div", Object.assign({ css: style }, extra, { children: children })));
     /**
      * 如果是挂载到当前位置，直接返回

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/ScrollView/style.js

@@ -1,4 +1,3 @@
-import { adaptive } from "../utils/cssUtil";
 export const style = {
     container: {
         overflow: "auto",
@@ -6,24 +5,24 @@ export const style = {
         WebkitOverflowScrolling: "touch",
     },
     loading: [
-        adaptive({
-            paddingTop: 15,
-            paddingBottom: 15,
-        }),
         {
-            "> div": adaptive({
-                width: 30,
-                height: 30,
-            }),
+            paddingTop: '.15rem',
+            paddingBottom: '.15rem',
+        },
+        {
+            "> div": {
+                width: '.3rem',
+                height: '.3rem',
+            },
             "> p": [
                 {
                     color: "#666",
                     lineHeight: 1,
                 },
-                adaptive({
-                    marginLeft: 16,
-                    fontSize: 24,
-                }),
+                {
+                    marginLeft: '.16rem',
+                    fontSize: '.24rem',
+                },
             ],
         },
     ],

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/Toast/style.js

@@ -1,5 +1,4 @@
 import { css, keyframes } from "@emotion/react";
-import { adaptive } from "../utils/cssUtil";
 export const middleShowAnimation = keyframes `
   from {
     opacity: 0;
@@ -93,16 +92,15 @@ export const style = {
             left: "50%",
             transform: "translateX(-50%)",
             zIndex: 9999,
-        }, adaptive({
-            maxWidth: 600,
-        }));
+            maxWidth: '6rem',
+        });
     },
     top(offset) {
-        return adaptive({ top: offset });
+        return css({ top: offset / 100 + 'rem' });
     },
     middle: css({ top: "50%" }),
     bottom(offset) {
-        return adaptive({ bottom: offset });
+        return css({ bottom: offset / 100 + 'rem' });
     },
     content: (radius) => {
         return css({
@@ -114,14 +112,13 @@ export const style = {
             textOverflow: "ellipsis",
             overflow: "hidden",
             lineHeight: 1,
-        }, adaptive({
-            fontSize: 26,
-            paddingLeft: 30,
-            paddingRight: 30,
-            paddingTop: 40,
-            paddingBottom: 40,
-            borderRadius: radius !== null && radius !== void 0 ? radius : 0,
-        }));
+            fontSize: '.26rem',
+            paddingLeft: '.3rem',
+            paddingRight: '.3rem',
+            paddingTop: '.4rem',
+            paddingBottom: '.4rem',
+            borderRadius: radius ? radius / 100 + 'rem' : 0,
+        });
     },
     contentMiddle: {
         transform: `translateY(-50%)`,

package/build/context.d.ts

@@ -1,6 +1,5 @@
 export interface ContextValue {
-    maxDocWidth: number;
-    minDocWidth: number;
+    [key: string]: any;
 }
 /**
  * 设置环境变量的值
@@ -12,4 +11,4 @@ export declare function setContextValue(value: Partial<ContextValue>): void;
  * @param key
  * @returns
  */
-export declare function getContextValue(key?: keyof ContextValue): number | ContextValue;
+export declare function getContextValue(key?: string): any;

package/build/context.js

@@ -1,7 +1,4 @@
-let context = {
-    maxDocWidth: 576,
-    minDocWidth: 312,
-};
+let context = {};
 /**
  * 设置环境变量的值
  * @param envValue

package/build/index.d.ts

@@ -9,7 +9,7 @@ export { Countdown } from './utils/Countdown';
 export { defaultScroll } from './utils/defaultScroll';
 export { is } from './utils/is';
 export { waitFor, waitUntil } from './utils/wait';
-export { normalizeUnit, splitValue, adaptive } from './utils/cssUtil';
+export { normalizeUnit, splitValue } from './utils/cssUtil';
 export { createApp, history, getHistory } from './utils/createApp';
 export { createPortalDOM } from './utils/dom';
 export { useInterval } from './Effect/useInterval';

package/build/index.js

@@ -9,7 +9,7 @@ export { Countdown } from './utils/Countdown';
 export { defaultScroll } from './utils/defaultScroll';
 export { is } from './utils/is';
 export { waitFor, waitUntil } from './utils/wait';
-export { normalizeUnit, splitValue, adaptive } from './utils/cssUtil';
+export { normalizeUnit, splitValue } from './utils/cssUtil';
 export { createApp, history, getHistory } from './utils/createApp';
 export { createPortalDOM } from './utils/dom';
 export { useInterval } from './Effect/useInterval';

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;
     }
     /**
      * 格式化每次更新的值