static/templates/cache.html

<div class="cache-page">
<div class="section-header">
<div>
<h2 style="font-size: 1.5em; color: var(--dark); margin: 0;">🗄️ 缓存管理面板</h2>
<p style="color: #64748b; margin-top: 5px;">查看和管理系统缓存状态</p>
</div>
<button id="refreshBtn" class="btn btn-primary">🔄 刷新状态</button>
</div>
<div id="cacheStats" class="cache-grid">
<div class="skeleton skeleton-card"></div>
<div class="skeleton skeleton-card"></div>
<div class="skeleton skeleton-card"></div>
<div class="skeleton skeleton-card"></div>
<div class="skeleton skeleton-card"></div>
</div>
<div class="epg-cache-section" id="epgCacheSection" style="display: none;">
<h3 style="margin-bottom: 20px; color: var(--dark); font-size: 1.3em;">📅 EPG 缓存详情</h3>
<div id="epgCacheDetails" class="epg-cache-details"></div>
</div>
<div class="cache-actions">
<h3>🧹 清理缓存</h3>
<p style="color: #64748b; margin-bottom: 15px; font-size: 0.9em;">选择要清理的缓存类型，清理后将重新获取数据</p>
<div class="button-group">
<button class="btn btn-warning" onclick="clearCache('cid')">🔑 清理 CID</button>
<button class="btn btn-warning" onclick="clearCache('auth')">🎫 清理认证</button>
<button class="btn btn-warning" onclick="clearCache('channels')">📺 清理频道</button>
<button class="btn btn-warning" onclick="clearCache('streams')">🎬 清理流</button>
<button class="btn btn-warning" onclick="clearCache('epg')">📅 清理 EPG</button>
<button class="btn btn-danger" onclick="clearCache('all')">🗑️ 清理全部</button>
</div>
</div>
</div>
<div class="epg-detail-modal" id="epgDetailModal">
<div class="epg-detail-container">
<div class="epg-detail-header">
<h3 id="epgDetailTitle">📺 节目详情</h3>
<button class="epg-detail-close" onclick="closeEpgDetail()">✕</button>
</div>
<div class="epg-detail-body">
<div id="epgDetailContent" class="epg-detail-content"></div>
</div>
</div>
</div>
<style>

