@pisell/materials 6.2.30 → 6.2.32

package/lib/components/productCard/cartSkuCard/components/Note/index.less

@@ -0,0 +1,27 @@
+.pisell-cart-sku-card {
+  &__note-wrap {
+    display: flex;
+    gap: 8px;
+    color: var(--Gray-900, #101828);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  &__note-text {
+    color: #101828;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    word-break: keep-all;
+    word-wrap: normal;
+  }
+
+  &__note-btn {
+    color: var(--Blue-600, #1570ef);
+    font-weight: 600;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+}

package/lib/components/productCard/cartSkuCard/components/basicInfo/index.d.ts

@@ -13,9 +13,15 @@ interface IProps {
         total?: number;
         origin_total?: number;
         num?: number;
+        holder_id?: any;
     };
     style?: React.CSSProperties;
+    /** 作为主商品卡片展示
+     * 1. 影响商品数量 tag 的位置
+     * 2. isMain 且 type 为 a5，展示holder
+     */
     isMainProduct?: boolean;
+    type?: 'a2' | 'a5';
 }
 declare const BasicInfo: (props: IProps) => JSX.Element;
 export default BasicInfo;

package/lib/components/productCard/cartSkuCard/components/basicInfo/index.js

@@ -36,10 +36,11 @@ var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
 var import_utils = require("@pisell/utils");
 var import_specs = __toESM(require("../specs"));
+var import_holders = __toESM(require("../holders"));
 var import__ = require("../../index");
 var import_index = require("./index.less");
 var BasicInfo = (props) => {
-  const { isShowImage, dataSource = {}, style, isMainProduct } = props;
+  const { isShowImage, dataSource = {}, style, isMainProduct, type } = props;
   const {
     image,
     bundle,
@@ -50,20 +51,19 @@ var BasicInfo = (props) => {
     symbol,
     total = 0,
     origin_total = 0,
-    num = 1
+    num = 1,
+    holder_id
   } = dataSource;
   const renderNumTag = () => {
-    if (num > 1)
-      return /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: (0, import_classnames.default)(`num-tag`, {
-            "is-main": isMainProduct
-          })
-        },
-        num < 100 ? num : "99+"
-      );
-    return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(`num-tag`, {
+          "is-main": isMainProduct
+        })
+      },
+      num < 100 ? num : "99+"
+    );
   };
   const hasSpecs = (bundle == null ? void 0 : bundle.length) || (options == null ? void 0 : options.length) || product_option_string;
   const renderImage = () => {
@@ -74,6 +74,9 @@ var BasicInfo = (props) => {
     const displayText = name ? name.slice(0, 2) : "";
     return /* @__PURE__ */ import_react.default.createElement("div", { className: `product-cover-text` }, displayText);
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__basic-info`, style: style || {} }, renderNumTag(), renderImage(), (!isShowImage || !image && !name) && num > 1 ? /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 26 } }) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: `product-info` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `product-name` }, name), hasSpecs ? /* @__PURE__ */ import_react.default.createElement(import_specs.default, { dataSource }) : /* @__PURE__ */ import_react.default.createElement("div", { className: `product-price` }, (0, import_utils.formatAmount)(price, 2, symbol))), /* @__PURE__ */ import_react.default.createElement("div", { className: `product-amount` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `total-amont` }, (0, import_utils.formatAmount)(total * num, 2, symbol)), origin_total && Number(total) !== Number(origin_total) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `origin-amount` }, (0, import_utils.formatAmount)(origin_total * num, 2, symbol)) : null));
+  if (type === "a5") {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__basic-info`, style: style || {} }, renderNumTag(), renderImage(), !isShowImage || !image && !name ? /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 26 } }) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: `product-info` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `product-name` }, name), !!holder_id || !(holder_id == null ? void 0 : holder_id.length) ? /* @__PURE__ */ import_react.default.createElement(import_holders.default, { dataSource }) : /* @__PURE__ */ import_react.default.createElement("div", { className: `product-price` }, (0, import_utils.formatAmount)(price, 2, symbol))));
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__basic-info`, style: style || {} }, renderNumTag(), renderImage(), !isShowImage || !image && !name ? /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 26 } }) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: `product-info` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `product-name` }, name), hasSpecs ? /* @__PURE__ */ import_react.default.createElement(import_specs.default, { dataSource }) : /* @__PURE__ */ import_react.default.createElement("div", { className: `product-price` }, (0, import_utils.formatAmount)(price, 2, symbol))), /* @__PURE__ */ import_react.default.createElement("div", { className: `product-amount` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `total-amont` }, (0, import_utils.formatAmount)(total * num, 2, symbol)), origin_total && Number(total) !== Number(origin_total) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `origin-amount` }, (0, import_utils.formatAmount)(origin_total * num, 2, symbol)) : null));
 };
 var basicInfo_default = BasicInfo;

package/lib/components/productCard/cartSkuCard/components/basicInfo/index.less

@@ -58,7 +58,6 @@
       flex: 1;
       display: flex;
       align-items: center;
-      gap: 4px;
       flex: 1 0 0;
       flex-wrap: wrap;
       overflow: hidden;
@@ -73,6 +72,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        padding-right: 20px;
       }
 
       .product-price {

package/lib/components/productCard/cartSkuCard/components/discountReason/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const DiscountReason: (props: any) => JSX.Element;
 export default DiscountReason;

package/lib/components/productCard/cartSkuCard/components/packages/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 interface IProps {
     isShowImage?: boolean;

package/lib/components/productCard/cartSkuCard/components/packages/index.js

@@ -41,7 +41,7 @@ var import__ = require("../../index");
 var import_index = require("./index.less");
 var Packages = ({ isShowImage, dataSource = {} }) => {
   const { bundle = [], symbol = "$" } = dataSource;
-  return (bundle == null ? void 0 : bundle.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: "4px 0" } }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__packages-wrap` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `packages-title` }, import_utils.locales.getText("pisell2.cart.sku-card.packages.title")), /* @__PURE__ */ import_react.default.createElement(
+  return (bundle == null ? void 0 : bundle.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: 0 } }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__packages-wrap` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `packages-title` }, import_utils.locales.getText("pisell2.cart.sku-card.packages.title")), /* @__PURE__ */ import_react.default.createElement(
     import_collapsibleList.default,
     {
       style: {

package/lib/components/productCard/cartSkuCard/components/resources/index.js

@@ -55,13 +55,13 @@ var Resources = (props) => {
   const { multiResources, isMultipleResource } = dataSource;
   const renderResourceItem = (item, index) => {
     const { id: ids, lists, _id } = item;
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: `resource-item`, key: _id }, Array.isArray(ids) ? ids.map((id) => {
+    return Array.isArray(ids) ? ids.map((id) => {
       const targetRes = lists.find((l) => l.id === id);
       if (targetRes == null ? void 0 : targetRes.label) {
         return /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { color: getColor(_id), className: "resource-tag" }, targetRes.label);
       }
       return null;
-    }) : null);
+    }) : null;
   };
   const renderContent = () => {
     if (isMultipleResource && (multiResources == null ? void 0 : multiResources.length) > 0) {

package/lib/components/productCard/cartSkuCard/components/resources/index.less

@@ -1,5 +1,4 @@
 .pisell-cart-sku-card__resources {
-  margin-top: 4px;
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
@@ -9,12 +8,12 @@
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
+  }
 
-    .resource-tag {
-      max-width: 120px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin: 0;
-    }
+  .resource-tag {
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
   }
 }

package/lib/components/productCard/cartSkuCard/components/sales/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 interface IProps {
     hideDivider?: boolean;
@@ -7,6 +6,7 @@ interface IProps {
         relation_products?: any[];
         bundle?: any[];
     };
+    isShowImage?: boolean;
 }
-declare const Sales: ({ hideDivider, dataSource }: IProps) => JSX.Element | null;
+declare const Sales: ({ hideDivider, dataSource, isShowImage }: IProps) => JSX.Element | null;
 export default Sales;

package/lib/components/productCard/cartSkuCard/components/sales/index.js

@@ -39,7 +39,7 @@ var import_basicInfo = __toESM(require("../basicInfo"));
 var import_utils = require("@pisell/utils");
 var import__ = require("../../index");
 var import_index = require("./index.less");
-var Sales = ({ hideDivider, dataSource }) => {
+var Sales = ({ hideDivider, dataSource, isShowImage }) => {
   const { relation_products = [], symbol = "$" } = dataSource || {};
   let other_products = relation_products.map((p) => {
     return {
@@ -51,7 +51,7 @@ var Sales = ({ hideDivider, dataSource }) => {
       total: p == null ? void 0 : p.payment_price
     };
   });
-  return (other_products == null ? void 0 : other_products.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, hideDivider ? null : /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: "4px 0" } }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}_sales-wrap` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `sales-title` }, import_utils.locales.getText("pisell2.cart.sku-card.sales.title")), /* @__PURE__ */ import_react.default.createElement(
+  return (other_products == null ? void 0 : other_products.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, hideDivider ? null : /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: 0 } }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}_sales-wrap` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `sales-title` }, import_utils.locales.getText("pisell2.cart.sku-card.sales.title")), /* @__PURE__ */ import_react.default.createElement(
     import_collapsibleList.default,
     {
       list: other_products || [],
@@ -59,6 +59,7 @@ var Sales = ({ hideDivider, dataSource }) => {
         return /* @__PURE__ */ import_react.default.createElement(
           import_basicInfo.default,
           {
+            isShowImage,
             style: {
               border: "1px solid #D0D5DD",
               borderRadius: 4,

package/lib/components/productCard/cartSkuCard/components/specs/index.d.ts

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

package/lib/components/productCard/cartSkuCard/components/specs/index.js

@@ -44,7 +44,8 @@ var Specs = (props) => {
     {
       style: {
         color: "#667085",
-        fontSize: 10
+        fontSize: 10,
+        lineHeight: "10px"
       }
     },
     import_utils.locales.getText("pisell2.cart.sku-card.more")
@@ -58,7 +59,7 @@ var Specs = (props) => {
   }
   if (options.length > 0) {
     const first = options[0];
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__specs` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "spec-item" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "spec-name" }, first.name), /* @__PURE__ */ import_react.default.createElement("span", { className: "spec-num" }, symbol, first.price, "x", first.num)), options.length > 1 ? more : null);
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__specs` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "spec-item" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "spec-name" }, first.name), /* @__PURE__ */ import_react.default.createElement("span", { className: "spec-num" }, /* @__PURE__ */ import_react.default.createElement("span", null, symbol, first.price), /* @__PURE__ */ import_react.default.createElement("span", null), "x", /* @__PURE__ */ import_react.default.createElement("span", null, first.num))), options.length > 1 ? more : null);
   }
   return null;
 };

package/lib/components/productCard/cartSkuCard/components/specs/index.less

@@ -24,5 +24,11 @@
       white-space: nowrap;
       margin-right: 8px;
     }
+
+    .spec-num {
+      display: flex;
+      gap: 4;
+      align-items: center;
+    }
   }
 }

package/lib/components/productCard/cartSkuCard/components/timeRange/index.js

@@ -35,6 +35,7 @@ module.exports = __toCommonJS(timeRange_exports);
 var import_iconfont = __toESM(require("../../../../iconfont"));
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_utils = require("../../../utils");
 var import_dayjs = __toESM(require("dayjs"));
 var import_zh_cn = require("dayjs/locale/zh-cn");
 var import_en = require("dayjs/locale/en");
@@ -62,6 +63,6 @@ var TimeRange = (props) => {
   const renderTimeItem = (time) => {
     return /* @__PURE__ */ import_react.default.createElement("div", { className: "time-range-item" }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { className: "time-icon", type: "pisell2-clock" }), /* @__PURE__ */ import_react.default.createElement("span", { className: "time-str" }, (0, import_dayjs.default)(time).format(_format)));
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: "4px 0" } }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__time-range` }, renderTimeItem(start_date), /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { className: "joint-icon", type: "pisell2-arrow-right" }), renderTimeItem(end_date)));
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: "0" } }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__time-range` }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { className: "time-icon", type: "pisell2-clock" }), (0, import_utils.getServiceTime)(dataSource, start_date)));
 };
 var timeRange_default = TimeRange;

package/lib/components/productCard/cartSkuCard/components/timeRange/index.less

@@ -1,5 +1,6 @@
 .pisell-cart-sku-card__time-range {
   user-select: none;
+  color: #667085;
 
   display: flex;
   align-items: center;
@@ -11,6 +12,11 @@
     color: #7f56da;
   }
 
+  .time-icon {
+    font-size: 16px;
+    color: #7f56da;
+  }
+
   .time-range-item {
     white-space: nowrap;
     display: flex;
@@ -18,11 +24,6 @@
     align-items: center;
     overflow: hidden;
 
-    .time-icon {
-      font-size: 16px;
-      color: #7f56da;
-    }
-
     .time-str {
       color: #667085;
       font-size: 14px;

package/lib/components/productCard/cartSkuCard/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 import { ProductCardTypes } from '../types';
 interface ISKUCardProps extends ProductCardTypes {

package/lib/components/productCard/cartSkuCard/index.js

@@ -39,19 +39,17 @@ var import_utils = require("@pisell/utils");
 var import_locales = __toESM(require("./locales"));
 var import_basicInfo = __toESM(require("./components/basicInfo"));
 var import_discountReason = __toESM(require("./components/discountReason"));
-var import_holders = __toESM(require("./components/holders"));
 var import_timeRange = __toESM(require("./components/timeRange"));
 var import_resources = __toESM(require("./components/resources"));
 var import_packages = __toESM(require("./components/packages"));
 var import_sales = __toESM(require("./components/sales"));
 var import_swipeAction = require("./components/swipeAction");
+var import_Note = __toESM(require("./components/Note"));
 var import_index = require("./index.less");
 var import_iconfont = __toESM(require("../../iconfont"));
 var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
 var import_MultiDay = __toESM(require("../components/MultiDay"));
 var import_AmountFooter = __toESM(require("../components/AmountFooter"));
-var import_useOpenNote = __toESM(require("../hooks/useOpenNote"));
-var import_Note = __toESM(require("../components/Note"));
 var import_Action = __toESM(require("../components/Action"));
 var import_status = require("../status");
 var PREFIX = "pisell-cart-sku-card";
@@ -150,7 +148,6 @@ var CartSkuCard = (props) => {
   };
   const renderA5 = () => {
     var _a2, _b2;
-    const { image, name } = dataSource;
     return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, isShowDelete ? /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
@@ -162,11 +159,20 @@ var CartSkuCard = (props) => {
         }
       },
       /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pisell2-trash-01" })
-    ) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__content` }, isShowImage && image && /* @__PURE__ */ import_react.default.createElement("img", { src: import_utils.image.ali(image, 64), className: `product-cover` }), /* @__PURE__ */ import_react.default.createElement("div", { className: `product-info` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `product-name` }, name), /* @__PURE__ */ import_react.default.createElement(import_holders.default, { dataSource }))), /* @__PURE__ */ import_react.default.createElement(import_timeRange.default, { dataSource }), /* @__PURE__ */ import_react.default.createElement(import_resources.default, { dataSource }), /* @__PURE__ */ import_react.default.createElement(import_packages.default, { dataSource, isShowImage }), /* @__PURE__ */ import_react.default.createElement(
+    ) : null, /* @__PURE__ */ import_react.default.createElement(
+      import_basicInfo.default,
+      {
+        isShowImage: true,
+        dataSource,
+        isMainProduct: true,
+        type
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(import_timeRange.default, { dataSource }), /* @__PURE__ */ import_react.default.createElement(import_resources.default, { dataSource }), /* @__PURE__ */ import_react.default.createElement(import_packages.default, { dataSource, isShowImage }), /* @__PURE__ */ import_react.default.createElement(
       import_sales.default,
       {
         dataSource,
-        hideDivider: !!((_a2 = dataSource == null ? void 0 : dataSource.bundle) == null ? void 0 : _a2.length)
+        hideDivider: !!((_a2 = dataSource == null ? void 0 : dataSource.bundle) == null ? void 0 : _a2.length),
+        isShowImage
       }
     ), ((_b2 = dataSource.items) == null ? void 0 : _b2.length) ? /* @__PURE__ */ import_react.default.createElement(import_MultiDay.default, { dataSource, hideDivider }) : /* @__PURE__ */ import_react.default.createElement(
       import_AmountFooter.default,
@@ -194,7 +200,7 @@ var CartSkuCard = (props) => {
     }
     return renderA2();
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, type === "a2" ? /* @__PURE__ */ import_react.default.createElement(
     import_swipeAction.SwipeAction,
     {
       closeOnAction: false,
@@ -214,18 +220,18 @@ var CartSkuCard = (props) => {
       },
       renderContent()
     )
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_useOpenNote.default,
+  ) : /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${PREFIX}-wrapper`) }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
     {
-      ref: useOpenNoteRef,
-      onNoteChange: (e) => {
-        onNote == null ? void 0 : onNote({
-          ...dataSource,
-          note: e || ""
-        });
+      className: (0, import_classnames.default)(PREFIX, `${PREFIX}--${type}`),
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onCard == null ? void 0 : onCard(dataSource);
       }
-    }
-  ));
+    },
+    renderContent()
+  )));
 };
 var cartSkuCard_default = CartSkuCard;
 // Annotate the CommonJS export names for ESM import in node:

package/lib/components/productCard/cartSkuCard/index.less

@@ -9,6 +9,9 @@
   border-radius: inherit;
   user-select: none;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 
   &__delete-btn {
     cursor: pointer;
@@ -16,54 +19,11 @@
     padding: 10px;
     top: 0;
     right: 0;
+    z-index: 1;
 
     > span {
       color: #667085;
       font-size: 20px;
     }
   }
-
-  &__content {
-    display: flex;
-    gap: 4px;
-
-    img {
-      width: 48px;
-      height: 48px;
-      flex-shrink: 0;
-      border-radius: 6px;
-    }
-
-    .product-info {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      flex: 1 0 0;
-      flex-wrap: wrap;
-      overflow: hidden;
-      min-height: 30px;
-
-      .product-name {
-        color: var(--Gray-900, #101828);
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 20px;
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .product-price {
-        color: var(--Gray-900, #101828);
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 20px;
-        width: 100%;
-      }
-    }
-  }
 }

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

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

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

@@ -35,9 +35,17 @@ module.exports = __toCommonJS(Action_exports);
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
 var import_antd = require("antd");
+var import_iconfont = __toESM(require("../../../iconfont"));
 var import_index = require("./index.less");
 var prefix = "pisell-lowcode-";
 var Action = ({ item, onAction }) => {
+  const renderIcon = () => {
+    const { actionIcon } = item;
+    if (actionIcon && typeof actionIcon === "string") {
+      return /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: actionIcon, style: { fontSize: 20 } });
+    }
+    return null;
+  };
   return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${prefix}product-actions`) }, /* @__PURE__ */ import_react.default.createElement(
     import_antd.Button,
     {
@@ -49,6 +57,7 @@ var Action = ({ item, onAction }) => {
         onAction();
       }
     },
+    renderIcon(),
     item.actionText
   ));
 };

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

