clxx 2.1.7 → 3.0.0

package/build/DatePicker/index.js

@@ -0,0 +1,230 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_UNITS = void 0;
+exports.DatePicker = DatePicker;
+exports.showDatePicker = showDatePicker;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const dayjs_1 = __importDefault(require("dayjs"));
+const Dialog_1 = require("../Dialog");
+const Clickable_1 = require("../Clickable");
+const style_1 = require("./style");
+const Column_1 = require("./Column");
+exports.DEFAULT_UNITS = {
+    year: "年",
+    month: "月",
+    day: "日",
+    hour: "时",
+    minute: "分",
+    second: "秒",
+};
+// ----------------- 主组件 -----------------
+function toDayjs(v) {
+    if (v === undefined)
+        return (0, dayjs_1.default)();
+    // dayjs 可以接收 Date/string/number/Dayjs
+    const d = (0, dayjs_1.default)(v);
+    return d.isValid() ? d : (0, dayjs_1.default)();
+}
+function range(start, end) {
+    const arr = [];
+    for (let i = start; i <= end; i++)
+        arr.push(i);
+    return arr;
+}
+const pad2 = (n) => (n < 10 ? "0" + n : "" + n);
+function DatePicker(props) {
+    const { value, precision = "day", title = "请选择", cancelText = "取消", confirmText = "确定", primary = style_1.DEFAULT_PRIMARY, rounded = true, showUnit = true, units, minDate, maxDate, onClose, onCancel, onConfirm, } = props;
+    const style = (0, react_1.useMemo)(() => (0, style_1.createStyle)(primary, rounded), [primary, rounded]);
+    // 合并单位配置：用户部分覆盖 + 默认中文
+    const u = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, exports.DEFAULT_UNITS), units)), [units]);
+    // showUnit=false 时不追加单位后缀
+    const suffix = (key) => (showUnit ? u[key] : "");
+    const minD = (0, react_1.useMemo)(() => (minDate !== undefined ? toDayjs(minDate) : (0, dayjs_1.default)("1900-01-01")), [minDate]);
+    const maxD = (0, react_1.useMemo)(() => maxDate !== undefined ? toDayjs(maxDate) : (0, dayjs_1.default)("2100-12-31 23:59:59"), [maxDate]);
+    // 初始值限制在 [minD, maxD] 范围内
+    const initial = (0, react_1.useMemo)(() => {
+        let d = toDayjs(value);
+        if (d.isBefore(minD))
+            d = minD;
+        if (d.isAfter(maxD))
+            d = maxD;
+        return d;
+    }, [value, minD, maxD]);
+    const [year, setYear] = (0, react_1.useState)(initial.year());
+    const [month, setMonth] = (0, react_1.useState)(initial.month() + 1); // 1-12
+    const [day, setDay] = (0, react_1.useState)(initial.date());
+    const [hour, setHour] = (0, react_1.useState)(initial.hour());
+    const [minute, setMinute] = (0, react_1.useState)(initial.minute());
+    const [second, setSecond] = (0, react_1.useState)(initial.second());
+    const showHour = precision !== "day";
+    const showMinute = precision === "minute" || precision === "second";
+    const showSecond = precision === "second";
+    // 各列范围计算（考虑 min/max）
+    const years = (0, react_1.useMemo)(() => range(minD.year(), maxD.year()), [minD, maxD]);
+    const months = (0, react_1.useMemo)(() => {
+        let s = 1;
+        let e = 12;
+        if (year === minD.year())
+            s = minD.month() + 1;
+        if (year === maxD.year())
+            e = maxD.month() + 1;
+        if (s > e) {
+            // 不应发生；兜底返回单月
+            return [s];
+        }
+        return range(s, e);
+    }, [year, minD, maxD]);
+    const days = (0, react_1.useMemo)(() => {
+        const daysInMonth = (0, dayjs_1.default)(`${year}-${pad2(month)}-01`).daysInMonth();
+        let s = 1;
+        let e = daysInMonth;
+        if (year === minD.year() && month === minD.month() + 1)
+            s = minD.date();
+        if (year === maxD.year() && month === maxD.month() + 1)
+            e = maxD.date();
+        if (s > e)
+            return [s];
+        return range(s, e);
+    }, [year, month, minD, maxD]);
+    const hours = (0, react_1.useMemo)(() => {
+        let s = 0;
+        let e = 23;
+        if (year === minD.year() &&
+            month === minD.month() + 1 &&
+            day === minD.date())
+            s = minD.hour();
+        if (year === maxD.year() &&
+            month === maxD.month() + 1 &&
+            day === maxD.date())
+            e = maxD.hour();
+        if (s > e)
+            return [s];
+        return range(s, e);
+    }, [year, month, day, minD, maxD]);
+    const minutes = (0, react_1.useMemo)(() => {
+        let s = 0;
+        let e = 59;
+        if (year === minD.year() &&
+            month === minD.month() + 1 &&
+            day === minD.date() &&
+            hour === minD.hour())
+            s = minD.minute();
+        if (year === maxD.year() &&
+            month === maxD.month() + 1 &&
+            day === maxD.date() &&
+            hour === maxD.hour())
+            e = maxD.minute();
+        if (s > e)
+            return [s];
+        return range(s, e);
+    }, [year, month, day, hour, minD, maxD]);
+    const seconds = (0, react_1.useMemo)(() => {
+        let s = 0;
+        let e = 59;
+        if (year === minD.year() &&
+            month === minD.month() + 1 &&
+            day === minD.date() &&
+            hour === minD.hour() &&
+            minute === minD.minute())
+            s = minD.second();
+        if (year === maxD.year() &&
+            month === maxD.month() + 1 &&
+            day === maxD.date() &&
+            hour === maxD.hour() &&
+            minute === maxD.minute())
+            e = maxD.second();
+        if (s > e)
+            return [s];
+        return range(s, e);
+    }, [year, month, day, hour, minute, minD, maxD]);
+    // 联动夹取：超出范围 → 夹到最近边界（小于 min 取首；大于 max 取尾）
+    const clampToList = (v, list) => {
+        if (list.includes(v))
+            return v;
+        if (v < list[0])
+            return list[0];
+        return list[list.length - 1];
+    };
+    (0, react_1.useEffect)(() => {
+        const next = clampToList(month, months);
+        if (next !== month)
+            setMonth(next);
+    }, [months, month]);
+    (0, react_1.useEffect)(() => {
+        const next = clampToList(day, days);
+        if (next !== day)
+            setDay(next);
+    }, [days, day]);
+    (0, react_1.useEffect)(() => {
+        if (!showHour)
+            return;
+        const next = clampToList(hour, hours);
+        if (next !== hour)
+            setHour(next);
+    }, [hours, hour, showHour]);
+    (0, react_1.useEffect)(() => {
+        if (!showMinute)
+            return;
+        const next = clampToList(minute, minutes);
+        if (next !== minute)
+            setMinute(next);
+    }, [minutes, minute, showMinute]);
+    (0, react_1.useEffect)(() => {
+        if (!showSecond)
+            return;
+        const next = clampToList(second, seconds);
+        if (next !== second)
+            setSecond(next);
+    }, [seconds, second, showSecond]);
+    // 关闭：动画与卸载交由 Dialog 处理
+    const handleCancel = () => {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    const handleConfirm = () => {
+        const hh = showHour ? hour : 0;
+        const mm = showMinute ? minute : 0;
+        const ss = showSecond ? second : 0;
+        // 用 ISO 字符串构造，避免链式 set 时的月份溢出问题
+        const d = (0, dayjs_1.default)(`${year}-${pad2(month)}-${pad2(day)}T${pad2(hh)}:${pad2(mm)}:${pad2(ss)}`);
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(d);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { css: style.sheet, children: [(0, jsx_runtime_1.jsxs)("div", { css: style.header, children: [(0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [style.btn, style.btnCancel], onClick: handleCancel, children: cancelText }), (0, jsx_runtime_1.jsx)("div", { css: style.title, children: title }), (0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [style.btn, style.btnConfirm], onClick: handleConfirm, children: confirmText })] }), (0, jsx_runtime_1.jsxs)("div", { css: style.body, children: [(0, jsx_runtime_1.jsx)("div", { css: style.indicator }), (0, jsx_runtime_1.jsx)(Column_1.Column, { items: years, value: year, onChange: setYear, format: (n) => `${n}${suffix("year")}`, style: style }), (0, jsx_runtime_1.jsx)(Column_1.Column, { items: months, value: month, onChange: setMonth, format: (n) => `${pad2(n)}${suffix("month")}`, style: style }), (0, jsx_runtime_1.jsx)(Column_1.Column, { items: days, value: day, onChange: setDay, format: (n) => `${pad2(n)}${suffix("day")}`, style: style }), showHour && ((0, jsx_runtime_1.jsx)(Column_1.Column, { items: hours, value: hour, onChange: setHour, format: (n) => `${pad2(n)}${suffix("hour")}`, style: style })), showMinute && ((0, jsx_runtime_1.jsx)(Column_1.Column, { items: minutes, value: minute, onChange: setMinute, format: (n) => `${pad2(n)}${suffix("minute")}`, style: style })), showSecond && ((0, jsx_runtime_1.jsx)(Column_1.Column, { items: seconds, value: second, onChange: setSecond, format: (n) => `${pad2(n)}${suffix("second")}`, style: style }))] })] }));
+}
+function showDatePicker(options = {}) {
+    const { maskClosable = true, onCancel } = options, rest = __rest(options, ["maskClosable", "onCancel"]);
+    // 防止动画结束前重复触发 close（双击确认/取消、close 后再点遮罩等场景）
+    let closing = false;
+    let close;
+    const requestClose = () => {
+        if (closing)
+            return;
+        closing = true;
+        close === null || close === void 0 ? void 0 : close();
+    };
+    close = (0, Dialog_1.showDialog)({
+        type: "pullUp",
+        blankClosable: maskClosable,
+        // 点击空白时同步补发 onCancel 通知（关闭动画并行进行）
+        onBlankClick: () => {
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        },
+        content: ((0, jsx_runtime_1.jsx)(DatePicker, Object.assign({}, rest, { onCancel: onCancel, onClose: requestClose }))),
+    });
+}

