eric/gitlab-instance-0a899031_douyinyoutube
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

's'

Browse Source
This commit is contained in:
eric
2026-03-29 01:17:00 -05:00
parent af927c6dca
commit 8bce529255
10 changed files with 775 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
config/system-stack.env.example
View File

@@ -60,9 +60,9 @@ DISABLE_IPV6=1
# 设为 1 才会安装/启动 Neko 容器；不需要浏览器桌面可改回 0 # 设为 1 才会安装/启动 Neko 容器；不需要浏览器桌面可改回 0
ENABLE_NEKO=1 ENABLE_NEKO=1
NEKO_HTTP_PORT=9200 NEKO_HTTP_PORT=9200
# Neko 浏览器登录口令（用户 / 管理） # Neko 浏览器登录：用户名为 live / admin，口令与全站策略一致（默认 12345678）
NEKO_USER_PASS=live NEKO_USER_PASS=12345678
NEKO_ADMIN_PASS=admin NEKO_ADMIN_PASS=12345678
# 第二套 Neko 桌面：Firefox（Google 无官方 ARM Chrome；此为多架构 Firefox）。与 Chromium 共用上面口令。 # 第二套 Neko 桌面：Firefox（Google 无官方 ARM Chrome；此为多架构 Firefox）。与 Chromium 共用上面口令。
ENABLE_NEKO_FF=1 ENABLE_NEKO_FF=1
NEKO_FF_HTTP_PORT=9201 NEKO_FF_HTTP_PORT=9201

4
live-platform/config/defaults/services/neko.json
View File

