refactor: 完成全站国际化改造，统一多语言支持

此提交完成了全项目的国际化适配：
1. 新增多语言翻译文件与基础配置
2. 替换所有硬编码文本为i18n调用
3. 优化语言切换与文档语言同步逻辑
4. 重构部分业务逻辑以支持动态翻译
5. 移除过时代码与硬编码配置

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

@@ -2,10 +2,12 @@
 
 import Link from "next/link";
 import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { getDrawResultByNo } from "@/api/draw";
 import { getTicketDrawMyMatch } from "@/api/ticket-items";
 import { Button, buttonVariants } from "@/components/ui/button";
+import { PlayerPanel } from "@/components/layout/player-panel";
 import {
   Card,
   CardContent,
@@ -29,6 +31,7 @@ type DrawResultDetailScreenProps = {
 
 /** §4.6 开奖结果详情：23 分区 + [< >] 切换 + 本人命中高亮 + Jackpot */
 export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps) {
+  const { t } = useTranslation("player");
   const [data, setData] = useState<DrawResultDetailPayload | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
@@ -47,11 +50,11 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
       setData(row);
     } catch {
       setData(null);
-      setError("该期开奖结果不可用或不存在");
+      setError(t("results.unavailable"));
     } finally {
       setLoading(false);
     }
-  }, [drawNo]);
+  }, [drawNo, t]);
 
   useEffect(() => {
     queueMicrotask(() => {
@@ -98,34 +101,37 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
 
   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>
+      <PlayerPanel
+        title={t("results.detailTitle")}
+        subtitle={drawNo}
+        eyebrow={t("results.title")}
+        backHref="/results"
+        backLabel={t("results.title")}
+      >
+        <div className="space-y-4">
+          <Skeleton className="h-12 rounded-xl" />
+          <Skeleton className="h-56 rounded-xl" />
+        </div>
+      </PlayerPanel>
     );
   }
 
   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">
+      <PlayerPanel
+        title={t("results.detailTitle")}
+        subtitle={drawNo}
+        eyebrow={t("results.title")}
+        backHref="/results"
+        backLabel={t("results.title")}
+      >
+        <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
+          <p>{error ?? t("results.noData")}</p>
           <Button type="button" size="sm" variant="secondary" onClick={() => void load()}>
-            重试
+            {t("actions.retry")}
           </Button>
-          <Link href="/results" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
-            返回列表
-          </Link>
-        </CardContent>
-      </Card>
+        </div>
+      </PlayerPanel>
     );
   }
 
@@ -143,60 +149,81 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
     myTotals.jackpot === 0;
 
   return (
-    <div className="flex flex-col gap-4">
-      <JackpotResultsStrip currencyCode={currency} />
+    <PlayerPanel
+      title={t("results.detailTitle")}
+      subtitle={data.draw_no}
+      eyebrow={t("results.title")}
+      backHref="/results"
+      backLabel={t("results.title")}
+    >
+      <div className="flex flex-col gap-4">
+        <JackpotResultsStrip currencyCode={currency} />
 
-      <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}
-            highlighted4d={highlightSet ?? undefined}
-          />
+        <Card className="rounded-xl border-[#e5edf8] shadow-[0_8px_24px_rgba(15,23,42,0.05)]">
+          <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]",
+                  )}
+                >
+                  {t("results.previous")}
+                </Link>
+              ) : (
+                <Button type="button" variant="outline" size="sm" className="min-w-[5rem]" disabled>
+                  {t("results.previous")}
+                </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]",
+                  )}
+                >
+                  {t("results.next")}
+                </Link>
+              ) : (
+                <Button type="button" variant="outline" size="sm" className="min-w-[5rem]" 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">
+            <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">本期我的派彩</p>
+              <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">
-                常规：{formatMinorAsCurrency(myTotals.win, currency)}
+                {t("results.regular", {
+                  amount: formatMinorAsCurrency(myTotals.win, currency),
+                })}
                 {myTotals.jackpot > 0 ? (
                   <>
                     {" "}
-                    · Jackpot：{formatMinorAsCurrency(myTotals.jackpot, currency)}
+                    ·{" "}
+                    {t("results.jackpot", {
+                      amount: formatMinorAsCurrency(myTotals.jackpot, currency),
+                    })}
                   </>
                 ) : null}
               </p>
@@ -204,13 +231,13 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
           ) : null}
           {showHitOnly ? (
             <p className="mt-3 text-xs text-amber-900/90 dark:text-amber-100/90">
-              您的注单已命中本期开奖号码中的格子；派彩完成后将显示金额汇总。
+              {t("results.hitPending")}
             </p>
           ) : 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)}`}
@@ -219,11 +246,12 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
                 "w-full sm:w-auto sm:self-start",
               )}
             >
-              查看我的中奖情况
+              {t("results.viewMyWinning")}
             </Link>
           </div>
-        </CardContent>
-      </Card>
-    </div>
+          </CardContent>
+        </Card>
+      </div>
+    </PlayerPanel>
   );
 }