ts

2026-01-12 15:21:52 +08:00
parent e64adfe628
commit 7c933f4a82
4 changed files with 286 additions and 36 deletions
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>登录测试</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .btn {
+            background: #10b981;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            margin: 10px;
+        }
+        .btn:hover {
+            background: #059669;
+        }
+        .qr-container {
+            margin: 20px 0;
+            text-align: center;
+        }
+        .status {
+            padding: 10px;
+            margin: 10px 0;
+            border-radius: 5px;
+        }
+        .status.success {
+            background: #d1fae5;
+            color: #065f46;
+        }
+        .status.error {
+            background: #fee2e2;
+            color: #991b1b;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>小红书登录测试</h2>
+        <button class="btn" onclick="generateQR()">生成二维码</button>
+        <button class="btn" onclick="checkStatus()">检查状态</button>
+        <button class="btn" onclick="logout()">退出登录</button>
+
+        <div id="status" class="status" style="display: none;"></div>
+
+        <div id="qrContainer" class="qr-container" style="display: none;">
+            <p>请使用小红书App扫描二维码登录</p>
+            <div id="qrcode"></div>
+            <div id="countdown"></div>
+        </div>
+    </div>
+
+    <script>
+        let countdownInterval = null;
+
+        async function generateQR() {
+            try {
+                const response = await fetch('/api/login/qrcode');
+                const data = await response.json();
+
+                if (response.ok) {
+                    showQR(data.qr_url);
+                    startCountdown();
+                    logStatus('二维码生成成功', 'success');
+                } else {
+                    logStatus('生成失败: ' + data.detail, 'error');
+                }
+            } catch (error) {
+                logStatus('网络错误: ' + error.message, 'error');
+            }
+        }
+
+        function showQR(qrUrl) {
+            const container = document.getElementById('qrcode');
+            container.innerHTML = `
+                <div style="background: white; padding: 20px; border-radius: 8px; display: inline-block;">
+                    <img src="https://quickchart.io/qr?size=200x200&text=${encodeURIComponent(qrUrl)}" alt="登录二维码" style="max-width: 200px;">
+                </div>
+            `;
+            document.getElementById('qrContainer').style.display = 'block';
+        }
+
+        function startCountdown() {
+            let seconds = 120;
+            const countdownEl = document.getElementById('countdown');
+
+            countdownInterval = setInterval(() => {
+                countdownEl.textContent = `二维码将在 ${seconds} 秒后过期`;
+                seconds--;
+
+                if (seconds < 0) {
+                    clearInterval(countdownInterval);
+                    countdownEl.textContent = '二维码已过期';
+                    document.getElementById('qrContainer').style.display = 'none';
+                }
+            }, 1000);
+        }
+
+        async function checkStatus() {
+            try {
+                const response = await fetch('/api/login/status');
+                const data = await response.json();
+
+                if (data.logged_in) {
+                    logStatus(`已登录 - 登录时间: ${new Date(data.login_time).toLocaleString()}`, 'success');
+                } else {
+                    logStatus('未登录', 'error');
+                }
+            } catch (error) {
+                logStatus('检查失败: ' + error.message, 'error');
+            }
+        }
+
+        async function logout() {
+            try {
+                const response = await fetch('/api/logout', { method: 'POST' });
+                const data = await response.json();
+
+                if (response.ok) {
+                    logStatus('已退出登录', 'success');
+                    document.getElementById('qrContainer').style.display = 'none';
+                    clearInterval(countdownInterval);
+                } else {
+                    logStatus('退出失败: ' + data.detail, 'error');
+                }
+            } catch (error) {
+                logStatus('退出失败: ' + error.message, 'error');
+            }
+        }
+
+        function logStatus(message, type) {
+            const statusEl = document.getElementById('status');
+            statusEl.textContent = message;
+            statusEl.className = `status ${type}`;
+            statusEl.style.display = 'block';
+        }
+
+        // 页面加载时检查登录状态
+        window.onload = checkStatus;
+    </script>
+</body>
+</html>