950 lines
33 KiB
TypeScript
950 lines
33 KiB
TypeScript
import { Users, Search, Edit, Trash2, Eye, User, MessageSquare, Hash, Clock, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'
|
||
import { useState, useEffect, useMemo } from 'react'
|
||
import { cn } from '@/lib/utils'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Label } from '@/components/ui/label'
|
||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||
import { useToast } from '@/hooks/use-toast'
|
||
import { Checkbox } from '@/components/ui/checkbox'
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from '@/components/ui/table'
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from '@/components/ui/dialog'
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
} from '@/components/ui/alert-dialog'
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from '@/components/ui/select'
|
||
import { Switch } from '@/components/ui/switch'
|
||
import { Textarea } from '@/components/ui/textarea'
|
||
import type { PersonInfo, PersonUpdateRequest } from '@/types/person'
|
||
import { getPersonList, getPersonDetail, updatePerson, deletePerson, getPersonStats, batchDeletePersons } from '@/lib/person-api'
|
||
|
||
export function PersonManagementPage() {
|
||
const [persons, setPersons] = useState<PersonInfo[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [total, setTotal] = useState(0)
|
||
const [page, setPage] = useState(1)
|
||
const [pageSize, setPageSize] = useState(20)
|
||
const [search, setSearch] = useState('')
|
||
const [filterKnown, setFilterKnown] = useState<boolean | undefined>(undefined)
|
||
const [filterPlatform, setFilterPlatform] = useState<string | undefined>(undefined)
|
||
const [selectedPerson, setSelectedPerson] = useState<PersonInfo | null>(null)
|
||
const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false)
|
||
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
|
||
const [deleteConfirmPerson, setDeleteConfirmPerson] = useState<PersonInfo | null>(null)
|
||
const [stats, setStats] = useState({ total: 0, known: 0, unknown: 0, platforms: {} as Record<string, number> })
|
||
const [selectedPersons, setSelectedPersons] = useState<Set<string>>(new Set())
|
||
const [batchDeleteDialogOpen, setBatchDeleteDialogOpen] = useState(false)
|
||
const [jumpToPage, setJumpToPage] = useState('')
|
||
const { toast } = useToast()
|
||
|
||
// 加载人物列表
|
||
const loadPersons = async () => {
|
||
try {
|
||
setLoading(true)
|
||
const response = await getPersonList({
|
||
page,
|
||
page_size: pageSize,
|
||
search: search || undefined,
|
||
is_known: filterKnown,
|
||
platform: filterPlatform,
|
||
})
|
||
setPersons(response.data)
|
||
setTotal(response.total)
|
||
} catch (error) {
|
||
toast({
|
||
title: '加载失败',
|
||
description: error instanceof Error ? error.message : '无法加载人物信息',
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
// 加载统计数据
|
||
const loadStats = async () => {
|
||
try {
|
||
const response = await getPersonStats()
|
||
if (response?.data) {
|
||
setStats(response.data)
|
||
}
|
||
} catch (error) {
|
||
console.error('加载统计数据失败:', error)
|
||
}
|
||
}
|
||
|
||
// 初始加载
|
||
useEffect(() => {
|
||
loadPersons()
|
||
loadStats()
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [page, pageSize, search, filterKnown, filterPlatform])
|
||
|
||
// 查看详情
|
||
const handleViewDetail = async (person: PersonInfo) => {
|
||
try {
|
||
const response = await getPersonDetail(person.person_id)
|
||
setSelectedPerson(response.data)
|
||
setIsDetailDialogOpen(true)
|
||
} catch (error) {
|
||
toast({
|
||
title: '加载详情失败',
|
||
description: error instanceof Error ? error.message : '无法加载人物详情',
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
}
|
||
|
||
// 编辑人物
|
||
const handleEdit = (person: PersonInfo) => {
|
||
setSelectedPerson(person)
|
||
setIsEditDialogOpen(true)
|
||
}
|
||
|
||
// 删除人物
|
||
const handleDelete = async (person: PersonInfo) => {
|
||
try {
|
||
await deletePerson(person.person_id)
|
||
toast({
|
||
title: '删除成功',
|
||
description: `已删除人物信息: ${person.person_name || person.nickname || person.user_id}`,
|
||
})
|
||
setDeleteConfirmPerson(null)
|
||
loadPersons()
|
||
loadStats()
|
||
} catch (error) {
|
||
toast({
|
||
title: '删除失败',
|
||
description: error instanceof Error ? error.message : '无法删除人物信息',
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
}
|
||
|
||
// 获取平台列表
|
||
const platforms = useMemo(() => {
|
||
return Object.keys(stats.platforms)
|
||
}, [stats.platforms])
|
||
|
||
// 切换单个人物选择
|
||
const togglePersonSelection = (personId: string) => {
|
||
const newSelected = new Set(selectedPersons)
|
||
if (newSelected.has(personId)) {
|
||
newSelected.delete(personId)
|
||
} else {
|
||
newSelected.add(personId)
|
||
}
|
||
setSelectedPersons(newSelected)
|
||
}
|
||
|
||
// 全选/取消全选
|
||
const toggleSelectAll = () => {
|
||
if (selectedPersons.size === persons.length && persons.length > 0) {
|
||
setSelectedPersons(new Set())
|
||
} else {
|
||
setSelectedPersons(new Set(persons.map(p => p.person_id)))
|
||
}
|
||
}
|
||
|
||
// 打开批量删除对话框
|
||
const openBatchDeleteDialog = () => {
|
||
if (selectedPersons.size === 0) {
|
||
toast({
|
||
title: '未选择任何人物',
|
||
description: '请先选择要删除的人物',
|
||
variant: 'destructive',
|
||
})
|
||
return
|
||
}
|
||
setBatchDeleteDialogOpen(true)
|
||
}
|
||
|
||
// 批量删除确认
|
||
const handleBatchDelete = async () => {
|
||
try {
|
||
const result = await batchDeletePersons(Array.from(selectedPersons))
|
||
toast({
|
||
title: '批量删除完成',
|
||
description: result.message,
|
||
})
|
||
setSelectedPersons(new Set())
|
||
setBatchDeleteDialogOpen(false)
|
||
loadPersons()
|
||
loadStats()
|
||
} catch (error) {
|
||
toast({
|
||
title: '批量删除失败',
|
||
description: error instanceof Error ? error.message : '批量删除失败',
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
}
|
||
|
||
// 页面跳转
|
||
const handleJumpToPage = () => {
|
||
const targetPage = parseInt(jumpToPage)
|
||
const totalPages = Math.ceil(total / pageSize)
|
||
if (targetPage >= 1 && targetPage <= totalPages) {
|
||
setPage(targetPage)
|
||
setJumpToPage('')
|
||
} else {
|
||
toast({
|
||
title: '无效的页码',
|
||
description: `请输入1-${totalPages}之间的页码`,
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
}
|
||
|
||
// 格式化时间
|
||
const formatTime = (timestamp: number | null) => {
|
||
if (!timestamp) return '-'
|
||
return new Date(timestamp * 1000).toLocaleString('zh-CN')
|
||
}
|
||
|
||
return (
|
||
<div className="h-[calc(100vh-4rem)] flex flex-col p-4 sm:p-6">
|
||
{/* 页面标题 */}
|
||
<div className="mb-4 sm:mb-6">
|
||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||
<div>
|
||
<h1 className="text-2xl sm:text-3xl font-bold flex items-center gap-2">
|
||
<Users className="h-8 w-8" strokeWidth={2} />
|
||
人物信息管理
|
||
</h1>
|
||
<p className="text-muted-foreground mt-1 text-sm sm:text-base">
|
||
管理麦麦认识的所有人物信息
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ScrollArea className="flex-1">
|
||
<div className="space-y-4 sm:space-y-6 pr-4">
|
||
|
||
{/* 统计卡片 */}
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||
<div className="rounded-lg border bg-card p-4">
|
||
<div className="text-sm text-muted-foreground">总人数</div>
|
||
<div className="text-2xl font-bold mt-1">{stats.total}</div>
|
||
</div>
|
||
<div className="rounded-lg border bg-card p-4">
|
||
<div className="text-sm text-muted-foreground">已认识</div>
|
||
<div className="text-2xl font-bold mt-1 text-green-600">{stats.known}</div>
|
||
</div>
|
||
<div className="rounded-lg border bg-card p-4">
|
||
<div className="text-sm text-muted-foreground">未认识</div>
|
||
<div className="text-2xl font-bold mt-1 text-muted-foreground">{stats.unknown}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 搜索和过滤 */}
|
||
<div className="rounded-lg border bg-card p-4">
|
||
<div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
|
||
<div className="sm:col-span-2">
|
||
<Label htmlFor="search">搜索</Label>
|
||
<div className="relative mt-1.5">
|
||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||
<Input
|
||
id="search"
|
||
placeholder="搜索名称、昵称或用户ID..."
|
||
value={search}
|
||
onChange={(e) => setSearch(e.target.value)}
|
||
className="pl-9"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<Label htmlFor="filter-known">认识状态</Label>
|
||
<Select
|
||
value={filterKnown === undefined ? 'all' : filterKnown.toString()}
|
||
onValueChange={(value) => {
|
||
setFilterKnown(value === 'all' ? undefined : value === 'true')
|
||
setPage(1)
|
||
}}
|
||
>
|
||
<SelectTrigger id="filter-known" className="mt-1.5">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">全部</SelectItem>
|
||
<SelectItem value="true">已认识</SelectItem>
|
||
<SelectItem value="false">未认识</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div>
|
||
<Label htmlFor="filter-platform">平台</Label>
|
||
<Select
|
||
value={filterPlatform || 'all'}
|
||
onValueChange={(value) => {
|
||
setFilterPlatform(value === 'all' ? undefined : value)
|
||
setPage(1)
|
||
}}
|
||
>
|
||
<SelectTrigger id="filter-platform" className="mt-1.5">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">全部平台</SelectItem>
|
||
{platforms.map((platform) => (
|
||
<SelectItem key={platform} value={platform}>
|
||
{platform} ({stats.platforms[platform]})
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 批量操作工具栏 */}
|
||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mt-4 pt-4 border-t">
|
||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||
{selectedPersons.size > 0 && (
|
||
<span>已选择 {selectedPersons.size} 个人物</span>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Label htmlFor="page-size" className="text-sm whitespace-nowrap">每页显示</Label>
|
||
<Select
|
||
value={pageSize.toString()}
|
||
onValueChange={(value) => {
|
||
setPageSize(parseInt(value))
|
||
setPage(1)
|
||
setSelectedPersons(new Set())
|
||
}}
|
||
>
|
||
<SelectTrigger id="page-size" className="w-20">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="10">10</SelectItem>
|
||
<SelectItem value="20">20</SelectItem>
|
||
<SelectItem value="50">50</SelectItem>
|
||
<SelectItem value="100">100</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
{selectedPersons.size > 0 && (
|
||
<>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setSelectedPersons(new Set())}
|
||
>
|
||
取消选择
|
||
</Button>
|
||
<Button
|
||
variant="destructive"
|
||
size="sm"
|
||
onClick={openBatchDeleteDialog}
|
||
>
|
||
<Trash2 className="h-4 w-4 mr-1" />
|
||
批量删除
|
||
</Button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 人物列表 */}
|
||
<div className="rounded-lg border bg-card">
|
||
{/* 桌面端表格视图 */}
|
||
<div className="hidden md:block">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead className="w-12">
|
||
<Checkbox
|
||
checked={persons.length > 0 && selectedPersons.size === persons.length}
|
||
onCheckedChange={toggleSelectAll}
|
||
aria-label="全选"
|
||
/>
|
||
</TableHead>
|
||
<TableHead>状态</TableHead>
|
||
<TableHead>名称</TableHead>
|
||
<TableHead>昵称</TableHead>
|
||
<TableHead>平台</TableHead>
|
||
<TableHead>用户ID</TableHead>
|
||
<TableHead>最后更新</TableHead>
|
||
<TableHead className="text-right">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{loading ? (
|
||
<TableRow>
|
||
<TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
|
||
加载中...
|
||
</TableCell>
|
||
</TableRow>
|
||
) : persons.length === 0 ? (
|
||
<TableRow>
|
||
<TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
|
||
暂无数据
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
persons.map((person) => (
|
||
<TableRow key={person.id}>
|
||
<TableCell>
|
||
<Checkbox
|
||
checked={selectedPersons.has(person.person_id)}
|
||
onCheckedChange={() => togglePersonSelection(person.person_id)}
|
||
aria-label={`选择 ${person.person_name || person.nickname || person.user_id}`}
|
||
/>
|
||
</TableCell>
|
||
<TableCell>
|
||
<div className={cn(
|
||
'inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium',
|
||
person.is_known
|
||
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
||
: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400'
|
||
)}>
|
||
{person.is_known ? '已认识' : '未认识'}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell className="font-medium">
|
||
{person.person_name || <span className="text-muted-foreground">-</span>}
|
||
</TableCell>
|
||
<TableCell>{person.nickname || '-'}</TableCell>
|
||
<TableCell>{person.platform}</TableCell>
|
||
<TableCell className="font-mono text-sm">{person.user_id}</TableCell>
|
||
<TableCell className="text-sm text-muted-foreground">
|
||
{formatTime(person.last_know)}
|
||
</TableCell>
|
||
<TableCell className="text-right">
|
||
<div className="flex justify-end gap-2">
|
||
<Button
|
||
variant="default"
|
||
size="sm"
|
||
onClick={() => handleViewDetail(person)}
|
||
>
|
||
<Eye className="h-4 w-4 mr-1" />
|
||
详情
|
||
</Button>
|
||
<Button
|
||
variant="default"
|
||
size="sm"
|
||
onClick={() => handleEdit(person)}
|
||
>
|
||
<Edit className="h-4 w-4 mr-1" />
|
||
编辑
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => setDeleteConfirmPerson(person)}
|
||
className="bg-red-600 hover:bg-red-700 text-white"
|
||
>
|
||
<Trash2 className="h-4 w-4 mr-1" />
|
||
删除
|
||
</Button>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
))
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
|
||
{/* 移动端卡片视图 */}
|
||
<div className="md:hidden space-y-3 p-4">
|
||
{loading ? (
|
||
<div className="text-center py-8 text-muted-foreground">
|
||
加载中...
|
||
</div>
|
||
) : persons.length === 0 ? (
|
||
<div className="text-center py-8 text-muted-foreground">
|
||
暂无数据
|
||
</div>
|
||
) : (
|
||
persons.map((person) => (
|
||
<div key={person.id} className="rounded-lg border bg-card p-4 space-y-3 overflow-hidden">
|
||
{/* 复选框和状态 */}
|
||
<div className="flex items-start gap-3">
|
||
<Checkbox
|
||
checked={selectedPersons.has(person.person_id)}
|
||
onCheckedChange={() => togglePersonSelection(person.person_id)}
|
||
className="mt-1"
|
||
/>
|
||
<div className="flex-1 min-w-0">
|
||
<div className={cn(
|
||
'inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium mb-2',
|
||
person.is_known
|
||
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
||
: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400'
|
||
)}>
|
||
{person.is_known ? '已认识' : '未认识'}
|
||
</div>
|
||
<h3 className="font-semibold text-sm line-clamp-1 w-full break-all">
|
||
{person.person_name || <span className="text-muted-foreground">未命名</span>}
|
||
</h3>
|
||
{person.nickname && (
|
||
<p className="text-xs text-muted-foreground mt-1 line-clamp-1 w-full break-all">
|
||
昵称: {person.nickname}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 平台和用户信息 */}
|
||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||
<div>
|
||
<div className="text-xs text-muted-foreground mb-1">平台</div>
|
||
<p className="font-medium text-xs">{person.platform}</p>
|
||
</div>
|
||
<div>
|
||
<div className="text-xs text-muted-foreground mb-1">用户ID</div>
|
||
<p className="font-mono text-xs truncate" title={person.user_id}>{person.user_id}</p>
|
||
</div>
|
||
<div className="col-span-2">
|
||
<div className="text-xs text-muted-foreground mb-1">最后更新</div>
|
||
<p className="text-xs">{formatTime(person.last_know)}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 操作按钮 */}
|
||
<div className="flex flex-wrap gap-1 pt-2 border-t overflow-hidden">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => handleViewDetail(person)}
|
||
className="text-xs px-2 py-1 h-auto flex-shrink-0"
|
||
>
|
||
<Eye className="h-3 w-3 mr-1" />
|
||
查看
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => handleEdit(person)}
|
||
className="text-xs px-2 py-1 h-auto flex-shrink-0"
|
||
>
|
||
<Edit className="h-3 w-3 mr-1" />
|
||
编辑
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setDeleteConfirmPerson(person)}
|
||
className="text-xs px-2 py-1 h-auto flex-shrink-0 text-destructive hover:text-destructive"
|
||
>
|
||
<Trash2 className="h-3 w-3 mr-1" />
|
||
删除
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
|
||
{/* 分页 - 增强版 */}
|
||
{total > 0 && (
|
||
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-3 border-t">
|
||
<div className="text-sm text-muted-foreground">
|
||
共 {total} 条记录，第 {page} / {Math.ceil(total / pageSize)} 页
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
{/* 首页 */}
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setPage(1)}
|
||
disabled={page === 1}
|
||
className="hidden sm:flex"
|
||
>
|
||
<ChevronsLeft className="h-4 w-4" />
|
||
</Button>
|
||
|
||
{/* 上一页 */}
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setPage(page - 1)}
|
||
disabled={page === 1}
|
||
>
|
||
<ChevronLeft className="h-4 w-4 sm:mr-1" />
|
||
<span className="hidden sm:inline">上一页</span>
|
||
</Button>
|
||
|
||
{/* 页码跳转 */}
|
||
<div className="flex items-center gap-2">
|
||
<Input
|
||
type="number"
|
||
value={jumpToPage}
|
||
onChange={(e) => setJumpToPage(e.target.value)}
|
||
onKeyDown={(e) => e.key === 'Enter' && handleJumpToPage()}
|
||
placeholder={page.toString()}
|
||
className="w-16 h-8 text-center"
|
||
min={1}
|
||
max={Math.ceil(total / pageSize)}
|
||
/>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={handleJumpToPage}
|
||
disabled={!jumpToPage}
|
||
className="h-8"
|
||
>
|
||
跳转
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 下一页 */}
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setPage(page + 1)}
|
||
disabled={page >= Math.ceil(total / pageSize)}
|
||
>
|
||
<span className="hidden sm:inline">下一页</span>
|
||
<ChevronRight className="h-4 w-4 sm:ml-1" />
|
||
</Button>
|
||
|
||
{/* 末页 */}
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setPage(Math.ceil(total / pageSize))}
|
||
disabled={page >= Math.ceil(total / pageSize)}
|
||
className="hidden sm:flex"
|
||
>
|
||
<ChevronsRight className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
</ScrollArea>
|
||
|
||
{/* 详情对话框 */}
|
||
<PersonDetailDialog
|
||
person={selectedPerson}
|
||
open={isDetailDialogOpen}
|
||
onOpenChange={setIsDetailDialogOpen}
|
||
/>
|
||
|
||
{/* 编辑对话框 */}
|
||
<PersonEditDialog
|
||
person={selectedPerson}
|
||
open={isEditDialogOpen}
|
||
onOpenChange={setIsEditDialogOpen}
|
||
onSuccess={() => {
|
||
loadPersons()
|
||
loadStats()
|
||
setIsEditDialogOpen(false)
|
||
}}
|
||
/>
|
||
|
||
{/* 删除确认对话框 */}
|
||
<AlertDialog
|
||
open={!!deleteConfirmPerson}
|
||
onOpenChange={() => setDeleteConfirmPerson(null)}
|
||
>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认删除</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
确定要删除人物信息 "{deleteConfirmPerson?.person_name || deleteConfirmPerson?.nickname || deleteConfirmPerson?.user_id}" 吗？
|
||
此操作不可撤销。
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={() => deleteConfirmPerson && handleDelete(deleteConfirmPerson)}
|
||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||
>
|
||
删除
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
|
||
{/* 批量删除确认对话框 */}
|
||
<AlertDialog open={batchDeleteDialogOpen} onOpenChange={setBatchDeleteDialogOpen}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认批量删除</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
确定要删除选中的 {selectedPersons.size} 个人物信息吗？
|
||
此操作不可撤销。
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={handleBatchDelete}
|
||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||
>
|
||
批量删除
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// 人物详情对话框
|
||
function PersonDetailDialog({
|
||
person,
|
||
open,
|
||
onOpenChange,
|
||
}: {
|
||
person: PersonInfo | null
|
||
open: boolean
|
||
onOpenChange: (open: boolean) => void
|
||
}) {
|
||
if (!person) return null
|
||
|
||
const formatTime = (timestamp: number | null) => {
|
||
if (!timestamp) return '-'
|
||
return new Date(timestamp * 1000).toLocaleString('zh-CN')
|
||
}
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle>人物详情</DialogTitle>
|
||
<DialogDescription>
|
||
查看 {person.person_name || person.nickname || person.user_id} 的完整信息
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="space-y-4">
|
||
{/* 基本信息 */}
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<InfoItem icon={User} label="人物名称" value={person.person_name} />
|
||
<InfoItem icon={MessageSquare} label="昵称" value={person.nickname} />
|
||
<InfoItem icon={Hash} label="用户ID" value={person.user_id} mono />
|
||
<InfoItem icon={Hash} label="人物ID" value={person.person_id} mono />
|
||
<InfoItem label="平台" value={person.platform} />
|
||
<InfoItem label="状态" value={person.is_known ? '已认识' : '未认识'} />
|
||
</div>
|
||
|
||
{/* 名称原因 */}
|
||
{person.name_reason && (
|
||
<div className="rounded-lg border bg-muted/50 p-3">
|
||
<Label className="text-xs text-muted-foreground">名称设定原因</Label>
|
||
<p className="mt-1 text-sm">{person.name_reason}</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* 记忆点 */}
|
||
{person.memory_points && (
|
||
<div className="rounded-lg border bg-muted/50 p-3">
|
||
<Label className="text-xs text-muted-foreground">个人印象</Label>
|
||
<p className="mt-1 text-sm whitespace-pre-wrap">{person.memory_points}</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* 群昵称列表 */}
|
||
{person.group_nick_name && person.group_nick_name.length > 0 && (
|
||
<div className="rounded-lg border bg-muted/50 p-3">
|
||
<Label className="text-xs text-muted-foreground">群昵称</Label>
|
||
<div className="mt-2 space-y-1">
|
||
{person.group_nick_name.map((item, index) => (
|
||
<div key={index} className="text-sm flex items-center gap-2">
|
||
<span className="font-mono text-xs text-muted-foreground">{item.group_id}</span>
|
||
<span>→</span>
|
||
<span>{item.group_nick_name}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 时间信息 */}
|
||
<div className="grid grid-cols-3 gap-4">
|
||
<InfoItem icon={Clock} label="认识时间" value={formatTime(person.know_times)} />
|
||
<InfoItem icon={Clock} label="首次记录" value={formatTime(person.know_since)} />
|
||
<InfoItem icon={Clock} label="最后更新" value={formatTime(person.last_know)} />
|
||
</div>
|
||
</div>
|
||
|
||
<DialogFooter>
|
||
<Button onClick={() => onOpenChange(false)}>关闭</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|
||
|
||
// 信息项组件
|
||
function InfoItem({
|
||
icon: Icon,
|
||
label,
|
||
value,
|
||
mono = false,
|
||
}: {
|
||
icon?: typeof User
|
||
label: string
|
||
value: string | null | undefined
|
||
mono?: boolean
|
||
}) {
|
||
return (
|
||
<div className="space-y-1">
|
||
<Label className="text-xs text-muted-foreground flex items-center gap-1">
|
||
{Icon && <Icon className="h-3 w-3" />}
|
||
{label}
|
||
</Label>
|
||
<div className={cn('text-sm', mono && 'font-mono', !value && 'text-muted-foreground')}>
|
||
{value || '-'}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// 人物编辑对话框
|
||
function PersonEditDialog({
|
||
person,
|
||
open,
|
||
onOpenChange,
|
||
onSuccess,
|
||
}: {
|
||
person: PersonInfo | null
|
||
open: boolean
|
||
onOpenChange: (open: boolean) => void
|
||
onSuccess: () => void
|
||
}) {
|
||
const [formData, setFormData] = useState<PersonUpdateRequest>({})
|
||
const [saving, setSaving] = useState(false)
|
||
const { toast } = useToast()
|
||
|
||
useEffect(() => {
|
||
if (person) {
|
||
setFormData({
|
||
person_name: person.person_name || '',
|
||
name_reason: person.name_reason || '',
|
||
nickname: person.nickname || '',
|
||
is_known: person.is_known,
|
||
})
|
||
}
|
||
}, [person])
|
||
|
||
const handleSave = async () => {
|
||
if (!person) return
|
||
|
||
try {
|
||
setSaving(true)
|
||
await updatePerson(person.person_id, formData)
|
||
toast({
|
||
title: '保存成功',
|
||
description: '人物信息已更新',
|
||
})
|
||
onSuccess()
|
||
} catch (error) {
|
||
toast({
|
||
title: '保存失败',
|
||
description: error instanceof Error ? error.message : '无法更新人物信息',
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
if (!person) return null
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle>编辑人物信息</DialogTitle>
|
||
<DialogDescription>
|
||
修改 {person.person_name || person.nickname || person.user_id} 的信息
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="person_name">人物名称</Label>
|
||
<Input
|
||
id="person_name"
|
||
value={formData.person_name || ''}
|
||
onChange={(e) => setFormData({ ...formData, person_name: e.target.value })}
|
||
placeholder="为这个人设置一个名称"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="nickname">昵称</Label>
|
||
<Input
|
||
id="nickname"
|
||
value={formData.nickname || ''}
|
||
onChange={(e) => setFormData({ ...formData, nickname: e.target.value })}
|
||
placeholder="昵称"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="name_reason">名称设定原因</Label>
|
||
<Textarea
|
||
id="name_reason"
|
||
value={formData.name_reason || ''}
|
||
onChange={(e) => setFormData({ ...formData, name_reason: e.target.value })}
|
||
placeholder="为什么这样称呼这个人？"
|
||
rows={2}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between rounded-lg border p-3">
|
||
<div>
|
||
<Label htmlFor="is_known" className="text-base font-medium">
|
||
已认识
|
||
</Label>
|
||
<p className="text-sm text-muted-foreground">标记是否已经认识这个人</p>
|
||
</div>
|
||
<Switch
|
||
id="is_known"
|
||
checked={formData.is_known}
|
||
onCheckedChange={(checked) => setFormData({ ...formData, is_known: checked })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||
取消
|
||
</Button>
|
||
<Button onClick={handleSave} disabled={saving}>
|
||
{saving ? '保存中...' : '保存'}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|