// API密钥管理系统 - 主JavaScript文件 // ============================== // 批量操作模块 - Alpine.js集成 window.bulkOperations = { selectedKeys: [], // 存储选中的密钥ID isBulkDelete: false, // 标记是否进行批量删除操作 // 计算是否所有可见密钥都被选中 get isAllSelected() { const allVisibleKeyIds = this.getAllVisibleKeyIds(); return allVisibleKeyIds.length > 0 && allVisibleKeyIds.every(id => this.selectedKeys.includes(id)); }, // 获取当前页面中所有可见密钥的ID getAllVisibleKeyIds() { const keyElements = document.querySelectorAll('[data-key-id]'); const keyIds = []; keyElements.forEach(el => { // 只收集DOM中可见的元素ID if (el.offsetParent !== null) { const keyId = el.getAttribute('data-key-id'); if (keyId) keyIds.push(keyId); } }); return keyIds; }, // 切换单个密钥的选中状态 toggleKeySelection(keyId) { const index = this.selectedKeys.indexOf(keyId); if (index === -1) { this.selectedKeys.push(keyId); } else { this.selectedKeys.splice(index, 1); } }, // 切换全选/取消全选状态 toggleSelectAll() { const allIds = this.getAllVisibleKeyIds(); if (this.isAllSelected) { // 取消全选 - 从选中列表中移除所有可见ID this.selectedKeys = this.selectedKeys.filter(id => !allIds.includes(id)); } else { // 全选 - 将所有可见ID添加到选中列表 const newSelection = [...this.selectedKeys]; allIds.forEach(id => { if (!newSelection.includes(id)) { newSelection.push(id); } }); this.selectedKeys = newSelection; } }, // 执行批量删除操作 bulkDeleteApiKeys() { if (this.selectedKeys.length === 0) return; this.isBulkDelete = true; this.$store.apiKeys.showDeleteConfirm = true; }, // 触发批量复制功能 - 调用Alpine.js实例中的方法 bulkCopyApiKeys() { const apiKeyManager = document.querySelector('[x-data]').__x.$data; if (apiKeyManager && typeof apiKeyManager.bulkCopyApiKeys === 'function') { apiKeyManager.bulkCopyApiKeys(); } else { console.error('无法找到Alpine.js实例或批量复制方法'); showNotification('复制功能初始化失败,请刷新页面重试', 'error'); } } }; // 认证处理模块 // ============================== // 检测并处理认证失效情况 function handleAuthenticationError(response) { if (response.status === 401) { showNotification('会话已过期,正在重定向到登录页面...', 'error'); setTimeout(() => { window.location.href = '/login'; }, 2000); return true; // 已处理认证错误 } return false; // 非认证错误 } // 扩展fetch API,添加认证错误处理 const originalFetch = window.fetch; window.fetch = async function(url, options = {}) { try { const response = await originalFetch(url, options); if (handleAuthenticationError(response)) { return response; // 认证错误已处理,返回原始响应 } return response; } catch (error) { console.error('Fetch error:', error); throw error; } }; // 初始化XMLHttpRequest拦截器处理认证问题 function initXHRInterceptor() { const originalXHROpen = XMLHttpRequest.prototype.open; const originalXHRSend = XMLHttpRequest.prototype.send; // 拦截open方法以保存URL XMLHttpRequest.prototype.open = function() { this._url = arguments[1]; originalXHROpen.apply(this, arguments); }; // 拦截send方法以添加认证检查 XMLHttpRequest.prototype.send = function() { const xhr = this; const originalOnReadyStateChange = xhr.onreadystatechange; xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 401) { showNotification('会话已过期,正在重定向到登录页面...', 'error'); setTimeout(() => { window.location.href = '/login'; }, 2000); } if (originalOnReadyStateChange) { originalOnReadyStateChange.apply(this, arguments); } }; originalXHRSend.apply(this, arguments); }; } // 初始化模块 // ============================== document.addEventListener('DOMContentLoaded', () => { initScrollContainers(); // 初始化滚动容器 initKeyboardShortcuts(); // 设置键盘快捷键 initBackToTop(); // 设置回到顶部按钮 initXHRInterceptor(); // 启用XHR拦截器处理认证 }); // 设置键盘快捷键 function initKeyboardShortcuts() { // Alt+N: 打开添加密钥模态框 document.addEventListener('keydown', (e) => { if (e.altKey && e.key === 'n') { window.dispatchEvent(new CustomEvent('open-add-modal')); } }); } // 初始化滚动容器,处理长密钥的滚动显示 function initScrollContainers() { const scrollContainers = document.querySelectorAll('.key-scroll-container'); scrollContainers.forEach(container => { // 鼠标悬停时显示滚动条 container.addEventListener('mouseenter', () => { if (container.scrollWidth > container.clientWidth) { container.style.overflowX = 'auto'; } }); // 鼠标离开时隐藏滚动条 container.addEventListener('mouseleave', () => { container.style.overflowX = 'hidden'; }); }); } // 工具函数 // ============================== // 显示通知消息 // message: 通知内容 // type: 通知类型 (success, error, info) function showNotification(message, type = 'info') { const event = new CustomEvent('show-notification', { detail: { message, type } }); window.dispatchEvent(event); } // UI控件 // ============================== // 初始化回到顶部按钮功能 function initBackToTop() { const backToTopBtn = document.getElementById('backToTop'); if (!backToTopBtn) return; const scrollThreshold = 50; // 显示按钮的滚动阈值 // 更新按钮可见性 const updateButtonVisibility = () => { if (window.scrollY > scrollThreshold) { backToTopBtn.classList.add('visible'); } else { backToTopBtn.classList.remove('visible'); } }; // 监听滚动事件 window.addEventListener('scroll', updateButtonVisibility); // 设置按钮点击行为 backToTopBtn.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // 初始状态检查 updateButtonVisibility(); } // 应用状态管理 // ============================== // 重置所有本地存储的应用状态 function resetAppState() { // 需要清除的本地存储键 const stateKeys = [ 'platformStates', 'platformFilters', 'lastSelectedPlatform' ]; // 清除所有状态 stateKeys.forEach(key => localStorage.removeItem(key)); showNotification('已重置所有浏览状态,刷新页面以应用变更。', 'info'); // 自动刷新页面应用更改 setTimeout(() => window.location.reload(), 1000); } // 导出全局函数 window.resetAppState = resetAppState;