@pisell/materials 6.2.38 → 6.2.40

package/es/components/pisellCamera/index.js

@@ -0,0 +1,228 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { Camera } from 'react-camera-pro';
+import Iconfont from "../iconfont";
+import { getText } from "../../locales";
+import PisellModal from "../../components/pisellModal";
+import "./index.less";
+var PisellCamera = /*#__PURE__*/forwardRef(function (props, ref) {
+  var cameraRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    photo = _useState4[0],
+    setPhoto = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    cameraAvailable = _useState6[0],
+    setCameraAvailable = _useState6[1]; // null: 检测中, true: 可用, false: 不可用
+  var uploadFileRef = useRef(null);
+
+  // Base64转File对象
+  var base64ToFile = function base64ToFile(base64String, filename) {
+    var _arr$0$match;
+    var arr = base64String.split(',');
+    var mime = ((_arr$0$match = arr[0].match(/:(.*?);/)) === null || _arr$0$match === void 0 ? void 0 : _arr$0$match[1]) || '';
+    var bstr = atob(arr[1]);
+    var n = bstr.length;
+    var u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], filename, {
+      type: mime
+    });
+  };
+
+  // 拍照并添加到fileList
+  var takePhoto = function takePhoto() {
+    if (!cameraRef.current || !cameraRef.current.takePhoto) {
+      return;
+    }
+    try {
+      var _cameraRef$current, _cameraRef$current$ta;
+      var _photo = (_cameraRef$current = cameraRef.current) === null || _cameraRef$current === void 0 || (_cameraRef$current$ta = _cameraRef$current.takePhoto) === null || _cameraRef$current$ta === void 0 ? void 0 : _cameraRef$current$ta.call(_cameraRef$current);
+      var timestamp = Date.now();
+      var filename = "photo-".concat(timestamp, ".jpg");
+      setPhoto(_photo);
+
+      // 转换为File对象
+      var file = base64ToFile(_photo, filename);
+
+      // 创建符合Antd Upload格式的文件对象
+      var uploadFile = {
+        uid: timestamp.toString(),
+        name: filename,
+        status: 'uploading',
+        url: _photo,
+        // 用于预览
+        originFileObj: file,
+        // 原始文件对象，用于上传
+        thumbUrl: _photo,
+        lastModified: Date.now(),
+        lastModifiedDate: new Date(),
+        type: 'image/jpeg',
+        size: file.size
+      };
+      console.log('takePhoto_uploadFile', uploadFile);
+      uploadFileRef.current = uploadFile;
+      return uploadFile;
+    } catch (error) {
+      console.error('takePhoto_error', error);
+      uploadFileRef.current = null;
+      setPhoto('');
+      return null;
+    }
+  };
+  var onOpen = function onOpen() {
+    setCameraAvailable(null);
+    setPhoto('');
+    uploadFileRef.current = null;
+    setOpen(true);
+  };
+
+  // 关闭相机弹窗，重置状态
+  var onClose = function onClose() {
+    cameraRef.current = null;
+    uploadFileRef.current = null;
+    setOpen(false);
+    setPhoto('');
+    setCameraAvailable(null);
+  };
+
+  // 重拍照片
+  var onRetakePhoto = function onRetakePhoto() {
+    setPhoto('');
+  };
+
+  // 使用照片
+  var onUsePhoto = function onUsePhoto() {
+    var _props$onChange;
+    props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, uploadFileRef.current);
+    onClose();
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      open: onOpen,
+      takePhoto: takePhoto,
+      isCameraAvailable: function isCameraAvailable() {
+        return cameraAvailable;
+      }
+    };
+  });
+  console.log('cameraAvailable', cameraAvailable);
+  return /*#__PURE__*/React.createElement(PisellModal, {
+    open: open,
+    onCancel: function onCancel(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      onClose();
+    },
+    header: false,
+    footer: null,
+    destroyOnClose: true,
+    bodyStyle: {
+      padding: 0
+    },
+    width: '90vw',
+    className: "pisell-camera-modal"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-container",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, cameraAvailable === null ?
+  /*#__PURE__*/
+  // 检测中
+  React.createElement("div", {
+    className: "pisell-camera-loading"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-loading-text"
+  }, getText('pisell-camera-checking'))) : cameraAvailable === false ?
+  /*#__PURE__*/
+  // 无摄像头
+  React.createElement("div", {
+    className: "pisell-camera-no-camera"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-no-camera-icon"
+  }, "\uD83D\uDCF7"), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-no-camera-text"
+  }, getText('pisell-camera-no-camera-accessible')), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-no-camera-desc"
+  }, getText('pisell-camera-no-camera-desc'))) : null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Camera, {
+    ref: cameraRef,
+    facingMode: "environment",
+    errorMessages: {
+      // noCameraAccessible: getText('pisell-camera-no-camera-accessible'),
+      // permissionDenied: getText('pisell-camera-permission-denied'),
+      // switchCamera: getText('pisell-camera-switch-camera'),
+      // canvas: getText('pisell-camera-canvas'),
+    },
+    numberOfCamerasCallback: function numberOfCamerasCallback(numberOfCameras) {
+      console.log('numberOfCameras', numberOfCameras);
+      if (!cameraRef.current) {
+        return;
+      }
+      if (numberOfCameras <= 0) {
+        setTimeout(function () {
+          setCameraAvailable(function (pre) {
+            if (pre === true) {
+              return true;
+            }
+            return false;
+          });
+        }, 5000);
+      } else {
+        setCameraAvailable(true);
+      }
+    }
+  }), cameraAvailable === true && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-action"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-action-item-wrap",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      takePhoto();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-action-item"
+  }, /*#__PURE__*/React.createElement(Iconfont, {
+    type: "pisell2-camera-01",
+    style: {
+      fontSize: 32
+    }
+  })))), photo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-photo-container"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: photo,
+    alt: "photo",
+    className: "pisell-camera-photo"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-photo-img-action"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-photo-img-action-item",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      onRetakePhoto();
+    }
+  }, getText('pisell-upload-camera-retake')), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-photo-img-action-item",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      onUsePhoto();
+    }
+  }, getText('pisell-upload-camera-use')))))));
+});
+export default PisellCamera;

