组件说明

PocketSlide 提供三个核心组件：SlidesViewer、CoverSlide 和 ContentSlide。

目录结构

src/modules/slides/
├── components/
│   ├── SlidesViewer.tsx  - 幻灯片查看器容器
│   ├── CoverSlide.tsx    - 封面幻灯片组件
│   ├── ContentSlide.tsx - 内容幻灯片组件
│   └── Logo.tsx          - Logo 组件
└── example/              - 示例目录

SlidesViewer

幻灯片查看器组件，用于包裹所有幻灯片页面，是整个演示文稿的容器。

基本用法

import SlidesViewer from '@/modules/slides/components/SlidesViewer';
import CoverSlide from './CoverSlide';
import ContentSlide from './ContentSlide';

export default function Index() {
  return (
    <SlidesViewer>
      <CoverSlide title="封面标题" subtitle="副标题" />
      <ContentSlide title="第一页">
        <p>内容...</p>
      </ContentSlide>
      <ContentSlide title="第二页">
        <p>更多内容...</p>
      </ContentSlide>
    </SlidesViewer>
  );
}

Props

属性	类型	默认值	说明
children	React.ReactNode[]	-	幻灯片内容数组
className	string	-	自定义样式类
showNavigation	boolean	true	是否显示导航按钮
onSlideChange	(index: number) => void	-	翻页回调函数
backgroundImage	string	-	全局背景图片 URL
backgroundOpacity	number	50	背景透明度，0-100
backgroundBlur	number	0	背景模糊程度，单位 px
logoSrc	string	/logo.svg	Logo 图片路径

全局背景设置

通过 SlidesViewer 设置的背景会被所有幻灯片继承：

<SlidesViewer
  backgroundImage="https://example.com/bg.jpg"
  backgroundOpacity={20}
  backgroundBlur={4}
>
  <YourSlide />
</SlidesViewer>

Logo 设置

通过 logoSrc 属性统一设置所有幻灯片的 logo：

<SlidesViewer logoSrc="/custom-logo.svg">
  <YourSlide />
</SlidesViewer>

CoverSlide

封面幻灯片组件，适用于标题页、首页、尾页等场景。

基本用法

import CoverSlide from '@/modules/slides/components/CoverSlide';

<CoverSlide
  title="幻灯片标题"
  subtitle="副标题"
  author="作者"
  date={new Date().toLocaleDateString()}
/>

完整示例

import CoverSlide from '@/modules/slides/components/CoverSlide';

export default function MyCover() {
  return (
    <CoverSlide
      title="吉林省应急管理"
      subtitle="智慧应急 科技赋能"
      author="应急管理厅"
      date={new Date()}
      backgroundImage="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1920&q=80"
      backgroundOpacity={20}
    />
  );
}

Props

属性	类型	说明
title	string	主标题
subtitle	string	副标题
author	string	作者
date	string	日期
className	string	自定义样式类
backgroundImage	string	背景图片 URL
backgroundOpacity	number	背景透明度，0-100，默认 50
backgroundBlur	number	背景模糊程度，单位 px，默认 0

ContentSlide

内容幻灯片组件，适用于正文页，支持任意 React 内容。

基本用法

import ContentSlide from '@/modules/slides/components/ContentSlide';

<ContentSlide title="页面标题">
  <div className="space-y-4">
    <h3>内容标题</h3>
    <p>这里是具体内容...</p>
  </div>
</ContentSlide>

完整示例

import ContentSlide from '@/modules/slides/components/ContentSlide';

export default function MyContent() {
  return (
    <ContentSlide title="项目成果">
      <div className="grid grid-cols-3 gap-4">
        <div className="p-4 rounded-lg border bg-card">
          <h4>成果一</h4>
          <p>成果描述</p>
        </div>
        <div className="p-4 rounded-lg border bg-card">
          <h4>成果二</h4>
          <p>成果描述</p>
        </div>
        <div className="p-4 rounded-lg border bg-card">
          <h4>成果三</h4>
          <p>成果描述</p>
        </div>
      </div>
    </ContentSlide>
  );
}

Props

属性	类型	说明
title	string	页面标题
children	React.ReactNode	内容区域
className	string	自定义样式类
backgroundImage	string	背景图片 URL
backgroundOpacity	number	背景透明度，0-100，默认 50
backgroundBlur	number	背景模糊程度，单位 px，默认 0

Logo 组件

Logo 组件用于在幻灯片中显示品牌标识。

组件位置

src/modules/slides/components/Logo.tsx

基本用法

import Logo from '@/modules/slides/components/Logo';

// 默认用法
<Logo />

// 自定义样式
<Logo className="w-12 h-12" />

// 自定义图片
<Logo src="/custom-logo.png" />

Props

属性	类型	说明
className	string	自定义样式（如位置、大小）
src	string	logo 图片路径（可选）

Context 机制

SlidesViewer 使用 React Context 提供 logoSrc，CoverSlide 和 ContentSlide 通过 useLogoSrc() hook 获取值。如果在 SlidesViewer 中设置了 logoSrc，则会覆盖 Logo 组件的默认 src。

组合使用示例

import SlidesViewer from '@/modules/slides/components/SlidesViewer';
import CoverSlide from '@/modules/slides/components/CoverSlide';
import ContentSlide from '@/modules/slides/components/ContentSlide';
import MySlide1 from './MySlide1';
import MySlide2 from './MySlide2';

export default function MyPresentation() {
  return (
    <SlidesViewer
      backgroundImage="https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=1920&q=80"
      backgroundOpacity={10}
      logoSrc="/logo.svg"
    >
      <CoverSlide
        title="我的演示"
        subtitle="这是一个示例"
        author="作者"
        date={new Date().toLocaleDateString()}
      />
      <ContentSlide title="第一页">
        <p>内容...</p>
      </ContentSlide>
      <MySlide1 />
      <MySlide2 />
    </SlidesViewer>
  );
}