xiaokang/lotteryAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
kang
2026-05-22 16:55:34 +08:00
parent 2d4a23968e
commit 7d01e5c47e
12 changed files with 901 additions and 599 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/modules/audit/audit-logs-console.tsx
View File

@@ -86,11 +86,13 @@ export function AuditLogsConsole(): React.ReactElement {
return (
<Card className="admin-list-card w-full max-w-none">
<CardHeader className="admin-list-header flex flex-col gap-5">
<CardHeader className="admin-list-header">
<CardTitle className="admin-list-title">{t("title")}</CardTitle>
<div className="grid gap-3 lg:grid-cols-2 xl:grid-cols-5">
<div className="flex min-w-0 items-center gap-2">
<Label htmlFor="aud-operator-id" className="shrink-0 whitespace-nowrap">
</CardHeader>
<CardContent className="admin-list-content">
<div className="admin-list-toolbar">
<div className="admin-list-field">
<Label htmlFor="aud-operator-id" className="sm:shrink-0">
{t("operator")}
</Label>
<Input
@@ -98,12 +100,12 @@ export function AuditLogsConsole(): React.ReactElement {
value={operatorId}
onChange={(e) => setOperatorId(e.target.value)}
placeholder={t("operatorIdPlaceholder")}
className="w-full"
className="w-full sm:w-36"
inputMode="numeric"
/>
</div>
<div className="flex min-w-0 items-center gap-2">
<Label htmlFor="aud-mod" className="shrink-0 whitespace-nowrap">
<div className="admin-list-field">
<Label htmlFor="aud-mod" className="sm:shrink-0">
{t("moduleCode")}
</Label>
<Input
@@ -111,11 +113,11 @@ export function AuditLogsConsole(): React.ReactElement {
value={moduleCode}
onChange={(e) => setModuleCode(e.target.value)}
placeholder={t("exactMatch")}
className="w-full"
className="w-full sm:w-40"
/>
</div>
<div className="flex min-w-0 items-center gap-2">
<Label htmlFor="aud-act" className="shrink-0 whitespace-nowrap">
<div className="admin-list-field">
<Label htmlFor="aud-act" className="sm:shrink-0">
{t("actionCode")}
</Label>
<Input
@@ -123,11 +125,11 @@ export function AuditLogsConsole(): React.ReactElement {
value={actionCode}
onChange={(e) => setActionCode(e.target.value)}
placeholder={t("exactMatch")}
className="w-full"
className="w-full sm:w-40"
/>
</div>
<div className="flex min-w-0 items-center gap-2">
<Label htmlFor="aud-op" className="shrink-0 whitespace-nowrap">
<div className="admin-list-field">
<Label htmlFor="aud-op" className="sm:shrink-0">
{t("operatorType")}
</Label>
<Input
@@ -135,66 +137,68 @@ export function AuditLogsConsole(): React.ReactElement {
value={operatorType}
onChange={(e) => setOperatorType(e.target.value)}
placeholder={t("operatorTypePlaceholder")}
className="w-full"
className="w-full sm:w-40"
/>
</div>
<div className="min-w-0 xl:col-span-2">
<AdminDateRangeField
id="aud-date-range"
label={t("time")}
from={startDate}
to={endDate}
onRangeChange={(range) => {
setStartDate(range.from);
setEndDate(range.to);
<div className="admin-list-field">
<Label htmlFor="aud-date-range" className="sm:shrink-0">
{t("time")}
</Label>
<div className="min-w-0 w-full sm:w-56">
<AdminDateRangeField
id="aud-date-range"
from={startDate}
to={endDate}
onRangeChange={(range) => {
setStartDate(range.from);
setEndDate(range.to);
}}
/>
</div>
</div>
<div className="admin-list-actions">
<AdminTableExportButton
tableId="audit-logs-table"
filename={exportLabels.filename}
sheetName={exportLabels.sheetName}
/>
<Button
type="button"
onClick={() => {
setAppliedOperatorId(operatorId);
setAppliedModule(moduleCode);
setAppliedAction(actionCode);
setAppliedOpType(operatorType);
setAppliedStartDate(startDate);
setAppliedEndDate(endDate);
setPage(1);
}}
/>
>
{t("actions.search", { ns: "common" })}
</Button>
<Button
type="button"
variant="secondary"
onClick={() => {
setOperatorId("");
setModuleCode("");
setActionCode("");
setOperatorType("");
setStartDate("");
setEndDate("");
setAppliedOperatorId("");
setAppliedModule("");
setAppliedAction("");
setAppliedOpType("");
setAppliedStartDate("");
setAppliedEndDate("");
setPage(1);
}}
>
{t("actions.reset", { ns: "common" })}
</Button>
</div>
</div>
<div className="flex flex-wrap justify-end gap-2">
<AdminTableExportButton
tableId="audit-logs-table"
filename={exportLabels.filename}
sheetName={exportLabels.sheetName}
/>
<Button
type="button"
onClick={() => {
setAppliedOperatorId(operatorId);
setAppliedModule(moduleCode);
setAppliedAction(actionCode);
setAppliedOpType(operatorType);
setAppliedStartDate(startDate);
setAppliedEndDate(endDate);
setPage(1);
}}
>
{t("actions.search", { ns: "common" })}
</Button>
<Button
type="button"
variant="secondary"
onClick={() => {
setOperatorId("");
setModuleCode("");
setActionCode("");
setOperatorType("");
setStartDate("");
setEndDate("");
setAppliedOperatorId("");
setAppliedModule("");
setAppliedAction("");
setAppliedOpType("");
setAppliedStartDate("");
setAppliedEndDate("");
setPage(1);
}}
>
{t("actions.reset", { ns: "common" })}
</Button>
</div>
</CardHeader>
<CardContent className="admin-list-content">
{err ? <p className="text-sm text-red-600 dark:text-red-400">{err}</p> : null}
{loading && !data ? (
<p className="text-muted-foreground text-sm">{t("states.loading", { ns: "common" })}</p>
@@ -202,7 +206,7 @@ export function AuditLogsConsole(): React.ReactElement {
{data ? (
<>
<div className="rounded-md border">
<div className="admin-table-shell">
<Table id="audit-logs-table">
<TableHeader>
<TableRow>

182
src/modules/config/doc/play-config-doc-screen.tsx
View File

@@ -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>

25
src/modules/jackpot/jackpot-config-screen.tsx
View File

@@ -3,14 +3,10 @@
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { ConfigDocPage } from "@/modules/config/config-doc-page";
import { ConfigSection } from "@/modules/config/config-section";
import { JackpotPoolsConsole } from "@/modules/jackpot/jackpot-pools-console";
import { JackpotRecordsConsole } from "@/modules/jackpot/jackpot-records-console";
/**
* 奖池：仅保留「侧栏 + 运营配置顶栏」两层导航；池参数与流水在同一页用分区展示。
*/
/** 奖池单页：池参数 + 流水记录，避免 ConfigDocPage / 内层 Card 重复套娃。 */
export function JackpotConfigScreen() {
const { t } = useTranslation("jackpot");
@@ -27,13 +23,20 @@ export function JackpotConfigScreen() {
}, []);
return (
<ConfigDocPage title={t("configTitle")}>
<ConfigSection title={t("poolsSectionTitle")}>
<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("poolsSectionTitle")}
</h2>
<JackpotPoolsConsole embedded />
</ConfigSection>
<ConfigSection id="jackpot-records" title={t("recordsSectionTitle")}>
</section>
<section id="jackpot-records" className="scroll-mt-24 space-y-4">
<h2 className="border-b border-border/60 pb-3 text-base font-semibold text-foreground">
{t("recordsSectionTitle")}
</h2>
<JackpotRecordsConsole embedded />
</ConfigSection>
</ConfigDocPage>
</section>
</div>
);
}

285
src/modules/jackpot/jackpot-pools-console.tsx
View File

@@ -150,149 +150,158 @@ export function JackpotPoolsConsole({ embedded = false }: JackpotPoolsConsolePro
}
};
const body = (
<Card className={embedded ? "border-border/60 shadow-none" : undefined}>
{!embedded ? (
<CardHeader>
<CardTitle className="text-base">{t("configTitle")}</CardTitle>
</CardHeader>
const poolList = (
<div className={embedded ? "space-y-4" : "space-y-8"}>
{loading ? <p className="text-muted-foreground text-sm">{t("states.loading", { ns: "common" })}</p> : null}
{!loading && items.length === 0 ? (
<p className="text-muted-foreground text-sm">{t("noPoolData")}</p>
) : null}
<CardContent className="space-y-8">
{loading ? <p className="text-muted-foreground text-sm">{t("states.loading", { ns: "common" })}</p> : null}
{!loading && items.length === 0 ? (
<p className="text-muted-foreground text-sm">{t("noPoolData")}</p>
) : null}
{items.map((p) => {
const d = drafts[p.id] ?? toDraft(p);
return (
<div key={p.id} className="space-y-4 rounded-lg border border-border p-4">
<h3 className="font-mono text-sm font-semibold">{p.currency_code}</h3>
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div className="space-y-1.5">
<Label htmlFor={`amt-${p.id}`}>{t("currentAmount")}</Label>
<Input
id={`amt-${p.id}`}
className="font-mono"
value={d.current_amount}
onChange={(e) => updateDraft(p.id, { current_amount: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label htmlFor={`cr-${p.id}`}>{t("contributionRate")}</Label>
<Input
id={`cr-${p.id}`}
className="font-mono"
value={d.contribution_rate}
onChange={(e) => updateDraft(p.id, { contribution_rate: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label htmlFor={`th-${p.id}`}>{t("triggerThreshold")}</Label>
<Input
id={`th-${p.id}`}
className="font-mono"
value={d.trigger_threshold}
onChange={(e) => updateDraft(p.id, { trigger_threshold: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label htmlFor={`pr-${p.id}`}>{t("payoutRate")}</Label>
<Input
id={`pr-${p.id}`}
className="font-mono"
value={d.payout_rate}
onChange={(e) => updateDraft(p.id, { payout_rate: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label htmlFor={`gap-${p.id}`}>{t("forceTriggerGap")}</Label>
<Input
id={`gap-${p.id}`}
className="font-mono"
value={d.force_trigger_draw_gap}
onChange={(e) => updateDraft(p.id, { force_trigger_draw_gap: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label htmlFor={`min-${p.id}`}>{t("minBetAmount")}</Label>
<Input
id={`min-${p.id}`}
className="font-mono"
value={d.min_bet_amount}
onChange={(e) => updateDraft(p.id, { min_bet_amount: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label htmlFor={`combo-${p.id}`}>{t("comboTriggerPlays")}</Label>
<Input
id={`combo-${p.id}`}
className="font-mono"
value={d.combo_trigger_play_codes}
placeholder="straight,ibox"
onChange={(e) => updateDraft(p.id, { combo_trigger_play_codes: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label>{t("status")}</Label>
<Select
value={d.status}
onValueChange={(v) => updateDraft(p.id, { status: v ?? "0" })}
>
<SelectTrigger>
<SelectValue>{d.status === "1" ? t("enabled") : t("disabled")}</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="0">{t("disabled")}</SelectItem>
<SelectItem value="1">{t("enabled")}</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="flex justify-end">
<Button type="button" disabled={savingId === p.id} onClick={() => void save(p)}>
{savingId === p.id ? t("saving") : t("save")}
</Button>
</div>
<div className="rounded-md border border-amber-200 bg-amber-50 p-3">
<div className="grid gap-3 sm:grid-cols-[1fr_1fr_auto] sm:items-end">
<div className="space-y-1.5">
<Label htmlFor={`burst-draw-${p.id}`}>{t("manualBurstDrawId")}</Label>
<Input
id={`burst-draw-${p.id}`}
className="font-mono"
value={d.manual_burst_draw_id}
onChange={(e) => updateDraft(p.id, { manual_burst_draw_id: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label htmlFor={`burst-amount-${p.id}`}>{t("manualBurstAmount")}</Label>
<Input
id={`burst-amount-${p.id}`}
className="font-mono"
value={d.manual_burst_amount}
onChange={(e) => updateDraft(p.id, { manual_burst_amount: e.target.value })}
/>
</div>
<Button
type="button"
variant="destructive"
disabled={burstingId === p.id}
onClick={() => void manualBurst(p)}
>
{burstingId === p.id ? t("processing") : t("manualBurst")}
</Button>
</div>
</div>
{items.map((p) => {
const d = drafts[p.id] ?? toDraft(p);
return (
<div
key={p.id}
className="space-y-4 rounded-xl border border-border/60 bg-muted/10 p-4"
>
<h3 className="font-mono text-sm font-semibold">{p.currency_code}</h3>
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
<div className="space-y-1.5">
<Label htmlFor={`amt-${p.id}`}>{t("currentAmount")}</Label>
<Input
id={`amt-${p.id}`}
className="font-mono"
value={d.current_amount}
onChange={(e) => updateDraft(p.id, { current_amount: e.target.value })}
/>
</div>
);
})}
</CardContent>
</Card>
<div className="space-y-1.5">
<Label htmlFor={`cr-${p.id}`}>{t("contributionRate")}</Label>
<Input
id={`cr-${p.id}`}
className="font-mono"
value={d.contribution_rate}
onChange={(e) => updateDraft(p.id, { contribution_rate: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label htmlFor={`th-${p.id}`}>{t("triggerThreshold")}</Label>
<Input
id={`th-${p.id}`}
className="font-mono"
value={d.trigger_threshold}
onChange={(e) => updateDraft(p.id, { trigger_threshold: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label htmlFor={`pr-${p.id}`}>{t("payoutRate")}</Label>
<Input
id={`pr-${p.id}`}
className="font-mono"
value={d.payout_rate}
onChange={(e) => updateDraft(p.id, { payout_rate: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label htmlFor={`gap-${p.id}`}>{t("forceTriggerGap")}</Label>
<Input
id={`gap-${p.id}`}
className="font-mono"
value={d.force_trigger_draw_gap}
onChange={(e) => updateDraft(p.id, { force_trigger_draw_gap: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label htmlFor={`min-${p.id}`}>{t("minBetAmount")}</Label>
<Input
id={`min-${p.id}`}
className="font-mono"
value={d.min_bet_amount}
onChange={(e) => updateDraft(p.id, { min_bet_amount: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label htmlFor={`combo-${p.id}`}>{t("comboTriggerPlays")}</Label>
<Input
id={`combo-${p.id}`}
className="font-mono"
value={d.combo_trigger_play_codes}
placeholder="straight,ibox"
onChange={(e) => updateDraft(p.id, { combo_trigger_play_codes: e.target.value })}
/>
</div>
<div className="space-y-1.5">
<Label htmlFor={`status-${p.id}`}>{t("status")}</Label>
<Select
value={d.status}
onValueChange={(v) => updateDraft(p.id, { status: v ?? "0" })}
>
<SelectTrigger id={`status-${p.id}`} className="w-full">
<SelectValue>{d.status === "1" ? t("enabled") : t("disabled")}</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="0">{t("disabled")}</SelectItem>
<SelectItem value="1">{t("enabled")}</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="flex justify-end border-t border-border/60 pt-3">
<Button type="button" disabled={savingId === p.id} onClick={() => void save(p)}>
{savingId === p.id ? t("saving") : t("save")}
</Button>
</div>
<div className="rounded-lg border border-amber-200/80 bg-amber-50/80 p-4 dark:border-amber-900/50 dark:bg-amber-950/30">
<p className="mb-3 text-xs font-medium text-amber-900 dark:text-amber-200">
{t("manualBurst")}
</p>
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end">
<div className="min-w-0 flex-1 space-y-1.5 sm:max-w-xs">
<Label htmlFor={`burst-draw-${p.id}`}>{t("manualBurstDrawId")}</Label>
<Input
id={`burst-draw-${p.id}`}
className="font-mono"
value={d.manual_burst_draw_id}
onChange={(e) => updateDraft(p.id, { manual_burst_draw_id: e.target.value })}
/>
</div>
<div className="min-w-0 flex-1 space-y-1.5 sm:max-w-xs">
<Label htmlFor={`burst-amount-${p.id}`}>{t("manualBurstAmount")}</Label>
<Input
id={`burst-amount-${p.id}`}
className="font-mono"
value={d.manual_burst_amount}
onChange={(e) => updateDraft(p.id, { manual_burst_amount: e.target.value })}
/>
</div>
<Button
type="button"
variant="destructive"
className="shrink-0 sm:ml-auto"
disabled={burstingId === p.id}
onClick={() => void manualBurst(p)}
>
{burstingId === p.id ? t("processing") : t("manualBurst")}
</Button>
</div>
</div>
</div>
);
})}
</div>
);
if (embedded) {
return body;
return poolList;
}
return <ModuleScaffold>{body}</ModuleScaffold>;
return (
<ModuleScaffold>
<Card>
<CardHeader>
<CardTitle className="text-base">{t("configTitle")}</CardTitle>
</CardHeader>
<CardContent>{poolList}</CardContent>
</Card>
</ModuleScaffold>
);
}

325
src/modules/jackpot/jackpot-records-console.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import type React from "react";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
@@ -32,6 +33,51 @@ type JackpotRecordsConsoleProps = {
embedded?: boolean;
};
/** 表格在 admin-table-shell 内时去掉 Table 组件自带的第二层边框 */
const TABLE_IN_SHELL_CLASS =
"[&_[data-slot=table-container]]:rounded-none [&_[data-slot=table-container]]:border-0 [&_[data-slot=table-container]]:bg-transparent [&_[data-slot=table-container]]:shadow-none";
function JackpotRecordTableSection({
title,
tableId,
exportFilename,
exportSheetName,
loading,
hasData,
children,
footer,
}: {
title: string;
tableId: string;
exportFilename: string;
exportSheetName: string;
loading: boolean;
hasData: boolean;
children: React.ReactNode;
footer: React.ReactNode;
}) {
const { t } = useTranslation("common");
return (
<div className="admin-table-shell">
<div className="admin-table-toolbar flex items-center justify-between gap-3">
<h3 className="text-sm font-semibold text-foreground">{title}</h3>
<AdminTableExportButton
tableId={tableId}
filename={exportFilename}
sheetName={exportSheetName}
/>
</div>
{loading && !hasData ? (
<p className="px-4 py-6 text-sm text-muted-foreground">{t("states.loading")}</p>
) : (
<div className={TABLE_IN_SHELL_CLASS}>{children}</div>
)}
{footer ? <div className="px-4 pb-4">{footer}</div> : null}
</div>
);
}
export function JackpotRecordsConsole({ embedded = false }: JackpotRecordsConsoleProps) {
const { t } = useTranslation(["jackpot", "common"]);
const payoutExport = useExportLabels("jackpotPayouts");
@@ -147,155 +193,152 @@ export function JackpotRecordsConsole({ embedded = false }: JackpotRecordsConsol
</Card>
);
const payoutHeader = embedded ? (
<p className="mb-3 text-sm font-semibold">{t("payoutRecords")}</p>
) : (
<CardHeader>
<CardTitle className="text-base">{t("payoutRecords")}</CardTitle>
</CardHeader>
const payoutFooter = payouts ? (
<AdminListPaginationFooter
selectId="jk-payout-per"
total={payouts.meta.total}
page={payouts.meta.current_page}
lastPage={payouts.meta.last_page}
perPage={payouts.meta.per_page}
loading={loadingP}
onPerPageChange={(n) => {
setPPer(n);
setPPage(1);
}}
onPageChange={setPPage}
/>
) : null;
const contributionFooter = contribs ? (
<AdminListPaginationFooter
selectId="jk-contrib-per"
total={contribs.meta.total}
page={contribs.meta.current_page}
lastPage={contribs.meta.last_page}
perPage={contribs.meta.per_page}
loading={loadingC}
onPerPageChange={(n) => {
setCPer(n);
setCPage(1);
}}
onPageChange={setCPage}
/>
) : null;
const payoutTable = (
<JackpotRecordTableSection
title={t("payoutRecords")}
tableId="jackpot-payout-table"
exportFilename={payoutExport.filename}
exportSheetName={payoutExport.sheetName}
loading={loadingP}
hasData={payouts != null}
footer={payoutFooter}
>
<Table id="jackpot-payout-table" className="table-fixed">
<TableHeader>
<TableRow>
<TableHead className="w-14">{t("table.id", { ns: "common" })}</TableHead>
<TableHead className="w-[11rem]">{t("drawNo")}</TableHead>
<TableHead className="w-28">{t("trigger")}</TableHead>
<TableHead className="w-32 text-right">{t("payoutAmount")}</TableHead>
<TableHead className="w-24 text-right">{t("winnerCount")}</TableHead>
<TableHead className="w-[11rem]">{t("time")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{(payouts?.items ?? []).length === 0 ? (
<TableRow>
<TableCell colSpan={6} className="text-muted-foreground">
{t("states.noData", { ns: "common" })}
</TableCell>
</TableRow>
) : (
(payouts?.items ?? []).map((r) => (
<TableRow key={r.id}>
<TableCell className="font-mono text-xs">{r.id}</TableCell>
<TableCell className="font-mono text-xs">{r.draw_no ?? "—"}</TableCell>
<TableCell className="text-xs">{triggerTypeText(r.trigger_type)}</TableCell>
<TableCell className="text-right font-mono text-xs tabular-nums">
{formatAdminMinorUnits(r.total_payout_amount, r.currency_code ?? "NPR")}
</TableCell>
<TableCell className="text-right tabular-nums">{r.winner_count}</TableCell>
<TableCell className="text-xs text-muted-foreground whitespace-nowrap">
{formatDt(r.created_at)}
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</JackpotRecordTableSection>
);
const contributionHeader = embedded ? (
<p className="mb-3 text-sm font-semibold">{t("contributionRecords")}</p>
) : (
<CardHeader>
<CardTitle className="text-base">{t("contributionRecords")}</CardTitle>
</CardHeader>
const contributionTable = (
<JackpotRecordTableSection
title={t("contributionRecords")}
tableId="jackpot-contribution-table"
exportFilename={contributionExport.filename}
exportSheetName={contributionExport.sheetName}
loading={loadingC}
hasData={contribs != null}
footer={contributionFooter}
>
<Table id="jackpot-contribution-table" className="table-fixed">
<TableHeader>
<TableRow>
<TableHead className="w-14">{t("table.id", { ns: "common" })}</TableHead>
<TableHead className="w-[11rem]">{t("drawNo")}</TableHead>
<TableHead className="w-[11rem]">{t("ticketNo")}</TableHead>
<TableHead>{t("player")}</TableHead>
<TableHead className="w-32 text-right">{t("contributionAmount")}</TableHead>
<TableHead className="w-[11rem]">{t("time")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{(contribs?.items ?? []).length === 0 ? (
<TableRow>
<TableCell colSpan={6} className="text-muted-foreground">
{t("states.noData", { ns: "common" })}
</TableCell>
</TableRow>
) : (
(contribs?.items ?? []).map((r) => (
<TableRow key={r.id}>
<TableCell className="font-mono text-xs">{r.id}</TableCell>
<TableCell className="font-mono text-xs">{r.draw_no ?? "—"}</TableCell>
<TableCell className="font-mono text-xs">{r.ticket_no ?? "—"}</TableCell>
<TableCell className="max-w-[12rem] truncate text-xs">{r.player_username ?? "—"}</TableCell>
<TableCell className="text-right font-mono text-xs tabular-nums">
{formatAdminMinorUnits(r.contribution_amount, r.currency_code ?? "NPR")}
</TableCell>
<TableCell className="text-xs text-muted-foreground whitespace-nowrap">
{formatDt(r.created_at)}
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</JackpotRecordTableSection>
);
const content = (
<>
{filterBlock}
{err ? <p className="text-destructive text-sm">{err}</p> : null}
{err ? <p className="text-destructive mb-4 text-sm">{err}</p> : null}
<Card className={embedded ? "mb-6 border-border/60 shadow-none" : "mb-8"}>
{!embedded ? payoutHeader : null}
<CardContent className={embedded ? "p-0" : undefined}>
{embedded ? payoutHeader : null}
{loadingP && !payouts ? (
<p className="text-muted-foreground text-sm">{t("states.loading", { ns: "common" })}</p>
) : (
<>
<div className="admin-table-toolbar">
<AdminTableExportButton
tableId="jackpot-payout-table"
filename={payoutExport.filename}
sheetName={payoutExport.sheetName}
/>
</div>
<Table id="jackpot-payout-table">
<TableHeader>
<TableRow>
<TableHead>{t("table.id", { ns: "common" })}</TableHead>
<TableHead>{t("drawNo")}</TableHead>
<TableHead>{t("trigger")}</TableHead>
<TableHead className="text-right">{t("payoutAmount")}</TableHead>
<TableHead className="text-right">{t("winnerCount")}</TableHead>
<TableHead>{t("time")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{(payouts?.items ?? []).map((r) => (
<TableRow key={r.id}>
<TableCell className="font-mono text-xs">{r.id}</TableCell>
<TableCell className="font-mono text-xs">{r.draw_no ?? "—"}</TableCell>
<TableCell className="text-xs">{triggerTypeText(r.trigger_type)}</TableCell>
<TableCell className="text-right font-mono text-xs tabular-nums">
{formatAdminMinorUnits(r.total_payout_amount, r.currency_code ?? "NPR")}
</TableCell>
<TableCell className="text-right tabular-nums">{r.winner_count}</TableCell>
<TableCell className="text-xs text-muted-foreground whitespace-nowrap">
{formatDt(r.created_at)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</>
)}
{payouts ? (
<AdminListPaginationFooter
selectId="jk-payout-per"
total={payouts.meta.total}
page={payouts.meta.current_page}
lastPage={payouts.meta.last_page}
perPage={payouts.meta.per_page}
loading={loadingP}
onPerPageChange={(n) => {
setPPer(n);
setPPage(1);
}}
onPageChange={setPPage}
/>
) : null}
</CardContent>
</Card>
<Card className={embedded ? "border-border/60 shadow-none" : undefined}>
{!embedded ? contributionHeader : null}
<CardContent className={embedded ? "p-0" : undefined}>
{embedded ? contributionHeader : null}
{loadingC && !contribs ? (
<p className="text-muted-foreground text-sm">{t("states.loading", { ns: "common" })}</p>
) : (
<>
<div className="admin-table-toolbar">
<AdminTableExportButton
tableId="jackpot-contribution-table"
filename={contributionExport.filename}
sheetName={contributionExport.sheetName}
/>
</div>
<Table id="jackpot-contribution-table">
<TableHeader>
<TableRow>
<TableHead>{t("table.id", { ns: "common" })}</TableHead>
<TableHead>{t("drawNo")}</TableHead>
<TableHead>{t("ticketNo")}</TableHead>
<TableHead>{t("player")}</TableHead>
<TableHead className="text-right">{t("contributionAmount")}</TableHead>
<TableHead>{t("time")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{(contribs?.items ?? []).map((r) => (
<TableRow key={r.id}>
<TableCell className="font-mono text-xs">{r.id}</TableCell>
<TableCell className="font-mono text-xs">{r.draw_no ?? "—"}</TableCell>
<TableCell className="font-mono text-xs">{r.ticket_no ?? "—"}</TableCell>
<TableCell className="max-w-[10rem] truncate text-xs">
{r.player_username ?? "—"}
</TableCell>
<TableCell className="text-right font-mono text-xs tabular-nums">
{formatAdminMinorUnits(r.contribution_amount, r.currency_code ?? "NPR")}
</TableCell>
<TableCell className="text-xs text-muted-foreground whitespace-nowrap">
{formatDt(r.created_at)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</>
)}
{contribs ? (
<AdminListPaginationFooter
selectId="jk-contrib-per"
total={contribs.meta.total}
page={contribs.meta.current_page}
lastPage={contribs.meta.last_page}
perPage={contribs.meta.per_page}
loading={loadingC}
onPerPageChange={(n) => {
setCPer(n);
setCPage(1);
}}
onPageChange={setCPage}
/>
) : null}
</CardContent>
</Card>
{embedded ? (
<div className="space-y-8">
{payoutTable}
{contributionTable}
</div>
) : (
<div className="space-y-8">
{payoutTable}
{contributionTable}
</div>
)}
</>
);

26
src/modules/settings/currency-settings-panel.tsx
View File

@@ -11,6 +11,7 @@ import {
postAdminCurrency,
putAdminCurrency,
} from "@/api/admin-currencies";
import { AdminStatusBadge } from "@/components/admin/admin-status-badge";
import { Button } from "@/components/ui/button";
import { AdminTableExportButton } from "@/components/admin/admin-table-export-button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -205,12 +206,7 @@ export function CurrencySettingsPanel() {
return (
<Card className="admin-list-card">
<CardHeader className="admin-list-header flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="space-y-1">
<CardTitle className="admin-list-title">{t("currencies.title", { ns: "config" })}</CardTitle>
<p className="text-sm text-muted-foreground">
{t("currencies.description", { ns: "config" })}
</p>
</div>
<CardTitle className="admin-list-title">{t("currencies.title", { ns: "config" })}</CardTitle>
<div className="flex items-center gap-2">
<AdminTableExportButton tableId="admin-currencies-table" filename={exportLabels.filename}
sheetName={exportLabels.sheetName} />
@@ -249,8 +245,22 @@ export function CurrencySettingsPanel() {
<TableCell className="font-mono">{row.code}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.decimal_places}</TableCell>
<TableCell>{row.is_enabled ? t("system.states.enabled", { ns: "config" }) : t("system.states.disabled", { ns: "config" })}</TableCell>
<TableCell>{row.is_bettable ? t("system.states.enabled", { ns: "config" }) : t("system.states.disabled", { ns: "config" })}</TableCell>
<TableCell>
<AdminStatusBadge status={row.is_enabled ? "enabled" : "disabled"}>
{row.is_enabled
? t("system.states.enabled", { ns: "config" })
: t("system.states.disabled", { ns: "config" })}
</AdminStatusBadge>
</TableCell>
<TableCell>
<AdminStatusBadge
status={row.is_enabled && row.is_bettable ? "enabled" : "disabled"}
>
{row.is_enabled && row.is_bettable
? t("system.states.enabled", { ns: "config" })
: t("system.states.disabled", { ns: "config" })}
</AdminStatusBadge>
</TableCell>
<TableCell className="text-center">
<div className="flex items-center justify-center gap-2">
<Button variant="outline" size="sm" onClick={() => openEdit(row)}>

303
src/modules/settings/system-settings-screen.tsx
View File

@@ -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>
);
}

133
src/modules/tickets/player-tickets-console.tsx
View File

@@ -168,9 +168,11 @@ export function PlayerTicketsConsole(): React.ReactElement {
<CardTitle className="admin-list-title">{t("playerTicketQuery")}</CardTitle>
</CardHeader>
<CardContent className="admin-list-content">
<div className="grid gap-3 lg:grid-cols-2 xl:grid-cols-4">
<div className="grid gap-1.5">
<Label htmlFor="pt-player">{t("playerId")}</Label>
<div className="admin-list-toolbar">
<div className="admin-list-field min-w-[12rem] flex-1 sm:max-w-md">
<Label htmlFor="pt-player" className="sm:shrink-0">
{t("playerId")}
</Label>
<Input
id="pt-player"
className="font-mono"
@@ -181,18 +183,22 @@ export function PlayerTicketsConsole(): React.ReactElement {
}
/>
</div>
<div className="grid gap-1.5">
<Label htmlFor="pt-draw">{t("drawNoOptional")}</Label>
<div className="admin-list-field">
<Label htmlFor="pt-draw" className="sm:shrink-0">
{t("drawNoOptional")}
</Label>
<Input
id="pt-draw"
className="font-mono text-sm"
className="font-mono text-sm sm:w-44"
placeholder={t("drawNoPlaceholder")}
value={draft.drawNo}
onChange={(e) => setDraft((current) => ({ ...current, drawNo: e.target.value }))}
/>
</div>
<div className="grid gap-1.5">
<Label htmlFor="pt-number">{t("numberKeyword")}</Label>
<div className="admin-list-field min-w-[12rem] flex-1 sm:max-w-md">
<Label htmlFor="pt-number" className="sm:shrink-0">
{t("numberKeyword")}
</Label>
<Input
id="pt-number"
className="font-mono text-sm"
@@ -203,62 +209,67 @@ export function PlayerTicketsConsole(): React.ReactElement {
}
/>
</div>
<div className="grid gap-1.5">
<AdminDateRangeField
id="pt-date-range"
label={t("placedDateRange")}
from={draft.startDate}
to={draft.endDate}
onRangeChange={(range) =>
setDraft((current) => ({
...current,
startDate: range.from,
endDate: range.to,
}))
}
/>
<div className="admin-list-field">
<Label htmlFor="pt-date-range" className="sm:shrink-0">
{t("placedDateRange")}
</Label>
<div className="min-w-0 w-full sm:w-56">
<AdminDateRangeField
id="pt-date-range"
from={draft.startDate}
to={draft.endDate}
onRangeChange={(range) =>
setDraft((current) => ({
...current,
startDate: range.from,
endDate: range.to,
}))
}
/>
</div>
</div>
</div>
<div className="grid gap-2">
<div className="flex items-center justify-between gap-3">
<span className="text-sm font-medium leading-none">{t("statusFilterLabel")}</span>
<span className="text-muted-foreground text-xs">{t("statusHint")}</span>
<div className="admin-list-field">
<Label htmlFor="pt-status" className="sm:shrink-0">
{t("statusFilterLabel")}
</Label>
<DropdownMenu>
<DropdownMenuTrigger
id="pt-status"
title={t("statusHint")}
className="inline-flex h-8 w-full min-w-0 items-center justify-between rounded-md border border-border bg-card px-3 text-left text-sm font-normal shadow-sm outline-none transition-all hover:bg-accent focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 sm:w-44"
>
<span className="truncate">{ticketStatusSummary(draft.statuses, t)}</span>
<ChevronDown className="size-4 shrink-0 opacity-60" />
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-56">
{TICKET_STATUS_OPTIONS.map((status) => (
<DropdownMenuCheckboxItem
key={status}
checked={draft.statuses.includes(status)}
onCheckedChange={(checked) => toggleStatus(status, checked === true)}
>
{ticketStatusText(status, t)}
</DropdownMenuCheckboxItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
<DropdownMenu>
<DropdownMenuTrigger className="inline-flex h-11 w-full items-center justify-between rounded-md border border-border bg-card px-4 text-left text-sm font-normal text-primary shadow-sm outline-none transition-all hover:bg-accent hover:text-primary focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50">
<span className="truncate">{ticketStatusSummary(draft.statuses, t)}</span>
<ChevronDown className="size-4 shrink-0 opacity-60" />
</DropdownMenuTrigger>
<DropdownMenuContent className="w-[min(28rem,calc(100vw-2rem))]">
{TICKET_STATUS_OPTIONS.map((status) => (
<DropdownMenuCheckboxItem
key={status}
checked={draft.statuses.includes(status)}
onCheckedChange={(checked) => toggleStatus(status, checked === true)}
>
{ticketStatusText(status, t)}
</DropdownMenuCheckboxItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="flex flex-wrap gap-2">
<AdminTableExportButton
tableId="tickets-table"
filename={exportLabels.filename}
<div className="admin-list-actions">
<AdminTableExportButton
tableId="tickets-table"
filename={exportLabels.filename}
sheetName={exportLabels.sheetName}
/>
<Button type="button" size="sm" onClick={() => runSearch()}>
{t("query")}
</Button>
<Button type="button" size="sm" variant="outline" onClick={() => resetFilters()}>
{t("resetFilters")}
</Button>
<Button type="button" size="sm" variant="secondary" onClick={() => void load()}>
{t("refreshCurrentPage")}
</Button>
/>
<Button type="button" size="sm" onClick={() => runSearch()}>
{t("query")}
</Button>
<Button type="button" size="sm" variant="outline" onClick={() => resetFilters()}>
{t("resetFilters")}
</Button>
<Button type="button" size="sm" variant="secondary" onClick={() => void load()}>
{t("refreshCurrentPage")}
</Button>
</div>
</div>
{applied.playerQuery || applied.drawNo || applied.numberKeyword || applied.startDate || applied.endDate || applied.statuses.length > 0 ? (