feat: 支持配置微信用户已通关关卡

components/wx-users/wx-user-detail-dialog.tsx

@@ -1,194 +1,298 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import Image from 'next/image'
-import { WxUserWithProgress } from '@/types'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogDescription,
 } from '@/components/ui/dialog'
-import { Button } from '@/components/ui/button'
+import { WxUserDetailResponse } from '@/types'
 
 interface WxUserDetailDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
-  user: WxUserWithProgress | null | undefined
-  onDeleted?: () => void
+  user: WxUserDetailResponse | null | undefined
+  isSaving?: boolean
+  onSave: (levelIds: string[]) => Promise<void>
+  onClearAll: () => Promise<void>
 }
 
 export function WxUserDetailDialog({
   open,
   onOpenChange,
   user,
-  onDeleted,
+  isSaving = false,
+  onSave,
+  onClearAll,
 }: WxUserDetailDialogProps) {
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
-  const [isDeleting, setIsDeleting] = useState(false)
+  const [selectedLevelIds, setSelectedLevelIds] = useState<Set<string>>(new Set())
+  const [keyword, setKeyword] = useState('')
 
   useEffect(() => {
-    if (!open) {
-      setSelectedIds(new Set())
+    if (!open || !user) {
+      setSelectedLevelIds(new Set())
+      setKeyword('')
+      return
     }
-  }, [open])
+
+    setSelectedLevelIds(
+      new Set(
+        user.assignedLevels
+          .filter((level) => level.completed)
+          .map((level) => level.id)
+      )
+    )
+  }, [open, user])
+
+  const filteredLevels = useMemo(() => {
+    if (!user) return []
+
+    const search = keyword.trim().toLowerCase()
+    if (!search) return user.assignedLevels
+
+    return user.assignedLevels.filter((level) => {
+      return (
+        String(level.sortOrder).includes(search) ||
+        level.answer.toLowerCase().includes(search) ||
+        level.id.toLowerCase().includes(search)
+      )
+    })
+  }, [keyword, user])
+
+  const selectedCount = selectedLevelIds.size
+  const totalLevels = user?.assignedLevels.length || 0
+  const completedCount = user?.assignedLevels.filter((level) => level.completed).length || 0
+  const hasChanges = useMemo(() => {
+    if (!user) return false
+
+    const original = new Set(
+      user.assignedLevels.filter((level) => level.completed).map((level) => level.id)
+    )
+
+    if (original.size !== selectedLevelIds.size) return true
+
+    for (const id of Array.from(selectedLevelIds)) {
+      if (!original.has(id)) return true
+    }
+
+    return false
+  }, [selectedLevelIds, user])
 
   if (!user) return null
 
