refactor: 优化配置与奖池页面多语言编辑及管理端列表布局

src/modules/config/doc/play-config-doc-screen.tsx

@@ -37,6 +37,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { AdminStatusBadge } from "@/components/admin/admin-status-badge";
 import { ConfigReadonlyValue } from "@/modules/config/config-readonly-value";
 import { ConfigVersionActions } from "@/modules/config/config-version-actions";
@@ -146,9 +147,16 @@ export function PlayConfigDocScreen() {
   const [error, setError] = useState<string | null>(null);
   const detailRequestSeq = useRef(0);
 
+  const [nameDialogOpen, setNameDialogOpen] = useState(false);
+  const [namePlayCode, setNamePlayCode] = useState<string | null>(null);
+  const [nameDraftZh, setNameDraftZh] = useState("");
+  const [nameDraftEn, setNameDraftEn] = useState("");
+  const [nameDraftNe, setNameDraftNe] = useState("");
   const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
   const [rulePlayCode, setRulePlayCode] = useState<string | null>(null);
   const [ruleDraftZh, setRuleDraftZh] = useState("");
+  const [ruleDraftEn, setRuleDraftEn] = useState("");
+  const [ruleDraftNe, setRuleDraftNe] = useState("");
 
   const refreshList = useCallback(async () => {
     setLoadingList(true);
@@ -348,23 +356,80 @@ export function PlayConfigDocScreen() {
     }
   }
 
+  function openNameEditor(play_code: string) {
+    const item = draftRows.find((row) => row.play_code === play_code);
+    setNamePlayCode(play_code);
+    setNameDraftZh(item?.display_name_zh ?? item?.play_code ?? "");
+    setNameDraftEn(item?.display_name_en ?? "");
+    setNameDraftNe(item?.display_name_ne ?? "");
+    setNameDialogOpen(true);
+  }
+
+  function saveNameDraft() {
+    if (!namePlayCode) {
+      return;
+    }
+    const zh = nameDraftZh.trim();
+    if (!zh) {
+      toast.error(t("play.validation.nameZhRequired", { ns: "config" }));
+      return;
+    }
+    updateConfigRow(namePlayCode, {
+      display_name_zh: zh,
+      display_name_en: nameDraftEn.trim() || null,
+      display_name_ne: nameDraftNe.trim() || null,
+    });
+    setNameDialogOpen(false);
+    setNamePlayCode(null);
+    toast.message(t("play.nameDialog.savedLocal", { ns: "config" }));
+  }
+
   function openRuleEditor(play_code: string) {
     const item = draftRows.find((row) => row.play_code === play_code);
     setRulePlayCode(play_code);
     setRuleDraftZh(item?.rule_text_zh ?? "");
+    setRuleDraftEn(item?.rule_text_en ?? "");
+    setRuleDraftNe(item?.rule_text_ne ?? "");
     setRuleDialogOpen(true);
   }
 
-  function saveRuleZh() {
+  function saveRuleDraft() {
     if (!rulePlayCode) {
       return;
     }
-    updateConfigRow(rulePlayCode, { rule_text_zh: ruleDraftZh.trim() || null });
+    updateConfigRow(rulePlayCode, {
+      rule_text_zh: ruleDraftZh.trim() || null,
+      rule_text_en: ruleDraftEn.trim() || null,
+      rule_text_ne: ruleDraftNe.trim() || null,
+    });
     setRuleDialogOpen(false);
     setRulePlayCode(null);
     toast.message(t("play.ruleSavedLocal", { ns: "config" }));
   }
 
+  function renderDisplayNameReadonly(row: PlayConfigItemRow) {
+    const lines = [
+      { label: t("play.locales.zh", { ns: "config" }), value: row.display_name_zh },
+      { label: t("play.locales.en", { ns: "config" }), value: row.display_name_en },
+      { label: t("play.locales.ne", { ns: "config" }), value: row.display_name_ne },
+    ].filter((line) => line.value?.trim());
+
+    if (lines.length === 0) {
+      return <span>—</span>;
+    }
+
+    return (
+      <div className="space-y-0.5 text-center text-sm">
+        {lines.map((line) => (
+          <p key={line.label}>
+            <span className="text-muted-foreground text-xs">{line.label}: </span>
+            {line.value}
+          </p>
+        ))}
+      </div>
+    );
+  }
+
   const activeHead = list.find((x) => x.status === "active");
 
   async function handleDeleteVersion(row: ConfigVersionSummary) {
@@ -511,18 +576,24 @@ export function PlayConfigDocScreen() {
                     </TableCell>
                     <TableCell>
                       {isDraft ? (
-                        <Input
-                          className="h-8 text-center text-sm"
-                          value={row.display_name_zh ?? ""}
-                          disabled={saving}
-                          onChange={(e) => {
-                            const next = e.target.value === "" ? null : e.target.value;
-                            updateConfigRow(row.play_code, { display_name_zh: next });
-                          }}
-                        />
+                        <div className="flex flex-col items-center gap-1.5">
+                          <p className="max-w-[10rem] truncate text-sm font-medium">
+                            {row.display_name_zh ?? row.play_code}
+                          </p>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="h-7 text-xs"
+                            disabled={saving}
+                            onClick={() => openNameEditor(row.play_code)}
+                          >
+                            {t("play.actions.displayNames", { ns: "config" })}
+                          </Button>
+                        </div>
                       ) : (
                         <ConfigReadonlyValue className="justify-center">
-                          {row.display_name_zh ?? "—"}
+                          {renderDisplayNameReadonly(row)}
                         </ConfigReadonlyValue>
                       )}
                     </TableCell>
@@ -609,6 +680,51 @@ export function PlayConfigDocScreen() {
         </Table>
       )}
 
+      <Dialog open={nameDialogOpen} onOpenChange={setNameDialogOpen}>
+        <DialogContent showCloseButton className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{t("play.nameDialog.title", { ns: "config" })}</DialogTitle>
+            <DialogDescription>
+              {t("play.nameDialog.description", { ns: "config", playCode: namePlayCode ?? "—" })}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-3">
+            <div className="grid gap-1.5">
+              <Label htmlFor="name-zh">{t("play.locales.zh", { ns: "config" })}</Label>
+              <Input
+                id="name-zh"
+                value={nameDraftZh}
+                onChange={(e) => setNameDraftZh(e.target.value)}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="name-en">{t("play.locales.en", { ns: "config" })}</Label>
+              <Input
+                id="name-en"
+                value={nameDraftEn}
+                onChange={(e) => setNameDraftEn(e.target.value)}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="name-ne">{t("play.locales.ne", { ns: "config" })}</Label>
+              <Input
+                id="name-ne"
+                value={nameDraftNe}
+                onChange={(e) => setNameDraftNe(e.target.value)}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setNameDialogOpen(false)}>
+              {t("actions.cancel", { ns: "adminUsers" })}
+            </Button>
+            <Button type="button" onClick={saveNameDraft}>
+              {t("play.nameDialog.apply", { ns: "config" })}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       <Dialog open={ruleDialogOpen} onOpenChange={setRuleDialogOpen}>
         <DialogContent showCloseButton className="sm:max-w-lg">
           <DialogHeader>
@@ -617,20 +733,42 @@ export function PlayConfigDocScreen() {
               {t("play.ruleDialog.description", { ns: "config", playCode: rulePlayCode ?? "—" })}
             </DialogDescription>
           </DialogHeader>
-          <div className="grid gap-2">
-            <Label htmlFor="rule-zh">{t("play.ruleDialog.fieldLabel", { ns: "config" })}</Label>
-            <textarea
-              id="rule-zh"
-              className="border-input bg-background ring-ring/24 focus-visible:ring-[3px] min-h-[140px] w-full rounded-lg border px-3 py-2 text-sm outline-none"
-              value={ruleDraftZh}
-              onChange={(e) => setRuleDraftZh(e.target.value)}
-            />
-          </div>
+          <Tabs defaultValue="zh" className="w-full">
+            <TabsList className="w-full">
+              <TabsTrigger value="zh">{t("play.locales.zh", { ns: "config" })}</TabsTrigger>
+              <TabsTrigger value="en">{t("play.locales.en", { ns: "config" })}</TabsTrigger>
+              <TabsTrigger value="ne">{t("play.locales.ne", { ns: "config" })}</TabsTrigger>
+            </TabsList>
+            <TabsContent value="zh" className="mt-3">
+              <textarea
+                id="rule-zh"
+                className="border-input bg-background ring-ring/24 focus-visible:ring-[3px] min-h-[140px] w-full rounded-lg border px-3 py-2 text-sm outline-none"
+                value={ruleDraftZh}
+                onChange={(e) => setRuleDraftZh(e.target.value)}
+              />
+            </TabsContent>
+            <TabsContent value="en" className="mt-3">
+              <textarea
+                id="rule-en"
+                className="border-input bg-background ring-ring/24 focus-visible:ring-[3px] min-h-[140px] w-full rounded-lg border px-3 py-2 text-sm outline-none"
+                value={ruleDraftEn}
+                onChange={(e) => setRuleDraftEn(e.target.value)}
+              />
+            </TabsContent>
+            <TabsContent value="ne" className="mt-3">
+              <textarea
+                id="rule-ne"
+                className="border-input bg-background ring-ring/24 focus-visible:ring-[3px] min-h-[140px] w-full rounded-lg border px-3 py-2 text-sm outline-none"
+                value={ruleDraftNe}
+                onChange={(e) => setRuleDraftNe(e.target.value)}
+              />
+            </TabsContent>
+          </Tabs>
           <DialogFooter>
             <Button type="button" variant="outline" onClick={() => setRuleDialogOpen(false)}>
               {t("actions.cancel", { ns: "adminUsers" })}
             </Button>
-            <Button type="button" onClick={saveRuleZh}>
+            <Button type="button" onClick={saveRuleDraft}>
               {t("play.ruleDialog.apply", { ns: "config" })}
             </Button>
           </DialogFooter>