Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ji3206
|
9ab5f57b85 | ||
|
ji3206
|
de690f85fa | ||
|
ji3206
|
500217f2fd | ||
|
ji3206
|
6f39b960d0 |
@@ -54,11 +54,11 @@ WebMCP 可以理解为“网页给 AI Agent 暴露的一组工具清单和接口
|
||||
- 执行逻辑：调用后网页做什么
|
||||
- 返回结果：告诉 Agent 成功还是失败
|
||||
|
||||
可以用 `document.modelContext.registerTool` 作为概念示例。需要强调：WebMCP 仍是实验性方向，适合作为渐进增强，不应该假设所有浏览器都已经稳定支持。
|
||||
可以用 `navigator.modelContext.registerTool` 作为概念示例。需要强调：WebMCP 仍是实验性方向，适合作为渐进增强，不应该假设所有浏览器都已经稳定支持。
|
||||
|
||||
### 5. Chrome 新特性快闪
|
||||
### 5. Chrome 新特性演示
|
||||
|
||||
这一部分只做快速展示，不展开细节：
|
||||
这一部分分成正式演示和快闪：
|
||||
|
||||
- **Modern Web Guidance**：给 AI 编程工具补现代 Web 知识，避免写过时代码。
|
||||
- **Chrome DevTools for agents**：让 AI 能读取 console、network、performance、Lighthouse 等真实浏览器信息。
|
||||
@@ -69,6 +69,14 @@ WebMCP 可以理解为“网页给 AI Agent 暴露的一组工具清单和接口
|
||||
|
||||
这一章服务于主线：Chrome 正在让 Web 同时面向人、开发者工具和 AI Agent 进化。
|
||||
|
||||
正式 demo 入口：
|
||||
|
||||
- `public/demo/webmcp/`：WebMCP 工具契约演示。
|
||||
- `scripts/demo-modern-web-guidance.sh` 和 `public/demo/modern-web-guidance/`：Modern Web Guidance 官方 CLI 演示。
|
||||
- `public/demo/devtools-agents/`：DevTools for agents 检查目标页。
|
||||
- `public/html-in-canvas/`：HTML-in-Canvas origin trial / fallback 演示。
|
||||
- `public/demo/view-transitions/`：View Transitions 渐进增强演示。
|
||||
|
||||
### 6. 收束：开发者现在该记住什么
|
||||
|
||||
- Web 页面未来不只是给人看的，也会被 Agent 使用。
|
||||
@@ -88,6 +96,9 @@ WebMCP 可以理解为“网页给 AI Agent 暴露的一组工具清单和接口
|
||||
- [slides.md](./slides.md)：默认首页、章节入口和全局顺序
|
||||
- [pages/outline.md](./pages/outline.md)：分享大纲
|
||||
- [pages/demo/](./pages/demo/)：模拟展示详情页
|
||||
- [public/demo/](./public/demo/)：可运行浏览器 demo 入口
|
||||
- [public/html-in-canvas/](./public/html-in-canvas/)：HTML-in-Canvas 专门演示
|
||||
- [scripts/demo-modern-web-guidance.sh](./scripts/demo-modern-web-guidance.sh)：Modern Web Guidance 官方 CLI 演示脚本
|
||||
- [style.css](./style.css)：主题微调
|
||||
|
||||
## 常用脚本
|
||||
|
||||
+5
-1
@@ -5,7 +5,8 @@
|
||||
"scripts": {
|
||||
"build": "slidev build",
|
||||
"dev": "slidev --open",
|
||||
"export": "slidev export"
|
||||
"export": "slidev export",
|
||||
"export:pptx": "slidev export --format pptx --output slides-export.pptx"
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify-json/logos": "^1.2.11",
|
||||
@@ -15,5 +16,8 @@
|
||||
"slidev-theme-penguin": "^2.3.1",
|
||||
"vite-svg-loader": "^5.1.1",
|
||||
"vue": "^3.5.33"
|
||||
},
|
||||
"devDependencies": {
|
||||
"playwright-chromium": "^1.60.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,3 @@ Chrome 更新不是新闻流，而是 Web 产品能力池。
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
最后强调：浏览器能力变化很快，团队需要的是可持续的更新机制。把 Chrome 新能力当作产品和工程共同评估的素材，而不是纯前端知识点。
|
||||
-->
|
||||
|
||||
+16
-14
@@ -1,33 +1,35 @@
|
||||
# 模拟展示 4：团队落地清单
|
||||
# Demo 7：本地兜底，不抢 WebMCP 主线
|
||||
|
||||
<div class="grid grid-cols-2 gap-8 mt-8">
|
||||
|
||||
<div class="card-green">
|
||||
<div class="font-semibold mb-3">本周可做</div>
|
||||
<div class="font-semibold mb-3">本地页面做什么</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- 建一个 Chrome 更新跟踪文档
|
||||
- 选 1 个 DevTools 工作流做内部演示
|
||||
- 为 1 个新能力写最小 demo
|
||||
- 标注生产可用与仅实验的边界
|
||||
- 官方资料导航
|
||||
- 三路径对比仪表盘
|
||||
- WebMCP 可运行工程入口
|
||||
- MWG / DevTools / Canvas / View Transitions 演示入口
|
||||
- 现场讲述卡片
|
||||
- 网络不可用时继续演示
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-red">
|
||||
<div class="font-semibold mb-3">不要直接做</div>
|
||||
<div class="font-semibold mb-3">本地页面不做什么</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- 只因 Chrome 支持就上线
|
||||
- 忽略 Safari / Firefox 用户
|
||||
- 把实验能力写进核心链路
|
||||
- 跳过权限与隐私评估
|
||||
- 不复刻所有 Chrome API
|
||||
- 不依赖 flags 才能讲完
|
||||
- 不做厂商 SDK 接入教程
|
||||
- 不把实验能力讲成稳定能力
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
这一页把分享从“知道了”落到“接下来做什么”。建议最后留一个简单清单，让团队每月复盘一次 Chrome 更新，并把值得试验的能力进入工程 backlog。
|
||||
-->
|
||||
<div class="mt-8 card-blue text-sm">
|
||||
打开总入口：<span class="font-mono">/demo/index.html</span>。正式 demo 入口都从这里进入。
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
# Demo 6：DevTools for agents 官方流程
|
||||
|
||||
<div class="grid grid-cols-2 gap-8 mt-8">
|
||||
|
||||
<div class="card-blue">
|
||||
<div class="font-semibold mb-3">官方 MCP 配置</div>
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"chrome-devtools": {
|
||||
"command": "npx",
|
||||
"args": ["chrome-devtools-mcp@latest"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-red">
|
||||
<div class="font-semibold mb-3">本地检查目标</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- <span class="font-mono">/demo/devtools-agents/index.html</span>
|
||||
- 故意制造 console warning / error
|
||||
- 故意制造 404 图片
|
||||
- 点击按钮触发长任务
|
||||
- 让 Agent 读取 console、network、trace
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-8 card text-sm">
|
||||
核心结论：DevTools for agents 不是页面 API，而是把真实浏览器运行时交给 coding agent，让它不再只根据源码猜问题。
|
||||
</div>
|
||||
@@ -1,32 +1,39 @@
|
||||
# 模拟展示 2：DevTools 排查链路
|
||||
# Demo 5：AI 操作 Web 的三种路径
|
||||
|
||||
<div class="mt-8">
|
||||
|
||||
```mermaid {scale: 0.82}
|
||||
flowchart LR
|
||||
A[用户反馈卡顿] --> B[Performance 录制]
|
||||
B --> C[定位长任务]
|
||||
C --> D[Network 查资源瀑布]
|
||||
D --> E[Coverage 查无效代码]
|
||||
E --> F[形成优化清单]
|
||||
A[用户一句话任务] --> B{Agent 如何操作网页?}
|
||||
B --> C[看截图<br/>Vision]
|
||||
B --> D[读结构<br/>DOM / A11y]
|
||||
B --> E[调工具<br/>WebMCP]
|
||||
C --> F[慢 / 贵 / UI 敏感]
|
||||
D --> G[更结构化 / 仍易误点]
|
||||
E --> H[语义工具 / 参数明确 / 可控]
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-6 mt-8">
|
||||
<div class="grid grid-cols-3 gap-5 mt-8">
|
||||
|
||||
<div class="card">
|
||||
<div class="font-semibold mb-2">演示素材</div>
|
||||
<div class="text-sm text-gray-400">准备一个加载慢、交互卡顿、资源偏大的页面作为示例。</div>
|
||||
<div class="card-red">
|
||||
<div class="font-semibold mb-2">视觉识别</div>
|
||||
<div class="text-sm text-gray-500">通用，不改页面；但每一步都要观察、推理、点击，token 与耗时容易升高。</div>
|
||||
</div>
|
||||
|
||||
<div class="card-green">
|
||||
<div class="font-semibold mb-2">观众收获</div>
|
||||
<div class="text-sm text-gray-400">把 DevTools 从“会打开”变成“按链路定位问题”。</div>
|
||||
<div class="font-semibold mb-2">DOM / A11y</div>
|
||||
<div class="text-sm text-gray-500">比截图更结构化；但复杂组件、隐藏状态、错误点击仍然会影响可靠性。</div>
|
||||
</div>
|
||||
|
||||
<div class="card-blue">
|
||||
<div class="font-semibold mb-2">WebMCP</div>
|
||||
<div class="text-sm text-gray-500">页面主动暴露工具，Agent 调业务能力，不再猜按钮和表单。</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
这一页用于现场演示细节。建议讲一个真实或模拟页面，从 Performance 开始抓主线程问题，再用 Network 和 Coverage 找资源问题，最后输出可执行的优化清单。
|
||||
-->
|
||||
<div class="mt-8 card-amber text-sm">
|
||||
示例任务：创建“订单管理”模块，包括词条、菜单、角色权限绑定。案例数据只说明趋势，不承诺所有项目都有相同收益。
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
# Demo 7：HTML-in-Canvas
|
||||
|
||||
<div class="grid grid-cols-2 gap-8 mt-8">
|
||||
|
||||
<div class="card-blue">
|
||||
<div class="font-semibold mb-3">官方能力</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- 把真实 DOM 绘制进 Canvas / WebGL / WebGPU 场景
|
||||
- 保留可访问性、搜索、翻译等浏览器能力
|
||||
- 当前是 origin trial，环境要求高
|
||||
- 现场必须准备 fallback
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-green">
|
||||
<div class="font-semibold mb-3">本地演示</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- 打开 <span class="font-mono">/html-in-canvas/index.html</span>
|
||||
- 支持时调用 <span class="font-mono">drawElementImage()</span>
|
||||
- 不支持时显示同一 DOM 表单的 fallback 预览
|
||||
- 讲清楚“DOM 进入画布”而不是“canvas 手绘控件”
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-8 card-amber text-sm">
|
||||
运行条件：Chrome Canary 149+，开启 <span class="font-mono">chrome://flags/#canvas-draw-element</span>；Chrome 官方说明该 API 在 Chrome 148-150 处于 origin trial。
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
# Demo 5：Modern Web Guidance 官方 CLI
|
||||
|
||||
<div class="grid grid-cols-[1.1fr_0.9fr] gap-8 mt-8">
|
||||
|
||||
<div class="card-blue">
|
||||
<div class="font-semibold mb-3">现场命令</div>
|
||||
|
||||
```bash
|
||||
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
|
||||
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-green">
|
||||
<div class="font-semibold mb-3">演示重点</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- AI coding agent 容易写旧方案
|
||||
- MWG 把现代 Web 指南变成可检索技能
|
||||
- search 找 use case，retrieve 拿具体指南
|
||||
- 指南会带 Baseline / fallback 意识
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-8 card-amber text-sm">
|
||||
本地辅助页：<span class="font-mono">/demo/modern-web-guidance/index.html</span>；脚本：<span class="font-mono">scripts/demo-modern-web-guidance.sh</span>。
|
||||
</div>
|
||||
+13
-17
@@ -1,28 +1,28 @@
|
||||
# 模拟展示 3：Web 平台能力评估卡
|
||||
# Demo 9：最后快闪与串联
|
||||
|
||||
<div class="grid grid-cols-2 gap-8 mt-8">
|
||||
|
||||
<div class="card-blue">
|
||||
<div class="font-semibold mb-3">能力示例</div>
|
||||
<div class="font-semibold mb-3">Agentic Web 相关</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- CSS 新布局与交互能力
|
||||
- View Transitions
|
||||
- File System / Clipboard / Share APIs
|
||||
- PWA 安装与离线体验
|
||||
- 本地 AI 与浏览器内置能力探索
|
||||
- WebMCP：页面暴露工具给 Agent
|
||||
- WebMCP：页面暴露工具给 Agent
|
||||
- Modern Web Guidance：已演示官方 CLI
|
||||
- DevTools for agents：已演示官方 MCP 流程
|
||||
- Prompt API：官方 demo 快闪
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="font-semibold mb-3">评估维度</div>
|
||||
<div class="font-semibold mb-3">体验与平台能力</div>
|
||||
<div class="space-y-2 text-sm text-gray-300">
|
||||
|
||||
- 用户价值：解决什么真实问题？
|
||||
- 兼容性：Chrome-only 还是跨浏览器？
|
||||
- 降级方案：不可用时如何处理？
|
||||
- 风险：权限、隐私、性能、安全
|
||||
- HTML-in-Canvas：已演示本地页和官方限制
|
||||
- Baseline：判断哪些 Web 能力可以放心评估
|
||||
- View Transitions：已演示本地页
|
||||
- Navigation API：更现代的导航状态管理
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -30,9 +30,5 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-8 card-amber text-sm">
|
||||
推荐输出格式：能力名称 / Chrome 支持状态 / 业务场景 / Demo 链接 / 风险 / 下一步。
|
||||
收束判断：Chrome 新能力不是孤立 API，而是同时升级 Agent 交互、开发工作流和用户体验。
|
||||
</div>
|
||||
|
||||
<!--
|
||||
这里可以把每个新 API 都变成一张评估卡。不要只问“能不能用”，而是问“能解决什么问题、什么时候可上线、不能用时怎么降级”。
|
||||
-->
|
||||
|
||||
+21
-18
@@ -1,44 +1,47 @@
|
||||
# 模拟展示 1：快速扫一版 Chrome 更新
|
||||
# Demo 1：演示交付物总览
|
||||
|
||||
<div class="grid grid-cols-3 gap-5 mt-8">
|
||||
|
||||
<div class="card-blue">
|
||||
<div class="font-semibold mb-3">信息源</div>
|
||||
<div class="font-semibold mb-3">幻灯片内容</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- Chrome Developers Blog
|
||||
- ChromeStatus
|
||||
- DevTools Release Notes
|
||||
- MDN Baseline
|
||||
- 分别介绍新增能力
|
||||
- 说明解决的问题
|
||||
- 标注成熟度和限制
|
||||
- 给出官方资料来源
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-green">
|
||||
<div class="font-semibold mb-3">筛选标准</div>
|
||||
<div class="font-semibold mb-3">工程演示什么</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- 是否默认启用
|
||||
- 是否跨浏览器可用
|
||||
- 是否影响现有代码
|
||||
- 是否带来明显产品收益
|
||||
- WebMCP 可运行页面
|
||||
- 声明式表单工具
|
||||
- 指令式 registerTool
|
||||
- 工具 schema 和调用日志
|
||||
- mock runtime 兜底
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-amber">
|
||||
<div class="font-semibold mb-3">输出物</div>
|
||||
<div class="font-semibold mb-3">新增正式 demo</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- 3 个可试验能力
|
||||
- 2 个需要关注的变更
|
||||
- 1 个团队落地建议
|
||||
- Modern Web Guidance
|
||||
- DevTools for agents
|
||||
- HTML-in-Canvas
|
||||
- View Transitions
|
||||
- Prompt API / Baseline 保留快闪
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
这一页可以模拟现场打开 release notes。重点不是最新版本号，而是演示方法：先看默认启用与兼容性，再看是否影响我们现有业务，最后只挑少数真正需要行动的条目。
|
||||
-->
|
||||
<div class="mt-8 card text-sm">
|
||||
原则：WebMCP 是主 demo；Modern Web Guidance 和 DevTools for agents 按官方流程演示；HTML-in-Canvas 和 View Transitions 用本地页面辅助展示。
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
# Demo 8：View Transitions
|
||||
|
||||
<div class="grid grid-cols-2 gap-8 mt-8">
|
||||
|
||||
<div class="card-green">
|
||||
<div class="font-semibold mb-3">为什么演示</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- 效果直观，风险低
|
||||
- 能说明 Chrome 在升级 Web 体验能力
|
||||
- 适合和 Agentic Web 主线形成对照：工具层和体验层都在进化
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-blue">
|
||||
<div class="font-semibold mb-3">运行入口</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- 打开 <span class="font-mono">/demo/view-transitions/index.html</span>
|
||||
- 点击订单 / 分析 / 设置
|
||||
- 支持时走 <span class="font-mono">document.startViewTransition()</span>
|
||||
- 不支持时普通切换
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-8 card text-sm">
|
||||
核心结论：View Transitions 把“状态变化”从手写动画提升为浏览器级能力，适合渐进增强。
|
||||
</div>
|
||||
@@ -0,0 +1,34 @@
|
||||
# Demo 2：WebMCP 到底演示什么？
|
||||
|
||||
<div class="grid grid-cols-2 gap-8 mt-8">
|
||||
|
||||
<div class="card-blue">
|
||||
<div class="font-semibold mb-3">一句话</div>
|
||||
<div class="space-y-3 text-sm">
|
||||
|
||||
WebMCP 让网页把业务能力暴露成结构化工具，Agent 看到的是工具名、描述、参数 schema 和执行结果，而不是只靠截图或 DOM 猜按钮。
|
||||
|
||||
<div class="font-mono text-xs opacity-80">
|
||||
navigator.modelContext.registerTool(...)
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-green">
|
||||
<div class="font-semibold mb-3">两种 API</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- 声明式：给标准 HTML 表单添加工具属性
|
||||
- 指令式：用 JavaScript 注册复杂工具
|
||||
- 共同目标：把页面能力变成 Agent 可理解的契约
|
||||
- 演示口径：提高可靠性，不承诺零错误率
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-8 card-amber text-sm">
|
||||
实验边界：Chrome 官方文档标注 WebMCP 仍处于 proposed / origin trial / flag 阶段；现场 demo 必须有 mock 兜底。
|
||||
</div>
|
||||
@@ -0,0 +1,33 @@
|
||||
# Demo 3：WebMCP 原始工程能跑起来
|
||||
|
||||
<div class="grid grid-cols-[1.05fr_0.95fr] gap-8 mt-8">
|
||||
|
||||
<div class="card">
|
||||
<div class="font-semibold mb-3">工程文件</div>
|
||||
|
||||
```txt
|
||||
public/demo/webmcp/
|
||||
├── index.html # 业务 UI + 声明式表单工具
|
||||
├── styles.css # 演示界面样式
|
||||
└── app.js # registerTool + mock runtime + 执行日志
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-blue">
|
||||
<div class="font-semibold mb-3">运行入口</div>
|
||||
<div class="space-y-3 text-sm">
|
||||
|
||||
- 启动：`pnpm dev`
|
||||
- 打开：`/demo/webmcp/index.html`
|
||||
- 无 WebMCP 环境：走本地 mock runtime
|
||||
- 有 WebMCP 环境：优先调用 `navigator.modelContext`
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-8 card-green text-sm">
|
||||
现场打开工程，不只展示链接；页面 UI 和 Agent 工具视角需要同时呈现。
|
||||
</div>
|
||||
@@ -0,0 +1,37 @@
|
||||
# Demo 4：现场操作脚本
|
||||
|
||||
<div class="grid grid-cols-4 gap-4 mt-8">
|
||||
|
||||
<div class="card-blue">
|
||||
<div class="font-semibold mb-3">1. 人类 UI</div>
|
||||
<div class="text-sm">
|
||||
提交售后工单表单，说明原有页面流程没有被替换。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-green">
|
||||
<div class="font-semibold mb-3">2. 工具发现</div>
|
||||
<div class="text-sm">
|
||||
右侧展示工具名、描述、schema：这是 Agent 看到的契约。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-amber">
|
||||
<div class="font-semibold mb-3">3. 单工具调用</div>
|
||||
<div class="text-sm">
|
||||
点击查询订单、生成回复、退款审核，观察状态和日志变化。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-red">
|
||||
<div class="font-semibold mb-3">4. 复合任务</div>
|
||||
<div class="text-sm">
|
||||
执行复合任务：查询订单 → 进入审核 → 生成回复草稿。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-8 card text-sm">
|
||||
核心结论：WebMCP 不是让 Agent 更会点击，而是让网页直接声明“我有哪些可调用能力”。敏感动作仍然要保留用户确认、权限和审计。
|
||||
</div>
|
||||
+8
-12
@@ -4,30 +4,26 @@
|
||||
|
||||
<div class="card p-5">
|
||||
<div class="text-blue-400 text-sm font-semibold mb-2">01</div>
|
||||
<div class="text-xl font-bold mb-2">Chrome 更新怎么看</div>
|
||||
<div class="text-sm text-gray-400">Release Notes · ChromeStatus · Baseline · Origin Trials</div>
|
||||
<div class="text-xl font-bold mb-2">浏览器的新使用者</div>
|
||||
<div class="text-sm text-gray-400">Human UI · Agent layer · Structured actions</div>
|
||||
</div>
|
||||
|
||||
<div class="card-green p-5">
|
||||
<div class="text-emerald-400 text-sm font-semibold mb-2">02</div>
|
||||
<div class="text-xl font-bold mb-2">Web 平台新能力</div>
|
||||
<div class="text-sm text-gray-400">CSS · Web APIs · PWA · Media · AI-adjacent APIs</div>
|
||||
<div class="text-xl font-bold mb-2">AI 操作网页为什么难</div>
|
||||
<div class="text-sm text-gray-400">Vision · DOM / A11y · Tool calling</div>
|
||||
</div>
|
||||
|
||||
<div class="card-amber p-5">
|
||||
<div class="text-amber-400 text-sm font-semibold mb-2">03</div>
|
||||
<div class="text-xl font-bold mb-2">DevTools 工作流</div>
|
||||
<div class="text-sm text-gray-400">Performance · Network · CSS Overview · Recorder</div>
|
||||
<div class="text-xl font-bold mb-2">MCP / WebMCP</div>
|
||||
<div class="text-sm text-gray-400">Tool schema · Structured actions · Safety boundary</div>
|
||||
</div>
|
||||
|
||||
<div class="card-red p-5">
|
||||
<div class="text-red-400 text-sm font-semibold mb-2">04</div>
|
||||
<div class="text-xl font-bold mb-2">落地与风险</div>
|
||||
<div class="text-sm text-gray-400">兼容性 · 安全边界 · 灰度策略 · 团队清单</div>
|
||||
<div class="text-xl font-bold mb-2">官方 demo 快闪</div>
|
||||
<div class="text-sm text-gray-400">MWG · DevTools agents · Prompt API · HTML-in-Canvas</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
建议讲法：先讲信息入口，再讲能力分类，最后讲如何落地。这样听众不会只记住几个孤立 API，而是学会建立自己的 Chrome 更新雷达。
|
||||
-->
|
||||
|
||||
+9
-13
@@ -1,15 +1,15 @@
|
||||
# 这次分享解决什么问题？
|
||||
# 这次分享的目标
|
||||
|
||||
<div class="grid grid-cols-2 gap-8 mt-8">
|
||||
|
||||
<div class="card-blue">
|
||||
<div class="font-semibold mb-3">听众能获得</div>
|
||||
<div class="font-semibold mb-3">核心收获</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- Chrome 近期值得关注的新能力地图
|
||||
- 哪些能力已经适合进入生产评估
|
||||
- 如何用 DevTools 更快定位性能与兼容性问题
|
||||
- 如何把浏览器更新转成团队行动项
|
||||
- 理解 AI Agent 操作网页为什么困难
|
||||
- 看懂 Chrome 新增能力各自解决什么问题
|
||||
- 知道幻灯片与项目代码如何配合演示
|
||||
- 建立实验能力的风险边界
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -19,15 +19,11 @@
|
||||
<div class="space-y-2 text-sm text-gray-300">
|
||||
|
||||
- 不逐条朗读全部 release notes
|
||||
- 不做浏览器内核源码分析
|
||||
- 不承诺所有实验能力都可直接上线
|
||||
- 不替代真实项目的兼容性验证
|
||||
- 不做厂商 SDK 接入教程
|
||||
- 不复刻每一个 Chrome 实验 API
|
||||
- 不承诺实验能力可直接进入生产核心链路
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
这一页是分享定位。Chrome 更新频率很高，真正有价值的不是把每个版本的新字段都念一遍，而是帮助团队快速判断：哪些变化影响我们现在的产品，哪些能力值得试验，哪些 DevTools 工作流可以马上提高排查效率。
|
||||
-->
|
||||
|
||||
+103
@@ -0,0 +1,103 @@
|
||||
# Part 2 Demo Plan: 官方优先的 Agentic Web 演示
|
||||
|
||||
## 目标和产物
|
||||
|
||||
第二部分用于支撑 40 分钟分享中的 demo 段，目标不是泛泛介绍概念，而是生成两类明确产物：
|
||||
|
||||
1. **PPT 主线**：分别介绍 Chrome 最近新增或正在推进的关键能力，说明每个功能解决什么问题、处在什么成熟度、适合用什么官方材料展示。
|
||||
2. **项目代码演示**：创建并维护一个配套前端项目。WebMCP 必须有可运行原始工程；Modern Web Guidance、DevTools for agents、HTML-in-Canvas、View Transitions 都要有明确演示入口。
|
||||
|
||||
它不是落地教程，也不是厂商 SDK 接入课；目标是让对 Chrome 新特性不熟悉的 Web 开发者看懂：
|
||||
|
||||
- AI 操作 Web 为什么容易慢、贵、不稳定。
|
||||
- WebMCP 为什么从“猜 UI”转向“调用页面暴露的工具”。
|
||||
- Chrome 相关新能力如何作为这个方向的证据链，而不是每个都现场复刻。
|
||||
- 哪些是官方能力或标准探索，哪些只是厂商实现概念。
|
||||
|
||||
## 总原则
|
||||
|
||||
1. **官方优先**：优先使用 Chrome 官方文档、官方 demo、官方 demo collection、官方命令示例和官方截图/录屏作为展示材料。
|
||||
2. **WebMCP 必须可运行**：WebMCP 是第二部分的主 demo，当前仓库必须提供可打开、可点击、可看源码的本地工程。
|
||||
3. **官方优先但不空讲**：官方材料用于确认标准口径和 API 边界；本地工程用于承接现场演示。
|
||||
4. **不复刻重实验能力**：不在本地项目里复刻 Prompt API 等环境依赖重、版本敏感的能力；HTML-in-Canvas 只做官方 API 方向和 fallback 展示。
|
||||
5. **保持科普口径**：所有 token、耗时、成功率数据都作为具体案例，不当作普适结论；WebMCP 讲“提高可靠性”，不讲“零错误率”。
|
||||
6. **实验能力明确标注**：WebMCP、Prompt API、HTML-in-Canvas 等能力需要标注实验性、origin trial、渐进增强或浏览器支持边界。
|
||||
7. **剔除厂商私货**：OpenTiny、VAgent、WebAgent、Remote、WebSkills、遥控器组件、SDK 版本等只可作为原始材料背景，不作为 PPT 主概念。若需要表达类似思想，使用中立说法：“Agent 操作说明”“流程说明”“工具调用编排”。
|
||||
|
||||
## Demo 结构
|
||||
|
||||
### 1. Demo 导航页
|
||||
|
||||
先给观众一张总览：第二部分会按“新增功能介绍”和“项目代码演示”展开。
|
||||
|
||||
- 新增功能介绍：WebMCP、Modern Web Guidance、DevTools for agents、Prompt API、HTML-in-Canvas、Baseline / View Transitions。
|
||||
- 项目代码演示：WebMCP、DevTools for agents、HTML-in-Canvas、View Transitions 提供本地页面；Modern Web Guidance 提供官方 CLI 脚本和辅助页。
|
||||
- 兜底原则：正式 demo 都要有入口；高风险实验能力不承诺原生 API 一定可用。
|
||||
|
||||
### 2. 主线演示：AI 操作 Web 的三种方式
|
||||
|
||||
任务设定：在后台系统中完成“创建订单管理模块”，包括创建词条、创建菜单、绑定角色权限。
|
||||
|
||||
对比三种路径：
|
||||
|
||||
- 视觉识别：靠截图理解界面。优点是通用；问题是慢、token 高、UI 变化敏感。
|
||||
- DOM / 可访问性树识别：靠页面结构找元素。比纯视觉结构化，但仍可能被复杂组件、隐藏状态和错误点击影响。
|
||||
- WebMCP / 工具调用：页面主动暴露工具和参数，Agent 调用业务能力，不再猜 UI。
|
||||
|
||||
展示方式：
|
||||
|
||||
1. PPT 用表格和流程图描述三种路径。
|
||||
2. WebMCP 打开 `/demo/webmcp/index.html` 现场跑工程。
|
||||
3. 其他正式 demo 从 `/demo/index.html` 进入，或运行 `scripts/demo-modern-web-guidance.sh`。
|
||||
|
||||
### 3. 新增功能介绍：官方 demo 快闪
|
||||
|
||||
每个能力只讲“它是什么、解决什么问题、现场怎么展示”，不展开完整 API 课。
|
||||
|
||||
- **WebMCP**：使用官方文档确认 API 口径，同时打开 `/demo/webmcp/index.html` 演示声明式表单工具、指令式 `registerTool`、工具 schema 和调用日志。
|
||||
- **Modern Web Guidance**：运行官方 `search/retrieve` CLI，并打开 `/demo/modern-web-guidance/index.html` 辅助讲解。
|
||||
- **Chrome DevTools for agents**：使用官方 DevTools MCP 配置，让 Agent 检查 `/demo/devtools-agents/index.html` 的 console、network 和性能问题。
|
||||
- **Prompt API**：使用官方 Prompt API demos / playground 说明“浏览器内置 AI 能力，适合渐进增强”。
|
||||
- **HTML-in-Canvas**：打开 `/html-in-canvas/index.html`，支持时跑原生 API，不支持时展示 fallback 和官方运行条件。
|
||||
- **Baseline / View Transitions**：Baseline 做方法快闪；View Transitions 打开 `/demo/view-transitions/index.html`。
|
||||
|
||||
## 项目代码演示职责
|
||||
|
||||
当前仓库的本地 demo 承担六件事：
|
||||
|
||||
1. 提供一个稳定的“官方 demo 导航页”，列出每个新增功能对应的官方资料、推荐讲法和现场备用链接。
|
||||
2. 提供一个可运行的 WebMCP 原始工程：`public/demo/webmcp/index.html`、`styles.css`、`app.js`。
|
||||
3. 提供 Modern Web Guidance 官方 CLI 脚本和辅助页面。
|
||||
4. 提供 DevTools for agents 可检查目标页，故意包含 console、network、performance 问题。
|
||||
5. 提供 HTML-in-Canvas 和 View Transitions 演示页面。
|
||||
6. 提供一个“本地兜底说明”：如果官方 demo 现场不可用，如何用项目页面和 PPT 中的截图/流程继续讲，不中断分享。
|
||||
|
||||
不做以下事情：
|
||||
|
||||
- 不把本地项目做成厂商 WebMCP SDK 接入教程。
|
||||
- 不实现所有 Chrome 新特性。
|
||||
- 不把实验 API 当作生产可用能力演示。
|
||||
- 不要求现场浏览器开启 flags 才能完成主流程。
|
||||
- 不把 WebSkills / WebAgent / VAgent / Remote 等厂商概念写成标准能力。
|
||||
|
||||
## 时间分配
|
||||
|
||||
第二部分建议 15 分钟左右：
|
||||
|
||||
- 2 分钟：demo 交付物总览。
|
||||
- 6 分钟：WebMCP 可运行工程演示。
|
||||
- 4 分钟：Modern Web Guidance 官方 CLI。
|
||||
- 4 分钟：DevTools for agents 检查本地问题页。
|
||||
- 4 分钟：HTML-in-Canvas / View Transitions。
|
||||
- 2 分钟：Prompt API / Baseline 快闪和关键风险提示。
|
||||
|
||||
## 参考资料
|
||||
|
||||
- WebMCP imperative API: https://developer.chrome.com/docs/ai/webmcp/imperative-api
|
||||
- Prompt API: https://developer.chrome.com/docs/ai/prompt-api
|
||||
- Modern Web Guidance: https://developer.chrome.com/docs/modern-web-guidance
|
||||
- Chrome DevTools for agents: https://developer.chrome.com/docs/devtools/agents/get-started
|
||||
- HTML-in-Canvas origin trial: https://developer.chrome.com/blog/html-in-canvas-origin-trial
|
||||
- Baseline: https://web.dev/baseline
|
||||
- View Transitions demos: https://view-transitions.chrome.dev/
|
||||
- Chrome demos index: https://chrome.dev/
|
||||
Generated
+24
-2
@@ -13,7 +13,7 @@ importers:
|
||||
version: 1.2.11
|
||||
'@slidev/cli':
|
||||
specifier: ^52.16.0
|
||||
version: 52.16.0(@nuxt/kit@3.21.8)(@types/markdown-it@14.1.2)(@types/node@22.19.21)(@vue/compiler-sfc@3.5.38)(esbuild@0.23.1)(lightningcss@1.32.0)(markdown-it@14.2.0)(postcss@8.5.15)(rolldown@1.0.3)(sass@1.101.0)(tsx@4.22.4)
|
||||
version: 52.16.0(@nuxt/kit@3.21.8)(@types/markdown-it@14.1.2)(@types/node@22.19.21)(@vue/compiler-sfc@3.5.38)(esbuild@0.23.1)(lightningcss@1.32.0)(markdown-it@14.2.0)(playwright-chromium@1.60.0)(postcss@8.5.15)(rolldown@1.0.3)(sass@1.101.0)(tsx@4.22.4)
|
||||
'@slidev/theme-default':
|
||||
specifier: latest
|
||||
version: 0.25.0
|
||||
@@ -29,6 +29,10 @@ importers:
|
||||
vue:
|
||||
specifier: ^3.5.33
|
||||
version: 3.5.38(typescript@6.0.3)
|
||||
devDependencies:
|
||||
playwright-chromium:
|
||||
specifier: ^1.60.0
|
||||
version: 1.60.0
|
||||
|
||||
packages:
|
||||
|
||||
@@ -3327,6 +3331,16 @@ packages:
|
||||
plantuml-encoder@1.4.0:
|
||||
resolution: {integrity: sha512-sxMwpDw/ySY1WB2CE3+IdMuEcWibJ72DDOsXLkSmEaSzwEUaYBT6DWgOfBiHGCux4q433X6+OEFWjlVqp7gL6g==}
|
||||
|
||||
playwright-chromium@1.60.0:
|
||||
resolution: {integrity: sha512-xxz9pc2HIxQW/Qg9ijG2fZOHRT//KhLo0KfvJRa45YYRrcA7ZONoilgJR40SW5pmecb6HkuROaeViXoCaXTZyQ==}
|
||||
engines: {node: '>=18'}
|
||||
hasBin: true
|
||||
|
||||
playwright-core@1.60.0:
|
||||
resolution: {integrity: sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==}
|
||||
engines: {node: '>=18'}
|
||||
hasBin: true
|
||||
|
||||
points-on-curve@0.2.0:
|
||||
resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
|
||||
|
||||
@@ -5095,7 +5109,7 @@ snapshots:
|
||||
|
||||
'@shikijs/vscode-textmate@10.0.2': {}
|
||||
|
||||
'@slidev/cli@52.16.0(@nuxt/kit@3.21.8)(@types/markdown-it@14.1.2)(@types/node@22.19.21)(@vue/compiler-sfc@3.5.38)(esbuild@0.23.1)(lightningcss@1.32.0)(markdown-it@14.2.0)(postcss@8.5.15)(rolldown@1.0.3)(sass@1.101.0)(tsx@4.22.4)':
|
||||
'@slidev/cli@52.16.0(@nuxt/kit@3.21.8)(@types/markdown-it@14.1.2)(@types/node@22.19.21)(@vue/compiler-sfc@3.5.38)(esbuild@0.23.1)(lightningcss@1.32.0)(markdown-it@14.2.0)(playwright-chromium@1.60.0)(postcss@8.5.15)(rolldown@1.0.3)(sass@1.101.0)(tsx@4.22.4)':
|
||||
dependencies:
|
||||
'@antfu/ni': 30.1.0
|
||||
'@antfu/utils': 9.3.0
|
||||
@@ -5168,6 +5182,8 @@ snapshots:
|
||||
vue: 3.5.38(typescript@6.0.3)
|
||||
yaml: 2.9.0
|
||||
yargs: 18.0.0
|
||||
optionalDependencies:
|
||||
playwright-chromium: 1.60.0
|
||||
transitivePeerDependencies:
|
||||
- '@modelcontextprotocol/sdk'
|
||||
- '@nuxt/kit'
|
||||
@@ -7825,6 +7841,12 @@ snapshots:
|
||||
|
||||
plantuml-encoder@1.4.0: {}
|
||||
|
||||
playwright-chromium@1.60.0:
|
||||
dependencies:
|
||||
playwright-core: 1.60.0
|
||||
|
||||
playwright-core@1.60.0: {}
|
||||
|
||||
points-on-curve@0.2.0: {}
|
||||
|
||||
points-on-path@0.2.1:
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
allowBuilds:
|
||||
'@parcel/watcher': true
|
||||
esbuild: true
|
||||
playwright-chromium: true
|
||||
vue-demi: true
|
||||
|
||||
@@ -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>
|
||||
@@ -0,0 +1,14 @@
|
||||
console.warn("Demo warning: this page intentionally includes diagnosable issues.");
|
||||
|
||||
const longTaskButton = document.querySelector("#long-task");
|
||||
const taskResult = document.querySelector("#task-result");
|
||||
|
||||
longTaskButton.addEventListener("click", () => {
|
||||
const start = performance.now();
|
||||
while (performance.now() - start < 650) {
|
||||
Math.sqrt(Math.random() * Number.MAX_SAFE_INTEGER);
|
||||
}
|
||||
const duration = Math.round(performance.now() - start);
|
||||
taskResult.textContent = `已触发约 ${duration}ms 的主线程长任务。`;
|
||||
console.error("Demo error: long task was triggered for DevTools MCP inspection.");
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DevTools for Agents Demo Target</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<section class="hero">
|
||||
<p class="eyebrow">Chrome DevTools for agents</p>
|
||||
<h1>给 Agent 一个真实浏览器现场</h1>
|
||||
<p>
|
||||
这个页面故意包含 console warning、404 图片、可触发长任务和布局溢出。
|
||||
演示时让 Chrome DevTools MCP 连接到这个页面，要求 Agent 读取 console、network、DOM 和 performance。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="prompt-board">
|
||||
<article>
|
||||
<p class="eyebrow">Official setup</p>
|
||||
<h2>MCP 配置</h2>
|
||||
<pre><code>{
|
||||
"mcpServers": {
|
||||
"chrome-devtools": {
|
||||
"command": "npx",
|
||||
"args": ["chrome-devtools-mcp@latest"]
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<p class="eyebrow">Prompt to run</p>
|
||||
<h2>现场提问</h2>
|
||||
<pre><code>Open http://localhost:3030/demo/devtools-agents/index.html.
|
||||
Inspect console and network errors.
|
||||
Then click "触发长任务" and record a performance trace.
|
||||
Summarize what you found.</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="target">
|
||||
<div class="broken-card">
|
||||
<span>Network</span>
|
||||
<h2>这张图片故意 404</h2>
|
||||
<img src="./missing-dashboard.png" alt="Missing dashboard screenshot" />
|
||||
</div>
|
||||
|
||||
<div class="broken-card overflow">
|
||||
<span>Layout</span>
|
||||
<h2>这段文本故意撑破容器</h2>
|
||||
<p>SuperLongUnbrokenEnterpriseDashboardIdentifier_ChromeAgentRuntimeDebugging_2026_Overflow</p>
|
||||
</div>
|
||||
|
||||
<div class="broken-card">
|
||||
<span>Performance</span>
|
||||
<h2>触发可检测的长任务</h2>
|
||||
<button id="long-task">触发长任务</button>
|
||||
<p id="task-result">等待触发。</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="./app.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,139 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #111827;
|
||||
--muted: #667085;
|
||||
--paper: #f7f8fa;
|
||||
--panel: #ffffff;
|
||||
--line: #d7dce2;
|
||||
--red: #b42318;
|
||||
--blue: #1849a9;
|
||||
--code: #111827;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
background:
|
||||
linear-gradient(90deg, rgb(17 24 39 / 0.05) 1px, transparent 1px),
|
||||
linear-gradient(rgb(17 24 39 / 0.05) 1px, transparent 1px),
|
||||
var(--paper);
|
||||
background-size: 28px 28px;
|
||||
font-family: ui-sans-serif, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1180px, calc(100vw - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 42px 0 60px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
color: var(--red);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 760px;
|
||||
margin-bottom: 18px;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(42px, 7vw, 86px);
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.hero p,
|
||||
.broken-card p {
|
||||
max-width: 760px;
|
||||
color: var(--muted);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.prompt-board,
|
||||
.target {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.target {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
article,
|
||||
.broken-card {
|
||||
border: 1px solid var(--line);
|
||||
background: rgb(255 255 255 / 0.92);
|
||||
box-shadow: 0 18px 58px rgb(17 24 39 / 0.12);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
border: 1px solid #2f3947;
|
||||
background: var(--code);
|
||||
color: #e7edf4;
|
||||
padding: 16px;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.broken-card span {
|
||||
display: inline-flex;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid rgb(180 35 24 / 0.35);
|
||||
padding: 4px 9px;
|
||||
color: var(--red);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.broken-card img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 150px;
|
||||
border: 1px dashed var(--red);
|
||||
background: #fff5f4;
|
||||
}
|
||||
|
||||
.overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow p {
|
||||
width: max-content;
|
||||
color: var(--blue);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 42px;
|
||||
border: 1px solid var(--ink);
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 10px 14px;
|
||||
font: inherit;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.prompt-board,
|
||||
.target {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Chrome API Demo Desk</title>
|
||||
<link rel="stylesheet" href="./shared.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<aside class="rail">
|
||||
<p class="eyebrow">Public Demo Desk</p>
|
||||
<h1>Chrome API Lab</h1>
|
||||
<p class="lead">
|
||||
这里专门放可运行 demo。启动方式统一使用 <strong>npm run dev</strong>，再访问
|
||||
<strong>/demo/</strong> 下的不同能力页面。
|
||||
</p>
|
||||
<nav class="nav" aria-label="Chrome API demos">
|
||||
<a class="active" href="./index.html"><span class="num">0</span><span>Demo 总览</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 href="../html-in-canvas/index.html"><span class="num">5</span><span>HTML-in-Canvas</span></a>
|
||||
<a href="./view-transitions/index.html"><span class="num">6</span><span>View Transitions</span></a>
|
||||
<a href="./baseline/index.html"><span class="num">7</span><span>Baseline</span></a>
|
||||
</nav>
|
||||
<div class="note">
|
||||
这部分只修改 public 静态代码，不进入 Slidev PPT 页面。实验 API 都按渐进增强处理，有能力检测和本地兜底。
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section class="stage">
|
||||
<div class="hero">
|
||||
<section class="statement">
|
||||
<p class="eyebrow">Run with npm run dev</p>
|
||||
<h2>一个入口，分别展示不同 Chrome API 能力。</h2>
|
||||
<p>
|
||||
总览页负责现场导航；每个能力页都可以独立打开、独立演示，不依赖 PPT 路由。
|
||||
适合分享时从幻灯片跳出，展示真实浏览器中的 API 边界和 fallback。
|
||||
</p>
|
||||
</section>
|
||||
<aside class="metrics">
|
||||
<div class="metric">
|
||||
<strong>7</strong>
|
||||
<span>WebMCP、Prompt API、DevTools Agents、Modern Web Guidance、HTML-in-Canvas、View Transitions、Baseline</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<strong>静态</strong>
|
||||
<span>全部放在 public 静态目录，由 Slidev dev server 直接托管</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<strong>兜底</strong>
|
||||
<span>实验能力不可用时仍能讲清楚输入、输出和边界</span>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<h2>能力页面</h2>
|
||||
<div class="grid">
|
||||
<a class="card" href="./webmcp/index.html">
|
||||
<span class="tag blue">Agentic Web</span>
|
||||
<h3>WebMCP 工具契约</h3>
|
||||
<p>声明式表单工具、JavaScript 注册工具、工具 schema 和复合任务调用日志。</p>
|
||||
<ul>
|
||||
<li>能力检测：navigator.modelContext</li>
|
||||
<li>兜底：本地 mock runtime</li>
|
||||
</ul>
|
||||
</a>
|
||||
<a class="card" href="./prompt-api/index.html">
|
||||
<span class="tag green">Built-in AI</span>
|
||||
<h3>Prompt API</h3>
|
||||
<p>检测 LanguageModel，可用时创建本地模型会话，不可用时展示 mock 摘要流程。</p>
|
||||
<ul>
|
||||
<li>能力检测：window.LanguageModel</li>
|
||||
<li>重点：本地模型、下载状态、渐进增强</li>
|
||||
</ul>
|
||||
</a>
|
||||
<a class="card" href="./devtools-agents/index.html">
|
||||
<span class="tag violet">Workflow</span>
|
||||
<h3>DevTools for Agents</h3>
|
||||
<p>提供一个故意带问题的页面，让 Chrome DevTools MCP 检查 console、network 和 performance。</p>
|
||||
<ul>
|
||||
<li>官方工具：chrome-devtools-mcp</li>
|
||||
<li>重点：让 Agent 看到真实浏览器运行时</li>
|
||||
</ul>
|
||||
</a>
|
||||
<a class="card" href="./modern-web-guidance/index.html">
|
||||
<span class="tag green">Guidance</span>
|
||||
<h3>Modern Web Guidance</h3>
|
||||
<p>展示官方 CLI 如何给 AI coding agent 检索现代 Web 用法和 Baseline 边界。</p>
|
||||
<ul>
|
||||
<li>重点：把现代 Web 知识注入 agent</li>
|
||||
<li>兜底：可复制命令和预期输出</li>
|
||||
</ul>
|
||||
</a>
|
||||
<a class="card" href="../html-in-canvas/index.html">
|
||||
<span class="tag amber">Origin Trial</span>
|
||||
<h3>HTML-in-Canvas</h3>
|
||||
<p>展示真实 DOM 表单绘制进 canvas 的 API 方向；不支持时显示 fallback 预览。</p>
|
||||
<ul>
|
||||
<li>能力检测：drawElementImage / requestPaint</li>
|
||||
<li>重点：不是 canvas 手绘控件</li>
|
||||
</ul>
|
||||
</a>
|
||||
<a class="card" href="./baseline/index.html">
|
||||
<span class="tag amber">Compatibility</span>
|
||||
<h3>Baseline</h3>
|
||||
<p>把“能不能放心用”从浏览器版本猜测，改成特性状态和 fallback 策略。</p>
|
||||
<ul>
|
||||
<li>重点：跨浏览器采用判断</li>
|
||||
<li>兜底：本地特性矩阵</li>
|
||||
</ul>
|
||||
</a>
|
||||
<a class="card" href="./view-transitions/index.html">
|
||||
<span class="tag red">UX API</span>
|
||||
<h3>View Transitions</h3>
|
||||
<p>展示 same-document 页面切换动画，并在不支持时退化为普通 DOM 更新。</p>
|
||||
<ul>
|
||||
<li>能力检测：document.startViewTransition</li>
|
||||
<li>重点：体验增强而非业务依赖</li>
|
||||
</ul>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>本地运行</h2>
|
||||
<pre class="code"><code>npm run dev
|
||||
|
||||
# Slidev dev server 启动后访问：
|
||||
http://localhost:3030/demo/index.html
|
||||
http://localhost:3030/demo/webmcp/index.html
|
||||
http://localhost:3030/demo/prompt-api/index.html
|
||||
http://localhost:3030/demo/devtools-agents/index.html
|
||||
http://localhost:3030/demo/modern-web-guidance/index.html
|
||||
http://localhost:3030/html-in-canvas/index.html
|
||||
http://localhost:3030/demo/baseline/index.html
|
||||
http://localhost:3030/demo/view-transitions/index.html
|
||||
|
||||
# Modern Web Guidance 官方 CLI
|
||||
scripts/demo-modern-web-guidance.sh</code></pre>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
const dialog = document.querySelector("#guided-dialog");
|
||||
const openDialog = document.querySelector("#open-dialog");
|
||||
const copyButton = document.querySelector("#copy");
|
||||
const commands = document.querySelector("#commands");
|
||||
|
||||
openDialog.addEventListener("click", () => {
|
||||
dialog.showModal();
|
||||
});
|
||||
|
||||
copyButton.addEventListener("click", async () => {
|
||||
await navigator.clipboard.writeText(commands.textContent.trim());
|
||||
copyButton.textContent = "已复制";
|
||||
setTimeout(() => {
|
||||
copyButton.textContent = "复制命令";
|
||||
}, 1200);
|
||||
});
|
||||
@@ -0,0 +1,87 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Modern Web Guidance Demo</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<section class="hero">
|
||||
<p class="eyebrow">Official CLI demo</p>
|
||||
<h1>Modern Web Guidance</h1>
|
||||
<p>
|
||||
这段演示直接使用 Chrome 官方 CLI：先搜索某个 Web 开发意图，再取回对应指南。
|
||||
重点不是背 API，而是让开发者看到 AI coding agent 如何被现代 Web 知识和 Baseline 边界纠偏。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="grid">
|
||||
<article class="terminal">
|
||||
<div class="terminal-head">
|
||||
<span></span><span></span><span></span>
|
||||
<strong>terminal</strong>
|
||||
</div>
|
||||
<pre><code id="commands">npx modern-web-guidance@latest search "animate a dialog modal backdrop"
|
||||
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"</code></pre>
|
||||
<button id="copy">复制命令</button>
|
||||
</article>
|
||||
|
||||
<article class="result">
|
||||
<p class="eyebrow">Expected official output</p>
|
||||
<h2>搜索会返回 use case</h2>
|
||||
<ul>
|
||||
<li><strong>light-dismiss-a-dialog</strong>：用原生 dialog 处理 light dismiss。</li>
|
||||
<li><strong>animate-to-from-top-layer</strong>：用现代 CSS 动画进入/离开 top layer。</li>
|
||||
<li><strong>declarative-dialog-popover-control</strong>：用声明式控制 dialog / popover。</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="demo">
|
||||
<div>
|
||||
<p class="eyebrow">Guided implementation</p>
|
||||
<h2>指南会把 Agent 拉回现代 Web 写法</h2>
|
||||
<p>
|
||||
这个页面用一个可运行的 dialog 动画做对应说明：优先使用原生 <code><dialog></code>、
|
||||
<code>::backdrop</code>、<code>@starting-style</code> 和 <code>transition-behavior</code>，
|
||||
而不是用大量 JavaScript 重新造弹层。
|
||||
</p>
|
||||
<button id="open-dialog">打开 dialog demo</button>
|
||||
</div>
|
||||
|
||||
<pre class="code"><code>dialog {
|
||||
opacity: 0;
|
||||
transform: translateY(16px) scale(0.96);
|
||||
transition-property: opacity, transform, display, overlay;
|
||||
transition-duration: 220ms;
|
||||
transition-behavior: allow-discrete;
|
||||
}
|
||||
|
||||
dialog[open] {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
@starting-style {
|
||||
dialog[open] {
|
||||
opacity: 0;
|
||||
transform: translateY(16px) scale(0.96);
|
||||
}
|
||||
}</code></pre>
|
||||
</section>
|
||||
|
||||
<dialog id="guided-dialog">
|
||||
<form method="dialog">
|
||||
<p class="eyebrow">Native top layer</p>
|
||||
<h2>这是原生 dialog</h2>
|
||||
<p>演示重点：Modern Web Guidance 让 Agent 找到现代 HTML/CSS 能力，并提醒兼容和降级边界。</p>
|
||||
<button>关闭</button>
|
||||
</form>
|
||||
</dialog>
|
||||
</main>
|
||||
|
||||
<script src="./app.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,222 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #17202a;
|
||||
--muted: #5f6f78;
|
||||
--paper: #fffef8;
|
||||
--panel: #eff4ef;
|
||||
--line: #cfd9cd;
|
||||
--green: #0b6b4f;
|
||||
--blue: #174ea6;
|
||||
--amber: #a46400;
|
||||
--code: #14202a;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--ink);
|
||||
background:
|
||||
linear-gradient(90deg, rgb(23 32 42 / 0.05) 1px, transparent 1px),
|
||||
linear-gradient(rgb(23 32 42 / 0.05) 1px, transparent 1px),
|
||||
#edf4ef;
|
||||
background-size: 30px 30px;
|
||||
font-family: ui-sans-serif, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 42px;
|
||||
border: 1px solid var(--ink);
|
||||
background: var(--ink);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 10px 14px;
|
||||
font: inherit;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1180px, calc(100vw - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 40px 0 64px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
color: var(--green);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 780px;
|
||||
margin-bottom: 14px;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(42px, 7vw, 86px);
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.hero p,
|
||||
.demo p,
|
||||
.result li {
|
||||
color: var(--muted);
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.grid,
|
||||
.demo {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
|
||||
gap: 20px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.terminal,
|
||||
.result,
|
||||
.demo {
|
||||
border: 1px solid var(--line);
|
||||
background: rgb(255 254 248 / 0.92);
|
||||
box-shadow: 0 18px 58px rgb(23 32 42 / 0.12);
|
||||
}
|
||||
|
||||
.terminal,
|
||||
.result {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
background: var(--code);
|
||||
color: #dfe8ef;
|
||||
}
|
||||
|
||||
.terminal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.terminal-head span {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 999px;
|
||||
background: #e15c4f;
|
||||
}
|
||||
|
||||
.terminal-head span:nth-child(2) {
|
||||
background: #e5ad35;
|
||||
}
|
||||
|
||||
.terminal-head span:nth-child(3) {
|
||||
background: #42aa6d;
|
||||
}
|
||||
|
||||
.terminal-head strong {
|
||||
margin-left: 8px;
|
||||
color: #9fb0be;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
margin: 0 0 16px;
|
||||
white-space: pre-wrap;
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.result ul {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.demo {
|
||||
align-items: start;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid rgb(23 32 42 / 0.13);
|
||||
background: #fff;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
.code {
|
||||
border: 1px solid #2d3944;
|
||||
background: var(--code);
|
||||
color: #dfe8ef;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
dialog {
|
||||
width: min(520px, calc(100vw - 36px));
|
||||
border: 1px solid var(--line);
|
||||
padding: 0;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
opacity: 0;
|
||||
transform: translateY(16px) scale(0.96);
|
||||
transition-property: opacity, transform, display, overlay;
|
||||
transition-duration: 220ms;
|
||||
transition-timing-function: ease-out;
|
||||
transition-behavior: allow-discrete;
|
||||
}
|
||||
|
||||
dialog[open] {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
@starting-style {
|
||||
dialog[open] {
|
||||
opacity: 0;
|
||||
transform: translateY(16px) scale(0.96);
|
||||
}
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background: rgb(12 18 24 / 0);
|
||||
transition:
|
||||
display 220ms allow-discrete,
|
||||
overlay 220ms allow-discrete,
|
||||
background-color 220ms ease-out;
|
||||
}
|
||||
|
||||
dialog[open]::backdrop {
|
||||
background: rgb(12 18 24 / 0.42);
|
||||
}
|
||||
|
||||
dialog form {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
dialog {
|
||||
transform: none;
|
||||
transition-duration: 80ms;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.grid,
|
||||
.demo {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Prompt API Demo</title>
|
||||
<link rel="stylesheet" href="../shared.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<aside class="rail">
|
||||
<p class="eyebrow">Built-in AI</p>
|
||||
<h1>Prompt API</h1>
|
||||
<p class="lead">
|
||||
演示网页如何检测 Chrome 内置语言模型能力，并在不可用时退回到可解释的本地 mock。
|
||||
</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 class="active" href="./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 href="../baseline/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">
|
||||
讲述重点：Prompt API 是渐进增强。先检测 availability，再由用户动作触发模型创建和下载进度。
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section class="stage">
|
||||
<div class="hero">
|
||||
<section class="statement">
|
||||
<p class="eyebrow">window.LanguageModel</p>
|
||||
<h2>把浏览器内置模型当作页面能力，而不是远程服务。</h2>
|
||||
<p>
|
||||
可用时，页面直接创建本地模型会话；不可用时，页面仍能展示同一套输入、输出和错误边界，
|
||||
让观众理解这个 API 的产品形态。
|
||||
</p>
|
||||
</section>
|
||||
<aside class="metrics">
|
||||
<div class="metric">
|
||||
<strong id="support-status">检测中</strong>
|
||||
<span>当前浏览器 Prompt API 状态</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<strong id="availability">未知</strong>
|
||||
<span>LanguageModel.availability() 结果</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<strong id="mode">未运行</strong>
|
||||
<span>native 或 mock 执行路径</span>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<section class="two-col">
|
||||
<div class="panel">
|
||||
<p class="eyebrow">Task</p>
|
||||
<h2>把 Chrome 更新摘要改写成给业务同事看的说明</h2>
|
||||
<label class="field">
|
||||
输入材料
|
||||
<textarea id="prompt-input">Chrome 正在把浏览器能力分成三层：面向用户的体验 API、面向开发者的 DevTools agent workflow，以及面向 AI Agent 的 WebMCP 和 Built-in AI。</textarea>
|
||||
</label>
|
||||
<label class="field">
|
||||
输出风格
|
||||
<select id="tone">
|
||||
<option value="业务说明">业务说明</option>
|
||||
<option value="技术摘要">技术摘要</option>
|
||||
<option value="现场讲稿">现场讲稿</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="controls">
|
||||
<button id="run">运行 Prompt API</button>
|
||||
<button id="check" class="secondary">重新检测</button>
|
||||
</div>
|
||||
<pre class="code"><code>const availability = await LanguageModel.availability();
|
||||
const session = await LanguageModel.create({
|
||||
monitor(m) {
|
||||
m.addEventListener("downloadprogress", updateProgress);
|
||||
},
|
||||
});
|
||||
const result = await session.prompt(prompt);</code></pre>
|
||||
</div>
|
||||
|
||||
<aside class="console">
|
||||
<p class="eyebrow">Execution</p>
|
||||
<h2>输出与日志</h2>
|
||||
<pre id="log">等待运行...</pre>
|
||||
</aside>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script type="module" src="./prompt-api.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
import { logTo, setText } from "../shared.js";
|
||||
|
||||
const hasPromptApi = "LanguageModel" in window;
|
||||
|
||||
document.querySelector("#check").addEventListener("click", checkAvailability);
|
||||
document.querySelector("#run").addEventListener("click", runPrompt);
|
||||
|
||||
await checkAvailability();
|
||||
|
||||
async function checkAvailability() {
|
||||
setText("#support-status", hasPromptApi ? "支持" : "未暴露");
|
||||
setText("#mode", hasPromptApi ? "Native" : "Mock");
|
||||
|
||||
if (!hasPromptApi) {
|
||||
setText("#availability", "unavailable");
|
||||
logTo("#log", "prompt-api.detect", {
|
||||
supported: false,
|
||||
fallback: "Use local mock response for the presentation.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const availability = await LanguageModel.availability();
|
||||
setText("#availability", availability);
|
||||
logTo("#log", "prompt-api.availability", { availability });
|
||||
} catch (error) {
|
||||
setText("#availability", "error");
|
||||
logTo("#log", "prompt-api.error", { message: error.message });
|
||||
}
|
||||
}
|
||||
|
||||
async function runPrompt() {
|
||||
const source = document.querySelector("#prompt-input").value.trim();
|
||||
const tone = document.querySelector("#tone").value;
|
||||
const prompt = `请用${tone}风格，用三句话解释下面内容：\n\n${source}`;
|
||||
|
||||
if (!hasPromptApi) {
|
||||
const result = createMockSummary(source, tone);
|
||||
logTo("#log", "prompt-api.mock-result", { prompt, result });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setText("#mode", "Native running");
|
||||
const session = await LanguageModel.create({
|
||||
monitor(monitor) {
|
||||
monitor.addEventListener("downloadprogress", (event) => {
|
||||
const percent = Math.round(event.loaded * 100);
|
||||
setText("#availability", `downloading ${percent}%`);
|
||||
});
|
||||
},
|
||||
});
|
||||
const result = await session.prompt(prompt);
|
||||
setText("#mode", "Native complete");
|
||||
logTo("#log", "prompt-api.native-result", { prompt, result });
|
||||
} catch (error) {
|
||||
setText("#mode", "Native error");
|
||||
logTo("#log", "prompt-api.native-error", {
|
||||
prompt,
|
||||
message: error.message,
|
||||
fallback: createMockSummary(source, tone),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function createMockSummary(source, tone) {
|
||||
const first = source.split(/[。.!?]/).find(Boolean)?.trim() || source;
|
||||
return [
|
||||
`[${tone}] Chrome 的新能力可以理解为三条线同时推进。`,
|
||||
`第一条是用户体验升级，第二条是开发者工具升级，第三条是让网页能被 AI Agent 结构化调用。`,
|
||||
`这是一段 mock 输出，用来在当前浏览器没有 Prompt API 时保持演示可运行；输入摘要：${first}。`,
|
||||
].join("");
|
||||
}
|
||||
@@ -0,0 +1,463 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #121417;
|
||||
--muted: #65727d;
|
||||
--paper: #fffdf8;
|
||||
--panel: #f4f1e8;
|
||||
--line: #d7d0bf;
|
||||
--blue: #164db3;
|
||||
--green: #0c7356;
|
||||
--amber: #a26000;
|
||||
--red: #b03831;
|
||||
--violet: #6747b8;
|
||||
--code: #18222d;
|
||||
--shadow: 0 20px 60px rgb(35 37 42 / 0.13);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
background:
|
||||
linear-gradient(90deg, rgb(18 20 23 / 0.055) 1px, transparent 1px),
|
||||
linear-gradient(rgb(18 20 23 / 0.055) 1px, transparent 1px),
|
||||
#ece6d8;
|
||||
background-size: 30px 30px;
|
||||
font-family: Avenir Next, Trebuchet MS, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 350px) minmax(0, 1fr);
|
||||
gap: 22px;
|
||||
min-height: 100vh;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.rail,
|
||||
.stage,
|
||||
.panel,
|
||||
.card,
|
||||
.console {
|
||||
border: 1px solid var(--line);
|
||||
background: rgb(255 253 248 / 0.92);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.rail {
|
||||
position: sticky;
|
||||
top: 28px;
|
||||
align-self: start;
|
||||
min-height: calc(100vh - 56px);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.stage {
|
||||
padding: 26px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
color: var(--blue);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 11ch;
|
||||
margin-bottom: 16px;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(40px, 5vw, 72px);
|
||||
line-height: 0.94;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 12px;
|
||||
font-size: clamp(24px, 3vw, 38px);
|
||||
line-height: 1.05;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 19px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.lead,
|
||||
.muted,
|
||||
.card p,
|
||||
.panel p,
|
||||
li {
|
||||
color: var(--muted);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 26px 0;
|
||||
}
|
||||
|
||||
.nav a,
|
||||
.nav button,
|
||||
.link-button,
|
||||
.primary,
|
||||
.ghost {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 44px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.nav a:hover,
|
||||
.nav a.active,
|
||||
.nav button:hover,
|
||||
.link-button:hover,
|
||||
.ghost:hover {
|
||||
border-color: var(--blue);
|
||||
background: #eef4ff;
|
||||
}
|
||||
|
||||
.primary {
|
||||
border-color: var(--ink);
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.num,
|
||||
.icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.note {
|
||||
border-left: 4px solid var(--amber);
|
||||
background: #fff3d6;
|
||||
color: #6f4707;
|
||||
padding: 12px 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
|
||||
gap: 18px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.statement {
|
||||
min-height: 250px;
|
||||
padding: 28px;
|
||||
color: white;
|
||||
background:
|
||||
linear-gradient(135deg, rgb(18 20 23 / 0.96), rgb(22 77 179 / 0.83)),
|
||||
radial-gradient(circle at 20% 18%, rgb(255 255 255 / 0.22), transparent 26%);
|
||||
}
|
||||
|
||||
.statement .eyebrow,
|
||||
.statement p {
|
||||
color: rgb(255 255 255 / 0.78);
|
||||
}
|
||||
|
||||
.statement h2 {
|
||||
max-width: 760px;
|
||||
margin-bottom: 16px;
|
||||
font-size: clamp(30px, 5vw, 58px);
|
||||
}
|
||||
|
||||
.metrics,
|
||||
.grid,
|
||||
.two-col {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.metrics {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.metric,
|
||||
.panel,
|
||||
.card,
|
||||
.console {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.metric {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.metric strong {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.metric span {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.two-col {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.tag,
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 26px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid transparent;
|
||||
padding: 3px 9px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.tag.blue,
|
||||
.pill.blue {
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
.tag.green,
|
||||
.pill.green {
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.tag.amber,
|
||||
.pill.amber {
|
||||
background: var(--amber);
|
||||
}
|
||||
|
||||
.tag.red,
|
||||
.pill.red {
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.tag.violet,
|
||||
.pill.violet {
|
||||
background: var(--violet);
|
||||
}
|
||||
|
||||
.pill.neutral {
|
||||
border-color: var(--line);
|
||||
background: var(--paper);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.card {
|
||||
min-height: 190px;
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 14px 34px rgb(22 77 179 / 0.16);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card ul {
|
||||
margin: 14px 0 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
min-height: 42px;
|
||||
border: 1px solid var(--ink);
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 9px 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.controls button.secondary {
|
||||
border-color: var(--line);
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
padding: 11px 12px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 110px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.code,
|
||||
.console pre {
|
||||
overflow: auto;
|
||||
border: 1px solid #303b48;
|
||||
background: var(--code);
|
||||
color: #d8e4ef;
|
||||
padding: 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.code {
|
||||
margin: 14px 0 0;
|
||||
}
|
||||
|
||||
.console {
|
||||
align-self: start;
|
||||
position: sticky;
|
||||
top: 28px;
|
||||
}
|
||||
|
||||
.console pre {
|
||||
max-height: 460px;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.status-row,
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.status-row {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.status {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.status span {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status strong {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
border: 1px solid var(--line);
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.table th {
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.table td {
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.shell,
|
||||
.hero,
|
||||
.two-col {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.rail,
|
||||
.console {
|
||||
position: static;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.grid,
|
||||
.status-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
export function logTo(target, title, payload) {
|
||||
const el = typeof target === "string" ? document.querySelector(target) : target;
|
||||
if (!el) return;
|
||||
const stamp = new Date().toLocaleTimeString("zh-CN", { hour12: false });
|
||||
const entry = {
|
||||
time: stamp,
|
||||
event: title,
|
||||
...payload,
|
||||
};
|
||||
el.textContent = `${JSON.stringify(entry, null, 2)}\n\n${el.textContent}`.trim();
|
||||
}
|
||||
|
||||
export function setText(selector, value) {
|
||||
const el = document.querySelector(selector);
|
||||
if (el) el.textContent = value;
|
||||
}
|
||||
|
||||
export function escapeHtml(value) {
|
||||
return String(value)
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
const panel = document.querySelector("#panel");
|
||||
const buttons = Array.from(document.querySelectorAll("[data-view]"));
|
||||
|
||||
const views = {
|
||||
orders: {
|
||||
title: "订单工作台",
|
||||
body: "状态从列表切换到业务面板，浏览器负责把 DOM 更新过渡成连续动画。",
|
||||
metrics: ["128 个待处理", "96.4% 准时率"],
|
||||
},
|
||||
analytics: {
|
||||
title: "实时分析",
|
||||
body: "适合展示页面状态、卡片位置、详情视图之间的平滑切换。",
|
||||
metrics: ["42ms INP", "3 条异常趋势"],
|
||||
},
|
||||
settings: {
|
||||
title: "权限设置",
|
||||
body: "在支持的浏览器里使用 View Transitions；不支持时保留普通状态切换。",
|
||||
metrics: ["7 个角色", "24 项权限"],
|
||||
},
|
||||
};
|
||||
|
||||
function render(view) {
|
||||
const data = views[view];
|
||||
panel.innerHTML = `
|
||||
<article class="card">
|
||||
<p class="eyebrow">Current view</p>
|
||||
<h2>${data.title}</h2>
|
||||
<p>${data.body}</p>
|
||||
</article>
|
||||
<section class="summary">
|
||||
${data.metrics
|
||||
.map((metric) => `<article class="card"><strong>${metric}</strong><span>View transition keeps the context visible.</span></article>`)
|
||||
.join("")}
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
function setActive(view) {
|
||||
buttons.forEach((button) => {
|
||||
button.classList.toggle("active", button.dataset.view === view);
|
||||
});
|
||||
render(view);
|
||||
}
|
||||
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const next = button.dataset.view;
|
||||
if (document.startViewTransition) {
|
||||
document.startViewTransition(() => setActive(next));
|
||||
return;
|
||||
}
|
||||
setActive(next);
|
||||
});
|
||||
});
|
||||
|
||||
setActive("orders");
|
||||
@@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>View Transitions Demo</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<section class="hero">
|
||||
<p class="eyebrow">Chrome UI capability</p>
|
||||
<h1>View Transitions</h1>
|
||||
<p>点击不同状态，观察浏览器把 DOM 更新包装成一次连续过渡。没有支持时，页面仍然即时切换。</p>
|
||||
</section>
|
||||
|
||||
<section class="app" id="app">
|
||||
<nav class="tabs" aria-label="Demo states">
|
||||
<button class="active" data-view="orders">订单</button>
|
||||
<button data-view="analytics">分析</button>
|
||||
<button data-view="settings">设置</button>
|
||||
</nav>
|
||||
<div class="panel" id="panel"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="./app.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,126 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #17202a;
|
||||
--muted: #66717c;
|
||||
--paper: #f3f5f7;
|
||||
--panel: #ffffff;
|
||||
--line: #d8dee6;
|
||||
--blue: #1a5fb4;
|
||||
--green: #16784e;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--ink);
|
||||
background: var(--paper);
|
||||
font-family: ui-sans-serif, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1040px, calc(100vw - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 42px 0 60px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
color: var(--blue);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 14px;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(44px, 8vw, 96px);
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
max-width: 680px;
|
||||
color: var(--muted);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.app {
|
||||
margin-top: 26px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
box-shadow: 0 22px 70px rgb(23 32 42 / 0.14);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 40px;
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
padding: 9px 14px;
|
||||
font: inherit;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
button.active {
|
||||
border-color: var(--blue);
|
||||
background: #e8f0ff;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
min-height: 380px;
|
||||
padding: 22px;
|
||||
view-transition-name: demo-panel;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 0.8fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.card strong {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
::view-transition-old(demo-panel),
|
||||
::view-transition-new(demo-panel) {
|
||||
animation-duration: 320ms;
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.tabs,
|
||||
.summary {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,277 @@
|
||||
const logEl = document.querySelector("#log");
|
||||
const toolListEl = document.querySelector("#tool-list");
|
||||
const nativeStatusEl = document.querySelector("#native-status");
|
||||
const orderStateEl = document.querySelector("#order-state");
|
||||
|
||||
const nativeModelContext = window.navigator.modelContext;
|
||||
const registry = new Map();
|
||||
|
||||
const demoOrders = {
|
||||
"CHR-2026-0614": {
|
||||
orderId: "CHR-2026-0614",
|
||||
status: "delivered",
|
||||
risk: "missing_accessory",
|
||||
customerTier: "enterprise",
|
||||
nextAction: "open_refund_review",
|
||||
},
|
||||
};
|
||||
|
||||
const modelContext = nativeModelContext ?? createMockModelContext();
|
||||
|
||||
nativeStatusEl.textContent = nativeModelContext
|
||||
? "Native WebMCP detected"
|
||||
: "Mock WebMCP runtime";
|
||||
nativeStatusEl.className = `pill ${nativeModelContext ? "native" : "mock"}`;
|
||||
|
||||
registerDeclarativeForms();
|
||||
registerImperativeTools();
|
||||
renderTools();
|
||||
log("runtime.ready", {
|
||||
nativeWebMcp: Boolean(nativeModelContext),
|
||||
registeredTools: Array.from(registry.keys()),
|
||||
});
|
||||
|
||||
document.querySelector("#ticket-form").addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
const form = event.currentTarget;
|
||||
const toolName = form.getAttribute("toolname");
|
||||
const payload = Object.fromEntries(new FormData(form).entries());
|
||||
const result = await runTool(toolName, payload);
|
||||
log("form.submit", result);
|
||||
});
|
||||
|
||||
document.querySelectorAll("[data-run-tool]").forEach((button) => {
|
||||
button.addEventListener("click", async () => {
|
||||
const name = button.getAttribute("data-run-tool");
|
||||
const input = sampleInputFor(name);
|
||||
const result = await runTool(name, input);
|
||||
log(`tool.${name}`, result);
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelector("#run-workflow").addEventListener("click", async () => {
|
||||
log("agent.plan", {
|
||||
task: "客户反馈缺少配件，请查询订单、判断是否进入退款审核，并生成回复草稿。",
|
||||
});
|
||||
const order = await runTool("lookup_order_status", { orderId: "CHR-2026-0614" });
|
||||
const refund = await runTool("approve_refund_review", {
|
||||
orderId: order.orderId,
|
||||
reason: "missing_accessory",
|
||||
});
|
||||
const reply = await runTool("draft_customer_reply", {
|
||||
email: "dev@example.com",
|
||||
category: "refund",
|
||||
orderId: order.orderId,
|
||||
});
|
||||
log("agent.workflow.complete", { order, refund, reply });
|
||||
});
|
||||
|
||||
function createMockModelContext() {
|
||||
return {
|
||||
registerTool(tool) {
|
||||
registry.set(tool.name, tool);
|
||||
return Promise.resolve({ name: tool.name, mock: true });
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function registerDeclarativeForms() {
|
||||
document.querySelectorAll("form[toolname]").forEach((form) => {
|
||||
const name = form.getAttribute("toolname");
|
||||
const description = form.getAttribute("tooldescription") || `Submit ${name}`;
|
||||
const inputSchema = schemaFromForm(form);
|
||||
|
||||
registerTool({
|
||||
source: "declarative",
|
||||
name,
|
||||
description,
|
||||
inputSchema,
|
||||
execute: async (input) => {
|
||||
const ticketId = `SUP-${Date.now().toString().slice(-6)}`;
|
||||
return {
|
||||
ticketId,
|
||||
status: "created",
|
||||
summary: `${input.category} issue for ${input.email}`,
|
||||
visibleUpdate: "工单已创建，页面保留原有人类操作流程。",
|
||||
};
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function registerImperativeTools() {
|
||||
registerTool({
|
||||
source: "imperative",
|
||||
name: "lookup_order_status",
|
||||
description: "Look up order status, risk and recommended next action by order id.",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
orderId: { type: "string", description: "Order id shown in the support workspace." },
|
||||
},
|
||||
required: ["orderId"],
|
||||
},
|
||||
execute: async ({ orderId }) => {
|
||||
const order = demoOrders[orderId] ?? {
|
||||
orderId,
|
||||
status: "unknown",
|
||||
risk: "not_found",
|
||||
customerTier: "unknown",
|
||||
nextAction: "ask_user_for_more_information",
|
||||
};
|
||||
orderStateEl.textContent = order.nextAction;
|
||||
return order;
|
||||
},
|
||||
});
|
||||
|
||||
registerTool({
|
||||
source: "imperative",
|
||||
name: "approve_refund_review",
|
||||
description: "Move an eligible order into refund review after checking business policy.",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
orderId: { type: "string" },
|
||||
reason: {
|
||||
type: "string",
|
||||
enum: ["missing_accessory", "damaged_item", "delivery_delay"],
|
||||
},
|
||||
},
|
||||
required: ["orderId", "reason"],
|
||||
},
|
||||
execute: async ({ orderId, reason }) => {
|
||||
orderStateEl.textContent = "已进入退款审核";
|
||||
return {
|
||||
orderId,
|
||||
reason,
|
||||
approvedForReview: true,
|
||||
needsHumanConfirmation: true,
|
||||
message: "敏感动作只进入审核，不直接退款。",
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
registerTool({
|
||||
source: "imperative",
|
||||
name: "draft_customer_reply",
|
||||
description: "Draft a support reply based on customer issue category and order id.",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
email: { type: "string", format: "email" },
|
||||
category: { type: "string", enum: ["refund", "delivery", "account"] },
|
||||
orderId: { type: "string" },
|
||||
},
|
||||
required: ["email", "category", "orderId"],
|
||||
},
|
||||
execute: async ({ email, category, orderId }) => ({
|
||||
to: email,
|
||||
category,
|
||||
orderId,
|
||||
draft:
|
||||
"我们已经定位到该订单的缺件问题，并将它提交到退款审核。审核完成前不会自动扣改账户，请等待人工确认。",
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
function registerTool(tool) {
|
||||
registry.set(tool.name, tool);
|
||||
const nativePayload = {
|
||||
name: tool.name,
|
||||
description: tool.description,
|
||||
inputSchema: tool.inputSchema,
|
||||
execute: tool.execute,
|
||||
};
|
||||
|
||||
try {
|
||||
modelContext.registerTool(nativePayload);
|
||||
} catch (error) {
|
||||
log("register.error", { tool: tool.name, message: error.message });
|
||||
}
|
||||
}
|
||||
|
||||
async function runTool(name, input) {
|
||||
const tool = registry.get(name);
|
||||
if (!tool) {
|
||||
throw new Error(`Unknown tool: ${name}`);
|
||||
}
|
||||
const result = await tool.execute(input);
|
||||
return { tool: name, input, output: result };
|
||||
}
|
||||
|
||||
function schemaFromForm(form) {
|
||||
const properties = {};
|
||||
const required = [];
|
||||
form.querySelectorAll("input[name], select[name], textarea[name]").forEach((field) => {
|
||||
const name = field.getAttribute("name");
|
||||
properties[name] = {
|
||||
type: inputTypeToJsonSchema(field),
|
||||
description: field.closest("label")?.firstChild?.textContent?.trim() || name,
|
||||
};
|
||||
if (field.hasAttribute("required")) {
|
||||
required.push(name);
|
||||
}
|
||||
});
|
||||
return { type: "object", properties, required };
|
||||
}
|
||||
|
||||
function inputTypeToJsonSchema(field) {
|
||||
if (field.tagName === "SELECT" || field.tagName === "TEXTAREA") {
|
||||
return "string";
|
||||
}
|
||||
if (field.type === "number" || field.type === "range") {
|
||||
return "number";
|
||||
}
|
||||
if (field.type === "checkbox") {
|
||||
return "boolean";
|
||||
}
|
||||
return "string";
|
||||
}
|
||||
|
||||
function renderTools() {
|
||||
toolListEl.innerHTML = "";
|
||||
registry.forEach((tool) => {
|
||||
const card = document.createElement("article");
|
||||
card.className = "tool-card";
|
||||
card.innerHTML = `
|
||||
<h3>${tool.name}</h3>
|
||||
<p>${tool.description}</p>
|
||||
<span class="pill">${tool.source}</span>
|
||||
<pre class="schema">${escapeHtml(JSON.stringify(tool.inputSchema, null, 2))}</pre>
|
||||
`;
|
||||
toolListEl.append(card);
|
||||
});
|
||||
}
|
||||
|
||||
function sampleInputFor(name) {
|
||||
const samples = {
|
||||
create_support_ticket: {
|
||||
email: "dev@example.com",
|
||||
category: "refund",
|
||||
description: "订单 CHR-2026-0614 到货后发现配件缺失。",
|
||||
},
|
||||
lookup_order_status: { orderId: "CHR-2026-0614" },
|
||||
approve_refund_review: { orderId: "CHR-2026-0614", reason: "missing_accessory" },
|
||||
draft_customer_reply: {
|
||||
email: "dev@example.com",
|
||||
category: "refund",
|
||||
orderId: "CHR-2026-0614",
|
||||
},
|
||||
};
|
||||
return samples[name] ?? {};
|
||||
}
|
||||
|
||||
function log(title, payload) {
|
||||
const entry = document.createElement("div");
|
||||
entry.className = "entry";
|
||||
entry.innerHTML = `<strong>${title}</strong><pre>${escapeHtml(JSON.stringify(payload, null, 2))}</pre>`;
|
||||
logEl.prepend(entry);
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value)
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """);
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>WebMCP Demo - Tool Contracts</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<p class="eyebrow">Runnable demo</p>
|
||||
<h1>WebMCP 工具契约演示</h1>
|
||||
</div>
|
||||
<div class="runtime">
|
||||
<span id="native-status" class="pill">检测中</span>
|
||||
<a class="demo-home" href="../index.html">Demo 总览</a>
|
||||
<a href="https://developer.chrome.com/docs/ai/webmcp" target="_blank" rel="noreferrer">Chrome 官方文档</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="layout">
|
||||
<section class="workspace">
|
||||
<div class="intro">
|
||||
<p>
|
||||
这个页面模拟一个售后后台：左侧是人能操作的业务 UI，右侧是页面暴露给 Agent 的工具契约。
|
||||
如果当前 Chrome 没有开启 WebMCP，本页面会使用本地 mock，让现场仍然能看清楚“工具注册”和“工具调用”的流程。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-head">
|
||||
<div>
|
||||
<p class="eyebrow">Declarative API</p>
|
||||
<h2>声明式：把 HTML 表单变成工具</h2>
|
||||
</div>
|
||||
<span class="mode">form attributes</span>
|
||||
</div>
|
||||
|
||||
<form
|
||||
id="ticket-form"
|
||||
class="business-form"
|
||||
toolname="create_support_ticket"
|
||||
tooldescription="Create a support ticket from user supplied issue details."
|
||||
>
|
||||
<label>
|
||||
客户邮箱
|
||||
<input name="email" type="email" required value="dev@example.com" />
|
||||
</label>
|
||||
<label>
|
||||
问题类型
|
||||
<select name="category" required>
|
||||
<option value="refund">退款</option>
|
||||
<option value="delivery">物流</option>
|
||||
<option value="account">账号</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
问题描述
|
||||
<textarea name="description" required>订单 CHR-2026-0614 到货后发现配件缺失。</textarea>
|
||||
</label>
|
||||
<button type="submit">提交工单</button>
|
||||
</form>
|
||||
|
||||
<pre class="code"><code><form
|
||||
toolname="create_support_ticket"
|
||||
tooldescription="Create a support ticket from user supplied issue details.">
|
||||
<input name="email" type="email" required />
|
||||
<select name="category" required>...</select>
|
||||
<textarea name="description" required></textarea>
|
||||
</form></code></pre>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-head">
|
||||
<div>
|
||||
<p class="eyebrow">Imperative API</p>
|
||||
<h2>指令式：用 JavaScript 注册业务工具</h2>
|
||||
</div>
|
||||
<span class="mode">registerTool()</span>
|
||||
</div>
|
||||
|
||||
<div class="order-grid">
|
||||
<article>
|
||||
<span>订单号</span>
|
||||
<strong>CHR-2026-0614</strong>
|
||||
<small>已签收，缺件风险</small>
|
||||
</article>
|
||||
<article>
|
||||
<span>客户等级</span>
|
||||
<strong>Enterprise</strong>
|
||||
<small>允许优先退款审核</small>
|
||||
</article>
|
||||
<article>
|
||||
<span>当前状态</span>
|
||||
<strong id="order-state">等待处理</strong>
|
||||
<small>由工具调用更新</small>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="action-row">
|
||||
<button data-run-tool="lookup_order_status">运行 lookup_order_status</button>
|
||||
<button data-run-tool="draft_customer_reply">运行 draft_customer_reply</button>
|
||||
<button data-run-tool="approve_refund_review">运行 approve_refund_review</button>
|
||||
</div>
|
||||
|
||||
<pre class="code"><code>navigator.modelContext.registerTool({
|
||||
name: "lookup_order_status",
|
||||
description: "Look up order status by order id.",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: { orderId: { type: "string" } },
|
||||
required: ["orderId"]
|
||||
},
|
||||
execute: async ({ orderId }) => lookupOrder(orderId)
|
||||
});</code></pre>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<aside class="agent">
|
||||
<section class="agent-panel">
|
||||
<p class="eyebrow">Agent view</p>
|
||||
<h2>已暴露工具</h2>
|
||||
<div id="tool-list" class="tool-list"></div>
|
||||
</section>
|
||||
|
||||
<section class="agent-panel">
|
||||
<p class="eyebrow">Run script</p>
|
||||
<h2>现场演示步骤</h2>
|
||||
<ol class="steps">
|
||||
<li>先提交左侧表单，说明“人类 UI 仍然可用”。</li>
|
||||
<li>看右侧工具列表，说明 Agent 看到的是名称、描述和 JSON Schema。</li>
|
||||
<li>点击工具运行按钮，说明 Agent 不需要猜按钮位置，而是调用明确工具。</li>
|
||||
<li>点击“执行复合任务”，串起查询、决策和回复草稿。</li>
|
||||
</ol>
|
||||
<button id="run-workflow" class="primary">执行复合任务</button>
|
||||
</section>
|
||||
|
||||
<section class="agent-panel log-panel">
|
||||
<p class="eyebrow">Execution log</p>
|
||||
<h2>调用日志</h2>
|
||||
<div id="log" class="log"></div>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<script type="module" src="./app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,359 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #161a1d;
|
||||
--muted: #60717c;
|
||||
--paper: #fffdfa;
|
||||
--panel: #f3f0e8;
|
||||
--line: #d9d2c2;
|
||||
--blue: #174ea6;
|
||||
--green: #116b4f;
|
||||
--amber: #9a5c00;
|
||||
--red: #a7352a;
|
||||
--code: #1b2430;
|
||||
--shadow: 0 20px 70px rgb(50 45 34 / 0.16);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
background:
|
||||
linear-gradient(90deg, rgb(22 26 29 / 0.06) 1px, transparent 1px),
|
||||
linear-gradient(rgb(22 26 29 / 0.06) 1px, transparent 1px),
|
||||
#e7e1d6;
|
||||
background-size: 28px 28px;
|
||||
font-family: ui-sans-serif, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--blue);
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 28px 32px 18px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
color: var(--blue);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(34px, 5vw, 68px);
|
||||
line-height: 0.95;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
font-size: 22px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.runtime {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.demo-home {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--paper);
|
||||
padding: 6px 10px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.demo-home:hover {
|
||||
border-color: var(--blue);
|
||||
background: #eef4ff;
|
||||
}
|
||||
|
||||
.pill,
|
||||
.mode {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
border: 1px solid var(--line);
|
||||
padding: 4px 10px;
|
||||
background: var(--paper);
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.pill.native {
|
||||
border-color: rgb(17 107 79 / 0.35);
|
||||
background: #e8f4ee;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.pill.mock {
|
||||
border-color: rgb(154 92 0 / 0.35);
|
||||
background: #fff3d8;
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
|
||||
gap: 22px;
|
||||
padding: 0 32px 32px;
|
||||
}
|
||||
|
||||
.workspace,
|
||||
.agent {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.intro,
|
||||
.panel,
|
||||
.agent-panel {
|
||||
border: 1px solid var(--line);
|
||||
background: rgb(255 253 250 / 0.92);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.intro {
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.intro p {
|
||||
margin-bottom: 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.panel,
|
||||
.agent-panel {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.business-form {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
padding: 11px 12px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 92px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px solid var(--ink);
|
||||
background: var(--ink);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
min-height: 42px;
|
||||
padding: 10px 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.primary {
|
||||
width: 100%;
|
||||
background: var(--blue);
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.code {
|
||||
overflow: auto;
|
||||
margin: 18px 0 0;
|
||||
border: 1px solid #303a47;
|
||||
background: var(--code);
|
||||
color: #d7e2ef;
|
||||
padding: 16px;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.order-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.order-grid article {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.order-grid span,
|
||||
.order-grid small {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.order-grid strong {
|
||||
display: block;
|
||||
margin: 8px 0 6px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.action-row button {
|
||||
min-height: 56px;
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.agent {
|
||||
position: sticky;
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
.tool-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.tool-card {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.tool-card h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tool-card p {
|
||||
margin-bottom: 10px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.schema {
|
||||
overflow: auto;
|
||||
max-height: 150px;
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
color: #384551;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.steps {
|
||||
margin: 0 0 16px;
|
||||
padding-left: 20px;
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.log {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
max-height: 370px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.entry {
|
||||
border-left: 4px solid var(--blue);
|
||||
background: #fff;
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.entry strong {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.entry pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.topbar,
|
||||
.layout {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.topbar,
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.agent {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.order-grid,
|
||||
.action-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
const canvas = document.getElementById('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const drawElement = document.getElementById('draw-element');
|
||||
const statusPanel = document.getElementById('support-status');
|
||||
const demoForm = document.getElementById('demo-form');
|
||||
|
||||
const hasHtmlInCanvas =
|
||||
typeof ctx.drawElementImage === 'function' &&
|
||||
typeof canvas.requestPaint === 'function';
|
||||
|
||||
function setStatus(state, message) {
|
||||
statusPanel.dataset.state = state;
|
||||
statusPanel.textContent = message;
|
||||
}
|
||||
|
||||
function resizeCanvas(entry) {
|
||||
const dpcSize = entry.devicePixelContentBoxSize?.[0];
|
||||
const nextWidth = dpcSize?.inlineSize ?? Math.round(entry.contentRect.width * window.devicePixelRatio);
|
||||
const nextHeight = dpcSize?.blockSize ?? Math.round(entry.contentRect.height * window.devicePixelRatio);
|
||||
|
||||
if (canvas.width !== nextWidth) {
|
||||
canvas.width = nextWidth;
|
||||
}
|
||||
|
||||
if (canvas.height !== nextHeight) {
|
||||
canvas.height = nextHeight;
|
||||
}
|
||||
}
|
||||
|
||||
function paint() {
|
||||
ctx.reset();
|
||||
ctx.fillStyle = '#101820';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
const x = canvas.width / 25;
|
||||
const y = canvas.height / 25;
|
||||
const transform = ctx.drawElementImage(drawElement, x, y);
|
||||
drawElement.style.transform = transform.toString();
|
||||
}
|
||||
|
||||
demoForm.addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
setStatus('ok', '表单提交事件来自真实 DOM：发射指令已拦截，demo 仍停留在当前页面。');
|
||||
});
|
||||
|
||||
if (!hasHtmlInCanvas) {
|
||||
document.body.dataset.api = 'fallback';
|
||||
setStatus(
|
||||
'fail',
|
||||
'当前浏览器未暴露 drawElementImage/requestPaint。请使用 Chrome Canary 149+ 并开启 canvas-draw-element flag。'
|
||||
);
|
||||
} else {
|
||||
document.body.dataset.api = 'native';
|
||||
setStatus('ok', '已检测到 HTML-in-Canvas 实验 API，可以操作 canvas 中绘制的 DOM 表单。');
|
||||
canvas.onpaint = paint;
|
||||
|
||||
const supportsDevicePixelContentBox =
|
||||
typeof ResizeObserverEntry !== 'undefined' &&
|
||||
'devicePixelContentBoxSize' in ResizeObserverEntry.prototype;
|
||||
const resizeOptions = supportsDevicePixelContentBox ? { box: 'device-pixel-content-box' } : {};
|
||||
|
||||
const observer = new ResizeObserver(([entry]) => {
|
||||
resizeCanvas(entry);
|
||||
canvas.requestPaint();
|
||||
});
|
||||
|
||||
observer.observe(canvas, resizeOptions);
|
||||
canvas.requestPaint();
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>HTML-in-Canvas API Demo</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="page-shell">
|
||||
<section class="intro" aria-labelledby="page-title">
|
||||
<p class="eyebrow">Chrome Origin Trial Demo</p>
|
||||
<h1 id="page-title">HTML-in-Canvas API</h1>
|
||||
<p class="lede">
|
||||
这个页面基于 WICG 官方示例改写，演示把真实 DOM 表单绘制进
|
||||
<code><canvas></code>，同时保留输入、选择、滑块和按钮的交互能力。
|
||||
</p>
|
||||
|
||||
<div class="status-panel" id="support-status" role="status">
|
||||
正在检测当前浏览器是否支持实验 API...
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="demo-grid" aria-label="HTML-in-Canvas 演示">
|
||||
<div class="canvas-stage">
|
||||
<canvas id="canvas" width="638" height="318" layoutsubtree="true">
|
||||
<div id="draw-element" class="control-panel">
|
||||
<form id="demo-form" action="#" method="get">
|
||||
<fieldset>
|
||||
<legend>飞船控制台</legend>
|
||||
<label class="field-row" for="ship-name">
|
||||
<span>飞船名称</span>
|
||||
<input type="text" id="ship-name" value="Canvas 远航者" />
|
||||
</label>
|
||||
|
||||
<label class="check-row" for="hyperdrive">
|
||||
<input type="checkbox" id="hyperdrive" checked />
|
||||
<span>启动超空间引擎</span>
|
||||
</label>
|
||||
|
||||
<fieldset class="nested-fieldset">
|
||||
<legend>目标星系</legend>
|
||||
<label class="check-row" for="alpha">
|
||||
<input type="radio" id="alpha" name="system" value="alpha" checked />
|
||||
<span>半人马座 Alpha</span>
|
||||
</label>
|
||||
<label class="check-row" for="beta">
|
||||
<input type="radio" id="beta" name="system" value="beta" />
|
||||
<span>参宿四 Betelgeuse</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<label class="field-row" for="shield-level">
|
||||
<span>护盾强度</span>
|
||||
<input type="range" id="shield-level" min="0" max="100" value="75" />
|
||||
</label>
|
||||
|
||||
<button type="submit">发射</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</canvas>
|
||||
<div class="fallback-preview" aria-hidden="true">
|
||||
<p class="fallback-label">当前浏览器未启用实验 API，下面显示同一 DOM 表单的静态预览。</p>
|
||||
<div class="control-panel preview-panel">
|
||||
<fieldset>
|
||||
<legend>飞船控制台</legend>
|
||||
<label class="field-row">
|
||||
<span>飞船名称</span>
|
||||
<input type="text" value="Canvas 远航者" disabled />
|
||||
</label>
|
||||
<label class="check-row">
|
||||
<input type="checkbox" checked disabled />
|
||||
<span>启动超空间引擎</span>
|
||||
</label>
|
||||
<fieldset class="nested-fieldset">
|
||||
<legend>目标星系</legend>
|
||||
<label class="check-row">
|
||||
<input type="radio" name="preview-system" checked disabled />
|
||||
<span>半人马座 Alpha</span>
|
||||
</label>
|
||||
<label class="check-row">
|
||||
<input type="radio" name="preview-system" disabled />
|
||||
<span>参宿四 Betelgeuse</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<label class="field-row">
|
||||
<span>护盾强度</span>
|
||||
<input type="range" min="0" max="100" value="75" disabled />
|
||||
</label>
|
||||
<button type="button" disabled>发射</button>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="notes" aria-label="运行说明">
|
||||
<h2>运行条件</h2>
|
||||
<p>
|
||||
Chrome 官方文章说明：该 API 在 Chrome 148-150 处于源试用阶段，本地测试需要
|
||||
Chrome Canary 149+，并开启 <code>chrome://flags/#canvas-draw-element</code>。
|
||||
</p>
|
||||
<h2>可验证点</h2>
|
||||
<ul>
|
||||
<li>表单控件来自真实 DOM，不是 canvas 手绘控件。</li>
|
||||
<li>输入框、复选框、单选项、滑块和按钮可直接操作。</li>
|
||||
<li>JS 每次 paint 后同步 DOM transform，让命中区域与 canvas 绘制位置对齐。</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="./app.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,292 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #17202a;
|
||||
--muted: #5d6670;
|
||||
--panel: #f7f4ec;
|
||||
--canvas: #101820;
|
||||
--accent: #ffb000;
|
||||
--accent-strong: #e04f2f;
|
||||
--line: #263241;
|
||||
--ok: #1d7f4f;
|
||||
--warn: #9a5b00;
|
||||
font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--ink);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(23, 32, 42, 0.06) 1px, transparent 1px),
|
||||
linear-gradient(rgba(23, 32, 42, 0.05) 1px, transparent 1px),
|
||||
#fffaf0;
|
||||
background-size: 28px 28px;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid rgba(23, 32, 42, 0.16);
|
||||
border-radius: 4px;
|
||||
padding: 0.08rem 0.28rem;
|
||||
background: rgba(255, 255, 255, 0.74);
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
width: min(1120px, calc(100vw - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 44px 0 56px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 760px;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(3rem, 6vw, 5.8rem);
|
||||
line-height: 0.92;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.lede {
|
||||
max-width: 760px;
|
||||
color: var(--muted);
|
||||
font-size: 1.06rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
border: 1px solid rgba(23, 32, 42, 0.18);
|
||||
border-left: 6px solid var(--warn);
|
||||
border-radius: 6px;
|
||||
padding: 10px 14px;
|
||||
color: var(--warn);
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status-panel[data-state="ok"] {
|
||||
border-left-color: var(--ok);
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.status-panel[data-state="fail"] {
|
||||
border-left-color: var(--accent-strong);
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.8fr);
|
||||
gap: 24px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.canvas-stage {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 480px;
|
||||
border: 1px solid rgba(23, 32, 42, 0.24);
|
||||
border-radius: 8px;
|
||||
padding: 22px;
|
||||
background:
|
||||
radial-gradient(circle at 24% 18%, rgba(255, 176, 0, 0.34), transparent 28%),
|
||||
linear-gradient(135deg, #1a2633 0%, #0d141b 100%);
|
||||
box-shadow: 0 24px 70px rgba(23, 32, 42, 0.18);
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: min(638px, 100%);
|
||||
height: auto;
|
||||
aspect-ratio: 638 / 318;
|
||||
border: 2px solid rgba(255, 176, 0, 0.9);
|
||||
border-radius: 6px;
|
||||
background: var(--canvas);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.fallback-preview {
|
||||
display: none;
|
||||
position: absolute;
|
||||
inset: 42px;
|
||||
place-items: center;
|
||||
gap: 14px;
|
||||
border: 1px dashed rgba(255, 176, 0, 0.72);
|
||||
border-radius: 6px;
|
||||
padding: 22px;
|
||||
background: rgba(16, 24, 32, 0.9);
|
||||
}
|
||||
|
||||
body[data-api="fallback"] .fallback-preview {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
body[data-api="fallback"] canvas {
|
||||
opacity: 0.34;
|
||||
}
|
||||
|
||||
.fallback-label {
|
||||
color: #ffd27c;
|
||||
font-size: 0.86rem;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
width: 578px;
|
||||
color: #101820;
|
||||
}
|
||||
|
||||
.control-panel fieldset {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
border: 2px solid #17202a;
|
||||
border-radius: 6px;
|
||||
padding: 18px;
|
||||
background: #fffaf0;
|
||||
}
|
||||
|
||||
.control-panel legend {
|
||||
padding: 0 8px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.field-row,
|
||||
.check-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.field-row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.field-row input[type="text"] {
|
||||
width: min(310px, 58%);
|
||||
border: 1px solid #17202a;
|
||||
border-radius: 4px;
|
||||
padding: 7px 9px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.field-row input[type="range"] {
|
||||
width: min(300px, 58%);
|
||||
accent-color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.nested-fieldset {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.nested-fieldset legend {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.control-panel button {
|
||||
justify-self: end;
|
||||
border: 2px solid #17202a;
|
||||
border-radius: 4px;
|
||||
padding: 8px 18px;
|
||||
color: #17202a;
|
||||
background: var(--accent);
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.preview-panel {
|
||||
width: min(578px, 100%);
|
||||
}
|
||||
|
||||
.preview-panel input:disabled,
|
||||
.preview-panel button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.notes {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 14px;
|
||||
border-left: 4px solid var(--line);
|
||||
padding: 20px 0 20px 22px;
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.notes h2 {
|
||||
color: var(--ink);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.notes ul {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.page-shell {
|
||||
width: min(100vw - 22px, 680px);
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.1rem;
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.canvas-stage {
|
||||
min-height: 360px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.fallback-preview {
|
||||
inset: 24px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.nested-fieldset {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.notes {
|
||||
border-left: 0;
|
||||
border-top: 4px solid var(--line);
|
||||
padding: 18px 0 0;
|
||||
}
|
||||
}
|
||||
Executable
+14
@@ -0,0 +1,14 @@
|
||||
#!/usr/bin/env bash
|
||||
set -euo pipefail
|
||||
|
||||
QUERY=${1:-"animate a dialog modal backdrop"}
|
||||
GUIDE_ID=${2:-"animate-to-from-top-layer"}
|
||||
|
||||
echo "== Modern Web Guidance: search =="
|
||||
echo "npx modern-web-guidance@latest search \"$QUERY\""
|
||||
npx modern-web-guidance@latest search "$QUERY"
|
||||
|
||||
echo
|
||||
echo "== Modern Web Guidance: retrieve =="
|
||||
echo "npx modern-web-guidance@latest retrieve \"$GUIDE_ID\""
|
||||
npx modern-web-guidance@latest retrieve "$GUIDE_ID"
|
||||
Binary file not shown.
@@ -4,7 +4,7 @@ colorSchema: light
|
||||
title: What's New in Chrome
|
||||
info: |
|
||||
## Chrome 新特性分享
|
||||
面向前端、产品与技术团队的浏览器能力更新速览
|
||||
面向 Web 开发者的 Agentic Web 与 Chrome 新能力科普
|
||||
transition: slide-left
|
||||
mdc: true
|
||||
drawings:
|
||||
@@ -17,9 +17,9 @@ layout: intro
|
||||
|
||||
# What's New in Chrome
|
||||
|
||||
Web 平台能力、DevTools 工作流与产品落地机会
|
||||
AI Agent 要操作网页了，Chrome 正在做什么？
|
||||
|
||||
<div class="pt-4 text-sm op-60">分享项目模板 · 首页 · 大纲 · 模拟展示详情页</div>
|
||||
<div class="pt-4 text-sm op-60">Part 1 科普 · Part 2 官方优先 demo 演示</div>
|
||||
|
||||
---
|
||||
src: ./pages/overview.md
|
||||
@@ -33,24 +33,54 @@ src: ./pages/outline.md
|
||||
layout: new-section
|
||||
---
|
||||
|
||||
# 模拟展示：从 Chrome Release Notes 到团队落地
|
||||
# Part 2：Demo 演示
|
||||
|
||||
PPT 讲新增功能，项目代码配合现场演示
|
||||
|
||||
---
|
||||
src: ./pages/demo/release-scan.md
|
||||
---
|
||||
|
||||
---
|
||||
src: ./pages/demo/webmcp-contract.md
|
||||
---
|
||||
|
||||
---
|
||||
src: ./pages/demo/webmcp-project.md
|
||||
---
|
||||
|
||||
---
|
||||
src: ./pages/demo/webmcp-script.md
|
||||
---
|
||||
|
||||
---
|
||||
src: ./pages/demo/devtools-workflow.md
|
||||
---
|
||||
|
||||
---
|
||||
src: ./pages/demo/platform-api.md
|
||||
src: ./pages/demo/modern-web-guidance.md
|
||||
---
|
||||
|
||||
---
|
||||
src: ./pages/demo/devtools-agents.md
|
||||
---
|
||||
|
||||
---
|
||||
src: ./pages/demo/html-in-canvas.md
|
||||
---
|
||||
|
||||
---
|
||||
src: ./pages/demo/view-transitions.md
|
||||
---
|
||||
|
||||
---
|
||||
src: ./pages/demo/adoption-plan.md
|
||||
---
|
||||
|
||||
---
|
||||
src: ./pages/demo/platform-api.md
|
||||
---
|
||||
|
||||
---
|
||||
src: ./pages/closing.md
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user