@pisell/private-materials 6.7.3 → 6.7.5

package/es/plus/walletPassGallery/components/recharge/index.js

@@ -32,6 +32,10 @@ var Recharge = function Recharge(_ref) {
     storage = _ref2.storage;
   var dvaStore = (_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 || (_context$appHelper2 = _context$appHelper2.utils) === null || _context$appHelper2 === void 0 || (_context$appHelper2$g = _context$appHelper2.getStore) === null || _context$appHelper2$g === void 0 || (_context$appHelper2$g = _context$appHelper2$g.call(_context$appHelper2)) === null || _context$appHelper2$g === void 0 ? void 0 : _context$appHelper2$g.getState();
   var shop = (dvaStore === null || dvaStore === void 0 || (_dvaStore$core = dvaStore.core) === null || _dvaStore$core === void 0 || (_dvaStore$core = _dvaStore$core.core) === null || _dvaStore$core === void 0 ? void 0 : _dvaStore$core.shop) || {};
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
   useEffect(function () {
     if (detailData) {
       setChargeItem(((detailData === null || detailData === void 0 ? void 0 : detailData.gift_option) || [])[0]);
@@ -44,6 +48,7 @@ var Recharge = function Recharge(_ref) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.prev = 0;
+            setLoading(true);
             params = {
               voucher_id: (detailData === null || detailData === void 0 ? void 0 : detailData.id) || '',
               product_id: (detailData === null || detailData === void 0 ? void 0 : detailData.product_id) || '',
@@ -57,9 +62,9 @@ var Recharge = function Recharge(_ref) {
                 currency_format: (shop === null || shop === void 0 ? void 0 : shop.currency_format) || ''
               }
             };
-            _context.next = 4;
+            _context.next = 5;
             return orderRechargeProduct(params);
-          case 4:
+          case 5:
             data = _context.sent;
             if (data !== null && data !== void 0 && data.order_id) {
               storage === null || storage === void 0 || (_storage$set = storage.set) === null || _storage$set === void 0 || _storage$set.call(storage, 'orderId', data.order_id);
@@ -69,23 +74,28 @@ var Recharge = function Recharge(_ref) {
                 callback: function callback() {}
               });
             }
-            _context.next = 11;
+            _context.next = 12;
             break;
-          case 8:
-            _context.prev = 8;
+          case 9:
+            _context.prev = 9;
             _context.t0 = _context["catch"](0);
             console.error(locales.getText('wallet-pass-gallery.log.rechargeOrderFailed'), _context.t0);
-          case 11:
+          case 12:
+            _context.prev = 12;
+            setLoading(false);
+            return _context.finish(12);
+          case 15:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 8]]);
+      }, _callee, null, [[0, 9, 12, 15]]);
     }));
     return function handleRecharge() {
       return _ref3.apply(this, arguments);
     };
   }();
   return /*#__PURE__*/React.createElement(Drawer, {
+    destroyOnClose: true,
     title: locales.getText('wallet-pass-gallery.rechargeOptions'),
     open: open,
     zIndex: 999,
@@ -97,7 +107,8 @@ var Recharge = function Recharge(_ref) {
       block: true,
       size: "large",
       onClick: handleRecharge,
-      disabled: !(chargeItem !== null && chargeItem !== void 0 && chargeItem.id)
+      disabled: !(chargeItem !== null && chargeItem !== void 0 && chargeItem.id),
+      loading: loading
     }, locales.getText('wallet-pass-gallery.recharge'))
   }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-wallet-pass-gallery_recharge"

package/es/plus/walletPassGallery/index.js

@@ -82,7 +82,8 @@ var WalletPassGallery = function WalletPassGallery(props) {
               num: 20,
               skip: (d === null || d === void 0 ? void 0 : d.nextId) || 1,
               tags: TAGS,
-              filter_wallet_id: walletId || undefined
+              filter_wallet_id: walletId || undefined,
+              "with": ['customScheduleSnapshot']
             });
           case 3:
             res = _context.sent;
