@ray-js/components 1.7.56-beta.6 → 1.7.56-beta.8

package/lib/{Animated /index.d.ts → Animated/index.d.ts}

@@ -1,12 +1,5 @@
 /**
  * Animated - 纯净底层动画组件
- *
- * 只提供三个核心方法：
- * - setProperty(property, value): 设置动画属性
- * - setStyle(style): 设置样式
- * - setText(text): 设置文本内容
- *
- * 可以配合任何动画库使用（GSAP、Anime.js、Framer Motion 等）
  */
 import React from 'react';
 import type { AnimatedViewRef, AnimatedTextRef, AnimatedProps } from './types';

package/lib/{Animated /index.js → Animated/index.js}

@@ -5,17 +5,11 @@ import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.for-each.js";
 import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.dom-collections.iterator.js";
+/* eslint-disable import/no-named-as-default */
 /**
  * Animated - 纯净底层动画组件
- *
- * 只提供三个核心方法：
- * - setProperty(property, value): 设置动画属性
- * - setStyle(style): 设置样式
- * - setText(text): 设置文本内容
- *
- * 可以配合任何动画库使用（GSAP、Anime.js、Framer Motion 等）
  */
-import React, { forwardRef, useImperativeHandle, useRef, useMemo, useCallback } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useMemo, useCallback, useEffect } from 'react';
 import TyAnimatedComponent from './native/ty-animated';
 
 // 小程序 API 声明
@@ -43,19 +37,40 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
     mode = 'view',
     onAnimationStart,
     onAnimationEnd,
-    // 核心触摸事件（只保留最常用的三个）
+    // 核心触摸事件
     onClick,
     onTouchStart,
     onTouchEnd,
-    // 事件节流时间
-    throttle,
-    throttleClick,
-    throttleTouchStart,
-    throttleTouchEnd
+    onTouchMove,
+    onTouchCancel,
+    // onLongPress,
+    lockOnClick
+    // lockOnLongPress,
   } = props;
-  const callbackRef = useRef(onAnimationEnd);
+
+  // 使用队列管理多个 play() 的回调
+  // 因为基础库会触发多次 finish 事件（旧动画被打断 + 新动画完成）
+  // 当前动画的回调
+  // 同一时间只有一个动画在执行，新动画会打断旧动画
+  const currentCallbackRef = useRef(null);
   const componentIdRef = useRef(id || "animated-".concat(Math.random().toString(36).slice(2, 11)));
 
