@pisell/private-materials 6.8.10 → 6.8.12

package/lib/pro/skuDetailModal/index.less

@@ -1,27 +1,116 @@
 .pisell-sku-detail-modal {
-  .sku-detail-content {
-    display: flex;
-    flex-direction: column;
-    background: #fff;
-    border-radius: 8px;
+  /**
+   * 固定弹窗高度，确保内部滚动容器有“可计算的最大高度”
+   * 否则内容会把 modal 撑开，overflow-y: auto 无法生效（看起来就“滚不动”）
+   */
+  height: 684px;
+
+  // PisellModal（PC）内容容器：固定高度，内部 body 使用 flex 占满剩余空间
+  .pisell-lowcode-modal-content {
+    height: 684px;
+    max-height: 684px;
   }
 
-  .sku-detail-content-main {
-    display: flex;
-    flex-direction: row;
-    gap: 32px;
+  // SkuDetailModal 内部使用自定义滚动容器（右侧内容区），避免整块 modal body 滚动
+  .pisell-lowcode-modal-body {
+    overflow: hidden !important;
+    min-height: 0;
   }
 
-  .sku-detail-left {
-    width: 220px;
+  // 让 Procedure 的 content 在 modal body 的高度内进行布局，子元素可使用 min-height:0 正常滚动
+  .pisell-procedure-content {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    height: 100%;
+    min-height: 0;
+  }
+
+  // Procedure 本体撑满 modal body 高度（否则内部 100% 高度链条断开）
+  .pisell-sku-procedure,
+  .pisell-procedure {
+    height: 100%;
+    min-height: 0;
+  }
+
+  // 右侧内容区作为 SKUOptionsSelection 的 scroll parent（真正发生滚动的容器）
+  .sku-detail-right-content {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    max-height: 530px;
+    /**
+     * @description
+     * 让滚动条不要贴着内容（尤其是 macOS overlay scrollbar 会覆盖内容）
+     */
+    box-sizing: border-box;
+    padding-right: 12px;
+    scrollbar-gutter: stable;
+  }
+
+  .pisell-sku-procedure {
+    .pisell-procedure-content {
+      padding-top: 0 !important;
+      padding-bottom: 0;
+      height: fit-content !important;
+    }
+    .pisell-batch-selector {
+      padding-top: 0 !important;
+    }
+    .pisell-product-select__tabs-wrapper {
+      padding-top: 0 !important;
+    }
+    .pisell-lowcode-layout {
+      background: #fff!important;
+    }
+    .pisell-procedure-footer {
+      border-top: 1px solid #e8e8e8 !important;
+      background: #fff!important;
+    }
+    .pisell-procedure-sider-content-top{
+      height: 100% !important;
+    }
+  }
+  .pisell-lowcode-modal-body {
+    border-radius: 16px;
+    padding: 0!important;
+    gap: 0!important;
+  }
+  .sku-detail-left-close {
+    font-size: 20px;
+    color: #7958d3;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    user-select: none;
+    margin-left: 100px;
+  }
+
+  /**
+   * @description Header 左侧返回按钮（非第一步显示） + 第一页占位
+   * 第一页必须渲染一个空 div 占位，避免 header 左右布局抖动
+   */
+  .sku-detail-left-back {
+    font-size: 20px;
+    color: #7958d3;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    user-select: none;
+    margin-right: 100px;
+  }
+
+  .sku-detail-left-back-placeholder {
+    width: 66px;
+    height: 24px;
+    margin-right: 100px;
   }
 
   .product-image {
-    width: 220px;
+    width: 100%;
     height: 124px;
+    flex-shrink: 0; // 关键：不让 flex 把它压小
     border-radius: 8px;
     overflow: hidden;
     display: flex;
@@ -62,8 +151,19 @@
     }
   }
 
+  .sku-detail-left {
+    padding-left: 14px;
+    /**
+     * 让左侧内容成为垂直 flex 容器，便于把底部价格汇总“贴底”
+     * 前提：父级侧边栏容器具备可用高度（PisellProcedure 内部通常已设置）
+     */
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+  }
+
   .sku-detail-right {
-    flex: 1;
     display: flex;
     flex-direction: column;
   }
@@ -71,6 +171,7 @@
   .product-info {
     display: flex;
     flex-direction: row;
+    margin-bottom: 20px;
 
     .product-info-left {
       flex: 1;
@@ -78,9 +179,10 @@
       flex-direction: column;
 
       .product-name {
-        color: var(--00_Pisell-pp, #7f56da);
-        font-size: 20px;
+        color: #1B1B1B;
+        font-size: 14px;
         font-weight: 600;
+        margin-top: 20px;
       }
 
       .product-spec {
@@ -103,7 +205,13 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
+    justify-content: space-around;
+    .quantity-section-title {
+      color: #000;
+      font-size: 14px;
+      font-weight: 600;
+      margin-right: 30px;
+    }
 
     span {
       color: #000;
@@ -113,7 +221,6 @@
   }
 
   .note-section {
-    min-height: 94px;
     margin-top: 8px;
     color: #7f56da;
     font-size: 14px;
@@ -129,7 +236,12 @@
   }
 
   .price-summary-section {
-    margin-top: 16px;
+    /**
+     * 在垂直 flex 布局中将价格汇总推到底部
+     */
+    margin-top: auto;
+    padding-top: 16px;
+    flex-shrink: 0;
 
     .price-item {
       display: flex;
@@ -205,10 +317,13 @@
       margin: 12px 0;
     }
   }
+  .sku-detail-content-footer-confirm-btn {
+    width: 200px;
+  }
 
   .sku-detail-content-footer {
-    margin-top: 32px;
-    margin-bottom: 36px;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -216,7 +331,6 @@
 
     .sku-detail-content-footer-remove-btn {
       width: 120px;
-      height: 48px;
     }
 
     .modal-actions {
@@ -226,7 +340,6 @@
 
       .sku-detail-content-footer-price-btn {
         width: 140px;
-        height: 48px;
 
         .sku-detail-content-footer-price-btn-text {
           width: 100%;
@@ -238,11 +351,6 @@
           line-height: 20px;
         }
       }
-
-      .sku-detail-content-footer-confirm-btn {
-        width: 200px;
-        height: 48px;
-      }
     }
   }
 }

package/lib/pro/skuDetailModal/locales.js

@@ -36,7 +36,18 @@ var locales_default = {
     "pisell2.text.sku.detail.modal.btn.add.note": "Add Note",
     "pisell2.text.sku.detail.modal.btn.remove": "Remove",
     "pisell2.text.sku.detail.modal.btn.confirm": "Confirm",
-    "pisell2.text.sku.detail.modal.btn.manual.price.change": "Manual Price Change"
+    "pisell2.text.sku.detail.modal.btn.manual.price.change": "Manual Price Change",
+    "pisell2.text.sku.detail.modal.btn.close": "Close",
+    "pisell2.text.sku.detail.modal.btn.back": "Back",
+    "pisell2.text.sku.detail.modal.btn.next": "Next",
+    "pisell2.text.sku.detail.modal.step.details": "Details",
+    "pisell2.text.sku.detail.modal.step.select.bundle": "Select Bundle",
+    // Stock alert
+    "pisell2.text.sku.detail.modal.stock.alert.title": "⚠️ Stock Alert",
+    "pisell2.text.sku.detail.modal.stock.alert.desc": "This item is low in stock. You can still add it to your cart.",
+    "pisell2.text.sku.detail.modal.stock.alert.checkbox": "Don’t show again today",
+    "pisell2.text.sku.detail.modal.stock.alert.btn.cancel": "Cancel",
+    "pisell2.text.sku.detail.modal.stock.alert.btn.continue": "Continue"
   },
   "zh-CN": {
     "pisell2.text.sku.detail.modal.quantity": "数量",
@@ -51,7 +62,18 @@ var locales_default = {
     "pisell2.text.sku.detail.modal.btn.add.note": "添加备注",
     "pisell2.text.sku.detail.modal.btn.remove": "删除",
     "pisell2.text.sku.detail.modal.btn.confirm": "确定",
-    "pisell2.text.sku.detail.modal.btn.manual.price.change": "修改价格"
+    "pisell2.text.sku.detail.modal.btn.manual.price.change": "修改价格",
+    "pisell2.text.sku.detail.modal.btn.close": "关闭",
+    "pisell2.text.sku.detail.modal.btn.back": "返回",
+    "pisell2.text.sku.detail.modal.btn.next": "下一步",
+    "pisell2.text.sku.detail.modal.step.details": "详情",
+    "pisell2.text.sku.detail.modal.step.select.bundle": "选择套餐",
+    // Stock alert
+    "pisell2.text.sku.detail.modal.stock.alert.title": "⚠️ 库存提醒",
+    "pisell2.text.sku.detail.modal.stock.alert.desc": "该商品当前库存不足，您仍可将其加入购物车。",
+    "pisell2.text.sku.detail.modal.stock.alert.checkbox": "今天不再提示",
+    "pisell2.text.sku.detail.modal.stock.alert.btn.cancel": "取消",
+    "pisell2.text.sku.detail.modal.stock.alert.btn.continue": "继续加入购物车"
   },
   "zh-HK": {
     "pisell2.text.sku.detail.modal.quantity": "數量",
@@ -66,6 +88,43 @@ var locales_default = {
     "pisell2.text.sku.detail.modal.btn.add.note": "添加備註",
     "pisell2.text.sku.detail.modal.btn.remove": "刪除",
     "pisell2.text.sku.detail.modal.btn.confirm": "確定",
-    "pisell2.text.sku.detail.modal.btn.manual.price.change": "修改價格"
+    "pisell2.text.sku.detail.modal.btn.manual.price.change": "修改價格",
+    "pisell2.text.sku.detail.modal.btn.close": "關閉",
+    "pisell2.text.sku.detail.modal.btn.back": "返回",
+    "pisell2.text.sku.detail.modal.btn.next": "下一步",
+    "pisell2.text.sku.detail.modal.step.details": "詳情",
+    "pisell2.text.sku.detail.modal.step.select.bundle": "選擇套餐",
+    // Stock alert
+    "pisell2.text.sku.detail.modal.stock.alert.title": "⚠️ 庫存提醒",
+    "pisell2.text.sku.detail.modal.stock.alert.desc": "該商品當前庫存不足，您仍可將其加入購物車。",
+    "pisell2.text.sku.detail.modal.stock.alert.checkbox": "今天不再提示",
+    "pisell2.text.sku.detail.modal.stock.alert.btn.cancel": "取消",
+    "pisell2.text.sku.detail.modal.stock.alert.btn.continue": "繼續加入購物車"
+  },
+  "zh-TW": {
+    "pisell2.text.sku.detail.modal.quantity": "數量",
+    "pisell2.text.sku.detail.modal.note": "備註:",
+    "pisell2.text.sku.detail.modal.subtotal": "小計",
+    "pisell2.text.sku.detail.modal.discount": "折扣",
+    "pisell2.text.sku.detail.modal.manual.price.change": "修改價格 ",
+    "pisell2.text.sku.detail.modal.price.override": "一口價",
+    "pisell2.text.sku.detail.modal.total": "總計",
+    "pisell2.text.sku.detail.modal.gst.excl": "未包含稅費",
+    "pisell2.text.sku.detail.modal.gst.incl": "已包含稅費",
+    "pisell2.text.sku.detail.modal.btn.add.note": "添加備註",
+    "pisell2.text.sku.detail.modal.btn.remove": "刪除",
+    "pisell2.text.sku.detail.modal.btn.confirm": "確定",
+    "pisell2.text.sku.detail.modal.btn.manual.price.change": "修改價格",
+    "pisell2.text.sku.detail.modal.btn.close": "關閉",
+    "pisell2.text.sku.detail.modal.btn.back": "返回",
+    "pisell2.text.sku.detail.modal.btn.next": "下一步",
+    "pisell2.text.sku.detail.modal.step.details": "詳情",
+    "pisell2.text.sku.detail.modal.step.select.bundle": "選擇套餐",
+    // Stock alert
+    "pisell2.text.sku.detail.modal.stock.alert.title": "⚠️ 庫存提醒",
+    "pisell2.text.sku.detail.modal.stock.alert.desc": "該商品當前庫存不足，您仍可將其加入購物車。",
+    "pisell2.text.sku.detail.modal.stock.alert.checkbox": "今天不再提示",
+    "pisell2.text.sku.detail.modal.stock.alert.btn.cancel": "取消",
+    "pisell2.text.sku.detail.modal.stock.alert.btn.continue": "繼續加入購物車"
   }
 };

package/lib/pro/skuDetailModal/utils.js

@@ -0,0 +1,42 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pro/skuDetailModal/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  checkSkuStockCanSell: () => checkSkuStockCanSell
+});
+module.exports = __toCommonJS(utils_exports);
+var checkSkuStockCanSell = (sku) => {
+  let canSell = true;
+  let hasStock = true;
+  if ((sku == null ? void 0 : sku.is_track) === 1) {
+    if (Number((sku == null ? void 0 : sku.stock_quantity) || 0) <= 0) {
+      canSell = false;
+      hasStock = false;
+    }
+  } else {
+    canSell = true;
+    hasStock = true;
+  }
+  return { canSell, hasStock };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  checkSkuStockCanSell
+});

package/lib/test/setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/test/setup.js

@@ -0,0 +1,94 @@
+// src/test/setup.ts
+var import_vitest = require("@testing-library/jest-dom/vitest");
+var import_vitest2 = require("vitest");
+import_vitest2.vi.mock("antd", async () => {
+  const actual = await import_vitest2.vi.importActual("antd");
+  return {
+    ...actual,
+    message: {
+      success: import_vitest2.vi.fn(),
+      error: import_vitest2.vi.fn(),
+      warning: import_vitest2.vi.fn(),
+      info: import_vitest2.vi.fn()
+    }
+  };
+});
+import_vitest2.vi.mock("@pisell/utils", () => ({
+  locales: {
+    init: import_vitest2.vi.fn(),
+    getLocale: () => "zh-CN",
+    getText: (key, ...args) => {
+      const mockTexts = {
+        "pisell-login2-check-email-title": "请检查您的邮箱",
+        "pisell-login2-check-phone-title": "请检查您的手机",
+        "pisell-login2-check-email-desc": "我们已向您的邮箱发送了验证码",
+        "pisell-login2-check-phone-desc": "我们已向您的手机发送了验证码",
+        "pisell-login2-no-email-received": "没有收到邮件？",
+        "pisell-login2-no-message-received": "没有收到短信？",
+        "pisell-login2-login-button": "登录",
+        "pisell-login2-back": "返回",
+        "pisell-login2-resend": "重新发送",
+        // Selector 组件相关
+        "pisell2.pro.selector.mode.single": "单选",
+        "pisell2.pro.selector.mode.multiple": "多选",
+        "pisell2.pro.selector.validate.required-msg": "请选择",
+        "pisell2.pro.selector.validate.requireOneOf-msg": "该组必须选择指定集合之一",
+        "pisell2.pro.selector.required-tag": "必选",
+        "pisell2.pro.selector.validate.min-selection": (min) => `至少选择 ${min} 个选项`,
+        "pisell2.pro.selector.validate.max-selection": (max) => `最多选择 ${max} 个选项`,
+        "pisell2.pro.selector.tip.min-max-selection": (min, max) => {
+          const _minText = `至少选择 ${min} 个选项`;
+          const _maxText = `最多选择 ${max} 个选项`;
+          return `${_minText}, ${_maxText}`;
+        }
+      };
+      const text = mockTexts[key];
+      if (typeof text === "function") {
+        return text(...args);
+      }
+      return text || key;
+    }
+  }
+}));
+import_vitest2.vi.mock("../../hooks/useEngineContext", () => ({
+  default: () => ({
+    engine: {
+      get: import_vitest2.vi.fn(),
+      set: import_vitest2.vi.fn()
+    }
+  }),
+  usePisellOS: () => ({
+    engine: {
+      get: import_vitest2.vi.fn(),
+      set: import_vitest2.vi.fn()
+    }
+  })
+}));
+import_vitest2.vi.mock("@pisell/materials", () => ({
+  Iconfont: ({ name, ...props }) => {
+    const React = require("react");
+    return React.createElement("span", { "data-testid": `icon-${name}`, ...props });
+  }
+}));
+import_vitest2.vi.mock("*.less", () => ({}));
+import_vitest2.vi.mock("classnames", () => ({
+  default: (...args) => args.filter(Boolean).join(" ")
+}));
+global.ResizeObserver = import_vitest2.vi.fn().mockImplementation(() => ({
+  observe: import_vitest2.vi.fn(),
+  unobserve: import_vitest2.vi.fn(),
+  disconnect: import_vitest2.vi.fn()
+}));
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: import_vitest2.vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: import_vitest2.vi.fn(),
+    removeListener: import_vitest2.vi.fn(),
+    addEventListener: import_vitest2.vi.fn(),
+    removeEventListener: import_vitest2.vi.fn(),
+    dispatchEvent: import_vitest2.vi.fn()
+  }))
+});

