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

src/features/rules/play-rules-screen.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import Link from "next/link";
+import { BookOpen, ShieldCheck, TimerReset } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { PlayerPanel } from "@/components/layout/player-panel";
+
+const prizeRows = [
+  { label: "rules.prizes.first", defaultValue: "头奖", count: "1" },
+  { label: "rules.prizes.second", defaultValue: "二奖", count: "1" },
+  { label: "rules.prizes.third", defaultValue: "三奖", count: "1" },
+  { label: "rules.prizes.starter", defaultValue: "特别奖", count: "10" },
+  { label: "rules.prizes.consolation", defaultValue: "安慰奖", count: "10" },
+] as const;
+
+const playSections = [
+  {
+    title: "rules.sections.dimensions.title",
+    titleDefault: "什么是 2D、3D、4D",
+    items: [
+      ["rules.sections.dimensions.d4", "4D：按完整 4 位号码判断，例如 1234。"],
+      ["rules.sections.dimensions.d3", "3D：按下注后三位与开奖号码后三位匹配，例如 234 可命中 1234。"],
+      ["rules.sections.dimensions.d2", "2D：按下注后二位与开奖号码后二位匹配，例如 34 可命中 1234。"],
+    ],
+  },
+  {
+    title: "rules.sections.bigSmall.title",
+    titleDefault: "Big vs Small",
+    items: [
+      ["rules.sections.bigSmall.big", "Big：覆盖全部 23 个奖项，命中头奖、二奖、三奖、特别奖或安慰奖任一组即中奖。"],
+      ["rules.sections.bigSmall.small", "Small：只覆盖头奖、二奖、三奖；命中特别奖或安慰奖不中奖。"],
+    ],
+  },
+  {
+    title: "rules.sections.positions.title",
+    titleDefault: "位置类玩法",
+    items: [
+      ["rules.sections.positions.d4", "4A / 4B / 4C 分别对应头奖、二奖、三奖；4D 命中特别奖任一组；4E 命中安慰奖任一组。"],
+      ["rules.sections.positions.d3", "3A / 3B / 3C 分别匹配头奖、二奖、三奖后三位；3ABC 命中头/二/三任一后三位。"],
+      ["rules.sections.positions.d2", "2A / 2B / 2C 分别匹配头奖、二奖、三奖后二位；2ABC 命中头/二/三任一后二位。"],
+    ],
+  },
+  {
+    title: "rules.sections.box.title",
+    titleDefault: "包号类玩法",
+    items: [
+      ["rules.sections.box.straight", "Straight：顺序完全一致才中奖。"],
+      ["rules.sections.box.box", "Box：系统展开不重复排列组合，中奖按命中的展开号码结算。"],
+      ["rules.sections.box.ibox", "iBox：每个排列都按单注金额下注，总扣款 = 单注金额 × 组合数 × (1 - 回水率)。"],
+      ["rules.sections.box.mbox", "mBox：总输入金额平摊到所有组合，不能整除的尾差不扣除，相当于退回玩家钱包。"],
+      ["rules.sections.box.roll", "Roll：用 R 表示滚动位，每个 R 覆盖 0-9；组合数 = 10 的滚动位数次方。"],
+      ["rules.sections.box.half", "Half Box：一期仅预留数据结构，前台不开放下注。"],
+    ],
+  },
+  {
+    title: "rules.sections.attributes.title",
+    titleDefault: "Head / Tail、单双、数字大小",
+    items: [
+      ["rules.sections.attributes.headTail", "Head / Tail：只看头奖首位数字；5-9 为 Head，0-4 为 Tail。"],
+      ["rules.sections.attributes.oddEven", "单双：按号码末位判断，1/3/5/7/9 为单，0/2/4/6/8 为双，可叠加 2D / 3D / 4D 维度。"],
+      ["rules.sections.attributes.digitSize", "Big Digit / Small Digit：按指定位数字判断，5-9 为大，0-4 为小；多位分别下注时独立结算。"],
+    ],
+  },
+  {
+    title: "rules.sections.wallet.title",
+    titleDefault: "Jackpot、回水、封盘与售罄",
+    items: [
+      ["rules.sections.wallet.rebate", "回水 / 佣金：下注时锁定到注单赔率快照，结算不会受之后配置变化影响。"],
+      ["rules.sections.wallet.jackpot", "Jackpot：命中规则与后台奖池配置相关；爆池、蓄水和派彩以系统记录为准。"],
+      ["rules.sections.wallet.close", "封盘：到达封盘时间后大厅不可继续编辑或提交注单。"],
+      ["rules.sections.wallet.soldOut", "售罄：号码赔付池额度不足时，预览会提示风险，提交时额度不足会整单拒绝。"],
+    ],
+  },
+] as const;
+
+export function PlayRulesScreen() {
+  const { t } = useTranslation("player");
+
+  return (
+    <PlayerPanel
+      title={t("rules.title", { defaultValue: "玩法规则" })}
+      subtitle={t("rules.subtitle", {
+        defaultValue: "2D / 3D / 4D、包号、回水、封盘与售罄说明",
+      })}
+      backHref="/hall"
+      className="bg-[#f7f9fd]"
+    >
+      <div className="space-y-4">
+        <Card className="border-[#dbe7fb] bg-white shadow-sm">
+          <CardHeader className="space-y-3 pb-3">
+            <div className="flex items-center gap-2">
+              <span className="flex size-9 items-center justify-center rounded-2xl bg-[#0b3f96] text-white">
+                <BookOpen className="size-4" aria-hidden />
+              </span>
+              <div className="min-w-0">
+                <CardTitle className="text-base text-[#0b3f96]">
+                  {t("rules.quick.title", { defaultValue: "开奖结构" })}
+                </CardTitle>
+                <p className="mt-0.5 text-xs text-slate-500">
+                  {t("rules.quick.description", {
+                    defaultValue: "每期开奖 23 组 4 位号码，结算以下注时锁定的赔率快照为准。",
+                  })}
+                </p>
+              </div>
+            </div>
+            <div className="grid grid-cols-3 gap-2 text-center">
+              <div className="rounded-2xl bg-[#eef5ff] p-3">
+                <p className="text-lg font-black text-[#0b3f96]">23</p>
+                <p className="text-[11px] font-semibold text-slate-500">
+                  {t("rules.quick.totalPrizes", { defaultValue: "奖项组数" })}
+                </p>
+              </div>
+              <div className="rounded-2xl bg-[#fff2f4] p-3">
+                <p className="text-lg font-black text-[#f10b32]">15</p>
+                <p className="text-[11px] font-semibold text-slate-500">
+                  {t("rules.quick.cooldown", { defaultValue: "冷静期分钟" })}
+                </p>
+              </div>
+              <div className="rounded-2xl bg-[#eefbf4] p-3">
+                <p className="text-lg font-black text-[#168a4a]">1</p>
+                <p className="text-[11px] font-semibold text-slate-500">
+                  {t("rules.quick.snapshot", { defaultValue: "赔率快照" })}
+                </p>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-2 gap-2">
+              {prizeRows.map((row) => (
+                <div
+                  key={row.label}
+                  className="flex items-center justify-between rounded-xl border border-[#e6edf7] bg-white px-3 py-2 text-sm"
+                >
+                  <span className="font-semibold text-slate-700">
+                    {t(row.label, { defaultValue: row.defaultValue })}
+                  </span>
+                  <Badge variant="secondary">{row.count}</Badge>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="grid gap-3">
+          {playSections.map((section) => (
+            <Card key={section.title} className="border-[#e1e8f2] bg-white shadow-sm">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm font-black text-slate-900">
+                  {t(section.title, { defaultValue: section.titleDefault })}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-2">
+                  {section.items.map(([item, defaultValue]) => (
+                    <li
+                      key={item}
+                      className="rounded-xl bg-[#f8fafc] px-3 py-2 text-sm leading-6 text-slate-700"
+                    >
+                      {t(item, { defaultValue })}
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <Card className="border-[#d9e5f5] bg-[#0b3f96] text-white shadow-sm">
+          <CardContent className="space-y-3 p-4">
+            <div className="flex gap-3">
+              <ShieldCheck className="mt-0.5 size-5 shrink-0" aria-hidden />
+              <p className="text-sm leading-6 text-white/90">
+                {t("rules.footer.config", {
+                  defaultValue: "下注大厅的玩法列、启用状态、限额和赔率来自后台生效玩法配置。",
+                })}
+              </p>
+            </div>
+            <div className="flex gap-3">
+              <TimerReset className="mt-0.5 size-5 shrink-0" aria-hidden />
+              <p className="text-sm leading-6 text-white/90">
+                {t("rules.footer.phaseTwo", {
+                  defaultValue: "5D / 6D 属于二期扩展，一期前后端均不提供可用入口。",
+                })}
+              </p>
+            </div>
+            <Link
+              href="/hall"
+              className="inline-flex w-full items-center justify-center rounded-full bg-white px-4 py-2 text-sm font-black text-[#0b3f96]"
+            >
+              {t("rules.footer.backBet", { defaultValue: "返回下注大厅" })}
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    </PlayerPanel>
+  );
+}