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

package/lib/Animated /index.js

@@ -0,0 +1,379 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+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";
+/**
+ * Animated - 纯净底层动画组件
+ *
+ * 只提供三个核心方法：
+ * - setProperty(property, value): 设置动画属性
+ * - setStyle(style): 设置样式
+ * - setText(text): 设置文本内容
+ *
+ * 可以配合任何动画库使用（GSAP、Anime.js、Framer Motion 等）
+ */
+import React, { forwardRef, useImperativeHandle, useRef, useMemo, useCallback } from 'react';
+import TyAnimatedComponent from './native/ty-animated';
+
+// 小程序 API 声明
+
+/**
+ * 样式对象转 CSS 字符串
+ */
+function styleToString(style) {
+  return Object.entries(style).map(_ref => {
+    let [key, value] = _ref;
+    const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+    return "".concat(cssKey, ":").concat(value);
+  }).join(';');
+}
+
+/**
+ * 基础 Animated 组件
+ */
+const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    style,
+    id,
+    mode = 'view',
+    onAnimationStart,
+    onAnimationEnd,
+    // 核心触摸事件（只保留最常用的三个）
+    onClick,
+    onTouchStart,
+    onTouchEnd,
+    // 事件节流时间
+    throttle,
+    throttleClick,
+    throttleTouchStart,
+    throttleTouchEnd
+  } = props;
+  const callbackRef = useRef(onAnimationEnd);
+  const componentIdRef = useRef(id || "animated-".concat(Math.random().toString(36).slice(2, 11)));
+
+  // 提取文本内容（当 mode='text' 时）
+  const textContent = useMemo(() => {
+    if (mode !== 'text' || !children) return undefined;
+    if (typeof children === 'string' || typeof children === 'number') {
+      return String(children);
+    }
+    return undefined;
+  }, [mode, children]);
+
+  /**
+   * 获取 DOM 实例
+   */
+  const getDomInstance = () => {
+    try {
+      var _getCurrentPages;
+      const pages = (_getCurrentPages = getCurrentPages) === null || _getCurrentPages === void 0 ? void 0 : _getCurrentPages();
+      if (!pages || pages.length === 0) return null;
+      const currentPage = pages[pages.length - 1];
+      if (!(currentPage !== null && currentPage !== void 0 && currentPage.selectComponent)) return null;
+      return currentPage.selectComponent("#".concat(componentIdRef.current));
+    } catch (error) {
+      console.error('[Animated] 获取组件实例失败:', error);
+      return null;
+    }
+  };
+  useImperativeHandle(ref, () => {
+    return {
+      /**
+       * 设置样式（直通通道）
+       * 用途：设置静态样式，绕过 React/Ray 层，提升性能
+       * @example
+       * ref.current.setStyle({ color: 'red', fontSize: '16px', border: '1px solid #ccc' })
+       */
+      setStyle(styleValue, callback) {
+        return new Promise(resolve => {
+          var _inst$setCustomStyle;
+          const inst = getDomInstance();
+          if (!inst) {
+            console.warn('No DOM instance found');
+            resolve();
+            if (callback) callback();
+            return;
+          }
+
+          // 防止传入 undefined 或空值
+          if (styleValue === undefined || styleValue === null) {
+            console.warn('styleValue is undefined or null');
+            resolve();
+            if (callback) callback();
+            return;
+          }
+          const styleString = typeof styleValue === 'string' ? styleValue : styleToString(styleValue);
+          if (!styleString) {
+            console.warn('styleString is empty');
+            resolve();
+            if (callback) callback();
+            return;
+          }
+
+          // setData 完成后的回调
+          (_inst$setCustomStyle = inst.setCustomStyle) === null || _inst$setCustomStyle === void 0 || _inst$setCustomStyle.call(inst, styleString, () => {
+            // 调用用户回调
+            if (callback && typeof callback === 'function') {
+              try {
+                callback();
+              } catch (error) {
+                console.error('[Animated] setStyle callback error:', error);
+              }
+            }
+            // resolve Promise
+            resolve();
+          });
+        });
+      },
+      /**
+       * 设置文本内容（仅 mode='text' 时可用）
+       * 不触发 React 重渲染
+       */
+      setText(text) {
+        var _inst$__applyText;
+        // 运行时检查：只有 Text 组件才能调用 setText
+        if (mode !== 'text') {
+          console.error('[Animated] setText 只能在 Animated.Text 组件上使用');
+          return;
+        }
+        const inst = getDomInstance();
+        if (!inst) {
+          console.warn('[Animated] setText: 无法获取组件实例');
+          return;
+        }
+        (_inst$__applyText = inst.__applyText) === null || _inst$__applyText === void 0 || _inst$__applyText.call(inst, text);
+      },
+      /**
+       * 创建动画对象
+       * 使用小程序原生动画 API，这是性能最优的动画方式
+       *
+       * @param options - 动画配置（duration, timingFunction, delay, transformOrigin）
+       * @returns Animation 实例，包含 play() 方法
+       *
+       * @example
+       * // 创建并执行动画
+       * const animation = ref.current.animate()
+       * animation.translateX(100).scale(1.2).step({ duration: 300 })
+       * animation.translateY(50).step({ duration: 200 })
+       * await animation.play()
+       * console.log('动画完成！')
+       *
+       * // 链式调用
+       * const animation = ref.current
+       *   .animate({ transformOrigin: '50% 50%' })
+       *   .translateX(100)
+       *   .scale(1.2)
+       *   .step({ duration: 300 })
+       * await animation.play()
+       *
+       * // 复用动画
+       * const slideIn = ref.current.animate().translateX(100).step({ duration: 300 })
+       * await slideIn.play() // 第一次
+       * await slideIn.play() // 第二次
+       */
+      animate(options) {
+        var _inst$_getCreateAnima;
+        const inst = getDomInstance();
+        if (!inst) {
+          console.warn('[Animated] No DOM instance found');
+          return null;
+        }
+
+        // 获取 createAnimation 函数
+        const createAnimation = (_inst$_getCreateAnima = inst._getCreateAnimation) === null || _inst$_getCreateAnima === void 0 ? void 0 : _inst$_getCreateAnima.call(inst);
+        if (!createAnimation) {
+          console.error('[Animated] createAnimation 不可用');
+          return null;
+        }
+
+        // 创建小程序原生 Animation 实例
+        const animation = createAnimation(options);
+
+        // 扩展 play 方法
+        animation.play = () => {
+          return new Promise(resolve => {
+            var _inst$__applyAnimData;
+            // 导出动画数据
+            const animationData = animation.export();
+
+            // 包装完成回调
+
+            callbackRef.current = event => {
+              resolve(event);
+            };
+            (_inst$__applyAnimData = inst.__applyAnimData) === null || _inst$__applyAnimData === void 0 || _inst$__applyAnimData.call(inst, animationData);
+          });
+        };
+        return animation;
+      },
+      /**
+       * 获取元素的布局位置和尺寸信息
+       * 基于小程序 SelectorQuery.boundingClientRect API
+       */
+      getBoundingClientRect() {
+        return new Promise(resolve => {
+          try {
+            // 检查小程序 API 是否存在
+            if (typeof ty === 'undefined' || !ty.createSelectorQuery) {
+              console.error('[Animated] getBoundingClientRect: ty.createSelectorQuery 不存在');
+              resolve(null);
+              return;
+            }
+            const query = ty.createSelectorQuery();
+            query.select("#".concat(componentIdRef.current)).boundingClientRect(rect => {
+              resolve(rect || null);
+            }).exec(() => {
+              // exec callback
+            });
+          } catch (error) {
+            console.error('[Animated] getBoundingClientRect 执行失败:', error);
+            resolve(null);
+          }
+        });
+      },
+      /**
+       * 获取元素的详细信息（包括样式、属性等）
+       * 基于小程序 SelectorQuery.fields API
+       */
+      getFields(fields) {
+        return new Promise(resolve => {
+          try {
+            // 检查小程序 API 是否存在
+            if (typeof ty === 'undefined' || !ty.createSelectorQuery) {
+              console.error('[Animated] getFields: ty.createSelectorQuery 不存在');
+              resolve(null);
+              return;
+            }
+            const query = ty.createSelectorQuery();
+            query.select("#".concat(componentIdRef.current)).fields(fields, res => {
+              resolve(res || null);
+            }).exec(() => {
+              // exec callback
+            });
+          } catch (error) {
+            console.error('[Animated] getFields 执行失败:', error);
+            resolve(null);
+          }
+        });
+      },
+      /**
+       * 获取元素的计算后样式
+       * 便捷方法，专门用于查询样式
+       */
+      getComputedStyle(styleNames) {
+        return new Promise(resolve => {
+          try {
+            // 检查小程序 API 是否存在
+            if (typeof ty === 'undefined' || !ty.createSelectorQuery) {
+              console.error('[Animated] getComputedStyle: ty.createSelectorQuery 不存在');
+              resolve(null);
+              return;
+            }
+            const query = ty.createSelectorQuery();
+            query.select("#".concat(componentIdRef.current)).fields({
+              computedStyle: styleNames
+            }, res => {
+              if (!res) {
+                resolve(null);
+                return;
+              }
+
+              // 提取样式信息，过滤掉非样式字段
+              const styles = {};
+              styleNames.forEach(styleName => {
+                if (res[styleName] !== undefined) {
+                  styles[styleName] = res[styleName];
+                }
+              });
+              resolve(Object.keys(styles).length > 0 ? styles : null);
+            }).exec(() => {
+              // exec callback
+            });
+          } catch (error) {
+            console.error('[Animated] getComputedStyle 执行失败:', error);
+            resolve(null);
+          }
+        });
+      }
+    };
+  }, []);
+
+  // 处理 customStyle，避免传入 undefined
+  const customStyleValue = useMemo(() => {
+    if (!style) return undefined;
+    return typeof style === 'object' ? styleToString(style) : style;
+  }, []);
+  const handleAnimationEnd = useCallback(event => {
+    if (callbackRef.current && typeof callbackRef.current === 'function') {
+      const temp = callbackRef.current;
+      callbackRef.current = null;
+      temp(event);
+    }
+    if (onAnimationEnd) {
+      onAnimationEnd();
+    }
+  }, [onAnimationEnd, callbackRef.current]);
+  const eventBindings = {};
+  if (onClick) eventBindings['bind:click'] = onClick;
+  if (onTouchStart) eventBindings['bind:touchstart'] = onTouchStart;
+  if (onTouchEnd) eventBindings['bind:touchend'] = onTouchEnd;
+  if (onAnimationStart) eventBindings['bind:animationbegin'] = onAnimationStart;
+  eventBindings['bind:animationfinish'] = handleAnimationEnd;
+  return (
+    /*#__PURE__*/
+    // @ts-ignore - 小程序自定义组件
+    React.createElement(TyAnimatedComponent, _extends({
+      id: componentIdRef.current,
+      __mode: mode
+    }, 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)
+  );
+});
+AnimatedBase.displayName = 'AnimatedBase';
+
+/**
+ * Animated.View 组件（不包含 setText）
+ */
+const AnimatedView = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnimatedBase, _extends({}, props, {
+  mode: "view",
+  ref: ref
+})));
+AnimatedView.displayName = 'Animated.View';
+
+/**
+ * Animated.Text 组件（包含 setText）
+ */
+const AnimatedText = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnimatedBase, _extends({}, props, {
+  mode: "text",
+  ref: ref
+})));
+AnimatedText.displayName = 'Animated.Text';
+
+/**
+ * 默认导出
+ */
+const Animated = {
+  View: AnimatedView,
+  Text: AnimatedText
+};
+export default Animated;
+
+// 导出类型

