@pisell/materials 1.0.961 → 1.0.962

package/es/components/dataSourceComponents/provider/variables/VariablesProvider.js

@@ -15,16 +15,23 @@ var defaultCustomizer = function defaultCustomizer(objValue, srcValue) {
 };
 var VARIABLE_PATTERN = /{{([^}]+)}}/g;
 var VariablesProvider = function VariablesProvider(props) {
-  var _context$appHelper;
+  var _context$engine, _context$appHelper;
   var children = props.children,
-    variables = props.variables;
+    variables = props.variables,
+    config = props.config;
   var context = useEngineContext();
+
+  // 获取 disabledHistoryListener 参数，如果为 true 则不监听 history
+  var disabledHistoryListener = config !== null && config !== void 0 ? config : context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 || (_context$engine = _context$engine.variablesConfig) === null || _context$engine === void 0 ? void 0 : _context$engine.disabledHistoryListener;
   var _ref = (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {},
     getApp = _ref.getApp;
 
   // 在组件创建时就初始化 URL 参数
   var initialQuery = useMemo(function () {
     var _getApp;
+    if (disabledHistoryListener) {
+      return {};
+    }
     var currentLocation = getApp === null || getApp === void 0 || (_getApp = getApp()) === null || _getApp === void 0 || (_getApp = _getApp.history) === null || _getApp === void 0 || (_getApp = _getApp.instance) === null || _getApp === void 0 ? void 0 : _getApp.location;
     if (currentLocation !== null && currentLocation !== void 0 && currentLocation.search) {
       var searchParams = new URLSearchParams(currentLocation.search);
@@ -35,10 +42,10 @@ var VariablesProvider = function VariablesProvider(props) {
       return query;
     }
     return {};
-  }, []);
+  }, [disabledHistoryListener]);
 
   // 初始变量中包含 URL 参数
-  var variablesRef = useRef(mergeWith(variables, {
+  var variablesRef = useRef(disabledHistoryListener ? variables || {} : mergeWith(variables, {
     global: {
       value: {
         query: initialQuery
@@ -52,6 +59,9 @@ var VariablesProvider = function VariablesProvider(props) {
 
   // 解析并设置 query 参数
   var setQueryVariable = useMemoizedFn(function (search) {
+    if (disabledHistoryListener) {
+      return;
+    }
     var searchParams = new URLSearchParams(search);
     var query = {};
     searchParams.forEach(function (value, key) {
@@ -63,13 +73,16 @@ var VariablesProvider = function VariablesProvider(props) {
   });
   useEffect(function () {
     var _getApp2;
+    if (disabledHistoryListener) {
+      return;
+    }
     var unlisten = getApp === null || getApp === void 0 || (_getApp2 = getApp()) === null || _getApp2 === void 0 || (_getApp2 = _getApp2.history) === null || _getApp2 === void 0 || (_getApp2 = _getApp2.instance) === null || _getApp2 === void 0 ? void 0 : _getApp2.listen(function (location) {
       setQueryVariable(location.search);
     });
     return function () {
       unlisten === null || unlisten === void 0 || unlisten();
     };
-  }, []);
+  }, [disabledHistoryListener]);
 
   // useEffect(() => {
   //   if (variables) {

package/es/components/page/index.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["children", "style", "className", "locale"];
+var _excluded = ["children", "style", "className", "locale", "variablesConfig"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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; }
@@ -50,6 +50,7 @@ var Page = function Page(props) {
     style = props.style,
     className = props.className,
     propsLocale = props.locale,
+    variablesConfig = props.variablesConfig,
     others = _objectWithoutProperties(props, _excluded);
   var context = useEngineContext();
   var _ref = ((_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.constants) || {},
@@ -218,7 +219,8 @@ var Page = function Page(props) {
   }, /*#__PURE__*/React.createElement(PisellConfigProvider, {
     locale: locale
   }, /*#__PURE__*/React.createElement(VariablesProvider, {
-    variables: ((_context$engine2 = context.engine) === null || _context$engine2 === void 0 || (_context$engine2 = _context$engine2.props) === null || _context$engine2 === void 0 ? void 0 : _context$engine2.variables) || {}
+    variables: ((_context$engine2 = context.engine) === null || _context$engine2 === void 0 || (_context$engine2 = _context$engine2.props) === null || _context$engine2 === void 0 ? void 0 : _context$engine2.variables) || {},
+    config: variablesConfig
   }, /*#__PURE__*/React.createElement("div", {
     style: _objectSpread(_objectSpread({}, style), {}, {
       '--theme-color': themeColor || '#5D3F9F'

package/es/components/pisellWalletPassCard/index.js

@@ -17,7 +17,7 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { useSize } from 'ahooks';
 import classNames from 'classnames';
 import { CheckCircleFilled, EditOutlined, ExclamationCircleOutlined, MoreOutlined } from '@ant-design/icons';
-import { Dropdown, Form, Input, InputNumber, DatePicker, Radio } from 'antd';
+import { Button, Dropdown, Form, Input, InputNumber, DatePicker, Radio } from 'antd';
 import dayjs from 'dayjs';
 import Iconfont from "../iconfont";
 import { PisellModal, usePisellConfig } from "../../index";
@@ -147,7 +147,13 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
     formatRedeemTitle = props.formatRedeemTitle,
     maxRedeem = props.maxRedeem,
     validDateBySchedule = props.validDateBySchedule,
-    scheduleList = props.scheduleList;
+    scheduleList = props.scheduleList,
+    _props$showHolderName = props.showHolderName,
+    showHolderName = _props$showHolderName === void 0 ? true : _props$showHolderName,
+    _props$holderType = props.holderType,
+    holderType = _props$holderType === void 0 ? 'customer' : _props$holderType,
+    holder = props.holder,
+    onSetHolder = props.onSetHolder;
   useEffect(function () {
     document.body.id = 'body';
   }, []);
@@ -289,35 +295,6 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
       return _ref.apply(this, arguments);
     };
   }();
-
-  // 添加长按相关处理函数
-  var handleTouchStart = function handleTouchStart() {
-    var _actions$edit3;
-    if (disabled || disabledReason || !(actions !== null && actions !== void 0 && (_actions$edit3 = actions.edit) !== null && _actions$edit3 !== void 0 && _actions$edit3.enableDialog)) return;
-    var timer = setTimeout(function () {
-      onEdit();
-    }, 500); // 500ms 长按阈值
-
-    setPressTimer(timer);
-  };
-  var handleTouchEnd = function handleTouchEnd() {
-    if (pressTimer) {
-      clearTimeout(pressTimer);
-      setPressTimer(null);
-    }
-  };
-
-  // 处理移动端双击
-  var handleTap = function handleTap() {
-    if (disabled || disabledReason) return;
-    var now = Date.now();
-    var DOUBLE_TAP_DELAY = 300; // 双击间隔阈值
-
-    if (now - lastTap < DOUBLE_TAP_DELAY) {
-      handleDetail();
-    }
-    setLastTap(now);
-  };
   var formatValidDate = useMemo(function () {
     if (validDateBySchedule && scheduleList && (scheduleList === null || scheduleList === void 0 ? void 0 : scheduleList.length) > 0) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, getText('pisell-wallet-pass-card-valid'), ' ', getScheduleSummary(scheduleList, config === null || config === void 0 ? void 0 : config.locale) || validDate);
@@ -347,7 +324,7 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
     if ((disabled || disabledReason) && !showStatus) return null;
     if ((!showActions || !actions) && !showStatus) return null;
     if ('collapsed' === (actions === null || actions === void 0 ? void 0 : actions.layout)) {
-      var _actions$detail2, _actions$edit4;
+      var _actions$detail2, _actions$edit3;
       var items = [];
       if (actions !== null && actions !== void 0 && actions.detail && actions !== null && actions !== void 0 && (_actions$detail2 = actions.detail) !== null && _actions$detail2 !== void 0 && _actions$detail2.visible) {
         items.push({
@@ -361,7 +338,7 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
           }, /*#__PURE__*/React.createElement("span", null, getText('pisell-wallet-pass-card-detail')))
         });
       }
-      if (actions !== null && actions !== void 0 && actions.edit && actions !== null && actions !== void 0 && (_actions$edit4 = actions.edit) !== null && _actions$edit4 !== void 0 && _actions$edit4.visible) {
+      if (actions !== null && actions !== void 0 && actions.edit && actions !== null && actions !== void 0 && (_actions$edit3 = actions.edit) !== null && _actions$edit3 !== void 0 && _actions$edit3.visible) {
         items.push({
           key: 'edit',
           label: /*#__PURE__*/React.createElement("div", {
@@ -392,7 +369,7 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
       })));
     }
     if ('expanded' === (actions === null || actions === void 0 ? void 0 : actions.layout) || showStatus) {
-      var _actions$detail3, _actions$edit5;
+      var _actions$detail3, _actions$edit4;
       return /*#__PURE__*/React.createElement("div", {
         className: "actions-btn-wrapper",
         ref: actionsWrapperRef
@@ -418,7 +395,7 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
           fontSize: 24,
           color: actions.detail.iconColor || '#1570EF'
         }
-      })), (actions === null || actions === void 0 ? void 0 : actions.edit) && (actions === null || actions === void 0 || (_actions$edit5 = actions.edit) === null || _actions$edit5 === void 0 ? void 0 : _actions$edit5.visible) && /*#__PURE__*/React.createElement("div", {
+      })), (actions === null || actions === void 0 ? void 0 : actions.edit) && (actions === null || actions === void 0 || (_actions$edit4 = actions.edit) === null || _actions$edit4 === void 0 ? void 0 : _actions$edit4.visible) && /*#__PURE__*/React.createElement("div", {
         className: "pisell-card-actions-edit-btn",
         onClick: function onClick(e) {
           stop(e);
@@ -432,12 +409,30 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
       })));
     }
   };
+  var _showHolderName = useMemo(function () {
+    return holderType === 'custom' && showHolderName;
+  }, [holderType, showHolderName]);
+  var holderName = useMemo(function () {
+    if (holderType === 'custom' && !(holder !== null && holder !== void 0 && holder.id)) {
+      return '--';
+    }
+    return (holder === null || holder === void 0 ? void 0 : holder.name) || '';
+  }, [holderType, holder]);
   var renderNameInfo = function renderNameInfo() {
     var shouldShowStoreName = typeof showStoreName === 'function' ? showStoreName(props) : showStoreName;
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "pisell-card-name-wrap",
-      style: dynamicNameWrapStyle
-    }, showName && name), shouldShowStoreName && /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-card-name-info-wrap"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-card-name-wrap"
+    }, showName && name), _showHolderName && /*#__PURE__*/React.createElement("div", {
+      className: "pisell-card-holder-name",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onSetHolder === null || onSetHolder === void 0 || onSetHolder(holder);
+      }
+    }, holderName), /*#__PURE__*/React.createElement("div", {
+      className: "pisell-card-store-name"
+    }, showStoreName && storeName), shouldShowStoreName && /*#__PURE__*/React.createElement("div", {
       className: "pisell-card-store-name"
     }, storeName));
   };
@@ -524,11 +519,8 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
       // onClick={handleEditAmount}
     });
   };
-  var renderBalanceInfo = function renderBalanceInfo() {
-    var _props$metadata;
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "pisell-card-amount-wrap"
-    }, showRedeem && !disabled && /*#__PURE__*/React.createElement("div", {
+  var renderRedeemInfo = function renderRedeemInfo() {
+    return showRedeem && !disabled && /*#__PURE__*/React.createElement("div", {
       className: "pisell-card-amount-item pisell-wallet-pass-card-redeem"
     }, /*#__PURE__*/React.createElement("div", {
       className: "pisell-card-amount-item-label"
@@ -540,17 +532,23 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
       originDom: createOriginalRedeemDom(),
       active: active,
       data: props
-    }) : createOriginalRedeemDom()), showBalance && /*#__PURE__*/React.createElement("div", {
-      className: "pisell-card-amount-item pisell-wallet-pass-card-balance"
+    }) : createOriginalRedeemDom());
+  };
+  var renderBalanceInfo = function renderBalanceInfo() {
+    var _props$metadata;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-card-amount-info-wrap"
+    }, showBalance && /*#__PURE__*/React.createElement("div", {
+      className: "pisell-card-amount-item pisell-card-amount-item-balance"
     }, createOriginalBalanceTitleDom(), formatBalance ? formatBalance(balance, {
       originDom: createOriginalBalanceDom(),
       active: active,
       data: props
     }) : createOriginalBalanceDom()), showDiscount && /*#__PURE__*/React.createElement("div", {
-      className: "pisell-card-amount-item"
+      className: "pisell-card-amount-item pisell-card-amount-item-discount"
     }, /*#__PURE__*/React.createElement("div", {
       className: "pisell-card-amount-item-label"
-    }, getText('pisell-discount-card-title')), /*#__PURE__*/React.createElement("div", {
+    }, getText('pisell-discount-card-title'), ': '), /*#__PURE__*/React.createElement("div", {
       className: "pisell-card-amount-item-value"
     }, ((_props$metadata = props.metadata) === null || _props$metadata === void 0 ? void 0 : _props$metadata.discount_card_type) === 'fixed_amount' ? /*#__PURE__*/React.createElement(React.Fragment, null, getText('pisell-discount-card-fixed-amount-prefix'), ' ', /*#__PURE__*/React.createElement(Amount, {
       className: "pisell-card-amount-item-value",
@@ -594,9 +592,9 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
     });
   };
   var renderEditModal = function renderEditModal() {
-    var _actions$edit6, _actions$edit7;
+    var _actions$edit5, _actions$edit6;
     return /*#__PURE__*/React.createElement(PisellModal, {
-      title: (actions === null || actions === void 0 || (_actions$edit6 = actions.edit) === null || _actions$edit6 === void 0 ? void 0 : _actions$edit6.dialogTitle) || getText('pisell-wallet-pass-card-edit'),
+      title: (actions === null || actions === void 0 || (_actions$edit5 = actions.edit) === null || _actions$edit5 === void 0 ? void 0 : _actions$edit5.dialogTitle) || getText('pisell-wallet-pass-card-edit'),
       open: isShowEdit,
       className: "pisell-wallet-pass-card-edit-modal",
       onCancel: function onCancel() {
@@ -613,7 +611,7 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
       style: {
         padding: '16px 0'
       }
-    }, Array.isArray(actions === null || actions === void 0 || (_actions$edit7 = actions.edit) === null || _actions$edit7 === void 0 ? void 0 : _actions$edit7.fields) && actions.edit.fields.map(function (item) {
+    }, Array.isArray(actions === null || actions === void 0 || (_actions$edit6 = actions.edit) === null || _actions$edit6 === void 0 ? void 0 : _actions$edit6.fields) && actions.edit.fields.map(function (item) {
       return /*#__PURE__*/React.createElement(Form.Item, {
         key: item.name,
         name: item.name,
@@ -722,26 +720,46 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
       paddingBottom: dynamicPaddingBottom
     });
   }, [style, showCover, isMini, cover, dynamicPaddingBottom]);
+  var _renderMask = function _renderMask() {
+    if (holderType === 'customer') return null;
+    if (holderType === 'custom' && !(holder !== null && holder !== void 0 && holder.id)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "pisell-wallet-add-holder-mask",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "pisell-wallet-add-holder-mask-text"
+      }, getText('pisell2.wallet-card.add-holder-tip')), /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        className: "pisell-wallet-add-holder-mask-button"
+        // @ts-ignore
+        ,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onSetHolder === null || onSetHolder === void 0 || onSetHolder();
+        }
+      }, getText('pisell2.wallet-card.add-holder-button-text'), /*#__PURE__*/React.createElement(Iconfont, {
+        type: "pisell2-user-edit",
+        style: {
+          fontSize: 16
+        }
+      })));
+    }
+    return null;
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, renderDetailModal(), renderEditModal()), /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-wallet-pass-card', {
       'pisell-card-disabled': disabled,
       'pisell-card-disabled-hide-disabled-reason': disabled && !showDisabledReason,
       'pisell-wallet-pass-card-mini': isMini,
       active: active
-    })
-    // onTouchStart={handleTouchStart}
-    // onTouchEnd={handleTouchEnd}
-    // onTouchCancel={handleTouchEnd}
-    // onMouseDown={handleTouchStart}
-    // onMouseUp={handleTouchEnd}
-    // onMouseLeave={handleTouchEnd}
-    // onClick={handleTap}
-    ,
+    }),
     style: wrapperStyle
-  }, renderActions(), /*#__PURE__*/React.createElement("div", {
+  }, _renderMask(), renderActions(), /*#__PURE__*/React.createElement("div", {
     className: "pisell-wallet-pass-card-body",
     onClick: handleEditAmount
-  }, renderNameInfo(), renderBalanceInfo(), showQrCode && !isMini && /*#__PURE__*/React.createElement("div", {
+  }, renderNameInfo(), renderRedeemInfo(), renderBalanceInfo(), showQrCode && !isMini && /*#__PURE__*/React.createElement("div", {
     className: "pisell-card-qr-code"
   }, /*#__PURE__*/React.createElement(PisellQrcode, {
     value: qrCode,

package/es/components/pisellWalletPassCard/index.less

@@ -8,6 +8,35 @@
   position: relative;
   overflow: hidden;
 
+  .pisell-wallet-add-holder-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    z-index: 9;
+
+    &-text {
+      color: #fff;
+      text-align: center;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+      white-space: pre-line;
+    }
+
+    &-button {
+      font-weight: bold;
+    }
+  }
+
   .actions-dropdown-trigger {
     position: absolute;
     top: 16px;
@@ -61,9 +90,15 @@
     z-index: 2;
   }
 
+  .pisell-card-name-info-wrap {
+    // 避免子组件 display: inline-block 产生的幽灵间距
+    font-size: 0px;
+  }
+
   .pisell-card-name-wrap {
     font-weight: 500;
     line-height: 20px;
+    font-size: 14px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -75,6 +110,27 @@
     }
   }
 
+  .pisell-card-holder-name {
+    cursor: pointer;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 2px 8px;
+    border-radius: 16px;
+    max-width: 60%;
+    height: 22px;
+    min-width: 50px;
+    text-align: center;
+    line-height: 16px;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
+    background-color: #475467;
+    color: white;
+  }
+
   .pisell-card-store-name {
     height: 20px;
     font-size: 12px;
@@ -85,30 +141,34 @@
     text-overflow: ellipsis;
   }
 
-  .pisell-card-amount-wrap {
+  .pisell-card-amount-item {
     display: flex;
-    margin-bottom: 4px;
+    flex-direction: row;
+    align-items: center;
+    margin-right: 16px;
+    overflow: hidden;
 
-    .pisell-card-amount-item {
-      display: flex;
-      flex-direction: column;
-      margin-right: 16px;
+    .pisell-card-amount-item-label {
+      color: var(--Gray-500, #667085);
+      font-weight: 400;
+      line-height: 20px;
+      height: 20px;
+      white-space: nowrap;
+    }
+
+    .pisell-card-amount-item-value {
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 30px;
       overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
+    &-balance,
+    &-discount {
       .pisell-card-amount-item-label {
-        color: var(--Gray-500, #667085);
-        font-weight: 400;
-        line-height: 20px;
-        height: 20px;
-        white-space: nowrap;
-      }
-
-      .pisell-card-amount-item-value {
-        font-size: 20px;
-        font-weight: 600;
-        line-height: 20px;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        transform: translateY(2px);
+        margin-right: 2px;
       }
     }
   }
@@ -167,16 +227,18 @@
   color: var(--Gray-500, #667085);
   padding-bottom: 30px;
 
-  .pisell-card-amount-wrap {
-    .pisell-card-amount-item {
-      flex-direction: row;
-      align-items: center;
+  .pisell-card-amount-item {
+    flex-direction: row;
+    align-items: center;
 
-      .pisell-card-amount-item-value {
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 20px;
-      }
+    .pisell-card-amount-item-label {
+      transform: unset !important;
+    }
+
+    .pisell-card-amount-item-value {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
     }
   }
 
@@ -211,10 +273,6 @@
     line-height: 20px;
   }
 
-  .pisell-card-amount-wrap {
-    display: block;
-  }
-
   .pisell-wallet-pass-card-redeem {
     visibility: hidden;
     flex-direction: row;
@@ -252,7 +310,7 @@
     }
   }
 
-  .pisell-wallet-pass-card-balance {
+  .pisell-card-amount-item-balance {
     flex-direction: row;
     align-items: center;
 
@@ -279,6 +337,10 @@
       height: 20px;
     }
   }
+
+  .pisell-card-warn-message {
+    padding: 6px 16px;
+  }
 }
 
 .pisell-wallet-pass-card-detail-modal,

package/es/components/table/index.js

@@ -180,7 +180,7 @@ var GridView = Provider( /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     modal.dispatch({
       type: 'setUtils',
-      payload: utils || {}
+      payload: omit(utils, ['pisellos']) || {}
     });
     modal.dispatch({
       type: 'setIsTerminal',

package/es/components/virtualInput/index.js

@@ -7,7 +7,6 @@ import classNames from 'classnames';
 import Icon from "../icon";
 import BaseVirtualInput from "./BaseVirtualInput";
 import "./index.less";
-export { BaseVirtualInputProps, BaseVirtualInputRef } from "./BaseVirtualInput";
 var VirtualInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var topContent = _ref.topContent,
     bottomContent = _ref.bottomContent,

package/es/components/walletCard/index.js

@@ -10,7 +10,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { Button, Card, QRCode } from 'antd';
 import classNames from 'classnames';
 import React, { useMemo, useState } from 'react';
 import Barcode from 'react-barcode';
@@ -44,6 +44,10 @@ var DEFAULT_PROPS = {
   showCode: true,
   walletName: 'Level',
   isLogin: true,
+  showHolderName: true,
+  holderType: 'customer',
+  holder: null,
+  onSetHolder: function onSetHolder() {},
   items: [{
     type: 'rechargeable',
     display: 1,
@@ -166,7 +170,10 @@ var CardHeader = function CardHeader(_ref2) {
     isLogin = _ref2$isLogin === void 0 ? false : _ref2$isLogin,
     _ref2$showViewPin = _ref2.showViewPin,
     showViewPin = _ref2$showViewPin === void 0 ? false : _ref2$showViewPin,
-    onViewPinClick = _ref2.onViewPinClick;
+    onViewPinClick = _ref2.onViewPinClick,
+    showHolderName = _ref2.showHolderName,
+    holderName = _ref2.holderName,
+    onHolderClick = _ref2.onHolderClick;
   // 处理可能为0/1的布尔值
   var processedShowIcon = toBooleanValue(showIcon);
   var processedShowWalletName = toBooleanValue(showWalletName);
@@ -191,7 +198,10 @@ var CardHeader = function CardHeader(_ref2) {
     }
   })) : 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), processedShowViewPin && /*#__PURE__*/React.createElement("div", {
+  }, walletName)), showHolderName && /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-wallet-card-header-holder-name'),
+    onClick: onHolderClick
+  }, holderName), processedShowShopName && shopName && /*#__PURE__*/React.createElement("div", null, shopName), processedShowCardNo && cardNo && /*#__PURE__*/React.createElement("div", null, cardNo), processedShowViewPin && /*#__PURE__*/React.createElement("div", {
     className: "pisell-wallet-card-header-view-pin",
     onClick: onViewPinClick
   }, getText('walletCard-viewPin'), /*#__PURE__*/React.createElement(EyeOff, {
@@ -349,7 +359,11 @@ var WalletCard = function WalletCard(props) {
     onClick = mergedProps.onClick,
     className = mergedProps.className,
     style = mergedProps.style,
-    isGuide = mergedProps.isGuide;
+    isGuide = mergedProps.isGuide,
+    showHolderName = mergedProps.showHolderName,
+    holderType = mergedProps.holderType,
+    holder = mergedProps.holder,
+    onSetHolder = mergedProps.onSetHolder;
 
   // 处理可能为0/1的布尔值props
   var showIcon = toBooleanValue(mergedProps.showIcon);
@@ -413,6 +427,44 @@ var WalletCard = function WalletCard(props) {
       console.error('onViewPinClick方法需要传入');
     }
   };
+  var _renderMask = function _renderMask() {
+    if (holderType === 'customer') return null;
+    if (holderType === 'custom' && !(holder !== null && holder !== void 0 && holder.id)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "pisell-wallet-add-holder-mask"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "pisell-wallet-add-holder-mask-text"
+      }, getText('pisell2.wallet-card.add-holder-tip')), /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        className: "pisell-wallet-add-holder-mask-button"
+        //@ts-ignore
+        ,
+        onClick: function onClick() {
+          return onSetHolder === null || onSetHolder === void 0 ? void 0 : onSetHolder();
+        }
+      }, getText('pisell2.wallet-card.add-holder-button-text'), /*#__PURE__*/React.createElement(Iconfont, {
+        type: "pisell2-user-edit",
+        style: {
+          fontSize: 16
+        }
+      })));
+    }
+    return null;
+  };
+  var _showHolderName = useMemo(function () {
+    return holderType === 'custom' && showHolderName;
+  }, [holderType, showHolderName]);
+  var holderName = useMemo(function () {
+    if (holderType === 'custom' && !(holder !== null && holder !== void 0 && holder.id)) {
+      return '--';
+    }
+    return (holder === null || holder === void 0 ? void 0 : holder.name) || '';
+  }, [holderType, holder]);
+  var handleHolderClick = function handleHolderClick(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    onSetHolder === null || onSetHolder === void 0 || onSetHolder(holder);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-wallet-card-wrapper', className),
     style: style,
@@ -429,7 +481,7 @@ var WalletCard = function WalletCard(props) {
     style: {
       flexDirection: codeDirection === 'top' ? 'column-reverse' : 'column'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, _renderMask(), /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-wallet-card-content', mode, (!isLogin || isGuide) && 'pisell-wallet-card-guest-content'),
     style: backgroundStyle
   }, isLogin ? !isGuide ? /*#__PURE__*/React.createElement("div", {
@@ -452,7 +504,10 @@ var WalletCard = function WalletCard(props) {
     onCodeClick: handleCodeClick,
     isLogin: isLogin,
     showViewPin: showViewPin,
-    onViewPinClick: onViewPinClick
+    onViewPinClick: onViewPinClick,
+    showHolderName: _showHolderName,
+    holderName: holderName,
+    onHolderClick: handleHolderClick
   }), /*#__PURE__*/React.createElement(CardContent, {
     items: items,
     symbol: symbol