@pisell/materials 3.2.8 → 3.2.10

package/es/components/pisellList01/index.js

@@ -0,0 +1,105 @@
+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, { useEffect, useMemo, useState } from 'react';
+import { SearchOutlined } from '@ant-design/icons';
+import PisellViewGrid from "../pisellViewGrid";
+import PisellAnchor from "../pisellAnchor";
+import PisellEmpty from "../pisellEmpty";
+import Input from "../input";
+import "./index.less";
+var PisellList01 = function PisellList01(_ref) {
+  var showSearch = _ref.showSearch,
+    showCategory = _ref.showCategory,
+    placeholder = _ref.placeholder,
+    dataSource = _ref.dataSource,
+    renderItem = _ref.renderItem,
+    className = _ref.className,
+    style = _ref.style,
+    _onChange = _ref.onChange,
+    onSearch = _ref.onSearch,
+    _ref$isShowEmpty = _ref.isShowEmpty,
+    isShowEmpty = _ref$isShowEmpty === void 0 ? true : _ref$isShowEmpty,
+    description = _ref.description;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentAnchor = _useState2[0],
+    setCurrentAnchor = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    products = _useState4[0],
+    setProducts = _useState4[1];
+  useEffect(function () {
+    // 不显示分类时，默认展示所有数据
+    if (!showCategory) {
+      return setProducts(dataSource !== null && dataSource !== void 0 ? dataSource : []);
+    }
+    if (currentAnchor) {
+      var _currentData$children;
+      var currentData = dataSource === null || dataSource === void 0 ? void 0 : dataSource.find(function (item) {
+        return item.href === currentAnchor;
+      });
+      setProducts((_currentData$children = currentData === null || currentData === void 0 ? void 0 : currentData.children) !== null && _currentData$children !== void 0 ? _currentData$children : []);
+    }
+  }, [currentAnchor, dataSource, showCategory]);
+  useEffect(function () {
+    var _dataSource$0$href, _dataSource$;
+    setCurrentAnchor((_dataSource$0$href = dataSource === null || dataSource === void 0 || (_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : _dataSource$.href) !== null && _dataSource$0$href !== void 0 ? _dataSource$0$href : '');
+  }, [dataSource]);
+
+  /**
+   * @title: 分类标题
+   * @description:
+   * @param {*} useMemo
+   * @return {*}
+   * @Author: WangHan
+   * @Date: 2025-01-13 16:21
+   */
+  var categoryTitle = useMemo(function () {
+    var _dataSource$find;
+    return dataSource === null || dataSource === void 0 || (_dataSource$find = dataSource.find(function (item) {
+      return item.href === currentAnchor;
+    })) === null || _dataSource$find === void 0 ? void 0 : _dataSource$find.title;
+  }, [currentAnchor, dataSource]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-list-01 ".concat(className),
+    style: style
+  }, showSearch ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-list-01-search"
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: placeholder || 'Search',
+    prefix: /*#__PURE__*/React.createElement(SearchOutlined, {
+      style: {
+        color: '#667085'
+      }
+    }),
+    onChange: onSearch,
+    allowClear: true,
+    size: "large",
+    className: "pisell-list-01-search-input"
+  })) : null, showCategory ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-list-01-categories"
+  }, /*#__PURE__*/React.createElement(PisellAnchor, {
+    items: dataSource,
+    getCurrentAnchor: currentAnchor,
+    onChange: function onChange(e) {
+      _onChange === null || _onChange === void 0 || _onChange(e);
+      setCurrentAnchor(e);
+    }
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-list-01-products ".concat(!products.length && isShowEmpty ? 'pisell-list-01-products-empty' : '')
+  }, showCategory ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-list-01-products-title"
+  }, categoryTitle) : null, products.length > 0 ? /*#__PURE__*/React.createElement(PisellViewGrid, {
+    dataSource: products,
+    columns: 1,
+    verticalGap: 16,
+    renderItem: renderItem
+  }) : isShowEmpty ? /*#__PURE__*/React.createElement(PisellEmpty, {
+    description: description
+  }) : null));
+};
+export default PisellList01;

package/es/components/pisellList01/index.less

