feat(player): 重构 PC 端登录注册布局并优化注单栏与加载态

- 新增 DesktopAuthLayout 与 MouseRippleGrid，登录/注册/忘记密码采用管理端左右卡片布局（左侧大 Logo）

- 登录页补齐 GoldSpinner 全表单加载遮罩与三语 logging_in 文案

- 注单栏与 Hub 侧栏使用 cebian.webp 背景，左侧联赛栏保持纯色

apps/player/src/components/MouseRippleGrid.vue

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+/**
+ * MouseRippleGrid — interactive grid that only appears near the cursor.
+ * Mouse movement creates expanding ripple waves that distort the grid.
+ *
+ * Performance notes:
+ * - Skips points outside the max effective radius of all ripples + mouse
+ * - Caps devicePixelRatio at 2
+ * - Respects prefers-reduced-motion (renders nothing)
+ * - pointer-events:none so form interactions are never blocked
+ */
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+
+let ctx: CanvasRenderingContext2D | null = null;
+let raf = 0;
+let width = 0;
+let height = 0;
+let dpr = 1;
+let parent: HTMLElement | null = null;
+let resizeObs: ResizeObserver | null = null;
+let reducedMotion = false;
+
+/* ---- Mouse state ---- */
+let mouseX = -9999;
+let mouseY = -9999;
+let lastRippleX = -9999;
+let lastRippleY = -9999;
+let mouseInside = false;
+let mouseFade = 0; // smoothed 0→1 for graceful fade
+
+/* ---- Ripple data ---- */
+interface Ripple {
+  x: number;
+  y: number;
+  born: number;
+  strength: number;
+}
+const ripples: Ripple[] = [];
+
+/* ---- Tuning constants ---- */
+const GRID = 34; // grid spacing px
+const VISIBLE_R = 210; // mouse visibility radius
+const RIPPLE_SPEED = 140; // px/s propagation
+const RIPPLE_LIFE = 2000; // ms
+const RIPPLE_SKIP_R = 380; // skip points farther than this from any ripple
+const SIGMA = 42; // wave packet width
+const MAX_DISPLACE = 14; // cap displacement px
+
+function resize() {
+  const c = canvasRef.value;
+  if (!c || !c.parentElement) return;
+  parent = c.parentElement;
+  const rect = parent.getBoundingClientRect();
+  dpr = Math.min(window.devicePixelRatio || 1, 2);
+  width = rect.width;
+  height = rect.height;
+  c.width = Math.round(width * dpr);
+  c.height = Math.round(height * dpr);
+  c.style.width = width + 'px';
+  c.style.height = height + 'px';
+  ctx = c.getContext('2d');
+  if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+}
+
+function handleMove(e: MouseEvent) {
+  if (!parent) return;
+  const rect = parent.getBoundingClientRect();
+  mouseX = e.clientX - rect.left;
+  mouseY = e.clientY - rect.top;
+  mouseInside = true;
+
+  const dx = mouseX - lastRippleX;
+  const dy = mouseY - lastRippleY;
+  if (dx * dx + dy * dy > 36) {
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    ripples.push({
+      x: mouseX,
+      y: mouseY,
+      born: performance.now(),
+      strength: Math.min(dist * 0.12, 5),
+    });
+    lastRippleX = mouseX;
+    lastRippleY = mouseY;
+    if (ripples.length > 30) ripples.shift();
+  }
+}
+
+function handleEnter() {
+  mouseInside = true;
+}
+
+function handleLeave() {
+  mouseInside = false;
+  mouseX = -9999;
+  mouseY = -9999;
+}
+
+function frame() {
+  raf = requestAnimationFrame(frame);
+  if (!ctx) return;
+
+  const now = performance.now();
+
+  /* Smooth fade in/out when mouse enters/leaves */
+  const target = mouseInside ? 1 : 0;
+  mouseFade += (target - mouseFade) * 0.05;
+
+  /* Purge expired ripples */
+  for (let i = ripples.length - 1; i >= 0; i--) {
+    if (now - ripples[i].born > RIPPLE_LIFE) ripples.splice(i, 1);
+  }
+
+  /* Nothing to draw — clear and bail */
+  if (mouseFade < 0.004 && ripples.length === 0) {
+    ctx.clearRect(0, 0, width, height);
+    return;
+  }
+
+  ctx.clearRect(0, 0, width, height);
+
+  const cols = Math.ceil(width / GRID) + 2;
+  const rows = Math.ceil(height / GRID) + 2;
+
+  /* Precompute active ripple data for this frame */
+  type ARipple = { x: number; y: number; age: number; strength: number };
+  const active: ARipple[] = [];
+  for (const r of ripples) {
+    const age = (now - r.born) / RIPPLE_LIFE;
+    if (age < 1) active.push({ x: r.x, y: r.y, age, strength: r.strength });
+  }
+
+  /* ---- Pass 1: compute displaced positions + opacities ---- */
+  type Cell = { x: number; y: number; o: number };
+  const grid: Cell[][] = new Array(rows);
+
+  for (let row = 0; row < rows; row++) {
+    grid[row] = new Array(cols);
+    for (let col = 0; col < cols; col++) {
+      const bx = (col - 0.5) * GRID;
+      const by = (row - 0.5) * GRID;
+
+      /* Base opacity from mouse proximity */
+      let opacity = 0;
+      if (mouseFade > 0.004) {
+        const mdx = bx - mouseX;
+        const mdy = by - mouseY;
+        const mdist = Math.sqrt(mdx * mdx + mdy * mdy);
+        if (mdist < VISIBLE_R) {
+          const f = 1 - mdist / VISIBLE_R;
+          opacity = f * f * 0.28 * mouseFade;
+        }
+      }
+
+      /* Ripple displacement */
+      let dx = 0;
+      let dy = 0;
+      let rippleO = 0;
+
+      for (let i = 0; i < active.length; i++) {
+        const r = active[i];
+        const rdx = bx - r.x;
+        const rdy = by - r.y;
+        const rdist = Math.sqrt(rdx * rdx + rdy * rdy);
+        if (rdist > RIPPLE_SKIP_R) continue;
+
+        const wavefront = r.age * RIPPLE_SPEED * (RIPPLE_LIFE / 1000);
+        const distFromFront = rdist - wavefront;
+        const env = Math.exp(-(distFromFront * distFromFront) / (2 * SIGMA * SIGMA));
+        const osc = Math.cos(distFromFront * 0.11);
+        const decay = (1 - r.age) * Math.exp(-rdist / 190);
+        const amp = r.strength * decay * env * osc * 6;
+
+        if (rdist > 0.5) {
+          dx += (rdx / rdist) * amp;
+          dy += (rdy / rdist) * amp;
+        }
+        rippleO = Math.max(rippleO, decay * env * 0.45);
+      }
+
+      /* Cap displacement */
+      const dLen = Math.sqrt(dx * dx + dy * dy);
+      if (dLen > MAX_DISPLACE) {
+        dx = (dx / dLen) * MAX_DISPLACE;
+        dy = (dy / dLen) * MAX_DISPLACE;
+      }
+
+      opacity = Math.max(opacity, rippleO * mouseFade);
+      grid[row][col] = { x: bx + dx, y: by + dy, o: opacity };
+    }
+  }
+
+  /* ---- Pass 2: draw grid lines ---- */
+  ctx.lineWidth = 0.6;
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const p = grid[row][col];
+      if (p.o < 0.008) continue;
+
+      /* Line to right neighbour */
+      if (col < cols - 1) {
+        const n = grid[row][col + 1];
+        if (n.o > 0.008) {
+          const lo = Math.min(p.o, n.o) * 0.55;
+          ctx.strokeStyle = `rgba(212,175,55,${lo})`;
+          ctx.beginPath();
+          ctx.moveTo(p.x, p.y);
+          ctx.lineTo(n.x, n.y);
+          ctx.stroke();
+        }
+      }
+
+      /* Line to bottom neighbour */
+      if (row < rows - 1) {
+        const n = grid[row + 1][col];
+        if (n.o > 0.008) {
+          const lo = Math.min(p.o, n.o) * 0.55;
+          ctx.strokeStyle = `rgba(212,175,55,${lo})`;
+          ctx.beginPath();
+          ctx.moveTo(p.x, p.y);
+          ctx.lineTo(n.x, n.y);
+          ctx.stroke();
+        }
+      }
+    }
+  }
+
+  /* ---- Pass 3: draw intersection dots ---- */
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const p = grid[row][col];
+      if (p.o < 0.008) continue;
+      ctx.fillStyle = `rgba(240,216,117,${p.o})`;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, 1.3, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
+}
+
+onMounted(() => {
+  reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  resize();
+
+  const c = canvasRef.value;
+  if (!c || !c.parentElement) return;
+  parent = c.parentElement;
+
+  parent.addEventListener('mousemove', handleMove);
+  parent.addEventListener('mouseenter', handleEnter);
+  parent.addEventListener('mouseleave', handleLeave);
+
+  resizeObs = new ResizeObserver(resize);
+  resizeObs.observe(parent);
+
+  if (!reducedMotion) {
+    raf = requestAnimationFrame(frame);
+  }
+});
+
+onBeforeUnmount(() => {
+  cancelAnimationFrame(raf);
+  if (parent) {
+    parent.removeEventListener('mousemove', handleMove);
+    parent.removeEventListener('mouseenter', handleEnter);
+    parent.removeEventListener('mouseleave', handleLeave);
+  }
+  resizeObs?.disconnect();
+});
+</script>
+
+<template>
+  <canvas ref="canvasRef" class="ripple-grid" aria-hidden="true" />
+</template>
+
+<style scoped>
+.ripple-grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+</style>

