前言：PPTist 是一款基于 Vue3.x + TypeScript 构建的开源的PPT在线编辑器，功能很齐全，体验感很好，下载运行也很方便，没有奇奇怪怪的报错，分享给大家，以后可能会出系列！

下载运行就不说了，很简单方便，而且没有报错。

界面很简洁美观

另外项目目录也比较清晰，就是传统的 Vue3 项目。学习一个开源项目，最好的学习方式是从某一个功能入手，这一篇咱们就来看一个简单的功能吧，就是【添加幻灯片】功能。
先全局搜索一下 “添加幻灯片”
在src/views/Editor/Thumbnails/index.vue 文件中，点击按钮的时候会触发 src/hooks/useSlideHandler.ts 中的 createSlide 方法，用来创建一个空白页并添加到下一页。

// 创建一页空白页并添加到下一页
const createSlide = () => {const emptySlide: Slide = {id: nanoid(10), // 10位随机数作为幻灯片IDelements: [],background: {type: 'solid',color: theme.value.backgroundColor,},}// 创建新页面后，将当前选中元素ID列表清空mainStore.setActiveElementIdList([])// 添加新页面slidesStore.addSlide(emptySlide)// 添加快照addHistorySnapshot()
}

src/store/slides.ts

addSlide(slide: Slide | Slide[]) {const slides = Array.isArray(slide) ? slide : [slide]for (const slide of slides) {if (slide.sectionTag) delete slide.sectionTag}// 将新页面添加到当前页面之后const addIndex = this.slideIndex + 1this.slides.splice(addIndex, 0, ...slides)this.slideIndex = addIndex
},

可以看到幻灯片其实是一个数组，逻辑还挺容易看懂的。
然后幻灯片的展示使用的是 Draggable 组件，这个组件是第三方的依赖

import Draggable from 'vuedraggable'

vuedraggable

另外存储数据使用的是 pinia
卡哇伊的标志

寓意着store中可以存储着多个对象，但是它们的根部又紧密相连~~~~~~