feat: webapp topbar and tab switching

2026-08-16 16:34:39 +08:00
parent f8639917f3
commit 867ba3b098
5 changed files with 220 additions and 0 deletions
@@ -0,0 +1,59 @@
+// webAPP 顶栏：回退/前进/重载 + 标题 + 标签面板（切换/关闭）
+// webapp topbar: back/forward/reload + title + tab panel (switch/close)
+// 原生方法（webGoBack/webGoForward/webReload/switchTab/closeWebApp）Task 13 才实现，
+// 此处仅作为调用方，点击会静默 reject（符合预期）。
+// Native methods (webGoBack/webGoForward/webReload/switchTab/closeWebApp) land in Task 13;
+// this topbar is only a caller, clicks silently reject (expected).
+
+// 展示/刷新顶栏：tabs 为标签数组（含 active 标记）
+// Show/refresh the topbar: tabs is the tab array (with active flag)
+window.showTopbar = function (tabs) {
+  let bar = document.getElementById('web-topbar');
+  if (!bar) {
+    bar = document.createElement('div');
+    bar.id = 'web-topbar';
+    bar.innerHTML = `
+      <button id="tb-back" title="回退">←</button>
+      <button id="tb-fwd" title="前进">→</button>
+      <button id="tb-reload" title="重载">⟳</button>
+      <span class="tb-title" id="tb-title"></span>
+      <button id="tb-tabs"></button>`;
+    document.body.appendChild(bar);
+    document.getElementById('tb-back').onclick = () => bridge.call('webGoBack');
+    document.getElementById('tb-fwd').onclick = () => bridge.call('webGoForward');
+    document.getElementById('tb-reload').onclick = () => bridge.call('webReload');
+    document.getElementById('tb-tabs').onclick = () => showTabPanel(tabs);
+  }
+  document.getElementById('tb-tabs').textContent = `标签 (${tabs.length})`;
+  const active = tabs.find(t => t.active);
+  document.getElementById('tb-title').textContent = active ? active.name : '';
+};
+
+// 标签面板：列出所有标签，点击切换，× 关闭
+// Tab panel: list all tabs, click to switch, × to close
+function showTabPanel(tabs) {
+  let panel = document.getElementById('tab-panel');
+  if (!panel) {
+    panel = document.createElement('div');
+    panel.id = 'tab-panel';
+    document.body.appendChild(panel);
+  }
+  panel.innerHTML = tabs.map(t => `
+    <div class="tab-row ${t.active ? 'active' : ''}" data-id="${t.id}">
+      <span class="tab-name">${t.name}</span>
+      <button class="tab-close" title="关闭">×</button>
+    </div>`).join('');
+  panel.querySelectorAll('.tab-row').forEach(row => {
+    const id = row.dataset.id;
+    row.querySelector('.tab-name').onclick = () => { bridge.call('switchTab', id); closeTabPanel(); };
+    row.querySelector('.tab-close').onclick = () => bridge.call('closeWebApp', id);
+  });
+  panel.style.display = 'block';
+}
+
+// 收起标签面板
+// Collapse the tab panel
+function closeTabPanel() {
+  const panel = document.getElementById('tab-panel');
+  if (panel) panel.style.display = 'none';
+}