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

app/(dashboard)/wx-users/page.tsx

@@ -1,64 +1,127 @@
 'use client'
 
 import { useState } from 'react'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import Image from 'next/image'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Header } from '@/components/layout/header'
+import { Spinner } from '@/components/ui/spinner'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Header } from '@/components/layout/header'
 import { WxUserDetailDialog } from '@/components/wx-users/wx-user-detail-dialog'
-import { Spinner } from '@/components/ui/spinner'
-import { WxUser, WxUserWithProgress } from '@/types'
 import { apiFetch } from '@/lib/api'
+import { WxUser, WxUserDetailResponse } from '@/types'
 import { Search } from 'lucide-react'
 
 interface UsersResponse {
   users: WxUser[]
-  meta: { total: number; page: number; limit: number; totalPages: number }
+  meta: { total: number }
 }
 
 export default function WxUsersPage() {
+  const queryClient = useQueryClient()
   const [search, setSearch] = useState('')
   const [selectedUser, setSelectedUser] = useState<WxUser | null>(null)
   const [isDialogOpen, setIsDialogOpen] = useState(false)
-  const queryClient = useQueryClient()
 
   const { data, isLoading, error } = useQuery<UsersResponse>({
     queryKey: ['wx-users', search],
     queryFn: async () => {
       const res = await apiFetch(`/api/wx-users?search=${encodeURIComponent(search)}`)
-      if (!res.ok) throw new Error('Failed to fetch wx users')
+
+      if (!res.ok) {
+        const payload = await res.json().catch(() => null)
+        throw new Error(payload?.error || 'Failed to fetch wx users')
+      }
+
       return res.json()
     },
   })
 
-  const { data: userDetails } = useQuery<WxUserWithProgress>({
-    queryKey: ['wx-users', selectedUser?.id],
+  const { data: userDetails, isLoading: isDetailLoading } = useQuery<WxUserDetailResponse>({
+    queryKey: ['wx-user-detail', selectedUser?.id],
     queryFn: async () => {
       const res = await apiFetch(`/api/wx-users/${selectedUser?.id}`)
-      if (!res.ok) throw new Error('Failed to fetch wx user details')
+
+      if (!res.ok) {
+        const payload = await res.json().catch(() => null)
+        throw new Error(payload?.error || 'Failed to fetch wx user details')
+      }
+
       return res.json()
     },
     enabled: !!selectedUser && isDialogOpen,
   })
 
-  const handleUserClick = (user: WxUser) => {
+  const syncProgressMutation = useMutation({
+    mutationFn: async ({ userId, levelIds }: { userId: string; levelIds: string[] }) => {
+      const res = await apiFetch('/api/wx-users/level-progress', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ userId, levelIds }),
+      })
+
+      if (!res.ok) {
+        const payload = await res.json().catch(() => null)
+        throw new Error(payload?.error || 'Failed to update level progress')
+      }
+
+      return res.json()
+    },
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['wx-users'] }),
+        queryClient.invalidateQueries({ queryKey: ['wx-user-detail', selectedUser?.id] }),
+      ])
+    },
+  })
+
+  const clearProgressMutation = useMutation({
+    mutationFn: async (userId: string) => {
+      const res = await apiFetch('/api/wx-users/level-progress', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ userId }),
+      })
+
+      if (!res.ok) {
+        const payload = await res.json().catch(() => null)
+        throw new Error(payload?.error || 'Failed to clear level progress')
+      }
+
+      return res.json()
+    },
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['wx-users'] }),
+        queryClient.invalidateQueries({ queryKey: ['wx-user-detail', selectedUser?.id] }),
+      ])
+    },
+  })
+
+  const handleOpenDetail = (user: WxUser) => {
     setSelectedUser(user)
     setIsDialogOpen(true)
   }
 
