@pisell/private-materials 6.4.42 → 6.5.2

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

@@ -1,254 +1,39 @@
-@primary-color: rgba(52, 64, 84, 0.8); // 毛玻璃效果的背景色
+@primary-color: rgba(16, 24, 40, 0.90); // 与图片一致的深蓝灰背景
 @success-color: #47CD89; // 与图片一致的成功文字颜色
-@progress-color: #079455; // 与DOM样式一致的进度条颜色
-@warning-color: #F79009; // 与DOM样式一致的部分支付颜色
+@progress-color: #079455; // 与图片一致的进度条颜色
+@warning-color: #F79009; // 与图片一致的找零金额颜色
 @error-color: #F97066; // 失败状态的红色
 @paid-color: #47CD89; // 已支付金额的绿色（与成功颜色一致）
 @text-color-inverse: #ffffff;
-@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);
-  }
-}
+@border-radius-base: 10px; // 与图片一致的圆角
 
 
 
 .payment-result-toast {
-  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;
-  }
+  width: 680px !important;
 
   .pisell-lowcode-space-item {
-    pointer-events: auto !important; // 确保按钮组项目可以接收点击事件
-
     .pisell-lowcode-dropdown-trigger {
-      width: 56px !important; // 调整为xl尺寸
-      height: 56px !important;
-      box-sizing: border-box !important;
-      pointer-events: auto !important; // 确保下拉按钮可以接收点击事件
-
+      width: 44px !important;
+      height: 44px !important;
+      box-sizing: content-box !important;
       .payment-result-toast-action-icon {
-        font-size: 20px;
+        font-size: 44px;
       }
     }
   }
 
-  .pisell-lowcode-modal-content,
-  .ant-modal-content {
-    background: transparent !important; // 让content区域处理背景
+  .pisell-lowcode-modal-content {
+    background: @primary-color !important;
     border-radius: @border-radius-base !important;
-    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 {
+    padding: 0 !important;
+    overflow: hidden !important;
+    width: 680px !important;
+
+    .pisell-lowcode-modal-header {
       display: none !important;
     }
 
-    // 添加关闭按钮样式
-    .pisell-lowcode-modal-close,
-
-
     .pisell-lowcode-dropdown-trigger {
       flex: 0 0 auto !important; // 更多按钮保持固定宽度，不跟随等比例分配
       width: 60px !important; // 明确设置更多按钮的固定宽度
@@ -267,7 +52,6 @@
       padding: 8px !important;
       white-space: nowrap !important; // 防止文字换行
       height: 44px !important; // 与其他按钮保持一致的高度
-      pointer-events: auto !important; // 确保下拉按钮可以接收点击事件
 
       .anticon-more {
         font-size: 44px;
@@ -275,134 +59,60 @@
     }
   }
 
-  .pisell-lowcode-modal-body,
-  .ant-modal-body {
+  .pisell-lowcode-modal-body {
     padding: 0;
-    background: transparent !important; // 让内容容器的背景透明，使用content的背景
-    pointer-events: none !important; // 让Modal body点击穿透
+    background: @primary-color;
   }
 
   &-content {
-    padding: 16px !important; // 添加内边距
+    padding: 48px 32px 32px;
     text-align: center;
-    min-height: auto;
+    min-height: 300px;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-between;
     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: 30px !important; // text-3xl对应30px
-    font-weight: 600 !important; // font-semibold
-    margin: 0 !important;
-    font-family: 'Inter', sans-serif !important;
+    font-size: 20px; // 与图片一致
+    font-weight: 600;
+    line-height: 30px; // 与图片一致
+    margin: 0;
   }
 
   // 失败状态标题
   &-failed-title {
     color: @error-color;
-    font-size: 30px !important;
-    font-weight: 600 !important;
-    margin: 0 !important;
-    font-family: 'Inter', sans-serif !important;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 30px;
+    margin: 0;
   }
 
   // Wallet Pass失败状态标题
   &-wallet-pass-failed-title {
     color: @error-color;
-    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;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 30px;
+    margin: 0;
   }
 
   // 副标题样式
   &-subtitle {
     &-text {
-      font-size: 30px; // 与图片一致
+      font-size: 36px; // 与图片一致
       font-weight: 600; // 与图片一致
+      line-height: 44px; // 与图片一致
+      margin: 16px 0 0;
       text-shadow: none; // 移除阴影
 
       // 已支付金额样式 (成功-无找零)
@@ -422,7 +132,7 @@
 
       // 部分支付金额样式
       &.partially-paid {
-        color: @warning-color !important;
+        color: @warning-color;
       }
     }
   }
@@ -432,7 +142,6 @@
     bottom: 0;
     left: 0;
     right: 0;
-    width: 100%; // 使用100%宽度
 
     &-text {
       display: none; // 图片中没有显示倒计时文字
@@ -440,18 +149,15 @@
 
     &-progress {
       width: 100%;
-      height: 6px; // h-1.5对应6px
+      height: 8px;
       background: transparent;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      position: relative;
       border-radius: 0; // 确保无圆角
       overflow: hidden;
 
       &-bar {
         height: 100%;
-        background: @progress-color !important; // emerald-600颜色
+        background: @progress-color; // 使用与图片一致的深绿色
         position: relative;
         border-radius: 0; // 确保无圆角
         width: 100%; // 初始宽度为100%
@@ -468,38 +174,33 @@
   &-actions {
     display: flex;
     gap: 16px;
-    margin-top: 0; // 去除上边距
+    margin-top: 24px;
     width: 100%;
-    max-width: none; // 去除最大宽度限制
+    max-width: 500px; // 增加最大宽度以适应自适应按钮
     justify-content: center; // 按钮居中对齐
-    align-items: center;
-    pointer-events: auto !important; // 按钮区域可以接收点击事件
   }
 
   &-action-button {
-    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; // 确保按钮可以接收点击事件
+    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;
 
     .payment-result-toast-action-icon {
-      font-size: 20px;
+      font-size: 44px;
     }
 
     // 重试按钮特殊样式
@@ -542,31 +243,28 @@
   }
 
   &-more-button {
-    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; // 确保更多按钮可以接收点击事件
+    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;
 
     &:hover {
-      background: rgba(255, 255, 255, 0.1) !important;
-      transform: translateY(-2px) !important;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+      background: rgba(255, 255, 255, 0.1);
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     }
 
     &:active {
-      transform: translateY(0) !important;
+      transform: translateY(0);
     }
   }
 }
@@ -594,75 +292,9 @@
   }
 }
 
-// 新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' | 'partially-paid';
+export declare type StatusClassName = 'success' | 'failed' | 'wallet-pass-failed';
 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,29 +16,3 @@ 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;