feat(player): 接入创蓝短信手机注册与登录页优化

新增 SMS 验证码注册、8 国手机号选择与 Redis 频控；优化登录/注册 UI 及图形验证码样式。

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/player/src/components/RobotVerify.vue

@@ -12,6 +12,8 @@ const validated = ref(false);
 const errorMsg = ref('');
 
 const CHARS = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
+const CANVAS_W = 96;
+const CANVAS_H = 36;
 
 function generateCode() {
   let result = '';
@@ -24,40 +26,39 @@ function generateCode() {
 function drawCaptcha() {
   const canvas = canvasRef.value;
   if (!canvas) return;
-  const w = 108, h = 44;
-  canvas.width = w;
-  canvas.height = h;
+  canvas.width = CANVAS_W;
+  canvas.height = CANVAS_H;
   const ctx = canvas.getContext('2d');
   if (!ctx) return;
 
-  ctx.fillStyle = '#2a2210';
-  ctx.fillRect(0, 0, w, h);
+  ctx.fillStyle = '#0d0d0d';
+  ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
 
-  for (let i = 0; i < 28; i++) {
-    ctx.fillStyle = `rgba(212, 175, 55, ${0.1 + Math.random() * 0.2})`;
+  for (let i = 0; i < 20; i++) {
+    ctx.fillStyle = `rgba(255, 255, 255, ${0.03 + Math.random() * 0.06})`;
     ctx.beginPath();
-    ctx.arc(Math.random() * w, Math.random() * h, Math.random() * 2.2, 0, Math.PI * 2);
+    ctx.arc(Math.random() * CANVAS_W, Math.random() * CANVAS_H, Math.random() * 1.8, 0, Math.PI * 2);
     ctx.fill();
   }
 
-  for (let i = 0; i < 5; i++) {
-    ctx.strokeStyle = `rgba(212, 175, 55, ${0.15 + Math.random() * 0.25})`;
+  for (let i = 0; i < 3; i++) {
+    ctx.strokeStyle = `rgba(255, 255, 255, ${0.06 + Math.random() * 0.08})`;
     ctx.lineWidth = 1;
     ctx.beginPath();
-    ctx.moveTo(Math.random() * w, Math.random() * h);
-    ctx.lineTo(Math.random() * w, Math.random() * h);
+    ctx.moveTo(Math.random() * CANVAS_W, Math.random() * CANVAS_H);
+    ctx.lineTo(Math.random() * CANVAS_W, Math.random() * CANVAS_H);
     ctx.stroke();
   }
 
-  const charWidth = w / (code.value.length + 1);
+  const charWidth = CANVAS_W / (code.value.length + 1);
   for (let i = 0; i < code.value.length; i++) {
     ctx.save();
-    const x = charWidth * (i + 0.5) + (Math.random() - 0.5) * 4;
-    const y = h / 2 + (Math.random() - 0.5) * 6;
+    const x = charWidth * (i + 0.5) + (Math.random() - 0.5) * 3;
+    const y = CANVAS_H / 2 + (Math.random() - 0.5) * 4;
     ctx.translate(x, y);
-    ctx.rotate((Math.random() - 0.5) * 0.4);
-    ctx.font = `bold ${18 + Math.random() * 6}px 'Courier New', monospace`;
-    ctx.fillStyle = `hsl(${40 + Math.random() * 20}, ${80 + Math.random() * 20}%, ${65 + Math.random() * 20}%)`;
+    ctx.rotate((Math.random() - 0.5) * 0.35);
+    ctx.font = `bold ${15 + Math.random() * 4}px 'Courier New', monospace`;
+    ctx.fillStyle = `rgba(240, 216, 117, ${0.85 + Math.random() * 0.15})`;
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
     ctx.fillText(code.value[i], 0, 0);
@@ -94,24 +95,58 @@ defineExpose({ validate, refresh });
 </script>
 
 <template>
-  <div class="captcha-row">
-    <input v-model="honeypot" type="text" name="website" tabindex="-1"
-      autocomplete="off" class="hp-field" aria-hidden="true" />
-    <input v-model="input" type="text" maxlength="4"
-      class="captcha-input" :placeholder="t('auth.captcha_placeholder')" autocomplete="off" />
-    <canvas ref="canvasRef" class="captcha-canvas"
-      :title="t('auth.captcha_refresh')" role="button" tabindex="0"
-      @click="refresh" @keydown.enter="refresh" />
+  <div class="captcha-wrap">
+    <div class="captcha-row">
+      <input
+        v-model="honeypot"
+        type="text"
+        name="website"
+        tabindex="-1"
+        autocomplete="off"
+        class="hp-field"
+        aria-hidden="true"
+      />
+      <input
+        v-model="input"
+        type="text"
+        maxlength="4"
+        class="captcha-input"
+        :placeholder="t('auth.captcha_placeholder')"
+        autocomplete="off"
+      />
+      <canvas
+        ref="canvasRef"
+        class="captcha-canvas"
+        :width="CANVAS_W"
+        :height="CANVAS_H"
+        :title="t('auth.captcha_refresh')"
+        role="button"
+        tabindex="0"
+        @click="refresh"
+        @keydown.enter="refresh"
+      />
+    </div>
+    <p v-if="errorMsg" class="captcha-error">{{ errorMsg }}</p>
   </div>
-  <p v-if="errorMsg" class="captcha-error">{{ errorMsg }}</p>
 </template>
 
 <style scoped>
+.captcha-wrap {
+  width: 100%;
+}
+
 .captcha-row {
   display: flex;
-  gap: 0;
   align-items: stretch;
-  height: 44px;
+  height: 36px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #0d0d0d;
+  overflow: hidden;
+}
+
+.captcha-row:focus-within {
+  border-color: #555;
 }
 
 .hp-field {
@@ -126,40 +161,33 @@ defineExpose({ validate, refresh });
 .captcha-input {
   flex: 1;
   min-width: 0;
-  padding: 0 14px;
-  border: 1px solid var(--border);
-  border-right: none;
-  border-radius: 8px 0 0 8px;
-  background: #1a1a1a;
-  color: #fff;
-  font-size: 15px;
+  padding: 0 10px;
+  border: none;
+  background: transparent;
+  color: var(--text);
+  font-size: 14px;
   font-weight: 700;
-  letter-spacing: 0.15em;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
   outline: none;
-  text-align: center;
+  font-family: inherit;
 }
 
 .captcha-input::placeholder {
-  color: var(--text-muted);
+  color: rgba(255, 255, 255, 0.32);
   font-weight: 600;
   letter-spacing: 0.02em;
   text-transform: none;
 }
 
-.captcha-input:focus {
-  border-color: var(--primary-light);
-}
-
 .captcha-canvas {
   flex-shrink: 0;
-  width: 108px;
-  height: 44px;
+  width: 96px;
+  height: 36px;
   cursor: pointer;
   display: block;
-  border-radius: 0 8px 8px 0;
-  border: 1px solid var(--border);
-  border-left: none;
+  border: none;
+  border-left: 1px solid var(--border);
 }
 
 .captcha-error {