git clone https://github.com/palxiao/poster-design.git
cd poster-design
npm run prepared  # 快捷安裝依賴指令
npm run serve     # 本地運行

├── App.vue
├── api // 請求接口管理
├── assets
|  ├── data // 數(shù)據(jù)資源
|  ├── fonts // 本地字體資源
|  └── styles // CSS 樣式文件
├── common // 存放一些公共方法，例如上傳下載、彈窗提示等
|  ├── hooks
|  └── methods
├── components
|  ├── business // 放置業(yè)務組件
|  |  ├── 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 // 網(wǎng)格（棄用，由moveable提供輔助線功能）
|     |  ├── sizeControl.vue // 元素操作組件（棄用，由moveable代理）
|     |  └── zoomControl.vue // 縮放畫布
|     ├── panel // 該目錄下的所有文件自動導入項目中
|     |  ├── components
|     |  ├── stylePanel.vue // 右側(cè)屬性編輯面板
|     |  ├── widgetPanel.vue // 左側(cè)功能菜單面板
|     |  └── wrap
|     |     ├── BgImgListWrap.vue // 背景選擇面板
|     |     ├── PhotoListWrap.vue // 照片面板
|     |     ├── TempListWrap.vue // 模板列表
|     |     ├── ToolsListWrap.vue // 工具面板
|     |     ├── UserWrap.vue // 我的資源作品面板
|     |     ├── GraphListWrap.vue // 素材面板
|     |     ├── CompListWrap.vue // 組合列表（目前主要是文字組合）
|     |     └── TextListWrap.vue // 文字面板
|     ├── settings // 放置操作面板下的一些組件
|     |  ├── EffectSelect // 效果選擇（未開發(fā)）
|     |  ├── colorSelect.vue // 顏色選擇
|     |  ├── iconItemSelect.vue // icon選擇
|     |  ├── numberInput.vue // 數(shù)字輸入
|     |  ├── numberSlider.vue // 數(shù)字拖拉
|     |  ├── textInput.vue // 文字輸入
|     |  ├── textInputArea.vue // 文字域輸入
|     |  └── valueSelect.vue // 下拉選擇
|     └── widgets // 該目錄下的所有文件自動導入項目中
|        ├── pageStyle.vue // 背景/頁面設(shè)置
|        ├── wGroup // 組合
|        |  ├── wGroup.vue
|        |  └── wGroupStyle.vue // 對應右側(cè)面板的操作
|        ├── wImage // 圖片
|        |  ├── components
|        |  |  └── innerToolBar.vue
|        |  ├── wImage.vue
|        |  └── wImageStyle.vue // 對應右側(cè)面板的操作
|        ├── wQrcode // 二維碼
|        |  ├── wQrcode.vue
|        |  └── wQrcodeStyle.vue // 對應右側(cè)面板的操作
|        ├── wSvg // 矢量圖
|        |  ├── wSvg.vue
|        |  └── wSvgStyle.vue // 對應右側(cè)面板的操作
|        └── wText // 文字
|           ├── wText.vue
|           └── wTextStyle.vue // 對應右側(cè)面板的操作
├── config.ts // 公共配置
├── main.ts // 項目入口文件
├── mixins // 一些公共混合代碼，考慮優(yōu)化
|  ├── methods
|  |  ├── DealWithCtrl.ts
|  |  └── keyCodeOptions.ts
|  ├── mouseDragging.ts
|  ├── move.ts
|  └── shortcuts.ts
├── router // vue 路由
|  ├── .....
├── store // Vuex 狀態(tài)管理器
|  ├── index.ts
|  └── modules
|     ├── base
|     |  ├── .......
|     └── design
|        ├── .......
├── types // TS類型配置
|  ├── .......
├── utils // 工具函數(shù)目錄
|  ├── axios.ts
|  ├── index.ts
|  ├── plugins
|  |  ├── cssLoader.ts // 異步加載css
|  |  ├── modules.ts // 全局加載公共組件
|  |  ├── pointImg.ts // 圖片點位顏色，測試中
|  |  ├── preload.ts // 加載資源
|  |  └── psd // 設(shè)計稿解析
|  ├── utils.ts
|  └── widgets
|     └── elementConfig.ts // 配置全局默認導入的element組件
└── views // 頁面目錄
   ├── Draw.vue // 繪制頁
   ├── Index.vue // 編輯頁（首頁）
   ├── Psd.vue // PSD解析頁
   └── components