@pisell/private-materials 3.4.16 → 3.4.18

package/es/plus/productSelect/ProductCard/index.js

@@ -0,0 +1,170 @@
+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, { memo } from 'react';
+import classNames from 'classnames';
+import { locales, image as imageAli } from '@pisell/utils';
+import Decimal from 'decimal.js';
+import { IntersectionTrigger } from "../components/IntersectionObserver";
+import PisellPriceText from "../components/pisellPriceText";
+import ProductCardSkeleton from "./ProductCardSkeleton";
+import "./index.less";
+import { PREFIX } from "../index";
+
+// 产品卡片配置接口
+
+// 产品卡片属性接口
+
+// 默认配置
+var defaultConfig = {
+  isProductCover: 1,
+  imgWidth: '180px',
+  imgHeight: '126px',
+  radius: 8,
+  isTitle: 1,
+  isSubtitle: 0,
+  showSpec: true,
+  isTag: 0,
+  isPrice: 0,
+  isOriginPrice: 0,
+  showZeroPrice: false,
+  showMarketingTag: true,
+  showRemark: true,
+  isStock: 0
+};
+
+// 产品卡片组件
+export var ProductCard = /*#__PURE__*/memo(function (_ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    context = _ref.context,
+    onSelect = _ref.onSelect,
+    isSelected = _ref.isSelected,
+    className = _ref.className,
+    _ref$decorateConfig = _ref.decorateConfig,
+    decorateConfig = _ref$decorateConfig === void 0 ? {} : _ref$decorateConfig;
+  var finalConfig = _objectSpread(_objectSpread({}, defaultConfig), decorateConfig);
+  var imgHeight = finalConfig.imgHeight,
+    imgWidth = finalConfig.imgWidth,
+    isOriginPrice = finalConfig.isOriginPrice,
+    isPrice = finalConfig.isPrice,
+    isProductCover = finalConfig.isProductCover,
+    isStock = finalConfig.isStock,
+    isSubtitle = finalConfig.isSubtitle,
+    isTitle = finalConfig.isTitle,
+    radius = finalConfig.radius,
+    showZeroPrice = finalConfig.showZeroPrice;
+  var __typename = item.__typename;
+
+  // 如果是分类，显示分类样式
+  if (__typename === 'category') {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(PREFIX, "__product-category"), className),
+      "data-index": index,
+      "data-item-index": index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "category-title"
+    }, item.name));
+  }
+
+  // 获取库存文本
+  var getStockText = function getStockText(item) {
+    if (item.is_track === 0) {
+      return false;
+    }
+    return "".concat(locales.getText('pisell2.product-select.stock'), "\uFF1A").concat(item.stock_quantity);
+  };
+  var getTextCover = function getTextCover(title) {
+    if (!title) return '';
+    var cleanTitle = title.trim();
+    if (cleanTitle.length === 0) return '';
+    return cleanTitle.substring(0, 2).toUpperCase();
+  };
+
+  // 渲染价格
+  var renderPrice = function renderPrice(item) {
+    var _price = item.price,
+      _original_price = item.original_price,
+      is_bundle = item.is_bundle,
+      minimum_markup_price = item.minimum_markup_price;
+    var price = _price;
+    var original_price = _original_price;
+    if (is_bundle) {
+      price = new Decimal(price).plus(new Decimal(minimum_markup_price)).toFixed(2);
+      original_price = new Decimal(original_price).plus(new Decimal(minimum_markup_price)).toFixed(2);
+    }
+    if (!showZeroPrice && !parseFloat(price)) return null;
+    return !!isPrice || !!isOriginPrice ? /*#__PURE__*/React.createElement("div", {
+      className: "price-info"
+    }, isPrice ? /*#__PURE__*/React.createElement("div", {
+      className: "price"
+    }, /*#__PURE__*/React.createElement(PisellPriceText, {
+      value: price,
+      isMini: is_bundle
+    })) : null, !!isOriginPrice && parseFloat(original_price) ? /*#__PURE__*/React.createElement("div", {
+      className: "original-price"
+    }, /*#__PURE__*/React.createElement(PisellPriceText, {
+      value: original_price,
+      isMini: is_bundle
+    })) : null) : null;
+  };
+
+  // 产品卡片内容
+  var cardContent = /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(PREFIX, "__product-card"), className, {
+      selected: isSelected
+    }),
+    onClick: function onClick() {
+      onSelect === null || onSelect === void 0 || onSelect(item);
+    },
+    "data-index": index,
+    "data-item-index": index
+  }, isProductCover ? /*#__PURE__*/React.createElement("div", {
+    className: "card-left",
+    style: {
+      width: imgWidth || 'auto',
+      height: imgHeight || 'auto'
+    }
+  }, item.cover ? /*#__PURE__*/React.createElement("img", {
+    loading: "lazy",
+    src: imageAli.ali(item.cover, 360),
+    alt: item.title,
+    style: {
+      borderRadius: radius
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "text-cover",
+    style: {
+      borderRadius: radius
+    }
+  }, getTextCover(item.title))) : null, /*#__PURE__*/React.createElement("div", {
+    className: "card-right"
+  }, !!isTitle ? /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, item.title) : null, !!isSubtitle && item.subtitle ? /*#__PURE__*/React.createElement("div", {
+    className: "subtitle"
+  }, item.subtitle) : null, !!isStock && !!item.is_track ? /*#__PURE__*/React.createElement("div", {
+    className: "stock"
+  }, getStockText(item)) : null, renderPrice(item)));
+  if (context) {
+    return /*#__PURE__*/React.createElement(IntersectionTrigger, {
+      onShow: function onShow() {
+        return context.onItemIntersectionIn(item);
+      }
+      // onHide={() => context.onItemIntersectionOut(item)}
+    }, cardContent);
+  }
+  return cardContent;
+});
+ProductCard.displayName = 'ProductCard';
+
+// 默认的ItemContent组件（保持向后兼容）
+export var DefaultItemContent = /*#__PURE__*/memo(function (props) {
+  return /*#__PURE__*/React.createElement(ProductCard, props);
+});
+DefaultItemContent.displayName = 'DefaultItemContent';
+export default ProductCard;
+export { ProductCardSkeleton };

