xiezipei/pptist

基于 Vue3.x + TypeScript 的在线演示文稿应用。实现PPT幻灯片的在线编辑、演示。

🎨 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