@cqsjjb/jjb-react-admin-component 3.3.0-beta.2 → 3.3.0-beta.4

package/AMap/README.md

@@ -0,0 +1,58 @@
+高德地图组件
+
+## 代码演示
+
+```jsx
+import { useState } from 'react';
+import { Button } from 'antd';
+import AMap from '@cqsjjb/jjb-react-admin-component/AMap';
+
+function App() {
+  const [ open, setOpen ] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>打开地图</Button>
+      {open && (
+        <AMap
+          onOk={data => {
+            console.log(data);
+            setOpen(false);
+          }}
+          onCacnel={() => {
+            setOpen(false);
+          }}
+        />
+      )}
+    </>
+  )
+}
+```
+
+## API
+
+| 属性       | 说明   |                                                    类型                                                     |     默认值 |
+|----------|:-----|:---------------------------------------------------------------------------------------------------------:|--------:|
+| lng      | 经度   |                                                 `number`                                                  | 116.404 |
+| lat      | 纬度   |                                                 `number`                                                  |  39.915 |
+| title    | 弹窗标题 |                                                 `string`                                                  |    高德地图 |
+| width    | 弹窗宽度 |                                                 `number`                                                  |     700 |
+| onOk     | 确认回调 | (data: { lng: number, lat: number, comp: <span style="color: red">IComp</span>, compText: Text }) => void |       - |
+| onCancel | 取消回调 |                                               `() => void`                                                |     700 |
+
+## 确认回调-IComp
+
+| 属性           | 说明  |    类型    | 默认值 |
+|--------------|:----|:--------:|----:|
+| province     | 省份  | `string` |   - |
+| city         | 城市  | `string` |   - |
+| district     | 区县  | `string` |   - |
+| street       | 街道  | `string` |   - |
+| streetNumber | 门牌号 | `string` |   - |
+
+## 常见问题
+* 加载地图失败，缺少必要的文件！
+  
+      请确认应用public/index.html中是否导入高德地图SDK。
+* onOk确认回调compText为undefined
+  
+      请确认高德地图是否授权Web应用。

package/AMap/index.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+export interface AMapProps {
+  /** 初始经度 默认-116.404 */
+  lng?: number;
+  /** 初始纬度 默认-39.915 */
+  lat?: number;
+  /** 标题 默认-高德地图 */
+  title?: string;
+  /** 地图弹窗宽度 默认-700 */
+  width?: number;
+  /** 确认事件 返回选择的位置信息 */
+  onOk?: (data: {
+    // 经度
+    lng: number;
+    // 纬度
+    lat: number;
+    // 选择的位置信息对象
+    comp?: {
+      // 省份
+      province: string;
+      // 城市
+      city: string;
+      // 区县
+      district: string;
+      // 街道
+      street: string;
+      // 门牌号
+      streetNumber: string;
+    };
+    // 选择的位置详细信息文本
+    compText?: string;
+  }) => void;
+  /** 取消事件 */
+  onCancel?: () => void;
+}
+
+declare const AMap: React.FC<AMapProps>;
+
+export default AMap;

package/AMap/index.js

