实战：主题与布局综合演示文稿

本章把第 4 周的主题与布局能力组合成完整演示，题材为"微服务架构分享"。通过多种布局与自定义主题，演示专业的产品级视觉。

一、选择主题与初始化

pnpm create slidev architecture-deck
cd architecture-deck

使用 seriph 主题并配置全局基调：

---
theme: seriph
title: 微服务架构分享
transition: fade
addons:
  - slidev-addon-qrcode
---

二、封面与章节：cover / section 布局

---
layout: cover
---

# 微服务架构演进

从单体到云原生的实践之路

---

---
layout: section
---

# 第一部分

为什么要微服务

---

# 第二部分

微服务的关键设计

• 封面用 cover 布局
• 章节分隔用 section 布局
• 正文页用默认 default 布局

三、正文：default + fact 布局

## 单体架构的痛点

- 代码耦合，改动相互影响
- 团队协作效率低
- 扩展性受限

---

---
layout: fact
---

# 10 倍

团队交付速度提升

---

## 微服务的定义

按业务能力拆分为独立可部署的服务。

fact 布局用大数字强调核心指标，穿插在正文页之间制造节奏变化。

四、对比：two-cols 与插槽

---
layout: two-cols
---

## 单体

- 单一部署单元
- 共享数据库
- 简单直接

::right::

## 微服务

- 独立部署
- 服务自治
- 复杂度更高

---

用 ::right:: 把对比内容切到右栏，左右对照清晰。

五、图文：image 布局

---
layout: image
image: /architecture.png
---

# 总体架构

- API 网关统一入口
- 服务注册与发现
- 配置中心统一管理

---

# 部署拓扑

（继续正文，图片布局只作用于上一页）

图文布局让架构图与讲解文字同屏。

六、自定义布局：数据卡片

创建 layouts/stats.vue：

<template>
  <div class="stats">
    <div class="number">{{ number }}<span class="unit">{{ unit }}</span></div>
    <div class="content"><slot /></div>
  </div>
</template>

<script setup>
defineProps({
  number: { type: String, default: '0' },
  unit: { type: String, default: '' },
})
</script>

<style>
.stats {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.number {
  font-size: 6rem;
  color: var(--slidev-theme-primary);
}
</style>

在文稿中使用：

---
layout: stats
number: 99.99
unit: %
---

# 系统可用性目标

七、主题覆盖与自定义

用全局样式覆盖主题细节，形成自己的品牌色：

<style global>
:root {
  --slidev-theme-primary: #2563eb;
  --slidev-theme-secondary: #1e40af;
}
h1 {
  font-weight: 700;
}
</style>

覆盖不影响主题整体结构，只调整关键视觉变量。

八、插件集成

使用二维码插件在结尾页分享资料：

npm install slidev-addon-qrcode

---
layout: center
---

# 感谢聆听

::qr-code{text="https://example.com/slides" size="220"}

扫码获取完整幻灯片

::

九、布局使用总览

页面	布局	能力
封面	cover	主题封面
章节	section	章节分隔
正文	default	常规内容
指标	fact	大数字强调
对比	two-cols + ::right::	左右分栏
图文	image + image:	配图讲解
自定义数据页	stats（自定义）	自定义布局 + props
结尾	center + 二维码插件	插件集成

十、验证与发布

• 逐页检查布局是否正确、插槽内容到位
• 切换主题（改为 default）观察整体风格变化
• 确认插件组件正常渲染
• 无网络环境时，二维码插件引用资源需本地化

pnpm build

这份演示覆盖了第 4 周全部能力：内置布局混用、插槽分栏、自定义布局组件、主题配置与覆盖、插件集成。布局与主题共同构成演示的"视觉系统"，让内容以专业、统一的方式呈现。