@pisell/materials 6.0.19 → 6.0.21

package/es/components/walletCard/index.js

@@ -0,0 +1,402 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Card, QRCode } from 'antd';
+import classNames from 'classnames';
+import React, { useMemo, useState } from 'react';
+import Barcode from 'react-barcode';
+import { getText } from "../../locales/index";
+import Iconfont from "./../iconfont";
+import PisellModal from "./../pisellModal";
+import Amount from "./../pisellText/components/Amount";
+import useEngineContext from "../../hooks/useEngineContext";
+import Guest from "./Guest";
+import "./index.less";
+
+// 添加JSX类型声明
+
+// 类型定义
+
+// 默认值
+var DEFAULT_PROPS = {
+  symbol: '$',
+  mode: 'light',
+  iconImg: '',
+  showIcon: true,
+  showWalletName: true,
+  shopName: 'Store name',
+  showShopName: true,
+  cardNo: 'Wallet number',
+  cardStyle: 'normal',
+  codeType: 'barCode',
+  platform: 'pc',
+  codeDirection: 'bottom',
+  showCardNo: true,
+  showCode: true,
+  walletName: 'Level',
+  isLogin: true,
+  items: [{
+    key: 'rechargeable',
+    label: 'rechargeable',
+    value: 0
+  }, {
+    key: 'piont',
+    label: 'piont',
+    value: 10
+  }, {
+    key: 'voucher',
+    label: 'Discount cardvoucher',
+    value: 0
+  }, {
+    key: 'discount',
+    label: 'discount',
+    value: 0
+  }]
+};
+
+// 工具函数：将可能的数字0/1转为布尔值
+var toBooleanValue = function toBooleanValue(value) {
+  if (value === undefined) return false;
+  if (value === 0 || value === '0') return false;
+  if (value === 1 || value === '1') return true;
+  return !!value;
+};
+
+// 自定义钩子：处理二维码/条形码模态框
+var useCodeModal = function useCodeModal(cardNo, onCodeClick) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalOpen = _useState2[0],
+    setIsModalOpen = _useState2[1];
+  var handleCodeClick = function handleCodeClick(e) {
+    e.stopPropagation();
+    if (onCodeClick) {
+      onCodeClick();
+    } else {
+      setIsModalOpen(true);
+    }
+  };
+  var closeModal = function closeModal(e) {
+    e === null || e === void 0 || e.stopPropagation();
+    setIsModalOpen(false);
+  };
+  return {
+    isModalOpen: isModalOpen,
+    handleCodeClick: handleCodeClick,
+    closeModal: closeModal
+  };
+};
+
+// 子组件：卡片头部
+var CardHeader = function CardHeader(_ref) {
+  var _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
+    _ref$showWalletName = _ref.showWalletName,
+    showWalletName = _ref$showWalletName === void 0 ? true : _ref$showWalletName,
+    _ref$showShopName = _ref.showShopName,
+    showShopName = _ref$showShopName === void 0 ? true : _ref$showShopName,
+    _ref$showCardNo = _ref.showCardNo,
+    showCardNo = _ref$showCardNo === void 0 ? true : _ref$showCardNo,
+    _ref$showCode = _ref.showCode,
+    showCode = _ref$showCode === void 0 ? true : _ref$showCode,
+    iconImg = _ref.iconImg,
+    mode = _ref.mode,
+    _ref$walletName = _ref.walletName,
+    walletName = _ref$walletName === void 0 ? 'Level' : _ref$walletName,
+    _ref$shopName = _ref.shopName,
+    shopName = _ref$shopName === void 0 ? 'Store name' : _ref$shopName,
+    _ref$cardNo = _ref.cardNo,
+    cardNo = _ref$cardNo === void 0 ? 'Wallet number' : _ref$cardNo,
+    _ref$cardStyle = _ref.cardStyle,
+    cardStyle = _ref$cardStyle === void 0 ? 'normal' : _ref$cardStyle,
+    _ref$codeType = _ref.codeType,
+    codeType = _ref$codeType === void 0 ? 'barCode' : _ref$codeType,
+    onCodeClick = _ref.onCodeClick,
+    _ref$isLogin = _ref.isLogin,
+    isLogin = _ref$isLogin === void 0 ? false : _ref$isLogin;
+  // 处理可能为0/1的布尔值
+  var processedShowIcon = toBooleanValue(showIcon);
+  var processedShowWalletName = toBooleanValue(showWalletName);
+  var processedShowShopName = toBooleanValue(showShopName);
+  var processedShowCardNo = toBooleanValue(showCardNo);
+  var processedShowCode = toBooleanValue(showCode);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-header-left"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-header-level"
+  }, processedShowIcon && iconImg ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-header-icon"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: iconImg,
+    alt: "wallet icon",
+    style: {
+      width: '20px',
+      height: '20px'
+    }
+  })) : null, processedShowWalletName && walletName && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-header-level-text"
+  }, walletName)), processedShowShopName && shopName && /*#__PURE__*/React.createElement("div", null, shopName), processedShowCardNo && cardNo && /*#__PURE__*/React.createElement("div", null, cardNo)), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-header-right"
+  }, processedShowCode && cardStyle === 'normal' && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-icon-wrapper",
+    onClick: onCodeClick
+  }, /*#__PURE__*/React.createElement(Iconfont, {
+    style: {
+      color: mode === 'dark' ? '#fff' : '#101828'
+    },
+    type: codeType === 'barCode' ? 'pisell2-Barcode' : 'pisell2-a-qr-code-02',
+    className: "pisell-wallet-card-icon"
+  }))));
+};
+
+// 子组件：卡片内容项
+var CardItem = function CardItem(_ref2) {
+  var item = _ref2.item,
+    symbol = _ref2.symbol;
+  var key = item.key,
+    label = item.label,
+    value = item.value;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-item-label"
+  }, getText("walletCard-".concat(label)) || ''), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-item-value"
+  }, key === 'rechargeable' ? /*#__PURE__*/React.createElement(Amount, {
+    className: "pisell-card-amount-item-value",
+    platform: "h5",
+    symbol: symbol,
+    useThousandsSeparator: true,
+    showCurrencySymbol: true,
+    value: value
+  }) : value));
+};
+
+// 子组件：卡片内容
+var CardContent = function CardContent(_ref3) {
+  var items = _ref3.items,
+    symbol = _ref3.symbol;
+  // 定义期望的顺序
+  var expectedOrder = ['piont', 'balance', 'discount', 'voucher'];
+
+  // 对 items 进行排序
+  var sortedItems = useMemo(function () {
+    if (!(items !== null && items !== void 0 && items.length)) return [];
+    return _toConsumableArray(items).sort(function (a, b) {
+      var indexA = expectedOrder.indexOf(a.key);
+      var indexB = expectedOrder.indexOf(b.key);
+      return indexA - indexB;
+    });
+  }, [items]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-list",
+    style: {
+      justifyContent: (sortedItems || []).length > 1 ? 'space-between' : 'flex-start'
+    }
+  }, (sortedItems || []).map(function (item, index) {
+    return /*#__PURE__*/React.createElement(CardItem, {
+      key: index,
+      item: item,
+      symbol: symbol
+    });
+  }));
+};
+
+// 子组件：二维码/条形码显示
+var CodeDisplay = function CodeDisplay(_ref4) {
+  var codeType = _ref4.codeType,
+    cardNo = _ref4.cardNo;
+  if (!cardNo) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-code"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-code-qrcode"
+  }, codeType === 'barCode' ? /*#__PURE__*/React.createElement(Barcode, {
+    value: cardNo,
+    displayValue: false,
+    height: 114,
+    width: 3
+  }) : /*#__PURE__*/React.createElement(QRCode, {
+    size: 250,
+    value: cardNo,
+    bordered: false
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-code-qrcode-value"
+  }, cardNo)));
+};
+var blockEvent = function blockEvent(e) {
+  e.stopPropagation();
+  e.preventDefault();
+  if (e.nativeEvent) {
+    e.nativeEvent.stopImmediatePropagation();
+    e.nativeEvent.preventDefault();
+  }
+  return false;
+};
+
+// 子组件：二维码/条形码模态框
+var CodeModal = function CodeModal(_ref5) {
+  var isOpen = _ref5.isOpen,
+    onClose = _ref5.onClose,
+    codeType = _ref5.codeType,
+    cardNo = _ref5.cardNo,
+    platform = _ref5.platform;
+  return /*#__PURE__*/React.createElement(PisellModal, {
+    title: getText(codeType === 'barCode' ? 'walletCard-barcode' : 'walletCard-qrcode'),
+    platform: platform,
+    onCancel: onClose,
+    open: isOpen,
+    footer: null,
+    mobileModalHeight: "auto",
+    className: "pisell-qrcode-modal",
+    bodyStyle: {
+      padding: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-qrcode-modal-content",
+    onClick: blockEvent,
+    onTouchStart: blockEvent,
+    onTouchMove: blockEvent,
+    onTouchEnd: blockEvent,
+    onTouchCancel: blockEvent,
+    onMouseDown: blockEvent,
+    onMouseMove: blockEvent,
+    onMouseUp: blockEvent,
+    onWheel: blockEvent,
+    onScroll: blockEvent,
+    onDragStart: blockEvent,
+    onDrag: blockEvent,
+    onDragEnd: blockEvent
+  }, /*#__PURE__*/React.createElement(CodeDisplay, {
+    codeType: codeType,
+    cardNo: cardNo
+  })));
+};
+
+// 主组件
+var WalletCard = function WalletCard(props) {
+  var mergedProps = _objectSpread(_objectSpread({}, DEFAULT_PROPS), props);
+  var symbol = mergedProps.symbol,
+    mode = mergedProps.mode,
+    iconImg = mergedProps.iconImg,
+    shopName = mergedProps.shopName,
+    cardNo = mergedProps.cardNo,
+    cardStyle = mergedProps.cardStyle,
+    codeType = mergedProps.codeType,
+    platform = mergedProps.platform,
+    codeDirection = mergedProps.codeDirection,
+    walletName = mergedProps.walletName,
+    _mergedProps$items = mergedProps.items,
+    items = _mergedProps$items === void 0 ? [] : _mergedProps$items,
+    onCodeClick = mergedProps.onCodeClick,
+    onClick = mergedProps.onClick,
+    className = mergedProps.className,
+    style = mergedProps.style;
+
+  // 处理可能为0/1的布尔值props
+  var showIcon = toBooleanValue(mergedProps.showIcon);
+  var showWalletName = toBooleanValue(mergedProps.showWalletName);
+  var showShopName = toBooleanValue(mergedProps.showShopName);
+  var showCardNo = toBooleanValue(mergedProps.showCardNo);
+  var showCode = toBooleanValue(mergedProps.showCode);
+  var isLogin = toBooleanValue(mergedProps.isLogin);
+  var context = useEngineContext();
+  var _ref6 = context.appHelper || {},
+    utils = _ref6.utils;
+  // 使用自定义钩子处理模态框逻辑
+  var _useCodeModal = useCodeModal(cardNo, onCodeClick),
+    isModalOpen = _useCodeModal.isModalOpen,
+    handleCodeClick = _useCodeModal.handleCodeClick,
+    closeModal = _useCodeModal.closeModal;
+
+  // 计算背景样式
+  var backgroundStyle = useMemo(function () {
+    if (props.customBackgroundImage) {
+      return {
+        backgroundImage: "url(".concat(props.customBackgroundImage, ")")
+      };
+    } else {
+      return {
+        backgroundImage: "url(https://file.mypisell-dev.com/pisel/image/9/".concat(mode === 'dark' ? '3d039c83ff5b84fadafb8a23c33d6cc42025_02_26_00_42_53_288_08413160975__720_456__' : '61dcbe950c9451164a6bb1d17d5bc5f02025_02_26_00_43_42_741_04853453608__720_456__', ".png)")
+      };
+    }
+  }, [props.customBackgroundImage, mode]);
+  var goWallet = function goWallet() {
+    utils === null || utils === void 0 || utils.action({
+      type: 'pisell1.goWallet',
+      data: {},
+      callback: function callback() {}
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-wallet-card-wrapper', className),
+    style: style,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Card, {
+    style: {
+      border: 'none'
+    },
+    bodyStyle: {
+      padding: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-card-container",
+    style: {
+      flexDirection: codeDirection === 'top' ? 'column-reverse' : 'column'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-wallet-card-content', mode, !isLogin && 'pisell-wallet-card-guest-content'),
+    style: backgroundStyle
+  }, isLogin ? /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      goWallet();
+    }
+  }, /*#__PURE__*/React.createElement(CardHeader, {
+    mode: mode,
+    showWalletName: showWalletName,
+    showIcon: showIcon,
+    iconImg: iconImg,
+    walletName: walletName,
+    shopName: shopName,
+    showShopName: showShopName,
+    cardNo: cardNo,
+    showCardNo: showCardNo,
+    showCode: showCode,
+    cardStyle: cardStyle,
+    codeType: codeType,
+    onCodeClick: handleCodeClick,
+    isLogin: isLogin
+  }), /*#__PURE__*/React.createElement(CardContent, {
+    items: items,
+    symbol: symbol
+  })) : /*#__PURE__*/React.createElement(Guest, {
+    setting: props
+  })), cardStyle === 'full' && isLogin && /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-wallet-card-showCode', codeDirection === 'top' ? 'code-top' : 'code-bottom')
+  }, /*#__PURE__*/React.createElement(CodeDisplay, {
+    codeType: codeType,
+    cardNo: cardNo
+  })))), /*#__PURE__*/React.createElement(CodeModal, {
+    isOpen: isModalOpen,
+    onClose: closeModal,
+    codeType: codeType,
+    cardNo: cardNo,
+    platform: platform
+  }));
+};
+export default WalletCard;

