## © 版权说明
1. 本项目基于 **Apache License 2.0 协议**，可免费使用，如需商用，请联系作者获取授权；
2. 项目在架构上，借鉴了 [canvas-editor](https://hufe.club/canvas-editor-docs/) 的优秀思想，但仅用于系统架构设计部分；
3. 项目在页面布局、静态svg、图标上，直接或间接使用了[PPTist](https://pipipi-pikachu.github.io/PPTist/)的资源，感谢原作者;
4. **如果发现项目侵权部分，请及时联系删除**，其他依赖均为开源项目，请查看对应开源项目的许可证，若因此产生的版权纠纷，作者概不负责。
## 📖 项目简介
1. Unite PowerPoint，是基于 Konva（canvas渲染方案）的 Web 在线演示文稿（幻灯片）编辑器；
2. 项目力争还原大部分 Office PowerPoint 常用功能，支持文字、图片、多媒体资源、形状、折线、统计图、表格、公式等常见元素类型，支持在 Web 端实现幻灯片的编辑、预览、导出、分享、协作等功能；
3. 为满足不同用户群体的需求，不仅提供了 npm 包，支持在 Vue、React、H5 等前端框架中使用，还提供了完整的项目源码，可快速搭建在线演示文稿项目；
4. 本项目开箱即用，拥有完整的官方 API 文档，方便开发者二次开发；
5. 同类优秀产品：[PPTist](https://pipipi-pikachu.github.io/PPTist/)、[Slidev](https://sli.dev/)、[revealjs](https://revealjs.com/) 等（**排名不分先后**）。
## 🚀 项目运行
```bash
### 下载依赖
npm install
### 运行项目
npm run dev
### 打包项目
npm run build ## 打包成项目类型
npm run lib ## 打包成库类型
```
## 💼 项目依赖
```json
"devDependencies": {
"eslint": "^9.9.0", // eslint 语法检查器
"less": "^4.2.0", // less 预处理器
"typescript": "^5.5.4", // ts 编译器
}
"dependencies": {
"colorthief": "^2.4.0", // 图片主要颜色识别
"gsap": "^3.12.5", // 动画库
"html-to-image": "^1.11.11", // html 转图片
"konva": "^9.3.14", // konva 绘图库
"mathlive": "^0.101.0", // 公式编辑器
"pptxgenjs": "^3.12.0", // pptx 导出实现
"pptxtojson": "^1.0.3", // pptx 转 json（导入实现）
"quill": "^2.0.2", // 富文本编辑器
"vite": "^5.4.2", // vite 构建工具
"y-websocket": "^2.0.4", // Yjs 协同服务类型
"yjs": "^13.6.19",// Yjs 协同
},
```
## 📚 功能列表
**备注：✅ 为已实现功能，❌ 为未实现功能 📅 为计划实现功能**
#### 协同
- ✅ 新建幻灯片（ID、顺序一致性）
- ✅ 删除幻灯片
- ✅ 用户加入协同/用户离开通知协同
- ✅ 文件重命名协同
- ✅ 插入矩形协同
- ✅ 插入文本协同
- ✅ 文本更新协同（group dbclick handle）
- ✅ shape drag end 位置更新协同
- ✅ shape transformer 形变更新协同
- ✅ 配色方案切换协同
- ✅ 背景设置协同
- ❌ 禅模式（仅能个人操作做协同演示）
- ❌ 元素属性修改协同
- ❌ 切换动画协同
- ❌ 元素动画协同
- ❌ 撤销重做协同
#### 基础功能
- ✅ 历史记录（撤销、重做）
- ✅ 快捷键（系统快捷键、自定义快捷键）
- ✅ 右键菜单（支持画布菜单及元素菜单）
- ✅ 画布平移、缩放
- ✅ 自定义系统主题颜色（提供 :root 主题定制方案）
- ✅ 幻灯片设计（背景设置、网格设置、预设主题）
- ✅ PPTX文件导入导出
- ❌ PDF、图片、JSON 导入导出
#### 幻灯片页面编辑
- ✅ 幻灯片页面新增与删除
- ✅ 画布网格线
- ✅ 翻页动画
- ✅ 元素动画（入场、退场、强调）
- ✅ 幻灯片顺序调整（支持 API、拖拽方式实现）
- ✅ 幻灯片配色方案切换题
#### 幻灯片元素编辑
**基础功能**
- ✅ 元素添加、删除、拖拽、移动、旋转、缩放
- ✅ 元素多选、框选、单选
- ✅ 元素吸附对齐（移动和缩放）
- ✅ 元素属性设置（宽高、位置、边框、填充、文本等）
- ✅ 拖拽添加图文
- ✅ 元素复制粘贴
**文字**
- ✅ 普通文本编辑
- ✅ 富文本编辑
- ✅ 属性设置
**图片**
- ✅ 图片上传（本地上传、拖拽上传）
**线条**
- ✅ 直线、基础折线/曲线
- ✅ 线段吸附图形
- ✅ 线段跟随移动
- ✅ 属性设置
**统计图**
- ✅ 柱状体、折线图、饼图、雷达图
- ✅ 图表转换、图表配置
**表格**
- ✅ 表格数据编辑
- ✅ 动态增删行列
**公式**
- ✅ LaTex 公式编辑
- ✅ 直接编辑公式，所见即所得
#### 幻灯片放映
- ✅ 幻灯片预览(当前预览、从头预览)
- ✅ 屏幕录制
- ❌ 动画播放
## 📝 计划实现功能
- 📅 计划支持 图片裁剪（自定义、按形状、按纵横比）、滤镜、着色
- 📅 计划支持 元素超链接（链接到网页、链接到其他幻灯片页面）
- 📅 计划支持 元素组合、锁定、批量编辑
- 📅 计划支持 演讲者备注（富文本）
- 📅 计划支持 元素顶点编辑
- 📅 计划支持 支持渐变背景（幻灯片、元素、文本）
- 📅 计划支持 艺术字、内置文本样式
- 📅 计划支持 查找、替换
- 📅 计划支持 表格的合并、个性化定制功能
- 📅 计划支持 丰富元素基本类型、计划增加图标功能
- 📅 计划支持 统计图、表格 计划支持动态属性（根据某个幻灯片、表格的数据，动态渲染）
- 📅 计划支持 流程图工具（集成 Excalidraw ）
- 📅 计划支持 画笔工具（预览时，新增 canvas 实现画笔工具）
- 📅 计划支持 uniscript（允许用户编写相关程序，实现幻灯片功能）
## 🔗 相关资料
- [mathlive](https://cortexjs.io/mathlive/)
- [pptxtojson](https://github.com/pipipi-pikachu/pptxtojson)
- [PPTist Github](https://github.com/pipipi-pikachu/PPTist)
- [PPTist 体验地址](https://pipipi-pikachu.github.io/PPTist/)
- [基于 Konva 实现Web PPT 编辑器（一）](https://blog.csdn.net/weixin_47746452/article/details/141090611)
- [基于 Konva 实现Web PPT 编辑器（二）](https://blog.csdn.net/weixin_47746452/article/details/141227563)