@pisell/private-materials 6.9.2 → 6.9.3

package/es/components/kioskSkuDetail/index.js

@@ -1,5 +1,10 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -13,14 +18,14 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Decimal from 'decimal.js';
 import classNames from 'classnames';
 import { Button } from '@pisell/materials';
 import dayjs from 'dayjs';
 import { locales } from '@pisell/utils';
 import SKUOptionsSelection from "../../plus/skuOptionsSelection";
-import PisellNumberSelector from "../../pro/pisellNumberSelector";
+// import PisellNumberSelector from '../../pro/pisellNumberSelector';
 import useEngineContext from "../../hooks/useEngineContext";
 import { getProductDetail } from "../booking/info/service/serve";
 import localeTexts from "./locales";
@@ -34,10 +39,9 @@ import { request } from "../booking/utils";
  * - 底部用 PisellNumberSelector 做数量编辑
  */
 function KioskSkuDetail(props) {
-  var _context$appHelper, _context$engine, _context$appHelper2, _store$getState, _store$getState2, _store$getState3;
+  var _ref, _context$appHelper, _context$engine, _context$appHelper2, _store$getState, _store$getState2, _store$getState3;
   var className = props.className,
     style = props.style,
-    onBack = props.onBack,
     onAddToCart = props.onAddToCart;
 
   /**
@@ -49,13 +53,7 @@ function KioskSkuDetail(props) {
       keys: ['productId', 'product_id', 'id']
     });
   }, []);
-
-  /**
-   * @description 最终使用的商品 id
-   * - 以 URL 为准（方便 kiosk 场景通过路由跳转直接带参）
-   * - props.productId 作为兜底，兼容老用法
-   */
-  var resolvedProductId = productIdFromUrl !== null && productIdFromUrl !== void 0 ? productIdFromUrl : props.productId;
+  var initialProductId = (_ref = productIdFromUrl !== null && productIdFromUrl !== void 0 ? productIdFromUrl : props.productId) !== null && _ref !== void 0 ? _ref : null;
 
   /**
    * @description 目前 scheduleDate 暂时固定成“当天”
@@ -64,33 +62,22 @@ function KioskSkuDetail(props) {
   var scheduleDate = useMemo(function () {
     return dayjs().format('YYYY-MM-DD');
   }, []);
+  var stageScale = useDesignStageScale({
+    designWidth: 1080,
+    designHeight: 1800
+  });
   var context = useEngineContext();
-  var _ref = ((_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {},
-    interaction = _ref.interaction;
+  var _ref2 = ((_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {},
+    interaction = _ref2.interaction;
   locales.init(localeTexts, (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) || 'en');
   request.setRequest(context.appHelper.utils.request);
-  var _ref2 = ((_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 ? void 0 : _context$appHelper2.utils) || {},
-    store = _ref2.store,
-    getData = _ref2.getData;
+  var _ref3 = ((_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 ? void 0 : _context$appHelper2.utils) || {},
+    store = _ref3.store,
+    getData = _ref3.getData,
+    Toast = _ref3.Toast;
   var state = store === null || store === void 0 || (_store$getState = store.getState) === null || _store$getState === void 0 ? void 0 : _store$getState.call(store);
   var symbol = (store === null || store === void 0 || (_store$getState2 = store.getState) === null || _store$getState2 === void 0 || (_store$getState2 = _store$getState2.call(store)) === null || _store$getState2 === void 0 || (_store$getState2 = _store$getState2.global) === null || _store$getState2 === void 0 ? void 0 : _store$getState2.symbol) || '$';
   var currency_code = (store === null || store === void 0 || (_store$getState3 = store.getState) === null || _store$getState3 === void 0 || (_store$getState3 = _store$getState3.call(store)) === null || _store$getState3 === void 0 || (_store$getState3 = _store$getState3.global) === null || _store$getState3 === void 0 ? void 0 : _store$getState3.currency_code) || 'AUD';
-  useEffect(function () {
-    var _interaction$utils, _interaction$utils$po;
-    // 通知原生初始化
-    interaction === null || interaction === void 0 || (_interaction$utils = interaction.utils) === null || _interaction$utils === void 0 || (_interaction$utils$po = _interaction$utils.postMessageToApp) === null || _interaction$utils$po === void 0 || _interaction$utils$po.call(_interaction$utils, {
-      module: 'tickets',
-      key: 'page_load'
-    });
-    // 原生初始化调用-新购流程
-    interaction.utils.mountFunction('tickets', 'restore_buy_wallet_pass', function (data) {
-      console.log('重置状态', data);
-    });
-    // 原生初始化调用-购物车编辑
-    interaction.utils.mountFunction('tickets', 'edit_buy_wallet_pass', function (data) {
-      console.log('编辑状态', data);
-    });
-  }, []);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
@@ -125,90 +112,195 @@ function KioskSkuDetail(props) {
     _useState12 = _slicedToArray(_useState11, 2),
     skuDefaultValue = _useState12[0],
     setSkuDefaultValue = _useState12[1];
-  useEffect(function () {
-    var isCancelled = false;
-    function load() {
-      return _load.apply(this, arguments);
-    }
-    function _load() {
-      _load = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var open_deposit, _params, res, apiData, normalizedProductId, minNumUnit, initialSkuValue;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (resolvedProductId) {
-                _context.next = 2;
-                break;
-              }
-              return _context.abrupt("return");
-            case 2:
-              setIsLoading(true);
-              setErrorText(null);
-              _context.prev = 4;
-              open_deposit = (getData === null || getData === void 0 ? void 0 : getData('bookingv2_deposit')) || 0;
-              _params = {
-                open_deposit: open_deposit
-              };
-              _params.schedule_date = scheduleDate;
-              _context.next = 10;
-              return getProductDetail(String(resolvedProductId), _params);
-            case 10:
-              res = _context.sent;
-              apiData = (res === null || res === void 0 ? void 0 : res.data) || {};
-              if (!isCancelled) {
-                _context.next = 14;
-                break;
-              }
-              return _context.abrupt("return");
-            case 14:
-              setProductData(apiData);
-              normalizedProductId = Number((apiData === null || apiData === void 0 ? void 0 : apiData.product_id) || (apiData === null || apiData === void 0 ? void 0 : apiData.id) || resolvedProductId || 0);
-              minNumUnit = Number((apiData === null || apiData === void 0 ? void 0 : apiData.min_num_unit) || 1);
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    isEdit = _useState14[0],
+    setIsEdit = _useState14[1];
+  var skuOptionsSelectionRef = useRef(null);
+  /**
+   * @description 防止“原生多次初始化/快速切换”导致请求乱序覆盖
+   */
+  var requestSeqRef = useRef(0);
+  var resetForInit = useCallback(function () {
+    setProductData(null);
+    setErrorText(null);
+    setQuantity(1);
+    setSkuValue({
+      product_id: 0,
+      product_variant_id: 0,
+      bundle: [],
+      option: []
+    });
+    setSkuDefaultValue({
+      product_id: 0,
+      product_variant_id: 0,
+      bundle: [],
+      option: []
+    });
+  }, []);
+  var loadByProductId = useCallback( /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(productId) {
+      var options,
+        reqId,
+        _context$engine2,
+        open_deposit,
+        _params,
+        res,
+        apiData,
+        normalizedProductId,
+        minNumUnit,
+        defaultVariantId,
+        initialSkuValue,
+        _args = arguments;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            options = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
+            console.log('准备 load', productId);
+            if (!(productId === null || typeof productId === 'undefined' || productId === '')) {
+              _context.next = 4;
+              break;
+            }
+            return _context.abrupt("return");
+          case 4:
+            reqId = ++requestSeqRef.current;
+            setIsLoading(true);
+            setErrorText(null);
+            _context.prev = 7;
+            open_deposit = (getData === null || getData === void 0 ? void 0 : getData('bookingv2_deposit')) || 0;
+            _params = {
+              open_deposit: open_deposit,
+              'translate-locale': (context === null || context === void 0 || (_context$engine2 = context.engine) === null || _context$engine2 === void 0 || (_context$engine2 = _context$engine2.props) === null || _context$engine2 === void 0 ? void 0 : _context$engine2.locale) || 'en'
+            };
+            _params.schedule_date = scheduleDate;
+            _context.next = 13;
+            return getProductDetail(String(productId), _params);
+          case 13:
+            res = _context.sent;
+            console.log('详情接口');
+            console.log(JSON.stringify(res));
+            apiData = (res !== null && res !== void 0 && res.id ? res : res === null || res === void 0 ? void 0 : res.data) || {};
+            if (!(reqId !== requestSeqRef.current)) {
+              _context.next = 19;
+              break;
+            }
+            return _context.abrupt("return");
+          case 19:
+            setProductData(apiData);
+            console.log('已设置 productData');
+            normalizedProductId = Number((apiData === null || apiData === void 0 ? void 0 : apiData.product_id) || (apiData === null || apiData === void 0 ? void 0 : apiData.id) || productId || 0);
+            minNumUnit = Number((apiData === null || apiData === void 0 ? void 0 : apiData.min_num_unit) || 1);
+            if (options.shouldInitQuantity !== false) {
               setQuantity(minNumUnit > 0 ? minNumUnit : 1);
-              initialSkuValue = {
-                product_id: normalizedProductId,
-                product_variant_id: 0,
-                bundle: [],
-                option: []
-              };
+            }
+
+            /**
+             * @description 默认选中第一个 variant（如果接口返回了 variant 且有数据）
+             * 注意：本组件内部用 variant 的 `id` 来匹配 `skuValue.product_variant_id`
+             */
+            defaultVariantId = function (_apiData$variant) {
+              var firstVariantId = Array.isArray(apiData === null || apiData === void 0 ? void 0 : apiData.variant) ? Number((apiData === null || apiData === void 0 || (_apiData$variant = apiData.variant) === null || _apiData$variant === void 0 || (_apiData$variant = _apiData$variant[0]) === null || _apiData$variant === void 0 ? void 0 : _apiData$variant.id) || 0) : 0;
+              return Number.isFinite(firstVariantId) ? firstVariantId : 0;
+            }();
+            initialSkuValue = {
+              product_id: normalizedProductId,
+              product_variant_id: defaultVariantId,
+              bundle: [],
+              option: []
+            };
+            if (options.shouldInitSku !== false) {
               setSkuValue(initialSkuValue);
               setSkuDefaultValue(initialSkuValue);
-              _context.next = 29;
+              setTimeout(function () {
+                if (initialSkuValue.product_variant_id) {
+                  var _skuOptionsSelectionR;
+                  (_skuOptionsSelectionR = skuOptionsSelectionRef.current) === null || _skuOptionsSelectionR === void 0 || _skuOptionsSelectionR.validate();
+                }
+              }, 0);
+            }
+            _context.next = 33;
+            break;
+          case 29:
+            _context.prev = 29;
+            _context.t0 = _context["catch"](7);
+            console.error(_context.t0);
+            setErrorText('Failed to load product detail');
+          case 33:
+            _context.prev = 33;
+            if (!(reqId !== requestSeqRef.current)) {
+              _context.next = 36;
               break;
-            case 23:
-              _context.prev = 23;
-              _context.t0 = _context["catch"](4);
-              console.error(_context.t0);
-              if (!isCancelled) {
-                _context.next = 28;
-                break;
-              }
-              return _context.abrupt("return");
-            case 28:
-              setErrorText('Failed to load product detail');
-            case 29:
-              _context.prev = 29;
-              if (!isCancelled) {
-                _context.next = 32;
-                break;
-              }
-              return _context.abrupt("return");
-            case 32:
-              setIsLoading(false);
-              return _context.finish(29);
-            case 34:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[4, 23, 29, 34]]);
-      }));
-      return _load.apply(this, arguments);
-    }
-    load();
-    return function () {
-      isCancelled = true;
+            }
+            return _context.abrupt("return");
+          case 36:
+            setIsLoading(false);
+            return _context.finish(33);
+          case 38:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[7, 29, 33, 38]]);
+    }));
+    return function (_x) {
+      return _ref4.apply(this, arguments);
     };
