fix: add admin social login

templates/admin_login.html

@@ -167,6 +167,144 @@
             font-size: 13px;
         }
 
+        .divider {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            color: #6b7280;
+            font-size: 12px;
+            font-weight: 700;
+            margin: 20px 0 14px;
+        }
+
+        .divider::before,
+        .divider::after {
+            content: '';
+            height: 1px;
+            flex: 1;
+            background: rgba(17,24,39,0.12);
+        }
+
+        .social-login-area {
+            display: none;
+        }
+
+        .social-buttons {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .social-btn {
+            width: 100%;
+            height: 40px;
+            border-radius: 10px;
+            border: 1px solid rgba(17,24,39,0.14);
+            background: #fff;
+            color: #111827;
+            font-size: 13px;
+            font-weight: 800;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            transition: background 0.15s, border-color 0.15s;
+        }
+
+        .social-btn:hover:not(:disabled) {
+            background: #f8fafc;
+            border-color: rgba(37,99,235,0.32);
+        }
+
+        .social-btn:disabled {
+            cursor: not-allowed;
+            opacity: 0.7;
+        }
+
+        .social-icon {
+            width: 22px;
+            height: 22px;
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-size: 12px;
+            line-height: 1;
+        }
+
+        .provider-wx .social-icon { background: #16a34a; }
+        .provider-qq .social-icon { background: #2563eb; }
+        .provider-alipay .social-icon { background: #1677ff; }
+
+        .qr-mask {
+            position: fixed;
+            inset: 0;
+            z-index: 20;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            padding: 18px;
+            background: rgba(17,24,39,0.45);
+        }
+
+        .qr-dialog {
+            width: min(340px, 92vw);
+            border-radius: 14px;
+            background: #fff;
+            box-shadow: 0 24px 70px rgba(17,24,39,0.24);
+            padding: 20px;
+        }
+
+        .qr-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            margin-bottom: 16px;
+        }
+
+        .qr-title {
+            font-size: 16px;
+            font-weight: 800;
+            color: #111827;
+        }
+
+        .qr-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            border: 1px solid rgba(17,24,39,0.12);
+            background: #fff;
+            color: #4b5563;
+            cursor: pointer;
+            font-size: 18px;
+            line-height: 1;
+        }
+
+        .qr-body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .qr-image {
+            width: 220px;
+            height: 220px;
+            border: 1px solid rgba(17,24,39,0.10);
+            border-radius: 10px;
+            padding: 8px;
+            background: #fff;
+        }
+
+        .qr-prompt {
+            font-size: 13px;
+            color: #374151;
+            text-align: center;
+        }
+
         @media (max-width: 480px) {
             body { padding: 12px; align-items: flex-start; padding-top: 20px; }
             .login-container { width: 100%; max-width: 100%; padding: 28px 20px; border-radius: 14px; }
@@ -215,14 +353,48 @@
             <button type="submit" class="btn-login">登录后台</button>
         </form>
 
+        <div id="socialLoginArea" class="social-login-area">
+            <div class="divider"><span>快捷登录</span></div>
+            <div id="socialButtons" class="social-buttons"></div>
+        </div>
+
         <div class="back-link">
             <a href="/">返回用户登录</a>
         </div>
     </div>
 
+    <div id="qrMask" class="qr-mask" onclick="handleQrMaskClick(event)">
+        <div class="qr-dialog" role="dialog" aria-modal="true" aria-labelledby="qrTitle">
+            <div class="qr-head">
+                <div id="qrTitle" class="qr-title">微信登录</div>
+                <button type="button" class="qr-close" onclick="closeQr()" aria-label="关闭">x</button>
+            </div>
+            <div class="qr-body">
+                <img id="qrImage" class="qr-image" alt="快捷登录二维码">
+                <div id="qrPrompt" class="qr-prompt">请使用微信扫描二维码点关注后登录</div>
+            </div>
+        </div>
+    </div>
+
     <script>
         let captchaSession = '';
         let needCaptcha = false;
+        let socialProviders = [];
+        let socialLoadingProvider = '';
+        let pollTimer = null;
+        let pollStartedAt = 0;
+
+        const providerLabels = {
+            qq: 'QQ',
+            wx: '微信',
+            alipay: '支付宝'
+        };
+
+        const providerIcons = {
+            qq: 'Q',
+            wx: '微',
+            alipay: '支'
+        };
 
         function getCookie(name) {
             const escaped = String(name || '').replace(/([.*+?^${}()|[\]\\])/g, '\\$1');
@@ -239,6 +411,30 @@
             return headers;
         }
 
+        function showError(message) {
+            const errorDiv = document.getElementById('errorMessage');
+            const successDiv = document.getElementById('successMessage');
+            successDiv.style.display = 'none';
+            errorDiv.textContent = message || '操作失败';
+            errorDiv.style.display = 'block';
+        }
+
+        function showSuccess(message) {
+            const errorDiv = document.getElementById('errorMessage');
+            const successDiv = document.getElementById('successMessage');
+            errorDiv.style.display = 'none';
+            successDiv.textContent = message || '操作成功';
+            successDiv.style.display = 'block';
+        }
+
+        async function readJson(response) {
+            try {
+                return await response.json();
+            } catch (error) {
+                return {};
+            }
+        }
+
         async function handleLogin(event) {
             event.preventDefault();
 
@@ -325,6 +521,200 @@
             await generateCaptcha();
             document.getElementById('captcha').value = '';
         }
+
+        function adminSocialRedirectUri() {
+            const url = new URL(window.location.href);
+            url.pathname = '/yuyx';
+            url.search = '';
+            url.hash = '';
+            return url.toString();
+        }
+
+        function qrPrompt(provider) {
+            if (provider === 'wx') return '请使用微信扫描二维码点关注后登录';
+            if (provider === 'qq') return '请使用 QQ 扫描二维码登录';
+            return '请使用支付宝扫描二维码登录';
+        }
+
+        function setSocialButtonsDisabled(disabled) {
+            document.querySelectorAll('.social-btn').forEach((btn) => {
+                btn.disabled = Boolean(disabled);
+            });
+        }
+
+        function renderSocialButtons() {
+            const area = document.getElementById('socialLoginArea');
+            const buttons = document.getElementById('socialButtons');
+            const visibleProviders = socialProviders.filter((provider) => providerLabels[provider]);
+            if (!visibleProviders.length) {
+                area.style.display = 'none';
+                buttons.innerHTML = '';
+                return;
+            }
+
+            area.style.display = 'block';
+            buttons.innerHTML = visibleProviders.map((provider) => {
+                const label = providerLabels[provider];
+                const icon = providerIcons[provider] || label.slice(0, 1);
+                return `
+                    <button type="button" class="social-btn provider-${provider}" data-provider="${provider}">
+                        <span class="social-icon">${icon}</span>
+                        <span>${label}登录</span>
+                    </button>
+                `;
+            }).join('');
+
+            buttons.querySelectorAll('.social-btn').forEach((button) => {
+                button.addEventListener('click', () => startSocialLogin(button.dataset.provider));
+            });
+        }
+
+        async function loadSocialConfig() {
+            try {
+                const response = await fetch('/api/auth/social/config', {
+                    method: 'GET',
+                    credentials: 'same-origin'
+                });
+                const data = await readJson(response);
+                socialProviders = response.ok && data.enabled && Array.isArray(data.providers) ? data.providers : [];
+            } catch (error) {
+                socialProviders = [];
+            }
+            renderSocialButtons();
+        }
+
+        function stopPolling() {
+            if (pollTimer) {
+                window.clearTimeout(pollTimer);
+                pollTimer = null;
+            }
+        }
+
+        function closeQr() {
+            stopPolling();
+            document.getElementById('qrMask').style.display = 'none';
+            document.getElementById('qrImage').removeAttribute('src');
+        }
+
+        function handleQrMaskClick(event) {
+            if (event.target && event.target.id === 'qrMask') {
+                closeQr();
+            }
+        }
+
+        function openQr(provider, value) {
+            document.getElementById('qrTitle').textContent = `${providerLabels[provider] || '快捷'}登录`;
+            document.getElementById('qrPrompt').textContent = qrPrompt(provider);
+            document.getElementById('qrImage').src = `/yuyx/api/admin-auth/social/qr?data=${encodeURIComponent(value)}`;
+            document.getElementById('qrMask').style.display = 'flex';
+        }
+
+        function schedulePoll(provider, state, intervalSeconds) {
+            stopPolling();
+            pollStartedAt = Date.now();
+            const tick = async () => {
+                if (Date.now() - pollStartedAt > 5 * 60 * 1000) {
+                    closeQr();
+                    showError('二维码已过期，请重新获取');
+                    return;
+                }
+                try {
+                    const response = await fetch('/yuyx/api/admin-auth/social/poll', {
+                        method: 'POST',
+                        credentials: 'same-origin',
+                        headers: jsonHeaders(),
+                        body: JSON.stringify({ provider, state })
+                    });
+                    const data = await readJson(response);
+                    if (!response.ok) {
+                        closeQr();
+                        showError(data.error || data.message || '扫码状态获取失败，请重新尝试');
+                        return;
+                    }
+                    if (data.status === 'authorized' && data.url) {
+                        closeQr();
+                        window.location.assign(data.url);
+                        return;
+                    }
+                    pollTimer = window.setTimeout(tick, Math.max(Number(intervalSeconds || 2), 2) * 1000);
+                } catch (error) {
+                    closeQr();
+                    showError('扫码状态获取失败，请重新尝试');
+                }
+            };
+            pollTimer = window.setTimeout(tick, Math.max(Number(intervalSeconds || 2), 2) * 1000);
+        }
+
+        async function startSocialLogin(provider) {
+            if (!provider || socialLoadingProvider) return;
+            socialLoadingProvider = provider;
+            setSocialButtonsDisabled(true);
+            try {
+                const response = await fetch('/yuyx/api/admin-auth/social/login-url', {
+                    method: 'POST',
+                    credentials: 'same-origin',
+                    headers: jsonHeaders(),
+                    body: JSON.stringify({
+                        provider,
+                        redirect_uri: adminSocialRedirectUri()
+                    })
+                });
+                const data = await readJson(response);
+                if (!response.ok) {
+                    showError(data.error || data.message || '获取快捷登录地址失败');
+                    return;
+                }
+                if (provider !== 'wx') {
+                    window.location.assign(data.url);
+                    return;
+                }
+                const value = data.scan_url || data.qrcode || data.url;
+                if (!value || !data.scan_state) {
+                    showError('微信二维码获取失败');
+                    return;
+                }
+                openQr(provider, value);
+                schedulePoll(provider, data.scan_state, data.scan_poll_interval || 2);
+            } catch (error) {
+                showError('获取快捷登录地址失败');
+            } finally {
+                socialLoadingProvider = '';
+                setSocialButtonsDisabled(false);
+            }
+        }
+
+        async function handleSocialCallback() {
+            const params = new URLSearchParams(window.location.search || '');
+            const provider = String(params.get('provider') || params.get('type') || '').trim();
+            const code = String(params.get('code') || '').trim();
+            if (!provider || !code) return;
+
+            showSuccess('正在完成快捷登录...');
+            try {
+                const response = await fetch('/yuyx/api/admin-auth/social/callback', {
+                    method: 'POST',
+                    credentials: 'same-origin',
+                    headers: jsonHeaders(),
+                    body: JSON.stringify({ provider, code })
+                });
+                const data = await readJson(response);
+                if (!response.ok) {
+                    showError(data.error || data.message || '快捷登录失败');
+                    return;
+                }
+                showSuccess('登录成功，正在跳转...');
+                window.setTimeout(() => {
+                    window.location.replace(data.redirect || '/yuyx/admin');
+                }, 500);
+            } catch (error) {
+                showError('快捷登录失败');
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            loadSocialConfig();
+            handleSocialCallback();
+        });
     </script>
 </body>
 </html>