feat: 更新依赖与增强功能

- 在 package.json 和 package-lock.json 中新增 laravel-echo 和 pusher-js 依赖
- 在 API 模块中新增 draw 相关函数的导出
- 在 PlayerAppShell 组件中引入 PlayerBottomNav 以增强底部导航
- 在 HallScreen 组件中引入 HallDrawPanel 以展示当前期号

src/components/layout/player-app-shell.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import type { ReactNode } from "react";
 
+import { PlayerBottomNav } from "@/components/layout/player-bottom-nav";
 import { PlayerSessionBar } from "@/features/player/player-session-bar";
 
 type PlayerAppShellProps = {
@@ -8,39 +9,27 @@ type PlayerAppShellProps = {
 };
 
 /**
- * 玩家端业务区外壳：顶栏 + 主内容（移动端宽度上限，桌面居中）。
- * 标题 / 底部导航等后续再接 i18n、路由。
+ * 玩家端外壳：顶栏（品牌 + 会话）+ 主体 + **底部 Tab 导航**（H5）。
+ * 底部栏留白：{@link PlayerBottomNav} 对应 `padding-bottom`.
  */
 export function PlayerAppShell({ children }: PlayerAppShellProps): ReactNode {
   return (
-    <div className="flex min-h-full flex-col bg-background text-foreground">
+    <div className="flex min-h-dvh flex-col bg-background text-foreground">
       <header className="sticky top-0 z-40 shrink-0 border-b border-border bg-background/95 backdrop-blur-sm supports-[backdrop-filter]:bg-background/80">
-        <div className="mx-auto flex h-12 max-w-lg items-center justify-between gap-2 px-4">
-          <div className="flex min-w-0 flex-1 items-center gap-2">
-            <span className="shrink-0 text-sm font-semibold tracking-tight">
-              Lottery
-            </span>
-            <PlayerSessionBar className="min-w-0 border-l border-border pl-2" />
-          </div>
-          <nav className="flex shrink-0 items-center gap-2.5 text-xs font-medium sm:gap-3">
-            <Link
-              href="/hall"
-              className="text-muted-foreground transition-colors hover:text-foreground"
-            >
-              大厅
-            </Link>
-            <Link
-              href="/wallet"
-              className="text-muted-foreground transition-colors hover:text-foreground"
-            >
-              钱包
-            </Link>
-          </nav>
+        <div className="mx-auto flex h-12 max-w-lg items-center gap-2 px-4">
+          <Link
+            href="/hall"
+            className="shrink-0 text-sm font-semibold tracking-tight text-foreground no-underline hover:opacity-90"
+          >
+            Lottery
+          </Link>
+          <PlayerSessionBar className="min-w-0 flex-1 border-l border-border pl-2" />
         </div>
       </header>
-      <main className="mx-auto flex w-full max-w-lg flex-1 flex-col gap-4 px-4 py-4">
+      <main className="mx-auto flex w-full max-w-lg flex-1 flex-col gap-4 px-4 pb-[calc(3.5rem+env(safe-area-inset-bottom,0px)+0.75rem)] pt-4">
         {children}
       </main>
+      <PlayerBottomNav />
     </div>
   );
 }

src/components/layout/player-bottom-nav.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { LayoutGrid, Trophy, Wallet } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const tabs = [
+  { href: "/hall", label: "大厅", icon: LayoutGrid, match: (p: string) => p === "/hall" },
+  {
+    href: "/wallet",
+    label: "钱包",
+    icon: Wallet,
+    match: (p: string) => p === "/wallet" || p.startsWith("/wallet/"),
+  },
+  {
+    href: "/results",
+    label: "开奖",
+    icon: Trophy,
+    match: (p: string) => p === "/results" || p.startsWith("/results/"),
+  },
+] as const;
+
+/**
+ * 移动端 H5 主导航：底部 Tab（界面文档 §1.1 以手机为主）。
+ */
+export function PlayerBottomNav() {
+  const pathname = usePathname() ?? "";
+
+  return (
+    <nav
+      className="fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background/95 pb-[env(safe-area-inset-bottom,0px)] backdrop-blur-md supports-[backdrop-filter]:bg-background/90"
+      aria-label="主导航"
+    >
+      <div className="mx-auto grid h-14 max-w-lg grid-cols-3">
+        {tabs.map(({ href, label, icon: Icon, match }) => {
+          const active = match(pathname);
+          return (
+            <Link
+              key={href}
+              href={href}
+              prefetch
+              aria-current={active ? "page" : undefined}
+              className={cn(
+                "flex flex-col items-center justify-center gap-0.5 text-[11px] font-medium transition-colors",
+                active
+                  ? "text-primary"
+                  : "text-muted-foreground hover:text-foreground active:text-foreground",
+              )}
+            >
+              <Icon
+                aria-hidden
+                className={cn("size-[22px]", active && "stroke-[2.25px]")}
+              />
+              {label}
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}