@pisell/materials 6.3.23 → 6.3.24

package/es/components/pisellGridPro/components/DataCard/components/StatCard/index.less

@@ -0,0 +1,156 @@
+/**
+ * StatCard 统计卡片组件样式
+ * @description 单个统计卡片的样式定义
+ */
+
+.stat-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  background: #ffffff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
+
+  /**
+     * 可点击卡片样式
+     */
+  &-clickable {
+    cursor: pointer;
+
+    &:hover {
+      border-color: #d9d9d9;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      transform: translateY(-2px);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
+
+  /**
+     * 卡片标题
+     */
+  &-title {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    color: #8c8c8c;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /**
+     * 内容区域（数值 + 对比信息横向排列）
+     */
+  &-content {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+  }
+
+  /**
+     * 主数值
+     */
+  &-value {
+    font-size: 30px;
+    font-weight: 600;
+    line-height: 38px;
+    color: #1a1a1a;
+    flex-shrink: 0;
+  }
+
+  /**
+     * 对比信息区域
+     */
+  &-compare {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+    line-height: 22px;
+    flex-shrink: 0;
+    white-space: nowrap;
+
+    // 前缀文本
+    .compare-prefix {
+      color: #8c8c8c;
+    }
+
+    // 对比数值
+    .compare-value {
+      font-weight: 500;
+    }
+
+    // 趋势图标
+    .trend-icon {
+      font-size: 10px;
+    }
+
+    // 增长趋势（绿色）
+    &.trend-up {
+      .compare-value,
+      .trend-icon {
+        color: #52c41a;
+      }
+    }
+
+    // 下降趋势（红色）
+    &.trend-down {
+      .compare-value,
+      .trend-icon {
+        color: #ff4d4f;
+      }
+    }
+  }
+
+  /**
+     * 响应式适配：平板
+     */
+  @media (max-width: 1024px) {
+    &-value {
+      font-size: 28px;
+      line-height: 36px;
+    }
+
+    &-compare {
+      font-size: 12px;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 2px;
+    }
+  }
+
+  /**
+     * 响应式适配：移动端
+     */
+  @media (max-width: 768px) {
+    padding: 12px;
+
+    &-title {
+      font-size: 12px;
+      margin-bottom: 6px;
+    }
+
+    &-value {
+      font-size: 24px;
+      line-height: 32px;
+    }
+
+    &-content {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+    }
+
+    &-compare {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+}

package/es/components/pisellGridPro/components/DataCard/index.d.ts

@@ -0,0 +1,5 @@
+import { DataCardProps } from './types';
+export type { DataCardProps };
+import './index.less';
+declare const DataCard: (props: DataCardProps) => JSX.Element | null;
+export default DataCard;

package/es/components/pisellGridPro/components/DataCard/index.js

@@ -0,0 +1,33 @@
+var _excluded = ["key"];
+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 from 'react';
+import classNames from 'classnames';
+import StatCard from "./components/StatCard";
+import "./index.less";
+var DataCard = function DataCard(props) {
+  var _props$dataItems = props.dataItems,
+    dataItems = _props$dataItems === void 0 ? [] : _props$dataItems,
+    className = props.className,
+    style = props.style;
+
+  /** 容器类名 */
+  var dataCardClassName = classNames('pisell-grid-pro-datacard', className);
+
+  /** 如果没有数据，不渲染 */
+  if (dataItems.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: dataCardClassName,
+    style: style
+  }, dataItems.map(function (item) {
+    var key = item.key,
+      rest = _objectWithoutProperties(item, _excluded);
+    return /*#__PURE__*/React.createElement(StatCard, _extends({
+      key: key
+    }, rest));
+  }));
+};
+export default DataCard;

package/es/components/pisellGridPro/components/DataCard/index.less

@@ -0,0 +1,41 @@
+/**
+ * PisellGridProDataCard 组件样式
+ * @description GridPro 数据卡片容器样式定义
+ */
+
+.pisell-grid-pro-datacard {
+  display: flex;
+  gap: 16px;
+  padding-bottom: 16px;
+  background: #ffffff;
+
+  /**
+   * 响应式适配：平板
+   */
+  @media (max-width: 1024px) {
+    gap: 12px;
+    padding: 12px 16px;
+    flex-wrap: wrap;
+
+    // 卡片在平板上每行显示 3 个
+    .stat-card {
+      flex: 1 1 calc(33.333% - 8px);
+      min-width: 200px;
+    }
+  }
+
+  /**
+   * 响应式适配：移动端
+   */
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px 16px;
+
+    // 卡片在移动端每行显示 1 个
+    .stat-card {
+      flex: 1 1 100%;
+      min-width: auto;
+    }
+  }
+}

package/es/components/pisellGridPro/components/DataCard/types.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+/**
+ * PisellGridProDataCard 组件属性接口
+ */
+export interface DataCardProps {
+    /**
+     * 统计卡片数据列表
+     */
+    dataItems?: StatCardItem[];
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * 统计卡片数据项接口
+ */
+export interface StatCardItem {
+    /**
+     * 唯一标识
+     */
+    key: string;
+    /**
+     * 卡片标题
+     * @example "Total Orders"
+     */
+    title: React.ReactNode;
+    /**
+     * 主要数值
+     * @example 50 或 "$1580"
+     */
+    value: React.ReactNode;
+    /**
+     * 对比数值
+     * @example "+12" 或 "-230"
+     */
+    compareValue?: React.ReactNode;
+    /**
+     * 对比趋势
+     * @description up-增长(绿色), down-下降(红色)
+     * @default undefined
+     */
+    trend?: 'up' | 'down';
+    /**
+     * 对比前缀文本
+     * @default "v.s. pre"
+     */
+    comparePrefix?: string;
+    /**
+     * 是否显示对比信息
+     * @default true
+     */
+    showCompare?: boolean;
+    /**
+     * 自定义卡片样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义卡片类名
+     */
+    className?: string;
+    /**
+     * 点击回调
+     */
+    onClick?: () => void;
+}

package/es/components/pisellGridPro/components/DataCard/types.js

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

package/es/components/pisellGridPro/components/Footer/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.less';
+export interface FooterProps {
+    className?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}
+declare const Footer: (props: FooterProps) => JSX.Element;
+export default Footer;

package/es/components/pisellGridPro/components/Footer/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+import "./index.less";
+var Footer = function Footer(props) {
+  var className = props.className,
+    style = props.style,
+    children = props.children;
+
+  /** 容器类名 */
+  var footerClassName = classNames('pisell-grid-pro-footer', className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: footerClassName,
+    style: style
+  }, children);
+};
+export default Footer;

package/es/components/pisellGridPro/components/Footer/index.less

@@ -0,0 +1,11 @@
+// /**
+//  * PisellGridProFooter 组件样式
+//  * @description 根据 Figma 设计编写 (node-id=12890-100581)
+//  */
+
+.pisell-grid-pro-footer {
+  padding: 10px 0px 6px;
+  gap: 12px;
+  background: #ffffff;
+  border-top: 1px solid #eaecf0;
+}

package/es/components/pisellGridPro/components/Header/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.less';
+export interface HeaderProps {
+    title?: React.ReactNode;
+    badge?: React.ReactNode;
+    subTitle?: React.ReactNode;
+    actionsList?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const Header: React.FC<HeaderProps>;
+export default Header;

package/es/components/pisellGridPro/components/Header/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import "./index.less";
+var Header = function Header(props) {
+  var title = props.title,
+    badge = props.badge,
+    subTitle = props.subTitle,
+    actionsList = props.actionsList,
+    className = props.className,
+    style = props.style;
+
+  /** 组件类名 */
+  var headerClassName = classNames('pisell-grid-pro-header', className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: headerClassName,
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-grid-pro-header-left"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-grid-pro-header-title-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-grid-pro-header-title"
+  }, title || ''), badge && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-grid-pro-header-badge"
+  }, badge)), subTitle && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-grid-pro-header-subtitle"
+  }, subTitle)), actionsList && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-grid-pro-header-actions"
+  }, actionsList));
+};
+export default Header;

