@pisell/materials 6.11.212 → 6.11.214

package/es/components/pisellRecordBoard/shellFrame/ToolBar/index.js

@@ -156,6 +156,15 @@ var RecordBoardToolBar = function RecordBoardToolBar(props) {
       rest = _objectWithoutProperties(_ref, _excluded2);
     return rest;
   }() : {};
+
+  /** 业务侧 toolBar.search.enableScanner；compact-narrow 仅在 Find 弹层打开时真正订阅 */
+  var searchEnableScannerConfigured = searchConfigRest && _typeof(searchConfigRest) === 'object' && searchConfigRest.enableScanner === true;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFindSearchOpen = _useState4[0],
+    setIsFindSearchOpen = _useState4[1];
+  var searchConfigOnOpen = searchConfigRest === null || searchConfigRest === void 0 ? void 0 : searchConfigRest.onOpen;
+  var searchConfigOnClose = searchConfigRest === null || searchConfigRest === void 0 ? void 0 : searchConfigRest.onClose;
   var searchNode = hideSearch ? null : isCompactNarrow ? /*#__PURE__*/React.createElement(PisellFind, _extends({}, compactNarrowSearchRest, searchDebounceEnabled ? {
     debounceTime: searchDebounceMs
   } : {}, {
@@ -167,7 +176,16 @@ var RecordBoardToolBar = function RecordBoardToolBar(props) {
     className: "record-board-toolbar-find-icon",
     triggerIcon: /*#__PURE__*/React.createElement(SearchOutlined, {
       "aria-label": searchButtonText
-    })
+    }),
+    enableScanner: searchEnableScannerConfigured && isFindSearchOpen,
+    onOpen: function onOpen() {
+      searchConfigOnOpen === null || searchConfigOnOpen === void 0 || searchConfigOnOpen();
+      setIsFindSearchOpen(true);
+    },
+    onClose: function onClose() {
+      searchConfigOnClose === null || searchConfigOnClose === void 0 || searchConfigOnClose();
+      setIsFindSearchOpen(false);
+    }
   })) : /*#__PURE__*/React.createElement(PisellFind, _extends({
     triggerType: "input",
     displayType: "inline",
@@ -249,10 +267,7 @@ var RecordBoardToolBar = function RecordBoardToolBar(props) {
     onChange: function onChange(v) {
       return setBodyView(v);
     },
-    options: bodyViewSegmentedOptions,
-    style: {
-      marginRight: 8
-    }
+    options: bodyViewSegmentedOptions
   }) : null;
 
   /** 平面图 / 日历模式：第二行工具（搜索/筛选等）收起；切换器在业务方 tabs 内（如预约 ScheduleBand） */
@@ -389,9 +404,15 @@ var RecordBoardToolBar = function RecordBoardToolBar(props) {
   var showColumnSetting = slots.columnSetting !== false && bodyView !== 'resourceWall' && Array.isArray(gridColumns) && gridColumns.length > 0;
 
   /**
-   * compact-narrow：列显示 / 排序 / 筛选 / 重置 收入齿轮 Popover；顶栏右侧仅保留搜索图标 + 齿轮。
+   * 收纳到齿轮：compact-narrow 始终收纳；桌面在 `collapseActions==='gear'` 时 opt-in 收纳。
    */
-  var settingsGearPopoverContent = isCompactNarrow ? /*#__PURE__*/React.createElement("div", {
+  var collapseActionsToGear = slots.collapseActions === 'gear';
+  var shouldCollapseToGear = isCompactNarrow || collapseActionsToGear;
+
+  /**
+   * compact-narrow / opt-in：列显示 / 排序 / 筛选 / 重置 收入齿轮 Popover；顶栏右侧仅保留（搜索图标 +）齿轮。
+   */
+  var settingsGearPopoverContent = shouldCollapseToGear ? /*#__PURE__*/React.createElement("div", {
     className: "record-board-toolbar-settings-gear-popover"
   }, showColumnSetting ? /*#__PURE__*/React.createElement("div", {
     className: "record-board-toolbar-settings-gear-row"
@@ -409,7 +430,7 @@ var RecordBoardToolBar = function RecordBoardToolBar(props) {
     trigger: "click",
     placement: "bottomRight",
     arrow: false,
-    overlayClassName: classNames('record-board-toolbar-settings-gear-overlay', isCompactNarrow && 'record-board-toolbar-settings-gear-overlay--compact-narrow')
+    overlayClassName: classNames('record-board-toolbar-settings-gear-overlay', isCompactNarrow && 'record-board-toolbar-settings-gear-overlay--compact-narrow', !isCompactNarrow && collapseActionsToGear && 'record-board-toolbar-settings-gear-overlay--collapsed-actions')
   }, /*#__PURE__*/React.createElement(Button, {
     className: "record-board-toolbar-settings-gear-btn",
     icon: /*#__PURE__*/React.createElement(SettingOutlined, null),
@@ -438,7 +459,10 @@ var RecordBoardToolBar = function RecordBoardToolBar(props) {
   var topRight = compactFloorMapToolbar ? null : isCompactNarrow ? mergeQuickFilterWithCompactTrailing ? (_slots$topRight = slots.topRight) !== null && _slots$topRight !== void 0 ? _slots$topRight : null : /*#__PURE__*/React.createElement(Space, {
     className: "record-board-toolbar-right-actions",
     size: 4
-  }, bodyView !== 'resourceWall' && searchNode ? searchNode : null, settingsGearTrigger, slots.topRight) : /*#__PURE__*/React.createElement(Space, {
+  }, bodyView !== 'resourceWall' && searchNode ? searchNode : null, settingsGearTrigger, slots.topRight) : collapseActionsToGear && settingsGearTrigger ? /*#__PURE__*/React.createElement(Space, {
+    className: "record-board-toolbar-right-actions",
+    size: 8
+  }, settingsGearTrigger, slots.topRight) : /*#__PURE__*/React.createElement(Space, {
     className: "record-board-toolbar-right-actions"
   }, showColumnSetting ? /*#__PURE__*/React.createElement(RecordBoardColumnSetting, null) : null, sortNode, filterNode, bodyView !== 'resourceWall' ? /*#__PURE__*/React.createElement(ToolBarReset, {
     size: barSize

package/es/components/pisellRecordBoard/shellFrame/ToolBar/recordBoardToolbar.less

@@ -20,17 +20,34 @@
   padding-bottom: 0 !important;
 }
 
-/* 表格 / 资源墙：与主内容区左右对齐 16px；平面图、日历不加（日程带全宽） */
+/* 表格 / 资源墙：左右 16px；上下 6px（覆盖 GridPro 默认 padding-bottom: 16px） */
 .pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid,
 .pisell-grid-pro-toolbar.pisell-record-board-toolbar--resource-wall {
-  padding-left: 16px;
-  padding-right: 16px;
+  padding: 6px 16px !important;
+  gap: 4px;
+
+  > .pisell-grid-pro-toolbar-row.toolbar-row,
+  > .toolbar-row {
+    gap: 4px;
+  }
+
+  .toolbar-row-left {
+    gap: 4px;
+    align-items: center;
+  }
+
+  .toolbar-row-right {
+    gap: 4px;
+  }
+
+  .record-board-toolbar-right-actions.ant-space {
+    gap: 4px !important;
+  }
 }
 
 #body .pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid,
 #body .pisell-grid-pro-toolbar.pisell-record-board-toolbar--resource-wall {
-  padding-left: 16px;
-  padding-right: 16px;
+  padding: 6px 16px !important;
 }
 
 /**
@@ -126,29 +143,29 @@
  */
 .pisell-grid-pro-toolbar.pisell-record-board-toolbar--compact {
   // padding-bottom: 8px !important;
-  gap: 6px !important;
+  gap: 4px !important;
 
   > .pisell-grid-pro-toolbar-row.toolbar-row,
   > .toolbar-row {
-    gap: 6px !important;
+    gap: 4px !important;
     align-items: center;
   }
 
   .toolbar-row-left {
     align-items: center !important;
-    gap: 6px !important;
+    gap: 4px !important;
   }
 
   .toolbar-row-right {
-    gap: 6px !important;
+    gap: 4px !important;
   }
 
   .record-board-toolbar-right-actions.ant-space {
-    gap: 6px !important;
+    gap: 4px !important;
   }
 
   .record-board-toolbar-top-left {
-    gap: 6px;
+    gap: 4px;
   }
 
   .pisell-lookup-input-suffix {
@@ -510,6 +527,64 @@
   }
 }
 
+/**
+ * 桌面 opt-in 收纳（collapseActions='gear'）：按钮等宽撑满、收紧上下间距，
+ * 避免默认居中布局在 180px Popover 内两侧/上下留出大量空白。
+ */
+.record-board-toolbar-settings-gear-overlay--collapsed-actions {
+  .ant-popover-inner-content,
+  .pisell-lowcode-popover-inner-content {
+    box-sizing: border-box;
+    width: auto !important;
+    min-width: 120px !important;
+    padding: 6px !important;
+  }
+
+  .record-board-toolbar-settings-gear-popover {
+    gap: 6px;
+    width: 100%;
+    align-items: stretch;
+  }
+
+  .record-board-toolbar-settings-gear-row {
+    width: 100%;
+    gap: 6px;
+  }
+
+  /** Sort / Filter / Reset：等宽铺满，去掉两侧空白 */
+  .record-board-toolbar-settings-gear-row:has(.record-board-toolbar-filter-btn),
+  .record-board-toolbar-settings-gear-row:has(.record-board-toolbar-reset) {
+    justify-content: stretch;
+
+    > * {
+      display: block;
+      width: 100%;
+      min-width: 0;
+    }
+  }
+
+  .record-board-toolbar-filter-btn,
+  .record-board-toolbar-filter-btn.ant-btn,
+  .record-board-toolbar-filter-btn.pisell-lowcode-btn,
+  .record-board-toolbar-reset,
+  .record-board-toolbar-reset.ant-btn,
+  .record-board-toolbar-reset.pisell-lowcode-btn {
+    box-sizing: border-box;
+    width: 100% !important;
+    min-width: 0 !important;
+    min-height: 36px !important;
+    height: auto !important;
+    padding: 6px 10px !important;
+    justify-content: center;
+
+    &.pisell-lowcode-btn-lg,
+    &.ant-btn-lg {
+      min-height: 36px !important;
+      padding: 6px 10px !important;
+    }
+  }
+}
+
 .record-board-toolbar-settings-gear-popover {
   display: flex;
   flex-direction: column;

package/es/components/pisellRecordBoard/shellFrame/index.js

@@ -270,6 +270,7 @@ var RecordBoardShellFrame = function RecordBoardShellFrame(_ref2) {
     className: classNames(className, {
       /** 非表格主区：工具栏与内容区无缝（与 PisellShellFrame.less body-subview 配对） */
       'pisell-shell-frame--body-subview': !showGrid,
+      'pisell-shell-frame--grid-view': showGrid,
       'pisell-shell-frame--floor-map-view': showFloorMap,
       'pisell-shell-frame--calendar-view': showCalendar,
       'pisell-shell-frame--resource-wall-view': showResourceWall

package/es/components/pisellRecordBoard/types.d.ts

@@ -707,6 +707,13 @@ export interface RecordBoardToolBarProps {
      * 以便快筛按钮换行后图标组与**最后一行**快筛右缘对齐（HUD 抽屉等极窄场景）。
      */
     mergeCompactNarrowTrailingWithQuickFilterRow?: boolean;
+    /**
+     * 桌面（非 compact-narrow）下把右侧操作区（列显示 / 排序 / 筛选 / 重置）收进一个齿轮按钮的 Popover，
+     * 复用 compact-narrow 的齿轮机制以节省顶栏宽度。opt-in，默认平铺。
+     * `compact-narrow` 始终强制收纳，不受此项影响。
+     * @default undefined
+     */
+    collapseActions?: 'gear';
 }
 /** Search 透传配置，与 PisellFind 的 props 对齐 */
 export declare type RecordBoardSearchProps = Record<string, any>;

package/es/components/pisellShellFrame/PisellShellFrame.less

@@ -45,6 +45,11 @@
     margin-bottom: 0;
   }
 
+  /** 表格主区：垂直间距由 GridPro 工具栏 padding 6px 承担，不再叠加 shell margin */
+  &--grid-view &-toolbar {
+    margin-bottom: 0;
+  }
+
   /**
    * 工具栏正下方的「附加条」：默认与 toolbar 留 8px 缝隙，让插入的轻量摘要
    * 与 toolbar 视觉上分开但不破坏顶栏整体节奏。空内容时塌陷不占位。

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.js

@@ -52,6 +52,8 @@ export var PisellTimeRangeDisplay = function PisellTimeRangeDisplay(props) {
     durationFormat = props.durationFormat,
     containerStyle = props.containerStyle,
     timeStyle = props.timeStyle,
+    startTimeStyle = props.startTimeStyle,
+    endTimeStyle = props.endTimeStyle,
     dateStyle = props.dateStyle,
     weekdayStyle = props.weekdayStyle,
     durationStyle = props.durationStyle,
@@ -123,8 +125,11 @@ export var PisellTimeRangeDisplay = function PisellTimeRangeDisplay(props) {
           timeFormat: timeFormat,
           dateFormat: effectiveDateFormat,
           weekdayFormat: weekdayFormat,
+          showWeekdayInCrossDay: showWeekday,
           referenceDate: dayjs(),
-          style: timeStyle
+          style: timeStyle,
+          startStyle: startTimeStyle,
+          endStyle: endTimeStyle
         }) : null;
       case 'date':
         if (!showDate) return null;

package/es/components/pisellTimeRangeDisplay/components/TimeRangeBlock.js

@@ -1,21 +1,32 @@
+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 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); }
 import React from 'react';
 import dayjs from 'dayjs';
-import { formatTime, getDatePartDisplay } from "../utils";
+import { formatDate, formatTime, getDatePartDisplay } from "../utils";
 /**
  * 时间区间展示块
  * - 同一天：HH:mm-HH:mm
  * - 跨天：起止完整日期时间；若某端为相对日（今天/昨天/明天）则只显示「时间 相对日」，不显示星期+日期
  */
 export var TimeRangeBlock = function TimeRangeBlock(_ref) {
+  var _startStyle$fontSize, _startStyle$fontWeigh, _startStyle$color, _startStyle$lineHeigh, _endStyle$fontSize, _endStyle$fontWeight, _endStyle$color, _endStyle$lineHeight, _dateFormat$showYear;
   var start = _ref.start,
     end = _ref.end,
     isSameDay = _ref.isSameDay,
     timeFormat = _ref.timeFormat,
     dateFormat = _ref.dateFormat,
     weekdayFormat = _ref.weekdayFormat,
+    _ref$showWeekdayInCro = _ref.showWeekdayInCrossDay,
+    showWeekdayInCrossDay = _ref$showWeekdayInCro === void 0 ? true : _ref$showWeekdayInCro,
     _ref$referenceDate = _ref.referenceDate,
     referenceDate = _ref$referenceDate === void 0 ? dayjs() : _ref$referenceDate,
     style = _ref.style,
+    startStyle = _ref.startStyle,
+    endStyle = _ref.endStyle,
     className = _ref.className;
   var inlineStyle = {
     fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
@@ -23,6 +34,18 @@ export var TimeRangeBlock = function TimeRangeBlock(_ref) {
     color: style === null || style === void 0 ? void 0 : style.color,
     lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
   };
+  var startInlineStyle = _objectSpread(_objectSpread({}, inlineStyle), {}, {
+    fontSize: (_startStyle$fontSize = startStyle === null || startStyle === void 0 ? void 0 : startStyle.fontSize) !== null && _startStyle$fontSize !== void 0 ? _startStyle$fontSize : inlineStyle.fontSize,
+    fontWeight: (_startStyle$fontWeigh = startStyle === null || startStyle === void 0 ? void 0 : startStyle.fontWeight) !== null && _startStyle$fontWeigh !== void 0 ? _startStyle$fontWeigh : inlineStyle.fontWeight,
+    color: (_startStyle$color = startStyle === null || startStyle === void 0 ? void 0 : startStyle.color) !== null && _startStyle$color !== void 0 ? _startStyle$color : inlineStyle.color,
+    lineHeight: (_startStyle$lineHeigh = startStyle === null || startStyle === void 0 ? void 0 : startStyle.lineHeight) !== null && _startStyle$lineHeigh !== void 0 ? _startStyle$lineHeigh : inlineStyle.lineHeight
+  });
+  var endInlineStyle = _objectSpread(_objectSpread({}, inlineStyle), {}, {
+    fontSize: (_endStyle$fontSize = endStyle === null || endStyle === void 0 ? void 0 : endStyle.fontSize) !== null && _endStyle$fontSize !== void 0 ? _endStyle$fontSize : inlineStyle.fontSize,
+    fontWeight: (_endStyle$fontWeight = endStyle === null || endStyle === void 0 ? void 0 : endStyle.fontWeight) !== null && _endStyle$fontWeight !== void 0 ? _endStyle$fontWeight : inlineStyle.fontWeight,
+    color: (_endStyle$color = endStyle === null || endStyle === void 0 ? void 0 : endStyle.color) !== null && _endStyle$color !== void 0 ? _endStyle$color : inlineStyle.color,
+    lineHeight: (_endStyle$lineHeight = endStyle === null || endStyle === void 0 ? void 0 : endStyle.lineHeight) !== null && _endStyle$lineHeight !== void 0 ? _endStyle$lineHeight : inlineStyle.lineHeight
+  });
   if (isSameDay) {
     var startStr = formatTime(start, timeFormat);
     var endStr = formatTime(end, timeFormat);
@@ -31,14 +54,17 @@ export var TimeRangeBlock = function TimeRangeBlock(_ref) {
       className: "pisell-time-range-display-time ".concat(className || '').trim(),
       style: inlineStyle
     }, /*#__PURE__*/React.createElement("span", {
-      className: "pisell-time-range-display-time-start"
+      className: "pisell-time-range-display-time-start",
+      style: startInlineStyle
     }, startStr), /*#__PURE__*/React.createElement("span", {
       className: "pisell-time-range-display-time-end-wrap"
     }, /*#__PURE__*/React.createElement("span", {
       className: "pisell-time-range-display-time-sep",
+      style: inlineStyle,
       "aria-hidden": true
     }, " - "), /*#__PURE__*/React.createElement("span", {
-      className: "pisell-time-range-display-time-end"
+      className: "pisell-time-range-display-time-end",
+      style: endInlineStyle
     }, endStr)));
   }
 
@@ -47,27 +73,27 @@ export var TimeRangeBlock = function TimeRangeBlock(_ref) {
   var dateFormatOverride = {
     order: 'DMY',
     shortMonth: true,
-    showYear: isCrossYear,
+    showYear: (_dateFormat$showYear = dateFormat === null || dateFormat === void 0 ? void 0 : dateFormat.showYear) !== null && _dateFormat$showYear !== void 0 ? _dateFormat$showYear : isCrossYear,
     showMonth: true,
     showDay: true,
     useCommaBeforeYear: false
   };
   var startTimeStr = formatTime(start, timeFormat);
   var endTimeStr = formatTime(end, timeFormat);
-  var startDatePart = getDatePartDisplay({
-    date: start,
-    dateFormat: dateFormat,
-    weekdayFormat: weekdayFormat,
-    referenceDate: referenceDate,
-    dateFormatOverride: dateFormatOverride
-  });
-  var endDatePart = getDatePartDisplay({
-    date: end,
-    dateFormat: dateFormat,
-    weekdayFormat: weekdayFormat,
-    referenceDate: referenceDate,
-    dateFormatOverride: dateFormatOverride
-  });
+  var getCrossDayDatePart = function getCrossDayDatePart(date) {
+    if (!showWeekdayInCrossDay) {
+      return formatDate(date, _objectSpread(_objectSpread({}, dateFormat), dateFormatOverride));
+    }
+    return getDatePartDisplay({
+      date: date,
+      dateFormat: dateFormat,
+      weekdayFormat: weekdayFormat,
+      referenceDate: referenceDate,
+      dateFormatOverride: dateFormatOverride
+    });
+  };
+  var startDatePart = getCrossDayDatePart(start);
+  var endDatePart = getCrossDayDatePart(end);
   var startPart = "".concat(startTimeStr, " ").concat(startDatePart);
   var endPart = "".concat(endTimeStr, " ").concat(endDatePart);
 
@@ -76,11 +102,18 @@ export var TimeRangeBlock = function TimeRangeBlock(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     key: "time-start",
     className: "".concat(timeClass, " ").concat(className || '').trim(),
-    style: inlineStyle
+    style: startInlineStyle
   }, startPart), /*#__PURE__*/React.createElement("span", {
     key: "time-end",
     className: "".concat(timeClass, " ").concat(className || '').trim(),
     style: inlineStyle
-  }, ' - ', endPart));
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "pisell-time-range-display-time-cross-sep",
+    style: inlineStyle,
+    "aria-hidden": true
+  }, ' - '), /*#__PURE__*/React.createElement("span", {
+    className: "pisell-time-range-display-time-cross-end",
+    style: endInlineStyle
+  }, endPart)));
 };
 export default TimeRangeBlock;

package/es/components/productCard/lineItem/BookingLineItem.js

@@ -1,18 +1,22 @@
 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); }
-var _excluded = ["dataSource", "type", "cartSkuType", "isShowBookingHeader", "relatedProductDataSource", "rightActions", "escapeDom", "isShowImage", "isFormSubject", "isShowDelete", "isShowNote", "isShowAmountFooter", "disabledClick", "disabledEdit", "statusOptions", "statusLoading", "statusDisabled", "isShowRelatedProduct", "holderOptions", "onBookingStatusChange", "onAction", "onDelete", "onNote", "onCard", "onPromotion", "onGift"];
+var _excluded = ["dataSource", "type", "cartSkuType", "isShowBookingHeader", "relatedProductDataSource", "addTimeProductDataSources", "rightActions", "escapeDom", "isShowImage", "isFormSubject", "isShowDelete", "isShowNote", "isShowAmountFooter", "disabledClick", "disabledEdit", "statusOptions", "statusLoading", "statusDisabled", "isShowRelatedProduct", "holderOptions", "onBookingStatusChange", "onAction", "onDelete", "onNote", "onCard", "onPromotion", "onGift"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 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; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { Button, Divider, Dropdown } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
@@ -32,6 +36,7 @@ import Holders from "./components/Holders";
 import Iconfont from "../../iconfont";
 import useEngineContext from "../../../hooks/useEngineContext";
 var PREFIX = 'pisell-line-item';
+var ADD_TIME_PRODUCTS_PREVIEW_COUNT = 2;
 var DEFAULT_STATUS_COLOR = '#91caff';
 var getStatusOption = function getStatusOption(status) {
   var statusOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -75,6 +80,8 @@ var BookingLineItem = function BookingLineItem(props) {
     cartSkuType = props.cartSkuType,
     isShowBookingHeader = props.isShowBookingHeader,
     relatedProductDataSource = props.relatedProductDataSource,
+    _props$addTimeProduct = props.addTimeProductDataSources,
+    addTimeProductDataSources = _props$addTimeProduct === void 0 ? [] : _props$addTimeProduct,
     _props$rightActions = props.rightActions,
     rightActions = _props$rightActions === void 0 ? [] : _props$rightActions,
     escapeDom = props.escapeDom,
@@ -103,6 +110,10 @@ var BookingLineItem = function BookingLineItem(props) {
     onGift = props.onGift,
     other = _objectWithoutProperties(props, _excluded);
   var context = useEngineContext();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAddTimeProductsExpanded = _useState2[0],
+    setIsAddTimeProductsExpanded = _useState2[1];
   var translationOriginal = context.appHelper.utils.translationOriginal;
   var locale = ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut.getApp) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.call(_context$appHelper$ut)) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.locales) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut3 = _context$appHelper$ut2.getLocale) === null || _context$appHelper$ut3 === void 0 ? void 0 : _context$appHelper$ut3.call(_context$appHelper$ut2)) || ((_context$appHelper$ut4 = context.appHelper.utils) === null || _context$appHelper$ut4 === void 0 || (_context$appHelper$ut4 = _context$appHelper$ut4.storage) === null || _context$appHelper$ut4 === void 0 ? void 0 : _context$appHelper$ut4.get('umi_locale')) || 'en-US';
   var isShowAction = dataSource.isShowAction,
@@ -157,16 +168,18 @@ var BookingLineItem = function BookingLineItem(props) {
     })) : null;
   };
   var renderStatusButton = function renderStatusButton() {
-    return /*#__PURE__*/React.createElement(Button, {
-      className: "".concat(PREFIX, "__status"),
-      htmlType: "button",
-      disabled: !canChangeStatus,
-      loading: statusLoading,
+    var statusButtonProps = {
       onClick: function onClick(e) {
         e.preventDefault();
         e.stopPropagation();
       }
-    }, /*#__PURE__*/React.createElement("span", {
+    };
+    return /*#__PURE__*/React.createElement(Button, _extends({
+      className: "".concat(PREFIX, "__status"),
+      htmlType: "button",
+      disabled: !canChangeStatus,
+      loading: statusLoading
+    }, statusButtonProps), /*#__PURE__*/React.createElement("span", {
       className: "".concat(PREFIX, "__status-label")
     }, currentStatus.label), canChangeStatus ? /*#__PURE__*/React.createElement(DownOutlined, null) : null);
   };
@@ -176,6 +189,73 @@ var BookingLineItem = function BookingLineItem(props) {
       return onPromotion === null || onPromotion === void 0 ? void 0 : onPromotion(item);
     }
   }) : null;
+  var renderProductCard = function renderProductCard(productDataSource, source) {
+    var _productDataSource$pr;
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    if (!productDataSource || productDataSource !== null && productDataSource !== void 0 && productDataSource.isGift) return null;
+    var _options$showProductP = options.showProductPromotion,
+      showProductPromotion = _options$showProductP === void 0 ? true : _options$showProductP;
+    var productPromotion = productDataSource !== null && productDataSource !== void 0 && (_productDataSource$pr = productDataSource.promotions) !== null && _productDataSource$pr !== void 0 && _productDataSource$pr.length ? /*#__PURE__*/React.createElement(Promotion, {
+      promotions: productDataSource.promotions,
+      onClick: function onClick(item) {
+        return onPromotion === null || onPromotion === void 0 ? void 0 : onPromotion(item);
+      }
+    }) : null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BasicInfo, {
+      isShowImage: isShowImage,
+      dataSource: productDataSource,
+      type: cartSkuType,
+      maxSpecsCount: props.maxSpecsCount || 1
+    }), /*#__PURE__*/React.createElement(Packages, {
+      dataSource: productDataSource,
+      isShowImage: isShowImage,
+      type: cartSkuType
+    }), isShowAmountFooter ? /*#__PURE__*/React.createElement(AmountFooter, {
+      item: productDataSource,
+      hideDivider: false,
+      type: "total"
+    }) : null, showProductPromotion ? productPromotion : null, isShowNote ? /*#__PURE__*/React.createElement(Note, _extends({}, other, {
+      item: productDataSource,
+      disabledEdit: disabledEdit,
+      openNote: function openNote() {
+        return onNote === null || onNote === void 0 ? void 0 : onNote(source);
+      }
+    })) : null);
+  };
+  var renderAddTimeProducts = function renderAddTimeProducts() {
+    var displayAddTimeProducts = addTimeProductDataSources.filter(function (item) {
+      return item && !item.isGift;
+    });
+    if (displayAddTimeProducts.length === 0) return null;
+    var shouldCollapse = displayAddTimeProducts.length > ADD_TIME_PRODUCTS_PREVIEW_COUNT;
+    var visibleAddTimeProducts = isAddTimeProductsExpanded ? displayAddTimeProducts : displayAddTimeProducts.slice(0, ADD_TIME_PRODUCTS_PREVIEW_COUNT);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+      style: {
+        margin: 0
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "__add-time-products")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "__section-title")
+    }, locales.getText('pisell2.line-item.add-time-products')), visibleAddTimeProducts.map(function (item, index) {
+      var _ref3, _item$_id;
+      var key = (_ref3 = (_item$_id = item === null || item === void 0 ? void 0 : item._id) !== null && _item$_id !== void 0 ? _item$_id : item === null || item === void 0 ? void 0 : item.id) !== null && _ref3 !== void 0 ? _ref3 : index;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(PREFIX, "__add-time-product-card"),
+        key: "".concat(key)
+      }, renderProductCard(item, item));
+    }), shouldCollapse ? /*#__PURE__*/React.createElement("button", {
+      className: "".concat(PREFIX, "__add-time-products-toggle"),
+      type: "button",
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsAddTimeProductsExpanded(function (expanded) {
+          return !expanded;
+        });
+      }
+    }, locales.getText(isAddTimeProductsExpanded ? 'pisell2.line-item.collapse' : 'pisell2.line-item.show-all')) : null));
+  };
   if (dataSource !== null && dataSource !== void 0 && dataSource.isGift) return null;
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-wrapper-container")
@@ -206,8 +286,8 @@ var BookingLineItem = function BookingLineItem(props) {
   }, canChangeStatus ? /*#__PURE__*/React.createElement(Dropdown, {
     menu: {
       items: statusMenuItems,
-      onClick: function onClick(_ref3) {
-        var key = _ref3.key;
+      onClick: function onClick(_ref4) {
+        var key = _ref4.key;
         return onBookingStatusChange === null || onBookingStatusChange === void 0 ? void 0 : onBookingStatusChange(String(key), dataSource);
       }
     },
@@ -232,31 +312,14 @@ var BookingLineItem = function BookingLineItem(props) {
     className: "".concat(PREFIX, "__related-product")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "__related-product-card")
-  }, /*#__PURE__*/React.createElement(BasicInfo, {
-    isShowImage: isShowImage,
-    dataSource: relatedProductDataSource,
-    type: cartSkuType,
-    maxSpecsCount: props.maxSpecsCount || 1
-  }), /*#__PURE__*/React.createElement(Packages, {
-    dataSource: relatedProductDataSource,
-    isShowImage: isShowImage,
-    type: cartSkuType
-  }), isShowAmountFooter ? /*#__PURE__*/React.createElement(AmountFooter, {
-    item: relatedProductDataSource,
-    hideDivider: false,
-    type: "total"
-  }) : null, renderPromotion, isShowNote ? /*#__PURE__*/React.createElement(Note, _extends({}, other, {
-    item: relatedProductDataSource,
-    disabledEdit: disabledEdit,
-    openNote: function openNote() {
-      return onNote === null || onNote === void 0 ? void 0 : onNote(dataSource);
-    }
-  })) : null, isShowAction && actionText ? /*#__PURE__*/React.createElement(Action, {
+  }, renderProductCard(relatedProductDataSource, dataSource, {
+    showProductPromotion: false
+  }), renderPromotion, isShowAction && actionText ? /*#__PURE__*/React.createElement(Action, {
     item: dataSource,
     onAction: function onAction() {
       return _onAction === null || _onAction === void 0 ? void 0 : _onAction(dataSource);
     }
-  }) : null))) : null)), /*#__PURE__*/React.createElement(Gift, _extends({}, (dataSource === null || dataSource === void 0 ? void 0 : dataSource.giftData) || {}, {
+  }) : null))) : null, renderAddTimeProducts())), /*#__PURE__*/React.createElement(Gift, _extends({}, (dataSource === null || dataSource === void 0 ? void 0 : dataSource.giftData) || {}, {
     onClick: function onClick() {
       return onGift === null || onGift === void 0 ? void 0 : onGift(dataSource);
     }