-  }, [getData, resolvedProductId, scheduleDate]);
+  }(), [getData, scheduleDate]);
+
+  // 避免 mountFunction 回调捕获旧的 loadByProductId（不用额外 useEffect）
+  var loadRef = useRef(loadByProductId);
+  loadRef.current = loadByProductId;
+  useEffect(function () {
+    var _interaction$utils, _interaction$utils$po, _interaction$utils2, _interaction$utils2$m, _interaction$utils3, _interaction$utils3$m;
+    // 通知原生初始化
+    interaction === null || interaction === void 0 || (_interaction$utils = interaction.utils) === null || _interaction$utils === void 0 || (_interaction$utils$po = _interaction$utils.postMessageToApp) === null || _interaction$utils$po === void 0 || _interaction$utils$po.call(_interaction$utils, {
+      module: 'wallet_pass',
+      key: 'page_load'
+    });
+    // 原生初始化调用-新购流程
+    interaction === null || interaction === void 0 || (_interaction$utils2 = interaction.utils) === null || _interaction$utils2 === void 0 || (_interaction$utils2$m = _interaction$utils2.mountFunction) === null || _interaction$utils2$m === void 0 || _interaction$utils2$m.call(_interaction$utils2, 'wallet_pass', 'restore_buy_wallet_pass', function (id) {
+      console.log('重置状态', id);
+      console.log('宽', window.innerWidth);
+      console.log('高', window.innerHeight);
+      console.log('设备像素比', window.devicePixelRatio);
+      // 原生会预渲染页面，真正展示时再调用这里；该方法可能被多次调用
+      resetForInit();
+
+      // 原生回调入参就是 productId：直接触发加载（不走“state→effect”链）
+      if (id || id === 0) loadRef.current(id);
+      setIsEdit(false);
+    });
+    // 原生初始化调用-购物车编辑
+    interaction === null || interaction === void 0 || (_interaction$utils3 = interaction.utils) === null || _interaction$utils3 === void 0 || (_interaction$utils3$m = _interaction$utils3.mountFunction) === null || _interaction$utils3$m === void 0 || _interaction$utils3$m.call(_interaction$utils3, 'wallet_pass', 'edit_buy_wallet_pass', function (data) {
+      console.log('编辑状态', data);
+      var productData = JSON.parse(data);
+      /**
+       * @description 编辑态原生只会触发 edit_buy_wallet_pass
+       * - 这里需要主动 load 一次拿到最新详情（尤其是 variant 列表/价格）
+       * - 但不能覆盖原生传入的 variantId / quantity
+       */
+      // setProductData(productData.productDetail);
+      loadRef.current(productData.productId, {
+        shouldInitSku: false,
+        shouldInitQuantity: false
+      });
+      setSkuValue({
+        product_id: productData.productId,
+        product_variant_id: Number(productData.variantId),
+        bundle: [],
+        option: []
+      });
+      setSkuDefaultValue({
+        product_id: productData.productId,
+        product_variant_id: Number(productData.variantId),
+        bundle: [],
+        option: []
+      });
+      setIsEdit(true);
+    });
+
+    // URL 有 productId：挂载时只加载一次
+    if (initialProductId || initialProductId === 0) loadRef.current(initialProductId);
+  }, []);
   var coverUrl = useMemo(function () {
     return (productData === null || productData === void 0 ? void 0 : productData.cover) || (productData === null || productData === void 0 ? void 0 : productData.image) || '';
   }, [productData]);
