实战：语法全功能演示文稿

本章把第 2 周学习的全部能力——公式、图表、MDC、样式、导入、图标图片——组合成一份完整的演示文稿。以一个"算法复杂度分析"技术分享为题材串联所有特性。

一、项目初始化

pnpm create slidev syntax-demo
cd syntax-demo
pnpm dev

二、全局配置与拆分导入

设计项目结构，采用"主文件编排 + 章节拆分"：

syntax-demo/
├── slides.md
├── public/
│   └── complexity.png        # 复杂度曲线图（本地图片）
└── pages/
    ├── intro.md              # 开场章节
    ├── main.md               # 正文章节
    └── ending.md             # 收尾章节

slides.md 主文件：

---
theme: seriph
title: 算法复杂度分析
lineNumbers: true
katex: true
---

# 算法复杂度分析

::icon{name="mdi:chart-line" class="w-10 h-10"}

---

---
src: ./pages/intro.md
---

---
src: ./pages/main.md
---

---
src: ./pages/ending.md
---

三、开场章节：图标 + 样式

pages/intro.md 使用图标、Scoped CSS 与列表：

---
layout: center
---

<style scoped>
.title {
  font-size: 2.5rem;
  color: #42b883;
}
</style>

# ::icon{name="mdi:rocket"} 开场

::div{class="title"}

为什么要关心复杂度？

::

- 预测算法在大数据规模下的表现
- 指导数据结构与算法选型
- 面试与工程评估的基本功

<!--
讲点：开场用图标吸引注意，标题带品牌色，列出学习目标。
-->

四、正文章节：公式 + 图表 + 代码

pages/main.md 依次编排公式、图表、代码与 MDC 点击动画：

## 大 O 记号定义

$$
f(n) = O(g(n)) \iff \exists c, n_0 > 0 \text{，使得 } f(n) \le c \cdot g(n), \forall n \ge n_0
$$

---

## 常见复杂度对比

```mermaid
flowchart LR
    A[O(1) 常数] --> B[O(log n) 对数]
    B --> C[O(n) 线性]
    C --> D[O(n log n)]
    D --> E[O(n^2) 平方]
    E --> F[O(2^n) 指数]

::v-click

从 O(n log n) 到 O(n^2) 是分水岭，工程上要避免平方级算法。

::

---

代码示例

int sum(int n) {
    int total = 0;
    for (int i = 0; i < n; i++) total += i;
    return total;
}

该循环的时间复杂度是 O(n)：

$$ T(n) = \sum_{i=0}^{n-1} 1 = n $$

---

复杂度曲线

::v-img

::v-click

规模超过 10 万后，平方级算法耗时不可接受。

::

## 五、收尾章节：总结与致谢

`pages/ending.md` 使用状态图与 MDC 卡片：

```markdown
---
layout: center
---

# 总结

```mermaid
stateDiagram-v2
    [*] --> 分析算法
    分析算法 --> 得出复杂度
    得出复杂度 --> 选择方案
    选择方案 --> [*]

::div

::div

公式：KaTeX 渲染

::

::div

图表：Mermaid 驱动

::

::

## 六、运行与检查

浏览器中逐页验证各能力：

| 页面 | 验证点 |
|------|--------|
| 开场 | 图标渲染、Scoped CSS 生效、点击显示标题 |
| 大 O 定义 | KaTeX 块级公式居中渲染 |
| 复杂度对比 | Mermaid 流程图 + v-click 强调文字 |
| 代码示例 | 行号与逐行高亮、公式与代码呼应 |
| 复杂度曲线 | 本地图片加载、点击出现结论 |
| 收尾 | 状态图 + 卡片布局 + 备注可见 |

按 `S` 键打开演讲者模式，确认备注在各页正常显示。

## 七、构建发布

```bash
pnpm build

产物在 dist/。由于使用了远程图标（Iconify 运行时加载），部署后可正常访问；若需离线，可改用本地化图标或预下载资源。

八、能力对照清单

能力	使用位置	完成
LaTeX 公式	大 O 定义、复杂度推导	✅
Mermaid 图表	复杂度流程、状态图	✅
MDC 语法	图标、卡片、点击动画	✅
Scoped CSS	标题配色、卡片背景	✅
拆分导入	三个章节文件	✅
图标与图片	icon 组件、本地图片	✅

这份演示文稿综合了第 2 周的全部语法能力，可作为后续制作任何技术分享的基础模板：公式讲推导、图表讲结构、代码讲实现、样式定风格。