@pisell/private-materials 6.2.36 → 6.2.38

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

@@ -0,0 +1,270 @@
+.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;
+        gap: 8px;
+      }
+
+      .price {
+        color: var(--ps-color-text, #1b1b1b);
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 28px;
+      }
+
+      .original-price {
+        color: var(--ps-color-text-secondary, #4e4e4e);
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        position: relative;
+
+        &::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;
+      }
+    }
+  }
+
+  // 网格布局中的产品卡片样式调整
+  .product-grid-wrapper {
+    .pisell-product-select__product-card {
+      min-width: unset;
+      width: 100%;
+    }
+  }
+
+  // 列表布局中的产品卡片样式调整
+  .product-list-wrapper {
+    .pisell-product-select__product-card {
+      min-width: 363px;
+      max-width: unset;
+      margin-top: 12px;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}

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';

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

@@ -0,0 +1,72 @@
+var _excluded = ["children"],
+  _excluded2 = ["children", "index"];
+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, { forwardRef, useMemo, memo } from 'react';
+import classNames from 'classnames';
+// 将默认组件移到组件外部，避免重复创建
+var DefaultListComponent = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    listProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "product-list-wrapper"
+  }, listProps), children);
+});
+var DefaultItemComponent = /*#__PURE__*/memo(function (_ref2) {
+  var children = _ref2.children,
+    index = _ref2.index,
+    itemProps = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({}, itemProps, {
+    "data-index": index,
+    "data-item-index": index
+  }), children);
+});
+var ProductList = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+    data = props.data,
+    context = props.context,
+    components = props.components,
+    itemContent = props.itemContent;
+
+  // 使用 useMemo 缓存组件选择
+  var ListComponent = useMemo(function () {
+    return (components === null || components === void 0 ? void 0 : components.List) || DefaultListComponent;
+  }, [components === null || components === void 0 ? void 0 : components.List]);
+  var ItemComponent = useMemo(function () {
+    return (components === null || components === void 0 ? void 0 : components.Item) || DefaultItemComponent;
+  }, [components === null || components === void 0 ? void 0 : components.Item]);
+  var itemContentRenderer = useMemo(function () {
+    if (itemContent) {
+      return function (item, index) {
+        return itemContent(index, item, context);
+      };
+    }
+    return function (item, index) {
+      return /*#__PURE__*/React.createElement("div", null, index);
+    };
+  }, [itemContent, context]);
+  var renderedItems = useMemo(function () {
+    return data === null || data === void 0 ? void 0 : data.map(function (item, index) {
+      var content = itemContentRenderer(item, index);
+      return /*#__PURE__*/React.createElement(ItemComponent, {
+        key: "".concat(item.id || index, "-").concat(index),
+        item: item,
+        index: index,
+        "data-index": index,
+        "data-item-index": index,
+        context: context
+      }, content);
+    });
+  }, [data, ItemComponent, itemContentRenderer]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(className)
+  }, /*#__PURE__*/React.createElement(ListComponent, {
+    ref: ref,
+    context: context
+  }, renderedItems));
+});
+export default ProductList;
+
+// 导出网格组件工厂函数，方便外部使用
+export { createGridComponents, createTwoColumnGrid, createCustomGrid, GRID_LAYOUTS } from "./gridComponents";

package/es/plus/productSelect/components/IntersectionObserver.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { ReactNode, CSSProperties } from 'react';
+declare global {
+    interface Window {
+        IntersectionObserver: typeof IntersectionObserver;
+    }
+}
+interface IntersectionObserverContextValue {
+    initialized: boolean;
+    register: (params: {
+        ref: React.RefObject<HTMLElement>;
+        callback: (entry: IntersectionObserverEntry) => void;
+    }) => void;
+    unregister: (params: {
+        ref: React.RefObject<HTMLElement>;
+    }) => void;
+}
+declare type PriorityMode = 'top' | 'bottom' | 'left' | 'right' | undefined;
+interface IntersectionObserverProps {
+    children: ReactNode;
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+    priorityMode?: PriorityMode;
+}
+interface IntersectionTriggerOptions {
+    once?: boolean;
+    onHide?: (cleanup: () => void) => void;
+    onShow?: (cleanup: () => void) => void;
+}
+interface IntersectionTriggerProps extends IntersectionTriggerOptions {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const IntersectionObserverContext: React.Context<IntersectionObserverContextValue>;
+declare const Consumer: React.Consumer<IntersectionObserverContextValue>;
+export declare const IntersectionObserverProvider: React.FC<IntersectionObserverProps>;
+export declare const IntersectionTrigger: React.FC<IntersectionTriggerProps>;
+export type { IntersectionObserverProps, IntersectionTriggerProps, IntersectionTriggerOptions, IntersectionObserverContextValue, PriorityMode, };
+export { IntersectionObserverContext, Consumer as IntersectionObserverConsumer, };
+export default IntersectionObserverProvider;