@pisell/private-materials 6.4.56 → 6.4.57

package/es/components/ticketBooking/components/ProductDisplayAdapter/ProductDisplayAdapter.js

@@ -0,0 +1,143 @@
+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 _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; }
+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, { useMemo, useRef } from 'react';
+import { useSize } from 'ahooks';
+import ProductSelect from "../../../../plus/productSelect";
+import List from "../../../list/List";
+import SkuCard from "../../../../plus/productSelect/ProductCard/SkuCard";
+import { formatSkuDataSource, generateProductTabs } from "./utils";
+import "./index.less";
+/**
+ * 产品展示适配器组件
+ * 统一管理 ProductSelect 和 SkuList 两种展示模式
+ */
+var ProductDisplayAdapter = function ProductDisplayAdapter(props) {
+  var config = props.config,
+    dataSource = props.dataSource,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    currentProductId = props.currentProductId,
+    onSelectProduct = props.onSelectProduct,
+    emptyDescription = props.emptyDescription,
+    style = props.style,
+    className = props.className;
+  var _config$displayMode = config.displayMode,
+    displayMode = _config$displayMode === void 0 ? 'product-select' : _config$displayMode;
+  var listRef = useRef(null);
+  var size = useSize(listRef);
+
+  // 渲染 ProductSelect 模式
+  var renderProductSelect = useMemo(function () {
+    var _ref = config.productSelectConfig || {},
+      _ref$showSearch = _ref.showSearch,
+      showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
+      _ref$showTab = _ref.showTab,
+      showTab = _ref$showTab === void 0 ? true : _ref$showTab,
+      _ref$layout = _ref.layout,
+      layout = _ref$layout === void 0 ? {
+        grid: true,
+        config: '12:12'
+      } : _ref$layout,
+      _ref$productListSetti = _ref.productListSetting,
+      productListSetting = _ref$productListSetti === void 0 ? {
+        isProductCover: 1,
+        isTitle: 1,
+        isSubtitle: 1,
+        isPrice: 1,
+        isOriginPrice: 0,
+        isStock: 0
+      } : _ref$productListSetti;
+    return /*#__PURE__*/React.createElement(ProductSelect, {
+      dataSource: dataSource,
+      layout: layout,
+      onChange: onSelectProduct,
+      value: currentProductId,
+      loading: loading,
+      productListSetting: productListSetting,
+      showSearch: showSearch,
+      showTab: showTab,
+      emptyDescription: emptyDescription,
+      style: style
+    });
+  }, [config.productSelectConfig, dataSource, currentProductId, onSelectProduct, loading, emptyDescription, style]);
+
+  // 渲染 SkuList 模式
+  var renderSkuList = useMemo(function () {
+    var _ref2 = config.skuListConfig || {},
+      _ref2$listConfig = _ref2.listConfig,
+      listConfig = _ref2$listConfig === void 0 ? {} : _ref2$listConfig,
+      _ref2$skuCardAllConfi = _ref2.skuCardAllConfig,
+      skuCardAllConfig = _ref2$skuCardAllConfi === void 0 ? {} : _ref2$skuCardAllConfi;
+
+    // 从配置中获取各项配置
+    var displayStyle = listConfig.layout || 'grid';
+    var columns = listConfig.columns || 2;
+    var paginationType = listConfig.showPagination ? 'pager' : 'all';
+    var enableTab = listConfig.showTab || false;
+    var tabStyle = listConfig.tabStyle || 'switch';
+    var stickyTop = listConfig.stickyTop !== undefined ? listConfig.stickyTop : true;
+    var tabData = enableTab ? generateProductTabs(dataSource, tabStyle) : undefined;
+    var filteredData = dataSource.map(function (item) {
+      var _item$category, _item$category$map;
+      return _objectSpread(_objectSpread({}, item), {}, {
+        category: ((_item$category = item.category) === null || _item$category === void 0 || (_item$category$map = _item$category.map) === null || _item$category$map === void 0 ? void 0 : _item$category$map.call(_item$category, function (category) {
+          return "".concat(category.id);
+        })) || []
+      });
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: "sku-list-container ".concat(className || ''),
+      style: style,
+      ref: listRef
+    }, /*#__PURE__*/React.createElement(List, {
+      className: "sku-list",
+      style: {
+        maxHeight: size === null || size === void 0 ? void 0 : size.height,
+        overflow: 'auto'
+      },
+      data: filteredData,
+      loading: loading,
+      displayStyle: displayStyle,
+      columns: columns,
+      paginationType: paginationType,
+      layoutDirection: "vertical"
+      // Tab 配置
+      ,
+      tabStyle: enableTab ? tabStyle : 'none',
+      tabData: tabData,
+      tabGroup: "category",
+      stickyTop: stickyTop
+      // 空状态配置
+      ,
+      emptyConfig: {
+        show: !loading && filteredData.length === 0,
+        text: emptyDescription
+      },
+      renderItem: function renderItem(item, index) {
+        return /*#__PURE__*/React.createElement(SkuCard, _extends({
+          key: item.id
+        }, skuCardAllConfig, {
+          dataSource: formatSkuDataSource(item),
+          onCardClick: function onCardClick() {
+            return onSelectProduct(item);
+          },
+          isSelected: item.id === currentProductId
+        }));
+      }
+    }));
+  }, [config.skuListConfig, dataSource, loading, currentProductId, onSelectProduct, emptyDescription, style, className, size === null || size === void 0 ? void 0 : size.height]);
+
+  // 根据配置渲染对应模式
+  if (displayMode === 'sku-list') {
+    return renderSkuList;
+  }
+
+  // 默认使用 product-select 模式
+  return renderProductSelect;
+};
+export default ProductDisplayAdapter;