package/es/components/pisellCamera/index.less

@@ -0,0 +1,131 @@
+.pisell-camera-modal {
+  .pisell-camera-container {
+    width: 100%;
+    height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .pisell-camera-action {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .pisell-camera-action-item-wrap {
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+        padding: 6px;
+        border-radius: 50%;
+        border: 2px solid #fff;
+
+        .pisell-camera-action-item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 60px;
+          height: 60px;
+          background-color: #fff;
+          border-radius: 50%;
+        }
+      }
+
+    }
+
+    .pisell-camera-photo-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+
+      .pisell-camera-photo {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .pisell-camera-photo-img-action {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 100px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      background-color: rgba(0, 0, 0, 0.5);
+
+      .pisell-camera-photo-img-action-item {
+        padding: 20px 60px;
+        font-size: 20px;
+        color: #fff;
+        cursor: pointer;
+      }
+    }
+
+    .pisell-camera-loading {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .pisell-camera-loading-text {
+        font-size: 18px;
+        color: #666;
+      }
+    }
+
+    .pisell-camera-no-camera {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ffffff;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      background-color: #f5f5f5;
+      padding: 40px;
+      text-align: center;
+
+      .pisell-camera-no-camera-icon {
+        font-size: 64px;
+        margin-bottom: 20px;
+        opacity: 0.6;
+      }
+
+      .pisell-camera-no-camera-text {
+        font-size: 20px;
+        color: #333;
+        margin-bottom: 12px;
+        font-weight: 500;
+      }
+
+      .pisell-camera-no-camera-desc {
+        font-size: 14px;
+        color: #666;
+        line-height: 1.5;
+        max-width: 300px;
+      }
+    }
+  }
+}

package/es/components/pisellCardList/index.js

