mirror of
https://github.com/Powerful-517/yys-editor.git
synced 2025-05-23 19:35:24 +00:00
i18你，重构代码，细节优化
This commit is contained in:
parent
d4b452d234
commit
a935369927
530
package-lock.json
generated
530
package-lock.json
generated
@ -9,9 +9,11 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"@vueup/vue-quill": "^1.2.0",
|
||||
"element-plus": "^2.9.1",
|
||||
"html2canvas": "^1.4.1",
|
||||
"vue": "^3.3.10",
|
||||
"vue-i18n": "^11.1.1",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -516,6 +518,47 @@
|
||||
"integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@intlify/core-base": {
|
||||
"version": "11.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-11.1.1.tgz",
|
||||
"integrity": "sha512-bb8gZvoeKExCI2r/NVCK9E4YyOkvYGaSCPxVZe8T0jz8aX+dHEOZWxK06Z/Y9mWRkJfBiCH4aOhDF1yr1t5J8Q==",
|
||||
"dependencies": {
|
||||
"@intlify/message-compiler": "11.1.1",
|
||||
"@intlify/shared": "11.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/kazupon"
|
||||
}
|
||||
},
|
||||
"node_modules/@intlify/message-compiler": {
|
||||
"version": "11.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-11.1.1.tgz",
|
||||
"integrity": "sha512-4iEsUZ3aF7jXY19CJFN5VP+pPyLITD9FVsjB13z9TU1UxaZLlFsmNhvRxlPDSOfHAP5RpNF2QKKdZ3DHVf4Yzw==",
|
||||
"dependencies": {
|
||||
"@intlify/shared": "11.1.1",
|
||||
"source-map-js": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/kazupon"
|
||||
}
|
||||
},
|
||||
"node_modules/@intlify/shared": {
|
||||
"version": "11.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-11.1.1.tgz",
|
||||
"integrity": "sha512-2kGiWoXaeV8HZlhU/Nml12oTbhv7j2ufsJ5vQaa0VTjzUmZVdd/nmKFRAOJ/FtjO90Qba5AnZDwsrY7ZND5udA==",
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/kazupon"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.4.15",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
|
||||
@ -837,6 +880,11 @@
|
||||
"@vue/shared": "3.3.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
"version": "6.6.4",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
|
||||
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
|
||||
},
|
||||
"node_modules/@vue/eslint-config-prettier": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/eslint-config-prettier/-/eslint-config-prettier-8.0.0.tgz",
|
||||
@ -907,6 +955,18 @@
|
||||
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.11.tgz",
|
||||
"integrity": "sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw=="
|
||||
},
|
||||
"node_modules/@vueup/vue-quill": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@vueup/vue-quill/-/vue-quill-1.2.0.tgz",
|
||||
"integrity": "sha512-kd5QPSHMDpycklojPXno2Kw2JSiKMYduKYQckTm1RJoVDA557MnyUXgcuuDpry4HY/Rny9nGNcK+m3AHk94wag==",
|
||||
"dependencies": {
|
||||
"quill": "^1.3.7",
|
||||
"quill-delta": "^4.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.41"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/core": {
|
||||
"version": "9.13.0",
|
||||
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
|
||||
@ -1115,6 +1175,50 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.8.tgz",
|
||||
"integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.0",
|
||||
"es-define-property": "^1.0.0",
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"set-function-length": "^1.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind-apply-helpers": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bound": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/call-bound/-/call-bound-1.0.3.tgz",
|
||||
"integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.1",
|
||||
"get-intrinsic": "^1.2.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/callsites": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz",
|
||||
@ -1137,6 +1241,14 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/clone": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
|
||||
"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
||||
@ -1222,6 +1334,25 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/deep-equal": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/deep-equal/-/deep-equal-1.1.2.tgz",
|
||||
"integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
|
||||
"dependencies": {
|
||||
"is-arguments": "^1.1.1",
|
||||
"is-date-object": "^1.0.5",
|
||||
"is-regex": "^1.1.4",
|
||||
"object-is": "^1.1.5",
|
||||
"object-keys": "^1.1.1",
|
||||
"regexp.prototype.flags": "^1.5.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/deep-is": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
|
||||
@ -1256,6 +1387,22 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/define-data-property": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz",
|
||||
"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
|
||||
"dependencies": {
|
||||
"es-define-property": "^1.0.0",
|
||||
"es-errors": "^1.3.0",
|
||||
"gopd": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/define-lazy-prop": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
|
||||
@ -1265,6 +1412,22 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/define-properties": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.1.tgz",
|
||||
"integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
|
||||
"dependencies": {
|
||||
"define-data-property": "^1.0.1",
|
||||
"has-property-descriptors": "^1.0.0",
|
||||
"object-keys": "^1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/doctrine": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/doctrine/-/doctrine-3.0.0.tgz",
|
||||
@ -1277,6 +1440,19 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"gopd": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/element-plus": {
|
||||
"version": "2.9.1",
|
||||
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.9.1.tgz",
|
||||
@ -1302,6 +1478,33 @@
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/es-define-property": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
|
||||
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-errors": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
|
||||
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-object-atoms": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
|
||||
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.19.9",
|
||||
"resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.19.9.tgz",
|
||||
@ -1547,6 +1750,11 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eventemitter3": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-2.0.3.tgz",
|
||||
"integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
|
||||
},
|
||||
"node_modules/execa": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/execa/-/execa-7.2.0.tgz",
|
||||
@ -1567,6 +1775,11 @@
|
||||
"node": "^14.18.0 || ^16.14.0 || >=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/extend": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz",
|
||||
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
|
||||
},
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
@ -1705,6 +1918,57 @@
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/functions-have-names": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/functions-have-names/-/functions-have-names-1.2.3.tgz",
|
||||
"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-intrinsic": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
||||
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
"es-define-property": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"es-object-atoms": "^1.1.1",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-proto": "^1.0.1",
|
||||
"gopd": "^1.2.0",
|
||||
"has-symbols": "^1.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"math-intrinsics": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
|
||||
"dependencies": {
|
||||
"dunder-proto": "^1.0.1",
|
||||
"es-object-atoms": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/get-stream": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-6.0.1.tgz",
|
||||
@ -1755,6 +2019,17 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/gopd": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
|
||||
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/graphemer": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/graphemer/-/graphemer-1.4.0.tgz",
|
||||
@ -1770,6 +2045,53 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/has-property-descriptors": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
|
||||
"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
|
||||
"dependencies": {
|
||||
"es-define-property": "^1.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has-symbols": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has-tostringtag": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
|
||||
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
|
||||
"dependencies": {
|
||||
"has-symbols": "^1.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/hasown": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
|
||||
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/html2canvas": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
|
||||
@ -1838,6 +2160,36 @@
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/is-arguments": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-arguments/-/is-arguments-1.2.0.tgz",
|
||||
"integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
|
||||
"dependencies": {
|
||||
"call-bound": "^1.0.2",
|
||||
"has-tostringtag": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-date-object": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-date-object/-/is-date-object-1.1.0.tgz",
|
||||
"integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
|
||||
"dependencies": {
|
||||
"call-bound": "^1.0.2",
|
||||
"has-tostringtag": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-docker": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-3.0.0.tgz",
|
||||
@ -1904,6 +2256,23 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-regex": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/is-regex/-/is-regex-1.2.1.tgz",
|
||||
"integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
|
||||
"dependencies": {
|
||||
"call-bound": "^1.0.2",
|
||||
"gopd": "^1.2.0",
|
||||
"has-tostringtag": "^1.0.2",
|
||||
"hasown": "^2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-stream": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-3.0.0.tgz",
|
||||
@ -2027,6 +2396,17 @@
|
||||
"lodash-es": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash.clonedeep": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
|
||||
"integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
|
||||
},
|
||||
"node_modules/lodash.isequal": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
|
||||
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
|
||||
"deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead."
|
||||
},
|
||||
"node_modules/lodash.merge": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
@ -2056,6 +2436,14 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/memoize-one": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
|
||||
@ -2168,6 +2556,29 @@
|
||||
"boolbase": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/object-is": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmmirror.com/object-is/-/object-is-1.1.6.tgz",
|
||||
"integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
|
||||
"dependencies": {
|
||||
"call-bind": "^1.0.7",
|
||||
"define-properties": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/object-keys": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/object-keys/-/object-keys-1.1.1.tgz",
|
||||
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/once": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
|
||||
@ -2245,6 +2656,11 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/parchment": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/parchment/-/parchment-1.1.4.tgz",
|
||||
"integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
|
||||
},
|
||||
"node_modules/parent-module": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
|
||||
@ -2372,6 +2788,71 @@
|
||||
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/quill": {
|
||||
"version": "1.3.7",
|
||||
"resolved": "https://registry.npmmirror.com/quill/-/quill-1.3.7.tgz",
|
||||
"integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
|
||||
"dependencies": {
|
||||
"clone": "^2.1.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"eventemitter3": "^2.0.3",
|
||||
"extend": "^3.0.2",
|
||||
"parchment": "^1.1.4",
|
||||
"quill-delta": "^3.6.2"
|
||||
}
|
||||
},
|
||||
"node_modules/quill-delta": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/quill-delta/-/quill-delta-4.2.2.tgz",
|
||||
"integrity": "sha512-qjbn82b/yJzOjstBgkhtBjN2TNK+ZHP/BgUQO+j6bRhWQQdmj2lH6hXG7+nwwLF41Xgn//7/83lxs9n2BkTtTg==",
|
||||
"dependencies": {
|
||||
"fast-diff": "1.2.0",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.isequal": "^4.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/quill-delta/node_modules/fast-diff": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.2.0.tgz",
|
||||
"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
|
||||
},
|
||||
"node_modules/quill/node_modules/fast-diff": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.1.2.tgz",
|
||||
"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
|
||||
},
|
||||
"node_modules/quill/node_modules/quill-delta": {
|
||||
"version": "3.6.3",
|
||||
"resolved": "https://registry.npmmirror.com/quill-delta/-/quill-delta-3.6.3.tgz",
|
||||
"integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
|
||||
"dependencies": {
|
||||
"deep-equal": "^1.0.1",
|
||||
"extend": "^3.0.2",
|
||||
"fast-diff": "1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/regexp.prototype.flags": {
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmmirror.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
|
||||
"integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
|
||||
"dependencies": {
|
||||
"call-bind": "^1.0.8",
|
||||
"define-properties": "^1.2.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"get-proto": "^1.0.1",
|
||||
"gopd": "^1.2.0",
|
||||
"set-function-name": "^2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve-from": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||
@ -2548,6 +3029,36 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/set-function-length": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||
"integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
|
||||
"dependencies": {
|
||||
"define-data-property": "^1.1.4",
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"gopd": "^1.0.1",
|
||||
"has-property-descriptors": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/set-function-name": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/set-function-name/-/set-function-name-2.0.2.tgz",
|
||||
"integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
|
||||
"dependencies": {
|
||||
"define-data-property": "^1.1.4",
|
||||
"es-errors": "^1.3.0",
|
||||
"functions-have-names": "^1.2.3",
|
||||
"has-property-descriptors": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
@ -2830,6 +3341,25 @@
|
||||
"eslint": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-i18n": {
|
||||
"version": "11.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-11.1.1.tgz",
|
||||
"integrity": "sha512-0P6DkKy96R4Wh2sIZJEHw8ivnlD1pnB6Ib/eldoF1SUpQutfKZv6aMqZwICS1gW0rwq24ZSXw7y3jW+PRVYqWA==",
|
||||
"dependencies": {
|
||||
"@intlify/core-base": "11.1.1",
|
||||
"@intlify/shared": "11.1.1",
|
||||
"@vue/devtools-api": "^6.5.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/kazupon"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vuedraggable": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
|
||||
|
||||
@ -12,9 +12,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"@vueup/vue-quill": "^1.2.0",
|
||||
"element-plus": "^2.9.1",
|
||||
"html2canvas": "^1.4.1",
|
||||
"vue": "^3.3.10",
|
||||
"vue-i18n": "^11.1.1",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
13
src/App.vue
13
src/App.vue
@ -1,9 +1,22 @@
|
||||
<script setup>
|
||||
import Yys from './components/Yys.vue'
|
||||
import Watermark from './components/Watermark.vue' // 引入 Watermark 组件
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main id="main-container">
|
||||
<Yys />
|
||||
<Watermark text="示例水印" font="30px Arial" color="rgba(184, 184, 184, 0.3)" angle=-20 /> <!-- 添加 Watermark 组件 -->
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 确保 #main-container 具有相对定位 */
|
||||
#main-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh; /* 视口高度 */
|
||||
}
|
||||
|
||||
/* 如果 Yys 组件需要特定的高度或布局，可以根据需要调整 */
|
||||
</style>
|
||||
@ -46,12 +46,20 @@
|
||||
<!-- <el-input v-model="shikigami.speed"/>-->
|
||||
</el-form-item>
|
||||
<el-form-item label="御魂套装">
|
||||
<img style="width: 50px;height: 50px" v-if="this.shikigami.yuhun.yuhunSetEffect.length>0"
|
||||
:src="this.shikigami.yuhun.yuhunSetEffect[0].avatar" class="image"/>
|
||||
<img style="width: 50px;height: 50px" v-if="this.shikigami.yuhun.yuhunSetEffect.length>1"
|
||||
:src="this.shikigami.yuhun.yuhunSetEffect[1].avatar" class="image"/>
|
||||
<img
|
||||
v-for="(effect, index) in shikigami.yuhun.yuhunSetEffect"
|
||||
:key="index"
|
||||
style="width: 50px; height: 50px;"
|
||||
:src="effect.avatar"
|
||||
class="image"
|
||||
@click="openYuhunSelect(index)"
|
||||
/>
|
||||
<!-- <img style="width: 50px;height: 50px" v-if="shikigami.yuhun.yuhunSetEffect.length>0"-->
|
||||
<!-- :src="shikigami.yuhun.yuhunSetEffect[0].avatar" class="image"/>-->
|
||||
<!-- <img style="width: 50px;height: 50px" v-if="shikigami.yuhun.yuhunSetEffect.length>1"-->
|
||||
<!-- :src="shikigami.yuhun.yuhunSetEffect[1].avatar" class="image"/>-->
|
||||
|
||||
<el-button type="primary" @click="editShikigami()">
|
||||
<el-button type="primary" @click="openYuhunSelect(-1)">
|
||||
<el-icon :size="20">
|
||||
<CirclePlus/>
|
||||
</el-icon>
|
||||
@ -60,7 +68,7 @@
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="效果指标">
|
||||
<el-select placeholder="伤害输出" v-model="shikigami.yuhun.target">
|
||||
<el-select placeholder="1" v-model="shikigami.yuhun.target">
|
||||
<el-option label="伤害输出" value="1"/>
|
||||
<el-option label="效果命中" value="2"/>
|
||||
<el-option label="效果抵抗" value="3"/>
|
||||
@ -125,189 +133,187 @@
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import propertyData from "../data/property.json";
|
||||
import {ref} from "vue";
|
||||
import {ref, watch, computed} from 'vue'
|
||||
import ShikigamiSelect from "@/components/ShikigamiSelect.vue";
|
||||
import YuhunSelect from "@/components/YuhunSelect.vue";
|
||||
// import YuhunSelect from "./YuhunSelect.vue";
|
||||
|
||||
export default {
|
||||
components: {YuhunSelect, ShikigamiSelect},
|
||||
props: {
|
||||
currentShikigami: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
showProperty: {
|
||||
type: Boolean,
|
||||
},
|
||||
const props = defineProps({
|
||||
currentShikigami: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
showProperty: {
|
||||
type: Boolean,
|
||||
},
|
||||
});
|
||||
|
||||
data() {
|
||||
return {
|
||||
showYuhunSelect: false,
|
||||
propertyData: propertyData,
|
||||
shikigami: {
|
||||
edit: false,
|
||||
yuhun: {
|
||||
yuhunSetEffect: [],
|
||||
target: "伤害输出",
|
||||
property2: ["Attack"],
|
||||
property4: ["Attack"],
|
||||
property6: ["Crit", "CritDamage"],
|
||||
},
|
||||
levelRequired: "40",
|
||||
speed: "",
|
||||
skillRequiredMode: "all",
|
||||
skillRequired: ["技能一", "技能二", "技能三"]
|
||||
},
|
||||
current: {},
|
||||
show: false,
|
||||
};
|
||||
const emit = defineEmits(['closeProperty', 'updateProperty'])
|
||||
|
||||
let showYuhunSelect = ref(false)
|
||||
let shikigami = ref({
|
||||
edit: false,
|
||||
yuhun: {
|
||||
yuhunSetEffect: [],
|
||||
target: "伤害输出",
|
||||
property2: ["Attack"],
|
||||
property4: ["Attack"],
|
||||
property6: ["Crit", "CritDamage"],
|
||||
},
|
||||
watch: {
|
||||
showProperty(newVal, oldVal) {
|
||||
// this.shikigami = this.currentShikigami;
|
||||
console.log("currentShikigami", JSON.stringify(this.currentShikigami));
|
||||
this.show = newVal;
|
||||
},
|
||||
currentShikigami(newVal, oldVal) {
|
||||
if (newVal.properties != undefined && newVal.properties.edit == true) {
|
||||
this.shikigami = newVal.properties;
|
||||
}
|
||||
this.current = newVal;
|
||||
},
|
||||
'shikigami.yuhun.target': {
|
||||
handler(newVal, oldVal) {
|
||||
switch (newVal) {
|
||||
//<el-option label="伤害输出" value="1"/>
|
||||
case "1": {
|
||||
this.shikigami.yuhun.property2 = ["Attack"];
|
||||
this.shikigami.yuhun.property4 = ["Attack"];
|
||||
this.shikigami.yuhun.property6 = ["Crit", "CritDamage"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="效果命中" value="2"/>
|
||||
case "2": {
|
||||
this.shikigami.yuhun.property2 = ["Speed"];
|
||||
this.shikigami.yuhun.property4 = ["ControlHit"];
|
||||
this.shikigami.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="效果抵抗" value="3"/>
|
||||
case "3": {
|
||||
this.shikigami.yuhun.property2 = ["Speed"];
|
||||
this.shikigami.yuhun.property4 = ["ControlMiss"];
|
||||
this.shikigami.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="生命" value="4"/>
|
||||
case "4": {
|
||||
this.shikigami.yuhun.property2 = ["Health"];
|
||||
this.shikigami.yuhun.property4 = ["Health"];
|
||||
this.shikigami.yuhun.property6 = ["Health"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="攻击" value="5"/>
|
||||
case "5": {
|
||||
this.shikigami.yuhun.property2 = ["Attack"];
|
||||
this.shikigami.yuhun.property4 = ["Attack"];
|
||||
this.shikigami.yuhun.property6 = ["Attack"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="防御" value="6"/>
|
||||
case "6": {
|
||||
this.shikigami.yuhun.property2 = ["Defense"];
|
||||
this.shikigami.yuhun.property4 = ["Defense"];
|
||||
this.shikigami.yuhun.property6 = ["Defense"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="速度" value="7"/>
|
||||
case "7": {
|
||||
this.shikigami.yuhun.property2 = ["Speed"];
|
||||
this.shikigami.yuhun.property4 = ["Attack", "Defense", "Health", "ControlHit", "ControlMiss"];
|
||||
this.shikigami.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="暴击" value="8"/>
|
||||
case "8": {
|
||||
this.shikigami.yuhun.property2 = ["Attack", "Defense", "Health", "Speed"];
|
||||
this.shikigami.yuhun.property4 = ["Attack", "Defense", "Health", "ControlHit", "ControlMiss"];
|
||||
this.shikigami.yuhun.property6 = ["Crit"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="暴击伤害" value="9"/>
|
||||
case "9": {
|
||||
this.shikigami.yuhun.property2 = ["Attack", "Defense", "Health", "Speed"];
|
||||
this.shikigami.yuhun.property4 = ["Attack", "Defense", "Health", "ControlHit", "ControlMiss"];
|
||||
this.shikigami.yuhun.property6 = ["CritDamage"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="治疗量" value="10"/>
|
||||
case "10": {
|
||||
this.shikigami.yuhun.property2 = ["Speed"];
|
||||
this.shikigami.yuhun.property4 = ["Health"];
|
||||
this.shikigami.yuhun.property6 = ["Crit","CritDamage"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="命抗双修" value="11"/>
|
||||
case "11": {
|
||||
this.shikigami.yuhun.property2 = ["Speed"];
|
||||
this.shikigami.yuhun.property4 = ["ControlHit", "ControlMiss"];
|
||||
this.shikigami.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="防御输出" value="12"/>
|
||||
case "12": {
|
||||
this.shikigami.yuhun.property2 = ["Defense"];
|
||||
this.shikigami.yuhun.property4 = ["Defense"];
|
||||
this.shikigami.yuhun.property6 = ["Crit", "CritDamage"];
|
||||
break;
|
||||
}
|
||||
levelRequired: "40",
|
||||
speed: "",
|
||||
skillRequiredMode: "all",
|
||||
skillRequired: ["技能一", "技能二", "技能三"]
|
||||
})
|
||||
let yuhunIndex = ref(-1)
|
||||
let current = ref({})
|
||||
let show = ref(props.showProperty)
|
||||
|
||||
watch(() => props.currentShikigami, (newVal) => {
|
||||
if (newVal.properties != undefined && newVal.properties.edit == true) {
|
||||
shikigami.value = newVal.properties
|
||||
}
|
||||
current.value = newVal
|
||||
}, {deep: true})
|
||||
|
||||
watch(() => props.showProperty, (newVal) => {
|
||||
show.value = newVal;
|
||||
})
|
||||
|
||||
watch(() => shikigami.value.yuhun.target, (newVal) => {
|
||||
switch (newVal) {
|
||||
//<el-option label="伤害输出" value="1"/>
|
||||
case "1": {
|
||||
shikigami.value.yuhun.property2 = ["Attack"];
|
||||
shikigami.value.yuhun.property4 = ["Attack"];
|
||||
shikigami.value.yuhun.property6 = ["Crit", "CritDamage"];
|
||||
break;
|
||||
}
|
||||
},
|
||||
deep: true //为true，表示深度监听，这时候就能监测到a值变化
|
||||
/**
|
||||
* <el-option label="治疗量" value="10"/>
|
||||
* <el-option label="命抗双修" value="11"/>
|
||||
* <el-option label="防御输出" value="12"/>
|
||||
*/
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
editShikigami() {
|
||||
// this.currentShikigami = item;
|
||||
this.showYuhunSelect = true;
|
||||
// this.index = index;
|
||||
},
|
||||
closeYuhunSelect() {
|
||||
// this.currentShikigami = item;
|
||||
this.showYuhunSelect = false;
|
||||
// this.index = index;
|
||||
},
|
||||
updateYuhunSelect(yuhun) {
|
||||
this.showYuhunSelect = false;
|
||||
let length = this.shikigami.yuhun.yuhunSetEffect.length;
|
||||
this.shikigami.yuhun.yuhunSetEffect.push(JSON.parse(JSON.stringify(yuhun)))
|
||||
//<el-option label="效果命中" value="2"/>
|
||||
case "2": {
|
||||
shikigami.value.yuhun.property2 = ["Speed"];
|
||||
shikigami.value.yuhun.property4 = ["ControlHit"];
|
||||
shikigami.value.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="效果抵抗" value="3"/>
|
||||
case "3": {
|
||||
shikigami.value.yuhun.property2 = ["Speed"];
|
||||
shikigami.value.yuhun.property4 = ["ControlMiss"];
|
||||
shikigami.value.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="生命" value="4"/>
|
||||
case "4": {
|
||||
shikigami.value.yuhun.property2 = ["Health"];
|
||||
shikigami.value.yuhun.property4 = ["Health"];
|
||||
shikigami.value.yuhun.property6 = ["Health"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="攻击" value="5"/>
|
||||
case "5": {
|
||||
shikigami.value.yuhun.property2 = ["Attack"];
|
||||
shikigami.value.yuhun.property4 = ["Attack"];
|
||||
shikigami.value.yuhun.property6 = ["Attack"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="防御" value="6"/>
|
||||
case "6": {
|
||||
shikigami.value.yuhun.property2 = ["Defense"];
|
||||
shikigami.value.yuhun.property4 = ["Defense"];
|
||||
shikigami.value.yuhun.property6 = ["Defense"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="速度" value="7"/>
|
||||
case "7": {
|
||||
shikigami.value.yuhun.property2 = ["Speed"];
|
||||
shikigami.value.yuhun.property4 = ["Attack", "Defense", "Health", "ControlHit", "ControlMiss"];
|
||||
shikigami.value.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="暴击" value="8"/>
|
||||
case "8": {
|
||||
shikigami.value.yuhun.property2 = ["Attack", "Defense", "Health", "Speed"];
|
||||
shikigami.value.yuhun.property4 = ["Attack", "Defense", "Health", "ControlHit", "ControlMiss"];
|
||||
shikigami.value.yuhun.property6 = ["Crit"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="暴击伤害" value="9"/>
|
||||
case "9": {
|
||||
shikigami.value.yuhun.property2 = ["Attack", "Defense", "Health", "Speed"];
|
||||
shikigami.value.yuhun.property4 = ["Attack", "Defense", "Health", "ControlHit", "ControlMiss"];
|
||||
shikigami.value.yuhun.property6 = ["CritDamage"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="治疗量" value="10"/>
|
||||
case "10": {
|
||||
shikigami.value.yuhun.property2 = ["Speed"];
|
||||
shikigami.value.yuhun.property4 = ["Health"];
|
||||
shikigami.value.yuhun.property6 = ["Crit", "CritDamage"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="命抗双修" value="11"/>
|
||||
case "11": {
|
||||
shikigami.value.yuhun.property2 = ["Speed"];
|
||||
shikigami.value.yuhun.property4 = ["ControlHit", "ControlMiss"];
|
||||
shikigami.value.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
|
||||
break;
|
||||
}
|
||||
//<el-option label="防御输出" value="12"/>
|
||||
case "12": {
|
||||
shikigami.value.yuhun.property2 = ["Defense"];
|
||||
shikigami.value.yuhun.property4 = ["Defense"];
|
||||
shikigami.value.yuhun.property6 = ["Crit", "CritDamage"];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, {deep: true}
|
||||
)
|
||||
|
||||
},
|
||||
cancel() {
|
||||
this.$emit("closeProperty");
|
||||
Object.assign(this.$data, this.$options.data())
|
||||
},
|
||||
confirm() {
|
||||
// if (null == this.shikigami[this.index].properties) {
|
||||
this.shikigami.edit = true
|
||||
this.$emit("updateProperty", JSON.parse(JSON.stringify(this.shikigami)));
|
||||
Object.assign(this.$data, this.$options.data())
|
||||
|
||||
// }
|
||||
},
|
||||
updateSkillRequired(index, value) {
|
||||
this.shikigami.skillRequired[index] = value;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
const openYuhunSelect = (index) => {
|
||||
yuhunIndex.value = index
|
||||
showYuhunSelect.value = true
|
||||
}
|
||||
|
||||
const closeYuhunSelect = () => showYuhunSelect.value = false
|
||||
|
||||
|
||||
const updateYuhunSelect = (yuhun) => {
|
||||
showYuhunSelect.value = false
|
||||
if(yuhunIndex.value >=0)
|
||||
shikigami.value.yuhun.yuhunSetEffect[yuhunIndex.value] = (JSON.parse(JSON.stringify(yuhun)))
|
||||
else
|
||||
shikigami.value.yuhun.yuhunSetEffect.push(JSON.parse(JSON.stringify(yuhun)))
|
||||
}
|
||||
|
||||
const cancel = () => {
|
||||
emit('closeProperty')
|
||||
resetData()
|
||||
}
|
||||
|
||||
const confirm = () => {
|
||||
shikigami.value.edit = true
|
||||
emit('updateProperty', JSON.parse(JSON.stringify(shikigami.value)))
|
||||
resetData()
|
||||
}
|
||||
|
||||
const resetData = () => {
|
||||
shikigami.value = {
|
||||
edit: false,
|
||||
yuhun: {
|
||||
yuhunSetEffect: [],
|
||||
target: "伤害输出",
|
||||
property2: ["Attack"],
|
||||
property4: ["Attack"],
|
||||
property6: ["Crit", "CritDamage"],
|
||||
},
|
||||
levelRequired: "40",
|
||||
speed: "",
|
||||
skillRequiredMode: "all",
|
||||
skillRequired: ["技能一", "技能二", "技能三"]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
93
src/components/Watermark.vue
Normal file
93
src/components/Watermark.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div ref="watermarkContainer" class="watermark-container"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
text: {
|
||||
type: String,
|
||||
default: '默认水印'
|
||||
},
|
||||
font: {
|
||||
type: String,
|
||||
default: '20px Arial'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'rgba(184, 184, 184, 0.3)' // 半透明灰色
|
||||
},
|
||||
angle: {
|
||||
type: Number,
|
||||
default: -20 // 水印倾斜角度
|
||||
}
|
||||
});
|
||||
|
||||
const watermarkContainer = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
createWatermark();
|
||||
});
|
||||
|
||||
const createWatermark = () => {
|
||||
const container = watermarkContainer.value;
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// 设置画布大小
|
||||
canvas.width = 200;
|
||||
canvas.height = 100;
|
||||
|
||||
// 设置字体和颜色
|
||||
ctx.font = props.font;
|
||||
ctx.fillStyle = props.color;
|
||||
|
||||
// 计算文本宽度
|
||||
const metrics = ctx.measureText(props.text);
|
||||
const textWidth = metrics.width;
|
||||
|
||||
// 填充背景色为透明
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 旋转画布
|
||||
ctx.save();
|
||||
ctx.translate(canvas.width / 2, canvas.height / 2);
|
||||
ctx.rotate((props.angle * Math.PI) / 180);
|
||||
ctx.translate(-canvas.width / 2, -canvas.height / 2);
|
||||
|
||||
// 绘制水印文本
|
||||
ctx.fillText(props.text, (canvas.width - textWidth) / 2, canvas.height / 2);
|
||||
|
||||
// 恢复画布状态
|
||||
ctx.restore();
|
||||
|
||||
// 将 canvas 转换为 base64 图像
|
||||
const watermarkUrl = canvas.toDataURL('image/png');
|
||||
|
||||
// 创建一个 div 并设置背景图
|
||||
const watermarkDiv = document.createElement('div');
|
||||
watermarkDiv.style.position = 'absolute';
|
||||
watermarkDiv.style.top = '0';
|
||||
watermarkDiv.style.left = '0';
|
||||
watermarkDiv.style.width = '100%';
|
||||
watermarkDiv.style.height = '100%';
|
||||
watermarkDiv.style.backgroundImage = `url(${watermarkUrl})`;
|
||||
watermarkDiv.style.backgroundRepeat = 'repeat';
|
||||
watermarkDiv.style.pointerEvents = 'none'; // 确保水印不会干扰用户交互
|
||||
|
||||
// 将水印 div 添加到容器中
|
||||
container.appendChild(watermarkDiv);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.watermark-container {
|
||||
position: absolute; /* 使用绝对定位 */
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none; /* 确保水印不会干扰用户交互 */
|
||||
}
|
||||
</style>
|
||||
@ -1,140 +1,75 @@
|
||||
<template>
|
||||
<el-dialog v-model="show" :visable.sync="show" title="请选择式神" @cancel="cancel" :before-close="cancel">
|
||||
<span>当前选择：{{current.name}}</span>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(yuhunType, index) in yuhunTypes"
|
||||
:key="index"
|
||||
:label="yuhunType.label"
|
||||
:name="yuhunType.name"
|
||||
>
|
||||
<div v-if="yuhunTypes.includes(yuhunType)"> <!-- 只在这些级别中显示内容 -->
|
||||
<el-space wrap size="large">
|
||||
<div v-for="i in filterShikigamiByRarity(yuhunType.name)" :key="i.name">
|
||||
<el-button style="width: 100px; height: 100px;" @click.stop="confirm(i)">
|
||||
<img :src="i.avatar" style="width: 99px; height: 99px;">
|
||||
</el-button>
|
||||
</div>
|
||||
</el-space>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="show" :title="t('yuhunSelect')" @close="cancel">
|
||||
<span>当前选择：{{ current.name }}</span>
|
||||
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleTabClick">
|
||||
<el-tab-pane v-for="type in yuhunTypes" :key="type.name" :label="type.label" :name="type.name">
|
||||
<el-space wrap size="large">
|
||||
<div v-for="shikigami in filterShikigamiByType(activeName)" :key="shikigami.name">
|
||||
<el-button style="width: 100px; height: 100px;" @click="confirm(shikigami)">
|
||||
<img :src="shikigami.avatar" style="width: 99px; height: 99px;">
|
||||
</el-button>
|
||||
</div>
|
||||
</el-space>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<!-- <template #footer>-->
|
||||
<!-- <span class="dialog-footer">-->
|
||||
<!-- <el-button @click.stop="cancel">Cancel</el-button>-->
|
||||
<!-- <el-button type="primary" @click.stop="confirm"> Confirm </el-button>-->
|
||||
<!-- </span>-->
|
||||
<!-- </template>-->
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import shikigamiData from "../data/Shikigami.json";
|
||||
import yuhunData from "../data/Yuhun.json";
|
||||
import { ref } from "vue";
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
<script setup>
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import shikigamiData from '../data/Shikigami.json';
|
||||
import yuhunData from '../data/Yuhun.json';
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
// 获取当前的 i18n 实例
|
||||
const { t } = useI18n()
|
||||
|
||||
const activeName = ref('ALL')
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
currentShikigami: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
showYuhunSelect: {
|
||||
type: Boolean,
|
||||
},
|
||||
const props = defineProps({
|
||||
currentShikigami: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
showYuhunSelect: Boolean
|
||||
});
|
||||
|
||||
data() {
|
||||
return {
|
||||
activeName:activeName,
|
||||
yuhunData: yuhunData,
|
||||
selected: null,
|
||||
current: {},
|
||||
show: false,
|
||||
yuhunTypes: [
|
||||
{
|
||||
"label":"全部",
|
||||
"name":"ALL"
|
||||
},
|
||||
{
|
||||
"label":"攻击加成",
|
||||
"name":"Attack"
|
||||
},
|
||||
{
|
||||
"label":"暴击",
|
||||
"name":"Crit"
|
||||
},
|
||||
{
|
||||
"label":"生命加成",
|
||||
"name":"Health"
|
||||
},
|
||||
{
|
||||
"label":"防御加成",
|
||||
"name":"Defense"
|
||||
},
|
||||
{
|
||||
"label":"效果命中",
|
||||
"name":"ControlHit"
|
||||
},
|
||||
{
|
||||
"label":"效果抵抗",
|
||||
"name":"ControlMiss"
|
||||
},
|
||||
{
|
||||
"label":"首领御魂",
|
||||
"name":"PVE"
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showYuhunSelect(newVal, oldVal) {
|
||||
console.log("=======aaaaaaa>>>> ", newVal, oldVal);
|
||||
this.show = newVal;
|
||||
},
|
||||
currentShikigami(newVal, oldVal) {
|
||||
console.log("===item====>>>> ", newVal, oldVal);
|
||||
this.current = newVal;
|
||||
},
|
||||
const emit = defineEmits(['updateYuhunSelect', 'closeYuhunSelect']);
|
||||
|
||||
},
|
||||
methods: {
|
||||
select(item) {
|
||||
this.current = item;
|
||||
},
|
||||
cancel() {
|
||||
console.log("cancel====");
|
||||
this.$emit("closeYuhunSelect");
|
||||
},
|
||||
confirm(i) {
|
||||
console.log("confirm====");
|
||||
this.$emit("updateYuhunSelect", JSON.parse(JSON.stringify(i)))
|
||||
// this.current = {};
|
||||
},
|
||||
filterShikigamiByRarity(yuhunType) {
|
||||
if(yuhunType.toLowerCase() == "all")
|
||||
return this.yuhunData
|
||||
// 将传入的rarity参数转换为小写
|
||||
const lowerCaseYuhunType = yuhunType.toLowerCase();
|
||||
return this.yuhunData.filter(yuhun =>
|
||||
// 将shikigami对象的rarity属性也转换为小写进行比较
|
||||
yuhun.type.toLowerCase() === lowerCaseYuhunType
|
||||
);
|
||||
},
|
||||
},
|
||||
const show = ref(false);
|
||||
const activeName = ref('ALL');
|
||||
const current = ref(props.currentShikigami);
|
||||
const yuhunTypes = [
|
||||
{ label: '全部', name: 'ALL' },
|
||||
{ label: '攻击加成', name: 'Attack' },
|
||||
{ label: '暴击', name: 'Crit' },
|
||||
{ label: '生命加成', name: 'Health' },
|
||||
{ label: '防御加成', name: 'Defense' },
|
||||
{ label: '效果命中', name: 'ControlHit' },
|
||||
{ label: '效果抵抗', name: 'ControlMiss' },
|
||||
{ label: '首领御魂', name: 'PVE' }
|
||||
];
|
||||
|
||||
watch(() => props.showYuhunSelect, (newVal) => {
|
||||
show.value = newVal;
|
||||
});
|
||||
|
||||
watch(() => props.currentShikigami, (newVal) => {
|
||||
current.value = newVal;
|
||||
});
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
console.log(tab.paneName);
|
||||
};
|
||||
</script>
|
||||
|
||||
const filterShikigamiByType = (type) => {
|
||||
if (type.toLowerCase() === 'all') return yuhunData;
|
||||
return yuhunData.filter(yuhun => yuhun.type.toLowerCase() === type.toLowerCase());
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
emit('closeYuhunSelect');
|
||||
};
|
||||
|
||||
const confirm = (item) => {
|
||||
emit('updateYuhunSelect', JSON.parse(JSON.stringify(item)));
|
||||
};
|
||||
</script>
|
||||
@ -12,14 +12,15 @@
|
||||
@closeProperty="closeProperty"
|
||||
@updateProperty="updateProperty"
|
||||
/>
|
||||
|
||||
<draggable :list="state.groups" item-key="group" style="display: flex; flex-direction: column; width: 100%;"
|
||||
handle=".drag-handle">
|
||||
|
||||
<template #item="{ element: group, index: groupIndex }">
|
||||
|
||||
<template #item="{ element: group, index: groupIndex }">
|
||||
<el-row :span="24">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: flex-end;">
|
||||
<div style="display: flex; justify-content: flex-end;" data-html2canvas-ignore="true">
|
||||
<el-button class="drag-handle" type="primary" icon="Rank" circle></el-button>
|
||||
<el-button type="danger" icon="Delete" circle @click="removeGroup(groupIndex)"></el-button>
|
||||
<el-button type="primary" icon="Plus" circle @click="addGroup"></el-button>
|
||||
@ -33,15 +34,14 @@
|
||||
|
||||
|
||||
<!-- Add delete button here -->
|
||||
<el-button type="danger" icon="Delete" circle
|
||||
@click="removeGroupElement(groupIndex, positionIndex)"></el-button>
|
||||
<el-button type="primary" icon="Plus" circle @click="addGroupElement(groupIndex)"></el-button>
|
||||
<el-button type="danger" icon="Delete" circle @click="removeGroupElement(groupIndex, positionIndex)" data-html2canvas-ignore="true"></el-button>
|
||||
<el-button type="primary" icon="Plus" circle @click="addGroupElement(groupIndex)" data-html2canvas-ignore="true"></el-button>
|
||||
<img :src="position.avatar || '/assets/Shikigami/default.png'" class="image"
|
||||
@click="editShikigami(groupIndex,positionIndex)"/>
|
||||
<div style="padding: 14px; width: 95px">
|
||||
|
||||
<span>{{ position.name || "" }}</span>
|
||||
<div class="bottom">
|
||||
<div class="bottom" data-html2canvas-ignore="true">
|
||||
<el-button @click="editProperties(groupIndex,positionIndex)">配置属性</el-button>
|
||||
</div>
|
||||
<!-- properties-->
|
||||
@ -52,7 +52,7 @@
|
||||
{{ position.properties.yuhun.yuhunSetEffect.map(item => item.name).join(' ') }}
|
||||
</span>
|
||||
<span style="display: inline-block; width: 100px; height: 25px; background-color: #666; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin-right: 5px; color: white; text-align: center; white-space: pre-wrap ">
|
||||
{{ position.properties.yuhun.target}}·
|
||||
{{ t('yuhun_target.' + position.properties.yuhun.target)}}·
|
||||
</span>
|
||||
</div>
|
||||
<div v-for="(value, key, index) in position.properties">
|
||||
@ -67,6 +67,10 @@
|
||||
</draggable>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<QuillEditor v-model:content="content" contentType="html" theme="snow" :toolbar="toolbarOptions"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
@ -78,15 +82,17 @@
|
||||
<div style="margin: 20px">
|
||||
|
||||
<!-- 现有的代码 -->
|
||||
<div style="margin: 20px">
|
||||
<span>配置结果</span>
|
||||
<div style="margin: 20px" data-html2canvas-ignore="true">
|
||||
<!-- 触发截图的按钮 -->
|
||||
<button @click="prepareCapture">生成截图</button>
|
||||
</div>
|
||||
|
||||
<!-- 预览弹窗 -->
|
||||
<el-dialog id="preview-container" v-model="state.previewVisible" width="50%" :before-close="handleClose">
|
||||
<img v-if="state.previewImage" :src="state.previewImage" alt="Preview" style="width: 100%; height: auto;" />
|
||||
<el-dialog id="preview-container" v-model="state.previewVisible" width="80%" :before-close="handleClose">
|
||||
<div style="max-height: 500px; overflow-y: auto;">
|
||||
<img v-if="state.previewImage" :src="state.previewImage" alt="Preview" style="width: 100%; display: block;" />
|
||||
</div>
|
||||
<!-- <img v-if="state.previewImage" :src="state.previewImage" alt="Preview" style="width: 100%; height: auto;" />-->
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="state.previewVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="downloadImage">下 载</el-button>
|
||||
@ -102,8 +108,12 @@ import draggable from 'vuedraggable';
|
||||
import ShikigamiSelect from './ShikigamiSelect.vue';
|
||||
import ShikigamiProperty from './ShikigamiProperty.vue';
|
||||
import html2canvas from 'html2canvas';
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { QuillEditor } from '@vueup/vue-quill'
|
||||
import '@vueup/vue-quill/dist/vue-quill.snow.css' // 引入样式文件
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import shikigamiData from '../data/Shikigami.json';
|
||||
|
||||
const dialogTableVisible = ref(false)
|
||||
// 定义响应式数据
|
||||
const state = reactive({
|
||||
@ -120,6 +130,33 @@ const state = reactive({
|
||||
previewVisible: false, // 控制预览弹窗的显示状态
|
||||
});
|
||||
|
||||
|
||||
// 获取当前的 i18n 实例
|
||||
const { t } = useI18n()
|
||||
// 初始化内容
|
||||
const content = ref('<p>初始内容</p>')
|
||||
const content1 = ref('<p>初始内容1</p>')
|
||||
|
||||
// 定义工具栏选项
|
||||
const toolbarOptions = [
|
||||
|
||||
[{ 'color': [] }, { 'background': [] }],
|
||||
['bold', 'italic', 'underline', 'strike'],
|
||||
['blockquote', 'code-block'],
|
||||
['link', 'image', 'video', 'formula'],
|
||||
[{ 'header': 1 }, { 'header': 2 }],
|
||||
[{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
|
||||
[{ 'script': 'sub'}, { 'script': 'super' }],
|
||||
[{ 'indent': '-1'}, { 'indent': '+1' }],
|
||||
[{ 'direction': 'rtl' }],
|
||||
[{ 'size': ['small', false, 'large', 'huge'] }],
|
||||
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ 'color': [] }, { 'background': [] }],
|
||||
[{ 'font': [] }],
|
||||
[{ 'align': [] }],
|
||||
['clean']
|
||||
];
|
||||
|
||||
// 定义方法
|
||||
const closeSelectShikigami = () => {
|
||||
console.log("close select ====");
|
||||
@ -178,6 +215,10 @@ const addGroupElement = (groupIndex) => {
|
||||
state.groups[groupIndex].push({});
|
||||
};
|
||||
|
||||
const ignoreElements = (element) => {
|
||||
return element.classList.contains('ql-toolbar');
|
||||
}
|
||||
|
||||
const prepareCapture = async () => {
|
||||
state.previewVisible = true; // 显示预览弹窗
|
||||
|
||||
@ -190,7 +231,11 @@ const prepareCapture = async () => {
|
||||
return;
|
||||
}
|
||||
|
||||
const canvas = await html2canvas(element);
|
||||
const canvas = await html2canvas(element,{
|
||||
ignoreElements:ignoreElements,
|
||||
height:element.scrollHeight
|
||||
}
|
||||
);
|
||||
state.previewImage = canvas.toDataURL();
|
||||
if (!state.previewImage) {
|
||||
console.error('Failed to generate image data URL.');
|
||||
@ -226,4 +271,8 @@ const handleClose = (done) => {
|
||||
.position-drag-handle {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.ql-toolbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
1
src/locales/ja.json
Normal file
1
src/locales/ja.json
Normal file
@ -0,0 +1 @@
|
||||
{}
|
||||
17
src/locales/zh.json
Normal file
17
src/locales/zh.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"yuhun_target": {
|
||||
"1": "伤害",
|
||||
"2": "命中",
|
||||
"3": "抵抗",
|
||||
"4": "生命",
|
||||
"5": "攻击",
|
||||
"6": "防御",
|
||||
"7": "速度",
|
||||
"8": "暴击",
|
||||
"9": "爆伤",
|
||||
"10": "治疗量",
|
||||
"11": "命抗",
|
||||
"12": "防御输出"
|
||||
},
|
||||
"yuhunSelect": "请选择御魂"
|
||||
}
|
||||
29
src/main.js
29
src/main.js
@ -6,12 +6,41 @@ import 'element-plus/dist/index.css'
|
||||
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
|
||||
import { createI18n } from 'vue-i18n'
|
||||
|
||||
// 引入语言文件
|
||||
import zh from './locales/zh.json'
|
||||
import ja from './locales/ja.json'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
|
||||
// 获取用户的首选语言
|
||||
const userLanguage = navigator.language
|
||||
|
||||
// 定义支持的语言列表
|
||||
const supportedLanguages = ['zh', 'ja']
|
||||
|
||||
// 根据用户的首选语言选择合适的语言
|
||||
let locale = 'zh' // 默认语言为中文
|
||||
if (supportedLanguages.includes(userLanguage.split('-')[0])) {
|
||||
locale = userLanguage.split('-')[0]
|
||||
}
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: locale, // 设置默认语言
|
||||
fallbackLocale: 'zh', // 设置备用语言
|
||||
messages: {
|
||||
zh,
|
||||
ja,
|
||||
},
|
||||
})
|
||||
|
||||
app.use(i18n)
|
||||
app.use(ElementPlus)
|
||||
app.mount('#app')
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user