clxx 2.1.7 → 3.0.0

package/build/CarouselNotice/index.js

@@ -13,87 +13,93 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselNotice = CarouselNotice;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("@emotion/react");
-const react_2 = require("react");
+const react_1 = require("react");
+const react_2 = require("@emotion/react");
 const useInterval_1 = require("../Effect/useInterval");
 const style_1 = require("./style");
+const justifyMap = {
+    start: style_1.style.justifyStart,
+    center: style_1.style.justifyCenter,
+    end: style_1.style.justifyEnd,
+};
 /**
  * 滚动循环轮播公告
- * @param props
+ *
+ * 实现要点：
+ *  - 渲染当前条 + 下一条共两项，wrapper 高 200%
+ *  - 用 keyframes 把 wrapper 从 0 推到 -50%，配合 fill-mode: forwards
+ *    保证动画结束后定格在 -50%，与 React 提交解耦，杜绝"回弹闪烁"
+ *  - animationend 触发后同步切换 current（新 current 的第一项 = 旧 current 的第二项）
+ *    且 wrapper 因 key 变化重挂载，回到 0 即开始下一轮
  */
 function CarouselNotice(props) {
-    const { width, height, justify = 'center', interval = 3000, duration = 200, list = [], containerStyle, wrapperStyle, itemStyle } = props, attrs = __rest(props, ["width", "height", "justify", "interval", "duration", "list", "containerStyle", "wrapperStyle", "itemStyle"]);
-    const [current, setCurrent] = (0, react_2.useState)(0);
-    const [animation, setAnimation] = (0, react_2.useState)(false);
-    /**
-     * 一旦列表发生更新时，触发的逻辑
-     */
-    (0, react_2.useEffect)(() => {
+    var _a;
+    const { width, height, justify = "center", interval = 3000, duration = 400, list, containerStyle, wrapperStyle, itemStyle } = props, attrs = __rest(props, ["width", "height", "justify", "interval", "duration", "list", "containerStyle", "wrapperStyle", "itemStyle"]);
+    const safeList = Array.isArray(list) ? list : [];
+    const len = safeList.length;
+    const [current, setCurrent] = (0, react_1.useState)(0);
+    const [animating, setAnimating] = (0, react_1.useState)(false);
+    // list 变化：归零 + 取消动画态；用引用比较保险
+    const lastListRef = (0, react_1.useRef)(safeList);
+    if (lastListRef.current !== safeList) {
+        lastListRef.current = safeList;
+    }
+    (0, react_1.useEffect)(() => {
         setCurrent(0);
-        setAnimation(false);
-    }, [list]);
-    /**
-     * 每隔多少秒更新一次动画
-     */
-    (0, useInterval_1.useInterval)(() => {
-        setAnimation(true);
-    }, list.length > 1 ? interval : null);
-    /**
-     * 当前显示的两条数据，只用两条数据来轮播
-     */
-    const showContent = () => {
-        const justifyStyle = {};
-        if (justify === 'center') {
-            justifyStyle.justifyContent = 'center';
-        }
-        else if (justify === 'start') {
-            justifyStyle.justifyContent = 'flex-start';
-        }
-        else if (justify === 'end') {
-            justifyStyle.justifyContent = 'flex-end';
-        }
-        else {
-            justifyStyle.justifyContent = 'center';
+        setAnimating(false);
+    }, [safeList]);
+    // current 越界保护（list 缩短时）
+    (0, react_1.useEffect)(() => {
+        if (len > 0 && current >= len) {
+            setCurrent(0);
+            setAnimating(false);
         }
-        const itemCss = [style_1.style.item, justifyStyle];
-        if (list.length === 1) {
-            return ((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
-        }
-        const showList = [];
-        if (current === list.length - 1) {
-            showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[list.length - 1] }, current));
-            showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
-        }
-        else {
-            showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[current] }, current));
-            showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[current + 1] }, current + 1));
-        }
-        return showList;
-    };
-    /**
-     * 获取动画
-     */
-    const getAnimation = () => {
-        if (!animation || list.length <= 1) {
-            return null;
-        }
-        return (0, react_1.css)({
-            animationName: style_1.Bubble,
-            animationTimingFunction: 'linear',
-            animationDuration: `${duration}ms`,
-        });
-    };
-    /**
-     * 一轮动画结束时触发下一轮
-     */
-    const animationEnd = () => {
-        let newIndex = current + 1;
-        if (current >= list.length - 1) {
-            newIndex = 0;
+    }, [len, current]);
+    // 定时触发动画；只有列表 >1 条且未在动画中才启动 interval
+    (0, useInterval_1.useInterval)(() => {
+        // 若上一轮动画还没结束（极端时序），跳过本次
+        if (!animating)
+            setAnimating(true);
+    }, len > 1 ? interval : null);
+    // 容器尺寸样式（仅在 width/height 变化时重建）
+    const sizeStyle = (0, react_1.useMemo)(() => ({ width, height }), [width, height]);
+    // 对齐样式（静态映射，无新对象产生）
+    const justifyStyle = (_a = justifyMap[justify]) !== null && _a !== void 0 ? _a : style_1.style.justifyCenter;
+    // 动画 css（仅依赖 duration，缓存复用）
+    const animationCss = (0, react_1.useMemo)(() => (0, react_2.css)({
+        animationName: `${style_1.Bubble}`,
+        animationTimingFunction: "ease-in-out",
+        animationDuration: `${duration}ms`,
+        animationFillMode: "forwards",
+    }), [duration]);
+    // 动画结束：切到下一条 + 重置动画态
+    const handleAnimationEnd = (0, react_1.useCallback)((e) => {
+        // 防止子元素动画事件冒泡误触
+        if (e.currentTarget !== e.target)
+            return;
+        setCurrent((prev) => (prev + 1) % len);
+        setAnimating(false);
+    }, [len]);
+    // 当前显示的两条
+    const items = (0, react_1.useMemo)(() => {
+        if (len === 0)
+            return [];
+        if (len === 1) {
+            return [
+                (0, jsx_runtime_1.jsx)("div", { css: [style_1.style.item, justifyStyle, itemStyle], children: safeList[0] }, "only"),
+            ];
         }
-        setCurrent(newIndex);
-        setAnimation(false);
-    };
-    return (Array.isArray(list) &&
-        list.length > 0 && ((0, jsx_runtime_1.jsx)("div", Object.assign({}, attrs, { css: [style_1.style.box, { width, height }, containerStyle], children: (0, jsx_runtime_1.jsx)("div", { onAnimationEnd: animationEnd, css: [style_1.style.wrapper, getAnimation(), wrapperStyle], children: showContent() }) }))));
+        const nextIndex = (current + 1) % len;
+        return [
+            (0, jsx_runtime_1.jsx)("div", { css: [style_1.style.item, justifyStyle, itemStyle], children: safeList[current] }, `a-${current}`),
+            (0, jsx_runtime_1.jsx)("div", { css: [style_1.style.item, justifyStyle, itemStyle], children: safeList[nextIndex] }, `b-${nextIndex}`),
+        ];
+    }, [safeList, current, len, justifyStyle, itemStyle]);
+    if (len === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, attrs, { css: [style_1.style.box, sizeStyle, containerStyle], children: (0, jsx_runtime_1.jsx)("div", { onAnimationEnd: handleAnimationEnd, css: [
+                style_1.style.wrapper,
+                animating && len > 1 ? animationCss : null,
+                wrapperStyle,
+            ], children: items }, animating ? `anim-${current}` : `idle-${current}`) })));
 }

