update

2026-06-14 16:23:43 +08:00
parent de690f85fa
commit 9ab5f57b85
18 changed files with 40 additions and 119 deletions
@@ -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 新能力当作产品和工程共同评估的素材，而不是纯前端知识点。
 -->
@@ -33,7 +33,3 @@
 <div class="mt-8 card-blue text-sm">
 打开总入口：<span class="font-mono">/demo/index.html</span>。正式 demo 入口都从这里进入。
 </div>
 <!--
 这一页对应 plan/part2.md 的本地 demo 项目职责。WebMCP 必须打开本地工程演示；其他官方 demo 或网络临时不可用时，再打开 /demo/index.html 页面继续讲官方链接、三路径对比和风险边界。
 -->
@@ -34,17 +34,5 @@
 </div>
 <div class="mt-8 card text-sm">
-讲解结论：DevTools for agents 不是页面 API，而是把真实浏览器运行时交给 coding agent，让它不再只根据源码猜问题。
+核心结论：DevTools for agents 不是页面 API，而是把真实浏览器运行时交给 coding agent，让它不再只根据源码猜问题。
 </div>
 <!--
 官方依据：
 - https://developer.chrome.com/docs/devtools/agents/get-started
 - https://github.com/ChromeDevTools/chrome-devtools-mcp
 现场 prompt:
 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.
 -->
@@ -37,14 +37,3 @@ flowchart LR
 <div class="mt-8 card-amber text-sm">
 示例任务：创建“订单管理”模块，包括词条、菜单、角色权限绑定。案例数据只说明趋势，不承诺所有项目都有相同收益。
 </div>
 <!--
 这一页参考中文实战材料中的三种方案对比，但剔除厂商封装概念。讲述重点不是某个 SDK 强，而是说明 AI 更适合处理结构化工具，而不是在复杂 UI 中不断猜测。
 建议讲法：
 1. 先说同一个后台任务：创建词条、创建菜单、绑定角色。
 2. 视觉识别能做，但每步都需要截图和推理。
 3. DOM / A11y 识别更接近结构，但仍可能点错或遗漏状态。
 4. WebMCP 把动作变成工具：createEntry、createMenu、bindRole。
 5. 结论：从“AI 猜 UI”转向“网页提供工具”。
 -->
@@ -31,10 +31,3 @@
 <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>
 <!--
 官方依据：
 - https://developer.chrome.com/blog/html-in-canvas-origin-trial
 不要承诺现场一定能跑原生 API。演示核心是 API 方向和浏览器支持边界。
 -->
@@ -13,7 +13,7 @@ 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="font-semibold mb-3">演示重点</div>
 <div class="space-y-2 text-sm">
 - AI coding agent 容易写旧方案
@@ -29,13 +29,3 @@ npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
 <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>
 <!--
 官方依据：
 - https://developer.chrome.com/docs/modern-web-guidance/get-started
 现场顺序：
 1. 先跑 search，看官方返回的 use case 列表。
 2. 再跑 retrieve，看具体 Markdown 指南。
 3. 打开本地辅助页展示 dialog/top-layer 动画的现代写法。
 -->
@@ -30,18 +30,5 @@
 </div>
 <div class="mt-8 card-amber text-sm">
-最后用这页收束：Chrome 新能力不是孤立 API，而是同时升级 Agent 交互、开发工作流和用户体验。
+收束判断：Chrome 新能力不是孤立 API，而是同时升级 Agent 交互、开发工作流和用户体验。
 </div>
 <!--
 官方快闪顺序建议：
 1. WebMCP: https://developer.chrome.com/docs/ai/webmcp/imperative-api
 2. Modern Web Guidance: https://developer.chrome.com/docs/modern-web-guidance
 3. DevTools for agents: https://developer.chrome.com/docs/devtools/agents/get-started
 4. Prompt API: https://developer.chrome.com/docs/ai/prompt-api
 5. HTML-in-Canvas: https://developer.chrome.com/blog/html-in-canvas-origin-trial
 6. Baseline: https://web.dev/baseline
 7. View Transitions: https://view-transitions.chrome.dev/
 讲法：这里不再逐个展开，只做总览收束和听众记忆点。
 -->
@@ -3,7 +3,7 @@
 <div class="grid grid-cols-3 gap-5 mt-8">
 <div class="card-blue">
-<div class="font-semibold mb-3">PPT 讲什么</div>
+<div class="font-semibold mb-3">幻灯片内容</div>
 <div class="space-y-2 text-sm">
 - 分别介绍新增能力
