clxx 2.1.8 → 3.0.0

package/build/CitySelect/index.js

@@ -4,7 +4,7 @@ exports.CitySelect = CitySelect;
 exports.showCitySelect = showCitySelect;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const dom_1 = require("../utils/dom");
+const Dialog_1 = require("../Dialog");
 const data_1 = require("./data");
 const search_1 = require("./search");
 const style_1 = require("./style");
@@ -33,7 +33,7 @@ function findCity(key) {
     }
     return null;
 }
-// 滑入/滑出动画在 style.inner 的 transition 中定义
+// 弹出与滑入/滑出动画由 showDialog (pullLeft) 接管
 function CitySelect(props) {
     const { onClose, onSelect, onLetterChange, getLocation, primary = style_1.DEFAULT_PRIMARY, } = props;
     const style = (0, react_1.useMemo)(() => (0, style_1.createStyle)(primary), [primary]);
@@ -79,8 +79,6 @@ function CitySelect(props) {
     const [touching, setTouching] = (0, react_1.useState)(false);
     const [keyword, setKeyword] = (0, react_1.useState)("");
     const [composing, setComposing] = (0, react_1.useState)(false);
-    // 动画状态：entering 刚挂载还未滑入；active 已滑入到位；exiting 正在滑出
-    const [phase, setPhase] = (0, react_1.useState)("entering");
     // IME 合成期间不触发搜索，避免中文输入时的拼音中间态干扰结果
     const searchResult = (0, react_1.useMemo)(() => {
         if (composing)
@@ -93,37 +91,7 @@ function CitySelect(props) {
     lettersRef.current = letters;
     const onLetterChangeRef = (0, react_1.useRef)(onLetterChange);
     onLetterChangeRef.current = onLetterChange;
-    // 进入动画：下一帧切换到 active，触发 CSS transition
-    (0, react_1.useEffect)(() => {
-        const id = requestAnimationFrame(() => {
-            // 再套一层，确保初始 transform 已被浏览器应用
-            requestAnimationFrame(() => setPhase("active"));
-        });
-        return () => cancelAnimationFrame(id);
-    }, []);
-    // 触发退出动画，真正的 onClose 在 transitionend 中触发
-    const triggerClose = () => {
-        if (phase === "exiting")
-            return;
-        // 进入动画未完成前退出：进入态和退出态 transform 相同，
-        // 切到 exiting 不会产生 transform 变化，transitionend 不会触发；
-        // 此时面板尚未滑入，直接调用 onClose 即可
-        if (phase === "entering") {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-            return;
-        }
-        setPhase("exiting");
-    };
-    // 监听 inner 的 transform 过渡结束，退出阶段调用 onClose
-    const handleTransitionEnd = (e) => {
-        if (e.target !== e.currentTarget)
-            return;
-        if (e.propertyName !== "transform")
-            return;
-        if (phase === "exiting")
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-    };
-    // 选中城市：回调后触发退出动画
+    // 选中城市：回调后请求关闭（动画与卸载交由 Dialog 处理）
     const handleSelect = (city) => {
         var _a;
         const province = data_1.provinceData[city.pcode];
@@ -135,7 +103,7 @@ function CitySelect(props) {
                 code: city.pcode,
             },
         });
-        triggerClose();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
     };
     const measureSections = () => {
         const listEl = listRef.current;
@@ -311,25 +279,32 @@ function CitySelect(props) {
                 cancelAnimationFrame(rafId);
         };
     }, [isSearching]);
-    return ((0, jsx_runtime_1.jsx)("div", { css: [style.container], children: (0, jsx_runtime_1.jsxs)("div", { css: [
-                style.inner,
-                phase === "entering" && style.innerEnter,
-                phase === "active" && style.innerActive,
-                phase === "exiting" && style.innerExit,
-            ], onTransitionEnd: handleTransitionEnd, children: [(0, jsx_runtime_1.jsxs)(Col_1.ColStart, { css: style.original, alignItems: "stretch", children: [(0, jsx_runtime_1.jsx)("div", { css: style.top, children: (0, jsx_runtime_1.jsxs)(Row_1.RowStart, { children: [(0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 1024 1024", css: style.icon, children: (0, jsx_runtime_1.jsx)("path", { d: "M896 870.4l-128-128c55.467-68.267 89.6-149.333 89.6-238.933 0-98.134-38.4-192-110.933-264.534-149.334-149.333-384-149.333-533.334-4.266-145.066 145.066-145.066 384 0 529.066 72.534 72.534 166.4 110.934 264.534 110.934 89.6 0 174.933-29.867 238.933-89.6l128 128c4.267 4.266 12.8 8.533 21.333 8.533s17.067-4.267 21.334-8.533c17.066-8.534 17.066-29.867 8.533-42.667zM260.267 721.067c-119.467-123.734-119.467-320 0-439.467 59.733-59.733 140.8-89.6 217.6-89.6 81.066 0 157.866 29.867 217.6 89.6 59.733 59.733 89.6 136.533 89.6 217.6 0 81.067-34.134 162.133-89.6 217.6-55.467 59.733-132.267 93.867-217.6 93.867-81.067 0-157.867-34.134-217.6-89.6z" }) }), (0, jsx_runtime_1.jsx)("input", { css: style.input, placeholder: "\u8BF7\u8F93\u5165\u5B57\u6BCD\u6216\u6C49\u5B57\u641C\u7D22\u57CE\u5E02", value: keyword, onChange: (e) => setKeyword(e.target.value), onCompositionStart: () => setComposing(true), onCompositionEnd: (e) => {
-                                            setComposing(false);
-                                            setKeyword(e.currentTarget.value);
-                                        } }), (0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: style.exit, onClick: triggerClose, children: "\u9000\u51FA" })] }) }), !isSearching && locatedCity && ((0, jsx_runtime_1.jsxs)(Clickable_1.Clickable, { css: style.locate, onClick: () => handleSelect(locatedCity), children: [(0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 1024 1024", css: style.locateIcon, children: [(0, jsx_runtime_1.jsx)("path", { d: "M512 128C352 128 224 256 224 416c0 115.2 70.4 204.8 160 320 32 44.8 70.4 89.6 102.4 147.2C492.8 889.6 499.2 896 512 896l0 0c12.8 0 19.2-6.4 25.6-12.8 32-51.2 70.4-96 102.4-140.8 89.6-121.6 160-211.2 160-326.4C800 256 672 128 512 128zM588.8 704c-25.6 32-51.2 64-76.8 102.4-25.6-38.4-57.6-76.8-76.8-108.8-83.2-108.8-147.2-192-147.2-281.6C288 294.4 390.4 192 512 192s224 102.4 224 224C736 505.6 672 595.2 588.8 704z" }), (0, jsx_runtime_1.jsx)("path", { d: "M512 416m-96 0a1.5 1.5 0 1 0 192 0 1.5 1.5 0 1 0-192 0Z" })] }), (0, jsx_runtime_1.jsx)("span", { css: style.locateLabel, children: "\u5F53\u524D\u5B9A\u4F4D" }), (0, jsx_runtime_1.jsx)("span", { css: style.locateName, children: locatedCity.name })] })), isSearching ? (searchResult.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { css: style.searchList, children: searchResult.map((item) => ((0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: style.item, onClick: () => handleSelect(item), children: item.name }, item.code))) })) : ((0, jsx_runtime_1.jsx)("div", { css: style.empty, children: "\u6CA1\u6709\u5339\u914D\u7684\u57CE\u5E02" }))) : ((0, jsx_runtime_1.jsx)("div", { ref: listRef, css: style.list, children: letters.map((k) => {
-                                return (
-                                // 每个字母对应一个区块，包含该字母开头的城市列表
-                                (0, jsx_runtime_1.jsxs)("div", { ref: (el) => {
-                                        sectionRefs.current[k] = el;
-                                    }, children: [(0, jsx_runtime_1.jsx)("div", { css: style.title, children: k.toUpperCase() }), data_1.cityData[k].map((item) => ((0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: style.item, onClick: () => handleSelect(item), children: item.name }, item.code)))] }, k));
-                            }) }))] }), !isSearching && ((0, jsx_runtime_1.jsx)("div", { ref: sidebarRef, css: style.sidebar, children: letters.map((k) => ((0, jsx_runtime_1.jsx)("div", { css: [style.letter, activeLetter === k && style.letterActive], children: k.toUpperCase() }, k))) })), touching && activeLetter && !isSearching && ((0, jsx_runtime_1.jsx)("div", { css: style.bigLetter, children: activeLetter.toUpperCase() }))] }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: style.inner, children: [(0, jsx_runtime_1.jsxs)(Col_1.ColStart, { css: style.original, alignItems: "stretch", children: [(0, jsx_runtime_1.jsx)("div", { css: style.top, children: (0, jsx_runtime_1.jsxs)(Row_1.RowStart, { children: [(0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 1024 1024", css: style.icon, children: (0, jsx_runtime_1.jsx)("path", { d: "M896 870.4l-128-128c55.467-68.267 89.6-149.333 89.6-238.933 0-98.134-38.4-192-110.933-264.534-149.334-149.333-384-149.333-533.334-4.266-145.066 145.066-145.066 384 0 529.066 72.534 72.534 166.4 110.934 264.534 110.934 89.6 0 174.933-29.867 238.933-89.6l128 128c4.267 4.266 12.8 8.533 21.333 8.533s17.067-4.267 21.334-8.533c17.066-8.534 17.066-29.867 8.533-42.667zM260.267 721.067c-119.467-123.734-119.467-320 0-439.467 59.733-59.733 140.8-89.6 217.6-89.6 81.066 0 157.866 29.867 217.6 89.6 59.733 59.733 89.6 136.533 89.6 217.6 0 81.067-34.134 162.133-89.6 217.6-55.467 59.733-132.267 93.867-217.6 93.867-81.067 0-157.867-34.134-217.6-89.6z" }) }), (0, jsx_runtime_1.jsx)("input", { css: style.input, placeholder: "\u8BF7\u8F93\u5165\u5B57\u6BCD\u6216\u6C49\u5B57\u641C\u7D22\u57CE\u5E02", value: keyword, onChange: (e) => setKeyword(e.target.value), onCompositionStart: () => setComposing(true), onCompositionEnd: (e) => {
+                                        setComposing(false);
+                                        setKeyword(e.currentTarget.value);
+                                    } }), (0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: style.exit, onClick: () => onClose === null || onClose === void 0 ? void 0 : onClose(), children: "\u9000\u51FA" })] }) }), !isSearching && locatedCity && ((0, jsx_runtime_1.jsxs)(Clickable_1.Clickable, { css: style.locate, onClick: () => handleSelect(locatedCity), children: [(0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 1024 1024", css: style.locateIcon, children: [(0, jsx_runtime_1.jsx)("path", { d: "M512 128C352 128 224 256 224 416c0 115.2 70.4 204.8 160 320 32 44.8 70.4 89.6 102.4 147.2C492.8 889.6 499.2 896 512 896l0 0c12.8 0 19.2-6.4 25.6-12.8 32-51.2 70.4-96 102.4-140.8 89.6-121.6 160-211.2 160-326.4C800 256 672 128 512 128zM588.8 704c-25.6 32-51.2 64-76.8 102.4-25.6-38.4-57.6-76.8-76.8-108.8-83.2-108.8-147.2-192-147.2-281.6C288 294.4 390.4 192 512 192s224 102.4 224 224C736 505.6 672 595.2 588.8 704z" }), (0, jsx_runtime_1.jsx)("path", { d: "M512 416m-96 0a1.5 1.5 0 1 0 192 0 1.5 1.5 0 1 0-192 0Z" })] }), (0, jsx_runtime_1.jsx)("span", { css: style.locateLabel, children: "\u5F53\u524D\u5B9A\u4F4D" }), (0, jsx_runtime_1.jsx)("span", { css: style.locateName, children: locatedCity.name })] })), isSearching ? (searchResult.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { css: style.searchList, children: searchResult.map((item) => ((0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: style.item, onClick: () => handleSelect(item), children: item.name }, item.code))) })) : ((0, jsx_runtime_1.jsx)("div", { css: style.empty, children: "\u6CA1\u6709\u5339\u914D\u7684\u57CE\u5E02" }))) : ((0, jsx_runtime_1.jsx)("div", { ref: listRef, css: style.list, children: letters.map((k) => {
+                            return (
+                            // 每个字母对应一个区块，包含该字母开头的城市列表
+                            (0, jsx_runtime_1.jsxs)("div", { ref: (el) => {
+                                    sectionRefs.current[k] = el;
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { css: style.title, children: k.toUpperCase() }), data_1.cityData[k].map((item) => ((0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: style.item, onClick: () => handleSelect(item), children: item.name }, item.code)))] }, k));
+                        }) }))] }), !isSearching && ((0, jsx_runtime_1.jsx)("div", { ref: sidebarRef, css: style.sidebar, children: letters.map((k) => ((0, jsx_runtime_1.jsx)("div", { css: [style.letter, activeLetter === k && style.letterActive], children: k.toUpperCase() }, k))) })), touching && activeLetter && !isSearching && ((0, jsx_runtime_1.jsx)("div", { css: style.bigLetter, children: activeLetter.toUpperCase() }))] }));
 }
 function showCitySelect(options = {}) {
-    const container = (0, dom_1.createPortalDOM)();
-    container.mount((0, jsx_runtime_1.jsx)(CitySelect, Object.assign({}, options, { onClose: () => {
-            container.unmount();
-        } })));
+    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: "pullLeft",
+        // 全屏不透明面板，无需遮罩
+        showMask: false,
+        // 给 Dialog 的 pullLeft 容器拉满宽度（默认仅 right:0/height:100%）
+        boxStyle: { left: 0, width: "100%" },
+        content: (0, jsx_runtime_1.jsx)(CitySelect, Object.assign({}, options, { onClose: requestClose })),
+    });
 }

