From 70867ae06b3d0b7c919567fabcae3ad92d7a326e Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Sun, 1 Aug 2021 11:07:12 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=A8=A1=E6=9D=BF?= =?UTF-8?q?=E9=80=82=E5=BA=94=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mocks/layout.ts | 778 +++++++++++++++++++++++++++++++++++-------- src/store/getters.ts | 23 +- 2 files changed, 653 insertions(+), 148 deletions(-) diff --git a/src/mocks/layout.ts b/src/mocks/layout.ts index 0c9640a3..9fbcc623 100644 --- a/src/mocks/layout.ts +++ b/src/mocks/layout.ts @@ -1,131 +1,8 @@ +/* eslint-disable max-lines */ + import { Slide } from '@/types/slides' export const layouts: Slide[] = [ - { - id: 'template', - elements: [ - { - type: 'text', - id: 'dTwwDl', - left: 104.12962962962959, - top: 213.75000000000003, - width: 791.7407407407408, - height: 116, - lineHeight: 1.2, - content: '

在此处添加标题

', - rotate: 0, - defaultFontName: '{{fontName}}', - defaultColor: '{{fontColor}}', - wordSpace: 6, - }, - ], - background: { - type: 'solid', - color: '{{backgroundColor}}', - }, - }, - { - id: 'template', - elements: [ - { - type: 'text', - id: 'idn7Mx', - left: 145, - top: 148, - width: 711, - height: 77, - lineHeight: 1.2, - content: '

在此处添加标题

', - rotate: 0, - defaultFontName: '{{fontName}}', - defaultColor: '{{fontColor}}', - }, - { - type: 'text', - id: '7stmVP', - left: 207.50000000000003, - top: 249.84259259259264, - width: 585, - height: 56, - content: '

在此处添加副标题

', - rotate: 0, - defaultFontName: '{{fontName}}', - defaultColor: '{{fontColor}}', - }, - ], - background: { - type: 'solid', - color: '{{backgroundColor}}', - }, - }, - { - id: 'template', - elements: [ - { - type: 'text', - id: 'Ri5fok', - left: 45, - top: 40, - width: 711, - height: 77, - lineHeight: 1.2, - content: '

在此处添加标题

', - rotate: 0, - defaultFontName: '{{fontName}}', - defaultColor: '{{fontColor}}', - }, - { - type: 'text', - id: '57jpaB', - left: 45, - top: 150, - width: 585, - height: 56, - content: '

在此处添加副标题

', - rotate: 0, - defaultFontName: '{{fontName}}', - defaultColor: '{{fontColor}}', - }, - ], - background: { - type: 'solid', - color: '{{backgroundColor}}', - }, - }, - { - id: 'template', - elements: [ - { - type: 'text', - id: 'xEykLD', - left: 45, - top: 355, - width: 711, - height: 77, - lineHeight: 1.2, - content: '

在此处添加标题

', - rotate: 0, - defaultFontName: '{{fontName}}', - defaultColor: '{{fontColor}}', - }, - { - type: 'text', - id: '4lvQ5n', - left: 45, - top: 460, - width: 585, - height: 56, - content: '

在此处添加副标题

', - rotate: 0, - defaultFontName: '{{fontName}}', - defaultColor: '{{fontColor}}', - }, - ], - background: { - type: 'solid', - color: '{{backgroundColor}}', - }, - }, { id: 'template', elements: [ @@ -201,6 +78,436 @@ export const layouts: Slide[] = [ color: '{{backgroundColor}}', }, }, + { + id: 'template', + elements: [ + { + type: 'text', + id: 'ptNnUJ', + left: 145, + top: 148, + width: 711, + height: 77, + lineHeight: 1.2, + content: '

在此处添加标题

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + }, + { + type: 'text', + id: 'mRHvQN', + left: 207.50000000000003, + top: 249.84259259259264, + width: 585, + height: 56, + content: '

在此处添加副标题

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + }, + { + type: 'line', + id: '7CQDwc', + left: 323.09259259259267, + top: 238.33333333333334, + start: [0, 0], + end: [354.8148148148148, 0], + points: ['', ''], + color: '{{themeColor}}', + style: 'solid', + width: 4 + }, + { + type: 'shape', + id: '09wqWw', + left: -27.648148148148138, + top: 432.73148148148147, + width: 1056.2962962962963, + height: 162.96296296296296, + viewBox: 200, + path: 'M 0 20 C 40 -40 60 60 100 20 C 140 -40 160 60 200 20 L 200 180 C 140 240 160 140 100 180 C 40 240 60 140 0 180 L 0 20 Z', + fill: '{{themeColor}}', + fixedRatio: false, + rotate: 0 + } + ], + background: { + type: 'solid', + color: '{{backgroundColor}}', + }, + }, + { + id: 'template', + elements: [ + { + type: 'shape', + id: 'vSheCJ', + left: 183.5185185185185, + top: 175.5092592592593, + width: 605.1851851851851, + height: 185.18518518518516, + viewBox: 200, + path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z', + fill: '{{themeColor}}', + fixedRatio: false, + rotate: 0 + }, + { + type: 'shape', + id: 'Mpwv7x', + left: 211.29629629629628, + top: 201.80555555555557, + width: 605.1851851851851, + height: 185.18518518518516, + viewBox: 200, + path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z', + fill: '{{themeColor}}', + fixedRatio: false, + rotate: 0, + opacity: 0.7 + }, + { + type: 'text', + id: 'WQOTAp', + left: 304.9074074074074, + top: 198.10185185185182, + width: 417.9629629629629, + height: 140, + content: '

感谢观看

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + wordSpace: 5 + } + ], + background: { + type: 'solid', + color: '{{backgroundColor}}', + }, + }, + { + id: 'MZVO1kkj', + elements: [ + { + type: 'shape', + id: 'cql0h8', + left: 0, + top: 0, + width: 352.59259259259255, + height: 562.5, + viewBox: 200, + path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z', + fill: '{{themeColor}}', + fixedRatio: false, + rotate: 0 + }, + { + type: 'shape', + id: '_RTaF4', + left: 171.4814814814814, + top: 100.13888888888887, + width: 362.22222222222223, + height: 362.22222222222223, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: 'rgba(255,255,255,0)', + fixedRatio: false, + rotate: 0, + outline: { + width: 10, + color: '{{backgroundColor}}', + style: 'solid' + } + }, + { + type: 'shape', + id: 'UZfo8N', + left: 216.66666666666663, + top: 145.32407407407408, + width: 271.85185185185185, + height: 271.85185185185185, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{backgroundColor}}', + fixedRatio: false, + rotate: 0, + text: { + content: '

01

', + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + align: 'middle' + } + }, + { + type: 'text', + id: 'ysqtBg', + left: 561.4814814814814, + top: 100.1388888888889, + width: 359.25925925925924, + height: 80, + content: '

在此处输入标题

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + }, + { + type: 'text', + id: 'lXsoHa', + left: 572.5925925925925, + top: 202.3611111111111, + width: 257.77777777777777, + height: 260, + content: '

  1. 在此处输入内容

  2. 在此处输入内容

  3. 在此处输入内容

  4. 在此处输入内容

  5. 在此处输入内容

  6. 在此处输入内容

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + lineHeight: 2, + fill: '{{subColor}}' + } + ], + background: { + type: 'solid', + color: '{{backgroundColor}}', + }, + }, + { + id: 'template', + elements: [ + { + type: 'shape', + id: 'EBBnTr', + left: 360.5996472663139, + top: 141.8496472663139, + width: 278.80070546737215, + height: 278.80070546737215, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{themeColor}}', + fixedRatio: true, + rotate: 0, + outline: { + width: 0, + color: '{{backgroundColor}}', + style: 'solid' + } + }, + { + type: 'shape', + id: 'gDIWDH', + left: 456.4373897707231, + top: 98.287037037037, + width: 87.12522045855381, + height: 87.12522045855381, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{themeColor}}', + fixedRatio: true, + rotate: 0, + outline: { + width: 4, + color: '{{backgroundColor}}', + style: 'solid' + }, + text: { + content: '

1

', + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + align: 'middle' + } + }, + { + type: 'shape', + id: 'DUWT7E', + left: 317.037037037037, + top: 237.68738977072314, + width: 87.12522045855381, + height: 87.12522045855381, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{themeColor}}', + fixedRatio: true, + rotate: 0, + outline: { + width: 4, + color: '{{backgroundColor}}', + style: 'solid' + }, + text: { + content: '

4

', + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + align: 'middle' + } + }, + { + type: 'shape', + id: 'pbhn38', + left: 456.43738977072303, + top: 377.08774250440916, + width: 87.12522045855381, + height: 87.12522045855381, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{themeColor}}', + fixedRatio: true, + rotate: 0, + outline: { + width: 4, + color: '{{backgroundColor}}', + style: 'solid' + }, + text: { + content: '

3

', + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + align: 'middle' + } + }, + { + type: 'shape', + id: 'CvMKrO', + left: 595.8377425044091, + top: 237.6873897707231, + width: 87.12522045855381, + height: 87.12522045855381, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{themeColor}}', + fixedRatio: true, + rotate: 0, + outline: { + width: 4, + color: '{{backgroundColor}}', + style: 'solid' + }, + text: { + content: '

2

', + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + align: 'middle' + } + }, + { + type: 'text', + id: 'adudHB', + left: 402.962962962963, + top: 39.39814814814815, + width: 194.07407407407408, + height: 50, + content: '

在此输入内容

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + }, + { + type: 'text', + id: '9UpDwg', + left: 402.962962962963, + top: 473.1018518518518, + width: 194.07407407407408, + height: 50, + content: '

在此输入内容

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + }, + { + type: 'text', + id: 'GERdpB', + left: 111.48148148148151, + top: 256.25, + width: 194.07407407407408, + height: 50, + content: '

在此输入内容

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + }, + { + type: 'text', + id: 'G5qoho', + left: 691.1111111111111, + top: 256.25, + width: 194.07407407407408, + height: 50, + content: '

在此输入内容

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + }, + { + type: 'shape', + id: 'vdZcI6', + left: 415.18518518518516, + top: 196.4351851851852, + width: 169.62962962962962, + height: 169.62962962962962, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{backgroundColor}}', + fixedRatio: false, + rotate: 0 + } + ], + background: { + type: 'solid', + color: '{{backgroundColor}}', + }, + }, + { + id: 'template', + elements: [ + { + type: 'shape', + id: 'tYUmrx', + left: 156.66666666666683, + top: 149.02777777777771, + width: 264.4444444444445, + height: 264.4444444444445, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{themeColor}}', + fixedRatio: false, + rotate: 0, + text: { + content: '

01

', + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + align: 'middle' + } + }, + { + type: 'shape', + id: '0GVHf8', + left: 342.2222222222223, + top: 217.17592592592587, + width: 128.14814814814812, + height: 128.14814814814812, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{backgroundColor}}', + fixedRatio: false, + rotate: 0 + }, + { + type: 'text', + id: 'BO33Sv', + left: 378.8888888888889, + top: 235.24999999999994, + width: 464.4444444444444, + height: 92, + content: '

在此处添加标题

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + } + ], + background: { + type: 'solid', + color: '{{backgroundColor}}', + }, + }, { id: 'template', elements: [ @@ -229,7 +536,7 @@ export const layouts: Slide[] = [ rotate: 0, defaultFontName: '{{fontName}}', defaultColor: '{{fontColor}}', - fill: 'rgb(242, 242, 242)', + fill: '{{subColor}}', }, { type: 'text', @@ -256,7 +563,7 @@ export const layouts: Slide[] = [ rotate: 0, defaultFontName: '{{fontName}}', defaultColor: '{{fontColor}}', - fill: 'rgb(242, 242, 242)', + fill: '{{subColor}}', }, ], background: { @@ -292,7 +599,7 @@ export const layouts: Slide[] = [ rotate: 0, defaultFontName: '{{fontName}}', defaultColor: '{{fontColor}}', - fill: 'rgb(242, 242, 242)', + fill: '{{subColor}}', }, { type: 'text', @@ -319,7 +626,7 @@ export const layouts: Slide[] = [ rotate: 0, defaultFontName: '{{fontName}}', defaultColor: '{{fontColor}}', - fill: 'rgb(242, 242, 242)', + fill: '{{subColor}}', }, { type: 'text', @@ -346,7 +653,7 @@ export const layouts: Slide[] = [ rotate: 0, defaultFontName: '{{fontName}}', defaultColor: '{{fontColor}}', - fill: 'rgb(242, 242, 242)', + fill: '{{subColor}}', }, { type: 'text', @@ -373,7 +680,7 @@ export const layouts: Slide[] = [ rotate: 0, defaultFontName: '{{fontName}}', defaultColor: '{{fontColor}}', - fill: 'rgb(242, 242, 242)', + fill: '{{subColor}}', }, ], background: { @@ -410,7 +717,7 @@ export const layouts: Slide[] = [ rotate: 0, defaultFontName: '{{fontName}}', defaultColor: '{{fontColor}}', - fill: 'rgb(242, 242, 242)', + fill: '{{subColor}}', }, { type: 'text', @@ -423,7 +730,7 @@ export const layouts: Slide[] = [ rotate: 0, defaultFontName: '{{fontName}}', defaultColor: '{{fontColor}}', - fill: 'rgb(242, 242, 242)', + fill: '{{subColor}}', }, { type: 'text', @@ -436,7 +743,7 @@ export const layouts: Slide[] = [ rotate: 0, defaultFontName: '{{fontName}}', defaultColor: '{{fontColor}}', - fill: 'rgb(242, 242, 242)', + fill: '{{subColor}}', }, { type: 'text', @@ -449,7 +756,7 @@ export const layouts: Slide[] = [ rotate: 0, defaultFontName: '{{fontName}}', defaultColor: '{{fontColor}}', - fill: 'rgb(242, 242, 242)', + fill: '{{subColor}}', }, ], background: { @@ -457,4 +764,205 @@ export const layouts: Slide[] = [ color: '{{backgroundColor}}', }, }, + { + id: 'template', + elements: [ + { + type: 'shape', + id: 'SUWirT', + left: 73.8888888888889, + top: 64.21296296296302, + width: 49.629629629629626, + height: 49.629629629629626, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{themeColor}}', + fixedRatio: false, + rotate: 0, + text: { + content: '

1

', + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + align: 'middle' + } + }, + { + type: 'text', + id: 'YjzN1M', + left: 148.70370370370372, + top: 64.21296296296302, + width: 323.7037037037037, + height: 120, + content: '

在此输入内容

在此输入内容

在此输入内容

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + fill: '{{subColor}}' + }, + { + type: 'shape', + id: 'fS09I7', + left: 527.5925925925926, + top: 64.21296296296302, + width: 49.629629629629626, + height: 49.629629629629626, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{themeColor}}', + fixedRatio: false, + rotate: 0, + text: { + content: '

2

', + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + align: 'middle' + } + }, + { + type: 'text', + id: 'qCnfB1', + left: 602.4074074074074, + top: 64.21296296296302, + width: 323.7037037037037, + height: 120, + content: '

在此输入内容

在此输入内容

在此输入内容

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + fill: '{{subColor}}' + }, + { + type: 'shape', + id: 'difAAT', + left: 73.8888888888889, + top: 221.25000000000003, + width: 49.629629629629626, + height: 49.629629629629626, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{themeColor}}', + fixedRatio: false, + rotate: 0, + text: { + content: '

3

', + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + align: 'middle' + } + }, + { + type: 'text', + id: 'EUlvMo', + left: 148.70370370370372, + top: 221.25000000000003, + width: 323.7037037037037, + height: 120, + content: '

在此输入内容

在此输入内容

在此输入内容

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + fill: '{{subColor}}' + }, + { + type: 'shape', + id: 'US_9jB', + left: 527.5925925925926, + top: 221.25000000000003, + width: 49.629629629629626, + height: 49.629629629629626, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{themeColor}}', + fixedRatio: false, + rotate: 0, + text: { + content: '

4

', + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + align: 'middle' + } + }, + { + type: 'text', + id: '243MnQ', + left: 602.4074074074074, + top: 221.25000000000003, + width: 323.7037037037037, + height: 120, + content: '

在此输入内容

在此输入内容

在此输入内容

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + fill: '{{subColor}}' + }, + { + type: 'shape', + id: 'Y_KUj0', + left: 73.8888888888889, + top: 378.287037037037, + width: 49.629629629629626, + height: 49.629629629629626, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{themeColor}}', + fixedRatio: false, + rotate: 0, + text: { + content: '

5

', + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + align: 'middle' + } + }, + { + type: 'text', + id: '9GglMe', + left: 148.70370370370372, + top: 378.287037037037, + width: 323.7037037037037, + height: 120, + content: '

在此输入内容

在此输入内容

在此输入内容

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + fill: '{{subColor}}' + }, + { + type: 'shape', + id: 'eSInje', + left: 527.5925925925926, + top: 378.287037037037, + width: 49.629629629629626, + height: 49.629629629629626, + viewBox: 200, + path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z', + fill: '{{themeColor}}', + fixedRatio: false, + rotate: 0, + text: { + content: '

6

', + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + align: 'middle' + } + }, + { + type: 'text', + id: '0S3yUg', + left: 602.4074074074074, + top: 378.287037037037, + width: 323.7037037037037, + height: 120, + content: '

在此输入内容

在此输入内容

在此输入内容

', + rotate: 0, + defaultFontName: '{{fontName}}', + defaultColor: '{{fontColor}}', + fill: '{{subColor}}' + } + ], + background: { + type: 'solid', + color: '{{backgroundColor}}', + }, + }, ] \ No newline at end of file diff --git a/src/store/getters.ts b/src/store/getters.ts index f2130112..86ab6871 100644 --- a/src/store/getters.ts +++ b/src/store/getters.ts @@ -1,4 +1,5 @@ import { GetterTree } from 'vuex' +import tinycolor from 'tinycolor2' import { State } from './state' import { layouts } from '@/mocks/layout' @@ -26,20 +27,16 @@ export const getters: GetterTree = { backgroundColor, } = state.theme - return layouts.map(layout => { - const elements = layout.elements.map(el => { - const props = {} - for (const key of Object.keys(el)) { - if (typeof el[key] === 'string') { - props[key] = (el[key] as string).replace('{{themeColor}}', themeColor).replace('{{fontColor}}', fontColor).replace('{{fontName}}', fontName) - } - } - return { ...el, ...props } - }) - const background = { ...layout.background, color: backgroundColor } + const subColor = tinycolor(fontColor).isDark() ? 'rgba(230, 230, 230, 0.5)' : 'rgba(180, 180, 180, 0.5)' - return { ...layout, elements, background } - }) + const layoutsString = JSON.stringify(layouts) + .replaceAll('{{themeColor}}', themeColor) + .replaceAll('{{fontColor}}', fontColor) + .replaceAll('{{fontName}}', fontName) + .replaceAll('{{backgroundColor}}', backgroundColor) + .replaceAll('{{subColor}}', subColor) + + return JSON.parse(layoutsString) }, activeElementList(state) {