Powerful-517
/
yys-editor
mirror of https://github.com/Powerful-517/yys-editor
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

i18你，重构代码，细节优化

Browse Source
pull/4/head
rookie4show 1 month ago
parent d4b452d234
commit a935369927
10 changed files with 995 additions and 320 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 530
      package-lock.json
  2. 2
      package.json
  3. 13
      src/App.vue
  4. 366
      src/components/ShikigamiProperty.vue
  5. 93
      src/components/Watermark.vue
  6. 191
      src/components/YuhunSelect.vue
  7. 73
      src/components/Yys.vue
  8. 1
      src/locales/ja.json
  9. 17
      src/locales/zh.json
  10. 29
      src/main.js

530
package-lock.json generated
Unescape View File

@ -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",

2
package.json
Unescape View File

@ -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
Unescape View File

@ -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>

366
src/components/ShikigamiProperty.vue
Unescape View File

@ -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
Unescape View 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>

191
src/components/YuhunSelect.vue
Unescape View File

@ -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);
};
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>
</script>

73
src/components/Yys.vue
Unescape View File

@ -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
Unescape View File

@ -0,0 +1 @@
{}

17
src/locales/zh.json
Unescape View File

@ -0,0 +1,17 @@
{
"yuhun_target": {
"1": "伤害",
"2": "命中",
"3": "抵抗",
"4": "生命",
"5": "攻击",
"6": "防御",
"7": "速度",
"8": "暴击",
"9": "爆伤",
"10": "治疗量",
"11": "命抗",
"12": "防御输出"
},
"yuhunSelect": "请选择御魂"
}

29
src/main.js
Unescape View File

@ -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')

Write Preview
Loading…
Cancel
Save