path.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. // 路径导航模块(复制自 client/js/disk/path.js)
  2. class ResourceManagerPathNavigator {
  3. constructor(options = {}) {
  4. this.container = options.container;
  5. this.rootName = options.rootName || '全部文件';
  6. this.onNavigate = options.onNavigate || (() => {});
  7. this.currentPath = '';
  8. this.pathParts = [];
  9. this.init();
  10. }
  11. init() {
  12. this.render();
  13. this.bindEvents();
  14. }
  15. bindEvents() {
  16. this.container.addEventListener('click', (e) => {
  17. const item = e.target.closest('.breadcrumb-item');
  18. if (!item) return;
  19. const path = item.dataset.path || '';
  20. this.navigateTo(path);
  21. });
  22. }
  23. navigateTo(path) {
  24. this.currentPath = path;
  25. this.pathParts = path ? path.split('/').filter(p => p) : [];
  26. this.render();
  27. this.onNavigate(path);
  28. }
  29. getPath() {
  30. return this.currentPath;
  31. }
  32. render() {
  33. let html = `<span class="breadcrumb-item ${this.pathParts.length === 0 ? 'active' : ''}" data-path="">${this.rootName}</span>`;
  34. let currentPath = '';
  35. this.pathParts.forEach((part, index) => {
  36. currentPath += (index === 0 ? '' : '/') + part;
  37. const isLast = index === this.pathParts.length - 1;
  38. html += `<span class="breadcrumb-item ${isLast ? 'active' : ''}" data-path="${currentPath}">${part}</span>`;
  39. });
  40. this.container.innerHTML = html;
  41. }
  42. }