@pisell/private-materials 6.7.2 → 6.7.4
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.
- package/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.js +1 -1
- package/build/lowcode/preview.js +7 -7
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +2 -2
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +2 -2
- package/es/components/booking/components/TabProduct/index.d.ts +0 -1
- package/es/components/booking/forms/table/index.d.ts +0 -1
- package/es/components/booking/info/hooks/useInfoHolder.d.ts +0 -1
- package/es/components/booking/info/service/addService/utils.d.ts +1 -1
- package/es/components/booking/info2/service/addService/utils.d.ts +1 -1
- package/es/components/booking/materiels/holder/index.d.ts +0 -1
- package/es/components/checkout/components/SearchAndClientModule/index.d.ts +0 -1
- package/es/components/checkout/components/WalletPassModule/components/ConflictModal/index.d.ts +0 -1
- package/es/components/checkout/components/WalletPassModule/components/DiscountWallet/index.d.ts +0 -1
- package/es/components/eftposPay/hooks.d.ts +1 -1
- package/es/components/eftposPay/store/index.d.ts +2 -2
- package/es/components/eventBooking/components/bookingAvailabilityCalendar/components/CalendarDate/CalenDateStatus/index.d.ts +0 -1
- package/es/components/eventBooking/components/bookingAvailabilityCalendar/components/CalendarDate/CalenDateWeek/CallToBook/index.d.ts +0 -1
- package/es/components/eventBooking/components/bookingAvailabilityCalendar/components/CalendarDate/Status/index.d.ts +0 -1
- package/es/components/pay/toB/components/Cache/index.d.ts +0 -1
- package/es/components/pay/toB/components/CardGroup/index.d.ts +0 -1
- package/es/components/pay/toC/PaymentMethods/StripePay/Stripe/Finish/index.d.ts +0 -1
- package/es/components/pay/toC/PaymentMethods/StripePay/Stripe/components/PageLoading/index.d.ts +0 -1
- package/es/components/pay/toC/PaymentMethods/StripePay/Stripe/components/SetupForm/PaymentRequestForm.d.ts +0 -1
- package/es/components/pay/toC/WalletPassBlock/components/WalletUseList/index.d.ts +0 -1
- package/es/components/productExtension/fields/Actor/index.d.ts +0 -1
- package/es/components/schedules/calendar/calendarItem.d.ts +0 -1
- package/es/components/schedules/components/CurrentDay/index.d.ts +0 -1
- package/es/components/schedules/products/ProductDetailDrawer/ProductDetail/index.d.ts +0 -1
- package/es/components/schedules/products/ProductDetailDrawer/ProductDetailByDate/index.d.ts +0 -1
- package/es/components/schedules/products/index.d.ts +0 -1
- package/es/components/shoppingCart/components/Empty/index.d.ts +0 -1
- package/es/components/shoppingCart/components/Render/index.d.ts +0 -1
- package/es/plus/clinetSearch/Add/PhoneField/index.d.ts +0 -1
- package/es/plus/productSelect/ProductCard/SkuCard/SkuCardA1/index.d.ts +0 -1
- package/es/plus/productSelect/ProductCard/SkuCard/SkuCardA2/index.d.ts +0 -1
- package/es/plus/productSelect/ProductCard/SkuCard/SkuCardA5/index.d.ts +0 -1
- package/es/plus/productSelect/ProductCard/SkuCard/SkuCardA9/index.d.ts +0 -1
- package/es/plus/productSelect/ProductCard/SkuCard/SkuCardCustom/index.d.ts +0 -1
- package/es/plus/productSelect/ProductCard/SkuCard/components/Action/index.d.ts +0 -1
- package/es/plus/productSelect/ProductCard/SkuCard/components/Favorite/index.d.ts +0 -1
- package/es/plus/productSelect/ProductCard/SkuCard/components/Promotions/index.d.ts +0 -1
- package/es/plus/productSelect/ProductCard/SkuCard/components/Tags/index.d.ts +0 -1
- package/es/plus/productSelect/ProductCard/SkuCard/components/TooltipTags/index.d.ts +0 -1
- package/es/plus/productSelect/ProductCard/SkuCard/components/WarningLists/index.d.ts +0 -1
- package/es/plus/productSelect/ProductCard/SkuCard/index.d.ts +0 -1
- package/es/plus/webPosLogin/WebPosLogin.js +11 -15
- package/es/plus/webPosLogin/WebPosLoginCpt.js +1 -1
- package/es/plus/webPosLogin/WebPosLoginCpt.less +0 -1
- package/es/plus/webPosLogin/components/BrandPanel/index.js +7 -37
- package/es/plus/webPosLogin/components/MediaDisplay/index.d.ts +12 -0
- package/es/plus/webPosLogin/components/MediaDisplay/index.js +220 -0
- package/es/plus/webPosLogin/components/MediaDisplay/index.less +141 -0
- package/es/plus/webPosLogin/components/MediaDisplay/type.d.ts +54 -0
- package/es/plus/webPosLogin/components/MediaDisplay/type.js +1 -0
- package/es/pro/Login2.0/Login2.js +9 -3
- package/es/pro/Login2.0/index.less +0 -12
- package/es/pro/priceKeyboard/hooks/rightItems.d.ts +0 -1
- package/lib/components/booking/components/TabProduct/index.d.ts +0 -1
- package/lib/components/booking/forms/table/index.d.ts +0 -1
- package/lib/components/booking/info/hooks/useInfoHolder.d.ts +0 -1
- package/lib/components/booking/info/service/addService/utils.d.ts +1 -1
- package/lib/components/booking/info2/service/addService/utils.d.ts +1 -1
- package/lib/components/booking/materiels/holder/index.d.ts +0 -1
- package/lib/components/checkout/components/SearchAndClientModule/index.d.ts +0 -1
- package/lib/components/checkout/components/WalletPassModule/components/ConflictModal/index.d.ts +0 -1
- package/lib/components/checkout/components/WalletPassModule/components/DiscountWallet/index.d.ts +0 -1
- package/lib/components/eftposPay/hooks.d.ts +1 -1
- package/lib/components/eftposPay/store/index.d.ts +2 -2
- package/lib/components/eventBooking/components/bookingAvailabilityCalendar/components/CalendarDate/CalenDateStatus/index.d.ts +0 -1
- package/lib/components/eventBooking/components/bookingAvailabilityCalendar/components/CalendarDate/CalenDateWeek/CallToBook/index.d.ts +0 -1
- package/lib/components/eventBooking/components/bookingAvailabilityCalendar/components/CalendarDate/Status/index.d.ts +0 -1
- package/lib/components/pay/toB/components/Cache/index.d.ts +0 -1
- package/lib/components/pay/toB/components/CardGroup/index.d.ts +0 -1
- package/lib/components/pay/toC/PaymentMethods/StripePay/Stripe/Finish/index.d.ts +0 -1
- package/lib/components/pay/toC/PaymentMethods/StripePay/Stripe/components/PageLoading/index.d.ts +0 -1
- package/lib/components/pay/toC/PaymentMethods/StripePay/Stripe/components/SetupForm/PaymentRequestForm.d.ts +0 -1
- package/lib/components/pay/toC/WalletPassBlock/components/WalletUseList/index.d.ts +0 -1
- package/lib/components/productExtension/fields/Actor/index.d.ts +0 -1
- package/lib/components/schedules/calendar/calendarItem.d.ts +0 -1
- package/lib/components/schedules/components/CurrentDay/index.d.ts +0 -1
- package/lib/components/schedules/products/ProductDetailDrawer/ProductDetail/index.d.ts +0 -1
- package/lib/components/schedules/products/ProductDetailDrawer/ProductDetailByDate/index.d.ts +0 -1
- package/lib/components/schedules/products/index.d.ts +0 -1
- package/lib/components/shoppingCart/components/Empty/index.d.ts +0 -1
- package/lib/components/shoppingCart/components/Render/index.d.ts +0 -1
- package/lib/plus/clinetSearch/Add/PhoneField/index.d.ts +0 -1
- package/lib/plus/productSelect/ProductCard/SkuCard/SkuCardA1/index.d.ts +0 -1
- package/lib/plus/productSelect/ProductCard/SkuCard/SkuCardA2/index.d.ts +0 -1
- package/lib/plus/productSelect/ProductCard/SkuCard/SkuCardA5/index.d.ts +0 -1
- package/lib/plus/productSelect/ProductCard/SkuCard/SkuCardA9/index.d.ts +0 -1
- package/lib/plus/productSelect/ProductCard/SkuCard/SkuCardCustom/index.d.ts +0 -1
- package/lib/plus/productSelect/ProductCard/SkuCard/components/Action/index.d.ts +0 -1
- package/lib/plus/productSelect/ProductCard/SkuCard/components/Favorite/index.d.ts +0 -1
- package/lib/plus/productSelect/ProductCard/SkuCard/components/Promotions/index.d.ts +0 -1
- package/lib/plus/productSelect/ProductCard/SkuCard/components/Tags/index.d.ts +0 -1
- package/lib/plus/productSelect/ProductCard/SkuCard/components/TooltipTags/index.d.ts +0 -1
- package/lib/plus/productSelect/ProductCard/SkuCard/components/WarningLists/index.d.ts +0 -1
- package/lib/plus/productSelect/ProductCard/SkuCard/index.d.ts +0 -1
- package/lib/plus/webPosLogin/WebPosLogin.js +22 -29
- package/lib/plus/webPosLogin/WebPosLoginCpt.js +1 -1
- package/lib/plus/webPosLogin/WebPosLoginCpt.less +0 -1
- package/lib/plus/webPosLogin/components/BrandPanel/index.js +2 -22
- package/lib/plus/webPosLogin/components/MediaDisplay/index.d.ts +12 -0
- package/lib/plus/webPosLogin/components/MediaDisplay/index.js +160 -0
- package/lib/plus/webPosLogin/components/MediaDisplay/index.less +141 -0
- package/lib/plus/webPosLogin/components/MediaDisplay/type.d.ts +54 -0
- package/lib/plus/webPosLogin/components/MediaDisplay/type.js +17 -0
- package/lib/pro/Login2.0/Login2.js +19 -9
- package/lib/pro/Login2.0/index.less +0 -12
- package/lib/pro/priceKeyboard/hooks/rightItems.d.ts +0 -1
- package/package.json +2 -2
|
@@ -0,0 +1,220 @@
|
|
|
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, { memo, useMemo, useRef, useEffect, useState, useCallback } from 'react';
|
|
8
|
+
import { Image } from '@pisell/materials';
|
|
9
|
+
import "./index.less";
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* MediaDisplay 媒体组件
|
|
13
|
+
* @description 通用媒体展示组件,支持图片/视频展示
|
|
14
|
+
* - 支持单个媒体或轮播(预留)
|
|
15
|
+
* - 支持全屏模式
|
|
16
|
+
* - 支持视频播放控制和状态回调
|
|
17
|
+
*/
|
|
18
|
+
var MediaDisplay = /*#__PURE__*/memo(function (props) {
|
|
19
|
+
var _config$carouselItems3;
|
|
20
|
+
var config = props.config,
|
|
21
|
+
_props$className = props.className,
|
|
22
|
+
className = _props$className === void 0 ? '' : _props$className,
|
|
23
|
+
_props$fullscreen = props.fullscreen,
|
|
24
|
+
fullscreen = _props$fullscreen === void 0 ? false : _props$fullscreen,
|
|
25
|
+
_props$muted = props.muted,
|
|
26
|
+
muted = _props$muted === void 0 ? true : _props$muted,
|
|
27
|
+
_props$loop = props.loop,
|
|
28
|
+
loop = _props$loop === void 0 ? false : _props$loop,
|
|
29
|
+
onVideoEnded = props.onVideoEnded,
|
|
30
|
+
onVideoStateChange = props.onVideoStateChange,
|
|
31
|
+
_props$canClose = props.canClose,
|
|
32
|
+
canClose = _props$canClose === void 0 ? true : _props$canClose,
|
|
33
|
+
onClose = props.onClose;
|
|
34
|
+
var videoRef = useRef(null);
|
|
35
|
+
var _useState = useState('idle'),
|
|
36
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
37
|
+
videoState = _useState2[0],
|
|
38
|
+
setVideoState = _useState2[1];
|
|
39
|
+
var _useState3 = useState(false),
|
|
40
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
41
|
+
isVideoEnded = _useState4[0],
|
|
42
|
+
setIsVideoEnded = _useState4[1];
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* 获取当前要展示的媒体项
|
|
46
|
+
* 如果只有一个媒体项,直接返回;否则返回第一个(轮播逻辑预留)
|
|
47
|
+
*/
|
|
48
|
+
var currentMedia = useMemo(function () {
|
|
49
|
+
var _config$carouselItems;
|
|
50
|
+
if (config !== null && config !== void 0 && (_config$carouselItems = config.carouselItems) !== null && _config$carouselItems !== void 0 && _config$carouselItems.length) {
|
|
51
|
+
// 目前只取第一个,轮播逻辑预留
|
|
52
|
+
return config.carouselItems[0];
|
|
53
|
+
}
|
|
54
|
+
// 如果有 logo,构造为图片类型
|
|
55
|
+
if (config !== null && config !== void 0 && config.logo) {
|
|
56
|
+
return {
|
|
57
|
+
type: 'image',
|
|
58
|
+
url: config.logo
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
return null;
|
|
62
|
+
}, [config === null || config === void 0 ? void 0 : config.carouselItems, config === null || config === void 0 ? void 0 : config.logo]);
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* 是否为视频类型
|
|
66
|
+
*/
|
|
67
|
+
var isVideo = (currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.type) === 'video';
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* 是否为单一媒体(不需要显示切换控件)
|
|
71
|
+
*/
|
|
72
|
+
var isSingleMedia = useMemo(function () {
|
|
73
|
+
var _config$carouselItems2;
|
|
74
|
+
var itemCount = (config === null || config === void 0 || (_config$carouselItems2 = config.carouselItems) === null || _config$carouselItems2 === void 0 ? void 0 : _config$carouselItems2.length) || 0;
|
|
75
|
+
// 只有一个轮播项,或者没有轮播项但有 logo
|
|
76
|
+
return itemCount <= 1;
|
|
77
|
+
}, [config === null || config === void 0 || (_config$carouselItems3 = config.carouselItems) === null || _config$carouselItems3 === void 0 ? void 0 : _config$carouselItems3.length]);
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* 更新视频播放状态
|
|
81
|
+
*/
|
|
82
|
+
var updateVideoState = useCallback(function (state) {
|
|
83
|
+
setVideoState(state);
|
|
84
|
+
onVideoStateChange === null || onVideoStateChange === void 0 || onVideoStateChange(state);
|
|
85
|
+
}, [onVideoStateChange]);
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* 处理视频播放结束
|
|
89
|
+
*/
|
|
90
|
+
var handleVideoEnded = useCallback(function () {
|
|
91
|
+
setIsVideoEnded(true);
|
|
92
|
+
updateVideoState('ended');
|
|
93
|
+
onVideoEnded === null || onVideoEnded === void 0 || onVideoEnded();
|
|
94
|
+
|
|
95
|
+
// 如果可以关闭,触发关闭回调
|
|
96
|
+
if (canClose) {
|
|
97
|
+
onClose === null || onClose === void 0 || onClose();
|
|
98
|
+
}
|
|
99
|
+
// 如果不能关闭(初始化未完成),视频会停在最后一帧等待
|
|
100
|
+
// 外部通过修改 canClose 为 true 后,组件会在下次渲染时触发 onClose
|
|
101
|
+
}, [canClose, onClose, onVideoEnded, updateVideoState]);
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* 监听 canClose 变化,如果视频已结束且 canClose 变为 true,触发关闭
|
|
105
|
+
*/
|
|
106
|
+
useEffect(function () {
|
|
107
|
+
if (isVideoEnded && canClose) {
|
|
108
|
+
onClose === null || onClose === void 0 || onClose();
|
|
109
|
+
}
|
|
110
|
+
}, [isVideoEnded, canClose, onClose]);
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* 视频事件处理
|
|
114
|
+
*/
|
|
115
|
+
useEffect(function () {
|
|
116
|
+
var video = videoRef.current;
|
|
117
|
+
if (!video || !isVideo) return;
|
|
118
|
+
var handlePlay = function handlePlay() {
|
|
119
|
+
return updateVideoState('playing');
|
|
120
|
+
};
|
|
121
|
+
var handlePause = function handlePause() {
|
|
122
|
+
return updateVideoState('paused');
|
|
123
|
+
};
|
|
124
|
+
var handleError = function handleError() {
|
|
125
|
+
return updateVideoState('error');
|
|
126
|
+
};
|
|
127
|
+
var handleLoadedData = function handleLoadedData() {
|
|
128
|
+
// 视频加载完成后自动播放
|
|
129
|
+
video.play().catch(function (err) {
|
|
130
|
+
console.warn('[MediaDisplay] 视频自动播放失败:', err);
|
|
131
|
+
updateVideoState('error');
|
|
132
|
+
});
|
|
133
|
+
};
|
|
134
|
+
video.addEventListener('play', handlePlay);
|
|
135
|
+
video.addEventListener('pause', handlePause);
|
|
136
|
+
video.addEventListener('ended', handleVideoEnded);
|
|
137
|
+
video.addEventListener('error', handleError);
|
|
138
|
+
video.addEventListener('loadeddata', handleLoadedData);
|
|
139
|
+
return function () {
|
|
140
|
+
video.removeEventListener('play', handlePlay);
|
|
141
|
+
video.removeEventListener('pause', handlePause);
|
|
142
|
+
video.removeEventListener('ended', handleVideoEnded);
|
|
143
|
+
video.removeEventListener('error', handleError);
|
|
144
|
+
video.removeEventListener('loadeddata', handleLoadedData);
|
|
145
|
+
};
|
|
146
|
+
}, [isVideo, handleVideoEnded, updateVideoState]);
|
|
147
|
+
|
|
148
|
+
/** 品牌标语 */
|
|
149
|
+
var slogan = config === null || config === void 0 ? void 0 : config.slogan;
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* 渲染媒体内容
|
|
153
|
+
*/
|
|
154
|
+
var renderMedia = function renderMedia() {
|
|
155
|
+
if (!currentMedia) {
|
|
156
|
+
return null;
|
|
157
|
+
}
|
|
158
|
+
if (currentMedia.type === 'video') {
|
|
159
|
+
return /*#__PURE__*/React.createElement("video", {
|
|
160
|
+
style: {
|
|
161
|
+
backgroundColor: currentMedia.backgroundColor
|
|
162
|
+
},
|
|
163
|
+
ref: videoRef,
|
|
164
|
+
src: currentMedia.url,
|
|
165
|
+
className: "media-display__video",
|
|
166
|
+
muted: muted,
|
|
167
|
+
loop: loop,
|
|
168
|
+
playsInline: true,
|
|
169
|
+
autoPlay: true
|
|
170
|
+
});
|
|
171
|
+
}
|
|
172
|
+
if (currentMedia.type === 'logo') {
|
|
173
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
174
|
+
className: "media-display__logo-wrapper"
|
|
175
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
|
176
|
+
style: currentMedia.logoStyle,
|
|
177
|
+
src: currentMedia.url,
|
|
178
|
+
preview: false
|
|
179
|
+
}));
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
// 图片类型
|
|
183
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
184
|
+
className: "media-display__image-wrapper"
|
|
185
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
|
186
|
+
style: {
|
|
187
|
+
width: '100%',
|
|
188
|
+
height: '100%',
|
|
189
|
+
backgroundColor: currentMedia.backgroundColor
|
|
190
|
+
},
|
|
191
|
+
src: currentMedia.url,
|
|
192
|
+
preview: false,
|
|
193
|
+
alt: "Media",
|
|
194
|
+
className: "media-display__image"
|
|
195
|
+
}));
|
|
196
|
+
};
|
|
197
|
+
|
|
198
|
+
// 全屏模式
|
|
199
|
+
if (fullscreen) {
|
|
200
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
201
|
+
className: "media-display media-display--fullscreen ".concat(className).trim()
|
|
202
|
+
}, renderMedia());
|
|
203
|
+
}
|
|
204
|
+
console.log(currentMedia, 'currentMedia');
|
|
205
|
+
|
|
206
|
+
// 普通模式(品牌面板样式)
|
|
207
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
208
|
+
className: "webpos-login-brand-panel ".concat(className).trim()
|
|
209
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
210
|
+
className: "webpos-login-brand-panel__content"
|
|
211
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
212
|
+
className: "webpos-login-brand-panel__logo-wrapper"
|
|
213
|
+
}, renderMedia()), slogan && /*#__PURE__*/React.createElement("p", {
|
|
214
|
+
className: "webpos-login-brand-panel__slogan"
|
|
215
|
+
}, slogan), !isSingleMedia && /*#__PURE__*/React.createElement("div", {
|
|
216
|
+
className: "webpos-login-brand-panel__carousel-controls"
|
|
217
|
+
})));
|
|
218
|
+
});
|
|
219
|
+
MediaDisplay.displayName = 'MediaDisplay';
|
|
220
|
+
export default MediaDisplay;
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* MediaDisplay 媒体展示组件样式
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/* 全屏模式 */
|
|
6
|
+
.media-display {
|
|
7
|
+
position: relative;
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
|
|
11
|
+
/* 全屏模式 */
|
|
12
|
+
&--fullscreen {
|
|
13
|
+
position: fixed;
|
|
14
|
+
top: 0;
|
|
15
|
+
left: 0;
|
|
16
|
+
right: 0;
|
|
17
|
+
bottom: 0;
|
|
18
|
+
width: 100%;
|
|
19
|
+
height: 100%;
|
|
20
|
+
z-index: 9999;
|
|
21
|
+
/* 背景色由 JS 动态设置(从视频帧提取主色),这里设置默认回退值 */
|
|
22
|
+
background: #000;
|
|
23
|
+
|
|
24
|
+
/* 全屏模式下视频铺满 */
|
|
25
|
+
.media-display__video {
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 0;
|
|
28
|
+
left: 0;
|
|
29
|
+
width: 100%;
|
|
30
|
+
height: 100%;
|
|
31
|
+
object-fit: contain;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* 视频样式(普通模式) */
|
|
36
|
+
&__video {
|
|
37
|
+
width: 100%;
|
|
38
|
+
height: 100%;
|
|
39
|
+
object-fit: contain;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* 图片容器 */
|
|
43
|
+
&__image-wrapper {
|
|
44
|
+
width: 100%;
|
|
45
|
+
height: 100%;
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: center;
|
|
49
|
+
.pisell-lowcode-image {
|
|
50
|
+
width: 100%;
|
|
51
|
+
height: 100%;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* 图片样式 */
|
|
56
|
+
&__image {
|
|
57
|
+
max-width: 100%;
|
|
58
|
+
max-height: 100%;
|
|
59
|
+
object-fit: cover;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* BrandPanel 品牌区组件样式(普通模式)
|
|
65
|
+
*/
|
|
66
|
+
.webpos-login-brand-panel {
|
|
67
|
+
position: relative;
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
width: 50%;
|
|
72
|
+
min-width: 400px;
|
|
73
|
+
min-height: 600px;
|
|
74
|
+
background: linear-gradient(135deg, #F04A28 0%, #E8421F 100%);
|
|
75
|
+
border-radius: 24px 0 0 24px;
|
|
76
|
+
overflow: hidden;
|
|
77
|
+
flex-shrink: 0;
|
|
78
|
+
|
|
79
|
+
/* 品牌内容区 */
|
|
80
|
+
&__content {
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
align-items: center;
|
|
84
|
+
justify-content: center;
|
|
85
|
+
padding: 40px;
|
|
86
|
+
text-align: center;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Logo/媒体 容器 */
|
|
90
|
+
&__logo-wrapper {
|
|
91
|
+
display: flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
justify-content: center;
|
|
94
|
+
max-width: 320px;
|
|
95
|
+
|
|
96
|
+
/* 视频在品牌面板中的样式 */
|
|
97
|
+
video {
|
|
98
|
+
max-width: 100%;
|
|
99
|
+
max-height: 240px;
|
|
100
|
+
border-radius: 8px;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* Logo 图片 */
|
|
105
|
+
&__logo {
|
|
106
|
+
max-width: 100%;
|
|
107
|
+
max-height: 120px;
|
|
108
|
+
object-fit: contain;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* 品牌标语 */
|
|
112
|
+
&__slogan {
|
|
113
|
+
margin-top: 16px;
|
|
114
|
+
font-size: 18px;
|
|
115
|
+
font-weight: 400;
|
|
116
|
+
color: rgba(255, 255, 255, 0.9);
|
|
117
|
+
letter-spacing: 0.5px;
|
|
118
|
+
line-height: 1.5;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* 轮播控件(预留) */
|
|
122
|
+
&__carousel-controls {
|
|
123
|
+
display: flex;
|
|
124
|
+
align-items: center;
|
|
125
|
+
justify-content: center;
|
|
126
|
+
margin-top: 20px;
|
|
127
|
+
gap: 8px;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* 响应式适配 */
|
|
132
|
+
@media screen and (max-width: 768px) {
|
|
133
|
+
.webpos-login-brand-panel {
|
|
134
|
+
display: none;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* 全屏模式在移动端仍然显示 */
|
|
138
|
+
.media-display--fullscreen {
|
|
139
|
+
display: flex;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/**
|
|
3
|
+
* 媒体轮播项
|
|
4
|
+
* @description 媒体展示区的轮播内容配置
|
|
5
|
+
*/
|
|
6
|
+
export interface CarouselItem {
|
|
7
|
+
/** 内容类型:图片或视频 */
|
|
8
|
+
type: 'image' | 'video' | 'logo';
|
|
9
|
+
/** 资源URL */
|
|
10
|
+
url: string;
|
|
11
|
+
/** 背景颜色 */
|
|
12
|
+
backgroundColor?: string;
|
|
13
|
+
/** logo样式 */
|
|
14
|
+
logoStyle?: React.CSSProperties;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* 媒体配置
|
|
18
|
+
* @description 媒体展示区域的配置
|
|
19
|
+
*/
|
|
20
|
+
export interface MediaConfig {
|
|
21
|
+
/** 轮播内容列表(图片/视频) */
|
|
22
|
+
carouselItems?: CarouselItem[];
|
|
23
|
+
/** 默认Logo(当无轮播时显示) */
|
|
24
|
+
logo?: string;
|
|
25
|
+
/** 品牌标语 */
|
|
26
|
+
slogan?: string;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* 视频播放状态
|
|
30
|
+
*/
|
|
31
|
+
export declare type VideoPlayState = 'idle' | 'playing' | 'paused' | 'ended' | 'error';
|
|
32
|
+
/**
|
|
33
|
+
* MediaDisplay 媒体展示组件 Props
|
|
34
|
+
*/
|
|
35
|
+
export interface MediaDisplayProps {
|
|
36
|
+
/** 品牌配置 */
|
|
37
|
+
config?: MediaConfig;
|
|
38
|
+
/** 自定义类名 */
|
|
39
|
+
className?: string;
|
|
40
|
+
/** 是否全屏模式 */
|
|
41
|
+
fullscreen?: boolean;
|
|
42
|
+
/** 视频是否静音,默认 true */
|
|
43
|
+
muted?: boolean;
|
|
44
|
+
/** 视频是否循环播放,默认 false */
|
|
45
|
+
loop?: boolean;
|
|
46
|
+
/** 视频播放结束回调 */
|
|
47
|
+
onVideoEnded?: () => void;
|
|
48
|
+
/** 视频播放状态变化回调 */
|
|
49
|
+
onVideoStateChange?: (state: VideoPlayState) => void;
|
|
50
|
+
/** 是否可以关闭(用于控制视频结束后是否允许关闭) */
|
|
51
|
+
canClose?: boolean;
|
|
52
|
+
/** 关闭回调(视频结束且 canClose 为 true 时触发) */
|
|
53
|
+
onClose?: () => void;
|
|
54
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -14,7 +14,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
14
14
|
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; } }
|
|
15
15
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
16
16
|
import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
|
17
|
-
import { Form, message } from 'antd';
|
|
17
|
+
import { ConfigProvider, Form, message } from 'antd';
|
|
18
18
|
import { Input, Button, Checkbox } from '@pisell/materials';
|
|
19
19
|
import classNames from 'classnames';
|
|
20
20
|
import { locales } from '@pisell/utils';
|
|
@@ -1713,7 +1713,13 @@ var Login2 = function Login2(_ref) {
|
|
|
1713
1713
|
}, locales.getText('pisell-login2-remember-me'))), /*#__PURE__*/React.createElement("a", {
|
|
1714
1714
|
className: "login2-link",
|
|
1715
1715
|
onClick: handleForgotPasswordClick
|
|
1716
|
-
}, locales.getText('pisell-login2-forgot-password'))), /*#__PURE__*/React.createElement(
|
|
1716
|
+
}, locales.getText('pisell-login2-forgot-password'))), /*#__PURE__*/React.createElement(ConfigProvider, {
|
|
1717
|
+
theme: {
|
|
1718
|
+
token: {
|
|
1719
|
+
colorPrimary: (ui === null || ui === void 0 ? void 0 : ui.themeColor) || '#7F56D9'
|
|
1720
|
+
}
|
|
1721
|
+
}
|
|
1722
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1717
1723
|
type: "primary",
|
|
1718
1724
|
size: "large",
|
|
1719
1725
|
block: true,
|
|
@@ -1721,7 +1727,7 @@ var Login2 = function Login2(_ref) {
|
|
|
1721
1727
|
loading: loading,
|
|
1722
1728
|
onClick: handleFormSubmit,
|
|
1723
1729
|
className: "login2-submit-button"
|
|
1724
|
-
}, isPasswordStep ? locales.getText('pisell-login2-login-button') : isEmail ? locales.getText('pisell-login2-continue-with-email') : locales.getText('pisell-login2-continue-with-phone')), showPasswordField && /*#__PURE__*/React.createElement(Button, {
|
|
1730
|
+
}, isPasswordStep ? locales.getText('pisell-login2-login-button') : isEmail ? locales.getText('pisell-login2-continue-with-email') : locales.getText('pisell-login2-continue-with-phone'))), showPasswordField && /*#__PURE__*/React.createElement(Button, {
|
|
1725
1731
|
size: "large",
|
|
1726
1732
|
block: true,
|
|
1727
1733
|
onClick: handleBackToAccount,
|
|
@@ -325,18 +325,6 @@
|
|
|
325
325
|
font-weight: 600;
|
|
326
326
|
color: #ffffff;
|
|
327
327
|
|
|
328
|
-
&:hover:not(:disabled) {
|
|
329
|
-
background: #6941c6;
|
|
330
|
-
border-color: #6941c6;
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
&:focus {
|
|
334
|
-
background: var(--theme-color, #7f56d9);
|
|
335
|
-
border-color: var(--theme-color, #7f56d9);
|
|
336
|
-
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
|
|
337
|
-
0px 0px 0px 4px rgba(127, 86, 217, 0.1);
|
|
338
|
-
}
|
|
339
|
-
|
|
340
328
|
&:disabled {
|
|
341
329
|
background: #f2f4f7;
|
|
342
330
|
border-color: #f2f4f7;
|
|
@@ -15,7 +15,7 @@ export declare const useStoreRef: <T extends {
|
|
|
15
15
|
readonly numRef: React.MutableRefObject<string | number | undefined>;
|
|
16
16
|
readonly orderIdRef: React.MutableRefObject<string | number>;
|
|
17
17
|
readonly modeRef: React.MutableRefObject<ModeEnum>;
|
|
18
|
-
readonly statusRef: React.MutableRefObject<"loading" | "
|
|
18
|
+
readonly statusRef: React.MutableRefObject<"loading" | "success" | "warn" | "fail" | "pedding" | "resove" | "reject" | "question">;
|
|
19
19
|
readonly netRef: React.MutableRefObject<boolean | undefined>;
|
|
20
20
|
readonly symbolRef: React.MutableRefObject<string>;
|
|
21
21
|
readonly amountRef: React.MutableRefObject<string | number>;
|
|
@@ -174,7 +174,7 @@ export declare const updateCustom: (payload: {
|
|
|
174
174
|
export declare const updateStatus: (status: 'loading' | 'warn' | 'fail' | 'success' | 'question') => {
|
|
175
175
|
type: EActionTypes;
|
|
176
176
|
payload: {
|
|
177
|
-
status: "loading" | "
|
|
177
|
+
status: "loading" | "success" | "warn" | "fail" | "question";
|
|
178
178
|
};
|
|
179
179
|
};
|
|
180
180
|
/**
|
|
@@ -308,7 +308,7 @@ export declare const backUpFree: (payload: Partial<State>) => {
|
|
|
308
308
|
net?: boolean | undefined;
|
|
309
309
|
component?: string | undefined;
|
|
310
310
|
form?: string | undefined;
|
|
311
|
-
status?: "loading" | "
|
|
311
|
+
status?: "loading" | "success" | "warn" | "fail" | "pedding" | "resove" | "reject" | "question" | undefined;
|
|
312
312
|
warn?: string | undefined;
|
|
313
313
|
steps?: {
|
|
314
314
|
/** 用于重置当前步骤 */
|