feat: 通过接口方式获取mock数据

This commit is contained in:
pipipi-pikachu 2025-01-02 22:34:14 +08:00
parent 04c883daab
commit fe6e652244
14 changed files with 1407 additions and 1190 deletions

152
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": {
"@icon-park/vue-next": "^1.4.2",
"animate.css": "^4.1.1",
"axios": "^1.7.9",
"clipboard": "^2.0.11",
"crypto-js": "^4.2.0",
"dexie": "3.0.3",
@ -1857,6 +1858,21 @@
"node": ">=0.10.0"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/axios": {
"version": "1.7.9",
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.9.tgz",
"integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@ -2019,6 +2035,17 @@
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/compare-func": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/compare-func/-/compare-func-2.0.0.tgz",
@ -2260,6 +2287,14 @@
"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
"dev": true
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
@ -2715,6 +2750,38 @@
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
"dev": true
},
"node_modules/follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.1",
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fs-extra": {
"version": "11.2.0",
"resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.2.0.tgz",
@ -3612,6 +3679,25 @@
"node": ">=8.6"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mimic-fn": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-2.1.0.tgz",
@ -4228,6 +4314,11 @@
"prosemirror-transform": "^1.1.0"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
@ -6508,6 +6599,21 @@
"integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
"dev": true
},
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"axios": {
"version": "1.7.9",
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.9.tgz",
"integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
"requires": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@ -6640,6 +6746,14 @@
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"compare-func": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/compare-func/-/compare-func-2.0.0.tgz",
@ -6822,6 +6936,11 @@
"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
"dev": true
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
@ -7193,6 +7312,21 @@
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
"dev": true
},
"follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ=="
},
"form-data": {
"version": "4.0.1",
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"fs-extra": {
"version": "11.2.0",
"resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.2.0.tgz",
@ -7911,6 +8045,19 @@
"picomatch": "^2.3.1"
}
},
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"requires": {
"mime-db": "1.52.0"
}
},
"mimic-fn": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-2.1.0.tgz",
@ -8380,6 +8527,11 @@
"prosemirror-transform": "^1.1.0"
}
},
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",

View File

