's'

web-console/components/live-product/LiveAndroidWorkstation.tsx

@@ -0,0 +1,597 @@
+"use client";
+
+import { ArrowUpRight, Layers, Loader2, Package, Terminal } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+type DeviceRow = { serial: string; model?: string; state: string };
+type TFn = (zh: string, en: string) => string;
+
+type AndroidOverview = {
+  serial?: string;
+  model?: string;
+  brand?: string;
+  android_version?: string;
+  sdk?: string;
+  battery?: string;
+  focus?: string;
+  resolution?: string;
+  rotation?: string;
+  screen_state?: string;
+};
+
+type PkgRow = { package: string; label?: string };
+type UiNode = {
+  label: string;
+  text?: string;
+  content_desc?: string;
+  resource_id?: string;
+  center_x: number;
+  center_y: number;
+  clickable?: boolean;
+  enabled?: boolean;
+};
+
+type Props = {
+  t: TFn;
+  notify: (msg: string) => void;
+  fetchJson: <T,>(path: string, init?: RequestInit) => Promise<T>;
+  /** Parent busy (e.g. adb actions); combined with local pending for UI lock. */
+  busy: string | null;
+  androidSerial: string;
+  setAndroidSerial: (s: string) => void;
+  devices: DeviceRow[];
+  adbAvailable: boolean;
+  scrcpyUrl: string;
+  androidShotUrl: string | null;
+  androidShotErr: string | null;
+  apkPath: string;
+  setApkPath: (v: string) => void;
+  onAndroidAction: (action: string, payload?: Record<string, unknown>) => Promise<void>;
+};
+
+export function LiveAndroidWorkstation({
+  t,
+  notify,
+  fetchJson,
+  busy,
+  androidSerial,
+  setAndroidSerial,
+  devices,
+  adbAvailable,
+  scrcpyUrl,
+  androidShotUrl,
+  androidShotErr,
+  apkPath,
+  setApkPath,
+  onAndroidAction,
+}: Props) {
+  const [overview, setOverview] = useState<AndroidOverview | null>(null);
+  const [overviewErr, setOverviewErr] = useState<string | null>(null);
+  const [pkgQuery, setPkgQuery] = useState("");
+  const [pkgList, setPkgList] = useState<PkgRow[]>([]);
+  const [shellCmd, setShellCmd] = useState("getprop ro.product.model");
+  const [shellOut, setShellOut] = useState("");
+  const [logcatLines, setLogcatLines] = useState("300");
+  const [logcatText, setLogcatText] = useState("");
+  const [logcatErr, setLogcatErr] = useState<string | null>(null);
+  const [uiNodes, setUiNodes] = useState<UiNode[]>([]);
+  const [uiErr, setUiErr] = useState<string | null>(null);
+  const [openUrl, setOpenUrl] = useState("https://");
+  const [pending, setPending] = useState<string | null>(null);
+
+  const lock = !!(busy || pending);
+
+  const loadOverview = useCallback(async () => {
+    if (!androidSerial || !adbAvailable) {
+      setOverview(null);
+      setOverviewErr(null);
+      return;
+    }
+    setPending("overview");
+    setOverviewErr(null);
+    try {
+      const o = await fetchJson<AndroidOverview>(
+        `/android/overview?serial=${encodeURIComponent(androidSerial)}`,
+      );
+      setOverview(o);
+    } catch (e) {
+      setOverview(null);
+      setOverviewErr((e as Error).message);
+    } finally {
+      setPending(null);
+    }
+  }, [adbAvailable, androidSerial, fetchJson]);
+
+  useEffect(() => {
+    void loadOverview();
+  }, [loadOverview]);
+
+  const searchPackages = async () => {
+    if (!androidSerial) {
+      notify(t("请选择设备", "Pick a device"));
+      return;
+    }
+    setPending("packages");
+    try {
+      const q = encodeURIComponent(pkgQuery.trim());
+      const data = await fetchJson<{ packages: PkgRow[] }>(
+        `/android/packages?serial=${encodeURIComponent(androidSerial)}&query=${q}&limit=80`,
+      );
+      setPkgList(data.packages || []);
+    } catch (e) {
+      notify((e as Error).message);
+      setPkgList([]);
+    } finally {
+      setPending(null);
+    }
+  };
+
+  const runShell = async () => {
+    if (!androidSerial) {
+      notify(t("请选择设备", "Pick a device"));
+      return;
+    }
+    const cmd = shellCmd.trim();
+    if (!cmd) return;
+    setPending("shell");
+    try {
+      const data = await fetchJson<{ output?: string; message?: string }>("/android/action", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "shell", serial: androidSerial, payload: { command: cmd } }),
+      });
+      setShellOut(data.output ?? data.message ?? "");
+    } catch (e) {
+      setShellOut((e as Error).message);
+    } finally {
+      setPending(null);
+    }
+  };
+
+  const refreshLogcat = async () => {
+    if (!androidSerial) {
+      notify(t("请选择设备", "Pick a device"));
+      return;
+    }
+    const n = Math.min(3000, Math.max(1, parseInt(logcatLines, 10) || 200));
+    setPending("logcat");
+    setLogcatErr(null);
+    try {
+      const data = await fetchJson<{ text?: string }>(
+        `/android/logcat?serial=${encodeURIComponent(androidSerial)}&lines=${n}`,
+      );
+      setLogcatText(data.text ?? "");
+    } catch (e) {
+      setLogcatText("");
+      setLogcatErr((e as Error).message);
+    } finally {
+      setPending(null);
+    }
+  };
+
+  const loadUiNodes = async () => {
+    if (!androidSerial) {
+      notify(t("请选择设备", "Pick a device"));
+      return;
+    }
+    setPending("ui");
+    setUiErr(null);
+    try {
+      const data = await fetchJson<{ nodes: UiNode[] }>(
+        `/android/ui?serial=${encodeURIComponent(androidSerial)}&limit=100`,
+      );
+      setUiNodes(data.nodes || []);
+    } catch (e) {
+      setUiNodes([]);
+      setUiErr((e as Error).message);
+    } finally {
+      setPending(null);
+    }
+  };
+
+  const tapNode = async (x: number, y: number) => {
+    await onAndroidAction("tap", { x, y });
+  };
+
+  const sendKey = async (keycode: string) => {
+    await onAndroidAction("key", { keycode });
+  };
+
+  const openUrlGo = async () => {
+    const u = openUrl.trim();
+    if (!u || u === "https://") {
+      notify(t("填写 URL", "Enter URL"));
+      return;
+    }
+    await onAndroidAction("open_url", { url: u });
+  };
+
+  return (
+    <div className="mx-auto max-w-5xl space-y-6">
+      <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <h3 className="text-sm font-semibold text-white">{t("设备与工作台", "Device workstation")}</h3>
+          {!adbAvailable ? (
+            <span className="text-xs text-amber-200/90">{t("宿主机未检测到 adb", "adb not found on host")}</span>
+          ) : (
+            <button
+              type="button"
+              disabled={lock || !androidSerial}
+              onClick={() => void loadOverview()}
+              className="rounded-lg border border-white/10 bg-white/[0.05] px-3 py-1.5 text-xs text-zinc-300 hover:bg-white/[0.08]"
+            >
+              {t("刷新设备信息", "Refresh device info")}
+            </button>
+          )}
+        </div>
+        <div className="mt-4 flex flex-wrap gap-2">
+          {devices.map((d) => (
+            <button
+              key={d.serial}
+              type="button"
+              onClick={() => setAndroidSerial(d.serial)}
+              className={`rounded-xl border px-4 py-2 text-left text-xs ${
+                androidSerial === d.serial
+                  ? "border-violet-500/50 bg-violet-500/10 text-white"
+                  : "border-white/10 bg-black/30 text-zinc-400"
+              }`}
+            >
+              <div className="font-medium text-zinc-200">{d.model || d.serial}</div>
+              <div className="text-[10px] text-zinc-600">{d.serial}</div>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {adbAvailable && androidSerial ? (
+        <div className="grid gap-4 lg:grid-cols-2">
+          <div className="rounded-2xl border border-violet-500/15 bg-zinc-950/50 p-5">
+            <h4 className="text-xs font-semibold uppercase tracking-wider text-violet-300/90">
+              {t("设备信息", "Device info")}
+            </h4>
+            {overviewErr ? <p className="mt-2 text-xs text-rose-300">{overviewErr}</p> : null}
+            {overview ? (
+              <dl className="mt-3 space-y-1.5 font-mono text-[11px] text-zinc-400">
+                <div>
+                  <dt className="inline text-zinc-600">model</dt>{" "}
+                  <dd className="inline text-zinc-300">
+                    {overview.brand} {overview.model}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="inline text-zinc-600">Android</dt>{" "}
+                  <dd className="inline text-zinc-300">
+                    {overview.android_version} (sdk {overview.sdk})
+                  </dd>
+                </div>
+                <div>
+                  <dt className="inline text-zinc-600">display</dt>{" "}
+                  <dd className="inline text-zinc-300">{overview.resolution}</dd>
+                </div>
+                <div>
+                  <dt className="inline text-zinc-600">rotation</dt>{" "}
+                  <dd className="inline text-zinc-300">{overview.rotation}</dd>
+                </div>
+                <div className="whitespace-pre-wrap text-[10px] leading-snug text-zinc-500">
+                  {overview.battery}
+                </div>
+                <div className="line-clamp-3 text-[10px] text-zinc-500">{overview.focus}</div>
+              </dl>
+            ) : !overviewErr ? (
+              <p className="mt-2 text-xs text-zinc-500">{t("加载中…", "Loading…")}</p>
+            ) : null}
+          </div>
+
+          <div className="rounded-2xl border border-cyan-500/15 bg-zinc-950/50 p-5">
+            <h4 className="text-xs font-semibold uppercase tracking-wider text-cyan-300/90">
+              {t("快捷控制", "Quick controls")}
+            </h4>
+            <p className="mt-2 text-[11px] text-zinc-500">
+              {t("按键与常用应用；深层调试用下方 Shell / Logcat。", "Keys & apps; use Shell / Logcat for deep debug.")}
+            </p>
+            <div className="mt-3 flex flex-wrap gap-2">
+              <button
+                type="button"
+                disabled={lock}
+                onClick={() => void sendKey("3")}
+                className="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs"
+              >
+                Home
+              </button>
+              <button
+                type="button"
+                disabled={lock}
+                onClick={() => void sendKey("4")}
+                className="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs"
+              >
+                Back
+              </button>
+              <button
+                type="button"
+                disabled={lock}
+                onClick={() => void sendKey("187")}
+                className="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs"
+              >
+                Recents
+              </button>
+              <button
+                type="button"
+                disabled={lock}
+                onClick={() => void onAndroidAction("wake")}
+                className="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs"
+              >
+                Wake
+              </button>
+              <button
+                type="button"
+                disabled={lock}
+                onClick={() => void onAndroidAction("launch_package", { package: "com.zhiliaoapp.musically" })}
+                className="rounded-lg bg-gradient-to-r from-pink-500/25 to-violet-500/25 px-3 py-1.5 text-xs ring-1 ring-white/10"
+              >
+                TikTok
+              </button>
+            </div>
+            <div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center">
+              <input
+                className="min-w-0 flex-1 rounded-lg border border-white/10 bg-black/40 px-3 py-2 text-xs"
+                value={openUrl}
+                onChange={(e) => setOpenUrl(e.target.value)}
+                placeholder="https://"
+              />
+              <button
+                type="button"
+                disabled={lock}
+                onClick={() => void openUrlGo()}
+                className="rounded-lg bg-violet-500/20 px-3 py-2 text-xs text-violet-100 ring-1 ring-violet-500/30"
+              >
+                {t("打开链接", "Open URL")}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {adbAvailable && androidSerial ? (
+        <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+          <h3 className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Package className="h-4 w-4 text-emerald-400" />
+            {t("包名检索与启动", "Packages")}
+          </h3>
+          <p className="mt-1 text-xs text-zinc-500">
+            {t("过滤 pm list packages；行内可启动或强停。", "Filter pm list packages; launch or force-stop.")}
+          </p>
+          <div className="mt-3 flex flex-col gap-2 sm:flex-row">
+            <input
+              className="min-w-0 flex-1 rounded-xl border border-white/10 bg-black/40 px-4 py-2 text-sm"
+              value={pkgQuery}
+              onChange={(e) => setPkgQuery(e.target.value)}
+              placeholder="tiktok / musically / …"
+            />
+            <button
+              type="button"
+              disabled={lock}
+              onClick={() => void searchPackages()}
+              className="rounded-xl bg-emerald-500/20 px-4 py-2 text-sm text-emerald-100 ring-1 ring-emerald-500/30"
+            >
+              {t("搜索", "Search")}
+            </button>
+          </div>
+          <ul className="mt-4 max-h-48 space-y-1 overflow-y-auto rounded-lg border border-white/5 bg-black/30 p-2 font-mono text-[11px]">
+            {pkgList.map((p) => (
+              <li key={p.package} className="flex flex-wrap items-center justify-between gap-2 py-1 text-zinc-400">
+                <span className="min-w-0 truncate text-zinc-300">{p.package}</span>
+                <span className="flex shrink-0 gap-1">
+                  <button
+                    type="button"
+                    disabled={lock}
+                    onClick={() => void onAndroidAction("launch_package", { package: p.package })}
+                    className="rounded bg-white/10 px-2 py-0.5 text-[10px] text-zinc-200"
+                  >
+                    {t("启动", "Launch")}
+                  </button>
+                  <button
+                    type="button"
+                    disabled={lock}
+                    onClick={() => void onAndroidAction("force_stop", { package: p.package })}
+                    className="rounded bg-rose-500/15 px-2 py-0.5 text-[10px] text-rose-200"
+                  >
+                    {t("强停", "Stop")}
+                  </button>
+                </span>
+              </li>
+            ))}
+            {!pkgList.length ? (
+              <li className="py-2 text-center text-zinc-600">{t("暂无结果，先搜索", "No results")}</li>
+            ) : null}
+          </ul>
+        </div>
+      ) : null}
+
+      {adbAvailable && androidSerial ? (
+        <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+          <h3 className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Terminal className="h-4 w-4 text-amber-400" />
+            {t("交互式 Shell（只读安全子集由你输入决定）", "ADB shell")}
+          </h3>
+          <p className="mt-1 text-xs text-zinc-500">
+            {t("等同 adb shell；勿执行不可逆命令。", "Same as adb shell; avoid destructive commands.")}
+          </p>
+          <textarea
+            className="mt-3 min-h-[72px] w-full resize-y rounded-xl border border-white/10 bg-black/50 p-3 font-mono text-xs text-zinc-200"
+            value={shellCmd}
+            onChange={(e) => setShellCmd(e.target.value)}
+            spellCheck={false}
+          />
+          <button
+            type="button"
+            disabled={lock}
+            onClick={() => void runShell()}
+            className="mt-2 rounded-xl bg-amber-500/20 px-4 py-2 text-sm text-amber-100 ring-1 ring-amber-500/30"
+          >
+            {pending === "shell" ? (
+              <span className="inline-flex items-center gap-2">
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Run
+              </span>
+            ) : (
+              "Run"
+            )}
+          </button>
+          {shellOut ? (
+            <pre className="mt-3 max-h-56 overflow-auto whitespace-pre-wrap rounded-lg border border-white/5 bg-black/40 p-3 font-mono text-[11px] text-zinc-400">
+              {shellOut}
+            </pre>
+          ) : null}
+        </div>
+      ) : null}
+
+      {adbAvailable && androidSerial ? (
+        <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+          <h3 className="text-sm font-semibold text-white">{t("Logcat（最近行）", "Logcat (recent)")}</h3>
+          <p className="mt-1 text-xs text-zinc-500">
+            {t("执行 logcat -d -t N，适合快速排障。", "Runs logcat -d -t N for quick triage.")}
+          </p>
+          <div className="mt-3 flex flex-wrap items-center gap-2">
+            <input
+              className="w-24 rounded-lg border border-white/10 bg-black/40 px-3 py-2 font-mono text-xs"
+              value={logcatLines}
+              onChange={(e) => setLogcatLines(e.target.value)}
+            />
+            <button
+              type="button"
+              disabled={lock}
+              onClick={() => void refreshLogcat()}
+              className="rounded-xl bg-cyan-500/20 px-4 py-2 text-sm text-cyan-100 ring-1 ring-cyan-500/30"
+            >
+              {t("拉取日志", "Pull logs")}
+            </button>
+          </div>
+          {logcatErr ? <p className="mt-2 text-xs text-rose-300">{logcatErr}</p> : null}
+          {logcatText ? (
+            <pre className="mt-3 max-h-72 overflow-auto whitespace-pre-wrap rounded-lg border border-white/5 bg-black/50 p-3 font-mono text-[10px] leading-tight text-zinc-500">
+              {logcatText}
+            </pre>
+          ) : null}
+        </div>
+      ) : null}
+
+      {adbAvailable && androidSerial ? (
+        <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+          <h3 className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Layers className="h-4 w-4 text-fuchsia-400" />
+            {t("界面节点（uiautomator dump）", "UI nodes")}
+          </h3>
+          <p className="mt-1 text-xs text-zinc-500">
+            {t("列出可交互节点，点击坐标模拟触控。", "Clickable nodes from UI dump; tap by coordinates.")}
+          </p>
+          <button
+            type="button"
+            disabled={lock}
+            onClick={() => void loadUiNodes()}
+            className="mt-3 rounded-xl border border-fuchsia-500/30 bg-fuchsia-500/10 px-4 py-2 text-sm text-fuchsia-100"
+          >
+            {t("刷新节点树", "Refresh nodes")}
+          </button>
+          {uiErr ? <p className="mt-2 text-xs text-rose-300">{uiErr}</p> : null}
+          <ul className="mt-3 max-h-64 space-y-1 overflow-y-auto rounded-lg border border-white/5 bg-black/30 p-2 text-[11px]">
+            {uiNodes.map((n, i) => (
+              <li
+                key={`${n.center_x}-${n.center_y}-${i}`}
+                className="flex flex-wrap items-center justify-between gap-2 border-b border-white/[0.04] py-1.5 text-zinc-400 last:border-0"
+              >
+                <div className="min-w-0 flex-1">
+                  <span className="text-zinc-200">{n.label}</span>
+                  {n.resource_id ? (
+                    <span className="ml-2 font-mono text-[10px] text-zinc-600">{n.resource_id}</span>
+                  ) : null}
+                  <div className="font-mono text-[10px] text-zinc-600">
+                    ({n.center_x}, {n.center_y}){n.clickable ? " · click" : ""}
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  disabled={lock}
+                  onClick={() => void tapNode(n.center_x, n.center_y)}
+                  className="shrink-0 rounded bg-white/10 px-2 py-1 text-[10px] text-zinc-200"
+                >
+                  Tap
+                </button>
+              </li>
+            ))}
+            {!uiNodes.length && !uiErr ? (
+              <li className="py-4 text-center text-zinc-600">{t("尚未加载", "Not loaded")}</li>
+            ) : null}
+          </ul>
+        </div>
+      ) : null}
+
+      <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+        <h3 className="text-sm font-semibold text-white">{t("安装 APK（设备上的路径）", "Install APK (path on device)")}</h3>
+        <p className="mt-1 text-xs text-zinc-500">
+          {t("请先用 adb push 将 apk 推到 /sdcard/ 等路径。", "Push APK to /sdcard/ via adb first.")}
+        </p>
+        <input
+          className="mt-4 w-full rounded-xl border border-white/10 bg-black/40 px-4 py-3 text-sm"
+          value={apkPath}
+          onChange={(e) => setApkPath(e.target.value)}
+        />
+        <button
+          type="button"
+          disabled={lock || !adbAvailable || !androidSerial}
+          onClick={() => void onAndroidAction("install_apk", { path: apkPath })}
+          className="mt-3 rounded-xl bg-emerald-500/20 px-4 py-2 text-sm font-medium text-emerald-100 ring-1 ring-emerald-500/30"
+        >
+          pm install
+        </button>
+      </div>
+
+      <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <h3 className="text-sm font-semibold text-white">{t("实时画面（ADB 截图）", "Live screen (ADB)")}</h3>
+          {scrcpyUrl ? (
+            <a
+              href={scrcpyUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1 text-xs text-violet-300 hover:text-violet-200"
+            >
+              ws-scrcpy <ArrowUpRight className="h-3 w-3" />
+            </a>
+          ) : null}
+        </div>
+        <p className="mt-1 text-xs text-zinc-500">
+          {t(
+            "约每 2.5 秒刷新；全帧低延迟请用 ws-scrcpy 新窗口或本页内嵌。",
+            "~2.5s ADB refresh; use ws-scrcpy for low-latency stream.",
+          )}
+        </p>
+        {!adbAvailable ? (
+          <p className="mt-3 text-sm text-amber-200/90">{t("ADB 未就绪，无法截图。", "ADB unavailable.")}</p>
+        ) : null}
+        {androidShotErr && adbAvailable ? <p className="mt-3 text-sm text-rose-300">{androidShotErr}</p> : null}
+        {androidShotUrl ? (
+          <img
+            alt="Android live"
+            className="mt-4 max-h-[min(60vh,520px)] w-full rounded-xl border border-white/10 bg-black object-contain"
+            src={androidShotUrl}
+          />
+        ) : null}
+        {adbAvailable && !androidShotUrl && !androidShotErr ? (
+          <p className="mt-6 text-center text-sm text-zinc-500">{t("加载截图…", "Loading screenshot…")}</p>
+        ) : null}
+      </div>
+
+      {scrcpyUrl ? (
+        <div className="overflow-hidden rounded-2xl border border-white/[0.08] bg-black/40">
+          <div className="flex items-center justify-between border-b border-white/5 px-4 py-3">
+            <span className="text-xs font-medium text-zinc-400">ws-scrcpy</span>
+            <a href={scrcpyUrl} target="_blank" rel="noreferrer" className="text-xs text-violet-300">
+              {t("新窗口打开", "Open tab")}
+            </a>
+          </div>
+          <iframe title="scrcpy" src={scrcpyUrl} className="h-[min(56vh,420px)] w-full bg-black" />
+        </div>
+      ) : null}
+    </div>
+  );
+}

web-console/components/live-product/LiveControlApp.tsx

@@ -5,12 +5,13 @@ import {
   Activity,
   ArrowUpRight,
   ChevronRight,
+  CirclePlay,
   Cpu,
   HardDrive,
   Loader2,
   Menu,
+  MonitorPlay,
   Network,
-  Radio,
   RefreshCw,
   Server,
   Settings,
@@ -22,10 +23,20 @@ import {
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import OverviewCharts from "@/components/OverviewCharts";
+import { LiveAndroidWorkstation } from "@/components/live-product/LiveAndroidWorkstation";
+import { LiveTiktokHdmiView } from "@/components/live-product/LiveTiktokHdmiView";
+import { LiveYoutubeUnmannedView } from "@/components/live-product/LiveYoutubeUnmannedView";
 import { normalizeBrowserReachableHttpUrl } from "@/lib/panelUrls";
 
 type Lang = "zh" | "en";
-type ViewKey = "dashboard" | "services" | "live" | "android" | "network" | "settings";
+type ViewKey =
+  | "dashboard"
+  | "services"
+  | "live_youtube"
+  | "live_tiktok"
+  | "android"
+  | "network"
+  | "settings";
 
 const apiBase = () =>
   (typeof process !== "undefined" && process.env.NEXT_PUBLIC_API_URL) || "";
@@ -66,6 +77,18 @@ type HubDashboard = {
       script?: string;
     }>;
   };
+  probes?: {
+    srs?: {
+      port?: number;
+      tcp?: { ok?: boolean; reachable?: boolean; latency_ms?: number; error?: string };
+      http?: { ok?: boolean; http_code?: number; reachable?: boolean; latency_ms?: number; error?: string };
+    };
+    neko?: {
+      port?: number;
+      tcp?: { ok?: boolean; reachable?: boolean; latency_ms?: number; error?: string };
+      http?: { ok?: boolean; http_code?: number; reachable?: boolean; latency_ms?: number; error?: string };
+    };
+  };
 };
 
 type ProcessEntry = { pm2: string; script: string; label: string };
@@ -225,7 +248,7 @@ export default function LiveControlApp() {
   }, [currentProc, fetchJson]);
 
   useEffect(() => {
-    if (!currentProc || view !== "live") return;
+    if (!currentProc || (view !== "live_youtube" && view !== "live_tiktok")) return;
     void (async () => {
       try {
         const data = await fetchJson<{ content?: string }>(
@@ -317,15 +340,16 @@ export default function LiveControlApp() {
     }
   };
 
-  const saveUrlConfig = async () => {
+  const saveUrlConfig = async (overrideContent?: string) => {
     if (!currentProc) return;
+    const content = overrideContent ?? urlConfig;
     setBusy("save:url");
     try {
       const params = new URLSearchParams({ process: currentProc });
       await fetchJson(`/save_url_config?${params}`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ content: urlConfig }),
+        body: JSON.stringify({ content }),
       });
       notify(t("URL 配置已保存", "URL config saved"));
     } catch (e) {
@@ -374,12 +398,20 @@ export default function LiveControlApp() {
   const navItems: { id: ViewKey; icon: typeof Activity; labelZh: string; labelEn: string }[] = [
     { id: "dashboard", icon: Activity, labelZh: "总览", labelEn: "Dashboard" },
     { id: "services", icon: Server, labelZh: "服务", labelEn: "Services" },
-    { id: "live", icon: Radio, labelZh: "无人直播", labelEn: "Live ops" },
+    { id: "live_youtube", icon: CirclePlay, labelZh: "YouTube 无人直播", labelEn: "YouTube unmanned" },
+    { id: "live_tiktok", icon: MonitorPlay, labelZh: "TikTok 无人直播", labelEn: "TikTok unmanned" },
     { id: "android", icon: Smartphone, labelZh: "安卓", labelEn: "Android" },
     { id: "network", icon: Network, labelZh: "网络", labelEn: "Network" },
     { id: "settings", icon: Settings, labelZh: "设置", labelEn: "Settings" },
   ];
 
+  const copyText = (text: string) => {
+    void navigator.clipboard.writeText(text).then(
+      () => notify(t("已复制", "Copied")),
+      () => notify(t("复制失败", "Copy failed")),
+    );
+  };
+
   const onlineServices =
     dash?.services?.filter((s) => s.running && s.available).length ?? 0;
   const totalServices = dash?.services?.length ?? 0;
@@ -557,6 +589,35 @@ export default function LiveControlApp() {
                       ))}
                     </div>
 
+                    {dash?.probes ? (
+                      <div className="grid gap-3 sm:grid-cols-2">
+                        {(["srs", "neko"] as const).map((key) => {
+                          const p = dash.probes?.[key];
+                          const tcpOk = p?.tcp?.reachable;
+                          const http = p?.http;
+                          const title = key === "srs" ? "SRS" : "Neko Chromium";
+                          return (
+                            <div
+                              key={key}
+                              className="rounded-2xl border border-white/[0.07] bg-zinc-950/40 p-4 backdrop-blur-sm"
+                            >
+                              <p className="text-xs font-semibold text-white">{title}</p>
+                              <p className="mt-1 font-mono text-[11px] text-zinc-500">
+                                :{p?.port ?? "—"} · TCP {tcpOk ? "OK" : "—"} · HTTP {http?.http_code ?? "—"}
+                              </p>
+                              <p className="mt-1 text-[11px] text-zinc-500">
+                                {t("延迟", "RTT")}{" "}
+                                {http?.latency_ms != null ? `${http.latency_ms} ms` : p?.tcp?.latency_ms != null ? `${p.tcp.latency_ms} ms` : "—"}
+                              </p>
+                              {!http?.reachable && http?.error ? (
+                                <p className="mt-1 line-clamp-2 text-[10px] text-amber-200/80">{http.error}</p>
+                              ) : null}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    ) : null}
+
                     <div className="grid gap-6 xl:grid-cols-3">
                       <motion.div
                         initial={{ opacity: 0 }}
@@ -597,13 +658,22 @@ export default function LiveControlApp() {
                               <li className="text-zinc-600">{t("暂无数据", "No data")}</li>
                             ) : null}
                           </ul>
-                          <button
-                            type="button"
-                            onClick={() => setView("live")}
-                            className="mt-4 w-full rounded-xl border border-violet-500/30 bg-violet-500/10 py-2 text-xs font-semibold text-violet-200"
-                          >
-                            {t("去控制台", "Go to live ops")}
-                          </button>
+                          <div className="mt-4 grid grid-cols-2 gap-2">
+                            <button
+                              type="button"
+                              onClick={() => setView("live_youtube")}
+                              className="rounded-xl border border-violet-500/30 bg-violet-500/10 py-2 text-[11px] font-semibold text-violet-200"
+                            >
+                              YouTube
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => setView("live_tiktok")}
+                              className="rounded-xl border border-cyan-500/30 bg-cyan-500/10 py-2 text-[11px] font-semibold text-cyan-200"
+                            >
+                              TikTok
+                            </button>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -680,192 +750,59 @@ export default function LiveControlApp() {
                   </div>
                 ) : null}
 
-                {view === "live" ? (
-                  <div className="mx-auto max-w-4xl space-y-6">
-                    <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
-                      <label className="text-xs font-semibold uppercase tracking-wider text-zinc-500">{t("选择进程", "Process")}</label>
-                      <select
-                        className="mt-2 w-full rounded-xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white"
-                        value={currentProc}
-                        onChange={(e) => setCurrentProc(e.target.value)}
-                      >
-                        {entries.map((e) => (
-                          <option key={e.pm2} value={e.pm2}>
-                            {e.label} ({e.pm2})
-                          </option>
-                        ))}
-                      </select>
-                      <div className="mt-4 flex flex-wrap gap-2">
-                        <button
-                          type="button"
-                          disabled={!!busy}
-                          onClick={() => void runProcess("start")}
-                          className="rounded-xl bg-emerald-500/20 px-4 py-2 text-sm font-medium text-emerald-200 ring-1 ring-emerald-500/30"
-                        >
-                          {t("启动", "Start")}
-                        </button>
-                        <button
-                          type="button"
-                          disabled={!!busy}
-                          onClick={() => void runProcess("restart")}
-                          className="rounded-xl bg-amber-500/15 px-4 py-2 text-sm font-medium text-amber-200 ring-1 ring-amber-500/25"
-                        >
-                          {t("重启", "Restart")}
-                        </button>
-                        <button
-                          type="button"
-                          disabled={!!busy}
-                          onClick={() => void runProcess("stop")}
-                          className="rounded-xl bg-rose-500/15 px-4 py-2 text-sm font-medium text-rose-200 ring-1 ring-rose-500/25"
-                        >
-                          {t("停止", "Stop")}
-                        </button>
-                      </div>
-                    </div>
-                    <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
-                      <h3 className="text-sm font-semibold text-white">{t("抖音 / TikTok 拉流地址", "Douyin / TikTok URL")}</h3>
-                      <p className="mt-1 text-xs text-zinc-500">
-                        {t("写入业务元数据（config center），推流细节仍以 URL_config.ini / PM2 为准。", "Stored in config center; streaming still uses URL_config.ini.")}
-                      </p>
-                      <input
-                        className="mt-4 w-full rounded-xl border border-white/10 bg-black/40 px-4 py-3 text-sm"
-                        value={douyinUrl}
-                        onChange={(e) => setDouyinUrl(e.target.value)}
-                        placeholder="https://live.douyin.com/..."
-                      />
-                      <button
-                        type="button"
-                        disabled={!!busy}
-                        onClick={() => void saveBusinessMeta()}
-                        className="mt-3 rounded-xl bg-violet-500/25 px-4 py-2 text-sm font-medium text-violet-100 ring-1 ring-violet-500/35"
-                      >
-                        {t("保存到配置中心", "Save to config hub")}
-                      </button>
-                    </div>
-                    <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
-                      <h3 className="text-sm font-semibold text-white">URL_config.ini</h3>
-                      <textarea
-                        className="mt-4 h-48 w-full resize-y rounded-xl border border-white/10 bg-black/50 p-4 font-mono text-xs text-zinc-300"
-                        value={urlConfig}
-                        onChange={(e) => setUrlConfig(e.target.value)}
-                        spellCheck={false}
-                      />
-                      <button
-                        type="button"
-                        disabled={!!busy}
-                        onClick={() => void saveUrlConfig()}
-                        className="mt-3 rounded-xl bg-cyan-500/20 px-4 py-2 text-sm font-medium text-cyan-100 ring-1 ring-cyan-500/30"
-                      >
-                        {t("保存 URL 配置", "Save URL config")}
-                      </button>
-                    </div>
-                    <p className="text-center text-xs text-zinc-600">
-                      {t(
-                        "FFmpeg 自动重启：请在 PM2 ecosystem 或 systemd 中配置 restart 策略；business.json 中 ffmpeg.auto_restart 供运维工具读取。",
-                        "For FFmpeg auto-restart, configure PM2 or systemd; business.json flags are for automation hooks.",
-                      )}
-                    </p>
-                  </div>
+                {view === "live_youtube" ? (
+                  <LiveYoutubeUnmannedView
+                    t={t}
+                    busy={!!busy}
+                    entries={entries}
+                    currentProc={currentProc}
+                    setCurrentProc={setCurrentProc}
+                    urlConfig={urlConfig}
+                    setUrlConfig={setUrlConfig}
+                    douyinUrl={douyinUrl}
+                    setDouyinUrl={setDouyinUrl}
+                    onRunProcess={(a) => void runProcess(a)}
+                    onSaveUrlConfig={(c) => void saveUrlConfig(c)}
+                    onSaveBusinessMeta={() => void saveBusinessMeta()}
+                    fetchJson={fetchJson}
+                  />
+                ) : null}
+
+                {view === "live_tiktok" ? (
+                  <LiveTiktokHdmiView
+                    t={t}
+                    busy={!!busy}
+                    entries={entries}
+                    currentProc={currentProc}
+                    setCurrentProc={setCurrentProc}
+                    urlConfig={urlConfig}
+                    setUrlConfig={setUrlConfig}
+                    douyinUrl={douyinUrl}
+                    setDouyinUrl={setDouyinUrl}
+                    onRunProcess={(a) => void runProcess(a)}
+                    onSaveUrlConfig={(c) => void saveUrlConfig(c)}
+                    onSaveBusinessMeta={() => void saveBusinessMeta()}
+                    onCopy={copyText}
+                  />
                 ) : null}
 
                 {view === "android" ? (
-                  <div className="mx-auto max-w-5xl space-y-6">
-                    <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
-                      <h3 className="text-sm font-semibold text-white">{t("设备", "Devices")}</h3>
-                      <div className="mt-4 flex flex-wrap gap-2">
-                        {(dash?.android?.devices || []).map((d) => (
-                          <button
-                            key={d.serial}
-                            type="button"
-                            onClick={() => setAndroidSerial(d.serial)}
-                            className={`rounded-xl border px-4 py-2 text-left text-xs ${
-                              androidSerial === d.serial
-                                ? "border-violet-500/50 bg-violet-500/10 text-white"
-                                : "border-white/10 bg-black/30 text-zinc-400"
-                            }`}
-                          >
-                            <div className="font-medium text-zinc-200">{d.model || d.serial}</div>
-                            <div className="text-[10px] text-zinc-600">{d.serial}</div>
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-                    <div className="flex flex-wrap gap-2">
-                      <button
-                        type="button"
-                        disabled={!!busy}
-                        onClick={() =>
-                          void androidAction("launch_package", { package: "com.zhiliaoapp.musically" })
-                        }
-                        className="rounded-xl bg-gradient-to-r from-pink-500/30 to-violet-500/30 px-4 py-2 text-sm font-medium ring-1 ring-white/10"
-                      >
-                        TikTok
-                      </button>
-                      <button
-                        type="button"
-                        disabled={!!busy}
-                        onClick={() => void androidAction("wake")}
-                        className="rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm"
-                      >
-                        Wake
-                      </button>
-                    </div>
-                    <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
-                      <h3 className="text-sm font-semibold text-white">{t("安装 APK（设备上的路径）", "Install APK (path on device)")}</h3>
-                      <p className="mt-1 text-xs text-zinc-500">
-                        {t("请先用 adb push 将 apk 推到 /sdcard/ 等路径。", "Push APK to /sdcard/ via adb first.")}
-                      </p>
-                      <input
-                        className="mt-4 w-full rounded-xl border border-white/10 bg-black/40 px-4 py-3 text-sm"
-                        value={apkPath}
-                        onChange={(e) => setApkPath(e.target.value)}
-                      />
-                      <button
-                        type="button"
-                        disabled={!!busy}
-                        onClick={() => void androidAction("install_apk", { path: apkPath })}
-                        className="mt-3 rounded-xl bg-emerald-500/20 px-4 py-2 text-sm font-medium text-emerald-100 ring-1 ring-emerald-500/30"
-                      >
-                        pm install
-                      </button>
-                    </div>
-                    <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
-                      <h3 className="text-sm font-semibold text-white">{t("实时画面（ADB 截图）", "Live screen (ADB)")}</h3>
-                      <p className="mt-1 text-xs text-zinc-500">
-                        {t(
-                          "约每 2.5 秒刷新一次；无需 ws-scrcpy。点击下方「新窗口」可尝试流式画面。",
-                          "~2.5s refresh via ADB; no ws-scrcpy required. Open ws-scrcpy in a new tab for streaming.",
-                        )}
-                      </p>
-                      {!dash?.android?.adb_available ? (
-                        <p className="mt-3 text-sm text-amber-200/90">{t("ADB 未就绪，无法截图。", "ADB unavailable.")}</p>
-                      ) : null}
-                      {androidShotErr && dash?.android?.adb_available ? (
-                        <p className="mt-3 text-sm text-rose-300">{androidShotErr}</p>
-                      ) : null}
-                      {androidShotUrl ? (
-                        <img
-                          alt="Android live"
-                          className="mt-4 max-h-[min(60vh,520px)] w-full rounded-xl border border-white/10 bg-black object-contain"
-                          src={androidShotUrl}
-                        />
-                      ) : null}
-                      {dash?.android?.adb_available && !androidShotUrl && !androidShotErr ? (
-                        <p className="mt-6 text-center text-sm text-zinc-500">{t("加载截图…", "Loading screenshot…")}</p>
-                      ) : null}
-                    </div>
-                    {scrcpyUrl ? (
-                      <div className="overflow-hidden rounded-2xl border border-white/[0.08] bg-black/40">
-                        <div className="flex items-center justify-between border-b border-white/5 px-4 py-3">
-                          <span className="text-xs font-medium text-zinc-400">ws-scrcpy</span>
-                          <a href={scrcpyUrl} target="_blank" rel="noreferrer" className="text-xs text-violet-300">
-                            {t("新窗口打开", "Open tab")}
-                          </a>
-                        </div>
-                        <iframe title="scrcpy" src={scrcpyUrl} className="h-[min(56vh,420px)] w-full bg-black" />
-                      </div>
-                    ) : null}
-                  </div>
+                  <LiveAndroidWorkstation
+                    t={t}
+                    notify={notify}
+                    fetchJson={fetchJson}
+                    busy={busy}
+                    androidSerial={androidSerial}
+                    setAndroidSerial={setAndroidSerial}
+                    devices={dash?.android?.devices || []}
+                    adbAvailable={!!dash?.android?.adb_available}
+                    scrcpyUrl={scrcpyUrl}
+                    androidShotUrl={androidShotUrl}
+                    androidShotErr={androidShotErr}
+                    apkPath={apkPath}
+                    setApkPath={setApkPath}
+                    onAndroidAction={(action, payload) => androidAction(action, payload ?? {})}
+                  />
                 ) : null}
 
                 {view === "network" ? (

web-console/components/live-product/LiveTiktokHdmiView.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { Cable, Copy, Monitor } from "lucide-react";
+import { useMemo, useState } from "react";
+
+type ProcessEntry = { pm2: string; script: string; label: string };
+
+type TFn = (zh: string, en: string) => string;
+
+function isTiktokProcess(e: ProcessEntry) {
+  return /tiktok/i.test(e.script) || /tiktok/i.test(e.pm2);
+}
+
+type HdmiPreset = { id: string; labelZh: string; labelEn: string; spec: string; hintZh: string; hintEn: string };
+
+const PRESETS: HdmiPreset[] = [
+  {
+    id: "720p60",
+    labelZh: "720p @ 60Hz",
+    labelEn: "720p @ 60Hz",
+    spec: "1280x720, 59.94/60Hz, RGB/YUV 有限",
+    hintZh: "板端 HDMI 输出与采集卡 EDID 对齐；OBS 画布 1280×720。",
+    hintEn: "Match SoC HDMI timing to capture card EDID; OBS 1280×720.",
+  },
+  {
+    id: "1080p30",
+    labelZh: "1080p @ 30Hz",
+    labelEn: "1080p @ 30Hz",
+    spec: "1920x1080, 30Hz, 适合 USB 采集带宽紧张场景",
+    hintZh: "USB3 采集常更稳；检查线缆长度与屏蔽。",
+    hintEn: "Often more stable on USB3 capture; check cable quality.",
+  },
+  {
+    id: "1080p60",
+    labelZh: "1080p @ 60Hz",
+    labelEn: "1080p @ 60Hz",
+    spec: "1920x1080, 60Hz, 高刷转播",
+    hintZh: "需确认采集卡与 SoC 同时支持 1080p60；过热会掉帧。",
+    hintEn: "Requires 1080p60 on both ends; thermal throttling may drop frames.",
+  },
+];
+
+type Props = {
+  t: TFn;
+  busy: boolean;
+  entries: ProcessEntry[];
+  currentProc: string;
+  setCurrentProc: (v: string) => void;
+  urlConfig: string;
+  setUrlConfig: (v: string) => void;
+  douyinUrl: string;
+  setDouyinUrl: (v: string) => void;
+  onRunProcess: (a: "start" | "stop" | "restart") => void;
+  onSaveUrlConfig: (content?: string) => void;
+  onSaveBusinessMeta: () => void;
+  onCopy: (text: string) => void;
+};
+
+export function LiveTiktokHdmiView({
+  t,
+  busy,
+  entries,
+  currentProc,
+  setCurrentProc,
+  urlConfig,
+  setUrlConfig,
+  douyinUrl,
+  setDouyinUrl,
+  onRunProcess,
+  onSaveUrlConfig,
+  onSaveBusinessMeta,
+  onCopy,
+}: Props) {
+  const tkEntries = useMemo(() => entries.filter(isTiktokProcess), [entries]);
+  const [expanded, setExpanded] = useState<string | null>("1080p30");
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-6">
+      <div className="rounded-2xl border border-cyan-500/20 bg-gradient-to-br from-cyan-500/10 via-transparent to-violet-500/5 p-6">
+        <div className="flex items-center gap-2">
+          <Cable className="h-5 w-5 text-cyan-300" />
+          <h2 className="text-base font-semibold text-white">{t("TikTok 无人直播 · HDMI", "TikTok unmanned · HDMI")}</h2>
+        </div>
+        <p className="mt-2 text-xs text-zinc-500">
+          {t(
+            "TikTok 无多频道概念：单路转播到 HDMI。下列为常见时序与排障要点，便于你在板子与采集侧做兼容测试。",
+            "Single-path HDMI relay; presets for timing compatibility tests.",
+          )}
+        </p>
+      </div>
+
+      <div className="grid gap-3 md:grid-cols-3">
+        {PRESETS.map((p) => {
+          const open = expanded === p.id;
+          return (
+            <button
+              key={p.id}
+              type="button"
+              onClick={() => setExpanded(open ? null : p.id)}
+              className={`rounded-2xl border p-4 text-left transition ${
+                open ? "border-cyan-500/40 bg-cyan-500/10" : "border-white/[0.08] bg-zinc-950/50 hover:border-white/15"
+              }`}
+            >
+              <div className="flex items-center gap-2 text-sm font-semibold text-white">
+                <Monitor className="h-4 w-4 text-cyan-400" />
+                {t(p.labelZh, p.labelEn)}
+              </div>
+              <p className="mt-2 font-mono text-[11px] text-zinc-400">{p.spec}</p>
+              {open ? <p className="mt-2 text-xs text-zinc-500">{t(p.hintZh, p.hintEn)}</p> : null}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+        <label className="text-xs font-semibold uppercase tracking-wider text-zinc-500">{t("TikTok 进程", "TikTok process")}</label>
+        <select
+          className="mt-2 w-full rounded-xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white"
+          value={currentProc}
+          onChange={(e) => setCurrentProc(e.target.value)}
+        >
+          {(tkEntries.length ? tkEntries : entries).map((e) => (
+            <option key={e.pm2} value={e.pm2}>
+              {e.label} ({e.pm2})
+            </option>
+          ))}
+        </select>
+        <div className="mt-4 flex flex-wrap gap-2">
+          <button
+            type="button"
+            disabled={!!busy}
+            onClick={() => onRunProcess("start")}
+            className="rounded-xl bg-emerald-500/20 px-4 py-2 text-sm font-medium text-emerald-200 ring-1 ring-emerald-500/30"
+          >
+            {t("启动", "Start")}
+          </button>
+          <button
+            type="button"
+            disabled={!!busy}
+            onClick={() => onRunProcess("restart")}
+            className="rounded-xl bg-amber-500/15 px-4 py-2 text-sm font-medium text-amber-200 ring-1 ring-amber-500/25"
+          >
+            {t("重启", "Restart")}
+          </button>
+          <button
+            type="button"
+            disabled={!!busy}
+            onClick={() => onRunProcess("stop")}
+            className="rounded-xl bg-rose-500/15 px-4 py-2 text-sm font-medium text-rose-200 ring-1 ring-rose-500/25"
+          >
+            {t("停止", "Stop")}
+          </button>
+        </div>
+      </div>
+
+      <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+        <h3 className="text-sm font-semibold text-white">{t("拉流地址（业务元数据）", "Source URL (hub)")}</h3>
+        <input
+          className="mt-4 w-full rounded-xl border border-white/10 bg-black/40 px-4 py-3 text-sm"
+          value={douyinUrl}
+          onChange={(e) => setDouyinUrl(e.target.value)}
+          placeholder="https://live.douyin.com/..."
+        />
+        <button
+          type="button"
+          disabled={!!busy}
+          onClick={() => onSaveBusinessMeta()}
+          className="mt-3 rounded-xl bg-violet-500/25 px-4 py-2 text-sm font-medium text-violet-100 ring-1 ring-violet-500/35"
+        >
+          {t("保存", "Save")}
+        </button>
+      </div>
+
+      <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+        <div className="flex items-center justify-between gap-2">
+          <h3 className="text-sm font-semibold text-white">URL_config.ini</h3>
+          <button
+            type="button"
+            className="inline-flex items-center gap-1 text-xs text-cyan-300 hover:text-cyan-200"
+            onClick={() => onCopy(urlConfig)}
+          >
+            <Copy className="h-3.5 w-3.5" />
+            {t("复制全文", "Copy all")}
+          </button>
+        </div>
+        <textarea
+          className="mt-4 h-40 w-full resize-y rounded-xl border border-white/10 bg-black/50 p-4 font-mono text-xs text-zinc-300"
+          value={urlConfig}
+          onChange={(e) => setUrlConfig(e.target.value)}
+          spellCheck={false}
+        />
+        <button
+          type="button"
+          disabled={!!busy}
+          onClick={() => onSaveUrlConfig()}
+          className="mt-3 rounded-xl bg-cyan-500/20 px-4 py-2 text-sm font-medium text-cyan-100 ring-1 ring-cyan-500/30"
+        >
+          {t("保存 URL 配置", "Save URL config")}
+        </button>
+      </div>
+    </div>
+  );
+}

web-console/components/live-product/LiveYoutubeUnmannedView.tsx

@@ -0,0 +1,626 @@
+"use client";
+
+import { Loader2, MonitorPlay, Plus, Radio, RefreshCw, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import {
+  buildYoutubeIniFromFields,
+  extractDouyinLiveUrls,
+  parseYoutubeIniFields,
+  parseYoutubeStreamKeySuffix,
+  type YoutubeIniFields,
+} from "@/lib/youtubeConfigUtils";
+import {
+  defaultPm2NameForChannel,
+  loadYoutubeProChannels,
+  newChannelId,
+  saveYoutubeProChannels,
+  type YoutubeProChannel,
+} from "@/lib/youtubeProChannels";
+
+type ProcessEntry = { pm2: string; script: string; label: string };
+
+type TFn = (zh: string, en: string) => string;
+
+function isYoutubeProcess(e: ProcessEntry) {
+  return /youtube/i.test(e.script) || /youtube/i.test(e.pm2);
+}
+
+const MODE_KEY = "live-hub-youtube-mode-v1";
+
+type Props = {
+  t: TFn;
+  busy: boolean;
+  entries: ProcessEntry[];
+  currentProc: string;
+  setCurrentProc: (v: string) => void;
+  urlConfig: string;
+  setUrlConfig: (v: string) => void;
+  douyinUrl: string;
+  setDouyinUrl: (v: string) => void;
+  onRunProcess: (a: "start" | "stop" | "restart") => void;
+  onSaveUrlConfig: (content?: string) => void;
+  onSaveBusinessMeta: () => void;
+  fetchJson: <T,>(path: string, init?: RequestInit) => Promise<T>;
+};
+
+export function LiveYoutubeUnmannedView({
+  t,
+  busy,
+  entries,
+  currentProc,
+  setCurrentProc,
+  urlConfig,
+  setUrlConfig,
+  douyinUrl,
+  setDouyinUrl,
+  onRunProcess,
+  onSaveUrlConfig,
+  onSaveBusinessMeta,
+  fetchJson,
+}: Props) {
+  const ytEntries = useMemo(() => entries.filter(isYoutubeProcess), [entries]);
+  const processOptions = ytEntries.length ? ytEntries : entries;
+
+  const [mode, setMode] = useState<"single" | "pro">("single");
+  const [channels, setChannels] = useState<YoutubeProChannel[]>([]);
+  const [activeCh, setActiveCh] = useState<string>("");
+  const [youtubeIniText, setYoutubeIniText] = useState("");
+  const [ytFields, setYtFields] = useState<YoutubeIniFields>({
+    key: "",
+    rtmps: true,
+    bitrate: "",
+    fastAudio: false,
+  });
+  const [ytIniStatus, setYtIniStatus] = useState<string | null>(null);
+  const [ytIniLoading, setYtIniLoading] = useState(false);
+  const [proUrlDraft, setProUrlDraft] = useState("");
+
+  useEffect(() => {
+    try {
+      const m = window.localStorage.getItem(MODE_KEY);
+      if (m === "pro" || m === "single") setMode(m);
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  const setModePersist = (m: "single" | "pro") => {
+    setMode(m);
+    if (m === "pro") {
+      const ch = channels.find((c) => c.id === activeCh) ?? channels[0];
+      if (ch) {
+        const u = (ch.urlLines ?? "").trim();
+        setProUrlDraft(u || urlConfig);
+      }
+    }
+    try {
+      window.localStorage.setItem(MODE_KEY, m);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  useEffect(() => {
+    const list = loadYoutubeProChannels();
+    const initial =
+      list.length > 0
+        ? list
+        : (() => {
+            const id = newChannelId();
+            return [
+              {
+                id,
+                name: "线路 1",
+                streamKey: "",
+                urlLines: "",
+                pm2Name: defaultPm2NameForChannel(id),
+                notes: "",
+              },
+            ];
+          })();
+    setChannels(initial);
+    if (!list.length) saveYoutubeProChannels(initial);
+  }, []);
+
+  useEffect(() => {
+    if (channels.length && !activeCh) setActiveCh(channels[0].id);
+  }, [channels, activeCh]);
+
+  const persistChannels = useCallback((next: YoutubeProChannel[]) => {
+    setChannels(next);
+    saveYoutubeProChannels(next);
+  }, []);
+
+  const active = channels.find((c) => c.id === activeCh) || channels[0];
+
+  const loadYoutubeIni = useCallback(async () => {
+    if (!currentProc) return;
+    setYtIniLoading(true);
+    setYtIniStatus(null);
+    try {
+      const data = await fetchJson<{ content?: string }>(
+        `/get_config?process=${encodeURIComponent(currentProc)}`,
+      );
+      const text = data.content ?? "";
+      setYoutubeIniText(text);
+      setYtFields(parseYoutubeIniFields(text));
+    } catch (e) {
+      setYtIniStatus((e as Error).message);
+    } finally {
+      setYtIniLoading(false);
+    }
+  }, [currentProc, fetchJson]);
+
+  useEffect(() => {
+    if (!currentProc) return;
+    void loadYoutubeIni();
+  }, [currentProc, loadYoutubeIni]);
+
+  const updateActive = (patch: Partial<YoutubeProChannel>) => {
+    if (!active) return;
+    persistChannels(channels.map((c) => (c.id === active.id ? { ...c, ...patch } : c)));
+  };
+
+  const saveYoutubeIniToServer = async (content: string) => {
+    if (!currentProc) {
+      setYtIniStatus(t("请选择进程", "Pick a process"));
+      return;
+    }
+    setYtIniLoading(true);
+    setYtIniStatus(null);
+    try {
+      await fetchJson("/save_config", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content }),
+      });
+      setYoutubeIniText(content);
+      setYtIniStatus(t("youtube.ini 已保存", "youtube.ini saved"));
+    } catch (e) {
+      setYtIniStatus((e as Error).message);
+    } finally {
+      setYtIniLoading(false);
+    }
+  };
+
+  const applyFieldsAndSave = async () => {
+    const body = buildYoutubeIniFromFields(ytFields);
+    await saveYoutubeIniToServer(body);
+  };
+
+  const syncFieldsFromText = () => {
+    setYtFields(parseYoutubeIniFields(youtubeIniText));
+    setYtIniStatus(t("已从下方原文同步到表单", "Synced from raw"));
+  };
+
+  const keySuffixUi = useMemo(() => {
+    if (mode === "single") return parseYoutubeStreamKeySuffix(`key = ${ytFields.key}`);
+    const k = active?.streamKey ?? "";
+    return parseYoutubeStreamKeySuffix(`key = ${k}`);
+  }, [mode, ytFields.key, active?.streamKey]);
+
+  const urlTextForPreview = mode === "pro" ? proUrlDraft : urlConfig;
+  const douyinUrls = useMemo(() => extractDouyinLiveUrls(urlTextForPreview), [urlTextForPreview]);
+
+  const saveProUrlAndServer = async () => {
+    if (!active) return;
+    updateActive({ urlLines: proUrlDraft });
+    setUrlConfig(proUrlDraft);
+    onSaveUrlConfig(proUrlDraft);
+  };
+
+  const pushProStreamKeyToServer = async () => {
+    if (!active) return;
+    const base = parseYoutubeIniFields(youtubeIniText || buildYoutubeIniFromFields(ytFields));
+    const f: YoutubeIniFields = {
+      key: (active.streamKey ?? "").trim(),
+      rtmps: base.rtmps,
+      bitrate: base.bitrate,
+      fastAudio: base.fastAudio,
+    };
+    const body = buildYoutubeIniFromFields(f);
+    await saveYoutubeIniToServer(body);
+    updateActive({ streamKey: f.key });
+  };
+
+  const lock = busy || ytIniLoading;
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-6">
+      <div className="rounded-2xl border border-violet-500/25 bg-gradient-to-br from-violet-500/[0.12] via-zinc-950/80 to-cyan-500/5 p-6 shadow-xl shadow-violet-900/10">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-red-500/30 to-violet-600/30 ring-1 ring-white/10">
+              <MonitorPlay className="h-5 w-5 text-red-200" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold tracking-tight text-white">
+                {t("YouTube 无人直播", "YouTube unmanned live")}
+              </h2>
+              <p className="mt-0.5 text-xs text-zinc-500">
+                {t(
+                  "对齐桌面客户端「直播」页：单路配置与多路 Pro 编排，无账号登录。",
+                  "Desktop-style live control: single or Pro lanes, no account login.",
+                )}
+              </p>
+            </div>
+          </div>
+          <div className="flex rounded-xl border border-white/10 bg-black/30 p-1">
+            <button
+              type="button"
+              onClick={() => setModePersist("single")}
+              className={`rounded-lg px-4 py-2 text-xs font-medium transition ${
+                mode === "single" ? "bg-violet-500/25 text-white" : "text-zinc-500 hover:text-zinc-300"
+              }`}
+            >
+              {t("单频道", "Single")}
+            </button>
+            <button
+              type="button"
+              onClick={() => setModePersist("pro")}
+              className={`rounded-lg px-4 py-2 text-xs font-medium transition ${
+                mode === "pro" ? "bg-violet-500/25 text-white" : "text-zinc-500 hover:text-zinc-300"
+              }`}
+            >
+              {t("多频道 Pro", "Multi Pro")}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="rounded-2xl border border-amber-500/20 bg-zinc-950/60 p-6 ring-1 ring-white/[0.04]">
+        <div className="flex items-center gap-2 text-amber-200/90">
+          <Radio className="h-4 w-4" />
+          <h3 className="text-sm font-semibold text-white">{t("直播开关", "Live control")}</h3>
+        </div>
+        <label className="mt-4 block text-xs font-semibold uppercase tracking-wider text-zinc-500">
+          {t("进程（PM2）", "PM2 process")}
+        </label>
+        <select
+          className="mt-2 w-full rounded-xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white"
+          value={currentProc}
+          onChange={(e) => setCurrentProc(e.target.value)}
+        >
+          {processOptions.map((e) => (
+            <option key={e.pm2} value={e.pm2}>
+              {e.label} ({e.pm2})
+            </option>
+          ))}
+        </select>
+        {mode === "pro" && active ? (
+          <p className="mt-2 font-mono text-[11px] text-cyan-300/80">
+            Pro {t("建议独立进程名", "suggested")}: {active.pm2Name || defaultPm2NameForChannel(active.id)}
+          </p>
+        ) : null}
+        <div className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3">
+          {(
+            [
+              ["start", t("开始直播", "Start"), "bg-emerald-500/20 text-emerald-200 ring-emerald-500/30"],
+              ["stop", t("停止直播", "Stop"), "bg-rose-500/15 text-rose-200 ring-rose-500/25"],
+              ["restart", t("重新开始", "Restart"), "bg-amber-500/15 text-amber-200 ring-amber-500/25"],
+            ] as const
+          ).map(([a, label, cls]) => (
+            <button
+              key={a}
+              type="button"
+              disabled={lock}
+              onClick={() => onRunProcess(a)}
+              className={`rounded-xl px-4 py-3 text-sm font-medium ring-1 ${cls}`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        <p className="mt-3 text-center font-mono text-[11px] text-zinc-600">
+          key {t("尾码（参考）", "suffix")}: {keySuffixUi || "—"}
+        </p>
+      </div>
+
+      {mode === "single" ? (
+        <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+          <h3 className="text-sm font-semibold text-white">{t("YouTube 相关设置", "YouTube settings")}</h3>
+          <p className="mt-1 text-xs text-zinc-500">
+            {t("编辑 config/youtube.ini（与桌面端一致字段）。不使用 Google 登录。", "Edits config/youtube.ini. No Google OAuth.")}
+          </p>
+
+          <div className="mt-4 space-y-3">
+            <label className="block text-xs text-zinc-400">{t("串流密钥", "Stream key")}</label>
+            <input
+              className="w-full rounded-xl border border-white/10 bg-black/40 px-4 py-3 text-sm font-mono text-zinc-200"
+              spellCheck={false}
+              autoComplete="off"
+              value={ytFields.key}
+              onChange={(e) => setYtFields((f) => ({ ...f, key: e.target.value }))}
+              placeholder="xxxx-xxxx-xxxx-xxxx-xxxx"
+            />
+            <div className="grid gap-3 sm:grid-cols-3">
+              <label className="flex flex-col gap-1 text-xs text-zinc-400">
+                RTMPS
+                <select
+                  className="rounded-lg border border-white/10 bg-black/40 px-3 py-2 text-sm text-white"
+                  value={ytFields.rtmps ? "1" : "0"}
+                  onChange={(e) => setYtFields((f) => ({ ...f, rtmps: e.target.value === "1" }))}
+                >
+                  <option value="1">{t("是（默认）", "Yes")}</option>
+                  <option value="0">{t("否 → RTMP", "No")}</option>
+                </select>
+              </label>
+              <label className="flex flex-col gap-1 text-xs text-zinc-400">
+                {t("比特率 kbps", "Bitrate kbps")}
+                <input
+                  className="rounded-lg border border-white/10 bg-black/40 px-3 py-2 font-mono text-sm"
+                  value={ytFields.bitrate}
+                  onChange={(e) => setYtFields((f) => ({ ...f, bitrate: e.target.value }))}
+                  placeholder="4000"
+                />
+              </label>
+              <label className="flex cursor-pointer items-center gap-2 pt-6 text-xs text-zinc-300">
+                <input
+                  type="checkbox"
+                  className="rounded border-white/20 bg-black/40"
+                  checked={ytFields.fastAudio}
+                  onChange={(e) => setYtFields((f) => ({ ...f, fastAudio: e.target.checked }))}
+                />
+                fast_audio（{t("轻量音频", "lighter audio")}）
+              </label>
+            </div>
+          </div>
+
+          <div className="mt-4 flex flex-wrap gap-2">
+            <button
+              type="button"
+              disabled={lock}
+              onClick={() => void loadYoutubeIni()}
+              className="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/[0.05] px-4 py-2 text-sm text-zinc-200"
+            >
+              <RefreshCw className={`h-3.5 w-3.5 ${ytIniLoading ? "animate-spin" : ""}`} />
+              {t("重新读取", "Reload")}
+            </button>
+            <button
+              type="button"
+              disabled={lock}
+              onClick={() => void applyFieldsAndSave()}
+              className="inline-flex items-center gap-2 rounded-xl bg-violet-500/25 px-4 py-2 text-sm font-medium text-violet-100 ring-1 ring-violet-500/35"
+            >
+              {ytIniLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+              {t("保存 youtube.ini", "Save youtube.ini")}
+            </button>
+            <button
+              type="button"
+              disabled={lock}
+              onClick={syncFieldsFromText}
+              className="rounded-xl border border-white/10 px-4 py-2 text-sm text-zinc-400"
+            >
+              {t("从原文同步表单", "Parse raw")}
+            </button>
+          </div>
+
+          <details className="mt-4 rounded-xl border border-white/5 bg-black/20 p-3">
+            <summary className="cursor-pointer text-xs text-zinc-500">{t("高级：youtube.ini 原文", "Raw youtube.ini")}</summary>
+            <textarea
+              className="mt-2 h-36 w-full resize-y rounded-lg border border-white/10 bg-black/50 p-3 font-mono text-[11px] text-zinc-400"
+              value={youtubeIniText}
+              onChange={(e) => setYoutubeIniText(e.target.value)}
+              spellCheck={false}
+            />
+            <button
+              type="button"
+              disabled={lock}
+              className="mt-2 rounded-lg bg-cyan-500/15 px-3 py-1.5 text-xs text-cyan-200"
+              onClick={() => void saveYoutubeIniToServer(youtubeIniText)}
+            >
+              {t("保存原文", "Save raw")}
+            </button>
+          </details>
+
+          {ytIniStatus ? <p className="mt-2 font-mono text-xs text-zinc-500">{ytIniStatus}</p> : null}
+        </div>
+      ) : (
+        <div className="space-y-6">
+          <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <h3 className="text-sm font-semibold text-white">{t("Pro 线路列表", "Pro channels")}</h3>
+              <button
+                type="button"
+                disabled={lock}
+                className="inline-flex items-center gap-1 rounded-lg bg-violet-500/20 px-3 py-1.5 text-xs text-violet-100 ring-1 ring-violet-500/30"
+                onClick={() => {
+                  const id = newChannelId();
+                  const nc: YoutubeProChannel = {
+                    id,
+                    name: `${t("线路", "Ch")} ${channels.length + 1}`,
+                    streamKey: "",
+                    urlLines: "",
+                    pm2Name: defaultPm2NameForChannel(id),
+                    notes: "",
+                  };
+                  persistChannels([...channels, nc]);
+                  setActiveCh(id);
+                  setProUrlDraft("");
+                }}
+              >
+                <Plus className="h-3.5 w-3.5" />
+                {t("新增线路", "Add")}
+              </button>
+            </div>
+            <div className="mt-3 flex flex-wrap gap-2">
+              {channels.map((c) => (
+                <button
+                  key={c.id}
+                  type="button"
+                  onClick={() => {
+                    if (active && mode === "pro") {
+                      persistChannels(
+                        channels.map((x) => (x.id === active.id ? { ...x, urlLines: proUrlDraft } : x)),
+                      );
+                    }
+                    const u = (c.urlLines ?? "").trim();
+                    setProUrlDraft(u || urlConfig);
+                    setActiveCh(c.id);
+                  }}
+                  className={`rounded-xl border px-3 py-2 text-left text-xs ${
+                    activeCh === c.id ? "border-violet-500/50 bg-violet-500/10 text-white" : "border-white/10 bg-black/30 text-zinc-400"
+                  }`}
+                >
+                  <div className="font-medium text-zinc-200">{c.name}</div>
+                  <div className="font-mono text-[10px] text-zinc-600">{c.pm2Name || defaultPm2NameForChannel(c.id)}</div>
+                </button>
+              ))}
+            </div>
+
+            {active ? (
+              <div className="mt-4 space-y-3 border-t border-white/5 pt-4">
+                <input
+                  className="w-full rounded-xl border border-white/10 bg-black/40 px-3 py-2 text-sm"
+                  value={active.name}
+                  onChange={(e) => updateActive({ name: e.target.value })}
+                  placeholder={t("线路显示名", "Channel name")}
+                />
+                <input
+                  className="w-full rounded-xl border border-white/10 bg-black/40 px-3 py-2 font-mono text-sm"
+                  value={active.pm2Name ?? defaultPm2NameForChannel(active.id)}
+                  onChange={(e) => updateActive({ pm2Name: e.target.value })}
+                  placeholder="youtube2__…"
+                />
+                <label className="block text-xs text-zinc-500">{t("串流密钥（本线路）", "Stream key for this lane")}</label>
+                <input
+                  className="w-full rounded-xl border border-white/10 bg-black/40 px-3 py-2 font-mono text-sm"
+                  spellCheck={false}
+                  value={active.streamKey ?? ""}
+                  onChange={(e) => updateActive({ streamKey: e.target.value })}
+                  placeholder="key / rtmp(s) URL"
+                />
+                <div className="flex flex-wrap gap-2">
+                  <button
+                    type="button"
+                    disabled={lock}
+                    onClick={() => void pushProStreamKeyToServer()}
+                    className="rounded-xl bg-violet-500/25 px-4 py-2 text-sm text-violet-100 ring-1 ring-violet-500/35"
+                  >
+                    {t("将本线路密钥写入服务器 youtube.ini", "Push key → server youtube.ini")}
+                  </button>
+                </div>
+                <p className="text-[11px] text-amber-200/70">
+                  {t(
+                    "服务器仅一份 youtube.ini：推送会覆盖；多路并行请在板上为每路配置独立 PM2 与独立 config 目录，或轮流推送。",
+                    "Server has one youtube.ini; overwrite. For true parallel lanes use separate PM2 + config dirs on the host.",
+                  )}
+                </p>
+                <textarea
+                  className="h-16 w-full resize-y rounded-xl border border-white/10 bg-black/40 p-3 text-xs text-zinc-300"
+                  value={active.notes ?? ""}
+                  onChange={(e) => updateActive({ notes: e.target.value })}
+                  placeholder={t("备注", "Notes")}
+                />
+                <button
+                  type="button"
+                  disabled={lock || channels.length < 2}
+                  className="inline-flex items-center gap-1 text-xs text-rose-300 hover:text-rose-200 disabled:opacity-30"
+                  onClick={() => {
+                    const next = channels.filter((c) => c.id !== active.id);
+                    persistChannels(next);
+                    setActiveCh(next[0]?.id || "");
+                  }}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                  {t("删除线路", "Remove")}
+                </button>
+              </div>
+            ) : null}
+          </div>
+
+          <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+            <h3 className="text-sm font-semibold text-white">{t("当前线路 · 直播地址列表", "URL list (this lane)")}</h3>
+            <textarea
+              className="mt-4 min-h-[160px] w-full resize-y rounded-xl border border-white/10 bg-black/50 p-4 font-mono text-xs text-zinc-300"
+              value={proUrlDraft}
+              onChange={(e) => setProUrlDraft(e.target.value)}
+              spellCheck={false}
+              placeholder="https://live.douyin.com/..."
+            />
+            <div className="mt-3 flex flex-wrap gap-2">
+              <button
+                type="button"
+                disabled={lock}
+                onClick={() => {
+                  setProUrlDraft(urlConfig);
+                  setYtIniStatus(t("已从服务器草稿填充", "Loaded from server draft"));
+                }}
+                className="rounded-xl border border-white/10 px-4 py-2 text-sm text-zinc-300"
+              >
+                {t("与全局 URL 同步", "Sync from global")}
+              </button>
+              <button
+                type="button"
+                disabled={lock}
+                onClick={() => void saveProUrlAndServer()}
+                className="rounded-xl bg-cyan-500/20 px-4 py-2 text-sm text-cyan-100 ring-1 ring-cyan-500/30"
+              >
+                {t("保存到服务器并记入本线路", "Save to server + lane")}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+        <h3 className="text-sm font-semibold text-white">{t("抖音源站（业务元数据）", "Douyin source (metadata)")}</h3>
+        <p className="mt-1 text-xs text-zinc-500">{t("写入 business JSON，供运维脚本读取。", "business.json for automation.")}</p>
+        <input
+          className="mt-4 w-full rounded-xl border border-white/10 bg-black/40 px-4 py-3 text-sm"
+          value={douyinUrl}
+          onChange={(e) => setDouyinUrl(e.target.value)}
+          placeholder="https://live.douyin.com/..."
+        />
+        <button
+          type="button"
+          disabled={lock}
+          onClick={() => void onSaveBusinessMeta()}
+          className="mt-3 rounded-xl bg-violet-500/25 px-4 py-2 text-sm text-violet-100 ring-1 ring-violet-500/35"
+        >
+          {t("保存到配置中心", "Save to hub")}
+        </button>
+      </div>
+
+      <div className="rounded-2xl border border-white/[0.08] bg-zinc-950/50 p-6">
+        <h3 className="text-sm font-semibold text-white">{t("直播地址列表 · URL_config.ini", "URL_config.ini")}</h3>
+        <p className="mt-1 text-xs text-zinc-500">
+          {mode === "pro"
+            ? t("单频道模式在此编辑全局文件；Pro 线路请用上方「当前线路」块保存。", "Pro lanes use the lane editor above.")
+            : t("一行一个直播间地址。", "One URL per line.")}
+        </p>
+        {mode === "single" ? (
+          <>
+            <textarea
+              className="mt-4 min-h-[200px] w-full resize-y rounded-xl border border-white/10 bg-black/50 p-4 font-mono text-xs text-zinc-300"
+              value={urlConfig}
+              onChange={(e) => setUrlConfig(e.target.value)}
+              spellCheck={false}
+            />
+            <button
+              type="button"
+              disabled={lock}
+              onClick={() => void onSaveUrlConfig()}
+              className="mt-3 rounded-xl bg-cyan-500/20 px-4 py-2 text-sm text-cyan-100 ring-1 ring-cyan-500/30"
+            >
+              {t("保存 URL 配置", "Save URL config")}
+            </button>
+          </>
+        ) : (
+          <p className="mt-4 text-xs text-zinc-600">{t("Pro 模式：请使用「当前线路」中的地址列表。", "Use lane URL list in Pro mode.")}</p>
+        )}
+        {douyinUrls.length > 0 ? (
+          <div className="mt-4 rounded-xl border border-white/5 bg-black/30 p-3">
+            <p className="text-xs font-semibold text-zinc-400">{t("解析到的源站链接", "Parsed Douyin URLs")}</p>
+            <ul className="mt-2 space-y-1 font-mono text-[11px] text-cyan-200/90">
+              {douyinUrls.map((u) => (
+                <li key={u}>{u}</li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}