今天为大家介绍的是一款基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用，还原了大部分 Office PowerPoint 常用功能，支持 文字、图片、形状、线条、图表、表格、视频、音频、公式 几种最常用的元素类型，每一种元素都拥有高度可编辑能力，同时支持丰富的快捷键和右键菜单，力求还原桌面应用级体验。通过使用我们可以发现这个平台更加适用于想要有【Web 幻灯片】开发需求的开发者。如果你只是需要一个服务或工具，可以选择更优秀和成熟的产品。

在线演示地址：
https://pipipi-pikachu.github.io/PPTist/

源码地址：
https://github.com/pipipi-pikachu/PPTist

项目运行

npm install

npm run serve

功能列表

基础功能

• 历史记录（撤销、重做）
• 快捷键
• 右键菜单
• 导出本地文件（PPTX、JSON、图片、PDF）
• 导入导出特有 .pptist 文件
• 打印

幻灯片页面编辑

• 页面添加、删除
• 页面顺序调整
• 页面复制粘贴
• 背景设置（纯色、渐变、图片）
• 设置画布尺寸
• 网格线
• 标尺
• 画布缩放、移动
• 主题设置
• 幻灯片备注
• 幻灯片模板
• 翻页动画
• 元素动画（入场、退场、强调）
• 选择面板（隐藏元素、层级排序、元素命名）
• 查找/替换

幻灯片元素编辑

• 元素添加、删除
• 元素复制粘贴
• 元素拖拽移动
• 元素旋转
• 元素缩放
• 元素多选（框选、点选）
• 多元素组合
• 多元素批量编辑
• 元素锁定
• 元素吸附对齐（移动和缩放）
• 元素层级调整
• 元素对齐到画布
• 元素对齐到其他元素
• 多元素均匀分布
• 拖拽添加图文
• 粘贴外部图片
• 元素坐标、尺寸和旋转角度设置
• 元素超链接（链接到网页、链接到其他幻灯片页面）

文字

• 富文本编辑（颜色、高亮、字体、字号、加粗、斜体、下划线、删除线、角标、行内代码、引用、超链接、对齐方式、序号、项目符号、段落缩进、清除格式）
• 行高
• 字间距
• 段间距
• 首行缩进
• 填充色
• 边框
• 阴影
• 透明度
• 竖向文本

图片

• 裁剪（自定义、按形状、按纵横比）
• 滤镜
• 着色（蒙版）
• 翻转
• 边框
• 阴影
• 替换图片
• 重置图片
• 设置为背景图

形状

• 绘制任意多边形
• 替换形状
• 填充色
• 边框
• 阴影
• 透明度
• 翻转
• 形状格式刷
• 编辑文字（支持富文本，与文字元素的富文本编辑功能近似）

线条

• 颜色
• 宽度
• 样式
• 端点样式

图表（柱状图、条形图、折线图、面积图、散点图、饼图、环形图）

• 图表转换
• 数据编辑
• 背景填充
• 主题色
• 坐标系与坐标文字颜色
• 其他图表设置
• 边框
• 图例

表格

• 行、列添加删除
• 主题设置（主题色、表头、汇总行、第一列、最后一列）
• 合并单元格
• 单元格样式（填充色、文字颜色、加粗、斜体、下划线、删除线、对齐方式）
• 边框

视频

• 预览封面设置

音频

• 图标颜色
• 自动播放
• 循环播放

公式

• LaTeX编辑
• 颜色设置
• 公式线条粗细设置

幻灯片放映

• 全部幻灯片预览
• 画笔、黑板工具
• 计时器工具
• 激光笔
• 自动放映
• 演讲者视图

移动端

• 基础编辑页面添加、删除、复制、备注、撤销重做插入文字、图片、矩形、圆形元素通用操作：移动、缩放、旋转、复制、删除、层级调整、对齐元素样式：文字（加粗、斜体、下划线、删除线、字号、颜色、对齐方向）、填充色
• 基础预览
• 播放预览