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

2026-09-18 23:11:07 +08:00
parent d784b0ea7a
commit a8efb9ecef
6 changed files with 151 additions and 54 deletions
--- a/frontend/app/admin/appearance/BgModePicker.tsx
+++ b/frontend/app/admin/appearance/BgModePicker.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { BG_MODE_OPTIONS, type BgMode } from "@/lib/bg";
+
+/** 铺放示意：16:9 小窗里用色块表达裁切 / 完整 / 平铺 / 拉伸。 */
+function ModeGlyph({ mode }: { mode: BgMode }) {
+  const photo = "var(--accent-soft)";
+  const ink = "var(--accent)";
+  return (
+    <span
+      className="relative block w-16 aspect-video overflow-hidden rounded-[3px] shrink-0"
+      style={{ background: "var(--bg)", border: "1px solid var(--line-2)" }}
+      aria-hidden
+    >
+      {mode === "cover" && (
+        <span
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+          style={{ width: "72%", height: "140%", background: photo }}
+        >
+          <span
+            className="absolute left-1/2 top-[18%] -translate-x-1/2 w-[30%] aspect-square rounded-full"
+            style={{ background: ink, opacity: 0.45 }}
+          />
+        </span>
+      )}
+      {mode === "contain" && (
+        <span
+          className="absolute inset-y-0 left-1/2 -translate-x-1/2"
+          style={{ width: "58%", background: photo }}
+        >
+          <span
+            className="absolute left-1/2 top-[18%] -translate-x-1/2 w-[36%] aspect-square rounded-full"
+            style={{ background: ink, opacity: 0.45 }}
+          />
+        </span>
+      )}
+      {mode === "repeat" && (
+        <span className="absolute inset-[2px] grid grid-cols-3 grid-rows-2 gap-[2px]">
+          {Array.from({ length: 6 }, (_, i) => (
+            <span key={i} style={{ background: photo }} />
+          ))}
+        </span>
+      )}
+      {mode === "stretch" && (
+        <span className="absolute inset-0" style={{ background: photo }}>
+          <span
+            className="absolute left-1/2 top-[22%] -translate-x-1/2 h-[38%]"
+            style={{
+              width: "70%",
+              borderRadius: "50%",
+              background: ink,
+              opacity: 0.45,
+            }}
+          />
+        </span>
+      )}
+    </span>
+  );
+}
+
+export default function BgModePicker({
+  value,
+  onChange,
+  disabled,
+  ariaLabel,
+}: {
+  value: BgMode;
+  onChange: (mode: BgMode) => void;
+  disabled?: boolean;
+  ariaLabel: string;
+}) {
+  return (
+    <div className="grid grid-cols-2 gap-2" role="group" aria-label={ariaLabel}>
+      {BG_MODE_OPTIONS.map((o) => {
+        const active = value === o.key;
+        return (
+          <button
+            key={o.key}
+            type="button"
+            disabled={disabled}
+            aria-pressed={active}
+            onClick={() => {
+              if (!active) onChange(o.key);
+            }}
+            className="flex items-center gap-2.5 min-w-0 px-2.5 py-2 rounded-[var(--r-sm)] border text-left transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            style={{
+              borderColor: active ? "var(--accent)" : "var(--line)",
+              background: active ? "var(--accent-soft)" : "var(--panel)",
+              cursor: disabled ? "not-allowed" : "pointer",
+            }}
+          >
+            <ModeGlyph mode={o.key} />
+            <span className="min-w-0">
+              <span
+                className="block text-[13px] font-medium leading-tight"
+                style={{ color: active ? "var(--accent)" : "var(--ink)" }}
+              >
+                {o.label}
+              </span>
+              <span className="block meta text-[11.5px] mt-0.5 leading-snug">{o.hint}</span>
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}