pixuireactcomponents 1.5.46 → 1.5.48

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.5.46",
+    "version": "1.5.48",
     "description": "pixui react components",
     "main": "index.js",
     "sideEffects": false,

package/src/components/react/app/carousel/Carousel.js

@@ -23,28 +23,38 @@ import { useImperativeHandle, useState, useRef, useMemo, useEffect } from 'preac
 // import { memo } from '../../../../../lib/preact/compat/src';
 //组件优化，防止组件的props没有改变但父组件刷新时导致组件刷新
 // export let Carousel = memo(Carouselinner, (prev, next) => {
-//     // console.log('prev', prev, 'next', next);
+//     // debugLog('prev', prev, 'next', next);
 //     let isSame = true;
 //     Object.keys(prev).forEach((key) => {
 //         if (key === 'children') {
-//             console.log('kkk', prev.children.length, next.children.length);
+//             debugLog('kkk', prev.children.length, next.children.length);
 //             if (prev.children.length !== next.children.length) {
-//                 console.log('fffffffffffffffff children');
+//                 debugLog('fffffffffffffffff children');
 //                 isSame = false;
 //             }
 //             for (let i = 0; i < prev.children.length; i++) {
 //                 if (prev.children[i].key !== next.children[i].key) {
-//                     console.log('fffffffffffffffff children nnn');
+//                     debugLog('fffffffffffffffff children nnn');
 //                     isSame = false;
 //                 }
 //             }
 //         } else if (prev[key] !== next[key]) {
-//             console.log('fffffffffffff',prev[key]);
+//             debugLog('fffffffffffff',prev[key]);
 //             isSame = false;
 //         }
 //     });
 //     return isSame;
 // });
