Initial Slidev Chrome talk project

pages/demo/adoption-plan.md

@@ -0,0 +1,33 @@
+# 模拟展示 4：团队落地清单
+
+<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 更新跟踪文档
+- 选 1 个 DevTools 工作流做内部演示
+- 为 1 个新能力写最小 demo
+- 标注生产可用与仅实验的边界
+
+</div>
+</div>
+
+<div class="card-red">
+<div class="font-semibold mb-3">不要直接做</div>
+<div class="space-y-2 text-sm">
+
+- 只因 Chrome 支持就上线
+- 忽略 Safari / Firefox 用户
+- 把实验能力写进核心链路
+- 跳过权限与隐私评估
+
+</div>
+</div>
+
+</div>
+
+<!--
+这一页把分享从“知道了”落到“接下来做什么”。建议最后留一个简单清单，让团队每月复盘一次 Chrome 更新，并把值得试验的能力进入工程 backlog。
+-->

pages/demo/devtools-workflow.md

@@ -0,0 +1,32 @@
+# 模拟展示 2：DevTools 排查链路
+
+<div class="mt-8">
+
+```mermaid {scale: 0.82}
+flowchart LR
+    A[用户反馈卡顿] --> B[Performance 录制]
+    B --> C[定位长任务]
+    C --> D[Network 查资源瀑布]
+    D --> E[Coverage 查无效代码]
+    E --> F[形成优化清单]
+```
+
+</div>
+
+<div class="grid grid-cols-2 gap-6 mt-8">
+
+<div class="card">
+<div class="font-semibold mb-2">演示素材</div>
+<div class="text-sm text-gray-400">准备一个加载慢、交互卡顿、资源偏大的页面作为示例。</div>
+</div>
+
+<div class="card-green">
+<div class="font-semibold mb-2">观众收获</div>
+<div class="text-sm text-gray-400">把 DevTools 从“会打开”变成“按链路定位问题”。</div>
+</div>
+
+</div>
+
+<!--
+这一页用于现场演示细节。建议讲一个真实或模拟页面，从 Performance 开始抓主线程问题，再用 Network 和 Coverage 找资源问题，最后输出可执行的优化清单。
+-->

pages/demo/platform-api.md

@@ -0,0 +1,38 @@
+# 模拟展示 3：Web 平台能力评估卡
+
+<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">
+
+- CSS 新布局与交互能力
+- View Transitions
+- File System / Clipboard / Share APIs
+- PWA 安装与离线体验
+- 本地 AI 与浏览器内置能力探索
+
+</div>
+</div>
+
+<div class="card">
+<div class="font-semibold mb-3">评估维度</div>
+<div class="space-y-2 text-sm text-gray-300">
+
+- 用户价值：解决什么真实问题？
+- 兼容性：Chrome-only 还是跨浏览器？
+- 降级方案：不可用时如何处理？
+- 风险：权限、隐私、性能、安全
+
+</div>
+</div>
+
+</div>
+
+<div class="mt-8 card-amber text-sm">
+推荐输出格式：能力名称 / Chrome 支持状态 / 业务场景 / Demo 链接 / 风险 / 下一步。
+</div>
+
+<!--
+这里可以把每个新 API 都变成一张评估卡。不要只问“能不能用”，而是问“能解决什么问题、什么时候可上线、不能用时怎么降级”。
+-->

pages/demo/release-scan.md

@@ -0,0 +1,44 @@
+# 模拟展示 1：快速扫一版 Chrome 更新
+
+<div class="grid grid-cols-3 gap-5 mt-8">
+
+<div class="card-blue">
+<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="space-y-2 text-sm">
+
+- 是否默认启用
+- 是否跨浏览器可用
+- 是否影响现有代码
+- 是否带来明显产品收益
+
+</div>
+</div>
+
+<div class="card-amber">
+<div class="font-semibold mb-3">输出物</div>
+<div class="space-y-2 text-sm">
+
+- 3 个可试验能力
+- 2 个需要关注的变更
+- 1 个团队落地建议
+
+</div>
+</div>
+
+</div>
+
+<!--
+这一页可以模拟现场打开 release notes。重点不是最新版本号，而是演示方法：先看默认启用与兼容性，再看是否影响我们现有业务，最后只挑少数真正需要行动的条目。
+-->