@pisell/materials 1.10.12 → 1.10.14

package/es/components/PisellProcedure/components/ProcedureHeader.js

@@ -13,7 +13,7 @@ import React, { useCallback, useMemo, useState } from "react";
 * @author Pisell Team
 */
 const ProcedureHeader = ({ headerProps, currentStep, className, goPrev, goToStep, onClose, onFirstStepBack, onBackConfirm, onCloseConfirm }) => {
-	var _modalConfig$config2, _modalConfig$config3;
+	var _mergedStepsProps$mob, _mergedStepsProps$mob2, _modalConfig$config2, _modalConfig$config3;
 	/** 确认弹窗类型（back: 返回确认，close: 关闭确认，null: 不显示） */
 	const [modalType, setModalType] = useState(null);
 	/** 目标步骤索引（用于步骤跳转，-1 表示返回上一步） */
@@ -192,8 +192,8 @@ const ProcedureHeader = ({ headerProps, currentStep, className, goPrev, goToStep
 			else handleBackClick();
 		}
 	}, actualLeftSlot), (headerProps === null || headerProps === void 0 ? void 0 : headerProps.showSteps) !== false && /* @__PURE__ */ React.createElement("div", { className: "pisell-procedure-header__center" }, /* @__PURE__ */ React.createElement(PisellSteps_default, _objectSpread2(_objectSpread2({}, mergedStepsProps), {}, {
-		mobileMode: "auto",
-		mobileBreakpoint: 744
+		mobileMode: (_mergedStepsProps$mob = mergedStepsProps.mobileMode) !== null && _mergedStepsProps$mob !== void 0 ? _mergedStepsProps$mob : "auto",
+		mobileBreakpoint: (_mergedStepsProps$mob2 = mergedStepsProps.mobileBreakpoint) !== null && _mergedStepsProps$mob2 !== void 0 ? _mergedStepsProps$mob2 : 744
 	}))), showActualRightArea && /* @__PURE__ */ React.createElement("div", {
 		className: "pisell-procedure-header__right",
 		onClick: () => {

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

@@ -8,9 +8,10 @@ import classNames from "classnames";
 import "./index.less";
 //#region src/components/productCard/cartSkuCard/components/AmountFooter/index.tsx
 const Footer = ({ item, hideDivider, type, isOnlyTotal }) => {
-	const { total, origin_total, symbol, tip, num, discount_reason } = item;
+	const { total, origin_total, symbol, tip, num, discount_reason, amountFormatter } = item;
 	const weighingInfo = resolveWeighingSnapshot(item);
 	const formatFooterAmount = (amount, precision = 2) => {
+		if (amountFormatter) return amountFormatter(amount, precision);
 		if (!weighingInfo) return _formatAmount(amount, symbol, precision);
 		return formatAmountWithOptions(amount, symbol, {
 			precision,

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

@@ -23,7 +23,7 @@
   }
 
   &__footer-price-wrap--weighing {
-    font-size: var(--pisell-cart-sku-card-physical-text-height, 4mm);
+    font-size: var(--pisell-cart-sku-card-weighing-summary-font-size, 18px);
     line-height: 1.3;
     letter-spacing: -0.02em;
   }

package/es/components/productCard/cartSkuCard/components/Gift/index.js

@@ -18,7 +18,6 @@ const Gift = (props) => {
 		return /* @__PURE__ */ React.createElement("div", { className: `product-cover-text` }, displayText);
 	}, [displayGifts]);
 	if (!isShow) return null;
-	console.log("Gift777", props, selectedCount);
 	return /* @__PURE__ */ React.createElement("div", {
 		className: `${prefixCls}`,
 		onClick

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

@@ -10,7 +10,8 @@ import "./index.less";
 //#region src/components/productCard/cartSkuCard/components/basicInfo/index.tsx
 const BasicInfo = (props) => {
 	const { isShowImage, isShowQuantityBadge = true, dataSource = {}, style, isMainProduct, type, maxSpecsCount = 1, isBundle, showFooter, isShowOriginalPrice = false, isShowEditProduct = false, onEditProduct, disabledEditClick = false } = props;
-	const { image: image$1, bundle, options, product_option_string, name, price, symbol, total = 0, origin_total = 0, num = 1, holder_id, isFormSubject, totalDifference = 0 } = dataSource;
+	const { image: image$1, bundle, options, product_option_string, name, price, symbol, total = 0, origin_total = 0, num = 1, holder_id, isFormSubject, totalDifference = 0, amountFormatter } = dataSource;
+	const formatProductAmount = (value, precision = 2) => amountFormatter ? amountFormatter(value, precision) : formatAmount(value, precision, symbol);
 	const renderNumTag = () => {
 		return /* @__PURE__ */ React.createElement("div", { className: classNames(`num-tag`, { "is-main": isMainProduct }) }, num < 100 ? num : "99+");
 	};
@@ -32,7 +33,7 @@ const BasicInfo = (props) => {
 	};
 	const renderProductPrice = () => {
 		if (hasWeighingInfo) return null;
-		return formatAmount(price, 2, symbol);
+		return formatProductAmount(price !== null && price !== void 0 ? price : 0);
 	};
 	const renderImage = () => {
 		if (!isShowImage) return null;
@@ -78,12 +79,12 @@ const BasicInfo = (props) => {
 		return /* @__PURE__ */ React.createElement("div", {
 			className: basicInfoClassName,
 			style: style || {}
-		}, isShowQuantityBadge ? renderNumTag() : null, renderImage(), !isShowImage || !image$1 && !name ? /* @__PURE__ */ React.createElement("div", { style: { width: 20 } }) : null, /* @__PURE__ */ React.createElement("div", { className: `product-info product-info-a9` }, /* @__PURE__ */ React.createElement("div", { className: `product-basic-info-wrap` }, /* @__PURE__ */ React.createElement("div", { className: `product-basic-info ${isBundle ? "row" : ""}` }, /* @__PURE__ */ React.createElement("div", { className: `product-name ${renderEdit ? "product-name-edit" : ""}` }, name), /* @__PURE__ */ React.createElement("div", { className: `product-price` }, /* @__PURE__ */ React.createElement("span", null, renderProductPrice()), _isShowOriginalPrice ? /* @__PURE__ */ React.createElement("span", { className: `original-price` }, formatAmount(origin_total, 2, symbol)) : null)), renderProductMeta()), renderEdit));
+		}, isShowQuantityBadge ? renderNumTag() : null, renderImage(), !isShowImage || !image$1 && !name ? /* @__PURE__ */ React.createElement("div", { style: { width: 20 } }) : null, /* @__PURE__ */ React.createElement("div", { className: `product-info product-info-a9` }, /* @__PURE__ */ React.createElement("div", { className: `product-basic-info-wrap` }, /* @__PURE__ */ React.createElement("div", { className: `product-basic-info ${isBundle ? "row" : ""}` }, /* @__PURE__ */ React.createElement("div", { className: `product-name ${renderEdit ? "product-name-edit" : ""}` }, name), /* @__PURE__ */ React.createElement("div", { className: `product-price` }, /* @__PURE__ */ React.createElement("span", null, renderProductPrice()), _isShowOriginalPrice ? /* @__PURE__ */ React.createElement("span", { className: `original-price` }, formatProductAmount(origin_total)) : null)), renderProductMeta()), renderEdit));
 	}
 	return /* @__PURE__ */ React.createElement("div", {
 		className: basicInfoClassName,
 		style: style || {}
-	}, isShowQuantityBadge ? renderNumTag() : null, renderImage(), !isShowImage || !image$1 && !name ? /* @__PURE__ */ React.createElement("div", { style: { width: 20 } }) : null, /* @__PURE__ */ React.createElement("div", { className: `product-info` }, /* @__PURE__ */ React.createElement("div", { className: `product-name` }, name), hasProductMeta ? renderProductMeta() : /* @__PURE__ */ React.createElement("div", { className: `product-price` }, renderProductPrice())), /* @__PURE__ */ React.createElement("div", { className: `product-amount` }, /* @__PURE__ */ React.createElement("div", { className: `total-amont` }, formatAmount(total * num - (totalDifference !== null && totalDifference !== void 0 ? totalDifference : 0), 2, symbol)), origin_total && Number(total) !== Number(origin_total) ? /* @__PURE__ */ React.createElement("div", { className: `origin-amount` }, formatAmount(origin_total * num, 2, symbol)) : null));
+	}, isShowQuantityBadge ? renderNumTag() : null, renderImage(), !isShowImage || !image$1 && !name ? /* @__PURE__ */ React.createElement("div", { style: { width: 20 } }) : null, /* @__PURE__ */ React.createElement("div", { className: `product-info` }, /* @__PURE__ */ React.createElement("div", { className: `product-name` }, name), hasProductMeta ? renderProductMeta() : /* @__PURE__ */ React.createElement("div", { className: `product-price` }, renderProductPrice())), /* @__PURE__ */ React.createElement("div", { className: `product-amount` }, /* @__PURE__ */ React.createElement("div", { className: `total-amont` }, formatProductAmount(total * num - (totalDifference !== null && totalDifference !== void 0 ? totalDifference : 0))), origin_total && Number(total) !== Number(origin_total) ? /* @__PURE__ */ React.createElement("div", { className: `origin-amount` }, formatProductAmount(origin_total * num)) : null));
 };
 //#endregion
 export { BasicInfo as default };

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

@@ -9,7 +9,7 @@ import { Divider } from "antd";
 import "./index.less";
 //#region src/components/productCard/cartSkuCard/components/packages/index.tsx
 const Packages = ({ isShowImage, isShowQuantityBadge, dataSource = {}, type }) => {
-	const { bundle = [], symbol = "$" } = dataSource;
+	const { bundle = [], symbol = "$", amountFormatter } = dataSource;
 	const showFooter = useCallback((_bundle) => {
 		const { options = [], bundle = [] } = _bundle;
 		const hasSpecs = (bundle === null || bundle === void 0 ? void 0 : bundle.length) || (options === null || options === void 0 ? void 0 : options.length);
@@ -29,7 +29,8 @@ const Packages = ({ isShowImage, isShowQuantityBadge, dataSource = {}, type }) =
 				dataSource: _objectSpread2(_objectSpread2({}, item), {}, {
 					name: item.title,
 					image: item.cover,
-					symbol
+					symbol,
+					amountFormatter
 				}),
 				type,
 				isBundle: true,
@@ -37,7 +38,8 @@ const Packages = ({ isShowImage, isShowQuantityBadge, dataSource = {}, type }) =
 			}), showFooter(item) ? /* @__PURE__ */ React.createElement(Footer, {
 				item: _objectSpread2(_objectSpread2({}, item), {}, {
 					total: item === null || item === void 0 ? void 0 : item.price,
-					symbol: dataSource === null || dataSource === void 0 ? void 0 : dataSource.symbol
+					symbol: dataSource === null || dataSource === void 0 ? void 0 : dataSource.symbol,
+					amountFormatter
 				}),
 				hideDivider: false,
 				type: "total"

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

@@ -6,7 +6,8 @@ import "./index.less";
 //#region src/components/productCard/cartSkuCard/components/specs/index.tsx
 const Specs = (props) => {
 	const { dataSource = {}, maxSpecsCount = 1, type } = props;
-	const { bundle, options, product_option_string, symbol } = dataSource;
+	const { bundle, options, product_option_string, symbol, amountFormatter } = dataSource;
+	const formatSpecAmount = (value) => amountFormatter ? amountFormatter(value, 2) : `${symbol || ""}${value}`;
 	const more = /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__specs-more` }, locales.getText("pisell2.cart.sku-card.more"));
 	/**
 	* @description: 渲染多规格字符串
@@ -17,7 +18,8 @@ const Specs = (props) => {
 	};
 	if (type === "a9") return /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__specs-a9-wrap` }, product_option_string ? /* @__PURE__ */ React.createElement("div", { className: "option-string-wrap" }, renderOptionString()) : null, options && (options === null || options === void 0 ? void 0 : options.length) > 0 ? /* @__PURE__ */ React.createElement(Options, {
 		options,
-		amountSymbol: symbol
+		amountSymbol: symbol,
+		amountFormatter
 	}) : null);
 	if (Array.isArray(bundle) && (bundle === null || bundle === void 0 ? void 0 : bundle.length) > 0) {
 		const displayItems = bundle.slice(0, maxSpecsCount);
@@ -29,7 +31,7 @@ const Specs = (props) => {
 		return /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__specs` }, displayItems.map((item, index) => /* @__PURE__ */ React.createElement("div", {
 			className: "spec-item",
 			key: index
-		}, /* @__PURE__ */ React.createElement("span", { className: "spec-name" }, item.name), /* @__PURE__ */ React.createElement("span", { className: "spec-num" }, /* @__PURE__ */ React.createElement("span", null, symbol, item.price), /* @__PURE__ */ React.createElement("span", null), "x", /* @__PURE__ */ React.createElement("span", null, item.num)))), options.length > maxSpecsCount ? more : null);
+		}, /* @__PURE__ */ React.createElement("span", { className: "spec-name" }, item.name), /* @__PURE__ */ React.createElement("span", { className: "spec-num" }, /* @__PURE__ */ React.createElement("span", null, formatSpecAmount(item.price)), /* @__PURE__ */ React.createElement("span", null), "x", /* @__PURE__ */ React.createElement("span", null, item.num)))), options.length > maxSpecsCount ? more : null);
 	}
 	return null;
 };

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

@@ -47,9 +47,9 @@
 
   .pisell-cart-sku-card__product-meta--weighing & {
     .pisell-lowcode-packages-product-bundle-option {
-      font-size: var(--pisell-cart-sku-card-physical-text-height, 4mm);
+      font-size: var(--pisell-cart-sku-card-weighing-meta-font-size, 18px);
       line-height: 1.3;
-      letter-spacing: -0.04em;
+      letter-spacing: -0.01em;
     }
   }
 
@@ -62,8 +62,13 @@
 
 .pisell-cart-sku-card__product-meta--weighing {
   .pisell-cart-sku-card__specs {
-    font-size: var(--pisell-cart-sku-card-physical-text-height, 4mm);
+    font-size: var(--pisell-cart-sku-card-weighing-meta-font-size, 18px);
     line-height: 1.3;
-    letter-spacing: -0.04em;
+    letter-spacing: -0.01em;
+  }
+
+  .pisell-cart-sku-card__specs-more {
+    font-size: 14px;
+    line-height: 18px;
   }
 }

package/es/components/productCard/cartSkuCard/components/swipeAction/index.js

@@ -50,6 +50,10 @@ const SwipeAction = forwardRef((p, ref) => {
 	const rootRef = useRef(null);
 	const leftRef = useRef(null);
 	const rightRef = useRef(null);
+	const resizeObserverRef = useRef(null);
+	const touchOutsideCleanupRef = useRef(null);
+	const latestPropsRef = useRef(props);
+	latestPropsRef.current = props;
 	const [containerHeight, setContainerHeight] = useState(0);
 	function getWidth(ref) {
 		const element = ref.current;
@@ -70,6 +74,29 @@ const SwipeAction = forwardRef((p, ref) => {
 	function getRootHeight() {
 		return getHeight(rootRef);
 	}
+	function syncActionHeightClasses(height) {
+		const rightContainer = rightRef.current;
+		if (!rightContainer) return;
+		const heightSize = height > 180 ? "large" : height > 120 ? "medium" : "small";
+		rightContainer.classList.remove(`${classPrefix}-height-large`, `${classPrefix}-height-medium`, `${classPrefix}-height-small`);
+		rightContainer.classList.add(`${classPrefix}-height-${heightSize}`);
+		Array.from(rightContainer.children).forEach((element) => {
+			element.classList.remove(`${classPrefix}-action-height-large`, `${classPrefix}-action-height-medium`, `${classPrefix}-action-height-small`);
+			element.classList.add(`${classPrefix}-action-height-${heightSize}`);
+		});
+	}
+	function updateHeight() {
+		const height = getRootHeight();
+		syncActionHeightClasses(height);
+		setContainerHeight((currentHeight) => currentHeight === height ? currentHeight : height);
+	}
+	function startHeightTracking() {
+		if (resizeObserverRef.current) return;
+		updateHeight();
+		const resizeObserver = new ResizeObserver(updateHeight);
+		resizeObserverRef.current = resizeObserver;
+		if (rootRef.current) resizeObserver.observe(rootRef.current);
+	}
 	const [{ x }, api] = useSpring(() => ({
 		x: 0,
 		config: {
@@ -84,9 +111,43 @@ const SwipeAction = forwardRef((p, ref) => {
 		(_dragCancelRef$curren = dragCancelRef.current) === null || _dragCancelRef$curren === void 0 || _dragCancelRef$curren.call(dragCancelRef);
 		draggingRef.current = false;
 	}
+	function stopTouchOutsideListener() {
+		const cleanup = touchOutsideCleanupRef.current;
+		if (!cleanup) return;
+		cleanup();
+		touchOutsideCleanupRef.current = null;
+	}
+	function startTouchOutsideListener() {
+		if (!latestPropsRef.current.closeOnTouchOutside || touchOutsideCleanupRef.current) return;
+		const eventType = "ontouchstart" in window ? "touchstart" : "mousedown";
+		const handle = (e) => {
+			const latestProps = latestPropsRef.current;
+			if (e.target && latestProps.escapeDom) {
+				const container = document.querySelector(latestProps.escapeDom);
+				if (container === null || container === void 0 ? void 0 : container.contains(e.target)) return;
+			}
+			if (x.get() === 0) {
+				stopTouchOutsideListener();
+				return;
+			}
+			const root = rootRef.current;
+			if (root && !root.contains(e.target)) {
+				var _latestProps$onClose;
+				api.start({ x: 0 });
+				forceCancelDrag();
+				stopTouchOutsideListener();
+				(_latestProps$onClose = latestProps.onClose) === null || _latestProps$onClose === void 0 || _latestProps$onClose.call(latestProps);
+			}
+		};
+		document.addEventListener(eventType, handle);
+		touchOutsideCleanupRef.current = () => {
+			document.removeEventListener(eventType, handle);
+		};
+	}
 	const bind = useDrag((state) => {
 		dragCancelRef.current = state.cancel;
 		if (!state.intentional) return;
+		startHeightTracking();
 		if (state.down) draggingRef.current = true;
 		if (!draggingRef.current) return;
 		const [offsetX] = state.offset;
@@ -105,8 +166,9 @@ const SwipeAction = forwardRef((p, ref) => {
 			api.start({ x: targetX });
 			if (targetX !== 0) {
 				var _p$onActionsReveal;
+				startTouchOutsideListener();
 				(_p$onActionsReveal = p.onActionsReveal) === null || _p$onActionsReveal === void 0 || _p$onActionsReveal.call(p, targetX > 0 ? "left" : "right");
-			}
+			} else stopTouchOutsideListener();
 			window.setTimeout(() => {
 				draggingRef.current = false;
 			});
@@ -132,46 +194,32 @@ const SwipeAction = forwardRef((p, ref) => {
 		var _props$onClose;
 		api.start({ x: 0 });
 		forceCancelDrag();
+		stopTouchOutsideListener();
 		(_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props);
 	};
 	useImperativeHandle(ref, () => ({
 		show: (side = "right") => {
 			var _p$onActionsReveal2;
+			startHeightTracking();
 			if (side === "right") api.start({ x: -getRightWidth() });
 			else if (side === "left") api.start({ x: getLeftWidth() });
+			startTouchOutsideListener();
 			(_p$onActionsReveal2 = p.onActionsReveal) === null || _p$onActionsReveal2 === void 0 || _p$onActionsReveal2.call(p, side);
 		},
 		close
 	}));
 	useEffect(() => {
-		const updateHeight = () => {
-			setContainerHeight(getRootHeight());
-		};
-		updateHeight();
-		const resizeObserver = new ResizeObserver(updateHeight);
-		if (rootRef.current) resizeObserver.observe(rootRef.current);
 		return () => {
-			resizeObserver.disconnect();
+			var _resizeObserverRef$cu;
+			(_resizeObserverRef$cu = resizeObserverRef.current) === null || _resizeObserverRef$cu === void 0 || _resizeObserverRef$cu.disconnect();
+			resizeObserverRef.current = null;
+			stopTouchOutsideListener();
 		};
 	}, []);
 	useEffect(() => {
-		if (!props.closeOnTouchOutside) return;
-		function handle(e) {
-			if (e.target && props.escapeDom) {
-				const container = document.querySelector(props.escapeDom);
-				if (container === null || container === void 0 ? void 0 : container.contains(e.target)) return;
-			}
-			if (x.get() === 0) return;
-			const root = rootRef.current;
-			if (root && !root.contains(e.target)) close();
-		}
-		if ("ontouchstart" in window) document.addEventListener("touchstart", handle);
-		else document.addEventListener("mousedown", handle);
-		return () => {
-			document.removeEventListener("touchstart", handle);
-			document.removeEventListener("mousedown", handle);
-		};
-	}, [props.closeOnTouchOutside, props.escapeDom]);
+		if (!props.closeOnTouchOutside) stopTouchOutsideListener();
+		else if (x.get() !== 0) startTouchOutsideListener();
+	}, [props.closeOnTouchOutside]);
 	const getRightContainerClass = () => {
 		const baseClass = `${classPrefix}-actions ${classPrefix}-actions-right`;
 		if (containerHeight > 180) return `${baseClass} ${classPrefix}-height-large`;
@@ -202,6 +250,9 @@ const SwipeAction = forwardRef((p, ref) => {
 	}
 	return withNativeProps(props, /* @__PURE__ */ React.createElement("div", _objectSpread2(_objectSpread2({ className: classPrefix }, bind()), {}, {
 		ref: rootRef,
+		onPointerDownCapture: startHeightTracking,
+		onTouchStartCapture: startHeightTracking,
+		onMouseDownCapture: startHeightTracking,
 		onClickCapture: (e) => {
 			if (draggingRef.current) {
 				e.stopPropagation();

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

@@ -63,7 +63,6 @@ const CartSkuCard = (props) => {
 	const useOpenNoteRef = useRef();
 	const context = useEngineContext();
 	locales.init(locales_default, ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut = _context$appHelper$ut.storage) === null || _context$appHelper$ut === void 0 ? void 0 : _context$appHelper$ut.get("umi_locale")) || "en");
-	console.log("prodcut props", props);
 	const { isShowAction, actionText } = dataSource;
 	const _rightActions = useMemo(() => {
 		const deleteAction = {

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

@@ -36,6 +36,9 @@
     var(--pisell-cart-sku-card-weighing-font-base) *
       var(--pisell-cart-sku-card-device-font-scale)
   );
+  // 称重卡片的辅助信息保持易读，但不与毛重/净重争夺视觉层级。
+  --pisell-cart-sku-card-weighing-meta-font-size: 18px;
+  --pisell-cart-sku-card-weighing-summary-font-size: 18px;
 
   padding: 4px 8px 4px 4px;
   border-radius: inherit;

package/es/components/productCard/components/Packages/components/options/index.js

@@ -3,12 +3,13 @@ import React from "react";
 import "./index.less";
 //#region src/components/productCard/components/Packages/components/options/index.tsx
 const prefix = "pisell-lowcode-";
-const Options = ({ options, amountSymbol }) => {
+const Options = ({ options, amountSymbol, amountFormatter }) => {
+	const formatOptionAmount = (value) => amountFormatter ? amountFormatter(value, 2) : _formatAmount(value, amountSymbol);
 	return (options === null || options === void 0 ? void 0 : options.length) > 0 ? /* @__PURE__ */ React.createElement("div", { className: `${prefix}packages-product-bundle-option` }, options.map((option, index) => {
 		return /* @__PURE__ */ React.createElement("div", {
 			key: option.id,
 			className: `${prefix}packages-product-bundle-option-item`
-		}, /* @__PURE__ */ React.createElement("div", { className: `${prefix}packages-product-bundle-option-item-left` }, /* @__PURE__ */ React.createElement("span", null, option === null || option === void 0 ? void 0 : option.name), /* @__PURE__ */ React.createElement("div", { className: `${prefix}packages-product-bundle-option-item-left-amount` }, /* @__PURE__ */ React.createElement("span", null, _formatAmount(option === null || option === void 0 ? void 0 : option.price, amountSymbol)), /* @__PURE__ */ React.createElement("span", null, "×"), /* @__PURE__ */ React.createElement("span", null, option === null || option === void 0 ? void 0 : option.num))), /* @__PURE__ */ React.createElement("span", { className: `${prefix}packages-product-bundle-option-item-amount` }, _formatAmount((option === null || option === void 0 ? void 0 : option.price) * (option === null || option === void 0 ? void 0 : option.num), amountSymbol)));
+		}, /* @__PURE__ */ React.createElement("div", { className: `${prefix}packages-product-bundle-option-item-left` }, /* @__PURE__ */ React.createElement("span", null, option === null || option === void 0 ? void 0 : option.name), /* @__PURE__ */ React.createElement("div", { className: `${prefix}packages-product-bundle-option-item-left-amount` }, /* @__PURE__ */ React.createElement("span", null, formatOptionAmount(option === null || option === void 0 ? void 0 : option.price)), /* @__PURE__ */ React.createElement("span", null, "×"), /* @__PURE__ */ React.createElement("span", null, option === null || option === void 0 ? void 0 : option.num))), /* @__PURE__ */ React.createElement("span", { className: `${prefix}packages-product-bundle-option-item-amount` }, formatOptionAmount((option === null || option === void 0 ? void 0 : option.price) * (option === null || option === void 0 ? void 0 : option.num))));
 	})) : null;
 };
 //#endregion

package/es/components/productCard/components/Time/components/SelectHolderMultiple/index.js

@@ -31,9 +31,7 @@ const SelectHolderMultiple = ({ lists, value, onChange, holderMode, isShowAddHol
 			return acc;
 		}, {});
 	}, [lists]);
-	console.log(optionsMap, value, "optionsMap");
 	const handleClose = (item) => {
-		console.log("item", item, value);
 		handleChange(value.filter((d) => d !== item));
 	};
 	const renderHolder = () => {

package/es/components/productCard/lineItem/BookingLineItem.js

@@ -63,8 +63,9 @@ const getStatusOption = (status, statusOptions = []) => {
 	};
 };
 const BookingLineItem = (props) => {
-	var _ref, _ref2, _dataSource$promotion;
+	var _ref, _ref2, _dataSource$promotion, _dataSource$giftData;
 	const { dataSource, type, cartSkuType, isShowBookingHeader, relatedProductDataSource, addTimeProductDataSources = [], rightActions = [], rightActionsDisplay = "swipe", escapeDom, isShowImage, isShowQuantityBadge = true, isFormSubject, isShowDelete, isShowInlineDelete = isShowDelete, isShowNote, isShowAmountFooter, disabledClick, disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, holderOptions, onBookingStatusChange, onAddTimeProductCard, onAction, onDelete, onNote, onCard, onPromotion, onGift } = props, other = _objectWithoutProperties(props, _excluded);
+	const shouldRenderRelatedProduct = isShowRelatedProduct && Boolean(relatedProductDataSource);
 	const [isAddTimeProductsExpanded, setIsAddTimeProductsExpanded] = useState(false);
 	const { isShowAction, actionText } = dataSource;
 	const currentStatus = useMemo(() => getStatusOption(dataSource === null || dataSource === void 0 ? void 0 : dataSource.appointment_status, statusOptions), [dataSource === null || dataSource === void 0 ? void 0 : dataSource.appointment_status, statusOptions]);
@@ -115,7 +116,7 @@ const BookingLineItem = (props) => {
 	const renderProductCard = (productDataSource, source, options = {}) => {
 		var _productDataSource$pr;
 		if (!productDataSource || (productDataSource === null || productDataSource === void 0 ? void 0 : productDataSource.isGift)) return null;
-		const { showProductPromotion = true } = options;
+		const { showProductPromotion = true, showAmountFooter = true } = options;
 		const productPromotion = (productDataSource === null || productDataSource === void 0 || (_productDataSource$pr = productDataSource.promotions) === null || _productDataSource$pr === void 0 ? void 0 : _productDataSource$pr.length) ? /* @__PURE__ */ React.createElement(Promotion, {
 			promotions: productDataSource.promotions,
 			onClick: (item) => onPromotion === null || onPromotion === void 0 ? void 0 : onPromotion(item)
@@ -131,7 +132,7 @@ const BookingLineItem = (props) => {
 			isShowImage,
 			isShowQuantityBadge,
 			type: cartSkuType
-		}), isShowAmountFooter ? /* @__PURE__ */ React.createElement(Footer, {
+		}), isShowAmountFooter && showAmountFooter ? /* @__PURE__ */ React.createElement(Footer, {
 			item: productDataSource,
 			hideDivider: false,
 			type: "total"
@@ -171,7 +172,8 @@ const BookingLineItem = (props) => {
 		}, locales.getText(isAddTimeProductsExpanded ? "pisell2.line-item.collapse" : "pisell2.line-item.show-all")) : null));
 	};
 	if (dataSource === null || dataSource === void 0 ? void 0 : dataSource.isGift) return null;
-	const cardContent = /* @__PURE__ */ React.createElement("div", {
+	const shouldRenderFullWidthAmountFooter = rightActionsDisplay === "inline" && isShowAmountFooter && shouldRenderRelatedProduct;
+	const cardContent = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
 		className: classNames(PREFIX, `${PREFIX}--booking`, `${PREFIX}--${type}`),
 		onClick: (e) => {
 			if (disabledClick) return;
@@ -192,16 +194,23 @@ const BookingLineItem = (props) => {
 		dataSource,
 		holderOptions: resolvedHolderOptions,
 		isFormSubject: resolvedIsFormSubject
-	}) : null), !isShowBookingHeader ? renderDeleteButton(true) : null), isShowRelatedProduct && relatedProductDataSource ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, { style: { margin: 0 } }), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__related-product` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__related-product-card` }, renderProductCard(relatedProductDataSource, dataSource, { showProductPromotion: false }), renderPromotion, isShowAction && actionText ? /* @__PURE__ */ React.createElement(Action, {
+	}) : null), !isShowBookingHeader ? renderDeleteButton(true) : null), shouldRenderRelatedProduct ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, { style: { margin: 0 } }), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__related-product` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__related-product-card` }, renderProductCard(relatedProductDataSource, dataSource, {
+		showProductPromotion: false,
+		showAmountFooter: !shouldRenderFullWidthAmountFooter
+	}), renderPromotion, isShowAction && actionText ? /* @__PURE__ */ React.createElement(Action, {
 		item: dataSource,
 		onAction: () => onAction === null || onAction === void 0 ? void 0 : onAction(dataSource)
-	}) : null))) : null, renderAddTimeProducts());
-	return /* @__PURE__ */ React.createElement("div", { className: classNames(`${PREFIX}-wrapper-container`, { [`${PREFIX}-wrapper-container--inline`]: rightActionsDisplay === "inline" }) }, rightActionsDisplay === "inline" ? /* @__PURE__ */ React.createElement("div", { className: classNames(`${PREFIX}-wrapper`, `${PREFIX}-wrapper--inline`) }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-inline-content` }, cardContent), /* @__PURE__ */ React.createElement(InlineActions, { actions: bookingRightActions })) : /* @__PURE__ */ React.createElement(SwipeAction, {
+	}) : null))) : null, renderAddTimeProducts()));
+	return /* @__PURE__ */ React.createElement("div", { className: classNames(`${PREFIX}-wrapper-container`, { [`${PREFIX}-wrapper-container--inline`]: rightActionsDisplay === "inline" }) }, rightActionsDisplay === "inline" ? /* @__PURE__ */ React.createElement("div", { className: classNames(`${PREFIX}-wrapper`, `${PREFIX}-wrapper--inline`) }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-inline-main` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-inline-content` }, cardContent), /* @__PURE__ */ React.createElement(InlineActions, { actions: bookingRightActions })), shouldRenderFullWidthAmountFooter ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__inline-amount-footer` }, /* @__PURE__ */ React.createElement(Footer, {
+		item: relatedProductDataSource,
+		hideDivider: false,
+		type: "total"
+	})) : null) : /* @__PURE__ */ React.createElement(SwipeAction, {
 		closeOnAction: false,
 		className: classNames(`${PREFIX}-wrapper`),
 		rightActions: bookingRightActions,
 		escapeDom
-	}, cardContent), /* @__PURE__ */ React.createElement(Gift, _objectSpread2(_objectSpread2({}, (dataSource === null || dataSource === void 0 ? void 0 : dataSource.giftData) || {}), {}, { onClick: () => onGift === null || onGift === void 0 ? void 0 : onGift(dataSource) })));
+	}, cardContent), (dataSource === null || dataSource === void 0 || (_dataSource$giftData = dataSource.giftData) === null || _dataSource$giftData === void 0 ? void 0 : _dataSource$giftData.isShow) ? /* @__PURE__ */ React.createElement(Gift, _objectSpread2(_objectSpread2({}, dataSource.giftData), {}, { onClick: () => onGift === null || onGift === void 0 ? void 0 : onGift(dataSource) })) : null);
 };
 //#endregion
 export { BookingLineItem as default };

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

@@ -7,8 +7,8 @@ import locales_default from "../cartSkuCard/locales.js";
 import CartSkuCard from "../cartSkuCard/index.js";
 import locales_default$1 from "./locales.js";
 import BookingLineItem from "./BookingLineItem.js";
+import useInitLocalesOnce from "../../../hooks/useInitLocalesOnce.js";
 import React, { useMemo } from "react";
-import { locales } from "@pisell/utils";
 import "./index.less";
 //#region src/components/productCard/lineItem/index.tsx
 const _excluded = [
@@ -38,7 +38,9 @@ const _excluded = [
 	"onNote",
 	"onCard",
 	"onPromotion",
-	"onGift"
+	"onGift",
+	"symbol",
+	"amountFormatter"
 ];
 const isBookingItem = (dataSource) => {
 	var _dataSource$_extend;
@@ -75,7 +77,7 @@ const convertBundleOption = (option, translationOriginal) => {
 		num: (_ref = (_option$num = option.num) !== null && _option$num !== void 0 ? _option$num : option.quantity) !== null && _ref !== void 0 ? _ref : 1
 	});
 };
-const convertBundle = (bundle, translationOriginal) => {
+const convertBundle = (bundle, translationOriginal, amountFormatter) => {
 	const options = (bundle.option || []).map((option) => convertBundleOption(option, translationOriginal));
 	const bundlePrice = bundle.price_type === "markdown" && Number.isFinite(Number(bundle.price)) ? -Math.abs(Number(bundle.price)) : bundle.price;
 	return _objectSpread2(_objectSpread2({}, bundle), {}, {
@@ -92,6 +94,7 @@ const convertBundle = (bundle, translationOriginal) => {
 		custom_price_type_ext: bundle.price_type_ext,
 		options,
 		option: options,
+		amountFormatter,
 		_origin: bundle
 	});
 };
@@ -122,10 +125,10 @@ const mapLineItemOptions = (options, translationOriginal) => options.map((option
 		num: (_ref2 = (_option$num2 = option.num) !== null && _option$num2 !== void 0 ? _option$num2 : option.quantity) !== null && _ref2 !== void 0 ? _ref2 : 1
 	});
 });
-const convertProductToLineItemProduct = (product, translationOriginal, symbol) => {
+const convertProductToLineItemProduct = (product, translationOriginal, symbol, amountFormatter) => {
 	var _product$metadata2, _ref3, _product$num, _ref4, _product$num2, _product$metadata3, _product$metadata4, _product$discount_lis, _product$discount_lis2, _product$metadata5, _product$metadata6, _ref5, _product$num3;
 	const title = translateText(product.product_title || product.title, translationOriginal);
-	const bundle = (product.product_bundle || []).map((bundleItem) => convertBundle(bundleItem, translationOriginal));
+	const bundle = (product.product_bundle || []).map((bundleItem) => convertBundle(bundleItem, translationOriginal, amountFormatter));
 	const lineOriginTotal = resolveLineOriginTotal(product);
 	const lineOptions = mapLineItemOptions(resolveLineItemOptions(product), translationOriginal);
 	return {
@@ -149,6 +152,7 @@ const convertProductToLineItemProduct = (product, translationOriginal, symbol) =
 		payment_price: product.payment_price,
 		tax_fee: product.tax_fee,
 		symbol,
+		amountFormatter,
 		note: product.note,
 		product_sku: product.product_sku,
 		product_bundle: bundle,
@@ -178,33 +182,36 @@ const convertProductToLineItemProduct = (product, translationOriginal, symbol) =
 };
 const LineItem = (props) => {
 	var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _dataSource$_extend2, _dataSource$_extend4;
-	const { dataSource = defaultValue.dataSource, itemType, type = "a9", isShowBookingHeader, rightActions = [], rightActionsDisplay = "swipe", escapeDom, isShowImage = defaultValue.isShowImage, isShowDelete = defaultValue.isShowDelete, isShowInlineDelete = isShowDelete, isShowNote = defaultValue.isShowNote, isShowAmountFooter = defaultValue.isShowAmountFooter, disabledClick = defaultValue.disabledClick, disabledEdit = defaultValue.disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, holderOptions, onBookingStatusChange, onAddTimeProductCard, onAction, onDelete, onNote, onCard, onPromotion, onGift } = props, other = _objectWithoutProperties(props, _excluded);
-	console.log("LineItem xxxxxxxxx", props);
+	const { dataSource = defaultValue.dataSource, itemType, type = "a9", isShowBookingHeader, rightActions = [], rightActionsDisplay = "swipe", escapeDom, isShowImage = defaultValue.isShowImage, isShowDelete = defaultValue.isShowDelete, isShowInlineDelete = isShowDelete, isShowNote = defaultValue.isShowNote, isShowAmountFooter = defaultValue.isShowAmountFooter, disabledClick = defaultValue.disabledClick, disabledEdit = defaultValue.disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, holderOptions, onBookingStatusChange, onAddTimeProductCard, onAction, onDelete, onNote, onCard, onPromotion, onGift, symbol: amountSymbol, amountFormatter } = props, other = _objectWithoutProperties(props, _excluded);
+	const itemKind = itemType || (isBookingItem(dataSource) ? "booking" : "product");
 	const context = useEngineContext();
 	const translationOriginal = useTranslationOriginal();
-	const symbol = context.appHelper.utils.getSymbolic();
+	const symbol = amountSymbol || context.appHelper.utils.getSymbolic();
 	const locale = ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut.getApp) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.call(_context$appHelper$ut)) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.locales) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut3 = _context$appHelper$ut2.getLocale) === null || _context$appHelper$ut3 === void 0 ? void 0 : _context$appHelper$ut3.call(_context$appHelper$ut2)) || ((_context$appHelper$ut4 = context.appHelper.utils) === null || _context$appHelper$ut4 === void 0 || (_context$appHelper$ut4 = _context$appHelper$ut4.storage) === null || _context$appHelper$ut4 === void 0 ? void 0 : _context$appHelper$ut4.get("umi_locale")) || "en-US";
-	locales.init(locales_default$1, locale);
-	locales.init(locales_default, locale);
-	const itemKind = itemType || (isBookingItem(dataSource) ? "booking" : "product");
-	const productDataSource = useMemo(() => convertProductToLineItemProduct(dataSource, translationOriginal, symbol), [
+	useInitLocalesOnce(locales_default$1, locale);
+	useInitLocalesOnce(locales_default, locale);
+	const productDataSource = useMemo(() => itemKind === "product" ? convertProductToLineItemProduct(dataSource, translationOriginal, symbol, amountFormatter) : null, [
+		amountFormatter,
 		dataSource,
+		itemKind,
 		symbol,
 		translationOriginal
 	]);
 	const relatedProduct = dataSource === null || dataSource === void 0 || (_dataSource$_extend2 = dataSource._extend) === null || _dataSource$_extend2 === void 0 ? void 0 : _dataSource$_extend2.product;
 	const relatedProductDataSource = useMemo(() => {
 		if (!relatedProduct) return null;
-		return convertProductToLineItemProduct(relatedProduct, translationOriginal, symbol);
+		return convertProductToLineItemProduct(relatedProduct, translationOriginal, symbol, amountFormatter);
 	}, [
+		amountFormatter,
 		relatedProduct,
 		symbol,
 		translationOriginal
 	]);
 	const addTimeProductDataSources = useMemo(() => {
 		var _dataSource$_extend3;
-		return (Array.isArray(dataSource === null || dataSource === void 0 || (_dataSource$_extend3 = dataSource._extend) === null || _dataSource$_extend3 === void 0 ? void 0 : _dataSource$_extend3.addTimeProduct) ? dataSource._extend.addTimeProduct : []).map((item) => convertProductToLineItemProduct(item, translationOriginal, symbol));
+		return (Array.isArray(dataSource === null || dataSource === void 0 || (_dataSource$_extend3 = dataSource._extend) === null || _dataSource$_extend3 === void 0 ? void 0 : _dataSource$_extend3.addTimeProduct) ? dataSource._extend.addTimeProduct : []).map((item) => convertProductToLineItemProduct(item, translationOriginal, symbol, amountFormatter));
 	}, [
+		amountFormatter,
 		dataSource === null || dataSource === void 0 || (_dataSource$_extend4 = dataSource._extend) === null || _dataSource$_extend4 === void 0 ? void 0 : _dataSource$_extend4.addTimeProduct,
 		symbol,
 		translationOriginal

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

@@ -15,10 +15,16 @@
     box-sizing: border-box;
     width: 100%;
     display: flex;
-    align-items: stretch;
+    flex-direction: column;
   }
 }
 
+.pisell-line-item-inline-main {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+}
+
 .pisell-line-item-inline-content {
   min-width: 0;
   flex: 1;
@@ -249,6 +255,13 @@
     padding: 6px 8px 8px;
   }
 
+  // inline 操作仅占上方主体，价格栏放在其下方并占满整个预约卡。
+  &__inline-amount-footer {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 8px 4px;
+  }
+
   &__section-title {
     color: #101828;
     font-size: 12px;

package/es/hooks/useInitLocalesOnce.js

@@ -0,0 +1,23 @@
+import useEngineContext from "./useEngineContext.js";
+import { locales } from "@pisell/utils";
+//#region src/hooks/useInitLocalesOnce.ts
+const DEFAULT_LOCALE = "en";
+const initializedLocalesByTexts = /* @__PURE__ */ new WeakMap();
+const isWeakMapKey = (value) => typeof value === "object" && value !== null || typeof value === "function";
+const useInitLocalesOnce = (localeTexts, localeOverride) => {
+	var _context$appHelper, _context$engine;
+	const context = useEngineContext();
+	if (!localeTexts) return;
+	const _locale = localeOverride || (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.storage) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.get("umi_locale")) || (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || DEFAULT_LOCALE;
+	const normalizedLocale = locales.formatLocale(_locale);
+	const initializedLocales = isWeakMapKey(localeTexts) ? initializedLocalesByTexts.get(localeTexts) : void 0;
+	if ((initializedLocales === null || initializedLocales === void 0 ? void 0 : initializedLocales.has(normalizedLocale)) && locales.getLocale() === normalizedLocale) return;
+	locales.init(localeTexts, _locale);
+	if (isWeakMapKey(localeTexts)) {
+		const nextInitializedLocales = initializedLocales !== null && initializedLocales !== void 0 ? initializedLocales : /* @__PURE__ */ new Set();
+		nextInitializedLocales.add(normalizedLocale);
+		if (!initializedLocales) initializedLocalesByTexts.set(localeTexts, nextInitializedLocales);
+	}
+};
+//#endregion
+export { useInitLocalesOnce as default };