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

components/levels/level-card.tsx

@@ -1,78 +0,0 @@
-'use client'
-
-import { Level } from '@/types'
-import { Card, CardContent } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { GripVertical, Pencil, Trash2 } from 'lucide-react'
-import Image from 'next/image'
-
-interface LevelCardProps {
-  level: Level
-  onEdit: (level: Level) => void
-  onDelete: (id: string) => void
-  isDragging?: boolean
-}
-
-export function LevelCard({ level, onEdit, onDelete, isDragging }: LevelCardProps) {
-  return (
-    <Card
-      className={`cursor-grab transition-shadow ${
-        isDragging ? 'shadow-lg opacity-90' : 'hover:shadow-md'
-      }`}
-    >
-      <CardContent className="p-4">
-        <div className="flex items-start gap-4">
-          <div className="flex items-center justify-center w-8 h-8 rounded bg-gray-100 text-gray-500 cursor-grab">
-            <GripVertical className="h-4 w-4" />
-          </div>
-          <div className="relative w-20 h-20 rounded-md overflow-hidden bg-gray-100 flex-shrink-0">
-            {level.imageUrl ? (
-              <Image
-                src={level.imageUrl}
-                alt="关卡图片"
-                fill
-                className="object-cover"
-                sizes="80px"
-              />
-            ) : (
-              <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
-                无图片
-              </div>
-            )}
-          </div>
-          <div className="flex-1 min-w-0">
-            <p className="font-medium text-lg truncate">{level.answer}</p>
-            <div className="mt-1 space-y-0.5">
-              {level.hint1 && (
-                <p className="text-sm text-gray-500 truncate">提示1: {level.hint1}</p>
-              )}
-              {level.hint2 && (
-                <p className="text-sm text-gray-500 truncate">提示2: {level.hint2}</p>
-              )}
-              {level.hint3 && (
-                <p className="text-sm text-gray-500 truncate">提示3: {level.hint3}</p>
-              )}
-            </div>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={() => onEdit(level)}
-            >
-              <Pencil className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={() => onDelete(level.id)}
-              className="text-red-600 hover:text-red-700 hover:bg-red-50"
-            >
-              <Trash2 className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

components/levels/level-columns.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import { ColumnDef } from '@tanstack/react-table'
+import { Level } from '@/types'
+import { Button } from '@/components/ui/button'
+import { Pencil, Trash2 } from 'lucide-react'
+import Image from 'next/image'
+
+interface ColumnCallbacks {
+  onEdit: (level: Level) => void
+  onDelete: (id: string) => void
+  deleteConfirmId: string | null
+}
+
+export function createColumns({
+  onEdit,
+  onDelete,
+  deleteConfirmId,
+}: ColumnCallbacks): ColumnDef<Level>[] {
+  return [
+    {
+      accessorKey: 'sortOrder',
+      header: '序号',
+      cell: ({ row }) => (
+        <span className="text-muted-foreground">{row.original.sortOrder + 1}</span>
+      ),
+      size: 60,
+    },
+    {
+      id: 'images',
+      header: '图片',
+      cell: ({ row }) => {
+        const { image1Url, image2Url } = row.original
+        return (
+          <div className="flex gap-1.5">
+            <div className="relative w-12 h-12 rounded overflow-hidden bg-gray-100 flex-shrink-0">
+              {image1Url ? (
+                <Image
+                  src={image1Url}
+                  alt="图片1"
+                  fill
+                  className="object-cover"
+                  sizes="48px"
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center text-gray-400 text-[10px]">
+                  无
+                </div>
+              )}
+            </div>
+            <div className="relative w-12 h-12 rounded overflow-hidden bg-gray-100 flex-shrink-0">
+              {image2Url ? (
+                <Image
+                  src={image2Url}
+                  alt="图片2"
+                  fill
+                  className="object-cover"
+                  sizes="48px"
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center text-gray-400 text-[10px]">
+                  无
+                </div>
+              )}
+            </div>
+          </div>
+        )
+      },
+      size: 120,
+    },
+    {
+      accessorKey: 'answer',
+      header: '答案',
+      cell: ({ row }) => (
+        <span className="font-medium">{row.original.answer}</span>
+      ),
+    },
+    {
+      accessorKey: 'punchline',
+      header: '谐音梗',
+      cell: ({ row }) => {
+        const punchline = row.original.punchline
+        return punchline ? (
+          <span className="text-orange-600">{punchline}</span>
+        ) : (
+          <span className="text-muted-foreground">—</span>
+        )
+      },
+    },
+    {
+      id: 'hints',
+      header: '提示',
+      cell: ({ row }) => {
+        const { hint1, hint2, hint3 } = row.original
+        const hints = [hint1, hint2, hint3].filter(Boolean)
+        return hints.length > 0 ? (
+          <span className="text-sm text-muted-foreground truncate max-w-[200px] block">
+            {hints.join('、')}
+          </span>
+        ) : (
+          <span className="text-muted-foreground">—</span>
+        )
+      },
+    },
+    {
+      accessorKey: 'createdAt',
+      header: '创建时间',
+      cell: ({ row }) => {
+        const date = new Date(row.original.createdAt)
+        return (
+          <span className="text-sm text-muted-foreground whitespace-nowrap">
+            {date.toLocaleDateString('zh-CN', {
+              year: 'numeric',
+              month: '2-digit',
+              day: '2-digit',
+            })}
+          </span>
+        )
+      },
+      size: 120,
+    },
+    {
+      id: 'actions',
+      header: '操作',
+      cell: ({ row }) => {
+        const level = row.original
+        const isConfirming = deleteConfirmId === level.id
+        return (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => onEdit(level)}
+            >
+              <Pencil className="h-3.5 w-3.5" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className={`h-8 w-8 ${
+                isConfirming
+                  ? 'bg-red-600 text-white hover:bg-red-700 border-red-600'
+                  : 'text-red-600 hover:text-red-700 hover:bg-red-50'
+              }`}
+              onClick={() => onDelete(level.id)}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        )
+      },
+      size: 100,
+    },
+  ]
+}

components/levels/level-dialog.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import { useState, useRef, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
 import {
   Dialog,
   DialogContent,
@@ -16,7 +15,6 @@ import {
 import { Spinner } from '@/components/ui/spinner'
 import { Level, LevelFormData } from '@/types'
 import { ImageUploader } from './image-uploader'
-import { Upload } from 'lucide-react'
 
 interface LevelDialogProps {
   open: boolean
@@ -26,8 +24,12 @@ interface LevelDialogProps {
 }
 
 const defaultFormData: LevelFormData = {
-  imageUrl: '',
+  image1Url: '',
+  image1Description: '',
+  image2Url: '',
+  image2Description: '',
   answer: '',
+  punchline: '',
   hint1: '',
   hint2: '',
   hint3: '',
@@ -37,15 +39,18 @@ export function LevelDialog({ open, onOpenChange, level, onSubmit }: LevelDialog
   const [formData, setFormData] = useState<LevelFormData>(defaultFormData)
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState('')
-  const fileInputRef = useRef<HTMLInputElement>(null)
 
   // Reset form when dialog opens/closes or level changes
   useEffect(() => {
     if (open) {
       if (level) {
         setFormData({
-          imageUrl: level.imageUrl,
+          image1Url: level.image1Url,
+          image1Description: level.image1Description || '',
+          image2Url: level.image2Url,
+          image2Description: level.image2Description || '',
           answer: level.answer,
+          punchline: level.punchline || '',
           hint1: level.hint1 || '',
           hint2: level.hint2 || '',
           hint3: level.hint3 || '',
@@ -57,16 +62,25 @@ export function LevelDialog({ open, onOpenChange, level, onSubmit }: LevelDialog
     }
   }, [open, level])
 
-  const handleImageUpload = (url: string) => {
-    setFormData((prev) => ({ ...prev, imageUrl: url }))
+  const handleImage1Upload = (url: string) => {
+    setFormData((prev) => ({ ...prev, image1Url: url }))
+  }
+
+  const handleImage2Upload = (url: string) => {
+    setFormData((prev) => ({ ...prev, image2Url: url }))
   }
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError('')
 
-    if (!formData.imageUrl) {
-      setError('请上传关卡图片')
+    if (!formData.image1Url) {
+      setError('请上传图片1')
+      return
+    }
+
+    if (!formData.image2Url) {
+      setError('请上传图片2')
       return
     }
 
@@ -75,6 +89,11 @@ export function LevelDialog({ open, onOpenChange, level, onSubmit }: LevelDialog
       return
     }
 
+    if (formData.answer.trim().length > 4) {
+      setError('答案最多4个字')
+      return
+    }
+
     setIsLoading(true)
     try {
       await onSubmit(formData)
@@ -88,7 +107,7 @@ export function LevelDialog({ open, onOpenChange, level, onSubmit }: LevelDialog
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[500px]">
+      <DialogContent className="sm:max-w-2xl max-h-[85vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>{level ? '编辑关卡' : '添加关卡'}</DialogTitle>
           <DialogDescription>
@@ -102,12 +121,39 @@ export function LevelDialog({ open, onOpenChange, level, onSubmit }: LevelDialog
             </div>
           )}
 
-          <div className="space-y-2">
-            <Label>关卡图片 *</Label>
-            <ImageUploader
-              value={formData.imageUrl}
-              onChange={handleImageUpload}
-            />
+          {/* 双图上传区域 */}
+          <div className="grid grid-cols-2 gap-4">
+            {/* 图片1 */}
+            <div className="space-y-2">
+              <Label>图片1 *</Label>
+              <ImageUploader
+                value={formData.image1Url}
+                onChange={handleImage1Upload}
+              />
+              <Input
+                value={formData.image1Description}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, image1Description: e.target.value }))
+                }
+                placeholder="图片1描述 (可选)"
+              />
+            </div>
+
+            {/* 图片2 */}
+            <div className="space-y-2">
+              <Label>图片2 *</Label>
+              <ImageUploader
+                value={formData.image2Url}
+                onChange={handleImage2Upload}
+              />
+              <Input
+                value={formData.image2Description}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, image2Description: e.target.value }))
+                }
+                placeholder="图片2描述 (可选)"
+              />
+            </div>
           </div>
 
           <div className="space-y-2">
@@ -118,9 +164,25 @@ export function LevelDialog({ open, onOpenChange, level, onSubmit }: LevelDialog
               onChange={(e) =>
                 setFormData((prev) => ({ ...prev, answer: e.target.value }))
               }
-              placeholder="请输入答案"
+              placeholder="请输入答案（最多4个字）"
+              maxLength={4}
               required
             />
+            <p className="text-xs text-muted-foreground text-right">
+              {formData.answer.length}/4
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="punchline">谐音梗说明 (可选)</Label>
+            <Input
+              id="punchline"
+              value={formData.punchline}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, punchline: e.target.value }))
+              }
+              placeholder="请输入谐音梗说明"
+            />
           </div>
 
           <div className="space-y-2">

components/levels/level-list.tsx

@@ -1,134 +0,0 @@
-'use client'
-
-import { useState, useCallback } from 'react'
-import { Level } from '@/types'
-import {
-  DndContext,
-  closestCenter,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  DragEndEvent,
-} from '@dnd-kit/core'
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  verticalListSortingStrategy,
-  useSortable,
-} from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-import { LevelCard } from './level-card'
-
-interface SortableLevelCardProps {
-  level: Level
-  onEdit: (level: Level) => void
-  onDelete: (id: string) => void
-}
-
-function SortableLevelCard({ level, onEdit, onDelete }: SortableLevelCardProps) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: level.id })
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  }
-
-  return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      <LevelCard
-        level={level}
-        onEdit={onEdit}
-        onDelete={onDelete}
-        isDragging={isDragging}
-      />
-    </div>
-  )
-}
-
-interface LevelListProps {
-  levels: Level[]
-  onReorder: (orders: { id: string; sortOrder: number }[]) => void
-  onEdit: (level: Level) => void
-  onDelete: (id: string) => void
-}
-
-export function LevelList({ levels, onReorder, onEdit, onDelete }: LevelListProps) {
-  const [items, setItems] = useState<Level[]>(levels)
-
-  // Update items when levels prop changes
-  if (JSON.stringify(items.map(i => i.id)) !== JSON.stringify(levels.map(l => l.id))) {
-    setItems(levels)
-  }
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 8,
-      },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  )
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event
-
-      if (over && active.id !== over.id) {
-        const oldIndex = items.findIndex((item) => item.id === active.id)
-        const newIndex = items.findIndex((item) => item.id === over.id)
-
-        const newItems = arrayMove(items, oldIndex, newIndex)
-        setItems(newItems)
-
-        // Notify parent of new order
-        const orders = newItems.map((item, index) => ({
-          id: item.id,
-          sortOrder: index,
-        }))
-        onReorder(orders)
-      }
-    },
-    [items, onReorder]
-  )
-
-  if (items.length === 0) {
-    return (
-      <div className="text-center py-12 text-gray-500">
-        <p>暂无关卡数据</p>
-        <p className="text-sm mt-2">点击上方&ldquo;添加关卡&rdquo;按钮创建第一个关卡</p>
-      </div>
-    )
-  }
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragEnd={handleDragEnd}
-    >
-      <SortableContext items={items} strategy={verticalListSortingStrategy}>
-        <div className="space-y-3">
-          {items.map((level) => (
-            <SortableLevelCard
-              key={level.id}
-              level={level}
-              onEdit={onEdit}
-              onDelete={onDelete}
-            />
-          ))}
-        </div>
-      </SortableContext>
-    </DndContext>
-  )
-}

