clxx 3.0.1 → 3.0.4

package/test/src/map-location-selection/index.jsx

@@ -0,0 +1,192 @@
+import { showMapLocationSelection, getLocation } from "@";
+
+const AMAP_KEY = "9e93b7084bb3da8d2094c02dc4221d47";
+// JSAPI v2.0 调用 PlaceSearch / Geocoder / AutoComplete 等服务类接口必须配置安全密钥
+const AMAP_SECURITY_JS_CODE = "d57bb5e049555d04e0dabcd7557ce5e2";
+
+const BMAP_AK = "YS5En8FGCXQnAt65nAXn5LOUP5ANRRQy";
+
+const reportSelected = (loc) => {
+  console.log("选择了位置：", loc);
+  const region = [loc.province, loc.city, loc.district]
+    .filter(Boolean)
+    .join(" / ");
+  const codes = [loc.provinceCode, loc.cityCode, loc.districtCode]
+    .filter(Boolean)
+    .join(" / ");
+  alert(
+    `已选择：${loc.name || "(无名称)"}\n` +
+      `地址：${loc.address}\n` +
+      `经纬度：${loc.longitude.toFixed(6)}, ${loc.latitude.toFixed(6)}\n` +
+      `行政区划：${region || "(未返回)"}\n` +
+      `行政区划码：${codes || "(未返回)"}`,
+  );
+};
+
+// 调用函数式 getLocation，返回值与组件 onSelect 完全同结构（共享
+// buildSelectedLocation 拼装），用 reportSelected 弹同样的展示框。
+const reportError = (err) => {
+  console.error("getLocation 失败：", err);
+  alert(`定位失败：${err?.message || err}`);
+};
+
+export default function Index() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.2rem",
+        padding: "0.3rem",
+      }}
+    >
+      <button
+        onClick={() => {
+          showMapLocationSelection({
+            amapKey: AMAP_KEY,
+            securityJsCode: AMAP_SECURITY_JS_CODE,
+            onSelect: reportSelected,
+            onClose: () => {
+              console.log("关闭了地图选址（高德）");
+            },
+          });
+        }} 
+      >
+        打开地图选址（高德）
+      </button>
+
+      <button
+        onClick={() => {
+          showMapLocationSelection({
+            amapKey: AMAP_KEY,
+            securityJsCode: AMAP_SECURITY_JS_CODE,
+            initialCity: "上海",
+            // GCJ02 上海人民广场
+            initialCenter: [121.473667, 31.230525],
+            primary: "#07c160",
+            onSelect: reportSelected,
+          });
+        }}
+      >
+        打开地图选址（高德 - 上海，绿色主题）
+      </button>
+
+      <button
+        onClick={() => {
+          showMapLocationSelection({
+            provider: "bmap",
+            bmapAk: BMAP_AK,
+            onSelect: reportSelected,
+            onClose: () => {
+              console.log("关闭了地图选址（百度）");
+            },
+          });
+        }}
+      >
+        打开地图选址（百度）
+      </button>
+
+      <button
+        onClick={() => {
+          showMapLocationSelection({
+            provider: "bmap",
+            bmapAk: BMAP_AK,
+            // BD09 上海人民广场
+            initialCenter: [121.479675, 31.236397],
+            primary: "#07c160",
+            onSelect: reportSelected,
+          });
+        }}
+      >
+        打开地图选址（百度 - 上海，绿色主题）
+      </button>
+
+      {/* 函数式 getLocation：不弹窗、直接拿一份 SelectedLocation。
+          数据格式与上方 reportSelected 完全一致，复用同一个展示弹框。 */}
+      <button
+        onClick={() => {
+          getLocation({
+            amapKey: AMAP_KEY,
+            securityJsCode: AMAP_SECURITY_JS_CODE,
+          })
+            .then(reportSelected)
+            .catch(reportError);
+        }}
+      >
+        getLocation（高德 - 默认，禁用 IP 兜底）
+      </button>
+
+      <button
+        onClick={() => {
+          getLocation({
+            amapKey: AMAP_KEY,
+            securityJsCode: AMAP_SECURITY_JS_CODE,
+            allowIpFallback: true,
+          })
+            .then(reportSelected)
+            .catch(reportError);
+        }}
+      >
+        getLocation（高德 - 允许 IP 兜底）
+      </button>
+
+      <button
+        onClick={() => {
+          getLocation({
+            provider: "bmap",
+            bmapAk: BMAP_AK,
+          })
+            .then(reportSelected)
+            .catch(reportError);
+        }}
+      >
+        getLocation（百度 - 默认，禁用 IP 兜底）
+      </button>
+
+      <button
+        onClick={() => {
+          getLocation({
+            provider: "bmap",
+            bmapAk: BMAP_AK,
+            allowIpFallback: true,
+          })
+            .then(reportSelected)
+            .catch(reportError);
+        }}
+      >
+        getLocation（百度 - 允许 IP 兜底）
+      </button>
+
+      {/* 组件入口的 IP 兜底测试：在 H5 GPS 失败 / 拒绝授权 / 室内信号差时，
+          高德 / 百度 SDK 内部默认会自动 IP 定位（城市级精度，accuracy 通常
+          ≥ 5000m）。组件默认丢弃 IP 结果（allowIpFallback=false）→ 回到
+          fallback 中心；传 allowIpFallback=true 后接受 IP 结果 → 列表展示
+          city 级附近。 */}
+      <button
+        onClick={() => {
+          showMapLocationSelection({
+            amapKey: AMAP_KEY,
+            securityJsCode: AMAP_SECURITY_JS_CODE,
+            allowIpFallback: true,
+            onSelect: reportSelected,
+          });
+        }}
+      >
+        打开地图选址（高德 - 允许 IP 兜底）
+      </button>
+
+      <button
+        onClick={() => {
+          showMapLocationSelection({
+            provider: "bmap",
+            bmapAk: BMAP_AK,
+            allowIpFallback: true,
+            onSelect: reportSelected,
+          });
+        }}
+      >
+        打开地图选址（百度 - 允许 IP 兜底）
+      </button>
+    </div>
+  );
+}

