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

package-lock.json

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

package.json

@@ -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": {

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>

src/components/ShikigamiProperty.vue

@@ -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"
+            <img
-                 :src="this.shikigami.yuhun.yuhunSetEffect[0].avatar" class="image"/>
+                v-for="(effect, index) in shikigami.yuhun.yuhunSetEffect"
-            <img style="width: 50px;height: 50px" v-if="this.shikigami.yuhun.yuhunSetEffect.length>1"
+                :key="index"
-                 :src="this.shikigami.yuhun.yuhunSetEffect[1].avatar" class="image"/>
+                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 {
+const props = defineProps({
-  components: {YuhunSelect, ShikigamiSelect},
+  currentShikigami: {
-  props: {
+    type: Object,
-    currentShikigami: {
+    default: {},
-      type: Object,
-      default: {},
-    },
-    showProperty: {
-      type: Boolean,
-    },
   },
+  showProperty: {
+    type: Boolean,
+  },
+});
 
-  data() {
+const emit = defineEmits(['closeProperty', 'updateProperty'])
-    return {
+
-      showYuhunSelect: false,
+let showYuhunSelect = ref(false)
-      propertyData: propertyData,
+let shikigami = ref({
-      shikigami: {
+  edit: false,
-        edit: false,
+  yuhun: {
-        yuhun: {
+    yuhunSetEffect: [],
-          yuhunSetEffect: [],
+    target: "伤害输出",
-          target: "伤害输出",
+    property2: ["Attack"],
-          property2: ["Attack"],
+    property4: ["Attack"],
-          property4: ["Attack"],
+    property6: ["Crit", "CritDamage"],
-          property6: ["Crit", "CritDamage"],
-        },
-        levelRequired: "40",
-        speed: "",
-        skillRequiredMode: "all",
-        skillRequired: ["技能一", "技能二", "技能三"]
-      },
-      current: {},
-      show: false,
-    };
   },
-  watch: {
+  levelRequired: "40",
-    showProperty(newVal, oldVal) {
+  speed: "",
-      // this.shikigami = this.currentShikigami;
+  skillRequiredMode: "all",
-          console.log("currentShikigami", JSON.stringify(this.currentShikigami));
+  skillRequired: ["技能一", "技能二", "技能三"]
-      this.show = newVal;
+})
-    },
+let yuhunIndex = ref(-1)
-    currentShikigami(newVal, oldVal) {
+let current = ref({})
-      if (newVal.properties != undefined && newVal.properties.edit == true) {
+let show = ref(props.showProperty)
-        this.shikigami = newVal.properties;
+
-      }
+watch(() => props.currentShikigami, (newVal) => {
-      this.current = newVal;
+  if (newVal.properties != undefined && newVal.properties.edit == true) {
-    },
+    shikigami.value = newVal.properties
-    'shikigami.yuhun.target': {
+  }
-      handler(newVal, oldVal) {
+  current.value = newVal
-        switch (newVal) {
+}, {deep: true})
-            //<el-option label="伤害输出" value="1"/>
+
-          case "1": {
+watch(() => props.showProperty, (newVal) => {
-            this.shikigami.yuhun.property2 = ["Attack"];
+  show.value = newVal;
-            this.shikigami.yuhun.property4 = ["Attack"];
+})
-            this.shikigami.yuhun.property6 = ["Crit", "CritDamage"];
+
-            break;
+watch(() => shikigami.value.yuhun.target, (newVal) => {
-          }
+      switch (newVal) {
-            //<el-option label="效果命中" value="2"/>
+          //<el-option label="伤害输出" value="1"/>
-          case "2": {
+        case "1": {
-            this.shikigami.yuhun.property2 = ["Speed"];
+          shikigami.value.yuhun.property2 = ["Attack"];
-            this.shikigami.yuhun.property4 = ["ControlHit"];
+          shikigami.value.yuhun.property4 = ["Attack"];
-            this.shikigami.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
+          shikigami.value.yuhun.property6 = ["Crit", "CritDamage"];
-            break;
+          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;
-          }
         }
-      },
+          //<el-option label="效果命中" value="2"/>
-      deep: true //为true，表示深度监听，这时候就能监测到a值变化
+        case "2": {
-      /**
+          shikigami.value.yuhun.property2 = ["Speed"];
-       * <el-option label="治疗量" value="10"/>
+          shikigami.value.yuhun.property4 = ["ControlHit"];
-       * <el-option label="命抗双修" value="11"/>
+          shikigami.value.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
-       * <el-option label="防御输出" value="12"/>
+          break;
-       */
+        }
-    }
+          //<el-option label="效果抵抗" value="3"/>
-  },
+        case "3": {
-  methods: {
+          shikigami.value.yuhun.property2 = ["Speed"];
-    editShikigami() {
+          shikigami.value.yuhun.property4 = ["ControlMiss"];
-      // this.currentShikigami = item;
+          shikigami.value.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
-      this.showYuhunSelect = true;
+          break;
-      // this.index = index;
+        }
-    },
+          //<el-option label="生命" value="4"/>
-    closeYuhunSelect() {
+        case "4": {
-      // this.currentShikigami = item;
+          shikigami.value.yuhun.property2 = ["Health"];
-      this.showYuhunSelect = false;
+          shikigami.value.yuhun.property4 = ["Health"];
-      // this.index = index;
+          shikigami.value.yuhun.property6 = ["Health"];
-    },
+          break;
-    updateYuhunSelect(yuhun) {
+        }
-      this.showYuhunSelect = false;
+          //<el-option label="攻击" value="5"/>
-      let length = this.shikigami.yuhun.yuhunSetEffect.length;
+        case "5": {
-      this.shikigami.yuhun.yuhunSetEffect.push(JSON.parse(JSON.stringify(yuhun)))
+          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())
 
-      // }
+const openYuhunSelect = (index) => {
-    },
+  yuhunIndex.value = index
-    updateSkillRequired(index, value) {
+  showYuhunSelect.value = true
-      this.shikigami.skillRequired[index] = value;
+}
-    },
-  },
-};
-</script>
 
+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>

src/components/Watermark.vue

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

src/components/YuhunSelect.vue

@@ -1,140 +1,75 @@
 <template>
-  <el-dialog v-model="show" :visable.sync="show" title="请选择式神" @cancel="cancel" :before-close="cancel">
+  <el-dialog v-model="show" :title="t('yuhunSelect')" @close="cancel">
-    <span>当前选择：{{current.name}}</span>
+    <span>当前选择：{{ current.name }}</span>
-    <el-tabs
+    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleTabClick">
-        v-model="activeName"
+      <el-tab-pane v-for="type in yuhunTypes" :key="type.name" :label="type.label" :name="type.name">
-        type="card"
+        <el-space wrap size="large">
-        class="demo-tabs"
+          <div v-for="shikigami in filterShikigamiByType(activeName)" :key="shikigami.name">
-        @tab-click="handleClick"
+            <el-button style="width: 100px; height: 100px;" @click="confirm(shikigami)">
-    >
+              <img :src="shikigami.avatar" style="width: 99px; height: 99px;">
-      <el-tab-pane
+            </el-button>
-          v-for="(yuhunType, index) in yuhunTypes"
+          </div>
-          :key="index"
+        </el-space>
-          :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-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">
+<script setup>
-import shikigamiData from "../data/Shikigami.json";
+import { ref, watch, computed } from 'vue';
-import yuhunData from "../data/Yuhun.json";
+import shikigamiData from '../data/Shikigami.json';
-import { ref } from "vue";
+import yuhunData from '../data/Yuhun.json';
-import type { TabsPaneContext } from 'element-plus'
+import { useI18n } from 'vue-i18n'
 
+// 获取当前的 i18n 实例
+const { t } = useI18n()
 
-const activeName = ref('ALL')
+const props = defineProps({
-
+  currentShikigami: {
-const handleClick = (tab: TabsPaneContext, event: Event) => {
+    type: Object,
-  console.log(tab, event)
+    default: () => ({})
-}
-export default {
-  props: {
-    currentShikigami: {
-      type: Object,
-      default: {},
-    },
-    showYuhunSelect: {
-      type: Boolean,
-    },
   },
+  showYuhunSelect: Boolean
+});
 
-  data() {
+const emit = defineEmits(['updateYuhunSelect', 'closeYuhunSelect']);
-    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 show = ref(false);
-  methods: {
+const activeName = ref('ALL');
-    select(item) {
+const current = ref(props.currentShikigami);
-      this.current = item;
+const yuhunTypes = [
-    },
+  { label: '全部', name: 'ALL' },
-    cancel() {
+  { label: '攻击加成', name: 'Attack' },
-      console.log("cancel====");
+  { label: '暴击', name: 'Crit' },
-      this.$emit("closeYuhunSelect");
+  { label: '生命加成', name: 'Health' },
-    },
+  { label: '防御加成', name: 'Defense' },
-    confirm(i) {
+  { label: '效果命中', name: 'ControlHit' },
-      console.log("confirm====");
+  { label: '效果抵抗', name: 'ControlMiss' },
-      this.$emit("updateYuhunSelect", JSON.parse(JSON.stringify(i)))
+  { label: '首领御魂', name: 'PVE' }
-      // this.current = {};
+];
-    },
+
-    filterShikigamiByRarity(yuhunType) {
+watch(() => props.showYuhunSelect, (newVal) => {
-      if(yuhunType.toLowerCase() == "all")
+  show.value = newVal;
-        return this.yuhunData
+});
-      // 将传入的rarity参数转换为小写
+
-      const lowerCaseYuhunType = yuhunType.toLowerCase();
+watch(() => props.currentShikigami, (newVal) => {
-      return this.yuhunData.filter(yuhun =>
+  current.value = newVal;
-          // 将shikigami对象的rarity属性也转换为小写进行比较
+});
-          yuhun.type.toLowerCase() === lowerCaseYuhunType
+
-      );
+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>

src/components/Yys.vue

@@ -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
+                      <el-button type="danger"  icon="Delete" circle @click="removeGroupElement(groupIndex, positionIndex)" data-html2canvas-ignore="true"></el-button>
-                                 @click="removeGroupElement(groupIndex, positionIndex)"></el-button>
+                      <el-button type="primary" icon="Plus"   circle @click="addGroupElement(groupIndex)" data-html2canvas-ignore="true"></el-button>
-                      <el-button type="primary" icon="Plus" circle @click="addGroupElement(groupIndex)"></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">
+    <div style="margin: 20px" data-html2canvas-ignore="true">
-      <span>配置结果</span>
       <!-- 触发截图的按钮 -->
       <button @click="prepareCapture">生成截图</button>
     </div>
 
     <!-- 预览弹窗 -->
-    <el-dialog id="preview-container" v-model="state.previewVisible" width="50%" :before-close="handleClose">
+    <el-dialog id="preview-container" v-model="state.previewVisible" width="80%" :before-close="handleClose">
-      <img v-if="state.previewImage" :src="state.previewImage" alt="Preview" style="width: 100%; height: auto;" />
+      <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>

src/locales/ja.json

@@ -0,0 +1 @@
+{}

src/locales/zh.json

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

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