diff --git a/frontend/app/[locale]/resource-manage/components/resources/AgentList.tsx b/frontend/app/[locale]/resource-manage/components/resources/AgentList.tsx
index a3d93e13a..c99070006 100644
--- a/frontend/app/[locale]/resource-manage/components/resources/AgentList.tsx
+++ b/frontend/app/[locale]/resource-manage/components/resources/AgentList.tsx
@@ -7,7 +7,6 @@ import {
   Button,
   App,
   Tooltip,
-  Popconfirm,
   Typography,
   Tag,
   Modal,
@@ -24,6 +23,7 @@ import {
   Clock,
   Eye,
 } from "lucide-react";
+import { useConfirmModal } from "@/hooks/useConfirmModal";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { useAgentList } from "@/hooks/agent/useAgentList";
@@ -63,6 +63,7 @@ type AgentListRow = Pick<
 };
 
 export default function AgentList({ tenantId }: { tenantId: string | null }) {
+  const { confirm } = useConfirmModal();
   const { t } = useTranslation("common");
   const { message } = App.useApp();
   const [form] = Form.useForm();
@@ -506,24 +507,21 @@ export default function AgentList({ tenantId }: { tenantId: string | null }) {
               size="small"
             />
           </Tooltip>
-          <Popconfirm
-            title={t("businessLogic.config.modal.deleteTitle")}
-            description={t("businessLogic.config.modal.deleteContent", {
-              name: record.display_name,
-            })}
-            onConfirm={() => handleDelete(record)}
-            okText={t("common.confirm")}
-            cancelText={t("common.cancel")}
-          >
-            <Tooltip title={t("common.delete")}>
-              <Button
-                type="text"
-                danger
-                icon={<Trash2 className="h-4 w-4" />}
-                size="small"
-              />
-            </Tooltip>
-          </Popconfirm>
+          <Tooltip title={t("common.delete")}>
+            <Button
+              type="text"
+              danger
+              icon={<Trash2 className="h-4 w-4" />}
+              size="small"
+              onClick={() => confirm({
+                title: t("businessLogic.config.modal.deleteTitle"),
+                content: t("businessLogic.config.modal.deleteContent", { name: record.display_name }),
+                okText: t("common.confirm"),
+                cancelText: t("common.cancel"),
+                onOk: () => handleDelete(record),
+              })}
+            />
+          </Tooltip>
         </div>
       ),
     },
diff --git a/frontend/app/[locale]/resource-manage/components/resources/ApiKeyList.tsx b/frontend/app/[locale]/resource-manage/components/resources/ApiKeyList.tsx
index 4f163cd2f..1d5a2c056 100644
--- a/frontend/app/[locale]/resource-manage/components/resources/ApiKeyList.tsx
+++ b/frontend/app/[locale]/resource-manage/components/resources/ApiKeyList.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useMemo, useState } from "react";
-import { App, Button, Popconfirm, Table, Tag } from "antd";
+import { App, Button, Table, Tag } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import { RefreshCw, Trash2 } from "lucide-react";
 import { useTranslation } from "react-i18next";
@@ -155,35 +155,36 @@ export default function ApiKeyList({ tenantId }: { tenantId: string | null }) {
         width: 100,
         render: (_, record) => (
           <div className="flex items-center gap-1">
-            <Popconfirm
-              title={t("tenantResources.apiKeys.confirmRefresh")}
-              description={t("tenantResources.apiKeys.affectsAll")}
-              onConfirm={() => refreshKey(record)}
-              okText={t("common.confirm")}
-              cancelText={t("common.cancel")}
-            >
-              <Button
-                type="text"
-                size="small"
-                loading={pendingUserId === record.user_id}
-                icon={<RefreshCw className="h-4 w-4" />}
-              />
-            </Popconfirm>
-            <Popconfirm
-              title={t("tenantResources.apiKeys.confirmRevoke")}
-              description={t("tenantResources.apiKeys.affectsAll")}
-              onConfirm={() => revokeKey(record)}
-              okText={t("common.confirm")}
-              cancelText={t("common.cancel")}
-            >
-              <Button
-                type="text"
-                danger
-                size="small"
-                disabled={pendingUserId === record.user_id}
-                icon={<Trash2 className="h-4 w-4" />}
-              />
-            </Popconfirm>
+            <Button
+              type="text"
+              size="small"
+              loading={pendingUserId === record.user_id}
+              icon={<RefreshCw className="h-4 w-4" />}
+              onClick={() => modal.confirm({
+                title: t("tenantResources.apiKeys.confirmRefresh"),
+                content: t("tenantResources.apiKeys.affectsAll"),
+                centered: true,
+                okText: t("common.confirm"),
+                cancelText: t("common.cancel"),
+                onOk: () => refreshKey(record),
+              })}
+            />
+            <Button
+              type="text"
+              danger
+              size="small"
+              disabled={pendingUserId === record.user_id}
+              icon={<Trash2 className="h-4 w-4" />}
+              onClick={() => modal.confirm({
+                title: t("tenantResources.apiKeys.confirmRevoke"),
+                content: t("tenantResources.apiKeys.affectsAll"),
+                centered: true,
+                okText: t("common.confirm"),
+                cancelText: t("common.cancel"),
+                okButtonProps: { danger: true },
+                onOk: () => revokeKey(record),
+              })}
+            />
           </div>
         ),
       },