package/lib/Animated /native/ty-animated/index.js

@@ -0,0 +1,274 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "core-js/modules/es.string.trim.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.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";
+// @ts-nocheck
+/**
+ * TyAnimated - 高性能动画组件（小程序原生层）
+ */
+
+// 小程序原生组件注册
+Component({
+  properties: {
+    __mode: {
+      type: String,
+      value: 'view'
+    },
+    __text: {
+      type: String,
+      value: ''
+    },
+    __style: {
+      type: String,
+      value: ''
+    },
+    __className: {
+      type: String,
+      value: ''
+    },
+    onAnimationStart: {
+      type: null,
+      value: null
+    },
+    // 动画结束回调函数
+    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
+    }
+  },
+  // 定义外部事件
+  externalClasses: [],
+  data: {
+    __text: '',
+    __style: '',
+    __className: '',
+    __animData: null,
+    // 动画数据
+    // 记录各事件的最后触发时间
+    __lastClickTime: 0,
+    __lastTouchStartTime: 0,
+    __lastTouchEndTime: 0
+  },
+  lifetimes: {
+    attached() {
+      // 组件初始化
+    },
+    detached() {
+      // 清理工作
+    }
+  },
+  methods: {
+    /**
+     * 事件处理器
+     */
+    __handleTiggerEvent(eventName, e) {
+      // 触发自定义事件，让外部可以监听
+      // bubbles: false - 不在 React 层冒泡，避免与原生层冒泡重复
+      // 原生层的 bindtap 会自然冒泡，并经过每个组件的节流检查
+      this.triggerEvent(eventName, e, {
+        bubbles: false,
+        composed: true
+      });
+    },
+    /**
+     * 创建 IntersectionObserver
+     */
+    createIntersectionObserver(options) {
+      try {
+        // @ts-ignore
+        if (typeof ty !== 'undefined' && ty.createIntersectionObserver) {
+          return ty.createIntersectionObserver(this, options);
+        }
+      } catch (e) {
+        console.error('createIntersectionObserver error:', e);
+      }
+      return null;
+    },
+    /**
+     * 获取小程序的 createAnimation 方法
+     */
+    _getCreateAnimation() {
+      try {
+        // @ts-ignore
+        if (typeof ty !== 'undefined' && ty.createAnimation) {
+          return ty.createAnimation;
+        }
+      } catch (e) {
+        // ignore
+      }
+      return null;
+    },
+    /**
+     * 解析样式字符串为对象
+     */
+    _parseStyle(styleString) {
+      if (!styleString) return {};
+      const result = {};
+      const styles = styleString.split(';').filter(Boolean);
+      styles.forEach(style => {
+        const colonIndex = style.indexOf(':');
+        if (colonIndex > 0) {
+          const key = style.substring(0, colonIndex).trim();
+          const value = style.substring(colonIndex + 1).trim();
+          if (key && value) {
+            result[key] = value;
+          }
+        }
+      });
+      return result;
+    },
+    /**
+     * 样式对象转字符串
+     */
+    _styleToString(styleObj) {
+      return Object.entries(styleObj).map(_ref => {
+        let [key, value] = _ref;
+        return "".concat(key, ":").concat(value);
+      }).join(';');
+    },
+    setCustomStyle(value, callback) {
+      // 防止传入 undefined 或 null 导致小程序报错
+      if (value === undefined || value === null) {
+        console.warn('[TyAnimatedComponent] setCustomStyle: value is undefined or null, ignored');
+        if (callback) callback();
+        return;
+      }
+
+      // 合并样式
+      const currentStyle = this._parseStyle(this.data.__style || '');
+      const newStyle = this._parseStyle(value);
+      const mergedStyle = _objectSpread(_objectSpread({}, currentStyle), newStyle);
+      let mergedStyleString = this._styleToString(mergedStyle);
+      if (mergedStyleString === this.data.__style && this.data.__animData !== null) {
+        // 添加一个不影响渲染的注释，使样式字符串不同
+        mergedStyleString = "".concat(mergedStyleString, ";/* ").concat(Date.now(), " */");
+      }
+
+      // 一次性 setData，不嵌套
+      this.setData({
+        __style: mergedStyleString,
+        __animData: null // 总是清空动画数据
+      }, () => {
+        if (callback) callback();
+      });
+    },
+    /**
+     * 设置文本内容（__mode='text' 时使用）
+     */
+    __applyText(text) {
+      if (typeof text === 'string') {
+        this.setData({
+          __text: text
+        });
+      }
+    },
+    __applyAnimData(animData) {
+      if (!animData) {
+        console.warn('[TyAnimatedComponent] __applyAnimData: animData is null or undefined');
+        return;
+      }
+      this.setData({
+        __animData: animData
+      });
+    },
+    /**
+     * 核心方法：直接应用 Animation 对象
+     * @param {Function} fn - 接收 Animation 实例的回调函数
+     * @param {Object} options - 动画选项，包括 transformOrigin
+     *
+     * 使用示例：
+     * comp.__apply((anim) => {
+     *   anim.opacity(0.5).scale(0.8).step();
+     *   return anim.export();
+     * }, { transformOrigin: 'top left' });
+     */
+    __apply(fn) {
+      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      const createAnimation = this._getCreateAnimation();
+      if (!createAnimation) {
+        return;
+      }
+      const anim = createAnimation(options);
+
+      // 执行用户的动画配置
+      const exported = fn(anim);
+
+      // 应用动画数据
+      const animData = exported || anim.export();
+      this.setData({
+        __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
+        });
+      }
+      this.__handleTiggerEvent('touchstart', 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
+        });
+      }
+      this.__handleTiggerEvent('touchend', e);
+    }
+  }
+});
+export default 'ty-animated-component';

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

