@pisell/private-materials 6.7.4 → 6.7.5

package/es/components/checkout/components/AdditionalModule/index.d.ts

@@ -8,6 +8,8 @@ interface AdditionalModuleProps {
     hasOrderNote?: boolean;
     disabled?: boolean;
     showCashPayment?: boolean;
+    isFullWidth?: boolean;
+    showMore?: boolean;
 }
-declare function AdditionalModule({ orderInfo, customAmount, handleButtonClick, hasOrderNote, disabled, showCashPayment, }: AdditionalModuleProps): JSX.Element;
+declare function AdditionalModule({ orderInfo, customAmount, handleButtonClick, hasOrderNote, disabled, showCashPayment, isFullWidth, showMore }: AdditionalModuleProps): JSX.Element;
 export default AdditionalModule;

package/es/components/checkout/components/AdditionalModule/index.js

@@ -18,7 +18,11 @@ function AdditionalModule(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$showCashPayment = _ref.showCashPayment,
-    showCashPayment = _ref$showCashPayment === void 0 ? false : _ref$showCashPayment;
+    showCashPayment = _ref$showCashPayment === void 0 ? false : _ref$showCashPayment,
+    _ref$isFullWidth = _ref.isFullWidth,
+    isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
+    _ref$showMore = _ref.showMore,
+    showMore = _ref$showMore === void 0 ? true : _ref$showMore;
   // 初始化国际化
   locales.init(localeTexts, getLocale());
 
@@ -27,6 +31,12 @@ function AdditionalModule(_ref) {
     key: 'send-link',
     label: locales.getText('pisell2.text.send-link'),
     icon: /*#__PURE__*/React.createElement(LinkOutlined, null)
+  }, {
+    key: 'print-receipt',
+    label: locales.getText('pisell2.text.print-receipt'),
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      type: "pisell2-printer"
+    })
   }];
   var Toast = useToast();
   return /*#__PURE__*/React.createElement("div", {
@@ -35,9 +45,9 @@ function AdditionalModule(_ref) {
     className: "additional-module-title"
   }, locales.getText('pisell2.text.others')), /*#__PURE__*/React.createElement("div", {
     className: "additional-module-buttons-container"
-  }, showCashPayment ?
+  }, showCashPayment && !isFullWidth ?
   /*#__PURE__*/
-  // Grid布局模式：两行布局（显示现金支付模块时）
+  // Grid布局模式：两行布局（显示现金支付模块且非全宽时）
   React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "additional-module-button-row"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -57,14 +67,14 @@ function AdditionalModule(_ref) {
   }))), /*#__PURE__*/React.createElement(Button, {
     className: "additional-module-button-base purple-theme",
     onClick: function onClick() {
-      handleButtonClick('print-receipt');
+      handleButtonClick('split-payment');
     },
     icon: /*#__PURE__*/React.createElement(Icon, {
-      type: "pisell2-printer",
+      type: "pisell2-coins-01",
       className: "additional-module-button-icon"
     }),
     size: "large"
-  }, locales.getText('pisell2.text.print-receipt'))), /*#__PURE__*/React.createElement("div", {
+  }, locales.getText('split.payment'))), /*#__PURE__*/React.createElement("div", {
     className: "additional-module-button-row"
   }, /*#__PURE__*/React.createElement(Button, {
     className: "additional-module-button-base purple-theme",
@@ -86,7 +96,7 @@ function AdditionalModule(_ref) {
     icon: /*#__PURE__*/React.createElement(ClockCircleOutlined, {
       className: "additional-module-button-icon"
     })
-  }, locales.getText('pisell2.text.save-pay-later')), /*#__PURE__*/React.createElement(Dropdown, {
+  }, locales.getText('pisell2.text.save-pay-later')), showMore && /*#__PURE__*/React.createElement(Dropdown, {
     menu: {
       items: moreMenuItems,
       onClick: function onClick(_ref2) {
@@ -98,6 +108,12 @@ function AdditionalModule(_ref) {
           } else {
             Toast.fail(locales.getText('pisell2.text.order-no-payment-cannot-send-link'));
           }
+        } else if (key === 'print-receipt') {
+          handleButtonClick('print-receipt');
+        } else if (key === 'split-payment') {
+          handleButtonClick('split-payment');
+        } else if (key === 'print-receipt') {
+          handleButtonClick('print-receipt');
         }
       }
     },
@@ -118,9 +134,29 @@ function AdditionalModule(_ref) {
       type: "pisell2-dots-vertical",
       size: 20
     })
-  })))) :
+  }))), !showMore && /*#__PURE__*/React.createElement("div", {
+    className: "additional-module-button-row"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "additional-module-button-base purple-theme",
+    onClick: function onClick() {
+      handleButtonClick('send-link');
+    },
+    disabled: disabled,
+    size: "large",
+    icon: /*#__PURE__*/React.createElement(LinkOutlined, null)
+  }, locales.getText('pisell2.text.send-link')), /*#__PURE__*/React.createElement(Button, {
+    className: "additional-module-button-base purple-theme",
+    onClick: function onClick() {
+      handleButtonClick('print-receipt');
+    },
+    disabled: disabled,
+    size: "large",
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      type: "pisell2-printer"
+    })
+  }, locales.getText('pisell2.text.print-receipt')))) :
   /*#__PURE__*/
