feat: 优化下注异常清理与开奖结果详情展示

- 支持玩法关闭错误返回 cleanup_lines 时自动清空对应下注格并提示原因
- 调整下注预览与下注结果金额汇总文案，补充金额、回水、合计多语言翻译
- 下注结果弹窗新增注单状态展示
- 重构开奖结果详情页样式，强化前三名、派奖提示与查看中奖入口展示
- 精简底部导航激活态视觉效果

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

@@ -59,9 +59,6 @@ export function PlayerBottomNav() {
                   : "text-[#6b7280] hover:text-[#1f2937] active:text-[#1f2937]",
               )}
             >
-              {active ? (
-                <span className="absolute top-0 h-0.5 w-9 rounded-full bg-[#f10b32]" />
-              ) : null}
               <Icon
                 aria-hidden
                 className={cn("size-5 shrink-0 sm:size-[22px]", active && "stroke-[2.5px]")}

src/features/hall/hall-bet-preview-dialog.tsx

@@ -107,27 +107,27 @@ export function HallBetPreviewDialog({
                   {summary ? (
                     <ul className="mt-2 space-y-1 tabular-nums text-slate-700">
                       <li>
-                        {t("hall.preview.totalBet")}{" "}
+                        {t("hall.preview.amount")}{" "}
                         <span className="font-semibold text-[#d81435]">
                           {formatMinorAsCurrency(summary.total_bet_amount, currencyCode)}
                         </span>
                       </li>
                       <li>
-                        {t("hall.preview.rebateDeduct")}{" "}
+                        {t("hall.preview.rebate")}{" "}
                         <span className="font-semibold text-emerald-600">
                           {formatMinorAsCurrency(summary.total_rebate_amount, currencyCode)}
                         </span>
                       </li>
                       <li>
-                        {t("hall.preview.actualDeduct")}{" "}
+                        {t("hall.preview.actual")}{" "}
                         <span className="font-bold text-[#0b3f96]">
                           {formatMinorAsCurrency(summary.total_actual_deduct, currencyCode)}
                         </span>
                       </li>
                       <li>
-                        {t("hall.preview.estimatedPayout")}{" "}
+                        {t("hall.preview.total")}{" "}
                         <span className="font-medium text-slate-800">
-                          {formatMinorAsCurrency(summary.total_estimated_payout, currencyCode)}
+                          {formatMinorAsCurrency(summary.total_actual_deduct, currencyCode)}
                         </span>
                       </li>
                     </ul>

src/features/hall/hall-bet-result-dialog.tsx

@@ -74,6 +74,12 @@ export function HallBetResultDialog({
                     {t("hall.result.draw", { defaultValue: "期号" })}{" "}
                     <span className="font-mono font-semibold text-[#32518d]">{data.draw.draw_id}</span>
                   </p>
+                  <p className="mt-1 text-xs text-slate-500">
+                    {t("hall.result.status", { defaultValue: "注单状态" })}{" "}
+                    <span className="font-semibold text-[#32518d]">
+                      {t("ticketStatus.success", { defaultValue: "待开奖" })}
+                    </span>
+                  </p>
                   <Separator className="my-3 bg-[#e8eef7]" />
                   <ul className="space-y-1 text-xs tabular-nums text-slate-700">
                     <li>
@@ -85,7 +91,25 @@ export function HallBetResultDialog({
                       <span className="font-semibold text-rose-600">{totalFailure}</span>
                     </li>
                     <li>
-                      {t("hall.result.totalDeduct", { defaultValue: "成功扣款" })}{" "}
+                      {t("hall.result.amount", { defaultValue: "金额" })}{" "}
+                      <span className="font-semibold text-slate-800">
+                        {formatMinorAsCurrency(data.summary.total_bet_amount, currencyCode)}
+                      </span>
+                    </li>
+                    <li>
+                      {t("hall.result.rebate", { defaultValue: "回水" })}{" "}
+                      <span className="font-semibold text-emerald-700">
+                        {formatMinorAsCurrency(data.summary.total_rebate_amount, currencyCode)}
+                      </span>
+                    </li>
+                    <li>
+                      {t("hall.result.actual", { defaultValue: "实扣" })}{" "}
+                      <span className="font-bold text-[#0b3f96]">
+                        {formatMinorAsCurrency(data.summary.total_actual_deduct, currencyCode)}
+                      </span>
+                    </li>
+                    <li>
+                      {t("hall.result.total", { defaultValue: "合计" })}{" "}
                       <span className="font-bold text-[#0b3f96]">
                         {formatMinorAsCurrency(data.summary.total_actual_deduct, currencyCode)}
                       </span>

src/features/hall/hall-betting-grid.tsx

@@ -50,6 +50,11 @@ type DraftEntry = {
   line: TicketLineInput;
 };
 
+type ClosedPlayCleanupData = {
+  cleanup_hint?: string;
+  cleanup_lines?: Array<{ client_line_no?: number; play_code?: string }>;
+};
+
 type CellRiskState = "open" | "warning" | "sold_out";
 type QuickFillState = Record<HallCategory, { favorites: string[]; history: string[] }>;
 
@@ -569,6 +574,40 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
 
   const buildLines = (): TicketLineInput[] => collectEntries().map((entry) => entry.line);
 
+  const applyClosedPlayCleanup = (data: unknown): boolean => {
+    const payload = data as ClosedPlayCleanupData | null;
+    const cleanupLines = Array.isArray(payload?.cleanup_lines) ? payload.cleanup_lines : [];
+    if (cleanupLines.length === 0) return false;
+
+    const entries = collectEntries();
+    const cleanupPairs = new Set<string>();
+    cleanupLines.forEach((item) => {
+      const clientLineNo = Number(item?.client_line_no ?? 0);
+      const playCode = String(item?.play_code ?? "");
+      if (!Number.isInteger(clientLineNo) || clientLineNo <= 0 || playCode.trim() === "") return;
+      const entry = entries[clientLineNo - 1];
+      if (!entry) return;
+      cleanupPairs.add(`${entry.rowId}::${playCode}`);
+    });
+
+    if (cleanupPairs.size === 0) return false;
+
+    setRows((current) =>
+      current.map((row) => {
+        const nextAmounts = { ...row.amounts };
+        let changed = false;
+        Object.keys(nextAmounts).forEach((playCode) => {
+          if (!cleanupPairs.has(`${row.id}::${playCode}`)) return;
+          nextAmounts[playCode] = "";
+          changed = true;
+        });
+        return changed ? { ...row, amounts: nextAmounts } : row;
+      }),
+    );
+
+    return true;
+  };
+
   const handlePreview = async () => {
     if (!display) {
       toast.error(t("hall.noDraw"));
@@ -609,6 +648,11 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
     } catch (e) {
       const code = e instanceof LotteryApiBizError ? e.code : 0;
       const msg = e instanceof LotteryApiBizError ? e.message : t("hall.previewFailed");
+      if (e instanceof LotteryApiBizError && code === 2002 && applyClosedPlayCleanup(e.data)) {
+        const payload = e.data as ClosedPlayCleanupData;
+        toast.error(payload.cleanup_hint ?? t("hall.ticketError.2002"));
+        return;
+      }
       toast.error(mapTicketBetError(code, msg, t));
     } finally {
       setPreviewLoading(false);
@@ -658,6 +702,13 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
     } catch (e) {
       const code = e instanceof LotteryApiBizError ? e.code : 0;
       const msg = e instanceof LotteryApiBizError ? e.message : t("hall.placeFailed");
+      if (e instanceof LotteryApiBizError && code === 2002 && applyClosedPlayCleanup(e.data)) {
+        const payload = e.data as ClosedPlayCleanupData;
+        toast.error(payload.cleanup_hint ?? t("hall.ticketError.2002"));
+        setPreviewOpen(false);
+        setPreviewData(null);
+        return;
+      }
       toast.error(mapTicketBetError(code, msg, t));
     } finally {
       setPlaceLoading(false);

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

@@ -159,96 +159,127 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
       <div className="flex flex-col gap-4">
         <JackpotResultsStrip currencyCode={currency} />
 
-        <Card className="rounded-xl border-[#e5edf8] shadow-[0_8px_24px_rgba(15,23,42,0.05)]">
-          <CardHeader className="space-y-3 pb-2">
+        <Card className="overflow-hidden border-[#e5edf8] bg-white shadow-[0_10px_28px_rgba(15,23,42,0.06)]">
+          <CardHeader className="space-y-3 border-b border-[#edf2f9] bg-[#f8fbff] pb-3">
             <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]",
+                    "min-w-[5rem] rounded-full border-[#dce7f7] bg-white text-[#0b56b7] hover:bg-[#f1f6ff]",
                   )}
                 >
                   {t("results.previous")}
                 </Link>
               ) : (
-                <Button type="button" variant="outline" size="sm" className="min-w-[5rem]" disabled>
+                <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>
               )}
-              <CardTitle className="text-center font-mono text-lg">
-                {data.draw_no}
-              </CardTitle>
+              <div className="flex min-w-0 flex-1 flex-col items-center text-center">
+                <CardTitle className="truncate font-mono text-lg font-black text-[#0b3f96]">
+                  {data.draw_no}
+                </CardTitle>
+                <CardDescription className="mt-1 font-mono text-xs text-slate-500">
+                  {t("results.drawTime", {
+                    time: formatLotteryInstant(data.draw_time_iso ?? data.draw_time ?? null),
+                  })}
+                </CardDescription>
+              </div>
               {data.next_draw_no ? (
                 <Link
                   href={`/results/${encodeURIComponent(data.next_draw_no)}`}
                   className={cn(
                     buttonVariants({ variant: "outline", size: "sm" }),
-                    "min-w-[5rem]",
+                    "min-w-[5rem] rounded-full border-[#dce7f7] bg-white text-[#0b56b7] hover:bg-[#f1f6ff]",
                   )}
                 >
                   {t("results.next")}
                 </Link>
               ) : (
-                <Button type="button" variant="outline" size="sm" className="min-w-[5rem]" disabled>
+                <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>
-            <CardDescription className="text-center font-mono text-sm">
-              {t("results.drawTime", {
-                time: formatLotteryInstant(data.draw_time_iso ?? data.draw_time ?? null),
-              })}
-            </CardDescription>
           </CardHeader>
-          <CardContent className="pt-2">
+          <CardContent className="space-y-4 pt-4">
+            <div className="rounded-xl border border-[#e8eef7] bg-[#f8fbff] p-3 shadow-[0_4px_14px_rgba(15,23,42,0.04)]">
+              <div className="flex items-center justify-between gap-2">
+                <p className="text-sm font-black text-[#0b3f96]">
+                  {t("results.detailTitle")}
+                </p>
+                <span className="rounded-full bg-[#f2f6ff] px-2.5 py-1 text-xs font-bold text-[#0b56b7]">
+                  {t("results.detail")}
+                </span>
+              </div>
+              <div className="mt-3 grid grid-cols-3 gap-2 text-center">
+                {[
+                  ["1st", data.results["1st"]],
+                  ["2nd", data.results["2nd"]],
+                  ["3rd", data.results["3rd"]],
+                ].map(([label, value]) => (
+                  <div
+                    key={label}
+                    className="rounded-lg border border-[#edf2f8] bg-white py-2 shadow-[0_4px_12px_rgba(15,23,42,0.03)]"
+                  >
+                    <p className="text-[10px] font-bold uppercase text-[#7890b8]">{label}</p>
+                    <p className="mt-1 font-mono text-lg font-black tabular-nums text-[#e5002c]">
+                      {value}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
             <TwentyThreeResultsGrid
               numbers={data.results}
               highlighted4d={highlightSet ?? undefined}
             />
 
-          {showMyPayout && myTotals ? (
-            <div className="mt-4 rounded-md border border-emerald-500/25 bg-emerald-500/5 px-3 py-2 text-sm">
-              <p className="font-medium text-emerald-900 dark:text-emerald-100">
-                {t("results.myPayout")}
-              </p>
-              <p className="mt-1 font-mono text-xs tabular-nums text-muted-foreground">
-                {t("results.regular", {
-                  amount: formatMinorAsCurrency(myTotals.win, currency),
-                })}
-                {myTotals.jackpot > 0 ? (
-                  <>
-                    {" "}
-                    ·{" "}
-                    {t("results.jackpot", {
-                      amount: formatMinorAsCurrency(myTotals.jackpot, currency),
-                    })}
-                  </>
-                ) : null}
-              </p>
-            </div>
-          ) : null}
-          {showHitOnly ? (
-            <p className="mt-3 text-xs text-amber-900/90 dark:text-amber-100/90">
-              {t("results.hitPending")}
-            </p>
-          ) : null}
+            {showMyPayout && myTotals ? (
+              <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-3 text-sm shadow-[0_4px_14px_rgba(15,23,42,0.03)]">
+                <p className="font-bold text-emerald-900">
+                  {t("results.myPayout")}
+                </p>
+                <p className="mt-2 font-mono text-xs tabular-nums text-emerald-900/80">
+                  {t("results.regular", {
+                    amount: formatMinorAsCurrency(myTotals.win, currency),
+                  })}
+                  {myTotals.jackpot > 0 ? (
+                    <>
+                      {" "}
+                      ·{" "}
+                      {t("results.jackpot", {
+                        amount: formatMinorAsCurrency(myTotals.jackpot, currency),
+                      })}
+                    </>
+                  ) : null}
+                </p>
+              </div>
+            ) : null}
 
-          <div className="mt-4 flex flex-col gap-3">
-            <p className="text-xs text-muted-foreground">
-              {t("results.hitHint")}
-            </p>
-            <Link
-              href={`/orders?draw_no=${encodeURIComponent(data.draw_no)}`}
-              className={cn(
-                buttonVariants({ variant: "default", size: "sm" }),
-                "w-full sm:w-auto sm:self-start",
-              )}
-            >
-              {t("results.viewMyWinning")}
-            </Link>
-          </div>
+            {showHitOnly ? (
+              <div className="rounded-xl border border-amber-200 bg-amber-50 px-3 py-3 text-xs text-amber-950">
+                {t("results.hitPending")}
+              </div>
+            ) : null}
+
+            <div className="rounded-xl border border-[#e8eef7] bg-[#f8fbff] px-3 py-3">
+              <p className="text-xs leading-relaxed text-slate-500">
+                {t("results.hitHint")}
+              </p>
+              <Link
+                href={`/orders?draw_no=${encodeURIComponent(data.draw_no)}`}
+                className={cn(
+                  buttonVariants({ variant: "default", size: "sm" }),
+                  "mt-3 h-10 w-full rounded-xl bg-[#e5002c] text-white hover:bg-[#d10028] sm:w-auto",
+                )}
+              >
+                {t("results.viewMyWinning")}
+              </Link>
+            </div>
           </CardContent>
         </Card>
       </div>

src/i18n/locales/en/player.json

@@ -143,6 +143,9 @@
       "empty": "No preview data",
       "draw": "Issue",
       "status": "Status",
+      "amount": "Amount",
+      "rebate": "Rebate",
+      "total": "Total",
       "totalBet": "Total stake",
       "rebateDeduct": "Rebate deduction",
       "actualDeduct": "Actual deduction",

src/i18n/locales/ne/player.json

@@ -143,6 +143,9 @@
       "empty": "पूर्वावलोकन डेटा छैन",
       "draw": "इश्यू",
       "status": "स्थिति",
+      "amount": "रकम",
+      "rebate": "रिबेट",
+      "total": "जम्मा",
       "totalBet": "कुल बेट",
       "rebateDeduct": "रिबेट कट्टा",
       "actualDeduct": "वास्तविक कट्टा",

src/i18n/locales/zh/player.json

@@ -143,6 +143,9 @@
       "empty": "暂无预览数据",
       "draw": "期号",
       "status": "状态",
+      "amount": "金额",
+      "rebate": "回水",
+      "total": "合计",
       "totalBet": "总下注",
       "rebateDeduct": "回水抵扣",
       "actualDeduct": "实扣金额",