0520发布文章

2026-05-21 00:27:35 +08:00
1 parent 993ac5581d
commit 013dce4f9f
@@ -0,0 +1,122 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { ArrowLeft, Trash2, Copy, Check, Image as ImageIcon } from "lucide-react";
+
+const HUGO_SITE = "https://usj.cc";
+
+interface ImageFile {
+  name: string;
+  path: string;
+  folder: string;
+  size: number;
+  url: string;
+}
+
+export default function ImagesPage() {
+  const router = useRouter();
+  const [images, setImages] = useState<ImageFile[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [copied, setCopied] = useState<string | null>(null);
+  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
+
+  const fetchImages = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/images");
+      setImages((await res.json()).images || []);
+    } catch {} finally { setLoading(false); }
+  }, []);
+
+  useEffect(() => { fetchImages(); }, [fetchImages]);
+
+  const copyMarkdown = (img: ImageFile) => {
+    const md = `![](./${img.name})`;
+    navigator.clipboard.writeText(md).then(() => {
+      setCopied(img.name);
+      setTimeout(() => setCopied(null), 2000);
+    }).catch(() => {});
+  };
+
+  const handleDelete = async (img: ImageFile) => {
+    if (!confirm(`确定删除「${img.name}」？此操作不可撤销。`)) return;
+    try {
+      const res = await fetch(`/api/images?path=${encodeURIComponent(img.path)}`, { method: "DELETE" });
+      if (!res.ok) throw new Error("删除失败");
+      setImages((prev) => prev.filter((x) => x.path !== img.path));
+    } catch (err: unknown) {
+      setMessage({ type: "error", text: err instanceof Error ? err.message : "删除失败" });
+    }
+  };
+
+  const formatSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes}B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+  };
+
+  return (
+    <div className="px-8 py-8">
+      <div className="flex items-center justify-between mb-8">
+        <div className="flex items-center gap-3">
+          <button type="button" onClick={() => router.back()} className="p-1 -ml-1 rounded hover:bg-surface text-muted hover:text-text transition-colors">
+            <ArrowLeft size={16} />
+          </button>
+          <h2 className="text-lg font-bold text-text">图片管理</h2>
+          <span className="text-[13px] text-muted">{images.length} 张</span>
+        </div>
+      </div>
+
+      {message && (
+        <div className={`mb-4 px-4 py-2.5 rounded-md text-[13px] ${message.type === "success" ? "bg-[#d1fae5] text-[#065f46] border border-[#a7f3d0]" : "bg-[#fee2e2] text-[#991b1b] border border-[#fecaca]"}`}>
+          {message.text}
+          <button type="button" onClick={() => setMessage(null)} className="ml-2 underline">关闭</button>
+        </div>
+      )}
+
+      {loading ? (
+        <div className="text-center py-20 text-muted text-sm">加载中...</div>
+      ) : images.length === 0 ? (
+        <div className="text-center py-20">
+          <ImageIcon size={28} className="mx-auto text-muted/25 mb-3" />
+          <p className="text-sm text-muted">暂无图片</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-4 gap-3">
+          {images.map((img) => (
+            <div key={img.path} className="bg-white border border-line rounded-lg overflow-hidden group hover:border-accent/20 transition-all">
+              <div className="aspect-square bg-surface flex items-center justify-center overflow-hidden">
+                <img
+                  src={`${HUGO_SITE}${img.url}`}
+                  alt={img.name}
+                  className="max-w-full max-h-full object-contain"
+                  loading="lazy"
+                  onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
+                />
+              </div>
+              <div className="p-2.5 space-y-1.5">
+                <div className="text-[11px] text-text truncate" title={img.name}>{img.name}</div>
+                <div className="flex items-center justify-between text-[10px] text-muted">
+                  <span>{formatSize(img.size)}</span>
+                  <span className="truncate ml-2">{img.folder || "根目录"}</span>
+                </div>
+                <div className="flex items-center gap-1 pt-1 border-t border-line/50">
+                  <button type="button" onClick={() => copyMarkdown(img)}
+                    className="flex-1 flex items-center justify-center gap-1 px-1.5 py-1 text-[10px] rounded hover:bg-surface text-muted hover:text-accent transition-colors">
+                    {copied === img.name ? <Check size={11} className="text-success" /> : <Copy size={11} />}
+                    {copied === img.name ? "已复制" : "MD"}
+                  </button>
+                  <button type="button" onClick={() => handleDelete(img)}
+                    className="px-1.5 py-1 text-[10px] rounded hover:bg-danger/8 text-muted hover:text-danger transition-colors">
+                    <Trash2 size={11} />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}