package/test/src/region-picker/index.jsx

@@ -1,6 +1,12 @@
 import { showRegionPicker } from "@";
 import { useState } from "react";
 
+// 部分城市无区级，district 可能为 null
+const formatSelection = (sel) =>
+  sel.district
+    ? `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`
+    : `${sel.province.label} / ${sel.city.label}`;
+
 export default function RegionPickerDemo() {
   const [result, setResult] = useState("");
   const [initial, setInitial] = useState(null);
@@ -9,9 +15,12 @@ export default function RegionPickerDemo() {
     showRegionPicker({
       value: initial || undefined,
       onConfirm: (sel) => {
-        const text = `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`;
-        setResult(text);
-        setInitial([sel.province.value, sel.city.value, sel.district.value]);
+        setResult(formatSelection(sel));
+        setInitial([
+          sel.province.value,
+          sel.city.value,
+          sel.district?.value,
+        ]);
       },
       onCancel: () => {
         console.log("取消选择");
@@ -25,9 +34,7 @@ export default function RegionPickerDemo() {
       value: ["440000", "440100", "440106"],
       title: "带初始值",
       onConfirm: (sel) => {
-        setResult(
-          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
-        );
+        setResult(formatSelection(sel));
       },
     });
   };
@@ -37,9 +44,7 @@ export default function RegionPickerDemo() {
       primary: "#e53935",
       title: "京东红主题",
       onConfirm: (sel) => {
-        setResult(
-          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
-        );
+        setResult(formatSelection(sel));
       },
     });
   };
@@ -49,9 +54,7 @@ export default function RegionPickerDemo() {
       rounded: false,
       title: "无圆角",
       onConfirm: (sel) => {
-        setResult(
-          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
-        );
+        setResult(formatSelection(sel));
       },
     });
   };
@@ -63,9 +66,7 @@ export default function RegionPickerDemo() {
       confirmText: "选好了",
       title: "自定义文案",
       onConfirm: (sel) => {
-        setResult(
-          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
-        );
+        setResult(formatSelection(sel));
       },
     });
   };
@@ -75,9 +76,7 @@ export default function RegionPickerDemo() {
       maskClosable: false,
       title: "点击遮罩不关闭",
       onConfirm: (sel) => {
-        setResult(
-          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
-        );
+        setResult(formatSelection(sel));
       },
     });
   };
@@ -93,9 +92,17 @@ export default function RegionPickerDemo() {
       cancelText: <span style={{ color: "#ef4444" }}>✕ 关</span>,
       confirmText: <strong>OK ✓</strong>,
       onConfirm: (sel) => {
-        setResult(
-          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
-        );
+        setResult(formatSelection(sel));
+      },
+    });
+  };
+
+  const openWithHKMOTW = () => {
+    showRegionPicker({
+      taiwanHKMacau: true,
+      title: "含港澳台",
+      onConfirm: (sel) => {
+        setResult(formatSelection(sel));
       },
     });
   };
@@ -110,6 +117,7 @@ export default function RegionPickerDemo() {
         <button onClick={openCustomLabels}>自定义 tab 占位 / 按钮文案</button>
         <button onClick={openNoMaskClose}>点击遮罩不关闭</button>
         <button onClick={openReactNodeTitle}>ReactNode 标题/按钮</button>
+        <button onClick={openWithHKMOTW}>含港澳台</button>
       </div>
       <div style={{ marginTop: "0.4rem", fontSize: "0.3rem" }}>
         选择结果：