@@ -14,7 +14,7 @@
   <text
     wx:else
     id="rootText"
-    class="{{__className}}"
+    class="container {{__className}}"
     style="{{__style}}"
     animation="{{__animData}}"
     bindtap="__onClick"

package/lib/Animated /types.d.ts

@@ -0,0 +1,331 @@
+import type React from 'react';
+/**
+ * 触摸事件处理器（只保留核心事件）
+ *
+ * 注：只提供最常用的三个事件（onClick, onTouchStart, onTouchEnd）
+ * 如需其他事件（如 onLongPress, onTouchMove 等），请在 Animated 的子元素上直接绑定
+ */
+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;
+}
+interface TargetType {
+    id: string;
+    offsetLeft: number;
+    offsetTop: number;
+    paths: any;
+    uid: any;
+    dataset: {
+        [key: string]: any;
+    };
+}
+export interface EventType {
+    type: string;
+    target: TargetType;
+    currentTarget: TargetType;
+    timestamp: number;
+    stopPropagation: () => void;
+    detail: any;
+}
+export type timing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'step-start' | 'step-end';
+export type TOptions = {
+    duration?: number;
+    timingFunction?: timing;
+    delay?: number;
+    transformOrigin?: string;
+};
+/**
+ * 元素边界信息
+ */
+export interface BoundingClientRect {
+    /** 元素的 ID */
+    id: string;
+    /** dataset 数据 */
+    dataset: Record<string, any>;
+    /** 左边界坐标 */
+    left: number;
+    /** 右边界坐标 */
+    right: number;
+    /** 上边界坐标 */
+    top: number;
+    /** 下边界坐标 */
+    bottom: number;
+    /** 元素宽度 */
+    width: number;
+    /** 元素高度 */
+    height: number;
+}
+/**
+ * 元素查询字段配置
+ */
+export interface NodeFields {
+    /** 是否返回节点 id */
+    id?: boolean;
+    /** 是否返回节点 dataset */
+    dataset?: boolean;
+    /** 是否返回节点布局位置（left right top bottom） */
+    rect?: boolean;
+    /** 是否返回节点尺寸（width height） */
+    size?: boolean;
+    /** 是否返回节点的 scrollLeft scrollTop */
+    scrollOffset?: boolean;
+    /** 指定属性名列表，返回节点对应属性名的当前属性值 */
+    properties?: string[];
+    /** 指定样式名列表，返回节点对应样式名的当前值 */
+    computedStyle?: string[];
+    /** 是否返回节点对应的 Node 实例 */
+    node?: boolean;
+}
+/**
+ * Animated.View 组件的 Ref 类型（不包含 setText）
+ *
+ * @example
+ * ```tsx
+ * import { useRef } from 'react'
+ * import Animated, { type AnimatedViewRef } from '@/components/animated'
+ *
+ * const boxRef = useRef<AnimatedViewRef>(null)
+ * boxRef.current?.setStyle({ opacity: 0.5 })
+ * boxRef.current?.animate((anim) => {
+ *   anim.translateX(100).step({ duration: 300 })
+ * })
+ * ```
+ */
+export interface AnimatedViewRef {
+    /**
+     * 直接设置样式（无动画）
+     *
+     * 优势：不受 React 重渲染影响，可以在动画过程中随时调用 setState
+     * 而不用担心样式被覆盖或闪烁问题
+     *
+     * 注意：
+     * - 会清除动画数据并设置样式
+     * - 如果动画正在执行，会中断动画
+     * - 返回 Promise，可以等待样式应用完成
+     *
+     * @param style - 样式对象或 CSS 字符串
+     * @param callback - 可选的回调函数，样式应用完成后调用
+     * @returns Promise<void> - 样式应用完成后 resolve
+     *
+     * @example
+     * ```tsx
+     * // 基本使用
+     * ref.current?.setStyle({ opacity: 0.5, color: 'red' })
+     *
+     * // 等待样式应用完成
+     * await ref.current?.setStyle({ opacity: 0 })
+     *
+     * // 如果需要获取 rect，单独调用
+     * await ref.current?.setStyle({ opacity: 0 })
+     * const rect = await ref.current?.getBoundingClientRect()
+     *
+     * // 使用回调
+     * ref.current?.setStyle({ color: 'red' }, () => {
+     *   console.log('样式已应用')
+     * })
+     * ```
+     */
+    setStyle: (style: React.CSSProperties | string, callback?: () => void) => Promise<void>;
+    /**
+     * 创建动画对象
+     * 使用小程序原生动画 API，这是性能最优的动画方式
+     *
+     * @param options - 动画配置（可选）
+     * @param options.duration - 动画持续时间（毫秒），默认 400
+     * @param options.timingFunction - 缓动函数，默认 'linear'
+     * @param options.delay - 动画延迟时间（毫秒），默认 0
+     * @param options.transformOrigin - 变换原点，默认 '50% 50% 0'
+     * @returns Animation 实例，包含所有动画方法和 play() 方法
+     *
+     * @example
+     * ```tsx
+     * // 基本使用
+     * const animation = ref.current.animate()
+     * animation.translateX(100).step({ duration: 300 })
+     * await animation.play()
+     * console.log('动画完成！')
+     *
+     * // 链式调用
+     * const animation = ref.current
+     *   .animate({ transformOrigin: '50% 50%' })
+     *   .translateX(100)
+     *   .scale(1.2)
+     *   .step({ duration: 300 })
+     * await animation.play()
+     *
+     * // 多段动画
+     * const animation = ref.current.animate()
+     * animation.translateX(100).step({ duration: 300 })
+     * animation.translateY(100).step({ duration: 300 })
+     * animation.scale(1.5).step({ duration: 300 })
+     * await animation.play()
+     *
+     * // 复用动画
+     * const slideIn = ref.current.animate().translateX(100).step({ duration: 300 })
+     * await slideIn.play() // 第一次
+     * await slideIn.play() // 第二次
+     * ```
+     */
+    animate: (options?: TOptions) => IAnimation & {
+        play(): Promise<void>;
+    };
+    /**
+     * 获取元素的布局位置和尺寸信息
+     * 基于小程序 SelectorQuery.boundingClientRect API
+     *
+     * @returns Promise<BoundingClientRect | null>
+     *
+     * @example
+     * ```tsx
+     * const rect = await boxRef.current?.getBoundingClientRect()
+     * console.log(rect?.left, rect?.top, rect?.width, rect?.height)
+     *
+     * // 使用位置信息实现动画
+     * if (rect) {
+     *   const centerX = window.innerWidth / 2 - rect.left - rect.width / 2
+     *   const centerY = window.innerHeight / 2 - rect.top - rect.height / 2
+     *   boxRef.current?.animate((anim) => {
+     *     anim.translateX(centerX).translateY(centerY).scale(2).step({ duration: 300 })
+     *   })
+     * }
+     * ```
+     */
+    getBoundingClientRect: () => Promise<BoundingClientRect | null>;
+    /**
+     * 获取元素的详细信息（包括样式、属性等）
+     * 基于小程序 SelectorQuery.fields API
+     *
+     * @param fields - 查询字段配置
+     * @returns Promise<any>
+     *
+     * @example
+     * ```tsx
+     * // 获取元素的位置和计算后的样式
+     * const info = await boxRef.current?.getFields({
+     *   rect: true,
+     *   size: true,
+     *   computedStyle: ['backgroundColor', 'transform']
+     * })
+     * console.log(info?.backgroundColor, info?.transform)
+     * ```
+     */
+    getFields: (fields: NodeFields) => Promise<any>;
+    /**
+     * 获取元素的计算后样式（computed style）
+     * 这是一个便捷方法，内部调用 getFields
+     *
+     * 使用注意事项：
+     * 1. width/height 限制：通过 CSS 自动布局的元素，width/height 通常返回 'auto'
+     *    - 错误用法：用 getComputedStyle 获取实际像素尺寸
+     *    - 正确用法：使用 getBoundingClientRect() 获取实际尺寸
+     *
+     * 2. 内联样式限制：通过 React style 属性设置的样式可能无法查询
+     *    - 原因：小程序查询的是最终渲染的 CSS，不是 JS 设置的内联样式
+     *
+     * 3. 适用场景：
+     *    - 查询 transform 动画状态（动画执行中）
+     *    - 查询 opacity 等动画属性
+     *    - 查询通过 CSS 类设置的样式
+     *    - 查询元素实际尺寸（用 getBoundingClientRect）
+     *    - 查询通过 style={{ }} 设置的背景色等
+     *
+     * @param styleNames - 样式名称数组
+     * @returns Promise<Record<string, any> | null> - 返回样式对象
+     *
+     * @example
+     * ```tsx
+     * // 正确示例：查询动画相关样式
+     * const styles = await boxRef.current?.getComputedStyle([
+     *   'transform',
+     *   'opacity'
+     * ])
+     *
+     * console.log(styles?.transform)  // 'matrix(1.5, 0, 0, 1.5, 100, 50)'
+     * console.log(styles?.opacity)    // '0.8'
+     *
+     * // 根据当前 transform 决定下一步动画
+     * if (styles?.transform !== 'none') {
+     *   // 当前有 transform，恢复原位
+     *   boxRef.current?.animate((anim) => {
+     *     anim.translateX(0).translateY(0).scale(1).step({ duration: 300 })
+     *   })
+     * }
+     *
+     * // 错误示例：查询尺寸
+     * const styles = await boxRef.current?.getComputedStyle(['width', 'height'])
+     * console.log(styles?.width)  // 可能返回 'auto'，不是实际像素值
+     *
+     * // 正确做法：使用 getBoundingClientRect
+     * const rect = await boxRef.current?.getBoundingClientRect()
+     * console.log(rect?.width)  // 335 (实际像素值)
+     * ```
+     */
+    getComputedStyle: (styleNames: string[]) => Promise<Record<string, any> | null>;
+}
+/**
+ * Animated.Text 组件的 Ref 类型（包含 setText）
+ *
+ * @example
+ * ```tsx
+ * import { useRef } from 'react'
+ * import Animated, { type AnimatedTextRef } from '@/components/animated'
+ *
+ * const textRef = useRef<AnimatedTextRef>(null)
+ * textRef.current?.setText('新文本')
+ * textRef.current?.animate((anim) => {
+ *   anim.opacity(0.5).step({ duration: 300 })
+ * })
+ * ```
+ */
+export interface AnimatedTextRef extends AnimatedViewRef {
+    /**
+     * 直接设置文本内容（仅 Animated.Text 可用）
+     * 直接操作底层组件，不触发 React 重渲染
+     *
+     * @param text - 文本内容
+     *
+     * @example
+     * ```tsx
+     * <Animated.Text ref={textRef}>0</Animated.Text>
+     * // 更新文本
+     * textRef.current?.setText('100')
+     * ```
+     */
+    setText: (text: string) => void;
+}
+/**
+ * Animated 组件 Props
+ */
+export interface AnimatedProps extends TouchEventHandler {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    /** 组件模式：'view' 为容器模式（默认），'text' 为文本模式 */
+    mode?: 'view' | 'text';
+    /** 动画开始回调 */
+    onAnimationStart?: () => void;
+    /** 动画结束回调 */
+    onAnimationEnd?: () => void;
+}
+export {};

