@pisell/private-materials 6.4.82 → 6.4.84

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 {};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DeviceItem, LocaleType } from '../../types';
+import './index.less';
+/**
+ * SelectDevice 组件 Props
+ */
+export interface SelectDeviceProps {
+    /** 设备列表 */
+    deviceList?: DeviceItem[];
+    /** 语言 */
+    locale?: LocaleType;
+    /** 加载状态（列表加载） */
+    loading?: boolean;
+    /** 上次使用的设备ID */
+    lastUsedDeviceId?: number;
+    /** 选择设备回调 */
+    onSelect?: (device: DeviceItem) => void;
+    /** 确认按钮文本 */
+    confirmOkText?: string;
+    /** 取消按钮文本 */
+    confirmCancelText?: string;
+}
+/**
+ * SelectDevice 设备选择组件
+ * @description 展示设备列表，支持搜索过滤和选择，已被使用的设备需确认后选择
+ */
+declare const SelectDevice: React.FC<SelectDeviceProps>;
+export default SelectDevice;