github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 替换Popover、Select，完全移除Antdv

Browse Source
This commit is contained in:
pipipi-pikachu 2023-10-04 22:00:08 +08:00
parent 9a339a52a9
commit 3758aab0cf
29 changed files with 526 additions and 887 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

388
package-lock.json generated
View File

@ -10,7 +10,6 @@
"dependencies": { "dependencies": {
"@icon-park/vue-next": "^1.4.2", "@icon-park/vue-next": "^1.4.2",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"ant-design-vue": "^4.0.0",
"chartist": "^1.3.0", "chartist": "^1.3.0",
"clipboard": "^2.0.11", "clipboard": "^2.0.11",
"core-js": "^3.8.3", "core-js": "^3.8.3",
@ -114,31 +113,6 @@
"node": ">=6.0.0" "node": ">=6.0.0"
} }
}, },
"node_modules/@ant-design/colors": {
"version": "6.0.0",
"resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz",
"integrity": "sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==",
"dependencies": {
"@ctrl/tinycolor": "^3.4.0"
}
},
"node_modules/@ant-design/icons-svg": {
"version": "4.2.1",
"resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
"integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
},
"node_modules/@ant-design/icons-vue": {
"version": "6.1.0",
"resolved": "https://registry.npmmirror.com/@ant-design/icons-vue/-/icons-vue-6.1.0.tgz",
"integrity": "sha512-EX6bYm56V+ZrKN7+3MT/ubDkvJ5rK/O2t380WFRflDcVFgsvl3NLH7Wxeau6R8DbrO5jWR6DSTC3B6gYFp77AA==",
"dependencies": {
"@ant-design/colors": "^6.0.0",
"@ant-design/icons-svg": "^4.2.1"
},
"peerDependencies": {
"vue": ">=3.0.3"
}
},
"node_modules/@apideck/better-ajv-errors": { "node_modules/@apideck/better-ajv-errors": {
"version": "0.3.6", "version": "0.3.6",
"resolved": "https://registry.npmmirror.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz", "resolved": "https://registry.npmmirror.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
@ -1962,6 +1936,7 @@
"version": "7.22.6", "version": "7.22.6",
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.6.tgz", "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.6.tgz",
"integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==", "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
"dev": true,
"dependencies": { "dependencies": {
"regenerator-runtime": "^0.13.11" "regenerator-runtime": "^0.13.11"
}, },
@ -2332,14 +2307,6 @@
"postcss-selector-parser": "^6.0.13" "postcss-selector-parser": "^6.0.13"
} }
}, },
"node_modules/@ctrl/tinycolor": {
"version": "3.6.0",
"resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz",
"integrity": "sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==",
"engines": {
"node": ">=10"
}
},
"node_modules/@discoveryjs/json-ext": { "node_modules/@discoveryjs/json-ext": {
"version": "0.5.7", "version": "0.5.7",
"resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@ -2349,16 +2316,6 @@
"node": ">=10.0.0" "node": ">=10.0.0"
} }
}, },
"node_modules/@emotion/hash": {
"version": "0.9.1",
"resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.1.tgz",
"integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
},
"node_modules/@emotion/unitless": {
"version": "0.8.1",
"resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz",
"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
},
"node_modules/@eslint-community/eslint-utils": { "node_modules/@eslint-community/eslint-utils": {
"version": "4.4.0", "version": "4.4.0",
"resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", "resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@ -2787,15 +2744,6 @@
"integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==", "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
"dev": true "dev": true
}, },
"node_modules/@simonwep/pickr": {
"version": "1.8.2",
"resolved": "https://registry.npmmirror.com/@simonwep/pickr/-/pickr-1.8.2.tgz",
"integrity": "sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==",
"dependencies": {
"core-js": "^3.15.1",
"nanopop": "^2.1.0"
}
},
"node_modules/@sinclair/typebox": { "node_modules/@sinclair/typebox": {
"version": "0.27.8", "version": "0.27.8",
"resolved": "https://registry.npmmirror.com/@sinclair/typebox/-/typebox-0.27.8.tgz", "resolved": "https://registry.npmmirror.com/@sinclair/typebox/-/typebox-0.27.8.tgz",
@ -4502,41 +4450,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/ant-design-vue": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-4.0.0.tgz",
"integrity": "sha512-6V8DxHPv3HJYDdv48W/KFOUjeZDsYJhFlk13HFSKCJSR2MQs4YnPIAC+rWie9vYcVEKbO+cQDqiOM3cBoHMNUQ==",
"dependencies": {
"@ant-design/colors": "^6.0.0",
"@ant-design/icons-vue": "^6.1.0",
"@babel/runtime": "^7.10.5",
"@ctrl/tinycolor": "^3.5.0",
"@emotion/hash": "^0.9.0",
"@emotion/unitless": "^0.8.0",
"@simonwep/pickr": "~1.8.0",
"array-tree-filter": "^2.1.0",
"async-validator": "^4.0.0",
"csstype": "^3.1.1",
"dayjs": "^1.10.5",
"dom-align": "^1.12.1",
"dom-scroll-into-view": "^2.0.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.15",
"resize-observer-polyfill": "^1.5.1",
"scroll-into-view-if-needed": "^2.2.25",
"shallow-equal": "^1.0.0",
"stylis": "^4.1.3",
"throttle-debounce": "^5.0.0",
"vue-types": "^3.0.0",
"warning": "^4.0.0"
},
"engines": {
"node": ">=12.22.0"
},
"peerDependencies": {
"vue": ">=3.2.0"
}
},
"node_modules/any-promise": { "node_modules/any-promise": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz", "resolved": "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz",
@ -4596,11 +4509,6 @@
"integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==", "integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==",
"dev": true "dev": true
}, },
"node_modules/array-tree-filter": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
"integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
},
"node_modules/array-union": { "node_modules/array-union": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz", "resolved": "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz",
@ -4637,11 +4545,6 @@
"lodash": "^4.17.14" "lodash": "^4.17.14"
} }
}, },
"node_modules/async-validator": {
"version": "4.2.5",
"resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
"integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
},
"node_modules/at-least-node": { "node_modules/at-least-node": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz", "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@ -5486,11 +5389,6 @@
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true "dev": true
}, },
"node_modules/compute-scroll-into-view": {
"version": "1.0.20",
"resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
"integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
},
"node_modules/concat-map": { "node_modules/concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@ -5991,11 +5889,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/dayjs": {
"version": "1.11.9",
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.9.tgz",
"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
},
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
@ -6191,11 +6084,6 @@
"node": ">=6.0.0" "node": ">=6.0.0"
} }
}, },
"node_modules/dom-align": {
"version": "1.12.4",
"resolved": "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.4.tgz",
"integrity": "sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw=="
},
"node_modules/dom-converter": { "node_modules/dom-converter": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz", "resolved": "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz",
@ -6205,11 +6093,6 @@
"utila": "~0.4" "utila": "~0.4"
} }
}, },
"node_modules/dom-scroll-into-view": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz",
"integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w=="
},
"node_modules/dom-serializer": { "node_modules/dom-serializer": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz", "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz",
@ -8628,7 +8511,8 @@
"node_modules/js-tokens": { "node_modules/js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true
}, },
"node_modules/js-yaml": { "node_modules/js-yaml": {
"version": "4.1.0", "version": "4.1.0",
@ -8920,11 +8804,6 @@
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz", "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
}, },
"node_modules/lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"node_modules/lodash.camelcase": { "node_modules/lodash.camelcase": {
"version": "4.3.0", "version": "4.3.0",
"resolved": "https://registry.npmmirror.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", "resolved": "https://registry.npmmirror.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@ -9150,17 +9029,6 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
"bin": {
"loose-envify": "cli.js"
}
},
"node_modules/lower-case": { "node_modules/lower-case": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmmirror.com/lower-case/-/lower-case-2.0.2.tgz", "resolved": "https://registry.npmmirror.com/lower-case/-/lower-case-2.0.2.tgz",
@ -9543,11 +9411,6 @@
"node": "^14 || ^16 || >=18" "node": "^14 || ^16 || >=18"
} }
}, },
"node_modules/nanopop": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/nanopop/-/nanopop-2.3.0.tgz",
"integrity": "sha512-fzN+T2K7/Ah25XU02MJkPZ5q4Tj5FpjmIYq4rvoHX4yb16HzFdCO6JxFFn5Y/oBhQ8no8fUZavnyIv9/+xkBBw=="
},
"node_modules/natural-compare": { "node_modules/natural-compare": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz", "resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz",
@ -11410,7 +11273,8 @@
"node_modules/regenerator-runtime": { "node_modules/regenerator-runtime": {
"version": "0.13.11", "version": "0.13.11",
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
"dev": true
}, },
"node_modules/regenerator-transform": { "node_modules/regenerator-transform": {
"version": "0.15.1", "version": "0.15.1",
@ -11524,11 +11388,6 @@
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
"dev": true "dev": true
}, },
"node_modules/resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"node_modules/resolve": { "node_modules/resolve": {
"version": "1.22.2", "version": "1.22.2",
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.2.tgz", "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.2.tgz",
@ -11798,14 +11657,6 @@
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true "dev": true
}, },
"node_modules/scroll-into-view-if-needed": {
"version": "2.2.31",
"resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
"integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
"dependencies": {
"compute-scroll-into-view": "^1.0.20"
}
},
"node_modules/select": { "node_modules/select": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz", "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
@ -12032,11 +11883,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/shallow-equal": {
"version": "1.2.1",
"resolved": "https://registry.npmmirror.com/shallow-equal/-/shallow-equal-1.2.1.tgz",
"integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
},
"node_modules/shebang-command": { "node_modules/shebang-command": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz", "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@ -12794,11 +12640,6 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/stylis": {
"version": "4.3.0",
"resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.0.tgz",
"integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
},
"node_modules/supports-color": { "node_modules/supports-color": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz", "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
@ -13145,14 +12986,6 @@
"node": ">= 10.13.0" "node": ">= 10.13.0"
} }
}, },
"node_modules/throttle-debounce": {
"version": "5.0.0",
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
"integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
"engines": {
"node": ">=12.22"
}
},
"node_modules/through": { "node_modules/through": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz", "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
@ -13702,28 +13535,6 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "dev": true
}, },
"node_modules/vue-types": {
"version": "3.0.2",
"resolved": "https://registry.npmmirror.com/vue-types/-/vue-types-3.0.2.tgz",
"integrity": "sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==",
"dependencies": {
"is-plain-object": "3.0.1"
},
"engines": {
"node": ">=10.15.0"
},
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-types/node_modules/is-plain-object": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-3.0.1.tgz",
"integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/vuedraggable": { "node_modules/vuedraggable": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz", "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
@ -13740,14 +13551,6 @@
"resolved": "https://registry.npmmirror.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz", "resolved": "https://registry.npmmirror.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==" "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
}, },
"node_modules/warning": {
"version": "4.0.3",
"resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/watchpack": { "node_modules/watchpack": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz", "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
@ -14794,28 +14597,6 @@
"@jridgewell/trace-mapping": "^0.3.9" "@jridgewell/trace-mapping": "^0.3.9"
} }
}, },
"@ant-design/colors": {
"version": "6.0.0",
"resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz",
"integrity": "sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==",
"requires": {
"@ctrl/tinycolor": "^3.4.0"
}
},
"@ant-design/icons-svg": {
"version": "4.2.1",
"resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
"integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
},
"@ant-design/icons-vue": {
"version": "6.1.0",
"resolved": "https://registry.npmmirror.com/@ant-design/icons-vue/-/icons-vue-6.1.0.tgz",
"integrity": "sha512-EX6bYm56V+ZrKN7+3MT/ubDkvJ5rK/O2t380WFRflDcVFgsvl3NLH7Wxeau6R8DbrO5jWR6DSTC3B6gYFp77AA==",
"requires": {
"@ant-design/colors": "^6.0.0",
"@ant-design/icons-svg": "^4.2.1"
}
},
"@apideck/better-ajv-errors": { "@apideck/better-ajv-errors": {
"version": "0.3.6", "version": "0.3.6",
"resolved": "https://registry.npmmirror.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz", "resolved": "https://registry.npmmirror.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
@ -16081,6 +15862,7 @@
"version": "7.22.6", "version": "7.22.6",
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.6.tgz", "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.6.tgz",
"integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==", "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
"dev": true,
"requires": { "requires": {
"regenerator-runtime": "^0.13.11" "regenerator-runtime": "^0.13.11"
} }
@ -16365,27 +16147,12 @@
"dev": true, "dev": true,
"requires": {} "requires": {}
}, },
"@ctrl/tinycolor": {
"version": "3.6.0",
"resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz",
"integrity": "sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ=="
},
"@discoveryjs/json-ext": { "@discoveryjs/json-ext": {
"version": "0.5.7", "version": "0.5.7",
"resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==", "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
"dev": true "dev": true
}, },
"@emotion/hash": {
"version": "0.9.1",
"resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.1.tgz",
"integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
},
"@emotion/unitless": {
"version": "0.8.1",
"resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz",
"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
},
"@eslint-community/eslint-utils": { "@eslint-community/eslint-utils": {
"version": "4.4.0", "version": "4.4.0",
"resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", "resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@ -16731,15 +16498,6 @@
"integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==", "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
"dev": true "dev": true
}, },
"@simonwep/pickr": {
"version": "1.8.2",
"resolved": "https://registry.npmmirror.com/@simonwep/pickr/-/pickr-1.8.2.tgz",
"integrity": "sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==",
"requires": {
"core-js": "^3.15.1",
"nanopop": "^2.1.0"
}
},
"@sinclair/typebox": { "@sinclair/typebox": {
"version": "0.27.8", "version": "0.27.8",
"resolved": "https://registry.npmmirror.com/@sinclair/typebox/-/typebox-0.27.8.tgz", "resolved": "https://registry.npmmirror.com/@sinclair/typebox/-/typebox-0.27.8.tgz",
@ -18158,35 +17916,6 @@
"color-convert": "^2.0.1" "color-convert": "^2.0.1"
} }
}, },
"ant-design-vue": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-4.0.0.tgz",
"integrity": "sha512-6V8DxHPv3HJYDdv48W/KFOUjeZDsYJhFlk13HFSKCJSR2MQs4YnPIAC+rWie9vYcVEKbO+cQDqiOM3cBoHMNUQ==",
"requires": {
"@ant-design/colors": "^6.0.0",
"@ant-design/icons-vue": "^6.1.0",
"@babel/runtime": "^7.10.5",
"@ctrl/tinycolor": "^3.5.0",
"@emotion/hash": "^0.9.0",
"@emotion/unitless": "^0.8.0",
"@simonwep/pickr": "~1.8.0",
"array-tree-filter": "^2.1.0",
"async-validator": "^4.0.0",
"csstype": "^3.1.1",
"dayjs": "^1.10.5",
"dom-align": "^1.12.1",
"dom-scroll-into-view": "^2.0.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.15",
"resize-observer-polyfill": "^1.5.1",
"scroll-into-view-if-needed": "^2.2.25",
"shallow-equal": "^1.0.0",
"stylis": "^4.1.3",
"throttle-debounce": "^5.0.0",
"vue-types": "^3.0.0",
"warning": "^4.0.0"
}
},
"any-promise": { "any-promise": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz", "resolved": "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz",
@ -18243,11 +17972,6 @@
"integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==", "integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==",
"dev": true "dev": true
}, },
"array-tree-filter": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
"integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
},
"array-union": { "array-union": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz", "resolved": "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz",
@ -18275,11 +17999,6 @@
"lodash": "^4.17.14" "lodash": "^4.17.14"
} }
}, },
"async-validator": {
"version": "4.2.5",
"resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
"integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
},
"at-least-node": { "at-least-node": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz", "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@ -18971,11 +18690,6 @@
} }
} }
}, },
"compute-scroll-into-view": {
"version": "1.0.20",
"resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
"integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
},
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@ -19350,11 +19064,6 @@
"integrity": "sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==", "integrity": "sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==",
"dev": true "dev": true
}, },
"dayjs": {
"version": "1.11.9",
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.9.tgz",
"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
},
"debug": { "debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
@ -19501,11 +19210,6 @@
"esutils": "^2.0.2" "esutils": "^2.0.2"
} }
}, },
"dom-align": {
"version": "1.12.4",
"resolved": "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.4.tgz",
"integrity": "sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw=="
},
"dom-converter": { "dom-converter": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz", "resolved": "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz",
@ -19515,11 +19219,6 @@
"utila": "~0.4" "utila": "~0.4"
} }
}, },
"dom-scroll-into-view": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz",
"integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w=="
},
"dom-serializer": { "dom-serializer": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz", "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz",
@ -21488,7 +21187,8 @@
"js-tokens": { "js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true
}, },
"js-yaml": { "js-yaml": {
"version": "4.1.0", "version": "4.1.0",
@ -21728,11 +21428,6 @@
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz", "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
}, },
"lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"lodash.camelcase": { "lodash.camelcase": {
"version": "4.3.0", "version": "4.3.0",
"resolved": "https://registry.npmmirror.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", "resolved": "https://registry.npmmirror.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@ -21927,14 +21622,6 @@
} }
} }
}, },
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
},
"lower-case": { "lower-case": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmmirror.com/lower-case/-/lower-case-2.0.2.tgz", "resolved": "https://registry.npmmirror.com/lower-case/-/lower-case-2.0.2.tgz",
@ -22242,11 +21929,6 @@
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-4.0.2.tgz", "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-4.0.2.tgz",
"integrity": "sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==" "integrity": "sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw=="
}, },
"nanopop": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/nanopop/-/nanopop-2.3.0.tgz",
"integrity": "sha512-fzN+T2K7/Ah25XU02MJkPZ5q4Tj5FpjmIYq4rvoHX4yb16HzFdCO6JxFFn5Y/oBhQ8no8fUZavnyIv9/+xkBBw=="
},
"natural-compare": { "natural-compare": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz", "resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz",
@ -23669,7 +23351,8 @@
"regenerator-runtime": { "regenerator-runtime": {
"version": "0.13.11", "version": "0.13.11",
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
"dev": true
}, },
"regenerator-transform": { "regenerator-transform": {
"version": "0.15.1", "version": "0.15.1",
@ -23764,11 +23447,6 @@
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
"dev": true "dev": true
}, },
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"resolve": { "resolve": {
"version": "1.22.2", "version": "1.22.2",
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.2.tgz", "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.2.tgz",
@ -23975,14 +23653,6 @@
} }
} }
}, },
"scroll-into-view-if-needed": {
"version": "2.2.31",
"resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
"integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
"requires": {
"compute-scroll-into-view": "^1.0.20"
}
},
"select": { "select": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz", "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
@ -24184,11 +23854,6 @@
"kind-of": "^6.0.2" "kind-of": "^6.0.2"
} }
}, },
"shallow-equal": {
"version": "1.2.1",
"resolved": "https://registry.npmmirror.com/shallow-equal/-/shallow-equal-1.2.1.tgz",
"integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
},
"shebang-command": { "shebang-command": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz", "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@ -24803,11 +24468,6 @@
} }
} }
}, },
"stylis": {
"version": "4.3.0",
"resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.0.tgz",
"integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
},
"supports-color": { "supports-color": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz", "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
@ -25080,11 +24740,6 @@
} }
} }
}, },
"throttle-debounce": {
"version": "5.0.0",
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
"integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg=="
},
"through": { "through": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz", "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
@ -25510,21 +25165,6 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "dev": true
}, },
"vue-types": {
"version": "3.0.2",
"resolved": "https://registry.npmmirror.com/vue-types/-/vue-types-3.0.2.tgz",
"integrity": "sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==",
"requires": {
"is-plain-object": "3.0.1"
},
"dependencies": {
"is-plain-object": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-3.0.1.tgz",
"integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g=="
}
}
},
"vuedraggable": { "vuedraggable": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz", "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
@ -25538,14 +25178,6 @@
"resolved": "https://registry.npmmirror.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz", "resolved": "https://registry.npmmirror.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==" "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
}, },
"warning": {
"version": "4.0.3",
"resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"requires": {
"loose-envify": "^1.0.0"
}
},
"watchpack": { "watchpack": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz", "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",

1
package.json
View File

@ -11,7 +11,6 @@
"dependencies": { "dependencies": {
"@icon-park/vue-next": "^1.4.2", "@icon-park/vue-next": "^1.4.2",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"ant-design-vue": "^4.0.0",
"chartist": "^1.3.0", "chartist": "^1.3.0",
"clipboard": "^2.0.11", "clipboard": "^2.0.11",
"core-js": "^3.8.3", "core-js": "^3.8.3",

19
src/App.vue
View File

@ -1,18 +1,7 @@
<template> <template>
<ConfigProvider <Screen v-if="screening" />
:theme="{ <Editor v-else-if="_isPC" />
token: { <Mobile v-else />
colorPrimary: '#d14424',
colorText: '#41464b',
borderRadius: 2,
fontSize: 13,
},
}"
>
<Screen v-if="screening" />
<Editor v-else-if="_isPC" />
<Mobile v-else />
</ConfigProvider>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -27,8 +16,6 @@ import Editor from './views/Editor/index.vue'
import Screen from './views/Screen/index.vue' import Screen from './views/Screen/index.vue'
import Mobile from './views/Mobile/index.vue' import Mobile from './views/Mobile/index.vue'
import { ConfigProvider } from 'ant-design-vue'
const _isPC = isPC() const _isPC = isPC()
const mainStore = useMainStore() const mainStore = useMainStore()

2
src/assets/styles/global.scss
View File

@ -130,7 +130,7 @@ textarea {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; width: 5px;
height: 5px; height: 5px;
background-color: #fff; background-color: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: #c1c1c1; background-color: #c1c1c1;

36
src/components/ButtonGroup.vue
View File

@ -12,33 +12,25 @@
.button-group { .button-group {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid #d9d9d9;
border-right: 0;
border-radius: $borderRadius;
overflow: hidden;
::v-deep(.button) { ::v-deep(.button) {
border-radius: 0; border-radius: 0;
border-left-width: 0; border: 0;
border-right-width: 0;
display: inline-block; display: inline-block;
position: relative;
& + .button { &::after {
border-left-width: 1px; content: '';
} width: 1px;
height: 100%;
&:hover { background-color: #d9d9d9;
&.default + .button { position: absolute;
border-left-color: $themeColor; top: 0;
} right: 0;
}
&:first-child {
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
border-left-width: 1px;
}
&:last-child {
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
border-right-width: 1px;
} }
} }
} }

14
src/components/Popover.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="popover" ref="triggerRef"> <div class="popover" :class="{ 'center': center }" ref="triggerRef">
<div class="popover-content" :style="contentStyle" ref="contentRef"> <div class="popover-content" :style="contentStyle" ref="contentRef">
<slot name="content" v-if="contentVisible"></slot> <slot name="content" v-if="contentVisible"></slot>
</div> </div>
@ -14,14 +14,17 @@ import tippy, { type Instance, type Placement } from 'tippy.js'
import 'tippy.js/animations/scale.css' import 'tippy.js/animations/scale.css'
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
value: boolean value?: boolean
trigger?: 'click' | 'mouseenter' trigger?: 'click' | 'mouseenter'
placement?: Placement placement?: Placement
appendTo?: HTMLElement | 'parent' appendTo?: HTMLElement | 'parent'
contentStyle?: CSSProperties contentStyle?: CSSProperties
center?: boolean
}>(), { }>(), {
value: false,
trigger: 'click', trigger: 'click',
placement: 'auto', placement: 'bottom',
center: false,
}) })
const emit = defineEmits<{ const emit = defineEmits<{
@ -70,6 +73,11 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.popover.center {
display: flex;
justify-content: center;
align-items: center;
}
.popover-content { .popover-content {
background-color: #fff; background-color: #fff;
padding: 10px; padding: 10px;

38
src/components/PopoverMenuItem.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<div class="popover-menu-item" :class="{ 'center': center }" @click="emit('click')">
<slot></slot>
</div>
</template>
<script lang="ts" setup>
withDefaults(defineProps<{
center?: boolean
}>(), {
center: false,
})
const emit = defineEmits<{
(event: 'click'): void
}>()
</script>
<style lang="scss" scoped>
.popover-menu-item {
min-width: 80px;
padding: 6px 10px;
border-radius: 2px;
font-size: 13px;
cursor: pointer;
&.center {
text-align: center;
}
&:hover {
background-color: #f1f1f1;
}
& + .popover-menu-item {
margin-top: 2px;
}
}
</style>

28
src/components/Select.vue
View File

@ -23,15 +23,18 @@
<template #content> <template #content>
<div class="options" :style="{ width: width + 2 + 'px' }"> <div class="options" :style="{ width: width + 2 + 'px' }">
<div class="option" <div class="option"
:class="{ 'disabled': option.disabled }" :class="{
'disabled': option.disabled,
'selected': option.value === value,
}"
v-for="option in options" v-for="option in options"
:key="option.key" :key="option.value"
@click="handleSelect(option)" @click="handleSelect(option)"
>{{ option.value }}</div> >{{ option.label }}</div>
</div> </div>
</template> </template>
<div class="select" ref="selectRef"> <div class="select" ref="selectRef">
<div class="selector">{{ value }}</div> <div class="selector">{{ showLabel }}</div>
<div class="icon"> <div class="icon">
<slot name="icon"> <slot name="icon">
<IconDown :size="14" /> <IconDown :size="14" />
@ -42,16 +45,16 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue' import { computed, onMounted, onUnmounted, ref } from 'vue'
import Popover from './Popover.vue' import Popover from './Popover.vue'
interface SelectOption { interface SelectOption {
key: string label: string
value: string | number value: string | number
disabled?: boolean disabled?: boolean
} }
withDefaults(defineProps<{ const props = withDefaults(defineProps<{
value: string | number value: string | number
options: SelectOption[] options: SelectOption[]
disabled?: boolean disabled?: boolean
@ -59,6 +62,10 @@ withDefaults(defineProps<{
disabled: false, disabled: false,
}) })
const showLabel = computed(() => {
return props.options.find(item => item.value === props.value)?.label || props.value
})
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'update:value', payload: string | number): void (event: 'update:value', payload: string | number): void
}>() }>()
@ -138,11 +145,14 @@ const handleSelect = (option: SelectOption) => {
@include ellipsis-oneline(); @include ellipsis-oneline();
&.disabled { &.disabled {
background-color: #f5f5f5;
color: #b7b7b7; color: #b7b7b7;
cursor: default; cursor: default;
} }
&:not(.disabled):hover { &:not(.disabled, .selected):hover {
background-color: rgba($color: #666, $alpha: .05);
}
&.selected {
background-color: rgba($color: $themeColor, $alpha: .05); background-color: rgba($color: $themeColor, $alpha: .05);
} }
} }

21
src/views/Editor/Canvas/LinkDialog.vue
View File

@ -17,14 +17,8 @@
class="input" class="input"
v-if="type === 'slide'" v-if="type === 'slide'"
v-model:value="slideId" v-model:value="slideId"
> :options="slideOptions"
<SelectOption />
v-for="(slide, index) in slides"
:key="slide.id"
:value="slide.id"
:disabled="currentSlide.id === slide.id"
>幻灯片 {{index + 1}}</SelectOption>
</Select>
<div class="preview" v-if="type === 'slide' && selectedSlide"> <div class="preview" v-if="type === 'slide' && selectedSlide">
<div>预览：</div> <div>预览：</div>
@ -49,8 +43,7 @@ import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
import Tabs from '@/components/Tabs.vue' import Tabs from '@/components/Tabs.vue'
import Input from '@/components/Input.vue' import Input from '@/components/Input.vue'
import Button from '@/components/Button.vue' import Button from '@/components/Button.vue'
import { Select } from 'ant-design-vue' import Select from '@/components/Select.vue'
const SelectOption = Select.Option
type TypeKey = 'web' | 'slide' type TypeKey = 'web' | 'slide'
interface TabItem { interface TabItem {
@ -69,6 +62,14 @@ const type = ref<TypeKey>('web')
const address = ref('') const address = ref('')
const slideId = ref('') const slideId = ref('')
const slideOptions = computed(() => {
return slides.value.map((item, index) => ({
label: `幻灯片 ${index + 1}`,
value: item.id,
disabled: currentSlide.value.id === item.id,
}))
})
slideId.value = slides.value.find(item => item.id !== currentSlide.value.id)?.id || '' slideId.value = slides.value.find(item => item.id !== currentSlide.value.id)?.id || ''
const selectedSlide = computed(() => { const selectedSlide = computed(() => {

57
src/views/Editor/CanvasTool/index.vue
View File

@ -12,10 +12,10 @@
<div class="handler-item group-btn" v-tooltip="'插入文字'"> <div class="handler-item group-btn" v-tooltip="'插入文字'">
<IconFontSize class="icon" :class="{ 'active': creatingElement?.type === 'text' }" @click="drawText()" /> <IconFontSize class="icon" :class="{ 'active': creatingElement?.type === 'text' }" @click="drawText()" />
<Popover trigger="click" v-model:open="textTypeSelectVisible"> <Popover trigger="click" v-model:value="textTypeSelectVisible" style="height: 100%;">
<template #content> <template #content>
<div class="text-type-item" @click="() => { drawText(); textTypeSelectVisible = false }"><IconTextRotationNone /> 横向文本框</div> <PopoverMenuItem center @click="() => { drawText(); textTypeSelectVisible = false }"><IconTextRotationNone /> 横向文本框</PopoverMenuItem>
<div class="text-type-item" @click="() => { drawText(true); textTypeSelectVisible = false }"><IconTextRotationDown /> 竖向文本框</div> <PopoverMenuItem center @click="() => { drawText(true); textTypeSelectVisible = false }"><IconTextRotationDown /> 竖向文本框</PopoverMenuItem>
</template> </template>
<IconDown class="arrow" /> <IconDown class="arrow" />
</Popover> </Popover>
@ -23,25 +23,25 @@
<FileInput @change="files => insertImageElement(files)"> <FileInput @change="files => insertImageElement(files)">
<IconPicture class="handler-item" v-tooltip="'插入图片'" /> <IconPicture class="handler-item" v-tooltip="'插入图片'" />
</FileInput> </FileInput>
<Popover trigger="click" v-model:open="shapePoolVisible"> <Popover trigger="click" v-model:value="shapePoolVisible">
<template #content> <template #content>
<ShapePool @select="shape => drawShape(shape)" /> <ShapePool @select="shape => drawShape(shape)" />
</template> </template>
<IconGraphicDesign class="handler-item" :class="{ 'active': creatingCustomShape || creatingElement?.type === 'shape' }" v-tooltip="'插入形状'" /> <IconGraphicDesign class="handler-item" :class="{ 'active': creatingCustomShape || creatingElement?.type === 'shape' }" v-tooltip="'插入形状'" />
</Popover> </Popover>
<Popover trigger="click" v-model:open="linePoolVisible"> <Popover trigger="click" v-model:value="linePoolVisible">
<template #content> <template #content>
<LinePool @select="line => drawLine(line)" /> <LinePool @select="line => drawLine(line)" />
</template> </template>
<IconConnection class="handler-item" :class="{ 'active': creatingElement?.type === 'line' }" v-tooltip="'插入线条'" /> <IconConnection class="handler-item" :class="{ 'active': creatingElement?.type === 'line' }" v-tooltip="'插入线条'" />
</Popover> </Popover>
<Popover trigger="click" v-model:open="chartPoolVisible"> <Popover trigger="click" v-model:value="chartPoolVisible">
<template #content> <template #content>
<ChartPool @select="chart => { createChartElement(chart); chartPoolVisible = false }" /> <ChartPool @select="chart => { createChartElement(chart); chartPoolVisible = false }" />
</template> </template>
<IconChartProportion class="handler-item" v-tooltip="'插入图表'" /> <IconChartProportion class="handler-item" v-tooltip="'插入图表'" />
</Popover> </Popover>
<Popover trigger="click" v-model:open="tableGeneratorVisible"> <Popover trigger="click" v-model:value="tableGeneratorVisible">
<template #content> <template #content>
<TableGenerator <TableGenerator
@close="tableGeneratorVisible = false" @close="tableGeneratorVisible = false"
@ -51,7 +51,7 @@
<IconInsertTable class="handler-item" v-tooltip="'插入表格'" /> <IconInsertTable class="handler-item" v-tooltip="'插入表格'" />
</Popover> </Popover>
<IconFormula class="handler-item" v-tooltip="'插入公式'" @click="latexEditorVisible = true" /> <IconFormula class="handler-item" v-tooltip="'插入公式'" @click="latexEditorVisible = true" />
<Popover trigger="click" v-model:open="mediaInputVisible"> <Popover trigger="click" v-model:value="mediaInputVisible">
<template #content> <template #content>
<MediaInput <MediaInput
@close="mediaInputVisible = false" @close="mediaInputVisible = false"
@ -65,16 +65,14 @@
<div class="right-handler"> <div class="right-handler">
<IconMinus class="handler-item viewport-size" @click="scaleCanvas('-')" /> <IconMinus class="handler-item viewport-size" @click="scaleCanvas('-')" />
<Popover trigger="click" v-model:open="canvasScaleVisible"> <Popover trigger="click" v-model:value="canvasScaleVisible">
<template #content> <template #content>
<div class="viewport-size-preset"> <PopoverMenuItem
<div center
class="preset-item" v-for="item in canvasScalePresetList"
v-for="item in canvasScalePresetList" :key="item"
:key="item" @click="applyCanvasPresetScale(item)"
@click="applyCanvasPresetScale(item)" >{{item}}%</PopoverMenuItem>
>{{item}}%</div>
</div>
</template> </template>
<span class="text">{{canvasScalePercentage}}</span> <span class="text">{{canvasScalePercentage}}</span>
</Popover> </Popover>
@ -114,7 +112,8 @@ import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
import FileInput from '@/components/FileInput.vue' import FileInput from '@/components/FileInput.vue'
import Modal from '@/components/Modal.vue' import Modal from '@/components/Modal.vue'
import Divider from '@/components/Divider.vue' import Divider from '@/components/Divider.vue'
import { Popover } from 'ant-design-vue' import Popover from '@/components/Popover.vue'
import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
const mainStore = useMainStore() const mainStore = useMainStore()
const { creatingElement, creatingCustomShape } = storeToRefs(mainStore) const { creatingElement, creatingCustomShape } = storeToRefs(mainStore)
@ -300,6 +299,7 @@ const openSraechPanel = () => {
align-items: center; align-items: center;
.text { .text {
display: inline-block;
width: 40px; width: 40px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -309,27 +309,6 @@ const openSraechPanel = () => {
font-size: 13px; font-size: 13px;
} }
} }
.preset-item {
padding: 8px 20px;
text-align: center;
cursor: pointer;
&:hover {
color: $themeColor;
}
}
.text-type-item {
padding: 5px 10px;
cursor: pointer;
&:hover {
background-color: #f1f1f1;
}
& + .text-type-item {
margin-top: 3px;
}
}
@media screen and (width <= 1024px) { @media screen and (width <= 1024px) {
.text { .text {

52
src/views/Editor/EditorHeader/index.vue
View File

@ -1,21 +1,19 @@
<template> <template>
<div class="editor-header"> <div class="editor-header">
<div class="left"> <div class="left">
<Popover trigger="click" placement="bottomLeft" v-model:open="mainMenuVisible"> <Popover trigger="click" placement="bottom-start" v-model:value="mainMenuVisible">
<template #content> <template #content>
<div class="popover-list"> <FileInput accept=".pptist" @change="files => importSpecificFile(files)">
<FileInput accept=".pptist" @change="files => importSpecificFile(files)"> <PopoverMenuItem @click="mainMenuVisible = false">导入 pptist 文件</PopoverMenuItem>
<div class="popover-item" @click="mainMenuVisible = false">导入 pptist 文件</div> </FileInput>
</FileInput> <FileInput accept="application/vnd.openxmlformats-officedocument.presentationml.presentation" @change="files => importPPTXFile(files)">
<FileInput accept="application/vnd.openxmlformats-officedocument.presentationml.presentation" @change="files => importPPTXFile(files)"> <PopoverMenuItem @click="mainMenuVisible = false">导入 pptx 文件（测试版）</PopoverMenuItem>
<div class="popover-item" @click="mainMenuVisible = false">导入 pptx 文件（测试版）</div> </FileInput>
</FileInput> <PopoverMenuItem @click="setDialogForExport('pptx')">导出文件</PopoverMenuItem>
<div class="popover-item" @click="setDialogForExport('pptx')">导出文件</div> <PopoverMenuItem @click="resetSlides(); mainMenuVisible = false">重置幻灯片</PopoverMenuItem>
<div class="popover-item" @click="resetSlides(); mainMenuVisible = false">重置幻灯片</div> <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</PopoverMenuItem>
<div class="popover-item" @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</div> <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</PopoverMenuItem>
<div class="popover-item" @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</div> <PopoverMenuItem @click="mainMenuVisible = false; hotkeyDrawerVisible = true">快捷键</PopoverMenuItem>
<div class="popover-item" @click="mainMenuVisible = false; hotkeyDrawerVisible = true">快捷键</div>
</div>
</template> </template>
<div class="menu-item"><IconHamburgerButton class="icon" /></div> <div class="menu-item"><IconHamburgerButton class="icon" /></div>
</Popover> </Popover>
@ -42,12 +40,10 @@
<div class="menu-item" v-tooltip="'幻灯片放映'" @click="enterScreening()"> <div class="menu-item" v-tooltip="'幻灯片放映'" @click="enterScreening()">
<IconPpt class="icon" /> <IconPpt class="icon" />
</div> </div>
<Popover trigger="click"> <Popover trigger="click" center>
<template #content> <template #content>
<div class="popover-list"> <PopoverMenuItem @click="enterScreeningFromStart()">从头开始</PopoverMenuItem>
<div class="popover-item" @click="enterScreeningFromStart()">从头开始</div> <PopoverMenuItem @click="enterScreening()">从当前页开始</PopoverMenuItem>
<div class="popover-item" @click="enterScreening()">从当前页开始</div>
</div>
</template> </template>
<div class="arrow-btn"><IconDown class="arrow" /></div> <div class="arrow-btn"><IconDown class="arrow" /></div>
</Popover> </Popover>
@ -86,7 +82,8 @@ import FileInput from '@/components/FileInput.vue'
import FullscreenSpin from '@/components/FullscreenSpin.vue' import FullscreenSpin from '@/components/FullscreenSpin.vue'
import Drawer from '@/components/Drawer.vue' import Drawer from '@/components/Drawer.vue'
import Input from '@/components/Input.vue' import Input from '@/components/Input.vue'
import { Popover } from 'ant-design-vue' import Popover from '@/components/Popover.vue'
import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
const mainStore = useMainStore() const mainStore = useMainStore()
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()
@ -207,19 +204,4 @@ const setDialogForExport = (type: DialogForExportTypes) => {
display: inline-block; display: inline-block;
height: 30px; height: 30px;
} }
.popover-list {
display: flex;
flex-direction: column;
padding: 5px;
margin: -12px;
}
.popover-item {
padding: 6px 10px;
border-radius: 2px;
cursor: pointer;
&:hover {
background-color: #f1f1f1;
}
}
</style> </style>

14
src/views/Editor/ExportDialog/ExportPDF.vue
View File

@ -36,11 +36,12 @@
<Select <Select
class="config-item" class="config-item"
v-model:value="count" v-model:value="count"
> :options="[
<SelectOption :value="1">1</SelectOption> { label: '1', value: 1 },
<SelectOption :value="2">2</SelectOption> { label: '2', value: 2 },
<SelectOption :value="3">3</SelectOption> { label: '3', value: 3 },
</Select> ]"
/>
</div> </div>
<div class="row"> <div class="row">
<div class="title">边缘留白：</div> <div class="title">边缘留白：</div>
@ -71,8 +72,7 @@ import Switch from '@/components/Switch.vue'
import Button from '@/components/Button.vue' import Button from '@/components/Button.vue'
import RadioButton from '@/components/RadioButton.vue' import RadioButton from '@/components/RadioButton.vue'
import RadioGroup from '@/components/RadioGroup.vue' import RadioGroup from '@/components/RadioGroup.vue'
import { Select } from 'ant-design-vue' import Select from '@/components/Select.vue'
const SelectOption = Select.Option
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'close'): void (event: 'close'): void

5
src/views/Editor/Thumbnails/index.vue
View File

@ -7,7 +7,7 @@
> >
<div class="add-slide"> <div class="add-slide">
<div class="btn" @click="createSlide()"><IconPlus class="icon" />添加幻灯片</div> <div class="btn" @click="createSlide()"><IconPlus class="icon" />添加幻灯片</div>
<Popover trigger="click" placement="bottomLeft" v-model:open="presetLayoutPopoverVisible"> <Popover trigger="click" placement="bottom-start" v-model:value="presetLayoutPopoverVisible" center>
<template #content> <template #content>
<LayoutPool @select="slide => { createSlideByTemplate(slide); presetLayoutPopoverVisible = false }" /> <LayoutPool @select="slide => { createSlideByTemplate(slide); presetLayoutPopoverVisible = false }" />
</template> </template>
@ -57,8 +57,8 @@ import useLoadSlides from '@/hooks/useLoadSlides'
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue' import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
import LayoutPool from './LayoutPool.vue' import LayoutPool from './LayoutPool.vue'
import Popover from '@/components/Popover.vue'
import Draggable from 'vuedraggable' import Draggable from 'vuedraggable'
import { Popover } from 'ant-design-vue'
const mainStore = useMainStore() const mainStore = useMainStore()
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()
@ -262,6 +262,7 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
} }
.select-btn { .select-btn {
width: 30px; width: 30px;
height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

33
src/views/Editor/Toolbar/ElementAnimationPanel.vue
View File

@ -3,8 +3,9 @@
<div class="element-animation" v-if="handleElement"> <div class="element-animation" v-if="handleElement">
<Popover <Popover
trigger="click" trigger="click"
v-model:open="animationPoolVisible" v-model:value="animationPoolVisible"
@openChange="visible => handlePopoverVisibleChange(visible)" @update:value="visible => handlePopoverVisibleChange(visible)"
style="width: 100%;"
> >
<template #content> <template #content>
<Tabs <Tabs
@ -76,27 +77,28 @@
<Divider style="margin: 16px 0;" /> <Divider style="margin: 16px 0;" />
<div class="config-item"> <div class="config-item">
<div style="flex: 3;">持续时长：</div> <div style="width: 35%;">持续时长：</div>
<NumberInput <NumberInput
:min="500" :min="500"
:max="3000" :max="3000"
:step="500" :step="500"
:value="element.duration" :value="element.duration"
@update:value="value => updateElementAnimationDuration(element.id, value)" @update:value="value => updateElementAnimationDuration(element.id, value)"
style="flex: 5;" style="width: 65%;"
/> />
</div> </div>
<div class="config-item"> <div class="config-item">
<div style="flex: 3;">触发方式：</div> <div style="width: 35%;">触发方式：</div>
<Select <Select
:value="element.trigger" :value="element.trigger"
@change="value => updateElementAnimationTrigger(element.id, value as 'click' | 'meantime' | 'auto')" @update:value="value => updateElementAnimationTrigger(element.id, value as 'click' | 'meantime' | 'auto')"
style="flex: 5;" style="width: 65%;"
> :options="[
<SelectOption value="click">主动触发</SelectOption> { label: '主动触发', value: 'click' },
<SelectOption value="meantime">与上一动画同时</SelectOption> { label: '与上一动画同时', value: 'meantime' },
<SelectOption value="auto">上一动画之后</SelectOption> { label: '上一动画之后', value: 'auto' },
</Select> ]"
/>
</div> </div>
<div class="config-item"> <div class="config-item">
<Button style="flex: 1;" @click="openAnimationPool(element.id)">更换动画</Button> <Button style="flex: 1;" @click="openAnimationPool(element.id)">更换动画</Button>
@ -130,11 +132,8 @@ import Divider from '@/components/Divider.vue'
import Button from '@/components/Button.vue' import Button from '@/components/Button.vue'
import Draggable from 'vuedraggable' import Draggable from 'vuedraggable'
import NumberInput from '@/components/NumberInput.vue' import NumberInput from '@/components/NumberInput.vue'
import { import Select from '@/components/Select.vue'
Popover, import Popover from '@/components/Popover.vue'
Select,
} from 'ant-design-vue'
const SelectOption = Select.Option
const animationEffects: { [key: string]: string } = {} const animationEffects: { [key: string]: string } = {}
for (const effect of ENTER_ANIMATIONS) { for (const effect of ENTER_ANIMATIONS) {

35
src/views/Editor/Toolbar/ElementPositionPanel.vue
View File

@ -28,26 +28,31 @@
<div class="row"> <div class="row">
<NumberInput <NumberInput
prefix="水平："
:step="5" :step="5"
:value="left" :value="left"
@update:value="value => updateLeft(value)" @update:value="value => updateLeft(value)"
style="flex: 4;" style="flex: 4;"
/> >
<template #prefix>
水平：
</template>
</NumberInput>
<div style="flex: 1;"></div> <div style="flex: 1;"></div>
<NumberInput <NumberInput
prefix="垂直："
:step="5" :step="5"
:value="top" :value="top"
@update:value="value => updateTop(value)" @update:value="value => updateTop(value)"
style="flex: 4;" style="flex: 4;"
/> >
<template #prefix>
垂直：
</template>
</NumberInput>
</div> </div>
<template v-if="handleElement!.type !== 'line'"> <template v-if="handleElement!.type !== 'line'">
<div class="row"> <div class="row">
<NumberInput <NumberInput
prefix="宽度："
:min="minSize" :min="minSize"
:max="1500" :max="1500"
:step="5" :step="5"
@ -55,14 +60,17 @@
:value="width" :value="width"
@update:value="value => updateWidth(value)" @update:value="value => updateWidth(value)"
style="flex: 4;" style="flex: 4;"
/> >
<template #prefix>
宽度：
</template>
</NumberInput>
<template v-if="['image', 'shape', 'audio'].includes(handleElement!.type)"> <template v-if="['image', 'shape', 'audio'].includes(handleElement!.type)">
<IconLock style="flex: 1;" class="icon-btn" v-tooltip="'解除宽高比锁定'" @click="updateFixedRatio(false)" v-if="fixedRatio" /> <IconLock style="flex: 1;" class="icon-btn" v-tooltip="'解除宽高比锁定'" @click="updateFixedRatio(false)" v-if="fixedRatio" />
<IconUnlock style="flex: 1;" class="icon-btn" v-tooltip="'宽高比锁定'" @click="updateFixedRatio(true)" v-else /> <IconUnlock style="flex: 1;" class="icon-btn" v-tooltip="'宽高比锁定'" @click="updateFixedRatio(true)" v-else />
</template> </template>
<div style="flex: 1;" v-else></div> <div style="flex: 1;" v-else></div>
<NumberInput <NumberInput
prefix="高度："
:min="minSize" :min="minSize"
:max="800" :max="800"
:step="5" :step="5"
@ -70,7 +78,11 @@
:value="height" :value="height"
@update:value="value => updateHeight(value)" @update:value="value => updateHeight(value)"
style="flex: 4;" style="flex: 4;"
/> >
<template #prefix>
高度：
</template>
</NumberInput>
</div> </div>
</template> </template>
@ -79,14 +91,17 @@
<div class="row"> <div class="row">
<NumberInput <NumberInput
prefix="旋转："
:min="-180" :min="-180"
:max="180" :max="180"
:step="5" :step="5"
:value="rotate" :value="rotate"
@update:value="value => updateRotate(value)" @update:value="value => updateRotate(value)"
style="flex: 8;" style="flex: 8;"
/> >
<template #prefix>
旋转：
</template>
</NumberInput>
<div style="flex: 1;"></div> <div style="flex: 1;"></div>
<div class="text-btn" @click="updateRotate45('-')" style="flex: 5;"><IconRotate /> -45°</div> <div class="text-btn" @click="updateRotate45('-')" style="flex: 5;"><IconRotate /> -45°</div>
<div class="text-btn" @click="updateRotate45('+')" style="flex: 5;"><IconRotate :style="{ transform: 'rotateY(180deg)' }" /> +45°</div> <div class="text-btn" @click="updateRotate45('+')" style="flex: 5;"><IconRotate :style="{ transform: 'rotateY(180deg)' }" /> +45°</div>

6
src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
View File

@ -2,14 +2,14 @@
<div class="audio-style-panel"> <div class="audio-style-panel">
<div class="row"> <div class="row">
<div style="flex: 2;">图标颜色：</div> <div style="flex: 2;">图标颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="handleAudioElement.color" :modelValue="handleAudioElement.color"
@update:modelValue="value => updateAudio({ color: value })" @update:modelValue="value => updateAudio({ color: value })"
/> />
</template> </template>
<ColorButton :color="handleAudioElement.color" style="flex: 3;" /> <ColorButton :color="handleAudioElement.color" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
@ -45,7 +45,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ColorButton from '../common/ColorButton.vue' import ColorButton from '../common/ColorButton.vue'
import ColorPicker from '@/components/ColorPicker/index.vue' import ColorPicker from '@/components/ColorPicker/index.vue'
import Switch from '@/components/Switch.vue' import Switch from '@/components/Switch.vue'
import { Popover } from 'ant-design-vue' import Popover from '@/components/Popover.vue'
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore()) const { handleElement } = storeToRefs(useMainStore())

46
src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
View File

@ -48,60 +48,65 @@
<Divider /> <Divider />
<div class="row"> <div class="row">
<div style="flex: 2;">图例：</div> <div style="width: 40%;">图例：</div>
<Select style="flex: 3;" :value="legend" @change="value => updateLegend(value as '' | 'top' | 'bottom')"> <Select
<SelectOption value="">不显示</SelectOption> style="width: 60%;"
<SelectOption value="top">显示在上方</SelectOption> :value="legend"
<SelectOption value="bottom">显示在下方</SelectOption> @update:value="value => updateLegend(value as '' | 'top' | 'bottom')"
</Select> :options="[
{ label: '不显示', value: '' },
{ label: '显示在上方', value: 'top' },
{ label: '显示在下方', value: 'bottom' },
]"
/>
</div> </div>
<Divider /> <Divider />
<div class="row"> <div class="row">
<div style="flex: 2;">背景填充：</div> <div style="width: 40%;">背景填充：</div>
<Popover trigger="click"> <Popover trigger="click" style="width: 60%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="fill" :modelValue="fill"
@update:modelValue="value => updateFill(value)" @update:modelValue="value => updateFill(value)"
/> />
</template> </template>
<ColorButton :color="fill" style="flex: 3;" /> <ColorButton :color="fill" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">网格颜色：</div> <div style="width: 40%;">网格颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="width: 60%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="gridColor" :modelValue="gridColor"
@update:modelValue="value => updateGridColor(value)" @update:modelValue="value => updateGridColor(value)"
/> />
</template> </template>
<ColorButton :color="gridColor" style="flex: 3;" /> <ColorButton :color="gridColor" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<Divider /> <Divider />
<div class="row" v-for="(color, index) in themeColor" :key="index"> <div class="row" v-for="(color, index) in themeColor" :key="index">
<div style="flex: 2;">{{index === 0 ? '主题配色：' : ''}}</div> <div style="width: 40%;">{{index === 0 ? '主题配色：' : ''}}</div>
<Popover trigger="click"> <Popover trigger="click" style="width: 60%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="color" :modelValue="color"
@update:modelValue="value => updateTheme(value, index)" @update:modelValue="value => updateTheme(value, index)"
/> />
</template> </template>
<div class="color-btn-wrap" style="flex: 3;"> <div class="color-btn-wrap" style="width: 100%;">
<ColorButton :color="color" style="width: 100%;" /> <ColorButton :color="color" style="width: 100%;" />
<div class="delete-color-btn" v-tooltip="'删除'" @click.stop="deleteThemeColor(index)" v-if="index !== 0"><IconCloseSmall /></div> <div class="delete-color-btn" v-tooltip="'删除'" @click.stop="deleteThemeColor(index)" v-if="index !== 0"><IconCloseSmall /></div>
</div> </div>
</Popover> </Popover>
</div> </div>
<ButtonGroup class="row"> <ButtonGroup class="row">
<Popover trigger="click" v-model:open="presetThemesVisible"> <Popover trigger="click" v-model:open="presetThemesVisible" style="width: 40%;">
<template #content> <template #content>
<div class="preset-themes"> <div class="preset-themes">
<div class="preset-theme" v-for="(item, index) in presetChartThemes" :key="index"> <div class="preset-theme" v-for="(item, index) in presetChartThemes" :key="index">
@ -118,7 +123,7 @@
</div> </div>
</div> </div>
</template> </template>
<Button class="no-padding" style="width: 40%;">推荐主题</Button> <Button class="no-padding" style="width: 100%;">推荐主题</Button>
</Popover> </Popover>
<Button <Button
class="no-padding" class="no-padding"
@ -164,11 +169,8 @@ import Divider from '@/components/Divider.vue'
import Checkbox from '@/components/Checkbox.vue' import Checkbox from '@/components/Checkbox.vue'
import Button from '@/components/Button.vue' import Button from '@/components/Button.vue'
import ButtonGroup from '@/components/ButtonGroup.vue' import ButtonGroup from '@/components/ButtonGroup.vue'
import { import Select from '@/components/Select.vue'
Popover, import Popover from '@/components/Popover.vue'
Select,
} from 'ant-design-vue'
const SelectOption = Select.Option
const presetChartThemes = [ const presetChartThemes = [
['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8', '#efa18d'], ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8', '#efa18d'],

6
src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
View File

@ -9,7 +9,7 @@
<ButtonGroup class="row"> <ButtonGroup class="row">
<Button style="width: calc(100% / 6 * 5);" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button> <Button style="width: calc(100% / 6 * 5);" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button>
<Popover trigger="click" v-model:open="clipPanelVisible"> <Popover trigger="click" v-model:value="clipPanelVisible" style="width: calc(100% / 6);">
<template #content> <template #content>
<div class="clip"> <div class="clip">
<div class="title">按形状：</div> <div class="title">按形状：</div>
@ -37,7 +37,7 @@
</template> </template>
</div> </div>
</template> </template>
<Button class="popover-btn" style="width: calc(100% / 6);"><IconDown /></Button> <Button class="popover-btn" style="width: 100%;"><IconDown /></Button>
</Popover> </Popover>
</ButtonGroup> </ButtonGroup>
@ -77,7 +77,7 @@ import FileInput from '@/components/FileInput.vue'
import Divider from '@/components/Divider.vue' import Divider from '@/components/Divider.vue'
import Button from '@/components/Button.vue' import Button from '@/components/Button.vue'
import ButtonGroup from '@/components/ButtonGroup.vue' import ButtonGroup from '@/components/ButtonGroup.vue'
import { Popover } from 'ant-design-vue' import Popover from '@/components/Popover.vue'
const shapeClipPathOptions = CLIPPATHS const shapeClipPathOptions = CLIPPATHS
const ratioClipOptions = [ const ratioClipOptions = [

12
src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
View File

@ -5,25 +5,25 @@
<Divider /> <Divider />
<div class="row"> <div class="row">
<div style="flex: 2;">颜色：</div> <div style="width: 40%;">颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="width: 60%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="handleLatexElement.color" :modelValue="handleLatexElement.color"
@update:modelValue="value => updateLatex({ color: value })" @update:modelValue="value => updateLatex({ color: value })"
/> />
</template> </template>
<ColorButton :color="handleLatexElement.color" style="flex: 3;" /> <ColorButton :color="handleLatexElement.color" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">粗细：</div> <div style="width: 40%;">粗细：</div>
<NumberInput <NumberInput
:min="1" :min="1"
:max="3" :max="3"
:value="handleLatexElement.strokeWidth" :value="handleLatexElement.strokeWidth"
@update:value="value => updateLatex({ strokeWidth: value })" @update:value="value => updateLatex({ strokeWidth: value })"
style="flex: 3;" style="width: 60%;"
/> />
</div> </div>
@ -55,7 +55,7 @@ import Modal from '@/components/Modal.vue'
import Divider from '@/components/Divider.vue' import Divider from '@/components/Divider.vue'
import Button from '@/components/Button.vue' import Button from '@/components/Button.vue'
import NumberInput from '@/components/NumberInput.vue' import NumberInput from '@/components/NumberInput.vue'
import { Popover } from 'ant-design-vue' import Popover from '@/components/Popover.vue'
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore()) const { handleElement } = storeToRefs(useMainStore())

66
src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
View File

@ -1,60 +1,63 @@
<template> <template>
<div class="line-style-panel"> <div class="line-style-panel">
<div class="row"> <div class="row">
<div style="flex: 2;">线条样式：</div> <div style="width: 40%;">线条样式：</div>
<Select <Select
style="flex: 3;" style="width: 60%;"
:value="handleLineElement.style" :value="handleLineElement.style"
@change="value => updateLine({ style: value as 'solid' | 'dashed' })" @update:value="value => updateLine({ style: value as 'solid' | 'dashed' })"
> :options="[
<SelectOption value="solid">实线</SelectOption> { label: '实线', value: 'solid' },
<SelectOption value="dashed">虚线</SelectOption> { label: '虚线', value: 'dashed' },
</Select> ]"
/>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">线条颜色：</div> <div style="width: 40%;">线条颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="width: 60%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="handleLineElement.color" :modelValue="handleLineElement.color"
@update:modelValue="value => updateLine({ color: value })" @update:modelValue="value => updateLine({ color: value })"
/> />
</template> </template>
<ColorButton :color="handleLineElement.color" style="flex: 3;" /> <ColorButton :color="handleLineElement.color" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">线条宽度：</div> <div style="width: 40%;">线条宽度：</div>
<NumberInput <NumberInput
:value="handleLineElement.width" :value="handleLineElement.width"
@update:value="value => updateLine({ width: value })" @update:value="value => updateLine({ width: value })"
style="flex: 3;" style="width: 60%;"
/> />
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">起点样式：</div> <div style="width: 40%;">起点样式：</div>
<Select <Select
style="flex: 3;" style="width: 60%;"
:value="handleLineElement.points[0]" :value="handleLineElement.points[0]"
@change="value => updateLine({ points: [value as 'arrow' | 'dot', handleLineElement.points[1]] })" @update:value="value => updateLine({ points: [value as 'arrow' | 'dot', handleLineElement.points[1]] })"
> :options="[
<SelectOption value="">无</SelectOption> { label: '无', value: '' },
<SelectOption value="arrow">箭头</SelectOption> { label: '箭头', value: 'arrow' },
<SelectOption value="dot">圆点</SelectOption> { label: '圆点', value: 'dot' },
</Select> ]"
/>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">终点样式：</div> <div style="width: 40%;">终点样式：</div>
<Select <Select
style="flex: 3;" style="width: 60%;"
:value="handleLineElement.points[1]" :value="handleLineElement.points[1]"
@change="value => updateLine({ points: [handleLineElement.points[0], value as 'arrow' | 'dot'] })" @update:value="value => updateLine({ points: [handleLineElement.points[0], value as 'arrow' | 'dot'] })"
> :options="[
<SelectOption value="">无</SelectOption> { label: '无', value: '' },
<SelectOption value="arrow">箭头</SelectOption> { label: '箭头', value: 'arrow' },
<SelectOption value="dot">圆点</SelectOption> { label: '圆点', value: 'dot' },
</Select> ]"
/>
</div> </div>
<Divider /> <Divider />
@ -74,11 +77,8 @@ import ColorButton from '../common/ColorButton.vue'
import ColorPicker from '@/components/ColorPicker/index.vue' import ColorPicker from '@/components/ColorPicker/index.vue'
import Divider from '@/components/Divider.vue' import Divider from '@/components/Divider.vue'
import NumberInput from '@/components/NumberInput.vue' import NumberInput from '@/components/NumberInput.vue'
import { import Select from '@/components/Select.vue'
Popover, import Popover from '@/components/Popover.vue'
Select,
} from 'ant-design-vue'
const SelectOption = Select.Option
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore()) const { handleElement } = storeToRefs(useMainStore())

87
src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
View File

@ -1,103 +1,102 @@
<template> <template>
<div class="multi-style-panel"> <div class="multi-style-panel">
<div class="row"> <div class="row">
<div style="flex: 2;">填充颜色：</div> <div style="width: 40%;">填充颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="width: 60%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="fill" :modelValue="fill"
@update:modelValue="value => updateFill(value)" @update:modelValue="value => updateFill(value)"
/> />
</template> </template>
<ColorButton :color="fill" style="flex: 3;" /> <ColorButton :color="fill" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<Divider /> <Divider />
<div class="row"> <div class="row">
<div style="flex: 2;">边框样式：</div> <div style="width: 40%;">边框样式：</div>
<Select <Select
style="flex: 3;" style="width: 60%;"
:value="outline.style" :value="outline.style || ''"
@change="value => updateOutline({ style: value as 'solid' | 'dashed' })" @update:value="value => updateOutline({ style: value as 'solid' | 'dashed' })"
> :options="[
<SelectOption value="solid">实线边框</SelectOption> { label: '实线边框', value: 'solid' },
<SelectOption value="dashed">虚线边框</SelectOption> { label: '虚线边框', value: 'dashed' },
</Select> ]"
/>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">边框颜色：</div> <div style="width: 40%;">边框颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="width: 60%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="outline.color" :modelValue="outline.color"
@update:modelValue="value => updateOutline({ color: value })" @update:modelValue="value => updateOutline({ color: value })"
/> />
</template> </template>
<ColorButton :color="outline.color || '#000'" style="flex: 3;" /> <ColorButton :color="outline.color || '#000'" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">边框粗细：</div> <div style="width: 40%;">边框粗细：</div>
<NumberInput <NumberInput
:value="outline.width || 0" :value="outline.width || 0"
@update:value="value => updateOutline({ width: value })" @update:value="value => updateOutline({ width: value })"
style="flex: 3;" style="width: 60%;"
/> />
</div> </div>
<Divider /> <Divider />
<InputGroup compact class="row"> <SelectGroup class="row">
<Select <Select
style="flex: 3;" style="flex: 3;"
:value="richTextAttrs.fontname" :value="richTextAttrs.fontname"
@change="value => updateFontStyle('fontname', value as string)" @update:value="value => updateFontStyle('fontname', value as string)"
:options="[
...availableFonts,
...WEB_FONTS
]"
> >
<template #suffixIcon><IconFontSize /></template> <template #icon>
<SelectOptGroup label="系统字体"> <IconFontSize />
<SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value"> </template>
<span :style="{ fontFamily: font.value }">{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
<SelectOptGroup label="在线字体">
<SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
<span>{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
</Select> </Select>
<Select <Select
style="flex: 2;" style="flex: 2;"
:value="richTextAttrs.fontsize" :value="richTextAttrs.fontsize"
@change="value => updateFontStyle('fontsize', value as string)" @update:value="value => updateFontStyle('fontsize', value as string)"
:options="fontSizeOptions.map(item => ({
label: item, value: item
}))"
> >
<template #suffixIcon><IconAddText /></template> <template #icon>
<SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize"> <IconAddText />
{{fontsize}} </template>
</SelectOption>
</Select> </Select>
</InputGroup> </SelectGroup>
<ButtonGroup class="row"> <ButtonGroup class="row">
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="richTextAttrs.color" :modelValue="richTextAttrs.color"
@update:modelValue="value => updateFontStyle('color', value)" @update:modelValue="value => updateFontStyle('color', value)"
/> />
</template> </template>
<TextColorButton :color="richTextAttrs.color" style="flex: 3;" v-tooltip="'文字颜色'"> <TextColorButton :color="richTextAttrs.color" style="width: 100%;" v-tooltip="'文字颜色'">
<IconText /> <IconText />
</TextColorButton> </TextColorButton>
</Popover> </Popover>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="richTextAttrs.backcolor" :modelValue="richTextAttrs.backcolor"
@update:modelValue="value => updateFontStyle('backcolor', value)" @update:modelValue="value => updateFontStyle('backcolor', value)"
/> />
</template> </template>
<TextColorButton :color="richTextAttrs.backcolor" style="flex: 3;" v-tooltip="'文字高亮'"> <TextColorButton :color="richTextAttrs.backcolor" style="width: 100%;" v-tooltip="'文字高亮'">
<IconHighLight /> <IconHighLight />
</TextColorButton> </TextColorButton>
</Popover> </Popover>
@ -145,13 +144,9 @@ import ButtonGroup from '@/components/ButtonGroup.vue'
import RadioButton from '@/components/RadioButton.vue' import RadioButton from '@/components/RadioButton.vue'
import RadioGroup from '@/components/RadioGroup.vue' import RadioGroup from '@/components/RadioGroup.vue'
import NumberInput from '@/components/NumberInput.vue' import NumberInput from '@/components/NumberInput.vue'
import { import Select from '@/components/Select.vue'
Popover, import SelectGroup from '@/components/SelectGroup.vue'
Select, import Popover from '@/components/Popover.vue'
Input,
} from 'ant-design-vue'
const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
const InputGroup = Input.Group
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()
const { richTextAttrs, availableFonts, activeElementList } = storeToRefs(useMainStore()) const { richTextAttrs, availableFonts, activeElementList } = storeToRefs(useMainStore())

88
src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
View File

@ -24,55 +24,57 @@
<Select <Select
style="flex: 10;" style="flex: 10;"
:value="fillType" :value="fillType"
@change="value => updateFillType(value as 'fill' | 'gradient')" @update:value="value => updateFillType(value as 'fill' | 'gradient')"
> :options="[
<SelectOption value="fill">纯色填充</SelectOption> { label: '纯色填充', value: 'fill' },
<SelectOption value="gradient">渐变填充</SelectOption> { label: '渐变填充', value: 'gradient' },
</Select> ]"
/>
<div style="flex: 1;"></div> <div style="flex: 1;"></div>
<Popover trigger="click" v-if="fillType === 'fill'"> <Popover trigger="click" v-if="fillType === 'fill'" style="flex: 10;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="fill" :modelValue="fill"
@update:modelValue="value => updateFill(value)" @update:modelValue="value => updateFill(value)"
/> />
</template> </template>
<ColorButton :color="fill" style="flex: 10;" /> <ColorButton :color="fill" style="width: 100%;" />
</Popover> </Popover>
<Select <Select
style="flex: 10;" style="flex: 10;"
:value="gradient.type" :value="gradient.type"
@change="value => updateGradient({ type: value as 'linear' | 'radial' })" @update:value="value => updateGradient({ type: value as 'linear' | 'radial' })"
v-else v-else
> :options="[
<SelectOption value="linear">线性渐变</SelectOption> { label: '线性渐变', value: 'linear' },
<SelectOption value="radial">径向渐变</SelectOption> { label: '径向渐变', value: 'radial' },
</Select> ]"
/>
</div> </div>
<template v-if="fillType === 'gradient'"> <template v-if="fillType === 'gradient'">
<div class="row"> <div class="row">
<div style="flex: 2;">起点颜色：</div> <div style="flex: 2;">起点颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="gradient.color[0]" :modelValue="gradient.color[0]"
@update:modelValue="value => updateGradient({ color: [value, gradient.color[1]] })" @update:modelValue="value => updateGradient({ color: [value, gradient.color[1]] })"
/> />
</template> </template>
<ColorButton :color="gradient.color[0]" style="flex: 3;" /> <ColorButton :color="gradient.color[0]" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">终点颜色：</div> <div style="flex: 2;">终点颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="gradient.color[1]" :modelValue="gradient.color[1]"
@update:modelValue="value => updateGradient({ color: [gradient.color[0], value] })" @update:modelValue="value => updateGradient({ color: [gradient.color[0], value] })"
/> />
</template> </template>
<ColorButton :color="gradient.color[1]" style="flex: 3;" /> <ColorButton :color="gradient.color[1]" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<div class="row" v-if="gradient.type === 'linear'"> <div class="row" v-if="gradient.type === 'linear'">
@ -93,57 +95,55 @@
<Divider /> <Divider />
<template v-if="handleShapeElement.text?.content"> <template v-if="handleShapeElement.text?.content">
<InputGroup compact class="row"> <SelectGroup class="row">
<Select <Select
class="font-select" class="font-select"
style="flex: 3;" style="flex: 3;"
:value="richTextAttrs.fontname" :value="richTextAttrs.fontname"
@change="value => emitRichTextCommand('fontname', value as string)" @update:value="value => emitRichTextCommand('fontname', value as string)"
:options="[
...availableFonts,
...WEB_FONTS
]"
> >
<template #suffixIcon><IconFontSize /></template> <template #icon>
<SelectOptGroup label="系统字体"> <IconFontSize />
<SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value"> </template>
<span :style="{ fontFamily: font.value }">{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
<SelectOptGroup label="在线字体">
<SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
<span>{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
</Select> </Select>
<Select <Select
style="flex: 2;" style="flex: 2;"
:value="richTextAttrs.fontsize" :value="richTextAttrs.fontsize"
@change="value => emitRichTextCommand('fontsize', value as string)" @update:value="value => emitRichTextCommand('fontsize', value as string)"
:options="fontSizeOptions.map(item => ({
label: item, value: item
}))"
> >
<template #suffixIcon><IconAddText /></template> <template #icon>
<SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize"> <IconAddText />
{{fontsize}} </template>
</SelectOption>
</Select> </Select>
</InputGroup> </SelectGroup>
<ButtonGroup class="row"> <ButtonGroup class="row">
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="richTextAttrs.color" :modelValue="richTextAttrs.color"
@update:modelValue="value => emitRichTextCommand('color', value)" @update:modelValue="value => emitRichTextCommand('color', value)"
/> />
</template> </template>
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="flex: 3;"> <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="width: 100%;">
<IconText /> <IconText />
</TextColorButton> </TextColorButton>
</Popover> </Popover>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="richTextAttrs.backcolor" :modelValue="richTextAttrs.backcolor"
@update:modelValue="value => emitRichTextCommand('backcolor', value)" @update:modelValue="value => emitRichTextCommand('backcolor', value)"
/> />
</template> </template>
<TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="flex: 3;"> <TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="width: 100%;">
<IconHighLight /> <IconHighLight />
</TextColorButton> </TextColorButton>
</Popover> </Popover>
@ -263,13 +263,9 @@ import Button from '@/components/Button.vue'
import ButtonGroup from '@/components/ButtonGroup.vue' import ButtonGroup from '@/components/ButtonGroup.vue'
import RadioButton from '@/components/RadioButton.vue' import RadioButton from '@/components/RadioButton.vue'
import RadioGroup from '@/components/RadioGroup.vue' import RadioGroup from '@/components/RadioGroup.vue'
import { import Select from '@/components/Select.vue'
Popover, import SelectGroup from '@/components/SelectGroup.vue'
Select, import Popover from '@/components/Popover.vue'
Input,
} from 'ant-design-vue'
const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
const InputGroup = Input.Group
const mainStore = useMainStore() const mainStore = useMainStore()
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()

