fix:优化界面
This commit is contained in:
丹尼尔
@@ -276,16 +276,19 @@
|
||||
width: 190px;
|
||||
height: 190px;
|
||||
border-radius: 18px;
|
||||
background: #020617;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 16px; /* 给二维码留出白边（quiet zone） */
|
||||
box-sizing: border-box;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(15, 23, 42, 0.9),
|
||||
0 15px 32px rgba(15, 23, 42, 0.9);
|
||||
}
|
||||
.qr-img img {
|
||||
.qr-img img,
|
||||
.qr-img canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
display: block;
|
||||
@@ -295,6 +298,15 @@
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
.qr-expired {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
border-radius: 12px;
|
||||
border: 1px dashed rgba(148, 163, 184, 0.5);
|
||||
}
|
||||
.hint {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
@@ -397,6 +409,48 @@
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
.ticket-card {
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(55, 65, 81, 0.9);
|
||||
background: rgba(15, 23, 42, 0.98);
|
||||
padding: 10px 10px 8px;
|
||||
margin-top: 12px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.ticket-body {
|
||||
max-height: 80px;
|
||||
overflow: auto;
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
border-radius: 10px;
|
||||
padding: 6px 8px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
.data62-card {
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(55, 65, 81, 0.9);
|
||||
background: rgba(15, 23, 42, 0.98);
|
||||
padding: 10px 10px 8px;
|
||||
margin-top: 12px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.data62-body {
|
||||
max-height: 120px;
|
||||
overflow: auto;
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
border-radius: 10px;
|
||||
padding: 6px 8px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
.result-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -426,12 +480,39 @@
|
||||
border: 1px solid rgba(30, 64, 175, 0.8);
|
||||
background: #020617;
|
||||
}
|
||||
.page-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.home-banner {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 20px 24px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: rgba(2, 6, 23, 0.6);
|
||||
}
|
||||
.home-banner .banner-text {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
text-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
.home-banner .banner-text span { color: var(--accent); }
|
||||
</style>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell">
|
||||
<div class="shell-inner">
|
||||
<div class="page-wrap">
|
||||
<div class="home-banner">
|
||||
<h1 class="banner-text">Wechat <span>智能托管服务</span></h1>
|
||||
</div>
|
||||
<div class="shell">
|
||||
<div class="shell-inner">
|
||||
<section>
|
||||
<header>
|
||||
<div class="title">
|
||||
@@ -439,9 +520,6 @@
|
||||
微信登录控制台
|
||||
<span class="pill">Admin · iPad / Mac 直登</span>
|
||||
</div>
|
||||
<div class="title-sub">
|
||||
按文档流程封装的可视化工具：生成二维码 · 轮询扫码 · 查看在线状态 · 一键退出登录
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="status-row">
|
||||
@@ -503,11 +581,6 @@
|
||||
退出当前账号
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tag-row">
|
||||
<span class="tag">通过 /api/auth/qrcode 代理 swagger 登录接口</span>
|
||||
<span class="tag">无需直接暴露 8069 服务</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="log-card" style="margin-top: 12px">
|
||||
@@ -547,37 +620,25 @@
|
||||
<div class="small-label" id="login-extra">尚未查询</div>
|
||||
</div>
|
||||
|
||||
<div class="result-card" id="result-card" style="display: none">
|
||||
<div class="result-actions">
|
||||
<span class="small-label">最近一次扫码状态返回数据</span>
|
||||
<button class="secondary" id="btn-copy-result">复制结果到剪贴板</button>
|
||||
</div>
|
||||
<div class="result-body" id="result-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="slider-card" id="slider-card">
|
||||
<div class="small-label">新设备滑块验证（内嵌窗口）</div>
|
||||
<div class="slider-card" id="slider-card" style="display: none">
|
||||
<div class="small-label">第三方滑块(7765)，参数已自动填充，点击「开始验证」提交</div>
|
||||
<iframe
|
||||
id="slider-frame"
|
||||
class="slider-frame"
|
||||
src=""
|
||||
referrerpolicy="no-referrer"
|
||||
></iframe>
|
||||
<div class="small-label">
|
||||
如 iframe 无法加载，可在新标签页打开：
|
||||
<a href="http://113.44.162.180:7765/?key=408449830" target="_blank" style="color: #60a5fa">
|
||||
滑块验证页面
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const $ = (id) => document.getElementById(id);
|
||||
|
||||
const SLIDER_VERIFY_URL = 'http://113.44.162.180:7765/?key=408449830';
|
||||
const API_BASE = 'http://localhost:8000';
|
||||
|
||||
const state = {
|
||||
pollingScan: null,
|
||||
@@ -653,6 +714,99 @@
|
||||
}
|
||||
}
|
||||
|
||||
function extractQrTextFromObject(obj) {
|
||||
let result = null;
|
||||
const base64Like = /^[A-Za-z0-9+/=]+$/;
|
||||
|
||||
function walk(value, keyHint) {
|
||||
if (result || value == null) return;
|
||||
|
||||
if (typeof value === 'string') {
|
||||
// 1) 优先从 URL / 文本中找 data= 后面的内容
|
||||
const idx = value.indexOf('data=');
|
||||
if (idx !== -1) {
|
||||
let s = value.slice(idx + 5);
|
||||
const stop = s.search(/[&\s"]/);
|
||||
if (stop > 0) s = s.slice(0, stop);
|
||||
if (s && s.length >= 16 && base64Like.test(s)) {
|
||||
result = s;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 2) 兜底：如果键名看起来与二维码相关，并且值是长 base64，则直接当作二维码数据
|
||||
if (
|
||||
keyHint &&
|
||||
/qr|code|data/i.test(keyHint) &&
|
||||
!/62/i.test(keyHint) &&
|
||||
value.length >= 32 &&
|
||||
base64Like.test(value)
|
||||
) {
|
||||
result = value;
|
||||
return;
|
||||
}
|
||||
} else if (typeof value === 'object') {
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((v) => walk(v, keyHint));
|
||||
} else {
|
||||
Object.entries(value).forEach(([k, v]) => walk(v, k));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
walk(obj, '');
|
||||
return result;
|
||||
}
|
||||
|
||||
// 从 QrCodeUrl 中解析出微信登录链接（url= 参数），扫码后才能唤起微信登录
|
||||
function getWechatLoginUrlFromResponse(data) {
|
||||
if (!data || typeof data !== 'object') return null;
|
||||
const qrCodeUrl = data.Data?.QrCodeUrl || data.QrCodeUrl || data.qrCodeUrl || data.qrUrl || data.url;
|
||||
if (!qrCodeUrl || typeof qrCodeUrl !== 'string') return null;
|
||||
const idx = qrCodeUrl.indexOf('url=');
|
||||
if (idx === -1) {
|
||||
if (/^https?:\/\/weixin\.qq\.com\//i.test(qrCodeUrl)) return qrCodeUrl;
|
||||
return qrCodeUrl;
|
||||
}
|
||||
let url = qrCodeUrl.slice(idx + 4);
|
||||
const end = url.search(/[&\s]/);
|
||||
if (end > 0) url = url.slice(0, end);
|
||||
try {
|
||||
url = decodeURIComponent(url);
|
||||
} catch (_) {}
|
||||
return url || null;
|
||||
}
|
||||
|
||||
function _unused_extractCleanTicketFromResponse(data) {
|
||||
if (!data || typeof data !== 'object') return null;
|
||||
const obj = data;
|
||||
const d = obj.Data && typeof obj.Data === 'object' ? obj.Data : obj;
|
||||
let raw =
|
||||
d.ticket ||
|
||||
obj.ticket ||
|
||||
obj.Ticket ||
|
||||
(typeof obj.wechat_verify_url === 'string' &&
|
||||
obj.wechat_verify_url.includes('ticket=')
|
||||
? obj.wechat_verify_url.slice(obj.wechat_verify_url.indexOf('ticket=') + 7)
|
||||
: '');
|
||||
if (!raw || typeof raw !== 'string') return null;
|
||||
|
||||
// 如果来自 wechat_verify_url，去掉后续参数
|
||||
const amp = raw.indexOf('&');
|
||||
if (amp > 0) raw = raw.slice(0, amp);
|
||||
|
||||
let clean = '';
|
||||
for (let i = 0; i < raw.length; i++) {
|
||||
const ch = raw[i];
|
||||
const code = ch.charCodeAt(0);
|
||||
// '<27>' 或非可见 ASCII 视为乱码起点
|
||||
if (ch === '<27>' || code < 32 || code > 126) break;
|
||||
clean += ch;
|
||||
}
|
||||
if (!clean) return null;
|
||||
return clean;
|
||||
}
|
||||
|
||||
function renderQrFromResponse(data) {
|
||||
const box = $('qr-img-box');
|
||||
box.innerHTML = '';
|
||||
@@ -660,11 +814,17 @@
|
||||
let qrText = null;
|
||||
|
||||
if (data && typeof data === 'object') {
|
||||
if (data.qrUrl || data.qrcodeUrl || data.qr || data.url) {
|
||||
// 1) 优先用「微信登录链接」绘制二维码，扫码后才会唤起登录；Data62 是二进制数据，不能当二维码内容
|
||||
qrText = getWechatLoginUrlFromResponse(data);
|
||||
if (!qrText && (data.qrUrl || data.qrcodeUrl || data.qr || data.url)) {
|
||||
qrText = data.qrUrl || data.qrcodeUrl || data.qr || data.url;
|
||||
} else if (data.qrcode || data.qr_code) {
|
||||
}
|
||||
if (!qrText && (data.qrcode || data.qr_code)) {
|
||||
qrText = data.qrcode || data.qr_code;
|
||||
}
|
||||
if (!qrText) {
|
||||
qrText = extractQrTextFromObject(data);
|
||||
}
|
||||
if (!qrText) {
|
||||
const json = JSON.stringify(data, null, 2);
|
||||
const pre = document.createElement('pre');
|
||||
@@ -674,19 +834,24 @@
|
||||
pre.style.whiteSpace = 'pre-wrap';
|
||||
pre.style.wordBreak = 'break-all';
|
||||
box.appendChild(pre);
|
||||
$('qr-hint').textContent = '返回结果中未找到二维码字符串，请根据具体字段名在前端进行适配。';
|
||||
$('qr-hint').textContent =
|
||||
'当前接口返回中未包含可识别的二维码字符串，请检查上游服务是否已按文档返回 data= 或专门的二维码字段。';
|
||||
log('二维码接口返回（未能自动识别二维码字段）: ' + json, 'warn');
|
||||
return;
|
||||
}
|
||||
|
||||
} else if (typeof data === 'string') {
|
||||
qrText = data;
|
||||
}
|
||||
|
||||
log('用于生成二维码的 data= 内容: ' + qrText, 'ok');
|
||||
|
||||
const qrContainer = document.createElement('div');
|
||||
qrContainer.id = 'qr-code';
|
||||
box.appendChild(qrContainer);
|
||||
|
||||
try {
|
||||
// 使用前端 QRCode 库将登录链接渲染为二维码
|
||||
// 使用前端 QRCode 库将登录链接渲染为二维码（每次获取二维码后均根据后端返回数据刷新）
|
||||
// @ts-ignore
|
||||
new QRCode(qrContainer, {
|
||||
text: qrText,
|
||||
@@ -703,11 +868,25 @@
|
||||
fallback.style.wordBreak = 'break-all';
|
||||
box.appendChild(fallback);
|
||||
$('qr-hint').textContent = '二维码生成失败，请复制链接手动生成二维码。';
|
||||
log('二维码渲染失败: ' + (e && e.message ? e.message : e), 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// 根据扫码状态：扫完或过期时刷新二维码区域为「已过期」提示
|
||||
function showQrExpired(message) {
|
||||
const box = $('qr-img-box');
|
||||
if (!box) return;
|
||||
box.innerHTML = '';
|
||||
const placeholder = document.createElement('div');
|
||||
placeholder.className = 'qr-expired';
|
||||
placeholder.textContent = message || '二维码已过期，请重新获取';
|
||||
box.appendChild(placeholder);
|
||||
const hint = $('qr-hint');
|
||||
if (hint) hint.textContent = message || '二维码已过期，请点击「获取登录二维码」重新取码。';
|
||||
}
|
||||
|
||||
async function callApi(path, options = {}) {
|
||||
const url = '/api' + path.replace(/^\/api/, '');
|
||||
const url = API_BASE + path;
|
||||
const res = await fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
@@ -746,6 +925,13 @@
|
||||
log('获取二维码成功');
|
||||
renderQrFromResponse(data);
|
||||
updateLoginState('等待扫码 / 确认中', 'pending', '请在 60 秒内使用微信扫码。');
|
||||
// 启动自动轮询，每 5 秒检测一次扫码状态
|
||||
if (state.pollingScan) {
|
||||
clearInterval(state.pollingScan);
|
||||
}
|
||||
state.pollingScan = setInterval(() => {
|
||||
onCheckScanStatus(true);
|
||||
}, 5000);
|
||||
} catch (e) {
|
||||
log('获取二维码失败: ' + e.message, 'error');
|
||||
updateLoginState('二维码获取失败', 'offline', e.message || '');
|
||||
@@ -767,39 +953,41 @@
|
||||
log('扫码状态: ' + text);
|
||||
|
||||
const lower = text.toLowerCase();
|
||||
const obj = data && typeof data === 'object' ? data : {};
|
||||
const d = obj.Data && typeof obj.Data === 'object' ? obj.Data : obj;
|
||||
const stateVal = d.state ?? d.State;
|
||||
|
||||
// 显示最近一次返回的数据，方便复制
|
||||
const resultCard = $('result-card');
|
||||
const resultBody = $('result-body');
|
||||
if (resultCard && resultBody) {
|
||||
resultBody.textContent = text;
|
||||
resultCard.style.display = 'flex';
|
||||
}
|
||||
|
||||
// 自动识别「新设备验证」，展示滑块 iframe
|
||||
if (!state.sliderOpened && (text.includes('新设备') || lower.includes('new device'))) {
|
||||
// 后端返回滑块表单页 path（/auth/slider-form?…），iframe 加载后自动填充 Key/Data62/Original Ticket，提交到第三方 7765
|
||||
const sliderUrl = data.slider_url;
|
||||
if (sliderUrl && typeof sliderUrl === 'string') {
|
||||
state.sliderOpened = true;
|
||||
log('检测到新设备验证，打开内嵌滑块验证窗口。', 'warn');
|
||||
log('使用第三方滑块(7765)，参数已自动填充。', 'warn');
|
||||
const sliderCard = $('slider-card');
|
||||
const sliderFrame = $('slider-frame');
|
||||
if (sliderCard && sliderFrame) {
|
||||
sliderFrame.src = SLIDER_VERIFY_URL;
|
||||
const iframeSrc = sliderUrl.startsWith('/') ? (API_BASE + sliderUrl) : sliderUrl;
|
||||
sliderFrame.src = iframeSrc;
|
||||
sliderCard.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
if (lower.includes('\"state\":2') || /\"state\"\\s*:\\s*2/.test(lower)) {
|
||||
// state == 2 → 登录成功，跳转后端管理页
|
||||
if (stateVal === 2 || lower.includes('\"state\":2') || /\"state\"\\s*:\\s*2/.test(lower)) {
|
||||
updateLoginState('登录成功', 'ok', text);
|
||||
if (state.pollingScan) {
|
||||
clearInterval(state.pollingScan);
|
||||
state.pollingScan = null;
|
||||
}
|
||||
} else if (lower.includes('expired') || lower.includes('timeout')) {
|
||||
showQrExpired('登录成功，正在跳转…');
|
||||
window.location.href = 'manage.html';
|
||||
// state == 1 → 二维码失效 / 不可用（按你的规则）
|
||||
} else if (stateVal === 1 || lower.includes('\"state\":1') || /\"state\"\\s*:\\s*1/.test(lower)) {
|
||||
updateLoginState('二维码已过期，请重新获取', 'offline', text);
|
||||
if (state.pollingScan) {
|
||||
clearInterval(state.pollingScan);
|
||||
state.pollingScan = null;
|
||||
}
|
||||
showQrExpired('二维码已过期，请重新获取');
|
||||
} else {
|
||||
updateLoginState('扫码状态更新', 'pending', text);
|
||||
}
|
||||
@@ -877,41 +1065,20 @@
|
||||
$('btn-clear-log').addEventListener('click', () => {
|
||||
$('log-body').innerHTML = '';
|
||||
});
|
||||
const copyBtn = $('btn-copy-result');
|
||||
if (copyBtn) {
|
||||
copyBtn.addEventListener('click', async () => {
|
||||
const body = $('result-body');
|
||||
if (!body || !body.textContent) {
|
||||
alert('当前没有可复制的结果。');
|
||||
return;
|
||||
}
|
||||
const text = body.textContent;
|
||||
try {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
} else {
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text;
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
document.body.appendChild(textarea);
|
||||
textarea.focus();
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
log('扫码状态结果已复制到剪贴板。', 'ok');
|
||||
alert('结果已复制到剪贴板，可直接粘贴使用。');
|
||||
} catch (e) {
|
||||
log('复制结果到剪贴板失败: ' + e.message, 'error');
|
||||
alert('复制失败，请手动选择文本复制。');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
bindEvents();
|
||||
checkHealth();
|
||||
(function() {
|
||||
try {
|
||||
if (typeof localStorage !== 'undefined' && localStorage.getItem('wechat_key')) {
|
||||
var keyEl = $('key');
|
||||
if (keyEl && !keyEl.value.trim()) keyEl.value = localStorage.getItem('wechat_key');
|
||||
}
|
||||
$('key').addEventListener('change', function() { try { localStorage.setItem('wechat_key', this.value.trim()); } catch (_) {} });
|
||||
$('key').addEventListener('blur', function() { try { localStorage.setItem('wechat_key', this.value.trim()); } catch (_) {} });
|
||||
} catch (_) {}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user