前言

为熟悉腾讯文档前端技术栈,决定做一个腾讯文档中PPT模块的简易版.

需求分析

主要实现以下几点功能

  • 新建,删除PPT页
  • 文字编辑,图形编辑,图片插入
  • 播放

技术选型

  • Electron:用Web技术开发桌面端应用的框架
  • React: UI框架
  • electron-vite:脚手架
  • React-konva, Konva: 2DCanvas工具

开发流程

搭建项目

1
pnpm create @quick-start/electron

安装React-devtools

使用electron-devtools-installer

官网

1
pnpm add electron-devtools-installer -D

初步UI

  • 一个工具栏
    • 文字
    • 画笔
    • 橡皮
    • 正方形
    • 圆
    • 插入图片
  • 一个侧边栏
    • 显示多个画布,可以拖动排序和点击切换
  • 一个画布