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,185 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { adminAPI } from "@/lib/api";
|
||||
import { format } from "date-fns";
|
||||
import { Users, Search } from "lucide-react";
|
||||
|
||||
interface AdminUser {
|
||||
id: number;
|
||||
username: string;
|
||||
email: string;
|
||||
full_name: string | null;
|
||||
is_active: boolean;
|
||||
is_superuser: boolean;
|
||||
created_at: string | null;
|
||||
last_login: string | null;
|
||||
session_count: number;
|
||||
message_count: number;
|
||||
}
|
||||
|
||||
export default function UsersPage() {
|
||||
const [users, setUsers] = useState<AdminUser[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [confirmDelete, setConfirmDelete] = useState<number | null>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const loadUsers = () => {
|
||||
setLoading(true);
|
||||
adminAPI.listUsers()
|
||||
.then(setUsers)
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => { loadUsers(); }, []);
|
||||
|
||||
const handleToggleActive = async (userId: number) => {
|
||||
try {
|
||||
await adminAPI.toggleUserActive(userId);
|
||||
setUsers((prev) =>
|
||||
prev.map((u) => (u.id === userId ? { ...u, is_active: !u.is_active } : u))
|
||||
);
|
||||
} catch (e) { console.error(e); }
|
||||
};
|
||||
|
||||
const handleToggleAdmin = async (userId: number) => {
|
||||
try {
|
||||
await adminAPI.toggleUserAdmin(userId);
|
||||
setUsers((prev) =>
|
||||
prev.map((u) => (u.id === userId ? { ...u, is_superuser: !u.is_superuser } : u))
|
||||
);
|
||||
} catch (e) { console.error(e); }
|
||||
};
|
||||
|
||||
const handleDelete = async (userId: number) => {
|
||||
try {
|
||||
await adminAPI.deleteUser(userId);
|
||||
setConfirmDelete(null);
|
||||
setUsers((prev) => prev.filter((u) => u.id !== userId));
|
||||
} catch (e) { console.error(e); }
|
||||
};
|
||||
|
||||
const filtered = users.filter(
|
||||
(u) =>
|
||||
u.username.toLowerCase().includes(search.toLowerCase()) ||
|
||||
u.email.toLowerCase().includes(search.toLowerCase()) ||
|
||||
(u.full_name && u.full_name.toLowerCase().includes(search.toLowerCase()))
|
||||
);
|
||||
|
||||
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">
|
||||
<Users className="w-5 h-5 text-primary" />
|
||||
<h2 className="text-lg font-semibold">用户管理</h2>
|
||||
<span className="text-sm text-muted-foreground">共 {users.length} 个用户</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="搜索用户名、邮箱..."
|
||||
className="pl-9 pr-3 py-1.5 text-sm border rounded-lg bg-background focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<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-center 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>
|
||||
<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>
|
||||
{filtered.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={7} className="px-4 py-8 text-center text-muted-foreground">
|
||||
{search ? "无匹配用户" : "暂无用户"}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{filtered.map((u) => (
|
||||
<tr key={u.id} className="border-b last:border-0 hover:bg-muted/20">
|
||||
<td className="px-4 py-3">
|
||||
<div className="font-medium">{u.username}</div>
|
||||
{u.full_name && <div className="text-xs text-muted-foreground">{u.full_name}</div>}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-muted-foreground">{u.email}</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<button
|
||||
onClick={() => handleToggleActive(u.id)}
|
||||
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors ${
|
||||
u.is_active
|
||||
? "bg-emerald-100 text-emerald-700 hover:bg-emerald-200"
|
||||
: "bg-red-100 text-red-700 hover:bg-red-200"
|
||||
}`}
|
||||
>
|
||||
{u.is_active ? "正常" : "禁用"}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<button
|
||||
onClick={() => handleToggleAdmin(u.id)}
|
||||
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors ${
|
||||
u.is_superuser
|
||||
? "bg-amber-100 text-amber-700 hover:bg-amber-200"
|
||||
: "bg-slate-100 text-slate-600 hover:bg-slate-200"
|
||||
}`}
|
||||
>
|
||||
{u.is_superuser ? "管理员" : "用户"}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center font-mono tabular-nums text-muted-foreground">
|
||||
{u.session_count} / {u.message_count}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-muted-foreground text-xs">
|
||||
{u.created_at ? format(new Date(u.created_at), "yyyy/M/d HH:mm") : "—"}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
{confirmDelete === u.id ? (
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<button
|
||||
onClick={() => handleDelete(u.id)}
|
||||
className="text-xs px-2 py-1 bg-red-600 text-white rounded hover:bg-red-700"
|
||||
>
|
||||
确认
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setConfirmDelete(null)}
|
||||
className="text-xs px-2 py-1 border rounded hover:bg-accent"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setConfirmDelete(u.id)}
|
||||
className="text-xs text-red-500 hover:text-red-700 transition-colors"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user