@pisell/materials 6.4.7 → 6.4.9

package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableQuery.js

@@ -10,13 +10,24 @@ 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 { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useMemoizedFn } from 'ahooks';
-var useTableQuery = function useTableQuery(props) {
+import { getCurrentViewModeFromLocalStorage, getTableSettingByCurrentViewMode, setTableSettingToLocalStorage } from "../../../table/Table/utils";
+var useTableQuery = function useTableQuery(props, currentSettingHash) {
   var _tabs$items, _tabs$items2;
   var filterBy = props.filterBy,
     sortBy = props.sortBy,
-    tabs = props.tabs;
+    tabs = props.tabs,
+    localSettings = props.localSettings;
+  var tableId = useMemo(function () {
+    if (props.__designMode === 'design') {
+      return 'designMode-mock-table-id';
+    }
+    return (props === null || props === void 0 ? void 0 : props.currentComponentId) || props.__id;
+  }, [props.__id, props.__designMode, props === null || props === void 0 ? void 0 : props.currentComponentId]);
+  var currentViewMode = useMemo(function () {
+    return getCurrentViewModeFromLocalStorage(tableId) || 'grid';
+  }, [tableId]);
 
   // 分页配置
   var _useState = useState({
@@ -28,19 +39,50 @@ var useTableQuery = function useTableQuery(props) {
     _useState2 = _slicedToArray(_useState, 2),
     queryPageConfig = _useState2[0],
     setQueryPageConfig = _useState2[1];
+  var getInitialValues = useMemoizedFn(function () {
+    try {
+      if (!tableId) return {};
+      var setting = getTableSettingByCurrentViewMode(tableId, currentViewMode);
+      console.log('setting22', setting);
+      return (setting === null || setting === void 0 ? void 0 : setting.filters) || {};
+    } catch (e) {
+      return {};
+    }
+  });
+
+  // 初始读取本地 filters（若开启本地记忆且 scope 包含 filters）
+  useEffect(function () {
+    var _localSettings$scope;
+    if (!tableId) return;
+    var enable = !!(localSettings !== null && localSettings !== void 0 && localSettings.enable && (_localSettings$scope = localSettings.scope) !== null && _localSettings$scope !== void 0 && _localSettings$scope.includes('filters'));
+    if (!enable) return;
+    var setting = getTableSettingByCurrentViewMode(tableId, currentViewMode);
+    var persisted = (setting === null || setting === void 0 ? void 0 : setting.filters) || {};
+    if (persisted && Object.keys(persisted).length > 0) {
+      setQueryPageConfig(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          filter: _objectSpread(_objectSpread({}, prev.filter), persisted)
+        });
+      });
+    }
+  }, [tableId, currentViewMode, JSON.stringify(localSettings)]);
 
   // 分页变化
   var handleValuesChange = useMemoizedFn(function (params, allParams) {
+    var _localSettings$scope2;
     var _ref = params.pagination || {},
       page = _ref.page,
       size = _ref.size;
+    var nextFilterForSave = null;
     setQueryPageConfig(function (prev) {
       var sort = prev.sort || sortBy;
       var filter = prev.filter;
       if ("tabs" in params) {
         var _params$tabs, _params$tabs2;
         sort = ((_params$tabs = params.tabs) === null || _params$tabs === void 0 ? void 0 : _params$tabs.sortBy) || sortBy || "";
-        filter = _objectSpread(_objectSpread({}, prev.filter), ((_params$tabs2 = params.tabs) === null || _params$tabs2 === void 0 ? void 0 : _params$tabs2.filterBy) || {});
+        var tabsFilter = ((_params$tabs2 = params.tabs) === null || _params$tabs2 === void 0 ? void 0 : _params$tabs2.filterBy) || {};
+        filter = _objectSpread(_objectSpread({}, prev.filter), tabsFilter);
+        nextFilterForSave = filter;
       }
       if ("order_by" in params) {
         var _allParams$tabs;
@@ -53,14 +95,57 @@ var useTableQuery = function useTableQuery(props) {
         filter: filter
       });
     });
+
+    // 当 tabs 变化导致 filter 变更时，同步写入本地（遵循 localSettings）
+    var enable = !!(localSettings !== null && localSettings !== void 0 && localSettings.enable && (_localSettings$scope2 = localSettings.scope) !== null && _localSettings$scope2 !== void 0 && _localSettings$scope2.includes('filters'));
+    if (enable && tableId && nextFilterForSave) {
+      var excluded = new Set((localSettings === null || localSettings === void 0 ? void 0 : localSettings.excludedFilterFields) || []);
+      var filtered = {};
+      Object.keys(nextFilterForSave).forEach(function (k) {
+        if (!excluded.has(k)) {
+          filtered[k] = nextFilterForSave[k];
+        }
+      });
+      setTableSettingToLocalStorage({
+        tableId: tableId,
+        tableSettingObj: {
+          filters: filtered
+        },
+        currentViewMode: currentViewMode,
+        currentSettingHash: currentSettingHash
+      });
+    }
   });
   var handleFilterChange = useMemoizedFn(function (changedFields, allFields) {
+    var _localSettings$scope3;
+    var nextFilter = _objectSpread({}, allFields);
     setQueryPageConfig(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, {
         page: 1,
-        filter: _objectSpread(_objectSpread(_objectSpread({}, prev.filter), allFields), filterBy || {})
+        filter: _objectSpread(_objectSpread(_objectSpread({}, prev.filter), nextFilter), filterBy || {})
       });
     });
+
+    // 写入本地（仅当开启本地记忆且 scope 包含 filters）
+    var enable = !!(localSettings !== null && localSettings !== void 0 && localSettings.enable && (_localSettings$scope3 = localSettings.scope) !== null && _localSettings$scope3 !== void 0 && _localSettings$scope3.includes('filters'));
+    if (enable && tableId) {
+      // 按 excludedFilterFields 过滤写入
+      var excluded = new Set((localSettings === null || localSettings === void 0 ? void 0 : localSettings.excludedFilterFields) || []);
+      var filtered = {};
+      Object.keys(nextFilter || {}).forEach(function (k) {
+        if (!excluded.has(k)) {
+          filtered[k] = nextFilter[k];
+        }
+      });
+      setTableSettingToLocalStorage({
+        tableId: tableId,
+        tableSettingObj: {
+          filters: filtered
+        },
+        currentViewMode: currentViewMode,
+        currentSettingHash: currentSettingHash
+      });
+    }
   });
   var refreshData = useMemoizedFn(function () {
     setQueryPageConfig(function (prev) {
@@ -80,7 +165,8 @@ var useTableQuery = function useTableQuery(props) {
     handleValuesChange: handleValuesChange,
     refreshData: refreshData,
     handleFilterChange: handleFilterChange,
-    refreshCurrentPage: refreshCurrentPage
+    refreshCurrentPage: refreshCurrentPage,
+    getInitialValues: getInitialValues
   };
 };
 export default useTableQuery;

package/es/components/dataSourceComponents/dataSourceTable/type.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ColumnType } from 'antd/es/table';
+import { LocalSettingsType } from '../../table/types';
 import { DataSourceType } from '../provider/dataSource/DataSourceContext';
 export declare type OperationItem = {
     label?: string;
@@ -13,6 +14,9 @@ export declare type OperationItem = {
     afterClose?: () => void;
 };
 export interface DataSourceTableProps {
+    __id?: string;
+    currentComponentId?: string;
+    currentSettingKey?: string;
     title?: string | React.ReactNode | (() => React.ReactNode);
     subTitle?: string | React.ReactNode | (() => React.ReactNode);
     titleButtons?: {
@@ -76,4 +80,5 @@ export interface DataSourceTableProps {
         create?: Record<string, any>;
         destroy?: Record<string, any>;
     };
+    localSettings?: LocalSettingsType;
 }

package/es/components/filter/types.d.ts

@@ -9,6 +9,8 @@ export declare type FilterType = {
     sortButtonShow: boolean;
     /** 筛选列表 */
     list: FilterItemProps[];
+    items?: string[];
+    __items: string[];
     /** 快速筛选最大长度 */
     quickFilterMaxLength: number;
     /** 配置存储模式 */

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import './index.less';
+export declare type ItemValue = string | number;
+export interface Item {
+    value: ItemValue;
+    label: React.ReactNode;
+    disabled: boolean;
+    type: 'text' | 'primary';
+    style?: React.CSSProperties;
+    size?: number;
+}
+export interface KeyboardProps {
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange?: (value?: ItemValue) => void;
+    items?: Item[];
+    rightItems?: Item[];
+    keydown?: boolean;
+}
+declare const _default: React.MemoExoticComponent<(props: KeyboardProps) => JSX.Element>;
+export default _default;

package/es/components/keyboard/index.js

@@ -0,0 +1,159 @@
+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); }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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 React, { useRef } from 'react';
+import { Button } from 'antd';
+import "./index.less";
+import classNames from 'classnames';
+import { useEventListener, useMemoizedFn, useSize } from 'ahooks';
+var list = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '+', 'ok'];
+var defaultArr = [{
+  value: 1,
+  label: '1',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 2,
+  label: '2',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 3,
+  label: '3',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 4,
+  label: '4',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 5,
+  label: '5',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 6,
+  label: '6',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 7,
+  label: '7',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 8,
+  label: '8',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 9,
+  label: '9',
+  disabled: false,
+  type: 'text'
+}, {
+  value: '0',
+  label: '0',
+  disabled: false,
+  type: 'text'
+}, {
+  value: '00',
+  label: '00',
+  disabled: false,
+  type: 'text'
+}, {
+  value: '.',
+  label: '.',
+  disabled: false,
+  type: 'text'
+}];
+var Keyboard = function Keyboard(props) {
+  var _props$items = props.items,
+    items = _props$items === void 0 ? defaultArr : _props$items,
+    className = props.className,
+    style = props.style,
+    onChange = props.onChange,
+    rightItems = props.rightItems,
+    _props$keydown = props.keydown,
+    keydown = _props$keydown === void 0 ? true : _props$keydown;
+  var contentRef = useRef(null);
+  var size = useSize(contentRef);
+  useEventListener('keydown', function (ev) {
+    console.log('ev', ev);
+    if (!keydown) {
+      return;
+    }
+    var key = ev.key;
+    if (key === 'Enter') {
+      key = 'ok';
+    }
+    if (key === 'keydown') {
+      key = '+';
+    }
+    if (list.includes(key)) {
+      onChange === null || onChange === void 0 || onChange(key);
+    }
+  });
+  var getHeight = useMemoizedFn(function () {
+    var itemSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    // 默认高度为25% 的容器宽度 * size大小 + 间距
+    return ((size === null || size === void 0 ? void 0 : size.width) || 0) / 4 * itemSize + (itemSize - 1) * 7;
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    id: props.id || '',
+    className: classNames('pisell-virtual-keyboard-wrap', className),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-virtual-keyboard-content'),
+    ref: contentRef
+  }, items.map(function (item) {
+    var _item$style;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-virtual-keyboard-item",
+      style: item.style
+    }, /*#__PURE__*/React.createElement(Button, {
+      id: "pisell-virtual-keyboard-".concat(item.value),
+      key: item.value,
+      type: item.type,
+      className: "pisell-virtual-keyboard-item-button",
+      style: {
+        color: item.type === 'primary' ? '#fff' : ((_item$style = item.style) === null || _item$style === void 0 ? void 0 : _item$style.color) || undefined
+      },
+      disabled: item.disabled,
+      onClick: function onClick(e) {
+        onChange === null || onChange === void 0 || onChange(item.value);
+      }
+    }, item.label));
+  })), rightItems && /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-virtual-keyboard-content', 'pisell-virtual-keyboard-right'),
+    style: {
+      flex: "0 0 calc((100% - 21px) / 4 * 1)"
+    }
+  }, rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(function (item) {
+    var _item$style2, _item$style3;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-virtual-keyboard-item",
+      style: _objectSpread(_objectSpread({}, item.style || {}), {}, {
+        height: getHeight(item.size)
+      })
+    }, /*#__PURE__*/React.createElement(Button, {
+      id: "pisell-virtual-keyboard-".concat(item.value),
+      key: item.value,
+      type: item.type,
+      className: "pisell-virtual-keyboard-item-button",
+      style: _objectSpread({
+        fontSize: ((_item$style2 = item.style) === null || _item$style2 === void 0 ? void 0 : _item$style2.fontSize) || 25,
+        color: item.type === 'primary' ? '#fff' : ((_item$style3 = item.style) === null || _item$style3 === void 0 ? void 0 : _item$style3.color) || undefined
+      }, item.type === 'primary' ? item.style || {} : {}),
+      disabled: item.disabled,
+      onClick: function onClick(e) {
+        onChange === null || onChange === void 0 || onChange(item.value);
+      }
+    }, item.label));
+  })));
+};
+export default /*#__PURE__*/React.memo(Keyboard);

