@pisell/private-materials 6.3.33 → 6.3.35

package/es/plus/walletEditor/components/ValidityPeriodSelector/index.js

@@ -0,0 +1,222 @@
+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, useEffect, useMemo } from 'react';
+import { Select, DatePicker, Form } from 'antd';
+import dayjs from 'dayjs';
+import useEngineContext from "../../../../hooks/useEngineContext";
+import localeTexts from "../../locales";
+import { locales } from '@pisell/utils';
+var Option = Select.Option;
+
+// 有效期配置类型 - 扩展原有的ValidForConfig
+
+// 预定义的有效期选项值
+var DEFAULT_VALIDITY_OPTIONS = [{
+  unit: '1',
+  unit_type: 'day',
+  type: 'normal'
+}, {
+  unit: '14',
+  unit_type: 'day',
+  type: 'normal'
+}, {
+  unit: '1',
+  unit_type: 'month',
+  type: 'normal'
+}, {
+  unit: '2',
+  unit_type: 'month',
+  type: 'normal'
+}, {
+  unit: '3',
+  unit_type: 'month',
+  type: 'normal'
+}, {
+  unit: '4',
+  unit_type: 'month',
+  type: 'normal'
+}, {
+  unit: '5',
+  unit_type: 'month',
+  type: 'normal'
+}, {
+  unit: '6',
+  unit_type: 'month',
+  type: 'normal'
+}, {
+  unit: '1',
+  unit_type: 'year',
+  type: 'normal'
+}, {
+  unit: '3',
+  unit_type: 'year',
+  type: 'normal'
+}, {
+  type: 'forever'
+}, {
+  custom_date: '',
+  type: 'custom'
+}];
+
+// 将选项值转换为显示标签的函数
+var getOptionLabel = function getOptionLabel(option) {
+  if (option.type === 'forever') {
+    return locales.getText('forever');
+  }
+  if (option.type === 'custom') {
+    return locales.getText('custom');
+  }
+  var unitMap = {
+    day: locales.getText('day'),
+    month: locales.getText('month'),
+    year: locales.getText('year'),
+    days: locales.getText('days'),
+    months: locales.getText('months'),
+    years: locales.getText('years')
+  };
+  var unit = option.unit,
+    unit_type = option.unit_type;
+  if (Number(unit) > 1) {
+    return "".concat(unit, " ").concat(unitMap[unit_type + 's']);
+  }
+  return "".concat(unit, " ").concat(unitMap[unit_type]);
+};
+
+// 将ValidityPeriodValue对象转换为字符串值
+var transformValueToString = function transformValueToString(option) {
+  if (option.type === 'forever') {
+    return 'forever';
+  }
+  if (option.type === 'custom') {
+    return 'custom';
+  }
+  // normal类型：unit值 + unit_type的形式
+  return "".concat(option.unit).concat(option.unit_type);
+};
+
+// 将字符串值转换回ValidityPeriodValue对象
+var transformStringToValue = function transformStringToValue(stringValue) {
+  if (stringValue === 'forever') {
+    return {
+      type: 'forever'
+    };
+  }
+  if (stringValue === 'custom') {
+    return {
+      type: 'custom',
+      custom_date: ''
+    };
+  }
+
+  // 解析normal类型的值，例如 "1day", "2month", "3year"
+  var match = stringValue.match(/^(\d+)(day|month|year)$/);
+  if (match) {
+    var _match = _slicedToArray(match, 3),
+      unit = _match[1],
+      unit_type = _match[2];
+    return {
+      type: 'normal',
+      unit: unit,
+      unit_type: unit_type
+    };
+  }
+
+  // 默认返回值
+  return {
+    type: 'normal',
+    unit: '1',
+    unit_type: 'day'
+  };
+};
+var ValidityPeriodSelector = function ValidityPeriodSelector(_ref) {
+  var _context$appHelper$ut;
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    placeholder = _ref.placeholder,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? DEFAULT_VALIDITY_OPTIONS : _ref$options;
+  var context = useEngineContext();
+  locales.init(localeTexts, ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut = _context$appHelper$ut.storage) === null || _context$appHelper$ut === void 0 ? void 0 : _context$appHelper$ut.get('umi_locale')) || 'en');
+  var defaultPlaceholder = placeholder || locales.getText('selectValidityPeriod');
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showCustomDate = _useState2[0],
+    setShowCustomDate = _useState2[1];
+  var _useState3 = useState(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentValue = _useState4[0],
+    setCurrentValue = _useState4[1];
+
+  // 使用useMemo转换选项值为带标签的选项
+  var validityOptions = useMemo(function () {
+    return options.map(function (option) {
+      return {
+        label: getOptionLabel(option),
+        value: transformValueToString(option)
+      };
+    });
+  }, [options]);
+  useEffect(function () {
+    setCurrentValue(value);
+    setShowCustomDate((value === null || value === void 0 ? void 0 : value.type) === 'custom');
+  }, [value]);
+  var handleSelectChange = function handleSelectChange(selectedValue) {
+    var parsedValue = transformStringToValue(selectedValue);
+    setCurrentValue(parsedValue);
+    setShowCustomDate(parsedValue.type === 'custom');
+    if (parsedValue.type !== 'custom') {
+      onChange === null || onChange === void 0 || onChange(parsedValue);
+    }
+  };
+  var handleDateChange = function handleDateChange(date, dateString) {
+    if (date && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.type) === 'custom') {
+      var newValue = {
+        type: 'custom',
+        custom_date: date.format('YYYY-MM-DD')
+      };
+      setCurrentValue(newValue);
+      onChange === null || onChange === void 0 || onChange(newValue);
+    }
+  };
+  var getSelectValue = function getSelectValue() {
+    if (!currentValue) return undefined;
+    return transformValueToString(currentValue);
+  };
+  var renderOptions = function renderOptions() {
+    return validityOptions.map(function (option) {
+      return /*#__PURE__*/React.createElement(Option, {
+        key: option.label,
+        value: option.value
+      }, option.label);
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
+    placeholder: defaultPlaceholder,
+    onChange: handleSelectChange,
+    value: getSelectValue(),
+    disabled: disabled,
+    style: {
+      width: '100%'
+    }
+  }, renderOptions()), showCustomDate && /*#__PURE__*/React.createElement(Form.Item, {
+    label: locales.getText('custom'),
+    style: {
+      marginBottom: 0
+    }
+  }, /*#__PURE__*/React.createElement(DatePicker, {
+    placeholder: locales.getText('selectCustomDate'),
+    onChange: handleDateChange,
+    value: (currentValue === null || currentValue === void 0 ? void 0 : currentValue.type) === 'custom' && currentValue.custom_date ? dayjs(currentValue.custom_date) : undefined,
+    disabled: disabled,
+    style: {
+      width: '100%'
+    }
+  })));
+};
+export default ValidityPeriodSelector;