package/es/components/pisellGridPro/components/Header/index.less

@@ -0,0 +1,92 @@
+/**
+ * PisellGridProHeader 组件样式
+ * @description 根据 Figma 原样式编写
+ */
+
+.pisell-grid-pro-header {
+  /* Content */
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 20px 0px 16px;
+  gap: 16px;
+  background: #ffffff;
+
+  /**
+   * 左侧内容区域 (Text and supporting text)
+   */
+  &-left {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 4px;
+    flex: 1;
+    align-self: stretch;
+  }
+
+  /**
+   * 标题包裹容器 (Text and badge)
+   */
+  &-title-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+  }
+
+  /**
+   * 标题样式 (Text)
+   */
+  &-title {
+    font-family: 'Inter';
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 28px;
+    color: #101828;
+  }
+
+  /**
+   * 标签样式 (Badge)
+   */
+  &-badge {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: 2px 10px;
+    height: 24px;
+    background: #f9f5ff;
+    mix-blend-mode: multiply;
+    border: 1px solid #e9d7fe;
+    border-radius: 16px;
+
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+    color: #6941c6;
+  }
+
+  /**
+   * 副标题样式 (Supporting text)
+   */
+  &-subtitle {
+    font-family: 'Inter';
+    font-size: 14px;
+    line-height: 20px;
+    color: #475467;
+    align-self: stretch;
+    flex: none;
+  }
+
+  &-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    flex: none;
+  }
+}