-  // Flex布局模式：一行布局（不显示现金支付模块时）
+  // Flex布局模式：一行布局（不显示现金支付模块或强制全宽时）
   React.createElement("div", {
     className: "additional-module-button-row"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -140,14 +176,14 @@ function AdditionalModule(_ref) {
   }))), /*#__PURE__*/React.createElement(Button, {
     className: "additional-module-button-base purple-theme",
     onClick: function onClick() {
-      handleButtonClick('print-receipt');
+      handleButtonClick('split-payment');
     },
     size: "large",
     icon: /*#__PURE__*/React.createElement(Icon, {
-      type: "pisell2-printer",
+      type: "pisell2-coins-01",
       className: "additional-module-button-icon"
     })
-  }, locales.getText('pisell2.text.print-receipt')), /*#__PURE__*/React.createElement(Button, {
+  }, locales.getText('split.payment')), /*#__PURE__*/React.createElement(Button, {
     className: "additional-module-button-base purple-theme",
     onClick: function onClick() {
       handleButtonClick('manual-discount');
@@ -179,6 +215,10 @@ function AdditionalModule(_ref) {
           } else {
             Toast.fail(locales.getText('pisell2.text.order-no-payment-cannot-send-link'));
           }
+        } else if (key === 'split-payment') {
+          handleButtonClick('split-payment');
+        } else if (key === 'print-receipt') {
+          handleButtonClick('print-receipt');
         }
       }
     },

package/es/components/checkout/components/AmountSummary/index.js

@@ -9,7 +9,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 { useState, useEffect, useMemo } from 'react';
-import { Button, Dropdown, Popover } from 'antd';
+import { Button, Dropdown } from 'antd';
 import { CheckCircleOutlined, PieChartOutlined } from '@ant-design/icons';
 import { Edit05 } from '@pisell/icon';
 import { PisellModal } from '@pisell/materials';
@@ -18,7 +18,8 @@ import Decimal from 'decimal.js';
 import checkoutLocales from "../../locales";
 import PaymentDetailModal from "../PaymentDetailModal";
 import PisellPriceKeyboardPopover from "../../../../pro/pisellSimplePriceKeyboardPopover";
-import { PaymentKeyboard } from "../../../../pro/priceKeyboard";
+// import { PaymentKeyboard } from '../../../../pro/priceKeyboard';
+
 import "./index.less";
 import classNames from 'classnames';
 import useEngineContext from "../../../../hooks/useEngineContext";
