weibo_signin/frontend/templates/add_account.html

{% extends "base.html" %}

{% block title %}Add Account - Weibo-HotSign{% endblock %}

{% block extra_css %}
<style>
    .tab-container {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        border-bottom: 2px solid #f0f0f0;
    }

    .tab {
        padding: 10px 20px;
        cursor: pointer;
        border: none;
        background: none;
        font-size: 16px;
        color: #666;
        transition: all 0.3s;
    }

    .tab.active {
        color: #6366f1;
        border-bottom: 2px solid #6366f1;
        margin-bottom: -2px;
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    .help-text {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 4px;
        margin-top: 20px;
        font-size: 14px;
        color: #666;
    }

    .help-text h4 {
        margin-top: 0;
        color: #333;
        font-size: 16px;
    }

    .help-text ol, .help-text ul {
        margin: 10px 0;
        padding-left: 20px;
    }

    .help-text li {
        margin: 8px 0;
        line-height: 1.6;
    }

    .help-text code {
        background: #e9ecef;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: monospace;
        font-size: 13px;
    }

    .method-card {
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 15px;
        transition: all 0.3s;
    }

    .method-card:hover {
        border-color: #6366f1;
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
    }

    .method-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
    }

    .method-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        margin-left: 10px;
    }

    .badge-recommended {
        background: #d4edda;
        color: #155724;
    }

    .warning-box {
        background: #fff3cd;
        border-left: 4px solid #ffc107;
        padding: 15px;
        margin: 20px 0;
        border-radius: 4px;
    }

    .warning-box h4 {
        color: #856404;
        margin-top: 0;
    }

    .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    pre {
        background: #f8f9fa;
        padding: 10px;
        border-radius: 4px;
        overflow-x: auto;
        font-size: 13px;
    }
</style>
{% endblock %}

