refactor(config): 优化玩法配置版本切换布局

This commit is contained in:
2026-05-16 10:52:44 +08:00
parent 1578c7e214
commit 72a480ccc8
2 changed files with 40 additions and 33 deletions

View File

@@ -59,6 +59,7 @@ export type ConfigVersionSwitcherProps = {
label?: string;
sheetTitle?: string;
sheetDescription?: string;
className?: string;
onDeleteVersion?: (row: ConfigVersionSummary) => Promise<void>;
onRollbackVersion?: (row: ConfigVersionSummary) => void;
rollbackBusy?: boolean;
@@ -72,6 +73,7 @@ export function ConfigVersionSwitcher({
label = "配置版本",
sheetTitle = "切换配置版本",
sheetDescription = "选择一条版本在本页查看;草稿可编辑,生效中与已归档为只读。",
className,
onDeleteVersion,
onRollbackVersion,
rollbackBusy = false,
@@ -132,15 +134,15 @@ export function ConfigVersionSwitcher({
return (
<>
<div className="flex flex-wrap items-end gap-2">
<div className="grid gap-2 min-w-[260px]">
<Label>{label}</Label>
<div className={cn("flex w-full flex-col gap-2 sm:w-auto sm:min-w-[280px]", className)}>
<Label>{label}</Label>
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
<Select
value={selectedId}
onValueChange={(v) => onSelectedIdChange(v ?? "")}
disabled={loading || sortedVersions.length === 0}
>
<SelectTrigger>
<SelectTrigger className="w-full sm:w-[280px]">
<SelectValue placeholder={loading ? "加载中…" : "选择版本"} />
</SelectTrigger>
<SelectContent>
@@ -151,10 +153,10 @@ export function ConfigVersionSwitcher({
))}
</SelectContent>
</Select>
<Button type="button" variant="outline" disabled={loading} onClick={() => setSheetOpen(true)}>
</Button>
</div>
<Button type="button" variant="outline" disabled={loading} onClick={() => setSheetOpen(true)}>
</Button>
</div>
<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>

View File

@@ -279,33 +279,38 @@ export function PlayConfigDocScreen() {
<CardTitle className="text-lg"></CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<ConfigVersionSwitcher
versions={list}
selectedId={selectedId}
onSelectedIdChange={setSelectedId}
loading={loadingList}
sheetTitle="玩法配置版本"
onDeleteVersion={handleDeleteVersion}
/>
<div className="rounded-xl border bg-muted/20 p-3">
<div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
<ConfigVersionSwitcher
versions={list}
selectedId={selectedId}
onSelectedIdChange={setSelectedId}
loading={loadingList}
sheetTitle="玩法配置版本"
onDeleteVersion={handleDeleteVersion}
className="lg:flex-1"
/>
<div className="flex flex-wrap items-center gap-2">
<Button type="button" variant="secondary" onClick={() => void refreshList()} disabled={loadingList}>
</Button>
<Button type="button" onClick={() => void handleNewDraft()} disabled={saving}>
稿
</Button>
<Button type="button" onClick={() => void handleSaveDraft()} disabled={!isDraft || saving || loadingDetail}>
稿
</Button>
<Button
type="button"
className="bg-emerald-600 text-white hover:bg-emerald-600/90"
onClick={() => void handlePublish()}
disabled={!isDraft || saving || loadingDetail}
>
</Button>
<div className="flex flex-wrap items-center gap-2 lg:justify-end">
<Button type="button" variant="secondary" onClick={() => void refreshList()} disabled={loadingList}>
</Button>
<Button type="button" onClick={() => void handleNewDraft()} disabled={saving}>
稿
</Button>
<Button type="button" onClick={() => void handleSaveDraft()} disabled={!isDraft || saving || loadingDetail}>
稿
</Button>
<Button
type="button"
className="bg-emerald-600 text-white hover:bg-emerald-600/90"
onClick={() => void handlePublish()}
disabled={!isDraft || saving || loadingDetail}
>
</Button>
</div>
</div>
</div>
{detail ? (