From 739e1d8177675451d5c76451d899c554da12b550 Mon Sep 17 00:00:00 2001
From: abearxiong <xiongxiao@xiongxiao.me>
Date: Sat, 7 Feb 2026 02:47:29 +0800
Subject: [PATCH] feat: add confirmation popover for user deletion in TableList
 component

---
 src/app/users/page.tsx | 62 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 52 insertions(+), 10 deletions(-)

diff --git a/src/app/users/page.tsx b/src/app/users/page.tsx
index d510d5b..5267ca0 100644
--- a/src/app/users/page.tsx
+++ b/src/app/users/page.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useUserStore } from './store/user';
 import { useAdminStore } from './store/admin';
@@ -19,12 +19,25 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
 import { Plus, Pencil, Trash2 } from 'lucide-react';
 import { LayoutMain } from '@/modules/layout';
 
 const TableList = () => {
-  const { list, setShowEdit, setFormData, } = useUserStore();
-  const { deleteUser } = useAdminStore()
+  const { list, setShowEdit, setFormData, getList } = useUserStore();
+  const { deleteUser } = useAdminStore();
+  const [openPopover, setOpenPopover] = React.useState<string | null>(null);
+
+  const handleDelete = async (id: string) => {
+    await deleteUser(id);
+    setOpenPopover(null);
+    getList();
+  };
+
   return (
     <div className="rounded-md border">
       <Table>
@@ -53,13 +66,42 @@ const TableList = () => {
                   <Pencil className="w-4 h-4 mr-1" />
                   编辑
                 </Button>
-                <Button
-                  variant="destructive"
-                  size="sm"
-                  onClick={() => deleteUser(user.id)}>
-                  <Trash2 className="w-4 h-4 mr-1" />
-                  删除
-                </Button>
+                <Popover
+                  open={openPopover === user.id}
+                  onOpenChange={(open) => setOpenPopover(open ? user.id : null)}
+                >
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                    >
+                      <Trash2 className="w-4 h-4 mr-1" />
+                      删除
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-4" align="start">
+                    <div className="space-y-3">
+                      <p className="text-sm font-medium">确认删除用户 "{user.username}"?</p>
+                      <p className="text-xs text-muted-foreground">此操作无法撤销。</p>
+                      <div className="flex gap-2 justify-end">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setOpenPopover(null)}
+                        >
+                          取消
+                        </Button>
+                        <Button
+                          variant="destructive"
+                          size="sm"
+                          onClick={() => handleDelete(user.id)}
+                        >
+                          确认删除
+                        </Button>
+                      </div>
+                    </div>
+                  </PopoverContent>
+                </Popover>
               </TableCell>
             </TableRow>
           ))}