feat: 新增玩法规则页并增强注单筛选与结果展示

src/features/results/draw-results-list-screen.tsx

@@ -19,6 +19,7 @@ import {
 } from "@/components/ui/select";
 import { PlayerPanel } from "@/components/layout/player-panel";
 import { JackpotResultsStrip } from "@/features/results/jackpot-results-strip";
+import { TwentyThreeResultsGrid } from "@/features/results/twenty-three-results-grid";
 import { formatLotteryInstant } from "@/lib/player-datetime";
 import type { DrawResultListItem } from "@/types/api/draw-results";
 
@@ -44,6 +45,8 @@ export function DrawResultsListScreen() {
   const selectedDate = useMemo(() => parseBusinessDate(date), [date]);
   const businessDate = /^\d{4}-\d{2}-\d{2}$/.test(date) ? date : undefined;
   const quickYears = useMemo(() => buildYearOptions(calendarMonth), [calendarMonth]);
+  const featured = items?.[0] ?? null;
+  const olderDraw = items?.[1] ?? null;
 
   const fetchList = useCallback(async (targetPage = 1, append = false) => {
     setError(null);
@@ -221,6 +224,59 @@ export function DrawResultsListScreen() {
           </div>
         ) : (
           <div className="space-y-3">
+            {featured ? (
+              <div className="rounded-xl border border-[#e5edf8] bg-white p-3 shadow-[0_10px_28px_rgba(15,23,42,0.06)]">
+                <div className="flex flex-wrap items-center justify-between gap-2 border-b border-[#edf2f9] pb-3">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="min-w-[5rem] rounded-full border-[#e6edf8] bg-white text-slate-400"
+                    disabled
+                  >
+                    {t("results.next")}
+                  </Button>
+                  <div className="min-w-0 flex-1 text-center">
+                    <p className="font-mono text-lg font-black text-[#0b3f96]">
+                      {featured.draw_no}
+                    </p>
+                    <p className="mt-1 font-mono text-xs text-slate-500">
+                      {t("results.drawTime", {
+                        time: formatLotteryInstant(featured.draw_time_iso ?? featured.draw_time ?? null),
+                      })}
+                    </p>
+                  </div>
+                  {olderDraw ? (
+                    <Link
+                      href={`/results/${encodeURIComponent(olderDraw.draw_no)}`}
+                      className="inline-flex h-7 min-w-[5rem] items-center justify-center rounded-full border border-[#dce7f7] bg-white px-2.5 text-[0.8rem] font-medium text-[#0b56b7] transition-colors hover:bg-[#f1f6ff]"
+                    >
+                      {t("results.previous")}
+                    </Link>
+                  ) : (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="min-w-[5rem] rounded-full border-[#e6edf8] bg-white text-slate-400"
+                      disabled
+                    >
+                      {t("results.previous")}
+                    </Button>
+                  )}
+                </div>
+                <div className="pt-4">
+                  <TwentyThreeResultsGrid numbers={featured.results} />
+                  <Link
+                    href={`/orders?draw_no=${encodeURIComponent(featured.draw_no)}`}
+                    className="mt-4 inline-flex h-10 w-full items-center justify-center rounded-xl bg-[#e5002c] px-4 text-sm font-bold text-white transition-colors hover:bg-[#d10028]"
+                  >
+                    {t("results.viewMyWinning")}
+                  </Link>
+                </div>
+              </div>
+            ) : null}
+
             {items?.map((row) => (
               <Link
                 key={row.draw_no}