package/es/components/walletCard/index.less

@@ -0,0 +1,267 @@
+.pisell-wallet-card-wrapper {
+  border: none;
+  overflow: hidden;
+  border-radius: 12px;
+  width: 100%;
+
+  // 卡片容器
+  .pisell-wallet-card-container {
+    width: 100%;
+    display: flex;
+    cursor: pointer;
+  }
+
+  // 卡片内容区域
+  .pisell-wallet-card-content {
+    padding: 16px 18px;
+    background-position: top center;
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    // 暗色主题
+    &.dark {
+      background-color: #000;
+
+      .pisell-wallet-card-header-left {
+        color: #fff;
+      }
+
+      .pisell-wallet-card-item {
+        .pisell-wallet-card-item-label {
+          color: #eaecf0;
+        }
+
+        .pisell-wallet-card-item-value {
+          color: #fff;
+        }
+      }
+    }
+
+    // 亮色主题
+    &.light {
+      background-color: #fff;
+
+      .pisell-wallet-card-header-left {
+        color: #101828;
+      }
+
+      .pisell-wallet-card-item {
+        .pisell-wallet-card-item-label {
+          color: #667085;
+        }
+
+        .pisell-wallet-card-item-value {
+          color: #101828;
+        }
+      }
+    }
+  }
+
+  .pisell-wallet-card-guest-content {
+    padding: 0;
+  }
+
+  // 卡片头部
+  .pisell-wallet-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    // 头部左侧
+    .pisell-wallet-card-header-left {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+
+      // 卡片等级/名称区域
+      .pisell-wallet-card-header-level {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 8px;
+
+        // 卡片名称文本
+        .pisell-wallet-card-header-level-text {
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 20px;
+        }
+
+        // 卡片图标
+        .pisell-wallet-card-header-icon {
+          width: 20px;
+          height: 20px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      // 头部左侧其他信息
+      > div {
+        margin-bottom: 4px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    // 头部右侧
+    .pisell-wallet-card-header-right {
+      // 图标包装器
+      .pisell-wallet-card-icon-wrapper {
+        cursor: pointer;
+      }
+
+      // 图标
+      .pisell-wallet-card-icon {
+        font-size: 40px;
+        cursor: pointer;
+        transition: opacity 0.3s ease;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+
+  // 卡片内容列表
+  .pisell-wallet-card-list {
+    margin-top: 30px;
+    height: 50px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    gap: 16px;
+
+    // 列表项
+    .pisell-wallet-card-item {
+      text-align: center;
+      // flex: 1;
+      min-width: 0;
+
+      // 标签
+      .pisell-wallet-card-item-label {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        margin-bottom: 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      // 值
+      .pisell-wallet-card-item-value {
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 30px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  // 显示二维码/条形码区域
+  .pisell-wallet-card-showCode {
+    padding: 20px;
+    background-color: #fff;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid #d0d5de;
+
+    // 当二维码/条形码在底部显示时
+    &.code-bottom {
+      border-top: none;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 12px;
+      border-bottom-right-radius: 12px;
+    }
+
+    // 当二维码/条形码在顶部显示时
+    &.code-top {
+      border-bottom: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+    }
+
+    .pisell-wallet-card-code {
+      display: flex;
+      justify-content: center;
+    }
+    // 条形码样式
+    .pisell-wallet-card-code {
+      width: 100%;
+
+      // 覆盖react-barcode生成的SVG文本样式
+      svg {
+        width: 100%;
+
+        text {
+          fill: #000;
+          font-family: Inter;
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: normal;
+          transform: translateY(12px);
+        }
+      }
+    }
+
+    // 二维码下方文本样式
+    .pisell-wallet-card-code-qrcode-value {
+      color: #000;
+      font-family: Inter;
+      font-size: 12px;
+      text-align: center;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+  }
+
+  // 卡片内容区域
+  .pisell-lowcode-card-body {
+    padding: 0;
+  }
+}
+
+// 二维码模态框
+.pisell-qrcode-modal {
+  .pisell-qrcode-modal-content{
+    pointer-events: auto;
+    touch-action: none;
+    overscroll-behavior: none;
+    position: relative;
+    z-index: 1001;
+    width: 100%;
+
+    .pisell-wallet-card-code {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    // 二维码值
+    .pisell-wallet-card-code-qrcode-value {
+      color: var(--Gray-500, #667085);
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      margin: 0 0 24px;
+      text-align: center;
+    }
+  }
+}

package/es/hooks/useCssVariables.js

@@ -2,7 +2,7 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useEffect } from "react";
 var useCssVariables = function useCssVariables(props) {