clxx 2.1.7 → 3.0.0

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;

package/build/Indicator/style.js

@@ -1,18 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBarChangeKeyFrames = getBarChangeKeyFrames;
+exports.barFadeKeyframes = void 0;
 const react_1 = require("@emotion/react");
 /**
- * 获取转圈每一条bar的过渡动画
- * @param color
+ * iOS 菊花单条 bar 的不透明度衰减动画
+ * 1 -> 0.18 线性衰减；keyframes 与颜色解耦，全局共享单例，
+ * 走 opacity 触发 GPU 合成而非 SVG paint，性能更高。
  */
-function getBarChangeKeyFrames(color) {
-    return (0, react_1.keyframes) `
-  from {
-    fill: ${color};
-  }
-  to {
-    fill: transparent;
-  }
-  `;
-}
+exports.barFadeKeyframes = (0, react_1.keyframes) `
+  0% { opacity: 1; }
+  100% { opacity: 0.18; }
+`;

package/build/Loading/Wrapper.js

@@ -17,8 +17,9 @@ function Wrapper(props) {
     if (typeof overlay === 'object') {
         overlayProps = Object.assign(Object.assign({}, overlayProps), overlay);
     }
-    // 指示器样式
+    // 指示器样式：默认 size .48rem，保证带文字 / 不带文字两态指示器大小一致
     let indicatorProps = {
+        size: '.48rem',
         barWidth: 5,
         barHeight: 25,
         barCount: 14,

package/build/Loading/style.js

@@ -20,8 +20,10 @@ exports.LoadingHide = (0, react_1.keyframes) `
 `;
 exports.style = {
     boxCommon: {
-        backgroundColor: `rgba(0, 0, 0, .8)`,
-        borderRadius: '.16rem',
+        backgroundColor: `rgba(0, 0, 0, .72)`,
+        borderRadius: '.2rem',
+        backdropFilter: 'blur(20px) saturate(160%)',
+        WebkitBackdropFilter: 'blur(20px) saturate(160%)',
     },
     box: {
         width: '1.6rem',
@@ -33,19 +35,14 @@ exports.style = {
     boxHide: {
         animation: `${exports.LoadingHide} 200ms`,
     },
-    boxWithExtra: [
-        { padding: '.3rem' },
-        {
-            "> div:first-of-type": {
-                width: '.48rem',
-                height: '.48rem',
-            },
-        },
-    ],
+    boxWithExtra: {
+        padding: '.3rem',
+    },
     hint: {
-        color: "#f5f5f5dd",
+        color: "#ffffff",
         whiteSpace: "nowrap",
         fontSize: '.28rem',
         marginLeft: '.2rem',
+        fontWeight: 500,
     },
 };

package/build/Overlay/index.js

@@ -37,13 +37,18 @@ function Overlay(props) {
     const style = (0, react_1.useMemo)(() => {
         const styles = [];
         // 如果是全屏，设置全屏样式
+        // 通过 CSS 变量 --clxx-max-width 与 Container 的 maxWidth 联动；
+        // PC 端 fixed 默认参照浏览器窗口，这里用 left:50% + translateX(-50%) + maxWidth
+        // 让遮罩 / 弹窗水平居中并限制在 Container 视口范围内
         if (fullScreen) {
             styles.push({
                 zIndex: 9999,
                 position: "fixed",
                 top: 0,
-                left: 0,
+                left: "50%",
+                transform: "translateX(-50%)",
                 width: "100%",
+                maxWidth: "var(--clxx-max-width, 100%)",
                 height: "100%",
                 backgroundColor: maskColor,
             });

package/build/RegionPicker/data.d.ts

@@ -0,0 +1,6 @@
+export interface TreeRegionItem {
+    value: string;
+    label: string;
+    children?: TreeRegionItem[];
+}
+export declare const treeRegionData: TreeRegionItem[];