后台站点设计UIUX优化

2026-09-19 04:14:13 +08:00
parent a8efb9ecef
commit 2b3d122e56
24 changed files with 2952 additions and 306 deletions
--- a/frontend/app/admin/settings/BrandMediaPicker.tsx
+++ b/frontend/app/admin/settings/BrandMediaPicker.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { Images, Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import Modal from "@/components/Modal";
+import { apiMyMedia, type MediaAttachment } from "@/lib/api";
+import { mediaURLFitsSlot, type BrandSlot } from "@/lib/brand";
+
+const SLOT_LABEL: Record<BrandSlot, string> = {
+  logo_light: "浅色 Logo",
+  logo_dark: "暗色 Logo",
+  favicon: "Favicon",
+};
+
+export default function BrandMediaPicker({
+  open,
+  slot,
+  onClose,
+  onPick,
+}: {
+  open: boolean;
+  slot: BrandSlot;
+  onClose: () => void;
+  onPick: (item: MediaAttachment) => void;
+}) {
+  const [items, setItems] = useState<MediaAttachment[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setLoading(true);
+    setError("");
+    void apiMyMedia()
+      .then((res) => {
+        if (cancelled) return;
+        if (res.error) {
+          setError(res.error);
+          setItems([]);
+          return;
+        }
+        const all = res.attachments || [];
+        setItems(all.filter((item) => mediaURLFitsSlot(slot, item.url)));
+      })
+      .catch(() => {
+        if (!cancelled) setError("加载媒体库失败");
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, slot]);
+
+  return (
+    <Modal
+      open={open}
+      title={`从媒体库选择 · ${SLOT_LABEL[slot]}`}
+      description="只列出格式符合的图片。保存后会复制一份到品牌目录，之后删除原图不会影响 Logo。"
+      onClose={onClose}
+      maxWidthClass="max-w-lg"
+      dismissOnOverlay
+    >
+      {loading ? (
+        <p className="meta text-[13px] flex items-center gap-2 py-6 justify-center">
+          <Loader2 size={14} className="animate-spin" /> 加载中
+        </p>
+      ) : error ? (
+        <p className="text-[13px] py-4" style={{ color: "var(--danger, #b42318)" }}>
+          {error}
+        </p>
+      ) : items.length === 0 ? (
+        <p className="meta text-[13px] py-6 text-center">没有可用图片。Logo 需要 PNG / WebP / SVG，Favicon 还可选 ICO。</p>
+      ) : (
+        <div className="grid grid-cols-4 sm:grid-cols-5 gap-2">
+          {items.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              onClick={() => {
+                onPick(item);
+                onClose();
+              }}
+              className="relative group aspect-square rounded-xl overflow-hidden"
+              style={{ boxShadow: "0 0 0 1px var(--line)", background: "var(--panel-2)" }}
+              data-tip="用作草稿预览，点保存后才生效"
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={item.url} alt="" className="w-full h-full object-contain" loading="lazy" />
+              <span
+                className="pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100"
+                style={{ background: "color-mix(in srgb, var(--ink) 40%, transparent)", color: "#fff" }}
+              >
+                <Images size={14} />
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </Modal>
+  );
+}