// 路径导航模块(面包屑导航) class PathNavigator { constructor(options) { // 面包屑容器元素 this.container = options.container; // 根目录名称 this.rootName = options.rootName || '全部文件'; // 当前路径 this.currentPath = ''; // 路径变化回调 this.onNavigate = options.onNavigate || null; this.init(); } init() { this.bindEvents(); this.render(); } bindEvents() { // 面包屑点击事件 this.container.addEventListener('click', (e) => { if (e.target.classList.contains('breadcrumb-item')) { const path = e.target.dataset.path; this.navigateTo(path); } }); } // 导航到指定路径 navigateTo(path) { if (this.currentPath === path) return; this.currentPath = path; this.render(); // 触发回调 if (this.onNavigate) { this.onNavigate(path); } } // 获取当前路径 getPath() { return this.currentPath; } // 设置路径(不触发回调,仅更新显示) setPath(path) { this.currentPath = path; this.render(); } // 渲染面包屑 render() { this.container.innerHTML = ''; // 添加根目录 const rootItem = document.createElement('span'); rootItem.className = 'breadcrumb-item'; rootItem.textContent = this.rootName; rootItem.dataset.path = ''; if (this.currentPath === '') { rootItem.classList.add('active'); } this.container.appendChild(rootItem); // 添加路径中的各个部分 if (this.currentPath) { const parts = this.currentPath.split('/').filter(p => p); let accumulatedPath = ''; parts.forEach((part, index) => { accumulatedPath += part; const item = document.createElement('span'); item.className = 'breadcrumb-item'; item.textContent = part; item.dataset.path = accumulatedPath; if (index === parts.length - 1) { item.classList.add('active'); } this.container.appendChild(item); if (index < parts.length - 1) { accumulatedPath += '/'; } }); } } // 返回上一级 goUp() { if (!this.currentPath) return; const parts = this.currentPath.split('/').filter(p => p); parts.pop(); const parentPath = parts.join('/'); this.navigateTo(parentPath); } // 进入子目录 goInto(folderName) { const newPath = this.currentPath ? `${this.currentPath}/${folderName}` : folderName; this.navigateTo(newPath); } // 回到根目录 goRoot() { this.navigateTo(''); } // 获取当前目录名 getCurrentFolderName() { if (!this.currentPath) return this.rootName; const parts = this.currentPath.split('/').filter(p => p); return parts[parts.length - 1] || this.rootName; } // 获取父目录路径 getParentPath() { if (!this.currentPath) return ''; const parts = this.currentPath.split('/').filter(p => p); parts.pop(); return parts.join('/'); } // 判断是否在根目录 isAtRoot() { return this.currentPath === ''; } }