Init

2026-07-16 08:31:52 +08:00
commit 8590fafac1
34 changed files with 2611 additions and 0 deletions
@@ -0,0 +1,151 @@
+const sceneList = document.querySelector("#sceneList");
+const stateText = document.querySelector("#stateText");
+const wsDot = document.querySelector("#wsDot");
+const wsText = document.querySelector("#wsText");
+const refreshBtn = document.querySelector("#refreshBtn");
+const runActionBtn = document.querySelector("#runActionBtn");
+const actionInput = document.querySelector("#actionInput");
+const syncStatus = document.querySelector("#syncStatus");
+
+let scenes = [];
+let state = null;
+let syncSnapshot = null;
+
+async function loadScenes() {
+  const res = await fetch("/api/scenes");
+  const data = await res.json();
+  scenes = data.scenes;
+  state = data.state;
+  renderScenes();
+}
+
+async function loadSyncStatus() {
+  const res = await fetch("/api/sync/status");
+  syncSnapshot = await res.json();
+  renderSyncStatus();
+}
+
+function renderScenes() {
+  if (!state) return;
+  stateText.textContent = `当前场景：${state.active_scene_id}，版本 ${state.version}`;
+  sceneList.innerHTML = "";
+  for (const scene of scenes) {
+    const item = document.createElement("article");
+    item.className = `scene ${scene.id === state.active_scene_id ? "active" : ""}`;
+    item.innerHTML = `
+      <div>
+        <h3>${scene.name}</h3>
+        <p>${scene.view} | ${scene.url}</p>
+        <p>${scene.description ?? ""}</p>
+      </div>
+      <button data-scene="${scene.id}">切换</button>
+    `;
+    item.querySelector("button").addEventListener("click", () => switchScene(scene.id));
+    sceneList.append(item);
+  }
+}
+
+function renderSyncStatus() {
+  if (!syncSnapshot) return;
+  const nodes = syncSnapshot.nodes || [];
+  const commands = (syncSnapshot.commands || []).slice(-4).reverse();
+  const rows = [];
+  rows.push(`<div class="syncRow"><span>输出节点</span><strong>${nodes.length}/${syncSnapshot.target_tiles.length}</strong></div>`);
+  for (const node of nodes) {
+    const fps = node.fps == null ? "--" : node.fps.toFixed(1);
+    const frame = node.frame_time_ms == null ? "--" : `${node.frame_time_ms.toFixed(1)}ms`;
+    const rtt = node.rtt_ms == null ? "--" : `${Math.round(node.rtt_ms)}ms`;
+    const offset = node.clock_offset_ms == null ? "--" : `${Math.round(node.clock_offset_ms)}ms`;
+    rows.push(`<div class="syncRow"><span>${node.tile_id} ${node.node_id.slice(0, 16)}</span><span>${fps}fps / ${frame} / rtt ${rtt} / offset ${offset}</span></div>`);
+  }
+  for (const command of commands) {
+    const ackText = command.acks.map((ack) => `${ack.tile_id}:${ack.status}`).join(", ") || "等待 ACK";
+    rows.push(`<div class="syncRow"><span>${command.command_type} ${command.command_id.slice(0, 8)}</span><span>${command.complete ? "完成" : "进行中"} | ${ackText}</span></div>`);
+  }
+  syncStatus.innerHTML = rows.join("");
+}
+
+async function switchScene(sceneId) {
+  const res = await fetch(`/api/scenes/${sceneId}/switch`, { method: "POST" });
+  if (!res.ok) {
+    alert(await res.text());
+    return;
+  }
+  const data = await res.json();
+  state = data.state;
+  const time = new Date(data.apply_at_ms).toLocaleTimeString("zh-CN", { hour12: false });
+  stateText.textContent = `计划切换：${state.active_scene_id}，提交时间 ${time}`;
+  renderScenes();
+  loadSyncStatus();
+}
+
+async function postAction(action, args = {}, target = "wall") {
+  const res = await fetch("/api/actions", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ target, action, args }),
+  });
+  if (!res.ok) {
+    alert(await res.text());
+    return;
+  }
+  loadSyncStatus();
+}
+
+async function runCustomAction() {
+  const raw = actionInput.value.trim();
+  if (!raw) return;
+  let payload;
+  try {
+    payload = JSON.parse(raw);
+  } catch {
+    payload = { action: raw, args: {} };
+  }
+  await postAction(payload.action, payload.args || {}, payload.target || "wall");
+}
+
+function connectWs() {
+  const protocol = location.protocol === "https:" ? "wss" : "ws";
+  const ws = new WebSocket(`${protocol}://${location.host}/ws/admin`);
+  ws.addEventListener("open", () => {
+    wsDot.classList.add("ok");
+    wsText.textContent = "WebSocket 已连接";
+  });
+  ws.addEventListener("close", () => {
+    wsDot.classList.remove("ok");
+    wsText.textContent = "WebSocket 重连中";
+    setTimeout(connectWs, 1200);
+  });
+  ws.addEventListener("message", (event) => {
+    const message = JSON.parse(event.data);
+    if (message.type === "state") {
+      state = message.payload.state || message.payload;
+      renderScenes();
+    }
+    if (["prepare_scene", "commit_scene"].includes(message.type)) {
+      state = message.payload.state;
+      renderScenes();
+      loadSyncStatus();
+    }
+    if (["ack", "heartbeat"].includes(message.type)) {
+      if (message.type === "ack") {
+        wsText.textContent = `${message.payload.tile_id || "node"} ${message.payload.status}`;
+      }
+      loadSyncStatus();
+    }
+  });
+}
+
+refreshBtn.addEventListener("click", loadScenes);
+runActionBtn.addEventListener("click", runCustomAction);
+document.querySelectorAll("[data-action]").forEach((button) => {
+  button.addEventListener("click", () => {
+    const args = button.dataset.args ? JSON.parse(button.dataset.args) : {};
+    postAction(button.dataset.action, args);
+  });
+});
+
+loadScenes();
+loadSyncStatus();
+connectWs();
+setInterval(loadSyncStatus, 3000);