@@ -0,0 +1,371 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { Button, Col, message, Modal, Result, Row } from 'antd';
+const _A_MAP_SEARCH_ = '_A_MAP_SEARCH_';
+const _A_MAP_DEFAULT_POINT_ = {
+  lng: 116.397437,
+  lat: 39.909148
+};
+export default function AMap({
+  lng: propLng,
+  lat: propLat,
+  title = '高德地图',
+  width = 700,
+  onOk,
+  onCancel
+}) {
+  const [lng, setLng] = useState(_A_MAP_DEFAULT_POINT_.lng);
+  const [lat, setLat] = useState(_A_MAP_DEFAULT_POINT_.lat);
+  const GL = useRef(null);
+  const mapRef = useRef(null);
+  const markerRef = useRef(null);
+  const autoRef = useRef(null);
+  const placeSearchRef = useRef(null);
+  useEffect(() => {
+    if (typeof window.AMap === 'undefined') {
+      message.error('未导入高德地图文件，生成地图失败！').then(() => null);
+      return;
+    }
+    let mounted = true;
+
+    // 保证传入的初始值是 number（避免 NaN）
+    const initLng = Number(propLng) || _A_MAP_DEFAULT_POINT_.lng;
+    const initLat = Number(propLat) || _A_MAP_DEFAULT_POINT_.lat;
+
+    // 等待容器可见且尺寸非 0（Modal 动画或隐藏态时常为 0）
+    const waitForVisible = (el, timeout = 3000) => new Promise(resolve => {
+      const start = Date.now();
+      function check() {
+        if (!el) return resolve(false);
+        const r = el.getBoundingClientRect();
+        if (r.width > 0 && r.height > 0) return resolve(true);
+        if (Date.now() - start > timeout) return resolve(false);
+        requestAnimationFrame(check);
+      }
+      check();
+    });
+    async function init() {
+      if (!GL.current) {
+        console.warn('AMap container ref not ready');
+        return;
+      }
+      const visible = await waitForVisible(GL.current, 3000);
+      if (!visible) {
+        // 继续也可，但记录一下。多数情况下等待后再 init 能解决 Pixel(NaN, 0)
+        console.warn('AMap container still not visible before init (proceeding anyway).');
+      }
+      try {
+        const map = new window.AMap.Map(GL.current, {
+          center: [initLng, initLat],
+          zoom: 18,
+          viewMode: '3D'
+        });
+        mapRef.current = map;
+
+        // 保证 state 与实际中心一致
+        setLng(initLng);
+        setLat(initLat);
+
+        // 插件加载、控件创建都做容错
+        window.AMap.plugin(['AMap.Scale', 'AMap.ToolBar', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'], () => {
+          try {
+            map.addControl(new window.AMap.Scale());
+          } catch (e) {
+            // 某些构建/版本中可能不存在
+            console.warn('Scale control failed', e);
+          }
+          try {
+            map.addControl(new window.AMap.ToolBar({
+              position: 'RT'
+            }));
+          } catch (e) {
+            console.warn('ToolBar control failed', e);
+          }
+          try {
+            // 使用合法角落（RB/RT/LB/LT），不要自定义 'BT'
+            const geolocation = new window.AMap.Geolocation({
+              position: 'RB',
+              offset: new window.AMap.Pixel(Number(20), Number(20)),
+              showCircle: false,
+              showButton: true
+            });
+            map.addControl(geolocation);
+
+            // 正确的回调签名 (status, result)
+            geolocation.getCurrentPosition((status, result) => {
+              if (status !== 'complete') {
+                // 不做致命处理，但提示
+                message.error('未知原因，定位失败！');
+              } else {
+                // 如果需要可以从 result.position 取值
+                try {
+                  const pos = result && result.position;
+                  if (pos) {
+                    const px = typeof pos.getLng === 'function' ? pos.getLng() : pos.lng;
+                    const py = typeof pos.getLat === 'function' ? pos.getLat() : pos.lat;
+                    if (!Number.isNaN(Number(px)) && !Number.isNaN(Number(py))) {
+                      setLng(Number(px));
+                      setLat(Number(py));
+                      map.setCenter([Number(px), Number(py)]);
+                    }
+                  }
+                } catch (e) {
+                  // 忽略
+                }
+              }
+            });
+          } catch (e) {
+            console.warn('Geolocation init failed', e);
+          }
+
+          // 初始 marker 放置
+          try {
+            markerRef.current = new window.AMap.Marker({
+              position: [initLng, initLat],
+              map
+            });
+          } catch (e) {
+            console.warn('Marker init failed', e);
+          }
+
+          // AutoComplete + PlaceSearch
+          try {
+            placeSearchRef.current = new window.AMap.PlaceSearch({
+              map
+            });
+            autoRef.current = new window.AMap.AutoComplete({
+              input: document.getElementById(_A_MAP_SEARCH_)
+            });
+            autoRef.current.on && autoRef.current.on('select', e => {
+              // e.poi 里可能是 AMap.LngLat 实例 / 对象 / 数组，做兼容处理
+              const poi = e && e.poi ? e.poi : null;
+              let loc = poi && (poi.location || poi.lnglat) || e && (e.location || e.lnglat) || null;
+              let foundLng = null;
+              let foundLat = null;
+              if (loc) {
+                if (typeof loc.getLng === 'function' && typeof loc.getLat === 'function') {
+                  // AMap.LngLat 实例
+                  foundLng = Number(loc.getLng());
+                  foundLat = Number(loc.getLat());
+                } else if (typeof loc.lng === 'number' && typeof loc.lat === 'number') {
+                  foundLng = Number(loc.lng);
+                  foundLat = Number(loc.lat);
+                } else if (Array.isArray(loc)) {
+                  foundLng = Number(loc[0]);
+                  foundLat = Number(loc[1]);
+                }
+              }
+              if (foundLng != null && foundLat != null && !Number.isNaN(foundLng) && !Number.isNaN(foundLat)) {
+                setLng(foundLng);
+                setLat(foundLat);
+                map.setCenter([foundLng, foundLat]);
+                if (markerRef.current) {
+                  markerRef.current.setPosition([foundLng, foundLat]);
+                } else {
+                  markerRef.current = new window.AMap.Marker({
+                    position: [foundLng, foundLat],
+                    map
+                  });
+                }
+              } else {
+                // 兜底：用 placeSearch 搜索 name（如果有）
+                const name = poi && (poi.name || poi.address) || e && (e.info || e.name);
+                if (name && placeSearchRef.current && placeSearchRef.current.search) {
+                  placeSearchRef.current.search(name, (status, result) => {
+                    // placeSearch 回调再处理，这里保持原有逻辑或按需增强
+                    if (status === 'complete' && result && result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
+                      const p = result.poiList.pois[0];
+                      const loc2 = p.location || p.lnglat;
+                      let x = null,
+                        y = null;
+                      if (loc2) {
+                        if (typeof loc2.getLng === 'function') {
+                          x = Number(loc2.getLng());
+                          y = Number(loc2.getLat());
+                        } else if (typeof loc2.lng === 'number') {
+                          x = Number(loc2.lng);
+                          y = Number(loc2.lat);
+                        } else if (Array.isArray(loc2)) {
+                          x = Number(loc2[0]);
+                          y = Number(loc2[1]);
+                        }
+                      }
+                      if (!Number.isNaN(x) && !Number.isNaN(y)) {
+                        setLng(x);
+                        setLat(y);
+                        map.setCenter([x, y]);
+                        if (markerRef.current) markerRef.current.setPosition([x, y]);else markerRef.current = new window.AMap.Marker({
+                          position: [x, y],
+                          map
+                        });
+                      }
+                    }
+                  });
+                }
+              }
+            });
+          } catch (e) {
+            console.warn('AutoComplete / PlaceSearch init failed', e);
+          }
+
+          // 点击选点
+          try {
+            map.on && map.on('click', e => {
+              const lnglat = e && e.lnglat;
+              if (!lnglat) return;
+              let clickLng = null;
+              let clickLat = null;
+              if (typeof lnglat.getLng === 'function') {
+                clickLng = Number(lnglat.getLng());
+                clickLat = Number(lnglat.getLat());
+              } else {
+                clickLng = Number(lnglat.lng || Array.isArray(lnglat) && lnglat[0]);
+                clickLat = Number(lnglat.lat || Array.isArray(lnglat) && lnglat[1]);
+              }
+              if (Number.isNaN(clickLng) || Number.isNaN(clickLat)) return;
+              setLng(clickLng);
+              setLat(clickLat);
+              if (markerRef.current) {
+                markerRef.current.setPosition([clickLng, clickLat]);
+              } else {
+                markerRef.current = new window.AMap.Marker({
+                  position: [clickLng, clickLat],
+                  map
+                });
+              }
+            });
+          } catch (e) {
+            console.warn('map.on click failed', e);
+          }
+        });
+      } catch (err) {
+        console.error('AMap init error', err);
+      }
+    }
+    init();
+
+    // cleanup
+    return () => {
+      mounted = false;
+      try {
+        if (mapRef.current) {
+          mapRef.current.destroy();
+          mapRef.current = null;
+        }
+      } catch (e) {
+        // ignore
+      }
+      markerRef.current = null;
+      autoRef.current = null;
+      placeSearchRef.current = null;
+    };
+  }, [propLng, propLat]);
+
+  // 重置、确认等操作（同样做 number guard）
+  const onResetMap = useCallback(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    const x = Number(_A_MAP_DEFAULT_POINT_.lng);
+    const y = Number(_A_MAP_DEFAULT_POINT_.lat);
+    setLng(x);
+    setLat(y);
+    try {
+      map.setCenter([x, y]);
+      if (markerRef.current) {
+        markerRef.current.setPosition([x, y]);
+      } else {
+        markerRef.current = new window.AMap.Marker({
+          position: [x, y],
+          map
+        });
+      }
+    } catch (e) {
+      console.warn('reset map failed', e);
+    }
+  }, []);
+  const handleOk = useCallback(() => {
+    if (!mapRef.current) return;
+    // 确保 lng/lat 是 number
+    const x = Number(lng);
+    const y = Number(lat);
+    if (Number.isNaN(x) || Number.isNaN(y)) {
+      onOk && onOk({
+        lng,
+        lat,
+        comp: undefined,
+        compText: undefined
+      });
+      return;
+    }
+    window.AMap.plugin('AMap.Geocoder', () => {
+      try {
+        const geocoder = new window.AMap.Geocoder();
+        geocoder.getAddress([x, y], (status, result) => {
+          let comp;
+          if (status === 'complete' && result && result.regeocode) {
+            comp = result.regeocode.addressComponent;
+          }
+          onOk && onOk({
+            lng: x,
+            lat: y,
+            comp,
+            compText: comp && [comp.province, comp.city, comp.district, comp.township, comp.street, comp.streetNumber].filter(Boolean).join('') || undefined
+          });
+        });
+      } catch (e) {
+        onOk && onOk({
+          lng: x,
+          lat: y,
+          comp: undefined,
+          compText: undefined
+        });
+      }
+    });
+  }, [lng, lat, onOk]);
+  const hasMapScript = typeof window.AMap !== 'undefined';
+  return /*#__PURE__*/React.createElement(Modal, {
+    open: true,
+    destroyOnClose: true,
+    title: title,
+    width: width,
+    footer: hasMapScript && /*#__PURE__*/React.createElement(Row, {
+      align: "middle",
+      justify: "space-between"
+    }, /*#__PURE__*/React.createElement(Col, null, "\u5750\u6807\uFF1A", [lng, lat].join('-')), /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(Button, {
+      ghost: true,
+      type: "primary",
+      style: {
+        marginRight: 12
+      },
+      onClick: onResetMap
+    }, "\u91CD\u7F6E\u5730\u56FE"), /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      onClick: handleOk
+    }, "\u786E\u8BA4\u5750\u6807"))),
+    maskClosable: false,
+    onCancel: () => onCancel && onCancel()
+  }, hasMapScript ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: GL,
+    style: {
+      height: 500,
+      userSelect: 'none'
+    }
+  }), /*#__PURE__*/React.createElement("input", {
+    id: _A_MAP_SEARCH_,
+    type: "text",
+    maxLength: 30,
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57\u67E5\u8BE2",
+    style: {
+      position: 'absolute',
+      top: 10,
+      left: 10,
+      zIndex: 1000
+    }
+  })) : /*#__PURE__*/React.createElement(Result, {
+    status: "error",
+    title: "\u52A0\u8F7D\u5730\u56FE\u5931\u8D25\uFF0C\u7F3A\u5C11\u5FC5\u8981\u7684\u6587\u4EF6\uFF01"
+  }));
+}

