freedakgmail
490 lines
17 KiB
TypeScript
490 lines
17 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect, useCallback } from "react"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||
import { History, Trash2, RefreshCw, User, FileText, Image, Settings, Globe, Filter } from "lucide-react"
|
||
import { format } from "date-fns"
|
||
import { useFamily } from "@/context/family-context"
|
||
import { useSession } from "next-auth/react"
|
||
import { useDialog } from "@/components/ui/alert-dialog-custom"
|
||
import Link from "next/link"
|
||
import { useSearchParams } from "next/navigation"
|
||
|
||
// 定义日志类型
|
||
interface ActivityLog {
|
||
id: string
|
||
action: "CREATE" | "UPDATE" | "DELETE" | "IMPORT" | "EXPORT"
|
||
entityType: "MEMBER" | "PHOTO" | "STORY" | "SETTINGS"
|
||
entityId?: string | null
|
||
entityName?: string | null
|
||
changes?: any
|
||
timestamp: string
|
||
treeId: string
|
||
userId: string
|
||
user?: {
|
||
name?: string | null
|
||
email?: string | null
|
||
}
|
||
tree?: {
|
||
id: string
|
||
name: string
|
||
}
|
||
}
|
||
|
||
const actionLabels: Record<string, string> = {
|
||
CREATE: "创建",
|
||
UPDATE: "更新",
|
||
DELETE: "删除",
|
||
IMPORT: "导入",
|
||
EXPORT: "导出",
|
||
}
|
||
|
||
const actionColors: Record<string, string> = {
|
||
CREATE: "bg-green-500",
|
||
UPDATE: "bg-blue-500",
|
||
DELETE: "bg-red-500",
|
||
IMPORT: "bg-purple-500",
|
||
EXPORT: "bg-orange-500",
|
||
}
|
||
|
||
const entityTypeLabels: Record<string, string> = {
|
||
MEMBER: "成员",
|
||
PHOTO: "照片",
|
||
STORY: "故事",
|
||
SETTINGS: "设置",
|
||
}
|
||
|
||
const entityTypeIcons: Record<string, any> = {
|
||
MEMBER: User,
|
||
PHOTO: Image,
|
||
STORY: FileText,
|
||
SETTINGS: Settings,
|
||
}
|
||
|
||
interface FamilyTree {
|
||
id: string
|
||
name: string
|
||
ownerId: string
|
||
currentUserRole?: "OWNER" | "EDITOR" | "VIEWER"
|
||
}
|
||
|
||
export function ActivityLogViewer() {
|
||
const { currentTree } = useFamily()
|
||
const { data: session } = useSession()
|
||
const { showAlert, showConfirm, showPrompt } = useDialog()
|
||
const searchParams = useSearchParams()
|
||
const [logs, setLogs] = useState<ActivityLog[]>([])
|
||
const [trees, setTrees] = useState<FamilyTree[]>([])
|
||
const [loading, setLoading] = useState(false)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [filterTreeId, setFilterTreeId] = useState<string>("all")
|
||
const [clearing, setClearing] = useState(false)
|
||
|
||
// 加载家族树列表
|
||
useEffect(() => {
|
||
// 只在用户登录时加载
|
||
if (!session?.user?.id) return
|
||
|
||
const controller = new AbortController()
|
||
|
||
fetch('/api/trees', { signal: controller.signal })
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
if (data.trees) {
|
||
setTrees(data.trees)
|
||
}
|
||
})
|
||
.catch(err => {
|
||
if (err.name !== 'AbortError') {
|
||
console.error("加载家族树列表失败:", err)
|
||
}
|
||
})
|
||
|
||
return () => controller.abort()
|
||
}, [session?.user?.id])
|
||
|
||
// 从 URL 参数或 currentTree 获取初始 treeId
|
||
// 只有在 trees 加载完成后才设置 filterTreeId
|
||
useEffect(() => {
|
||
if (trees.length === 0) return // 等待 trees 加载完成
|
||
|
||
const urlTreeId = searchParams.get('treeId')
|
||
if (urlTreeId) {
|
||
// 优先使用 URL 中的 treeId
|
||
// 确保这个 treeId 在 trees 列表中存在
|
||
const treeExists = trees.some(t => t.id === urlTreeId)
|
||
if (treeExists) {
|
||
setFilterTreeId(urlTreeId)
|
||
}
|
||
} else if (currentTree?.id) {
|
||
// 如果 URL 中没有，使用 currentTree
|
||
const treeExists = trees.some(t => t.id === currentTree.id)
|
||
if (treeExists) {
|
||
setFilterTreeId(currentTree.id)
|
||
}
|
||
}
|
||
}, [searchParams, currentTree?.id, trees])
|
||
|
||
const loadLogs = useCallback(async (signal?: AbortSignal) => {
|
||
setLoading(true)
|
||
setError(null)
|
||
try {
|
||
let url = ""
|
||
|
||
if (filterTreeId === "all") {
|
||
url = `/api/user/activity-logs?limit=100`
|
||
} else {
|
||
url = `/api/trees/${filterTreeId}/activity-logs?limit=100`
|
||
}
|
||
|
||
const res = await fetch(url, { signal })
|
||
if (!res.ok) throw new Error("获取日志失败")
|
||
|
||
const data = await res.json()
|
||
setLogs(data.logs || [])
|
||
} catch (err) {
|
||
if (err instanceof Error && err.name !== 'AbortError') {
|
||
console.error("加载日志失败:", err)
|
||
setError(err.message)
|
||
}
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [filterTreeId])
|
||
|
||
useEffect(() => {
|
||
// 只在用户登录时加载日志
|
||
if (!session?.user?.id) return
|
||
|
||
const controller = new AbortController()
|
||
loadLogs(controller.signal)
|
||
return () => controller.abort()
|
||
}, [loadLogs, session?.user?.id])
|
||
|
||
// 检查当前用户是否是选中家族树的所有者
|
||
const isOwner = () => {
|
||
if (filterTreeId === "all") return false
|
||
const selectedTree = trees.find(t => t.id === filterTreeId)
|
||
if (!selectedTree) return false
|
||
|
||
// 检查是否是所有者
|
||
return selectedTree.ownerId === session?.user?.id || selectedTree.currentUserRole === "OWNER"
|
||
}
|
||
|
||
// 格式化变更详情，使其更易读
|
||
const formatChanges = (changes: any, action: string) => {
|
||
if (!changes || typeof changes !== 'object') return null
|
||
|
||
const fieldLabels: Record<string, string> = {
|
||
fullName: '姓名',
|
||
surname: '姓氏',
|
||
givenName: '名字',
|
||
gender: '性别',
|
||
birthDate: '出生日期',
|
||
deathDate: '去世日期',
|
||
birthPlace: '出生地',
|
||
ancestralHome: '祖籍',
|
||
generation: '世代',
|
||
generationName: '字辈',
|
||
courtesyName: '字',
|
||
artName: '号',
|
||
posthumousName: '谥号',
|
||
rank: '排行',
|
||
bio: '简介',
|
||
phone: '手机',
|
||
telephone: '电话',
|
||
email: '邮箱',
|
||
address: '地址',
|
||
photoIds: '照片',
|
||
spouseIds: '配偶',
|
||
childrenIds: '子女',
|
||
motherId: '母亲',
|
||
fatherId: '父亲',
|
||
isFounder: '始祖',
|
||
isLunarDate: '农历日期',
|
||
burialPlace: '安葬地',
|
||
tags: '标签',
|
||
}
|
||
|
||
const formatValue = (key: string, value: any) => {
|
||
if (value === null || value === undefined) return '无'
|
||
if (key === 'gender') {
|
||
return value === 'MALE' ? '男' : value === 'FEMALE' ? '女' : '未知'
|
||
}
|
||
if (key === 'tags' && Array.isArray(value)) {
|
||
return value.length > 0 ? value.join(', ') : '无'
|
||
}
|
||
if (Array.isArray(value)) {
|
||
return `${value.length} 项`
|
||
}
|
||
if (typeof value === 'boolean') {
|
||
return value ? '是' : '否'
|
||
}
|
||
if (typeof value === 'string' && value.length > 50) {
|
||
return value.substring(0, 50) + '...'
|
||
}
|
||
return String(value)
|
||
}
|
||
|
||
const getChangeDescription = (key: string, value: any) => {
|
||
const label = fieldLabels[key] || key
|
||
|
||
// 如果是对象且包含 old 和 new，说明是修改
|
||
if (value && typeof value === 'object' && 'old' in value && 'new' in value) {
|
||
const oldVal = formatValue(key, value.old)
|
||
const newVal = formatValue(key, value.new)
|
||
|
||
// 特殊处理数组变化
|
||
if (key === 'photoIds') {
|
||
const oldCount = Array.isArray(value.old) ? value.old.length : 0
|
||
const newCount = Array.isArray(value.new) ? value.new.length : 0
|
||
if (newCount > oldCount) {
|
||
return `添加了${label}：新增 ${newCount - oldCount} 张`
|
||
} else if (newCount < oldCount) {
|
||
return `删除了${label}：减少 ${oldCount - newCount} 张`
|
||
}
|
||
}
|
||
|
||
if (key === 'childrenIds' || key === 'spouseIds') {
|
||
const oldCount = Array.isArray(value.old) ? value.old.length : 0
|
||
const newCount = Array.isArray(value.new) ? value.new.length : 0
|
||
if (newCount > oldCount) {
|
||
return `添加了${label}：新增 ${newCount - oldCount} 个`
|
||
} else if (newCount < oldCount) {
|
||
return `删除了${label}：减少 ${oldCount - newCount} 个`
|
||
}
|
||
}
|
||
|
||
return `修改了${label}：从 "${oldVal}" → "${newVal}"`
|
||
}
|
||
|
||
return null
|
||
}
|
||
|
||
const entries = Object.entries(changes)
|
||
.filter(([key]) => fieldLabels[key]) // 只显示有标签的字段
|
||
.map(([key, value]: [string, any]) => {
|
||
const description = getChangeDescription(key, value)
|
||
if (!description) return null
|
||
|
||
return (
|
||
<div key={key} className="text-xs py-1.5 text-muted-foreground">
|
||
• {description}
|
||
</div>
|
||
)
|
||
})
|
||
.filter(Boolean) // 移除 null 值
|
||
|
||
return entries.length > 0 ? entries : null
|
||
}
|
||
|
||
const handleClearLogs = async () => {
|
||
if (filterTreeId === "all") {
|
||
await showAlert("请先选择一个具体的家族树再清空日志", "提示")
|
||
return
|
||
}
|
||
|
||
const selectedTree = trees.find(t => t.id === filterTreeId)
|
||
if (!selectedTree) {
|
||
await showAlert("未找到选中的家族树", "错误")
|
||
return
|
||
}
|
||
|
||
// 第一次确认
|
||
const confirmMessage = `⚠️ 警告：即将清空"${selectedTree.name}"的所有操作日志！\n\n此操作将永久删除该家族树的所有历史记录，且不可恢复。\n\n确定要继续吗？`
|
||
const confirmed = await showConfirm(confirmMessage, "清空操作日志", "destructive")
|
||
if (!confirmed) {
|
||
return
|
||
}
|
||
|
||
// 第二次确认
|
||
const finalConfirm = await showPrompt(
|
||
`请输入家族树名称"${selectedTree.name}"以确认清空操作：\n\n（此操作不可撤销）`,
|
||
"",
|
||
"确认清空"
|
||
)
|
||
|
||
if (finalConfirm !== selectedTree.name) {
|
||
await showAlert("名称不匹配，操作已取消", "操作已取消")
|
||
return
|
||
}
|
||
|
||
setClearing(true)
|
||
try {
|
||
const res = await fetch(`/api/trees/${filterTreeId}/activity-logs`, {
|
||
method: 'DELETE',
|
||
})
|
||
|
||
if (!res.ok) {
|
||
const error = await res.json()
|
||
throw new Error(error.error || "清空失败")
|
||
}
|
||
|
||
const data = await res.json()
|
||
await showAlert(data.message || "操作日志已清空", "成功")
|
||
|
||
// 重新加载日志
|
||
await loadLogs()
|
||
} catch (err) {
|
||
console.error("清空日志失败:", err)
|
||
await showAlert("清空失败：" + (err instanceof Error ? err.message : "未知错误"), "错误")
|
||
} finally {
|
||
setClearing(false)
|
||
}
|
||
}
|
||
|
||
// 如果用户未登录，不显示日志查看器
|
||
if (!session?.user?.id) {
|
||
return null
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||
<div>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<History className="h-5 w-5" />
|
||
操作日志
|
||
</CardTitle>
|
||
<CardDescription>
|
||
查看家族树的变更记录
|
||
</CardDescription>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="icon"
|
||
onClick={() => loadLogs()}
|
||
disabled={loading || clearing}
|
||
className="h-9 w-9"
|
||
title="刷新日志"
|
||
>
|
||
<RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
||
</Button>
|
||
{isOwner() && (
|
||
<Button
|
||
variant="destructive"
|
||
size="sm"
|
||
onClick={handleClearLogs}
|
||
disabled={loading || clearing}
|
||
className="gap-2"
|
||
title="清空当前家族树的操作日志（仅所有者可用）"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
{clearing ? "清空中..." : "清空日志"}
|
||
</Button>
|
||
)}
|
||
<div className="w-[200px]">
|
||
<Select value={filterTreeId} onValueChange={setFilterTreeId}>
|
||
<SelectTrigger>
|
||
<div className="flex items-center gap-2">
|
||
<Filter className="h-4 w-4 text-muted-foreground" />
|
||
<SelectValue placeholder="筛选家族树" />
|
||
</div>
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">所有家族树</SelectItem>
|
||
{trees.map(tree => (
|
||
<SelectItem key={tree.id} value={tree.id}>
|
||
{tree.name}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ScrollArea className="h-[400px] pr-4">
|
||
{error ? (
|
||
<div className="text-center py-8 text-destructive">
|
||
加载失败: {error}
|
||
</div>
|
||
) : loading && logs.length === 0 ? (
|
||
<div className="text-center py-8 text-muted-foreground">
|
||
加载中...
|
||
</div>
|
||
) : logs.length === 0 ? (
|
||
<div className="text-center py-8 text-muted-foreground">
|
||
暂无操作记录
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{logs.map((log) => {
|
||
const EntityIcon = entityTypeIcons[log.entityType] || FileText
|
||
return (
|
||
<div
|
||
key={log.id}
|
||
className="flex items-start gap-3 p-3 bg-muted/50 rounded-lg hover:bg-muted transition-colors"
|
||
>
|
||
<div className={`p-2 rounded-full ${actionColors[log.action]} bg-opacity-10`}>
|
||
<EntityIcon className={`h-4 w-4 ${actionColors[log.action].replace('bg-', 'text-')}`} />
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||
<Badge variant="outline" className="text-xs">
|
||
{actionLabels[log.action] || log.action}
|
||
</Badge>
|
||
<Badge variant="secondary" className="text-xs">
|
||
{entityTypeLabels[log.entityType] || log.entityType}
|
||
</Badge>
|
||
{filterTreeId === "all" && log.tree && (
|
||
<Badge variant="outline" className="text-xs bg-blue-50 text-blue-700 border-blue-200">
|
||
{log.tree.name}
|
||
</Badge>
|
||
)}
|
||
{log.entityName && (
|
||
log.entityId && log.entityType === 'MEMBER' ? (
|
||
<Link
|
||
href={`/members/${log.entityId}?treeId=${log.treeId}`}
|
||
className="text-sm font-medium truncate hover:text-primary hover:underline transition-colors"
|
||
>
|
||
{log.entityName}
|
||
</Link>
|
||
) : (
|
||
<span className="text-sm font-medium truncate">
|
||
{log.entityName}
|
||
</span>
|
||
)
|
||
)}
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<p className="text-xs text-muted-foreground">
|
||
{log.user?.name || log.user?.email || "未知用户"}
|
||
</p>
|
||
<p className="text-xs text-muted-foreground">
|
||
{format(new Date(log.timestamp), "yyyy-MM-dd HH:mm:ss")}
|
||
</p>
|
||
</div>
|
||
{log.action === 'UPDATE' && (
|
||
<div className="mt-2 pl-2 border-l-2 border-muted">
|
||
{log.changes && formatChanges(log.changes, log.action) ? (
|
||
formatChanges(log.changes, log.action)
|
||
) : (
|
||
<div className="text-xs py-1.5 text-muted-foreground italic">
|
||
已记录变更（旧版本日志暂无详细信息）
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
</ScrollArea>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|