Greasy Fork is available in English.
将动漫花园的文件列表转换为树状视图，支持搜索、智能展开等功能
// ==UserScript== // @name 动漫花园树状显示 // @name:zh-CN 动漫花园文件列表树状显示 // @name:en DMHY Tree View // @namespace https://github.com/xkbkx5904/dmhy-tree-view // @version 0.5.3 // @description 将动漫花园的文件列表转换为树状视图，支持搜索、智能展开等功能 // @description:zh-CN 将动漫花园的文件列表转换为树状视图，支持搜索、智能展开等功能 // @description:en Convert DMHY file list into a tree view with search and smart collapse features // @author xkbkx5904 // @license GPL-3.0 // @homepage https://github.com/xkbkx5904/dmhy-tree-view // @supportURL https://github.com/xkbkx5904/dmhy-tree-view/issues // @match *://share.dmhy.org/topics/view/* // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/jstree.min.js // @resource customCSS https://cdn.jsdelivr.net/npm/[email protected]/dist/themes/default/style.min.css // @icon https://share.dmhy.org/favicon.ico // @grant GM_addStyle // @grant GM_getResourceText // @run-at document-end // @originalAuthor TautCony // @originalURL http://greasyfork.icu/zh-CN/scripts/26430-dmhy-tree-view // ==/UserScript== /* 更新日志 * v0.5.3 * - 刚刚更新了日志但是代码复制了旧版本的，幽默了一下，更新版本号从新推送一下代码 * * v0.5.2 * - 修复了当文件无法提取到文件名时，文件大小被识别为文件名的问题 * - 修复了智能展开模式下，单层级目录没有自动打开的问题 * * v0.5.1 * - 修复智能模式下单层目录展开/折叠的问题 * * v0.5.0 * - 添加文件名和大小排序功能 * - 优化搜索性能 * - 修复搜索和排序功能的冲突问题 * - 添加动漫花园网站图标 * * v0.4.0 * - 初始版本发布 * - 实现树状显示功能 * - 添加搜索功能 * - 添加智能展开功能 */ // 文件类型图标映射 const ICONS = { audio: "/images/icon/mp3.gif", bmp: "/images/icon/bmp.gif", image: "/images/icon/jpg.gif", png: "/images/icon/png.gif", rar: "/images/icon/rar.gif", text: "/images/icon/txt.gif", unknown: "/images/icon/unknown.gif", video: "/images/icon/mp4.gif" }; // 文件扩展名分类 const FILE_TYPES = { audio: ["flac", "aac", "wav", "mp3", "m4a", "mka"], bmp: ["bmp"], image: ["jpg", "jpeg", "webp"], png: ["png", "gif"], rar: ["rar", "zip", "7z", "tar", "gz"], text: ["txt", "log", "cue", "ass", "ssa", "srt", "doc", "docx", "xls", "xlsx", "pdf"], video: ["mkv", "mp4", "avi", "wmv", "flv", "m2ts"] }; // 设置样式 const setupCSS = () => { GM_addStyle(GM_getResourceText("customCSS")); GM_addStyle(` .jstree-node, .jstree-default .jstree-icon { background-image: url(https://cdn.jsdelivr.net/npm/[email protected]/dist/themes/default/32px.png); } .tree-container { background: #fff; border: 2px solid; border-color: #404040 #dfdfdf #dfdfdf #404040; padding: 5px; } .control-panel { background: #f0f0f0; border-bottom: 1px solid #ccc; padding: 5px; display: flex; align-items: center; gap: 10px; } .control-panel-left { display: flex; align-items: center; gap: 10px; } .control-panel-right { margin-left: auto; display: flex; align-items: center; } #search_input { border: 1px solid #ccc; padding: 2px 5px; width: 200px; } #switch { padding: 2px 5px; cursor: pointer; } #file_tree { padding: 5px; max-height: 600px; overflow: auto; } .filesize { padding-left: 8px; color: #666; } .smart-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; } .smart-toggle input { margin: 0; } .sort-controls { display: flex; align-items: center; gap: 5px; } .sort-btn { padding: 2px 8px; cursor: pointer; border: 1px solid #ccc; background: #f8f8f8; display: flex; align-items: center; gap: 4px; } .sort-btn.active { background: #e0e0e0; } .sort-direction { display: inline-block; width: 12px; } `); }; // 树节点基础类 class TreeNode { constructor(name) { this.name = name; this.length = 0; this.childNode = new Map(); this._cache = new Map(); } // 插入节点 insert(path, size) { let currentNode = this; for (const node of path) { if (!currentNode.childNode.has(node)) { currentNode.childNode.set(node, new TreeNode(node)); } currentNode = currentNode.childNode.get(node); } currentNode.length = this.toLength(size); return currentNode; } // 转换为显示文本 toString() { const size = this.childNode.size > 0 ? this.calculateTotalSize() : this.length; return `<span class="filename">${this.name}</span><span class="filesize">${this.toSize(size)}</span>`; } // 计算总大小 calculateTotalSize() { if (this._cache.has('totalSize')) return this._cache.get('totalSize'); let total = this.length; for (const node of this.childNode.values()) { total += node.childNode.size === 0 ? node.length : node.calculateTotalSize(); } this._cache.set('totalSize', total); return total; } // 转换为jstree对象 toObject() { if (this._cache.has('object')) return this._cache.get('object'); const ret = { text: this.toString(), children: [], state: { opened: false } }; // 分别处理文件夹和文件 const folders = []; const files = []; for (const [, value] of this.childNode) { if (value.childNode.size === 0) { files.push({ icon: value.icon, length: value.length, text: value.toString() }); } else { const inner = value.toObject(); folders.push({ ...inner, text: `<span class="filename">${value.name}</span><span class="filesize">${this.toSize(value.calculateTotalSize())}</span>`, state: { opened: false } }); } } ret.children = [...folders, ...files]; this._cache.set('object', ret); return ret; } // 获取文件扩展名 get ext() { if (this._ext !== undefined) return this._ext; const dotIndex = this.name.lastIndexOf("."); this._ext = dotIndex > 0 ? this.name.substr(dotIndex + 1).toLowerCase() : ""; return this._ext; } // 获取文件图标 get icon() { if (this._icon !== undefined) return this._icon; this._icon = ICONS.unknown; for (const [type, extensions] of Object.entries(FILE_TYPES)) { if (extensions.includes(this.ext)) { this._icon = ICONS[type]; break; } } return this._icon; } // 转换文件大小字符串为字节数 toLength(size) { if (!size) return -1; const match = size.toLowerCase().match(/^([\d.]+)\s*([kmgt]?b(?:ytes)?)$/); if (!match) return -1; const [, value, unit] = match; const factors = { b: 0, bytes: 0, kb: 10, mb: 20, gb: 30, tb: 40 }; return parseFloat(value) * Math.pow(2, factors[unit] || 0); } // 转换字节数为可读大小 toSize(length) { if (length < 0) return ""; const units = [[40, "TiB"], [30, "GiB"], [20, "MiB"], [10, "KiB"], [0, "Bytes"]]; for (const [factor, unit] of units) { if (length >= Math.pow(2, factor)) { return (length / Math.pow(2, factor)).toFixed(unit === "Bytes" ? 0 : 3) + unit; } } return "0 Bytes"; } } // 查找树中第一个分叉节点 function findFirstForkNode(tree) { const findForkInNode = (nodeId) => { const node = tree.get_node(nodeId); if (!node || !node.children) return null; if (node.children.length > 1) return node; if (node.children.length === 1) return findForkInNode(node.children[0]); return null; }; return findForkInNode('#'); } // 获取到指定节点的路径 function getPathToNode(tree, targetNode) { const path = []; let currentNode = targetNode; while (currentNode.id !== '#') { path.unshift(currentNode.id); currentNode = tree.get_node(tree.get_parent(currentNode)); } return path; } // 获取第一个分叉点及其路径信息 function getFirstForkInfo(tree) { const firstFork = findFirstForkNode(tree); if (!firstFork) return null; const pathToFork = getPathToNode(tree, firstFork); const protectedNodes = new Set(pathToFork); protectedNodes.add(firstFork.id); return { fork: firstFork, pathToFork, protectedNodes }; } // 智能折叠：只折叠分叉点以下的节点 function smartCollapse(tree, treeDepth) { // 如果是单层目录，直接使用普通折叠 if (treeDepth <= 1) { tree.close_all(); return; } const forkInfo = getFirstForkInfo(tree); if (!forkInfo) return; // 获取所有打开的节点 const openNodes = tree.get_json('#', { flat: true }) .filter(node => tree.is_open(node.id)) .map(node => node.id); // 只折叠不在保护名单中的节点 openNodes.forEach(nodeId => { if (!forkInfo.protectedNodes.has(nodeId)) { tree.close_node(nodeId); } }); } // 检查文件树的最大层级 function checkTreeDepth(tree) { const getNodeDepth = (nodeId, currentDepth = 0) => { const node = tree.get_node(nodeId); // 如果节点不存在，或者是文件节点（没有子节点），返回当前深度 if (!node || !node.children || node.children.length === 0) { return currentDepth - 1; // 文件节点不计入深度 } return Math.max(...node.children.map(childId => getNodeDepth(childId, currentDepth + 1) )); }; return Math.max(0, getNodeDepth('#')); } // 主程序入口 (() => { // 设置样式 setupCSS(); // 创建树数据 const data = new TreeNode($(".topic-title > h3").text()); const pattern = /^(.+?) (\d+(?:\.\d+)?[TGMK]?B(?:ytes)?)$/; // 解析文件列表 let unnamedCounter = 1; // 添加计数器用于区分未命名文件 $(".file_list:first > ul li").each(function() { const text = $(this).text().trim(); const line = text.replace(/\t+/i, "\t").split("\t"); if (line.length === 2) { // 标准格式：文件名和大小被制表符分隔 data.insert(line[0].split("/"), line[1]); } else if (line.length === 1) { // 尝试解析可能的文件名和大小格式 const match = pattern.exec(text); if (match) { // 成功匹配到文件名和大小 data.insert(match[1].split("/"), match[2]); } else { // 检查是否只是一个文件大小 const sizeMatch = /^\d+(?:\.\d+)?[TGMK]?B(?:ytes)?$/.test(text); if (sizeMatch) { // 如果只是文件大小，使用带编号的占位符作为文件名 data.insert([`unknown (${unnamedCounter++})`], text); } else { // 如果不是文件大小，则视为纯文件名 data.insert(text.split("/"), ""); } } } }); // 创建UI const fragment = document.createDocumentFragment(); const treeContainer = $('<div class="tree-container"></div>').appendTo(fragment); const controlPanel = $('<div class="control-panel"></div>') .append($('<div class="control-panel-left"></div>') .append('<input type="text" id="search_input" placeholder="搜索文件..." />') .append('<button id="switch">展开全部</button>') .append($('<div class="sort-controls"></div>') .append('<button class="sort-btn" data-sort="name">名称<span class="sort-direction">↑</span></button>') .append('<button class="sort-btn" data-sort="size">大小<span class="sort-direction">↓</span></button>') ) ) .append($('<div class="control-panel-right"></div>') .append('<label class="smart-toggle"><input type="checkbox" id="smart_mode" />智能展开</label>') ) .appendTo(treeContainer); const fileTree = $('<div id="file_tree"></div>').appendTo(treeContainer); $('.file_list:first').replaceWith(fragment); // 创建树实例 const treeInstance = fileTree.jstree({ core: { data: data.toObject(), themes: { variant: "large" } }, plugins: ["search", "wholerow", "contextmenu"], contextmenu: { select_node: false, show_at_node: false, items: { getText: { label: "复制", action: selected => { const text = selected.reference.find(".filename").text(); navigator.clipboard.writeText(text); } } } } }); // 绑定事件 treeInstance.on("ready.jstree", function() { const tree = treeInstance.jstree(true); const isSmartMode = localStorage.getItem('dmhy_smart_mode') !== 'false'; if (isSmartMode) { const treeDepth = checkTreeDepth(tree); if (treeDepth > 1) { // 多层目录时执行智能展开 const firstFork = findFirstForkNode(tree); if (firstFork) { const pathToFork = getPathToNode(tree, firstFork); pathToFork.forEach(nodeId => tree.open_node(nodeId)); } } else { // 单层目录时全部展开 tree.open_all(); } } }); treeInstance.on("loaded.jstree", function() { const tree = treeInstance.jstree(true); let isExpanded = false; let isSmartMode = localStorage.getItem('dmhy_smart_mode') !== 'false'; let previousState = null; let hasSearched = false; let searchTimeout = null; let treeNodes = null; // 1. 更新展开/折叠按钮状态的函数 const updateSwitchButton = () => { $("#switch").text(isExpanded ? "折叠全部" : "展开全部"); }; // 2. 绑定展开/折叠按钮事件 $("#switch").click(function() { isExpanded = !isExpanded; const treeDepth = checkTreeDepth(tree); if (isSmartMode) { if (isExpanded) { tree.open_all(); } else { if (treeDepth > 1) { // 多层目录时使用智能折叠 smartCollapse(tree, treeDepth); } else { // 单层目录时全部折叠 tree.close_all(); } } } else { if (isExpanded) { tree.open_all(); } else { tree.close_all(); } } updateSwitchButton(); }); // 3. 绑定智能模式切换事件 $("#smart_mode").prop('checked', isSmartMode).change(function() { isSmartMode = this.checked; localStorage.setItem('dmhy_smart_mode', isSmartMode); isExpanded = false; localStorage.setItem('dmhy_tree_expanded', isExpanded); if (isSmartMode) { tree.close_all(); const firstFork = findFirstForkNode(tree); if (firstFork) { const pathToFork = getPathToNode(tree, firstFork); pathToFork.forEach(nodeId => tree.open_node(nodeId)); } } else { tree.close_all(); } updateSwitchButton(); }); // 4. 初始化排序 const rootNode = tree.get_node('#'); $('.sort-btn[data-sort="name"]').addClass('active').find('.sort-direction').text('↑'); const sortNodes = (node, sortType, isAsc) => { if (node.children && node.children.length) { node.children.sort((a, b) => { const nodeA = tree.get_node(a); const nodeB = tree.get_node(b); // 文件夹始终排在前面 const isAFolder = nodeA.children.length > 0; const isBFolder = nodeB.children.length > 0; if (isAFolder !== isBFolder) { return isAFolder ? -1 : 1; } let result = 0; if (sortType === 'size') { const sizeA = parseFloat(nodeA.text.match(/[\d.]+(?=[TGMK]iB|Bytes)/)) || 0; const sizeB = parseFloat(nodeB.text.match(/[\d.]+(?=[TGMK]iB|Bytes)/)) || 0; const unitA = nodeA.text.match(/[TGMK]iB|Bytes/)?.[0] || ''; const unitB = nodeB.text.match(/[TGMK]iB|Bytes/)?.[0] || ''; const units = { 'TiB': 4, 'GiB': 3, 'MiB': 2, 'KiB': 1, 'Bytes': 0 }; const unitCompare = (units[unitA] || 0) - (units[unitB] || 0); result = unitCompare !== 0 ? unitCompare : sizeA - sizeB; } else { const nameA = nodeA.text.match(/class="filename">([^<]+)/)?.[1] || ''; const nameB = nodeB.text.match(/class="filename">([^<]+)/)?.[1] || ''; result = nameA.localeCompare(nameB, undefined, { numeric: true }); } return isAsc ? result : -result; }); node.children.forEach(childId => { sortNodes(tree.get_node(childId), sortType, isAsc); }); } }; // 执行初始排序（按文件名升序） sortNodes(rootNode, 'name', true); tree.redraw(true); // 绑定排序按钮事件 $('.sort-btn').on('click', function() { const $this = $(this); const $direction = $this.find('.sort-direction'); const sortType = $this.data('sort'); if ($this.hasClass('active')) { $direction.text($direction.text() === '↑' ? '↓' : '↑'); } else { $('.sort-btn').removeClass('active').find('.sort-direction').text('↓'); $this.addClass('active'); } const isAsc = $direction.text() === '↑'; sortNodes(rootNode, sortType, isAsc); tree.redraw(true); }); // 5. 初始化搜索功能 treeNodes = tree.get_json('#', { flat: true }); // 缓存已排序的节点 const searchDebounceTime = 250; $('#search_input').keyup(function() { if (searchTimeout) { clearTimeout(searchTimeout); } searchTimeout = setTimeout(() => { const searchText = $(this).val().toLowerCase(); if (searchText) { if (!hasSearched) { previousState = { isExpanded, openNodes: treeNodes.filter(node => tree.is_open(node.id)) .map(node => node.id) }; hasSearched = true; } const matchedNodes = new Set(); treeNodes.forEach(node => { const nodeText = tree.get_text(node.id).toLowerCase(); if (nodeText.includes(searchText)) { matchedNodes.add(node.id); let parent = tree.get_parent(node.id); while (parent !== '#') { matchedNodes.add(parent); parent = tree.get_parent(parent); } } }); const operations = []; treeNodes.forEach(node => { if (matchedNodes.has(node.id)) { operations.push(() => { tree.show_node(node.id); tree.open_node(node.id); }); } else { operations.push(() => tree.hide_node(node.id)); } }); const batchSize = 50; const executeBatch = (startIndex) => { const endIndex = Math.min(startIndex + batchSize, operations.length); for (let i = startIndex; i < endIndex; i++) { operations[i](); } if (endIndex < operations.length) { requestAnimationFrame(() => executeBatch(endIndex)); } }; executeBatch(0); isExpanded = true; } else { if (previousState) { tree.show_all(); tree.close_all(); const restoreNodes = () => { const batch = previousState.openNodes.splice(0, 50); batch.forEach(nodeId => tree.open_node(nodeId, false)); if (previousState.openNodes.length > 0) { requestAnimationFrame(restoreNodes); } }; restoreNodes(); isExpanded = previousState.isExpanded; previousState = null; hasSearched = false; } } updateSwitchButton(); }, searchDebounceTime); }); }); })();