s

d2ypp2/web-console/components/live-product/LiveProcessLiveLogCard.tsx

@@ -51,6 +51,7 @@ type Props = {
   keySuffixUi: string;
   showKeyRow?: boolean;
   pollMs?: number;
+  refreshToken?: number;
 };
 
 function businessLine(t: TFn, raw: string | undefined, note: string | undefined): string {
@@ -75,6 +76,7 @@ export function LiveProcessLiveLogCard({
   keySuffixUi,
   showKeyRow = true,
   pollMs = 1000,
+  refreshToken = 0,
 }: Props) {
   const [processStatus, setProcessStatus] = useState<string>("");
   const [recentLog, setRecentLog] = useState("");
@@ -91,6 +93,8 @@ export function LiveProcessLiveLogCard({
   const prevOnlineRef = useRef(false);
   const pullInFlightRef = useRef(false);
   const pullQueuedRef = useRef(false);
+  const currentProcRef = useRef(currentProc);
+  const requestSeqRef = useRef(0);
 
   const douyinHints = extractDouyinRoomHints(urlListText);
   const onlineNow = /^(online|running)$/i.test(processStatus);
@@ -100,16 +104,19 @@ export function LiveProcessLiveLogCard({
   const primaryUrl = primaryRoomId ? `https://live.douyin.com/${primaryRoomId}` : fallbackUrl || null;
 
   const pull = useCallback(async () => {
-    if (!currentProc) return;
+    const targetProc = currentProcRef.current.trim();
+    if (!targetProc) return;
     if (pullInFlightRef.current) {
       pullQueuedRef.current = true;
       return;
     }
     pullInFlightRef.current = true;
+    const requestId = ++requestSeqRef.current;
     try {
       const data = await fetchJson<StatusPayload>(
-        `/status?process=${encodeURIComponent(currentProc)}`,
+        `/status?process=${encodeURIComponent(targetProc)}`,
       );
+      if (requestId !== requestSeqRef.current || targetProc !== currentProcRef.current.trim()) return;
       const ps = data.process_status || "unknown";
       setProcessStatus(ps);
       setRecentLog(data.recent_log || "");
@@ -127,6 +134,7 @@ export function LiveProcessLiveLogCard({
       }
       prevOnlineRef.current = online;
     } catch {
+      if (requestId !== requestSeqRef.current || targetProc !== currentProcRef.current.trim()) return;
       setProcessStatus("error");
       setBusinessStatus("error");
       setBusinessNote("");
@@ -139,11 +147,40 @@ export function LiveProcessLiveLogCard({
         window.setTimeout(() => void pull(), 0);
       }
     }
-  }, [currentProc, fetchJson]);
+  }, [fetchJson]);
 
   useEffect(() => {
+    currentProcRef.current = currentProc;
+    requestSeqRef.current += 1;
+    pullQueuedRef.current = false;
+    if (!currentProc) {
+      setProcessStatus("");
+      setRecentLog("");
+      setRecentError("");
+      setBusinessStatus("");
+      setBusinessNote("");
+      setFfmpegPids([]);
+      setLogAgeSeconds(null);
+      setLiveSince(null);
+      prevOnlineRef.current = false;
+      return;
+    }
+    setProcessStatus("");
+    setRecentLog("");
+    setRecentError("");
+    setBusinessStatus("");
+    setBusinessNote("");
+    setFfmpegPids([]);
+    setLogAgeSeconds(null);
+    setLiveSince(null);
+    prevOnlineRef.current = false;
     void pull();
-  }, [pull]);
+  }, [currentProc, pull]);
+
+  useEffect(() => {
+    if (!currentProc) return;
+    void pull();
+  }, [currentProc, pull, refreshToken]);
 
   useEffect(() => {
     if (paused || !currentProc) return;
@@ -190,6 +227,9 @@ export function LiveProcessLiveLogCard({
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div className="flex items-center gap-2">
           <h3 className="text-sm font-semibold text-white">{t("当前直播日志", "Live process log")}</h3>
+          <span className="rounded-full bg-white/10 px-2 py-0.5 font-mono text-[10px] text-zinc-300 ring-1 ring-white/10">
+            {currentProc || "—"}
+          </span>
           <span className="rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-medium text-emerald-200/90 ring-1 ring-emerald-500/25">
             {paused ? t("已暂停刷新", "Paused") : t("每秒刷新", "~1s refresh")}
           </span>