重构 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/SelectRegion.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="select-region-page">
+    <div class="page-header">
+      <h1 class="title">请选择您的账号类型</h1>
+    </div>
+    
+    <div class="region-buttons">
+      <button 
+        @click="$emit('selectRegion', 'Q')" 
+        class="region-btn qq-btn"
+        :disabled="submitting"
+        :class="{ 'loading': 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>
+      
+      <button 
+        @click="$emit('selectRegion', 'V')" 
+        class="region-btn wx-btn"
+        :disabled="submitting"
+        :class="{ 'loading': submitting }"
+      >
+        <div v-if="submitting" class="loading-spinner small"></div>
+        <div v-else class="btn-icon">V</div>
+        <span class="btn-text">{{ submitting ? '正在连接...' : '微信区' }}</span>
+      </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: 'SelectRegion',
+  props: {
+    submitting: {
+      type: Boolean,
+      default: false
+    },
+    mecmachineId: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ['selectRegion']
+}
+</script>
+
+<style scoped>
+.select-region-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);
+}
+
+.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;
+}
+
+.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;
+  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;
+}
+
+.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;
+}
+
+.loading-spinner.small {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid #667eea;
+  margin: 0;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.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;
+}
+
+@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;
+  }
+}
+</style>