package/es/components/pisellGridPro/index.d.ts

@@ -0,0 +1,4 @@
+import { GridProProps } from './GridPro';
+export type { GridProProps };
+declare const PisellGridPro: any;
+export default PisellGridPro;

package/es/components/pisellGridPro/index.js

@@ -0,0 +1,9 @@
+import Header from "./components/Header";
+import DataCard from "./components/DataCard";
+import Footer from "./components/Footer";
+import GridPro from "./GridPro";
+var PisellGridPro = GridPro;
+PisellGridPro.Header = Header;
+PisellGridPro.DataCard = DataCard;
+PisellGridPro.Footer = Footer;
+export default PisellGridPro;

package/es/components/pisellGridPro/index.less

@@ -0,0 +1,16 @@
+/**
+ * PisellGridPro 主容器样式
+ * @description 整合所有子组件的容器样式
+ */
+
+.pisell-grid-pro {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: #ffffff;
+  overflow: hidden;
+  padding: 0 24px;
+  > * {
+    flex-shrink: 0;
+  }
+}

package/es/components/pisellQuickFilter/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const pisellQuickFilter: React.ForwardRefExoticComponent<import("antd").FormInstance<any> & {
+    hasForm?: boolean | undefined;
+    children?: React.ReactNode;
+    formFiltersPrefix: string;
+    filterList?: import("../filter/types").FilterItemProps[] | undefined;
+    quickFilterMaxLength: number;
+    hiddenQuickFilter: boolean;
+    hiddenOtherFilter: boolean;
+} & React.RefAttributes<unknown>>;
+export default pisellQuickFilter;

package/es/components/pisellQuickFilter/index.js

@@ -0,0 +1,34 @@
+var _excluded = ["filterList", "formFiltersPrefix", "hasForm"];
+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 } from 'react';
+import QuickFilter from "../filter/components/QuickFilter";
+import { Form } from 'antd';
+var pisellQuickFilter = /*#__PURE__*/forwardRef(function (props) {
+  var filterList = props.filterList,
+    formFiltersPrefix = props.formFiltersPrefix,
+    _props$hasForm = props.hasForm,
+    hasForm = _props$hasForm === void 0 ? true : _props$hasForm,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  var content = useMemo(function () {
+    return /*#__PURE__*/React.createElement(QuickFilter, {
+      value: {
+        quickFilter: filterList
+      },
+      formFiltersPrefix: formFiltersPrefix || ''
+    });
+  }, [filterList, formFiltersPrefix]);
+  if (hasForm) {
+    return /*#__PURE__*/React.createElement(Form, _extends({
+      labelCol: {
+        span: 0
+      },
+      size: "large",
+      layout: "inline",
+      className: "filter-form-wrapper"
+    }, otherProps), content);
+  }
+  return content;
+});
+export default pisellQuickFilter;

package/es/components/pisellQuickFilter/type.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FilterItemProps } from '../filter/types';
+import { FormInstance } from 'antd';
+export declare type PisellQuickFilterProps = FormInstance & {
+    hasForm?: boolean;
+    children?: React.ReactNode;
+    formFiltersPrefix: string;
+    filterList?: FilterItemProps[];
+    quickFilterMaxLength: number;
+    hiddenQuickFilter: boolean;
+    hiddenOtherFilter: boolean;
+};

package/es/components/pisellQuickFilter/type.js

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

package/es/components/pisellSort/index.d.ts

