feat: 增加管理端多语言与多模块界面国际化支持

src/modules/risk/risk-index-console.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { getAdminDraws } from "@/api/admin-draws";
 import { AdminListPaginationFooter } from "@/components/admin/admin-list-pagination-footer";
@@ -31,19 +32,20 @@ import { LotteryApiBizError } from "@/types/api/errors";
 import type { AdminDrawListData, AdminDrawListItem } from "@/types/api/admin-draws";
 
 const DRAW_STATUS_OPTIONS: { value: string; label: string }[] = [
-  { value: "pending", label: "未开始" },
-  { value: "open", label: "可下注" },
-  { value: "closing", label: "封盘中" },
-  { value: "closed", label: "已封盘待开奖" },
-  { value: "drawing", label: "开奖处理中" },
-  { value: "review", label: "待审核" },
-  { value: "cooldown", label: "冷静期" },
-  { value: "settling", label: "结算中" },
-  { value: "settled", label: "已结算" },
-  { value: "cancelled", label: "已取消" },
+  { value: "pending", label: "statusOptions.pending" },
+  { value: "open", label: "statusOptions.open" },
+  { value: "closing", label: "statusOptions.closing" },
+  { value: "closed", label: "statusOptions.closed" },
+  { value: "drawing", label: "statusOptions.drawing" },
+  { value: "review", label: "statusOptions.review" },
+  { value: "cooldown", label: "statusOptions.cooldown" },
+  { value: "settling", label: "statusOptions.settling" },
+  { value: "settled", label: "statusOptions.settled" },
+  { value: "cancelled", label: "statusOptions.cancelled" },
 ];
 
 export function RiskIndexConsole() {
+  const { t } = useTranslation(["risk", "common"]);
   const formatDt = useAdminDateTimeFormatter();
   const [data, setData] = useState<AdminDrawListData | null>(null);
   const [loading, setLoading] = useState(true);
@@ -57,10 +59,11 @@ export function RiskIndexConsole() {
 
   const riskStatusTriggerLabel = useMemo(() => {
     if (statusFilter === "") {
-      return "全部";
+      return t("all");
     }
-    return DRAW_STATUS_OPTIONS.find((o) => o.value === statusFilter)?.label ?? statusFilter;
-  }, [statusFilter]);
+    const key = DRAW_STATUS_OPTIONS.find((o) => o.value === statusFilter)?.label;
+    return key ? t(key) : statusFilter;
+  }, [statusFilter, t]);
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -75,13 +78,13 @@ export function RiskIndexConsole() {
       setData(d);
     } catch (e) {
       const msg =
-        e instanceof LotteryApiBizError ? e.message : "加载期号列表失败";
+        e instanceof LotteryApiBizError ? e.message : t("loadDrawListFailed");
       setError(msg);
       setData(null);
     } finally {
       setLoading(false);
     }
-  }, [page, perPage, drawNoQuery, statusFilter]);
+  }, [page, perPage, drawNoQuery, statusFilter, t]);
 
   useEffect(() => {
     queueMicrotask(() => {
@@ -100,15 +103,15 @@ export function RiskIndexConsole() {
   return (
     <Card>
       <CardHeader className="flex flex-row flex-wrap items-end justify-between gap-4">
-        <CardTitle className="text-lg">风控中心</CardTitle>
+        <CardTitle className="text-lg">{t("center")}</CardTitle>
         <div className="flex w-full max-w-4xl flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end">
           <div className="grid flex-1 gap-2 sm:min-w-[12rem]">
             <Label htmlFor="risk-index-draw-no" className="text-xs text-muted-foreground">
-              期号
+              {t("drawNo")}
             </Label>
             <Input
               id="risk-index-draw-no"
-              placeholder="模糊匹配期号"
+              placeholder={t("fuzzyDrawNo")}
               value={drawNoInput}
               onChange={(e) => setDrawNoInput(e.target.value)}
               onKeyDown={(e) => {
@@ -120,7 +123,7 @@ export function RiskIndexConsole() {
           </div>
           <div className="grid gap-2 sm:w-44">
             <Label htmlFor="risk-index-status" className="text-xs text-muted-foreground">
-              状态
+              {t("status")}
             </Label>
             <Select
               modal={false}
@@ -135,10 +138,10 @@ export function RiskIndexConsole() {
                 <SelectValue>{riskStatusTriggerLabel}</SelectValue>
               </SelectTrigger>
               <SelectContent align="start">
-                <SelectItem value="all">全部</SelectItem>
+                <SelectItem value="all">{t("all")}</SelectItem>
                 {DRAW_STATUS_OPTIONS.map((o) => (
                   <SelectItem key={o.value} value={o.value}>
-                    {o.label}
+                    {t(o.label)}
                   </SelectItem>
                 ))}
               </SelectContent>
@@ -146,10 +149,10 @@ export function RiskIndexConsole() {
           </div>
           <div className="flex gap-2">
             <Button type="button" size="sm" onClick={() => applySearch()}>
-              搜索
+              {t("search")}
             </Button>
             <Button type="button" size="sm" variant="secondary" onClick={() => void load()}>
-              刷新
+              {t("refresh")}
             </Button>
           </div>
         </div>
@@ -157,24 +160,24 @@ export function RiskIndexConsole() {
       <CardContent className="space-y-4">
         {error ? <p className="text-sm text-destructive">{error}</p> : null}
         {loading && (data?.items.length ?? 0) === 0 ? (
-          <p className="text-sm text-muted-foreground">加载中…</p>
+          <p className="text-sm text-muted-foreground">{t("states.loading", { ns: "common" })}</p>
         ) : (
           <div className="overflow-x-auto rounded-md border">
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead>期号</TableHead>
-                  <TableHead>状态</TableHead>
-                  <TableHead>封盘时间</TableHead>
-                  <TableHead className="text-right">操作</TableHead>
+                  <TableHead>{t("drawNo")}</TableHead>
+                  <TableHead>{t("status")}</TableHead>
+                  <TableHead>{t("closeTime")}</TableHead>
+                  <TableHead className="text-right">{t("actions")}</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {(data?.items ?? []).length === 0 ? (
                   <TableRow>
-                    <TableCell colSpan={4} className="text-muted-foreground">
-                      暂无数据
-                    </TableCell>
+                      <TableCell colSpan={4} className="text-muted-foreground">
+                      {t("states.noData", { ns: "common" })}
+                      </TableCell>
                   </TableRow>
                 ) : (
                   (data?.items ?? []).map((row: AdminDrawListItem) => (
@@ -191,7 +194,7 @@ export function RiskIndexConsole() {
                           href={`/admin/risk/draws/${row.id}/occupancy`}
                           className={cn(buttonVariants({ variant: "secondary", size: "sm" }))}
                         >
-                          进入风控
+                          {t("enterRisk")}
                         </Link>
                       </TableCell>
                     </TableRow>