@yqg/aminofx-css-kit 1.0.2 → 1.0.4

package/README.md

@@ -269,9 +269,17 @@ export const AnimationComponent: React.FC = () => {
     playerRef.current = player;
 
     // 等待资源加载
-    player.ready().then(() => {
-      setIsReady(true);
-    });
+    player
+      .ready()
+      .then(() => {
+        // sdk初始化成功
+        setIsReady(true);
+        // 开始播放
+        player.play();
+      })
+      .catch((error) => {
+        console.error('sdk初始化失败', error);
+      });
 
     // 清理
     return () => {
@@ -280,16 +288,10 @@ export const AnimationComponent: React.FC = () => {
     };
   }, []);
 
-  const handlePlay = () => {
-    playerRef.current?.play();
-  };
-
   return (
     <div>
       <div id='animation-container' ref={containerRef} />
-      <button onClick={handlePlay} disabled={!isReady}>
-        {isReady ? '播放动画' : '加载中...'}
-      </button>
+      <button disabled={!isReady}>{isReady ? '播放动画' : '加载中...'}</button>
     </div>
   );
 };

package/dist/esm/index.d.ts

@@ -10,9 +10,15 @@ declare class AnimationPlayer {
     private isReady;
     private readyPromise;
     private loopTimerId;
+    private slotObservers;
     constructor(container: HTMLElement, options: IPlayerOptions);
     private init;
     private replacePlaceholders;
+    private handleSlotList;
+    private moveElementToSlot;
+    private performMove;
+    private observeElementMount;
+    private cleanupSlotObservers;
     private handleLoop;
     ready(): Promise<void>;
     play(): Promise<void>;

package/dist/esm/index.js

@@ -98,7 +98,7 @@ var ResourceLoader = /*#__PURE__*/function () {
 _defineProperty(ResourceLoader, "imageCache", new Map());
 _defineProperty(ResourceLoader, "loadingQueue", new Map());
 var AnimationPlayer = /*#__PURE__*/function () {
-  // 保存定时器ID，用于清理
+  // 保存 MutationObserver 实例，用于清理
 
   function AnimationPlayer(container, options) {
     _classCallCheck(this, AnimationPlayer);
@@ -107,6 +107,8 @@ var AnimationPlayer = /*#__PURE__*/function () {
     _defineProperty(this, "isReady", false);
     _defineProperty(this, "readyPromise", null);
     _defineProperty(this, "loopTimerId", null);
+    // 保存定时器ID，用于清理
+    _defineProperty(this, "slotObservers", []);
     this.container = container;
     this.options = options;
     this.init();
@@ -115,8 +117,6 @@ var AnimationPlayer = /*#__PURE__*/function () {
     key: "init",
     value: function () {
       var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-        var _this$options;
-        var _this$options2, _this$options$jsonSch, response, data;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -130,36 +130,9 @@ var AnimationPlayer = /*#__PURE__*/function () {
                 backgroundColor: 'rgba(0, 0, 0, 0.85)',
                 backdropFilter: 'blur(10px)'
               });
-              if (!this.options.jsonSchema) {
-                _context2.next = 5;
-                break;
-              }
-              this.container.innerHTML = this.replacePlaceholders(this.options.jsonSchema.content);
-              _context2.next = 17;
-              break;
-            case 5:
-              if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.jsonUrl)) {
-                _context2.next = 16;
-                break;
-              }
-              _context2.next = 8;
-              return fetch((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.jsonUrl);
-            case 8:
-              response = _context2.sent;
-              _context2.next = 11;
-              return response.json();
-            case 11:
-              data = _context2.sent;
-              this.options.jsonSchema = data;
-              this.container.innerHTML = this.replacePlaceholders(((_this$options$jsonSch = this.options.jsonSchema) === null || _this$options$jsonSch === void 0 ? void 0 : _this$options$jsonSch.content) || '');
-              _context2.next = 17;
-              break;
-            case 16:
-              throw new Error('没有提供jsonSchema或jsonUrl');
-            case 17:
-              _context2.next = 19;
+              _context2.next = 3;
               return this.ready();
-            case 19:
+            case 3:
             case "end":
               return _context2.stop();
           }
@@ -192,14 +165,139 @@ var AnimationPlayer = /*#__PURE__*/function () {
         return ((_this2$options$dynami = _this2.options.dynamicData) === null || _this2$options$dynami === void 0 ? void 0 : _this2$options$dynami[key]) !== undefined ? String(_this2.options.dynamicData[key]) : match;
       });
     }
+
+    /**
+     * 处理插槽列表，将 elementId 对应的元素移动到 slotId 对应的插槽中
+     * 需要处理时序问题：slotId 需要弹窗渲染后才存在，elementId 可能尚未挂载
+     */
+  }, {
+    key: "handleSlotList",
+    value: function handleSlotList() {
+      var _this3 = this;
+      if (!this.options.extensions || this.options.extensions.length === 0 || !this.options.extensions.some(function (item) {
+        return item.slotId;
+      }) || !this.options.extensions.some(function (item) {
+        return item.elementId;
+      })) {
+        return;
+      }
+      console.log('aminofx:  🎰 开始处理插槽列表');
+      this.options.extensions.forEach(function (slotItem, index) {
+        var slotId = slotItem.slotId,
+          elementId = slotItem.elementId;
+        if (!slotId || !elementId) {
+          console.warn("aminofx:  \u26A0\uFE0F \u63D2\u69FD\u914D\u7F6E ".concat(index + 1, " \u7F3A\u5C11 slotId \u6216 elementId"));
+          return;
+        }
+        _this3.moveElementToSlot(slotId, elementId, index);
+      });
+    }
+
+    /**
+     * 将元素移动到插槽中
+     * @param slotId - 插槽 DOM id
+     * @param elementId - 元素 DOM id
+     * @param index - 插槽索引，用于日志
+     */
+  }, {
+    key: "moveElementToSlot",
+    value: function moveElementToSlot(slotId, elementId, index) {
+      var slotElement = this.container.querySelector("#".concat(slotId));
+      if (!slotElement) {
+        console.warn("aminofx:  \u26A0\uFE0F \u63D2\u69FD ".concat(index + 1, " \u7684 slotId \"").concat(slotId, "\" \u5728\u5F39\u7A97\u4E2D\u672A\u627E\u5230"));
+        return;
+      }
+      var targetElement = document.getElementById(elementId);
+      if (targetElement) {
+        // elementId 已存在，直接移动
+        this.performMove(slotElement, targetElement, index);
+      } else {
+        // elementId 尚未挂载，添加 MutationObserver 监听
+        console.log("aminofx:  \u23F3 \u63D2\u69FD ".concat(index + 1, " \u7684 elementId \"").concat(elementId, "\" \u5C1A\u672A\u6302\u8F7D\uFF0C\u7B49\u5F85\u4E2D..."));
+        this.observeElementMount(slotId, elementId, slotElement, index);
+      }
+    }
+
+    /**
+     * 执行元素移动操作
+     * @param slotElement - 插槽元素
+     * @param targetElement - 目标元素
+     * @param index - 插槽索引，用于日志
+     */
+  }, {
+    key: "performMove",
+    value: function performMove(slotElement, targetElement, index) {
+      try {
+        slotElement.appendChild(targetElement);
+        console.log("aminofx:  \u2705 \u63D2\u69FD ".concat(index + 1, " \u5143\u7D20\u79FB\u52A8\u6210\u529F: ").concat(targetElement.id, " -> ").concat(slotElement.id));
+      } catch (error) {
+        console.error("aminofx:  \u274C \u63D2\u69FD ".concat(index + 1, " \u5143\u7D20\u79FB\u52A8\u5931\u8D25:"), error);
+      }
+    }
+
+    /**
+     * 使用 MutationObserver 监听 elementId 元素的挂载
+     * @param slotId - 插槽 DOM id
+     * @param elementId - 元素 DOM id
+     * @param slotElement - 插槽元素
+     * @param index - 插槽索引，用于日志
+     */
+  }, {
+    key: "observeElementMount",
+    value: function observeElementMount(slotId, elementId, slotElement, index) {
+      var _this4 = this;
+      var observer = new MutationObserver(function (mutations, obs) {
+        var targetElement = document.getElementById(elementId);
+        if (targetElement) {
+          console.log("aminofx:  \uD83C\uDFAF \u63D2\u69FD ".concat(index + 1, " \u68C0\u6D4B\u5230 elementId \"").concat(elementId, "\" \u5DF2\u6302\u8F7D"));
+
+          // 再次检查 slotElement 是否仍然有效（防止弹窗已销毁）
+          if (_this4.container.contains(slotElement)) {
+            _this4.performMove(slotElement, targetElement, index);
+          } else {
+            console.warn("aminofx:  \u26A0\uFE0F \u63D2\u69FD ".concat(index + 1, " \u7684 slotId \"").concat(slotId, "\" \u5DF2\u4E0D\u5728 DOM \u4E2D"));
+          }
+
+          // 停止观察
+          obs.disconnect();
+          // 从数组中移除
+          var observerIndex = _this4.slotObservers.indexOf(obs);
+          if (observerIndex > -1) {
+            _this4.slotObservers.splice(observerIndex, 1);
+          }
+        }
+      });
+
+      // 保存 observer 实例，用于销毁时清理
+      this.slotObservers.push(observer);
+
+      // 观察整个 document.body 的子树变化
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    }
+
+    /**
+     * 清理所有 MutationObserver
+     */
+  }, {
+    key: "cleanupSlotObservers",
+    value: function cleanupSlotObservers() {
+      this.slotObservers.forEach(function (observer) {
+        observer.disconnect();
+      });
+      this.slotObservers = [];
+      console.log('aminofx:  🧹 清理所有插槽观察器');
+    }
   }, {
     key: "handleLoop",
     value: function handleLoop() {
-      var _this$options$jsonSch2,
-        _this3 = this,
-        _this$options$jsonSch3,
-        _this$options$jsonSch4;
-      if (!this.options.autoLoop || !Number((_this$options$jsonSch2 = this.options.jsonSchema) === null || _this$options$jsonSch2 === void 0 ? void 0 : _this$options$jsonSch2.duration)) {
+      var _this$options$jsonSch,
+        _this5 = this,
+        _this$options$jsonSch2,
+        _this$options$jsonSch3;
+      if (!this.options.autoLoop || !Number((_this$options$jsonSch = this.options.jsonSchema) === null || _this$options$jsonSch === void 0 ? void 0 : _this$options$jsonSch.duration)) {
         return;
       }
 
@@ -212,71 +310,129 @@ var AnimationPlayer = /*#__PURE__*/function () {
 
       // 后续根据使用情况看是否调整为监听css动画结束事件
       this.loopTimerId = window.setTimeout(function () {
-        _this3.container.style.display = 'none';
+        _this5.container.style.display = 'none';
         window.setTimeout(function () {
-          _this3.loopTimerId = null;
-          _this3.play();
+          _this5.loopTimerId = null;
+          _this5.play();
         }, 100);
-      }, Number((_this$options$jsonSch3 = this.options.jsonSchema) === null || _this$options$jsonSch3 === void 0 ? void 0 : _this$options$jsonSch3.duration));
-      console.log("aminofx:  \uD83D\uDD04 \u542F\u52A8\u5FAA\u73AF\u5B9A\u65F6\u5668\uFF0C\u65F6\u957F: ".concat((_this$options$jsonSch4 = this.options.jsonSchema) === null || _this$options$jsonSch4 === void 0 ? void 0 : _this$options$jsonSch4.duration, "ms"));
+      }, Number((_this$options$jsonSch2 = this.options.jsonSchema) === null || _this$options$jsonSch2 === void 0 ? void 0 : _this$options$jsonSch2.duration));
+      console.log("aminofx:  \uD83D\uDD04 \u542F\u52A8\u5FAA\u73AF\u5B9A\u65F6\u5668\uFF0C\u65F6\u957F: ".concat((_this$options$jsonSch3 = this.options.jsonSchema) === null || _this$options$jsonSch3 === void 0 ? void 0 : _this$options$jsonSch3.duration, "ms"));
     }
   }, {
     key: "ready",
     value: function () {
-      var _ready = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-        var _this4 = this;
-        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
+      var _ready = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+        var _this6 = this;
+        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
             case 0:
               if (!this.isReady) {
-                _context4.next = 3;
+                _context5.next = 3;
                 break;
               }
               console.log('aminofx:  ✅ 动画已准备就绪，直接返回');
-              return _context4.abrupt("return", Promise.resolve());
+              return _context5.abrupt("return", Promise.resolve());
             case 3:
               if (!this.readyPromise) {
-                _context4.next = 6;
+                _context5.next = 6;
                 break;
               }
               console.log('aminofx:  ⏳ 正在准备中，等待现有Promise...');
-              return _context4.abrupt("return", this.readyPromise);
+              return _context5.abrupt("return", this.readyPromise);
             case 6:
               this.readyPromise = new Promise( /*#__PURE__*/function () {
-                var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(resolve) {
-                  return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-                    while (1) switch (_context3.prev = _context3.next) {
+                var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(resolve, reject) {
+                  var jsonPromise, imgPromise;
+                  return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+                    while (1) switch (_context4.prev = _context4.next) {
                       case 0:
-                        _context3.prev = 0;
-                        _context3.next = 3;
-                        return ResourceLoader.loadImages(_this4.options.preloadImgList || []);
-                      case 3:
-                        _this4.isReady = true; // 设置准备完成状态
+                        _context4.prev = 0;
+                        jsonPromise = new Promise( /*#__PURE__*/function () {
+                          var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(resolve, reject) {
+                            var _this6$options;
+                            var _this6$options2, _this6$options$jsonSc, response, data;
+                            return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+                              while (1) switch (_context3.prev = _context3.next) {
+                                case 0:
+                                  if (!_this6.options.jsonSchema) {
+                                    _context3.next = 5;
+                                    break;
+                                  }
+                                  _this6.container.innerHTML = _this6.replacePlaceholders(_this6.options.jsonSchema.content);
+                                  resolve();
+                                  _context3.next = 24;
+                                  break;
+                                case 5:
+                                  if (!((_this6$options = _this6.options) !== null && _this6$options !== void 0 && _this6$options.jsonUrl)) {
+                                    _context3.next = 23;
+                                    break;
+                                  }
+                                  _context3.prev = 6;
+                                  _context3.next = 9;
+                                  return fetch((_this6$options2 = _this6.options) === null || _this6$options2 === void 0 ? void 0 : _this6$options2.jsonUrl);
+                                case 9:
+                                  response = _context3.sent;
+                                  _context3.next = 12;
+                                  return response.json();
+                                case 12:
+                                  data = _context3.sent;
+                                  _this6.options.jsonSchema = data;
+                                  _this6.container.innerHTML = _this6.replacePlaceholders(((_this6$options$jsonSc = _this6.options.jsonSchema) === null || _this6$options$jsonSc === void 0 ? void 0 : _this6$options$jsonSc.content) || '');
+                                  resolve();
+                                  _context3.next = 21;
+                                  break;
+                                case 18:
+                                  _context3.prev = 18;
+                                  _context3.t0 = _context3["catch"](6);
+                                  reject(_context3.t0);
+                                case 21:
+                                  _context3.next = 24;
+                                  break;
+                                case 23:
+                                  throw new Error('没有提供jsonSchema或jsonUrl');
+                                case 24:
+                                case "end":
+                                  return _context3.stop();
+                              }
+                            }, _callee3, null, [[6, 18]]);
+                          }));
+                          return function (_x4, _x5) {
+                            return _ref2.apply(this, arguments);
+                          };
+                        }());
+                        imgPromise = ResourceLoader.loadImages(_this6.options.preloadImgList || []);
+                        _context4.next = 5;
+                        return Promise.all([jsonPromise, imgPromise]);
+                      case 5:
+                        _this6.isReady = true; // 设置准备完成状态
+
+                        // 处理插槽列表（此时弹窗内容已渲染，slotId 存在）
+                        _this6.handleSlotList();
+                        resolve();
                         console.log('aminofx:  🎉 动画准备完成，可以开始播放');
-                        _context3.next = 10;
+                        _context4.next = 15;
                         break;
-                      case 7:
-                        _context3.prev = 7;
-                        _context3.t0 = _context3["catch"](0);
-                        console.error('aminofx:  ❌ 动画准备失败:', _context3.t0);
-                      case 10:
-                        resolve();
                       case 11:
+                        _context4.prev = 11;
+                        _context4.t0 = _context4["catch"](0);
+                        reject(_context4.t0);
+                        console.error('aminofx:  ❌ 动画准备失败:', _context4.t0);
+                      case 15:
                       case "end":
-                        return _context3.stop();
+                        return _context4.stop();
                     }
-                  }, _callee3, null, [[0, 7]]);
+                  }, _callee4, null, [[0, 11]]);
                 }));
