pre / static /js /main.js
yangtb24's picture
Upload 37 files
bbb6398 verified
// 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;