@whitesev/pops 2.3.6 → 2.3.8

package/dist/index.system.js

@@ -1157,6 +1157,7 @@ System.register('pops', [], (function (exports) {
                  * })
                  */
                 ready(callback) {
+                    const that = this;
                     if (typeof callback !== "function") {
                         return;
                     }
@@ -1202,7 +1203,7 @@ System.register('pops', [], (function (exports) {
                     function addDomReadyListener() {
                         for (let index = 0; index < targetList.length; index++) {
                             let item = targetList[index];
-                            item.target.addEventListener(item.eventType, item.callback);
+                            that.on(item.target, item.eventType, item.callback);
                         }
                     }
                     /**
@@ -1211,7 +1212,7 @@ System.register('pops', [], (function (exports) {
                     function removeDomReadyListener() {
                         for (let index = 0; index < targetList.length; index++) {
                             let item = targetList[index];
-                            item.target.removeEventListener(item.eventType, item.callback);
+                            that.off(item.target, item.eventType, item.callback);
                         }
                     }
                     if (checkDOMReadyState()) {
@@ -1493,9 +1494,7 @@ System.register('pops', [], (function (exports) {
                             eventNameList = [eventNameList];
                         }
                         eventNameList.forEach((eventName) => {
-                            element.addEventListener(eventName, stopEvent, {
-                                capture: Boolean(capture),
-                            });
+                            this.on(element, eventName, stopEvent, { capture: Boolean(capture) });
                         });
                     }
                 }
@@ -5144,57 +5143,101 @@ System.register('pops', [], (function (exports) {
                     if ($mask != null) {
                         $anim.after($mask);
                     }
-                    /* 添加文件信息 */
-                    config.folder.sort();
-                    /**
-                     * 创建文件夹元素
-                     * @param fileName
-                     * @param latestTime
-                     * @param [fileSize="-"]
-                     * @param isFolder
-                     */
-                    function createFolderRowElement(fileName, latestTime = "-", fileSize = "-", isFolder = false) {
-                        let origin_fileName = fileName;
-                        let origin_latestTime = latestTime;
-                        let origin_fileSize = fileSize;
-                        let folderELement = popsDOMUtils.createElement("tr");
-                        let fileNameElement = popsDOMUtils.createElement("td");
-                        let fileTimeElement = popsDOMUtils.createElement("td");
-                        let fileFormatSize = popsDOMUtils.createElement("td");
-                        let fileType = "";
-                        let fileIcon = Folder_ICON.folder;
-                        if (isFolder) {
-                            /* 文件夹 */
-                            latestTime = "";
-                            fileSize = "";
-                        }
-                        else {
-                            /* 文件 */
-                            fileIcon = "";
-                            if (typeof latestTime === "number") {
-                                latestTime = popsUtils.formatTime(latestTime);
-                            }
-                            if (typeof fileSize === "number") {
-                                fileSize = popsUtils.formatByteToSize(fileSize);
-                            }
-                            for (let keyName in Folder_ICON) {
-                                if (fileName.toLowerCase().endsWith("." + keyName)) {
-                                    fileType = keyName;
-                                    fileIcon = Folder_ICON[keyName];
-                                    break;
-                                }
+                    class PopsFolder {
+                        init() {
+                            config.folder.sort();
+                            this.initFolderView(config.folder);
+                            /* 将数据存到全部文件的属性_config_中 */
+                            let allFilesElement = folderFileListBreadcrumbPrimaryElement.querySelector(".pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child");
+                            Reflect.set(allFilesElement, "_config_", config.folder);
+                            /* 设置点击顶部的全部文件事件 */
+                            popsDOMUtils.on(allFilesElement, "click", (event) => {
+                                this.setBreadcrumbClickEvent(event, true, config.folder);
+                            });
+                            // 文件名的点击排序
+                            popsDOMUtils.on(folderListSortFileNameElement.closest("th"), "click", (event) => {
+                                this.arrowToSortFolderInfoView(folderListSortFileNameElement, event, "fileName");
+                            }, {
+                                capture: true,
+                            });
+                            // 修改事件的点击排序
+                            popsDOMUtils.on(folderListSortLatestTimeElement.closest("th"), "click", (event) => {
+                                this.arrowToSortFolderInfoView(folderListSortLatestTimeElement, event, "latestTime");
+                            }, {
+                                capture: true,
+                            });
+                            // 文件大小的点击排序
+                            popsDOMUtils.on(folderListSortFileSizeElement.closest("th"), "click", (event) => {
+                                this.arrowToSortFolderInfoView(folderListSortFileSizeElement, event, "fileSize");
+                            }, {
+                                capture: true,
+                            });
+                            /* 设置默认触发的arrow */
+                            if (config.sort.name === "fileName") {
+                                popsDOMUtils.trigger(folderListSortFileNameElement, "click", {
+                                    notChangeSortRule: true,
+                                });
                             }
-                            if (!Boolean(fileIcon)) {
-                                fileType = "Null";
-                                fileIcon = Folder_ICON.Null;
+                            else if (config.sort.name === "latestTime") {
+                                popsDOMUtils.trigger(folderListSortLatestTimeElement, "click", {
+                                    notChangeSortRule: true,
+                                });
+                            }
+                            else if (config.sort.name === "fileSize") {
+                                popsDOMUtils.trigger(folderListSortFileSizeElement, "click", {
+                                    notChangeSortRule: true,
+                                });
                             }
                         }
-                        folderELement.className = "pops-folder-list-table__body-row";
-                        fileNameElement.className = "pops-folder-list-table__body-td";
-                        fileTimeElement.className = "pops-folder-list-table__body-td";
-                        fileFormatSize.className = "pops-folder-list-table__body-td";
-                        PopsSafeUtils.setSafeHTML(fileNameElement, 
-                        /*html*/ `
+                        /**
+                         * 创建文件夹元素
+                         * @param fileName 文件名
+                         * @param latestTime 修改时间
+                         * @param [fileSize="-"] 文件大小
+                         * @param isFolder 是否是文件夹
+                         */
+                        createFolderRowElement(fileName, latestTime = "-", fileSize = "-", isFolder = false) {
+                            let origin_fileName = fileName;
+                            let origin_latestTime = latestTime;
+                            let origin_fileSize = fileSize;
+                            let folderElement = popsDOMUtils.createElement("tr");
+                            let fileNameElement = popsDOMUtils.createElement("td");
+                            let fileTimeElement = popsDOMUtils.createElement("td");
+                            let fileFormatSize = popsDOMUtils.createElement("td");
+                            let fileType = "";
+                            let fileIcon = Folder_ICON.folder;
+                            if (isFolder) {
+                                /* 文件夹 */
+                                latestTime = "";
+                                fileSize = "";
+                            }
+                            else {
+                                /* 文件 */
+                                fileIcon = "";
+                                if (typeof latestTime === "number") {
+                                    latestTime = popsUtils.formatTime(latestTime);
+                                }
+                                if (typeof fileSize === "number") {
+                                    fileSize = popsUtils.formatByteToSize(fileSize);
+                                }
+                                for (let keyName in Folder_ICON) {
+                                    if (fileName.toLowerCase().endsWith("." + keyName)) {
+                                        fileType = keyName;
+                                        fileIcon = Folder_ICON[keyName];
+                                        break;
+                                    }
+                                }
+                                if (!Boolean(fileIcon)) {
+                                    fileType = "Null";
+                                    fileIcon = Folder_ICON.Null;
+                                }
+                            }
+                            folderElement.className = "pops-folder-list-table__body-row";
+                            fileNameElement.className = "pops-folder-list-table__body-td";
+                            fileTimeElement.className = "pops-folder-list-table__body-td";
+                            fileFormatSize.className = "pops-folder-list-table__body-td";
+                            PopsSafeUtils.setSafeHTML(fileNameElement, 
+                            /*html*/ `
 				<div class="pops-folder-list-file-name cursor-p">
 					<div>
 						<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
@@ -5204,80 +5247,84 @@ System.register('pops', [], (function (exports) {
 					</div>
 				</div>
             `);
-                        PopsSafeUtils.setSafeHTML(fileTimeElement, 
-                        /*html*/ `
+                            PopsSafeUtils.setSafeHTML(fileTimeElement, 
+                            /*html*/ `
 				<div class="pops-folder-list__time">
 					<span>${latestTime}</span>
 				</div>
 				`);
-                        PopsSafeUtils.setSafeHTML(fileFormatSize, 
-                        /*html*/ `
+                            PopsSafeUtils.setSafeHTML(fileFormatSize, 
+                            /*html*/ `
 				<div class="pops-folder-list-format-size">
 					<span>${fileSize}</span>
 				</div>
 				`);
-                        /* 存储原来的值 */
-                        let __value__ = {
-                            fileName: origin_fileName,
-                            latestTime: origin_latestTime,
-                            fileSize: origin_fileSize,
-                            isFolder: isFolder,
-                        };
-                        Reflect.set(fileNameElement, "__value__", __value__);
-                        Reflect.set(fileTimeElement, "__value__", __value__);
-                        Reflect.set(fileFormatSize, "__value__", __value__);
-                        Reflect.set(folderELement, "__value__", __value__);
-                        folderELement.appendChild(fileNameElement);
-                        folderELement.appendChild(fileTimeElement);
-                        folderELement.appendChild(fileFormatSize);
-                        return {
-                            folderELement,
-                            fileNameElement,
-                            fileTimeElement,
-                            fileFormatSize,
-                        };
-                    }
-                    /**
-                     * 创建移动端文件夹元素
-                     */
-                    function createMobileFolderRowElement(fileName, latestTime = "-", fileSize = "-", isFolder = false) {
-                        let origin_fileName = fileName;
-                        let origin_latestTime = latestTime;
-                        let origin_fileSize = fileSize;
-                        let folderELement = popsDOMUtils.createElement("tr");
-                        let fileNameElement = popsDOMUtils.createElement("td");
-                        let fileType = "";
-                        let fileIcon = Folder_ICON.folder;
-                        if (isFolder) {
-                            /* 文件夹 */
-                            latestTime = "";
-                            fileSize = "";
+                            /* 存储原来的值 */
+                            let __value__ = {
+                                fileName: origin_fileName,
+                                latestTime: origin_latestTime,
+                                fileSize: origin_fileSize,
+                                isFolder: isFolder,
+                            };
+                            Reflect.set(fileNameElement, "__value__", __value__);
+                            Reflect.set(fileTimeElement, "__value__", __value__);
+                            Reflect.set(fileFormatSize, "__value__", __value__);
+                            Reflect.set(folderElement, "__value__", __value__);
+                            folderElement.appendChild(fileNameElement);
+                            folderElement.appendChild(fileTimeElement);
+                            folderElement.appendChild(fileFormatSize);
+                            return {
+                                folderElement,
+                                fileNameElement,
+                                fileTimeElement,
+                                fileFormatSize,
+                            };
                         }
-                        else {
-                            /* 文件 */
-                            fileIcon = "";
-                            if (typeof latestTime === "number") {
-                                latestTime = popsUtils.formatTime(latestTime);
-                            }
-                            if (typeof fileSize === "number") {
-                                fileSize = popsUtils.formatByteToSize(fileSize);
-                            }
-                            for (let keyName in Folder_ICON) {
-                                if (fileName.toLowerCase().endsWith("." + keyName)) {
-                                    fileType = keyName;
-                                    fileIcon = Folder_ICON[keyName];
-                                    break;
-                                }
+                        /**
+                         * 创建移动端文件夹元素
+                         * @param fileName 文件名
+                         * @param latestTime 创建时间
+                         * @param [fileSize="-"] 文件大小
+                         * @param isFolder 是否是文件夹
+                         */
+                        createFolderRowElementByMobile(fileName, latestTime = "-", fileSize = "-", isFolder = false) {
+                            let origin_fileName = fileName;
+                            let origin_latestTime = latestTime;
+                            let origin_fileSize = fileSize;
+                            let folderElement = popsDOMUtils.createElement("tr");
+                            let fileNameElement = popsDOMUtils.createElement("td");
+                            let fileType = "";
+                            let fileIcon = Folder_ICON.folder;
+                            if (isFolder) {
+                                /* 文件夹 */
+                                latestTime = "";
+                                fileSize = "";
                             }
-                            if (!Boolean(fileIcon)) {
-                                fileType = "Null";
-                                fileIcon = Folder_ICON.Null;
+                            else {
+                                /* 文件 */
+                                fileIcon = "";
+                                if (typeof latestTime === "number") {
+                                    latestTime = popsUtils.formatTime(latestTime);
+                                }
+                                if (typeof fileSize === "number") {
+                                    fileSize = popsUtils.formatByteToSize(fileSize);
+                                }
+                                for (let keyName in Folder_ICON) {
+                                    if (fileName.toLowerCase().endsWith("." + keyName)) {
+                                        fileType = keyName;
+                                        fileIcon = Folder_ICON[keyName];
+                                        break;
+                                    }
+                                }
+                                if (!Boolean(fileIcon)) {
+                                    fileType = "Null";
+                                    fileIcon = Folder_ICON.Null;
+                                }
                             }
-                        }
-                        folderELement.className = "pops-folder-list-table__body-row";
-                        fileNameElement.className = "pops-folder-list-table__body-td";
-                        PopsSafeUtils.setSafeHTML(fileNameElement, 
-                        /*html*/ `
+                            folderElement.className = "pops-folder-list-table__body-row";
+                            fileNameElement.className = "pops-folder-list-table__body-td";
+                            PopsSafeUtils.setSafeHTML(fileNameElement, 
+                            /*html*/ `
 				<div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
 					<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
 					<div>
@@ -5286,139 +5333,138 @@ System.register('pops', [], (function (exports) {
 					</div>
 				</div>
 			`);
-                        /* 存储原来的值 */
-                        let __value__ = {
-                            fileName: origin_fileName,
-                            latestTime: origin_latestTime,
-                            fileSize: origin_fileSize,
-                            isFolder: isFolder,
-                        };
-                        Reflect.set(fileNameElement, "__value__", __value__);
-                        Reflect.set(folderELement, "__value__", __value__);
-                        folderELement.appendChild(fileNameElement);
-                        return {
-                            folderELement,
-                            fileNameElement,
-                        };
-                    }
-                    /**
-                     * 清空每行的元素
-                     */
-                    function clearFolderRow() {
-                        PopsSafeUtils.setSafeHTML(folderListBodyElement, "");
-                    }
-                    /**
-                     * 创建顶部导航的箭头图标
-                     */
-                    function createHeaderArrowIcon() {
-                        let iconArrowElement = popsDOMUtils.createElement("div", {
-                            className: "iconArrow",
-                        });
-                        return iconArrowElement;
-                    }
-                    /**
-                     * 添加顶部导航
-                     * @param folderName 文件夹名
-                     * @param folderDataConfig 文件夹配置
-                     */
-                    function createHeaderFileLinkNavgiation(folderName, folderDataConfig) {
-                        let spanElement = popsDOMUtils.createElement("span", {
-                            className: "pops-folder-file-list-breadcrumb-allFiles cursor-p",
-                            innerHTML: `<a>${folderName}</a>`,
-                            _config_: folderDataConfig,
-                        }, {
-                            title: folderName,
-                        });
-                        return spanElement;
-                    }
-                    /**
-                     * 顶部导航的点击事件
-                     * @param event
-                     * @param isTop 是否是全部文件按钮
-                     * @param folderDataConfigList 配置
-                     */
-                    function breadcrumbAllFilesElementClickEvent(event, isTop, folderDataConfigList) {
-                        clearFolderRow();
-                        /* 获取当前的导航元素 */
-                        let $click = event.target;
-                        let currentBreadcrumb = $click.closest("span.pops-folder-file-list-breadcrumb-allFiles");
-                        if (currentBreadcrumb) {
-                            while (currentBreadcrumb.nextElementSibling) {
-                                currentBreadcrumb.nextElementSibling.remove();
+                            /* 存储原来的值 */
+                            let __value__ = {
+                                fileName: origin_fileName,
+                                latestTime: origin_latestTime,
+                                fileSize: origin_fileSize,
+                                isFolder: isFolder,
+                            };
+                            Reflect.set(fileNameElement, "__value__", __value__);
+                            Reflect.set(folderElement, "__value__", __value__);
+                            folderElement.appendChild(fileNameElement);
+                            return {
+                                folderElement,
+                                fileNameElement,
+                            };
+                        }
+                        /**
+                         * 清空文件夹信息页面
+                         */
+                        clearFolderInfoView() {
+                            PopsSafeUtils.setSafeHTML(folderListBodyElement, "");
+                        }
+                        /**
+                         * 创建顶部导航的箭头图标
+                         */
+                        createHeaderArrowIcon() {
+                            let $arrowIcon = popsDOMUtils.createElement("div", {
+                                className: "iconArrow",
+                            });
+                            return $arrowIcon;
+                        }
+                        /**
+                         * 添加顶部导航元素
+                         * @param folderName 文件夹名
+                         * @param folderDataConfig 文件夹配置
+                         */
+                        createBreadcrumb(folderName, folderDataConfig) {
+                            let $breadcrumb = popsDOMUtils.createElement("span", {
+                                className: "pops-folder-file-list-breadcrumb-allFiles cursor-p",
+                                innerHTML: `<a>${folderName}</a>`,
+                                _config_: folderDataConfig,
+                            }, {
+                                title: folderName,
+                            });
+                            return $breadcrumb;
+                        }
+                        /**
+                         * 顶部导航的点击事件
+                         * @param clickEvent
+                         * @param isTop 是否是全部文件按钮
+                         * @param dataConfigList 配置
+                         */
+                        setBreadcrumbClickEvent(clickEvent, isTop, dataConfigList) {
+                            this.clearFolderInfoView();
+                            /* 获取当前的导航元素 */
+                            let $click = clickEvent.target;
+                            let currentBreadcrumb = $click.closest("span.pops-folder-file-list-breadcrumb-allFiles");
+                            if (currentBreadcrumb) {
+                                while (currentBreadcrumb.nextElementSibling) {
+                                    currentBreadcrumb.nextElementSibling.remove();
+                                }
                             }
+                            else {
+                                console.error("获取导航按钮失败");
+                            }
+                            let loadingMask = PopsLoading.init({
+                                parent: $content,
+                                content: {
+                                    text: "获取文件列表中...",
+                                },
+                                mask: {
+                                    enable: true,
+                                    clickEvent: {
+                                        toClose: false,
+                                        toHide: false,
+                                    },
+                                },
+                                addIndexCSS: false,
+                            });
+                            this.initFolderView(dataConfigList);
+                            loadingMask.close();
                         }
-                        else {
-                            console.error("获取导航按钮失败");
-                        }
-                        let loadingMask = PopsLoading.init({
-                            parent: $content,
-                            content: {
-                                text: "获取文件列表中...",
-                            },
-                            mask: {
-                                enable: true,
-                                clickEvent: {
-                                    toClose: false,
-                                    toHide: false,
+                        /**
+                         * 文件夹的点击事件 - 进入文件夹
+                         *
+                         * 先情况页面元素
+                         * @param clickEvent
+                         * @param dataConfig
+                         */
+                        async enterFolder(clickEvent, dataConfig) {
+                            this.clearFolderInfoView();
+                            let loadingMask = PopsLoading.init({
+                                parent: $content,
+                                content: {
+                                    text: "获取文件列表中...",
                                 },
-                            },
-                            addIndexCSS: false,
-                        });
-                        addFolderElement(folderDataConfigList);
-                        loadingMask.close();
-                    }
-                    /**
-                     * 刷新文件列表界面信息
-                     * @param event
-                     * @param folderDataConfig
-                     */
-                    async function refreshFolderInfoClickEvent(event, folderDataConfig) {
-                        clearFolderRow();
-                        let loadingMask = PopsLoading.init({
-                            parent: $content,
-                            content: {
-                                text: "获取文件列表中...",
-                            },
-                            mask: {
-                                enable: true,
-                            },
-                            addIndexCSS: false,
-                        });
-                        if (typeof folderDataConfig.clickEvent === "function") {
-                            let childConfig = await folderDataConfig.clickEvent(event, folderDataConfig);
-                            /* 添加顶部导航的箭头 */
-                            folderFileListBreadcrumbPrimaryElement.appendChild(createHeaderArrowIcon());
-                            /* 添加顶部导航的链接文字 */
-                            let breadcrumbAllFilesElement = createHeaderFileLinkNavgiation(folderDataConfig.fileName, childConfig);
-                            folderFileListBreadcrumbPrimaryElement.appendChild(breadcrumbAllFilesElement);
-                            /* 设置顶部导航点击事件 */
-                            popsDOMUtils.on(breadcrumbAllFilesElement, "click", function (event) {
-                                breadcrumbAllFilesElementClickEvent(event, false, childConfig);
+                                mask: {
+                                    enable: true,
+                                },
+                                addIndexCSS: false,
                             });
-                            addFolderElement(childConfig);
+                            if (typeof dataConfig.clickEvent === "function") {
+                                let childConfig = await dataConfig.clickEvent(clickEvent, dataConfig);
+                                /* 添加顶部导航的箭头 */
+                                folderFileListBreadcrumbPrimaryElement.appendChild(this.createHeaderArrowIcon());
+                                /* 添加顶部导航的链接文字 */
+                                let breadcrumbAllFilesElement = this.createBreadcrumb(dataConfig.fileName, childConfig);
+                                folderFileListBreadcrumbPrimaryElement.appendChild(breadcrumbAllFilesElement);
+                                /* 设置顶部导航点击事件 */
+                                popsDOMUtils.on(breadcrumbAllFilesElement, "click", (event) => {
+                                    this.setBreadcrumbClickEvent(event, false, childConfig);
+                                });
+                                this.initFolderView(childConfig);
+                            }
+                            loadingMask.close();
                         }
-                        loadingMask.close();
-                    }
-                    /**
-                     * 设置文件点击事件
-                     * @param targetElement
-                     * @param _config_
-                     */
-                    function setFileClickEvent(targetElement, _config_) {
-                        popsDOMUtils.on(targetElement, "click", async function (event) {
-                            event?.preventDefault();
-                            event?.stopPropagation();
-                            event?.stopImmediatePropagation();
-                            let linkElement = targetElement.querySelector("a");
-                            if (typeof _config_.clickEvent === "function") {
-                                let downloadInfo = await _config_.clickEvent(event, _config_);
+                        /**
+                         * 文件的点击事件 - 下载文件
+                         * @param $target
+                         * @param dataConfig
+                         */
+                        async downloadFile(clickEvent, $row, dataConfig) {
+                            popsDOMUtils.preventEvent(clickEvent);
+                            let $link = $row.querySelector("a");
+                            if (typeof dataConfig.clickEvent === "function") {
+                                let downloadInfo = await dataConfig.clickEvent(clickEvent, dataConfig);
                                 if (downloadInfo != null &&
                                     typeof downloadInfo === "object" &&
                                     !Array.isArray(downloadInfo) &&
                                     typeof downloadInfo.url === "string" &&
                                     downloadInfo.url.trim() !== "") {
-                                    linkElement.setAttribute("href", downloadInfo.url);
-                                    linkElement.setAttribute("target", "_blank");
+                                    $link.setAttribute("href", downloadInfo.url);
+                                    $link.setAttribute("target", "_blank");
                                     if (downloadInfo.autoDownload) {
                                         if (downloadInfo.mode == null || downloadInfo.mode === "") {
                                             /* 未设置mode的话默认为aBlank */
@@ -5462,215 +5508,190 @@ System.register('pops', [], (function (exports) {
                                     }
                                 }
                             }
-                        });
-                    }
-                    /**
-                     * 对配置进行排序
-                     * @param folderDataConfigList
-                     * @param sortName 比较的属性，默认fileName
-                     * @param isDesc 是否降序，默认false（升序）
-                     */
-                    function sortFolderConfig(folderDataConfigList, sortName = "fileName", isDesc = false) {
-                        if (sortName === "fileName") {
-                            // 如果是以文件名排序，文件夹优先放前面
-                            let onlyFolderDataConfigList = folderDataConfigList.filter((value) => {
-                                return value.isFolder;
-                            });
-                            let onlyFileDataConfigList = folderDataConfigList.filter((value) => {
-                                return !value.isFolder;
-                            });
-                            // 文件夹排序
-                            onlyFolderDataConfigList.sort((leftConfig, rightConfig) => {
-                                let beforeVal = leftConfig[sortName].toString();
-                                let afterVal = rightConfig[sortName].toString();
-                                let compareVal = beforeVal.localeCompare(afterVal);
-                                if (isDesc) {
-                                    /* 降序 */
-                                    if (compareVal > 0) {
-                                        compareVal = -1;
+                        }
+                        /**
+                         * 对配置进行排序
+                         * @param folderDataConfigList
+                         * @param sortName 比较的属性，默认fileName
+                         * @param isDesc 是否降序，默认false（升序）
+                         */
+                        sortFolderConfig(folderDataConfigList, sortName = "fileName", isDesc = false) {
+                            if (sortName === "fileName") {
+                                // 如果是以文件名排序，文件夹优先放前面
+                                let onlyFolderDataConfigList = folderDataConfigList.filter((value) => {
+                                    return value.isFolder;
+                                });
+                                let onlyFileDataConfigList = folderDataConfigList.filter((value) => {
+                                    return !value.isFolder;
+                                });
+                                // 文件夹排序
+                                onlyFolderDataConfigList.sort((leftConfig, rightConfig) => {
+                                    let beforeVal = leftConfig[sortName].toString();
+                                    let afterVal = rightConfig[sortName].toString();
+                                    let compareVal = beforeVal.localeCompare(afterVal);
+                                    if (isDesc) {
+                                        /* 降序 */
+                                        if (compareVal > 0) {
+                                            compareVal = -1;
+                                        }
+                                        else if (compareVal < 0) {
+                                            compareVal = 1;
+                                        }
                                     }
-                                    else if (compareVal < 0) {
-                                        compareVal = 1;
+                                    return compareVal;
+                                });
+                                // 文件名排序
+                                onlyFileDataConfigList.sort((leftConfig, rightConfig) => {
+                                    let beforeVal = leftConfig[sortName].toString();
+                                    let afterVal = rightConfig[sortName].toString();
+                                    let compareVal = beforeVal.localeCompare(afterVal);
+                                    if (isDesc) {
+                                        /* 降序 */
+                                        if (compareVal > 0) {
+                                            compareVal = -1;
+                                        }
+                                        else if (compareVal < 0) {
+                                            compareVal = 1;
+                                        }
                                     }
-                                }
-                                return compareVal;
-                            });
-                            // 文件名排序
-                            onlyFileDataConfigList.sort((leftConfig, rightConfig) => {
-                                let beforeVal = leftConfig[sortName].toString();
-                                let afterVal = rightConfig[sortName].toString();
-                                let compareVal = beforeVal.localeCompare(afterVal);
+                                    return compareVal;
+                                });
                                 if (isDesc) {
-                                    /* 降序 */
-                                    if (compareVal > 0) {
-                                        compareVal = -1;
-                                    }
-                                    else if (compareVal < 0) {
-                                        compareVal = 1;
-                                    }
+                                    // 降序，文件夹在下面
+                                    return [...onlyFileDataConfigList, ...onlyFolderDataConfigList];
+                                }
+                                else {
+                                    // 升序，文件夹在上面
+                                    return [...onlyFolderDataConfigList, ...onlyFileDataConfigList];
                                 }
-                                return compareVal;
-                            });
-                            if (isDesc) {
-                                // 降序，文件夹在下面
-                                return [...onlyFileDataConfigList, ...onlyFolderDataConfigList];
                             }
                             else {
-                                // 升序，文件夹在上面
-                                return [...onlyFolderDataConfigList, ...onlyFileDataConfigList];
-                            }
-                        }
-                        else {
-                            folderDataConfigList.sort((beforeConfig, afterConfig) => {
-                                let beforeVal = beforeConfig[sortName];
-                                let afterVal = afterConfig[sortName];
-                                if (sortName === "fileSize") {
-                                    /* 文件大小，进行Float转换 */
-                                    beforeVal = parseFloat(beforeVal.toString());
-                                    afterVal = parseFloat(afterVal.toString());
-                                }
-                                else if (sortName === "latestTime") {
-                                    /* 文件时间 */
-                                    beforeVal = new Date(beforeVal).getTime();
-                                    afterVal = new Date(afterVal).getTime();
-                                }
-                                if (beforeVal > afterVal) {
-                                    if (isDesc) {
-                                        /* 降序 */
-                                        return -1;
+                                folderDataConfigList.sort((beforeConfig, afterConfig) => {
+                                    let beforeVal = beforeConfig[sortName];
+                                    let afterVal = afterConfig[sortName];
+                                    if (sortName === "fileSize") {
+                                        /* 文件大小，进行Float转换 */
+                                        beforeVal = parseFloat(beforeVal.toString());
+                                        afterVal = parseFloat(afterVal.toString());
                                     }
-                                    else {
-                                        return 1;
+                                    else if (sortName === "latestTime") {
+                                        /* 文件时间 */
+                                        beforeVal = new Date(beforeVal).getTime();
+                                        afterVal = new Date(afterVal).getTime();
                                     }
-                                }
-                                else if (beforeVal < afterVal) {
-                                    if (isDesc) {
-                                        /* 降序 */
-                                        return 1;
+                                    if (beforeVal > afterVal) {
+                                        if (isDesc) {
+                                            /* 降序 */
+                                            return -1;
+                                        }
+                                        else {
+                                            return 1;
+                                        }
+                                    }
+                                    else if (beforeVal < afterVal) {
+                                        if (isDesc) {
+                                            /* 降序 */
+                                            return 1;
+                                        }
+                                        else {
+                                            return -1;
+                                        }
                                     }
                                     else {
-                                        return -1;
+                                        return 0;
                                     }
+                                });
+                                return folderDataConfigList;
+                            }
+                        }
+                        /**
+                         * 添加文件夹/文件行元素
+                         * @param dataConfig 配置
+                         */
+                        initFolderView(dataConfig) {
+                            // 先对文件夹、文件进行排序
+                            this.sortFolderConfig(dataConfig, config.sort.name, config.sort.isDesc);
+                            dataConfig.forEach((item) => {
+                                if (item.isFolder) {
+                                    let { folderElement, fileNameElement } = popsUtils.isPhone()
+                                        ? this.createFolderRowElementByMobile(item.fileName, "", "", true)
+                                        : this.createFolderRowElement(item.fileName, "", "", true);
+                                    // 文件夹 - 点击事件
+                                    popsDOMUtils.on(fileNameElement, "click", (event) => {
+                                        // 进入文件夹
+                                        this.enterFolder(event, item);
+                                    });
+                                    folderListBodyElement.appendChild(folderElement);
                                 }
                                 else {
-                                    return 0;
+                                    let { folderElement, fileNameElement } = popsUtils.isPhone()
+                                        ? this.createFolderRowElementByMobile(item.fileName, item.latestTime, item.fileSize, false)
+                                        : this.createFolderRowElement(item.fileName, item.latestTime, item.fileSize, false);
+                                    // 文件 - 点击事件
+                                    popsDOMUtils.on(fileNameElement, "click", (event) => {
+                                        // 下载文件
+                                        this.downloadFile(event, fileNameElement, item);
+                                    });
+                                    folderListBodyElement.appendChild(folderElement);
                                 }
                             });
-                            return folderDataConfigList;
                         }
-                    }
-                    /**
-                     * 添加元素
-                     * @param _config_
-                     */
-                    function addFolderElement(_config_) {
-                        sortFolderConfig(_config_, config.sort.name, config.sort.isDesc);
-                        _config_.forEach((item) => {
-                            if (item["isFolder"]) {
-                                let { folderELement, fileNameElement } = popsUtils.isPhone()
-                                    ? createMobileFolderRowElement(item["fileName"], "", "", true)
-                                    : createFolderRowElement(item["fileName"], "", "", true);
-                                popsDOMUtils.on(fileNameElement, "click", (event) => {
-                                    refreshFolderInfoClickEvent(event, item);
-                                });
-                                folderListBodyElement.appendChild(folderELement);
+                        /**
+                         * 移除所有箭头的被访问状态
+                         */
+                        removeArrowActiveStatus() {
+                            [
+                                ...Array.from(folderListSortFileNameElement.querySelectorAll(".pops-folder-icon-active")),
+                                ...Array.from(folderListSortLatestTimeElement.querySelectorAll(".pops-folder-icon-active")),
+                                ...Array.from(folderListSortFileSizeElement.querySelectorAll(".pops-folder-icon-active")),
+                            ].forEach((ele) => ele.classList.remove("pops-folder-icon-active"));
+                        }
+                        /**
+                         * 修改导航箭头的状态
+                         */
+                        changeArrowActive(arrowUp, arrowDown, isDesc) {
+                            this.removeArrowActiveStatus();
+                            if (isDesc) {
+                                arrowDown.classList.add("pops-folder-icon-active");
                             }
                             else {
-                                let { folderELement, fileNameElement } = popsUtils.isPhone()
-                                    ? createMobileFolderRowElement(item["fileName"], item.latestTime, item.fileSize, false)
-                                    : createFolderRowElement(item["fileName"], item.latestTime, item.fileSize, false);
-                                setFileClickEvent(fileNameElement, item);
-                                folderListBodyElement.appendChild(folderELement);
+                                arrowUp.classList.add("pops-folder-icon-active");
                             }
-                        });
-                    }
-                    addFolderElement(config.folder);
-                    /* 将数据存到全部文件的属性_config_中 */
-                    let allFilesElement = folderFileListBreadcrumbPrimaryElement.querySelector(".pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child");
-                    allFilesElement._config_ = config.folder;
-                    /* 设置点击顶部的全部文件事件 */
-                    popsDOMUtils.on(allFilesElement, "click", (event) => {
-                        breadcrumbAllFilesElementClickEvent(event, true, config.folder);
-                    });
-                    /* 移除所有的当前排序的arrow */
-                    function removeAllArrowActive() {
-                        [
-                            ...Array.from(folderListSortFileNameElement.querySelectorAll(".pops-folder-icon-active")),
-                            ...Array.from(folderListSortLatestTimeElement.querySelectorAll(".pops-folder-icon-active")),
-                            ...Array.from(folderListSortFileSizeElement.querySelectorAll(".pops-folder-icon-active")),
-                        ].forEach((ele) => ele.classList.remove("pops-folder-icon-active"));
-                    }
-                    /* 设置当前的排序的arrow */
-                    function changeArrowActive(arrowUp, arrowDown, isDesc) {
-                        removeAllArrowActive();
-                        if (isDesc) {
-                            arrowDown.classList.add("pops-folder-icon-active");
                         }
-                        else {
-                            arrowUp.classList.add("pops-folder-icon-active");
-                        }
-                    }
-                    /**
-                     * 排序按钮的点击事件
-                     * @param {PointerEvent} target
-                     * @param {HTMLElement} event
-                     * @param {string} sortName
-                     */
-                    function arrowSortClickEvent(target, event, sortName) {
-                        if (!event["notChangeSortRule"]) {
-                            config.sort.name = sortName;
-                            config.sort.isDesc = !config.sort.isDesc;
-                        }
-                        let arrowUp = target.querySelector(".pops-folder-icon-arrow-up");
-                        let arrowDown = target.querySelector(".pops-folder-icon-arrow-down");
-                        changeArrowActive(arrowUp, arrowDown, config.sort.isDesc);
-                        if (typeof config.sort.callback === "function" &&
-                            config.sort.callback(target, event, config.sort.name, config.sort.isDesc)) {
-                            return;
+                        /**
+                         * 排序按钮的点击事件
+                         * @param target
+                         * @param event
+                         * @param sortName
+                         */
+                        arrowToSortFolderInfoView(target, event, sortName) {
+                            const notChangeSortRule = Reflect.get(event, "notChangeSortRule");
+                            if (!notChangeSortRule) {
+                                config.sort.name = sortName;
+                                config.sort.isDesc = !config.sort.isDesc;
+                            }
+                            let arrowUp = target.querySelector(".pops-folder-icon-arrow-up");
+                            let arrowDown = target.querySelector(".pops-folder-icon-arrow-down");
+                            this.changeArrowActive(arrowUp, arrowDown, config.sort.isDesc);
+                            if (typeof config.sort.callback === "function" &&
+                                config.sort.callback(target, event, config.sort.name, config.sort.isDesc)) {
+                                return;
+                            }
+                            let childrenList = [];
+                            Array.from(folderListBodyElement.children).forEach((trElement) => {
+                                let __value__ = Reflect.get(trElement, "__value__");
+                                Reflect.set(__value__, "target", trElement);
+                                childrenList.push(__value__);
+                            });
+                            let sortedConfigList = this.sortFolderConfig(childrenList, config.sort.name, config.sort.isDesc);
+                            sortedConfigList.forEach((item) => {
+                                folderListBodyElement.appendChild(item.target);
+                            });
                         }
-                        let childrenList = [];
-                        Array.from(folderListBodyElement.children).forEach((trElement) => {
-                            let __value__ = trElement["__value__"];
-                            __value__["target"] = trElement;
-                            childrenList.push(__value__);
-                        });
-                        let sortedConfigList = sortFolderConfig(childrenList, config.sort.name, config.sort.isDesc);
-                        sortedConfigList.forEach((item) => {
-                            folderListBodyElement.appendChild(item.target);
-                        });
-                    }
-                    /* 设置当前排序的图标按钮 */
-                    popsDOMUtils.on(folderListSortFileNameElement.closest("th"), "click", function (event) {
-                        arrowSortClickEvent(folderListSortFileNameElement, event, "fileName");
-                    }, {
-                        capture: true,
-                    });
-                    popsDOMUtils.on(folderListSortLatestTimeElement.closest("th"), "click", void 0, function (event) {
-                        arrowSortClickEvent(folderListSortLatestTimeElement, event, "latestTime");
-                    }, {
-                        capture: true,
-                    });
-                    popsDOMUtils.on(folderListSortFileSizeElement.closest("th"), "click", void 0, function (event) {
-                        arrowSortClickEvent(folderListSortFileSizeElement, event, "fileSize");
-                    }, {
-                        capture: true,
-                    });
-                    /* 设置默认触发的arrow */
-                    if (config.sort.name === "fileName") {
-                        popsDOMUtils.trigger(folderListSortFileNameElement, "click", {
-                            notChangeSortRule: true,
-                        });
-                    }
-                    else if (config.sort.name === "latestTime") {
-                        popsDOMUtils.trigger(folderListSortLatestTimeElement, "click", {
-                            notChangeSortRule: true,
-                        });
-                    }
-                    else if (config.sort.name === "fileSize") {
-                        popsDOMUtils.trigger(folderListSortFileSizeElement, "click", {
-                            notChangeSortRule: true,
-                        });
                     }
+                    const popsFolder = new PopsFolder();
+                    popsFolder.init();
+                    Reflect.set($pops, "data-pops-folder", popsFolder);
                     /* 拖拽 */
                     if (config.drag) {
                         PopsInstanceUtils.drag($pops, {
@@ -11015,7 +11036,7 @@ System.register('pops', [], (function (exports) {
                             let $el = popsDOMUtils.createElement("div", {
                                 className: `pops pops-${popsType}-search-suggestion`,
                                 innerHTML: /*html*/ `
-						<style>
+						<style type="text/css">
 							.pops-${popsType}-animation{
 								-moz-animation: searchSelectFalIn 0.5s 1 linear;
 								-webkit-animation: searchSelectFalIn 0.5s 1 linear;
@@ -11023,7 +11044,7 @@ System.register('pops', [], (function (exports) {
 								-ms-animation: searchSelectFalIn 0.5s 1 linear;
 							}
 						</style>
-						<style>
+						<style type="text/css">
 							.pops-${popsType}-search-suggestion-arrow{
 								--suggestion-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
 								--suggestion-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
@@ -11089,7 +11110,7 @@ System.register('pops', [], (function (exports) {
 								content: "";
 							}
 						</style>
-						<style data-dynamic="true">
+						<style type="text/css" data-dynamic="true">
 							${this.getDynamicCSS()}
 						</style>
 						<style>
@@ -11111,6 +11132,9 @@ System.register('pops', [], (function (exports) {
 								transform: scaleY(1);
 							}
 						</style>
+						<style type="text/css" data-user-css>
+							${config.style || ""}
+						</style>
 						<ul class="pops-${popsType}-search-suggestion-hint ${PopsCommonCSSClassName.userSelectNone}">${config.toSearhNotResultHTML}</ul>
 						${config.useArrow ? /*html*/ `<div class="pops-${popsType}-search-suggestion-arrow"></div>` : ""}
          				 `,
@@ -11627,7 +11651,7 @@ System.register('pops', [], (function (exports) {
                 /** 配置 */
                 config = {
                     /** 版本号 */
-                    version: "2025.8.17",
+                    version: "2025.9.2",
                     cssText: PopsCSS,
                     /** icon图标的svg代码 */
                     iconSVG: PopsIcon.$data,