重构 Play.vue 组件，拆分为多个子组件，提升代码可维护性和可读性。

主要变更：
- 将 Play.vue 拆分为 LoadingOverlay、SelectRegion、ScanPage、GamePage、RefreshWaitPage、ErrorPage 等组件
- 新增 composables 目录，分离业务逻辑（usePlayState、useTimers、useQrCode）
- 优化代码结构，提升开发效率和维护性

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/play/RefreshWaitPage.vue

@@ -0,0 +1,137 @@
+<template>
+  <div 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="$emit('refresh')" 
+        class="refresh-btn"
+        :disabled="refreshCooldown > 0"
+      >
+        {{ refreshCooldown > 0 ? `请等待 ${refreshCooldown}s` : '确定' }}
+      </button>
+    </div>
+
+    <div class="notice-text">
+      <p>代理技术代练平台操作中</p>
+      <p>绝对安全保障！请耐心等待</p>
+      <p>温馨提示: 请选择正确区域</p>
+      <p v-if="mecmachineId" class="machine-id-info">机器ID: {{ mecmachineId }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RefreshWaitPage',
+  props: {
+    refreshCooldown: {
+      type: Number,
+      default: 0
+    },
+    mecmachineId: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ['refresh']
+}
+</script>
+
+<style scoped>
+.refresh-wait-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.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);
+}
+
+.refresh-container {
+  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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.machine-id-info {
+  color: #4CAF50 !important;
+  font-weight: 600 !important;
+  opacity: 1 !important;
+}
+</style>