@pisell/private-materials 6.5.2 → 6.5.4

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

@@ -1,39 +1,254 @@
-@primary-color: rgba(16, 24, 40, 0.90); // 与图片一致的深蓝灰背景
+@primary-color: rgba(52, 64, 84, 0.8); // 毛玻璃效果的背景色
 @success-color: #47CD89; // 与图片一致的成功文字颜色
-@progress-color: #079455; // 与图片一致的进度条颜色
-@warning-color: #F79009; // 与图片一致的找零金额颜色
+@progress-color: #079455; // 与DOM样式一致的进度条颜色
+@warning-color: #F79009; // 与DOM样式一致的部分支付颜色
 @error-color: #F97066; // 失败状态的红色
 @paid-color: #47CD89; // 已支付金额的绿色（与成功颜色一致）
 @text-color-inverse: #ffffff;
-@border-radius-base: 10px; // 与图片一致的圆角
+@border-radius-base: 16px; // 更新为rounded-2xl的圆角
+
+
+// Toast Modal Wrap 特定样式
+.toast-modal-wrap {
+  position: static !important;
+  display: block !important;
+  overflow: visible !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  pointer-events: none !important; // 让Toast 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点击穿透
+  }
+}
+
+// Toast容器样式 - 用于多实例定位
+[data-toast-id] {
+  z-index: 1000;
+  position: fixed !important;
+  left: 96px !important;
+  /* 注意：不设置bottom的!important，让JavaScript可以动态更新 */
+  /* 移除强制的z-index设置，让Toast使用默认层级 */
+  pointer-events: none !important; // 让Toast容器本身点击穿透
+  /* 优化的动画过渡效果 */
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
+  width: auto !important;
+  height: auto !important;
+
+  /* 新Toast进入动画 */
+  &.toast-entering {
+    opacity: 0;
+    transform: translateY(100%) scale(0.95);
+    animation: toast-slide-up 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  }
+
+  /* Toast位移动画 */
+  &.toast-moving {
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
+  }
+
+  /* Toast退出动画 */
+  &.toast-exiting {
+    opacity: 0;
+    transform: translateX(-100%) scale(0.9);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1) !important;
+  }
+
+  // 全局Ant Design Modal样式覆盖
+  .ant-modal-content {
+    background: transparent !important;
+    box-shadow: none !important;
+    border-radius: @border-radius-base !important;
+  }
+
+  .ant-modal-body {
+    padding: 0 !important;
+    background: transparent !important;
+  }
+
+  .ant-modal-header {
+    display: none !important;
+  }
+
+  // 强制覆盖Ant Design Modal的默认定位
+  .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 Design Modal定位
+  .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点击穿透
+  }
+
+  // Toast进入动画
+  &.toast-enter {
+    opacity: 0;
+    transform: translateX(-100%) scale(0.95);
+  }
+
+  &.toast-enter-active {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  // Toast退出动画
+  &.toast-exit {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+
+  &.toast-exit-active {
+    opacity: 0;
+    transform: translateX(-100%) scale(0.95);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
 
 
 
 .payment-result-toast {
-  width: 680px !important;
+  width: auto !important;
+
+  // 全局Ant Design Modal样式覆盖
+  .ant-modal-content {
+    background: transparent !important;
+    box-shadow: none !important;
+    border-radius: @border-radius-base !important;
+  }
+
+  .ant-modal-body {
+    padding: 0 !important;
+    background: transparent !important;
+  }
+
+  .ant-modal-header {
+    display: none !important;
+  }
+
+  // 强制覆盖Ant Design Modal的默认定位
+  .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本身点击穿透
+  }
+
+
+  // 确保Modal不会被Ant Design默认定位影响
+  .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;
+    transform: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100% !important;
+    max-width: none !important;
+    pointer-events: none !important; // 让Modal点击穿透
+  }
+
+  .ant-modal-close-x {
+    color: @text-color-inverse !important;
+  }
+
+  .ant-dropdown-trigger {
+    padding: 8px 12px !important;
+    font-size: 22px !important;
+    background: transparent !important;
+    color: @text-color-inverse !important;
+    box-sizing: content-box !important;
+  }
 
   .pisell-lowcode-space-item {
+    pointer-events: auto !important; // 确保按钮组项目可以接收点击事件
+
     .pisell-lowcode-dropdown-trigger {
-      width: 44px !important;
-      height: 44px !important;
-      box-sizing: content-box !important;
+      width: 56px !important; // 调整为xl尺寸
+      height: 56px !important;
+      box-sizing: border-box !important;
+      pointer-events: auto !important; // 确保下拉按钮可以接收点击事件
+
       .payment-result-toast-action-icon {
-        font-size: 44px;
+        font-size: 20px;
       }
     }
   }
 
-  .pisell-lowcode-modal-content {
-    background: @primary-color !important;
+  .pisell-lowcode-modal-content,
+  .ant-modal-content {
+    background: transparent !important; // 让content区域处理背景
     border-radius: @border-radius-base !important;
-    padding: 0 !important;
-    overflow: hidden !important;
-    width: 680px !important;
-
-    .pisell-lowcode-modal-header {
+    padding: 0 !important; // 让content区域处理padding
+    overflow: visible !important;
+    width: auto !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; // 添加阴影效果
+    border: none !important; // 移除边框
+    pointer-events: none !important; // 让Modal content点击穿透
+
+    .pisell-lowcode-modal-header,
+    .ant-modal-header {
       display: none !important;
     }
 
+    // 添加关闭按钮样式
+    .pisell-lowcode-modal-close,
+
+
     .pisell-lowcode-dropdown-trigger {
       flex: 0 0 auto !important; // 更多按钮保持固定宽度，不跟随等比例分配
       width: 60px !important; // 明确设置更多按钮的固定宽度
@@ -52,6 +267,7 @@
       padding: 8px !important;
       white-space: nowrap !important; // 防止文字换行
       height: 44px !important; // 与其他按钮保持一致的高度
+      pointer-events: auto !important; // 确保下拉按钮可以接收点击事件
 
       .anticon-more {
         font-size: 44px;
@@ -59,60 +275,134 @@
     }
   }
 
-  .pisell-lowcode-modal-body {
+  .pisell-lowcode-modal-body,
+  .ant-modal-body {
     padding: 0;
-    background: @primary-color;
+    background: transparent !important; // 让内容容器的背景透明，使用content的背景
+    pointer-events: none !important; // 让Modal body点击穿透
   }
 
   &-content {
-    padding: 48px 32px 32px;
+    padding: 16px !important; // 添加内边距
     text-align: center;
-    min-height: 300px;
+    min-height: auto;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     position: relative;
+    gap: 16px; // 添加元素间隙
+    background: @primary-color !important; // 毛玻璃背景
+    border-radius: @border-radius-base !important;
+    backdrop-filter: blur(12px) !important;
+    -webkit-backdrop-filter: blur(12px) !important;
+    overflow: hidden !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    pointer-events: none !important; // 内容区域点击穿透
+
+    // Toast内容进入动画
+    /* 初始状态：隐藏在底部 */
+    opacity: 0;
+    transform: translateY(100%) scale(0.95);
+    animation: toast-slide-up 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 
     .pisell-lowcode-flex-vertical {
       margin-bottom: 0 !important;
+      pointer-events: auto !important; // 按钮组容器可点击
+    }
+
+    // 确保所有子元素默认穿透，只有按钮类元素可点击
+    >* {
+      pointer-events: none !important;
+    }
+
+    // 按钮相关元素可点击
+    button,
+    a,
+    [role="button"],
+    .ant-btn,
+    .pisell-lowcode-button,
+    .pisell-lowcode-space,
+    .pisell-lowcode-space-item,
+    .pisell-lowcode-dropdown-trigger {
+      pointer-events: auto !important;
+    }
+  }
+
+  // Modal关闭按钮样式 - 与标题内容垂直居中对齐
+  .ant-modal-close {
+    position: absolute !important;
+    top: 20px !important; // 大约与标题内容的中心位置对齐
+    right: 16px !important;
+    z-index: 1 !important; // 使用相对z-index，确保在内容之上即可
+    pointer-events: auto !important; // 确保关闭按钮可以接收点击事件
+
+    .ant-modal-close-x {
+      font-size: 40px !important;
+      width: 40px !important;
+      height: 40px !important;
+      background: transparent !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      color: @text-color-inverse !important;
+      line-height: 1 !important;
+      pointer-events: auto !important; // 确保关闭按钮内部元素可以接收点击事件
+
+      .anticon {
+        font-size: 40px !important;
+        pointer-events: auto !important; // 确保图标可以接收点击事件
+      }
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.1) !important;
+        transform: scale(1.05) !important;
+        transition: all 0.2s ease !important;
+      }
     }
   }
 
   // 成功状态标题
   &-success-title {
     color: @success-color;
-    font-size: 20px; // 与图片一致
-    font-weight: 600;
-    line-height: 30px; // 与图片一致
-    margin: 0;
+    font-size: 30px !important; // text-3xl对应30px
+    font-weight: 600 !important; // font-semibold
+    margin: 0 !important;
+    font-family: 'Inter', sans-serif !important;
   }
 
   // 失败状态标题
   &-failed-title {
     color: @error-color;
-    font-size: 20px;
-    font-weight: 600;
-    line-height: 30px;
-    margin: 0;
+    font-size: 30px !important;
+    font-weight: 600 !important;
+    margin: 0 !important;
+    font-family: 'Inter', sans-serif !important;
   }
 
   // Wallet Pass失败状态标题
   &-wallet-pass-failed-title {
     color: @error-color;
-    font-size: 20px;
-    font-weight: 600;
-    line-height: 30px;
-    margin: 0;
+    font-size: 30px !important;
+    font-weight: 600 !important;
+    margin: 0 !important;
+    font-family: 'Inter', sans-serif !important;
+  }
+
+  // 部分支付状态标题
+  &-partially-paid-title {
+    color: @warning-color !important; // amber-500颜色
+    font-size: 30px !important; // text-3xl
+    font-weight: 600 !important; // font-semibold
+    margin: 0 !important;
+    font-family: 'Inter', sans-serif !important;
   }
 
   // 副标题样式
   &-subtitle {
     &-text {
-      font-size: 36px; // 与图片一致
+      font-size: 30px; // 与图片一致
       font-weight: 600; // 与图片一致
-      line-height: 44px; // 与图片一致
-      margin: 16px 0 0;
       text-shadow: none; // 移除阴影
 
       // 已支付金额样式 (成功-无找零)
@@ -132,7 +422,7 @@
 
       // 部分支付金额样式
       &.partially-paid {
-        color: @warning-color;
+        color: @warning-color !important;
       }
     }
   }
@@ -142,6 +432,7 @@
     bottom: 0;
     left: 0;
     right: 0;
+    width: 100%; // 使用100%宽度
 
     &-text {
       display: none; // 图片中没有显示倒计时文字
@@ -149,15 +440,18 @@
 
     &-progress {
       width: 100%;
-      height: 8px;
+      height: 6px; // h-1.5对应6px
       background: transparent;
-      position: relative;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
       border-radius: 0; // 确保无圆角
       overflow: hidden;
 
       &-bar {
         height: 100%;
-        background: @progress-color; // 使用与图片一致的深绿色
+        background: @progress-color !important; // emerald-600颜色
         position: relative;
         border-radius: 0; // 确保无圆角
         width: 100%; // 初始宽度为100%
@@ -174,33 +468,38 @@
   &-actions {
     display: flex;
     gap: 16px;
-    margin-top: 24px;
+    margin-top: 0; // 去除上边距
     width: 100%;
-    max-width: 500px; // 增加最大宽度以适应自适应按钮
+    max-width: none; // 去除最大宽度限制
     justify-content: center; // 按钮居中对齐
+    align-items: center;
+    pointer-events: auto !important; // 按钮区域可以接收点击事件
   }
 
   &-action-button {
-    flex: 1; // 改为等比例分配宽度，使前三个按钮宽度相同
-    border: 1px solid @text-color-inverse;
-    background: transparent;
-    color: @text-color-inverse;
-    border-radius: @border-radius-base;
-    font-size: 20px;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    padding: 8px 16px;
-    white-space: nowrap; // 防止文字换行
-    height: 44px !important;
-    box-sizing: content-box;
+    flex: 1; // Print Receipt按钮使用flex: 1
+    border: 1px solid rgba(209, 213, 219, 1) !important; // outline-gray-300
+    background: transparent !important;
+    color: @text-color-inverse !important;
+    border-radius: 8px !important; // rounded-lg
+    font-size: 16px !important; // text-base
+    font-weight: 600 !important; // font-semibold
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important; // gap-2
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    padding: 12px 20px !important; // px-5 py-3
+    white-space: nowrap !important; // 防止文字换行
+    height: auto !important;
+    box-sizing: border-box !important;
+    font-family: 'Inter', sans-serif !important;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    pointer-events: auto !important; // 确保按钮可以接收点击事件
 
     .payment-result-toast-action-icon {
-      font-size: 44px;
+      font-size: 20px;
     }
 
     // 重试按钮特殊样式
@@ -243,28 +542,31 @@
   }
 
   &-more-button {
-    flex: 0 0 auto !important; // 更多按钮保持固定宽度，不跟随等比例分配
-    width: 60px !important;
-    height: 44px !important; // 与其他按钮保持一致的高度
-    border: 1px solid @text-color-inverse;
-    background: transparent;
-    color: @text-color-inverse;
-    border-radius: @border-radius-base;
-    font-size: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.3s ease;
+    flex: 0 0 auto !important; // 更多按钮保持固定宽度
+    width: auto !important;
+    height: auto !important;
+    border: 1px solid rgba(209, 213, 219, 1) !important; // outline-gray-300
+    background: transparent !important;
+    color: @text-color-inverse !important;
+    border-radius: 8px !important; // rounded-lg
+    font-size: 20px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    padding: 14px !important; // p-3.5
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    pointer-events: auto !important; // 确保更多按钮可以接收点击事件
 
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      background: rgba(255, 255, 255, 0.1) !important;
+      transform: translateY(-2px) !important;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
     }
 
     &:active {
-      transform: translateY(0);
+      transform: translateY(0) !important;
     }
   }
 }
@@ -292,9 +594,75 @@
   }
 }
 
+// 新Toast从底部滑入动画
+@keyframes toast-slide-up {
+  0% {
+    opacity: 0;
+    transform: translateY(100%) scale(0.95);
+  }
+
+  60% {
+    opacity: 0.8;
+    transform: translateY(-10%) scale(0.98);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+// Toast滑出动画
+@keyframes toast-slide-out {
+  from {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(-100%) scale(0.9);
+  }
+}
+
+// Toast位移动画（平滑向上移动）
+@keyframes toast-position-change {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(0); // 由JavaScript控制实际位置
+  }
+}
+
+// 缓动效果（用于位移动画）
+@keyframes toast-ease-move {
+  0% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
 // 响应式设计
 @media (max-width: 768px) {
+
+  // Toast容器移动端样式
+  [data-toast-id] {
+    left: 96px !important;
+    bottom: 110px !important;
+    right: 16px !important;
+    width: auto !important;
+  }
+
   .payment-result-toast {
+    max-width: none !important;
+    min-width: auto !important; // 移动端也移除最小宽度限制
+
     &-content {
       padding: 32px 24px 80px; // 为底部进度条预留空间
       min-height: 280px;

package/lib/components/checkout/components/PaymentResultToast/types.d.ts

@@ -14,7 +14,7 @@ export interface ActionButtonProps {
 /** 操作按钮组列表，支持多行按钮组 */
 export declare type ActionButtonGroupList = ActionButtonProps[][];
 /** 状态样式类型 */
-export declare type StatusClassName = 'success' | 'failed' | 'wallet-pass-failed';
+export declare type StatusClassName = 'success' | 'failed' | 'wallet-pass-failed' | 'partially-paid';
 export interface PaymentResultToastProps {
     /** 是否可见 */
     visible?: boolean;
@@ -22,8 +22,8 @@ export interface PaymentResultToastProps {
     onClose?: () => void;
     /** 状态样式类名，用于控制样式主题 */
     statusClassName?: StatusClassName;
-    /** 标题文本（已计算好的显示文本） */
-    title: string;
+    /** 标题文本（已计算好的显示文本）- 已不再显示 */
+    title?: string;
     /** 副标题内容（已计算好的金额显示内容，支持自定义样式） */
     subtitle?: React.ReactNode;
     /** 找零信息文本（已计算好的找零显示文本） */

package/lib/components/checkout/components/PaymentResultToast/utils.d.ts

@@ -16,3 +16,29 @@ export declare const getDefaultModalConfig: () => {
     closable: boolean;
     zIndex: number;
 };
+/**
+ * 一键关闭当前页面上所有的 PaymentResultToast
+ * 这个函数是对现有 clearAllPaymentResultToasts 函数的封装，
+ * 提供了更友好的 API 和额外的配置选项
+ *
+ * 使用方法：
+ * - closeAllPaymentResultToasts() // 带动画关闭
+ * - closeAllPaymentResultToasts({ immediate: true }) // 立即关闭
+ *
+ * @param options 配置选项
+ * @param options.immediate 是否立即关闭（跳过退出动画），默认 false
+ * @returns Promise<void> 返回 Promise，在所有 Toast 关闭完成后 resolve
+ */
+export declare const closeAllPaymentResultToasts: (options?: {
+    immediate?: boolean;
+}) => Promise<void>;
+/**
+ * 获取当前页面上 PaymentResultToast 的数量
+ * @returns number 当前显示的 Toast 数量
+ */
+export declare const getToastCount: () => number;
+/**
+ * 检查当前页面是否有正在显示的 PaymentResultToast
+ * @returns boolean 是否有 Toast 正在显示
+ */
+export declare const hasActivePaymentResultToasts: () => boolean;