/** * 标签管理器 * 负责管理标签的显示和操作 */ import { logger } from '../utils/logger.js'; import { CacheService, TagCacheService } from "../services/cache.js"; import { UIToolkit } from "../utils/UIToolkit.js"; import { PopupManager } from "../utils/popupManager.js"; import { ResourceManager } from "../utils/resourceManager.js"; import { EventManager } from "../utils/eventManager.js"; import { PromptFormatter } from "../utils/promptFormatter.js"; import { createSettingsDialog, showContextMenu, createConfirmPopup } from "./uiComponents.js"; /** * 标签管理器类 * 管理标签弹窗和标签选择 */ class TagManager { // ---UI状态持久化配置--- static LAST_TAB_KEY = 'PromptAssistant_TagPopup_LastTab'; // 上次激活的标签页 static ACCORDION_STATE_KEY = 'PromptAssistant_TagPopup_AccordionState'; // 手风琴展开状态 static POPUP_SIZE_KEY = 'PromptAssistant_TagPopup_Size'; // 弹窗尺寸 /** * 获取上次激活的标签页（分类名） */ static getLastActiveTab() { try { return CacheService.get(this.LAST_TAB_KEY) || null; } catch (e) { return null; } } /** * 记录本次激活的标签页（分类名） */ static setLastActiveTab(category) { try { if (category && typeof category === 'string') { CacheService.set(this.LAST_TAB_KEY, category); } } catch (e) { } } /** * 获取手风琴展开状态 * @returns {Object} { tabName: { accordionPath: isExpanded } } */ static getAccordionState() { try { const state = CacheService.get(this.ACCORDION_STATE_KEY); return state ? JSON.parse(state) : {}; } catch (e) { return {}; } } /** * 保存手风琴展开状态 * @param {string} tabName 标签页名称 * @param {string} accordionPath 手风琴路径（用分类名表示） * @param {boolean} isExpanded 是否展开 */ static setAccordionState(tabName, accordionPath, isExpanded) { try { const state = this.getAccordionState(); if (!state[tabName]) { state[tabName] = {}; } state[tabName][accordionPath] = isExpanded; CacheService.set(this.ACCORDION_STATE_KEY, JSON.stringify(state)); } catch (e) { logger.error(`保存手风琴状态失败: ${e.message}`); } } /** * 获取保存的弹窗尺寸 * @returns {Object|null} { width: number, height: number } */ static getPopupSize() { try { const size = CacheService.get(this.POPUP_SIZE_KEY); return size ? JSON.parse(size) : null; } catch (e) { return null; } } /** * 保存弹窗尺寸 * @param {number} width 宽度 * @param {number} height 高度 */ static setPopupSize(width, height) { try { const size = { width, height }; CacheService.set(this.POPUP_SIZE_KEY, JSON.stringify(size)); } catch (e) { logger.error(`保存窗口大小失败: ${e.message}`); } } /** * 递归查找分类对象 * @param {Object} obj 数据对象 * @param {string} catName 分类名称 * @returns {Object|null} 找到的分类对象或 null * @note 对于虚拟分类"标签"（仅在没有实际分类时使用），返回根对象本身 */ static _findCategoryRecursively(obj, catName) { if (!obj || typeof obj !== 'object') return null; // 虚拟分类"标签"代表根级别，返回根对象本身 // 这个分类仅在 CSV 中没有任何实际分类，只有根标签时使用 if (catName === "" || catName === "标签") return obj; for (const [key, value] of Object.entries(obj)) { if (key === catName && typeof value === 'object' && value !== null) { return value; } if (typeof value === 'object' && value !== null) { const result = this._findCategoryRecursively(value, catName); if (result) return result; } } return null; } /** * 递归查找标签及其父对象 * @param {Object} obj 数据对象 * @param {string} tagName 标签名称 * @param {string} tagValue 标签值 * @returns {Object|null} 包含 {parent, key} 的对象或 null */ static _findTagRecursively(obj, tagName, tagValue) { if (!obj || typeof obj !== 'object') return null; for (const [key, value] of Object.entries(obj)) { if (key === tagName && value === tagValue) { return { parent: obj, key: key }; } if (typeof value === 'object' && value !== null) { const result = this._findTagRecursively(value, tagName, tagValue); if (result) return result; } } return null; } static popupInstance = null; static onCloseCallback = null; // 添加关闭回调存储 static eventCleanups = []; // 事件清理函数数组 static searchTimeout = null; // 搜索延迟定时器 static currentNodeId = null; static currentInputId = null; static currentWidgetKey = null; static activeTooltip = null; static usedTags = new Map(); // 存储已使用标签的Map: key为标签值，value为对应的DOM元素 static currentCsvFile = null; // 当前选中的CSV文件 static favorites = {}; // 收藏列表缓存 {name: value} static tagLookup = new Map(); // 标签值到名称的映射表 static Sortable = null; // Sortable 库引用 static sortables = []; // 存储 sortable 实例以供清理 static tagData = null; // 当前CSV文件的标签数据 /** * 初始化 Sortable */ static async _initSortable() { if (this.Sortable) return; try { this.Sortable = await ResourceManager.getSortable(); } catch (error) { logger.warn('Sortable library not loaded', error); } } /** * 检查标签是否已插入到输入框中 */ static isTagUsed(tagValue, nodeId, inputId) { const mapping = UIToolkit._findMapping(nodeId, inputId, this.currentWidgetKey); if (!mapping || !mapping.inputEl) return false; // 检查输入框内容是否包含标签的任一格式 const inputValue = mapping.inputEl.value; return TagCacheService.isTagInInput(nodeId, inputId, tagValue, inputValue); } /** * 更新标签状态 */ static updateTagState(tagElement, isUsed) { if (isUsed) { tagElement.classList.add('used'); } else { tagElement.classList.remove('used'); } } /** * 处理标签点击 */ static handleTagClick(tagElement, tagName, tagValue, e) { // 阻止事件冒泡，确保弹窗不会关闭 e.stopPropagation(); // 获取输入框信息 const mapping = UIToolkit._findMapping(this.currentNodeId, this.currentInputId, this.currentWidgetKey); if (!mapping || !mapping.inputEl) return; const inputEl = mapping.inputEl; const inputValue = inputEl.value; // 判断标签是否已使用 const isUsed = this.isTagUsed(tagValue, this.currentNodeId, this.currentInputId); try { if (isUsed) { // 标签已使用，移除 // 确保移除tooltip this._hideTooltip(); this.removeTag(tagValue, this.currentNodeId, this.currentInputId, true); this.updateTagState(tagElement, false); this.usedTags.delete(tagValue); // 立即更新所有标签页中的标签状态 this.updateAllTagsState(this.currentNodeId, this.currentInputId); // 如果当前在搜索状态，也要更新搜索结果中的标签状态 const searchResultList = document.querySelector('.tag_search_result_list'); if (searchResultList) { this.refreshSearchResultsState(); } // logger.debug(`标签操作 | 动作:移除 | 标签:"${tagName}" | 原始值:"${tagValue}"`); } else { // 标签未使用，插入 // 获取光标位置前后的文本 const cursorPos = inputEl.selectionStart; const beforeText = inputValue.substring(0, cursorPos); const afterText = inputValue.substring(cursorPos); // 确定使用哪种格式 const formatType = PromptFormatter.determineFormatType(beforeText, afterText); // 获取或创建标签格式 let formats; const existingFormats = TagCacheService.getTagFormats(this.currentNodeId, this.currentInputId, tagValue); if (existingFormats) { // 如果缓存中已有该标签的格式，直接使用缓存的格式 formats = existingFormats; } else { // 如果缓存中没有，创建新的格式 formats = PromptFormatter.formatTag(tagValue); } // 根据formatType选择要插入的格式 let insertFormat; switch (formatType) { case 1: insertFormat = formats.format1; break; case 2: insertFormat = formats.format2; break; case 3: insertFormat = formats.format3; break; case 4: insertFormat = formats.format4; break; default: insertFormat = formats.format2; // 默认使用格式2 } // 如果是新创建的格式，添加到缓存 if (!existingFormats) { formats.insertedFormat = insertFormat; TagCacheService.addTag(this.currentNodeId, this.currentInputId, tagValue, formats); } else { // 如果是已存在的格式，更新insertedFormat TagCacheService.updateInsertedFormat(this.currentNodeId, this.currentInputId, tagValue, insertFormat); } // 插入到光标位置 UIToolkit.insertAtCursor(insertFormat, this.currentNodeId, this.currentInputId, { highlight: true, keepFocus: true, widgetKey: this.currentWidgetKey }); // 更新光标位置到插入内容之后 setTimeout(() => { if (inputEl === document.activeElement) { const newPos = cursorPos + insertFormat.length; inputEl.setSelectionRange(newPos, newPos); inputEl.focus(); } }, 0); // 更新标签状态 this.updateTagState(tagElement, true); this.usedTags.set(tagValue, tagElement); // 立即更新所有标签页中的标签状态 this.updateAllTagsState(this.currentNodeId, this.currentInputId); // 如果当前在搜索状态，也要更新搜索结果中的标签状态 const searchResultList = document.querySelector('.tag_search_result_list'); if (searchResultList) { this.refreshSearchResultsState(); } // logger.debug(`标签操作 | 动作:插入 | 标签:"${tagName}" | 原始值:"${tagValue}" | 格式类型:${formatType} | 插入格式:"${insertFormat}"`); } } catch (error) { logger.error(`标签操作失败 | 标签:"${tagName}" | 错误:${error.message}`); } } /** * 从输入框中移除标签 */ static removeTag(tagValue, nodeId, inputId, keepFocus = true) { const mapping = UIToolkit._findMapping(nodeId, inputId, this.currentWidgetKey); if (mapping && mapping.inputEl) { const inputEl = mapping.inputEl; const currentValue = inputEl.value; // 获取标签的所有格式 const formatInfo = TagCacheService.getTagFormats(nodeId, inputId, tagValue); if (!formatInfo) return false; // 优先使用insertedFormat进行精确匹配 if (formatInfo.insertedFormat) { const tagIndex = currentValue.indexOf(formatInfo.insertedFormat); if (tagIndex !== -1) { // 直接使用精确替换，不进行额外的清理 const newValue = currentValue.substring(0, tagIndex) + currentValue.substring(tagIndex + formatInfo.insertedFormat.length); // 更新输入框值 inputEl.value = newValue; // 触发事件 inputEl.dispatchEvent(new Event('input', { bubbles: true })); inputEl.dispatchEvent(new Event('change', { bubbles: true })); if (keepFocus) { inputEl.focus(); } logger.debug(`标签移除 | 方式:精确匹配 | 标签:${tagValue} | 格式:"${formatInfo.insertedFormat}"`); return true; } } // 如果insertedFormat不存在或未找到，按优先级尝试其他格式 const removeOrder = ['format4', 'format3', 'format2', 'format1']; for (const formatKey of removeOrder) { const format = formatInfo[formatKey]; if (!format) continue; const tagIndex = currentValue.indexOf(format); if (tagIndex !== -1) { // 检查是否是独立的标签（前后是空格或标点） const isValidRemoval = this._isValidTagRemoval(currentValue, tagIndex, format); if (isValidRemoval) { // 直接使用精确替换，不进行额外的清理 const newValue = currentValue.substring(0, tagIndex) + currentValue.substring(tagIndex + format.length); // 更新输入框值 inputEl.value = newValue; // 触发事件 inputEl.dispatchEvent(new Event('input', { bubbles: true })); inputEl.dispatchEvent(new Event('change', { bubbles: true })); if (keepFocus) { inputEl.focus(); } logger.debug(`标签移除 | 方式:格式匹配 | 标签:${tagValue} | 格式:${formatKey}`); return true; } } } } return false; } /** * 检查标签移除是否有效 */ static _isValidTagRemoval(value, index, format) { // 获取标签前后的字符 const beforeChar = index > 0 ? value[index - 1] : ''; const afterChar = index + format.length < value.length ? value[index + format.length] : ''; // 检查前后字符是否是空格或标点 const isValidChar = char => !char || char === ' ' || char === ',' || char === '.' || char === ';'; return isValidChar(beforeChar) && isValidChar(afterChar); } /** * 清理标签移除后的文本 */ static _cleanupAfterRemoval(text, removePosition, removeLength) { // 获取移除位置前后的一小段文本进行清理 const cleanRange = 10; // 清理范围（前后各10个字符） const startClean = Math.max(0, removePosition - cleanRange); const endClean = Math.min(text.length, removePosition + cleanRange); // 分割文本为三部分：前段、清理段、后段 const beforeText = text.substring(0, startClean); let cleanText = text.substring(startClean, endClean); const afterText = text.substring(endClean); // 只清理中间部分 cleanText = cleanText // 移除连续的逗号 .replace(/,\s*,/g, ',') // 确保逗号后有一个空格 .replace(/,(\S)/g, ', $1') // 移除多余的空格 .replace(/\s+/g, ' ') .trim(); // 重新组合文本 let result = beforeText + cleanText + afterText; // 处理首尾 if (removePosition === 0) { result = result.replace(/^\s*,\s*/, ''); // 如果标签在开头，移除开头的逗号和空格 } if (removePosition + removeLength >= text.length) { result = result.replace(/\s*,\s*$/, ''); // 如果标签在结尾，移除结尾的逗号和空格 } return result; } /** * 创建并显示tooltip */ static _showTooltip(target, text) { // 移除已存在的tooltip this._hideTooltip(); // 创建tooltip元素 const tooltip = document.createElement('div'); tooltip.className = 'tag_tooltip'; tooltip.innerHTML = text; // 使用 innerHTML 以支持 HTML 内容 document.body.appendChild(tooltip); // 获取目标元素的位置和尺寸 const rect = target.getBoundingClientRect(); // 计算tooltip位置 const tooltipRect = tooltip.getBoundingClientRect(); const left = rect.left + (rect.width - tooltipRect.width) / 2; const top = rect.top - tooltipRect.height - 8; // 8px的间距 // 设置tooltip位置 tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; // 保存当前tooltip引用 this.activeTooltip = tooltip; } /** * 隐藏tooltip */ static _hideTooltip() { if (this.activeTooltip) { this.activeTooltip.remove(); this.activeTooltip = null; } } /** * 优化的手风琴切换方法 - 使用动态高度计算，解决跳帧问题 */ static _toggleAccordion(header, content, headerIcon) { const isExpanding = !header.classList.contains('active'); // 防止重复触发动画 if (content.dataset.animating === 'true') { return; } // 标记动画状态 content.dataset.animating = 'true'; if (isExpanding) { // 展开手风琴 header.classList.add('active'); content.classList.add('active'); // 临时移除过渡效果来测量高度 content.style.transition = 'none'; content.style.maxHeight = 'none'; content.style.overflow = 'visible'; content.style.padding = '2px 0'; // 确保padding正确 // 强制回流并获取准确高度 void content.offsetHeight; const contentHeight = content.scrollHeight; // 设置动画起始状态 content.style.maxHeight = '0px'; content.style.padding = '0'; content.style.overflow = 'hidden'; // 再次强制回流 void content.offsetHeight; // 启用过渡效果并开始动画 content.style.transition = 'max-height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // 使用requestAnimationFrame确保动画平滑 requestAnimationFrame(() => { content.style.maxHeight = contentHeight + 'px'; content.style.padding = '2px 0'; }); // 监听动画结束事件 const handleTransitionEnd = (e) => { if (e.target === content && e.propertyName === 'max-height') { content.removeEventListener('transitionend', handleTransitionEnd); // 动画完成后的清理工作 if (content.classList.contains('active')) { content.style.maxHeight = 'none'; content.style.overflow = 'visible'; content.style.transition = ''; } // 清除动画状态标记 content.dataset.animating = 'false'; } }; content.addEventListener('transitionend', handleTransitionEnd); // 备用清理机制（防止事件未触发） setTimeout(() => { if (content.dataset.animating === 'true') { content.dataset.animating = 'false'; if (content.classList.contains('active')) { content.style.maxHeight = 'none'; content.style.overflow = 'visible'; content.style.transition = ''; } } }, 250); // 调整为0.2s + 50ms缓冲 } else { // 收起手风琴 // 立即移除header的active类以更新视觉状态 header.classList.remove('active'); // 获取当前高度作为动画起点 const currentHeight = content.scrollHeight; // 设置起始状态 content.style.transition = 'none'; content.style.maxHeight = currentHeight + 'px'; content.style.overflow = 'hidden'; // 强制回流 void content.offsetHeight; // 启用过渡效果 content.style.transition = 'max-height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // 使用requestAnimationFrame确保动画平滑 requestAnimationFrame(() => { content.style.maxHeight = '0px'; content.style.padding = '0'; }); // 监听动画结束事件 const handleTransitionEnd = (e) => { if (e.target === content && e.propertyName === 'max-height') { content.removeEventListener('transitionend', handleTransitionEnd); // 动画完成后移除active类和清理样式 content.classList.remove('active'); content.style.transition = ''; content.style.maxHeight = ''; content.style.padding = ''; content.style.overflow = ''; // 清除动画状态标记 content.dataset.animating = 'false'; } }; content.addEventListener('transitionend', handleTransitionEnd); // 备用清理机制（防止事件未触发） setTimeout(() => { if (content.dataset.animating === 'true') { content.dataset.animating = 'false'; content.classList.remove('active'); content.style.transition = ''; content.style.maxHeight = ''; content.style.padding = ''; content.style.overflow = ''; } }, 250); // 调整为0.2s + 50ms缓冲 } // 切换图标旋转 const arrowIcon = headerIcon.querySelector('.pi.pi-chevron-down, .accordion_arrow_icon'); if (arrowIcon) { arrowIcon.classList.toggle('rotate-180'); } } /** * 递归创建标签结构 * @param {Object} data 数据对象 * @param {string} level 层级 * @param {string} tabName 标签页名称（用于恢复状态） */ static _createAccordionContent(data, level = '0', tabName = null, categoryName = null) { // 如果是顶级（一级分类），则创建标签页结构 if (level === '0') { // 创建外层容器 const container = document.createElement('div'); container.style.display = 'flex'; container.style.flexDirection = 'column'; container.style.height = '100%'; container.style.overflow = 'hidden'; // 创建标签页容器 const tabsContainer = document.createElement('div'); tabsContainer.className = 'popup_tabs_container'; // 创建标签滚动区域 const tabsScroll = document.createElement('div'); tabsScroll.className = 'popup_tabs_scroll'; // 创建标签栏 const tabs = document.createElement('div'); tabs.className = 'popup_tabs'; // 创建内容区域 const tabContents = document.createElement('div'); tabContents.className = 'tag_category_container'; tabContents.style.overflow = 'hidden'; tabContents.style.display = 'flex'; tabContents.style.flexDirection = 'column'; tabContents.style.flex = '1'; // 确保内容区域占满剩余空间 tabContents.style.minHeight = '0'; // 允许flex收缩 tabContents.style.flex = '1'; // 确保内容区域占满剩余空间 tabContents.style.minHeight = '0'; // 允许flex收缩 // 获取所有一级分类和标签 const categories = Object.keys(data); // 分离根级别标签（字符串值）和实际分类（对象值） // 注意：我们只在渲染时分离，不修改原始 data 对象 const rootTags = {}; const actualCategories = []; categories.forEach(key => { if (typeof data[key] === 'string') { rootTags[key] = data[key]; } else { actualCategories.push(key); } }); // 如果没有分类且没有根标签，返回空容器 if (actualCategories.length === 0 && Object.keys(rootTags).length === 0) { const emptyContainer = document.createElement('div'); emptyContainer.className = 'tag_category_container'; return emptyContainer; } // 创建左右滚动指示器 const leftIndicator = document.createElement('div'); leftIndicator.className = 'tabs_scroll_indicator left'; // 添加图标 const leftIconSpan = document.createElement('span'); leftIconSpan.className = 'pi pi-angle-left scroll_indicator_icon'; leftIndicator.appendChild(leftIconSpan); leftIndicator.style.display = 'none'; // 初始隐藏 const rightIndicator = document.createElement('div'); rightIndicator.className = 'tabs_scroll_indicator right'; // 添加图标 const rightIconSpan = document.createElement('span'); rightIconSpan.className = 'pi pi-angle-right scroll_indicator_icon'; rightIndicator.appendChild(rightIconSpan); rightIndicator.style.display = 'none'; // 初始隐藏 // 更新指示器状态的函数 const updateIndicators = () => { const canScroll = tabsScroll.scrollWidth > tabsScroll.clientWidth; if (!canScroll) { leftIndicator.style.display = 'none'; rightIndicator.style.display = 'none'; return; } // 使用更大的阈值（5像素）确保边界情况下能正确隐藏 const scrollLeft = tabsScroll.scrollLeft; const maxScroll = tabsScroll.scrollWidth - tabsScroll.clientWidth; // 移除高频滚动调试日志 leftIndicator.style.display = scrollLeft > 5 ? 'flex' : 'none'; rightIndicator.style.display = scrollLeft < (maxScroll - 5) ? 'flex' : 'none'; }; // 添加指示器点击事件 - 每次滚动一个标签 const leftClickCleanup = EventManager.addDOMListener(leftIndicator, 'click', () => { // 获取所有标签 const allTabs = tabs.querySelectorAll('.popup_tab'); if (allTabs.length === 0) return; // 找到当前第一个可见的标签 const scrollRect = tabsScroll.getBoundingClientRect(); let firstVisibleTab = null; for (const tab of allTabs) { const tabRect = tab.getBoundingClientRect(); // 如果标签的右边缘在可视区域内，说明它至少部分可见 if (tabRect.right > scrollRect.left + 10) { firstVisibleTab = tab; break; } } // 找到前一个标签 if (firstVisibleTab) { const currentIndex = Array.from(allTabs).indexOf(firstVisibleTab); if (currentIndex > 0) { const prevTab = allTabs[currentIndex - 1]; prevTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' }); // 滚动完成后更新指示器状态（使用更长的延迟确保动画完成） setTimeout(updateIndicators, 600); } } }); const rightClickCleanup = EventManager.addDOMListener(rightIndicator, 'click', () => { // 获取所有标签 const allTabs = tabs.querySelectorAll('.popup_tab'); if (allTabs.length === 0) return; // 找到当前最后一个可见的标签 const scrollRect = tabsScroll.getBoundingClientRect(); let lastVisibleTab = null; for (let i = allTabs.length - 1; i >= 0; i--) { const tab = allTabs[i]; const tabRect = tab.getBoundingClientRect(); // 如果标签的左边缘在可视区域内，说明它至少部分可见 if (tabRect.left < scrollRect.right - 10) { lastVisibleTab = tab; break; } } // 找到下一个标签 if (lastVisibleTab) { const currentIndex = Array.from(allTabs).indexOf(lastVisibleTab); if (currentIndex < allTabs.length - 1) { const nextTab = allTabs[currentIndex + 1]; nextTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' }); // 滚动完成后更新指示器状态（使用更长的延迟确保动画完成） setTimeout(updateIndicators, 600); } } }); // 监听滚动事件，显示/隐藏滚动指示器 const scrollCleanup = EventManager.addDOMListener(tabsScroll, 'scroll', updateIndicators); // 监听窗口大小调整事件 const resizeObserver = new ResizeObserver(() => { updateIndicators(); }); resizeObserver.observe(popup); // 添加清理函数 const resizeCleanup = () => { resizeObserver.disconnect(); }; this.eventCleanups.push(leftClickCleanup, rightClickCleanup, scrollCleanup, resizeCleanup); // 初始检测是否需要滚动指示器，并自动定位到激活的标签页 setTimeout(() => { // 检查是否需要滚动 const canScroll = tabsScroll.scrollWidth > tabsScroll.clientWidth; if (canScroll) { // 找到激活的标签页 const activeTab = tabs.querySelector('.popup_tab.active'); if (activeTab) { // 将激活的标签页滚动到可见区域 activeTab.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'center' }); } // 等待滚动完成后，更新滚动指示器显示状态 setTimeout(updateIndicators, 50); } }, 100); // 如果没有实际分类但有根标签，创建一个默认 Tab 来显示它们 const finalCategories = actualCategories.length > 0 ? actualCategories : (Object.keys(rootTags).length > 0 ? ["标签"] : []); // 为每个分类创建标签和内容 finalCategories.forEach((category, index) => { // 创建标签 const tab = document.createElement('div'); tab.className = 'popup_tab'; tab.textContent = category; tab.setAttribute('data-category', category); // 第一个标签默认激活 if (index === 0) { tab.classList.add('active'); } // 添加标签点击事件 const tabClickCleanup = EventManager.addDOMListener(tab, 'click', (e) => { // 获取当前激活的标签 const currentActiveTab = tabs.querySelector('.popup_tab.active'); // 如果点击的是当前激活的标签，不做任何处理 if (currentActiveTab === tab) return; // 为当前激活的标签添加退出动画 if (currentActiveTab) { currentActiveTab.classList.add('exiting'); // 监听动画结束 const animationEndHandler = () => { currentActiveTab.classList.remove('active', 'exiting'); currentActiveTab.removeEventListener('transitionend', animationEndHandler); }; currentActiveTab.addEventListener('transitionend', animationEndHandler); } // 移除所有内容的active类 tabContents.querySelectorAll('.popup_tab_content').forEach(c => { c.classList.remove('active'); c.style.display = 'none'; }); // 添加当前标签的active类 tab.classList.add('active'); // 添加对应内容的active类 const contentId = tab.getAttribute('data-category'); const content = tabContents.querySelector(`.popup_tab_content[data-category="${contentId}"]`); if (content) { content.classList.add('active'); content.style.display = 'flex'; content.style.flexDirection = 'column'; } // 改进滚动逻辑：确保选中的标签完全可见 const tabRect = tab.getBoundingClientRect(); const scrollRect = tabsScroll.getBoundingClientRect(); // 检查标签是否完全在可视区域内 const isFullyVisible = tabRect.left >= scrollRect.left && tabRect.right <= scrollRect.right; if (!isFullyVisible) { // 如果标签在左侧不完全可见 if (tabRect.left < scrollRect.left) { tab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' }); } // 如果标签在右侧不完全可见 else if (tabRect.right > scrollRect.right) { tab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' }); } } }); this.eventCleanups.push(tabClickCleanup); tabs.appendChild(tab); // 创建对应的内容区域 const content = document.createElement('div'); content.className = 'popup_tab_content'; content.setAttribute('data-category', category); content.style.flex = '1'; content.style.display = 'none'; content.style.minHeight = '0'; // 允许flex收缩 content.style.overflow = 'auto'; // 确保内容溢出时显示滚动条 // 第一个内容默认显示 if (index === 0) { content.classList.add('active'); content.style.display = 'flex'; content.style.flexDirection = 'column'; } // 获取该分类的数据 // 如果是"标签"虚拟分类（仅在没有实际分类时使用），使用根标签作为数据 const categoryData = category === "标签" ? rootTags : data[category]; if (typeof categoryData === 'object' && categoryData !== null) { // 使用 _createInnerAccordion，它已经支持混合内容（标签+子分类） const innerContent = this._createInnerAccordion(categoryData, '1', category, category); content.appendChild(innerContent); } tabContents.appendChild(content); }); // ---在 Tab 栏末尾添加"新建分类"按钮--- const addTabButton = document.createElement('div'); addTabButton.className = 'popup_tab add_category_tab'; addTabButton.title = '新建分类'; const addTabIcon = document.createElement('span'); addTabIcon.className = 'pi pi-plus'; addTabButton.appendChild(addTabIcon); const addTabClickCleanup = EventManager.addDOMListener(addTabButton, 'click', (e) => { e.stopPropagation(); this._handleAddCategory(addTabButton, null, tabs, tabContents, data); }); this.eventCleanups.push(addTabClickCleanup); tabs.appendChild(addTabButton); // 组装标签页结构 tabsScroll.appendChild(tabs); tabsContainer.appendChild(leftIndicator); tabsContainer.appendChild(tabsScroll); tabsContainer.appendChild(rightIndicator); // 组装容器 container.appendChild(tabsContainer); container.appendChild(tabContents); return container; } else { // 非顶级分类使用普通容器 const container = document.createElement('div'); container.className = 'tag_category_container'; container.style.overflow = 'visible'; // 移除滚动条，让父容器处理 // 跟踪当前层级的第一个手风琴 let isFirstAccordionInLevel = true; for (const [key, value] of Object.entries(data)) { // 如果值是字符串，说明是标签 if (typeof value === 'string') { const tagItem = this._createTagElement(key, value, categoryName); container.appendChild(tagItem); } // 递归处理下一级 else if (typeof value === 'object' && value !== null) { const accordion = document.createElement('div'); accordion.className = 'tag_accordion'; accordion.setAttribute('data-category', key); accordion.setAttribute('data-level', level); const header = document.createElement('div'); header.className = 'tag_accordion_header'; const headerTitle = document.createElement('div'); headerTitle.className = 'tag_accordion_title'; headerTitle.textContent = key; const headerIcon = document.createElement('div'); headerIcon.className = 'tag_accordion_icon'; // 添加加号图标（创建新标签） const addIconSpan = document.createElement('span'); addIconSpan.className = 'pi pi-plus accordion_add_icon'; addIconSpan.title = '在此分类下创建新标签'; headerIcon.appendChild(addIconSpan); // 添加箭头图标 const arrowIconSpan = document.createElement('span'); arrowIconSpan.className = 'pi pi-chevron-down accordion_arrow_icon'; headerIcon.appendChild(arrowIconSpan); // 添加加号图标点击事件 const addIconCleanup = EventManager.addDOMListener(addIconSpan, 'click', (e) => { e.stopPropagation(); // 阻止事件冒泡，避免触发手风琴展开/收起 this._handleAddTag(key, categoryName || key); }); this.eventCleanups.push(addIconCleanup); header.appendChild(headerTitle); header.appendChild(headerIcon); // 添加拖拽时自动展开功能 let hoverTimer = null; const dragOverCleanup = EventManager.addDOMListener(header, 'dragover', (e) => { e.preventDefault(); // 必须阻止默认行为才能响应 drop/dragover // 检查是否有正在拖拽的标签 const draggingTag = document.querySelector('.tag_item.tag-dragging'); if (draggingTag && !header.classList.contains('active')) { if (!hoverTimer) { hoverTimer = setTimeout(() => { logger.debug(`[AutoExpand] 拖拽悬停自动展开: ${key}`); header.click(); hoverTimer = null; }, 500); // 500ms 延迟 } } }); const dragLeaveCleanup = EventManager.addDOMListener(header, 'dragleave', () => { if (hoverTimer) { clearTimeout(hoverTimer); hoverTimer = null; } }); // 还要处理 drop 事件，防止计时器残留 const dropCleanup = EventManager.addDOMListener(header, 'drop', () => { if (hoverTimer) { clearTimeout(hoverTimer); hoverTimer = null; } }); this.eventCleanups.push(dragOverCleanup, dragLeaveCleanup, dropCleanup); const content = document.createElement('div'); content.className = 'tag_accordion_content'; // 递归创建子内容，传递 tabName const childContent = this._createAccordionContent(value, (parseInt(level) + 1).toString(), tabName, key); content.appendChild(childContent); // 根据保存的状态或默认行为确定是否展开 const accordionState = this.getAccordionState(); const shouldExpand = tabName && accordionState[tabName]?.[key] !== undefined ? accordionState[tabName][key] // 使用保存的状态 : isFirstAccordionInLevel; // 默认展开第一个 if (shouldExpand) { header.classList.add('active'); content.classList.add('active'); const arrowIconSpan = headerIcon.querySelector('.accordion_arrow_icon'); if (arrowIconSpan) { arrowIconSpan.classList.add('rotate-180'); } if (!tabName || !accordionState[tabName]?.[key]) { // 只有在使用默认行为时才更新标志 isFirstAccordionInLevel = false; } } // 添加手风琴切换事件 const accordionCleanup = EventManager.addDOMListener(header, 'click', (e) => { e.stopPropagation(); // 获取当前手风琴的层级 const currentLevel = accordion.getAttribute('data-level'); // 获取当前标签页下的所有同级手风琴 const parentTab = header.closest('.popup_tab_content'); if (parentTab) { // 只关闭同级别的其他手风琴 const siblingAccordions = parentTab.querySelectorAll(`.tag_accordion[data-level="${currentLevel}"] .tag_accordion_header.active`); if (!header.classList.contains('active')) { siblingAccordions.forEach(otherHeader => { if (otherHeader !== header) { // 获取父级手风琴 const parentAccordion = otherHeader.closest('.tag_accordion'); // 确保是同级的手风琴 if (parentAccordion && parentAccordion.getAttribute('data-level') === currentLevel) { const otherContent = otherHeader.nextElementSibling; const otherHeaderIcon = otherHeader.querySelector('.tag_accordion_icon'); // 使用优化的切换方法关闭其他手风琴 if (otherHeader.classList.contains('active')) { this._toggleAccordion(otherHeader, otherContent, otherHeaderIcon); // 保存关闭状态 const otherAccordionCategory = parentAccordion.getAttribute('data-category'); const otherTabName = parentTab.getAttribute('data-category'); if (otherTabName && otherAccordionCategory) { this.setAccordionState(otherTabName, otherAccordionCategory, false); } } } } }); } } // 使用优化的切换方法切换当前手风琴 this._toggleAccordion(header, content, headerIcon); // 保存当前手风琴状态 const accordionCategory = accordion.getAttribute('data-category'); const tabName = parentTab?.getAttribute('data-category'); if (tabName && accordionCategory) { const isExpanded = header.classList.contains('active'); this.setAccordionState(tabName, accordionCategory, isExpanded); } }); this.eventCleanups.push(accordionCleanup); accordion.appendChild(header); accordion.appendChild(content); container.appendChild(accordion); } } // 初始化拖拽排序（如果有 Sortable） // 分别处理手风琴排序和标签排序 if (this.Sortable) { // 检测容器内容类型 const hasAccordions = container.querySelector(':scope > .tag_accordion') !== null; const hasTags = container.querySelector(':scope > .tag_item') !== null; // 手风琴排序 if (hasAccordions) { const accordionSortable = new this.Sortable(container, { group: { name: 'accordions', pull: false, put: false }, animation: 150, ghostClass: 'tag-ghost', handle: '.tag_accordion_header', draggable: '.tag_accordion', delay: 50, onEnd: async (evt) => { const { oldIndex, newIndex } = evt; if (oldIndex === newIndex) return; const newOrderKeys = []; Array.from(container.children).forEach(el => { if (el.classList.contains('tag_accordion')) { const cat = el.getAttribute('data-category'); if (cat) newOrderKeys.push(cat); } }); const tempObj = { ...data }; for (const key in data) delete data[key]; newOrderKeys.forEach(key => { if (Object.prototype.hasOwnProperty.call(tempObj, key)) { data[key] = tempObj[key]; } }); for (const key in tempObj) { if (!Object.prototype.hasOwnProperty.call(data, key)) { data[key] = tempObj[key]; } } await this._saveTagOrder(data, tabName, categoryName); } }); this.sortables.push(accordionSortable); } // 标签排序（支持跨分类拖拽） // 始终初始化标签 Sortable，确保空分类或只有子分类的容器也能接收标签 if (true) { // 为容器添加分类标识，用于跨分类拖拽时识别 container.setAttribute('data-sortable-category', categoryName || tabName); // 确保容器有最小高度，以便空容器也能因 drop-zone 样式而被看到 container.style.minHeight = '10px'; const tagSortable = new this.Sortable(container, { group: { name: 'tags', pull: true, put: function (to) { // 如果目标容器包含手风琴，则不允许放入标签 return to.el.querySelector(':scope > .tag_accordion') === null; } }, // 允许跨分类拖拽 animation: 150, ghostClass: 'tag-ghost', draggable: '.tag_item', delay: 50, onStart: function (evt) { evt.item.classList.add('tag-dragging'); // 高亮所有可放置的分类容器（仅限底层容器） document.querySelectorAll('[data-sortable-category]').forEach(el => { if (el !== evt.from && !el.querySelector(':scope > .tag_accordion')) { el.classList.add('tag-drop-zone'); } }); }, onEnd: async (evt) => { evt.item.classList.remove('tag-dragging'); // 移除高亮 document.querySelectorAll('.tag-drop-zone').forEach(el => { el.classList.remove('tag-drop-zone'); }); // 如果是跨分类移动，由 onAdd 处理 if (evt.from !== evt.to) return; const { oldIndex, newIndex } = evt; if (oldIndex === newIndex) return; const newOrderKeys = []; Array.from(container.children).forEach(el => { if (el.classList.contains('tag_item')) { const name = el.getAttribute('data-name'); if (name) newOrderKeys.push(name); } }); const tempObj = { ...data }; for (const key in data) delete data[key]; newOrderKeys.forEach(key => { if (Object.prototype.hasOwnProperty.call(tempObj, key)) { data[key] = tempObj[key]; } }); for (const key in tempObj) { if (!Object.prototype.hasOwnProperty.call(data, key)) { data[key] = tempObj[key]; } } await this._saveTagOrder(data, tabName, categoryName); }, onAdd: async (evt) => { // 跨分类移动标签 const tagItem = evt.item; const tagName = tagItem.getAttribute('data-name'); const tagValue = tagItem.getAttribute('data-value'); const fromCategory = evt.from.getAttribute('data-sortable-category'); const toCategory = evt.to.getAttribute('data-sortable-category'); logger.debug(`[onAdd(root)] 开始移动标签: ${tagName}, 从: ${fromCategory}, 到: ${toCategory}`); // 更新标签元素的分类属性 tagItem.setAttribute('data-category', toCategory); // 调用移动函数 (不立即保存，等待排序) const success = await this._moveTagToCategory(tagName, tagValue, fromCategory, toCategory, tabName, false); logger.debug(`[onAdd(root)] 移动结果: ${success}`); if (!success) { // 如果移动失败，将标签移回原位置 logger.warn(`[onAdd(root)] 移动失败，回滚 DOM`); evt.from.appendChild(tagItem); } else { // 移动成功，现在根据 DOM 顺序重新排序并保存 // 获取新的 DOM 顺序 const newOrderKeys = []; Array.from(evt.to.children).forEach(el => { if (el.classList.contains('tag_item')) { const name = el.getAttribute('data-name'); if (name) newOrderKeys.push(name); } }); // 重构 data 对象 const tempObj = { ...data }; for (const key in data) delete data[key]; newOrderKeys.forEach(key => { if (Object.prototype.hasOwnProperty.call(tempObj, key)) { data[key] = tempObj[key]; } }); // 确保没有遗漏 for (const key in tempObj) { if (!Object.prototype.hasOwnProperty.call(data, key)) { data[key] = tempObj[key]; } } // 保存排序后的数据 await this._saveTagOrder(data, tabName, toCategory); // 显示成功提示 logger.debug(`[标签移动(root)] 成功并排序 | 标签: ${tagName} | 到: ${toCategory}`); app.extensionManager.toast.add({ severity: "success", summary: "移动成功", detail: `标签 "${tagName}" 已移动到 "${toCategory}"`, life: 2000 }); } } }); this.sortables.push(tagSortable); } } return container; } } /** * 为二级分类创建手风琴元素 */ static _createAccordionElement(key, value, level) { const accordion = document.createElement('div'); accordion.className = 'tag_accordion'; accordion.setAttribute('data-category', key); const header = document.createElement('div'); header.className = 'tag_accordion_header'; const headerTitle = document.createElement('div'); headerTitle.className = 'tag_accordion_title'; headerTitle.textContent = key; const headerIcon = document.createElement('div'); headerIcon.className = 'tag_accordion_icon'; // 创建图标元素 const arrowIconSpan = document.createElement('span'); arrowIconSpan.className = 'pi pi-chevron-down accordion_arrow_icon'; headerIcon.appendChild(arrowIconSpan); header.appendChild(headerTitle); header.appendChild(headerIcon); const content = document.createElement('div'); content.className = 'tag_accordion_content'; // 递归创建子内容 const childContent = this._createInnerAccordion(data, (parseInt(level) + 1).toString(), tabName, categoryName); accordion.appendChild(childContent); // 添加手风琴切换事件，包含关闭其他手风琴的逻辑 const accordionCleanup = EventManager.addDOMListener(header, 'click', (e) => { e.stopPropagation(); // 获取当前标签页下的所有手风琴 const parentTab = header.closest('.popup_tab_content'); if (parentTab) { if (!header.classList.contains('active')) { const otherAccordions = parentTab.querySelectorAll('.tag_accordion_header.active'); otherAccordions.forEach(otherHeader => { if (otherHeader !== header) { otherHeader.classList.remove('active'); const otherContent = otherHeader.nextElementSibling; if (otherContent && otherContent.classList.contains('active')) { otherContent.classList.remove('active'); } const otherIcon = otherHeader.querySelector('.accordion_arrow_icon'); if (otherIcon) { otherIcon.classList.add('rotate-180'); } } }); } } // 切换当前手风琴状态 header.classList.toggle('active'); content.classList.toggle('active'); // 图标旋转 const toggleArrowIcon = headerIcon.querySelector('.accordion_arrow_icon'); if (toggleArrowIcon) { if (header.classList.contains('active')) { toggleArrowIcon.classList.add('rotate-180'); } else { toggleArrowIcon.classList.remove('rotate-180'); } } }); this.eventCleanups.push(accordionCleanup); accordion.appendChild(header); accordion.appendChild(content); // 默认展开第一个手风琴（根据父元素的位置） if (accordion.parentElement && accordion.parentElement.firstChild === accordion) { header.classList.add('active'); content.classList.add('active'); } return accordion; } /** * 为二级分类创建内容 * @param {Object} data 数据对象 * @param {string} level 层级 * @param {string} tabName 标签页名称（用于恢复状态） */ static _createInnerAccordion(data, level, tabName = null, categoryName = null) { const container = document.createElement('div'); container.className = 'tag_category_container'; container.style.flex = '1'; container.style.overflow = 'visible'; // 移除滚动条，让父容器处理 container.style.minHeight = '0'; // 允许flex收缩 // 跟踪是否为第一个手风琴 let isFirstAccordion = true; for (const [key, value] of Object.entries(data)) { // 如果值是对象，创建新的手风琴 if (typeof value === 'object' && value !== null) { const accordion = document.createElement('div'); accordion.className = 'tag_accordion'; accordion.setAttribute('data-category', key); const header = document.createElement('div'); header.className = 'tag_accordion_header'; const headerTitle = document.createElement('div'); headerTitle.className = 'tag_accordion_title'; headerTitle.textContent = key; const headerIcon = document.createElement('div'); headerIcon.className = 'tag_accordion_icon'; // 添加加号图标（创建新标签）- 收藏页面不显示 if (tabName !== 'favorites') { const addIconSpan = document.createElement('span'); addIconSpan.className = 'pi pi-plus accordion_add_icon'; addIconSpan.title = '在此分类下创建新标签'; headerIcon.appendChild(addIconSpan); // 添加加号图标点击事件 const addIconCleanup = EventManager.addDOMListener(addIconSpan, 'click', (e) => { e.stopPropagation(); // 阻止事件冒泡，避免触发手风琴展开/收起 this._handleAddTag(key, categoryName || key, addIconSpan); }); this.eventCleanups.push(addIconCleanup); } // 添加箭头图标 const arrowIconSpan = document.createElement('span'); arrowIconSpan.className = 'pi pi-chevron-down accordion_arrow_icon'; headerIcon.appendChild(arrowIconSpan); header.appendChild(headerTitle); header.appendChild(headerIcon); // 添加右键菜单事件（收藏页面不显示） if (tabName !== 'favorites') { const headerContextMenuCleanup = EventManager.addDOMListener(header, 'contextmenu', (e) => { e.preventDefault(); e.stopPropagation(); this._showCategoryContextMenu(e, key, false, tabName); }); this.eventCleanups.push(headerContextMenuCleanup); } // 添加拖拽时自动展开功能 let hoverTimer = null; const dragOverCleanup = EventManager.addDOMListener(header, 'dragover', (e) => { e.preventDefault(); // 必须阻止默认行为才能响应 drop/dragover // 检查是否有正在拖拽的标签 const draggingTag = document.querySelector('.tag_item.tag-dragging'); if (draggingTag && !header.classList.contains('active')) { if (!hoverTimer) { hoverTimer = setTimeout(() => { logger.debug(`[AutoExpand] 拖拽悬停自动展开: ${key}`); header.click(); hoverTimer = null; }, 500); // 500ms 延迟 } } }); const dragLeaveCleanup = EventManager.addDOMListener(header, 'dragleave', () => { if (hoverTimer) { clearTimeout(hoverTimer); hoverTimer = null; } }); // 还要处理 drop 事件，防止计时器残留 const dropCleanup = EventManager.addDOMListener(header, 'drop', () => { if (hoverTimer) { clearTimeout(hoverTimer); hoverTimer = null; } }); this.eventCleanups.push(dragOverCleanup, dragLeaveCleanup, dropCleanup); const content = document.createElement('div'); content.className = 'tag_accordion_content'; // 递归创建子内容 // 传递当前手风琴的分类名称（key）作为 categoryName，而不是父分类名称 // 这样每个容器的 data-sortable-category 才能正确标识其所属分类 const childContent = this._createInnerAccordion(value, (parseInt(level) + 1).toString(), tabName, key); childContent.style.flex = '1'; // 让子内容占满可用空间 childContent.style.minHeight = '0'; // 允许flex收缩 content.appendChild(childContent); // 根据保存的状态或默认行为确定是否展开 let shouldExpand; const accordionState = this.getAccordionState(); if (tabName === 'favorites') { // 收藏页特殊处理：默认展开当前CSV对应的分类 // 获取当前CSV文件名（无扩展名） let currentCsvName = this.currentCsvFile || ""; currentCsvName = currentCsvName.replace(/\.(csv|json|yaml|yml)$/i, ''); // 检查当前key是否匹配当前CSV (key就是分类名) const isCurrentCsv = key === currentCsvName; // 检查是否存在匹配的分类 const hasCurrentCsv = Object.keys(data).includes(currentCsvName); // 如果当前Key匹配当前CSV，展开 // 或者如果没有对应的CSV分类，且这是第一个，展开 shouldExpand = isCurrentCsv || (!hasCurrentCsv && isFirstAccordion); // console.log(`[AutoExpand] Key: ${key}, Current: ${currentCsvName}, Match: ${isCurrentCsv}, HasCurrent: ${hasCurrentCsv}, Should: ${shouldExpand}`); } else { // 普通页逻辑：优先使用保存状态，否则默认展开第一个 shouldExpand = tabName && accordionState[tabName]?.[key] !== undefined ? accordionState[tabName][key] : isFirstAccordion; } if (shouldExpand) { header.classList.add('active'); content.classList.add('active'); const firstArrowIcon = headerIcon.querySelector('.pi.pi-chevron-down'); if (firstArrowIcon) { firstArrowIcon.classList.add('rotate-180'); } if (!tabName || !accordionState[tabName]?.[key]) { // 只有在使用默认行为时才更新标志 isFirstAccordion = false; } } // 添加手风琴切换事件，包含关闭同级其他手风琴的逻辑 const accordionCleanup = EventManager.addDOMListener(header, 'click', (e) => { e.stopPropagation(); // 获取当前手风琴的父容器（而不是整个标签页） const parentContainer = accordion.parentElement; const parentTab = header.closest('.popup_tab_content'); if (parentContainer) { if (!header.classList.contains('active')) { // 只查找同一父容器内的直接子手风琴（同级手风琴），而不是所有层级 const siblingAccordions = parentContainer.querySelectorAll(':scope > .tag_accordion > .tag_accordion_header.active'); siblingAccordions.forEach(otherHeader => { if (otherHeader !== header) { const otherContent = otherHeader.nextElementSibling; const otherHeaderIcon = otherHeader.querySelector('.tag_accordion_icon'); // 使用优化的切换方法关闭同级其他手风琴 if (otherHeader.classList.contains('active')) { this._toggleAccordion(otherHeader, otherContent, otherHeaderIcon); // 保存关闭状态 const otherAccordion = otherHeader.closest('.tag_accordion'); const otherAccordionCategory = otherAccordion?.getAttribute('data-category'); const tabName = parentTab?.getAttribute('data-category'); if (tabName && otherAccordionCategory) { this.setAccordionState(tabName, otherAccordionCategory, false); } } } }); } } // 使用优化的切换方法切换当前手风琴 this._toggleAccordion(header, content, headerIcon); // 保存当前手风琴状态 const accordionCategory = accordion.getAttribute('data-category'); const tabName = parentTab?.getAttribute('data-category'); if (tabName && accordionCategory) { const isExpanded = header.classList.contains('active'); this.setAccordionState(tabName, accordionCategory, isExpanded); } }); this.eventCleanups.push(accordionCleanup); accordion.appendChild(header); accordion.appendChild(content); container.appendChild(accordion); } else if (typeof value === 'string') { // 如果值是字符串，创建标签项 const tagItem = this._createTagElement(key, value, categoryName); container.appendChild(tagItem); } } // ---在手风琴列表末尾添加"新建子分类"按钮（仅限 level='1'，即第一级手风琴）--- if (level === '1' && tabName !== 'favorites') { const addSubCategoryBtn = document.createElement('div'); addSubCategoryBtn.className = 'add_subcategory_button'; addSubCategoryBtn.title = '新建子分类'; const addSubCategoryIcon = document.createElement('span'); addSubCategoryIcon.className = 'pi pi-plus'; addSubCategoryBtn.appendChild(addSubCategoryIcon); const addSubCategoryClickCleanup = EventManager.addDOMListener(addSubCategoryBtn, 'click', (e) => { e.stopPropagation(); this._handleAddCategory(addSubCategoryBtn, tabName, null, null, data, categoryName); }); this.eventCleanups.push(addSubCategoryClickCleanup); container.appendChild(addSubCategoryBtn); } // 初始化拖拽排序（如果有 Sortable） // 分别处理手风琴排序和标签排序，避免拖拽标签时误触发手风琴排序 if (this.Sortable) { // 检测容器内容类型（只检测直接子元素） const hasAccordions = container.querySelector(':scope > .tag_accordion') !== null; const hasTags = container.querySelector(':scope > .tag_item') !== null; // 手风琴排序：只有手风琴头部可以触发，且只排序手风琴元素 if (hasAccordions) { const accordionSortable = new this.Sortable(container, { group: { name: 'accordions', pull: false, put: false }, // 独立分组，不与标签混排 animation: 150, ghostClass: 'tag-ghost', handle: '.tag_accordion_header', // 只有手风琴头部可以拖拽 draggable: '.tag_accordion', // 只排序手风琴元素 delay: 50, onEnd: async (evt) => { const { oldIndex, newIndex } = evt; if (oldIndex === newIndex) return; // 获取新顺序（只处理手风琴） const newOrderKeys = []; Array.from(container.children).forEach(el => { if (el.classList.contains('tag_accordion')) { const cat = el.getAttribute('data-category'); if (cat) newOrderKeys.push(cat); } }); // 重构 data 对象 const tempObj = { ...data }; for (const key in data) delete data[key]; newOrderKeys.forEach(key => { if (Object.prototype.hasOwnProperty.call(tempObj, key)) { data[key] = tempObj[key]; } }); // 保留未在DOM中的数据 for (const key in tempObj) { if (!Object.prototype.hasOwnProperty.call(data, key)) { data[key] = tempObj[key]; } } // 保存排序 await this._saveTagOrder(data, tabName, categoryName); } }); this.sortables.push(accordionSortable); } // 标签排序（支持跨分类拖拽） // 始终初始化标签 Sortable，确保空分类或只有子分类的容器也能接收标签 if (true) { // 为容器添加分类标识，用于跨分类拖拽时识别 container.setAttribute('data-sortable-category', categoryName || tabName); // 确保容器有最小高度，以便空容器也能因 drop-zone 样式而被看到 container.style.minHeight = '10px'; const tagSortable = new this.Sortable(container, { group: { name: 'tags', pull: true, put: function (to) { // 如果目标容器包含手风琴（由 .tag_accordion 子元素判断），则不允许放入标签 // 标签只能放入最底层的分类容器（即手风琴的内容区域） return to.el.querySelector(':scope > .tag_accordion') === null; } }, // 允许跨分类拖拽 animation: 150, ghostClass: 'tag-ghost', draggable: '.tag_item', delay: 50, onStart: function (evt) { evt.item.classList.add('tag-dragging'); // 高亮所有可放置的分类容器（仅限底层容器） document.querySelectorAll('[data-sortable-category]').forEach(el => { if (el !== evt.from && !el.querySelector(':scope > .tag_accordion')) { el.classList.add('tag-drop-zone'); } }); }, onEnd: async (evt) => { evt.item.classList.remove('tag-dragging'); // 移除高亮 document.querySelectorAll('.tag-drop-zone').forEach(el => { el.classList.remove('tag-drop-zone'); }); // 如果是跨分类移动，由 onAdd 处理 if (evt.from !== evt.to) return; const { oldIndex, newIndex } = evt; if (oldIndex === newIndex) return; const newOrderKeys = []; Array.from(container.children).forEach(el => { if (el.classList.contains('tag_item')) { const name = el.getAttribute('data-name'); if (name) newOrderKeys.push(name); } }); const tempObj = { ...data }; for (const key in data) delete data[key]; // 先添加排序后的标签 newOrderKeys.forEach(key => { if (Object.prototype.hasOwnProperty.call(tempObj, key)) { data[key] = tempObj[key]; } }); // 补回其他键（即该层级下的子分类） for (const key in tempObj) { if (!Object.prototype.hasOwnProperty.call(data, key)) { data[key] = tempObj[key]; } } await this._saveTagOrder(data, tabName, categoryName); }, onAdd: async (evt) => { // 跨分类移动标签 const tagItem = evt.item; const tagName = tagItem.getAttribute('data-name'); const tagValue = tagItem.getAttribute('data-value'); const fromCategory = evt.from.getAttribute('data-sortable-category'); const toCategory = evt.to.getAttribute('data-sortable-category'); logger.debug(`[onAdd] 开始移动标签: ${tagName}, 从: ${fromCategory}, 到: ${toCategory}`); // 更新标签元素的分类属性 tagItem.setAttribute('data-category', toCategory); // 调用移动函数 (不立即保存，等待排序) const success = await this._moveTagToCategory(tagName, tagValue, fromCategory, toCategory, tabName, false); logger.debug(`[onAdd] 移动结果: ${success}`); if (!success) { // 如果移动失败，将标签移回原位置 logger.warn(`[onAdd] 移动失败，回滚 DOM`); evt.from.appendChild(tagItem); } else { // 移动成功，现在根据 DOM 顺序重新排序并保存 // 获取新的 DOM 顺序 const newOrderKeys = []; Array.from(evt.to.children).forEach(el => { if (el.classList.contains('tag_item')) { const name = el.getAttribute('data-name'); if (name) newOrderKeys.push(name); } }); // 重构 data 对象 const tempObj = { ...data }; for (const key in data) delete data[key]; // 先添加排序后的标签 newOrderKeys.forEach(key => { if (Object.prototype.hasOwnProperty.call(tempObj, key)) { data[key] = tempObj[key]; } }); // 补回其他键（即该层级下的子分类/原本就在此处的子分类） for (const key in tempObj) { if (!Object.prototype.hasOwnProperty.call(data, key)) { data[key] = tempObj[key]; } } // 保存排序后的数据 await this._saveTagOrder(data, tabName, toCategory); // 显示成功提示 logger.debug(`[标签移动] 成功并排序 | 标签: ${tagName} | 到: ${toCategory}`); app.extensionManager.toast.add({ severity: "success", summary: "移动成功", detail: `标签 "${tagName}" 已移动到 "${toCategory}"`, life: 2000 }); } } }); this.sortables.push(tagSortable); } } return container; } /** * 保存标签排序 * @param {Object} data 数据对象 * @param {string} tabName 标签页名称 * @param {string} categoryName 分类名称 */ static async _saveTagOrder(data, tabName, categoryName) { try { let success = false; const isFavorites = tabName === 'favorites' || categoryName === 'favorites'; if (isFavorites) { // 保存到 tags_user.json const userTagData = await ResourceManager.getUserTagData(); if (!userTagData.favorites) { userTagData.favorites = {}; } userTagData.favorites = TagManager.favorites; success = await ResourceManager.saveUserTags(userTagData); if (success) { logger.debug(`[标签排序] 收藏排序已保存`); app.extensionManager.toast.add({ severity: "success", summary: "排序保存成功", detail: "收藏标签顺序已更新", life: 2000 }); } } else { // 保存到 CSV if (TagManager.currentCsvFile && TagManager.tagData) { success = await ResourceManager.saveTagsCsv(TagManager.currentCsvFile, TagManager.tagData); if (success) { logger.debug(`[标签排序] CSV排序已保存 | 文件: ${TagManager.currentCsvFile}`); app.extensionManager.toast.add({ severity: "success", summary: "排序保存成功", detail: "标签文件顺序已更新", life: 2000 }); } } } if (!success) { app.extensionManager.toast.add({ severity: "error", summary: "保存失败", detail: "排序未能保存到服务器", life: 3000 }); } } catch (err) { logger.error(`[标签排序] 保存出错: ${err.message}`); } } /** * 移动标签到新分类 * @param {string} tagName 标签名称 * @param {string} tagValue 标签值 * @param {string} fromCategory 原分类名 * @param {string} toCategory 目标分类名 * @param {string} tabName 标签页名称 */ static async _moveTagToCategory(tagName, tagValue, fromCategory, toCategory, tabName, shouldSave = true) { try { // 收藏页不支持跨分类移动 if (tabName === 'favorites' || fromCategory === 'favorites' || toCategory === 'favorites') { logger.debug('[标签移动] 收藏页标签不支持跨分类移动'); return false; } // 如果源分类和目标分类相同，不处理 if (fromCategory === toCategory) { return false; } const filename = this.currentCsvFile; if (!filename || !TagManager.tagData) { logger.error('[标签移动] 无法获取当前CSV文件或标签数据'); return false; } // 获取源分类和目标分类 const sourceCategory = TagManager._findCategoryRecursively(TagManager.tagData, fromCategory); const targetCategory = TagManager._findCategoryRecursively(TagManager.tagData, toCategory); if (!sourceCategory) { logger.error(`[标签移动] 找不到源分类: ${fromCategory}`); return false; } if (!targetCategory) { logger.error(`[标签移动] 找不到目标分类: ${toCategory}`); return false; } // 检查目标分类是否已存在同名标签 if (targetCategory.hasOwnProperty(tagName)) { app.extensionManager.toast.add({ severity: "warn", summary: "移动失败", detail: `目标分类中已存在同名标签 "${tagName}"`, life: 3000 }); return false; } // 从源分类删除标签 delete sourceCategory[tagName]; // 添加到目标分类 targetCategory[tagName] = tagValue; if (!shouldSave) { return true; } // 保存到 CSV const success = await ResourceManager.saveTagsCsv(filename, TagManager.tagData); if (success) { logger.debug(`[标签移动] 成功 | 标签: ${tagName} | 从: ${fromCategory} | 到: ${toCategory}`); app.extensionManager.toast.add({ severity: "success", summary: "移动成功", detail: `标签 "${tagName}" 已移动到 "${toCategory}"`, life: 2000 }); return true; } else { // 回滚操作 targetCategory[tagName] && delete targetCategory[tagName]; sourceCategory[tagName] = tagValue; app.extensionManager.toast.add({ severity: "error", summary: "移动失败", detail: "保存到服务器失败", life: 3000 }); return false; } } catch (err) { logger.error(`[标签移动] 出错: ${err.message}`); app.extensionManager.toast.add({ severity: "error", summary: "移动失败", detail: err.message, life: 3000 }); return false; } } /** * 检查标签是否已收藏 */ static _isTagFavorited(tagValue, category = null) { if (!this.favorites) return false; // 如果提供了分类，优先检查该分类 if (category) { // 标准化分类名称（去除扩展名） const normalize = (name) => name.replace(/\.(csv|json|yaml|yml)$/i, ''); const targetCat = normalize(category); // 检查直接匹配 if (this.favorites[targetCat]) { return Object.values(this.favorites[targetCat]).includes(tagValue); } // 如果没找到直接匹配的Key，可能需要遍历Keys进行模糊匹配? // 目前假设 Keys 都是已标准化。 // 但如果 favorites 还是旧结构（平铺），直接检查 values const isOldStructure = Object.values(this.favorites).some(v => typeof v !== 'object'); if (isOldStructure) { // 旧结构忽略 category return Object.values(this.favorites).includes(tagValue); } return false; } // 如果没有提供分类（比如全局搜索），则递归检查 // 递归查找值 const checkRecursive = (obj) => { if (typeof obj !== 'object' || obj === null) return false; for (const value of Object.values(obj)) { if (typeof value === 'object' && value !== null) { if (checkRecursive(value)) return true; } else if (value === tagValue) { return true; } } return false; }; return checkRecursive(this.favorites); } /** * 创建标签元素 */ static _createTagElement(tagName, tagValue, categoryName = null) { const tagItem = document.createElement('div'); tagItem.className = 'tag_item'; tagItem.setAttribute('data-name', tagName); tagItem.setAttribute('data-value', tagValue); if (categoryName) { tagItem.setAttribute('data-category', categoryName); } // 检查标签是否已使用 if (this.isTagUsed(tagValue, this.currentNodeId, this.currentInputId)) { tagItem.classList.add('used'); this.usedTags.set(tagValue, tagItem); } const tagText = document.createElement('span'); tagText.className = 'tag_item_text'; // 检查是否已收藏 (考虑分类) // 如果是收藏页，TagElement的 categoryName 本身就是 SourceCategory // 如果是常规页，categoryName 就是 SourceCategory // 注意：categoryName 在这里通常是文件名，比如 "foo.csv" 或 "foo" // 我们后端/缓存的 key 通常是去掉了扩展名的。 // _isTagFavorited 内部会尝试处理，但最好我们传进去的是原始 categoryName，在内部处理。 const isFavorited = this._isTagFavorited(tagValue, categoryName); tagText.textContent = isFavorited ? `⭐️ ${tagName}` : tagName; tagItem.appendChild(tagText); // 添加鼠标事件监听 const mouseEnterCleanup = EventManager.addDOMListener(tagItem, 'mouseenter', () => { this._showTooltip(tagItem, tagValue); }); const mouseLeaveCleanup = EventManager.addDOMListener(tagItem, 'mouseleave', () => { this._hideTooltip(); }); // 添加点击事件 const tagClickCleanup = EventManager.addDOMListener(tagItem, 'click', (e) => { // 先隐藏tooltip this._hideTooltip(); this.handleTagClick(tagItem, tagName, tagValue, e); // 移除后，重新加载已插入标签 setTimeout(() => { // 重新加载已插入标签页 const insertedTabContent = document.querySelector('.popup_tab_content[data-category="已插入"]'); if (insertedTabContent && insertedTabContent.classList.contains('active')) { this._loadInsertedTagsContent(insertedTabContent); } // 更新所有标签页中的标签状态 this.updateAllTagsState(this.currentNodeId, this.currentInputId); // 如果当前在搜索状态，也要更新搜索结果中的标签状态 const searchResultList = document.querySelector('.tag_search_result_list'); if (searchResultList) { this.refreshSearchResultsState(); } }, 0); }); // 添加右键菜单 const contextMenuCleanup = EventManager.addDOMListener(tagItem, 'contextmenu', (e) => { e.preventDefault(); this._showContextMenu(e, tagValue, tagName, categoryName); }); this.eventCleanups.push(mouseEnterCleanup, mouseLeaveCleanup, tagClickCleanup, contextMenuCleanup); return tagItem; } /** * 显示右键菜单 */ static _showContextMenu(e, tagValue, tagName, category = null) { // 检查是否已收藏 (使用传入的 category) const isFavorited = this._isTagFavorited(tagValue, category); // 查找触发右键的标签元素 const tagItem = e.target.closest('.tag_item') || e.currentTarget; // ---为收藏标签提供简化菜单--- // 收藏标签（⭐️）是引用类型，不应该被编辑或删除，只能取消收藏 const menuItems = isFavorited ? [ // 收藏标签：仅显示取消收藏选项 { label: '取消收藏', icon: 'pi-minus-circle', onClick: async () => { // 使用CSV文件名作为分类名 let targetCategory = this.currentCsvFile || "默认"; targetCategory = targetCategory.replace(/\.(csv|json|yaml|yml)$/i, ''); const success = await ResourceManager.removeFavorite(tagValue, targetCategory); if (success) { // 移除本地缓存 (favorites 是嵌套对象 {category: {name: value}}) if (this.favorites && this.favorites[targetCategory]) { const catData = this.favorites[targetCategory]; for (const key in catData) { if (catData[key] === tagValue) { delete catData[key]; break; } } } // 更新UI状态 this.updateTagFavoriteState(tagValue, false); // 如果当前在收藏页，刷新收藏页 const activeTab = document.querySelector('.popup_tab.active'); if (activeTab && activeTab.getAttribute('data-category') === 'favorites') { const content = document.querySelector('.popup_tab_content.active'); if (content) { content.removeAttribute('data-loaded'); this._loadCategoryContent(content, this.favorites, 'favorites'); } } } } } ] : [ // 常规标签：显示完整菜单选项 { label: '收藏标签', icon: 'pi-star', onClick: async () => { // 使用CSV文件名作为分类名 let targetCategory = this.currentCsvFile || "默认"; targetCategory = targetCategory.replace(/\.(csv|json|yaml|yml)$/i, ''); const success = await ResourceManager.addFavorite(tagValue, tagName, targetCategory); if (success) { if (!this.favorites) this.favorites = {}; // 添加到本地缓存 if (!this.favorites[targetCategory]) { this.favorites[targetCategory] = {}; } this.favorites[targetCategory][tagName] = tagValue; // 更新UI状态 this.updateTagFavoriteState(tagValue, true); // 立即刷新收藏页（如果在） const activeTab = document.querySelector('.popup_tab.active'); if (activeTab && activeTab.getAttribute('data-category') === 'favorites') { const content = document.querySelector('.popup_tab_content.active'); if (content) { // 强制移除 data-loaded 属性 content.removeAttribute('data-loaded'); this._loadCategoryContent(content, this.favorites, 'favorites'); } } } } }, { label: '编辑标签', icon: 'pi-pencil', onClick: () => { // 使用识别出的 tagItem 执行编辑 this._handleEditTag(tagItem, tagName, tagValue, category); } }, { separator: true }, { label: '删除标签', icon: 'pi-trash', danger: true, onClick: () => { // 使用识别出的 tagItem 执行删除 this._handleDeleteTag(tagItem, tagName, tagValue); } } ]; showContextMenu({ x: e.clientX, y: e.clientY, items: menuItems }); } /** * 处理添加新分类 * @param {HTMLElement} triggerElement 触发元素（按钮） * @param {string|null} parentTabName 父 Tab 名称（如果是添加子分类） * @param {HTMLElement|null} tabsContainer Tab 容器（如果是添加顶级分类） * @param {HTMLElement|null} tabContentsContainer Tab 内容容器（如果是添加顶级分类） * @param {Object} data 当前数据对象 * @param {string|null} parentCategory 父分类名称（如果是添加子分类） */ static _handleAddCategory(triggerElement, parentTabName, tabsContainer, tabContentsContainer, data, parentCategory = null) { const isTopLevel = parentTabName === null; // 是否创建顶级分类（Tab） // 创建表单内容渲染函数 const renderForm = (container) => { container.style.display = 'flex'; container.style.flexDirection = 'column'; container.style.gap = '16px'; container.style.minWidth = '250px'; // 分类名输入组 - 使用浮动标签样式 const nameGroup = document.createElement('div'); nameGroup.className = 'settings-form-group'; const nameFloatContainer = document.createElement('div'); nameFloatContainer.className = 'float-label-container'; const nameInput = document.createElement('input'); nameInput.type = 'text'; nameInput.className = 'p-inputtext p-component'; nameInput.placeholder = ' '; const nameLabel = document.createElement('label'); nameLabel.textContent = '分类名称'; nameFloatContainer.appendChild(nameInput); nameFloatContainer.appendChild(nameLabel); nameGroup.appendChild(nameFloatContainer); container.appendChild(nameGroup); // 返回引用以便获取值 return { nameInput }; }; let inputs = {}; createConfirmPopup({ target: triggerElement, message: isTopLevel ? '创建新的标签页分类' : `在 "${parentTabName}" 下创建子分类`, icon: 'pi-plus', position: 'top', confirmLabel: '创建', renderFormContent: (container) => { inputs = renderForm(container); }, onConfirm: async () => { const categoryName = inputs.nameInput.value.trim(); if (!categoryName) { app.extensionManager.toast.add({ severity: "warn", summary: "输入无效", detail: "分类名称不能为空", life: 3000 }); throw new Error("Validation failed"); } // 检查分类名是否已存在 const targetData = isTopLevel ? TagManager.tagData : data; if (targetData && targetData.hasOwnProperty(categoryName)) { app.extensionManager.toast.add({ severity: "warn", summary: "创建失败", detail: `分类 "${categoryName}" 已存在`, life: 3000 }); throw new Error("Category already exists"); } // 保存新分类 await this._saveNewCategory(categoryName, isTopLevel, parentTabName, parentCategory); } }); } /** * 保存新分类到 CSV * @param {string} categoryName 分类名称 * @param {boolean} isTopLevel 是否为顶级分类 * @param {string|null} parentTabName 父 Tab 名称 * @param {string|null} parentCategory 父分类名称 */ static async _saveNewCategory(categoryName, isTopLevel, parentTabName, parentCategory) { try { // 使用 loadTagsCsv 加载当前 CSV 文件的最新数据 const filename = this.currentCsvFile || await ResourceManager.getSelectedTagFile(); if (!filename) { throw new Error("无法确定当前 CSV 文件"); } const data = await ResourceManager.loadTagsCsv(filename); if (!data) { throw new Error("加载标签数据失败"); } // 确定目标位置并添加新分类 if (isTopLevel) { // 检查顶级分类是否已存在 if (data.hasOwnProperty(categoryName)) { app.extensionManager.toast.add({ severity: "warn", summary: "分类已存在", detail: `分类 "${categoryName}" 已存在`, life: 3000 }); throw new Error("Category already exists"); } // 添加顶级分类（空分类需要有一个占位标签才能保存） data[categoryName] = { "__placeholder__": "__empty__" }; } else { // 查找父分类 const parentData = this._findCategoryRecursively(data, parentTabName); if (!parentData) { throw new Error(`找不到父分类: ${parentTabName}`); } // 检查子分类是否已存在 if (parentData.hasOwnProperty(categoryName)) { app.extensionManager.toast.add({ severity: "warn", summary: "分类已存在", detail: `分类 "${categoryName}" 已存在于 "${parentTabName}" 下`, life: 3000 }); throw new Error("Category already exists"); } // 添加子分类（空分类需要有一个占位标签才能保存） parentData[categoryName] = { "__placeholder__": "__empty__" }; } // 保存到 CSV 文件 await ResourceManager.saveTagsCsv(filename, data); // 重新加载 CSV 数据以刷新缓存 const newData = await ResourceManager.loadTagsCsv(filename); // 更新静态数据引用 TagManager.tagData = newData; // 实时刷新 UI if (isTopLevel) { // 顶级分类：在 Tab 栏中添加新 Tab（在"添加分类"按钮之前） const tabs = document.querySelector('.popup_tabs'); const tabContents = document.querySelector('.tag_category_container'); const addCategoryBtn = tabs?.querySelector('.add_category_tab'); if (tabs && tabContents && addCategoryBtn) { // 创建新 Tab const tab = document.createElement('div'); tab.className = 'popup_tab'; tab.textContent = categoryName; tab.setAttribute('data-category', categoryName); // 创建内容区域 const content = document.createElement('div'); content.className = 'popup_tab_content'; content.setAttribute('data-category', categoryName); content.style.flex = '1'; content.style.display = 'none'; // 添加 Tab 点击事件 const tabClickCleanup = EventManager.addDOMListener(tab, 'click', () => { // 取消所有 Tab 激活状态 tabs.querySelectorAll('.popup_tab').forEach(t => t.classList.remove('active')); tabContents.querySelectorAll('.popup_tab_content').forEach(c => { c.classList.remove('active'); c.style.display = 'none'; }); // 激活当前 Tab tab.classList.add('active'); content.classList.add('active'); content.style.display = 'block'; // 记忆当前选择的标签页 TagManager.setLastActiveTab(categoryName); // 懒加载内容 if (content.getAttribute('data-loaded') !== 'true') { this._loadCategoryContent(content, newData[categoryName], categoryName); content.setAttribute('data-loaded', 'true'); } }); this.eventCleanups.push(tabClickCleanup); // 在"添加分类"按钮之前插入新 Tab tabs.insertBefore(tab, addCategoryBtn); tabContents.appendChild(content); // 自动激活新创建的分类 tab.click(); } } else { // 子分类：刷新当前 Tab 的内容 const activeTab = document.querySelector('.popup_tab.active'); const content = document.querySelector('.popup_tab_content.active'); if (activeTab && content) { const cat = activeTab.getAttribute('data-category'); content.innerHTML = ''; content.removeAttribute('data-loaded'); this._loadCategoryContent(content, newData[cat], cat); } } app.extensionManager.toast.add({ severity: "success", summary: "创建成功", detail: `分类 "${categoryName}" 已创建`, life: 3000 }); } catch (error) { if (error.message !== "Validation failed" && error.message !== "Category already exists") { logger.error(`创建分类失败: ${error.message}`); app.extensionManager.toast.add({ severity: "error", summary: "创建失败", detail: error.message, life: 3000 }); } } } /** * 显示分类右键菜单 * @param {Event} e 鼠标事件 * @param {string} categoryName 分类名称 * @param {boolean} isTopLevel 是否为顶级分类 * @param {string|null} parentCategory 父分类名称（对于手风琴） */ static _showCategoryContextMenu(e, categoryName, isTopLevel, parentCategory = null) { // 特殊分类不允许修改或删除 const specialCategories = ['⭐️', 'favorites', '已插入', '标签']; if (specialCategories.includes(categoryName)) { return; } // 保存触发元素以便后续使用 const targetElement = e.target.closest('.popup_tab') || e.target.closest('.tag_accordion_header') || e.target; const menuItems = [ { label: '修改名称', icon: 'pi-pencil', onClick: () => { // 从 DOM 获取最新的分类名称 const currentName = isTopLevel ? targetElement.getAttribute('data-category') || targetElement.textContent.trim() : targetElement.closest('.tag_accordion')?.getAttribute('data-category') || categoryName; this._handleEditCategory(targetElement, currentName, isTopLevel, parentCategory); } }, { separator: true }, { label: '删除分类', icon: 'pi-trash', danger: true, onClick: () => { // 从 DOM 获取最新的分类名称 const currentName = isTopLevel ? targetElement.getAttribute('data-category') || targetElement.textContent.trim() : targetElement.closest('.tag_accordion')?.getAttribute('data-category') || categoryName; this._handleDeleteCategory(targetElement, currentName, isTopLevel, parentCategory); } } ]; showContextMenu({ x: e.clientX, y: e.clientY, items: menuItems }); } /** * 处理编辑分类名称 * @param {HTMLElement} target 触发元素 * @param {string} oldName 原分类名称 * @param {boolean} isTopLevel 是否为顶级分类 * @param {string|null} parentCategory 父分类名称 */ static _handleEditCategory(target, oldName, isTopLevel, parentCategory) { // 创建表单内容渲染函数 const renderForm = (container) => { container.style.display = 'flex'; container.style.flexDirection = 'column'; container.style.gap = '16px'; container.style.minWidth = '250px'; const nameGroup = document.createElement('div'); nameGroup.className = 'settings-form-group'; const nameFloatContainer = document.createElement('div'); nameFloatContainer.className = 'float-label-container'; const nameInput = document.createElement('input'); nameInput.type = 'text'; nameInput.className = 'p-inputtext p-component'; nameInput.placeholder = ' '; nameInput.value = oldName; const nameLabel = document.createElement('label'); nameLabel.textContent = '分类名称'; nameFloatContainer.appendChild(nameInput); nameFloatContainer.appendChild(nameLabel); nameGroup.appendChild(nameFloatContainer); container.appendChild(nameGroup); // 自动聚焦并选中文本 setTimeout(() => { nameInput.focus(); nameInput.select(); }, 100); return { nameInput }; }; let inputs = {}; createConfirmPopup({ target: target, message: `修改分类名称`, icon: 'pi-pencil', position: 'bottom', confirmLabel: '保存', renderFormContent: (container) => { inputs = renderForm(container); }, onConfirm: async () => { const newName = inputs.nameInput.value.trim(); if (!newName) { app.extensionManager.toast.add({ severity: "warn", summary: "输入无效", detail: "分类名称不能为空", life: 3000 }); throw new Error("Validation failed"); } if (newName === oldName) { return; // 名称未改变，无需保存 } await this._saveEditedCategory(oldName, newName, isTopLevel, parentCategory); } }); } /** * 保存编辑后的分类名称 */ static async _saveEditedCategory(oldName, newName, isTopLevel, parentCategory) { try { const filename = this.currentCsvFile || await ResourceManager.getSelectedTagFile(); if (!filename) { throw new Error("无法确定当前 CSV 文件"); } const data = await ResourceManager.loadTagsCsv(filename); if (!data) { throw new Error("加载标签数据失败"); } if (isTopLevel) { // 顶级分类重命名 if (data.hasOwnProperty(newName)) { app.extensionManager.toast.add({ severity: "warn", summary: "名称已存在", detail: `分类 "${newName}" 已存在`, life: 3000 }); throw new Error("Category already exists"); } // 复制数据到新名称，删除旧名称 data[newName] = data[oldName]; delete data[oldName]; } else { // 子分类重命名 const parentData = this._findCategoryRecursively(data, parentCategory); if (!parentData) { throw new Error(`找不到父分类: ${parentCategory}`); } if (parentData.hasOwnProperty(newName)) { app.extensionManager.toast.add({ severity: "warn", summary: "名称已存在", detail: `分类 "${newName}" 已存在于 "${parentCategory}" 下`, life: 3000 }); throw new Error("Category already exists"); } parentData[newName] = parentData[oldName]; delete parentData[oldName]; } await ResourceManager.saveTagsCsv(filename, data); const newData = await ResourceManager.loadTagsCsv(filename); TagManager.tagData = newData; // 刷新 UI if (isTopLevel) { // 更新 Tab 名称 const tab = document.querySelector(`.popup_tab[data-category="${oldName}"]`); const tabContent = document.querySelector(`.popup_tab_content[data-category="${oldName}"]`); if (tab) { tab.textContent = newName; tab.setAttribute('data-category', newName); } if (tabContent) { tabContent.setAttribute('data-category', newName); } } else { // 刷新当前 Tab 内容 const activeTab = document.querySelector('.popup_tab.active'); const content = document.querySelector('.popup_tab_content.active'); if (activeTab && content) { const cat = activeTab.getAttribute('data-category'); content.innerHTML = ''; content.removeAttribute('data-loaded'); this._loadCategoryContent(content, newData[cat], cat); } } app.extensionManager.toast.add({ severity: "success", summary: "修改成功", detail: `分类已重命名为 "${newName}"`, life: 3000 }); } catch (error) { if (error.message !== "Validation failed" && error.message !== "Category already exists") { logger.error(`修改分类失败: ${error.message}`); app.extensionManager.toast.add({ severity: "error", summary: "修改失败", detail: error.message, life: 3000 }); } } } /** * 处理删除分类 */ static async _handleDeleteCategory(targetElement, categoryName, isTopLevel, parentCategory) { // 使用确认弹窗 - 定位到触发元素 createConfirmPopup({ target: targetElement, message: `确定要删除分类 "${categoryName}" 和该分类下的所有标签吗？`, icon: 'pi-exclamation-triangle', iconColor: 'var(--p-orange-500)', position: 'bottom', confirmLabel: '删除', cancelLabel: '取消', confirmDanger: true, onConfirm: async () => { try { const filename = this.currentCsvFile || await ResourceManager.getSelectedTagFile(); if (!filename) { throw new Error("无法确定当前 CSV 文件"); } const data = await ResourceManager.loadTagsCsv(filename); if (!data) { throw new Error("加载标签数据失败"); } if (isTopLevel) { delete data[categoryName]; } else { const parentData = this._findCategoryRecursively(data, parentCategory); if (parentData) { delete parentData[categoryName]; } } await ResourceManager.saveTagsCsv(filename, data); const newData = await ResourceManager.loadTagsCsv(filename); TagManager.tagData = newData; // 刷新 UI if (isTopLevel) { // 删除 Tab 和内容 const tab = document.querySelector(`.popup_tab[data-category="${categoryName}"]`); const tabContent = document.querySelector(`.popup_tab_content[data-category="${categoryName}"]`); const wasActive = tab?.classList.contains('active'); tab?.remove(); tabContent?.remove(); // 如果删除的是当前激活的 Tab，激活第一个普通 Tab if (wasActive) { const firstTab = document.querySelector('.popup_tab:not(.add_category_tab)'); if (firstTab) { firstTab.click(); } } } else { // 刷新当前 Tab 内容 const activeTab = document.querySelector('.popup_tab.active'); const content = document.querySelector('.popup_tab_content.active'); if (activeTab && content) { const cat = activeTab.getAttribute('data-category'); content.innerHTML = ''; content.removeAttribute('data-loaded'); this._loadCategoryContent(content, newData[cat], cat); } } app.extensionManager.toast.add({ severity: "success", summary: "删除成功", detail: `分类 "${categoryName}" 已删除`, life: 3000 }); } catch (error) { logger.error(`删除分类失败: ${error.message}`); app.extensionManager.toast.add({ severity: "error", summary: "删除失败", detail: error.message, life: 3000 }); } } }); } /** * 处理添加新标签 * @param {string} categoryKey 分类键 * @param {string} categoryName 分类名 * @param {HTMLElement} triggerElement 触发元素（加号按钮） */ static _handleAddTag(categoryKey, categoryName, triggerElement) { // 创建表单内容渲染函数 const renderForm = (container) => { container.style.display = 'flex'; container.style.flexDirection = 'column'; container.style.gap = '16px'; container.style.minWidth = '300px'; // 标签名输入组 - 使用浮动标签样式 const nameGroup = document.createElement('div'); nameGroup.className = 'settings-form-group'; const nameFloatContainer = document.createElement('div'); nameFloatContainer.className = 'float-label-container'; const nameInput = document.createElement('input'); nameInput.type = 'text'; nameInput.value = ''; nameInput.className = 'p-inputtext p-component'; nameInput.placeholder = ' '; // 使用空格触发 :not(:placeholder-shown) const nameLabel = document.createElement('label'); nameLabel.textContent = '标签名称'; nameFloatContainer.appendChild(nameInput); nameFloatContainer.appendChild(nameLabel); nameGroup.appendChild(nameFloatContainer); container.appendChild(nameGroup); // 标签内容输入组 - 使用浮动标签样式 const valueGroup = document.createElement('div'); valueGroup.className = 'settings-form-group'; const valueFloatContainer = document.createElement('div'); valueFloatContainer.className = 'float-label-container'; const valueInput = document.createElement('textarea'); valueInput.value = ''; valueInput.className = 'p-inputtext p-component settings-form-textarea'; valueInput.placeholder = ' '; valueInput.rows = 3; valueInput.style.resize = 'vertical'; valueInput.style.minHeight = '80px'; const valueLabel = document.createElement('label'); valueLabel.textContent = '标签内容'; valueFloatContainer.appendChild(valueInput); valueFloatContainer.appendChild(valueLabel); valueGroup.appendChild(valueFloatContainer); container.appendChild(valueGroup); // 返回引用以便获取值 return { nameInput, valueInput }; }; // 使用传入的触发元素作为定位目标，如果没有则降级到手风琴头部 const anchor = triggerElement || document.querySelector(`.tag_accordion[data-category="${CSS.escape(categoryKey)}"] .tag_accordion_header`) || document.body; let inputs = {}; createConfirmPopup({ target: anchor, message: `在 "${categoryKey}" 分类下创建新标签`, icon: 'pi-plus', position: 'left', // 创建按钮在右侧，气泡向左显示 confirmLabel: '保存', renderFormContent: (container) => { inputs = renderForm(container); }, onConfirm: async () => { const newName = inputs.nameInput.value.trim(); const newValue = inputs.valueInput.value.trim(); if (!newName || !newValue) { app.extensionManager.toast.add({ severity: "warn", summary: "输入无效", detail: "标签名称和内容不能为空", life: 3000 }); throw new Error("Validation failed"); } // 执行保存逻辑 await this._saveNewTag(categoryKey, categoryName, newName, newValue); } }); } /** * 保存新标签 */ static async _saveNewTag(categoryKey, categoryName, tagName, tagValue) { try { // 使用 loadTagsCsv 加载当前 CSV 文件的最新数据 const filename = this.currentCsvFile || await ResourceManager.getSelectedTagFile(); if (!filename) { throw new Error("无法确定当前 CSV 文件"); } const data = await ResourceManager.loadTagsCsv(filename); if (!data || Object.keys(data).length === 0) { throw new Error("加载标签数据失败"); } // 查找目标分类 let targetCategory = TagManager._findCategoryRecursively(data, categoryKey); if (!targetCategory) { // 如果分类不存在，创建新分类 data[categoryKey] = {}; targetCategory = data[categoryKey]; } // 检查标签名是否已存在 if (targetCategory.hasOwnProperty(tagName)) { app.extensionManager.toast.add({ severity: "warn", summary: "标签已存在", detail: `标签 "${tagName}" 已存在于该分类中`, life: 3000 }); throw new Error("Tag already exists"); } // 添加新标签 targetCategory[tagName] = tagValue; // 保存到 CSV 文件 await ResourceManager.saveTagsCsv(filename, data); // 重新加载 CSV 数据以刷新缓存 const newData = await ResourceManager.loadTagsCsv(filename); // 更新静态数据引用，确保后续拖拽排序使用最新数据 TagManager.tagData = newData; // 刷新当前视图 const activeTab = document.querySelector('.popup_tab.active'); const content = document.querySelector('.popup_tab_content.active'); if (activeTab && content) { const cat = activeTab.getAttribute('data-category'); content.innerHTML = ''; content.removeAttribute('data-loaded'); if (cat === 'favorites') { this._loadCategoryContent(content, this.favorites, 'favorites'); } else { this._loadCategoryContent(content, newData[cat], cat); } } app.extensionManager.toast.add({ severity: "success", summary: "创建成功", detail: `标签 "${tagName}" 已添加到 "${categoryKey}" 分类`, life: 3000 }); } catch (error) { // 如果是验证错误，不显示错误提示（已经在验证时显示） if (error.message !== "Validation failed" && error.message !== "Tag already exists") { logger.error(`创建标签失败: ${error.message}`); app.extensionManager.toast.add({ severity: "error", summary: "创建失败", detail: error.message, life: 3000 }); } } } /** * 处理编辑标签 */ static _handleEditTag(target, tagName, tagValue, category) { // 创建表单内容渲染函数 const renderForm = (container) => { container.style.display = 'flex'; container.style.flexDirection = 'column'; container.style.gap = '16px'; container.style.minWidth = '300px'; // 标签名输入组 - 使用浮动标签样式 const nameGroup = document.createElement('div'); nameGroup.className = 'settings-form-group'; const nameFloatContainer = document.createElement('div'); nameFloatContainer.className = 'float-label-container'; const nameInput = document.createElement('input'); nameInput.type = 'text'; nameInput.value = tagName; nameInput.className = 'p-inputtext p-component'; nameInput.placeholder = ' '; // 使用空格触发 :not(:placeholder-shown) const nameLabel = document.createElement('label'); nameLabel.textContent = '标签名称'; nameFloatContainer.appendChild(nameInput); nameFloatContainer.appendChild(nameLabel); nameGroup.appendChild(nameFloatContainer); container.appendChild(nameGroup); // 标签内容输入组 - 使用浮动标签样式 const valueGroup = document.createElement('div'); valueGroup.className = 'settings-form-group'; const valueFloatContainer = document.createElement('div'); valueFloatContainer.className = 'float-label-container'; const valueInput = document.createElement('textarea'); valueInput.value = tagValue; valueInput.className = 'p-inputtext p-component settings-form-textarea'; valueInput.placeholder = ' '; valueInput.rows = 3; valueInput.style.resize = 'vertical'; valueInput.style.minHeight = '80px'; const valueLabel = document.createElement('label'); valueLabel.textContent = '标签内容'; valueFloatContainer.appendChild(valueInput); valueFloatContainer.appendChild(valueLabel); valueGroup.appendChild(valueFloatContainer); container.appendChild(valueGroup); // 返回引用以便获取值 return { nameInput, valueInput, categoryInput: null }; }; // 查找合适的定位目标 (tag_item) const tagItem = document.querySelector(`.tag_item[data-value="${CSS.escape(tagValue)}"]`); const anchor = tagItem || document.body; // 降级处理 let inputs = {}; createConfirmPopup({ target: anchor, message: '编辑标签信息', icon: 'pi-pencil', confirmLabel: '保存', renderFormContent: (container) => { inputs = renderForm(container); }, onConfirm: async () => { const newName = inputs.nameInput.value.trim(); const newValue = inputs.valueInput.value.trim(); const newCategory = inputs.categoryInput ? inputs.categoryInput.value.trim() : category; if (!newName || !newValue) { app.extensionManager.toast.add({ severity: "warn", summary: "输入无效", detail: "标签名称和内容不能为空", life: 3000 }); throw new Error("Validation failed"); } // 执行保存逻辑 await this._saveTagEdit(tagName, tagValue, category, newName, newValue, newCategory); } }); } /** * 保存标签编辑 */ static async _saveTagEdit(oldName, oldValue, oldCategory, newName, newValue, newCategory) { try { // 使用 loadTagsCsv 加载当前 CSV 文件的最新数据 const filename = this.currentCsvFile || await ResourceManager.getSelectedTagFile(); if (!filename) { throw new Error("无法确定当前 CSV 文件"); } const data = await ResourceManager.loadTagsCsv(filename); if (!data || Object.keys(data).length === 0) { throw new Error("加载标签数据失败"); } // 查找原始标签 const found = TagManager._findTagRecursively(data, oldName, oldValue); if (!found) { throw new Error("无法定位原始标签数据，请刷新后重试"); } const { parent } = found; // 删除旧标签 delete parent[oldName]; // 确定目标分类对象 let targetCategoryObj; if (oldCategory !== newCategory && newCategory) { // 如果分类改变，移动到新分类 targetCategoryObj = TagManager._findCategoryRecursively(data, newCategory); if (!targetCategoryObj) { // 如果目标分类不存在，创建它 data[newCategory] = {}; targetCategoryObj = data[newCategory]; } } else { // 分类未变，仍在原父对象中 targetCategoryObj = parent; } // 添加新标签（或更新后的标签） targetCategoryObj[newName] = newValue; // 保存到 CSV 文件 const saveSuccess = await ResourceManager.saveTagsCsv(filename, data); if (!saveSuccess) { throw new Error("保存文件失败"); } // 重新加载并更新状态 const newData = await ResourceManager.loadTagsCsv(filename); TagManager.tagData = newData; // 刷新当前视图 const activeTab = document.querySelector('.popup_tab.active'); const content = document.querySelector('.popup_tab_content.active'); if (activeTab && content) { const cat = activeTab.getAttribute('data-category'); content.innerHTML = ''; content.removeAttribute('data-loaded'); if (cat === 'favorites') { this._loadCategoryContent(content, this.favorites, 'favorites'); } else { // 常规分类，如果分类名变了可能需要动态加载新分类 const displayCategory = newData[cat] ? cat : newCategory; this._loadCategoryContent(content, newData[displayCategory] || newData, displayCategory); } } app.extensionManager.toast.add({ severity: "success", summary: "保存成功", detail: "标签已更新", life: 3000 }); } catch (error) { logger.error(`保存编辑失败: ${error.message}`); app.extensionManager.toast.add({ severity: "error", summary: "保存失败", detail: error.message, life: 3000 }); } } /** * 处理删除标签 */ static async _handleDeleteTag(targetElement, tagName, tagValue) { createConfirmPopup({ target: targetElement || document.body, message: `确定要删除标签 "${tagName}" 吗？`, icon: 'pi-exclamation-triangle', iconColor: 'var(--p-orange-500)', confirmLabel: '删除', cancelLabel: '取消', confirmDanger: true, onConfirm: async () => { try { // 1. 获取当前 CSV 文件名 const filename = this.currentCsvFile || await ResourceManager.getSelectedTagFile(); if (!filename) { throw new Error("无法确定当前 CSV 文件"); } // 2. 加载 CSV 数据 const data = await ResourceManager.loadTagsCsv(filename); if (!data) { throw new Error("加载标签数据失败"); } // 3. 在数据中查找并删除标签 let deleted = false; // 递归删除函数 const deleteRecursively = (obj) => { for (const key in obj) { if (key === tagName && obj[key] === tagValue) { delete obj[key]; deleted = true; return true; } if (typeof obj[key] === 'object' && obj[key] !== null) { if (deleteRecursively(obj[key])) { return true; } } } return false; }; deleteRecursively(data); if (!deleted) { throw new Error("未找到指定的标签"); } // 4. 保存更改 const saveSuccess = await ResourceManager.saveTagsCsv(filename, data); if (!saveSuccess) { throw new Error("保存文件失败"); } // 5. 刷新 UI TagManager.tagData = data; // 重新加载当前视图 const activeTab = document.querySelector('.popup_tab.active'); if (activeTab) { const category = activeTab.getAttribute('data-category'); const content = document.querySelector(`.popup_tab_content[data-category="${category}"]`); if (content) { if (category === 'favorites') { this._loadCategoryContent(content, this.favorites, 'favorites'); } else if (category === 'inserted') { this._loadInsertedTagsContent(content); } else { this._loadCategoryContent(content, data[category], category); } } } app.extensionManager.toast.add({ severity: "success", summary: "删除成功", detail: `标签 "${tagName}" 已删除`, life: 3000 }); } catch (error) { logger.error(`删除标签失败: ${error.message}`); app.extensionManager.toast.add({ severity: "error", summary: "删除失败", detail: error.message, life: 3000 }); } } }); } /** * 更新标签的收藏状态显示 */ static updateTagFavoriteState(tagValue, isFavorited) { // 查找所有具有该值的标签元素 // 注意：需要转义引号以防止选择器错误 const safeValue = tagValue.replace(/"/g, '\\"'); const tagItems = document.querySelectorAll(`.tag_item[data-value="${safeValue}"]`); tagItems.forEach(item => { const textSpan = item.querySelector('.tag_item_text'); if (textSpan) { const currentText = textSpan.textContent; // 移除现有的星星前缀（如果有） const cleanText = currentText.replace(/^⭐️\s*/, ''); // 根据状态添加或不添加前缀 textSpan.textContent = isFavorited ? `⭐️ ${cleanText}` : cleanText; } }); } /** * 比对输入框内容与标签缓存，更新标签状态 */ static compareInputWithCache(nodeId, inputId, updateUI = true) { const startTime = performance.now(); // 获取输入框值 const mapping = UIToolkit._findMapping(nodeId, inputId, (nodeId === this.currentNodeId && inputId === this.currentInputId) ? this.currentWidgetKey : null); if (!mapping || !mapping.inputEl) return { cacheCount: 0, matchedCount: 0 }; const inputValue = mapping.inputEl.value; // 获取缓存 const cache = TagCacheService.getTagCache(nodeId, inputId); const cacheCount = cache ? cache.size : 0; let matchedCount = 0; if (updateUI) { // 清空已使用标签映射 this.usedTags.clear(); // 获取所有标签元素 const tagItems = document.querySelectorAll('.tag_item'); // 遍历所有标签元素，更新状态 tagItems.forEach(tagItem => { const tagValue = tagItem.getAttribute('data-value'); if (!tagValue) return; // 检查是否在输入框中 const isUsed = TagCacheService.isTagInInput(nodeId, inputId, tagValue, inputValue); if (isUsed) { matchedCount++; this.usedTags.set(tagValue, tagItem); } // 更新标签显示状态 this.updateTagState(tagItem, isUsed); }); } else { // 只统计匹配数量，不更新UI cache?.forEach((_, rawTag) => { if (TagCacheService.isTagInInput(nodeId, inputId, rawTag, inputValue)) { matchedCount++; } }); } const endTime = performance.now(); // logger.debug(`标签状态 | 动作:比对 | 节点:${nodeId} | 输入框:${inputId} | 缓存数量:${cacheCount} | 匹配数量:${matchedCount} | 耗时:${(endTime - startTime).toFixed(2)}ms`); return { cacheCount, matchedCount }; } /** * 创建特殊标签页结构（包含正常标签、收藏标签和已插入标签） */ static _createTabsWithSpecialCategories(tagData, favorites, container, nodeId, inputId) { // 创建标签页框架 const tabsContainer = document.createElement('div'); tabsContainer.className = 'popup_tabs_container'; // 创建标签滚动区域 const tabsScroll = document.createElement('div'); tabsScroll.className = 'popup_tabs_scroll'; // 创建标签栏 const tabs = document.createElement('div'); tabs.className = 'popup_tabs'; // 创建内容区域 const content = document.createElement('div'); content.className = 'popup_content'; // 准备所有分类 const categories = []; // 1. 添加收藏夹分类 categories.push({ name: 'favorites', displayName: '⭐️ 收藏', data: favorites, type: 'favorites' }); // 2. 添加CSV中的分类 if (tagData) { // 构建查找表 this.tagLookup.clear(); const buildLookup = (obj) => { for (const [key, value] of Object.entries(obj)) { if (typeof value === 'object' && value !== null) { buildLookup(value); } else if (typeof value === 'string') { // Value -> Name 映射 // 注意：如果不同标签有相同的值，后面的会覆盖前面的名称。这通常是可以接受的。 this.tagLookup.set(value, key); } } }; buildLookup(tagData); Object.keys(tagData).forEach(key => { categories.push({ name: key, displayName: key, data: tagData[key], type: 'normal' }); }); } // 3. 添加已插入分类 categories.push({ name: '已插入', displayName: '📝 已插入', data: null, type: 'inserted' }); // 获取上次激活的标签页 let activeTabName = this.getLastActiveTab(); // 如果上次激活的是普通分类，但当前CSV中没有这个分类，则重置为第一个分类 if (activeTabName && activeTabName !== 'favorites' && activeTabName !== '已插入' && tagData && !tagData[activeTabName]) { activeTabName = null; } if (!activeTabName && categories.length > 0) { activeTabName = categories[0].name; } // 创建标签页和内容 categories.forEach((category, index) => { // 创建标签 const tab = document.createElement('div'); tab.className = 'popup_tab'; tab.textContent = category.displayName; tab.setAttribute('data-category', category.name); // 创建内容容器 const tabContent = document.createElement('div'); tabContent.className = 'popup_tab_content'; tabContent.setAttribute('data-category', category.name); // 激活状态处理 if (category.name === activeTabName) { tab.classList.add('active'); tabContent.classList.add('active'); // 立即加载当前激活的标签页内容 if (category.type === 'favorites') { // 使用标准的 _loadCategoryContent 加载，因为数据结构已统一 this._loadCategoryContent(tabContent, category.data, 'favorites'); } else if (category.type === 'inserted') { this._loadInsertedTagsContent(tabContent); } else { this._loadCategoryContent(tabContent, category.data, category.name); } } // 标签点击事件 const tabClickCleanup = EventManager.addDOMListener(tab, 'click', () => { // 切换标签激活状态 tabs.querySelectorAll('.popup_tab').forEach(t => t.classList.remove('active')); tab.classList.add('active'); // 切换内容激活状态 content.querySelectorAll('.popup_tab_content').forEach(c => c.classList.remove('active')); tabContent.classList.add('active'); // 记录激活的标签页 this.setLastActiveTab(category.name); // 懒加载内容或需要实时刷新的内容 if (!tabContent.hasAttribute('data-loaded') || category.type === 'favorites') { if (category.type === 'favorites') { // 收藏页每次点击都重新获取最新数据 // 先清空现有内容 tabContent.innerHTML = ''; // 重新获取收藏数据 ResourceManager.getFavorites().then(favorites => { this.favorites = favorites; // 更新本地缓存 this._loadCategoryContent(tabContent, favorites, 'favorites'); tabContent.setAttribute('data-loaded', 'true'); }).catch(err => { console.error("刷新收藏失败", err); }); } else if (category.type === 'inserted') { this._loadInsertedTagsContent(tabContent); tabContent.setAttribute('data-loaded', 'true'); } else { // 常规分类只加载一次 if (!tabContent.hasAttribute('data-loaded')) { this._loadCategoryContent(tabContent, category.data, category.name); tabContent.setAttribute('data-loaded', 'true'); } } } else if (category.type === 'inserted') { // 已插入标签页每次点击都刷新 this._loadInsertedTagsContent(tabContent); } // 确保标签完全可见 tab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }); }); this.eventCleanups.push(tabClickCleanup); tabs.appendChild(tab); content.appendChild(tabContent); }); // ---在 Tab 栏末尾添加"新建分类"按钮--- const addTabButton = document.createElement('div'); addTabButton.className = 'popup_tab add_category_tab'; addTabButton.title = '新建分类'; const addTabIcon = document.createElement('span'); addTabIcon.className = 'pi pi-plus'; addTabButton.appendChild(addTabIcon); const addTabClickCleanup = EventManager.addDOMListener(addTabButton, 'click', (e) => { e.stopPropagation(); this._handleAddCategory(addTabButton, null, tabs, content, tagData); }); this.eventCleanups.push(addTabClickCleanup); tabs.appendChild(addTabButton); // 添加滚动指示器 const leftIndicator = document.createElement('div'); leftIndicator.className = 'popup_tabs_indicator left'; const leftIcon = document.createElement('i'); leftIcon.className = 'pi pi-chevron-left'; leftIndicator.appendChild(leftIcon); const rightIndicator = document.createElement('div'); rightIndicator.className = 'popup_tabs_indicator right'; const rightIcon = document.createElement('i'); rightIcon.className = 'pi pi-chevron-right'; rightIndicator.appendChild(rightIcon); // 更新指示器状态 const updateIndicators = () => { const { scrollLeft, scrollWidth, clientWidth } = tabsScroll; leftIndicator.style.display = scrollLeft > 0 ? 'flex' : 'none'; rightIndicator.style.display = scrollLeft < scrollWidth - clientWidth - 1 ? 'flex' : 'none'; }; // 监听滚动事件 const scrollCleanup = EventManager.addDOMListener(tabsScroll, 'scroll', updateIndicators); this.eventCleanups.push(scrollCleanup); // 监听窗口大小变化 const resizeObserver = new ResizeObserver(updateIndicators); resizeObserver.observe(tabsScroll); // 保存清理函数 this.eventCleanups.push(() => resizeObserver.disconnect()); // 添加指示器点击事件 const leftClickCleanup = EventManager.addDOMListener(leftIndicator, 'click', () => { tabsScroll.scrollBy({ left: -200, behavior: 'smooth' }); }); this.eventCleanups.push(leftClickCleanup); const rightClickCleanup = EventManager.addDOMListener(rightIndicator, 'click', () => { tabsScroll.scrollBy({ left: 200, behavior: 'smooth' }); }); this.eventCleanups.push(rightClickCleanup); // 组装DOM tabsScroll.appendChild(tabs); tabsContainer.appendChild(leftIndicator); tabsContainer.appendChild(tabsScroll); tabsContainer.appendChild(rightIndicator); container.appendChild(tabsContainer); container.appendChild(content); // 初始化指示器 setTimeout(updateIndicators, 0); } /** * 按照CSV文件的分类结构重新组织收藏标签 * @param {Object} csvData CSV文件的分类结构 * @param {Object} favorites 收藏标签数据 * @param {string} csvFileName 当前CSV文件名 * @returns {Object} 重新组织后的收藏标签数据 */ static _reorganizeFavoritesByCSVStructure(csvData, favorites, csvFileName) { // 标准化CSV文件名（去除扩展名） const normalizedFileName = csvFileName.replace(/\.(csv|json|yaml|yml)$/i, ''); // 获取当前CSV文件的收藏标签 const csvFavorites = favorites[normalizedFileName] || {}; // 如果没有收藏标签，返回空对象 if (Object.keys(csvFavorites).length === 0) { return {}; } // 递归函数：按照CSV结构组织收藏标签 const reorganize = (structure) => { const result = {}; for (const [key, value] of Object.entries(structure)) { if (typeof value === 'string') { // 这是一个标签，检查是否在收藏中 if (Object.values(csvFavorites).includes(value)) { // 找到对应的标签名 const tagName = Object.keys(csvFavorites).find(k => csvFavorites[k] === value); if (tagName) { result[tagName] = value; } } } else if (typeof value === 'object' && value !== null) { // 这是一个分类，递归处理 const subResult = reorganize(value); if (Object.keys(subResult).length > 0) { result[key] = subResult; } } } return result; }; return reorganize(csvData); } /** * 加载单个分类的内容 */ static _loadCategoryContent(contentElement, categoryData, categoryName) { if (!contentElement) return; // 加载前先清空容器，避免重复添加或残留Empty Tip contentElement.innerHTML = ''; // 特殊处理收藏夹 if (categoryName === 'favorites') { // 直接使用favorites的原始结构（CSV文件名作为顶层分类） // categoryData 的结构应该是 {CSV文件名: {分类: {标签名: 标签值}}} // 如果没有收藏标签，显示空提示 if (!categoryData || Object.keys(categoryData).length === 0) { const emptyTip = document.createElement('div'); emptyTip.className = 'empty_tip'; emptyTip.textContent = '暂无收藏标签，在标签上右键点击可添加到收藏'; emptyTip.style.padding = '20px'; emptyTip.style.textAlign = 'center'; emptyTip.style.color = 'var(--text-color-secondary)'; contentElement.appendChild(emptyTip); contentElement.setAttribute('data-loaded', 'true'); return; } } if (!categoryData) return; // 创建一个内容容器，用于应用动画效果 const contentWrapper = document.createElement('div'); contentWrapper.className = 'tag_content_wrapper'; // 异步加载分类内容 setTimeout(() => { try { // 创建分类内容 if (typeof categoryData === 'object' && categoryData !== null) { // 对于收藏标签页，不传递rootCategory，因为顶层就是CSV文件名 // 对于普通标签页，传递当前CSV文件名作为根分类 const rootCategory = categoryName === 'favorites' ? null : this.currentCsvFile; const innerContent = this._createInnerAccordion(categoryData, '1', categoryName, rootCategory); contentWrapper.appendChild(innerContent); // 添加到父容器 contentElement.appendChild(contentWrapper); // 标记为已加载 contentElement.setAttribute('data-loaded', 'true'); // 触发渐显动画 requestAnimationFrame(() => { // 确保DOM已经渲染 setTimeout(() => { contentWrapper.classList.add('visible'); // 对于收藏标签页，自动展开当前CSV文件对应的手风琴 if (categoryName === 'favorites' && this.currentCsvFile) { // 标准化CSV文件名（去除扩展名） const normalizedFileName = this.currentCsvFile.replace(/\.(csv|json|yaml|yml)$/i, ''); // 查找对应的手风琴 const targetAccordion = contentElement.querySelector(`.tag_accordion[data-category="${normalizedFileName}"]`); if (targetAccordion) { const header = targetAccordion.querySelector('.tag_accordion_header'); if (header && !header.classList.contains('active')) { // 自动展开 header.click(); } } } }, 10); }); } } catch (error) { logger.error(`加载标签分类失败: ${categoryName} | ${error.message}`); // 创建错误提示 const errorMessage = document.createElement('div'); errorMessage.textContent = `加载${categoryName}分类失败`; errorMessage.style.textAlign = 'center'; errorMessage.style.padding = '20px'; errorMessage.style.color = '#ff6b6b'; contentWrapper.appendChild(errorMessage); contentElement.appendChild(contentWrapper); // 显示错误信息 requestAnimationFrame(() => { contentWrapper.classList.add('visible'); }); } }, 0); // 使用0延迟，让UI线程有机会更新 } /** * 显示标签弹窗 */ static showTagPopup(options) { const { anchorButton, nodeId, inputId, onClose, buttonInfo, onTagSelect, refresh = false } = options; // 保存当前节点和输入框ID this.currentNodeId = nodeId; this.currentInputId = inputId; this.currentWidgetKey = options.widgetKey || null; this.onTagSelectCallback = onTagSelect; // 清理现有事件监听 this._cleanupEvents(); // 初始化 Sortable this._initSortable(); try { // 创建弹窗容器 const popup = document.createElement('div'); popup.className = 'popup_container tag_popup'; // 添加tag_popup类用于特定样式 popup.style.display = 'flex'; popup.style.flexDirection = 'column'; popup.style.minHeight = '400px'; // 设置最小高度，确保 PopupManager 可以正确计算位置 popup.style.maxHeight = '80vh'; // 设置最大高度，防止弹窗过大 popup.style.height = 'auto'; // 允许高度自适应内容 // 使用事件委托处理右键菜单 - 解决某些情况下事件无法绑定的问题 popup.addEventListener('contextmenu', (e) => { const tagItem = e.target.closest('.tag_item'); if (tagItem) { const tagName = tagItem.getAttribute('data-name'); const tagValue = tagItem.getAttribute('data-value'); const category = tagItem.getAttribute('data-category'); if (tagValue && tagName) { e.preventDefault(); e.stopPropagation(); // 记录日志确保触发 logger.debug(`Delegated context menu triggered on tag: ${tagName} | category: ${category}`); try { this._showContextMenu(e, tagValue, tagName, category); } catch (error) { logger.error(`Error showing context menu: ${error.message}`); console.error(error); } } } }, true); // 使用捕获阶段 // 创建标题栏 const titleBar = document.createElement('div'); titleBar.className = 'popup_title_bar'; const title = document.createElement('div'); title.className = 'popup_title'; // 加载SVG图标(getIcon返回已包含SVG的容器) const iconContainer = ResourceManager.getIcon('icon-tag.svg'); if (iconContainer) { iconContainer.style.width = '18px'; iconContainer.style.height = '18px'; iconContainer.style.color = 'var(--p-dialog-color)'; // 设置颜色供SVG继承 title.appendChild(iconContainer); } // 创建CSV选择器容器 const csvSelectorContainer = document.createElement('div'); csvSelectorContainer.className = 'popup_csv_selector_container'; csvSelectorContainer.style.marginRight = '10px'; csvSelectorContainer.style.position = 'relative'; // 创建自定义下拉按钮 const csvSelector = document.createElement('button'); csvSelector.className = 'popup_csv_selector'; csvSelector.style.padding = '4px 12px 4px 8px'; csvSelector.style.borderRadius = '10px'; csvSelector.style.border = '0px solid var(--p-dialog-border-color)'; csvSelector.style.backgroundColor = 'color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 60%)'; csvSelector.style.color = 'var(--p-text-color)'; csvSelector.style.outline = 'none'; csvSelector.style.cursor = 'pointer'; csvSelector.style.display = 'flex'; csvSelector.style.alignItems = 'center'; csvSelector.style.gap = '8px'; csvSelector.style.minWidth = '120px'; csvSelector.style.transition = 'border-color 0.2s, background-color 0.2s'; // 添加文本标签 const csvSelectorLabel = document.createElement('span'); csvSelectorLabel.style.flex = '1'; csvSelectorLabel.style.textAlign = 'left'; csvSelectorLabel.style.fontSize = '14px'; csvSelector.appendChild(csvSelectorLabel); // 添加下拉箭头图标 const csvSelectorIcon = document.createElement('i'); csvSelectorIcon.className = 'pi pi-chevron-down'; csvSelectorIcon.style.fontSize = '12px'; csvSelectorIcon.style.transition = 'transform 0.2s'; csvSelector.appendChild(csvSelectorIcon); // 创建下拉菜单 const csvDropdownMenu = document.createElement('div'); csvDropdownMenu.className = 'pa-context-menu pa-dropdown-menu'; // 添加pa-dropdown-menu类用于区分 csvDropdownMenu.style.display = 'none'; csvDropdownMenu.style.position = 'absolute'; csvDropdownMenu.style.top = 'calc(100% + 4px)'; csvDropdownMenu.style.left = '0'; csvDropdownMenu.style.minWidth = '100%'; // z-index 由 CSS 的 --settings-context-menu-z-index 变量管理 const csvMenuList = document.createElement('ul'); csvMenuList.className = 'pa-context-menu-list'; csvDropdownMenu.appendChild(csvMenuList); csvSelectorContainer.appendChild(csvSelector); csvSelectorContainer.appendChild(csvDropdownMenu); // 切换下拉菜单显示/隐藏 let csvMenuOpen = false; const toggleCsvMenu = (e) => { e.stopPropagation(); csvMenuOpen = !csvMenuOpen; if (csvMenuOpen) { csvDropdownMenu.style.display = 'block'; requestAnimationFrame(() => { csvDropdownMenu.classList.add('pa-context-menu-show'); csvSelectorIcon.style.transform = 'rotate(180deg)'; }); csvSelector.style.borderColor = 'var(--p-primary-color)'; } else { csvDropdownMenu.classList.remove('pa-context-menu-show'); csvDropdownMenu.classList.add('pa-context-menu-hide'); csvSelectorIcon.style.transform = 'rotate(0deg)'; csvSelector.style.borderColor = 'var(--p-dialog-border-color)'; setTimeout(() => { csvDropdownMenu.style.display = 'none'; csvDropdownMenu.classList.remove('pa-context-menu-hide'); }, 150); } }; // 关闭下拉菜单 const closeCsvMenu = () => { if (csvMenuOpen) { csvMenuOpen = false; csvDropdownMenu.classList.remove('pa-context-menu-show'); csvDropdownMenu.classList.add('pa-context-menu-hide'); csvSelectorIcon.style.transform = 'rotate(0deg)'; csvSelector.style.borderColor = 'var(--p-dialog-border-color)'; setTimeout(() => { csvDropdownMenu.style.display = 'none'; csvDropdownMenu.classList.remove('pa-context-menu-hide'); }, 150); } }; // 点击按钮切换菜单 const csvSelectorClickCleanup = EventManager.addDOMListener(csvSelector, 'click', toggleCsvMenu); this.eventCleanups.push(csvSelectorClickCleanup); // 点击外部关闭菜单 const handleCsvMenuOutsideClick = (e) => { if (csvMenuOpen && !csvSelectorContainer.contains(e.target)) { closeCsvMenu(); } }; const csvOutsideClickCleanup = EventManager.addDOMListener(document, 'click', handleCsvMenuOutsideClick, true); this.eventCleanups.push(csvOutsideClickCleanup); // 监听右键菜单打开事件,自动关闭CSV下拉菜单 const handleContextMenuOpen = (e) => { // 如果右键菜单不是在CSV选择器容器内打开的,则关闭CSV下拉菜单 if (csvMenuOpen && !csvSelectorContainer.contains(e.target)) { closeCsvMenu(); } }; const contextMenuCleanup = EventManager.addDOMListener(document, 'contextmenu', handleContextMenuOpen, true); this.eventCleanups.push(contextMenuCleanup); // CSV切换处理函数 const handleCsvChange = async (filename) => { if (filename && filename !== this.currentCsvFile) { this.currentCsvFile = filename; await ResourceManager.setSelectedTagFile(filename); // 重新加载数据 loadingIndicator.style.display = 'block'; contentContainer.innerHTML = ''; contentContainer.appendChild(loadingIndicator); try { const [tagData, favorites] = await Promise.all([ ResourceManager.loadTagsCsv(filename), ResourceManager.getFavorites() ]); this.favorites = favorites; // 移除加载指示器 if (loadingIndicator.parentNode) { loadingIndicator.parentNode.removeChild(loadingIndicator); } // 重新创建标签页 this._createTabsWithSpecialCategories(tagData, favorites, contentContainer, nodeId, inputId); // 如果当前在收藏标签页，重新加载收藏标签内容 // _loadCategoryContent会自动展开当前CSV对应的手风琴 setTimeout(() => { const activeTab = contentContainer.querySelector('.popup_tab.active'); if (activeTab && activeTab.getAttribute('data-category') === '⭐️') { const favoritesContent = contentContainer.querySelector('.popup_tab_content[data-category="⭐️"]'); if (favoritesContent) { // 重新加载收藏标签内容（会自动展开当前CSV） this._loadCategoryContent(favoritesContent, favorites, 'favorites'); } } }, 50); } catch (error) { logger.error(`切换CSV文件失败: ${error.message}`); loadingIndicator.textContent = '加载失败，请重试'; } } }; // 创建搜索框容器 const searchContainer = document.createElement('div'); searchContainer.className = 'popup_search_container'; const searchInput = document.createElement('input'); searchInput.className = 'popup_search_input'; searchInput.type = 'text'; searchInput.placeholder = '搜索标签...'; // 创建清除按钮 const clearBtn = document.createElement('button'); clearBtn.className = 'popup_btn'; clearBtn.title = '清除搜索'; clearBtn.style.display = 'none'; UIToolkit.addIconToButton(clearBtn, 'pi-times', '清除搜索'); // 添加清除按钮点击事件 const clearBtnCleanup = EventManager.addDOMListener(clearBtn, 'click', (e) => { e.stopPropagation(); searchInput.value = ''; clearBtn.style.display = 'none'; searchInput.blur(); // 让搜索框失去焦点 this._handleSearch(''); }); this.eventCleanups.push(clearBtnCleanup); searchContainer.appendChild(searchInput); searchContainer.appendChild(clearBtn); // 创建操作按钮容器 const actions = document.createElement('div'); actions.className = 'popup_actions'; // 移除了管理标签按钮 // 添加刷新按钮 const refreshBtn = document.createElement('button'); refreshBtn.className = 'popup_btn'; refreshBtn.title = '刷新标签状态'; const refreshIcon = document.createElement('span'); refreshIcon.className = 'pi pi-refresh'; refreshBtn.appendChild(refreshIcon); refreshBtn.title = '刷新标签状态'; // 添加关闭按钮 const closeBtn = document.createElement('button'); closeBtn.className = 'popup_btn'; UIToolkit.addIconToButton(closeBtn, 'pi-times', '关闭'); // 添加刷新事件 const refreshCleanup = EventManager.addDOMListener(refreshBtn, 'click', async () => { try { refreshBtn.style.transform = 'rotate(360deg)'; refreshBtn.style.transition = 'transform 0.5s'; // 显示加载指示器 contentContainer.innerHTML = ''; const refreshLoadingIndicator = document.createElement('div'); refreshLoadingIndicator.className = 'loading_indicator'; refreshLoadingIndicator.textContent = '重新加载标签数据...'; refreshLoadingIndicator.style.textAlign = 'center'; refreshLoadingIndicator.style.padding = '20px'; refreshLoadingIndicator.style.color = 'var(--text-color-secondary)'; contentContainer.appendChild(refreshLoadingIndicator); // 重新加载当前CSV和收藏 if (this.currentCsvFile) { const [tagData, favorites] = await Promise.all([ ResourceManager.loadTagsCsv(this.currentCsvFile, true), // 强制重新加载 ResourceManager.getFavorites() ]); this.favorites = favorites; TagManager.tagData = tagData; // 移除加载指示器 if (refreshLoadingIndicator.parentNode) { refreshLoadingIndicator.parentNode.removeChild(refreshLoadingIndicator); } // 完全重新创建标签页结构 contentContainer.innerHTML = ''; this._createTabsWithSpecialCategories(tagData, favorites, contentContainer, nodeId, inputId); logger.debug(`[助手-标签] 刷新完成 | CSV文件:${this.currentCsvFile}`); } } catch (error) { logger.error(`标签刷新失败: ${error.message}`); // 显示错误信息 contentContainer.innerHTML = ''; const errorMsg = document.createElement('div'); errorMsg.className = 'loading_indicator'; errorMsg.textContent = '刷新失败,请重试'; errorMsg.style.textAlign = 'center'; errorMsg.style.padding = '20px'; errorMsg.style.color = 'var(--error-color)'; contentContainer.appendChild(errorMsg); } finally { setTimeout(() => { refreshBtn.style.transform = ''; refreshBtn.style.transition = ''; }, 500); } }); this.eventCleanups.push(refreshCleanup); // 添加关闭事件 const closeCleanup = EventManager.addDOMListener(closeBtn, 'click', () => { PopupManager.closeAllPopups(); }); this.eventCleanups.push(closeCleanup); // 添加搜索事件 const searchCleanup = EventManager.addDOMListener(searchInput, 'input', (e) => { const value = e.target.value; clearBtn.style.display = value.length > 0 ? 'flex' : 'none'; if (this.searchTimeout) { clearTimeout(this.searchTimeout); } this.searchTimeout = setTimeout(() => { this._handleSearch(value.toLowerCase()); }, 300); }); this.eventCleanups.push(searchCleanup); // 添加搜索框聚焦和点击事件，防止弹窗关闭 const searchFocusCleanup = EventManager.addDOMListener(searchInput, 'focus', (e) => { e.stopPropagation(); }); this.eventCleanups.push(searchFocusCleanup); const searchClickCleanup = EventManager.addDOMListener(searchInput, 'click', (e) => { e.stopPropagation(); }); this.eventCleanups.push(searchClickCleanup); // 组装标题栏 - 修改组装顺序 titleBar.appendChild(title); titleBar.appendChild(csvSelectorContainer); // 添加CSV选择器 titleBar.appendChild(searchContainer); titleBar.appendChild(actions); // 移除了旧的管理按钮 actions.appendChild(refreshBtn); actions.appendChild(closeBtn); // 创建内容容器 const contentContainer = document.createElement('div'); contentContainer.style.display = 'flex'; contentContainer.style.flexDirection = 'column'; contentContainer.style.flex = '1'; contentContainer.style.overflow = 'hidden'; contentContainer.style.minHeight = '350px'; // 设置最小高度，确保有足够空间显示加载状态 // 组装弹窗 popup.appendChild(titleBar); popup.appendChild(contentContainer); // 添加标签弹窗特有的类名，用于识别 popup.classList.add('tag_popup'); // 恢复保存的窗口大小或使用默认尺寸 const savedSize = this.getPopupSize(); if (savedSize) { popup.style.width = `${savedSize.width}px`; popup.style.height = `${savedSize.height}px`; // logger.debug(`[助手-标签] 恢复窗口大小 | 宽:${savedSize.width}px | 高:${savedSize.height}px`); } else { popup.style.width = '600px'; popup.style.height = '400px'; } // 显示弹窗 PopupManager.showPopup({ popup: popup, anchorButton: anchorButton, buttonInfo: buttonInfo, preventCloseOnElementTypes: ['tag_item', 'tag_item_text', 'tag_search_input'], // 阻止标签和搜索框关闭弹窗 enableResize: true, // 启用窗口大小调节功能 onClose: () => { try { // 关闭时记住当前激活的标签页 const activeTab = popup.querySelector('.popup_tab.active'); if (activeTab) { const category = activeTab.getAttribute('data-category'); TagManager.setLastActiveTab(category); // 保存当前标签页中所有手风琴的展开状态 const activeTabContent = popup.querySelector('.popup_tab_content.active'); if (activeTabContent) { const accordions = activeTabContent.querySelectorAll('.tag_accordion'); accordions.forEach(accordion => { const accordionCategory = accordion.getAttribute('data-category'); const header = accordion.querySelector('.tag_accordion_header'); if (accordionCategory && header) { const isExpanded = header.classList.contains('active'); TagManager.setAccordionState(category, accordionCategory, isExpanded); } }); } } } catch (e) { logger.error(`保存弹窗状态失败: ${e.message}`); } this._cleanupEvents(); if (typeof onClose === 'function') { onClose(); } } }); // 显示加载指示器 const loadingIndicator = document.createElement('div'); loadingIndicator.className = 'loading_indicator'; loadingIndicator.textContent = '加载标签数据...'; loadingIndicator.style.textAlign = 'center'; loadingIndicator.style.padding = '20px'; loadingIndicator.style.color = 'var(--text-color-secondary)'; contentContainer.appendChild(loadingIndicator); // 加载数据并创建标签页 (async () => { try { // 1. 获取CSV文件列表 const files = await ResourceManager.getTagFileList(); // 2. 获取上次选择的文件 let selectedFile = await ResourceManager.getSelectedTagFile(); // 确保选择的文件在列表中 if (!files.includes(selectedFile) && files.length > 0) { selectedFile = files[0]; } this.currentCsvFile = selectedFile; // 3. 填充下拉菜单 csvMenuList.innerHTML = ''; // 设置当前选中文件的显示文本 csvSelectorLabel.textContent = selectedFile.replace('.csv', ''); files.forEach(file => { const menuItem = document.createElement('li'); menuItem.className = 'pa-context-menu-item'; if (file === selectedFile) { menuItem.classList.add('active'); } const menuItemContent = document.createElement('div'); menuItemContent.className = 'pa-context-menu-item-content'; const label = document.createElement('span'); label.className = 'pa-context-menu-item-label'; label.textContent = file.replace('.csv', ''); menuItemContent.appendChild(label); menuItem.appendChild(menuItemContent); // 点击菜单项切换CSV文件 menuItem.addEventListener('click', async (e) => { e.stopPropagation(); // 更新选中状态 csvMenuList.querySelectorAll('.pa-context-menu-item').forEach(item => { item.classList.remove('active'); }); menuItem.classList.add('active'); // 更新显示文本 csvSelectorLabel.textContent = file.replace('.csv', ''); // 关闭菜单 closeCsvMenu(); // 切换CSV文件 await handleCsvChange(file); }); csvMenuList.appendChild(menuItem); }); // 4. 加载标签数据和收藏 const [tagData, favorites] = await Promise.all([ ResourceManager.loadTagsCsv(selectedFile), ResourceManager.getFavorites() ]); this.favorites = favorites; // 移除加载指示器 if (loadingIndicator.parentNode) { loadingIndicator.parentNode.removeChild(loadingIndicator); } // 5. 创建标签页 // 更新静态数据引用 TagManager.tagData = tagData; this._createTabsWithSpecialCategories(tagData, favorites, contentContainer, nodeId, inputId); } catch (error) { logger.error(`初始化标签弹窗失败: ${error.message}`); loadingIndicator.textContent = '加载失败，请重试'; } })(); } catch (error) { logger.error(`标签弹窗创建失败: ${error.message}`); this._cleanupAll(); } } /** * 创建特殊标签页结构（包含正常标签、自定义标签和已插入标签） */ static _createTabsWithSpecialCategories(tagData, userTagData, container, nodeId, inputId) { // 创建标签页框架 const tabsContainer = document.createElement('div'); tabsContainer.className = 'popup_tabs_container'; // 创建标签滚动区域 const tabsScroll = document.createElement('div'); tabsScroll.className = 'popup_tabs_scroll'; // 创建标签栏 const tabs = document.createElement('div'); tabs.className = 'popup_tabs'; // 创建内容区域 const tabContents = document.createElement('div'); tabContents.className = 'tag_category_container'; tabContents.style.overflow = 'hidden'; tabContents.style.display = 'flex'; tabContents.style.flexDirection = 'column'; // 创建左右滚动指示器 const leftIndicator = document.createElement('div'); leftIndicator.className = 'tabs_scroll_indicator left'; const leftIconSpan = document.createElement('span'); leftIconSpan.className = 'pi pi-angle-left scroll_indicator_icon'; leftIndicator.appendChild(leftIconSpan); leftIndicator.style.display = 'none'; const rightIndicator = document.createElement('div'); rightIndicator.className = 'tabs_scroll_indicator right'; const rightIconSpan = document.createElement('span'); rightIconSpan.className = 'pi pi-angle-right scroll_indicator_icon'; rightIndicator.appendChild(rightIconSpan); rightIndicator.style.display = 'none'; // 更新指示器状态的函数 const updateIndicators = () => { const canScroll = tabsScroll.scrollWidth > tabsScroll.clientWidth; if (!canScroll) { leftIndicator.style.display = 'none'; rightIndicator.style.display = 'none'; return; } // 使用更大的阈值（8像素）确保边界情况下能正确隐藏 const scrollLeft = tabsScroll.scrollLeft; const maxScroll = tabsScroll.scrollWidth - tabsScroll.clientWidth; leftIndicator.style.display = scrollLeft > 8 ? 'flex' : 'none'; rightIndicator.style.display = scrollLeft < (maxScroll - 8) ? 'flex' : 'none'; }; // 添加滚动指示器点击事件 - 每次滚动一个标签 const leftClickCleanup = EventManager.addDOMListener(leftIndicator, 'click', () => { // 获取所有标签 const allTabs = tabs.querySelectorAll('.popup_tab'); if (allTabs.length === 0) return; // 找到当前第一个可见的标签 const scrollRect = tabsScroll.getBoundingClientRect(); let firstVisibleTab = null; for (const tab of allTabs) { const tabRect = tab.getBoundingClientRect(); // 如果标签的右边缘在可视区域内，说明它至少部分可见 if (tabRect.right > scrollRect.left + 10) { firstVisibleTab = tab; break; } } // 找到前一个标签 if (firstVisibleTab) { const currentIndex = Array.from(allTabs).indexOf(firstVisibleTab); if (currentIndex > 0) { const prevTab = allTabs[currentIndex - 1]; prevTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' }); // 滚动完成后更新指示器状态（使用更长的延迟确保动画完成） setTimeout(updateIndicators, 600); } } }); const rightClickCleanup = EventManager.addDOMListener(rightIndicator, 'click', () => { // 获取所有标签 const allTabs = tabs.querySelectorAll('.popup_tab'); if (allTabs.length === 0) return; // 找到当前最后一个可见的标签 const scrollRect = tabsScroll.getBoundingClientRect(); let lastVisibleTab = null; for (let i = allTabs.length - 1; i >= 0; i--) { const tab = allTabs[i]; const tabRect = tab.getBoundingClientRect(); // 如果标签的左边缘在可视区域内，说明它至少部分可见 if (tabRect.left < scrollRect.right - 10) { lastVisibleTab = tab; break; } } // 找到下一个标签 if (lastVisibleTab) { const currentIndex = Array.from(allTabs).indexOf(lastVisibleTab); if (currentIndex < allTabs.length - 1) { const nextTab = allTabs[currentIndex + 1]; nextTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' }); // 滚动完成后更新指示器状态（使用更长的延迟确保动画完成） setTimeout(updateIndicators, 600); } } }); // 监听滚动事件，控制滚动指示器的显示/隐藏 const scrollCleanup = EventManager.addDOMListener(tabsScroll, 'scroll', updateIndicators); // 监听窗口大小调整事件 const resizeObserver = new ResizeObserver(() => { updateIndicators(); }); resizeObserver.observe(container); // 添加清理函数 const resizeCleanup = () => { resizeObserver.disconnect(); }; this.eventCleanups.push(leftClickCleanup, rightClickCleanup, scrollCleanup, resizeCleanup); // 添加滚动指示器 tabsContainer.appendChild(leftIndicator); tabsContainer.appendChild(tabsScroll); tabsContainer.appendChild(rightIndicator); // 将标签栏添加到滚动区域 tabsScroll.appendChild(tabs); // 将标签页容器和内容区域添加到主容器 container.appendChild(tabsContainer); container.appendChild(tabContents); // 获取所有标签页，重新排序将"⭐️"放在最前面 const normalTabs = Object.keys(tagData); const allTabs = ['⭐️', ...normalTabs, '已插入']; // 记忆上次激活的标签页 let activeTabIndex = 1; // 默认第二个标签（即tags.json的第一个类别） const lastCategory = this.getLastActiveTab(); if (lastCategory && allTabs.includes(lastCategory)) { activeTabIndex = allTabs.indexOf(lastCategory); } // 创建所有标签页但不立即加载内容 allTabs.forEach((category, index) => { // 创建标签 const tab = document.createElement('div'); tab.className = 'popup_tab'; tab.textContent = category; tab.setAttribute('data-category', category); // 第一个标签默认激活 if (index === activeTabIndex) { tab.classList.add('active'); } // 添加标签点击事件 const tabClickCleanup = EventManager.addDOMListener(tab, 'click', () => { const currentActiveTab = tabs.querySelector('.popup_tab.active'); if (currentActiveTab === tab) return; if (currentActiveTab) { currentActiveTab.classList.add('exiting'); const animationEndHandler = () => { currentActiveTab.classList.remove('active', 'exiting'); currentActiveTab.removeEventListener('transitionend', animationEndHandler); }; currentActiveTab.addEventListener('transitionend', animationEndHandler); } tabContents.querySelectorAll('.popup_tab_content').forEach(c => { c.classList.remove('active'); c.style.display = 'none'; }); tab.classList.add('active'); const contentId = tab.getAttribute('data-category'); const content = tabContents.querySelector(`.popup_tab_content[data-category="${contentId}"]`); if (content) { content.classList.add('active'); content.style.display = 'block'; // 记忆当前选择的标签页 TagManager.setLastActiveTab(contentId); // 对于特殊标签页，每次点击都重新加载 if (contentId === '⭐️') { this._loadCategoryContent(content, userTagData, 'favorites'); } else if (contentId === '已插入') { this._loadInsertedTagsContent(content); } // 对于普通标签页，仅在首次加载 else if (content.getAttribute('data-loaded') !== 'true') { this._loadCategoryContent(content, tagData[contentId], contentId); } } // 确保选中的标签完全可见 const tabRect = tab.getBoundingClientRect(); const scrollRect = tabsScroll.getBoundingClientRect(); const isFullyVisible = tabRect.left >= scrollRect.left && tabRect.right <= scrollRect.right; if (!isFullyVisible) { if (tabRect.left < scrollRect.left) { tab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' }); } else if (tabRect.right > scrollRect.right) { tab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' }); } } }); this.eventCleanups.push(tabClickCleanup); // 添加右键菜单事件（特殊分类除外） const specialCategories = ['⭐️', 'favorites', '已插入']; if (!specialCategories.includes(category)) { const tabContextMenuCleanup = EventManager.addDOMListener(tab, 'contextmenu', (e) => { e.preventDefault(); e.stopPropagation(); this._showCategoryContextMenu(e, category, true, null); }); this.eventCleanups.push(tabContextMenuCleanup); } tabs.appendChild(tab); // 创建内容区域 const content = document.createElement('div'); content.className = 'popup_tab_content'; content.setAttribute('data-category', category); content.setAttribute('data-loaded', 'false'); // 标记为未加载 content.style.flex = '1'; content.style.display = 'none'; // 第一个内容默认显示 if (index === activeTabIndex) { content.classList.add('active'); content.style.display = 'block'; } tabContents.appendChild(content); }); // ---在 Tab 栏末尾添加"新建分类"按钮--- const addTabButton = document.createElement('div'); addTabButton.className = 'popup_tab add_category_tab'; addTabButton.title = '新建分类'; const addTabIcon = document.createElement('span'); addTabIcon.className = 'pi pi-plus'; addTabButton.appendChild(addTabIcon); const addTabBtnClickCleanup = EventManager.addDOMListener(addTabButton, 'click', (e) => { e.stopPropagation(); this._handleAddCategory(addTabButton, null, tabs, tabContents, tagData); }); this.eventCleanups.push(addTabBtnClickCleanup); tabs.appendChild(addTabButton); // ---初始化 Tab 栏拖拽排序--- if (this.Sortable) { const tabsSortable = new this.Sortable(tabs, { animation: 150, ghostClass: 'tag-ghost', draggable: '.popup_tab:not(.add_category_tab)', // 排除添加按钮 delay: 50, onEnd: async (evt) => { const { oldIndex, newIndex } = evt; if (oldIndex === newIndex) return; // 获取当前所有 Tab 的新顺序 const newOrder = Array.from(tabs.querySelectorAll('.popup_tab:not(.add_category_tab)')) .map(tab => tab.getAttribute('data-category')); // 重新排列 tagData const newTagData = {}; // 按照新顺序重建数据对象 newOrder.forEach(category => { // 特殊分类 (⭐️, 已插入) 不在 tagData 中，跳过 if (category !== '⭐️' && category !== '已插入' && tagData[category]) { newTagData[category] = tagData[category]; } }); // 确保没有遗漏的数据（以防万一） Object.keys(tagData).forEach(category => { if (!newTagData[category]) { newTagData[category] = tagData[category]; } }); // 更新内存中的数据 TagManager.tagData = newTagData; // 持久化到 CSV const filename = this.currentCsvFile || await ResourceManager.getSelectedTagFile(); if (filename) { const success = await ResourceManager.saveTagsCsv(filename, newTagData); if (success) { app.extensionManager.toast.add({ severity: "success", summary: "排序已保存", detail: "分类显示顺序已更新", life: 2000 }); } } } }); this.sortables.push(tabsSortable); } // 初始化滚动指示器，并自动定位到激活的标签页 setTimeout(() => { const canScroll = tabsScroll.scrollWidth > tabsScroll.clientWidth; if (canScroll) { // 找到激活的标签页 const activeTab = tabs.querySelector('.popup_tab.active'); if (activeTab) { // 将激活的标签页滚动到可见区域 activeTab.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'center' }); } // 等待滚动完成后，更新滚动指示器显示状态 setTimeout(updateIndicators, 50); } }, 50); // 加载第一个激活的标签页内容 const firstContent = tabContents.querySelector('.popup_tab_content.active'); if (firstContent) { const firstCategory = firstContent.getAttribute('data-category'); // 初始激活的标签页也进行记忆 TagManager.setLastActiveTab(firstCategory); if (firstCategory === '⭐️') { this._loadCategoryContent(firstContent, userTagData, 'favorites'); } else if (firstCategory === '已插入') { this._loadInsertedTagsContent(firstContent); } else { this._loadCategoryContent(firstContent, tagData[firstCategory], firstCategory); } } // 更新标签状态 setTimeout(() => { this.compareInputWithCache(nodeId, inputId, true); }, 100); } /** * 处理搜索 */ static _handleSearch(searchText) { const tagItems = document.querySelectorAll('.tag_item'); const accordions = document.querySelectorAll('.tag_accordion'); const tabs = document.querySelectorAll('.popup_tab'); const tabContents = document.querySelectorAll('.popup_tab_content'); const popup = document.querySelector('.popup_container'); const tabsContainer = document.querySelector('.popup_tabs_container'); const tagCategoryContainers = document.querySelectorAll('.tag_category_container'); // 搜索结果容器class const SEARCH_RESULT_CLASS = 'tag_search_result_list'; let searchResultList = document.querySelector('.' + SEARCH_RESULT_CLASS); if (!searchText) { // 恢复原有内容 if (searchResultList) searchResultList.remove(); // 恢复标签页容器 if (tabsContainer) { tabsContainer.style.display = ''; tabsContainer.style.visibility = ''; } // 恢复所有相关容器 tagCategoryContainers.forEach(container => { container.style.display = ''; container.style.visibility = ''; }); // 恢复标签项 tagItems.forEach(item => { item.style.display = ''; item.style.pointerEvents = ''; }); // 恢复手风琴 accordions.forEach(accordion => { accordion.style.display = ''; accordion.style.pointerEvents = ''; }); // 恢复标签页 tabs.forEach(tab => { tab.style.display = ''; tab.style.pointerEvents = ''; }); // 恢复标签页内容 tabContents.forEach(content => { if (content.classList.contains('active')) { content.style.display = 'block'; } else { content.style.display = 'none'; } content.style.pointerEvents = ''; }); // 重置滚动条 const tabsScroll = document.querySelector('.popup_tabs_scroll'); if (tabsScroll) { const activeTab = document.querySelector('.popup_tab.active'); if (activeTab) { activeTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }); } else { tabsScroll.scrollLeft = 0; } setTimeout(() => { tabsScroll.dispatchEvent(new Event('scroll')); }, 100); } // 重新更新标签状态，确保点击功能正常 setTimeout(() => { this.compareInputWithCache(this.currentNodeId, this.currentInputId, true); }, 50); return; } // 有搜索内容时，彻底隐藏原有内容和tabs栏 if (tabsContainer) { tabsContainer.style.display = 'none'; tabsContainer.style.visibility = 'hidden'; } // 隐藏所有分类容器 tagCategoryContainers.forEach(container => { container.style.display = 'none'; container.style.visibility = 'hidden'; }); // 隐藏标签页内容 tabContents.forEach(content => { content.style.display = 'none'; content.style.pointerEvents = 'none'; }); // 隐藏标签页 tabs.forEach(tab => { tab.style.display = 'none'; tab.style.pointerEvents = 'none'; }); // 隐藏手风琴 accordions.forEach(accordion => { accordion.style.display = 'none'; accordion.style.pointerEvents = 'none'; }); // 移除旧的搜索结果容器 if (searchResultList) searchResultList.remove(); // 创建新的搜索结果容器 searchResultList = document.createElement('div'); searchResultList.className = SEARCH_RESULT_CLASS; // 从原始数据中搜索标签，而不是从DOM中搜索 this._searchFromData(searchText, searchResultList).then(() => { // 搜索完成后刷新标签状态 setTimeout(() => { this.refreshSearchResultsState(); }, 10); }).catch(error => { logger.error(`搜索处理失败: ${error.message}`); }); // 插入到内容区（搜索框下方） // 先尝试找到弹窗的主内容容器（标题栏的下一个兄弟元素） const titleBar = popup.querySelector('.popup_title_bar'); let contentContainer = null; if (titleBar && titleBar.nextElementSibling) { contentContainer = titleBar.nextElementSibling; } else { // 备用方案：查找包含标签页的容器 contentContainer = popup.querySelector('.tag_category_container')?.parentElement || popup.querySelector('[class*="tab_content"]')?.parentElement; } if (contentContainer) { contentContainer.appendChild(searchResultList); } else { logger.error('无法找到合适的容器来插入搜索结果'); } } /** * 从原始数据中搜索标签 * @param {string} searchText 搜索文本 * @param {HTMLElement} searchResultList 搜索结果容器 */ static async _searchFromData(searchText, searchResultList) { try { // 获取原始标签数据 const [tagData, userTagData] = await Promise.all([ ResourceManager.getTagData(), ResourceManager.getUserTagData() ]); let matchCount = 0; // 搜索系统标签 matchCount += this._searchInDataObject(tagData, searchText, searchResultList, []); // 搜索用户自定义标签（⭐️标签页） matchCount += this._searchInDataObject(userTagData, searchText, searchResultList, ['⭐️']); // 搜索已插入标签 matchCount += this._searchInsertedTags(searchText, searchResultList); // 无结果提示 if (matchCount === 0) { const empty = document.createElement('div'); empty.textContent = '无匹配标签'; empty.className = 'search_empty_message'; searchResultList.appendChild(empty); } } catch (error) { logger.error(`搜索标签数据失败: ${error.message}`); const errorMessage = document.createElement('div'); errorMessage.textContent = '搜索失败，请重试'; errorMessage.className = 'search_empty_message'; searchResultList.appendChild(errorMessage); } } /** * 在数据对象中递归搜索标签 * @param {Object} dataObj 数据对象 * @param {string} searchText 搜索文本 * @param {HTMLElement} container 结果容器 * @param {Array} categoryPath 分类路径 * @returns {number} 匹配的标签数量 */ static _searchInDataObject(dataObj, searchText, container, categoryPath = [], onMatch) { let localMatchCount = 0; for (const [key, value] of Object.entries(dataObj)) { if (typeof value === 'string') { // 这是一个标签 const tagName = key; const tagValue = value; const matches = tagName.toLowerCase().includes(searchText) || tagValue.toLowerCase().includes(searchText); if (matches) { // 创建标签元素 const tagElement = this._createSearchResultTag(tagName, tagValue, [...categoryPath]); container.appendChild(tagElement); localMatchCount++; } } else if (typeof value === 'object' && value !== null) { // 这是一个分类，递归搜索 const childMatchCount = this._searchInDataObject(value, searchText, container, [...categoryPath, key]); localMatchCount += childMatchCount; } } if (onMatch) { onMatch(localMatchCount); } return localMatchCount; } /** * 搜索已插入标签 * @param {string} searchText 搜索文本 * @param {HTMLElement} container 结果容器 * @returns {number} 匹配的标签数量 */ static _searchInsertedTags(searchText, container) { let matchCount = 0; const cache = TagCacheService.getTagCache(this.currentNodeId, this.currentInputId); if (cache && cache.size > 0) { cache.forEach((formatInfo, tagValue) => { // 尝试从已加载的DOM中找到对应的标签名 let tagName = tagValue; // 默认使用值作为名称 // 查找已加载的标签元素来获取显示名称 const existingTag = document.querySelector(`.tag_item[data-value="${tagValue}"]`); if (existingTag) { tagName = existingTag.getAttribute('data-name') || tagValue; } const matches = tagName.toLowerCase().includes(searchText) || tagValue.toLowerCase().includes(searchText); if (matches) { const tagElement = this._createSearchResultTag(tagName, tagValue, ['已插入']); container.appendChild(tagElement); matchCount++; } }); } return matchCount; } /** * 创建搜索结果标签元素 * @param {string} tagName 标签名称 * @param {string} tagValue 标签值 * @param {Array} categoryPath 分类路径 * @returns {HTMLElement} 标签元素 */ static _createSearchResultTag(tagName, tagValue, categoryPath) { const tagItem = document.createElement('div'); tagItem.className = 'tag_item search_result_tag_item'; tagItem.setAttribute('data-name', tagName); tagItem.setAttribute('data-value', tagValue); // 确保搜索结果也包含当前的分类上下文（当前文件） if (this.currentCsvFile) { tagItem.setAttribute('data-category', this.currentCsvFile); } const tagText = document.createElement('span'); tagText.className = 'tag_item_text'; tagText.textContent = tagName; tagItem.appendChild(tagText); // 检查标签是否已使用 if (this.isTagUsed(tagValue, this.currentNodeId, this.currentInputId)) { tagItem.classList.add('used'); } // 添加鼠标事件监听 const mouseEnterCleanup = EventManager.addDOMListener(tagItem, 'mouseenter', () => { const tooltipContent = `${tagValue}\n类别: ${categoryPath.join(' > ')}`; this._showTooltip(tagItem, tooltipContent); }); const mouseLeaveCleanup = EventManager.addDOMListener(tagItem, 'mouseleave', () => { this._hideTooltip(); }); // 添加点击事件 const tagClickCleanup = EventManager.addDOMListener(tagItem, 'click', (e) => { this.handleTagClick(tagItem, tagName, tagValue, e); }); this.eventCleanups.push(mouseEnterCleanup, mouseLeaveCleanup, tagClickCleanup); return tagItem; } /** * 隐藏标签弹窗 */ static hideTagPopup() { // 清理事件监听 this._cleanupEvents(); // 使用PopupManager关闭所有弹窗 PopupManager.closeAllPopups(); } /** * 清理所有相关资源 */ static _cleanupAll() { // 清理事件监听 this._cleanupEvents(); // 使用PopupManager关闭所有弹窗 PopupManager.closeAllPopups(); } /** * 清理所有事件监听 */ static _cleanupEvents() { // 执行并清空所有事件清理函数 if (this.eventCleanups.length > 0) { this.eventCleanups.forEach(cleanup => { if (typeof cleanup === 'function') { cleanup(); } }); this.eventCleanups = []; } } /** * 更新所有标签的状态 */ static updateAllTagsState(nodeId, inputId) { const mapping = UIToolkit._findMapping(nodeId, inputId, (nodeId === this.currentNodeId && inputId === this.currentInputId) ? this.currentWidgetKey : null); if (!mapping || !mapping.inputEl) return; const inputValue = mapping.inputEl.value; const startTime = performance.now(); // 清空已使用标签映射 this.usedTags.clear(); // 获取所有标签元素，包括所有标签页中的标签 const tagItems = document.querySelectorAll('.tag_item'); let checkedCount = 0; let matchedCount = 0; // 检查每个标签是否在输入框中 tagItems.forEach(tagItem => { const tagValue = tagItem.getAttribute('data-value'); if (!tagValue) return; checkedCount++; // 检查是否在输入框中 const isUsed = TagCacheService.isTagInInput(nodeId, inputId, tagValue, inputValue); if (isUsed) { matchedCount++; } // 更新状态 this.updateTagState(tagItem, isUsed); // 如果已使用，添加到映射 if (isUsed) { this.usedTags.set(tagValue, tagItem); } }); const endTime = performance.now(); // logger.debug(`标签状态 | 动作:更新所有 | 节点:${nodeId} | 输入框:${inputId} | 检查数量:${checkedCount} | 匹配数量:${matchedCount} | 耗时:${(endTime - startTime).toFixed(2)}ms`); } /** * 添加辅助方法：统计标签总数 */ static _countTags(tagData) { let count = 0; const countTagsInObject = (obj) => { for (const key in obj) { if (typeof obj[key] === 'string') { count++; } else if (typeof obj[key] === 'object' && obj[key] !== null) { countTagsInObject(obj[key]); } } }; countTagsInObject(tagData); return count; } /** * 刷新搜索结果中的标签状态 * 注意：不在此处绑定点击事件，避免与创建时的事件重复导致触发两次（插入后又被移除）。 */ static refreshSearchResultsState() { // 获取搜索结果中的所有标签 const searchResultTags = document.querySelectorAll('.search_result_tag_item'); // 更新每个搜索结果标签的状态 searchResultTags.forEach(tagItem => { const tagValue = tagItem.getAttribute('data-value'); if (!tagValue) return; // 检查是否已使用 const isUsed = this.isTagUsed(tagValue, this.currentNodeId, this.currentInputId); // 更新状态 this.updateTagState(tagItem, isUsed); }); } /** * 创建收藏夹内容 */ /** * 加载已插入标签内容 */ static _loadInsertedTagsContent(container) { container.innerHTML = ''; // 清空内容 container.setAttribute('data-loaded', 'true'); // 创建内容包装器 const contentWrapper = document.createElement('div'); contentWrapper.className = 'tag_content_wrapper visible'; // 创建标签容器 const tagsContainer = document.createElement('div'); tagsContainer.className = 'inserted_tags_container'; tagsContainer.style.padding = '10px'; tagsContainer.style.display = 'flex'; tagsContainer.style.flexWrap = 'wrap'; tagsContainer.style.gap = '8px'; // 获取已使用的标签 const usedTags = new Map(); // 从输入框中获取标签 const mapping = UIToolkit._findMapping(this.currentNodeId, this.currentInputId, this.currentWidgetKey); if (mapping && mapping.inputEl) { // 从标签缓存中获取所有标签 const tagCache = TagCacheService.getTagCache(this.currentNodeId, this.currentInputId); if (tagCache && tagCache.size > 0) { // 获取输入框内容 const inputValue = mapping.inputEl.value; // 遍历缓存，检查哪些标签在输入框中 tagCache.forEach((formats, rawTag) => { // 检查标签是否在输入框中 if (TagCacheService.isTagInInput(this.currentNodeId, this.currentInputId, rawTag, inputValue)) { // 标签在输入框中，添加到已使用标签列表 usedTags.set(rawTag, formats); } }); } } if (usedTags.size === 0) { // 如果没有已插入标签 const emptyMessage = document.createElement('div'); emptyMessage.className = 'empty_tags_message'; emptyMessage.textContent = '没有已插入标签'; emptyMessage.style.textAlign = 'center'; emptyMessage.style.padding = '20px'; emptyMessage.style.color = 'var(--text-color-secondary)'; contentWrapper.appendChild(emptyMessage); } else { // 加载标签数据，用于查找中文名称 Promise.all([ ResourceManager.getTagData(), ResourceManager.getUserTagData() ]).then(([tagData, userTagData]) => { // 创建标签名称映射表 (英文值 -> 中文名) const tagNameMap = new Map(); // 递归函数，用于从标签数据中提取标签名称映射 const extractTagNames = (data) => { for (const key in data) { const value = data[key]; if (typeof value === 'string') { // 找到一个标签，添加到映射表 (值 -> 名称) tagNameMap.set(value, key); } else if (typeof value === 'object' && value !== null) { // 递归处理子分类 extractTagNames(value); } } }; // 从标准标签和用户标签中提取名称映射 extractTagNames(tagData); extractTagNames(userTagData); // 如果有已插入标签，创建标签元素 usedTags.forEach((formats, rawTag) => { const tagItem = document.createElement('div'); tagItem.className = 'tag_item used'; tagItem.setAttribute('data-value', rawTag); // 查找标签的中文名称，如果找不到则使用原始值 const tagName = tagNameMap.get(rawTag) || rawTag; tagItem.setAttribute('data-name', tagName); const tagText = document.createElement('span'); tagText.className = 'tag_item_text'; tagText.textContent = tagName; // 使用中文名称 tagItem.appendChild(tagText); // 添加鼠标事件监听 const mouseEnterCleanup = EventManager.addDOMListener(tagItem, 'mouseenter', () => { this._showTooltip(tagItem, rawTag); // 显示原始值作为提示 }); const mouseLeaveCleanup = EventManager.addDOMListener(tagItem, 'mouseleave', () => { this._hideTooltip(); }); // 添加点击事件 - 移除标签 const tagClickCleanup = EventManager.addDOMListener(tagItem, 'click', (e) => { // 先隐藏tooltip this._hideTooltip(); this.handleTagClick(tagItem, tagName, rawTag, e); // 移除后，重新加载已插入标签 setTimeout(() => { // 重新加载已插入标签页 this._loadInsertedTagsContent(container); // 更新所有标签页中的标签状态 this.updateAllTagsState(this.currentNodeId, this.currentInputId); // 如果当前在搜索状态，也要更新搜索结果中的标签状态 const searchResultList = document.querySelector('.tag_search_result_list'); if (searchResultList) { this.refreshSearchResultsState(); } }, 100); }); this.eventCleanups.push(mouseEnterCleanup, mouseLeaveCleanup, tagClickCleanup); tagsContainer.appendChild(tagItem); }); contentWrapper.appendChild(tagsContainer); container.appendChild(contentWrapper); }).catch(error => { // 处理错误情况 logger.error(`加载已插入标签失败: ${error.message}`); const errorMessage = document.createElement('div'); errorMessage.className = 'error_message'; errorMessage.textContent = '加载已插入标签失败'; errorMessage.style.textAlign = 'center'; errorMessage.style.padding = '20px'; errorMessage.style.color = '#ff6b6b'; contentWrapper.appendChild(errorMessage); container.appendChild(contentWrapper); }); } if (usedTags.size === 0) { container.appendChild(contentWrapper); } } } export { TagManager };