package/build/CarouselNotice/style.js

@@ -2,20 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.Bubble = void 0;
 const react_1 = require("@emotion/react");
+// translate 走百分比；fill-mode: forwards 保证动画结束后定格在 -50%，
+// 与 React 的 setState 提交顺序解耦，杜绝"动画结束帧"回弹到 0 造成的闪烁
 exports.Bubble = (0, react_1.keyframes) `
   from {
-    transform: translateY(0);
+    transform: translate3d(0, 0, 0);
   }
   to {
-    transform: translateY(-50%);
+    transform: translate3d(0, -50%, 0);
   }
 `;
 exports.style = {
     box: {
         position: "relative",
         overflow: "hidden",
-        transition: "all 200ms",
-        height: '.8rem',
+        height: ".8rem",
     },
     wrapper: {
         position: "absolute",
@@ -23,6 +24,10 @@ exports.style = {
         top: 0,
         width: "100%",
         height: "200%",
+        // 提示分层，避免动画期间反复合成层切换
+        willChange: "transform",
+        // 默认静止态，由 animation 驱动
+        transform: "translate3d(0, 0, 0)",
     },
     item: {
         width: "100%",
@@ -30,5 +35,10 @@ exports.style = {
         display: "flex",
         alignItems: "center",
         fontSize: "initial",
+        // 避免子元素文本溢出影响 box 高度计算
+        overflow: "hidden",
     },
+    justifyStart: { justifyContent: "flex-start" },
+    justifyCenter: { justifyContent: "center" },
+    justifyEnd: { justifyContent: "flex-end" },
 };

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;
@@ -201,7 +169,7 @@ function CitySelect(props) {
         if (!el)
             return;
         let lastLetter = null;
-        const updateByTouch = (clientY) => {
+        const updateByY = (clientY) => {
             var _a;
             const list = lettersRef.current;
             if (list.length === 0)
@@ -221,28 +189,63 @@ function CitySelect(props) {
                 (_a = onLetterChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onLetterChangeRef, letter);
             }
         };
-        const handleTouchStart = (e) => {
+        // 优先使用触摸事件；不支持触摸才回退到鼠标事件，避免两套并存冲突
+        const isTouch = typeof window !== "undefined" &&
+            ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+        if (isTouch) {
+            const handleTouchStart = (e) => {
+                setTouching(true);
+                updateByY(e.touches[0].clientY);
+            };
+            const handleTouchMove = (e) => {
+                // 阻止滚动，需要非 passive 监听器
+                e.preventDefault();
+                updateByY(e.touches[0].clientY);
+            };
+            const handleTouchEnd = () => {
+                setTouching(false);
+                lastLetter = null;
+            };
+            el.addEventListener("touchstart", handleTouchStart, { passive: false });
+            el.addEventListener("touchmove", handleTouchMove, { passive: false });
+            el.addEventListener("touchend", handleTouchEnd);
+            el.addEventListener("touchcancel", handleTouchEnd);
+            return () => {
+                el.removeEventListener("touchstart", handleTouchStart);
+                el.removeEventListener("touchmove", handleTouchMove);
+                el.removeEventListener("touchend", handleTouchEnd);
+                el.removeEventListener("touchcancel", handleTouchEnd);
+            };
+        }
+        // 鼠标端：按下后拖动，move/up 绑在 document 以支持拖出 sidebar
+        let dragging = false;
+        const handleMouseDown = (e) => {
+            if (e.button !== 0)
+                return;
+            e.preventDefault();
+            dragging = true;
             setTouching(true);
-            updateByTouch(e.touches[0].clientY);
+            updateByY(e.clientY);
         };
-        const handleTouchMove = (e) => {
-            // 阻止滚动，需要非 passive 监听器
-            e.preventDefault();
-            updateByTouch(e.touches[0].clientY);
+        const handleMouseMove = (e) => {
+            if (!dragging)
+                return;
+            updateByY(e.clientY);
         };
-        const handleTouchEnd = () => {
+        const handleMouseUp = () => {
+            if (!dragging)
+                return;
+            dragging = false;
             setTouching(false);
             lastLetter = null;
         };
-        el.addEventListener("touchstart", handleTouchStart, { passive: false });
-        el.addEventListener("touchmove", handleTouchMove, { passive: false });
-        el.addEventListener("touchend", handleTouchEnd);
-        el.addEventListener("touchcancel", handleTouchEnd);
+        el.addEventListener("mousedown", handleMouseDown);
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
         return () => {
-            el.removeEventListener("touchstart", handleTouchStart);
-            el.removeEventListener("touchmove", handleTouchMove);
-            el.removeEventListener("touchend", handleTouchEnd);
-            el.removeEventListener("touchcancel", handleTouchEnd);
+            el.removeEventListener("mousedown", handleMouseDown);
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
         };
     }, [isSearching]);
     // 手动滚动城市列表时，根据当前最靠上的区块激活对应字母（rAF 节流）
@@ -276,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;