+var enableCarouselLog = false;
+var debugLog = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    if (enableCarouselLog) {
+        console.log.apply(console, __spreadArray(['[Carousel Debug]'], args, false));
+    }
+};
 /**
  * 轮播组件
  * @param cRef - 组件引用,其中导出了3个方法：handleNext，handlePrev，setShowIndex
@@ -66,7 +76,7 @@ export function Carousel(props) {
     var _a = props.rootId, rootId = _a === void 0 ? '' : _a, _b = props.rootClassName, rootClassName = _b === void 0 ? '' : _b, _c = props.children, children = _c === void 0 ? [] : _c, _d = props.defaultIndex, defaultIndex = _d === void 0 ? 1 : _d, _e = props.compWidth, compWidth = _e === void 0 ? 100 : _e, _f = props.compHeight, compHeight = _f === void 0 ? 100 : _f, _g = props.autoplay, autoplay = _g === void 0 ? true : _g, _h = props.switchDuration, switchDuration = _h === void 0 ? 3000 : _h, _j = props.loop, loop = _j === void 0 ? true : _j, _k = props.isVertical, isVertical = _k === void 0 ? false : _k, _l = props.touchable, touchable = _l === void 0 ? true : _l, _m = props.onSlideChange, onSlideChange = _m === void 0 ? null : _m, _o = props.onClick, onClick = _o === void 0 ? null : _o, _p = props.touchSwitchDistance, touchSwitchDistance = _p === void 0 ? props.touchSwitchDistance && props.touchSwitchDistance > 0 && props.touchSwitchDistance < 1
         ? props.touchSwitchDistance
         : 0.3 : _p;
-    // console.log('children', children.length);
+    // debugLog('children', children.length);
     var safeNext = function () {
         if (!canClickSwitch.current)
             return;
@@ -96,6 +106,15 @@ export function Carousel(props) {
     }); });
     var duration = switchDuration < 1100 ? 1100 : switchDuration;
     var _q = useState(defaultIndex), showIndex = _q[0], setShowIndex = _q[1];
+    // 监听 showIndex 变化
+    useEffect(function () {
+        debugLog('[Carousel Debug] showIndex变化: ' +
+            JSON.stringify({
+                showIndex: showIndex,
+                defaultIndex: defaultIndex,
+                carouselItemsLength: children.length + 2, // 加上首尾补位
+            }));
+    }, [showIndex]);
     //轮播元素正在滚动
     var isMoving = useRef(false);
     //鼠标手势信息
@@ -108,9 +127,67 @@ export function Carousel(props) {
     var safeNextHandle = useRef();
     var safePrevHandle = useRef();
     var nextInterval = useRef();
-    var _r = useState(true), showTransition = _r[0], setShowTransition = _r[1];
+    // 初始化时关闭动画，避免初始化时尺寸变化导致的闪烁
+    var _r = useState(false), showTransition = _r[0], setShowTransition = _r[1];
     var _s = useState([0, 0]), gestureoffset = _s[0], setGestureoffset = _s[1];
-    var offset = useMemo(function () { return -(isVertical ? compHeight : compWidth) * showIndex; }, [showIndex, compHeight, compWidth]);
+    // 添加初始化保护标志
+    var isInitializing = useRef(true);
+    useEffect(function () {
+        debugLog('[Carousel Debug] showTransition变化: ' +
+            JSON.stringify({
+                showTransition: showTransition,
+                compWidth: compWidth,
+                compHeight: compHeight,
+            }));
+    }, [showTransition]);
+    useEffect(function () {
+        debugLog('[Carousel Debug] 尺寸变化检测: ' +
+            JSON.stringify({
+                compWidth: compWidth,
+                compHeight: compHeight,
+                currentShowIndex: showIndex,
+                defaultIndex: defaultIndex,
+                isInitializing: isInitializing.current,
+            }));
+        // 当尺寸从无效变为有效时，重置到默认索引
+        if (compWidth > 0 && compHeight > 0) {
+            // 只有在初始化期间才重置索引
+            if (isInitializing.current) {
+                debugLog('[Carousel Debug] 初始化期间，重置到默认索引: ' + defaultIndex);
+                setShowIndex(defaultIndex);
+                // 确保动画关闭，避免从错误位置过渡
+                setShowTransition(false);
+                // 标记初始化完成
+                isInitializing.current = false;
+                // 延迟设置自动播放，避免立即触发动画开启逻辑
+                setTimeout(function () {
+                    debugLog('[Carousel Debug] 初始化完成，延迟设置自动播放');
+                    setNextInterval();
+                }, 100);
+            }
+        }
+    }, [compWidth, compHeight]);
+    // 添加调试日志
+    debugLog('[Carousel Debug] 组件渲染 - props: ' +
+        JSON.stringify({
+            compWidth: compWidth,
+            compHeight: compHeight,
+            defaultIndex: defaultIndex,
+            autoplay: autoplay,
+            children: children.length,
+        }));
+    var offset = useMemo(function () {
+        var calculatedOffset = -(isVertical ? compHeight : compWidth) * showIndex;
+        debugLog('[Carousel Debug] offset计算: ' +
+            JSON.stringify({
+                isVertical: isVertical,
+                compWidth: compWidth,
+                compHeight: compHeight,
+                showIndex: showIndex,
+                calculatedOffset: calculatedOffset,
+            }));
+        return calculatedOffset;
+    }, [showIndex, compHeight, compWidth]);
     var itemBoxStyle = {
         minWidth: compWidth + 'px',
         minHeight: compHeight + 'px',
@@ -124,43 +201,131 @@ export function Carousel(props) {
     }, [children]);
     var isLastCarouseItem = function () { return showIndex === carouselItems.length - 1; };
     var isFirstCarouseLastItem = function () { return showIndex === 0; };
+    var lastOnSlideChangeIndex = useRef(-1); //上一次onSlideChange的index，避免重复触发
     useEffect(function () {
-        setNextInterval();
+        // 只有在初始化完成后才设置自动播放
+        if (!isInitializing.current) {
+            debugLog('[Carousel Debug] autoplay变化，设置自动播放');
+            setNextInterval();
+        }
+        else {
+            debugLog('[Carousel Debug] 初始化期间，跳过autoplay变化处理');
+        }
     }, [autoplay]);
     //组件展示内容长度改变的时候改回到第一个元素，刷新autoplay判断
     useEffect(function () {
-        setNextInterval();
-        setShowIndex(defaultIndex);
+        debugLog('[Carousel Debug] children变化: ' +
+            JSON.stringify({
+                childrenLength: children.length,
+                defaultIndex: defaultIndex,
+                compWidth: compWidth,
+                compHeight: compHeight,
+                isInitializing: isInitializing.current,
+            }));
+        // 只有在初始化完成后才设置自动播放和重置索引
+        if (!isInitializing.current) {
+            setNextInterval();
+            // 只有在尺寸有效时才重置索引，避免在初始化时干扰尺寸变化监听
+            if (compWidth > 0 && compHeight > 0) {
+                debugLog('[Carousel Debug] children变化时重置索引: ' + defaultIndex);
+                setShowIndex(defaultIndex);
+            }
+        }
+        else {
+            debugLog('[Carousel Debug] 初始化期间，跳过children变化处理');
+        }
     }, [children]);
     useEffect(function () {
+        debugLog('[Carousel Debug] showIndex useEffect触发: ' +
+            JSON.stringify({
+                showIndex: showIndex,
+                isLast: isLastCarouseItem(),
+                isFirst: isFirstCarouseLastItem(),
+                isInitializing: isInitializing.current,
+            }));
         //每次跳转前判断打开动画，否则动画关闭以后不会调用handleTransitionEnd
-        if (!isLastCarouseItem() && !isFirstCarouseLastItem()) {
+        // 但在初始化期间不开启动画
+        if (!isLastCarouseItem() && !isFirstCarouseLastItem() && !isInitializing.current) {
+            debugLog('[Carousel Debug] 因showIndex变化开启动画');
             setShowTransition(true);
         }
+        else if (isInitializing.current) {
+            debugLog('[Carousel Debug] 初始化期间，跳过showIndex动画开启');
+        }
     }, [showIndex]);
     //更新handleNext的环境
     useEffect(function () {
         handleNextRef.current = handleNext;
     });
     var setNextInterval = function () {
+        debugLog('[Carousel Debug] setNextInterval调用: ' +
+            JSON.stringify({
+                childrenLength: children.length,
+                autoplay: autoplay,
+                compWidth: compWidth,
+                compHeight: compHeight,
+                duration: duration,
+                isInitializing: isInitializing.current,
+            }));
         nextInterval.current && clearInterval(nextInterval.current);
-        if (children.length > 1 && autoplay) {
+        // 只有在初始化完成后才设置自动播放
+        if (children.length > 1 && autoplay && !isInitializing.current) {
+            debugLog('[Carousel Debug] 设置自动播放定时器');
             nextInterval.current = setInterval(function () {
                 handleNextRef.current();
             }, duration);
         }
+        else {
+            debugLog('[Carousel Debug] 跳过自动播放设置:', {
+                childrenLength: children.length,
+                autoplay: autoplay,
+                isInitializing: isInitializing.current,
+            });
+        }
+        // 当组件开始正常工作时（有子元素且尺寸有效），开启动画
+        // 但避免在尺寸刚变为有效时立即开启，给尺寸重置逻辑一些时间
+        var shouldEnableTransition = children.length > 0 && compWidth > 0 && compHeight > 0;
+        debugLog('[Carousel Debug] 动画状态检查: ' +
+            JSON.stringify({
+                shouldEnableTransition: shouldEnableTransition,
+                currentShowTransition: showTransition,
+                isInitializing: isInitializing.current,
+            }));
+        // 只有在初始化完成后且当前没有动画时才开启动画
+        if (shouldEnableTransition && showTransition === false && !isInitializing.current) {
+            // 延迟开启动画，确保尺寸重置完成
+            setTimeout(function () {
+                // 再次检查初始化状态，确保在延迟期间没有重新初始化
+                if (!isInitializing.current) {
+                    debugLog('[Carousel Debug] 延迟开启动画过渡');
+                    setShowTransition(true);
+                }
+                else {
+                    debugLog('[Carousel Debug] 延迟期间仍在初始化，跳过动画开启');
+                }
+            }, 50);
+        }
+        else {
+            debugLog('[Carousel Debug] 跳过动画开启:', {
+                shouldEnableTransition: shouldEnableTransition,
+                showTransition: showTransition,
+                isInitializing: isInitializing.current,
+            });
+        }
     };
     useEffect(function () {
-        console.log('Carousel init');
-        setNextInterval();
+        debugLog('[Carousel Debug] 组件初始化开始');
+        debugLog('Carousel init');
+        // 初始化期间不设置自动播放
+        // setNextInterval();
         window.addEventListener('close', function () {
-            console.log('Carousel close');
+            debugLog('Carousel close');
             nextInterval.current && clearInterval(nextInterval.current);
             safeNextHandle.current && clearTimeout(safeNextHandle.current);
             safePrevHandle.current && clearTimeout(safePrevHandle.current);
         });
         return function () {
-            console.log('Carousel useEffect close');
+            debugLog('Carousel useEffect close');
             nextInterval.current && clearInterval(nextInterval.current);
             safeNextHandle.current && clearTimeout(safeNextHandle.current);
             safePrevHandle.current && clearTimeout(safePrevHandle.current);
@@ -188,21 +353,39 @@ export function Carousel(props) {
         setShowIndex(showIndex + 1);
     };
     var handleTransitionEnd = function () {
+        debugLog('[Carousel Debug] 动画结束: ' +
+            JSON.stringify({
+                showIndex: showIndex,
+                isLast: isLastCarouseItem(),
+                isFirst: isFirstCarouseLastItem(),
+                isInitializing: isInitializing.current,
+            }));
         //判断前后补位元素准备跳转
         //在动画结束以后关掉，否则用鼠标拖动的时候不能补充剩下的offset
         if (isLastCarouseItem() || isFirstCarouseLastItem()) {
+            debugLog('[Carousel Debug] 因首尾特殊情况关闭动画');
             setShowTransition(false);
         }
         isMoving.current = false;
         //触发onSlideChange
-        if (!isLastCarouseItem() && !isFirstCarouseLastItem() && onSlideChange && showTransition)
+        if (!isLastCarouseItem() && !isFirstCarouseLastItem() && onSlideChange && lastOnSlideChangeIndex.current !== showIndex) {
+            debugLog('[Carousel Debug] 触发onSlideChange: ' + (showIndex - 1));
             onSlideChange(showIndex - 1);
-        // 处理首尾特殊case
-        if (isLastCarouseItem()) {
-            setShowIndex(1);
+            lastOnSlideChangeIndex.current = showIndex;
         }
-        if (isFirstCarouseLastItem()) {
-            setShowIndex(carouselItems.length - 2);
+        // 处理首尾特殊case，但在初始化期间跳过
+        if (!isInitializing.current) {
+            if (isLastCarouseItem()) {
+                debugLog('[Carousel Debug] 处理末尾case，跳转到索引1');
+                setShowIndex(1);
+            }
+            if (isFirstCarouseLastItem()) {
+                debugLog('[Carousel Debug] 处理开头case，跳转到索引' + (carouselItems.length - 2));
+                setShowIndex(carouselItems.length - 2);
+            }
+        }
+        else {
+            debugLog('[Carousel Debug] 初始化期间，跳过首尾特殊情况处理');
         }
     };
     var gestureUp = function () {
@@ -251,13 +434,13 @@ export function Carousel(props) {
             if (showIndex == 1) {
                 if (!isVertical) {
                     if (x - mouseDownX.current > 0) {
-                        // console.log('stop x', x);
+                        // debugLog('stop x', x);
                         return;
                     }
                 }
                 else {
                     if (y - mouseDownY.current < 0) {
-                        // console.log('stop y', y);
+                        // debugLog('stop y', y);
                         return;
                     }
                 }
@@ -265,13 +448,13 @@ export function Carousel(props) {
             else if (showIndex == carouselItems.length - 2) {
                 if (!isVertical) {
                     if (x - mouseDownX.current < 0) {
-                        // console.log('stop x', x);
+                        // debugLog('stop x', x);
                         return;
                     }
                 }
                 else {
                     if (y - mouseDownY.current < 0) {
-                        // console.log('stop y', y);
+                        // debugLog('stop y', y);
                         return;
                     }
                 }
@@ -304,6 +487,18 @@ export function Carousel(props) {
             onClick(showIndex - 1);
         }
     };
+    // 渲染时关键样式信息
+    var transformValue = isVertical ? "translate(0px, ".concat(offset + gestureoffset[1], "px)") : "translate(".concat(offset + gestureoffset[0], "px, 0px)");
+    var transitionValue = "transform ".concat(showTransition ? '0.4s' : '0s', " ease 0s");
+    debugLog('[Carousel Debug] 渲染样式: ' +
+        JSON.stringify({
+            transformValue: transformValue,
+            transitionValue: transitionValue,
+            showTransition: showTransition,
+            offset: offset,
+            gestureoffset: gestureoffset,
+            carouselItemsLength: carouselItems.length,
+        }));
     return (h("div", { style: { flexDirection: 'column', width: compWidth, height: compHeight }, id: rootId, className: rootClassName },
         h("div", { draggable: true, style: __assign(__assign({}, itemBoxStyle), { position: 'absolute' }), onClick: function (ev) {
                 gestureClick(props);
@@ -325,10 +520,8 @@ export function Carousel(props) {
                         display: 'flex',
                         width: isVertical ? compWidth : compWidth * carouselItems.length + 'px',
                         height: isVertical ? compHeight * carouselItems.length : compHeight + 'px',
-                        transition: "transform ".concat(showTransition ? '0.4s' : '0s', " ease 0s"),
-                        transform: isVertical
-                            ? "translate(0px, ".concat(offset + gestureoffset[1], "px)")
-                            : "translate(".concat(offset + gestureoffset[0], "px, 0px)"),
+                        transition: transitionValue,
+                        transform: transformValue,
                         flexDirection: isVertical ? 'column' : 'row',
                         flexShrink: 0,
                     }, class: "wrapper", onTransitionEnd: handleTransitionEnd }, carouselItems.map(function (child) { return child; }))))));

package/src/components/react/app/lottery/LotteryComponent.d.ts

@@ -0,0 +1,45 @@
+import { Component, h } from 'preact';
+type LotteryProps = {
+    LotteryStyles: {
+        width: number;
+        height: number;
+        background?: string;
+        align?: "flex-start" | "center" | "flex-end";
+        type?: "rectangle" | "round";
+    };
+    RewardList: any[];
+    RewardStyles: {
+        width: number;
+        height: number;
+    };
+    animationConfig?: {
+        baseRollCount?: number;
+        speed?: number;
+        aniStyle: Object;
+        targetIndex: number;
+        speedDegree?: number;
+    };
+};
+export default class Lottery extends Component<LotteryProps, any> {
+    constructor(props: LotteryProps);
+    timer: any;
+    speed: number;
+    count: number;
+    baseRollCount: number;
+    speedDegree: number;
+    componentWillUpdate(nextProps: Readonly<LotteryProps>, nextState: Readonly<any>, nextContext: any): void;
+    setLotteryStyles(): {
+        width: number;
+        height: number;
+        background: string;
+    };
+    setRewardStyles(index: any, total: any): {
+        width: number;
+        height: number;
+        marginRight: string;
+        marginBottom: string;
+    };
+    setAnimation(): void;
+    render(): h.JSX.Element;
+}
+export {};

package/src/components/react/app/lottery/LotteryComponent.js

@@ -0,0 +1,139 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Component, h } from 'preact';
+var Lottery = /** @class */ (function (_super) {
+    __extends(Lottery, _super);
+    function Lottery(props) {
+        var _a, _b, _c, _d;
+        var _this = _super.call(this, props) || this;
+        _this.timer = null;
+        _this.speed = ((_a = _this.props.animationConfig) === null || _a === void 0 ? void 0 : _a.speed) || 100;
+        _this.count = 0;
+        _this.baseRollCount = ((_b = _this.props.animationConfig) === null || _b === void 0 ? void 0 : _b.baseRollCount) || 30;
+        _this.speedDegree = ((_c = _this.props.animationConfig) === null || _c === void 0 ? void 0 : _c.speedDegree) || 10;
+        _this.state = {
+            activeIndex: -1,
+            targetIndex: ((_d = _this.props.animationConfig) === null || _d === void 0 ? void 0 : _d.targetIndex) || 0
+        };
+        _this.setAnimation = _this.setAnimation.bind(_this);
+        return _this;
+    }
+    Lottery.prototype.componentWillUpdate = function (nextProps, nextState, nextContext) {
+        var _a, _b, _c;
+        if (((_a = nextProps.animationConfig) === null || _a === void 0 ? void 0 : _a.targetIndex) !== ((_b = this.props.animationConfig) === null || _b === void 0 ? void 0 : _b.targetIndex)) {
+            this.setState({
+                targetIndex: ((_c = nextProps.animationConfig) === null || _c === void 0 ? void 0 : _c.targetIndex) || 0
+            });
+        }
+    };
+    Lottery.prototype.setLotteryStyles = function () {
+        var _a;
+        var baseStyles = {
+            width: this.props.LotteryStyles.width,
+            height: this.props.LotteryStyles.height,
+            background: ((_a = this.props.LotteryStyles) === null || _a === void 0 ? void 0 : _a.background) || "",
+        };
+        var typeStyles = {};
+        switch (this.props.LotteryStyles.type) {
+            case "rectangle":
+            default:
+                typeStyles = {
+                    flexShrink: 0,
+                    flexWrap: "wrap",
+                    justifyContent: this.props.LotteryStyles.align || "flex-start"
+                };
+                break;
+            case "round":
+                typeStyles = {
+                    borderRadius: '50%',
+                    position: 'relative',
+                };
+                break;
+        }
+        return __assign(__assign({}, baseStyles), typeStyles);
+    };
+    Lottery.prototype.setRewardStyles = function (index, total) {
+        var _a;
+        var baseStyles = {
+            width: this.props.RewardStyles.width,
+            height: this.props.RewardStyles.height,
+            marginRight: "12px",
+            marginBottom: "12px"
+        };
+        var typeStyles = {};
+        if (this.props.LotteryStyles.type == "round") {
+            var angle = (index * 360) / total - 90; // -90度让第一个在顶部
+            var radius = this.props.LotteryStyles.width * 0.5 - this.props.RewardStyles.width * 0.5;
+            var x = Math.cos((angle * Math.PI) / 180) * radius;
+            var y = Math.sin((angle * Math.PI) / 180) * radius;
+            typeStyles = {
+                position: 'absolute',
+                left: x + radius,
+                top: y + radius,
+            };
+        }
+        var aniStyles = {};
+        if (this.state.activeIndex === index) {
+            aniStyles = ((_a = this.props.animationConfig) === null || _a === void 0 ? void 0 : _a.aniStyle) || {};
+        }
+        return __assign(__assign(__assign({}, baseStyles), typeStyles), aniStyles);
+    };
+    Lottery.prototype.setAnimation = function () {
+        var _this = this;
+        this.setState(function (prev) { return ({
+            activeIndex: (prev.activeIndex + 1) % _this.props.RewardList.length,
+        }); }, function () {
+            var _a;
+            _this.count++;
+            var currentIndex = _this.state.activeIndex;
+            // 控制停止条件：滚动次数超过一定阈值并达到目标位置
+            if (_this.count > _this.baseRollCount && currentIndex === _this.state.targetIndex) {
+                _this.timer && clearTimeout(_this.timer);
+                _this.setState({ isRolling: false });
+                _this.count = 0;
+                _this.speed = ((_a = _this.props.animationConfig) === null || _a === void 0 ? void 0 : _a.speed) || 100;
+            }
+            else {
+                // 加速 → 匀速 → 减速
+                if (_this.count < _this.baseRollCount * 0.3) {
+                    _this.speed -= _this.speedDegree; // 加速
+                }
+                else if (_this.count > _this.baseRollCount * 0.65) {
+                    _this.speed += _this.speedDegree; // 减速
+                }
+                _this.timer = setTimeout(_this.setAnimation, _this.speed);
+            }
+        });
+    };
+    Lottery.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, RewardList = _a.RewardList, children = _a.children;
+        return (h("div", { style: this.setLotteryStyles() }, RewardList.map(function (reward, index) { return (h("div", { style: _this.setRewardStyles(index, RewardList.length) }, Array.isArray(children) ? children[index] || null : null)); })));
+    };
+    return Lottery;
+}(Component));
+export default Lottery;

