From b739528c21da347d16821e1dc687aabdec5de977 Mon Sep 17 00:00:00 2001 From: ShawnPhang Date: Tue, 16 Apr 2024 23:13:00 +0800 Subject: [PATCH] feat: support multi-canvas & adaptive canvas --- index.html | 3 +- src/api/home.ts | 10 +- src/assets/styles/design.less | 7 +- .../business/create-design/createDesign.vue | 6 +- .../modules/layout/designBoard/index.vue | 166 +++++----- .../modules/layout/designBoard/pageStyle.vue | 64 ++-- src/components/modules/layout/lineGuides.vue | 27 +- .../modules/layout/multipleBoards/index.ts | 2 + .../layout/multipleBoards/multipleBoards.vue | 313 ++++++++++++++++++ .../modules/layout/zoomControl/index.vue | 42 +-- src/components/modules/panel/widgetPanel.vue | 2 +- .../modules/widgets/wGroup/wGroup.vue | 28 +- .../modules/widgets/wGroup/wGroupStatic.vue | 48 +++ .../modules/widgets/wImage/wImageStatic.vue | 92 +++++ .../modules/widgets/wSvg/wSvgStatic.vue | 135 ++++++++ .../modules/widgets/wText/wTextStatic.vue | 100 ++++++ src/config.ts | 4 +- src/mixins/methods/keyCodeOptions.ts | 4 +- src/mixins/move.ts | 23 +- src/mixins/scKeyCodes.ts | 18 +- src/mixins/shortcuts.ts | 4 +- src/store/design/canvas/d.ts | 19 +- src/store/design/canvas/index.ts | 65 ++-- src/store/design/canvas/page-default.ts | 22 ++ src/store/design/history/index.ts | 29 +- src/store/design/widget/actions/resize.ts | 6 +- src/store/design/widget/actions/template.ts | 16 +- src/store/design/widget/actions/widget.ts | 43 ++- src/store/design/widget/getter/index.ts | 18 +- src/store/design/widget/index.ts | 22 +- src/utils/index.ts | 18 +- src/views/Draw.vue | 26 +- src/views/Index.vue | 5 +- src/views/Psd.vue | 7 +- src/views/components/HeaderOptions.vue | 50 +-- 35 files changed, 1062 insertions(+), 382 deletions(-) create mode 100644 src/components/modules/layout/multipleBoards/index.ts create mode 100644 src/components/modules/layout/multipleBoards/multipleBoards.vue create mode 100644 src/components/modules/widgets/wGroup/wGroupStatic.vue create mode 100644 src/components/modules/widgets/wImage/wImageStatic.vue create mode 100644 src/components/modules/widgets/wSvg/wSvgStatic.vue create mode 100644 src/components/modules/widgets/wText/wTextStatic.vue create mode 100644 src/store/design/canvas/page-default.ts diff --git a/index.html b/index.html index 50164c4..df19f37 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ * @Date: 2022-01-17 16:06:30 * @Description: Design Palxp * @LastEditors: ShawnPhang - * @LastEditTime: 2023-09-19 18:36:13 + * @LastEditTime: 2024-04-13 18:16:44 --> @@ -12,6 +12,7 @@ 迅排设计 - 轻松创意，迅捷排版，感受云上设计带来的乐趣！ + diff --git a/src/api/home.ts b/src/api/home.ts index dcdf957..761e393 100644 --- a/src/api/home.ts +++ b/src/api/home.ts @@ -2,14 +2,18 @@ * @Author: ShawnPhang * @Date: 2021-08-19 18:43:22 * @Description: - * @LastEditors: ShawnPhang - * @LastEditTime: 2023-07-24 13:01:10 + * @LastEditors: ShawnPhang + * @LastEditTime: 2024-04-16 15:37:54 */ import fetch from '@/utils/axios' import _config from '@/config' +function serialize(obj: any) { + return Object.keys(obj).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&'); +} + // const screenshot_url = window.location.protocol + '//' + window.location.host + '/draw' -export const download = (params: Type.Object = {}) => `${_config.SCREEN_URL}/api/screenshots?id=${params.id}&width=${params.width}&height=${params.height}` +export const download = (params: Type.Object = {}) => `${_config.SCREEN_URL}/api/screenshots?${serialize(params)}` type IGetTempListParam = { search: string diff --git a/src/assets/styles/design.less b/src/assets/styles/design.less index d8f0feb..8a0285c 100644 --- a/src/assets/styles/design.less +++ b/src/assets/styles/design.less @@ -1,15 +1,14 @@ @import './color.less'; // design index page - @color4: #50555b; @color5: #808080; - @width0: 1180px; @width1: 120px; @width2: 100%; - @height2: 54px; +@canvasBG: #f8f8f8; + .page-design-bg-color { // background-color: #4b678c; // background-color: #4682b4; @@ -22,7 +21,7 @@ min-width: @width0; position: absolute; width: @width2; - + background-color: @canvasBG; .top-nav { height: @height2; min-width: @width0; diff --git a/src/components/business/create-design/createDesign.vue b/src/components/business/create-design/createDesign.vue index f10c48d..aa4cacb 100644 --- a/src/components/business/create-design/createDesign.vue +++ b/src/components/business/create-design/createDesign.vue @@ -3,7 +3,7 @@ * @Date: 2024-04-09 11:24:57 * @Description: 创建/编辑画布尺寸 * @LastEditors: ShawnPhang - * @LastEditTime: 2024-04-10 17:29:15 + * @LastEditTime: 2024-04-16 17:11:59 -->