package/es/plus/walletEditor/components/ValidityPeriodSelector/index.less

@@ -0,0 +1,4 @@
+// ValidityPeriodSelector组件样式
+.validity-period-selector {
+  // 可以在这里添加特定的样式
+}

package/es/plus/walletEditor/components/relationProduct/index.d.ts

@@ -0,0 +1,6 @@
+import './index.less';
+declare const RelationProduct: ({ value, onChange, }: {
+    value?: string[] | undefined;
+    onChange?: ((val: string[]) => void) | undefined;
+}) => JSX.Element | null;
+export default RelationProduct;

package/es/plus/walletEditor/components/relationProduct/index.js

@@ -0,0 +1,49 @@
+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 } from 'react';
+import { Button } from 'antd';
+import { locales } from '@pisell/utils';
+import useComponents from "../../../../hooks/useComponents";
+import "./index.less";
+var RelationProduct = function RelationProduct(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  var linkerRef = useRef(null);
+  var _useComponents = useComponents({
+      components: ['RelationProduct']
+    }),
+    _useComponents2 = _slicedToArray(_useComponents, 1),
+    RelationProduct = _useComponents2[0];
+  if (!(RelationProduct !== null && RelationProduct !== void 0 && RelationProduct.PassLinker)) return null;
+  var onShow = function onShow() {
+    if (linkerRef.current) {
+      var _linkerRef$current$op, _linkerRef$current;
+      (_linkerRef$current$op = (_linkerRef$current = linkerRef.current).openModal) === null || _linkerRef$current$op === void 0 || _linkerRef$current$op.call(_linkerRef$current);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "product-detail-card-module"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "linked-passes-empty-state"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "linked-passes-description"
+  }, locales.getText('linkedPassesDesc')), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    size: "large",
+    onClick: onShow,
+    className: "select-passes-button"
+  }, locales.getText('selectPasses')), value && value.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 8
+    }
+  }) : null, /*#__PURE__*/React.createElement(RelationProduct.PassLinker, {
+    ref: linkerRef,
+    value: value,
+    onChange: onChange
+  })));
+};
+export default RelationProduct;

package/es/plus/walletEditor/components/relationProduct/index.less

@@ -0,0 +1,15 @@
+.linked-passes-empty-state { 
+  .linked-passes-description {
+    font-size: 16px;
+    color: #6b7280;
+    margin: 0 0 16px 0;
+    line-height: 1.5;
+  }
+  
+  .select-passes-button {
+    min-width: 200px;
+    height: 40px;
+    border-radius: 8px;
+    font-weight: 500;
+  }
+}