@@ -121,7 +122,8 @@ var WalletPassGallery = function WalletPassGallery(props) {
               num: 20,
               skip: (d === null || d === void 0 ? void 0 : d.nextId) || 1,
               tags: TAGS,
-              filter_wallet_id: walletId || undefined
+              filter_wallet_id: walletId || undefined,
+              "with": ['customScheduleSnapshot']
             });
           case 3:
             res = _context2.sent;
@@ -552,7 +554,9 @@ var WalletPassGallery = function WalletPassGallery(props) {
       },
       block: true
     }, locales.getText('wallet-pass-gallery.button.add'))), /*#__PURE__*/React.createElement(PisellModal, {
-      platform: 'h5',
+      zIndex: 997,
+      destroyOnClose: true,
+      platform: platform,
       visible: !!_currentItem,
       onCancel: function onCancel() {
         return setCurrentItemId('');

package/es/plus/walletPassGallery/serve.js

@@ -214,10 +214,12 @@ export var getDetailApi = /*#__PURE__*/function () {
       while (1) switch (_context6.prev = _context6.next) {
         case 0:
           _context6.next = 2;
-          return request.getRequest().get("/h5/machinecode/lowcode/detail/".concat(params.id), {
+          return request.getRequest().get("".concat(params.apiPrefix || '/h5', "/machinecode/lowcode/detail/").concat(params.id), {
             order_behavior_count: 1,
             // 订单行为次数
-            order_behavior_count_customer: 1 // 客户订单行为次数
+            order_behavior_count_customer: 1,
+            // 客户订单行为次数
+            order_behavior_count_customer_id: params.apiPrefix === '/shop' ? params.order_behavior_count_customer_id : undefined
           });
         case 2:
           _yield$request$getReq6 = _context6.sent;

package/es/plus/webPosLogin/WebPosLogin.js

@@ -24,7 +24,7 @@ var useSearchParams = function useSearchParams() {
   return new URLSearchParams(window.location.search);
 };
 var WebPosLogin = function WebPosLogin(props) {
-  var _context$appHelper, _context$engine;
+  var _context$appHelper, _context$appHelper2, _mediaConfig$loginBgM, _context$engine;
   var context = useEngineContext();
   var _context$appHelper$ut = (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils,
     _context$appHelper$ut2 = _context$appHelper$ut.getApp,
@@ -32,6 +32,8 @@ var WebPosLogin = function WebPosLogin(props) {
       return {};
     } : _context$appHelper$ut2,
     reloadAfterLogin = _context$appHelper$ut.reloadAfterLogin;
+  var _context$appHelper$co = (_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 ? void 0 : _context$appHelper2.constants,
+    mediaConfig = _context$appHelper$co.mediaConfig;
   var backgroundImage = props.backgroundImage,
     _props$step = props.step,
     propsStep = _props$step === void 0 ? 'login' : _props$step,
@@ -523,13 +525,8 @@ var WebPosLogin = function WebPosLogin(props) {
   };
   return /*#__PURE__*/React.createElement(WebPosLoginCpt, {
     loginConfig: config,
-    backgroundImage: backgroundImage,
-    brandConfig: {
-      carouselItems: [{
-        type: 'image',
-        url: 'https://static.pisellcdn.com/defaultLogo.png'
-      }]
-    },
+    backgroundImage: backgroundImage || ((_mediaConfig$loginBgM = mediaConfig.loginBgMediaConfig) === null || _mediaConfig$loginBgM === void 0 || (_mediaConfig$loginBgM = _mediaConfig$loginBgM[0]) === null || _mediaConfig$loginBgM === void 0 ? void 0 : _mediaConfig$loginBgM.url),
+    brandConfig: mediaConfig.loginMediaConfig,
     step: step,
     showBackButton: isShowGoBack,
     storeList: storeList,

package/es/plus/webPosLogin/WebPosLoginCpt.js

@@ -15,7 +15,7 @@ import UserFooter from "./components/UserFooter";
 import "./WebPosLoginCpt.less";
 
 /** 默认背景图片 */
-var DEFAULT_BACKGROUND = 'http://static.pisellcdn.com/defaultBg.png';
+var DEFAULT_BACKGROUND = 'http://static.pisellcdn.com/defaultBg1.jpg';
 
 /**
  * WebPosLoginCpt 主组件

package/es/plus/webPosLogin/components/BrandPanel/index.js

@@ -1,6 +1,6 @@
-import React, { memo, useMemo } from 'react';
-import { Image } from '@pisell/materials';
+import React, { memo } from 'react';
 import "./index.less";
+import MediaDisplay from "../MediaDisplay";
 
 /**
  * BrandPanel 品牌区组件
@@ -10,43 +10,13 @@ var BrandPanel = /*#__PURE__*/memo(function (props) {
   var config = props.config,
     _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className;
-
-  /**
-   * 获取展示的图片
-   * 优先使用轮播的第一张图片，否则使用 logo，最后使用默认 Logo
-   */
-  var displayImage = useMemo(function () {
-    var _config$carouselItems;
-    // 如果有轮播配置，取第一个图片类型的内容
-    if (config !== null && config !== void 0 && (_config$carouselItems = config.carouselItems) !== null && _config$carouselItems !== void 0 && _config$carouselItems.length) {
-      var firstImage = config.carouselItems.find(function (item) {
-        return item.type === 'image';
-      });
-      if (firstImage !== null && firstImage !== void 0 && firstImage.url) {
-        return firstImage.url;
-      }
-    }
-    // 否则使用配置的 logo 或默认 logo
-    return config === null || config === void 0 ? void 0 : config.logo;
-  }, [config === null || config === void 0 ? void 0 : config.carouselItems, config === null || config === void 0 ? void 0 : config.logo]);
-
-  /** 品牌标语 */
-  var slogan = config === null || config === void 0 ? void 0 : config.slogan;
-  console.log('displayImage', displayImage);
   return /*#__PURE__*/React.createElement("div", {
     className: "webpos-login-brand-panel ".concat(className).trim()
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "webpos-login-brand-panel__content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "webpos-login-brand-panel__logo-wrapper"
-  }, /*#__PURE__*/React.createElement(Image, {
-    src: displayImage,
-    preview: false,
-    alt: "Brand Logo",
-    className: "webpos-login-brand-panel__logo"
-  })), slogan && /*#__PURE__*/React.createElement("p", {
-    className: "webpos-login-brand-panel__slogan"
-  }, slogan)));
+  }, /*#__PURE__*/React.createElement(MediaDisplay, {
+    config: {
+      carouselItems: config
+    }
+  }));
 });
 BrandPanel.displayName = 'BrandPanel';
 export default BrandPanel;

package/es/plus/webPosLogin/components/MediaDisplay/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MediaDisplayProps } from "./type";
+import './index.less';
+/**
+ * MediaDisplay 媒体组件
+ * @description 通用媒体展示组件，支持图片/视频展示
+ * - 支持单个媒体或轮播（预留）
+ * - 支持全屏模式
+ * - 支持视频播放控制和状态回调
+ */
+declare const MediaDisplay: React.FC<MediaDisplayProps>;
+export default MediaDisplay;

package/es/plus/webPosLogin/components/MediaDisplay/index.js

@@ -0,0 +1,220 @@
+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; }
+import React, { memo, useMemo, useRef, useEffect, useState, useCallback } from 'react';
+import { Image } from '@pisell/materials';
+import "./index.less";
+
+/**
+ * MediaDisplay 媒体组件
+ * @description 通用媒体展示组件，支持图片/视频展示
+ * - 支持单个媒体或轮播（预留）
+ * - 支持全屏模式
+ * - 支持视频播放控制和状态回调
+ */
+var MediaDisplay = /*#__PURE__*/memo(function (props) {
+  var _config$carouselItems3;
+  var config = props.config,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$fullscreen = props.fullscreen,
+    fullscreen = _props$fullscreen === void 0 ? false : _props$fullscreen,
+    _props$muted = props.muted,
+    muted = _props$muted === void 0 ? true : _props$muted,
+    _props$loop = props.loop,
+    loop = _props$loop === void 0 ? false : _props$loop,
+    onVideoEnded = props.onVideoEnded,
+    onVideoStateChange = props.onVideoStateChange,
+    _props$canClose = props.canClose,
+    canClose = _props$canClose === void 0 ? true : _props$canClose,
+    onClose = props.onClose;
+  var videoRef = useRef(null);
+  var _useState = useState('idle'),
+    _useState2 = _slicedToArray(_useState, 2),
+    videoState = _useState2[0],
+    setVideoState = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isVideoEnded = _useState4[0],
+    setIsVideoEnded = _useState4[1];
+
+  /**
+   * 获取当前要展示的媒体项
+   * 如果只有一个媒体项，直接返回；否则返回第一个（轮播逻辑预留）
+   */
+  var currentMedia = useMemo(function () {
+    var _config$carouselItems;
+    if (config !== null && config !== void 0 && (_config$carouselItems = config.carouselItems) !== null && _config$carouselItems !== void 0 && _config$carouselItems.length) {
+      // 目前只取第一个，轮播逻辑预留
+      return config.carouselItems[0];
+    }
+    // 如果有 logo，构造为图片类型
+    if (config !== null && config !== void 0 && config.logo) {
+      return {
+        type: 'image',
+        url: config.logo
+      };
+    }
+    return null;
+  }, [config === null || config === void 0 ? void 0 : config.carouselItems, config === null || config === void 0 ? void 0 : config.logo]);
+
+  /**
+   * 是否为视频类型
+   */
+  var isVideo = (currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.type) === 'video';
+
+  /**
+   * 是否为单一媒体（不需要显示切换控件）
+   */
+  var isSingleMedia = useMemo(function () {
+    var _config$carouselItems2;
+    var itemCount = (config === null || config === void 0 || (_config$carouselItems2 = config.carouselItems) === null || _config$carouselItems2 === void 0 ? void 0 : _config$carouselItems2.length) || 0;
+    // 只有一个轮播项，或者没有轮播项但有 logo
+    return itemCount <= 1;
+  }, [config === null || config === void 0 || (_config$carouselItems3 = config.carouselItems) === null || _config$carouselItems3 === void 0 ? void 0 : _config$carouselItems3.length]);
+
+  /**
+   * 更新视频播放状态
+   */
+  var updateVideoState = useCallback(function (state) {
+    setVideoState(state);
+    onVideoStateChange === null || onVideoStateChange === void 0 || onVideoStateChange(state);
+  }, [onVideoStateChange]);
+
+  /**
+   * 处理视频播放结束
+   */
+  var handleVideoEnded = useCallback(function () {
+    setIsVideoEnded(true);
+    updateVideoState('ended');
+    onVideoEnded === null || onVideoEnded === void 0 || onVideoEnded();
+
+    // 如果可以关闭，触发关闭回调
+    if (canClose) {
+      onClose === null || onClose === void 0 || onClose();
+    }
+    // 如果不能关闭（初始化未完成），视频会停在最后一帧等待
+    // 外部通过修改 canClose 为 true 后，组件会在下次渲染时触发 onClose
+  }, [canClose, onClose, onVideoEnded, updateVideoState]);
+
+  /**
+   * 监听 canClose 变化，如果视频已结束且 canClose 变为 true，触发关闭
+   */
+  useEffect(function () {
+    if (isVideoEnded && canClose) {
+      onClose === null || onClose === void 0 || onClose();
+    }
+  }, [isVideoEnded, canClose, onClose]);
+
+  /**
+   * 视频事件处理
+   */
+  useEffect(function () {
+    var video = videoRef.current;
+    if (!video || !isVideo) return;
+    var handlePlay = function handlePlay() {
+      return updateVideoState('playing');
+    };
+    var handlePause = function handlePause() {
+      return updateVideoState('paused');
+    };
+    var handleError = function handleError() {
+      return updateVideoState('error');
+    };
+    var handleLoadedData = function handleLoadedData() {
+      // 视频加载完成后自动播放
+      video.play().catch(function (err) {
+        console.warn('[MediaDisplay] 视频自动播放失败:', err);
+        updateVideoState('error');
+      });
+    };
+    video.addEventListener('play', handlePlay);
+    video.addEventListener('pause', handlePause);
+    video.addEventListener('ended', handleVideoEnded);
+    video.addEventListener('error', handleError);
+    video.addEventListener('loadeddata', handleLoadedData);
+    return function () {
+      video.removeEventListener('play', handlePlay);
+      video.removeEventListener('pause', handlePause);
+      video.removeEventListener('ended', handleVideoEnded);
+      video.removeEventListener('error', handleError);
+      video.removeEventListener('loadeddata', handleLoadedData);
+    };
+  }, [isVideo, handleVideoEnded, updateVideoState]);
+
+  /** 品牌标语 */
+  var slogan = config === null || config === void 0 ? void 0 : config.slogan;
+
+  /**
+   * 渲染媒体内容
+   */
+  var renderMedia = function renderMedia() {
+    if (!currentMedia) {
+      return null;
+    }
+    if (currentMedia.type === 'video') {
+      return /*#__PURE__*/React.createElement("video", {
+        style: {
+          backgroundColor: currentMedia.backgroundColor
+        },
+        ref: videoRef,
+        src: currentMedia.url,
+        className: "media-display__video",
+        muted: muted,
+        loop: loop,
+        playsInline: true,
+        autoPlay: true
+      });
+    }
+    if (currentMedia.type === 'logo') {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "media-display__logo-wrapper"
+      }, /*#__PURE__*/React.createElement(Image, {
+        style: currentMedia.logoStyle,
+        src: currentMedia.url,
+        preview: false
+      }));
+    }
+
+    // 图片类型
+    return /*#__PURE__*/React.createElement("div", {
+      className: "media-display__image-wrapper"
+    }, /*#__PURE__*/React.createElement(Image, {
+      style: {
+        width: '100%',
+        height: '100%',
+        backgroundColor: currentMedia.backgroundColor
+      },
+      src: currentMedia.url,
+      preview: false,
+      alt: "Media",
+      className: "media-display__image"
+    }));
+  };
+
+  // 全屏模式
+  if (fullscreen) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "media-display media-display--fullscreen ".concat(className).trim()
+    }, renderMedia());
+  }
+  console.log(currentMedia, 'currentMedia');
+
+  // 普通模式（品牌面板样式）
+  return /*#__PURE__*/React.createElement("div", {
+    className: "webpos-login-brand-panel ".concat(className).trim()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "webpos-login-brand-panel__content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "webpos-login-brand-panel__logo-wrapper"
+  }, renderMedia()), slogan && /*#__PURE__*/React.createElement("p", {
+    className: "webpos-login-brand-panel__slogan"
+  }, slogan), !isSingleMedia && /*#__PURE__*/React.createElement("div", {
+    className: "webpos-login-brand-panel__carousel-controls"
+  })));
+});
+MediaDisplay.displayName = 'MediaDisplay';
+export default MediaDisplay;