package/es/components/ticketBooking/components/ProductDisplayAdapter/index.js

@@ -0,0 +1,7 @@
+/**
+ * ProductDisplayAdapter 产品展示适配器
+ * 支持通过配置化方式在 ProductSelect 和 SkuList 两种展示模式之间切换
+ */
+
+export { default } from "./ProductDisplayAdapter";
+export { ProductDisplayPresets, LegacyProductDisplayPresets, resolveProductDisplayConfig } from "./types";

package/es/components/ticketBooking/components/ProductDisplayAdapter/index.less

@@ -0,0 +1,41 @@
+.sku-list-container {
+  height: 100%;
+  background-color: #4e4e4e;
+  .sku-list {
+    background-color: #4e4e4e;
+    overflow: auto;
+    border-radius: 0;
+    .list-group-items {
+      .list-item {
+        height: 100% !important;
+        .pisell-product-sku__card-wrapper {
+          height: 100% ;
+          .pisell-lowcode-card {
+            height: 100% !important;
+          }
+        }
+      }
+    }
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+  .list-content {
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+  .pisell-list-header {
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+}

package/es/components/ticketBooking/components/ProductDisplayAdapter/types.js

@@ -0,0 +1,273 @@
+/**
+ * 产品展示配置类型定义
+ */
+
+// 导入 SkuCard 的完整类型定义
+
+/** 预设配置的字符串键 */
+
+// 同 'product-select'
+
+/** ProductSelect 布局配置 */
+
+/** ProductSelect 列表设置 */
+
+/** ProductSelect 模式配置 */
+
+/** SkuCard 显示模式 */
+
+/**
+ * SkuCard 配置
+ * 直接使用 ProductCardConfig 类型，保持类型同步
+ *
+ * @see packages/private-materials/src/plus/productSelect/ProductCard/SkuCard/type.ts ProductCardConfig
+ */
+
+/** List 布局类型 */
+
+/** Tab 样式类型 */
+
+/** List 组件配置 */
+
+/** SkuList 模式配置 */
+
+/** 展示模式类型 */
+
+/**
+ * 产品展示配置
+ * 用于配置化控制产品展示的方式
+ */
+
+/**
+ * 产品展示配置预设
+ * 支持通过字符串键或直接使用配置对象
+ */
+export var ProductDisplayPresets = {
+  // 默认配置
+  default: {
+    displayMode: 'product-select',
+    productSelectConfig: {
+      showSearch: true,
+      showTab: true,
+      layout: {
+        grid: true,
+        config: '12:12'
+      },
+      productListSetting: {
+        isProductCover: 1,
+        isTitle: 1,
+        isSubtitle: 1,
+        isPrice: 1,
+        isOriginPrice: 0,
+        isStock: 0
+      }
+    }
+  },
+  // 别名：product-select
+  'product-select': {
+    displayMode: 'product-select',
+    productSelectConfig: {
+      showSearch: true,
+      showTab: true,
+      layout: {
+        grid: true,
+        config: '12:12'
+      },
+      productListSetting: {
+        isProductCover: 1,
+        isTitle: 1,
+        isSubtitle: 1,
+        isPrice: 1,
+        isOriginPrice: 0,
+        isStock: 0
+      }
+    }
+  },
+  // SkuList A1
+  'sku-list-a1': {
+    displayMode: 'sku-list',
+    skuListConfig: {
+      listConfig: {
+        layout: 'grid',
+        showPagination: false,
+        showTab: false
+      },
+      skuCardAllConfig: {
+        skuCardConfig: {
+          displayMode: 'display_a1',
+          isFavorite: false,
+          layoutDirection: 'column'
+        }
+      }
+    }
+  },
+  // SkuList A2 - 详细信息卡片
+  'sku-list-a2': {
+    displayMode: 'sku-list',
+    skuListConfig: {
+      listConfig: {
+        layout: 'grid',
+        showPagination: false,
+        showTab: false
+      },
+      skuCardAllConfig: {
+        skuCardConfig: {
+          displayMode: 'display_a2',
+          layoutDirection: 'row',
+          radius: 12,
+          paddingX: 12,
+          paddingY: 12,
+          skuImageConfig: {
+            isCover: true,
+            width: '140px',
+            height: '140px',
+            radius: 8
+          },
+          skuNameConfig: {
+            isOpen: true,
+            fontSize: 16,
+            fontWeight: 600,
+            color: '#101828',
+            ellipsisCount: 2
+          },
+          skuSubtitleConfig: {
+            isOpen: true,
+            fontSize: 14,
+            color: '#667085',
+            ellipsisCount: 1
+          },
+          skuPriceConfig: {
+            isOpen: true,
+            isPrice: true,
+            priceFontSize: 18,
+            priceFontWeight: 600,
+            priceColor: '#101828',
+            isOriginPrice: true,
+            originPriceFontSize: 14,
+            originPriceColor: '#98A2B3'
+          },
+          skuStockConfig: {
+            isOpen: true,
+            fontSize: 12,
+            color: '#667085'
+          }
+        }
+      }
+    }
+  },
+  // SkuList A5
+  'sku-list-a5': {
+    displayMode: 'sku-list',
+    skuListConfig: {
+      listConfig: {
+        layout: 'grid',
+        showPagination: false,
+        showTab: true,
+        // 启用 Tab
+        tabStyle: 'switch',
+        // 使用 switch 模式
+        stickyTop: true,
+        // Tab 吸顶
+        columns: 5,
+        tabGroup: 'category'
+      },
+      skuCardAllConfig: {
+        skuCardConfig: {
+          displayMode: 'display_a5',
+          layoutDirection: 'column',
+          background: '#ffffff',
+          paddingY: 8,
+          paddingX: 8,
+          marginY: 0,
+          marginX: 0,
+          radius: 12,
+          isBorderVisible: false,
+          borderWidth: 1,
+          borderColor: '#ffffff',
+          isFoldable: true
+        },
+        skuActionConfig: {
+          isOpen: false
+        },
+        skuTextConfig: {
+          skuSubtitleConfig: {
+            isOpen: false
+          },
+          skuNameConfig: {
+            isOpen: true
+            // fontSize: 18,
+            // fontWeight: 600,
+            // color: '#101828',
+            // ellipsisCount: 1,
+          },
+          skuPriceConfig: {
+            isOpen: true,
+            isPrice: true,
+            priceFontSize: 18,
+            priceFontWeight: 600,
+            priceColor: '#101828',
+            isShowZeroPrice: true,
+            isShowFreePrice: false,
+            isOriginPrice: true,
+            originPriceFontSize: 16,
+            originPriceFontWeight: 400,
+            originPriceColor: '#667085',
+            isTaxPrice: true,
+            isCustomText: false
+          }
+        },
+        skuImageConfig: {
+          isCover: true,
+          width: '100%',
+          height: '126px',
+          isTextFallback: true,
+          background: '#ffffff',
+          skuImageRadius: 12,
+          slotPosition: 'left_top',
+          radius: 12
+        },
+        skuExtraConfig: {
+          isOpen: false
+        }
+      }
+    }
+  }
+};
+
+/**
+ * 兼容性：保持原有的导出方式
+ * @deprecated 建议使用 ProductDisplayPresets['product-select'] 或字符串键访问
+ */
+export var LegacyProductDisplayPresets = {
+  /** @deprecated 使用 ProductDisplayPresets['product-select'] */
+  DEFAULT_PRODUCT_SELECT: ProductDisplayPresets['product-select'],
+  /** @deprecated 使用 ProductDisplayPresets['sku-list-a1'] */
+  DEFAULT_SKU_LIST_A1: ProductDisplayPresets['sku-list-a1'],
+  /** @deprecated 使用 ProductDisplayPresets['sku-list-a2'] */
+  DEFAULT_SKU_LIST_A2: ProductDisplayPresets['sku-list-a2'],
+  /** @deprecated 使用 ProductDisplayPresets['sku-list-a5'] */
+  DEFAULT_SKU_LIST_A5: ProductDisplayPresets['sku-list-a5']
+};
+
+/**
+ * 工具函数：将字符串键或配置对象解析为配置对象
+ */
+export function resolveProductDisplayConfig(config) {
+  // 未传配置，使用默认
+  if (!config) {
+    return ProductDisplayPresets['default'];
+  }
+
+  // 如果是字符串，从预设中获取
+  if (typeof config === 'string') {
+    var preset = ProductDisplayPresets[config];
+    if (!preset) {
+      console.warn("Unknown preset key: \"".concat(config, "\", falling back to default"));
+      return ProductDisplayPresets['default'];
+    }
+    return preset;
+  }
+
+  // 如果是对象，直接返回
+  return config;
+}

package/es/components/ticketBooking/components/ProductDisplayAdapter/utils.js

@@ -0,0 +1,130 @@
+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; }
+/**
+ * 格式化 SKU 数据源，适配 SkuCard 组件
+ */
+export var formatSkuDataSource = function formatSkuDataSource(dataSource) {
+  return {
+    id: dataSource.id,
+    title: dataSource.title,
+    subtitle: dataSource.subtitle,
+    cover: dataSource.cover,
+    price: dataSource.price,
+    original_price: dataSource.original_price,
+    stock: dataSource.stock_quantity,
+    sortKeys: ['title', 'subtitle', 'price']
+  };
+};
+
+/**
+ * Tab 项接口定义（与 List 组件保持一致）
+ */
+
+/**
+ * 产品分类信息接口
+ */
+
+/**
+ * 产品项接口
+ */
+
+/**
+ * 根据产品数据生成分类 Tabs（Switch 模式）
+ * 参考 TestResponsiveWrapper 的 generateSimpleTabItems 函数
+ * 
+ * @param products 产品列表
+ * @param tabStyle tab 样式类型
+ * @returns TabItem 数组
+ */
+export var generateProductTabs = function generateProductTabs(products) {
+  var tabStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'switch';
+  if (!products || products.length === 0) {
+    return [{
+      key: 'all',
+      label: '全部'
+    }];
+  }
+  if (tabStyle === 'switch') {
+    // 切换模式：提取产品的分类信息，不显示动态数量
+    var categoryMap = new Map();
+
+    // 收集所有分类
+    products.forEach(function (product) {
+      if (product.category && Array.isArray(product.category)) {
+        product.category.forEach(function (cat) {
+          if (!categoryMap.has(cat.id)) {
+            categoryMap.set(cat.id, cat);
+          }
+        });
+      }
+    });
+
+    // 按 sort 字段排序（降序，sort 越大越靠前）
+    var sortedCategories = Array.from(categoryMap.values()).sort(function (a, b) {
+      return (b.sort || 0) - (a.sort || 0);
+    });
+
+    // 生成 tabs
+    var tabs = [{
+      key: 'all',
+      label: '全部'
+    }];
+    sortedCategories.forEach(function (category) {
+      tabs.push({
+        key: String(category.id),
+        label: category.name,
+        group: String(category.id)
+      });
+    });
+    return tabs;
+  } else {
+    // 锚点模式：基于实际数据统计数量
+    var categoryCount = products.reduce(function (acc, product) {
+      if (product.category && Array.isArray(product.category)) {
+        product.category.forEach(function (cat) {
+          var key = String(cat.id);
+          if (!acc[key]) {
+            acc[key] = {
+              count: 0,
+              category: cat
+            };
+          }
+          acc[key].count += 1;
+        });
+      }
+      return acc;
+    }, {});
+
+    // 生成 tabs
+    var _tabs = [{
+      key: 'all',
+      label: "\u5168\u90E8 (".concat(products.length, ")")
+    }];
+
+    // 按 sort 排序
+    var sortedEntries = Object.entries(categoryCount).sort(function (_ref, _ref2) {
+      var _ref3 = _slicedToArray(_ref, 2),
+        a = _ref3[1];
+      var _ref4 = _slicedToArray(_ref2, 2),
+        b = _ref4[1];
+      return (b.category.sort || 0) - (a.category.sort || 0);
+    });
+    sortedEntries.forEach(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        key = _ref6[0],
+        _ref6$ = _ref6[1],
+        count = _ref6$.count,
+        category = _ref6$.category;
+      _tabs.push({
+        key: key,
+        label: "".concat(category.name, " (").concat(count, ")"),
+        group: key
+      });
+    });
+    return _tabs;
+  }
+};

package/es/components/ticketBooking/components/addServiceVariant/addService.d.ts

@@ -1,9 +1,29 @@
+import { ProductDisplayConfig, ProductDisplayPresetKey } from '../ProductDisplayAdapter';
 import './index.less';
 interface AddServiceProps {
     onEdit?: any;
     dispatch?: any;
     state?: any;
     renderMode?: 'current' | 'drawer';
+    /**
+     * 产品展示配置
+     *
+     * 支持两种方式：
+     * 1. 简易模式：传入预设字符串，如 'product-select', 'sku-list-a1', 'sku-list-a2', 'sku-list-a5'
+     * 2. 完整配置模式：传入完整的配置对象
+     *
+     * @example
+     * // 简易模式
+     * <AddService productDisplayConfig="sku-list-a1" />
+     *
+     * @example
+     * // 完整配置模式
+     * <AddService productDisplayConfig={{
+     *   displayMode: 'sku-list',
+     *   skuListConfig: { ... }
+     * }} />
+     */
+    productDisplayConfig?: ProductDisplayPresetKey | ProductDisplayConfig;
 }
 declare const AddSerivce: (props: AddServiceProps) => JSX.Element | null;
 export default AddSerivce;