76
src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
View File

@ -1,55 +1,53 @@
<template> <template>
<div class="table-style-panel"> <div class="table-style-panel">
<InputGroup compact class="row"> <SelectGroup class="row">
<Select <Select
style="flex: 3;" style="width: 50%;"
:value="textAttrs.fontname" :value="textAttrs.fontname"
@change="value => updateTextAttrs({ fontname: value as string })" @update:value="value => updateTextAttrs({ fontname: value as string })"
:options="[
...availableFonts,
...WEB_FONTS
]"
> >
<template #suffixIcon><IconFontSize /></template> <template #icon>
<SelectOptGroup label="系统字体"> <IconFontSize />
<SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value"> </template>
<span :style="{ fontFamily: font.value }">{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
<SelectOptGroup label="在线字体">
<SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
<span>{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
</Select> </Select>
<Select <Select
style="flex: 2;" style="width: 50%;"
:value="textAttrs.fontsize" :value="textAttrs.fontsize"
@change="value => updateTextAttrs({ fontsize: value as string })" @update:value="value => updateTextAttrs({ fontsize: value as string })"
:options="fontSizeOptions.map(item => ({
label: item, value: item
}))"
> >
<template #suffixIcon><IconAddText /></template> <template #icon>
<SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize"> <IconAddText />
{{fontsize}} </template>
</SelectOption>
</Select> </Select>
</InputGroup> </SelectGroup>
<ButtonGroup class="row"> <ButtonGroup class="row">
<Popover trigger="click"> <Popover trigger="click" style="width: 50%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="textAttrs.color" :modelValue="textAttrs.color"
@update:modelValue="value => updateTextAttrs({ color: value })" @update:modelValue="value => updateTextAttrs({ color: value })"
/> />
</template> </template>
<TextColorButton v-tooltip="'文字颜色'" :color="textAttrs.color" style="flex: 1;"> <TextColorButton v-tooltip="'文字颜色'" :color="textAttrs.color" style="width: 100%;">
<IconText /> <IconText />
</TextColorButton> </TextColorButton>
</Popover> </Popover>
<Popover trigger="click"> <Popover trigger="click" style="width: 50%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="textAttrs.backcolor" :modelValue="textAttrs.backcolor"
@update:modelValue="value => updateTextAttrs({ backcolor: value })" @update:modelValue="value => updateTextAttrs({ backcolor: value })"
/> />
</template> </template>
<TextColorButton v-tooltip="'单元格填充'" :color="textAttrs.backcolor" style="flex: 1;"> <TextColorButton v-tooltip="'单元格填充'" :color="textAttrs.backcolor" style="width: 100%;">
<IconFill /> <IconFill />
</TextColorButton> </TextColorButton>
</Popover> </Popover>
@ -100,16 +98,16 @@
<Divider /> <Divider />
<div class="row"> <div class="row">
<div style="flex: 2;">行数：</div> <div style="width: 40%;">行数：</div>
<div class="set-count" style="flex: 3;"> <div class="set-count" style="width: 60%;">
<Button class="btn" :disabled="rowCount <= 1" @click="setTableRow(rowCount - 1)"><IconMinus /></Button> <Button class="btn" :disabled="rowCount <= 1" @click="setTableRow(rowCount - 1)"><IconMinus /></Button>
<div class="count-text">{{rowCount}}</div> <div class="count-text">{{rowCount}}</div>
<Button class="btn" :disabled="rowCount >= 30" @click="setTableRow(rowCount + 1)"><IconPlus /></Button> <Button class="btn" :disabled="rowCount >= 30" @click="setTableRow(rowCount + 1)"><IconPlus /></Button>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">列数：</div> <div style="width: 40%;">列数：</div>
<div class="set-count" style="flex: 3;"> <div class="set-count" style="width: 60%;">
<Button class="btn" :disabled="colCount <= 1" @click="setTableCol(colCount - 1)"><IconMinus /></Button> <Button class="btn" :disabled="colCount <= 1" @click="setTableCol(colCount - 1)"><IconMinus /></Button>
<div class="count-text">{{colCount}}</div> <div class="count-text">{{colCount}}</div>
<Button class="btn" :disabled="colCount >= 30" @click="setTableCol(colCount + 1)"><IconPlus /></Button> <Button class="btn" :disabled="colCount >= 30" @click="setTableCol(colCount + 1)"><IconPlus /></Button>
@ -119,8 +117,8 @@
<Divider /> <Divider />
<div class="row theme-switch"> <div class="row theme-switch">
<div style="flex: 2;">启用主题表格：</div> <div style="width: 40%;">启用主题表格：</div>
<div class="switch-wrapper" style="flex: 3;"> <div class="switch-wrapper" style="width: 60%;">
<Switch <Switch
:value="hasTheme" :value="hasTheme"
@update:value="value => toggleTheme(value)" @update:value="value => toggleTheme(value)"
@ -154,15 +152,15 @@
>最后一列</Checkbox> >最后一列</Checkbox>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">主题颜色：</div> <div style="width: 40%;">主题颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="width: 60%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="theme.color" :modelValue="theme.color"
@update:modelValue="value => updateTheme({ color: value })" @update:modelValue="value => updateTheme({ color: value })"
/> />
</template> </template>
<ColorButton :color="theme.color" style="flex: 3;" /> <ColorButton :color="theme.color" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
</template> </template>
@ -190,13 +188,9 @@ import Button from '@/components/Button.vue'
import ButtonGroup from '@/components/ButtonGroup.vue' import ButtonGroup from '@/components/ButtonGroup.vue'
import RadioButton from '@/components/RadioButton.vue' import RadioButton from '@/components/RadioButton.vue'
import RadioGroup from '@/components/RadioGroup.vue' import RadioGroup from '@/components/RadioGroup.vue'
import { import Select from '@/components/Select.vue'
Popover, import SelectGroup from '@/components/SelectGroup.vue'
Select, import Popover from '@/components/Popover.vue'
Input,
} from 'ant-design-vue'
const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
const InputGroup = Input.Group
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()
const { handleElement, handleElementId, selectedTableCells: selectedCells, availableFonts } = storeToRefs(useMainStore()) const { handleElement, handleElementId, selectedTableCells: selectedCells, availableFonts } = storeToRefs(useMainStore())

