807 lines
35 KiB
TypeScript
807 lines
35 KiB
TypeScript
"use client";
|
||
|
||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
|
||
type Entry = { pm2: string; script: string; label: string };
|
||
|
||
const apiBase = () =>
|
||
(typeof process !== "undefined" && process.env.NEXT_PUBLIC_API_URL) || "";
|
||
|
||
function stem(script: string) {
|
||
const base = script.split(/[/\\]/).pop() || script;
|
||
const i = base.lastIndexOf(".");
|
||
return i > 0 ? base.slice(0, i) : base;
|
||
}
|
||
|
||
function isYoutubeScript(script: string) {
|
||
if (!/\.py$/i.test(script)) return false;
|
||
const s = stem(script).toLowerCase();
|
||
return s.startsWith("youtube") || s.startsWith("douyin_youtube");
|
||
}
|
||
function isTiktokScript(script: string) {
|
||
return /\.py$/i.test(script) && stem(script).toLowerCase().startsWith("tiktok");
|
||
}
|
||
function isObsScript(script: string) {
|
||
return stem(script).toLowerCase().startsWith("obs");
|
||
}
|
||
function isWebScript(script: string) {
|
||
return stem(script).toLowerCase() === "web";
|
||
}
|
||
|
||
function statusMeta(processStatus: string): {
|
||
dot: string;
|
||
text: string;
|
||
pillClass: string;
|
||
} {
|
||
switch (processStatus) {
|
||
case "online":
|
||
return {
|
||
dot: "bg-emerald-400 shadow-[0_0_12px_rgba(52,211,153,0.55)]",
|
||
text: "运行中",
|
||
pillClass: "border-emerald-500/30 bg-emerald-500/10 text-emerald-200",
|
||
};
|
||
case "stopped":
|
||
return {
|
||
dot: "bg-slate-500",
|
||
text: "已停止",
|
||
pillClass: "border-slate-500/30 bg-slate-500/10 text-slate-300",
|
||
};
|
||
case "errored":
|
||
return {
|
||
dot: "bg-rose-500 shadow-[0_0_10px_rgba(244,63,94,0.45)]",
|
||
text: "异常",
|
||
pillClass: "border-rose-500/30 bg-rose-500/10 text-rose-200",
|
||
};
|
||
case "launching":
|
||
case "starting":
|
||
return {
|
||
dot: "bg-amber-400 animate-pulse-soft",
|
||
text: "启动中",
|
||
pillClass: "border-amber-500/30 bg-amber-500/10 text-amber-200",
|
||
};
|
||
case "waiting restart":
|
||
return {
|
||
dot: "bg-amber-400",
|
||
text: "等待重启",
|
||
pillClass: "border-amber-500/30 bg-amber-500/10 text-amber-200",
|
||
};
|
||
case "not_found":
|
||
return {
|
||
dot: "bg-violet-400",
|
||
text: "未启动过",
|
||
pillClass: "border-violet-500/30 bg-violet-500/10 text-violet-200",
|
||
};
|
||
case "invalid":
|
||
return {
|
||
dot: "bg-slate-600",
|
||
text: "选择无效",
|
||
pillClass: "border-slate-600/40 bg-slate-800/50 text-slate-400",
|
||
};
|
||
default:
|
||
return {
|
||
dot: "bg-slate-500",
|
||
text: "检测中…",
|
||
pillClass: "border-slate-500/25 bg-slate-800/40 text-slate-400",
|
||
};
|
||
}
|
||
}
|
||
|
||
function hintForEntry(script: string): string {
|
||
if (isObsScript(script))
|
||
return "用于从本机 SRS 拉流并在接好显示器的机器上全屏播放（HDMI）。请先保证 SRS 已启动，再点「启动」。";
|
||
if (stem(script).toLowerCase().startsWith("douyin_youtube"))
|
||
return "抖音直播转推到 YouTube：先填好右侧 youtube.ini（密钥）和 URL_config（直播间地址），保存后再启动。";
|
||
if (isYoutubeScript(script))
|
||
return "YouTube 相关推流：检查 youtube.ini 与 URL_config，保存后启动。";
|
||
if (isTiktokScript(script))
|
||
return "多平台录制/监测：在 URL_config 里填写直播间地址，保存后启动。";
|
||
if (isWebScript(script))
|
||
return "这是网页控制台本身。一般不要用这里停掉自己；其它机器上可用 PM2 管理。";
|
||
return "选中后使用左侧按钮启动或停止，右侧查看日志。";
|
||
}
|
||
|
||
const obsDefault =
|
||
"srt://127.0.0.1:10080?streamid=#!::r=live/livestream,m=request&latency=10";
|
||
|
||
export default function Home() {
|
||
const [entries, setEntries] = useState<Entry[]>([]);
|
||
const [backend, setBackend] = useState<string>("");
|
||
const [platform, setPlatform] = useState<string>("");
|
||
const [current, setCurrent] = useState("");
|
||
const [processStatus, setProcessStatus] = useState("unknown");
|
||
const [rawStatus, setRawStatus] = useState("");
|
||
const [recentLog, setRecentLog] = useState("");
|
||
const [recentErr, setRecentErr] = useState("");
|
||
const [busy, setBusy] = useState<string | null>(null);
|
||
const [toast, setToast] = useState<string | null>(null);
|
||
const [loadError, setLoadError] = useState<string | null>(null);
|
||
const [bootLoading, setBootLoading] = useState(true);
|
||
const [autoRefresh, setAutoRefresh] = useState(true);
|
||
const [logTab, setLogTab] = useState<"out" | "err" | "split">("split");
|
||
const [helpOpen, setHelpOpen] = useState(true);
|
||
const [confirmStop, setConfirmStop] = useState(false);
|
||
|
||
const [youtubeIni, setYoutubeIni] = useState("");
|
||
const [urlIni, setUrlIni] = useState("");
|
||
const [cfgYoutubeStatus, setCfgYoutubeStatus] = useState("就绪");
|
||
const [cfgUrlStatus, setCfgUrlStatus] = useState("就绪");
|
||
|
||
const base = apiBase();
|
||
const ent = useMemo(
|
||
() => entries.find((e) => e.pm2 === current) || null,
|
||
[entries, current],
|
||
);
|
||
const script = ent?.script || "";
|
||
|
||
const showYoutube = ent && isYoutubeScript(script);
|
||
const showUrl = ent && (isYoutubeScript(script) || isTiktokScript(script));
|
||
const showObs = ent && isObsScript(script);
|
||
|
||
const showToast = useCallback((msg: string) => {
|
||
setToast(msg);
|
||
setTimeout(() => setToast(null), 3200);
|
||
}, []);
|
||
|
||
const fetchJson = useCallback(
|
||
async (path: string) => {
|
||
const res = await fetch(`${base}${path}`);
|
||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||
return res.json();
|
||
},
|
||
[base],
|
||
);
|
||
|
||
const refreshBackendInfo = useCallback(async () => {
|
||
try {
|
||
const info = await fetchJson("/server_info?refresh=true");
|
||
setBackend(info.process_backend || "");
|
||
setPlatform(info.platform || "");
|
||
showToast(
|
||
info.process_backend === "pm2"
|
||
? "已切换为 PM2 管理"
|
||
: "已切换为本地进程模式（未检测到 PM2）",
|
||
);
|
||
} catch {
|
||
showToast("刷新后端信息失败");
|
||
}
|
||
}, [fetchJson, showToast]);
|
||
|
||
useEffect(() => {
|
||
(async () => {
|
||
setBootLoading(true);
|
||
setLoadError(null);
|
||
try {
|
||
const [mon, info] = await Promise.all([
|
||
fetchJson("/process_monitor"),
|
||
fetchJson("/server_info"),
|
||
]);
|
||
const list: Entry[] = (mon.entries || []).map((e: Entry) => ({
|
||
script: e.script,
|
||
label: e.label || e.script,
|
||
pm2: e.pm2 || stem(e.script),
|
||
}));
|
||
setEntries(list);
|
||
setBackend(info.process_backend || "");
|
||
setPlatform(info.platform || "");
|
||
setCurrent((prev) => prev || list[0]?.pm2 || "");
|
||
} catch {
|
||
setLoadError(
|
||
"连不上后端。请确认已运行 web.sh / web.bat，并用浏览器打开同一地址（开发时可先起 uvicorn 再 npm run dev）。",
|
||
);
|
||
} finally {
|
||
setBootLoading(false);
|
||
}
|
||
})();
|
||
}, [fetchJson]);
|
||
|
||
const refreshStatus = useCallback(async () => {
|
||
if (!current) return;
|
||
try {
|
||
const data = await fetchJson(`/status?process=${encodeURIComponent(current)}`);
|
||
setProcessStatus(data.process_status || "unknown");
|
||
setRawStatus(data.raw_status || "");
|
||
setRecentLog(data.recent_log || "");
|
||
setRecentErr(data.recent_error || "");
|
||
} catch {
|
||
setProcessStatus("unknown");
|
||
}
|
||
}, [current, fetchJson]);
|
||
|
||
useEffect(() => {
|
||
if (!current || !autoRefresh) return;
|
||
const t = setInterval(refreshStatus, 1000);
|
||
refreshStatus();
|
||
return () => clearInterval(t);
|
||
}, [current, autoRefresh, refreshStatus]);
|
||
|
||
useEffect(() => {
|
||
if (current && !autoRefresh) void refreshStatus();
|
||
}, [current, autoRefresh, refreshStatus]);
|
||
|
||
const loadYoutube = useCallback(async () => {
|
||
if (!current) return;
|
||
setCfgYoutubeStatus("加载中…");
|
||
try {
|
||
const data = await fetchJson(`/get_config?process=${encodeURIComponent(current)}`);
|
||
setYoutubeIni(data.content || "");
|
||
setCfgYoutubeStatus("已从服务器加载");
|
||
} catch (e) {
|
||
setCfgYoutubeStatus(`失败: ${(e as Error).message}`);
|
||
}
|
||
}, [current, fetchJson]);
|
||
|
||
const saveYoutube = async () => {
|
||
if (!current) return;
|
||
setCfgYoutubeStatus("保存中…");
|
||
try {
|
||
const res = await fetch(
|
||
`${base}/save_config?process=${encodeURIComponent(current)}`,
|
||
{
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ content: youtubeIni }),
|
||
},
|
||
);
|
||
const data = await res.json();
|
||
if (!res.ok) throw new Error(data.error || res.statusText);
|
||
setCfgYoutubeStatus(data.message || "已保存到服务器");
|
||
showToast("youtube.ini 已保存");
|
||
} catch (e) {
|
||
setCfgYoutubeStatus(`失败: ${(e as Error).message}`);
|
||
}
|
||
};
|
||
|
||
const loadUrl = useCallback(async () => {
|
||
if (!current) return;
|
||
setCfgUrlStatus("加载中…");
|
||
try {
|
||
const data = await fetchJson(`/get_url_config?process=${encodeURIComponent(current)}`);
|
||
setUrlIni(data.content || "");
|
||
setCfgUrlStatus("已从服务器加载");
|
||
} catch (e) {
|
||
setCfgUrlStatus(`失败: ${(e as Error).message}`);
|
||
}
|
||
}, [current, fetchJson]);
|
||
|
||
const saveUrl = async () => {
|
||
if (!current) return;
|
||
setCfgUrlStatus("保存中…");
|
||
try {
|
||
const res = await fetch(
|
||
`${base}/save_url_config?process=${encodeURIComponent(current)}`,
|
||
{
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ content: urlIni }),
|
||
},
|
||
);
|
||
const data = await res.json();
|
||
if (!res.ok) throw new Error(data.error || res.statusText);
|
||
setCfgUrlStatus(data.message || "已保存到服务器");
|
||
showToast("URL 配置已保存");
|
||
} catch (e) {
|
||
setCfgUrlStatus(`失败: ${(e as Error).message}`);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!current) return;
|
||
if (showYoutube) void loadYoutube();
|
||
if (showUrl) void loadUrl();
|
||
}, [current, showYoutube, showUrl, loadYoutube, loadUrl]);
|
||
|
||
const runAction = async (action: string) => {
|
||
if (!current) return;
|
||
setBusy(action);
|
||
try {
|
||
const res = await fetch(`${base}/${action}?process=${encodeURIComponent(current)}`);
|
||
const data = await res.json();
|
||
if (!res.ok) {
|
||
showToast(String(data.output || data.message || "操作失败"));
|
||
return;
|
||
}
|
||
if (action !== "status") {
|
||
const msg =
|
||
data.output ?? data.pm2_output ?? data.message ?? "已完成";
|
||
showToast(typeof msg === "string" ? msg : JSON.stringify(msg));
|
||
setTimeout(refreshStatus, 1200);
|
||
} else {
|
||
setProcessStatus(data.process_status || "unknown");
|
||
setRawStatus(data.raw_status || "");
|
||
setRecentLog(data.recent_log || "");
|
||
setRecentErr(data.recent_error || "");
|
||
}
|
||
} catch (e) {
|
||
showToast((e as Error).message);
|
||
} finally {
|
||
setBusy(null);
|
||
}
|
||
};
|
||
|
||
const onStopClick = () => {
|
||
if (isWebScript(script)) {
|
||
showToast("这是控制台进程，停止后网页会失效，请谨慎操作");
|
||
}
|
||
setConfirmStop(true);
|
||
};
|
||
|
||
const confirmStopRun = async () => {
|
||
setConfirmStop(false);
|
||
await runAction("stop");
|
||
};
|
||
|
||
const copyObs = async () => {
|
||
try {
|
||
await navigator.clipboard.writeText(obsDefault);
|
||
showToast("已复制到剪贴板");
|
||
} catch {
|
||
showToast("复制失败，请手动选中文字复制");
|
||
}
|
||
};
|
||
|
||
const st = statusMeta(processStatus);
|
||
|
||
return (
|
||
<main className="mx-auto min-h-screen max-w-6xl px-4 pb-16 pt-8 sm:px-6 lg:px-10">
|
||
{toast && (
|
||
<div
|
||
role="status"
|
||
className="animate-toast-in fixed bottom-6 left-1/2 z-[100] max-w-[min(90vw,28rem)] -translate-x-1/2 rounded-2xl border border-cyan-500/25 bg-slate-950/95 px-5 py-3 text-center text-sm leading-snug text-cyan-50 shadow-xl shadow-cyan-950/40 backdrop-blur-md"
|
||
>
|
||
{toast}
|
||
</div>
|
||
)}
|
||
|
||
{confirmStop && (
|
||
<div
|
||
className="fixed inset-0 z-[90] flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="stop-title"
|
||
>
|
||
<div className="glass w-full max-w-md rounded-3xl p-6 shadow-2xl">
|
||
<h2 id="stop-title" className="text-lg font-semibold text-white">
|
||
确认停止该进程？
|
||
</h2>
|
||
<p className="mt-2 text-sm leading-relaxed text-slate-400">
|
||
停止后推流或播放会中断。若进程卡住，停止后系统还会尝试结束相关 ffmpeg。
|
||
</p>
|
||
{ent && (
|
||
<p className="mt-3 rounded-xl bg-white/5 px-3 py-2 font-mono text-xs text-slate-300">
|
||
{ent.label} · {ent.script}
|
||
</p>
|
||
)}
|
||
<div className="mt-6 flex flex-wrap justify-end gap-3">
|
||
<button
|
||
type="button"
|
||
className="btn-focus rounded-xl border border-white/15 bg-white/5 px-5 py-2.5 text-sm text-slate-200 transition hover:bg-white/10"
|
||
onClick={() => setConfirmStop(false)}
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn-focus rounded-xl bg-gradient-to-r from-rose-600 to-rose-500 px-5 py-2.5 text-sm font-medium text-white shadow-lg shadow-rose-900/30 transition hover:from-rose-500 hover:to-rose-400"
|
||
onClick={() => void confirmStopRun()}
|
||
>
|
||
确认停止
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<header className="mb-8 flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
|
||
<div className="max-w-2xl">
|
||
<p className="mb-2 text-[11px] font-semibold uppercase tracking-[0.22em] text-cyan-400/90">
|
||
直播推流 · 小白友好
|
||
</p>
|
||
<h1 className="text-3xl font-bold tracking-tight text-white glow-text sm:text-4xl">
|
||
控制台
|
||
</h1>
|
||
<p className="mt-3 text-sm leading-relaxed text-slate-400">
|
||
选一个程序 → 需要时先改配置并保存 → 点「启动」。下面有图文说明。看不懂日志时，把「错误输出」截图发给技术支持。
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center lg:flex-col lg:items-end">
|
||
<div className="flex flex-wrap justify-end gap-2">
|
||
{platform && (
|
||
<span className="rounded-full border border-white/10 bg-white/[0.06] px-3 py-1.5 font-mono text-[11px] text-slate-400">
|
||
系统 {platform}
|
||
</span>
|
||
)}
|
||
{backend && (
|
||
<span
|
||
className="rounded-full border border-violet-500/25 bg-violet-500/10 px-3 py-1.5 text-xs text-violet-200"
|
||
title="有 PM2 时用 PM2；没有则由网页直接拉起进程"
|
||
>
|
||
{backend === "pm2"
|
||
? "PM2 管理"
|
||
: backend === "local"
|
||
? "本地进程（无 PM2）"
|
||
: backend}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => void refreshBackendInfo()}
|
||
className="btn-focus self-end rounded-full border border-white/12 bg-white/[0.06] px-4 py-2 text-xs text-slate-300 transition hover:border-cyan-500/30 hover:text-white"
|
||
title="重装 PM2 后可点这里重新识别"
|
||
>
|
||
重新检测 PM2
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section className="mb-8 overflow-hidden rounded-3xl border border-cyan-500/15 bg-gradient-to-br from-cyan-950/40 via-slate-900/30 to-violet-950/25">
|
||
<button
|
||
type="button"
|
||
onClick={() => setHelpOpen((o) => !o)}
|
||
className="btn-focus flex w-full items-center justify-between gap-3 px-5 py-4 text-left transition hover:bg-white/[0.04]"
|
||
>
|
||
<span className="text-sm font-semibold text-cyan-100/95">
|
||
新手必看：三步上手
|
||
</span>
|
||
<span className="text-cyan-400/80">{helpOpen ? "收起 ▲" : "展开 ▼"}</span>
|
||
</button>
|
||
{helpOpen && (
|
||
<div className="space-y-4 border-t border-white/10 px-5 py-5 text-sm leading-relaxed text-slate-300">
|
||
<div className="grid gap-4 md:grid-cols-3">
|
||
<div className="rounded-2xl border border-white/8 bg-black/20 p-4">
|
||
<p className="mb-2 flex h-8 w-8 items-center justify-center rounded-full bg-cyan-500/20 text-sm font-bold text-cyan-300">
|
||
1
|
||
</p>
|
||
<p className="font-medium text-white">打开本页</p>
|
||
<p className="mt-1 text-xs text-slate-400">
|
||
Windows / Ubuntu 共用同一套代码：<code className="rounded bg-black/40 px-1.5 py-0.5">git pull</code> 后双击/运行{" "}
|
||
<code className="rounded bg-black/40 px-1.5 py-0.5">start.bat</code> 或{" "}
|
||
<code className="rounded bg-black/40 px-1.5 py-0.5">./start.sh</code>（生产），开发双端用{" "}
|
||
<code className="rounded bg-black/40 px-1.5 py-0.5">dev.bat</code> /{" "}
|
||
<code className="rounded bg-black/40 px-1.5 py-0.5">./dev.sh</code>。启动时会自动检测 Python、ffmpeg、npm 等。
|
||
端口与同机 SRS、代理冲突时，复制{" "}
|
||
<code className="text-cyan-200/90">config/runtime.env.example</code> 为{" "}
|
||
<code className="text-cyan-200/90">config/runtime.env</code> 修改{" "}
|
||
<code className="text-cyan-200/90">PORT</code>。Docker 默认 <code className="text-cyan-200/90">8101</code>。
|
||
</p>
|
||
</div>
|
||
<div className="rounded-2xl border border-white/8 bg-black/20 p-4">
|
||
<p className="mb-2 flex h-8 w-8 items-center justify-center rounded-full bg-violet-500/20 text-sm font-bold text-violet-300">
|
||
2
|
||
</p>
|
||
<p className="font-medium text-white">选进程、改配置</p>
|
||
<p className="mt-1 text-xs text-slate-400">
|
||
左侧下拉框<strong className="text-slate-300">默认首选 YouTube / 抖音→YouTube</strong>
|
||
，可切换到 TikTok、OBS 等。需要密钥、直播间地址时，在右侧编辑后点「保存到服务器」再启动。
|
||
</p>
|
||
</div>
|
||
<div className="rounded-2xl border border-white/8 bg-black/20 p-4">
|
||
<p className="mb-2 flex h-8 w-8 items-center justify-center rounded-full bg-emerald-500/20 text-sm font-bold text-emerald-300">
|
||
3
|
||
</p>
|
||
<p className="font-medium text-white">启动并看日志</p>
|
||
<p className="mt-1 text-xs text-slate-400">
|
||
点「启动」，看右侧绿色「运行日志」。红色「错误输出」有内容时，多半要改配置或检查网络。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<p className="rounded-xl border border-amber-500/20 bg-amber-950/20 px-4 py-3 text-xs text-amber-100/90">
|
||
<strong className="text-amber-200">HDMI / OBS：</strong>
|
||
需本机已装 SRS（拉流端口多为 <code className="text-amber-200/90">10080</code> 等，与控制台 Web 端口不是同一个）。显示器接好后，OBS
|
||
选「自定义」推流，服务器填下方 SRT 地址，密钥留空。
|
||
</p>
|
||
<p className="rounded-xl border border-slate-600/30 bg-slate-950/40 px-4 py-3 text-xs text-slate-400">
|
||
<strong className="text-slate-300">局域网访问：</strong>
|
||
生产模式默认绑定 <code className="text-slate-300">0.0.0.0</code>，同一 WiFi/内网下用手机或电脑浏览器访问{" "}
|
||
<code className="text-slate-300">http://这台机器的IP:端口/</code> 即可（注意防火墙放行端口）。
|
||
</p>
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
{bootLoading && (
|
||
<div className="glass flex flex-col items-center justify-center gap-4 rounded-3xl py-24">
|
||
<div className="h-10 w-10 rounded-full border-2 border-cyan-400/30 border-t-cyan-400 animate-spin" />
|
||
<p className="text-sm text-slate-400">正在连接服务器…</p>
|
||
</div>
|
||
)}
|
||
|
||
{!bootLoading && loadError && (
|
||
<div className="glass rounded-3xl border border-rose-500/25 bg-rose-950/20 p-8 text-center">
|
||
<p className="text-base font-medium text-rose-200">无法连接</p>
|
||
<p className="mx-auto mt-3 max-w-lg text-sm leading-relaxed text-slate-400">
|
||
{loadError}
|
||
</p>
|
||
<button
|
||
type="button"
|
||
className="btn-focus mt-6 rounded-full bg-cyan-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-cyan-500"
|
||
onClick={() => window.location.reload()}
|
||
>
|
||
重试刷新页面
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{!bootLoading && !loadError && !entries.length && (
|
||
<div className="glass rounded-3xl p-10 text-center">
|
||
<p className="text-slate-300">没有找到可管理的脚本</p>
|
||
<p className="mx-auto mt-2 max-w-md text-sm text-slate-500">
|
||
项目根目录应有 tiktok*.py、youtube*.py、douyin_youtube*.py 或 obs 脚本（Linux 用 .sh，Windows 用 .bat）。
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{!bootLoading && !loadError && entries.length > 0 && (
|
||
<div className="grid gap-6 lg:grid-cols-12 lg:gap-8">
|
||
<aside className="glass rounded-3xl p-6 lg:col-span-4 xl:col-span-3">
|
||
<label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||
要控制哪一个程序
|
||
</label>
|
||
<select
|
||
className="btn-focus mt-2 w-full cursor-pointer rounded-2xl border border-white/12 bg-slate-950/60 px-4 py-3.5 text-sm text-white outline-none transition hover:border-cyan-500/35"
|
||
value={current}
|
||
onChange={(e) => setCurrent(e.target.value)}
|
||
>
|
||
{entries.map((e) => (
|
||
<option key={e.pm2} value={e.pm2}>
|
||
{e.label} — {e.script}
|
||
</option>
|
||
))}
|
||
</select>
|
||
|
||
{ent && (
|
||
<p className="mt-4 rounded-2xl border border-white/6 bg-black/25 p-3 text-xs leading-relaxed text-slate-400">
|
||
{hintForEntry(ent.script)}
|
||
</p>
|
||
)}
|
||
|
||
<div className="mt-5 flex items-center gap-3">
|
||
<span className={`h-3 w-3 shrink-0 rounded-full ${st.dot}`} aria-hidden />
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<span
|
||
className={`rounded-full border px-2.5 py-0.5 text-xs font-medium ${st.pillClass}`}
|
||
>
|
||
{st.text}
|
||
</span>
|
||
{ent && (
|
||
<span className="truncate font-mono text-[11px] text-slate-500">
|
||
{ent.pm2}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<label className="mt-3 flex cursor-pointer items-center gap-2 text-xs text-slate-500">
|
||
<input
|
||
type="checkbox"
|
||
checked={autoRefresh}
|
||
onChange={(e) => setAutoRefresh(e.target.checked)}
|
||
className="h-3.5 w-3.5 rounded border-white/20 bg-slate-900 text-cyan-500 focus:ring-cyan-500/40"
|
||
/>
|
||
自动刷新日志（每秒）
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-6 grid grid-cols-2 gap-2">
|
||
<button
|
||
type="button"
|
||
disabled={!!busy}
|
||
title="启动当前选中的程序"
|
||
onClick={() => void runAction("start")}
|
||
className="btn-focus col-span-2 rounded-2xl bg-gradient-to-r from-emerald-600 to-cyan-600 py-3 text-sm font-semibold text-white shadow-lg shadow-cyan-900/25 transition hover:from-emerald-500 hover:to-cyan-500 disabled:opacity-45"
|
||
>
|
||
{busy === "start" ? "正在启动…" : "启动"}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
disabled={!!busy}
|
||
title="安全停止，会结束相关 ffmpeg"
|
||
onClick={onStopClick}
|
||
className="btn-focus rounded-2xl border border-rose-500/35 bg-rose-950/30 py-3 text-sm font-medium text-rose-100 transition hover:bg-rose-900/40 disabled:opacity-45"
|
||
>
|
||
{busy === "stop" ? "停止中…" : "停止"}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
disabled={!!busy}
|
||
title="先停再起"
|
||
onClick={() => void runAction("restart")}
|
||
className="btn-focus rounded-2xl border border-amber-500/30 bg-amber-950/20 py-3 text-sm font-medium text-amber-100 transition hover:bg-amber-900/30 disabled:opacity-45"
|
||
>
|
||
{busy === "restart" ? "重启中…" : "重启"}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
disabled={!!busy}
|
||
title="立即拉一次状态与日志"
|
||
onClick={() => void runAction("status")}
|
||
className="btn-focus col-span-2 rounded-2xl border border-white/12 bg-white/[0.05] py-2.5 text-sm text-slate-200 transition hover:bg-white/10 disabled:opacity-45"
|
||
>
|
||
{busy === "status" ? "刷新中…" : "手动刷新状态"}
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<section className="glass rounded-3xl p-6 lg:col-span-8 xl:col-span-9">
|
||
<div className="mb-5 flex flex-col gap-3 border-b border-white/8 pb-5 sm:flex-row sm:items-center sm:justify-between">
|
||
<h2 className="text-lg font-semibold text-white">配置与日志</h2>
|
||
<div className="flex flex-wrap gap-2 rounded-2xl border border-white/10 bg-black/20 p-1">
|
||
{(
|
||
[
|
||
["split", "双栏"],
|
||
["out", "仅运行"],
|
||
["err", "仅错误"],
|
||
] as const
|
||
).map(([id, lab]) => (
|
||
<button
|
||
key={id}
|
||
type="button"
|
||
onClick={() => setLogTab(id)}
|
||
className={`rounded-xl px-3 py-1.5 text-xs font-medium transition ${
|
||
logTab === id
|
||
? "bg-cyan-500/25 text-cyan-100"
|
||
: "text-slate-500 hover:text-slate-300"
|
||
}`}
|
||
>
|
||
{lab}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{showObs && (
|
||
<div className="mb-5 rounded-2xl border border-violet-500/25 bg-violet-950/25 p-5">
|
||
<h3 className="text-sm font-semibold text-violet-100">
|
||
OBS 推流地址（接到 HDMI 前在 OBS 里填）
|
||
</h3>
|
||
<p className="mt-2 text-xs leading-relaxed text-slate-400">
|
||
OBS → 设置 → 推流 → 服务选「自定义」。下方整行就是「服务器」内容，「串流密钥」留空。若 SRS 不在本机，把{" "}
|
||
<code className="text-violet-200/90">127.0.0.1</code> 改成服务器 IP。
|
||
</p>
|
||
<div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-stretch">
|
||
<code className="log-scroll flex-1 overflow-x-auto rounded-xl border border-white/10 bg-black/45 px-4 py-3 font-mono text-[11px] leading-relaxed text-emerald-300/95">
|
||
{obsDefault}
|
||
</code>
|
||
<button
|
||
type="button"
|
||
onClick={() => void copyObs()}
|
||
className="btn-focus shrink-0 rounded-xl bg-violet-600 px-5 py-3 text-sm font-medium text-white hover:bg-violet-500 sm:w-auto"
|
||
>
|
||
一键复制
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showYoutube && (
|
||
<div className="mb-5 rounded-2xl border border-cyan-500/20 bg-cyan-950/15 p-5">
|
||
<h3 className="text-sm font-semibold text-cyan-100">
|
||
YouTube 密钥（youtube.ini）
|
||
</h3>
|
||
<p className="mt-1 text-xs text-slate-500">
|
||
改完务必点「保存到服务器」，再回左侧点「启动」。
|
||
</p>
|
||
<textarea
|
||
value={youtubeIni}
|
||
onChange={(e) => setYoutubeIni(e.target.value)}
|
||
className="log-scroll mt-3 min-h-[8rem] w-full resize-y rounded-xl border border-white/10 bg-black/40 p-4 font-mono text-xs leading-relaxed text-slate-200 outline-none transition focus:border-cyan-500/40 focus:ring-1 focus:ring-cyan-500/30"
|
||
spellCheck={false}
|
||
/>
|
||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => void loadYoutube()}
|
||
className="btn-focus rounded-xl border border-cyan-500/35 bg-cyan-950/30 px-4 py-2 text-xs font-medium text-cyan-100 hover:bg-cyan-900/35"
|
||
>
|
||
重新加载
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => void saveYoutube()}
|
||
className="btn-focus rounded-xl bg-cyan-600 px-4 py-2 text-xs font-semibold text-white hover:bg-cyan-500"
|
||
>
|
||
保存到服务器
|
||
</button>
|
||
<span className="text-xs text-slate-500">{cfgYoutubeStatus}</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showUrl && (
|
||
<div className="mb-5 rounded-2xl border border-violet-500/20 bg-violet-950/15 p-5">
|
||
<h3 className="text-sm font-semibold text-violet-100">
|
||
直播间地址列表（URL_config.ini）
|
||
</h3>
|
||
<p className="mt-1 text-xs text-slate-500">
|
||
每行一个地址或按你原来文件的格式编写，保存后再启动脚本。
|
||
</p>
|
||
<textarea
|
||
value={urlIni}
|
||
onChange={(e) => setUrlIni(e.target.value)}
|
||
className="log-scroll mt-3 min-h-[7rem] w-full resize-y rounded-xl border border-white/10 bg-black/40 p-4 font-mono text-xs leading-relaxed text-slate-200 outline-none transition focus:border-violet-500/40 focus:ring-1 focus:ring-violet-500/30"
|
||
spellCheck={false}
|
||
/>
|
||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => void loadUrl()}
|
||
className="btn-focus rounded-xl border border-violet-500/35 bg-violet-950/30 px-4 py-2 text-xs font-medium text-violet-100 hover:bg-violet-900/35"
|
||
>
|
||
重新加载
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => void saveUrl()}
|
||
className="btn-focus rounded-xl bg-violet-600 px-4 py-2 text-xs font-semibold text-white hover:bg-violet-500"
|
||
>
|
||
保存到服务器
|
||
</button>
|
||
<span className="text-xs text-slate-500">{cfgUrlStatus}</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div
|
||
className={
|
||
logTab === "split"
|
||
? "grid gap-4 lg:grid-cols-2"
|
||
: "grid gap-4"
|
||
}
|
||
>
|
||
{(logTab === "split" || logTab === "out") && (
|
||
<div>
|
||
<h3 className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-emerald-400/90">
|
||
<span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
|
||
运行日志
|
||
</h3>
|
||
<pre className="log-scroll max-h-[min(50vh,22rem)] overflow-auto rounded-2xl border border-emerald-500/15 bg-black/55 p-4 font-mono text-[11px] leading-relaxed text-emerald-100/95">
|
||
{recentLog?.trim() ? recentLog : "暂无输出（若刚启动，可等几秒或点「手动刷新状态」）"}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
{(logTab === "split" || logTab === "err") && (
|
||
<div>
|
||
<h3 className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-rose-400/90">
|
||
<span className="h-1.5 w-1.5 rounded-full bg-rose-400" />
|
||
错误输出
|
||
</h3>
|
||
<pre className="log-scroll max-h-[min(50vh,22rem)] overflow-auto rounded-2xl border border-rose-500/15 bg-black/55 p-4 font-mono text-[11px] leading-relaxed text-rose-100/95">
|
||
{recentErr?.trim() ? recentErr : "暂无错误（若推流失败，这里通常会有红字提示）"}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<details className="group mt-6 rounded-2xl border border-white/8 bg-black/20 open:border-white/15">
|
||
<summary className="cursor-pointer list-none px-4 py-3 text-xs text-slate-500 transition group-open:text-slate-300 [&::-webkit-details-marker]:hidden">
|
||
<span className="inline-flex items-center gap-2">
|
||
高级：查看完整进程列表（PM2 / 本地）
|
||
<span className="text-slate-600 group-open:hidden">▼</span>
|
||
<span className="hidden text-slate-600 group-open:inline">▲</span>
|
||
</span>
|
||
</summary>
|
||
<pre className="log-scroll max-h-52 overflow-auto border-t border-white/8 p-4 font-mono text-[10px] leading-relaxed text-slate-500">
|
||
{rawStatus || "—"}
|
||
</pre>
|
||
</details>
|
||
</section>
|
||
</div>
|
||
)}
|
||
|
||
<footer className="mt-12 border-t border-white/8 pt-8 text-center text-[11px] leading-relaxed text-slate-600">
|
||
<p>
|
||
遇到问题先看「错误输出」与「高级」里的进程表；仍无法解决请联系维护人员并带上日志截图。
|
||
</p>
|
||
<p className="mt-2 text-slate-700">
|
||
运维：<span className="font-mono text-slate-500">./start.sh</span> /{" "}
|
||
<span className="font-mono text-slate-500">start.bat</span>；开发：{" "}
|
||
<span className="font-mono text-slate-500">./dev.sh</span> /{" "}
|
||
<span className="font-mono text-slate-500">npm run dev</span>；Docker 默认端口{" "}
|
||
<span className="font-mono text-slate-500">8101</span>；端口见{" "}
|
||
<span className="font-mono text-slate-500">config/runtime.env.example</span>
|
||
</p>
|
||
</footer>
|
||
</main>
|
||
);
|
||
}
|