refactor: 更新配置模块的样式与布局,优化组件结构,增强可读性与一致性

This commit is contained in:
2026-05-21 16:33:22 +08:00
parent 055c613a6d
commit 3ce84af39c
15 changed files with 541 additions and 377 deletions

View File

@@ -14,7 +14,8 @@ import {
publishOddsVersion,
putOddsItems,
} from "@/api/admin-config";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ConfigContextBanner, ConfigContextEmphasis } from "@/modules/config/config-context-banner";
import { ConfigDocPage, ConfigDocToolbar } from "@/modules/config/config-doc-page";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
@@ -266,55 +267,60 @@ export function RebateConfigDocScreen() {
}
return (
<Card>
<CardHeader className="space-y-1">
<CardTitle className="text-lg">{t("nav.items.rebate", { ns: "config" })}</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex flex-wrap items-center gap-3">
<ConfigVersionSwitcher
versions={listRows}
selectedId={selectedId}
onSelectedIdChange={setSelectedId}
loading={loading}
sheetTitle={`${t("nav.items.rebate", { ns: "config" })} ${t("versionSwitcher.sheetTitle", { ns: "config" })}`}
sheetDescription={t("rebate.sheetDescription", { ns: "config" })}
onDeleteVersion={handleDeleteVersion}
className="w-auto min-w-0"
/>
<ConfigVersionActions
isDraft={isDraft}
loadingList={loading}
loadingDetail={loadingDetail}
saving={saving}
publishLabel={t("rebate.publishLabel", { ns: "config" })}
onRefresh={() => void refreshList()}
onNewDraft={() => void handleNewDraft()}
onSaveDraft={() => void handleSave()}
onPublish={() => void handlePublish()}
/>
{detail ? (
<p className="text-sm text-muted-foreground">
{t("rebate.editingVersion", {
ns: "config",
version: detail.version_no,
status:
detail.status === "draft"
? t("versionStatus.draft", { ns: "config" })
: detail.status === "active"
? t("versionStatus.active", { ns: "config" })
: t("versionStatus.archived", { ns: "config" }),
})}
{!isDraft ? (
<span className="text-amber-600 dark:text-amber-400"> - {t("rebate.readOnlyHint", { ns: "config" })}</span>
) : null}
</p>
) : null}
</div>
<div className="grid gap-4 sm:grid-cols-3">
<ConfigDocPage
title={t("nav.items.rebate", { ns: "config" })}
toolbar={
<ConfigDocToolbar
switcher={
<ConfigVersionSwitcher
versions={listRows}
selectedId={selectedId}
onSelectedIdChange={setSelectedId}
loading={loading}
sheetTitle={`${t("nav.items.rebate", { ns: "config" })} ${t("versionSwitcher.sheetTitle", { ns: "config" })}`}
sheetDescription={t("rebate.sheetDescription", { ns: "config" })}
onDeleteVersion={handleDeleteVersion}
/>
}
actions={
<ConfigVersionActions
isDraft={isDraft}
loadingList={loading}
loadingDetail={loadingDetail}
saving={saving}
publishLabel={t("rebate.publishLabel", { ns: "config" })}
onRefresh={() => void refreshList()}
onNewDraft={() => void handleNewDraft()}
onSaveDraft={() => void handleSave()}
onPublish={() => void handlePublish()}
/>
}
/>
}
context={
detail ? (
<ConfigContextBanner emphasis={!isDraft}>
{t("rebate.editingVersion", {
ns: "config",
version: detail.version_no,
status:
detail.status === "draft"
? t("versionStatus.draft", { ns: "config" })
: detail.status === "active"
? t("versionStatus.active", { ns: "config" })
: t("versionStatus.archived", { ns: "config" }),
})}
{!isDraft ? (
<>
{" "}
<ConfigContextEmphasis>{t("rebate.readOnlyHint", { ns: "config" })}</ConfigContextEmphasis>
</>
) : null}
</ConfigContextBanner>
) : null
}
>
<div className="grid gap-5 sm:grid-cols-3">
<div className="grid gap-2">
<Label>{t("rebate.fields.d2", { ns: "config" })}</Label>
{isDraft ? (
@@ -387,10 +393,9 @@ export function RebateConfigDocScreen() {
</span>
</div>
{loading || loadingDetail ? (
<p className="text-sm text-muted-foreground">{t("states.loading", { ns: "common" })}</p>
) : null}
</CardContent>
</Card>
{loading || loadingDetail ? (
<p className="text-sm text-muted-foreground">{t("states.loading", { ns: "common" })}</p>
) : null}
</ConfigDocPage>
);
}