clxx 3.0.1 → 3.0.4

package/build/RegionPicker/index.d.ts

@@ -8,7 +8,7 @@ export interface RegionNode {
 export interface RegionSelection {
     province: RegionNode;
     city: RegionNode;
-    district: RegionNode;
+    district: RegionNode | null;
 }
 export interface RegionLabels {
     province?: string;
@@ -25,9 +25,10 @@ export interface RegionPickerProps {
     maskClosable?: boolean;
     primary?: string;
     rounded?: boolean;
+    taiwanHKMacau?: boolean;
     onClose?: () => void;
     onCancel?: () => void;
     onConfirm?: (selection: RegionSelection) => void;
 }
 export declare function RegionPicker(props: RegionPickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function showRegionPicker(options?: Pick<RegionPickerProps, "value" | "data" | "title" | "cancelText" | "confirmText" | "labels" | "maskClosable" | "primary" | "rounded" | "onCancel" | "onConfirm">): void;
+export declare function showRegionPicker(options?: Pick<RegionPickerProps, "value" | "data" | "title" | "cancelText" | "confirmText" | "labels" | "maskClosable" | "primary" | "rounded" | "taiwanHKMacau" | "onCancel" | "onConfirm">): void;

package/build/RegionPicker/index.js

@@ -19,6 +19,12 @@ const Dialog_1 = require("../Dialog");
 const Clickable_1 = require("../Clickable");
 const style_1 = require("./style");
 const data_1 = require("./data");
+// 港澳台对应的顶层省级 value（台湾、香港、澳门）
+const HK_MO_TW_VALUES = new Set([
+    "710000",
+    "810000",
+    "820000",
+]);
 const DEFAULT_LABELS = {
     province: "省",
     city: "市",
@@ -26,8 +32,12 @@ const DEFAULT_LABELS = {
 };
 const TAB_ORDER = ["province", "city", "district"];
 function RegionPicker(props) {
-    const { value, data = data_1.treeRegionData, title = "请选择地区", cancelText = "取消", confirmText = "确定", labels, primary = style_1.DEFAULT_PRIMARY, rounded = true, onClose, onCancel, onConfirm, } = props;
+    const { value, data = data_1.treeRegionData, title = "请选择地区", cancelText = "取消", confirmText = "确定", labels, primary = style_1.DEFAULT_PRIMARY, rounded = true, taiwanHKMacau = false, onClose, onCancel, onConfirm, } = props;
     const style = (0, react_1.useMemo)(() => (0, style_1.createStyle)(primary, rounded), [primary, rounded]);
+    // 过滤后的顶层数据：仅在 data / taiwanHKMacau 变化时重建
+    const effectiveData = (0, react_1.useMemo)(() => taiwanHKMacau
+        ? data
+        : data.filter((x) => !HK_MO_TW_VALUES.has(x.value)), [data, taiwanHKMacau]);
     const lab = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, DEFAULT_LABELS), labels)), [labels]);
     // === 选中状态 ===
     // 当前每级选中节点；未选为 null
@@ -36,23 +46,26 @@ function RegionPicker(props) {
     const [districtNode, setDistrictNode] = (0, react_1.useState)(null);
     // 当前激活 tab
     const [activeTab, setActiveTab] = (0, react_1.useState)("province");
-    // 根据 value 初始化（只在首次 & data 变化时）
+    // 初始化 / data 恢复选中里允许 city 无 children（部分地区没有区级）
     (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d, _e;
         if (!value)
             return;
         const [pv, cv, dv] = value;
-        const p = (_a = data.find((x) => x.value === pv)) !== null && _a !== void 0 ? _a : null;
+        const p = (_a = effectiveData.find((x) => x.value === pv)) !== null && _a !== void 0 ? _a : null;
         const c = (_c = (_b = p === null || p === void 0 ? void 0 : p.children) === null || _b === void 0 ? void 0 : _b.find((x) => x.value === cv)) !== null && _c !== void 0 ? _c : null;
         const d = (_e = (_d = c === null || c === void 0 ? void 0 : c.children) === null || _d === void 0 ? void 0 : _d.find((x) => x.value === dv)) !== null && _e !== void 0 ? _e : null;
         setProvinceNode(p);
         setCityNode(c);
         setDistrictNode(d);
-        // 定位 activeTab 到「最深的未选层」，全部选好时停在 district
+        // 定位 activeTab 到「最深的未选层」；
+        // 如果选中的市无 children，则停在 city
         if (!p)
             setActiveTab("province");
         else if (!c)
             setActiveTab("city");
+        else if (!c.children || c.children.length === 0)
+            setActiveTab("city");
         else
             setActiveTab("district");
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -61,11 +74,11 @@ function RegionPicker(props) {
     const currentList = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (activeTab === "province")
-            return data;
+            return effectiveData;
         if (activeTab === "city")
             return (_a = provinceNode === null || provinceNode === void 0 ? void 0 : provinceNode.children) !== null && _a !== void 0 ? _a : [];
         return (_b = cityNode === null || cityNode === void 0 ? void 0 : cityNode.children) !== null && _b !== void 0 ? _b : [];
-    }, [activeTab, data, provinceNode, cityNode]);
+    }, [activeTab, effectiveData, provinceNode, cityNode]);
     const selectedValueOfTab = (tab) => {
         var _a, _b, _c;
         if (tab === "province")
@@ -74,13 +87,13 @@ function RegionPicker(props) {
             return (_b = cityNode === null || cityNode === void 0 ? void 0 : cityNode.value) !== null && _b !== void 0 ? _b : null;
         return (_c = districtNode === null || districtNode === void 0 ? void 0 : districtNode.value) !== null && _c !== void 0 ? _c : null;
     };
-    // tab 是否可点击：只有已有对应级数据时才可点（即上级已选）
+    // tab 是否可点击：上级已选；district 额外要求 city 有子级
     const tabEnabled = (tab) => {
         if (tab === "province")
             return true;
         if (tab === "city")
             return !!provinceNode;
-        return !!cityNode;
+        return !!(cityNode && cityNode.children && cityNode.children.length > 0);
     };
     // 点击列表项
     const handlePick = (item) => {
@@ -146,14 +159,20 @@ function RegionPicker(props) {
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    const canConfirm = !!(provinceNode && cityNode && districtNode);
+    const canConfirm = !!(provinceNode &&
+        cityNode &&
+        (!cityNode.children || cityNode.children.length === 0 || districtNode));
     const handleConfirm = () => {
         if (!canConfirm)
             return;
+        if (!provinceNode || !cityNode)
+            return;
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({
             province: { value: provinceNode.value, label: provinceNode.label },
             city: { value: cityNode.value, label: cityNode.label },
-            district: { value: districtNode.value, label: districtNode.label },
+            district: districtNode
+                ? { value: districtNode.value, label: districtNode.label }
+                : null,
         });
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };

package/build/RegionPicker/style.js

@@ -5,16 +5,18 @@ 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 / placeholder
+const rem_1 = require("../utils/rem");
+// 与 CitySelect 一致的设计变量（带线条风格）
+const textPrimary = "#1f2328";
+const textSecondary = "#6b7280";
+const textTertiary = "#9ca3af";
 const bgPage = "#ffffff";
-const bgSubtle = "rgba(0,0,0,.04)"; // 按下态浅灰
+const bgSubtle = "#f5f6f8";
+const border = "#e5e7eb";
 exports.DEFAULT_PRIMARY = "#2f7dff";
 function createStyle(primary, rounded = true) {
     const primaryActive = (0, color_1.darken)(primary, 0.15);
-    const sheetRadius = rounded ? ".28rem" : "0";
+    const sheetRadius = rounded ? (0, rem_1.r)(24) : "0";
     return {
         // 内容容器：动画/遮罩/全屏由 Dialog 提供，这里只保留视觉与排版
         sheet: (0, react_1.css)({
@@ -32,29 +34,30 @@ function createStyle(primary, rounded = true) {
             WebkitFontSmoothing: "antialiased",
             MozOsxFontSmoothing: "grayscale",
         }),
-        // iOS 风标题栏：无底边框，标题加粗居中，左右按钮都用主色
+        // 标题栏：底部 hairline 与列表区分；按钮中等字重
         header: (0, react_1.css)({
             flexShrink: 0,
-            height: ".92rem",
+            height: (0, rem_1.r)(92),
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            padding: "0 .16rem",
+            padding: `0 ${(0, rem_1.r)(16)}`,
+            borderBottom: `1px solid ${border}`,
         }),
         title: (0, react_1.css)({
             flex: 1,
             textAlign: "center",
-            fontSize: ".32rem",
+            fontSize: (0, rem_1.r)(30),
             fontWeight: 600,
             color: textPrimary,
-            letterSpacing: ".01rem",
+            letterSpacing: (0, rem_1.r)(1),
         }),
         btn: (0, react_1.css)({
-            minWidth: "1.1rem",
-            padding: "0 .08rem",
-            fontSize: ".3rem",
+            minWidth: (0, rem_1.r)(110),
+            padding: `0 ${(0, rem_1.r)(8)}`,
+            fontSize: (0, rem_1.r)(28),
             fontWeight: 400,
-            lineHeight: ".92rem",
+            lineHeight: (0, rem_1.r)(92),
             cursor: "pointer",
             transition: "opacity .15s, color .15s",
         }),
@@ -65,7 +68,7 @@ function createStyle(primary, rounded = true) {
         }),
         btnConfirm: (0, react_1.css)({
             textAlign: "right",
-            fontWeight: 600,
+            fontWeight: 500,
             color: primary,
             "&:active": { color: primaryActive, opacity: 0.65 },
         }),
@@ -73,17 +76,18 @@ function createStyle(primary, rounded = true) {
             color: textTertiary,
             cursor: "not-allowed",
             pointerEvents: "none",
-            fontWeight: 600,
+            fontWeight: 500,
             "&:active": { opacity: 1, color: textTertiary },
         }),
-        // tabs 行：轻量化，激活态用细下划线提示；底部加 hairline 分隔下方列表
+        // tabs 行：浅灰底色（与 CitySelect 字母分组标题色一致），激活态细下划线
         tabs: (0, react_1.css)({
             flexShrink: 0,
             display: "flex",
             alignItems: "stretch",
-            height: ".8rem",
-            padding: "0 .16rem",
-            borderBottom: "1px solid rgba(60,60,67,.18)",
+            height: (0, rem_1.r)(80),
+            padding: `0 ${(0, rem_1.r)(16)}`,
+            backgroundColor: bgSubtle,
+            borderBottom: `1px solid ${border}`,
         }),
         tab: (0, react_1.css)({
             flex: 1,
@@ -91,8 +95,8 @@ function createStyle(primary, rounded = true) {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            padding: "0 .08rem",
-            fontSize: ".28rem",
+            padding: `0 ${(0, rem_1.r)(8)}`,
+            fontSize: (0, rem_1.r)(26),
             color: textSecondary,
             position: "relative",
             cursor: "pointer",
@@ -100,47 +104,48 @@ function createStyle(primary, rounded = true) {
             whiteSpace: "nowrap",
             overflow: "hidden",
             textOverflow: "ellipsis",
-            letterSpacing: ".01rem",
+            letterSpacing: (0, rem_1.r)(1),
         }),
         tabPlaceholder: (0, react_1.css)({
             color: textTertiary,
         }),
         tabActive: (0, react_1.css)({
             color: primary,
-            fontWeight: 500,
+            fontWeight: 600,
             "&::after": {
                 content: '""',
                 position: "absolute",
                 left: "50%",
-                bottom: ".06rem",
+                bottom: (0, rem_1.r)(6),
                 transform: "translateX(-50%)",
-                width: ".32rem",
-                height: ".04rem",
+                width: (0, rem_1.r)(32),
+                height: (0, rem_1.r)(4),
                 backgroundColor: primary,
-                borderRadius: ".02rem",
+                borderRadius: (0, rem_1.r)(2),
             },
         }),
-        // 选项列表（固定高度，避免跳变；6 行 × .88rem = 5.28rem，整体更紧凑）
+        // 选项列表：固定高度避免跳变
         list: (0, react_1.css)({
             flexShrink: 0,
-            height: "5.28rem",
+            height: (0, rem_1.r)(528),
             overflowY: "auto",
             overflowX: "hidden",
             WebkitOverflowScrolling: "touch",
             overscrollBehavior: "contain",
             backgroundColor: bgPage,
-            paddingBottom: ".12rem",
         }),
-        // iOS 风列表项：无分隔线，仅按下态浅灰底
+        // 列表项：底部 hairline 分隔（CitySelect 风），按下浅灰底
         listItem: (0, react_1.css)({
             position: "relative",
-            height: ".88rem",
+            height: (0, rem_1.r)(88),
             display: "flex",
             alignItems: "center",
-            padding: "0 .32rem",
-            fontSize: ".3rem",
+            padding: `0 ${(0, rem_1.r)(30)}`,
+            fontSize: (0, rem_1.r)(30),
             color: textPrimary,
-            transition: "background-color .15s",
+            backgroundColor: bgPage,
+            borderBottom: `1px solid ${border}`,
+            transition: "background-color .12s",
             "&:active": {
                 backgroundColor: bgSubtle,
             },
@@ -151,36 +156,36 @@ function createStyle(primary, rounded = true) {
             whiteSpace: "nowrap",
             overflow: "hidden",
             textOverflow: "ellipsis",
-            letterSpacing: ".01rem",
+            letterSpacing: (0, rem_1.r)(1),
         }),
         listItemSelected: (0, react_1.css)({
             color: primary,
             fontWeight: 500,
         }),
-        // iOS 风对勾（SF Symbol checkmark 风格）
+        // 对勾
         checkIcon: (0, react_1.css)({
-            width: ".32rem",
-            height: ".32rem",
+            width: (0, rem_1.r)(32),
+            height: (0, rem_1.r)(32),
             flexShrink: 0,
-            marginLeft: ".16rem",
+            marginLeft: (0, rem_1.r)(16),
             position: "relative",
             "&::after": {
                 content: '""',
                 position: "absolute",
-                left: ".06rem",
-                top: ".04rem",
-                width: ".1rem",
-                height: ".2rem",
+                left: (0, rem_1.r)(6),
+                top: (0, rem_1.r)(4),
+                width: (0, rem_1.r)(10),
+                height: (0, rem_1.r)(20),
                 border: `solid ${primary}`,
-                borderWidth: "0 .03rem .03rem 0",
+                borderWidth: `0 ${(0, rem_1.r)(3)} ${(0, rem_1.r)(3)} 0`,
                 transform: "rotate(45deg)",
             },
         }),
         // 空数据占位
         empty: (0, react_1.css)({
-            padding: ".6rem 0",
+            padding: `${(0, rem_1.r)(60)} 0`,
             textAlign: "center",
-            fontSize: ".26rem",
+            fontSize: (0, rem_1.r)(26),
             color: textTertiary,
         }),
     };

package/build/ScrollView/style.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = void 0;
 const react_1 = require("@emotion/react");
+const rem_1 = require("../utils/rem");
 // 模仿 iOS「正在输入」气泡的三点呼吸节奏
 const dotPulse = (0, react_1.keyframes) `
   0%, 80%, 100% {
@@ -23,12 +24,12 @@ exports.style = {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        gap: ".12rem",
-        padding: ".24rem 0",
+        gap: (0, rem_1.r)(12),
+        padding: `${(0, rem_1.r)(24)} 0`,
     },
     loadingDot: (0, react_1.css) `
-    width: 0.12rem;
-    height: 0.12rem;
+    width: ${(0, rem_1.r)(12)};
+    height: ${(0, rem_1.r)(12)};
     border-radius: 50%;
     background: #c7c7cc;
     animation: ${dotPulse} 1.2s ease-in-out infinite both;

package/build/Toast/style.js

@@ -4,6 +4,7 @@ exports.style = exports.bottomHideAnimation = exports.bottomShowAnimation = expo
 exports.getAnimation = getAnimation;
 const react_1 = require("@emotion/react");
 const theme_1 = require("../utils/theme");
+const rem_1 = require("../utils/rem");
 const easing = "cubic-bezier(.22,.61,.36,1)";
 exports.middleShowAnimation = (0, react_1.keyframes) `
   from {
@@ -95,7 +96,7 @@ exports.style = {
         left: "50%",
         transform: "translateX(-50%)",
         zIndex: 9999,
-        maxWidth: "6rem",
+        maxWidth: (0, rem_1.r)(600),
         pointerEvents: "none",
         fontFamily: theme_1.fontStack,
         WebkitFontSmoothing: "antialiased",
@@ -111,12 +112,12 @@ exports.style = {
         whiteSpace: "pre-wrap",
         wordBreak: "break-word",
         lineHeight: 1.5,
-        fontSize: ".28rem",
+        fontSize: (0, rem_1.r)(28),
         fontWeight: 400,
-        letterSpacing: ".01rem",
+        letterSpacing: (0, rem_1.r)(1),
         textAlign: "center",
-        padding: ".2rem .32rem",
-        boxShadow: "0 .12rem .32rem rgba(0,0,0,.18)",
+        padding: `${(0, rem_1.r)(20)} ${(0, rem_1.r)(32)}`,
+        boxShadow: `0 ${(0, rem_1.r)(12)} ${(0, rem_1.r)(32)} rgba(0,0,0,.18)`,
         backdropFilter: "blur(20px) saturate(160%)",
         WebkitBackdropFilter: "blur(20px) saturate(160%)",
     }),

package/build/index.d.ts

@@ -9,6 +9,7 @@ export { defaultScroll } from './utils/defaultScroll';
 export { is } from './utils/is';
 export { waitFor, waitUntil } from './utils/wait';
 export { normalizeUnit, splitValue } from './utils/cssUtil';
+export { r } from './utils/rem';
 export { createApp, history, getHistory } from './utils/createApp';
 export { createPortalDOM } from './utils/dom';
 export { useInterval } from './Effect/useInterval';
@@ -37,3 +38,5 @@ export { CarouselNotice } from './CarouselNotice';
 export { CitySelect, showCitySelect } from './CitySelect';
 export { DatePicker, showDatePicker } from './DatePicker';
 export { RegionPicker, showRegionPicker } from './RegionPicker';
+export { MapLocationSelection, showMapLocationSelection, getLocation, } from './MapLocationSelection';
+export type { MapLocationSelectionProps, SelectedLocation, GetLocationOptions, } from './MapLocationSelection';

package/build/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.showUniqToast = exports.showToast = exports.Overlay = exports.Countdowner = exports.ColStart = exports.ColEvenly = exports.ColEnd = exports.ColCenter = exports.ColBetween = exports.ColAround = exports.Col = exports.RowStart = exports.RowEvenly = exports.RowEnd = exports.RowCenter = exports.RowBetween = exports.RowAround = exports.Row = exports.FlexItem = exports.Flex = exports.Container = exports.Ago = exports.useViewport = exports.useWindowResize = exports.useUpdate = exports.useTick = exports.useInterval = exports.createPortalDOM = exports.getHistory = exports.history = exports.createApp = exports.splitValue = exports.normalizeUnit = exports.waitUntil = exports.waitFor = exports.is = exports.defaultScroll = exports.Countdown = exports.calendarTable = exports.registerHostAlias = exports.buildUrlByOption = exports.sendRequest = exports.sugarSend = exports.sendJSON = exports.POST = exports.GET = exports.ago = exports.uniqKey = exports.jsonp = exports.tick = void 0;
-exports.showRegionPicker = exports.RegionPicker = exports.showDatePicker = exports.DatePicker = exports.showCitySelect = exports.CitySelect = exports.CarouselNotice = exports.ScrollView = exports.showAlert = exports.AutoGrid = exports.SafeArea = exports.showLoadingAtLeast = exports.showLoading = exports.Indicator = exports.Clickable = exports.showDialog = void 0;
+exports.showToast = exports.Overlay = exports.Countdowner = exports.ColStart = exports.ColEvenly = exports.ColEnd = exports.ColCenter = exports.ColBetween = exports.ColAround = exports.Col = exports.RowStart = exports.RowEvenly = exports.RowEnd = exports.RowCenter = exports.RowBetween = exports.RowAround = exports.Row = exports.FlexItem = exports.Flex = exports.Container = exports.Ago = exports.useViewport = exports.useWindowResize = exports.useUpdate = exports.useTick = exports.useInterval = exports.createPortalDOM = exports.getHistory = exports.history = exports.createApp = exports.r = exports.splitValue = exports.normalizeUnit = exports.waitUntil = exports.waitFor = exports.is = exports.defaultScroll = exports.Countdown = exports.calendarTable = exports.registerHostAlias = exports.buildUrlByOption = exports.sendRequest = exports.sugarSend = exports.sendJSON = exports.POST = exports.GET = exports.ago = exports.uniqKey = exports.jsonp = exports.tick = void 0;
+exports.getLocation = exports.showMapLocationSelection = exports.MapLocationSelection = exports.showRegionPicker = exports.RegionPicker = exports.showDatePicker = exports.DatePicker = exports.showCitySelect = exports.CitySelect = exports.CarouselNotice = exports.ScrollView = exports.showAlert = exports.AutoGrid = exports.SafeArea = exports.showLoadingAtLeast = exports.showLoading = exports.Indicator = exports.Clickable = exports.showDialog = exports.showUniqToast = void 0;
 var tick_1 = require("./utils/tick");
 Object.defineProperty(exports, "tick", { enumerable: true, get: function () { return tick_1.tick; } });
 var jsonp_1 = require("./utils/jsonp");
@@ -32,6 +32,8 @@ Object.defineProperty(exports, "waitUntil", { enumerable: true, get: function ()
 var cssUtil_1 = require("./utils/cssUtil");
 Object.defineProperty(exports, "normalizeUnit", { enumerable: true, get: function () { return cssUtil_1.normalizeUnit; } });
 Object.defineProperty(exports, "splitValue", { enumerable: true, get: function () { return cssUtil_1.splitValue; } });
+var rem_1 = require("./utils/rem");
+Object.defineProperty(exports, "r", { enumerable: true, get: function () { return rem_1.r; } });
 var createApp_1 = require("./utils/createApp");
 Object.defineProperty(exports, "createApp", { enumerable: true, get: function () { return createApp_1.createApp; } });
 Object.defineProperty(exports, "history", { enumerable: true, get: function () { return createApp_1.history; } });
@@ -106,3 +108,7 @@ Object.defineProperty(exports, "showDatePicker", { enumerable: true, get: functi
 var RegionPicker_1 = require("./RegionPicker");
 Object.defineProperty(exports, "RegionPicker", { enumerable: true, get: function () { return RegionPicker_1.RegionPicker; } });
 Object.defineProperty(exports, "showRegionPicker", { enumerable: true, get: function () { return RegionPicker_1.showRegionPicker; } });
+var MapLocationSelection_1 = require("./MapLocationSelection");
+Object.defineProperty(exports, "MapLocationSelection", { enumerable: true, get: function () { return MapLocationSelection_1.MapLocationSelection; } });
+Object.defineProperty(exports, "showMapLocationSelection", { enumerable: true, get: function () { return MapLocationSelection_1.showMapLocationSelection; } });
+Object.defineProperty(exports, "getLocation", { enumerable: true, get: function () { return MapLocationSelection_1.getLocation; } });

package/build/utils/rem.d.ts

@@ -0,0 +1 @@
+export declare function r(px750: number): string;

package/build/utils/rem.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.r = r;
+// 把 750 设计稿下的像素值转成响应式 css 长度。
+//
+// 库内组件统一使用 r() 表达尺寸，不再写 ".28rem" 字面量——这样即便用户在
+// Container 上传入非 750 的 designWidth（如 375 / 1080），库内组件的视觉比例
+// 仍然按 750 设计稿计算，不会被放大或缩小。
+//
+// 实现原理：依赖 Container 注入的 --clxx-px 变量。
+//   - --clxx-px 的语义是「750 设计稿下的 1px 在当前视口下渲染成多少 css px」
+//     即 --clxx-px = clamp(viewport, maxWidth) / 750（单位 px）
+//   - r(28) → calc(28 * var(--clxx-px, 1px))
+//             视口 750 时 = 28px
+//             视口 375 时 = 14px
+//             视口 1080（无 maxWidth）时 = 40.32px
+//             —— 与原 ".28rem" 在默认 designWidth=750 + 同视口下完全一致
+//
+// fallback 1px：用户未挂 Container 时（或 SSR 首屏未注入 :root 变量），
+// calc 不会因 var() 解析失败而整体 invalid，组件至少能以 750 设计稿原像素显示，
+// 不会坍缩成 width:auto / padding:0。
+//
+// 与「写字面 rem」相比的关键差异：
+//   - rem 字面量受 html font-size 影响，html font-size 由 Container 按
+//     **用户的** designWidth 计算 —— 用户改 designWidth=375 时库内 rem 视觉翻倍；
+//   - r() 走独立 CSS 变量 --clxx-px，与用户 designWidth 完全解耦，永远稳。
+//
+// 性能：calc/var 是 specified→computed 一次求值，结果进 computed style 缓存，
+// 不会每帧重算。同 px 值复用同一字符串实例（cache），减少 GC 压力，emotion
+// className hash 命中率也更高。
+//
+// @param px750 在 750 设计稿下的像素值
+// @returns css 长度字符串，可直接喂给 emotion css 对象 / 模板字符串 / 内联 style
+//
+// @example
+//   // before
+//   const style = css({ padding: ".2rem .32rem" });
+//   // after
+//   const style = css({ padding: `${r(20)} ${r(32)}` });
+const cache = new Map();
+function r(px750) {
+    const cached = cache.get(px750);
+    if (cached !== undefined)
+        return cached;
+    const value = `calc(${px750} * var(--clxx-px, 1px))`;
+    cache.set(px750, value);
+    return value;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clxx",
-  "version": "3.0.1",
+  "version": "3.0.4",
   "description": "Basic JS library for mobile devices",
   "main": "./build/index.js",
   "module": "./build/index.js",
@@ -8,7 +8,7 @@
     "example": "example"
   },
   "scripts": {
-    "start": "tsc -w --pretty",
+    "dev": "tsc -w --pretty",
     "build": "rimraf ./build && tsc",
     "pub": "npm run build && npm publish"
   },

package/test/src/city-select/index.jsx

@@ -1,21 +1,34 @@
 import { showCitySelect } from "@";
-import { useEffect } from "react";
 
 export default function Index() {
   return (
-    <button
-      onClick={() => {
-        showCitySelect({
-          onSelect: (city) => {
-            console.log("选择了城市：", city);
-          },
-          getLocation() {
-            return "北京";
-          },
-        });
-      }}
-    >
-      选择城市
-    </button>
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.2rem", padding: "0.3rem" }}>
+      <button
+        onClick={() => {
+          showCitySelect({
+            onSelect: (city) => {
+              console.log("选择了城市：", city);
+            },
+            getLocation() {
+              return "北京";
+            },
+          });
+        }}
+      >
+        选择城市（默认：不含港澳台）
+      </button>
+      <button
+        onClick={() => {
+          showCitySelect({
+            taiwanHKMacau: true,
+            onSelect: (city) => {
+              console.log("选择了城市：", city);
+            },
+          });
+        }}
+      >
+        选择城市（含港澳台）
+      </button>
+    </div>
   );
 }

package/test/src/index/index.jsx

@@ -19,6 +19,11 @@ const pageConfig = [
   { path: "city-select", title: "CitySelect城市选择器", enable: true },
   { path: "date-picker", title: "DatePicker日期时间选择器", enable: true },
   { path: "region-picker", title: "RegionPicker省市区选择器", enable: true },
+  {
+    path: "map-location-selection",
+    title: "MapLocationSelection地图选址",
+    enable: true,
+  },
 ];
 
 export default function Index() {

package/test/src/index.jsx

@@ -7,6 +7,7 @@ createApp({
   target: "#root",
   // maxDocWidth: 10000,
   maxWidth: 750,
+  // designWidth: 375,
   async render(pathname) {
     const module = await import(`./${pathname}/index.jsx`);
     const Page = module.default;