推进 INI 面板 control page entry

2026-06-14 23:02:50 +08:00
parent 27d2316f78
commit 2844fd25c3
6 changed files with 408 additions and 0 deletions
--- a/wasm-port/runtime/ui/ini-panel/control-page.html
+++ b/wasm-port/runtime/ui/ini-panel/control-page.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>LinuxCNC INI Control View</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --bg: #f2f5f8;
+      --panel: #ffffff;
+      --border: #cfd8e1;
+      --text: #17212b;
+      --muted: #5a6875;
+      --accent: #1366a6;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "Segoe UI", "Noto Sans", sans-serif;
+      background: var(--bg);
+      color: var(--text);
+    }
+    main {
+      max-width: 1040px;
+      margin: 0 auto;
+      padding: 24px;
+      display: grid;
+      gap: 16px;
+    }
+    .panel {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      box-shadow: 0 10px 30px rgba(17, 34, 51, 0.06);
+      padding: 16px;
+      display: grid;
+      gap: 12px;
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+    }
+    .status {
+      color: var(--muted);
+      font: 13px/1.4 "SFMono-Regular", "Consolas", monospace;
+      overflow-wrap: anywhere;
+    }
+    .control-view {
+      display: grid;
+      gap: 12px;
+      border-top: 1px solid #edf2f6;
+      padding-top: 12px;
+    }
+    iframe {
+      display: none;
+    }
+    .control-view [data-control-view-sections] {
+      display: grid;
+      gap: 10px;
+    }
+    .control-view section {
+      border-top: 1px solid #edf2f6;
+      padding-top: 10px;
+      display: grid;
+      gap: 8px;
+    }
+    .control-view h3 {
+      margin: 0;
+      font-size: 13px;
+      font-weight: 700;
+    }
+    .control-view dl {
+      display: grid;
+      grid-template-columns: 132px 1fr;
+      gap: 6px 10px;
+      margin: 0;
+    }
+    .control-view dt {
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .control-view dd {
+      margin: 0;
+      font: 12px/1.4 "SFMono-Regular", "Consolas", monospace;
+      overflow-wrap: anywhere;
+    }
+    @media (max-width: 640px) {
+      main { padding: 16px; }
+      .control-view dl { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <section class="panel">
+      <h1>LinuxCNC INI Control View</h1>
+      <div id="control-page-status" class="status">waiting for panel</div>
+      <div id="control-page-view" class="control-view"></div>
+    </section>
+  </main>
+  <iframe id="panel-frame" title="LinuxCNC INI panel" aria-hidden="true"></iframe>
+  <script type="module" src="./control-page.js"></script>
+</body>
+</html>
--- a/wasm-port/runtime/ui/ini-panel/control-page.js
+++ b/wasm-port/runtime/ui/ini-panel/control-page.js
@@ -0,0 +1,58 @@
+import {
+  renderMachineSessionControlView,
+} from "./control-view-renderer.js";
+
+const panelFrameNode = document.getElementById("panel-frame");
+const statusNode = document.getElementById("control-page-status");
+const viewNode = document.getElementById("control-page-view");
+
+let refreshTimer = null;
+
+function getPanelWindow() {
+  return panelFrameNode?.contentWindow ?? null;
+}
+
+function getPanelApi() {
+  return getPanelWindow()?.linuxCncIniPanelApi ?? null;
+}
+
+function getControlView() {
+  return getPanelApi()?.getMachineSessionControlView?.() ?? null;
+}
+
+function renderControlPage() {
+  const view = getControlView();
+  if (!view) {
+    statusNode.textContent = "waiting for panel";
+    viewNode.textContent = "";
+    return null;
+  }
+
+  statusNode.textContent = [
+    view.status.lastAction ?? "-",
+    view.status.runStatus ?? "-",
+    view.status.error ?? "-",
+  ].join(" | ");
+  return renderMachineSessionControlView(viewNode, view);
+}
+
+function startPolling() {
+  if (!refreshTimer) {
+    refreshTimer = setInterval(renderControlPage, 200);
+  }
+}
+
+panelFrameNode.addEventListener("load", () => {
+  renderControlPage();
+  startPolling();
+});
+
+panelFrameNode.src = "./index.html";
+renderControlPage();
+startPolling();
+
+window.linuxCncIniPanelControlPageApi = {
+  getControlView,
+  getPanelApi,
+  renderControlPage,
+};