@cqsjjb/jjb-react-admin-component 3.3.1-beta.1 → 3.3.1-beta.10

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,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/AMap/index.less

@@ -0,0 +1,19 @@
+#_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;
+}
+.amap-sug-result {
+  z-index: 10240 !important;
+}

package/AdaptiveTree/index.js

@@ -41,7 +41,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  *     titleIcon={(node) => <FolderOpenOutlined />}
  * />
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { Tree, Space } from "antd";
 import { styled } from 'styled-components';
 export default props => {
@@ -52,6 +52,8 @@ export default props => {
     ...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%;
@@ -109,6 +111,7 @@ export default props => {
 
   // 获得指定索引的节点 ID
   const getLevelIndexNodeIds = (targetIndexArr, key) => {
+    const children = props?.fieldNames?.children || 'children';
     const pathNodes = [];
     const pathNodesIds = [];
     let currentData = props.treeData || [];
@@ -121,10 +124,10 @@ export default props => {
         }
         nextNode = currentData[index];
       } else {
-        if (!currentData?.children || !Array.isArray(currentData.children) || index < 0 || index >= currentData.children.length) {
+        if (!currentData?.[children] || !Array.isArray(currentData[children]) || index < 0 || index >= currentData[children].length) {
           return null;
         }
-        nextNode = currentData.children[index];
+        nextNode = currentData?.[children][index];
       }
       pathNodes.push(nextNode);
       pathNodesIds.push(nextNode[key]);
@@ -174,11 +177,23 @@ export default props => {
       }, 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
+    onCheck: onCheck,
+    expandedKeys: props?.expandedKeys || expandedKeys,
+    onExpand: onExpand,
+    selectedKeys: props?.selectedKeys || selectedKeys,
+    onSelect: onSelect
   }, rest)));
 };

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/PhoneBox/dianchi.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M938.667 426.667v-85.334c0-46.933-38.4-85.333-85.334-85.333H128c-46.933 0-85.333 38.4-85.333 85.333v341.334C42.667 729.6 81.067 768 128 768h725.333c46.934 0 85.334-38.4 85.334-85.333v-85.334c23.466 0 42.666-19.2 42.666-42.666v-85.334c0-23.466-19.2-42.666-42.666-42.666zM896 469.333v213.334c0 23.466-19.2 42.666-42.667 42.666H128c-23.467 0-42.667-19.2-42.667-42.666V341.333c0-23.466 19.2-42.666 42.667-42.666h725.333c23.467 0 42.667 19.2 42.667 42.666v128zM128 682.667h554.667V341.333H128v341.334z" fill="#2C2C2C" /></svg>

package/PhoneBox/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonProps } from 'antd';
+
+export interface PhoneBoxProps {
+  /** 展示内容的URL */
+  iframeUrl?: string;
+  /** 是否显示空状态，默认false */
+  showEmpty?: boolean;
+  /** 大小，默认'normal' */
+  size?: 'normal' | 'small';
+  /** 右侧额外操作按钮 */
+  extraAction?: React.ReactNode;
+  /** 是否显示右侧的二维码预览，默认'false' */
+  showPerview?: string | boolean;
+  /** 刷新二维码URL的函数，不传时自动使用时间戳刷新二维码 */
+  fetchQrcodeUrl?: () => Promise<{ data: string }>;
+}
+
+declare const PhoneBox: React.FC<PhoneBoxProps>;
+
+export default PhoneBox;

package/PhoneBox/index.js