components/levels/level-table.tsx

@@ -0,0 +1,171 @@
+'use client'
+
+import { useMemo } from 'react'
+import {
+  useReactTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  flexRender,
+} from '@tanstack/react-table'
+import { Level } from '@/types'
+import { createColumns } from './level-columns'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Button } from '@/components/ui/button'
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from 'lucide-react'
+
+interface LevelTableProps {
+  levels: Level[]
+  onEdit: (level: Level) => void
+  onDelete: (id: string) => void
+  deleteConfirmId: string | null
+}
+
+export function LevelTable({
+  levels,
+  onEdit,
+  onDelete,
+  deleteConfirmId,
+}: LevelTableProps) {
+  const columns = useMemo(
+    () => createColumns({ onEdit, onDelete, deleteConfirmId }),
+    [onEdit, onDelete, deleteConfirmId]
+  )
+
+  const table = useReactTable({
+    data: levels,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 10,
+      },
+    },
+  })
+
+  if (levels.length === 0) {
+    return (
+      <div className="text-center py-12 text-gray-500">
+        <p>暂无关卡数据</p>
+        <p className="text-sm mt-2">
+          点击上方&ldquo;添加关卡&rdquo;按钮创建第一个关卡
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* 分页控制栏 */}
+      <div className="flex items-center justify-between px-2">
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <span>每页显示</span>
+          <select
+            className="h-8 rounded-md border border-input bg-background px-2 text-sm"
+            value={table.getState().pagination.pageSize}
+            onChange={(e) => {
+              table.setPageSize(Number(e.target.value))
+            }}
+          >
+            {[10, 20, 50].map((pageSize) => (
+              <option key={pageSize} value={pageSize}>
+                {pageSize}
+              </option>
+            ))}
+          </select>
+          <span>条</span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted-foreground">
+            第 {table.getState().pagination.pageIndex + 1} /{' '}
+            {table.getPageCount()} 页，共 {levels.length} 条
+          </span>
+
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => table.setPageIndex(0)}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <ChevronsLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              disabled={!table.getCanNextPage()}
+            >
+              <ChevronsRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+))
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+))
+TableBody.displayName = 'TableBody'
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = 'TableFooter'
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = 'TableRow'
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = 'TableHead'
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+))
+TableCell.displayName = 'TableCell'
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+TableCaption.displayName = 'TableCaption'
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

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>