package/src/components/react/app/scrollingText/ScrollingText.d.ts

@@ -0,0 +1,11 @@
+import { h } from 'preact';
+interface ScrollingTextProps {
+    text: string;
+    containerClassName?: string;
+    textClassName?: string;
+}
+/**
+ * 一个当文本内容超出容器宽度时，会自动来回滚动的文本组件。
+ */
+export declare function ScrollingText({ text, containerClassName, textClassName }: ScrollingTextProps): h.JSX.Element;
+export {};

package/src/components/react/app/scrollingText/ScrollingText.js

@@ -0,0 +1,76 @@
+// 文件路径: src/app/components/common/ScrollingText.tsx
+import { h } from 'preact';
+import { useState, useLayoutEffect, useRef, useEffect } from 'preact/hooks';
+/**
+ * 一个当文本内容超出容器宽度时，会自动来回滚动的文本组件。
+ */
+export function ScrollingText(_a) {
+    var text = _a.text, _b = _a.containerClassName, containerClassName = _b === void 0 ? '' : _b, _c = _a.textClassName, textClassName = _c === void 0 ? '' : _c;
+    // 1. Refs 和 State 定义
+    var containerRef = useRef(null);
+    var textRef = useRef(null);
+    var _d = useState(false), isOverflowing = _d[0], setIsOverflowing = _d[1];
+    var _e = useState(0), scrollDistance = _e[0], setScrollDistance = _e[1];
+    var PAUSE_DURATION_MS = 1000; // 每次停留的时间 (1秒)
+    var INTERVAL_MS = 16; // 动画更新间隔 (约60fps)
+    var PAUSE_FRAMES = Math.round(PAUSE_DURATION_MS / INTERVAL_MS); // 计算出需要暂停的帧数
+    var animationRef = useRef({
+        intervalId: null,
+        position: 0,
+        direction: 1, // 1 表示向左移动, -1 表示向右移动
+        speed: 1, // 滚动速度
+        pauseCounter: PAUSE_FRAMES
+    });
+    useLayoutEffect(function () {
+        var container = containerRef.current;
+        var textElement = textRef.current;
+        if (!container || !textElement)
+            return;
+        setTimeout(function () {
+            var textWidth = textElement.clientWidth;
+            var containerWidth = container.clientWidth;
+            var overflowing = textWidth > containerWidth;
+            console.log(textWidth, containerWidth);
+            setIsOverflowing(overflowing);
+            if (overflowing) {
+                setScrollDistance(textWidth - containerWidth);
+            }
+        }, 10);
+    }, [text]);
+    useEffect(function () {
+        var textElement = textRef.current;
+        var container = containerRef.current;
+        var anim = animationRef.current;
+        if (anim.intervalId) {
+            clearInterval(anim.intervalId);
+        }
+        if (isOverflowing && textElement) {
+            anim.intervalId = setInterval(function () {
+                // 如果在暂停中，则直接返回，不执行后续移动
+                if (anim.pauseCounter > 0) {
+                    anim.pauseCounter--;
+                    return;
+                }
+                anim.position += anim.speed * anim.direction;
+                if (anim.position < -scrollDistance) {
+                    anim.position = -scrollDistance;
+                    anim.direction = 1;
+                    anim.pauseCounter = PAUSE_FRAMES;
+                }
+                else if (anim.position > 0) {
+                    anim.position = 0;
+                    anim.direction = -1;
+                    anim.pauseCounter = PAUSE_FRAMES;
+                }
+                textElement.style.transform = "translateX(".concat(anim.position, "px)");
+            }, INTERVAL_MS);
+        }
+        return function () {
+            if (anim.intervalId) {
+                clearInterval(anim.intervalId);
+            }
+        };
+    }, [isOverflowing, scrollDistance]);
+    return (h("div", { ref: containerRef, style: { width: '100%', height: '100%', overflow: 'scroll', scrollbarColor: '#00000000', justifyContent: !isOverflowing ? 'center' : '', alignItems: !isOverflowing ? 'center' : '' }, className: containerClassName },
+        h("div", { ref: textRef, style: { flexShrink: 0 }, className: textClassName }, text)));
+}

package/src/components/react/app/videoPlayer/VideoPlayer.js

@@ -214,6 +214,7 @@ export var VideoPlayer = function (props) {
     var onpause = function () {
         videoLog('-----------onpause');
         setVideoStatus(VideoStatus.Pause);
+        (playEvent === null || playEvent === void 0 ? void 0 : playEvent.onPause) && playEvent.onPause();
     };
     var onwaiting = function () {
         videoLog('-----------onwaiting');
@@ -246,11 +247,6 @@ export var VideoPlayer = function (props) {
         }
         updateSliderHideTimmer();
     };
-    var onPause = function () {
-        console.warn('onPause');
-        setVideoStatus(VideoStatus.Pause);
-        (playEvent === null || playEvent === void 0 ? void 0 : playEvent.onPause) && playEvent.onPause();
-    };
     var onFirstFrame = function () {
         console.warn('onFirstFrame');
         (playEvent === null || playEvent === void 0 ? void 0 : playEvent.onFirstFrame) && playEvent.onFirstFrame();