package/build/DatePicker/style.d.ts

@@ -0,0 +1,6 @@
+import { Interpolation, Theme } from "@emotion/react";
+export declare const ITEM_HEIGHT_REM = 0.8;
+export declare const VISIBLE_ROWS = 5;
+export type DatePickerStyle = Record<string, Interpolation<Theme>>;
+export declare function createStyle(primary: string, rounded?: boolean): DatePickerStyle;
+export declare const DEFAULT_PRIMARY = "#2f7dff";

package/build/DatePicker/style.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PRIMARY = exports.VISIBLE_ROWS = exports.ITEM_HEIGHT_REM = void 0;
+exports.createStyle = createStyle;
+const react_1 = require("@emotion/react");
+const color_1 = require("../utils/color");
+const theme_1 = require("../utils/theme");
+// iOS 风格设计变量
+const textPrimary = "#000000";
+const textSecondary = "#3c3c43"; // iOS secondaryLabel
+const textTertiary = "#8e8e93"; // iOS tertiaryLabel
+const bgPage = "#ffffff";
+const bgSubtle = "rgba(120,120,128,.12)"; // iOS quaternary fill
+// 可见行数 = 5，单元高度 = .8rem
+exports.ITEM_HEIGHT_REM = 0.8;
+exports.VISIBLE_ROWS = 5;
+function createStyle(primary, rounded = true) {
+    const primaryActive = (0, color_1.darken)(primary, 0.15);
+    const sheetRadius = rounded ? ".28rem" : "0";
+    const indicatorRadius = rounded ? ".12rem" : "0";
+    return {
+        // 内容容器：动画/全屏/居中由 Dialog 提供，这里只保留视觉与排版
+        sheet: (0, react_1.css)({
+            width: "100%",
+            backgroundColor: bgPage,
+            borderTopLeftRadius: sheetRadius,
+            borderTopRightRadius: sheetRadius,
+            overflow: "hidden",
+            userSelect: "none",
+            color: textPrimary,
+            fontFamily: theme_1.fontStack,
+            WebkitFontSmoothing: "antialiased",
+            MozOsxFontSmoothing: "grayscale",
+        }),
+        // iOS 风标题栏：底部 hairline 与下方 body 做轻量区块分隔
+        header: (0, react_1.css)({
+            height: ".92rem",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "0 .16rem",
+            borderBottom: "1px solid rgba(60,60,67,.18)",
+        }),
+        title: (0, react_1.css)({
+            flex: 1,
+            textAlign: "center",
+            fontSize: ".32rem",
+            fontWeight: 600,
+            color: textPrimary,
+            letterSpacing: ".01rem",
+        }),
+        btn: (0, react_1.css)({
+            minWidth: "1.1rem",
+            padding: "0 .08rem",
+            fontSize: ".3rem",
+            fontWeight: 400,
+            lineHeight: ".92rem",
+            cursor: "pointer",
+            transition: "opacity .15s, color .15s",
+        }),
+        btnCancel: (0, react_1.css)({
+            textAlign: "left",
+            color: textSecondary,
+            "&:active": { opacity: 0.55 },
+        }),
+        btnConfirm: (0, react_1.css)({
+            textAlign: "right",
+            fontWeight: 600,
+            color: primary,
+            "&:active": { color: primaryActive, opacity: 0.65 },
+        }),
+        body: (0, react_1.css)({
+            position: "relative",
+            display: "flex",
+            height: `${exports.ITEM_HEIGHT_REM * exports.VISIBLE_ROWS}rem`,
+            padding: "0 .16rem .12rem",
+        }),
+        // iOS 风选中背景：柔和的 quaternary fill、充足圆角
+        indicator: (0, react_1.css)({
+            position: "absolute",
+            left: ".16rem",
+            right: ".16rem",
+            top: `${exports.ITEM_HEIGHT_REM * 2}rem`,
+            height: `${exports.ITEM_HEIGHT_REM}rem`,
+            pointerEvents: "none",
+            backgroundColor: bgSubtle,
+            borderRadius: indicatorRadius,
+        }),
+        column: (0, react_1.css)({
+            position: "relative",
+            flex: 1,
+            minWidth: 0,
+            height: "100%",
+            overflow: "hidden",
+            touchAction: "none",
+            // 自管理手势，禁用浏览器原生选中/拖拽
+            userSelect: "none",
+            WebkitUserSelect: "none",
+        }),
+        // 内层位移容器：transform translateY(-offset) 实现"滚动"
+        columnInner: (0, react_1.css)({
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            willChange: "transform",
+        }),
+        item: (0, react_1.css)({
+            height: `${exports.ITEM_HEIGHT_REM}rem`,
+            lineHeight: `${exports.ITEM_HEIGHT_REM}rem`,
+            fontSize: ".32rem",
+            fontWeight: 400,
+            fontFamily: theme_1.numberFontStack,
+            fontVariantNumeric: "tabular-nums",
+            letterSpacing: ".01rem",
+            textAlign: "center",
+            color: textTertiary,
+            transition: "color .18s ease",
+        }),
+        itemActive: (0, react_1.css)({
+            color: textPrimary,
+            fontWeight: 500,
+        }),
+        spacer: (0, react_1.css)({
+            height: `${exports.ITEM_HEIGHT_REM * 2}rem`,
+            pointerEvents: "none",
+        }),
+    };
+}
+exports.DEFAULT_PRIMARY = "#2f7dff";

