;
}) {
- const [renameOpen, setRenameOpen] = React.useState(false);
- const [name, setName] = React.useState(task.name ?? "");
- const [saving, setSaving] = React.useState(false);
const [pinning, setPinning] = React.useState(false);
const pinned = taskIsPinned(task);
- React.useEffect(() => {
- if (renameOpen) setName(task.name ?? "");
- }, [renameOpen, task.name]);
-
- async function saveName() {
- const next = name.trim();
- if (!next) return;
- if (next === task.name?.trim()) {
- setRenameOpen(false);
- return;
- }
- setSaving(true);
- try {
- await onRename(task, next);
- setRenameOpen(false);
- } catch {
- // The parent already reports the API error; keep the dialog open for retry.
- } finally {
- setSaving(false);
- }
- }
-
return (
- <>
-
-
-
-
+
);
}
diff --git a/web/src/app/(main)/function/traffic/page.tsx b/web/src/app/(main)/function/traffic/page.tsx
index 9ccf7d0..b7623ff 100644
--- a/web/src/app/(main)/function/traffic/page.tsx
+++ b/web/src/app/(main)/function/traffic/page.tsx
@@ -3,14 +3,18 @@
import * as React from "react";
import {
+ CheckIcon,
ChevronLeftIcon,
ChevronRightIcon,
+ CopyIcon,
ListChecksIcon,
Loader2Icon,
RadioTowerIcon,
SearchIcon,
Trash2Icon,
+ WrapTextIcon,
} from "lucide-react";
+import { toast } from "sonner";
import {
AlertDialog,
@@ -32,6 +36,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { api } from "@/lib/api";
import type { TrafficDetail, TrafficExchange, TrafficHost, TrafficResp } from "@/lib/types";
import { cn } from "@/lib/utils";
@@ -163,37 +168,122 @@ function MarkupBody({ body }: { body: string }) {
return parts;
}
-function HighlightedBody({ body }: { body: string }) {
+type BodyFormat = "json" | "markup" | "plain";
+
+function detectBodyFormat(body: string): BodyFormat {
const trimmed = body.trimStart();
- if (trimmed.startsWith("{") || trimmed.startsWith("[")) return ;
- if (trimmed.startsWith("<")) return ;
+ if (trimmed.startsWith("{") || trimmed.startsWith("[")) return "json";
+ if (trimmed.startsWith("<")) return "markup";
+ return "plain";
+}
+
+function HighlightedBody({ body, format }: { body: string; format: BodyFormat }) {
+ if (format === "json") return ;
+ if (format === "markup") return ;
return body;
}
function HttpCodeBlock({ raw }: { raw: string }) {
+ const [wrapLines, setWrapLines] = React.useState(true);
+ const [copied, setCopied] = React.useState(false);
const value = raw || "（空）";
const lines = value.replaceAll("\r\n", "\n").split("\n");
const separator = lines.indexOf("");
- const headerLines = separator >= 0 ? lines.slice(0, separator) : lines;
const body = separator >= 0 ? lines.slice(separator + 1).join("\n") : "";
+ const bodyFormat = detectBodyFormat(body);
+
+ React.useEffect(() => {
+ if (!copied) return;
+ const timer = window.setTimeout(() => setCopied(false), 1500);
+ return () => window.clearTimeout(timer);
+ }, [copied]);
+
+ const copyPacket = async () => {
+ try {
+ await navigator.clipboard.writeText(value);
+ setCopied(true);
+ } catch {
+ toast.error("复制失败，请使用 Ctrl/Cmd+A 后复制");
+ }
+ };
+
+ const renderLine = (line: string, index: number) => {
+ if (index === 0) return ;
+ if (separator < 0 || index < separator) return ;
+ if (index === separator) return null;
+ return ;
+ };
return (
-
-
- {headerLines.map((line, index) => (
-
- {index === 0 ? : }
- {index < headerLines.length - 1 ? "\n" : null}
-
+
+
+
+
+
+
+ {wrapLines ? "关闭自动换行" : "开启自动换行"}
+
+
+
+
+
+ {copied ? "已复制" : "复制报文"}
+
+
+ {/* biome-ignore lint/a11y/useSemanticElements: textarea cannot preserve line numbers and syntax-highlighting markup. */}
+
{
+ if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== "a") return;
+ event.preventDefault();
+ const selection = window.getSelection();
+ if (!selection) return;
+ const range = document.createRange();
+ range.selectNodeContents(event.currentTarget);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ }}
+ >
+ {lines.map((line, index) => (
+
+
+ {renderLine(line, index)}
+
+
))}
- {separator >= 0 && (
- <>
- {"\n\n"}
-
-
- )}
-
-
+
+