-  const handleSelectAll = (checked: boolean) => {
+  const toggleLevel = (levelId: string, checked: boolean) => {
+    const next = new Set(selectedLevelIds)
+
     if (checked) {
-      setSelectedIds(new Set(user.levelProgress.map((p) => p.id)))
+      next.add(levelId)
     } else {
-      setSelectedIds(new Set())
+      next.delete(levelId)
     }
+
+    setSelectedLevelIds(next)
   }
 
-  const handleSelectOne = (id: string, checked: boolean) => {
-    const newSelected = new Set(selectedIds)
-    if (checked) {
-      newSelected.add(id)
-    } else {
-      newSelected.delete(id)
+  const handleSelectAllVisible = () => {
+    const next = new Set(selectedLevelIds)
+
+    for (const level of filteredLevels) {
+      next.add(level.id)
     }
-    setSelectedIds(newSelected)
+
+    setSelectedLevelIds(next)
   }
 
-  const handleBatchDelete = async () => {
-    if (selectedIds.size === 0) return
+  const handleClearVisible = () => {
+    const next = new Set(selectedLevelIds)
 
-    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)
+    for (const level of filteredLevels) {
+      next.delete(level.id)
     }
+
+    setSelectedLevelIds(next)
   }
 
-  const allSelected =
-    user.levelProgress.length > 0 &&
-    selectedIds.size === user.levelProgress.length
+  const handleSave = async () => {
+    await onSave(Array.from(selectedLevelIds))
+  }
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>用户详情</DialogTitle>
-          <DialogDescription>完整信息及关卡进度</DialogDescription>
-        </DialogHeader>
+      <DialogContent className="max-w-5xl h-[85vh] overflow-hidden p-0">
+        <div className="grid h-full md:grid-cols-[320px_1fr]">
+          <div className="border-b bg-slate-50 p-6 md:border-b-0 md:border-r">
+            <DialogHeader className="text-left">
+              <DialogTitle>用户通关配置</DialogTitle>
+              <DialogDescription>查看用户信息，并直接维护已经通关的关卡集合。</DialogDescription>
+            </DialogHeader>
 
-        <div className="space-y-4">
-          <div className="flex items-center gap-4">
-            <div className="w-16 h-16 flex-shrink-0 relative">
-              {user.avatarUrl ? (
-                <Image
-                  src={user.avatarUrl}
-                  alt={user.nickname || 'User'}
-                  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">
-                  {user.nickname?.[0]?.toUpperCase() || 'U'}
+            <div className="mt-6 space-y-5">
+              <div className="flex items-center gap-4">
+                <div className="relative h-16 w-16 overflow-hidden rounded-full bg-slate-200">
+                  {user.avatarUrl ? (
+                    <Image
+                      src={user.avatarUrl}
+                      alt={user.nickname || 'User'}
+                      fill
+                      sizes="64px"
+                      className="object-cover"
+                    />
+                  ) : (
+                    <div className="flex h-full w-full items-center justify-center text-xl font-semibold text-slate-600">
+                      {user.nickname?.[0]?.toUpperCase() || 'U'}
+                    </div>
+                  )}
                 </div>
-              )}
-            </div>
-            <div>
-              <h2 className="text-xl font-semibold text-gray-900">
-                {user.nickname || '匿名用户'}
-              </h2>
-              <p className="text-sm text-gray-500 mt-1">
-                注册时间：{new Date(user.createdAt).toLocaleDateString('zh-CN')}
-              </p>
-            </div>
-          </div>
 
-          <div className="grid grid-cols-2 gap-4">
-            <div className="bg-gray-50 rounded-lg p-4">
-              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">积分</p>
-              <p className="text-2xl font-bold text-orange-600">{user.points}</p>
-            </div>
-            <div className="bg-gray-50 rounded-lg p-4">
-              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">已通关关卡</p>
-              <p className="text-2xl font-bold text-green-600">{user.levelProgress.length}</p>
-            </div>
-          </div>
-
-          <div>
-            <p className="text-xs text-gray-500 uppercase tracking-wider mb-2">OpenID</p>
-            <code className="block bg-gray-100 text-gray-800 text-xs p-3 rounded-lg break-all">
-              {user.openid}
-            </code>
-          </div>
-
-          {user.levelProgress.length > 0 && (
-            <div>
-              <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}
-                  >
-                    {isDeleting ? '删除中...' : `删除已选 (${selectedIds.size})`}
-                  </Button>
-                )}
+                <div className="min-w-0">
+                  <h2 className="truncate text-xl font-semibold text-slate-900">
+                    {user.nickname || '匿名用户'}
+                  </h2>
+                  <p className="mt-1 text-sm text-slate-500">
+                    注册于 {new Date(user.createdAt).toLocaleString('zh-CN')}
+                  </p>
+                </div>
               </div>
-              <div className="border rounded-lg overflow-hidden">
-                <table className="w-full text-sm">
-                  <thead className="bg-gray-50 border-b">
+
+              <div className="grid grid-cols-2 gap-3">
+                <div className="rounded-xl border bg-white p-4">
+                  <p className="text-xs uppercase tracking-wide text-slate-500">已通关</p>
+                  <p className="mt-2 text-2xl font-semibold text-emerald-600">{completedCount}</p>
+                </div>
+                <div className="rounded-xl border bg-white p-4">
+                  <p className="text-xs uppercase tracking-wide text-slate-500">当前选中</p>
+                  <p className="mt-2 text-2xl font-semibold text-sky-600">{selectedCount}</p>
+                </div>
+              </div>
+
+              <div className="space-y-3 rounded-xl border bg-white p-4">
+                <div>
+                  <p className="text-xs uppercase tracking-wide text-slate-500">OpenID</p>
+                  <code className="mt-2 block break-all rounded-md bg-slate-100 p-3 text-xs text-slate-700">
+                    {user.openid}
+                  </code>
+                </div>
+
+                <div className="grid grid-cols-2 gap-3 text-sm text-slate-600">
+                  <div>
+                    <p className="text-xs uppercase tracking-wide text-slate-500">体力</p>
+                    <p className="mt-1 font-medium text-slate-900">{user.stamina}</p>
+                  </div>
+                  <div>
+                    <p className="text-xs uppercase tracking-wide text-slate-500">关卡总数</p>
+                    <p className="mt-1 font-medium text-slate-900">{totalLevels}</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Button
+                  className="w-full"
+                  onClick={handleSave}
+                  disabled={isSaving || !hasChanges}
+                >
+                  {isSaving ? '保存中...' : '保存通关配置'}
+                </Button>
+                <Button
+                  variant="outline"
+                  className="w-full"
+                  onClick={onClearAll}
+                  disabled={isSaving || completedCount === 0}
+                >
+                  一键清空全部通关
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex min-h-0 flex-col p-6">
+            <div className="flex flex-col gap-3 border-b pb-4 sm:flex-row sm:items-center sm:justify-between">
+              <div>
+                <h3 className="text-base font-semibold text-slate-900">关卡列表</h3>
+                <p className="text-sm text-slate-500">勾选后保存，即可定义该用户已通关哪些关卡。</p>
+              </div>
+              <Input
+                value={keyword}
+                onChange={(e) => setKeyword(e.target.value)}
+                placeholder="搜索关卡序号、答案或 ID"
+                className="sm:max-w-xs"
+              />
+            </div>
+
+            <div className="flex items-center gap-2 py-4">
+              <Button variant="outline" size="sm" onClick={handleSelectAllVisible} disabled={filteredLevels.length === 0 || isSaving}>
+                全选当前结果
+              </Button>
+              <Button variant="outline" size="sm" onClick={handleClearVisible} disabled={filteredLevels.length === 0 || isSaving}>
+                清空当前结果
+              </Button>
+            </div>
+
+            <div className="min-h-0 flex-1 overflow-auto rounded-xl border">
+              {filteredLevels.length === 0 ? (
+                <div className="flex h-full items-center justify-center p-8 text-sm text-slate-500">
+                  没有匹配的关卡
+                </div>
+              ) : (
+                <table className="min-w-full divide-y divide-slate-200 text-sm">
+                  <thead className="sticky top-0 bg-slate-50">
                     <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>
+                      <th className="w-14 px-4 py-3 text-left font-medium text-slate-500">选择</th>
+                      <th className="w-24 px-4 py-3 text-left font-medium text-slate-500">序号</th>
+                      <th className="px-4 py-3 text-left font-medium text-slate-500">答案</th>
+                      <th className="px-4 py-3 text-left font-medium text-slate-500">状态</th>
+                      <th className="px-4 py-3 text-left font-medium text-slate-500">通关时间</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 className="divide-y divide-slate-100 bg-white">
+                    {filteredLevels.map((level) => {
+                      const checked = selectedLevelIds.has(level.id)
+
+                      return (
+                        <tr key={level.id} className={checked ? 'bg-emerald-50/60' : ''}>
+                          <td className="px-4 py-3 align-top">
+                            <input
+                              type="checkbox"
+                              checked={checked}
+                              onChange={(e) => toggleLevel(level.id, e.target.checked)}
+                              disabled={isSaving}
+                              className="h-4 w-4 rounded border-slate-300"
+                            />
+                          </td>
+                          <td className="px-4 py-3 align-top font-mono text-slate-500">
+                            #{level.sortOrder}
+                          </td>
+                          <td className="px-4 py-3 align-top">
+                            <div className="font-medium text-slate-900">{level.answer}</div>
+                            <div className="mt-1 font-mono text-xs text-slate-400">{level.id}</div>
+                          </td>
+                          <td className="px-4 py-3 align-top">
+                            <span
+                              className={checked
+                                ? 'inline-flex rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-700'
+                                : 'inline-flex rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-500'}
+                            >
+                              {checked ? '已通关' : '未通关'}
+                            </span>
+                          </td>
+                          <td className="px-4 py-3 align-top text-slate-500">
+                            {level.completedAt
+                              ? new Date(level.completedAt).toLocaleString('zh-CN')
+                              : '-'}
+                          </td>
+                        </tr>
+                      )
+                    })}
                   </tbody>
                 </table>
-              </div>
+              )}
             </div>
-          )}
+          </div>
         </div>
       </DialogContent>
     </Dialog>