-                return function (_x2) {
+                return function (_x2, _x3) {
                   return _ref.apply(this, arguments);
                 };
               }());
-              return _context4.abrupt("return", this.readyPromise);
+              return _context5.abrupt("return", this.readyPromise);
             case 8:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
-        }, _callee4, this);
+        }, _callee5, this);
       }));
       function ready() {
         return _ready.apply(this, arguments);
@@ -286,16 +442,16 @@ var AnimationPlayer = /*#__PURE__*/function () {
   }, {
     key: "play",
     value: function () {
-      var _play = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+      var _play = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
             case 0:
               if (this.isReady) {
-                _context5.next = 4;
+                _context6.next = 4;
                 break;
               }
               console.warn('aminofx:  ⚠️ 动画尚未准备就绪，自动调用ready()...');
-              _context5.next = 4;
+              _context6.next = 4;
               return this.ready();
             case 4:
               this.container.style.display = 'flex';
@@ -306,9 +462,9 @@ var AnimationPlayer = /*#__PURE__*/function () {
               }
             case 6:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
-        }, _callee5, this);
+        }, _callee6, this);
       }));
       function play() {
         return _play.apply(this, arguments);
@@ -325,6 +481,9 @@ var AnimationPlayer = /*#__PURE__*/function () {
         console.log('aminofx:  🧹 销毁时清理循环定时器');
       }
 
+      // 清理插槽观察器
+      this.cleanupSlotObservers();
+
       // 重置状态
       this.container.innerHTML = '';
       this.isReady = false;

package/dist/esm/type.d.ts

@@ -9,5 +9,15 @@ interface IPlayerOptions {
     preloadImgList?: string[];
     autoLoop?: boolean;
     dynamicData?: Record<string, string | number | boolean>;
+    extensions?: {
+        slotId?: string;
+        elementId?: string;
+        clickAreas?: {
+            x?: number;
+            y?: number;
+            width?: number;
+            height?: number;
+        };
+    }[];
 }
 export type { IPlayerOptions, IJsonSchema };

package/dist/umd/aminofx-css-kit.min.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["@yqg/aminofx-css-kit"]=e():t["@yqg/aminofx-css-kit"]=e()}(self,(function(){return function(){var t={506:function(){},365:function(t){function e(t,e,r,n,o,i,a){try{var s=t[i](a),c=s.value}catch(t){return void r(t)}s.done?e(c):Promise.resolve(c).then(n,o)}t.exports=function(t){return function(){var r=this,n=arguments;return new Promise((function(o,i){var a=t.apply(r,n);function s(t){e(a,o,i,s,c,"next",t)}function c(t){e(a,o,i,s,c,"throw",t)}s(void 0)}))}},t.exports.__esModule=!0,t.exports.default=t.exports},156:function(t){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},t.exports.__esModule=!0,t.exports.default=t.exports},499:function(t,e,r){var n=r(714);function o(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,n(o.key),o)}}t.exports=function(t,e,r){return e&&o(t.prototype,e),r&&o(t,r),Object.defineProperty(t,"prototype",{writable:!1}),t},t.exports.__esModule=!0,t.exports.default=t.exports},173:function(t,e,r){var n=r(714);t.exports=function(t,e,r){return(e=n(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t},t.exports.__esModule=!0,t.exports.default=t.exports},298:function(t,e,r){var n=r(241).default;function o(){"use strict";t.exports=o=function(){return r},t.exports.__esModule=!0,t.exports.default=t.exports;var e,r={},i=Object.prototype,a=i.hasOwnProperty,s=Object.defineProperty||function(t,e,r){t[e]=r.value},c="function"==typeof Symbol?Symbol:{},u=c.iterator||"@@iterator",l=c.asyncIterator||"@@asyncIterator",f=c.toStringTag||"@@toStringTag";function p(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{p({},"")}catch(e){p=function(t,e,r){return t[e]=r}}function h(t,e,r,n){var o=e&&e.prototype instanceof g?e:g,i=Object.create(o.prototype),a=new M(n||[]);return s(i,"_invoke",{value:S(t,r,a)}),i}function d(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}r.wrap=h;var y="suspendedStart",v="executing",m="completed",x={};function g(){}function w(){}function b(){}var j={};p(j,u,(function(){return this}));var P=Object.getPrototypeOf,_=P&&P(P(N([])));_&&_!==i&&a.call(_,u)&&(j=_);var k=b.prototype=g.prototype=Object.create(j);function L(t){["next","throw","return"].forEach((function(e){p(t,e,(function(t){return this._invoke(e,t)}))}))}function E(t,e){function r(o,i,s,c){var u=d(t[o],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==n(f)&&a.call(f,"__await")?e.resolve(f.__await).then((function(t){r("next",t,s,c)}),(function(t){r("throw",t,s,c)})):e.resolve(f).then((function(t){l.value=t,s(l)}),(function(t){return r("throw",t,s,c)}))}c(u.arg)}var o;s(this,"_invoke",{value:function(t,n){function i(){return new e((function(e,o){r(t,n,e,o)}))}return o=o?o.then(i,i):i()}})}function S(t,r,n){var o=y;return function(i,a){if(o===v)throw new Error("Generator is already running");if(o===m){if("throw"===i)throw a;return{value:e,done:!0}}for(n.method=i,n.arg=a;;){var s=n.delegate;if(s){var c=T(s,n);if(c){if(c===x)continue;return c}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===y)throw o=m,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=v;var u=d(t,r,n);if("normal"===u.type){if(o=n.done?m:"suspendedYield",u.arg===x)continue;return{value:u.arg,done:n.done}}"throw"===u.type&&(o=m,n.method="throw",n.arg=u.arg)}}}function T(t,r){var n=r.method,o=t.iterator[n];if(o===e)return r.delegate=null,"throw"===n&&t.iterator.return&&(r.method="return",r.arg=e,T(t,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),x;var i=d(o,t.iterator,r.arg);if("throw"===i.type)return r.method="throw",r.arg=i.arg,r.delegate=null,x;var a=i.arg;return a?a.done?(r[t.resultName]=a.value,r.next=t.nextLoc,"return"!==r.method&&(r.method="next",r.arg=e),r.delegate=null,x):a:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,x)}function O(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function I(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function M(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(O,this),this.reset(!0)}function N(t){if(t||""===t){var r=t[u];if(r)return r.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var o=-1,i=function r(){for(;++o<t.length;)if(a.call(t,o))return r.value=t[o],r.done=!1,r;return r.value=e,r.done=!0,r};return i.next=i}}throw new TypeError(n(t)+" is not iterable")}return w.prototype=b,s(k,"constructor",{value:b,configurable:!0}),s(b,"constructor",{value:w,configurable:!0}),w.displayName=p(b,f,"GeneratorFunction"),r.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===w||"GeneratorFunction"===(e.displayName||e.name))},r.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,b):(t.__proto__=b,p(t,f,"GeneratorFunction")),t.prototype=Object.create(k),t},r.awrap=function(t){return{__await:t}},L(E.prototype),p(E.prototype,l,(function(){return this})),r.AsyncIterator=E,r.async=function(t,e,n,o,i){void 0===i&&(i=Promise);var a=new E(h(t,e,n,o),i);return r.isGeneratorFunction(e)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},L(k),p(k,f,"Generator"),p(k,u,(function(){return this})),p(k,"toString",(function(){return"[object Generator]"})),r.keys=function(t){var e=Object(t),r=[];for(var n in e)r.push(n);return r.reverse(),function t(){for(;r.length;){var n=r.pop();if(n in e)return t.value=n,t.done=!1,t}return t.done=!0,t}},r.values=N,M.prototype={constructor:M,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(I),!t)for(var r in this)"t"===r.charAt(0)&&a.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=e)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var r=this;function n(n,o){return s.type="throw",s.arg=t,r.next=n,o&&(r.method="next",r.arg=e),!!o}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],s=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var c=a.call(i,"catchLoc"),u=a.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return n(i.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var n=this.tryEntries[r];if(n.tryLoc<=this.prev&&a.call(n,"finallyLoc")&&this.prev<n.finallyLoc){var o=n;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var i=o?o.completion:{};return i.type=t,i.arg=e,o?(this.method="next",this.next=o.finallyLoc,x):this.complete(i)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),x},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),I(r),x}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;I(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,r,n){return this.delegate={iterator:N(t),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=e),x}},r}t.exports=o,t.exports.__esModule=!0,t.exports.default=t.exports},569:function(t,e,r){var n=r(241).default;t.exports=function(t,e){if("object"!=n(t)||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,e||"default");if("object"!=n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)},t.exports.__esModule=!0,t.exports.default=t.exports},714:function(t,e,r){var n=r(241).default,o=r(569);t.exports=function(t){var e=o(t,"string");return"symbol"==n(e)?e:String(e)},t.exports.__esModule=!0,t.exports.default=t.exports},241:function(t){function e(r){return t.exports=e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t.exports.__esModule=!0,t.exports.default=t.exports,e(r)}t.exports=e,t.exports.__esModule=!0,t.exports.default=t.exports}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,r),i.exports}r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,{a:e}),e},r.d=function(t,e){for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return function(){"use strict";r.r(n),r.d(n,{AnimationPlayer:function(){return v}});var t=r(298),e=r.n(t),o=r(365),i=r.n(o),a=r(156),s=r.n(a),c=r(499),u=r.n(c),l=r(173),f=r.n(l),p=r(506),h={};for(var d in p)["default","AnimationPlayer"].indexOf(d)<0&&(h[d]=function(t){return p[t]}.bind(0,d));r.d(n,h);var y=function(){function t(){s()(this,t)}var r;return u()(t,null,[{key:"loadImages",value:(r=i()(e()().mark((function t(r){var n,o=this;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(Array.isArray(r)&&0!==r.length){t.next=2;break}return t.abrupt("return",Promise.resolve());case 2:return n=r.map((function(t,e){if(!t.startsWith("http"))return Promise.resolve();if(o.imageCache.has(t))return console.log("aminofx:  ✅ 图片 ".concat(e+1," 已缓存: ").concat(t)),Promise.resolve();if(o.loadingQueue.has(t))return o.loadingQueue.get(t);var r=new Promise((function(r){var n=new Image;n.onload=function(){o.imageCache.set(t,!0),o.loadingQueue.delete(t),console.log("aminofx:  ✅ 图片 ".concat(e+1," 加载成功: ").concat(t)),"function"==typeof n.decode?n.decode().then((function(){console.log("aminofx:  🎨 图片 ".concat(e+1," 解码完成: ").concat(t)),r()})).catch((function(){console.log("aminofx:  ⚠️ 图片 ".concat(e+1," decode失败，使用fallback: ").concat(t)),r()})):(console.log("aminofx:  📱 图片 ".concat(e+1," 使用兼容模式: ").concat(t)),r())},n.src=t,n.onerror=function(){o.loadingQueue.delete(t),console.error("aminofx:  ❌ 图片 ".concat(e+1," 加载失败: ").concat(t)),r()}}));return o.loadingQueue.set(t,r),r})),t.prev=3,t.next=6,Promise.all(n);case 6:console.log("aminofx:  🎉 所有图片资源加载完成"),t.next=12;break;case 9:t.prev=9,t.t0=t.catch(3),console.error("aminofx:  ❌ 图片加载过程中出现错误:",t.t0);case 12:case"end":return t.stop()}}),t,null,[[3,9]])}))),function(t){return r.apply(this,arguments)})}]),t}();f()(y,"imageCache",new Map),f()(y,"loadingQueue",new Map);var v=function(){function t(e,r){s()(this,t),f()(this,"container",void 0),f()(this,"options",void 0),f()(this,"isReady",!1),f()(this,"readyPromise",null),f()(this,"loopTimerId",null),this.container=e,this.options=r,this.init()}var r,n,o;return u()(t,[{key:"init",value:(o=i()(e()().mark((function t(){var r,n,o,i,a;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(Object.assign(this.container.style,{display:"none",width:"100vw",height:"100vh",overflow:"hidden",alignItems:this.options.alignItems||"center",justifyContent:"center",backgroundColor:"rgba(0, 0, 0, 0.85)",backdropFilter:"blur(10px)"}),!this.options.jsonSchema){t.next=5;break}this.container.innerHTML=this.replacePlaceholders(this.options.jsonSchema.content),t.next=17;break;case 5:if(null===(r=this.options)||void 0===r||!r.jsonUrl){t.next=16;break}return t.next=8,fetch(null===(n=this.options)||void 0===n?void 0:n.jsonUrl);case 8:return i=t.sent,t.next=11,i.json();case 11:a=t.sent,this.options.jsonSchema=a,this.container.innerHTML=this.replacePlaceholders((null===(o=this.options.jsonSchema)||void 0===o?void 0:o.content)||""),t.next=17;break;case 16:throw new Error("没有提供jsonSchema或jsonUrl");case 17:return t.next=19,this.ready();case 19:case"end":return t.stop()}}),t,this)}))),function(){return o.apply(this,arguments)})},{key:"replacePlaceholders",value:function(t){var e=this;return this.options.dynamicData&&t?t.replace(/\{\{(\w+)\}\}|\$\{(\w+)\}/g,(function(t,r,n){var o,i=r||n;return void 0!==(null===(o=e.options.dynamicData)||void 0===o?void 0:o[i])?String(e.options.dynamicData[i]):t})):t}},{key:"handleLoop",value:function(){var t,e,r,n=this;this.options.autoLoop&&Number(null===(t=this.options.jsonSchema)||void 0===t?void 0:t.duration)&&(null!==this.loopTimerId&&(clearTimeout(this.loopTimerId),this.loopTimerId=null,console.log("aminofx:  🧹 清理旧的循环定时器")),this.loopTimerId=window.setTimeout((function(){n.container.style.display="none",window.setTimeout((function(){n.loopTimerId=null,n.play()}),100)}),Number(null===(e=this.options.jsonSchema)||void 0===e?void 0:e.duration)),console.log("aminofx:  🔄 启动循环定时器，时长: ".concat(null===(r=this.options.jsonSchema)||void 0===r?void 0:r.duration,"ms")))}},{key:"ready",value:(n=i()(e()().mark((function t(){var r=this;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!this.isReady){t.next=3;break}return console.log("aminofx:  ✅ 动画已准备就绪，直接返回"),t.abrupt("return",Promise.resolve());case 3:if(!this.readyPromise){t.next=6;break}return console.log("aminofx:  ⏳ 正在准备中，等待现有Promise..."),t.abrupt("return",this.readyPromise);case 6:return this.readyPromise=new Promise(function(){var t=i()(e()().mark((function t(n){return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,y.loadImages(r.options.preloadImgList||[]);case 3:r.isReady=!0,console.log("aminofx:  🎉 动画准备完成，可以开始播放"),t.next=10;break;case 7:t.prev=7,t.t0=t.catch(0),console.error("aminofx:  ❌ 动画准备失败:",t.t0);case 10:n();case 11:case"end":return t.stop()}}),t,null,[[0,7]])})));return function(e){return t.apply(this,arguments)}}()),t.abrupt("return",this.readyPromise);case 8:case"end":return t.stop()}}),t,this)}))),function(){return n.apply(this,arguments)})},{key:"play",value:(r=i()(e()().mark((function t(){return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(this.isReady){t.next=4;break}return console.warn("aminofx:  ⚠️ 动画尚未准备就绪，自动调用ready()..."),t.next=4,this.ready();case 4:this.container.style.display="flex",this.options.autoLoop&&null===this.loopTimerId&&this.handleLoop();case 6:case"end":return t.stop()}}),t,this)}))),function(){return r.apply(this,arguments)})},{key:"destroy",value:function(){null!==this.loopTimerId&&(clearTimeout(this.loopTimerId),this.loopTimerId=null,console.log("aminofx:  🧹 销毁时清理循环定时器")),this.container.innerHTML="",this.isReady=!1,this.readyPromise=null,console.log("aminofx:  🗑️ AnimationPlayer 已销毁")}},{key:"updateSchema",value:function(t){this.destroy(),this.options=t,this.init()}}]),t}();function m(t,e){var r=document.getElementById(t);if(!r)throw new Error('Container with id "'.concat(t,'" not found'));var n=document.createElement("div"),o=new v(n,e);return r.appendChild(n),o}n.default=m,window.createCssAnimationPlayer=m}(),n}()}));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["@yqg/aminofx-css-kit"]=e():t["@yqg/aminofx-css-kit"]=e()}(self,(function(){return function(){var t={506:function(){},365:function(t){function e(t,e,n,o,r,i,a){try{var s=t[i](a),c=s.value}catch(t){return void n(t)}s.done?e(c):Promise.resolve(c).then(o,r)}t.exports=function(t){return function(){var n=this,o=arguments;return new Promise((function(r,i){var a=t.apply(n,o);function s(t){e(a,r,i,s,c,"next",t)}function c(t){e(a,r,i,s,c,"throw",t)}s(void 0)}))}},t.exports.__esModule=!0,t.exports.default=t.exports},156:function(t){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},t.exports.__esModule=!0,t.exports.default=t.exports},499:function(t,e,n){var o=n(714);function r(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,o(r.key),r)}}t.exports=function(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t},t.exports.__esModule=!0,t.exports.default=t.exports},173:function(t,e,n){var o=n(714);t.exports=function(t,e,n){return(e=o(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t},t.exports.__esModule=!0,t.exports.default=t.exports},298:function(t,e,n){var o=n(241).default;function r(){"use strict";t.exports=r=function(){return n},t.exports.__esModule=!0,t.exports.default=t.exports;var e,n={},i=Object.prototype,a=i.hasOwnProperty,s=Object.defineProperty||function(t,e,n){t[e]=n.value},c="function"==typeof Symbol?Symbol:{},u=c.iterator||"@@iterator",l=c.asyncIterator||"@@asyncIterator",f=c.toStringTag||"@@toStringTag";function p(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{p({},"")}catch(e){p=function(t,e,n){return t[e]=n}}function h(t,e,n,o){var r=e&&e.prototype instanceof g?e:g,i=Object.create(r.prototype),a=new M(o||[]);return s(i,"_invoke",{value:S(t,n,a)}),i}function d(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}n.wrap=h;var v="suspendedStart",m="executing",y="completed",x={};function g(){}function b(){}function w(){}var k={};p(k,u,(function(){return this}));var P=Object.getPrototypeOf,j=P&&P(P(N([])));j&&j!==i&&a.call(j,u)&&(k=j);var L=w.prototype=g.prototype=Object.create(k);function _(t){["next","throw","return"].forEach((function(e){p(t,e,(function(t){return this._invoke(e,t)}))}))}function E(t,e){function n(r,i,s,c){var u=d(t[r],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==o(f)&&a.call(f,"__await")?e.resolve(f.__await).then((function(t){n("next",t,s,c)}),(function(t){n("throw",t,s,c)})):e.resolve(f).then((function(t){l.value=t,s(l)}),(function(t){return n("throw",t,s,c)}))}c(u.arg)}var r;s(this,"_invoke",{value:function(t,o){function i(){return new e((function(e,r){n(t,o,e,r)}))}return r=r?r.then(i,i):i()}})}function S(t,n,o){var r=v;return function(i,a){if(r===m)throw new Error("Generator is already running");if(r===y){if("throw"===i)throw a;return{value:e,done:!0}}for(o.method=i,o.arg=a;;){var s=o.delegate;if(s){var c=O(s,o);if(c){if(c===x)continue;return c}}if("next"===o.method)o.sent=o._sent=o.arg;else if("throw"===o.method){if(r===v)throw r=y,o.arg;o.dispatchException(o.arg)}else"return"===o.method&&o.abrupt("return",o.arg);r=m;var u=d(t,n,o);if("normal"===u.type){if(r=o.done?y:"suspendedYield",u.arg===x)continue;return{value:u.arg,done:o.done}}"throw"===u.type&&(r=y,o.method="throw",o.arg=u.arg)}}}function O(t,n){var o=n.method,r=t.iterator[o];if(r===e)return n.delegate=null,"throw"===o&&t.iterator.return&&(n.method="return",n.arg=e,O(t,n),"throw"===n.method)||"return"!==o&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+o+"' method")),x;var i=d(r,t.iterator,n.arg);if("throw"===i.type)return n.method="throw",n.arg=i.arg,n.delegate=null,x;var a=i.arg;return a?a.done?(n[t.resultName]=a.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,x):a:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,x)}function I(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function T(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function M(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(I,this),this.reset(!0)}function N(t){if(t||""===t){var n=t[u];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var r=-1,i=function n(){for(;++r<t.length;)if(a.call(t,r))return n.value=t[r],n.done=!1,n;return n.value=e,n.done=!0,n};return i.next=i}}throw new TypeError(o(t)+" is not iterable")}return b.prototype=w,s(L,"constructor",{value:w,configurable:!0}),s(w,"constructor",{value:b,configurable:!0}),b.displayName=p(w,f,"GeneratorFunction"),n.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===b||"GeneratorFunction"===(e.displayName||e.name))},n.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,w):(t.__proto__=w,p(t,f,"GeneratorFunction")),t.prototype=Object.create(L),t},n.awrap=function(t){return{__await:t}},_(E.prototype),p(E.prototype,l,(function(){return this})),n.AsyncIterator=E,n.async=function(t,e,o,r,i){void 0===i&&(i=Promise);var a=new E(h(t,e,o,r),i);return n.isGeneratorFunction(e)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},_(L),p(L,f,"Generator"),p(L,u,(function(){return this})),p(L,"toString",(function(){return"[object Generator]"})),n.keys=function(t){var e=Object(t),n=[];for(var o in e)n.push(o);return n.reverse(),function t(){for(;n.length;){var o=n.pop();if(o in e)return t.value=o,t.done=!1,t}return t.done=!0,t}},n.values=N,M.prototype={constructor:M,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(T),!t)for(var n in this)"t"===n.charAt(0)&&a.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=e)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function o(o,r){return s.type="throw",s.arg=t,n.next=o,r&&(n.method="next",n.arg=e),!!r}for(var r=this.tryEntries.length-1;r>=0;--r){var i=this.tryEntries[r],s=i.completion;if("root"===i.tryLoc)return o("end");if(i.tryLoc<=this.prev){var c=a.call(i,"catchLoc"),u=a.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return o(i.catchLoc,!0);if(this.prev<i.finallyLoc)return o(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return o(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return o(i.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&a.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var r=o;break}}r&&("break"===t||"continue"===t)&&r.tryLoc<=e&&e<=r.finallyLoc&&(r=null);var i=r?r.completion:{};return i.type=t,i.arg=e,r?(this.method="next",this.next=r.finallyLoc,x):this.complete(i)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),x},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),T(n),x}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var o=n.completion;if("throw"===o.type){var r=o.arg;T(n)}return r}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,o){return this.delegate={iterator:N(t),resultName:n,nextLoc:o},"next"===this.method&&(this.arg=e),x}},n}t.exports=r,t.exports.__esModule=!0,t.exports.default=t.exports},569:function(t,e,n){var o=n(241).default;t.exports=function(t,e){if("object"!=o(t)||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,e||"default");if("object"!=o(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)},t.exports.__esModule=!0,t.exports.default=t.exports},714:function(t,e,n){var o=n(241).default,r=n(569);t.exports=function(t){var e=r(t,"string");return"symbol"==o(e)?e:String(e)},t.exports.__esModule=!0,t.exports.default=t.exports},241:function(t){function e(n){return t.exports=e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t.exports.__esModule=!0,t.exports.default=t.exports,e(n)}t.exports=e,t.exports.__esModule=!0,t.exports.default=t.exports}},e={};function n(o){var r=e[o];if(void 0!==r)return r.exports;var i=e[o]={exports:{}};return t[o](i,i.exports,n),i.exports}n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,{a:e}),e},n.d=function(t,e){for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};return function(){"use strict";n.r(o),n.d(o,{AnimationPlayer:function(){return m}});var t=n(298),e=n.n(t),r=n(365),i=n.n(r),a=n(156),s=n.n(a),c=n(499),u=n.n(c),l=n(173),f=n.n(l),p=n(506),h={};for(var d in p)["default","AnimationPlayer"].indexOf(d)<0&&(h[d]=function(t){return p[t]}.bind(0,d));n.d(o,h);var v=function(){function t(){s()(this,t)}var n;return u()(t,null,[{key:"loadImages",value:(n=i()(e()().mark((function t(n){var o,r=this;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(Array.isArray(n)&&0!==n.length){t.next=2;break}return t.abrupt("return",Promise.resolve());case 2:return o=n.map((function(t,e){if(!t.startsWith("http"))return Promise.resolve();if(r.imageCache.has(t))return console.log("aminofx:  ✅ 图片 ".concat(e+1," 已缓存: ").concat(t)),Promise.resolve();if(r.loadingQueue.has(t))return r.loadingQueue.get(t);var n=new Promise((function(n){var o=new Image;o.onload=function(){r.imageCache.set(t,!0),r.loadingQueue.delete(t),console.log("aminofx:  ✅ 图片 ".concat(e+1," 加载成功: ").concat(t)),"function"==typeof o.decode?o.decode().then((function(){console.log("aminofx:  🎨 图片 ".concat(e+1," 解码完成: ").concat(t)),n()})).catch((function(){console.log("aminofx:  ⚠️ 图片 ".concat(e+1," decode失败，使用fallback: ").concat(t)),n()})):(console.log("aminofx:  📱 图片 ".concat(e+1," 使用兼容模式: ").concat(t)),n())},o.src=t,o.onerror=function(){r.loadingQueue.delete(t),console.error("aminofx:  ❌ 图片 ".concat(e+1," 加载失败: ").concat(t)),n()}}));return r.loadingQueue.set(t,n),n})),t.prev=3,t.next=6,Promise.all(o);case 6:console.log("aminofx:  🎉 所有图片资源加载完成"),t.next=12;break;case 9:t.prev=9,t.t0=t.catch(3),console.error("aminofx:  ❌ 图片加载过程中出现错误:",t.t0);case 12:case"end":return t.stop()}}),t,null,[[3,9]])}))),function(t){return n.apply(this,arguments)})}]),t}();f()(v,"imageCache",new Map),f()(v,"loadingQueue",new Map);var m=function(){function t(e,n){s()(this,t),f()(this,"container",void 0),f()(this,"options",void 0),f()(this,"isReady",!1),f()(this,"readyPromise",null),f()(this,"loopTimerId",null),f()(this,"slotObservers",[]),this.container=e,this.options=n,this.init()}var n,o,r;return u()(t,[{key:"init",value:(r=i()(e()().mark((function t(){return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return Object.assign(this.container.style,{display:"none",width:"100vw",height:"100vh",overflow:"hidden",alignItems:this.options.alignItems||"center",justifyContent:"center",backgroundColor:"rgba(0, 0, 0, 0.85)",backdropFilter:"blur(10px)"}),t.next=3,this.ready();case 3:case"end":return t.stop()}}),t,this)}))),function(){return r.apply(this,arguments)})},{key:"replacePlaceholders",value:function(t){var e=this;return this.options.dynamicData&&t?t.replace(/\{\{(\w+)\}\}|\$\{(\w+)\}/g,(function(t,n,o){var r,i=n||o;return void 0!==(null===(r=e.options.dynamicData)||void 0===r?void 0:r[i])?String(e.options.dynamicData[i]):t})):t}},{key:"handleSlotList",value:function(){var t=this;this.options.extensions&&0!==this.options.extensions.length&&this.options.extensions.some((function(t){return t.slotId}))&&this.options.extensions.some((function(t){return t.elementId}))&&(console.log("aminofx:  🎰 开始处理插槽列表"),this.options.extensions.forEach((function(e,n){var o=e.slotId,r=e.elementId;o&&r?t.moveElementToSlot(o,r,n):console.warn("aminofx:  ⚠️ 插槽配置 ".concat(n+1," 缺少 slotId 或 elementId"))})))}},{key:"moveElementToSlot",value:function(t,e,n){var o=this.container.querySelector("#".concat(t));if(o){var r=document.getElementById(e);r?this.performMove(o,r,n):(console.log("aminofx:  ⏳ 插槽 ".concat(n+1,' 的 elementId "').concat(e,'" 尚未挂载，等待中...')),this.observeElementMount(t,e,o,n))}else console.warn("aminofx:  ⚠️ 插槽 ".concat(n+1,' 的 slotId "').concat(t,'" 在弹窗中未找到'))}},{key:"performMove",value:function(t,e,n){try{t.appendChild(e),console.log("aminofx:  ✅ 插槽 ".concat(n+1," 元素移动成功: ").concat(e.id," -> ").concat(t.id))}catch(t){console.error("aminofx:  ❌ 插槽 ".concat(n+1," 元素移动失败:"),t)}}},{key:"observeElementMount",value:function(t,e,n,o){var r=this,i=new MutationObserver((function(i,a){var s=document.getElementById(e);if(s){console.log("aminofx:  🎯 插槽 ".concat(o+1,' 检测到 elementId "').concat(e,'" 已挂载')),r.container.contains(n)?r.performMove(n,s,o):console.warn("aminofx:  ⚠️ 插槽 ".concat(o+1,' 的 slotId "').concat(t,'" 已不在 DOM 中')),a.disconnect();var c=r.slotObservers.indexOf(a);c>-1&&r.slotObservers.splice(c,1)}}));this.slotObservers.push(i),i.observe(document.body,{childList:!0,subtree:!0})}},{key:"cleanupSlotObservers",value:function(){this.slotObservers.forEach((function(t){t.disconnect()})),this.slotObservers=[],console.log("aminofx:  🧹 清理所有插槽观察器")}},{key:"handleLoop",value:function(){var t,e,n,o=this;this.options.autoLoop&&Number(null===(t=this.options.jsonSchema)||void 0===t?void 0:t.duration)&&(null!==this.loopTimerId&&(clearTimeout(this.loopTimerId),this.loopTimerId=null,console.log("aminofx:  🧹 清理旧的循环定时器")),this.loopTimerId=window.setTimeout((function(){o.container.style.display="none",window.setTimeout((function(){o.loopTimerId=null,o.play()}),100)}),Number(null===(e=this.options.jsonSchema)||void 0===e?void 0:e.duration)),console.log("aminofx:  🔄 启动循环定时器，时长: ".concat(null===(n=this.options.jsonSchema)||void 0===n?void 0:n.duration,"ms")))}},{key:"ready",value:(o=i()(e()().mark((function t(){var n=this;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!this.isReady){t.next=3;break}return console.log("aminofx:  ✅ 动画已准备就绪，直接返回"),t.abrupt("return",Promise.resolve());case 3:if(!this.readyPromise){t.next=6;break}return console.log("aminofx:  ⏳ 正在准备中，等待现有Promise..."),t.abrupt("return",this.readyPromise);case 6:return this.readyPromise=new Promise(function(){var t=i()(e()().mark((function t(o,r){var a,s;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,a=new Promise(function(){var t=i()(e()().mark((function t(o,r){var i,a,s,c,u;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!n.options.jsonSchema){t.next=5;break}n.container.innerHTML=n.replacePlaceholders(n.options.jsonSchema.content),o(),t.next=24;break;case 5:if(null===(i=n.options)||void 0===i||!i.jsonUrl){t.next=23;break}return t.prev=6,t.next=9,fetch(null===(a=n.options)||void 0===a?void 0:a.jsonUrl);case 9:return c=t.sent,t.next=12,c.json();case 12:u=t.sent,n.options.jsonSchema=u,n.container.innerHTML=n.replacePlaceholders((null===(s=n.options.jsonSchema)||void 0===s?void 0:s.content)||""),o(),t.next=21;break;case 18:t.prev=18,t.t0=t.catch(6),r(t.t0);case 21:t.next=24;break;case 23:throw new Error("没有提供jsonSchema或jsonUrl");case 24:case"end":return t.stop()}}),t,null,[[6,18]])})));return function(e,n){return t.apply(this,arguments)}}()),s=v.loadImages(n.options.preloadImgList||[]),t.next=5,Promise.all([a,s]);case 5:n.isReady=!0,n.handleSlotList(),o(),console.log("aminofx:  🎉 动画准备完成，可以开始播放"),t.next=15;break;case 11:t.prev=11,t.t0=t.catch(0),r(t.t0),console.error("aminofx:  ❌ 动画准备失败:",t.t0);case 15:case"end":return t.stop()}}),t,null,[[0,11]])})));return function(e,n){return t.apply(this,arguments)}}()),t.abrupt("return",this.readyPromise);case 8:case"end":return t.stop()}}),t,this)}))),function(){return o.apply(this,arguments)})},{key:"play",value:(n=i()(e()().mark((function t(){return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(this.isReady){t.next=4;break}return console.warn("aminofx:  ⚠️ 动画尚未准备就绪，自动调用ready()..."),t.next=4,this.ready();case 4:this.container.style.display="flex",this.options.autoLoop&&null===this.loopTimerId&&this.handleLoop();case 6:case"end":return t.stop()}}),t,this)}))),function(){return n.apply(this,arguments)})},{key:"destroy",value:function(){null!==this.loopTimerId&&(clearTimeout(this.loopTimerId),this.loopTimerId=null,console.log("aminofx:  🧹 销毁时清理循环定时器")),this.cleanupSlotObservers(),this.container.innerHTML="",this.isReady=!1,this.readyPromise=null,console.log("aminofx:  🗑️ AnimationPlayer 已销毁")}},{key:"updateSchema",value:function(t){this.destroy(),this.options=t,this.init()}}]),t}();function y(t,e){var n=document.getElementById(t);if(!n)throw new Error('Container with id "'.concat(t,'" not found'));var o=document.createElement("div"),r=new m(o,e);return n.appendChild(o),r}o.default=y,window.createCssAnimationPlayer=y}(),o}()}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yqg/aminofx-css-kit",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "YQG AminoFX CSS animation kit - Core animation utilities and effects",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",