{% block content %}
<div style="max-width: 800px; margin: 0 auto;">
    <h1 style="margin-bottom: 30px;">Add Weibo Account</h1>

    <div class="card">
        <div class="tab-container">
            <button class="tab active" onclick="switchTab('guide')">获取教程</button>
            <button class="tab" onclick="switchTab('qrcode')">扫码添加</button>
            <button class="tab" onclick="switchTab('manual')">手动添加</button>
        </div>

        <!-- 获取教程 Tab -->
        <div id="guide-tab" class="tab-content active">
            <h3 style="margin-bottom: 20px;">如何获取微博 Cookie</h3>

            <div class="method-card">
                <div class="method-title">
                    方法一：使用浏览器开发者工具
                    <span class="method-badge badge-recommended">推荐</span>
                </div>
                <div class="help-text">
                    <ol>
                        <li>在浏览器中打开 <a href="https://weibo.com" target="_blank">https://weibo.com</a> 并登录</li>
                        <li>按 <code>F12</code> 打开开发者工具</li>
                        <li>切换到 <code>Network</code> (网络) 标签</li>
                        <li>刷新页面 (<code>F5</code>)</li>
                        <li>在请求列表中点击任意一个请求（通常是第一个）</li>
                        <li>在右侧找到 <code>Request Headers</code> (请求头)</li>
                        <li>找到 <code>Cookie:</code> 字段，复制整行内容</li>
                        <li>切换到"添加账号"标签页，粘贴 Cookie</li>
                    </ol>
                </div>
            </div>

            <div class="warning-box">
                <h4>⚠️ 重要提示</h4>
                <ul>
                    <li>Cookie 包含你的登录凭证，请妥善保管</li>
                    <li>不要在公共场合或不信任的网站输入 Cookie</li>
                    <li>Cookie 会被加密存储在数据库中</li>
                    <li>如果 Cookie 失效，系统会提示你更新</li>
                    <li>建议使用小号或测试账号，避免主账号风险</li>
                </ul>
            </div>

            <div style="text-align: center; margin-top: 30px;">
                <button class="btn btn-primary" onclick="switchTab('qrcode')" style="margin-right: 10px;">
                    使用扫码添加 →
                </button>
                <button class="btn btn-secondary" onclick="switchTab('manual')">
                    手动添加账号 →
                </button>
            </div>
        </div>

        <!-- 扫码添加 Tab -->
        <div id="qrcode-tab" class="tab-content">
            <h3 style="margin-bottom: 20px;">微博扫码登录</h3>

            <div class="method-card">
                <div class="method-title">
                    扫码快速添加账号
                    <span class="method-badge badge-recommended">推荐</span>
                </div>
                <div class="help-text">
                    <p style="font-size: 16px; margin-bottom: 15px;">
                        使用微博网页版扫码登录，安全便捷地添加账号。
                    </p>
                    <h4>使用步骤：</h4>
                    <ol>
                        <li>点击下方"生成二维码"按钮</li>
                        <li>使用手机微博 APP 扫描二维码</li>
                        <li>在手机上点击"确认登录"</li>
                        <li>等待页面自动完成账号添加</li>
                    </ol>
                </div>
            </div>

            <div id="qr-container" style="text-align: center; margin: 40px 0;">
                <button id="generate-qr-btn" class="btn btn-primary" style="font-size: 18px; padding: 15px 40px;">
                    📱 生成二维码
                </button>
                
                <div id="qr-display" style="display: none; margin-top: 30px;">
                    <div style="background: white; padding: 20px; border-radius: 8px; display: inline-block; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                        <img id="qr-image" src="" alt="QR Code" style="width: 256px; height: 256px; margin-bottom: 15px;">
                        <p style="color: #666; margin: 0;">请使用微博 APP 扫描</p>
                        <p id="qr-timer" style="color: #999; font-size: 14px; margin-top: 10px;">有效期: 3:00</p>
                    </div>
                    <div id="qr-status" style="margin-top: 20px; font-size: 16px; color: #666;">
                        等待扫码...
                    </div>
                </div>
            </div>

            <div class="help-text">
                <h4>💡 说明</h4>
                <ul>
                    <li>使用微博网页版扫码登录接口，无需注册开放平台应用</li>
                    <li>扫码后自动获取登录 Cookie</li>
                    <li>Cookie 会被加密存储在数据库中</li>
                    <li>建议使用小号或测试账号，避免主账号风险</li>
                </ul>
            </div>

            <div class="warning-box">
                <h4>⚠️ 注意事项</h4>
                <ul>
                    <li>二维码有效期 3 分钟，过期后需重新生成</li>
                    <li>扫码后请在手机上点击"确认登录"</li>
                    <li>如果长时间未响应，请刷新页面重试</li>
                </ul>
            </div>
        </div>

        <!-- 添加账号 Tab -->
        <div id="manual-tab" class="tab-content">
            <h3 style="margin-bottom: 20px;">手动添加账号</h3>
            <form method="POST">
                <input type="hidden" name="login_method" value="manual">
                
                <div class="form-group">
                    <label for="weibo_user_id">Weibo User ID</label>
                    <input type="text" id="weibo_user_id" name="weibo_user_id" required placeholder="e.g., 123456789">
                    <small style="color: #999; display: block; margin-top: 8px;">
                        你的微博数字 ID，可以在个人主页 URL 中找到
                    </small>
                </div>

                <div class="form-group">
                    <label for="cookie">Cookie</label>
                    <textarea id="cookie" name="cookie" required placeholder="Paste your Weibo cookie here" style="min-height: 150px;"></textarea>
                    <small style="color: #999; display: block; margin-top: 8px;">
                        粘贴从浏览器获取的完整 Cookie 字符串。Cookie 将被加密存储。
                    </small>
                </div>

                <div class="form-group">
                    <label for="remark">Remark (Optional)</label>
                    <input type="text" id="remark" name="remark" placeholder="e.g., My main account">
                    <small style="color: #999; display: block; margin-top: 8px;">
                        给这个账号添加备注，方便识别
                    </small>
                </div>

                <div class="btn-group">
                    <button type="submit" class="btn btn-primary">Add Account</button>
                    <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Cancel</a>
                </div>
            </form>

            <div class="help-text" style="margin-top: 30px;">
                <h4>💡 快速提示</h4>
                <p><strong>Weibo User ID 在哪里找？</strong></p>
                <ol>
                    <li>登录微博后，点击右上角头像进入个人主页</li>
                    <li>查看浏览器地址栏，格式类似：<code>https://weibo.com/u/1234567890</code></li>
                    <li>最后的数字 <code>1234567890</code> 就是你的 User ID</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<script>
function switchTab(tabName) {
    // 更新 tab 按钮状态
    document.querySelectorAll('.tab').forEach(tab => {
        tab.classList.remove('active');
    });
    event.target.classList.add('active');

    // 更新 tab 内容显示
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.remove('active');
    });
    document.getElementById(tabName + '-tab').classList.add('active');
}

// 微博扫码登录相关代码
let pollInterval = null;
let timerInterval = null;
let currentQrid = null;
let timeLeft = 180; // 3分钟

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

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

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