.cache-page{display:flex;flex-direction:column;gap:16px;padding:14px;background:linear-gradient(180deg,#eef2ff 0%,#f1f5f9 240px);min-height:calc(100vh - 80px);font-feature-settings:"tnum"}

.cache-page .section-header{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;padding:14px 20px;border-radius:14px;box-shadow:0 4px 14px rgba(15,23,42,.06),0 1px 4px rgba(15,23,42,.04);border:1px solid #f1f5f9}

.cache-page .section-header h2{font-size:18px!important;font-weight:700;color:#1e293b!important;letter-spacing:.2px}

.cache-page .section-header .btn{padding:9px 18px;border:none;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;transition:all .15s;color:#fff;background:#6366f1;box-shadow:0 1px 3px rgba(15,23,42,.08);white-space:nowrap}

.cache-page .section-header .btn:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 4px 12px rgba(99,102,241,.35)}

.cache-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}

.cache-page .skeleton{background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);background-size:200% 100%;animation:caSkel 1.4s infinite;border-radius:14px}

.cache-page .skeleton-card{height:200px}

@keyframes caSkel{0%{background-position:200% 0}100%{background-position:-200% 0}}

.cache-actions{background:#fff;padding:22px 24px;border-radius:14px;box-shadow:0 4px 14px rgba(15,23,42,.06),0 1px 4px rgba(15,23,42,.04);border:1px solid #f1f5f9}

.cache-actions h3{margin:0;color:#1e293b;font-size:16px;font-weight:700}

.cache-actions p{margin-top:6px;margin-bottom:0}

.cache-actions .button-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

.cache-actions .btn{padding:8px 16px;border:none;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;color:#fff;transition:all .15s;box-shadow:0 1px 3px rgba(15,23,42,.06)}

.cache-actions .btn:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 4px 12px rgba(15,23,42,.15)}

.cache-actions .btn:active{transform:translateY(0)}

.cache-actions .btn-warning{background:#f59e0b}

.cache-actions .btn-danger{background:#ef4444}

.copy-btn{transition:all .15s!important}

.copy-btn:hover{filter:brightness(1.1);transform:translateY(-50%) scale(1.06)!important}

.cache-card { background: white; padding: 20px; border-radius: 14px; border-left: 4px solid var(--primary); box-shadow: 0 1px 3px rgba(15,23,42,.04),0 4px 14px rgba(15,23,42,.06); contain: layout style paint; transition: all .2s ease; border-top:1px solid #f1f5f9; border-right:1px solid #f1f5f9; border-bottom:1px solid #f1f5f9 }

.cache-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,.08) }

.cache-card h3 { color: var(--dark); margin-bottom: 15px; font-size: 1.1em; font-weight: 700; display: flex; align-items: center; gap: 8px; }

.cache-detail { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.85em; }

.cache-detail:last-child { border-bottom: none; }

.cache-label { font-weight: 600; color: #64748b; margin-bottom: 5px; font-size: 0.9em; }

.cache-value { font-family: 'Courier New', monospace; color: var(--dark); font-weight: 600; word-break: break-all; background: #f8fafc; padding: 8px 10px; border-radius: 6px; font-size: 0.85em; line-height: 1.5; border: 1px solid #e2e8f0; }

.cache-value.clickable { cursor: pointer; position: relative; padding-right: 35px; }

.cache-value.clickable:hover { background: #f1f5f9; border-color: #cbd5e1; }

.copy-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--primary); color: white; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 0.8em; transition: all 0.2s; }

.copy-btn:hover { background: var(--primary-dark); }

.copy-btn:active { transform: translateY(-50%) scale(0.95); }

.cache-value-short { color: #94a3b8; font-style: italic; }

.epg-cache-section { background: white; padding: 25px; border-radius: 15px; margin-bottom: 25px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }

.epg-cache-details { display: grid; gap: 20px; }

.epg-summary-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }

.epg-summary-item { text-align: center; }

.epg-summary-item .label { font-size: 0.85em; opacity: 0.9; margin-bottom: 5px; }

.epg-summary-item .value { font-size: 1.8em; font-weight: 700; }

.epg-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }

.epg-detail-box { background: #f8fafc; padding: 15px; border-radius: 10px; border: 1px solid #e2e8f0; }

.epg-detail-box h4 { margin: 0 0 15px 0; color: var(--dark); font-size: 1em; font-weight: 700; }

.epg-list { max-height: 300px; overflow-y: auto; }

.epg-list-item { padding: 10px; background: white; border-radius: 8px; margin-bottom: 8px; font-size: 0.85em; border: 1px solid #e2e8f0; cursor: pointer; transition: all 0.2s ease; }

.epg-list-item:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2); transform: translateX(4px); }

.epg-list-item .channel-id { font-weight: 700; color: var(--primary); margin-bottom: 5px; }

.epg-list-item .info { color: #64748b; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

.epg-detail-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(10px); z-index: 9999; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }

.epg-detail-modal.show { display: flex; }

.epg-detail-container { background: white; border-radius: 20px; max-width: 1000px; width: 100%; max-height: 90vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: modalSlideIn 0.3s ease; }

@keyframes modalSlideIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }

.epg-detail-header { padding: 20px 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; display: flex; justify-content: space-between; align-items: center; }

.epg-detail-header h3 { margin: 0; font-size: 1.4em; font-weight: 700; }

.epg-detail-close { background: rgba(255, 255, 255, 0.2); border: none; color: white; font-size: 1.5em; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }

.epg-detail-close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }

.epg-detail-body { padding: 25px; max-height: calc(90vh - 80px); overflow-y: auto; }

.epg-detail-content { display: flex; flex-direction: column; gap: 15px; }

.date-section { background: #f8fafc; padding: 15px; border-radius: 10px; border-left: 4px solid var(--primary); }

.date-section h4 { margin: 0 0 15px 0; color: var(--primary); font-size: 1.1em; font-weight: 700; display: flex; align-items: center; gap: 8px; }

.program-item { background: white; padding: 12px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #e2e8f0; transition: all 0.2s ease; }

.program-item:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1); }

.program-time { font-weight: 700; color: var(--primary); margin-bottom: 5px; font-size: 0.9em; }

.program-title { color: var(--dark); font-weight: 600; margin-bottom: 3px; }

.program-desc { color: #64748b; font-size: 0.85em; line-height: 1.4; }

@media (max-width: 768px) { .epg-detail-grid { grid-template-columns: 1fr; } .epg-summary-box { grid-template-columns: 1fr; } }

</style>
<script>

(function() {

'use strict';

const API = window.location.origin;

let channelMap = {};

const debounce = window.MediaGatewayUtils?.debounce || function(func, wait) { let timeout; return function(...args) { clearTimeout(timeout); timeout = setTimeout(() => func(...args), wait); }; };

function copyToClipboard(text, btnElement) {

    navigator.clipboard.writeText(text).then(() => {

        const originalText = btnElement.textContent;

        btnElement.textContent = '✓';

        btnElement.style.background = '#10b981';

        setTimeout(() => {

            btnElement.textContent = originalText;

            btnElement.style.background = '';

        }, 1500);

        if (window.MediaGatewayUtils) window.MediaGatewayUtils.showNotification('✅ 已复制到剪贴板', 'success');

    }).catch(err => {

        if (window.MediaGatewayUtils) window.MediaGatewayUtils.showNotification('❌ 复制失败', 'error');

    });

}

function escapeHtml(text) {

    const div = document.createElement('div');

    div.textContent = text;

    return div.innerHTML;

}

function createCopyableValue(value, label, showPartial = false) {

    if (!value) return '<span class="cache-value-short">未缓存</span>';

    const id = 'copy_' + Math.random().toString(36).substr(2, 9);

    let displayValue = value;

    if (showPartial && value.length > 40) displayValue = value.substring(0, 20) + '...' + value.substring(value.length - 20);

    return `<div class="cache-value clickable" style="position: relative;"><span id="${id}_text" data-full-value="${escapeHtml(value)}">${escapeHtml(displayValue)}</span><button class="copy-btn" onclick="window.copyCache('${id}_text')">📋 复制</button></div>`;

}

window.copyCache = function(elementId) {

    const element = document.getElementById(elementId);

    if (element) {

        const fullValue = element.getAttribute('data-full-value');

        const text = fullValue || element.textContent;

        const btn = element.nextElementSibling;

        copyToClipboard(text, btn);

    }

};

async function loadChannelMap() {

    try {

        const res = await fetch(`${API}/api/list`);

        if (!res.ok) throw new Error(`HTTP ${res.status}`);

        const data = await res.json();

        if (data.success) {

            const channels = data.channels || [];

            channelMap = {};

            channels.forEach(ch => { channelMap[ch.id] = ch.name; });

        }

    } catch (e) { console.error('❌ 加载频道列表失败:', e); }

}

function getChannelName(channelId) { return channelMap[channelId] || `频道 ${channelId}`; }

function formatTime(timestamp) {

    const d = new Date(timestamp * 1000);

    return d.toLocaleTimeString('ja-JP', { timeZone: 'Asia/Tokyo', hour: '2-digit', minute: '2-digit', hour12: false });

}

window.openEpgDetail = async function(channelId) {

    const modal = document.getElementById('epgDetailModal');

    const title = document.getElementById('epgDetailTitle');

    const content = document.getElementById('epgDetailContent');

    if (!modal || !content) return;

    const channelName = getChannelName(channelId);

    if (title) title.textContent = `📺 ${channelName} - 缓存节目`;

    content.innerHTML = `<div style="text-align: center; padding: 40px;"><div class="loading-spinner-large"></div><p style="margin-top: 15px; color: #64748b;">加载中...</p></div>`;

    modal.classList.add('show');

    try {

        const res = await fetch(`${API}/health`);

        if (!res.ok) throw new Error(`HTTP ${res.status}`);

        const data = await res.json();

        const epgDetail = data.cache?.epg_detail;

        if (!epgDetail || !epgDetail.by_channel || !epgDetail.by_channel[channelId]) {

            content.innerHTML = `<div class="empty-state"><div class="empty-state-icon">📅</div><div class="empty-state-text">该频道暂无缓存数据</div></div>`;

            return;

        }

        const channelData = epgDetail.by_channel[channelId];

        const dates = channelData.dates.sort();

        const dateDetails = await Promise.all(dates.map(async (date) => {

            try {

                const epgRes = await fetch(`${API}/api/epg?vid=${channelId}&date=${date}`);

                if (!epgRes.ok) return null;

                const epgData = await epgRes.json();

                if (!epgData.success) return null;

                return { date: date, programs: epgData.epg || [] };

            } catch (e) { return null; }

        }));

        let html = '';

        dateDetails.filter(d => d !== null).forEach(dateData => {

            const { date, programs } = dateData;

            const programCount = programs.length;

            html += `<div class="date-section"><h4>📅 ${date} <span style="font-size: 0.85em; opacity: 0.8; font-weight: 600;">(${programCount} 个节目)</span></h4>`;

            if (programs.length === 0) {

                html += `<p style="color: #94a3b8; text-align: center; padding: 20px;">暂无节目数据</p>`;

            } else {

                programs.forEach(prog => {

                    const startTime = formatTime(prog.time);

                    const endTime = prog.time_end ? formatTime(prog.time_end) : '未知';

                    const title = prog.title || prog.name || '未知节目';

                    const desc = prog.description || '';

                    html += `<div class="program-item"><div class="program-time">⏰ ${startTime} - ${endTime}</div><div class="program-title">${escapeHtml(title)}</div>${desc ? `<div class="program-desc">📝 ${escapeHtml(desc)}</div>` : ''}</div>`;

                });

            }

            html += `</div>`;

        });

        if (html === '') html = `<div class="empty-state"><div class="empty-state-icon">📅</div><div class="empty-state-text">暂无节目数据</div></div>`;

        content.innerHTML = html;

    } catch (e) {

        content.innerHTML = `<div class="empty-state"><div class="empty-state-icon" style="color: var(--danger);">❌</div><div class="empty-state-text">加载失败</div><div class="empty-state-subtitle">${e.message}</div></div>`;

    }

};

window.closeEpgDetail = function() {

    const modal = document.getElementById('epgDetailModal');

    if (modal) modal.classList.remove('show');

};

function renderEPGDetails(epgDetail) {

    const section = document.getElementById('epgCacheSection');

    const details = document.getElementById('epgCacheDetails');

    if (!epgDetail || epgDetail.total_entries === 0) { section.style.display = 'none'; return; }

    section.style.display = 'block';

    let html = '';

    if (epgDetail.summary) {

        html += `<div class="epg-summary-box"><div class="epg-summary-item"><div class="label">📦 缓存条目</div><div class="value">${epgDetail.total_entries}</div></div><div class="epg-summary-item"><div class="label">📺 频道数</div><div class="value">${epgDetail.summary.total_channels}</div></div><div class="epg-summary-item"><div class="label">📅 日期数</div><div class="value">${epgDetail.summary.total_dates}</div></div><div class="epg-summary-item"><div class="label">🎬 节目数</div><div class="value">${epgDetail.summary.total_programs}</div></div></div>`;

    }

    if (epgDetail.full_cache_available) {

        html += `<div style="background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); padding: 15px; border-radius: 10px; margin-top: 20px; border: 2px solid #6ee7b7;"><div style="display: flex; align-items: center; gap: 10px; color: #065f46;"><span style="font-size: 1.5em;">✅</span><div><div style="font-weight: 700; margin-bottom: 5px;">全量缓存已就绪</div><div style="font-size: 0.85em; opacity: 0.9;">缓存时间: ${epgDetail.full_cache_time} (${epgDetail.full_cache_age} 前)</div></div></div></div>`;

    }

    html += '<div class="epg-detail-grid">';

    if (epgDetail.by_channel && Object.keys(epgDetail.by_channel).length > 0) {

        html += `<div class="epg-detail-box"><h4>📺 按频道统计 (前10个)</h4><div class="epg-list">`;

        const channels = Object.entries(epgDetail.by_channel).sort((a, b) => b[1].program_count - a[1].program_count).slice(0, 10);

        channels.forEach(([channelId, info]) => {

            const channelName = getChannelName(channelId);

            html += `<div class="epg-list-item" onclick="openEpgDetail('${channelId}')"><div class="channel-id">${channelName}</div><div class="info"><span>📅 ${info.dates.length} 个日期</span><span>🎬 ${info.program_count} 个节目</span></div></div>`;

        });

        html += `</div></div>`;

    }

    if (epgDetail.by_date && Object.keys(epgDetail.by_date).length > 0) {

        html += `<div class="epg-detail-box"><h4>📅 按日期统计</h4><div class="epg-list">`;

        const dates = Object.entries(epgDetail.by_date).sort((a, b) => b[0].localeCompare(a[0]));

        dates.forEach(([date, info]) => {

            html += `<div class="epg-list-item"><div class="channel-id">${date}</div><div class="info"><span>📺 ${info.channels.length} 个频道</span><span>🎬 ${info.program_count} 个节目</span></div></div>`;

        });

        html += `</div></div>`;

    }

    html += '</div>';

    details.innerHTML = html;

}

async function load() {

    const stats = document.getElementById('cacheStats');

    if (!stats) return;

    stats.innerHTML = `<div class="skeleton skeleton-card"></div><div class="skeleton skeleton-card"></div><div class="skeleton skeleton-card"></div><div class="skeleton skeleton-card"></div><div class="skeleton skeleton-card"></div>`;

    await loadChannelMap();

    try {

        const token = sessionStorage.getItem('admin_token');

        const headers = {};

        if (token) headers['Authorization'] = `Bearer ${token}`;

        const res = await fetch(`${API}/health`, { headers });

        const data = await res.json();

        if (!data.cache) throw new Error('无法获取缓存信息');

        const cache = data.cache;

        const cacheCards = [

            { icon: '🔑', title: 'CID 缓存', color: '#6366f1', data: cache.cid || {} },

            { icon: '🎫', title: '认证缓存', color: '#8b5cf6', data: cache.auth || {} },

            { icon: '📺', title: '频道缓存', color: '#ec4899', data: { cached: cache.channels !== undefined ? (typeof cache.channels === 'boolean' ? cache.channels : cache.channels > 0) : false } },

            { icon: '🎬', title: '流缓存', color: '#f59e0b', data: { cached: cache.streams > 0, count: cache.streams } },

            { icon: '📅', title: 'EPG 缓存', color: '#10b981', data: { cached: cache.epg > 0, count: cache.epg } }

        ];

        stats.innerHTML = cacheCards.map((card) => {

            let content = '';

            const cached = card.data.cached !== undefined ? card.data.cached : !!card.data.value || !!card.data.token;

            content += `<div class="cache-detail"><span class="cache-label">状态</span><span class="cache-value">${cached ? '✅ 已缓存' : '❌ 未缓存'}</span></div>`;

            if (cached && card.data.value) content += `<div class="cache-detail"><span class="cache-label">完整 CID</span>${createCopyableValue(card.data.value, 'CID', false)}</div>`;

            if (cached && card.data.token) content += `<div class="cache-detail"><span class="cache-label">Access Token</span>${createCopyableValue(card.data.token, 'Token', true)}</div>`;

            if (card.data.age) content += `<div class="cache-detail"><span class="cache-label">缓存时长</span><span class="cache-value">${card.data.age}</span></div>`;

            if (card.data.ttl) content += `<div class="cache-detail"><span class="cache-label">剩余有效期</span><span class="cache-value">${card.data.ttl}</span></div>`;

            if (card.data.storage) content += `<div class="cache-detail"><span class="cache-label">存储位置</span><span class="cache-value">${card.data.storage}</span></div>`;

            if (card.data.count !== undefined) content += `<div class="cache-detail"><span class="cache-label">缓存数量</span><span class="cache-value">${card.data.count} 个</span></div>`;

            return `<div class="cache-card" style="border-left-color: ${card.color};"><h3>${card.icon} ${card.title}</h3>${content}</div>`;

        }).join('');

        if (cache.epg_detail) renderEPGDetails(cache.epg_detail);

        if (window.MediaGatewayUtils) window.MediaGatewayUtils.showNotification('✅ 缓存状态已更新', 'success');

    } catch (e) {

        stats.innerHTML = `<div style="grid-column: 1/-1; text-align: center; padding: 60px 30px; color: var(--danger);"><div style="font-size: 60px; margin-bottom: 20px;">❌</div><h3>加载失败</h3><p style="color: #64748b; margin-top: 10px;">${e.message}</p></div>`;

        if (window.MediaGatewayUtils) window.MediaGatewayUtils.showNotification('❌ 加载失败', 'error');

    }

}

window.clearCache = debounce(async function(type) {

    const typeNames = { 'cid': 'CID', 'auth': '认证', 'channels': '频道', 'streams': '流', 'epg': 'EPG', 'all': '所有' };

    const msg = type === 'all' ? '⚠️ 确定要清理所有缓存吗？这将导致所有数据重新获取。' : `确定要清理 ${typeNames[type]} 缓存吗？`;

    if (!confirm(msg)) return;

    try {

        const token = sessionStorage.getItem('admin_token');

        const headers = {};

        if (token) headers['Authorization'] = `Bearer ${token}`;

        const res = await fetch(`${API}/api/refresh?type=${type}`, { headers });

        const data = await res.json();

        if (!data.success) throw new Error(data.error || '清理失败');

        if (window.MediaGatewayUtils) window.MediaGatewayUtils.showNotification(`✅ ${data.message}`, 'success');

        await load();

    } catch (e) {

        if (window.MediaGatewayUtils) window.MediaGatewayUtils.showNotification('❌ 清理失败: ' + e.message, 'error');

    }

}, 300);

window.initCachePage = function() {

    load();

    const btn = document.getElementById('refreshBtn');

    if (btn) btn.addEventListener('click', debounce(load, 300));

    document.addEventListener('keydown', (e) => {

        if (e.key === 'Escape') {

            const modal = document.getElementById('epgDetailModal');

            if (modal && modal.classList.contains('show')) closeEpgDetail();

        }

    });

    const modal = document.getElementById('epgDetailModal');

    if (modal) modal.addEventListener('click', (e) => { if (e.target === modal) closeEpgDetail(); });

};

setTimeout(window.initCachePage, 0);

})();

</script>