package/es/plus/walletEditor/components/sortableWalletPassTypes/index.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import './index.less';
+export declare type WalletPassType = 'rechargeable' | 'point' | 'voucher' | 'discount';
+export interface MultiLanguageTitle {
+    original?: string;
+    en?: string;
+    'zh-CN'?: string;
+    'zh-HK'?: string;
+}
+export interface WalletPassItem {
+    /** 钱包通行证类型 */
+    type: WalletPassType;
+    /** 是否显示，1表示显示，0表示隐藏 */
+    display: 0 | 1;
+    /** 自定义标题，支持多语言 */
+    custom_title?: MultiLanguageTitle;
+}
+export interface SortableWalletPassTypesProps {
+    /** 当前值，包含各种钱包通行证类型的配置 */
+    value?: WalletPassItem[];
+    /** 值变化时的回调函数 */
+    onChange?: (value: WalletPassItem[]) => void;
+    /** 是否禁用编辑 */
+    disabled?: boolean;
+    /** 组件类名 */
+    className?: string;
+    /** 组件样式 */
+    style?: React.CSSProperties;
+}
+/** 默认的钱包通行证类型配置 */
+export interface WalletPassTypeInfo {
+    type: WalletPassType;
+    custom_title: MultiLanguageTitle;
+}
+export declare const DEFAULT_WALLET_PASS_TYPES_CONFIG: WalletPassTypeInfo[];
+declare const SortableWalletPassTypes: React.FC<SortableWalletPassTypesProps>;
+export default SortableWalletPassTypes;

package/es/plus/walletEditor/components/sortableWalletPassTypes/index.js

@@ -0,0 +1,193 @@
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+import React, { useMemo, useCallback } from 'react';
+import { EyeOutlined, EyeInvisibleOutlined, HolderOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import { PisellText, SortableList } from '@pisell/materials';
+import "./index.less";
+var Editable = PisellText.Editable;
+// import Editable from '@pisell/materials/src/components/pisellText/components/Editable';
+
+// Types
+
+/** 默认的钱包通行证类型配置 */
+
+var WALLET_PASS_TYPES = ['rechargeable', 'point', 'voucher', 'discount'];
+
+// 默认的钱包通行证类型配置
+export var DEFAULT_WALLET_PASS_TYPES_CONFIG = [{
+  type: 'rechargeable',
+  custom_title: {
+    original: 'Balance',
+    en: 'Balance',
+    'zh-CN': '余额',
+    'zh-HK': '餘額'
+  }
+}, {
+  type: 'point',
+  custom_title: {
+    original: 'Points',
+    en: 'Points',
+    'zh-CN': '积分',
+    'zh-HK': '積分'
+  }
+}, {
+  type: 'voucher',
+  custom_title: {
+    original: 'Voucher',
+    en: 'Voucher',
+    'zh-CN': '代金券',
+    'zh-HK': '代金券'
+  }
+}, {
+  type: 'discount',
+  custom_title: {
+    original: 'Discount',
+    en: 'Discount',
+    'zh-CN': '折扣券',
+    'zh-HK': '折扣券'
+  }
+}];
+var SortableWalletPassTypes = function SortableWalletPassTypes(props) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? [] : _props$value,
+    onChange = props.onChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    className = props.className,
+    style = props.style;
+
+  // 生成完整的数据源，确保四种类型都存在，保持外部传入的顺序
+  var dataSource = useMemo(function () {
+    var result = [];
+    var processedTypes = new Set();
+
+    // 首先按照 value 的顺序添加已存在的项
+    value.forEach(function (item) {
+      if (WALLET_PASS_TYPES.includes(item.type) && !processedTypes.has(item.type)) {
+        result.push(item);
+        processedTypes.add(item.type);
+      }
+    });
+
+    // 然后添加缺失的默认类型
+    DEFAULT_WALLET_PASS_TYPES_CONFIG.forEach(function (defaultType) {
+      if (!processedTypes.has(defaultType.type)) {
+        result.push({
+          type: defaultType.type,
+          display: 0,
+          custom_title: defaultType.custom_title
+        });
+      }
+    });
+    return result;
+  }, [value]);
+
+  // 处理排序变化
+  var handleSortChange = useCallback(function (newList) {
+    if (!onChange || disabled) return;
+    onChange(newList);
+  }, [onChange, disabled]);
+
+  // 处理显示/隐藏切换
+  var handleToggleDisplay = useCallback(function (index) {
+    if (!onChange || disabled) return;
+    var newList = _toConsumableArray(dataSource);
+    newList[index] = _objectSpread(_objectSpread({}, newList[index]), {}, {
+      display: newList[index].display === 1 ? 0 : 1
+    });
+    onChange(newList);
+  }, [dataSource, onChange, disabled]);
+
+  // 处理标题编辑
+  var handleTitleChange = useCallback(function (index, newTitle) {
+    if (!onChange || disabled) return;
+    var newList = _toConsumableArray(dataSource);
+    newList[index] = _objectSpread(_objectSpread({}, newList[index]), {}, {
+      custom_title: typeof newTitle === 'string' ? {
+        original: newTitle,
+        en: newTitle
+      } : newTitle
+    });
+    onChange(newList);
+  }, [dataSource, onChange, disabled]);
+
+  // 获取显示标题
+  var getDisplayTitle = useCallback(function (item) {
+    var defaultType = DEFAULT_WALLET_PASS_TYPES_CONFIG.find(function (t) {
+      return t.type === item.type;
+    });
+    return item.custom_title || (defaultType === null || defaultType === void 0 ? void 0 : defaultType.custom_title) || {
+      original: item.type,
+      en: item.type
+    };
+  }, []);
+
+  // 渲染单个项
+  var renderItem = useCallback(function (item, index) {
+    var displayTitle = getDisplayTitle(item);
+    var isVisible = item.display === 1;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('sortable-wallet-pass-item', {
+        'sortable-wallet-pass-item-disabled': disabled,
+        'sortable-wallet-pass-item-hidden': !isVisible
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sortable-wallet-pass-drag-handle"
+    }, /*#__PURE__*/React.createElement(HolderOutlined, {
+      className: "drag-dots",
+      size: 20
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "sortable-wallet-pass-title"
+    }, /*#__PURE__*/React.createElement(Editable, {
+      value: displayTitle,
+      editable: !disabled && {
+        maxLength: 10
+      },
+      onChange: function onChange(newValue) {
+        return handleTitleChange(index, newValue);
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "sortable-wallet-pass-toggle"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      style: {
+        cursor: 'pointer',
+        border: 'none',
+        background: 'transparent'
+      },
+      onClick: function onClick() {
+        return handleToggleDisplay(index);
+      }
+    }, isVisible ? /*#__PURE__*/React.createElement(EyeOutlined, {
+      className: "eye-icon eye-icon-visible"
+    }) : /*#__PURE__*/React.createElement(EyeInvisibleOutlined, {
+      className: "eye-icon eye-icon-hidden"
+    }))));
+  }, [disabled, getDisplayTitle, handleTitleChange, handleToggleDisplay]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('sortable-wallet-pass-types', className, {
+      'sortable-wallet-pass-types-disabled': disabled
+    }),
+    style: style
+  }, /*#__PURE__*/React.createElement(SortableList, {
+    dataSource: dataSource,
+    onChange: handleSortChange,
+    rowKey: "type",
+    renderItem: renderItem,
+    activationConstraint: {
+      distance: 5
+    }
+  }));
+};
+export default SortableWalletPassTypes;

