diff --git a/docs/需求文档.md b/docs/需求文档.md
index 378a934..16e34bc 100644
--- a/docs/需求文档.md
+++ b/docs/需求文档.md
@@ -1,21 +1,288 @@
-明白✅
+# 上号系统需求文档（PRD/SRS）v0.9
 
-1. 二界面 URL 模板
-   我已把配置改成：**`域名/{codeNo}`**（文档已更新为 `https://你的域名/{codeNo}`，按运行环境替换域名即可）。
+> 基于《安装步骤.docx》与用户确认的补充说明整理。本文作为首版“可评审草案”，确认后进入详细设计与开发。
 
-2. 关于 `http://36.138.184.60:12345/编号/二维码.png`
-   这个是“**脚本端**”暴露出来的**静态图片**地址——**正常情况下会直接返回 PNG 图片**。如果你在页面里看不到图，常见原因有：
+---
+
+## 0. 版本信息
+
+* 文档版本：v0.9（草案）
+* 更新时间：2025-08-23
+* 负责人：待定
+* 评审人：待定
+* 目标里程碑：首版上线（TBD）
+
+---
+
+## 1. 项目概述
+
+### 1.1 背景
+
+提供“上号任务”的一站式系统，生成带签名与加密的用户链接，用户进入后进行选区、扫码上号、实时进度与二界面跳转；面向商家（管理员、代理商）提供链接批量生成与额度（点数）管理、退单与公告等功能。
+
+### 1.2 目标
+
+* 终端用户侧：通过单个加密链接完成选区 → 扫码上号 → 进入二界面。
+* 商家侧：
+
+  * 管理员：创建代理商账号、为代理商添加点数（余额）、批量生成链接、退单、公告管理、数据导出。
+  * 代理商：查看自身额度、批量生成链接、退单、数据导出、查看公告。
+
+### 1.3 不在范围（本期）
+
+* 对账、统计、风控（均不做）。
+* 富文本公告、多语言、公告定时上线下线。
+* 数据导入（仅导出）。
+
+---
+
+## 2. 角色与权限
+
+* **终端用户**：仅访问加密链接完成流程。
+* **管理员**：代理商管理（创建/启停/加点）、批量生成链接、退单、公告发布、导出。
+* **代理商**：批量生成链接（前提是额度充足）、退单、导出、查看公告。
+
+### 2.1 权限矩阵（简表）
+
+| 功能         | 终端用户 | 代理商     | 管理员    |
+| ---------- | ---- | ------- | ------ |
+| 访问加密链接进行上号 | ✔️   | —       | —      |
+| 批量生成链接     | —    | ✔️      | ✔️     |
+| 查看/导出链接    | —    | ✔️（仅自己） | ✔️（全量） |
+| 退单         | —    | ✔️（仅自己） | ✔️（全量） |
+| 公告查看       | —    | ✔️      | ✔️     |
+| 公告发布       | —    | —       | ✔️     |
+| 代理商账号管理/加点 | —    | —       | ✔️     |
+
+---
+
+## 3. 术语与规则
+
+* **链接（Link）**：一次任务的入口地址，带签名与加密；默认有效期 **24 小时**（可配）。
+* **编号（CodeNo）**：由后端自动生成，**全局唯一**、可追踪；用于日志与二界面模板替换。
+* **数量（Quantity）**：一次执行产生的奖励数，例如 50。
+* **次数（Times）**：重复执行次数，例如 20。
+* **总点数（TotalPoints）**：`Times × Quantity`，例如 20×50=1000。
+* **批量生成**：同一组设置一次生成 N 个链接（默认 10 个，可配）。
+* **二界面**：外部提供的页面或资源，系统在上号成功后 **用编号动态替换**后跳转。
+* **脚本端**：运行在手机上的脚本与相关资源（例如二维码图片、进度截图、上号判断等），由系统通过适配器服务进行对接。
+
+---
+
+## 4. 业务流程
+
+### 4.1 链接生命周期（简述）
+
+1. 商家侧生成链接：校验额度 → 扣减点数（`Times×Quantity`）→ 生成编号 → 生成**加密+签名**链接 → 设置过期时间（24h）。
+2. 终端用户访问链接：若未过期，进入“选区→扫码上号”流程；成功则跳转二界面；若退单或过期则提示不可用。
+3. 退单：释放机器（不回滚额度），记录日志。
+
+### 4.2 终端用户流程（含二次识别/刷新约束）
+
+* **首次进入**：
+
+  1. 选区（安卓QQ/安卓WX）。
+  2. 触发脚本端生成二维码；前端按返回的 `qrCreatedAt/qrExpireAt` 本地计算倒计时并轮询上号状态。
+  3. 上号成功 → 跳转二界面（按模板替换编号）。
+* **未进入二界面即退出/刷新/返回**：
+
+  * 规则：**必须先调用“刷新”接口** → 等待 **Y 秒（默认 10s，可配）** → 才允许再次选区与扫码。
+
+### 4.3 退单流程
+
+* 商家提交编号 → 系统释放关联机器（若有）→ 标记退单 → 记录日志；额度**不回滚**。
+
+### 4.4 扣费时机与计算
+
+* **生成链接时即扣费**：`扣减点数 = Times × Quantity × 批量个数`。
+* 额度不足：拒绝生成。
+
+### 4.5 公告
+
+* 简单文本公告（可配置是否展示、展示位置），无定时/富文本/多语言。
+
+### 4.6 用户端（扫码登录）规范（单链接模式 · 定稿）
+
+> 本节**仅**描述用户访问与后端处理逻辑；不涉及商家功能。**一切界面都在同一 URL**：`https://yourdomain.com/play?code={codeNo}`。前端通过该 URL 内的 `code` 调用后端查询状态并渲染对应页面（首界面/扫码界面/二界面）。
+
+#### 4.6.1 URL 与安全
+
+* 入口：`GET https://yourdomain.com/play?code={opaque}`，`code` 为**加密+签名**的**不透明**令牌（包含 linkId/iat/exp 等），不可被推断。
+* 后端在**每次**接口调用时校验：解密→签名→有效期（默认 24h）→状态；失败返回 401/403/410（过期）。
+
+#### 4.6.2 状态模型（后端对前端暴露）
+
+* `NEW`：未进入扫码流程（未选区）。
+* `USING`：已进入扫码流程（已选区，二维码有效期内）。
+* `LOGGED_IN`：已上号（展示二界面）。
+* `REFUNDED`：已退单（不可用）。
+* `EXPIRED`：已过期（24h）。
+* `needRefresh: boolean`：是否必须先刷新→等待 10 秒→再允许选区与扫码（只要进入过扫码但未到二界面时生效）。
+
+#### 4.6.3 用户端 API（仅用户用）
+
+> 路径示例以 `/api/link/*` 说明；实际以最终路由为准。
+
+1. **获取状态**
+   `GET /api/link/status?code={code}` →
+
+```json
+{
+  "status": "NEW | USING | LOGGED_IN | REFUNDED | EXPIRED",
+  "needRefresh": false,
+  "region": "Q | V | null",
+  "qr": { "url": "http://ip:12345/{编号}/二维码.png", "createdAt": 1730000000000, "expireAt": 1730000060000 },
+  "view": "FIRST | SCAN | SECOND",          
+  "assets": {                                
+    "base": "http://ip:12345/{编号}/",       
+    "firstHome": "首次主页.png",             
+    "firstBonus": "首次赏金.png",            
+    "midBonus": "中途赏金.png",              
+    "endBonus": "结束赏金.png"               
+  }
+}
+```
+
+* 说明：
+
+  * `qr` 仅在 `status=USING` 时返回；若脚本端无 TTL，后端以默认 **60s** 回填。
+  * `view` 是前端渲染建议：`FIRST(选区) / SCAN(扫码) / SECOND(二界面)`；实际以 `status/needRefresh` 为准。
+  * `assets` 为二界面所需的静态资源信息（路径中需要自动替换编号）。
+
+2. **选区**
+   `POST /api/link/select-region`
+   Body: `{ code: string, region: "Q" | "V" }` → 返回：
+
+```json
+{
+  "status": "USING",
+  "needRefresh": false,
+  "qr": { "url": "http://ip:12345/{编号}/二维码.png", "createdAt": 1730000000000, "expireAt": 1730000060000 }
+}
+```
+
+* 后端行为：按需分配机器、下发任务参数、请求脚本端生成二维码；将状态置为 `USING`。
+
+3. **刷新**
+   `POST /api/link/refresh`
+   Body: `{ code: string }` → 返回：
+
+```json
+{ "needRefresh": true, "waitSeconds": 10 }
+```
+
+* 规则：**未到二界面前**，再次尝试必须先刷新并在前端**等待 10 秒**后才允许重新选区与扫码。
+
+4. **轮询上号**
+   `GET /api/link/poll-login?code={code}` →
+
+* 未上号：`{ "success": false, "status": "USING" }`
+* 已上号：
+
+```json
+{ "success": true, "status": "LOGGED_IN", "view": "SECOND", "assets": { "base": "http://ip:12345/{编号}/", "endBonus": "结束赏金.png" } }
+```
+
+* 前端据返回改为渲染**二界面**（同一个 URL，不跳转）。
+
+> 可选：`GET /api/link/qr.png?code={code}` 由后端代理二维码，确保整链路 HTTPS，避免浏览器混合内容拦截。
+
+#### 4.6.4 前端渲染流程（同一路由）
+
+1. **首访**：调用 `/api/link/status` 渲染：
+
+   * `NEW` → 显示选区页（两个按钮 Q/V）。
+   * `USING` → 显示扫码页（二维码+倒计时），并开始轮询 `/poll-login`（每 1s）。
+   * `LOGGED_IN` → 显示二界面（依 `assets` 取图/信息）。
+   * `REFUNDED/EXPIRED` → 显示不可用页。
+2. **选区**：`POST /select-region` 成功后进入扫码页，开始轮询。
+3. **二维码过期**：倒计时到 0 或轮询返回需刷新 → 显示“请刷新”按钮；调用 `/refresh` 并禁用按钮 **10s**，倒计时结束后恢复“选区”按钮。
+4. **上号成功**：轮询返回 `LOGGED_IN` → 在**同一 URL** 切换到二界面视图；前端可停止所有轮询与倒计时。
+
+#### 4.6.5 后端内部处理要点
+
+* **校验**：对所有接口按 `code` 做鉴权（签名/解密/过期/撤销/退单）。
+* **状态流转**：
+
+  * `NEW → USING`：选区成功并生成二维码。
+  * `USING → LOGGED_IN`：脚本端返回“已上号”。
+  * `NEW/USING → REFUNDED | EXPIRED`：退单或超时达 24h。
+* **刷新约束**：对进入过扫码但未上号的会话，标记 `needRefresh=true`；`/refresh` 后写入“刷新时间”，后续 **10s** 内拒绝 `select-region`。
+* **脚本端适配**：分配/释放机器、生成二维码、查询“是否上号”、可选的分数读取；超时重试与错误兜底（不把脚本端错误直接暴露给前端）。
+* **幂等**：`select-region`/`refresh`/`poll-login` 按 `code` 幂等处理，避免重复侧效应。
+* **日志**：记录编号、选区、二维码下发/失效、上号结果、刷新与错误（保留 90 天）。
+
+#### 4.6.6 错误与前端文案（示例）
+
+* 401/403：链接无效或已篡改 → “链接无效，请联系商家”。
+* 410：链接已过期 → “链接已过期，请联系商家重新获取”。
+* 423：需刷新等待 → “请先刷新并等待 10 秒后再试”。
+* 504：脚本端超时 → “当前排队人数较多，请稍后重试”。
+
+> 以上约束确保“同一链接承载首界面/扫码/二界面”的产品体验，前端仅根据后端状态渲染视图，无需路由跳转。
+
+
+
+次数链接
+http://36.138.184.60:1234/yijianwan_netfile/saveMsg?文件名=总次数&编号=次数
+
+后台操作流程: 后台管理员在后台输入框里面填写了一个次数5, 然后点击了生成, 平台会自动生成一个链接,格式如同:域名/加密
+
+批量生成可以搞成下载文件或者复制粘贴都可以
+
+后台功能:
+1.后台可以直接单生成链接或者批量生成链接给用户使用如图
+2.代理系统, 代理也可单独生成链接或批量生成, 后台可帮他设置金额, 代理使用多少，自动扣除多少
+3.退单: 后台只需填写正确的编号运行退单链接，即可直接退单
+4.用户选区之后等待几秒 出现二维码到期时间 刷新时间 用户使用有效期 设置
+5.次数等于数量 设置
+6.可以设置公告弹窗, 代理也可以自己生成自己的, 不会互通!  只有确定和取消按钮，点确定会跳转某网页
+
+退单链接() 
+http://36.138.184.60:1234/yijianwan_netfile/saveMsg?文件名=判断退单&编号=T
+
+第一步；用户界面 1和2
+2
+判断空的设备链接 
+http://36.138.184.60:1234/yijianwan_netfile/readAllMsg?文件名=判断分数
+
+选区链接
+http://36.138.184.60:1234/yijianwan_netfile/saveMsg?文件名=判断系统&编号=Q或V
+
+刷新链接
+http://36.138.184.60:1234/yijianwan_netfile/saveMsg?文件名=判断刷新&编号=刷新
+
+二维码的http://36.138.184.60:12345/编号/二维码.png
+
+判断是否上号
+http://36.138.184.60:1234/yijianwan_netfile/readMsg?文件名=判断上号&对象名=编号  状态: 未上号 已上号 【已上号跳转第二个界面】
+
+讲解:后台生成了一个链接，填写了次数, 用户拿到链接之后，在浏览器运行, 后台会自动获取一个空的编号, 然后用户可以自己选QQ区或微信区, 如果用户选择QQ区，那么直接执行选区链接执行QQ的, 微信也一样, 根据后台设置的等待，几秒后获取二维码链接 如同第三张图, 点击之后你可以观看第三张图，有一个倒数时间，也可在后台设置时间, 如果用户在我设置的60秒内没扫码，自动会跳出扫码超时,如第二张图, 用户可以继续选区, 后台会首先执行刷新链接, 然后根据后台设置的刷新时间，等待多少秒后再执行选择QQ区或微信区的链接, 根据用户选择, 作者可以写一个日志或者其他把把这个些链接的使用流程记录下来，方便第二次识别, 
+
+假如:用户他第一次已经选过了区，但是他直接第二次刷新了浏览器, 导致没办法确认我后台对接的脚本是否在首页,  所以作者必须写个记录, 来判断这个链接是否被使用过一次，如果被使用过一次, 那么用户不管是刷新浏览器，还是等待超时扫码, 都判定为第二次! 所以必须先执行刷新根据后台设计的时间等待 再选区!
+
+用户只要选区了，出现了二维码，那么后台只需要一直识别判断它是否上号那条链接，如果出现已上号，那么直接跳转第二个界面，未上号就一直在第一个界面!
+
+
+
+用户扫码后跳转的:第二个界面
+
+
+
+②http://36.138.184.60:12345/编号/首次主页.png 
+③http://36.138.184.60:12345/编号/首次赏金.png 
+④http://36.138.184.60:12345/编号/中途赏金.png 
+⑤http://36.138.184.60:12345/编号/结束赏金.png
+
+讲解:
+1.选择大厅这个就是用户自己选的区域显示
+2.状态=已打完 空闲, 只要显示这两个状态，余地都是已打完，其他都是代练中
+3.目标点数0/1000如图1000就是后台设置的次数x次数等于数量=1000 [假如后台设置的次数等于总量为50,那么必须设置20次才等于1000
+
+使用过的所有链接总有效期为24小时 可设置
+
+目标点数
+ http://36.138.184.60:1234/yijianwan_netfile/readMsg?文件名=判断分数&对象名=编号
 
-* **混合内容被拦截**：你的前端如果是 **HTTPS**，而这张图是 **HTTP**，浏览器会拦截（安全策略）。
-  解决：给 `36.138.184.60:12345` 配 **HTTPS**，或让后端提供一个 **HTTPS 代理端点**（例如：`GET /api/link/{token}/qr.png`）去转发这张图片，前端只请求自己的 HTTPS 域名即可。（我已在文档里加了这条注意事项）
-* **二维码尚未生成 / 已过期**：脚本端还没把 `二维码.png` 写到对应 `编号/` 目录，或已被轮转清理 → 会 404 或显示旧图。
-  解决：确保先触发“生成二维码”动作，并用返回的 `createdAt/expireAt` 做本地倒计时；必要时加 `?t=时间戳` 防缓存。
-* **编号不匹配**：前端用的 `编号` 与实际分配的机器编号不同。
-  解决：以后端返回的 `machineId/编号` 为准。
-* **端口/防火墙**：12345 端口未对外放通或临时不可达。
-  解决：主机/网关放行该端口并做健康检查。
-* **跨域非问题**：`<img>` 加载图片不受 CORS 限制，但若被混合内容拦截，同样会显示不出。
 
-如果你愿意最省心的做法：我们在后端新增一个**图片代理接口**（HTTPS），前端统一拿这个接口的 URL，当脚本端换 IP/端口或做 HTTPS，这边都不用改前端。
 
-需要的话我可以顺手把这个代理端点的 Spring Boot 代码骨架也给你（带缓存/超时/错误降级）。
diff --git a/src/api/play.js b/src/api/play.js
new file mode 100644
index 0000000..4a98c1e
--- /dev/null
+++ b/src/api/play.js
@@ -0,0 +1,47 @@
+import http from '@/plugins/http'
+
+/**
+ * 用户端游戏页面 API
+ */
+
+// 获取链接状态
+export function getLinkStatus(code) {
+  return http.get('/api/link/status', {
+    params: { code }
+  })
+}
+
+// 选择区域
+export function selectRegion(payload) {
+  // payload: { code: string, region: string }
+  return http.post('/api/link/select-region', payload)
+}
+
+// 刷新链接
+export function refreshLink(code) {
+  return http.post('/api/link/refresh', {
+    code
+  })
+}
+
+// 轮询登录状态
+export function pollLoginStatus(code) {
+  return http.get('/api/link/poll-login', {
+    params: { code }
+  })
+}
+
+// 获取游戏进度
+export function getGameProgress(code) {
+  return http.get('/api/link/progress', {
+    params: { code }
+  })
+}
+
+// 获取二维码图片（可选，用于代理二维码避免混合内容问题）
+export function getQRCode(code) {
+  return http.get('/api/link/qr.png', {
+    params: { code },
+    responseType: 'blob'
+  })
+}
diff --git a/src/config/links.js b/src/config/links.js
index ca728ce..6d9465d 100644
--- a/src/config/links.js
+++ b/src/config/links.js
@@ -3,7 +3,7 @@
 // 链接地址生成规则
 export const LINK_CONFIG = {
   // 基础域名
-  BASE_URL: 'https://yourdomain.com',
+  BASE_URL: 'http://localhost:5173',
   
   // 游戏页面路径
   GAME_PATH: '/play',
diff --git a/src/plugins/http.js b/src/plugins/http.js
index 705d358..ed6740a 100644
--- a/src/plugins/http.js
+++ b/src/plugins/http.js
@@ -27,11 +27,22 @@ function onRefreshed(newToken, tokenType) {
 // 请求拦截：附加 Authorization
 http.interceptors.request.use(
   (config) => {
-    const token = getAccessToken()
-    const type = getTokenType()
-    if (token) {
-      config.headers = config.headers || {}
-      config.headers.Authorization = `${type} ${token}`
+    // 跳过公开API的身份验证（只跳过用户端游戏相关的公开接口）
+    const publicAPIs = [
+      '/api/link/status',
+      '/api/link/select-region', 
+      '/api/link/poll-login',
+      '/api/link/progress'
+    ]
+    const isPublicAPI = publicAPIs.some(api => config.url?.includes(api))
+    
+    if (!isPublicAPI) {
+      const token = getAccessToken()
+      const type = getTokenType()
+      if (token) {
+        config.headers = config.headers || {}
+        config.headers.Authorization = `${type} ${token}`
+      }
     }
     return config
   },
@@ -58,10 +69,17 @@ http.interceptors.response.use(
     const status = response?.status
     const url = config?.url || ''
 
-    // 避免对登录/刷新自身进行重复刷新
+    // 避免对登录/刷新自身和公开API进行重复刷新
     const isAuthPath = /\/auth\/(login|refresh)/.test(url || '')
+    const publicAPIs = [
+      '/api/link/status',
+      '/api/link/select-region', 
+      '/api/link/poll-login',
+      '/api/link/progress'
+    ]
+    const isPublicAPI = publicAPIs.some(api => url?.includes(api))
 
-    if (status === 401 && !isAuthPath) {
+    if (status === 401 && !isAuthPath && !isPublicAPI) {
       if (!isRefreshing) {
         isRefreshing = true
         try {
diff --git a/src/router/index.js b/src/router/index.js
index 5023d92..010506d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -14,10 +14,12 @@ const Settings = () => import('@/views/settings/Settings.vue')
 const LinkGenerate = () => import('@/views/links/LinkGenerate.vue')
 const ErrorTest = () => import('@/views/ErrorTest.vue')
 const PermissionTest = () => import('@/views/PermissionTest.vue')
+const Play = () => import('@/views/Play.vue')
 const NotFound = () => import('@/views/NotFound.vue')
 
 export const routes = [
   { path: '/login', name: 'Login', component: Login, meta: { public: true, title: '登录' } },
+  { path: '/play', name: 'Play', component: Play, meta: { public: true, title: '上号任务' } },
   {
     path: '/',
     component: AdminLayout,
diff --git a/src/views/Play.vue b/src/views/Play.vue
new file mode 100644
index 0000000..782ce92
--- /dev/null
+++ b/src/views/Play.vue
@@ -0,0 +1,1171 @@
+<template>
+  <div class="play-container">
+    <!-- 加载状态 -->
+    <div v-if="state.loading" class="loading-overlay">
+      <div class="loading-spinner"></div>
+      <p>加载中...</p>
+    </div>
+
+    <!-- 选区界面 -->
+    <div v-else-if="state.status === 'NEW' && !state.needRefresh" class="select-region-page">
+      <div class="page-header">
+        <h1 class="title">请选择您的账号类型</h1>
+      </div>
+      
+      <div class="region-buttons">
+        <button 
+          @click="selectRegion('Q')" 
+          class="region-btn qq-btn"
+          :disabled="state.submitting"
+        >
+          <div class="btn-icon">Q</div>
+          <span class="btn-text">QQ区</span>
+        </button>
+        
+        <button 
+          @click="selectRegion('V')" 
+          class="region-btn wx-btn"
+          :disabled="state.submitting"
+        >
+          <div class="btn-icon">V</div>
+          <span class="btn-text">微信区</span>
+        </button>
+      </div>
+
+      <div class="notice-text">
+        <p>代理技术代练平台操作中</p>
+        <p>绝对安全保障！请耐心等待</p>
+        <p>温馨提示: 请选择正确区域</p>
+      </div>
+    </div>
+
+    <!-- 扫码界面 -->
+    <div v-else-if="state.status === 'USING'" class="scan-page">
+      <div class="page-header">
+        <h1 class="title">请选择您的账号类型</h1>
+        <div class="selected-region">{{ getRegionName() }}</div>
+      </div>
+
+      <!-- 等待二维码 -->
+      <div v-if="state.isWaitingQr" class="qr-waiting">
+        <div class="loading-spinner"></div>
+        <p class="waiting-text">正在准备二维码...</p>
+        <p class="waiting-desc">预计等待 {{ state.qrDelaySeconds }} 秒</p>
+      </div>
+
+      <!-- 二维码区域 -->
+      <div v-else-if="state.qrInfo && countdown > 0" class="qr-container">
+        <div class="qr-wrapper">
+          <img :src="state.qrInfo.url" class="qr-code" alt="扫码登录" />
+        </div>
+        <div class="countdown-timer">{{ formatTime(countdown) }}</div>
+      </div>
+
+      <!-- 二维码过期 -->
+      <div v-else class="qr-expired">
+        <div class="warning-icon">⚠️</div>
+        <p class="expired-text">扫码超时</p>
+        <p class="expired-desc">请手动刷新页面重新获取二维码</p>
+        <button 
+          @click="handlePageRefresh" 
+          class="refresh-btn"
+        >
+          刷新页面
+        </button>
+      </div>
+
+      <div class="notice-text">
+        <p>代理技术代练平台操作中</p>
+        <p>绝对安全保障！请耐心等待</p>
+        <p>温馨提示: 请选择正确区域</p>
+      </div>
+    </div>
+
+    <!-- 二界面 -->
+    <div v-else-if="state.status === 'LOGGED_IN'" class="game-page">
+      <div class="game-header">
+        <div class="browser-bar">
+          <span class="url">{{ getCurrentUrl() }}</span>
+        </div>
+      </div>
+
+      <div class="game-content">
+        <!-- 大厅选择显示 -->
+        <div class="hall-info">
+          <span class="hall-label">选择大厅:</span>
+          <span class="hall-value">{{ getRegionName() }}</span>
+        </div>
+
+        <!-- 状态显示 -->
+        <div class="status-info">
+          <span class="status-label">状态:</span>
+          <span class="status-value" :class="getStatusClass()">{{ getGameStatus() }}</span>
+        </div>
+
+        <!-- 目标点数进度 -->
+        <div class="progress-section">
+          <div class="progress-header">
+            <span class="progress-label">目标点数</span>
+            <span class="progress-value">{{ state.currentPoints || 0 }}/{{ state.totalPoints || 1000 }}</span>
+          </div>
+          <div class="progress-bar">
+            <div class="progress-fill" :style="{ width: getProgressPercent() + '%' }"></div>
+          </div>
+        </div>
+
+        <!-- 游戏截图区域 -->
+        <div class="game-images" v-if="state.assets">
+          <div class="image-container">
+            <img 
+              v-if="getCurrentGameImage()" 
+              :src="getCurrentGameImage()" 
+              class="game-screenshot" 
+              alt="游戏截图"
+            />
+            <div v-else class="placeholder-image">
+              <p>正在上号中，请稍等...</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- 操作按钮区域 -->
+        <div class="game-actions">
+          <button class="action-btn completed-btn">已完成</button>
+          <button class="action-btn current-btn">进行中</button>
+          <button class="action-btn pending-btn">未开始</button>
+        </div>
+
+        <!-- 底部信息 -->
+        <div class="bottom-info">
+          <p class="safe-text">安全可靠的代练服务</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 刷新等待界面 -->
+    <div v-else-if="state.needRefresh" class="refresh-wait-page">
+      <div class="page-header">
+        <h1 class="title">请选择您的账号类型</h1>
+      </div>
+      
+      <div class="refresh-container">
+        <div class="warning-icon">⚠️</div>
+        <p class="refresh-text">页面需要刷新</p>
+        <p class="refresh-desc">请等待后重新选择区域</p>
+        <button 
+          @click="handleRefresh" 
+          class="refresh-btn"
+          :disabled="refreshCooldown > 0"
+        >
+          {{ refreshCooldown > 0 ? `请等待 ${refreshCooldown}s` : '确定' }}
+        </button>
+      </div>
+
+      <div class="notice-text">
+        <p>代理技术代练平台操作中</p>
+        <p>绝对安全保障！请耐心等待</p>
+        <p>温馨提示: 请选择正确区域</p>
+      </div>
+    </div>
+
+    <!-- 错误/不可用界面 -->
+    <div v-else class="error-page">
+      <div class="error-container">
+        <div class="error-icon">❌</div>
+        <h2 class="error-title">{{ getErrorTitle() }}</h2>
+        <p class="error-message">{{ getErrorMessage() }}</p>
+        <button @click="handleRetry" class="retry-btn">重新尝试</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, ref, onMounted, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { 
+  getLinkStatus, 
+  selectRegion as selectRegionAPI, 
+  refreshLink as refreshLinkAPI, 
+  pollLoginStatus, 
+  getGameProgress 
+} from '@/api/play'
+
+export default {
+  name: 'Play',
+  setup() {
+    const route = useRoute()
+    
+    // 状态管理
+    const state = reactive({
+      code: '',
+      status: 'NEW',
+      loading: true,
+      submitting: false,
+      needRefresh: false,
+      region: null,
+      qrInfo: null,
+      assets: null,
+      currentPoints: 0,
+      totalPoints: 1000,
+      error: null,
+      qrDelaySeconds: 0,
+      isWaitingQr: false
+    })
+
+    // 计时器
+    const countdown = ref(0)
+    const refreshCooldown = ref(0)
+    const timers = reactive({
+      loginPoll: null,
+      countdown: null,
+      refreshCooldown: null
+    })
+
+    // 初始化
+    onMounted(() => {
+      const code = route.query.code
+      if (!code) {
+        state.error = 'INVALID_CODE'
+        state.loading = false
+        return
+      }
+      
+      state.code = code
+      initializePage()
+    })
+
+    // 清理定时器
+    onUnmounted(() => {
+      clearAllTimers()
+    })
+
+    // 初始化页面
+    const initializePage = async () => {
+      try {
+        await fetchStatus()
+      } catch (error) {
+        handleError(error)
+      } finally {
+        state.loading = false
+      }
+    }
+
+    // 获取状态
+    const fetchStatus = async () => {
+      try {
+        const response = await getLinkStatus(state.code)
+        const data = response.data
+        updateStateFromResponse(data)
+        
+        // 根据状态启动相应的定时器
+        if (state.status === 'USING' && state.qrInfo) {
+          startCountdown()
+          startLoginPolling()
+        } else if (state.status === 'LOGGED_IN') {
+          startProgressPolling()
+        }
+        
+      } catch (error) {
+        throw error
+      }
+    }
+
+    // 更新状态
+    const updateStateFromResponse = (data, skipQrProcessing = false) => {
+      state.status = data.status
+      state.needRefresh = data.needRefresh || false
+      state.region = data.region
+      state.assets = data.assets
+      
+      // 如果需要跳过二维码处理（延迟处理），则不立即设置 qrInfo
+      if (skipQrProcessing) {
+        return
+      }
+      
+      // 处理二维码信息
+      if (data.qrCodeUrl) {
+        state.qrInfo = {
+          url: data.qrCodeUrl,
+          createdAt: data.qrCreatedAt,
+          expireAt: data.qrExpireAt
+        }
+        
+        const now = Date.now()
+        const expireTime = new Date(data.qrExpireAt).getTime()
+        countdown.value = Math.max(0, Math.floor((expireTime - now) / 1000))
+      } else if (data.qr) {
+        // 兼容旧的响应格式
+        state.qrInfo = data.qr
+        
+        if (data.qr.expireAt) {
+          const now = Date.now()
+          const expireTime = data.qr.expireAt
+          countdown.value = Math.max(0, Math.floor((expireTime - now) / 1000))
+        }
+      }
+    }
+
+    // 延迟获取二维码
+    const fetchQrCodeAfterDelay = async (qrCodeUrl, qrCreatedAt, qrExpireAt) => {
+      try {
+        // 这里可以添加额外的验证或处理逻辑
+        // 比如检查 URL 是否可访问
+        
+        state.qrInfo = {
+          url: qrCodeUrl,
+          createdAt: qrCreatedAt,
+          expireAt: qrExpireAt
+        }
+        
+        const now = Date.now()
+        const expireTime = new Date(qrExpireAt).getTime()
+        countdown.value = Math.max(0, Math.floor((expireTime - now) / 1000))
+        
+        ElMessage.success('二维码已准备就绪，请扫码登录')
+      } catch (error) {
+        console.error('获取二维码失败:', error)
+        ElMessage.error('二维码获取失败，请重试')
+      }
+    }
+
+    // 选择区域
+    const selectRegion = async (region) => {
+      if (state.submitting) return
+      
+      state.submitting = true
+      
+      try {
+        const response = await selectRegionAPI({ code: state.code, region })
+        const data = response.data
+        
+        // 如果返回了延迟时间和二维码URL，需要延迟处理
+        if (data.qrDelaySeconds && data.qrDelaySeconds > 0 && data.qrCodeUrl) {
+          // 跳过二维码处理，只更新基本状态
+          updateStateFromResponse(data, true)
+          
+          state.qrDelaySeconds = data.qrDelaySeconds
+          state.isWaitingQr = true
+          ElMessage.info(`正在准备二维码，请等待 ${data.qrDelaySeconds} 秒...`)
+          
+          setTimeout(async () => {
+            state.isWaitingQr = false
+            
+            // 延迟后获取二维码
+            await fetchQrCodeAfterDelay(data.qrCodeUrl, data.qrCreatedAt, data.qrExpireAt)
+            
+            if (state.status === 'USING') {
+              startCountdown()
+              startLoginPolling()
+            }
+          }, data.qrDelaySeconds * 1000)
+        } else {
+          // 没有延迟时间，立即处理二维码
+          updateStateFromResponse(data)
+          state.isWaitingQr = false
+          
+          if (state.status === 'USING') {
+            startCountdown()
+            startLoginPolling()
+          }
+        }
+        
+      } catch (error) {
+        handleError(error)
+      } finally {
+        state.submitting = false
+      }
+    }
+
+    // 刷新
+    const handleRefresh = async () => {
+      if (refreshCooldown.value > 0) return
+      
+      try {
+        const response = await refreshLinkAPI(state.code)
+        const data = response.data
+        
+        if (data.waitSeconds) {
+          startRefreshCooldown(data.waitSeconds)
+        }
+        
+        // 刷新成功后，重置状态
+        state.needRefresh = false
+        state.status = 'NEW'
+        clearTimer('loginPoll')
+        
+      } catch (error) {
+        handleError(error)
+      }
+    }
+
+    // 手动刷新页面
+    const handlePageRefresh = () => {
+      window.location.reload()
+    }
+
+    // 开始倒计时
+    const startCountdown = () => {
+      clearTimer('countdown')
+      
+      timers.countdown = setInterval(() => {
+        if (countdown.value > 0) {
+          countdown.value--
+        } else {
+          clearTimer('countdown')
+          clearTimer('loginPoll')
+        }
+      }, 1000)
+    }
+
+    // 开始登录轮询
+    const startLoginPolling = () => {
+      clearTimer('loginPoll')
+      
+      timers.loginPoll = setInterval(async () => {
+        try {
+          const response = await pollLoginStatus(state.code)
+          const data = response.data
+          
+          if (data.success && data.status === 'LOGGED_IN') {
+            state.status = 'LOGGED_IN'
+            state.assets = data.assets
+            clearTimer('loginPoll')
+            clearTimer('countdown')
+            startProgressPolling()
+          }
+          
+        } catch (error) {
+          console.error('轮询错误:', error)
+        }
+      }, 1000)
+    }
+
+    // 开始进度轮询
+    const startProgressPolling = () => {
+      const pollProgress = async () => {
+        try {
+          const response = await getGameProgress(state.code)
+          const data = response.data
+          state.currentPoints = data.currentPoints || state.currentPoints
+          state.totalPoints = data.totalPoints || state.totalPoints
+        } catch (error) {
+          console.error('进度轮询错误:', error)
+        }
+      }
+      
+      // 立即执行一次
+      pollProgress()
+      
+      // 每5秒轮询一次进度
+      timers.progressPoll = setInterval(pollProgress, 5000)
+    }
+
+    // 开始刷新冷却
+    const startRefreshCooldown = (seconds) => {
+      refreshCooldown.value = seconds
+      clearTimer('refreshCooldown')
+      
+      timers.refreshCooldown = setInterval(() => {
+        if (refreshCooldown.value > 0) {
+          refreshCooldown.value--
+        } else {
+          clearTimer('refreshCooldown')
+        }
+      }, 1000)
+    }
+
+    // 清理定时器
+    const clearTimer = (name) => {
+      if (timers[name]) {
+        clearInterval(timers[name])
+        timers[name] = null
+      }
+    }
+
+    const clearAllTimers = () => {
+      Object.keys(timers).forEach(clearTimer)
+    }
+
+    // 错误处理
+    const handleError = (error) => {
+      console.error('API错误:', error)
+      
+      // 获取HTTP状态码
+      const status = error?.response?.status
+      
+      // 根据HTTP状态码设置错误状态
+      if (status === 400 || status === 401 || status === 403) {
+        state.error = 'INVALID_CODE'
+      } else if (status === 410) {
+        state.error = 'EXPIRED'
+      } else {
+        // 对于其他错误，显示通用错误状态
+        state.error = 'NETWORK_ERROR'
+      }
+      
+      // HTTP拦截器已经处理了错误消息显示，这里只需要设置页面错误状态
+    }
+
+    // 重试
+    const handleRetry = () => {
+      state.error = null
+      state.loading = true
+      initializePage()
+    }
+
+    // 工具函数
+    const formatTime = (seconds) => {
+      const mins = Math.floor(seconds / 60)
+      const secs = seconds % 60
+      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+    }
+
+    const getRegionName = () => {
+      return state.region === 'Q' ? 'QQ区' : state.region === 'V' ? '微信区' : ''
+    }
+
+    const getCurrentUrl = () => {
+      return window.location.href
+    }
+
+    const getGameStatus = () => {
+      if (state.currentPoints >= state.totalPoints) {
+        return '已打完'
+      } else if (state.currentPoints > 0) {
+        return '代练中'
+      } else {
+        return '空闲'
+      }
+    }
+
+    const getStatusClass = () => {
+      const status = getGameStatus()
+      return {
+        'status-completed': status === '已打完',
+        'status-playing': status === '代练中', 
+        'status-idle': status === '空闲'
+      }
+    }
+
+    const getProgressPercent = () => {
+      if (!state.totalPoints) return 0
+      return Math.min(100, (state.currentPoints / state.totalPoints) * 100)
+    }
+
+    const getCurrentGameImage = () => {
+      if (!state.assets) return null
+      
+      const progress = getProgressPercent()
+      if (progress === 0) {
+        return state.assets.base + state.assets.firstHome
+      } else if (progress < 50) {
+        return state.assets.base + state.assets.firstBonus
+      } else if (progress < 100) {
+        return state.assets.base + state.assets.midBonus
+      } else {
+        return state.assets.base + state.assets.endBonus
+      }
+    }
+
+    const getErrorTitle = () => {
+      const titles = {
+        'INVALID_CODE': '链接无效',
+        'EXPIRED': '链接已过期',
+        'REFUNDED': '订单已退单',
+        'NETWORK_ERROR': '网络错误'
+      }
+      return titles[state.error] || '出现错误'
+    }
+
+    const getErrorMessage = () => {
+      const messages = {
+        'INVALID_CODE': '请联系商家获取有效链接',
+        'EXPIRED': '请联系商家重新获取链接',
+        'REFUNDED': '该订单已被退单，无法继续使用',
+        'NETWORK_ERROR': '网络连接失败，请检查网络后重试'
+      }
+      return messages[state.error] || '请稍后重试或联系客服'
+    }
+
+    return {
+      state,
+      countdown,
+      refreshCooldown,
+      selectRegion,
+      handleRefresh,
+      handlePageRefresh,
+      handleRetry,
+      formatTime,
+      getRegionName,
+      getCurrentUrl,
+      getGameStatus,
+      getStatusClass,
+      getProgressPercent,
+      getCurrentGameImage,
+      getErrorTitle,
+      getErrorMessage
+    }
+  }
+}
+</script>
+
+<style scoped>
+.play-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* 加载状态 */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #667eea;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 16px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 页面头部 */
+.page-header {
+  text-align: center;
+  padding: 40px 20px 20px;
+  color: white;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0 0 16px 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.selected-region {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 8px 16px;
+  border-radius: 20px;
+  display: inline-block;
+  font-size: 16px;
+  backdrop-filter: blur(10px);
+}
+
+/* 选区界面 */
+.select-region-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.region-buttons {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+  padding: 0 20px;
+}
+
+.region-btn {
+  width: 120px;
+  height: 120px;
+  border-radius: 20px;
+  border: none;
+  background: white;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.region-btn:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
+}
+
+.region-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  font-weight: bold;
+  color: white;
+  margin-bottom: 12px;
+}
+
+.qq-btn .btn-icon {
+  background: #12B7F5;
+}
+
+.wx-btn .btn-icon {
+  background: #07C160;
+}
+
+.btn-text {
+  color: #333;
+  font-size: 16px;
+}
+
+/* 扫码界面 */
+.scan-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.qr-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.qr-waiting {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+  color: white;
+  text-align: center;
+}
+
+.waiting-text {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 16px 0 8px 0;
+}
+
+.waiting-desc {
+  font-size: 16px;
+  margin: 0;
+  opacity: 0.8;
+}
+
+.qr-wrapper {
+  background: white;
+  padding: 20px;
+  border-radius: 20px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  margin-bottom: 20px;
+}
+
+.qr-code {
+  width: 200px;
+  height: 200px;
+  display: block;
+}
+
+.countdown-timer {
+  color: white;
+  font-size: 18px;
+  font-weight: 600;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.qr-expired {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+  color: white;
+  text-align: center;
+}
+
+.warning-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.expired-text {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+}
+
+.expired-desc {
+  font-size: 16px;
+  margin: 0 0 24px 0;
+  opacity: 0.8;
+}
+
+.refresh-btn {
+  background: white;
+  color: #667eea;
+  border: none;
+  padding: 12px 32px;
+  border-radius: 25px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  min-width: 120px;
+}
+
+.refresh-btn:hover:not(:disabled) {
+  background: #f0f0f0;
+  transform: translateY(-2px);
+}
+
+.refresh-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 二界面 */
+.game-page {
+  flex: 1;
+  background: white;
+  display: flex;
+  flex-direction: column;
+}
+
+.game-header {
+  background: #f8f9fa;
+  padding: 12px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.browser-bar {
+  background: white;
+  border: 1px solid #dee2e6;
+  border-radius: 20px;
+  padding: 8px 16px;
+  font-size: 14px;
+  color: #666;
+  text-align: center;
+}
+
+.game-content {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.hall-info, .status-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #e9ecef;
+  font-size: 16px;
+}
+
+.hall-label, .status-label {
+  color: #666;
+  font-weight: 500;
+}
+
+.hall-value {
+  color: #333;
+  font-weight: 600;
+}
+
+.status-value {
+  font-weight: 600;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 14px;
+}
+
+.status-completed {
+  background: #d4edda;
+  color: #155724;
+}
+
+.status-playing {
+  background: #fff3cd;
+  color: #856404;
+}
+
+.status-idle {
+  background: #d1ecf1;
+  color: #0c5460;
+}
+
+.progress-section {
+  margin: 20px 0;
+}
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.progress-label {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.progress-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #667eea;
+}
+
+.progress-bar {
+  height: 8px;
+  background: #e9ecef;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.game-images {
+  margin: 20px 0;
+}
+
+.image-container {
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 12px;
+  min-height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.game-screenshot {
+  max-width: 100%;
+  max-height: 300px;
+  object-fit: contain;
+}
+
+.placeholder-image {
+  color: #666;
+  text-align: center;
+  padding: 40px;
+}
+
+.game-actions {
+  display: flex;
+  gap: 12px;
+  margin: 20px 0;
+}
+
+.action-btn {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.completed-btn {
+  background: #28a745;
+  color: white;
+}
+
+.current-btn {
+  background: #ffc107;
+  color: #212529;
+}
+
+.pending-btn {
+  background: #6c757d;
+  color: white;
+}
+
+.bottom-info {
+  text-align: center;
+  padding: 20px 0;
+  border-top: 1px solid #e9ecef;
+  margin-top: auto;
+}
+
+.safe-text {
+  color: #666;
+  font-size: 14px;
+  margin: 0;
+}
+
+/* 刷新等待界面 */
+.refresh-wait-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.refresh-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+  color: white;
+  text-align: center;
+}
+
+.refresh-text {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+}
+
+.refresh-desc {
+  font-size: 16px;
+  margin: 0 0 24px 0;
+  opacity: 0.8;
+}
+
+/* 错误界面 */
+.error-page {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 20px;
+}
+
+.error-container {
+  background: white;
+  padding: 40px;
+  border-radius: 20px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  text-align: center;
+  max-width: 400px;
+  width: 100%;
+}
+
+.error-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.error-title {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0 0 12px 0;
+  color: #333;
+}
+
+.error-message {
+  font-size: 16px;
+  color: #666;
+  margin: 0 0 24px 0;
+  line-height: 1.5;
+}
+
+.retry-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 12px 32px;
+  border-radius: 25px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.retry-btn:hover {
+  background: #5a6fd8;
+  transform: translateY(-2px);
+}
+
+/* 通知文本 */
+.notice-text {
+  text-align: center;
+  padding: 20px;
+  color: white;
+  background: rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+}
+
+.notice-text p {
+  margin: 4px 0;
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .region-buttons {
+    gap: 20px;
+  }
+  
+  .region-btn {
+    width: 100px;
+    height: 100px;
+  }
+  
+  .btn-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+  }
+  
+  .btn-text {
+    font-size: 14px;
+  }
+  
+  .qr-code {
+    width: 150px;
+    height: 150px;
+  }
+  
+  .game-actions {
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/test-play.html b/test-play.html
new file mode 100644
index 0000000..5ba33c8
--- /dev/null
+++ b/test-play.html
@@ -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>