mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
perf: 优化模板适应主题
This commit is contained in:
pipipi-pikachu
parent
d26a7a1b43
commit
70867ae06b
@ -1,131 +1,8 @@
|
|||||||
|
/* eslint-disable max-lines */
|
||||||
|
|
||||||
import { Slide } from '@/types/slides'
|
import { Slide } from '@/types/slides'
|
||||||
|
|
||||||
export const layouts: Slide[] = [
|
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: '<p style=\'text-align: center;\'><strong><span style=\'font-size: 80px\'>在此处添加标题</span></strong></p>',
|
|
||||||
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: '<p style=\'text-align: center;\'><strong><span style=\'font-size: 48px\'>在此处添加标题</span></strong></p>',
|
|
||||||
rotate: 0,
|
|
||||||
defaultFontName: '{{fontName}}',
|
|
||||||
defaultColor: '{{fontColor}}',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
id: '7stmVP',
|
|
||||||
left: 207.50000000000003,
|
|
||||||
top: 249.84259259259264,
|
|
||||||
width: 585,
|
|
||||||
height: 56,
|
|
||||||
content: '<p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处添加副标题</span></p>',
|
|
||||||
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: '<p style=\'\'><strong><span style=\'font-size: 48px\'>在此处添加标题</span></strong></p>',
|
|
||||||
rotate: 0,
|
|
||||||
defaultFontName: '{{fontName}}',
|
|
||||||
defaultColor: '{{fontColor}}',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
id: '57jpaB',
|
|
||||||
left: 45,
|
|
||||||
top: 150,
|
|
||||||
width: 585,
|
|
||||||
height: 56,
|
|
||||||
content: '<p style=\'\'><span style=\'font-size: 24px\'>在此处添加副标题</span></p>',
|
|
||||||
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: '<p><strong><span style=\'font-size: 48px\'>在此处添加标题</span></strong></p>',
|
|
||||||
rotate: 0,
|
|
||||||
defaultFontName: '{{fontName}}',
|
|
||||||
defaultColor: '{{fontColor}}',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
id: '4lvQ5n',
|
|
||||||
left: 45,
|
|
||||||
top: 460,
|
|
||||||
width: 585,
|
|
||||||
height: 56,
|
|
||||||
content: '<p><span style=\'font-size: 24px\'>在此处添加副标题</span></p>',
|
|
||||||
rotate: 0,
|
|
||||||
defaultFontName: '{{fontName}}',
|
|
||||||
defaultColor: '{{fontColor}}',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
background: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '{{backgroundColor}}',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'template',
|
id: 'template',
|
||||||
elements: [
|
elements: [
|
||||||
@ -201,6 +78,436 @@ export const layouts: Slide[] = [
|
|||||||
color: '{{backgroundColor}}',
|
color: '{{backgroundColor}}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'template',
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: 'ptNnUJ',
|
||||||
|
left: 145,
|
||||||
|
top: 148,
|
||||||
|
width: 711,
|
||||||
|
height: 77,
|
||||||
|
lineHeight: 1.2,
|
||||||
|
content: '<p style=\'text-align: center;\'><strong><span style=\'font-size: 48px\'>在此处添加标题</span></strong></p>',
|
||||||
|
rotate: 0,
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: 'mRHvQN',
|
||||||
|
left: 207.50000000000003,
|
||||||
|
top: 249.84259259259264,
|
||||||
|
width: 585,
|
||||||
|
height: 56,
|
||||||
|
content: '<p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处添加副标题</span></p>',
|
||||||
|
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: '<p style=\'text-align: center;\'><strong><span style=\'color: #ffffff;\'><span style=\'font-size: 80px\'>感谢观看</span></span></strong></p>',
|
||||||
|
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: '<p style=\'text-align: center;\'><span style=\'font-size: 80px\'>01</span></p>',
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
align: 'middle'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: 'ysqtBg',
|
||||||
|
left: 561.4814814814814,
|
||||||
|
top: 100.1388888888889,
|
||||||
|
width: 359.25925925925924,
|
||||||
|
height: 80,
|
||||||
|
content: '<p style=\'\'><strong><span style=\'font-size: 40px\'>在此处输入标题</span></strong></p>',
|
||||||
|
rotate: 0,
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: 'lXsoHa',
|
||||||
|
left: 572.5925925925925,
|
||||||
|
top: 202.3611111111111,
|
||||||
|
width: 257.77777777777777,
|
||||||
|
height: 260,
|
||||||
|
content: '<ol><li><p style=\'\'>在此处输入内容</p></li><li><p style=\'\'>在此处输入内容</p></li><li><p style=\'\'>在此处输入内容</p></li><li><p style=\'\'>在此处输入内容</p></li><li><p style=\'\'>在此处输入内容</p></li><li><p style=\'\'>在此处输入内容</p></li></ol>',
|
||||||
|
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: '<p style=\'text-align: center;\'><span style=\'color: #ffffff;\'>1</span></p>',
|
||||||
|
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: '<p style=\'text-align: center;\'><span style=\'color: #ffffff;\'>4</span></p>',
|
||||||
|
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: '<p style=\'text-align: center;\'><span style=\'color: #ffffff;\'>3</span></p>',
|
||||||
|
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: '<p style=\'text-align: center;\'><span style=\'color: #ffffff;\'>2</span></p>',
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
align: 'middle'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: 'adudHB',
|
||||||
|
left: 402.962962962963,
|
||||||
|
top: 39.39814814814815,
|
||||||
|
width: 194.07407407407408,
|
||||||
|
height: 50,
|
||||||
|
content: '<p style=\'text-align: center;\'>在此输入内容</p>',
|
||||||
|
rotate: 0,
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: '9UpDwg',
|
||||||
|
left: 402.962962962963,
|
||||||
|
top: 473.1018518518518,
|
||||||
|
width: 194.07407407407408,
|
||||||
|
height: 50,
|
||||||
|
content: '<p style=\'text-align: center;\'>在此输入内容</p>',
|
||||||
|
rotate: 0,
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: 'GERdpB',
|
||||||
|
left: 111.48148148148151,
|
||||||
|
top: 256.25,
|
||||||
|
width: 194.07407407407408,
|
||||||
|
height: 50,
|
||||||
|
content: '<p style=\'text-align: center;\'>在此输入内容</p>',
|
||||||
|
rotate: 0,
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: 'G5qoho',
|
||||||
|
left: 691.1111111111111,
|
||||||
|
top: 256.25,
|
||||||
|
width: 194.07407407407408,
|
||||||
|
height: 50,
|
||||||
|
content: '<p style=\'text-align: center;\'>在此输入内容</p>',
|
||||||
|
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: '<p style=\'text-align: center;\'><span style=\'color: #ffffff;\'><span style=\'font-size: 60px\'>01</span></span></p>',
|
||||||
|
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: '<p style=\'\'><strong><span style=\'font-size: 48px\'>在此处添加标题</span></strong></p>',
|
||||||
|
rotate: 0,
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
}
|
||||||
|
],
|
||||||
|
background: {
|
||||||
|
type: 'solid',
|
||||||
|
color: '{{backgroundColor}}',
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'template',
|
id: 'template',
|
||||||
elements: [
|
elements: [
|
||||||
@ -229,7 +536,7 @@ export const layouts: Slide[] = [
|
|||||||
rotate: 0,
|
rotate: 0,
|
||||||
defaultFontName: '{{fontName}}',
|
defaultFontName: '{{fontName}}',
|
||||||
defaultColor: '{{fontColor}}',
|
defaultColor: '{{fontColor}}',
|
||||||
fill: 'rgb(242, 242, 242)',
|
fill: '{{subColor}}',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'text',
|
type: 'text',
|
||||||
@ -256,7 +563,7 @@ export const layouts: Slide[] = [
|
|||||||
rotate: 0,
|
rotate: 0,
|
||||||
defaultFontName: '{{fontName}}',
|
defaultFontName: '{{fontName}}',
|
||||||
defaultColor: '{{fontColor}}',
|
defaultColor: '{{fontColor}}',
|
||||||
fill: 'rgb(242, 242, 242)',
|
fill: '{{subColor}}',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
background: {
|
background: {
|
||||||
@ -292,7 +599,7 @@ export const layouts: Slide[] = [
|
|||||||
rotate: 0,
|
rotate: 0,
|
||||||
defaultFontName: '{{fontName}}',
|
defaultFontName: '{{fontName}}',
|
||||||
defaultColor: '{{fontColor}}',
|
defaultColor: '{{fontColor}}',
|
||||||
fill: 'rgb(242, 242, 242)',
|
fill: '{{subColor}}',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'text',
|
type: 'text',
|
||||||
@ -319,7 +626,7 @@ export const layouts: Slide[] = [
|
|||||||
rotate: 0,
|
rotate: 0,
|
||||||
defaultFontName: '{{fontName}}',
|
defaultFontName: '{{fontName}}',
|
||||||
defaultColor: '{{fontColor}}',
|
defaultColor: '{{fontColor}}',
|
||||||
fill: 'rgb(242, 242, 242)',
|
fill: '{{subColor}}',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'text',
|
type: 'text',
|
||||||
@ -346,7 +653,7 @@ export const layouts: Slide[] = [
|
|||||||
rotate: 0,
|
rotate: 0,
|
||||||
defaultFontName: '{{fontName}}',
|
defaultFontName: '{{fontName}}',
|
||||||
defaultColor: '{{fontColor}}',
|
defaultColor: '{{fontColor}}',
|
||||||
fill: 'rgb(242, 242, 242)',
|
fill: '{{subColor}}',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'text',
|
type: 'text',
|
||||||
@ -373,7 +680,7 @@ export const layouts: Slide[] = [
|
|||||||
rotate: 0,
|
rotate: 0,
|
||||||
defaultFontName: '{{fontName}}',
|
defaultFontName: '{{fontName}}',
|
||||||
defaultColor: '{{fontColor}}',
|
defaultColor: '{{fontColor}}',
|
||||||
fill: 'rgb(242, 242, 242)',
|
fill: '{{subColor}}',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
background: {
|
background: {
|
||||||
@ -410,7 +717,7 @@ export const layouts: Slide[] = [
|
|||||||
rotate: 0,
|
rotate: 0,
|
||||||
defaultFontName: '{{fontName}}',
|
defaultFontName: '{{fontName}}',
|
||||||
defaultColor: '{{fontColor}}',
|
defaultColor: '{{fontColor}}',
|
||||||
fill: 'rgb(242, 242, 242)',
|
fill: '{{subColor}}',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'text',
|
type: 'text',
|
||||||
@ -423,7 +730,7 @@ export const layouts: Slide[] = [
|
|||||||
rotate: 0,
|
rotate: 0,
|
||||||
defaultFontName: '{{fontName}}',
|
defaultFontName: '{{fontName}}',
|
||||||
defaultColor: '{{fontColor}}',
|
defaultColor: '{{fontColor}}',
|
||||||
fill: 'rgb(242, 242, 242)',
|
fill: '{{subColor}}',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'text',
|
type: 'text',
|
||||||
@ -436,7 +743,7 @@ export const layouts: Slide[] = [
|
|||||||
rotate: 0,
|
rotate: 0,
|
||||||
defaultFontName: '{{fontName}}',
|
defaultFontName: '{{fontName}}',
|
||||||
defaultColor: '{{fontColor}}',
|
defaultColor: '{{fontColor}}',
|
||||||
fill: 'rgb(242, 242, 242)',
|
fill: '{{subColor}}',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'text',
|
type: 'text',
|
||||||
@ -449,7 +756,7 @@ export const layouts: Slide[] = [
|
|||||||
rotate: 0,
|
rotate: 0,
|
||||||
defaultFontName: '{{fontName}}',
|
defaultFontName: '{{fontName}}',
|
||||||
defaultColor: '{{fontColor}}',
|
defaultColor: '{{fontColor}}',
|
||||||
fill: 'rgb(242, 242, 242)',
|
fill: '{{subColor}}',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
background: {
|
background: {
|
||||||
@ -457,4 +764,205 @@ export const layouts: Slide[] = [
|
|||||||
color: '{{backgroundColor}}',
|
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: '<p style=\'text-align: center;\'><span style=\'color: #ffffff;\'>1</span></p>',
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
align: 'middle'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: 'YjzN1M',
|
||||||
|
left: 148.70370370370372,
|
||||||
|
top: 64.21296296296302,
|
||||||
|
width: 323.7037037037037,
|
||||||
|
height: 120,
|
||||||
|
content: '<p style=\'\'>在此输入内容</p><p style=\'\'>在此输入内容</p><p style=\'\'>在此输入内容</p>',
|
||||||
|
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: '<p style=\'text-align: center;\'><span style=\'color: #ffffff;\'>2</span></p>',
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
align: 'middle'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: 'qCnfB1',
|
||||||
|
left: 602.4074074074074,
|
||||||
|
top: 64.21296296296302,
|
||||||
|
width: 323.7037037037037,
|
||||||
|
height: 120,
|
||||||
|
content: '<p style=\'\'>在此输入内容</p><p style=\'\'>在此输入内容</p><p style=\'\'>在此输入内容</p>',
|
||||||
|
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: '<p style=\'text-align: center;\'><span style=\'color: #ffffff;\'>3</span></p>',
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
align: 'middle'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: 'EUlvMo',
|
||||||
|
left: 148.70370370370372,
|
||||||
|
top: 221.25000000000003,
|
||||||
|
width: 323.7037037037037,
|
||||||
|
height: 120,
|
||||||
|
content: '<p style=\'\'>在此输入内容</p><p style=\'\'>在此输入内容</p><p style=\'\'>在此输入内容</p>',
|
||||||
|
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: '<p style=\'text-align: center;\'><span style=\'color: #ffffff;\'>4</span></p>',
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
align: 'middle'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: '243MnQ',
|
||||||
|
left: 602.4074074074074,
|
||||||
|
top: 221.25000000000003,
|
||||||
|
width: 323.7037037037037,
|
||||||
|
height: 120,
|
||||||
|
content: '<p style=\'\'>在此输入内容</p><p style=\'\'>在此输入内容</p><p style=\'\'>在此输入内容</p>',
|
||||||
|
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: '<p style=\'text-align: center;\'><span style=\'color: #ffffff;\'>5</span></p>',
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
align: 'middle'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: '9GglMe',
|
||||||
|
left: 148.70370370370372,
|
||||||
|
top: 378.287037037037,
|
||||||
|
width: 323.7037037037037,
|
||||||
|
height: 120,
|
||||||
|
content: '<p style=\'\'>在此输入内容</p><p style=\'\'>在此输入内容</p><p style=\'\'>在此输入内容</p>',
|
||||||
|
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: '<p style=\'text-align: center;\'><span style=\'color: #ffffff;\'>6</span></p>',
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
align: 'middle'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
id: '0S3yUg',
|
||||||
|
left: 602.4074074074074,
|
||||||
|
top: 378.287037037037,
|
||||||
|
width: 323.7037037037037,
|
||||||
|
height: 120,
|
||||||
|
content: '<p style=\'\'>在此输入内容</p><p style=\'\'>在此输入内容</p><p style=\'\'>在此输入内容</p>',
|
||||||
|
rotate: 0,
|
||||||
|
defaultFontName: '{{fontName}}',
|
||||||
|
defaultColor: '{{fontColor}}',
|
||||||
|
fill: '{{subColor}}'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
background: {
|
||||||
|
type: 'solid',
|
||||||
|
color: '{{backgroundColor}}',
|
||||||
|
},
|
||||||
|
},
|
||||||
]
|
]
|
||||||
@ -1,4 +1,5 @@
|
|||||||
import { GetterTree } from 'vuex'
|
import { GetterTree } from 'vuex'
|
||||||
|
import tinycolor from 'tinycolor2'
|
||||||
import { State } from './state'
|
import { State } from './state'
|
||||||
import { layouts } from '@/mocks/layout'
|
import { layouts } from '@/mocks/layout'
|
||||||
|
|
||||||
@ -26,20 +27,16 @@ export const getters: GetterTree<State, State> = {
|
|||||||
backgroundColor,
|
backgroundColor,
|
||||||
} = state.theme
|
} = state.theme
|
||||||
|
|
||||||
return layouts.map(layout => {
|
const subColor = tinycolor(fontColor).isDark() ? 'rgba(230, 230, 230, 0.5)' : 'rgba(180, 180, 180, 0.5)'
|
||||||
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 }
|
|
||||||
|
|
||||||
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) {
|
activeElementList(state) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user