mirror of
https://github.com/NeteaseCloudMusicApiEnhanced/api-enhanced.git
synced 2026-03-21 11:03:15 +00:00
MoeFurina
c2871322d0
- Enhanced styling for better user experience on qrlogin-nocookie.html and qrlogin.html - Added loading indicators and improved status messages during QR code login process - Updated error handling for login status retrieval - Refactored unblock_test.html for better layout and user interaction - Improved voice upload page with a more intuitive design and better feedback for file uploads - Added loading state management for voice list retrieval - Enhanced accessibility and usability across all modified pages
200 lines
4.8 KiB
HTML
200 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>二维码登录</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 48px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
max-width: 450px;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.qr-wrapper {
|
||
display: inline-block;
|
||
padding: 16px;
|
||
background: #f9f9f9;
|
||
border-radius: 8px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
#qrImg {
|
||
width: 200px;
|
||
height: 200px;
|
||
display: block;
|
||
}
|
||
|
||
.info {
|
||
text-align: left;
|
||
padding: 16px;
|
||
background: #f9f9f9;
|
||
border-radius: 6px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 12px;
|
||
color: #666;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.status {
|
||
margin-top: 16px;
|
||
padding: 12px;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status.waiting {
|
||
background: #fef3c7;
|
||
color: #92400e;
|
||
}
|
||
|
||
.status.success {
|
||
background: #d1fae5;
|
||
color: #065f46;
|
||
}
|
||
|
||
.status.error {
|
||
background: #fee2e2;
|
||
color: #991b1b;
|
||
}
|
||
|
||
.hint {
|
||
margin-top: 16px;
|
||
font-size: 13px;
|
||
color: #999;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<h1>二维码登录</h1>
|
||
<p class="subtitle">使用网易云音乐App扫描二维码登录</p>
|
||
|
||
<div class="qr-wrapper">
|
||
<img id="qrImg" src="" alt="二维码加载中..." />
|
||
</div>
|
||
|
||
<div id="status" class="status waiting">等待扫描...</div>
|
||
|
||
<div id="info" class="info"></div>
|
||
|
||
<p class="hint">请打开网易云音乐App，扫描上方二维码完成登录</p>
|
||
</div>
|
||
|
||
<script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
|
||
<script>
|
||
async function login() {
|
||
let timer
|
||
const statusDiv = document.getElementById('status')
|
||
const cookie = localStorage.getItem('cookie')
|
||
|
||
updateStatus('加载二维码...', 'waiting')
|
||
getLoginStatus(cookie)
|
||
|
||
try {
|
||
const res = await axios({
|
||
url: `/login/qr/key?timestamp=${Date.now()}`,
|
||
})
|
||
const key = res.data.data.unikey
|
||
|
||
const res2 = await axios({
|
||
url: `/login/qr/create?key=${key}&platform=web&qrimg=true×tamp=${Date.now()}&ua=pc`,
|
||
})
|
||
document.querySelector('#qrImg').src = res2.data.data.qrimg
|
||
updateStatus('请扫描二维码', 'waiting')
|
||
|
||
timer = setInterval(async () => {
|
||
const statusRes = await checkStatus(key)
|
||
if (statusRes.code === 800) {
|
||
updateStatus('二维码已过期，请刷新页面', 'error')
|
||
clearInterval(timer)
|
||
} else if (statusRes.code === 801) {
|
||
updateStatus('二维码已扫描，请在手机上确认', 'waiting')
|
||
} else if (statusRes.code === 802) {
|
||
updateStatus('登录成功，正在保存信息...', 'waiting')
|
||
} else if (statusRes.code === 803) {
|
||
clearInterval(timer)
|
||
updateStatus('授权登录成功！', 'success')
|
||
await getLoginStatus(statusRes.cookie)
|
||
localStorage.setItem('cookie', statusRes.cookie)
|
||
}
|
||
}, 3000)
|
||
} catch (error) {
|
||
console.error('登录失败:', error)
|
||
updateStatus('二维码加载失败，请刷新页面重试', 'error')
|
||
}
|
||
}
|
||
|
||
async function checkStatus(key) {
|
||
const res = await axios({
|
||
url: `/login/qr/check?key=${key}×tamp=${Date.now()}&ua=pc`,
|
||
})
|
||
return res.data
|
||
}
|
||
|
||
async function getLoginStatus(cookie = '') {
|
||
try {
|
||
const res = await axios({
|
||
url: `/login/status?timestamp=${Date.now()}&ua=pc`,
|
||
method: 'post',
|
||
data: {
|
||
cookie,
|
||
},
|
||
})
|
||
document.querySelector('#info').textContent = JSON.stringify(res.data, null, 2)
|
||
} catch (error) {
|
||
console.error('获取登录状态失败:', error)
|
||
}
|
||
}
|
||
|
||
function updateStatus(message, type) {
|
||
const statusDiv = document.getElementById('status')
|
||
statusDiv.textContent = message
|
||
statusDiv.className = 'status ' + type
|
||
}
|
||
|
||
login()
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|