package/src/index.ts

@@ -91,6 +91,7 @@ class AnimationPlayer {
   private isReady = false;
   private readyPromise: Promise<void> | null = null;
   private loopTimerId: number | null = null; // 保存定时器ID，用于清理
+  private slotObservers: MutationObserver[] = []; // 保存 MutationObserver 实例，用于清理
 
   constructor(container: HTMLElement, options: IPlayerOptions) {
     this.container = container;
@@ -110,21 +111,6 @@ class AnimationPlayer {
       backdropFilter: 'blur(10px)',
     });
 
-    if (this.options.jsonSchema) {
-      this.container.innerHTML = this.replacePlaceholders(
-        this.options.jsonSchema.content,
-      );
-    } else if (this.options?.jsonUrl) {
-      // 通过url拉取资源
-      const response = await fetch(this.options?.jsonUrl);
-      const data = await response.json();
-      this.options.jsonSchema = data;
-      this.container.innerHTML = this.replacePlaceholders(
-        this.options.jsonSchema?.content || '',
-      );
-    } else {
-      throw new Error('没有提供jsonSchema或jsonUrl');
-    }
     await this.ready();
   }
 
@@ -152,6 +138,152 @@ class AnimationPlayer {
     );
   }
 
+  /**
+   * 处理插槽列表，将 elementId 对应的元素移动到 slotId 对应的插槽中
+   * 需要处理时序问题：slotId 需要弹窗渲染后才存在，elementId 可能尚未挂载
+   */
+  private handleSlotList(): void {
+    if (!this.options.extensions || this.options.extensions.length === 0 || !this.options.extensions.some(item => item.slotId) || !this.options.extensions.some(item => item.elementId)) {
+      return;
+    }
+
+    console.log('aminofx:  🎰 开始处理插槽列表');
+
+    this.options.extensions.forEach((slotItem, index) => {
+      const { slotId, elementId } = slotItem;
+
+      if (!slotId || !elementId) {
+        console.warn(
+          `aminofx:  ⚠️ 插槽配置 ${index + 1} 缺少 slotId 或 elementId`,
+        );
+        return;
+      }
+
+      this.moveElementToSlot(slotId, elementId, index);
+    });
+  }
+
+  /**
+   * 将元素移动到插槽中
+   * @param slotId - 插槽 DOM id
+   * @param elementId - 元素 DOM id
+   * @param index - 插槽索引，用于日志
+   */
+  private moveElementToSlot(
+    slotId: string,
+    elementId: string,
+    index: number,
+  ): void {
+    const slotElement = this.container.querySelector(`#${slotId}`);
+
+    if (!slotElement) {
+      console.warn(
+        `aminofx:  ⚠️ 插槽 ${index + 1} 的 slotId "${slotId}" 在弹窗中未找到`,
+      );
+      return;
+    }
+
+    const targetElement = document.getElementById(elementId);
+
+    if (targetElement) {
+      // elementId 已存在，直接移动
+      this.performMove(slotElement as HTMLElement, targetElement, index);
+    } else {
+      // elementId 尚未挂载，添加 MutationObserver 监听
+      console.log(
+        `aminofx:  ⏳ 插槽 ${index + 1} 的 elementId "${elementId}" 尚未挂载，等待中...`,
+      );
+      this.observeElementMount(
+        slotId,
+        elementId,
+        slotElement as HTMLElement,
+        index,
+      );
+    }
+  }
+
+  /**
+   * 执行元素移动操作
+   * @param slotElement - 插槽元素
+   * @param targetElement - 目标元素
+   * @param index - 插槽索引，用于日志
+   */
+  private performMove(
+    slotElement: HTMLElement,
+    targetElement: HTMLElement,
+    index: number,
+  ): void {
+    try {
+      slotElement.appendChild(targetElement);
+      console.log(
+        `aminofx:  ✅ 插槽 ${index + 1} 元素移动成功: ${targetElement.id} -> ${slotElement.id}`,
+      );
+    } catch (error) {
+      console.error(`aminofx:  ❌ 插槽 ${index + 1} 元素移动失败:`, error);
+    }
+  }
+
+  /**
+   * 使用 MutationObserver 监听 elementId 元素的挂载
+   * @param slotId - 插槽 DOM id
+   * @param elementId - 元素 DOM id
+   * @param slotElement - 插槽元素
+   * @param index - 插槽索引，用于日志
+   */
+  private observeElementMount(
+    slotId: string,
+    elementId: string,
+    slotElement: HTMLElement,
+    index: number,
+  ): void {
+    const observer = new MutationObserver((mutations, obs) => {
+      const targetElement = document.getElementById(elementId);
+
+      if (targetElement) {
+        console.log(
+          `aminofx:  🎯 插槽 ${index + 1} 检测到 elementId "${elementId}" 已挂载`,
+        );
+
+        // 再次检查 slotElement 是否仍然有效（防止弹窗已销毁）
+        if (this.container.contains(slotElement)) {
+          this.performMove(slotElement, targetElement, index);
+        } else {
+          console.warn(
+            `aminofx:  ⚠️ 插槽 ${index + 1} 的 slotId "${slotId}" 已不在 DOM 中`,
+          );
+        }
+
+        // 停止观察
+        obs.disconnect();
+        // 从数组中移除
+        const observerIndex = this.slotObservers.indexOf(obs);
+        if (observerIndex > -1) {
+          this.slotObservers.splice(observerIndex, 1);
+        }
+      }
+    });
+
+    // 保存 observer 实例，用于销毁时清理
+    this.slotObservers.push(observer);
+
+    // 观察整个 document.body 的子树变化
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  /**
+   * 清理所有 MutationObserver
+   */
+  private cleanupSlotObservers(): void {
+    this.slotObservers.forEach((observer) => {
+      observer.disconnect();
+    });
+    this.slotObservers = [];
+    console.log('aminofx:  🧹 清理所有插槽观察器');
+  }
+
   private handleLoop() {
     if (!this.options.autoLoop || !Number(this.options.jsonSchema?.duration)) {
       return;
@@ -189,15 +321,49 @@ class AnimationPlayer {
       return this.readyPromise;
     }
 
-    this.readyPromise = new Promise<void>(async (resolve) => {
+    this.readyPromise = new Promise<void>(async (resolve, reject) => {
       try {
-        await ResourceLoader.loadImages(this.options.preloadImgList || []);
+        const jsonPromise = new Promise<void>(async (resolve, reject) => {
+          // 优先使用jsonSchema
+          if (this.options.jsonSchema) {
+            this.container.innerHTML = this.replacePlaceholders(
+              this.options.jsonSchema.content,
+            );
+            resolve();
+          } else if (this.options?.jsonUrl) {
+            try {
+              // 通过url拉取资源
+              const response = await fetch(this.options?.jsonUrl);
+              const data = await response.json();
+              this.options.jsonSchema = data;
+              this.container.innerHTML = this.replacePlaceholders(
+                this.options.jsonSchema?.content || '',
+              );
+              resolve();
+            } catch (error) {
+              reject(error);
+            }
+          } else {
+            throw new Error('没有提供jsonSchema或jsonUrl');
+          }
+        });
+
+        const imgPromise = ResourceLoader.loadImages(
+          this.options.preloadImgList || [],
+        );
+
+        await Promise.all([jsonPromise, imgPromise]);
         this.isReady = true; // 设置准备完成状态
+
+        // 处理插槽列表（此时弹窗内容已渲染，slotId 存在）
+        this.handleSlotList();
+
+        resolve();
         console.log('aminofx:  🎉 动画准备完成，可以开始播放');
       } catch (error) {
+        reject(error);
         console.error('aminofx:  ❌ 动画准备失败:', error);
       }
-      resolve();
     });
 
     return this.readyPromise;
@@ -225,6 +391,9 @@ class AnimationPlayer {
       console.log('aminofx:  🧹 销毁时清理循环定时器');
     }
 
+    // 清理插槽观察器
+    this.cleanupSlotObservers();
+
     // 重置状态
     this.container.innerHTML = '';
     this.isReady = false;

package/src/type.ts

@@ -17,6 +17,20 @@ interface IPlayerOptions {
   autoLoop?: boolean;
   // 动态变量
   dynamicData?: Record<string, string | number | boolean>;
+  // 扩展列表
+  extensions?: {
+    // 插槽 dom id
+    slotId?: string;
+    // 元素 dom id
+    elementId?: string;
+    // 点击区域
+    clickAreas?: {
+      x?: number;
+      y?: number;
+      width?: number;
+      height?: number;
+    };
+  }[];
 }
 
 export type { IPlayerOptions, IJsonSchema };