@ -15,6 +15,7 @@
"dependencies": {
"@icon-park/vue-next": "^1.4.2",
"animate.css": "^4.1.1",
"axios": "^1.7.9",
"clipboard": "^2.0.11",
"crypto-js": "^4.2.0",
"dexie": "3.0.3",

964
public/mocks/layouts.json Normal file
View File

@ -0,0 +1,964 @@
[
{
"id": "template",
"elements": [
{
"type": "shape",
"id": "4cbRxp",
"left": 0,
"top": 200,
"width": 546,
"height": 362.5,
"viewBox": [200, 200],
"path": "M 0 0 L 0 200 L 200 200 Z",
"fill": "{{themeColor}}",
"fixedRatio": false,
"opacity": 0.7,
"rotate": 0
},
{
"type": "shape",
"id": "ookHrf",
"left": 0,
"top": 0,
"width": 300,
"height": 320,
"viewBox": [200, 200],
"path": "M 0 0 L 0 200 L 200 200 Z",
"fill": "{{themeColor}}",
"fixedRatio": false,
"flipV": true,
"rotate": 0
},
{
"type": "text",
"id": "AkIh3E",
"left": 355,
"top": 95.11111111111111,
"width": 585,
"height": 116,
"lineHeight": 1.2,
"content": "<p style=''><strong><span style='font-size: 80px'>输入标题</span></strong></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"wordSpace": 6
},
{
"type": "text",
"id": "7stmVP",
"left": 355,
"top": 253.25,
"width": 585,
"height": 56,
"content": "<p><span style='font-size: 24px'>请在此处输入副标题</span></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}"
},
{
"type": "line",
"id": "FnpZs4",
"left": 361,
"top": 238,
"start": [0, 0],
"end": [549, 0],
"points": ["", ""],
"color": "{{themeColor}}",
"style": "solid",
"width": 2
}
],
"background": {
"type": "solid",
"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, 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, 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, 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": "template",
"elements": [
{
"type": "shape",
"id": "cql0h8",
"left": 0,
"top": 0,
"width": 352.59259259259255,
"height": 562.5,
"viewBox": [200, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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",
"elements": [
{
"type": "text",
"id": "Hj7ttp",
"left": 69.35185185185185,
"top": 49.21759259259262,
"width": 420,
"height": 63,
"lineHeight": 1.2,
"content": "<p style='text-align: center;'><strong><span style='color: #ffffff;'><span style='font-size: 36px'>1.请输入标题</span></span></strong></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{themeColor}}"
},
{
"type": "text",
"id": "FmKMNB",
"left": 69.35185185185185,
"top": 129.28240740740745,
"width": 420,
"height": 384,
"content": "<p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{subColor}}"
},
{
"type": "text",
"id": "rI7ZeO",
"left": 510.64814814814815,
"top": 49.21759259259262,
"width": 420,
"height": 63,
"lineHeight": 1.2,
"content": "<p style='text-align: center;'><strong><span style='color: #ffffff;'><span style='font-size: 36px'>2.请输入标题</span></span></strong></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{themeColor}}"
},
{
"type": "text",
"id": "KspwGc",
"left": 510.64814814814815,
"top": 129.28240740740745,
"width": 420,
"height": 384,
"content": "<p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 24px'>在此处输入内容</span></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{subColor}}"
}
],
"background": {
"type": "solid",
"color": "{{backgroundColor}}"
}
},
{
"id": "template",
"elements": [
{
"type": "text",
"id": "Rx63Jo",
"left": 69.35185185185179,
"top": 51.71759259259262,
"width": 420,
"height": 58,
"lineHeight": 1.2,
"content": "<p style='text-align: center;'><strong><span style='color: #ffffff;'><span style='font-size: 32px'>1.请输入标题</span></span></strong></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{themeColor}}"
},
{
"type": "text",
"id": "ulyuzE",
"left": 69.35185185185179,
"top": 131.78240740740745,
"width": 420,
"height": 129,
"content": "<p style='text-align: center;'><span style='font-size: 22px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 22px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 22px'>在此处输入内容</span></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{subColor}}"
},
{
"type": "text",
"id": "kr35Ca",
"left": 510.6481481481481,
"top": 51.71759259259262,
"width": 420,
"height": 58,
"lineHeight": 1.2,
"content": "<p style='text-align: center;'><strong><span style='color: #ffffff;'><span style='font-size: 32px'>2.请输入标题</span></span></strong></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{themeColor}}"
},
{
"type": "text",
"id": "BNQSpC",
"left": 510.6481481481481,
"top": 131.78240740740745,
"width": 420,
"height": 129,
"content": "<p style='text-align: center;'><span style='font-size: 22px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 22px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 22px'>在此处输入内容</span></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{subColor}}"
},
{
"type": "text",
"id": "Vr38Nu",
"left": 69.35185185185185,
"top": 301.71759259259255,
"width": 420,
"height": 58,
"lineHeight": 1.2,
"content": "<p style='text-align: center;'><strong><span style='color: #ffffff;'><span style='font-size: 32px'>3.请输入标题</span></span></strong></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{themeColor}}"
},
{
"type": "text",
"id": "IwKRSu",
"left": 69.35185185185185,
"top": 381.7824074074074,
"width": 420,
"height": 129,
"content": "<p style='text-align: center;'><span style='font-size: 22px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 22px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 22px'>在此处输入内容</span></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{subColor}}"
},
{
"type": "text",
"id": "0Opr1v",
"left": 510.64814814814815,
"top": 301.71759259259255,
"width": 420,
"height": 58,
"lineHeight": 1.2,
"content": "<p style='text-align: center;'><strong><span style='color: #ffffff;'><span style='font-size: 32px'>4.请输入标题</span></span></strong></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{themeColor}}"
},
{
"type": "text",
"id": "4L9Uzz",
"left": 510.64814814814815,
"top": 381.7824074074074,
"width": 420,
"height": 129,
"content": "<p style='text-align: center;'><span style='font-size: 22px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 22px'>在此处输入内容</span></p><p style='text-align: center;'><span style='font-size: 22px'>在此处输入内容</span></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{subColor}}"
}
],
"background": {
"type": "solid",
"color": "{{backgroundColor}}"
}
},
{
"id": "template",
"elements": [
{
"type": "text",
"id": "GdEGxg",
"left": 134.53703703703704,
"top": 127.25,
"width": 152.77777777777777,
"height": 308,
"lineHeight": 1.8,
"content": "<p style='text-align: center;'><strong><span style='color: #ffffff;'><span style='font-size: 40px'>请在此处输入标题</span></span></strong></p>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"wordSpace": 8,
"fill": "{{themeColor}}"
},
{
"type": "text",
"id": "y5sAfw",
"left": 332.8703703703704,
"top": 127.25,
"width": 532.5925925925926,
"height": 50,
"content": "<blockquote><p style=''>请在此处输入内容1</p></blockquote>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{subColor}}"
},
{
"type": "text",
"id": "VeuocM",
"left": 332.8703703703704,
"top": 212.0648148148148,
"width": 532.5925925925926,
"height": 50,
"content": "<blockquote><p style=''>请在此处输入内容2</p></blockquote>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{subColor}}"
},
{
"type": "text",
"id": "RyFWQe",
"left": 332.8703703703704,
"top": 296.8796296296296,
"width": 532.5925925925926,
"height": 50,
"content": "<blockquote><p style=''>请在此处输入内容3</p></blockquote>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{subColor}}"
},
{
"type": "text",
"id": "Q56viI",
"left": 332.8703703703704,
"top": 381.69444444444446,
"width": 532.5925925925926,
"height": 50,
"content": "<blockquote><p style=''>请在此处输入内容4</p></blockquote>",
"rotate": 0,
"defaultFontName": "{{fontName}}",
"defaultColor": "{{fontColor}}",
"fill": "{{subColor}}"
}
],
"background": {
"type": "solid",
"color": "{{backgroundColor}}"
}
},
{
"id": "template",
"elements": [
{
"type": "shape",
"id": "SUWirT",
"left": 73.8888888888889,
"top": 64.21296296296302,
"width": 49.629629629629626,
"height": 49.629629629629626,
"viewBox": [200, 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, 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, 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, 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, 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, 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}}"
}
}
]

184
public/mocks/slides.json Normal file
View File

@ -0,0 +1,184 @@
[
{
"id": "test-slide-1",
"elements": [
{
"type": "shape",
"id": "4cbRxp",
"left": 0,
"top": 200,
"width": 546,
"height": 362.5,
"viewBox": [200, 200],
"path": "M 0 0 L 0 200 L 200 200 Z",
"fill": "#5b9bd5",
"fixedRatio": false,
"opacity": 0.7,
"rotate": 0
},
{
"type": "shape",
"id": "ookHrf",
"left": 0,
"top": 0,
"width": 300,
"height": 320,
"viewBox": [200, 200],
"path": "M 0 0 L 0 200 L 200 200 Z",
"fill": "#5b9bd5",
"fixedRatio": false,
"flipV": true,
"rotate": 0
},
{
"type": "text",
"id": "idn7Mx",
"left": 355,
"top": 65.25,
"width": 450,
"height": 188,
"lineHeight": 1.2,
"content": "<p><strong><span style=\"font-size: 112px;\">PPTist</span></strong></p>",
"rotate": 0,
"defaultFontName": "",
"defaultColor": "#333"
},
{
"type": "text",
"id": "7stmVP",
"left": 355,
"top": 253.25,
"width": 585,
"height": 56,
"content": "<p><span style=\"font-size: 24px;\">基于 Vue 3.x + TypeScript 的在线演示文稿应用</span></p>",
"rotate": 0,
"defaultFontName": "",
"defaultColor": "#333"
},
{
"type": "line",
"id": "FnpZs4",
"left": 361,
"top": 238,
"start": [0, 0],
"end": [549, 0],
"points": ["", ""],
"color": "#5b9bd5",
"style": "solid",
"width": 2
}
],
"background": {
"type": "solid",
"color": "#ffffff"
}
},
{
"id": "test-slide-2",
"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": "",
"defaultColor": "#333"
},
{
"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": "",
"defaultColor": "#333"
},
{
"type": "line",
"id": "7CQDwc",
"left": 323.09259259259267,
"top": 238.33333333333334,
"start": [0, 0],
"end": [354.8148148148148, 0],
"points": ["", ""],
"color": "#5b9bd5",
"style": "solid",
"width": 4
},
{
"type": "shape",
"id": "09wqWw",
"left": -27.648148148148138,
"top": 432.73148148148147,
"width": 1056.2962962962963,
"height": 162.96296296296296,
"viewBox": [200, 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": "#5b9bd5",
"fixedRatio": false,
"rotate": 0
}
],
"background": {
"type": "solid",
"color": "#fff"
}
},
{
"id": "test-slide-3",
"elements": [
{
"type": "shape",
"id": "vSheCJ",
"left": 183.5185185185185,
"top": 175.5092592592593,
"width": 605.1851851851851,
"height": 185.18518518518516,
"viewBox": [200, 200],
"path": "M 0 0 L 200 0 L 200 200 L 0 200 Z",
"fill": "#5b9bd5",
"fixedRatio": false,
"rotate": 0
},
{
"type": "shape",
"id": "Mpwv7x",
"left": 211.29629629629628,
"top": 201.80555555555557,
"width": 605.1851851851851,
"height": 185.18518518518516,
"viewBox": [200, 200],
"path": "M 0 0 L 200 0 L 200 200 L 0 200 Z",
"fill": "#5b9bd5",
"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=\"font-size: 80px;\"><span style=\"color: rgb(255, 255, 255);\">感谢观看</span></span></strong></p>",
"rotate": 0,
"defaultFontName": "",
"defaultColor": "#333",
"wordSpace": 5
}
],
"background": {
"type": "solid",
"color": "#fff"
}
}
]

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,9 @@
<template>
<Screen v-if="screening" />
<Editor v-else-if="_isPC" />
<Mobile v-else />
<template v-if="slides.length">
<Screen v-if="screening" />
<Editor v-else-if="_isPC" />
<Mobile v-else />
</template>
</template>
@ -9,10 +11,12 @@
<script lang="ts" setup>
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useScreenStore, useMainStore, useSnapshotStore } from '@/store'
import { useScreenStore, useMainStore, useSnapshotStore, useSlidesStore } from '@/store'
import { LOCALSTORAGE_KEY_DISCARDED_DB } from '@/configs/storage'
import { deleteDiscardedDB } from '@/utils/database'
import { isPC } from './utils/common'
import { isPC } from '@/utils/common'
import type { Slide } from '@/types/slides'
import api from '@/services'
import Editor from './views/Editor/index.vue'
import Screen from './views/Screen/index.vue'
@ -21,8 +25,10 @@ import Mobile from './views/Mobile/index.vue'
const _isPC = isPC()
const mainStore = useMainStore()
const slidesStore = useSlidesStore()
const snapshotStore = useSnapshotStore()
const { databaseId } = storeToRefs(mainStore)
const { slides } = storeToRefs(slidesStore)
const { screening } = storeToRefs(useScreenStore())
if (import.meta.env.MODE !== 'development') {
@ -30,6 +36,13 @@ if (import.meta.env.MODE !== 'development') {
}
onMounted(async () => {
api.getMockData('slides').then((slides: Slide[]) => {
slidesStore.setSlides(slides)
})
api.getMockData('layouts').then((slides: Slide[]) => {
slidesStore.setLayouts(slides)
})
await deleteDiscardedDB()
snapshotStore.initSnapshotDatabase()
})

13
src/hooks/useAIPPT.ts Normal file
View File

@ -0,0 +1,13 @@
import api from '@/services'
export default () => {
const AIPPT = () => {
api.getMockData('template').then(ret => {
console.log(ret)
})
}
return {
AIPPT,
}
}

View File

@ -1,968 +0,0 @@
/* eslint-disable max-lines */
import type { Slide } from '@/types/slides'
export const layouts: Slide[] = [
{
id: 'template',
elements: [
{
type: 'shape',
id: '4cbRxp',
left: 0,
top: 200,
width: 546,
height: 362.5,
viewBox: [200, 200],
path: 'M 0 0 L 0 200 L 200 200 Z',
fill: '{{themeColor}}',
fixedRatio: false,
opacity: 0.7,
rotate: 0
},
{
type: 'shape',
id: 'ookHrf',
left: 0,
top: 0,
width: 300,
height: 320,
viewBox: [200, 200],
path: 'M 0 0 L 0 200 L 200 200 Z',
fill: '{{themeColor}}',
fixedRatio: false,
flipV: true,
rotate: 0
},
{
type: 'text',
id: 'AkIh3E',
left: 355,
top: 95.11111111111111,
width: 585,
height: 116,
lineHeight: 1.2,
content: '<p style=\'\'><strong><span style=\'font-size: 80px\'>输入标题</span></strong></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
wordSpace: 6
},
{
type: 'text',
id: '7stmVP',
left: 355,
top: 253.25,
width: 585,
height: 56,
content: '<p><span style=\'font-size: 24px\'>请在此处输入副标题</span></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
},
{
type: 'line',
id: 'FnpZs4',
left: 361,
top: 238,
start: [0, 0],
end: [549, 0],
points: ['', ''],
color: '{{themeColor}}',
style: 'solid',
width: 2,
},
],
background: {
type: 'solid',
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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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',
elements: [
{
type: 'text',
id: 'Hj7ttp',
left: 69.35185185185185,
top: 49.21759259259262,
width: 420,
height: 63,
lineHeight: 1.2,
content: '<p style=\'text-align: center;\'><strong><span style=\'color: #ffffff;\'><span style=\'font-size: 36px\'>1.请输入标题</span></span></strong></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{themeColor}}',
},
{
type: 'text',
id: 'FmKMNB',
left: 69.35185185185185,
top: 129.28240740740745,
width: 420,
height: 384,
content: '<p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{subColor}}',
},
{
type: 'text',
id: 'rI7ZeO',
left: 510.64814814814815,
top: 49.21759259259262,
width: 420,
height: 63,
lineHeight: 1.2,
content: '<p style=\'text-align: center;\'><strong><span style=\'color: #ffffff;\'><span style=\'font-size: 36px\'>2.请输入标题</span></span></strong></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{themeColor}}',
},
{
type: 'text',
id: 'KspwGc',
left: 510.64814814814815,
top: 129.28240740740745,
width: 420,
height: 384,
content: '<p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处输入内容</span></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{subColor}}',
},
],
background: {
type: 'solid',
color: '{{backgroundColor}}',
},
},
{
id: 'template',
elements: [
{
type: 'text',
id: 'Rx63Jo',
left: 69.35185185185179,
top: 51.71759259259262,
width: 420,
height: 58,
lineHeight: 1.2,
content: '<p style=\'text-align: center;\'><strong><span style=\'color: #ffffff;\'><span style=\'font-size: 32px\'>1.请输入标题</span></span></strong></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{themeColor}}',
},
{
type: 'text',
id: 'ulyuzE',
left: 69.35185185185179,
top: 131.78240740740745,
width: 420,
height: 129,
content: '<p style=\'text-align: center;\'><span style=\'font-size: 22px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 22px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 22px\'>在此处输入内容</span></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{subColor}}',
},
{
type: 'text',
id: 'kr35Ca',
left: 510.6481481481481,
top: 51.71759259259262,
width: 420,
height: 58,
lineHeight: 1.2,
content: '<p style=\'text-align: center;\'><strong><span style=\'color: #ffffff;\'><span style=\'font-size: 32px\'>2.请输入标题</span></span></strong></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{themeColor}}',
},
{
type: 'text',
id: 'BNQSpC',
left: 510.6481481481481,
top: 131.78240740740745,
width: 420,
height: 129,
content: '<p style=\'text-align: center;\'><span style=\'font-size: 22px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 22px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 22px\'>在此处输入内容</span></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{subColor}}',
},
{
type: 'text',
id: 'Vr38Nu',
left: 69.35185185185185,
top: 301.71759259259255,
width: 420,
height: 58,
lineHeight: 1.2,
content: '<p style=\'text-align: center;\'><strong><span style=\'color: #ffffff;\'><span style=\'font-size: 32px\'>3.请输入标题</span></span></strong></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{themeColor}}',
},
{
type: 'text',
id: 'IwKRSu',
left: 69.35185185185185,
top: 381.7824074074074,
width: 420,
height: 129,
content: '<p style=\'text-align: center;\'><span style=\'font-size: 22px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 22px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 22px\'>在此处输入内容</span></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{subColor}}',
},
{
type: 'text',
id: '0Opr1v',
left: 510.64814814814815,
top: 301.71759259259255,
width: 420,
height: 58,
lineHeight: 1.2,
content: '<p style=\'text-align: center;\'><strong><span style=\'color: #ffffff;\'><span style=\'font-size: 32px\'>4.请输入标题</span></span></strong></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{themeColor}}',
},
{
type: 'text',
id: '4L9Uzz',
left: 510.64814814814815,
top: 381.7824074074074,
width: 420,
height: 129,
content: '<p style=\'text-align: center;\'><span style=\'font-size: 22px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 22px\'>在此处输入内容</span></p><p style=\'text-align: center;\'><span style=\'font-size: 22px\'>在此处输入内容</span></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{subColor}}',
},
],
background: {
type: 'solid',
color: '{{backgroundColor}}',
},
},
{
id: 'template',
elements: [
{
type: 'text',
id: 'GdEGxg',
left: 134.53703703703704,
top: 127.25,
width: 152.77777777777777,
height: 308,
lineHeight: 1.8,
content: '<p style=\'text-align: center;\'><strong><span style=\'color: #ffffff;\'><span style=\'font-size: 40px\'>请在此处输入标题</span></span></strong></p>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
wordSpace: 8,
fill: '{{themeColor}}',
},
{
type: 'text',
id: 'y5sAfw',
left: 332.8703703703704,
top: 127.25,
width: 532.5925925925926,
height: 50,
content: '<blockquote><p style=\'\'>请在此处输入内容1</p></blockquote>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{subColor}}',
},
{
type: 'text',
id: 'VeuocM',
left: 332.8703703703704,
top: 212.0648148148148,
width: 532.5925925925926,
height: 50,
content: '<blockquote><p style=\'\'>请在此处输入内容2</p></blockquote>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{subColor}}',
},
{
type: 'text',
id: 'RyFWQe',
left: 332.8703703703704,
top: 296.8796296296296,
width: 532.5925925925926,
height: 50,
content: '<blockquote><p style=\'\'>请在此处输入内容3</p></blockquote>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{subColor}}',
},
{
type: 'text',
id: 'Q56viI',
left: 332.8703703703704,
top: 381.69444444444446,
width: 532.5925925925926,
height: 50,
content: '<blockquote><p style=\'\'>请在此处输入内容4</p></blockquote>',
rotate: 0,
defaultFontName: '{{fontName}}',
defaultColor: '{{fontColor}}',
fill: '{{subColor}}',
},
],
background: {
type: 'solid',
color: '{{backgroundColor}}',
},
},
{
id: 'template',
elements: [
{
type: 'shape',
id: 'SUWirT',
left: 73.8888888888889,
top: 64.21296296296302,
width: 49.629629629629626,
height: 49.629629629629626,
viewBox: [200, 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, 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, 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, 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, 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, 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}}',
},
},
]

View File

@ -1,186 +0,0 @@
import type { Slide } from '@/types/slides'
export const slides: Slide[] = [
{
id: 'test-slide-1',
elements: [
{
type: 'shape',
id: '4cbRxp',
left: 0,
top: 200,
width: 546,
height: 362.5,
viewBox: [200, 200],
path: 'M 0 0 L 0 200 L 200 200 Z',
fill: '#5b9bd5',
fixedRatio: false,
opacity: 0.7,
rotate: 0
},
{
type: 'shape',
id: 'ookHrf',
left: 0,
top: 0,
width: 300,
height: 320,
viewBox: [200, 200],
path: 'M 0 0 L 0 200 L 200 200 Z',
fill: '#5b9bd5',
fixedRatio: false,
flipV: true,
rotate: 0
},
{
type: 'text',
id: 'idn7Mx',
left: 355,
top: 65.25,
width: 450,
height: 188,
lineHeight: 1.2,
content: '<p><strong><span style=\"font-size: 112px;\">PPTist</span></strong></p>',
rotate: 0,
defaultFontName: '',
defaultColor: '#333'
},
{
type: 'text',
id: '7stmVP',
left: 355,
top: 253.25,
width: 585,
height: 56,
content: '<p><span style=\"font-size: 24px;\">基于 Vue 3.x + TypeScript 的在线演示文稿应用</span></p>',
rotate: 0,
defaultFontName: '',
defaultColor: '#333'
},
{
type: 'line',
id: 'FnpZs4',
left: 361,
top: 238,
start: [0, 0],
end: [549, 0],
points: ['', ''],
color: '#5b9bd5',
style: 'solid',
width: 2,
},
],
background: {
type: 'solid',
color: '#ffffff',
},
},
{
id: 'test-slide-2',
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: '',
defaultColor: '#333',
},
{
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: '',
defaultColor: '#333',
},
{
type: 'line',
id: '7CQDwc',
left: 323.09259259259267,
top: 238.33333333333334,
start: [0, 0],
end: [354.8148148148148, 0],
points: ['', ''],
color: '#5b9bd5',
style: 'solid',
width: 4
},
{
type: 'shape',
id: '09wqWw',
left: -27.648148148148138,
top: 432.73148148148147,
width: 1056.2962962962963,
height: 162.96296296296296,
viewBox: [200, 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: '#5b9bd5',
fixedRatio: false,
rotate: 0
}
],
background: {
type: 'solid',
color: '#fff',
},
},
{
id: 'test-slide-3',
elements: [
{
type: 'shape',
id: 'vSheCJ',
left: 183.5185185185185,
top: 175.5092592592593,
width: 605.1851851851851,
height: 185.18518518518516,
viewBox: [200, 200],
path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z',
fill: '#5b9bd5',
fixedRatio: false,
rotate: 0
},
{
type: 'shape',
id: 'Mpwv7x',
left: 211.29629629629628,
top: 201.80555555555557,
width: 605.1851851851851,
height: 185.18518518518516,
viewBox: [200, 200],
path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z',
fill: '#5b9bd5',
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=\"font-size: 80px;\"><span style=\"color: rgb(255, 255, 255);\">感谢观看</span></span></strong></p>',
rotate: 0,
defaultFontName: '',
defaultColor: '#333',
wordSpace: 5
}
],
background: {
type: 'solid',
color: '#fff',
},
},
]

View File

@ -1,19 +0,0 @@
import type { SlideTheme } from '@/types/slides'
export const theme: SlideTheme = {
themeColor: '#5b9bd5',
fontColor: '#333',
fontName: '',
backgroundColor: '#fff',
shadow: {
h: 3,
v: 3,
blur: 2,
color: '#808080',
},
outline: {
width: 2,
color: '#525252',
style: 'solid',
},
}

33
src/services/config.ts Normal file
View File

@ -0,0 +1,33 @@
import axios from 'axios'
import message from '@/utils/message'
const instance = axios.create({ timeout: 1000 * 300 })
instance.interceptors.response.use(
response => {
if (response.status >= 200 && response.status < 400) {
return Promise.resolve(response.data)
}
message.error('未知的请求错误!')
return Promise.reject(response)
},
error => {
if (error && error.response) {
if (error.response.status >= 400 && error.response.status < 500) {
return Promise.reject(error.message)
}
else if (error.response.status >= 500) {
return Promise.reject(error.message)
}
message.error('服务器遇到未知错误!')
return Promise.reject(error.message)
}
message.error('连接到服务器失败 或 服务器响应超时!')
return Promise.reject(error)
}
)
export default instance

7
src/services/index.ts Normal file
View File

@ -0,0 +1,7 @@
import axios from './config'
export default {
getMockData(filename: string): Promise<any> {
return axios.get(`/mocks/${filename}.json`)
},
}

View File

@ -2,9 +2,6 @@ import { defineStore } from 'pinia'
import tinycolor from 'tinycolor2'
import { omit } from 'lodash'
import type { Slide, SlideTheme, PPTElement, PPTAnimation } from '@/types/slides'
import { slides } from '@/mocks/slides'
import { theme } from '@/mocks/theme'
import { layouts } from '@/mocks/layout'
interface RemovePropData {
id: string
@ -29,16 +26,34 @@ export interface SlidesState {
slideIndex: number
viewportSize: number
viewportRatio: number
_layouts: Slide[]
}
export const useSlidesStore = defineStore('slides', {
state: (): SlidesState => ({
title: '未命名演示文稿', // 幻灯片标题
theme: theme, // 主题样式
slides: slides, // 幻灯片页面数据
theme: {
themeColor: '#5b9bd5',
fontColor: '#333',
fontName: '',
backgroundColor: '#fff',
shadow: {
h: 3,
v: 3,
blur: 2,
color: '#808080',
},
outline: {
width: 2,
color: '#525252',
style: 'solid',
},
}, // 主题样式
slides: [], // 幻灯片页面数据
slideIndex: 0, // 当前页面索引
viewportSize: 1000, // 可视区域宽度基数
viewportRatio: 0.5625, // 可视区域比例默认16:9
_layouts: [], // 布局模板
}),
getters: {
@ -97,7 +112,7 @@ export const useSlidesStore = defineStore('slides', {
const subColor = tinycolor(fontColor).isDark() ? 'rgba(230, 230, 230, 0.5)' : 'rgba(180, 180, 180, 0.5)'
const layoutsString = JSON.stringify(layouts)
const layoutsString = JSON.stringify(state._layouts)
.replace(/{{themeColor}}/g, themeColor)
.replace(/{{fontColor}}/g, fontColor)
.replace(/{{fontName}}/g, fontName)
@ -130,6 +145,10 @@ export const useSlidesStore = defineStore('slides', {
this.slides = slides
},
setLayouts(layouts: Slide[]) {
this._layouts = layouts
},
addSlide(slide: Slide | Slide[]) {
const slides = Array.isArray(slide) ? slide : [slide]
for (const slide of slides) {

View File

@ -3,18 +3,19 @@
<div class="left">
<Popover trigger="click" placement="bottom-start" v-model:value="mainMenuVisible">
<template #content>
<FileInput accept=".pptist" @change="files => {
importSpecificFile(files)
mainMenuVisible = false
}">
<PopoverMenuItem>导入 pptist 文件</PopoverMenuItem>
</FileInput>
<PopoverMenuItem @click="AIPPT(); mainMenuVisible = false">AI PPT测试版</PopoverMenuItem>
<FileInput accept="application/vnd.openxmlformats-officedocument.presentationml.presentation" @change="files => {
importPPTXFile(files)
mainMenuVisible = false
}">
<PopoverMenuItem>导入 pptx 文件测试版</PopoverMenuItem>
</FileInput>
<FileInput accept=".pptist" @change="files => {
importSpecificFile(files)
mainMenuVisible = false
}">
<PopoverMenuItem>导入 pptist 文件</PopoverMenuItem>
</FileInput>
<PopoverMenuItem @click="setDialogForExport('pptx')">导出文件</PopoverMenuItem>
<PopoverMenuItem @click="resetSlides(); mainMenuVisible = false">重置幻灯片</PopoverMenuItem>
<PopoverMenuItem @click="openMarkupPanel(); mainMenuVisible = false">幻灯片类型标注</PopoverMenuItem>
@ -83,6 +84,7 @@ import { useMainStore, useSlidesStore } from '@/store'
import useScreening from '@/hooks/useScreening'
import useImport from '@/hooks/useImport'
import useSlideHandler from '@/hooks/useSlideHandler'
import useAIPPT from '@/hooks/useAIPPT'
import type { DialogForExportTypes } from '@/types/export'
import HotkeyDoc from './HotkeyDoc.vue'
@ -99,6 +101,7 @@ const { title } = storeToRefs(slidesStore)
const { enterScreening, enterScreeningFromStart } = useScreening()
const { importSpecificFile, importPPTXFile, exporting } = useImport()
const { resetSlides } = useSlideHandler()
const { AIPPT } = useAIPPT()
const mainMenuVisible = ref(false)
const hotkeyDrawerVisible = ref(false)