weibo_signin/frontend/templates/add_account.html

{% extends "base.html" %}

{% block title %}添加账号 - 微博超话签到{% endblock %}

{% block extra_css %}
<style>
    .qr-wrapper { text-align: center; padding: 40px 20px; }
    .qr-box {
        background: #f8fafc;
        padding: 28px;
        border-radius: 24px;
        display: inline-block;
        border: 1.5px solid #e2e8f0;
        margin-bottom: 20px;
    }
    .qr-box img { width: 220px; height: 220px; display: block; margin: 0 auto 14px; border-radius: 12px; }
    #qr-timer { color: #94a3b8; font-size: 14px; }
    #qr-status { margin-top: 18px; font-size: 16px; min-height: 24px; font-weight: 500; }
    .status-waiting { color: #64748b; }
    .status-scanned { color: #f59e0b; }
    .status-success { color: #10b981; }
    .status-error { color: #ef4444; }
    .info-box {
        background: #f8fafc; border-radius: 16px; padding: 18px 22px; margin-top: 24px;
        font-size: 14px; color: #64748b; text-align: left; max-width: 480px;
        margin-left: auto; margin-right: auto; border: 1px solid #e2e8f0;
    }
    .info-box li { margin: 6px 0; line-height: 1.7; }
</style>
{% endblock %}

{% block content %}
<div style="max-width: 560px; margin: 0 auto;">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
        <h1 style="font-size:24px; font-weight:700; color:#1e293b;">📱 添加微博账号</h1>
        <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">返回</a>
    </div>

    <div class="card">
        <div class="qr-wrapper">
            <button id="generate-qr-btn" class="btn btn-primary" style="font-size:18px; padding:16px 40px; border-radius:18px;">
                📱 生成二维码
            </button>
            <div id="qr-display" style="display:none;">
                <div class="qr-box">
                    <img id="qr-image" src="" alt="QR Code">
                    <p style="color:#64748b; margin:0 0 4px;">请使用微博 APP 扫描</p>
                    <p id="qr-timer">有效期: 3:00</p>
                </div>
                <div id="qr-status" class="status-waiting">等待扫码...</div>
            </div>
        </div>
        <div class="info-box">
            <p style="margin:0 0 8px; font-weight:600; color:#334155;">使用说明</p>
            <ol style="margin:0; padding-left:20px;">
                <li>点击"生成二维码"</li>
                <li>打开手机微博 APP，扫描二维码</li>
                <li>在手机上点击"确认登录"</li>
                <li>等待自动完成，跳转到控制台</li>
            </ol>
        </div>
    </div>
</div>

<script>
let pollInterval = null, timerInterval = null, currentQrid = null, timeLeft = 180, isProcessing = false;

document.getElementById('generate-qr-btn').addEventListener('click', async function() {
    try {
        const resp = await fetch('/api/weibo/qrcode/generate', {method:'POST', headers:{'Content-Type':'application/json'}});
        const data = await resp.json();
        if (!data.success) { alert('生成二维码失败: ' + (data.error || '未知错误')); return; }
        currentQrid = data.qrid;
        document.getElementById('qr-image').src = data.qr_image;
        document.getElementById('generate-qr-btn').style.display = 'none';
        document.getElementById('qr-display').style.display = 'block';
        document.getElementById('qr-status').textContent = '等待扫码...';
        document.getElementById('qr-status').className = 'status-waiting';
        timeLeft = 180;
        updateTimer();
        timerInterval = setInterval(updateTimer, 1000);
        pollInterval = setInterval(checkQRStatus, 2000);
    } catch(e) { alert('生成二维码失败: ' + e.message); }
});

function updateTimer() {
    if (timeLeft <= 0) {
        clearInterval(timerInterval); clearInterval(pollInterval);
        document.getElementById('qr-status').textContent = '二维码已过期，请重新生成';
        document.getElementById('qr-status').className = 'status-error';
        document.getElementById('generate-qr-btn').style.display = 'inline-block';
        document.getElementById('qr-display').style.display = 'none';
        return;
    }
    const m = Math.floor(timeLeft / 60), s = timeLeft % 60;
    document.getElementById('qr-timer').textContent = `有效期: ${m}:${s.toString().padStart(2,'0')}`;
    timeLeft--;
}

async function checkQRStatus() {
    if (isProcessing) return;
    isProcessing = true;
    try {
        const resp = await fetch(`/api/weibo/qrcode/check/${currentQrid}`);
        const data = await resp.json();
        if (data.status === 'waiting') {
            document.getElementById('qr-status').textContent = '等待扫码...';
            document.getElementById('qr-status').className = 'status-waiting';
        } else if (data.status === 'scanned') {
            document.getElementById('qr-status').textContent = '✓ 已扫码，请在手机上确认登录';
            document.getElementById('qr-status').className = 'status-scanned';
        } else if (data.status === 'success') {
            clearInterval(pollInterval); pollInterval = null; clearInterval(timerInterval);
            document.getElementById('qr-status').textContent = '✓ 登录成功，正在添加账号...';
            document.getElementById('qr-status').className = 'status-success';
            await new Promise(r => setTimeout(r, 500));
            const addResp = await fetch('/api/weibo/qrcode/add-account', {
                method:'POST', headers:{'Content-Type':'application/json'},
                body: JSON.stringify({qrid: currentQrid})
            });
            const addResult = await addResp.json();
            if (addResult.success) {
                document.getElementById('qr-status').textContent = '✓ 账号添加成功，正在跳转...';
                setTimeout(() => { window.location.href = '/dashboard'; }, 1000);
            } else if (addResult.need_login || addResp.status === 401) {
                document.getElementById('qr-status').textContent = '登录已过期，正在跳转...';
                document.getElementById('qr-status').className = 'status-error';
                setTimeout(() => { window.location.href = '/login'; }, 1500);
            } else {
                document.getElementById('qr-status').textContent = '添加失败: ' + addResult.message;
                document.getElementById('qr-status').className = 'status-error';
            }
            return;
        } else if (data.status === 'expired' || data.status === 'cancelled') {
            clearInterval(pollInterval); pollInterval = null; clearInterval(timerInterval);
            document.getElementById('qr-status').textContent = data.status === 'expired' ? '二维码已过期，请重新生成' : '已取消登录';
            document.getElementById('qr-status').className = 'status-error';
            document.getElementById('generate-qr-btn').style.display = 'inline-block';
            document.getElementById('qr-display').style.display = 'none';
        } else if (data.status === 'error') {
            clearInterval(pollInterval); pollInterval = null; clearInterval(timerInterval);
            document.getElementById('qr-status').textContent = '错误: ' + (data.error || '未知错误');
            document.getElementById('qr-status').className = 'status-error';
        }
    } catch(e) { console.error('检查状态失败:', e); }
    finally { isProcessing = false; }
}
</script>
{% endblock %}