package/es/plus/walletEditor/components/sortableWalletPassTypes/index.less

@@ -0,0 +1,110 @@
+.sortable-wallet-pass-types {
+  background: #fff;
+  border-radius: 8px;
+
+  &-disabled {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+}
+
+.sortable-wallet-pass-item {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fff;
+  transition: all 0.2s ease;
+  cursor: grab;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: #fafafa;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+
+    &:hover {
+      background: #fff;
+    }
+  }
+
+  &-hidden {
+    .sortable-wallet-pass-title {
+      opacity: 0.5;
+    }
+  }
+}
+
+.sortable-wallet-pass-drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  font-size: 18px;
+  cursor: grab;
+  line-height: 1;
+
+  .drag-dots {
+    display: inline-block;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.sortable-wallet-pass-title {
+  flex: 1;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+  font-weight: bold;
+
+  .pisell-text-editable {
+    min-width: 120px;
+  }
+}
+
+.sortable-wallet-pass-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #f5f5f5;
+  }
+
+  .eye-icon {
+    font-size: 16px;
+  }
+}
+
+// 拖拽时的样式
+.sortable-wallet-pass-item[data-dnd-dragging='true'] {
+  background: #e6f7ff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  transform: rotate(3deg);
+}
+
+// 拖拽占位符样式
+.sortable-wallet-pass-item[data-dnd-placeholder='true'] {
+  background: #f0f2f5;
+  border: 2px dashed #d9d9d9;
+  opacity: 0.6;
+}

package/es/plus/walletEditor/index.d.ts

@@ -0,0 +1,3 @@
+import WalletEditor from './WalletEditor';
+export default WalletEditor;
+export * from './types';

package/es/plus/walletEditor/index.js

@@ -0,0 +1,3 @@
+import WalletEditor from "./WalletEditor";
+export default WalletEditor;
+export * from "./types";