@@ -10,5 +10,8 @@
 
   &-product-actions-item {
     flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }

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

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

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

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

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

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

package/lib/components/productCard/components/Header/EditButton/index.d.ts

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

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

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

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

@@ -60,7 +60,8 @@ var Header = (props) => {
     price,
     symbol,
     disabled,
-    relation_products
+    relation_products,
+    num = 1
   } = item;
   const showPrice = (0, import_react.useMemo)(() => {
     return (bundle == null ? void 0 : bundle.length) > 0 || (options == null ? void 0 : options.length) > 0 || ((relation_products == null ? void 0 : relation_products.length) || 0) > 0;
@@ -71,6 +72,9 @@ var Header = (props) => {
   const showDelete = (0, import_react.useMemo)(() => {
     return isShowDelete && !disabledEdit && !disabled;
   }, [isShowDelete, disabledEdit, disabled]);
+  const renderNumTag = () => {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`num-tag`) }, num < 100 ? num : "99+");
+  };
   const renderImage = () => {
     if (!isShowImage) return null;
     if (image) {
@@ -94,6 +98,7 @@ var Header = (props) => {
       )
     },
     showDelete ? /* @__PURE__ */ import_react.default.createElement(import_DeleteButton.default, { onDelete }) : null,
+    renderNumTag(),
     renderImage(),
     id ? /* @__PURE__ */ import_react.default.createElement(
       "div",

package/lib/components/productCard/components/Header/index.less

@@ -6,6 +6,26 @@
     align-items: center;
     gap: 8px;
     padding-right: 0 !important;
+
+    .num-tag {
+      background-color: #7f56da;
+      position: absolute;
+      left: 0;
+      top: 0;
+      border-radius: 12px;
+      min-width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+
+      color: var(--Base-White, #fff);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 16px;
+    }
   }
 
   &-product-options-header {
@@ -24,8 +44,8 @@
     height: 64px;
     flex-shrink: 0;
     border-radius: 8px;
-    background-color: #DEDEDE;
-    color: #7E7E7E;
+    background-color: #dedede;
+    color: #7e7e7e;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -69,4 +89,4 @@
     font-weight: 400;
     line-height: 20px;
   }
-}
+}

package/lib/components/productCard/components/MultiDay/index.d.ts

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

package/lib/components/productCard/components/Note/index.d.ts

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

package/lib/components/productCard/components/Packages/components/collapsibleList/utils.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const renderBundles: (item: any, hidePrice?: boolean, isShowPackageNote?: boolean) => JSX.Element;

package/lib/components/productCard/components/Packages/components/options/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 declare const Options: ({ options, amountSymbol }: any) => JSX.Element | null;
 export default Options;