142 lines
4.8 KiB
HTML
142 lines
4.8 KiB
HTML
<!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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
max-width: 600px;
|
||
margin: 50px auto;
|
||
padding: 20px;
|
||
background: #f5f5f5;
|
||
}
|
||
.test-container {
|
||
background: white;
|
||
padding: 30px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
h1 {
|
||
color: #333;
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
.test-link {
|
||
display: block;
|
||
background: #667eea;
|
||
color: white;
|
||
text-decoration: none;
|
||
padding: 15px 20px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
margin: 10px 0;
|
||
transition: background 0.3s ease;
|
||
}
|
||
.test-link:hover {
|
||
background: #5a6fd8;
|
||
}
|
||
.description {
|
||
background: #f8f9fa;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin: 15px 0;
|
||
border-left: 4px solid #667eea;
|
||
}
|
||
.note {
|
||
color: #666;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
}
|
||
.features {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
.features li {
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.features li:before {
|
||
content: "✓";
|
||
color: #28a745;
|
||
font-weight: bold;
|
||
margin-right: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="test-container">
|
||
<h1>🎮 用户端页面测试</h1>
|
||
|
||
<div class="description">
|
||
<h3>页面功能说明：</h3>
|
||
<ul class="features">
|
||
<li>支持链接状态识别（NEW/USING/LOGGED_IN/REFUNDED/EXPIRED）</li>
|
||
<li>选区界面：QQ区/微信区选择</li>
|
||
<li>扫码界面：二维码显示、倒计时、轮询上号状态</li>
|
||
<li>二界面：游戏进度显示、状态监控</li>
|
||
<li>错误处理：链接无效/过期/退单等状态处理</li>
|
||
<li>刷新机制：防止重复操作的冷却时间</li>
|
||
<li>响应式设计：支持移动端和桌面端</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>测试链接：</h3>
|
||
|
||
<a href="http://localhost:5173/play?code=66L8NM3L" class="test-link" target="_blank">
|
||
🔗 测试链接 1 - code=66L8NM3L
|
||
</a>
|
||
|
||
<a href="http://localhost:5173/play?code=SAMPLE123" class="test-link" target="_blank">
|
||
🔗 测试链接 2 - code=SAMPLE123
|
||
</a>
|
||
|
||
<a href="http://localhost:5173/play?code=INVALID" class="test-link" target="_blank">
|
||
🔗 测试链接 3 - code=INVALID (测试错误处理)
|
||
</a>
|
||
|
||
<div class="description">
|
||
<h3>测试步骤：</h3>
|
||
<ol>
|
||
<li>确保开发服务器运行在 localhost:5173</li>
|
||
<li>点击上面的测试链接</li>
|
||
<li>观察页面状态切换和UI表现</li>
|
||
<li>测试选区功能（需要后端API支持）</li>
|
||
<li>测试刷新和错误处理</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="description">
|
||
<h3>API端点说明：</h3>
|
||
<ul>
|
||
<li><code>GET /api/link/status?code={code}</code> - 获取链接状态</li>
|
||
<li><code>POST /api/link/select-region</code> - 选择区域</li>
|
||
<li><code>POST /api/link/refresh</code> - 刷新链接</li>
|
||
<li><code>GET /api/link/poll-login?code={code}</code> - 轮询登录状态</li>
|
||
<li><code>GET /api/link/progress?code={code}</code> - 获取游戏进度</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<p class="note">
|
||
⚠️ 注意：测试需要后端API支持，如果API未实现，页面会显示相应的错误信息。
|
||
</p>
|
||
</div>
|
||
|
||
<script>
|
||
// 检查开发服务器状态
|
||
fetch('http://localhost:5173/')
|
||
.then(() => {
|
||
console.log('✅ 开发服务器运行正常');
|
||
})
|
||
.catch(() => {
|
||
console.log('❌ 开发服务器未运行，请先启动: npm run dev');
|
||
document.querySelector('.note').innerHTML =
|
||
'❌ 开发服务器未运行，请先在项目目录运行: <code>npm run dev</code>';
|
||
document.querySelector('.note').style.color = '#dc3545';
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|