diff --git a/frontend/app/[locale]/resource-manage/components/resources/GroupList.tsx b/frontend/app/[locale]/resource-manage/components/resources/GroupList.tsx
index 6b219142e..29c100bd6 100644
--- a/frontend/app/[locale]/resource-manage/components/resources/GroupList.tsx
+++ b/frontend/app/[locale]/resource-manage/components/resources/GroupList.tsx
@@ -9,7 +9,6 @@ import {
   Modal,
   Form,
   Input,
-  Popconfirm,
   message,
   Select,
   Tooltip,
@@ -18,6 +17,7 @@ import { Edit, Trash2 } from "lucide-react";
 import { ColumnsType } from "antd/es/table";
 import { useGroupList } from "@/hooks/group/useGroupList";
 import { useUserList } from "@/hooks/user/useUserList";
+import { useConfirmModal } from "@/hooks/useConfirmModal";
 import {
   createGroup,
   updateGroup,
@@ -33,6 +33,7 @@ import {
 import { type User } from "@/services/userService";
 
 export default function GroupList({ tenantId }: { tenantId: string | null }) {
+  const { confirm } = useConfirmModal();
   const { t } = useTranslation("common");
   const queryClient = useQueryClient();
 
@@ -272,23 +273,21 @@ export default function GroupList({ tenantId }: { tenantId: string | null }) {
                 size="small"
               />
             </Tooltip>
-            <Popconfirm
-              title={t("tenantResources.groups.confirmDelete", {
-                name: record.group_name,
-              })}
-              onConfirm={() => handleDelete(record.group_id)}
-              okText={t("common.confirm")}
-              cancelText={t("common.cancel")}
-            >
-              <Tooltip title={t("tenantResources.groups.deleteGroup")}>
-                <Button
-                  type="text"
-                  danger
-                  icon={<Trash2 className="h-4 w-4" />}
-                  size="small"
-                />
-              </Tooltip>
-            </Popconfirm>
+            <Tooltip title={t("tenantResources.groups.deleteGroup")}>
+              <Button
+                type="text"
+                danger
+                icon={<Trash2 className="h-4 w-4" />}
+                size="small"
+                onClick={() => confirm({
+                  title: t("tenantResources.groups.confirmDelete", { name: record.group_name }),
+                  content: "",
+                  okText: t("common.confirm"),
+                  cancelText: t("common.cancel"),
+                  onOk: () => handleDelete(record.group_id),
+                })}
+              />
+            </Tooltip>
           </div>
         ),
       },
diff --git a/frontend/app/[locale]/resource-manage/components/resources/InvitationList.tsx b/frontend/app/[locale]/resource-manage/components/resources/InvitationList.tsx
index e880efcd0..cb25a95af 100644
--- a/frontend/app/[locale]/resource-manage/components/resources/InvitationList.tsx
+++ b/frontend/app/[locale]/resource-manage/components/resources/InvitationList.tsx
@@ -10,7 +10,6 @@ import {
   Form,
   Input,
   Select,
-  Popconfirm,
   message,
   Tag,
   Pagination,
@@ -23,6 +22,7 @@ import { copyToClipboard } from "@/lib/clipboard";
 import { ColumnsType } from "antd/es/table";
 import { useInvitationList } from "@/hooks/invitation/useInvitationList";
 import { useGroupList } from "@/hooks/group/useGroupList";
+import { useConfirmModal } from "@/hooks/useConfirmModal";
 import { getTenantDefaultGroupId } from "@/services/groupService";
 import {
   createInvitation,
@@ -60,6 +60,7 @@ export default function InvitationList({
   tenantId: string | null;
   refreshKey?: number;
 }) {
+  const { confirm } = useConfirmModal();
   const { t } = useTranslation("common");
   const { user } = useAuthorizationContext();
   const userRole = user?.role;
@@ -408,24 +409,21 @@ export default function InvitationList({
                 size="small"
               />
             </Tooltip>
-            <Popconfirm
-              title={t("tenantResources.invitation.confirmDeleteInvitation", {
-                code: record.invitation_code,
-              })}
-              description={t("common.cannotBeUndone")}
-              onConfirm={() => handleDelete(record.invitation_code)}
-              okText={t("common.confirm")}
-              cancelText={t("common.cancel")}
-            >
-              <Tooltip title={t("tenantResources.invitation.deleteInvitation")}>
-                <Button
-                  type="text"
-                  danger
-                  icon={<Trash2 className="h-4 w-4" />}
-                  size="small"
-                />
-              </Tooltip>
-            </Popconfirm>
+            <Tooltip title={t("tenantResources.invitation.deleteInvitation")}>
+              <Button
+                type="text"
+                danger
+                icon={<Trash2 className="h-4 w-4" />}
+                size="small"
+                onClick={() => confirm({
+                  title: t("tenantResources.invitation.confirmDeleteInvitation", { code: record.invitation_code }),
+                  content: t("common.cannotBeUndone"),
+                  okText: t("common.confirm"),
+                  cancelText: t("common.cancel"),
+                  onOk: () => handleDelete(record.invitation_code),
+                })}
+              />
+            </Tooltip>
           </div>
         ),
       },
diff --git a/frontend/app/[locale]/resource-manage/components/resources/KnowledgeList.tsx b/frontend/app/[locale]/resource-manage/components/resources/KnowledgeList.tsx
index 0586e4ba1..0f5b6d145 100644
--- a/frontend/app/[locale]/resource-manage/components/resources/KnowledgeList.tsx
+++ b/frontend/app/[locale]/resource-manage/components/resources/KnowledgeList.tsx
@@ -4,7 +4,6 @@ import React, { useMemo, useState, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Table,
-  Popconfirm,
   message,
   Button,
   Input,
@@ -28,6 +27,7 @@ import { MarkdownRenderer } from "@/components/common/markdownRenderer";
 import { useKnowledgeList } from "@/hooks/knowledge/useKnowledgeList";
 import { useGroupList } from "@/hooks/group/useGroupList";
 import { useAuthorization } from "@/hooks/auth/useAuthorization";
+import { useConfirmModal } from "@/hooks/useConfirmModal";
 import knowledgeBaseService from "@/services/knowledgeBaseService";
 import quotaService from "@/services/quotaService";
 import { type KnowledgeBase } from "@/types/knowledgeBase";
@@ -62,6 +62,7 @@ export default function KnowledgeList({
 }: {
   tenantId: string | null;
 }) {
+  const { confirm } = useConfirmModal();
   const { t } = useTranslation("common");
   const [kbView, setKbView] = useState<"shared" | "personal">("shared");
   const { data, isLoading, refetch } = useKnowledgeList(tenantId);
@@ -531,22 +532,23 @@ export default function KnowledgeList({
                 size="small"
               />
             </Tooltip>
-            <Popconfirm
-              title={t("knowledgeBase.modal.deleteConfirm.title")}
-              description={t("common.cannotBeUndone")}
-              onConfirm={() => handleDelete(record.id)}
-              okText={t("common.confirm")}
-              cancelText={t("common.cancel")}
-            >
-              <Tooltip title={t("common.delete")}>
-                <Button
-                  type="text"
-                  danger
-                  icon={<Trash2 className="h-4 w-4" />}
-                  size="small"
-                />
-              </Tooltip>
-            </Popconfirm>
+            <Tooltip title={t("common.delete")}>
+              <Button
+                type="text"
+                danger
+                icon={<Trash2 className="h-4 w-4" />}
+                size="small"
+                onClick={() =>
+                  confirm({
+                    title: t("knowledgeBase.modal.deleteConfirm.title"),
+                    content: t("common.cannotBeUndone"),
+                    okText: t("common.confirm"),
+                    cancelText: t("common.cancel"),
+                    onOk: () => handleDelete(record.id),
+                  })
+                }
+              />
+            </Tooltip>
           </div>
         );
       },
diff --git a/frontend/app/[locale]/resource-manage/components/resources/McpList.tsx b/frontend/app/[locale]/resource-manage/components/resources/McpList.tsx
index 9084d5aa5..c8cd32cf5 100644
--- a/frontend/app/[locale]/resource-manage/components/resources/McpList.tsx
+++ b/frontend/app/[locale]/resource-manage/components/resources/McpList.tsx
@@ -15,7 +15,6 @@ import {
   App,
   Upload,
   Tabs,
-  Popconfirm,
   Tag,
 } from "antd";
 import {
@@ -603,23 +602,10 @@ export default function McpList({ tenantId }: { tenantId: string | null }) {
                 disabled={actionsLocked}
               />
             </Tooltip>
-            <Popconfirm
-              title={t("mcpConfig.delete.confirmTitle")}
-              description={t("mcpConfig.delete.confirmContent", { name: record.service_name })}
-              onConfirm={() => onDeleteServer(record)}
-              okText={t("common.confirm")}
-              cancelText={t("common.cancel")}
-            >
-              <Tooltip title={t("mcpConfig.serverList.button.delete")}>
-                <Button
-                  type="text"
-                  danger
-                  icon={<Trash2 className="h-4 w-4" />}
-                  size="small"
-                  disabled={actionsLocked}
-                />
-              </Tooltip>
-            </Popconfirm>
+            <Tooltip title={t("mcpConfig.serverList.button.delete")}>
+              <Button type="text" danger icon={<Trash2 className="h-4 w-4" />} size="small" disabled={actionsLocked}
+                onClick={() => confirm({ title: t("mcpConfig.delete.confirmTitle"), content: t("mcpConfig.delete.confirmContent", { name: record.service_name }), onOk: () => onDeleteServer(record) })} />
+            </Tooltip>
           </div>
         );
       },
@@ -697,23 +683,10 @@ export default function McpList({ tenantId }: { tenantId: string | null }) {
               disabled={updatingTools}
             />
           </Tooltip>
-          <Popconfirm
-            title={t("mcpConfig.deleteContainer.confirmTitle")}
-            description={t("mcpConfig.deleteContainer.confirmContent", { name: record.name || record.container_id })}
-            onConfirm={() => onDeleteContainer(record)}
-            okText={t("common.confirm")}
-            cancelText={t("common.cancel")}
-          >
-            <Tooltip title={t("mcpConfig.containerList.button.delete")}>
-              <Button
-                type="text"
-                danger
-                icon={<Trash2 className="h-4 w-4" />}
-                size="small"
-                disabled={actionsLocked}
-              />
-            </Tooltip>
-          </Popconfirm>
+          <Tooltip title={t("mcpConfig.containerList.button.delete")}>
+            <Button type="text" danger icon={<Trash2 className="h-4 w-4" />} size="small" disabled={actionsLocked}
+              onClick={() => confirm({ title: t("mcpConfig.deleteContainer.confirmTitle"), content: t("mcpConfig.deleteContainer.confirmContent", { name: record.name || record.container_id }), onOk: () => onDeleteContainer(record) })} />
+          </Tooltip>
         </div>
       ),
     },
@@ -742,23 +715,10 @@ export default function McpList({ tenantId }: { tenantId: string | null }) {
       width: "20%",
       render: (_: any, record: any) => (
         <div className="flex items-center space-x-2">
-          <Popconfirm
-            title={t("mcpConfig.delete.confirmTitle")}
-            description={t("mcpConfig.delete.confirmContent", { name: record.mcp_service_name })}
-            onConfirm={() => onDeleteOpenapiService(record)}
-            okText={t("common.confirm")}
-            cancelText={t("common.cancel")}
-          >
-            <Tooltip title={t("mcpConfig.serverList.button.delete")}>
-              <Button
-                type="text"
-                danger
-                icon={<Trash2 className="h-4 w-4" />}
-                size="small"
-                disabled={actionsLocked}
-              />
-            </Tooltip>
-          </Popconfirm>
+          <Tooltip title={t("mcpConfig.serverList.button.delete")}>
+            <Button type="text" danger icon={<Trash2 className="h-4 w-4" />} size="small" disabled={actionsLocked}
+              onClick={() => confirm({ title: t("mcpConfig.delete.confirmTitle"), content: t("mcpConfig.delete.confirmContent", { name: record.mcp_service_name }), onOk: () => onDeleteOpenapiService(record) })} />
+          </Tooltip>
         </div>
       ),
     },
diff --git a/frontend/app/[locale]/resource-manage/components/resources/ModelList.tsx b/frontend/app/[locale]/resource-manage/components/resources/ModelList.tsx
index 31a7ff37e..5b25675ec 100644
--- a/frontend/app/[locale]/resource-manage/components/resources/ModelList.tsx
+++ b/frontend/app/[locale]/resource-manage/components/resources/ModelList.tsx
@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 import {
   Table,
   Button,
-  Popconfirm,
   message,
   Tag,
   Segmented,
@@ -32,6 +31,7 @@ import { modelService } from "@/services/modelService";
 import { type ModelOption, type ModelType } from "@/types/modelConfig";
 import type { ModelMonitoringItem } from "@/types/monitoring";
 import { MODEL_TYPES } from "@/const/modelConfig";
+import { useConfirmModal } from "@/hooks/useConfirmModal";
 import { ModelAddDialog } from "../../../models/components/model/ModelAddDialog";
 import { ModelEditDialog } from "../../../models/components/model/ModelEditDialog";
 import ModelCapacityCoverageWidget from "./ModelCapacityCoverageWidget";
@@ -46,6 +46,7 @@ interface UnifiedModelRow extends ModelOption {
 
 export default function ModelList({ tenantId }: { tenantId: string | null }) {
   const { t } = useTranslation("common");
+  const { confirm } = useConfirmModal();
 
   const { bareModelIds } = useCapacityCoverage();
 
@@ -474,22 +475,23 @@ export default function ModelList({ tenantId }: { tenantId: string | null }) {
               size="small"
             />
           </Tooltip>
-          <Popconfirm
-            title={t("tenantResources.models.confirmDelete")}
-            description={t("common.cannotBeUndone")}
-            onConfirm={() => handleDelete(record.displayName, record.source)}
-            okText={t("common.confirm")}
-            cancelText={t("common.cancel")}
-          >
-            <Tooltip title={t("tenantResources.models.deleteModel")}>
-              <Button
-                type="text"
-                danger
-                icon={<Trash2 className="h-4 w-4" />}
-                size="small"
-              />
-            </Tooltip>
-          </Popconfirm>
+          <Tooltip title={t("tenantResources.models.deleteModel")}>
+            <Button
+              type="text"
+              danger
+              icon={<Trash2 className="h-4 w-4" />}
+              size="small"
+              onClick={() =>
+                confirm({
+                  title: t("tenantResources.models.confirmDelete"),
+                  content: t("common.cannotBeUndone"),
+                  okText: t("common.confirm"),
+                  cancelText: t("common.cancel"),
+                  onOk: () => handleDelete(record.displayName, record.source),
+                })
+              }
+            />
+          </Tooltip>
         </div>
       ),
     },
diff --git a/frontend/app/[locale]/resource-manage/components/resources/UserList.tsx b/frontend/app/[locale]/resource-manage/components/resources/UserList.tsx
index 3a8283bec..e7dab5f2d 100644
--- a/frontend/app/[locale]/resource-manage/components/resources/UserList.tsx
+++ b/frontend/app/[locale]/resource-manage/components/resources/UserList.tsx
@@ -9,7 +9,6 @@ import {
   Form,
   Input,
   Select,
-  Popconfirm,
   message,
   Tag,
   Tooltip,
@@ -18,6 +17,7 @@ import { Edit, Trash2 } from "lucide-react";
 import { ColumnsType } from "antd/es/table";
 import { useUserList } from "@/hooks/user/useUserList";
 import { useGroupList } from "@/hooks/group/useGroupList";
+import { useConfirmModal } from "@/hooks/useConfirmModal";
 import {
   updateUser,
   deleteUser,
@@ -32,13 +32,8 @@ import {
   type CreateGroupRequest,
 } from "@/services/groupService";
 
-export default function UserList({
-  tenantId,
-  refreshKey,
-}: {
-  tenantId: string | null;
-  refreshKey?: number;
-}) {
+export default function UserList({ tenantId, refreshKey }: { tenantId: string | null; refreshKey?: number }) {
+  const { confirm } = useConfirmModal();
   const { t } = useTranslation("common");
 
   // Pagination state
@@ -260,23 +255,25 @@ export default function UserList({
                 size="small"
               />
             </Tooltip>
-            <Popconfirm
-              title={t("tenantResources.users.confirmDelete", {
-                name: record.username,
-              })}
-              onConfirm={() => handleDelete(record.id)}
-              okText={t("common.confirm")}
-              cancelText={t("common.cancel")}
-            >
-              <Tooltip title={t("tenantResources.users.deleteUser")}>
-                <Button
-                  type="text"
-                  danger
-                  icon={<Trash2 className="h-4 w-4" />}
-                  size="small"
-                />
-              </Tooltip>
-            </Popconfirm>
+            <Tooltip title={t("tenantResources.users.deleteUser")}>
+              <Button
+                type="text"
+                danger
+                icon={<Trash2 className="h-4 w-4" />}
+                size="small"
+                onClick={() =>
+                  confirm({
+                    title: t("tenantResources.users.confirmDelete", {
+                      name: record.username,
+                    }),
+                    content: "",
+                    okText: t("common.confirm"),
+                    cancelText: t("common.cancel"),
+                    onOk: () => handleDelete(record.id),
+                  })
+                }
+              />
+            </Tooltip>
           </div>
         ),
         width: "30%",