+  // 组件卸载时清理未完成的动画 Promise
+  useEffect(() => {
+    return () => {
+      const callback = currentCallbackRef.current;
+      if (callback) {
+        // console.log(`[Animated][${Date.now()}] 组件卸载，resolve 未完成的动画 Promise`)
+        callback({
+          detail: {
+            unmounted: true
+          }
+        });
+        currentCallbackRef.current = null;
+      }
+    };
+  }, []);
+
   // 提取文本内容（当 mode='text' 时）
   const textContent = useMemo(() => {
     if (mode !== 'text' || !children) return undefined;
@@ -90,13 +105,12 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
        * ref.current.setStyle({ color: 'red', fontSize: '16px', border: '1px solid #ccc' })
        */
       setStyle(styleValue, callback) {
-        return new Promise(resolve => {
+        return new Promise((resolve, reject) => {
           var _inst$setCustomStyle;
           const inst = getDomInstance();
           if (!inst) {
             console.warn('No DOM instance found');
-            resolve();
-            if (callback) callback();
+            reject();
             return;
           }
 
@@ -115,6 +129,19 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
             return;
           }
 
+          // 如果有动画在执行，setStyle 会清空 transition，打断动画
+          // 主动 resolve 当前 Promise
+          const animCallback = currentCallbackRef.current;
+          if (animCallback) {
+            console.log("[Animated][".concat(Date.now(), "] setStyle \u6253\u65AD\u52A8\u753B\uFF0Cresolve Promise"));
+            animCallback({
+              detail: {
+                interruptedBySetStyle: true
+              }
+            });
+            currentCallbackRef.current = null;
+          }
+
           // setData 完成后的回调
           (_inst$setCustomStyle = inst.setCustomStyle) === null || _inst$setCustomStyle === void 0 || _inst$setCustomStyle.call(inst, styleString, () => {
             // 调用用户回调
@@ -198,14 +225,23 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
         animation.play = () => {
           return new Promise(resolve => {
             var _inst$__applyAnimData;
-            // 导出动画数据
-            const animationData = animation.export();
+            // 如果有旧的 Promise，主动 resolve 它（被新动画打断）
+            const oldCallback = currentCallbackRef.current;
+            if (oldCallback) {
+              console.log("[Animated][".concat(Date.now(), "] \u65B0\u52A8\u753B\u5F00\u59CB\uFF0C\u628A\u4E4B\u524D\u7684\u52A8\u753B\u7ED9\u4E2D\u65AD\u6389"));
+              oldCallback({
+                detail: {
+                  interrupted: true
+                }
+              });
+            }
 
-            // 包装完成回调
+            // 保存新的 callback
+            currentCallbackRef.current = resolve;
+            console.log("[Animated][".concat(Date.now(), "] play() \u8C03\u7528"));
 
-            callbackRef.current = event => {
-              resolve(event);
-            };
+            // 导出动画数据
+            const animationData = animation.export();
             (_inst$__applyAnimData = inst.__applyAnimData) === null || _inst$__applyAnimData === void 0 || _inst$__applyAnimData.call(inst, animationData);
           });
         };
@@ -306,22 +342,73 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
   // 处理 customStyle，避免传入 undefined
   const customStyleValue = useMemo(() => {
     if (!style) return undefined;
+    console.log('customStyle', style, typeof style === 'object' ? styleToString(style) : style);
     return typeof style === 'object' ? styleToString(style) : style;
-  }, []);
+  }, [style]);
   const handleAnimationEnd = useCallback(event => {
-    if (callbackRef.current && typeof callbackRef.current === 'function') {
-      const temp = callbackRef.current;
-      callbackRef.current = null;
-      temp(event);
+    const callback = currentCallbackRef.current;
+    if (callback) {
+      callback(event);
+      currentCallbackRef.current = null;
     }
     if (onAnimationEnd) {
       onAnimationEnd();
     }
-  }, [onAnimationEnd, callbackRef.current]);
+  }, [onAnimationEnd]);
+
+  // 包装 onClick，如果启用了 lockOnClick
+  const wrappedOnClick = useMemo(() => {
+    console.log('wrappedOnClick', !!onClick);
+    if (!onClick) return undefined;
+    if (lockOnClick) {
+      // 声明式锁：包装 onClick，完成后通过 setData 触发解锁
+      return async event => {
+        const startTime = Date.now();
+        console.log("[Animated.React][".concat(startTime, "] \uD83C\uDFAF onClick \u5F00\u59CB\u6267\u884C"));
+        try {
+          await onClick(event);
+          // console.log(
+          //   `[Animated.React][${Date.now()}] onClick 执行完成，耗时: ${Date.now() - startTime}ms`
+          // )
+        } catch (error) {
+          console.error("[Animated.React][".concat(Date.now(), "] onClick \u6267\u884C\u5931\u8D25:"), error);
+          throw error;
+        } finally {
+          // 等待事件执行完成，自动解锁
+          await new Promise(resolve => {
+            const inst = getDomInstance();
+            inst.__unlockEvent('click', resolve);
+          });
+          // console.log('click 已解锁')
+        }
+      };
+    }
+    return onClick;
+  }, [onClick, lockOnClick]);
+
+  // 自动检测哪些事件需要加锁
+  const autoLockEvents = useMemo(() => {
+    const events = [];
+
+    // 通过 prop 声明
+    if (lockOnClick) {
+      events.push('click');
+    }
+    // if (lockOnLongPress) {
+    //   events.push('longPress')
+    // }
+
+    if (events.length > 0) {
+      console.log("[Animated][".concat(Date.now(), "] \u81EA\u52A8\u52A0\u9501\u4E8B\u4EF6:"), events);
+    }
+    return events;
+  }, [onClick, lockOnClick]);
   const eventBindings = {};
-  if (onClick) eventBindings['bind:click'] = onClick;
+  if (wrappedOnClick) eventBindings['bind:click'] = wrappedOnClick;
   if (onTouchStart) eventBindings['bind:touchstart'] = onTouchStart;
   if (onTouchEnd) eventBindings['bind:touchend'] = onTouchEnd;
+  if (onTouchMove) eventBindings['bind:touchmove'] = onTouchMove;
+  if (onTouchCancel) eventBindings['bind:touchcancel'] = onTouchCancel;
   if (onAnimationStart) eventBindings['bind:animationbegin'] = onAnimationStart;
   eventBindings['bind:animationfinish'] = handleAnimationEnd;
   return (
@@ -329,22 +416,17 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
     // @ts-ignore - 小程序自定义组件
     React.createElement(TyAnimatedComponent, _extends({
       id: componentIdRef.current,
-      __mode: mode
+      __mode: mode,
+      __componentId: componentIdRef.current
     }, className ? {
       __className: className
     } : {}, customStyleValue ? {
       __style: customStyleValue
     } : {}, mode === 'text' && textContent !== undefined ? {
       __text: textContent
-    } : {}, throttle !== undefined ? {
-      __throttle: throttle
-    } : {}, throttleClick !== undefined ? {
-      __throttleClick: throttleClick
-    } : {}, throttleTouchStart !== undefined ? {
-      __throttleTouchStart: throttleTouchStart
-    } : {}, throttleTouchEnd !== undefined ? {
-      __throttleTouchEnd: throttleTouchEnd
-    } : {}, eventBindings), mode === 'view' ? children : null)
+    } : {}, autoLockEvents ? {
+      __autoLockEvents: autoLockEvents
+    } : [], eventBindings), mode === 'view' ? children : null)
   );
 });
 AnimatedBase.displayName = 'AnimatedBase';