package/AMap/index.less

@@ -0,0 +1,35 @@
+#_A_MAP_SEARCH_ {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+  color: rgb(102 102 102);
+  box-shadow: 1px 2px 1px rgb(0 0 0 / 15%);
+  border: none;
+  height: 32px;
+  line-height: 32px;
+  width: 300px;
+  padding: 0 10px;
+  font-size: 12px;
+  outline: none;
+  border-radius: 3px;
+}
+
+.tangram-suggestion-main {
+  z-index: 1000;
+  margin-top: 6px;
+
+  .tangram-suggestion {
+    border: none;
+    box-shadow: 1px 2px 1px rgb(0 0 0 / 15%);
+    border-radius: 3px;
+  }
+}
+
+#selCityWd {
+  box-sizing: content-box;
+}
+
+.city_content_top {
+  box-sizing: content-box;
+}

package/BMap/README.md

@@ -50,7 +50,7 @@ function App() {
 | streetNumber | 门牌号 | `string` |   - |
 
 ## 常见问题
-* 未导入百度地图文件，生成地图失败！
+* 加载地图失败，缺少必要的文件！
   
       请确认应用public/index.html中是否导入百度地图SDK。
 * onOk确认回调compText为undefined

package/BMap/index.less

@@ -1,36 +1,35 @@
 #_B_MAP_SEARCH_ {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    z-index: 10;
-    color: rgb(102 102 102);
-    box-shadow: 1px 2px 1px rgb(0 0 0 / 15%);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+  color: rgb(102 102 102);
+  box-shadow: 1px 2px 1px rgb(0 0 0 / 15%);
+  border: none;
+  height: 32px;
+  line-height: 32px;
+  width: 300px;
+  padding: 0 10px;
+  font-size: 12px;
+  outline: none;
+  border-radius: 3px;
+}
+
+.tangram-suggestion-main {
+  z-index: 1000;
+  margin-top: 6px;
+
+  .tangram-suggestion {
     border: none;
-    height: 32px;
-    line-height: 32px;
-    width: 300px;
-    padding: 0 10px;
-    font-size: 12px;
-    outline: none;
+    box-shadow: 1px 2px 1px rgb(0 0 0 / 15%);
     border-radius: 3px;
   }
-  
-  .tangram-suggestion-main {
-    z-index: 1000;
-    margin-top: 6px;
-  
-    .tangram-suggestion {
-      border: none;
-      box-shadow: 1px 2px 1px rgb(0 0 0 / 15%);
-      border-radius: 3px;
-    }
-  }
-  
-  #selCityWd {
-    box-sizing: content-box;
-  }
-  
-  .city_content_top {
-    box-sizing: content-box;
-  }
-  
+}
+
+#selCityWd {
+  box-sizing: content-box;
+}
+
+.city_content_top {
+  box-sizing: content-box;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.3.0-beta.2",
+  "version": "3.3.0-beta.4",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",