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

src/modules/config/config-version-switcher.tsx

@@ -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={cn("flex w-full flex-col gap-2 sm:w-auto sm:min-w-[280px]", className)}>
-        <div className="grid gap-2 min-w-[260px]">
+        <Label>{label}</Label>
-          <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}>

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

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