's'
This commit is contained in:
eric
241
web-console/components/live-product/LiveProcessLiveLogCard.tsx
Normal file
241
web-console/components/live-product/LiveProcessLiveLogCard.tsx
Normal file
@@ -0,0 +1,241 @@
|
||||
"use client";
|
||||
|
||||
import { Pause, Play, RefreshCw } from "lucide-react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
|
||||
import { extractDouyinRoomHints } from "@/lib/youtubeConfigUtils";
|
||||
|
||||
type TFn = (zh: string, en: string) => string;
|
||||
|
||||
type StatusPayload = {
|
||||
process_status?: string;
|
||||
recent_log?: string;
|
||||
recent_error?: string;
|
||||
};
|
||||
|
||||
function fmtDuration(sec: number): string {
|
||||
if (sec < 60) return `${sec}s`;
|
||||
const m = Math.floor(sec / 60);
|
||||
const s = sec % 60;
|
||||
if (m < 60) return `${m}m ${s}s`;
|
||||
const h = Math.floor(m / 60);
|
||||
const mm = m % 60;
|
||||
return `${h}h ${mm}m`;
|
||||
}
|
||||
|
||||
function statusLine(t: TFn, raw: string | undefined): string {
|
||||
const s = (raw || "unknown").toLowerCase();
|
||||
if (s === "online" || s === "running") return t("运行中（PM2/进程在线）", "Running (process online)");
|
||||
if (s === "stopped" || s === "stopping") return t("已停止", "Stopped");
|
||||
if (s === "not_found" || s === "errored") return t("未运行或未找到", "Not running / not found");
|
||||
if (s === "invalid") return t("无效进程名", "Invalid process");
|
||||
return raw || "—";
|
||||
}
|
||||
|
||||
type Props = {
|
||||
t: TFn;
|
||||
currentProc: string;
|
||||
fetchJson: <T,>(path: string, init?: RequestInit) => Promise<T>;
|
||||
/** 用于源站房间线索（与 Electron 一致） */
|
||||
urlListText: string;
|
||||
/** YouTube 密钥尾码；非 YouTube 进程可传空并关 showKeyRow */
|
||||
keySuffixUi: string;
|
||||
showKeyRow?: boolean;
|
||||
pollMs?: number;
|
||||
};
|
||||
|
||||
export function LiveProcessLiveLogCard({
|
||||
t,
|
||||
currentProc,
|
||||
fetchJson,
|
||||
urlListText,
|
||||
keySuffixUi,
|
||||
showKeyRow = true,
|
||||
pollMs = 1000,
|
||||
}: Props) {
|
||||
const [processStatus, setProcessStatus] = useState<string>("");
|
||||
const [recentLog, setRecentLog] = useState("");
|
||||
const [recentError, setRecentError] = useState("");
|
||||
const [paused, setPaused] = useState(false);
|
||||
const [liveSince, setLiveSince] = useState<number | null>(null);
|
||||
const [nowTick, setNowTick] = useState(0);
|
||||
const outRef = useRef<HTMLPreElement>(null);
|
||||
const errRef = useRef<HTMLPreElement>(null);
|
||||
const prevOnlineRef = useRef(false);
|
||||
|
||||
const douyinHints = extractDouyinRoomHints(urlListText);
|
||||
|
||||
const pull = useCallback(async () => {
|
||||
if (!currentProc) return;
|
||||
try {
|
||||
const data = await fetchJson<StatusPayload>(
|
||||
`/status?process=${encodeURIComponent(currentProc)}`,
|
||||
);
|
||||
const ps = data.process_status || "unknown";
|
||||
setProcessStatus(ps);
|
||||
setRecentLog(data.recent_log || "");
|
||||
setRecentError(data.recent_error || "");
|
||||
const online = /^(online|running)$/i.test(ps);
|
||||
if (online && !prevOnlineRef.current) {
|
||||
setLiveSince(Date.now());
|
||||
}
|
||||
if (!online) {
|
||||
setLiveSince(null);
|
||||
}
|
||||
prevOnlineRef.current = online;
|
||||
} catch {
|
||||
setProcessStatus("error");
|
||||
}
|
||||
}, [currentProc, fetchJson]);
|
||||
|
||||
useEffect(() => {
|
||||
void pull();
|
||||
}, [pull]);
|
||||
|
||||
useEffect(() => {
|
||||
if (paused || !currentProc) return;
|
||||
const id = window.setInterval(() => void pull(), pollMs);
|
||||
return () => clearInterval(id);
|
||||
}, [paused, currentProc, pull, pollMs]);
|
||||
|
||||
useEffect(() => {
|
||||
const onVis = () => {
|
||||
if (document.visibilityState === "visible") void pull();
|
||||
};
|
||||
document.addEventListener("visibilitychange", onVis);
|
||||
return () => document.removeEventListener("visibilitychange", onVis);
|
||||
}, [pull]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!liveSince) return;
|
||||
const id = window.setInterval(() => setNowTick((n) => n + 1), 1000);
|
||||
return () => clearInterval(id);
|
||||
}, [liveSince]);
|
||||
|
||||
useEffect(() => {
|
||||
if (paused) return;
|
||||
const el = outRef.current;
|
||||
if (el) el.scrollTop = el.scrollHeight;
|
||||
}, [recentLog, paused]);
|
||||
|
||||
useEffect(() => {
|
||||
if (paused) return;
|
||||
const el = errRef.current;
|
||||
if (el) el.scrollTop = el.scrollHeight;
|
||||
}, [recentError, paused]);
|
||||
|
||||
const durationLabel =
|
||||
liveSince == null
|
||||
? t("—（未检测到在线）", "— (not online)")
|
||||
: fmtDuration(Math.max(0, Math.floor((Date.now() - liveSince) / 1000)));
|
||||
|
||||
return (
|
||||
<section className="rounded-2xl border border-emerald-500/20 bg-gradient-to-b from-emerald-500/[0.07] to-zinc-950/80 p-6 ring-1 ring-white/[0.04]">
|
||||
<span className="sr-only" aria-hidden>
|
||||
{nowTick}
|
||||
</span>
|
||||
<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-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>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void pull()}
|
||||
className="inline-flex items-center gap-1 rounded-lg border border-white/10 bg-white/[0.05] px-3 py-1.5 text-xs text-zinc-300 hover:bg-white/[0.08]"
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
{t("立即拉取", "Refresh")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPaused((p) => !p)}
|
||||
className={`inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs ring-1 ${
|
||||
paused
|
||||
? "bg-amber-500/20 text-amber-100 ring-amber-500/35"
|
||||
: "border border-white/10 bg-black/30 text-zinc-300"
|
||||
}`}
|
||||
>
|
||||
{paused ? <Play className="h-3.5 w-3.5" /> : <Pause className="h-3.5 w-3.5" />}
|
||||
{paused ? t("继续自动刷新", "Resume") : t("暂停自动刷新", "Pause")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-3 rounded-xl border border-white/[0.06] bg-black/25 p-4">
|
||||
<div className="grid gap-2 text-xs sm:grid-cols-2">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="text-zinc-500">{t("进程状态", "Status")}</span>
|
||||
<span className="font-medium text-zinc-200">{statusLine(t, processStatus)}</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="text-zinc-500">{t("本次在线时长（估算）", "Online duration (est.)")}</span>
|
||||
<span className="font-mono text-cyan-200/90">{durationLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
{showKeyRow ? (
|
||||
<div className="flex flex-wrap gap-2 text-xs">
|
||||
<span className="text-zinc-500">{t("YouTube key 尾码（参考）", "YT key suffix")}</span>
|
||||
<span className="font-mono text-zinc-300">{keySuffixUi || "—"}</span>
|
||||
</div>
|
||||
) : null}
|
||||
{douyinHints.length > 0 ? (
|
||||
<div className="text-xs">
|
||||
<span className="text-zinc-500">{t("源站房间线索", "Douyin room hints")}</span>
|
||||
<span className="ml-2 inline-flex flex-wrap gap-1">
|
||||
{douyinHints.map((id, i) => (
|
||||
<a
|
||||
key={`${id}-${i}`}
|
||||
href={`https://live.douyin.com/${id}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-violet-300 underline-offset-2 hover:underline"
|
||||
>
|
||||
{id}
|
||||
</a>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-[11px] text-zinc-600">
|
||||
{t("（地址列表中未解析到抖音房间线索）", "(No Douyin room id in URL list)")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{processStatus !== "not_found" && processStatus !== "invalid" ? (
|
||||
<div className="mt-4 grid gap-4 lg:grid-cols-2">
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-wider text-emerald-400/90">
|
||||
{t("进程输出（stdout / 合并日志）", "Process output")}
|
||||
</div>
|
||||
<pre
|
||||
ref={outRef}
|
||||
className="log-live-scroll mt-2 max-h-[min(22rem,42vh)] min-h-[12rem] overflow-auto whitespace-pre-wrap rounded-xl border border-emerald-500/20 bg-black/55 p-3 font-mono text-[10px] leading-relaxed text-emerald-100/95"
|
||||
>
|
||||
{recentLog.trim() || t("（暂无）", "(empty)")}
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-wider text-rose-400/90">
|
||||
{t("异常信息（stderr）", "Stderr")}
|
||||
</div>
|
||||
<pre
|
||||
ref={errRef}
|
||||
className="log-live-scroll mt-2 max-h-[min(22rem,42vh)] min-h-[12rem] overflow-auto whitespace-pre-wrap rounded-xl border border-rose-500/20 bg-black/55 p-3 font-mono text-[10px] leading-relaxed text-rose-100/95"
|
||||
>
|
||||
{recentError.trim() || t("（暂无）", "(empty)")}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-4 text-xs text-zinc-500">
|
||||
{t("进程未在 PM2 / 本地注册表中运行，日志区域已隐藏。", "Process not running — log panes hidden.")}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user