@@ -263,65 +355,50 @@ function KioskSkuDetail(props) {
     return "".concat(priceSign).concat(symbol).concat(deTotal.abs().toNumber().toFixed(2));
   }, [itemTotal, symbol]);
   var handleAddToCart = function handleAddToCart() {
+    var _skuOptionsSelectionR2;
     if (!productData) return;
-    // onAddToCart?.({
-    //   product: productData,
-    //   skuValue,
-    //   quantity,
-    //   unitPrice,
-    //   total: itemTotal,
-    //   currencySymbol: symbol,
-    //   bookingConfig: state?.bookingConfig,
-    // });
-    var productBundle = [];
-    skuValue.bundle.forEach(function (item) {
-      if (!item.num || item.num < 1) return;
-      var targetBundleData;
-      var bundle_group_id;
-      for (var i = 0; i < productData.bundle_group.length; i++) {
-        var _productData$bundle_g = productData.bundle_group[i],
-          id = _productData$bundle_g.id,
-          _productData$bundle_g2 = _productData$bundle_g.bundle_item,
-          bundle_item = _productData$bundle_g2 === void 0 ? [] : _productData$bundle_g2;
-        for (var j = 0; j < bundle_item.length; j++) {
-          if (item.id === bundle_item[j].bundle_product_id) {
-            bundle_group_id = id;
-            targetBundleData = bundle_item[j];
-            break;
-          }
-        }
-      }
-      productBundle.push({
-        bundle_group_id: bundle_group_id,
-        bundle_id: targetBundleData.id,
-        bundle_product_id: item.id,
-        bundle_variant_id: targetBundleData.bundle_variant_id,
-        num: item.num,
-        extension_id: targetBundleData.extension_id,
-        extension_type: targetBundleData.extension_type
-      });
-    });
-    productData.option_group = [];
-    productData.variant_group = [];
+    (_skuOptionsSelectionR2 = skuOptionsSelectionRef.current) === null || _skuOptionsSelectionR2 === void 0 || _skuOptionsSelectionR2.validate();
+    if (!skuValue.product_variant_id) {
+      Toast.info(locales.getText('pisell2.text.kiosk.sku.detail.toast.select.variant'));
+      return;
+    }
+    ;
     var obj = {
       productDetail: productData,
       quantity: quantity,
+      variantId: skuValue.product_variant_id,
       pricePerUnit: unitPrice,
-      bundlePrice: productData.price,
-      productBundle: productBundle
+      isWebBuyWalletPass: true
     };
     interaction.utils.postMessageToApp({
-      module: 'tickets',
+      module: 'wallet_pass',
       key: 'buy_wallet_pass',
       data: {
         // 把洗好的数据放这里
-        productData: [obj]
+        productData: obj,
+        isEdit: isEdit
       }
     });
   };