-  const handleDialogOpenChange = (open: boolean) => {
+  const handleDialogChange = (open: boolean) => {
     setIsDialogOpen(open)
     if (!open) {
       setSelectedUser(null)
     }
   }
 
-  const handleDeleted = () => {
-    queryClient.invalidateQueries({ queryKey: ['wx-users'] })
+  const handleSaveProgress = async (levelIds: string[]) => {
+    if (!selectedUser) return
+    await syncProgressMutation.mutateAsync({ userId: selectedUser.id, levelIds })
+  }
+
+  const handleClearAll = async () => {
+    if (!selectedUser) return
+    await clearProgressMutation.mutateAsync(selectedUser.id)
   }
 
   const formatDate = (date: Date | string) => {
-    return new Date(date).toLocaleDateString('zh-CN', {
+    return new Date(date).toLocaleString('zh-CN', {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit',
@@ -84,8 +147,8 @@ export default function WxUsersPage() {
         <Header />
         <div className="flex-1 flex items-center justify-center">
           <div className="text-center">
-            <p className="text-red-600">加载失败</p>
-            <Button className="mt-4" onClick={() => window.location.reload()}>
+            <p className="text-red-600">{error.message || '加载失败'}</p>
+            <Button className="mt-4" onClick={() => queryClient.invalidateQueries({ queryKey: ['wx-users'] })}>
               重试
             </Button>
           </div>
@@ -97,90 +160,99 @@ export default function WxUsersPage() {
   return (
     <div className="h-screen flex flex-col">
       <Header />
-      <div className="flex-1 overflow-auto p-6">
-        <div className="max-w-6xl mx-auto">
-          <div className="flex items-center justify-between mb-6">
+      <div className="flex-1 overflow-auto bg-slate-50 p-6">
+        <div className="mx-auto max-w-7xl">
+          <div className="mb-6 flex items-center justify-between gap-4">
             <div>
-              <h1 className="text-2xl font-bold">小程序账户</h1>
-              <p className="text-gray-500 mt-1">
-                共 {data?.meta?.total || 0} 个账户
+              <h1 className="text-2xl font-bold text-slate-900">微信小游戏用户</h1>
+              <p className="mt-1 text-slate-500">
+                展示用户列表，并维护每个用户的通关关卡配置。当前共 {data?.meta.total || 0} 个用户。
               </p>
             </div>
           </div>
 
           <div className="relative mb-6 max-w-sm">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
             <Input
               type="text"
-              placeholder="搜索昵称或 OpenID..."
+              placeholder="搜索昵称或 OpenID"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              className="pl-10"
+              className="border-slate-200 bg-white pl-10"
             />
           </div>
 
-          <div className="bg-white rounded-lg shadow overflow-hidden">
-            <table className="min-w-full divide-y divide-gray-200">
-              <thead className="bg-gray-50">
+          <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
+            <table className="min-w-full divide-y divide-slate-200">
+              <thead className="bg-slate-50">
                 <tr>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <th className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">
                     用户
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <th className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">
                     OpenID
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    积分
+                  <th className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">
+                    已通关关卡数
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <th className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">
                     注册时间
                   </th>
+                  <th className="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">
+                    操作
+                  </th>
                 </tr>
               </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
-                {data?.users?.map((user) => (
-                  <tr
-                    key={user.id}
-                    className="hover:bg-gray-50 cursor-pointer"
-                    onClick={() => handleUserClick(user)}
-                  >
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="flex items-center">
+              <tbody className="divide-y divide-slate-200 bg-white">
+                {data?.users.map((user) => (
+                  <tr key={user.id} className="hover:bg-slate-50">
+                    <td className="px-6 py-4">
+                      <div className="flex items-center gap-3">
                         {user.avatarUrl ? (
-                          <img
-                            src={user.avatarUrl}
-                            alt={user.nickname || 'User'}
-                            className="h-10 w-10 rounded-full object-cover mr-3"
-                          />
+                          <div className="relative h-10 w-10 overflow-hidden rounded-full bg-slate-100">
+                            <Image
+                              src={user.avatarUrl}
+                              alt={user.nickname || 'User'}
+                              fill
+                              sizes="40px"
+                              className="object-cover"
+                            />
+                          </div>
                         ) : (
-                          <div className="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center mr-3 text-gray-600 font-medium">
+                          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-slate-200 font-medium text-slate-600">
                             {user.nickname?.[0]?.toUpperCase() || 'U'}
                           </div>
                         )}
-                        <span className="text-sm font-medium text-gray-900">
-                          {user.nickname || '匿名用户'}
-                        </span>
+                        <div className="min-w-0">
+                          <div className="truncate font-medium text-slate-900">
+                            {user.nickname || '匿名用户'}
+                          </div>
+                          <div className="text-sm text-slate-500">体力 {user.stamina}</div>
+                        </div>
                       </div>
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <span className="text-sm text-gray-500 font-mono text-xs">
-                        {user.openid}
+                    <td className="px-6 py-4 align-top">
+                      <code className="text-xs text-slate-500">{user.openid}</code>
+                    </td>
+                    <td className="px-6 py-4 align-top">
+                      <span className="inline-flex rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-700">
+                        {user.completedLevelCount} 关
                       </span>
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
-                        {user.points}
-                      </span>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td className="px-6 py-4 align-top text-sm text-slate-500">
                       {formatDate(user.createdAt)}
                     </td>
+                    <td className="px-6 py-4 text-right align-top">
+                      <Button size="sm" variant="outline" onClick={() => handleOpenDetail(user)}>
+                        配置通关关卡
+                      </Button>
+                    </td>
                   </tr>
                 ))}
-                {data?.users?.length === 0 && (
+                {data?.users.length === 0 && (
                   <tr>
-                    <td colSpan={4} className="px-6 py-12 text-center text-gray-500">
-                      暂无账户数据
+                    <td colSpan={5} className="px-6 py-16 text-center text-sm text-slate-500">
+                      暂无用户数据
                     </td>
                   </tr>
                 )}
@@ -190,11 +262,21 @@ export default function WxUsersPage() {
         </div>
       </div>
 
+      {isDialogOpen && selectedUser && isDetailLoading && !userDetails ? (
+        <div className="pointer-events-none fixed inset-0 z-40 flex items-center justify-center bg-black/20">
+          <div className="rounded-full bg-white p-4 shadow-lg">
+            <Spinner size="lg" />
+          </div>
+        </div>
+      ) : null}
+
       <WxUserDetailDialog
         open={isDialogOpen}
-        onOpenChange={handleDialogOpenChange}
+        onOpenChange={handleDialogChange}
         user={userDetails}
-        onDeleted={handleDeleted}
+        isSaving={syncProgressMutation.isPending || clearProgressMutation.isPending}
+        onSave={handleSaveProgress}
+        onClearAll={handleClearAll}
       />
     </div>
   )