2.1.8-beta1.7

vite-frontend/src/pages/tunnel.tsx

@@ -1,5 +1,3 @@
-import type { BatchOperationFailure } from "@/api/types";
-
 import { useState, useEffect, useMemo, useRef, useCallback } from "react";
 import toast from "react-hot-toast";
 import {
@@ -22,7 +20,6 @@ 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";
@@ -66,11 +63,7 @@ import {
 } from "@/pages/tunnel/form";
 import { useLocalStorageState } from "@/hooks/use-local-storage-state";
 import { loadStoredOrder, saveOrder } from "@/utils/order-storage";
-import {
-  buildBatchFailureMessage,
-  extractBatchFailures,
-  extractApiErrorMessage,
-} from "@/api/error-message";
+import { extractApiErrorMessage } from "@/api/error-message";
 
 interface ChainTunnel {
   nodeId: number;
@@ -129,20 +122,6 @@ 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[] => {
@@ -247,8 +226,6 @@ 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,
@@ -381,7 +358,7 @@ export default function TunnelPage() {
     });
     setErrors({});
     setModalOpen(true);
-  };
+  }; 
 
   // 删除隧道
   const handleDelete = (tunnel: Tunnel) => {
@@ -865,18 +842,6 @@ 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);
@@ -909,19 +874,9 @@ export default function TunnelPage() {
             return next;
           });
         } else {
-          const failures = extractBatchFailures(result);
-
-          if (failures.length > 0) {
-            openBatchResultModal(
-              "批量删除结果",
-              `成功 ${result.successCount} 项，失败 ${result.failCount} 项`,
-              failures,
-            );
-          } else {
-            toast.error(
-              `成功 ${result.successCount} 项，失败 ${result.failCount} 项`,
-            );
-          }
+          toast.error(
+            `成功 ${result.successCount} 项，失败 ${result.failCount} 项`,
+          );
           setBatchProgress({
             active: true,
             label: `部分完成：成功 ${result.successCount} 项，正在刷新列表...`,
@@ -960,22 +915,9 @@ export default function TunnelPage() {
         if (result.failCount === 0) {
           toast.success(`成功重新下发 ${result.successCount} 项`);
         } else {
-          const failures = extractBatchFailures(result);
-
-          if (failures.length > 0) {
-            openBatchResultModal(
-              "批量下发结果",
-              `成功 ${result.successCount} 项，失败 ${result.failCount} 项`,
-              failures,
-            );
-          } else {
-            toast.error(
-              buildBatchFailureMessage(
-                result,
-                `成功 ${result.successCount} 项，失败 ${result.failCount} 项`,
-              ),
-            );
-          }
+          toast.error(
+            `成功 ${result.successCount} 项，失败 ${result.failCount} 项`,
+          );
         }
         setSelectedIds(new Set());
         setSelectMode(false);
@@ -1262,21 +1204,7 @@ export default function TunnelPage() {
                                 </Chip>
                               </div>
                             </div>
-                            <div
-                              className="cursor-grab active:cursor-grabbing p-2 text-default-400 hover:text-default-600 transition-colors touch-manipulation opacity-100 sm:opacity-0 sm:group-hover:opacity-100"
-                              {...listeners}
-                              style={{ touchAction: "none" }}
-                              title="拖拽排序"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                className="w-4 h-4"
-                                fill="currentColor"
-                                viewBox="0 0 20 20"
-                              >
-                                <path d="M7 2a2 2 0 1 1 .001 4.001A2 2 0 0 1 7 2zm0 6a2 2 0 1 1 .001 4.001A2 2 0 0 1 7 8zm0 6a2 2 0 1 1 .001 4.001A2 2 0 0 1 7 14zm6-8a2 2 0 1 1-.001-4.001A2 2 0 0 1 13 6zm0 2a2 2 0 1 1 .001 4.001A2 2 0 0 1 13 8zm0 6a2 2 0 1 1 .001 4.001A2 2 0 0 1 13 14z" />
-                              </svg>
-                            </div>
+                            <div className="cursor-grab active:cursor-grabbing p-1 -mr-1 text-default-400 hover:text-default-600 transition-colors touch-manipulation flex-shrink-0" {...listeners} style={{ touchAction: "none" }} title="拖拽排序"><svg aria-hidden="true" className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M7 2a2 2 0 1 1 .001 4.001A2 2 0 0 1 7 2zm0 6a2 2 0 1 1 .001 4.001A2 2 0 0 1 7 8zm0 6a2 2 0 1 1 .001 4.001A2 2 0 0 1 7 14zm6-8a2 2 0 1 1-.001-4.001A2 2 0 0 1 13 6zm0 2a2 2 0 1 1 .001 4.001A2 2 0 0 1 13 8zm0 6a2 2 0 1 1 .001 4.001A2 2 0 0 1 13 14z" /></svg></div>
                           </div>
                         </CardHeader>
 
@@ -1415,6 +1343,7 @@ export default function TunnelPage() {
                                 </div>
                               )}
                             </div>
+
                           </div>
 
                           <div className="flex gap-1.5 mt-3">
@@ -1513,7 +1442,7 @@ export default function TunnelPage() {
       )}
 
       {/* 新增/编辑模态框 */}
-      <Modal
+      <Modal classNames={{ base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden" }}
         backdrop="blur"
         isOpen={modalOpen}
         placement="center"
@@ -2447,7 +2376,7 @@ export default function TunnelPage() {
       </Modal>
 
       {/* 删除确认模态框 */}
-      <Modal
+      <Modal classNames={{ base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden" }}
         backdrop="blur"
         isOpen={deleteModalOpen}
         placement="center"
@@ -2490,12 +2419,7 @@ export default function TunnelPage() {
       {/* 诊断结果模态框 */}
       <Modal
         backdrop="blur"
-        classNames={{
-          base: "rounded-2xl",
-          header: "rounded-t-2xl",
-          body: "rounded-none",
-          footer: "rounded-b-2xl",
-        }}
+        classNames={{ base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden" }}
         isOpen={diagnosisModalOpen}
         placement="center"
         scrollBehavior="inside"
@@ -3076,7 +3000,7 @@ export default function TunnelPage() {
         </ModalContent>
       </Modal>
 
-      <Modal
+      <Modal backdrop="blur" classNames={{ base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden" }}
         isOpen={batchDeleteModalOpen}
         onOpenChange={setBatchDeleteModalOpen}
       >
@@ -3106,22 +3030,6 @@ 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>
   );
 }