@cqsjjb/jjb-react-admin-component 3.3.1-beta.6 → 3.3.1-beta.8

package/AMap/index.js

@@ -0,0 +1,372 @@
+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
+};
+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/AdaptiveTree/index.js

@@ -0,0 +1,199 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * 自适应树组件
+ * @param {Object} props - 组件属性
+ * @param {Function} [props.titleAction] - 节点操作按钮生成函数
+ *   @param {Object} node - 当前节点数据
+ *   @returns {Array} 操作按钮配置数组，每项包含：
+ *     @property {ReactNode} content - 按钮内容（文本或元素）
+ *     @property {Function} onClick - 点击事件回调
+ * @param {Function} [props.titleIcon] - 节点标题图标生成函数
+ *   @param {Object} node - 当前节点数据
+ *   @returns {ReactNode} 图标元素（如 img、Icon 组件等）
+ * 
+ * @note 说明：
+ * 1. 自动继承全局 Ant Design 前缀配置（window.process.env.app.antd['ant-prefix']）
+ * 2. 节点容器默认占满父元素空间，支持纵向滚动
+ * 3. 节点标题超长自动换行，且不会挤压标题图标和操作图标的空间
+ * 4. 节点选中时，返回的节点数据为当前节点及其所有父节点id（二维数组）、选中的节点数据（一维数组）
+ * 
+ * @example
+ * <AdaptiveTree
+ *     treeData={[]}
+ *     fieldNames={{
+ *         title: 'name',
+ *         key: 'id'
+ *     }}
+ *     titleAction={(node) => [
+ *      {
+ *         content: '添加',
+ *         onClick: (node) => {
+ *             console.warn("添加", node)
+ *         }
+ *      },
+ *      {
+ *         content: '编辑',
+ *         onClick: (node) => {
+ *             console.warn("编辑", node)
+ *         }
+ *      }
+ *     ]}
+ *     titleIcon={(node) => <FolderOpenOutlined />}
+ * />
+ */
+import React, { useState } from 'react';
+import { Tree, Space } from "antd";
+import { styled } from 'styled-components';
+export default props => {
+  const {
+    titleAction,
+    titleIcon,
+    draggable,
+    ...rest
+  } = props;
+  const prefixCls = window.process.env.app.antd['ant-prefix'];
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const StyledAntdComponents = styled.div`
+        .${prefixCls}-tree {
+            width: 100%;
+            height: 100%;
+            overflow-y: auto;
+        }
+        .${prefixCls}-tree-switcher {
+            align-items: flex-start !important;
+            padding-top: 13px;
+        }
+        .${prefixCls}-tree-checkbox {
+            margin-top: 11px;
+            margin-left: 4px;
+            align-self: flex-start;
+        }
+        .${prefixCls}-tree-treenode {
+            width: 100%;
+            display: flex;
+            .${prefixCls}-tree-node-content-wrapper {
+                flex: 1
+            }
+            .${prefixCls}-tree-switcher {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+            }
+            .${prefixCls}-tree-switcher::before {
+                display: none;
+            }
+        }
+        .adaptive-tree-title {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            gap: 8px;
+            align-items: flex-start;
+            padding: 6px 0;
+            transition: none;
+            cursor: ${props?.draggable ? 'grab' : 'point'};
+            .title-left {
+                display: flex;
+                align-items: flex-start;
+                gap: 2px;
+                .icon {
+                    width: 14px;
+                    height: 14px;
+                }
+            }
+            .operation {
+                cursor: pointer;
+                white-space: nowrap;
+            }
+        }
+    `;
+
+  // 获得指定索引的节点 ID
+  const getLevelIndexNodeIds = (targetIndexArr, key) => {
+    const children = props?.fieldNames?.children || 'children';
+    const pathNodes = [];
+    const pathNodesIds = [];
+    let currentData = props.treeData || [];
+    for (let i = 0; i < targetIndexArr.length; i++) {
+      const index = targetIndexArr[i];
+      let nextNode;
+      if (i === 0) {
+        if (!Array.isArray(currentData) || index < 0 || index >= currentData.length) {
+          return null;
+        }
+        nextNode = currentData[index];
+      } else {
+        if (!currentData?.[children] || !Array.isArray(currentData[children]) || index < 0 || index >= currentData[children].length) {
+          return null;
+        }
+        nextNode = currentData?.[children][index];
+      }
+      pathNodes.push(nextNode);
+      pathNodesIds.push(nextNode[key]);
+      currentData = nextNode;
+    }
+    return [pathNodesIds, pathNodes[pathNodes.length - 1]];
+  };
+  const onCheck = (id, info) => {
+    const key = props?.fieldNames?.key || 'key';
+    const ids = [];
+    const nodes = [];
+    info.checkedNodesPositions.map(item => {
+      let nodeIndexArr = item.pos.split('-');
+      nodeIndexArr.shift();
+      const result = getLevelIndexNodeIds(nodeIndexArr, key);
+      ids.push(result[0]);
+      nodes.push(result[1]);
+    });
+    console.warn("onCheck", ids, nodes);
+    props?.onCheck && props.onCheck(ids, nodes, info);
+  };
+  const titleRender = node => {
+    const {
+      title,
+      key
+    } = props?.fieldNames || {
+      title: 'title',
+      key: 'key'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: "adaptive-tree-title",
+      key: node[key]
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "title-left"
+    }, titleIcon ? /*#__PURE__*/React.createElement("div", {
+      className: "icon"
+    }, titleIcon(node)) : '', /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginLeft: 6
+      }
+    }, node[title])), /*#__PURE__*/React.createElement(Space, null, titleAction ? (titleAction(node) || []).map(item => {
+      return /*#__PURE__*/React.createElement("div", {
+        onClick: () => {
+          item.onClick && item.onClick(node);
+        },
+        className: "operation"
+      }, item?.content || '');
+    }) : ''));
+  };
+  const onExpand = keys => {
+    setExpandedKeys(keys);
+    props.onExpand && props.onExpand(keys);
+  };
+  const onSelect = keys => {
+    setSelectedKeys(keys);
+    props.onSelect && props.onSelect(keys);
+  };
+  return /*#__PURE__*/React.createElement(StyledAntdComponents, null, /*#__PURE__*/React.createElement(Tree, _extends({
+    draggable: draggable ? {
+      icon: false
+    } : false,
+    titleRender: titleRender,
+    onCheck: onCheck,
+    expandedKeys: props?.expandedKeys || expandedKeys,
+    onExpand: onExpand,
+    selectedKeys: props?.selectedKeys || selectedKeys,
+    onSelect: onSelect
+  }, rest)));
+};