@@ -0,0 +1,53 @@
+.pisell-list-01 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &-search {
+    width: 100%;
+    padding: 16px;
+
+    .pisell-list-01-search-input {
+      display: flex;
+      padding: 10px 14px;
+      align-items: center;
+      gap: 8px;
+      align-self: stretch;
+      border-radius: 8px;
+      border: 1px solid var(--Gray-300, #d0d5dd);
+      background: var(--Base-White, #fff);
+      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+      height: 44px;
+    }
+  }
+
+  &-categories {
+    padding: 16px 0 16px 20px;
+    .pisell-lowcode-anchor-wrapper {
+      padding: 0;
+      margin: 0;
+    }
+    .pisell-lowcode-anchor-wrapper-horizontal::before {
+      border: none !important;
+    }
+  }
+
+  &-products {
+    padding: 20px;
+    .pisell-list-01-products-title {
+      color: var(--Gray-900, #101828);
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+      margin-bottom: 16px;
+    }
+  }
+
+  .products-empty {
+    padding: 0;
+    .pisell-empty-icon-wrap,
+    .pisell-lowcode-empty-description {
+      color: var(--Gray-500, #667085);
+    }
+  }
+}

package/es/components/pisellModal/components/MobileModal/index.less

@@ -17,14 +17,18 @@
       overflow: hidden;
       max-height: 90%;
       min-height: 200px;
+      display: flex;
+      flex-direction: column;
     }
     .pisell-lowcode-modal-content {
+      flex: 1;
       padding: 0;
       border-radius: 0;
       height: 100%;
       display: flex;
       flex-direction: column;
       max-height: none;
+      min-height: 200px;
       .pisell-lowcode-modal-close {
         padding: 10px;
         top: 8px;

package/es/components/pisellNavigationMenu/PisellNavigationMenu.js

@@ -67,9 +67,22 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
       onAddPage === null || onAddPage === void 0 || onAddPage(item);
     }
   }, []);
+  var tagTextMap = useMemo(function () {
+    return {
+      base: {
+        text: getText('pisell-lowcode-navigation-menu-tag-base'),
+        color: '#7f56d9'
+      },
+      pisellV1: {
+        text: getText('pisell-lowcode-navigation-menu-tag-pisell1'),
+        color: '#ee837a'
+      }
+    };
+  }, []);
 
   // 自定义渲染菜单项
   var renderMenuItem = useCallback(function (itemProps) {
+    var _tagTextMap$item$sour, _tagTextMap$item$sour2;
     var item = itemProps.item;
     var _item$allowEdit = item.allowEdit,
       allowEdit = _item$allowEdit === void 0 ? true : _item$allowEdit,
@@ -96,10 +109,13 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
       className: "pisell-lowcode-navigation-menu-item-title"
     }, item.title), /*#__PURE__*/React.createElement("div", {
       className: "pisell-lowcode-navigation-menu-item-description"
-    }, item.description, !item.isGroup && item.version && /*#__PURE__*/React.createElement(PisellTags, {
+    }, item.description, item.source && /*#__PURE__*/React.createElement(PisellTags, {
+      type: "pill_color",
+      color: (_tagTextMap$item$sour = tagTextMap[item.source]) === null || _tagTextMap$item$sour === void 0 ? void 0 : _tagTextMap$item$sour.color
+    }, ((_tagTextMap$item$sour2 = tagTextMap[item.source]) === null || _tagTextMap$item$sour2 === void 0 ? void 0 : _tagTextMap$item$sour2.text) || ""), !item.isGroup && item.version && /*#__PURE__*/React.createElement(PisellTags, {
       type: "pill_color",
       color: "success"
-    }, item.version)))), /*#__PURE__*/React.createElement("div", {
+    }, "v", item.version)))), /*#__PURE__*/React.createElement("div", {
       className: "pisell-lowcode-navigation-menu-item-action-wrap"
     }, allowEdit && /*#__PURE__*/React.createElement(Button, {
       type: "text",

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.less';
+export interface PisellSectionHeadersProps {
+    /** 是否占据空间（true: 占据空间, false: 不占据空间） */
+    /** 左侧返回区域 */
+    backNode?: React.ReactNode;
+    /** 中间内容区域 */
+    centerNode?: React.ReactNode;
+    /** 右侧操作区域 */
+    actionNode?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 返回按钮点击事件 */
+    onBack?: () => void;
+    /** 操作区域点击事件 */
+    onAction?: () => void;
+}
+declare const PisellSectionHeaders: React.FC<PisellSectionHeadersProps>;
+export default PisellSectionHeaders;

package/es/components/pisellSectionHeaders/index.js

@@ -0,0 +1,35 @@
+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 from 'react';
+import classNames from 'classnames';
+import "./index.less";
+var prefixCls = 'pisell-section-headers';
+var PisellSectionHeaders = function PisellSectionHeaders(_ref) {
+  var backNode = _ref.backNode,
+    centerNode = _ref.centerNode,
+    actionNode = _ref.actionNode,
+    className = _ref.className,
+    style = _ref.style,
+    onBack = _ref.onBack,
+    onAction = _ref.onAction;
+  var classes = classNames(prefixCls, className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes,
+    style: _objectSpread({}, style)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content")
+  }, backNode && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-back"),
+    onClick: onBack
+  }, backNode), centerNode && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-main")
+  }, centerNode), actionNode && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-actions"),
+    onClick: onAction
+  }, actionNode)));
+};
+export default PisellSectionHeaders;

