55 lines
1.7 KiB
JavaScript
55 lines
1.7 KiB
JavaScript
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));
|