add official Chrome feature demos

2026-06-14 15:22:32 +08:00
parent 500217f2fd
commit de690f85fa
32 changed files with 2376 additions and 567 deletions
@@ -0,0 +1,54 @@
+import { escapeHtml, logTo, setText } from "../shared.js";
+
+const features = [
+  {
+    name: "View Transitions API",
+    available: () => "startViewTransition" in document,
+    advice: "可作为体验增强；不支持时直接更新 DOM。",
+  },
+  {
+    name: "Popover API",
+    available: () => "popover" in HTMLElement.prototype,
+    advice: "适合替代一部分自研浮层；保留 dialog/menu fallback。",
+  },
+  {
+    name: "CSS Container Queries",
+    available: () => CSS.supports("container-type", "inline-size"),
+    advice: "适合组件级响应式；老环境使用传统 media query。",
+  },
+  {
+    name: "Prompt API",
+    available: () => "LanguageModel" in window,
+    advice: "实验/受环境限制；必须做能力检测和 mock 或云端 fallback。",
+  },
+  {
+    name: "WebMCP",
+    available: () => "modelContext" in navigator,
+    advice: "实验方向；适合演示 Agentic Web 的工具契约。",
+  },
+];
+
+const table = document.querySelector("#feature-table");
+const counts = { ready: 0, enhanced: 0, blocked: 0 };
+
+table.innerHTML = features
+  .map((feature) => {
+    const ok = feature.available();
+    const type = ok ? "ready" : feature.name.includes("API") ? "enhanced" : "blocked";
+    counts[type] += 1;
+    logTo("#log", "baseline.feature", {
+      feature: feature.name,
+      available: ok,
+      advice: feature.advice,
+    });
+    return `<tr>
+      <td><strong>${escapeHtml(feature.name)}</strong></td>
+      <td><span class="pill ${ok ? "green" : "amber"}">${ok ? "available" : "not detected"}</span></td>
+      <td>${escapeHtml(feature.advice)}</td>
+    </tr>`;
+  })
+  .join("");
+
+setText("#ready-count", String(counts.ready));
+setText("#enhanced-count", String(counts.enhanced));
+setText("#blocked-count", String(counts.blocked));