@yqg/aminofx-css-kit 1.0.3 → 1.0.5

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();
@@ -124,8 +126,8 @@ var AnimationPlayer = /*#__PURE__*/function () {
                 height: '100vh',
                 overflow: 'hidden',
                 alignItems: this.options.alignItems || 'center',
+                background: this.options.background || '',
                 justifyContent: 'center',
-                backgroundColor: 'rgba(0, 0, 0, 0.85)',
                 backdropFilter: 'blur(10px)'
               });
               _context2.next = 3;
@@ -163,11 +165,136 @@ 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$jsonSch,
-        _this3 = this,
+        _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)) {
@@ -183,10 +310,10 @@ 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$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"));
@@ -195,7 +322,7 @@ var AnimationPlayer = /*#__PURE__*/function () {
     key: "ready",
     value: function () {
       var _ready = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-        var _this4 = this;
+        var _this6 = this;
         return _regeneratorRuntime().wrap(function _callee5$(_context5) {
           while (1) switch (_context5.prev = _context5.next) {
             case 0:
@@ -222,35 +349,35 @@ var AnimationPlayer = /*#__PURE__*/function () {
                         _context4.prev = 0;
                         jsonPromise = new Promise( /*#__PURE__*/function () {
                           var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(resolve, reject) {
-                            var _this4$options;
-                            var _this4$options2, _this4$options$jsonSc, response, data;
+                            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 (!_this4.options.jsonSchema) {
+                                  if (!_this6.options.jsonSchema) {
                                     _context3.next = 5;
                                     break;
                                   }
-                                  _this4.container.innerHTML = _this4.replacePlaceholders(_this4.options.jsonSchema.content);
+                                  _this6.container.innerHTML = _this6.replacePlaceholders(_this6.options.jsonSchema.content);
                                   resolve();
                                   _context3.next = 24;
                                   break;
                                 case 5:
-                                  if (!((_this4$options = _this4.options) !== null && _this4$options !== void 0 && _this4$options.jsonUrl)) {
+                                  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((_this4$options2 = _this4.options) === null || _this4$options2 === void 0 ? void 0 : _this4$options2.jsonUrl);
+                                  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;
-                                  _this4.options.jsonSchema = data;
-                                  _this4.container.innerHTML = _this4.replacePlaceholders(((_this4$options$jsonSc = _this4.options.jsonSchema) === null || _this4$options$jsonSc === void 0 ? void 0 : _this4$options$jsonSc.content) || '');
+                                  _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;
@@ -273,25 +400,28 @@ var AnimationPlayer = /*#__PURE__*/function () {
                             return _ref2.apply(this, arguments);
                           };
                         }());
-                        imgPromise = ResourceLoader.loadImages(_this4.options.preloadImgList || []);
+                        imgPromise = ResourceLoader.loadImages(_this6.options.preloadImgList || []);
                         _context4.next = 5;
                         return Promise.all([jsonPromise, imgPromise]);
                       case 5:
-                        _this4.isReady = true; // 设置准备完成状态
+                        _this6.isReady = true; // 设置准备完成状态
+
+                        // 处理插槽列表（此时弹窗内容已渲染，slotId 存在）
+                        _this6.handleSlotList();
                         resolve();
                         console.log('aminofx:  🎉 动画准备完成，可以开始播放');
-                        _context4.next = 14;
+                        _context4.next = 15;
                         break;
-                      case 10:
-                        _context4.prev = 10;
+                      case 11:
+                        _context4.prev = 11;
                         _context4.t0 = _context4["catch"](0);
                         reject(_context4.t0);
                         console.error('aminofx:  ❌ 动画准备失败:', _context4.t0);
-                      case 14:
+                      case 15:
                       case "end":
                         return _context4.stop();
                     }
-                  }, _callee4, null, [[0, 10]]);
+                  }, _callee4, null, [[0, 11]]);
                 }));
                 return function (_x2, _x3) {
                   return _ref.apply(this, arguments);
@@ -351,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,16 @@ 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;
+        };
+    }[];
+    background?: string;
 }
 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 c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).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 c(t){e(a,o,i,c,u,"next",t)}function u(t){e(a,o,i,c,u,"throw",t)}c(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,c=Object.defineProperty||function(t,e,r){t[e]=r.value},u="function"==typeof Symbol?Symbol:{},s=u.iterator||"@@iterator",l=u.asyncIterator||"@@asyncIterator",f=u.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 c(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 P={};p(P,s,(function(){return this}));var j=Object.getPrototypeOf,k=j&&j(j(N([])));k&&k!==i&&a.call(k,s)&&(P=k);var _=b.prototype=g.prototype=Object.create(P);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,c,u){var s=d(t[o],t,i);if("throw"!==s.type){var l=s.arg,f=l.value;return f&&"object"==n(f)&&a.call(f,"__await")?e.resolve(f.__await).then((function(t){r("next",t,c,u)}),(function(t){r("throw",t,c,u)})):e.resolve(f).then((function(t){l.value=t,c(l)}),(function(t){return r("throw",t,c,u)}))}u(s.arg)}var o;c(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 c=n.delegate;if(c){var u=T(c,n);if(u){if(u===x)continue;return u}}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 s=d(t,r,n);if("normal"===s.type){if(o=n.done?m:"suspendedYield",s.arg===x)continue;return{value:s.arg,done:n.done}}"throw"===s.type&&(o=m,n.method="throw",n.arg=s.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[s];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,c(_,"constructor",{value:b,configurable:!0}),c(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(_),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(_),p(_,f,"Generator"),p(_,s,(function(){return this})),p(_,"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 c.type="throw",c.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],c=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var u=a.call(i,"catchLoc"),s=a.call(i,"finallyLoc");if(u&&s){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(u){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!s)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),c=r.n(a),u=r(499),s=r.n(u),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(){c()(this,t)}var r;return s()(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){c()(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 s()(t,[{key:"init",value:(o=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 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,o){var a,c;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(n,o){var i,a,c,u,s;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!r.options.jsonSchema){t.next=5;break}r.container.innerHTML=r.replacePlaceholders(r.options.jsonSchema.content),n(),t.next=24;break;case 5:if(null===(i=r.options)||void 0===i||!i.jsonUrl){t.next=23;break}return t.prev=6,t.next=9,fetch(null===(a=r.options)||void 0===a?void 0:a.jsonUrl);case 9:return u=t.sent,t.next=12,u.json();case 12:s=t.sent,r.options.jsonSchema=s,r.container.innerHTML=r.replacePlaceholders((null===(c=r.options.jsonSchema)||void 0===c?void 0:c.content)||""),n(),t.next=21;break;case 18:t.prev=18,t.t0=t.catch(6),o(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,r){return t.apply(this,arguments)}}()),c=y.loadImages(r.options.preloadImgList||[]),t.next=5,Promise.all([a,c]);case 5:r.isReady=!0,n(),console.log("aminofx:  🎉 动画准备完成，可以开始播放"),t.next=14;break;case 10:t.prev=10,t.t0=t.catch(0),o(t.t0),console.error("aminofx:  ❌ 动画准备失败:",t.t0);case 14:case"end":return t.stop()}}),t,null,[[0,10]])})));return function(e,r){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",background:this.options.background||"",justifyContent:"center",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.3",
+  "version": "1.0.5",
   "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;
@@ -105,8 +106,8 @@ class AnimationPlayer {
       height: '100vh',
       overflow: 'hidden',
       alignItems: this.options.alignItems || 'center',
+      background: this.options.background || '',
       justifyContent: 'center',
-      backgroundColor: 'rgba(0, 0, 0, 0.85)',
       backdropFilter: 'blur(10px)',
     });
 
@@ -137,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;
@@ -207,6 +354,10 @@ class AnimationPlayer {
 
         await Promise.all([jsonPromise, imgPromise]);
         this.isReady = true; // 设置准备完成状态
+
+        // 处理插槽列表（此时弹窗内容已渲染，slotId 存在）
+        this.handleSlotList();
+
         resolve();
         console.log('aminofx:  🎉 动画准备完成，可以开始播放');
       } catch (error) {
@@ -240,6 +391,9 @@ class AnimationPlayer {
       console.log('aminofx:  🧹 销毁时清理循环定时器');
     }
 
+    // 清理插槽观察器
+    this.cleanupSlotObservers();
+
     // 重置状态
     this.container.innerHTML = '';
     this.isReady = false;

package/src/type.ts

@@ -17,6 +17,22 @@ 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;
+    };
+  }[];
+  // 背景颜色
+  background?: string;
 }
 
 export type { IPlayerOptions, IJsonSchema };