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

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,200 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Empty, Space, message, Tooltip, Button, QRCode } from 'antd';
+import { SyncOutlined } from '@ant-design/icons';
+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('.micro-temp-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: require('~/assets/phone.png').default,
+    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: require('~/assets/shexiang.png').default,
+    width: 76,
+    height: 23,
+    alt: ""
+  }), /*#__PURE__*/React.createElement(Space, {
+    className: "phone-header-status"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "status-xinhao",
+    src: require('~/assets/xinhao.png').default,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("img", {
+    className: "status-wangluo",
+    src: require('~/assets/wangluo.png').default,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("img", {
+    className: "status-dianchi",
+    src: require('~/assets/dianchi.png').default,
+    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: 12px 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/package.json

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