apps/player/src/components/desktop/BetSlipPanel.vue

@@ -1181,7 +1181,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: rgba(16, 16, 16, 0.95);
+  background: var(--desktop-sidebar-panel-bg);
 }
 
 .panel-head {

apps/player/src/components/desktop/DesktopAuthLayout.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+/**
+ * PC auth shell — admin-style card: large logo left, form slot right.
+ */
+import MouseRippleGrid from '../MouseRippleGrid.vue';
+import LocaleSwitcher from '../LocaleSwitcher.vue';
+
+withDefaults(
+  defineProps<{
+    /** Wider card for register / forgot-password forms */
+    wide?: boolean;
+  }>(),
+  { wide: false },
+);
+</script>
+
+<template>
+  <div class="desktop-auth-page">
+    <div class="ambient-glow ambient-glow--1" aria-hidden="true"></div>
+    <div class="ambient-glow ambient-glow--2" aria-hidden="true"></div>
+    <MouseRippleGrid />
+
+    <div class="auth-wrap">
+      <div class="auth-card" :class="{ 'auth-card--wide': wide }">
+        <div class="form-lang">
+          <LocaleSwitcher compact />
+        </div>
+        <div class="form-body">
+          <aside class="form-brand">
+            <img src="/logo.png" alt="TheBet365" class="logo-large" />
+          </aside>
+          <div class="form-fields">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.desktop-auth-page {
+  position: relative;
+  min-height: 100dvh;
+  background: linear-gradient(135deg, #0a0a0a 0%, #111 50%, #0d0d0d 100%);
+  overflow: hidden;
+}
+
+.desktop-auth-page::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(212, 175, 55, 0.06) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.ambient-glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(60px);
+  pointer-events: none;
+  opacity: 0.12;
+  z-index: 0;
+}
+
+.ambient-glow--1 {
+  width: 320px;
+  height: 320px;
+  top: 10%;
+  left: 12%;
+  background: radial-gradient(circle, rgba(212, 175, 55, 0.5) 0%, transparent 70%);
+  animation: ambient-drift-1 12s ease-in-out infinite alternate;
+}
+
+.ambient-glow--2 {
+  width: 280px;
+  height: 280px;
+  bottom: 12%;
+  right: 12%;
+  background: radial-gradient(circle, rgba(240, 216, 117, 0.35) 0%, transparent 70%);
+  animation: ambient-drift-2 16s ease-in-out infinite alternate;
+}
+
+@keyframes ambient-drift-1 {
+  0% {
+    transform: translate(0, 0) scale(1);
+  }
+  100% {
+    transform: translate(30px, -20px) scale(1.1);
+  }
+}
+
+@keyframes ambient-drift-2 {
+  0% {
+    transform: translate(0, 0) scale(1);
+  }
+  100% {
+    transform: translate(-25px, 15px) scale(0.95);
+  }
+}
+
+.auth-wrap {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100dvh;
+  padding: 24px 20px;
+  overflow-y: auto;
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 720px;
+  background: rgba(14, 14, 14, 0.92);
+  border: 1px solid rgba(212, 175, 55, 0.28);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+}
+
+.auth-card--wide {
+  max-width: 820px;
+}
+
+.form-lang {
+  display: flex;
+  justify-content: flex-end;
+  padding: 14px 18px 0;
+}
+
+.form-body {
+  display: grid;
+  grid-template-columns: minmax(200px, 260px) 1fr;
+  align-items: stretch;
+}
+
+.form-brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28px 20px;
+  background: rgba(0, 0, 0, 0.25);
+  border-right: 1px solid rgba(212, 175, 55, 0.15);
+}
+
+.logo-large {
+  width: 100%;
+  max-width: 220px;
+  height: auto;
+  object-fit: contain;
+  filter: drop-shadow(0 4px 24px rgba(212, 175, 55, 0.25));
+}
+
+.form-fields {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 22px 24px 24px;
+}
+
+@media (max-width: 640px) {
+  .auth-wrap {
+    align-items: flex-start;
+    padding: 18px;
+  }
+
+  .auth-card,
+  .auth-card--wide {
+    max-width: 420px;
+  }
+
+  .form-body {
+    grid-template-columns: 1fr;
+  }
+
+  .form-brand {
+    padding: 20px 24px 12px;
+    border-right: none;
+    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
+  }
+
+  .logo-large {
+    max-width: 180px;
+  }
+
+  .form-fields {
+    padding: 18px 20px 22px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ambient-glow--1,
+  .ambient-glow--2 {
+    animation: none;
+  }
+}
+</style>

apps/player/src/components/desktop/DesktopBetSlipRail.vue

@@ -47,7 +47,7 @@ watch(
   width: var(--desktop-right-betslip-w);
   min-width: 0;
   border-left: 1px solid var(--border);
-  background: var(--bg-card);
+  background: var(--desktop-sidebar-panel-bg);
   display: flex;
   flex-direction: column;
   min-height: 0;