feat: 更新依赖与增强功能

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

src/features/results/draw-result-detail-screen.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+
+import { getDrawResultByNo } from "@/api/draw";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { TwentyThreeResultsGrid } from "@/features/results/twenty-three-results-grid";
+import { formatLotteryInstant } from "@/lib/player-datetime";
+import { cn } from "@/lib/utils";
+import type { DrawResultDetailPayload } from "@/types/api/draw-results";
+
+type DrawResultDetailScreenProps = {
+  drawNo: string;
+};
+
+/** §4.6 开奖结果详情：23 分区 + [< >] 切换 */
+export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps) {
+  const [data, setData] = useState<DrawResultDetailPayload | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const row = await getDrawResultByNo(drawNo);
+      setData(row);
+    } catch {
+      setData(null);
+      setError("该期开奖结果不可用或不存在");
+    } finally {
+      setLoading(false);
+    }
+  }, [drawNo]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-7 w-48" />
+          <Skeleton className="h-4 w-56" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Skeleton className="h-48 w-full" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error || !data) {
+    return (
+      <Card className="border-destructive/40">
+        <CardHeader>
+          <CardTitle className="text-base">开奖结果</CardTitle>
+          <CardDescription>{error ?? "无数据"}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-2">
+          <Button type="button" size="sm" variant="secondary" onClick={() => void load()}>
+            重试
+          </Button>
+          <Link href="/results" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
+            返回列表
+          </Link>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Card>
+        <CardHeader className="space-y-3 pb-2">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            {data.previous_draw_no ? (
+              <Link
+                href={`/results/${encodeURIComponent(data.previous_draw_no)}`}
+                className={cn(buttonVariants({ variant: "outline", size: "sm" }), "min-w-[5rem]")}
+              >
+                ‹ 上一期
+              </Link>
+            ) : (
+              <Button type="button" variant="outline" size="sm" className="min-w-[5rem]" disabled>
+                ‹ 上一期
+              </Button>
+            )}
+            <CardTitle className="text-center font-mono text-lg">
+              {data.draw_no}
+            </CardTitle>
+            {data.next_draw_no ? (
+              <Link
+                href={`/results/${encodeURIComponent(data.next_draw_no)}`}
+                className={cn(buttonVariants({ variant: "outline", size: "sm" }), "min-w-[5rem]")}
+              >
+                下一期 ›
+              </Link>
+            ) : (
+              <Button type="button" variant="outline" size="sm" className="min-w-[5rem]" disabled>
+                下一期 ›
+              </Button>
+            )}
+          </div>
+          <CardDescription className="text-center font-mono text-sm">
+            开奖时间:{" "}
+            {formatLotteryInstant(data.draw_time_iso ?? data.draw_time ?? null)}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="pt-2">
+          <TwentyThreeResultsGrid numbers={data.results} />
+          <p className="mt-4 text-xs text-muted-foreground">
+            中奖号码高亮、「查看我的中奖情况」跳转注单并按该期筛选：见实施计划 docs/06 §11.7、§14.3「承接阶段
+            3」（界面 §4.6）。
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}