package/lowcode/kiosk-sku-detail/meta.ts

@@ -0,0 +1,129 @@
+
+import type { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const KioskSkuDetailMeta: IPublicTypeComponentMetadata = {
+  componentName: 'KioskSkuDetail',
+  title: 'KioskSkuDetail',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/private-materials',
+    version: '1.0.4',
+    exportName: 'KioskSkuDetail',
+    main: 'src/index.ts',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    props: [
+      {
+        name: 'productId',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'productId',
+            'zh-CN': '商品ID',
+          },
+        },
+        description: '外部传入商品 id，用于拉取商品详情',
+        setter: [
+          { componentName: 'NumberSetter' },
+          { componentName: 'StringSetter' },
+          { componentName: 'VariableSetter' },
+        ],
+      },
+      {
+        name: 'scheduleDate',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'scheduleDate',
+            'zh-CN': '预约日期',
+          },
+        },
+        description: '可选：用于预约类商品报价（如 2025-12-18）',
+        setter: [{ componentName: 'StringSetter' }, { componentName: 'VariableSetter' }],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'className',
+            'zh-CN': '类名',
+          },
+        },
+        name: 'className',
+        setter: 'StringSetter',
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'style',
+            'zh-CN': '样式',
+          },
+        },
+        name: 'style',
+        setter: 'StyleSetter',
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'onBack',
+            'zh-CN': '返回事件',
+          },
+        },
+        name: 'onBack',
+        setter: 'FunctionSetter',
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'onAddToCart',
+            'zh-CN': '加入购物车事件',
+          },
+        },
+        name: 'onAddToCart',
+        setter: 'FunctionSetter',
+      },
+    ],
+    supports: {
+      style: true,
+      // lowcode-types 在不同版本下 events 结构有差异，这里以运行时能力为准并做类型兜底
+      events: [
+        {
+          name: 'onBack',
+          template: "onBack(${extParams}){ console.log('onBack'); }",
+        },
+        {
+          name: 'onAddToCart',
+          template:
+            "onAddToCart(params, ${extParams}){ console.log('onAddToCart', params); }",
+        },
+      ] as any,
+    },
+    component: {
+      isContainer: false,
+    },
+  },
+};
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: 'KioskSkuDetail',
+    screenshot: '',
+    schema: {
+      componentName: 'KioskSkuDetail',
+      props: {
+        productId: 1,
+      },
+    },
+  },
+];
+
+export default {
+  ...KioskSkuDetailMeta,
+  snippets
+};