static/js/api-key-manager/api-key-loader.js

/**
 * API密钥管理器 - 密钥加载模块
 * 包含API密钥的加载功能
 */

// 加载API密钥
async function loadApiKeys() {
    this.isLoading = true;
    const startTime = Date.now();
    try {
        // 通过AJAX获取完整的HTML部分而不仅仅是JSON数据
        const response = await fetch('/?ajax=1');
        const html = await response.text();
        
        // 创建一个临时容器来解析HTML
        const tempContainer = document.createElement('div');
        tempContainer.innerHTML = html;
        
        // 提取新的API密钥列表HTML
        const newKeyListHtml = tempContainer.querySelector('.space-y-6').outerHTML;
        
        // 替换当前页面上的API密钥列表
        document.querySelector('.space-y-6').outerHTML = newKeyListHtml;
        
        // 重新初始化必要的事件监听器和组件
        initScrollContainers();
        
        // 同时更新本地数据
        const jsonResponse = await fetch('/api/keys');
        const data = await jsonResponse.json();
        this.apiKeys = [...(data.api_keys || [])];
        
        // 显式重置 selectedKeys 和 selectedPlatforms
        this.selectedKeys = [];
        this.selectedPlatforms = [];
        
        // 确保加载动画至少显示200毫秒，使体验更平滑
        const elapsedTime = Date.now() - startTime;
        const minLoadTime = 200; // 最小加载时间（毫秒）
        
        if (elapsedTime < minLoadTime) {
            await new Promise(resolve => setTimeout(resolve, minLoadTime - elapsedTime));
        }
    } catch (error) {
        console.error('加载API密钥失败:', error);
        Swal.fire({
            icon: 'error',
            title: '加载失败',
            text: '无法加载API密钥，请刷新页面重试',
            confirmButtonColor: '#0284c7'
        });
    } finally {
        this.isLoading = false;
    }
}