@@ -0,0 +1,205 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Empty, Space, message, Tooltip, Button, QRCode } from 'antd';
+import { SyncOutlined } from '@ant-design/icons';
+import shexiang from './shexiang.svg';
+import xinhao from './xinhao.svg';
+import wangluo from './wangluo.svg';
+import dianchi from './dianchi.svg';
+import phone from './phone.svg';
+import './index.less';
+export default props => {
+  const {
+    iframeUrl,
+    // 展示内容url
+    extraAction,
+    // 额外操作
+    showEmpty = false,
+    // 是否显示空状态
+    size = 'normal',
+    // 大小
+    showPerview = 'false',
+    // 是否显示二维码预览
+    fetchQrcodeUrl // 刷新二维码URL的函数
+  } = props;
+  const [currentTime, setCurrentTime] = useState(''); // 当前时间
+  const [qrcodeUrl, setQrcodeUrl] = useState(''); // 二维码URL
+  const [qrcodeVisible, setQrcodeVisible] = useState(false); // 二维码预览是否显示
+  const [isQrcodeExpire, setIsQrcodeExpire] = useState(false); // 二维码是否过期
+  const [qrcodeExpireTime, setQrcodeExpireTime] = useState(3); // 二维码剩余过期时间
+  const qrcodeButtonRef = useRef(null); // 扫码预览按钮dom
+  const currentRotate = useRef(0); // 刷新二维码icon旋转角度
+  const qrcodeTimerId = useRef(null); // 二维码三分钟过期定时器
+  const qrcodeExpireTimeUpdateTimerId = useRef(null); // 二维码过期时间更新定时器
+
+  useEffect(() => {
+    if (iframeUrl) {
+      setQrcodeUrl(iframeUrl);
+    }
+  }, [iframeUrl]);
+
+  // 点击外部区域（按钮、tooltip除外）关闭二维码预览
+  useEffect(() => {
+    const handleClickOutside = e => {
+      const button = qrcodeButtonRef.current;
+      const tooltip = document.querySelector(`.${window.process.env.app?.antd?.['ant-prefix'] || 'ant'}-tooltip`);
+      if (button && !button.contains(e.target) && tooltip && !tooltip.contains(e.target)) {
+        setQrcodeVisible(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  // 手机上展示当前时间
+  useEffect(() => {
+    const formatHourMinute = date => {
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      return `${hours}:${minutes}`;
+    };
+    setCurrentTime(formatHourMinute(new Date()));
+    const timer = setInterval(() => {
+      setCurrentTime(formatHourMinute(new Date()));
+    }, 60000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // 清理二维码相关定时器
+  useEffect(() => {
+    return () => {
+      clearTimeout(qrcodeTimerId.current);
+      clearInterval(qrcodeExpireTimeUpdateTimerId.current);
+    };
+  }, []);
+
+  // 二维码过期状态定时器
+  const startQrcodeTimer = () => {
+    if (qrcodeTimerId.current) {
+      clearTimeout(qrcodeTimerId.current);
+    }
+    qrcodeTimerId.current = setTimeout(() => {
+      setIsQrcodeExpire(true);
+    }, 180000);
+  };
+
+  // 二维码过期时间定时器
+  const startQrcodeExpireTimeUpdateTimer = () => {
+    setQrcodeExpireTime(3);
+    if (qrcodeExpireTimeUpdateTimerId.current) {
+      clearInterval(qrcodeExpireTimeUpdateTimerId.current);
+    }
+    qrcodeExpireTimeUpdateTimerId.current = setInterval(() => {
+      setQrcodeExpireTime(prev => prev > 0 ? prev - 1 : 0);
+    }, 60000);
+  };
+  const getQrCodeUrl = () => {
+    if (fetchQrcodeUrl) {
+      fetchQrcodeUrl().then(res => {
+        setQrcodeUrl(res.data);
+        setIsQrcodeExpire(false); // 重置二维码过期状态
+        startQrcodeTimer(); // 启动过期状态定时器
+        startQrcodeExpireTimeUpdateTimer(); // 启动过期时间定时器
+      });
+    } else {
+      setQrcodeUrl(`${iframeUrl}?t=${Date.now()}`);
+      setIsQrcodeExpire(false); // 重置二维码过期状态
+      startQrcodeTimer(); // 启动过期状态定时器
+      startQrcodeExpireTimeUpdateTimer(); // 启动过期时间定时器
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: `phone-box ${size === 'small' ? 'phone-box-small' : ''}`
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    src: phone,
+    width: 356,
+    height: 720
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "phone-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "phone-content-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "phone-header-time"
+  }, currentTime), /*#__PURE__*/React.createElement("img", {
+    src: shexiang,
+    width: 76,
+    height: 23,
+    alt: ""
+  }), /*#__PURE__*/React.createElement(Space, {
+    className: "phone-header-status"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "status-xinhao",
+    src: xinhao,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("img", {
+    className: "status-wangluo",
+    src: wangluo,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("img", {
+    className: "status-dianchi",
+    src: dianchi,
+    alt: ""
+  }))), showEmpty && !iframeUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 316,
+      height: 625,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Empty, {
+    description: "\u6682\u65E0\u5185\u5BB9"
+  })) : /*#__PURE__*/React.createElement("iframe", {
+    src: iframeUrl,
+    width: 316,
+    height: 625
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "phone-box-action"
+  }, showPerview && /*#__PURE__*/React.createElement(Tooltip, {
+    open: qrcodeVisible,
+    placement: "bottom",
+    arrow: false,
+    color: "#FFF",
+    rootClassName: "qrcode-preview-tooltip",
+    title: /*#__PURE__*/React.createElement("div", {
+      className: "qrcode-preview-container"
+    }, /*#__PURE__*/React.createElement(QRCode, {
+      value: qrcodeUrl
+    }), isQrcodeExpire ? /*#__PURE__*/React.createElement("div", {
+      className: "qrcode-preview-container-expire-mask"
+    }, "\u4E8C\u7EF4\u7801\u8FC7\u671F") : '', /*#__PURE__*/React.createElement("div", {
+      className: "qrcode-preview-container-text"
+    }, "\u4E34\u65F6\u9884\u89C8\uFF0C", qrcodeExpireTime ? `${qrcodeExpireTime}分钟后失效` : '已失效'), /*#__PURE__*/React.createElement("a", {
+      onClick: () => {
+        getQrCodeUrl();
+        /** icon旋转动画 */
+        const icon = document.getElementById('qrcode-preview-container-icon');
+        if (!icon) return;
+        icon.classList.remove('icon-rotating');
+        // 强制重绘
+        void icon.offsetWidth;
+        icon.style.setProperty('--start-rotate', `${currentRotate.current}deg`);
+        icon.classList.add('icon-rotating');
+        setTimeout(() => {
+          currentRotate.current += 360;
+          icon.classList.remove('icon-rotating');
+        }, 300);
+      }
+    }, /*#__PURE__*/React.createElement(SyncOutlined, {
+      id: "qrcode-preview-container-icon",
+      style: {
+        marginRight: '4px'
+      }
+    }), "\u91CD\u65B0\u751F\u6210"))
+  }, /*#__PURE__*/React.createElement(Button, {
+    ref: qrcodeButtonRef,
+    onClick: () => {
+      setQrcodeVisible(!qrcodeVisible);
+      getQrCodeUrl();
+    },
+    color: "primary",
+    variant: "outlined"
+  }, "\u626B\u7801\u9884\u89C8")), extraAction));
+};

package/PhoneBox/index.less

@@ -0,0 +1,116 @@
+.phone-box {
+  display: flex;
+  gap: 12px;
+  position: relative;
+  z-index: 1;
+
+  .phone-content {
+    position: absolute;
+    top: 17px;
+    left: 20px;
+    z-index: 2;
+    border-radius: 40px;
+    overflow: hidden;
+    background-color: #fff;
+
+    .phone-content-header {
+      height: 55px;
+      padding: 0px 24px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .phone-header-status {
+        .status-xinhao {
+          width: 20px;
+          height: 18px;
+        }
+
+        .status-wangluo {
+          width: 16px;
+          height: 14px;
+        }
+
+        .status-dianchi {
+          width: 24px;
+          height: 22px;
+        }
+      }
+
+      .phone-header-time {
+        font-size: 14px;
+        font-weight: 500;
+        color: #000;
+        width: 76px;
+      }
+    }
+
+    iframe {
+      border: none;
+    }
+  }
+
+  .phone-box-action {
+    position: absolute;
+    top: 0;
+    left: 456px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+}
+
+.qrcode-preview-container {
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  .qrcode-preview-container-expire-mask {
+    width: 160px;
+    height: 160px;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    background-color: rgba(255, 255, 255, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    border-radius: 6px;
+  }
+
+  .qrcode-preview-container-text {
+    font-size: 12px;
+    color: #00000066;
+  }
+
+  @keyframes rotate360 {
+    from {
+      transform: rotate(var(--start-rotate, 0deg));
+    }
+
+    to {
+      transform: rotate(calc(var(--start-rotate, 0deg) + 360deg));
+    }
+  }
+
+  .icon-rotating {
+    animation: rotate360 0.3s linear 1 forwards;
+  }
+}
+
+.qrcode-preview-tooltip {
+  margin-top: 16px;
+
+  .micro-temp-tooltip-inner {
+    border-radius: 12px;
+    padding: 16px 24px;
+  }
+}
+
+.phone-box-small {
+  transform: scale(0.5);
+}

package/PhoneBox/phone.svg

@@ -0,0 +1,135 @@
+<svg width="356" height="720" viewBox="0 0 356 720" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#168;&#161;&#229;&#158;&#139;&#230;&#161;&#134;">
+<g id="Body">
+<path id="Base" d="M296.829 1.35898e-06L59.1059 6.55458e-06C28.1243 7.23171e-06 3.00879 25.189 3.00879 56.2613L3.0088 663.739C3.0088 694.811 28.1243 720 59.1059 720L296.829 720C327.811 720 352.926 694.811 352.926 663.739L352.926 56.2613C352.926 25.189 327.811 6.81854e-07 296.829 1.35898e-06Z" fill="#E0E1E3"/>
+<g id="Light" style="mix-blend-mode:overlay">
+<path d="M296.393 1.67594L59.5392 1.67594C29.2431 1.67594 4.67871 26.3122 4.67871 56.697L4.67873 663.286C4.67873 693.671 29.2431 718.307 59.5392 718.307L296.393 718.307C326.69 718.307 351.254 693.671 351.254 663.286L351.254 56.697C351.254 26.3122 326.69 1.67593 296.393 1.67594ZM349.583 662.85C349.583 692.565 325.57 716.648 295.942 716.648L59.9904 716.648C30.3627 716.648 6.34977 692.565 6.34977 662.85L6.34976 57.1495C6.34976 27.4351 30.3627 3.35188 59.9904 3.35188L295.959 3.35187C325.587 3.35187 349.6 27.4351 349.6 57.1495L349.6 662.867L349.583 662.85Z" fill="black"/>
+</g>
+<path id="Frame" d="M295.425 5.49709L60.5257 5.49709C32.0359 5.49709 8.94043 28.6602 8.94043 57.2333L8.94044 662.767C8.94044 691.34 32.0359 714.503 60.5257 714.503L295.425 714.503C323.915 714.503 347.01 691.34 347.01 662.767L347.01 57.2333C347.01 28.6602 323.915 5.49709 295.425 5.49709Z" fill="#1D1D1B"/>
+</g>
+<g id="Buttons">
+<g id="Lock">
+<path id="Base_2" d="M354.98 183.951L352.925 183.951L352.925 270.731L354.98 270.731L354.98 183.951Z" fill="url(#paint0_linear_247_40964)"/>
+<path id="Top-Shade" d="M354.98 270.748L354.98 183.985L356 185.107C355.482 194.342 355.515 260.391 356 269.608L354.98 270.731L354.98 270.748Z" fill="url(#paint1_linear_247_40964)"/>
+</g>
+<g id="Volume-Down">
+<path id="Base_3" d="M1.75469 234.849L0.584961 234.849L0.584962 289.82L1.7547 289.82L1.75469 234.849Z" fill="url(#paint2_linear_247_40964)"/>
+<path id="Top-Shade_2" d="M0.584868 289.82L0.584867 234.866L1.57507e-08 235.587C0.300789 241.436 0.267369 283.284 1.18567e-06 289.116L0.584868 289.837L0.584868 289.82Z" fill="url(#paint3_linear_247_40964)"/>
+<path id="Bottom-Shade" d="M3.00817 234.866L1.75488 234.866L1.75488 289.837L3.00817 289.837L3.00817 234.866Z" fill="url(#paint4_linear_247_40964)"/>
+</g>
+<g id="Volume-Up">
+<path id="Base_4" d="M1.75469 165.7L0.584961 165.7L0.584962 220.671L1.7547 220.671L1.75469 165.7Z" fill="url(#paint5_linear_247_40964)"/>
+<path id="Top-Shade_3" d="M0.584868 220.671L0.584867 165.717L1.57504e-08 166.437C0.300789 172.286 0.267369 214.135 1.18567e-06 219.967L0.584868 220.687L0.584868 220.671Z" fill="url(#paint6_linear_247_40964)"/>
+<path id="Bottom-Shade_2" d="M3.00817 165.7L1.75488 165.7L1.75488 220.671L3.00817 220.671L3.00817 165.7Z" fill="url(#paint7_linear_247_40964)"/>
+</g>
+<g id="Silence">
+<path id="Base_5" d="M1.75469 113.763L0.584961 113.763L0.584962 141.986L1.75469 141.986L1.75469 113.763Z" fill="url(#paint8_linear_247_40964)"/>
+<path id="Top-Shade_4" d="M0.584867 141.969L0.584867 113.763L1.46516e-08 114.433C0.300789 119.964 0.267368 135.768 6.01445e-07 141.282L0.584867 141.952L0.584867 141.969Z" fill="url(#paint9_linear_247_40964)"/>
+<path id="Bottom-Shade_3" d="M3.00817 113.763L1.75488 113.763L1.75488 141.986L3.00817 141.986L3.00817 113.763Z" fill="url(#paint10_linear_247_40964)"/>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_247_40964" x1="353.944" y1="183.951" x2="353.944" y2="270.731" gradientUnits="userSpaceOnUse">
+<stop stop-color="#58595A"/>
+<stop offset="0.02" stop-color="#E0E1E3"/>
+<stop offset="0.04" stop-color="#A7A8A9"/>
+<stop offset="0.08" stop-color="#2B1D2A"/>
+<stop offset="0.11" stop-color="#8C8C8C"/>
+<stop offset="0.9" stop-color="#696969"/>
+<stop offset="0.94" stop-color="#2B1D2A"/>
+<stop offset="0.96" stop-color="#A7A8A9"/>
+<stop offset="0.98" stop-color="#8C8C8C"/>
+<stop offset="1" stop-color="#A7A8A9"/>
+</linearGradient>
+<linearGradient id="paint1_linear_247_40964" x1="355.482" y1="183.968" x2="355.482" y2="270.731" gradientUnits="userSpaceOnUse">
+<stop stop-color="#676067"/>
+<stop offset="0.06" stop-color="#707070"/>
+<stop offset="0.19" stop-color="#8A8A8A"/>
+<stop offset="0.81" stop-color="#8A8A8A"/>
+<stop offset="0.92" stop-color="#707070"/>
+<stop offset="1" stop-color="#676067"/>
+</linearGradient>
+<linearGradient id="paint2_linear_247_40964" x1="-1465.34" y1="234.849" x2="-1465.34" y2="289.82" gradientUnits="userSpaceOnUse">
+<stop stop-color="#58595A"/>
+<stop offset="0.02" stop-color="#E0E1E3"/>
+<stop offset="0.04" stop-color="#A7A8A9"/>
+<stop offset="0.08" stop-color="#2D1E2C"/>
+<stop offset="0.11" stop-color="#8C8C8C"/>
+<stop offset="0.9" stop-color="#696969"/>
+<stop offset="0.94" stop-color="#2D1E2C"/>
+<stop offset="0.96" stop-color="#A7A8A9"/>
+<stop offset="0.98" stop-color="#8C8C8C"/>
+<stop offset="1" stop-color="#A7A8A9"/>
+</linearGradient>
+<linearGradient id="paint3_linear_247_40964" x1="0.300788" y1="234.866" x2="0.300789" y2="289.82" gradientUnits="userSpaceOnUse">
+<stop stop-color="#676067"/>
+<stop offset="0.06" stop-color="#707070"/>
+<stop offset="0.19" stop-color="#8A8A8A"/>
+<stop offset="0.81" stop-color="#8A8A8A"/>
+<stop offset="0.92" stop-color="#707070"/>
+<stop offset="1" stop-color="#676067"/>
+</linearGradient>
+<linearGradient id="paint4_linear_247_40964" x1="0.000284912" y1="289.837" x2="1.68112" y2="234.866" gradientUnits="userSpaceOnUse">
+<stop stop-color="#58595A"/>
+<stop offset="0.05" stop-color="#2D1E2C"/>
+<stop offset="0.52" stop-color="#A7A8A9"/>
+<stop offset="0.96" stop-color="#2D1E2C"/>
+<stop offset="1" stop-color="#A7A8A9"/>
+</linearGradient>
+<linearGradient id="paint5_linear_247_40964" x1="1.16983" y1="165.683" x2="1.16983" y2="220.654" gradientUnits="userSpaceOnUse">
+<stop stop-color="#58595A"/>
+<stop offset="0.02" stop-color="#E0E1E3"/>
+<stop offset="0.04" stop-color="#A7A8A9"/>
+<stop offset="0.08" stop-color="#2D1E2C"/>
+<stop offset="0.11" stop-color="#8C8C8C"/>
+<stop offset="0.9" stop-color="#696969"/>
+<stop offset="0.94" stop-color="#2D1E2C"/>
+<stop offset="0.96" stop-color="#A7A8A9"/>
+<stop offset="0.98" stop-color="#8C8C8C"/>
+<stop offset="1" stop-color="#A7A8A9"/>
+</linearGradient>
+<linearGradient id="paint6_linear_247_40964" x1="0.300788" y1="165.7" x2="0.300789" y2="220.654" gradientUnits="userSpaceOnUse">
+<stop stop-color="#676067"/>
+<stop offset="0.06" stop-color="#707070"/>
+<stop offset="0.19" stop-color="#8A8A8A"/>
+<stop offset="0.81" stop-color="#8A8A8A"/>
+<stop offset="0.92" stop-color="#707070"/>
+<stop offset="1" stop-color="#676067"/>
+</linearGradient>
+<linearGradient id="paint7_linear_247_40964" x1="2.37317" y1="220.688" x2="2.37317" y2="165.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#58595A"/>
+<stop offset="0.05" stop-color="#2D1E2C"/>
+<stop offset="0.52" stop-color="#A7A8A9"/>
+<stop offset="0.96" stop-color="#2D1E2C"/>
+<stop offset="1" stop-color="#A7A8A9"/>
+</linearGradient>
+<linearGradient id="paint8_linear_247_40964" x1="-1465.34" y1="113.746" x2="-1465.34" y2="141.969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#58595A"/>
+<stop offset="0.02" stop-color="#E0E1E3"/>
+<stop offset="0.04" stop-color="#A7A8A9"/>
+<stop offset="0.08" stop-color="#2D1E2C"/>
+<stop offset="0.11" stop-color="#8C8C8C"/>
+<stop offset="0.9" stop-color="#696969"/>
+<stop offset="0.94" stop-color="#2D1E2C"/>
+<stop offset="0.96" stop-color="#A7A8A9"/>
+<stop offset="0.98" stop-color="#8C8C8C"/>
+<stop offset="1" stop-color="#A7A8A9"/>
+</linearGradient>
+<linearGradient id="paint9_linear_247_40964" x1="0.300789" y1="113.763" x2="0.300789" y2="141.969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#676067"/>
+<stop offset="0.06" stop-color="#707070"/>
+<stop offset="0.19" stop-color="#8A8A8A"/>
+<stop offset="0.81" stop-color="#8A8A8A"/>
+<stop offset="0.92" stop-color="#707070"/>
+<stop offset="1" stop-color="#676067"/>
+</linearGradient>
+<linearGradient id="paint10_linear_247_40964" x1="0.000283675" y1="141.986" x2="2.38698" y2="113.764" gradientUnits="userSpaceOnUse">
+<stop stop-color="#58595A"/>
+<stop offset="0.05" stop-color="#2D1E2C"/>
+<stop offset="0.52" stop-color="#A7A8A9"/>
+<stop offset="0.96" stop-color="#2D1E2C"/>
+<stop offset="1" stop-color="#A7A8A9"/>
+</linearGradient>
+</defs>
+</svg>

package/PhoneBox/shexiang.svg

@@ -0,0 +1,61 @@
+<svg width="79" height="23" viewBox="0 0 79 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#145;&#132;&#229;&#131;&#143;&#229;&#164;&#180;">
+<path id="Base" d="M67.2764 22.843L11.3798 22.843C5.0967 22.843 3.87533e-07 17.7314 2.49808e-07 11.4299C1.12084e-07 5.12837 5.0967 1.60769e-06 11.3798 1.47037e-06L67.2764 2.48714e-07C73.5595 1.11392e-07 78.6562 5.11161 78.6562 11.4299C78.6562 17.7314 73.5595 22.843 67.2764 22.843Z" fill="#1D1D1B"/>
+<g id="Lens">
+<path id="Base_2" d="M64.1174 16.4242C66.8676 16.4242 69.0971 14.1882 69.0971 11.4299C69.0971 8.67163 66.8676 6.43561 64.1174 6.43561C61.3672 6.43561 59.1377 8.67163 59.1377 11.4299C59.1377 14.1882 61.3672 16.4242 64.1174 16.4242Z" fill="url(#paint0_linear_247_40986)"/>
+<path id="Frame" d="M64.1171 14.279C65.6861 14.279 66.9579 13.0034 66.9579 11.4299C66.9579 9.85639 65.6861 8.58081 64.1171 8.58081C62.5482 8.58081 61.2764 9.85639 61.2764 11.4299C61.2764 13.0034 62.5482 14.279 64.1171 14.279Z" fill="url(#paint1_linear_247_40986)"/>
+<path id="Bottom-Reflection" d="M66.6076 11.4299C66.6076 12.8042 65.488 13.9271 64.1178 13.9271C62.7475 13.9271 61.6279 12.8042 61.6279 11.4299C61.6279 10.0556 62.7308 8.93276 64.1178 8.93276C65.5048 8.93276 66.6076 10.0389 66.6076 11.4299Z" fill="url(#paint2_linear_247_40986)"/>
+<path id="Top-Reflection" style="mix-blend-mode:multiply" d="M66.6076 11.4299C66.6076 12.8042 65.488 13.9271 64.1178 13.9271C62.7475 13.9271 61.6279 12.8042 61.6279 11.4299C61.6279 10.0556 62.7308 8.93276 64.1178 8.93276C65.5048 8.93276 66.6076 10.0389 66.6076 11.4299Z" fill="url(#paint3_radial_247_40986)"/>
+<path id="Light" style="mix-blend-mode:screen" d="M66.3729 12.7371C66.3729 12.2511 65.9718 11.8489 65.4872 11.8489C65.0026 11.8489 64.6016 12.2511 64.6016 12.7371C64.6016 13.2232 65.0026 13.6254 65.4872 13.6254C65.9718 13.6254 66.3729 13.2232 66.3729 12.7371Z" fill="url(#paint4_radial_247_40986)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_247_40986" x1="64.1174" y1="16.1058" x2="64.1174" y2="6.28477" gradientUnits="userSpaceOnUse">
+<stop stop-color="#666666"/>
+<stop offset="1" stop-color="#010104"/>
+</linearGradient>
+<linearGradient id="paint1_linear_247_40986" x1="64.1339" y1="8.76517" x2="64.1339" y2="14.3796" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0B131C"/>
+<stop offset="1" stop-color="#354039"/>
+</linearGradient>
+<linearGradient id="paint2_linear_247_40986" x1="65.8724" y1="13.1896" x2="62.3529" y2="9.68046" gradientUnits="userSpaceOnUse">
+<stop stop-color="#231F20"/>
+<stop offset="0.08" stop-color="#212226"/>
+<stop offset="0.2" stop-color="#1F2C37"/>
+<stop offset="0.33" stop-color="#1A3C53"/>
+<stop offset="0.47" stop-color="#13537B"/>
+<stop offset="0.62" stop-color="#0A70AE"/>
+<stop offset="0.78" stop-color="#0095EE"/>
+<stop offset="0.8" stop-color="#0387D6"/>
+<stop offset="0.84" stop-color="#0D689F"/>
+<stop offset="0.88" stop-color="#154D71"/>
+<stop offset="0.91" stop-color="#1B394E"/>
+<stop offset="0.95" stop-color="#1F2A34"/>
+<stop offset="0.98" stop-color="#222225"/>
+<stop offset="1" stop-color="#231F20"/>
+</linearGradient>
+<radialGradient id="paint3_radial_247_40986" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(64.1178 11.4299) scale(2.48986 2.49715)">
+<stop stop-color="#231F20"/>
+<stop offset="0.2" stop-color="#165068"/>
+<stop offset="0.38" stop-color="#0C78A1"/>
+<stop offset="0.54" stop-color="#0594CB"/>
+<stop offset="0.66" stop-color="#01A6E4"/>
+<stop offset="0.73" stop-color="#00ADEE"/>
+<stop offset="0.76" stop-color="#01A5E3"/>
+<stop offset="0.81" stop-color="#0693C8"/>
+<stop offset="0.87" stop-color="#0D749B"/>
+<stop offset="0.94" stop-color="#184A5E"/>
+<stop offset="1" stop-color="#231F20"/>
+</radialGradient>
+<radialGradient id="paint4_radial_247_40986" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(65.4872 12.7371) scale(0.885654 0.888245)">
+<stop stop-color="#CCCCCC"/>
+<stop offset="0.02" stop-color="#C4C4C4"/>
+<stop offset="0.22" stop-color="#898989"/>
+<stop offset="0.41" stop-color="#585858"/>
+<stop offset="0.59" stop-color="#313131"/>
+<stop offset="0.75" stop-color="#161616"/>
+<stop offset="0.89" stop-color="#050505"/>
+<stop offset="1"/>
+</radialGradient>
+</defs>
+</svg>

package/PhoneBox/wangluo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1012.3915 297.221c-276.295-276.295-724.404-276.295-1000.699 0-15.59 15.59-15.59 40.798 0 56.277 15.59 15.589 40.797 15.589 56.276 0 245.227-245.228 642.92-245.228 888.147 0 15.59 15.589 40.797 15.589 56.276 0 15.479-15.48 15.479-40.687 0-56.277z m-850.666 171.15c-15.59 15.59-15.59 40.798 0 56.277 15.59 15.59 40.797 15.59 56.276 0 162.306-162.306 425.554-162.306 587.86 0 15.589 15.59 40.797 15.59 56.276 0 15.59-15.59 15.59-40.798 0-56.276-193.374-193.374-506.928-193.374-700.412 0z m551.042 181.544l0.221-0.221c-110.562-110.562-289.783-110.562-400.235 0-15.59 15.59-15.59 40.797 0 56.276 15.59 15.59 40.797 15.59 56.276 0 79.494-79.494 208.3-79.494 287.683 0l0.221-0.221a40.39 40.39 0 0 0 2.985 3.317c15.59 15.589 40.798 15.589 56.277 0 15.589-15.59 15.589-40.798 0-56.276-1.217-0.996-2.322-1.88-3.428-2.875zM453.3885 874.909c0 32.974 26.73 59.704 59.704 59.704 32.973 0 59.703-26.73 59.703-59.704 0-32.973-26.73-59.704-59.703-59.704-32.974 0-59.704 26.73-59.704 59.704z" fill="#000000" /></svg>

package/PhoneBox/xinhao.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M192.437 816.222c-23.575 0-42.863-19.288-42.863-42.863v-64.294c0-23.575 19.288-42.863 42.863-42.863s42.863 19.288 42.863 42.863v64.294c0.005 23.57-19.284 42.863-42.863 42.863zM406.754 816.222c-23.575 0-42.862-19.288-42.862-42.863v-171.458c0-23.575 19.288-42.862 42.862-42.862s42.863 19.288 42.863 42.862v171.458c0.005 23.57-19.284 42.863-42.863 42.863zM621.080 816.222c-23.575 0-42.862-19.288-42.862-42.863v-342.912c0-23.575 19.288-42.862 42.862-42.862s42.862 19.288 42.862 42.862v342.908c0 23.575-19.288 42.867-42.862 42.867zM835.397 816.222c-23.575 0-42.863-19.288-42.863-42.863v-557.234c0-23.575 19.288-42.863 42.863-42.863s42.863 19.288 42.863 42.863v557.229c0 23.575-19.288 42.867-42.863 42.867z" fill="#2c2c2c" /></svg>

package/Table/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { tools } from '@cqsjjb/jjb-common-lib';
 import { ProTable } from '@ant-design/pro-components';
 import { useAntdResizableHeader } from 'use-antd-resizable-header';
-import { antPrefix, setTableSize, getTableSize, getPersistenceKey, isNull } from './utils';
+import { antPrefix, setTableSize, getTableSize, getPersistenceKey } from './utils';
 import './index.less';
 require('use-antd-resizable-header/dist/style.css');
 export default function TablePro(props) {
@@ -94,9 +94,8 @@ export default function TablePro(props) {
     size: size,
     search: false,
     scroll: scroll,
-    columns: resizableColumns,
     className: `${antPrefix}-gbs-pro-table`,
-    options: !isNull(props.options) ? props.options : {
+    options: {
       reload: false,
       fullScreen: true,
       setting: {
@@ -113,5 +112,7 @@ export default function TablePro(props) {
       persistenceType: 'localStorage'
     },
     onSizeChange: setSize
-  }, props)));
+  }, props, {
+    columns: resizableColumns
+  })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.3.1-beta.1",
+  "version": "3.3.1-beta.10",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",
@@ -9,15 +9,16 @@
     "access": "public"
   },
   "dependencies": {
+    "@ant-design/pro-components": "latest",
+    "@ant-design/pro-layout": "latest",
+    "@cqsjjb-formily/renderer": "latest",
+    "@wangeditor-next/editor": "latest",
     "axios": "^1.6.5",
+    "cropperjs": "^1.6.2",
     "lodash": "^4.17.21",
+    "react-cropper": "2.3.3",
     "spark-md5": "^3.0.2",
-    "cropperjs": "^1.6.2",
-    "@wangeditor-next/editor": "latest",
-    "@cqsjjb-formily/renderer": "latest",
-    "@ant-design/pro-layout": "latest",
-    "use-antd-resizable-header": "latest",
-    "@ant-design/pro-components": "latest",
-    "react-cropper": "2.3.3"
+    "styled-components": "^6.1.19",
+    "use-antd-resizable-header": "latest"
   }
 }