@@ -503,12 +504,12 @@ function AmountSummary(_ref2) {
     var syncedVoucherAmount = paymentItems === null || paymentItems === void 0 ? void 0 : paymentItems.reduce(function (acc, item) {
       // 如果当前是普通支付，则减去order_payment_type不为 deposit的支付项
       // 如果当前是定金支付，则减去order_payment_type为 deposit的支付项
-      if (item.isSynced && (paymentType === 'regular' && item.order_payment_type !== 'deposit' || paymentType === 'deposit' && item.order_payment_type === 'deposit')) {
+      if ((item.isSynced || item.voucher_id) && (paymentType === 'regular' && item.order_payment_type !== 'deposit' || paymentType === 'deposit' && item.order_payment_type === 'deposit')) {
         return acc.plus(item.amount).plus(Number(item.rounding_amount) > 0 ? 0 : item.rounding_amount || 0);
       }
       return acc;
     }, new Decimal(0)).toNumber();
-    balanceDecimal = balanceDecimal.minus(syncedVoucherAmount);
+    balanceDecimal = new Decimal(Math.abs(balanceDecimal.minus(new Decimal(syncedVoucherAmount)).toNumber()));
     // if (walletPassData?.selectedDiscountList && walletPassData.selectedDiscountList.length > 0) {
     //   walletPassData?.availableDiscountList?.forEach((discountItem: any) => {
     //     discountItem.appliedProductDetails?.forEach((productDetail: any) => {
@@ -639,8 +640,9 @@ function AmountSummary(_ref2) {
     return balanceDueAmount !== customAmount && Number(balanceDueAmount) > 0 && Number(customAmount) > 0;
   }, [customAmount, balanceDueAmount]);
   var handleChangeDepositAmount = function handleChangeDepositAmount(value) {
-    console.log('handleChangeDepositAmount', value);
-    checkoutModule === null || checkoutModule === void 0 || checkoutModule.setDepositAmountAsync(value);
+    var valueStr = String(value);
+    console.log('handleChangeDepositAmount', valueStr);
+    checkoutModule === null || checkoutModule === void 0 || checkoutModule.setDepositAmountAsync(valueStr);
   };
   var hasDepositPayment = useMemo(function () {
     return paymentItems === null || paymentItems === void 0 ? void 0 : paymentItems.some(function (item) {
@@ -778,76 +780,7 @@ function AmountSummary(_ref2) {
     hideDecimalForWholeNumbers: false,
     useThousandsSeparator: true,
     showCurrencySymbol: true
-  })))), !shouldShowConfirmMode() && (showCancelSplitPayment ? /*#__PURE__*/React.createElement(Button, {
-    className: classNames('cancel-split-payment-button'),
-    onClick: function onClick() {
-      return onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(balanceDueAmount);
-    }
-  }, getText('split.cancel') || '取消部\n分支付') : /*#__PURE__*/React.createElement(Popover, {
-    content: /*#__PURE__*/React.createElement("div", {
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    }, /*#__PURE__*/React.createElement(PaymentKeyboard
-    // 原始值：此支付阶段的待支付金额，reset时还原为此值
-    , {
-      paymentOriginalValue: balanceDueAmount,
-      paymentDefaultValue: String(customAmount || 0),
-      enableExceedMaxAmount: false,
-      payment: {
-        enable: true
-      },
-      surcharge: {
-        enable: false
-      },
-      surchargeDefaultValue: {
-        percent: '0',
-        fixed: '0'
-      },
-      selectType: "light",
-      onChange: function onChange(value) {
-        console.log(value);
-      },
-      doneText: getText('confirm'),
-      onPay: function onPay(args) {
-        console.log(args);
-        // 处理支付逻辑
-        setIsKeyboardVisible(false);
-        handleKeyboardConfirm(args.amount);
-      }
-    })),
-    trigger: "click",
-    open: isKeyboardVisible,
-    onOpenChange: setIsKeyboardVisible,
-    placement: "bottom",
-    overlayClassName: "payment-keyboard-popover",
-    arrow: true,
-    destroyTooltipOnHide: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: classNames('split-payment-button')
-  }, getText('split.payment') || '拆分支付')))
-  // <PisellPriceKeyboardPopover
-  //   value={(() => {
-  //     try {
-  //       return new Decimal(currentAmount || '0').toNumber();
-  //     } catch {
-  //       return 0;
-  //     }
-  //   })()}
-  //   // onChange={handleKeyboardConfirm}
-  //   onConfirm={handleKeyboardConfirm}
-  //   // onCancel={handleKeyboardCancel}
-  //   showCurrencySymbol={true}
-  //   useThousandsSeparator={false}
-  //   selectType="dark"
-  //   overlayClassName="amount-summary-keyboard-popover"
-  // >
-  //   {/* 右侧： 拆分支付按钮 */}
-  //   <Button className={classNames('split-payment-button')}>
-  //     {getText('split.payment') || '拆分支付'}
-  //   </Button>
-  // </PisellPriceKeyboardPopover>
-  , /*#__PURE__*/React.createElement(PisellModal, {
+  })))), /*#__PURE__*/React.createElement(PisellModal, {
     open: isPaymentDetailOpen,
     onCancel: handlePaymentDetailClose,
     footer: null,

package/es/components/checkout/components/AmountSummary/index.less

@@ -226,7 +226,7 @@
     border-radius: 16px;
     padding: 0 16px 0 16px;
     color: #1a1a1a;
-    width: 350px;
+    width: 400px;
     min-width: 200px;
     height: 80px;
     display: flex;
@@ -248,7 +248,6 @@
 
   .balance-due-label {
     font-size: 16px;
-    color: #7f56da;
     font-weight: 400;
     line-height: 1.5;
     margin-bottom: 4px;
@@ -256,7 +255,7 @@
 
   .balance-due-amount {
     font-size: 14px;
-    font-weight: 400;
+    font-weight: 600;
     color: #7f56da;
     line-height: 0.75;
     text-decoration: underline;
@@ -272,13 +271,13 @@
   .pay-text {
     font-size: 16px;
     font-weight: 500;
-    color: #7f56da;
     letter-spacing: 0.09375em;
+    margin-top: 12px;
   }
 
   .pay-amount {
-    font-size: 32px;
-    font-weight: 400;
+    font-size: 36px;
+    font-weight: 600;
     color: #1e1830;
     line-height: 0.75;
   }

package/es/components/checkout/components/CashPaymentModule/index.js

@@ -32,7 +32,9 @@ export function CashPaymentModule(_ref) {
     _ref$balanceDueTotalA = _ref.balanceDueTotalAmount,
     balanceDueTotalAmount = _ref$balanceDueTotalA === void 0 ? '0' : _ref$balanceDueTotalA,
     _ref$syncingLock = _ref.syncingLock,
-    syncingLock = _ref$syncingLock === void 0 ? false : _ref$syncingLock;
+    syncingLock = _ref$syncingLock === void 0 ? false : _ref$syncingLock,
+    _ref$shortcutsSize = _ref.shortcutsSize,
+    shortcutsSize = _ref$shortcutsSize === void 0 ? 'default' : _ref$shortcutsSize;
   var _useState = useState(customAmount || ''),
     _useState2 = _slicedToArray(_useState, 2),
     amount = _useState2[0],
@@ -258,7 +260,8 @@ export function CashPaymentModule(_ref) {
       };
     }),
     onReset: handleReset,
-    onEnter: syncingLock ? undefined : handleCashPay
+    onEnter: syncingLock ? undefined : handleCashPay,
+    shortcutsSize: shortcutsSize
   });
 }
 export default CashPaymentModule;