package/lib/Animated-old/animation.d.ts

@@ -0,0 +1,47 @@
+interface IAnimation {
+  // transform
+  translate(x?: number, y?: number): this
+  translateX(x?: number): this
+  translateY(y?: number): this
+  translateZ(z?: number): this
+
+  rotate(angle: number): this
+  rotateX(angle: number): this
+  rotateY(angle: number): this
+  rotateZ(angle: number): this
+  rotate3d(x: number, y: number, z: number, angle: number): this
+
+  scale(x?: number, y?: number): this
+  scaleX(x?: number): this
+  scaleY(y?: number): this
+  scaleZ(z?: number): this
+  scale3d(x?: number, y?: number, z?: number): this
+
+  skew(x?: number, y?: number): this
+  skewX(x?: number): this
+  skewY(y?: number): this
+
+  matrix(...args: number[]): this
+  matrix3d(...args: number[]): this
+
+  // style
+  opacity(opacity: number): this
+  width(value: number | string): this
+  height(value: number | string): this
+  top(value: number | string): this
+  left(value: number | string): this
+  right(value: number | string): this
+  bottom(value: number | string): this
+  backgroundColor(value: string): this
+
+  // step / export
+  step(
+    options?: Partial<{
+      transformOrigin: string
+      duration: number
+      timingFunction: string
+      delay: number
+    }>
+  ): this
+  export(): { actions: any[] }
+}

