235 lines
12 KiB
HTML
235 lines
12 KiB
HTML
<div class="mb-6 flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<a href="/admin/robots/{{.Robot.ID}}" class="text-gray-500 hover:text-gray-700 mr-4">
|
||
<i class="fas fa-arrow-left"></i>
|
||
</a>
|
||
<h1 class="text-2xl font-semibold text-gray-800">微信登录</h1>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="max-w-md mx-auto">
|
||
{{if .IsError}}
|
||
<div class="mb-4 bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
|
||
<div class="flex">
|
||
<div class="flex-shrink-0">
|
||
<i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i>
|
||
</div>
|
||
<div class="ml-3">
|
||
<p>{{.Message}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
|
||
<div class="clean-card overflow-hidden shadow-md rounded-lg">
|
||
<div class="p-6 flex flex-col items-center">
|
||
{{if .IsOnline}}
|
||
<!-- 已在线状态 -->
|
||
<div class="flex flex-col items-center mb-6">
|
||
<div class="relative mb-4">
|
||
<div class="w-24 h-24 rounded-full overflow-hidden border-4 shadow-lg flex items-center justify-center">
|
||
<img src="{{.Robot.Avatar}}" alt="WeChat Avatar" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="absolute bottom-0 right-0 bg-green-500 w-6 h-6 rounded-full border-2 border-white flex items-center justify-center">
|
||
<i class="fas fa-check text-white text-xs"></i>
|
||
</div>
|
||
</div>
|
||
<h3 class="text-xl font-medium text-gray-800">{{.Robot.Nickname}}</h3>
|
||
<div class="mt-2 px-4 py-1.5 bg-green-50 rounded-full">
|
||
<span class="inline-flex items-center text-sm font-medium text-green-700">
|
||
<i class="fas fa-check-circle mr-1.5"></i>
|
||
微信已在线，无需登录
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-full flex justify-center mt-4">
|
||
<a href="/admin/robots/{{.Robot.ID}}" class="py-2 px-6 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 transition-colors">
|
||
返回机器人详情
|
||
</a>
|
||
</div>
|
||
{{else if .IsAwaken}}
|
||
<!-- 唤醒登录模式 -->
|
||
<div class="flex flex-col items-center mb-6">
|
||
<div class="relative mb-4">
|
||
<div class="w-24 h-24 rounded-full overflow-hidden border-4 border-white shadow-lg flex items-center justify-center bg-blue-50">
|
||
<img src="{{.Robot.Avatar}}" alt="WeChat Avatar" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="absolute bottom-0 right-0 bg-blue-500 w-6 h-6 rounded-full border-2 border-white flex items-center justify-center animate-pulse">
|
||
<i class="fas fa-bell text-white text-xs"></i>
|
||
</div>
|
||
</div>
|
||
<h3 class="text-xl font-medium text-gray-800">{{.Robot.Nickname}}</h3>
|
||
<p class="text-sm text-gray-500 mt-1">请在手机上确认登录</p>
|
||
</div>
|
||
|
||
<div id="login-status" class="text-center mb-6">
|
||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
|
||
<span class="relative flex h-3 w-3 mr-2">
|
||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
|
||
<span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
|
||
</span>
|
||
正在唤醒
|
||
</span>
|
||
</div>
|
||
|
||
<div class="text-center mb-6">
|
||
<div class="inline-block">
|
||
<div class="flex space-x-2">
|
||
<div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0s"></div>
|
||
<div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
|
||
<div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-full flex justify-between">
|
||
<a href="/admin/robots/{{.Robot.ID}}" class="py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
|
||
取消
|
||
</a>
|
||
<a href="/admin/robots/{{.Robot.ID}}/login?qrcode=1" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 transition-colors">
|
||
使用二维码
|
||
</a>
|
||
</div>
|
||
{{else}}
|
||
<!-- 二维码登录模式 -->
|
||
<div class="border border-gray-200 rounded-lg p-3 mb-6 bg-white">
|
||
<img src="{{.QRCode}}" alt="Login QR Code" class="w-64 h-64">
|
||
</div>
|
||
|
||
<div id="login-status" class="text-center mb-4">
|
||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
|
||
<span class="relative flex h-3 w-3 mr-2">
|
||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
|
||
<span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
|
||
</span>
|
||
等待扫描
|
||
</span>
|
||
</div>
|
||
|
||
<p class="text-sm text-gray-500 mb-4 text-center">
|
||
请打开微信，使用"扫一扫"功能扫描上方二维码登录
|
||
</p>
|
||
|
||
<div id="timer" class="text-sm text-gray-500 mb-5">
|
||
二维码有效期: <span id="countdown">120</span>秒
|
||
</div>
|
||
|
||
<div class="w-full flex justify-between">
|
||
<a href="/admin/robots/{{.Robot.ID}}" class="py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
|
||
取消
|
||
</a>
|
||
<a href="/admin/robots/{{.Robot.ID}}/login" id="refresh-qrcode" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 transition-colors hidden">
|
||
刷新二维码
|
||
</a>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
</div>
|
||
|
||
<p class="text-center text-sm text-gray-500 mt-6">
|
||
<i class="fas fa-info-circle mr-1"></i> 请确保手机与电脑在同一网络环境
|
||
</p>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
{{if not .IsOnline}}
|
||
const loginStatus = document.getElementById('login-status');
|
||
const refreshQrcode = document.getElementById('refresh-qrcode');
|
||
let secondsLeft = 120;
|
||
let countdown = document.getElementById('countdown');
|
||
|
||
// 检查登录状态
|
||
function checkLoginStatus() {
|
||
fetch(`/admin/robots/{{.Robot.ID}}/check-qrcode?uuid={{.UUID}}`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
// 扫码阶段：0-未扫描, 1-已扫描未确认, 2-已登录
|
||
if (data.status === 0) {
|
||
loginStatus.innerHTML = `
|
||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
|
||
<span class="relative flex h-3 w-3 mr-2">
|
||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
|
||
<span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
|
||
</span>
|
||
{{if .IsAwaken}}正在唤醒{{else}}等待扫描{{end}}
|
||
</span>
|
||
`;
|
||
} else if (data.status === 1) {
|
||
loginStatus.innerHTML = `
|
||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
|
||
<span class="relative flex h-3 w-3 mr-2">
|
||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span>
|
||
<span class="relative inline-flex rounded-full h-3 w-3 bg-yellow-500"></span>
|
||
</span>
|
||
已扫描，等待确认
|
||
</span>
|
||
`;
|
||
} else if (data.status === 99 && data.userInfo && Object.keys(data.userInfo).length > 0) {
|
||
loginStatus.innerHTML = `
|
||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
|
||
<i class="fas fa-check-circle mr-1"></i>
|
||
登录成功
|
||
</span>
|
||
`;
|
||
|
||
clearInterval(timerInterval);
|
||
clearInterval(statusCheckInterval);
|
||
|
||
// 延迟一下再跳转，让用户有时间看到成功状态
|
||
setTimeout(() => {
|
||
window.location.href = `/admin/robots/{{.Robot.ID}}`;
|
||
}, 1500);
|
||
}
|
||
} else if (data.expired) {
|
||
loginStatus.innerHTML = `
|
||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
|
||
<i class="fas fa-times-circle mr-1"></i>
|
||
{{if .IsAwaken}}唤醒失败{{else}}二维码已过期{{end}}
|
||
</span>
|
||
`;
|
||
|
||
clearInterval(timerInterval);
|
||
clearInterval(statusCheckInterval);
|
||
|
||
// 显示刷新按钮
|
||
if (refreshQrcode) {
|
||
refreshQrcode.classList.remove('hidden');
|
||
}
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
});
|
||
}
|
||
|
||
// 每3秒检查一次状态
|
||
const statusCheckInterval = setInterval(checkLoginStatus, 3000);
|
||
|
||
// 立即执行一次检查
|
||
checkLoginStatus();
|
||
|
||
{{if not .IsAwaken}}
|
||
// 开始倒计时
|
||
const timerInterval = setInterval(() => {
|
||
secondsLeft--;
|
||
if (countdown) {
|
||
countdown.textContent = secondsLeft;
|
||
}
|
||
|
||
if (secondsLeft <= 0) {
|
||
clearInterval(timerInterval);
|
||
|
||
// 显示刷新按钮
|
||
if (refreshQrcode) {
|
||
refreshQrcode.classList.remove('hidden');
|
||
}
|
||
}
|
||
}, 1000);
|
||
{{end}}
|
||
{{end}}
|
||
});
|
||
</script>
|