perf: 支持删除关卡
This commit is contained in:
richarjiang
@@ -1,5 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import Image from 'next/image'
|
||||
import { WxUserWithProgress } from '@/types'
|
||||
import {
|
||||
Dialog,
|
||||
@@ -8,38 +10,91 @@ import {
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
interface WxUserDetailDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
user: WxUserWithProgress | null | undefined
|
||||
onDeleted?: () => void
|
||||
}
|
||||
|
||||
export function WxUserDetailDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
user,
|
||||
onDeleted,
|
||||
}: WxUserDetailDialogProps) {
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setSelectedIds(new Set())
|
||||
}
|
||||
}, [open])
|
||||
|
||||
if (!user) return null
|
||||
|
||||
const handleSelectAll = (checked: boolean) => {
|
||||
if (checked) {
|
||||
setSelectedIds(new Set(user.levelProgress.map((p) => p.id)))
|
||||
} else {
|
||||
setSelectedIds(new Set())
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelectOne = (id: string, checked: boolean) => {
|
||||
const newSelected = new Set(selectedIds)
|
||||
if (checked) {
|
||||
newSelected.add(id)
|
||||
} else {
|
||||
newSelected.delete(id)
|
||||
}
|
||||
setSelectedIds(newSelected)
|
||||
}
|
||||
|
||||
const handleBatchDelete = async () => {
|
||||
if (selectedIds.size === 0) return
|
||||
|
||||
setIsDeleting(true)
|
||||
try {
|
||||
const res = await fetch('/api/wx-users/level-progress', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ ids: Array.from(selectedIds) }),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
setSelectedIds(new Set())
|
||||
onDeleted?.()
|
||||
}
|
||||
} finally {
|
||||
setIsDeleting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const allSelected =
|
||||
user.levelProgress.length > 0 &&
|
||||
selectedIds.size === user.levelProgress.length
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>用户详情</DialogTitle>
|
||||
<DialogDescription>
|
||||
完整信息及关卡进度
|
||||
</DialogDescription>
|
||||
<DialogDescription>完整信息及关卡进度</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-16 h-16 flex-shrink-0">
|
||||
<div className="w-16 h-16 flex-shrink-0 relative">
|
||||
{user.avatarUrl ? (
|
||||
<img
|
||||
<Image
|
||||
src={user.avatarUrl}
|
||||
alt={user.nickname || 'User'}
|
||||
className="w-16 h-16 rounded-full object-cover"
|
||||
fill
|
||||
className="rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center text-xl font-medium text-gray-600">
|
||||
@@ -77,28 +132,60 @@ export function WxUserDetailDialog({
|
||||
|
||||
{user.levelProgress.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wider mb-2">关卡进度</p>
|
||||
<div className="space-y-2">
|
||||
{user.levelProgress.map((progress) => (
|
||||
<div
|
||||
key={progress.id}
|
||||
className="flex items-center justify-between bg-gray-50 rounded-lg px-3 py-2"
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wider">关卡进度</p>
|
||||
{selectedIds.size > 0 && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={handleBatchDelete}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs text-gray-400 font-mono">
|
||||
{progress.levelId}
|
||||
</span>
|
||||
{progress.level && (
|
||||
<span className="text-sm font-medium text-gray-900">
|
||||
{progress.level.answer}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-gray-400">
|
||||
{new Date(progress.completedAt).toLocaleDateString('zh-CN')}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{isDeleting ? '删除中...' : `删除已选 (${selectedIds.size})`}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="border rounded-lg overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-50 border-b">
|
||||
<tr>
|
||||
<th className="w-10 px-3 py-2 text-left">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allSelected}
|
||||
onChange={(e) => handleSelectAll(e.target.checked)}
|
||||
className="rounded border-gray-300"
|
||||
/>
|
||||
</th>
|
||||
<th className="px-3 py-2 text-left text-xs text-gray-500 uppercase">关卡ID</th>
|
||||
<th className="px-3 py-2 text-left text-xs text-gray-500 uppercase">关卡答案</th>
|
||||
<th className="px-3 py-2 text-left text-xs text-gray-500 uppercase">通关时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
{user.levelProgress.map((progress) => (
|
||||
<tr key={progress.id} className="hover:bg-gray-50">
|
||||
<td className="px-3 py-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedIds.has(progress.id)}
|
||||
onChange={(e) => handleSelectOne(progress.id, e.target.checked)}
|
||||
className="rounded border-gray-300"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-2 font-mono text-xs text-gray-400">
|
||||
{progress.levelId}
|
||||
</td>
|
||||
<td className="px-3 py-2 font-medium text-gray-900">
|
||||
{progress.level?.answer || '-'}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-gray-500">
|
||||
{new Date(progress.completedAt).toLocaleDateString('zh-CN')}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user