Create web/static/app.js

web/static/app.js

@@ -0,0 +1,1980 @@
+const API_BASE = '/api';
+const REFRESH_INTERVAL = 3000;
+let autoRefreshTimer = null;
+
+// Admin Password Management
+let adminPassword = null;
+const ADMIN_STORAGE_KEY = 'zencoder_admin_pass';
+
+// State
+let currentState = {
+    page: 1,
+    size: 10,
+    category: 'normal',
+    total: 0,
+    selectedIds: new Set(),
+    items: []
+};
+
+// --- Admin Password Management ---
+function savePassword(password) {
+    try {
+        localStorage.setItem(ADMIN_STORAGE_KEY, password);
+        console.log('Password saved to localStorage');
+        return true;
+    } catch (e) {
+        console.error('Failed to save password to localStorage:', e);
+        return false;
+    }
+}
+
+function getSavedPassword() {
+    try {
+        const saved = localStorage.getItem(ADMIN_STORAGE_KEY);
+        if (saved) {
+            console.log('Found saved password in localStorage');
+        }
+        return saved;
+    } catch (e) {
+        console.error('Failed to get password from localStorage:', e);
+        return null;
+    }
+}
+
+function clearSavedPassword() {
+    try {
+        localStorage.removeItem(ADMIN_STORAGE_KEY);
+    } catch (e) {
+        console.error('Failed to clear password from localStorage:', e);
+    }
+}
+
+async function verifyAdminPassword(password) {
+    try {
+        // 尝试调用一个需要管理密码的API来验证
+        const response = await fetch(`${API_BASE}/accounts?page=1&size=1`, {
+            headers: {
+                'X-Admin-Password': password
+            }
+        });
+        return response.ok;
+    } catch (e) {
+        return false;
+    }
+}
+
+function showAdminLogin() {
+    document.getElementById('adminPasswordModal').classList.remove('hidden');
+    document.getElementById('mainApp').classList.add('hidden');
+    document.getElementById('adminPassword').focus();
+}
+
+function hideAdminLogin() {
+    document.getElementById('adminPasswordModal').classList.add('hidden');
+    document.getElementById('mainApp').classList.remove('hidden');
+    document.getElementById('mainApp').classList.add('flex');
+}
+
+async function handleAdminLogin(password, remember = false) {
+    console.log('Attempting login, remember:', remember);
+    
+    const isValid = await verifyAdminPassword(password);
+    
+    if (isValid) {
+        adminPassword = password;
+        
+        if (remember) {
+            const saved = savePassword(password);
+            if (!saved) {
+                console.warn('Failed to save password to localStorage');
+            }
+        } else {
+            // 如果没有勾选记住，清除之前保存的密码
+            clearSavedPassword();
+        }
+        
+        hideAdminLogin();
+        document.getElementById('passwordError').classList.add('hidden');
+        
+        // 开始加载数据
+        initializeApp();
+        return true;
+    } else {
+        document.getElementById('passwordError').classList.remove('hidden');
+        return false;
+    }
+}
+
+function logout() {
+    adminPassword = null;
+    clearSavedPassword();
+    
+    // 停止自动刷新
+    if (autoRefreshTimer) {
+        clearInterval(autoRefreshTimer);
+        autoRefreshTimer = null;
+    }
+    
+    // 显示登录界面
+    showAdminLogin();
+}
+
+async function initAdminAuth() {
+    // 检查是否有保存的密码
+    const savedPassword = getSavedPassword();
+    
+    if (savedPassword) {
+        console.log('Found saved password, attempting auto-login...');
+        // 直接设置密码，不验证（因为验证可能由于网络问题失败）
+        adminPassword = savedPassword;
+        
+        // 尝试验证密码
+        try {
+            const isValid = await verifyAdminPassword(savedPassword);
+            if (isValid) {
+                console.log('Saved password validated successfully');
+                hideAdminLogin();
+                initializeApp();
+                return;
+            } else {
+                console.log('Saved password validation failed');
+                // 密码无效，清除并显示登录界面
+                adminPassword = null;
+                clearSavedPassword();
+            }
+        } catch (e) {
+            console.log('Password validation error, keeping saved password:', e);
+            // 网络错误时仍然保留密码并尝试使用
+            hideAdminLogin();
+            initializeApp();
+            return;
+        }
+    }
+    
+    // 显示登录界面
+    showAdminLogin();
+}
+
+function toggleAdminPasswordVisibility() {
+    const input = document.getElementById('adminPassword');
+    const eyeIcon = document.getElementById('adminEyeIcon');
+    
+    if (input.type === 'password') {
+        input.type = 'text';
+        eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />';
+    } else {
+        input.type = 'password';
+        eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />';
+    }
+}
+
+// Admin Password Form Handler
+document.addEventListener('DOMContentLoaded', function() {
+    const adminForm = document.getElementById('adminPasswordForm');
+    if (adminForm) {
+        // 检查并恢复记住密码的勾选状态
+        const hasSavedPassword = getSavedPassword() !== null;
+        if (hasSavedPassword) {
+            const rememberCheckbox = document.getElementById('rememberPassword');
+            if (rememberCheckbox) {
+                rememberCheckbox.checked = true;
+            }
+        }
+        
+        adminForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const password = document.getElementById('adminPassword').value.trim();
+            const remember = document.getElementById('rememberPassword').checked;
+            const btn = document.getElementById('adminLoginBtn');
+            const btnText = document.getElementById('adminBtnText');
+            const btnLoading = document.getElementById('adminBtnLoading');
+            
+            if (!password) {
+                document.getElementById('passwordError').textContent = '请输入管理密码';
+                document.getElementById('passwordError').classList.remove('hidden');
+                return;
+            }
+            
+            btn.disabled = true;
+            btnText.textContent = '验证中...';
+            btnLoading.classList.remove('hidden');
+            
+            const success = await handleAdminLogin(password, remember);
+            
+            btn.disabled = false;
+            btnText.textContent = '验证';
+            btnLoading.classList.add('hidden');
+            
+            if (success) {
+                document.getElementById('adminPassword').value = '';
+            }
+        });
+    }
+});
+
+function getAuthHeaders() {
+    const headers = {};
+    if (adminPassword) {
+        headers['X-Admin-Password'] = adminPassword;
+    }
+    return headers;
+}
+
+// --- Theme Management ---
+function initTheme() {
+    const isDark = localStorage.theme === 'dark' || 
+        (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    
+    if (isDark) {
+        document.documentElement.classList.add('dark');
+    } else {
+        document.documentElement.classList.remove('dark');
+    }
+    updateThemeIcons(isDark);
+}
+
+function toggleTheme() {
+    const isDark = document.documentElement.classList.toggle('dark');
+    localStorage.theme = isDark ? 'dark' : 'light';
+    updateThemeIcons(isDark);
+}
+
+function updateThemeIcons(isDark) {
+    const sun = document.getElementById('sunIcon');
+    const moon = document.getElementById('moonIcon');
+    if (isDark) {
+        sun.classList.remove('hidden');
+        moon.classList.add('hidden');
+    } else {
+        sun.classList.add('hidden');
+        moon.classList.remove('hidden');
+    }
+}
+
+document.getElementById('themeToggle').addEventListener('click', toggleTheme);
+
+// --- Password Visibility ---
+function togglePasswordVisibility() {
+    const input = document.getElementById('client_secret');
+    const eyeIcon = document.getElementById('eyeIcon');
+    
+    if (input.type === 'password') {
+        input.type = 'text';
+        eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />';
+    } else {
+        input.type = 'password';
+        eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />';
+    }
+}
+
+// --- Data Logic ---
+const PLAN_LIMITS = { Free: 30, Starter: 280, Core: 750, Advanced: 1900, Max: 4200 };
+
+function getStatusConfig(acc) {
+    switch (acc.status) {
+        case 'banned':
+            return { text: '已封禁', class: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400', dot: 'bg-red-500' };
+        case 'error':
+            return { text: '异常', class: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400', dot: 'bg-yellow-500' };
+        case 'cooling':
+            return { text: '冷却中', class: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400', dot: 'bg-orange-500' };
+        case 'disabled':
+            return { text: '已禁用', class: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400', dot: 'bg-gray-500' };
+        default:
+            return { text: '正常', class: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400', dot: 'bg-green-500' };
+    }
+}
+
+function getTokenStatusConfig(record) {
+    switch (record.status) {
+        case 'banned':
+            return { text: '已封禁', class: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400', dot: 'bg-red-500' };
+        case 'expired':
+            return { text: '已过期', class: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400', dot: 'bg-orange-500' };
+        case 'disabled':
+            return { text: '已禁用', class: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400', dot: 'bg-gray-500' };
+        default:
+            return { text: '正常', class: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400', dot: 'bg-green-500' };
+    }
+}
+
+function formatDate(dateStr) {
+    if (!dateStr || dateStr.startsWith('0001')) return '-';
+    const d = new Date(dateStr);
+    return d.toLocaleDateString('zh-CN');
+}
+
+function formatLastUsed(dateStr) {
+    if (!dateStr || dateStr.startsWith('0001')) return '从未';
+    
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diff = now - date;
+    
+    // 转换为秒、分钟、小时、天
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    
+    if (days > 0) {
+        return `${days}天前`;
+    } else if (hours > 0) {
+        return `${hours}小时前`;
+    } else if (minutes > 0) {
+        return `${minutes}分钟前`;
+    } else if (seconds > 0) {
+        return `${seconds}秒前`;
+    } else {
+        return '刚刚';
+    }
+}
+
+// 格式化积分刷新时间显示
+function formatCreditRefresh(creditRefreshTimeStr) {
+    if (!creditRefreshTimeStr || creditRefreshTimeStr.startsWith('0001')) {
+        return { text: '未知', class: 'text-gray-400', detail: '' };
+    }
+    
+    const refreshTime = new Date(creditRefreshTimeStr);
+    const now = new Date();
+    const diffMs = refreshTime - now;
+    
+    if (diffMs < 0) {
+        // 已过期，需要刷新
+        const daysPast = Math.floor(-diffMs / (1000 * 60 * 60 * 24));
+        const hoursPast = Math.floor(-diffMs / (1000 * 60 * 60));
+        
+        if (daysPast > 0) {
+            return {
+                text: '需要刷新',
+                class: 'text-red-600 dark:text-red-400',
+                detail: `${daysPast}天前过期`
+            };
+        } else if (hoursPast > 0) {
+            return {
+                text: '需要刷新',
+                class: 'text-red-600 dark:text-red-400',
+                detail: `${hoursPast}小时前过期`
+            };
+        } else {
+            return {
+                text: '需要刷新',
+                class: 'text-red-600 dark:text-red-400',
+                detail: '刚过期'
+            };
+        }
+    } else if (diffMs < 1000 * 60 * 60) {
+        // 1小时内刷新
+        const minutes = Math.floor(diffMs / (1000 * 60));
+        return {
+            text: `${minutes}分钟后`,
+            class: 'text-orange-600 dark:text-orange-400',
+            detail: '即将刷新'
+        };
+    } else if (diffMs < 1000 * 60 * 60 * 24) {
+        // 24小时内刷新
+        const hours = Math.floor(diffMs / (1000 * 60 * 60));
+        return {
+            text: `${hours}小时后`,
+            class: 'text-yellow-600 dark:text-yellow-400',
+            detail: '今日刷新'
+        };
+    } else {
+        // 超过1天
+        const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+        return {
+            text: `${days}天后`,
+            class: 'text-green-600 dark:text-green-400',
+            detail: refreshTime.toLocaleDateString('zh-CN') + ' ' + refreshTime.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'})
+        };
+    }
+}
+
+async function loadAccounts(isAutoRefresh = false) {
+    try {
+        const params = new URLSearchParams({
+            page: currentState.page,
+            size: currentState.size,
+            status: currentState.category // map category to status param
+        });
+
+        const resp = await fetch(`${API_BASE}/accounts?${params}`, {
+            headers: getAuthHeaders()
+        });
+        if (!resp.ok) throw new Error('Failed to fetch');
+        
+        const data = await resp.json();
+        
+        // Handle both old and new API response formats temporarily if needed, but we know it's new
+        const items = data.items || [];
+        const total = data.total || 0;
+
+        currentState.items = items;
+        currentState.total = total;
+        
+        // Retain selection if items still exist
+        const newSet = new Set();
+        items.forEach(item => {
+            if (currentState.selectedIds.has(item.id)) {
+                newSet.add(item.id);
+            }
+        });
+        currentState.selectedIds = newSet;
+
+        renderAccounts(items);
+        updatePaginationUI();
+        updateTabsUI();
+        updateBatchUI();
+        
+        if (data.stats) {
+            updateStatsUI(data.stats);
+        }
+    } catch (e) {
+        if (!isAutoRefresh) console.error("Failed to load accounts", e);
+    }
+}
+
+function updateStatsUI(stats) {
+    if (!stats) return;
+    document.getElementById('stat-total-accounts').textContent = stats.total_accounts;
+    document.getElementById('stat-active-accounts').textContent = stats.active_accounts;
+    document.getElementById('stat-cooling-accounts').textContent = stats.cooling_accounts || 0;
+    document.getElementById('stat-banned-accounts').textContent = stats.banned_accounts;
+    document.getElementById('stat-error-accounts').textContent = stats.error_accounts;
+    document.getElementById('stat-disabled-accounts').textContent = stats.disabled_accounts || 0;
+    document.getElementById('stat-today-usage').textContent = stats.today_usage.toFixed(2);
+    document.getElementById('stat-total-usage').textContent = stats.total_usage.toFixed(2);
+}
+
+function renderAccounts(accounts) {
+    const tbody = document.getElementById('accountList');
+    const emptyState = document.getElementById('emptyState');
+    const tableContainer = document.getElementById('tableContainer');
+    const paginationContainer = document.getElementById('paginationContainer');
+    const selectAll = document.getElementById('selectAll');
+    
+    if (accounts.length === 0) {
+        tbody.innerHTML = '';
+        tableContainer.classList.add('hidden');
+        paginationContainer.classList.add('hidden');
+
+        emptyState.classList.remove('hidden');
+        emptyState.classList.add('flex');
+        selectAll.checked = false;
+        selectAll.disabled = true;
+        return;
+    }
+
+    tableContainer.classList.remove('hidden');
+    paginationContainer.classList.remove('hidden');
+
+    emptyState.classList.add('hidden');
+    emptyState.classList.remove('flex');
+    
+    selectAll.disabled = false;
+    selectAll.checked = accounts.length > 0 && accounts.every(a => currentState.selectedIds.has(a.id));
+
+    const html = accounts.map(acc => {
+        const status = getStatusConfig(acc);
+        const limit = PLAN_LIMITS[acc.plan_type] || 30;
+        const subDate = formatDate(acc.subscription_start_date);
+        const emailOrId = acc.email ? acc.email : acc.client_id;
+        const shortId = acc.client_id.length > 12 ? acc.client_id.substring(0, 12) + '...' : acc.client_id;
+        const usagePercent = Math.min((acc.daily_used / limit) * 100, 100);
+        const isSelected = currentState.selectedIds.has(acc.id);
+        const lastUsedText = formatLastUsed(acc.last_used);
+        
+        // 格式化Token过期时间
+        const formatTokenExpiry = (tokenExpiryStr) => {
+            if (!tokenExpiryStr || tokenExpiryStr.startsWith('0001')) {
+                return { text: '未知', class: 'text-gray-400', detail: '' };
+            }
+            
+            const expiryDate = new Date(tokenExpiryStr);
+            const now = new Date();
+            const diffMs = expiryDate - now;
+            
+            if (diffMs < 0) {
+                // 已过期
+                const daysPast = Math.floor(-diffMs / (1000 * 60 * 60 * 24));
+                return {
+                    text: '已过期',
+                    class: 'text-red-600 dark:text-red-400',
+                    detail: `${daysPast}天前过期`
+                };
+            } else if (diffMs < 1000 * 60 * 60) {
+                // 1小时内过期
+                const minutes = Math.floor(diffMs / (1000 * 60));
+                return {
+                    text: `${minutes}分钟后`,
+                    class: 'text-red-500 dark:text-red-400',
+                    detail: '即将过期'
+                };
+            } else if (diffMs < 1000 * 60 * 60 * 24) {
+                // 24小时内过期
+                const hours = Math.floor(diffMs / (1000 * 60 * 60));
+                return {
+                    text: `${hours}小时后`,
+                    class: 'text-orange-600 dark:text-orange-400',
+                    detail: '今日过期'
+                };
+            } else {
+                // 超过1天
+                const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+                return {
+                    text: `${days}天后`,
+                    class: 'text-green-600 dark:text-green-400',
+                    detail: expiryDate.toLocaleDateString('zh-CN')
+                };
+            }
+        };
+        
+        const tokenExpiry = formatTokenExpiry(acc.token_expiry);
+        
+        return `
+        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors ${isSelected ? 'bg-blue-50 dark:bg-blue-900/10' : ''}">
+            <td class="px-6 py-4 whitespace-nowrap text-center">
+                <input type="checkbox" onchange="toggleSelect(${acc.id})" ${isSelected ? 'checked' : ''} class="rounded border-gray-300 dark:border-gray-600 text-primary focus:ring-primary h-4 w-4 mx-auto">
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-center">
+                <div class="text-sm font-medium text-gray-900 dark:text-white">${acc.id}</div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+                <div class="flex items-center justify-center text-center">
+                    <div>
+                        <div class="text-sm font-medium text-gray-900 dark:text-white">${emailOrId}</div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400 font-mono mt-0.5" title="${acc.client_id}">ID: ${shortId}</div>
+                    </div>
+                </div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-center">
+                <div class="text-sm text-gray-900 dark:text-white font-medium">${acc.plan_type}</div>
+                <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">自: ${subDate}</div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+                <div class="w-full max-w-[140px] mx-auto">
+                    <div class="flex justify-end gap-1 text-xs mb-1">
+                        <span class="text-gray-900 dark:text-white font-medium">${acc.daily_used.toFixed(2)}</span>
+                        <span class="text-gray-500">/ ${limit}</span>
+                    </div>
+                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 overflow-hidden">
+                        <div class="bg-primary h-1.5 rounded-full" style="width: ${usagePercent}%"></div>
+                    </div>
+                    <div class="text-[10px] text-gray-400 mt-1">总计: ${acc.total_used.toFixed(2)}</div>
+                </div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-center">
+                <div class="text-sm">
+                    <span class="${lastUsedText === '从未' ? 'text-gray-400' : 'text-gray-600 dark:text-gray-300'}">${lastUsedText}</span>
+                    ${acc.last_used && !acc.last_used.startsWith('0001') ?
+                        `<div class="text-[10px] text-gray-400 mt-0.5">${new Date(acc.last_used).toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'})}</div>`
+                        : ''}
+                </div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-center">
+                <div class="text-sm">
+                    <span class="${tokenExpiry.class} font-medium">${tokenExpiry.text}</span>
+                    ${tokenExpiry.detail ? `<div class="text-[10px] text-gray-400 mt-0.5">${tokenExpiry.detail}</div>` : ''}
+                </div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-center">
+                <div class="text-sm">
+                    <span class="${formatCreditRefresh(acc.credit_refresh_time).class} font-medium">${formatCreditRefresh(acc.credit_refresh_time).text}</span>
+                    ${formatCreditRefresh(acc.credit_refresh_time).detail ? `<div class="text-[10px] text-gray-400 mt-0.5">${formatCreditRefresh(acc.credit_refresh_time).detail}</div>` : ''}
+                </div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-center">
+                <span class="px-2.5 py-0.5 inline-flex items-center text-xs font-medium rounded-full ${status.class}">
+                    <span class="w-1.5 h-1.5 rounded-full ${status.dot} mr-1.5"></span>
+                    ${status.text}
+                </span>
+                ${acc.status === 'cooling' && acc.cooling_until && !acc.cooling_until.startsWith('0001') ?
+                    (() => {
+                        const coolingDate = new Date(acc.cooling_until);
+                        const now = new Date();
+                        const diffMs = coolingDate - now;
+                        
+                        if (diffMs > 0) {
+                            const hours = Math.floor(diffMs / (1000 * 60 * 60));
+                            const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+                            
+                            let timeText = '';
+                            if (hours > 0) {
+                                timeText = `${hours}小时${minutes}分钟后解除`;
+                            } else {
+                                timeText = `${minutes}分钟后解除`;
+                            }
+                            
+                            return `<div class="text-[10px] text-orange-500 dark:text-orange-400 mt-1" title="${coolingDate.toLocaleString('zh-CN')}">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="inline h-3 w-3 mr-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                ${timeText}
+                            </div>`;
+                        } else {
+                            return `<div class="text-[10px] text-orange-500 dark:text-orange-400 mt-1">即将解除</div>`;
+                        }
+                    })()
+                    : acc.ban_reason ? `<div class="text-[10px] text-red-500 dark:text-red-400 mt-1 max-w-[120px] truncate mx-auto" title="${acc.ban_reason}">${acc.ban_reason}</div>` : ''}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
+                <div class="flex justify-center gap-3">
+                    <button onclick="toggleAccount(${acc.id})" class="text-primary hover:text-primary-hover transition-colors" title="${acc.is_active ? '禁用' : '启用'}">
+                        ${acc.is_active
+                            ? '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>'
+                            : '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>'
+                        }
+                    </button>
+                    <button onclick="deleteAccount(${acc.id})" class="text-red-500 hover:text-red-700 transition-colors" title="删除">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                    </button>
+                </div>
+            </td>
+        </tr>`;
+    }).join('');
+
+    // Optimization: Only update if content changed
+    if (tbody.innerHTML !== html) {
+        tbody.innerHTML = html;
+    }
+}
+
+// --- Interactions ---
+
+function switchCategory(cat) {
+    currentState.category = cat;
+    currentState.page = 1;
+    currentState.selectedIds.clear();
+    loadAccounts();
+}
+
+function updateTabsUI() {
+    ['normal', 'banned', 'cooling', 'disabled', 'error'].forEach(cat => {
+        const btn = document.getElementById(`tab-${cat}`);
+        if (currentState.category === cat) {
+            btn.className = "px-3 py-1.5 text-xs font-medium rounded-md transition-all bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm";
+        } else {
+            btn.className = "px-3 py-1.5 text-xs font-medium rounded-md transition-all text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white";
+        }
+    });
+}
+
+function changePage(delta) {
+    const newPage = currentState.page + delta;
+    if (newPage > 0 && newPage <= Math.ceil(currentState.total / currentState.size)) {
+        currentState.page = newPage;
+        loadAccounts();
+    }
+}
+
+function updatePaginationUI() {
+    const totalPages = Math.ceil(currentState.total / currentState.size);
+    document.getElementById('pageStart').textContent = currentState.total === 0 ? 0 : (currentState.page - 1) * currentState.size + 1;
+    document.getElementById('pageEnd').textContent = Math.min(currentState.page * currentState.size, currentState.total);
+    document.getElementById('totalItems').textContent = currentState.total;
+    
+    document.getElementById('prevPage').disabled = currentState.page <= 1;
+    document.getElementById('nextPage').disabled = currentState.page >= totalPages;
+}
+
+function toggleSelectAll() {
+    const selectAll = document.getElementById('selectAll');
+    if (selectAll.checked) {
+        currentState.items.forEach(item => currentState.selectedIds.add(item.id));
+    } else {
+        currentState.selectedIds.clear();
+    }
+    renderAccounts(currentState.items); // re-render to show selection state
+    updateBatchUI();
+}
+
+function toggleSelect(id) {
+    if (currentState.selectedIds.has(id)) {
+        currentState.selectedIds.delete(id);
+    } else {
+        currentState.selectedIds.add(id);
+    }
+    renderAccounts(currentState.items);
+    updateBatchUI();
+}
+
+function updateBatchUI() {
+    const batchActions = document.getElementById('batchActions');
+    const countSpan = document.getElementById('selectedCount');
+    const count = currentState.selectedIds.size;
+    
+    // 始终���示批量操作区域
+    batchActions.classList.remove('hidden');
+    batchActions.classList.add('flex');
+    
+    // 根据当前tab和选中状态显示不同的按钮
+    const buttonsHtml = getBatchButtonsHtml(currentState.category, count);
+    
+    // 更新按钮区域内容
+    if (count > 0) {
+        countSpan.textContent = `${count} 选中`;
+        countSpan.classList.remove('hidden');
+    } else {
+        countSpan.classList.add('hidden');
+    }
+    
+    // 更新按钮容器
+    const buttonsContainer = document.getElementById('batchButtonsContainer');
+    if (buttonsContainer) {
+        buttonsContainer.innerHTML = buttonsHtml;
+    }
+}
+
+function getBatchButtonsHtml(category, selectedCount) {
+    // 根据是否有选中数据，决定使用哪个函数
+    const moveHandler = selectedCount > 0 ? 'batchMove' : 'oneClickMove';
+    const deleteHandler = selectedCount > 0 ? 'batchDelete(false)' : 'batchDelete(true)';
+    
+    // 统一的按钮布局，只隐藏当前tab对应的按钮
+    return `
+        <button onclick="${moveHandler}('normal')" class="px-3 py-1.5 bg-green-600 text-white text-xs font-medium rounded-md hover:bg-green-700 transition-colors ${category === 'normal' ? 'hidden' : ''}">
+            移至正常
+        </button>
+        <button onclick="${moveHandler}('cooling')" class="px-3 py-1.5 bg-orange-600 text-white text-xs font-medium rounded-md hover:bg-orange-700 transition-colors ${category === 'cooling' ? 'hidden' : ''}">
+            移至冷却
+        </button>
+        <button onclick="${moveHandler}('disabled')" class="px-3 py-1.5 bg-gray-600 text-white text-xs font-medium rounded-md hover:bg-gray-700 transition-colors ${category === 'disabled' ? 'hidden' : ''}">
+            移至禁用
+        </button>
+        <button onclick="${moveHandler}('banned')" class="px-3 py-1.5 bg-red-600 text-white text-xs font-medium rounded-md hover:bg-red-700 transition-colors ${category === 'banned' ? 'hidden' : ''}">
+            移至封禁
+        </button>
+        <button onclick="${moveHandler}('error')" class="px-3 py-1.5 bg-yellow-600 text-white text-xs font-medium rounded-md hover:bg-yellow-700 transition-colors ${category === 'error' ? 'hidden' : ''}">
+            移至异常
+        </button>
+        <div class="border-l border-gray-300 dark:border-gray-600 mx-2 h-6"></div>
+        <button onclick="${deleteHandler}" class="px-3 py-1.5 bg-red-700 text-white text-xs font-medium rounded-md hover:bg-red-800 transition-colors flex items-center gap-1">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+            ${selectedCount > 0 ? '删除选中' : '删除全部'}
+        </button>
+    `;
+}
+
+async function oneClickMove(targetCategory) {
+    // 一键移动当前分类的所有账号到目标分类
+    if (currentState.category === targetCategory) {
+        alert('当前已在目标分类中');
+        return;
+    }
+    
+    const confirmMsg = `确定要将当前分类"${getCategoryName(currentState.category)}"的所有账号移至"${getCategoryName(targetCategory)}"吗？`;
+    if (!confirm(confirmMsg)) return;
+    
+    try {
+        const resp = await fetch(`${API_BASE}/accounts/batch/move-all`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                ...getAuthHeaders()
+            },
+            body: JSON.stringify({
+                from_status: currentState.category,
+                to_status: targetCategory
+            })
+        });
+        
+        if (!resp.ok) throw new Error('One-click move failed');
+        
+        const result = await resp.json();
+        alert(`成功移动 ${result.moved_count || 0} 个账号`);
+        
+        // 刷新当前页面
+        loadAccounts();
+    } catch (e) {
+        alert('一键操作失败: ' + e.message);
+    }
+}
+
+function getCategoryName(category) {
+    const names = {
+        'normal': '正常',
+        'cooling': '冷却',
+        'banned': '封禁',
+        'disabled': '禁用',
+        'error': '异常'
+    };
+    return names[category] || category;
+}
+
+async function batchMove(category) {
+    if (currentState.selectedIds.size === 0) return;
+    
+    const ids = Array.from(currentState.selectedIds);
+    try {
+        const resp = await fetch(`${API_BASE}/accounts/batch/category`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                ...getAuthHeaders()
+            },
+            body: JSON.stringify({ ids, status: category }) // send as status
+        });
+        
+        if (!resp.ok) throw new Error('Batch update failed');
+        
+        currentState.selectedIds.clear();
+        loadAccounts();
+    } catch (e) {
+        alert('批量操作失败');
+    }
+}
+
+// 批量删除功能
+async function batchDelete(deleteAll = false) {
+    let confirmMsg;
+    let requestData;
+    
+    if (deleteAll) {
+        // 删除当前分类的所有账号
+        confirmMsg = `确定要删除当前分类"${getCategoryName(currentState.category)}"的所有账号吗？此操作不可逆转！`;
+        requestData = {
+            delete_all: true,
+            status: currentState.category
+        };
+    } else {
+        // 删除选中的账号
+        if (currentState.selectedIds.size === 0) {
+            alert('请先选择要删除的账号');
+            return;
+        }
+        confirmMsg = `确定要删除选中的 ${currentState.selectedIds.size} 个账号吗？此操作不可逆转！`;
+        requestData = {
+            ids: Array.from(currentState.selectedIds)
+        };
+    }
+    
+    if (!confirm(confirmMsg)) return;
+    
+    try {
+        const resp = await fetch(`${API_BASE}/accounts/batch/delete`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                ...getAuthHeaders()
+            },
+            body: JSON.stringify(requestData)
+        });
+        
+        if (!resp.ok) {
+            const err = await resp.json();
+            throw new Error(err.error || 'Delete failed');
+        }
+        
+        const result = await resp.json();
+        alert(`成功删除 ${result.deleted_count || 0} 个账号`);
+        
+        // 清空选择并刷新页面
+        currentState.selectedIds.clear();
+        loadAccounts();
+    } catch (e) {
+        alert('批量删除失败: ' + e.message);
+    }
+}
+
+// 批量刷新Token功能
+async function batchRefreshToken(refreshAll = false) {
+    let confirmMsg;
+    let requestData;
+    
+    if (refreshAll) {
+        confirmMsg = "确定要刷新所有正常账号的Token吗？此操作可能需要较长时间。";
+        requestData = { all: true };
+    } else {
+        if (currentState.selectedIds.size === 0) {
+            alert('请先选择要刷新Token的账号');
+            return;
+        }
+        confirmMsg = `确定要刷新选中的 ${currentState.selectedIds.size} 个账号的Token吗？`;
+        requestData = { ids: Array.from(currentState.selectedIds) };
+    }
+    
+    if (!confirm(confirmMsg)) return;
+    
+    try {
+        // 显示进度弹窗
+        showRefreshProgressModal();
+        addRefreshProgressLog('开始批量刷新Token...', 'info');
+        
+        const resp = await fetch(`${API_BASE}/accounts/batch/refresh-token`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                ...getAuthHeaders()
+            },
+            body: JSON.stringify(requestData)
+        });
+        
+        if (!resp.ok) {
+            const err = await resp.json();
+            throw new Error(err.error || 'Unknown error');
+        }
+
+        // 处理流式响应
+        const reader = resp.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        let successCount = 0;
+        let failCount = 0;
+        let total = 0;
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\n');
+            buffer = lines.pop(); // 保留不完整的行
+
+            for (const line of lines) {
+                if (!line.trim() || !line.startsWith('data: ')) continue;
+                
+                try {
+                    const jsonStr = line.substring(6); // 移除 "data: " 前缀
+                    const event = JSON.parse(jsonStr);
+                    
+                    switch (event.type) {
+                        case 'start':
+                            total = event.total;
+                            updateRefreshProgress(0, total, '开始刷新');
+                            addRefreshProgressLog(`准备刷新 ${total} 个账号的Token`, 'info');
+                            break;
+                        
+                        case 'success':
+                            successCount++;
+                            updateRefreshProgress(successCount + failCount, total, '刷新中');
+                            addRefreshProgressLog(`✓ [${event.index}/${total}] 刷新成功: ${event.account_id}${event.email ? ` (${event.email})` : ''}`, 'success');
+                            break;
+                        
+                        case 'error':
+                            failCount++;
+                            updateRefreshProgress(successCount + failCount, total, '刷新中');
+                            addRefreshProgressLog(`✗ [${event.index}/${total}] ${event.message} (${event.account_id})`, 'error');
+                            break;
+                        
+                        case 'complete':
+                            updateRefreshProgress(total, total, '完成');
+                            addRefreshProgressLog(`批量刷新完成！成功 ${event.success} 个，失败 ${event.fail} 个`, 'info');
+                            showRefreshProgressSummary(event.success, event.fail);
+                            break;
+                    }
+                } catch (e) {
+                    console.error('解析事件失败:', e, line);
+                }
+            }
+        }
+        
+        return true;
+    } catch (e) {
+        addRefreshProgressLog(`错误: ${e.message}`, 'error');
+        document.getElementById('refreshProgressCloseBtn').classList.remove('hidden');
+        return false;
+    }
+}
+
+// 刷新进度弹窗管理
+function showRefreshProgressModal() {
+    document.getElementById('refreshProgressModal').classList.remove('hidden');
+    document.getElementById('refreshProgressLog').innerHTML = '';
+    document.getElementById('refreshProgressBar').style.width = '0%';
+    document.getElementById('refreshProgressText').textContent = '准备中...';
+    document.getElementById('refreshProgressCount').textContent = '0/0';
+    document.getElementById('refreshProgressSummary').classList.add('hidden');
+    document.getElementById('refreshProgressCloseBtn').classList.add('hidden');
+}
+
+function closeRefreshProgressModal() {
+    document.getElementById('refreshProgressModal').classList.add('hidden');
+    loadAccounts(); // 刷新账号列表
+    currentState.selectedIds.clear(); // 清空选择
+    updateBatchUI(); // 更新批量操作UI
+}
+
+function addRefreshProgressLog(message, type = 'info') {
+    const log = document.getElementById('refreshProgressLog');
+    const colors = {
+        info: 'text-gray-600 dark:text-gray-400',
+        success: 'text-green-600 dark:text-green-400',
+        error: 'text-red-600 dark:text-red-400',
+        warning: 'text-yellow-600 dark:text-yellow-400'
+    };
+    
+    const entry = document.createElement('div');
+    entry.className = colors[type] || colors.info;
+    entry.textContent = message;
+    log.appendChild(entry);
+    
+    // 自动滚动到底部
+    log.scrollTop = log.scrollHeight;
+}
+
+function updateRefreshProgress(current, total, text) {
+    const percentage = total > 0 ? (current / total) * 100 : 0;
+    document.getElementById('refreshProgressBar').style.width = `${percentage}%`;
+    document.getElementById('refreshProgressText').textContent = text;
+    document.getElementById('refreshProgressCount').textContent = `${current}/${total}`;
+}
+
+function showRefreshProgressSummary(success, fail) {
+    document.getElementById('refreshSummarySuccess').textContent = success;
+    document.getElementById('refreshSummaryFail').textContent = fail;
+    document.getElementById('refreshProgressSummary').classList.remove('hidden');
+    document.getElementById('refreshProgressCloseBtn').classList.remove('hidden');
+}
+
+async function addAccount(data) {
+    const btn = document.getElementById('submitBtn');
+    const btnText = document.getElementById('btnText');
+    const btnLoading = document.getElementById('btnLoading');
+    
+    btn.disabled = true;
+    btnLoading.classList.remove('hidden');
+
+    try {
+        // 生成模式使用流式传输
+        if (data.generate_mode) {
+            btnText.textContent = '生成中...';
+            
+            const resp = await fetch(`${API_BASE}/accounts`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    ...getAuthHeaders()
+                },
+                body: JSON.stringify(data)
+            });
+            
+            if (!resp.ok) {
+                const err = await resp.json();
+                throw new Error(err.error || 'Unknown error');
+            }
+
+            // 处理流式响应
+            const reader = resp.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+            let successCount = 0;
+            let failCount = 0;
+            let total = 0;
+            let firstSuccessAccount = null; // 记录第一个成功的账号信息
+            let isProgressShown = false;
+
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split('\n');
+                buffer = lines.pop(); // 保留不完整的行
+
+                for (const line of lines) {
+                    if (!line.trim() || !line.startsWith('data: ')) continue;
+                    
+                    try {
+                        const jsonStr = line.substring(6); // 移除 "data: " 前缀
+                        const event = JSON.parse(jsonStr);
+                        
+                        switch (event.type) {
+                            case 'start':
+                                total = event.total;
+                                // 如果���单个账号生成，不显示进度窗口
+                                if (total > 1) {
+                                    showProgressModal();
+                                    updateProgress(0, total, '开始生成');
+                                    addProgressLog('开始批量生成凭证...', 'info');
+                                    addProgressLog(`准备生成 ${total} 个凭证`, 'info');
+                                    isProgressShown = true;
+                                }
+                                break;
+                            
+                            case 'success':
+                                successCount++;
+                                // 记录第一个成功的账号信息（单个生成时使用）
+                                if (!firstSuccessAccount && event.email) {
+                                    firstSuccessAccount = {
+                                        email: event.email,
+                                        plan: event.plan,
+                                        token_expiry: event.token_expiry,
+                                        subscription_start_date: event.subscription_start_date
+                                    };
+                                }
+                                
+                                if (isProgressShown) {
+                                    updateProgress(successCount + failCount, total, '生成中');
+                                    const action = event.action === 'created' ? '创建' : '更新';
+                                    addProgressLog(`✓ [${event.index}/${total}] ${action}成功: ${event.email} (${event.plan})`, 'success');
+                                }
+                                break;
+                            
+                            case 'error':
+                                failCount++;
+                                if (isProgressShown) {
+                                    updateProgress(successCount + failCount, total, '生成中');
+                                    const clientInfo = event.client_id ? ` (${event.client_id})` : '';
+                                    addProgressLog(`✗ [${event.index}/${total}] ${event.message}${clientInfo}`, 'error');
+                                }
+                                break;
+                            
+                            case 'complete':
+                                if (isProgressShown) {
+                                    // 批量生成完成
+                                    updateProgress(total, total, '完成');
+                                    addProgressLog(`批量生成完成！成功 ${event.success} 个，失败 ${event.fail} 个`, 'info');
+                                    showProgressSummary(event.success, event.fail);
+                                } else {
+                                    // 单个账号生成完成
+                                    if (firstSuccessAccount) {
+                                        // 显示账号信息弹窗
+                                        showAccountInfoModal(firstSuccessAccount);
+                                    } else if (failCount > 0) {
+                                        // 生成失败
+                                        showToast('账号生成失败', 'error');
+                                    }
+                                }
+                                break;
+                        }
+                    } catch (e) {
+                        console.error('解析事件失败:', e, line);
+                    }
+                }
+            }
+            
+            return true;
+        } else {
+            // 凭证模式使用普通请求
+            btnText.textContent = '添加中...';
+            
+            const resp = await fetch(`${API_BASE}/accounts`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    ...getAuthHeaders()
+                },
+                body: JSON.stringify(data)
+            });
+            
+            if (!resp.ok) {
+                const err = await resp.json();
+                throw new Error(err.error || 'Unknown error');
+            }
+
+            loadAccounts();
+            return true;
+        }
+    } catch (e) {
+        if (data.generate_mode) {
+            showToast(`生成失败: ${e.message}`, 'error');
+        } else {
+            alert('操作失败: ' + e.message);
+        }
+        return false;
+    } finally {
+        btn.disabled = false;
+        btnText.textContent = currentAddMode === 'credential' ? '添加账号' : '批量生成';
+        btnLoading.classList.add('hidden');
+    }
+}
+
+async function deleteAccount(id) {
+    if (!confirm('确定要删除此账号吗？')) return;
+    try {
+        await fetch(`${API_BASE}/accounts/${id}`, {
+            method: 'DELETE',
+            headers: getAuthHeaders()
+        });
+        loadAccounts();
+    } catch (e) {
+        alert('删除失败');
+    }
+}
+
+async function toggleAccount(id) {
+    try {
+        await fetch(`${API_BASE}/accounts/${id}/toggle`, {
+            method: 'POST',
+            headers: getAuthHeaders()
+        });
+        loadAccounts();
+    } catch (e) {
+        alert('操作失败');
+    }
+}
+
+// --- Progress Modal Management ---
+function showProgressModal() {
+    document.getElementById('progressModal').classList.remove('hidden');
+    document.getElementById('progressLog').innerHTML = '';
+    document.getElementById('progressBar').style.width = '0%';
+    document.getElementById('progressText').textContent = '准备中...';
+    document.getElementById('progressCount').textContent = '0/0';
+    document.getElementById('progressSummary').classList.add('hidden');
+    document.getElementById('progressCloseBtn').classList.add('hidden');
+}
+
+function closeProgressModal() {
+    document.getElementById('progressModal').classList.add('hidden');
+    loadAccounts(); // 刷新账号列表
+}
+
+function addProgressLog(message, type = 'info') {
+    const log = document.getElementById('progressLog');
+    const colors = {
+        info: 'text-gray-600 dark:text-gray-400',
+        success: 'text-green-600 dark:text-green-400',
+        error: 'text-red-600 dark:text-red-400',
+        warning: 'text-yellow-600 dark:text-yellow-400'
+    };
+    
+    const entry = document.createElement('div');
+    entry.className = colors[type] || colors.info;
+    entry.textContent = message;
+    log.appendChild(entry);
+    
+    // 自动滚动到底部
+    log.scrollTop = log.scrollHeight;
+}
+
+function updateProgress(current, total, text) {
+    const percentage = total > 0 ? (current / total) * 100 : 0;
+    document.getElementById('progressBar').style.width = `${percentage}%`;
+    document.getElementById('progressText').textContent = text;
+    document.getElementById('progressCount').textContent = `${current}/${total}`;
+}
+
+function showProgressSummary(success, fail) {
+    document.getElementById('summarySuccess').textContent = success;
+    document.getElementById('summaryFail').textContent = fail;
+    document.getElementById('progressSummary').classList.remove('hidden');
+    document.getElementById('progressCloseBtn').classList.remove('hidden');
+}
+
+// --- Add Mode Management ---
+let currentAddMode = 'credential'; // 'credential' or 'generate'
+
+function switchAddMode(mode) {
+    currentAddMode = mode;
+    const credentialBtn = document.getElementById('mode-credential');
+    const generateBtn = document.getElementById('mode-generate');
+    const credentialFields = document.getElementById('credentialFields');
+    const generateFields = document.getElementById('generateFields');
+    const submitBtn = document.getElementById('btnText');
+    
+    if (mode === 'credential') {
+        credentialBtn.classList.add('bg-white', 'dark:bg-gray-600', 'text-gray-900', 'dark:text-white', 'shadow-sm');
+        credentialBtn.classList.remove('text-gray-500', 'hover:text-gray-900', 'dark:text-gray-400', 'dark:hover:text-white');
+        generateBtn.classList.remove('bg-white', 'dark:bg-gray-600', 'text-gray-900', 'dark:text-white', 'shadow-sm');
+        generateBtn.classList.add('text-gray-500', 'hover:text-gray-900', 'dark:text-gray-400', 'dark:hover:text-white');
+        credentialFields.classList.remove('hidden');
+        generateFields.classList.add('hidden');
+        submitBtn.textContent = '添加账号';
+    } else {
+        generateBtn.classList.add('bg-white', 'dark:bg-gray-600', 'text-gray-900', 'dark:text-white', 'shadow-sm');
+        generateBtn.classList.remove('text-gray-500', 'hover:text-gray-900', 'dark:text-gray-400', 'dark:hover:text-white');
+        credentialBtn.classList.remove('bg-white', 'dark:bg-gray-600', 'text-gray-900', 'dark:text-white', 'shadow-sm');
+        credentialBtn.classList.add('text-gray-500', 'hover:text-gray-900', 'dark:text-gray-400', 'dark:hover:text-white');
+        credentialFields.classList.add('hidden');
+        generateFields.classList.remove('hidden');
+        submitBtn.textContent = '批量生成';
+    }
+}
+
+// Form Handler
+document.getElementById('addForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    
+    let data;
+    
+    if (currentAddMode === 'credential') {
+        const accessToken = document.getElementById('credential_access_token').value.trim();
+        const refreshToken = document.getElementById('credential_refresh_token').value.trim();
+        const proxy = document.getElementById('proxy').value.trim();
+
+        if (!accessToken && !refreshToken) {
+            alert('请填写 Access Token 或 Refresh Token（至少一个）');
+            return;
+        }
+
+        data = {
+            proxy: proxy,
+            generate_mode: false
+        };
+
+        // 提交用户填写的所有token字段，后端会根据优先级处理
+        if (accessToken) {
+            data.access_token = accessToken;
+        }
+        if (refreshToken) {
+            data.refresh_token = refreshToken;
+        }
+    } else {
+        const masterAccessToken = document.getElementById('generate_access_token').value.trim();
+        const masterRefreshToken = document.getElementById('generate_refresh_token').value.trim();
+        const proxy = document.getElementById('proxy').value.trim();
+
+        if (!masterAccessToken && !masterRefreshToken) {
+            alert('请填写 Master Access Token 或 Master Refresh Token（至少一个）');
+            return;
+        }
+
+        data = {
+            proxy: proxy,
+            generate_mode: true
+        };
+
+        // 提交用户填写的所有token字段，后端会根据优先级处理
+        if (masterAccessToken) {
+            data.access_token = masterAccessToken;
+        }
+        if (masterRefreshToken) {
+            data.refresh_token = masterRefreshToken;
+        }
+    }
+
+    if (await addAccount(data)) {
+        e.target.reset();
+        if (currentAddMode === 'credential') {
+            document.getElementById('credential_refresh_token').focus();
+        } else {
+            document.getElementById('generate_refresh_token').focus();
+        }
+    }
+});
+
+// Initialization function for after admin login
+function initializeApp() {
+    loadAccounts();
+    
+    // Auto Refresh
+    if (autoRefreshTimer) {
+        clearInterval(autoRefreshTimer);
+    }
+    autoRefreshTimer = setInterval(() => {
+        loadAccounts(true);
+    }, REFRESH_INTERVAL);
+}
+
+// --- Token Management ---
+let currentMainView = 'pool'; // 'pool' or 'token'
+let tokenRecords = [];
+let generationTasks = [];
+
+function switchMainView(view) {
+    currentMainView = view;
+    const poolView = document.getElementById('poolView');
+    const tokenView = document.getElementById('tokenView');
+    const poolBtn = document.getElementById('view-pool');
+    const tokenBtn = document.getElementById('view-token');
+    
+    if (view === 'pool') {
+        poolView.classList.remove('hidden');
+        tokenView.classList.add('hidden');
+        
+        poolBtn.classList.add('bg-white', 'dark:bg-gray-600', 'text-gray-900', 'dark:text-white', 'shadow-sm');
+        poolBtn.classList.remove('text-gray-500', 'hover:text-gray-900', 'dark:text-gray-400', 'dark:hover:text-white');
+        tokenBtn.classList.remove('bg-white', 'dark:bg-gray-600', 'text-gray-900', 'dark:text-white', 'shadow-sm');
+        tokenBtn.classList.add('text-gray-500', 'hover:text-gray-900', 'dark:text-gray-400', 'dark:hover:text-white');
+        
+        loadAccounts();
+    } else {
+        poolView.classList.add('hidden');
+        tokenView.classList.remove('hidden');
+        
+        tokenBtn.classList.add('bg-white', 'dark:bg-gray-600', 'text-gray-900', 'dark:text-white', 'shadow-sm');
+        tokenBtn.classList.remove('text-gray-500', 'hover:text-gray-900', 'dark:text-gray-400', 'dark:hover:text-white');
+        poolBtn.classList.remove('bg-white', 'dark:bg-gray-600', 'text-gray-900', 'dark:text-white', 'shadow-sm');
+        poolBtn.classList.add('text-gray-500', 'hover:text-gray-900', 'dark:text-gray-400', 'dark:hover:text-white');
+        
+        loadTokenData();
+    }
+}
+
+async function loadTokenData() {
+    await Promise.all([
+        loadTokenRecords(),
+        loadGenerationTasks(),
+        loadPoolStatus()
+    ]);
+}
+
+async function loadTokenRecords() {
+    try {
+        const resp = await fetch(`${API_BASE}/tokens`, {
+            headers: getAuthHeaders()
+        });
+        if (!resp.ok) throw new Error('Failed to fetch token records');
+        
+        const data = await resp.json();
+        tokenRecords = data.items || [];
+        renderTokenRecords(tokenRecords);
+    } catch (e) {
+        console.error("Failed to load token records", e);
+    }
+}
+
+async function loadGenerationTasks() {
+    try {
+        const resp = await fetch(`${API_BASE}/tokens/tasks`, {
+            headers: getAuthHeaders()
+        });
+        if (!resp.ok) throw new Error('Failed to fetch generation tasks');
+        
+        const data = await resp.json();
+        generationTasks = data.items || [];
+        renderGenerationTasks(generationTasks);
+    } catch (e) {
+        console.error("Failed to load generation tasks", e);
+    }
+}
+
+async function loadPoolStatus() {
+    try {
+        const resp = await fetch(`${API_BASE}/tokens/pool-status`, {
+            headers: getAuthHeaders()
+        });
+        if (!resp.ok) throw new Error('Failed to fetch pool status');
+        
+        const data = await resp.json();
+        updateTokenStatsUI(data);
+    } catch (e) {
+        console.error("Failed to load pool status", e);
+    }
+}
+
+function updateTokenStatsUI(stats) {
+    document.getElementById('token-stat-active').textContent = stats.active_tokens || 0;
+    document.getElementById('token-stat-normal').textContent = stats.normal_accounts || 0;
+    document.getElementById('token-stat-running').textContent = stats.running_tasks || 0;
+}
+
+function renderTokenRecords(records) {
+    const tbody = document.getElementById('tokenList');
+    const emptyState = document.getElementById('tokenEmptyState');
+    
+    if (records.length === 0) {
+        tbody.innerHTML = '';
+        emptyState.classList.remove('hidden');
+        emptyState.classList.add('flex');
+        return;
+    }
+    
+    emptyState.classList.add('hidden');
+    emptyState.classList.remove('flex');
+    
+    const html = records.map(record => {
+        // 格式化订阅日期
+        const subDate = record.subscription_start_date && !record.subscription_start_date.startsWith('0001')
+            ? new Date(record.subscription_start_date).toLocaleDateString('zh-CN')
+            : '-';
+        
+        // 格式化Token过期时间
+        const tokenExpiryDate = record.token_expiry && !record.token_expiry.startsWith('0001')
+            ? new Date(record.token_expiry)
+            : null;
+        
+        let tokenStatusClass, tokenStatusText;
+        if (!tokenExpiryDate) {
+            tokenStatusClass = 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400';
+            tokenStatusText = '未知';
+        } else {
+            const now = new Date();
+            const hoursUntilExpiry = (tokenExpiryDate - now) / (1000 * 60 * 60);
+            
+            if (hoursUntilExpiry < 0) {
+                tokenStatusClass = 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+                tokenStatusText = '已过期';
+            } else if (hoursUntilExpiry < 1) {
+                tokenStatusClass = 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400';
+                tokenStatusText = `${Math.floor(hoursUntilExpiry * 60)}分钟后过期`;
+            } else if (hoursUntilExpiry < 24) {
+                tokenStatusClass = 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
+                tokenStatusText = `${Math.floor(hoursUntilExpiry)}小时后过期`;
+            } else {
+                tokenStatusClass = 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400';
+                tokenStatusText = `${Math.floor(hoursUntilExpiry / 24)}天后过期`;
+            }
+        }
+        
+        return `
+        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+            <td class="px-6 py-4">
+                <div>
+                    <div class="text-sm font-medium text-gray-900 dark:text-white">${record.email || '未知邮箱'}</div>
+                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">${record.description || `令牌 #${record.id}`}</div>
+                </div>
+            </td>
+            <td class="px-6 py-4 text-center">
+                <div>
+                    <div class="text-sm font-medium ${record.plan_type === 'Starter' ? 'text-blue-600 dark:text-blue-400' : record.plan_type === 'Core' ? 'text-purple-600 dark:text-purple-400' : record.plan_type === 'Advanced' ? 'text-orange-600 dark:text-orange-400' : record.plan_type === 'Max' ? 'text-red-600 dark:text-red-400' : 'text-gray-600 dark:text-gray-400'}">${record.plan_type || 'Free'}</div>
+                </div>
+            </td>
+            <td class="px-6 py-4 text-center">
+                <span class="text-sm text-gray-600 dark:text-gray-400">${subDate}</span>
+            </td>
+            <td class="px-6 py-4 text-center">
+                <div class="space-y-1">
+                    <div>
+                        <span class="px-2 py-0.5 inline-flex items-center text-xs font-medium rounded-full ${getTokenStatusConfig(record).class}">
+                            <span class="w-1.5 h-1.5 rounded-full ${getTokenStatusConfig(record).dot} mr-1.5"></span>
+                            ${getTokenStatusConfig(record).text}
+                        </span>
+                    </div>
+                    <div>
+                        <span class="px-2 py-0.5 inline-flex text-xs rounded-full ${tokenStatusClass}">
+                            ${tokenStatusText}
+                        </span>
+                    </div>
+                </div>
+            </td>
+            <td class="px-6 py-4 text-center">
+                <div class="text-sm">
+                    <span class="text-gray-900 dark:text-white font-medium">${record.generated_count || 0}</span>
+                    <span class="text-gray-500">/</span>
+                    <span class="text-gray-600 dark:text-gray-400">${record.threshold}</span>
+                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">批次: ${record.generate_batch}</div>
+                </div>
+            </td>
+            <td class="px-6 py-4 text-center">
+                <div class="text-sm">
+                    <span class="text-green-600 dark:text-green-400">${record.total_success || 0}</span>
+                    <span class="text-gray-500">/</span>
+                    <span class="text-red-600 dark:text-red-400">${record.total_fail || 0}</span>
+                </div>
+            </td>
+            <td class="px-6 py-4 text-center">
+                <button onclick="quickToggleAutoGenerate(${record.id}, ${!record.auto_generate})"
+                    class="${record.auto_generate ? 'text-green-600' : 'text-gray-400'} hover:opacity-70 transition-opacity">
+                    ${record.auto_generate
+                        ? '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mx-auto" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>'
+                        : '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mx-auto" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" /></svg>'}
+                </button>
+            </td>
+            <td class="px-6 py-4 text-center">
+                <div class="flex justify-center gap-2">
+                    <button onclick='showTokenConfigModal(${JSON.stringify(record).replace(/'/g, "\\'")})'
+                        class="text-primary hover:text-primary-hover transition-colors" title="配置">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        </svg>
+                    </button>
+                    ${record.is_active ? `
+                    <button onclick="triggerGeneration(${record.id})"
+                        class="text-blue-600 hover:text-blue-700 transition-colors" title="手动触发生成">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                        </svg>
+                    </button>` : ''}
+                    ${record.has_refresh_token ? `
+                    <button onclick="refreshToken(${record.id})"
+                        class="text-green-600 hover:text-green-700 transition-colors" title="刷新令牌">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                        </svg>
+                    </button>` : ''}
+                    <button onclick="deleteTokenRecord(${record.id})"
+                        class="text-red-500 hover:text-red-700 transition-colors" title="删除">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                    </button>
+                </div>
+            </td>
+        </tr>`;
+    }).join('');
+    
+    tbody.innerHTML = html;
+}
+
+// 添加刷新令牌函数
+async function refreshToken(tokenId) {
+    try {
+        const resp = await fetch(`${API_BASE}/tokens/${tokenId}/refresh`, {
+            method: 'POST',
+            headers: getAuthHeaders()
+        });
+        
+        if (!resp.ok) {
+            const error = await resp.json();
+            throw new Error(error.error || 'Failed to refresh token');
+        }
+        
+        const result = await resp.json();
+        showToast(result.message || 'Token刷新成功', 'success');
+        loadTokenRecords();
+    } catch (e) {
+        showToast('Token刷新失败: ' + e.message, 'error');
+    }
+}
+
+function renderGenerationTasks(tasks) {
+    const tbody = document.getElementById('taskList');
+    
+    if (tasks.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="6" class="px-6 py-8 text-center text-sm text-gray-500 dark:text-gray-400">暂无生成任务记录</td></tr>';
+        return;
+    }
+    
+    const html = tasks.map(task => {
+        const startTime = task.started_at && !task.started_at.startsWith('0001')
+            ? new Date(task.started_at).toLocaleString('zh-CN')
+            : '-';
+        const completeTime = task.completed_at && !task.completed_at.startsWith('0001')
+            ? new Date(task.completed_at).toLocaleString('zh-CN')
+            : '-';
+        
+        let statusClass, statusText;
+        switch (task.status) {
+            case 'running':
+                statusClass = 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400';
+                statusText = '运行中';
+                break;
+            case 'completed':
+                statusClass = 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400';
+                statusText = '已完成';
+                break;
+            case 'failed':
+                statusClass = 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+                statusText = '失败';
+                break;
+            default:
+                statusClass = 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400';
+                statusText = '待处理';
+        }
+        
+        return `
+        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+            <td class="px-6 py-3 text-sm text-gray-900 dark:text-white">#${task.id}</td>
+            <td class="px-6 py-3 text-sm text-center text-gray-900 dark:text-white">${task.batch_size}</td>
+            <td class="px-6 py-3 text-sm text-center">
+                <span class="text-green-600 dark:text-green-400">${task.success_count}</span>
+                <span class="text-gray-500">/</span>
+                <span class="text-red-600 dark:text-red-400">${task.fail_count}</span>
+            </td>
+            <td class="px-6 py-3 text-center">
+                <span class="px-2 py-0.5 inline-flex text-xs font-medium rounded-full ${statusClass}">
+                    ${statusText}
+                </span>
+            </td>
+            <td class="px-6 py-3 text-sm text-center text-gray-600 dark:text-gray-400">${startTime}</td>
+            <td class="px-6 py-3 text-sm text-center text-gray-600 dark:text-gray-400">${completeTime}</td>
+        </tr>`;
+    }).join('');
+    
+    tbody.innerHTML = html;
+}
+
+async function quickToggleAutoGenerate(tokenId, enable) {
+    try {
+        const resp = await fetch(`${API_BASE}/tokens/${tokenId}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+                ...getAuthHeaders()
+            },
+            body: JSON.stringify({ auto_generate: enable })
+        });
+        
+        if (!resp.ok) throw new Error('Failed to update token');
+        loadTokenRecords();
+    } catch (e) {
+        alert('更新失败: ' + e.message);
+    }
+}
+
+async function quickToggleActive(tokenId, enable) {
+    try {
+        const resp = await fetch(`${API_BASE}/tokens/${tokenId}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+                ...getAuthHeaders()
+            },
+            body: JSON.stringify({ is_active: enable })
+        });
+        
+        if (!resp.ok) throw new Error('Failed to update token');
+        loadTokenRecords();
+    } catch (e) {
+        alert('更新失败: ' + e.message);
+    }
+}
+
+async function deleteTokenRecord(tokenId) {
+    if (!confirm('确定要删除此令牌记录吗？')) return;
+    
+    try {
+        const resp = await fetch(`${API_BASE}/tokens/${tokenId}`, {
+            method: 'DELETE',
+            headers: getAuthHeaders()
+        });
+        
+        if (!resp.ok) throw new Error('Failed to delete token');
+        
+        const result = await resp.json();
+        alert(result.message || '删除成功');
+        loadTokenRecords();
+    } catch (e) {
+        alert('删除失败: ' + e.message);
+    }
+}
+
+async function triggerGeneration(tokenId) {
+    if (!confirm('确定要手动触发生成任务吗？')) return;
+    
+    try {
+        const resp = await fetch(`${API_BASE}/tokens/${tokenId}/trigger`, {
+            method: 'POST',
+            headers: getAuthHeaders()
+        });
+        
+        if (!resp.ok) throw new Error('Failed to trigger generation');
+        
+        alert('生成任务已触发，请稍后查看结果');
+        setTimeout(() => {
+            loadTokenData();
+        }, 2000);
+    } catch (e) {
+        alert('触发失败: ' + e.message);
+    }
+}
+
+let currentEditingToken = null;
+
+function showTokenConfigModal(record) {
+    currentEditingToken = record;
+    document.getElementById('tokenConfigModal').classList.remove('hidden');
+    
+    // 填充表单数据
+    document.getElementById('configTokenId').value = record.id;
+    document.getElementById('configDescription').value = record.description || '';
+    document.getElementById('configThreshold').value = record.threshold || 10;
+    document.getElementById('configBatch').value = record.generate_batch || 30;
+    
+    // 设置开关状态
+    setConfigSwitch('configAutoGenerate', record.auto_generate);
+    setConfigSwitch('configIsActive', record.is_active);
+}
+
+function closeTokenConfigModal() {
+    document.getElementById('tokenConfigModal').classList.add('hidden');
+    currentEditingToken = null;
+}
+
+function setConfigSwitch(switchId, isOn) {
+    const switchBtn = document.getElementById(switchId);
+    const indicator = switchBtn.querySelector('span');
+    
+    if (isOn) {
+        switchBtn.classList.remove('bg-gray-200', 'dark:bg-gray-600');
+        switchBtn.classList.add('bg-primary');
+        indicator.classList.remove('translate-x-1');
+        indicator.classList.add('translate-x-6');
+        switchBtn.dataset.checked = 'true';
+    } else {
+        switchBtn.classList.add('bg-gray-200', 'dark:bg-gray-600');
+        switchBtn.classList.remove('bg-primary');
+        indicator.classList.add('translate-x-1');
+        indicator.classList.remove('translate-x-6');
+        switchBtn.dataset.checked = 'false';
+    }
+}
+
+function toggleConfigSwitch(switchId) {
+    const switchBtn = document.getElementById(switchId);
+    const isChecked = switchBtn.dataset.checked === 'true';
+    setConfigSwitch(switchId, !isChecked);
+}
+
+// Token config form handler
+document.getElementById('tokenConfigForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    
+    const tokenId = document.getElementById('configTokenId').value;
+    const config = {
+        description: document.getElementById('configDescription').value,
+        threshold: parseInt(document.getElementById('configThreshold').value),
+        generate_batch: parseInt(document.getElementById('configBatch').value),
+        auto_generate: document.getElementById('configAutoGenerate').dataset.checked === 'true',
+        is_active: document.getElementById('configIsActive').dataset.checked === 'true'
+    };
+    
+    try {
+        const resp = await fetch(`${API_BASE}/tokens/${tokenId}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+                ...getAuthHeaders()
+            },
+            body: JSON.stringify(config)
+        });
+        
+        if (!resp.ok) throw new Error('Failed to update token config');
+        
+        closeTokenConfigModal();
+        loadTokenRecords();
+    } catch (e) {
+        alert('更新配置失败: ' + e.message);
+    }
+});
+
+async function refreshTokenData() {
+    await loadTokenData();
+}
+
+// OAuth RT获取功能
+function startOAuthForRT() {
+    // 打开新窗口进行OAuth认证
+    const width = 600;
+    const height = 700;
+    const left = (window.screen.width - width) / 2;
+    const top = (window.screen.height - height) / 2;
+    
+    const authWindow = window.open(
+        '/api/oauth/start-rt',
+        'ZenCoderOAuth',
+        `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no,scrollbars=yes,resizable=yes`
+    );
+    
+    // 监听OAuth完成消息
+    window.addEventListener('message', function handleOAuthMessage(event) {
+        // 验证消息来源
+        if (event.origin !== window.location.origin) return;
+        
+        if (event.data.type === 'oauth-rt-complete') {
+            // 关闭认证窗口
+            if (authWindow && !authWindow.closed) {
+                authWindow.close();
+            }
+            
+            // 移除事件监听器
+            window.removeEventListener('message', handleOAuthMessage);
+            
+            if (event.data.success && (event.data.accessToken || event.data.refreshToken)) {
+                // 自动填充到对应的输入框
+                const currentMode = currentAddMode;
+                if (currentMode === 'credential') {
+                    // 优先填充access_token
+                    if (event.data.accessToken) {
+                        document.getElementById('credential_access_token').value = event.data.accessToken;
+                    }
+                    // 同时填充refresh_token
+                    if (event.data.refreshToken) {
+                        document.getElementById('credential_refresh_token').value = event.data.refreshToken;
+                    }
+                    // 显示成功提示
+                    showToast('Token 获取成功！', 'success');
+                } else {
+                    // 生成模式
+                    if (event.data.accessToken) {
+                        document.getElementById('generate_access_token').value = event.data.accessToken;
+                    }
+                    if (event.data.refreshToken) {
+                        document.getElementById('generate_refresh_token').value = event.data.refreshToken;
+                    }
+                    showToast('Master Token 获取成功！', 'success');
+                }
+            } else {
+                showToast(event.data.error || 'OAuth认证失败', 'error');
+            }
+        }
+    });
+}
+
+// Toast提示功能
+function showToast(message, type = 'info') {
+    // 创建toast元素
+    const toast = document.createElement('div');
+    toast.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg transition-all duration-300 transform translate-x-96 z-50`;
+    
+    // 根据类型设置样式
+    const styles = {
+        success: 'bg-green-600 text-white',
+        error: 'bg-red-600 text-white',
+        warning: 'bg-yellow-500 text-white',
+        info: 'bg-blue-600 text-white'
+    };
+    
+    toast.className += ` ${styles[type] || styles.info}`;
+    toast.innerHTML = `
+        <div class="flex items-center gap-2">
+            <span class="text-sm font-medium">${message}</span>
+        </div>
+    `;
+    
+    document.body.appendChild(toast);
+    
+    // 动画显示
+    setTimeout(() => {
+        toast.classList.remove('translate-x-96');
+        toast.classList.add('translate-x-0');
+    }, 10);
+    
+    // 3秒后自动消失
+    setTimeout(() => {
+        toast.classList.remove('translate-x-0');
+        toast.classList.add('translate-x-96');
+        setTimeout(() => {
+            document.body.removeChild(toast);
+        }, 300);
+    }, 3000);
+}
+
+// --- Account Info Modal Management ---
+function showAccountInfoModal(accountInfo) {
+    document.getElementById('accountInfoModal').classList.remove('hidden');
+    
+    // 填充账号信息
+    document.getElementById('accountInfoEmail').textContent = accountInfo.email || '未知';
+    document.getElementById('accountInfoPlan').textContent = accountInfo.plan || 'Free';
+    
+    // 格式化Token过期时间
+    let tokenExpiryText = '未知';
+    if (accountInfo.token_expiry && !accountInfo.token_expiry.startsWith('0001')) {
+        const expiryDate = new Date(accountInfo.token_expiry);
+        const now = new Date();
+        const diffMs = expiryDate - now;
+        
+        if (diffMs < 0) {
+            tokenExpiryText = '已过期';
+        } else if (diffMs < 1000 * 60 * 60 * 24) {
+            // 24小时内过期
+            const hours = Math.floor(diffMs / (1000 * 60 * 60));
+            tokenExpiryText = `${hours}小时后过期`;
+        } else {
+            // 显示具体日期
+            tokenExpiryText = expiryDate.toLocaleDateString('zh-CN') + ' ' + expiryDate.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'});
+        }
+    }
+    document.getElementById('accountInfoTokenExpiry').textContent = tokenExpiryText;
+    
+    // 格式化订阅开始时间
+    let subscriptionStartText = '未知';
+    if (accountInfo.subscription_start_date && !accountInfo.subscription_start_date.startsWith('0001')) {
+        const startDate = new Date(accountInfo.subscription_start_date);
+        subscriptionStartText = startDate.toLocaleDateString('zh-CN') + ' ' + startDate.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'});
+    }
+    document.getElementById('accountInfoSubscriptionStart').textContent = subscriptionStartText;
+}
+
+function closeAccountInfoModal() {
+    document.getElementById('accountInfoModal').classList.add('hidden');
+    // 刷新账号列表
+    loadAccounts();
+}
+
+// Page Initialization
+window.addEventListener('load', function() {
+    console.log('Page loaded, initializing...');
+    initTheme();
+    initAdminAuth();
+});