package/es/components/pisellSectionHeaders/index.less

@@ -0,0 +1,46 @@
+@prefix: pisell-section-headers;
+
+.@{prefix} {
+  width: 100%;
+  z-index: 100;
+  position: sticky;
+  top: 0;
+  border-bottom: 1px solid var(--Gray-300, #d0d5dd);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  padding: 16px;
+  height: auto;
+
+  &-fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+
+  &-placeholder {
+    width: 100%;
+  }
+
+  &-content {
+    height: 100%;
+    padding: 0;
+    display: flex;
+    // align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  &-back {
+    cursor: pointer;
+  }
+
+  &-main {
+    flex: 1;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
+  }
+
+  &-actions {
+    cursor: pointer;
+  }
+}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TooltipPropsWithTitle } from 'antd/es/tooltip';
 import { PisellContextType } from "../pisell-config-provider/context";
 import './index.less';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { UploadProps } from 'antd';
 import './index.less';
 export interface PisellUploadProps extends UploadProps {

package/es/components/productCard/components/Action/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.less';
+declare const Action: ({ item, onAction }: any) => JSX.Element;
+export default Action;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Button } from 'antd';
+import "./index.less";
+var prefix = 'pisell-lowcode-';
+var Action = function Action(_ref) {
+  var item = _ref.item,
+    onAction = _ref.onAction;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "product-actions"))
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classNames("".concat(prefix, "product-actions-item")),
+    size: "large",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      onAction();
+    }
+  }, item.actionText));
+};
+export default Action;

package/es/components/productCard/components/Action/index.less

@@ -0,0 +1,14 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-product-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 8px;
+  }
+
+  &-product-actions-item {
+    flex: 1;
+  }
+}

package/es/components/productCard/components/AmountFooter/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.less';
+declare const Footer: ({ item, hideDivider, type, isOnlyTotal }: any) => JSX.Element;
+export default Footer;

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

@@ -0,0 +1,58 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { Tooltip } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { _formatAmount } from "../Packages/utils";
+import Divider from "../Divider";
+import "./index.less";
+import { locales } from '@pisell/utils';
+var prefix = 'pisell-lowcode-';
+var Footer = function Footer(_ref) {
+  var item = _ref.item,
+    hideDivider = _ref.hideDivider,
+    type = _ref.type,
+    isOnlyTotal = _ref.isOnlyTotal;
+  var total = item.total,
+    origin_total = item.origin_total,
+    symbol = item.symbol,
+    tip = item.tip,
+    num = item.num,
+    discount_reason = item.discount_reason;
+  /**
+   * @title: 折扣
+   * @description:
+   * @param {*} useMemo
+   * @return {*}
+   * @Author: WangHan
+   * @Date: 2024-11-22 13:50
+   */
+  var isDiscount = useMemo(function () {
+    // item中没有该属性则不展示
+    if (!origin_total) return false;
+    return Number(total) != Number(origin_total);
+  }, [total, origin_total]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !hideDivider ? /*#__PURE__*/React.createElement(Divider, {
+    type: type !== 'total' ? 'inside' : ''
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "packages-product-footer"), hideDivider && "".concat(prefix, "packages-product-hide-divider-footer"), isOnlyTotal && "".concat(prefix, "packages-product-only-total-footer"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "packages-product-footer-price-wrap"))
+  }, !isOnlyTotal ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "packages-product-footer-price"))
+  }, /*#__PURE__*/React.createElement("span", null, _formatAmount(total, symbol)), tip ? /*#__PURE__*/React.createElement(Tooltip, {
+    title: locales.getText(tip),
+    destroyTooltipOnHide: true
+  }, /*#__PURE__*/React.createElement(QuestionCircleOutlined, {
+    style: {
+      fontSize: '16px',
+      color: '#1570ef'
+    }
+  })) : null), /*#__PURE__*/React.createElement("span", null, "\xD7".concat(num))) : null, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefix, "packages-product-footer-total")
+  }, _formatAmount(total * num, symbol))), isDiscount ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "packages-product-footer-discount")
+  }, !isOnlyTotal ? /*#__PURE__*/React.createElement("span", null, _formatAmount(origin_total, symbol)) : null, /*#__PURE__*/React.createElement("span", null, _formatAmount(origin_total * num, symbol, 2))) : null), isDiscount && discount_reason && type === 'total' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "product-item-discount-reason")
+  }, /*#__PURE__*/React.createElement("span", null, "".concat(locales.getText('pisell2.product.card.discount.reason'), ": ").concat(discount_reason)))) : null);
+};
+export default Footer;

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

