@pisell/private-materials 6.12.124 → 6.12.126

package/lib/plus/productSelect/ProductCard/SkuCard/locales.js

@@ -11,7 +11,8 @@ var locales_default = {
 		"pisell2.sku-card.time.remaining": "Time Remaining",
 		"pisell2.sku-card.capacity": "Capacity",
 		"pisell2.sku-card.free": "Free",
-		"pisell2.sku-card.max": "Max"
+		"pisell2.sku-card.max": "Max",
+		"pisell2.sku-card.sold-out": "Sold Out"
 	},
 	"zh-CN": {
 		"pisell2.sku-card.search": "搜索",
@@ -24,7 +25,8 @@ var locales_default = {
 		"pisell2.sku-card.time.remaining": "剩余",
 		"pisell2.sku-card.capacity": "容量",
 		"pisell2.sku-card.free": "免费",
-		"pisell2.sku-card.max": "最大"
+		"pisell2.sku-card.max": "最大",
+		"pisell2.sku-card.sold-out": "已售罄"
 	},
 	"zh-HK": {
 		"pisell2.sku-card.search": "搜索",
@@ -37,7 +39,8 @@ var locales_default = {
 		"pisell2.sku-card.time.remaining": "剩余",
 		"pisell2.sku-card.capacity": "容量",
 		"pisell2.sku-card.free": "免費",
-		"pisell2.sku-card.max": "最大"
+		"pisell2.sku-card.max": "最大",
+		"pisell2.sku-card.sold-out": "已售罄"
 	},
 	ja: {
 		"pisell2.sku-card.search": "検索",
@@ -50,7 +53,8 @@ var locales_default = {
 		"pisell2.sku-card.time.remaining": "残り時間",
 		"pisell2.sku-card.capacity": "容量",
 		"pisell2.sku-card.free": "無料",
-		"pisell2.sku-card.max": "最大"
+		"pisell2.sku-card.max": "最大",
+		"pisell2.sku-card.sold-out": "売り切れ"
 	},
 	pt: {
 		"pisell2.sku-card.search": "Pesquisar",
@@ -63,7 +67,8 @@ var locales_default = {
 		"pisell2.sku-card.time.remaining": "Tempo Restante",
 		"pisell2.sku-card.capacity": "Capacidade",
 		"pisell2.sku-card.free": "Grátis",
-		"pisell2.sku-card.max": "Máx"
+		"pisell2.sku-card.max": "Máx",
+		"pisell2.sku-card.sold-out": "Esgotado"
 	}
 };
 //#endregion

package/lib/plus/productSelect/ProductCard/index.js

@@ -1,9 +1,12 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
 const require_objectSpread2 = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
+const require_useEngineContext = require("../../../hooks/useEngineContext.js");
 const require_IntersectionObserver = require("../components/IntersectionObserver.js");
 const require_index = require("../components/pisellPriceText/index.js");
 require("./ProductCardSkeleton.js");
 const require_weighingPrice = require("./weighingPrice.js");
+const require_locales = require("./SkuCard/locales.js");
+const require_useInitLocalesOnce = require("../../../hooks/useInitLocalesOnce.js");
 const require_index$1 = require("./SkuCard/index.js");
 const require_utils = require("./utils.js");
 const require_useTranslationOriginal = require("../../../hooks/useTranslationOriginal.js");
@@ -43,10 +46,15 @@ const defaultConfig = {
 	}
 };
 const ProductCard = (0, react.memo)(({ item, index: index$1, context, onSelect, onSelectCover, onSelectInfo, isSelected, className, decorateConfig = {}, scenario = "default", selectionTrigger = "pointerUp", customSkuCardAllConfig }) => {
+	var _engineContext$appHel, _engineContext$appHel2;
+	const engineContext = require_useEngineContext.default();
+	require_useInitLocalesOnce.default(require_locales.default);
 	const finalConfig = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, defaultConfig), decorateConfig);
 	const { imgHeight, imgWidth, isOriginPrice, isPrice, isProductCover, isStock, isSubtitle, isTitle, radius, showZeroPrice, gap, rightStyle } = finalConfig;
 	const { __typename } = item;
 	const translationOriginal = require_useTranslationOriginal.default();
+	const isSoldOut = require_utils.shouldShowInventorySoldOut(item, engineContext === null || engineContext === void 0 || (_engineContext$appHel = engineContext.appHelper) === null || _engineContext$appHel === void 0 || (_engineContext$appHel = _engineContext$appHel.utils) === null || _engineContext$appHel === void 0 || (_engineContext$appHel2 = _engineContext$appHel.getData) === null || _engineContext$appHel2 === void 0 ? void 0 : _engineContext$appHel2.call(_engineContext$appHel, "channel"));
+	const soldOutText = _pisell_utils.locales.getText("pisell2.sku-card.sold-out") || "Sold Out";
 	if (__typename === "category") return /* @__PURE__ */ react.default.createElement("div", {
 		className: (0, classnames.default)(`${require_index$2.PREFIX}__product-category`, className),
 		"data-index": index$1,
@@ -137,11 +145,21 @@ const ProductCard = (0, react.memo)(({ item, index: index$1, context, onSelect,
 	*/
 	const skuCardRender = (0, react.useMemo)(() => {
 		const skuCardAllConfig = customSkuCardAllConfig || require_utils.getSkuCardConfig(finalConfig);
+		const skuStatusOverlayConfig = isSoldOut ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, skuCardAllConfig.skuStatusOverlayConfig), {}, {
+			isOpen: 1,
+			text: soldOutText,
+			fontSize: 28,
+			fontWeight: 700,
+			color: "#000000",
+			background: "rgba(255, 255, 255, 0.72)",
+			slot: null
+		}) : skuCardAllConfig.skuStatusOverlayConfig;
 		return /* @__PURE__ */ react.default.createElement(require_index$1.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ key: item.id }, skuCardAllConfig), {}, {
+			skuStatusOverlayConfig,
 			dataSource: skuCardDataSource,
-			onCardClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(item),
-			onSelectCover: () => onSelectCover === null || onSelectCover === void 0 ? void 0 : onSelectCover(item),
-			onSelectInfo: () => onSelectInfo === null || onSelectInfo === void 0 ? void 0 : onSelectInfo(item),
+			onCardClick: isSoldOut ? void 0 : () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(item),
+			onSelectCover: isSoldOut ? void 0 : () => onSelectCover === null || onSelectCover === void 0 ? void 0 : onSelectCover(item),
+			onSelectInfo: isSoldOut ? void 0 : () => onSelectInfo === null || onSelectInfo === void 0 ? void 0 : onSelectInfo(item),
 			selectionTrigger,
 			isSelected,
 			"data-index": index$1,
@@ -166,7 +184,9 @@ const ProductCard = (0, react.memo)(({ item, index: index$1, context, onSelect,
 		rightStyle,
 		className,
 		customSkuCardAllConfig,
-		selectionTrigger
+		selectionTrigger,
+		isSoldOut,
+		soldOutText
 	]);
 	/**
 	* @description: 根据 scenario 决定渲染内容

package/lib/plus/productSelect/ProductCard/utils.js

@@ -16,6 +16,16 @@ const formatProductPrice = (item) => {
 	};
 };
 /**
+* 追踪库存且禁止超售时，库存小于等于 0 视为售罄。
+*/
+const isInventorySoldOut = (item) => Number(item === null || item === void 0 ? void 0 : item.is_track) === 1 && Number(item === null || item === void 0 ? void 0 : item.over_sold) === 0 && Number(item === null || item === void 0 ? void 0 : item.stock_quantity) <= 0;
+/**
+* POS 保持原有商品选择行为；其它渠道才展示库存售罄状态。
+*/
+const shouldShowInventorySoldOut = (item, channel) => {
+	return (String(channel || "pos").trim().toLowerCase() || "pos") !== "pos" && isInventorySoldOut(item);
+};
+/**
 * @description: 获取sku卡配置
 * @param {ProductCardConfig} finalConfig
 * @return {*}
@@ -56,3 +66,4 @@ const getSkuCardConfig = (finalConfig) => {
 //#endregion
 exports.formatProductPrice = formatProductPrice;
 exports.getSkuCardConfig = getSkuCardConfig;
+exports.shouldShowInventorySoldOut = shouldShowInventorySoldOut;

package/lib/pro/skuDetailModal/flow/index.less

@@ -70,7 +70,34 @@
   }
 }
 
+.sku-detail-selection-flow-scroll-shell {
+  position: relative;
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+
+  // 阴影挂在不滚动的外壳上，因此不会混入时间卡片并跟随内容移动。
+  // 仅在下方仍有内容时展示，并使用较浅的渐变作为轻量提示。
+  &--can-scroll-down::after {
+    position: absolute;
+    right: 12px;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    height: 16px;
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0),
+      rgba(16, 24, 40, 0.08)
+    );
+    content: '';
+    pointer-events: none;
+  }
+}
+
 .sku-detail-right-content--selection-flow {
   display: flex;
+  flex: 1;
   flex-direction: column;
 }

package/lib/pro/skuDetailModal/flow/modules/date.js

@@ -279,6 +279,7 @@ const DateFlowModuleComponent = ({ context, module, registerHandle }) => {
 			showHeader: false,
 			showMonthHeader: true,
 			enableWeekSwipe: true,
+			minViewDate: (0, dayjs.default)().startOf("day").format("YYYY-MM-DD"),
 			minSelectableDate: minimumSelectableDate.format("YYYY-MM-DD")
 		});
 	}

package/lib/pro/skuDetailModal/flow/modules/resource.js

@@ -13,7 +13,6 @@ const require_serve = require("../../../../components/booking/info2/serve.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let antd = require("antd");
-let _pisell_utils = require("@pisell/utils");
 let _pisell_materials = require("@pisell/materials");
 require("./resource.less");
 //#region src/pro/skuDetailModal/flow/modules/resource.tsx
@@ -336,7 +335,7 @@ const ResourceFlowModuleComponent = ({ context, module, registerHandle }) => {
 				fontWeight: 600
 			} }, group.title || group.code || "Resource"), /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellCustomCheckboxGroup, {
 				dataSource: group.options,
-				columns: (0, _pisell_utils.isMobile)() ? 2 : 3,
+				columns: 4,
 				horizontalGap: 16,
 				verticalGap: 16,
 				className: "selection-flow-resource-grid",

package/lib/pro/skuDetailModal/flow/modules/resource.less

@@ -3,8 +3,45 @@
     min-height: 166px;
   }
 
+  // ResourceDisplay 的文本头像沿用 Ant Avatar 的缩放定位规则；在 Flow 的
+  // 纵向卡片中改为由 flex 容器直接居中，避免首字母视觉上向右偏移。
+  .pisell-resource-card-empty-avatar
+    .pisell-lowcode-avatar-string,
+  .pisell-resource-card-empty-avatar .ant-avatar-string {
+    position: static;
+    left: auto;
+    width: 100%;
+    margin: 0;
+    text-align: center;
+    transform: none !important;
+    transform-origin: center;
+  }
+
+  // 不依赖 PisellText 的默认 display/text-align，确保资源名称始终相对
+  // 整张卡片居中，而不是相对文字自身宽度居中。
+  .pisell-resource-card-info {
+    align-items: center;
+    text-align: center;
+  }
+
+  .pisell-resource-card-name {
+    display: block;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
+
   .selection-flow-resource-card--disabled {
     cursor: not-allowed;
     opacity: 0.45;
   }
+
+  // 默认使用四列；只有真正窄于手机内容宽度时才退回两列。
+  // 需要 !important 覆盖 PisellViewGrid 写在元素上的 grid-template-columns。
+  @media (max-width: 600px) {
+    .pisell-view-grid-content {
+      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+    }
+  }
 }

package/lib/pro/skuDetailModal/index.js

@@ -152,6 +152,9 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant }, ref) => {
 	* - 称重商品打开弹窗时，自动滚动到底部以完整展示称重模块
 	*/
 	const leftTopRef = (0, react.useRef)(null);
+	/** 新 Flow 当前步骤的滚动容器；切换步骤时回到顶部。 */
+	const selectionFlowScrollRef = (0, react.useRef)(null);
+	const [selectionFlowCanScrollDown, setSelectionFlowCanScrollDown] = (0, react.useState)(false);
 	const Toast = require_useToast.default();
 	const logger = require_useLogger.default();
 	/**
@@ -309,6 +312,40 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant }, ref) => {
 	* 此时回退到旧详情界面，避免全局预设阻断称重等普通商品。
 	*/
 	const isCustomSelectionFlow = isCreateMode && Array.isArray(effectiveSelectionFlowSteps) && (selectionFlowProcedureSteps === null || selectionFlowProcedureSteps === void 0 ? void 0 : selectionFlowProcedureSteps.length) !== 0;
+	const updateSelectionFlowScrollAffordance = (0, react.useCallback)(() => {
+		const container = selectionFlowScrollRef.current;
+		if (!container) {
+			setSelectionFlowCanScrollDown(false);
+			return;
+		}
+		setSelectionFlowCanScrollDown(container.scrollHeight - container.scrollTop - container.clientHeight > 2);
+	}, []);
+	(0, react.useLayoutEffect)(() => {
+		if (!open || !isCustomSelectionFlow) {
+			setSelectionFlowCanScrollDown(false);
+			return;
+		}
+		const container = selectionFlowScrollRef.current;
+		container === null || container === void 0 || container.scrollTo({
+			top: 0,
+			behavior: "auto"
+		});
+		const animationFrame = requestAnimationFrame(updateSelectionFlowScrollAffordance);
+		if (!container || typeof ResizeObserver === "undefined") return () => cancelAnimationFrame(animationFrame);
+		const resizeObserver = new ResizeObserver(updateSelectionFlowScrollAffordance);
+		resizeObserver.observe(container);
+		Array.from(container.children).forEach((child) => resizeObserver.observe(child));
+		return () => {
+			cancelAnimationFrame(animationFrame);
+			resizeObserver.disconnect();
+		};
+	}, [
+		currentStep,
+		isCustomSelectionFlow,
+		open,
+		selectionFlowInstanceKey,
+		updateSelectionFlowScrollAffordance
+	]);
 	const selectionFlowInitialDraft = (0, react.useMemo)(() => {
 		var _openParamsRef$curren, _resolvedSkuValue$bun, _resolvedSkuValue$opt, _bookingState$client, _extend$duration, _openParamsRef$curren2, _openParamsRef$curren3;
 		if (!isCustomSelectionFlow || !productData) return null;
@@ -1286,7 +1323,11 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant }, ref) => {
 	};
 	const rightContent = () => {
 		if (detailLoading || !productData) return /* @__PURE__ */ react.default.createElement("div", { className: "sku-detail-right-content" }, renderLoadingPanel());
-		if (isCustomSelectionFlow && selectionFlowInitialDraft) return /* @__PURE__ */ react.default.createElement("div", { className: "sku-detail-right-content sku-detail-right-content--selection-flow" }, isMobile && (skuDetailConfig === null || skuDetailConfig === void 0 ? void 0 : skuDetailConfig.isShowProductSummary) ? renderProductSummary() : null, shouldRenderMobileWeighing ? /* @__PURE__ */ react.default.createElement("div", { className: "sku-detail-mobile-weighing" }, renderWeighingSection()) : null, /* @__PURE__ */ react.default.createElement(require_SelectionFlow.default, {
+		if (isCustomSelectionFlow && selectionFlowInitialDraft) return /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)("sku-detail-selection-flow-scroll-shell", selectionFlowCanScrollDown && "sku-detail-selection-flow-scroll-shell--can-scroll-down") }, /* @__PURE__ */ react.default.createElement("div", {
+			ref: selectionFlowScrollRef,
+			className: "sku-detail-right-content sku-detail-right-content--selection-flow",
+			onScroll: updateSelectionFlowScrollAffordance
+		}, isMobile && (skuDetailConfig === null || skuDetailConfig === void 0 ? void 0 : skuDetailConfig.isShowProductSummary) ? renderProductSummary() : null, shouldRenderMobileWeighing ? /* @__PURE__ */ react.default.createElement("div", { className: "sku-detail-mobile-weighing" }, renderWeighingSection()) : null, /* @__PURE__ */ react.default.createElement(require_SelectionFlow.default, {
 			key: selectionFlowInstanceKey,
 			ref: selectionFlowRef,
 			steps: effectiveSelectionFlowSteps || [],
@@ -1340,7 +1381,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant }, ref) => {
 			onCancel: () => {
 				if (openTaskIdRef.current === selectionFlowInstanceKey) handleCancel();
 			}
-		}));
+		})));
 		const shouldRenderSkuSelection = (isMobile || currentStep === 1) && hasSkuOptions;
 		const shouldRenderMobileProductDetails = isMobile && (!isCreateMode || !!(skuDetailConfig === null || skuDetailConfig === void 0 ? void 0 : skuDetailConfig.isShowProductSummary));
 		const shouldRenderProductSummary = shouldRenderSkuSelection || shouldRenderMobileProductDetails;
@@ -1388,13 +1429,14 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, variant }, ref) => {
 			closable: false,
 			destroyOnClose: true,
 			style: { maxHeight: variant === "phone" ? "95dvh" : void 0 },
-			height: variant === "phone" ? "auto" : void 0,
+			height: variant === "phone" ? isCustomSelectionFlow ? "clamp(600px, 50dvh, 1600px)" : "auto" : void 0,
 			width: variant === "phone" ? "100%" : "80%",
 			className: (0, classnames.default)({
 				"pisell-sku-detail-modal": variant !== "phone",
 				"pisell-sku-detail-modal--smallTablet": variant !== "phone" && variant === "smallTablet",
 				"pisell-sku-detail-modal--tablet": variant !== "phone" && variant === "tablet",
 				"pisell-sku-detail-drawer": variant === "phone",
+				"pisell-sku-detail-drawer--selection-flow": variant === "phone" && isCustomSelectionFlow,
 				"aside-full": isWeighingProductWithoutSku && !shouldRenderMobileWeighing
 			}),
 			placement: variant === "phone" ? "bottom" : void 0

package/lib/pro/skuDetailModal/index.less

@@ -897,13 +897,18 @@
   }
 }
 
-// PisellProcedure 的小屏 Modal 规则在 low-code 产物中带有 #body 前缀，
-// 会把竖排 Drawer 的 sidebar 重新限制为 290px；使用同一作用域覆盖固定宽度。
-#body .pisell-sku-detail-drawer {
-  .pisell-procedure--modal .pisell-procedure-sidebar {
-    width: 100% !important;
-    min-width: 0 !important;
-    max-width: 100% !important;
+// 预约步骤的内容量差异很大：时间片可能很多，资源也可能只有一两个。
+// Flow Drawer 使用稳定的外壳高度，中间内容区沿用上方的 overflow-y:auto；
+// 普通商品没有该修饰类，仍保持原来的内容自适应高度。
+.pisell-sku-detail-drawer--selection-flow {
+  max-height: 95dvh;
+
+  .pisell-lowcode-floating-layer-content,
+  .pisell-lowcode-drawer-content,
+  .pisell-lowcode-floating-layer-body,
+  .pisell-lowcode-drawer-body {
+    height: 100%;
+    min-height: 0;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/private-materials",
-  "version": "6.12.124",
+  "version": "6.12.126",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -70,7 +70,7 @@
     "styled-components": "^6.0.0-rc.3",
     "use-sync-external-store": "^1.6.0",
     "@pisell/utils": "3.0.4",
-    "@pisell/materials": "6.12.32",
+    "@pisell/materials": "6.12.33",
     "@pisell/icon": "0.0.11",
     "@pisell/date-picker": "3.0.10"
   },