@pisell/private-materials 6.2.35 → 6.2.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (177) hide show
  1. package/build/lowcode/assets-daily.json +11 -11
  2. package/build/lowcode/assets-dev.json +2 -2
  3. package/build/lowcode/assets-prod.json +11 -11
  4. package/build/lowcode/index.js +1 -1
  5. package/build/lowcode/meta.js +1 -1
  6. package/build/lowcode/preview.js +13 -29
  7. package/build/lowcode/render/default/view.css +1 -1
  8. package/build/lowcode/render/default/view.js +6 -6
  9. package/build/lowcode/view.css +1 -1
  10. package/build/lowcode/view.js +8 -8
  11. package/es/components/appointmentBooking/components/Content/index.js +1 -1
  12. package/es/components/appointmentBooking/components/Content/index.less +3 -3
  13. package/es/components/appointmentBooking/components/Services/index.js +2 -2
  14. package/es/components/appointmentBooking/index.js +8 -2
  15. package/es/components/booking/components/voucher/index.js +5 -0
  16. package/es/components/booking/deposit/ClientItem/index.js +1 -1
  17. package/es/components/booking/deposit/DepositItem/index.js +1 -1
  18. package/es/components/booking/forms/single/RenderValueById.d.ts +1 -0
  19. package/es/components/booking/forms/single/RenderValueById.js +68 -17
  20. package/es/components/booking/forms/single/index.less +67 -1
  21. package/es/components/booking/hooks/useQuotation.js +1 -1
  22. package/es/components/booking/info/clientVariant/utils.d.ts +2 -0
  23. package/es/components/booking/info/clientVariant/utils.js +7 -0
  24. package/es/components/booking/info/clientVariant/vertical/index.js +3 -2
  25. package/es/components/booking/info2/service/addService/utils.js +2 -1
  26. package/es/components/booking/info2/service/addTimeModal/index.js +0 -1
  27. package/es/components/booking/info2/service/editService/index.js +37 -29
  28. package/es/components/booking/info2/utilsByBooking.js +4 -4
  29. package/es/components/booking/locales.d.ts +3 -0
  30. package/es/components/booking/locales.js +6 -3
  31. package/es/components/booking/materiels/duration/index.js +1 -1
  32. package/es/components/booking/materiels/startTime/index.d.ts +1 -0
  33. package/es/components/booking/materiels/startTime/index.js +1 -1
  34. package/es/components/booking/utils.js +3 -3
  35. package/es/components/eftposPay/amount.d.ts +1 -1
  36. package/es/components/eftposPay/device.d.ts +1 -1
  37. package/es/components/eftposPay/store/index.d.ts +3 -3
  38. package/es/components/eventBooking/index.js +8 -1
  39. package/es/components/productSelect/components/TabProduct/index.js +7 -2
  40. package/es/components/schedules/utils.d.ts +1 -1
  41. package/es/components/shoppingCart/components/Cart/Product.js +2 -1
  42. package/es/components/ticketBooking/components/addServiceVariant/addService.js +172 -91
  43. package/es/components/ticketBooking/components/timeBar/index.js +3 -3
  44. package/es/components/ticketBooking/utils/index.d.ts +3 -1
  45. package/es/components/ticketBooking/utils/index.js +18 -2
  46. package/es/hooks/useWindowSize.js +8 -1
  47. package/es/plus/productSelect/CategoryTabs/CategorySkeleton.d.ts +10 -0
  48. package/es/plus/productSelect/CategoryTabs/CategorySkeleton.js +29 -0
  49. package/es/plus/productSelect/CategoryTabs/CategorySkeleton.less +30 -0
  50. package/es/plus/productSelect/CategoryTabs/index.d.ts +18 -0
  51. package/es/plus/productSelect/CategoryTabs/index.js +171 -0
  52. package/es/plus/productSelect/ProductCard/ProductCardSkeleton.d.ts +10 -0
  53. package/es/plus/productSelect/ProductCard/ProductCardSkeleton.js +37 -0
  54. package/es/plus/productSelect/ProductCard/ProductCardSkeleton.less +81 -0
  55. package/es/plus/productSelect/ProductCard/index.d.ts +45 -0
  56. package/es/plus/productSelect/ProductCard/index.js +170 -0
  57. package/es/plus/productSelect/ProductCard/index.less +270 -0
  58. package/es/plus/productSelect/ProductList/gridComponents.d.ts +44 -0
  59. package/es/plus/productSelect/ProductList/gridComponents.js +149 -0
  60. package/es/plus/productSelect/ProductList/index.d.ts +22 -0
  61. package/es/plus/productSelect/ProductList/index.js +72 -0
  62. package/es/plus/productSelect/ProductList/index.less +0 -0
  63. package/es/plus/productSelect/components/IntersectionObserver.d.ts +42 -0
  64. package/es/plus/productSelect/components/IntersectionObserver.js +276 -0
  65. package/es/plus/productSelect/components/TabsStructure/TabsStructure.d.ts +30 -0
  66. package/es/plus/productSelect/components/TabsStructure/TabsStructure.js +357 -0
  67. package/es/plus/productSelect/components/TabsStructure/TabsStructure.less +224 -0
  68. package/es/plus/productSelect/components/TabsStructure/hooks.d.ts +22 -0
  69. package/es/plus/productSelect/components/TabsStructure/hooks.js +243 -0
  70. package/es/plus/productSelect/components/TabsStructure/index.d.ts +5 -0
  71. package/es/plus/productSelect/components/TabsStructure/index.js +13 -0
  72. package/es/plus/productSelect/components/TabsStructure/styles.d.ts +47 -0
  73. package/es/plus/productSelect/components/TabsStructure/styles.js +87 -0
  74. package/es/plus/productSelect/components/TabsStructure/types.d.ts +105 -0
  75. package/es/plus/productSelect/components/TabsStructure/types.js +1 -0
  76. package/es/plus/productSelect/components/TabsStructure/utils.d.ts +12 -0
  77. package/es/plus/productSelect/components/TabsStructure/utils.js +56 -0
  78. package/es/plus/productSelect/components/pisellPriceText/index.d.ts +11 -0
  79. package/es/plus/productSelect/components/pisellPriceText/index.js +43 -0
  80. package/es/plus/productSelect/hooks/useToken.d.ts +18 -0
  81. package/es/plus/productSelect/hooks/useToken.js +34 -0
  82. package/es/plus/productSelect/index.d.ts +31 -0
  83. package/es/plus/productSelect/index.js +270 -0
  84. package/es/plus/productSelect/index.less +56 -0
  85. package/es/plus/productSelect/locales.d.ts +18 -0
  86. package/es/plus/productSelect/locales.js +17 -0
  87. package/es/plus/productSelect/theme/token.d.ts +17 -0
  88. package/es/plus/productSelect/theme/token.js +19 -0
  89. package/es/plus/productSelect/utils.d.ts +39 -0
  90. package/es/plus/productSelect/utils.js +162 -0
  91. package/es/pro/pisellNumberSelector/index.js +3 -3
  92. package/es/pro/pisellPhoneKeyboard/index.js +1 -1
  93. package/es/utils/index.d.ts +1 -1
  94. package/lib/components/appointmentBooking/components/Content/index.js +1 -1
  95. package/lib/components/appointmentBooking/components/Content/index.less +3 -3
  96. package/lib/components/appointmentBooking/components/Services/index.js +2 -2
  97. package/lib/components/appointmentBooking/index.js +6 -1
  98. package/lib/components/booking/components/voucher/index.js +5 -0
  99. package/lib/components/booking/deposit/ClientItem/index.js +1 -1
  100. package/lib/components/booking/deposit/DepositItem/index.js +1 -1
  101. package/lib/components/booking/forms/single/RenderValueById.d.ts +1 -0
  102. package/lib/components/booking/forms/single/RenderValueById.js +37 -9
  103. package/lib/components/booking/forms/single/index.less +67 -1
  104. package/lib/components/booking/hooks/useQuotation.js +1 -1
  105. package/lib/components/booking/info/clientVariant/utils.d.ts +2 -0
  106. package/lib/components/booking/info/clientVariant/utils.js +13 -2
  107. package/lib/components/booking/info/clientVariant/vertical/index.js +7 -6
  108. package/lib/components/booking/info2/service/addService/utils.js +3 -3
  109. package/lib/components/booking/info2/service/addTimeModal/index.js +0 -1
  110. package/lib/components/booking/info2/service/editService/index.js +22 -12
  111. package/lib/components/booking/info2/utilsByBooking.js +7 -8
  112. package/lib/components/booking/locales.d.ts +3 -0
  113. package/lib/components/booking/locales.js +6 -3
  114. package/lib/components/booking/materiels/duration/index.js +1 -1
  115. package/lib/components/booking/materiels/startTime/index.d.ts +1 -0
  116. package/lib/components/booking/materiels/startTime/index.js +1 -1
  117. package/lib/components/booking/utils.js +3 -3
  118. package/lib/components/eftposPay/amount.d.ts +1 -1
  119. package/lib/components/eftposPay/device.d.ts +1 -1
  120. package/lib/components/eftposPay/store/index.d.ts +3 -3
  121. package/lib/components/eventBooking/index.js +6 -1
  122. package/lib/components/productSelect/components/TabProduct/index.js +7 -1
  123. package/lib/components/schedules/utils.d.ts +1 -1
  124. package/lib/components/shoppingCart/components/Cart/Product.js +7 -4
  125. package/lib/components/ticketBooking/components/addServiceVariant/addService.js +87 -14
  126. package/lib/components/ticketBooking/components/timeBar/index.js +89 -70
  127. package/lib/components/ticketBooking/utils/index.d.ts +3 -1
  128. package/lib/components/ticketBooking/utils/index.js +21 -0
  129. package/lib/hooks/useWindowSize.js +6 -1
  130. package/lib/plus/productSelect/CategoryTabs/CategorySkeleton.d.ts +10 -0
  131. package/lib/plus/productSelect/CategoryTabs/CategorySkeleton.js +62 -0
  132. package/lib/plus/productSelect/CategoryTabs/CategorySkeleton.less +30 -0
  133. package/lib/plus/productSelect/CategoryTabs/index.d.ts +18 -0
  134. package/lib/plus/productSelect/CategoryTabs/index.js +183 -0
  135. package/lib/plus/productSelect/ProductCard/ProductCardSkeleton.d.ts +10 -0
  136. package/lib/plus/productSelect/ProductCard/ProductCardSkeleton.js +58 -0
  137. package/lib/plus/productSelect/ProductCard/ProductCardSkeleton.less +81 -0
  138. package/lib/plus/productSelect/ProductCard/index.d.ts +45 -0
  139. package/lib/plus/productSelect/ProductCard/index.js +184 -0
  140. package/lib/plus/productSelect/ProductCard/index.less +270 -0
  141. package/lib/plus/productSelect/ProductList/gridComponents.d.ts +44 -0
  142. package/lib/plus/productSelect/ProductList/gridComponents.js +148 -0
  143. package/lib/plus/productSelect/ProductList/index.d.ts +22 -0
  144. package/lib/plus/productSelect/ProductList/index.js +86 -0
  145. package/lib/plus/productSelect/ProductList/index.less +0 -0
  146. package/lib/plus/productSelect/components/IntersectionObserver.d.ts +42 -0
  147. package/lib/plus/productSelect/components/IntersectionObserver.js +269 -0
  148. package/lib/plus/productSelect/components/TabsStructure/TabsStructure.d.ts +30 -0
  149. package/lib/plus/productSelect/components/TabsStructure/TabsStructure.js +393 -0
  150. package/lib/plus/productSelect/components/TabsStructure/TabsStructure.less +224 -0
  151. package/lib/plus/productSelect/components/TabsStructure/hooks.d.ts +22 -0
  152. package/lib/plus/productSelect/components/TabsStructure/hooks.js +209 -0
  153. package/lib/plus/productSelect/components/TabsStructure/index.d.ts +5 -0
  154. package/lib/plus/productSelect/components/TabsStructure/index.js +92 -0
  155. package/lib/plus/productSelect/components/TabsStructure/styles.d.ts +47 -0
  156. package/lib/plus/productSelect/components/TabsStructure/styles.js +122 -0
  157. package/lib/plus/productSelect/components/TabsStructure/types.d.ts +105 -0
  158. package/lib/plus/productSelect/components/TabsStructure/types.js +17 -0
  159. package/lib/plus/productSelect/components/TabsStructure/utils.d.ts +12 -0
  160. package/lib/plus/productSelect/components/TabsStructure/utils.js +72 -0
  161. package/lib/plus/productSelect/components/pisellPriceText/index.d.ts +11 -0
  162. package/lib/plus/productSelect/components/pisellPriceText/index.js +72 -0
  163. package/lib/plus/productSelect/hooks/useToken.d.ts +18 -0
  164. package/lib/plus/productSelect/hooks/useToken.js +50 -0
  165. package/lib/plus/productSelect/index.d.ts +31 -0
  166. package/lib/plus/productSelect/index.js +299 -0
  167. package/lib/plus/productSelect/index.less +56 -0
  168. package/lib/plus/productSelect/locales.d.ts +18 -0
  169. package/lib/plus/productSelect/locales.js +41 -0
  170. package/lib/plus/productSelect/theme/token.d.ts +17 -0
  171. package/lib/plus/productSelect/theme/token.js +47 -0
  172. package/lib/plus/productSelect/utils.d.ts +39 -0
  173. package/lib/plus/productSelect/utils.js +138 -0
  174. package/lib/pro/pisellNumberSelector/index.js +3 -3
  175. package/lib/pro/pisellPhoneKeyboard/index.js +1 -1
  176. package/lib/utils/index.d.ts +1 -1
  177. package/package.json +4 -4
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ import classNames from 'classnames';
3
+ import "./CategorySkeleton.less";
4
+ var CategorySkeleton = function CategorySkeleton(_ref) {
5
+ var className = _ref.className,
6
+ style = _ref.style,
7
+ _ref$tabCount = _ref.tabCount,
8
+ tabCount = _ref$tabCount === void 0 ? 5 : _ref$tabCount,
9
+ _ref$animated = _ref.animated,
10
+ animated = _ref$animated === void 0 ? true : _ref$animated;
11
+ var containerClass = classNames('category-skeleton', {
12
+ 'category-skeleton--animated': animated
13
+ }, className);
14
+ return /*#__PURE__*/React.createElement("div", {
15
+ className: containerClass,
16
+ style: style
17
+ }, Array.from({
18
+ length: tabCount
19
+ }, function (_, index) {
20
+ return /*#__PURE__*/React.createElement("div", {
21
+ key: index,
22
+ className: "category-skeleton__tab",
23
+ style: {
24
+ width: "".concat(Math.floor(Math.random() * 40) + 80, "px")
25
+ }
26
+ });
27
+ }));
28
+ };
29
+ export default CategorySkeleton;
@@ -0,0 +1,30 @@
1
+ .category-skeleton {
2
+ display: flex;
3
+ align-items: center;
4
+ gap: 8px;
5
+ padding: 16px 12px;
6
+
7
+ &__tab {
8
+ height: 32px;
9
+ background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
10
+ background-size: 200% 100%;
11
+ border-radius: 20px;
12
+ flex-shrink: 0;
13
+ height: 40px;
14
+ }
15
+
16
+ &--animated {
17
+ .category-skeleton__tab {
18
+ animation: skeleton-loading 1.5s ease-in-out infinite;
19
+ }
20
+ }
21
+ }
22
+
23
+ @keyframes skeleton-loading {
24
+ 0% {
25
+ background-position: 200% 0;
26
+ }
27
+ 100% {
28
+ background-position: -200% 0;
29
+ }
30
+ }
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import '../components/TabsStructure/TabsStructure.less';
3
+ import CategorySkeleton from './CategorySkeleton';
4
+ declare type TabItem = {
5
+ key: string;
6
+ label: React.ReactNode;
7
+ icon?: React.ReactNode;
8
+ };
9
+ interface IProps {
10
+ items: TabItem[];
11
+ activeKey: string;
12
+ onChange: (key: string) => void;
13
+ loading?: boolean;
14
+ skeleton?: React.ReactNode;
15
+ }
16
+ declare const CategoryTabs: React.ForwardRefExoticComponent<IProps & React.RefAttributes<unknown>>;
17
+ export default CategoryTabs;
18
+ export { CategorySkeleton };
@@ -0,0 +1,171 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ 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."); }
3
+ 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); }
4
+ 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; }
5
+ 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; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import React, { forwardRef, useCallback, useRef, useState, useEffect } from 'react';
8
+ import IntersectionObserverProvider, { IntersectionTrigger } from "../components/IntersectionObserver";
9
+ import { TabsStructure, useSelectionIndicator } from "../components/TabsStructure";
10
+ import "../components/TabsStructure/TabsStructure.less";
11
+ import CategorySkeleton from "./CategorySkeleton";
12
+ import { PREFIX } from "../index";
13
+ var CategoryTabs = /*#__PURE__*/forwardRef(function (props, ref) {
14
+ var items = props.items,
15
+ activeKey = props.activeKey,
16
+ onChange = props.onChange,
17
+ _props$loading = props.loading,
18
+ loading = _props$loading === void 0 ? false : _props$loading,
19
+ skeleton = props.skeleton;
20
+ var railRef = useRef(null);
21
+
22
+ // 使用IntersectionTrigger来优雅地控制滚动状态
23
+ var _useState = useState(true),
24
+ _useState2 = _slicedToArray(_useState, 2),
25
+ isAtStart = _useState2[0],
26
+ setIsAtStart = _useState2[1];
27
+ var _useState3 = useState(false),
28
+ _useState4 = _slicedToArray(_useState3, 2),
29
+ isAtEnd = _useState4[0],
30
+ setIsAtEnd = _useState4[1];
31
+ var _useState5 = useState(false),
32
+ _useState6 = _slicedToArray(_useState5, 2),
33
+ needsScrollButtons = _useState6[0],
34
+ setNeedsScrollButtons = _useState6[1];
35
+
36
+ // 滚动函数
37
+ var scrollLeft = useCallback(function () {
38
+ if (!railRef.current) return;
39
+ var container = railRef.current;
40
+ var scrollAmount = container.clientWidth * 0.8;
41
+ var newPosition = Math.max(0, container.scrollLeft - scrollAmount);
42
+ container.scrollTo({
43
+ left: newPosition,
44
+ behavior: 'smooth'
45
+ });
46
+ }, []);
47
+ var scrollRight = useCallback(function () {
48
+ if (!railRef.current) return;
49
+ var container = railRef.current;
50
+ var scrollAmount = container.clientWidth * 0.8;
51
+ var maxScroll = container.scrollWidth - container.clientWidth;
52
+ var newPosition = Math.min(maxScroll, container.scrollLeft + scrollAmount);
53
+ container.scrollTo({
54
+ left: newPosition,
55
+ behavior: 'smooth'
56
+ });
57
+ }, []);
58
+
59
+ // 检测是否需要滚动按钮
60
+ useEffect(function () {
61
+ var updateScrollButtonsVisibility = function updateScrollButtonsVisibility() {
62
+ if (railRef.current) {
63
+ var _railRef$current = railRef.current,
64
+ scrollWidth = _railRef$current.scrollWidth,
65
+ clientWidth = _railRef$current.clientWidth;
66
+ console.log('检测滚动按钮需求:', {
67
+ scrollWidth: scrollWidth,
68
+ clientWidth: clientWidth,
69
+ needsScroll: scrollWidth > clientWidth
70
+ });
71
+ setNeedsScrollButtons(scrollWidth > clientWidth);
72
+ }
73
+ };
74
+ var resizeObserver = null;
75
+
76
+ // 确保DOM已经渲染完成
77
+ var timer = setTimeout(function () {
78
+ var container = railRef.current;
79
+ if (!container) {
80
+ console.log('容器未找到,跳过滚动按钮检测');
81
+ return;
82
+ }
83
+ updateScrollButtonsVisibility();
84
+ resizeObserver = new ResizeObserver(updateScrollButtonsVisibility);
85
+ resizeObserver.observe(container);
86
+ }, 100);
87
+ return function () {
88
+ clearTimeout(timer);
89
+ if (resizeObserver) {
90
+ resizeObserver.disconnect();
91
+ }
92
+ };
93
+ }, [items]); // 依赖items,当标签项变化时重新检测
94
+
95
+ // 获取选择指示器和列表容器属性
96
+ var _useSelectionIndicato = useSelectionIndicator(railRef, activeKey || ''),
97
+ selectionIndicatorProps = _useSelectionIndicato.selectionIndicatorProps,
98
+ listContainerProps = _useSelectionIndicato.listContainerProps;
99
+
100
+ // 如果正在加载且提供了骨架屏组件,显示骨架屏
101
+ if (loading && skeleton) {
102
+ return /*#__PURE__*/React.createElement(React.Fragment, null, skeleton);
103
+ }
104
+ return /*#__PURE__*/React.createElement(IntersectionObserverProvider, null, items.length > 0 && /*#__PURE__*/React.createElement("div", {
105
+ className: "".concat(PREFIX, "__tabs-wrapper")
106
+ }, /*#__PURE__*/React.createElement(TabsStructure, {
107
+ variant: "pill",
108
+ backgroundVariant: "onPage",
109
+ selectedTab: activeKey
110
+ }, needsScrollButtons && /*#__PURE__*/React.createElement(TabsStructure.ChevronButton, {
111
+ direction: "prev",
112
+ disabled: isAtStart,
113
+ onClick: scrollLeft,
114
+ style: {
115
+ marginRight: '8px'
116
+ }
117
+ }), /*#__PURE__*/React.createElement(TabsStructure.Rail, {
118
+ ref: railRef
119
+ }, /*#__PURE__*/React.createElement(IntersectionTrigger, {
120
+ onShow: function onShow() {
121
+ console.log('is start');
122
+ setIsAtStart(true);
123
+ },
124
+ onHide: function onHide() {
125
+ console.log('is start false');
126
+ setIsAtStart(false);
127
+ },
128
+ style: {
129
+ width: 1,
130
+ height: 1,
131
+ flexShrink: 0,
132
+ background: 'rgba(0,0,0,0)'
133
+ },
134
+ className: "visibility-detector start-detector"
135
+ }), /*#__PURE__*/React.createElement(TabsStructure.SelectionIndicator, selectionIndicatorProps), /*#__PURE__*/React.createElement(TabsStructure.ListContainer, listContainerProps, items.map(function (item) {
136
+ return /*#__PURE__*/React.createElement(TabsStructure.Item, {
137
+ key: item.key,
138
+ tabId: item.key,
139
+ "aria-selected": activeKey === item.key,
140
+ onClick: function onClick() {
141
+ return onChange(item.key);
142
+ },
143
+ className: "tab-item"
144
+ }, item.label);
145
+ })), /*#__PURE__*/React.createElement(IntersectionTrigger, {
146
+ className: "visibility-detector end-detector",
147
+ onShow: function onShow() {
148
+ console.log('is end');
149
+ setIsAtEnd(true);
150
+ },
151
+ onHide: function onHide() {
152
+ console.log('is end false');
153
+ setIsAtEnd(false);
154
+ },
155
+ style: {
156
+ width: 1,
157
+ height: 1,
158
+ flexShrink: 0,
159
+ background: 'rgba(0,0,0,0)'
160
+ }
161
+ })), needsScrollButtons && /*#__PURE__*/React.createElement(TabsStructure.ChevronButton, {
162
+ direction: "next",
163
+ disabled: isAtEnd,
164
+ onClick: scrollRight,
165
+ style: {
166
+ marginLeft: '8px'
167
+ }
168
+ }))));
169
+ });
170
+ export default CategoryTabs;
171
+ export { CategorySkeleton };
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ interface ProductCardSkeletonProps {
3
+ className?: string;
4
+ style?: React.CSSProperties;
5
+ isProductCover?: boolean;
6
+ item?: any;
7
+ index?: number;
8
+ }
9
+ declare const ProductCardSkeleton: React.FC<ProductCardSkeletonProps>;
10
+ export default ProductCardSkeleton;
@@ -0,0 +1,37 @@
1
+ import React from 'react';
2
+ import classNames from 'classnames';
3
+ import { Skeleton } from 'antd';
4
+ import { PREFIX } from "../index";
5
+ var ProductCardSkeleton = function ProductCardSkeleton(_ref) {
6
+ var className = _ref.className,
7
+ style = _ref.style,
8
+ _ref$isProductCover = _ref.isProductCover,
9
+ isProductCover = _ref$isProductCover === void 0 ? true : _ref$isProductCover,
10
+ item = _ref.item;
11
+ // 如果item.__typename为'category',显示简单的输入框骨架屏
12
+ if ((item === null || item === void 0 ? void 0 : item.__typename) === 'category') {
13
+ return /*#__PURE__*/React.createElement(Skeleton.Input, {
14
+ active: true,
15
+ size: "small",
16
+ block: false
17
+ });
18
+ }
19
+
20
+ // 默认显示产品卡片骨架屏
21
+ return /*#__PURE__*/React.createElement("div", {
22
+ className: classNames("".concat(PREFIX, "__product-card"), className),
23
+ style: style
24
+ }, isProductCover && /*#__PURE__*/React.createElement(Skeleton.Image, {
25
+ active: true,
26
+ style: {
27
+ width: 180,
28
+ height: 126
29
+ }
30
+ }), /*#__PURE__*/React.createElement(Skeleton, {
31
+ active: true,
32
+ paragraph: {
33
+ rows: 2
34
+ }
35
+ }));
36
+ };
37
+ export default ProductCardSkeleton;
@@ -0,0 +1,81 @@
1
+ .product-card-skeleton {
2
+ display: flex;
3
+ gap: 12px;
4
+ padding: 8px;
5
+ border-radius: 12px;
6
+ background: #fff;
7
+ box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
8
+
9
+ &__cover {
10
+ width: 180px;
11
+ height: 126px;
12
+ border-radius: 6px;
13
+ flex-shrink: 0;
14
+ }
15
+
16
+ &__content {
17
+ flex: 1;
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: 8px;
21
+ }
22
+
23
+ &__title {
24
+ height: 20px;
25
+ border-radius: 4px;
26
+ }
27
+
28
+ &__specs {
29
+ display: flex;
30
+ gap: 6px;
31
+ flex-wrap: wrap;
32
+ }
33
+
34
+ &__spec-item {
35
+ height: 24px;
36
+ width: 60px;
37
+ border-radius: 12px;
38
+ }
39
+
40
+ &__price {
41
+ height: 18px;
42
+ width: 60%;
43
+ border-radius: 4px;
44
+ }
45
+ }
46
+
47
+ .skeleton-item {
48
+ background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
49
+ background-size: 200% 100%;
50
+ display: block;
51
+ position: relative;
52
+ overflow: hidden;
53
+
54
+ &--animated {
55
+ animation: skeleton-loading 1.5s ease-in-out infinite;
56
+ }
57
+ }
58
+
59
+ @keyframes skeleton-loading {
60
+ 0% {
61
+ background-position: 200% 0;
62
+ }
63
+ 100% {
64
+ background-position: -200% 0;
65
+ }
66
+ }
67
+
68
+ // 网格布局中的产品卡片骨架屏样式调整
69
+ .product-grid-wrapper {
70
+ .product-card-skeleton {
71
+ min-width: unset;
72
+ width: 100%;
73
+ }
74
+ }
75
+
76
+ // 列表布局中的产品卡片骨架屏样式调整
77
+ .product-list-wrapper {
78
+ .product-card-skeleton {
79
+ width: 100%;
80
+ }
81
+ }
@@ -0,0 +1,45 @@
1
+ import React from 'react';
2
+ import ProductCardSkeleton from './ProductCardSkeleton';
3
+ import './index.less';
4
+ declare type BoolConfigVal = 0 | 1;
5
+ export interface ProductCardConfig {
6
+ isProductCover?: BoolConfigVal;
7
+ imgWidth?: string;
8
+ imgHeight?: string;
9
+ radius?: number;
10
+ isTitle?: BoolConfigVal;
11
+ isSubtitle?: BoolConfigVal;
12
+ showSpec?: boolean;
13
+ isTag?: BoolConfigVal;
14
+ isPrice?: BoolConfigVal;
15
+ isOriginPrice?: BoolConfigVal;
16
+ showZeroPrice?: boolean;
17
+ showMarketingTag?: boolean;
18
+ showRemark?: boolean;
19
+ isStock?: BoolConfigVal;
20
+ }
21
+ export interface ProductCardProps {
22
+ item: any;
23
+ index: number;
24
+ context?: {
25
+ onItemIntersectionIn: (item: any) => void;
26
+ onItemIntersectionOut: (item: any) => void;
27
+ };
28
+ className?: string;
29
+ onSelectProduct?: (item: any) => void;
30
+ currentProductId?: number;
31
+ onSelect?: (item: any) => void;
32
+ isSelected?: boolean;
33
+ decorateConfig?: ProductCardConfig;
34
+ }
35
+ export declare const ProductCard: React.MemoExoticComponent<({ item, index, context, onSelect, isSelected, className, decorateConfig, }: ProductCardProps) => JSX.Element>;
36
+ export declare const DefaultItemContent: React.MemoExoticComponent<(props: {
37
+ item: any;
38
+ index: number;
39
+ context?: {
40
+ onItemIntersectionIn: (item: any) => void;
41
+ onItemIntersectionOut: (item: any) => void;
42
+ } | undefined;
43
+ }) => JSX.Element>;
44
+ export default ProductCard;
45
+ export { ProductCardSkeleton };
@@ -0,0 +1,170 @@
1
+ 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); }
2
+ 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; }
3
+ 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; }
4
+ 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; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
6
+ 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); }
7
+ import React, { memo } from 'react';
8
+ import classNames from 'classnames';
9
+ import { locales, image as imageAli } from '@pisell/utils';
10
+ import Decimal from 'decimal.js';
11
+ import { IntersectionTrigger } from "../components/IntersectionObserver";
12
+ import PisellPriceText from "../components/pisellPriceText";
13
+ import ProductCardSkeleton from "./ProductCardSkeleton";
14
+ import "./index.less";
15
+ import { PREFIX } from "../index";
16
+
17
+ // 产品卡片配置接口
18
+
19
+ // 产品卡片属性接口
20
+
21
+ // 默认配置
22
+ var defaultConfig = {
23
+ isProductCover: 1,
24
+ imgWidth: '180px',
25
+ imgHeight: '126px',
26
+ radius: 8,
27
+ isTitle: 1,
28
+ isSubtitle: 0,
29
+ showSpec: true,
30
+ isTag: 0,
31
+ isPrice: 0,
32
+ isOriginPrice: 0,
33
+ showZeroPrice: false,
34
+ showMarketingTag: true,
35
+ showRemark: true,
36
+ isStock: 0
37
+ };
38
+
39
+ // 产品卡片组件
40
+ export var ProductCard = /*#__PURE__*/memo(function (_ref) {
41
+ var item = _ref.item,
42
+ index = _ref.index,
43
+ context = _ref.context,
44
+ onSelect = _ref.onSelect,
45
+ isSelected = _ref.isSelected,
46
+ className = _ref.className,
47
+ _ref$decorateConfig = _ref.decorateConfig,
48
+ decorateConfig = _ref$decorateConfig === void 0 ? {} : _ref$decorateConfig;
49
+ var finalConfig = _objectSpread(_objectSpread({}, defaultConfig), decorateConfig);
50
+ var imgHeight = finalConfig.imgHeight,
51
+ imgWidth = finalConfig.imgWidth,
52
+ isOriginPrice = finalConfig.isOriginPrice,
53
+ isPrice = finalConfig.isPrice,
54
+ isProductCover = finalConfig.isProductCover,
55
+ isStock = finalConfig.isStock,
56
+ isSubtitle = finalConfig.isSubtitle,
57
+ isTitle = finalConfig.isTitle,
58
+ radius = finalConfig.radius,
59
+ showZeroPrice = finalConfig.showZeroPrice;
60
+ var __typename = item.__typename;
61
+
62
+ // 如果是分类,显示分类样式
63
+ if (__typename === 'category') {
64
+ return /*#__PURE__*/React.createElement("div", {
65
+ className: classNames("".concat(PREFIX, "__product-category"), className),
66
+ "data-index": index,
67
+ "data-item-index": index
68
+ }, /*#__PURE__*/React.createElement("div", {
69
+ className: "category-title"
70
+ }, item.name));
71
+ }
72
+
73
+ // 获取库存文本
74
+ var getStockText = function getStockText(item) {
75
+ if (item.is_track === 0) {
76
+ return false;
77
+ }
78
+ return "".concat(locales.getText('pisell2.product-select.stock'), "\uFF1A").concat(item.stock_quantity);
79
+ };
80
+ var getTextCover = function getTextCover(title) {
81
+ if (!title) return '';
82
+ var cleanTitle = title.trim();
83
+ if (cleanTitle.length === 0) return '';
84
+ return cleanTitle.substring(0, 2).toUpperCase();
85
+ };
86
+
87
+ // 渲染价格
88
+ var renderPrice = function renderPrice(item) {
89
+ var _price = item.price,
90
+ _original_price = item.original_price,
91
+ is_bundle = item.is_bundle,
92
+ minimum_markup_price = item.minimum_markup_price;
93
+ var price = _price;
94
+ var original_price = _original_price;
95
+ if (is_bundle) {
96
+ price = new Decimal(price).plus(new Decimal(minimum_markup_price)).toFixed(2);
97
+ original_price = new Decimal(original_price).plus(new Decimal(minimum_markup_price)).toFixed(2);
98
+ }
99
+ if (!showZeroPrice && !parseFloat(price)) return null;
100
+ return !!isPrice || !!isOriginPrice ? /*#__PURE__*/React.createElement("div", {
101
+ className: "price-info"
102
+ }, isPrice ? /*#__PURE__*/React.createElement("div", {
103
+ className: "price"
104
+ }, /*#__PURE__*/React.createElement(PisellPriceText, {
105
+ value: price,
106
+ isMini: is_bundle
107
+ })) : null, !!isOriginPrice && parseFloat(original_price) ? /*#__PURE__*/React.createElement("div", {
108
+ className: "original-price"
109
+ }, /*#__PURE__*/React.createElement(PisellPriceText, {
110
+ value: original_price,
111
+ isMini: is_bundle
112
+ })) : null) : null;
113
+ };
114
+
115
+ // 产品卡片内容
116
+ var cardContent = /*#__PURE__*/React.createElement("div", {
117
+ className: classNames("".concat(PREFIX, "__product-card"), className, {
118
+ selected: isSelected
119
+ }),
120
+ onClick: function onClick() {
121
+ onSelect === null || onSelect === void 0 || onSelect(item);
122
+ },
123
+ "data-index": index,
124
+ "data-item-index": index
125
+ }, isProductCover ? /*#__PURE__*/React.createElement("div", {
126
+ className: "card-left",
127
+ style: {
128
+ width: imgWidth || 'auto',
129
+ height: imgHeight || 'auto'
130
+ }
131
+ }, item.cover ? /*#__PURE__*/React.createElement("img", {
132
+ loading: "lazy",
133
+ src: imageAli.ali(item.cover, 360),
134
+ alt: item.title,
135
+ style: {
136
+ borderRadius: radius
137
+ }
138
+ }) : /*#__PURE__*/React.createElement("div", {
139
+ className: "text-cover",
140
+ style: {
141
+ borderRadius: radius
142
+ }
143
+ }, getTextCover(item.title))) : null, /*#__PURE__*/React.createElement("div", {
144
+ className: "card-right"
145
+ }, !!isTitle ? /*#__PURE__*/React.createElement("div", {
146
+ className: "title"
147
+ }, item.title) : null, !!isSubtitle && item.subtitle ? /*#__PURE__*/React.createElement("div", {
148
+ className: "subtitle"
149
+ }, item.subtitle) : null, !!isStock && !!item.is_track ? /*#__PURE__*/React.createElement("div", {
150
+ className: "stock"
151
+ }, getStockText(item)) : null, renderPrice(item)));
152
+ if (context) {
153
+ return /*#__PURE__*/React.createElement(IntersectionTrigger, {
154
+ onShow: function onShow() {
155
+ return context.onItemIntersectionIn(item);
156
+ }
157
+ // onHide={() => context.onItemIntersectionOut(item)}
158
+ }, cardContent);
159
+ }
160
+ return cardContent;
161
+ });
162
+ ProductCard.displayName = 'ProductCard';
163
+
164
+ // 默认的ItemContent组件(保持向后兼容)
165
+ export var DefaultItemContent = /*#__PURE__*/memo(function (props) {
166
+ return /*#__PURE__*/React.createElement(ProductCard, props);
167
+ });
168
+ DefaultItemContent.displayName = 'DefaultItemContent';
169
+ export default ProductCard;
170
+ export { ProductCardSkeleton };