实战：Vue 组件与 Monaco 交互式演示文稿

本章把第 5 周的能力组合成完整演示，题材为"JavaScript 函数式编程"。观众不仅可以看，还能现场编辑、运行、对比代码。

一、项目与全局配置

pnpm create slidev interactive-deck
cd interactive-deck

---
theme: seriph
title: JavaScript 函数式编程
lineNumbers: true
---

二、自定义组件：代码运行结果面板

创建 components/ResultPanel.vue，展示代码运行结果：

<script setup>
import { ref } from 'vue'

const props = defineProps({
  initial: { type: Number, default: 0 },
})
const result = ref(props.initial)
const double = () => (result.value *= 2)
</script>

<template>
  <div class="panel">
    <div class="value">{{ result }}</div>
    <button @click="double">×2</button>
    <slot />
  </div>
</template>

<style scoped>
.panel {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 2rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}
</style>

在 Markdown 中直接使用：

# 计算器演示

<ResultPanel :initial="2" />

点击按钮实时翻倍，观察状态变化。

自动注册生效，无需 import。

三、内置组件：图表与视频

用内置组件补充视觉元素：

## 函数式 vs 命令式

<Chart type="bar" :data="[4, 7, 3, 9]" :labels="['纯函数','不可变','高阶','组合']" />

---
## 函数式思想（视频）

<YouTube id="dQw4w9WgXcQ" />

<Chart /> 渲染 ECharts 图表，<YouTube /> 嵌入讲解视频。

四、Monaco 可编辑代码块

讲解代码时用 monaco 让观众可编辑：

## 纯函数

```monaco
// 纯函数：相同输入必然相同输出
function add(a, b) {
  return a + b
}
console.log(add(2, 3))
```
```

观众可以现场修改参数、观察逻辑，配合自动补全与类型提示。

## 五、monaco-run 现场运行

关键示例用 `monaco-run` 直接运行：

````markdown
## map / filter / reduce

```monaco-run
const nums = [1, 2, 3, 4, 5]
const result = nums
  .filter(n => n % 2 === 1)
  .map(n => n * 10)
  .reduce((sum, n) => sum + n, 0)
console.log(result)
```
```

点击运行按钮，输出面板显示 `30`，讲解组合式数据处理。

## 六、monaco-diff 对比

讲重构时用差异视图：

````markdown
## 重构对比

```monaco-diff
function process(data) {
  const out = []
  for (let i = 0; i < data.length; i++) {
    if (data[i] > 0) {
      out.push(data[i] * 2)
    }
  }
  return out
}
--------
const process = (data) => data
  .filter(n => n > 0)
  .map(n => n * 2)
```

左侧命令式、右侧函数式，增删行高亮，重构思路一目了然。

七、Magic Move 演示演进

用 {magic} 展示代码的逐步演化：

## 从循环到管道

```ts {magic}
// 第一步：循环实现
function pickOdd(nums: number[]) {
  const result = []
  for (const n of nums) {
    if (n % 2 !== 0) result.push(n)
  }
  return result
}
```

```ts {magic}
// 第二步：filter 管道
function pickOdd(nums: number[]) {
  return nums.filter(n => n % 2 !== 0)
}
```

点击切换，循环代码平滑变形为 filter 管道，演示代码演进过程。

八、组合交互页

自定义组件与 Monaco 同屏，形成"代码 + 结果"组合：

# 演示控制台

<ResultPanel :initial="5" />

```monaco-run
// 计算结果并手动检查
const squared = (x) => x * x
console.log('5 的平方：', squared(5))
```

左侧面板实时交互，右侧代码现场运行，观众同时获得"改"与"看"两种体验。

九、能力总览

能力	使用位置	效果
自定义组件	ResultPanel	按钮交互、状态变化
内置组件	Chart / YouTube	图表与视频
monaco 编辑	纯函数页	可编辑代码
monaco-run	管道页	现场运行
monaco-diff	重构页	差异对比
Magic Move	演进页	代码变形动画

十、验证与发布

• 检查组件是否自动注册并正常交互
• 逐页验证 Monaco 编辑、运行、差异与 Magic Move
• 网络资源（YouTube）在离线环境需替换为本地资源
• 导出 PDF 时交互功能不可用，需保留在线演示

pnpm build

这份演示覆盖了第 5 周全部能力：自定义组件、内置组件、Monaco 三模式（编辑/运行/差异）、Magic Move 演进。交互能力让演示从"单向讲解"变成"双向体验"，是技术分享的进阶形态。