132
src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
View File

@ -12,57 +12,55 @@
<Divider /> <Divider />
<InputGroup compact class="row"> <SelectGroup class="row">
<Select <Select
class="font-select" class="font-select"
style="flex: 3;" style="width: 50%;"
:value="richTextAttrs.fontname" :value="richTextAttrs.fontname"
@change="value => emitRichTextCommand('fontname', value as string)" @update:value="value => emitRichTextCommand('fontname', value as string)"
:options="[
...availableFonts,
...WEB_FONTS
]"
> >
<template #suffixIcon><IconFontSize /></template> <template #icon>
<SelectOptGroup label="系统字体"> <IconFontSize />
<SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value"> </template>
<span :style="{ fontFamily: font.value }">{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
<SelectOptGroup label="在线字体">
<SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
<span>{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
</Select> </Select>
<Select <Select
style="flex: 2;" style="width: 50%;"
:value="richTextAttrs.fontsize" :value="richTextAttrs.fontsize"
@change="value => emitRichTextCommand('fontsize', value as string)" @update:value="value => emitRichTextCommand('fontsize', value as string)"
:options="fontSizeOptions.map(item => ({
label: item, value: item
}))"
> >
<template #suffixIcon><IconAddText /></template> <template #icon>
<SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize"> <IconAddText />
{{fontsize}} </template>
</SelectOption>
</Select> </Select>
</InputGroup> </SelectGroup>
<ButtonGroup class="row"> <ButtonGroup class="row">
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="richTextAttrs.color" :modelValue="richTextAttrs.color"
@update:modelValue="value => emitRichTextCommand('color', value)" @update:modelValue="value => emitRichTextCommand('color', value)"
/> />
</template> </template>
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="flex: 3;"> <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="width: 100%;">
<IconText /> <IconText />
</TextColorButton> </TextColorButton>
</Popover> </Popover>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="richTextAttrs.backcolor" :modelValue="richTextAttrs.backcolor"
@update:modelValue="value => emitRichTextCommand('backcolor', value)" @update:modelValue="value => emitRichTextCommand('backcolor', value)"
/> />
</template> </template>
<TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="flex: 3;"> <TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="width: 100%;">
<IconHighLight /> <IconHighLight />
</TextColorButton> </TextColorButton>
</Popover> </Popover>
@ -146,7 +144,7 @@
v-tooltip="'格式刷'" v-tooltip="'格式刷'"
@click="toggleFormatPainter()" @click="toggleFormatPainter()"
><IconFormatBrush /></CheckboxButton> ><IconFormatBrush /></CheckboxButton>
<Popover placement="bottomRight" trigger="click" v-model:open="linkPopoverVisible"> <Popover placement="bottom-end" trigger="click" v-model:value="linkPopoverVisible" style="flex: 1;">
<template #content> <template #content>
<div class="link-popover"> <div class="link-popover">
<Input v-model:value="link" placeholder="请输入超链接" /> <Input v-model:value="link" placeholder="请输入超链接" />
@ -157,7 +155,7 @@
</div> </div>
</template> </template>
<CheckboxButton <CheckboxButton
style="flex: 1;" style="width: 100%;"
:checked="!!richTextAttrs.link" :checked="!!richTextAttrs.link"
v-tooltip="'超链接'" v-tooltip="'超链接'"
@click="openLinkPopover()" @click="openLinkPopover()"
@ -187,7 +185,7 @@
v-tooltip="'项目符号'" v-tooltip="'项目符号'"
@click="emitRichTextCommand('bulletList')" @click="emitRichTextCommand('bulletList')"
><IconList /></Button> ><IconList /></Button>
<Popover trigger="click" v-model:open="bulletListPanelVisible"> <Popover trigger="click" v-model:value="bulletListPanelVisible">
<template #content> <template #content>
<div class="list-wrap"> <div class="list-wrap">
<ul class="list" <ul class="list"
@ -211,7 +209,7 @@
v-tooltip="'编号'" v-tooltip="'编号'"
@click="emitRichTextCommand('orderedList')" @click="emitRichTextCommand('orderedList')"
><IconOrderedList /></Button> ><IconOrderedList /></Button>
<Popover trigger="click" v-model:open="orderedListPanelVisible"> <Popover trigger="click" v-model:value="orderedListPanelVisible">
<template #content> <template #content>
<div class="list-wrap"> <div class="list-wrap">
<ul class="list" <ul class="list"
@ -232,11 +230,9 @@
<div class="row"> <div class="row">
<ButtonGroup style="flex: 15;"> <ButtonGroup style="flex: 15;">
<Button style="flex: 1;" v-tooltip="'减小段落缩进'" @click="emitRichTextCommand('indent', '-1')"><IconIndentLeft /></Button> <Button style="flex: 1;" v-tooltip="'减小段落缩进'" @click="emitRichTextCommand('indent', '-1')"><IconIndentLeft /></Button>
<Popover trigger="click" v-model:open="indentLeftPanelVisible"> <Popover trigger="click" v-model:value="indentLeftPanelVisible">
<template #content> <template #content>
<div class="popover-list"> <PopoverMenuItem @click="emitRichTextCommand('textIndent', '-1')">减小首行缩进</PopoverMenuItem>
<span class="popover-item" @click="emitRichTextCommand('textIndent', '-1')">减小首行缩进</span>
</div>
</template> </template>
<Button class="popover-btn"><IconDown /></Button> <Button class="popover-btn"><IconDown /></Button>
</Popover> </Popover>
@ -244,11 +240,9 @@
<div style="flex: 1;"></div> <div style="flex: 1;"></div>
<ButtonGroup style="flex: 15;"> <ButtonGroup style="flex: 15;">
<Button style="flex: 1;" v-tooltip="'增大段落缩进'" @click="emitRichTextCommand('indent', '+1')"><IconIndentRight /></Button> <Button style="flex: 1;" v-tooltip="'增大段落缩进'" @click="emitRichTextCommand('indent', '+1')"><IconIndentRight /></Button>
<Popover trigger="click" v-model:open="indentRightPanelVisible"> <Popover trigger="click" v-model:value="indentRightPanelVisible">
<template #content> <template #content>
<div class="popover-list"> <PopoverMenuItem @click="emitRichTextCommand('textIndent', '+1')">增大首行缩进</PopoverMenuItem>
<span class="popover-item" @click="emitRichTextCommand('textIndent', '+1')">增大首行缩进</span>
</div>
</template> </template>
<Button class="popover-btn"><IconDown /></Button> <Button class="popover-btn"><IconDown /></Button>
</Popover> </Popover>
@ -258,36 +252,57 @@
<Divider /> <Divider />
<div class="row"> <div class="row">
<div style="flex: 2;">行间距：</div> <div style="width: 40%;">行间距：</div>
<Select style="flex: 3;" :value="lineHeight" @change="value => updateLineHeight(value as number)"> <Select style="width: 60%;"
<template #suffixIcon><IconRowHeight /></template> :value="lineHeight || 1"
<SelectOption v-for="item in lineHeightOptions" :key="item" :value="item">{{item}}倍</SelectOption> @update:value="value => updateLineHeight(value as number)"
:options="lineHeightOptions.map(item => ({
label: item + '倍', value: item
}))"
>
<template #icon>
<IconRowHeight />
</template>
</Select> </Select>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">段间距：</div> <div style="width: 40%;">段间距：</div>
<Select style="flex: 3;" :value="paragraphSpace" @change="value => updateParagraphSpace(value as number)"> <Select style="width: 60%;"
<template #suffixIcon><IconVerticalSpacingBetweenItems /></template> :value="paragraphSpace || 0"
<SelectOption v-for="item in paragraphSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption> @update:value="value => updateParagraphSpace(value as number)"
:options="paragraphSpaceOptions.map(item => ({
label: item + 'px', value: item
}))"
>
<template #icon>
<IconVerticalSpacingBetweenItems />
</template>
</Select> </Select>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">字间距：</div> <div style="width: 40%;">字间距：</div>
<Select style="flex: 3;" :value="wordSpace" @change="value => updateWordSpace(value as number)"> <Select style="width: 60%;"
<template #suffixIcon><IconFullwidth /></template> :value="wordSpace || 0"
<SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption> @update:value="value => updateWordSpace(value as number)"
:options="wordSpaceOptions.map(item => ({
label: item + 'px', value: item
}))"
>
<template #icon>
<IconFullwidth />
</template>
</Select> </Select>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">文本框填充：</div> <div style="width: 40%;">文本框填充：</div>
<Popover trigger="click"> <Popover trigger="click" style="width: 60%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="fill" :modelValue="fill"
@update:modelValue="value => updateFill(value)" @update:modelValue="value => updateFill(value)"
/> />
</template> </template>
<ColorButton :color="fill" style="flex: 3;" /> <ColorButton :color="fill" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
@ -324,13 +339,10 @@ import Button from '@/components/Button.vue'
import ButtonGroup from '@/components/ButtonGroup.vue' import ButtonGroup from '@/components/ButtonGroup.vue'
import RadioButton from '@/components/RadioButton.vue' import RadioButton from '@/components/RadioButton.vue'
import RadioGroup from '@/components/RadioGroup.vue' import RadioGroup from '@/components/RadioGroup.vue'
import { import Select from '@/components/Select.vue'
Popover, import SelectGroup from '@/components/SelectGroup.vue'
Select, import Popover from '@/components/Popover.vue'
Input as AntInput, import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
} from 'ant-design-vue'
const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
const InputGroup = AntInput.Group
// 注意，存在一个未知原因的BUG，如果文本加粗后文本框高度增加，画布的可视区域定位会出现错误 // 注意，存在一个未知原因的BUG，如果文本加粗后文本框高度增加，画布的可视区域定位会出现错误
// 因此在执行预置样式命令时，将加粗命令放在尽可能靠前的位置，避免字号增大后再加粗 // 因此在执行预置样式命令时，将加粗命令放在尽可能靠前的位置，避免字号增大后再加粗
@ -488,7 +500,6 @@ watch(richTextAttrs, () => linkPopoverVisible.value = false)
const openLinkPopover = () => { const openLinkPopover = () => {
link.value = richTextAttrs.value.link link.value = richTextAttrs.value.link
linkPopoverVisible.value = true
} }
const updateLink = (link?: string) => { const updateLink = (link?: string) => {
const linkRegExp = /^(https?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/ const linkRegExp = /^(https?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/
@ -590,6 +601,7 @@ const updateLink = (link?: string) => {
width: 24px; width: 24px;
height: 12px; height: 12px;
position: relative; position: relative;
font-size: 12px;
top: -5px; top: -5px;
span { span {

106
src/views/Editor/Toolbar/SlideDesignPanel.vue
View File

@ -5,44 +5,47 @@
<Select <Select
style="flex: 10;" style="flex: 10;"
:value="background.type" :value="background.type"
@change="value => updateBackgroundType(value as 'gradient' | 'image' | 'solid')" @update:value="value => updateBackgroundType(value as 'gradient' | 'image' | 'solid')"
> :options="[
<SelectOption value="solid">纯色填充</SelectOption> { label: '纯色填充', value: 'solid' },
<SelectOption value="image">图片填充</SelectOption> { label: '图片填充', value: 'image' },
<SelectOption value="gradient">渐变填充</SelectOption> { label: '渐变填充', value: 'gradient' },
</Select> ]"
/>
<div style="flex: 1;"></div> <div style="flex: 1;"></div>
<Popover trigger="click" v-if="background.type === 'solid'"> <Popover trigger="click" v-if="background.type === 'solid'" style="flex: 10;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="background.color" :modelValue="background.color"
@update:modelValue="color => updateBackground({ color })" @update:modelValue="color => updateBackground({ color })"
/> />
</template> </template>
<ColorButton :color="background.color || '#fff'" style="flex: 10;" /> <ColorButton :color="background.color || '#fff'" style="width: 100%;" />
</Popover> </Popover>
<Select <Select
style="flex: 10;" style="flex: 10;"
:value="background.imageSize || 'cover'" :value="background.imageSize || 'cover'"
@change="value => updateBackground({ imageSize: value as 'repeat' | 'cover' | 'contain' })" @update:value="value => updateBackground({ imageSize: value as 'repeat' | 'cover' | 'contain' })"
v-else-if="background.type === 'image'" v-else-if="background.type === 'image'"
> :options="[
<SelectOption value="contain">缩放</SelectOption> { label: '缩放', value: 'contain' },
<SelectOption value="repeat">拼贴</SelectOption> { label: '拼贴', value: 'repeat' },
<SelectOption value="cover">缩放铺满</SelectOption> { label: '缩放铺满', value: 'cover' },
</Select> ]"
/>
<Select <Select
style="flex: 10;" style="flex: 10;"
:value="background.gradientType" :value="background.gradientType || ''"
@change="value => updateBackground({ gradientType: value as 'linear' | 'radial' })" @update:value="value => updateBackground({ gradientType: value as 'linear' | 'radial' })"
v-else v-else
> :options="[
<SelectOption value="linear">线性渐变</SelectOption> { label: '线性渐变', value: 'linear' },
<SelectOption value="radial">径向渐变</SelectOption> { label: '径向渐变', value: 'radial' },
</Select> ]"
/>
</div> </div>
<div class="background-image-wrapper" v-if="background.type === 'image'"> <div class="background-image-wrapper" v-if="background.type === 'image'">
@ -58,26 +61,26 @@
<div class="background-gradient-wrapper" v-if="background.type === 'gradient'"> <div class="background-gradient-wrapper" v-if="background.type === 'gradient'">
<div class="row"> <div class="row">
<div style="flex: 2;">起点颜色：</div> <div style="flex: 2;">起点颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="background.gradientColor![0]" :modelValue="background.gradientColor![0]"
@update:modelValue="value => updateBackground({ gradientColor: [value, background.gradientColor![1]] })" @update:modelValue="value => updateBackground({ gradientColor: [value, background.gradientColor![1]] })"
/> />
</template> </template>
<ColorButton :color="background.gradientColor![0]" style="flex: 3;" /> <ColorButton :color="background.gradientColor![0]" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">终点颜色：</div> <div style="flex: 2;">终点颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="background.gradientColor![1]" :modelValue="background.gradientColor![1]"
@update:modelValue="value => updateBackground({ gradientColor: [background.gradientColor![0], value] })" @update:modelValue="value => updateBackground({ gradientColor: [background.gradientColor![0], value] })"
/> />
</template> </template>
<ColorButton :color="background.gradientColor![1]" style="flex: 3;" /> <ColorButton :color="background.gradientColor![1]" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<div class="row" v-if="background.gradientType === 'linear'"> <div class="row" v-if="background.gradientType === 'linear'">
@ -99,12 +102,17 @@
<div class="row"> <div class="row">
<div style="flex: 2;">画布尺寸：</div> <div style="flex: 2;">画布尺寸：</div>
<Select style="flex: 3;" :value="viewportRatio" @change="value => updateViewportRatio(value as number)"> <Select
<SelectOption :value="0.5625">宽屏 16 : 9</SelectOption> style="flex: 3;"
<SelectOption :value="0.625">宽屏 16 : 10</SelectOption> :value="viewportRatio"
<SelectOption :value="0.75">标准 4 : 3</SelectOption> @update:value="value => updateViewportRatio(value as number)"
<SelectOption :value="0.70710678">纸张 A3 / A4</SelectOption> :options="[
</Select> { label: '宽屏 16 : 9', value: 0.5625 },
{ label: '宽屏 16 : 10', value: 0.625 },
{ label: '标准 4 : 3', value: 0.75 },
{ label: '纸张 A3 / A4', value: 0.70710678 },
]"
/>
</div> </div>
<Divider /> <Divider />
@ -115,54 +123,47 @@
<Select <Select
style="flex: 3;" style="flex: 3;"
:value="theme.fontName" :value="theme.fontName"
@change="value => updateTheme({ fontName: value as string })" @update:value="value => updateTheme({ fontName: value as string })"
> :options="[
<SelectOptGroup label="系统字体"> ...availableFonts,
<SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value"> ...WEB_FONTS
<span :style="{ fontFamily: font.value }">{{font.label}}</span> ]"
</SelectOption> />
</SelectOptGroup>
<SelectOptGroup label="在线字体">
<SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
<span>{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
</Select>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">字体颜色：</div> <div style="flex: 2;">字体颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="theme.fontColor" :modelValue="theme.fontColor"
@update:modelValue="value => updateTheme({ fontColor: value })" @update:modelValue="value => updateTheme({ fontColor: value })"
/> />
</template> </template>
<ColorButton :color="theme.fontColor" style="flex: 3;" /> <ColorButton :color="theme.fontColor" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">背景颜色：</div> <div style="flex: 2;">背景颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="theme.backgroundColor" :modelValue="theme.backgroundColor"
@update:modelValue="value => updateTheme({ backgroundColor: value })" @update:modelValue="value => updateTheme({ backgroundColor: value })"
/> />
</template> </template>
<ColorButton :color="theme.backgroundColor" style="flex: 3;" /> <ColorButton :color="theme.backgroundColor" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">主题色：</div> <div style="flex: 2;">主题色：</div>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="theme.themeColor" :modelValue="theme.themeColor"
@update:modelValue="value => updateTheme({ themeColor: value })" @update:modelValue="value => updateTheme({ themeColor: value })"
/> />
</template> </template>
<ColorButton :color="theme.themeColor" style="flex: 3;" /> <ColorButton :color="theme.themeColor" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
@ -214,11 +215,8 @@ import ColorPicker from '@/components/ColorPicker/index.vue'
import Divider from '@/components/Divider.vue' import Divider from '@/components/Divider.vue'
import Slider from '@/components/Slider.vue' import Slider from '@/components/Slider.vue'
import Button from '@/components/Button.vue' import Button from '@/components/Button.vue'
import { import Select from '@/components/Select.vue'
Popover, import Popover from '@/components/Popover.vue'
Select,
} from 'ant-design-vue'
const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()
const { availableFonts } = storeToRefs(useMainStore()) const { availableFonts } = storeToRefs(useMainStore())

6
src/views/Editor/Toolbar/common/ElementColorMask.vue
View File

@ -12,14 +12,14 @@
<template v-if="hasColorMask"> <template v-if="hasColorMask">
<div class="row" style="margin-top: 15px;"> <div class="row" style="margin-top: 15px;">
<div style="flex: 2;">蒙版颜色：</div> <div style="flex: 2;">蒙版颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="colorMask.color" :modelValue="colorMask.color"
@update:modelValue="value => updateColorMask({ color: value })" @update:modelValue="value => updateColorMask({ color: value })"
/> />
</template> </template>
<ColorButton :color="colorMask.color" style="flex: 3;" /> <ColorButton :color="colorMask.color" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<div class="row"> <div class="row">
@ -48,7 +48,7 @@ import ColorButton from './ColorButton.vue'
import ColorPicker from '@/components/ColorPicker/index.vue' import ColorPicker from '@/components/ColorPicker/index.vue'
import Switch from '@/components/Switch.vue' import Switch from '@/components/Switch.vue'
import Slider from '@/components/Slider.vue' import Slider from '@/components/Slider.vue'
import { Popover } from 'ant-design-vue' import Popover from '@/components/Popover.vue'
const defaultColorMask = { color: 'transparent', opacity: 0.3 } const defaultColorMask = { color: 'transparent', opacity: 0.3 }

24
src/views/Editor/Toolbar/common/ElementOutline.vue
View File

@ -14,23 +14,24 @@
<div style="flex: 2;">边框样式：</div> <div style="flex: 2;">边框样式：</div>
<Select <Select
style="flex: 3;" style="flex: 3;"
:value="outline.style" :value="outline.style || ''"
@change="value => updateOutline({ style: value as 'dashed' | 'solid' })" @update:value="value => updateOutline({ style: value as 'dashed' | 'solid' })"
> :options="[
<SelectOption value="solid">实线边框</SelectOption> { label: '实线边框', value: 'solid' },
<SelectOption value="dashed">虚线边框</SelectOption> { label: '虚线边框', value: 'dashed' },
</Select> ]"
/>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">边框颜色：</div> <div style="flex: 2;">边框颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="outline.color" :modelValue="outline.color"
@update:modelValue="value => updateOutline({ color: value })" @update:modelValue="value => updateOutline({ color: value })"
/> />
</template> </template>
<ColorButton :color="outline.color || '#000'" style="flex: 3;" /> <ColorButton :color="outline.color || '#000'" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
<div class="row"> <div class="row">
@ -56,11 +57,8 @@ import ColorButton from './ColorButton.vue'
import ColorPicker from '@/components/ColorPicker/index.vue' import ColorPicker from '@/components/ColorPicker/index.vue'
import Switch from '@/components/Switch.vue' import Switch from '@/components/Switch.vue'
import NumberInput from '@/components/NumberInput.vue' import NumberInput from '@/components/NumberInput.vue'
import { import Select from '@/components/Select.vue'
Popover, import Popover from '@/components/Popover.vue'
Select,
} from 'ant-design-vue'
const SelectOption = Select.Option
withDefaults(defineProps<{ withDefaults(defineProps<{
fixed?: boolean fixed?: boolean

6
src/views/Editor/Toolbar/common/ElementShadow.vue
View File

@ -42,14 +42,14 @@
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">阴影颜色：</div> <div style="flex: 2;">阴影颜色：</div>
<Popover trigger="click"> <Popover trigger="click" style="flex: 3;">
<template #content> <template #content>
<ColorPicker <ColorPicker
:modelValue="shadow.color" :modelValue="shadow.color"
@update:modelValue="value => updateShadow({ color: value })" @update:modelValue="value => updateShadow({ color: value })"
/> />
</template> </template>
<ColorButton :color="shadow.color" style="flex: 3;" /> <ColorButton :color="shadow.color" style="width: 100%;" />
</Popover> </Popover>
</div> </div>
</template> </template>
@ -67,7 +67,7 @@ import ColorButton from './ColorButton.vue'
import ColorPicker from '@/components/ColorPicker/index.vue' import ColorPicker from '@/components/ColorPicker/index.vue'
import Switch from '@/components/Switch.vue' import Switch from '@/components/Switch.vue'
import Slider from '@/components/Slider.vue' import Slider from '@/components/Slider.vue'
import { Popover } from 'ant-design-vue' import Popover from '@/components/Popover.vue'
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore()) const { handleElement } = storeToRefs(useMainStore())

9
src/views/Screen/WritingBoardTool.vue
View File

@ -28,7 +28,7 @@
> >
<div class="tools" @mousedown.stop> <div class="tools" @mousedown.stop>
<div class="tool-content"> <div class="tool-content">
<Popover trigger="click" :open="sizePopoverType === 'pen'"> <Popover trigger="click" :value="sizePopoverType === 'pen'">
<template #content> <template #content>
<div class="size"> <div class="size">
<div class="label">墨迹粗细：</div> <div class="label">墨迹粗细：</div>
@ -39,7 +39,7 @@
<IconWrite class="icon" /> <IconWrite class="icon" />
</div> </div>
</Popover> </Popover>
<Popover trigger="click" :open="sizePopoverType === 'mark'"> <Popover trigger="click" :value="sizePopoverType === 'mark'">
<template #content> <template #content>
<div class="size"> <div class="size">
<div class="label">墨迹粗细：</div> <div class="label">墨迹粗细：</div>
@ -50,7 +50,7 @@
<IconHighLight class="icon" /> <IconHighLight class="icon" />
</div> </div>
</Popover> </Popover>
<Popover trigger="click" :open="sizePopoverType === 'eraser'"> <Popover trigger="click" :value="sizePopoverType === 'eraser'">
<template #content> <template #content>
<div class="size"> <div class="size">
<div class="label">橡皮大小：</div> <div class="label">橡皮大小：</div>
@ -95,7 +95,7 @@ import { db } from '@/utils/database'
import WritingBoard from '@/components/WritingBoard.vue' import WritingBoard from '@/components/WritingBoard.vue'
import MoveablePanel from '@/components/MoveablePanel.vue' import MoveablePanel from '@/components/MoveablePanel.vue'
import Slider from '@/components/Slider.vue' import Slider from '@/components/Slider.vue'
import { Popover } from 'ant-design-vue' import Popover from '@/components/Popover.vue'
const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c', '#ffff3a'] const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c', '#ffff3a']
@ -238,6 +238,7 @@ const hanldeWritingEnd = () => {
display: flex; display: flex;
align-items: center; align-items: center;
user-select: none; user-select: none;
font-size: 13px;
.label { .label {
width: 70px; width: 70px;