mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
refactor: 替换Popover、Select，完全移除Antdv
This commit is contained in:
pipipi-pikachu
parent
9a339a52a9
commit
3758aab0cf
388
package-lock.json
generated
388
package-lock.json
generated
@ -10,7 +10,6 @@
|
||||
"dependencies": {
|
||||
"@icon-park/vue-next": "^1.4.2",
|
||||
"animate.css": "^4.1.1",
|
||||
"ant-design-vue": "^4.0.0",
|
||||
"chartist": "^1.3.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"core-js": "^3.8.3",
|
||||
@ -114,31 +113,6 @@
|
||||
"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": {
|
||||
"version": "0.3.6",
|
||||
"resolved": "https://registry.npmmirror.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
|
||||
@ -1962,6 +1936,7 @@
|
||||
"version": "7.22.6",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.6.tgz",
|
||||
"integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"regenerator-runtime": "^0.13.11"
|
||||
},
|
||||
@ -2332,14 +2307,6 @@
|
||||
"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": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
|
||||
@ -2349,16 +2316,6 @@
|
||||
"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": {
|
||||
"version": "4.4.0",
|
||||
"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==",
|
||||
"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": {
|
||||
"version": "0.27.8",
|
||||
"resolved": "https://registry.npmmirror.com/@sinclair/typebox/-/typebox-0.27.8.tgz",
|
||||
@ -4502,41 +4450,6 @@
|
||||
"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": {
|
||||
"version": "1.3.0",
|
||||
"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==",
|
||||
"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": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz",
|
||||
@ -4637,11 +4545,6 @@
|
||||
"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": {
|
||||
"version": "1.0.0",
|
||||
"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==",
|
||||
"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": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@ -5991,11 +5889,6 @@
|
||||
"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": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
|
||||
@ -6191,11 +6084,6 @@
|
||||
"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": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz",
|
||||
@ -6205,11 +6093,6 @@
|
||||
"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": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz",
|
||||
@ -8628,7 +8511,8 @@
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"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": {
|
||||
"version": "4.1.0",
|
||||
@ -8920,11 +8804,6 @@
|
||||
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
|
||||
"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": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
|
||||
@ -9150,17 +9029,6 @@
|
||||
"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": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/lower-case/-/lower-case-2.0.2.tgz",
|
||||
@ -9543,11 +9411,6 @@
|
||||
"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": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz",
|
||||
@ -11410,7 +11273,8 @@
|
||||
"node_modules/regenerator-runtime": {
|
||||
"version": "0.13.11",
|
||||
"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": {
|
||||
"version": "0.15.1",
|
||||
@ -11524,11 +11388,6 @@
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
|
||||
"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": {
|
||||
"version": "1.22.2",
|
||||
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.2.tgz",
|
||||
@ -11798,14 +11657,6 @@
|
||||
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
|
||||
"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": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
|
||||
@ -12032,11 +11883,6 @@
|
||||
"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": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
@ -12794,11 +12640,6 @@
|
||||
"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": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@ -13145,14 +12986,6 @@
|
||||
"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": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
|
||||
@ -13702,28 +13535,6 @@
|
||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"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": {
|
||||
"version": "4.1.0",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
|
||||
@ -14794,28 +14597,6 @@
|
||||
"@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": {
|
||||
"version": "0.3.6",
|
||||
"resolved": "https://registry.npmmirror.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
|
||||
@ -16081,6 +15862,7 @@
|
||||
"version": "7.22.6",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.6.tgz",
|
||||
"integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.11"
|
||||
}
|
||||
@ -16365,27 +16147,12 @@
|
||||
"dev": true,
|
||||
"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": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
|
||||
"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
|
||||
"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": {
|
||||
"version": "4.4.0",
|
||||
"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==",
|
||||
"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": {
|
||||
"version": "0.27.8",
|
||||
"resolved": "https://registry.npmmirror.com/@sinclair/typebox/-/typebox-0.27.8.tgz",
|
||||
@ -18158,35 +17916,6 @@
|
||||
"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": {
|
||||
"version": "1.3.0",
|
||||
"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==",
|
||||
"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": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz",
|
||||
@ -18275,11 +17999,6 @@
|
||||
"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": {
|
||||
"version": "1.0.0",
|
||||
"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": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@ -19350,11 +19064,6 @@
|
||||
"integrity": "sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==",
|
||||
"dev": true
|
||||
},
|
||||
"dayjs": {
|
||||
"version": "1.11.9",
|
||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.9.tgz",
|
||||
"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
|
||||
},
|
||||
"debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
|
||||
@ -19501,11 +19210,6 @@
|
||||
"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": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz",
|
||||
@ -19515,11 +19219,6 @@
|
||||
"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": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz",
|
||||
@ -21488,7 +21187,8 @@
|
||||
"js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"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": {
|
||||
"version": "4.1.0",
|
||||
@ -21728,11 +21428,6 @@
|
||||
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
|
||||
"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": {
|
||||
"version": "4.3.0",
|
||||
"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": {
|
||||
"version": "2.0.2",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz",
|
||||
@ -23669,7 +23351,8 @@
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.11",
|
||||
"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": {
|
||||
"version": "0.15.1",
|
||||
@ -23764,11 +23447,6 @@
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
|
||||
"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": {
|
||||
"version": "1.22.2",
|
||||
"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": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
|
||||
@ -24184,11 +23854,6 @@
|
||||
"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": {
|
||||
"version": "2.0.0",
|
||||
"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": {
|
||||
"version": "7.2.0",
|
||||
"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": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
|
||||
@ -25510,21 +25165,6 @@
|
||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"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": {
|
||||
"version": "4.1.0",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
"dependencies": {
|
||||
"@icon-park/vue-next": "^1.4.2",
|
||||
"animate.css": "^4.1.1",
|
||||
"ant-design-vue": "^4.0.0",
|
||||
"chartist": "^1.3.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"core-js": "^3.8.3",
|
||||
|
||||
19
src/App.vue
19
src/App.vue
@ -1,18 +1,7 @@
|
||||
<template>
|
||||
<ConfigProvider
|
||||
:theme="{
|
||||
token: {
|
||||
colorPrimary: '#d14424',
|
||||
colorText: '#41464b',
|
||||
borderRadius: 2,
|
||||
fontSize: 13,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<Screen v-if="screening" />
|
||||
<Editor v-else-if="_isPC" />
|
||||
<Mobile v-else />
|
||||
</ConfigProvider>
|
||||
<Screen v-if="screening" />
|
||||
<Editor v-else-if="_isPC" />
|
||||
<Mobile v-else />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -27,8 +16,6 @@ import Editor from './views/Editor/index.vue'
|
||||
import Screen from './views/Screen/index.vue'
|
||||
import Mobile from './views/Mobile/index.vue'
|
||||
|
||||
import { ConfigProvider } from 'ant-design-vue'
|
||||
|
||||
const _isPC = isPC()
|
||||
|
||||
const mainStore = useMainStore()
|
||||
|
||||
@ -130,7 +130,7 @@ textarea {
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #c1c1c1;
|
||||
|
||||
@ -12,33 +12,25 @@
|
||||
.button-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-right: 0;
|
||||
border-radius: $borderRadius;
|
||||
overflow: hidden;
|
||||
|
||||
::v-deep(.button) {
|
||||
border-radius: 0;
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
& + .button {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.default + .button {
|
||||
border-left-color: $themeColor;
|
||||
}
|
||||
}
|
||||
|
||||
&: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;
|
||||
&::after {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: #d9d9d9;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="popover" ref="triggerRef">
|
||||
<div class="popover" :class="{ 'center': center }" ref="triggerRef">
|
||||
<div class="popover-content" :style="contentStyle" ref="contentRef">
|
||||
<slot name="content" v-if="contentVisible"></slot>
|
||||
</div>
|
||||
@ -14,14 +14,17 @@ import tippy, { type Instance, type Placement } from 'tippy.js'
|
||||
import 'tippy.js/animations/scale.css'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
value: boolean
|
||||
value?: boolean
|
||||
trigger?: 'click' | 'mouseenter'
|
||||
placement?: Placement
|
||||
appendTo?: HTMLElement | 'parent'
|
||||
contentStyle?: CSSProperties
|
||||
center?: boolean
|
||||
}>(), {
|
||||
value: false,
|
||||
trigger: 'click',
|
||||
placement: 'auto',
|
||||
placement: 'bottom',
|
||||
center: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
@ -70,6 +73,11 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popover.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.popover-content {
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
|
||||
38
src/components/PopoverMenuItem.vue
Normal file
38
src/components/PopoverMenuItem.vue
Normal 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>
|
||||
@ -23,15 +23,18 @@
|
||||
<template #content>
|
||||
<div class="options" :style="{ width: width + 2 + 'px' }">
|
||||
<div class="option"
|
||||
:class="{ 'disabled': option.disabled }"
|
||||
:class="{
|
||||
'disabled': option.disabled,
|
||||
'selected': option.value === value,
|
||||
}"
|
||||
v-for="option in options"
|
||||
:key="option.key"
|
||||
:key="option.value"
|
||||
@click="handleSelect(option)"
|
||||
>{{ option.value }}</div>
|
||||
>{{ option.label }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="select" ref="selectRef">
|
||||
<div class="selector">{{ value }}</div>
|
||||
<div class="selector">{{ showLabel }}</div>
|
||||
<div class="icon">
|
||||
<slot name="icon">
|
||||
<IconDown :size="14" />
|
||||
@ -42,16 +45,16 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import Popover from './Popover.vue'
|
||||
|
||||
interface SelectOption {
|
||||
key: string
|
||||
label: string
|
||||
value: string | number
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
withDefaults(defineProps<{
|
||||
const props = withDefaults(defineProps<{
|
||||
value: string | number
|
||||
options: SelectOption[]
|
||||
disabled?: boolean
|
||||
@ -59,6 +62,10 @@ withDefaults(defineProps<{
|
||||
disabled: false,
|
||||
})
|
||||
|
||||
const showLabel = computed(() => {
|
||||
return props.options.find(item => item.value === props.value)?.label || props.value
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:value', payload: string | number): void
|
||||
}>()
|
||||
@ -138,11 +145,14 @@ const handleSelect = (option: SelectOption) => {
|
||||
@include ellipsis-oneline();
|
||||
|
||||
&.disabled {
|
||||
background-color: #f5f5f5;
|
||||
color: #b7b7b7;
|
||||
cursor: default;
|
||||
}
|
||||
&:not(.disabled):hover {
|
||||
&:not(.disabled, .selected):hover {
|
||||
background-color: rgba($color: #666, $alpha: .05);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: rgba($color: $themeColor, $alpha: .05);
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,14 +17,8 @@
|
||||
class="input"
|
||||
v-if="type === 'slide'"
|
||||
v-model:value="slideId"
|
||||
>
|
||||
<SelectOption
|
||||
v-for="(slide, index) in slides"
|
||||
:key="slide.id"
|
||||
:value="slide.id"
|
||||
:disabled="currentSlide.id === slide.id"
|
||||
>幻灯片 {{index + 1}}</SelectOption>
|
||||
</Select>
|
||||
:options="slideOptions"
|
||||
/>
|
||||
|
||||
<div class="preview" v-if="type === 'slide' && selectedSlide">
|
||||
<div>预览：</div>
|
||||
@ -49,8 +43,7 @@ import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
|
||||
import Tabs from '@/components/Tabs.vue'
|
||||
import Input from '@/components/Input.vue'
|
||||
import Button from '@/components/Button.vue'
|
||||
import { Select } from 'ant-design-vue'
|
||||
const SelectOption = Select.Option
|
||||
import Select from '@/components/Select.vue'
|
||||
|
||||
type TypeKey = 'web' | 'slide'
|
||||
interface TabItem {
|
||||
@ -69,6 +62,14 @@ const type = ref<TypeKey>('web')
|
||||
const address = 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 || ''
|
||||
|
||||
const selectedSlide = computed(() => {
|
||||
|
||||
@ -12,10 +12,10 @@
|
||||
<div class="handler-item group-btn" v-tooltip="'插入文字'">
|
||||
<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>
|
||||
<div class="text-type-item" @click="() => { drawText(); textTypeSelectVisible = false }"><IconTextRotationNone /> 横向文本框</div>
|
||||
<div class="text-type-item" @click="() => { drawText(true); textTypeSelectVisible = false }"><IconTextRotationDown /> 竖向文本框</div>
|
||||
<PopoverMenuItem center @click="() => { drawText(); textTypeSelectVisible = false }"><IconTextRotationNone /> 横向文本框</PopoverMenuItem>
|
||||
<PopoverMenuItem center @click="() => { drawText(true); textTypeSelectVisible = false }"><IconTextRotationDown /> 竖向文本框</PopoverMenuItem>
|
||||
</template>
|
||||
<IconDown class="arrow" />
|
||||
</Popover>
|
||||
@ -23,25 +23,25 @@
|
||||
<FileInput @change="files => insertImageElement(files)">
|
||||
<IconPicture class="handler-item" v-tooltip="'插入图片'" />
|
||||
</FileInput>
|
||||
<Popover trigger="click" v-model:open="shapePoolVisible">
|
||||
<Popover trigger="click" v-model:value="shapePoolVisible">
|
||||
<template #content>
|
||||
<ShapePool @select="shape => drawShape(shape)" />
|
||||
</template>
|
||||
<IconGraphicDesign class="handler-item" :class="{ 'active': creatingCustomShape || creatingElement?.type === 'shape' }" v-tooltip="'插入形状'" />
|
||||
</Popover>
|
||||
<Popover trigger="click" v-model:open="linePoolVisible">
|
||||
<Popover trigger="click" v-model:value="linePoolVisible">
|
||||
<template #content>
|
||||
<LinePool @select="line => drawLine(line)" />
|
||||
</template>
|
||||
<IconConnection class="handler-item" :class="{ 'active': creatingElement?.type === 'line' }" v-tooltip="'插入线条'" />
|
||||
</Popover>
|
||||
<Popover trigger="click" v-model:open="chartPoolVisible">
|
||||
<Popover trigger="click" v-model:value="chartPoolVisible">
|
||||
<template #content>
|
||||
<ChartPool @select="chart => { createChartElement(chart); chartPoolVisible = false }" />
|
||||
</template>
|
||||
<IconChartProportion class="handler-item" v-tooltip="'插入图表'" />
|
||||
</Popover>
|
||||
<Popover trigger="click" v-model:open="tableGeneratorVisible">
|
||||
<Popover trigger="click" v-model:value="tableGeneratorVisible">
|
||||
<template #content>
|
||||
<TableGenerator
|
||||
@close="tableGeneratorVisible = false"
|
||||
@ -51,7 +51,7 @@
|
||||
<IconInsertTable class="handler-item" v-tooltip="'插入表格'" />
|
||||
</Popover>
|
||||
<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>
|
||||
<MediaInput
|
||||
@close="mediaInputVisible = false"
|
||||
@ -65,16 +65,14 @@
|
||||
|
||||
<div class="right-handler">
|
||||
<IconMinus class="handler-item viewport-size" @click="scaleCanvas('-')" />
|
||||
<Popover trigger="click" v-model:open="canvasScaleVisible">
|
||||
<Popover trigger="click" v-model:value="canvasScaleVisible">
|
||||
<template #content>
|
||||
<div class="viewport-size-preset">
|
||||
<div
|
||||
class="preset-item"
|
||||
v-for="item in canvasScalePresetList"
|
||||
:key="item"
|
||||
@click="applyCanvasPresetScale(item)"
|
||||
>{{item}}%</div>
|
||||
</div>
|
||||
<PopoverMenuItem
|
||||
center
|
||||
v-for="item in canvasScalePresetList"
|
||||
:key="item"
|
||||
@click="applyCanvasPresetScale(item)"
|
||||
>{{item}}%</PopoverMenuItem>
|
||||
</template>
|
||||
<span class="text">{{canvasScalePercentage}}</span>
|
||||
</Popover>
|
||||
@ -114,7 +112,8 @@ import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
|
||||
import FileInput from '@/components/FileInput.vue'
|
||||
import Modal from '@/components/Modal.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 { creatingElement, creatingCustomShape } = storeToRefs(mainStore)
|
||||
@ -300,6 +299,7 @@ const openSraechPanel = () => {
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@ -309,27 +309,6 @@ const openSraechPanel = () => {
|
||||
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) {
|
||||
.text {
|
||||
|
||||
@ -1,21 +1,19 @@
|
||||
<template>
|
||||
<div class="editor-header">
|
||||
<div class="left">
|
||||
<Popover trigger="click" placement="bottomLeft" v-model:open="mainMenuVisible">
|
||||
<Popover trigger="click" placement="bottom-start" v-model:value="mainMenuVisible">
|
||||
<template #content>
|
||||
<div class="popover-list">
|
||||
<FileInput accept=".pptist" @change="files => importSpecificFile(files)">
|
||||
<div class="popover-item" @click="mainMenuVisible = false">导入 pptist 文件</div>
|
||||
</FileInput>
|
||||
<FileInput accept="application/vnd.openxmlformats-officedocument.presentationml.presentation" @change="files => importPPTXFile(files)">
|
||||
<div class="popover-item" @click="mainMenuVisible = false">导入 pptx 文件（测试版）</div>
|
||||
</FileInput>
|
||||
<div class="popover-item" @click="setDialogForExport('pptx')">导出文件</div>
|
||||
<div class="popover-item" @click="resetSlides(); mainMenuVisible = false">重置幻灯片</div>
|
||||
<div class="popover-item" @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</div>
|
||||
<div class="popover-item" @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</div>
|
||||
<div class="popover-item" @click="mainMenuVisible = false; hotkeyDrawerVisible = true">快捷键</div>
|
||||
</div>
|
||||
<FileInput accept=".pptist" @change="files => importSpecificFile(files)">
|
||||
<PopoverMenuItem @click="mainMenuVisible = false">导入 pptist 文件</PopoverMenuItem>
|
||||
</FileInput>
|
||||
<FileInput accept="application/vnd.openxmlformats-officedocument.presentationml.presentation" @change="files => importPPTXFile(files)">
|
||||
<PopoverMenuItem @click="mainMenuVisible = false">导入 pptx 文件（测试版）</PopoverMenuItem>
|
||||
</FileInput>
|
||||
<PopoverMenuItem @click="setDialogForExport('pptx')">导出文件</PopoverMenuItem>
|
||||
<PopoverMenuItem @click="resetSlides(); mainMenuVisible = false">重置幻灯片</PopoverMenuItem>
|
||||
<PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</PopoverMenuItem>
|
||||
<PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</PopoverMenuItem>
|
||||
<PopoverMenuItem @click="mainMenuVisible = false; hotkeyDrawerVisible = true">快捷键</PopoverMenuItem>
|
||||
</template>
|
||||
<div class="menu-item"><IconHamburgerButton class="icon" /></div>
|
||||
</Popover>
|
||||
@ -42,12 +40,10 @@
|
||||
<div class="menu-item" v-tooltip="'幻灯片放映'" @click="enterScreening()">
|
||||
<IconPpt class="icon" />
|
||||
</div>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" center>
|
||||
<template #content>
|
||||
<div class="popover-list">
|
||||
<div class="popover-item" @click="enterScreeningFromStart()">从头开始</div>
|
||||
<div class="popover-item" @click="enterScreening()">从当前页开始</div>
|
||||
</div>
|
||||
<PopoverMenuItem @click="enterScreeningFromStart()">从头开始</PopoverMenuItem>
|
||||
<PopoverMenuItem @click="enterScreening()">从当前页开始</PopoverMenuItem>
|
||||
</template>
|
||||
<div class="arrow-btn"><IconDown class="arrow" /></div>
|
||||
</Popover>
|
||||
@ -86,7 +82,8 @@ import FileInput from '@/components/FileInput.vue'
|
||||
import FullscreenSpin from '@/components/FullscreenSpin.vue'
|
||||
import Drawer from '@/components/Drawer.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 slidesStore = useSlidesStore()
|
||||
@ -207,19 +204,4 @@ const setDialogForExport = (type: DialogForExportTypes) => {
|
||||
display: inline-block;
|
||||
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>
|
||||
@ -36,11 +36,12 @@
|
||||
<Select
|
||||
class="config-item"
|
||||
v-model:value="count"
|
||||
>
|
||||
<SelectOption :value="1">1</SelectOption>
|
||||
<SelectOption :value="2">2</SelectOption>
|
||||
<SelectOption :value="3">3</SelectOption>
|
||||
</Select>
|
||||
:options="[
|
||||
{ label: '1', value: 1 },
|
||||
{ label: '2', value: 2 },
|
||||
{ label: '3', value: 3 },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="title">边缘留白：</div>
|
||||
@ -71,8 +72,7 @@ import Switch from '@/components/Switch.vue'
|
||||
import Button from '@/components/Button.vue'
|
||||
import RadioButton from '@/components/RadioButton.vue'
|
||||
import RadioGroup from '@/components/RadioGroup.vue'
|
||||
import { Select } from 'ant-design-vue'
|
||||
const SelectOption = Select.Option
|
||||
import Select from '@/components/Select.vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
>
|
||||
<div class="add-slide">
|
||||
<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>
|
||||
<LayoutPool @select="slide => { createSlideByTemplate(slide); presetLayoutPopoverVisible = false }" />
|
||||
</template>
|
||||
@ -57,8 +57,8 @@ import useLoadSlides from '@/hooks/useLoadSlides'
|
||||
|
||||
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
|
||||
import LayoutPool from './LayoutPool.vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
import Draggable from 'vuedraggable'
|
||||
import { Popover } from 'ant-design-vue'
|
||||
|
||||
const mainStore = useMainStore()
|
||||
const slidesStore = useSlidesStore()
|
||||
@ -262,6 +262,7 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
|
||||
}
|
||||
.select-btn {
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -3,8 +3,9 @@
|
||||
<div class="element-animation" v-if="handleElement">
|
||||
<Popover
|
||||
trigger="click"
|
||||
v-model:open="animationPoolVisible"
|
||||
@openChange="visible => handlePopoverVisibleChange(visible)"
|
||||
v-model:value="animationPoolVisible"
|
||||
@update:value="visible => handlePopoverVisibleChange(visible)"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<template #content>
|
||||
<Tabs
|
||||
@ -76,27 +77,28 @@
|
||||
<Divider style="margin: 16px 0;" />
|
||||
|
||||
<div class="config-item">
|
||||
<div style="flex: 3;">持续时长：</div>
|
||||
<div style="width: 35%;">持续时长：</div>
|
||||
<NumberInput
|
||||
:min="500"
|
||||
:max="3000"
|
||||
:step="500"
|
||||
:value="element.duration"
|
||||
@update:value="value => updateElementAnimationDuration(element.id, value)"
|
||||
style="flex: 5;"
|
||||
style="width: 65%;"
|
||||
/>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div style="flex: 3;">触发方式：</div>
|
||||
<div style="width: 35%;">触发方式：</div>
|
||||
<Select
|
||||
:value="element.trigger"
|
||||
@change="value => updateElementAnimationTrigger(element.id, value as 'click' | 'meantime' | 'auto')"
|
||||
style="flex: 5;"
|
||||
>
|
||||
<SelectOption value="click">主动触发</SelectOption>
|
||||
<SelectOption value="meantime">与上一动画同时</SelectOption>
|
||||
<SelectOption value="auto">上一动画之后</SelectOption>
|
||||
</Select>
|
||||
@update:value="value => updateElementAnimationTrigger(element.id, value as 'click' | 'meantime' | 'auto')"
|
||||
style="width: 65%;"
|
||||
:options="[
|
||||
{ label: '主动触发', value: 'click' },
|
||||
{ label: '与上一动画同时', value: 'meantime' },
|
||||
{ label: '上一动画之后', value: 'auto' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<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 Draggable from 'vuedraggable'
|
||||
import NumberInput from '@/components/NumberInput.vue'
|
||||
import {
|
||||
Popover,
|
||||
Select,
|
||||
} from 'ant-design-vue'
|
||||
const SelectOption = Select.Option
|
||||
import Select from '@/components/Select.vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
|
||||
const animationEffects: { [key: string]: string } = {}
|
||||
for (const effect of ENTER_ANIMATIONS) {
|
||||
|
||||
@ -28,26 +28,31 @@
|
||||
|
||||
<div class="row">
|
||||
<NumberInput
|
||||
prefix="水平："
|
||||
:step="5"
|
||||
:value="left"
|
||||
@update:value="value => updateLeft(value)"
|
||||
style="flex: 4;"
|
||||
/>
|
||||
>
|
||||
<template #prefix>
|
||||
水平：
|
||||
</template>
|
||||
</NumberInput>
|
||||
<div style="flex: 1;"></div>
|
||||
<NumberInput
|
||||
prefix="垂直："
|
||||
:step="5"
|
||||
:value="top"
|
||||
@update:value="value => updateTop(value)"
|
||||
style="flex: 4;"
|
||||
/>
|
||||
>
|
||||
<template #prefix>
|
||||
垂直：
|
||||
</template>
|
||||
</NumberInput>
|
||||
</div>
|
||||
|
||||
<template v-if="handleElement!.type !== 'line'">
|
||||
<div class="row">
|
||||
<NumberInput
|
||||
prefix="宽度："
|
||||
:min="minSize"
|
||||
:max="1500"
|
||||
:step="5"
|
||||
@ -55,14 +60,17 @@
|
||||
:value="width"
|
||||
@update:value="value => updateWidth(value)"
|
||||
style="flex: 4;"
|
||||
/>
|
||||
>
|
||||
<template #prefix>
|
||||
宽度：
|
||||
</template>
|
||||
</NumberInput>
|
||||
<template v-if="['image', 'shape', 'audio'].includes(handleElement!.type)">
|
||||
<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 />
|
||||
</template>
|
||||
<div style="flex: 1;" v-else></div>
|
||||
<NumberInput
|
||||
prefix="高度："
|
||||
:min="minSize"
|
||||
:max="800"
|
||||
:step="5"
|
||||
@ -70,7 +78,11 @@
|
||||
:value="height"
|
||||
@update:value="value => updateHeight(value)"
|
||||
style="flex: 4;"
|
||||
/>
|
||||
>
|
||||
<template #prefix>
|
||||
高度：
|
||||
</template>
|
||||
</NumberInput>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -79,14 +91,17 @@
|
||||
|
||||
<div class="row">
|
||||
<NumberInput
|
||||
prefix="旋转："
|
||||
:min="-180"
|
||||
:max="180"
|
||||
:step="5"
|
||||
:value="rotate"
|
||||
@update:value="value => updateRotate(value)"
|
||||
style="flex: 8;"
|
||||
/>
|
||||
>
|
||||
<template #prefix>
|
||||
旋转：
|
||||
</template>
|
||||
</NumberInput>
|
||||
<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 :style="{ transform: 'rotateY(180deg)' }" /> +45°</div>
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
<div class="audio-style-panel">
|
||||
<div class="row">
|
||||
<div style="flex: 2;">图标颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="handleAudioElement.color"
|
||||
@update:modelValue="value => updateAudio({ color: value })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="handleAudioElement.color" style="flex: 3;" />
|
||||
<ColorButton :color="handleAudioElement.color" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
@ -45,7 +45,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
|
||||
import ColorButton from '../common/ColorButton.vue'
|
||||
import ColorPicker from '@/components/ColorPicker/index.vue'
|
||||
import Switch from '@/components/Switch.vue'
|
||||
import { Popover } from 'ant-design-vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
|
||||
const slidesStore = useSlidesStore()
|
||||
const { handleElement } = storeToRefs(useMainStore())
|
||||
|
||||
@ -48,60 +48,65 @@
|
||||
<Divider />
|
||||
|
||||
<div class="row">
|
||||
<div style="flex: 2;">图例：</div>
|
||||
<Select style="flex: 3;" :value="legend" @change="value => updateLegend(value as '' | 'top' | 'bottom')">
|
||||
<SelectOption value="">不显示</SelectOption>
|
||||
<SelectOption value="top">显示在上方</SelectOption>
|
||||
<SelectOption value="bottom">显示在下方</SelectOption>
|
||||
</Select>
|
||||
<div style="width: 40%;">图例：</div>
|
||||
<Select
|
||||
style="width: 60%;"
|
||||
:value="legend"
|
||||
@update:value="value => updateLegend(value as '' | 'top' | 'bottom')"
|
||||
:options="[
|
||||
{ label: '不显示', value: '' },
|
||||
{ label: '显示在上方', value: 'top' },
|
||||
{ label: '显示在下方', value: 'bottom' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<div class="row">
|
||||
<div style="flex: 2;">背景填充：</div>
|
||||
<Popover trigger="click">
|
||||
<div style="width: 40%;">背景填充：</div>
|
||||
<Popover trigger="click" style="width: 60%;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="fill"
|
||||
@update:modelValue="value => updateFill(value)"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="fill" style="flex: 3;" />
|
||||
<ColorButton :color="fill" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">网格颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<div style="width: 40%;">网格颜色：</div>
|
||||
<Popover trigger="click" style="width: 60%;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="gridColor"
|
||||
@update:modelValue="value => updateGridColor(value)"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="gridColor" style="flex: 3;" />
|
||||
<ColorButton :color="gridColor" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<div class="row" v-for="(color, index) in themeColor" :key="index">
|
||||
<div style="flex: 2;">{{index === 0 ? '主题配色：' : ''}}</div>
|
||||
<Popover trigger="click">
|
||||
<div style="width: 40%;">{{index === 0 ? '主题配色：' : ''}}</div>
|
||||
<Popover trigger="click" style="width: 60%;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="color"
|
||||
@update:modelValue="value => updateTheme(value, index)"
|
||||
/>
|
||||
</template>
|
||||
<div class="color-btn-wrap" style="flex: 3;">
|
||||
<div class="color-btn-wrap" 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>
|
||||
</Popover>
|
||||
</div>
|
||||
<ButtonGroup class="row">
|
||||
<Popover trigger="click" v-model:open="presetThemesVisible">
|
||||
<Popover trigger="click" v-model:open="presetThemesVisible" style="width: 40%;">
|
||||
<template #content>
|
||||
<div class="preset-themes">
|
||||
<div class="preset-theme" v-for="(item, index) in presetChartThemes" :key="index">
|
||||
@ -118,7 +123,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<Button class="no-padding" style="width: 40%;">推荐主题</Button>
|
||||
<Button class="no-padding" style="width: 100%;">推荐主题</Button>
|
||||
</Popover>
|
||||
<Button
|
||||
class="no-padding"
|
||||
@ -164,11 +169,8 @@ import Divider from '@/components/Divider.vue'
|
||||
import Checkbox from '@/components/Checkbox.vue'
|
||||
import Button from '@/components/Button.vue'
|
||||
import ButtonGroup from '@/components/ButtonGroup.vue'
|
||||
import {
|
||||
Popover,
|
||||
Select,
|
||||
} from 'ant-design-vue'
|
||||
const SelectOption = Select.Option
|
||||
import Select from '@/components/Select.vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
|
||||
const presetChartThemes = [
|
||||
['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8', '#efa18d'],
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
<ButtonGroup class="row">
|
||||
<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>
|
||||
<div class="clip">
|
||||
<div class="title">按形状：</div>
|
||||
@ -37,7 +37,7 @@
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<Button class="popover-btn" style="width: calc(100% / 6);"><IconDown /></Button>
|
||||
<Button class="popover-btn" style="width: 100%;"><IconDown /></Button>
|
||||
</Popover>
|
||||
</ButtonGroup>
|
||||
|
||||
@ -77,7 +77,7 @@ import FileInput from '@/components/FileInput.vue'
|
||||
import Divider from '@/components/Divider.vue'
|
||||
import Button from '@/components/Button.vue'
|
||||
import ButtonGroup from '@/components/ButtonGroup.vue'
|
||||
import { Popover } from 'ant-design-vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
|
||||
const shapeClipPathOptions = CLIPPATHS
|
||||
const ratioClipOptions = [
|
||||
|
||||
@ -5,25 +5,25 @@
|
||||
<Divider />
|
||||
|
||||
<div class="row">
|
||||
<div style="flex: 2;">颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<div style="width: 40%;">颜色：</div>
|
||||
<Popover trigger="click" style="width: 60%;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="handleLatexElement.color"
|
||||
@update:modelValue="value => updateLatex({ color: value })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="handleLatexElement.color" style="flex: 3;" />
|
||||
<ColorButton :color="handleLatexElement.color" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">粗细：</div>
|
||||
<div style="width: 40%;">粗细：</div>
|
||||
<NumberInput
|
||||
:min="1"
|
||||
:max="3"
|
||||
:value="handleLatexElement.strokeWidth"
|
||||
@update:value="value => updateLatex({ strokeWidth: value })"
|
||||
style="flex: 3;"
|
||||
style="width: 60%;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -55,7 +55,7 @@ import Modal from '@/components/Modal.vue'
|
||||
import Divider from '@/components/Divider.vue'
|
||||
import Button from '@/components/Button.vue'
|
||||
import NumberInput from '@/components/NumberInput.vue'
|
||||
import { Popover } from 'ant-design-vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
|
||||
const slidesStore = useSlidesStore()
|
||||
const { handleElement } = storeToRefs(useMainStore())
|
||||
|
||||
@ -1,60 +1,63 @@
|
||||
<template>
|
||||
<div class="line-style-panel">
|
||||
<div class="row">
|
||||
<div style="flex: 2;">线条样式：</div>
|
||||
<div style="width: 40%;">线条样式：</div>
|
||||
<Select
|
||||
style="flex: 3;"
|
||||
style="width: 60%;"
|
||||
:value="handleLineElement.style"
|
||||
@change="value => updateLine({ style: value as 'solid' | 'dashed' })"
|
||||
>
|
||||
<SelectOption value="solid">实线</SelectOption>
|
||||
<SelectOption value="dashed">虚线</SelectOption>
|
||||
</Select>
|
||||
@update:value="value => updateLine({ style: value as 'solid' | 'dashed' })"
|
||||
:options="[
|
||||
{ label: '实线', value: 'solid' },
|
||||
{ label: '虚线', value: 'dashed' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">线条颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<div style="width: 40%;">线条颜色：</div>
|
||||
<Popover trigger="click" style="width: 60%;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="handleLineElement.color"
|
||||
@update:modelValue="value => updateLine({ color: value })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="handleLineElement.color" style="flex: 3;" />
|
||||
<ColorButton :color="handleLineElement.color" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">线条宽度：</div>
|
||||
<div style="width: 40%;">线条宽度：</div>
|
||||
<NumberInput
|
||||
:value="handleLineElement.width"
|
||||
@update:value="value => updateLine({ width: value })"
|
||||
style="flex: 3;"
|
||||
style="width: 60%;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div style="flex: 2;">起点样式：</div>
|
||||
<div style="width: 40%;">起点样式：</div>
|
||||
<Select
|
||||
style="flex: 3;"
|
||||
style="width: 60%;"
|
||||
:value="handleLineElement.points[0]"
|
||||
@change="value => updateLine({ points: [value as 'arrow' | 'dot', handleLineElement.points[1]] })"
|
||||
>
|
||||
<SelectOption value="">无</SelectOption>
|
||||
<SelectOption value="arrow">箭头</SelectOption>
|
||||
<SelectOption value="dot">圆点</SelectOption>
|
||||
</Select>
|
||||
@update:value="value => updateLine({ points: [value as 'arrow' | 'dot', handleLineElement.points[1]] })"
|
||||
:options="[
|
||||
{ label: '无', value: '' },
|
||||
{ label: '箭头', value: 'arrow' },
|
||||
{ label: '圆点', value: 'dot' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">终点样式：</div>
|
||||
<div style="width: 40%;">终点样式：</div>
|
||||
<Select
|
||||
style="flex: 3;"
|
||||
style="width: 60%;"
|
||||
:value="handleLineElement.points[1]"
|
||||
@change="value => updateLine({ points: [handleLineElement.points[0], value as 'arrow' | 'dot'] })"
|
||||
>
|
||||
<SelectOption value="">无</SelectOption>
|
||||
<SelectOption value="arrow">箭头</SelectOption>
|
||||
<SelectOption value="dot">圆点</SelectOption>
|
||||
</Select>
|
||||
@update:value="value => updateLine({ points: [handleLineElement.points[0], value as 'arrow' | 'dot'] })"
|
||||
:options="[
|
||||
{ label: '无', value: '' },
|
||||
{ label: '箭头', value: 'arrow' },
|
||||
{ label: '圆点', value: 'dot' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
@ -74,11 +77,8 @@ import ColorButton from '../common/ColorButton.vue'
|
||||
import ColorPicker from '@/components/ColorPicker/index.vue'
|
||||
import Divider from '@/components/Divider.vue'
|
||||
import NumberInput from '@/components/NumberInput.vue'
|
||||
import {
|
||||
Popover,
|
||||
Select,
|
||||
} from 'ant-design-vue'
|
||||
const SelectOption = Select.Option
|
||||
import Select from '@/components/Select.vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
|
||||
const slidesStore = useSlidesStore()
|
||||
const { handleElement } = storeToRefs(useMainStore())
|
||||
|
||||
@ -1,103 +1,102 @@
|
||||
<template>
|
||||
<div class="multi-style-panel">
|
||||
<div class="row">
|
||||
<div style="flex: 2;">填充颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<div style="width: 40%;">填充颜色：</div>
|
||||
<Popover trigger="click" style="width: 60%;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="fill"
|
||||
@update:modelValue="value => updateFill(value)"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="fill" style="flex: 3;" />
|
||||
<ColorButton :color="fill" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<div class="row">
|
||||
<div style="flex: 2;">边框样式：</div>
|
||||
<div style="width: 40%;">边框样式：</div>
|
||||
<Select
|
||||
style="flex: 3;"
|
||||
:value="outline.style"
|
||||
@change="value => updateOutline({ style: value as 'solid' | 'dashed' })"
|
||||
>
|
||||
<SelectOption value="solid">实线边框</SelectOption>
|
||||
<SelectOption value="dashed">虚线边框</SelectOption>
|
||||
</Select>
|
||||
style="width: 60%;"
|
||||
:value="outline.style || ''"
|
||||
@update:value="value => updateOutline({ style: value as 'solid' | 'dashed' })"
|
||||
:options="[
|
||||
{ label: '实线边框', value: 'solid' },
|
||||
{ label: '虚线边框', value: 'dashed' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">边框颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<div style="width: 40%;">边框颜色：</div>
|
||||
<Popover trigger="click" style="width: 60%;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="outline.color"
|
||||
@update:modelValue="value => updateOutline({ color: value })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="outline.color || '#000'" style="flex: 3;" />
|
||||
<ColorButton :color="outline.color || '#000'" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">边框粗细：</div>
|
||||
<div style="width: 40%;">边框粗细：</div>
|
||||
<NumberInput
|
||||
:value="outline.width || 0"
|
||||
@update:value="value => updateOutline({ width: value })"
|
||||
style="flex: 3;"
|
||||
style="width: 60%;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<InputGroup compact class="row">
|
||||
<SelectGroup class="row">
|
||||
<Select
|
||||
style="flex: 3;"
|
||||
: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>
|
||||
<SelectOptGroup label="系统字体">
|
||||
<SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value">
|
||||
<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>
|
||||
<template #icon>
|
||||
<IconFontSize />
|
||||
</template>
|
||||
</Select>
|
||||
<Select
|
||||
style="flex: 2;"
|
||||
: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>
|
||||
<SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize">
|
||||
{{fontsize}}
|
||||
</SelectOption>
|
||||
<template #icon>
|
||||
<IconAddText />
|
||||
</template>
|
||||
</Select>
|
||||
</InputGroup>
|
||||
</SelectGroup>
|
||||
<ButtonGroup class="row">
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="richTextAttrs.color"
|
||||
@update:modelValue="value => updateFontStyle('color', value)"
|
||||
/>
|
||||
</template>
|
||||
<TextColorButton :color="richTextAttrs.color" style="flex: 3;" v-tooltip="'文字颜色'">
|
||||
<TextColorButton :color="richTextAttrs.color" style="width: 100%;" v-tooltip="'文字颜色'">
|
||||
<IconText />
|
||||
</TextColorButton>
|
||||
</Popover>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="richTextAttrs.backcolor"
|
||||
@update:modelValue="value => updateFontStyle('backcolor', value)"
|
||||
/>
|
||||
</template>
|
||||
<TextColorButton :color="richTextAttrs.backcolor" style="flex: 3;" v-tooltip="'文字高亮'">
|
||||
<TextColorButton :color="richTextAttrs.backcolor" style="width: 100%;" v-tooltip="'文字高亮'">
|
||||
<IconHighLight />
|
||||
</TextColorButton>
|
||||
</Popover>
|
||||
@ -145,13 +144,9 @@ import ButtonGroup from '@/components/ButtonGroup.vue'
|
||||
import RadioButton from '@/components/RadioButton.vue'
|
||||
import RadioGroup from '@/components/RadioGroup.vue'
|
||||
import NumberInput from '@/components/NumberInput.vue'
|
||||
import {
|
||||
Popover,
|
||||
Select,
|
||||
Input,
|
||||
} from 'ant-design-vue'
|
||||
const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
|
||||
const InputGroup = Input.Group
|
||||
import Select from '@/components/Select.vue'
|
||||
import SelectGroup from '@/components/SelectGroup.vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
|
||||
const slidesStore = useSlidesStore()
|
||||
const { richTextAttrs, availableFonts, activeElementList } = storeToRefs(useMainStore())
|
||||
|
||||
@ -24,55 +24,57 @@
|
||||
<Select
|
||||
style="flex: 10;"
|
||||
:value="fillType"
|
||||
@change="value => updateFillType(value as 'fill' | 'gradient')"
|
||||
>
|
||||
<SelectOption value="fill">纯色填充</SelectOption>
|
||||
<SelectOption value="gradient">渐变填充</SelectOption>
|
||||
</Select>
|
||||
@update:value="value => updateFillType(value as 'fill' | 'gradient')"
|
||||
:options="[
|
||||
{ label: '纯色填充', value: 'fill' },
|
||||
{ label: '渐变填充', value: 'gradient' },
|
||||
]"
|
||||
/>
|
||||
<div style="flex: 1;"></div>
|
||||
<Popover trigger="click" v-if="fillType === 'fill'">
|
||||
<Popover trigger="click" v-if="fillType === 'fill'" style="flex: 10;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="fill"
|
||||
@update:modelValue="value => updateFill(value)"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="fill" style="flex: 10;" />
|
||||
<ColorButton :color="fill" style="width: 100%;" />
|
||||
</Popover>
|
||||
<Select
|
||||
style="flex: 10;"
|
||||
:value="gradient.type"
|
||||
@change="value => updateGradient({ type: value as 'linear' | 'radial' })"
|
||||
@update:value="value => updateGradient({ type: value as 'linear' | 'radial' })"
|
||||
v-else
|
||||
>
|
||||
<SelectOption value="linear">线性渐变</SelectOption>
|
||||
<SelectOption value="radial">径向渐变</SelectOption>
|
||||
</Select>
|
||||
:options="[
|
||||
{ label: '线性渐变', value: 'linear' },
|
||||
{ label: '径向渐变', value: 'radial' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template v-if="fillType === 'gradient'">
|
||||
<div class="row">
|
||||
<div style="flex: 2;">起点颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="gradient.color[0]"
|
||||
@update:modelValue="value => updateGradient({ color: [value, gradient.color[1]] })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="gradient.color[0]" style="flex: 3;" />
|
||||
<ColorButton :color="gradient.color[0]" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">终点颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="gradient.color[1]"
|
||||
@update:modelValue="value => updateGradient({ color: [gradient.color[0], value] })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="gradient.color[1]" style="flex: 3;" />
|
||||
<ColorButton :color="gradient.color[1]" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="row" v-if="gradient.type === 'linear'">
|
||||
@ -93,57 +95,55 @@
|
||||
<Divider />
|
||||
|
||||
<template v-if="handleShapeElement.text?.content">
|
||||
<InputGroup compact class="row">
|
||||
<SelectGroup class="row">
|
||||
<Select
|
||||
class="font-select"
|
||||
style="flex: 3;"
|
||||
: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>
|
||||
<SelectOptGroup label="系统字体">
|
||||
<SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value">
|
||||
<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>
|
||||
<template #icon>
|
||||
<IconFontSize />
|
||||
</template>
|
||||
</Select>
|
||||
<Select
|
||||
style="flex: 2;"
|
||||
: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>
|
||||
<SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize">
|
||||
{{fontsize}}
|
||||
</SelectOption>
|
||||
<template #icon>
|
||||
<IconAddText />
|
||||
</template>
|
||||
</Select>
|
||||
</InputGroup>
|
||||
</SelectGroup>
|
||||
|
||||
<ButtonGroup class="row">
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="richTextAttrs.color"
|
||||
@update:modelValue="value => emitRichTextCommand('color', value)"
|
||||
/>
|
||||
</template>
|
||||
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="flex: 3;">
|
||||
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="width: 100%;">
|
||||
<IconText />
|
||||
</TextColorButton>
|
||||
</Popover>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="richTextAttrs.backcolor"
|
||||
@update:modelValue="value => emitRichTextCommand('backcolor', value)"
|
||||
/>
|
||||
</template>
|
||||
<TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="flex: 3;">
|
||||
<TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="width: 100%;">
|
||||
<IconHighLight />
|
||||
</TextColorButton>
|
||||
</Popover>
|
||||
@ -263,13 +263,9 @@ import Button from '@/components/Button.vue'
|
||||
import ButtonGroup from '@/components/ButtonGroup.vue'
|
||||
import RadioButton from '@/components/RadioButton.vue'
|
||||
import RadioGroup from '@/components/RadioGroup.vue'
|
||||
import {
|
||||
Popover,
|
||||
Select,
|
||||
Input,
|
||||
} from 'ant-design-vue'
|
||||
const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
|
||||
const InputGroup = Input.Group
|
||||
import Select from '@/components/Select.vue'
|
||||
import SelectGroup from '@/components/SelectGroup.vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
|
||||
const mainStore = useMainStore()
|
||||
const slidesStore = useSlidesStore()
|
||||
|
||||
@ -1,55 +1,53 @@
|
||||
<template>
|
||||
<div class="table-style-panel">
|
||||
<InputGroup compact class="row">
|
||||
<SelectGroup class="row">
|
||||
<Select
|
||||
style="flex: 3;"
|
||||
style="width: 50%;"
|
||||
: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>
|
||||
<SelectOptGroup label="系统字体">
|
||||
<SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value">
|
||||
<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>
|
||||
<template #icon>
|
||||
<IconFontSize />
|
||||
</template>
|
||||
</Select>
|
||||
<Select
|
||||
style="flex: 2;"
|
||||
style="width: 50%;"
|
||||
: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>
|
||||
<SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize">
|
||||
{{fontsize}}
|
||||
</SelectOption>
|
||||
<template #icon>
|
||||
<IconAddText />
|
||||
</template>
|
||||
</Select>
|
||||
</InputGroup>
|
||||
</SelectGroup>
|
||||
|
||||
<ButtonGroup class="row">
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="width: 50%;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="textAttrs.color"
|
||||
@update:modelValue="value => updateTextAttrs({ color: value })"
|
||||
/>
|
||||
</template>
|
||||
<TextColorButton v-tooltip="'文字颜色'" :color="textAttrs.color" style="flex: 1;">
|
||||
<TextColorButton v-tooltip="'文字颜色'" :color="textAttrs.color" style="width: 100%;">
|
||||
<IconText />
|
||||
</TextColorButton>
|
||||
</Popover>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="width: 50%;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="textAttrs.backcolor"
|
||||
@update:modelValue="value => updateTextAttrs({ backcolor: value })"
|
||||
/>
|
||||
</template>
|
||||
<TextColorButton v-tooltip="'单元格填充'" :color="textAttrs.backcolor" style="flex: 1;">
|
||||
<TextColorButton v-tooltip="'单元格填充'" :color="textAttrs.backcolor" style="width: 100%;">
|
||||
<IconFill />
|
||||
</TextColorButton>
|
||||
</Popover>
|
||||
@ -100,16 +98,16 @@
|
||||
<Divider />
|
||||
|
||||
<div class="row">
|
||||
<div style="flex: 2;">行数：</div>
|
||||
<div class="set-count" style="flex: 3;">
|
||||
<div style="width: 40%;">行数：</div>
|
||||
<div class="set-count" style="width: 60%;">
|
||||
<Button class="btn" :disabled="rowCount <= 1" @click="setTableRow(rowCount - 1)"><IconMinus /></Button>
|
||||
<div class="count-text">{{rowCount}}</div>
|
||||
<Button class="btn" :disabled="rowCount >= 30" @click="setTableRow(rowCount + 1)"><IconPlus /></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">列数：</div>
|
||||
<div class="set-count" style="flex: 3;">
|
||||
<div style="width: 40%;">列数：</div>
|
||||
<div class="set-count" style="width: 60%;">
|
||||
<Button class="btn" :disabled="colCount <= 1" @click="setTableCol(colCount - 1)"><IconMinus /></Button>
|
||||
<div class="count-text">{{colCount}}</div>
|
||||
<Button class="btn" :disabled="colCount >= 30" @click="setTableCol(colCount + 1)"><IconPlus /></Button>
|
||||
@ -119,8 +117,8 @@
|
||||
<Divider />
|
||||
|
||||
<div class="row theme-switch">
|
||||
<div style="flex: 2;">启用主题表格：</div>
|
||||
<div class="switch-wrapper" style="flex: 3;">
|
||||
<div style="width: 40%;">启用主题表格：</div>
|
||||
<div class="switch-wrapper" style="width: 60%;">
|
||||
<Switch
|
||||
:value="hasTheme"
|
||||
@update:value="value => toggleTheme(value)"
|
||||
@ -154,15 +152,15 @@
|
||||
>最后一列</Checkbox>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">主题颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<div style="width: 40%;">主题颜色：</div>
|
||||
<Popover trigger="click" style="width: 60%;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="theme.color"
|
||||
@update:modelValue="value => updateTheme({ color: value })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="theme.color" style="flex: 3;" />
|
||||
<ColorButton :color="theme.color" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
</template>
|
||||
@ -190,13 +188,9 @@ import Button from '@/components/Button.vue'
|
||||
import ButtonGroup from '@/components/ButtonGroup.vue'
|
||||
import RadioButton from '@/components/RadioButton.vue'
|
||||
import RadioGroup from '@/components/RadioGroup.vue'
|
||||
import {
|
||||
Popover,
|
||||
Select,
|
||||
Input,
|
||||
} from 'ant-design-vue'
|
||||
const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
|
||||
const InputGroup = Input.Group
|
||||
import Select from '@/components/Select.vue'
|
||||
import SelectGroup from '@/components/SelectGroup.vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
|
||||
const slidesStore = useSlidesStore()
|
||||
const { handleElement, handleElementId, selectedTableCells: selectedCells, availableFonts } = storeToRefs(useMainStore())
|
||||
|
||||
@ -12,57 +12,55 @@
|
||||
|
||||
<Divider />
|
||||
|
||||
<InputGroup compact class="row">
|
||||
<SelectGroup class="row">
|
||||
<Select
|
||||
class="font-select"
|
||||
style="flex: 3;"
|
||||
style="width: 50%;"
|
||||
: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>
|
||||
<SelectOptGroup label="系统字体">
|
||||
<SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value">
|
||||
<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>
|
||||
<template #icon>
|
||||
<IconFontSize />
|
||||
</template>
|
||||
</Select>
|
||||
<Select
|
||||
style="flex: 2;"
|
||||
style="width: 50%;"
|
||||
: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>
|
||||
<SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize">
|
||||
{{fontsize}}
|
||||
</SelectOption>
|
||||
<template #icon>
|
||||
<IconAddText />
|
||||
</template>
|
||||
</Select>
|
||||
</InputGroup>
|
||||
</SelectGroup>
|
||||
|
||||
<ButtonGroup class="row">
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="richTextAttrs.color"
|
||||
@update:modelValue="value => emitRichTextCommand('color', value)"
|
||||
/>
|
||||
</template>
|
||||
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="flex: 3;">
|
||||
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="width: 100%;">
|
||||
<IconText />
|
||||
</TextColorButton>
|
||||
</Popover>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="richTextAttrs.backcolor"
|
||||
@update:modelValue="value => emitRichTextCommand('backcolor', value)"
|
||||
/>
|
||||
</template>
|
||||
<TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="flex: 3;">
|
||||
<TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="width: 100%;">
|
||||
<IconHighLight />
|
||||
</TextColorButton>
|
||||
</Popover>
|
||||
@ -146,7 +144,7 @@
|
||||
v-tooltip="'格式刷'"
|
||||
@click="toggleFormatPainter()"
|
||||
><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>
|
||||
<div class="link-popover">
|
||||
<Input v-model:value="link" placeholder="请输入超链接" />
|
||||
@ -157,7 +155,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<CheckboxButton
|
||||
style="flex: 1;"
|
||||
style="width: 100%;"
|
||||
:checked="!!richTextAttrs.link"
|
||||
v-tooltip="'超链接'"
|
||||
@click="openLinkPopover()"
|
||||
@ -187,7 +185,7 @@
|
||||
v-tooltip="'项目符号'"
|
||||
@click="emitRichTextCommand('bulletList')"
|
||||
><IconList /></Button>
|
||||
<Popover trigger="click" v-model:open="bulletListPanelVisible">
|
||||
<Popover trigger="click" v-model:value="bulletListPanelVisible">
|
||||
<template #content>
|
||||
<div class="list-wrap">
|
||||
<ul class="list"
|
||||
@ -211,7 +209,7 @@
|
||||
v-tooltip="'编号'"
|
||||
@click="emitRichTextCommand('orderedList')"
|
||||
><IconOrderedList /></Button>
|
||||
<Popover trigger="click" v-model:open="orderedListPanelVisible">
|
||||
<Popover trigger="click" v-model:value="orderedListPanelVisible">
|
||||
<template #content>
|
||||
<div class="list-wrap">
|
||||
<ul class="list"
|
||||
@ -232,11 +230,9 @@
|
||||
<div class="row">
|
||||
<ButtonGroup style="flex: 15;">
|
||||
<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>
|
||||
<div class="popover-list">
|
||||
<span class="popover-item" @click="emitRichTextCommand('textIndent', '-1')">减小首行缩进</span>
|
||||
</div>
|
||||
<PopoverMenuItem @click="emitRichTextCommand('textIndent', '-1')">减小首行缩进</PopoverMenuItem>
|
||||
</template>
|
||||
<Button class="popover-btn"><IconDown /></Button>
|
||||
</Popover>
|
||||
@ -244,11 +240,9 @@
|
||||
<div style="flex: 1;"></div>
|
||||
<ButtonGroup style="flex: 15;">
|
||||
<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>
|
||||
<div class="popover-list">
|
||||
<span class="popover-item" @click="emitRichTextCommand('textIndent', '+1')">增大首行缩进</span>
|
||||
</div>
|
||||
<PopoverMenuItem @click="emitRichTextCommand('textIndent', '+1')">增大首行缩进</PopoverMenuItem>
|
||||
</template>
|
||||
<Button class="popover-btn"><IconDown /></Button>
|
||||
</Popover>
|
||||
@ -258,36 +252,57 @@
|
||||
<Divider />
|
||||
|
||||
<div class="row">
|
||||
<div style="flex: 2;">行间距：</div>
|
||||
<Select style="flex: 3;" :value="lineHeight" @change="value => updateLineHeight(value as number)">
|
||||
<template #suffixIcon><IconRowHeight /></template>
|
||||
<SelectOption v-for="item in lineHeightOptions" :key="item" :value="item">{{item}}倍</SelectOption>
|
||||
<div style="width: 40%;">行间距：</div>
|
||||
<Select style="width: 60%;"
|
||||
:value="lineHeight || 1"
|
||||
@update:value="value => updateLineHeight(value as number)"
|
||||
:options="lineHeightOptions.map(item => ({
|
||||
label: item + '倍', value: item
|
||||
}))"
|
||||
>
|
||||
<template #icon>
|
||||
<IconRowHeight />
|
||||
</template>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">段间距：</div>
|
||||
<Select style="flex: 3;" :value="paragraphSpace" @change="value => updateParagraphSpace(value as number)">
|
||||
<template #suffixIcon><IconVerticalSpacingBetweenItems /></template>
|
||||
<SelectOption v-for="item in paragraphSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
|
||||
<div style="width: 40%;">段间距：</div>
|
||||
<Select style="width: 60%;"
|
||||
:value="paragraphSpace || 0"
|
||||
@update:value="value => updateParagraphSpace(value as number)"
|
||||
:options="paragraphSpaceOptions.map(item => ({
|
||||
label: item + 'px', value: item
|
||||
}))"
|
||||
>
|
||||
<template #icon>
|
||||
<IconVerticalSpacingBetweenItems />
|
||||
</template>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">字间距：</div>
|
||||
<Select style="flex: 3;" :value="wordSpace" @change="value => updateWordSpace(value as number)">
|
||||
<template #suffixIcon><IconFullwidth /></template>
|
||||
<SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
|
||||
<div style="width: 40%;">字间距：</div>
|
||||
<Select style="width: 60%;"
|
||||
:value="wordSpace || 0"
|
||||
@update:value="value => updateWordSpace(value as number)"
|
||||
:options="wordSpaceOptions.map(item => ({
|
||||
label: item + 'px', value: item
|
||||
}))"
|
||||
>
|
||||
<template #icon>
|
||||
<IconFullwidth />
|
||||
</template>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">文本框填充：</div>
|
||||
<Popover trigger="click">
|
||||
<div style="width: 40%;">文本框填充：</div>
|
||||
<Popover trigger="click" style="width: 60%;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="fill"
|
||||
@update:modelValue="value => updateFill(value)"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="fill" style="flex: 3;" />
|
||||
<ColorButton :color="fill" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
@ -324,13 +339,10 @@ import Button from '@/components/Button.vue'
|
||||
import ButtonGroup from '@/components/ButtonGroup.vue'
|
||||
import RadioButton from '@/components/RadioButton.vue'
|
||||
import RadioGroup from '@/components/RadioGroup.vue'
|
||||
import {
|
||||
Popover,
|
||||
Select,
|
||||
Input as AntInput,
|
||||
} from 'ant-design-vue'
|
||||
const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
|
||||
const InputGroup = AntInput.Group
|
||||
import Select from '@/components/Select.vue'
|
||||
import SelectGroup from '@/components/SelectGroup.vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
|
||||
|
||||
// 注意，存在一个未知原因的BUG，如果文本加粗后文本框高度增加，画布的可视区域定位会出现错误
|
||||
// 因此在执行预置样式命令时，将加粗命令放在尽可能靠前的位置，避免字号增大后再加粗
|
||||
@ -488,7 +500,6 @@ watch(richTextAttrs, () => linkPopoverVisible.value = false)
|
||||
|
||||
const openLinkPopover = () => {
|
||||
link.value = richTextAttrs.value.link
|
||||
linkPopoverVisible.value = true
|
||||
}
|
||||
const updateLink = (link?: string) => {
|
||||
const linkRegExp = /^(https?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/
|
||||
@ -590,6 +601,7 @@ const updateLink = (link?: string) => {
|
||||
width: 24px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
top: -5px;
|
||||
|
||||
span {
|
||||
|
||||
@ -5,44 +5,47 @@
|
||||
<Select
|
||||
style="flex: 10;"
|
||||
:value="background.type"
|
||||
@change="value => updateBackgroundType(value as 'gradient' | 'image' | 'solid')"
|
||||
>
|
||||
<SelectOption value="solid">纯色填充</SelectOption>
|
||||
<SelectOption value="image">图片填充</SelectOption>
|
||||
<SelectOption value="gradient">渐变填充</SelectOption>
|
||||
</Select>
|
||||
@update:value="value => updateBackgroundType(value as 'gradient' | 'image' | 'solid')"
|
||||
:options="[
|
||||
{ label: '纯色填充', value: 'solid' },
|
||||
{ label: '图片填充', value: 'image' },
|
||||
{ label: '渐变填充', value: 'gradient' },
|
||||
]"
|
||||
/>
|
||||
<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>
|
||||
<ColorPicker
|
||||
:modelValue="background.color"
|
||||
@update:modelValue="color => updateBackground({ color })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="background.color || '#fff'" style="flex: 10;" />
|
||||
<ColorButton :color="background.color || '#fff'" style="width: 100%;" />
|
||||
</Popover>
|
||||
|
||||
<Select
|
||||
style="flex: 10;"
|
||||
: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'"
|
||||
>
|
||||
<SelectOption value="contain">缩放</SelectOption>
|
||||
<SelectOption value="repeat">拼贴</SelectOption>
|
||||
<SelectOption value="cover">缩放铺满</SelectOption>
|
||||
</Select>
|
||||
:options="[
|
||||
{ label: '缩放', value: 'contain' },
|
||||
{ label: '拼贴', value: 'repeat' },
|
||||
{ label: '缩放铺满', value: 'cover' },
|
||||
]"
|
||||
/>
|
||||
|
||||
<Select
|
||||
style="flex: 10;"
|
||||
:value="background.gradientType"
|
||||
@change="value => updateBackground({ gradientType: value as 'linear' | 'radial' })"
|
||||
:value="background.gradientType || ''"
|
||||
@update:value="value => updateBackground({ gradientType: value as 'linear' | 'radial' })"
|
||||
v-else
|
||||
>
|
||||
<SelectOption value="linear">线性渐变</SelectOption>
|
||||
<SelectOption value="radial">径向渐变</SelectOption>
|
||||
</Select>
|
||||
:options="[
|
||||
{ label: '线性渐变', value: 'linear' },
|
||||
{ label: '径向渐变', value: 'radial' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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="row">
|
||||
<div style="flex: 2;">起点颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="background.gradientColor![0]"
|
||||
@update:modelValue="value => updateBackground({ gradientColor: [value, background.gradientColor![1]] })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="background.gradientColor![0]" style="flex: 3;" />
|
||||
<ColorButton :color="background.gradientColor![0]" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">终点颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="background.gradientColor![1]"
|
||||
@update:modelValue="value => updateBackground({ gradientColor: [background.gradientColor![0], value] })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="background.gradientColor![1]" style="flex: 3;" />
|
||||
<ColorButton :color="background.gradientColor![1]" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="row" v-if="background.gradientType === 'linear'">
|
||||
@ -99,12 +102,17 @@
|
||||
|
||||
<div class="row">
|
||||
<div style="flex: 2;">画布尺寸：</div>
|
||||
<Select style="flex: 3;" :value="viewportRatio" @change="value => updateViewportRatio(value as number)">
|
||||
<SelectOption :value="0.5625">宽屏 16 : 9</SelectOption>
|
||||
<SelectOption :value="0.625">宽屏 16 : 10</SelectOption>
|
||||
<SelectOption :value="0.75">标准 4 : 3</SelectOption>
|
||||
<SelectOption :value="0.70710678">纸张 A3 / A4</SelectOption>
|
||||
</Select>
|
||||
<Select
|
||||
style="flex: 3;"
|
||||
:value="viewportRatio"
|
||||
@update:value="value => updateViewportRatio(value as number)"
|
||||
:options="[
|
||||
{ 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>
|
||||
|
||||
<Divider />
|
||||
@ -115,54 +123,47 @@
|
||||
<Select
|
||||
style="flex: 3;"
|
||||
:value="theme.fontName"
|
||||
@change="value => updateTheme({ fontName: value as string })"
|
||||
>
|
||||
<SelectOptGroup label="系统字体">
|
||||
<SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value">
|
||||
<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>
|
||||
@update:value="value => updateTheme({ fontName: value as string })"
|
||||
:options="[
|
||||
...availableFonts,
|
||||
...WEB_FONTS
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">字体颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="theme.fontColor"
|
||||
@update:modelValue="value => updateTheme({ fontColor: value })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="theme.fontColor" style="flex: 3;" />
|
||||
<ColorButton :color="theme.fontColor" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">背景颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="theme.backgroundColor"
|
||||
@update:modelValue="value => updateTheme({ backgroundColor: value })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="theme.backgroundColor" style="flex: 3;" />
|
||||
<ColorButton :color="theme.backgroundColor" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">主题色：</div>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="theme.themeColor"
|
||||
@update:modelValue="value => updateTheme({ themeColor: value })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="theme.themeColor" style="flex: 3;" />
|
||||
<ColorButton :color="theme.themeColor" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
@ -214,11 +215,8 @@ import ColorPicker from '@/components/ColorPicker/index.vue'
|
||||
import Divider from '@/components/Divider.vue'
|
||||
import Slider from '@/components/Slider.vue'
|
||||
import Button from '@/components/Button.vue'
|
||||
import {
|
||||
Popover,
|
||||
Select,
|
||||
} from 'ant-design-vue'
|
||||
const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
|
||||
import Select from '@/components/Select.vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
|
||||
const slidesStore = useSlidesStore()
|
||||
const { availableFonts } = storeToRefs(useMainStore())
|
||||
|
||||
@ -12,14 +12,14 @@
|
||||
<template v-if="hasColorMask">
|
||||
<div class="row" style="margin-top: 15px;">
|
||||
<div style="flex: 2;">蒙版颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="colorMask.color"
|
||||
@update:modelValue="value => updateColorMask({ color: value })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="colorMask.color" style="flex: 3;" />
|
||||
<ColorButton :color="colorMask.color" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -48,7 +48,7 @@ import ColorButton from './ColorButton.vue'
|
||||
import ColorPicker from '@/components/ColorPicker/index.vue'
|
||||
import Switch from '@/components/Switch.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 }
|
||||
|
||||
|
||||
@ -14,23 +14,24 @@
|
||||
<div style="flex: 2;">边框样式：</div>
|
||||
<Select
|
||||
style="flex: 3;"
|
||||
:value="outline.style"
|
||||
@change="value => updateOutline({ style: value as 'dashed' | 'solid' })"
|
||||
>
|
||||
<SelectOption value="solid">实线边框</SelectOption>
|
||||
<SelectOption value="dashed">虚线边框</SelectOption>
|
||||
</Select>
|
||||
:value="outline.style || ''"
|
||||
@update:value="value => updateOutline({ style: value as 'dashed' | 'solid' })"
|
||||
:options="[
|
||||
{ label: '实线边框', value: 'solid' },
|
||||
{ label: '虚线边框', value: 'dashed' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">边框颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="outline.color"
|
||||
@update:modelValue="value => updateOutline({ color: value })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="outline.color || '#000'" style="flex: 3;" />
|
||||
<ColorButton :color="outline.color || '#000'" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -56,11 +57,8 @@ import ColorButton from './ColorButton.vue'
|
||||
import ColorPicker from '@/components/ColorPicker/index.vue'
|
||||
import Switch from '@/components/Switch.vue'
|
||||
import NumberInput from '@/components/NumberInput.vue'
|
||||
import {
|
||||
Popover,
|
||||
Select,
|
||||
} from 'ant-design-vue'
|
||||
const SelectOption = Select.Option
|
||||
import Select from '@/components/Select.vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
|
||||
withDefaults(defineProps<{
|
||||
fixed?: boolean
|
||||
|
||||
@ -42,14 +42,14 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 2;">阴影颜色：</div>
|
||||
<Popover trigger="click">
|
||||
<Popover trigger="click" style="flex: 3;">
|
||||
<template #content>
|
||||
<ColorPicker
|
||||
:modelValue="shadow.color"
|
||||
@update:modelValue="value => updateShadow({ color: value })"
|
||||
/>
|
||||
</template>
|
||||
<ColorButton :color="shadow.color" style="flex: 3;" />
|
||||
<ColorButton :color="shadow.color" style="width: 100%;" />
|
||||
</Popover>
|
||||
</div>
|
||||
</template>
|
||||
@ -67,7 +67,7 @@ import ColorButton from './ColorButton.vue'
|
||||
import ColorPicker from '@/components/ColorPicker/index.vue'
|
||||
import Switch from '@/components/Switch.vue'
|
||||
import Slider from '@/components/Slider.vue'
|
||||
import { Popover } from 'ant-design-vue'
|
||||
import Popover from '@/components/Popover.vue'
|
||||
|
||||
const slidesStore = useSlidesStore()
|
||||
const { handleElement } = storeToRefs(useMainStore())
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
>
|
||||
<div class="tools" @mousedown.stop>
|
||||
<div class="tool-content">
|
||||
<Popover trigger="click" :open="sizePopoverType === 'pen'">
|
||||
<Popover trigger="click" :value="sizePopoverType === 'pen'">
|
||||
<template #content>
|
||||
<div class="size">
|
||||
<div class="label">墨迹粗细：</div>
|
||||
@ -39,7 +39,7 @@
|
||||
<IconWrite class="icon" />
|
||||
</div>
|
||||
</Popover>
|
||||
<Popover trigger="click" :open="sizePopoverType === 'mark'">
|
||||
<Popover trigger="click" :value="sizePopoverType === 'mark'">
|
||||
<template #content>
|
||||
<div class="size">
|
||||
<div class="label">墨迹粗细：</div>
|
||||
@ -50,7 +50,7 @@
|
||||
<IconHighLight class="icon" />
|
||||
</div>
|
||||
</Popover>
|
||||
<Popover trigger="click" :open="sizePopoverType === 'eraser'">
|
||||
<Popover trigger="click" :value="sizePopoverType === 'eraser'">
|
||||
<template #content>
|
||||
<div class="size">
|
||||
<div class="label">橡皮大小：</div>
|
||||
@ -95,7 +95,7 @@ import { db } from '@/utils/database'
|
||||
import WritingBoard from '@/components/WritingBoard.vue'
|
||||
import MoveablePanel from '@/components/MoveablePanel.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']
|
||||
|
||||
@ -238,6 +238,7 @@ const hanldeWritingEnd = () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
font-size: 13px;
|
||||
|
||||
.label {
|
||||
width: 70px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user