package/lib/Animated-old/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Animated - 纯净底层动画组件
+ *
+ * 只提供三个核心方法：
+ * - setProperty(property, value): 设置动画属性
+ * - setStyle(style): 设置样式
+ * - setText(text): 设置文本内容
+ *
+ * 可以配合任何动画库使用（GSAP、Anime.js、Framer Motion 等）
+ */
+import React from 'react';
+import type { AnimatedViewRef, AnimatedTextRef, AnimatedProps } from './types';
+/**
+ * 默认导出
+ */
+declare const Animated: {
+    View: React.ForwardRefExoticComponent<Omit<AnimatedProps, "mode"> & React.RefAttributes<AnimatedViewRef>>;
+    Text: React.ForwardRefExoticComponent<Omit<AnimatedProps, "mode"> & React.RefAttributes<AnimatedTextRef>>;
+};
+export default Animated;
+export type { AnimatedViewRef, AnimatedTextRef, AnimatedProps } from './types';

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

@@ -319,9 +319,9 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
       id: componentIdRef.current,
       __mode: mode
     }, className ? {
-      customClass: className
+      __className: className
     } : {}, customStyleValue ? {
-      customStyle: customStyleValue
+      __style: customStyleValue
     } : {}, mode === 'text' && textContent !== undefined ? {
       __text: textContent
     } : {}, eventBindings), mode === 'view' ? children : null)