package/es/components/checkout/components/PaymentOptionsModule/PaymentMethodItem.d.ts

@@ -24,6 +24,8 @@ export interface PaymentMethodItemProps {
     onClick?: (method: ExtendedPaymentMethod) => void;
     /** 获取文本的函数 */
     getText?: (key: string, fallback?: string) => string;
+    /** 大小 */
+    size?: 'default' | 'large';
 }
 declare const PaymentMethodItem: React.FC<PaymentMethodItemProps>;
 export default PaymentMethodItem;

package/es/components/checkout/components/PaymentOptionsModule/PaymentMethodItem.js

@@ -27,7 +27,9 @@ var PaymentMethodItem = function PaymentMethodItem(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onClick = _ref.onClick,
-    getText = _ref.getText;
+    getText = _ref.getText,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size;
   // 控制键盘弹窗显示状态
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -151,6 +153,9 @@ var PaymentMethodItem = function PaymentMethodItem(_ref) {
       'payment-options-module-pointer': !disabled,
       'payment-options-module-disabled': disabled
     }),
+    style: {
+      height: size === 'large' ? '82px' : '62px'
+    },
     onClick: showKeyboard,
     type: "button",
     disabled: disabled

package/es/components/checkout/components/PaymentOptionsModule/index.js

@@ -10,7 +10,7 @@ import checkoutLocales from "../../locales";
 
 // 扩展 PaymentOptionsModule Props 接口
 
