Initial Slidev Chrome talk project

pages/closing.md

@@ -0,0 +1,21 @@
+# 收尾：建立团队的 Chrome 更新雷达
+
+<div class="mt-8 space-y-4 text-sm">
+
+<div class="p-4 rounded-lg bg-white/5 border border-white/10">
+Chrome 更新不是新闻流，而是 Web 产品能力池。
+</div>
+
+<div class="p-4 rounded-lg bg-white/5 border border-white/10">
+真正的价值是筛选、验证、降级和沉淀，而不是追逐每一个新 API。
+</div>
+
+<div class="p-4 rounded-lg bg-white/5 border border-white/10">
+建议形成固定节奏：每月扫描一次，季度做一次 demo day，成熟能力进入技术方案模板。
+</div>
+
+</div>
+
+<!--
+最后强调：浏览器能力变化很快，团队需要的是可持续的更新机制。把 Chrome 新能力当作产品和工程共同评估的素材，而不是纯前端知识点。
+-->

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。重点不是最新版本号，而是演示方法：先看默认启用与兼容性，再看是否影响我们现有业务，最后只挑少数真正需要行动的条目。
+-->

pages/outline.md

@@ -0,0 +1,33 @@
+# 分享大纲
+
+<div class="grid grid-cols-2 gap-6 mt-8">
+
+<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>
+
+<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>
+
+<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>
+
+<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>
+
+</div>
+
+<!--
+建议讲法：先讲信息入口，再讲能力分类，最后讲如何落地。这样听众不会只记住几个孤立 API，而是学会建立自己的 Chrome 更新雷达。
+-->

pages/overview.md

@@ -0,0 +1,33 @@
+# 这次分享解决什么问题？
+
+<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">
+
+- Chrome 近期值得关注的新能力地图
+- 哪些能力已经适合进入生产评估
+- 如何用 DevTools 更快定位性能与兼容性问题
+- 如何把浏览器更新转成团队行动项
+
+</div>
+</div>
+
+<div class="card">
+<div class="font-semibold mb-3">不展开做什么</div>
+<div class="space-y-2 text-sm text-gray-300">
+
+- 不逐条朗读全部 release notes
+- 不做浏览器内核源码分析
+- 不承诺所有实验能力都可直接上线
+- 不替代真实项目的兼容性验证
+
+</div>
+</div>
+
+</div>
+
+<!--
+这一页是分享定位。Chrome 更新频率很高，真正有价值的不是把每个版本的新字段都念一遍，而是帮助团队快速判断：哪些变化影响我们现在的产品，哪些能力值得试验，哪些 DevTools 工作流可以马上提高排查效率。
+-->