@@ -0,0 +1,3 @@
+import { PisellSortProps } from './type';
+declare const PisellSort: (props: PisellSortProps) => JSX.Element;
+export default PisellSort;

package/es/components/pisellSort/index.js

@@ -0,0 +1,27 @@
+var _excluded = ["name", "hasForm"];
+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, { useMemo } from 'react';
+import { Form } from 'antd';
+import Sort from "../sort";
+var PisellSort = function PisellSort(props) {
+  var name = props.name,
+    _props$hasForm = props.hasForm,
+    hasForm = _props$hasForm === void 0 ? true : _props$hasForm,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  var content = useMemo(function () {
+    return /*#__PURE__*/React.createElement(Form.Item, {
+      name: name || 'sort_key',
+      noStyle: true
+    }, /*#__PURE__*/React.createElement(Sort, otherProps));
+  }, [name, otherProps]);
+  if (hasForm) {
+    return /*#__PURE__*/React.createElement(Form, _extends({
+      size: "large",
+      layout: "vertical"
+    }, otherProps), content);
+  }
+  return content;
+};
+export default PisellSort;

package/es/components/pisellSort/type.d.ts

@@ -0,0 +1,7 @@
+import { SortListProps } from '../sort/types';
+import { FormInstance } from 'antd';
+export declare type PisellSortProps = SortListProps & {
+    name?: string;
+} & FormInstance & {
+    hasForm?: boolean;
+};

package/es/components/pisellSort/type.js

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

package/es/components/productCard/components/AmountFooter/index.js

@@ -17,7 +17,9 @@ var Footer = function Footer(_ref) {
     symbol = item.symbol,
     tip = item.tip,
     num = item.num,
-    discount_reason = item.discount_reason;
+    discount_reason = item.discount_reason,
+    _item$totalDifference = item.totalDifference,
+    totalDifference = _item$totalDifference === void 0 ? 0 : _item$totalDifference;
   /**
    * @title: 折扣
    * @description:
@@ -69,6 +71,6 @@ var Footer = function Footer(_ref) {
     className: "".concat(prefix, "packages-product-footer-total")
   }, isDiscount ? /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefix, "packages-product-footer-origin-total")
-  }, _formatAmount(origin_total * num, symbol, 2)) : null, /*#__PURE__*/React.createElement("span", null, _formatAmount(total * num, symbol))))), renderDiscountReason());
+  }, _formatAmount(origin_total * num, symbol, 2)) : null, /*#__PURE__*/React.createElement("span", null, _formatAmount(total * num - (totalDifference !== null && totalDifference !== void 0 ? totalDifference : 0), symbol))))), renderDiscountReason());
 };
 export default Footer;

package/es/components/select/index.js

@@ -28,7 +28,9 @@ var SelectBase = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$optionFilterPr = props.optionFilterProp,
     optionFilterProp = _props$optionFilterPr === void 0 ? 'value' : _props$optionFilterPr,
     popupClassName = props.popupClassName,
-    onDropdownVisibleChange = props.onDropdownVisibleChange;
+    onDropdownVisibleChange = props.onDropdownVisibleChange,
+    _props$isSearchServer = props.isSearchServer,
+    isSearchServer = _props$isSearchServer === void 0 ? false : _props$isSearchServer;
   var _usePisellConfig = usePisellConfig(),
     platform = _usePisellConfig.platform;
   var searchInputRef = useRef(null);
@@ -41,13 +43,13 @@ var SelectBase = /*#__PURE__*/forwardRef(function (props, ref) {
     searchValue = _useState2[0],
     setSearchValue = _useState2[1];
   var filteredOptions = useMemo(function () {
-    if (!searchValue) return options;
+    if (!searchValue || isSearchServer) return options;
     return (options || []).filter(function (option) {
       var _option$optionFilterP;
       var optionValue = ((_option$optionFilterP = option[optionFilterProp]) === null || _option$optionFilterP === void 0 ? void 0 : _option$optionFilterP.toString().toLowerCase()) || '';
       return optionValue.includes(searchValue.toLowerCase());
     });
-  }, [options, searchValue, optionFilterProp]);
+  }, [options, searchValue, optionFilterProp, isSearchServer]);
   var onSelectAllChange = useMemoizedFn(function (e) {
     if (e.target.checked) {
       setState(filteredOptions.map(function (item) {