feat(batch): add failure details to batch operations with expandable result modal

- Backend: return per-item failure details (id, name, reason) for all batch operations
- Frontend: add BatchActionResultModal component to display failures
- Support delete/pause/resume/redeploy/change-tunnel for forwards and tunnels

vite-frontend/src/pages/tunnel.tsx

@@ -1,3 +1,5 @@
+import type { BatchOperationFailure } from "@/api/types";
+
 import { useState, useEffect, useMemo, useRef, useCallback } from "react";
 import toast from "react-hot-toast";
 import {
@@ -20,6 +22,7 @@ import { CSS } from "@dnd-kit/utilities";
 
 import { SearchBar } from "@/components/search-bar";
 import { AnimatedPage } from "@/components/animated-page";
+import { BatchActionResultModal } from "@/components/batch-action-result-modal";
 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { Input, Textarea } from "@/shadcn-bridge/heroui/input";
@@ -63,7 +66,11 @@ import {
 } from "@/pages/tunnel/form";
 import { useLocalStorageState } from "@/hooks/use-local-storage-state";
 import { loadStoredOrder, saveOrder } from "@/utils/order-storage";
-import { extractApiErrorMessage } from "@/api/error-message";
+import {
+  buildBatchFailureMessage,
+  extractBatchFailures,
+  extractApiErrorMessage,
+} from "@/api/error-message";
 
 interface ChainTunnel {
   nodeId: number;
@@ -122,6 +129,20 @@ interface BatchProgressState {
   percent: number;
 }
 
+interface BatchResultModalState {
+  failures: BatchOperationFailure[];
+  open: boolean;
+  summary: string;
+  title: string;
+}
+
+const EMPTY_BATCH_RESULT_MODAL_STATE: BatchResultModalState = {
+  failures: [],
+  open: false,
+  summary: "",
+  title: "",
+};
+
 const TUNNEL_ORDER_KEY = "tunnel-order";
 
 const mapTunnelApiItems = (items: any[]): Tunnel[] => {
@@ -226,6 +247,8 @@ export default function TunnelPage() {
   const [selectMode, setSelectMode] = useState(false);
   const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
   const [batchDeleteModalOpen, setBatchDeleteModalOpen] = useState(false);
+  const [batchResultModal, setBatchResultModal] =
+    useState<BatchResultModalState>(EMPTY_BATCH_RESULT_MODAL_STATE);
   const [batchLoading, setBatchLoading] = useState(false);
   const [batchProgress, setBatchProgress] = useState<BatchProgressState>({
     active: false,
@@ -842,6 +865,18 @@ export default function TunnelPage() {
     setSelectedIds(new Set());
   };
 
+  const openBatchResultModal = useCallback(
+    (title: string, summary: string, failures: BatchOperationFailure[]) => {
+      setBatchResultModal({
+        failures,
+        open: true,
+        summary,
+        title,
+      });
+    },
+    [],
+  );
+
   const handleBatchDelete = async () => {
     if (selectedIds.size === 0) return;
     setBatchLoading(true);
@@ -874,9 +909,17 @@ export default function TunnelPage() {
             return next;
           });
         } else {
-          toast.error(
-            `成功 ${result.successCount} 项，失败 ${result.failCount} 项`,
-          );
+          const failures = extractBatchFailures(result);
+
+          if (failures.length > 0) {
+            openBatchResultModal(
+              "批量删除结果",
+              `成功 ${result.successCount} 项，失败 ${result.failCount} 项`,
+              failures,
+            );
+          } else {
+            toast.error(`成功 ${result.successCount} 项，失败 ${result.failCount} 项`);
+          }
           setBatchProgress({
             active: true,
             label: `部分完成：成功 ${result.successCount} 项，正在刷新列表...`,
@@ -915,9 +958,22 @@ export default function TunnelPage() {
         if (result.failCount === 0) {
           toast.success(`成功重新下发 ${result.successCount} 项`);
         } else {
-          toast.error(
-            `成功 ${result.successCount} 项，失败 ${result.failCount} 项`,
-          );
+          const failures = extractBatchFailures(result);
+
+          if (failures.length > 0) {
+            openBatchResultModal(
+              "批量下发结果",
+              `成功 ${result.successCount} 项，失败 ${result.failCount} 项`,
+              failures,
+            );
+          } else {
+            toast.error(
+              buildBatchFailureMessage(
+                result,
+                `成功 ${result.successCount} 项，失败 ${result.failCount} 项`,
+              ),
+            );
+          }
         }
         setSelectedIds(new Set());
         setSelectMode(false);
@@ -3049,6 +3105,22 @@ export default function TunnelPage() {
           )}
         </ModalContent>
       </Modal>
+
+      <BatchActionResultModal
+        failures={batchResultModal.failures}
+        isOpen={batchResultModal.open}
+        summary={batchResultModal.summary}
+        title={batchResultModal.title}
+        onOpenChange={(open) => {
+          if (open) {
+            setBatchResultModal((prev) => ({ ...prev, open: true }));
+
+            return;
+          }
+
+          setBatchResultModal(EMPTY_BATCH_RESULT_MODAL_STATE);
+        }}
+      />
     </AnimatedPage>
   );
 }