clxx 2.1.8 → 3.0.0

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;

package/build/Flex/FlexItem.js

@@ -0,0 +1,26 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexItem = FlexItem;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+function FlexItem(props) {
+    const { children, alignSelf, order, flex, flexGrow, flexShrink, flexBasis, style } = props, extra = __rest(props, ["children", "alignSelf", "order", "flex", "flexGrow", "flexShrink", "flexBasis", "style"]);
+    // 布局属性走原生 inline style：避免 emotion 在每次 render 哈希对象字面量
+    const inlineStyle = Object.assign({ alignSelf,
+        order,
+        flex,
+        flexGrow,
+        flexShrink,
+        flexBasis }, style);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: inlineStyle }, extra, { children: children })));
+}

package/build/Flex/index.d.ts

@@ -8,14 +8,6 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
     flexWrap?: CSS.Property.FlexWrap;
     flexDirection?: CSS.Property.FlexDirection;
 }
-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 Flex(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function FlexItem(props: FlexItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export type { FlexItemProps } from './FlexItem';
+export { FlexItem } from './FlexItem';

package/build/Flex/index.js

@@ -11,29 +11,19 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexItem = void 0;
 exports.Flex = Flex;
-exports.FlexItem = FlexItem;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 function Flex(props) {
-    const { children, alignItems = 'center', alignContent, justifyContent, flexFlow, flexWrap, flexDirection } = props, extra = __rest(props, ["children", "alignItems", "alignContent", "justifyContent", "flexFlow", "flexWrap", "flexDirection"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
-            display: 'flex',
-            alignItems,
-            alignContent,
-            justifyContent,
-            flexFlow,
-            flexWrap,
-            flexDirection,
-        } }, extra, { children: children })));
-}
-function FlexItem(props) {
-    const { children, alignSelf, order, flex, flexGrow, flexShrink, flexBasis } = props, extra = __rest(props, ["children", "alignSelf", "order", "flex", "flexGrow", "flexShrink", "flexBasis"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
-            alignSelf,
-            order,
-            flex,
-            flexGrow,
-            flexShrink,
-            flexBasis,
-        } }, extra, { children: children })));
+    const { children, alignItems = 'center', alignContent, justifyContent, flexFlow, flexWrap, flexDirection, style } = props, extra = __rest(props, ["children", "alignItems", "alignContent", "justifyContent", "flexFlow", "flexWrap", "flexDirection", "style"]);
+    // 布局属性走原生 inline style：避免 emotion 在每次 render 哈希对象字面量
+    const inlineStyle = Object.assign({ display: 'flex', alignItems,
+        alignContent,
+        justifyContent,
+        flexFlow,
+        flexWrap,
+        flexDirection }, style);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: inlineStyle }, extra, { children: children })));
 }
+var FlexItem_1 = require("./FlexItem");
+Object.defineProperty(exports, "FlexItem", { enumerable: true, get: function () { return FlexItem_1.FlexItem; } });

package/build/Indicator/index.d.ts

