1320

write-server/src/app/api/recycle/route.ts

@@ -0,0 +1,66 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  listRecycle,
+  restoreFromRecycle,
+  permanentDelete,
+} from "@/lib/recycle";
+
+export async function GET() {
+  try {
+    const items = listRecycle();
+    return NextResponse.json({ items });
+  } catch (error: unknown) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Unknown error" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { slug } = body;
+    if (!slug) {
+      return NextResponse.json({ error: "Slug is required" }, { status: 400 });
+    }
+
+    const success = restoreFromRecycle(slug);
+    if (!success) {
+      return NextResponse.json(
+        { error: "Item not found in recycle bin" },
+        { status: 404 }
+      );
+    }
+    return NextResponse.json({ success: true });
+  } catch (error: unknown) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Unknown error" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(request: NextRequest) {
+  try {
+    const { searchParams } = request.nextUrl;
+    const slug = searchParams.get("slug");
+    if (!slug) {
+      return NextResponse.json({ error: "Slug is required" }, { status: 400 });
+    }
+
+    const success = permanentDelete(slug);
+    if (!success) {
+      return NextResponse.json(
+        { error: "Item not found in recycle bin" },
+        { status: 404 }
+      );
+    }
+    return NextResponse.json({ success: true });
+  } catch (error: unknown) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Unknown error" },
+      { status: 500 }
+    );
+  }
+}

write-server/src/app/recycle/page.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Trash2, RotateCcw, AlertTriangle } from "lucide-react";
+
+interface RecycleItem {
+  slug: string; title: string; deletedAt: string; daysRemaining: number;
+}
+
+export default function RecyclePage() {
+  const [items, setItems] = useState<RecycleItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
+
+  const fetchItems = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/recycle");
+      setItems((await res.json()).items || []);
+    } catch {} finally { setLoading(false); }
+  }, []);
+
+  useEffect(() => { fetchItems(); }, [fetchItems]);
+
+  const handleRestore = async (slug: string, title: string) => {
+    if (!confirm(`确定恢复「${title}」？`)) return;
+    setMessage(null);
+    try {
+      const res = await fetch("/api/recycle", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ slug }) });
+      if (!res.ok) throw new Error("恢复失败");
+      setMessage({ type: "success", text: `已恢复「${title}」` });
+      fetchItems();
+    } catch (err: unknown) {
+      setMessage({ type: "error", text: err instanceof Error ? err.message : "恢复失败" });
+    }
+  };
+
+  const handlePermanentDelete = async (slug: string, title: string) => {
+    if (!confirm(`永久删除「${title}」？此操作不可撤销！`)) return;
+    setMessage(null);
+    try {
+      const res = await fetch(`/api/recycle?slug=${encodeURIComponent(slug)}`, { method: "DELETE" });
+      if (!res.ok) throw new Error("删除失败");
+      setMessage({ type: "success", text: `已永久删除「${title}」` });
+      fetchItems();
+    } catch (err: unknown) {
+      setMessage({ type: "error", text: err instanceof Error ? err.message : "删除失败" });
+    }
+  };
+
+  return (
+    <div className="px-4 py-6 md:px-8 md:py-8">
+      <div className="mb-8">
+        <h2 className="text-lg font-bold text-text">回收站</h2>
+        <p className="text-[13px] text-muted mt-0.5">删除的文章保留 30 天，到期自动清理</p>
+      </div>
+
+      {message && (
+        <div className={`mb-4 px-4 py-2.5 rounded-md text-[13px] font-medium ${
+          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>
+      ) : items.length === 0 ? (
+        <div className="text-center py-20">
+          <Trash2 size={28} className="mx-auto text-muted/20 mb-3" />
+          <p className="text-sm text-muted">回收站为空</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {items.map((item) => (
+            <div key={item.slug}
+              className="flex items-center gap-4 px-5 py-3.5 bg-card border border-line rounded-md hover:border-line/70 transition-all">
+              <div className="flex-1 min-w-0">
+                <span className="font-medium text-[14px] text-text">{item.title}</span>
+                <div className="flex items-center gap-3 mt-0.5 text-[12px] text-muted">
+                  <span>删除于 {new Date(item.deletedAt).toLocaleString("zh-CN")}</span>
+                  {item.daysRemaining <= 3 ? (
+                    <span className="inline-flex items-center gap-1 text-danger font-medium">
+                      <AlertTriangle size={11} /> 剩余 {item.daysRemaining} 天
+                    </span>
+                  ) : (
+                    <span>剩余 {item.daysRemaining} 天</span>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center gap-1">
+                <button type="button" onClick={() => handleRestore(item.slug, item.title)}
+                  className="p-1.5 rounded hover:bg-success/8 text-muted hover:text-success transition-colors" title="恢复">
+                  <RotateCcw size={14} />
+                </button>
+                <button type="button" onClick={() => handlePermanentDelete(item.slug, item.title)}
+                  className="p-1.5 rounded hover:bg-danger/8 text-muted hover:text-danger transition-colors" title="永久删除">
+                  <Trash2 size={14} />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}