---
name: component-slide
description: Slide container component - canvas size, padding safe zone, height constraints, speaker notes
---

# Slide 组件规范

Slide 是用于创建演示文稿幻灯片的容器组件，继承自 Box 组件，提供灵活的布局和样式定制，支持构建各种风格的页面布局。

## 核心属性

Slide 继承 Box 组件的所有属性，具体属性说明请参考 Box 组件规范。

## 布局与样式

- **默认布局**: `width: '1280px', height: '720px'`
- **样式支持**: 支持所有 CSS 属性，通过 style 对象设置

## 画布规格与排版规划

- **画布尺寸**：1280 x 720 像素（16:9 宽屏比例）
- **文件组织**：每页 = 一个 `.jsx` 文件，文件名格式为 `XX_{slug}.jsx`（例如 `01_cover.jsx`, `03_market_analysis.jsx`）。其中 `{slug}` 是页面内容的简单英文描述（snake_case）。
- **演讲者备注（Speaker Notes / notes）**：
    - **默认不写**。每页的 `<Slide>` 省略 `notes` 属性即可。
    - **仅当**用户在初始澄清阶段明确要求（如"每页带演讲稿 / 附讲者备注 / notes"）时，才按下列规范写入：
        - 通过 `<Slide notes={`...`}>` 传入，推荐使用模板字符串（反引号）以支持多段落。
        - `notes` 必须是**自然的现场逐字演讲稿**（≤300字），**严禁**出现"这一页展示了/本页聚焦于/下图描述了/接下来进入/建议先…/讲的时候可以…"等对 PPT 的元描述、过渡语或指导性语言。
        - 必须用**第一人称**直接讲观点（我/我们），并自然补充页面未完全展开的背景、原理、数据或例子。
        - 若出现"第一/第二/1./2./首先/其次"等分点逻辑，**必须换行分段**，避免堆在同一段。
- **文件语法限制**：不允许出现 `import` / `export` / `module` 等模块相关语句（即整页按"纯组件标签内容"输出）
- **导出规范**：文件中最后一个表达式必须是 `<Slide>` 组件（不要在其后再追加其他组件标签 / 变量声明 / 导出等表达式）
- **内容占比**：建议内容占比 30%-85%。

## 高度约束（强制）

- Slide 高度**固定为 720px**，内容**绝对不允许溢出**
- 在编写代码前，**必须计算**总高度：`上padding + 标题区高度 + 内容区高度 + 各间距(gap/margin) + 下padding ≤ 720px`
- 如果使用 `height` 属性明确指定子元素高度，必须确保所有高度累加后不超过 720px
- **禁止**在主内容区域使用 `flex: 1` 且不计算实际高度的做法
- 优先使用相对单位（百分比）或精确计算的固定值

## 安全区域（强制）

- Slide 的 `padding` 值定义了页面安全区，**必须保留**，不能用绝对定位绕过
- 内容区域可用高度 = `720px - 上padding - 下padding`
- 所有内容必须在安全区域内，确保视觉完整性

## 布局验证清单（生成前必须检查）

1. ✅ 已计算总高度：`上padding + 标题区高度 + 内容区高度 + 各间距(gap/margin) + 下padding ≤ 720px`
2. ✅ Slide `padding` 已保留为页面安全区（不得被绝对定位绕过）
3. ✅ 内容区域高度已验证：`内容区高度 ≤ 720px - 上padding - 下padding`
4. ✅ 如使用固定高度，已验证不会溢出可用内容高度
5. ✅ 背景装饰元素可用绝对定位，但不影响内容布局、不占用安全区
6. ✅ 依照板式规划器（layout planning）的 `blocks` 生成页面时：每个区块应有对应的"容器 Box"，并且建议为容器设置背景（纯色或半透明）以增强分区感、可读性与层次

## 最佳实践

- 优先使用 style 属性进行样式定制，而非内联样式
- 结合 Box 和 Text 等子组件构建复杂的布局结构
- 考虑幻灯片的整体视觉一致性，确保颜色和字体搭配协调
- 使用 flex 布局实现响应式设计，避免绝对定位导致的布局问题