package/es/components/keyboard/index.less

@@ -0,0 +1,44 @@
+.pisell-virtual-keyboard-wrap {
+  display: flex;
+  gap: 7px;
+  .pisell-virtual-keyboard-content {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 7px;
+
+    .pisell-virtual-keyboard-item {
+      border-radius: 5px;
+      background: var(--Base-White, #fff);
+      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06);;
+      overflow: hidden;
+      width: calc((100% - 14px) / 3 * 1);
+      padding-top: 25%;
+      position: relative;
+
+      .pisell-virtual-keyboard-item-button {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 5px;
+        color: var(--Base-Black, #000);
+        font-size: 25px;
+        font-style: normal;
+        font-weight: 400;
+        box-shadow: none;
+        padding: 0 !important;
+      }
+    }
+  }
+  .pisell-virtual-keyboard-right {
+    flex-direction: column;
+    justify-content: start;
+    .pisell-virtual-keyboard-item{
+      width: 100%;
+    }
+  }
+}

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

@@ -1,18 +1,5 @@
 import React from 'react';
 import './index.less';
-import type { DetailedHTMLProps, HTMLAttributes, VideoHTMLAttributes, InputHTMLAttributes } from 'react';
-declare type ExtendedDetailedHTMLProps<T extends HTMLAttributes<E>, E extends HTMLElement> = DetailedHTMLProps<T, E> & {
-    children?: React.ReactNode;
-};
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            div: ExtendedDetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-            video: DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
-            input: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-        }
-    }
-}
 export interface PisellQRScannerProps {
     /** 是否可见 */
     visible: boolean;

package/es/components/pisellQRScanner/index.js

@@ -18,14 +18,6 @@ import "./index.less";
 import { createPortal } from 'react-dom';
 import { getText } from "../../locales";
 
-// 不使用全局声明，改用本地引入React类型
-
-// 扩展HTMLAttributes接口以包含children属性
-
-// 扩展DetailedHTMLProps类型以使用扩展的HTMLAttributes
-
-// 声明JSX命名空间，解决JSX.IntrinsicElements错误
-
 // 精确定义组件属性，只接收需要的属性
 
 /**

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

@@ -117,7 +117,7 @@ export interface PisellWalletPassCardProps {
         color: string;
     };
     /** 卡片状态 */
-    cardStatus?: 'used' | 'expired' | 'disabled' | 'conflict';
+    cardStatus?: 'used' | 'expired' | 'disabled' | 'conflict' | 'lastPayment';
     /** 自定义余额格式化函数，如果提供则优先使用 */
     formatBalance?: (balance?: number, option?: FormatOption) => React.ReactNode;
     /** 自定义余额标题格式化函数，如果提供则优先使用 */

package/es/components/pisellWalletPassCard/index.js

@@ -34,7 +34,8 @@ var cardStatusMap = {
   used: 'warning',
   expired: 'error',
   conflict: 'error',
-  disabled: 'gray'
+  disabled: 'gray',
+  lastPayment: 'gray'
 };
 var PisellWalletPassCard = function PisellWalletPassCard(props) {
   var _React$useState = React.useState(false),

package/es/components/productCard/cartSkuCard/components/packages/utils.d.ts

@@ -17,4 +17,4 @@ export declare const minusSign: (item: any, type?: string) => "" | "-";
  * @Author: WangHan
  * @Date: 2024-11-22 10:58
  */
-export declare const _formatAmount: (price?: number, amountSymbol?: string, digit?: number) => any;
+export declare const _formatAmount: (price?: number, amountSymbol?: string, digit?: number) => string | number;

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

@@ -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,8 @@ 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';
+
 // 本地实现的工具函数和类型
 
 // withNativeProps 工具函数
@@ -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;
+}