feat: RAG inline citations, source highlighting, and admin panel
- Increase RAG retrieval from 5 to 50 docs with relevance threshold (0.15) - LLM inline citations with [来源N] format and reference list - Clickable citation links scroll to source cards with highlight animation - Source previews with full chunk text and answer-matched highlighting - Message-scoped source IDs to fix cross-round citation targeting - Admin panel pages (knowledge, users, forum, course, settings) - Add rehype-raw dependency for HTML-in-markdown rendering Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,268 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { adminAPI } from "@/lib/api";
|
||||
import { format } from "date-fns";
|
||||
import { MessageSquare, Plus, Trash2, RefreshCw, Pencil } from "lucide-react";
|
||||
|
||||
interface AdminCategory {
|
||||
id: number;
|
||||
slug: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
post_count: number;
|
||||
}
|
||||
|
||||
interface AdminPost {
|
||||
id: number;
|
||||
title: string;
|
||||
author_name: string;
|
||||
category_name: string;
|
||||
reply_count: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export default function ForumAdminPage() {
|
||||
const [tab, setTab] = useState<"categories" | "posts">("categories");
|
||||
const [categories, setCategories] = useState<AdminCategory[]>([]);
|
||||
const [posts, setPosts] = useState<AdminPost[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [confirmDelete, setConfirmDelete] = useState<{ type: "cat" | "post"; id: number } | null>(null);
|
||||
|
||||
// Category form
|
||||
const [showCatForm, setShowCatForm] = useState(false);
|
||||
const [editingCat, setEditingCat] = useState<AdminCategory | null>(null);
|
||||
const [catForm, setCatForm] = useState({ name: "", slug: "", description: "" });
|
||||
|
||||
const loadCategories = () => {
|
||||
adminAPI.listForumCategories()
|
||||
.then(setCategories)
|
||||
.catch(console.error);
|
||||
};
|
||||
|
||||
const loadPosts = () => {
|
||||
adminAPI.listForumPosts()
|
||||
.then(setPosts)
|
||||
.catch(console.error);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
Promise.all([loadCategories(), loadPosts()]).finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const handleSaveCategory = async () => {
|
||||
try {
|
||||
if (editingCat) {
|
||||
await adminAPI.updateForumCategory(editingCat.id, catForm);
|
||||
} else {
|
||||
await adminAPI.createForumCategory(catForm);
|
||||
}
|
||||
setShowCatForm(false);
|
||||
setEditingCat(null);
|
||||
setCatForm({ name: "", slug: "", description: "" });
|
||||
loadCategories();
|
||||
} catch (e) { console.error(e); }
|
||||
};
|
||||
|
||||
const handleDeleteCategory = async (id: number) => {
|
||||
try {
|
||||
await adminAPI.deleteForumCategory(id);
|
||||
setConfirmDelete(null);
|
||||
loadCategories();
|
||||
} catch (e) { console.error(e); }
|
||||
};
|
||||
|
||||
const handleDeletePost = async (id: number) => {
|
||||
try {
|
||||
await adminAPI.deleteForumPost(id);
|
||||
setConfirmDelete(null);
|
||||
loadPosts();
|
||||
} catch (e) { console.error(e); }
|
||||
};
|
||||
|
||||
const startEditCat = (cat: AdminCategory) => {
|
||||
setEditingCat(cat);
|
||||
setCatForm({ name: cat.name, slug: cat.slug, description: cat.description || "" });
|
||||
setShowCatForm(true);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-muted-foreground text-sm py-12 text-center">加载中...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<MessageSquare className="w-5 h-5 text-primary" />
|
||||
<h2 className="text-lg font-semibold">论坛管理</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setTab("categories")}
|
||||
className={`px-3 py-1 text-sm rounded-lg transition-colors ${
|
||||
tab === "categories" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
|
||||
}`}
|
||||
>
|
||||
分类管理
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTab("posts")}
|
||||
className={`px-3 py-1 text-sm rounded-lg transition-colors ${
|
||||
tab === "posts" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
|
||||
}`}
|
||||
>
|
||||
帖子管理
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{tab === "categories" && (
|
||||
<div className="space-y-4">
|
||||
{!showCatForm ? (
|
||||
<button
|
||||
onClick={() => { setEditingCat(null); setCatForm({ name: "", slug: "", description: "" }); setShowCatForm(true); }}
|
||||
className="flex items-center gap-1.5 text-sm text-primary hover:underline"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
新增分类
|
||||
</button>
|
||||
) : (
|
||||
<div className="rounded-xl border p-4 space-y-3">
|
||||
<h3 className="text-sm font-medium">{editingCat ? "编辑分类" : "新增分类"}</h3>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground">名称</label>
|
||||
<input
|
||||
value={catForm.name}
|
||||
onChange={(e) => setCatForm((f) => ({ ...f, name: e.target.value }))}
|
||||
className="w-full mt-1 px-3 py-1.5 text-sm border rounded-lg bg-background focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground">Slug</label>
|
||||
<input
|
||||
value={catForm.slug}
|
||||
onChange={(e) => setCatForm((f) => ({ ...f, slug: e.target.value }))}
|
||||
className="w-full mt-1 px-3 py-1.5 text-sm border rounded-lg bg-background focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="text-xs text-muted-foreground">描述</label>
|
||||
<input
|
||||
value={catForm.description}
|
||||
onChange={(e) => setCatForm((f) => ({ ...f, description: e.target.value }))}
|
||||
className="w-full mt-1 px-3 py-1.5 text-sm border rounded-lg bg-background focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={handleSaveCategory} className="px-4 py-1.5 text-sm bg-primary text-primary-foreground rounded-lg hover:opacity-90">
|
||||
保存
|
||||
</button>
|
||||
<button onClick={() => { setShowCatForm(false); setEditingCat(null); }} className="px-4 py-1.5 text-sm border rounded-lg hover:bg-muted">
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="rounded-xl border overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b bg-muted/30">
|
||||
<th className="text-left px-4 py-3 font-medium">名称</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Slug</th>
|
||||
<th className="text-left px-4 py-3 font-medium">描述</th>
|
||||
<th className="text-center px-4 py-3 font-medium">帖子数</th>
|
||||
<th className="text-center px-4 py-3 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{categories.map((cat) => (
|
||||
<tr key={cat.id} className="border-b last:border-0 hover:bg-muted/20">
|
||||
<td className="px-4 py-3 font-medium">{cat.name}</td>
|
||||
<td className="px-4 py-3 text-muted-foreground font-mono text-xs">{cat.slug}</td>
|
||||
<td className="px-4 py-3 text-muted-foreground text-xs max-w-40 truncate">{cat.description || "—"}</td>
|
||||
<td className="px-4 py-3 text-center font-mono tabular-nums">{cat.post_count}</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<button onClick={() => startEditCat(cat)} className="text-muted-foreground hover:text-foreground">
|
||||
<Pencil className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
{confirmDelete?.type === "cat" && confirmDelete.id === cat.id ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<button onClick={() => handleDeleteCategory(cat.id)} className="text-xs px-1.5 py-0.5 bg-red-600 text-white rounded">确认</button>
|
||||
<button onClick={() => setConfirmDelete(null)} className="text-xs px-1.5 py-0.5 border rounded">取消</button>
|
||||
</div>
|
||||
) : (
|
||||
<button onClick={() => setConfirmDelete({ type: "cat", id: cat.id })} className="text-red-500 hover:text-red-700">
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === "posts" && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">共 {posts.length} 个帖子</span>
|
||||
<button onClick={loadPosts} className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground">
|
||||
<RefreshCw className="w-3.5 h-3.5" />
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
<div className="rounded-xl border overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b bg-muted/30">
|
||||
<th className="text-left px-4 py-3 font-medium">标题</th>
|
||||
<th className="text-left px-4 py-3 font-medium">作者</th>
|
||||
<th className="text-left px-4 py-3 font-medium">分类</th>
|
||||
<th className="text-center px-4 py-3 font-medium">回复数</th>
|
||||
<th className="text-left px-4 py-3 font-medium">时间</th>
|
||||
<th className="text-center px-4 py-3 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{posts.length === 0 ? (
|
||||
<tr><td colSpan={6} className="px-4 py-8 text-center text-muted-foreground">暂无帖子</td></tr>
|
||||
) : posts.map((p) => (
|
||||
<tr key={p.id} className="border-b last:border-0 hover:bg-muted/20">
|
||||
<td className="px-4 py-3 font-medium max-w-64 truncate">{p.title}</td>
|
||||
<td className="px-4 py-3 text-muted-foreground">{p.author_name}</td>
|
||||
<td className="px-4 py-3 text-muted-foreground text-xs">{p.category_name}</td>
|
||||
<td className="px-4 py-3 text-center font-mono tabular-nums">{p.reply_count}</td>
|
||||
<td className="px-4 py-3 text-muted-foreground text-xs">
|
||||
{format(new Date(p.created_at), "yyyy/M/d HH:mm")}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
{confirmDelete?.type === "post" && confirmDelete.id === p.id ? (
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<button onClick={() => handleDeletePost(p.id)} className="text-xs px-2 py-1 bg-red-600 text-white rounded">确认</button>
|
||||
<button onClick={() => setConfirmDelete(null)} className="text-xs px-2 py-1 border rounded">取消</button>
|
||||
</div>
|
||||
) : (
|
||||
<button onClick={() => setConfirmDelete({ type: "post", id: p.id })} className="text-red-500 hover:text-red-700">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user