@pisell/private-materials 6.3.15 → 6.4.2

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { WalletBalanceConfirmAction } from '../AmountSummary';
+interface SavePayLaterHandlerProps {
+    amountSymbol?: string;
+    walletPassData?: {
+        selectedWallet?: any[];
+        availableDiscountList?: any[];
+        selectedDiscountList?: number[];
+    };
+    onSavePayLater: (action?: WalletBalanceConfirmAction) => void;
+}
+interface SavePayLaterHandlerRef {
+    handleSavePayLaterClick: () => void;
+}
+declare const SavePayLaterHandler: React.ForwardRefExoticComponent<SavePayLaterHandlerProps & React.RefAttributes<SavePayLaterHandlerRef>>;
+export default SavePayLaterHandler;
+export type { SavePayLaterHandlerRef };

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

@@ -0,0 +1,188 @@
+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, { useState, useImperativeHandle, forwardRef } from 'react';
+import { Button } from 'antd';
+import { PisellModal } from '@pisell/materials';
+import { locales, formatAmount } from '@pisell/utils';
+import Decimal from 'decimal.js';
+import checkoutLocales from "../../locales";
+import useEngineContext from "../../../../hooks/useEngineContext";
+var SavePayLaterHandler = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$amountSymbol = _ref.amountSymbol,
+    amountSymbol = _ref$amountSymbol === void 0 ? '$' : _ref$amountSymbol,
+    walletPassData = _ref.walletPassData,
+    onSavePayLater = _ref.onSavePayLater;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showWalletBalanceConfirmModal = _useState2[0],
+    setShowWalletBalanceConfirmModal = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    walletBalanceDeductAmount = _useState4[0],
+    setWalletBalanceDeductAmount = _useState4[1];
+  var context = useEngineContext();
+
+  // 创建本地翻译函数，优先使用 checkout 语言包
+  var getText = function getText(key, fallback) {
+    var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _checkoutLocales;
+    var currentLang = ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut.getApp) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.call(_context$appHelper$ut)) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.locales) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut3 = _context$appHelper$ut2.getLocale) === null || _context$appHelper$ut3 === void 0 ? void 0 : _context$appHelper$ut3.call(_context$appHelper$ut2)) || ((_context$appHelper$ut4 = context.appHelper.utils) === null || _context$appHelper$ut4 === void 0 || (_context$appHelper$ut4 = _context$appHelper$ut4.storage) === null || _context$appHelper$ut4 === void 0 ? void 0 : _context$appHelper$ut4.get('umi_locale')) || 'en';
+    var checkoutText = (_checkoutLocales = checkoutLocales[currentLang]) === null || _checkoutLocales === void 0 ? void 0 : _checkoutLocales[key];
+    if (checkoutText) {
+      return checkoutText;
+    }
+
+    // 回退到全局语言包
+    return locales.getText(key) || fallback;
+  };
+
+  // 计算钱包应用总金额
+  var getWalletTotalAmount = function getWalletTotalAmount() {
+    if (!(walletPassData !== null && walletPassData !== void 0 && walletPassData.selectedWallet) || !Array.isArray(walletPassData.selectedWallet)) {
+      return 0;
+    }
+
+    // 使用 Decimal.js 进行精确计算，避免浮点数累加精度问题
+    var totalDecimal = walletPassData.selectedWallet.reduce(function (totalDecimal, wallet) {
+      var redeemValue = parseFloat(wallet.redeem) || 0;
+      var redeemDecimal = new Decimal(redeemValue);
+      return totalDecimal.plus(redeemDecimal);
+    }, new Decimal(0));
+    return totalDecimal.toNumber();
+  };
+
+  // 处理 Save & Pay Later 点击
+  var handleSavePayLaterClick = function handleSavePayLaterClick() {
+    // 检查是否有选中的钱包余额需要确认
+    if (walletPassData !== null && walletPassData !== void 0 && walletPassData.selectedWallet && walletPassData.selectedWallet.length > 0) {
+      var amount = getWalletTotalAmount();
+      var deductAmount = formatAmount(amount, 2, amountSymbol);
+      setWalletBalanceDeductAmount(deductAmount);
+      setShowWalletBalanceConfirmModal(true);
+    } else {
+      // 没有钱包余额选择，直接执行 Save & Pay Later
+      onSavePayLater();
+    }
+  };
+
+  // 处理钱包余额确认弹窗按钮点击
+  var handleWalletBalanceConfirm = function handleWalletBalanceConfirm(action) {
+    setShowWalletBalanceConfirmModal(false);
+    onSavePayLater(action);
+  };
+
+  // 暴露方法给父组件
+  useImperativeHandle(ref, function () {
+    return {
+      handleSavePayLaterClick: handleSavePayLaterClick
+    };
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PisellModal, {
+    visible: showWalletBalanceConfirmModal,
+    onCancel: function onCancel() {
+      return handleWalletBalanceConfirm('cancel');
+    },
+    closable: false,
+    mask: true,
+    maskClosable: false,
+    centered: true,
+    width: 500,
+    title: getText('pisell2.checkout.wallet-balance-confirm.title'),
+    footer: null,
+    className: "wallet-balance-confirm-modal",
+    styles: {
+      header: {
+        textAlign: 'center',
+        borderBottom: '1px solid #EAECF0',
+        paddingBottom: '16px'
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '40px 0 0 0'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'center',
+      marginBottom: '32px',
+      lineHeight: '1.5'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: '#533795',
+      fontWeight: 600,
+      fontSize: '18px'
+    }
+  }, walletBalanceDeductAmount), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: '#101828',
+      fontSize: '16px'
+    }
+  }, getText('pisell2.checkout.wallet-balance-confirm.description-before')), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: '#533795',
+      fontWeight: 600,
+      fontSize: '16px'
+    }
+  }, getText('pisell2.checkout.wallet-balance-confirm.description-after'))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '12px',
+      flexDirection: 'row'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return handleWalletBalanceConfirm('cancel');
+    },
+    style: {
+      flex: '0 1 auto',
+      minWidth: 'fit-content',
+      height: '48px',
+      borderRadius: '12px',
+      fontSize: '16px',
+      fontWeight: 500,
+      border: '1px solid #D0D5DD',
+      color: '#344054',
+      padding: '0 16px',
+      whiteSpace: 'nowrap'
+    }
+  }, getText('pisell2.checkout.wallet-balance-confirm.cancel')), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return handleWalletBalanceConfirm('save-without-deduct');
+    },
+    style: {
+      flex: '1 1 auto',
+      height: '48px',
+      borderRadius: '12px',
+      fontSize: '16px',
+      fontWeight: 500,
+      border: '1px solid #D0D5DD',
+      color: '#344054',
+      padding: '0 16px',
+      whiteSpace: 'nowrap'
+    }
+  }, getText('pisell2.checkout.wallet-balance-confirm.save-without-deduct')), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    style: {
+      flex: '1.2 1 auto',
+      height: '48px',
+      backgroundColor: '#533795',
+      borderColor: '#533795',
+      borderRadius: '12px',
+      fontWeight: 600,
+      fontSize: '16px',
+      border: 'none',
+      boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)',
+      padding: '0 16px',
+      whiteSpace: 'nowrap'
+    },
+    onClick: function onClick() {
+      return handleWalletBalanceConfirm('apply-deduct-now');
+    }
+  }, getText('pisell2.checkout.wallet-balance-confirm.apply-deduct-now'))))));
+});
+SavePayLaterHandler.displayName = 'SavePayLaterHandler';
+export default SavePayLaterHandler;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ScrollableListProps } from './types';
+import './index.less';
+declare const ScrollableList: React.FC<ScrollableListProps>;
+export default ScrollableList;

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