package/build/Dialog/Wrapper.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { Theme, Interpolation } from "@emotion/react";
 import { DialogType, AnimationStatus } from "./style";
 export interface WrapperProps {

package/build/Dialog/Wrapper.js

@@ -2,32 +2,42 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = Wrapper;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
 const Overlay_1 = require("../Overlay");
 const style_1 = require("./style");
+// 常量：Overlay 顶层容器 css
+const overlayCss = { overflow: "hidden" };
+// 仅这几种类型需要附加位置样式；center 由 Overlay 的 centerContent 居中
+const POSITIONED_TYPES = new Set([
+    "pullUp",
+    "pullDown",
+    "pullLeft",
+    "pullRight",
+]);
 function Wrapper(props) {
     const { type = "center", status = "show", children, onHide, showMask = true, maskColor, maskStyle, boxStyle, onBlankClick, } = props;
     const { animation, keyframes } = (0, style_1.getAnimation)(type, status);
-    // 选取特定的类型对应的样式
-    let boxCss = [
-        style_1.style.boxCss,
-        ["pullUp", "pullDown", "pullLeft", "pullRight"].includes(type) ? style_1.style[type] : {}
-    ];
-    // 遮罩的样式
-    let maskCss = [
+    // 缓存：仅当 type 变化时重建
+    const positionStyle = (0, react_1.useMemo)(() => (POSITIONED_TYPES.has(type) ? style_1.style[type] : null), [type]);
+    // 缓存：仅当 status / 外部 maskStyle / maskColor 变化时重建
+    const maskCss = (0, react_1.useMemo)(() => [
         style_1.style.mask,
         status === "show" ? style_1.style.maskShow : style_1.style.maskHide,
         maskStyle,
-        maskColor ? { backgroundColor: maskColor } : {}
-    ];
-    // 空白处点击
+        maskColor ? { backgroundColor: maskColor } : null,
+    ], [status, maskStyle, maskColor]);
+    // 空白处点击：仅在事件 target 与 currentTarget 一致时触发，避免冒泡误关闭
     const blankClick = (event) => {
         if (event.target === event.currentTarget) {
             event.stopPropagation();
             onBlankClick === null || onBlankClick === void 0 ? void 0 : onBlankClick(event);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Overlay_1.Overlay, { css: { overflow: "hidden" }, centerContent: type === "center", maskColor: "transparent", fullScreen: true, onClick: showMask ? undefined : blankClick, children: [showMask && (0, jsx_runtime_1.jsx)("div", { css: maskCss, onClick: blankClick }), (0, jsx_runtime_1.jsx)("div", { css: [boxCss, boxStyle, animation], onAnimationEnd: (event) => {
-                    if (status === "hide" && event.animationName === keyframes.name) {
+    return ((0, jsx_runtime_1.jsxs)(Overlay_1.Overlay, { css: overlayCss, centerContent: type === "center", maskColor: "transparent", fullScreen: true, onClick: showMask ? undefined : blankClick, children: [showMask && (0, jsx_runtime_1.jsx)("div", { css: maskCss, onClick: blankClick }), (0, jsx_runtime_1.jsx)("div", { css: [style_1.style.boxCss, positionStyle, boxStyle, animation], onAnimationEnd: (event) => {
+                    // 仅响应隐藏动画结束，且必须是 box 自身的动画（避免子元素同名动画事件冒泡误触发）
+                    if (status === "hide" &&
+                        event.target === event.currentTarget &&
+                        event.animationName === keyframes.name) {
                         onHide === null || onHide === void 0 ? void 0 : onHide();
                     }
                 }, children: children })] }));

package/build/Dialog/index.d.ts

@@ -8,7 +8,13 @@ export interface ShowDialogOption extends WrapperProps {
 }
 /**
  * 显示一个对话框，出现和隐藏都带有动画效果
+ *
+ * 关键不变量：
+ * 1. 关闭操作幂等：多次调用返回的 close()，或 close() 与遮罩点击并发，都只触发一次隐藏动画与 unmount。
+ * 2. 所有等待同一次关闭的 Promise 都会 resolve（不会因后续调用覆盖 onHide 而悬挂）。
+ * 3. 用户的 onBlankClick 在事件循环同步阶段触发（避免 React 合成事件被回收），关闭动画并行进行。
+ *
  * @param option
- * @returns
+ * @returns 关闭函数；返回的 Promise 在隐藏动画结束、容器卸载完成后 resolve
  */
 export declare function showDialog(option: React.ReactNode | ShowDialogOption): () => Promise<void>;

package/build/Dialog/index.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -21,8 +12,14 @@ const isPlainObject_1 = __importDefault(require("lodash/isPlainObject"));
 const omit_1 = __importDefault(require("lodash/omit"));
 /**
  * 显示一个对话框，出现和隐藏都带有动画效果
+ *
+ * 关键不变量：
+ * 1. 关闭操作幂等：多次调用返回的 close()，或 close() 与遮罩点击并发，都只触发一次隐藏动画与 unmount。
+ * 2. 所有等待同一次关闭的 Promise 都会 resolve（不会因后续调用覆盖 onHide 而悬挂）。
+ * 3. 用户的 onBlankClick 在事件循环同步阶段触发（避免 React 合成事件被回收），关闭动画并行进行。
+ *
  * @param option
- * @returns
+ * @returns 关闭函数；返回的 Promise 在隐藏动画结束、容器卸载完成后 resolve
  */
 function showDialog(option) {
     const { mount, unmount } = (0, dom_1.createPortalDOM)();
@@ -37,34 +34,62 @@ function showDialog(option) {
     // 提取需要单独处理的配置项
     const blankClosable = !!config.blankClosable;
     const children = config.content;
-    const onBlankClick = config.onBlankClick;
-    const onHide = config.onHide;
+    const userOnBlankClick = config.onBlankClick;
+    const userOnHide = config.onHide;
     const props = (0, omit_1.default)(config, [
         'blankClosable',
         'content',
         'onHide',
+        'onBlankClick',
     ]);
-    // 关闭弹窗
-    const closeDialog = () => __awaiter(this, void 0, void 0, function* () {
-        props.status = 'hide';
-        props.onHide = () => {
-            unmount();
-            onHide === null || onHide === void 0 ? void 0 : onHide();
-        };
-        yield mount((0, jsx_runtime_1.jsx)(Wrapper_1.Wrapper, Object.assign({}, props, { children: children })));
-    });
-    // 空白处可点击关闭
-    if (blankClosable) {
-        props.onBlankClick = (event) => __awaiter(this, void 0, void 0, function* () {
-            yield closeDialog();
-            onBlankClick === null || onBlankClick === void 0 ? void 0 : onBlankClick(event);
+    // 关闭状态机：'idle' -> 'closing' -> 'closed'
+    // 通过状态保证 closeDialog 幂等，避免重复 mount 已 unmount 的 root，避免 onHide 覆盖丢失 resolve
+    let closeState = 'idle';
+    const waiters = [];
+    const closeDialog = () => {
+        if (closeState === 'closed') {
+            return Promise.resolve();
+        }
+        return new Promise((resolve) => {
+            waiters.push(resolve);
+            if (closeState === 'closing') {
+                // 已经在关闭流程中，仅排队等待
+                return;
+            }
+            closeState = 'closing';
+            props.status = 'hide';
+            props.onHide = () => {
+                // 防御：onAnimationEnd 仅应触发一次，但若 React 重渲染导致再次冒泡也只处理一次
+                if (closeState === 'closed')
+                    return;
+                closeState = 'closed';
+                unmount();
+                try {
+                    userOnHide === null || userOnHide === void 0 ? void 0 : userOnHide();
+                }
+                finally {
+                    // 唤醒全部等待者，即使 user onHide 抛错也不影响 Promise 链
+                    const list = waiters.splice(0);
+                    list.forEach((fn) => fn());
+                }
+            };
+            mount((0, jsx_runtime_1.jsx)(Wrapper_1.Wrapper, Object.assign({}, props, { children: children })));
         });
+    };
+    // 空白处可点击关闭：同步触发用户回调，并行启动关闭动画
+    if (blankClosable) {
+        props.onBlankClick = (event) => {
+            // 先同步调用用户回调（保留事件对象的有效性）
+            userOnBlankClick === null || userOnBlankClick === void 0 ? void 0 : userOnBlankClick(event);
+            // 再触发关闭（不 await，避免事件对象失效）
+            closeDialog();
+        };
+    }
+    else if (userOnBlankClick) {
+        // 不自动关闭但用户仍订阅了 blank click
+        props.onBlankClick = userOnBlankClick;
     }
     // 挂载容器对象
-    const amountShow = mount((0, jsx_runtime_1.jsx)(Wrapper_1.Wrapper, Object.assign({}, props, { children: children })));
-    return () => __awaiter(this, void 0, void 0, function* () {
-        // 关闭前确保容器已经被挂载
-        yield amountShow;
-        yield closeDialog();
-    });
+    mount((0, jsx_runtime_1.jsx)(Wrapper_1.Wrapper, Object.assign({}, props, { children: children })));
+    return closeDialog;
 }

package/build/Dialog/style.js

@@ -127,7 +127,7 @@ function getAnimation(type, status) {
 }
 exports.style = {
     maskShow: (0, react_1.css)({
-        animation: `${maskShow} 300ms ease`,
+        animation: `${maskShow} 300ms ease forwards`,
     }),
     maskHide: (0, react_1.css)({
         animation: `${exports.maskHide} 300ms ease forwards`,
@@ -139,10 +139,14 @@ exports.style = {
         bottom: 0,
         width: "100%",
         height: "100%",
-        backgroundColor: "rgba(0, 0, 0, 0.6)",
+        backgroundColor: "rgba(0, 0, 0, 0.4)",
+        // 提升为合成层，opacity 动画走 GPU，避免触发重绘
+        willChange: "opacity",
     }),
     boxCss: (0, react_1.css)({
         zIndex: 2,
+        // transform 动画走 GPU 合成
+        willChange: "transform, opacity",
     }),
     pullUp: (0, react_1.css)({
         position: "absolute",

package/build/Effect/useInterval.js

@@ -6,9 +6,12 @@ function useInterval(callback, delay) {
     const savedCallback = (0, react_1.useRef)(callback);
     savedCallback.current = callback;
     (0, react_1.useEffect)(() => {
-        if (delay !== null) {
-            const interval = setInterval(() => savedCallback.current(), delay || 0);
-            return () => clearInterval(interval);
+        // 仅当 delay 为有限的非负数时才启动定时器；
+        // null/undefined/NaN 等都视为暂停
+        if (typeof delay !== "number" || !isFinite(delay) || delay < 0) {
+            return;
         }
+        const interval = setInterval(() => savedCallback.current(), delay);
+        return () => clearInterval(interval);
     }, [delay]);
 }

package/build/Fixed/index.js

@@ -13,28 +13,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Fixed = Fixed;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+// 模块级常量：4 种 position 的样式静态、与 props 无关，只哈希一次
+const baseStyle = {
+    position: "fixed",
+    // 与 Container 的 maxWidth 联动，PC 端 fixed 元素也水平居中限宽
+    maxWidth: "var(--clxx-max-width, 100%)",
+};
+const positionStyles = {
+    top: Object.assign(Object.assign({}, baseStyle), { top: 0, width: "100%", left: "50%", transform: "translateX(-50%)" }),
+    bottom: Object.assign(Object.assign({}, baseStyle), { bottom: 0, width: "100%", left: "50%", transform: "translateX(-50%)" }),
+    left: Object.assign(Object.assign({}, baseStyle), { top: 0, left: "50%", height: "100%", transform: "translateX(calc(var(--clxx-max-width, 100vw) / -2))" }),
+    right: Object.assign(Object.assign({}, baseStyle), { top: 0, left: "50%", height: "100%", transform: "translateX(calc(var(--clxx-max-width, 100vw) / 2 - 100%))" }),
+};
 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 ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { css: styles }, extra, { children: props.children })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, extra, { css: positionStyles[position], children: children })));
 }

package/build/Flex/FlexItem.d.ts

@@ -0,0 +1,11 @@
+import * as CSS from 'csstype';
+export interface FlexItemProps extends React.HTMLProps<HTMLDivElement> {
+    children?: React.ReactNode;
+    alignSelf?: CSS.Property.AlignSelf;
+    order?: CSS.Property.Order;
+    flex?: CSS.Property.BoxFlex;
+    flexGrow?: CSS.Property.FlexGrow;
+    flexShrink?: CSS.Property.FlexShrink;
+    flexBasis?: CSS.Property.FlexBasis;
+}
+export declare function FlexItem(props: FlexItemProps): import("@emotion/react/jsx-runtime").JSX.Element;