站点背景功能优化、页脚上边距调整

frontend/app/admin/appearance/AppearanceAdmin.tsx

@@ -24,8 +24,8 @@ import {
   AdminSettingRow,
   AdminStepper,
   AdminSwitch,
-  AdminSegmented,
 } from "@/components/admin";
+import BgModePicker from "./BgModePicker";
 import {
   apiUpdateSiteSettings,
   apiUploadSiteBackground,
@@ -41,10 +41,9 @@ import {
   normalizeHex,
 } from "@/lib/theme";
 import {
-  BG_MODE_OPTIONS,
+  BG_PREVIEW_ASPECT,
   applySiteBackground,
   bgConfigFromSettings,
-  normalizeBgMode,
   previewBoxStyle,
   type BgMode,
   type BgSurface,
@@ -239,7 +238,7 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
     try {
       await saveBgPatch(
         { [key]: mode },
-        surface === "site" ? "前台铺放模式已保存" : "后台铺放模式已保存"
+        surface === "site" ? "前台铺放方式已保存" : "后台铺放方式已保存"
       );
     } catch (e) {
       toast(e instanceof Error ? e.message : "保存失败", "error");
@@ -285,11 +284,15 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
           </div>
         </div>
         <div
-          className="relative h-36 rounded-[var(--r-sm)] border overflow-hidden"
+          className="relative w-full max-w-[480px] rounded-[var(--r-sm)] border overflow-hidden"
           style={{
+            aspectRatio: BG_PREVIEW_ASPECT,
             borderColor: "var(--line)",
             ...previewBoxStyle(url, mode),
           }}
+          role="img"
+          aria-label={`${title}背景预览，按 16:9 常见显示器比例`}
+          title="按 16:9（1920×1080）显示器比例预览"
         >
           {!url && (
             <span
@@ -299,6 +302,17 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
               默认纹饰画布
             </span>
           )}
+          <span
+            className="absolute bottom-1.5 right-1.5 text-[10.5px] leading-none px-1.5 py-1 rounded-[4px] pointer-events-none"
+            aria-hidden
+            style={{
+              background: "color-mix(in srgb, var(--panel) 88%, transparent)",
+              color: "var(--ink-3)",
+              border: "1px solid var(--line)",
+            }}
+          >
+            16:9
+          </span>
         </div>
         <input
           ref={fileRef}
@@ -333,22 +347,13 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
           ) : null}
         </div>
         <div>
-          <p className="field-label mb-2">铺放模式</p>
-          <AdminSegmented
-            size="sm"
-            role="group"
-            ariaLabel={`${title}铺放模式`}
+          <p className="field-label mb-2">铺放方式</p>
+          <BgModePicker
             value={mode}
-            onChange={(key) => void onChangeBgMode(surface, normalizeBgMode(key))}
-            options={BG_MODE_OPTIONS.map((o) => ({
-              key: o.key,
-              label: o.label,
-              disabled: busy,
-            }))}
+            disabled={busy}
+            ariaLabel={`${title}铺放方式`}
+            onChange={(next) => void onChangeBgMode(surface, next)}
           />
-          <p className="meta text-[12px] mt-1.5">
-            {BG_MODE_OPTIONS.find((o) => o.key === mode)?.hint}
-          </p>
         </div>
       </div>
     );
@@ -675,7 +680,7 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
             <ImageIcon size={15} /> 站点背景图
           </span>
         }
-        description="前台与后台可分别上传 JPEG / PNG / WebP（≤8MB）。未配置时使用默认纹饰画布。"
+        description="前台与后台可分别上传 JPEG / PNG / WebP（≤8MB）。预览按 16:9 常见显示器比例。未配置时使用默认纹饰画布。"
       >
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {renderBgRail(