@@ -0,0 +1,260 @@
+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); }
+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, { useRef, useEffect, useState } from 'react';
+import "./index.less";
+import { ChevronDownDouble } from '@pisell/icon';
+var ScrollableList = function ScrollableList(_ref) {
+  var children = _ref.children,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '100%' : _ref$height,
+    maxHeight = _ref.maxHeight,
+    _ref$gradientHeight = _ref.gradientHeight,
+    gradientHeight = _ref$gradientHeight === void 0 ? 40 : _ref$gradientHeight,
+    _ref$gradientColor = _ref.gradientColor,
+    gradientColor = _ref$gradientColor === void 0 ? 'rgba(255, 255, 255, 0.9)' : _ref$gradientColor,
+    _ref$containerStyle = _ref.containerStyle,
+    containerStyle = _ref$containerStyle === void 0 ? {} : _ref$containerStyle,
+    _ref$contentStyle = _ref.contentStyle,
+    contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
+    _ref$gradientStyle = _ref.gradientStyle,
+    gradientStyle = _ref$gradientStyle === void 0 ? {} : _ref$gradientStyle,
+    _ref$showScrollbar = _ref.showScrollbar,
+    showScrollbar = _ref$showScrollbar === void 0 ? false : _ref$showScrollbar,
+    onScroll = _ref.onScroll,
+    onScrollableChange = _ref.onScrollableChange,
+    _ref$columnCount = _ref.columnCount,
+    columnCount = _ref$columnCount === void 0 ? 1 : _ref$columnCount,
+    _ref$columnGap = _ref.columnGap,
+    columnGap = _ref$columnGap === void 0 ? 16 : _ref$columnGap,
+    _ref$rowGap = _ref.rowGap,
+    rowGap = _ref$rowGap === void 0 ? 16 : _ref$rowGap,
+    _ref$minColumnWidth = _ref.minColumnWidth,
+    minColumnWidth = _ref$minColumnWidth === void 0 ? 200 : _ref$minColumnWidth;
+  var containerRef = useRef(null);
+  var contentRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isScrollable = _useState2[0],
+    setIsScrollable = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showBottomGradient = _useState4[0],
+    setShowBottomGradient = _useState4[1];
+
+  // 根据列数获取对应的CSS类名
+  var getColumnClassName = function getColumnClassName() {
+    if (columnCount === 'auto') {
+      return 'scrollable-list-auto-column';
+    }
+    switch (columnCount) {
+      case 1:
+        return 'scrollable-list-single-column';
+      case 2:
+        return 'scrollable-list-two-column';
+      case 3:
+        return 'scrollable-list-three-column';
+      case 4:
+        return 'scrollable-list-four-column';
+      case 5:
+        return 'scrollable-list-five-column';
+      case 6:
+        return 'scrollable-list-six-column';
+      default:
+        return 'scrollable-list-single-column';
+    }
+  };
+
+  // 计算grid样式
+  var getGridStyle = function getGridStyle() {
+    var style = {};
+
+    // 设置gap样式（行间距和列间距）
+    style.gap = "".concat(rowGap, "px ").concat(columnGap, "px");
+
+    // 如果是自适应列，设置gridTemplateColumns
+    if (columnCount === 'auto') {
+      style.gridTemplateColumns = "repeat(auto-fit, minmax(".concat(minColumnWidth, "px, 1fr))");
+    }
+    return style;
+  };
+
+  // 检查是否需要滚动
+  var checkScrollable = function checkScrollable() {
+    if (containerRef.current && contentRef.current) {
+      var containerHeight = containerRef.current.clientHeight;
+      var contentHeight = contentRef.current.scrollHeight;
+      var scrollTop = containerRef.current.scrollTop;
+
+      // 在flex布局中，容器高度可能需要时间来计算
+      // 如果容器高度异常小，跳过这次检测
+      if (containerHeight < 50) {
+        return;
+      }
+      var maxScrollTop = contentHeight - containerHeight;
+      var needsScroll = contentHeight > containerHeight + 10; // 添加10px容错
+
+      setIsScrollable(needsScroll);
+      if (needsScroll) {
+        // 检查是否显示底部渐变（未滚动到底部）
+        setShowBottomGradient(scrollTop < maxScrollTop - 5);
+      } else {
+        setShowBottomGradient(false);
+      }
+
+      // 通知父组件是否需要滚动
+      onScrollableChange === null || onScrollableChange === void 0 || onScrollableChange(needsScroll);
+    }
+  };
+
+  // 处理滚动事件
+  var handleScroll = function handleScroll(event) {
+    checkScrollable();
+    // 只有当传入的是React事件时才调用onScroll回调
+    if (onScroll && event instanceof Event && event.target) {
+      // 创建一个React.UIEvent兼容的事件对象
+      var reactEvent = _objectSpread(_objectSpread({}, event), {}, {
+        currentTarget: event.target,
+        target: event.target
+      });
+      onScroll(reactEvent);
+    }
+  };
+
+  // 监听内容变化和容器大小变化
+  useEffect(function () {
+    // 多次检测，确保flex布局完全稳定
+    var timeoutIds = [];
+
+    // 第一次检测 - 等待初始渲染
+    timeoutIds.push(setTimeout(function () {
+      checkScrollable();
+    }, 100));
+
+    // 第二次检测 - 等待flex布局稳定
+    timeoutIds.push(setTimeout(function () {
+      checkScrollable();
+    }, 300));
+
+    // 第三次检测 - 最终确认
+    timeoutIds.push(setTimeout(function () {
+      checkScrollable();
+    }, 500));
+
+    // 使用 ResizeObserver 监听容器大小变化
+    var resizeObserver = new ResizeObserver(function () {
+      // 延迟执行，避免多次快速调用
+      setTimeout(function () {
+        checkScrollable();
+      }, 100);
+    });
+
+    // 添加滚动事件监听器
+    var container = containerRef.current;
+    if (container) {
+      resizeObserver.observe(container);
+      container.addEventListener('scroll', handleScroll);
+    }
+    if (contentRef.current) {
+      resizeObserver.observe(contentRef.current);
+    }
+    return function () {
+      timeoutIds.forEach(function (id) {
+        return clearTimeout(id);
+      });
+      resizeObserver.disconnect();
+      if (container) {
+        container.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [children]);
+
+  // 滚动到底部的函数
+  var scrollToBottom = function scrollToBottom() {
+    if (containerRef.current) {
+      containerRef.current.scrollTo({
+        top: containerRef.current.scrollHeight,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  // 底部渐变样式
+  var bottomGradientStyle = _objectSpread({
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: gradientHeight,
+    background: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #A78BE1 100%)',
+    zIndex: 10,
+    opacity: showBottomGradient ? 1 : 0,
+    display: showBottomGradient ? 'flex' : 'none',
+    transition: 'opacity 0.3s ease',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer'
+  }, gradientStyle);
+
+  // 容器样式
+  var finalContainerStyle = _objectSpread({
+    position: 'relative',
+    // 在flex布局中，需要设置明确的高度限制
+    height: containerStyle !== null && containerStyle !== void 0 && containerStyle.flex ? '100%' : height,
+    maxHeight: maxHeight,
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column'
+  }, containerStyle);
+
+  // 内容区域样式
+  var finalContentStyle = _objectSpread(_objectSpread({
+    height: '100%',
+    overflowY: 'auto',
+    // 始终启用滚动，让浏览器处理
+    overflowX: 'hidden',
+    scrollbarWidth: showScrollbar ? 'auto' : 'none',
+    msOverflowStyle: showScrollbar ? 'auto' : 'none'
+  }, contentStyle), showScrollbar ? {} : {
+    '&::WebkitScrollbar': {
+      display: 'none'
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: finalContainerStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    style: finalContentStyle,
+    className: showScrollbar ? '' : 'scrollable-list-hide-scrollbar'
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: "scrollable-list-multi-column-container ".concat(getColumnClassName()),
+    style: getGridStyle()
+  }, children)), isScrollable && /*#__PURE__*/React.createElement("button", {
+    style: _objectSpread(_objectSpread({}, bottomGradientStyle), {}, {
+      border: 'none',
+      background: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #A78BE1 100%)'
+    }, gradientStyle),
+    onClick: scrollToBottom,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    } // 防止点击时产生焦点变化
+    ,
+    "aria-label": "\u6EDA\u52A8\u5230\u5E95\u90E8"
+  }, showBottomGradient && /*#__PURE__*/React.createElement(ChevronDownDouble, {
+    style: {
+      fontSize: 36,
+      color: '#5D3F9F'
+    }
+  })));
+};
+export default ScrollableList;

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

@@ -0,0 +1,93 @@
+.scrollable-list {
+  /* 隐藏滚动条的样式 */
+  &-hide-scrollbar {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 和 Edge */
+    scroll-behavior: smooth; /* 平滑滚动 */
+
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari 和 Opera */
+    }
+  }
+
+  /* 渐变动画 */
+  &-gradient-fade-in {
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  &-gradient-fade-out {
+    animation: fadeOut 0.3s ease-in-out;
+  }
+
+  /* 多列布局样式 */
+  &-multi-column-container {
+    display: grid;
+    gap: 16px; /* 默认间距 */
+
+    /* 单列布局 */
+    &.scrollable-list-single-column {
+      grid-template-columns: 1fr;
+    }
+
+    /* 两列布局 */
+    &.scrollable-list-two-column {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    /* 三列布局 */
+    &.scrollable-list-three-column {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    /* 四列布局 */
+    &.scrollable-list-four-column {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    /* 五列布局 */
+    &.scrollable-list-five-column {
+      grid-template-columns: repeat(5, 1fr);
+    }
+
+    /* 六列布局 */
+    &.scrollable-list-six-column {
+      grid-template-columns: repeat(6, 1fr);
+    }
+
+    /* 自适应列布局 */
+    &.scrollable-list-auto-column {
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* 响应式布局支持 */
+@media (max-width: 768px) {
+  .scrollable-list-multi-column-container:not(.scrollable-list-single-column) {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+}
+
+@media (max-width: 480px) {
+  .scrollable-list-multi-column-container:not(.scrollable-list-single-column) {
+    grid-template-columns: 1fr;
+  }
+}

package/es/components/checkout/components/ScrollableList/types.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode, CSSProperties, UIEvent } from 'react';
+export interface ScrollableListProps {
+    /** 列表项数据 */
+    children: ReactNode;
+    /** 容器高度 */
+    height?: number | string;
+    /** 最大高度 */
+    maxHeight?: number | string;
+    /** 渐变高度 */
+    gradientHeight?: number;
+    /** 渐变颜色 */
+    gradientColor?: string;
+    /** 列表容器样式 */
+    containerStyle?: CSSProperties;
+    /** 列表内容样式 */
+    contentStyle?: CSSProperties;
+    /** 自定义渐变样式 */
+    gradientStyle?: CSSProperties;
+    /** 是否显示滚动条 */
+    showScrollbar?: boolean;
+    /** 滚动事件回调 */
+    onScroll?: (event: UIEvent<HTMLDivElement>) => void;
+    /** 是否需要滚动状态改变回调 */
+    onScrollableChange?: (isScrollable: boolean) => void;
+    /** 列数设置，1为单列，大于1为多列，'auto'为自适应列数 */
+    columnCount?: number | 'auto';
+    /** 列间距，默认为16px */
+    columnGap?: number | string;
+    /** 行间距，默认为16px */
+    rowGap?: number | string;
+    /** 每列最小宽度（当columnCount为'auto'时生效） */
+    minColumnWidth?: number | string;
+}
+export interface ScrollState {
+    /** 是否需要滚动 */
+    isScrollable: boolean;
+    /** 是否显示顶部渐变 */
+    showTopGradient: boolean;
+    /** 是否显示底部渐变 */
+    showBottomGradient: boolean;
+    /** 当前滚动位置 */
+    scrollTop: number;
+    /** 可滚动的最大距离 */
+    maxScrollTop: number;
+}
+export interface GradientConfig {
+    /** 渐变高度 */
+    height: number;
+    /** 渐变颜色 */
+    color: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+}

package/es/components/checkout/components/ScrollableList/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+import './index.less';
+export interface IScanResult {
+    status: 'success' | 'failed';
+    scanType: string;
+    scanCode: string;
+    result: any;
+}
+interface IProps {
+    disabledSwitch?: boolean;
+    onSearch: (keyword: string) => void | Promise<any>;
+    onClientChange: () => void;
+}
+declare const SearchAndClientModule: (props: IProps) => JSX.Element;
+export default SearchAndClientModule;