+  var onBack = function onBack() {
+    interaction.utils.postMessageToApp({
+      module: "wallet_pass",
+      key: "back"
+    });
+  };
+  var stageStyle = useMemo(function () {
+    return _objectSpread(_objectSpread({}, style || {}), {}, {
+      width: 1080,
+      height: 1800,
+      transform: "translateX(-50%) scale(".concat(stageScale, ")"),
+      transformOrigin: 'top center'
+    });
+  }, [stageScale, style]);
   return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-kiosk-sku-detail-viewport"
+  }, /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-kiosk-sku-detail', className),
-    style: style
+    style: stageStyle
   }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-kiosk-sku-detail__content"
   }, /*#__PURE__*/React.createElement("div", {
@@ -349,7 +426,8 @@ function KioskSkuDetail(props) {
     className: "pisell-kiosk-sku-detail__error"
   }, errorText)), /*#__PURE__*/React.createElement("div", {
     className: "pisell-kiosk-sku-detail__options-card"
-  }, productData ? /*#__PURE__*/React.createElement(SKUOptionsSelection, {
+  }, productData && Array.isArray(productData === null || productData === void 0 ? void 0 : productData.variant) && productData.variant.length > 0 ? /*#__PURE__*/React.createElement(SKUOptionsSelection, {
+    ref: skuOptionsSelectionRef,
     dataSource: productData,
     value: skuDefaultValue,
     skuCardConfig: {
@@ -374,27 +452,13 @@ function KioskSkuDetail(props) {
     className: "pisell-kiosk-sku-detail__footer-center"
   }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-kiosk-sku-detail__item-total"
-  }, locales.getText('pisell2.text.kiosk.sku.detail.item.total'), ":", ' ', itemTotalText), /*#__PURE__*/React.createElement("div", {
-    className: "pisell-kiosk-sku-detail__qty"
-  }, /*#__PURE__*/React.createElement(PisellNumberSelector, {
-    value: quantity,
-    width: "140px",
-    onChange: function onChange(v) {
-      if (!v) return;
-      setQuantity(v);
-    },
-    min: 1,
-    max: 99999,
-    step: 1,
-    size: "large",
-    enablePriceAdjust: false
-  }))), /*#__PURE__*/React.createElement(Button, {
+  }, locales.getText('pisell2.text.kiosk.sku.detail.item.total'), ":", ' ', itemTotalText)), /*#__PURE__*/React.createElement(Button, {
     type: "primary",
     className: "pisell-kiosk-sku-detail__add-btn",
     size: "large",
     onClick: handleAddToCart,
     disabled: !productData || isLoading
-  }, locales.getText('pisell2.text.kiosk.sku.detail.btn.add.to.cart'))));
+  }, locales.getText(isEdit ? 'pisell2.text.kiosk.sku.detail.btn.update' : 'pisell2.text.kiosk.sku.detail.btn.add.to.cart')))));
 }
 export default KioskSkuDetail;
 