@@ -376,4 +458,4 @@ const Animated = {
 };
 export default Animated;
 
-// 导出类型
+// 导出类型和工具函数

package/lib/{Animated /native/ty-animated/index.js → Animated/native/ty-animated/index.js}

@@ -37,24 +37,6 @@ Component({
     onAnimationEnd: {
       type: null,
       value: null
-    },
-    // 统一的事件节流时间（毫秒）
-    __throttle: {
-      type: Number,
-      value: 0
-    },
-    // 各事件独立的节流时间（毫秒），优先级高于 __throttle
-    __throttleClick: {
-      type: Number,
-      value: 0
-    },
-    __throttleTouchStart: {
-      type: Number,
-      value: 0
-    },
-    __throttleTouchEnd: {
-      type: Number,
-      value: 0
     }
   },
   // 定义外部事件
@@ -63,29 +45,42 @@ Component({
     __text: '',
     __style: '',
     __className: '',
-    __animData: null,
-    // 动画数据
-    // 记录各事件的最后触发时间
-    __lastClickTime: 0,
-    __lastTouchStartTime: 0,
-    __lastTouchEndTime: 0
+    __animData: null // 动画数据
   },
   lifetimes: {
     attached() {
-      // 组件初始化
+      // 初始化
+      // 为每个事件类型维护独立的锁
+      this._locks = {};
+      this._componentId = this.data.__componentId || this.id;
+      this._excludedTouchStartIdentifier = new Set();
     },
     detached() {
-      // 清理工作
+      //
     }
   },
   methods: {
+    /**
+     * 原生层事件锁：解锁（支持指定事件类型）
+     * @param eventType - 事件类型，如 'click', 'longPress'
+     * @param resolve - Promise resolve 函数
+     */
+    __unlockEvent(eventType, resolve) {
+      if (!eventType) {
+        console.warn('[TyAnimated] __unlockEvent: eventType is required');
+        resolve();
+        return;
+      }
+
+      // 清除内部事件锁状态
+      this._locks[eventType] = false;
+      resolve();
+    },
     /**
      * 事件处理器
      */
     __handleTiggerEvent(eventName, e) {
       // 触发自定义事件，让外部可以监听
-      // bubbles: false - 不在 React 层冒泡，避免与原生层冒泡重复
-      // 原生层的 bindtap 会自然冒泡，并经过每个组件的节流检查
       this.triggerEvent(eventName, e, {
         bubbles: false,
         composed: true
@@ -157,6 +152,8 @@ Component({
 
       // 合并样式
       const currentStyle = this._parseStyle(this.data.__style || '');
+      console.log('_style', this.data.__style);
+      console.log('currentStyle', currentStyle);
       const newStyle = this._parseStyle(value);
       const mergedStyle = _objectSpread(_objectSpread({}, currentStyle), newStyle);
       let mergedStyleString = this._styleToString(mergedStyle);
@@ -164,11 +161,8 @@ Component({
         // 添加一个不影响渲染的注释，使样式字符串不同
         mergedStyleString = "".concat(mergedStyleString, ";/* ").concat(Date.now(), " */");
       }
-
-      // 一次性 setData，不嵌套
       this.setData({
-        __style: mergedStyleString,
-        __animData: null // 总是清空动画数据
+        __style: mergedStyleString
       }, () => {
         if (callback) callback();
       });
@@ -220,54 +214,57 @@ Component({
         __animData: animData
       });
     },
-    // 核心触摸事件处理（只保留最常用的）
-    __onClick(e) {
-      // 节流判断：优先使用具体事件的节流时间，否则使用统一的节流时间
-      const throttleTime = this.properties.__throttleClick || this.properties.__throttle;
-      if (throttleTime > 0) {
-        const now = Date.now();
-        const lastTime = this.data.__lastClickTime;
-        if (now - lastTime < throttleTime) {
-          console.log("[TyAnimated][".concat(now, "] __onClick \u88AB\u8282\u6D41\u5FFD\u7565\uFF0C\u8DDD\u4E0A\u6B21\u89E6\u53D1 ").concat(now - lastTime, "ms < ").concat(throttleTime, "ms"));
-          return;
-        }
-        this.setData({
-          __lastClickTime: now
-        });
-      }
-      this.__handleTiggerEvent('click', e);
-    },
     __onTouchStart(e) {
-      // 节流判断：优先使用具体事件的节流时间，否则使用统一的节流时间
-      const throttleTime = this.properties.__throttleTouchStart || this.properties.__throttle;
-      if (throttleTime > 0) {
-        const now = Date.now();
-        const lastTime = this.data.__lastTouchStartTime;
-        if (now - lastTime < throttleTime) {
-          console.log("[TyAnimated][".concat(now, "] __onTouchStart \u88AB\u8282\u6D41\u5FFD\u7565\uFF0C\u8DDD\u4E0A\u6B21\u89E6\u53D1 ").concat(now - lastTime, "ms < ").concat(throttleTime, "ms"));
-          return;
-        }
-        this.setData({
-          __lastTouchStartTime: now
-        });
+      /**
+       * 因为end事件会合成tap事件的原因，可能会出现
+       * click -> lock -> 执行内部逻辑 ---- 过程中可能会有touchstart事件(identifier: 1) -> unlock -> click完成 -> touchend(identifier: 1) -> 合成了tap -> click(额外的异常点击)
+       * 逻辑层的锁 锁不住视图层的事件监听
+       *
+       * 方案：将在click事件锁住后的所有touchStart保存起来，在tap的时候对比set中是否有相同的序列id，有的话就直接return，并重置set
+       */
+
+      // 只有在锁住的状态下存储 touchStart 的序列值
+      if (this._locks['click']) {
+        const touchId = e.touches[0].identifier; // 每个触摸序列的唯一ID
+        // console.log('------1-1--1-1-1-1-:::', touchId)
+        this._excludedTouchStartIdentifier.add(touchId);
       }
       this.__handleTiggerEvent('touchstart', e);
     },
+    __onTouchMove(e) {
+      this.__handleTiggerEvent('touchmove', e);
+    },
     __onTouchEnd(e) {
-      // 节流判断：优先使用具体事件的节流时间，否则使用统一的节流时间
-      const throttleTime = this.properties.__throttleTouchEnd || this.properties.__throttle;
-      if (throttleTime > 0) {
-        const now = Date.now();
-        const lastTime = this.data.__lastTouchEndTime;
-        if (now - lastTime < throttleTime) {
-          console.log("[TyAnimated][".concat(now, "] __onTouchEnd \u88AB\u8282\u6D41\u5FFD\u7565\uFF0C\u8DDD\u4E0A\u6B21\u89E6\u53D1 ").concat(now - lastTime, "ms < ").concat(throttleTime, "ms"));
-          return;
-        }
-        this.setData({
-          __lastTouchEndTime: now
-        });
-      }
+      // console.log('=====2---22-2-2-::::', e.changedTouches[0].identifier)
+
       this.__handleTiggerEvent('touchend', e);
+    },
+    __onTouchCancel(e) {
+      this.__handleTiggerEvent('touchcancel', e);
+    },
+    // 核心触摸事件处理（只保留最常用的）
+    __onClick(e) {
+      Date.now();
+      const eventType = 'click';
+      // console.log('---3----3-3--:::', e.changedTouches[0].identifier)
+      // 对比set中是否有相同的序列id，有的话就直接return，并重置set
+      e.changedTouches[0].identifier;
+      const isExceptiontrigger = this._excludedTouchStartIdentifier.has(e.changedTouches[0].identifier);
+      if (isExceptiontrigger) {
+        this._excludedTouchStartIdentifier.clear();
+        return;
+      }
+
+      // 检查该事件类型是否已加锁，锁住直接return
+      if (this._locks[eventType]) {
+        // console.log(`[TyAnimated][${now}] ⚠️ 事件被锁拦截: ${eventType}`)
+        return;
+      }
+      // 如果发现click事件需要自动开解锁，在第一次click的时候就自动加上锁
+      if (this.data.__autoLockEvents.includes(eventType)) {
+        this._locks[eventType] = true;
+      }
+      this.__handleTiggerEvent(eventType, e);
     }
   }
 });

package/lib/{Animated /native/ty-animated/index.tyml → Animated/native/ty-animated/index.tyml}

@@ -5,9 +5,11 @@
     class="{{__className}}"
     style="{{__style}}"
     animation="{{__animData}}"
-    bindtap="__onClick"
     bindtouchstart="__onTouchStart"
     bindtouchend="__onTouchEnd"
+    bindtouchmove="__onTouchMove"
+    bindtouchcancel="__onTouchCancel"
+    bindtap="__onClick"
   >
     <slot></slot>
   </view>
@@ -17,9 +19,11 @@
     class="container {{__className}}"
     style="{{__style}}"
     animation="{{__animData}}"
-    bindtap="__onClick"
     bindtouchstart="__onTouchStart"
     bindtouchend="__onTouchEnd"
+    bindtouchmove="__onTouchMove"
+    bindtouchcancel="__onTouchCancel"
+    bindtap="__onClick"
   >{{__text}}</text>
 </block>
 

package/lib/{Animated /types.d.ts → Animated/types.d.ts}

@@ -2,32 +2,14 @@ import type React from 'react';
 /**
  * 触摸事件处理器（只保留核心事件）
  *
- * 注：只提供最常用的三个事件（onClick, onTouchStart, onTouchEnd）
- * 如需其他事件（如 onLongPress, onTouchMove 等），请在 Animated 的子元素上直接绑定
+ * 注：只提供最常用的事件 (onClick)
  */
 export interface TouchEventHandler {
     onClick?: (e: TouchEvent) => any;
     onTouchStart?: (e: TouchEvent) => any;
     onTouchEnd?: (e: TouchEvent) => any;
-    /**
-     * 统一的事件节流时间（毫秒），应用于所有事件
-     * 优先级：throttleClick/throttleTouchStart/throttleTouchEnd > throttle
-     *
-     * @example
-     * <Animated.View throttle={300} onClick={...} onTouchStart={...} />
-     */
-    throttle?: number;
-    /**
-     * click 事件节流时间（毫秒），优先级高于 throttle
-     *
-     * @example
-     * <Animated.View throttle={300} throttleClick={500} onClick={...} />
-     */
-    throttleClick?: number;
-    /** touchstart 事件节流时间（毫秒），优先级高于 throttle */
-    throttleTouchStart?: number;
-    /** touchend 事件节流时间（毫秒），优先级高于 throttle */
-    throttleTouchEnd?: number;
+    onTouchMove?: (e: TouchEvent) => any;
+    onTouchCancel?: (e: TouchEvent) => any;
 }
 interface TargetType {
     id: string;
@@ -187,7 +169,13 @@ export interface AnimatedViewRef {
      * ```
      */
     animate: (options?: TOptions) => IAnimation & {
-        play(): Promise<void>;
+        play(): Promise<{
+            detail?: {
+                interruptedBySetStyle?: boolean;
+                interrupted?: boolean;
+            };
+            [key: string]: any;
+        }>;
     };
     /**
      * 获取元素的布局位置和尺寸信息
@@ -327,5 +315,21 @@ export interface AnimatedProps extends TouchEventHandler {
     onAnimationStart?: () => void;
     /** 动画结束回调 */
     onAnimationEnd?: () => void;
+    /**
+     * 点击事件自动加锁
+     * 防止快速点击导致的重复触发
+     *
+     * @example
+     * ```tsx
+     * <Animated.View
+     *   ref={ref}
+     *   onClick={async () => {
+     *     await doSomething()
+     *   }}
+     *   lockOnClick  // 自动加锁，回调执行完自动解锁
+     * />
+     * ```
+     */
+    lockOnClick?: boolean;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/components",
-  "version": "1.7.56-beta.6",
+  "version": "1.7.56-beta.8",
   "description": "Ray basic components",
   "keywords": [
     "ray"
@@ -29,8 +29,8 @@
   "dependencies": {
     "@ray-core/macro": "^0.4.9",
     "@ray-core/wechat": "^0.4.9",
-    "@ray-js/adapter": "1.7.56-beta.6",
-    "@ray-js/framework-shared": "1.7.56-beta.6",
+    "@ray-js/adapter": "1.7.56-beta.8",
+    "@ray-js/framework-shared": "1.7.56-beta.8",
     "ahooks": "^3.8.5",
     "clsx": "^1.2.1",
     "core-js": "^3.43.0",
@@ -40,11 +40,11 @@
     "style-to-object": "^0.3.0"
   },
   "devDependencies": {
-    "@ray-js/cli": "1.7.56-beta.6"
+    "@ray-js/cli": "1.7.56-beta.8"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "9b3e69bb2a95a48e8a8fadd533a865d97be8c8a5"
+  "gitHead": "8f42d569ceece3840cdbf9aa4a223abcd06b0915"
 }