@@ -45,15 +45,3 @@
 <div class="mt-8 card text-sm">
 原则：WebMCP 是主 demo；Modern Web Guidance 和 DevTools for agents 按官方流程演示；HTML-in-Canvas 和 View Transitions 用本地页面辅助展示。
 </div>
 <!--
 官方资料入口：
 - WebMCP imperative API: https://developer.chrome.com/docs/ai/webmcp/imperative-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
 - Prompt API: https://developer.chrome.com/docs/ai/prompt-api
 - HTML-in-Canvas: https://developer.chrome.com/blog/html-in-canvas-origin-trial
 - Chrome demos index: https://chrome.dev/
 讲法：先告诉观众“这不是现场复刻所有实验 API，而是用官方 demo 建立可信证据链”。这样可以降低现场失败风险。
 -->
@@ -28,10 +28,5 @@
 </div>
 <div class="mt-8 card text-sm">
-讲解结论：View Transitions 把“状态变化”从手写动画提升为浏览器级能力，适合渐进增强。
+核心结论：View Transitions 把“状态变化”从手写动画提升为浏览器级能力，适合渐进增强。
 </div>
 <!--
 官方入口：
 - https://view-transitions.chrome.dev/
 -->
@@ -32,12 +32,3 @@ navigator.modelContext.registerTool(...)
 <div class="mt-8 card-amber text-sm">
 实验边界：Chrome 官方文档标注 WebMCP 仍处于 proposed / origin trial / flag 阶段；现场 demo 必须有 mock 兜底。
 </div>
 <!--
 官方依据：
 - https://developer.chrome.com/docs/ai/webmcp
 - https://developer.chrome.com/docs/ai/webmcp/imperative-api
 - https://developer.chrome.com/docs/lighthouse/agentic-browsing/registered-webmcp-tools
 讲法：不要说“零错误率”。更稳妥的表达是“减少 Agent 猜 UI 的步骤，提高性能、可靠性和任务完成准确率”。
 -->
@@ -29,12 +29,5 @@ public/demo/webmcp/
 </div>
 <div class="mt-8 card-green text-sm">
-这页要现场打开工程，不只讲链接。观众能看到“页面 UI”和“Agent 工具视角”同时存在。
+现场打开工程，不只展示链接；页面 UI 和 Agent 工具视角需要同时呈现。
 </div>
 <!--
 现场建议：
 1. 先打开 http://localhost:3030/demo/webmcp/index.html 或实际 dev server URL。
 2. 展示左侧 HTML 表单和右侧工具列表。
 3. 再切到 app.js，解释 registerTool 的 name / description / inputSchema / execute。
 -->
@@ -33,9 +33,5 @@
 </div>
 <div class="mt-8 card text-sm">
-讲解结论：WebMCP 不是让 Agent 更会点击，而是让网页直接声明“我有哪些可调用能力”。敏感动作仍然要保留用户确认、权限和审计。
+核心结论：WebMCP 不是让 Agent 更会点击，而是让网页直接声明“我有哪些可调用能力”。敏感动作仍然要保留用户确认、权限和审计。
 </div>
 <!--
 不要现场陷入标准细节。演示后马上回到大图：Chrome 通过 WebMCP、DevTools for agents、Modern Web Guidance 等能力，让 Web 逐步变成 Agent 可以协作的运行环境。
 -->
@@ -27,7 +27,3 @@
 </div>
 </div>
 <!--
 建议讲法：第一部分先建立 Agentic Web 概念，第二部分用官方 demo 和本地兜底页证明“从猜 UI 到调用工具”的转变。Chrome 其它新特性只做快闪，不抢 WebMCP 主线。
 -->
@@ -1,14 +1,14 @@
-# 这次分享解决什么问题？
+# 这次分享的目标
 <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">
 - 理解 AI Agent 操作网页为什么困难
 - 看懂 Chrome 新增能力各自解决什么问题
- 知道 PPT 与项目代码分别如何演示这些能力
+- 知道幻灯片与项目代码如何配合演示
 - 建立实验能力的风险边界
 </div>
@@ -27,7 +27,3 @@
 </div>
 </div>
 <!--
 这一页是分享定位。第一部分讲概念，第二部分讲 demo。第二部分的产物是 PPT 加项目代码：PPT 分别介绍新增加的功能，项目代码配合官方材料完成现场演示与兜底。
 -->
@@ -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