更新上号系统需求文档，添加版本信息、项目概述、角色与权限、术语与规则及业务流程等内容，同时修改链接生成规则和请求拦截器以支持公开API的身份验证，新增路由配置以支持上号任务页面。
This commit is contained in:
zyh
141
test-play.html
Normal file
141
test-play.html
Normal file
@@ -0,0 +1,141 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user