@@ -37,7 +37,8 @@ var PisellCardList = function PisellCardList(props) {
     showValidDate = props.showValidDate,
     empty = props.empty,
     showEmpty = props.showEmpty,
-    showBalanceSymbol = props.showBalanceSymbol;
+    showBalanceSymbol = props.showBalanceSymbol,
+    onChangeDebounce = props.onChangeDebounce;
   return data.length ? /*#__PURE__*/React.createElement(PisellCheckboxGroup, {
     options: data,
     value: value,
@@ -48,6 +49,7 @@ var PisellCardList = function PisellCardList(props) {
     onChange: onChange,
     iconPosition: "hide",
     fullWidth: fullWidth,
+    onChangeDebounce: onChangeDebounce,
     renderOption: function renderOption(item, active, index) {
       return /*#__PURE__*/React.createElement(PisellWalletPassCard, _extends({}, item, {
         active: active,

package/es/components/pisellCheckboxGroup/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 = ["platform", "gap", "style", "options", "onChange", "value", "renderOption", "padding", "rowKey", "mode", "direction", "fullWidth", "iconPosition", "optionClassName", "optionActiveClassName"];
+var _excluded = ["platform", "gap", "style", "options", "onChange", "value", "renderOption", "padding", "rowKey", "mode", "direction", "fullWidth", "iconPosition", "optionClassName", "optionActiveClassName", "onChangeDebounce"];
 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; }
@@ -18,6 +18,7 @@ import React, { useEffect, useMemo } from 'react';
 import usePisellConfig from "../pisell-config-provider/hooks/usePisellConfig";
 import classNames from 'classnames';
 import { Checkbox, Radio } from 'antd';
+import { useDebounceFn } from "ahooks";
 import { isNumber } from '@pisell/utils';
 import { changeArray } from '@pisell/utils';
 import "./index.less";
@@ -63,6 +64,7 @@ var PisellCheckboxGroup = function PisellCheckboxGroup(props) {
     iconPosition = _props$iconPosition === void 0 ? 'left' : _props$iconPosition,
     optionClassName = props.optionClassName,
     optionActiveClassName = props.optionActiveClassName,
+    onChangeDebounce = props.onChangeDebounce,
     rest = _objectWithoutProperties(props, _excluded);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -141,6 +143,14 @@ var PisellCheckboxGroup = function PisellCheckboxGroup(props) {
     // 单选模式, 只返回第一个值
     onChange === null || onChange === void 0 || onChange(mode === 'single' ? val[0] : val, item);
   };
+  var _useDebounceFn = useDebounceFn(function (key, item) {
+      handleSelectItem(key, item);
+    }, {
+      wait: 400,
+      leading: true,
+      trailing: false
+    }),
+    run = _useDebounceFn.run;
 
   /**
    * @title: 选择
@@ -181,6 +191,10 @@ var PisellCheckboxGroup = function PisellCheckboxGroup(props) {
       style: rowStyle,
       onClick: function onClick(e) {
         if (option.disabled) return;
+        if (onChangeDebounce) {
+          run(option[rowKey], option);
+          return;
+        }
         handleSelectItem(option[rowKey], option);
       },
       leftContent: iconPosition === 'left' && /*#__PURE__*/React.createElement(CheckBoxItem, {

package/es/components/pisellWalletPassCard/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './index.less';
 export interface PisellWalletPassCardProps {
     id: number;

package/es/components/pisellWalletPassCard/index.js

@@ -335,6 +335,7 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
     }, showStoreName && storeName));
   };
   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", {
@@ -360,7 +361,11 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
       className: "pisell-card-amount-item-label"
     }, getText('pisell-discount-card-title')), /*#__PURE__*/React.createElement("div", {
       className: "pisell-card-amount-item-value"
-    }, discount, "% ", getText('pisell-discount-card-unit')))), /*#__PURE__*/React.createElement("div", {
+    }, ((_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",
+      useThousandsSeparator: true,
+      value: discount
+    })) : /*#__PURE__*/React.createElement(React.Fragment, null, discount, "% ", getText('pisell-discount-card-unit'))))), /*#__PURE__*/React.createElement("div", {
       className: "pisell-card-code-wrap"
     }, /*#__PURE__*/React.createElement("div", {
       className: "pisell-card-code"

package/es/components/productCard/cartSkuCard/components/swipeAction/index.d.ts

@@ -1,11 +1,11 @@
 import type { ReactNode } from 'react';
 import React from 'react';
+import './index.less';
 declare type NativeProps<S extends string = never> = {
     className?: string;
     style?: React.CSSProperties & Partial<Record<S, string>>;
 };
 declare type PropagationEvent = 'click';
-import './index.less';
 declare type SideType = 'left' | 'right';
 export declare type SwipeActionRef = {
     close: () => void;
@@ -17,6 +17,7 @@ export declare type Action = {
     text: ReactNode;
     color?: ActionColor | string;
     onClick?: (e: React.MouseEvent) => void;
+    style?: React.CSSProperties;
 };
 export declare type SwipeActionProps = {
     rightActions?: Action[];

package/es/components/productCard/cartSkuCard/components/swipeAction/index.js

@@ -13,7 +13,9 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { animated, useSpring } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react/dist/use-gesture-react.cjs';
-import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import "./index.less";
+
 // 本地实现的工具函数和类型
 
 // withNativeProps 工具函数
@@ -71,7 +73,6 @@ var Button = function Button(_ref) {
     onClick: onClick
   }, children);
 };
-import "./index.less";
 var classPrefix = "pisell-custom-swipe-action";
 var defaultProps = {
   rightActions: [],
@@ -85,17 +86,35 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
   var rootRef = useRef(null);
   var leftRef = useRef(null);
   var rightRef = useRef(null);
+
+  // 添加容器高度状态
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerHeight = _useState2[0],
+    setContainerHeight = _useState2[1];
   function getWidth(ref) {
     var element = ref.current;
     if (!element) return 0;
     return element.offsetWidth;
   }
+
+  // 添加获取高度的函数
+  function getHeight(ref) {
+    var element = ref.current;
+    if (!element) return 0;
+    return element.offsetHeight;
+  }
   function getLeftWidth() {
     return getWidth(leftRef);
   }
   function getRightWidth() {
     return getWidth(rightRef);
   }
+
+  // 添加获取根容器高度的函数
+  function getRootHeight() {
+    return getHeight(rootRef);
+  }
   var _useSpring = useSpring(function () {
       return {
         x: 0,
@@ -198,6 +217,26 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
       close: close
     };
   });
+
+  // 添加高度检测的 useEffect
+  useEffect(function () {
+    var updateHeight = function updateHeight() {
+      var height = getRootHeight();
+      setContainerHeight(height);
+    };
+
+    // 组件挂载后检测高度
+    updateHeight();
+
+    // 监听窗口大小变化
+    var resizeObserver = new ResizeObserver(updateHeight);
+    if (rootRef.current) {
+      resizeObserver.observe(rootRef.current);
+    }
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, []);
   useEffect(function () {
     if (!props.closeOnTouchOutside) return;
     function handle(e) {
@@ -224,13 +263,38 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
       document.removeEventListener('mousedown', handle);
     };
   }, [props.closeOnTouchOutside, props.escapeDom]);
+
+  // 根据容器高度获取右侧容器的 class 名称
+  var getRightContainerClass = function getRightContainerClass() {
+    var baseClass = "".concat(classPrefix, "-actions ").concat(classPrefix, "-actions-right");
+    if (containerHeight > 180) {
+      return "".concat(baseClass, " ").concat(classPrefix, "-height-large");
+    } else if (containerHeight > 120) {
+      return "".concat(baseClass, " ").concat(classPrefix, "-height-medium");
+    }
+    return "".concat(baseClass, " ").concat(classPrefix, "-height-small");
+  };
+
+  // 根据容器高度获取右侧按钮的 class 名称
+  var getRightActionButtonClass = function getRightActionButtonClass() {
+    if (containerHeight > 180) {
+      return "".concat(classPrefix, "-action-height-large");
+    } else if (containerHeight > 120) {
+      return "".concat(classPrefix, "-action-height-medium");
+    }
+    return "".concat(classPrefix, "-action-height-small");
+  };
   function renderAction(action) {
     var _action$color, _colorRecord$color;
+    var isRightAction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var color = (_action$color = action.color) !== null && _action$color !== void 0 ? _action$color : 'light';
     var _style = action.style || {};
+
+    // 为右侧按钮添加基于高度的 class
+    var buttonClass = isRightAction ? "".concat(classPrefix, "-action-button ").concat(getRightActionButtonClass()) : "".concat(classPrefix, "-action-button");
     return /*#__PURE__*/React.createElement(Button, {
       key: action.key,
-      className: "".concat(classPrefix, "-action-button"),
+      className: buttonClass,
       style: _objectSpread({
         '--background-color': (_colorRecord$color = colorRecord[color]) !== null && _colorRecord$color !== void 0 ? _colorRecord$color : color
       }, _style),
@@ -262,7 +326,9 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
   }, withStopPropagation(props.stopPropagation, /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-actions ").concat(classPrefix, "-actions-left"),
     ref: leftRef
-  }, props.leftActions.map(renderAction))), /*#__PURE__*/React.createElement("div", {
+  }, props.leftActions.map(function (action) {
+    return renderAction(action, false);
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-content"),
     onClickCapture: function onClickCapture(e) {
       if (x.goal !== 0) {
@@ -278,9 +344,11 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
       })
     }
   }, props.children)), withStopPropagation(props.stopPropagation, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(classPrefix, "-actions ").concat(classPrefix, "-actions-right"),
+    className: getRightContainerClass(),
     ref: rightRef
-  }, props.rightActions.map(renderAction))))));
+  }, props.rightActions.map(function (action) {
+    return renderAction(action, true);
+  }))))));
 });
 var colorRecord = {
   light: '#ccc',

package/es/components/productCard/cartSkuCard/components/swipeAction/index.less

@@ -33,3 +33,42 @@
     padding-right: 4px;
   }
 }
+
+.pisell-custom-swipe-action-action-button {
+  min-width: 80px;
+}
+
+/* 容器样式 */
+.pisell-custom-swipe-action-height-large {
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(67, 93, 147, 0.3);
+  justify-content: flex-start;
+
+  .pisell-number-selector-btn {
+    width: 40px !important;
+    height: 40px !important;
+  }
+}
+
+.pisell-custom-swipe-action-height-medium {
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(67, 93, 147, 0.3);
+
+  .pisell-number-selector-btn {
+    width: 40px !important;
+    height: 40px !important;
+  }
+}
+
+/* 按钮样式 */
+.pisell-custom-swipe-action-action-height-large {
+  height: 60px;
+  width: 200px;
+}
+
+.pisell-custom-swipe-action-action-height-medium {
+  flex: 1;
+  width: 200px;
+}