clxx 2.1.4 → 2.1.6

package/build/Alert/style.js

@@ -1,17 +1,12 @@
-import { adaptive } from "../utils/cssUtil";
 export const style = {
-    container: [
-        {
-            position: "relative",
-            overflow: "hidden",
-            backgroundColor: "#fff",
-            boxShadow: "0 0 2px 0 #00000055",
-        },
-        adaptive({
-            borderRadius: 16,
-            width: 750 * 0.84,
-        }),
-    ],
+    container: {
+        position: "relative",
+        overflow: "hidden",
+        backgroundColor: "#fff",
+        boxShadow: "0 0 2px 0 #00000055",
+        borderRadius: '.16rem',
+        width: 750 * 0.84 / 100 + 'rem',
+    },
     content: {
         position: "relative",
         "&:after,&::after": {
@@ -25,38 +20,30 @@ export const style = {
             transform: `scale(1, ${1 / window.devicePixelRatio})`,
         },
     },
-    title: [
-        {
-            textAlign: "center",
-            lineHeight: 1.4,
-            color: "#000",
-        },
-        adaptive({
-            paddingTop: 50,
-            paddingLeft: 40,
-            paddingRight: 40,
-            paddingBottom: 50,
-            fontSize: 33,
-        }),
-    ],
-    desc: [
-        {
-            textAlign: "center",
-            lineHeight: 1.4,
-            color: "#666",
-        },
-        adaptive({
-            paddingTop: 20,
-            paddingLeft: 40,
-            paddingRight: 40,
-            paddingBottom: 50,
-            fontSize: 29,
-        }),
-    ],
-    btnBox: adaptive({
+    title: {
+        textAlign: "center",
+        lineHeight: 1.4,
+        color: "#000",
+        paddingTop: '.5rem',
+        paddingLeft: '.4rem',
+        paddingRight: '.4rem',
+        paddingBottom: '.5rem',
+        fontSize: '.33rem',
+    },
+    desc: {
+        textAlign: "center",
+        lineHeight: 1.4,
+        color: "#666",
+        paddingTop: '.2rem',
+        paddingLeft: '.4rem',
+        paddingRight: '.4rem',
+        paddingBottom: '.5rem',
+        fontSize: '.29rem',
+    },
+    btnBox: {
         position: "relative",
-        height: 90,
-    }),
+        height: '.9rem',
+    },
     btnBoxWithCancel: {
         "&:after,&::after": {
             content: "''",
@@ -67,20 +54,16 @@ export const style = {
             marginLeft: "-.5px",
             width: "1px",
             backgroundColor: "#c0c0c0",
-            transform: `scale(${1 / devicePixelRatio}, 1)`,
+            transform: `scale(${1 / window.devicePixelRatio}, 1)`,
         },
     },
-    btn: [
-        {
-            flex: 1,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            userSelect: "none",
-            letterSpacing: "1px",
-        },
-        adaptive({
-            fontSize: 33,
-        }),
-    ],
+    btn: {
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        userSelect: "none",
+        letterSpacing: "1px",
+        fontSize: '.33rem',
+    },
 };

package/build/AutoGrid/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 React, { useCallback } from 'react';
+import React, { useMemo } from 'react';
 import { style } from './style';
 import { normalizeUnit } from '../utils/cssUtil';
 /**
@@ -19,55 +19,44 @@ import { normalizeUnit } from '../utils/cssUtil';
  */
 export function AutoGrid(props) {
     const { children, cols: rawCols = 1, gap: rawGap = 0, isSquare = false, itemStyle, containerStyle } = props, extra = __rest(props, ["children", "cols", "gap", "isSquare", "itemStyle", "containerStyle"]);
-    // 规范化数字单位
-    const cols = +rawCols;
+    // 规范化，确保 cols >= 1
+    const cols = Math.max(1, Math.floor(+rawCols) || 1);
     const gap = normalizeUnit(rawGap);
-    // 获取表格数据
-    const getGridData = useCallback(() => {
-        // 生成一个能创建表格的二维数组
-        let list = [];
+    // 将 children 分组为二维数组
+    const gridData = useMemo(() => {
+        const 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(null);
+            }
+        }
         return list;
-    }, [children]);
-    // 元素的最终样式
-    const finalItemBoxStyle = [
-        style.itemBoxStyle,
-        {
-            marginRight: gap,
-            width: `calc((100% - ${cols - 1} * ${gap}) / ${cols})`,
-        },
-    ];
-    /**
-     * 显示内容
-     */
-    const showContent = () => {
-        const gridData = getGridData();
-        return gridData.map((row, rowIndex) => {
-            // 每行的槽样式，最后一行没有
-            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", { css: [...finalCss, style.itemBoxSquare], children: _jsx("div", { css: style.itemInnerStyle, children: item }) }, colIndex));
-                    }
-                    else {
-                        return (_jsx("div", { css: finalCss, children: item }, colIndex));
-                    }
-                }) }, rowIndex));
-        });
-    };
-    return (_jsx("div", Object.assign({}, extra, { css: [containerStyle], children: showContent() })));
+    }, [children, cols]);
+    // 缓存 item 宽度计算
+    const itemWidth = useMemo(() => `calc((100% - ${cols - 1} * ${gap}) / ${cols})`, [cols, gap]);
+    return (_jsx("div", Object.assign({}, extra, { css: containerStyle, children: gridData.map((row, rowIndex) => (_jsx("div", { css: [
+                style.row,
+                { gap },
+                rowIndex !== gridData.length - 1 ? { marginBottom: gap } : undefined,
+            ], children: row.map((item, colIndex) => {
+                const isPlaceholder = item === null;
+                const boxCss = [
+                    style.itemBox,
+                    { width: itemWidth },
+                    isPlaceholder ? { visibility: 'hidden' } : undefined,
+                    isSquare ? style.itemBoxSquare : undefined,
+                    itemStyle,
+                ];
+                return isSquare ? (_jsx("div", { css: boxCss, children: _jsx("div", { css: style.itemInner, children: item }) }, colIndex)) : (_jsx("div", { css: boxCss, children: item }, colIndex));
+            }) }, rowIndex))) })));
 }

