目录 <Agenda />
左侧标题与导语,右侧 3–6 行章节目录:编号、图标、章节名、一句说明和起始页码。每行都是跳转按钮。
Template and style descriptions are currently available in Chinese only.
- Group
- 导航 · 封面之后
- Component
Agenda·#agenda- Interaction
- 悬停一行:背景变亮,图标格换成强调底色并轻微旋转,箭头右移;点击跳到该章第一页。
Good for
- 15 页以上、分成几章的演示
- 想让听众先看到全貌,或者演讲中途要跳回某一章
Avoid when
- 10 页以下的短演示:目录本身就占了一成篇幅
- 章节只有 2 个:直接在封面导语里说
Content limits
| 1 | items 3–6 项,顺序与演示一致 |
| 2 | title ≤ 10 字;body 一行,≤ 26 字 |
| 3 | page 是章节第一页的页码(从 1 开始),改动页序后记得同步 |
| 4 | meta ≤ 20 个字符,例如“27 页 · 4 章” |
| 5 | 没有 source 字段:目录不陈述事实 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 通常是“目录” |
title · required | string | string[] | 页面标题 |
lead | string | 导语,≤ 60 字 |
items · required | { icon, title, body, page }[] | icon 取自图标索引 |
meta | string | 左下角的小字 |
hint | ReactNode | 默认“点击任一章节直接跳转” |
Example
<Agenda
kicker="目录"
title={['四章,', '从原理到行动']}
meta="27 页 · 4 章"
items={[
{ icon: 'brain', title: '认识 GEO', body: 'GEO 是什么,AI 回答怎样拼出来', page: 3 },
{ icon: 'routing', title: '让 AI 读得到', body: '爬虫、渲染、摘要控制与结构化数据', page: 9 },
{ icon: 'map', title: '国内平台与合规', body: '各平台的信源偏好与监管时间线', page: 16 },
]}
/>