1238 lines
67 KiB
TypeScript
1238 lines
67 KiB
TypeScript
"use client";
|
||
|
||
import { type ChangeEvent, type MouseEvent, useCallback, useEffect, useState } from "react";
|
||
|
||
type Lang = "zh" | "en";
|
||
type TabKey = "overview" | "business" | "modules" | "shellcrash" | "android" | "config";
|
||
|
||
type LoadAvg = { "1m"?: number; "5m"?: number; "15m"?: number };
|
||
type Capacity = { total?: number; free?: number; used?: number; available?: number };
|
||
type ProcessEntry = { pm2: string; script: string; label: string };
|
||
type ProcessStatusResponse = {
|
||
process_status?: string;
|
||
recent_log?: string;
|
||
recent_error?: string;
|
||
output?: string;
|
||
pm2_output?: string;
|
||
message?: string;
|
||
};
|
||
type ManagedRoot = {
|
||
root_id: string;
|
||
label: string;
|
||
description: string;
|
||
path: string;
|
||
exists: boolean;
|
||
allow_create: boolean;
|
||
allow_delete: boolean;
|
||
recursive: boolean;
|
||
default_file?: string | null;
|
||
file_count: number;
|
||
};
|
||
type ManagedFile = { path: string; size: number; mtime: number };
|
||
type StackSummary = {
|
||
hostname?: string;
|
||
mdns_host?: string;
|
||
machine?: string;
|
||
kernel?: string;
|
||
ips?: string[];
|
||
dashboard_url?: string;
|
||
control_url?: string;
|
||
};
|
||
type ServiceItem = {
|
||
service_id: string;
|
||
label: string;
|
||
description: string;
|
||
available: boolean;
|
||
running: boolean;
|
||
status: string;
|
||
detail?: string;
|
||
url?: string;
|
||
host?: string;
|
||
port?: string;
|
||
message?: string;
|
||
};
|
||
type SystemSnapshot = {
|
||
cpu_load?: LoadAvg;
|
||
disk?: Capacity;
|
||
memory?: Capacity;
|
||
netdata?: { available?: boolean; version?: string };
|
||
};
|
||
type HardwareProfile = {
|
||
arch?: string;
|
||
ffmpeg_hwaccels?: string[];
|
||
gpu?: { present?: boolean; driver?: string };
|
||
npu?: { present?: boolean; devices?: string[] };
|
||
recommendation?: {
|
||
video_decoder?: string;
|
||
hdmi_player?: string;
|
||
stability_mode?: string;
|
||
};
|
||
};
|
||
type AndroidDevice = {
|
||
serial: string;
|
||
state: string;
|
||
usb?: string;
|
||
product?: string;
|
||
model?: string;
|
||
device?: 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 AndroidNode = {
|
||
label: string;
|
||
text?: string;
|
||
content_desc?: string;
|
||
resource_id?: string;
|
||
class_name?: string;
|
||
package?: string;
|
||
bounds?: string;
|
||
center_x: number;
|
||
center_y: number;
|
||
clickable?: boolean;
|
||
focusable?: boolean;
|
||
scrollable?: boolean;
|
||
enabled?: boolean;
|
||
};
|
||
type AndroidPackage = {
|
||
package: string;
|
||
label?: string;
|
||
};
|
||
type PreviewMode = "tap" | "double_tap" | "long_press";
|
||
|
||
const TABS: TabKey[] = ["overview", "business", "modules", "shellcrash", "android", "config"];
|
||
const SHELLCRASH_ROOT_IDS = new Set(["shellcrash-configs", "shellcrash-yamls", "shellcrash-jsons"]);
|
||
|
||
const apiBase = () =>
|
||
(typeof process !== "undefined" && process.env.NEXT_PUBLIC_API_URL) || "";
|
||
|
||
function formatBytes(value?: number) {
|
||
if (!value) return "0 B";
|
||
const units = ["B", "KB", "MB", "GB", "TB"];
|
||
let amount = value;
|
||
let index = 0;
|
||
while (amount >= 1024 && index < units.length - 1) {
|
||
amount /= 1024;
|
||
index += 1;
|
||
}
|
||
return `${amount.toFixed(amount >= 10 || index === 0 ? 0 : 1)} ${units[index]}`;
|
||
}
|
||
|
||
function statusTone(status: string) {
|
||
if (status === "online") return "border-emerald-500/30 bg-emerald-500/10 text-emerald-200";
|
||
if (status === "stopped") return "border-slate-500/30 bg-slate-500/10 text-slate-300";
|
||
if (status === "configured") return "border-violet-500/30 bg-violet-500/10 text-violet-200";
|
||
if (status === "unavailable") return "border-slate-700/30 bg-slate-800/50 text-slate-500";
|
||
if (status === "error") return "border-rose-500/30 bg-rose-500/10 text-rose-200";
|
||
return "border-cyan-500/30 bg-cyan-500/10 text-cyan-200";
|
||
}
|
||
|
||
function isTabKey(value: string | null): value is TabKey {
|
||
return value !== null && (TABS as string[]).includes(value);
|
||
}
|
||
|
||
function pathnameToTab(pathname: string): TabKey | null {
|
||
const normalized = pathname.replace(/\/+$/, "") || "/";
|
||
if (normalized === "/shellcrash") return "shellcrash";
|
||
if (normalized === "/android") return "android";
|
||
return null;
|
||
}
|
||
|
||
function tabPath(tab: TabKey) {
|
||
if (tab === "shellcrash") return "/shellcrash";
|
||
if (tab === "android") return "/android";
|
||
return "/";
|
||
}
|
||
|
||
function parseResolution(resolution?: string) {
|
||
const match = resolution?.match(/(\d+)x(\d+)/);
|
||
if (!match) return null;
|
||
return { width: Number(match[1]), height: Number(match[2]) };
|
||
}
|
||
|
||
function Button({
|
||
children,
|
||
className,
|
||
disabled,
|
||
onClick,
|
||
}: {
|
||
children: React.ReactNode;
|
||
className?: string;
|
||
disabled?: boolean;
|
||
onClick?: () => void;
|
||
}) {
|
||
return (
|
||
<button
|
||
className={`btn-focus rounded-xl px-3 py-2 text-xs font-semibold text-white disabled:cursor-not-allowed disabled:opacity-40 ${className || ""}`}
|
||
disabled={disabled}
|
||
onClick={onClick}
|
||
>
|
||
{children}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
export default function Home() {
|
||
const base = apiBase();
|
||
const [lang, setLang] = useState<Lang>("zh");
|
||
const [tab, setTab] = useState<TabKey>("overview");
|
||
const tr = useCallback((zh: string, en: string) => (lang === "zh" ? zh : en), [lang]);
|
||
|
||
const [booting, setBooting] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [toast, setToast] = useState<string | null>(null);
|
||
const [busy, setBusy] = useState<string | null>(null);
|
||
|
||
const [entries, setEntries] = useState<ProcessEntry[]>([]);
|
||
const [currentProcess, setCurrentProcess] = useState("");
|
||
const [processStatus, setProcessStatus] = useState("unknown");
|
||
const [recentLog, setRecentLog] = useState("");
|
||
const [recentError, setRecentError] = useState("");
|
||
|
||
const [stack, setStack] = useState<StackSummary | null>(null);
|
||
const [services, setServices] = useState<ServiceItem[]>([]);
|
||
const [snapshot, setSnapshot] = useState<SystemSnapshot | null>(null);
|
||
const [hardware, setHardware] = useState<HardwareProfile | null>(null);
|
||
|
||
const [roots, setRoots] = useState<ManagedRoot[]>([]);
|
||
const [rootId, setRootId] = useState("");
|
||
const [files, setFiles] = useState<ManagedFile[]>([]);
|
||
const [filePath, setFilePath] = useState("");
|
||
const [fileContent, setFileContent] = useState("");
|
||
|
||
const [androidAvailable, setAndroidAvailable] = useState(false);
|
||
const [androidDevices, setAndroidDevices] = useState<AndroidDevice[]>([]);
|
||
const [androidSerial, setAndroidSerial] = useState("");
|
||
const [androidOverview, setAndroidOverview] = useState<AndroidOverview | null>(null);
|
||
const [androidNodes, setAndroidNodes] = useState<AndroidNode[]>([]);
|
||
const [androidPackages, setAndroidPackages] = useState<AndroidPackage[]>([]);
|
||
const [androidPackageQuery, setAndroidPackageQuery] = useState("");
|
||
const [androidText, setAndroidText] = useState("");
|
||
const [androidPackage, setAndroidPackage] = useState("com.zhiliaoapp.musically");
|
||
const [androidUrl, setAndroidUrl] = useState("https://www.tiktok.com");
|
||
const [androidShell, setAndroidShell] = useState("");
|
||
const [androidOutput, setAndroidOutput] = useState("");
|
||
const [shotNonce, setShotNonce] = useState(Date.now());
|
||
const [previewMode, setPreviewMode] = useState<PreviewMode>("tap");
|
||
const [previewPoint, setPreviewPoint] = useState<{ x: number; y: number } | null>(null);
|
||
const [fileImportKey, setFileImportKey] = useState(0);
|
||
|
||
const currentRoot = roots.find((item) => item.root_id === rootId) ?? null;
|
||
const shellRoots = roots.filter((item) => SHELLCRASH_ROOT_IDS.has(item.root_id));
|
||
const otherRoots = roots.filter((item) => !SHELLCRASH_ROOT_IDS.has(item.root_id));
|
||
const shellcrashService = services.find((item) => item.service_id === "shellcrash") ?? null;
|
||
const androidService = services.find((item) => item.service_id === "android_panel") ?? null;
|
||
const rawAndroidPanelUrl =
|
||
androidService?.host && androidService.port
|
||
? `http://${androidService.host}:${androidService.port}`
|
||
: stack?.mdns_host
|
||
? `http://${stack.mdns_host}:5000`
|
||
: "";
|
||
const androidResolution = parseResolution(androidOverview?.resolution);
|
||
|
||
const notify = useCallback((message: string) => {
|
||
setToast(message);
|
||
window.setTimeout(() => setToast(null), 2500);
|
||
}, []);
|
||
|
||
const fetchJson = useCallback(
|
||
async <T,>(path: string, init?: RequestInit): Promise<T> => {
|
||
const response = await fetch(`${base}${path}`, init);
|
||
const data = (await response.json()) as T & { error?: string };
|
||
if (!response.ok) {
|
||
throw new Error(data.error || `HTTP ${response.status}`);
|
||
}
|
||
return data;
|
||
},
|
||
[base],
|
||
);
|
||
|
||
const syncUrl = useCallback((nextTab: TabKey, nextLang: Lang) => {
|
||
const url = new URL(window.location.href);
|
||
url.pathname = tabPath(nextTab);
|
||
if (url.pathname === "/") {
|
||
url.searchParams.set("tab", nextTab);
|
||
} else {
|
||
url.searchParams.delete("tab");
|
||
}
|
||
url.searchParams.set("lang", nextLang);
|
||
window.history.replaceState(null, "", url.toString());
|
||
window.localStorage.setItem("live-console-lang", nextLang);
|
||
}, []);
|
||
|
||
const refreshProcess = useCallback(async () => {
|
||
if (!currentProcess) return;
|
||
const data = await fetchJson<ProcessStatusResponse>(
|
||
`/status?process=${encodeURIComponent(currentProcess)}`,
|
||
);
|
||
setProcessStatus(data.process_status || "unknown");
|
||
setRecentLog(data.recent_log || "");
|
||
setRecentError(data.recent_error || "");
|
||
}, [currentProcess, fetchJson]);
|
||
|
||
const refreshServices = useCallback(async () => {
|
||
const [serviceData, snapshotData, hardwareData] = await Promise.all([
|
||
fetchJson<{ services?: ServiceItem[] }>("/stack/services"),
|
||
fetchJson<SystemSnapshot>("/system_snapshot"),
|
||
fetchJson<HardwareProfile>("/hardware_profile"),
|
||
]);
|
||
setServices(serviceData.services || []);
|
||
setSnapshot(snapshotData);
|
||
setHardware(hardwareData);
|
||
}, [fetchJson]);
|
||
|
||
const refreshFiles = useCallback(
|
||
async (selectedRoot: string, preferredPath?: string) => {
|
||
if (!selectedRoot) return;
|
||
const data = await fetchJson<{ files?: ManagedFile[] }>(
|
||
`/managed_files?root=${encodeURIComponent(selectedRoot)}`,
|
||
);
|
||
const nextFiles = data.files || [];
|
||
setFiles(nextFiles);
|
||
const expected = preferredPath || filePath;
|
||
if (expected && nextFiles.some((item) => item.path === expected)) {
|
||
setFilePath(expected);
|
||
} else {
|
||
setFilePath(nextFiles[0]?.path || "");
|
||
}
|
||
},
|
||
[fetchJson, filePath],
|
||
);
|
||
|
||
const refreshAndroidDevices = useCallback(async () => {
|
||
const data = await fetchJson<{ available?: boolean; devices?: AndroidDevice[] }>("/android/devices");
|
||
const nextDevices = data.devices || [];
|
||
const nextSerial =
|
||
androidSerial && nextDevices.some((item) => item.serial === androidSerial)
|
||
? androidSerial
|
||
: nextDevices[0]?.serial || "";
|
||
setAndroidAvailable(Boolean(data.available));
|
||
setAndroidDevices(nextDevices);
|
||
setAndroidSerial(nextSerial);
|
||
return nextSerial;
|
||
}, [androidSerial, fetchJson]);
|
||
|
||
const refreshAndroidOverview = useCallback(
|
||
async (serial: string) => {
|
||
if (!serial) {
|
||
setAndroidOverview(null);
|
||
return;
|
||
}
|
||
const data = await fetchJson<AndroidOverview>(
|
||
`/android/overview?serial=${encodeURIComponent(serial)}`,
|
||
);
|
||
setAndroidOverview(data);
|
||
},
|
||
[fetchJson],
|
||
);
|
||
|
||
const refreshAndroidPackages = useCallback(
|
||
async (serial: string, query = androidPackageQuery) => {
|
||
if (!serial) {
|
||
setAndroidPackages([]);
|
||
return;
|
||
}
|
||
const data = await fetchJson<{ packages?: AndroidPackage[] }>(
|
||
`/android/packages?serial=${encodeURIComponent(serial)}&query=${encodeURIComponent(query)}&limit=60`,
|
||
);
|
||
setAndroidPackages(data.packages || []);
|
||
},
|
||
[androidPackageQuery, fetchJson],
|
||
);
|
||
|
||
const refreshAndroidUi = useCallback(
|
||
async (serial: string) => {
|
||
if (!serial) {
|
||
setAndroidNodes([]);
|
||
return;
|
||
}
|
||
const data = await fetchJson<{ nodes?: AndroidNode[] }>(
|
||
`/android/ui?serial=${encodeURIComponent(serial)}&limit=80`,
|
||
);
|
||
setAndroidNodes(data.nodes || []);
|
||
},
|
||
[fetchJson],
|
||
);
|
||
|
||
const openManagedFile = useCallback(
|
||
async (nextRoot: string, nextPath: string) => {
|
||
setRootId(nextRoot);
|
||
setFilePath(nextPath);
|
||
await refreshFiles(nextRoot, nextPath);
|
||
},
|
||
[refreshFiles],
|
||
);
|
||
|
||
const boot = useCallback(async () => {
|
||
setBooting(true);
|
||
setError(null);
|
||
try {
|
||
const [monitor, info, managed] = await Promise.all([
|
||
fetchJson<{ entries?: ProcessEntry[] }>("/process_monitor"),
|
||
fetchJson<{ stack?: StackSummary }>("/server_info"),
|
||
fetchJson<{ roots?: ManagedRoot[] }>("/managed_roots"),
|
||
]);
|
||
setEntries(monitor.entries || []);
|
||
setCurrentProcess(monitor.entries?.[0]?.pm2 || "");
|
||
setStack(info.stack || null);
|
||
setRoots(managed.roots || []);
|
||
setRootId(managed.roots?.[0]?.root_id || "");
|
||
await Promise.all([refreshServices(), refreshAndroidDevices()]);
|
||
} catch (reason) {
|
||
setError((reason as Error).message);
|
||
} finally {
|
||
setBooting(false);
|
||
}
|
||
}, [fetchJson, refreshAndroidDevices, refreshServices]);
|
||
|
||
useEffect(() => {
|
||
const params = new URLSearchParams(window.location.search);
|
||
const pathTab = pathnameToTab(window.location.pathname);
|
||
const nextTab = params.get("tab");
|
||
const nextLang = params.get("lang");
|
||
const storedLang = window.localStorage.getItem("live-console-lang");
|
||
if (pathTab) setTab(pathTab);
|
||
else if (isTabKey(nextTab)) setTab(nextTab);
|
||
if (nextLang === "zh" || nextLang === "en") setLang(nextLang);
|
||
else if (storedLang === "zh" || storedLang === "en") setLang(storedLang);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
syncUrl(tab, lang);
|
||
}, [lang, syncUrl, tab]);
|
||
|
||
useEffect(() => {
|
||
void boot();
|
||
}, [boot]);
|
||
|
||
useEffect(() => {
|
||
if (!currentProcess) return;
|
||
void refreshProcess();
|
||
const timer = window.setInterval(() => void refreshProcess(), 1500);
|
||
return () => window.clearInterval(timer);
|
||
}, [currentProcess, refreshProcess]);
|
||
|
||
useEffect(() => {
|
||
const visibleRoots = tab === "shellcrash" ? shellRoots : tab === "config" ? otherRoots : roots;
|
||
if (!visibleRoots.length) return;
|
||
if (!visibleRoots.some((item) => item.root_id === rootId)) {
|
||
setRootId(visibleRoots[0].root_id);
|
||
setFilePath("");
|
||
}
|
||
}, [otherRoots, rootId, roots, shellRoots, tab]);
|
||
|
||
useEffect(() => {
|
||
if (!rootId) return;
|
||
void refreshFiles(rootId);
|
||
}, [refreshFiles, rootId]);
|
||
|
||
useEffect(() => {
|
||
if (!rootId || !filePath) {
|
||
setFileContent("");
|
||
return;
|
||
}
|
||
(async () => {
|
||
try {
|
||
const data = await fetchJson<{ content?: string }>(
|
||
`/managed_file?root=${encodeURIComponent(rootId)}&path=${encodeURIComponent(filePath)}`,
|
||
);
|
||
setFileContent(data.content || "");
|
||
} catch (reason) {
|
||
notify((reason as Error).message);
|
||
}
|
||
})();
|
||
}, [fetchJson, filePath, notify, rootId]);
|
||
|
||
useEffect(() => {
|
||
if (tab !== "android") return;
|
||
void (async () => {
|
||
const serial = await refreshAndroidDevices();
|
||
if (serial) {
|
||
await Promise.all([
|
||
refreshAndroidOverview(serial),
|
||
refreshAndroidUi(serial),
|
||
refreshAndroidPackages(serial),
|
||
]);
|
||
setShotNonce(Date.now());
|
||
}
|
||
})();
|
||
}, [refreshAndroidDevices, refreshAndroidOverview, refreshAndroidPackages, refreshAndroidUi, tab]);
|
||
|
||
useEffect(() => {
|
||
if (tab !== "android" || !androidSerial) return;
|
||
const timer = window.setInterval(() => {
|
||
void refreshAndroidOverview(androidSerial);
|
||
setShotNonce(Date.now());
|
||
}, 5000);
|
||
return () => window.clearInterval(timer);
|
||
}, [androidSerial, refreshAndroidOverview, tab]);
|
||
|
||
const processAction = async (action: "start" | "restart" | "stop") => {
|
||
if (!currentProcess) return;
|
||
setBusy(`process:${action}`);
|
||
try {
|
||
const data = await fetchJson<ProcessStatusResponse>(
|
||
`/${action}?process=${encodeURIComponent(currentProcess)}`,
|
||
);
|
||
notify(String(data.output || data.pm2_output || data.message || "OK"));
|
||
await refreshProcess();
|
||
} catch (reason) {
|
||
notify((reason as Error).message);
|
||
} finally {
|
||
setBusy(null);
|
||
}
|
||
};
|
||
|
||
const serviceAction = async (serviceId: string, action: "start" | "restart" | "stop") => {
|
||
setBusy(`${serviceId}:${action}`);
|
||
try {
|
||
const data = await fetchJson<ServiceItem>(
|
||
`/service_action?service=${encodeURIComponent(serviceId)}&action=${encodeURIComponent(action)}`,
|
||
);
|
||
notify(data.message || "OK");
|
||
await refreshServices();
|
||
} catch (reason) {
|
||
notify((reason as Error).message);
|
||
} finally {
|
||
setBusy(null);
|
||
}
|
||
};
|
||
|
||
const saveFile = async () => {
|
||
if (!rootId || !filePath) return;
|
||
setBusy("file:save");
|
||
try {
|
||
await fetchJson("/managed_file", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ root: rootId, path: filePath, content: fileContent }),
|
||
});
|
||
notify(tr("文件已保存", "File saved"));
|
||
await refreshFiles(rootId, filePath);
|
||
} catch (reason) {
|
||
notify((reason as Error).message);
|
||
} finally {
|
||
setBusy(null);
|
||
}
|
||
};
|
||
|
||
const createFile = async () => {
|
||
if (!currentRoot?.allow_create) {
|
||
notify(tr("当前目录不允许新建文件", "The current root does not allow new files"));
|
||
return;
|
||
}
|
||
const nextPath = window.prompt(tr("请输入新的相对路径", "Enter a new relative path"), currentRoot.default_file || "");
|
||
if (!nextPath) return;
|
||
setBusy("file:create");
|
||
try {
|
||
await fetchJson("/managed_file", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ root: rootId, path: nextPath, content: "" }),
|
||
});
|
||
notify(tr("文件已创建", "File created"));
|
||
await refreshFiles(rootId, nextPath);
|
||
} catch (reason) {
|
||
notify((reason as Error).message);
|
||
} finally {
|
||
setBusy(null);
|
||
}
|
||
};
|
||
|
||
const deleteFile = async () => {
|
||
if (!rootId || !filePath) return;
|
||
if (!currentRoot?.allow_delete) {
|
||
notify(tr("当前目录不允许删除文件", "The current root does not allow deletion"));
|
||
return;
|
||
}
|
||
if (!window.confirm(tr("确定删除该文件？", "Delete this file?"))) return;
|
||
setBusy("file:delete");
|
||
try {
|
||
await fetchJson(
|
||
`/managed_file?root=${encodeURIComponent(rootId)}&path=${encodeURIComponent(filePath)}`,
|
||
{ method: "DELETE" },
|
||
);
|
||
notify(tr("文件已删除", "File deleted"));
|
||
await refreshFiles(rootId);
|
||
} catch (reason) {
|
||
notify((reason as Error).message);
|
||
} finally {
|
||
setBusy(null);
|
||
}
|
||
};
|
||
|
||
const importManagedFile = async (event: ChangeEvent<HTMLInputElement>) => {
|
||
const upload = event.target.files?.[0];
|
||
event.target.value = "";
|
||
setFileImportKey((value) => value + 1);
|
||
if (!upload || !rootId) return;
|
||
|
||
setBusy("file:import");
|
||
try {
|
||
const content = await upload.text();
|
||
await fetchJson("/managed_file", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ root: rootId, path: upload.name, content }),
|
||
});
|
||
notify(tr("导入完成，已替换同名文件", "Import finished and replaced matching file"));
|
||
setFilePath(upload.name);
|
||
await refreshFiles(rootId, upload.name);
|
||
} catch (reason) {
|
||
notify((reason as Error).message);
|
||
} finally {
|
||
setBusy(null);
|
||
}
|
||
};
|
||
|
||
const sendAndroidAction = async (action: string, payload?: Record<string, unknown>) => {
|
||
if (!androidSerial) {
|
||
notify(tr("当前没有可用的 ADB 设备", "No active ADB device"));
|
||
return;
|
||
}
|
||
setBusy(`android:${action}`);
|
||
try {
|
||
const data = await fetchJson<{ message?: string; output?: string }>("/android/action", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ action, serial: androidSerial, payload: payload || {} }),
|
||
});
|
||
notify(data.message || "OK");
|
||
if (data.output) setAndroidOutput(data.output);
|
||
setShotNonce(Date.now());
|
||
await refreshAndroidOverview(androidSerial);
|
||
} catch (reason) {
|
||
notify((reason as Error).message);
|
||
} finally {
|
||
setBusy(null);
|
||
}
|
||
};
|
||
|
||
const previewActionLabel =
|
||
previewMode === "tap"
|
||
? tr("点击", "Tap")
|
||
: previewMode === "double_tap"
|
||
? tr("双击", "Double Tap")
|
||
: tr("长按", "Long Press");
|
||
|
||
const handlePreviewClick = async (event: MouseEvent<HTMLImageElement>) => {
|
||
if (!androidSerial) {
|
||
notify(tr("当前没有可用的 ADB 设备", "No active ADB device"));
|
||
return;
|
||
}
|
||
const rect = event.currentTarget.getBoundingClientRect();
|
||
const sourceWidth = androidResolution?.width || event.currentTarget.naturalWidth || rect.width;
|
||
const sourceHeight = androidResolution?.height || event.currentTarget.naturalHeight || rect.height;
|
||
const x = Math.max(
|
||
0,
|
||
Math.min(sourceWidth, Math.round((event.clientX - rect.left) * (sourceWidth / rect.width))),
|
||
);
|
||
const y = Math.max(
|
||
0,
|
||
Math.min(sourceHeight, Math.round((event.clientY - rect.top) * (sourceHeight / rect.height))),
|
||
);
|
||
setPreviewPoint({ x, y });
|
||
if (previewMode === "long_press") {
|
||
await sendAndroidAction("long_press", { x, y, duration: 750 });
|
||
return;
|
||
}
|
||
await sendAndroidAction(previewMode, { x, y });
|
||
};
|
||
|
||
const serviceHref = (item: ServiceItem) => {
|
||
if (item.service_id === "shellcrash" && stack?.control_url) {
|
||
return `${stack.control_url}/shellcrash?lang=${lang}`;
|
||
}
|
||
if (item.service_id === "android_panel" && stack?.control_url) {
|
||
return `${stack.control_url}/android?lang=${lang}`;
|
||
}
|
||
return item.url || "";
|
||
};
|
||
|
||
const statusText = (status: string) =>
|
||
({
|
||
online: tr("在线", "Online"),
|
||
stopped: tr("已停止", "Stopped"),
|
||
configured: tr("已配置", "Configured"),
|
||
unavailable: tr("未安装", "Unavailable"),
|
||
}[status] || status);
|
||
|
||
const activeRoots = tab === "shellcrash" ? shellRoots : otherRoots;
|
||
|
||
return (
|
||
<main className="mx-auto min-h-screen max-w-7xl px-4 pb-16 pt-8 sm:px-6 lg:px-10">
|
||
{toast ? (
|
||
<div className="animate-toast-in fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-2xl border border-cyan-500/25 bg-slate-950/95 px-5 py-3 text-sm text-cyan-50">
|
||
{toast}
|
||
</div>
|
||
) : null}
|
||
|
||
<header className="mb-8 flex flex-col gap-4">
|
||
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
||
<div>
|
||
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-cyan-400/90">
|
||
{tr("超级业务中心 / 模块控制台", "Super Hub / Control Plane")}
|
||
</p>
|
||
<h1 className="mt-2 text-3xl font-bold text-white sm:text-4xl">
|
||
{tr("Linux 超级业务中心", "Linux Super Business Center")}
|
||
</h1>
|
||
<p className="mt-3 max-w-3xl text-sm text-slate-400">
|
||
{tr(
|
||
"系统服务、业务模块、ShellCrash 配置与安卓控制保持解耦，一个模块异常不应拖垮整个平台。",
|
||
"Services, business modules, ShellCrash configs and Android control stay decoupled.",
|
||
)}
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<div className="rounded-2xl border border-white/8 bg-black/20 px-4 py-3 text-xs text-slate-300">
|
||
{(stack?.mdns_host || "live.local") +
|
||
" | " +
|
||
(stack?.machine || "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="border border-white/12 bg-black/20" onClick={() => void boot()}>
|
||
{tr("刷新", "Refresh")}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<nav className="flex flex-wrap gap-2">
|
||
{TABS.map((item) => (
|
||
<button
|
||
key={item}
|
||
className={`btn-focus rounded-2xl px-4 py-2 text-sm ${
|
||
tab === item
|
||
? "border border-cyan-400/50 bg-cyan-500/10 text-cyan-100"
|
||
: "border border-white/10 bg-black/20 text-slate-300"
|
||
}`}
|
||
onClick={() => setTab(item)}
|
||
>
|
||
{{
|
||
overview: tr("总览", "Overview"),
|
||
business: tr("业务", "Business"),
|
||
modules: tr("系统模块", "Modules"),
|
||
shellcrash: "ShellCrash",
|
||
android: tr("安卓设备", "Android"),
|
||
config: tr("配置中心", "Config"),
|
||
}[item]}
|
||
</button>
|
||
))}
|
||
</nav>
|
||
</header>
|
||
|
||
{booting ? (
|
||
<div className="glass rounded-3xl py-24 text-center text-slate-400">
|
||
{tr("正在连接控制台...", "Connecting to the control plane...")}
|
||
</div>
|
||
) : null}
|
||
|
||
{!booting && error ? (
|
||
<div className="glass rounded-3xl border border-rose-500/25 bg-rose-950/20 p-8 text-center text-rose-200">
|
||
{error}
|
||
</div>
|
||
) : null}
|
||
|
||
{!booting && !error ? (
|
||
<div className="grid gap-6">
|
||
{tab === "overview" ? (
|
||
<>
|
||
<section className="grid gap-6 xl:grid-cols-12">
|
||
<article className="glass rounded-3xl p-6 xl:col-span-4">
|
||
<h2 className="text-lg font-semibold text-white">{tr("常用入口", "Quick Links")}</h2>
|
||
<div className="mt-4 grid gap-3">
|
||
{stack?.dashboard_url ? (
|
||
<a className="btn-focus rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-100" href={stack.dashboard_url} target="_blank" rel="noreferrer">Homepage</a>
|
||
) : null}
|
||
{stack?.control_url ? (
|
||
<>
|
||
<a className="btn-focus rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-100" href={`${stack.control_url}?tab=shellcrash&lang=${lang}`} target="_blank" rel="noreferrer">{tr("打开 ShellCrash 工作区", "Open ShellCrash workspace")}</a>
|
||
<a className="btn-focus rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-100" href={`${stack.control_url}?tab=android&lang=${lang}`} target="_blank" rel="noreferrer">{tr("打开安卓设备中心", "Open Android device center")}</a>
|
||
<a className="btn-focus rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-100" href={`${stack.control_url}?tab=config&lang=${lang}`} target="_blank" rel="noreferrer">{tr("打开配置中心", "Open Config center")}</a>
|
||
</>
|
||
) : null}
|
||
{rawAndroidPanelUrl ? (
|
||
<a className="btn-focus rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-100" href={rawAndroidPanelUrl} target="_blank" rel="noreferrer">web-scrcpy</a>
|
||
) : null}
|
||
</div>
|
||
</article>
|
||
|
||
<article className="glass rounded-3xl p-6 xl:col-span-4">
|
||
<h2 className="text-lg font-semibold text-white">{tr("节点状态", "Node Status")}</h2>
|
||
<div className="mt-4 rounded-2xl border border-white/8 bg-black/20 p-4 text-sm text-slate-300">
|
||
<p>{stack?.mdns_host || "live.local"}</p>
|
||
<p className="mt-2">IP: {(stack?.ips || []).join(" / ") || "-"}</p>
|
||
<p className="mt-2">{stack?.machine || "-"}</p>
|
||
<p className="mt-2">{stack?.kernel || "-"}</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article className="glass rounded-3xl p-6 xl:col-span-4">
|
||
<h2 className="text-lg font-semibold text-white">{tr("系统快照", "System Snapshot")}</h2>
|
||
<div className="mt-4 rounded-2xl border border-white/8 bg-black/20 p-4 text-sm text-slate-300">
|
||
<p>
|
||
CPU:{" "}
|
||
{[snapshot?.cpu_load?.["1m"], snapshot?.cpu_load?.["5m"], snapshot?.cpu_load?.["15m"]]
|
||
.map((item) => (typeof item === "number" ? item.toFixed(2) : "0.00"))
|
||
.join(" / ")}
|
||
</p>
|
||
<p className="mt-2">RAM: {formatBytes(snapshot?.memory?.available)} / {formatBytes(snapshot?.memory?.total)}</p>
|
||
<p className="mt-2">Disk: {formatBytes(snapshot?.disk?.free)} / {formatBytes(snapshot?.disk?.total)}</p>
|
||
<p className="mt-2">Netdata: {snapshot?.netdata?.available ? snapshot.netdata.version || "online" : "offline"}</p>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section className="glass rounded-3xl p-6">
|
||
<h2 className="text-lg font-semibold text-white">{tr("模块概况", "Module Summary")}</h2>
|
||
<div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||
{services.map((item) => (
|
||
<div key={item.service_id} className="rounded-3xl border border-white/8 bg-black/20 p-5">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div>
|
||
<h3 className="text-base font-semibold text-white">{item.label}</h3>
|
||
<p className="mt-1 text-xs text-slate-400">{item.description}</p>
|
||
</div>
|
||
<span className={`rounded-full border px-2.5 py-1 text-xs ${statusTone(item.status)}`}>{statusText(item.status)}</span>
|
||
</div>
|
||
<p className="mt-3 min-h-[3rem] text-xs text-slate-500">{item.detail || "-"}</p>
|
||
{serviceHref(item) ? (
|
||
<a className="btn-focus mt-3 inline-flex rounded-xl border border-white/12 px-3 py-2 text-xs text-slate-200" href={serviceHref(item)} target="_blank" rel="noreferrer">{tr("打开", "Open")}</a>
|
||
) : null}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</>
|
||
) : null}
|
||
|
||
{tab === "business" ? (
|
||
<section className="grid gap-6 xl:grid-cols-12">
|
||
<article className="glass rounded-3xl p-6 xl:col-span-4">
|
||
<h2 className="text-lg font-semibold text-white">{tr("业务运行时", "Business Runtime")}</h2>
|
||
<p className="mt-2 text-xs text-slate-400">{tr("这里只放业务脚本本身，Hub 基座可单独运行。", "Only business processes live here.")}</p>
|
||
{entries.length > 0 ? (
|
||
<>
|
||
<select className="mt-4 w-full rounded-2xl border border-white/12 bg-slate-950/60 px-4 py-3 text-sm text-white" value={currentProcess} onChange={(event) => setCurrentProcess(event.target.value)}>
|
||
{entries.map((item) => (
|
||
<option key={item.pm2} value={item.pm2}>{item.label} | {item.script}</option>
|
||
))}
|
||
</select>
|
||
<div className="mt-4 flex items-center justify-between rounded-2xl border border-white/8 bg-black/20 px-4 py-3">
|
||
<span className={`rounded-full border px-3 py-1 text-xs ${statusTone(processStatus)}`}>{statusText(processStatus)}</span>
|
||
<Button className="border border-white/12 bg-black/20" onClick={() => void refreshProcess()}>{tr("轮询", "Poll")}</Button>
|
||
</div>
|
||
<div className="mt-4 grid grid-cols-2 gap-2">
|
||
<Button className="bg-emerald-600" disabled={busy === "process:start"} onClick={() => void processAction("start")}>{busy === "process:start" ? tr("启动中...", "Starting...") : tr("启动", "Start")}</Button>
|
||
<Button className="bg-amber-600" disabled={busy === "process:restart"} onClick={() => void processAction("restart")}>{busy === "process:restart" ? tr("重启中...", "Restarting...") : tr("重启", "Restart")}</Button>
|
||
<Button className="col-span-2 bg-rose-600" disabled={busy === "process:stop"} onClick={() => void processAction("stop")}>{busy === "process:stop" ? tr("停止中...", "Stopping...") : tr("停止", "Stop")}</Button>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div className="mt-4 rounded-2xl border border-dashed border-white/12 bg-black/20 p-4 text-sm text-slate-400">
|
||
{tr("未发现业务进程。若只部署了 Hub 基座，这是正常状态。", "No business process discovered.")}
|
||
</div>
|
||
)}
|
||
</article>
|
||
<article className="glass rounded-3xl p-6 xl:col-span-8">
|
||
<h2 className="text-lg font-semibold text-white">{tr("业务日志", "Process Logs")}</h2>
|
||
<div className="mt-4 grid gap-4 lg:grid-cols-2">
|
||
<pre className="log-scroll min-h-[22rem] rounded-2xl border border-emerald-500/15 bg-black/55 p-4 font-mono text-[11px] text-emerald-100/95">{recentLog || tr("暂无输出", "No stdout yet.")}</pre>
|
||
<pre className="log-scroll min-h-[22rem] rounded-2xl border border-rose-500/15 bg-black/55 p-4 font-mono text-[11px] text-rose-100/95">{recentError || tr("暂无报错", "No stderr yet.")}</pre>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
) : null}
|
||
|
||
{tab === "modules" ? (
|
||
<section className="grid gap-6 xl:grid-cols-12">
|
||
<article className="glass rounded-3xl p-6 xl:col-span-8">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<h2 className="text-lg font-semibold text-white">{tr("系统模块", "System Modules")}</h2>
|
||
<p className="mt-2 text-xs text-slate-400">{tr("每个模块都独立启停和降级，避免一个服务异常拖垮整套业务。", "Each module starts and degrades independently.")}</p>
|
||
</div>
|
||
<Button className="border border-white/12 bg-black/20" onClick={() => void refreshServices()}>{tr("刷新服务", "Refresh Services")}</Button>
|
||
</div>
|
||
<div className="mt-4 grid gap-4 md:grid-cols-2">
|
||
{services.map((item) => (
|
||
<div key={item.service_id} className="rounded-3xl border border-white/8 bg-black/20 p-5">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div>
|
||
<h3 className="text-base font-semibold text-white">{item.label}</h3>
|
||
<p className="mt-1 text-xs text-slate-400">{item.description}</p>
|
||
</div>
|
||
<span className={`rounded-full border px-2.5 py-1 text-xs ${statusTone(item.status)}`}>{statusText(item.status)}</span>
|
||
</div>
|
||
<p className="mt-3 min-h-[3rem] text-xs text-slate-500">{item.detail || "-"}</p>
|
||
<div className="mt-4 flex flex-wrap gap-2">
|
||
<Button className="bg-emerald-600" disabled={!item.available || !!busy} onClick={() => void serviceAction(item.service_id, "start")}>{tr("启动", "Start")}</Button>
|
||
<Button className="bg-amber-600" disabled={!item.available || !!busy} onClick={() => void serviceAction(item.service_id, "restart")}>{tr("重启", "Restart")}</Button>
|
||
<Button className="bg-rose-600" disabled={!item.available || !!busy} onClick={() => void serviceAction(item.service_id, "stop")}>{tr("停止", "Stop")}</Button>
|
||
{serviceHref(item) ? <a className="btn-focus rounded-xl border border-white/12 px-3 py-2 text-xs text-slate-200" href={serviceHref(item)} target="_blank" rel="noreferrer">{tr("打开", "Open")}</a> : null}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</article>
|
||
<article className="glass rounded-3xl p-6 xl:col-span-4">
|
||
<h2 className="text-lg font-semibold text-white">{tr("硬件与系统", "Hardware and System")}</h2>
|
||
<div className="mt-4 rounded-2xl border border-white/8 bg-black/20 p-4 text-xs text-slate-400">
|
||
<p>Arch: {hardware?.arch || "-"}</p>
|
||
<p className="mt-2">FFmpeg: {(hardware?.ffmpeg_hwaccels || []).join(", ") || "-"}</p>
|
||
<p className="mt-2">GPU: {hardware?.gpu?.present ? hardware.gpu.driver || "present" : "none"}</p>
|
||
<p className="mt-2">NPU: {hardware?.npu?.present ? (hardware.npu.devices || []).join(", ") : "none"}</p>
|
||
<p className="mt-2">Decoder: {hardware?.recommendation?.video_decoder || "cpu"}</p>
|
||
<p className="mt-2">HDMI: {hardware?.recommendation?.hdmi_player || "cpu"}</p>
|
||
<p className="mt-2">Mode: {hardware?.recommendation?.stability_mode || "safe"}</p>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
) : null}
|
||
|
||
{tab === "shellcrash" ? (
|
||
<section className="grid gap-6 xl:grid-cols-12">
|
||
<article className="glass rounded-3xl p-6 xl:col-span-4">
|
||
<h2 className="text-lg font-semibold text-white">ShellCrash</h2>
|
||
<p className="mt-2 text-xs text-slate-400">{tr("这里不再依赖命令行菜单，直接做 YAML / JSON / CFG 编辑与服务控制。", "Manage ShellCrash from the web instead of the shell menu.")}</p>
|
||
{shellcrashService ? (
|
||
<div className="mt-4 rounded-3xl border border-white/8 bg-black/20 p-5">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div>
|
||
<h3 className="text-base font-semibold text-white">{shellcrashService.label}</h3>
|
||
<p className="mt-1 text-xs text-slate-400">{shellcrashService.description}</p>
|
||
</div>
|
||
<span className={`rounded-full border px-2.5 py-1 text-xs ${statusTone(shellcrashService.status)}`}>{statusText(shellcrashService.status)}</span>
|
||
</div>
|
||
<p className="mt-3 text-xs text-slate-500">{shellcrashService.detail || "-"}</p>
|
||
<div className="mt-4 flex flex-wrap gap-2">
|
||
<Button className="bg-emerald-600" disabled={!shellcrashService.available || !!busy} onClick={() => void serviceAction("shellcrash", "start")}>{tr("启动", "Start")}</Button>
|
||
<Button className="bg-amber-600" disabled={!shellcrashService.available || !!busy} onClick={() => void serviceAction("shellcrash", "restart")}>{tr("重启", "Restart")}</Button>
|
||
<Button className="bg-rose-600" disabled={!shellcrashService.available || !!busy} onClick={() => void serviceAction("shellcrash", "stop")}>{tr("停止", "Stop")}</Button>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
<div className="mt-4 rounded-2xl border border-white/8 bg-black/20 p-4 text-xs text-slate-400">
|
||
<p className="text-white">{tr("快捷文件", "Quick Files")}</p>
|
||
<div className="mt-3 grid gap-2">
|
||
<button className="btn-focus rounded-xl border border-white/10 px-3 py-2 text-left text-slate-200" onClick={() => void openManagedFile("shellcrash-yamls", "config.yaml")}>config.yaml</button>
|
||
<button className="btn-focus rounded-xl border border-white/10 px-3 py-2 text-left text-slate-200" onClick={() => void openManagedFile("shellcrash-configs", "ShellCrash.cfg")}>ShellCrash.cfg</button>
|
||
<button className="btn-focus rounded-xl border border-white/10 px-3 py-2 text-left text-slate-200" onClick={() => void openManagedFile("shellcrash-configs", "servers.list")}>servers.list</button>
|
||
<button className="btn-focus rounded-xl border border-white/10 px-3 py-2 text-left text-slate-200" onClick={() => void openManagedFile("shellcrash-configs", "command.env")}>command.env</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article className="glass rounded-3xl p-6 xl:col-span-8">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<h2 className="text-lg font-semibold text-white">{tr("ShellCrash 文件编辑器", "ShellCrash Editor")}</h2>
|
||
<p className="mt-2 text-xs text-slate-400">{tr("支持查看、修改、新建、删除，路径被限制在 ShellCrash 托管目录内。", "View, edit, create and delete files inside managed ShellCrash roots.")}</p>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<label className={`btn-focus rounded-xl border border-white/12 px-3 py-2 text-xs text-slate-100 ${busy ? "cursor-not-allowed opacity-40" : ""}`}>
|
||
{busy === "file:import" ? tr("导入中...", "Importing...") : tr("导入/替换", "Import/Replace")}
|
||
<input key={fileImportKey} className="hidden" disabled={!!busy} type="file" accept=".yaml,.yml,.json,.cfg,.env,.list,.txt" onChange={(event) => void importManagedFile(event)} />
|
||
</label>
|
||
<Button className="bg-cyan-600" disabled={!filePath || !!busy} onClick={() => void saveFile()}>{busy === "file:save" ? tr("保存中...", "Saving...") : tr("保存", "Save")}</Button>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 grid gap-6 xl:grid-cols-[18rem,1fr]">
|
||
<div>
|
||
<select className="w-full rounded-2xl border border-white/12 bg-slate-950/60 px-4 py-3 text-sm text-white" value={rootId} onChange={(event) => { setRootId(event.target.value); setFilePath(""); }}>
|
||
{shellRoots.map((item) => (
|
||
<option key={item.root_id} value={item.root_id}>{item.label} | {item.file_count}</option>
|
||
))}
|
||
</select>
|
||
<div className="mt-4 flex flex-wrap gap-2">
|
||
<Button className="bg-cyan-600" disabled={!!busy} onClick={() => void createFile()}>{tr("新建", "New")}</Button>
|
||
<Button className="bg-rose-600" disabled={!filePath || !!busy} onClick={() => void deleteFile()}>{tr("删除", "Delete")}</Button>
|
||
</div>
|
||
<div className="mt-4 space-y-2">
|
||
{files.map((item) => (
|
||
<button key={item.path} className={`btn-focus w-full rounded-2xl border px-4 py-3 text-left ${filePath === item.path ? "border-cyan-500/40 bg-cyan-500/10" : "border-white/8 bg-black/20"}`} onClick={() => setFilePath(item.path)}>
|
||
<div className="truncate text-sm text-white">{item.path}</div>
|
||
<div className="mt-1 text-[11px] text-slate-500">{formatBytes(item.size)}</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="rounded-2xl border border-white/8 bg-black/20 px-4 py-3 font-mono text-[11px] text-slate-500">{filePath ? `${rootId} / ${filePath}` : tr("请选择文件", "Pick a file")}</div>
|
||
<textarea className="log-scroll mt-4 min-h-[32rem] w-full resize-y rounded-2xl border border-white/10 bg-black/45 p-4 font-mono text-xs leading-relaxed text-slate-200" spellCheck={false} value={fileContent} onChange={(event) => setFileContent(event.target.value)} />
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
) : null}
|
||
|
||
{tab === "android" ? (
|
||
<section className="grid gap-6 xl:grid-cols-12">
|
||
<article className="glass rounded-3xl p-6 xl:col-span-4">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<h2 className="text-lg font-semibold text-white">{tr("安卓设备中心", "Android Device Center")}</h2>
|
||
<p className="mt-2 text-xs text-slate-400">{tr("把设备发现、截图预览、ADB 动作和原始 web-scrcpy 放到一个模块里。", "Combine discovery, preview, ADB actions and raw web-scrcpy in one module.")}</p>
|
||
</div>
|
||
<Button className="border border-white/12 bg-black/20" onClick={() => void (async () => { const serial = await refreshAndroidDevices(); if (serial) await Promise.all([refreshAndroidOverview(serial), refreshAndroidUi(serial), refreshAndroidPackages(serial)]); setShotNonce(Date.now()); })()}>{tr("刷新设备", "Refresh")}</Button>
|
||
</div>
|
||
<div className="mt-4 rounded-2xl border border-white/8 bg-black/20 p-4">
|
||
<p className="text-sm font-semibold text-white">{tr("已连接设备", "Devices")}</p>
|
||
{!androidAvailable || androidDevices.length === 0 ? (
|
||
<p className="mt-3 text-sm text-slate-400">{tr("当前没有可用的 ADB 设备。", "No active ADB device.")}</p>
|
||
) : (
|
||
<div className="mt-3 space-y-2">
|
||
{androidDevices.map((item) => (
|
||
<button key={item.serial} className={`btn-focus w-full rounded-2xl border px-4 py-3 text-left ${androidSerial === item.serial ? "border-cyan-500/40 bg-cyan-500/10" : "border-white/8 bg-black/20"}`} onClick={() => { setAndroidSerial(item.serial); void Promise.all([refreshAndroidOverview(item.serial), refreshAndroidUi(item.serial), refreshAndroidPackages(item.serial)]); setShotNonce(Date.now()); }}>
|
||
<div className="text-sm text-white">{item.model || item.device || item.serial}</div>
|
||
<div className="mt-1 text-[11px] text-slate-500">{item.serial} | {item.state}</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="mt-4 rounded-2xl border border-white/8 bg-black/20 p-4 text-xs text-slate-400">
|
||
<p className="text-white">{tr("设备状态", "Device Status")}</p>
|
||
<p className="mt-2">{androidOverview?.brand || "-"} {androidOverview?.model || "-"}</p>
|
||
<p className="mt-2">Android {androidOverview?.android_version || "-"} / SDK {androidOverview?.sdk || "-"}</p>
|
||
<p className="mt-2 whitespace-pre-wrap">{androidOverview?.battery || "-"}</p>
|
||
<p className="mt-2 whitespace-pre-wrap">{androidOverview?.resolution || "-"}</p>
|
||
<p className="mt-2 whitespace-pre-wrap">{androidOverview?.focus || "-"}</p>
|
||
</div>
|
||
</article>
|
||
<article className="glass rounded-3xl p-6 xl:col-span-8">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<h2 className="text-lg font-semibold text-white">{tr("屏幕预览与动作", "Screen Preview and Actions")}</h2>
|
||
<p className="mt-2 text-xs text-slate-400">{tr("预览图支持直接点按/双击/长按，配合 UI 节点和包管理形成更完整的安卓控制台。", "The preview supports tap, double tap and long press, backed by UI nodes and package tools.")}</p>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button className={`border border-white/12 ${previewMode === "tap" ? "bg-cyan-600" : "bg-black/20"}`} disabled={!androidSerial || !!busy} onClick={() => setPreviewMode("tap")}>{tr("点击", "Tap")}</Button>
|
||
<Button className={`border border-white/12 ${previewMode === "double_tap" ? "bg-cyan-600" : "bg-black/20"}`} disabled={!androidSerial || !!busy} onClick={() => setPreviewMode("double_tap")}>{tr("双击", "Double Tap")}</Button>
|
||
<Button className={`border border-white/12 ${previewMode === "long_press" ? "bg-cyan-600" : "bg-black/20"}`} disabled={!androidSerial || !!busy} onClick={() => setPreviewMode("long_press")}>{tr("长按", "Long Press")}</Button>
|
||
<Button className="border border-white/12 bg-black/20" disabled={!androidSerial} onClick={() => setShotNonce(Date.now())}>{tr("刷新截图", "Refresh Shot")}</Button>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 overflow-hidden rounded-3xl border border-white/8 bg-black/35 p-4">
|
||
{androidSerial ? (
|
||
<>
|
||
<div className="mb-3 flex flex-wrap items-center gap-3 text-xs text-slate-400">
|
||
<span>{tr("当前动作", "Current action")}: {previewActionLabel}</span>
|
||
<span>{tr("分辨率", "Resolution")}: {androidOverview?.resolution || "-"}</span>
|
||
<span>{tr("最近坐标", "Last point")}: {previewPoint ? `${previewPoint.x}, ${previewPoint.y}` : "-"}</span>
|
||
</div>
|
||
<img alt="Android preview" className="max-h-[30rem] w-full cursor-crosshair rounded-2xl object-contain bg-black" onClick={(event) => void handlePreviewClick(event)} src={`${base}/android/screenshot?serial=${encodeURIComponent(androidSerial)}&ts=${shotNonce}`} />
|
||
</>
|
||
) : <div className="flex min-h-[18rem] items-center justify-center rounded-2xl border border-dashed border-white/10 bg-black/20 text-sm text-slate-500">{tr("当前没有可用的 ADB 设备。", "No active ADB device.")}</div>}
|
||
</div>
|
||
<div className="mt-6 grid gap-6 xl:grid-cols-3">
|
||
<div className="rounded-3xl border border-white/8 bg-black/20 p-5">
|
||
<h3 className="text-base font-semibold text-white">{tr("快捷控制", "Quick Controls")}</h3>
|
||
<div className="mt-4 grid grid-cols-3 gap-2">
|
||
{[
|
||
["HOME", "KEYCODE_HOME"], ["BACK", "KEYCODE_BACK"], ["RECENTS", "KEYCODE_APP_SWITCH"],
|
||
["POWER", "KEYCODE_POWER"], ["NOTIFY", "KEYCODE_NOTIFICATION"], ["VOL+", "KEYCODE_VOLUME_UP"],
|
||
["VOL-", "KEYCODE_VOLUME_DOWN"],
|
||
].map(([label, keycode]) => (
|
||
<button key={label} className="btn-focus rounded-xl border border-white/10 bg-slate-950/50 px-3 py-3 text-xs text-slate-100" disabled={!androidSerial || !!busy} onClick={() => void sendAndroidAction("key", { keycode })}>{label}</button>
|
||
))}
|
||
<button className="btn-focus rounded-xl border border-white/10 bg-slate-950/50 px-3 py-3 text-xs text-slate-100" disabled={!androidSerial || !!busy} onClick={() => void sendAndroidAction("wake")}>WAKE</button>
|
||
<button className="btn-focus rounded-xl border border-white/10 bg-slate-950/50 px-3 py-3 text-xs text-slate-100" disabled={!androidSerial || !!busy} onClick={() => void sendAndroidAction("rotate", { rotation: "0" })}>Portrait</button>
|
||
<button className="btn-focus rounded-xl border border-white/10 bg-slate-950/50 px-3 py-3 text-xs text-slate-100" disabled={!androidSerial || !!busy} onClick={() => void sendAndroidAction("rotate", { rotation: "1" })}>Landscape</button>
|
||
</div>
|
||
<div className="mt-4 grid grid-cols-2 gap-2">
|
||
{["up", "down", "left", "right"].map((direction) => (
|
||
<button key={direction} className="btn-focus rounded-xl border border-white/10 bg-slate-950/50 px-3 py-3 text-xs uppercase text-slate-100" disabled={!androidSerial || !!busy} onClick={() => void sendAndroidAction("swipe", { direction })}>Swipe {direction}</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="rounded-3xl border border-white/8 bg-black/20 p-5">
|
||
<h3 className="text-base font-semibold text-white">{tr("输入与跳转", "Input and Launch")}</h3>
|
||
<textarea className="mt-4 min-h-[6rem] w-full rounded-2xl border border-white/10 bg-black/45 p-4 text-sm text-slate-200" placeholder={tr("输入要发送到安卓输入框的文字", "Text to send to Android")} value={androidText} onChange={(event) => setAndroidText(event.target.value)} />
|
||
<Button className="mt-3 bg-cyan-600" disabled={!androidText.trim() || !androidSerial || !!busy} onClick={() => void sendAndroidAction("text", { text: androidText })}>{tr("发送文本", "Send Text")}</Button>
|
||
<input className="mt-4 w-full rounded-2xl border border-white/10 bg-black/45 px-4 py-3 text-sm text-slate-200" placeholder="com.zhiliaoapp.musically" value={androidPackage} onChange={(event) => setAndroidPackage(event.target.value)} />
|
||
<div className="mt-3 grid grid-cols-3 gap-2">
|
||
<Button className="bg-emerald-600" disabled={!androidPackage.trim() || !androidSerial || !!busy} onClick={() => void sendAndroidAction("launch_package", { package: androidPackage })}>{tr("启动", "Launch")}</Button>
|
||
<Button className="bg-amber-600" disabled={!androidPackage.trim() || !androidSerial || !!busy} onClick={() => void sendAndroidAction("force_stop", { package: androidPackage })}>{tr("停应用", "Stop App")}</Button>
|
||
<Button className="bg-rose-600" disabled={!androidPackage.trim() || !androidSerial || !!busy} onClick={() => void sendAndroidAction("clear_app", { package: androidPackage })}>{tr("清数据", "Clear Data")}</Button>
|
||
</div>
|
||
<input className="mt-4 w-full rounded-2xl border border-white/10 bg-black/45 px-4 py-3 text-sm text-slate-200" placeholder="https://www.tiktok.com" value={androidUrl} onChange={(event) => setAndroidUrl(event.target.value)} />
|
||
<Button className="mt-3 bg-violet-600" disabled={!androidUrl.trim() || !androidSerial || !!busy} onClick={() => void sendAndroidAction("open_url", { url: androidUrl })}>{tr("打开链接", "Open URL")}</Button>
|
||
</div>
|
||
<div className="rounded-3xl border border-white/8 bg-black/20 p-5">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<h3 className="text-base font-semibold text-white">{tr("应用工作台", "App Workspace")}</h3>
|
||
<Button className="border border-white/12 bg-black/20" disabled={!androidSerial || !!busy} onClick={() => void refreshAndroidUi(androidSerial)}>{tr("刷新UI", "Refresh UI")}</Button>
|
||
</div>
|
||
<div className="mt-4 flex flex-wrap gap-2">
|
||
{[
|
||
["TikTok", "com.zhiliaoapp.musically"],
|
||
["Chrome", "com.android.chrome"],
|
||
["Settings", "com.android.settings"],
|
||
["YouTube", "com.google.android.youtube"],
|
||
["Play", "com.android.vending"],
|
||
].map(([label, pkg]) => (
|
||
<button key={pkg} className="btn-focus rounded-xl border border-white/10 bg-slate-950/50 px-3 py-2 text-xs text-slate-100" disabled={!androidSerial || !!busy} onClick={() => { setAndroidPackage(pkg); void sendAndroidAction("launch_package", { package: pkg }); }}>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="mt-4 flex gap-2">
|
||
<input className="w-full rounded-2xl border border-white/10 bg-black/45 px-4 py-3 text-sm text-slate-200" placeholder={tr("搜索包名，例如 tiktok", "Search package, e.g. tiktok")} value={androidPackageQuery} onChange={(event) => setAndroidPackageQuery(event.target.value)} />
|
||
<Button className="bg-cyan-600" disabled={!androidSerial || !!busy} onClick={() => void refreshAndroidPackages(androidSerial)}>{tr("搜索", "Search")}</Button>
|
||
</div>
|
||
<div className="mt-4 space-y-2">
|
||
{androidPackages.length === 0 ? (
|
||
<div className="rounded-2xl border border-dashed border-white/10 px-4 py-6 text-sm text-slate-500">{tr("还没有查询结果。", "No package results yet.")}</div>
|
||
) : (
|
||
androidPackages.slice(0, 8).map((item) => (
|
||
<div key={item.package} className="rounded-2xl border border-white/8 bg-slate-950/30 p-3">
|
||
<div className="text-sm text-white">{item.label || item.package.split(".").pop()}</div>
|
||
<div className="mt-1 truncate font-mono text-[11px] text-slate-500">{item.package}</div>
|
||
<div className="mt-3 flex flex-wrap gap-2">
|
||
<button className="btn-focus rounded-xl border border-white/10 px-3 py-2 text-xs text-slate-200" disabled={!androidSerial || !!busy} onClick={() => { setAndroidPackage(item.package); void sendAndroidAction("launch_package", { package: item.package }); }}>{tr("启动", "Launch")}</button>
|
||
<button className="btn-focus rounded-xl border border-white/10 px-3 py-2 text-xs text-slate-200" disabled={!androidSerial || !!busy} onClick={() => { setAndroidPackage(item.package); void sendAndroidAction("force_stop", { package: item.package }); }}>{tr("停应用", "Stop")}</button>
|
||
<button className="btn-focus rounded-xl border border-white/10 px-3 py-2 text-xs text-slate-200" disabled={!androidSerial || !!busy} onClick={() => { setAndroidPackage(item.package); void sendAndroidAction("clear_app", { package: item.package }); }}>{tr("清数据", "Clear")}</button>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-6 grid gap-6 xl:grid-cols-[0.95fr,1.05fr]">
|
||
<div className="rounded-3xl border border-white/8 bg-black/20 p-5">
|
||
<h3 className="text-base font-semibold text-white">ADB Shell</h3>
|
||
<div className="mt-4 flex flex-col gap-3 lg:flex-row">
|
||
<input className="w-full rounded-2xl border border-white/10 bg-black/45 px-4 py-3 text-sm text-slate-200" placeholder="input keyevent KEYCODE_HOME" value={androidShell} onChange={(event) => setAndroidShell(event.target.value)} />
|
||
<Button className="bg-amber-600" disabled={!androidShell.trim() || !androidSerial || !!busy} onClick={() => void sendAndroidAction("shell", { command: androidShell })}>{tr("执行命令", "Run Command")}</Button>
|
||
</div>
|
||
<pre className="log-scroll mt-4 min-h-[14rem] rounded-2xl border border-white/10 bg-black/45 p-4 font-mono text-[11px] text-slate-200">{androidOutput || tr("动作结果会显示在这里。", "Action output will appear here.")}</pre>
|
||
</div>
|
||
<div className="rounded-3xl border border-white/8 bg-black/20 p-5">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<h3 className="text-base font-semibold text-white">{tr("UI 节点", "UI Nodes")}</h3>
|
||
<p className="mt-2 text-xs text-slate-400">{tr("用 uiautomator 抓当前页面结构，快速定位可点击元素。", "Inspect the current UI hierarchy and act on clickable nodes.")}</p>
|
||
</div>
|
||
<Button className="border border-white/12 bg-black/20" disabled={!androidSerial || !!busy} onClick={() => void refreshAndroidUi(androidSerial)}>{tr("刷新节点", "Refresh Nodes")}</Button>
|
||
</div>
|
||
<div className="mt-4 space-y-3">
|
||
{androidNodes.length === 0 ? (
|
||
<div className="rounded-2xl border border-dashed border-white/10 px-4 py-6 text-sm text-slate-500">{tr("还没有抓到 UI 节点。", "No UI nodes yet.")}</div>
|
||
) : (
|
||
androidNodes.slice(0, 12).map((node, index) => (
|
||
<div key={`${node.resource_id || node.label}-${index}`} className="rounded-2xl border border-white/8 bg-slate-950/30 p-3">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div>
|
||
<div className="text-sm text-white">{node.label || node.resource_id || node.class_name || "node"}</div>
|
||
<div className="mt-1 text-[11px] text-slate-500">{node.resource_id || node.class_name || "-"}</div>
|
||
<div className="mt-1 text-[11px] text-slate-500">{node.bounds} | {node.center_x},{node.center_y}</div>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button className="btn-focus rounded-xl border border-white/10 px-3 py-2 text-xs text-slate-200" disabled={!androidSerial || !!busy} onClick={() => void sendAndroidAction("tap", { x: node.center_x, y: node.center_y })}>{tr("点击", "Tap")}</button>
|
||
<button className="btn-focus rounded-xl border border-white/10 px-3 py-2 text-xs text-slate-200" disabled={!androidSerial || !!busy} onClick={() => void sendAndroidAction("long_press", { x: node.center_x, y: node.center_y, duration: 750 })}>{tr("长按", "Long Press")}</button>
|
||
</div>
|
||
</div>
|
||
{node.text || node.content_desc ? (
|
||
<div className="mt-2 whitespace-pre-wrap text-xs text-slate-400">{node.text || node.content_desc}</div>
|
||
) : null}
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{rawAndroidPanelUrl ? (
|
||
<div className="mt-6 rounded-3xl border border-white/8 bg-black/20 p-5">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<h3 className="text-base font-semibold text-white">web-scrcpy</h3>
|
||
<a className="btn-focus rounded-xl border border-white/12 px-3 py-2 text-xs text-slate-200" href={rawAndroidPanelUrl} target="_blank" rel="noreferrer">{tr("打开原始面板", "Open raw panel")}</a>
|
||
</div>
|
||
<iframe className="mt-4 h-[30rem] w-full rounded-2xl border border-white/10 bg-black" src={rawAndroidPanelUrl} title="web-scrcpy" />
|
||
</div>
|
||
) : null}
|
||
</article>
|
||
</section>
|
||
) : null}
|
||
|
||
{tab === "config" ? (
|
||
<section className="grid gap-6 xl:grid-cols-12">
|
||
<article className="glass rounded-3xl p-6 xl:col-span-4">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<h2 className="text-lg font-semibold text-white">{tr("配置中心", "Config Center")}</h2>
|
||
<p className="mt-2 text-xs text-slate-400">{tr("系统级与业务级配置文件分目录托管，避免大杂烩。", "System and business configs are isolated by managed roots.")}</p>
|
||
</div>
|
||
<Button className="border border-white/12 bg-black/20" onClick={() => void refreshFiles(rootId)}>{tr("刷新", "Refresh")}</Button>
|
||
</div>
|
||
<select className="mt-4 w-full rounded-2xl border border-white/12 bg-slate-950/60 px-4 py-3 text-sm text-white" value={rootId} onChange={(event) => { setRootId(event.target.value); setFilePath(""); }}>
|
||
{activeRoots.map((item) => (
|
||
<option key={item.root_id} value={item.root_id}>{item.label} | {item.file_count}</option>
|
||
))}
|
||
</select>
|
||
{currentRoot ? (
|
||
<div className="mt-4 rounded-2xl border border-white/8 bg-black/20 p-4 text-xs text-slate-400">
|
||
<p className="text-white">{currentRoot.label}</p>
|
||
<p className="mt-2">{currentRoot.description}</p>
|
||
<p className="mt-2 font-mono text-[11px] text-slate-500">{currentRoot.path}</p>
|
||
</div>
|
||
) : null}
|
||
<div className="mt-4 flex flex-wrap gap-2">
|
||
<Button className="bg-cyan-600" disabled={!!busy} onClick={() => void createFile()}>{tr("新建", "New")}</Button>
|
||
<Button className="bg-rose-600" disabled={!filePath || !!busy} onClick={() => void deleteFile()}>{tr("删除", "Delete")}</Button>
|
||
</div>
|
||
<div className="mt-4 space-y-2">
|
||
{files.map((item) => (
|
||
<button key={item.path} className={`btn-focus w-full rounded-2xl border px-4 py-3 text-left ${filePath === item.path ? "border-cyan-500/40 bg-cyan-500/10" : "border-white/8 bg-black/20"}`} onClick={() => setFilePath(item.path)}>
|
||
<div className="truncate text-sm text-white">{item.path}</div>
|
||
<div className="mt-1 text-[11px] text-slate-500">{formatBytes(item.size)} | {new Date(item.mtime * 1000).toLocaleString(lang === "zh" ? "zh-CN" : "en-US", { hour12: false })}</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</article>
|
||
<article className="glass rounded-3xl p-6 xl:col-span-8">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<h2 className="text-lg font-semibold text-white">{tr("文件编辑器", "Config Editor")}</h2>
|
||
<p className="mt-2 text-xs text-slate-400">{tr("仅允许编辑受管目录中的配置文件。", "Only approved config roots are editable.")}</p>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<label className={`btn-focus rounded-xl border border-white/12 px-3 py-2 text-xs text-slate-100 ${busy ? "cursor-not-allowed opacity-40" : ""}`}>
|
||
{busy === "file:import" ? tr("导入中...", "Importing...") : tr("导入/替换", "Import/Replace")}
|
||
<input key={`config-${fileImportKey}`} className="hidden" disabled={!!busy} type="file" accept=".yaml,.yml,.json,.cfg,.env,.list,.txt,.ini" onChange={(event) => void importManagedFile(event)} />
|
||
</label>
|
||
<Button className="bg-cyan-600" disabled={!filePath || !!busy} onClick={() => void saveFile()}>{busy === "file:save" ? tr("保存中...", "Saving...") : tr("保存", "Save")}</Button>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 rounded-2xl border border-white/8 bg-black/20 px-4 py-3 font-mono text-[11px] text-slate-500">{filePath ? `${rootId} / ${filePath}` : tr("请选择文件", "Pick a file")}</div>
|
||
<textarea className="log-scroll mt-4 min-h-[32rem] w-full resize-y rounded-2xl border border-white/10 bg-black/45 p-4 font-mono text-xs leading-relaxed text-slate-200" spellCheck={false} value={fileContent} onChange={(event) => setFileContent(event.target.value)} />
|
||
</article>
|
||
</section>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
</main>
|
||
);
|
||
}
|