iptv-source-collector/templates/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IPTV 直播源管理</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #f5f7fa;
            color: #333;
            padding: 20px;
        }
        .container { max-width: 1200px; margin: 0 auto; }
        h1 { margin-bottom: 20px; color: #2c3e50; }
        .toolbar {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            background: #3498db;
            color: white;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.2s;
        }
        button:hover { background: #2980b9; }
        button.secondary { background: #95a5a6; }
        button.secondary:hover { background: #7f8c8d; }
        button:disabled { background: #bdc3c7; cursor: not-allowed; }
        .stats {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .stat-card {
            background: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            flex: 1;
            min-width: 150px;
        }
        .stat-card .label { font-size: 12px; color: #7f8c8d; }
        .stat-card .value { font-size: 24px; font-weight: bold; color: #2c3e50; }
        .search-box {
            margin-bottom: 15px;
        }
        .search-box input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
        }
        table {
            width: 100%;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            border-collapse: collapse;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
            font-size: 14px;
        }
        th { background: #f8f9fa; font-weight: 600; color: #555; }
        tr:hover { background: #f8f9fa; }
        td.url { color: #7f8c8d; font-size: 12px; word-break: break-all; }
        .group-tag {
            display: inline-block;
            padding: 2px 8px;
            background: #e8f4fd;
            color: #2980b9;
            border-radius: 4px;
            font-size: 12px;
        }
        .empty { text-align: center; padding: 40px; color: #95a5a6; }
        .loading { text-align: center; padding: 20px; color: #3498db; }
    </style>
</head>
<body>
    <div class="container">
        <h1>📺 IPTV 直播源管理</h1>

        <div class="toolbar">
            <button id="btn-collect">🔄 采集并检测</button>
            <button id="btn-collect-nocheck" class="secondary">⚡ 仅采集（不检测）</button>
            <button id="btn-load" class="secondary">📂 加载已有结果</button>
        </div>

        <div class="stats">
            <div class="stat-card">
                <div class="label">总频道数</div>
                <div class="value" id="total">0</div>
            </div>
            <div class="stat-card">
                <div class="label">分组数</div>
                <div class="value" id="groups">0</div>
            </div>
        </div>

        <div class="search-box">
            <input type="text" id="search" placeholder="搜索频道名称或分组...">
        </div>

        <div id="loading" class="loading" style="display:none;">
            ⏳ 正在处理，请稍候...（采集和检测可能需要几分钟）
        </div>

        <table id="table" style="display:none;">
            <thead>
                <tr>
                    <th>频道名</th>
                    <th>分组</th>
                    <th>URL</th>
                </tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>

        <div id="empty" class="empty">暂无数据，请点击上方按钮开始采集</div>
    </div>

    <script>
        let allChannels = [];

        const $ = (id) => document.getElementById(id);

        async function loadChannels() {
            const resp = await fetch('/api/channels');
            const data = await resp.json();
            allChannels = data.channels || [];
            render();
        }

        async function loadGroups() {
            const resp = await fetch('/api/groups');
            const data = await resp.json();
            $('groups').textContent = Object.keys(data).length;
        }

        function render() {
            const keyword = $('search').value.trim().toLowerCase();
            const filtered = allChannels.filter(ch => {
                if (!keyword) return true;
                return (ch.name || '').toLowerCase().includes(keyword) ||
                       (ch.group || '').toLowerCase().includes(keyword);
            });

            $('total').textContent = allChannels.length;

            const tbody = $('tbody');
            tbody.innerHTML = '';

            if (filtered.length === 0) {
                $('table').style.display = 'none';
                $('empty').style.display = 'block';
                $('empty').textContent = allChannels.length === 0 ? '暂无数据，请点击上方按钮开始采集' : '没有匹配的频道';
                return;
            }

            $('table').style.display = 'table';
            $('empty').style.display = 'none';

            // 只渲染前 500 条，避免卡顿
            const show = filtered.slice(0, 500);
            for (const ch of show) {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${escapeHtml(ch.name || '')}</td>
                    <td><span class="group-tag">${escapeHtml(ch.group || '其他')}</span></td>
                    <td class="url">${escapeHtml(ch.url || '')}</td>
                `;
                tbody.appendChild(tr);
            }
        }

        function escapeHtml(s) {
            return String(s).replace(/[&<>"']/g, c => ({
                '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
            })[c]);
        }

        async function collect(check) {
            $('loading').style.display = 'block';
            $('btn-collect').disabled = true;
            $('btn-collect-nocheck').disabled = true;
            try {
                const resp = await fetch('/api/collect', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ check })
                });
                const data = await resp.json();
                if (data.success) {
                    await loadChannels();
                    await loadGroups();
                }
            } catch (e) {
                alert('采集失败：' + e.message);
            } finally {
                $('loading').style.display = 'none';
                $('btn-collect').disabled = false;
                $('btn-collect-nocheck').disabled = false;
            }
        }

        $('btn-collect').addEventListener('click', () => collect(true));
        $('btn-collect-nocheck').addEventListener('click', () => collect(false));
        $('btn-load').addEventListener('click', async () => {
            await fetch('/api/load');
            await loadChannels();
            await loadGroups();
        });
        $('search').addEventListener('input', render);

        // 初始化
        loadChannels().then(loadGroups);
    </script>
</body>
</html>