package/es/plus/webPosLogin/components/MediaDisplay/index.less

@@ -0,0 +1,141 @@
+/**
+ * MediaDisplay 媒体展示组件样式
+ */
+
+/* 全屏模式 */
+.media-display {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  /* 全屏模式 */
+  &--fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+    /* 背景色由 JS 动态设置（从视频帧提取主色），这里设置默认回退值 */
+    background: #000;
+
+    /* 全屏模式下视频铺满 */
+    .media-display__video {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  /* 视频样式（普通模式） */
+  &__video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  /* 图片容器 */
+  &__image-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .pisell-lowcode-image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  /* 图片样式 */
+  &__image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+  }
+}
+
+/**
+ * BrandPanel 品牌区组件样式（普通模式）
+ */
+.webpos-login-brand-panel {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50%;
+  min-width: 400px;
+  min-height: 600px;
+  background: linear-gradient(135deg, #F04A28 0%, #E8421F 100%);
+  border-radius: 24px 0 0 24px;
+  overflow: hidden;
+  flex-shrink: 0;
+
+  /* 品牌内容区 */
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    text-align: center;
+  }
+
+  /* Logo/媒体 容器 */
+  &__logo-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 320px;
+
+    /* 视频在品牌面板中的样式 */
+    video {
+      max-width: 100%;
+      max-height: 240px;
+      border-radius: 8px;
+    }
+  }
+
+  /* Logo 图片 */
+  &__logo {
+    max-width: 100%;
+    max-height: 120px;
+    object-fit: contain;
+  }
+
+  /* 品牌标语 */
+  &__slogan {
+    margin-top: 16px;
+    font-size: 18px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.9);
+    letter-spacing: 0.5px;
+    line-height: 1.5;
+  }
+
+  /* 轮播控件（预留） */
+  &__carousel-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+    gap: 8px;
+  }
+}
+
+/* 响应式适配 */
+@media screen and (max-width: 768px) {
+  .webpos-login-brand-panel {
+    display: none;
+  }
+
+  /* 全屏模式在移动端仍然显示 */
+  .media-display--fullscreen {
+    display: flex;
+  }
+}

