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));
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Baseline Demo</title>
+    <link rel="stylesheet" href="../shared.css" />
+  </head>
+  <body>
+    <main class="shell">
+      <aside class="rail">
+        <p class="eyebrow">Web Platform</p>
+        <h1>Baseline</h1>
+        <p class="lead">演示如何把“能不能用某个 Web API”变成特性状态、运行检测和 fallback 策略。</p>
+        <nav class="nav" aria-label="Demo navigation">
+          <a href="../index.html"><span class="num">0</span><span>返回总览</span></a>
+          <a href="../webmcp/index.html"><span class="num">1</span><span>WebMCP</span></a>
+          <a href="../prompt-api/index.html"><span class="num">2</span><span>Prompt API</span></a>
+          <a href="../devtools-agents/index.html"><span class="num">3</span><span>DevTools Agents</span></a>
+          <a href="../modern-web-guidance/index.html"><span class="num">4</span><span>Modern Web Guidance</span></a>
+          <a class="active" href="./index.html"><span class="num">5</span><span>Baseline</span></a>
+          <a href="../view-transitions/index.html"><span class="num">6</span><span>View Transitions</span></a>
+        </nav>
+        <div class="note">本地矩阵用于现场讲述；生产判断仍应回到官方 Baseline 数据和项目目标浏览器。</div>
+      </aside>
+
+      <section class="stage">
+        <div class="hero">
+          <section class="statement">
+            <p class="eyebrow">Can I ship it?</p>
+            <h2>从“Chrome 支持了”升级到“目标用户能稳定用”。</h2>
+            <p>
+              Baseline 的价值不是替代 feature detection，而是把团队讨论从版本号转成特性成熟度和采用策略。
+            </p>
+          </section>
+          <aside class="metrics">
+            <div class="metric"><strong id="ready-count">0</strong><span>当前环境可直接运行的能力</span></div>
+            <div class="metric"><strong id="enhanced-count">0</strong><span>适合渐进增强的能力</span></div>
+            <div class="metric"><strong id="blocked-count">0</strong><span>需要 fallback 或实验开关</span></div>
+          </aside>
+        </div>
+
+        <section class="two-col">
+          <div class="panel">
+            <p class="eyebrow">Feature matrix</p>
+            <h2>本地特性检测</h2>
+            <table class="table">
+              <thead>
+                <tr>
+                  <th>能力</th>
+                  <th>运行检测</th>
+                  <th>采用建议</th>
+                </tr>
+              </thead>
+              <tbody id="feature-table"></tbody>
+            </table>
+          </div>
+
+          <aside class="console">
+            <p class="eyebrow">Decision log</p>
+            <h2>判断依据</h2>
+            <pre id="log">正在检测...</pre>
+          </aside>
+        </section>
+      </section>
+    </main>
+
+    <script type="module" src="./baseline.js"></script>
+  </body>
+</html>