更新页面样式和结构，优化加载、错误和刷新页面的用户体验，调整Vite配置以使用生产环境API，新增订单详情展示功能，提升整体界面一致性和可读性

更新 Vite 配置以使用 localhost，新增游戏完成时间戳和过期判断，优化链接生成逻辑，调整路由以支持路径参数，改进游戏界面状态显示
删除多个文档，包括部署指南、链接管理功能、权限系统配置总结及上号系统需求文档，优化项目结构，提升代码整洁性
2025-11-03 21:20:52 +08:00 · 2025-11-03 20:58:22 +08:00 · 2025-10-11 16:55:58 +08:00 · 2025-10-11 16:49:41 +08:00 · 2025-10-10 10:19:12 +08:00 · 2025-10-03 10:46:52 +08:00
23 changed files with 1246 additions and 1191 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -2,7 +2,8 @@
  "permissions": {
    "allow": [
      "Bash(git add:*)",
-      "Bash(git commit:*)"
+      "Bash(git commit:*)",
+      "WebFetch(domain:docs.claude.com)"
    ],
    "deny": [],
    "ask": []
--- a/DEPLOYMENT.md
+++ b/DEPLOYMENT.md
@@ -1,71 +0,0 @@
-# Vue SPA 部署指南
-
-## 问题描述
-
-当直接访问 `http://uzi1.cn/play?code=973F2YTE` 时出现404错误，但其他页面正常。这是典型的单页应用(SPA)部署问题。
-
-## 原因分析
-
-1. **开发环境**：Vite开发服务器自动处理路由回退
-2. **生产环境**：Web服务器尝试查找实际的 `/play` 文件，但这只是前端路由
-
-## 解决方案
-
-### 方案一：Nginx 配置（推荐）
-
-1. 使用项目根目录的 `nginx.conf` 文件
-2. 修改其中的 `root` 路径为实际部署路径
-3. 重新加载 Nginx 配置：
-```bash
-sudo nginx -t  # 测试配置
-sudo nginx -s reload  # 重新加载
-```
-
-### 方案二：Apache 配置
-
-1. 将 `apache.htaccess` 文件复制到 `dist` 目录下，重命名为 `.htaccess`
-2. 确保 Apache 启用了 `mod_rewrite` 模块
-
-### 方案三：Netlify 部署
-
-1. 将 `_redirects` 文件复制到 `dist` 目录下
-2. 重新部署到 Netlify
-
-### 方案四：其他静态托管服务
-
-对于其他静态托管服务，需要配置：
- 所有路由都回退到 `index.html`
- API 请求代理到 `http://192.140.164.137:18080`
-
-## 重新构建和部署
-
-```bash
-# 1. 重新构建项目
-npm run build
-
-# 2. 将构建文件部署到服务器
-# 确保 dist 目录下的所有文件都已上传
-
-# 3. 配置 Web 服务器（选择上述方案之一）
-
-# 4. 测试访问
-# http://uzi1.cn/play?code=973F2YTE 应该能正常访问
-```
-
-## 验证步骤
-
-1. 直接访问：`http://uzi1.cn/play?code=973F2YTE`
-2. 应该能看到游戏页面，而不是404错误
-3. 刷新页面应该仍然正常
-4. API 请求应该正常工作（无CORS错误）
-
-## 常见问题
-
-### Q: 仍然出现404错误
-A: 检查Web服务器配置是否正确应用，确认配置文件路径和语法
-
-### Q: API请求失败
-A: 检查代理配置，确认后端服务 `http://192.140.164.137:18080` 可访问
-
-### Q: 静态资源加载失败
-A: 检查资源路径配置，确认 `base` 配置正确
--- a/README_LINKS.md
+++ b/README_LINKS.md
@@ -1,182 +0,0 @@
-# 链接管理功能
-
-## 功能概述
-
-链接管理页面提供了批量生成链接的功能，支持设置生成次数和每次生成的链接数量。根据您提供的API接口，系统会调用 `POST /api/link/generate` 接口来生成链接。
-
-## 主要功能
-
-### 1. 批量生成链接
- **生成次数**: 1-100次
- **每次链接数量**: 1-50个
- 支持表单验证
- 生成成功后自动刷新列表
-
-### 2. 链接列表管理
- 分页显示已生成的链接批次
- 显示批次ID、机器编号、扣除积分、过期时间
- 支持查看、删除操作
- 根据过期时间自动判断链接状态
- 支持导出CSV数据
-
-### 3. 二维码功能
- 根据机器编号生成对应的链接二维码
- 支持下载二维码图片
- 使用在线二维码生成服务
- 自动生成游戏链接地址
-
-### 4. 权限控制
- 管理员：拥有所有权限（生成、查看、删除、导出）
- 代理商：只有查看权限
-
-## API接口
-
-### 生成链接
-```http
-POST /api/link/generate
-Authorization: Bearer {token}
-Content-Type: application/json
-
-{
-  "times": 10,        // 生成次数
-  "linkCount": 5      // 每次链接数量
-}
-```
-
-**返回数据示例：**
-```json
-{
-  "batchId": 6,
-  "deductPoints": 50,
-  "expireAt": "2025-08-26T12:29:13.63955",
-  "codeNos": [
-    "X3T9ND84"
-  ]
-}
-```
-
-### 获取链接列表
-```http
-GET /api/link/list?page=1&pageSize=20
-Authorization: Bearer {token}
-```
-
-### 删除链接
-```http
-DELETE /api/link/{id}
-Authorization: Bearer {token}
-```
-
-## 页面路由
-
- **路径**: `/links`
- **名称**: `Links`
- **权限**: `LINK_VIEW`
-
-## 文件结构
-
-```
-src/
-├── api/
-│   └── links.js              # 链接相关API接口
-├── views/links/
-│   └── LinkGenerate.vue      # 链接生成页面
-├── utils/
-│   └── links.js              # 链接管理工具函数
-├── config/
-│   └── links.js              # 链接管理配置文件
-├── router/
-│   └── index.js              # 路由配置（已更新）
-├── layouts/
-│   └── AdminLayout.vue       # 导航菜单（已更新）
-└── utils/
-    └── permission.js         # 权限配置（已更新）
-```
-
-## 使用说明
-
-### 1. 生成链接
-1. 在"生成次数"输入框中输入要生成的次数（1-100）
-2. 在"每次链接数量"输入框中输入每次生成的链接数量（1-50）
-3. 点击"开始生成"按钮
-4. 系统会调用API生成链接，成功后显示提示信息
-
-### 2. 管理链接
- 查看已生成的链接列表
- 点击"查看二维码"查看链接对应的二维码
- 点击"删除"删除不需要的链接
- 使用"导出CSV"功能导出链接数据
-
-### 3. 权限说明
- 管理员可以执行所有操作
- 代理商只能查看链接列表，无法生成或删除链接
-
-## 注意事项
-
-1. **API地址**: 确保后端API地址配置正确（当前配置为 `http://localhost:18080`）
-2. **认证**: 需要有效的Bearer Token才能访问API
-3. **二维码**: 使用在线二维码生成服务，确保网络连接正常
-4. **批量限制**: 单次最多生成50个链接，避免API压力过大
-5. **链接地址**: 系统会自动根据机器编号生成游戏链接地址，格式为 `https://yourdomain.com/play?code={机器编号}`
-6. **状态判断**: 链接状态根据过期时间自动判断（正常/即将过期/已过期）
-7. **配置自定义**: 可以在 `src/config/links.js` 中自定义链接地址生成规则和状态配置
-
-## 配置说明
-
-### 链接地址配置 (`src/config/links.js`)
-
-```javascript
-export const LINK_CONFIG = {
-  // 基础域名
-  BASE_URL: 'https://yourdomain.com',
-  
-  // 游戏页面路径
-  GAME_PATH: '/play',
-  
-  // 机器编号参数名
-  CODE_PARAM: 'code',
-  
-  // 链接地址模板
-  getLinkUrl: (codeNo) => {
-    return `${LINK_CONFIG.BASE_URL}${LINK_CONFIG.GAME_PATH}?${LINK_CONFIG.CODE_PARAM}=${codeNo}`
-  }
-}
-```
-
-### 状态配置
-
-```javascript
-export const STATUS_CONFIG = {
-  // 状态标签类型
-  LABEL_TYPES: {
-    NORMAL: 'success',      // 正常
-    EXPIRING: 'warning',    // 即将过期
-    EXPIRED: 'danger',      // 已过期
-    UNKNOWN: 'info'         // 未知
-  },
-  
-  // 过期时间阈值（毫秒）
-  EXPIRING_THRESHOLD: 24 * 60 * 60 * 1000, // 24小时
-}
-```
-
-## 扩展功能
-
-可以根据需要添加以下功能：
- 链接状态切换（启用/禁用）
- 链接过期时间设置
- 链接使用统计
- 自定义链接模板
- 批量操作（批量删除、批量导出等）
- 链接访问统计和监控
-
-## 技术特点
-
- 使用Vue 3 Composition API
- Element Plus UI组件库
- 响应式设计
- 权限控制集成
- 错误处理和用户提示
- 支持CSV导出
-
-
--- a/docs/权限系统配置总结.md
+++ b/docs/权限系统配置总结.md
@@ -1,193 +0,0 @@
-# 权限系统配置总结
-
-## 概述
-
-本系统采用基于角色的权限控制（RBAC）机制，通过用户类型（ADMIN/AGENT）来控制用户的功能访问权限。
-
-## 用户类型权限配置
-
-### ADMIN（管理员）
- **权限范围**：拥有系统所有功能的访问权限
- **路由访问**：可以访问所有页面和路由
- **功能权限**：
-  - 用户管理（创建、编辑、删除、启用/禁用）
-  - 游戏管理（查看、创建、编辑、删除）
-  - 订单管理（查看、管理）
-  - 报表分析（查看）
-  - 系统设置（管理）
-
-### AGENT（代理商）
- **权限范围**：只能查看基础信息，无管理权限
- **路由访问**：只能访问部分页面
- **功能权限**：
-  - 游戏查看
-  - 订单查看
-  - 报表查看
-
-## 权限检查机制
-
-### 1. 路由权限检查
-```javascript
-// 管理员可以访问所有路由
-export function canAccessRoute(routeName) {
-  if (isAdmin()) return true
-  
-  const requiredPermissions = ROUTE_PERMISSIONS[routeName] || []
-  if (requiredPermissions.length === 0) return true
-  
-  return hasAnyPermission(requiredPermissions)
-}
-```
-
-### 2. 功能权限检查
-```javascript
-// 检查单个权限
-const canCreateUser = hasPermission('user:create')
-
-// 检查多个权限（任一）
-const canManageUsers = hasAnyPermission(['user:create', 'user:update', 'user:delete'])
-
-// 检查多个权限（全部）
-const canFullManage = hasAllPermissions(['user:create', 'user:update', 'user:delete'])
-```
-
-### 3. 权限指令使用
-```vue
-<!-- 单个权限 -->
-<el-button v-permission="'user:create'">新增用户</el-button>
-
-<!-- 多个权限（OR逻辑） -->
-<el-button v-permission="['user:create', 'user:update']">操作</el-button>
-
-<!-- 多个权限（AND逻辑） -->
-<el-button v-permission="['user:create', 'user:update', 'AND']">操作</el-button>
-```
-
-## 权限配置详情
-
-### 权限定义
-```javascript
-export const PERMISSIONS = {
-  // 用户管理权限
-  USER_MANAGE: 'user:manage',
-  USER_CREATE: 'user:create',
-  USER_UPDATE: 'user:update',
-  USER_DELETE: 'user:delete',
-  USER_VIEW: 'user:view',
-  
-  // 游戏管理权限
-  GAME_MANAGE: 'game:manage',
-  GAME_CREATE: 'game:create',
-  GAME_UPDATE: 'game:update',
-  GAME_DELETE: 'game:delete',
-  GAME_VIEW: 'game:view',
-  
-  // 订单管理权限
-  ORDER_MANAGE: 'order:manage',
-  ORDER_VIEW: 'order:view',
-  
-  // 报表分析权限
-  REPORT_VIEW: 'report:view',
-  
-  // 系统设置权限
-  SETTING_MANAGE: 'setting:manage',
-}
-```
-
-### 角色权限映射
-```javascript
-export const ROLE_PERMISSIONS = {
-  ADMIN: [
-    // 管理员拥有所有权限
-    PERMISSIONS.USER_MANAGE, PERMISSIONS.USER_CREATE, PERMISSIONS.USER_UPDATE,
-    PERMISSIONS.USER_DELETE, PERMISSIONS.USER_VIEW,
-    PERMISSIONS.GAME_MANAGE, PERMISSIONS.GAME_CREATE, PERMISSIONS.GAME_UPDATE,
-    PERMISSIONS.GAME_DELETE, PERMISSIONS.GAME_VIEW,
-    PERMISSIONS.ORDER_MANAGE, PERMISSIONS.ORDER_VIEW,
-    PERMISSIONS.REPORT_VIEW, PERMISSIONS.SETTING_MANAGE,
-  ],
-  AGENT: [
-    // 代理商只有查看权限
-    PERMISSIONS.GAME_VIEW, PERMISSIONS.ORDER_VIEW, PERMISSIONS.REPORT_VIEW,
-  ]
-}
-```
-
-### 路由权限映射
-```javascript
-export const ROUTE_PERMISSIONS = {
-  'Users': [PERMISSIONS.USER_VIEW],
-  'Games': [PERMISSIONS.GAME_VIEW],
-  'Orders': [PERMISSIONS.ORDER_VIEW],
-  'Reports': [PERMISSIONS.REPORT_VIEW],
-  'Settings': [PERMISSIONS.SETTING_MANAGE],
-}
-```
-
-## 权限控制层级
-
-### 1. 路由级权限控制
- 在路由守卫中检查用户是否有访问权限
- 管理员可以访问所有路由
- 代理商只能访问有权限的路由
- 无权限时自动跳转到仪表盘页面
-
-### 2. 菜单级权限控制
- 根据用户权限动态显示/隐藏菜单项
- 代理商用户看不到"用户管理"和"系统设置"菜单
- 管理员可以看到所有菜单项
-
-### 3. 页面级权限控制
- 在页面组件中检查用户权限
- 无权限时显示权限不足提示
- 提供友好的用户体验
-
-### 4. 操作级权限控制
- 根据用户权限显示/隐藏操作按钮
- 代理商用户无法进行用户管理操作
- 使用权限指令控制按钮显示
-
-## 安全注意事项
-
-1. **前端权限控制仅用于用户体验**，不能作为安全依据
-2. **后端必须进行权限验证**，确保数据安全
-3. **敏感操作需要二次确认**，如删除用户
-4. **权限变更需要重新登录**，确保权限生效
-5. **定期审查权限配置**，避免权限泄露
-
-## 测试验证
-
-### 权限测试页面
- 访问 `/permission-test` 页面
- 查看当前用户的权限状态
- 测试各种权限检查功能
- 验证路由访问权限
-
-### 测试建议
-1. 使用不同用户类型登录，验证权限控制
-2. 测试无权限访问时的跳转逻辑
-3. 验证菜单和按钮的显示/隐藏
-4. 测试后端接口的权限验证
-5. 检查权限变更后的效果
-
-## 扩展说明
-
-### 添加新权限
-1. 在 `PERMISSIONS` 对象中添加新权限
-2. 在 `ROLE_PERMISSIONS` 中为不同角色分配权限
-3. 在 `ROUTE_PERMISSIONS` 中配置路由权限要求
-4. 更新相关的前端权限检查逻辑
-
-### 修改角色权限
-1. 修改 `ROLE_PERMISSIONS` 中对应角色的权限数组
-2. 更新相关的前端权限检查逻辑
-3. 测试权限变更后的效果
-
-## 总结
-
-当前的权限系统配置确保了：
- **管理员拥有所有权限**，可以访问所有页面和功能
- **代理商只有查看权限**，无法进行管理操作
- **权限检查机制完善**，包括路由、菜单、页面、操作四个层级
- **用户体验友好**，无权限时提供清晰的提示和跳转
- **安全性保障**，前后端都有权限验证机制
--- a/docs/需求文档.md
+++ b/docs/需求文档.md
@@ -1,288 +0,0 @@
-# 上号系统需求文档（PRD/SRS）v0.9
-
-> 基于《安装步骤.docx》与用户确认的补充说明整理。本文作为首版“可评审草案”，确认后进入详细设计与开发。
-
---
-
-## 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?文件名=判断分数&对象名=编号
-
-
-
--- a/src/api/play.js
+++ b/src/api/play.js
@@ -6,7 +6,7 @@ import http from '@/plugins/http'

 // 获取链接状态
 export function getLinkStatus(code) {
-  return http.get('/api/link/status', {
+  return http.get(`/api/link/status?t=${Date.now()}`, {
    params: { code }
  })
 }
@@ -34,12 +34,12 @@ export function pollLoginStatus(code) {

 // 获取游戏界面数据
 export function getGameInterface(code) {
-  return http.get(`/api/link/${code}/game-interface`)
+  return http.get(`/api/link/${code}/game-interface?t=${Date.now()}`)
 }

 // 获取二维码图片（可选，用于代理二维码避免混合内容问题）
 export function getQRCode(code) {
-  return http.get('/api/link/qr.png', {
+  return http.get(`/api/link/qr.png?t=${Date.now()}`, {
    params: { code },
    responseType: 'blob'
  })
--- a/src/components/play/ErrorPage.vue
+++ b/src/components/play/ErrorPage.vue
@@ -1,11 +1,25 @@
 <template>
  <div class="error-page">
+    <div class="page-header">
+      <h1 class="title">出现错误</h1>
+    </div>
+
    <div class="error-container">
-      <div class="error-icon">❌</div>
+      <div class="icon-wrapper">
+        <svg class="error-svg" viewBox="0 0 24 24" width="80" height="80">
+          <circle cx="12" cy="12" r="11" fill="#f44336" opacity="0.1"/>
+          <path fill="#f44336" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+        </svg>
+      </div>
      <h2 class="error-title">{{ errorTitle }}</h2>
      <p class="error-message">{{ errorMessage }}</p>
      <button @click="$emit('retry')" class="retry-btn">重新尝试</button>
    </div>
+
+    <div class="notice-text">
+      <p>遇到问题？请联系客服</p>
+      <p>我们会尽快为您解决</p>
+    </div>
  </div>
 </template>

@@ -30,54 +44,110 @@ export default {
 .error-page {
  flex: 1;
  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 40px 20px;
+  flex-direction: column;
+  background: white;
+  min-height: 100vh;
+}
+
+.page-header {
+  text-align: center;
+  padding: 20px;
+  background: white;
+  border-bottom: 3px solid #f44336;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+  color: #333;
+  background: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }

 .error-container {
-  background: white;
-  padding: 40px;
-  border-radius: 20px;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 20px;
  text-align: center;
-  max-width: 400px;
-  width: 100%;
 }

-.error-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
+.icon-wrapper {
+  margin-bottom: 24px;
+  animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+  20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+.error-svg {
+  filter: drop-shadow(0 4px 8px rgba(244, 67, 54, 0.3));
 }

 .error-title {
-  font-size: 20px;
+  font-size: 22px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #333;
 }

 .error-message {
-  font-size: 16px;
+  font-size: 14px;
  color: #666;
-  margin: 0 0 24px 0;
-  line-height: 1.5;
+  margin: 0 0 32px 0;
+  line-height: 1.6;
+  max-width: 320px;
 }

 .retry-btn {
-  background: #667eea;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
  color: white;
  border: none;
  padding: 12px 32px;
-  border-radius: 25px;
-  font-size: 16px;
+  border-radius: 8px;
+  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
+  min-width: 140px;
 }

 .retry-btn:hover {
-  background: #5a6fd8;
-  transform: translateY(-2px);
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.notice-text {
+  text-align: center;
+  padding: 20px;
+  background: #f8f9fa;
+  border-top: 2px solid #e9ecef;
+  margin-top: auto;
+}
+
+.notice-text p {
+  margin: 4px 0;
+  font-size: 12px;
+  color: #666;
+}
+
+@media (max-width: 768px) {
+  .error-svg {
+    width: 64px;
+    height: 64px;
+  }
+
+  .error-title {
+    font-size: 18px;
+  }
 }
 </style>
--- a/src/components/play/GamePage.vue
+++ b/src/components/play/GamePage.vue
@@ -63,10 +63,23 @@
      </div>
      <template #footer>
        <div class="announcement-footer">
+          <template v-if="announcement && announcement.jumpUrl">
+            <!-- 有链接时显示确定和取消按钮 -->
+            <el-checkbox v-model="dontShowToday" class="dont-show-checkbox">
+              今日不再弹出
+            </el-checkbox>
+            <div class="button-group">
+              <el-button @click="handleAnnouncementCancel">取消</el-button>
+              <el-button type="primary" @click="handleAnnouncementConfirm">确定</el-button>
+            </div>
+          </template>
+          <template v-else>
+            <!-- 无链接时显示原有的样式 -->
            <el-checkbox v-model="dontShowToday" class="dont-show-checkbox">
              今日不再弹出
            </el-checkbox>
            <el-button type="primary" @click="handleAnnouncementClose">确定</el-button>
+          </template>
        </div>
      </template>
    </el-dialog>
@@ -200,6 +213,38 @@ export default {
      dontShowToday.value = false
    }

+    // 点击确定按钮：跳转到链接
+    const handleAnnouncementConfirm = () => {
+      const codeNo = props.codeNo
+      const announcementData = announcement.value
+      if (dontShowToday.value && codeNo) {
+        markDontShowToday(codeNo)
+      }
+      if (announcementData && codeNo) {
+        markDismissedPermanently(codeNo, announcementData.id)
+      }
+      // 跳转到链接
+      if (announcementData && announcementData.jumpUrl) {
+        window.open(announcementData.jumpUrl, '_blank')
+      }
+      announcementVisible.value = false
+      dontShowToday.value = false
+    }
+
+    // 点击取消按钮：仅关闭弹窗
+    const handleAnnouncementCancel = () => {
+      const codeNo = props.codeNo
+      const announcementData = announcement.value
+      if (dontShowToday.value && codeNo) {
+        markDontShowToday(codeNo)
+      }
+      if (announcementData && codeNo) {
+        markDismissedPermanently(codeNo, announcementData.id)
+      }
+      announcementVisible.value = false
+      dontShowToday.value = false
+    }
+
    onMounted(() => {
      // 仅在进入 GamePage 时检查公告
      setTimeout(() => checkAnnouncement(props.codeNo), 1000)
@@ -218,7 +263,9 @@ export default {
      announcementVisible,
      announcement,
      dontShowToday,
-      handleAnnouncementClose
+      handleAnnouncementClose,
+      handleAnnouncementConfirm,
+      handleAnnouncementCancel
    }
  },
  computed: {
@@ -394,6 +441,11 @@ export default {
  color: #666;
 }

+.button-group {
+  display: flex;
+  gap: 8px;
+}
+
@media (max-width: 768px) {
  .tab-item {
    padding: 10px 8px;
@@ -422,5 +474,10 @@ export default {
  .image-label {
    font-size: 11px;
  }
+  
+  /* 移动端按钮组调整 */
+  .button-group {
+    flex-wrap: wrap;
+  }
 }
 </style>
--- a/src/components/play/LoadingOverlay.vue
+++ b/src/components/play/LoadingOverlay.vue
@@ -1,7 +1,22 @@
 <template>
  <div class="loading-overlay">
+    <div class="page-header">
+      <h1 class="title">加载中</h1>
+    </div>
+
+    <div class="loading-container">
+      <div class="spinner-wrapper">
        <div class="loading-spinner"></div>
-    <p>加载中...</p>
+        <div class="loading-pulse"></div>
+      </div>
+      <p class="loading-text">正在加载订单信息...</p>
+      <p class="loading-subtext">请稍候</p>
+    </div>
+
+    <div class="notice-text">
+      <p>代理技术代练平台</p>
+      <p>安全 · 专业 · 高效</p>
+    </div>
  </div>
 </template>

@@ -18,26 +33,140 @@ export default {
  left: 0;
  right: 0;
  bottom: 0;
-  background: rgba(255, 255, 255, 0.9);
+  background: white;
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+}
+
+.page-header {
+  text-align: center;
+  padding: 20px;
+  background: white;
+  border-bottom: 3px solid #4776e6;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+  color: #333;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.loading-container {
+  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  z-index: 1000;
+  padding: 40px 20px;
+}
+
+.spinner-wrapper {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin-bottom: 32px;
 }

 .loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #667eea;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 60px;
+  height: 60px;
+  margin-top: -30px;
+  margin-left: -30px;
+  border: 4px solid #e9ecef;
+  border-top: 4px solid #4776e6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
-  margin-bottom: 16px;
+}
+
+.loading-pulse {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80px;
+  height: 80px;
+  margin-top: -40px;
+  margin-left: -40px;
+  border: 2px solid #4776e6;
+  border-radius: 50%;
+  opacity: 0.3;
+  animation: pulse 2s ease-in-out infinite;
 }

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
 }
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(0.8);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.6;
+  }
+}
+
+.loading-text {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  color: #333;
+}
+
+.loading-subtext {
+  font-size: 14px;
+  margin: 0;
+  color: #666;
+}
+
+.notice-text {
+  text-align: center;
+  padding: 20px;
+  background: #f8f9fa;
+  border-top: 2px solid #e9ecef;
+  margin-top: auto;
+}
+
+.notice-text p {
+  margin: 4px 0;
+  font-size: 12px;
+  color: #666;
+}
+
+@media (max-width: 768px) {
+  .spinner-wrapper {
+    width: 64px;
+    height: 64px;
+  }
+
+  .loading-spinner {
+    width: 48px;
+    height: 48px;
+    margin-top: -24px;
+    margin-left: -24px;
+  }
+
+  .loading-pulse {
+    width: 64px;
+    height: 64px;
+    margin-top: -32px;
+    margin-left: -32px;
+  }
+
+  .loading-text {
+    font-size: 16px;
+  }
+}
 </style>
--- a/src/components/play/RefreshWaitPage.vue
+++ b/src/components/play/RefreshWaitPage.vue
@@ -1,26 +1,54 @@
 <template>
  <div class="refresh-wait-page">
    <div class="page-header">
-      <h1 class="title">请选择您的账号类型</h1>
+      <h1 class="title">需要刷新</h1>
    </div>
    
    <div class="refresh-container">
-      <div class="warning-icon">⚠️</div>
+      <div class="icon-wrapper">
+        <svg class="warning-svg" viewBox="0 0 24 24" width="80" height="80">
+          <path fill="#ff9800" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
+        </svg>
+      </div>
      <p class="refresh-text">页面需要刷新</p>
-      <p class="refresh-desc">请等待后重新选择区域</p>
+      <p class="refresh-desc">请等待冷却时间后重新选择区域</p>
+      
+      <div v-if="refreshCooldown > 0" class="cooldown-info">
+        <div class="cooldown-circle">
+          <svg class="cooldown-svg" viewBox="0 0 100 100" width="120" height="120">
+            <circle cx="50" cy="50" r="45" fill="none" stroke="#e9ecef" stroke-width="8"/>
+            <circle 
+              cx="50" 
+              cy="50" 
+              r="45" 
+              fill="none" 
+              stroke="#4776e6" 
+              stroke-width="8"
+              :stroke-dasharray="circumference"
+              :stroke-dashoffset="dashOffset"
+              transform="rotate(-90 50 50)"
+              style="transition: stroke-dashoffset 1s linear;"
+            />
+            <text x="50" y="50" text-anchor="middle" dy="0.3em" font-size="24" font-weight="bold" fill="#4776e6">
+              {{ refreshCooldown }}s
+            </text>
+          </svg>
+        </div>
+      </div>
+
      <button 
        @click="$emit('refresh')" 
        class="refresh-btn"
        :disabled="refreshCooldown > 0"
      >
-        {{ refreshCooldown > 0 ? `请等待 ${refreshCooldown}s` : '确定' }}
+        {{ refreshCooldown > 0 ? `请等待 ${refreshCooldown}秒` : '立即刷新' }}
      </button>
    </div>

    <div class="notice-text">
      <p>代理技术代练平台操作中</p>
      <p>绝对安全保障！请耐心等待</p>
-      <p>温馨提示: 请选择正确区域</p>
+      <p>温馨提示: 刷新后需重新选择区域</p>
      <p v-if="mecmachineId" class="machine-id-info">ID: {{ mecmachineId }}</p>
    </div>
  </div>
@@ -39,7 +67,27 @@ export default {
      default: null
    }
  },
-  emits: ['refresh']
+  emits: ['refresh'],
+  data() {
+    return {
+      maxCooldown: 60
+    }
+  },
+  computed: {
+    circumference() {
+      return 2 * Math.PI * 45
+    },
+    dashOffset() {
+      if (this.refreshCooldown === 0) return this.circumference
+      const progress = this.refreshCooldown / this.maxCooldown
+      return this.circumference * (1 - progress)
+    }
+  },
+  mounted() {
+    if (this.refreshCooldown > 0) {
+      this.maxCooldown = this.refreshCooldown
+    }
+  }
 }
 </script>

@@ -48,20 +96,27 @@ export default {
  flex: 1;
  display: flex;
  flex-direction: column;
-  justify-content: space-between;
+  background: white;
+  min-height: 100vh;
 }

 .page-header {
  text-align: center;
-  padding: 40px 20px 20px;
-  color: white;
+  padding: 20px;
+  background: white;
+  border-bottom: 3px solid #4776e6;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }

 .title {
-  font-size: 24px;
+  font-size: 20px;
  font-weight: 600;
-  margin: 0 0 16px 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  margin: 0;
+  color: #333;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }

 .refresh-container {
@@ -70,63 +125,93 @@ export default {
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  padding: 0 20px;
-  color: white;
+  padding: 40px 20px;
  text-align: center;
 }

-.warning-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
+.icon-wrapper {
+  margin-bottom: 24px;
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-10px);
+  }
+  60% {
+    transform: translateY(-5px);
+  }
+}
+
+.warning-svg {
+  filter: drop-shadow(0 4px 8px rgba(255, 152, 0, 0.3));
 }

 .refresh-text {
-  font-size: 20px;
+  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px 0;
+  color: #333;
 }

 .refresh-desc {
-  font-size: 16px;
-  margin: 0 0 24px 0;
-  opacity: 0.8;
+  font-size: 14px;
+  margin: 0 0 32px 0;
+  color: #666;
+}
+
+.cooldown-info {
+  margin: 24px 0;
+}
+
+.cooldown-circle {
+  display: inline-block;
+  position: relative;
+}
+
+.cooldown-svg {
+  filter: drop-shadow(0 4px 12px rgba(71, 118, 230, 0.3));
 }

 .refresh-btn {
-  background: white;
-  color: #667eea;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  color: white;
  border: none;
  padding: 12px 32px;
-  border-radius: 25px;
-  font-size: 16px;
+  border-radius: 8px;
+  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
-  min-width: 120px;
+  min-width: 140px;
+  margin-top: 16px;
 }

 .refresh-btn:hover:not(:disabled) {
-  background: #f0f0f0;
-  transform: translateY(-2px);
+  opacity: 0.9;
+  transform: translateY(-1px);
 }

 .refresh-btn:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
  cursor: not-allowed;
 }

 .notice-text {
  text-align: center;
  padding: 20px;
-  color: white;
-  background: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
+  background: #f8f9fa;
+  border-top: 2px solid #e9ecef;
+  margin-top: auto;
 }

 .notice-text p {
  margin: 4px 0;
-  font-size: 14px;
-  opacity: 0.9;
+  font-size: 12px;
+  color: #666;
 }

 .machine-id-info {
@@ -134,4 +219,20 @@ export default {
  font-weight: 600 !important;
  opacity: 1 !important;
 }
+
+@media (max-width: 768px) {
+  .warning-svg {
+    width: 64px;
+    height: 64px;
+  }
+
+  .cooldown-svg {
+    width: 100px;
+    height: 100px;
+  }
+
+  .refresh-text {
+    font-size: 18px;
+  }
+}
 </style>
--- a/src/components/play/ScanPage.vue
+++ b/src/components/play/ScanPage.vue
@@ -1,8 +1,13 @@
 <template>
  <div class="scan-page">
    <div class="page-header">
-      <h1 class="title">请选择您的账号类型</h1>
-      <div class="selected-region">{{ regionName }}</div>
+      <h1 class="title">扫码登录</h1>
+    </div>
+
+    <!-- 选中的区域信息 -->
+    <div class="region-info">
+      <div class="info-label">已选择大区</div>
+      <div class="info-value">{{ regionName }}</div>
    </div>

    <!-- 等待二维码 -->
@@ -15,10 +20,18 @@

    <!-- 二维码区域 -->
    <div v-else-if="qrInfo && countdown > 0" class="qr-container">
+      <div class="qr-section">
+        <div class="qr-title">回验证码扫码</div>
        <div class="qr-wrapper">
          <img :src="qrInfo.url" class="qr-code" alt="扫码登录" @error="$emit('qrImageError', $event)" @load="$emit('qrImageLoad', $event)" />
        </div>
-      <div class="countdown-timer">{{ formatTime(countdown) }}</div>
+        <div class="countdown-timer">
+          <svg class="timer-icon" viewBox="0 0 24 24" width="20" height="20">
+            <path fill="currentColor" d="M15,1H9V3H15M19,8H17V14H19M15,21H9V23H15M11,17H13V7H11M17,1.01L17,3.01C19.75,3.55 21.9,5.84 22.28,8.65C22.35,9.15 22.39,9.65 22.39,10.16C22.39,13.65 20.14,16.63 16.97,17.67C16.64,17.77 16.31,17.85 15.97,17.91V19.93C16.39,19.87 16.8,19.78 17.2,19.67C21.15,18.42 24,14.61 24,10.16C24,9.56 23.94,8.96 23.84,8.38C23.31,4.85 20.66,2.04 17.21,1.13C17.14,1.11 17.07,1.09 17,1.01M7,3.01V1.01C6.93,1.09 6.86,1.11 6.79,1.13C3.34,2.04 0.69,4.85 0.16,8.38C0.0600000000000001,8.96 0,9.56 0,10.16C0,14.61 2.85,18.42 6.8,19.67C7.2,19.78 7.61,19.87 8.03,19.93V17.91C7.69,17.85 7.36,17.77 7.03,17.67C3.86,16.63 1.61,13.65 1.61,10.16C1.61,9.65 1.65,9.15 1.72,8.65C2.1,5.84 4.25,3.55 7,3.01Z"/>
+          </svg>
+          <span>{{ formatTime(countdown) }}</span>
+        </div>
+      </div>
    </div>

    <!-- 二维码获取失败 -->
@@ -38,9 +51,11 @@
    <!-- 二维码过期 -->
    <div v-else class="qr-expired">
      <div class="warning-icon">⚠️</div>
-      <p class="expired-text">扫码超时{{ qrInfo?.url }}</p>
+      <p class="expired-text">扫码超时</p>
      <p class="expired-desc">请手动刷新页面重新获取二维码</p>
+      <div class="qr-wrapper expired">
        <img :src="qrInfo?.url" class="qr-code" alt="扫码登录" />
+      </div>
      <button 
        @click="$emit('pageRefresh')" 
        class="refresh-btn"
@@ -52,8 +67,8 @@
    <div class="notice-text">
      <p>代理技术代练平台操作中</p>
      <p>绝对安全保障！请耐心等待</p>
-      <p>温馨提示: 请选择正确区域</p>
-      <p v-if="mecmachineId" class="machine-id-info">机器ID: {{ mecmachineId }}</p>
+      <p>温馨提示: 请耐心等待扫码登录</p>
+      <p v-if="mecmachineId" class="machine-id-info">ID: {{ mecmachineId }}</p>
    </div>
  </div>
 </template>
@@ -110,23 +125,10 @@ export default {
    }
  },
  watch: {
-    isWaitingQr(newVal) {
-      if (newVal && this.mecmachineId) {
-        this.startQrProbe()
-      } else {
-        this.stopQrProbe()
-      }
-    },
-    mecmachineId(newVal) {
-      if (this.isWaitingQr && newVal) {
-        this.startQrProbe()
-      }
-    }
+    // 移除二维码探测逻辑，确保必须等待指定时间
  },
  mounted() {
-    if (this.isWaitingQr && this.mecmachineId) {
-      this.startQrProbe()
-    }
+    // 移除二维码探测逻辑，确保必须等待指定时间
  },
  beforeUnmount() {
    this.stopQrProbe()
@@ -137,21 +139,7 @@ export default {
      const secs = seconds % 60
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
    },
-    startQrProbe() {
-      this.stopQrProbe()
-      const attemptLoad = () => {
-        if (!this.mecmachineId) return
-        const testImg = new Image()
-        testImg.onload = () => {
-          this.$emit('qrImageLoad')
-          this.stopQrProbe()
-        }
-        testImg.onerror = () => {}
-        testImg.src = `https://uzi1.cn/image/${this.mecmachineId}/二维码.png?t=${Date.now()}`
-      }
-      attemptLoad()
-      this.probeTimer = setInterval(attemptLoad, 1000)
-    },
+    // 移除二维码探测方法，确保必须等待指定时间后才显示二维码
    stopQrProbe() {
      if (this.probeTimer) {
        clearInterval(this.probeTimer)
@@ -167,29 +155,50 @@ export default {
  flex: 1;
  display: flex;
  flex-direction: column;
-  justify-content: space-between;
+  background: white;
+  min-height: 100vh;
 }

 .page-header {
  text-align: center;
-  padding: 40px 20px 20px;
-  color: white;
+  padding: 20px;
+  background: white;
+  border-bottom: 3px solid #4776e6;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }

 .title {
-  font-size: 24px;
+  font-size: 20px;
  font-weight: 600;
-  margin: 0 0 16px 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  margin: 0;
+  color: #333;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }

-.selected-region {
-  background: rgba(255, 255, 255, 0.2);
-  padding: 8px 16px;
-  border-radius: 20px;
-  display: inline-block;
+.region-info {
+  background: #f8f9fa;
+  padding: 16px;
+  margin: 16px;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.info-label {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+.info-value {
  font-size: 16px;
-  backdrop-filter: blur(10px);
+  color: #4CAF50;
+  font-weight: 600;
 }

 .qr-container {
@@ -198,7 +207,24 @@ export default {
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  padding: 0 20px;
+  padding: 20px;
+}
+
+.qr-section {
+  background: white;
+  padding: 24px;
+  border-radius: 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  width: 100%;
+  max-width: 320px;
+}
+
+.qr-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 20px;
 }

 .qr-waiting {
@@ -207,50 +233,65 @@ export default {
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  padding: 0 20px;
-  color: white;
+  padding: 40px 20px;
  text-align: center;
 }

 .waiting-text {
-  font-size: 20px;
+  font-size: 18px;
  font-weight: 600;
  margin: 16px 0 8px 0;
+  color: #333;
 }

 .waiting-desc {
-  font-size: 16px;
+  font-size: 14px;
  margin: 0;
-  opacity: 0.8;
+  color: #666;
 }

 .retry-info {
  font-size: 14px;
  margin: 8px 0 0 0;
-  opacity: 0.9;
-  color: #ffd700;
+  color: #ff9800;
  font-weight: 500;
 }

 .qr-wrapper {
  background: white;
-  padding: 20px;
-  border-radius: 20px;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  margin-bottom: 20px;
+  padding: 16px;
+  border-radius: 12px;
+  border: 2px solid #e9ecef;
+  display: inline-block;
+  margin-bottom: 16px;
+}
+
+.qr-wrapper.expired {
+  opacity: 0.5;
+  filter: grayscale(1);
 }

 .qr-code {
-  width: 200px;
-  height: 200px;
+  width: 220px;
+  height: 220px;
  display: block;
 }

 .countdown-timer {
-  color: white;
-  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: #4776e6;
+  font-size: 16px;
  font-weight: 600;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  padding: 8px 16px;
+  background: #f3f4ff;
+  border-radius: 8px;
+}
+
+.timer-icon {
+  color: #4776e6;
 }

 .qr-expired, .qr-error {
@@ -259,13 +300,12 @@ export default {
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  padding: 0 20px;
-  color: white;
+  padding: 40px 20px;
  text-align: center;
 }

 .warning-icon, .error-icon {
-  font-size: 48px;
+  font-size: 64px;
  margin-bottom: 16px;
 }

@@ -273,42 +313,46 @@ export default {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
+  color: #333;
 }

 .expired-desc, .error-desc {
-  font-size: 16px;
+  font-size: 14px;
  margin: 0 0 24px 0;
-  opacity: 0.8;
+  color: #666;
 }

 .refresh-btn, .retry-btn {
-  background: white;
-  color: #667eea;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  color: white;
  border: none;
  padding: 12px 32px;
-  border-radius: 25px;
-  font-size: 16px;
+  border-radius: 8px;
+  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
+  margin-top: 16px;
 }

-.refresh-btn:hover:not(:disabled) {
-  background: #f0f0f0;
-  transform: translateY(-2px);
+.refresh-btn:hover:not(:disabled),
+.retry-btn:hover:not(:disabled) {
+  opacity: 0.9;
+  transform: translateY(-1px);
 }

-.refresh-btn:disabled {
-  opacity: 0.6;
+.refresh-btn:disabled,
+.retry-btn:disabled {
+  opacity: 0.5;
  cursor: not-allowed;
 }

 .loading-spinner {
-  width: 40px;
-  height: 40px;
+  width: 48px;
+  height: 48px;
  border: 4px solid #f3f3f3;
-  border-top: 4px solid #667eea;
+  border-top: 4px solid #4776e6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
@@ -322,15 +366,15 @@ export default {
 .notice-text {
  text-align: center;
  padding: 20px;
-  color: white;
-  background: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
+  background: #f8f9fa;
+  border-top: 2px solid #e9ecef;
+  margin-top: auto;
 }

 .notice-text p {
  margin: 4px 0;
-  font-size: 14px;
-  opacity: 0.9;
+  font-size: 12px;
+  color: #666;
 }

 .machine-id-info {
@@ -341,8 +385,17 @@ export default {

@media (max-width: 768px) {
  .qr-code {
-    width: 150px;
-    height: 150px;
+    width: 180px;
+    height: 180px;
+  }
+
+  .qr-section {
+    padding: 20px;
+    max-width: 280px;
+  }
+
+  .qr-title {
+    font-size: 16px;
  }
 }
 </style>
--- a/src/components/play/SelectRegion.vue
+++ b/src/components/play/SelectRegion.vue
@@ -1,30 +1,70 @@
 <template>
  <div class="select-region-page">
    <div class="page-header">
-      <h1 class="title">请选择您的账号类型</h1>
+      <h1 class="title">订单详情</h1>
    </div>
    
-    <div class="region-buttons">
+    <!-- 订单详情表格 -->
+    <div class="order-details">
+      <div class="detail-row">
+        <div class="detail-label">代练大区</div>
+        <div class="detail-label">状态</div>
+        <div class="detail-label">打手信息</div>
+        <div class="detail-label">目标点数</div>
+      </div>
+      <div class="detail-row detail-values">
+        <div class="detail-value region-value">{{ selectedRegion || '未选择' }}</div>
+        <div class="detail-value">待选区</div>
+        <div class="detail-value">{{ mecmachineId || '待分配' }}</div>
+        <div class="detail-value points-value">{{ totalPoints || 4000 }}</div>
+      </div>
+    </div>
+
+    <!-- 选择大区输入框 -->
+    <div class="region-selector">
+      <input 
+        type="text" 
+        v-model="regionInput" 
+        placeholder="请选择大区"
+        readonly
+        class="region-input"
+      />
      <button 
-        @click="$emit('selectRegion', 'Q')" 
-        class="region-btn qq-btn"
-        :disabled="submitting"
-        :class="{ 'loading': submitting }"
+        @click="confirmSelection" 
+        class="confirm-btn"
+        :disabled="!selectedRegion || submitting"
      >
-        <div v-if="submitting" class="loading-spinner small"></div>
-        <div v-else class="btn-icon">Q</div>
-        <span class="btn-text">{{ submitting ? '正在连接...' : 'QQ区' }}</span>
+        确认选择
+      </button>
+    </div>
+
+    <!-- 选择区域按钮 -->
+    <div class="region-options">
+      <button 
+        @click="selectRegionOption('Q')" 
+        class="option-btn qq-option"
+        :class="{ 'selected': selectedRegion === 'QQ区' }"
+      >
+        <div class="option-icon qq-icon">
+          <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor">
+            <circle cx="12" cy="12" r="10" />
+          </svg>
+        </div>
+        <span>QQ区</span>
      </button>
      
      <button 
-        @click="$emit('selectRegion', 'V')" 
-        class="region-btn wx-btn"
-        :disabled="submitting"
-        :class="{ 'loading': submitting }"
+        @click="selectRegionOption('V')" 
+        class="option-btn wx-option"
+        :class="{ 'selected': selectedRegion === '微信区' }"
      >
-        <div v-if="submitting" class="loading-spinner small"></div>
-        <div v-else class="btn-icon">V</div>
-        <span class="btn-text">{{ submitting ? '正在连接...' : '微信区' }}</span>
+        <div class="option-icon wx-icon">
+          <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
+            <path d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z"/>
+          </svg>
+        </div>
+        <span>微信区</span>
      </button>
    </div>

@@ -49,9 +89,37 @@ export default {
    mecmachineId: {
      type: String,
      default: null
+    },
+    totalPoints: {
+      type: Number,
+      default: 4000
    }
  },
-  emits: ['selectRegion']
+  data() {
+    return {
+      selectedRegion: '',
+      regionInput: '',
+      regionCode: ''
+    }
+  },
+  emits: ['selectRegion'],
+  methods: {
+    selectRegionOption(code) {
+      this.regionCode = code
+      if (code === 'Q') {
+        this.selectedRegion = 'QQ区'
+        this.regionInput = 'QQ区'
+      } else if (code === 'V') {
+        this.selectedRegion = '微信区'
+        this.regionInput = '微信区'
+      }
+    },
+    confirmSelection() {
+      if (this.regionCode && !this.submitting) {
+        this.$emit('selectRegion', this.regionCode)
+      }
+    }
+  }
 }
 </script>

@@ -60,131 +128,213 @@ export default {
  flex: 1;
  display: flex;
  flex-direction: column;
-  justify-content: space-between;
+  background: white;
+  min-height: 100vh;
 }

 .page-header {
  text-align: center;
-  padding: 40px 20px 20px;
-  color: white;
+  padding: 20px;
+  background: white;
+  border-bottom: 3px solid #4776e6;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }

 .title {
-  font-size: 24px;
+  font-size: 20px;
  font-weight: 600;
-  margin: 0 0 16px 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  margin: 0;
+  color: #333;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }

-.region-buttons {
+/* 订单详情表格 */
+.order-details {
+  background: white;
+  margin: 16px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.detail-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.detail-label {
+  padding: 12px 8px;
+  text-align: center;
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.detail-values {
+  background: white;
+}
+
+.detail-value {
+  padding: 12px 8px;
+  text-align: center;
+  border: 1px solid #e9ecef;
+  border-top: none;
+  font-size: 14px;
+  color: #666;
+}
+
+.region-value {
+  color: #4CAF50;
+  font-weight: 600;
+}
+
+.points-value {
+  color: #f44336;
+  font-weight: 600;
+}
+
+/* 选择大区区域 */
+.region-selector {
+  margin: 16px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.region-input {
+  flex: 1;
+  padding: 12px 16px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 14px;
+  background: white;
+  color: #333;
+}
+
+.region-input::placeholder {
+  color: #999;
+}
+
+.confirm-btn {
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.confirm-btn:hover:not(:disabled) {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.confirm-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 选择区域按钮 */
+.region-options {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
-  padding: 0 20px;
+  padding: 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);
+.option-btn {
  display: flex;
  flex-direction: column;
-  justify-content: center;
  align-items: center;
+  gap: 12px;
+  padding: 20px;
+  background: white;
+  border: 3px solid transparent;
+  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
-  font-size: 16px;
-  font-weight: 600;
+  min-width: 120px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

-.region-btn:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
+.option-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

-.region-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.region-btn.loading {
-  opacity: 0.8;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.region-btn.loading:hover {
-  transform: none;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-}
-
-.btn-icon {
-  width: 50px;
-  height: 50px;
+.option-icon {
+  width: 60px;
+  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
-  font-size: 24px;
-  font-weight: bold;
  color: white;
-  margin-bottom: 12px;
+  transition: all 0.3s ease;
 }

-.qq-btn .btn-icon {
+.qq-icon {
  background: #12B7F5;
 }

-.wx-btn .btn-icon {
+.wx-icon {
  background: #07C160;
 }

-.btn-text {
-  color: #333;
+.option-btn span {
  font-size: 16px;
+  font-weight: 500;
+  color: #333;
 }

-.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;
+.option-btn.selected {
+  border-color: #4776e6;
+  background: #f3f4ff;
 }

-.loading-spinner.small {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #f3f3f3;
-  border-top: 2px solid #667eea;
-  margin: 0;
+.qq-option.selected {
+  border-color: #12B7F5;
+  background: #e3f2fd;
 }

-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+.qq-option.selected span {
+  color: #12B7F5;
+  font-weight: 600;
+}
+
+.wx-option.selected {
+  border-color: #07C160;
+  background: #e8f5e9;
+}
+
+.wx-option.selected span {
+  color: #07C160;
+  font-weight: 600;
 }

 .notice-text {
  text-align: center;
  padding: 20px;
-  color: white;
-  background: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
+  background: #f8f9fa;
+  border-top: 2px solid #e9ecef;
+  margin-top: auto;
 }

 .notice-text p {
  margin: 4px 0;
-  font-size: 14px;
-  opacity: 0.9;
+  font-size: 12px;
+  color: #666;
 }

 .machine-id-info {
@@ -194,22 +344,37 @@ export default {
 }

@media (max-width: 768px) {
-  .region-buttons {
+  .detail-label,
+  .detail-value {
+    padding: 10px 6px;
+    font-size: 12px;
+  }
+  
+  .region-selector {
+    flex-direction: column;
+  }
+  
+  .region-input,
+  .confirm-btn {
+    width: 100%;
+  }
+
+  .region-options {
    gap: 20px;
+    padding: 16px;
  }

-  .region-btn {
-    width: 100px;
-    height: 100px;
+  .option-btn {
+    min-width: 100px;
+    padding: 16px;
  }

-  .btn-icon {
-    width: 40px;
-    height: 40px;
-    font-size: 20px;
+  .option-icon {
+    width: 50px;
+    height: 50px;
  }

-  .btn-text {
+  .option-btn span {
    font-size: 14px;
  }
 }
--- a/src/composables/usePlayState.js
+++ b/src/composables/usePlayState.js
@@ -37,7 +37,9 @@ export function usePlayState() {
    machineId: null,
    qrCreatedAt: null,
    qrExpireAt: null,
-    qrDelayTimeoutId: null
+    qrDelayTimeoutId: null,
+    completedAt: null,
+    isCompletedExpired: false
  })

  const initializePage = async () => {
@@ -148,6 +150,25 @@ export function usePlayState() {
      
      state.status = 'COMPLETED'
      
+      // 保存完成时间戳
+      if (gameData.completedAt) {
+        state.completedAt = gameData.completedAt
+        
+        // 判断是否超过24小时
+        const now = Math.floor(Date.now() / 1000) // 当前时间戳（秒）
+        const completedTime = gameData.completedAt
+        const hoursPassed = (now - completedTime) / 3600 // 转换为小时
+        
+        state.isCompletedExpired = hoursPassed > 24
+        
+        console.log('完成时间判断:', {
+          completedAt: completedTime,
+          now: now,
+          hoursPassed: hoursPassed.toFixed(2),
+          isExpired: state.isCompletedExpired
+        })
+      }
+      
      // 更新区域和机器信息
      if (gameData.region) {
        state.region = gameData.region
@@ -181,6 +202,8 @@ export function usePlayState() {
        totalPoints: state.totalPoints,
        completedPoints: state.completedPoints,
        currentPoints: state.currentPoints,
+        completedAt: state.completedAt,
+        isCompletedExpired: state.isCompletedExpired,
        assets: !!state.assets 
      })
      
--- a/src/config/links.js
+++ b/src/config/links.js
@@ -13,7 +13,11 @@ export const LINK_CONFIG = {
  
  // 链接地址模板
  getLinkUrl: (codeNo) => {
-    return `${LINK_CONFIG.BASE_URL}${LINK_CONFIG.GAME_PATH}?${LINK_CONFIG.CODE_PARAM}=${codeNo}`
+    // 生成随机参数：时间戳 + 随机字符串
+    const timestamp = Date.now()
+    const random = Math.random().toString(36).substring(2, 8)
+    const randomParam = `${timestamp}${random}`
+    return `${LINK_CONFIG.BASE_URL}${LINK_CONFIG.GAME_PATH}/${codeNo}?t=${randomParam}`
  }
 }

--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -43,10 +43,6 @@
          <i class="el-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></i>
          <span>公告管理</span>
        </el-menu-item>
-        <el-menu-item v-if="canAccessDeviceStatus" index="DeviceStatus" :route="{ name: 'DeviceStatus' }">
-          <i class="el-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M21 6h-7V4h-4v2H3c-1.1 0-2 .9-2 2v10a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2m0 12H3V8h18v10M8 10h2v6H8v-6m3 0h2v6h-2v-6m3 0h2v6h-2v-6Z"/></svg></i>
-          <span>设备状态</span>
-        </el-menu-item>
        <el-menu-item v-if="canAccessSettings" index="Settings" :route="{ name: 'Settings' }">
          <i class="el-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="m12 8l-2 4h4l-2 4"/></svg></i>
          <span>系统设置</span>
@@ -118,7 +114,6 @@ const pageTitleMap = {
  'Links': '链接管理', 
  'Refund': '退单管理',
  'Announcements': '公告管理',
-  'DeviceStatus': '设备状态',
  'Settings': '系统设置'
 }

@@ -135,7 +130,6 @@ const canAccessUsers = computed(() => canAccessRoute('Users'))
 const canAccessLinks = computed(() => canAccessRoute('Links'))
 const canAccessRefund = computed(() => canAccessRoute('Refund'))
 const canAccessAnnouncements = computed(() => canAccessRoute('Announcements'))
-const canAccessDeviceStatus = computed(() => canAccessRoute('DeviceStatus'))
 const canAccessSettings = computed(() => canAccessRoute('Settings'))

 // 获取积分余额
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,11 +12,11 @@ const AnnouncementList = () => import('@/views/announcements/AnnouncementList.vu
 const RefundManagement = () => import('@/views/refund/RefundManagement.vue')
 const Play = () => import('@/views/Play.vue')
 const NotFound = () => import('@/views/NotFound.vue')
-const DeviceStatus = () => import('@/views/devices/DeviceStatus.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: '/play/:code', name: 'Play', component: Play, meta: { public: true, title: '上号任务' } },
+  { path: '/play', name: 'PlayLegacy', component: Play, meta: { public: true, title: '上号任务' } },
  {
    path: '/',
    component: AdminLayout,
@@ -39,7 +39,6 @@ export const routes = [
      { path: 'links', name: 'Links', component: LinkGenerate, meta: { title: '链接管理' } },
      { path: 'refund', name: 'Refund', component: RefundManagement, meta: { title: '退单管理' } },
      { path: 'announcements', name: 'Announcements', component: AnnouncementList, meta: { title: '公告管理' } },
-      { path: 'devices', name: 'DeviceStatus', component: DeviceStatus, meta: { title: '设备状态' } },
    ],
  },
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound, meta: { public: true, title: '未找到' } },
--- a/src/utils/permission.js
+++ b/src/utils/permission.js
@@ -49,8 +49,6 @@ export const PERMISSIONS = {
  REFUND_EXECUTE: 'refund:execute',
  REFUND_VIEW: 'refund:view',

-  // 设备状态查看
-  DEVICE_VIEW: 'device:view',
 }

 // 角色权限映射
@@ -96,7 +94,6 @@ export const ROUTE_PERMISSIONS = {
  'Links': [PERMISSIONS.LINK_VIEW],
  'Refund': [PERMISSIONS.REFUND_VIEW],
  'Announcements': [PERMISSIONS.ANNOUNCEMENT_VIEW],
-  'DeviceStatus': [PERMISSIONS.DEVICE_VIEW],
 }

 // 获取当前用户信息
--- a/src/views/Play.vue
+++ b/src/views/Play.vue
@@ -8,6 +8,7 @@
      v-else-if="state.status === 'NEW' && !state.needRefresh"
      :submitting="state.submitting"
      :mecmachine-id="state.mecmachineId || state.machineId"
+      :total-points="state.totalPoints"
      @select-region="handleSelectRegion"
    />

@@ -32,7 +33,7 @@

    <!-- 游戏界面 -->
    <GamePage
-      v-else-if="state.status === 'LOGGED_IN'"
+      v-else-if="state.status === 'LOGGED_IN' || (state.status === 'COMPLETED' && !state.isCompletedExpired)"
      :region="state.region"
      :region-desc="state.regionDesc"
      :machine-id="state.machineId"
@@ -47,8 +48,8 @@
      :code-no="state.code"
    />

-    <!-- 完成状态 -->
-    <div v-else-if="state.status === 'COMPLETED'" class="completed-page">
+    <!-- 完成状态（超过24小时） -->
+    <div v-else-if="state.status === 'COMPLETED' && state.isCompletedExpired" class="completed-page">
      <div class="completed-text">已打完</div>
    </div>

@@ -141,7 +142,8 @@ export default {
    } = useQrCode()

    onMounted(() => {
-      const code = route.query.code
+      // 兼容两种方式：路径参数和查询参数
+      const code = route.params.code || route.query.code
      if (!code) {
        state.error = 'INVALID_CODE'
        state.loading = false
@@ -197,38 +199,8 @@ export default {
    }

    const handleQrReadyEarly = async () => {
-      try {
-        if (!state.isWaitingQr) return
-        if (!state.mecmachineId) return
-        if (state.qrInfo && state.qrInfo.url) return
-        // 结束等待并清理相关定时器
-        state.isWaitingQr = false
-        clearQrDelayCountdown()
-        if (typeof clearQrDelayTimeout === 'function') {
-          clearQrDelayTimeout(state)
-        }
-        // 立即拉取二维码并开始倒计时与登录轮询
-        await fetchQrCodeAfterDelay(
-          state,
-          countdown,
-          state.mecmachineId,
-          state.qrCreatedAt,
-          state.qrExpireAt
-        )
-        if (state.status === 'USING') {
-          startCountdown()
-          startLoginPolling(state.code, handleLoggedInStatus, handleCompletedStatus)
-          startProgressPolling(state.code, (progressData) => {
-            state.currentPoints = progressData.currentPoints || state.currentPoints
-            state.totalPoints = progressData.totalPoints || state.totalPoints
-            if (progressData.completedPoints !== undefined) {
-              state.completedPoints = progressData.completedPoints
-            }
-          })
-        }
-      } catch (error) {
-        console.error('提前获取二维码失败:', error)
-      }
+      // 移除提前显示二维码的逻辑，确保必须等待指定时间后才显示
+      console.log('二维码提前就绪事件被忽略，必须等待指定时间后才显示')
    }

    return {
@@ -260,7 +232,7 @@ export default {
 <style scoped>
 .play-container {
  min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
  display: flex;
  flex-direction: column;
  position: relative;
--- a/src/views/devices/DeviceStatus.vue
+++ b/src/views/devices/DeviceStatus.vue
@@ -1,127 +0,0 @@
-<template>
-  <div class="device-status-view">
-    <el-card class="header-card">
-      <template #header>
-        <div class="header">
-          <h3 class="title">设备状态</h3>
-          <div class="actions">
-            <el-button type="primary" :loading="loading" @click="fetchData">
-              <el-icon><Refresh /></el-icon>
-              刷新
-            </el-button>
-            <el-switch v-model="autoRefresh" active-text="自动刷新" @change="onToggleAuto" />
-          </div>
-        </div>
-      </template>
-      <div class="stats">
-        <el-statistic title="设备总数" :value="stats.totalDevices" />
-        <el-statistic title="已占用" :value="stats.runningCount" />
-        <el-statistic title="使用中" :value="stats.usingCount" />
-        <el-statistic title="冷却空闲" :value="stats.idleCooldownCount" />
-        <el-statistic title="空闲" :value="stats.idleFreeCount" />
-      </div>
-    </el-card>
-
-    <el-card class="table-card">
-      <el-table :data="categoryRows" v-loading="loading" border style="width: 100%">
-        <el-table-column prop="label" label="类别" width="140" />
-        <el-table-column prop="count" label="数量" width="100" />
-        <el-table-column label="设备列表" min-width="300">
-          <template #default="{ row }">
-            <div class="devices-list" :title="row.devices.join(', ')">{{ row.preview }}</div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-  </div>
-  
-</template>
-
-<script setup>
-import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
-import { Refresh } from '@element-plus/icons-vue'
-import { getAllDeviceStatus } from '@/api/devices'
-import { isAdmin, canAccessRoute } from '@/utils/permission'
-
-// 仅管理员可访问（路由守卫已做拦截，这里再次防御）
-const allowed = computed(() => isAdmin() || canAccessRoute('DeviceStatus'))
-
-const loading = ref(false)
-const autoRefresh = ref(true)
-const timer = ref(null)
-
-const stats = reactive({ totalDevices: 0, runningCount: 0, usingCount: 0, idleCooldownCount: 0, idleFreeCount: 0 })
-const categoryToDevices = ref({})
-
-const categoryOrder = ['RUNNING', 'USING', 'IDLE_COOLDOWN', 'IDLE_FREE']
-const categoryLabelMap = { RUNNING: '已占用', USING: '使用中', IDLE_COOLDOWN: '冷却空闲', IDLE_FREE: '空闲' }
-const categoryRows = computed(() => {
-  const map = categoryToDevices.value || {}
-  return categoryOrder.map(key => {
-    const devices = Array.isArray(map[key]) ? map[key] : []
-    const preview = devices.join(', ')
-    return { key, label: categoryLabelMap[key] || key, count: devices.length, devices, preview }
-  })
-})
-
-async function fetchData() {
-  if (!allowed.value) return
-  try {
-    loading.value = true
-    const data = await getAllDeviceStatus()
-    categoryToDevices.value = data?.categoryToDevices || {}
-    stats.totalDevices = data?.totalDevices ?? 0
-    stats.runningCount = data?.runningCount ?? (categoryToDevices.value['RUNNING']?.length || 0)
-    stats.usingCount = data?.usingCount ?? (categoryToDevices.value['USING']?.length || 0)
-    stats.idleCooldownCount = data?.idleCooldownCount ?? (categoryToDevices.value['IDLE_COOLDOWN']?.length || 0)
-    stats.idleFreeCount = data?.idleFreeCount ?? (categoryToDevices.value['IDLE_FREE']?.length || 0)
-  } finally {
-    loading.value = false
-  }
-}
-
-function onToggleAuto(val) {
-  if (val) startAuto()
-  else stopAuto()
-}
-
-function startAuto() {
-  stopAuto()
-  timer.value = setInterval(fetchData, 2000)
-}
-
-function stopAuto() {
-  if (timer.value) {
-    clearInterval(timer.value)
-    timer.value = null
-  }
-}
-
-onMounted(() => {
-  fetchData()
-  if (autoRefresh.value) startAuto()
-})
-
-onUnmounted(() => {
-  stopAuto()
-})
-</script>
-
-<style scoped>
-.device-status-view { padding: 0; }
-.header-card { margin-bottom: 16px; }
-.header { display: flex; align-items: center; justify-content: space-between; }
-.title { margin: 0; font-size: 18px; font-weight: 600; }
-.actions { display: flex; gap: 12px; align-items: center; }
-.stats { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
-.inline-tag { height: 24px; align-items: center; }
-.devices-list { white-space: normal; word-break: break-all; line-height: 1.6; }
-
-@media (max-width: 768px) {
-  .title { font-size: 20px; }
-  .actions { gap: 8px; }
-  .stats { gap: 12px; }
-}
-</style>
-
-
--- a/src/views/links/LinkGenerate.vue
+++ b/src/views/links/LinkGenerate.vue
@@ -1,5 +1,16 @@
 <template>
  <div class="link-generate" :class="{ 'mobile-layout': isMobile }">
+    <!-- 设备状态提示 -->
+    <div class="device-status-alert" v-if="deviceStatusLoaded">
+      <el-alert
+        :title="deviceStatusText"
+        :type="deviceStatusType"
+        show-icon
+        :closable="false"
+        class="status-alert"
+      />
+    </div>
+    
    <!-- 生成表单 -->
    <el-card class="generate-form-card">
      <template #header>
@@ -525,6 +536,7 @@ import {
 import { generateLinks, fetchLinks, deleteLink, batchDeleteLinks, batchDeleteByStatus } from '@/api/links'
 import { copyToClipboard as copyText, exportToExcel as exportExcelUtil } from '@/utils/links'
 import { LINK_CONFIG, STATUS_CONFIG, EXPORT_CONFIG } from '@/config/links'
+import { getAllDeviceStatus } from '@/api/devices'

 // 响应式数据
 const generateFormRef = ref()
@@ -534,6 +546,11 @@ const linkList = ref([])

 const isMobile = ref(false)

+// 设备状态相关
+const deviceStatusLoaded = ref(false)
+const deviceStatusText = ref('')
+const deviceStatusType = ref('info')
+
 // 检测移动端
 const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
@@ -692,6 +709,33 @@ const refreshList = () => {
  return getLinkList()
 }

+// 获取设备状态
+const getDeviceStatus = async () => {
+  try {
+    const data = await getAllDeviceStatus()
+    
+    // 计算空闲设备数量（冷却空闲 + 完全空闲）
+    const idleCooldownCount = data?.idleCooldownCount || 0
+    const idleFreeCount = data?.idleFreeCount || 0
+    const totalIdleCount = idleCooldownCount + idleFreeCount
+    
+    deviceStatusLoaded.value = true
+    
+    if (totalIdleCount > 0) {
+      deviceStatusText.value = `当前有空闲设备可用`
+      deviceStatusType.value = 'success'
+    } else {
+      deviceStatusText.value = '当前暂无空闲设备，请稍后再试'
+      deviceStatusType.value = 'warning'
+    }
+  } catch (error) {
+    console.error('获取设备状态失败:', error)
+    deviceStatusLoaded.value = true
+    deviceStatusText.value = '无法获取设备状态'
+    deviceStatusType.value = 'error'
+  }
+}
+
 // 分页处理
 const handleSizeChange = (size) => {
  pagination.pageSize = size
@@ -1001,13 +1045,17 @@ const downloadCurrentBatch = async () => {
  try {
    batchDownloadDialog.downloading = true
    
-    // 根据批次ID筛选当前批次的数据
-    const currentBatchData = linkList.value.filter(item => 
-      item.batchId === batchDownloadDialog.batchId
-    )
+    // 通过API获取该批次的所有数据（不受分页限制）
+    const response = await fetchLinks({
+      batchId: batchDownloadDialog.batchId,
+      page: 1,
+      pageSize: 1000  // 设置一个足够大的值以获取所有数据
+    })
+    
+    const currentBatchData = response.data.items || []
    
    if (currentBatchData.length === 0) {
-      ElMessage.warning('未找到当前批次的数据，请刷新列表后重试')
+      ElMessage.warning('未找到当前批次的数据，请重试')
      return
    }
    
@@ -1055,6 +1103,8 @@ const copyCurrentBatchSingleLink = async () => {
  if (batchDownloadDialog.count !== 1 || !batchDownloadDialog.singleCodeNo) return
  const url = generateLinkUrl(batchDownloadDialog.singleCodeNo)
  await copyToClipboard(url)
+  // 复制完成后关闭弹窗
+  closeBatchDownloadDialog()
 }

 const handleBatchDeleteByStatus = async () => {
@@ -1118,6 +1168,7 @@ onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
  getLinkList()
+  getDeviceStatus()
  
  // 初始化表单默认值
  generateForm.times = 1
@@ -1136,6 +1187,15 @@ onUnmounted(() => {
  min-height: 100vh;
 }

+/* 设备状态提示样式 */
+.device-status-alert {
+  margin-bottom: 20px;
+}
+
+.status-alert {
+  border-radius: 8px;
+}
+
 .generate-form-card,
 .link-list-card {
  margin-bottom: 20px;
@@ -1458,6 +1518,14 @@ onUnmounted(() => {
    background: #f5f7fa;
  }

+  .device-status-alert {
+    margin-bottom: 16px;
+  }
+
+  .status-alert {
+    border-radius: 12px;
+  }
+
  .mobile-layout {
    background: #f5f7fa;
  }
@@ -1511,9 +1579,9 @@ onUnmounted(() => {
  }

  .primary-action-btn {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
    border: none;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 4px 15px rgba(71, 118, 230, 0.4);
  }

  .pagination-wrapper {
--- a/src/views/oldplay.vue
+++ b/src/views/oldplay.vue
@@ -1024,7 +1024,7 @@ export default {
 <style scoped>
 .play-container {
  min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
  display: flex;
  flex-direction: column;
  position: relative;
@@ -1050,7 +1050,7 @@ export default {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
-  border-top: 4px solid #667eea;
+  border-top: 4px solid #4776e6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
@@ -1060,7 +1060,7 @@ export default {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
-  border-top: 2px solid #667eea;
+  border-top: 2px solid #4776e6;
  margin: 0;
 }

@@ -1273,7 +1273,7 @@ export default {

 .refresh-btn, .retry-btn {
  background: white;
-  color: #667eea;
+  color: #4776e6;
  border: none;
  padding: 12px 32px;
  border-radius: 25px;
@@ -1574,7 +1574,7 @@ export default {
 }

 .retry-btn {
-  background: #667eea;
+  background: #4776e6;
  color: white;
  border: none;
  padding: 12px 32px;
@@ -1586,7 +1586,7 @@ export default {
 }

 .retry-btn:hover {
-  background: #5a6fd8;
+  background: #3d6ad6;
  transform: translateY(-2px);
 }

--- a/vite.config.js
+++ b/vite.config.js
@@ -27,7 +27,8 @@ export default defineConfig({
  server: {
    proxy: {
      '/api': {
-        target: 'http://127.0.0.1:18080',
+        target: 'https://uzi1.cn/api',
+        // target: 'http://localhost:18080',
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/api/, ''),
      },
--- a/部署指南.md
+++ b/部署指南.md
@@ -0,0 +1,282 @@
+# 游戏平台前端项目部署指南
+
+## 项目概述
+
+本项目是一个基于 Vue 3 + Vite 的单页应用(SPA)，包含管理后台和游戏功能。项目使用 Element Plus 作为 UI 组件库，Axios 进行 HTTP 请求。
+
+## 📋 环境要求
+
+### 开发环境
+- Node.js 版本：>= 16.0.0
+- npm 版本：>= 8.0.0 或 yarn >= 1.22.0
+
+### 生产环境
+- Web 服务器：Nginx（推荐）或 Apache
+- 后端 API 服务：需要运行在 `http://192.140.164.137:18080`
+
+## 🚀 快速部署
+
+### 1. 准备工作
+
+```bash
+# 克隆项目（如果需要）
+git clone <repository-url>
+cd login_task_web
+
+# 安装依赖
+npm install
+
+# 验证开发环境
+npm run dev
+```
+
+### 2. 构建生产版本
+
+```bash
+# 构建项目
+npm run build
+
+# 构建完成后，dist 目录包含所有静态文件
+```
+
+构建产物说明：
+- `dist/index.html` - 主页面文件
+- `dist/assets/` - 静态资源（JS、CSS、图片等）
+
+### 3. 部署到服务器
+
+将 `dist` 目录下的所有文件上传到 Web 服务器的网站根目录。
+
+## 🔧 服务器配置
+
+由于本项目是单页应用(SPA)，需要正确配置服务器以支持：
+1. **路由回退**：所有前端路由都应返回 `index.html`
+2. **API 代理**：代理 `/api/*` 请求到后端服务器
+3. **CORS 处理**：解决跨域问题
+
+### 🌟 方式一：Nginx 配置（推荐）
+
+#### 使用项目提供的配置文件
+
+1. **复制 Nginx 配置**
+   ```bash
+   cp nginx.conf /etc/nginx/sites-available/your-site.conf
+   ```
+
+2. **修改配置文件中的路径**
+   ```nginx
+   # 修改为您的实际部署路径
+   root /var/www/your-site/dist;
+   ```
+
+3. **启用站点并重载**
+   ```bash
+   sudo ln -s /etc/nginx/sites-available/your-site.conf /etc/nginx/sites-enabled/
+   sudo nginx -t
+   sudo nginx -s reload
+   ```
+
+#### 完整 Nginx 配置示例
+
+```nginx
+server {
+    listen 80;
+    server_name your-domain.com;
+    root /var/www/your-site/dist;
+    index index.html;
+
+    # 静态资源缓存
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        try_files $uri =404;
+    }
+
+    # API 代理
+    location /api/ {
+        proxy_pass http://192.140.164.137:18080/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        
+        # CORS 设置
+        add_header Access-Control-Allow-Origin *;
+        add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
+        add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
+        
+        # 处理预检请求
+        if ($request_method = 'OPTIONS') {
+            add_header Access-Control-Allow-Origin *;
+            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
+            add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
+            add_header Access-Control-Max-Age 1728000;
+            add_header Content-Type 'text/plain; charset=utf-8';
+            add_header Content-Length 0;
+            return 204;
+        }
+    }
+
+    # SPA 路由配置（关键！）
+    location / {
+        try_files $uri $uri/ @fallback;
+    }
+
+    location @fallback {
+        rewrite ^.*$ /index.html last;
+    }
+
+    # 错误页面
+    error_page 404 /index.html;
+}
+```
+
+### 🛠️ 方式二：宝塔面板部署
+
+参考项目中的 `宝塔面板操作步骤.md` 文件，关键步骤：
+
+1. **上传文件**
+   - 将 `dist` 目录下所有文件上传到网站根目录
+
+2. **修改 Nginx 配置**
+   - 登录宝塔面板 → 网站 → 设置 → 配置文件
+   - 在 `#REWRITE-END` 后添加 API 代理配置
+   - 添加 SPA 路由回退配置
+
+3. **保存并重载配置**
+
+### 🔨 方式三：Apache 配置
+
+1. **复制 .htaccess 文件**
+   ```bash
+   cp apache.htaccess dist/.htaccess
+   ```
+
+2. **确保 Apache 模块已启用**
+   ```bash
+   sudo a2enmod rewrite
+   sudo a2enmod headers
+   sudo a2enmod proxy
+   sudo a2enmod proxy_http
+   sudo systemctl restart apache2
+   ```
+
+### ☁️ 方式四：Netlify 部署
+
+1. **复制重定向文件**
+   ```bash
+   cp _redirects dist/
+   ```
+
+2. **部署到 Netlify**
+   - 上传 `dist` 目录到 Netlify
+   - 或连接 Git 仓库自动部署
+
+## 🧪 部署验证
+
+### 功能测试清单
+
+- [ ] 主页访问：`http://your-domain.com/`
+- [ ] 直接路由访问：`http://your-domain.com/play?code=xxx`
+- [ ] 页面刷新：在任意页面刷新不应出现 404
+- [ ] API 请求：检查网络面板，确认 API 请求正常
+- [ ] 登录功能：测试用户登录流程
+- [ ] 游戏功能：测试游戏相关功能
+
+### 验证命令
+
+```bash
+# 测试 Nginx 配置
+sudo nginx -t
+
+# 查看错误日志
+sudo tail -f /var/log/nginx/error.log
+
+# 测试 API 连通性
+curl -I http://your-domain.com/api/health
+```
+
+## 🚨 常见问题及解决方案
+
+### 问题 1：直接访问路由出现 404
+**原因**：Web 服务器未配置 SPA 路由回退
+**解决**：按照上述配置添加路由回退规则
+
+### 问题 2：API 请求失败 (CORS 错误)
+**原因**：跨域配置不正确
+**解决**：
+1. 检查 API 代理配置
+2. 确认后端服务 `http://192.140.164.137:18080` 可访问
+3. 检查 CORS 头部设置
+
+### 问题 3：静态资源加载失败
+**原因**：资源路径配置问题
+**解决**：
+1. 检查 `vite.config.js` 中的 `base` 配置
+2. 确认所有文件都已正确上传
+
+### 问题 4：页面空白
+**原因**：通常是 JavaScript 错误
+**解决**：
+1. 打开浏览器开发者工具查看控制台错误
+2. 检查网络请求是否正常
+3. 确认构建过程无错误
+
+## 📊 性能优化建议
+
+### 1. 启用 Gzip 压缩
+```nginx
+# 在 Nginx 配置中添加
+gzip on;
+gzip_types text/plain text/css application/javascript application/json;
+```
+
+### 2. 配置缓存策略
+- 静态资源（JS、CSS、图片）：长期缓存
+- HTML 文件：短期缓存或无缓存
+
+### 3. CDN 加速
+考虑使用 CDN 服务加速静态资源访问
+
+## 🔒 安全建议
+
+1. **HTTPS 配置**：生产环境应启用 HTTPS
+2. **API 安全**：确保后端 API 有适当的安全验证
+3. **访问控制**：配置防火墙规则
+4. **定期更新**：保持依赖库和服务器软件更新
+
+## 📱 移动端适配
+
+项目已包含移动端检测，确保在移动设备上访问体验良好。
+
+## 🔄 更新部署
+
+```bash
+# 1. 拉取最新代码
+git pull origin main
+
+# 2. 安装/更新依赖
+npm install
+
+# 3. 重新构建
+npm run build
+
+# 4. 上传新的构建文件
+# 替换服务器上的 dist 目录内容
+
+# 5. 重载服务器配置（如有必要）
+sudo nginx -s reload
+```
+
+## 📞 技术支持
+
+如果在部署过程中遇到问题：
+
+1. 首先查看上述常见问题
+2. 检查服务器错误日志
+3. 确认网络和防火墙配置
+4. 验证后端服务可用性
+
+---
+
+**注意**：本文档基于当前项目配置编写，如果项目配置有变更，请相应更新此文档。
Author	SHA1	Message	Date
yahaozhang	2e35f219e7	更新页面样式和结构，优化加载、错误和刷新页面的用户体验，调整Vite配置以使用生产环境API，新增订单详情展示功能，提升整体界面一致性和可读性	2025-11-03 21:20:52 +08:00
yahaozhang	fba18fc32c	更新 Vite 配置以使用 localhost，新增游戏完成时间戳和过期判断，优化链接生成逻辑，调整路由以支持路径参数，改进游戏界面状态显示	2025-11-03 20:58:22 +08:00
yahaozhang	23e2a4512b	删除多个文档，包括部署指南、链接管理功能、权限系统配置总结及上号系统需求文档，优化项目结构，提升代码整洁性	2025-10-11 16:55:58 +08:00
yahaozhang	2a45e5e6be	优化公告弹窗逻辑，新增确认和取消按钮，提升用户交互体验	2025-10-11 16:49:41 +08:00
yahaozhang	6ba943ff32	新增公告链接功能，优化公告页面展示，提升用户体验	2025-10-10 10:19:12 +08:00
zyh	c4b642006f	优化批次下载逻辑，通过API获取所有数据以提升数据获取效率，简化错误提示信息	2025-10-03 10:46:52 +08:00
zyh	ddb4092ebf	优化二维码过期提示信息，简化机器ID显示，提升页面可读性	2025-10-03 10:42:39 +08:00
yahaozhang	fcfb0b3c71	1	2025-10-03 10:02:16 +08:00
yahaozhang	dace987070	移除设备状态相关功能及页面，优化权限管理，提升代码整洁性	2025-09-16 14:46:28 +08:00
yahaozhang	cac99b5c1d	新增设备状态提示功能，优化设备状态获取逻辑，提升用户体验	2025-09-16 14:36:54 +08:00