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

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,246 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { Button, Col, message, Modal, Result, Row } from 'antd';
+import './index.less';
+const _A_MAP_SEARCH_ = '_A_MAP_SEARCH_';
+const _A_MAP_DEFAULT_POINT_ = {
+  lng: 116.397437,
+  lat: 39.909148
+};
+const 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;
+    }
+    const initLng = propLng || _A_MAP_DEFAULT_POINT_.lng;
+    const initLat = propLat || _A_MAP_DEFAULT_POINT_.lat;
+    setLng(initLng);
+    setLat(initLat);
+
+    // 创建地图
+    const map = new window.AMap.Map(GL.current, {
+      center: [initLng, initLat],
+      zoom: 18,
+      viewMode: '3D'
+    });
+    mapRef.current = map;
+
+    // 通过 plugin 先加载需要的插件（保证控件类存在）
+    window.AMap.plugin(['AMap.Scale', 'AMap.ToolBar', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'], () => {
+      // 比例尺
+      try {
+        const scale = new window.AMap.Scale();
+        map.addControl(scale);
+      } catch (e) {
+        // 某些按需构建或旧环境可能报错，容错处理
+        // console.warn('AMap.Scale plugin not available', e);
+      }
+
+      // 工具条（放大缩小）
+      try {
+        map.addControl(new window.AMap.ToolBar({
+          position: 'RT'
+        }));
+      } catch (e) {}
+
+      // 定位控件
+      try {
+        const geolocation = new window.AMap.Geolocation({
+          position: 'BT',
+          offset: new window.AMap.Pixel(20, 20),
+          showCircle: false,
+          showButton: true
+        });
+        map.addControl(geolocation);
+        geolocation.getCurrentPosition(status => {
+          if (status !== 'complete') {
+            message.error('未知原因，定位失败！');
+          }
+        });
+      } catch (e) {}
+
+      // 初始 marker
+      markerRef.current = new window.AMap.Marker({
+        position: [initLng, initLat],
+        map
+      });
+
+      // 自动完成 + 地点搜索
+      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 里通常包含 name / location / adcode 等信息
+          const name = e?.poi && (e.poi.name || e.poi.address) || e?.info || e?.name;
+          // if (!name) return;
+          placeSearchRef.current.search(name, (status, result) => {
+            if (status === 'complete' && result && result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
+              const poi = result.poiList.pois[0];
+              const loc = poi.location || poi.lnglat;
+              const foundLng = loc && (loc.lng || Array.isArray(loc) && loc[0]) || null;
+              const foundLat = loc && (loc.lat || Array.isArray(loc) && loc[1]) || null;
+              if (foundLng != null && foundLat != null) {
+                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
+                  });
+                }
+              }
+            }
+          });
+        });
+      } catch (e) {}
+
+      // 地图点击选点
+      map.on && map.on('click', e => {
+        const {
+          lng: clickLng,
+          lat: clickLat
+        } = e.lnglat || {};
+        if (clickLng == null || clickLat == null) return;
+        setLng(clickLng);
+        setLat(clickLat);
+        if (markerRef.current) {
+          markerRef.current.setPosition([clickLng, clickLat]);
+        } else {
+          markerRef.current = new window.AMap.Marker({
+            position: [clickLng, clickLat],
+            map
+          });
+        }
+      });
+    });
+
+    // cleanup
+    return () => {
+      try {
+        if (mapRef.current) {
+          mapRef.current.destroy();
+          mapRef.current = null;
+        }
+      } catch (e) {}
+      markerRef.current = null;
+      autoRef.current = null;
+      placeSearchRef.current = null;
+    };
+  }, [propLng, propLat]);
+
+  /** 重置地图 */
+  const onResetMap = useCallback(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    setLng(_A_MAP_DEFAULT_POINT_.lng);
+    setLat(_A_MAP_DEFAULT_POINT_.lat);
+    map.setCenter([_A_MAP_DEFAULT_POINT_.lng, _A_MAP_DEFAULT_POINT_.lat]);
+    if (markerRef.current) {
+      markerRef.current.setPosition([_A_MAP_DEFAULT_POINT_.lng, _A_MAP_DEFAULT_POINT_.lat]);
+    } else {
+      markerRef.current = new window.AMap.Marker({
+        position: [_A_MAP_DEFAULT_POINT_.lng, _A_MAP_DEFAULT_POINT_.lat],
+        map
+      });
+    }
+  }, []);
+
+  /** 确认操作（逆地理编码） */
+  const handleOk = useCallback(() => {
+    if (!mapRef.current) return;
+    // 确保 Geocoder 可用
+    window.AMap.plugin('AMap.Geocoder', () => {
+      try {
+        const geocoder = new window.AMap.Geocoder();
+        geocoder.getAddress([lng, lat], (status, result) => {
+          let comp;
+          if (status === 'complete' && result && result.regeocode) {
+            comp = result.regeocode.addressComponent;
+          }
+          onOk && onOk({
+            lng,
+            lat,
+            comp,
+            compText: comp && [comp.province, comp.city, comp.district, comp.township, comp.street, comp.streetNumber].filter(Boolean).join('') || undefined
+          });
+        });
+      } catch (e) {
+        onOk && onOk({
+          lng,
+          lat,
+          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"
+  }));
+};
+export default AMap;

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.3",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",