@@ -433,4 +497,35 @@ function getQueryFirstMatch(params) {
   var queryIndex = hash.indexOf('?');
   if (queryIndex === -1) return null;
   return tryRead(hash.slice(queryIndex + 1));
-}
+}
+
+/**
+ * @description 按设计稿基准尺寸（默认 1080x1800）计算页面缩放比例
+ * - scale = min(viewportW/designW, viewportH/designH, 1)
+ */
+function useDesignStageScale(params) {
+  var designWidth = params.designWidth;
+  var designHeight = params.designHeight;
+  var _useState15 = useState(1),
+    _useState16 = _slicedToArray(_useState15, 2),
+    scale = _useState16[0],
+    setScale = _useState16[1];
+  useEffect(function () {
+    var update = function update() {
+      var viewportWidth = window.innerWidth || designWidth;
+      var viewportHeight = window.innerHeight || designHeight;
+      var nextScale = Math.min(viewportWidth / designWidth, viewportHeight / designHeight, 1);
+      setScale(nextScale);
+    };
+    update();
+    window.addEventListener('resize', update);
+    return function () {
+      return window.removeEventListener('resize', update);
+    };
+  }, [designHeight, designWidth]);
+  return scale;
+}
+
+/**
+ * @description 从原生回调 payload 中提取 productId
+ */

