@pisell/private-materials 3.4.59 → 3.4.60

package/lib/components/eftposPay/payo/config.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StatusEnum } from '../const';
 export declare const POS: ({ api, onChange, }: {
     api: {

package/lib/components/eftposPay/tip.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './tip.less';
 /**
  * @title: 支付状态未知页面

package/lib/components/eftposPay/windcave/receiptAction.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @title: 按钮操作区
  * @description: 仅包含签名

package/lib/components/eftposPay/windcave/windcave.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: ({ api, onChange, formatAmount, }: {
     api: any;
     onChange: any;

package/lib/components/eventBooking/components/Provider/Cart/index.d.ts

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

package/lib/components/eventBooking/components/Provider/EmptyHolderModal/index.d.ts

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

package/lib/components/eventBooking/components/Provider/OrderProductModal/index.d.ts

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

package/lib/components/eventBooking/components/Provider/RemoveOptionConfirmModal.d.ts

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

package/lib/components/eventBooking/components/scheduleCalendar/ProductItem/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 declare type Item = any;
 interface ProductItemProps {

package/lib/components/eventBooking/components/scheduleCalendar/components/ScheduleTimeItem/index.d.ts

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

package/lib/components/kioskSkuDetail/index.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { SkuValue } from '../../plus/skuOptionsSelection/types';
+import './index.less';
+/**
+ * @description Kiosk 商品详情（参考 Figma: Kiosk / Launchpad screen）
+ * - 默认从 URL query 读取商品 id（productId / product_id / id），内部通过 getProductDetail 拉取详情
+ * - 中间区域用 SKUOptionsSelection 做 SKU 选择
+ * - 底部用 PisellNumberSelector 做数量编辑
+ */
+declare function KioskSkuDetail(props: KioskSkuDetailProps): JSX.Element;
+export default KioskSkuDetail;
+/**
+ * @description 从原生回调 payload 中提取 productId
+ */
+export interface KioskSkuDetailProps {
+    /** 商品 id（可选：目前默认从 URL 读取，props 仅作为兜底以兼容老用法） */
+    productId?: number | string;
+    /**
+     * 可选：用于商品报价的日期（预约类商品）
+     * @deprecated 目前 kiosk 详情暂时固定取当天，这个参数暂不生效
+     */
+    scheduleDate?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 返回 */
+    onBack?: () => void;
+    /** 加入购物车 */
+    onAddToCart?: (params: {
+        product: any;
+        skuValue: SkuValue;
+        quantity: number;
+        unitPrice: number;
+        total: number;
+        currencySymbol: string;
+        bookingConfig?: any;
+    }) => void;
+}

package/lib/components/kioskSkuDetail/index.js

@@ -0,0 +1,393 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/kioskSkuDetail/index.tsx
+var kioskSkuDetail_exports = {};
+__export(kioskSkuDetail_exports, {
+  default: () => kioskSkuDetail_default
+});
+module.exports = __toCommonJS(kioskSkuDetail_exports);
+var import_react = __toESM(require("react"));
+var import_decimal = __toESM(require("decimal.js"));
+var import_classnames = __toESM(require("classnames"));
+var import_materials = require("@pisell/materials");
+var import_dayjs = __toESM(require("dayjs"));
+var import_utils = require("@pisell/utils");
+var import_skuOptionsSelection = __toESM(require("../../plus/skuOptionsSelection"));
+var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_serve = require("../booking/info/service/serve");
+var import_locales = __toESM(require("./locales"));
+var import_index = require("./index.less");
+var import_utils2 = require("../booking/utils");
+function KioskSkuDetail(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const { className, style, onAddToCart } = props;
+  const productIdFromUrl = (0, import_react.useMemo)(() => {
+    return getQueryFirstMatch({ keys: ["productId", "product_id", "id"] });
+  }, []);
+  const initialProductId = productIdFromUrl ?? props.productId ?? null;
+  const scheduleDate = (0, import_react.useMemo)(() => (0, import_dayjs.default)().format("YYYY-MM-DD"), []);
+  const stageScale = useDesignStageScale({ designWidth: 1080, designHeight: 1800 });
+  const context = (0, import_useEngineContext.default)();
+  const { interaction } = ((_a = context.appHelper) == null ? void 0 : _a.utils) || {};
+  import_utils.locales.init(import_locales.default, ((_c = (_b = context == null ? void 0 : context.engine) == null ? void 0 : _b.props) == null ? void 0 : _c.locale) || "en");
+  import_utils2.request.setRequest(context.appHelper.utils.request);
+  const { store, getData, Toast } = ((_d = context.appHelper) == null ? void 0 : _d.utils) || {};
+  const state = (_e = store == null ? void 0 : store.getState) == null ? void 0 : _e.call(store);
+  const symbol = ((_h = (_g = (_f = store == null ? void 0 : store.getState) == null ? void 0 : _f.call(store)) == null ? void 0 : _g.global) == null ? void 0 : _h.symbol) || "$";
+  const currency_code = ((_k = (_j = (_i = store == null ? void 0 : store.getState) == null ? void 0 : _i.call(store)) == null ? void 0 : _j.global) == null ? void 0 : _k.currency_code) || "AUD";
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  const [errorText, setErrorText] = (0, import_react.useState)(null);
+  const [productData, setProductData] = (0, import_react.useState)(null);
+  const [quantity, setQuantity] = (0, import_react.useState)(1);
+  const [skuValue, setSkuValue] = (0, import_react.useState)({
+    product_id: 0,
+    product_variant_id: 0,
+    bundle: [],
+    option: []
+  });
+  const [skuDefaultValue, setSkuDefaultValue] = (0, import_react.useState)({
+    product_id: 0,
+    product_variant_id: 0,
+    bundle: [],
+    option: []
+  });
+  const [isEdit, setIsEdit] = (0, import_react.useState)(false);
+  const skuOptionsSelectionRef = (0, import_react.useRef)(null);
+  const requestSeqRef = (0, import_react.useRef)(0);
+  const resetForInit = (0, import_react.useCallback)(() => {
+    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: []
+    });
+  }, []);
+  const loadByProductId = (0, import_react.useCallback)(async (productId, options = {}) => {
+    console.log("准备 load", productId);
+    if (productId === null || typeof productId === "undefined" || productId === "") return;
+    const reqId = ++requestSeqRef.current;
+    setIsLoading(true);
+    setErrorText(null);
+    try {
+      const open_deposit = (getData == null ? void 0 : getData("bookingv2_deposit")) || 0;
+      const params = { open_deposit };
+      params.schedule_date = scheduleDate;
+      const res = await (0, import_serve.getProductDetail)(String(productId), params);
+      console.log("详情接口");
+      console.log(JSON.stringify(res));
+      const apiData = ((res == null ? void 0 : res.id) ? res : res == null ? void 0 : res.data) || {};
+      if (reqId !== requestSeqRef.current) return;
+      setProductData(apiData);
+      console.log("已设置 productData");
+      const normalizedProductId = Number(
+        (apiData == null ? void 0 : apiData.product_id) || (apiData == null ? void 0 : apiData.id) || productId || 0
+      );
+      const minNumUnit = Number((apiData == null ? void 0 : apiData.min_num_unit) || 1);
+      if (options.shouldInitQuantity !== false) {
+        setQuantity(minNumUnit > 0 ? minNumUnit : 1);
+      }
+      const defaultVariantId = (() => {
+        var _a2, _b2;
+        const firstVariantId = Array.isArray(apiData == null ? void 0 : apiData.variant) ? Number(((_b2 = (_a2 = apiData == null ? void 0 : apiData.variant) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.id) || 0) : 0;
+        return Number.isFinite(firstVariantId) ? firstVariantId : 0;
+      })();
+      const initialSkuValue = {
+        product_id: normalizedProductId,
+        product_variant_id: defaultVariantId,
+        bundle: [],
+        option: []
+      };
+      if (options.shouldInitSku !== false) {
+        setSkuValue(initialSkuValue);
+        setSkuDefaultValue(initialSkuValue);
+        setTimeout(() => {
+          var _a2;
+          if (initialSkuValue.product_variant_id) {
+            (_a2 = skuOptionsSelectionRef.current) == null ? void 0 : _a2.validate();
+          }
+        }, 0);
+      }
+    } catch (error) {
+      console.error(error);
+      setErrorText("Failed to load product detail");
+    } finally {
+      if (reqId !== requestSeqRef.current) return;
+      setIsLoading(false);
+    }
+  }, [getData, scheduleDate]);
+  const loadRef = (0, import_react.useRef)(loadByProductId);
+  loadRef.current = loadByProductId;
+  (0, import_react.useEffect)(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    (_b2 = (_a2 = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _a2.postMessageToApp) == null ? void 0 : _b2.call(_a2, {
+      module: "wallet_pass",
+      key: "page_load"
+    });
+    (_d2 = (_c2 = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _c2.mountFunction) == null ? void 0 : _d2.call(
+      _c2,
+      "wallet_pass",
+      "restore_buy_wallet_pass",
+      (id) => {
+        console.log("重置状态", id);
+        console.log("宽", window.innerWidth);
+        console.log("高", window.innerHeight);
+        console.log("设备像素比", window.devicePixelRatio);
+        resetForInit();
+        if (id || id === 0) loadRef.current(id);
+        setIsEdit(false);
+      }
+    );
+    (_f2 = (_e2 = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _e2.mountFunction) == null ? void 0 : _f2.call(
+      _e2,
+      "wallet_pass",
+      "edit_buy_wallet_pass",
+      (data) => {
+        console.log("编辑状态", data);
+        const productData2 = JSON.parse(data);
+        setProductData(productData2.productDetail);
+        loadRef.current(productData2.productDetail.id, {
+          shouldInitSku: false,
+          shouldInitQuantity: false
+        });
+        setSkuValue({
+          product_id: productData2.productDetail.id,
+          product_variant_id: Number(productData2.variantId),
+          bundle: [],
+          option: []
+        });
+        setSkuDefaultValue({
+          product_id: productData2.productDetail.id,
+          product_variant_id: Number(productData2.variantId),
+          bundle: [],
+          option: []
+        });
+        setIsEdit(true);
+      }
+    );
+    if (initialProductId || initialProductId === 0) loadRef.current(initialProductId);
+  }, []);
+  const coverUrl = (0, import_react.useMemo)(() => {
+    return (productData == null ? void 0 : productData.cover) || (productData == null ? void 0 : productData.image) || "";
+  }, [productData]);
+  const titleText = (0, import_react.useMemo)(() => {
+    var _a2;
+    return (productData == null ? void 0 : productData.title) || ((_a2 = productData == null ? void 0 : productData._extend) == null ? void 0 : _a2.product_name) || (productData == null ? void 0 : productData.product_name) || "";
+  }, [productData]);
+  const descriptionText = (0, import_react.useMemo)(() => {
+    var _a2;
+    return (productData == null ? void 0 : productData.description) || (productData == null ? void 0 : productData.sub_title) || ((_a2 = productData == null ? void 0 : productData._extend) == null ? void 0 : _a2.sub_title) || "";
+  }, [productData]);
+  const unitPrice = (0, import_react.useMemo)(() => {
+    const selectedVariantId = Number((skuValue == null ? void 0 : skuValue.product_variant_id) || 0);
+    if (selectedVariantId && Array.isArray(productData == null ? void 0 : productData.variant)) {
+      const matched = productData.variant.find(
+        (item) => Number(item == null ? void 0 : item.id) === selectedVariantId
+      );
+      const vPrice = Number((matched == null ? void 0 : matched.price) || 0);
+      if (!Number.isNaN(vPrice) && vPrice !== 0) return vPrice;
+    }
+    return Number((productData == null ? void 0 : productData.price) || 0);
+  }, [productData, skuValue == null ? void 0 : skuValue.product_variant_id]);
+  const priceRangeText = (0, import_react.useMemo)(() => {
+    const variantPrices = Array.isArray(productData == null ? void 0 : productData.variant) ? productData.variant.map((v) => Number((v == null ? void 0 : v.price) || 0)).filter((n) => !Number.isNaN(n) && n > 0) : [];
+    const base = Number((productData == null ? void 0 : productData.price) || 0);
+    const all = [...variantPrices, ...base > 0 ? [base] : []];
+    if (all.length === 0) return "";
+    const min = Math.min(...all);
+    const max = Math.max(...all);
+    if (min === max) return `${symbol}${min.toFixed(2)}`;
+    return `${symbol}${min.toFixed(2)}-${symbol}${max.toFixed(2)}`;
+  }, [productData, symbol]);
+  const itemTotal = (0, import_react.useMemo)(() => {
+    const deUnit = new import_decimal.default(unitPrice || 0);
+    const deQty = new import_decimal.default(quantity || 0);
+    return deUnit.mul(deQty).toNumber();
+  }, [quantity, unitPrice]);
+  const itemTotalText = (0, import_react.useMemo)(() => {
+    const deTotal = new import_decimal.default(itemTotal || 0);
+    const priceSign = deTotal.toNumber() < 0 ? "-" : "";
+    return `${priceSign}${symbol}${deTotal.abs().toNumber().toFixed(2)}`;
+  }, [itemTotal, symbol]);
+  const handleAddToCart = () => {
+    var _a2;
+    if (!productData) return;
+    (_a2 = skuOptionsSelectionRef.current) == null ? void 0 : _a2.validate();
+    if (!skuValue.product_variant_id) {
+      Toast.info(import_utils.locales.getText("pisell2.text.kiosk.sku.detail.toast.select.variant"));
+      return;
+    }
+    ;
+    const obj = {
+      productDetail: productData,
+      quantity,
+      variantId: skuValue.product_variant_id,
+      pricePerUnit: unitPrice,
+      isWebBuyWalletPass: true
+    };
+    interaction.utils.postMessageToApp({
+      module: "wallet_pass",
+      key: "buy_wallet_pass",
+      data: {
+        // 把洗好的数据放这里
+        productData: obj,
+        isEdit
+      }
+    });
+  };
+  const onBack = () => {
+    interaction.utils.postMessageToApp({
+      module: "wallet_pass",
+      key: "back"
+    });
+  };
+  const stageStyle = (0, import_react.useMemo)(() => {
+    return {
+      ...style || {},
+      width: 1080,
+      height: 1800,
+      transform: `translateX(-50%) scale(${stageScale})`,
+      transformOrigin: "top center"
+    };
+  }, [stageScale, style]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail-viewport" }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("pisell-kiosk-sku-detail", className),
+      style: stageStyle
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail__content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail__hero" }, coverUrl ? /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      {
+        className: "pisell-kiosk-sku-detail__hero-img",
+        src: coverUrl,
+        alt: titleText || "product"
+      }
+    ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail__hero-placeholder" })), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail__header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail__title" }, titleText || (isLoading ? "Loading…" : "")), !!descriptionText && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail__desc" }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        dangerouslySetInnerHTML: {
+          __html: descriptionText
+        }
+      }
+    )), !!priceRangeText && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail__price-range" }, priceRangeText, " ", currency_code), !!errorText && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail__error" }, errorText)), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail__options-card" }, productData && Array.isArray(productData == null ? void 0 : productData.variant) && productData.variant.length > 0 ? /* @__PURE__ */ import_react.default.createElement(
+      import_skuOptionsSelection.default,
+      {
+        ref: skuOptionsSelectionRef,
+        dataSource: productData,
+        value: skuDefaultValue,
+        skuCardConfig: {
+          price: {
+            visible: true
+          },
+          variantPriceVisible: true
+        },
+        onChange: (v) => {
+          setSkuValue(v);
+        },
+        customScrollParent: ".pisell-kiosk-sku-detail"
+      }
+    ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail__options-loading" }, isLoading ? import_utils.locales.getText(
+      "pisell2.text.kiosk.sku.detail.loading.options"
+    ) : ""))),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail__footer" }, /* @__PURE__ */ import_react.default.createElement(
+      import_materials.Button,
+      {
+        className: "pisell-kiosk-sku-detail__back-btn",
+        size: "large",
+        onClick: onBack
+      },
+      import_utils.locales.getText("pisell2.text.kiosk.sku.detail.btn.back")
+    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail__footer-center" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-kiosk-sku-detail__item-total" }, import_utils.locales.getText("pisell2.text.kiosk.sku.detail.item.total"), ":", " ", itemTotalText)), /* @__PURE__ */ import_react.default.createElement(
+      import_materials.Button,
+      {
+        type: "primary",
+        className: "pisell-kiosk-sku-detail__add-btn",
+        size: "large",
+        onClick: handleAddToCart,
+        disabled: !productData || isLoading
+      },
+      import_utils.locales.getText(
+        isEdit ? "pisell2.text.kiosk.sku.detail.btn.update" : "pisell2.text.kiosk.sku.detail.btn.add.to.cart"
+      )
+    ))
+  ));
+}
+var kioskSkuDetail_default = KioskSkuDetail;
+function getQueryFirstMatch(params) {
+  var _a;
+  if (typeof window === "undefined") return null;
+  if (!((_a = params == null ? void 0 : params.keys) == null ? void 0 : _a.length)) return null;
+  const keys = params.keys;
+  const tryRead = (raw) => {
+    if (!raw) return null;
+    const normalized = raw.startsWith("?") ? raw.slice(1) : raw;
+    const searchParams = new URLSearchParams(normalized);
+    for (const key of keys) {
+      const value = searchParams.get(key);
+      if (value) return value;
+    }
+    return null;
+  };
+  const fromSearch = tryRead(window.location.search || "");
+  if (fromSearch) return fromSearch;
+  const hash = window.location.hash || "";
+  const queryIndex = hash.indexOf("?");
+  if (queryIndex === -1) return null;
+  return tryRead(hash.slice(queryIndex + 1));
+}
+function useDesignStageScale(params) {
+  const designWidth = params.designWidth;
+  const designHeight = params.designHeight;
+  const [scale, setScale] = (0, import_react.useState)(1);
+  (0, import_react.useEffect)(() => {
+    const update = () => {
+      const viewportWidth = window.innerWidth || designWidth;
+      const viewportHeight = window.innerHeight || designHeight;
+      const nextScale = Math.min(
+        viewportWidth / designWidth,
+        viewportHeight / designHeight,
+        1
+      );
+      setScale(nextScale);
+    };
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, [designHeight, designWidth]);
+  return scale;
+}

package/lib/components/kioskSkuDetail/index.less

@@ -0,0 +1,196 @@
+.pisell-kiosk-sku-detail-viewport {
+  position: relative;
+  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;
+  background-position: center;
+  padding: 40px;
+  box-sizing: border-box;
+}
+
+.pisell-kiosk-sku-detail__content {
+  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 {
+  width: 100%;
+  border-radius: 40px;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.pisell-kiosk-sku-detail__hero-img {
+  width: 100%;
+  height: 633px;
+  object-fit: cover;
+  display: block;
+}
+
+.pisell-kiosk-sku-detail__hero-placeholder {
+  width: 100%;
+  height: 633px;
+  background: #f2f4f7;
+}
+
+.pisell-kiosk-sku-detail__header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  text-align: center;
+}
+
+.pisell-kiosk-sku-detail__title {
+  font-size: 60px;
+  line-height: 72px;
+  font-weight: 600;
+  color: #000;
+}
+
+.pisell-kiosk-sku-detail__desc {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 400;
+  color: #475467;
+}
+
+.pisell-kiosk-sku-detail__price-range {
+  font-size: 48px;
+  line-height: 60px;
+  font-weight: 600;
+  color: #f79009;
+}
+
+.pisell-kiosk-sku-detail__error {
+  font-size: 20px;
+  line-height: 30px;
+  color: #b42318;
+}
+
+.pisell-kiosk-sku-detail__options-card {
+  background: #fff;
+  border-radius: 40px;
+  padding: 40px;
+  .pisell-pro-selector_options-container {
+    grid-template-columns: 1fr 1fr !important;
+  }
+}
+
+.pisell-kiosk-sku-detail__options-loading {
+  font-size: 20px;
+  color: #667085;
+  padding: 20px 0;
+}
+
+.pisell-kiosk-sku-detail__footer {
+  // 注意：父容器有 transform(scale)，fixed 会相对该容器定位（适配小分辨率缩放舞台）
+  position: fixed;
+  left: 30px;
+  right: 30px;
+  bottom: 30px;
+  transform: none;
+  width: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 30px;
+  background: #fff;
+  border: 1px solid #d0d5dd;
+  border-radius: 80px;
+  box-shadow:
+    0px 4px 6px -2px rgba(16, 24, 40, 0.03),
+    0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+  box-sizing: border-box;
+}
+
+.pisell-kiosk-sku-detail__back-btn {
+  border-radius: 80px;
+  border: 1px solid #98a2b3 !important;
+  background: #fff !important;
+  color: #101828 !important;
+  height: 72px;
+  padding: 0 24px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.pisell-kiosk-sku-detail__footer-center {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  // 靠右，并与右侧主按钮保持 20px 间距
+  margin-left: auto;
+  margin-right: 20px;
+}
+
+.pisell-kiosk-sku-detail__item-total {
+  font-size: 20px;
+  line-height: 30px;
+  font-weight: 600;
+  color: #101828;
+  white-space: nowrap;
+}
+
+.pisell-kiosk-sku-detail__qty {
+  display: flex;
+  align-items: center;
+}
+
+.pisell-kiosk-sku-detail__add-btn {
+  border-radius: 80px !important;
+  height: 72px;
+  padding: 0 36px !important;
+  font-size: 24px !important;
+  font-weight: 600 !important;
+  background: #ffbc0d !important;
+  border-color: #ffbc0d !important;
+  color: #fff !important;
+}
+
+