feat: 添加删除用户确认弹窗

frontend/react-shadcn/pc/src/pages/UserManagementPage.tsx

@@ -33,6 +33,9 @@ export function UserManagementPage() {
   }, [])
 
   const [error, setError] = useState<string | null>(null)
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
+  const [userToDelete, setUserToDelete] = useState<User | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
 
   const fetchUsers = async () => {
     try {
@@ -80,14 +83,24 @@ export function UserManagementPage() {
     }
   }
 
-  const handleDeleteUser = async (id: number) => {
+  const openDeleteConfirm = (user: User) => {
-    if (!confirm('确定要删除该用户吗？')) return
+    setUserToDelete(user)
+    setDeleteConfirmOpen(true)
+  }
+
+  const handleDeleteUser = async () => {
+    if (!userToDelete) return
     try {
-      await apiClient.deleteUser(id)
+      setIsDeleting(true)
+      await apiClient.deleteUser(userToDelete.id)
+      setDeleteConfirmOpen(false)
+      setUserToDelete(null)
       await fetchUsers()
     } catch (error) {
       console.error('Failed to delete user:', error)
       alert('删除用户失败')
+    } finally {
+      setIsDeleting(false)
     }
   }
 
@@ -211,7 +224,7 @@ export function UserManagementPage() {
                           <Button
                             variant="ghost"
                             size="sm"
-                            onClick={() => handleDeleteUser(user.id)}
+                            onClick={() => openDeleteConfirm(user)}
                             className="text-red-400 hover:text-red-300"
                           >
                             <Trash2 className="h-4 w-4" />
@@ -286,6 +299,45 @@ export function UserManagementPage() {
           />
         </div>
       </Modal>
+
+      {/* Delete Confirmation Modal */}
+      <Modal
+        isOpen={deleteConfirmOpen}
+        onClose={() => {
+          setDeleteConfirmOpen(false)
+          setUserToDelete(null)
+        }}
+        title="确认删除"
+        size="sm"
+        footer={
+          <>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setDeleteConfirmOpen(false)
+                setUserToDelete(null)
+              }}
+              disabled={isDeleting}
+            >
+              取消
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteUser}
+              disabled={isDeleting}
+            >
+              {isDeleting ? '删除中...' : '确认删除'}
+            </Button>
+          </>
+        }
+      >
+        <div className="py-4">
+          <p className="text-gray-300">
+            确定要删除用户 <span className="font-medium text-white">{userToDelete?.username}</span> 吗？
+          </p>
+          <p className="text-sm text-gray-500 mt-2">此操作不可恢复，请谨慎操作。</p>
+        </div>
+      </Modal>
     </div>
   )
 }