@whitesev/pops 2.3.6 → 2.3.8

package/dist/index.esm.js

@@ -1152,6 +1152,7 @@ class PopsDOMUtilsEvent {
      * })
      */
     ready(callback) {
+        const that = this;
         if (typeof callback !== "function") {
             return;
         }
@@ -1197,7 +1198,7 @@ class PopsDOMUtilsEvent {
         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);
             }
         }
         /**
@@ -1206,7 +1207,7 @@ class PopsDOMUtilsEvent {
         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()) {
@@ -1488,9 +1489,7 @@ class PopsDOMUtilsEvent {
                 eventNameList = [eventNameList];
             }
             eventNameList.forEach((eventName) => {
-                element.addEventListener(eventName, stopEvent, {
-                    capture: Boolean(capture),
-                });
+                this.on(element, eventName, stopEvent, { capture: Boolean(capture) });
             });
         }
     }
@@ -5139,57 +5138,101 @@ const PopsFolder = {
         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">
@@ -5199,80 +5242,84 @@ const PopsFolder = {
 					</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>
@@ -5281,139 +5328,138 @@ const PopsFolder = {
 					</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 */
@@ -5457,215 +5503,190 @@ const PopsFolder = {
                         }
                     }
                 }
-            });
-        }
-        /**
-         * 对配置进行排序
-         * @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, {
@@ -11010,7 +11031,7 @@ const PopsSearchSuggestion = {
                 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;
@@ -11018,7 +11039,7 @@ const PopsSearchSuggestion = {
 								-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);
@@ -11084,7 +11105,7 @@ const PopsSearchSuggestion = {
 								content: "";
 							}
 						</style>
-						<style data-dynamic="true">
+						<style type="text/css" data-dynamic="true">
 							${this.getDynamicCSS()}
 						</style>
 						<style>
@@ -11106,6 +11127,9 @@ const PopsSearchSuggestion = {
 								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>` : ""}
          				 `,
@@ -11622,7 +11646,7 @@ class Pops {
     /** 配置 */
     config = {
         /** 版本号 */
-        version: "2025.8.17",
+        version: "2025.9.2",
         cssText: PopsCSS,
         /** icon图标的svg代码 */
         iconSVG: PopsIcon.$data,