@@ -1,7 +1,7 @@
-import { Interpolation, Theme } from '@emotion/react';
-import React from 'react';
-import * as CSS from 'csstype';
-export interface IndicatorProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+import { Interpolation, Theme } from "@emotion/react";
+import { HTMLAttributes } from "react";
+import * as CSS from "csstype";
+export interface IndicatorProps extends HTMLAttributes<HTMLDivElement> {
     size?: CSS.Property.Width | number;
     rounded?: boolean;
     barWidth?: number;
@@ -12,7 +12,10 @@ export interface IndicatorProps extends React.DetailedHTMLProps<React.HTMLAttrib
     containerStyle?: Interpolation<Theme>;
 }
 /**
- * SVG转圈指示器，一般用作loading效果
- * @param props
+ * iOS 风菊花转圈指示器（仿 UIActivityIndicatorView 节奏）。
+ * 性能要点：
+ *  - 用 opacity 动画替代 fill 动画，触发 GPU 合成而非 SVG paint
+ *  - keyframes 全局单例，颜色/时长变化不会污染样式表
+ *  - animation-delay 走 inline style，emotion 不再为每条 bar 生成独立类名
  */
 export declare function Indicator(props: IndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/build/Indicator/index.js

@@ -10,56 +10,53 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Indicator = Indicator;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("@emotion/react");
-const react_2 = __importDefault(require("react"));
+const react_2 = require("react");
 const cssUtil_1 = require("../utils/cssUtil");
 const style_1 = require("./style");
 /**
- * SVG转圈指示器，一般用作loading效果
- * @param props
+ * iOS 风菊花转圈指示器（仿 UIActivityIndicatorView 节奏）。
+ * 性能要点：
+ *  - 用 opacity 动画替代 fill 动画，触发 GPU 合成而非 SVG paint
+ *  - keyframes 全局单例，颜色/时长变化不会污染样式表
+ *  - animation-delay 走 inline style，emotion 不再为每条 bar 生成独立类名
  */
 function Indicator(props) {
-    const { size, rounded = true, barWidth = 7, barHeight = 28, barColor = '#fff', barCount = 12, duration = 600, containerStyle } = props, attributes = __rest(props, ["size", "rounded", "barWidth", "barHeight", "barColor", "barCount", "duration", "containerStyle"]);
+    const { size, rounded = true, barWidth = 8, barHeight = 26, barColor = "#ffffff", barCount = 12, duration = 1000, containerStyle } = props, attributes = __rest(props, ["size", "rounded", "barWidth", "barHeight", "barColor", "barCount", "duration", "containerStyle"]);
     const radius = rounded ? barWidth / 2 : 0;
-    // 使用 useMemo 缓存 barList，避免每次渲染都重新生成
-    const barList = react_2.default.useMemo(() => {
-        const bars = [];
-        for (let i = 0; i < barCount; i++) {
-            bars.push((0, jsx_runtime_1.jsx)("rect", { x: (100 - barWidth) / 2, y: "0", rx: radius, ry: radius, width: barWidth, height: barHeight, transform: `rotate(${(360 / barCount) * i}, 50, 50)`, css: {
-                    animationDelay: `${-(duration * (barCount - i)) / barCount}ms`,
-                } }, i));
-        }
-        return bars;
-    }, [barCount, barWidth, barHeight, radius, duration]);
-    // 使用 useMemo 缓存样式，避免每次都重新计算
-    const style = react_2.default.useMemo(() => [
-        {
-            fontSize: 0,
-        },
-        typeof size !== 'undefined' ? {
-            width: (0, cssUtil_1.normalizeUnit)(size),
-            height: (0, cssUtil_1.normalizeUnit)(size),
-        } : {
-            width: '.6rem',
-            height: '.6rem',
-        }
+    const containerCss = (0, react_2.useMemo)(() => [
+        { fontSize: 0, display: "inline-block", lineHeight: 0 },
+        size !== undefined
+            ? { width: (0, cssUtil_1.normalizeUnit)(size), height: (0, cssUtil_1.normalizeUnit)(size) }
+            : { width: ".4rem", height: ".4rem" },
     ], [size]);
-    const svgStyle = react_2.default.useMemo(() => (0, react_1.css)({
-        width: '100%',
-        height: '100%',
+    const svgCss = (0, react_2.useMemo)(() => (0, react_1.css)({
+        width: "100%",
+        height: "100%",
+        display: "block",
         rect: {
-            fill: 'transparent',
-            animationName: (0, style_1.getBarChangeKeyFrames)(barColor),
+            fill: barColor,
+            animationName: `${style_1.barFadeKeyframes}`,
             animationDuration: `${duration}ms`,
-            animationTimingFunction: 'linear',
-            animationIterationCount: 'infinite',
+            animationTimingFunction: "linear",
+            animationIterationCount: "infinite",
+            willChange: "opacity",
         },
     }), [barColor, duration]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: [style, containerStyle] }, attributes, { children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 100 100", css: svgStyle, children: barList }) })));
+    const bars = (0, react_2.useMemo)(() => {
+        const list = [];
+        const x = (100 - barWidth) / 2;
+        for (let i = 0; i < barCount; i++) {
+            list.push((0, jsx_runtime_1.jsx)("rect", { x: x, y: 0, rx: radius, ry: radius, width: barWidth, height: barHeight, transform: `rotate(${(360 / barCount) * i} 50 50)`, 
+                // 负 delay：组件挂载即处于稳态动画中，不会先停后转
+                style: {
+                    animationDelay: `${-(duration * (barCount - i)) / barCount}ms`,
+                } }, i));
+        }
+        return list;
+    }, [barCount, barWidth, barHeight, radius, duration]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: [containerCss, containerStyle] }, attributes, { children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 100 100", css: svgCss, "aria-hidden": "true", children: bars }) })));
 }

package/build/Indicator/style.d.ts

@@ -1,8 +1,9 @@
 /**
- * 获取转圈每一条bar的过渡动画
- * @param color
+ * iOS 菊花单条 bar 的不透明度衰减动画
+ * 1 -> 0.18 线性衰减；keyframes 与颜色解耦，全局共享单例，
+ * 走 opacity 触发 GPU 合成而非 SVG paint，性能更高。
  */
-export declare function getBarChangeKeyFrames(color: string): {
+export declare const barFadeKeyframes: {
     name: string;
     styles: string;
     anim: 1;