Initial Slidev Chrome talk project

2026-06-14 14:05:01 +08:00
commit 3e3718c239
19 changed files with 9163 additions and 0 deletions
@@ -0,0 +1,38 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+dist-ssr/
+.output/
+.slidev/
+.remote-assets/
+
+# Local environment
+.env
+.env.*
+!.env.example
+*.local
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Tool caches
+.vite-inspect/
+.cache/
+.eslintcache
+coverage/
+
+# Generated type files
+components.d.ts
+
+# Editor and OS files
+.DS_Store
+.history/
+.idea/
+.vscode/
@@ -0,0 +1,22 @@
+# What's New in Chrome 分享项目
+
+这是一个基于 [Slidev](https://github.com/slidevjs/slidev) 的 Chrome 新特性分享项目骨架。
+
+## 本地开发
+
+- `pnpm install`
+- `pnpm dev`
+- 打开 <http://localhost:3030>
+
+## 内容结构
+
+- [slides.md](./slides.md)：默认首页、章节入口和全局顺序
+- [pages/outline.md](./pages/outline.md)：分享大纲
+- [pages/demo/](./pages/demo/)：模拟展示详情页
+- [style.css](./style.css)：主题微调
+
+## 常用脚本
+
+- `pnpm dev`：启动演示模式
+- `pnpm build`：构建静态站点
+- `pnpm export`：导出幻灯片
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  count: {
+    default: 0,
+  },
+})
+
+const counter = ref(props.count)
+</script>
+
+<template>
+  <div flex="~" w="min" border="~ main rounded-md">
+    <button
+      border="r main"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter -= 1"
+    >
+      -
+    </button>
+    <span m="auto" p="2">{{ counter }}</span>
+    <button
+      border="l main"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter += 1"
+    >
+      +
+    </button>
+  </div>
+</template>
@@ -0,0 +1,16 @@
+[build]
+publish = "dist"
+command = "npm run build"
+
+[build.environment]
+NODE_VERSION = "20"
+
+[[redirects]]
+from = "/.well-known/*"
+to = "/.well-known/:splat"
+status = 200
+
+[[redirects]]
+from = "/*"
+to = "/index.html"
+status = 200
@@ -0,0 +1,19 @@
+{
+  "name": "about-what-new-in-chrome",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "slidev build",
+    "dev": "slidev --open",
+    "export": "slidev export"
+  },
+  "dependencies": {
+    "@iconify-json/logos": "^1.2.11",
+    "@slidev/cli": "^52.16.0",
+    "@slidev/theme-default": "latest",
+    "@slidev/theme-seriph": "latest",
+    "slidev-theme-penguin": "^2.3.1",
+    "vite-svg-loader": "^5.1.1",
+    "vue": "^3.5.33"
+  }
+}
@@ -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 新能力当作产品和工程共同评估的素材，而不是纯前端知识点。
+-->
@@ -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。
+-->
@@ -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 找资源问题，最后输出可执行的优化清单。
+-->
@@ -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 都变成一张评估卡。不要只问“能不能用”，而是问“能解决什么问题、什么时候可上线、不能用时怎么降级”。
+-->
@@ -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。重点不是最新版本号，而是演示方法：先看默认启用与兼容性，再看是否影响我们现有业务，最后只挑少数真正需要行动的条目。
+-->
@@ -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 更新雷达。
+-->
@@ -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 工作流可以马上提高排查效率。
+-->
@@ -0,0 +1,4 @@
+allowBuilds:
+  '@parcel/watcher': true
+  esbuild: true
+  vue-demi: true
@@ -0,0 +1,56 @@
+---
+theme: penguin
+colorSchema: light
+title: What's New in Chrome
+info: |
+  ## Chrome 新特性分享
+  面向前端、产品与技术团队的浏览器能力更新速览
+transition: slide-left
+mdc: true
+drawings:
+  persist: false
+themeConfig:
+  twitter: ''
+  twitterUrl: ''
+layout: intro
+---
+
+# What's New in Chrome
+
+Web 平台能力、DevTools 工作流与产品落地机会
+
+<div class="pt-4 text-sm op-60">分享项目模板 · 首页 · 大纲 · 模拟展示详情页</div>
+
+---
+src: ./pages/overview.md
+---
+
+---
+src: ./pages/outline.md
+---
+
+---
+layout: new-section
+---
+
+# 模拟展示：从 Chrome Release Notes 到团队落地
+
+---
+src: ./pages/demo/release-scan.md
+---
+
+---
+src: ./pages/demo/devtools-workflow.md
+---
+
+---
+src: ./pages/demo/platform-api.md
+---
+
+---
+src: ./pages/demo/adoption-plan.md
+---
+
+---
+src: ./pages/closing.md
+---
@@ -0,0 +1,12 @@
+/* eslint-disable no-console */
+
+// #region snippet
+// Inside ./snippets/external.ts
+export function emptyArray<T>(length: number) {
+  return Array.from<T>({ length })
+}
+// #endregion snippet
+
+export function sayHello() {
+  console.log('Hello from snippets/external.ts')
+}
@@ -0,0 +1,48 @@
+/* Penguin Light 主题企业风格微调 */
+
+.slidev-layout {
+  font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
+}
+
+.slidev-layout h1 {
+  font-weight: 700 !important;
+}
+
+.slidev-layout li {
+  margin-bottom: 0.4rem;
+}
+
+.slidev-layout pre {
+  border-radius: 0.5rem;
+}
+
+.card,
+.card-blue,
+.card-green,
+.card-amber,
+.card-red {
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border: 1px solid rgb(148 163 184 / 0.22);
+  background: rgb(15 23 42 / 0.04);
+}
+
+.card-blue {
+  border-color: rgb(59 130 246 / 0.35);
+  background: rgb(59 130 246 / 0.08);
+}
+
+.card-green {
+  border-color: rgb(16 185 129 / 0.35);
+  background: rgb(16 185 129 / 0.08);
+}
+
+.card-amber {
+  border-color: rgb(245 158 11 / 0.35);
+  background: rgb(245 158 11 / 0.08);
+}
+
+.card-red {
+  border-color: rgb(239 68 68 / 0.35);
+  background: rgb(239 68 68 / 0.08);
+}
@@ -0,0 +1,7 @@
+{
+  "rewrites": [
+    { "source": "/(.*)", "destination": "/index.html" }
+  ],
+  "buildCommand": "npm run build",
+  "outputDirectory": "dist"
+}
@@ -0,0 +1,5 @@
+import svgLoader from 'vite-svg-loader'
+
+export default {
+  plugins: [svgLoader()],
+}