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

src/modules/settings/system-settings-screen.tsx

@@ -10,10 +10,10 @@ import {
 } from "@/api/admin-settings";
 import { WalletConfigDocScreen } from "@/modules/config/doc/wallet-config-doc-screen";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { LotteryApiBizError } from "@/types/api/errors";
 
 const DRAW_GROUP = "draw";
@@ -28,13 +28,18 @@ const DRAW_KEYS = {
 const FRONTEND_GROUP = "frontend";
 const FRONTEND_KEYS = {
   PLAY_RULES_HTML: "frontend.play_rules_html",
+  PLAY_RULES_HTML_ZH: "frontend.play_rules_html_zh",
+  PLAY_RULES_HTML_EN: "frontend.play_rules_html_en",
+  PLAY_RULES_HTML_NE: "frontend.play_rules_html_ne",
 } as const;
 
 interface RuntimeDraft {
   requireManualReview: boolean;
   cooldownMinutes: string;
   autoSettlement: boolean;
-  playRulesHtml: string;
+  playRulesHtmlZh: string;
+  playRulesHtmlEn: string;
+  playRulesHtmlNe: string;
 }
 
 function BinaryChoice({
@@ -76,19 +81,56 @@ function BinaryChoice({
   );
 }
 
+function SaveActions({
+  dirty,
+  loading,
+  saving,
+  onSave,
+  onDiscard,
+  saveLabel,
+  savingLabel,
+  discardLabel,
+}: {
+  dirty: boolean;
+  loading: boolean;
+  saving: boolean;
+  onSave: () => void;
+  onDiscard: () => void;
+  saveLabel: string;
+  savingLabel: string;
+  discardLabel: string;
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-3 pt-2">
+      <Button type="button" onClick={onSave} disabled={!dirty || loading || saving}>
+        {saving ? savingLabel : saveLabel}
+      </Button>
+      {dirty ? (
+        <Button type="button" variant="outline" onClick={onDiscard}>
+          {discardLabel}
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
 export function SystemSettingsScreen() {
   const { t } = useTranslation(["common", "config", "adminUsers"]);
   const [draft, setDraft] = useState<RuntimeDraft>({
     requireManualReview: false,
     cooldownMinutes: "15",
     autoSettlement: true,
-    playRulesHtml: "",
+    playRulesHtmlZh: "",
+    playRulesHtmlEn: "",
+    playRulesHtmlNe: "",
   });
   const [saved, setSaved] = useState<RuntimeDraft>({
     requireManualReview: false,
     cooldownMinutes: "15",
     autoSettlement: true,
-    playRulesHtml: "",
+    playRulesHtmlZh: "",
+    playRulesHtmlEn: "",
+    playRulesHtmlNe: "",
   });
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -108,11 +150,14 @@ export function SystemSettingsScreen() {
         kv[item.key] = item.value;
       }
 
+      const legacyHtml = String(kv[FRONTEND_KEYS.PLAY_RULES_HTML] ?? "");
       const nextDraft: RuntimeDraft = {
         requireManualReview: Boolean(kv[DRAW_KEYS.REQUIRE_MANUAL_REVIEW] ?? false),
         cooldownMinutes: String(kv[DRAW_KEYS.COOLDOWN_MINUTES] ?? 15),
         autoSettlement: Boolean(kv[DRAW_KEYS.AUTO_SETTLEMENT] ?? true),
-        playRulesHtml: String(kv[FRONTEND_KEYS.PLAY_RULES_HTML] ?? ""),
+        playRulesHtmlZh: String(kv[FRONTEND_KEYS.PLAY_RULES_HTML_ZH] ?? legacyHtml),
+        playRulesHtmlEn: String(kv[FRONTEND_KEYS.PLAY_RULES_HTML_EN] ?? ""),
+        playRulesHtmlNe: String(kv[FRONTEND_KEYS.PLAY_RULES_HTML_NE] ?? ""),
       };
       setDraft(nextDraft);
       setSaved(nextDraft);
@@ -144,7 +189,10 @@ export function SystemSettingsScreen() {
         Math.max(0, Number.parseInt(draft.cooldownMinutes || "0", 10) || 0),
       );
       await updateAdminSetting(DRAW_KEYS.AUTO_SETTLEMENT, draft.autoSettlement);
-      await updateAdminSetting(FRONTEND_KEYS.PLAY_RULES_HTML, draft.playRulesHtml);
+      await updateAdminSetting(FRONTEND_KEYS.PLAY_RULES_HTML_ZH, draft.playRulesHtmlZh);
+      await updateAdminSetting(FRONTEND_KEYS.PLAY_RULES_HTML_EN, draft.playRulesHtmlEn);
+      await updateAdminSetting(FRONTEND_KEYS.PLAY_RULES_HTML_NE, draft.playRulesHtmlNe);
+      await updateAdminSetting(FRONTEND_KEYS.PLAY_RULES_HTML, draft.playRulesHtmlZh);
       toast.success(t("system.saveSuccess", { ns: "config" }));
       setSaved(draft);
       setDirty(false);
@@ -157,144 +205,135 @@ export function SystemSettingsScreen() {
     }
   };
 
+  const saveLabel = t("actions.save", { ns: "adminUsers" });
+  const savingLabel = t("saving", { ns: "adminUsers" });
+  const discardLabel = t("system.discard", { ns: "config" });
+
   return (
-    <div className="mx-auto flex w-full max-w-5xl flex-col gap-6">
-      <Card>
-        <CardHeader className="space-y-3">
-          <div className="space-y-1">
-            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
-              {t("nav.settings", { ns: "common", defaultValue: "System Settings" })}
-            </p>
-            <CardTitle className="text-2xl">
-              {t("system.runtimeTitle", { ns: "config" })}
-            </CardTitle>
+    <div className="flex flex-col gap-10">
+      <section className="space-y-4">
+        <h2 className="border-b border-border/60 pb-3 text-base font-semibold text-foreground">
+          {t("system.title", { ns: "config" })}
+        </h2>
+
+        <div className="space-y-5">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <Label className="text-sm font-medium">{t("system.fields.manualReview", { ns: "config" })}</Label>
+            <BinaryChoice
+              active={draft.requireManualReview}
+              disabled={loading || saving}
+              onChange={(value) => updateDraft("requireManualReview", value)}
+              leftLabel={t("system.states.disabled", { ns: "config" })}
+              rightLabel={t("system.states.enabled", { ns: "config" })}
+            />
           </div>
-        </CardHeader>
 
-        <CardContent className="space-y-8">
-          <section className="space-y-4">
-            <div className="flex flex-wrap items-end justify-between gap-3">
-              <div className="space-y-1">
-                <h3 className="text-base font-semibold">{t("system.title", { ns: "config" })}</h3>
-              </div>
-            </div>
+          <div className="h-px bg-border/60" />
 
-            <div className="space-y-5 rounded-2xl border border-border/60 bg-muted/10 px-4 py-4">
-              <div className="flex flex-wrap items-center justify-between gap-3">
-                <div className="space-y-1">
-                  <Label className="text-sm font-medium">{t("system.fields.manualReview", { ns: "config" })}</Label>
-                </div>
-                <BinaryChoice
-                  active={draft.requireManualReview}
-                  disabled={loading || saving}
-                  onChange={(value) => updateDraft("requireManualReview", value)}
-                  leftLabel={t("system.states.disabled", { ns: "config" })}
-                  rightLabel={t("system.states.enabled", { ns: "config" })}
-                />
-              </div>
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <Label className="text-sm font-medium">{t("system.fields.autoSettlement", { ns: "config" })}</Label>
+            <BinaryChoice
+              active={draft.autoSettlement}
+              disabled={loading || saving}
+              onChange={(value) => updateDraft("autoSettlement", value)}
+              leftLabel={t("system.states.disabled", { ns: "config" })}
+              rightLabel={t("system.states.enabled", { ns: "config" })}
+            />
+          </div>
 
-              <div className="h-px bg-border/60" />
+          <div className="h-px bg-border/60" />
 
-              <div className="flex flex-wrap items-center justify-between gap-3">
-                <div className="space-y-1">
-                  <Label className="text-sm font-medium">{t("system.fields.autoSettlement", { ns: "config" })}</Label>
-                </div>
-                <BinaryChoice
-                  active={draft.autoSettlement}
-                  disabled={loading || saving}
-                  onChange={(value) => updateDraft("autoSettlement", value)}
-                  leftLabel={t("system.states.disabled", { ns: "config" })}
-                  rightLabel={t("system.states.enabled", { ns: "config" })}
-                />
-              </div>
+          <div className="grid max-w-xs gap-2">
+            <Label htmlFor="cooldown-minutes" className="text-sm font-medium">
+              {t("system.fields.cooldownMinutes", { ns: "config" })}
+            </Label>
+            <Input
+              id="cooldown-minutes"
+              type="number"
+              min="0"
+              step="1"
+              value={draft.cooldownMinutes}
+              onChange={(e) => updateDraft("cooldownMinutes", e.target.value)}
+              disabled={loading || saving}
+            />
+          </div>
+        </div>
 
-              <div className="h-px bg-border/60" />
+      </section>
 
-              <div className="grid gap-2">
-                <Label htmlFor="cooldown-minutes" className="text-sm font-medium">
-                  {t("system.fields.cooldownMinutes", { ns: "config" })}
-                </Label>
-                <Input
-                  id="cooldown-minutes"
-                  type="number"
-                  min="0"
-                  step="1"
-                  value={draft.cooldownMinutes}
-                  onChange={(e) => updateDraft("cooldownMinutes", e.target.value)}
-                  disabled={loading || saving}
-                  className="max-w-[240px]"
-                />
-              </div>
+      <section className="space-y-4">
+        <h2 className="border-b border-border/60 pb-3 text-base font-semibold text-foreground">
+          {t("wallet.title", { ns: "config" })}
+        </h2>
+        <WalletConfigDocScreen embedded />
+      </section>
 
-              <div className="flex items-center gap-4 pt-2">
-                <Button onClick={() => void handleSave()} disabled={!dirty || loading || saving}>
-                  {saving ? t("saving", { ns: "adminUsers" }) : t("actions.save", { ns: "adminUsers" })}
-                </Button>
-                {dirty && (
-                  <Button
-                    variant="outline"
-                    onClick={() => {
-                      setDraft(saved);
-                      setDirty(false);
-                    }}
-                  >
-                    {t("system.discard", { ns: "config" })}
-                  </Button>
-                )}
-              </div>
-            </div>
-          </section>
+      <section className="space-y-4">
+        <h2 className="border-b border-border/60 pb-3 text-base font-semibold text-foreground">
+          {t("system.frontendConfig", { ns: "config" })}
+        </h2>
 
-          <section className="space-y-4 border-t border-border/60 pt-6">
-            <div className="space-y-1">
-              <h3 className="text-base font-semibold">{t("system.frontendConfig", { ns: "config", defaultValue: "前端配置" })}</h3>
-            </div>
-            
-            <div className="space-y-5 rounded-2xl border border-border/60 bg-muted/10 px-4 py-4">
-              <div className="grid gap-2">
-                <Label htmlFor="play-rules-html" className="text-sm font-medium">
-                  {t("system.fields.playRulesHtml", { ns: "config", defaultValue: "玩法规则 HTML 内容" })}
-                </Label>
-                <p className="text-xs text-muted-foreground">
-                  {t("system.fields.playRulesHtmlDesc", { ns: "config", defaultValue: "该内容将直接在玩家端的玩法规则页面作为 HTML 渲染。留空则显示前端默认提示。" })}
-                </p>
-                <Textarea
-                  id="play-rules-html"
-                  value={draft.playRulesHtml}
-                  onChange={(e) => updateDraft("playRulesHtml", e.target.value)}
-                  disabled={loading || saving}
-                  className="font-mono text-xs min-h-[200px]"
-                  placeholder="<div>...</div>"
-                />
-              </div>
+        <div className="grid gap-2">
+          <Label className="text-sm font-medium">
+            {t("system.fields.playRulesHtml", { ns: "config" })}
+          </Label>
+          <p className="text-xs text-muted-foreground">
+            {t("system.fields.playRulesHtmlDesc", { ns: "config" })}
+          </p>
+          <Tabs defaultValue="zh" className="w-full">
+            <TabsList className="w-full max-w-md">
+              <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="play-rules-html-zh"
+                value={draft.playRulesHtmlZh}
+                onChange={(e) => updateDraft("playRulesHtmlZh", e.target.value)}
+                disabled={loading || saving}
+                className="min-h-[200px] font-mono text-xs"
+                placeholder="<div>...</div>"
+              />
+            </TabsContent>
+            <TabsContent value="en" className="mt-3">
+              <Textarea
+                id="play-rules-html-en"
+                value={draft.playRulesHtmlEn}
+                onChange={(e) => updateDraft("playRulesHtmlEn", e.target.value)}
+                disabled={loading || saving}
+                className="min-h-[200px] font-mono text-xs"
+                placeholder="<div>...</div>"
+              />
+            </TabsContent>
+            <TabsContent value="ne" className="mt-3">
+              <Textarea
+                id="play-rules-html-ne"
+                value={draft.playRulesHtmlNe}
+                onChange={(e) => updateDraft("playRulesHtmlNe", e.target.value)}
+                disabled={loading || saving}
+                className="min-h-[200px] font-mono text-xs"
+                placeholder="<div>...</div>"
+              />
+            </TabsContent>
+          </Tabs>
+        </div>
 
-              <div className="flex items-center gap-4 pt-2">
-                <Button onClick={() => void handleSave()} disabled={!dirty || loading || saving}>
-                  {saving ? t("saving", { ns: "adminUsers" }) : t("actions.save", { ns: "adminUsers" })}
-                </Button>
-                {dirty && (
-                  <Button
-                    variant="outline"
-                    onClick={() => {
-                      setDraft(saved);
-                      setDirty(false);
-                    }}
-                  >
-                    {t("system.discard", { ns: "config" })}
-                  </Button>
-                )}
-              </div>
-            </div>
-          </section>
+      </section>
 
-          <section className="space-y-4 border-t border-border/60 pt-6">
-            <div className="space-y-1">
-              <h3 className="text-base font-semibold">{t("wallet.title", { ns: "config" })}</h3>
-            </div>
-            <WalletConfigDocScreen embedded />
-          </section>
-        </CardContent>
-      </Card>
+      <SaveActions
+        dirty={dirty}
+        loading={loading}
+        saving={saving}
+        onSave={() => void handleSave()}
+        onDiscard={() => {
+          setDraft(saved);
+          setDirty(false);
+        }}
+        saveLabel={saveLabel}
+        savingLabel={savingLabel}
+        discardLabel={discardLabel}
+      />
     </div>
   );
 }