@@ -0,0 +1,50 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-packages-product-footer {
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    > div {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+  &-packages-product-only-total-footer {
+    > div {
+      justify-content: end !important;
+    }
+  }
+
+  &-packages-product-footer-price {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &-packages-product-footer-discount {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    text-decoration-line: line-through;
+  }
+
+  &-packages-product-footer-total {
+    color: var(--Gray-900, #101828);
+  }
+
+  &-packages-product-hide-divider-footer {
+    margin-top: 8px;
+  }
+
+  &-product-item-discount-reason {
+    color: var(--gray-500, #667085);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    white-space: break-spaces;
+  }
+}

package/es/components/productCard/components/Divider/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.less';
+declare const Divider: ({ type }: any) => JSX.Element;
+export default Divider;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import classNames from 'classnames';
+import "./index.less";
+var prefix = 'pisell-lowcode-';
+var Divider = function Divider(_ref) {
+  var type = _ref.type;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "product-divider"), type === 'inside' && "".concat(prefix, "product-divider-inside"))
+  });
+};
+export default Divider;

package/es/components/productCard/components/Divider/index.less

@@ -0,0 +1,13 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-product-divider {
+    height: 1px;
+    background-color: #eaecf0;
+    margin: 8px 0;
+  }
+
+  &-product-divider-inside {
+    margin: 4px 0;
+  }
+}

package/es/components/productCard/components/Header/DeleteButton/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.less';
+declare const DeleteButton: ({ onDelete }: any) => JSX.Element;
+export default DeleteButton;

package/es/components/productCard/components/Header/DeleteButton/index.js

@@ -0,0 +1,21 @@
+import { Button } from 'antd';
+import React from 'react';
+import Iconfont from "../../../../iconfont";
+import "./index.less";
+var prefix = 'pisell-lowcode-';
+var DeleteButton = function DeleteButton(_ref) {
+  var onDelete = _ref.onDelete;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "product-delete"),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onDelete();
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    icon: /*#__PURE__*/React.createElement(Iconfont, {
+      type: "pisell2-trash-01"
+    })
+  }));
+};
+export default DeleteButton;

package/es/components/productCard/components/Header/DeleteButton/index.less

@@ -0,0 +1,15 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-product-delete {
+    position: absolute;
+    padding: 0;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    z-index: 2;
+    .pisell-lowcode-btn {
+      padding: 0;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.less';
+declare const Header: (props: any) => JSX.Element;
+export default Header;

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

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { image as imageAli, formatAmount } from '@pisell/utils';
+import Options from "../Packages/components/options";
+import DeleteButton from "./DeleteButton";
+import "./index.less";
+var prefix = 'pisell-lowcode-';
+var Header = function Header(props) {
+  var isShowDelete = props.isShowDelete,
+    item = props.item,
+    showImage = props.showImage,
+    onDelete = props.onDelete,
+    disabledEdit = props.disabledEdit;
+  var id = item.id,
+    options = item.options,
+    bundle = item.bundle,
+    product_option_string = item.product_option_string,
+    image = item.image,
+    name = item.name,
+    price = item.price,
+    symbol = item.symbol,
+    disabled = item.disabled;
+
+  /**
+   * @title: 是否显示价格
+   * @description:
+   * @param {*} useMemo
+   * @return {*}
+   * @Author: WangHan
+   * @Date: 2024-11-23 16:13
+   */
+  var showPrice = useMemo(function () {
+    // 如果有报价单则不需要显示价格
+
+    return (bundle === null || bundle === void 0 ? void 0 : bundle.length) > 0 || (options === null || options === void 0 ? void 0 : options.length) > 0;
+  }, [bundle, options]);
+
+  /**
+   * @title: 样式是否居中
+   * @description:
+   * @param {*} useMemo
+   * @return {*}
+   * @Author: WangHan
+   * @Date: 2024-11-23 17:37
+   */
+  var headerCenterStyle = useMemo(function () {
+    return (options === null || options === void 0 ? void 0 : options.length) > 0 || product_option_string;
+  }, [options, product_option_string]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "product-header"), headerCenterStyle && "".concat(prefix, "product-options-header"))
+  }, isShowDelete && !disabledEdit && !disabled ? /*#__PURE__*/React.createElement(DeleteButton, {
+    onDelete: onDelete
+  }) : null, showImage ? /*#__PURE__*/React.createElement("img", {
+    src: imageAli.ali(image, 64),
+    className: "".concat(prefix, "product-header-cover")
+  }) : null, id ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "product-right-wrap")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "product-title")
+  }, /*#__PURE__*/React.createElement("span", null, name), showPrice ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefix, "product-title-price")
+  }, formatAmount(price, 2, symbol)) : null), product_option_string ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefix, "product-title-variant")
+  }, product_option_string) : null, /*#__PURE__*/React.createElement(Options, {
+    options: options,
+    amountSymbol: symbol
+  })) : null);
+};
+export default Header;