☰

Greasy Fork镜像 支持简体中文。

pops

纯JavaScript编写的弹窗，内置方法confirm、alert、prompt、loading、iframe、isPhone、tooltip、folder、panel、rightClickMenu。

目前為 2024-03-26 提交的版本，檢視 最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.gf.qytechs.cn/scripts/456485/1349549/pops.js 

  1. /// <reference path="../库.ts/pops.d.ts" />
  2. /// <reference path="../库.ts/DOMUtils.d.ts" />
  3.  
  4. (function (global, factory) {
  5.   /**
  6.    * 不使用define
  7.    * typeof define === "function" && define.amd
  8.    * define(factory)
  9.    */
  10.   if (typeof exports === "object" && typeof module !== "undefined") {
  11.     /* 适用于NodeJs或typeScript */
  12.     module.exports = factory();
  13.   } else {
  14.     global = typeof globalThis !== "undefined" ? globalThis : global || self;
  15.     /* 适用于浏览器中，且this对象是window，如果this是其它，那么会在其它对象下注册(不可用)对象 */
  16.     global.pops = factory(global.pops);
  17.   }
  18. })(typeof window !== "undefined" ? window : this, function (AnotherPops) {
  19.   "use strict";
  20.  
  21.   const OriginPrototype = {
  22.     Object: {
  23.       defineProperty: Object.defineProperty,
  24.     },
  25.   };
  26.  
  27.   /** 工具类 */
  28.   const PopsUtils = {
  29.     /** .on绑定的事件 @type {unique symbol} */
  30.     SymbolEvents: Symbol(
  31.       "events_" +
  32.         (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  33.     ),
  34.     assignJSON(target, source) {
  35.       /* JSON数据存在即替换 */
  36.       if (source == null) {
  37.         return target;
  38.       }
  39.       for (var target_key in target) {
  40.         if (typeof source[target_key] !== "undefined") {
  41.           if (
  42.             typeof source[target_key] === "object" &&
  43.             !(source[target_key] instanceof Node)
  44.           ) {
  45.             target[target_key] = this.assignJSON(
  46.               target[target_key],
  47.               source[target_key]
  48.             );
  49.           } else {
  50.             target[target_key] = source[target_key];
  51.           }
  52.         }
  53.       }
  54.       return target;
  55.     },
  56.     /**
  57.      * 字符串转HTMLElement
  58.      * @param {string} elementString
  59.      * @returns {HTMLElement}
  60.      */
  61.     parseTextToDOM(elementString) {
  62.       /* 去除前后的换行和空格 */
  63.       elementString = elementString
  64.         .replace(/^[\n|\s]*/g, "")
  65.         .replace(/[\n|\s]*$/g, "");
  66.       let targetElement = PopsDOMUtils.createElement("div", {
  67.         innerHTML: elementString,
  68.       });
  69.       return targetElement.firstChild;
  70.     },
  71.     /**
  72.      * 生成随机GUID
  73.      * @returns {string}
  74.      */
  75.     getRandomGUID() {
  76.       function randomId() {
  77.         return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  78.       }
  79.       return `${randomId()}${randomId()}-${randomId()}-${randomId()}-${randomId()}-${randomId()}${randomId()}${randomId()}`;
  80.     },
  81.     /**
  82.      * 判断元素/页面中是否包含该元素
  83.      * @param {HTMLElement} target （可选）
  84.      * @param {HTMLElement[]|HTMLElement} sourceList
  85.      */
  86.     contains(target, sourceList) {
  87.       if (arguments.length === 1) {
  88.         return this.contains(
  89.           document.body || document.documentElement,
  90.           arguments[0]
  91.         );
  92.       }
  93.       if (typeof sourceList[Symbol.iterator] === "function") {
  94.         let flag = true;
  95.         for (const sourceNode of sourceList) {
  96.           if (!target.contains(sourceNode)) {
  97.             flag = false;
  98.             break;
  99.           }
  100.         }
  101.         return flag;
  102.       } else {
  103.         return this.contains(target, [sourceList]);
  104.       }
  105.     },
  106.     /**
  107.      * 元素后追加元素
  108.      * @param {HTMLElement} target （可选）
  109.      * @param {HTMLElement[]|HTMLElement} sourceList
  110.      */
  111.     appendChild(target, sourceList) {
  112.       if (arguments.length === 1) {
  113.         this.appendChild(
  114.           document.body || document.documentElement,
  115.           arguments[0]
  116.         );
  117.         return;
  118.       }
  119.       if (typeof sourceList[Symbol.iterator] === "function") {
  120.         sourceList.forEach((item) => {
  121.           this.appendChild(target, item);
  122.         });
  123.         return;
  124.       }
  125.  
  126.       target.appendChild(sourceList);
  127.     },
  128.     /**
  129.      * 删除配置中对应的对象
  130.      * @param {any[]} targets
  131.      * @param {string} guid
  132.      * @param {boolean} removeAll 是否全部删除
  133.      * @returns
  134.      */
  135.     configRemove(targets, guid, removeAll = false) {
  136.       /**
  137.        *
  138.        * @param {PopsLayerCommonConfig} item
  139.        */
  140.       function removeItem(item) {
  141.         item?.animElement?.remove();
  142.         item?.popsElement?.remove();
  143.         item?.maskElement?.remove();
  144.         item?.$shadowContainer?.remove();
  145.       }
  146.       targets.forEach((target) => {
  147.         target.forEach(
  148.           /**
  149.            * @param {PopsLayerCommonConfig} item
  150.            * @param {number} index
  151.            */
  152.           (item, index) => {
  153.             if (removeAll || item["guid"] === guid) {
  154.               if (
  155.                 pops.config.animation.hasOwnProperty(
  156.                   item.animElement.getAttribute("anim")
  157.                 )
  158.               ) {
  159.                 item.animElement.style.width = "100%";
  160.                 item.animElement.style.height = "100%";
  161.                 item.animElement.style["animation-name"] =
  162.                   item.animElement.getAttribute("anim") + "-reverse";
  163.                 if (
  164.                   pops.config.animation.hasOwnProperty(
  165.                     item.animElement.style["animation-name"]
  166.                   )
  167.                 ) {
  168.                   PopsDOMUtils.on(
  169.                     item.animElement,
  170.                     PopsDOMUtils.getAnimationEndNameList(),
  171.                     void 0,
  172.                     function () {
  173.                       removeItem(item);
  174.                     },
  175.                     {
  176.                       capture: true,
  177.                     }
  178.                   );
  179.                 } else {
  180.                   removeItem(item);
  181.                 }
  182.               } else {
  183.                 removeItem(item);
  184.               }
  185.               target.splice(index, 1);
  186.             }
  187.           }
  188.         );
  189.       });
  190.  
  191.       return targets;
  192.     },
  193.     /**
  194.      * 隐藏
  195.      * @param {"alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"} popsType
  196.      * @param {any[]} source
  197.      * @param {string} guid
  198.      * @param {PopsAlertDetails|PopsDrawerDetails|PopsPromptDetails|PopsConfirmDetails|PopsIframeDetails|PopsLoadingDetails|PopsPanelDetails|PopsFolderDetails} config
  199.      * @param {HTMLElement} animElement
  200.      * @param {HTMLElement} maskElement
  201.      */
  202.     hide(popsType, source, guid, config, animElement, maskElement) {
  203.       let popsElement = animElement.querySelector(".pops[type-value]");
  204.       if (popsType === "drawer") {
  205.         setTimeout(() => {
  206.           maskElement.style.setProperty("display", "none");
  207.           if (["top", "bottom"].includes(config.direction)) {
  208.             popsElement.style.setProperty("height", 0);
  209.           } else if (["left", "right"].includes(config.direction)) {
  210.             popsElement.style.setProperty("width", 0);
  211.           } else {
  212.             console.error("未知direction：", config.direction);
  213.           }
  214.         }, config.closeDelay);
  215.       } else {
  216.         source.forEach((item) => {
  217.           if (item.guid === guid) {
  218.             /* 存在动画 */
  219.             item.animElement.style.width = "100%";
  220.             item.animElement.style.height = "100%";
  221.             item.animElement.style["animation-name"] =
  222.               item.animElement.getAttribute("anim") + "-reverse";
  223.             if (
  224.               pops.config.animation.hasOwnProperty(
  225.                 item.animElement.style["animation-name"]
  226.               )
  227.             ) {
  228.               function animationendCallBack() {
  229.                 item.animElement.style.display = "none";
  230.                 if (item.maskElement) {
  231.                   item.maskElement.style.display = "none";
  232.                 }
  233.                 PopsDOMUtils.off(
  234.                   item.animElement,
  235.                   PopsDOMUtils.getAnimationEndNameList(),
  236.                   void 0,
  237.                   animationendCallBack,
  238.                   {
  239.                     capture: true,
  240.                   }
  241.                 );
  242.               }
  243.               PopsDOMUtils.on(
  244.                 item.animElement,
  245.                 PopsDOMUtils.getAnimationEndNameList(),
  246.                 void 0,
  247.                 animationendCallBack,
  248.                 {
  249.                   capture: true,
  250.                 }
  251.               );
  252.             } else {
  253.               item.animElement.style.display = "none";
  254.               if (item.maskElement) {
  255.                 item.maskElement.style.display = "none";
  256.               }
  257.             }
  258.  
  259.             return;
  260.           }
  261.         });
  262.       }
  263.     },
  264.     /**
  265.      * 显示
  266.      * @param {"alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"} popsType
  267.      * @param {any[]} source
  268.      * @param {string} guid
  269.      * @param {PopsAlertDetails|PopsDrawerDetails|PopsPromptDetails|PopsConfirmDetails|PopsIframeDetails|PopsLoadingDetails|PopsPanelDetails|PopsFolderDetails} config
  270.      * @param {HTMLElement} animElement
  271.      * @param {HTMLElement} maskElement
  272.      */
  273.     show(popsType, source, guid, config, animElement, maskElement) {
  274.       let popsElement = animElement.querySelector(".pops[type-value]");
  275.       if (popsType === "drawer") {
  276.         setTimeout(() => {
  277.           maskElement.style.setProperty("display", "");
  278.           if (["top", "bottom"].includes(config.direction)) {
  279.             popsElement.style.setProperty("height", config.size);
  280.           } else if (["left", "right"].includes(config.direction)) {
  281.             popsElement.style.setProperty("width", config.size);
  282.           } else {
  283.             console.error("未知direction：", config.direction);
  284.           }
  285.         }, config.openDelay);
  286.       } else {
  287.         source.forEach((item) => {
  288.           if (item.guid === guid) {
  289.             item.animElement.style.width = "";
  290.             item.animElement.style.height = "";
  291.             item.animElement.style["animation-name"] = item.animElement
  292.               .getAttribute("anim")
  293.               .replace("-reverse", "");
  294.             if (
  295.               pops.config.animation.hasOwnProperty(
  296.                 item.animElement.style["animation-name"]
  297.               )
  298.             ) {
  299.               item.animElement.style.display = "";
  300.               if (item.maskElement) {
  301.                 item.maskElement.style.display = "";
  302.               }
  303.               function animationendCallBack() {
  304.                 PopsDOMUtils.off(
  305.                   item.animElement,
  306.                   PopsDOMUtils.getAnimationEndNameList(),
  307.                   void 0,
  308.                   animationendCallBack,
  309.                   {
  310.                     capture: true,
  311.                   }
  312.                 );
  313.               }
  314.               PopsDOMUtils.on(
  315.                 item.animElement,
  316.                 PopsDOMUtils.getAnimationEndNameList(),
  317.                 void 0,
  318.                 animationendCallBack,
  319.                 {
  320.                   capture: true,
  321.                 }
  322.               );
  323.             } else {
  324.               item.animElement.style.display = "";
  325.               if (item.maskElement) {
  326.                 item.maskElement.style.display = "";
  327.               }
  328.             }
  329.           }
  330.           return;
  331.         });
  332.       }
  333.     },
  334.     /**
  335.      * 关闭
  336.      * @param {string} popsType
  337.      * @param {any} source
  338.      * @param {string} guid
  339.      * @param {PopsAlertDetails|PopsDrawerDetails|PopsPromptDetails|PopsConfirmDetails|PopsIframeDetails|PopsLoadingDetails|PopsPanelDetails|PopsFolderDetails} config
  340.      * @param {HTMLElement} animElement
  341.      */
  342.     close(popsType, source, guid, config, animElement) {
  343.       let popsElement = animElement.querySelector(".pops[type-value]");
  344.       /**
  345.        * 动画结束事件
  346.        */
  347.       function transitionendEvent() {
  348.         /**
  349.          *
  350.          * @param {TransitionEvent} event
  351.          */
  352.         function closeCallBack(event) {
  353.           if (event.propertyName !== "transform") {
  354.             return;
  355.           }
  356.           PopsDOMUtils.off(
  357.             popsElement,
  358.             PopsDOMUtils.getTransitionEndNameList(),
  359.             void 0,
  360.             closeCallBack
  361.           );
  362.           PopsUtils.configRemove([source], guid);
  363.         }
  364.         /* 监听过渡结束 */
  365.         PopsDOMUtils.on(
  366.           popsElement,
  367.           PopsDOMUtils.getTransitionEndNameList(),
  368.           void 0,
  369.           closeCallBack
  370.         );
  371.         let popsTransForm = getComputedStyle(popsElement).transform;
  372.         if (popsTransForm !== "none") {
  373.           PopsDOMUtils.trigger(
  374.             popsElement,
  375.             PopsDOMUtils.getTransitionEndNameList(),
  376.             void 0,
  377.             true
  378.           );
  379.           return;
  380.         }
  381.         if (["top"].includes(config.direction)) {
  382.           popsElement.style.setProperty("transform", "translateY(-100%)");
  383.         } else if (["bottom"].includes(config.direction)) {
  384.           popsElement.style.setProperty("transform", "translateY(100%)");
  385.         } else if (["left"].includes(config.direction)) {
  386.           popsElement.style.setProperty("transform", "translateX(-100%)");
  387.         } else if (["right"].includes(config.direction)) {
  388.           popsElement.style.setProperty("transform", "translateX(100%)");
  389.         } else {
  390.           console.error("未知direction：", config.direction);
  391.         }
  392.       }
  393.  
  394.       if (popsType === "drawer") {
  395.         setTimeout(() => {
  396.           transitionendEvent();
  397.         }, config.closeDelay);
  398.       } else {
  399.         PopsUtils.configRemove([source], guid);
  400.       }
  401.     },
  402.     /**
  403.      * 获取所有弹窗中的最大的z-index
  404.      * @param {number} defaultValue
  405.      */
  406.     getPopsMaxZIndex(defaultValue) {
  407.       let maxZIndex = 0;
  408.       let maxZIndexElement = null;
  409.  
  410.       Object.keys(pops.config.layer).forEach((item) => {
  411.         pops.config.layer[item].forEach(
  412.           /**
  413.            * @param {PopsLayerCommonConfig} item2
  414.            */
  415.           (item2) => {
  416.             let itemZIndex = parseInt(
  417.               getComputedStyle(item2["animElement"]).zIndex
  418.             );
  419.             maxZIndexElement =
  420.               itemZIndex > maxZIndex ? item2["animElement"] : maxZIndexElement;
  421.             maxZIndex = itemZIndex > maxZIndex ? itemZIndex : maxZIndex;
  422.           }
  423.         );
  424.       });
  425.       maxZIndex = maxZIndex === 0 ? defaultValue : maxZIndex;
  426.       return { zIndex: maxZIndex, animElement: maxZIndexElement };
  427.     },
  428.     /**
  429.      * 获取CSS Rule
  430.      * @param {StyleSheet} sheet
  431.      * @returns
  432.      */
  433.     getKeyFrames(sheet) {
  434.       let result = {};
  435.       Object.keys(sheet.cssRules).forEach((key) => {
  436.         if (
  437.           sheet.cssRules[key].type === 7 &&
  438.           sheet.cssRules[key].name.startsWith("pops-anim-")
  439.         ) {
  440.           result[sheet.cssRules[key].name] = sheet.cssRules[key];
  441.         }
  442.       });
  443.       return result;
  444.     },
  445.     /**
  446.      * 拖拽元素
  447.      * 说明：
  448.      * + 元素的position为absolute或者fixed
  449.      * + 会为元素的
  450.      * @param {HTMLElement} moveElement
  451.      * @param {{
  452.      * dragElement: HTMLElement,
  453.      * limit: boolean,
  454.      * extraDistance: number,
  455.      * container: Element|Window,
  456.      * moveCallBack?: (moveElement: HTMLElement,left: number,top: number) => void,
  457.      * endCallBack?: (moveElement: HTMLElement,left: number,top: number) => void,
  458.      * preventEvent?: (event: TouchEvent|PointerEvent) => boolean;
  459.      * }} options
  460.      */
  461.     drag(moveElement, options = {}) {
  462.       options = Object.assign(
  463.         {
  464.           limit: true,
  465.           extraDistance: 3,
  466.           container: globalThis,
  467.         },
  468.         options
  469.       );
  470.       let isMove = false;
  471.       /* 点击元素，left偏移 */
  472.       let clickElementLeftOffset = 0;
  473.       /* 点击元素，top偏移 */
  474.       let clickElementTopOffset = 0;
  475.       let AnyTouch = PopsUtils.AnyTouch();
  476.       let anyTouchElement = new AnyTouch(options.dragElement, {
  477.         preventEvent(event) {
  478.           if (typeof options.preventEvent === "function") {
  479.             return options.preventEvent(event);
  480.           } else {
  481.             return false;
  482.           }
  483.         },
  484.       });
  485.       PopsDOMUtils.css(options.dragElement, {
  486.         cursor: "move",
  487.       });
  488.       /**
  489.        * 获取移动元素的transform偏移
  490.        */
  491.       function getTransform(element) {
  492.         let transform_left = 0;
  493.         let transform_top = 0;
  494.         let elementTransform = globalThis.getComputedStyle(element).transform;
  495.         if (
  496.           elementTransform !== "none" &&
  497.           elementTransform != null &&
  498.           elementTransform !== ""
  499.         ) {
  500.           let elementTransformSplit = elementTransform
  501.             .match(/\((.+)\)/)[1]
  502.             .split(",");
  503.           transform_left = Math.abs(parseInt(elementTransformSplit[4]));
  504.           transform_top = Math.abs(parseInt(elementTransformSplit[5]));
  505.         }
  506.         return {
  507.           transformLeft: transform_left,
  508.           transformTop: transform_top,
  509.         };
  510.       }
  511.       /**
  512.        * 修改移动的元素的style
  513.        */
  514.       function changeMoveElementStyle(element) {
  515.         let old_transitionDuration = element.style.transitionDuration;
  516.         if (globalThis.getComputedStyle(element).transitionDuration !== "0s") {
  517.           element.style.transitionDuration = "0s";
  518.         }
  519.         return () => {
  520.           element.style.transitionDuration = old_transitionDuration;
  521.         };
  522.       }
  523.       /**
  524.        * 获取容器的高度、宽度，一般是window为容器
  525.        */
  526.       function getContainerWidthOrHeight(container) {
  527.         container = container ?? globalThis;
  528.         return {
  529.           width: PopsDOMUtils.width(container),
  530.           height: PopsDOMUtils.height(container),
  531.         };
  532.       }
  533.       /**
  534.        * 获取容器的最小left、top偏移
  535.        */
  536.       function getContainerTopOrLeft(container) {
  537.         container = container ?? globalThis;
  538.         if (PopsUtils.isWin(container)) {
  539.           return {
  540.             left: 0,
  541.             top: 0,
  542.           };
  543.         } else {
  544.           let rect = container.getBoundingClientRect();
  545.           return {
  546.             left: rect.left,
  547.             top: rect.top,
  548.           };
  549.         }
  550.       }
  551.       let transformInfo = getTransform(moveElement);
  552.       let transformLeft = transformInfo.transformLeft;
  553.       let transformTop = transformInfo.transformTop;
  554.       let resumeMoveElementStyle = null;
  555.       anyTouchElement.on("pan", function (event) {
  556.         if (!isMove) {
  557.           isMove = true;
  558.           let rect = options.dragElement.getBoundingClientRect();
  559.           clickElementLeftOffset = event.x - rect.left;
  560.           clickElementTopOffset = event.y - rect.top;
  561.           transformInfo = getTransform(moveElement);
  562.           transformLeft = transformInfo.transformLeft;
  563.           transformTop = transformInfo.transformTop;
  564.           //if (event.nativeEvent.offsetX) {
  565.           //  clickElementLeftOffset = parseInt(event.nativeEvent.offsetX);
  566.           //} else {
  567.           //  clickElementLeftOffset = parseInt(event.getOffset().x);
  568.           //}
  569.           //if (event.nativeEvent.offsetY) {
  570.           //  clickElementTopOffset = parseInt(event.nativeEvent.offsetY);
  571.           //} else {
  572.           //  clickElementTopOffset = parseInt(event.getOffset().y);
  573.           //}
  574.           resumeMoveElementStyle = changeMoveElementStyle(moveElement);
  575.         }
  576.  
  577.         /** 当前移动的left偏移 */
  578.         let currentMoveLeftOffset =
  579.           event.x - clickElementLeftOffset + transformLeft;
  580.         /** 当前移动的top偏移 */
  581.         let currentMoveTopOffset =
  582.           event.y - clickElementTopOffset + transformTop;
  583.         /* 拖拽移动 */
  584.         if (event.phase === "move") {
  585.           if (options.limit) {
  586.             /* 限制在容器内移动 */
  587.             /* left偏移最大值 */
  588.             let maxLeftOffset =
  589.               getContainerWidthOrHeight(options.container).width -
  590.               PopsDOMUtils.width(moveElement) +
  591.               transformLeft;
  592.             let { left: minLeftOffset, top: minTopOffset } =
  593.               getContainerTopOrLeft(options.container);
  594.             /* top偏移的最大值 */
  595.             let maxTopOffset =
  596.               getContainerWidthOrHeight(options.container).height -
  597.               PopsDOMUtils.height(moveElement) +
  598.               transformTop;
  599.             if (currentMoveLeftOffset > maxLeftOffset) {
  600.               /* 不允许超过容器的最大宽度 */
  601.               currentMoveLeftOffset = maxLeftOffset;
  602.             }
  603.             if (currentMoveTopOffset > maxTopOffset) {
  604.               /* 不允许超过容器的最大高度 */
  605.               currentMoveTopOffset = maxTopOffset;
  606.             }
  607.             if (
  608.               currentMoveLeftOffset - options.extraDistance * 2 <
  609.               minLeftOffset + transformLeft
  610.             ) {
  611.               /* 不允许left偏移小于容器最小值 */
  612.               currentMoveLeftOffset = minLeftOffset + transformLeft;
  613.               /* 最左边 +额外距离 */
  614.               currentMoveLeftOffset += options.extraDistance;
  615.             } else {
  616.               /* 最右边 -额外距离 */
  617.               currentMoveLeftOffset -= options.extraDistance;
  618.             }
  619.             if (
  620.               currentMoveTopOffset - options.extraDistance * 2 <
  621.               minTopOffset + transformTop
  622.             ) {
  623.               /* 不允许top偏移小于容器最小值 */
  624.               currentMoveTopOffset = minTopOffset + transformTop;
  625.               /* 最上面 +额外距离 */
  626.               currentMoveTopOffset += options.extraDistance;
  627.             } else {
  628.               /* 最下面 -额外距离 */
  629.               currentMoveTopOffset -= options.extraDistance;
  630.             }
  631.           }
  632.           if (typeof options.moveCallBack === "function") {
  633.             options.moveCallBack(
  634.               moveElement,
  635.               currentMoveLeftOffset,
  636.               currentMoveTopOffset
  637.             );
  638.           }
  639.           PopsDOMUtils.css(moveElement, {
  640.             left: currentMoveLeftOffset + "px",
  641.             top: currentMoveTopOffset + "px",
  642.           });
  643.         }
  644.  
  645.         /* 停止拖拽 */
  646.         if (event.phase === "end") {
  647.           isMove = false;
  648.           if (typeof resumeMoveElementStyle === "function") {
  649.             resumeMoveElementStyle();
  650.             resumeMoveElementStyle = null;
  651.           }
  652.           if (typeof options.endCallBack === "function") {
  653.             options.endCallBack(
  654.               moveElement,
  655.               currentMoveLeftOffset,
  656.               currentMoveTopOffset
  657.             );
  658.           }
  659.         }
  660.       });
  661.       /* 因为会覆盖上面的点击事件，主动触发一下 */
  662.       anyTouchElement.on(["click", "tap"], function (event) {
  663.         event.changedPoints.forEach((item) => {
  664.           PopsDOMUtils.trigger(item.target, "click", void 0, transformLeft);
  665.         });
  666.       });
  667.     },
  668.     /**
  669.      * AnyTouch
  670.      * + https://fastly.jsdelivr.net/npm/any-touch@2.2.0/dist/any-touch.umd.min.js
  671.      * + https://github.com/any86/any-touch/blob/master/README.CN.md
  672.      */
  673.     AnyTouch() {
  674.       let anyTouch = null;
  675.       (function (global, factory) {
  676.         anyTouch = factory();
  677.       })(this, function () {
  678.         "use strict";
  679.  
  680.         /*! *****************************************************************************
  681.         Copyright (c) Microsoft Corporation.
  682.     
  683.         Permission to use, copy, modify, and/or distribute this software for any
  684.         purpose with or without fee is hereby granted.
  685.     
  686.         THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
  687.         REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
  688.         AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
  689.         INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
  690.         LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
  691.         OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
  692.         PERFORMANCE OF THIS SOFTWARE.
  693.         ***************************************************************************** */
  694.         /* global Reflect, Promise */
  695.  
  696.         var extendStatics = function (d, b) {
  697.           extendStatics =
  698.             Object.setPrototypeOf ||
  699.             ({ __proto__: [] } instanceof Array &&
  700.               function (d, b) {
  701.                 d.__proto__ = b;
  702.               }) ||
  703.             function (d, b) {
  704.               for (var p in b)
  705.                 if (Object.hasOwnProperty.call(b, p)) d[p] = b[p];
  706.             };
  707.           return extendStatics(d, b);
  708.         };
  709.  
  710.         function __extends(d, b) {
  711.           if (typeof b !== "function" && b !== null)
  712.             throw new TypeError(
  713.               "Class extends value " +
  714.                 String(b) +
  715.                 " is not a constructor or null"
  716.             );
  717.           extendStatics(d, b);
  718.           function __() {
  719.             this.constructor = d;
  720.           }
  721.           d.prototype =
  722.             b === null
  723.               ? Object.create(b)
  724.               : ((__.prototype = b.prototype), new __());
  725.         }
  726.  
  727.         var __assign = function () {
  728.           __assign =
  729.             Object.assign ||
  730.             function __assign(t) {
  731.               for (var s, i = 1, n = arguments.length; i < n; i++) {
  732.                 s = arguments[i];
  733.                 for (var p in s)
  734.                   if (Object.hasOwnProperty.call(s, p)) t[p] = s[p];
  735.               }
  736.               return t;
  737.             };
  738.           return __assign.apply(this, arguments);
  739.         };
  740.  
  741.         function __values(o) {
  742.           var s = typeof Symbol === "function" && Symbol.iterator,
  743.             m = s && o[s],
  744.             i = 0;
  745.           if (m) return m.call(o);
  746.           if (o && typeof o.length === "number")
  747.             return {
  748.               next: function () {
  749.                 if (o && i >= o.length) o = void 0;
  750.                 return { value: o && o[i++], done: !o };
  751.               },
  752.             };
  753.           throw new TypeError(
  754.             s ? "Object is not iterable." : "Symbol.iterator is not defined."
  755.           );
  756.         }
  757.  
  758.         var AnyEvent = (function () {
  759.           function AnyEvent() {
  760.             this.__map = {};
  761.           }
  762.           AnyEvent.prototype.beforeEach = function (interceptor) {
  763.             this.__interceptor = interceptor;
  764.           };
  765.           AnyEvent.prototype.on = function (typeOrTypes, listener) {
  766.             var e_1, _a;
  767.             var types = Array.isArray(typeOrTypes)
  768.               ? typeOrTypes
  769.               : [typeOrTypes];
  770.             try {
  771.               for (
  772.                 var types_1 = __values(types), types_1_1 = types_1.next();
  773.                 !types_1_1.done;
  774.                 types_1_1 = types_1.next()
  775.               ) {
  776.                 var type = types_1_1.value;
  777.                 this.__map[type] = this.__map[type] || [];
  778.                 var listeners = this.__map[type];
  779.                 if (listeners) {
  780.                   listeners.push(listener);
  781.                 }
  782.               }
  783.             } catch (e_1_1) {
  784.               e_1 = { error: e_1_1 };
  785.             } finally {
  786.               try {
  787.                 if (types_1_1 && !types_1_1.done && (_a = types_1.return))
  788.                   _a.call(types_1);
  789.               } finally {
  790.                 if (e_1) throw e_1.error;
  791.               }
  792.             }
  793.             return this;
  794.           };
  795.           AnyEvent.prototype.emit = function (type, payload, callback) {
  796.             var _this = this;
  797.             if (void 0 !== this.__interceptor) {
  798.               this.__interceptor(type, function () {
  799.                 _this.__emit(type, payload);
  800.                 callback && callback();
  801.               });
  802.             } else {
  803.               this.__emit(type, payload);
  804.               callback && callback();
  805.             }
  806.           };
  807.           AnyEvent.prototype.__emit = function (type, event) {
  808.             var e_2, _a;
  809.             var listeners = this.__map[type];
  810.             if (
  811.               Array.isArray(listeners) &&
  812.               (listeners === null || listeners === void 0
  813.                 ? void 0
  814.                 : listeners.length)
  815.             ) {
  816.               try {
  817.                 for (
  818.                   var listeners_1 = __values(listeners),
  819.                     listeners_1_1 = listeners_1.next();
  820.                   !listeners_1_1.done;
  821.                   listeners_1_1 = listeners_1.next()
  822.                 ) {
  823.                   var listener = listeners_1_1.value;
  824.                   listener(event, type);
  825.                 }
  826.               } catch (e_2_1) {
  827.                 e_2 = { error: e_2_1 };
  828.               } finally {
  829.                 try {
  830.                   if (
  831.                     listeners_1_1 &&
  832.                     !listeners_1_1.done &&
  833.                     (_a = listeners_1.return)
  834.                   )
  835.                     _a.call(listeners_1);
  836.                 } finally {
  837.                   if (e_2) throw e_2.error;
  838.                 }
  839.               }
  840.             }
  841.             this.event = event;
  842.           };
  843.           AnyEvent.prototype.off = function (type, listener) {
  844.             var listeners = this.__map[type];
  845.             if (void 0 !== listeners) {
  846.               if (void 0 === listener) {
  847.                 delete this.__map[type];
  848.               } else {
  849.                 var index = listeners.findIndex(function (cb) {
  850.                   return cb === listener;
  851.                 });
  852.                 listeners.splice(index, 1);
  853.               }
  854.             }
  855.           };
  856.           AnyEvent.prototype.destroy = function () {
  857.             this.__map = {};
  858.           };
  859.           return AnyEvent;
  860.         })();
  861.  
  862.         var TOUCH_START = "touchstart";
  863.         var TOUCH_MOVE = "touchmove";
  864.         var TOUCH_END = "touchend";
  865.         var TOUCH_CANCEL = "touchcancel";
  866.         var MOUSE_UP = "mouseup";
  867.         var MOUSE_MOVE = "mousemove";
  868.         var MOUSE_DOWN = "mousedown";
  869.         var TYPE_START$1 = "start";
  870.         var TYPE_MOVE$1 = "move";
  871.         var TYPE_END$1 = "end";
  872.         function isFunction(input) {
  873.           return "[object Function]" === Object.prototype.toString.call(input);
  874.         }
  875.  
  876.         var CLIENT_X = "clientX";
  877.         var CLIENT_Y = "clientY";
  878.         var COMPUTE_INTERVAL = 16;
  879.         var TYPE_START = "start";
  880.         var TYPE_MOVE = "move";
  881.         var TYPE_CANCEL = "cancel";
  882.         var TYPE_END = "end";
  883.         var DIRECTION_LEFT = "left";
  884.         var DIRECTION_RIGHT = "right";
  885.         var DIRECTION_UP = "up";
  886.         var DIRECTION_DOWN = "down";
  887.  
  888.         var _a;
  889.         var STATUS_CODE_AND_NAME_MAP =
  890.           ((_a = {}),
  891.           (_a[4] = TYPE_START),
  892.           (_a[5] = TYPE_MOVE),
  893.           (_a[1] = TYPE_END),
  894.           (_a[3] = TYPE_CANCEL),
  895.           _a);
  896.         function getStatusName(code) {
  897.           return STATUS_CODE_AND_NAME_MAP[code];
  898.         }
  899.         function flow(isVaild, lastStatus, phase) {
  900.           var _a, _b, _c, _d, _e, _f, _g;
  901.           var STATE_MAP = {
  902.             1:
  903.               ((_a = {}),
  904.               (_a[0] = ((_b = {}), (_b[TYPE_MOVE] = 4), _b)),
  905.               (_a[4] =
  906.                 ((_c = {}),
  907.                 (_c[TYPE_MOVE] = 5),
  908.                 (_c[TYPE_END] = 1),
  909.                 (_c[TYPE_CANCEL] = 3),
  910.                 _c)),
  911.               (_a[5] =
  912.                 ((_d = {}),
  913.                 (_d[TYPE_MOVE] = 5),
  914.                 (_d[TYPE_END] = 1),
  915.                 (_d[TYPE_CANCEL] = 3),
  916.                 _d)),
  917.               _a),
  918.             0:
  919.               ((_e = {}),
  920.               (_e[4] =
  921.                 ((_f = {}),
  922.                 (_f[TYPE_MOVE] = 2),
  923.                 (_f[TYPE_END] = 1),
  924.                 (_f[TYPE_CANCEL] = 3),
  925.                 _f)),
  926.               (_e[5] =
  927.                 ((_g = {}),
  928.                 (_g[TYPE_START] = 2),
  929.                 (_g[TYPE_MOVE] = 2),
  930.                 (_g[TYPE_END] = 1),
  931.                 (_g[TYPE_CANCEL] = 3),
  932.                 _g)),
  933.               _e),
  934.           };
  935.           var map = STATE_MAP[Number(isVaild)][lastStatus];
  936.           return (void 0 !== map && map[phase]) || 0;
  937.         }
  938.         function resetState(context) {
  939.           if ([1, 3, 2].includes(context.state)) {
  940.             context.state = 0;
  941.           }
  942.         }
  943.         function isMoveOrEndOrCancel(state) {
  944.           return [5, 1, 3].includes(state);
  945.         }
  946.         function isDisabled(context) {
  947.           if (context.disabled) {
  948.             context.state = 0;
  949.             return true;
  950.           }
  951.         }
  952.  
  953.         function createPluginContext(defaultOptions, options) {
  954.           return __assign(__assign(__assign({}, defaultOptions), options), {
  955.             state: 0,
  956.             disabled: false,
  957.           });
  958.         }
  959.  
  960.         function round2(n) {
  961.           return Math.round(n * 100) / 100;
  962.         }
  963.  
  964.         function inputCreator() {
  965.           var id = 0;
  966.           var prevInput;
  967.           var activeInput;
  968.           var startInput;
  969.           var startMultiInput;
  970.           return function (basicsInput) {
  971.             prevInput = activeInput;
  972.             if (void 0 !== basicsInput) {
  973.               id = Number.MAX_SAFE_INTEGER > id ? ++id : 1;
  974.               var pureInput = extendInput(basicsInput, id);
  975.               activeInput = pureInput;
  976.               var isStart = pureInput.isStart,
  977.                 pointLength = pureInput.pointLength;
  978.               if (isStart) {
  979.                 startInput = pureInput;
  980.                 prevInput = void 0;
  981.                 if (1 < pointLength) {
  982.                   startMultiInput = pureInput;
  983.                 } else {
  984.                   startMultiInput = void 0;
  985.                 }
  986.               }
  987.               return __assign(__assign({}, pureInput), {
  988.                 prevInput: prevInput,
  989.                 startMultiInput: startMultiInput,
  990.                 startInput: startInput,
  991.               });
  992.             }
  993.           };
  994.         }
  995.         function getCenter(points) {
  996.           var length = points.length;
  997.           if (0 < length) {
  998.             if (1 === length) {
  999.               var _a = points[0],
  1000.                 clientX = _a.clientX,
  1001.                 clientY = _a.clientY;
  1002.               return { x: Math.round(clientX), y: Math.round(clientY) };
  1003.             }
  1004.             var countPoint = points.reduce(
  1005.               function (countPoint, point) {
  1006.                 countPoint.x += point[CLIENT_X];
  1007.                 countPoint.y += point[CLIENT_Y];
  1008.                 return countPoint;
  1009.               },
  1010.               { x: 0, y: 0 }
  1011.             );
  1012.             return {
  1013.               x: Math.round(countPoint.x / length),
  1014.               y: Math.round(countPoint.y / length),
  1015.             };
  1016.           }
  1017.         }
  1018.         function extendInput(basicsInput, id) {
  1019.           var phase = basicsInput.phase,
  1020.             points = basicsInput.points,
  1021.             changedPoints = basicsInput.changedPoints,
  1022.             nativeEvent = basicsInput.nativeEvent;
  1023.           var pointLength = points.length;
  1024.           var isStart = TYPE_START === phase;
  1025.           var isEnd =
  1026.             (TYPE_END === phase && 0 === pointLength) || TYPE_CANCEL === phase;
  1027.           var timestamp = Date.now();
  1028.           var _a = getCenter(points) || getCenter(changedPoints),
  1029.             x = _a.x,
  1030.             y = _a.y;
  1031.           var currentTarget = nativeEvent.currentTarget;
  1032.           return Object.assign(basicsInput, {
  1033.             id: id,
  1034.             x: x,
  1035.             y: y,
  1036.             timestamp: timestamp,
  1037.             isStart: isStart,
  1038.             isEnd: isEnd,
  1039.             pointLength: pointLength,
  1040.             currentTarget: currentTarget,
  1041.             getOffset: function (el) {
  1042.               if (el === void 0) {
  1043.                 el = currentTarget;
  1044.               }
  1045.               var rect = el.getBoundingClientRect();
  1046.               return {
  1047.                 x: x - Math.round(rect.left),
  1048.                 y: y - Math.round(rect.top),
  1049.               };
  1050.             },
  1051.           });
  1052.         }
  1053.  
  1054.         function mouse() {
  1055.           var prevPoints;
  1056.           var isPressed = false;
  1057.           var _target = null;
  1058.           var createInput = inputCreator();
  1059.           return function (event) {
  1060.             var clientX = event.clientX,
  1061.               clientY = event.clientY,
  1062.               type = event.type,
  1063.               button = event.button,
  1064.               target = event.target;
  1065.             var points = [
  1066.               { clientX: clientX, clientY: clientY, target: target },
  1067.             ];
  1068.             var phase;
  1069.             if (MOUSE_DOWN === type && 0 === button) {
  1070.               _target = target;
  1071.               isPressed = true;
  1072.               phase = TYPE_START$1;
  1073.             } else if (isPressed) {
  1074.               if (MOUSE_MOVE === type) {
  1075.                 phase = TYPE_MOVE$1;
  1076.               } else if (MOUSE_UP === type) {
  1077.                 points = [];
  1078.                 phase = TYPE_END$1;
  1079.                 isPressed = false;
  1080.               }
  1081.             } else {
  1082.               return;
  1083.             }
  1084.             var changedPoints = prevPoints || [
  1085.               { clientX: clientX, clientY: clientY, target: target },
  1086.             ];
  1087.             prevPoints = [
  1088.               { clientX: clientX, clientY: clientY, target: target },
  1089.             ];
  1090.             if (void 0 !== phase) {
  1091.               return createInput({
  1092.                 phase: phase,
  1093.                 changedPoints: changedPoints,
  1094.                 points: points,
  1095.                 target: _target,
  1096.                 targets: [_target],
  1097.                 nativeEvent: event,
  1098.               });
  1099.             }
  1100.           };
  1101.         }
  1102.  
  1103.         function touch(el) {
  1104.           var createInput = inputCreator();
  1105.           return function (event) {
  1106.             var targets = [];
  1107.             var points = [];
  1108.             Array.from(event.touches).forEach(function (_a) {
  1109.               var clientX = _a.clientX,
  1110.                 clientY = _a.clientY,
  1111.                 target = _a.target;
  1112.               if (el === null || el === void 0 ? void 0 : el.contains(target)) {
  1113.                 targets.push(target);
  1114.                 points.push({
  1115.                   clientX: clientX,
  1116.                   clientY: clientY,
  1117.                   target: target,
  1118.                 });
  1119.               }
  1120.             });
  1121.             var changedPoints = Array.from(event.changedTouches).map(function (
  1122.               _a
  1123.             ) {
  1124.               var clientX = _a.clientX,
  1125.                 clientY = _a.clientY,
  1126.                 target = _a.target;
  1127.               return { clientX: clientX, clientY: clientY, target: target };
  1128.             });
  1129.             return createInput({
  1130.               phase: event.type.replace("touch", ""),
  1131.               changedPoints: changedPoints,
  1132.               points: points,
  1133.               nativeEvent: event,
  1134.               target: event.target,
  1135.               targets: targets,
  1136.             });
  1137.           };
  1138.         }
  1139.  
  1140.         function dispatchDomEvent(typeName, el, payload, eventInit) {
  1141.           var data = {};
  1142.           for (var key in payload) {
  1143.             if (!["target", "currentTarget", "type"].includes(key)) {
  1144.               data[key] = payload[key];
  1145.             }
  1146.           }
  1147.           var event;
  1148.           if (document.createEvent) {
  1149.             event = document.createEvent("HTMLEvents");
  1150.             event.initEvent(
  1151.               typeName,
  1152.               eventInit === null || eventInit === void 0
  1153.                 ? void 0
  1154.                 : eventInit.bubbles,
  1155.               eventInit === null || eventInit === void 0
  1156.                 ? void 0
  1157.                 : eventInit.cancelable
  1158.             );
  1159.           } else {
  1160.             event = new Event(typeName, eventInit);
  1161.           }
  1162.           Object.assign(event, data, {
  1163.             match: function () {
  1164.               return (
  1165.                 payload.targets &&
  1166.                 0 < payload.targets.length &&
  1167.                 payload.targets.every(function (target) {
  1168.                   return event.currentTarget.contains(target);
  1169.                 })
  1170.               );
  1171.             },
  1172.           });
  1173.           return el.dispatchEvent(event);
  1174.         }
  1175.  
  1176.         function canPreventDefault(event, options) {
  1177.           var preventDefault = options.preventDefault;
  1178.           if (isFunction(preventDefault)) {
  1179.             return preventDefault(event);
  1180.           } else {
  1181.             return !!preventDefault;
  1182.           }
  1183.         }
  1184.  
  1185.         var ELEMENT_TYPES = [
  1186.           TOUCH_START,
  1187.           TOUCH_MOVE,
  1188.           TOUCH_END,
  1189.           TOUCH_CANCEL,
  1190.           MOUSE_DOWN,
  1191.         ];
  1192.         var WINDOW_TYPES = [MOUSE_MOVE, MOUSE_UP];
  1193.         function bindElement(el, catchEvent, options) {
  1194.           ELEMENT_TYPES.forEach(function (type) {
  1195.             el.addEventListener(type, catchEvent, options);
  1196.           });
  1197.           WINDOW_TYPES.forEach(function (type) {
  1198.             window.addEventListener(type, catchEvent, options);
  1199.           });
  1200.           return function () {
  1201.             ELEMENT_TYPES.forEach(function (types) {
  1202.               el.removeEventListener(types, catchEvent);
  1203.             });
  1204.             WINDOW_TYPES.forEach(function (type) {
  1205.               window.removeEventListener(type, catchEvent);
  1206.             });
  1207.           };
  1208.         }
  1209.  
  1210.         var TYPE_COMPUTED = "computed";
  1211.         var DEFAULT_OPTIONS$6 = {
  1212.           domEvents: { bubbles: true, cancelable: true },
  1213.           preventDefault: function (event) {
  1214.             if (event.target && "tagName" in event.target) {
  1215.               var tagName = event.target.tagName;
  1216.               return !/^(?:INPUT|TEXTAREA|BUTTON|SELECT)$/.test(tagName);
  1217.             }
  1218.             return false;
  1219.           },
  1220.         };
  1221.         var TYPE_UNBIND = "u";
  1222.         var TYPE_INPUT = "input";
  1223.         var TYPE_AT_AFTER = "at:after";
  1224.         var default_1$1 = (function (_super) {
  1225.           __extends(default_1, _super);
  1226.           function default_1(el, options) {
  1227.             var _a;
  1228.             var _this = _super.call(this) || this;
  1229.             _this.v = "2.1.3";
  1230.             _this.__computeFunctionList = [];
  1231.             _this.__computeFunctionCreatorList = [];
  1232.             _this.__pluginContexts = [];
  1233.             _this.__isIgnoreMouse = false;
  1234.             _this.el = el;
  1235.             _this.c = {};
  1236.             _this.__options = __assign(
  1237.               __assign({}, DEFAULT_OPTIONS$6),
  1238.               options
  1239.             );
  1240.             var createInputFromTouch = touch(_this.el);
  1241.             var createInputFromMouse = mouse();
  1242.             _this.__inputCreatorMap =
  1243.               ((_a = {}),
  1244.               (_a[TOUCH_START] = createInputFromTouch),
  1245.               (_a[TOUCH_MOVE] = createInputFromTouch),
  1246.               (_a[TOUCH_END] = createInputFromTouch),
  1247.               (_a[TOUCH_CANCEL] = createInputFromTouch),
  1248.               (_a[MOUSE_DOWN] = createInputFromMouse),
  1249.               (_a[MOUSE_MOVE] = createInputFromMouse),
  1250.               (_a[MOUSE_UP] = createInputFromMouse),
  1251.               _a);
  1252.             _this.on(TYPE_AT_AFTER, function (payload) {
  1253.               var target = payload.target,
  1254.                 __type = payload.__type;
  1255.               var domEvents = _this.__options.domEvents;
  1256.               if (!!domEvents && void 0 !== _this.el && !!target) {
  1257.                 dispatchDomEvent(__type, target, payload, domEvents);
  1258.                 dispatchDomEvent(TYPE_AT_AFTER, target, payload, domEvents);
  1259.               }
  1260.             });
  1261.             if (void 0 !== el) {
  1262.               el.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
  1263.               var supportsPassive_1 = false;
  1264.               try {
  1265.                 var opts = {};
  1266.                 OriginPrototype.Object.defineProperty(opts, "passive", {
  1267.                   get: function () {
  1268.                     supportsPassive_1 = true;
  1269.                   },
  1270.                 });
  1271.                 window.addEventListener(
  1272.                   "_",
  1273.                   function () {
  1274.                     return void 0;
  1275.                   },
  1276.                   opts
  1277.                 );
  1278.               } catch (_b) {}
  1279.               _this.on(
  1280.                 TYPE_UNBIND,
  1281.                 bindElement(
  1282.                   el,
  1283.                   _this.catchEvent.bind(_this),
  1284.                   false === _this.__options.preventDefault && supportsPassive_1
  1285.                     ? { passive: true }
  1286.                     : { passive: false }
  1287.                 )
  1288.               );
  1289.             }
  1290.             return _this;
  1291.           }
  1292.           default_1.prototype.use = function (plugin, pluginOptions) {
  1293.             this.__pluginContexts.push(plugin(this, pluginOptions));
  1294.           };
  1295.           default_1.prototype.catchEvent = function (event) {
  1296.             var input = this.__inputCreatorMap[event.type](event);
  1297.             if (void 0 !== input) {
  1298.               var stopPropagation = function () {
  1299.                 return event.stopPropagation();
  1300.               };
  1301.               var stopImmediatePropagation = function () {
  1302.                 return event.stopImmediatePropagation();
  1303.               };
  1304.               var preventDefault = function () {
  1305.                 return event.preventDefault();
  1306.               };
  1307.               if (canPreventDefault(event, this.__options)) {
  1308.                 preventDefault();
  1309.               } else {
  1310.                 if ("touchstart" === event.type) {
  1311.                   this.__isIgnoreMouse = true;
  1312.                 } else if ("touchmove" === event.type) {
  1313.                   this.__isIgnoreMouse = false;
  1314.                 }
  1315.                 if (this.__isIgnoreMouse && event.type.startsWith("mouse")) {
  1316.                   if ("mouseup" === event.type) {
  1317.                     this.__isIgnoreMouse = false;
  1318.                   }
  1319.                   return;
  1320.                 }
  1321.               }
  1322.               this.emit(TYPE_INPUT, input);
  1323.               this.emit2("at:".concat(input.phase), input, {});
  1324.               var computed_1 = {};
  1325.               this.__computeFunctionList.forEach(function (compute) {
  1326.                 var result = compute(input, computed_1);
  1327.                 if (void 0 !== result) {
  1328.                   for (var key in result) {
  1329.                     computed_1[key] = result[key];
  1330.                   }
  1331.                 }
  1332.               });
  1333.               this.emit(
  1334.                 TYPE_COMPUTED,
  1335.                 __assign(__assign(__assign({}, input), computed_1), {
  1336.                   stopPropagation: stopPropagation,
  1337.                   stopImmediatePropagation: stopImmediatePropagation,
  1338.                   preventDefault: preventDefault,
  1339.                 })
  1340.               );
  1341.             }
  1342.           };
  1343.           default_1.prototype.compute = function (
  1344.             computeFunctionCreatorList,
  1345.             callback
  1346.           ) {
  1347.             var e_1, _a;
  1348.             try {
  1349.               for (
  1350.                 var computeFunctionCreatorList_1 = __values(
  1351.                     computeFunctionCreatorList
  1352.                   ),
  1353.                   computeFunctionCreatorList_1_1 =
  1354.                     computeFunctionCreatorList_1.next();
  1355.                 !computeFunctionCreatorList_1_1.done;
  1356.                 computeFunctionCreatorList_1_1 =
  1357.                   computeFunctionCreatorList_1.next()
  1358.               ) {
  1359.                 var computeFunctionCreator =
  1360.                   computeFunctionCreatorList_1_1.value;
  1361.                 if (
  1362.                   !this.__computeFunctionCreatorList.includes(
  1363.                     computeFunctionCreator
  1364.                   )
  1365.                 ) {
  1366.                   this.__computeFunctionCreatorList.push(
  1367.                     computeFunctionCreator
  1368.                   );
  1369.                   this.__computeFunctionList.push(computeFunctionCreator());
  1370.                 }
  1371.               }
  1372.             } catch (e_1_1) {
  1373.               e_1 = { error: e_1_1 };
  1374.             } finally {
  1375.               try {
  1376.                 if (
  1377.                   computeFunctionCreatorList_1_1 &&
  1378.                   !computeFunctionCreatorList_1_1.done &&
  1379.                   (_a = computeFunctionCreatorList_1.return)
  1380.                 )
  1381.                   _a.call(computeFunctionCreatorList_1);
  1382.               } finally {
  1383.                 if (e_1) throw e_1.error;
  1384.               }
  1385.             }
  1386.             this.on(TYPE_COMPUTED, callback);
  1387.           };
  1388.           default_1.prototype.beforeEach = function (interceptor) {
  1389.             var _this = this;
  1390.             _super.prototype.beforeEach.call(this, function (type, next) {
  1391.               var _a;
  1392.               if ((_a = _this.c) === null || _a === void 0 ? void 0 : _a.name) {
  1393.                 interceptor(type, next);
  1394.               } else {
  1395.                 next();
  1396.               }
  1397.             });
  1398.           };
  1399.           default_1.prototype.get = function (name) {
  1400.             return this.__pluginContexts.find(function (pluginContext) {
  1401.               return name === pluginContext.name;
  1402.             });
  1403.           };
  1404.           default_1.prototype.set = function (newOptions) {
  1405.             this.__options = __assign(__assign({}, this.__options), newOptions);
  1406.           };
  1407.           default_1.prototype.emit2 = function (type, payload, pluginContext) {
  1408.             var _this = this;
  1409.             this.c = pluginContext;
  1410.             this.emit(
  1411.               type,
  1412.               __assign(__assign({}, payload), { type: type }),
  1413.               function () {
  1414.                 _this.emit(
  1415.                   TYPE_AT_AFTER,
  1416.                   __assign(__assign({}, payload), { name: type, __type: type })
  1417.                 );
  1418.               }
  1419.             );
  1420.           };
  1421.           default_1.prototype.destroy = function () {
  1422.             this.emit(TYPE_UNBIND);
  1423.             _super.prototype.destroy.call(this);
  1424.           };
  1425.           return default_1;
  1426.         })(AnyEvent);
  1427.  
  1428.         var getVLength = function (v) {
  1429.           return Math.sqrt(v.x * v.x + v.y * v.y);
  1430.         };
  1431.  
  1432.         var getDotProduct = function (v1, v2) {
  1433.           return v1.x * v2.x + v1.y * v2.y;
  1434.         };
  1435.  
  1436.         var getRadian = function (v1, v2) {
  1437.           var mr = getVLength(v1) * getVLength(v2);
  1438.           if (mr === 0) return 0;
  1439.           var r = getDotProduct(v1, v2) / mr;
  1440.           if (r > 1) r = 1;
  1441.           return Math.acos(r);
  1442.         };
  1443.  
  1444.         var getCross = function (v1, v2) {
  1445.           return v1.x * v2.y - v2.x * v1.y;
  1446.         };
  1447.  
  1448.         var radianToAngle = function (radian) {
  1449.           return (radian / Math.PI) * 180;
  1450.         };
  1451.  
  1452.         var getAngle = function (v1, v2) {
  1453.           var angle = getRadian(v1, v2);
  1454.           if (getCross(v1, v2) > 0) {
  1455.             angle *= -1;
  1456.           }
  1457.           return radianToAngle(angle);
  1458.         };
  1459.  
  1460.         var getDirection = function (x, y) {
  1461.           if (0 === x && 0 === y) {
  1462.             return;
  1463.           }
  1464.           if (Math.abs(x) >= Math.abs(y)) {
  1465.             return 0 < x ? DIRECTION_RIGHT : DIRECTION_LEFT;
  1466.           } else {
  1467.             return 0 < y ? DIRECTION_DOWN : DIRECTION_UP;
  1468.           }
  1469.         };
  1470.  
  1471.         function ComputeAngle() {
  1472.           var angle = 0;
  1473.           var deltaAngle = 0;
  1474.           return function (input, computed) {
  1475.             var prevVecotr = computed.prevVecotr,
  1476.               startVecotr = computed.startVecotr,
  1477.               activeVecotr = computed.activeVecotr;
  1478.             if (activeVecotr) {
  1479.               deltaAngle = Math.round(getAngle(activeVecotr, prevVecotr));
  1480.               angle = Math.round(getAngle(activeVecotr, startVecotr));
  1481.             }
  1482.             return { angle: angle, deltaAngle: deltaAngle };
  1483.           };
  1484.         }
  1485.  
  1486.         function ComputeDeltaXY() {
  1487.           return function (input) {
  1488.             var prevInput = input.prevInput;
  1489.             var deltaX = 0;
  1490.             var deltaY = 0;
  1491.             var deltaXYAngle = 0;
  1492.             if (void 0 !== prevInput) {
  1493.               deltaX = input.x - prevInput.x;
  1494.               deltaY = input.y - prevInput.y;
  1495.               if (0 !== deltaX || 0 !== deltaY) {
  1496.                 var deltaXY = Math.sqrt(
  1497.                   Math.pow(deltaX, 2) + Math.pow(deltaY, 2)
  1498.                 );
  1499.                 deltaXYAngle = Math.round(
  1500.                   radianToAngle(Math.acos(Math.abs(deltaX) / deltaXY))
  1501.                 );
  1502.               }
  1503.             }
  1504.             return {
  1505.               deltaX: deltaX,
  1506.               deltaY: deltaY,
  1507.               deltaXYAngle: deltaXYAngle,
  1508.             };
  1509.           };
  1510.         }
  1511.  
  1512.         function ComputeDistance() {
  1513.           var displacementX = 0;
  1514.           var displacementY = 0;
  1515.           var distanceX = 0;
  1516.           var distanceY = 0;
  1517.           var distance = 0;
  1518.           var overallDirection;
  1519.           return function (input) {
  1520.             var phase = input.phase,
  1521.               startInput = input.startInput;
  1522.             if (TYPE_START === phase) {
  1523.               displacementX = 0;
  1524.               displacementY = 0;
  1525.               distanceX = 0;
  1526.               distanceY = 0;
  1527.               distance = 0;
  1528.             } else if (TYPE_MOVE === phase) {
  1529.               displacementX = Math.round(
  1530.                 input.points[0][CLIENT_X] - startInput.points[0][CLIENT_X]
  1531.               );
  1532.               displacementY = Math.round(
  1533.                 input.points[0][CLIENT_Y] - startInput.points[0][CLIENT_Y]
  1534.               );
  1535.               distanceX = Math.abs(displacementX);
  1536.               distanceY = Math.abs(displacementY);
  1537.               distance = Math.round(getVLength({ x: distanceX, y: distanceY }));
  1538.               overallDirection = getDirection(displacementX, displacementY);
  1539.             }
  1540.             return {
  1541.               displacementX: displacementX,
  1542.               displacementY: displacementY,
  1543.               distanceX: distanceX,
  1544.               distanceY: distanceY,
  1545.               distance: distance,
  1546.               overallDirection: overallDirection,
  1547.             };
  1548.           };
  1549.         }
  1550.  
  1551.         function ComputeScale() {
  1552.           var scale = 1;
  1553.           return function (input, computed) {
  1554.             var deltaScale = 1;
  1555.             var prevVecotr = computed.prevVecotr,
  1556.               startVecotr = computed.startVecotr,
  1557.               activeVecotr = computed.activeVecotr;
  1558.             if (activeVecotr) {
  1559.               deltaScale = round2(
  1560.                 getVLength(activeVecotr) / getVLength(prevVecotr)
  1561.               );
  1562.               scale = round2(
  1563.                 getVLength(activeVecotr) / getVLength(startVecotr)
  1564.               );
  1565.             }
  1566.             return { scale: scale, deltaScale: deltaScale };
  1567.           };
  1568.         }
  1569.  
  1570.         function ComputeVAndDir() {
  1571.           var velocityX = 0;
  1572.           var velocityY = 0;
  1573.           var speedX = 0;
  1574.           var speedY = 0;
  1575.           var direction;
  1576.           var lastValidInput;
  1577.           return function (input) {
  1578.             if (void 0 !== input) {
  1579.               lastValidInput = lastValidInput || input.startInput;
  1580.               var deltaTime = input.timestamp - lastValidInput.timestamp;
  1581.               if (COMPUTE_INTERVAL < deltaTime) {
  1582.                 var deltaX = input.x - lastValidInput.x;
  1583.                 var deltaY = input.y - lastValidInput.y;
  1584.                 speedX = Math.round((deltaX / deltaTime) * 100) / 100;
  1585.                 speedY = Math.round((deltaY / deltaTime) * 100) / 100;
  1586.                 velocityX = Math.abs(speedX);
  1587.                 velocityY = Math.abs(speedY);
  1588.                 direction = getDirection(deltaX, deltaY);
  1589.                 lastValidInput = input;
  1590.               }
  1591.             }
  1592.             return {
  1593.               velocityX: velocityX,
  1594.               velocityY: velocityY,
  1595.               speedX: speedX,
  1596.               speedY: speedY,
  1597.               direction: direction,
  1598.             };
  1599.           };
  1600.         }
  1601.  
  1602.         function ComputeMaxLength() {
  1603.           var maxPointLength = 0;
  1604.           return function (input) {
  1605.             var phase = input.phase;
  1606.             if (TYPE_START === phase) {
  1607.               maxPointLength = input.pointLength;
  1608.             }
  1609.             return { maxPointLength: maxPointLength };
  1610.           };
  1611.         }
  1612.  
  1613.         function computeVector(input) {
  1614.           return {
  1615.             x: input.points[1][CLIENT_X] - input.points[0][CLIENT_X],
  1616.             y: input.points[1][CLIENT_Y] - input.points[0][CLIENT_Y],
  1617.           };
  1618.         }
  1619.         function ComputeVectorForMutli() {
  1620.           var startVecotr;
  1621.           var prevVecotr;
  1622.           var activeVecotr;
  1623.           return function (input) {
  1624.             var prevInput = input.prevInput,
  1625.               startMultiInput = input.startMultiInput;
  1626.             if (
  1627.               void 0 !== startMultiInput &&
  1628.               void 0 !== prevInput &&
  1629.               input.id !== startMultiInput.id &&
  1630.               1 < prevInput.pointLength &&
  1631.               1 < input.pointLength
  1632.             ) {
  1633.               startVecotr = computeVector(startMultiInput);
  1634.               prevVecotr = computeVector(prevInput);
  1635.               activeVecotr = computeVector(input);
  1636.             } else {
  1637.               activeVecotr = void 0;
  1638.             }
  1639.             return {
  1640.               startVecotr: startVecotr,
  1641.               prevVecotr: prevVecotr,
  1642.               activeVecotr: activeVecotr,
  1643.             };
  1644.           };
  1645.         }
  1646.  
  1647.         var DEFAULT_OPTIONS$5 = {
  1648.           name: "tap",
  1649.           pointLength: 1,
  1650.           tapTimes: 1,
  1651.           waitNextTapTime: 300,
  1652.           maxDistance: 2,
  1653.           maxDistanceFromPrevTap: 9,
  1654.           maxPressTime: 250,
  1655.         };
  1656.         function tap(at, options) {
  1657.           var context = createPluginContext(DEFAULT_OPTIONS$5, options);
  1658.           var tapCount = 0;
  1659.           var prevTapPoint;
  1660.           var prevTapTime;
  1661.           var countDownToFailTimer;
  1662.           function reset() {
  1663.             tapCount = 0;
  1664.             prevTapPoint = void 0;
  1665.             prevTapTime = void 0;
  1666.           }
  1667.           function countDownToFail() {
  1668.             countDownToFailTimer = setTimeout(function () {
  1669.               context.state = 2;
  1670.               reset();
  1671.             }, context.waitNextTapTime);
  1672.           }
  1673.           function isValidDistanceFromPrevTap(center, options) {
  1674.             if (void 0 !== prevTapPoint) {
  1675.               var distanceFromPreviousTap = getVLength({
  1676.                 x: center.x - prevTapPoint.x,
  1677.                 y: center.y - prevTapPoint.y,
  1678.               });
  1679.               prevTapPoint = center;
  1680.               return options.maxDistanceFromPrevTap >= distanceFromPreviousTap;
  1681.             } else {
  1682.               prevTapPoint = center;
  1683.               return true;
  1684.             }
  1685.           }
  1686.           function isValidInterval(waitNextTapTime) {
  1687.             var now = performance.now();
  1688.             if (void 0 === prevTapTime) {
  1689.               prevTapTime = now;
  1690.               return true;
  1691.             } else {
  1692.               var interval = now - prevTapTime;
  1693.               prevTapTime = now;
  1694.               return interval < waitNextTapTime;
  1695.             }
  1696.           }
  1697.           at.compute([ComputeDistance, ComputeMaxLength], function (computed) {
  1698.             if (isDisabled(context)) return;
  1699.             var phase = computed.phase,
  1700.               x = computed.x,
  1701.               y = computed.y;
  1702.             if (TYPE_END !== phase) return;
  1703.             context.state = 0;
  1704.             if (test()) {
  1705.               clearTimeout(countDownToFailTimer);
  1706.               if (
  1707.                 isValidDistanceFromPrevTap({ x: x, y: y }, context) &&
  1708.                 isValidInterval(context.waitNextTapTime)
  1709.               ) {
  1710.                 tapCount++;
  1711.               } else {
  1712.                 tapCount = 1;
  1713.               }
  1714.               if (0 === tapCount % context.tapTimes) {
  1715.                 context.state = 1;
  1716.                 at.emit2(context.name, computed, context);
  1717.                 reset();
  1718.               } else {
  1719.                 countDownToFail();
  1720.               }
  1721.             } else {
  1722.               reset();
  1723.               context.state = 2;
  1724.             }
  1725.             function test() {
  1726.               var startInput = computed.startInput,
  1727.                 pointLength = computed.pointLength,
  1728.                 timestamp = computed.timestamp;
  1729.               var deltaTime = timestamp - startInput.timestamp;
  1730.               var distance = computed.distance,
  1731.                 maxPointLength = computed.maxPointLength;
  1732.               return (
  1733.                 maxPointLength === context.pointLength &&
  1734.                 0 === pointLength &&
  1735.                 context.maxDistance >= distance &&
  1736.                 context.maxPressTime > deltaTime
  1737.               );
  1738.             }
  1739.           });
  1740.           return context;
  1741.         }
  1742.  
  1743.         var DEFAULT_OPTIONS$4 = { name: "pan", threshold: 10, pointLength: 1 };
  1744.         function pan(at, options) {
  1745.           var context = createPluginContext(DEFAULT_OPTIONS$4, options);
  1746.           at.compute(
  1747.             [ComputeVAndDir, ComputeDistance, ComputeDeltaXY],
  1748.             function (computed) {
  1749.               resetState(context);
  1750.               if (isDisabled(context)) return;
  1751.               var isValid = test();
  1752.               context.state = flow(isValid, context.state, computed.phase);
  1753.               if (isValid || isMoveOrEndOrCancel(context.state)) {
  1754.                 var name_1 = context.name;
  1755.                 at.emit2(name_1, computed, context);
  1756.                 at.emit2(
  1757.                   name_1 + getStatusName(context.state),
  1758.                   computed,
  1759.                   context
  1760.                 );
  1761.                 if (
  1762.                   ![TYPE_END, TYPE_CANCEL].includes(computed.phase) &&
  1763.                   computed.direction
  1764.                 ) {
  1765.                   at.emit2(name_1 + computed.direction, computed, context);
  1766.                 }
  1767.               }
  1768.               function test() {
  1769.                 var pointLength = computed.pointLength,
  1770.                   distance = computed.distance;
  1771.                 return (
  1772.                   context.pointLength === pointLength &&
  1773.                   context.threshold <= distance
  1774.                 );
  1775.               }
  1776.             }
  1777.           );
  1778.           return context;
  1779.         }
  1780.  
  1781.         var DEFAULT_OPTIONS$3 = {
  1782.           name: "swipe",
  1783.           threshold: 10,
  1784.           velocity: 0.3,
  1785.           pointLength: 1,
  1786.         };
  1787.         function swipe(at, options) {
  1788.           var context = createPluginContext(DEFAULT_OPTIONS$3, options);
  1789.           at.compute(
  1790.             [ComputeDistance, ComputeVAndDir, ComputeMaxLength],
  1791.             function (computed) {
  1792.               context.state = 0;
  1793.               if (context.disabled) return;
  1794.               if (test()) {
  1795.                 var name_1 = context.name;
  1796.                 context.state = 1;
  1797.                 at.emit2(name_1, computed, context);
  1798.                 at.emit2(name_1 + computed.direction, computed, context);
  1799.               }
  1800.               function test() {
  1801.                 if (TYPE_END !== computed.phase) return false;
  1802.                 var velocityX = computed.velocityX,
  1803.                   velocityY = computed.velocityY,
  1804.                   distance = computed.distance,
  1805.                   maxPointLength = computed.maxPointLength;
  1806.                 return (
  1807.                   maxPointLength === context.pointLength &&
  1808.                   0 === computed.points.length &&
  1809.                   context.threshold < distance &&
  1810.                   context.velocity < Math.max(velocityX, velocityY)
  1811.                 );
  1812.               }
  1813.             }
  1814.           );
  1815.           return context;
  1816.         }
  1817.  
  1818.         var DEFAULT_OPTIONS$2 = {
  1819.           name: "press",
  1820.           pointLength: 1,
  1821.           maxDistance: 9,
  1822.           minPressTime: 251,
  1823.         };
  1824.         function press(at, options) {
  1825.           var context = createPluginContext(DEFAULT_OPTIONS$2, options);
  1826.           var timeoutId = 0;
  1827.           at.compute([ComputeDistance], function (computed) {
  1828.             if (isDisabled(context)) return;
  1829.             var phase = computed.phase,
  1830.               startInput = computed.startInput,
  1831.               pointLength = computed.pointLength;
  1832.             if (TYPE_START === phase && context.pointLength === pointLength) {
  1833.               resetState(context);
  1834.               clearTimeout(timeoutId);
  1835.               timeoutId = setTimeout(function () {
  1836.                 context.state = 1;
  1837.                 at.emit2(context.name, computed, context);
  1838.               }, context.minPressTime);
  1839.             } else if (TYPE_END === phase && 1 === context.state) {
  1840.               at.emit2(
  1841.                 "".concat(context.name).concat(DIRECTION_UP),
  1842.                 computed,
  1843.                 context
  1844.               );
  1845.             } else if (1 !== context.state) {
  1846.               var deltaTime = computed.timestamp - startInput.timestamp;
  1847.               if (
  1848.                 !test() ||
  1849.                 (context.minPressTime > deltaTime &&
  1850.                   [TYPE_END, TYPE_CANCEL].includes(phase))
  1851.               ) {
  1852.                 clearTimeout(timeoutId);
  1853.                 context.state = 2;
  1854.               }
  1855.             }
  1856.             function test() {
  1857.               var distance = computed.distance;
  1858.               return distance && context.maxDistance > distance;
  1859.             }
  1860.           });
  1861.           return context;
  1862.         }
  1863.  
  1864.         var DEFAULT_OPTIONS$1 = {
  1865.           name: "pinch",
  1866.           threshold: 0,
  1867.           pointLength: 2,
  1868.         };
  1869.         function pinch(at, options) {
  1870.           var context = createPluginContext(DEFAULT_OPTIONS$1, options);
  1871.           at.compute(
  1872.             [ComputeVectorForMutli, ComputeScale],
  1873.             function (computed) {
  1874.               resetState(context);
  1875.               if (isDisabled(context)) return;
  1876.               var isValid = test();
  1877.               context.state = flow(isValid, context.state, computed.phase);
  1878.               var name = context.name;
  1879.               if (isValid || isMoveOrEndOrCancel(context.state)) {
  1880.                 at.emit2(name, computed, context);
  1881.                 var deltaScale = computed.deltaScale;
  1882.                 if (1 !== deltaScale) {
  1883.                   at.emit2(
  1884.                     name + (1 < deltaScale ? "in" : "out"),
  1885.                     computed,
  1886.                     context
  1887.                   );
  1888.                 }
  1889.               }
  1890.               var stateName = getStatusName(context.state);
  1891.               if (stateName) {
  1892.                 at.emit2(name + stateName, computed, context);
  1893.               }
  1894.               function test() {
  1895.                 var pointLength = computed.pointLength,
  1896.                   scale = computed.scale;
  1897.                 computed.deltaScale;
  1898.                 computed.phase;
  1899.                 return (
  1900.                   context.pointLength === pointLength &&
  1901.                   context.threshold < Math.abs(scale - 1)
  1902.                 );
  1903.               }
  1904.             }
  1905.           );
  1906.           return context;
  1907.         }
  1908.  
  1909.         var DEFAULT_OPTIONS = {
  1910.           name: "rotate",
  1911.           threshold: 0,
  1912.           pointLength: 2,
  1913.         };
  1914.         function rotate(at, options) {
  1915.           var context = createPluginContext(DEFAULT_OPTIONS, options);
  1916.           at.compute(
  1917.             [ComputeVectorForMutli, ComputeAngle],
  1918.             function (computed) {
  1919.               if (isDisabled(context)) return;
  1920.               resetState(context);
  1921.               var isValid = test();
  1922.               context.state = flow(isValid, context.state, computed.phase);
  1923.               var name = context.name;
  1924.               if (isValid || isMoveOrEndOrCancel(context.state)) {
  1925.                 at.emit2(name, computed, context);
  1926.               }
  1927.               var stateName = getStatusName(context.state);
  1928.               if (stateName) {
  1929.                 at.emit2(name + stateName, computed, context);
  1930.               }
  1931.               function test() {
  1932.                 var pointLength = computed.pointLength,
  1933.                   angle = computed.angle;
  1934.                 return (
  1935.                   context.pointLength === pointLength &&
  1936.                   context.threshold < Math.abs(angle)
  1937.                 );
  1938.               }
  1939.             }
  1940.           );
  1941.           return context;
  1942.         }
  1943.  
  1944.         function doubletap(at) {
  1945.           at.use(tap, { name: "doubletap", tapTimes: 2 });
  1946.           var doubleTapContext = at.get("doubletap");
  1947.           var timeID;
  1948.           at.beforeEach(function (type, next) {
  1949.             if ("tap" === type) {
  1950.               clearTimeout(timeID);
  1951.               timeID = setTimeout(function () {
  1952.                 if ([0, 2].includes(doubleTapContext.state)) {
  1953.                   next();
  1954.                 }
  1955.               }, 300);
  1956.             } else {
  1957.               next();
  1958.             }
  1959.           });
  1960.           return doubleTapContext;
  1961.         }
  1962.  
  1963.         var default_1 = (function (_super) {
  1964.           __extends(default_1, _super);
  1965.           function default_1(el, options) {
  1966.             var _this = _super.call(this, el, options) || this;
  1967.             _this.use(tap);
  1968.             _this.use(pan);
  1969.             _this.use(swipe);
  1970.             _this.use(press);
  1971.             _this.use(pinch);
  1972.             _this.use(rotate);
  1973.             return _this;
  1974.           }
  1975.           default_1.STATE_POSSIBLE = 0;
  1976.           default_1.STATE_START = 4;
  1977.           default_1.STATE_MOVE = 5;
  1978.           default_1.STATE_END = 1;
  1979.           default_1.STATE_CANCELLED = 3;
  1980.           default_1.STATE_FAILED = 2;
  1981.           default_1.STATE_RECOGNIZED = 1;
  1982.           default_1.tap = tap;
  1983.           default_1.pan = pan;
  1984.           default_1.swipe = swipe;
  1985.           default_1.press = press;
  1986.           default_1.rotate = rotate;
  1987.           default_1.pinch = pinch;
  1988.           default_1.doubletap = doubletap;
  1989.           return default_1;
  1990.         })(default_1$1);
  1991.  
  1992.         return default_1;
  1993.       });
  1994.       //# sourceMappingURL=any-touch.umd.js.map
  1995.       return anyTouch;
  1996.     },
  1997.     /**
  1998.      * 排序数组
  1999.      * @param {(value: any)=>any} getBeforeValueFun
  2000.      * @param {(value: any)=>any} getAfterValueFun
  2001.      * @param {boolean} sortByDesc 排序是否降序，默认降序
  2002.      * @returns
  2003.      */
  2004.     sortElementListByProperty(
  2005.       getBeforeValueFun,
  2006.       getAfterValueFun,
  2007.       sortByDesc = true
  2008.     ) {
  2009.       if (typeof sortByDesc !== "boolean") {
  2010.         throw "参数 sortByDesc 必须为boolean类型";
  2011.       }
  2012.       if (getBeforeValueFun == null || getAfterValueFun == null) {
  2013.         throw "获取前面的值或后面的值的方法不能为空";
  2014.       }
  2015.       return function (after_obj, before_obj) {
  2016.         var beforeValue = getBeforeValueFun(before_obj); /*  前 */
  2017.         var afterValue = getAfterValueFun(after_obj); /* 后 */
  2018.         if (sortByDesc) {
  2019.           if (afterValue > beforeValue) {
  2020.             return -1;
  2021.           } else if (afterValue < beforeValue) {
  2022.             return 1;
  2023.           } else {
  2024.             return 0;
  2025.           }
  2026.         } else {
  2027.           if (afterValue < beforeValue) {
  2028.             return -1;
  2029.           } else if (afterValue > beforeValue) {
  2030.             return 1;
  2031.           } else {
  2032.             return 0;
  2033.           }
  2034.         }
  2035.       };
  2036.     },
  2037.     /**
  2038.      * 获取格式化后的时间
  2039.      * @param {string|number} [text= new Date()]	需要格式化的字符串或者时间戳
  2040.      * @param {string} [formatType = "yyyy-MM-dd HH:mm:ss"]	格式化成的显示类型
  2041.      * + yyyy 年
  2042.      * + MM 月
  2043.      * + dd 天
  2044.      * + HH 时 (24小时制)
  2045.      * + hh 时 (12小时制)
  2046.      * + mm 分
  2047.      * + ss 秒
  2048.      * @returns {string}	返回格式化后的时间
  2049.      * @example
  2050.      * Utils.formatTime("2022-08-21 23:59:00","HH:mm:ss");
  2051.      * > '23:59:00'
  2052.      * @example
  2053.      * Utils.formatTime(1899187424988,"HH:mm:ss");
  2054.      * > '15:10:13'
  2055.      * @example
  2056.      * Utils.formatTime()
  2057.      * > '2023-1-1 00:00:00'
  2058.      **/
  2059.     formatTime: function (
  2060.       text = new Date(),
  2061.       formatType = "yyyy-MM-dd HH:mm:ss"
  2062.     ) {
  2063.       let time = text == null ? new Date() : new Date(text);
  2064.       /**
  2065.        * 校验时间补0
  2066.        * @param {number} timeNum
  2067.        * @returns
  2068.        */
  2069.       function checkTime(timeNum) {
  2070.         if (timeNum < 10) return "0" + timeNum;
  2071.         return timeNum;
  2072.       }
  2073.  
  2074.       /**
  2075.        * 时间制修改 24小时制转12小时制
  2076.        * @param {number} hourNum 小时
  2077.        * @returns
  2078.        */
  2079.       function timeSystemChange(hourNum) {
  2080.         return hourNum > 12 ? hourNum - 12 : hourNum;
  2081.       }
  2082.  
  2083.       let timeRegexp = {
  2084.         yyyy: time.getFullYear(),
  2085.         /* 年 */
  2086.         MM: checkTime(time.getMonth() + 1),
  2087.         /* 月 */
  2088.         dd: checkTime(time.getDate()),
  2089.         /* 日 */
  2090.         HH: checkTime(time.getHours()),
  2091.         /* 时 (24小时制) */
  2092.         hh: checkTime(timeSystemChange(time.getHours())),
  2093.         /* 时 (12小时制) */
  2094.         mm: checkTime(time.getMinutes()),
  2095.         /* 分 */
  2096.         ss: checkTime(time.getSeconds()),
  2097.         /* 秒 */
  2098.       };
  2099.       Object.keys(timeRegexp).forEach(function (key) {
  2100.         let replaecRegexp = new RegExp(key, "g");
  2101.         formatType = formatType.replace(replaecRegexp, timeRegexp[key]);
  2102.       });
  2103.       return formatType;
  2104.     },
  2105.     /**
  2106.      * 格式化byte为KB、MB、GB、TB、PB、EB、ZB、YB、BB、NB、DB
  2107.      * @param {number|string} byteSize 字节
  2108.      * @param {boolean} [addType=true]
  2109.      * + true (默认) 添加单位
  2110.      * + false 不添加单位
  2111.      * @returns {string|number}
  2112.      * + {string} 当addType为true时，且保留小数点末尾2位
  2113.      * + {number} 当addType为false时，且保留小数点末尾2位
  2114.      * @example
  2115.      * Utils.formatByteToSize("812304");
  2116.      * > '793.27KB'
  2117.      * @example
  2118.      * Utils.formatByteToSize("812304",false);
  2119.      * > 793.27
  2120.      **/
  2121.     formatByteToSize: function (byteSize, addType = true) {
  2122.       byteSize = parseInt(byteSize);
  2123.       if (isNaN(byteSize)) {
  2124.         throw new Error("Utils.formatByteToSize 参数 byteSize 格式不正确");
  2125.       }
  2126.       let result = 0;
  2127.       let resultType = "KB";
  2128.       let sizeData = {};
  2129.       sizeData.B = 1;
  2130.       sizeData.KB = 1024;
  2131.       sizeData.MB = sizeData.KB * sizeData.KB;
  2132.       sizeData.GB = sizeData.MB * sizeData.KB;
  2133.       sizeData.TB = sizeData.GB * sizeData.KB;
  2134.       sizeData.PB = sizeData.TB * sizeData.KB;
  2135.       sizeData.EB = sizeData.PB * sizeData.KB;
  2136.       sizeData.ZB = sizeData.EB * sizeData.KB;
  2137.       sizeData.YB = sizeData.ZB * sizeData.KB;
  2138.       sizeData.BB = sizeData.YB * sizeData.KB;
  2139.       sizeData.NB = sizeData.BB * sizeData.KB;
  2140.       sizeData.DB = sizeData.NB * sizeData.KB;
  2141.       for (let key in sizeData) {
  2142.         result = byteSize / sizeData[key];
  2143.         resultType = key;
  2144.         if (sizeData.KB >= result) {
  2145.           break;
  2146.         }
  2147.       }
  2148.       result = result.toFixed(2);
  2149.       result = addType ? result + resultType.toString() : parseFloat(result);
  2150.       return result;
  2151.     },
  2152.     /**
  2153.      * 判断元素是否已显示或已连接
  2154.      * @param {HTMLElement} element
  2155.      * @returns {boolean}
  2156.      */
  2157.     isShow(element) {
  2158.       return Boolean(element.getClientRects().length);
  2159.     },
  2160.     /**
  2161.      * 用于显示元素并获取它的高度宽度等其它属性
  2162.      * @param {HTMLElement} element
  2163.      * @returns {{recovery: ()=>void}} - 恢复
  2164.      */
  2165.     showElement(element) {
  2166.       let oldStyleAttribute = element.getAttribute("style");
  2167.       element.setAttribute(
  2168.         "style",
  2169.         "visibility: !important;display:block !important;"
  2170.       );
  2171.       return {
  2172.         recovery() {
  2173.           if (oldStyleAttribute) {
  2174.             element.setAttribute("style", oldStyleAttribute);
  2175.           } else {
  2176.             element.removeAttribute("style");
  2177.           }
  2178.         },
  2179.       };
  2180.     },
  2181.     /**
  2182.      * 获取元素上的Float格式的属性px
  2183.      * @param {HTMLElement|CSSStyleDeclaration} element
  2184.      * @param {string} styleName style名
  2185.      * @return {number}
  2186.      */
  2187.     getStyleValue(element, styleName) {
  2188.       let view = null;
  2189.       let styles = null;
  2190.       if (element instanceof CSSStyleDeclaration) {
  2191.         /* 直接就获取了style属性 */
  2192.         styles = element;
  2193.       } else {
  2194.         view = element.ownerDocument.defaultView;
  2195.         if (!view || !view.opener) {
  2196.           view = window;
  2197.         }
  2198.         styles = view.getComputedStyle(element);
  2199.       }
  2200.       let value = parseFloat(styles[styleName]);
  2201.       if (isNaN(value)) {
  2202.         return 0;
  2203.       } else {
  2204.         return value;
  2205.       }
  2206.     },
  2207.     /**
  2208.      * 判断是否是window，例如window、self、globalThis
  2209.      * @param {any} target
  2210.      * @returns {boolean}
  2211.      */
  2212.     isWin(target) {
  2213.       if (!typeof target === "object") {
  2214.         return false;
  2215.       }
  2216.       if (target instanceof Node) {
  2217.         return false;
  2218.       }
  2219.       if (target === globalThis) {
  2220.         return true;
  2221.       }
  2222.       if (target === window) {
  2223.         return true;
  2224.       }
  2225.       if (target === self) {
  2226.         return true;
  2227.       }
  2228.       if (target?.Math?.toString() !== "[object Math]") {
  2229.         return false;
  2230.       }
  2231.       return true;
  2232.     },
  2233.     /**
  2234.      * 阻止默认事件触发
  2235.      * @param {Event} event
  2236.      */
  2237.     preventEvent(event) {
  2238.       /* 阻止事件的默认行为发生。例如，当点击一个链接时，浏览器会默认打开链接的URL */
  2239.       event?.preventDefault();
  2240.       /* 停止事件的传播，阻止它继续向更上层的元素冒泡，事件将不会再传播给其他的元素 */
  2241.       event?.stopPropagation();
  2242.       /* 阻止事件传播，并且还能阻止元素上的其他事件处理程序被触发 */
  2243.       event?.stopImmediatePropagation();
  2244.     },
  2245.   };
  2246.  
  2247.   /**
  2248.    * 浮点数工具类
  2249.    */
  2250.   const MathFloatUtils = {
  2251.     /**
  2252.      * 判断数字是否是浮点数
  2253.      * @param {number} num
  2254.      * @returns
  2255.      */
  2256.     isFloat(num) {
  2257.       return Number(num) === num && num % 1 !== 0;
  2258.     },
  2259.     /**
  2260.      * 浮点数加法
  2261.      * @param {number} number1
  2262.      * @param {number} number2
  2263.      */
  2264.     add(number1, number2) {
  2265.       let number1length, number2length, powValue;
  2266.       try {
  2267.         number1length = number1.toString().split(".")[1].length;
  2268.       } catch (error) {
  2269.         number1length = 0;
  2270.       }
  2271.       try {
  2272.         number2length = number2.toString().split(".")[1].length;
  2273.       } catch (error) {
  2274.         number2length = 0;
  2275.       }
  2276.       powValue = Math.pow(10, Math.max(number1length, number2length));
  2277.       return Math.round(number1 * powValue + number2 * powValue) / powValue;
  2278.     },
  2279.     /**
  2280.      * 减法
  2281.      * @param {number} number1
  2282.      * @param {number} number2
  2283.      * @returns
  2284.      */
  2285.     sub(number1, number2) {
  2286.       let number1length, number2length, powValue;
  2287.       try {
  2288.         number1length = number1.toString().split(".")[1].length;
  2289.       } catch (error) {
  2290.         number1length = 0;
  2291.       }
  2292.       try {
  2293.         number2length = number2.toString().split(".")[1].length;
  2294.       } catch (error) {
  2295.         number2length = 0;
  2296.       }
  2297.       powValue = Math.pow(10, Math.max(number1length, number2length));
  2298.       let fixedValue =
  2299.         number1length >= number2length ? number1length : number2length;
  2300.       return (
  2301.         Math.round(number1 * powValue - number2 * powValue) / powValue
  2302.       ).toFixed(fixedValue);
  2303.     },
  2304.     /**
  2305.      * 除法
  2306.      * @param {number} number1
  2307.      * @param {number} number2
  2308.      */
  2309.     division(number1, number2) {
  2310.       let number1length,
  2311.         number2length,
  2312.         number1ReplaceValue,
  2313.         number2ReplaceValue;
  2314.       try {
  2315.         number1length = number1.toString().split(".")[1].length;
  2316.       } catch (error) {
  2317.         number1length = 0;
  2318.       }
  2319.       try {
  2320.         number2length = number2.toString().split(".")[1].length;
  2321.       } catch (error) {
  2322.         number2length = 0;
  2323.       }
  2324.       number1ReplaceValue = Number(number1.toString().replace(".", ""));
  2325.       number2ReplaceValue = Number(number2.toString().replace(".", ""));
  2326.       return (
  2327.         (number1ReplaceValue / number2ReplaceValue) *
  2328.         Math.pow(10, number2length - number1length)
  2329.       );
  2330.     },
  2331.   };
  2332.  
  2333.   /** 元素工具类 */
  2334.   const PopsDOMUtils = {
  2335.     /**
  2336.      * 获取animationend的在各个浏览器的兼容名
  2337.      */
  2338.     getAnimationEndNameList() {
  2339.       return [
  2340.         "webkitAnimationEnd",
  2341.         "mozAnimationEnd",
  2342.         "MSAnimationEnd",
  2343.         "oanimationend",
  2344.         "animationend",
  2345.       ];
  2346.     },
  2347.     /**
  2348.      * 获取 transitionend 的在各个浏览器的兼容名
  2349.      */
  2350.     getTransitionEndNameList() {
  2351.       return [
  2352.         "webkitTransitionEnd",
  2353.         "mozTransitionEnd",
  2354.         "MSTransitionEnd",
  2355.         "otransitionend",
  2356.         "transitionend",
  2357.       ];
  2358.     },
  2359.     /**
  2360.      * 绑定事件
  2361.      * @param {HTMLElement|string|NodeList|Array|Window} element 需要绑定的元素|元素数组|window
  2362.      * @param {DOMUtils_EventType|DOMUtils_EventType[]} eventType 需要监听的事件
  2363.      * @param {string|undefined} selector 子元素选择器
  2364.      * @param {((event: Event)=>void)|undefined} callback 绑定事件触发的回调函数
  2365.      * @param {boolean|AddEventListenerOptions|undefined} option
  2366.      * + capture 表示事件是否在捕获阶段触发。默认为false，即在冒泡阶段触发
  2367.      * + once 表示事件是否只触发一次。默认为false
  2368.      * + passive 表示事件监听器是否不会调用preventDefault()。默认为false
  2369.      */
  2370.     on(element, eventType, selector, callback, option) {
  2371.       /**
  2372.        * 获取option配置
  2373.        * @param {any[]} args
  2374.        * @param {number} startIndex
  2375.        * @param {AddEventListenerOptions} option
  2376.        * @returns {AddEventListenerOptions}
  2377.        */
  2378.       function getOption(args, startIndex, option) {
  2379.         if (typeof args[startIndex] === "boolean") {
  2380.           option.capture = args[startIndex];
  2381.           if (typeof args[startIndex + 1] === "boolean") {
  2382.             option.once = args[startIndex + 1];
  2383.           }
  2384.           if (typeof args[startIndex + 2] === "boolean") {
  2385.             option.passive = args[startIndex + 2];
  2386.           }
  2387.         } else if (
  2388.           typeof args[startIndex] === "object" &&
  2389.           ("capture" in args[startIndex] ||
  2390.             "once" in args[startIndex] ||
  2391.             "passive" in args[startIndex])
  2392.         ) {
  2393.           option.capture = args[startIndex].capture;
  2394.           option.once = args[startIndex].once;
  2395.           option.passive = args[startIndex].passive;
  2396.         }
  2397.         return option;
  2398.       }
  2399.  
  2400.       let args = arguments;
  2401.       if (typeof element === "string") {
  2402.         element = document.querySelectorAll(element);
  2403.       }
  2404.       if (element == void 0) {
  2405.         return;
  2406.       }
  2407.       /**
  2408.        * @type {HTMLElement[]}
  2409.        */
  2410.       let elementList = [];
  2411.       if (element instanceof NodeList || Array.isArray(element)) {
  2412.         elementList = [...element];
  2413.       } else {
  2414.         elementList.push(element);
  2415.       }
  2416.       /**
  2417.        * @type {string[]}
  2418.        */
  2419.       let eventTypeList = [];
  2420.       if (Array.isArray(eventType)) {
  2421.         eventTypeList = eventTypeList.concat(eventType);
  2422.       } else if (typeof eventType === "string") {
  2423.         eventTypeList = eventTypeList.concat(eventType.split(" "));
  2424.       }
  2425.       /**
  2426.        * @type {?string}
  2427.        */
  2428.       let _selector_ = selector;
  2429.       /**
  2430.        * @type {(event:Event)=>{}}
  2431.        */
  2432.       let _callback_ = callback;
  2433.       /**
  2434.        * @type {AddEventListenerOptions}
  2435.        */
  2436.       let _option_ = {
  2437.         capture: false,
  2438.         once: false,
  2439.         passive: false,
  2440.       };
  2441.       if (typeof selector === "function") {
  2442.         /* 这是为没有selector的情况 */
  2443.         _selector_ = void 0;
  2444.         _callback_ = selector;
  2445.         _option_ = getOption(args, 3, _option_);
  2446.       } else {
  2447.         /* 这是存在selector的情况 */
  2448.         _option_ = getOption(args, 4, _option_);
  2449.       }
  2450.       /**
  2451.        * 如果是once，那么删除该监听和元素上的事件和监听
  2452.        */
  2453.       function checkOptionOnceToRemoveEventListener() {
  2454.         if (_option_.once) {
  2455.           PopsDOMUtils.off(element, eventType, selector, callback, option);
  2456.         }
  2457.       }
  2458.       elementList.forEach((elementItem) => {
  2459.         let ownCallBack = function (event) {
  2460.           let target = event.target;
  2461.           if (_selector_) {
  2462.             /* 存在自定义子元素选择器 */
  2463.             let totalParent = PopsUtils.isWin(elementItem)
  2464.               ? document.documentElement
  2465.               : elementItem;
  2466.             if (target.matches(_selector_)) {
  2467.               /* 当前目标可以被selector所匹配到 */
  2468.               _callback_.call(target, event);
  2469.               checkOptionOnceToRemoveEventListener();
  2470.               return;
  2471.             } else if (
  2472.               target.closest(_selector_) &&
  2473.               totalParent.contains(target.closest(_selector_))
  2474.             ) {
  2475.               /* 在上层与主元素之间寻找可以被selector所匹配到的 */
  2476.               let closestElement = target.closest(_selector_);
  2477.               /* event的target值不能直接修改 */
  2478.               OriginPrototype.Object.defineProperty(event, "target", {
  2479.                 get() {
  2480.                   return closestElement;
  2481.                 },
  2482.               });
  2483.               _callback_.call(closestElement, event);
  2484.               checkOptionOnceToRemoveEventListener();
  2485.               return;
  2486.             }
  2487.           } else {
  2488.             _callback_.call(elementItem, event);
  2489.             checkOptionOnceToRemoveEventListener();
  2490.           }
  2491.         };
  2492.  
  2493.         /* 遍历事件名设置元素事件 */
  2494.         eventTypeList.forEach((eventName) => {
  2495.           elementItem.addEventListener(eventName, ownCallBack, _option_);
  2496.  
  2497.           if (_callback_ && _callback_.delegate) {
  2498.             elementItem.setAttribute("data-delegate", _selector_);
  2499.           }
  2500.           /* 获取对象上的事件 */
  2501.           let elementEvents = elementItem[PopsUtils.SymbolEvents] || {};
  2502.           /* 初始化对象上的xx事件 */
  2503.           elementEvents[eventName] = elementEvents[eventName] || [];
  2504.           elementEvents[eventName].push({
  2505.             selector: _selector_,
  2506.             option: _option_,
  2507.             callback: ownCallBack,
  2508.             originCallBack: _callback_,
  2509.           });
  2510.           /* 覆盖事件 */
  2511.           elementItem[PopsUtils.SymbolEvents] = elementEvents;
  2512.         });
  2513.       });
  2514.     },
  2515.     /**
  2516.      * 取消绑定事件
  2517.      * @param {HTMLElement|string|NodeList|Array|Window} element 需要取消绑定的元素|元素数组
  2518.      * @param {DOMUtils_EventType|DOMUtils_EventType[]} eventType 需要取消监听的事件
  2519.      * @param {string|undefined} selector 子元素选择器
  2520.      * @param {((event: Event)=>void)|undefined} callback 通过DOMUtils.on绑定的事件函数
  2521.      * @param {EventListenerOptions|boolean|undefined} option
  2522.      * + capture 如果在添加事件监听器时指定了useCapture为true，则在移除事件监听器时也必须指定为true
  2523.      */
  2524.     off(element, eventType, selector, callback, option) {
  2525.       /**
  2526.        * 获取option配置
  2527.        * @param {any[]} args
  2528.        * @param {number} startIndex
  2529.        * @param {EventListenerOptions} option
  2530.        * @returns {EventListenerOptions}
  2531.        */
  2532.       function getOption(args, startIndex, option) {
  2533.         if (typeof args[startIndex] === "boolean") {
  2534.           option.capture = args[startIndex];
  2535.         } else if (
  2536.           typeof args[startIndex] === "object" &&
  2537.           "capture" in args[startIndex]
  2538.         ) {
  2539.           option.capture = args[startIndex].capture;
  2540.         }
  2541.         return option;
  2542.       }
  2543.  
  2544.       let args = arguments;
  2545.       if (typeof element === "string") {
  2546.         element = document.querySelectorAll(element);
  2547.       }
  2548.       if (element == void 0) {
  2549.         return;
  2550.       }
  2551.       /**
  2552.        * @type {HTMLElement[]}
  2553.        */
  2554.       let elementList = [];
  2555.       if (element instanceof NodeList || Array.isArray(element)) {
  2556.         elementList = [...element];
  2557.       } else {
  2558.         elementList.push(element);
  2559.       }
  2560.       /**
  2561.        * @type {string[]}
  2562.        */
  2563.       let eventTypeList = [];
  2564.       if (Array.isArray(eventType)) {
  2565.         eventTypeList = eventTypeList.concat(eventType);
  2566.       } else if (typeof eventType === "string") {
  2567.         eventTypeList = eventTypeList.concat(eventType.split(" "));
  2568.       }
  2569.       /**
  2570.        * @type {?string}
  2571.        */
  2572.       let _selector_ = selector;
  2573.       /**
  2574.        * @type {(event:Event)=>{}}
  2575.        */
  2576.       let _callback_ = callback;
  2577.  
  2578.       /**
  2579.        * @type {EventListenerOptions}
  2580.        */
  2581.       let _option_ = {
  2582.         capture: false,
  2583.       };
  2584.       if (typeof selector === "function") {
  2585.         /* 这是为没有selector的情况 */
  2586.         _selector_ = void 0;
  2587.         _callback_ = selector;
  2588.         _option_ = getOption(args, 3, _option_);
  2589.       } else {
  2590.         _option_ = getOption(args, 4, _option_);
  2591.       }
  2592.       elementList.forEach((elementItem) => {
  2593.         /* 获取对象上的事件 */
  2594.         let elementEvents = elementItem[PopsUtils.SymbolEvents] || {};
  2595.         eventTypeList.forEach((eventName) => {
  2596.           /**
  2597.            * @type {DOMUtilsEventListenerOptionsAttribute[]}
  2598.            */
  2599.           let handlers = elementEvents[eventName] || [];
  2600.           if (typeof filter === "function") {
  2601.             handlers = handlers.filter(filter);
  2602.           }
  2603.           for (let index = 0; index < handlers.length; index++) {
  2604.             let handler = handlers[index];
  2605.             let flag = !1;
  2606.             if (!_selector_ || handler.selector === _selector_) {
  2607.               /* selector不为空，进行selector判断 */
  2608.               flag = !0;
  2609.             }
  2610.             if (
  2611.               !_callback_ ||
  2612.               handler.callback === _callback_ ||
  2613.               handler.originCallBack === _callback_
  2614.             ) {
  2615.               /* callback不为空，进行callback判断 */
  2616.               flag = !0;
  2617.             }
  2618.  
  2619.             if (flag) {
  2620.               elementItem.removeEventListener(
  2621.                 eventName,
  2622.                 handler.callback,
  2623.                 _option_
  2624.               );
  2625.               handlers.splice(index--, 1);
  2626.             }
  2627.           }
  2628.           if (handlers.length === 0) {
  2629.             /* 如果没有任意的handler，那么删除该属性 */
  2630.             delete elementEvents[eventType];
  2631.           }
  2632.         });
  2633.         elementItem[PopsUtils.SymbolEvents] = elementEvents;
  2634.       });
  2635.     },
  2636.     /**
  2637.      * 主动触发事件
  2638.      * @param {HTMLElement|string|NodeList|Array|Window} element 需要触发的元素|元素数组|window
  2639.      * @param {DOMUtils_EventType|DOMUtils_EventType[]} eventType 需要触发的事件
  2640.      * @param {object|undefined} details 赋予触发的Event的额外属性
  2641.      * @param {boolean} [useDispatchToTriggerEvent=true] 是否使用dispatchEvent来触发事件,默认true
  2642.      */
  2643.     trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
  2644.       if (typeof element === "string") {
  2645.         element = document.querySelector(element);
  2646.       }
  2647.       if (element == void 0) {
  2648.         return;
  2649.       }
  2650.       let elementList = [];
  2651.       if (element instanceof NodeList || Array.isArray(element)) {
  2652.         elementList = [...element];
  2653.       } else {
  2654.         elementList = [element];
  2655.       }
  2656.       let eventTypeList = [];
  2657.       if (Array.isArray(eventType)) {
  2658.         eventTypeList = eventType;
  2659.       } else if (typeof eventType === "string") {
  2660.         eventTypeList = eventType.split(" ");
  2661.       }
  2662.       elementList.forEach((elementItem) => {
  2663.         /* 获取对象上的事件 */
  2664.         let events = elementItem[PopsUtils.SymbolEvents] || {};
  2665.         eventTypeList.forEach((_eventType_) => {
  2666.           let event = new Event(_eventType_);
  2667.           if (details) {
  2668.             Object.keys(details).forEach((keyName) => {
  2669.               event[keyName] = details[keyName];
  2670.             });
  2671.           }
  2672.           if (useDispatchToTriggerEvent == false && _eventType_ in events) {
  2673.             events[_eventType_].forEach((eventsItem) => {
  2674.               eventsItem.callback(event);
  2675.             });
  2676.           } else {
  2677.             elementItem.dispatchEvent(event);
  2678.           }
  2679.         });
  2680.       });
  2681.     },
  2682.     /**
  2683.      * 实现jQuery中的$().offset();
  2684.      * @param {HTMLElement} element
  2685.      * @returns
  2686.      */
  2687.     offset(element) {
  2688.       let rect = element.getBoundingClientRect();
  2689.       let win = element.ownerDocument.defaultView;
  2690.       return {
  2691.         top: parseFloat(rect.top + win.pageYOffset),
  2692.         bottom: parseFloat(rect.bottom + win + pageYOffset),
  2693.         left: parseFloat(rect.left + win.pageXOffset),
  2694.         right: parseFloat(rect.right + win.pageXOffset),
  2695.         width: rect.width,
  2696.         height: rect.height,
  2697.       };
  2698.     },
  2699.     /**
  2700.      * 获取元素的宽度
  2701.      * @param {HTMLElement} element - 要获取宽度的元素
  2702.      * @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
  2703.      * @returns {number} - 元素的宽度，单位为像素
  2704.      */
  2705.     width(element, isShow = false) {
  2706.       if (PopsUtils.isWin(element)) {
  2707.         return window.document.documentElement.clientWidth;
  2708.       }
  2709.       if (typeof element === "string") {
  2710.         element = document.querySelector(element);
  2711.       }
  2712.       if (element == void 0) {
  2713.         return;
  2714.       }
  2715.       if (element.nodeType === 9) {
  2716.         /* 文档节点 */
  2717.         return Math.max(
  2718.           element.body.scrollWidth,
  2719.           element.documentElement.scrollWidth,
  2720.           element.body.offsetWidth,
  2721.           element.documentElement.offsetWidth,
  2722.           element.documentElement.clientWidth
  2723.         );
  2724.       }
  2725.       if (isShow || PopsUtils.isShow(element)) {
  2726.         /* 已显示 */
  2727.         /* 不从style中获取对应的宽度，因为可能使用了class定义了width !important */
  2728.  
  2729.         /* 如果element.style.width为空  则从css里面获取是否定义了width信息如果定义了 则读取css里面定义的宽度width */
  2730.         if (parseFloat(PopsUtils.getStyleValue(element, "width")) > 0) {
  2731.           return parseFloat(PopsUtils.getStyleValue(element, "width"));
  2732.         }
  2733.  
  2734.         /* 如果从css里获取到的值不是大于0  可能是auto 则通过offsetWidth来进行计算 */
  2735.         if (element.offsetWidth > 0) {
  2736.           let borderLeftWidth = PopsUtils.getStyleValue(
  2737.             element,
  2738.             "borderLeftWidth"
  2739.           );
  2740.           let borderRightWidth = PopsUtils.getStyleValue(
  2741.             element,
  2742.             "borderRightWidth"
  2743.           );
  2744.           let paddingLeft = PopsUtils.getStyleValue(element, "paddingLeft");
  2745.           let paddingRight = PopsUtils.getStyleValue(element, "paddingRight");
  2746.           let backHeight =
  2747.             parseFloat(element.offsetWidth) -
  2748.             parseFloat(borderLeftWidth) -
  2749.             parseFloat(borderRightWidth) -
  2750.             parseFloat(paddingLeft) -
  2751.             parseFloat(paddingRight);
  2752.           return parseFloat(backHeight);
  2753.         }
  2754.         return 0;
  2755.       } else {
  2756.         /* 未显示 */
  2757.         let { recovery } = PopsUtils.showElement(element);
  2758.         let width = PopsDOMUtils.width(element, true);
  2759.         recovery();
  2760.         return width;
  2761.       }
  2762.     },
  2763.     /**
  2764.      * 获取元素的高度
  2765.      * @param {HTMLElement} element - 要获取高度的元素
  2766.      * @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
  2767.      * @returns {number} - 元素的高度，单位为像素
  2768.      */
  2769.     height(element, isShow = false) {
  2770.       if (PopsUtils.isWin(element)) {
  2771.         return window.document.documentElement.clientHeight;
  2772.       }
  2773.       if (typeof element === "string") {
  2774.         element = document.querySelector(element);
  2775.       }
  2776.       if (element == void 0) {
  2777.         return;
  2778.       }
  2779.       if (element.nodeType === 9) {
  2780.         /* 文档节点 */
  2781.         return Math.max(
  2782.           element.body.scrollHeight,
  2783.           element.documentElement.scrollHeight,
  2784.           element.body.offsetHeight,
  2785.           element.documentElement.offsetHeight,
  2786.           element.documentElement.clientHeight
  2787.         );
  2788.       }
  2789.       if (isShow || PopsUtils.isShow(element)) {
  2790.         /* 已显示 */
  2791.         /* 从style中获取对应的高度，因为可能使用了class定义了width !important */
  2792.         /* 如果element.style.height为空  则从css里面获取是否定义了height信息如果定义了 则读取css里面定义的高度height */
  2793.         if (parseFloat(PopsUtils.getStyleValue(element, "height")) > 0) {
  2794.           return parseFloat(PopsUtils.getStyleValue(element, "height"));
  2795.         }
  2796.  
  2797.         /* 如果从css里获取到的值不是大于0  可能是auto 则通过offsetHeight来进行计算 */
  2798.         if (element.offsetHeight > 0) {
  2799.           let borderTopWidth = PopsUtils.getStyleValue(
  2800.             element,
  2801.             "borderTopWidth"
  2802.           );
  2803.           let borderBottomWidth = PopsUtils.getStyleValue(
  2804.             element,
  2805.             "borderBottomWidth"
  2806.           );
  2807.           let paddingTop = PopsUtils.getStyleValue(element, "paddingTop");
  2808.           let paddingBottom = PopsUtils.getStyleValue(element, "paddingBottom");
  2809.           let backHeight =
  2810.             parseFloat(element.offsetHeight) -
  2811.             parseFloat(borderTopWidth) -
  2812.             parseFloat(borderBottomWidth) -
  2813.             parseFloat(paddingTop) -
  2814.             parseFloat(paddingBottom);
  2815.           return parseFloat(backHeight);
  2816.         }
  2817.         return 0;
  2818.       } else {
  2819.         /* 未显示 */
  2820.         let { recovery } = PopsUtils.showElement(element);
  2821.         let height = PopsDOMUtils.height(element, true);
  2822.         recovery();
  2823.         return height;
  2824.       }
  2825.     },
  2826.     /**
  2827.      * 获取元素的外部宽度（包括边框和外边距）
  2828.      * @param {HTMLElement} element - 要获取外部宽度的元素
  2829.      * @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
  2830.      * @returns {number} - 元素的外部宽度，单位为像素
  2831.      */
  2832.     outerWidth(element, isShow = false) {
  2833.       if (PopsUtils.isWin(element)) {
  2834.         return window.innerWidth;
  2835.       }
  2836.       if (typeof element === "string") {
  2837.         element = document.querySelector(element);
  2838.       }
  2839.       if (element == void 0) {
  2840.         return;
  2841.       }
  2842.       if (isShow || PopsUtils.isShow(element)) {
  2843.         let style = getComputedStyle(element, null);
  2844.         let marginLeft = PopsUtils.getStyleValue(style, "marginLeft");
  2845.         let marginRight = PopsUtils.getStyleValue(style, "marginRight");
  2846.         return element.offsetWidth + marginLeft + marginRight;
  2847.       } else {
  2848.         let { recovery } = PopsUtils.showElement(element);
  2849.         let outerWidth = PopsDOMUtils.outerWidth(element, true);
  2850.         recovery();
  2851.         return outerWidth;
  2852.       }
  2853.     },
  2854.     /**
  2855.      * 获取元素的外部高度（包括边框和外边距）
  2856.      * @param {HTMLElement} element - 要获取外部高度的元素
  2857.      * @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
  2858.      * @returns {number} - 元素的外部高度，单位为像素
  2859.      */
  2860.     outerHeight(element, isShow = false) {
  2861.       if (PopsUtils.isWin(element)) {
  2862.         return window.innerHeight;
  2863.       }
  2864.       if (typeof element === "string") {
  2865.         element = document.querySelector(element);
  2866.       }
  2867.       if (element == void 0) {
  2868.         return;
  2869.       }
  2870.       if (isShow || PopsUtils.isShow(element)) {
  2871.         let style = getComputedStyle(element, null);
  2872.         let marginTop = PopsUtils.getStyleValue(style, "marginTop");
  2873.         let marginBottom = PopsUtils.getStyleValue(style, "marginBottom");
  2874.         return element.offsetHeight + marginTop + marginBottom;
  2875.       } else {
  2876.         let { recovery } = PopsUtils.showElement(element);
  2877.         let outerHeight = PopsDOMUtils.outerHeight(element, true);
  2878.         recovery();
  2879.         return outerHeight;
  2880.       }
  2881.     },
  2882.     /**
  2883.      * 添加className
  2884.      * @param {HTMLElement} element 目标元素
  2885.      * @param {string} className className属性
  2886.      */
  2887.     addClassName(element, className) {
  2888.       if (typeof className !== "string") {
  2889.         return;
  2890.       }
  2891.       if (className.trim() === "") {
  2892.         return;
  2893.       }
  2894.       element.classList.add(className);
  2895.     },
  2896.     /**
  2897.      * 删除className
  2898.      * @param {HTMLElement} element 目标元素
  2899.      * @param {string} className className属性
  2900.      */
  2901.     removeClassName(element, className) {
  2902.       if (typeof className !== "string") {
  2903.         return;
  2904.       }
  2905.       if (className.trim() === "") {
  2906.         return;
  2907.       }
  2908.       element.classList.remove(className);
  2909.     },
  2910.     /**
  2911.      * 判断元素是否包含某个className
  2912.      * @param {HTMLElement} element 目标元素
  2913.      * @param {string} className className属性
  2914.      */
  2915.     containsClassName(element, className) {
  2916.       if (typeof className !== "string") {
  2917.         return;
  2918.       }
  2919.       if (className.trim() === "") {
  2920.         return;
  2921.       }
  2922.       return element.classList.contains(className);
  2923.     },
  2924.     /**
  2925.      * 获取或设置元素的样式属性值
  2926.      * @param {HTMLElement|string} element 目标元素
  2927.      * @param {CSSStyleDeclaration|string} property 样式属性名或包含多个属性名和属性值的对象
  2928.      * @param {any} [value] 样式属性值（可选）
  2929.      * @returns {?string} 如果传入了value，则返回undefined；否则返回样式属性值
  2930.      **/
  2931.     css(element, property, value) {
  2932.       /**
  2933.        * 把纯数字没有px的加上
  2934.        */
  2935.       function handlePixe(propertyName, propertyValue) {
  2936.         let allowAddPixe = [
  2937.           "width",
  2938.           "height",
  2939.           "top",
  2940.           "left",
  2941.           "right",
  2942.           "bottom",
  2943.           "font-size",
  2944.         ];
  2945.         if (typeof propertyValue === "number") {
  2946.           propertyValue = propertyValue.toString();
  2947.         }
  2948.         if (
  2949.           typeof propertyValue === "string" &&
  2950.           allowAddPixe.includes(propertyName) &&
  2951.           propertyValue.match(/[0-9]$/gi)
  2952.         ) {
  2953.           propertyValue = propertyValue + "px";
  2954.         }
  2955.         return propertyValue;
  2956.       }
  2957.       if (typeof element === "string") {
  2958.         element = document.querySelector(element);
  2959.       }
  2960.       if (element == void 0) {
  2961.         return;
  2962.       }
  2963.       if (typeof property === "string") {
  2964.         if (value === void 0) {
  2965.           return getComputedStyle(element).getPropertyValue(property);
  2966.         } else {
  2967.           if (value === "string" && value.includes("!important")) {
  2968.             element.style.setProperty(property, value, "important");
  2969.           } else {
  2970.             value = handlePixe(property, value);
  2971.             element.style.setProperty(property, value);
  2972.           }
  2973.         }
  2974.       } else if (typeof property === "object") {
  2975.         for (let prop in property) {
  2976.           if (
  2977.             typeof property[prop] === "string" &&
  2978.             property[prop].includes("!important")
  2979.           ) {
  2980.             element.style.setProperty(prop, property[prop], "important");
  2981.           } else {
  2982.             property[prop] = handlePixe(prop, property[prop]);
  2983.             element.style.setProperty(prop, property[prop]);
  2984.           }
  2985.         }
  2986.       }
  2987.     },
  2988.     /**
  2989.      * 创建元素
  2990.      * @param {keyof HTMLElementTagNameMap} tagName 元素类型
  2991.      * @param {HTMLElement|undefined} property 元素属性，对已有元素上的属性或者自定义的属性赋值
  2992.      * @param {object|undefined} attributes 元素自定义属性，通过setAttribute赋值
  2993.      * @returns {HTMLElement}
  2994.      */
  2995.     createElement(tagName, property, attributes) {
  2996.       let tempElement = document.createElement(tagName);
  2997.       if (typeof property === "string") {
  2998.         tempElement.innerHTML = property;
  2999.         return tempElement;
  3000.       }
  3001.       if (property == void 0) {
  3002.         property = {};
  3003.       }
  3004.       if (attributes == void 0) {
  3005.         attributes = {};
  3006.       }
  3007.       Object.keys(property).forEach((key) => {
  3008.         let value = property[key];
  3009.         tempElement[key] = value;
  3010.       });
  3011.       Object.keys(attributes).forEach((key) => {
  3012.         let value = attributes[key];
  3013.         if (typeof value === "object") {
  3014.           /* object转字符串 */
  3015.           value = JSON.stringify(value);
  3016.         } else if (typeof value === "function") {
  3017.           /* function转字符串 */
  3018.           value = value.toString();
  3019.         }
  3020.         tempElement.setAttribute(key, value);
  3021.       });
  3022.       return tempElement;
  3023.     },
  3024.   };
  3025.  
  3026.   /** 弹窗 */
  3027.   const pops = {};
  3028.  
  3029.   /** 配置 */
  3030.   pops.config = {
  3031.     /** 版本号 */
  3032.     version: "2024.3.21",
  3033.     cssText: {
  3034.       /** 主CSS */
  3035.       index: `@charset "utf-8";
  3036.       * {
  3037.         -webkit-box-sizing: border-box;
  3038.         box-sizing: border-box;
  3039.         margin: 0;
  3040.         padding: 0;
  3041.         -webkit-tap-highlight-color: transparent;
  3042.         /* 代替::-webkit-scrollbar */
  3043.         scrollbar-width: thin;
  3044.       }
  3045.       .pops{
  3046.         --pops-bg-opacity: 1;
  3047.         --pops-bd-opacity: 1;
  3048.       }
  3049.       .pops-mask{
  3050.         --pops-mask-bg-opacity: 0.4;
  3051.       }
  3052.       .pops {
  3053.         background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  3054.         border-radius: 4px;
  3055.         border: 1px solid rgb(235, 238, 245, var(--pops-bd-opacity));
  3056.         font-size: 18px;
  3057.         box-shadow: 0 0 12px rgba(0,0,0,.12);
  3058.         box-sizing: border-box;
  3059.         overflow: hidden;
  3060.         transition: all .35s
  3061.       }
  3062.       .pops-anim{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;}
  3063.       .pops-anim[anim=""]{top:unset;right:unset;bottom:unset;left:unset;width:unset;height:unset;transition:none;}
  3064.       /* 底部图标动画和样式 */
  3065.       .pops i.pops-bottom-icon[is-loading="true"]{animation: rotating 2s linear infinite;}
  3066.       .pops i.pops-bottom-icon{height:1em;width:1em;line-height:1em;display:inline-flex;justify-content:center;align-items:center;position:relative;fill:currentColor;color:inherit;font-size:inherit}
  3067.     
  3068.       /* 遮罩层样式 */
  3069.       .pops-mask{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;border-radius:0;background-color:rgba(0,0,0,var(--pops-mask-bg-opacity));box-shadow:none;transition:none;}
  3070.     
  3071.     
  3072.       .pops-header-controls button.pops-header-control[type][data-header]{
  3073.         float: right;
  3074.         margin: 0 0;
  3075.         outline: 0;
  3076.         border: 0;
  3077.         border-color: rgb(136, 136, 136, var(--pops-bd-opacity));
  3078.         background-color: transparent;
  3079.         color: #888;
  3080.         cursor: pointer;
  3081.       }
  3082.       .pops-header-controls button.pops-header-control[type=max],
  3083.       .pops-header-controls button.pops-header-control[type=mise],
  3084.       .pops-header-controls button.pops-header-control[type=min]{position:relative;float:right;margin:0 2px;outline:0!important;border:0;border-color:rgb(136, 136, 136, var(--pops-bd-opacity));background-color:transparent;color:rgb(136, 136, 136);cursor:pointer;transition:all .3s ease-in-out;}
  3085.       button.pops-header-control i{color:rgb(144, 147, 153);font-size:inherit;display:inline-flex;justify-content:center;align-items:center;position:relative;fill:currentColor}
  3086.       button.pops-header-control svg{height:1.25rem;width:1.25rem}
  3087.       button.pops-header-control{right:15px;padding:0;border:none;outline:0;background:0 0;cursor:pointer;position:unset;line-height:1.15;font-size:16px}
  3088.       button.pops-header-control i:hover{color:rgb(64, 158, 255)}
  3089.       .pops-header-controls[data-margin] button.pops-header-control{margin:0 6px}
  3090.       .pops[type-value] .pops-header-controls{display: flex;}
  3091.       `,
  3092.       /** 九宫格位置CSS */
  3093.       ninePalaceGridPosition: `
  3094.       .pops[position=top_left]{position:fixed;top:0;left:0;}
  3095.       .pops[position=top]{position:fixed;top:0;left:50%;transform:translateX(-50%);}
  3096.       .pops[position=top_right]{position:fixed;top:0;right:0;}
  3097.       .pops[position=center_left]{position:fixed;top:50%;left:0;transform:translateY(-50%);}
  3098.       .pops[position=center]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);}
  3099.       .pops[position=center_right]{position:fixed;top:50%;right:0;transform:translateY(-50%);}
  3100.       .pops[position=bottom_left]{position:fixed;bottom:0;left:0;}
  3101.       .pops[position=bottom]{position:fixed;bottom:0;left:50%;transform:translate(-50%,0);}
  3102.       .pops[position=bottom_right]{position:fixed;right:0;bottom:0;}
  3103.       
  3104.       `,
  3105.       /** 滚动条CSS */
  3106.       scrollbar: `
  3107.       /* firefox上暂不支持::-webkit-scrollbar */
  3108.       .pops ::-webkit-scrollbar{
  3109.         width:6px;
  3110.         height:0;
  3111.       }
  3112.  
  3113.       .pops ::-webkit-scrollbar-track{
  3114.         width:0;
  3115.       }
  3116.       .pops ::-webkit-scrollbar-thumb:hover{
  3117.         background: rgb(178, 178, 178, var(--pops-bg-opacity));
  3118.       }
  3119.       .pops ::-webkit-scrollbar-thumb{
  3120.         min-height: 28px;
  3121.         border-radius: 2em;
  3122.         background: rgb(204, 204, 204, var(--pops-bg-opacity));
  3123.         background-clip: padding-box;
  3124.       }
  3125.       `,
  3126.       /** 按钮CSS */
  3127.       button: `
  3128.       .pops {
  3129.         --button-font-size: 14px;
  3130.         --button-height: 32px;
  3131.         --button-color: rgb(51, 51, 51);
  3132.         --button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));
  3133.         --button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));
  3134.         --button-margin-top: 0px;
  3135.         --button-margin-bottom: 0px;
  3136.         --button-margin-left: 5px;
  3137.         --button-margin-right: 5px;
  3138.         --button-padding-top: 6px;
  3139.         --button-padding-bottom: 6px;
  3140.         --button-padding-left: 12px;
  3141.         --button-padding-right: 12px;
  3142.         --button-radius: 4px;
  3143.     
  3144.         --container-title-height: 55px;
  3145.         --container-bottom-btn-height: 55px;
  3146.       }
  3147.       .pops[data-bottom-btn="false"]{
  3148.         --container-bottom-btn-height: 0px;
  3149.       }
  3150.       .pops button {
  3151.         white-space: nowrap;
  3152.         float: right;
  3153.         display: inline-block;
  3154.         margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left);
  3155.         padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);
  3156.         outline: 0;
  3157.       }
  3158.       .pops button {
  3159.         border-radius: var(--button-radius);
  3160.         box-shadow: none;
  3161.         font-weight: 400;
  3162.         font-size: var(--button-font-size);
  3163.         cursor: pointer;
  3164.         transition: all .3s ease-in-out;
  3165.       }
  3166.       .pops button {
  3167.         display: flex;
  3168.         align-items: center;
  3169.         height: var(--button-height);
  3170.         line-height: 1;
  3171.         box-sizing: border-box;
  3172.         user-select: none;
  3173.         -webkit-user-select: none;
  3174.         -moz-user-select: none;
  3175.         -ms-user-select: none;
  3176.         border: 1px solid var(--button-bd-color);
  3177.       }
  3178.       .pops button {
  3179.         color: var(--button-color);
  3180.         border-color: var(--button-bd-color);
  3181.         background-color: var(--button-bg-color);
  3182.       }
  3183.       .pops button:active{
  3184.         color: var(--button-color);
  3185.         border-color: var(--button-bd-color);
  3186.         background-color: var(--button-bg-color);
  3187.         outline: 0;
  3188.       }
  3189.       .pops button:hover{
  3190.         color: var(--button-color);
  3191.         border-color: var(--button-bd-color);
  3192.         background-color: var(--button-bg-color);
  3193.       }
  3194.       .pops button:focus-visible{
  3195.         color: var(--button-color);
  3196.         border-color: var(--button-bd-color);
  3197.         background-color: var(--button-bg-color);
  3198.       }
  3199.       .pops button:disabled {
  3200.         cursor: not-allowed;
  3201.         color: var(--button-color);
  3202.         border-color: var(--button-bd-color);
  3203.         background-color: var(--button-bg-color);
  3204.       }
  3205.       .pops button.pops-button-large {
  3206.         --button-height: 32px;
  3207.         --button-padding-top: 12px;
  3208.         --button-padding-bottom: 12px;
  3209.         --button-padding-left: 19px;
  3210.         --button-padding-right: 19px;
  3211.         --button-font-size: 14px;
  3212.         --button-border-radius: 4px;
  3213.       }
  3214.       
  3215.       .pops button.pops-button-small {
  3216.         --button-height: 24px;
  3217.         --button-padding-top: 5px;
  3218.         --button-padding-bottom: 5px;
  3219.         --button-padding-left: 11px;
  3220.         --button-padding-right: 11px;
  3221.         --button-font-size: 12px;
  3222.         --button-border-radius: 4px;
  3223.       }
  3224.       .pops-panel-button-no-icon .pops-panel-button_inner i{
  3225.         display: none;
  3226.       }
  3227.       .pops-panel-button-right-icon{
  3228.         
  3229.       }
  3230.       .pops-panel-button-right-icon .pops-panel-button_inner{
  3231.         flex-direction: row-reverse;
  3232.       }
  3233.       .pops-panel-button-right-icon .pops-panel-button_inner i{
  3234.     
  3235.       }
  3236.       .pops-panel-button .pops-panel-button_inner i:has(svg),
  3237.       .pops-panel-button-right-icon .pops-panel-button-text{
  3238.         margin-right: 6px;
  3239.       }
  3240.     
  3241.         
  3242.       .pops button[type=default]{--button-color:#333333;--button-bd-color:#dcdfe6;--button-bg-color:#ffffff;}
  3243.       .pops button[type=default]:active{--button-color:#409eff;--button-bd-color:#409eff;--button-bg-color:#ecf5ff;}
  3244.       .pops button[type=default]:hover{--button-color:#409eff;--button-bd-color:#c6e2ff;--button-bg-color:#ecf5ff;}
  3245.       .pops button[type=default]:focus-visible{outline:2px solid #a0cfff;outline-offset:1px;}
  3246.       .pops button[type=default]:disabled{--button-color:#a8abb2;--button-bd-color:#fff;--button-bg-color:#e4e7ed;}
  3247.     
  3248.       .pops button[type=primary]{--button-color:#ffffff;--button-bd-color:#409eff;--button-bg-color:#409eff;}
  3249.       .pops button[type=primary]:active{--button-color:#ffffff;--button-bd-color:#337ecc;--button-bg-color:#337ecc;}
  3250.       .pops button[type=primary]:hover{--button-color:#ffffff;--button-bd-color:#79bbff;--button-bg-color:#79bbff;}
  3251.       .pops button[type=primary]:focus-visible{outline:2px solid #a0cfff;outline-offset:1px;}
  3252.       .pops button[type=primary]:disabled{--button-color:#ffffff;--button-bd-color:#a0cfff;--button-bg-color:#a0cfff;}
  3253.       
  3254.       .pops button[type=success]{--button-color:#ffffff;--button-bd-color:#4cae4c;--button-bg-color:#5cb85c;}
  3255.       .pops button[type=success]:active{--button-color:#ffffff;--button-bd-color:#529b2e;--button-bg-color:#529b2e;}
  3256.       .pops button[type=success]:hover{--button-color:#ffffff;--button-bd-color:#95d475;--button-bg-color:#95d475;}
  3257.       .pops button[type=success]:focus-visible{outline:2px solid #b3e19d;outline-offset:1px;}
  3258.       .pops button[type=success]:disabled{--button-color:#ffffff;--button-bd-color:#b3e19d;--button-bg-color:#b3e19d;}
  3259.       
  3260.       .pops button[type=info]{--button-color:#ffffff;--button-bd-color:#909399;--button-bg-color:#909399;}
  3261.       .pops button[type=info]:active{--button-color:#ffffff;--button-bd-color:#73767a;--button-bg-color:#73767a;}
  3262.       .pops button[type=info]:hover{--button-color:#ffffff;--button-bd-color:#b1b3b8;--button-bg-color:#b1b3b8;}
  3263.       .pops button[type=info]:focus-visible{outline:2px solid #c8c9cc;outline-offset:1px;}
  3264.       .pops button[type=info]:disabled{--button-color:#ffffff;--button-bd-color:#c8c9cc;--button-bg-color:#c8c9cc;}
  3265.       
  3266.       .pops button[type=warning]{--button-color:#ffffff;--button-bd-color:#e6a23c;--button-bg-color:#e6a23c;}
  3267.       .pops button[type=warning]:active{--button-color:#ffffff;--button-bd-color:#b88230;--button-bg-color:#b88230;}
  3268.       .pops button[type=warning]:hover{--button-color:#ffffff;--button-bd-color:#eebe77;--button-bg-color:#eebe77;}
  3269.       .pops button[type=warning]:focus-visible{outline:2px solid #f3d19e;outline-offset:1px;}
  3270.       .pops button[type=warning]:disabled{--button-color:#ffffff;--button-bd-color:#f3d19e;--button-bg-color:#f3d19e;}
  3271.       
  3272.       .pops button[type=danger]{--button-color:#ffffff;--button-bd-color:#f56c6c;--button-bg-color:#f56c6c;}
  3273.       .pops button[type=danger]:active{--button-color:#ffffff;--button-bd-color:#c45656;--button-bg-color:#c45656;}
  3274.       .pops button[type=danger]:hover{--button-color:#ffffff;--button-bd-color:#f89898;--button-bg-color:#f89898;}
  3275.       .pops button[type=danger]:focus-visible{outline:2px solid #fab6b6;outline-offset:1px;}
  3276.       .pops button[type=danger]:disabled{--button-color:#ffffff;--button-bd-color:#fab6b6;--button-bg-color:#fab6b6;}
  3277.       
  3278.       .pops button[type=xiaomi-primary]{--button-color:#ffffff;--button-bd-color:#ff5c00;--button-bg-color:#ff5c00;}
  3279.       .pops button[type=xiaomi-primary]:active{--button-color:#ffffff;--button-bd-color:#da4f00;--button-bg-color:#da4f00;}
  3280.       .pops button[type=xiaomi-primary]:hover{--button-color:#ffffff;--button-bd-color:#ff7e29;--button-bg-color:#ff7e29;}
  3281.       .pops button[type=xiaomi-primary]:focus-visible{outline:2px solid #fab6b6;outline-offset:1px;}
  3282.       .pops button[type=xiaomi-primary]:disabled{--button-color:#ffffff;--button-bd-color:#fad5b6;--button-bg-color:#fad5b6;}
  3283.     
  3284.       `,
  3285.       /** 通用的CSS */
  3286.       common: `
  3287.       .pops-flex-items-center{display: flex;align-items: center;}
  3288.       .pops-flex-y-center{display: flex;justify-content: space-between;}
  3289.       .pops-flex-x-center{display: flex;align-content: center;}
  3290.       .pops-hide {display: none;}
  3291.       .pops-hide-important {display: none !important;}
  3292.       .pops-no-border{border: 0;}
  3293.       .pops-no-border-important{border: 0;}
  3294.       `,
  3295.       /** 动画 */
  3296.       anim: `
  3297.       @keyframes rotating{0%{transform:rotate(0)}
  3298.       to{transform:rotate(360deg)}
  3299.       }
  3300.       @keyframes iframeLoadingChange_85{0%{background:linear-gradient(to right,#4995dd,#fff,rgb(202 224 246));}
  3301.       20%{background:linear-gradient(to right,#4995dd,#ead0d0,rgb(123 185 246));}
  3302.       40%{background:linear-gradient(to right,#4995dd,#f4b7b7,rgb(112 178 244));}
  3303.       60%{background:linear-gradient(to right,#4995dd,#ec9393,rgb(80 163 246));}
  3304.       80%{background:linear-gradient(to right,#4995dd,#e87f7f,rgb(25 139 253));}
  3305.       100%{background:linear-gradient(to right,#4995dd,#ee2c2c,rgb(0 124 247));}
  3306.       from{width:75%;}
  3307.       to{width:100%;}
  3308.       }
  3309.       @keyframes iframeLoadingChange{0%{background:linear-gradient(to right,#4995dd,#fff,rgb(202 224 246));}
  3310.       20%{background:linear-gradient(to right,#4995dd,#ead0d0,rgb(123 185 246));}
  3311.       40%{background:linear-gradient(to right,#4995dd,#f4b7b7,rgb(112 178 244));}
  3312.       60%{background:linear-gradient(to right,#4995dd,#ec9393,rgb(80 163 246));}
  3313.       80%{background:linear-gradient(to right,#4995dd,#e87f7f,rgb(25 139 253));}
  3314.       100%{background:linear-gradient(to right,#4995dd,#ee2c2c,rgb(0 124 247));}
  3315.       from{width:0;}
  3316.       to{width:75%;}
  3317.       }
  3318.       @keyframes pops-anim-wait-rotate{form{transform:rotate(0);}
  3319.       to{transform:rotate(360deg);}
  3320.       }
  3321.       @keyframes pops-anim-spread{0%{opacity:0;transform:scaleX(0);}
  3322.       100%{opacity:1;transform:scaleX(1);}
  3323.       }
  3324.       @keyframes pops-anim-shake{0%,100%{transform:translateX(0);}
  3325.       10%,30%,50%,70%,90%{transform:translateX(-10px);}
  3326.       20%,40%,60%,80%{transform:translateX(10px);}
  3327.       }
  3328.       @keyframes pops-anim-rolling-left{0%{opacity:0;transform:translateX(-100%) rotate(-120deg);}
  3329.       100%{opacity:1;transform:translateX(0) rotate(0);}
  3330.       }
  3331.       @keyframes pops-anim-rolling-right{0%{opacity:0;transform:translateX(100%) rotate(120deg);}
  3332.       100%{opacity:1;transform:translateX(0) rotate(0);}
  3333.       }
  3334.       @keyframes pops-anim-slide-top{0%{opacity:0;transform:translateY(-200%);}
  3335.       100%{opacity:1;transform:translateY(0);}
  3336.       }
  3337.       @keyframes pops-anim-slide-bottom{0%{opacity:0;transform:translateY(200%);}
  3338.       100%{opacity:1;transform:translateY(0);}
  3339.       }
  3340.       @keyframes pops-anim-slide-left{0%{opacity:0;transform:translateX(-200%);}
  3341.       100%{opacity:1;transform:translateX(0);}
  3342.       }
  3343.       @keyframes pops-anim-slide-right{0%{transform:translateX(200%);}
  3344.       100%{opacity:1;transform:translateX(0);}
  3345.       }
  3346.       @keyframes pops-anim-fadein{0%{opacity:0;}
  3347.       100%{opacity:1;}
  3348.       }
  3349.       @keyframes pops-anim-fadein-zoom{0%{opacity:0;transform:scale(.5);}
  3350.       100%{opacity:1;transform:scale(1);}
  3351.       }
  3352.       @keyframes pops-anim-fadein-alert{0%{transform:scale(.5);}
  3353.       45%{transform:scale(1.05);}
  3354.       80%{transform:scale(.95);}
  3355.       100%{transform:scale(1);}
  3356.       }
  3357.       @keyframes pops-anim-don{0%{opacity:0;transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1);}
  3358.       2.08333%{transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1);}
  3359.       4.16667%{transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1);}
  3360.       6.25%{transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1);}
  3361.       8.33333%{transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3362.       10.4167%{transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1);}
  3363.       12.5%{transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1);}
  3364.       14.5833%{transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1);}
  3365.       16.6667%{transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1);}
  3366.       18.75%{transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1);}
  3367.       20.8333%{transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1);}
  3368.       22.9167%{transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1);}
  3369.       25%{transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3370.       27.0833%{transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1);}
  3371.       29.1667%{transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1);}
  3372.       31.25%{transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1);}
  3373.       33.3333%{transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1);}
  3374.       35.4167%{transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1);}
  3375.       37.5%{transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1);}
  3376.       39.5833%{transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1);}
  3377.       41.6667%{transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3378.       43.75%{transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1);}
  3379.       45.8333%{transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1);}
  3380.       47.9167%{transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1);}
  3381.       50%{opacity:1;transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1);}
  3382.       52.0833%{transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1);}
  3383.       54.1667%{transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1);}
  3384.       56.25%{transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1);}
  3385.       58.3333%{transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3386.       60.4167%{transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1);}
  3387.       62.5%{transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1);}
  3388.       64.5833%{transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1);}
  3389.       66.6667%{transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1);}
  3390.       68.75%{transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1);}
  3391.       70.8333%{transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1);}
  3392.       72.9167%{transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1);}
  3393.       75%{transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3394.       77.0833%{transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1);}
  3395.       79.1667%{transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1);}
  3396.       81.25%{transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1);}
  3397.       83.3333%{transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1);}
  3398.       85.4167%{transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1);}
  3399.       87.5%{transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1);}
  3400.       89.5833%{transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1);}
  3401.       91.6667%{transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3402.       93.75%{transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1);}
  3403.       95.8333%{transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1);}
  3404.       97.9167%{transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1);}
  3405.       100%{opacity:1;transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3406.       }
  3407.       @keyframes pops-anim-roll{0%{transform:perspective(1000px) rotate3d(1,0,0,90deg);}
  3408.       100%{transform:perspective(1000px) rotate3d(1,0,0,0deg);}
  3409.       }
  3410.       @keyframes pops-anim-sandra{0%{opacity:0;transform:scale3d(1.1,1.1,1);}
  3411.       100%{opacity:1;transform:scale3d(1,1,1);}
  3412.       }
  3413.       @keyframes pops-anim-gather{0%{opacity:0;transform:scale(5,0);}
  3414.       100%{opacity:1;transform:scale(1,1);}
  3415.       }
  3416.       @keyframes pops-anim-spread-reverse{0%{opacity:1;transform:scaleX(1);}
  3417.       100%{opacity:0;transform:scaleX(0);}
  3418.       }
  3419.       @keyframes pops-anim-shake-reverse{0%,100%{transform:translateX(10px);}
  3420.       10%,30%,50%,70%,90%{transform:translateX(-10px);}
  3421.       20%,40%,60%,80%{transform:translateX(0);}
  3422.       }
  3423.       @keyframes pops-anim-rolling-left-reverse{0%{opacity:1;transform:translateX(0) rotate(0);}
  3424.       100%{opacity:0;transform:translateX(-100%) rotate(-120deg);}
  3425.       }
  3426.       @keyframes pops-anim-rolling-right-reverse{0%{opacity:1;transform:translateX(0) rotate(0);}
  3427.       100%{opacity:0;transform:translateX(100%) rotate(120deg);}
  3428.       }
  3429.       @keyframes pops-anim-slide-top-reverse{0%{opacity:1;transform:translateY(0);}
  3430.       100%{opacity:0;transform:translateY(-200%);}
  3431.       }
  3432.       @keyframes pops-anim-slide-bottom-reverse{0%{opacity:1;transform:translateY(0);}
  3433.       100%{opacity:0;transform:translateY(200%);}
  3434.       }
  3435.       @keyframes pops-anim-slide-left-reverse{0%{opacity:1;transform:translateX(0);}
  3436.       100%{opacity:0;transform:translateX(-200%);}
  3437.       }
  3438.       @keyframes pops-anim-slide-right-reverse{0%{opacity:1;transform:translateX(0);}
  3439.       100%{transform:translateX(200%);}
  3440.       }
  3441.       @keyframes pops-anim-fadein-reverse{0%{opacity:1;}
  3442.       100%{opacity:0;}
  3443.       }
  3444.       @keyframes pops-anim-fadein-zoom-reverse{0%{opacity:1;transform:scale(1);}
  3445.       100%{opacity:0;transform:scale(.5);}
  3446.       }
  3447.       @keyframes pops-anim-fadein-alert-reverse{0%{transform:scale(1);}
  3448.       45%{transform:scale(.95);}
  3449.       80%{transform:scale(1.05);}
  3450.       100%{transform:scale(.5);}
  3451.       }
  3452.       @keyframes pops-anim-don-reverse{100%{opacity:0;transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1);}
  3453.       97.9167%{transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1);}
  3454.       95.8333%{transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1);}
  3455.       93.75%{transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1);}
  3456.       91.6667%{transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3457.       89.5833%{transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1);}
  3458.       87.5%{transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1);}
  3459.       85.4167%{transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1);}
  3460.       83.3333%{transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1);}
  3461.       81.25%{transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1);}
  3462.       79.1667%{transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1);}
  3463.       77.0833%{transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1);}
  3464.       75%{transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3465.       72.9167%{transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1);}
  3466.       70.8333%{transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1);}
  3467.       68.75%{transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1);}
  3468.       66.6667%{transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1);}
  3469.       64.5833%{transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1);}
  3470.       62.5%{transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1);}
  3471.       60.4167%{transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1);}
  3472.       58.3333%{transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3473.       56.25%{transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1);}
  3474.       54.1667%{transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1);}
  3475.       52.0833%{transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1);}
  3476.       50%{opacity:1;transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1);}
  3477.       47.9167%{transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1);}
  3478.       45.8333%{transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1);}
  3479.       43.75%{transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1);}
  3480.       41.6667%{transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3481.       39.5833%{transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1);}
  3482.       37.5%{transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1);}
  3483.       35.4167%{transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1);}
  3484.       33.3333%{transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1);}
  3485.       31.25%{transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1);}
  3486.       29.1667%{transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1);}
  3487.       27.0833%{transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1);}
  3488.       25%{transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3489.       22.9167%{transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1);}
  3490.       20.8333%{transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1);}
  3491.       18.75%{transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1);}
  3492.       16.6667%{transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1);}
  3493.       14.5833%{transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1);}
  3494.       12.5%{transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1);}
  3495.       10.4167%{transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1);}
  3496.       8.33333%{transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3497.       6.25%{transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1);}
  3498.       4.16667%{transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1);}
  3499.       2.08333%{transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1);}
  3500.       0%{opacity:1;transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0type=close,1);}
  3501.       }
  3502.       @keyframes pops-anim-roll-reverse{0%{transform:perspective(1000px) rotate3d(1,0,0,0deg);}
  3503.       100%{transform:perspective(1000px) rotate3d(1,0,0,90deg);}
  3504.       }
  3505.       @keyframes pops-anim-sandra-reverse{0%{opacity:1;transform:scale3d(1,1,1);}
  3506.       100%{opacity:0;transform:scale3d(1.1,1.1,1);}
  3507.       }
  3508.       @keyframes pops-anim-gather-reverse{0%{opacity:0;transform:scale(5,0);}
  3509.       100%{opacity:0;transform:scale(5,0);}
  3510.       }
  3511.   
  3512.       @-webkit-keyframes pops-motion-fadeInTop{0%{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px);}
  3513.       100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
  3514.       }
  3515.       @keyframes pops-motion-fadeInTop{0%{opacity:0;transform:translateY(-30px);-ms-transform:translateY(-30px);}
  3516.       100%{opacity:1;transform:translateX(0);-ms-transform:translateX(0);}
  3517.       }
  3518.       @-webkit-keyframes pops-motion-fadeOutTop{0%{opacity:10;-webkit-transform:translateY(0);transform:translateY(0);}
  3519.       100%{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px);}
  3520.       }
  3521.       @keyframes pops-motion-fadeOutTop{0%{opacity:1;transform:translateY(0);-ms-transform:translateY(0);}
  3522.       100%{opacity:0;transform:translateY(-30px);-ms-transform:translateY(-30px);}
  3523.       }
  3524.       @-webkit-keyframes pops-motion-fadeInBottom{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);}
  3525.       100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
  3526.       }
  3527.       @keyframes pops-motion-fadeInBottom{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);-ms-transform:translateY(20px);}
  3528.       100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-transform:translateY(0);}
  3529.       }
  3530.       @-webkit-keyframes pops-motion-fadeOutBottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
  3531.       100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);}
  3532.       }
  3533.       @keyframes pops-motion-fadeOutBottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-transform:translateY(0);}
  3534.       100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);-ms-transform:translateY(20px);}
  3535.       }
  3536.       @-webkit-keyframes pops-motion-fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px);}
  3537.       100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
  3538.       }
  3539.       @keyframes pops-motion-fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-30px);transform:translateX(-30px);-ms-transform:translateX(-30px);}
  3540.       100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-ms-transform:translateX(0);}
  3541.       }
  3542.       @-webkit-keyframes pops-motion-fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
  3543.       100%{opacity:0;-webkit-transform:translateX(-30px);transform:translateX(-30px);}
  3544.       }
  3545.       @keyframes pops-motion-fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-ms-transform:translateX(0);}
  3546.       100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px);-ms-transform:translateX(-20px);}
  3547.       }
  3548.       @-webkit-keyframes pops-motion-fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);}
  3549.       100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
  3550.       }
  3551.       @keyframes pops-motion-fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);-ms-transform:translateX(20px);}
  3552.       100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-ms-transform:translateX(0);}
  3553.       }
  3554.       @-webkit-keyframes pops-motion-fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
  3555.       100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);}
  3556.       }
  3557.       @keyframes pops-motion-fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-ms-transform:translateX(0);}
  3558.       100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);-ms-transform:translateX(20px);}
  3559.       }
  3560.  
  3561.  
  3562.       /* 动画 */
  3563.       .pops-anim[anim=pops-anim-spread]{animation:pops-anim-spread .3s;}
  3564.       .pops-anim[anim=pops-anim-shake]{animation:pops-anim-shake .3s;}
  3565.       .pops-anim[anim=pops-anim-rolling-left]{animation:pops-anim-rolling-left .3s;}
  3566.       .pops-anim[anim=pops-anim-rolling-right]{animation:pops-anim-rolling-right .3s;}
  3567.       .pops-anim[anim=pops-anim-slide-top]{animation:pops-anim-slide-top .3s;}
  3568.       .pops-anim[anim=pops-anim-slide-bottom]{animation:pops-anim-slide-bottom .3s;}
  3569.       .pops-anim[anim=pops-anim-slide-left]{animation:pops-anim-slide-left .3s;}
  3570.       .pops-anim[anim=pops-anim-slide-right]{animation:pops-anim-slide-right .3s;}
  3571.       .pops-anim[anim=pops-anim-fadein]{animation:pops-anim-fadein .3s;}
  3572.       .pops-anim[anim=pops-anim-fadein-zoom]{animation:pops-anim-fadein-zoom .3s;}
  3573.       .pops-anim[anim=pops-anim-fadein-alert]{animation:pops-anim-fadein-alert .3s;}
  3574.       .pops-anim[anim=pops-anim-don]{animation:pops-anim-don .3s;}
  3575.       .pops-anim[anim=pops-anim-roll]{animation:pops-anim-roll .3s;}
  3576.       .pops-anim[anim=pops-anim-sandra]{animation:pops-anim-sandra .3s;}
  3577.       .pops-anim[anim=pops-anim-gather]{animation:pops-anim-gather .3s;}
  3578.       .pops-anim[anim=pops-anim-spread-reverse]{animation:pops-anim-spread-reverse .3s;}
  3579.       .pops-anim[anim=pops-anim-shake-reverse]{animation:pops-anim-shake-reverse .3s;}
  3580.       .pops-anim[anim=pops-anim-rolling-left-reverse]{animation:pops-anim-rolling-left-reverse .3s;}
  3581.       .pops-anim[anim=pops-anim-rolling-right-reverse]{animation:pops-anim-rolling-right-reverse .3s;}
  3582.       .pops-anim[anim=pops-anim-slide-top-reverse]{animation:pops-anim-slide-top-reverse .3s;}
  3583.       .pops-anim[anim=pops-anim-slide-bottom-reverse]{animation:pops-anim-slide-bottom-reverse .3s;}
  3584.       .pops-anim[anim=pops-anim-slide-left-reverse]{animation:pops-anim-slide-left-reverse .3s;}
  3585.       .pops-anim[anim=pops-anim-slide-right-reverse]{animation:pops-anim-slide-right-reverse .3s;}
  3586.       .pops-anim[anim=pops-anim-fadein-reverse]{animation:pops-anim-fadein-reverse .3s;}
  3587.       .pops-anim[anim=pops-anim-fadein-zoom-reverse]{animation:pops-anim-fadein-zoom-reverse .3s;}
  3588.       .pops-anim[anim=pops-anim-fadein-alert-reverse]{animation:pops-anim-fadein-alert-reverse .3s;}
  3589.       .pops-anim[anim=pops-anim-don-reverse]{animation:pops-anim-don-reverse .3s;}
  3590.       .pops-anim[anim=pops-anim-roll-reverse]{animation:pops-anim-roll-reverse .3s;}
  3591.       .pops-anim[anim=pops-anim-sandra-reverse]{animation:pops-anim-sandra-reverse .3s;}
  3592.       .pops-anim[anim=pops-anim-gather-reverse]{animation:pops-anim-gather-reverse .3s;}
  3593.       `,
  3594.       alertCSS: `
  3595.       .pops[type-value] .pops-alert-title{display: flex;align-items: center;justify-content: space-between;}
  3596.       .pops[type-value=alert] .pops-alert-title{width:100%;height:var(--container-title-height);border-bottom:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
  3597.       .pops[type-value=alert] .pops-alert-title p[pops]{width:100%;overflow:hidden;color:rgb(51, 51, 51);text-indent:15px;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:18px;line-height:var(--container-title-height);}
  3598.       .pops[type-value=alert] .pops-alert-content p[pops]{padding:5px 10px;color:rgb(51, 51, 51);text-indent:15px;font-size:14px;}
  3599.       .pops[type-value=alert] .pops-alert-content{
  3600.       width:100%;
  3601.       height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
  3602.       overflow: auto;
  3603.       word-break:break-word;
  3604.       }
  3605.       .pops[type-value=alert] .pops-alert-btn{position:absolute;bottom:0;display:flex;padding:10px 10px 10px 10px;width:100%;height:var(--container-bottom-btn-height);border-top:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));text-align:right;line-height:var(--container-bottom-btn-height);align-items:center;}
  3606.  
  3607.       `,
  3608.       confirmCSS: `
  3609.       .pops[type-value] .pops-confirm-title{display: flex;align-items: center;justify-content: space-between;}
  3610.       .pops[type-value=confirm] .pops-confirm-title{width:100%;height:var(--container-title-height);border-bottom:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
  3611.       .pops[type-value=confirm] .pops-confirm-title p[pops]{width:100%;overflow:hidden;color:rgb(51, 51, 51);text-indent:15px;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:18px;line-height:var(--container-title-height);}
  3612.       .pops[type-value=confirm] .pops-confirm-content p[pops]{padding:5px 10px;color:rgb(51, 51, 51);text-indent:15px;font-size:14px;}
  3613.       .pops[type-value=confirm] .pops-confirm-content{
  3614.         width:100%;
  3615.         height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
  3616.         overflow: auto;
  3617.         word-break:break-word;
  3618.       }
  3619.       .pops[type-value=confirm] .pops-confirm-btn{position:absolute;bottom:0;display:flex;padding:10px 10px 10px 10px;width:100%;height:var(--container-bottom-btn-height);border-top:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));text-align:right;line-height:var(--container-bottom-btn-height);align-items:center;}
  3620.       
  3621.       `,
  3622.       promptCSS: `
  3623.       .pops[type-value] .pops-prompt-title{display: flex;align-items: center;justify-content: space-between;}
  3624.       .pops[type-value=prompt] .pops-prompt-title{width:100%;height:var(--container-title-height);border-bottom:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
  3625.       .pops[type-value=prompt] .pops-prompt-title p[pops]{width:100%;overflow:hidden;color:rgb(51, 51, 51);text-indent:15px;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:18px;line-height:var(--container-title-height);}
  3626.       .pops[type-value=prompt] .pops-prompt-content p[pops]{padding:5px 10px;color:rgb(51, 51, 51);text-indent:15px;font-size:14px;}
  3627.       .pops[type-value=prompt] .pops-prompt-content{
  3628.         width:100%;
  3629.         height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
  3630.         overflow: auto;
  3631.         word-break:break-word;
  3632.       }
  3633.       .pops[type-value=prompt] .pops-prompt-btn{position:absolute;bottom:0;display:flex;padding:10px 10px 10px 10px;width:100%;height:var(--container-bottom-btn-height);border-top:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));text-align:right;line-height:var(--container-bottom-btn-height);align-items:center;}
  3634.       .pops[type-value=prompt] input[pops]{padding:5px 10px;font-size:18px;}
  3635.       .pops[type-value=prompt] textarea[pops]{padding:5px 10px;font-size:14px;resize:none;}
  3636.       .pops[type-value=prompt] input[pops],.pops[type-value=prompt] textarea[pops]{width:100%;height:100%;outline:0;border:0;color:rgb(51, 51, 51);}
  3637.  
  3638.       `,
  3639.       loadingCSS: `
  3640.       .pops[type-value=loading] {
  3641.         position: absolute;
  3642.         top: 272.5px;
  3643.         top: 50%;
  3644.         left: 26px;
  3645.         left: 50%;
  3646.         display: flex;
  3647.         overflow: hidden;
  3648.         padding: 10px 15px;
  3649.         max-width: 100%;
  3650.         max-height: 100%;
  3651.         min-width: 0;
  3652.         min-height: 0;
  3653.         border: 1px solid rgba(0,0,0,.2);
  3654.         border-radius: 5px;
  3655.         background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  3656.         box-shadow: 0 0 5px rgb(0 0 0 / 50%);
  3657.         vertical-align: middle;
  3658.         font-size: 18px;
  3659.         transition: all .35s;
  3660.         transform: translate(-50%,-50%);
  3661.         user-select: none;
  3662.         -webkit-user-select: none;
  3663.         -moz-user-select: none;
  3664.         -ms-user-select: none;
  3665.         flex-direction: column;
  3666.         align-items: center;
  3667.         justify-content: center;
  3668.         align-content: center;
  3669.       }
  3670.       .pops[type-value=loading]:before{float:left;display:inline-block;width:2em;height:2em;border:.3em solid rgba(100,149,237,.1);border-top:.3em solid rgb(100, 149, 237, var(--pops-bd-opacity));border-radius:50%;content:" ";vertical-align:middle;font-size:inherit;animation:pops-anim-wait-rotate 1.2s linear infinite;}
  3671.       .pops[type-value=loading] .pops-loading-content{position:static;top:0;bottom:0;float:left;overflow:hidden;width:auto;font-size:inherit;line-height:2em;}
  3672.       .pops[type-value=loading] .pops-loading-content p[pops] {
  3673.         display: inline-block;
  3674.         padding: 5px 0px;
  3675.         color: rgb(51, 51, 51);
  3676.         text-indent: 15px;
  3677.         font-size: inherit;
  3678.         text-align: center;
  3679.       }
  3680.       
  3681.       `,
  3682.       iframeCSS: `
  3683.       .pops[type-value=iframe]{
  3684.         --container-title-height: 55px;
  3685.       }
  3686.       .pops[type-value] .pops-iframe-title{display: flex;align-items: center;justify-content: space-between;}
  3687.       .pops[type-value=iframe] .pops-iframe-title{width:calc(100% - 0px);height:var(--container-title-height);border-bottom:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
  3688.       .pops[type-value=iframe] .pops-iframe-title p[pops]{width:100%;overflow:hidden;color:rgb(51, 51, 51);text-indent:15px;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:18px;line-height:var(--container-title-height);}
  3689.       .pops[type-value=iframe] .pops-iframe-content p[pops]{padding:5px 10px;color:#333;text-indent:15px;font-size:14px;}
  3690.       .pops[type-value=iframe] .pops-iframe-content{
  3691.         width:100%;
  3692.         height: calc(100% - var(--container-title-height));
  3693.         overflow: hidden;
  3694.         word-break:break-word;
  3695.       }
  3696.       .pops-loading{position:absolute;top:40px;right:0;bottom:0;left:0;z-index:5;background-color:rgb(255, 255, 255, var(--pops-bg-opacity));}
  3697.       .pops-loading:before{position:absolute;top:50%;left:50%;z-index:3;display:block;margin:-20px 0 0 -20px;padding:20px;border:4px solid rgb(221, 221, 221, var(--pops-bd-opacity));border-radius:50%;content:"";border-top-color:transparent;animation:pops-anim-wait-rotate 1.2s linear infinite;}
  3698.       .pops[type-value=iframe].pops[type-module=min]{top:unset!important;bottom:0;max-width:200px;max-height:53px;transform:none;}
  3699.       .pops[type-value=iframe].pops[type-module=min] .pops-header-control[type=min]{display:none;}
  3700.       .pops[type-value=iframe].pops[type-module=max]{top:unset!important;left:unset!important;width:100%!important;height:100%!important;transform:none;}
  3701.       .pops[type-value=iframe] iframe[pops]{width:calc(100% - 4px);height:calc(100% - 4px);border:0;}
  3702.       .pops-iframe-content-global-loading{position:absolute;top:0;left:0;z-index:999999;width:0;height:4px;background:linear-gradient(to right,#4995dd,#fff,rgb(202 224 246));animation:iframeLoadingChange 2s forwards;}
  3703.       `,
  3704.       drawerCSS: `
  3705.       .pops[type-value=drawer] {
  3706.         position: fixed;
  3707.         box-sizing: border-box;
  3708.         display: flex;
  3709.         flex-direction: column;
  3710.         box-shadow: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);
  3711.         overflow: hidden;
  3712.         transition: all .3s;
  3713.       }
  3714.       .pops[type-value] .pops-drawer-title{display: flex;align-items: center;justify-content: space-between;}
  3715.       
  3716.       .pops[type-value=drawer][direction=top]{width: 100%;left: 0;right: 0;top: 0;}
  3717.       .pops[type-value=drawer][direction=bottom]{width: 100%;left: 0;right: 0;bottom: 0;}
  3718.       .pops[type-value=drawer][direction=left]{height: 100%;top: 0;bottom: 0;left: 0;}
  3719.       .pops[type-value=drawer][direction=right]{height: 100%;top: 0;bottom: 0;right: 0;}
  3720.       .pops-drawer-content{height: 100%;}
  3721.       .pops[type-value="drawer"] .pops-drawer-btn{padding-top: 10px;padding-bottom: 10px;}
  3722.       
  3723.       `,
  3724.       folderCSS: `
  3725.       .pops[type-value] .pops-folder-title{display: flex;align-items: center;justify-content: space-between;}
  3726.       .pops[type-value=folder] .pops-folder-title{width:100%;height:var(--container-title-height);border-bottom:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
  3727.       .pops[type-value=folder] .pops-folder-title p[pops]{width:100%;overflow:hidden;color:rgb(51, 51, 51);text-indent:15px;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:18px;line-height:var(--container-title-height);}
  3728.       .pops[type-value=folder] .pops-folder-content p[pops]{padding:5px 10px;color:rgb(51, 51, 51);text-indent:15px;font-size:14px;}
  3729.       .pops[type-value=folder] .pops-folder-content{
  3730.         width:100%;
  3731.         height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
  3732.         overflow: auto;
  3733.         word-break:break-word;
  3734.       }
  3735.       .pops[type-value=folder] .pops-folder-btn{position:absolute;bottom:0;display:flex;padding:10px 10px 10px 10px;width:100%;height:var(--container-bottom-btn-height);border-top:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));text-align:right;line-height:var(--container-bottom-btn-height);align-items:center;}
  3736.       .pops-folder-list .cursor-p{cursor:pointer}
  3737.       .pops-folder-list a{background:0 0;text-decoration:none;-webkit-tap-highlight-color:transparent;color:#05082c}
  3738.       table.pops-folder-list-table__body,table.pops-folder-list-table__header{width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;padding:0 20px}
  3739.       table.pops-folder-list-table__body,table.pops-folder-list-table__header{height:100%;background:0 0;overflow:hidden;display:-webkit-box;display:-ms-flexbox;-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal}
  3740.       table.pops-folder-list-table__body{height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
  3741.       .pops-folder-list table tr{line-height:1}
  3742.       .pops-folder-list-table__header-row{height:50px;line-height:50px;color:rgb(129, 137, 153);text-align:left;font-size:12px}
  3743.       .pops-folder-list-table__header-row{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
  3744.       .pops-folder-list-table__body-row{height:50px;line-height:50px;color:#03081a;font-size:12px}
  3745.       .pops-folder-list-table__body-row:hover{background:rgb(245, 246, 247, var(--pops-bg-opacity))}
  3746.       .pops-folder-list table th{border:0;border-bottom:1px solid rgb(247, 248, 250, var(--pops-bg-opacity))}
  3747.       .pops-folder-list table td{border:0;border-bottom:1px solid rgb(247, 248, 250, var(--pops-bg-opacity));position:relative}
  3748.       .pops-folder-list .list-name-text{display:inline-block;padding-left:12px;line-height:40px;max-width:176px}
  3749.       .pops-folder-list-file-name > div{display:flex;align-items:center;}
  3750.       
  3751.       .pops-mobile-folder-list-file-name{display:flex;align-items:center}
  3752.       .pops-mobile-folder-list-file-name>div {
  3753.         display: flex;
  3754.         flex-wrap: wrap;
  3755.         justify-content: flex-start;
  3756.         align-items: flex-start;
  3757.         padding: 6px 0px;
  3758.         flex-direction: column;
  3759.       }
  3760.       .pops-mobile-folder-list-file-name img.pops-folder-list-file-icon{width:45px;height:45px}
  3761.       .pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {
  3762.         padding-left: unset;
  3763.         max-width: 250px;
  3764.         overflow-x: hidden;
  3765.         font-size: 16px;
  3766.         font-weight: 400;
  3767.         line-height: unset;
  3768.         margin-bottom: 4px;
  3769.         white-space: normal;
  3770.         text-overflow: unset;
  3771.       }
  3772.   
  3773.       /* 修改滚动 */
  3774.       .pops-folder-content{overflow: hidden !important}
  3775.       .pops-folder-content .pops-folder-list{height: 100%}
  3776.       .pops-folder-content .pops-folder-list-table__body-div{height: 100%;padding-bottom: 85px}
  3777.       .pops-mobile-folder-content .pops-folder-list-table__body-div{height: 100%;padding-bottom: 40px}
  3778.       .pops-folder-content table.pops-folder-list-table__body{overflow: auto}
  3779.       .pops-mobile-folder-content .pops-folder-list-table__header-div{display: none}
  3780.   
  3781.       .pops-folder-list-file-name-title-text:hover{text-decoration:none;color:rgb(6, 167, 255)}
  3782.       .pops-folder-list .text-ellip{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  3783.       .pops-folder-list .content{color:rgb(129, 137, 153);position:relative;width:100%;text-align:left}
  3784.       .pops-folder-list .inline-block-v-middle{display:inline-block;vertical-align:middle}
  3785.       .pops-folder-list .flex-a-i-center{display: flex;align-items: center;}
  3786.       .pops-folder-list .u-file-icon{display:inline-block;vertical-align:middle}
  3787.       .pops-folder-list .u-file-icon--list{width:32px;height:32px}
  3788.       .pops-folder-list .pops-folder-list-file-icon{line-height:1;position:relative;vertical-align:middle}
  3789.       .pops-folder-list .pops-folder-file-list-breadcrumb-primary {
  3790.         display: -webkit-box;
  3791.         display: -webkit-flex;
  3792.         display: -ms-flexbox;
  3793.         display: flex;
  3794.         -webkit-box-align: center;
  3795.         -webkit-align-items: center;
  3796.         -ms-flex-align: center;
  3797.         align-items: center;
  3798.         -webkit-box-orient: horizontal;
  3799.         -webkit-box-direction: normal;
  3800.         -webkit-flex-direction: row;
  3801.         -ms-flex-direction: row;
  3802.         flex-direction: row;
  3803.         min-height: 17px;
  3804.         flex-wrap: wrap;
  3805.       }
  3806.       .pops-folder-list .pops-folder-list-table__sort {
  3807.         display: inline-flex;
  3808.         margin-left: 4px;
  3809.         flex-direction: column;
  3810.       }
  3811.       
  3812.       .pops-folder-list .pops-folder-icon-arrow{
  3813.         width: 10px;
  3814.         height: 10px;
  3815.         fill: rgb(212, 215, 222);
  3816.       }
  3817.       .pops-folder-list .pops-folder-icon-active{
  3818.         fill: rgb(6, 167, 255);
  3819.       }
  3820.       .pops-folder-list .pops-folder-file-list-breadcrumb {
  3821.         padding: 4px 20px;
  3822.         -webkit-box-sizing: border-box;
  3823.         box-sizing: border-box;
  3824.         display: -webkit-box;
  3825.         display: -webkit-flex;
  3826.         display: -ms-flexbox;
  3827.         display: flex;
  3828.         -webkit-box-align: center;
  3829.         -webkit-align-items: center;
  3830.         -ms-flex-align: center;
  3831.         align-items: center;
  3832.         -webkit-box-orient: horizontal;
  3833.         -webkit-box-direction: normal;
  3834.         -webkit-flex-direction: row;
  3835.         -ms-flex-direction: row;
  3836.         flex-direction: row;
  3837.         -webkit-box-pack: start;
  3838.         -webkit-justify-content: start;
  3839.         -ms-flex-pack: start;
  3840.         justify-content: flex-start;
  3841.         min-height: 35px;
  3842.       }
  3843.       .pops-folder-list .pops-folder-file-list-breadcrumb-allFiles{font-size:12px;color:#333;line-height:20px;font-weight:700;display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}
  3844.       .pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a{color:rgb(153, 153, 153)}
  3845.       .pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a{font-size:14px;color:rgb(18, 22, 26)}
  3846.       .pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow{width:16px;height:16px}
  3847.       .pops-folder-list .iconArrow{
  3848.         background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=) 55% 50%/6px 9px no-repeat;
  3849.       }
  3850.  
  3851.  
  3852.       `,
  3853.       panelCSS: `
  3854.       .pops[type-value=panel]{
  3855.         --el-disabled-text-color: #a8abb2;
  3856.         --el-disabled-bg-color: #f5f7fa;
  3857.         --el-disabled-border-color: #e4e7ed;
  3858.         --aside-bg-color: #f2f2f2;
  3859.       }
  3860.       .pops[type-value] .pops-panel-title{display: flex;align-items: center;justify-content: space-between;}
  3861.     
  3862.       .pops[type-value=panel] .pops-panel-title{width:100%;height:var(--container-title-height);border-bottom:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
  3863.       .pops[type-value=panel] .pops-panel-title p[pops]{width:100%;overflow:hidden;color:#333;text-indent:15px;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:18px;line-height:var(--container-title-height);}
  3864.       .pops[type-value=panel] .pops-panel-content{
  3865.         width:100%;
  3866.         height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
  3867.         overflow: auto;
  3868.         word-break:break-word;
  3869.       }
  3870.       .pops[type-value=panel] .pops-panel-btn{position:absolute;bottom:0;display:flex;padding:10px 10px 10px 10px;width:100%;height:var(--container-bottom-btn-height);border-top:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));text-align:right;line-height:var(--container-bottom-btn-height);align-items:center;}
  3871.       
  3872.       /* ↓panel的CSS↓ */
  3873.       aside.pops-panel-aside{overflow:auto;box-sizing:border-box;flex-shrink:0;width:200px;height:100%;background:var(--aside-bg-color);border-right:1px solid var(--aside-bg-color)}
  3874.       .pops-panel-content{display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0;bottom:0!important}
  3875.       section.pops-panel-container{width:100%;padding:10px;overflow:hidden}
  3876.       section.pops-panel-container .pops-panel-container-header-ul{border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
  3877.       section.pops-panel-container .pops-panel-container-header-ul li{display: flex;justify-content: flex-start !important;font-size: 20px;text-align:left;}
  3878.       section.pops-panel-container > ul:last-child{overflow: auto;height: calc(100% - 45px);}
  3879.       aside.pops-panel-aside ul li{margin:6px 8px;border-radius:4px;font-size:16px;padding:6px 10px;cursor:default;display:flex;align-items:center;justify-content:flex-start}
  3880.       aside.pops-panel-aside .pops-is-visited,aside.pops-panel-aside ul li:hover{color:rgb(64, 158, 255);background:rgba(64,158,255 ,.1)}
  3881.       section.pops-panel-container>ul li{display:flex;justify-content:space-between;align-items:center;margin:10px 20px}
  3882.       section.pops-panel-container li.pops-panel-forms-container-item{display:block;margin-top:20px}
  3883.       section.pops-panel-container .pops-panel-forms-container-item ul{border-radius:6px;background:var(--aside-bg-color);margin:10px}
  3884.       section.pops-panel-container .pops-panel-forms-container-item ul li {
  3885.         display: flex;
  3886.         justify-content: space-between;
  3887.         align-items: center;
  3888.         margin: 0 10px;
  3889.         padding: 10px 0;
  3890.         border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
  3891.         font-size: 16px;
  3892.         text-align: left;
  3893.       }
  3894.       section.pops-panel-container .pops-panel-forms-container-item ul li:last-child{border:0}
  3895.       section.pops-panel-container .pops-panel-forms-container-item>div{margin:10px;margin-left:20px;font-size:14px;text-align:left;}
  3896.       /* 主文字 */
  3897.       section.pops-panel-container .pops-panel-forms-container-item .pops-panel-item-left-text .pops-panel-item-left-main-text {
  3898.         /* line-height: 2; */
  3899.       }
  3900.       /* 描述文字 */
  3901.       section.pops-panel-container .pops-panel-forms-container-item .pops-panel-item-left-text .pops-panel-item-left-desc-text{
  3902.         /* line-height: 1; */
  3903.         font-size: 12px;
  3904.         color: rgb(108, 108, 108);
  3905.       }
  3906.       /* 兼容移动端CSS */
  3907.       .pops[type-value="panel"].pops-panel-is-mobile{
  3908.         width: 92vw;
  3909.       }
  3910.       .pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container{
  3911.         padding: 10px 0px;
  3912.       }
  3913.       .pops[type-value="panel"].pops-panel-is-mobile .pops-panel-content aside.pops-panel-aside{
  3914.         width: 20%;
  3915.       }
  3916.       .pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container .pops-panel-forms-container-item>div{
  3917.         margin: 5px 10px;
  3918.         text-align: left;
  3919.       }
  3920.       .pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container .pops-panel-forms-container-item ul{
  3921.         margin: 0px !important;
  3922.       }
  3923.       .pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container>ul li{
  3924.         margin: 5px 5px!important;
  3925.         padding: 5px 5px !important;
  3926.       }
  3927.       .pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container >ul > li div:nth-child(2){
  3928.         max-width: 55%;
  3929.         margin-left: 6px;
  3930.         text-align: right;
  3931.       }
  3932.       .pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container .pops-panel-select select{
  3933.         min-width: 88px !important;
  3934.         width: -webkit-fill-available;
  3935.         width: -moz-available;
  3936.       }
  3937.       .pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container .pops-panel-container-header-ul li{
  3938.         font-size: 16px;
  3939.       }
  3940.       .pops[type-value="panel"].pops-panel-is-mobile .pops-panel-title p[pops],
  3941.       .pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container>ul li,
  3942.       .pops[type-value="panel"].pops-panel-is-mobile aside.pops-panel-aside ul li{
  3943.         font-size: 14px;
  3944.       }
  3945.       /* switch的CSS */
  3946.       .pops-panel-switch {
  3947.         display: inline-flex;
  3948.         flex-direction: row-reverse;
  3949.         align-items: center;
  3950.         position: relative;
  3951.         font-size: 14px;
  3952.         line-height: 20px;
  3953.         height: 32px;
  3954.         vertical-align: middle
  3955.       }
  3956.       .pops-panel-switch input.pops-panel-switch__input {
  3957.         position: absolute;
  3958.         width: 0;
  3959.         height: 0;
  3960.         opacity: 0;
  3961.         margin: 0
  3962.       }
  3963.       .pops-panel-switch:has(input.pops-panel-switch__input:disabled),
  3964.       .pops-panel-switch[data-disabled],
  3965.       .pops-panel-switch[data-disabled] .pops-panel-switch__core,
  3966.       .pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core{
  3967.         cursor: not-allowed;
  3968.         opacity: .6;
  3969.       }
  3970.       .pops-panel-switch span.pops-panel-switch__core {
  3971.         display: inline-flex;
  3972.         position: relative;
  3973.         align-items: center;
  3974.         min-width: 40px;
  3975.         height: 20px;
  3976.         border: 1px solid rgb(220, 223, 230, var(--pops-bd-opacity));
  3977.         outline: 0;
  3978.         border-radius: 10px;
  3979.         box-sizing: border-box;
  3980.         background: rgb(220, 223, 230, var(--pops-bg-opacity));
  3981.         cursor: pointer;
  3982.         transition: border-color .3s,background-color .3s
  3983.       }
  3984.       .pops-panel-switch .pops-panel-switch__action {
  3985.         position: absolute;
  3986.         left: 1px;
  3987.         border-radius: 100%;
  3988.         transition: all .3s;
  3989.         width: 16px;
  3990.         height: 16px;
  3991.         background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  3992.         display: flex;
  3993.         justify-content: center;
  3994.         align-items: center;
  3995.         color: rgb(220, 223, 230)
  3996.       }
  3997.       .pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core{border-color:rgb(64, 158, 255, var(--pops-bd-opacity));background-color:rgb(64, 158, 255, var(--pops-bg-opacity))}
  3998.       .pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action{left:calc(100% - 17px);color:rgb(64, 158, 255)}
  3999.       /* switch的CSS */
  4000.       
  4001.       /* slider旧的CSS */
  4002.       section.pops-panel-container .pops-panel-slider:has(>input[type=range]){overflow:hidden;height:25px;line-height:25px;display:flex;align-items:center}
  4003.       section.pops-panel-container .pops-panel-slider input[type=range] {
  4004.         height: 6px;
  4005.         background: rgb(228, 231, 237, var(--pops-bg-opacity));
  4006.         outline: 0;
  4007.         -webkit-appearance: none;
  4008.         appearance: none;
  4009.         width: 100%;
  4010.       }
  4011.       section.pops-panel-container .pops-panel-slider input[type=range]::-webkit-slider-thumb{
  4012.         width: 20px;
  4013.         height: 20px;
  4014.         border-radius: 50%;
  4015.         border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));
  4016.         background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  4017.         box-shadow: 0 0 2px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2);
  4018.         cursor: pointer;
  4019.         -webkit-appearance: none;
  4020.         appearance: none;
  4021.         border-image: linear-gradient(#409eff,#409eff) 0 fill/9 25 9 0/0 0 0 100vw;
  4022.       }
  4023.       section.pops-panel-container .pops-panel-slider input[type=range]::-moz-range-thumb {
  4024.         width: 20px;
  4025.         height: 20px;
  4026.         border-radius: 50%;
  4027.         border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));
  4028.         background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  4029.         box-shadow: 0 0 2px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2);
  4030.         cursor: pointer;
  4031.         -webkit-appearance: none;
  4032.         appearance: none;
  4033.       }
  4034.       section.pops-panel-container .pops-panel-slider input[type=range]::-moz-range-progress{
  4035.         height: 6px;
  4036.         border-image: linear-gradient(#409eff,#409eff) 0 fill/9 25 9 0/0 0 0 100vw;
  4037.       }
  4038.       /* slider旧的CSS */
  4039.     
  4040.       /* slider的CSS */
  4041.       .pops-slider {
  4042.         --pops-slider-color-white: #ffffff;
  4043.         --pops-slider-color-primary: #409eff;
  4044.         --pops-slider-color-info: #909399;
  4045.         --pops-slider-text-color-placeholder: #a8abb2;
  4046.         --pops-slider-border-color-light: #e4e7ed;
  4047.         --pops-slider-border-radius-circle: 100%;
  4048.         --pops-slider-transition-duration-fast: 0.2s;
  4049.     
  4050.         --pops-slider-main-bg-color: var(--pops-slider-color-primary);
  4051.         --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);
  4052.         --pops-slider-stop-bg-color: var(--pops-slider-color-white);
  4053.         --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);
  4054.         --pops-slider-border-radius: 3px;
  4055.         --pops-slider-height: 6px;
  4056.         --pops-slider-button-size: 20px;
  4057.         --pops-slider-button-wrapper-size: 36px;
  4058.         --pops-slider-button-wrapper-offset: -15px;
  4059.       }
  4060.     
  4061.       .pops-slider {
  4062.         width: 100%;
  4063.         height: 32px;
  4064.         display: flex;
  4065.         align-items: center;
  4066.       }
  4067.     
  4068.       .pops-slider-width{
  4069.         flex: 0 0 52%;
  4070.         margin-left: 10px;
  4071.       }
  4072.     
  4073.       .pops-slider__runway {
  4074.         flex: 1;
  4075.         height: var(--pops-slider-height);
  4076.         background-color: var(--pops-slider-runway-bg-color);
  4077.         border-radius: var(--pops-slider-border-radius);
  4078.         position: relative;
  4079.         cursor: pointer;
  4080.       }
  4081.     
  4082.       .pops-slider__runway.show-input {
  4083.         margin-right: 30px;
  4084.         width: auto;
  4085.       }
  4086.     
  4087.       .pops-slider__runway.pops-slider-is-disabled {
  4088.         cursor: default;
  4089.       }
  4090.     
  4091.       .pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {
  4092.         background-color: var(--pops-slider-disabled-color);
  4093.       }
  4094.     
  4095.       .pops-slider__runway.pops-slider-is-disabled .pops-slider__button {
  4096.         border-color: var(--pops-slider-disabled-color);
  4097.       }
  4098.     
  4099.       .pops-slider__runway.pops-slider-is-disabled
  4100.         .pops-slider__button:hover,
  4101.       .pops-slider__runway.pops-slider-is-disabled
  4102.         .pops-slider__button.hover,
  4103.       .pops-slider__runway.pops-slider-is-disabled
  4104.         .pops-slider__button.dragging {
  4105.         cursor: not-allowed;
  4106.       }
  4107.     
  4108.       .pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,
  4109.       .pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,
  4110.       .pops-slider__runway.pops-slider-is-disabled
  4111.         .pops-slider__button.dragging {
  4112.         transform: scale(1);
  4113.       }
  4114.     
  4115.       .pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,
  4116.       .pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,
  4117.       .pops-slider__runway.pops-slider-is-disabled
  4118.         .pops-slider__button.dragging {
  4119.         cursor: not-allowed;
  4120.       }
  4121.     
  4122.       .pops-slider__input {
  4123.         flex-shrink: 0;
  4124.         width: 130px;
  4125.       }
  4126.     
  4127.       .pops-slider__bar {
  4128.         height: var(--pops-slider-height);
  4129.         background-color: var(--pops-slider-main-bg-color);
  4130.         border-top-left-radius: var(--pops-slider-border-radius);
  4131.         border-bottom-left-radius: var(--pops-slider-border-radius);
  4132.         position: absolute;
  4133.       }
  4134.     
  4135.       .pops-slider__button-wrapper {
  4136.         height: var(--pops-slider-button-wrapper-size);
  4137.         width: var(--pops-slider-button-wrapper-size);
  4138.         position: absolute;
  4139.         z-index: 1;
  4140.         top: var(--pops-slider-button-wrapper-offset);
  4141.         transform: translate(-50%);
  4142.         background-color: transparent;
  4143.         text-align: center;
  4144.         user-select: none;
  4145.         line-height: normal;
  4146.         outline: none;
  4147.       }
  4148.     
  4149.       .pops-slider__button-wrapper:after {
  4150.         display: inline-block;
  4151.         content: "";
  4152.         height: 100%;
  4153.         vertical-align: middle;
  4154.       }
  4155.     
  4156.       .pops-slider__button:hover,
  4157.       .pops-slider__button.hover {
  4158.         cursor: grab;
  4159.       }
  4160.     
  4161.       .pops-slider__button {
  4162.         display: inline-block;
  4163.         width: var(--pops-slider-button-size);
  4164.         height: var(--pops-slider-button-size);
  4165.         vertical-align: middle;
  4166.         border: solid 2px var(--pops-slider-main-bg-color);
  4167.         background-color: var(--pops-slider-color-white);
  4168.         border-radius: 50%;
  4169.         box-sizing: border-box;
  4170.         transition: var(--pops-slider-transition-duration-fast);
  4171.         user-select: none;
  4172.       }
  4173.     
  4174.       .pops-slider__button:hover,
  4175.       .pops-slider__button.hover,
  4176.       .pops-slider__button.dragging {
  4177.         transform: scale(1.2);
  4178.       }
  4179.     
  4180.       .pops-slider__button:hover,
  4181.       .pops-slider__button.hover {
  4182.         cursor: grab;
  4183.       }
  4184.     
  4185.       .pops-slider__button.dragging {
  4186.         cursor: grabbing;
  4187.       }
  4188.     
  4189.       .pops-slider__stop {
  4190.         position: absolute;
  4191.         height: var(--pops-slider-height);
  4192.         width: var(--pops-slider-height);
  4193.         border-radius: var(--pops-slider-border-radius-circle);
  4194.         background-color: var(--pops-slider-stop-bg-color);
  4195.         transform: translate(-50%);
  4196.       }
  4197.     
  4198.       .pops-slider__marks {
  4199.         top: 0;
  4200.         left: 12px;
  4201.         width: 18px;
  4202.         height: 100%;
  4203.       }
  4204.     
  4205.       .pops-slider__marks-text {
  4206.         position: absolute;
  4207.         transform: translate(-50%);
  4208.         font-size: 14px;
  4209.         color: var(--pops-slider-color-info);
  4210.         margin-top: 15px;
  4211.         white-space: pre;
  4212.       }
  4213.     
  4214.       .pops-slider.is-vertical {
  4215.         position: relative;
  4216.         display: inline-flex;
  4217.         width: auto;
  4218.         height: 100%;
  4219.         flex: 0;
  4220.       }
  4221.     
  4222.       .pops-slider.is-vertical .pops-slider__runway {
  4223.         width: var(--pops-slider-height);
  4224.         height: 100%;
  4225.         margin: 0 16px;
  4226.       }
  4227.     
  4228.       .pops-slider.is-vertical .pops-slider__bar {
  4229.         width: var(--pops-slider-height);
  4230.         height: auto;
  4231.         border-radius: 0 0 3px 3px;
  4232.       }
  4233.     
  4234.       .pops-slider.is-vertical .pops-slider__button-wrapper {
  4235.         top: auto;
  4236.         left: var(--pops-slider-button-wrapper-offset);
  4237.         transform: translateY(50%);
  4238.       }
  4239.     
  4240.       .pops-slider.is-vertical .pops-slider__stop {
  4241.         transform: translateY(50%);
  4242.       }
  4243.     
  4244.       .pops-slider.is-vertical .pops-slider__marks-text {
  4245.         margin-top: 0;
  4246.         left: 15px;
  4247.         transform: translateY(50%);
  4248.       }
  4249.     
  4250.       .pops-slider--large {
  4251.         height: 40px;
  4252.       }
  4253.     
  4254.       .pops-slider--small {
  4255.         height: 24px;
  4256.       }
  4257.       /* slider的CSS */
  4258.       
  4259.       /* input的CSS */
  4260.       .pops-panel-input{display:flex;align-items:center;border:1px solid #dcdfe6;border-radius:4px;background-color:#ffffff}
  4261.       .pops-panel-input:hover{box-shadow:0 0 0 1px #c0c4cc inset}
  4262.       .pops-panel-input:has(input:focus){outline:0;border:1px solid #409eff;border-radius:4px;box-shadow:none}
  4263.       .pops-panel-input input {
  4264.         display: inline-flex;
  4265.         justify-content: center;
  4266.         align-items: center;
  4267.         line-height: 1;
  4268.         height: 32px;
  4269.         white-space: nowrap;
  4270.         cursor: text;
  4271.         text-align: center;
  4272.         box-sizing: border-box;
  4273.         outline: 0;
  4274.         transition: .1s;
  4275.         font-weight: 500;
  4276.         user-select: none;
  4277.         vertical-align: middle;
  4278.         -webkit-appearance: none;
  4279.         appearance: none;
  4280.         background-color: transparent;
  4281.         border: 0;
  4282.         padding: 8px 8px;
  4283.         font-size: 14px;
  4284.         text-align: start;
  4285.         width: 100%;
  4286.         flex: 1;
  4287.       }    
  4288.       .pops-panel-input span.pops-panel-input__suffix {
  4289.         display: inline-flex;
  4290.         white-space: nowrap;
  4291.         flex-shrink: 0;
  4292.         flex-wrap: nowrap;
  4293.         height: 100%;
  4294.         text-align: center;
  4295.         color: #a8abb2;
  4296.         transition: all .3s;
  4297.         pointer-events: none;
  4298.         margin: 0 8px;
  4299.       }    
  4300.       .pops-panel-input span.pops-panel-input__suffix-inner{pointer-events:all;display:inline-flex;align-items:center;justify-content:center}
  4301.       .pops-panel-input .pops-panel-icon{cursor:pointer}
  4302.       .pops-panel-input .pops-panel-icon{height:inherit;line-height:inherit;display:flex;justify-content:center;align-items:center;transition:all .3s}
  4303.       .pops-panel-input .pops-panel-icon svg{height:1em;width:1em}
  4304.     
  4305.       .pops-input-disabled{
  4306.         background-color: var(--el-disabled-bg-color);
  4307.         box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
  4308.       }
  4309.       .pops-panel-input.pops-input-disabled{
  4310.         border: none;
  4311.       }
  4312.       .pops-panel-input.pops-input-disabled:hover{
  4313.         box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
  4314.       }
  4315.       .pops-panel-input input:disabled,
  4316.       .pops-panel-input input:disabled + .pops-panel-input__suffix{
  4317.         user-select: none;
  4318.         -webkit-user-select: none;
  4319.         -moz-user-select: none;
  4320.         -ms-user-select: none;
  4321.         color: var(--el-disabled-text-color);
  4322.         -webkit-text-fill-color: var(--el-disabled-text-color);
  4323.         cursor: not-allowed;
  4324.       }
  4325.       .pops-panel-input input:disabled + .pops-panel-input__suffix{
  4326.         display: none;
  4327.       }
  4328.       /* input的CSS */
  4329.     
  4330.       /* textarea的CSS */
  4331.       .pops-panel-textarea textarea {
  4332.         width: 100%;
  4333.         vertical-align: bottom;
  4334.         position: relative;
  4335.         display: block;
  4336.         resize: none;
  4337.         padding: 5px 11px;
  4338.         line-height: 1.5;
  4339.         box-sizing: border-box;
  4340.         font-size: inherit;
  4341.         font-family: inherit;
  4342.         background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  4343.         background-image: none;
  4344.         -webkit-appearance: none;
  4345.         appearance: none;
  4346.         box-shadow: 0 0 0 1px #dcdfe6 inset;
  4347.         border-radius: 0;
  4348.         transition: box-shadow .2s cubic-bezier(.645, .045, .355, 1);
  4349.         border: none;
  4350.       }
  4351.       .pops-panel-textarea textarea:hover{box-shadow:0 0 0 1px #c0c4cc inset}
  4352.       .pops-panel-textarea-disable .pops-panel-textarea textarea:hover{box-shadow:none}
  4353.       .pops-panel-textarea textarea:focus{outline:0;box-shadow:0 0 0 1px #409eff inset}
  4354.       /* textarea的CSS */
  4355.     
  4356.       /* select的CSS */
  4357.       .pops-panel-select select {
  4358.         height: 32px;
  4359.         line-height: 32px;
  4360.         font-size: 14px;
  4361.         min-width: 200px;
  4362.         border: 1px solid rgb(184, 184, 184, var(--pops-bd-opacity));
  4363.         border-radius: 5px;
  4364.         text-align: center;
  4365.         outline: 0;
  4366.         background: rgb(255, 255, 255, var(--pops-bg-opacity));
  4367.         box-shadow: none;
  4368.       }    
  4369.       .pops-panel-select select:hover{box-shadow:0 0 0 1px #c0c4cc inset}
  4370.       .pops-panel-select-disable .pops-panel-select select:hover{box-shadow:none}
  4371.       .pops-panel-select select:focus{border:1px solid rgb(64, 158, 255, var(--pops-bd-opacity));box-shadow:none}
  4372.       /* select的CSS */
  4373.     
  4374.       `,
  4375.       tooltipCSS: `
  4376.       .pops-tip {
  4377.         --tooltip-color: #4e4e4e;
  4378.         --tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  4379.         --tooltip-bd-radius: 2px;
  4380.         --tooltip-font-size: 14px;
  4381.         --tooltip-padding-top: 13px;
  4382.         --tooltip-padding-right: 13px;
  4383.         --tooltip-padding-bottom: 13px;
  4384.         --tooltip-padding-left: 13px;
  4385.     
  4386.     
  4387.         --tooltip-arrow--after-color: rgb(78, 78, 78);
  4388.         --tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  4389.         --tooltip-arrow--after-width: 12px;
  4390.         --tooltip-arrow--after-height: 12px;
  4391.         
  4392.         position: absolute;
  4393.         padding: var(--tooltip-padding-top) var(--tooltip-padding-right) var(--tooltip-padding-bottom) var(--tooltip-padding-left);
  4394.         max-width: 400px;
  4395.         max-height: 300px;
  4396.         border-radius: var(--tooltip-bd-radius);
  4397.         background-color: var(--tooltip-bg-color);
  4398.         box-shadow: 0 1.5px 4px rgba(0,0,0,.24),0 1.5px 6px rgba(0,0,0,.12);
  4399.         color: var(--tooltip-color);
  4400.         font-size: var(--tooltip-font-size);
  4401.       }
  4402.       /* github的样式 */
  4403.       .pops-tip.github-tooltip{
  4404.         --tooltip-color: rgb(255, 255, 255);
  4405.         --tooltip-bg-color: rgb(36, 41, 47, var(--pops-bg-opacity));
  4406.         --tooltip-bd-radius: 6px;
  4407.         --tooltip-padding-top: 6px;
  4408.         --tooltip-padding-right: 8px;
  4409.         --tooltip-padding-bottom: 6px;
  4410.         --tooltip-padding-left: 8px;
  4411.     
  4412.         --tooltip-arrow--after-color: rgb(255, 255, 255);
  4413.         --tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--pops-bg-opacity));
  4414.         --tooltip-arrow--after-width: 8px;
  4415.         --tooltip-arrow--after-height: 8px;
  4416.       }
  4417.       .pops-tip .pops-tip-arrow {
  4418.         position: absolute;
  4419.         top: 100%;
  4420.         left: 50%;
  4421.         overflow: hidden;
  4422.         width: 100%;
  4423.         height: 12.5px;
  4424.         transform: translateX(-50%);
  4425.       }
  4426.       
  4427.       .pops-tip .pops-tip-arrow::after {
  4428.         position: absolute;
  4429.         top: 0;
  4430.         left: 50%;
  4431.         width: var(--tooltip-arrow--after-width);
  4432.         height: var(--tooltip-arrow--after-height);
  4433.         background: var(--tooltip-arrow--after-bg-color);
  4434.         color: var(--tooltip-arrow--after-color);
  4435.         box-shadow: 0 1px 7px rgba(0,0,0,.24),0 1px 7px rgba(0,0,0,.12);
  4436.         content: "";
  4437.         transform: translateX(-50%) translateY(-50%) rotate(45deg);
  4438.       }
  4439.       
  4440.       .pops-tip .pops-tip-arrow[data-position=bottom] {
  4441.         position: absolute;
  4442.         top: 100%;
  4443.         left: 50%;
  4444.         overflow: hidden;
  4445.         width: 100%;
  4446.         height: 12.5px;
  4447.         transform: translateX(-50%);
  4448.       }
  4449.       
  4450.       .pops-tip .pops-tip-arrow[data-position=bottom]:after {
  4451.         position: absolute;
  4452.         top: 0;
  4453.         left: 50%;
  4454.         width: var(--tooltip-arrow--after-width);
  4455.         height: var(--tooltip-arrow--after-height);
  4456.         background: var(--tooltip-arrow--after-bg-color);
  4457.         box-shadow: 0 1px 7px rgba(0,0,0,.24),0 1px 7px rgba(0,0,0,.12);
  4458.         content: "";
  4459.         transform: translateX(-50%) translateY(-50%) rotate(45deg);
  4460.       }
  4461.       
  4462.       .pops-tip .pops-tip-arrow[data-position=left] {
  4463.         top: 50%;
  4464.         left: -12.5px;
  4465.         width: 12.5px;
  4466.         height: 50px;
  4467.         transform: translateY(-50%);
  4468.       }
  4469.       
  4470.       .pops-tip .pops-tip-arrow[data-position=left]:after {
  4471.         position: absolute;
  4472.         top: 50%;
  4473.         left: 100%;
  4474.         content: "";
  4475.       }
  4476.       
  4477.       .pops-tip .pops-tip-arrow[data-position=right] {
  4478.         top: 50%;
  4479.         right: -12.5px;
  4480.         left: auto;
  4481.         width: 12.5px;
  4482.         height: 50px;
  4483.         transform: translateY(-50%);
  4484.       }
  4485.       
  4486.       .pops-tip .pops-tip-arrow[data-position=right]:after {
  4487.         position: absolute;
  4488.         top: 50%;
  4489.         left: 0;
  4490.         content: "";
  4491.       }
  4492.       
  4493.       .pops-tip .pops-tip-arrow[data-position=top] {
  4494.         top: -12.5px;
  4495.         left: 50%;
  4496.         transform: translateX(-50%);
  4497.       }
  4498.       
  4499.       .pops-tip .pops-tip-arrow[data-position=top]:after {
  4500.         position: absolute;
  4501.         top: 100%;
  4502.         left: 50%;
  4503.         content: "";
  4504.       }
  4505.     
  4506.       .pops-tip[data-motion]{-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
  4507.       .pops-tip[data-motion=fadeOutRight]{-webkit-animation-name:pops-motion-fadeOutRight;animation-name:pops-motion-fadeOutRight;}
  4508.       .pops-tip[data-motion=fadeInTop]{-webkit-animation-name:pops-motion-fadeInTop;animation-name:pops-motion-fadeInTop;animation-timing-function:cubic-bezier(.49,.49,.13,1.3);}
  4509.       .pops-tip[data-motion=fadeOutTop]{-webkit-animation-name:pops-motion-fadeOutTop;animation-name:pops-motion-fadeOutTop;animation-timing-function:cubic-bezier(.32,.37,.06,.87);}
  4510.       .pops-tip[data-motion=fadeInBottom]{-webkit-animation-name:pops-motion-fadeInBottom;animation-name:pops-motion-fadeInBottom;}
  4511.       .pops-tip[data-motion=fadeOutBottom]{-webkit-animation-name:pops-motion-fadeOutBottom;animation-name:pops-motion-fadeOutBottom;}
  4512.       .pops-tip[data-motion=fadeInLeft]{-webkit-animation-name:pops-motion-fadeInLeft;animation-name:pops-motion-fadeInLeft;}
  4513.       .pops-tip[data-motion=fadeOutLeft]{-webkit-animation-name:pops-motion-fadeOutLeft;animation-name:pops-motion-fadeOutLeft;}
  4514.       .pops-tip[data-motion=fadeInRight]{-webkit-animation-name:pops-motion-fadeInRight;animation-name:pops-motion-fadeInRight;}
  4515.       
  4516.       `,
  4517.     },
  4518.     /** icon图标的svg代码 */
  4519.     iconSVG: {
  4520.       min: `
  4521.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4522.         <path fill="currentColor" d="M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z"></path>
  4523.       </svg>`,
  4524.       mise: `
  4525.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4526.         <path
  4527.           fill="currentColor"
  4528.           d="M885.333333 85.333333H330.410667a53.333333 53.333333 0 0 0-53.333334 53.333334v106.666666H138.666667A53.333333 53.333333 0 0 0 85.333333 298.666667v586.666666a53.333333 53.333333 0 0 0 53.333334 53.333334H725.333333a53.333333 53.333333 0 0 0 53.333334-53.333334V746.154667h106.666666c29.44 0 53.333333-23.893333 53.333334-53.333334V138.666667A53.333333 53.333333 0 0 0 885.333333 85.333333zM725.333333 692.821333v192.512H138.666667V298.666667H725.333333v394.154666z m157.866667 0H778.666667V298.666667a53.333333 53.333333 0 0 0-53.333334-53.333334H330.410667v-106.666666h554.922666l-2.133333 554.154666z"></path>
  4529.       </svg>
  4530.  
  4531.       `,
  4532.       max: `
  4533.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4534.         <path
  4535.           fill="currentColor"
  4536.           d="m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z"></path>
  4537.       </svg>
  4538.       `,
  4539.       close: `
  4540.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4541.         <path
  4542.           fill="currentColor"
  4543.           d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
  4544.       </svg>
  4545.       `,
  4546.       edit: `
  4547.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4548.         <path
  4549.           fill="currentColor"
  4550.           d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z"></path>
  4551.         <path
  4552.           fill="currentColor"
  4553.           d="m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"></path>
  4554.       </svg>
  4555.       `,
  4556.       share: `
  4557.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4558.         <path
  4559.           fill="currentColor"
  4560.           d="m679.872 348.8-301.76 188.608a127.808 127.808 0 0 1 5.12 52.16l279.936 104.96a128 128 0 1 1-22.464 59.904l-279.872-104.96a128 128 0 1 1-16.64-166.272l301.696-188.608a128 128 0 1 1 33.92 54.272z"></path>
  4561.       </svg>
  4562.       `,
  4563.       delete: `
  4564.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4565.         <path
  4566.           fill="currentColor"
  4567.           d="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"></path>
  4568.       </svg>
  4569.       `,
  4570.       search: `
  4571.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4572.         <path
  4573.           fill="currentColor"
  4574.           d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path>
  4575.       </svg>
  4576.  
  4577.       `,
  4578.       upload: `
  4579.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4580.         <path
  4581.           fill="currentColor"
  4582.           d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248L544 253.696z"></path>
  4583.       </svg>
  4584.       `,
  4585.       loading: `
  4586.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4587.         <path
  4588.           fill="currentColor"
  4589.           d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path>
  4590.       </svg>
  4591.       `,
  4592.       next: `
  4593.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4594.         <path
  4595.           fill="currentColor"
  4596.           d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
  4597.       </svg>
  4598.       `,
  4599.       prev: `
  4600.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4601.         <path
  4602.           fill="currentColor"
  4603.           d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path>
  4604.       </svg>
  4605.       `,
  4606.       eleme: `
  4607.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4608.         <path
  4609.           fill="currentColor"
  4610.           d="M300.032 188.8c174.72-113.28 408-63.36 522.24 109.44 5.76 10.56 11.52 20.16 17.28 30.72v.96a22.4 22.4 0 0 1-7.68 26.88l-352.32 228.48c-9.6 6.72-22.08 3.84-28.8-5.76l-18.24-27.84a54.336 54.336 0 0 1 16.32-74.88l225.6-146.88c9.6-6.72 12.48-19.2 5.76-28.8-.96-1.92-1.92-3.84-3.84-4.8a267.84 267.84 0 0 0-315.84-17.28c-123.84 81.6-159.36 247.68-78.72 371.52a268.096 268.096 0 0 0 370.56 78.72 54.336 54.336 0 0 1 74.88 16.32l17.28 26.88c5.76 9.6 3.84 21.12-4.8 27.84-8.64 7.68-18.24 14.4-28.8 21.12a377.92 377.92 0 0 1-522.24-110.4c-113.28-174.72-63.36-408 111.36-522.24zm526.08 305.28a22.336 22.336 0 0 1 28.8 5.76l23.04 35.52a63.232 63.232 0 0 1-18.24 87.36l-35.52 23.04c-9.6 6.72-22.08 3.84-28.8-5.76l-46.08-71.04c-6.72-9.6-3.84-22.08 5.76-28.8l71.04-46.08z"></path>
  4611.       </svg>
  4612.       `,
  4613.       elemePlus: `
  4614.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4615.         <path
  4616.           d="M839.7 734.7c0 33.3-17.9 41-17.9 41S519.7 949.8 499.2 960c-10.2 5.1-20.5 5.1-30.7 0 0 0-314.9-184.3-325.1-192-5.1-5.1-10.2-12.8-12.8-20.5V368.6c0-17.9 20.5-28.2 20.5-28.2L466 158.6c12.8-5.1 25.6-5.1 38.4 0 0 0 279 161.3 309.8 179.2 17.9 7.7 28.2 25.6 25.6 46.1-.1-5-.1 317.5-.1 350.8zM714.2 371.2c-64-35.8-217.6-125.4-217.6-125.4-7.7-5.1-20.5-5.1-30.7 0L217.6 389.1s-17.9 10.2-17.9 23v297c0 5.1 5.1 12.8 7.7 17.9 7.7 5.1 256 148.5 256 148.5 7.7 5.1 17.9 5.1 25.6 0 15.4-7.7 250.9-145.9 250.9-145.9s12.8-5.1 12.8-30.7v-74.2l-276.5 169v-64c0-17.9 7.7-30.7 20.5-46.1L745 535c5.1-7.7 10.2-20.5 10.2-30.7v-66.6l-279 169v-69.1c0-15.4 5.1-30.7 17.9-38.4l220.1-128zM919 135.7c0-5.1-5.1-7.7-7.7-7.7h-58.9V66.6c0-5.1-5.1-5.1-10.2-5.1l-30.7 5.1c-5.1 0-5.1 2.6-5.1 5.1V128h-56.3c-5.1 0-5.1 5.1-7.7 5.1v38.4h69.1v64c0 5.1 5.1 5.1 10.2 5.1l30.7-5.1c5.1 0 5.1-2.6 5.1-5.1v-56.3h64l-2.5-38.4z"
  4617.           fill="currentColor"></path>
  4618.       </svg>
  4619.       `,
  4620.       chromeFilled: `
  4621.       <svg
  4622.         xmlns="http://www.w3.org/2000/svg"
  4623.         viewBox="0 0 1024 1024"
  4624.         xml:space="preserve">
  4625.         <path
  4626.           d="M938.67 512.01c0-44.59-6.82-87.6-19.54-128H682.67a212.372 212.372 0 0 1 42.67 128c.06 38.71-10.45 76.7-30.42 109.87l-182.91 316.8c235.65-.01 426.66-191.02 426.66-426.67z"
  4627.           fill="currentColor"></path>
  4628.         <path
  4629.           d="M576.79 401.63a127.92 127.92 0 0 0-63.56-17.6c-22.36-.22-44.39 5.43-63.89 16.38s-35.79 26.82-47.25 46.02a128.005 128.005 0 0 0-2.16 127.44l1.24 2.13a127.906 127.906 0 0 0 46.36 46.61 127.907 127.907 0 0 0 63.38 17.44c22.29.2 44.24-5.43 63.68-16.33a127.94 127.94 0 0 0 47.16-45.79v-.01l1.11-1.92a127.984 127.984 0 0 0 .29-127.46 127.957 127.957 0 0 0-46.36-46.91z"
  4630.           fill="currentColor"></path>
  4631.         <path
  4632.           d="M394.45 333.96A213.336 213.336 0 0 1 512 298.67h369.58A426.503 426.503 0 0 0 512 85.34a425.598 425.598 0 0 0-171.74 35.98 425.644 425.644 0 0 0-142.62 102.22l118.14 204.63a213.397 213.397 0 0 1 78.67-94.21zM512.01 938.68H512zM414.76 701.95a213.284 213.284 0 0 1-89.54-86.81L142.48 298.6c-36.35 62.81-57.13 135.68-57.13 213.42 0 203.81 142.93 374.22 333.95 416.55h.04l118.19-204.71a213.315 213.315 0 0 1-122.77-21.91z"
  4633.           fill="currentColor"></path>
  4634.       </svg>
  4635.       `,
  4636.       cpu: `
  4637.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4638.         <path
  4639.           fill="currentColor"
  4640.           d="M320 256a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h384a64 64 0 0 0 64-64V320a64 64 0 0 0-64-64H320zm0-64h384a128 128 0 0 1 128 128v384a128 128 0 0 1-128 128H320a128 128 0 0 1-128-128V320a128 128 0 0 1 128-128z"></path>
  4641.         <path
  4642.           fill="currentColor"
  4643.           d="M512 64a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm-320 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 896a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm160 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm-320 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zM64 512a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0-160a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0 320a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm896-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0 320a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32z"></path>
  4644.       </svg>
  4645.       `,
  4646.       videoPlay: `
  4647.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4648.         <path
  4649.           fill="currentColor"
  4650.           d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768zm-48-247.616L668.608 512 464 375.616v272.768zm10.624-342.656 249.472 166.336a48 48 0 0 1 0 79.872L474.624 718.272A48 48 0 0 1 400 678.336V345.6a48 48 0 0 1 74.624-39.936z"></path>
  4651.       </svg>
  4652.       `,
  4653.       videoPause: `
  4654.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4655.         <path
  4656.           fill="currentColor"
  4657.           d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768zm-96-544q32 0 32 32v256q0 32-32 32t-32-32V384q0-32 32-32zm192 0q32 0 32 32v256q0 32-32 32t-32-32V384q0-32 32-32z"></path>
  4658.       </svg>
  4659.       `,
  4660.       headset: `
  4661.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4662.         <path
  4663.           fill="currentColor"
  4664.           d="M896 529.152V512a384 384 0 1 0-768 0v17.152A128 128 0 0 1 320 640v128a128 128 0 1 1-256 0V512a448 448 0 1 1 896 0v256a128 128 0 1 1-256 0V640a128 128 0 0 1 192-110.848zM896 640a64 64 0 0 0-128 0v128a64 64 0 0 0 128 0V640zm-768 0v128a64 64 0 0 0 128 0V640a64 64 0 1 0-128 0z"></path>
  4665.       </svg>
  4666.       `,
  4667.       monitor: `
  4668.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4669.         <path
  4670.           fill="currentColor"
  4671.           d="M544 768v128h192a32 32 0 1 1 0 64H288a32 32 0 1 1 0-64h192V768H192A128 128 0 0 1 64 640V256a128 128 0 0 1 128-128h640a128 128 0 0 1 128 128v384a128 128 0 0 1-128 128H544zM192 192a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64H192z"></path>
  4672.       </svg>
  4673.       `,
  4674.       documentCopy: `
  4675.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4676.         <path
  4677.           fill="currentColor"
  4678.           d="M128 320v576h576V320H128zm-32-64h640a32 32 0 0 1 32 32v640a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32zM960 96v704a32 32 0 0 1-32 32h-96v-64h64V128H384v64h-64V96a32 32 0 0 1 32-32h576a32 32 0 0 1 32 32zM256 672h320v64H256v-64zm0-192h320v64H256v-64z"></path>
  4679.       </svg>
  4680.       `,
  4681.       picture: `
  4682.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4683.         <path
  4684.           fill="currentColor"
  4685.           d="M160 160v704h704V160H160zm-32-64h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32z"></path>
  4686.         <path
  4687.           fill="currentColor"
  4688.           d="M384 288q64 0 64 64t-64 64q-64 0-64-64t64-64zM185.408 876.992l-50.816-38.912L350.72 556.032a96 96 0 0 1 134.592-17.856l1.856 1.472 122.88 99.136a32 32 0 0 0 44.992-4.864l216-269.888 49.92 39.936-215.808 269.824-.256.32a96 96 0 0 1-135.04 14.464l-122.88-99.072-.64-.512a32 32 0 0 0-44.8 5.952L185.408 876.992z"></path>
  4689.       </svg>
  4690.       `,
  4691.       circleClose: `
  4692.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  4693.         <path
  4694.           fill="currentColor"
  4695.           d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248z"></path>
  4696.         <path
  4697.           fill="currentColor"
  4698.           d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"></path>
  4699.       </svg>
  4700.       `,
  4701.       view: `
  4702.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  4703.         <path                        
  4704.           fill="currentColor"
  4705.           d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"></path>
  4706.       </svg>
  4707.       `,
  4708.       hide: `
  4709.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  4710.         <path
  4711.           fill="currentColor"
  4712.           d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2zM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"></path>
  4713.         <path
  4714.           fill="currentColor"
  4715.           d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z"></path>
  4716.       </svg>
  4717.       `,
  4718.       keyboard: `
  4719.       <svg viewBox="0 0 1123 1024" xmlns="http://www.w3.org/2000/svg">
  4720.         <path
  4721.           d="M1014.122186 1024H109.753483A109.753483 109.753483 0 0 1 0 914.246517V392.917471a109.753483 109.753483 0 0 1 109.753483-109.753484h904.368703a109.753483 109.753483 0 0 1 109.753484 109.753484v521.329046a109.753483 109.753483 0 0 1-109.753484 109.753483zM109.753483 370.966774a21.950697 21.950697 0 0 0-21.950696 21.950697v521.329046a21.950697 21.950697 0 0 0 21.950696 21.950696h904.368703a21.950697 21.950697 0 0 0 21.950697-21.950696V392.917471a21.950697 21.950697 0 0 0-21.950697-21.950697z"></path>
  4722.         <path
  4723.           d="M687.056806 891.198285H307.309753a43.901393 43.901393 0 0 1 0-87.802787h379.747053a43.901393 43.901393 0 0 1 0 87.802787zM175.605573 803.395498a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394zM432.428725 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM561.937835 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM690.349411 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM818.760986 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM947.172562 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM175.605573 546.572347a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394zM304.017149 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM432.428725 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM561.937835 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM690.349411 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM818.760986 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM818.760986 803.395498a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM175.605573 678.276527a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394zM304.017149 678.276527a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM432.428725 678.276527a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM561.937835 678.276527a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM948.270096 803.395498a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394z"></path>
  4724.         <path
  4725.           d="M881.320472 766.079314H689.251876a43.901393 43.901393 0 0 1 0-87.802787h192.068596a21.950697 21.950697 0 0 0 21.950696-21.950696v-65.85209a43.901393 43.901393 0 0 1 87.802787 0v65.85209a109.753483 109.753483 0 0 1-109.753483 109.753483zM305.114684 502.670954H175.605573a43.901393 43.901393 0 0 1 0-87.802787h129.509111a43.901393 43.901393 0 0 1 0 87.802787zM563.03537 365.4791a43.901393 43.901393 0 0 1-43.901394-43.901394v-105.363344A109.753483 109.753483 0 0 1 628.88746 106.460879h61.461951a21.950697 21.950697 0 0 0 21.950696-21.950697V43.901393a43.901393 43.901393 0 0 1 87.802787 0v40.608789a109.753483 109.753483 0 0 1-109.753483 109.753484h-61.461951a21.950697 21.950697 0 0 0-21.950697 21.950696v105.363344a43.901393 43.901393 0 0 1-43.901393 43.901394z"></path>
  4726.       </svg>
  4727.       `,
  4728.     },
  4729.     /**
  4730.      * 动画名
  4731.      * @type {string[]}
  4732.      */
  4733.     animation: [],
  4734.     /**
  4735.      * 是否已初始化
  4736.      */
  4737.     isInit: false,
  4738.     /**
  4739.      * 存储已创建的元素
  4740.      */
  4741.     layer: {
  4742.       /**
  4743.        * 存储已创建的pops.alert
  4744.        * @type { PopsLayerCommonConfig[] }
  4745.        */
  4746.       alert: [],
  4747.       /**
  4748.        * 存储已创建的pops.confirm
  4749.        * @type { PopsLayerCommonConfig[] }
  4750.        */
  4751.       confirm: [],
  4752.       /**
  4753.        * 存储已创建的pops.prompt
  4754.        * @type { PopsLayerCommonConfig[] }
  4755.        */
  4756.       prompt: [],
  4757.       /**
  4758.        * 存储已创建的pops.loading
  4759.        * @type { PopsLayerCommonConfig[] }
  4760.        */
  4761.       loading: [],
  4762.       /**
  4763.        * 存储已创建的pops.iframe
  4764.        * @type { PopsLayerConfig[] }
  4765.        */
  4766.       iframe: [],
  4767.       /**
  4768.        * 存储已创建的pops.tooltip
  4769.        * @type { PopsLayerCommonConfig[] }
  4770.        */
  4771.       tooltip: [],
  4772.       /**
  4773.        * 存储已创建的pops.drawer
  4774.        * @type { PopsLayerCommonConfig[] }
  4775.        */
  4776.       drawer: [],
  4777.       /**
  4778.        * 存储已创建的pops.folder
  4779.        * @type { PopsLayerCommonConfig[] }
  4780.        */
  4781.       folder: [],
  4782.       /**
  4783.        * 存储已创建的pops.panel
  4784.        * @type { PopsLayerCommonConfig[] }
  4785.        */
  4786.       panel: [],
  4787.     },
  4788.     forbiddenScroll: {
  4789.       event(event) {
  4790.         event.preventDefault();
  4791.         return false;
  4792.       },
  4793.     },
  4794.     Utils: PopsUtils,
  4795.     DOMUtils: PopsDOMUtils,
  4796.   };
  4797.  
  4798.   /**
  4799.    * 释放原有的pops控制权
  4800.    * @example
  4801.    * let pops = window.pops.noConflict()
  4802.    */
  4803.   pops.noConflict = function () {
  4804.     if (window.pops) {
  4805.       delete window.pops;
  4806.     }
  4807.     if (AnotherPops) {
  4808.       window.pops = AnotherPops;
  4809.     }
  4810.     return pops;
  4811.   };
  4812.  
  4813.   /**
  4814.    * 初始化CSS、动画
  4815.    */
  4816.   pops.init = function () {
  4817.     if (!this.config.isInit) {
  4818.       /* 处理获取当前所有的动画名 */
  4819.       this.config.isInit = true;
  4820.       let animationStyle = document.createElement("style");
  4821.       animationStyle.innerHTML = this.config.cssText.anim;
  4822.       (document.head || document.body || document.documentElement).appendChild(
  4823.         animationStyle
  4824.       );
  4825.       this.config.animation = PopsUtils.getKeyFrames(animationStyle.sheet);
  4826.       setTimeout(() => {
  4827.         animationStyle.remove();
  4828.       }, 50);
  4829.     }
  4830.   };
  4831.  
  4832.   /**
  4833.    * 通过navigator.userAgent判断是否是手机访问
  4834.    * @param {string} userAgent
  4835.    * @returns {boolean}
  4836.    */
  4837.   pops.isPhone = function (userAgent = navigator.userAgent) {
  4838.     return Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(userAgent));
  4839.   };
  4840.  
  4841.   const PopsHandler = {
  4842.     /**
  4843.      * 创建shadow
  4844.      */
  4845.     handlerShadow() {
  4846.       let $shadowContainer = document.createElement("div");
  4847.       $shadowContainer.className = "pops-shadow-container";
  4848.       let $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
  4849.       return {
  4850.         $shadowContainer,
  4851.         $shadowRoot,
  4852.       };
  4853.     },
  4854.     /**
  4855.      * 处理初始化
  4856.      * @param {ShadowRoot} $shadowRoot
  4857.      * @param {string[]|string} cssText
  4858.      */
  4859.     handleInit($shadowRoot, cssText) {
  4860.       pops.init();
  4861.       if (!arguments.length) {
  4862.         return;
  4863.       }
  4864.       if (Array.isArray(cssText)) {
  4865.         cssText.forEach((text) => {
  4866.           this.handleInit($shadowRoot, text);
  4867.         });
  4868.       } else {
  4869.         let cssStyle = document.createElement("style");
  4870.         cssStyle.setAttribute("type", "text/css");
  4871.         cssStyle.innerHTML = cssText;
  4872.         $shadowRoot.appendChild(cssStyle);
  4873.       }
  4874.     },
  4875.     /**
  4876.      * 处理遮罩层
  4877.      * @param {?{
  4878.      * type: "alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"|"folder"|"panel",
  4879.      * guid: string,
  4880.      * config: PopsAlertDetails,
  4881.      * animElement: HTMLElement,
  4882.      * maskHTML: string,
  4883.      * }} details
  4884.      * @returns { {
  4885.      * maskElement: HTMLDivElement
  4886.      * } }
  4887.      */
  4888.     handleMask(details = {}) {
  4889.       let result = {
  4890.         maskElement: PopsUtils.parseTextToDOM(details.maskHTML),
  4891.       };
  4892.       let isMaskClick = false;
  4893.       /**
  4894.        * 点击其它区域的事件
  4895.        * @param {Event} event
  4896.        * @returns
  4897.        */
  4898.       function clickEvent(event) {
  4899.         event?.preventDefault();
  4900.         event?.stopPropagation();
  4901.         event?.stopImmediatePropagation();
  4902.         let targetLayer = pops.config.layer[details.type];
  4903.         function originalRun() {
  4904.           if (details.config.mask.clickEvent.toClose) {
  4905.             /* 关闭 */
  4906.             PopsUtils.close(
  4907.               details.type,
  4908.               targetLayer,
  4909.               details.guid,
  4910.               details.config,
  4911.               details.animElement
  4912.             );
  4913.           } else if (details.config.mask.clickEvent.toHide) {
  4914.             /* 隐藏 */
  4915.             PopsUtils.hide(
  4916.               details.type,
  4917.               targetLayer,
  4918.               details.guid,
  4919.               details.config,
  4920.               details.animElement,
  4921.               result.maskElement
  4922.             );
  4923.           }
  4924.         }
  4925.         if (details.config.mask.clickCallBack) {
  4926.           details.config.mask.clickCallBack(originalRun);
  4927.         } else {
  4928.           originalRun();
  4929.         }
  4930.         return false;
  4931.       }
  4932.       function isAnimElement(element) {
  4933.         return Boolean(
  4934.           element?.localName?.toLowerCase() === "div" &&
  4935.             element.className &&
  4936.             element.className === "pops-anim" &&
  4937.             element.hasAttribute("anim")
  4938.         );
  4939.       }
  4940.       if (
  4941.         details.config.mask.clickEvent.toClose ||
  4942.         details.config.mask.clickEvent.toHide
  4943.       ) {
  4944.         /* 判断按下的元素是否是pops-anim */
  4945.         PopsDOMUtils.on(
  4946.           details.animElement,
  4947.           ["touchstart", "mousedown"],
  4948.           void 0,
  4949.           function (event) {
  4950.             isMaskClick = isAnimElement(event.composedPath()[0]);
  4951.           }
  4952.         );
  4953.         /* 如果有动画层，在动画层上监听点击事件 */
  4954.         PopsDOMUtils.on(details.animElement, "click", void 0, function (event) {
  4955.           if (isAnimElement(event.composedPath()[0]) && isMaskClick) {
  4956.             return clickEvent(event);
  4957.           }
  4958.         });
  4959.         /* 在遮罩层监听点击事件 */
  4960.         /* 如果有动画层，那么该点击事件触发不了 */
  4961.         PopsDOMUtils.on(result.maskElement, "click", void 0, (event) => {
  4962.           isMaskClick = true;
  4963.           clickEvent(event);
  4964.         });
  4965.       }
  4966.       return result;
  4967.     },
  4968.     /**
  4969.      * 处理获取元素
  4970.      * @param {HTMLDivElement} animElement
  4971.      * @param {"alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"|"folder"|"panel"} type
  4972.      */
  4973.     handleQueryElement(animElement, type) {
  4974.       return {
  4975.         /**
  4976.          * 主元素
  4977.          * @type {?HTMLElement}
  4978.          */
  4979.         popsElement: animElement.querySelector(".pops[type-value"),
  4980.         /**
  4981.          * 确认按钮
  4982.          * @type {?HTMLElement}
  4983.          */
  4984.         btnOkElement: animElement.querySelector(`.pops-${type}-btn-ok`),
  4985.         /**
  4986.          * 取消按钮
  4987.          * @type {?HTMLElement}
  4988.          */
  4989.         btnCancelElement: animElement.querySelector(`.pops-${type}-btn-cancel`),
  4990.         /**
  4991.          * 其它按钮
  4992.          * @type {?HTMLElement}
  4993.          */
  4994.         btnOtherElement: animElement.querySelector(`.pops-${type}-btn-other`),
  4995.         /**
  4996.          * 标题元素
  4997.          * @type {?HTMLElement}
  4998.          */
  4999.         titleElement: animElement.querySelector(`.pops-${type}-title`),
  5000.         /**
  5001.          * 输入框元素
  5002.          * @type {?HTMLTextAreaElement|HTMLInputElement}
  5003.          */
  5004.         inputElement: animElement.querySelector(
  5005.           `.pops-${type}-content textarea[pops]`
  5006.         )
  5007.           ? animElement.querySelector(`.pops-${type}-content textarea[pops]`)
  5008.           : animElement.querySelector(`.pops-${type}-content input[pops]`),
  5009.         /**
  5010.          * 顶部按钮控制层元素
  5011.          * @type {?HTMLElement}
  5012.          */
  5013.         headerControlsElement: animElement.querySelector(
  5014.           ".pops-header-controls"
  5015.         ),
  5016.         /**
  5017.          * iframe元素
  5018.          * @type {?HTMLIFrameElement}
  5019.          */
  5020.         iframeElement: animElement.querySelector("iframe[pops]"),
  5021.         /**
  5022.          * 加载中元素
  5023.          * @type {?HTMLElement}
  5024.          */
  5025.         loadingElement: animElement.querySelector(".pops-loading"),
  5026.         /**
  5027.          * 内容元素
  5028.          * @type {?HTMLElement}
  5029.          */
  5030.         contentElement: animElement.querySelector(`.pops-${type}-content`),
  5031.         /**
  5032.          * 内容侧边栏容器元素
  5033.          * @type {?HTMLElement}
  5034.          */
  5035.         contentAsideElement: animElement.querySelector(
  5036.           `.pops-${type}-content aside.pops-${type}-aside`
  5037.         ),
  5038.         /**
  5039.          * 内容主要区域容器元素
  5040.          * @type {?HTMLElement}
  5041.          */
  5042.         contentSectionContainerElement: animElement.querySelector(
  5043.           `.pops-${type}-content section.pops-${type}-container`
  5044.         ),
  5045.         /**
  5046.          * 内容加载中元素
  5047.          * @type {?HTMLElement}
  5048.          */
  5049.         contentLoadingElement: animElement.querySelector(
  5050.           `.pops-${type}-content-global-loading`
  5051.         ),
  5052.         /**
  5053.          * 顶部缩小按钮
  5054.          * @type {?HTMLElement}
  5055.          */
  5056.         headerMinBtnElement: animElement.querySelector(
  5057.           ".pops-header-control[type='min']"
  5058.         ),
  5059.         /**
  5060.          * 顶部放大按钮
  5061.          * @type {?HTMLElement}
  5062.          */
  5063.         headerMaxBtnElement: animElement.querySelector(
  5064.           ".pops-header-control[type='max']"
  5065.         ),
  5066.         /**
  5067.          * 顶部恢复原样按钮
  5068.          * @type {?HTMLElement}
  5069.          */
  5070.         headerMiseBtnElement: animElement.querySelector(
  5071.           ".pops-header-control[type='mise']"
  5072.         ),
  5073.         /**
  5074.          * 顶部关闭按钮
  5075.          * @type {?HTMLElement}
  5076.          */
  5077.         headerCloseBtnElement: animElement.querySelector(
  5078.           ".pops-header-control[type='close']"
  5079.         ),
  5080.         /**
  5081.          * 文件夹列表元素
  5082.          * @type {?HTMLElement}
  5083.          */
  5084.         folderListElement: animElement.querySelector(".pops-folder-list"),
  5085.         /**
  5086.          * 文件夹列表顶部元素
  5087.          * @type {?HTMLElement}
  5088.          */
  5089.         folderListHeaderElement: animElement.querySelector(
  5090.           ".pops-folder-list .pops-folder-list-table__header-div"
  5091.         ),
  5092.         /**
  5093.          * 文件夹列表行元素
  5094.          * @type {?HTMLTableRowElement}
  5095.          */
  5096.         folderListHeaderRowElement: animElement.querySelector(
  5097.           ".pops-folder-list .pops-folder-list-table__header-div .pops-folder-list-table__header-row"
  5098.         ),
  5099.         /**
  5100.          * 文件夹列表tbody元素
  5101.          * @type {?HTMLTableElement}
  5102.          */
  5103.         folderListBodyElement: animElement.querySelector(
  5104.           ".pops-folder-list .pops-folder-list-table__body-div tbody"
  5105.         ),
  5106.         /**
  5107.          * 文件夹列表primary元素
  5108.          * @type {?HTMLElement}
  5109.          */
  5110.         folderFileListBreadcrumbPrimaryElement: animElement.querySelector(
  5111.           ".pops-folder-list .pops-folder-file-list-breadcrumb-primary"
  5112.         ),
  5113.         /**
  5114.          * 文件夹排序按钮-文件名
  5115.          */
  5116.         folderListSortFileNameElement: animElement.querySelector(
  5117.           '.pops-folder-list-table__sort[data-sort="fileName"]'
  5118.         ),
  5119.         /**
  5120.          * 文件夹排序按钮-修改时间
  5121.          */
  5122.         folderListSortLatestTimeElement: animElement.querySelector(
  5123.           '.pops-folder-list-table__sort[data-sort="latestTime"]'
  5124.         ),
  5125.         /**
  5126.          * 文件夹排序按钮-文件大小
  5127.          */
  5128.         folderListSortFileSizeElement: animElement.querySelector(
  5129.           '.pops-folder-list-table__sort[data-sort="fileSize"]'
  5130.         ),
  5131.       };
  5132.     },
  5133.     /**
  5134.      * 获取事件配置
  5135.      * @param {string} guid
  5136.      * @param {HTMLDivElement} $shadowContainer
  5137.      * @param {ShadowRoot} $shadowRoot
  5138.      * @param {"alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"|"folder"|"panel"} mode 当前弹窗类型
  5139.      * @param {HTMLDivElement} animElement 动画层
  5140.      * @param {HTMLDivElement} popsElement 主元素
  5141.      * @param {HTMLDivElement} maskElement 遮罩层
  5142.      * @param {object} config 当前配置
  5143.      */
  5144.     handleEventDetails(
  5145.       guid,
  5146.       $shadowContainer,
  5147.       $shadowRoot,
  5148.       mode,
  5149.       animElement,
  5150.       popsElement,
  5151.       maskElement,
  5152.       config
  5153.     ) {
  5154.       return {
  5155.         $shadowContainer: $shadowContainer,
  5156.         $shadowRoot: $shadowRoot,
  5157.         element: animElement,
  5158.         animElement: animElement,
  5159.         popsElement: popsElement,
  5160.         maskElement: maskElement,
  5161.         type: "",
  5162.         mode: mode,
  5163.         guid: guid,
  5164.         close() {
  5165.           PopsUtils.close(
  5166.             mode,
  5167.             pops.config.layer[mode],
  5168.             guid,
  5169.             config,
  5170.             animElement
  5171.           );
  5172.         },
  5173.         hide() {
  5174.           PopsUtils.hide(
  5175.             mode,
  5176.             pops.config.layer[mode],
  5177.             guid,
  5178.             config,
  5179.             animElement,
  5180.             maskElement
  5181.           );
  5182.         },
  5183.         show() {
  5184.           PopsUtils.show(
  5185.             mode,
  5186.             pops.config.layer[mode],
  5187.             guid,
  5188.             config,
  5189.             animElement,
  5190.             maskElement
  5191.           );
  5192.         },
  5193.       };
  5194.     },
  5195.     /**
  5196.      * 处理返回的配置，针对popsHandler.handleEventDetails
  5197.      * @returns { {
  5198.      * $shadowContainer: HTMLDivElement,
  5199.      * $shadowRoot: ShadowRoot,
  5200.      * animElement: HTMLElement,
  5201.      * popsElement: HTMLElement,
  5202.      * maskElement: HTMLElement,
  5203.      * close: ()=> void,
  5204.      * hide: ()=> void,
  5205.      * show: ()=> void,
  5206.      * } }
  5207.      */
  5208.     handleResultDetails(details) {
  5209.       let _details_ = Object.assign({}, details);
  5210.       delete _details_["type"];
  5211.       delete _details_["function"];
  5212.       delete _details_["type"];
  5213.       return _details_;
  5214.     },
  5215.     /**
  5216.      * 处理点击事件
  5217.      * @param {HTMLElement} btnElement 按钮元素
  5218.      * @param {"ok"|"close"|"cancel"|"other"} type 触发事件类型
  5219.      * @param {object} event 事件配置，由popsHandler.handleEventDetails创建的
  5220.      * @param {(event)=>{}} callback 点击回调
  5221.      */
  5222.     handleClickEvent(btnElement, type, event, callback) {
  5223.       PopsDOMUtils.on(
  5224.         btnElement,
  5225.         "click",
  5226.         void 0,
  5227.         function () {
  5228.           let _event_ = {
  5229.             type: type,
  5230.           };
  5231.           _event_ = Object.assign(event, _event_);
  5232.           callback(_event_);
  5233.         },
  5234.         {
  5235.           capture: true,
  5236.         }
  5237.       );
  5238.     },
  5239.     /**
  5240.      * 全局监听键盘事件
  5241.      * @param {string|number} keyName 键名|键值
  5242.      * @param {"keyup"|"keypress"|"keydown"} eventName 事件名，默认keypress
  5243.      * @param {?string[]} otherKeyList 组合按键，数组类型，包含ctrl、shift、alt和meta（win键或mac的cmd键）
  5244.      * @param {(event:Event)=> void} callback 回调函数
  5245.      */
  5246.     handleKeyboardEvent(keyName, otherKeyList = [], callback) {
  5247.       let keyboardEvent = function (event) {
  5248.         let _keyName = event.code || event.key;
  5249.         let _keyValue = event.charCode || event.keyCode || event.which;
  5250.         if (otherKeyList.includes("ctrl") && !event.ctrlKey) {
  5251.           return;
  5252.         }
  5253.         if (otherKeyList.includes("alt") && !event.altKey) {
  5254.           return;
  5255.         }
  5256.         if (otherKeyList.includes("meta") && !event.metaKey) {
  5257.           return;
  5258.         }
  5259.         if (otherKeyList.includes("shift") && !event.shiftKey) {
  5260.           return;
  5261.         }
  5262.         if (typeof keyName === "string" && keyName === _keyName) {
  5263.           callback && callback(event);
  5264.         } else if (typeof keyName === "number" && keyName === _keyValue) {
  5265.           callback && callback(event);
  5266.         }
  5267.       };
  5268.       PopsDOMUtils.on(globalThis, "keydown", void 0, keyboardEvent, {
  5269.         capture: true,
  5270.       });
  5271.       return {
  5272.         removeKeyboardEvent() {
  5273.           PopsDOMUtils.off(globalThis, "keydown", void 0, keyboardEvent, {
  5274.             capture: true,
  5275.           });
  5276.         },
  5277.       };
  5278.     },
  5279.     /**
  5280.      * 处理prompt的点击事件
  5281.      * @param {HTMLInputElement} inputElement 输入框
  5282.      * @param {HTMLElement} btnElement 按钮元素
  5283.      * @param {"ok"|"close"} type 触发事件类型
  5284.      * @param {object} event 事件配置，由popsHandler.handleEventDetails创建的
  5285.      * @param {(event)=>{}} callback 点击回调
  5286.      */
  5287.     handlePromptClickEvent(inputElement, btnElement, type, event, callback) {
  5288.       PopsDOMUtils.on(
  5289.         btnElement,
  5290.         "click",
  5291.         void 0,
  5292.         function () {
  5293.           let _event_ = {
  5294.             type: type,
  5295.             text: inputElement.value,
  5296.           };
  5297.           _event_ = Object.assign(event, _event_);
  5298.           callback(_event_);
  5299.         },
  5300.         {
  5301.           capture: true,
  5302.         }
  5303.       );
  5304.     },
  5305.     /**
  5306.      * 处理config.only
  5307.      * @param {"alert"|"confirm"|"prompt"|"loading"|"tooltip"|"iframe"|"drawer"|"folder"|"rightClickMenu"} type 当前弹窗类型
  5308.      * @param {object} config 配置
  5309.      * @returns {object}
  5310.      */
  5311.     handleOnly(type, config) {
  5312.       if (config.only) {
  5313.         if (
  5314.           type === "loading" ||
  5315.           type === "tooltip" ||
  5316.           type === "rightClickMenu"
  5317.         ) {
  5318.           PopsUtils.configRemove([pops.config.layer[type]], "", true);
  5319.         } else {
  5320.           PopsUtils.configRemove(
  5321.             [
  5322.               pops.config.layer.alert,
  5323.               pops.config.layer.confirm,
  5324.               pops.config.layer.prompt,
  5325.               pops.config.layer.iframe,
  5326.               pops.config.layer.drawer,
  5327.               pops.config.layer.folder,
  5328.               pops.config.layer.panel,
  5329.             ],
  5330.             "",
  5331.             true
  5332.           );
  5333.         }
  5334.       } else {
  5335.         config.zIndex = PopsUtils.getPopsMaxZIndex(config.zIndex)["zIndex"] * 2;
  5336.       }
  5337.       return config;
  5338.     },
  5339.     /**
  5340.      * 处理把已创建的元素保存到内部环境中
  5341.      * @param {"alert"|"confirm"|"prompt"|"loading"|"tooltip"|"iframe"|"drawer"|"folder"|"panel"} type 当前弹窗类型
  5342.      * @param {PopsLayerCommonConfig} value
  5343.      */
  5344.     handlePush(type, value) {
  5345.       pops.config.layer[type].push(value);
  5346.     },
  5347.   };
  5348.  
  5349.   const PopsElementHandler = {
  5350.     /**
  5351.      * 获取遮罩层HTML
  5352.      * @param {string} guid
  5353.      * @param {number} zIndex z-index
  5354.      * @param {string} [style=""] style
  5355.      * @returns {string}
  5356.      */
  5357.     getMaskHTML(guid, zIndex, style = "") {
  5358.       zIndex = zIndex - 100;
  5359.       return `<div class="pops-mask" data-guid="${guid}" style="z-index:${zIndex};${style}"></div>`;
  5360.     },
  5361.     /**
  5362.      * 获取动画层HTML
  5363.      * @param {string} guid
  5364.      * @param {"alert"|"confirm"|"iframe"|"loading"|"prompt"|"drawer"|"folder"|"panel"} type
  5365.      * @param {object} config
  5366.      * @param {string} html
  5367.      * @param {string} bottomBtnHTML
  5368.      */
  5369.     getAnimHTML(guid, type, config, html = "", bottomBtnHTML = "") {
  5370.       let popsAnimStyle = "";
  5371.       let popsStyle = "";
  5372.       let popsPosition = config.position || "";
  5373.       if (config.zIndex != null) {
  5374.         popsAnimStyle += `z-index: ${config.zIndex};`;
  5375.         popsStyle += `z-index: ${config.zIndex};`;
  5376.       }
  5377.       if (config.width != null) {
  5378.         popsStyle += `width: ${config.width};`;
  5379.       }
  5380.       if (config.height != null) {
  5381.         popsStyle += `height: ${config.height};`;
  5382.       }
  5383.       /* 是否存在底部按钮 */
  5384.       let hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
  5385.       return `<div 
  5386.                   class="pops-anim"
  5387.                   anim="${config.animation || ""}"
  5388.                   style="${popsAnimStyle};"
  5389.                   data-guid="${guid}">
  5390.                 ${
  5391.                   config.style != null
  5392.                     ? `<style tyle="text/css">${config.style}</style>`
  5393.                     : ""
  5394.                 }
  5395.                 <div
  5396.                     class="pops ${config.class || ""}"
  5397.                     data-bottom-btn="${hasBottomBtn}"
  5398.                     type-value="${type}"
  5399.                     style="${popsStyle}"
  5400.                     position="${popsPosition}"
  5401.                     data-guid="${guid}">
  5402.                     ${html}
  5403.                 </div>
  5404.               </div>`;
  5405.     },
  5406.     /**
  5407.      * 获取顶部按钮层HTML
  5408.      * @param {"alert"|"confirm"|"iframe"|"prompt"|"drawer"|"folder"|"panel"} type
  5409.      * @param {PopsIframeDetails} config
  5410.      * @returns {string}
  5411.      */
  5412.     getHeaderBtnHTML(type, config) {
  5413.       if (!config.btn) {
  5414.         return "";
  5415.       }
  5416.       if (type !== "iframe" && !config.btn?.close?.enable) {
  5417.         return "";
  5418.       }
  5419.       let resultHTML = "";
  5420.       let btnStyle = "";
  5421.       let closeHTML = "";
  5422.       if (type === "iframe" && config.topRightButton?.trim() !== "") {
  5423.         /* iframe的 */
  5424.         let topRightButtonHTML = "";
  5425.         config.topRightButton.split("|").forEach((item) => {
  5426.           item = item.toLowerCase();
  5427.           topRightButtonHTML += `
  5428.           <button class="pops-header-control" type="${item}">
  5429.             <i class="pops-icon">${pops.config.iconSVG[item]}</i>
  5430.           </button>`;
  5431.         });
  5432.         resultHTML = `
  5433.         <div class="pops-header-controls" data-margin>
  5434.             ${topRightButtonHTML}
  5435.           </div>`;
  5436.       } else {
  5437.         if (config.btn?.close?.enable) {
  5438.           closeHTML = `
  5439.           <div class="pops-header-controls">
  5440.             <button class="pops-header-control" type="close" data-header>
  5441.               <i class="pops-icon">${pops.config.iconSVG["close"]}</i>
  5442.             </button>
  5443.           </div>`;
  5444.         }
  5445.         resultHTML = closeHTML;
  5446.       }
  5447.  
  5448.       return resultHTML;
  5449.     },
  5450.     /**
  5451.      * 获取底部按钮层HTML
  5452.      * @param {"alert"|"confirm"|"prompt"|"drawer"|"folder"} type
  5453.      * @param {PopsConfirmDetails|PopsAlertDetails|PopsPromptDetails|PopsDrawerDetails} config
  5454.      * @returns {string}
  5455.      */
  5456.     getBottomBtnHTML(type, config) {
  5457.       if (!config.btn) {
  5458.         return "";
  5459.       }
  5460.       if (
  5461.         !(
  5462.           config.btn?.ok?.enable ||
  5463.           config.btn?.cancel?.enable ||
  5464.           config.btn?.other?.enable
  5465.         )
  5466.       ) {
  5467.         return "";
  5468.       }
  5469.       let btnStyle = "";
  5470.       let resultHTML = "";
  5471.       let okHTML = "";
  5472.       let cancelHTML = "";
  5473.       let ohterHTML = "";
  5474.  
  5475.       if (config.btn.position) {
  5476.         btnStyle += `justify-content: ${config.btn.position};`;
  5477.       }
  5478.       if (config.btn.reverse) {
  5479.         btnStyle += "flex-direction: row-reverse;";
  5480.       }
  5481.       if (config.btn?.ok?.enable) {
  5482.         /* 处理确定按钮的尺寸问题 */
  5483.         let okButtonSizeClassName = "";
  5484.         if (config.btn.ok.size === "large") {
  5485.           okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
  5486.         } else if (config.btn.ok.size === "small") {
  5487.           okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
  5488.         }
  5489.         let okIconHTML = "";
  5490.         if (config.btn.ok.icon !== "") {
  5491.           okIconHTML = `
  5492.           <i class="pops-bottom-icon" is-loading="${
  5493.             config.btn.ok.iconIsLoading
  5494.           }">
  5495.             ${
  5496.               config.btn.ok.icon in pops.config.iconSVG
  5497.                 ? pops.config.iconSVG[config.btn.ok.icon]
  5498.                 : config.btn.ok.icon
  5499.             }
  5500.           </i>`;
  5501.         }
  5502.         okHTML = `
  5503.         <button 
  5504.                 class="pops-${type}-btn-ok ${okButtonSizeClassName}"
  5505.                 type="${config.btn.ok.type}"
  5506.                 data-icon="${config.btn.ok.icon}"
  5507.                 data-rightIcon="${config.btn.ok.rightIcon}"
  5508.         >
  5509.           ${okIconHTML}
  5510.           <span>${config.btn.ok.text}</span>
  5511.         </button>`;
  5512.       }
  5513.       if (config.btn?.cancel?.enable) {
  5514.         /* 处理取消按钮的尺寸问题 */
  5515.         let cancelButtonSizeClassName = "";
  5516.         if (config.btn.cancel.size === "large") {
  5517.           cancelButtonSizeClassName = "pops-button-" + config.btn.cancel.size;
  5518.         } else if (config.btn.cancel.size === "small") {
  5519.           cancelButtonSizeClassName = "pops-button-" + config.btn.cancel.size;
  5520.         }
  5521.         let cancelIconHTML = "";
  5522.         if (config.btn.cancel.icon !== "") {
  5523.           cancelIconHTML = `
  5524.           <i class="pops-bottom-icon" is-loading="${
  5525.             config.btn.cancel.iconIsLoading
  5526.           }">
  5527.           ${
  5528.             config.btn.cancel.icon in pops.config.iconSVG
  5529.               ? pops.config.iconSVG[config.btn.cancel.icon]
  5530.               : config.btn.cancel.icon
  5531.           }
  5532.           </i>`;
  5533.         }
  5534.         cancelHTML = `
  5535.         <button
  5536.                 class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
  5537.                 type="${config.btn.cancel.type}"
  5538.                 data-icon="${config.btn.cancel.icon}"
  5539.                 data-rightIcon="${config.btn.cancel.rightIcon}"
  5540.         >
  5541.           ${cancelIconHTML}
  5542.           <span>${config.btn.cancel.text}</span>
  5543.         </button>`;
  5544.       }
  5545.       if (config.btn?.other?.enable) {
  5546.         /* 处理其它按钮的尺寸问题 */
  5547.         let otherButtonSizeClassName = "";
  5548.         if (config.btn.other.size === "large") {
  5549.           otherButtonSizeClassName = "pops-button-" + config.btn.other.size;
  5550.         } else if (config.btn.other.size === "small") {
  5551.           otherButtonSizeClassName = "pops-button-" + config.btn.other.size;
  5552.         }
  5553.         let otherIconHTML = "";
  5554.         if (config.btn.other.icon !== "") {
  5555.           otherIconHTML = `
  5556.           <i class="pops-bottom-icon" is-loading="${
  5557.             config.btn.other.iconIsLoading
  5558.           }">
  5559.           ${
  5560.             config.btn.other.icon in pops.config.iconSVG
  5561.               ? pops.config.iconSVG[config.btn.other.icon]
  5562.               : config.btn.other.icon
  5563.           }
  5564.           </i>`;
  5565.         }
  5566.         ohterHTML = `
  5567.         <button
  5568.                 class="pops-${type}-btn-other ${otherButtonSizeClassName}"
  5569.                 type="${config.btn.other.type}"
  5570.                 data-icon="${config.btn.other.icon}"
  5571.                 data-rightIcon="${config.btn.other.rightIcon}"
  5572.         >
  5573.           ${otherIconHTML}
  5574.           <span>${config.btn.other.text}</span>
  5575.         </button>`;
  5576.       }
  5577.       if (config.btn.merge) {
  5578.         resultHTML = `
  5579.         <div class="pops-${type}-btn" style="${btnStyle}">
  5580.           ${ohterHTML}
  5581.           <div 
  5582.               class="pops-${type}-btn-merge"
  5583.               style="display: flex;
  5584.                     flex-direction: ${
  5585.                       config.btn.mergeReverse ? "row-reverse" : "row"
  5586.                     };
  5587.           ">
  5588.             ${okHTML}
  5589.             ${cancelHTML}
  5590.           </div>
  5591.         </div>
  5592.         `;
  5593.       } else {
  5594.         resultHTML = `
  5595.         <div class="pops-${type}-btn" style="${btnStyle}">
  5596.           ${okHTML}
  5597.           ${cancelHTML}
  5598.           ${ohterHTML}
  5599.         </div>
  5600.         `;
  5601.       }
  5602.       return resultHTML;
  5603.     },
  5604.     /**
  5605.      * 获取标题style
  5606.      * @param {"alert"|"confirm"|"prompt"|"drawer"|"folder"|"panel"} type
  5607.      * @param {PopsAlertDetails|PopsConfirmDetails|PopsPromptDetails|PopsDrawerDetails} config
  5608.      */
  5609.     getHeaderStyle(type, config) {
  5610.       return {
  5611.         headerStyle: config?.title?.html ? config?.title?.style || "" : "",
  5612.         headerPStyle: config?.title?.html ? "" : config?.title?.style || "",
  5613.       };
  5614.     },
  5615.     /**
  5616.      * 获取内容style
  5617.      * @param {"alert"|"confirm"|"prompt"|"drawer"} type
  5618.      * @param {PopsAlertDetails|PopsConfirmDetails|PopsPromptDetails|PopsDrawerDetails} config
  5619.      */
  5620.     getContentStyle(type, config) {
  5621.       return {
  5622.         contentStyle: config?.content?.html ? config?.content?.style || "" : "",
  5623.         contentPStyle: config?.content?.html
  5624.           ? ""
  5625.           : config?.content?.style || "",
  5626.       };
  5627.     },
  5628.     /**
  5629.      * 将html转换成元素
  5630.      * @param {string} html
  5631.      * @returns {HTMLElement}
  5632.      */
  5633.     parseElement(html) {
  5634.       return PopsUtils.parseTextToDOM(html);
  5635.     },
  5636.   };
  5637.  
  5638.   /**
  5639.    * 普通信息框
  5640.    * @param { PopsAlertDetails } details 配置
  5641.    */
  5642.   pops.alert = function (details) {
  5643.     let that = this;
  5644.     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  5645.     PopsHandler.handleInit($shadowRoot, [
  5646.       pops.config.cssText.index,
  5647.       pops.config.cssText.ninePalaceGridPosition,
  5648.       pops.config.cssText.scrollbar,
  5649.       pops.config.cssText.button,
  5650.       pops.config.cssText.anim,
  5651.       pops.config.cssText.common,
  5652.       pops.config.cssText.alertCSS,
  5653.     ]);
  5654.     /**
  5655.      * @type {PopsAlertDetails}
  5656.      */
  5657.     let config = {
  5658.       title: {
  5659.         text: "默认标题",
  5660.         position: "left",
  5661.         html: false,
  5662.         style: "",
  5663.       },
  5664.       content: {
  5665.         text: "默认内容",
  5666.         html: false,
  5667.         style: "",
  5668.       },
  5669.       btn: {
  5670.         position: "flex-end",
  5671.         ok: {
  5672.           size: "",
  5673.           enable: true,
  5674.           icon: "",
  5675.           rightIcon: false,
  5676.           iconIsLoading: false,
  5677.           text: "确定",
  5678.           type: "primary",
  5679.           callback: function (event) {
  5680.             event.close();
  5681.           },
  5682.         },
  5683.         close: {
  5684.           enable: true,
  5685.           callback: function (event) {
  5686.             event.close();
  5687.           },
  5688.         },
  5689.       },
  5690.       class: "",
  5691.       only: false,
  5692.       width: "350px",
  5693.       height: "200px",
  5694.       position: "center",
  5695.       animation: "pops-anim-fadein-zoom",
  5696.       zIndex: 10000,
  5697.       mask: {
  5698.         enable: false,
  5699.         clickEvent: {
  5700.           toClose: false,
  5701.           toHide: false,
  5702.         },
  5703.         clickCallBack: null,
  5704.       },
  5705.       drag: false,
  5706.       dragLimit: true,
  5707.       dragExtraDistance: 3,
  5708.       dragMoveCallBack() {},
  5709.       dragEndCallBack() {},
  5710.       forbiddenScroll: false,
  5711.       style: void 0,
  5712.       beforeAppendToPageCallBack() {},
  5713.     };
  5714.     config = PopsUtils.assignJSON(config, details);
  5715.     let guid = PopsUtils.getRandomGUID();
  5716.     const PopsType = "alert";
  5717.     config = PopsHandler.handleOnly(PopsType, config);
  5718.  
  5719.     let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  5720.     let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  5721.     let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
  5722.     let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  5723.       PopsType,
  5724.       config
  5725.     );
  5726.     let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
  5727.       PopsType,
  5728.       config
  5729.     );
  5730.     let animHTML = PopsElementHandler.getAnimHTML(
  5731.       guid,
  5732.       PopsType,
  5733.       config,
  5734.       `
  5735.       <div 
  5736.           class="pops-alert-title"
  5737.           style="text-align: ${config.title.position};
  5738.           ${headerStyle}">
  5739.           ${
  5740.             config.title.html
  5741.               ? config.title.text
  5742.               : `<p pops style="${headerPStyle}">${config.title.text}</p>`
  5743.           }
  5744.           ${headerBtnHTML}
  5745.       </div>
  5746.       <div class="pops-alert-content" style="${contentStyle}">
  5747.           ${
  5748.             config.content.html
  5749.               ? config.content.text
  5750.               : `<p pops style="${contentPStyle}">${config.content.text}</p>`
  5751.           }
  5752.       </div>
  5753.       ${bottomBtnHTML}`,
  5754.       bottomBtnHTML
  5755.     );
  5756.     /**
  5757.      * 弹窗的主元素，包括动画层
  5758.      */
  5759.     let animElement = PopsElementHandler.parseElement(animHTML);
  5760.  
  5761.     let {
  5762.       popsElement,
  5763.       headerCloseBtnElement: btnCloseElement,
  5764.       btnOkElement,
  5765.       titleElement,
  5766.     } = PopsHandler.handleQueryElement(animElement, PopsType);
  5767.     /**
  5768.      * 遮罩层元素
  5769.      * @type {?HTMLDivElement}
  5770.      */
  5771.     let maskElement = null;
  5772.     /**
  5773.      * 已创建的元素列表
  5774.      * @type {HTMLElement[]}
  5775.      */
  5776.     let elementList = [animElement];
  5777.  
  5778.     /* 遮罩层元素 */
  5779.     if (config.mask.enable) {
  5780.       let _handleMask_ = PopsHandler.handleMask({
  5781.         type: PopsType,
  5782.         guid: guid,
  5783.         config: config,
  5784.         animElement: animElement,
  5785.         maskHTML: maskHTML,
  5786.       });
  5787.       maskElement = _handleMask_.maskElement;
  5788.       elementList.push(maskElement);
  5789.     }
  5790.     /* 处理返回的配置 */
  5791.     let eventDetails = PopsHandler.handleEventDetails(
  5792.       guid,
  5793.       $shadowContainer,
  5794.       $shadowRoot,
  5795.       PopsType,
  5796.       animElement,
  5797.       popsElement,
  5798.       maskElement,
  5799.       config
  5800.     );
  5801.     /* 为顶部右边的关闭按钮添加点击事件 */
  5802.     PopsHandler.handleClickEvent(
  5803.       btnCloseElement,
  5804.       "close",
  5805.       eventDetails,
  5806.       config.btn.close.callback
  5807.     );
  5808.     /* 为底部ok按钮添加点击事件 */
  5809.     PopsHandler.handleClickEvent(
  5810.       btnOkElement,
  5811.       "ok",
  5812.       eventDetails,
  5813.       config.btn.ok.callback
  5814.     );
  5815.  
  5816.     /* 创建到页面中 */
  5817.     PopsUtils.appendChild($shadowRoot, elementList);
  5818.     if (typeof config.beforeAppendToPageCallBack === "function") {
  5819.       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  5820.     }
  5821.     PopsUtils.appendChild($shadowContainer);
  5822.     if (maskElement != null) {
  5823.       animElement.after(maskElement);
  5824.     }
  5825.     /* 保存 */
  5826.     PopsHandler.handlePush(PopsType, {
  5827.       guid: guid,
  5828.       animElement: animElement,
  5829.       popsElement: popsElement,
  5830.       maskElement: maskElement,
  5831.       $shadowContainer: $shadowContainer,
  5832.       $shadowRoot: $shadowRoot,
  5833.     });
  5834.     /* 拖拽 */
  5835.     if (config.drag) {
  5836.       PopsUtils.drag(popsElement, {
  5837.         dragElement: titleElement,
  5838.         limit: config.dragLimit,
  5839.         extraDistance: config.dragExtraDistance,
  5840.         moveCallBack: config.dragMoveCallBack,
  5841.         endCallBack: config.dragEndCallBack,
  5842.       });
  5843.     }
  5844.  
  5845.     return PopsHandler.handleResultDetails(eventDetails);
  5846.   };
  5847.  
  5848.   /**
  5849.    * 询问框
  5850.    * @param {PopsConfirmDetails} details
  5851.    */
  5852.   pops.confirm = function (details) {
  5853.     let that = this;
  5854.     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  5855.     PopsHandler.handleInit($shadowRoot, [
  5856.       pops.config.cssText.index,
  5857.       pops.config.cssText.ninePalaceGridPosition,
  5858.       pops.config.cssText.scrollbar,
  5859.       pops.config.cssText.button,
  5860.       pops.config.cssText.anim,
  5861.       pops.config.cssText.common,
  5862.       pops.config.cssText.confirmCSS,
  5863.     ]);
  5864.     /**
  5865.      * @type {PopsConfirmDetails}
  5866.      */
  5867.     let config = {
  5868.       title: {
  5869.         text: "默认标题",
  5870.         position: "left",
  5871.         html: false,
  5872.         style: "",
  5873.       },
  5874.       content: {
  5875.         text: "默认内容",
  5876.         html: false,
  5877.         style: "",
  5878.       },
  5879.       btn: {
  5880.         merge: false,
  5881.         mergeReverse: false,
  5882.         reverse: false,
  5883.         position: "flex-end",
  5884.         ok: {
  5885.           enable: true,
  5886.           size: "",
  5887.           icon: "",
  5888.           rightIcon: false,
  5889.           iconIsLoading: false,
  5890.           text: "确定",
  5891.           type: "primary",
  5892.           callback(event) {
  5893.             event.close();
  5894.           },
  5895.         },
  5896.         cancel: {
  5897.           enable: true,
  5898.           size: "",
  5899.           icon: "",
  5900.           rightIcon: false,
  5901.           iconIsLoading: false,
  5902.           text: "关闭",
  5903.           type: "default",
  5904.           callback(event) {
  5905.             event.close();
  5906.           },
  5907.         },
  5908.         other: {
  5909.           enable: false,
  5910.           size: "",
  5911.           icon: "",
  5912.           rightIcon: false,
  5913.           iconIsLoading: false,
  5914.           text: "其它按钮",
  5915.           type: "default",
  5916.           callback(event) {
  5917.             event.close();
  5918.           },
  5919.         },
  5920.         close: {
  5921.           enable: true,
  5922.           callback(event) {
  5923.             event.close();
  5924.           },
  5925.         },
  5926.       },
  5927.       class: "",
  5928.       only: false,
  5929.       width: "350px",
  5930.       height: "200px",
  5931.       position: "center",
  5932.       animation: "pops-anim-fadein-zoom",
  5933.       zIndex: 10000,
  5934.       mask: {
  5935.         enable: false,
  5936.         clickEvent: {
  5937.           toClose: false,
  5938.           toHide: false,
  5939.         },
  5940.         clickCallBack: null,
  5941.       },
  5942.       drag: false,
  5943.       dragLimit: true,
  5944.       dragExtraDistance: 3,
  5945.       dragMoveCallBack() {},
  5946.       dragEndCallBack() {},
  5947.       forbiddenScroll: false,
  5948.       style: void 0,
  5949.       beforeAppendToPageCallBack() {},
  5950.     };
  5951.     config = PopsUtils.assignJSON(config, details);
  5952.     let guid = PopsUtils.getRandomGUID();
  5953.     const PopsType = "confirm";
  5954.     config = PopsHandler.handleOnly(PopsType, config);
  5955.     let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  5956.     let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  5957.     let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
  5958.     let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  5959.       PopsType,
  5960.       config
  5961.     );
  5962.     let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
  5963.       PopsType,
  5964.       config
  5965.     );
  5966.     let animHTML = PopsElementHandler.getAnimHTML(
  5967.       guid,
  5968.       PopsType,
  5969.       config,
  5970.       `
  5971.     <div class="pops-confirm-title" style="text-align: ${
  5972.       config.title.position
  5973.     };${headerStyle}">
  5974. 					${
  5975.             config.title.html
  5976.               ? config.title.text
  5977.               : `<p pops style="${headerPStyle}">${config.title.text}</p>`
  5978.           }
  5979.           ${headerBtnHTML}
  5980. 				</div>
  5981. 				<div class="pops-confirm-content" style="${contentStyle}">
  5982.         ${
  5983.           config.content.html
  5984.             ? config.content.text
  5985.             : `<p pops style="${contentPStyle}">${config.content.text}</p>`
  5986.         }
  5987.           
  5988. 				</div>
  5989. 				${bottomBtnHTML}
  5990.     `,
  5991.       bottomBtnHTML
  5992.     );
  5993.     /**
  5994.      * 弹窗的主元素，包括动画层
  5995.      */
  5996.     let animElement = PopsElementHandler.parseElement(animHTML);
  5997.     let {
  5998.       popsElement,
  5999.       titleElement,
  6000.       headerCloseBtnElement: btnCloseElement,
  6001.       btnOkElement,
  6002.       btnCancelElement,
  6003.       btnOtherElement,
  6004.     } = PopsHandler.handleQueryElement(animElement, PopsType);
  6005.     /**
  6006.      * 遮罩层元素
  6007.      * @type {?HTMLDivElement}
  6008.      */
  6009.     let maskElement = null;
  6010.     /**
  6011.      * 已创建的元素列表
  6012.      * @type {HTMLElement[]}
  6013.      */
  6014.     let elementList = [animElement];
  6015.     if (config.mask.enable) {
  6016.       let _handleMask_ = PopsHandler.handleMask({
  6017.         type: PopsType,
  6018.         guid: guid,
  6019.         config: config,
  6020.         animElement: animElement,
  6021.         maskHTML: maskHTML,
  6022.       });
  6023.       maskElement = _handleMask_.maskElement;
  6024.       elementList.push(maskElement);
  6025.     }
  6026.     let eventDetails = PopsHandler.handleEventDetails(
  6027.       guid,
  6028.       $shadowContainer,
  6029.       $shadowRoot,
  6030.       PopsType,
  6031.       animElement,
  6032.       popsElement,
  6033.       maskElement,
  6034.       config
  6035.     );
  6036.     PopsHandler.handleClickEvent(
  6037.       btnCloseElement,
  6038.       "close",
  6039.       eventDetails,
  6040.       config.btn.close.callback
  6041.     );
  6042.     PopsHandler.handleClickEvent(
  6043.       btnOkElement,
  6044.       "ok",
  6045.       eventDetails,
  6046.       config.btn.ok.callback
  6047.     );
  6048.     PopsHandler.handleClickEvent(
  6049.       btnCancelElement,
  6050.       "cancel",
  6051.       eventDetails,
  6052.       config.btn.cancel.callback
  6053.     );
  6054.     PopsHandler.handleClickEvent(
  6055.       btnOtherElement,
  6056.       "other",
  6057.       eventDetails,
  6058.       config.btn.other.callback
  6059.     );
  6060.  
  6061.     /* 创建到页面中 */
  6062.     PopsUtils.appendChild($shadowRoot, elementList);
  6063.     if (typeof config.beforeAppendToPageCallBack === "function") {
  6064.       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  6065.     }
  6066.     PopsUtils.appendChild($shadowContainer);
  6067.     if (maskElement != null) {
  6068.       animElement.after(maskElement);
  6069.     }
  6070.     PopsHandler.handlePush(PopsType, {
  6071.       guid: guid,
  6072.       animElement: animElement,
  6073.       popsElement: popsElement,
  6074.       maskElement: maskElement,
  6075.       $shadowContainer: $shadowContainer,
  6076.       $shadowRoot: $shadowRoot,
  6077.     });
  6078.     /* 拖拽 */
  6079.     if (config.drag) {
  6080.       0;
  6081.       PopsUtils.drag(popsElement, {
  6082.         dragElement: titleElement,
  6083.         limit: config.dragLimit,
  6084.         extraDistance: config.dragExtraDistance,
  6085.         moveCallBack: config.dragMoveCallBack,
  6086.         endCallBack: config.dragEndCallBack,
  6087.       });
  6088.     }
  6089.     return PopsHandler.handleResultDetails(eventDetails);
  6090.   };
  6091.  
  6092.   /**
  6093.    * 输入框
  6094.    * @param {PopsPromptDetails} details
  6095.    */
  6096.   pops.prompt = function (details) {
  6097.     let that = this;
  6098.     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  6099.     PopsHandler.handleInit($shadowRoot, [
  6100.       pops.config.cssText.index,
  6101.       pops.config.cssText.ninePalaceGridPosition,
  6102.       pops.config.cssText.scrollbar,
  6103.       pops.config.cssText.button,
  6104.       pops.config.cssText.anim,
  6105.       pops.config.cssText.common,
  6106.       pops.config.cssText.promptCSS,
  6107.     ]);
  6108.     /**
  6109.      * @type {PopsPromptDetails}
  6110.      */
  6111.     let config = {
  6112.       title: {
  6113.         text: "默认标题",
  6114.         position: "left",
  6115.         html: false,
  6116.         style: "",
  6117.       },
  6118.       content: {
  6119.         text: "",
  6120.         password: false,
  6121.         row: false,
  6122.         focus: true,
  6123.         placeholder: "默认提示",
  6124.         style: "",
  6125.       },
  6126.       btn: {
  6127.         merge: false,
  6128.         mergeReverse: false,
  6129.         reverse: false,
  6130.         position: "flex-end",
  6131.         ok: {
  6132.           enable: true,
  6133.           size: "",
  6134.           icon: "",
  6135.           rightIcon: false,
  6136.           iconIsLoading: false,
  6137.           text: "确定",
  6138.           type: "success",
  6139.           callback(event) {
  6140.             console.log(event);
  6141.             event.close();
  6142.           },
  6143.         },
  6144.         cancel: {
  6145.           enable: true,
  6146.           size: "",
  6147.           icon: "",
  6148.           rightIcon: false,
  6149.           iconIsLoading: false,
  6150.           text: "关闭",
  6151.           type: "default",
  6152.           callback(event) {
  6153.             console.log(event);
  6154.             event.close();
  6155.           },
  6156.         },
  6157.         other: {
  6158.           enable: false,
  6159.           size: "",
  6160.           icon: "",
  6161.           rightIcon: false,
  6162.           iconIsLoading: false,
  6163.           text: "其它按钮",
  6164.           type: "default",
  6165.           callback(event) {
  6166.             console.log(event);
  6167.             event.close();
  6168.           },
  6169.         },
  6170.         close: {
  6171.           enable: true,
  6172.           callback(event) {
  6173.             console.log(event);
  6174.             event.close();
  6175.           },
  6176.         },
  6177.       },
  6178.       class: "",
  6179.       only: false,
  6180.       width: "350px",
  6181.       height: "200px",
  6182.       position: "center",
  6183.       animation: "pops-anim-fadein-zoom",
  6184.       zIndex: 10000,
  6185.       mask: {
  6186.         enable: false,
  6187.         clickEvent: {
  6188.           toClose: false,
  6189.           toHide: false,
  6190.         },
  6191.         clickCallBack: null,
  6192.       },
  6193.       drag: false,
  6194.       dragLimit: true,
  6195.       dragExtraDistance: 3,
  6196.       dragMoveCallBack() {},
  6197.       dragEndCallBack() {},
  6198.       forbiddenScroll: false,
  6199.       style: void 0,
  6200.       beforeAppendToPageCallBack() {},
  6201.     };
  6202.     config = PopsUtils.assignJSON(config, details);
  6203.     let guid = PopsUtils.getRandomGUID();
  6204.     const PopsType = "prompt";
  6205.     config = PopsHandler.handleOnly(PopsType, config);
  6206.     let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  6207.     let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  6208.     let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
  6209.     let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  6210.       PopsType,
  6211.       config
  6212.     );
  6213.     let { contentPStyle } = PopsElementHandler.getContentStyle(
  6214.       PopsType,
  6215.       config
  6216.     );
  6217.     let animHTML = PopsElementHandler.getAnimHTML(
  6218.       guid,
  6219.       PopsType,
  6220.       config,
  6221.       `
  6222.     <div class="pops-prompt-title" style="text-align: ${
  6223.       config.title.position
  6224.     };${headerStyle}">
  6225.       ${
  6226.         config.title.html
  6227.           ? config.title.text
  6228.           : `<p pops style="${headerPStyle}">${config.title.text}</p>`
  6229.       }
  6230.       ${headerBtnHTML}
  6231.     </div>
  6232.     <div class="pops-prompt-content" style="${contentPStyle}">
  6233.     ${
  6234.       config.content.row
  6235.         ? '<textarea pops="" placeholder="' +
  6236.           config.content.placeholder +
  6237.           '"></textarea>'
  6238.         : '<input pops="" placeholder="' +
  6239.           config.content.placeholder +
  6240.           '" type="' +
  6241.           (config.content.password ? "password" : "text") +
  6242.           '">'
  6243.     }
  6244.     </div>
  6245.    ${bottomBtnHTML}
  6246.     `,
  6247.       bottomBtnHTML
  6248.     );
  6249.     /**
  6250.      * 弹窗的主元素，包括动画层
  6251.      * @type {HTMLDivElement}
  6252.      */
  6253.     let animElement = PopsElementHandler.parseElement(animHTML);
  6254.  
  6255.     let {
  6256.       popsElement,
  6257.       inputElement,
  6258.       headerCloseBtnElement: btnCloseElement,
  6259.       btnOkElement,
  6260.       btnCancelElement,
  6261.       btnOtherElement,
  6262.       titleElement,
  6263.     } = PopsHandler.handleQueryElement(animElement, PopsType);
  6264.     /**
  6265.      * 遮罩层元素
  6266.      * @type {?HTMLDivElement}
  6267.      */
  6268.     let maskElement = null;
  6269.  
  6270.     /**
  6271.      * 已创建的元素列表
  6272.      * @type {HTMLElement[]}
  6273.      */
  6274.     let elementList = [animElement];
  6275.     if (config.mask.enable) {
  6276.       let _handleMask_ = PopsHandler.handleMask({
  6277.         type: PopsType,
  6278.         guid: guid,
  6279.         config: config,
  6280.         animElement: animElement,
  6281.         maskHTML: maskHTML,
  6282.       });
  6283.       maskElement = _handleMask_.maskElement;
  6284.       elementList.push(maskElement);
  6285.     }
  6286.     let eventDetails = PopsHandler.handleEventDetails(
  6287.       guid,
  6288.       $shadowContainer,
  6289.       $shadowRoot,
  6290.       PopsType,
  6291.       animElement,
  6292.       popsElement,
  6293.       maskElement,
  6294.       config
  6295.     );
  6296.     /* 输入框赋值初始值 */
  6297.     inputElement.value = config.content.text;
  6298.     PopsHandler.handlePromptClickEvent(
  6299.       inputElement,
  6300.       btnCloseElement,
  6301.       "close",
  6302.       eventDetails,
  6303.       config.btn.close.callback
  6304.     );
  6305.  
  6306.     PopsHandler.handlePromptClickEvent(
  6307.       inputElement,
  6308.       btnOkElement,
  6309.       "ok",
  6310.       eventDetails,
  6311.       config.btn.ok.callback
  6312.     );
  6313.     PopsHandler.handlePromptClickEvent(
  6314.       inputElement,
  6315.       btnCancelElement,
  6316.       "cancel",
  6317.       eventDetails,
  6318.       config.btn.cancel.callback
  6319.     );
  6320.  
  6321.     PopsHandler.handlePromptClickEvent(
  6322.       inputElement,
  6323.       btnOtherElement,
  6324.       "other",
  6325.       eventDetails,
  6326.       config.btn.other.callback
  6327.     );
  6328.     /* 创建到页面中 */
  6329.     PopsUtils.appendChild($shadowRoot, elementList);
  6330.     if (typeof config.beforeAppendToPageCallBack === "function") {
  6331.       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  6332.     }
  6333.     PopsUtils.appendChild($shadowContainer);
  6334.     if (maskElement != null) {
  6335.       animElement.after(maskElement);
  6336.     }
  6337.     PopsHandler.handlePush(PopsType, {
  6338.       guid: guid,
  6339.       animElement: animElement,
  6340.       popsElement: popsElement,
  6341.       maskElement: maskElement,
  6342.       $shadowContainer: $shadowContainer,
  6343.       $shadowRoot: $shadowRoot,
  6344.     });
  6345.     /* 拖拽 */
  6346.     if (config.drag) {
  6347.       PopsUtils.drag(popsElement, {
  6348.         dragElement: titleElement,
  6349.         limit: config.dragLimit,
  6350.         extraDistance: config.dragExtraDistance,
  6351.         moveCallBack: config.dragMoveCallBack,
  6352.         endCallBack: config.dragEndCallBack,
  6353.       });
  6354.     }
  6355.     /* 设置自动获取焦点 */
  6356.     if (config.content.focus) {
  6357.       inputElement?.focus();
  6358.     }
  6359.  
  6360.     return PopsHandler.handleResultDetails(eventDetails);
  6361.   };
  6362.  
  6363.   /**
  6364.    * 加载层
  6365.    * @param {PopsLoadingDetails} details
  6366.    */
  6367.   pops.loading = function (details) {
  6368.     let that = this;
  6369.     PopsHandler.handleInit();
  6370.     /**
  6371.      * @type {PopsLoadingDetails}
  6372.      */
  6373.     let config = {
  6374.       parent: document.body,
  6375.       content: {
  6376.         text: "加载中...",
  6377.         icon: "loading",
  6378.         style: "",
  6379.       },
  6380.       class: "",
  6381.       only: false,
  6382.       zIndex: 10000,
  6383.       mask: {
  6384.         enable: false,
  6385.         clickEvent: {
  6386.           toClose: false,
  6387.           toHide: false,
  6388.         },
  6389.         clickCallBack: null,
  6390.       },
  6391.       animation: "pops-anim-fadein-zoom",
  6392.       forbiddenScroll: false,
  6393.       style: void 0,
  6394.       addIndexCSS: true,
  6395.     };
  6396.     config = PopsUtils.assignJSON(config, details);
  6397.     let guid = PopsUtils.getRandomGUID();
  6398.     const PopsType = "loading";
  6399.     config = PopsHandler.handleOnly(PopsType, config);
  6400.     let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  6401.     let { contentPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
  6402.     let animHTML = PopsElementHandler.getAnimHTML(
  6403.       guid,
  6404.       PopsType,
  6405.       config,
  6406.       `
  6407.     <div class="pops-loading-content">
  6408.     ${
  6409.       config.addIndexCSS
  6410.         ? `
  6411.         <style type="text/css" data-model-name="index">${pops.config.cssText.index}</style>
  6412.         <style type="text/css" data-model-name="anim">${pops.config.cssText.anim}</style>
  6413.         <style type="text/css" data-model-name="common">${pops.config.cssText.common}</style>
  6414.         `
  6415.         : ""
  6416.     }
  6417.       <style type="text/css" data-model-name="loadingCSS">${
  6418.         pops.config.cssText.loadingCSS
  6419.       }</style>
  6420.       ${
  6421.         config.style != null
  6422.           ? `<style type="text/css">${config.style}</style>`
  6423.           : ""
  6424.       }
  6425.       <p pops style="${contentPStyle}">${config.content.text}</p>
  6426.     </div>
  6427.     `,
  6428.       ""
  6429.     );
  6430.  
  6431.     /**
  6432.      * 弹窗的主元素，包括动画层
  6433.      * @type {HTMLDivElement}
  6434.      */
  6435.     let animElement = PopsElementHandler.parseElement(animHTML);
  6436.  
  6437.     let { popsElement } = PopsHandler.handleQueryElement(animElement, PopsType);
  6438.     /**
  6439.      * 遮罩层元素
  6440.      * @type {?HTMLDivElement}
  6441.      */
  6442.     let maskElement = null;
  6443.     /**
  6444.      * 已创建的元素列表
  6445.      * @type {HTMLElement[]}
  6446.      */
  6447.     let elementList = [animElement];
  6448.     if (config.mask.enable) {
  6449.       let _handleMask_ = PopsHandler.handleMask({
  6450.         type: PopsType,
  6451.         guid: guid,
  6452.         config: config,
  6453.         animElement: animElement,
  6454.         maskHTML: maskHTML,
  6455.       });
  6456.       maskElement = _handleMask_.maskElement;
  6457.       elementList.push(maskElement);
  6458.     }
  6459.     let eventDetails = PopsHandler.handleEventDetails(
  6460.       guid,
  6461.       void 0,
  6462.       void 0,
  6463.       PopsType,
  6464.       animElement,
  6465.       popsElement,
  6466.       maskElement,
  6467.       config
  6468.     );
  6469.     PopsUtils.appendChild(config.parent, elementList);
  6470.     if (maskElement != null) {
  6471.       animElement.after(maskElement);
  6472.     }
  6473.     PopsHandler.handlePush(PopsType, {
  6474.       guid: guid,
  6475.       animElement: animElement,
  6476.       popsElement: popsElement,
  6477.       maskElement: maskElement,
  6478.     });
  6479.  
  6480.     return PopsHandler.handleResultDetails(eventDetails);
  6481.   };
  6482.  
  6483.   /**
  6484.    * iframe层
  6485.    * @param {PopsIframeDetails} details
  6486.    */
  6487.   pops.iframe = function (details) {
  6488.     let that = this;
  6489.     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  6490.     PopsHandler.handleInit($shadowRoot, [
  6491.       pops.config.cssText.index,
  6492.       pops.config.cssText.ninePalaceGridPosition,
  6493.       pops.config.cssText.scrollbar,
  6494.       pops.config.cssText.anim,
  6495.       pops.config.cssText.common,
  6496.       pops.config.cssText.iframeCSS,
  6497.     ]);
  6498.     /**
  6499.      * @type {PopsIframeDetails}
  6500.      */
  6501.     let config = {
  6502.       title: {
  6503.         position: "center",
  6504.         text: "",
  6505.         html: false,
  6506.         style: "",
  6507.       },
  6508.       loading: {
  6509.         enable: true,
  6510.         icon: true,
  6511.         text: "",
  6512.         style: "",
  6513.       },
  6514.       class: "",
  6515.       url: window.location.href,
  6516.       only: false,
  6517.       zIndex: 10000,
  6518.       mask: {
  6519.         enable: false,
  6520.         clickEvent: {
  6521.           toClose: false,
  6522.           toHide: false,
  6523.         },
  6524.         clickCallBack: null,
  6525.       },
  6526.       animation: "pops-anim-fadein-zoom",
  6527.       position: "center",
  6528.       drag: false,
  6529.       dragLimit: true,
  6530.       dragExtraDistance: 3,
  6531.       dragMoveCallBack() {},
  6532.       dragEndCallBack() {},
  6533.       width: "300px",
  6534.       height: "250px",
  6535.       topRightButton: "min|max|mise|close",
  6536.       sandbox: false,
  6537.       forbiddenScroll: false,
  6538.       loadEndCallBack() {},
  6539.       btn: {
  6540.         min: {
  6541.           callback() {},
  6542.         },
  6543.         max: {
  6544.           callback() {},
  6545.         },
  6546.         mise: {
  6547.           callback() {},
  6548.         },
  6549.         close: {
  6550.           callback() {},
  6551.         },
  6552.       },
  6553.       style: void 0,
  6554.       beforeAppendToPageCallBack() {},
  6555.     };
  6556.     config = PopsUtils.assignJSON(config, details);
  6557.     if (config.url == null) {
  6558.       throw "config.url不能为空";
  6559.     }
  6560.     let guid = PopsUtils.getRandomGUID();
  6561.     const PopsType = "iframe";
  6562.     config = PopsHandler.handleOnly(PopsType, config);
  6563.     let maskExtraStyle =
  6564.       config.animation != null && config.animation != ""
  6565.         ? "position:absolute;"
  6566.         : "";
  6567.     let maskHTML = PopsElementHandler.getMaskHTML(
  6568.       guid,
  6569.       config.zIndex,
  6570.       maskExtraStyle
  6571.     );
  6572.     let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  6573.     let iframeLoadingHTML = '<div class="pops-loading"></div>';
  6574.     let titleText =
  6575.       config.title.text.trim() !== "" ? config.title.text : config.url;
  6576.     let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  6577.       PopsType,
  6578.       config
  6579.     );
  6580.     let animHTML = PopsElementHandler.getAnimHTML(
  6581.       guid,
  6582.       PopsType,
  6583.       config,
  6584.       `
  6585.       <div 
  6586.           class="pops-iframe-title"
  6587.           style="text-align: ${config.title.position};${headerStyle}"
  6588.       >
  6589.         ${
  6590.           config.title.html
  6591.             ? titleText
  6592.             : `<p pops style="${headerPStyle}">${titleText}</p>`
  6593.         }
  6594.         ${headerBtnHTML}
  6595.       </div>
  6596. 				<div class="pops-iframe-content">
  6597.           <div class="pops-iframe-content-global-loading"></div>
  6598.           <iframe
  6599.                 src="${config.url}"
  6600.                 pops
  6601.                 ${
  6602.                   config.sandbox
  6603.                     ? "sandbox='allow-forms allow-same-origin allow-scripts'"
  6604.                     : ""
  6605.                 }>
  6606.           </iframe>
  6607.         </div>
  6608.         ${config.loading.enable ? iframeLoadingHTML : ""}
  6609.     `,
  6610.       ""
  6611.     );
  6612.     /**
  6613.      * 弹窗的主元素，包括动画层
  6614.      * @type {HTMLDivElement}
  6615.      */
  6616.     let animElement = PopsElementHandler.parseElement(animHTML);
  6617.     let {
  6618.       popsElement,
  6619.       headerCloseBtnElement,
  6620.       headerControlsElement,
  6621.       titleElement,
  6622.       iframeElement,
  6623.       loadingElement,
  6624.       contentLoadingElement,
  6625.       headerMinBtnElement,
  6626.       headerMaxBtnElement,
  6627.       headerMiseBtnElement,
  6628.     } = PopsHandler.handleQueryElement(animElement, PopsType);
  6629.     /**
  6630.      * 遮罩层元素
  6631.      * @type {?HTMLDivElement}
  6632.      */
  6633.     let maskElement = null;
  6634.     /**
  6635.      * 已创建的元素列表
  6636.      * @type {HTMLElement[]}
  6637.      */
  6638.     let elementList = [animElement];
  6639.     if (config.mask.enable) {
  6640.       let _handleMask_ = PopsHandler.handleMask({
  6641.         type: PopsType,
  6642.         guid: guid,
  6643.         config: config,
  6644.         animElement: animElement,
  6645.         maskHTML: maskHTML,
  6646.       });
  6647.       maskElement = _handleMask_.maskElement;
  6648.       elementList.push(maskElement);
  6649.     }
  6650.  
  6651.     let eventDetails = PopsHandler.handleEventDetails(
  6652.       guid,
  6653.       $shadowContainer,
  6654.       $shadowRoot,
  6655.       PopsType,
  6656.       animElement,
  6657.       popsElement,
  6658.       maskElement,
  6659.       config
  6660.     );
  6661.     eventDetails["iframeElement"] = iframeElement;
  6662.     PopsDOMUtils.on(
  6663.       animElement,
  6664.       PopsDOMUtils.getAnimationEndNameList(),
  6665.       void 0,
  6666.       function () {
  6667.         /* 动画加载完毕 */
  6668.         animElement.style.width = "0%";
  6669.         animElement.style.height = "0%";
  6670.       }
  6671.     );
  6672.  
  6673.     PopsDOMUtils.on(iframeElement, "load", void 0, function () {
  6674.       /* iframe加载中... */
  6675.       loadingElement?.remove();
  6676.       contentLoadingElement.style.animation =
  6677.         "iframeLoadingChange_85 0.3s forwards";
  6678.       PopsDOMUtils.on(
  6679.         contentLoadingElement,
  6680.         PopsDOMUtils.getAnimationEndNameList(),
  6681.         void 0,
  6682.         function () {
  6683.           /* 动画加载完毕就移除 */
  6684.           contentLoadingElement.remove();
  6685.         }
  6686.       );
  6687.       if (config.title.text.trim() === "" && iframeElement.contentDocument) {
  6688.         /* 同域名下的才可以获取网页标题 */
  6689.         titleElement.querySelector("p").innerText =
  6690.           iframeElement.contentDocument.title;
  6691.       }
  6692.       config.loadEndCallBack(eventDetails);
  6693.     });
  6694.     /* 创建到页面中 */
  6695.     PopsUtils.appendChild($shadowRoot, elementList);
  6696.     if (typeof config.beforeAppendToPageCallBack === "function") {
  6697.       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  6698.     }
  6699.     PopsUtils.appendChild($shadowContainer);
  6700.     if (maskElement != null) {
  6701.       animElement.after(maskElement);
  6702.     }
  6703.     /* 拖拽 */
  6704.     if (config.drag) {
  6705.       PopsUtils.drag(popsElement, {
  6706.         dragElement: titleElement,
  6707.         limit: config.dragLimit,
  6708.         extraDistance: config.dragExtraDistance,
  6709.         moveCallBack: config.dragMoveCallBack,
  6710.         endCallBack: config.dragEndCallBack,
  6711.       });
  6712.     }
  6713.     let normalLeft = "";
  6714.     /* 最小化按钮点击事件 */
  6715.  
  6716.     PopsDOMUtils.on(
  6717.       headerMinBtnElement,
  6718.       "click",
  6719.       void 0,
  6720.       (event) => {
  6721.         /**
  6722.          * 所有最小化的iframe数组
  6723.          * @type { HTMLElement[] }
  6724.          */
  6725.         let allMinElementList = [];
  6726.  
  6727.         pops.config.layer.iframe.forEach((item) => {
  6728.           if (
  6729.             item.animElement != animElement &&
  6730.             item.popsElement.getAttribute("type-module") === "min"
  6731.           ) {
  6732.             allMinElementList.push(item.popsElement);
  6733.           }
  6734.         });
  6735.         let maxLeftValue = allMinElementList.length
  6736.           ? allMinElementList.length * 205
  6737.           : 0;
  6738.         popsElement.style.transitionDuration = "";
  6739.         normalLeft = popsElement.style.left;
  6740.         popsElement.style.left = maxLeftValue + "px";
  6741.         popsElement.setAttribute("type-module", "min");
  6742.         animElement
  6743.           .querySelector(".pops-header-controls")
  6744.           .setAttribute("type", "max");
  6745.         config.btn.min.callback(event);
  6746.       },
  6747.       {
  6748.         capture: true,
  6749.       }
  6750.     );
  6751.     /* 最大化按钮点击事件 */
  6752.     PopsDOMUtils.on(
  6753.       headerMaxBtnElement,
  6754.       "click",
  6755.       void 0,
  6756.       (event) => {
  6757.         popsElement.style.transitionDuration = "";
  6758.         normalLeft = popsElement.style.left;
  6759.         popsElement.removeAttribute("type-module");
  6760.         popsElement.setAttribute("type-module", "max");
  6761.         headerControlsElement.setAttribute("type", "max");
  6762.         headerMaxBtnElement.style.setProperty("display", "none");
  6763.         headerMiseBtnElement.style.setProperty("display", "");
  6764.         config.btn.max.callback(event);
  6765.       },
  6766.       {
  6767.         capture: true,
  6768.       }
  6769.     );
  6770.     /* 先隐藏窗口化按钮 */
  6771.     headerMiseBtnElement?.style?.setProperty("display", "none");
  6772.     /* 窗口化按钮点击事件 */
  6773.     PopsDOMUtils.on(
  6774.       headerMiseBtnElement,
  6775.       "click",
  6776.       void 0,
  6777.       (event) => {
  6778.         popsElement.style.transitionDuration = "";
  6779.         popsElement.style.left = normalLeft;
  6780.         headerControlsElement.removeAttribute("type");
  6781.         popsElement.removeAttribute("type-module");
  6782.         /**
  6783.          * 所有最小化的iframe数组
  6784.          * @type { HTMLElement[] }
  6785.          */
  6786.         let allMinElementList = [];
  6787.         pops.config.layer.iframe.forEach((item) => {
  6788.           if (
  6789.             item.animElement != animElement &&
  6790.             popsElement.getAttribute("type-module") === "min"
  6791.           ) {
  6792.             allMinElementList.push(item.popsElement);
  6793.           }
  6794.         });
  6795.         allMinElementList.sort(
  6796.           PopsUtils.sortElementListByProperty(
  6797.             (obj) => {
  6798.               return parseInt(getComputedStyle(obj).left);
  6799.             },
  6800.             (obj) => {
  6801.               return parseInt(getComputedStyle(obj).left);
  6802.             },
  6803.             false
  6804.           )
  6805.         );
  6806.         allMinElementList.forEach((item, index) => {
  6807.           item.style.left = index * 205 + "px";
  6808.         });
  6809.         headerMiseBtnElement.style.setProperty("display", "none");
  6810.         headerMaxBtnElement.style.setProperty("display", "");
  6811.         config.btn.mise.callback(event);
  6812.       },
  6813.       {
  6814.         capture: true,
  6815.       }
  6816.     );
  6817.     /* 关闭按钮点击事件 */
  6818.     PopsDOMUtils.on(
  6819.       headerCloseBtnElement,
  6820.       "click",
  6821.       void 0,
  6822.       (event) => {
  6823.         PopsUtils.configRemove([that.config.layer.iframe], guid, false);
  6824.         setTimeout(() => {
  6825.           let allIsMinElementList = [];
  6826.           pops.config.layer.iframe.forEach((item) => {
  6827.             if (
  6828.               item.animElement != animElement &&
  6829.               popsElement.getAttribute("type-module") === "min"
  6830.             ) {
  6831.               allIsMinElementList.push(item.popsElement);
  6832.             }
  6833.           });
  6834.           allIsMinElementList.sort(
  6835.             PopsUtils.sortElementListByProperty(
  6836.               (obj) => {
  6837.                 return parseInt(getComputedStyle(obj).left);
  6838.               },
  6839.               (obj) => {
  6840.                 return parseInt(getComputedStyle(obj).left);
  6841.               },
  6842.               false
  6843.             )
  6844.           );
  6845.           allIsMinElementList.forEach((item, index) => {
  6846.             item.style.left = index * 205 + "px";
  6847.           });
  6848.         }, 1000 * 0.3);
  6849.         config.btn.close.callback(event);
  6850.       },
  6851.       {
  6852.         capture: true,
  6853.       }
  6854.     );
  6855.  
  6856.     PopsHandler.handlePush(PopsType, {
  6857.       guid: guid,
  6858.       animElement: animElement,
  6859.       popsElement: popsElement,
  6860.       maskElement: maskElement,
  6861.       $shadowContainer: $shadowContainer,
  6862.       $shadowRoot: $shadowRoot,
  6863.     });
  6864.  
  6865.     let result = PopsHandler.handleResultDetails(eventDetails);
  6866.     return result;
  6867.   };
  6868.  
  6869.   /**
  6870.    * 提示框
  6871.    * @param {PopsToolTipDetails} details
  6872.    */
  6873.   pops.tooltip = function (details) {
  6874.     let that = this;
  6875.     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  6876.     PopsHandler.handleInit($shadowRoot, [
  6877.       pops.config.cssText.index,
  6878.       pops.config.cssText.anim,
  6879.       pops.config.cssText.common,
  6880.       pops.config.cssText.tooltipCSS,
  6881.     ]);
  6882.     /**
  6883.      * @type {PopsToolTipDetails}
  6884.      */
  6885.     let config = {
  6886.       target: null,
  6887.       content: "默认文字",
  6888.       position: "top",
  6889.       className: "",
  6890.       alwaysShow: false,
  6891.       triggerShowEventName: "mouseenter touchstart",
  6892.       triggerCloseEventName: "mouseleave touchend",
  6893.       zIndex: 10000,
  6894.       only: false,
  6895.       eventOption: {
  6896.         passive: false,
  6897.         capture: true,
  6898.         once: false,
  6899.       },
  6900.       showBeforeCallBack() {},
  6901.       showAfterCallBack() {},
  6902.       closeBeforeCallBack() {},
  6903.       closeAfterCallBack() {},
  6904.       arrowDistance: 12.5,
  6905.       otherDistance: 0,
  6906.       style: void 0,
  6907.       beforeAppendToPageCallBack() {},
  6908.     };
  6909.     config = PopsUtils.assignJSON(config, details);
  6910.     if (!(config.target instanceof HTMLElement)) {
  6911.       throw "config.target 必须是HTMLElement类型";
  6912.     }
  6913.     let guid = PopsUtils.getRandomGUID();
  6914.     const PopsType = "tooltip";
  6915.     config = PopsHandler.handleOnly(PopsType, config);
  6916.     function getContent() {
  6917.       return typeof config.content === "function"
  6918.         ? config.content()
  6919.         : config.content;
  6920.     }
  6921.     /**
  6922.      * 获取悬浮提示的元素信息
  6923.      */
  6924.     function getToolTipElementInfo() {
  6925.       let _toolTipHTML_ = `<div class="pops-tip"></div>`;
  6926.       let _toolTipElement_ = PopsUtils.parseTextToDOM(_toolTipHTML_);
  6927.       if (
  6928.         typeof config.className === "string" &&
  6929.         config.className.trim() !== ""
  6930.       ) {
  6931.         PopsDOMUtils.addClassName(_toolTipElement_, config.className);
  6932.       }
  6933.       _toolTipElement_.setAttribute("data-guid", guid);
  6934.       _toolTipElement_.style.zIndex = config.zIndex;
  6935.       _toolTipElement_.innerHTML = `
  6936.       <div style="text-align: center;">${getContent()}</div>
  6937.       `;
  6938.       /* 箭头元素 */
  6939.       let _toolTipArrowHTML_ = '<div class="pops-tip-arrow"></div>';
  6940.       let _toolTipArrowNode_ = PopsUtils.parseTextToDOM(_toolTipArrowHTML_);
  6941.       _toolTipElement_.appendChild(_toolTipArrowNode_);
  6942.       if (config.style != null) {
  6943.         /* 添加自定义style */
  6944.         let cssNode = document.createElement("style");
  6945.         cssNode.setAttribute("type", "text/css");
  6946.         cssNode.innerHTML = config.style;
  6947.         _toolTipElement_.appendChild(cssNode);
  6948.       }
  6949.       return {
  6950.         toolTipElement: _toolTipElement_,
  6951.         toolTipArrowElement: _toolTipArrowNode_,
  6952.         toolTipHTML: _toolTipHTML_,
  6953.         toolTipArrowHTML: _toolTipArrowHTML_,
  6954.       };
  6955.     }
  6956.     config.position = config.position.toLowerCase();
  6957.     let { toolTipElement } = getToolTipElementInfo();
  6958.  
  6959.     /**
  6960.      * 设置 提示框的位置
  6961.      * @param {object} positionDetails
  6962.      */
  6963.     function setToolTipPosition(positionDetails) {
  6964.       let positionDetail = positionDetails[config.position.toUpperCase()];
  6965.       if (positionDetail) {
  6966.         toolTipElement.style.left = positionDetail.left + "px";
  6967.         toolTipElement.style.top = positionDetail.top + "px";
  6968.         toolTipElement.setAttribute("data-motion", positionDetail.motion);
  6969.         toolTipElement
  6970.           .querySelector(".pops-tip-arrow")
  6971.           .setAttribute("data-position", positionDetail.arrow);
  6972.       } else {
  6973.         console.error("不存在该位置", config.position);
  6974.       }
  6975.     }
  6976.  
  6977.     /**
  6978.      * 获取 提示框的位置
  6979.      * @param {HTMLElement} targetElement 目标元素
  6980.      * @param {number} arrowDistance 箭头和目标元素的距离
  6981.      * @param {number} otherDistance 其它位置的偏移
  6982.      */
  6983.     function getToolTipPosition(targetElement, arrowDistance, otherDistance) {
  6984.       let targetElement_width = PopsDOMUtils.offset(targetElement).width;
  6985.       let targetElement_height = PopsDOMUtils.offset(targetElement).height;
  6986.       let targetElement_top = PopsDOMUtils.offset(targetElement).top;
  6987.       let targetElement_bottom = PopsDOMUtils.offset(targetElement).bottom;
  6988.       let targetElement_left = PopsDOMUtils.offset(targetElement).left;
  6989.       let targetElement_right = PopsDOMUtils.offset(targetElement).right;
  6990.  
  6991.       let toolTipElement_width = PopsDOMUtils.outerWidth(toolTipElement);
  6992.       let toolTipElement_height = PopsDOMUtils.outerHeight(toolTipElement);
  6993.       /* 目标元素的x轴的中间位置 */
  6994.       let targetElement_X_center_pos =
  6995.         targetElement_left + targetElement_width / 2 - toolTipElement_width / 2;
  6996.       /* 目标元素的Y轴的中间位置 */
  6997.       let targetElement_Y_center_pos =
  6998.         targetElement_top +
  6999.         targetElement_height / 2 -
  7000.         toolTipElement_height / 2;
  7001.       return {
  7002.         TOP: {
  7003.           left: targetElement_X_center_pos - otherDistance,
  7004.           top: targetElement_top - toolTipElement_height - arrowDistance,
  7005.           arrow: "bottom",
  7006.           motion: "fadeInTop",
  7007.         },
  7008.         RIGHT: {
  7009.           left: targetElement_left + targetElement_width + arrowDistance,
  7010.           top: targetElement_Y_center_pos + otherDistance,
  7011.           arrow: "left",
  7012.           motion: "fadeInRight",
  7013.         },
  7014.         BOTTOM: {
  7015.           left: targetElement_X_center_pos - otherDistance,
  7016.           top: targetElement_top + targetElement_height + arrowDistance,
  7017.           arrow: "top",
  7018.           motion: "fadeInBottom",
  7019.         },
  7020.         LEFT: {
  7021.           left: targetElement_left - toolTipElement_width - arrowDistance,
  7022.           top: targetElement_Y_center_pos + otherDistance,
  7023.           arrow: "right",
  7024.           motion: "fadeInLeft",
  7025.         },
  7026.       };
  7027.     }
  7028.     /**
  7029.      * 显示提示框
  7030.      */
  7031.     function showToolTipNode() {
  7032.       if (typeof config.showBeforeCallBack === "function") {
  7033.         let result = config.showBeforeCallBack();
  7034.         if (typeof result === "boolean" && !result) {
  7035.           return;
  7036.         }
  7037.       }
  7038.       if (!PopsUtils.contains($shadowRoot, toolTipElement)) {
  7039.         PopsUtils.appendChild($shadowRoot, toolTipElement);
  7040.       }
  7041.       if (!PopsUtils.contains($shadowContainer)) {
  7042.         if (typeof config.beforeAppendToPageCallBack === "function") {
  7043.           config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  7044.         }
  7045.         PopsUtils.appendChild($shadowContainer);
  7046.       }
  7047.       setToolTipPosition(
  7048.         getToolTipPosition(
  7049.           config.target,
  7050.           config.arrowDistance,
  7051.           config.otherDistance
  7052.         )
  7053.       );
  7054.       if (typeof config.showAfterCallBack === "function") {
  7055.         config.showAfterCallBack(toolTipElement);
  7056.       }
  7057.     }
  7058.     /**
  7059.      * 关闭提示框
  7060.      */
  7061.     function closeToolTipNode() {
  7062.       if (typeof config.closeBeforeCallBack === "function") {
  7063.         let result = config.closeBeforeCallBack(toolTipElement);
  7064.         if (typeof result === "boolean" && !result) {
  7065.           return;
  7066.         }
  7067.       }
  7068.       toolTipElement.setAttribute(
  7069.         "data-motion",
  7070.         toolTipElement.getAttribute("data-motion").replace("fadeIn", "fadeOut")
  7071.       );
  7072.       if (typeof config.closeAfterCallBack === "function") {
  7073.         config.closeAfterCallBack(toolTipElement);
  7074.       }
  7075.     }
  7076.     /**
  7077.      * 绑定 显示事件
  7078.      */
  7079.     function onShowEvent() {
  7080.       PopsDOMUtils.on(
  7081.         config.target,
  7082.         config.triggerShowEventName,
  7083.         null,
  7084.         showToolTipNode,
  7085.         config.eventOption
  7086.       );
  7087.     }
  7088.     /**
  7089.      * 绑定 关闭事件
  7090.      */
  7091.     function onCloseEvent() {
  7092.       PopsDOMUtils.on(
  7093.         config.target,
  7094.         config.triggerCloseEventName,
  7095.         null,
  7096.         closeToolTipNode,
  7097.         config.eventOption
  7098.       );
  7099.     }
  7100.     /**
  7101.      * 取消绑定 显示事件
  7102.      */
  7103.     function offShowEvent() {
  7104.       PopsDOMUtils.off(
  7105.         config.target,
  7106.         null,
  7107.         config.triggerShowEventName,
  7108.         showToolTipNode,
  7109.         {
  7110.           capture: true,
  7111.         }
  7112.       );
  7113.     }
  7114.     /**
  7115.      * 取消绑定 关闭事件
  7116.      */
  7117.     function offCloseEvent() {
  7118.       PopsDOMUtils.off(
  7119.         config.target,
  7120.         null,
  7121.         config.triggerCloseEventName,
  7122.         closeToolTipNode,
  7123.         {
  7124.           capture: true,
  7125.         }
  7126.       );
  7127.     }
  7128.  
  7129.     /**
  7130.      * 即使存在动画属性，但是当前设置的动画Out结束后移除元素
  7131.      */
  7132.     function endEvent() {
  7133.       if (toolTipElement.getAttribute("data-motion").includes("In")) {
  7134.         return;
  7135.       }
  7136.       toolTipElement.remove();
  7137.     }
  7138.     if (config.alwaysShow) {
  7139.       /* 总是显示 */
  7140.       showToolTipNode();
  7141.       return {
  7142.         guid: guid,
  7143.         config: config,
  7144.         toolTipNode: toolTipElement,
  7145.         show: showToolTipNode,
  7146.         close() {
  7147.           PopsDOMUtils.on(
  7148.             toolTipElement,
  7149.             PopsDOMUtils.getAnimationEndNameList(),
  7150.             null,
  7151.             endEvent,
  7152.             config.eventOption
  7153.           );
  7154.           closeToolTipNode();
  7155.         },
  7156.         off: null,
  7157.         on: null,
  7158.       };
  7159.     } else {
  7160.       /* 事件触发才显示 */
  7161.  
  7162.       /**
  7163.        * 进入动画
  7164.        */
  7165.       PopsDOMUtils.on(
  7166.         toolTipElement,
  7167.         "mouseenter touchstart",
  7168.         void 0,
  7169.         function () {
  7170.           if (parseInt(getComputedStyle(this)) > 0.5) {
  7171.             this.style.animationPlayState = "paused";
  7172.           }
  7173.         },
  7174.         config.eventOption
  7175.       );
  7176.       /**
  7177.        * 退出动画
  7178.        */
  7179.       PopsDOMUtils.on(
  7180.         toolTipElement,
  7181.         "mouseleave touchend",
  7182.         void 0,
  7183.         function () {
  7184.           this.style.animationPlayState = "running";
  7185.         },
  7186.         config.eventOption
  7187.       );
  7188.       PopsDOMUtils.on(
  7189.         toolTipElement,
  7190.         PopsDOMUtils.getAnimationEndNameList(),
  7191.         null,
  7192.         endEvent,
  7193.         config.eventOption
  7194.       );
  7195.  
  7196.       onShowEvent();
  7197.       onCloseEvent();
  7198.       return {
  7199.         guid: guid,
  7200.         $shadowContainer: $shadowContainer,
  7201.         $shadowRoot: $shadowRoot,
  7202.         config: config,
  7203.         toolTipNode: toolTipElement,
  7204.         show: showToolTipNode,
  7205.         close: closeToolTipNode,
  7206.         off() {
  7207.           offShowEvent();
  7208.           offCloseEvent();
  7209.         },
  7210.         on() {
  7211.           onShowEvent();
  7212.           onCloseEvent();
  7213.         },
  7214.       };
  7215.     }
  7216.   };
  7217.  
  7218.   /**
  7219.    * 抽屉
  7220.    * @param {PopsDrawerDetails} details
  7221.    */
  7222.   pops.drawer = function (details) {
  7223.     let that = this;
  7224.     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  7225.     PopsHandler.handleInit($shadowRoot, [
  7226.       pops.config.cssText.index,
  7227.       pops.config.cssText.ninePalaceGridPosition,
  7228.       pops.config.cssText.scrollbar,
  7229.       pops.config.cssText.button,
  7230.       pops.config.cssText.anim,
  7231.       pops.config.cssText.common,
  7232.       pops.config.cssText.drawerCSS,
  7233.     ]);
  7234.     /**
  7235.      * @type {PopsDrawerDetails}
  7236.      */
  7237.     let config = {
  7238.       title: {
  7239.         enable: true,
  7240.         position: "center",
  7241.         text: "默认标题",
  7242.         html: false,
  7243.         style: "height: 60px;line-height: 60px;",
  7244.       },
  7245.       content: {
  7246.         text: "默认内容",
  7247.         html: false,
  7248.         style: "overflow: auto;padding: 0px 10px;",
  7249.       },
  7250.       btn: {
  7251.         position: "flex-end",
  7252.         ok: {
  7253.           enable: true,
  7254.           size: "",
  7255.           icon: "",
  7256.           rightIcon: false,
  7257.           iconIsLoading: false,
  7258.           text: "确定",
  7259.           type: "primary",
  7260.           callback(event) {
  7261.             event.close();
  7262.           },
  7263.         },
  7264.         cancel: {
  7265.           enable: true,
  7266.           size: "",
  7267.           icon: "",
  7268.           rightIcon: false,
  7269.           iconIsLoading: false,
  7270.           text: "关闭",
  7271.           type: "default",
  7272.           callback(event) {
  7273.             event.close();
  7274.           },
  7275.         },
  7276.         other: {
  7277.           enable: false,
  7278.           size: "",
  7279.           icon: "",
  7280.           rightIcon: false,
  7281.           iconIsLoading: false,
  7282.           text: "其它按钮",
  7283.           type: "default",
  7284.           callback(event) {
  7285.             event.close();
  7286.           },
  7287.         },
  7288.         close: {
  7289.           enable: true,
  7290.           callback(event) {
  7291.             event.close();
  7292.           },
  7293.         },
  7294.       },
  7295.       mask: {
  7296.         enable: true,
  7297.         clickEvent: {
  7298.           toClose: true,
  7299.           toHide: false,
  7300.         },
  7301.         clickCallBack: null,
  7302.       },
  7303.       class: "",
  7304.       zIndex: 10000,
  7305.       only: false,
  7306.       direction: "right",
  7307.       size: "30%",
  7308.       lockScroll: false,
  7309.       closeOnPressEscape: true,
  7310.       openDelay: 0,
  7311.       closeDelay: 0,
  7312.       borderRadius: 0,
  7313.       style: void 0,
  7314.       beforeAppendToPageCallBack() {},
  7315.     };
  7316.     config = PopsUtils.assignJSON(config, details);
  7317.     let guid = PopsUtils.getRandomGUID();
  7318.     const PopsType = "drawer";
  7319.     config = PopsHandler.handleOnly(PopsType, config);
  7320.     let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  7321.     let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  7322.     let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
  7323.     let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  7324.       PopsType,
  7325.       config
  7326.     );
  7327.     let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
  7328.       PopsType,
  7329.       config
  7330.     );
  7331.     let animHTML = PopsElementHandler.getAnimHTML(
  7332.       guid,
  7333.       PopsType,
  7334.       config,
  7335.       `
  7336.       ${
  7337.         config.title.enable
  7338.           ? `
  7339.       <div class="pops-${PopsType}-title" style="${headerStyle}">
  7340.           ${
  7341.             config.title.html
  7342.               ? config.title.text
  7343.               : `<p 
  7344.                     pops
  7345.                     style="
  7346.                           width: 100%;
  7347.                           text-align: ${config.title.position};
  7348.                           ${headerPStyle}">${config.title.text}</p>`
  7349.           }
  7350.           ${headerBtnHTML}
  7351.       </div>
  7352.       `
  7353.           : ""
  7354.       }
  7355.       
  7356.       <div class="pops-${PopsType}-content" style="${contentStyle}">
  7357.           ${
  7358.             config.content.html
  7359.               ? config.content.text
  7360.               : `<p pops style="${contentPStyle}">${config.content.text}</p>`
  7361.           }
  7362.       </div>
  7363.  
  7364.       ${bottomBtnHTML}
  7365.       `,
  7366.       bottomBtnHTML
  7367.     );
  7368.     /**
  7369.      * 弹窗的主元素，包括动画层
  7370.      */
  7371.     let animElement = PopsElementHandler.parseElement(animHTML);
  7372.     let {
  7373.       popsElement,
  7374.       headerCloseBtnElement,
  7375.       btnCancelElement,
  7376.       btnOkElement,
  7377.       btnOtherElement,
  7378.     } = PopsHandler.handleQueryElement(animElement, PopsType);
  7379.     /**
  7380.      * 遮罩层元素
  7381.      * @type {?HTMLDivElement}
  7382.      */
  7383.     let maskElement = null;
  7384.     /**
  7385.      * 已创建的元素列表
  7386.      * @type {HTMLElement[]}
  7387.      */
  7388.     let elementList = [animElement];
  7389.     if (config.mask.enable) {
  7390.       let _handleMask_ = PopsHandler.handleMask({
  7391.         type: PopsType,
  7392.         guid: guid,
  7393.         config: config,
  7394.         animElement: animElement,
  7395.         maskHTML: maskHTML,
  7396.       });
  7397.       maskElement = _handleMask_.maskElement;
  7398.       elementList.push(maskElement);
  7399.     }
  7400.     let eventDetails = PopsHandler.handleEventDetails(
  7401.       guid,
  7402.       $shadowContainer,
  7403.       $shadowRoot,
  7404.       PopsType,
  7405.       animElement,
  7406.       popsElement,
  7407.       maskElement,
  7408.       config
  7409.     );
  7410.     /* 处理方向 */
  7411.     popsElement.setAttribute("direction", config.direction);
  7412.  
  7413.     /* 处理border-radius */
  7414.     /* 处理动画前的宽高 */
  7415.     if (config.direction === "top") {
  7416.       popsElement.style.setProperty("height", 0);
  7417.       popsElement.style.setProperty(
  7418.         "border-radius",
  7419.         `0px 0px ${config.borderRadius}px ${config.borderRadius}px`
  7420.       );
  7421.     } else if (config.direction === "bottom") {
  7422.       popsElement.style.setProperty("height", 0);
  7423.       popsElement.style.setProperty(
  7424.         "border-radius",
  7425.         `${config.borderRadius}px ${config.borderRadius}px 0px 0px`
  7426.       );
  7427.     } else if (config.direction === "left") {
  7428.       popsElement.style.setProperty("width", 0);
  7429.       popsElement.style.setProperty(
  7430.         "border-radius",
  7431.         `0px ${config.borderRadius}px 0px ${config.borderRadius}px`
  7432.       );
  7433.     } else if (config.direction === "right") {
  7434.       popsElement.style.setProperty("width", 0);
  7435.       popsElement.style.setProperty(
  7436.         "border-radius",
  7437.         `${config.borderRadius}px 0px ${config.borderRadius}px 0px`
  7438.       );
  7439.     }
  7440.  
  7441.     /* 按下Esc键触发关闭 */
  7442.     if (config.closeOnPressEscape) {
  7443.       PopsHandler.handleKeyboardEvent("Escape", [], function () {
  7444.         eventDetails.close();
  7445.       });
  7446.     }
  7447.     /* 待处理的点击事件列表 */
  7448.     let needHandleClickEventList = [
  7449.       { close: headerCloseBtnElement },
  7450.       { cancel: btnCancelElement },
  7451.       { ok: btnOkElement },
  7452.       { other: btnOtherElement },
  7453.     ];
  7454.     needHandleClickEventList.forEach((item) => {
  7455.       let btnName = Object.keys(item)[0];
  7456.       PopsHandler.handleClickEvent(
  7457.         item[btnName],
  7458.         btnName,
  7459.         eventDetails,
  7460.         function (_eventDetails_) {
  7461.           if (typeof config.btn[btnName].callback === "function") {
  7462.             config.btn[btnName].callback(_eventDetails_);
  7463.           }
  7464.         }
  7465.       );
  7466.     });
  7467.  
  7468.     /* 先隐藏，然后根据config.openDelay来显示 */
  7469.     elementList.forEach((element) => {
  7470.       element.style.setProperty("display", "none");
  7471.       if (["top"].includes(config.direction)) {
  7472.         popsElement.style.setProperty("height", config.size);
  7473.         popsElement.style.setProperty("transform", "translateY(-100%)");
  7474.       } else if (["bottom"].includes(config.direction)) {
  7475.         popsElement.style.setProperty("height", config.size);
  7476.         popsElement.style.setProperty("transform", "translateY(100%)");
  7477.       } else if (["left"].includes(config.direction)) {
  7478.         popsElement.style.setProperty("width", config.size);
  7479.         popsElement.style.setProperty("transform", "translateX(-100%)");
  7480.       } else if (["right"].includes(config.direction)) {
  7481.         popsElement.style.setProperty("width", config.size);
  7482.         popsElement.style.setProperty("transform", "translateX(100%)");
  7483.       }
  7484.       element.style.setProperty("display", "");
  7485.     });
  7486.     /* 创建到页面中 */
  7487.     PopsUtils.appendChild($shadowRoot, elementList);
  7488.     if (typeof config.beforeAppendToPageCallBack === "function") {
  7489.       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  7490.     }
  7491.     PopsUtils.appendChild($shadowContainer);
  7492.     setTimeout(() => {
  7493.       setTimeout(() => {
  7494.         popsElement.style.setProperty("transform", "");
  7495.       }, config.openDelay);
  7496.     }, 50);
  7497.  
  7498.     if (maskElement != null) {
  7499.       animElement.after(maskElement);
  7500.     }
  7501.  
  7502.     PopsHandler.handlePush(PopsType, {
  7503.       guid: guid,
  7504.       animElement: animElement,
  7505.       popsElement: popsElement,
  7506.       maskElement: maskElement,
  7507.       $shadowContainer: $shadowContainer,
  7508.       $shadowRoot: $shadowRoot,
  7509.     });
  7510.     return PopsHandler.handleResultDetails(eventDetails);
  7511.   };
  7512.  
  7513.   /**
  7514.    * 文件夹
  7515.    * @param {PopsFolderDetails} details
  7516.    */
  7517.   pops.folder = function (details) {
  7518.     let that = this;
  7519.     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  7520.     PopsHandler.handleInit($shadowRoot, [
  7521.       pops.config.cssText.index,
  7522.       pops.config.cssText.ninePalaceGridPosition,
  7523.       pops.config.cssText.scrollbar,
  7524.       pops.config.cssText.button,
  7525.       pops.config.cssText.anim,
  7526.       pops.config.cssText.common,
  7527.       pops.config.cssText.folderCSS,
  7528.     ]);
  7529.     /**
  7530.      * @type {PopsFolderDetails}
  7531.      */
  7532.     let config = {
  7533.       title: {
  7534.         text: "pops.Folder",
  7535.         position: "center",
  7536.         html: false,
  7537.         style: "",
  7538.       },
  7539.       sort: {
  7540.         name: "latestTime",
  7541.         isDesc: false,
  7542.         callback() {},
  7543.       },
  7544.       folder: [
  7545.         {
  7546.           fileName: "测试文件夹",
  7547.           fileSize: 0,
  7548.           fileType: "",
  7549.           createTime: 0,
  7550.           latestTime: 0,
  7551.           isFolder: true,
  7552.           index: 0,
  7553.           clickEvent() {
  7554.             return [
  7555.               {
  7556.                 fileName: "内部-测试文件.zip",
  7557.                 fileSize: 1025000,
  7558.                 fileType: "zip",
  7559.                 createTime: 1702038410440,
  7560.                 latestTime: 1702039602126,
  7561.                 isFolder: false,
  7562.                 index: 1,
  7563.                 clickEvent() {
  7564.                   console.log("下载文件：", this.fileName);
  7565.                   return "https://update.gf.qytechs.cn/scripts/456485/pops.js";
  7566.                 },
  7567.               },
  7568.             ];
  7569.           },
  7570.         },
  7571.         {
  7572.           fileName: "测试文件.apk",
  7573.           fileSize: 30125682,
  7574.           fileType: "apk",
  7575.           createTime: 1702036410440,
  7576.           latestTime: 1702039410440,
  7577.           isFolder: false,
  7578.           index: 1,
  7579.           clickEvent() {
  7580.             console.log("下载文件：", this.fileName);
  7581.             return "https://update.gf.qytechs.cn/scripts/456485/pops.js";
  7582.           },
  7583.         },
  7584.       ],
  7585.       btn: {
  7586.         merge: false,
  7587.         mergeReverse: false,
  7588.         reverse: false,
  7589.         position: "flex-end",
  7590.         ok: {
  7591.           enable: true,
  7592.           size: "",
  7593.           icon: "",
  7594.           rightIcon: false,
  7595.           iconIsLoading: false,
  7596.           text: "确定",
  7597.           type: "primary",
  7598.           callback(event) {
  7599.             event.close();
  7600.           },
  7601.         },
  7602.         cancel: {
  7603.           enable: true,
  7604.           size: "",
  7605.           icon: "",
  7606.           rightIcon: false,
  7607.           iconIsLoading: false,
  7608.           text: "关闭",
  7609.           type: "default",
  7610.           callback(event) {
  7611.             event.close();
  7612.           },
  7613.         },
  7614.         other: {
  7615.           enable: false,
  7616.           size: "",
  7617.           icon: "",
  7618.           rightIcon: false,
  7619.           iconIsLoading: false,
  7620.           text: "其它按钮",
  7621.           type: "default",
  7622.           callback(event) {
  7623.             event.close();
  7624.           },
  7625.         },
  7626.         close: {
  7627.           enable: true,
  7628.           callback(event) {
  7629.             event.close();
  7630.           },
  7631.         },
  7632.       },
  7633.       class: "",
  7634.       only: false,
  7635.       width: "500px",
  7636.       height: "400px",
  7637.       position: "center",
  7638.       animation: "pops-anim-fadein-zoom",
  7639.       zIndex: 10000,
  7640.       mask: {
  7641.         enable: false,
  7642.         clickEvent: {
  7643.           toClose: false,
  7644.           toHide: false,
  7645.         },
  7646.         clickCallBack: null,
  7647.       },
  7648.       drag: false,
  7649.       dragLimit: true,
  7650.       dragExtraDistance: 3,
  7651.       dragMoveCallBack() {},
  7652.       dragEndCallBack() {},
  7653.       forbiddenScroll: false,
  7654.       style: void 0,
  7655.       beforeAppendToPageCallBack() {},
  7656.     };
  7657.     /**
  7658.      * 图标
  7659.      */
  7660.     const Folder_ICON = {
  7661.       folder:
  7662.         "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABRUExURUxpcf++Hv/ZU//OPv/DL/+9Gv/BI/+4Bf+4Ef/XcP/LOP/TSf/RRP/WTv/JM/+3Ef+9Ff/bhf+5BP/DJf+yDv/imv/kqv/bXP/w0v/fd//calQXUgwAAAAKdFJOUwB///8d3L9enl8sr20gAAACN0lEQVRYw+2Y65abIBRGE1EzVbyNSW18/wctHA6XYw4q9Ee7Vt2AgOHbcVyTOMztdnFxcXFMWf7gKHN190VRKDpFC0iNqB5ZvqpXzJRxHoF7hrAa9/hK9j2oYIA2QA/UqXeyNg5QDBrshhHbUH8xxO+uT7sOJ/tU5a4wh0eK8KmKHTxd28Bfo16pqphep5l6I+R/p8xr668kVghVceH8M5EZYnGhnBKRceGqmaZXPPw2xbO+1xU+8axwe8NfzkIV7xVZdF0AVhi+rWdxIfgmwloE6CkrDCPwJbYUeFgK61icxFcNKyxIxE+WgnllQ0y4+HffzZ8WZtJlCDtz+CzqaaFaVGiWBNEOZZ15zihsT2CFnXk4QStsLohTU3FC+Af8I8JWV1fa1jy8u+hnOUy2vnd5SkeGrJBfHZwDbxe87pfxQvejmMZZYxxdYSoyVyixSvtXFLJ7hWq5xCRNSTozczzHCj8T54kI5d8QCtvZAodDIa7DgRkJaII2hBfaJC7EOE7D076XuIoVBu8oN3kpBLVt4YXBVaUSFSbS5Akb00znSoPn9KCJCN0am7SnGhganC4kKhR2MV0vvEn4M7bFhM3GIZqtgfiPr9BdSAYnrnCX3rQeB/2xsKcHouiBBhpO+phQL9CdjmKqsRkXpkMz57dmfTY1v3k8is26zvN2A6yIbKVqm/tMjFBMp5jpxrWKbsB1dJw/AsC3Lt/YEaK7x1t5r7aLj3ned/fRj1TK3H9wXFxc/F/8BgM0jBZ4nc19AAAAAElFTkSuQmCC",
  7663.       zip: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAFQUExURUxpcYHaOWDM+pryU4TbPXLU/XHT/X3Y/nrZpIffP/+gI4La/+9QTvhycXjQL4fbQvBUUoXaQHrSMf+cJPl2dfBXVf+KMDu99IveRv+ZJf+NLv+PLIncRPdvbV7L+VnJ+P/u5HDS/P+DD1PG93fV/U3D9kTB9WfP+2vR/GLN+nvSM86bL33UNf/69f/+/XzTNP+vVf/iyf/06sOCRsGhYP2Jh/t8e4TVPX3QNat7jnzCMfxfXXrUMP/UqJPoTX/cM/aDLOVjKP/jw/9yC/98HP+GLP/Ec2C63f+iQ4TjNvOiasmpZLuTpfaQgfjEu4HGOPKGeHDC4s2YXU+02/Ozn/B0J+1oYHvSNGnM9P/r291KSNGeZIHGObeOn5zzVM6PHkS978mNUt+EO/GadPOgbZzyVJvyVNG6g66AksCer4LGOc7Mp/eWh/SZVu6adP6VKOSF/TkAAAAKdFJOUwDf39+Af5/9MKAONWYwAAADB0lEQVRYw+3Y+U/TYBjAcUDYIahlA3bCimM3Y64MERWdeExFOhDoxkTnDuTm///R9+jx9MjbtcT4S78sIVnCh+c9mjDGxry8vLz+TwGffxp2/Ql0vYJbJuXzE76AvTc1rc9//gx0vqxg+XwON+XY8+8+BO22NayQKxQKSzZiwMj5D/TgQZtORjASe9U+QKHQfplAilEuhfIxQT/g6P4bwEZbGS1FS08wQR1GzpOCYfSFX7XGEtDSJPaEQCPH2cagwmEwpdfSmQwbXIEaOlAMhsNkRvQ9jEANy9CYoA7Dt6PdqIVBtUY6rdOy2SwbVLEcvR5G8DCjWkSzA3VPAbkcJlCHZbORCBPUY+h+pKzArKZF7MAcvLf4PDUwRsDfikU1O9DwFKDzPKzFYjGMkW8yGIExQbpO9SlAB0BANQxGDDFBdbS0ctdMYMQReHn5Te0n6aIPwf7WBWoLdsEEN57PoR6RFnGSVIdgfV6J47gZHPdqVBBzG6IobutCb+w5B+dkcE5Ys0iQZJBzPOENAsvG1oQ910u+EcplvroDqvLlsrDveEJlyXvox8Xbz6BbEf2KfdcTIlA4On4KOj4SNJBzAQpmUHAxobrkE4E3gyf7YECHE1qAPAWd7+EiAXleHMI/RYYiz5/c41AQaO4+YNXKq7oHpe2dqqmd7XnXhyJJg8Hd8CtoeDcYSDPuwflOp/NOF3qjwzm42Oc/SN/ler3eer8O6q+b6jHBszfRaDSZTD7BzaI2m6UEqPTyxWqrUiwWQ6HQY9zrt1+Y4B8ZTDLASoV4o4G/EJiMat7s5un9QDKhDBLSPGGl4mTJeA+T8pLphFeleCIeTyTwK04mJJvofg9PS3GQMqGjPdSfsjVYdA82jSA6lJa7CWdNEy6QCVedLPnMYg8XQHTJFecTwottAJ3dwwcWSzaBrRY8lHEmGJQvtjbhlQWomzDI/vAIn5TRlmzzkXnSvIcfQWZw0u4D86Rhyc3uB1CXgOCUbT206uA4PJRm9z2oKz/LFBwPjvAvAi8vL69/0l8fxm2XCv5p+gAAAABJRU5ErkJggg==",
  7664.       mp4: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABXUExURUxpcZKU/5eZ/4SG/5CS/5eb/6Sm/4WG/5uc/6eq/4uM/4iJ/6Ci/5ye/6eo/6Ol/46P/5mb/5eY/5GS//39/5SV//X1/6Ol/+3u/+Li/3Z498/Q/7u8/zCK/WcAAAAKdFJOUwB7Pf+fHN2gn59fp7PNAAACSElEQVRYw+3Ya3OjIBQG4FqamnDzTkT9/79zOQdUzG0PJjP7YX2DeAR5EtKZTu3X15EjR46Q851dnuY7nTtd9Kv8nlK9X60/Kl60/qh4wjUFNjx8XSznIlHMClgICadC+2PWYShFvFwpSRAvBSl0MYDyVpB7xfOyLXmVrl2h99cQPw49VTzLV7lGNVF8DW5CExNAeSaCSsHdyi9SUPi2Ds2h/KY4K+epbZANpYoKmRHBGy6qbt7qnAzKaZzU86SDtje91Z8Ddd+2renHIh6sEsFKVS64stKmhRg7rRi2yrM0MEoAW2Osrh4kFaxnEPd9/SiI+94N1jW0qu5icN13Xfl7iCBqPlsQ9y3nObyJCNYr2G9Bt28VzRPBroYWQGNMiy+Dlel116WBP24BrOlcGgC9NaNWdjjV4T0/NHAJgnF6O/Fo/l2wt6Nm4i2w6OOMExtYmQ42Tdd00BxoV85O9TCI0k26hDckgc2acgXtKIeB8WabvaCFL89xZfMuKG1vgZsa2O2dRwbdUng1vBut48bK7dZ9ezgOrC/diQSWUdg0jrhb4a3bJIOCVYrDD6N8HCLol0PP2QC7fexxTgN5yctF4Mxz8wE953gDdHQwSiDQmK9Lr3IamJCcAObPl4u9oBAL4EohRESGC+FrGoiOX+E/lYD4y3kg0CRQJOSfggwbFksZZhg2GKOAGQscrFrE+RrachaC8hfsN7uLCJ24myE9BuQb52HmGcqO3fPtc2jXB3RiTuNy+hPpKcv/mmzHfzOOHDny/+YPi6+BG+WQsHsAAAAASUVORK5CYII=",
  7665.       apk: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABXUExURUxpcXnGVmm8P2q8QHzIV4bNYXXDTWu8P3nFUYfNY26/RIPLXoDJWobNYXHASH3HVnXDTXnFUfT/7onPZej/2/v/+Ov+4cDypVmtLqvjjt38y57afsvyti89dh4AAAAKdFJOUwAQ3/8n3Xugn58KiJgCAAACeElEQVRYw+2Y2ZajIBBAuxuTtIhsKgTx/79zisUlaZ0pPPM048WwBa6FkpyYj4+Li4sLNNW9PqQq133W3e+4lSqr24GpPWms08S23ZhCmnvatsxYtZE4/a229BQZ78nxk27TXWKsWwwFRhA2ITXz3FBp1maxsc6OLF1Usb6cocBYNynAnKcs55tm22CNdYPl9vmXhUhj3bA8PpaMLdUNqc1qZIQggRRUi42lPIvmEzDMZazZBiHYOy9dd4TwezPXj1Pzqgxd7dpVlwnVNAzjS0SiM4N2a893mVC6MF2BsvO+64QQzTgMfadKhSIdQvFJD9p3duyNMf3khB0G44gSLCWcUKxwBhEZM2S0Af/E5TqgVKiI18MrRnKV3mRnhNy/+QbdbQIsF3oTFmr0vGJY8sjUGaGCBEcPht65UIDK2+C3UuUhaKFKSUmngen5tCE07Z+kh7bxMp9RKZRQLYg+CgmZQqk94SaUli8jyoTSx/lmsrHUvR1TqU4KuY3zddKtFVjzOSEd9S7G8UJhDEBKAp+4Hg7Itpg+C6WSKKEMgE8Se4CnaYAsEAbo8wDC5yGFQndAd1II13AfR08JOYlfg3BTTCzD3UktRwqFHJLk/DjCcBE5Wgi6BLH7xtHHuxKG4IRACJKTdhr3sISmM0r+QAgffIaS1u3uwlnIC4WckP1tuPhKhRDjHquvdMlrSdcmncvQgRLCDEpTtr6SNjX5klGkEM+/IyTxmF/bKlkLghbGrZE2SPLFFs1dZLuXMMJ71m1m0vkMdOmI71KC+QVbkQJQjyoPvA+zYnig/8L6vpDPUhUyxgfuSSr9ifH4I/cT/2ZcXFz8v/wC1sx9JR+88xQAAAAASUVORK5CYII=",
  7666.       gif: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABpUExURUxpcf+ubP+eUP+iWP+xcP+nX/+lXf+SO/uPSv+dUP6kX/+XRP+VQP+SO/+jWf+oYf+hVf///f+mXf+tav+ubf+rZ/+eUP+wcP+pZP/s3P+aSf/z6P/48v/UsvqFOf+6hP/jzf/Hmv/cwS4F5mYAAAALdFJOUwDdez2foByg/p/2onNSOQAAAh5JREFUWMPtmNuSoyAQQGeMUaZUxBveRfP/H7lc1VRJptF92Kr1INqtcKqNSSrk6+vm5uYGzMPzrTzcdYFff+I7cPV91/VfNZr6ykNb6WwMypW6tOBk9EoALka/KMtCTCr05OKi0S9AwI02YXXW+KwqMVluMqw4SimjtUGNzwoK0HgobC4Yn42iat6DanfKnPZdhCAersK0KcfXWOtYbPtrTeNBhGnapCt1n2VZX6cWnjDhjjETjNeFudrhWQpfeS7PqJ5vI0DCXJLKPVmkcMH5MQ5CBaGvIRtehIhkGVp2VmgqwgixhSEkciYeDz4jxDkWyD1F0zQhKrJZ3zzG+jKPQMLNJiAd6ogImHw1+1UngQh/8DHqefMS9/ycFhJVIC+ROAvJnrodRn7ARBfIS+TJirOwEp88JsTGx0skF4Tyfd3nZCtQ+c8KG3OXW4FZ1lJHIeUQ1dVXQzY0vMDBbLJEKjsFCxX1oOmHPe02wlHYDsewk0LWW5jPCfPZJuyZm7BTbWmtzHoMTNgpcPuBUg+CCSkfSTv2wTdXskKoUFGMdhhyqlASTcjOlLgLu3iyk0QOwjDqePsFfgeiA4VqykefCUK40KZ457wwuiaMBZFokc7EQTUTiigGCWMH/m1hAhR624TETFSh7Em8Np5DfsE+EgdAy4BQD473M9+SNYPcMV/fImh9CLiWCkKYL4SvSAMv/BXvxL8ZNzc3/y9/ADVfok94AIhIAAAAAElFTkSuQmCC",
  7667.       txt: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABIUExURUxpcTOL+DSL+DqO+Veb/mKl/kmX+zWL+U6a+2ao/0aW+0CS+kyZ/GCk/mWn/1yi/lef/VGc/Pr9/+jz/2+s+46//b3a/4O3/AJIojgAAAAKdFJOUwDf//8d3U+en52O09RGAAACF0lEQVRYw+2Y63ajIBCAW8ZqHC5KrZv3f9MFhpuJTQfrjz1n/SDIbT4npw2pfXu7uLi4YNOP39O367rRvOKja/V9GHOqcTTmVGNnzLlGl6A2WvvWxGsqJo9ajKMuGP0dDcbxSWTShKlGfOOoebCNRTidYxynDXrb1dUU0ziGEF3ZdHHoza14xocMXzJyhLdpmme/e6ag2XeobqYCnBRvs98fm32meId56nnCErk+czfVhlub0CyfOyzaHhTa9XOX9aDQqnU/w7uyjULrcC3i+ocI4iUOVkQ7+8IVeptXWgUgMXD3xjv1UYCyCa6QUAiC0E64fMUBYBTOrUJnROmBryCEMEAsCbYKrSIkCSXS0LYLla8U6K4KSYi+H5ZsWmcJY1ohmpos3OLWmoSF9JajX9m8ckyIRfjIrzM8KERfq5J/yridZwrDx0HF6suOMF24QoXJGijCR/gZboB/TZgDYyd9lqU8mqGPlGQMJR8OfiDjZNjDEQ5S0hlDZ4ushWkqwxSWJCgezOKYIMsw7Ri4wi0g3HfBKuF55bBQTNod1WcKw9kv6yShTQgUQA6A6IsjAEmFJ4RXOF24W+gBcIUxAaiapChi/zolw5rfC+GYUKTqG1G11Vxo2Bn6AJLk8NiPC6JBKOjXLv0ZEruwN2AJe8GCnKzHgEGw4STonm/fub535rNUx8xx4D+RdsPP9Af+m3FxcfH/8hcLt2QJ3T9wuwAAAABJRU5ErkJggg==",
  7668.       exe: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAB4UExURUxpcVq2/kOv/0uw/163/1Cz/0+x/zGp/zad+0Ku/165/Tms/zWq/zKp/1i1/1W1/1K0/0Wv/0Cu/06y//7//0qx/1q2/1y3/1+3/j6p/vf7/y+o/9zu/+r2/yqM9xCa/4LK/8De/3ay/p7P/n3B/rLW/12n+xyf/0XRgzgAAAALdFJOUwDdez2eoByg/Z+vFPUOhAAAAoZJREFUWMPtmOt2mzAMgNuEBDquhhgwgWwMQt//DSfJ3BJIJ3P6a+MLviDkDxE4OaVvbzs7OztsjgfrJUdz3flH/hXvZ1Pfe55/q9HK8iyDluOW4xz3cHcYzIxnMqSZNi3BuJHxALIsTXHLsB+nuOlzmRktbUl71RIKGhitNA3gMxEM3TgxM1rog2UB0vcoopAezIxWwIRrPM0XhX17jJgZT+ETwWwSPBzgGRfCL7C4wojSI91FEfVDJBo2hPNLcYqeCKmFs71pcuAJw0cbkCRREq1wMq4wQVnQNkAbJtuESYKWiAbUtXVVENU9p1iiT4NzrjChRQnNmqK4DBSNDuoj0NjCkbScdGgsUzlXmgplWl4eKcpkZjQVSnHv6yuqapjdhZycLKGUkI+bFK22VOW9ae79xRe5NkInWcIPSOxR5IC7292ArqYqi1qNCfKDIxyzRV7pp8W53RxstX56oMRNQqEaEpTdzVGAc+tKCjRqNLIuWYpBWOsCwScAMOoSaxIKdoWCkEI4dYm06JNkbClQO32KFAZCIWLnN9GBUOoSOwq0TjzkGAnxGhFHxU8B/RUYC2PlEGpcrobIxgpjpYmfI1OAJ4zjWOCaWN+UBTUdxyyeMB5wq8sqlTummAn9V0Jvs7BYpfS3CstqlQ1CRdnX9tcqraFQwcNB98T7/LnKp0cJ+PywhG7s9vjXVXxXp0DHE7qT0lXuK+gIR2g/ydSjV01zZSR8Xdoc26jCbxN6rut5HuZTR/s0eH03xVlCz4B/Q3hYWefDxxua7/s6CAPnL9ijv8DzX8F6DbB9Npwrhvdb5wq5V4bPYb5Lne3lrwKcYDG1+W+k54P9Vw4b/puxs7Pz//IHkvGjBU3hWj4AAAAASUVORK5CYII=",
  7669.       qm: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAA2UExURUxpcdbc4MzO1dTZ3dTZ3s/T2c/T083Q1tXb4NDX287R19HV2+zv8PX29/3+/uPn6b3CzcTI0ZN/xtQAAAAKdFJOUwD////dexCfoCcDaycKAAACJElEQVRYw+2Y4XaDIAyFF2gnEizy/i87SJCCa13i9m9eLAQlHxfsOdZ+fFy6dOmSWPPdvdM063GfDo500yLnG8CfEh3AnxLnQ5bVE+810XYAu4dqiK7m2wH8C4+OKbahcsSfVnQeHTSLjLLNsW0boCE6u5nYbNrNFwe1a6VEVzM3hrUjic5Qc/uUOnyqslsHhosyoutYe/Zek9rhT5oVQNzl4qv4Lgbi92QsIY5UJwRiPUoO5gpiFmDDtsbpHCIXCMsjawnAE2AzjEIgki2kFMRIOEJGLDjEOpPM4UQZvOIiaLxMBKxnGSoEjgqPTmF38QQQHoOgu2RlQDcC4wiMv3XowwgMfrg86YDl+5dvCR/lnjyWJUQ4DczfPxaRngpwDhiZ9UpwCrgcCFRATyUeAaNXOfQFGN7jwkI3O48SAb2n6cNChY7abJ1cW08SLrnIUvZGCT2yVLQKL3aYZcKhvMIhD03xiBeTHugPiNHqgWaFGN6UCKtRA31a6UkSC4BrDsrTZU3KPSzzm7QafjjFWtcJIK3J6IA8PBNJaatrf914xsiBI3KnZGiAkTrcllMcmJfiLREDeXbDKYbrSqDQdD3xXa5J1HLsa98/O164h93Kvke7Uzrguy3spASafwK8a4CSX7BzGZj6rLSL66c0oleVyfRJyYyInipacX6hvzVbae8ymX4G6bvUPA0rTa+WTv5kb1L8J8b0o+4n/s24dOnS/9UX8vFAaEzio+4AAAAASUVORK5CYII=",
  7670.       php: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcTbUrDrbszvetTXYrDnasjXQqTPIojfTrDvftTTMpjPKpDnZsTPIozXOqDjXrzHGoTbRqjfUre7/++T++Pf//SfCmxm3j1fXt7Hx4UvNrNL78XHfw8T26o3o0eeFKfsAAAAKdFJOUwA9//8c3Xign5/8SMcgAAADDklEQVRYw+2Y65qjIAyGp9ppRxBERcTj/V/mJsHTtN3dMNt/66dAEsjbgE/7jPPxcerUqVNsXW7Zb3WJx12z9E/6vMbyPtP0rcQsTd9KvKbpe4k3SkneR8wWVrL0yb8SM2QkQYGZYEsITnckMUteKX2KsImvgS/EJT4B86XtXhwx2xD5kp3nCwVHaHTnbOJXsuWv2Utd+WOJ+RcLmJOSpREw30T01U7yCx9Y0H0g+W6YIZRsYRxvfODGK/KiQHtqGjsePwU/MmMCi+84GArfgEZ0izBHHecQvzAFQaGyMBTFDDzbV2iuYWhcYBEgB1Ww42Yw1fdoDHDR3I00JhaAs1ndOCCUUS2lzLa2HgNj3TT1OIKLxIruiAorFPQz1GU9muEIx+CHeRxYQFwaUih/dmCVeISTMx1EBl9t4gKD/FAjz6AJoHp2znV1U0/+Z0A/1XXdOaex1hrYvRBtT8H8J8AcUyflBO64A3sQZSmJaOdIYInXDAzbtxIdPVCxYJoWnjQ86hhgCXkgKsoYNEsPkHo0OGN6/KAZglg5E4gSdIRTT/CRqhXEhmJt1+uwKgYYTmvqwdahWr3zXDxQOyDCF2NKwEHK7IhnkdeqMhqIRD9Za6cKjhC/cnCE/cIzOgqo6SrFQhz1DP0gZElG4C1rmEAQVKiR2A1dLzos1AmtyQWepjUgFlBvAqLyvYONWjhC9HuvWiTrCOB9X66la9vWjMCzHurSBlwndTRQaIFVQJPGGUFHqJBD7r4BLbhbFmsGkiUeYbdsFPxwhTV3ToVrfQKToZlxGqbRoRlmwhTNsYFbCsg4P3rY6pNgngWUa4IMjZ6MO0TlNssDEoS6BaLgl1qtrkTRiEt4wJAm9pKUXIuSa30xFUqp5IPEY0CqEOIB1Yo8cNSjFRZxgUrReuzRRlfto5ShgVjALU+9lDyabCBXHOBtW20eLBOaMSaM4HL+gr1gmtlBmG82NjrrHFys14A7MgizGQepbQpuzo7xBfw74lnrNPdd6no3LN35b6TX2/2vuv3gvxmnTp36f/ULf0R1znQ7804AAAAASUVORK5CYII=",
  7671.       pdf: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABUUExURUxpcf9zfP9ldv98gP92fP9+gf9we/9md/9yfP9/gv9/gf93fv90ff9od/9ref9ve/9ldv/x8f/q6v/8/PlYaP/g4f6lq/63vP2Ejv6Um/7Iy//S1LO+3cAAAAAKdFJOUwA93/8c3Xugn58XiwqYAAACVklEQVRYw+2Y23KjMAxAmzolxXc7tYHw//+5kmxI2tBWMDx0ZjkhMr6dkWoeSl5eDg4ODticmvZbTut151b+xNt5re9Nyl2NrZS7Gs9S7mts5M7GVu5sJKH4KhDbjS1shu2CKA36yj2ZaZ5vbGdNbT9zH+MaW8GFaeQLmcYF4XAbu37J2HKFiparyReu12ta+oOKEztDVXwKP+mKdKV3H8a7ZkWGqmxWihIEoVLT+FyA4tTc4g68VI39LHyGI3yva0WVKl1KzroOimkOvu8rhJNWmY6Eg17IcL0QcFRzkGovofZYc/C7ZahNBuHNbs+wpHKPrscH2yqt4YIBbGlOc4WPYK8rp/w4WhexhPoJem6SeJ7YKMRTDteQdxN2odDvIXRwpRBSjhD6rUJXL/xoPUBynRohjkL0Geh1nWILYblzk/cWQhx0DymGFDFCvqSDFSyhc64YCzKisBvDA1HqsoAvLBmil44khk/EXNesEhIiF1eMMaVaMWa8UahyimRLacy98xmdwM3ZTcKhbE+pG9xHIY+QaOf9JmFGW4hpIJU31npsMZgtJZMP60MJ2GDIGl/cbo3QAs5aUeqNqfe2DtVgax86bCFQE0wZ6lvSERzhpW6hE0np5r198sysEBqL5wm+D/sDlxUZep+73MMJ7CQs5/mLjys0pqSIj4uh8mdM7dTIE8KmCZLXW1MnHma5Qj4sofnrwmZhn3+I0Ph5gvMf7Am2ELjX0z21ZKozJUDDeg24eDaciuH99pXre2W+S52ZOV74b6Tn5vIrzYZfMw4ODv5f/gEm33Cvx+zPHgAAAABJRU5ErkJggg==",
  7672.       Null: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAA2UExURUxpcdbc4MzO1dTZ3dTZ3s/T2c/T083Q1tXb4NDX287R19HV2+zv8PX29/3+/uPn6b3CzcTI0ZN/xtQAAAAKdFJOUwD////dexCfoCcDaycKAAACJElEQVRYw+2Y4XaDIAyFF2gnEizy/i87SJCCa13i9m9eLAQlHxfsOdZ+fFy6dOmSWPPdvdM063GfDo500yLnG8CfEh3AnxLnQ5bVE+810XYAu4dqiK7m2wH8C4+OKbahcsSfVnQeHTSLjLLNsW0boCE6u5nYbNrNFwe1a6VEVzM3hrUjic5Qc/uUOnyqslsHhosyoutYe/Zek9rhT5oVQNzl4qv4Lgbi92QsIY5UJwRiPUoO5gpiFmDDtsbpHCIXCMsjawnAE2AzjEIgki2kFMRIOEJGLDjEOpPM4UQZvOIiaLxMBKxnGSoEjgqPTmF38QQQHoOgu2RlQDcC4wiMv3XowwgMfrg86YDl+5dvCR/lnjyWJUQ4DczfPxaRngpwDhiZ9UpwCrgcCFRATyUeAaNXOfQFGN7jwkI3O48SAb2n6cNChY7abJ1cW08SLrnIUvZGCT2yVLQKL3aYZcKhvMIhD03xiBeTHugPiNHqgWaFGN6UCKtRA31a6UkSC4BrDsrTZU3KPSzzm7QafjjFWtcJIK3J6IA8PBNJaatrf914xsiBI3KnZGiAkTrcllMcmJfiLREDeXbDKYbrSqDQdD3xXa5J1HLsa98/O164h93Kvke7Uzrguy3spASafwK8a4CSX7BzGZj6rLSL66c0oleVyfRJyYyInipacX6hvzVbae8ymX4G6bvUPA0rTa+WTv5kb1L8J8b0o+4n/s24dOnS/9UX8vFAaEzio+4AAAAASUVORK5CYII=",
  7673.       ipa: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABUUExURUxpcUOv/zar/1K0/1Cz/0+x/1q2/jGp/0Ku/163/zGp/1a1/zus/1q2/02y/0ew/0Gu//f8/164/+/4/+f1/9fu/yek/73j/6TY/xad/43O/3nG/21bnhoAAAAKdFJOUwB7//+gJ92gn59E+c9oAAACbUlEQVRYw+2Y27aqIBRAd5iVsLiICKT//5+Hi5hmdcD2wxnjOIPF4jZdPXX5+Tk4ODjIpj41b6l3+Br5iUupsr5I+avGVB99GvcaayqpI4ioz2MWJnGl0HiiNCpfIuNeibFZ6OQ6ysdqgbGhWeQbvZDQGMjCQOYlUmZsCHFXSIoTNEWvjXu5xjNZQVOgC3Hkskv4ict+YfXa2GQJq4r4lkI1z+UoSUhj9w+p84QrSEqGvpeLaeC0QzhBTdca8bx63i+0bavGvULmG1sNUrXKIu7SxU6ZcLoV7jM2qN5ixKJwkrJMIVtRxWG0g9Z8teQpEKZbZLB2kAzf9WiNsXL9uOIKiVVd23bKDLZ3icss+UpovMWTxlYZUii8hZPcvRgfZs+MkYKFPR/YLUfI3VkP41RtfL3Ugk/brmcKw3F3YdwU2A0a0q7nnC0MmI1QUeBLbkVC4YTzKzZViS+EYLpnFOd7hOK9UO4QCi6CUsCgNkYreNp2TeQJEzCqFyWKJdlC7hvwPji6h1d1hkSVr7O0QoGNCjqlQvdDp/phT4WTcOyjxvuS+hshCKM2GATlQogd9FTign7UMD0NMoUw4S4gbZ+MvdUo7PltgDxhOu3QyARj7/Gj4RoWFFXoC0GaGacydhhsSEgoML2FYiEAvovRjuzuAPdBxe8YSiu8wpPRox0hWfvyhWgOgLHWGDnc6JLZFbJrltDfjneQv4fiEJdR3ExZlhB9BFazXxCif0aIF/ExxmQKOE94SofxQxrTqWMHig3lfIOt8Qb0dpr1U+WKs8l5xw7I9UHmb6n6+qv1xT8xrn/ltOffjIODg/+WP3HMcIG4JOLbAAAAAElFTkSuQmCC",
  7674.       doc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABIUExURUxpcTSL+DmO+VSd/k6Y/Vmg/kOT+jSL+UeW+1uh/1ig/k6a/T6R+l2i/0SU+0mX/Oz1//n8/y6G99fp/3ex/J7I/77b/4u9/gFOo+kAAAAKdFJOUwD///8n3Xugn58WcbRuAAACn0lEQVRYw+2Ya3ekIAyGCzozHQFRUPz//3RzQaSXbYPtOfthfccoCcljEM9pZ15eLl26dEms/v78q/oTvKf7SrdWZH9z7leJT+d+ldhTzQCfooH9oUw0Ee8D1qPyZXBsOxDdFuJzkKiBKAM2EIVAObEGdtlqv0SkRAB2XTfgQSMao5M/FKHpmxDYvdHO2G9S69YE/FD+5i5szxMdfq1eBDSYasiMYY8DJkcPuwuAr12uxNO2LgaHGWCM29Yhe3g7yZpfTa41xq/THJ3BNunUGZ8gMnAAs15FQBbUjHGe57W4IDfN87T44suAXUZ6WwFZCwDnZSx+S4cA1AeQnwEBp2X054DjAVxiXPclzyeAno4d6I2DwbT5/Rky0IuBnnjeH8AVrrC7PgPtniED+l0Z6D1txTwn7w8gp5wEJuLh+1KA/jRwWv2GFGwymR8CFQEH7DMmRG0ZOLYCucAyEFFx0REvWwGOcuAIgnw4qwgrRdCUVNhgMEFgQiBO4yEGkqyielB0IahEw5mBWSeBcQ1KB7fjfw5MXlmrw5rdRf8QGJegrbVqTNltBtrRVsC4agU+tLjECkhJIiA0A+koBqYBGsSI4kUD0I6cJAVSOjw12ljcEcJDi0PKQBKkSDvkfAJGeAU138PSy5iBvIYmIO1rTAu8MiUwJogYVVIkwMcBVAb+jFKDOQCL3lZ3BOyjCQhLROkKSBHVDNRQSqb28gyliOIImQioK0ExC2E5oqp5GZBrbVX3PmJ3p7nD7/TPgEpXD0oVU8XN00oGpEqsUQc5UxWb2k0EVG/F2Ix4LwnwXld+AtF1WPIfbK8aJPqq8pDzJCsG4YICV4S9NByUUFwt/C7VP7AgUBGcw0cmTQZhf/wjxuNb3c/8mnHp0qX/Vn8A5AVWOPvxckoAAAAASUVORK5CYII=",
  7675.       xls: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcYXMX2m8Pmm8P3zJWYbNYXvGVGu9QHrGU4jOZITMX4fOY4HKW3fET3LBSm+/RnrGU37IV2u9QWm7P22+Q+r94PP/7dv2zfv/+GGyNlmsLsfrtaTZiLPhm5TQdN9r514AAAAKdFJOUwB/e98c3T2gn5+4KvYSAAACu0lEQVRYw+2Y63qjIBCGmzRtqhwV1Arq/V/mDgMeYtLtkM2/9ROBGWZe0aB96NvboUOHDpH1eSp+1Gc+7lKwv+njksv7YOylxIKxlxIvjL2WeGIvJhYlY1BYiRU0ZahZcqYjh1ggJCqmL8bcCVejE4tyL/awSybeA38QlXgL5PsuzyYWMYmvhfNECS3nWDCGRiw4T0lr2bjwLCOSnyjAL56hz2wg2yNuHadM4NA0vpyNCs6pa7ot8osIrGI6a76/Wx96FVZ8Asc3OmIAEVghDw7WQX47Qq8KNo+212ihjwSsFsmxjcQo1oHZdpNYIzKBVnokDmiVvgV1Q/88UPQCic0EhvZN5Cn9DDAmyb5Kt1lV8Is3TTc4k3iaDNRah/DQaOngwYWJMZgg8MYeblhrHIOWDFxl3QREmKMeuq4bVS8TLooIrDZE44bw7FpvpnGYeYvyZ6iF6cdAbCbn3J6XCxSR6JDYTb2RuzEaUKQMEbLgkH2a45A8cw0tDXgjAMve+kTc6wmgECOsPhGJ7BXA8D43ggdi05X/DsTvQ8Nc6fFN4c8AJRyhBOEXsPXKwAJHYnimOChzZihThmRxUVe9hAWORB8vJCOXBJSAk1E8vMiN186KhTjKTQAFeMVwgVn43HzpDFgKliMShwQTdOCsMgC6CXkr0as1IhMoPHxhht4kgnXKw1+9wa4R1yygMnoYJ9cvM6qdHMfB1PnAhDAufGHU5gpgoiP6FA2oIFBFGUi30UQIOmqFXaXIwK2supW1N5584C8iAu+mdW+kmga04caCQpqdLWXTwDwaeiSgzRAVWGNZzrVb12tTk4E1CKuUbdGyyZWGoijAc30nu1xhrzNl8/0o0dSPRdoGXGuTVMezNvVibioQ5Y5hf/u+JPygefiduJe6XA1JV/qO9HK+/qrzE//NOHTo0P+rP7x4jQVHYv00AAAAAElFTkSuQmCC",
  7676.       ppt: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAByUExURUxpcf+ubP+iWP+SO/+nX/+lXfyPQv+SO/+dUP+xcP+ua/+VQP+jWf+XRP+cS/+eT/+UPf+ZSP+gVP+qZf+saP+SOv+mXv+wcP+ta/+ubf+oYv/79//x5f/m0vmEO//MpP/Sr/+9i//Zu/7Dl/ufY/2zfqeIp1YAAAALdFJOUwDdPXugHPygn596VuVMqAAAAl1JREFUWMPtmOtyqjAQgNuqUBQSEi9cDHJR3v8Vzy5JJHi03dAz0x+HD3LZTfIZ6tCZ+Pa2sLCwQOZjG73kw1+3ibKveN/4+t6z7J8a7f6Kp7bC27gp7mTFC7yM28nS/OfGKC9y0OSIafJi6A1FJ3IPY5SToBuj/JAfDkMxNSzHzpDN9e1jXB+IUI1/CfemjJGfcb0HDvbe23rvZGxMM673dCKqsJwsK+916SYQyn+KdemQVec7qmqy8oGtr7A5T6kfhGsP4QlLd/7aSBKeRuJueFSNUmi8nspxfJ6wuWn6Gv+gleM7neYI1fViucIeVTtLGOv5slMg5FITXGCLqo6dCTRhfIoRqLVQ2lA0Sqkujk0MGZLQrEZAqKwQ4ChspDOBIvyMR2QzEUr4plXNnQmfnkI+FbYQVf0coTRlFGZt22KgOm78UlKFckQL4VuulaHqA2dczhFWICwro6uuAfuJkDXVIJSNfvu69jLZIFnIXWHLZXKrkf52Cbi/kHOORmg4q2FbLePMvnwJw5HhA3GcU4UWK+QiQATjD/gKhRW+4idCePCZQjaihQK7nLnYyFeYjMKnPjZnh90TIfMSCsG0QrDk2lVdD5EQOoE9HDYTBE2IizRJ33RNkYgJzOkTdzgKg6zNggeh8BSGxqWF8HYEj5bkXtGEiUsa7IYWDM8IvYXf8GvCHZLglZgIG33ZLvZ2JOHOg98Vpvc2HQOHNKUJV6kHK8rh+8m64ysh6RgQpsdjaq7hhmK6OmeGIU95YjjfBkciAfEstQlpvpB+It2swm9Zzfg1Y2Fh4f/lD1FNqKcd3wCLAAAAAElFTkSuQmCC",
  7677.       png: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABpUExURUxpcf+ubP+eUP+iWP+xcP+nX/+lXf+SO/uPSv+dUP6kX/+XRP+VQP+SO/+jWf+oYf+hVf///f+mXf+tav+ubf+rZ/+eUP+wcP+pZP/s3P+aSf/z6P/48v/UsvqFOf+6hP/jzf/Hmv/cwS4F5mYAAAALdFJOUwDdez2foByg/p/2onNSOQAAAh5JREFUWMPtmNuSoyAQQGeMUaZUxBveRfP/H7lc1VRJptF92Kr1INqtcKqNSSrk6+vm5uYGzMPzrTzcdYFff+I7cPV91/VfNZr6ykNb6WwMypW6tOBk9EoALka/KMtCTCr05OKi0S9AwI02YXXW+KwqMVluMqw4SimjtUGNzwoK0HgobC4Yn42iat6DanfKnPZdhCAersK0KcfXWOtYbPtrTeNBhGnapCt1n2VZX6cWnjDhjjETjNeFudrhWQpfeS7PqJ5vI0DCXJLKPVmkcMH5MQ5CBaGvIRtehIhkGVp2VmgqwgixhSEkciYeDz4jxDkWyD1F0zQhKrJZ3zzG+jKPQMLNJiAd6ogImHw1+1UngQh/8DHqefMS9/ycFhJVIC+ROAvJnrodRn7ARBfIS+TJirOwEp88JsTGx0skF4Tyfd3nZCtQ+c8KG3OXW4FZ1lJHIeUQ1dVXQzY0vMDBbLJEKjsFCxX1oOmHPe02wlHYDsewk0LWW5jPCfPZJuyZm7BTbWmtzHoMTNgpcPuBUg+CCSkfSTv2wTdXskKoUFGMdhhyqlASTcjOlLgLu3iyk0QOwjDqePsFfgeiA4VqykefCUK40KZ457wwuiaMBZFokc7EQTUTiigGCWMH/m1hAhR624TETFSh7Em8Np5DfsE+EgdAy4BQD473M9+SNYPcMV/fImh9CLiWCkKYL4SvSAMv/BXvxL8ZNzc3/y9/ADVfok94AIhIAAAAAElFTkSuQmCC",
  7678.       html: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcTbUrDrbszvetTXYrDnasjXQqTPIojfTrDvftTTMpjPKpDnZsTPIozXOqDjXrzHGoTbRqjfUre7/++T++Pf//SfCmxm3j1fXt7Hx4UvNrNL78XHfw8T26o3o0eeFKfsAAAAKdFJOUwA9//8c3Xign5/8SMcgAAADDklEQVRYw+2Y65qjIAyGp9ppRxBERcTj/V/mJsHTtN3dMNt/66dAEsjbgE/7jPPxcerUqVNsXW7Zb3WJx12z9E/6vMbyPtP0rcQsTd9KvKbpe4k3SkneR8wWVrL0yb8SM2QkQYGZYEsITnckMUteKX2KsImvgS/EJT4B86XtXhwx2xD5kp3nCwVHaHTnbOJXsuWv2Utd+WOJ+RcLmJOSpREw30T01U7yCx9Y0H0g+W6YIZRsYRxvfODGK/KiQHtqGjsePwU/MmMCi+84GArfgEZ0izBHHecQvzAFQaGyMBTFDDzbV2iuYWhcYBEgB1Ww42Yw1fdoDHDR3I00JhaAs1ndOCCUUS2lzLa2HgNj3TT1OIKLxIruiAorFPQz1GU9muEIx+CHeRxYQFwaUih/dmCVeISTMx1EBl9t4gKD/FAjz6AJoHp2znV1U0/+Z0A/1XXdOaex1hrYvRBtT8H8J8AcUyflBO64A3sQZSmJaOdIYInXDAzbtxIdPVCxYJoWnjQ86hhgCXkgKsoYNEsPkHo0OGN6/KAZglg5E4gSdIRTT/CRqhXEhmJt1+uwKgYYTmvqwdahWr3zXDxQOyDCF2NKwEHK7IhnkdeqMhqIRD9Za6cKjhC/cnCE/cIzOgqo6SrFQhz1DP0gZElG4C1rmEAQVKiR2A1dLzos1AmtyQWepjUgFlBvAqLyvYONWjhC9HuvWiTrCOB9X66la9vWjMCzHurSBlwndTRQaIFVQJPGGUFHqJBD7r4BLbhbFmsGkiUeYbdsFPxwhTV3ToVrfQKToZlxGqbRoRlmwhTNsYFbCsg4P3rY6pNgngWUa4IMjZ6MO0TlNssDEoS6BaLgl1qtrkTRiEt4wJAm9pKUXIuSa30xFUqp5IPEY0CqEOIB1Yo8cNSjFRZxgUrReuzRRlfto5ShgVjALU+9lDyabCBXHOBtW20eLBOaMSaM4HL+gr1gmtlBmG82NjrrHFys14A7MgizGQepbQpuzo7xBfw74lnrNPdd6no3LN35b6TX2/2vuv3gvxmnTp36f/ULf0R1znQ7804AAAAASUVORK5CYII=",
  7679.       js: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABpUExURUxpcUOv/0uw/zar/0+x/0Gj/Fq2/jOp/0ew/123/zKp/1S0/zqs/1Gz/123/02y/1i2/kWv/0mx/0Ct/1y1/vb7/1i2//7//zel+zOe+e32/9zt/5nN/ieV9oDG/avZ/83m/77h/2S6/HhIljsAAAAKdFJOUwB7Pf8c+92gn59dd850AAAC8klEQVRYw+3Yi3KjIBQG4CbGpgaMNyQIiJf3f8g9B8Rqp9mCszO7M5u/Kgj6iRrb2Le3V1555ZXgnE/Z05zjuUt2/13eL7He+/0+457zlpk/i1jRjo/ZCQC2Hx6LH+MF92EOhIJt9LtviRJPFsMgY0vPr2aUmDmFlY5i68q2ZBFiVpYcf3jpwjnDFoZ15mZsChczRKxkC86Xlc+4erCY+T34TvENnPuxh4rZdiR8M0BeLlfCwcFiRqxGcOJYJxB3AEJ4STiuEuzhYWJGvqYkz5IdA58FDnQ+AOb5bOY8/948BYAfFoEJZ6gWWraK5S5kaffLkHP+yPepxsejHep9I1nKj3iwThWAOi3y7xIIbnYuPOiHCH0Fzm6jIBC2LZZ9IJUHi2JpsYsocJeqW8Fv8g+AtQcrEOuDYF3Xbl8oNmBtJiXlONxtb23nILDepfEgmdr2AdVWGduBxz0Cpp1qARTVAFwrJSwVX3vjwapZwEI+HnLSelKtNHFgZYNYBROCLYB3BLu+F2YYWGW7YItgsK58PJjjpTRCdL0QYu2NGOFXMJ3wGqrBFEI0fwIUbJT2Jkv96R0AGw/SjuhR2Q+OjgWbBqHakAZCEZRaNKLrajPgMOUM/bBFEw5CcngqNJQilwAaATTckG6GS9kOjU8QaLekGh2dixnPWDHBBk0o3GRzEBRGoQgBTw6dgAdPDXda2D8INBqE09Mo2siRdWKQ9smDRw/GSw+MsOv0KG3UxPoOnmV7i/GzqLsVvAaPkMJTxvQ0juOgU/AoHGBSSqpxgseFokgDwSsFjuIt7fsUvlqmPXo0gWduNsbMokcPN4FFGOgCJ927oOcPsa65xIA0ARIjbsnSkMDvBZHQo+AC7ISdFgwmid8xwfqmZjtcxdWDwGQNXebniQR/zl8Eb3Za8rV2s/MtEDwlN4hdLFkbkm2LXQn5Bnu+hQbIoNeAa7B4CzljeL9NQ7008F3qEjjGa/gb6eV0/TGnA//NeOWVV/7f/AJAsosfySCrjgAAAABJRU5ErkJggg==",
  7680.       css: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABaUExURUxpcXvGVGm8P3zGVXzJWYbNYXbDTWu8QHnFUofNZITMX3zHVXTCS22+Q3jEUIHKW4jOZGq9QHDAR////mi6PvP97pbRd/v++tXwx+b33afbjV2vMrznpsnquGjfsnAAAAAKdFJOUwA936wc3Xign58XA1ZcAAACuUlEQVRYw+2Y2XbjIAyGm540qc1qAl7j93/NkQTEdJsKtxdzzvg3iSVAH8JRFufp6dChQ4fYOl2aL3Wqx50b+ze9nGt5L9b+KrGx9leJZ4ppv2C11KqIlxTUUnib6akn2TXEBigY3RKtJdncgRb1VBCb9o0Ikq0Hvob4Dvil2EQukE18CzSfmlXEJoaaTDCtMYmFZ2Oo0SCP2BiTgrZWdNGjjUjTsIEP2TvIRrsv7KRTJbDtpwCaKEkb7b4EXhjA1zJgHG63YYiQfhrQG8vxVz5QECMAYRrv5Oj7OAEx9MUEJlCkJhA49cJLjJZe9BMChcnju4DjsihtBEgtC1wCAAph4sEDik0EVJpsYGqVgVk1QJOBMjkgHYFGxGbErgzl5uufZPgZUBJQ7wbqeYC6ewcc5t1AM0PdDfcMBI5coRCn2USPD9QUYMcAvGmW6FC8lj0uEcYWHc0F6igxwwW8DasjJ/ZJhynewpzmaDYQAbhh3LEuRHuGrHWaVJOh1PcplNmgMOsw3p2szRCB3vf4oq7ybYLD2HuvdwC18wvUIZRNAaSyWbyrBErasZaKCttFj9agwu6kTBeFCZQQgA2qJAJpAVQEYoeMs1hAuSkCNz8Ciwk7gMOofgi8FvHx83DrUONtV4auBIbZJldYKsPe1QJdIjpn4TtkCGHUDnvGEPCzwbo0DBOunC3jRJJ0ag30VrPo2onex6tym3jAjHPOt+sEWuMS0bY+DspaIEotvp/n2SDDeQFmr5a9GZL8QurQ7qLtdwEfQcqDusJWJY8LVBClElahMj06xRALqB5y6jtVAtU/Duw+I3TpGQ9oHOAF5r6TSo8PHYrzC/bUcQVI1m3AFSd7FpKzY7i/fQaaj0Sf0dsCNOLpeGbeS52vnY/K52R3yeji6cq/Iz1frt/qsuPfjEOHDv2/+gP0toi4gXoofgAAAABJRU5ErkJggg==",
  7681.       epub: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcXXDTXvGVGm8P33HVnzJWYbNYWm7PYjOZXPBSmu8QG6/RXPBSoHKW4TMX37IV3nFUYbNYonOZOv+4fX/7/z/+1utMK3gkuL412O1OFOpJ7ripNf4xXK6TKHWhX88Tv4AAAAKdFJOUwB7Pd+gHN2gn59lNj8pAAACeklEQVRYw+3Y2XaqMBQG4GK10gxCgDII8v6P2T0kMhR7dujl4QcMCcm3Ni7tkr69HTly5Ig4pyR9mVM8d0mL3/JxifU+Xkhup5jyQudmkpuNuEjx4ii0fHlWUIt7lJiwsZVpOEZMnSQRYnpzsGH8WmyphxdcGJaL6U0WsSgFxeIStOtTGy2eeZGddmu9gq21tNMcmXi21i+adtsMQ8MdOm5M2lQMrtKUVVU2GxdO+8Cm/IJsickukL1N8SwEM9wzS2cZeVXlRT9uuZGBmfey7OmVfU9Nk3HoKhwiMFuEvaaum4XoEw8G736ve7rr8W8gfF64PqXqrsX3sv8TSF4Lns5zPWKF7ZjvAHPcYZt5jFft2Bm+RpsYpCBRVegpxqEz1p3BSzQHDhFI2JPg+3162LGjYy4CRKKt8AuM9c086BRDC+8kJwI0AxDVsPYMeNAZIsBPD/ZYYfsAIh/beX34l6c30aDOeyxrKHyB8/rKPtPxYP3AGksQDbxrw8J71FGggS033T2IpstHu/Du+OHBaZ+yClei6+7wVf7pQWSgMQYPTWJZloPt6g48N0CnJY9n5EYEhsn5JN40jJBXes+TQjBkEp33qD7ttXhwLi69kFhwJm568eAkbnpScL5IPcXJ09EVatq4CSJ5ylvabyKQpkKoEC/Cb5vg8bjhCTJQMxeCd62KQqG3jhA0k0ivCr973gvXTAz4I6qr6436ZOBVb4lqi9P6KgSV5vXzVz8YXvlEDoZlrE2KmholrVC9iN4Yk4AJLdW0XqvQeO454HXJL9iTiojoMeAq9yR3DM+371LvXfgsdRHWeJU/kV6S6z+T7PhvxpEjR/7ffAMGOojXQYbbiwAAAABJRU5ErkJggg==",
  7682.       psd: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcUOv/0uw/zer/123/0+x/1q2/jOp/zSm+Uew/zKp/zys/1O0/1e1/0Ku/0+z/1q2/0mx//7//164/vf8/9vw/+r2/yie86HX/sno/7Dd/5TR/W6//H/H/Eyv911ykpAAAAAKdFJOUwB7Pf+fHN2g/p8jQekrAAACx0lEQVRYw+2Y7WKrIAyG12JXJn4xEQG193+ZJwnYOdedE7r9O74qBQyPARNb+/Jy6NChQ2ydT8W3OufjLkX/N71ecnmvff+rxC/+dT8jXnB8162sLhK7T/As4glgHR1xT0Vs0iW6PGKxYXxo35FBJGC9B37p4BOLdXhd42e9QdaxXecRi5opLpEN5BITsKL9oao8YkGoqkpIrJAIRY2azuFR8IB31bvPXQuY5zzgA8hOJwbwbTWevY3yof+GV3Hm/NZG29ab9yhjrOsq6E57C2Ub9zcWMEoP7x8yvqPOalOicoANAu0AsuCqce0j5QJNmPt+cQMQ7fwzoI7AaURNdueizgRq3CJQKiXl6GH2Xn/QyIAN1BqsdQS6BmvSAXDQO6ERF6hX4BSrAYGNnp3HqJw1eYhlDlCRh1TtcA2DmixFJkTl3ct8IE65whC3S49YSzG0PAt8H1wIAaPGeFxI46cJmiY8DYS0M4YyZZawkGaGIJpDmJs8YANbAqZk9ouUOPFwgyAapWySEQvYRBHQrI+bUSoKb+unVkoVTXTDA9LFCWiG4JxbejnKppG0mHiTa4JpKHM9TKk3Iq+RcvKDoRvUJptngBJFU1RyvM3BU14/AxQEVI1aByNxHG/OYtb8ALiqcq5SAlYTgW0+UO2BkHjWzbqZTPRQsYEwS4Xzi0BFY2Gb4R5jFGEawlMNjOAcDxgFgWzspO6S0xC/tYwNcJsQp9Q1B7h4COgNEHLOD9YO3kUeigO8rgB5629SbYljvSzLfBtH8QxQYJBsgfhdEKP8zssCAlEKsQViD4V5arGBQgmBKEGVeNBwkZpCxS4hWECRoWyg+m3gb3lYRvPyXpapsjlRZnlYpm2tf7pEmcqSBzyVDyUe9nJ+wZ73gx+jolivAdeSLc6M4f1WcnmS+S51Yfp45b+RXk7Xf+r0xL8Zhw4d+n/1B13vfAhtdKi2AAAAAElFTkSuQmCC",
  7683.       dwg: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABaUExURUxpcXvGVIbNYXvHVHzJWYbNYXbDTWu9QHrGU4jOZHLBSW+/RYDJWmy+QoXMYHzHVYjOZHfET2m7P4LLXf3/+/T+7u3+5MXrsaXbiVyuMZjUeNb2xOP81bPjmuZ7vy0AAAAKdFJOUwA9z1wc33ign591Bg7OAAACdUlEQVRYw+2Yi3KjIBRAm51UI4gKxMei+f/f3PsQNU3SXtzOdGfWo0W4wBGFau3b28HBwYGYU1a85JSuOxfNZ/w6p/rem895TzQWTfOtxjP1qWCDtJoLK1WyMcM+VUUu1pJ3ls6nSDEW1UpTvSLBWFRf0iQZXwn93jFuhd7fK/2SJhgL9Hh0ecp5P4tn3xzwYmPhX0En2SL7nXkirEIPNA/xspAIL9Cw9CUmsV85dG3bBcjNgSUjeVJcykeG9nrtAmX9/MNJtk9Yk7B5cqbLvymsdwjr2LOmBIVtU3OMQ9xGJIQOQHSFGzBegR5zoV4Qj7DeQiumbVGIx26gEXICpAvr4bqlHe5r04WWhB1BQvsdwo5uX4/GvxCGgejBMv4mJpwZjoY0IY7C9nSZNB+jI1DY8tXfsJGVCi3Rt8tUjBoDelrn5mbBJxVi29qqG60XXDLtqFjYXudQd1N8VqEQUUNPTNA/jhCyE0cHRUNMEiq+cbiwV2E3cFTvGKHjqQ34bB0Jespy1NlkIQwR0aG7I2iOJwmVje1BG6atbwpQxbUqZYRq3ej9NIJ1GjGHwk21SKgiFndL7xQU0jvFLlWERJhHE3ehuQnTNI2WZmOxUQuhcDsK44xzJCx5vdyRJFzRYQShf6xQ+U8J9VOh3inU4NMAaTULccWUmopUrRQ3kAkfqQJgn1TsFBpaO+77hHp+xOwXmo9DhNVoOLipMlKh0dibd8waLq7HWDBGJDQJ/IgwM3zHIm5JlpQ33CV/wZ6wj1t7UT4KaLY5R4noMyB3EXN32BRiRHLF8H2rnRAt/JY65zJfLv8iPWf5l2Q7/ptxcHDw//IHYWiLelDcDu8AAAAASUVORK5CYII=",
  7684.     };
  7685.     /* 办公几件套 */
  7686.     Folder_ICON.docx = Folder_ICON.doc;
  7687.     Folder_ICON.rtf = Folder_ICON.doc;
  7688.     Folder_ICON.xlsx = Folder_ICON.xls;
  7689.     Folder_ICON.pptx = Folder_ICON.ppt;
  7690.  
  7691.     Folder_ICON.dmg = Folder_ICON.ipa;
  7692.  
  7693.     Folder_ICON.json = Folder_ICON.js;
  7694.  
  7695.     /* 压缩包 */
  7696.     let zipIconList = [
  7697.       "rar",
  7698.       "7z",
  7699.       "arj",
  7700.       "bz2",
  7701.       "cab",
  7702.       "iso",
  7703.       "jar",
  7704.       "lz",
  7705.       "lzh",
  7706.       "tar",
  7707.       "uue",
  7708.       "xz",
  7709.       "z",
  7710.       "zipx",
  7711.       "zst",
  7712.       "001",
  7713.     ];
  7714.  
  7715.     /* 图片 */
  7716.     let imageIconList = ["jpg", "jpeg", "ico", "webp"];
  7717.  
  7718.     /* 代码语言 */
  7719.     let codeLanguageIconList = [
  7720.       "htm",
  7721.       "py",
  7722.       "vue",
  7723.       "bat",
  7724.       "sh",
  7725.       "vbs",
  7726.       "java",
  7727.       "kt",
  7728.     ];
  7729.  
  7730.     /* Android安装包 */
  7731.     let androidIconList = ["apk", "apkm", "xapk"];
  7732.  
  7733.     zipIconList.forEach((keyName) => {
  7734.       Folder_ICON[keyName] = Folder_ICON.zip;
  7735.     });
  7736.     imageIconList.forEach((keyName) => {
  7737.       Folder_ICON[keyName] = Folder_ICON.png;
  7738.     });
  7739.     codeLanguageIconList.forEach((keyName) => {
  7740.       Folder_ICON[keyName] = Folder_ICON.html;
  7741.     });
  7742.     androidIconList.forEach((keyName) => {
  7743.       Folder_ICON[keyName] = Folder_ICON.apk;
  7744.     });
  7745.  
  7746.     config = PopsUtils.assignJSON(config, details);
  7747.     if (details?.folder) {
  7748.       config.folder = details.folder;
  7749.     }
  7750.     let guid = PopsUtils.getRandomGUID();
  7751.     const PopsType = "folder";
  7752.     config = PopsHandler.handleOnly(PopsType, config);
  7753.     let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  7754.     let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  7755.     let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
  7756.     let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  7757.       PopsType,
  7758.       config
  7759.     );
  7760.     let animHTML = PopsElementHandler.getAnimHTML(
  7761.       guid,
  7762.       PopsType,
  7763.       config,
  7764.       `
  7765.     <div class="pops-folder-title" style="text-align: ${
  7766.       config.title.position
  7767.     };${headerStyle}">
  7768. 					${
  7769.             config.title.html
  7770.               ? config.title.text
  7771.               : `<p pops style="${headerPStyle}">${config.title.text}</p>`
  7772.           }
  7773.           ${headerBtnHTML}
  7774. 				</div>
  7775. 				<div class="pops-folder-content ${
  7776.           pops.isPhone() ? "pops-mobile-folder-content" : ""
  7777.         }">
  7778.           <div class="pops-folder-list">
  7779.             <div class="pops-folder-file-list-breadcrumb">
  7780.               <div class="pops-folder-file-list-breadcrumb-primary">
  7781.                 <span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
  7782.                   <a>全部文件</a>
  7783.                 </span>
  7784.               </div>
  7785.             </div>
  7786.             <div class="pops-folder-list-table__header-div">
  7787.               <table class="pops-folder-list-table__header">
  7788.                 <colgroup>
  7789.                   <!-- <col width="8%"> --!>
  7790.                   <col width="52%">
  7791.                   <col width="24%">
  7792.                   <col width="16%">
  7793.                 </colgroup>
  7794.                 <thead>
  7795.                   <tr class="pops-folder-list-table__header-row">
  7796.                     <th class="pops-folder-list-table__header-th cursor-p">
  7797.                       <div class="text-ellip content flex-a-i-center">
  7798.                         <span>文件名</span>
  7799.                         <div class="pops-folder-list-table__sort" data-sort="fileName">
  7800.                           <div class="pops-folder-icon-arrow">
  7801.                             <svg
  7802.                               viewBox="0 0 1024 1024"
  7803.                               xmlns="http://www.w3.org/2000/svg">
  7804.                               <path
  7805.                                 d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
  7806.                                 class="pops-folder-icon-arrow-up"></path>
  7807.                               <path
  7808.                                 d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
  7809.                                 class="pops-folder-icon-arrow-down"></path>
  7810.                             </svg>
  7811.                           </div>
  7812.                         </div>
  7813.                       </div>
  7814.                     </th>
  7815.                     <th class="pops-folder-list-table__header-th cursor-p">
  7816.                       <div class="text-ellip content flex-a-i-center">
  7817.                         <span>修改时间</span>
  7818.                         <div class="pops-folder-list-table__sort" data-sort="latestTime">
  7819.                           <div class="pops-folder-icon-arrow">
  7820.                             <svg
  7821.                               viewBox="0 0 1024 1024"
  7822.                               xmlns="http://www.w3.org/2000/svg">
  7823.                               <path
  7824.                                 d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
  7825.                                 class="pops-folder-icon-arrow-up"></path>
  7826.                               <path
  7827.                                 d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
  7828.                                 class="pops-folder-icon-arrow-down"></path>
  7829.                             </svg>
  7830.                           </div>
  7831.                         </div>
  7832.                       </div>
  7833.                     </th>
  7834.                     <th class="pops-folder-list-table__header-th cursor-p">
  7835.                       <div class="text-ellip content flex-a-i-center">
  7836.                         <span>大小</span>
  7837.                         <div class="pops-folder-list-table__sort" data-sort="fileSize">
  7838.                           <div class="pops-folder-icon-arrow">
  7839.                             <svg
  7840.                               viewBox="0 0 1024 1024"
  7841.                               xmlns="http://www.w3.org/2000/svg">
  7842.                               <path
  7843.                                 d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
  7844.                                 class="pops-folder-icon-arrow-up"></path>
  7845.                               <path
  7846.                                 d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
  7847.                                 class="pops-folder-icon-arrow-down"></path>
  7848.                             </svg>
  7849.                           </div>
  7850.                         </div>
  7851.                       </div>
  7852.                     </th>
  7853.                   </tr>
  7854.                 </thead>
  7855.               </table>
  7856.             </div>
  7857.             <div class="pops-folder-list-table__body-div">
  7858.               <table class="pops-folder-list-table__body">
  7859.                 <colgroup>
  7860.                   <!-- <col width="8%"> --!>
  7861.                   ${
  7862.                     pops.isPhone()
  7863.                       ? `<col width="100%">`
  7864.                       : `
  7865.                       <col width="52%">
  7866.                       <col width="24%">
  7867.                       <col width="16%">`
  7868.                   }
  7869.                   
  7870.                 </colgroup>
  7871.                 <tbody>
  7872.                   
  7873.                 </tbody>
  7874.               </table>
  7875.             </div>
  7876.           </div>
  7877. 				</div>
  7878. 				${bottomBtnHTML}
  7879.     `,
  7880.       bottomBtnHTML
  7881.     );
  7882.     /**
  7883.      * 弹窗的主元素，包括动画层
  7884.      */
  7885.     let animElement = PopsElementHandler.parseElement(animHTML);
  7886.     let {
  7887.       popsElement,
  7888.       titleElement,
  7889.       contentElement,
  7890.       folderListElement,
  7891.       folderListHeaderElement,
  7892.       folderListHeaderRowElement,
  7893.       folderListBodyElement,
  7894.       folderFileListBreadcrumbPrimaryElement,
  7895.       headerCloseBtnElement: btnCloseElement,
  7896.       btnOkElement,
  7897.       btnCancelElement,
  7898.       btnOtherElement,
  7899.       folderListSortFileNameElement,
  7900.       folderListSortLatestTimeElement,
  7901.       folderListSortFileSizeElement,
  7902.     } = PopsHandler.handleQueryElement(animElement, PopsType);
  7903.     /**
  7904.      * 遮罩层元素
  7905.      * @type {?HTMLDivElement}
  7906.      */
  7907.     let maskElement = null;
  7908.     /**
  7909.      * 已创建的元素列表
  7910.      * @type {HTMLElement[]}
  7911.      */
  7912.     let elementList = [animElement];
  7913.     if (config.mask.enable) {
  7914.       let _handleMask_ = PopsHandler.handleMask({
  7915.         type: PopsType,
  7916.         guid: guid,
  7917.         config: config,
  7918.         animElement: animElement,
  7919.         maskHTML: maskHTML,
  7920.       });
  7921.       maskElement = _handleMask_.maskElement;
  7922.       elementList.push(maskElement);
  7923.     }
  7924.     /* 事件 */
  7925.     let eventDetails = PopsHandler.handleEventDetails(
  7926.       guid,
  7927.       $shadowContainer,
  7928.       $shadowRoot,
  7929.       PopsType,
  7930.       animElement,
  7931.       popsElement,
  7932.       maskElement,
  7933.       config
  7934.     );
  7935.     PopsHandler.handleClickEvent(
  7936.       btnCloseElement,
  7937.       "close",
  7938.       eventDetails,
  7939.       config.btn.close.callback
  7940.     );
  7941.     PopsHandler.handleClickEvent(
  7942.       btnOkElement,
  7943.       "ok",
  7944.       eventDetails,
  7945.       config.btn.ok.callback
  7946.     );
  7947.     PopsHandler.handleClickEvent(
  7948.       btnCancelElement,
  7949.       "cancel",
  7950.       eventDetails,
  7951.       config.btn.cancel.callback
  7952.     );
  7953.     PopsHandler.handleClickEvent(
  7954.       btnOtherElement,
  7955.       "other",
  7956.       eventDetails,
  7957.       config.btn.other.callback
  7958.     );
  7959.     /* 创建到页面中 */
  7960.     PopsUtils.appendChild($shadowRoot, elementList);
  7961.     if (typeof config.beforeAppendToPageCallBack === "function") {
  7962.       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  7963.     }
  7964.     PopsUtils.appendChild($shadowContainer);
  7965.     if (maskElement != null) {
  7966.       animElement.after(maskElement);
  7967.     }
  7968.     /* 添加文件信息 */
  7969.     config.folder.sort();
  7970.     /**
  7971.      * 创建文件夹元素
  7972.      * @param {string} fileName
  7973.      * @param {string} [fileSize="-"]
  7974.      * @param {string} [latestTime="-"]
  7975.      */
  7976.     function createFolderRowElement(
  7977.       fileName,
  7978.       latestTime = "-",
  7979.       fileSize = "-"
  7980.     ) {
  7981.       let origin_fileName = fileName;
  7982.       let origin_latestTime = latestTime;
  7983.       let origin_fileSize = fileSize;
  7984.       let folderELement = PopsDOMUtils.createElement("tr");
  7985.       let fileNameElement = PopsDOMUtils.createElement("td");
  7986.       let fileTimeElement = PopsDOMUtils.createElement("td");
  7987.       let fileFormatSize = PopsDOMUtils.createElement("td");
  7988.       let fileType = "";
  7989.       let fileIcon = Folder_ICON.folder;
  7990.       if (arguments.length === 1) {
  7991.         /* 文件夹 */
  7992.         latestTime = "";
  7993.         fileSize = "";
  7994.       } else {
  7995.         /* 文件 */
  7996.         fileIcon = "";
  7997.         if (typeof latestTime === "number") {
  7998.           latestTime = PopsUtils.formatTime(latestTime);
  7999.         }
  8000.         if (typeof fileSize === "number") {
  8001.           fileSize = PopsUtils.formatByteToSize(fileSize);
  8002.         }
  8003.         for (let keyName in Folder_ICON) {
  8004.           if (fileName.toLowerCase().endsWith("." + keyName)) {
  8005.             fileType = keyName;
  8006.             fileIcon = Folder_ICON[keyName];
  8007.             break;
  8008.           }
  8009.         }
  8010.         if (!Boolean(fileIcon)) {
  8011.           fileType = "Null";
  8012.           fileIcon = Folder_ICON.Null;
  8013.         }
  8014.       }
  8015.       folderELement.className = "pops-folder-list-table__body-row";
  8016.       fileNameElement.className = "pops-folder-list-table__body-td";
  8017.       fileTimeElement.className = "pops-folder-list-table__body-td";
  8018.       fileFormatSize.className = "pops-folder-list-table__body-td";
  8019.       fileNameElement.innerHTML = `
  8020.         <div class="pops-folder-list-file-name cursor-p">
  8021.           <div>
  8022.             <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
  8023.             <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
  8024.               ${fileName}
  8025.             </a>
  8026.           </div>
  8027.         </div>
  8028.         `;
  8029.       fileTimeElement.innerHTML = `
  8030.         <div class="pops-folder-list__time">
  8031.           <span>${latestTime}</span>
  8032.         </div>
  8033.         `;
  8034.       fileFormatSize.innerHTML = `
  8035.         <div class="pops-folder-list-format-size">
  8036.           <span>${fileSize}</span>
  8037.         </div>
  8038.         `;
  8039.       /* 存储原来的值 */
  8040.       let __value__ = {
  8041.         fileName: origin_fileName,
  8042.         latestTime: origin_latestTime,
  8043.         fileSize: origin_fileSize,
  8044.       };
  8045.       fileNameElement["__value__"] = __value__;
  8046.       fileTimeElement["__value__"] = __value__;
  8047.       fileFormatSize["__value__"] = __value__;
  8048.       folderELement["__value__"] = __value__;
  8049.       folderELement.appendChild(fileNameElement);
  8050.       folderELement.appendChild(fileTimeElement);
  8051.       folderELement.appendChild(fileFormatSize);
  8052.       return {
  8053.         folderELement,
  8054.         fileNameElement,
  8055.         fileTimeElement,
  8056.         fileFormatSize,
  8057.       };
  8058.     }
  8059.     /**
  8060.      * 创建移动端文件夹元素
  8061.      * @param {string} fileName
  8062.      */
  8063.     function createMobileFolderRowElement(
  8064.       fileName,
  8065.       latestTime = "-",
  8066.       fileSize = "-"
  8067.     ) {
  8068.       let origin_fileName = fileName;
  8069.       let origin_latestTime = latestTime;
  8070.       let origin_fileSize = fileSize;
  8071.       let folderELement = PopsDOMUtils.createElement("tr");
  8072.       let fileNameElement = PopsDOMUtils.createElement("td");
  8073.       let fileType = "";
  8074.       let fileIcon = Folder_ICON.folder;
  8075.       if (arguments.length === 1) {
  8076.         /* 文件夹 */
  8077.         latestTime = "";
  8078.         fileSize = "";
  8079.       } else {
  8080.         /* 文件 */
  8081.         fileIcon = "";
  8082.         if (typeof latestTime === "number") {
  8083.           latestTime = PopsUtils.formatTime(latestTime);
  8084.         }
  8085.         if (typeof fileSize === "number") {
  8086.           fileSize = PopsUtils.formatByteToSize(fileSize);
  8087.         }
  8088.         for (let keyName in Folder_ICON) {
  8089.           if (fileName.toLowerCase().endsWith("." + keyName)) {
  8090.             fileType = keyName;
  8091.             fileIcon = Folder_ICON[keyName];
  8092.             break;
  8093.           }
  8094.         }
  8095.         if (!Boolean(fileIcon)) {
  8096.           fileType = "Null";
  8097.           fileIcon = Folder_ICON.Null;
  8098.         }
  8099.       }
  8100.       folderELement.className = "pops-folder-list-table__body-row";
  8101.       fileNameElement.className = "pops-folder-list-table__body-td";
  8102.       fileNameElement.innerHTML = `
  8103.           <div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
  8104.             <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
  8105.             <div>
  8106.               <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
  8107.                 ${fileName}
  8108.               </a>
  8109.               <span>${latestTime} ${fileSize}</span>
  8110.             </div>
  8111.           </div>
  8112.           `;
  8113.       /* 存储原来的值 */
  8114.       let __value__ = {
  8115.         fileName: origin_fileName,
  8116.         latestTime: origin_latestTime,
  8117.         fileSize: origin_fileSize,
  8118.       };
  8119.       fileNameElement["__value__"] = __value__;
  8120.       folderELement["__value__"] = __value__;
  8121.       folderELement.appendChild(fileNameElement);
  8122.       return {
  8123.         folderELement,
  8124.         fileNameElement,
  8125.       };
  8126.     }
  8127.     /**
  8128.      * 清空每行的元素
  8129.      */
  8130.     function clearFolerRow() {
  8131.       folderListBodyElement.innerHTML = "";
  8132.     }
  8133.     function getArrowIconElement() {
  8134.       let iconArrowElement = PopsDOMUtils.createElement("div", {
  8135.         className: "iconArrow",
  8136.       });
  8137.       return iconArrowElement;
  8138.     }
  8139.     /**
  8140.      * 添加顶部导航
  8141.      * @param {string} name
  8142.      * @param {PopsFolderDataConfig} _config_
  8143.      * @returns
  8144.      */
  8145.     function getBreadcrumbAllFilesElement(name, _config_) {
  8146.       let spanElement = PopsDOMUtils.createElement(
  8147.         "span",
  8148.         {
  8149.           className: "pops-folder-file-list-breadcrumb-allFiles cursor-p",
  8150.           innerHTML: `<a>${name}</a>`,
  8151.           _config_: _config_,
  8152.         },
  8153.         {
  8154.           title: "name",
  8155.         }
  8156.       );
  8157.       return spanElement;
  8158.     }
  8159.     /**
  8160.      * 顶部导航的点击事件
  8161.      * @param {Event} event
  8162.      * @param {boolean} isTop 是否是全部文件按钮
  8163.      * @param {PopsFolderDataConfig} _config_ 配置
  8164.      */
  8165.     function breadcrumbAllFilesElementClickEvent(event, isTop, _config_) {
  8166.       clearFolerRow();
  8167.       /* 获取当前的导航元素 */
  8168.       let currentBreadcrumb = event.target.closest(
  8169.         "span.pops-folder-file-list-breadcrumb-allFiles"
  8170.       );
  8171.       if (currentBreadcrumb) {
  8172.         while (currentBreadcrumb.nextElementSibling) {
  8173.           currentBreadcrumb.nextElementSibling.remove();
  8174.         }
  8175.       } else {
  8176.         console.error("获取导航按钮失败");
  8177.       }
  8178.       let loadingMask = pops.loading({
  8179.         parent: contentElement,
  8180.         content: {
  8181.           text: "获取文件列表中...",
  8182.         },
  8183.         mask: {
  8184.           enable: true,
  8185.           clickEvent: {
  8186.             toClose: false,
  8187.             toHide: false,
  8188.           },
  8189.         },
  8190.         addIndexCSS: false,
  8191.       });
  8192.       addFolderElement(_config_);
  8193.       loadingMask.close();
  8194.     }
  8195.     /**
  8196.      * 刷新文件列表界面信息
  8197.      * @param {Event} event
  8198.      * @param {PopsFolderDataConfig} _config_
  8199.      */
  8200.     async function refreshFolderInfoClickEvent(event, _config_) {
  8201.       clearFolerRow();
  8202.       let loadingMask = pops.loading({
  8203.         parent: contentElement,
  8204.         content: {
  8205.           text: "获取文件列表中...",
  8206.         },
  8207.         mask: {
  8208.           enable: true,
  8209.         },
  8210.         addIndexCSS: false,
  8211.       });
  8212.       if (typeof _config_.clickEvent === "function") {
  8213.         let childConfig = await _config_.clickEvent(event, _config_);
  8214.         /* 添加顶部导航的箭头 */
  8215.         folderFileListBreadcrumbPrimaryElement.appendChild(
  8216.           getArrowIconElement()
  8217.         );
  8218.         /* 获取顶部导航 */
  8219.         let breadcrumbAllFilesElement = getBreadcrumbAllFilesElement(
  8220.           _config_["fileName"],
  8221.           childConfig
  8222.         );
  8223.         folderFileListBreadcrumbPrimaryElement.appendChild(
  8224.           breadcrumbAllFilesElement
  8225.         );
  8226.         /* 设置顶部导航点击事件 */
  8227.         PopsDOMUtils.on(
  8228.           breadcrumbAllFilesElement,
  8229.           "click",
  8230.           void 0,
  8231.           function (event) {
  8232.             breadcrumbAllFilesElementClickEvent(event, false, childConfig);
  8233.           }
  8234.         );
  8235.         addFolderElement(childConfig);
  8236.       }
  8237.       loadingMask.close();
  8238.     }
  8239.     /**
  8240.      * 设置文件点击事件
  8241.      * @param {HTMLElement} targetElement
  8242.      * @param {PopsFolderDataConfig} _config_
  8243.      */
  8244.     function setFileClickEvent(targetElement, _config_) {
  8245.       PopsDOMUtils.on(targetElement, "click", void 0, async function (event) {
  8246.         event?.preventDefault();
  8247.         event?.stopPropagation();
  8248.         event?.stopImmediatePropagation();
  8249.         let linkElement = targetElement.querySelector("a");
  8250.         if (typeof _config_.clickEvent === "function") {
  8251.           let downloadInfo = await _config_.clickEvent(event, _config_);
  8252.           if (
  8253.             typeof downloadInfo === "object" &&
  8254.             typeof downloadInfo.url === "string" &&
  8255.             downloadInfo.url.trim() !== ""
  8256.           ) {
  8257.             linkElement.setAttribute("href", downloadInfo.url);
  8258.             linkElement.setAttribute("target", "_blank");
  8259.             if (downloadInfo.autoDownload) {
  8260.               if (downloadInfo.mode == null || downloadInfo.mode === "") {
  8261.                 /* 未设置mode的话默认为aBlank */
  8262.                 downloadInfo.mode = "aBlank";
  8263.               }
  8264.               if (downloadInfo.mode === "a" || downloadInfo.mode === "aBlank") {
  8265.                 /* a标签下载 */
  8266.                 let downloadLinkElement = document.createElement("a");
  8267.                 if (downloadInfo.mode === "aBlank") {
  8268.                   downloadLinkElement.setAttribute("target", "_blank");
  8269.                 }
  8270.                 downloadLinkElement.href = downloadInfo.url;
  8271.                 downloadLinkElement.click();
  8272.               } else if (
  8273.                 downloadInfo.mode === "open" ||
  8274.                 downloadInfo.mode === "openBlank"
  8275.               ) {
  8276.                 /* window.open下载 */
  8277.                 if (downloadInfo.mode === "openBlank") {
  8278.                   globalThis.open(downloadInfo.url, "_blank");
  8279.                 } else {
  8280.                   globalThis.open(downloadInfo.url);
  8281.                 }
  8282.               } else if (downloadInfo.mode === "iframe") {
  8283.                 /* iframe下载 */
  8284.                 let downloadIframeLinkElement =
  8285.                   document.createElement("iframe");
  8286.                 downloadIframeLinkElement.src = downloadInfo.url;
  8287.                 downloadIframeLinkElement.onload = function () {
  8288.                   setTimeout(() => {
  8289.                     downloadIframeLinkElement.remove();
  8290.                   }, 1000);
  8291.                 };
  8292.                 $shadowRoot.appendChild(downloadIframeLinkElement);
  8293.                 setTimeout(() => {
  8294.                   downloadIframeLinkElement.remove();
  8295.                 }, 3 * 60 * 1000);
  8296.               } else {
  8297.                 console.error("未知的下载模式", downloadInfo);
  8298.               }
  8299.             }
  8300.           }
  8301.         }
  8302.       });
  8303.     }
  8304.     /**
  8305.      * 对配置进行排序
  8306.      * @param {PopsFolderDataConfig[]} _config_
  8307.      * @param {"fileName"|"fileSize"|"latestTime"} sortName 比较的属性，默认fileName
  8308.      * @param {boolean} isDesc 是否降序，默认false（升序）
  8309.      */
  8310.     function sortFolderConfig(_config_, sortName = "fileName", isDesc = false) {
  8311.       _config_.sort((a, b) => {
  8312.         let beforeVal = a[sortName];
  8313.         let afterVal = b[sortName];
  8314.         if (sortName === "fileName") {
  8315.           /* 文件名，进行字符串转换 */
  8316.           beforeVal = beforeVal.toString();
  8317.           afterVal = afterVal.toString();
  8318.         } else if (sortName === "fileSize") {
  8319.           /* 文件大小，进行Float转换 */
  8320.           beforeVal = parseFloat(beforeVal);
  8321.           afterVal = parseFloat(afterVal);
  8322.         } else if (sortName === "latestTime") {
  8323.           /* 文件时间 */
  8324.           beforeVal = new Date(beforeVal).getTime();
  8325.           afterVal = new Date(afterVal).getTime();
  8326.         }
  8327.         if (typeof beforeVal === "string" && typeof afterVal === "string") {
  8328.           let compareVal = beforeVal.localeCompare(afterVal);
  8329.           if (isDesc) {
  8330.             /* 降序 */
  8331.             if (compareVal > 0) {
  8332.               compareVal = -1;
  8333.             } else if (compareVal < 0) {
  8334.               compareVal = 1;
  8335.             }
  8336.           }
  8337.           return compareVal;
  8338.         } else {
  8339.           if (beforeVal > afterVal) {
  8340.             if (isDesc) {
  8341.               /* 降序 */
  8342.               return -1;
  8343.             } else {
  8344.               return 1;
  8345.             }
  8346.           } else if (beforeVal < afterVal) {
  8347.             if (isDesc) {
  8348.               /* 降序 */
  8349.               return 1;
  8350.             } else {
  8351.               return -1;
  8352.             }
  8353.           } else {
  8354.             return 0;
  8355.           }
  8356.         }
  8357.       });
  8358.       return _config_;
  8359.     }
  8360.     /**
  8361.      * 添加元素
  8362.      * @param {PopsFolderDataConfig[]} _config_
  8363.      */
  8364.     function addFolderElement(_config_) {
  8365.       sortFolderConfig(_config_, config.sort.name, config.sort.isDesc);
  8366.       _config_.forEach((item) => {
  8367.         if (item["isFolder"]) {
  8368.           let { folderELement, fileNameElement } = pops.isPhone()
  8369.             ? createMobileFolderRowElement(item["fileName"])
  8370.             : createFolderRowElement(item["fileName"]);
  8371.           PopsDOMUtils.on(fileNameElement, "click", void 0, function (event) {
  8372.             refreshFolderInfoClickEvent(event, item);
  8373.           });
  8374.           folderListBodyElement.appendChild(folderELement);
  8375.         } else {
  8376.           let { folderELement, fileNameElement } = pops.isPhone()
  8377.             ? createMobileFolderRowElement(
  8378.                 item["fileName"],
  8379.                 item["latestTime"],
  8380.                 item["fileSize"]
  8381.               )
  8382.             : createFolderRowElement(
  8383.                 item["fileName"],
  8384.                 item["latestTime"],
  8385.                 item["fileSize"]
  8386.               );
  8387.           setFileClickEvent(fileNameElement, item);
  8388.           folderListBodyElement.appendChild(folderELement);
  8389.         }
  8390.       });
  8391.     }
  8392.     addFolderElement(config.folder);
  8393.     /* 将数据存到全部文件的属性_config_中 */
  8394.     let allFilesElement = folderFileListBreadcrumbPrimaryElement.querySelector(
  8395.       ".pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child"
  8396.     );
  8397.     allFilesElement._config_ = config.folder;
  8398.     /* 设置点击顶部的全部文件事件 */
  8399.     PopsDOMUtils.on(allFilesElement, "click", void 0, function (event) {
  8400.       breadcrumbAllFilesElementClickEvent(event, true, config.folder);
  8401.     });
  8402.  
  8403.     /* 移除所有的当前排序的arrow */
  8404.     function removeAllArrowActive() {
  8405.       [
  8406.         ...folderListSortFileNameElement.querySelectorAll(
  8407.           ".pops-folder-icon-active"
  8408.         ),
  8409.         ...folderListSortLatestTimeElement.querySelectorAll(
  8410.           ".pops-folder-icon-active"
  8411.         ),
  8412.         ...folderListSortFileSizeElement.querySelectorAll(
  8413.           ".pops-folder-icon-active"
  8414.         ),
  8415.       ].forEach((ele) => ele.classList.remove("pops-folder-icon-active"));
  8416.     }
  8417.     /* 设置当前的排序的arrow */
  8418.     function changeArrowActive(arrowUp, arrowDown, isDesc) {
  8419.       removeAllArrowActive();
  8420.       if (isDesc) {
  8421.         arrowDown.classList.add("pops-folder-icon-active");
  8422.       } else {
  8423.         arrowUp.classList.add("pops-folder-icon-active");
  8424.       }
  8425.     }
  8426.     /**
  8427.      * 排序按钮的点击事件
  8428.      * @param {PointerEvent} target
  8429.      * @param {HTMLElement} event
  8430.      * @param {string} sortName
  8431.      * @returns
  8432.      */
  8433.     function arrowSortClickEvent(target, event, sortName) {
  8434.       if (!event["notChangeSortRule"]) {
  8435.         config.sort.name = sortName;
  8436.         config.sort.isDesc = !config.sort.isDesc;
  8437.       }
  8438.       let arrowUp = target.querySelector(".pops-folder-icon-arrow-up");
  8439.       let arrowDown = target.querySelector(".pops-folder-icon-arrow-down");
  8440.       changeArrowActive(arrowUp, arrowDown, config.sort.isDesc);
  8441.       if (
  8442.         typeof config.sort.callback === "function" &&
  8443.         config.sort.callback(
  8444.           target,
  8445.           event,
  8446.           config.sort.name,
  8447.           config.sort.isDesc
  8448.         )
  8449.       ) {
  8450.         return;
  8451.       }
  8452.       let childrenList = [];
  8453.       Array.from(folderListBodyElement.children).forEach((trElement) => {
  8454.         let __value__ = trElement["__value__"];
  8455.         __value__["target"] = trElement;
  8456.         childrenList.push(__value__);
  8457.       });
  8458.       let sortedConfigList = sortFolderConfig(
  8459.         childrenList,
  8460.         config.sort.name,
  8461.         config.sort.isDesc
  8462.       );
  8463.       sortedConfigList.forEach((item) => {
  8464.         folderListBodyElement.appendChild(item.target);
  8465.       });
  8466.     }
  8467.     /* 设置当前排序的图标按钮 */
  8468.     PopsDOMUtils.on(
  8469.       folderListSortFileNameElement.closest("th"),
  8470.       "click",
  8471.       void 0,
  8472.       function (event) {
  8473.         arrowSortClickEvent(folderListSortFileNameElement, event, "fileName");
  8474.       },
  8475.       {
  8476.         capture: true,
  8477.       }
  8478.     );
  8479.     PopsDOMUtils.on(
  8480.       folderListSortLatestTimeElement.closest("th"),
  8481.       "click",
  8482.       void 0,
  8483.       function (event) {
  8484.         arrowSortClickEvent(
  8485.           folderListSortLatestTimeElement,
  8486.           event,
  8487.           "latestTime"
  8488.         );
  8489.       },
  8490.       {
  8491.         capture: true,
  8492.       }
  8493.     );
  8494.     PopsDOMUtils.on(
  8495.       folderListSortFileSizeElement.closest("th"),
  8496.       "click",
  8497.       void 0,
  8498.       function (event) {
  8499.         arrowSortClickEvent(folderListSortFileSizeElement, event, "fileSize");
  8500.       },
  8501.       {
  8502.         capture: true,
  8503.       }
  8504.     );
  8505.     /* 设置默认触发的arrow */
  8506.     if (config.sort.name === "fileName") {
  8507.       PopsDOMUtils.trigger(folderListSortFileNameElement, "click", {
  8508.         notChangeSortRule: true,
  8509.       });
  8510.     } else if (config.sort.name === "latestTime") {
  8511.       PopsDOMUtils.trigger(folderListSortLatestTimeElement, "click", {
  8512.         notChangeSortRule: true,
  8513.       });
  8514.     } else if (config.sort.name === "fileSize") {
  8515.       PopsDOMUtils.trigger(folderListSortFileSizeElement, "click", {
  8516.         notChangeSortRule: true,
  8517.       });
  8518.     }
  8519.     /* 拖拽 */
  8520.     if (config.drag) {
  8521.       PopsUtils.drag(popsElement, {
  8522.         dragElement: titleElement,
  8523.         limit: config.dragLimit,
  8524.         extraDistance: config.dragExtraDistance,
  8525.         moveCallBack: config.dragMoveCallBack,
  8526.         endCallBack: config.dragEndCallBack,
  8527.       });
  8528.     }
  8529.     PopsHandler.handlePush(PopsType, {
  8530.       guid: guid,
  8531.       animElement: animElement,
  8532.       popsElement: popsElement,
  8533.       maskElement: maskElement,
  8534.       $shadowContainer: $shadowContainer,
  8535.       $shadowRoot: $shadowRoot,
  8536.     });
  8537.     return PopsHandler.handleResultDetails(eventDetails);
  8538.   };
  8539.  
  8540.   /**
  8541.    * 配置面板
  8542.    * @param { PopsPanelDetails } details 配置
  8543.    */
  8544.   pops.panel = function (details) {
  8545.     let that = this;
  8546.     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  8547.     PopsHandler.handleInit($shadowRoot, [
  8548.       pops.config.cssText.index,
  8549.       pops.config.cssText.ninePalaceGridPosition,
  8550.       pops.config.cssText.scrollbar,
  8551.       pops.config.cssText.button,
  8552.       pops.config.cssText.anim,
  8553.       pops.config.cssText.common,
  8554.       pops.config.cssText.panelCSS,
  8555.     ]);
  8556.     /**
  8557.      * @type {PopsPanelDetails}
  8558.      */
  8559.     let config = {
  8560.       title: {
  8561.         text: "默认标题",
  8562.         position: "center",
  8563.         html: false,
  8564.         style: "",
  8565.       },
  8566.       content: [
  8567.         {
  8568.           id: "whitesev-panel-config-1",
  8569.           title: "菜单配置1",
  8570.           headerTitle: "菜单配置1",
  8571.           isDefault: true,
  8572.           attributes: [
  8573.             {
  8574.               "data-test": "test",
  8575.               "data-test-2": "test2",
  8576.             },
  8577.           ],
  8578.           forms: [
  8579.             {
  8580.               className: "forms-1",
  8581.               text: "区域设置",
  8582.               type: "forms",
  8583.               attributes: [],
  8584.               forms: [
  8585.                 {
  8586.                   className: "panel-switch",
  8587.                   text: "switch",
  8588.                   type: "switch",
  8589.                   attributes: [],
  8590.                   getValue() {
  8591.                     return true;
  8592.                   },
  8593.                   callback(event, value) {
  8594.                     console.log("按钮开启状态：", value);
  8595.                   },
  8596.                 },
  8597.                 {
  8598.                   className: "panel-slider",
  8599.                   text: "slider",
  8600.                   type: "slider",
  8601.                   attributes: [],
  8602.                   getValue() {
  8603.                     return 50;
  8604.                   },
  8605.                   callback(event, value) {
  8606.                     console.log("滑块当前数值：", value);
  8607.                   },
  8608.                   min: 1,
  8609.                   max: 100,
  8610.                 },
  8611.                 {
  8612.                   className: "panel-button",
  8613.                   text: "button",
  8614.                   type: "button",
  8615.                   attributes: [],
  8616.                   buttonIcon: "eleme",
  8617.                   buttonIconIsLoading: true,
  8618.                   buttonType: "warning",
  8619.                   buttonText: "warning按钮",
  8620.                   callback(event) {
  8621.                     console.log("点击按钮", event);
  8622.                   },
  8623.                 },
  8624.                 {
  8625.                   className: "panel-button",
  8626.                   text: "button",
  8627.                   type: "button",
  8628.                   attributes: [],
  8629.                   buttonIcon: "chromeFilled",
  8630.                   buttonIconIsLoading: true,
  8631.                   buttonType: "danger",
  8632.                   buttonText: "danger按钮",
  8633.                   callback(event) {
  8634.                     console.log("点击按钮", event);
  8635.                   },
  8636.                 },
  8637.                 {
  8638.                   className: "panel-button",
  8639.                   text: "button",
  8640.                   type: "button",
  8641.                   attributes: [],
  8642.                   buttonIcon: "upload",
  8643.                   buttonIconIsLoading: false,
  8644.                   buttonType: "info",
  8645.                   buttonText: "info按钮",
  8646.                   callback(event) {
  8647.                     console.log("点击按钮", event);
  8648.                   },
  8649.                 },
  8650.               ],
  8651.             },
  8652.           ],
  8653.         },
  8654.         {
  8655.           id: "whitesev-panel-config-2",
  8656.           title: "菜单配置2",
  8657.           headerTitle: "菜单配置2",
  8658.           isDefault: false,
  8659.           attributes: [
  8660.             {
  8661.               "data-value": "value",
  8662.               "data-value-2": "value2",
  8663.             },
  8664.           ],
  8665.           forms: [
  8666.             {
  8667.               className: "panel-input",
  8668.               text: "input",
  8669.               type: "input",
  8670.               attributes: [],
  8671.               getValue() {
  8672.                 return 50;
  8673.               },
  8674.               callback(event, value) {
  8675.                 console.log("输入框内容改变：", value);
  8676.               },
  8677.               placeholder: "请输入内容",
  8678.             },
  8679.             {
  8680.               className: "panel-input-password",
  8681.               text: "input-password",
  8682.               type: "input",
  8683.               attributes: [],
  8684.               getValue() {
  8685.                 return "123456";
  8686.               },
  8687.               callback(event, value) {
  8688.                 console.log("密码输入框内容改变：", value);
  8689.               },
  8690.               isPassword: true,
  8691.               placeholder: "请输入密码",
  8692.             },
  8693.             {
  8694.               className: "panel-textarea",
  8695.               text: "textarea",
  8696.               type: "textarea",
  8697.               attributes: [],
  8698.               getValue() {
  8699.                 return 50;
  8700.               },
  8701.               callback(event, value) {
  8702.                 console.log("textarea输入框内容改变：", value);
  8703.               },
  8704.               placeholder: "请输入内容",
  8705.             },
  8706.             {
  8707.               className: "panel-select",
  8708.               text: "select",
  8709.               type: "select",
  8710.               attributes: [],
  8711.               getValue() {
  8712.                 return 50;
  8713.               },
  8714.               callback(event, isSelectedValue, isSelectedText) {
  8715.                 console.log(
  8716.                   `select当前选项：${isSelectedValue}，当前选项文本：${isSelectedText}`
  8717.                 );
  8718.               },
  8719.               data: [
  8720.                 {
  8721.                   value: "all",
  8722.                   text: "所有",
  8723.                 },
  8724.                 {
  8725.                   value: "text",
  8726.                   text: "文本",
  8727.                   selected: true,
  8728.                 },
  8729.                 {
  8730.                   value: "html",
  8731.                   text: "超文本",
  8732.                 },
  8733.               ],
  8734.             },
  8735.           ],
  8736.         },
  8737.       ],
  8738.       btn: {
  8739.         close: {
  8740.           enable: true,
  8741.           callback(event) {
  8742.             event.close();
  8743.           },
  8744.         },
  8745.       },
  8746.       mask: {
  8747.         enable: false,
  8748.         clickEvent: {
  8749.           toClose: false,
  8750.           toHide: false,
  8751.         },
  8752.         clickCallBack: null,
  8753.       },
  8754.       class: "",
  8755.       mobileClassName: "pops-panel-is-mobile",
  8756.       isMobile: false,
  8757.       only: false,
  8758.       width: "700px",
  8759.       height: "500px",
  8760.       position: "center",
  8761.       animation: "pops-anim-fadein-zoom",
  8762.       zIndex: 10000,
  8763.       drag: false,
  8764.       dragLimit: true,
  8765.       dragExtraDistance: 3,
  8766.       dragMoveCallBack() {},
  8767.       dragEndCallBack() {},
  8768.       forbiddenScroll: false,
  8769.       style: void 0,
  8770.       beforeAppendToPageCallBack() {},
  8771.     };
  8772.     config = PopsUtils.assignJSON(config, details);
  8773.     if (details && Array.isArray(details.content)) {
  8774.       config.content = details.content;
  8775.     }
  8776.     let guid = PopsUtils.getRandomGUID();
  8777.     const PopsType = "panel";
  8778.     config = PopsHandler.handleOnly(PopsType, config);
  8779.     let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  8780.     let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  8781.     let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  8782.       PopsType,
  8783.       config
  8784.     );
  8785.  
  8786.     let animHTML = PopsElementHandler.getAnimHTML(
  8787.       guid,
  8788.       PopsType,
  8789.       config,
  8790.       `
  8791.       <div 
  8792.           class="pops-${PopsType}-title"
  8793.           style="text-align: ${config.title.position};
  8794.           ${headerStyle}">
  8795.           ${
  8796.             config.title.html
  8797.               ? config.title.text
  8798.               : `<p pops style="${headerPStyle}">${config.title.text}</p>`
  8799.           }
  8800.           ${headerBtnHTML}
  8801.       </div>
  8802.       <div class="pops-${PopsType}-content">
  8803.           <aside class="pops-${PopsType}-aside">
  8804.             <ul></ul>
  8805.           </aside>
  8806.           <section class="pops-${PopsType}-container">
  8807.             <ul class="pops-panel-container-header-ul"></ul>
  8808.             <ul></ul>
  8809.           </section>
  8810.       </div>
  8811.       `,
  8812.       ""
  8813.     );
  8814.     /**
  8815.      * 弹窗的主元素，包括动画层
  8816.      */
  8817.     let animElement = PopsElementHandler.parseElement(animHTML);
  8818.     /* 结构元素 */
  8819.     let {
  8820.       popsElement,
  8821.       headerCloseBtnElement: btnCloseElement,
  8822.       titleElement,
  8823.       contentElement,
  8824.       contentAsideElement,
  8825.       contentSectionContainerElement,
  8826.     } = PopsHandler.handleQueryElement(animElement, PopsType);
  8827.     if (config.isMobile || pops.isPhone()) {
  8828.       PopsDOMUtils.addClassName(popsElement, config.mobileClassName);
  8829.     }
  8830.     /**
  8831.      * 遮罩层元素
  8832.      * @type {?HTMLDivElement}
  8833.      */
  8834.     let maskElement = null;
  8835.     /**
  8836.      * 已创建的元素列表
  8837.      * @type {HTMLElement[]}
  8838.      */
  8839.     let elementList = [animElement];
  8840.  
  8841.     /* 遮罩层元素 */
  8842.     if (config.mask.enable) {
  8843.       let _handleMask_ = PopsHandler.handleMask({
  8844.         type: PopsType,
  8845.         guid: guid,
  8846.         config: config,
  8847.         animElement: animElement,
  8848.         maskHTML: maskHTML,
  8849.       });
  8850.       maskElement = _handleMask_.maskElement;
  8851.       elementList.push(maskElement);
  8852.     }
  8853.  
  8854.     /* 处理返回的配置 */
  8855.     let eventDetails = PopsHandler.handleEventDetails(
  8856.       guid,
  8857.       $shadowContainer,
  8858.       $shadowRoot,
  8859.       PopsType,
  8860.       animElement,
  8861.       popsElement,
  8862.       maskElement,
  8863.       config
  8864.     );
  8865.     /* 为顶部右边的关闭按钮添加点击事件 */
  8866.     PopsHandler.handleClickEvent(
  8867.       btnCloseElement,
  8868.       "close",
  8869.       eventDetails,
  8870.       config.btn.close.callback
  8871.     );
  8872.  
  8873.     /* 创建到页面中 */
  8874.     PopsUtils.appendChild($shadowRoot, elementList);
  8875.     if (typeof config.beforeAppendToPageCallBack === "function") {
  8876.       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  8877.     }
  8878.     PopsUtils.appendChild($shadowContainer);
  8879.     /* 追加遮罩层元素 */
  8880.     if (maskElement != null) {
  8881.       animElement.after(maskElement);
  8882.     }
  8883.  
  8884.     /**
  8885.      * 处理内部配置
  8886.      */
  8887.     const HandleContetDetails = {
  8888.       /**
  8889.        * @type {HTMLUListElement}
  8890.        */
  8891.       asideULElement: null,
  8892.       /**
  8893.        * @type {HTMLUListElement}
  8894.        */
  8895.       sectionContainerHeaderULElement: null,
  8896.       /**
  8897.        * @type {HTMLUListElement}
  8898.        */
  8899.       sectionContainerULElement: null,
  8900.       init() {
  8901.         this.asideULElement = contentAsideElement.querySelector("ul");
  8902.         this.sectionContainerHeaderULElement =
  8903.           contentSectionContainerElement.querySelectorAll("ul")[0];
  8904.         this.sectionContainerULElement =
  8905.           contentSectionContainerElement.querySelectorAll("ul")[1];
  8906.         /**
  8907.          * 默认点击的左侧容器
  8908.          * @type {HTMLLIElement}
  8909.          */
  8910.         let asideDefaultItemElement = null;
  8911.         let isScrollToDefaultView = false;
  8912.         config.content.forEach((asideItem) => {
  8913.           let asideLiElement = this.getAsideItem(asideItem);
  8914.           this.setAsideItemClickEvent(asideLiElement, asideItem);
  8915.           this.asideULElement.appendChild(asideLiElement);
  8916.           if (asideDefaultItemElement == null) {
  8917.             let flag = false;
  8918.             if (typeof asideItem.isDefault === "function") {
  8919.               flag = Boolean(asideItem.isDefault());
  8920.             } else {
  8921.               flag = Boolean(asideItem.isDefault);
  8922.             }
  8923.             if (flag) {
  8924.               asideDefaultItemElement = asideLiElement;
  8925.               isScrollToDefaultView = Boolean(asideItem.scrollToDefaultView);
  8926.             }
  8927.           }
  8928.         });
  8929.  
  8930.         /* 点击左侧列表 */
  8931.         if (
  8932.           asideDefaultItemElement == null &&
  8933.           this.asideULElement.children.length
  8934.         ) {
  8935.           /* 默认第一个 */
  8936.           asideDefaultItemElement = this.asideULElement.children[0];
  8937.         }
  8938.         if (asideDefaultItemElement) {
  8939.           /* 点击选择的那一项 */
  8940.           asideDefaultItemElement.click();
  8941.           if (isScrollToDefaultView) {
  8942.             asideDefaultItemElement?.scrollIntoView();
  8943.           }
  8944.         } else {
  8945.           console.error("左侧容器没有项");
  8946.         }
  8947.       },
  8948.       /**
  8949.        * 清空container容器的元素
  8950.        */
  8951.       clearContainer() {
  8952.         this.sectionContainerHeaderULElement.innerHTML = "";
  8953.         this.sectionContainerULElement.innerHTML = "";
  8954.       },
  8955.       /**
  8956.        * 清空左侧容器已访问记录
  8957.        */
  8958.       clearAsideItemIsVisited() {
  8959.         contentAsideElement
  8960.           .querySelectorAll(".pops-is-visited")
  8961.           .forEach((element) => {
  8962.             PopsDOMUtils.removeClassName(element, "pops-is-visited");
  8963.           });
  8964.       },
  8965.       /**
  8966.        * 设置左侧容器已访问记录
  8967.        * @param {HTMLElement} element
  8968.        */
  8969.       setAsideItemIsVisited(element) {
  8970.         PopsDOMUtils.addClassName(element, "pops-is-visited");
  8971.       },
  8972.       /**
  8973.        * 为元素添加自定义属性
  8974.        * @param {HTMLElement} element
  8975.        * @param {object | object[]} attributes
  8976.        */
  8977.       addElementAttributes(element, attributes) {
  8978.         if (attributes == null) {
  8979.           return;
  8980.         }
  8981.         if (Array.isArray(attributes)) {
  8982.           attributes.forEach((attrObject) => {
  8983.             this.addElementAttributes(element, attrObject);
  8984.           });
  8985.         } else {
  8986.           Object.keys(attributes).forEach((attributeName) => {
  8987.             element.setAttribute(attributeName, attributes[attributeName]);
  8988.           });
  8989.         }
  8990.       },
  8991.       /**
  8992.        * 为元素设置(自定义)属性
  8993.        * @param {HTMLElement} element
  8994.        * @param {?HTMLElement} props
  8995.        */
  8996.       setElementProps(element, props) {
  8997.         if (props == null) {
  8998.           return;
  8999.         }
  9000.         Object.keys(props).forEach((propName) => {
  9001.           element[propName] = props[propName];
  9002.         });
  9003.       },
  9004.       /**
  9005.        * 获取左侧容器元素<li>
  9006.        * @param { PopsPanelContentConfig } asideConfig
  9007.        * @returns
  9008.        */
  9009.       getAsideItem(asideConfig) {
  9010.         let liElement = document.createElement("li");
  9011.         liElement.id = asideConfig.id;
  9012.         liElement.__forms__ = asideConfig.forms;
  9013.         liElement.innerHTML = asideConfig.title;
  9014.         this.addElementAttributes(liElement, asideConfig.attributes);
  9015.         this.setElementProps(liElement, asideConfig.props);
  9016.         return liElement;
  9017.       },
  9018.       /**
  9019.        * 获取中间容器的元素<li>
  9020.        * type ==> switch
  9021.        * @param {PopsPanelSwitchDetails} formConfig
  9022.        * @returns
  9023.        */
  9024.       getSectionContainerItem_switch(formConfig) {
  9025.         function setSwitchChecked(
  9026.           switchElement,
  9027.           switchInputElement,
  9028.           checked = false
  9029.         ) {
  9030.           switchInputElement.checked = Boolean(checked);
  9031.           if (checked) {
  9032.             PopsDOMUtils.addClassName(
  9033.               switchElement,
  9034.               "pops-panel-switch-is-checked"
  9035.             );
  9036.           } else {
  9037.             PopsDOMUtils.removeClassName(
  9038.               switchElement,
  9039.               "pops-panel-switch-is-checked"
  9040.             );
  9041.           }
  9042.         }
  9043.         let liElement = document.createElement("li");
  9044.         liElement.__formConfig__ = formConfig;
  9045.         if (formConfig.className) {
  9046.           liElement.className = formConfig.className;
  9047.         }
  9048.         this.addElementAttributes(liElement, formConfig.attributes);
  9049.         this.setElementProps(liElement, formConfig.props);
  9050.         /* 左边底部的描述的文字 */
  9051.         let leftDescriptionText = "";
  9052.         if (Boolean(formConfig.description)) {
  9053.           leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  9054.         }
  9055.         liElement.innerHTML = `
  9056.         <div class="pops-panel-item-left-text">
  9057.           <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  9058.           ${leftDescriptionText}
  9059.         </div>
  9060.         <div class="pops-panel-switch">
  9061.           <input class="pops-panel-switch__input" type="checkbox">
  9062.           <span class="pops-panel-switch__core">
  9063.             <div class="pops-panel-switch__action">
  9064.             </div>
  9065.           </span>
  9066.         </div>
  9067.         `;
  9068.         const PopsPanelSwitch = {
  9069.           [Symbol.toStringTag]: "PopsPanelSwitch",
  9070.           $data: {
  9071.             value: Boolean(formConfig.getValue()),
  9072.           },
  9073.           $ele: {
  9074.             /**
  9075.              * @type {HTMLDivElement}
  9076.              */
  9077.             switch: liElement.querySelector(".pops-panel-switch"),
  9078.             /**
  9079.              * @type {HTMLInputElement}
  9080.              */
  9081.             input: liElement.querySelector(".pops-panel-switch__input"),
  9082.             /**
  9083.              * @type {HTMLSpanElement}
  9084.              */
  9085.             core: liElement.querySelector(".pops-panel-switch__core"),
  9086.           },
  9087.           init() {
  9088.             this.setStatus(this.$data.value);
  9089.             if (formConfig.disabled) {
  9090.               this.disable();
  9091.             }
  9092.             this.setClickEvent();
  9093.           },
  9094.           setClickEvent() {
  9095.             let that = this;
  9096.             PopsDOMUtils.on(this.$ele.core, "click", void 0, function (event) {
  9097.               if (
  9098.                 that.$ele.input.disabled ||
  9099.                 that.$ele.switch.hasAttribute("data-disabled")
  9100.               ) {
  9101.                 return;
  9102.               }
  9103.               that.$data.value = that.getStatus();
  9104.               that.setStatus(that.$data.value);
  9105.               if (typeof formConfig.callback === "function") {
  9106.                 formConfig.callback(event, that.$data.value);
  9107.               }
  9108.             });
  9109.           },
  9110.           /**
  9111.            * 设置状态
  9112.            */
  9113.           setStatus(isChecked = false) {
  9114.             isChecked = Boolean(isChecked);
  9115.             this.$ele.input.checked = isChecked;
  9116.             if (isChecked) {
  9117.               PopsDOMUtils.addClassName(
  9118.                 this.$ele.switch,
  9119.                 "pops-panel-switch-is-checked"
  9120.               );
  9121.             } else {
  9122.               PopsDOMUtils.removeClassName(
  9123.                 this.$ele.switch,
  9124.                 "pops-panel-switch-is-checked"
  9125.               );
  9126.             }
  9127.           },
  9128.           /**
  9129.            * 根据className来获取逆反值
  9130.            */
  9131.           getStatus() {
  9132.             let checkedValue = false;
  9133.             if (
  9134.               !PopsDOMUtils.containsClassName(
  9135.                 this.$ele.switch,
  9136.                 "pops-panel-switch-is-checked"
  9137.               )
  9138.             ) {
  9139.               checkedValue = true;
  9140.             }
  9141.             return checkedValue;
  9142.           },
  9143.           /**
  9144.            * 禁用复选框
  9145.            */
  9146.           disable() {
  9147.             this.$ele.input.disabled = true;
  9148.             this.$ele.switch.setAttribute("data-disabled", true);
  9149.           },
  9150.           /**
  9151.            * 启用复选框
  9152.            */
  9153.           notDisable() {
  9154.             this.$ele.input.disabled = false;
  9155.             this.$ele.switch.removeAttribute("data-disabled");
  9156.           },
  9157.         };
  9158.  
  9159.         PopsPanelSwitch.init();
  9160.         liElement["data-switch"] = PopsPanelSwitch;
  9161.         return liElement;
  9162.       },
  9163.       /**
  9164.        * 获取中间容器的元素<li>
  9165.        * type ==> slider
  9166.        * @param {PopsPanelSliderDetails} formConfig
  9167.        * @returns
  9168.        */
  9169.       getSectionContainerItem_slider(formConfig) {
  9170.         let liElement = document.createElement("li");
  9171.         liElement.__formConfig__ = formConfig;
  9172.         if (formConfig.className) {
  9173.           liElement.className = formConfig.className;
  9174.         }
  9175.         this.addElementAttributes(liElement, formConfig.attributes);
  9176.         this.setElementProps(liElement, formConfig.props);
  9177.         /* 左边底部的描述的文字 */
  9178.         let leftDescriptionText = "";
  9179.         if (Boolean(formConfig.description)) {
  9180.           leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  9181.         }
  9182.         liElement.innerHTML = `
  9183.        <div class="pops-panel-item-left-text">
  9184.          <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  9185.          ${leftDescriptionText}
  9186.        </div>
  9187.        <div class="pops-panel-slider">
  9188.          <input type="range" min="${formConfig.min}" max="${formConfig.max}">
  9189.        </div>
  9190.        `;
  9191.         /**
  9192.          * @type {HTMLInputElement}
  9193.          */
  9194.         let rangeInputElement = liElement.querySelector(
  9195.           ".pops-panel-slider input[type=range]"
  9196.         );
  9197.         if (formConfig.step) {
  9198.           rangeInputElement.setAttribute("step", formConfig.step);
  9199.         }
  9200.         rangeInputElement.value = formConfig.getValue();
  9201.         /**
  9202.          * 获取提示的内容
  9203.          * @param {number} value
  9204.          * @returns {string}
  9205.          */
  9206.         let getToolTipContent = function (value) {
  9207.           if (typeof formConfig.getToolTipContent === "function") {
  9208.             return formConfig.getToolTipContent(value);
  9209.           } else {
  9210.             return value;
  9211.           }
  9212.         };
  9213.         let tooltip = pops.tooltip({
  9214.           target: rangeInputElement.parentElement,
  9215.           content: getToolTipContent(rangeInputElement.value),
  9216.           zIndex: 1000000,
  9217.           className: "github-tooltip",
  9218.           triggerShowEventCallBack(toolTipNode) {
  9219.             toolTipNode.querySelector("div").innerText = getToolTipContent(
  9220.               rangeInputElement.value
  9221.             );
  9222.           },
  9223.           alwaysShow: false,
  9224.           only: false,
  9225.           position: "top",
  9226.           arrowDistance: 10,
  9227.         });
  9228.         PopsDOMUtils.on(
  9229.           rangeInputElement,
  9230.           ["input", "propertychange"],
  9231.           void 0,
  9232.           function (event) {
  9233.             tooltip.toolTipNode.querySelector("div").innerText =
  9234.               getToolTipContent(rangeInputElement.value);
  9235.             if (typeof formConfig.callback === "function") {
  9236.               formConfig.callback(event, event.target.value);
  9237.             }
  9238.           }
  9239.         );
  9240.         return liElement;
  9241.       },
  9242.       /**
  9243.        * 获取中间容器的元素<li>
  9244.        * type ==> slider
  9245.        * @param {PopsPanelSliderDetails} formConfig
  9246.        * @returns
  9247.        */
  9248.       getSectionContainerItem_slider_new(formConfig) {
  9249.         let liElement = document.createElement("li");
  9250.         liElement.__formConfig__ = formConfig;
  9251.         if (formConfig.className) {
  9252.           liElement.className = formConfig.className;
  9253.         }
  9254.         this.addElementAttributes(liElement, formConfig.attributes);
  9255.         this.setElementProps(liElement, formConfig.props);
  9256.         /* 左边底部的描述的文字 */
  9257.         let leftDescriptionText = "";
  9258.         if (Boolean(formConfig.description)) {
  9259.           leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  9260.         }
  9261.         liElement.innerHTML = `
  9262.         <div class="pops-panel-item-left-text" style="flex: 1;">
  9263.           <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  9264.           ${leftDescriptionText}
  9265.         </div>
  9266.         <div class="pops-slider pops-slider-width">
  9267.           <div class="pops-slider__runway">
  9268.             <div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
  9269.             <div
  9270.               class="pops-slider__button-wrapper"
  9271.               style="left: 0%">
  9272.               <div class="pops-slider__button"></div>
  9273.             </div>
  9274.           </div>
  9275.         </div>
  9276.         `;
  9277.         const PopsPanelSlider = {
  9278.           [Symbol.toStringTag]: "PopsPanelSlider",
  9279.           /**
  9280.            * 值
  9281.            */
  9282.           value: formConfig.getValue(),
  9283.           /**
  9284.            * 最小值
  9285.            */
  9286.           min: formConfig.min,
  9287.           /**
  9288.            * 最大值
  9289.            */
  9290.           max: formConfig.max,
  9291.           /**
  9292.            * 间隔
  9293.            */
  9294.           step: formConfig.step || 1,
  9295.           $data: {
  9296.             /**
  9297.              * 是否正在移动
  9298.              */
  9299.             isMove: false,
  9300.             /**
  9301.              * 是否已初始化已拖拽的距离
  9302.              */
  9303.             isInitDragPosition: false,
  9304.             /**
  9305.              * 是否正在检测是否停止拖拽
  9306.              */
  9307.             isCheckingStopDragMove: false,
  9308.             /**
  9309.              * 总宽度（px）
  9310.              */
  9311.             totalWidth: 0,
  9312.             /**
  9313.              * 每一块的间隔（px）
  9314.              */
  9315.             stepPx: 0,
  9316.             /**
  9317.              * 已拖拽的距离（px）
  9318.              */
  9319.             dragWidth: 0,
  9320.             /**
  9321.              * 已拖拽的百分比
  9322.              */
  9323.             dragPercent: 0,
  9324.             /**
  9325.              * 每一次块的信息
  9326.              * 例如：当最小值是2，最大值是10，step为2
  9327.              * 那么生成[2,4,6,8,10] 共计5个
  9328.              * 又获取到当前滑块总长度是200px
  9329.              * 那么生成映射
  9330.              * 2 => 0px~40px
  9331.              * 4 => 40px~80px
  9332.              * 6 => 80px~120px
  9333.              * 8 => 120px~160px
  9334.              * 10 => 160px~200px
  9335.              * @type {Map<number,{
  9336.              * value: number,
  9337.              * px: number,
  9338.              * pxLeft: number,
  9339.              * pxRight: number,
  9340.              * percent: number,
  9341.              * }>}
  9342.              */
  9343.             stepBlockMap: new Map(),
  9344.           },
  9345.           $ele: {
  9346.             slider: liElement.querySelector(".pops-slider"),
  9347.             runAway: liElement.querySelector(".pops-slider__runway"),
  9348.             bar: liElement.querySelector(".pops-slider__bar"),
  9349.             buttonWrapper: liElement.querySelector(
  9350.               ".pops-slider__button-wrapper"
  9351.             ),
  9352.             button: liElement.querySelector(".pops-slider__button"),
  9353.             /**
  9354.              * @type {{
  9355.              * guid: string,
  9356.              * $shadowContainer: HTMLDivElement,
  9357.              * $shadowRoot: ShadowRoot,
  9358.              * config: PopsToolTipDetails,
  9359.              * toolTipNode: HTMLDivElement,
  9360.              * show: ()=>void,
  9361.              * close: ()=>void,
  9362.              * off: ()=>void,
  9363.              * on: ()=>void,
  9364.              * }}
  9365.              */
  9366.             tooltip: null,
  9367.           },
  9368.           $interval: {
  9369.             isCheck: false,
  9370.           },
  9371.           $tooltip: null,
  9372.           init() {
  9373.             this.initEleData();
  9374.             this.setToolTipEvent();
  9375.             this.setPanEvent();
  9376.             this.setRunAwayClickEvent();
  9377.             this.intervalInit();
  9378.             if (formConfig.disabled) {
  9379.               this.disableDrag();
  9380.             }
  9381.           },
  9382.           /**
  9383.            * 10s内循环获取slider的宽度等信息
  9384.            * 获取到了就可以初始化left的值
  9385.            * @param {number} [checkStepTime=200] 每次检测的间隔时间
  9386.            * @param {number} [maxTime=10000] 最大的检测时间
  9387.            */
  9388.           intervalInit(checkStepTime = 200, maxTime = 10000) {
  9389.             if (this.$interval.isCheck) {
  9390.               return;
  9391.             }
  9392.             this.$interval.isCheck = true;
  9393.             let isSuccess = false;
  9394.             let oldTotalWidth = this.$data.totalWidth;
  9395.             let timer = null;
  9396.             let interval = setInterval(() => {
  9397.               if (isSuccess) {
  9398.                 this.$interval.isCheck = false;
  9399.                 clearTimeout(timer);
  9400.                 clearInterval(interval);
  9401.               } else {
  9402.                 this.initTotalWidth();
  9403.                 if (this.$data.totalWidth !== 0) {
  9404.                   isSuccess = true;
  9405.                   if (this.$data.totalWidth !== oldTotalWidth) {
  9406.                     /* slider的总宽度改变了 */
  9407.                     if (MathFloatUtils.isFloat(this.step)) {
  9408.                       this.initFloatStepMap();
  9409.                     } else {
  9410.                       this.initStepMap();
  9411.                     }
  9412.                     this.initSliderPosition();
  9413.                   }
  9414.                 }
  9415.               }
  9416.             }, checkStepTime);
  9417.             /* 最长检测时间是10s */
  9418.             timer = setTimeout(() => {
  9419.               clearInterval(interval);
  9420.             }, maxTime);
  9421.           },
  9422.           /**
  9423.            * 把数据添加到元素上
  9424.            */
  9425.           initEleData() {
  9426.             this.$ele.slider.setAttribute("data-min", this.min);
  9427.             this.$ele.slider.setAttribute("data-max", this.max);
  9428.             this.$ele.slider.setAttribute("data-value", this.value);
  9429.             this.$ele.slider.setAttribute("data-step", this.step);
  9430.             this.$ele.slider["data-min"] = this.min;
  9431.             this.$ele.slider["data-max"] = this.max;
  9432.             this.$ele.slider["data-value"] = this.value;
  9433.             this.$ele.slider["data-step"] = this.step;
  9434.           },
  9435.           /**
  9436.            * 初始化滑块的总长度的数据(px)
  9437.            */
  9438.           initTotalWidth() {
  9439.             this.$data.totalWidth = PopsDOMUtils.width(this.$ele.runAway);
  9440.           },
  9441.           /**
  9442.            * 初始化每一个块的具体数据信息
  9443.            */
  9444.           initStepMap() {
  9445.             let index = 0;
  9446.             // 计算出份数
  9447.             let blockNums = (this.max - this.min) / this.step;
  9448.             // 计算出每一份占据的px
  9449.             this.$data.stepPx = this.$data.totalWidth / blockNums;
  9450.             let widthPx = 0;
  9451.             for (
  9452.               let stepValue = this.min;
  9453.               stepValue <= this.max;
  9454.               stepValue += this.step
  9455.             ) {
  9456.               let value = this.formatValue(stepValue);
  9457.               let info = {};
  9458.               if (value === this.min) {
  9459.                 /* 起始 */
  9460.                 info = {
  9461.                   value: value,
  9462.                   px: 0,
  9463.                   pxLeft: 0,
  9464.                   pxRight: this.$data.stepPx / 2,
  9465.                   percent: 0,
  9466.                 };
  9467.               } else {
  9468.                 info = {
  9469.                   value: value,
  9470.                   px: widthPx,
  9471.                   pxLeft: widthPx - this.$data.stepPx / 2,
  9472.                   pxRight: widthPx + this.$data.stepPx / 2,
  9473.                   percent: widthPx / this.$data.totalWidth,
  9474.                 };
  9475.                 //if (value === this.max) {
  9476.                 //  info["pxLeft"] = this.$data.stepBlockMap.get(
  9477.                 //    index - 1
  9478.                 //  ).pxRight;
  9479.                 //  info["pxRight"] = this.$data.totalWidth;
  9480.                 //}
  9481.               }
  9482.               this.$data.stepBlockMap.set(index, info);
  9483.               index++;
  9484.               widthPx += this.$data.stepPx;
  9485.             }
  9486.           },
  9487.           /**
  9488.            * 初始化每一个块的具体数据信息（浮点）
  9489.            */
  9490.           initFloatStepMap() {
  9491.             let index = 0;
  9492.             // 计算出份数
  9493.             let blockNums = (this.max - this.min) / this.step;
  9494.             // 计算出每一份占据的px
  9495.             this.$data.stepPx = this.$data.totalWidth / blockNums;
  9496.             let widthPx = 0;
  9497.             for (
  9498.               let stepValue = this.min;
  9499.               stepValue <= this.max;
  9500.               stepValue = MathFloatUtils.add(stepValue, this.step)
  9501.             ) {
  9502.               let value = this.formatValue(stepValue);
  9503.               let info = {};
  9504.               if (value === this.min) {
  9505.                 /* 起始 */
  9506.                 info = {
  9507.                   value: value,
  9508.                   px: 0,
  9509.                   pxLeft: 0,
  9510.                   pxRight: this.$data.stepPx / 2,
  9511.                   percent: 0,
  9512.                 };
  9513.               } else {
  9514.                 info = {
  9515.                   value: value,
  9516.                   px: widthPx,
  9517.                   pxLeft: widthPx - this.$data.stepPx / 2,
  9518.                   pxRight: widthPx + this.$data.stepPx / 2,
  9519.                   percent: widthPx / this.$data.totalWidth,
  9520.                 };
  9521.                 //if (value === this.max) {
  9522.                 //  info["pxLeft"] = this.$data.stepBlockMap.get(
  9523.                 //    index - 1
  9524.                 //  ).pxRight;
  9525.                 //  info["pxRight"] = this.$data.totalWidth;
  9526.                 //}
  9527.               }
  9528.               this.$data.stepBlockMap.set(index, info);
  9529.               index++;
  9530.               widthPx += this.$data.stepPx;
  9531.             }
  9532.           },
  9533.           /**
  9534.            * 初始化slider的默认起始left的百分比值
  9535.            */
  9536.           initSliderPosition() {
  9537.             /* 设置起始默认style的left值 */
  9538.             let percent = 0;
  9539.             for (const [
  9540.               index,
  9541.               stepBlockInfo,
  9542.             ] of this.$data.stepBlockMap.entries()) {
  9543.               /* 判断值是否和区域内的值相等 */
  9544.               if (stepBlockInfo.value == this.value) {
  9545.                 percent = stepBlockInfo.percent;
  9546.                 this.$data.dragWidth = stepBlockInfo.px;
  9547.                 break;
  9548.               }
  9549.             }
  9550.             percent = this.formatValue(percent * 100);
  9551.             this.setSliderPosition(percent);
  9552.           },
  9553.           /**
  9554.            * 判断数字是否是浮点数
  9555.            * @param {number} num
  9556.            * @returns
  9557.            */
  9558.           isFloat(num) {
  9559.             return Number(num) === num && num % 1 !== 0;
  9560.           },
  9561.           /**
  9562.            * 值改变的回调
  9563.            * @param {any} event
  9564.            * @param {number} value
  9565.            */
  9566.           valueChangeCallBack(event, value) {
  9567.             if (typeof formConfig.callback === "function") {
  9568.               formConfig.callback(event, value);
  9569.             }
  9570.           },
  9571.           /**
  9572.            * 根据拖拽距离获取滑块应该在的区间和值
  9573.            */
  9574.           getDragInfo(dragX) {
  9575.             let result = this.$data.stepBlockMap.get(0);
  9576.             for (const [
  9577.               index,
  9578.               stepBlockInfo,
  9579.             ] of this.$data.stepBlockMap.entries()) {
  9580.               if (
  9581.                 stepBlockInfo.pxLeft <= dragX &&
  9582.                 dragX < stepBlockInfo.pxRight
  9583.               ) {
  9584.                 result = stepBlockInfo;
  9585.                 break;
  9586.               }
  9587.             }
  9588.             return result;
  9589.           },
  9590.           /**
  9591.            * 获取滑块的当前脱拖拽占据的百分比
  9592.            * @param {number} dragWidth
  9593.            */
  9594.           getSliderPositonPercent(dragWidth) {
  9595.             return dragWidth / this.$data.totalWidth;
  9596.           },
  9597.           /**
  9598.            * 根据step格式化value
  9599.            * @param {number} num
  9600.            */
  9601.           formatValue(num) {
  9602.             if (MathFloatUtils.isFloat(this.step)) {
  9603.               num = parseFloat(num.toFixed(2));
  9604.             } else {
  9605.               num = parseInt(num);
  9606.             }
  9607.             return num;
  9608.           },
  9609.           /**
  9610.            * 设置滑块的位置偏移（left）
  9611.            * @param {number} percent 百分比
  9612.            */
  9613.           setSliderPosition(percent) {
  9614.             if (parseInt(percent) === 1) {
  9615.               percent = 1;
  9616.             }
  9617.             if (percent > 1) {
  9618.               percent = percent / 100;
  9619.             }
  9620.             /* 滑块按钮的偏移 */
  9621.             this.$ele.buttonWrapper.style.left = `${percent * 100}%`;
  9622.             /* 滑块进度的宽度 */
  9623.             this.$ele.bar.style.width = `${percent * 100}%`;
  9624.           },
  9625.           /**
  9626.            * 禁止拖拽
  9627.            */
  9628.           disableDrag() {
  9629.             this.$ele.runAway.classList.add("pops-slider-is-disabled");
  9630.           },
  9631.           /**
  9632.            * 允许拖拽
  9633.            */
  9634.           allowDrag() {
  9635.             this.$ele.runAway.classList.remove("pops-slider-is-disabled");
  9636.           },
  9637.           /**
  9638.            * 判断当前滑块是否被禁用
  9639.            */
  9640.           isDisabledDrag() {
  9641.             return this.$ele.runAway.classList.contains(
  9642.               "pops-slider-is-disabled"
  9643.             );
  9644.           },
  9645.           /**
  9646.            * 设置进度条点击定位的事件
  9647.            */
  9648.           setRunAwayClickEvent() {
  9649.             PopsDOMUtils.on(
  9650.               this.$ele.runAway,
  9651.               "click",
  9652.               void 0,
  9653.               /**
  9654.                *
  9655.                * @param {PointerEvent} event
  9656.                */
  9657.               (event) => {
  9658.                 if (
  9659.                   event.target !== this.$ele.runAway &&
  9660.                   event.target !== this.$ele.bar
  9661.                 ) {
  9662.                   return;
  9663.                 }
  9664.                 let clickX = parseFloat(event.offsetX);
  9665.                 this.dragStartCallBack();
  9666.                 this.dragMoveCallBack(event, clickX, this.value);
  9667.                 this.dragEndCallBack(clickX);
  9668.               },
  9669.               {
  9670.                 capture: false,
  9671.               }
  9672.             );
  9673.           },
  9674.           /**
  9675.            * 拖拽开始的回调，如果返回false，禁止拖拽
  9676.            */
  9677.           dragStartCallBack() {
  9678.             if (!this.$data.isMove) {
  9679.               if (this.isDisabledDrag()) {
  9680.                 return false;
  9681.               }
  9682.               this.$data.isMove = true;
  9683.             }
  9684.             return true;
  9685.           },
  9686.           /**
  9687.            * 拖拽中的回调
  9688.            * @param {MouseEvent|TouchEvent} event 事件
  9689.            * @param {number} dragX 当前拖拽的距离
  9690.            * @param {number} oldValue 旧的值
  9691.            */
  9692.           dragMoveCallBack(event, dragX, oldValue) {
  9693.             let dragPercent = 0;
  9694.             if (dragX <= 0) {
  9695.               dragPercent = 0;
  9696.               this.value = this.min;
  9697.             } else if (dragX >= this.$data.totalWidth) {
  9698.               dragPercent = 1;
  9699.               this.value = this.max;
  9700.             } else {
  9701.               const dragInfo = this.getDragInfo(dragX);
  9702.               dragPercent = dragInfo.percent;
  9703.               this.value = this.formatValue(dragInfo.value);
  9704.             }
  9705.             this.$data.dragPercent = dragPercent;
  9706.             this.setSliderPosition(this.$data.dragPercent);
  9707.             this.showToolTip();
  9708.             if (oldValue !== this.value) {
  9709.               this.valueChangeCallBack(event, this.value);
  9710.             }
  9711.           },
  9712.           /**
  9713.            * 拖拽结束的回调
  9714.            */
  9715.           dragEndCallBack(dragX) {
  9716.             this.$data.isMove = false;
  9717.             if (dragX <= 0) {
  9718.               this.$data.dragWidth = 0;
  9719.             } else if (dragX >= this.$data.totalWidth) {
  9720.               this.$data.dragWidth = this.$data.totalWidth;
  9721.             } else {
  9722.               this.$data.dragWidth = dragX;
  9723.             }
  9724.             this.closeToolTip();
  9725.           },
  9726.           /**
  9727.            * 设置点击拖拽事件
  9728.            */
  9729.           setPanEvent() {
  9730.             const AnyTouch = PopsUtils.AnyTouch();
  9731.             this.$tooltip = new AnyTouch(this.$ele.button, {
  9732.               preventEvent() {
  9733.                 return false;
  9734.               },
  9735.             });
  9736.             /**
  9737.              * 当前的拖拽的距离px
  9738.              * @type {number}
  9739.              */
  9740.             let currentDragX = 0;
  9741.             /* 监听拖拽 */
  9742.             this.$tooltip.on("at:move", (event) => {
  9743.               if (!this.dragStartCallBack()) {
  9744.                 return;
  9745.               }
  9746.               let oldValue = this.value;
  9747.               const runAwayRect = this.$ele.runAway.getBoundingClientRect();
  9748.               let displacementX =
  9749.                 event.x - (runAwayRect.left + globalThis.screenX);
  9750.               if (displacementX <= 0) {
  9751.                 displacementX = 0;
  9752.               } else if (displacementX >= runAwayRect.width) {
  9753.                 displacementX = runAwayRect.width;
  9754.               }
  9755.               currentDragX = displacementX;
  9756.               /* 拖拽移动 */
  9757.               this.dragMoveCallBack(event, currentDragX, oldValue);
  9758.             });
  9759.             /* 监听触点离开，处理某些情况下，拖拽松开，但是未触发pan事件，可以通过设置这个来关闭tooltip */
  9760.             this.$tooltip.on("at:end", (event) => {
  9761.               this.dragEndCallBack(currentDragX);
  9762.             });
  9763.           },
  9764.           /**
  9765.            * 显示悬浮的
  9766.            */
  9767.           showToolTip() {
  9768.             this.$ele.tooltip.show();
  9769.           },
  9770.           /**
  9771.            * 关闭悬浮的
  9772.            */
  9773.           closeToolTip() {
  9774.             this.$ele.tooltip.close();
  9775.           },
  9776.           /**
  9777.            * 检测在1000ms内，是否停止了拖拽
  9778.            */
  9779.           checkStopDragMove() {
  9780.             if (this.$data.isCheckingStopDragMove) {
  9781.               return;
  9782.             }
  9783.             this.$data.isCheckingStopDragMove = true;
  9784.             let interval = setInterval(() => {
  9785.               if (!this.$data.isMove) {
  9786.                 this.$data.isCheckingStopDragMove = false;
  9787.                 this.closeToolTip();
  9788.                 clearInterval(interval);
  9789.               }
  9790.             }, 200);
  9791.             setTimeout(() => {
  9792.               this.$data.isCheckingStopDragMove = false;
  9793.               clearInterval(interval);
  9794.             }, 2000);
  9795.           },
  9796.           /**
  9797.            * 设置拖拽按钮的悬浮事件
  9798.            */
  9799.           setToolTipEvent() {
  9800.             /**
  9801.              * 获取提示的内容
  9802.              */
  9803.             function getToolTipContent() {
  9804.               if (typeof formConfig.getToolTipContent === "function") {
  9805.                 return formConfig.getToolTipContent(PopsPanelSlider.value);
  9806.               } else {
  9807.                 return PopsPanelSlider.value;
  9808.               }
  9809.             }
  9810.             let tooltipContent = null;
  9811.             this.$ele.tooltip = pops.tooltip({
  9812.               target: this.$ele.button,
  9813.               content: getToolTipContent,
  9814.               zIndex: 1000000,
  9815.               className: "github-tooltip",
  9816.               only: false,
  9817.               eventOption: {
  9818.                 capture: true,
  9819.                 passive: true,
  9820.               },
  9821.               showBeforeCallBack: () => {
  9822.                 this.intervalInit();
  9823.               },
  9824.               showAfterCallBack: (toolTipNode) => {
  9825.                 tooltipContent.innerText = getToolTipContent();
  9826.               },
  9827.               closeBeforeCallBack: () => {
  9828.                 if (this.$data.isMove) {
  9829.                   this.checkStopDragMove();
  9830.                   return false;
  9831.                 }
  9832.               },
  9833.               alwaysShow: false,
  9834.               only: false,
  9835.               position: "top",
  9836.               arrowDistance: 10,
  9837.             });
  9838.             tooltipContent = this.$ele.tooltip.toolTipNode.querySelector("div");
  9839.           },
  9840.         };
  9841.         PopsPanelSlider.init();
  9842.         liElement["data-slider"] = PopsPanelSlider;
  9843.         return liElement;
  9844.       },
  9845.       /**
  9846.        * 获取中间容器的元素<li>
  9847.        * type ==> input
  9848.        * @param {PopsPanelInputDetails} formConfig
  9849.        * @returns
  9850.        */
  9851.       getSectionContainerItem_input(formConfig) {
  9852.         let liElement = document.createElement("li");
  9853.         liElement.__formConfig__ = formConfig;
  9854.         if (formConfig.className) {
  9855.           liElement.className = formConfig.className;
  9856.         }
  9857.         this.addElementAttributes(liElement, formConfig.attributes);
  9858.         this.setElementProps(liElement, formConfig.props);
  9859.         let inputType = "text";
  9860.         if (formConfig.isPassword) {
  9861.           inputType = "password";
  9862.         } else if (formConfig.isNumber) {
  9863.           inputType = "number";
  9864.         }
  9865.         /* 左边底部的描述的文字 */
  9866.         let leftDescriptionText = "";
  9867.         if (Boolean(formConfig.description)) {
  9868.           leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  9869.         }
  9870.         liElement.innerHTML = `
  9871.         <div class="pops-panel-item-left-text">
  9872.           <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  9873.           ${leftDescriptionText}
  9874.         </div>
  9875.         <div class="pops-panel-input">
  9876.           <input type="${inputType}" placeholder="${formConfig.placeholder}">
  9877.         </div>
  9878.         `;
  9879.         const PopsPanelInput = {
  9880.           [Symbol.toStringTag]: "PopsPanelInput",
  9881.           $ele: {
  9882.             /**
  9883.              * @type {HTMLDivElement}
  9884.              */
  9885.             panelInput: liElement.querySelector(".pops-panel-input"),
  9886.             /**
  9887.              * @type {HTMLInputElement}
  9888.              */
  9889.             input: liElement.querySelector("input"),
  9890.             inputSpanIcon: document.createElement("span"),
  9891.             /**
  9892.              * @type {HTMLSpanElement}
  9893.              */
  9894.             inputSpanIconInner: null,
  9895.             /**
  9896.              * @type {HTMLElement}
  9897.              */
  9898.             icon: null,
  9899.           },
  9900.           $data: {
  9901.             value: formConfig.getValue(),
  9902.             isView: false,
  9903.           },
  9904.           init() {
  9905.             this.initEle();
  9906.             this.setInputValue(this.$data.value);
  9907.             /* 如果是密码框，放进图标 */
  9908.             if (formConfig.isPassword) {
  9909.               this.setCircleIcon(pops.config.iconSVG.view);
  9910.               this.setCircleIconClickEvent();
  9911.             } else {
  9912.               /* 先判断预设值是否为空，不为空添加清空图标按钮 */
  9913.               if (this.$ele.input.value != "") {
  9914.                 this.setCircleIcon(pops.config.iconSVG.circleClose);
  9915.                 this.setCircleIconClickEvent();
  9916.               }
  9917.             }
  9918.  
  9919.             this.setInputChangeEvent();
  9920.             if (formConfig.disabled) {
  9921.               this.disable();
  9922.             }
  9923.             if (typeof formConfig.handlerCallBack === "function") {
  9924.               formConfig.handlerCallBack(liElement, this.$ele.input);
  9925.             }
  9926.           },
  9927.           /**
  9928.            * 初始化$ele的配置
  9929.            */
  9930.           initEle() {
  9931.             this.$ele.input.parentElement.insertBefore(
  9932.               this.$ele.inputSpanIcon,
  9933.               this.$ele.input.nextSibling
  9934.             );
  9935.             this.$ele.inputSpanIcon.className = "pops-panel-input__suffix";
  9936.             this.$ele.inputSpanIcon.innerHTML = `
  9937.             <span class="pops-panel-input__suffix-inner">
  9938.               <i class="pops-panel-icon"></i>
  9939.             </span>
  9940.             `;
  9941.             this.$ele.inputSpanIconInner =
  9942.               this.$ele.inputSpanIcon.querySelector(
  9943.                 ".pops-panel-input__suffix-inner"
  9944.               );
  9945.             this.$ele.icon =
  9946.               this.$ele.inputSpanIcon.querySelector(".pops-panel-icon");
  9947.           },
  9948.           /**
  9949.            * 禁用
  9950.            */
  9951.           disable() {
  9952.             this.$ele.input.disabled = true;
  9953.             this.$ele.panelInput.classList.add("pops-input-disabled");
  9954.           },
  9955.           /**
  9956.            * 取消禁用
  9957.            */
  9958.           notDisable() {
  9959.             this.$ele.input.disabled = false;
  9960.             this.$ele.panelInput.classList.remove("pops-input-disabled");
  9961.           },
  9962.           /**
  9963.            * 判断是否已被禁用
  9964.            */
  9965.           isDisabled() {
  9966.             return this.$ele.input.disabled;
  9967.           },
  9968.           /**
  9969.            * 设置输入框内容
  9970.            * @param {string} [value=""] 值
  9971.            */
  9972.           setInputValue(value = "") {
  9973.             this.$ele.input.value = value;
  9974.           },
  9975.           /**
  9976.            * 设置input元素的type
  9977.            * @param {string} [typeValue="text"] type值
  9978.            */
  9979.           setInputType(typeValue = "text") {
  9980.             this.$ele.input.setAttribute("type", typeValue);
  9981.           },
  9982.           /**
  9983.            * 删除图标按钮
  9984.            */
  9985.           removeCircleIcon() {
  9986.             this.$ele.icon.innerHTML = "";
  9987.           },
  9988.           /**
  9989.            * 添加清空图标按钮
  9990.            * @param {string} [svgHTML=pops.config.iconSVG.circleClose] svg图标，默认为清空的图标
  9991.            */
  9992.           setCircleIcon(svgHTML = pops.config.iconSVG.circleClose) {
  9993.             this.$ele.icon.innerHTML = svgHTML;
  9994.           },
  9995.           /**
  9996.            * 添加图标按钮的点击事件
  9997.            */
  9998.           setCircleIconClickEvent() {
  9999.             PopsDOMUtils.on(this.$ele.icon, "click", void 0, () => {
  10000.               if (this.isDisabled()) {
  10001.                 return;
  10002.               }
  10003.               /* 删除图标 */
  10004.               this.removeCircleIcon();
  10005.               if (formConfig.isPassword) {
  10006.                 /* 密码输入框 */
  10007.                 if (this.$data.isView) {
  10008.                   /* 当前可见 => 点击改变为隐藏 */
  10009.                   this.$data.isView = false;
  10010.                   /* 显示输入框内容，且更换图标为隐藏图标 */
  10011.                   this.setInputType("text");
  10012.                   this.setCircleIcon(pops.config.iconSVG.hide);
  10013.                 } else {
  10014.                   /* 当前不可见 => 点击改变为显示 */
  10015.                   this.$data.isView = true;
  10016.                   /* 隐藏输入框内容，且更换图标为显示图标 */
  10017.                   this.setInputType("password");
  10018.                   this.setCircleIcon(pops.config.iconSVG.view);
  10019.                 }
  10020.               } else {
  10021.                 /* 普通输入框 */
  10022.                 /* 清空内容 */
  10023.                 this.setInputValue("");
  10024.                 /* 获取焦点 */
  10025.                 this.$ele.input.focus();
  10026.                 /* 触发内容改变事件 */
  10027.                 this.$ele.input.dispatchEvent(new Event("input"));
  10028.               }
  10029.             });
  10030.           },
  10031.           /**
  10032.            * 监听输入框内容改变
  10033.            */
  10034.           setInputChangeEvent() {
  10035.             PopsDOMUtils.on(
  10036.               this.$ele.input,
  10037.               ["input", "propertychange"],
  10038.               void 0,
  10039.               (event) => {
  10040.                 this.$data.value = this.$ele.input.value;
  10041.                 if (!formConfig.isPassword) {
  10042.                   /* 不是密码框 */
  10043.                   if (
  10044.                     this.$ele.input.value !== "" &&
  10045.                     this.$ele.icon.innerHTML === ""
  10046.                   ) {
  10047.                     /* 不为空，显示清空图标 */
  10048.                     this.setCircleIcon(pops.config.iconSVG.circleClose);
  10049.                     this.setCircleIconClickEvent();
  10050.                   } else if (this.$ele.input.value === "") {
  10051.                     this.removeCircleIcon();
  10052.                   }
  10053.                 }
  10054.                 if (typeof formConfig.callback === "function") {
  10055.                   if (formConfig.isNumber) {
  10056.                     formConfig.callback(
  10057.                       event,
  10058.                       this.$ele.input.value,
  10059.                       this.$ele.input.valueAsNumber
  10060.                     );
  10061.                   } else {
  10062.                     formConfig.callback(event, this.$ele.input.value);
  10063.                   }
  10064.                 }
  10065.               }
  10066.             );
  10067.           },
  10068.         };
  10069.         PopsPanelInput.init();
  10070.         liElement["data-input"] = PopsPanelInput;
  10071.         return liElement;
  10072.       },
  10073.       /**
  10074.        * 获取中间容器的元素<li>
  10075.        * type ==> textarea
  10076.        * @param {PopsPanelTextAreaDetails} formConfig
  10077.        * @returns
  10078.        */
  10079.       getSectionContainerItem_textarea(formConfig) {
  10080.         let liElement = document.createElement("li");
  10081.         liElement.__formConfig__ = formConfig;
  10082.         if (formConfig.className) {
  10083.           liElement.className = formConfig.className;
  10084.         }
  10085.         this.addElementAttributes(liElement, formConfig.attributes);
  10086.         this.setElementProps(liElement, formConfig.props);
  10087.  
  10088.         /* 左边底部的描述的文字 */
  10089.         let leftDescriptionText = "";
  10090.         if (Boolean(formConfig.description)) {
  10091.           leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  10092.         }
  10093.         liElement.innerHTML = `
  10094.         <div class="pops-panel-item-left-text">
  10095.           <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  10096.           ${leftDescriptionText}
  10097.         </div>
  10098.         <div class="pops-panel-textarea">
  10099.           <textarea placeholder="${formConfig.placeholder ?? ""}">
  10100.           </textarea>
  10101.         </div>
  10102.         `;
  10103.  
  10104.         const PopsPanelTextArea = {
  10105.           [Symbol.toStringTag]: "PopsPanelTextArea",
  10106.           $ele: {
  10107.             /**
  10108.              * @type {HTMLDivElement}
  10109.              */
  10110.             panelTextarea: liElement.querySelector(".pops-panel-textarea"),
  10111.             /**
  10112.              * @type {HTMLTextAreaElement}
  10113.              */
  10114.             textarea: liElement.querySelector(".pops-panel-textarea textarea"),
  10115.           },
  10116.           $data: {
  10117.             value: formConfig.getValue(),
  10118.           },
  10119.           init() {
  10120.             this.setValue(this.$data.value);
  10121.             this.setChangeEvent();
  10122.             if (formConfig.disabled) {
  10123.               this.disable();
  10124.             }
  10125.           },
  10126.           disable() {
  10127.             this.$ele.textarea.setAttribute("disabled", true);
  10128.             this.$ele.panelTextarea.classList.add(
  10129.               "pops-panel-textarea-disable"
  10130.             );
  10131.           },
  10132.           notDisable() {
  10133.             this.$ele.textarea.removeAttribute("disabled", true);
  10134.             this.$ele.panelTextarea.classList.remove(
  10135.               "pops-panel-textarea-disable"
  10136.             );
  10137.           },
  10138.           isDisabled() {
  10139.             return (
  10140.               this.$ele.textarea.hasAttribute("disabled") ||
  10141.               this.$ele.panelTextarea.classList.hasAttribute(
  10142.                 "pops-panel-textarea-disable"
  10143.               )
  10144.             );
  10145.           },
  10146.           setValue(value) {
  10147.             this.$ele.textarea.value = value;
  10148.           },
  10149.           /**
  10150.            * 监听选择内容改变
  10151.            */
  10152.           setChangeEvent() {
  10153.             PopsDOMUtils.on(
  10154.               this.$ele.textarea,
  10155.               ["input", "propertychange"],
  10156.               void 0,
  10157.               (event) => {
  10158.                 this.$data.value = event.target.value;
  10159.                 if (typeof formConfig.callback === "function") {
  10160.                   formConfig.callback(event, event.target.value);
  10161.                 }
  10162.               }
  10163.             );
  10164.           },
  10165.         };
  10166.  
  10167.         PopsPanelTextArea.init();
  10168.         liElement["data-textarea"] = PopsPanelTextArea;
  10169.  
  10170.         return liElement;
  10171.       },
  10172.       /**
  10173.        * 获取中间容器的元素<li>
  10174.        * type ==> select
  10175.        * @param {PopsPanelSelectDetails} formConfig
  10176.        * @returns
  10177.        */
  10178.       getSectionContainerItem_select(formConfig) {
  10179.         let liElement = document.createElement("li");
  10180.         liElement.__formConfig__ = formConfig;
  10181.         if (formConfig.className) {
  10182.           liElement.className = formConfig.className;
  10183.         }
  10184.         this.addElementAttributes(liElement, formConfig.attributes);
  10185.         this.setElementProps(liElement, formConfig.props);
  10186.         /* 左边底部的描述的文字 */
  10187.         let leftDescriptionText = "";
  10188.         if (Boolean(formConfig.description)) {
  10189.           leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  10190.         }
  10191.         liElement.innerHTML = `
  10192.         <div class="pops-panel-item-left-text">
  10193.           <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  10194.           ${leftDescriptionText}
  10195.         </div>
  10196.         <div class="pops-panel-select">
  10197.           <select>
  10198.  
  10199.           </select>
  10200.         </div>
  10201.         `;
  10202.  
  10203.         const PopsPanelSelect = {
  10204.           [Symbol.toStringTag]: "PopsPanelSelect",
  10205.           $ele: {
  10206.             /**
  10207.              * @type {HTMLDivElement}
  10208.              */
  10209.             panelSelect: liElement.querySelector(".pops-panel-select"),
  10210.             /**
  10211.              * @type {HTMLSelectElement}
  10212.              */
  10213.             select: liElement.querySelector(".pops-panel-select select"),
  10214.           },
  10215.           $data: {
  10216.             defaultValue: formConfig.getValue(),
  10217.           },
  10218.           init() {
  10219.             this.initOption();
  10220.             this.setChangeEvent();
  10221.             this.setClickEvent();
  10222.             if (formConfig.disabled) {
  10223.               this.disable();
  10224.             }
  10225.           },
  10226.           disable() {
  10227.             this.$ele.select.setAttribute("disabled", true);
  10228.             this.$ele.panelSelect.classList.add("pops-panel-select-disable");
  10229.           },
  10230.           notDisable() {
  10231.             this.$ele.select.removeAttribute("disabled", true);
  10232.             this.$ele.panelSelect.classList.remove("pops-panel-select-disable");
  10233.           },
  10234.           isDisabled() {
  10235.             return (
  10236.               this.$ele.select.hasAttribute("disabled") ||
  10237.               this.$ele.panelSelect.classList.hasAttribute(
  10238.                 "pops-panel-select-disable"
  10239.               )
  10240.             );
  10241.           },
  10242.           initOption() {
  10243.             formConfig.data.forEach((dataItem) => {
  10244.               let optionElement = document.createElement("option");
  10245.               optionElement.__value__ = dataItem.value;
  10246.               optionElement.__disable__ = dataItem.disable;
  10247.               if (dataItem.value === this.$data.defaultValue) {
  10248.                 optionElement.setAttribute("selected", true);
  10249.               }
  10250.               optionElement.innerText = dataItem.text;
  10251.               this.$ele.select.appendChild(optionElement);
  10252.             });
  10253.           },
  10254.           setSelectOptionsDisableStatus() {
  10255.             if (this.$ele.select.options && this.$ele.select.options.length) {
  10256.               Array.from(this.$ele.select.options).forEach((optionItem) => {
  10257.                 this.setOptionDisableStatus(optionItem);
  10258.               });
  10259.             }
  10260.           },
  10261.           setOptionDisableStatus(optionElement) {
  10262.             if (typeof optionElement.__disable__ === "function") {
  10263.               let disableStatus = optionElement.__disable__(
  10264.                 optionElement.__value__
  10265.               );
  10266.               if (disableStatus) {
  10267.                 optionElement.setAttribute("disabled", true);
  10268.               } else {
  10269.                 optionElement.removeAttribute("disabled");
  10270.               }
  10271.             }
  10272.           },
  10273.           /**
  10274.            * 监听选择内容改变
  10275.            */
  10276.           setChangeEvent() {
  10277.             PopsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
  10278.               this.setSelectOptionsDisableStatus();
  10279.               if (typeof formConfig.callback === "function") {
  10280.                 /**
  10281.                  * @type {HTMLOptionElement}
  10282.                  */
  10283.                 let isSelectedElement =
  10284.                   event.target[event.target.selectedIndex];
  10285.                 let isSelectedValue = isSelectedElement.__value__;
  10286.                 let isSelectedText =
  10287.                   isSelectedElement.innerText || isSelectedElement.textContent;
  10288.                 formConfig.callback(event, isSelectedValue, isSelectedText);
  10289.               }
  10290.             });
  10291.           },
  10292.           /**
  10293.            * 监听点击事件
  10294.            */
  10295.           setClickEvent() {
  10296.             PopsDOMUtils.on(this.$ele.select, "click", void 0, (event) => {
  10297.               this.setSelectOptionsDisableStatus();
  10298.               if (typeof formConfig.clickCallBack === "function") {
  10299.                 formConfig.clickCallBack(event, this.$ele.select);
  10300.               }
  10301.             });
  10302.           },
  10303.         };
  10304.  
  10305.         PopsPanelSelect.init();
  10306.         liElement["data-select"] = PopsPanelSelect;
  10307.         return liElement;
  10308.       },
  10309.       /**
  10310.        * 获取中间容器的元素<li>
  10311.        * type ==> button
  10312.        * @param {PopsPanelButtonDetails} formConfig
  10313.        * @returns
  10314.        */
  10315.       getSectionContainerItem_button(formConfig) {
  10316.         let liElement = document.createElement("li");
  10317.         liElement.__formConfig__ = formConfig;
  10318.         if (formConfig.className) {
  10319.           liElement.className = formConfig.className;
  10320.         }
  10321.         this.addElementAttributes(liElement, formConfig.attributes);
  10322.         this.setElementProps(liElement, formConfig.props);
  10323.  
  10324.         /* 左边底部的描述的文字 */
  10325.         let leftDescriptionText = "";
  10326.         if (Boolean(formConfig.description)) {
  10327.           leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  10328.         }
  10329.         liElement.innerHTML = `
  10330.         <div class="pops-panel-item-left-text">
  10331.           <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  10332.           ${leftDescriptionText}
  10333.         </div>
  10334.         <div class="pops-panel-button">
  10335.           <button class="pops-panel-button_inner">
  10336.             <i class="pops-bottom-icon"></i>
  10337.             <span class="pops-panel-button-text"></span>
  10338.           </button>
  10339.         </div>
  10340.         `;
  10341.  
  10342.         const PopsPanelButton = {
  10343.           [Symbol.toStringTag]: "PopsPanelButton",
  10344.           $ele: {
  10345.             panelButton: liElement.querySelector(".pops-panel-button"),
  10346.             button: liElement.querySelector(
  10347.               ".pops-panel-button .pops-panel-button_inner"
  10348.             ),
  10349.             icon: liElement.querySelector(
  10350.               ".pops-panel-button .pops-bottom-icon"
  10351.             ),
  10352.             spanText: liElement.querySelector(
  10353.               ".pops-panel-button .pops-panel-button-text"
  10354.             ),
  10355.           },
  10356.           $data: {},
  10357.           init() {
  10358.             this.$ele.panelButton.appendChild(this.$ele.button);
  10359.             this.initButton();
  10360.             this.setClickEvent();
  10361.           },
  10362.           initButton() {
  10363.             if (
  10364.               typeof formConfig.buttonIcon === "string" &&
  10365.               formConfig.buttonIcon.trim() !== ""
  10366.             ) {
  10367.               /* 存在icon图标且不为空 */
  10368.               if (formConfig.buttonIcon in pops.config.iconSVG) {
  10369.                 this.setIconSVG(pops.config.iconSVG[formConfig.buttonIcon]);
  10370.               } else {
  10371.                 this.setIconSVG(formConfig.buttonIcon);
  10372.               }
  10373.               this.showIcon();
  10374.             } else {
  10375.               this.hideIcon();
  10376.             }
  10377.             /* 按钮文字 */
  10378.             let buttonText = formConfig.buttonText;
  10379.             if (typeof formConfig.buttonText === "function") {
  10380.               buttonText = formConfig.buttonText();
  10381.             }
  10382.             this.setButtonType(formConfig.buttonType);
  10383.             if (formConfig.buttonIsRightIcon) {
  10384.               this.setIconRight();
  10385.             } else {
  10386.               this.setIconLeft();
  10387.             }
  10388.             if (formConfig.disable) {
  10389.               this.disable();
  10390.             }
  10391.             this.setButtonText(buttonText);
  10392.             this.setIconLoadingStatus(formConfig.buttonIconIsLoading);
  10393.           },
  10394.           disable() {
  10395.             this.$ele.button.setAttribute("disabled", "true");
  10396.           },
  10397.           notDisable() {
  10398.             this.$ele.button.removeAttribute("disabled");
  10399.           },
  10400.           /**
  10401.            * 隐藏icon图标
  10402.            */
  10403.           hideIcon() {
  10404.             this.$ele.panelButton.classList.add("pops-panel-button-no-icon");
  10405.           },
  10406.           /**
  10407.            * 显示icon图标
  10408.            */
  10409.           showIcon() {
  10410.             this.$ele.panelButton.classList.remove("pops-panel-button-no-icon");
  10411.           },
  10412.           /**
  10413.            * 设置icon图标的svg
  10414.            */
  10415.           setIconSVG(svgHTML) {
  10416.             this.$ele.icon.innerHTML = svgHTML;
  10417.           },
  10418.           /**
  10419.            * 设置icon图标是否旋转
  10420.            * @param {boolean} status
  10421.            */
  10422.           setIconLoadingStatus(status) {
  10423.             this.$ele.icon.setAttribute("is-loading", Boolean(status));
  10424.           },
  10425.           /**
  10426.            * 设置属性上是否存在icon图标
  10427.            */
  10428.           setHasIcon(value) {
  10429.             this.$ele.button.setAttribute("data-icon", Boolean(value));
  10430.           },
  10431.           /**
  10432.            * 设置按钮类型
  10433.            * @param {string} typeValue
  10434.            */
  10435.           setButtonType(typeValue) {
  10436.             this.$ele.button.setAttribute("type", typeValue);
  10437.           },
  10438.           /**
  10439.            * 添加按钮的图标在右边
  10440.            */
  10441.           setIconRight() {
  10442.             this.$ele.button.classList.add("pops-panel-button-right-icon");
  10443.           },
  10444.           /**
  10445.            * （默认）添加按钮的图标在左边
  10446.            */
  10447.           setIconLeft() {
  10448.             this.$ele.button.classList.remove("pops-panel-button-right-icon");
  10449.           },
  10450.           /**
  10451.            * 设置按钮文本
  10452.            * @param {string} text
  10453.            */
  10454.           setButtonText(text) {
  10455.             this.$ele.spanText.innerHTML = text;
  10456.           },
  10457.           setClickEvent() {
  10458.             PopsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
  10459.               if (typeof formConfig.callback === "function") {
  10460.                 formConfig.callback(event);
  10461.               }
  10462.             });
  10463.           },
  10464.         };
  10465.         PopsPanelButton.init();
  10466.         liElement["data-button"] = PopsPanelButton;
  10467.         return liElement;
  10468.       },
  10469.       /**
  10470.        * 获取中间容器的元素<li>
  10471.        * type ===> own
  10472.        * @param {PopsPanelOwnDetails} formConfig
  10473.        * @returns
  10474.        */
  10475.       getSectionContainerItem_own(formConfig) {
  10476.         let liElement = document.createElement("li");
  10477.         liElement.__formConfig__ = formConfig;
  10478.         if (formConfig.className) {
  10479.           liElement.className = formConfig.className;
  10480.         }
  10481.         liElement = formConfig.getLiElementCallBack(liElement);
  10482.         return liElement;
  10483.       },
  10484.       /**
  10485.        * 获取中间容器的元素<li>
  10486.        * @param {PopsPanelFormsTotalDetails} formConfig
  10487.        * @returns
  10488.        */
  10489.       getSectionContainerItem(formConfig) {
  10490.         if (formConfig["type"] === "switch") {
  10491.           return this.getSectionContainerItem_switch(formConfig);
  10492.         } else if (formConfig["type"] === "slider") {
  10493.           return this.getSectionContainerItem_slider_new(formConfig);
  10494.         } else if (formConfig["type"] === "input") {
  10495.           return this.getSectionContainerItem_input(formConfig);
  10496.         } else if (formConfig["type"] === "textarea") {
  10497.           return this.getSectionContainerItem_textarea(formConfig);
  10498.         } else if (formConfig["type"] === "select") {
  10499.           return this.getSectionContainerItem_select(formConfig);
  10500.         } else if (formConfig["type"] === "button") {
  10501.           return this.getSectionContainerItem_button(formConfig);
  10502.         } else if (formConfig["type"] === "own") {
  10503.           return this.getSectionContainerItem_own(formConfig);
  10504.         } else {
  10505.           console.error("尚未实现的type类型", formConfig);
  10506.         }
  10507.       },
  10508.  
  10509.       /**
  10510.        * 为左侧容器元素添加点击事件
  10511.        * @param {HTMLElement} asideLiElement 左侧的容器<li>元素
  10512.        * @param {PopsPanelContentConfig} asideConfig 配置
  10513.        */
  10514.       setAsideItemClickEvent(asideLiElement, asideConfig) {
  10515.         let that = this;
  10516.         /**
  10517.          *
  10518.          * @param {PopsPanelFormsTotalDetails} formConfig
  10519.          * @param {PopsPanelRightAsideContainerOptions} containerOptions
  10520.          */
  10521.         function uListContainerAddItem(formConfig, containerOptions) {
  10522.           let itemLiElement = that.getSectionContainerItem(formConfig);
  10523.           if (itemLiElement) {
  10524.             containerOptions["ulElement"].appendChild(itemLiElement);
  10525.           }
  10526.           if (typeof formConfig.afterAddToUListCallBack === "function") {
  10527.             formConfig.afterAddToUListCallBack(formConfig, containerOptions);
  10528.           }
  10529.         }
  10530.         PopsDOMUtils.on(asideLiElement, "click", void 0, function (event) {
  10531.           that.clearContainer();
  10532.           that.clearAsideItemIsVisited();
  10533.           that.setAsideItemIsVisited(asideLiElement);
  10534.           /* 顶部标题栏，存在就设置 */
  10535.           let headerTitleText = asideConfig.headerTitle || asideConfig.title;
  10536.           if (
  10537.             typeof headerTitleText === "string" &&
  10538.             headerTitleText.trim() !== ""
  10539.           ) {
  10540.             let containerHeaderTitleLIElement = document.createElement("li");
  10541.             containerHeaderTitleLIElement.__asideConfig__ = asideConfig;
  10542.             containerHeaderTitleLIElement.innerHTML = headerTitleText;
  10543.             that.sectionContainerHeaderULElement.appendChild(
  10544.               containerHeaderTitleLIElement
  10545.             );
  10546.           }
  10547.  
  10548.           /**
  10549.            * @type {PopsPanelFormsDetailsArray}
  10550.            */
  10551.           let __forms__ = asideLiElement.__forms__;
  10552.           __forms__.forEach((formConfig) => {
  10553.             if (formConfig["type"] === "forms") {
  10554.               /**
  10555.                * @type {PopsPanelFormsDetailsArray}
  10556.                */
  10557.               let childForms = formConfig["forms"];
  10558.               /* 父<li>元素 */
  10559.               let formContainerListElement = document.createElement("li");
  10560.               /* 子<ul>元素 */
  10561.               let formContainerULElement = document.createElement("ul");
  10562.               formContainerListElement.className =
  10563.                 "pops-panel-forms-container-item";
  10564.               /* 区域头部的文字 */
  10565.               let formHeaderDivElement = PopsDOMUtils.createElement("div", {
  10566.                 className: "pops-panel-forms-container-item-header-text",
  10567.               });
  10568.               formHeaderDivElement.innerHTML = formConfig["text"];
  10569.               /* 加进容器内 */
  10570.               formContainerListElement.appendChild(formHeaderDivElement);
  10571.               if (formConfig.className) {
  10572.                 PopsDOMUtils.addClassName(
  10573.                   formContainerListElement,
  10574.                   formConfig.className
  10575.                 );
  10576.               }
  10577.               that.addElementAttributes(
  10578.                 formContainerListElement,
  10579.                 formConfig.attributes
  10580.               );
  10581.               that.setElementProps(formContainerListElement, formConfig.props);
  10582.               childForms.forEach((childFormConfig) => {
  10583.                 uListContainerAddItem(childFormConfig, {
  10584.                   ulElement: formContainerULElement,
  10585.                   sectionContainerULElement: that.sectionContainerULElement,
  10586.                   formContainerListElement: formContainerListElement,
  10587.                   formHeaderDivElement: formHeaderDivElement,
  10588.                 });
  10589.               });
  10590.               formContainerListElement.appendChild(formContainerULElement);
  10591.               that.sectionContainerULElement.appendChild(
  10592.                 formContainerListElement
  10593.               );
  10594.             } else {
  10595.               /* 如果成功创建，加入到中间容器中 */
  10596.               uListContainerAddItem(formConfig, {
  10597.                 ulElement: that.sectionContainerULElement,
  10598.               });
  10599.             }
  10600.           });
  10601.  
  10602.           let autoAdaptionContentHeight =
  10603.             asideConfig.autoAdaptionContentHeight ?? true;
  10604.           if (autoAdaptionContentHeight) {
  10605.             /* 根据标题的高度来自适应内容高度，默认开启 */
  10606.             /* 中间容器的偏移量，看设置的section.pops-panel-container的padding，默认0 */
  10607.             let contentContainerOffset =
  10608.               asideConfig.contentContainerOffset ?? 0;
  10609.             /* 获取标题的<ul>元素的高度 */
  10610.             let sectionContainerHeaderULElementHeight = PopsDOMUtils.height(
  10611.               that.sectionContainerHeaderULElement
  10612.             );
  10613.             that.sectionContainerULElement.style.setProperty(
  10614.               "height",
  10615.               `calc( 100% - ${
  10616.                 sectionContainerHeaderULElementHeight + contentContainerOffset
  10617.               }px )`
  10618.             );
  10619.           }
  10620.  
  10621.           if (typeof asideConfig.callback === "function") {
  10622.             /* 执行回调 */
  10623.             asideConfig.callback(
  10624.               event,
  10625.               that.sectionContainerHeaderULElement,
  10626.               that.sectionContainerULElement
  10627.             );
  10628.           }
  10629.         });
  10630.       },
  10631.     };
  10632.  
  10633.     HandleContetDetails.init();
  10634.  
  10635.     PopsHandler.handlePush(PopsType, {
  10636.       guid: guid,
  10637.       animElement: animElement,
  10638.       popsElement: popsElement,
  10639.       maskElement: maskElement,
  10640.       $shadowContainer: $shadowContainer,
  10641.       $shadowRoot: $shadowRoot,
  10642.     });
  10643.     /* 拖拽 */
  10644.     if (config.drag) {
  10645.       PopsUtils.drag(popsElement, {
  10646.         dragElement: titleElement,
  10647.         limit: config.dragLimit,
  10648.         extraDistance: config.dragExtraDistance,
  10649.         moveCallBack: config.dragMoveCallBack,
  10650.         endCallBack: config.dragEndCallBack,
  10651.       });
  10652.     }
  10653.     return PopsHandler.handleResultDetails(eventDetails);
  10654.   };
  10655.  
  10656.   /**
  10657.    * 右键菜单
  10658.    * @param { PopsRightClickMenuDetails } details 配置
  10659.    */
  10660.   pops.rightClickMenu = function (details = {}) {
  10661.     let that = this;
  10662.     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  10663.     PopsHandler.handleInit($shadowRoot, [
  10664.       pops.config.cssText.index,
  10665.       pops.config.cssText.anim,
  10666.       pops.config.cssText.common,
  10667.     ]);
  10668.     /**
  10669.      * @type {PopsRightClickMenuDetails}
  10670.      */
  10671.     let config = {
  10672.       target: document.documentElement,
  10673.       targetSelector: void 0,
  10674.       data: [
  10675.         {
  10676.           icon: pops.config.iconSVG.search,
  10677.           iconIsLoading: false,
  10678.           text: "搜索",
  10679.           callback(clickEvent, contextMenuEvent, liElement) {
  10680.             console.log("点击：" + this.text, [
  10681.               clickEvent,
  10682.               contextMenuEvent,
  10683.               liElement,
  10684.             ]);
  10685.           },
  10686.         },
  10687.         {
  10688.           icon: pops.config.iconSVG.documentCopy,
  10689.           iconIsLoading: false,
  10690.           text: "复制",
  10691.           callback(clickEvent, contextMenuEvent, liElement) {
  10692.             console.log("点击：" + this.text, [
  10693.               clickEvent,
  10694.               contextMenuEvent,
  10695.               liElement,
  10696.             ]);
  10697.           },
  10698.         },
  10699.         {
  10700.           icon: pops.config.iconSVG.delete,
  10701.           text: "删除",
  10702.           iconIsLoading: false,
  10703.           callback(clickEvent, contextMenuEvent, liElement) {
  10704.             console.log("点击：" + this.text, [
  10705.               clickEvent,
  10706.               contextMenuEvent,
  10707.               liElement,
  10708.             ]);
  10709.           },
  10710.         },
  10711.         {
  10712.           icon: pops.config.iconSVG.loading,
  10713.           iconIsLoading: true,
  10714.           text: "加载",
  10715.           callback(clickEvent, contextMenuEvent, liElement) {
  10716.             console.log("点击：" + this.text, [
  10717.               clickEvent,
  10718.               contextMenuEvent,
  10719.               liElement,
  10720.             ]);
  10721.             return false;
  10722.           },
  10723.         },
  10724.         {
  10725.           icon: pops.config.iconSVG.elemePlus,
  10726.           iconIsLoading: true,
  10727.           text: "饿了么",
  10728.           callback(clickEvent, contextMenuEvent, liElement) {
  10729.             console.log("点击：" + this.text, [
  10730.               clickEvent,
  10731.               contextMenuEvent,
  10732.               liElement,
  10733.             ]);
  10734.             return false;
  10735.           },
  10736.           item: [
  10737.             {
  10738.               icon: "",
  10739.               iconIsLoading: false,
  10740.               text: "处理文件",
  10741.               callback(clickEvent, contextMenuEvent, liElement) {
  10742.                 console.log("点击：" + this.text, [
  10743.                   clickEvent,
  10744.                   contextMenuEvent,
  10745.                   liElement,
  10746.                 ]);
  10747.               },
  10748.             },
  10749.             {
  10750.               icon: "",
  10751.               iconIsLoading: false,
  10752.               text: "其它处理",
  10753.               callback(clickEvent, contextMenuEvent, liElement) {
  10754.                 console.log("点击：" + this.text, [
  10755.                   clickEvent,
  10756.                   contextMenuEvent,
  10757.                   liElement,
  10758.                 ]);
  10759.               },
  10760.               item: [
  10761.                 {
  10762.                   icon: pops.config.iconSVG.view,
  10763.                   iconIsLoading: false,
  10764.                   text: "查看",
  10765.                   callback(clickEvent, contextMenuEvent, liElement) {
  10766.                     console.log("点击：" + this.text, [
  10767.                       clickEvent,
  10768.                       contextMenuEvent,
  10769.                       liElement,
  10770.                     ]);
  10771.                   },
  10772.                 },
  10773.               ],
  10774.             },
  10775.           ],
  10776.         },
  10777.       ],
  10778.       className: "",
  10779.       isAnimation: true,
  10780.       only: false,
  10781.       zIndex: 10000,
  10782.       preventDefault: true,
  10783.       style: void 0,
  10784.       beforeAppendToPageCallBack() {},
  10785.     };
  10786.     config = PopsUtils.assignJSON(config, details);
  10787.     if (config.target == null) {
  10788.       throw "config.target 不能为空";
  10789.     }
  10790.     if (details.data) {
  10791.       config.data = details.data;
  10792.     }
  10793.     let guid = PopsUtils.getRandomGUID();
  10794.     const PopsType = "rightClickMenu";
  10795.     config = PopsHandler.handleOnly(PopsType, config);
  10796.  
  10797.     if (config.style != null) {
  10798.       let cssNode = document.createElement("style");
  10799.       cssNode.setAttribute("type", "text/css");
  10800.       cssNode.innerHTML = config.style;
  10801.       $shadowRoot.appendChild(cssNode);
  10802.     }
  10803.  
  10804.     const PopsContextMenu = {
  10805.       /**
  10806.        * 根元素
  10807.        * @type {?HTMLElement}
  10808.        */
  10809.       rootElement: null,
  10810.       /**
  10811.        * 全局点击检测
  10812.        * @param {TouchEvent|PointerEvent} event
  10813.        */
  10814.       windowCheckClickEvent(event) {
  10815.         if (!PopsContextMenu.rootElement) {
  10816.           return;
  10817.         }
  10818.         if (event.target.closest(`.pops-${PopsType}`)) {
  10819.           return;
  10820.         }
  10821.         if (
  10822.           event.target.className &&
  10823.           event.target.className === "pops-shadow-container" &&
  10824.           event.target.shadowRoot != null
  10825.         ) {
  10826.           return;
  10827.         }
  10828.         PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
  10829.       },
  10830.       /**
  10831.        * target为shadowRoot或shadowRoot内的全局点击检测
  10832.        * @param {TouchEvent|PointerEvent} event
  10833.        */
  10834.       shadowRootCheckClickEvent(event) {
  10835.         if (!PopsContextMenu.rootElement) {
  10836.           return;
  10837.         }
  10838.         if (event.target.closest(`.pops-${PopsType}`)) {
  10839.           return;
  10840.         }
  10841.         PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
  10842.       },
  10843.       /**
  10844.        * 添加全局点击检测事件
  10845.        */
  10846.       addWindowCheckClickListener() {
  10847.         PopsDOMUtils.on(
  10848.           globalThis,
  10849.           "click touchstart",
  10850.           void 0,
  10851.           PopsContextMenu.windowCheckClickEvent,
  10852.           {
  10853.             capture: true,
  10854.           }
  10855.         );
  10856.         const $shadowRoot = config.target.getRootNode();
  10857.         if ($shadowRoot instanceof ShadowRoot) {
  10858.           PopsDOMUtils.on(
  10859.             $shadowRoot,
  10860.             "click touchstart",
  10861.             void 0,
  10862.             PopsContextMenu.shadowRootCheckClickEvent,
  10863.             {
  10864.               capture: true,
  10865.             }
  10866.           );
  10867.         }
  10868.       },
  10869.       /**
  10870.        * 移除全局点击检测事件
  10871.        */
  10872.       removeWindowCheckClickListener() {
  10873.         PopsDOMUtils.off(
  10874.           globalThis,
  10875.           "click touchstart",
  10876.           void 0,
  10877.           PopsContextMenu.windowCheckClickEvent,
  10878.           {
  10879.             capture: true,
  10880.           }
  10881.         );
  10882.         const $shadowRoot = config.target.getRootNode();
  10883.         if ($shadowRoot instanceof ShadowRoot) {
  10884.           PopsDOMUtils.off(
  10885.             $shadowRoot,
  10886.             "click touchstart",
  10887.             void 0,
  10888.             PopsContextMenu.windowCheckClickEvent,
  10889.             {
  10890.               capture: true,
  10891.             }
  10892.           );
  10893.         }
  10894.       },
  10895.       /**
  10896.        * contextmenu事件
  10897.        * @param {PointerEvent} event
  10898.        */
  10899.       contextMenuEvent(event) {
  10900.         if (config.preventDefault) {
  10901.           PopsUtils.preventEvent(event);
  10902.         }
  10903.         if (PopsContextMenu.rootElement) {
  10904.           PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
  10905.         }
  10906.         PopsContextMenu.rootElement = PopsContextMenu.showMenu(
  10907.           event,
  10908.           config.data
  10909.         );
  10910.       },
  10911.       /**
  10912.        * 添加contextmenu事件
  10913.        * @param {HTMLElement|globalThis|Window} target 目标
  10914.        * @param {?string} selector 子元素选择器
  10915.        */
  10916.       addContextMenuEvent(target, selector) {
  10917.         PopsDOMUtils.on(
  10918.           target,
  10919.           "contextmenu",
  10920.           selector,
  10921.           PopsContextMenu.contextMenuEvent
  10922.         );
  10923.       },
  10924.       /**
  10925.        * 移除contextmenu事件
  10926.        * @param {HTMLElement|globalThis|Window} target 目标
  10927.        * @param {?string} selector 子元素选择器
  10928.        */
  10929.       removeContextMenuEvent(target) {
  10930.         PopsDOMUtils.off(
  10931.           target,
  10932.           "contextmenu",
  10933.           string,
  10934.           PopsContextMenu.contextMenuEvent
  10935.         );
  10936.       },
  10937.       /**
  10938.        * 自动判断是否存在动画，存在动画就执行关闭动画并删除
  10939.        * @param {HTMLElement} element
  10940.        */
  10941.       animationCloseMenu(element) {
  10942.         /**
  10943.          * 动画结束触发的事件
  10944.          */
  10945.         function transitionEndEvent(event) {
  10946.           PopsDOMUtils.off(
  10947.             element,
  10948.             PopsDOMUtils.getTransitionEndNameList(),
  10949.             void 0,
  10950.             transitionEndEvent,
  10951.             {
  10952.               capture: true,
  10953.             }
  10954.           );
  10955.           element.remove();
  10956.         }
  10957.         if (element.classList.contains(`pops-${PopsType}-anim-show`)) {
  10958.           /* 有动画 */
  10959.           PopsDOMUtils.on(
  10960.             element,
  10961.             PopsDOMUtils.getTransitionEndNameList(),
  10962.             void 0,
  10963.             transitionEndEvent,
  10964.             {
  10965.               capture: true,
  10966.             }
  10967.           );
  10968.           element.classList.remove(`pops-${PopsType}-anim-show`);
  10969.         } else {
  10970.           /* 无动画 */
  10971.           element.remove();
  10972.         }
  10973.       },
  10974.       /**
  10975.        * 关闭所有菜单
  10976.        * @param {HTMLElement} rootElement
  10977.        */
  10978.       closeAllMenu(rootElement) {
  10979.         if (rootElement?.__menuData__?.root) {
  10980.           rootElement = rootElement?.__menuData__?.root;
  10981.         }
  10982.         /**
  10983.          * @type {HTMLElement[]}
  10984.          */
  10985.         let childMenuList = rootElement.__menuData__.child;
  10986.         childMenuList.forEach((childMenuElement) => {
  10987.           this.animationCloseMenu(childMenuElement);
  10988.         });
  10989.         this.animationCloseMenu(rootElement);
  10990.         PopsContextMenu.rootElement = null;
  10991.       },
  10992.       /**
  10993.        * 获取菜单容器
  10994.        * @param {number} zIndex z-index值
  10995.        * @param {boolean} isChildren 是否是rightClickMenu的某一项的子菜单
  10996.        */
  10997.       getMenuContainerElement(zIndex, isChildren) {
  10998.         let menuElement = PopsUtils.parseTextToDOM(`
  10999.         <div class="pops-${PopsType}" ${isChildren ? 'is-children="true"' : ""}>
  11000.           <style type="text/css" data-from="pops-${PopsType}">
  11001.           .pops-${PopsType} *{
  11002.             -webkit-box-sizing: border-box;
  11003.             box-sizing: border-box;
  11004.             margin: 0;
  11005.             padding: 0;
  11006.             -webkit-tap-highlight-color: transparent;
  11007.             scrollbar-width: thin;
  11008.           }
  11009.           .pops-${PopsType}{
  11010.             position: fixed;
  11011.             z-index: ${zIndex};
  11012.             text-align: center;
  11013.             border-radius: 3px;
  11014.             font-size: 16px;
  11015.             font-weight: 500;
  11016.             background: #fff;
  11017.             box-shadow: 0px 1px 6px 1px #cacaca;
  11018.           }
  11019.           .pops-${PopsType}-anim-grid{
  11020.             display: grid;
  11021.             transition: 0.3s;
  11022.             grid-template-rows: 0fr;
  11023.           }
  11024.           .pops-${PopsType}-anim-show{
  11025.             grid-template-rows: 1fr;
  11026.           }
  11027.           .pops-${PopsType}-is-visited{
  11028.             background: #dfdfdf;
  11029.           }
  11030.           i.pops-${PopsType}-icon {
  11031.             height: 1em;
  11032.             width: 1em;
  11033.             line-height: 1em;
  11034.             display: inline-flex;
  11035.             justify-content: center;
  11036.             align-items: center;
  11037.             position: relative;
  11038.             fill: currentColor;
  11039.             color: inherit;
  11040.             font-size: inherit;
  11041.             margin-right: 6px;
  11042.           }
  11043.           i.pops-${PopsType}-icon[is-loading="true"]{
  11044.             animation: rotating 2s linear infinite;
  11045.           }
  11046.           .pops-${PopsType} li:hover{background:#dfdfdf;cursor:pointer}
  11047.           .pops-${PopsType} ul{
  11048.             margin: 0;
  11049.             padding: 0;
  11050.             display: flex;
  11051.             flex-direction: column;
  11052.             align-items: flex-start;
  11053.             justify-content: center;
  11054.             overflow: hidden;
  11055.           }
  11056.           .pops-${PopsType} ul li {
  11057.             padding: 5px 10px;
  11058.             margin: 2.5px 5px;
  11059.             border-radius: 3px;
  11060.             display: flex;
  11061.             width: -webkit-fill-available;
  11062.             width: -moz-available;
  11063.             text-align: left;
  11064.             user-select: none;
  11065.             -webkit-user-select: none;
  11066.             -moz-user-select: none;
  11067.             -ms-user-select: none;
  11068.             align-items: center;
  11069.           }
  11070.           .pops-${PopsType} ul li:first-child{
  11071.             margin-top: 5px;
  11072.           }
  11073.           .pops-${PopsType} ul li:last-child{
  11074.             margin-bottom: 5px;
  11075.           }
  11076.           </style>
  11077.           <ul></ul>
  11078.         </div>
  11079.         `);
  11080.         /* 添加动画 */
  11081.         if (config.isAnimation) {
  11082.           PopsDOMUtils.addClassName(menuElement, `pops-${PopsType}-anim-grid`);
  11083.         }
  11084.         return menuElement;
  11085.       },
  11086.       /**
  11087.        * 获取left、top偏移
  11088.        * @param {HTMLElement} menuElement 菜单元素
  11089.        * @param {number} x
  11090.        * @param {number} y
  11091.        */
  11092.       getOffset(menuElement, x, y) {
  11093.         /* left最大偏移 */
  11094.         let maxLeftOffset =
  11095.           PopsDOMUtils.width(globalThis) - PopsDOMUtils.width(menuElement) - 1;
  11096.         /* top最大偏移 */
  11097.         let maxTopOffset =
  11098.           PopsDOMUtils.height(globalThis) -
  11099.           PopsDOMUtils.height(menuElement) -
  11100.           8;
  11101.  
  11102.         let currentLeftOffset = x;
  11103.         let currentTopOffset = y;
  11104.         /* 不允许超出left最大值 */
  11105.         currentLeftOffset = currentLeftOffset < 0 ? 0 : currentLeftOffset;
  11106.         currentLeftOffset =
  11107.           currentLeftOffset < maxLeftOffset ? currentLeftOffset : maxLeftOffset;
  11108.         /* 不允许超出top最大值 */
  11109.         currentTopOffset = currentTopOffset < 0 ? 0 : currentTopOffset;
  11110.         currentTopOffset =
  11111.           currentTopOffset < maxTopOffset ? currentTopOffset : maxTopOffset;
  11112.         return {
  11113.           left: currentLeftOffset,
  11114.           top: currentTopOffset,
  11115.         };
  11116.       },
  11117.       /**
  11118.        * 显示菜单
  11119.        * @param {PointerEvent} menuEvent 触发的事件
  11120.        * @param {PopsRightClickMenuDataDetails[]} _config_
  11121.        */
  11122.       showMenu(menuEvent, _config_) {
  11123.         let menuElement = this.getMenuContainerElement(config.zIndex, false);
  11124.         menuElement.__menuData__ = {
  11125.           child: [],
  11126.         };
  11127.         PopsContextMenu.addMenuLiELement(
  11128.           menuEvent,
  11129.           menuElement,
  11130.           menuElement,
  11131.           _config_
  11132.         );
  11133.         /* 先隐藏 */
  11134.         PopsDOMUtils.css(menuElement, {
  11135.           display: "none",
  11136.         });
  11137.         PopsUtils.appendChild($shadowRoot, menuElement);
  11138.         /* 添加到页面 */
  11139.         if (!document.contains($shadowContainer)) {
  11140.           if (typeof config.beforeAppendToPageCallBack === "function") {
  11141.             config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  11142.           }
  11143.           PopsUtils.appendChild($shadowContainer);
  11144.         }
  11145.         let { left: menuLeftOffset, top: menuTopOffset } = this.getOffset(
  11146.           menuElement,
  11147.           menuEvent.clientX,
  11148.           menuEvent.clientY
  11149.         );
  11150.         PopsDOMUtils.css(menuElement, {
  11151.           left: menuLeftOffset,
  11152.           top: menuTopOffset,
  11153.           display: "",
  11154.         });
  11155.         /* 过渡动画 */
  11156.         if (config.isAnimation) {
  11157.           PopsDOMUtils.addClassName(menuElement, `pops-${PopsType}-anim-show`);
  11158.         }
  11159.         return menuElement;
  11160.       },
  11161.       /**
  11162.        * 显示子菜单
  11163.        * @param {Event} menuEvent 事件
  11164.        * @param {{
  11165.        * clientX: number,
  11166.        * clientY: number
  11167.        * }} posInfo 位置信息
  11168.        * @param {PopsRightClickMenuDataDetails[]} _config_
  11169.        * @param {?HTMLDivElement} rootElement 根菜单元素
  11170.        * @param {?HTMLLIElement} targetLiElement 父li项元素
  11171.        */
  11172.       showClildMenu(
  11173.         menuEvent,
  11174.         posInfo,
  11175.         _config_,
  11176.         rootElement,
  11177.         targetLiElement
  11178.       ) {
  11179.         let menuElement = this.getMenuContainerElement(config.zIndex, true);
  11180.         menuElement.__menuData__ = {
  11181.           parent: targetLiElement,
  11182.           root: rootElement,
  11183.         };
  11184.         rootElement.__menuData__.child.push(menuElement);
  11185.         PopsContextMenu.addMenuLiELement(
  11186.           menuEvent,
  11187.           rootElement,
  11188.           menuElement,
  11189.           _config_
  11190.         );
  11191.         /* 先隐藏 */
  11192.         PopsDOMUtils.css(menuElement, {
  11193.           display: "none",
  11194.         });
  11195.         /* 添加到页面 */
  11196.         PopsUtils.appendChild($shadowRoot, menuElement);
  11197.         let { left: menuLeftOffset, top: menuTopOffset } = this.getOffset(
  11198.           menuElement,
  11199.           posInfo.clientX,
  11200.           posInfo.clientY
  11201.         );
  11202.         PopsDOMUtils.css(menuElement, {
  11203.           left: menuLeftOffset,
  11204.           top: menuTopOffset,
  11205.           display: "",
  11206.         });
  11207.         /* 过渡动画 */
  11208.         if (config.isAnimation) {
  11209.           PopsDOMUtils.addClassName(menuElement, `pops-${PopsType}-anim-show`);
  11210.         }
  11211.         return menuElement;
  11212.       },
  11213.       /**
  11214.        * 获取菜单项的元素
  11215.        * @param {PointerEvent} menuEvent 事件
  11216.        * @param {HTMLElement} rootElement 根元素
  11217.        * @param {HTMLDivElement} menuElement 菜单元素
  11218.        * @param {PopsRightClickMenuDataDetails[]} _config_ 配置
  11219.        */
  11220.       addMenuLiELement(menuEvent, rootElement, menuElement, _config_) {
  11221.         let menuEventTarget = menuEvent.target;
  11222.         let menuULElement = menuElement.querySelector("ul");
  11223.         _config_.forEach((item) => {
  11224.           /**
  11225.            * @type {HTMLLIElement}
  11226.            */
  11227.           let menuLiElement = PopsUtils.parseTextToDOM(`
  11228.           <li></li>
  11229.           `);
  11230.           /* 判断有无图标，有就添加进去 */
  11231.           if (typeof item.icon === "string" && item.icon.trim() !== "") {
  11232.             let iconSVGHTML = pops.config.iconSVG[item.icon] ?? item.icon;
  11233.             let iconElement = PopsUtils.parseTextToDOM(
  11234.               `<i class="pops-${PopsType}-icon" is-loading="${item.iconIsLoading}">${iconSVGHTML}</i>`
  11235.             );
  11236.             menuLiElement.appendChild(iconElement);
  11237.           }
  11238.           /* 插入文字 */
  11239.           menuLiElement.insertAdjacentHTML(
  11240.             "beforeend",
  11241.             `<span>${item.text}</span>`
  11242.           );
  11243.           /* 如果存在子数据，显示 */
  11244.           if (item.item && Array.isArray(item.item)) {
  11245.             PopsDOMUtils.addClassName(menuLiElement, `pops-${PopsType}-item`);
  11246.           }
  11247.           /* 鼠标|触摸 移入事件 */
  11248.           function liElementHoverEvent() {
  11249.             Array.from(menuULElement.children).forEach((liElement) => {
  11250.               PopsDOMUtils.removeClassName(
  11251.                 liElement,
  11252.                 `pops-${PopsType}-is-visited`
  11253.               );
  11254.               if (!liElement.__menuData__) {
  11255.                 return;
  11256.               }
  11257.               function removeElement(element) {
  11258.                 element.querySelectorAll("ul li").forEach((ele) => {
  11259.                   if (ele?.__menuData__?.child) {
  11260.                     removeElement(ele.__menuData__.child);
  11261.                   }
  11262.                 });
  11263.                 element.remove();
  11264.               }
  11265.               /* 遍历根元素的上的__menuData__.child，判断 */
  11266.               removeElement(liElement.__menuData__.child);
  11267.             });
  11268.             /* 清理根元素上的children不存在于页面中的元素 */
  11269.             for (
  11270.               let index = 0;
  11271.               index < rootElement.__menuData__.child.length;
  11272.               index++
  11273.             ) {
  11274.               let element = rootElement.__menuData__.child[index];
  11275.               if (!$shadowRoot.contains(element)) {
  11276.                 rootElement.__menuData__.child.splice(index, 1);
  11277.                 index--;
  11278.               }
  11279.             }
  11280.             PopsDOMUtils.addClassName(
  11281.               menuLiElement,
  11282.               `pops-${PopsType}-is-visited`
  11283.             );
  11284.             if (!item.item) {
  11285.               return;
  11286.             }
  11287.             let rect = menuLiElement.getBoundingClientRect();
  11288.             let childMenu = PopsContextMenu.showClildMenu(
  11289.               menuEvent,
  11290.               {
  11291.                 clientX: rect.left + PopsDOMUtils.outerWidth(menuLiElement),
  11292.                 clientY: rect.top,
  11293.               },
  11294.               item.item,
  11295.               rootElement,
  11296.               menuLiElement
  11297.             );
  11298.             menuLiElement.__menuData__ = {
  11299.               child: childMenu,
  11300.             };
  11301.           }
  11302.           /**
  11303.            * 点击事件
  11304.            * @param {PointerEvent} clickEvent
  11305.            * @returns
  11306.            */
  11307.           async function liElementClickEvent(clickEvent) {
  11308.             if (typeof item.callback === "function") {
  11309.               OriginPrototype.Object.defineProperty(menuEvent, "target", {
  11310.                 get() {
  11311.                   return menuEventTarget;
  11312.                 },
  11313.               });
  11314.               let callbackResult = await item.callback(
  11315.                 clickEvent,
  11316.                 menuEvent,
  11317.                 menuLiElement
  11318.               );
  11319.               if (
  11320.                 typeof callbackResult === "boolean" &&
  11321.                 callbackResult == false
  11322.               ) {
  11323.                 return;
  11324.               }
  11325.             }
  11326.             /* 取消绑定的鼠标/触摸事件，防止关闭的时候再次触发 */
  11327.             Array.from(menuULElement.children).forEach((liEle) => {
  11328.               PopsDOMUtils.off(liEle, "mouseenter touchstart");
  11329.             });
  11330.             PopsContextMenu.closeAllMenu(rootElement);
  11331.           }
  11332.           PopsDOMUtils.on(
  11333.             menuLiElement,
  11334.             "mouseenter touchstart",
  11335.             void 0,
  11336.             liElementHoverEvent
  11337.           );
  11338.           /* 项-点击事件 */
  11339.           PopsDOMUtils.on(menuLiElement, "click", void 0, liElementClickEvent);
  11340.  
  11341.           menuULElement.appendChild(menuLiElement);
  11342.         });
  11343.       },
  11344.     };
  11345.  
  11346.     PopsContextMenu.addContextMenuEvent(
  11347.       config.target,
  11348.       config.targetSelector,
  11349.       config.preventDefault
  11350.     );
  11351.     PopsContextMenu.addWindowCheckClickListener();
  11352.  
  11353.     return {
  11354.       guid: guid,
  11355.       config: config,
  11356.       removeWindowCheckClickListener:
  11357.         PopsContextMenu.removeWindowCheckClickListener,
  11358.       addWindowCheckClickListener: PopsContextMenu.addWindowCheckClickListener,
  11359.       removeContextMenuEvent: PopsContextMenu.removeContextMenuEvent,
  11360.       addContextMenuEvent: PopsContextMenu.addContextMenuEvent,
  11361.     };
  11362.   };
  11363.  
  11364.   /**
  11365.    * 搜索建议悬浮窗
  11366.    * @param {PopsSearchSuggestionDetails} details
  11367.    */
  11368.   pops.searchSuggestion = function (details) {
  11369.     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  11370.     PopsHandler.handleInit($shadowRoot, [
  11371.       pops.config.cssText.index,
  11372.       pops.config.cssText.anim,
  11373.       pops.config.cssText.common,
  11374.     ]);
  11375.     /** @type {PopsSearchSuggestionDetails} */
  11376.     let config = {
  11377.       target: null,
  11378.       inputTarget: null,
  11379.       selfDocument: document,
  11380.       data: [
  11381.         {
  11382.           value: "数据1",
  11383.           text: "数据1-html",
  11384.         },
  11385.         {
  11386.           value: "数据2",
  11387.           text: "数据2-html",
  11388.         },
  11389.       ],
  11390.       deleteIcon: {
  11391.         enable: true,
  11392.         callback(event, liElement, data) {
  11393.           console.log("删除当前项", [event, liElement, data]);
  11394.           liElement.remove();
  11395.         },
  11396.       },
  11397.       className: "",
  11398.       isAbsolute: true,
  11399.       isAnimation: true,
  11400.       width: "250px",
  11401.       maxHeight: "300px",
  11402.       followTargetWidth: true,
  11403.       topDistance: 0,
  11404.       zIndex: 10000,
  11405.       searchingTip: "正在搜索中...",
  11406.       toSearhNotResultHTML: '<li data-none="true">暂无其它数据</li>',
  11407.       getItemHTML(item) {
  11408.         return item.text ?? item;
  11409.       },
  11410.       async getData(value) {
  11411.         console.log("当前输入框的值是：", value);
  11412.         return [];
  11413.       },
  11414.       itemClickCallBack(event, liElement, data) {
  11415.         console.log("item项的点击回调", [event, liElement, data]);
  11416.         this.inputTarget.value = data.value;
  11417.       },
  11418.       style: void 0,
  11419.     };
  11420.     config = PopsUtils.assignJSON(config, details);
  11421.     if (config.target == null) {
  11422.       throw new TypeError("config.target 不能为空");
  11423.     }
  11424.     /* 做下兼容处理 */
  11425.     if (config.inputTarget == null) {
  11426.       config.inputTarget = config.target;
  11427.     }
  11428.     if (details.data) {
  11429.       config.data = details.data;
  11430.     }
  11431.     const guid = PopsUtils.getRandomGUID();
  11432.     const PopsType = "searchSuggestion";
  11433.  
  11434.     if (config.style != null) {
  11435.       let cssNode = document.createElement("style");
  11436.       cssNode.setAttribute("type", "text/css");
  11437.       cssNode.innerHTML = config.style;
  11438.       $shadowRoot.appendChild(cssNode);
  11439.     }
  11440.  
  11441.     const SearchSuggestion = {
  11442.       /**
  11443.        * 当前的环境，可以是document，可以是shadowroot，默认是document
  11444.        */
  11445.       selfDocument: config.selfDocument,
  11446.       /**
  11447.        * 根元素
  11448.        * @type {HTMLElement}
  11449.        */
  11450.       root: null,
  11451.       /**
  11452.        * ul元素
  11453.        * @type {HTMLUListElement}
  11454.        */
  11455.       hintULElement: null,
  11456.       /**
  11457.        * 初始化
  11458.        */
  11459.       init(parentElement = document.body || document.documentElement) {
  11460.         this.root = this.getSearchSelectElement();
  11461.         this.hintULElement = this.root.querySelector("ul");
  11462.         this.update(config.data);
  11463.         this.changeHintULElementWidth();
  11464.         this.changeHintULElementPosition();
  11465.  
  11466.         this.hide();
  11467.         if (config.isAnimation) {
  11468.           this.root.classList.add(`pops-${PopsType}-animation`);
  11469.         }
  11470.         $shadowRoot.appendChild(this.root);
  11471.         parentElement.appendChild($shadowContainer);
  11472.       },
  11473.       /**
  11474.        * 获取显示出搜索建议框的html
  11475.        */
  11476.       getSearchSelectElement() {
  11477.         let element = PopsDOMUtils.createElement(
  11478.           "div",
  11479.           {
  11480.             className: `pops pops-${PopsType}-search-suggestion`,
  11481.             innerHTML: `
  11482.             <style>
  11483.             .pops-${PopsType}-animation{
  11484.               -moz-animation: searchSelectFalIn 0.5s 1 linear;
  11485.               -webkit-animation: searchSelectFalIn 0.5s 1 linear;
  11486.               -o-animation: searchSelectFalIn 0.5s 1 linear;
  11487.               -ms-animation: searchSelectFalIn 0.5s 1 linear;
  11488.             }
  11489.             .pops-${PopsType}-search-suggestion{
  11490.               position: ${config.isAbsolute ? "absolute" : "fixed"};
  11491.               z-index: ${config.zIndex};
  11492.               top: 0;
  11493.               bottom: 0;
  11494.               left: 0;
  11495.               right: 0;
  11496.               height: 0;
  11497.               border: initial;
  11498.               overflow: initial;
  11499.             }
  11500.             ul.pops-${PopsType}-search-suggestion-hint{
  11501.               width: 0;
  11502.               left: 0;
  11503.               max-height: ${config.maxHeight};
  11504.               overflow-x: hidden;
  11505.               overflow-y: auto;
  11506.               padding: 5px 0;
  11507.               background-color: #fff;
  11508.               box-sizing: border-box;
  11509.               border-radius: 4px;
  11510.               box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
  11511.               position: absolute;
  11512.             }
  11513.             ul.pops-${PopsType}-search-suggestion-hint li{
  11514.               padding: 7px;
  11515.               margin: 0;
  11516.               clear: both;
  11517.               color: #515a6e;
  11518.               font-size: 14px;
  11519.               list-style: none;
  11520.               cursor: pointer;
  11521.               transition: background .2s ease-in-out;
  11522.               overflow: hidden;
  11523.               text-overflow: ellipsis;
  11524.             }
  11525.             ul.pops-${PopsType}-search-suggestion-hint li[data-none]{
  11526.               text-align: center;
  11527.               font-size: 12px;
  11528.               color: #8e8e8e;
  11529.             }
  11530.             ul.pops-${PopsType}-search-suggestion-hint li:hover{
  11531.               background-color: rgba(0, 0, 0, .1);
  11532.             }            
  11533.             </style>
  11534.             <ul class="pops-${PopsType}-search-suggestion-hint">
  11535.                 ${config.toSearhNotResultHTML}
  11536.             </ul>
  11537.           `,
  11538.           },
  11539.           {
  11540.             "data-guid": guid,
  11541.             "type-value": PopsType,
  11542.           }
  11543.         );
  11544.         if (config.className !== "" && config.className != null) {
  11545.           PopsDOMUtils.addClassName(element, config.className);
  11546.         }
  11547.         return element;
  11548.       },
  11549.       /**
  11550.        * 获取显示出搜索建议框的每一项的html
  11551.        * @param {PopsSearchSuggestionData} item 当前项的值
  11552.        * @param {number} index 当前项的下标
  11553.        */
  11554.       getSearchItemLiElement(item, index) {
  11555.         return PopsDOMUtils.createElement("li", {
  11556.           className: `pops-${PopsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
  11557.           "data-index": index,
  11558.           "data-value": this.getItemDataValue(item),
  11559.           innerHTML: `
  11560.           ${config.getItemHTML(item)}
  11561.           ${config.deleteIcon.enable ? this.getDeleteIconHTML() : ""}
  11562.           `,
  11563.         });
  11564.       },
  11565.       /**
  11566.        * 获取data-value值
  11567.        * @param {PopsSearchSuggestionData} item
  11568.        */
  11569.       getItemDataValue(item) {
  11570.         return item;
  11571.       },
  11572.       /**
  11573.        * 设置搜索建议框每一项的点击事件
  11574.        * @param {HTMLLIElement} liElement
  11575.        */
  11576.       setSearchItemClickEvent(liElement) {
  11577.         PopsDOMUtils.on(
  11578.           liElement,
  11579.           "click",
  11580.           void 0,
  11581.           (event) => {
  11582.             PopsUtils.preventEvent(event);
  11583.             if (event.target.closest(`.pops-${PopsType}-delete-icon`)) {
  11584.               /* 点击的是删除按钮 */
  11585.               config.deleteIcon.callback(
  11586.                 event,
  11587.                 liElement,
  11588.                 liElement["data-value"]
  11589.               );
  11590.               if (!this.hintULElement.children.length) {
  11591.                 /* 全删完了 */
  11592.                 this.clear();
  11593.               }
  11594.             } else {
  11595.               /* 点击项主体 */
  11596.               config.itemClickCallBack(
  11597.                 event,
  11598.                 liElement,
  11599.                 liElement["data-value"]
  11600.               );
  11601.             }
  11602.           },
  11603.           {
  11604.             capture: true,
  11605.           }
  11606.         );
  11607.       },
  11608.       /**
  11609.        * 监听输入框内容改变
  11610.        */
  11611.       setInputChangeEvent() {
  11612.         /* 是input输入框 */
  11613.         /* 禁用输入框自动提示 */
  11614.         config.inputTarget.setAttribute("autocomplete", "off");
  11615.         /* 内容改变事件 */
  11616.         PopsDOMUtils.on(
  11617.           config.inputTarget,
  11618.           "input",
  11619.           void 0,
  11620.           async (event) => {
  11621.             let getListResult = await config.getData(event.target.value);
  11622.             this.update(getListResult);
  11623.           },
  11624.           {
  11625.             capture: true,
  11626.           }
  11627.         );
  11628.       },
  11629.       /**
  11630.        * 移除输入框内容改变的监听
  11631.        */
  11632.       removeInputChangeEvent() {
  11633.         PopsDOMUtils.off(config.inputTarget, "input", void 0, void 0, {
  11634.           capture: true,
  11635.         });
  11636.       },
  11637.       /**
  11638.        * 显示搜索建议框的事件
  11639.        */
  11640.       showEvent() {
  11641.         SearchSuggestion.changeHintULElementPosition();
  11642.         SearchSuggestion.changeHintULElementWidth();
  11643.         SearchSuggestion.show();
  11644.       },
  11645.       /**
  11646.        * 设置显示搜索建议框的事件
  11647.        */
  11648.       setShowEvent() {
  11649.         /* 焦点|点击事件*/
  11650.         PopsDOMUtils.on(
  11651.           [config.target, config.inputTarget],
  11652.           ["focus", "click"],
  11653.           void 0,
  11654.           this.showEvent,
  11655.           {
  11656.             capture: true,
  11657.           }
  11658.         );
  11659.       },
  11660.       /**
  11661.        * 移除显示搜索建议框的事件
  11662.        */
  11663.       removeShowEvent() {
  11664.         /* 焦点|点击事件*/
  11665.         PopsDOMUtils.off(
  11666.           [config.target, config.inputTarget],
  11667.           ["focus", "click"],
  11668.           void 0,
  11669.           this.showEvent,
  11670.           {
  11671.             capture: true,
  11672.           }
  11673.         );
  11674.       },
  11675.       /**
  11676.        * 隐藏搜索建议框的事件
  11677.        * @param {PointerEvent|MouseEvent} event
  11678.        */
  11679.       hideEvent(event) {
  11680.         if (event.target instanceof Node) {
  11681.           if ($shadowContainer.contains(event.target)) {
  11682.             /* 点击在shadow上的 */
  11683.             return;
  11684.           }
  11685.           if (config.target.contains(event.target)) {
  11686.             /* 点击在目标元素内 */
  11687.             return;
  11688.           }
  11689.           if (config.inputTarget.contains(event.target)) {
  11690.             /* 点击在目标input内 */
  11691.             return;
  11692.           }
  11693.           SearchSuggestion.hide();
  11694.         }
  11695.       },
  11696.       /**
  11697.        * 设置隐藏搜索建议框的事件
  11698.        */
  11699.       setHideEvent() {
  11700.         /* 全局点击事件 */
  11701.         /* 全局触摸屏点击事件 */
  11702.         PopsDOMUtils.on(
  11703.           SearchSuggestion.selfDocument,
  11704.           ["click", "touchstart"],
  11705.           void 0,
  11706.           this.hideEvent,
  11707.           {
  11708.             capture: true,
  11709.           }
  11710.         );
  11711.       },
  11712.       /**
  11713.        * 移除隐藏搜索建议框的事件
  11714.        */
  11715.       removeHideEvent() {
  11716.         PopsDOMUtils.off(
  11717.           SearchSuggestion.selfDocument,
  11718.           ["click", "touchstart"],
  11719.           void 0,
  11720.           this.hideEvent,
  11721.           {
  11722.             capture: true,
  11723.           }
  11724.         );
  11725.       },
  11726.       /**
  11727.        * 设置所有监听
  11728.        */
  11729.       setAllEvent() {
  11730.         this.setInputChangeEvent();
  11731.         this.setHideEvent();
  11732.         this.setShowEvent();
  11733.       },
  11734.       /**
  11735.        * 移除所有监听
  11736.        */
  11737.       removeAllEvent() {
  11738.         this.removeInputChangeEvent();
  11739.         this.removeHideEvent();
  11740.         this.removeShowEvent();
  11741.       },
  11742.       /**
  11743.        * 获取删除按钮的html
  11744.        */
  11745.       getDeleteIconHTML(size = 16, fill = "#bababa") {
  11746.         return `
  11747.         <svg class="pops-${PopsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
  11748.           <path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
  11749.           <path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
  11750.         </svg>
  11751.         `;
  11752.       },
  11753.       /**
  11754.        * 设置当前正在搜索中的提示
  11755.        */
  11756.       setPromptsInSearch() {
  11757.         let isSearchingElement = PopsDOMUtils.createElement("li", {
  11758.           className: `pops-${PopsType}-search-suggestion-hint-searching-item`,
  11759.           innerHTML: config.searchingTip,
  11760.         });
  11761.         SearchSuggestion.hintULElement.appendChild(isSearchingElement);
  11762.       },
  11763.       /**
  11764.        * 移除正在搜索中的提示
  11765.        */
  11766.       removePromptsInSearch() {
  11767.         SearchSuggestion.hintULElement
  11768.           .querySelector(
  11769.             `li.pops-${PopsType}-search-suggestion-hint-searching-item`
  11770.           )
  11771.           ?.remove();
  11772.       },
  11773.       /**
  11774.        * 清空所有的搜索结果
  11775.        */
  11776.       clearAllSearchItemLi() {
  11777.         SearchSuggestion.hintULElement.innerHTML = "";
  11778.       },
  11779.       /**
  11780.        * 修改搜索建议框的位置(top、left)
  11781.        * 因为目标元素可能是动态隐藏的
  11782.        */
  11783.       changeHintULElementPosition(
  11784.         target = config.target ?? config.inputTarget
  11785.       ) {
  11786.         let targetRect = config.isAbsolute
  11787.           ? PopsDOMUtils.offset(target)
  11788.           : target.getBoundingClientRect();
  11789.  
  11790.         SearchSuggestion.hintULElement.style.top =
  11791.           targetRect.height + targetRect.top + config.topDistance + "px";
  11792.         SearchSuggestion.hintULElement.style.left = targetRect.left + "px";
  11793.       },
  11794.       /**
  11795.        * 修改搜索建议框的width
  11796.        * 因为目标元素可能是动态隐藏的
  11797.        */
  11798.       changeHintULElementWidth(target = config.target ?? config.inputTarget) {
  11799.         let targetRect = target.getBoundingClientRect();
  11800.         if (config.followTargetWidth) {
  11801.           SearchSuggestion.hintULElement.style.width = targetRect.width + "px";
  11802.         } else {
  11803.           SearchSuggestion.hintULElement.style.width = config.width;
  11804.         }
  11805.       },
  11806.       /**
  11807.        * 更新页面显示的搜索结果
  11808.        * @param {PopsSearchSuggestionData[]} data
  11809.        */
  11810.       update(data = []) {
  11811.         if (!Array.isArray(data)) {
  11812.           throw new TypeError("传入的数据不是数组");
  11813.         }
  11814.         config.data = data;
  11815.         /* 清空已有的搜索结果 */
  11816.         if (config.data.length) {
  11817.           this.clearAllSearchItemLi();
  11818.           /* 添加进ul中 */
  11819.           config.data.forEach((item, index) => {
  11820.             let itemElement = this.getSearchItemLiElement(item, index);
  11821.             this.setSearchItemClickEvent(itemElement);
  11822.             this.hintULElement.appendChild(itemElement);
  11823.           });
  11824.         } else {
  11825.           /* 清空 */
  11826.           this.clear();
  11827.         }
  11828.       },
  11829.       /**
  11830.        * 清空当前的搜索结果并显示无结果
  11831.        */
  11832.       clear() {
  11833.         this.clearAllSearchItemLi();
  11834.         this.hintULElement.appendChild(
  11835.           PopsUtils.parseTextToDOM(config.toSearhNotResultHTML)
  11836.         );
  11837.       },
  11838.       /**
  11839.        * 隐藏搜索建议框
  11840.        */
  11841.       hide() {
  11842.         this.root.style.display = "none";
  11843.       },
  11844.       /**
  11845.        * 显示搜索建议框
  11846.        */
  11847.       show() {
  11848.         this.root.style.display = "";
  11849.       },
  11850.     };
  11851.     return SearchSuggestion;
  11852.   };
  11853.   return pops;
  11854. });

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址