package/lib/Animated-old/native/ty-animated/index.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare const TyAnimated: React.ComponentType<any>;
+export default TyAnimated;
+
+

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

@@ -28,20 +28,6 @@ Component({
       type: String,
       value: ''
     },
-    // 兼容 FastView 接口
-    customStyle: {
-      type: String,
-      value: ''
-    },
-    customClass: {
-      type: String,
-      value: '',
-      observer: function (v) {
-        this.setData({
-          __className: v
-        });
-      }
-    },
     onAnimationStart: {
       type: null,
       value: null
@@ -62,13 +48,7 @@ Component({
   },
   lifetimes: {
     attached() {
-      // 组件初始化：将 customStyle 的初始值复制到 __style
-      const initialStyle = this.properties.customStyle || '';
-      if (initialStyle) {
-        this.setData({
-          __style: initialStyle
-        });
-      }
+      // 组件初始化
     },
     detached() {
       // 清理工作

package/lib/Animated-old/native/ty-animated/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/lib/Animated-old/native/ty-animated/index.tyml

@@ -0,0 +1,26 @@
+<block>
+  <view
+    wx:if="{{__mode==='view'}}"
+    id="root"
+    class="{{__className}}"
+    style="{{__style}}"
+    animation="{{__animData}}"
+    bindtap="__onClick"
+    bindtouchstart="__onTouchStart"
+    bindtouchend="__onTouchEnd"
+  >
+    <slot></slot>
+  </view>
+  <text
+    wx:else
+    id="rootText"
+    class="container {{__className}}"
+    style="{{__style}}"
+    animation="{{__animData}}"
+    bindtap="__onClick"
+    bindtouchstart="__onTouchStart"
+    bindtouchend="__onTouchEnd"
+  >{{__text}}</text>
+</block>
+
+

package/lib/Animated-old/native/ty-animated/index.tyss

@@ -0,0 +1,3 @@
+.container { display: block; }
+
+

package/lib/Animated-old/types.js

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

package/lib/index.d.ts

@@ -33,5 +33,5 @@ export { default as Iframe } from './Iframe';
 export { default as Modal } from './Modal';
 export { default as Video } from './Video';
 export { default as SvgRender } from './SvgRender';
-export { default as Animated } from './Animated';
-export type { AnimatedViewRef, AnimatedTextRef, AnimatedProps } from './Animated';
+export { default as Animated } from './Animated ';
+export type { AnimatedViewRef, AnimatedTextRef, AnimatedProps } from './Animated ';

package/lib/index.js

@@ -33,4 +33,4 @@ export { default as Iframe } from './Iframe';
 export { default as Modal } from './Modal';
 export { default as Video } from './Video';
 export { default as SvgRender } from './SvgRender';
-export { default as Animated } from './Animated';
+export { default as Animated } from './Animated ';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/components",
-  "version": "1.7.56-beta.5",
+  "version": "1.7.56-beta.6",
   "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.5",
-    "@ray-js/framework-shared": "1.7.56-beta.5",
+    "@ray-js/adapter": "1.7.56-beta.6",
+    "@ray-js/framework-shared": "1.7.56-beta.6",
     "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.5"
+    "@ray-js/cli": "1.7.56-beta.6"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "504d74785b7f6ed42a0e20d929a77e9df4971bf8"
+  "gitHead": "9b3e69bb2a95a48e8a8fadd533a865d97be8c8a5"
 }