package/es/components/kioskSkuDetail/index.less

@@ -1,7 +1,17 @@
-.pisell-kiosk-sku-detail {
+.pisell-kiosk-sku-detail-viewport {
   position: relative;
-  width: 100%;
+  width: 100vw;
   height: 100vh;
+  overflow: hidden;
+  background: #f2f4f7;
+}
+
+.pisell-kiosk-sku-detail {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 1080px;
+  height: 1800px;
   overflow-y: auto;
   background: #f2f4f7;
   background-size: cover;
@@ -11,12 +21,40 @@
 }
 
 .pisell-kiosk-sku-detail__content {
-  max-width: 1000px;
+  width: 100%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 40px;
   padding-bottom: 220px; // avoid overlap with footer
+  .pisell-pro-selector_header-content {
+    .pisell-pro-selector_header-content-title {
+      color: #101828;
+      font-size: 36px !important;
+    }
+    .pisell-lowcode-tag {
+      font-size: 22px !important;
+      margin-left: 20px !important;
+      padding-top: 5px !important;
+      padding-bottom: 5px !important;
+    }
+  }
+  .pisell-pro-selector_tip {
+    font-size: 36px !important;
+    color: #667085;
+  }
+  .pisell-sku-options-selection-variant-card__title {
+    font-size: 36px !important;
+    font-weight: 600 !important;
+    color: #101828;
+  }
+  .pisell-sku-options-selection-variant-card__price {
+    font-size: 30px !important;
+  }
+  .pisell-sku-options-selection-variant-card {
+    padding-top: 30px !important;
+    padding-bottom: 30px !important;
+  }
 }
 
 .pisell-kiosk-sku-detail__hero {
@@ -55,7 +93,6 @@
 }
 
 .pisell-kiosk-sku-detail__desc {
-  max-width: 860px;
   font-size: 36px;
   line-height: 44px;
   font-weight: 400;
@@ -91,11 +128,13 @@
 }
 
 .pisell-kiosk-sku-detail__footer {
+  // 注意：父容器有 transform(scale)，fixed 会相对该容器定位（适配小分辨率缩放舞台）
   position: fixed;
-  left: 50%;
+  left: 30px;
+  right: 30px;
   bottom: 30px;
-  transform: translateX(-50%);
-  width: min(1020px, calc(100% - 60px));
+  transform: none;
+  width: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -125,6 +164,9 @@
   display: flex;
   align-items: center;
   gap: 20px;
+  // 靠右，并与右侧主按钮保持 20px 间距
+  margin-left: auto;
+  margin-right: 20px;
 }
 
 .pisell-kiosk-sku-detail__item-total {

package/es/components/kioskSkuDetail/locales.d.ts

@@ -3,19 +3,25 @@ declare const _default: {
         'pisell2.text.kiosk.sku.detail.btn.back': string;
         'pisell2.text.kiosk.sku.detail.item.total': string;
         'pisell2.text.kiosk.sku.detail.btn.add.to.cart': string;
+        'pisell2.text.kiosk.sku.detail.btn.update': string;
         'pisell2.text.kiosk.sku.detail.loading.options': string;
+        'pisell2.text.kiosk.sku.detail.toast.select.variant': string;
     };
     'zh-CN': {
         'pisell2.text.kiosk.sku.detail.btn.back': string;
         'pisell2.text.kiosk.sku.detail.item.total': string;
         'pisell2.text.kiosk.sku.detail.btn.add.to.cart': string;
+        'pisell2.text.kiosk.sku.detail.btn.update': string;
         'pisell2.text.kiosk.sku.detail.loading.options': string;
+        'pisell2.text.kiosk.sku.detail.toast.select.variant': string;
     };
     'zh-TW': {
         'pisell2.text.kiosk.sku.detail.btn.back': string;
         'pisell2.text.kiosk.sku.detail.item.total': string;
         'pisell2.text.kiosk.sku.detail.btn.add.to.cart': string;
+        'pisell2.text.kiosk.sku.detail.btn.update': string;
         'pisell2.text.kiosk.sku.detail.loading.options': string;
+        'pisell2.text.kiosk.sku.detail.toast.select.variant': string;
     };
 };
 export default _default;