-var SHOW_METHODS_CODE = ['EFTPOS_LINKLY', 'EFTPOS', 'EFTPOS_TYRO', 'EFTPOS_WINDCAVE', 'EFTPOS_PAYO'];
+export var SHOW_METHODS_CODE = ['EFTPOS_LINKLY', 'EFTPOS', 'EFTPOS_TYRO', 'EFTPOS_WINDCAVE', 'EFTPOS_PAYO'];
 function PaymentOptionsModule(_ref) {
   var _context$appHelper, _context$appHelper$ge, _context$appHelper$ge2, _context$appHelper$ut;
   var amountSymbol = _ref.amountSymbol,
@@ -92,6 +92,7 @@ function PaymentOptionsModule(_ref) {
     }
   }, filteredPaymentMethods.map(function (method) {
     return /*#__PURE__*/React.createElement(PaymentMethodItem, {
+      size: (filteredPaymentMethods === null || filteredPaymentMethods === void 0 ? void 0 : filteredPaymentMethods.length) === 2 ? 'large' : 'default',
       key: method.id,
       method: method,
       amountSymbol: amountSymbol,

package/es/components/checkout/components/PaymentOptionsModule/index.less

@@ -234,6 +234,10 @@
 }
 
 .payment-options-module-pay-button{
+  width: 118px;
+  height: 40px;
+  font-weight: 600;
+  font-size: 18px;
   background: var(--theme-color, #7F56DA);
   &:disabled {
     background: #D0D5DD;

package/es/components/checkout/components/PaymentResultToast/PaymentResultToastProvider.js

@@ -263,6 +263,13 @@ var GlobalToastManager = /*#__PURE__*/function () {
 
         // 更新容器样式，带有平滑动画效果
         if (instance.container) {
+          // 如果开启了遮罩，使用居中定位，不更新位置
+          var hasMask = instance.container.getAttribute('data-mask') === 'true';
+          if (hasMask) {
+            // mask 模式下保持居中，不更新位置
+            return;
+          }
+
           // 添加动画类名表示正在移动
           instance.container.classList.add('toast-moving');
           instance.container.style.position = 'fixed';
@@ -312,30 +319,46 @@ var GlobalToastManager = /*#__PURE__*/function () {
         autoClose: config.autoClose,
         autoCloseDelay: config.autoCloseDelay || 30,
         showCountdownProgress: config.showCountdownProgress,
+        clickOutsideToClose: config.clickOutsideToClose,
         onCountdownComplete: config.onCountdownComplete,
         onClose: function onClose() {
           var _config$onClose2;
           (_config$onClose2 = config.onClose) === null || _config$onClose2 === void 0 || _config$onClose2.call(config);
           _this2.removeToast(id);
         },
-        closable: config.closable !== undefined ? config.closable : DEFAULT_TOAST_CONFIG.closable
+        closable: config.closable !== undefined ? config.closable : DEFAULT_TOAST_CONFIG.closable,
+        mask: config.mask || false
       });
 
       // 创建容器
       var container = document.createElement('div');
       container.setAttribute('data-toast-id', id);
+      // 如果开启遮罩，添加 data-mask 属性用于 CSS 样式区分
+      if (config.mask) {
+        container.setAttribute('data-mask', 'true');
+      }
 
       // 计算动态的bottom位置
       var dynamicBottomOffset = this.calculateAndCacheBottomOffset();
       // const centerOffset = this.calculateAndCacheCenterOffset();
-
-      // 设置初始样式确保左下角定位
-      // 新Toast使用动态计算的位置
       container.style.position = 'fixed';
-      container.style.left = "".concat(this.LEFT_OFFSET, "px");
-      container.style.bottom = "".concat(dynamicBottomOffset, "px"); // 使用动态计算的位置
-      container.style.top = 'auto';
-      container.style.right = 'auto';
+      // 如果开启遮罩，则需要居中
+      if (config.mask) {
+        container.style.left = '50%';
+        container.style.top = '50%';
+        container.style.transform = 'translate(-50%, -50%)';
+        container.style.bottom = 'auto';
+        container.style.right = 'auto';
+      } else {
+        // 设置初始样式确保左下角定位
+        // 新Toast使用动态计算的位置
+        container.style.left = "".concat(this.LEFT_OFFSET, "px");
+        container.style.bottom = "".concat(dynamicBottomOffset, "px"); // 使用动态计算的位置
+        container.style.top = 'auto';
+        container.style.right = 'auto';
+        container.style.transform = 'none';
+      }
+
       // 移除强制的z-index设置，让Toast使用默认层级
       // container.style.zIndex = `${(finalConfig.zIndex || 2000) + this.instances.size}`;
 

package/es/components/checkout/components/PaymentResultToast/index.js

@@ -269,8 +269,8 @@ var PaymentResultToast = /*#__PURE__*/memo(function (props) {
     mask: mask,
     maskClosable: maskClosable,
     closable: false,
-    className: getBaseClassName("".concat(className, " ").concat(statusClassName)),
-    wrapClassName: "toast-modal-wrap",
+    className: getBaseClassName("".concat(className, " ").concat(statusClassName, " ").concat(mask ? 'payment-result-toast-with-mask' : '')),
+    wrapClassName: "toast-modal-wrap ".concat(mask ? 'toast-modal-wrap-with-mask' : ''),
     style: _objectSpread(_objectSpread({}, height ? {
       height: "".concat(height, "px")
     } : {}), {}, {
@@ -297,12 +297,12 @@ var PaymentResultToast = /*#__PURE__*/memo(function (props) {
     ,
     transitionName: "",
     maskTransitionName: ""
-    // 禁用居中定位
+    // mask 模式下使用居中定位，非 mask 模式下禁用居中
     ,
-    centered: false
-    // 使用自定义getContainer确保渲染到正确的位置
+    centered: mask
+    // mask 模式下渲染到 body，非 mask 模式下渲染到容器内
     ,
-    getContainer: false
+    getContainer: mask ? undefined : false
   }, /*#__PURE__*/React.createElement("div", {
     ref: modalContentRef,
     className: getClassName('content', statusClassName),

package/es/components/checkout/components/PaymentResultToast/index.less

@@ -17,6 +17,7 @@
   margin: 0 !important;
   pointer-events: none !important; // 让Toast Modal Wrap点击穿透
 
+  // 非 mask 模式下的样式
   .ant-modal {
     position: static !important;
     top: auto !important;
@@ -32,11 +33,47 @@
   }
 }
 
+// mask 模式下的全局样式（Modal 渲染到 body）
+.toast-modal-wrap-with-mask {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  pointer-events: auto !important; // mask 模式下需要响应点击
+
+  .ant-modal-mask {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+  }
+
+  .ant-modal {
+    position: relative !important;
+    top: auto !important;
+    left: auto !important;
+    transform: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    width: auto !important;
+    max-width: none !important;
+    pointer-events: auto !important; // Modal 内容可以响应点击
+  }
+}
+
 // Toast容器样式 - 用于多实例定位
 [data-toast-id] {
   z-index: 1000;
   position: fixed !important;
-  left: 96px !important;
   /* 注意：不设置bottom的!important，让JavaScript可以动态更新 */
   /* 移除强制的z-index设置，让Toast使用默认层级 */
   pointer-events: none !important; // 让Toast容器本身点击穿透
@@ -45,6 +82,23 @@
   width: auto !important;
   height: auto !important;
 
+  // 非 mask 模式下使用左下角定位
+  &:not([data-mask="true"]) {
+    left: 96px !important;
+  }
+
+  // mask 模式下，Modal 会渲染到 body，容器只作为占位符
+  // 不需要设置定位，因为 Modal 已经独立渲染
+  &[data-mask="true"] {
+    // 容器在 mask 模式下不需要定位，Modal 会独立渲染到 body
+    position: static !important;
+    left: auto !important;
+    top: auto !important;
+    bottom: auto !important;
+    right: auto !important;
+    transform: none !important;
+  }
+
   /* 新Toast进入动画 */
   &.toast-entering {
     opacity: 0;
@@ -81,42 +135,49 @@
   }
 
   // 强制覆盖Ant Design Modal的默认定位
-  .ant-modal-wrap {
-    position: static !important;
-    pointer-events: none !important; // 让Modal wrap点击穿透
-  }
+  // 非 mask 模式下使用 static 定位
+  &:not([data-mask="true"]) {
+    .ant-modal-wrap {
+      position: static !important;
+      pointer-events: none !important; // 让Modal wrap点击穿透
+    }
 
-  .ant-modal {
-    position: static !important;
-    top: auto !important;
-    left: auto !important;
-    transform: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    pointer-events: none !important; // 让Modal本身点击穿透
+    .ant-modal {
+      position: static !important;
+      top: auto !important;
+      left: auto !important;
+      transform: none !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      pointer-events: none !important; // 让Modal本身点击穿透
+    }
   }
 
+  // mask 模式下，Modal 会渲染到 body，容器内的样式不再需要
+  // 样式已通过全局 .toast-modal-wrap-with-mask 类名设置
 
-  // 覆盖所有可能的Ant Design Modal定位
-  .ant-modal-wrap {
-    position: static !important;
-    display: block !important;
-    overflow: visible !important;
-    pointer-events: none !important; // 让Modal wrap点击穿透
-  }
+  // 覆盖所有可能的Ant Design Modal定位（非 mask 模式）
+  &:not([data-mask="true"]) {
+    .ant-modal-wrap {
+      position: static !important;
+      display: block !important;
+      overflow: visible !important;
+      pointer-events: none !important; // 让Modal wrap点击穿透
+    }
 
-  .ant-modal {
-    position: static !important;
-    top: auto !important;
-    left: auto !important;
-    right: auto !important;
-    bottom: auto !important;
-    transform: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    width: 100% !important;
-    max-width: none !important;
-    pointer-events: none !important; // 让Modal点击穿透
+    .ant-modal {
+      position: static !important;
+      top: auto !important;
+      left: auto !important;
+      right: auto !important;
+      bottom: auto !important;
+      transform: none !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      width: 100% !important;
+      max-width: none !important;
+      pointer-events: none !important; // 让Modal点击穿透
+    }
   }
 
   // Toast进入动画
@@ -401,7 +462,7 @@
   // 副标题样式
   &-subtitle {
     &-text {
-      font-size: 30px; // 与图片一致
+      font-size: 48px; // 与图片一致
       font-weight: 600; // 与图片一致
       text-shadow: none; // 移除阴影