package/es/plus/webPosLogin/components/MediaDisplay/type.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+/**
+ * 媒体轮播项
+ * @description 媒体展示区的轮播内容配置
+ */
+export interface CarouselItem {
+    /** 内容类型：图片或视频 */
+    type: 'image' | 'video' | 'logo';
+    /** 资源URL */
+    url: string;
+    /** 背景颜色 */
+    backgroundColor?: string;
+    /** logo样式 */
+    logoStyle?: React.CSSProperties;
+}
+/**
+ * 媒体配置
+ * @description 媒体展示区域的配置
+ */
+export interface MediaConfig {
+    /** 轮播内容列表（图片/视频） */
+    carouselItems?: CarouselItem[];
+    /** 默认Logo（当无轮播时显示） */
+    logo?: string;
+    /** 品牌标语 */
+    slogan?: string;
+}
+/**
+ * 视频播放状态
+ */
+export declare type VideoPlayState = 'idle' | 'playing' | 'paused' | 'ended' | 'error';
+/**
+ * MediaDisplay 媒体展示组件 Props
+ */
+export interface MediaDisplayProps {
+    /** 品牌配置 */
+    config?: MediaConfig;
+    /** 自定义类名 */
+    className?: string;
+    /** 是否全屏模式 */
+    fullscreen?: boolean;
+    /** 视频是否静音，默认 true */
+    muted?: boolean;
+    /** 视频是否循环播放，默认 false */
+    loop?: boolean;
+    /** 视频播放结束回调 */
+    onVideoEnded?: () => void;
+    /** 视频播放状态变化回调 */
+    onVideoStateChange?: (state: VideoPlayState) => void;
+    /** 是否可以关闭（用于控制视频结束后是否允许关闭） */
+    canClose?: boolean;
+    /** 关闭回调（视频结束且 canClose 为 true 时触发） */
+    onClose?: () => void;
+}

package/es/plus/webPosLogin/components/MediaDisplay/type.js

@@ -0,0 +1 @@
+export {};