frontend: add bookmark management and homepage navigation
Admin-only /bookmarks page for managing entries; homepage now renders public bookmarks as a category-grouped navigation grid (empty state links admin to the manager). Dashboard gains a recent-bookmarks card, dock and main layout get a bookmark entry for admins, and the middleware protects /bookmarks. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
321
frontend/app/bookmarks/bookmark-manager.tsx
Normal file
321
frontend/app/bookmarks/bookmark-manager.tsx
Normal file
@@ -0,0 +1,321 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Pencil,
|
||||
Trash2,
|
||||
Plus,
|
||||
ExternalLink,
|
||||
Globe,
|
||||
} from "lucide-react";
|
||||
|
||||
interface Bookmark {
|
||||
id: number;
|
||||
title: string;
|
||||
url: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
category: string;
|
||||
sortOrder: number;
|
||||
}
|
||||
|
||||
export function BookmarkManager() {
|
||||
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
|
||||
const [categories, setCategories] = useState<string[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editing, setEditing] = useState<Bookmark | null>(null);
|
||||
|
||||
const [title, setTitle] = useState("");
|
||||
const [url, setUrl] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [icon, setIcon] = useState("");
|
||||
const [category, setCategory] = useState("");
|
||||
const [sortOrder, setSortOrder] = useState(0);
|
||||
|
||||
async function fetchBookmarks() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch("/api/proxy/bookmarks");
|
||||
if (!res.ok) throw new Error("failed to fetch");
|
||||
const data = await res.json();
|
||||
setBookmarks(data.bookmarks || []);
|
||||
setCategories(data.categories || []);
|
||||
} catch {
|
||||
setBookmarks([]);
|
||||
setCategories([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchBookmarks();
|
||||
}, []);
|
||||
|
||||
function openAdd() {
|
||||
setEditing(null);
|
||||
setTitle("");
|
||||
setUrl("");
|
||||
setDescription("");
|
||||
setIcon("");
|
||||
setCategory("");
|
||||
setSortOrder(0);
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
function openEdit(bm: Bookmark) {
|
||||
setEditing(bm);
|
||||
setTitle(bm.title);
|
||||
setUrl(bm.url);
|
||||
setDescription(bm.description);
|
||||
setIcon(bm.icon);
|
||||
setCategory(bm.category);
|
||||
setSortOrder(bm.sortOrder);
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const payload = {
|
||||
title,
|
||||
url,
|
||||
description,
|
||||
icon,
|
||||
category: category || "默认",
|
||||
sortOrder,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = editing
|
||||
? await fetch(`/api/proxy/bookmarks/${editing.id}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
: await fetch("/api/proxy/bookmarks", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error("save failed");
|
||||
setDialogOpen(false);
|
||||
fetchBookmarks();
|
||||
} catch {
|
||||
alert("保存失败，请检查输入");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
if (!confirm("确定要删除这个书签吗？")) return;
|
||||
try {
|
||||
const res = await fetch(`/api/proxy/bookmarks/${id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
if (!res.ok) throw new Error("delete failed");
|
||||
fetchBookmarks();
|
||||
} catch {
|
||||
alert("删除失败");
|
||||
}
|
||||
}
|
||||
|
||||
const grouped = bookmarks.reduce<Record<string, Bookmark[]>>((acc, bm) => {
|
||||
const cat = bm.category || "默认";
|
||||
if (!acc[cat]) acc[cat] = [];
|
||||
acc[cat].push(bm);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
if (loading) {
|
||||
return <p className="text-muted-foreground">加载中...</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
共 {bookmarks.length} 个书签
|
||||
</p>
|
||||
<Button size="sm" onClick={openAdd}>
|
||||
<Plus className="mr-1 size-4" />
|
||||
添加书签
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{bookmarks.length === 0 ? (
|
||||
<div className="rounded-xl border border-dashed py-12 text-center">
|
||||
<Globe className="mx-auto mb-3 size-8 text-muted-foreground" />
|
||||
<p className="text-muted-foreground">还没有书签</p>
|
||||
<Button variant="link" size="sm" onClick={openAdd}>
|
||||
添加第一个书签
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
Object.entries(grouped).map(([cat, items]) => (
|
||||
<div key={cat}>
|
||||
<h2 className="mb-3 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
|
||||
{cat}
|
||||
</h2>
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{items.map((bm) => (
|
||||
<Card key={bm.id} className="group relative">
|
||||
<CardContent className="flex items-start gap-3 p-4">
|
||||
<div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted">
|
||||
{bm.icon ? (
|
||||
<img
|
||||
src={bm.icon}
|
||||
alt=""
|
||||
className="size-5 object-contain"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display =
|
||||
"none";
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Globe className="size-5 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<a
|
||||
href={bm.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1 font-medium hover:underline"
|
||||
>
|
||||
<span className="truncate">{bm.title}</span>
|
||||
<ExternalLink className="size-3 shrink-0 text-muted-foreground" />
|
||||
</a>
|
||||
{bm.description && (
|
||||
<p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
|
||||
{bm.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex shrink-0 gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
onClick={() => openEdit(bm)}
|
||||
>
|
||||
<Pencil className="size-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
onClick={() => handleDelete(bm.id)}
|
||||
>
|
||||
<Trash2 className="size-3.5 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{editing ? "编辑书签" : "添加书签"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-3 py-2">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium">
|
||||
标题 *
|
||||
</label>
|
||||
<Input
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="例如：GitHub"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium">
|
||||
链接 *
|
||||
</label>
|
||||
<Input
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
placeholder="https://github.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium">描述</label>
|
||||
<Input
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="简短描述"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium">
|
||||
分类
|
||||
</label>
|
||||
<Input
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
placeholder="默认"
|
||||
list="categories"
|
||||
/>
|
||||
<datalist id="categories">
|
||||
{categories.map((c) => (
|
||||
<option key={c} value={c} />
|
||||
))}
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium">
|
||||
排序
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={sortOrder}
|
||||
onChange={(e) =>
|
||||
setSortOrder(Number(e.target.value))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium">
|
||||
图标 URL
|
||||
</label>
|
||||
<Input
|
||||
value={icon}
|
||||
onChange={(e) => setIcon(e.target.value)}
|
||||
placeholder="https://example.com/favicon.ico"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setDialogOpen(false)}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button size="sm" onClick={handleSave}>
|
||||
保存
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user