@@ -7,8 +7,8 @@
"env": { "env": {
"ENABLE_NEKO": "1", "ENABLE_NEKO": "1",
"NEKO_HTTP_PORT": "9200", "NEKO_HTTP_PORT": "9200",
"NEKO_USER_PASS": "live", "NEKO_USER_PASS": "12345678",
"NEKO_ADMIN_PASS": "admin", "NEKO_ADMIN_PASS": "12345678",
"ENABLE_NEKO_FF": "1", "ENABLE_NEKO_FF": "1",
"NEKO_FF_HTTP_PORT": "9201", "NEKO_FF_HTTP_PORT": "9201",
"NEKO_FF_WEBRTC_EPR": "52200-52300", "NEKO_FF_WEBRTC_EPR": "52200-52300",

89
scripts/linux/lib/common.sh
View File

@@ -16,6 +16,23 @@ log() {
printf '[%s] %s\n' "$INSTALL_TAG" "$*" printf '[%s] %s\n' "$INSTALL_TAG" "$*"
} }
# 网络/镜像波动时重试（不退出整段安装）
retry_run() {
local max="${1:-3}"
local delay="${2:-3}"
shift 2
local n=0
while [ "$n" -lt "$max" ]; do
if "$@"; then
return 0
fi
n=$((n + 1))
log "retry ${n}/${max} failed command: $*"
sleep "$delay"
done
return 1
}
ensure_root() { ensure_root() {
if [ "${EUID:-$(id -u)}" -ne 0 ]; then if [ "${EUID:-$(id -u)}" -ne 0 ]; then
exec sudo -E bash "$0" "$@" exec sudo -E bash "$0" "$@"
@@ -38,6 +55,13 @@ apt_update_once() {
apt_install() { apt_install() {
apt_update_once apt_update_once
if apt-get install -y --no-install-recommends "$@"; then
return 0
fi
log "apt install failed; trying dpkg --configure -a and apt -f install"
export DEBIAN_FRONTEND=noninteractive
dpkg --configure -a 2>/dev/null || true
apt-get -f install -y || true
apt-get install -y --no-install-recommends "$@" apt-get install -y --no-install-recommends "$@"
} }
@@ -123,7 +147,10 @@ ensure_live_user() {
useradd -m -s /bin/bash live useradd -m -s /bin/bash live
fi fi
echo "live:12345678" | chpasswd echo "live:12345678" | chpasswd
usermod -aG sudo,audio,video,plugdev,render,gpio,spidev,pwm,i2c,docker live 2>/dev/null || true usermod -aG sudo,audio,video,plugdev,render,gpio,spidev,pwm,i2c live 2>/dev/null || true
if getent group docker >/dev/null 2>&1; then
usermod -aG docker live 2>/dev/null || true
fi
} }
install_base_packages() { install_base_packages() {
@@ -153,9 +180,23 @@ install_nodejs() {
return 0 return 0
fi fi
fi fi
log "Installing Node.js 20" log "Installing Node.js (prefer 20.x from NodeSource)"
curl -fsSL https://deb.nodesource.com/setup_20.x | bash - if retry_run 3 5 bash -c 'curl -fsSL https://deb.nodesource.com/setup_20.x | bash -'; then
apt_install nodejs apt_install nodejs || true
else
log "NodeSource unavailable; using distribution nodejs"
apt_install nodejs npm || apt_install nodejs || true
fi
if have node; then
major="$(node -p "process.versions.node.split('.')[0]" 2>/dev/null || echo 0)"
case "$major" in
''|*[!0-9]*) log "WARN: could not parse Node major version" ;;
*) [ "$major" -lt 20 ] && log "WARN: Node major=$major (web-console expects >=20); upgrade manually if build fails" ;;
esac
return 0
fi
log "WARN: Node.js not installed; web-console build may fail on this distro"
return 0
} }
install_docker_stack() { install_docker_stack() {
@@ -174,13 +215,26 @@ install_docker_stack() {
prepare_python_runtime() { prepare_python_runtime() {
log "Preparing Python virtual environment" log "Preparing Python virtual environment"
chown -R live:live "$ROOT_DIR" chown -R live:live "$ROOT_DIR"
as_live "python3 -m venv .venv" as_live "python3 -m venv .venv" || {
as_live ". .venv/bin/activate && pip install --upgrade pip && pip install -r requirements.txt" log "venv create failed; retry once with --clear"
rm -rf "$ROOT_DIR/.venv"
as_live "python3 -m venv .venv" || log "WARN: venv still failed"
}
if ! as_live ". .venv/bin/activate && pip install --upgrade pip && pip install -r requirements.txt"; then
log "pip install failed; retry with --no-cache-dir"
as_live ". .venv/bin/activate && pip install --upgrade pip && pip install --no-cache-dir -r requirements.txt" || \
log "WARN: Python deps incomplete; control plane may fail until fixed manually"
fi
} }
prepare_web_console() { prepare_web_console() {
log "Building web console" log "Building web console"
as_live "cd web-console && if [ -f package-lock.json ]; then npm ci; else npm install; fi && npm run build" if as_live "cd web-console && if [ -f package-lock.json ]; then npm ci; else npm install; fi && npm run build"; then
return 0
fi
log "web console build failed; cleaning node_modules and retrying"
as_live "cd web-console && rm -rf node_modules .next && npm install && npm run build" || \
log "WARN: web console build still failed — service may serve stale assets until rebuilt"
} }
install_live_console_service() { install_live_console_service() {
@@ -383,20 +437,25 @@ install_shellcrash() {
return 0 return 0
fi fi
log "Installing ShellCrash" log "Installing ShellCrash"
local url local url ok=0
rm -f /tmp/install_shellcrash.sh
for url in \ for url in \
'https://testingcf.jsdelivr.net/gh/juewuy/ShellCrash@dev' \ 'https://testingcf.jsdelivr.net/gh/juewuy/ShellCrash@dev' \
'https://raw.githubusercontent.com/juewuy/ShellCrash/dev' 'https://raw.githubusercontent.com/juewuy/ShellCrash/dev'
do do
if wget -q --no-check-certificate -O /tmp/install_shellcrash.sh "$url/install_en.sh" && [ -s /tmp/install_shellcrash.sh ]; then if retry_run 2 4 wget -q --no-check-certificate -O /tmp/install_shellcrash.sh "$url/install_en.sh" && [ -s /tmp/install_shellcrash.sh ]; then
ok=1
break break
fi fi
done done
if [ ! -s /tmp/install_shellcrash.sh ]; then if [ "$ok" != "1" ] || [ ! -s /tmp/install_shellcrash.sh ]; then
log "ShellCrash installer download failed" log "ShellCrash installer download failed — continuing hub install (proxy later or set ENABLE_SHELLCRASH=0)"
return 1 return 0
fi
if ! printf '1\n1\n1\n1\n' | bash /tmp/install_shellcrash.sh; then
log "ShellCrash install script returned error — continuing; configure manually under $SHELLCRASH_DIR if needed"
return 0
fi fi
printf '1\n1\n1\n1\n' | bash /tmp/install_shellcrash.sh
} }
install_browser_stack() { install_browser_stack() {
@@ -438,8 +497,8 @@ install_neko_browser() {
mkdir -p "$neko_prof" mkdir -p "$neko_prof"
chmod 777 "$neko_prof" 2>/dev/null || true chmod 777 "$neko_prof" 2>/dev/null || true
export NEKO_HTTP_PORT="${NEKO_HTTP_PORT:-9200}" export NEKO_HTTP_PORT="${NEKO_HTTP_PORT:-9200}"
export NEKO_USER_PASS="${NEKO_USER_PASS:-live}" export NEKO_USER_PASS="${NEKO_USER_PASS:-12345678}"
export NEKO_ADMIN_PASS="${NEKO_ADMIN_PASS:-admin}" export NEKO_ADMIN_PASS="${NEKO_ADMIN_PASS:-12345678}"
export NEKO_PROFILE_HOST_DIR="$neko_prof" export NEKO_PROFILE_HOST_DIR="$neko_prof"
export NEKO_DESKTOP_SCREEN="${NEKO_DESKTOP_SCREEN:-1920x1080@30}" export NEKO_DESKTOP_SCREEN="${NEKO_DESKTOP_SCREEN:-1920x1080@30}"
export NEKO_WEBRTC_EPR="${NEKO_WEBRTC_EPR:-52000-52100}" export NEKO_WEBRTC_EPR="${NEKO_WEBRTC_EPR:-52000-52100}"

8
scripts/linux/service_ctl.sh
View File

@@ -531,8 +531,8 @@ service_neko_start() {
mkdir -p "$prof" mkdir -p "$prof"
chmod 777 "$prof" 2>/dev/null || true chmod 777 "$prof" 2>/dev/null || true
export NEKO_HTTP_PORT="${NEKO_HTTP_PORT:-9200}" export NEKO_HTTP_PORT="${NEKO_HTTP_PORT:-9200}"
export NEKO_USER_PASS="${NEKO_USER_PASS:-live}" export NEKO_USER_PASS="${NEKO_USER_PASS:-12345678}"
export NEKO_ADMIN_PASS="${NEKO_ADMIN_PASS:-admin}" export NEKO_ADMIN_PASS="${NEKO_ADMIN_PASS:-12345678}"
export NEKO_PROFILE_HOST_DIR="$prof" export NEKO_PROFILE_HOST_DIR="$prof"
export NEKO_DESKTOP_SCREEN="${NEKO_DESKTOP_SCREEN:-1920x1080@30}" export NEKO_DESKTOP_SCREEN="${NEKO_DESKTOP_SCREEN:-1920x1080@30}"
export NEKO_WEBRTC_EPR="${NEKO_WEBRTC_EPR:-52000-52100}" export NEKO_WEBRTC_EPR="${NEKO_WEBRTC_EPR:-52000-52100}"
@@ -604,8 +604,8 @@ service_neko_firefox_start() {
export NEKO_FF_DESKTOP_SCREEN="${NEKO_FF_DESKTOP_SCREEN:-1920x1080@30}" export NEKO_FF_DESKTOP_SCREEN="${NEKO_FF_DESKTOP_SCREEN:-1920x1080@30}"
export NEKO_FF_WEBRTC_EPR="${NEKO_FF_WEBRTC_EPR:-52200-52300}" export NEKO_FF_WEBRTC_EPR="${NEKO_FF_WEBRTC_EPR:-52200-52300}"
export NEKO_FF_WEBRTC_UDP_RANGE="${NEKO_FF_WEBRTC_UDP_RANGE:-52200-52300}" export NEKO_FF_WEBRTC_UDP_RANGE="${NEKO_FF_WEBRTC_UDP_RANGE:-52200-52300}"
export NEKO_USER_PASS="${NEKO_USER_PASS:-live}" export NEKO_USER_PASS="${NEKO_USER_PASS:-12345678}"
export NEKO_ADMIN_PASS="${NEKO_ADMIN_PASS:-admin}" export NEKO_ADMIN_PASS="${NEKO_ADMIN_PASS:-12345678}"
export NEKO_FF_PROFILE_HOST_DIR="$prof" export NEKO_FF_PROFILE_HOST_DIR="$prof"
export NEKO_WEBRTC_ICELITE="${NEKO_WEBRTC_ICELITE:-1}" export NEKO_WEBRTC_ICELITE="${NEKO_WEBRTC_ICELITE:-1}"
if [ -z "${NEKO_WEBRTC_NAT1TO1:-}" ]; then if [ -z "${NEKO_WEBRTC_NAT1TO1:-}" ]; then

8
src/control_plane.py
View File

@@ -659,9 +659,11 @@ def stack_summary() -> dict:
"control_url": f"http://{mdns_host}:{web_port}", "control_url": f"http://{mdns_host}:{web_port}",
"stack_env_present": STACK_ENV.is_file(), "stack_env_present": STACK_ENV.is_file(),
"neko_login": { "neko_login": {
"user_password": env.get("NEKO_USER_PASS", "live"), "user_login": "live",
"admin_password": env.get("NEKO_ADMIN_PASS", "admin"), "user_password": env.get("NEKO_USER_PASS", "12345678"),
"note_zh": "浏览器进入 Neko 时的登录口令（可在 system-stack.env 修改 NEKO_USER_PASS / NEKO_ADMIN_PASS）", "admin_login": "admin",
"admin_password": env.get("NEKO_ADMIN_PASS", "12345678"),
"note_zh": "与 WebTTY、File Browser 等一致：用户名为 live / admin，口令均为 NEKO_* 环境变量（默认 12345678）。Firefox 若卡在加载：请确认 NEKO_WEBRTC_NAT1TO1 为本机局域网 IP 且 UDP 端口放行。",
}, },
"neko_firefox_enabled": neko_ff_on, "neko_firefox_enabled": neko_ff_on,
"quick_links": ql, "quick_links": ql,

282
web-console/components/console/LiveConsoleWorkspace.tsx
View File

@@ -191,8 +191,15 @@ function Button({
); );
} }
export type LiveConsoleWorkspaceProps = {
/** 嵌入门户「网络」页：只渲染 ShellCrash 面板，不改写地址栏、不显示顶栏/Tab/底栏 */
embeddedShellCrash?: boolean;
/** 与门户首页语言同步 */
portalLang?: Lang;
};
/** 全功能控制台：默认从门户 `/` 进入后打开 `/console`。 */ /** 全功能控制台：默认从门户 `/` 进入后打开 `/console`。 */
export function LiveConsoleWorkspace() { export function LiveConsoleWorkspace({ embeddedShellCrash = false, portalLang }: LiveConsoleWorkspaceProps) {
const base = apiBase(); const base = apiBase();
const [lang, setLang] = useState<Lang>("zh"); const [lang, setLang] = useState<Lang>("zh");
const [theme, setTheme] = useState<ThemeMode>("dark"); const [theme, setTheme] = useState<ThemeMode>("dark");
@@ -448,6 +455,16 @@ export function LiveConsoleWorkspace() {
}, [fetchJson, refreshAndroidDevices, refreshServices]); }, [fetchJson, refreshAndroidDevices, refreshServices]);
useEffect(() => { useEffect(() => {
if (embeddedShellCrash) {
setTab("shellcrash");
if (portalLang === "zh" || portalLang === "en") {
setLang(portalLang);
} else {
const hub = window.localStorage.getItem("live-hub-lang");
if (hub === "zh" || hub === "en") setLang(hub);
}
return;
}
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const pathTab = pathnameToTab(window.location.pathname); const pathTab = pathnameToTab(window.location.pathname);
const nextTab = params.get("tab"); const nextTab = params.get("tab");
@@ -459,16 +476,23 @@ export function LiveConsoleWorkspace() {
else if (storedLang === "zh" || storedLang === "en") setLang(storedLang); else if (storedLang === "zh" || storedLang === "en") setLang(storedLang);
const storedTheme = window.localStorage.getItem("live-console-theme"); const storedTheme = window.localStorage.getItem("live-console-theme");
if (storedTheme === "light" || storedTheme === "dark") setTheme(storedTheme); if (storedTheme === "light" || storedTheme === "dark") setTheme(storedTheme);
}, []); }, [embeddedShellCrash, portalLang]);
useEffect(() => { useEffect(() => {
if (embeddedShellCrash) return;
document.documentElement.setAttribute("data-theme", theme); document.documentElement.setAttribute("data-theme", theme);
window.localStorage.setItem("live-console-theme", theme); window.localStorage.setItem("live-console-theme", theme);
}, [theme]); }, [theme, embeddedShellCrash]);
useEffect(() => { useEffect(() => {
if (!embeddedShellCrash) return;
if (portalLang === "zh" || portalLang === "en") setLang(portalLang);
}, [embeddedShellCrash, portalLang]);
useEffect(() => {
if (embeddedShellCrash) return;
syncUrl(tab, lang); syncUrl(tab, lang);
}, [lang, syncUrl, tab]); }, [embeddedShellCrash, lang, syncUrl, tab]);
useEffect(() => { useEffect(() => {
void boot(); void boot();
@@ -483,7 +507,7 @@ export function LiveConsoleWorkspace() {
useEffect(() => { useEffect(() => {
if (booting || error) return; if (booting || error) return;
if (tab !== "overview" && tab !== "modules") return; if (tab !== "overview" && tab !== "modules" && tab !== "shellcrash") return;
void refreshServices(); void refreshServices();
const timer = window.setInterval(() => void refreshServices(), 10000); const timer = window.setInterval(() => void refreshServices(), 10000);
return () => clearInterval(timer); return () => clearInterval(timer);
@@ -809,102 +833,116 @@ export function LiveConsoleWorkspace() {
return ( return (
<> <>
<div className="border-b border-white/[0.08] bg-slate-950/80 backdrop-blur-md"> {!embeddedShellCrash ? (
<div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-2 px-4 py-2.5 text-xs sm:px-6 lg:px-10"> <div className="border-b border-white/[0.08] bg-slate-950/80 backdrop-blur-md">
<a <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-2 px-4 py-2.5 text-xs sm:px-6 lg:px-10">
className="font-medium text-amber-400/95 transition hover:text-amber-300" <a className="font-medium text-amber-400/95 transition hover:text-amber-300" href="/">
href="/" ← {tr("返回门户首页", "Back to portal")}
> </a>
← {tr("返回门户首页", "Back to portal")} <span className="text-slate-500">
</a> {tr("无人直播 · 本页需与 API 同域（推荐 live.local:8001）", "Unmanned live · same origin as API (live.local:8001)")}
<span className="text-slate-500"> </span>
{tr("无人直播 · 本页需与 API 同域（推荐 live.local:8001）", "Unmanned live · same origin as API (live.local:8001)")} </div>
</span>
</div> </div>
</div> ) : null}
<main className="safe-pb-nav mx-auto min-h-screen max-w-7xl px-4 pb-16 pt-6 sm:px-6 lg:px-10"> <main
className={
embeddedShellCrash
? "mx-auto min-h-0 max-w-7xl px-1 pb-4 pt-1 sm:px-3"
: "safe-pb-nav mx-auto min-h-screen max-w-7xl px-4 pb-16 pt-6 sm:px-6 lg:px-10"
}
>
{toast ? ( {toast ? (
<div className="animate-toast-in fixed bottom-24 left-1/2 z-50 max-w-[min(92vw,28rem)] -translate-x-1/2 rounded-2xl border border-cyan-500/25 bg-slate-950/95 px-5 py-3 text-center text-sm text-cyan-50 shadow-lg md:bottom-6 [html[data-theme=light]_&]:border-cyan-600/25 [html[data-theme=light]_&]:bg-white/95 [html[data-theme=light]_&]:text-cyan-950"> <div className="animate-toast-in fixed bottom-24 left-1/2 z-50 max-w-[min(92vw,28rem)] -translate-x-1/2 rounded-2xl border border-cyan-500/25 bg-slate-950/95 px-5 py-3 text-center text-sm text-cyan-50 shadow-lg md:bottom-6 [html[data-theme=light]_&]:border-cyan-600/25 [html[data-theme=light]_&]:bg-white/95 [html[data-theme=light]_&]:text-cyan-950">
{toast} {toast}
</div> </div>
) : null} ) : null}
<header className="mb-8 flex flex-col gap-4"> {!embeddedShellCrash ? (
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between"> <header className="mb-8 flex flex-col gap-4">
<div> <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-cyan-400/90"> <div>
{tr("控制平面 · ARM Linux 开发板", "Control plane · ARM Linux SBC")} <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-cyan-400/90">
</p> {tr("控制平面 · ARM Linux 开发板", "Control plane · ARM Linux SBC")}
<h1 className="mt-2 text-3xl font-bold text-[color:var(--text)] sm:text-4xl"> </p>
{tr("无人直播控制中心", "Unmanned live control center")} <h1 className="mt-2 text-3xl font-bold text-[color:var(--text)] sm:text-4xl">
</h1> {tr("无人直播控制中心", "Unmanned live control center")}
<p className="mt-3 max-w-3xl text-sm text-slate-400"> </h1>
{tr( <p className="mt-3 max-w-3xl text-sm text-slate-400">
"ShellCrash 负责代理上网；本机 FFmpeg 处理推流或 HDMI 采集；Neko / Chromium 负责浏览器侧；开发板通过 USB 双头线 ADB 控制 AOSP，采集卡可走视频进 Linux。各模块独立，可分别启停。", {tr(
"ShellCrash for egress; FFmpeg for stream or HDMI; Neko/Chromium for browser; USB ADB to AOSP plus optional capture card. Modules are isolated.", "ShellCrash 负责代理上网；本机 FFmpeg 处理推流或 HDMI 采集；Neko / Chromium 负责浏览器侧；开发板通过 USB 双头线 ADB 控制 AOSP，采集卡可走视频进 Linux。各模块独立，可分别启停。",
)} "ShellCrash for egress; FFmpeg for stream or HDMI; Neko/Chromium for browser; USB ADB to AOSP plus optional capture card. Modules are isolated.",
</p> )}
</div> </p>
<div className="flex flex-wrap items-center gap-3"> </div>
<div className="meta-chip max-w-full"> <div className="flex flex-wrap items-center gap-3">
{(stack?.mdns_host || "live.local") + <div className="meta-chip max-w-full">
" · " + {(stack?.mdns_host || "live.local") +
(stack?.machine || "unknown") + " · " +
" · " + (stack?.machine || "unknown") +
(stack?.kernel || "unknown")} " · " +
(stack?.kernel || "unknown")}
</div>
<Button
className={lang === "zh" ? "border border-cyan-400/50 bg-cyan-500/10" : "border border-white/12 bg-black/20"}
onClick={() => setLang("zh")}
>
中文
</Button>
<Button
className={lang === "en" ? "border border-cyan-400/50 bg-cyan-500/10" : "border border-white/12 bg-black/20"}
onClick={() => setLang("en")}
>
EN
</Button>
<Button
className={theme === "light" ? "border border-amber-400/50 bg-amber-500/15" : "border border-white/12 bg-black/20"}
onClick={() => setTheme("light")}
title={tr("日间主题", "Light theme")}
>
{tr("☀️ 日间", "☀️ Light")}
</Button>
<Button
className={theme === "dark" ? "border border-indigo-400/50 bg-indigo-500/15" : "border border-white/12 bg-black/20"}
onClick={() => setTheme("dark")}
title={tr("夜间主题", "Dark theme")}
>
{tr("🌙 夜间", "🌙 Dark")}
</Button>
<Button className="border border-white/12 bg-black/20" onClick={() => void boot()}>
{tr("刷新", "Refresh")}
</Button>
</div> </div>
<Button
className={lang === "zh" ? "border border-cyan-400/50 bg-cyan-500/10" : "border border-white/12 bg-black/20"}
onClick={() => setLang("zh")}
>
中文
</Button>
<Button
className={lang === "en" ? "border border-cyan-400/50 bg-cyan-500/10" : "border border-white/12 bg-black/20"}
onClick={() => setLang("en")}
>
EN
</Button>
<Button
className={theme === "light" ? "border border-amber-400/50 bg-amber-500/15" : "border border-white/12 bg-black/20"}
onClick={() => setTheme("light")}
title={tr("日间主题", "Light theme")}
>
{tr("☀️ 日间", "☀️ Light")}
</Button>
<Button
className={theme === "dark" ? "border border-indigo-400/50 bg-indigo-500/15" : "border border-white/12 bg-black/20"}
onClick={() => setTheme("dark")}
title={tr("夜间主题", "Dark theme")}
>
{tr("🌙 夜间", "🌙 Dark")}
</Button>
<Button className="border border-white/12 bg-black/20" onClick={() => void boot()}>
{tr("刷新", "Refresh")}
</Button>
</div> </div>
</div>
<nav className="tab-strip" aria-label={tr("主导航", "Primary navigation")}> <nav className="tab-strip" aria-label={tr("主导航", "Primary navigation")}>
{TABS.map((item) => ( {TABS.map((item) => (
<button <button
key={item} key={item}
type="button" type="button"
className={`tab-btn ${tab === item ? "tab-btn-active" : ""}`} className={`tab-btn ${tab === item ? "tab-btn-active" : ""}`}
onClick={() => setTab(item)} onClick={() => setTab(item)}
> >
{{ {{
overview: tr("总览", "Overview"), overview: tr("总览", "Overview"),
business: tr("直播业务", "Live ops"), business: tr("直播业务", "Live ops"),
modules: tr("系统服务", "Services"), modules: tr("系统服务", "Services"),
shellcrash: "ShellCrash", shellcrash: "ShellCrash",
android: tr("安卓设备", "Android"), android: tr("安卓设备", "Android"),
config: tr("配置中心", "Config"), config: tr("配置中心", "Config"),
}[item]} }[item]}
</button> </button>
))} ))}
</nav> </nav>
</header> </header>
) : (
<div className="mb-4 flex flex-wrap items-center justify-between gap-2 border-b border-white/[0.08] pb-3">
<h2 className="text-base font-semibold text-[color:var(--text)]">ShellCrash</h2>
<Button className="border border-white/12 bg-black/20" onClick={() => void boot()}>
{tr("刷新", "Refresh")}
</Button>
</div>
)}
{booting ? ( {booting ? (
<div className="glass rounded-3xl py-24 text-center text-slate-400"> <div className="glass rounded-3xl py-24 text-center text-slate-400">
@@ -1546,36 +1584,38 @@ export function LiveConsoleWorkspace() {
) : null} ) : null}
</main> </main>
<nav {!embeddedShellCrash ? (
className="fixed bottom-0 left-0 right-0 z-40 flex justify-around border-t border-white/15 bg-black/75 py-1.5 backdrop-blur-lg [html[data-theme=light]_&]:border-slate-200/60 [html[data-theme=light]_&]:bg-white/90 md:hidden" <nav
style={{ paddingBottom: "max(0.35rem, env(safe-area-inset-bottom))" }} className="fixed bottom-0 left-0 right-0 z-40 flex justify-around border-t border-white/15 bg-black/75 py-1.5 backdrop-blur-lg [html[data-theme=light]_&]:border-slate-200/60 [html[data-theme=light]_&]:bg-white/90 md:hidden"
aria-label={tr("主导航", "Main nav")} style={{ paddingBottom: "max(0.35rem, env(safe-area-inset-bottom))" }}
> aria-label={tr("主导航", "Main nav")}
{TABS.map((item) => ( >
<button {TABS.map((item) => (
key={item} <button
type="button" key={item}
className={`btn-focus flex min-w-0 flex-1 flex-col items-center gap-0.5 rounded-xl px-1 py-1 text-[10px] font-medium ${ type="button"
tab === item ? "text-cyan-300 [html[data-theme=light]_&]:text-cyan-700" : "text-slate-400 [html[data-theme=light]_&]:text-slate-600" className={`btn-focus flex min-w-0 flex-1 flex-col items-center gap-0.5 rounded-xl px-1 py-1 text-[10px] font-medium ${
}`} tab === item ? "text-cyan-300 [html[data-theme=light]_&]:text-cyan-700" : "text-slate-400 [html[data-theme=light]_&]:text-slate-600"
onClick={() => setTab(item)} }`}
> onClick={() => setTab(item)}
<span className="text-lg leading-none" aria-hidden> >
{tabEmoji[item]} <span className="text-lg leading-none" aria-hidden>
</span> {tabEmoji[item]}
<span className="truncate"> </span>
{{ <span className="truncate">
overview: tr("总览", "Home"), {{
business: tr("业务", "Biz"), overview: tr("总览", "Home"),
modules: tr("模块", "Mods"), business: tr("业务", "Biz"),
shellcrash: "SC", modules: tr("模块", "Mods"),
android: tr("安卓", "Droid"), shellcrash: "SC",
config: tr("配置", "Cfg"), android: tr("安卓", "Droid"),
}[item]} config: tr("配置", "Cfg"),
</span> }[item]}
</button> </span>
))} </button>
</nav> ))}
</nav>
) : null}
</> </>
); );
} }

291
web-console/components/live-product/LiveControlApp.tsx
View File

@@ -9,27 +9,32 @@ import {
Clock, Clock,
Cpu, Cpu,
HardDrive, HardDrive,
Languages,
Loader2, Loader2,
Menu, Menu,
MonitorPlay, MonitorPlay,
Moon,
Network, Network,
RefreshCw, RefreshCw,
Server, Server,
Settings, Settings,
Smartphone, Smartphone,
Sparkles, Sparkles,
Sun,
Wifi, Wifi,
X, X,
} from "lucide-react"; } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import OverviewCharts from "@/components/OverviewCharts"; import OverviewCharts from "@/components/OverviewCharts";
import { LiveConsoleWorkspace } from "@/components/console/LiveConsoleWorkspace";
import { LiveAndroidWorkstation } from "@/components/live-product/LiveAndroidWorkstation"; import { LiveAndroidWorkstation } from "@/components/live-product/LiveAndroidWorkstation";
import { LiveTiktokHdmiView } from "@/components/live-product/LiveTiktokHdmiView"; import { LiveTiktokHdmiView } from "@/components/live-product/LiveTiktokHdmiView";
import { LiveYoutubeUnmannedView } from "@/components/live-product/LiveYoutubeUnmannedView"; import { LiveYoutubeUnmannedView } from "@/components/live-product/LiveYoutubeUnmannedView";
import { normalizeBrowserReachableHttpUrl } from "@/lib/panelUrls"; import { normalizeBrowserReachableHttpUrl } from "@/lib/panelUrls";
type Lang = "zh" | "en"; type Lang = "zh" | "en";
type PortalTheme = "dark" | "light";
type ViewKey = type ViewKey =
| "dashboard" | "dashboard"
| "services" | "services"
@@ -64,7 +69,13 @@ type HubDashboard = {
platform?: string; platform?: string;
ips?: string[]; ips?: string[];
quick_links?: Record<string, string>; quick_links?: Record<string, string>;
neko_login?: { user_password?: string; admin_password?: string; note_zh?: string }; neko_login?: {
user_login?: string;
user_password?: string;
admin_login?: string;
admin_password?: string;
note_zh?: string;
};
neko_firefox_enabled?: boolean; neko_firefox_enabled?: boolean;
}; };
services?: Array<{ services?: Array<{
@@ -164,6 +175,7 @@ function statusPill(status: string) {
export default function LiveControlApp() { export default function LiveControlApp() {
const base = apiBase(); const base = apiBase();
const [lang, setLang] = useState<Lang>("zh"); const [lang, setLang] = useState<Lang>("zh");
const [portalTheme, setPortalTheme] = useState<PortalTheme>("dark");
const [view, setView] = useState<ViewKey>("dashboard"); const [view, setView] = useState<ViewKey>("dashboard");
const [mobileNav, setMobileNav] = useState(false); const [mobileNav, setMobileNav] = useState(false);
const [dash, setDash] = useState<HubDashboard | null>(null); const [dash, setDash] = useState<HubDashboard | null>(null);
@@ -215,12 +227,23 @@ export default function LiveControlApp() {
useEffect(() => { useEffect(() => {
const s = window.localStorage.getItem("live-hub-lang"); const s = window.localStorage.getItem("live-hub-lang");
if (s === "zh" || s === "en") setLang(s); if (s === "zh" || s === "en") setLang(s);
const th = window.localStorage.getItem("live-hub-theme");
if (th === "light" || th === "dark") setPortalTheme(th);
}, []); }, []);
useEffect(() => { useEffect(() => {
window.localStorage.setItem("live-hub-lang", lang); window.localStorage.setItem("live-hub-lang", lang);
}, [lang]); }, [lang]);
useEffect(() => {
document.documentElement.setAttribute("data-theme", portalTheme);
try {
window.localStorage.setItem("live-hub-theme", portalTheme);
} catch {
/* ignore */
}
}, [portalTheme]);
useEffect(() => { useEffect(() => {
try { try {
if (localStorage.getItem("livehub.autorefresh") === "0") setAutoRefreshEnabled(false); if (localStorage.getItem("livehub.autorefresh") === "0") setAutoRefreshEnabled(false);
@@ -315,7 +338,7 @@ export default function LiveControlApp() {
const runProcess = async (action: "start" | "stop" | "restart", processOverride?: string) => { const runProcess = async (action: "start" | "stop" | "restart", processOverride?: string) => {
const proc = (processOverride ?? currentProc).trim(); const proc = (processOverride ?? currentProc).trim();
if (!proc) return; if (!proc) return;
setBusy(`proc:${action}`); setBusy(`proc:${action}:${proc}`);
try { try {
const path = `/${action}`; const path = `/${action}`;
const data = await fetchJson<{ output?: string; message?: string }>(path, { const data = await fetchJson<{ output?: string; message?: string }>(path, {
@@ -394,10 +417,29 @@ export default function LiveControlApp() {
const totalServices = dash?.services?.length ?? 0; const totalServices = dash?.services?.length ?? 0;
return ( return (
<div className="lp-root min-h-screen bg-[#050508] text-zinc-100 selection:bg-violet-500/30"> <div
<div className="lp-noise pointer-events-none fixed inset-0 z-0 opacity-[0.22]" aria-hidden /> className={`lp-root min-h-screen transition-colors duration-300 ${
<div className="lp-aurora pointer-events-none fixed -left-1/4 top-0 h-[42rem] w-[42rem] rounded-full bg-violet-600/20 blur-[120px]" aria-hidden /> portalTheme === "light"
<div className="lp-aurora2 pointer-events-none fixed bottom-0 right-0 h-[36rem] w-[36rem] rounded-full bg-cyan-500/10 blur-[100px]" aria-hidden /> ? "bg-slate-100 text-slate-900 selection:bg-violet-400/25"
: "bg-[#050508] text-zinc-100 selection:bg-violet-500/30"
}`}
>
<div
className={`lp-noise pointer-events-none fixed inset-0 z-0 ${portalTheme === "light" ? "opacity-[0.06]" : "opacity-[0.22]"}`}
aria-hidden
/>
<div
className={`lp-aurora pointer-events-none fixed -left-1/4 top-0 h-[42rem] w-[42rem] rounded-full blur-[120px] ${
portalTheme === "light" ? "bg-violet-400/15" : "bg-violet-600/20"
}`}
aria-hidden
/>
<div
className={`lp-aurora2 pointer-events-none fixed bottom-0 right-0 h-[36rem] w-[36rem] rounded-full blur-[100px] ${
portalTheme === "light" ? "bg-cyan-400/10" : "bg-cyan-500/10"
}`}
aria-hidden
/>
{toast ? ( {toast ? (
<motion.div <motion.div
@@ -411,17 +453,25 @@ export default function LiveControlApp() {
<div className="relative z-10 flex min-h-screen"> <div className="relative z-10 flex min-h-screen">
{/* Desktop sidebar */} {/* Desktop sidebar */}
<aside className="hidden w-64 shrink-0 flex-col border-r border-white/[0.06] bg-zinc-950/40 px-4 py-6 backdrop-blur-2xl lg:flex"> <aside
className={`hidden w-64 shrink-0 flex-col border-r px-4 py-6 backdrop-blur-2xl lg:flex ${
portalTheme === "light" ? "border-slate-200/90 bg-white/70" : "border-white/[0.06] bg-zinc-950/40"
}`}
>
<div className="flex items-center gap-2 px-2"> <div className="flex items-center gap-2 px-2">
<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-cyan-400 shadow-lg shadow-violet-500/25"> <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-cyan-400 shadow-lg shadow-violet-500/25">
<Sparkles className="h-4 w-4 text-white" /> <Sparkles className="h-4 w-4 text-white" />
</div> </div>
<div> <div>
<p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-zinc-500">Live Hub</p> <p className={`text-[10px] font-semibold uppercase tracking-[0.2em] ${portalTheme === "light" ? "text-slate-500" : "text-zinc-500"}`}>
<p className="text-sm font-semibold text-white">{t("超级业务中心", "Control Center")}</p> Live Hub
</p>
<p className={`text-sm font-semibold ${portalTheme === "light" ? "text-slate-900" : "text-white"}`}>
{t("超级业务中心", "Control Center")}
</p>
</div> </div>
</div> </div>
<nav className="mt-10 flex flex-col gap-1"> <nav className="mt-10 flex flex-1 flex-col gap-1">
{navItems.map((item) => { {navItems.map((item) => {
const Icon = item.icon; const Icon = item.icon;
const active = view === item.id; const active = view === item.id;
@@ -431,78 +481,121 @@ export default function LiveControlApp() {
type="button" type="button"
onClick={() => setView(item.id)} onClick={() => setView(item.id)}
className={`flex items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm font-medium transition ${ className={`flex items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm font-medium transition ${
active portalTheme === "light"
? "bg-white/[0.08] text-white shadow-inner shadow-white/5" ? active
: "text-zinc-500 hover:bg-white/[0.04] hover:text-zinc-200" ? "bg-violet-100/90 text-slate-900 shadow-inner shadow-violet-200/50"
: "text-slate-600 hover:bg-slate-200/60 hover:text-slate-900"
: active
? "bg-white/[0.08] text-white shadow-inner shadow-white/5"
: "text-zinc-500 hover:bg-white/[0.04] hover:text-zinc-200"
}`} }`}
> >
<Icon className={`h-4 w-4 ${active ? "text-violet-300" : "text-zinc-600"}`} /> <Icon
className={`h-4 w-4 ${
portalTheme === "light"
? active
? "text-violet-600"
: "text-slate-400"
: active
? "text-violet-300"
: "text-zinc-600"
}`}
/>
{t(item.labelZh, item.labelEn)} {t(item.labelZh, item.labelEn)}
{active ? <ChevronRight className="ml-auto h-4 w-4 text-zinc-600" /> : null} {active ? (
<ChevronRight className={`ml-auto h-4 w-4 ${portalTheme === "light" ? "text-slate-400" : "text-zinc-600"}`} />
) : null}
</button> </button>
); );
})} })}
</nav> </nav>
<div className="mt-auto space-y-2 border-t border-white/[0.06] pt-6">
<a
href="/console"
className="flex items-center justify-between rounded-xl border border-white/[0.08] bg-white/[0.03] px-3 py-2.5 text-xs text-zinc-400 transition hover:border-violet-500/30 hover:text-zinc-200"
>
{t("高级控制台", "Advanced console")}
<ArrowUpRight className="h-3.5 w-3.5" />
</a>
<div className="flex gap-1 rounded-lg bg-black/30 p-1">
<button
type="button"
className={`flex-1 rounded-md py-1.5 text-xs font-medium ${lang === "zh" ? "bg-white/10 text-white" : "text-zinc-600"}`}
onClick={() => setLang("zh")}
>
中文
</button>
<button
type="button"
className={`flex-1 rounded-md py-1.5 text-xs font-medium ${lang === "en" ? "bg-white/10 text-white" : "text-zinc-600"}`}
onClick={() => setLang("en")}
>
EN
</button>
</div>
</div>
</aside> </aside>
{/* Main */} {/* Main */}
<div className="flex min-w-0 flex-1 flex-col"> <div className="flex min-w-0 flex-1 flex-col">
<header className="sticky top-0 z-20 flex items-center justify-between gap-3 border-b border-white/[0.06] bg-zinc-950/70 px-4 py-3 backdrop-blur-xl lg:px-8"> <header
<div className="flex items-center gap-3"> className={`sticky top-0 z-20 flex items-center justify-between gap-3 border-b px-4 py-3 backdrop-blur-xl lg:px-8 ${
portalTheme === "light"
? "border-slate-200/80 bg-white/75 text-slate-900"
: "border-white/[0.06] bg-zinc-950/70 text-white"
}`}
>
<div className="flex min-w-0 items-center gap-3">
<button <button
type="button" type="button"
className="rounded-xl border border-white/10 bg-white/5 p-2 lg:hidden" className={`rounded-xl border p-2 lg:hidden ${portalTheme === "light" ? "border-slate-200 bg-white/80" : "border-white/10 bg-white/5"}`}
onClick={() => setMobileNav(true)} onClick={() => setMobileNav(true)}
aria-label="Menu" aria-label="Menu"
> >
<Menu className="h-5 w-5" /> <Menu className="h-5 w-5" />
</button> </button>
<div> <div className="min-w-0">
<h1 className="text-lg font-semibold tracking-tight text-white lg:text-xl"> <h1
className={`truncate text-lg font-semibold tracking-tight lg:text-xl ${
portalTheme === "light" ? "text-slate-900" : "text-white"
}`}
>
{t( {t(
navItems.find((n) => n.id === view)?.labelZh || "", navItems.find((n) => n.id === view)?.labelZh || "",
navItems.find((n) => n.id === view)?.labelEn || "", navItems.find((n) => n.id === view)?.labelEn || "",
)} )}
</h1> </h1>
<p className="text-xs text-zinc-500"> <p className={`truncate text-xs ${portalTheme === "light" ? "text-slate-500" : "text-zinc-500"}`}>
{dash?.stack?.mdns_host || "live.local"} · {t("暗黑", "Dark")} · {t("自动刷新", "Auto refresh")} {dash?.stack?.mdns_host || "live.local"} ·{" "}
{portalTheme === "dark" ? t("夜间", "Dark mode") : t("日间", "Light mode")} · {t("自动刷新", "Auto refresh")}
</p> </p>
</div> </div>
</div> </div>
<button <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
type="button" <button
disabled={!!busy} type="button"
onClick={() => void refreshDashboard()} onClick={() => setPortalTheme((prev) => (prev === "dark" ? "light" : "dark"))}
className="flex items-center gap-2 rounded-xl border border-white/10 bg-white/[0.04] px-3 py-2 text-xs font-medium text-zinc-300 transition hover:bg-white/[0.07] disabled:opacity-40" className={`rounded-xl border p-2 transition ${
> portalTheme === "light"
{busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="h-3.5 w-3.5" />} ? "border-slate-200 bg-white text-amber-500 shadow-sm"
{t("刷新", "Refresh")} : "border-white/10 bg-white/[0.06] text-violet-200"
</button> }`}
title={portalTheme === "dark" ? t("切换到日间", "Switch to light") : t("切换到夜间", "Switch to dark")}
aria-label={portalTheme === "dark" ? t("日间模式", "Light mode") : t("夜间模式", "Dark mode")}
aria-pressed={portalTheme === "light"}
>
{portalTheme === "dark" ? <Moon className="h-5 w-5" strokeWidth={2} /> : <Sun className="h-5 w-5" strokeWidth={2} />}
</button>
<button
type="button"
onClick={() => setLang((prev) => (prev === "zh" ? "en" : "zh"))}
className={`relative rounded-xl border p-2 transition ${
portalTheme === "light"
? "border-slate-200 bg-white text-cyan-600 shadow-sm"
: "border-white/10 bg-white/[0.06] text-cyan-200"
}`}
title={lang === "zh" ? "English" : "中文"}
aria-label={t("切换语言", "Toggle language")}
aria-pressed={lang === "en"}
>
<Languages className="h-5 w-5" strokeWidth={2} />
<span
className={`absolute -bottom-0.5 -right-0.5 flex h-4 min-w-[1rem] items-center justify-center rounded px-0.5 text-[9px] font-bold leading-none ${
portalTheme === "light" ? "bg-cyan-100 text-cyan-800" : "bg-cyan-500/30 text-cyan-100"
}`}
>
{lang === "zh" ? "中" : "A"}
</span>
</button>
<button
type="button"
disabled={!!busy}
onClick={() => void refreshDashboard()}
className={`flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-medium transition disabled:opacity-40 ${
portalTheme === "light"
? "border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
: "border-white/10 bg-white/[0.04] text-zinc-300 hover:bg-white/[0.07]"
}`}
>
{busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="h-3.5 w-3.5" />}
<span className="hidden sm:inline">{t("刷新", "Refresh")}</span>
</button>
</div>
</header> </header>
<main className="flex-1 px-4 py-6 lg:px-8 lg:py-8"> <main className="flex-1 px-4 py-6 lg:px-8 lg:py-8">
@@ -522,7 +615,7 @@ export default function LiveControlApp() {
{dashErr} {dashErr}
</div> </div>
) : null} ) : null}
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-5"> <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-5">
{[ {[
{ {
icon: Cpu, icon: Cpu,
@@ -560,14 +653,14 @@ export default function LiveControlApp() {
initial={{ opacity: 0, y: 12 }} initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.05, duration: 0.35, ease: [0.22, 1, 0.36, 1] }} transition={{ delay: i * 0.05, duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
whileHover={{ y: -3 }} whileHover={{ y: -2 }}
className="group relative overflow-hidden rounded-2xl border border-white/[0.07] bg-gradient-to-br from-white/[0.06] to-transparent p-5 shadow-xl shadow-black/20" className="group relative overflow-hidden rounded-xl border border-white/[0.07] bg-gradient-to-br from-white/[0.05] to-transparent p-3 shadow-lg shadow-black/20"
> >
<div className="absolute -right-6 -top-6 h-24 w-24 rounded-full bg-violet-500/10 blur-2xl transition group-hover:bg-violet-500/20" /> <div className="absolute -right-4 -top-4 h-16 w-16 rounded-full bg-violet-500/10 blur-xl transition group-hover:bg-violet-500/18" />
<card.icon className="h-5 w-5 text-violet-300/90" /> <card.icon className="h-4 w-4 text-violet-300/90" />
<p className="mt-4 text-[11px] font-semibold uppercase tracking-wider text-zinc-500">{card.label}</p> <p className="mt-2 text-[10px] font-semibold uppercase tracking-wider text-zinc-500">{card.label}</p>
<p className="mt-1 font-mono text-2xl font-semibold text-white">{loading ? "…" : card.value}</p> <p className="mt-0.5 font-mono text-lg font-semibold leading-tight text-white">{loading ? "…" : card.value}</p>
<p className="mt-1 text-xs text-zinc-500">{card.sub}</p> <p className="mt-0.5 text-[10px] text-zinc-500">{card.sub}</p>
</motion.div> </motion.div>
))} ))}
</div> </div>
@@ -699,19 +792,23 @@ export default function LiveControlApp() {
{dash?.stack?.neko_login ? ( {dash?.stack?.neko_login ? (
<div className="rounded-2xl border border-fuchsia-500/25 bg-gradient-to-r from-fuchsia-500/[0.08] to-violet-500/[0.06] p-5"> <div className="rounded-2xl border border-fuchsia-500/25 bg-gradient-to-r from-fuchsia-500/[0.08] to-violet-500/[0.06] p-5">
<h3 className="text-sm font-semibold text-white">Neko {t("登录口令", "passwords")}</h3> <h3 className="text-sm font-semibold text-white">Neko {t("登录", "sign-in")}</h3>
<p className="mt-1 text-[11px] text-zinc-500"> <p className="mt-1 text-[11px] text-zinc-500">
{dash.stack.neko_login.note_zh || {dash.stack.neko_login.note_zh ||
t("Chromium :9200 与 Firefox :9201（若启用）共用下列口令。", "Chromium :9200 and Firefox :9201 share these.")} t("Chromium :9200 与 Firefox :9201（若启用）共用下列账号策略。", "Chromium :9200 and Firefox :9201 share the same policy.")}
</p> </p>
<div className="mt-4 grid gap-3 sm:grid-cols-2 font-mono text-sm"> <div className="mt-4 grid gap-3 sm:grid-cols-2 font-mono text-sm">
<div className="rounded-xl border border-white/10 bg-black/40 px-4 py-3"> <div className="rounded-xl border border-white/10 bg-black/40 px-4 py-3">
<p className="text-[10px] uppercase text-zinc-500">{t("用户", "User")}</p> <p className="text-[10px] uppercase text-zinc-500">{t("用户", "User")}</p>
<p className="mt-1 text-fuchsia-200">{dash.stack.neko_login.user_password ?? "—"}</p> <p className="mt-1 text-fuchsia-200">{dash.stack.neko_login.user_login ?? "live"}</p>
<p className="mt-2 text-[10px] uppercase text-zinc-500">{t("口令", "Password")}</p>
<p className="mt-0.5 text-fuchsia-100">{dash.stack.neko_login.user_password ?? "—"}</p>
</div> </div>
<div className="rounded-xl border border-white/10 bg-black/40 px-4 py-3"> <div className="rounded-xl border border-white/10 bg-black/40 px-4 py-3">
<p className="text-[10px] uppercase text-zinc-500">{t("管理员", "Admin")}</p> <p className="text-[10px] uppercase text-zinc-500">{t("管理员", "Admin")}</p>
<p className="mt-1 text-violet-200">{dash.stack.neko_login.admin_password ?? "—"}</p> <p className="mt-1 text-violet-200">{dash.stack.neko_login.admin_login ?? "admin"}</p>
<p className="mt-2 text-[10px] uppercase text-zinc-500">{t("口令", "Password")}</p>
<p className="mt-0.5 text-violet-100">{dash.stack.neko_login.admin_password ?? "—"}</p>
</div> </div>
</div> </div>
<p className="mt-3 text-[10px] text-zinc-600"> <p className="mt-3 text-[10px] text-zinc-600">
@@ -1069,7 +1166,7 @@ export default function LiveControlApp() {
{view === "live_youtube" ? ( {view === "live_youtube" ? (
<LiveYoutubeUnmannedView <LiveYoutubeUnmannedView
t={t} t={t}
busy={!!busy} busy={busy}
entries={entries} entries={entries}
currentProc={currentProc} currentProc={currentProc}
setCurrentProc={setCurrentProc} setCurrentProc={setCurrentProc}
@@ -1078,6 +1175,8 @@ export default function LiveControlApp() {
onRunProcess={(a, pm) => void runProcess(a, pm)} onRunProcess={(a, pm) => void runProcess(a, pm)}
onSaveUrlConfig={(c) => saveUrlConfig(c)} onSaveUrlConfig={(c) => saveUrlConfig(c)}
fetchJson={fetchJson} fetchJson={fetchJson}
liveProcesses={dash?.live?.processes ?? []}
notify={notify}
/> />
) : null} ) : null}
@@ -1116,16 +1215,24 @@ export default function LiveControlApp() {
) : null} ) : null}
{view === "network" ? ( {view === "network" ? (
<div className="mx-auto max-w-3xl space-y-6"> <div className="mx-auto max-w-7xl space-y-6">
<div className="rounded-2xl border border-violet-500/25 bg-gradient-to-br from-violet-500/10 via-zinc-950/40 to-fuchsia-500/5 p-6"> <div
<h3 className="flex items-center gap-2 text-sm font-semibold text-white"> className={`rounded-2xl border p-6 ${
<Wifi className="h-4 w-4 text-violet-300" /> portalTheme === "light"
? "border-violet-200/90 bg-gradient-to-br from-violet-50 via-white to-fuchsia-50/80"
: "border-violet-500/25 bg-gradient-to-br from-violet-500/10 via-zinc-950/40 to-fuchsia-500/5"
}`}
>
<h3
className={`flex items-center gap-2 text-sm font-semibold ${portalTheme === "light" ? "text-slate-900" : "text-white"}`}
>
<Wifi className={`h-4 w-4 ${portalTheme === "light" ? "text-violet-600" : "text-violet-300"}`} />
{t("ShellCrash 网络面板", "ShellCrash panel")} {t("ShellCrash 网络面板", "ShellCrash panel")}
</h3> </h3>
<p className="mt-2 text-xs text-zinc-400"> <p className={`mt-2 text-xs ${portalTheme === "light" ? "text-slate-600" : "text-zinc-400"}`}>
{t( {t(
"此页仅用于透明代理 / 规则分流。点击下方进入 ShellCrash 专属控制台；流媒体与其它服务请在「服务」页管理。", "透明代理与规则分流直接在本页完成，无需跳转；流媒体与其它系统服务请在「服务」页管理。",
"Proxy rules only. Open ShellCrash below; use Services for SRS/Neko/etc.", "Proxy rules and YAML editing are embedded here. Use Services for SRS/Neko/etc.",
)} )}
</p> </p>
<div className="mt-6 flex flex-col items-center gap-4 sm:flex-row sm:justify-center"> <div className="mt-6 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
@@ -1140,25 +1247,31 @@ export default function LiveControlApp() {
> >
{n.tx} {n.tx}
</div> </div>
{i < 2 ? <ChevronRight className="hidden h-5 w-5 text-zinc-600 sm:block" /> : null} {i < 2 ? (
<ChevronRight
className={`hidden h-5 w-5 sm:block ${portalTheme === "light" ? "text-slate-400" : "text-zinc-600"}`}
/>
) : null}
</div> </div>
))} ))}
</div> </div>
</div> </div>
<a <div
href="/shellcrash" className={`overflow-hidden rounded-2xl border shadow-xl ${
className="flex items-center justify-between rounded-2xl border border-violet-400/30 bg-gradient-to-r from-violet-500/15 to-fuchsia-500/10 px-5 py-4 text-sm font-semibold text-violet-100 shadow-lg shadow-violet-500/10 transition hover:border-violet-400/50" portalTheme === "light" ? "border-slate-200/90 bg-white shadow-slate-200/40" : "border-white/[0.08] bg-zinc-950/50 shadow-black/30"
}`}
> >
{t("打开 ShellCrash 控制台", "Open ShellCrash console")} <div className="max-h-[min(78vh,56rem)] min-h-[22rem] overflow-y-auto overflow-x-hidden">
<ArrowUpRight className="h-4 w-4" /> <LiveConsoleWorkspace embeddedShellCrash portalLang={lang} />
</a> </div>
</div>
</div> </div>
) : null} ) : null}
{view === "settings" ? ( {view === "settings" ? (
<div className="mx-auto max-w-lg space-y-6"> <div className="mx-auto max-w-lg space-y-6">
<p className="text-sm text-zinc-400"> <p className={`text-sm ${portalTheme === "light" ? "text-slate-600" : "text-zinc-400"}`}>
{t("常用选项（本机偏好）；写入 JSON 配置请用高级控制台。", "Local preferences; use Advanced console for JSON.")} {t("常用选项（本机偏好）；完整文件与 JSON 编辑见下方链接。", "Local preferences; full file/JSON editor via the link below.")}
</p> </p>
<div className="space-y-4 rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-5"> <div className="space-y-4 rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-5">
<label className="flex cursor-pointer items-center justify-between gap-4"> <label className="flex cursor-pointer items-center justify-between gap-4">
@@ -1235,9 +1348,13 @@ export default function LiveControlApp() {
</div> </div>
<a <a
href="/console?tab=config" href="/console?tab=config"
className="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/[0.05] py-3 text-sm text-violet-200 transition hover:bg-white/[0.08]" className={`inline-flex w-full items-center justify-center gap-2 rounded-xl border py-3 text-sm transition ${
portalTheme === "light"
? "border-slate-200 bg-slate-50 text-violet-700 hover:bg-slate-100"
: "border-white/10 bg-white/[0.05] text-violet-200 hover:bg-white/[0.08]"
}`}
> >
{t("高级控制台 · 文件与 JSON", "Advanced console · files / JSON")} {t("完整配置中心（文件 / JSON）", "Full config center (files / JSON)")}
<ArrowUpRight className="h-4 w-4" /> <ArrowUpRight className="h-4 w-4" />
</a> </a>
</div> </div>

71
web-console/components/live-product/LiveProcessLiveLogCard.tsx
View File

@@ -1,9 +1,13 @@
"use client"; "use client";
import { Pause, Play, RefreshCw } from "lucide-react"; import { ExternalLink, Pause, Play, RefreshCw } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { extractDouyinRoomHints } from "@/lib/youtubeConfigUtils"; import {
extractDouyinCurrentRoomFromLog,
extractDouyinLiveUrls,
extractDouyinRoomHints,
} from "@/lib/youtubeConfigUtils";
type TFn = (zh: string, en: string) => string; type TFn = (zh: string, en: string) => string;
@@ -64,6 +68,11 @@ export function LiveProcessLiveLogCard({
const prevOnlineRef = useRef(false); const prevOnlineRef = useRef(false);
const douyinHints = extractDouyinRoomHints(urlListText); const douyinHints = extractDouyinRoomHints(urlListText);
const onlineNow = /^(online|running)$/i.test(processStatus);
const roomFromLog = extractDouyinCurrentRoomFromLog(recentLog);
const fallbackUrl = extractDouyinLiveUrls(urlListText)[0] ?? "";
const primaryRoomId = roomFromLog || (fallbackUrl.match(/live\.douyin\.com\/([a-zA-Z0-9_-]+)/i)?.[1] ?? null);
const primaryUrl = primaryRoomId ? `https://live.douyin.com/${primaryRoomId}` : fallbackUrl || null;
const pull = useCallback(async () => { const pull = useCallback(async () => {
if (!currentProc) return; if (!currentProc) return;
@@ -182,26 +191,50 @@ export function LiveProcessLiveLogCard({
<span className="font-mono text-zinc-300">{keySuffixUi || "—"}</span> <span className="font-mono text-zinc-300">{keySuffixUi || "—"}</span>
</div> </div>
) : null} ) : null}
{douyinHints.length > 0 ? ( {primaryUrl ? (
<div className="text-xs"> <div className="rounded-lg border border-violet-500/20 bg-violet-500/[0.06] px-3 py-2.5">
<span className="text-zinc-500">{t("源站房间线索", "Douyin room hints")}</span> <div className="flex flex-wrap items-center justify-between gap-2">
<span className="ml-2 inline-flex flex-wrap gap-1"> <span className="text-[11px] font-medium text-zinc-400">
{douyinHints.map((id, i) => ( {roomFromLog
<a ? t("当前直播源站（日志）", "Current source (from log)")
key={`${id}-${i}`} : onlineNow
href={`https://live.douyin.com/${id}`} ? t("配置中的源站地址", "Configured source URL")
target="_blank" : t("源站快捷入口", "Source quick link")}
rel="noreferrer" </span>
className="text-violet-300 underline-offset-2 hover:underline" <a
> href={primaryUrl}
{id} target="_blank"
</a> rel="noreferrer"
))} className="inline-flex items-center gap-1.5 rounded-lg bg-violet-500/20 px-3 py-1.5 text-xs font-medium text-violet-100 ring-1 ring-violet-500/35 transition hover:bg-violet-500/30"
</span> >
<ExternalLink className="h-3.5 w-3.5 shrink-0 opacity-90" />
{primaryRoomId || t("打开抖音直播页", "Open Douyin live")}
</a>
</div>
{douyinHints.length > 1 && roomFromLog ? (
<p className="mt-2 text-[10px] text-zinc-600">
{t("配置中还有", "Also in config:")}{" "}
{douyinHints
.filter((id) => id !== primaryRoomId)
.slice(0, 3)
.map((id) => (
<a
key={id}
href={`https://live.douyin.com/${id}`}
target="_blank"
rel="noreferrer"
className="ml-1 text-violet-400/90 underline-offset-2 hover:underline"
>
{id}
</a>
))}
{douyinHints.length > 4 ? "…" : null}
</p>
) : null}
</div> </div>
) : ( ) : (
<p className="text-[11px] text-zinc-600"> <p className="text-[11px] text-zinc-600">
{t("（地址列表中未解析到抖音房间线索）", "(No Douyin room id in URL list)")} {t("（日志与地址列表中暂无抖音房间）", "(No Douyin room in log or URL list)")}
</p> </p>
)} )}
</div> </div>

303
web-console/components/live-product/LiveYoutubeUnmannedView.tsx
View File

@@ -1,10 +1,11 @@
"use client"; "use client";
import { Loader2, MonitorPlay, Plus, Radio, RefreshCw, Trash2 } from "lucide-react"; import { Ban, Loader2, MonitorPlay, Plus, Radio, RefreshCw, Trash2 } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { import {
buildYoutubeIniFromFields, buildYoutubeIniFromFields,
extractDouyinLiveUrls,
parseYoutubeIniFields, parseYoutubeIniFields,
parseYoutubeStreamKeySuffix, parseYoutubeStreamKeySuffix,
type YoutubeIniFields, type YoutubeIniFields,
@@ -28,9 +29,108 @@ function isYoutubeProcess(e: ProcessEntry) {
const MODE_KEY = "live-hub-youtube-mode-v1"; const MODE_KEY = "live-hub-youtube-mode-v1";
type LiveProcRow = { pm2: string; process_status?: string };
function pm2StatusOnline(st?: string) {
return /^(online|running)$/i.test((st || "").trim());
}
function parseProcBusy(busy: string | null): { action: string; pm2: string } | null {
if (!busy?.startsWith("proc:")) return null;
const rest = busy.slice(5);
const idx = rest.indexOf(":");
if (idx <= 0) return null;
const action = rest.slice(0, idx);
const pm2 = rest.slice(idx + 1);
if (!pm2 || !["start", "stop", "restart"].includes(action)) return null;
return { action, pm2 };
}
function LiveStreamActionBtn({
kind,
targetPm2,
busy,
online,
label,
className,
baseLock,
onRun,
notify,
t,
compact,
}: {
kind: "start" | "stop" | "restart";
targetPm2: string;
busy: string | null;
online: boolean;
label: string;
className: string;
baseLock: boolean;
onRun: () => void;
notify: (s: string) => void;
t: TFn;
compact?: boolean;
}) {
const pb = parseProcBusy(busy);
const forThisProc = pb && pb.pm2 === targetPm2;
const loading = !!(forThisProc && pb.action === kind);
const siblingBusy = !!(forThisProc && pb.action !== kind);
const blockStart = kind === "start" && online;
const blockStop = kind === "stop" && !online;
const blockRestart = kind === "restart" && !online;
const blocked = blockStart || blockStop || blockRestart;
const hardLock = baseLock || loading || siblingBusy;
const onClick = () => {
if (loading) return;
if (siblingBusy) {
notify(t("请等待当前操作完成", "Wait for the current action to finish"));
return;
}
if (blockStart) {
notify(t("已在直播中，无需重复开始", "Already live"));
return;
}
if (blockStop) {
notify(t("当前未在直播，无法停止", "Not live — cannot stop"));
return;
}
if (blockRestart) {
notify(t("进程未运行时请使用「开始直播」", "Use Start when the process is not running"));
return;
}
if (baseLock) return;
onRun();
};
const sizeCls = compact
? "min-h-[2rem] px-3 py-1.5 text-xs font-medium"
: "min-h-[2.75rem] px-4 py-3 text-sm font-medium";
return (
<button
type="button"
onClick={onClick}
className={`relative overflow-hidden rounded-xl ring-1 transition ${sizeCls} ${className} ${
blocked || hardLock ? "cursor-not-allowed" : ""
} ${blocked && !loading ? "opacity-45" : ""} ${siblingBusy ? "opacity-35" : ""} ${loading ? "ring-violet-400/40" : ""}`}
>
{loading ? (
<span className="absolute inset-0 flex items-center justify-center bg-black/25 backdrop-blur-[2px]">
<Loader2 className={`${compact ? "h-4 w-4" : "h-6 w-6"} animate-spin text-white`} />
</span>
) : null}
<span className={`inline-flex items-center justify-center gap-1.5 ${loading ? "invisible" : ""}`}>
{blocked ? <Ban className={`${compact ? "h-3 w-3" : "h-4 w-4"} shrink-0 opacity-90`} aria-hidden /> : null}
{label}
</span>
</button>
);
}
type Props = { type Props = {
t: TFn; t: TFn;
busy: boolean; busy: string | null;
entries: ProcessEntry[]; entries: ProcessEntry[];
currentProc: string; currentProc: string;
setCurrentProc: (v: string) => void; setCurrentProc: (v: string) => void;
@@ -39,6 +139,8 @@ type Props = {
onRunProcess: (a: "start" | "stop" | "restart", processPm2?: string) => void; onRunProcess: (a: "start" | "stop" | "restart", processPm2?: string) => void;
onSaveUrlConfig: (content?: string) => void | Promise<void>; onSaveUrlConfig: (content?: string) => void | Promise<void>;
fetchJson: <T,>(path: string, init?: RequestInit) => Promise<T>; fetchJson: <T,>(path: string, init?: RequestInit) => Promise<T>;
liveProcesses: LiveProcRow[];
notify: (msg: string) => void;
}; };
export function LiveYoutubeUnmannedView({ export function LiveYoutubeUnmannedView({
@@ -52,6 +154,8 @@ export function LiveYoutubeUnmannedView({
onRunProcess, onRunProcess,
onSaveUrlConfig, onSaveUrlConfig,
fetchJson, fetchJson,
liveProcesses,
notify,
}: Props) { }: Props) {
const ytEntries = useMemo(() => entries.filter(isYoutubeProcess), [entries]); const ytEntries = useMemo(() => entries.filter(isYoutubeProcess), [entries]);
const processOptions = ytEntries.length ? ytEntries : entries; const processOptions = ytEntries.length ? ytEntries : entries;
@@ -363,7 +467,14 @@ export function LiveYoutubeUnmannedView({
updateActive({ streamKey: f.key }); updateActive({ streamKey: f.key });
}; };
const lock = busy || ytIniLoading || urlReloading || urlOptimizing; const lock = !!busy || ytIniLoading || urlReloading || urlOptimizing;
const statusForPm2 = useCallback(
(pm2: string) => liveProcesses.find((p) => p.pm2 === pm2)?.process_status,
[liveProcesses],
);
const singleOnline = pm2StatusOnline(statusForPm2(currentProc));
const urlToolbar = ( const urlToolbar = (
<div className="mt-2 flex flex-wrap items-center gap-4 text-xs text-zinc-400"> <div className="mt-2 flex flex-wrap items-center gap-4 text-xs text-zinc-400">
@@ -461,23 +572,42 @@ export function LiveYoutubeUnmannedView({
))} ))}
</select> </select>
<div className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3"> <div className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3">
{( <LiveStreamActionBtn
[ kind="start"
["start", t("开始直播", "Start"), "bg-emerald-500/20 text-emerald-200 ring-emerald-500/30"], targetPm2={currentProc}
["stop", t("停止直播", "Stop"), "bg-rose-500/15 text-rose-200 ring-rose-500/25"], busy={busy}
["restart", t("重新开始", "Restart"), "bg-amber-500/15 text-amber-200 ring-amber-500/25"], online={singleOnline}
] as const label={t("开始直播", "Start")}
).map(([a, label, cls]) => ( className="bg-emerald-500/20 text-emerald-200 ring-emerald-500/30"
<button baseLock={ytIniLoading || urlReloading || urlOptimizing}
key={a} onRun={() => onRunProcess("start")}
type="button" notify={notify}
disabled={lock} t={t}
onClick={() => onRunProcess(a)} />
className={`rounded-xl px-4 py-3 text-sm font-medium ring-1 ${cls}`} <LiveStreamActionBtn
> kind="stop"
{label} targetPm2={currentProc}
</button> busy={busy}
))} online={singleOnline}
label={t("停止直播", "Stop")}
className="bg-rose-500/15 text-rose-200 ring-rose-500/25"
baseLock={ytIniLoading || urlReloading || urlOptimizing}
onRun={() => onRunProcess("stop")}
notify={notify}
t={t}
/>
<LiveStreamActionBtn
kind="restart"
targetPm2={currentProc}
busy={busy}
online={singleOnline}
label={t("重新开始", "Restart")}
className="bg-amber-500/15 text-amber-200 ring-amber-500/25"
baseLock={ytIniLoading || urlReloading || urlOptimizing}
onRun={() => onRunProcess("restart")}
notify={notify}
t={t}
/>
</div> </div>
<p className="mt-3 text-center font-mono text-[11px] text-zinc-600"> <p className="mt-3 text-center font-mono text-[11px] text-zinc-600">
key {t("尾码", "suffix")}: {keySuffixUi || "—"} key {t("尾码", "suffix")}: {keySuffixUi || "—"}
@@ -485,8 +615,69 @@ export function LiveYoutubeUnmannedView({
</> </>
) : ( ) : (
<> <>
<div className="mt-4 rounded-xl border border-cyan-500/25 bg-gradient-to-br from-cyan-500/[0.1] via-zinc-950/50 to-violet-500/[0.06] p-4 ring-1 ring-white/[0.04]">
<h4 className="text-xs font-semibold uppercase tracking-wider text-cyan-200/90">
{t("Pro 转播实况", "Pro relay status")}
</h4>
<p className="mt-1 text-[11px] text-zinc-500">
{t("对齐桌面端工作台：每路密钥、源站、进程状态一览；点行可切换编辑。", "Like the desktop workspace: per-lane key, source, PM2 status.")}
</p>
<div className="mt-3 max-h-52 space-y-2 overflow-y-auto pr-1">
{channels.map((c) => {
const pm = (c.pm2Name ?? "").trim() || defaultPm2NameForChannel(c.id);
const st = statusForPm2(pm);
const on = pm2StatusOnline(st);
const dUrl = extractDouyinLiveUrls((c.urlLines ?? "").trim())[0];
const suf = parseYoutubeStreamKeySuffix(`key = ${c.streamKey ?? ""}`);
const sel = activeCh === c.id;
return (
<div
key={c.id}
className={`flex flex-wrap items-center gap-2 rounded-lg border px-3 py-2 text-left text-xs transition ${
sel ? "border-violet-500/45 bg-violet-500/[0.1]" : "border-white/10 bg-black/30 hover:border-white/18"
}`}
>
<button
type="button"
className="min-w-0 flex-1 text-left"
onClick={() => selectProChannel(c)}
>
<span className="font-medium text-zinc-100">{c.name}</span>
<span className="ml-2 font-mono text-[10px] text-zinc-500">
key …{suf || "—"}
</span>
</button>
<span
className={`shrink-0 rounded-md px-2 py-0.5 text-[10px] font-medium ring-1 ${
on
? "bg-emerald-500/15 text-emerald-200 ring-emerald-500/30"
: "bg-zinc-600/20 text-zinc-400 ring-zinc-500/25"
}`}
>
{on ? t("运行中", "Live") : st || t("未运行", "Idle")}
</span>
{dUrl ? (
<a
href={dUrl}
target="_blank"
rel="noreferrer"
className="max-w-[200px] truncate text-cyan-300/90 underline-offset-2 hover:underline"
onClick={(e) => e.stopPropagation()}
title={dUrl}
>
{dUrl.replace(/^https?:\/\//, "")}
</a>
) : (
<span className="text-zinc-600">—</span>
)}
</div>
);
})}
</div>
</div>
<p className="mt-3 text-xs text-zinc-500"> <p className="mt-3 text-xs text-zinc-500">
{t("点选一行即可编辑该线路；此处只列出已保存过密钥的线路。", "Pick a row to edit. Only lanes with a saved key are listed.")} {t("点选一行即可编辑该线路；下方列表为已保存密钥的线路控制。", "Pick a row above to edit; the list below is lanes with a saved key.")}
</p> </p>
{proLanesWithKey.length === 0 ? ( {proLanesWithKey.length === 0 ? (
<p className="mt-4 rounded-xl border border-white/10 bg-black/30 px-4 py-3 text-sm text-zinc-400"> <p className="mt-4 rounded-xl border border-white/10 bg-black/30 px-4 py-3 text-sm text-zinc-400">
@@ -500,6 +691,7 @@ export function LiveYoutubeUnmannedView({
const pm = (c.pm2Name ?? "").trim() || defaultPm2NameForChannel(c.id); const pm = (c.pm2Name ?? "").trim() || defaultPm2NameForChannel(c.id);
const suffix = parseYoutubeStreamKeySuffix(`key = ${c.streamKey ?? ""}`); const suffix = parseYoutubeStreamKeySuffix(`key = ${c.streamKey ?? ""}`);
const sel = activeCh === c.id; const sel = activeCh === c.id;
const rowOnline = pm2StatusOnline(statusForPm2(pm));
return ( return (
<div <div
key={c.id} key={c.id}
@@ -521,31 +713,50 @@ export function LiveYoutubeUnmannedView({
<code className="shrink-0 font-mono text-xs text-cyan-300/90">{suffix || "—"}</code> <code className="shrink-0 font-mono text-xs text-cyan-300/90">{suffix || "—"}</code>
<span className="truncate text-sm text-zinc-200">{c.name}</span> <span className="truncate text-sm text-zinc-200">{c.name}</span>
</div> </div>
<div className="flex shrink-0 flex-wrap gap-2" onClick={(e) => e.stopPropagation()}> <div
<button className="flex shrink-0 flex-wrap gap-2"
type="button" onClick={(e) => e.stopPropagation()}
disabled={lock} onKeyDown={(e) => e.stopPropagation()}
onClick={() => onRunProcess("start", pm)} >
className="rounded-lg bg-emerald-500/20 px-3 py-1.5 text-xs font-medium text-emerald-100 ring-1 ring-emerald-500/30 disabled:opacity-30" <LiveStreamActionBtn
> kind="start"
{t("开始", "Start")} targetPm2={pm}
</button> busy={busy}
<button online={rowOnline}
type="button" label={t("开始", "Start")}
disabled={lock} className="rounded-lg bg-emerald-500/20 text-emerald-100 ring-emerald-500/30"
onClick={() => onRunProcess("stop", pm)} baseLock={ytIniLoading || urlReloading || urlOptimizing}
className="rounded-lg bg-rose-500/15 px-3 py-1.5 text-xs font-medium text-rose-100 ring-1 ring-rose-500/25 disabled:opacity-30" onRun={() => onRunProcess("start", pm)}
> notify={notify}
{t("停止", "Stop")} t={t}
</button> compact
<button />
type="button" <LiveStreamActionBtn
disabled={lock} kind="stop"
onClick={() => onRunProcess("restart", pm)} targetPm2={pm}
className="rounded-lg bg-amber-500/15 px-3 py-1.5 text-xs font-medium text-amber-100 ring-1 ring-amber-500/25 disabled:opacity-30" busy={busy}
> online={rowOnline}
{t("重新开始", "Restart")} label={t("停止", "Stop")}
</button> className="rounded-lg bg-rose-500/15 text-rose-100 ring-rose-500/25"
baseLock={ytIniLoading || urlReloading || urlOptimizing}
onRun={() => onRunProcess("stop", pm)}
notify={notify}
t={t}
compact
/>
<LiveStreamActionBtn
kind="restart"
targetPm2={pm}
busy={busy}
online={rowOnline}
label={t("重新开始", "Restart")}
className="rounded-lg bg-amber-500/15 text-amber-100 ring-amber-500/25"
baseLock={ytIniLoading || urlReloading || urlOptimizing}
onRun={() => onRunProcess("restart", pm)}
notify={notify}
t={t}
compact
/>
</div> </div>
</div> </div>
</div> </div>

13
web-console/lib/youtubeConfigUtils.ts
View File

@@ -43,6 +43,19 @@ export function extractDouyinLiveUrls(urlIni: string): string[] {
return Array.from(new Set(out)).slice(0, 16); return Array.from(new Set(out)).slice(0, 16);
} }
/** 从进程日志中解析「当前」抖音房间号（取文本中最后一次出现的 live.douyin.com/xxx） */
export function extractDouyinCurrentRoomFromLog(logText: string): string | null {
if (!logText) return null;
let last: string | null = null;
for (const line of logText.split(/\r?\n/)) {
const m = line.match(/live\.douyin\.com\/([a-zA-Z0-9_-]+)/i);
if (m) last = m[1];
const m2 = line.match(/https?:\/\/[^/\s]*douyin\.com\/(\d{8,})/i);
if (m2) last = m2[1];
}
return last;
}
/** URL_config 文本中提取抖音房间线索（与 d2y electron 一致） */ /** URL_config 文本中提取抖音房间线索（与 d2y electron 一致） */
export function extractDouyinRoomHints(urlIni: string): string[] { export function extractDouyinRoomHints(urlIni: string): string[] {
const out: string[] = []; const out: string[] = [];