@pisell/private-materials 6.12.358 → 6.12.359

package/es/plus/pisellSalesProductCard/index.js

@@ -2,6 +2,7 @@ import useEngineContext from "../../hooks/useEngineContext.js";
 import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
 import NumericStepper from "../../pro/NumericStepper/index.js";
 import index from "../productSelect/components/pisellPriceText/index.js";
+import { resolveProductPricePresentation } from "../productSelect/pricing/pricePresentation.js";
 import SettlementPriceList from "../multiCurrencySettlement/SettlementPriceList.js";
 import locales_default from "./locales.js";
 import { cubicBezier } from "./utils.js";
@@ -58,7 +59,7 @@ function isNormalProduct(product) {
 	return !(hasOption || hasBundle || hasVariant || requiresDetail);
 }
 const PisellSalesProductCard = ({ product, requiresOptions = false, hideAction = false, value, selectedQuantity: selectedQuantityProp, disabled = false, soldOut = false, purchaseDisabled = false, stepperProps, optionsText, skuCardConfig, cartElementId, style, className, settlementPriceRows, onChange, onClick }) => {
-	var _context$appHelper$ut, _product$metadata2, _product$price, _value$num, _stepperProps$min3, _stepperProps$step;
+	var _context$appHelper$ut, _product$price, _product$metadata2, _pricePresentation$am, _value$num, _stepperProps$min3, _stepperProps$step;
 	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");
 	const normalProduct = useMemo(() => !requiresOptions && isNormalProduct(product), [product, requiresOptions]);
@@ -69,6 +70,7 @@ const PisellSalesProductCard = ({ product, requiresOptions = false, hideAction =
 	const soldOutIcon = String(locales.locale || "").toLowerCase().startsWith("zh") ? SOLD_OUT_ICON_URLS.cn : SOLD_OUT_ICON_URLS.en;
 	const title = resolveText((product === null || product === void 0 ? void 0 : product.title) || (product === null || product === void 0 ? void 0 : product.name));
 	const textCover = getTextCover(title);
+	const pricePresentation = (settlementPriceRows === null || settlementPriceRows === void 0 ? void 0 : settlementPriceRows.length) ? void 0 : resolveProductPricePresentation(product, { price: (_product$price = product.price) !== null && _product$price !== void 0 ? _product$price : 0 });
 	const promotionTags = useMemo(() => {
 		var _product$metadata;
 		const rawPromotionTags = (product === null || product === void 0 ? void 0 : product._promotionTags) || (product === null || product === void 0 || (_product$metadata = product.metadata) === null || _product$metadata === void 0 ? void 0 : _product$metadata._promotionTags) || [];
@@ -167,8 +169,11 @@ const PisellSalesProductCard = ({ product, requiresOptions = false, hideAction =
 		src: soldOutIcon,
 		alt: ""
 	})) : null), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__content` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__title` }, title), (settlementPriceRows === null || settlementPriceRows === void 0 ? void 0 : settlementPriceRows.length) ? /* @__PURE__ */ React.createElement(SettlementPriceList, { rows: settlementPriceRows }) : /* @__PURE__ */ React.createElement(index, {
-		value: (_product$price = product.price) !== null && _product$price !== void 0 ? _product$price : 0,
-		isMini: !!product.is_bundle
+		value: (_pricePresentation$am = pricePresentation === null || pricePresentation === void 0 ? void 0 : pricePresentation.amount) !== null && _pricePresentation$am !== void 0 ? _pricePresentation$am : 0,
+		isMini: (pricePresentation === null || pricePresentation === void 0 ? void 0 : pricePresentation.qualifier) === "from",
+		precision: pricePresentation === null || pricePresentation === void 0 ? void 0 : pricePresentation.precision,
+		hideDecimalForWholeNumbers: (pricePresentation === null || pricePresentation === void 0 ? void 0 : pricePresentation.precision) ? false : void 0,
+		suffix: (pricePresentation === null || pricePresentation === void 0 ? void 0 : pricePresentation.unit) ? /* @__PURE__ */ React.createElement("span", null, "/", pricePresentation.unit) : void 0
 	}), promotionTags.length ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__promotions` }, promotionTags.map((promotionTag, index) => /* @__PURE__ */ React.createElement("span", {
 		key: `${promotionTag}-${index}`,
 		className: `${PREFIX}__promotion-tag`

package/es/pro/skuDetailModal/index.js

@@ -25,6 +25,7 @@ import locales_default$1 from "./flow/locales.js";
 import { isRememberTimeProduct, isRememberedTimeIntent, requiresManualTimeSelection } from "./flow/rememberTime.js";
 import { resolveDetailAppearance } from "./appearances/index.js";
 import useToast$1 from "../../hooks/useToast.js";
+import { createSkuNoteDiagnostics } from "./noteDiagnostics.js";
 import SkuDetailLoadingPanel from "./LoadingPanel.js";
 import SkuDetailCollapsibleSection from "./components/CollapsibleSection/index.js";
 import { getProductSkuFromWeighingValue, getWeighedUnitPrice, getWeighingValueFromProductSku, hasPositiveNetWeight, isWeighingProduct, resolveActiveSkuValue } from "./components/weighing/utils.js";
@@ -240,6 +241,13 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 	const selectionFlowCanScrollDownRef = useRef(false);
 	const Toast = useToast$1();
 	const logger = useLogger();
+	const loggerRef = useRef(logger);
+	loggerRef.current = logger;
+	const noteDiagnosticsRef = useRef(null);
+	useEffect(() => () => {
+		var _noteDiagnosticsRef$c;
+		return (_noteDiagnosticsRef$c = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c === void 0 ? void 0 : _noteDiagnosticsRef$c.stop();
+	}, []);
 	/**
 	* @description SKUOptionsSelection ref，用于触发内部校验与读取最终值
 	*/
@@ -923,7 +931,9 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 		},
 		open: function() {
 			var _ref17 = _asyncToGenerator(function* (data) {
-				var _skuDetailConfig$enab, _skuDetailConfig$isSh, _skuDetailConfig$isSh2, _skuDetailConfig$isSh3, _skuDetailConfig$isSh4, _skuDetailConfig$isSh5, _skuDetailConfig$hide, _skuDetailConfig$isSh6, _skuDetailConfig$isSh7, _skuDetailConfig$isSh8, _skuDetailConfig$exte, _skuDetailConfig$useC, _skuDetailConfig$cust, _skuDetailConfig$isCa, _skuDetailConfig, _skuDetailConfig2, _data$bundle_group, _data$_extend, _data$_extend2, _data$discount_list, _ref15, _data$_extend3, _data$_extend4, _data$_extend5, _data$discount_list$f, _data$discount_list2, _ref16, _data$_extend$priceOv, _data$_extend7;
+				var _noteDiagnosticsRef$c2, _product_id, _skuDetailConfig$enab, _skuDetailConfig$isSh, _skuDetailConfig$isSh2, _skuDetailConfig$isSh3, _skuDetailConfig$isSh4, _skuDetailConfig$isSh5, _skuDetailConfig$hide, _skuDetailConfig$isSh6, _skuDetailConfig$isSh7, _skuDetailConfig$isSh8, _skuDetailConfig$exte, _skuDetailConfig$useC, _skuDetailConfig$cust, _skuDetailConfig$isCa, _skuDetailConfig, _skuDetailConfig2, _data$bundle_group, _data$_extend, _data$_extend2, _data$discount_list, _ref15, _data$_extend3, _data$_extend4, _data$_extend5, _data$discount_list$f, _data$discount_list2, _ref16, _data$_extend$priceOv, _data$_extend7;
+				(_noteDiagnosticsRef$c2 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c2 === void 0 || _noteDiagnosticsRef$c2.stop();
+				noteDiagnosticsRef.current = createSkuNoteDiagnostics(() => loggerRef.current, (_product_id = data.product_id) !== null && _product_id !== void 0 ? _product_id : data.id, "date" in data && !("_extend" in data) ? "create" : "edit");
 				selectionFlowOpenedAtRef.current = dayjs().toISOString();
 				const currentTaskId = openTaskIdRef.current + 1;
 				openTaskIdRef.current = currentTaskId;
@@ -1250,6 +1260,8 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 			};
 		}(),
 		close: () => {
+			var _noteDiagnosticsRef$c3;
+			(_noteDiagnosticsRef$c3 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c3 === void 0 || _noteDiagnosticsRef$c3.stop();
 			openTaskIdRef.current += 1;
 			setOpen(false);
 			setDetailLoading(false);
@@ -1483,6 +1495,8 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 	* @description 关闭动画结束后再清空详情态，避免退出动画期间因 productData 为空闪回骨架屏。
 	*/
 	const resetModalStateAfterClose = useCallback(() => {
+		var _noteDiagnosticsRef$c4;
+		(_noteDiagnosticsRef$c4 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c4 === void 0 || _noteDiagnosticsRef$c4.stop();
 		setProductData(null);
 		setDetailLoading(false);
 		setNote("");
@@ -1506,6 +1520,8 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 		lateQuantityRevalidationTaskRef.current = null;
 	}, []);
 	const modalCloseAction = () => {
+		var _noteDiagnosticsRef$c5;
+		(_noteDiagnosticsRef$c5 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c5 === void 0 || _noteDiagnosticsRef$c5.stop();
 		openTaskIdRef.current += 1;
 		flowDateHydrationVersionRef.current += 1;
 		lateQuantityReviewStepIndexRef.current = null;
@@ -1528,7 +1544,8 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 	};
 	const handleConfirm = function() {
 		var _ref18 = _asyncToGenerator(function* (flowDraft) {
-			var _bookingState$booking3, _selectionFlowRef$cur8, _selectionFlowService3;
+			var _noteDiagnosticsRef$c6, _bookingState$booking3, _selectionFlowRef$cur8, _selectionFlowService3;
+			(_noteDiagnosticsRef$c6 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c6 === void 0 || _noteDiagnosticsRef$c6.skuConfirm(note.length);
 			if (confirmDisabledRef.current) return false;
 			if (flowDraft && requiresManualTimeSelection(flowDraft)) return false;
 			if (isCustomSelectionFlow && !flowDraft) {
@@ -1850,17 +1867,28 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 		productData === null || productData === void 0 ? void 0 : productData._id,
 		productData === null || productData === void 0 ? void 0 : productData.id
 	]);
+	const onOpenNote = () => {
+		var _noteDiagnosticsRef$c7;
+		(_noteDiagnosticsRef$c7 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c7 === void 0 || _noteDiagnosticsRef$c7.open(note.length);
+		setNoteModalOpen(true);
+	};
 	const onNoteConfirm = (note) => {
+		var _noteDiagnosticsRef$c8;
+		(_noteDiagnosticsRef$c8 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c8 === void 0 || _noteDiagnosticsRef$c8.confirm(note.length);
 		setNote(note);
 		updateCustomFlowDraft({ note }, ["note"]);
 		setNoteModalOpen(false);
 	};
 	const onNoteDelete = () => {
+		var _noteDiagnosticsRef$c9;
+		(_noteDiagnosticsRef$c9 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c9 === void 0 || _noteDiagnosticsRef$c9.stop();
 		setNote("");
 		updateCustomFlowDraft({ note: "" }, ["note"]);
 		setNoteModalOpen(false);
 	};
 	const onNoteCancel = () => {
+		var _noteDiagnosticsRef$c10;
+		(_noteDiagnosticsRef$c10 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c10 === void 0 || _noteDiagnosticsRef$c10.stop();
 		setNoteModalOpen(false);
 	};
 	const handleManualPriceChange = () => {
@@ -1996,7 +2024,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 			max: 99999
 		})), note && /* @__PURE__ */ React.createElement("div", { className: "note-section note-section-right" }, /* @__PURE__ */ React.createElement("div", { className: "note-label" }, locales.getText("pisell2.text.sku.detail.modal.note")), /* @__PURE__ */ React.createElement("div", {
 			className: "note-text",
-			onClick: () => setNoteModalOpen(true)
+			onClick: onOpenNote
 		}, note))), /* @__PURE__ */ React.createElement("div", { className: "price-summary-section" }, !isVirtualOnlySettlement ? /* @__PURE__ */ React.createElement("div", { className: "price-item" }, /* @__PURE__ */ React.createElement("div", null, locales.getText("pisell2.text.sku.detail.modal.subtotal")), /* @__PURE__ */ React.createElement("div", null, subtotalText)) : null, !isVirtualOnlySettlement ? /* @__PURE__ */ React.createElement("div", { className: "price-item" }, /* @__PURE__ */ React.createElement("div", null, locales.getText("pisell2.text.sku.detail.modal.discount"), discountsCount > 0 && /* @__PURE__ */ React.createElement("span", { className: "price-item-danger" }, "\xA0(", discountsCount, ")")), /* @__PURE__ */ React.createElement("div", { className: "price-item-danger" }, discountsCount > 0 ? "-" : "", symbol, totalDiscounts)) : null, !isVirtualOnlySettlement && priceOverride !== null && typeof priceOverride !== "undefined" && /* @__PURE__ */ React.createElement("div", { className: "price-item" }, /* @__PURE__ */ React.createElement("div", { onClick: handleManualPriceChange }, locales.getText("pisell2.text.sku.detail.modal.manual.price.change"), /* @__PURE__ */ React.createElement("span", { className: "price-item-override" }, priceOverrideText)), /* @__PURE__ */ React.createElement("div", { className: "price-item-danger" }, priceChangeText)), /* @__PURE__ */ React.createElement("div", { className: "price-item-total" }, /* @__PURE__ */ React.createElement("div", { className: "price-item-total-label" }, locales.getText("pisell2.text.sku.detail.modal.total"), !isVirtualOnlySettlement ? /* @__PURE__ */ React.createElement("span", { className: "price-item-total-gst" }, "（", (productData === null || productData === void 0 ? void 0 : productData.is_charge_tax) ? locales.getText("pisell2.text.sku.detail.modal.gst.incl") : locales.getText("pisell2.text.sku.detail.modal.gst.excl"), "）") : null), /* @__PURE__ */ React.createElement("div", { className: "price-item-total-values" }, !isVirtualOnlySettlement ? /* @__PURE__ */ React.createElement("div", { className: "price-item-total-value" }, totalText) : null, virtualSettlementTotals.map(({ option, text }) => /* @__PURE__ */ React.createElement("div", {
 			key: `virtual:${String(option.currency_product_id || option.data_variant_id)}`,
 			className: `price-item-total-settlement-value${option.available === false ? " is-disabled" : ""}`,
@@ -2014,7 +2042,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 			onCancel: handleCancel,
 			onRemove: handleRemove,
 			onManualPriceChange: handleManualPriceChange,
-			onOpenNote: () => setNoteModalOpen(true),
+			onOpenNote,
 			onConfirm: () => {
 				handleConfirm();
 			}
@@ -2271,7 +2299,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 			type: "button",
 			className: "sku-detail-appearance__note",
 			disabled: appearanceConfirmPending,
-			onClick: () => setNoteModalOpen(true)
+			onClick: onOpenNote
 		}, note || locales.getText("pisell2.text.sku.detail.modal.btn.add.note")),
 		removeControl: !isCreateMode && skuDetailConfig.isShowRemove !== false && onRemove && /* @__PURE__ */ React.createElement("button", {
 			type: "button",

package/es/pro/skuDetailModal/noteDiagnostics.js

@@ -0,0 +1,110 @@
+//#region src/pro/skuDetailModal/noteDiagnostics.ts
+const VIEWPORT_INTERVAL_MS = 250;
+const MAX_VIEWPORT_EVENTS = 10;
+/** SKU 内默认启用；不修改 NoteModal 接口或商品数据。 */
+function createSkuNoteDiagnostics(getLogger, productId, mode) {
+	const startedAtMs = Date.now();
+	const traceId = `sku-note-${startedAtMs}-${Math.random().toString(36).slice(2)}`;
+	let seq = 0;
+	let noteLength = 0;
+	let opened = false;
+	let active = false;
+	let noteAttempt = 0;
+	let skuConfirmLogged = false;
+	let cleanup = () => {};
+	const seen = /* @__PURE__ */ new Set();
+	const log = (event, source) => {
+		try {
+			var _getLogger, _document$body;
+			const capturedAtMs = Date.now();
+			const viewport = window.visualViewport;
+			(_getLogger = getLogger()) === null || _getLogger === void 0 || _getLogger.addLog({
+				type: "info",
+				title: event,
+				metadata: {
+					module: "SkuNoteDiagnostics",
+					category: "performance",
+					traceId,
+					seq: ++seq,
+					capturedAtMs,
+					elapsedMs: Math.max(0, capturedAtMs - startedAtMs),
+					productId,
+					mode,
+					noteAttempt,
+					noteLength,
+					source,
+					viewport: {
+						innerWidth: window.innerWidth,
+						innerHeight: window.innerHeight,
+						visualViewport: viewport ? {
+							width: viewport.width,
+							height: viewport.height,
+							offsetTop: viewport.offsetTop,
+							scale: viewport.scale
+						} : null,
+						bodyTransform: ((_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.style.transform) || ""
+					}
+				}
+			});
+		} catch (_unused) {}
+	};
+	const stop = () => {
+		active = false;
+		cleanup();
+		cleanup = () => {};
+	};
+	return {
+		open(length) {
+			stop();
+			opened = active = true;
+			noteLength = length;
+			noteAttempt += 1;
+			seen.clear();
+			let count = 0;
+			let lastAt = -Infinity;
+			const onResize = (event) => {
+				const now = Date.now();
+				if (!active || count >= MAX_VIEWPORT_EVENTS || now - lastAt < VIEWPORT_INTERVAL_MS) return;
+				lastAt = now;
+				count += 1;
+				log("note_viewport_change", event.currentTarget === window ? "window" : "visualViewport");
+			};
+			const onNoteEvent = (event) => {
+				const target = event.target;
+				if (!active || !(target instanceof HTMLTextAreaElement) || !target.closest(".note-modal-content .note-input")) return;
+				noteLength = target.value.length;
+				const title = event.type === "focusin" ? "note_focus" : "note_first_input";
+				if (seen.has(title)) return;
+				seen.add(title);
+				log(title);
+			};
+			const visualViewport = window.visualViewport;
+			window.addEventListener("resize", onResize);
+			visualViewport === null || visualViewport === void 0 || visualViewport.addEventListener("resize", onResize);
+			document.addEventListener("focusin", onNoteEvent, true);
+			document.addEventListener("input", onNoteEvent, true);
+			cleanup = () => {
+				window.removeEventListener("resize", onResize);
+				visualViewport === null || visualViewport === void 0 || visualViewport.removeEventListener("resize", onResize);
+				document.removeEventListener("focusin", onNoteEvent, true);
+				document.removeEventListener("input", onNoteEvent, true);
+			};
+			log("note_open");
+		},
+		confirm(length) {
+			if (!active) return;
+			noteLength = length;
+			log("note_confirm");
+			stop();
+		},
+		stop,
+		skuConfirm(length) {
+			if (!opened || skuConfirmLogged) return;
+			skuConfirmLogged = true;
+			noteLength = length;
+			log("sku_confirm");
+		}
+	};
+}
+//#endregion
+export { createSkuNoteDiagnostics };

package/lib/plus/pisellSalesProductCard/index.js

@@ -3,6 +3,7 @@ const require_useEngineContext = require("../../hooks/useEngineContext.js");
 const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
 const require_index = require("../../pro/NumericStepper/index.js");
 const require_index$1 = require("../productSelect/components/pisellPriceText/index.js");
+const require_pricePresentation = require("../productSelect/pricing/pricePresentation.js");
 const require_SettlementPriceList = require("../multiCurrencySettlement/SettlementPriceList.js");
 const require_locales = require("./locales.js");
 const require_utils = require("./utils.js");
@@ -63,7 +64,7 @@ function isNormalProduct(product) {
 	return !(hasOption || hasBundle || hasVariant || requiresDetail);
 }
 const PisellSalesProductCard = ({ product, requiresOptions = false, hideAction = false, value, selectedQuantity: selectedQuantityProp, disabled = false, soldOut = false, purchaseDisabled = false, stepperProps, optionsText, skuCardConfig, cartElementId, style, className, settlementPriceRows, onChange, onClick }) => {
-	var _context$appHelper$ut, _product$metadata2, _product$price, _value$num, _stepperProps$min3, _stepperProps$step;
+	var _context$appHelper$ut, _product$price, _product$metadata2, _pricePresentation$am, _value$num, _stepperProps$min3, _stepperProps$step;
 	const context = require_useEngineContext.default();
 	_pisell_utils.locales.init(require_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");
 	const normalProduct = (0, react.useMemo)(() => !requiresOptions && isNormalProduct(product), [product, requiresOptions]);
@@ -74,6 +75,7 @@ const PisellSalesProductCard = ({ product, requiresOptions = false, hideAction =
 	const soldOutIcon = String(_pisell_utils.locales.locale || "").toLowerCase().startsWith("zh") ? SOLD_OUT_ICON_URLS.cn : SOLD_OUT_ICON_URLS.en;
 	const title = resolveText((product === null || product === void 0 ? void 0 : product.title) || (product === null || product === void 0 ? void 0 : product.name));
 	const textCover = getTextCover(title);
+	const pricePresentation = (settlementPriceRows === null || settlementPriceRows === void 0 ? void 0 : settlementPriceRows.length) ? void 0 : require_pricePresentation.resolveProductPricePresentation(product, { price: (_product$price = product.price) !== null && _product$price !== void 0 ? _product$price : 0 });
 	const promotionTags = (0, react.useMemo)(() => {
 		var _product$metadata;
 		const rawPromotionTags = (product === null || product === void 0 ? void 0 : product._promotionTags) || (product === null || product === void 0 || (_product$metadata = product.metadata) === null || _product$metadata === void 0 ? void 0 : _product$metadata._promotionTags) || [];
@@ -172,8 +174,11 @@ const PisellSalesProductCard = ({ product, requiresOptions = false, hideAction =
 		src: soldOutIcon,
 		alt: ""
 	})) : null), /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__content` }, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__title` }, title), (settlementPriceRows === null || settlementPriceRows === void 0 ? void 0 : settlementPriceRows.length) ? /* @__PURE__ */ react.default.createElement(require_SettlementPriceList.default, { rows: settlementPriceRows }) : /* @__PURE__ */ react.default.createElement(require_index$1.default, {
-		value: (_product$price = product.price) !== null && _product$price !== void 0 ? _product$price : 0,
-		isMini: !!product.is_bundle
+		value: (_pricePresentation$am = pricePresentation === null || pricePresentation === void 0 ? void 0 : pricePresentation.amount) !== null && _pricePresentation$am !== void 0 ? _pricePresentation$am : 0,
+		isMini: (pricePresentation === null || pricePresentation === void 0 ? void 0 : pricePresentation.qualifier) === "from",
+		precision: pricePresentation === null || pricePresentation === void 0 ? void 0 : pricePresentation.precision,
+		hideDecimalForWholeNumbers: (pricePresentation === null || pricePresentation === void 0 ? void 0 : pricePresentation.precision) ? false : void 0,
+		suffix: (pricePresentation === null || pricePresentation === void 0 ? void 0 : pricePresentation.unit) ? /* @__PURE__ */ react.default.createElement("span", null, "/", pricePresentation.unit) : void 0
 	}), promotionTags.length ? /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__promotions` }, promotionTags.map((promotionTag, index) => /* @__PURE__ */ react.default.createElement("span", {
 		key: `${promotionTag}-${index}`,
 		className: `${PREFIX}__promotion-tag`

package/lib/pro/skuDetailModal/index.js

@@ -26,6 +26,7 @@ const require_locales$1 = require("./flow/locales.js");
 const require_rememberTime = require("./flow/rememberTime.js");
 const require_index$6 = require("./appearances/index.js");
 const require_useToast = require("../../hooks/useToast.js");
+const require_noteDiagnostics = require("./noteDiagnostics.js");
 const require_LoadingPanel = require("./LoadingPanel.js");
 const require_index$7 = require("./components/CollapsibleSection/index.js");
 const require_utils$4 = require("./components/weighing/utils.js");
@@ -246,6 +247,13 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 	const selectionFlowCanScrollDownRef = (0, react.useRef)(false);
 	const Toast = require_useToast.default();
 	const logger = require_useLogger.default();
+	const loggerRef = (0, react.useRef)(logger);
+	loggerRef.current = logger;
+	const noteDiagnosticsRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => () => {
+		var _noteDiagnosticsRef$c;
+		return (_noteDiagnosticsRef$c = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c === void 0 ? void 0 : _noteDiagnosticsRef$c.stop();
+	}, []);
 	/**
 	* @description SKUOptionsSelection ref，用于触发内部校验与读取最终值
 	*/
@@ -929,7 +937,9 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 		},
 		open: function() {
 			var _ref17 = require_asyncToGenerator._asyncToGenerator(function* (data) {
-				var _skuDetailConfig$enab, _skuDetailConfig$isSh, _skuDetailConfig$isSh2, _skuDetailConfig$isSh3, _skuDetailConfig$isSh4, _skuDetailConfig$isSh5, _skuDetailConfig$hide, _skuDetailConfig$isSh6, _skuDetailConfig$isSh7, _skuDetailConfig$isSh8, _skuDetailConfig$exte, _skuDetailConfig$useC, _skuDetailConfig$cust, _skuDetailConfig$isCa, _skuDetailConfig, _skuDetailConfig2, _data$bundle_group, _data$_extend, _data$_extend2, _data$discount_list, _ref15, _data$_extend3, _data$_extend4, _data$_extend5, _data$discount_list$f, _data$discount_list2, _ref16, _data$_extend$priceOv, _data$_extend7;
+				var _noteDiagnosticsRef$c2, _product_id, _skuDetailConfig$enab, _skuDetailConfig$isSh, _skuDetailConfig$isSh2, _skuDetailConfig$isSh3, _skuDetailConfig$isSh4, _skuDetailConfig$isSh5, _skuDetailConfig$hide, _skuDetailConfig$isSh6, _skuDetailConfig$isSh7, _skuDetailConfig$isSh8, _skuDetailConfig$exte, _skuDetailConfig$useC, _skuDetailConfig$cust, _skuDetailConfig$isCa, _skuDetailConfig, _skuDetailConfig2, _data$bundle_group, _data$_extend, _data$_extend2, _data$discount_list, _ref15, _data$_extend3, _data$_extend4, _data$_extend5, _data$discount_list$f, _data$discount_list2, _ref16, _data$_extend$priceOv, _data$_extend7;
+				(_noteDiagnosticsRef$c2 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c2 === void 0 || _noteDiagnosticsRef$c2.stop();
+				noteDiagnosticsRef.current = require_noteDiagnostics.createSkuNoteDiagnostics(() => loggerRef.current, (_product_id = data.product_id) !== null && _product_id !== void 0 ? _product_id : data.id, "date" in data && !("_extend" in data) ? "create" : "edit");
 				selectionFlowOpenedAtRef.current = (0, dayjs.default)().toISOString();
 				const currentTaskId = openTaskIdRef.current + 1;
 				openTaskIdRef.current = currentTaskId;
@@ -1256,6 +1266,8 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 			};
 		}(),
 		close: () => {
+			var _noteDiagnosticsRef$c3;
+			(_noteDiagnosticsRef$c3 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c3 === void 0 || _noteDiagnosticsRef$c3.stop();
 			openTaskIdRef.current += 1;
 			setOpen(false);
 			setDetailLoading(false);
@@ -1489,6 +1501,8 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 	* @description 关闭动画结束后再清空详情态，避免退出动画期间因 productData 为空闪回骨架屏。
 	*/
 	const resetModalStateAfterClose = (0, react.useCallback)(() => {
+		var _noteDiagnosticsRef$c4;
+		(_noteDiagnosticsRef$c4 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c4 === void 0 || _noteDiagnosticsRef$c4.stop();
 		setProductData(null);
 		setDetailLoading(false);
 		setNote("");
@@ -1512,6 +1526,8 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 		lateQuantityRevalidationTaskRef.current = null;
 	}, []);
 	const modalCloseAction = () => {
+		var _noteDiagnosticsRef$c5;
+		(_noteDiagnosticsRef$c5 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c5 === void 0 || _noteDiagnosticsRef$c5.stop();
 		openTaskIdRef.current += 1;
 		flowDateHydrationVersionRef.current += 1;
 		lateQuantityReviewStepIndexRef.current = null;
@@ -1534,7 +1550,8 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 	};
 	const handleConfirm = function() {
 		var _ref18 = require_asyncToGenerator._asyncToGenerator(function* (flowDraft) {
-			var _bookingState$booking3, _selectionFlowRef$cur8, _selectionFlowService3;
+			var _noteDiagnosticsRef$c6, _bookingState$booking3, _selectionFlowRef$cur8, _selectionFlowService3;
+			(_noteDiagnosticsRef$c6 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c6 === void 0 || _noteDiagnosticsRef$c6.skuConfirm(note.length);
 			if (confirmDisabledRef.current) return false;
 			if (flowDraft && require_rememberTime.requiresManualTimeSelection(flowDraft)) return false;
 			if (isCustomSelectionFlow && !flowDraft) {
@@ -1856,17 +1873,28 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 		productData === null || productData === void 0 ? void 0 : productData._id,
 		productData === null || productData === void 0 ? void 0 : productData.id
 	]);
+	const onOpenNote = () => {
+		var _noteDiagnosticsRef$c7;
+		(_noteDiagnosticsRef$c7 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c7 === void 0 || _noteDiagnosticsRef$c7.open(note.length);
+		setNoteModalOpen(true);
+	};
 	const onNoteConfirm = (note) => {
+		var _noteDiagnosticsRef$c8;
+		(_noteDiagnosticsRef$c8 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c8 === void 0 || _noteDiagnosticsRef$c8.confirm(note.length);
 		setNote(note);
 		updateCustomFlowDraft({ note }, ["note"]);
 		setNoteModalOpen(false);
 	};
 	const onNoteDelete = () => {
+		var _noteDiagnosticsRef$c9;
+		(_noteDiagnosticsRef$c9 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c9 === void 0 || _noteDiagnosticsRef$c9.stop();
 		setNote("");
 		updateCustomFlowDraft({ note: "" }, ["note"]);
 		setNoteModalOpen(false);
 	};
 	const onNoteCancel = () => {
+		var _noteDiagnosticsRef$c10;
+		(_noteDiagnosticsRef$c10 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c10 === void 0 || _noteDiagnosticsRef$c10.stop();
 		setNoteModalOpen(false);
 	};
 	const handleManualPriceChange = () => {
@@ -2002,7 +2030,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 			max: 99999
 		})), note && /* @__PURE__ */ react.default.createElement("div", { className: "note-section note-section-right" }, /* @__PURE__ */ react.default.createElement("div", { className: "note-label" }, _pisell_utils.locales.getText("pisell2.text.sku.detail.modal.note")), /* @__PURE__ */ react.default.createElement("div", {
 			className: "note-text",
-			onClick: () => setNoteModalOpen(true)
+			onClick: onOpenNote
 		}, note))), /* @__PURE__ */ react.default.createElement("div", { className: "price-summary-section" }, !isVirtualOnlySettlement ? /* @__PURE__ */ react.default.createElement("div", { className: "price-item" }, /* @__PURE__ */ react.default.createElement("div", null, _pisell_utils.locales.getText("pisell2.text.sku.detail.modal.subtotal")), /* @__PURE__ */ react.default.createElement("div", null, subtotalText)) : null, !isVirtualOnlySettlement ? /* @__PURE__ */ react.default.createElement("div", { className: "price-item" }, /* @__PURE__ */ react.default.createElement("div", null, _pisell_utils.locales.getText("pisell2.text.sku.detail.modal.discount"), discountsCount > 0 && /* @__PURE__ */ react.default.createElement("span", { className: "price-item-danger" }, "\xA0(", discountsCount, ")")), /* @__PURE__ */ react.default.createElement("div", { className: "price-item-danger" }, discountsCount > 0 ? "-" : "", symbol, totalDiscounts)) : null, !isVirtualOnlySettlement && priceOverride !== null && typeof priceOverride !== "undefined" && /* @__PURE__ */ react.default.createElement("div", { className: "price-item" }, /* @__PURE__ */ react.default.createElement("div", { onClick: handleManualPriceChange }, _pisell_utils.locales.getText("pisell2.text.sku.detail.modal.manual.price.change"), /* @__PURE__ */ react.default.createElement("span", { className: "price-item-override" }, priceOverrideText)), /* @__PURE__ */ react.default.createElement("div", { className: "price-item-danger" }, priceChangeText)), /* @__PURE__ */ react.default.createElement("div", { className: "price-item-total" }, /* @__PURE__ */ react.default.createElement("div", { className: "price-item-total-label" }, _pisell_utils.locales.getText("pisell2.text.sku.detail.modal.total"), !isVirtualOnlySettlement ? /* @__PURE__ */ react.default.createElement("span", { className: "price-item-total-gst" }, "（", (productData === null || productData === void 0 ? void 0 : productData.is_charge_tax) ? _pisell_utils.locales.getText("pisell2.text.sku.detail.modal.gst.incl") : _pisell_utils.locales.getText("pisell2.text.sku.detail.modal.gst.excl"), "）") : null), /* @__PURE__ */ react.default.createElement("div", { className: "price-item-total-values" }, !isVirtualOnlySettlement ? /* @__PURE__ */ react.default.createElement("div", { className: "price-item-total-value" }, totalText) : null, virtualSettlementTotals.map(({ option, text }) => /* @__PURE__ */ react.default.createElement("div", {
 			key: `virtual:${String(option.currency_product_id || option.data_variant_id)}`,
 			className: `price-item-total-settlement-value${option.available === false ? " is-disabled" : ""}`,
@@ -2020,7 +2048,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 			onCancel: handleCancel,
 			onRemove: handleRemove,
 			onManualPriceChange: handleManualPriceChange,
-			onOpenNote: () => setNoteModalOpen(true),
+			onOpenNote,
 			onConfirm: () => {
 				handleConfirm();
 			}
@@ -2277,7 +2305,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant, confirmDisabled
 			type: "button",
 			className: "sku-detail-appearance__note",
 			disabled: appearanceConfirmPending,
-			onClick: () => setNoteModalOpen(true)
+			onClick: onOpenNote
 		}, note || _pisell_utils.locales.getText("pisell2.text.sku.detail.modal.btn.add.note")),
 		removeControl: !isCreateMode && skuDetailConfig.isShowRemove !== false && onRemove && /* @__PURE__ */ react.default.createElement("button", {
 			type: "button",

package/lib/pro/skuDetailModal/noteDiagnostics.js

@@ -0,0 +1,110 @@
+//#region src/pro/skuDetailModal/noteDiagnostics.ts
+const VIEWPORT_INTERVAL_MS = 250;
+const MAX_VIEWPORT_EVENTS = 10;
+/** SKU 内默认启用；不修改 NoteModal 接口或商品数据。 */
+function createSkuNoteDiagnostics(getLogger, productId, mode) {
+	const startedAtMs = Date.now();
+	const traceId = `sku-note-${startedAtMs}-${Math.random().toString(36).slice(2)}`;
+	let seq = 0;
+	let noteLength = 0;
+	let opened = false;
+	let active = false;
+	let noteAttempt = 0;
+	let skuConfirmLogged = false;
+	let cleanup = () => {};
+	const seen = /* @__PURE__ */ new Set();
+	const log = (event, source) => {
+		try {
+			var _getLogger, _document$body;
+			const capturedAtMs = Date.now();
+			const viewport = window.visualViewport;
+			(_getLogger = getLogger()) === null || _getLogger === void 0 || _getLogger.addLog({
+				type: "info",
+				title: event,
+				metadata: {
+					module: "SkuNoteDiagnostics",
+					category: "performance",
+					traceId,
+					seq: ++seq,
+					capturedAtMs,
+					elapsedMs: Math.max(0, capturedAtMs - startedAtMs),
+					productId,
+					mode,
+					noteAttempt,
+					noteLength,
+					source,
+					viewport: {
+						innerWidth: window.innerWidth,
+						innerHeight: window.innerHeight,
+						visualViewport: viewport ? {
+							width: viewport.width,
+							height: viewport.height,
+							offsetTop: viewport.offsetTop,
+							scale: viewport.scale
+						} : null,
+						bodyTransform: ((_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.style.transform) || ""
+					}
+				}
+			});
+		} catch (_unused) {}
+	};
+	const stop = () => {
+		active = false;
+		cleanup();
+		cleanup = () => {};
+	};
+	return {
+		open(length) {
+			stop();
+			opened = active = true;
+			noteLength = length;
+			noteAttempt += 1;
+			seen.clear();
+			let count = 0;
+			let lastAt = -Infinity;
+			const onResize = (event) => {
+				const now = Date.now();
+				if (!active || count >= MAX_VIEWPORT_EVENTS || now - lastAt < VIEWPORT_INTERVAL_MS) return;
+				lastAt = now;
+				count += 1;
+				log("note_viewport_change", event.currentTarget === window ? "window" : "visualViewport");
+			};
+			const onNoteEvent = (event) => {
+				const target = event.target;
+				if (!active || !(target instanceof HTMLTextAreaElement) || !target.closest(".note-modal-content .note-input")) return;
+				noteLength = target.value.length;
+				const title = event.type === "focusin" ? "note_focus" : "note_first_input";
+				if (seen.has(title)) return;
+				seen.add(title);
+				log(title);
+			};
+			const visualViewport = window.visualViewport;
+			window.addEventListener("resize", onResize);
+			visualViewport === null || visualViewport === void 0 || visualViewport.addEventListener("resize", onResize);
+			document.addEventListener("focusin", onNoteEvent, true);
+			document.addEventListener("input", onNoteEvent, true);
+			cleanup = () => {
+				window.removeEventListener("resize", onResize);
+				visualViewport === null || visualViewport === void 0 || visualViewport.removeEventListener("resize", onResize);
+				document.removeEventListener("focusin", onNoteEvent, true);
+				document.removeEventListener("input", onNoteEvent, true);
+			};
+			log("note_open");
+		},
+		confirm(length) {
+			if (!active) return;
+			noteLength = length;
+			log("note_confirm");
+			stop();
+		},
+		stop,
+		skuConfirm(length) {
+			if (!opened || skuConfirmLogged) return;
+			skuConfirmLogged = true;
+			noteLength = length;
+			log("sku_confirm");
+		}
+	};
+}
+//#endregion
+exports.createSkuNoteDiagnostics = createSkuNoteDiagnostics;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/private-materials",
-  "version": "6.12.358",
+  "version": "6.12.359",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -74,9 +74,9 @@
     "styled-components": "^6.0.0-rc.3",
     "use-sync-external-store": "^1.6.0",
     "@pisell/pi-payment-sdk": "0.0.4",
+    "@pisell/icon": "0.0.11",
     "@pisell/materials": "6.12.86",
     "@pisell/utils": "3.0.7",
-    "@pisell/icon": "0.0.11",
     "@pisell/date-picker": "3.0.12"
   },
   "peerDependencies": {