refactor: 重构大厅组件以优化状态管理与数据加载

- 在 HallDrawPanel 组件中引入 useHallDrawLive 自定义 Hook，简化状态管理与数据获取逻辑
- 移除不必要的状态与副作用，提升组件性能
- 在 HallScreen 组件中替换 Card 组件为 HallBettingGrid，优化下注表格展示
- 在 HallWalletStrip 组件中添加事件监听以支持钱包刷新功能

src/features/hall/use-hall-draw-live.ts

@@ -0,0 +1,121 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { getDrawCurrent } from "@/api/draw";
+import { getLotteryEcho } from "@/lib/lottery-echo";
+import type { DrawCurrentPayload } from "@/types/api/draw-current";
+
+/** 界面文档 §2.1：`draw.countdown` / `draw.status_change` / `result.published` 载荷 */
+export type HallWsEnvelope = {
+  data: DrawCurrentPayload | null;
+  emitted_at_ms?: number;
+};
+
+/**
+ * 「服务器时间为准」：以载荷里的 `seconds_*` 为基准、`emitted_at_ms` 为锚点在本地推演。
+ */
+function applySnapshotDrift(
+  payload: DrawCurrentPayload,
+  emittedAtMs: number,
+  nowMs: number,
+): DrawCurrentPayload {
+  const elapsed = Math.max(0, Math.floor((nowMs - emittedAtMs) / 1000));
+  return {
+    ...payload,
+    seconds_to_close: Math.max(0, payload.seconds_to_close - elapsed),
+    seconds_to_draw: Math.max(0, payload.seconds_to_draw - elapsed),
+    seconds_remaining_in_cooldown:
+      payload.seconds_remaining_in_cooldown == null
+        ? null
+        : Math.max(0, payload.seconds_remaining_in_cooldown - elapsed),
+  };
+}
+
+/**
+ * 大厅期号：WebSocket `lottery-hall` + 轮询降级（与 {@link HallDrawPanel} 同源逻辑）。
+ */
+export function useHallDrawLive(): {
+  raw: DrawCurrentPayload | null | undefined;
+  display: DrawCurrentPayload | null | undefined;
+  error: string | null;
+  reload: () => Promise<void>;
+  isBettable: boolean;
+} {
+  const [raw, setRaw] = useState<DrawCurrentPayload | null | undefined>(undefined);
+  const [emittedAtMs, setEmittedAtMs] = useState(() => Date.now());
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  const [error, setError] = useState<string | null>(null);
+
+  const mergeFromWs = useCallback((evt: HallWsEnvelope) => {
+    setRaw(evt.data);
+    setEmittedAtMs(evt.emitted_at_ms ?? Date.now());
+  }, []);
+
+  const load = useCallback(async () => {
+    try {
+      setError(null);
+      const d = await getDrawCurrent();
+      setRaw(d);
+      setEmittedAtMs(Date.now());
+    } catch {
+      setError("加载失败，请下拉刷新");
+      setRaw(undefined);
+    }
+  }, []);
+
+  const refreshMs = useMemo(() => {
+    if (raw === undefined) return 10_000;
+    return raw ? 30_000 : 12_000;
+  }, [raw]);
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      void load();
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [load]);
+
+  useEffect(() => {
+    const id = window.setInterval(() => {
+      void load();
+    }, refreshMs);
+    return () => window.clearInterval(id);
+  }, [load, refreshMs]);
+
+  useEffect(() => {
+    const bump = () => setNowMs(Date.now());
+    bump();
+    const sid = window.setInterval(bump, 1000);
+    const onVisibility = () => {
+      if (document.visibilityState === "visible") bump();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      window.clearInterval(sid);
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, []);
+
+  useEffect(() => {
+    const echo = getLotteryEcho();
+    if (!echo) return;
+
+    echo
+      .channel("lottery-hall")
+      .listen(".draw.countdown", mergeFromWs)
+      .listen(".draw.status_change", mergeFromWs)
+      .listen(".result.published", mergeFromWs);
+
+    return () => {
+      echo.leave("lottery-hall");
+    };
+  }, [mergeFromWs]);
+
+  const display: DrawCurrentPayload | null | undefined =
+    raw === undefined || raw === null ? raw : applySnapshotDrift(raw, emittedAtMs, nowMs);
+
+  const isBettable = display != null && display.status === "open";
+
+  return { raw, display, error, reload: load, isBettable };
+}