🎨 PPTist

一个基于 Vue3.x + TypeScript 的在线演示文稿应用，还原了大部分PPT常用功能，支持文字、图片、形状、线条、图表、表格 6种最常用的元素类型，每一种元素都拥有高度可编辑能力，同时支持丰富的快捷键和右键菜单，尽可能还原本地桌面应用的使用体验。

你可以对它进行二次开发，打造属于自己的在线演示文稿应用或者在线设计工具（二次开发文档正在编写中）。

在线体验地址（优先更新）：https://www.pptist.cn/

如果网络状态不佳，可以访问国内镜像：https://pptist.gitee.io/

Github仓库：https://github.com/pipipi-pikachu/PPTist

🚀 项目运行

npm install

npm run serve

📜 功能列表

通用功能

历史记录
快捷键
右键菜单
主题设置

幻灯片页面编辑

页面添加、删除
页面顺序调整
页面复制粘贴
背景设置（纯色、渐变、图片）
网格线

幻灯片元素编辑

元素添加、删除
元素复制粘贴
元素拖拽移动
元素旋转
元素缩放
元素多选（框选、点选）
多元素组合
元素锁定
元素吸附对齐（移动和缩放）
元素层级调整
元素对齐到画布
元素对齐到其他元素
拖拽添加图文
粘贴外部图片
元素坐标、尺寸和旋转角度设置

文字

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

图片

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

形状

填充色
边框
阴影
透明度
翻转

线条

颜色
宽度
样式
端点样式

图表（柱状图、折线图、饼图）

数据编辑
背景填充
主题色
坐标系与坐标文字颜色
其他设置（柱状图转条形图、折线图转面积图、折线图转散点图、饼图转环形图、折线图开关平滑曲线）
边框

表格

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

幻灯片放映

翻页动画
元素入场动画
全部幻灯片预览
画笔工具

💡 常见问题

Q. 为什么xxx快捷键没有作用？

A. 部分快捷键需要聚焦到指定区域才会生效，例如焦点在左边缩略图列表才能使用操作页面的快捷键，焦点在画布区域才能使用操作元素的快捷键。

Q. 为什么粘贴没有作用？

A. 请注意允许浏览器访问系统剪贴板。

Q. 为什么浏览器刷新或重新打开后，之前做的PPT没有了？

A. 该演示项目是纯前端部署的，不会保存数据。

Q. 如何调整幻灯片页面的顺序？

A. 按住左侧缩略图可进行拖拽调整顺序。

Q. 为什么插入图片后会出现操作卡顿的情况？

A. 由于本演示项目不依赖后端，插入本地图片实际引用的是Base64，导致数据体积非常大，在真正的生产环境中应该上传图片后引用图片地址，就不会出现这样的情况了。

Q. 为什么应用预置主题后没有效果？

A. 设置预置主题的作用是使新添加的元素和页面应用主题样式，不会对已有的元素和页面生效（字体颜色除外），您可以使用“应用主题到全部”功能，将当前主题应用到当前全部页面中。

🔧 项目依赖

ant-design-vue -- UI库

lodash -- 工具库

prosemirror -- 富文本编辑框架，用于文本元素的富文本编辑

chartist -- svg图表库，用于图表元素

tinycolor2 -- 颜色处理工具

dexie -- indexedDB 包装器，用于记录历史操作

mitt -- 自定义事件发射/监听

animate.css -- CSS动画库

vuedraggable -- 基于vue的拖拽插件，用于调整页面顺序等

crypto-js -- 加密函数库，用于加解密剪贴板内容

clipboard -- 用于复制内容到剪贴板

icon-park -- 图标库

开源协议

MIT License

qihang12138 / PPTist