package/build/AutoGrid/style.d.ts

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

package/build/AutoGrid/style.js

@@ -1,11 +1,12 @@
 import { css } from "@emotion/react";
 export const style = {
-    itemBoxStyle: css({
-        float: "left",
+    row: css({
+        display: "flex",
+        width: "100%",
+    }),
+    itemBox: css({
         position: "relative",
-        "&:last-child": {
-            marginRight: 0,
-        },
+        minWidth: 0,
     }),
     itemBoxSquare: css({
         "&:after,&::after": {
@@ -16,24 +17,11 @@ export const style = {
             paddingBottom: "100%",
         },
     }),
-    itemNull: css({
-        visibility: "hidden",
-    }),
-    itemInnerStyle: css({
+    itemInner: css({
         position: "absolute",
         left: 0,
         right: 0,
         bottom: 0,
         top: 0,
     }),
-    // 行样式
-    rowStyle: css({
-        width: "100%",
-        "&:after,&::after": {
-            content: "''",
-            display: "table",
-            height: 0,
-            clear: "both"
-        }
-    })
 };

package/build/CarouselNotice/style.js

@@ -1,5 +1,4 @@
 import { keyframes } from "@emotion/react";
-import { adaptive } from "../utils/cssUtil";
 export const Bubble = keyframes `
   from {
     transform: translateY(0);
@@ -9,16 +8,12 @@ export const Bubble = keyframes `
   }
 `;
 export const style = {
-    box: [
-        {
-            position: "relative",
-            overflow: "hidden",
-            transition: "all 200ms",
-        },
-        adaptive({
-            height: 80,
-        }),
-    ],
+    box: {
+        position: "relative",
+        overflow: "hidden",
+        transition: "all 200ms",
+        height: '.8rem',
+    },
     wrapper: {
         position: "absolute",
         left: 0,

package/build/Clickable/index.d.ts

@@ -8,5 +8,6 @@ export interface ClickableProps extends React.HTMLProps<HTMLDivElement> {
     activeClassName?: string;
     activeStyle?: React.CSSProperties;
     disable?: boolean;
+    moveThreshold?: number;
 }
 export declare function Clickable(props: Partial<ClickableProps>): import("@emotion/react/jsx-runtime").JSX.Element;

package/build/Clickable/index.js

@@ -13,74 +13,110 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 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"]);
+    let { children, bubble = true, className, activeClassName, style, activeStyle, disable = false, moveThreshold = 10 } = props, attrs = __rest(props, ["children", "bubble", "className", "activeClassName", "style", "activeStyle", "disable", "moveThreshold"]);
     // 如果激活样式和激活类都不存在，则设置激活默认样式
-    // 使用 useMemo 避免每次渲染都创建新对象
-    const defaultActiveStyle = React.useMemo(() => {
+    const finalActiveStyle = 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);
-    // 监控属性的更新
-    useEffect(() => {
-        setBoxClass(className);
-        setBoxStyle(style);
-    }, [className, style]);
-    // 标记是否正处于触摸状态
+    const [isActive, setIsActive] = useState(false);
+    // 标记是否正处于触摸/按下状态
     const touchRef = useRef(false);
-    const onStart = (event) => {
+    // 是否已挂载（防止卸载后更新 state）
+    const mountedRef = useRef(true);
+    // 记录触摸起始坐标，用于 touchmove 取消
+    const startPos = useRef({ x: 0, y: 0 });
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    const activate = useCallback(() => {
+        if (mountedRef.current)
+            setIsActive(true);
+    }, []);
+    const deactivate = useCallback(() => {
+        if (mountedRef.current)
+            setIsActive(false);
+    }, []);
+    const onTouchStart = useCallback((event) => {
         if (!touchRef.current) {
             touchRef.current = true;
-            // 阻止冒泡
-            if (!bubble) {
+            if (!bubble)
                 event.stopPropagation();
+            const touch = event.touches[0];
+            startPos.current = { x: touch.clientX, y: touch.clientY };
+            activate();
+        }
+    }, [bubble, activate]);
+    const onTouchMove = useCallback((event) => {
+        if (touchRef.current) {
+            const touch = event.touches[0];
+            const dx = touch.clientX - startPos.current.x;
+            const dy = touch.clientY - startPos.current.y;
+            if (dx * dx + dy * dy > moveThreshold * moveThreshold) {
+                touchRef.current = false;
+                deactivate();
             }
-            // 激活目标样式
-            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);
-            }
         }
-    };
-    // onEnd返回记忆的版本，防止下一个effect中无意义重复执行
-    const onEnd = useCallback(() => {
+    }, [moveThreshold, deactivate]);
+    const onTouchEnd = useCallback((event) => {
+        if (touchRef.current) {
+            touchRef.current = false;
+            if (!bubble)
+                event.stopPropagation();
+            deactivate();
+        }
+    }, [bubble, deactivate]);
+    const onMouseDown = useCallback((event) => {
+        // 只响应鼠标左键
+        if (event.button !== 0)
+            return;
+        if (!touchRef.current) {
+            touchRef.current = true;
+            if (!bubble)
+                event.stopPropagation();
+            activate();
+        }
+    }, [bubble, activate]);
+    const onMouseUp = useCallback(() => {
         if (touchRef.current) {
             touchRef.current = false;
-            setBoxClass(className);
-            setBoxStyle(style);
+            deactivate();
         }
-    }, [className, style]);
-    // PC环境释放逻辑
+    }, [deactivate]);
+    // PC 环境：在 document 上监听 mouseup，处理鼠标移出元素后释放的场景
     useEffect(() => {
         if (!disable && !touchable) {
             const doc = document.documentElement;
-            doc.addEventListener('mouseup', onEnd);
+            doc.addEventListener('mouseup', onMouseUp);
             return () => {
-                doc.removeEventListener('mouseup', onEnd);
+                doc.removeEventListener('mouseup', onMouseUp);
             };
         }
-    }, [disable, touchable, onEnd]);
-    const fullAttrs = Object.assign(Object.assign({}, attrs), { className: boxClass, style: boxStyle });
+    }, [disable, touchable, onMouseUp]);
+    // 根据激活状态计算最终的 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) {
-            // 当前如果是触摸环境
-            fullAttrs.onTouchStart = onStart;
-            fullAttrs.onTouchEnd = onEnd;
-            fullAttrs.onTouchCancel = onEnd;
+            fullAttrs.onTouchStart = onTouchStart;
+            fullAttrs.onTouchMove = onTouchMove;
+            fullAttrs.onTouchEnd = onTouchEnd;
+            fullAttrs.onTouchCancel = onTouchEnd;
         }
         else {
-            fullAttrs.onMouseDown = onStart;
+            fullAttrs.onMouseDown = onMouseDown;
         }
     }
     return _jsx("div", Object.assign({}, fullAttrs, { children: children }));

package/build/Container/index.js

@@ -1,7 +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 { getContextValue } from "../context";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState, } from "react";
 import { useWindowResize } from "../Effect/useWindowResize";
 import { useViewport } from "../Effect/useViewport";
 /**
@@ -9,104 +8,71 @@ import { useViewport } from "../Effect/useViewport";
  * @param props
  */
 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;
-        }
-        return (targetWidth * 100) / designWidth;
-    }, [designWidth, minDocWidth, maxDocWidth]);
-    // 基准字体尺寸（初始化时计算一次）
-    const [baseFontSize, setBaseFontSize] = useState(() => calculateFontSize(window.innerWidth));
-    // 是否已完成初始化（包括字体缩放修正）
+        return (width * 100) / designWidth;
+    }, [designWidth]);
+    // 理论基准字体大小（跟随窗口尺寸变化）
+    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`,
-            },
-        },
-        [`@media (max-width: ${minDocWidth}px)`]: {
-            html: {
-                fontSize: `${(100 * minDocWidth) / designWidth}px`,
-            },
-        },
-    }), [designWidth, minDocWidth, maxDocWidth]);
     return (_jsxs(React.Fragment, { children: [_jsx(Global, { styles: [
-                    Object.assign({ "*": {
+                    {
+                        "*": {
                             boxSizing: "border-box",
-                        }, html: {
+                        },
+                        html: {
                             WebkitTapHighlightColor: "transparent",
                             WebkitOverflowScrolling: "touch",
                             WebkitTextSizeAdjust: "100%",
-                            fontSize: `${baseFontSize}px`,
+                            fontSize: `${correctedFontSize}px`,
                             touchAction: "manipulation",
-                        }, body: {
+                        },
+                        body: {
                             fontSize: "16px",
                             margin: "0 auto",
-                            maxWidth: `${maxDocWidth}px`,
-                            minWidth: `${minDocWidth}px`,
-                        } }, mediaQueryStyles),
+                        },
+                    },
                     globalStyle,
                 ] }), isInitialized ? children : null] }));
 }

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/Fixed/index.d.ts

@@ -0,0 +1,5 @@
+export interface FixedProps extends React.HTMLProps<HTMLDivElement> {
+    children?: React.ReactNode;
+    position?: "top" | "bottom" | "left" | "right";
+}
+export declare function Fixed(props: FixedProps): import("@emotion/react/jsx-runtime").JSX.Element;