package/es/plus/productSelect/ProductCard/index.less

@@ -0,0 +1,253 @@
+.pisell-product-select {
+  &__product-category {
+    padding: 4px 0;
+
+    &[data-index='0'] {
+      padding-top: 0px;
+    }
+    .category-title {
+      color: var(--ps-category-text-color, #000);
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+    }
+  }
+
+  &__product-card {
+    user-select: none;
+    cursor: pointer;
+    border-radius: 12px;
+    background: var(--ps-card-bg, #fff);
+    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+      0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+    padding: 8px;
+    display: flex;
+    gap: 20px;
+    position: relative;
+    overflow: hidden;
+    min-height: 142px;
+    height: 100%;
+    align-items: center;
+    box-sizing: border-box;
+
+    // 只在非触摸设备上启用hover效果
+    @media (hover: hover) {
+      &:hover {
+        background: var(--ps-card-hover-bg, #eaecf0);
+      }
+    }
+
+    &.selected {
+      background: var(--ps-card-selected-bg, #8157d5);
+
+      .card-right {
+        .title,
+        .subtitle,
+        .price {
+          color: var(--ps-card-selected-text-color, #ffffff);
+        }
+
+        .spec-item,
+        .original-price,
+        .stock {
+          color: var(
+            --ps-card-selected-secondary-text-color,
+            rgba(255, 255, 255, 0.7)
+          );
+        }
+      }
+    }
+
+    .marketing-tags-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      user-select: none;
+      z-index: 1;
+
+      .marketing-tags {
+        display: flex;
+        flex-direction: column;
+        row-gap: 6px;
+      }
+
+      .marketing-tag-item {
+        display: flex;
+        padding: 6px 10px;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        border-radius: 0 12px 12px 0;
+        background: var(--Error-100, #fee4e2);
+        color: var(--Error-700, #b42318);
+        text-align: center;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+
+        &:nth-of-type(1) {
+          border-radius: 0 0 12px 0;
+        }
+      }
+    }
+
+    .card-left {
+      flex-shrink: 0;
+
+      img {
+        border-radius: 8px;
+        background: lightgray 50% / cover no-repeat;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .text-cover {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #dedede;
+        color: #6c6c6c;
+        font-size: 60px;
+        font-weight: 600;
+        text-align: center;
+        line-height: 1;
+        letter-spacing: 1px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    .card-right {
+      display: flex;
+      flex-direction: column;
+      row-gap: 8px;
+      min-height: 92px;
+      overflow: hidden;
+      flex: 1;
+
+      .title {
+        color: var(--ps-color-text, #1b1b1b);
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 28px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .subtitle {
+        color: var(--ps-color-text, #1b1b1b);
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .stock,
+      .specs {
+        overflow: hidden;
+        color: var(--ps-color-text-secondary, #4e4e4e);
+        text-overflow: ellipsis;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+
+        .spec-item {
+          margin-top: 8px;
+
+          &:nth-of-type(1) {
+            margin-top: 0;
+          }
+        }
+      }
+
+      .tags {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+
+        .tag-item {
+          display: flex;
+          padding: 4px 12px;
+          align-items: center;
+          border-radius: 16px;
+          border: 1px solid var(--Error-200, #fecdca);
+          background: var(--Error-50, #fef3f2);
+          mix-blend-mode: multiply;
+          color: var(--Error-700, #b42318);
+          text-align: center;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: 20px;
+        }
+      }
+
+      .price-info {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: unset;
+      }
+
+      .price {
+        color: var(--ps-color-text, #1b1b1b);
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 28px;
+        overflow: hidden;
+        margin-right: 8px;
+      }
+
+      .original-price {
+        color: var(--ps-color-text-secondary, #4e4e4e);
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 50%;
+          left: 0;
+          width: 100%;
+          height: 1px;
+          background-color: #4e4e4e;
+          transform: translateY(-50%);
+        }
+
+        > span {
+          vertical-align: middle;
+        }
+      }
+
+      .remark {
+        color: var(--Warning-600, #dc6803);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 20px;
+      }
+    }
+  }
+}

package/es/plus/productSelect/ProductList/gridComponents.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+export interface GridConfig {
+    grid: boolean;
+    config: string;
+}
+export declare const parseGridConfig: (config: string) => number[];
+export declare const createGridComponents: (layout?: GridConfig | null) => {
+    List: React.MemoExoticComponent<({ children, ...props }: any) => JSX.Element>;
+    Item: React.MemoExoticComponent<({ children, index, item, ...props }: any) => JSX.Element>;
+};
+export declare const GRID_LAYOUTS: {
+    readonly SINGLE_COLUMN: {
+        readonly grid: false;
+        readonly config: "12";
+    };
+    readonly TWO_COLUMNS: {
+        readonly grid: true;
+        readonly config: "12:12";
+    };
+    readonly THREE_COLUMNS: {
+        readonly grid: true;
+        readonly config: "8:8:8";
+    };
+    readonly FOUR_COLUMNS: {
+        readonly grid: true;
+        readonly config: "6:6:6:6";
+    };
+    readonly UNEQUAL_TWO: {
+        readonly grid: true;
+        readonly config: "8:16";
+    };
+    readonly UNEQUAL_THREE: {
+        readonly grid: true;
+        readonly config: "6:12:6";
+    };
+};
+export declare const createTwoColumnGrid: () => {
+    List: React.MemoExoticComponent<({ children, ...props }: any) => JSX.Element>;
+    Item: React.MemoExoticComponent<({ children, index, item, ...props }: any) => JSX.Element>;
+};
+export declare const createCustomGrid: (config: string) => {
+    List: React.MemoExoticComponent<({ children, ...props }: any) => JSX.Element>;
+    Item: React.MemoExoticComponent<({ children, index, item, ...props }: any) => JSX.Element>;
+};

package/es/plus/productSelect/ProductList/gridComponents.js

@@ -0,0 +1,149 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["children"],
+  _excluded2 = ["children", "index", "item"];
+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 _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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { memo } from 'react';
+
+// 网格配置类型定义
+
+// 解析网格配置字符串
+export var parseGridConfig = function parseGridConfig(config) {
+  return config.split(':').map(function (num) {
+    return parseInt(num, 10);
+  }).filter(function (num) {
+    return !isNaN(num);
+  });
+};
+
+// 计算网格列宽度
+var calculateColumnWidth = function calculateColumnWidth(columns, index) {
+  var total = columns.reduce(function (sum, col) {
+    return sum + col;
+  }, 0);
+  var percentage = columns[index] / total * 100;
+  return "".concat(percentage, "%");
+};
+
+// 创建网格组件的工厂函数
+export var createGridComponents = function createGridComponents(layout) {
+  // 兼容性处理：当传入空值时，默认为单列布局
+  if (!layout) {
+    layout = GRID_LAYOUTS.SINGLE_COLUMN;
+  }
+  var columns = parseGridConfig(layout.config);
+  var isGrid = layout.grid && columns.length > 1;
+
+  // 网格容器组件
+  var GridListComponent = /*#__PURE__*/memo(function (_ref) {
+    var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+    if (!isGrid) {
+      return /*#__PURE__*/React.createElement("div", _extends({
+        className: "product-list-wrapper",
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px'
+        }
+      }, props), children);
+    }
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: "product-grid-wrapper",
+      style: _objectSpread({
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '12px'
+      }, props.style)
+    }, props), children);
+  });
+
+  // 网格项组件
+  var GridItemComponent = /*#__PURE__*/memo(function (_ref2) {
+    var children = _ref2.children,
+      index = _ref2.index,
+      item = _ref2.item,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+    if (!isGrid) {
+      if (item && item.__typename === 'category') {
+        return /*#__PURE__*/React.createElement("div", _extends({
+          id: "ps_category_".concat(item.id)
+        }, props), children);
+      }
+      return /*#__PURE__*/React.createElement("div", props, children);
+    }
+
+    // 如果是category类型，占据整行
+    if (item && item.__typename === 'category') {
+      return /*#__PURE__*/React.createElement("div", _extends({
+        id: "ps_category_".concat(item.id),
+        style: _objectSpread({
+          width: '100%',
+          flexShrink: 0
+        }, props.style)
+      }, props), children);
+    }
+    var columnIndex = index % columns.length;
+    var width = calculateColumnWidth(columns, columnIndex);
+    return /*#__PURE__*/React.createElement("div", _extends({
+      style: _objectSpread({
+        width: "calc(".concat(width, " - ").concat((columns.length - 1) * 12 / columns.length, "px)"),
+        flexShrink: 0
+      }, props.style)
+    }, props), children);
+  });
+  GridListComponent.displayName = "GridListComponent_".concat(layout.config);
+  GridItemComponent.displayName = "GridItemComponent_".concat(layout.config);
+  return {
+    List: GridListComponent,
+    Item: GridItemComponent
+  };
+};
+
+// 预定义的常用网格配置
+export var GRID_LAYOUTS = {
+  SINGLE_COLUMN: {
+    grid: false,
+    config: '12'
+  },
+  TWO_COLUMNS: {
+    grid: true,
+    config: '12:12'
+  },
+  THREE_COLUMNS: {
+    grid: true,
+    config: '8:8:8'
+  },
+  FOUR_COLUMNS: {
+    grid: true,
+    config: '6:6:6:6'
+  },
+  UNEQUAL_TWO: {
+    grid: true,
+    config: '8:16'
+  },
+  // 1:2 比例
+  UNEQUAL_THREE: {
+    grid: true,
+    config: '6:12:6'
+  } // 1:2:1 比例
+};
+
+// 便捷函数：创建常用网格组件
+export var createTwoColumnGrid = function createTwoColumnGrid() {
+  return createGridComponents(GRID_LAYOUTS.TWO_COLUMNS);
+};
+
+// 自定义网格配置创建函数
+export var createCustomGrid = function createCustomGrid(config) {
+  return createGridComponents({
+    grid: true,
+    config: config
+  });
+};

package/es/plus/productSelect/ProductList/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface IProps {
+    className?: string;
+    loading?: boolean;
+    data: any[];
+    context: {
+        onItemIntersectionIn: (item: any) => void;
+        onItemIntersectionOut: (item: any) => void;
+    };
+    customScrollParent?: Element | null;
+    components?: {
+        List?: React.ComponentType<any>;
+        Item?: React.ComponentType<any>;
+        [key: string]: React.ComponentType<any> | undefined;
+    };
+    itemContent?: (index: number, data: any, context: any) => React.ReactNode;
+    itemSkeleton?: React.ReactNode;
+    [key: string]: any;
+}
+declare const ProductList: React.ForwardRefExoticComponent<Omit<IProps, "ref"> & React.RefAttributes<any>>;
+export default ProductList;
+export { createGridComponents, createTwoColumnGrid, createCustomGrid, GRID_LAYOUTS, type GridConfig, } from './gridComponents';