package/build/CitySelect/style.js

@@ -3,63 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_PRIMARY = void 0;
 exports.createStyle = createStyle;
 const react_1 = require("@emotion/react");
-// 设计变量（除 primary 外集中管理）
-const textPrimary = "#1f2328";
-const textSecondary = "#6b7280";
-const textTertiary = "#9ca3af";
+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 / placeholder
 const bgPage = "#ffffff";
-const bgSubtle = "#f5f6f8";
-const border = "#e5e7eb";
-const fontStack = '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
-// 将 #rrggbb 颜色按比例变暗，用于派生 primaryActive
-function darken(hex, amount) {
-    const m = hex.replace("#", "");
-    if (m.length !== 6)
-        return hex;
-    const r = parseInt(m.slice(0, 2), 16);
-    const g = parseInt(m.slice(2, 4), 16);
-    const b = parseInt(m.slice(4, 6), 16);
-    const f = (v) => Math.max(0, Math.min(255, Math.round(v * (1 - amount))));
-    const toHex = (v) => f(v).toString(16).padStart(2, "0");
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
+const bgSubtle = "rgba(120,120,128,.12)"; // iOS quaternary fill
+const bgGrouped = "#f2f2f7"; // iOS systemGroupedBackground
 // 根据 primary 色值生成一整套样式；primaryActive 由 primary 派生
 function createStyle(primary) {
-    const primaryActive = darken(primary, 0.15);
+    const primaryActive = (0, color_1.darken)(primary, 0.15);
     return {
-        container: (0, react_1.css)({
-            position: "fixed",
-            top: 0,
-            left: 0,
+        // 内容容器：动画/全屏由 Dialog (pullLeft) 提供，这里只保留视觉与排版。
+        // 内部 sidebar / bigLetter 使用 absolute 时，以此为定位上下文。
+        inner: (0, react_1.css)({
+            position: "relative",
             width: "100%",
             height: "100%",
-            zIndex: 9999,
-            overflow: "hidden",
+            backgroundColor: bgPage,
             userSelect: "none",
             color: textPrimary,
-            fontFamily: fontStack,
+            fontFamily: theme_1.fontStack,
             WebkitFontSmoothing: "antialiased",
             MozOsxFontSmoothing: "grayscale",
         }),
-        inner: (0, react_1.css)({
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            backgroundColor: bgPage,
-            transition: "transform .3s cubic-bezier(.22,.61,.36,1)",
-            willChange: "transform",
-        }),
-        innerEnter: (0, react_1.css)({
-            transform: "translateX(100%)",
-        }),
-        innerActive: (0, react_1.css)({
-            transform: "translateX(0)",
-        }),
-        innerExit: (0, react_1.css)({
-            transform: "translateX(100%)",
-        }),
         sidebar: (0, react_1.css)({
             position: "absolute",
             top: "50%",
@@ -97,7 +66,7 @@ function createStyle(primary) {
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
-            backgroundColor: "rgba(17,24,39,0.6)",
+            backgroundColor: "rgba(0,0,0,0.55)",
             color: "#fff",
             fontSize: ".6rem",
             width: "1.4rem",
@@ -112,8 +81,7 @@ function createStyle(primary) {
             backgroundColor: bgPage,
         }),
         top: (0, react_1.css)({
-            padding: ".24rem .3rem",
-            borderBottom: `1px solid ${border}`,
+            padding: ".3rem",
             "& > div": {
                 height: ".72rem",
                 backgroundColor: bgSubtle,
@@ -169,8 +137,7 @@ function createStyle(primary) {
         locate: (0, react_1.css)({
             display: "flex",
             alignItems: "center",
-            padding: ".2rem .23rem",
-            borderBottom: `1px solid ${border}`,
+            padding: "0 .3rem .3rem",
             backgroundColor: bgPage,
             transition: "background-color .12s",
             "&:active": {
@@ -195,13 +162,13 @@ function createStyle(primary) {
             color: primary,
         }),
         title: (0, react_1.css)({
-            padding: ".08rem .3rem",
+            padding: ".12rem .3rem .06rem",
             fontSize: ".22rem",
-            fontWeight: 600,
-            color: textSecondary,
+            fontWeight: 500,
+            color: textTertiary,
             letterSpacing: ".02rem",
             textTransform: "uppercase",
-            backgroundColor: bgSubtle,
+            backgroundColor: bgGrouped,
             position: "sticky",
             top: 0,
             zIndex: 1,
@@ -210,7 +177,6 @@ function createStyle(primary) {
             padding: ".24rem .3rem",
             fontSize: ".3rem",
             color: textPrimary,
-            borderBottom: `1px solid ${border}`,
             backgroundColor: bgPage,
             transition: "background-color .12s",
             "&:active": {

package/build/Clickable/index.js

@@ -135,6 +135,13 @@ function Clickable(props) {
             };
         }
     }, [disable, touchable, onMouseUp]);
+    // 切换到 disable 时，立即清掉激活态，避免视觉上停留在按下样式
+    (0, react_1.useEffect)(() => {
+        if (disable) {
+            touchRef.current = false;
+            deactivate();
+        }
+    }, [disable, deactivate]);
     // 根据激活状态计算最终的 className 和 style
     const finalClassName = isActive && typeof activeClassName === 'string'
         ? (typeof className === 'string' ? `${className} ${activeClassName}` : activeClassName)

package/build/Container/index.d.ts

@@ -1,12 +1,20 @@
 import { Interpolation, Theme } from "@emotion/react";
-import React from "react";
+import { ReactNode } from "react";
 export interface ContainerProps {
     globalStyle?: Interpolation<Theme>;
-    children?: React.ReactNode;
+    children?: ReactNode;
     designWidth?: number;
+    maxWidth?: number;
 }
 /**
- * 自适应容器
- * @param props
+ * 自适应容器：所有使用本库的工程都需在根节点放置该组件，
+ * 否则各组件中的 rem 单位将无法自动跟随设备宽度缩放。
+ *
+ * 实现要点：
+ *  - <Global> 通过 useInsertionEffect 早于 useLayoutEffect 注入样式，
+ *    所以首次 layout 阶段所有 rem 已使用正确 fontSize，无需阻塞 children
+ *  - 浏览器字体缩放（用户系统调大字号）首挂载同步检测一次，scaleFactor 修正
+ *  - resize 走 rAF 节流，桌面拖拽 / 模拟器切设备不会反复 setState
+ *  - SSR 安全：所有 window 访问加 isBrowser 守卫
  */
 export declare function Container(props: ContainerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/build/Container/index.js

@@ -1,114 +1,119 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = Container;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("@emotion/react");
-const react_2 = __importStar(require("react"));
+const react_2 = require("react");
 const useWindowResize_1 = require("../Effect/useWindowResize");
 const useViewport_1 = require("../Effect/useViewport");
+const isBrowser = typeof window !== "undefined";
+// SSR 时 useLayoutEffect 会 warn，统一降级
+const useIsomorphicLayoutEffect = isBrowser ? react_2.useLayoutEffect : react_2.useEffect;
+// 取当前视口宽度，可选 maxWidth 兑底（0 / Infinity 表示不限制）
+function getViewportWidth(maxWidth) {
+    if (!isBrowser)
+        return 0;
+    const w = window.innerWidth || document.documentElement.clientWidth || 0;
+    if (!maxWidth || !isFinite(maxWidth))
+        return w;
+    return Math.min(w, maxWidth);
+}
 /**
- * 自适应容器
- * @param props
+ * 自适应容器：所有使用本库的工程都需在根节点放置该组件，
+ * 否则各组件中的 rem 单位将无法自动跟随设备宽度缩放。
+ *
+ * 实现要点：
+ *  - <Global> 通过 useInsertionEffect 早于 useLayoutEffect 注入样式，
+ *    所以首次 layout 阶段所有 rem 已使用正确 fontSize，无需阻塞 children
+ *  - 浏览器字体缩放（用户系统调大字号）首挂载同步检测一次，scaleFactor 修正
+ *  - resize 走 rAF 节流，桌面拖拽 / 模拟器切设备不会反复 setState
+ *  - SSR 安全：所有 window 访问加 isBrowser 守卫
  */
 function Container(props) {
-    const { designWidth = 750, globalStyle, children } = props;
-    // 计算理论根字体大小（未经浏览器缩放修正）
-    const calculateFontSize = (0, react_2.useCallback)((width) => {
-        return (width * 100) / designWidth;
-    }, [designWidth]);
-    // 理论基准字体大小（跟随窗口尺寸变化）
-    const [rawFontSize, setRawFontSize] = (0, react_2.useState)(() => calculateFontSize(window.innerWidth));
-    // 浏览器字体缩放因子（>1 表示用户放大了系统字体，<1 表示缩小）
-    // 独立存储，使得 resize 后缩放修正依然生效
+    const { designWidth = 750, maxWidth = 750, globalStyle, children } = props;
+    // 当前视口宽度
+    const [viewportWidth, setViewportWidth] = (0, react_2.useState)(() => getViewportWidth(maxWidth));
+    // 浏览器字体缩放因子（>1 用户放大系统字体），首挂载探测一次
     const [scaleFactor, setScaleFactor] = (0, react_2.useState)(1);
-    // 是否已完成字体缩放检测
-    const [isInitialized, setIsInitialized] = (0, react_2.useState)(false);
-    // 修正后的字体大小：统一对所有字体计算应用缩放修正
-    const correctedFontSize = (0, react_2.useMemo)(() => scaleFactor === 1
-        ? rawFontSize
-        : Math.round((rawFontSize / scaleFactor) * 10) / 10, [rawFontSize, scaleFactor]);
-    // 字体缩放检测
-    // Emotion 的 <Global> 通过 useInsertionEffect 注入样式，早于 useLayoutEffect
-    // 因此 useLayoutEffect 内 getComputedStyle 可正确读取已注入的字体大小
-    // 检测和修正均在浏览器绘制前同步完成，避免闪烁
-    (0, react_2.useLayoutEffect)(() => {
-        // 缩放因子在页面生命周期内不变，只需检测一次
-        if (isInitialized)
+    // 理论 fontSize（未修正）
+    const rawFontSize = (0, react_2.useMemo)(() => (viewportWidth * 100) / designWidth, [viewportWidth, designWidth]);
+    // 最终 fontSize：缩放修正 + 1 位小数，避免浮点抖动
+    const fontSize = (0, react_2.useMemo)(() => Math.round((scaleFactor === 1 ? rawFontSize : rawFontSize / scaleFactor) * 10) / 10, [rawFontSize, scaleFactor]);
+    // 浏览器字体缩放检测：仅首挂载执行一次，避免 setState 触发循环
+    const detectedRef = (0, react_2.useRef)(false);
+    useIsomorphicLayoutEffect(() => {
+        if (detectedRef.current || !isBrowser)
             return;
-        const computedSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
-        // 如果计算出的字体大小与期望不符（说明被浏览器字体设置影响了）
-        // 容差 1px，避免浮点精度导致误判
-        if (computedSize > 0 && Math.abs(computedSize - rawFontSize) > 1) {
-            // 记录缩放因子，后续所有字体计算（包括 resize）都会自动应用
-            setScaleFactor(computedSize / rawFontSize);
+        detectedRef.current = true;
+        const computed = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+        // 容差 1px 屏蔽浮点误差
+        if (computed > 0 && Math.abs(computed - rawFontSize) > 1) {
+            setScaleFactor(computed / rawFontSize);
         }
-        setIsInitialized(true);
-    }, [rawFontSize, isInitialized]);
-    // 窗口大小变化时更新理论字体大小
-    // correctedFontSize 通过 useMemo 自动应用 scaleFactor 修正
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // maxWidth 变更时重算 viewportWidth
+    (0, react_2.useEffect)(() => {
+        setViewportWidth((prev) => {
+            const next = getViewportWidth(maxWidth);
+            return prev === next ? prev : next;
+        });
+    }, [maxWidth]);
+    // resize：rAF 节流；桌面拖动窗口、DevTools 切换设备模拟时也只每帧一次
+    const rafRef = (0, react_2.useRef)(null);
     (0, useWindowResize_1.useWindowResize)(() => {
-        setRawFontSize(calculateFontSize(window.innerWidth));
+        if (!isBrowser || rafRef.current !== null)
+            return;
+        rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = null;
+            const next = getViewportWidth(maxWidth);
+            setViewportWidth((prev) => (prev === next ? prev : next));
+        });
     });
-    // 设置 viewport meta
+    // 组件卸载清理 pending rAF
+    (0, react_2.useEffect)(() => {
+        return () => {
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+        };
+    }, []);
+    // viewport meta
     (0, useViewport_1.useViewport)();
     // 激活 iOS 上的 :active 伪类
     (0, react_2.useEffect)(() => {
+        if (!isBrowser)
+            return;
         const noop = () => { };
         document.body.addEventListener("touchstart", noop, { passive: true });
         return () => {
             document.body.removeEventListener("touchstart", noop);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Global, { styles: [
-                    {
-                        "*": {
-                            boxSizing: "border-box",
-                        },
-                        html: {
-                            WebkitTapHighlightColor: "transparent",
-                            WebkitOverflowScrolling: "touch",
-                            WebkitTextSizeAdjust: "100%",
-                            fontSize: `${correctedFontSize}px`,
-                            touchAction: "manipulation",
-                        },
-                        body: {
-                            fontSize: "16px",
-                            margin: "0 auto",
-                        },
-                    },
-                    globalStyle,
-                ] }), isInitialized ? children : null] }));
+    // 全局样式：fontSize 写入 html，rem 自动跟随
+    // body 以 maxWidth 居中，保证 PC 端上页面不超过设计宽度，两侧留白
+    // CSS 变量 --clxx-max-width 供 Overlay/Fixed 等使用 fixed 定位的组件读取
+    // 从而把弹窗 / 遮罩限制在视口内（fixed 默认参考浏览器窗口，无法继承 body 宽度）
+    const hasMaxWidth = !!maxWidth && isFinite(maxWidth);
+    const globalStyles = (0, react_2.useMemo)(() => [
+        {
+            ":root": {
+                "--clxx-max-width": hasMaxWidth ? `${maxWidth}px` : "100%",
+            },
+            "*": {
+                boxSizing: "border-box",
+            },
+            html: {
+                WebkitTapHighlightColor: "transparent",
+                WebkitOverflowScrolling: "touch",
+                WebkitTextSizeAdjust: "100%",
+                fontSize: `${fontSize}px`,
+                touchAction: "manipulation",
+            },
+            body: Object.assign({ fontSize: "16px", margin: "0 auto" }, (hasMaxWidth ? { maxWidth: `${maxWidth}px` } : null)),
+        },
+        globalStyle,
+    ], [fontSize, maxWidth, hasMaxWidth, globalStyle]);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Global, { styles: globalStyles }), children] }));
 }

package/build/Countdowner/index.js

@@ -50,12 +50,14 @@ const react_1 = __importStar(require("react"));
 const Countdown_1 = require("../utils/Countdown");
 const Row_1 = require("../Flex/Row");
 function Countdowner(props) {
-    let { remain = 0, separator = ':', format = 'his', onUpdate, onEnd, separatorStyle, containerStyle, numberStyle, renderNumber, renderSeparator } = props, extra = __rest(props, ["remain", "separator", "format", "onUpdate", "onEnd", "separatorStyle", "containerStyle", "numberStyle", "renderNumber", "renderSeparator"]);
+    const { remain = 0, separator = ':', format = 'his', onUpdate, onEnd, separatorStyle, containerStyle, numberStyle, renderNumber, renderSeparator } = props, extra = __rest(props, ["remain", "separator", "format", "onUpdate", "onEnd", "separatorStyle", "containerStyle", "numberStyle", "renderNumber", "renderSeparator"]);
     const [value, setValue] = (0, react_1.useState)(null);
     // 使用 ref 保存最新的回调，避免频繁重建倒计时实例
     const callbacksRef = react_1.default.useRef({ onUpdate, onEnd });
     callbacksRef.current = { onUpdate, onEnd };
-    let content = [];
+    // content 每秒因 value 变化必然重建；这里没有 emotion 序列化负担：
+    // numberStyle / separatorStyle 仅做引用透传，emotion 对相同引用有 cache
+    const content = [];
     if (value && typeof value === 'object') {
         for (let i = 0; i < format.length; i++) {
             // 渲染数字进组件

package/build/DatePicker/Column.d.ts

@@ -0,0 +1,9 @@
+import type { DatePickerStyle } from "./style";
+export interface ColumnProps {
+    items: number[];
+    value: number;
+    onChange: (v: number) => void;
+    format?: (n: number) => string;
+    style: DatePickerStyle;
+}
+export declare function Column(props: ColumnProps): import("@emotion/react/jsx-runtime").JSX.Element;