开源分享 | 在线图片编辑器，支持PSD解析、AI抠图等，基于Puppeteer生成图片

git clone https://github.com/palxiao/poster-design.git

cd poster-design

npm run prepared  # 快捷安装依赖指令

npm run serve     # 本地运行

├── App.vue
├── api // 请求接口管理
├── assets
|  ├── data // 数据资源
|  ├── fonts // 本地字体资源
|  └── styles // CSS 样式文件
├── common // 存放一些公共方法，例如上传下载、弹窗提示等
|  ├── hooks
|  └── methods
├── components
|  ├── business // 放置业务组件
|  |  ├── cropper // 裁剪（暂时弃用）
|  |  ├── image-cutout // 抠图
|  |  ├── moveable // 操作插件
|  |  ├── picture-selector // 照片库弹窗选择
|  |  ├── qrcode // 二维码插件
|  |  ├── right-click-menu // 右键菜单
|  |  └── save-download // 保存下载弹窗
|  ├── common // 公共组件
|  |  ├── PopoverTip.vue // 气泡提示组件
|  |  ├── ProgressLoading // 百分比进度条
|  |  └── Uploader // 上传组件
|  └── modules // 核心模块
|     ├── index.ts
|     ├── layout
|     |  ├── designBoard.vue // 主界面
|     |  ├── lineGuides.vue // 网格（弃用，由moveable提供辅助线功能）
|     |  ├── sizeControl.vue // 元素操作组件（弃用，由moveable代理）
|     |  └── zoomControl.vue // 缩放画布
|     ├── panel // 该目录下的所有文件自动导入项目中
|     |  ├── components
|     |  ├── stylePanel.vue // 右侧属性编辑面板
|     |  ├── widgetPanel.vue // 左侧功能菜单面板
|     |  └── wrap
|     |     ├── BgImgListWrap.vue // 背景选择面板
|     |     ├── PhotoListWrap.vue // 照片面板
|     |     ├── TempListWrap.vue // 模板列表
|     |     ├── ToolsListWrap.vue // 工具面板
|     |     ├── UserWrap.vue // 我的资源作品面板
|     |     ├── GraphListWrap.vue // 素材面板
|     |     ├── CompListWrap.vue // 组合列表（目前主要是文字组合）
|     |     └── TextListWrap.vue // 文字面板
|     ├── settings // 放置操作面板下的一些组件
|     |  ├── EffectSelect // 效果选择（未开发）
|     |  ├── colorSelect.vue // 颜色选择
|     |  ├── iconItemSelect.vue // icon选择
|     |  ├── numberInput.vue // 数字输入
|     |  ├── numberSlider.vue // 数字拖拉
|     |  ├── textInput.vue // 文字输入
|     |  ├── textInputArea.vue // 文字域输入
|     |  └── valueSelect.vue // 下拉选择
|     └── widgets // 该目录下的所有文件自动导入项目中
|        ├── pageStyle.vue // 背景/页面设置
|        ├── wGroup // 组合
|        |  ├── wGroup.vue
|        |  └── wGroupStyle.vue // 对应右侧面板的操作
|        ├── wImage // 图片
|        |  ├── components
|        |  |  └── innerToolBar.vue
|        |  ├── wImage.vue
|        |  └── wImageStyle.vue // 对应右侧面板的操作
|        ├── wQrcode // 二维码
|        |  ├── wQrcode.vue
|        |  └── wQrcodeStyle.vue // 对应右侧面板的操作
|        ├── wSvg // 矢量图
|        |  ├── wSvg.vue
|        |  └── wSvgStyle.vue // 对应右侧面板的操作
|        └── wText // 文字
|           ├── wText.vue
|           └── wTextStyle.vue // 对应右侧面板的操作
├── config.ts // 公共配置
├── main.ts // 项目入口文件
├── mixins // 一些公共混合代码，考虑优化
|  ├── methods
|  |  ├── DealWithCtrl.ts
|  |  └── keyCodeOptions.ts
|  ├── mouseDragging.ts
|  ├── move.ts
|  └── shortcuts.ts
├── router // vue 路由
|  ├── .....
├── store // Vuex 状态管理器
|  ├── index.ts
|  └── modules
|     ├── base
|     |  ├── .......
|     └── design
|        ├── .......
├── types // TS类型配置
|  ├── .......
├── utils // 工具函数目录
|  ├── axios.ts
|  ├── index.ts
|  ├── plugins
|  |  ├── cssLoader.ts // 异步加载css
|  |  ├── modules.ts // 全局加载公共组件
|  |  ├── pointImg.ts // 图片点位颜色，测试中
|  |  ├── preload.ts // 加载资源
|  |  └── psd // 设计稿解析
|  ├── utils.ts
|  └── widgets
|     └── elementConfig.ts // 配置全局默认导入的element组件
└── views // 页面目录
   ├── Draw.vue // 绘制页
   ├── Index.vue // 编辑页（首页）
   ├── Psd.vue // PSD解析页
   └── components