update ui 包

package-lock.json

@@ -31,8 +31,8 @@
         "vuex": "^3.6.2"
       },
       "devDependencies": {
-        "@babel/core": "^7.21.0",
-        "@babel/eslint-parser": "^7.19.1",
+        "@babel/core": "^7.21.3",
+        "@babel/eslint-parser": "^7.21.3",
         "@rushstack/eslint-patch": "^1.2.0",
         "@vue/cli-plugin-babel": "~5.0.8",
         "@vue/cli-plugin-eslint": "~5.0.8",
@@ -53,10 +53,10 @@
         "postcss": "^8.4.21",
         "postcss-html": "^1.5.0",
         "prettier": "2.8.4",
-        "sass": "^1.59.2",
+        "sass": "^1.59.3",
         "sass-loader": "^10.4.1",
         "script-ext-html-webpack-plugin": "^2.1.5",
-        "stylelint": "^15.2.0",
+        "stylelint": "^15.3.0",
         "stylelint-config-recess-order": "^4.0.0",
         "stylelint-config-recommended-scss": "^9.0.1",
         "stylelint-config-recommended-vue": "^1.4.0",
@@ -126,21 +126,21 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.21.0.tgz",
-      "integrity": "sha512-PuxUbxcW6ZYe656yL3EAhpy7qXKq0DmYsrJLpbB8XrsCP9Nm+XCg9XFMb5vIDliPD7+U/+M+QJlH17XOcB7eXA==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.21.3.tgz",
+      "integrity": "sha512-qIJONzoa/qiHghnm0l1n4i/6IIziDpzqc36FBs4pzMhDUraHqponwJLiAKm1hGLP3OSB/TVNz6rMwVGpwxxySw==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.21.0",
+        "@babel/generator": "^7.21.3",
         "@babel/helper-compilation-targets": "^7.20.7",
-        "@babel/helper-module-transforms": "^7.21.0",
+        "@babel/helper-module-transforms": "^7.21.2",
         "@babel/helpers": "^7.21.0",
-        "@babel/parser": "^7.21.0",
+        "@babel/parser": "^7.21.3",
         "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.21.0",
-        "@babel/types": "^7.21.0",
+        "@babel/traverse": "^7.21.3",
+        "@babel/types": "^7.21.3",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -152,11 +152,10 @@
       }
     },
     "node_modules/@babel/eslint-parser": {
-      "version": "7.19.1",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/eslint-parser/-/eslint-parser-7.19.1.tgz",
-      "integrity": "sha512-AqNf2QWt1rtu2/1rLswy6CDP7H9Oh3mMhk177Y67Rg8d7RD9WfOLLv8CGn6tisFvS2htm86yIe1yLF6I1UDaGQ==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmmirror.com/@babel/eslint-parser/-/eslint-parser-7.21.3.tgz",
+      "integrity": "sha512-kfhmPimwo6k4P8zxNs8+T7yR44q1LdpsZdE1NkCsVlfiuTPRfnGgjaF8Qgug9q9Pou17u6wneYF0lDCZJATMFg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
         "eslint-visitor-keys": "^2.1.0",
@@ -171,12 +170,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.21.1.tgz",
-      "integrity": "sha512-1lT45bAYlQhFn/BHivJs43AiW2rg3/UbLyShGfF3C0KmHvO5fSghWd5kBJy30kpRRucGzXStvnnCFniCR2kXAA==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.21.3.tgz",
+      "integrity": "sha512-QS3iR1GYC/YGUnW7IdggFeN5c1poPUurnGttOV/bZgPGV+izC/D8HnD6DLwod0fsatNyVn1G3EVWMYIF0nHbeA==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.21.0",
+        "@babel/types": "^7.21.3",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -394,9 +393,9 @@
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.0.tgz",
-      "integrity": "sha512-eD/JQ21IG2i1FraJnTMbUarAUkA7G988ofehG5MDCRXaUU91rEBJuCeSoou2Sk1y4RbLYXzqEg1QLwEmRU4qcQ==",
+      "version": "7.21.2",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz",
+      "integrity": "sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.18.9",
@@ -405,8 +404,8 @@
         "@babel/helper-split-export-declaration": "^7.18.6",
         "@babel/helper-validator-identifier": "^7.19.1",
         "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.21.0",
-        "@babel/types": "^7.21.0"
+        "@babel/traverse": "^7.21.2",
+        "@babel/types": "^7.21.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -584,9 +583,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.21.1.tgz",
-      "integrity": "sha512-JzhBFpkuhBNYUY7qs+wTzNmyCWUHEaAFpQQD2YfU1rPL38/L43Wvid0fFkiOCnHvsGncRZgEPyGnltABLcVDTg==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.21.3.tgz",
+      "integrity": "sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -2079,19 +2078,19 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.21.0.tgz",
-      "integrity": "sha512-Xdt2P1H4LKTO8ApPfnO1KmzYMFpp7D/EinoXzLYN/cHcBNrVCAkAtGUcXnHXrl/VGktureU6fkQrHSBE2URfoA==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.21.3.tgz",
+      "integrity": "sha512-XLyopNeaTancVitYZe2MlUEvgKb6YVVPXzofHgqHijCImG33b/uTurMS488ht/Hbsb2XK3U2BnSTxKVNGV3nGQ==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.21.0",
+        "@babel/generator": "^7.21.3",
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-function-name": "^7.21.0",
         "@babel/helper-hoist-variables": "^7.18.6",
         "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.21.0",
-        "@babel/types": "^7.21.0",
+        "@babel/parser": "^7.21.3",
+        "@babel/types": "^7.21.3",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -2100,9 +2099,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.21.0.tgz",
-      "integrity": "sha512-uR7NWq2VNFnDi7EYqiRz2Jv/VQIu38tu64Zy8TX2nQFQ6etJ9V/Rr2msW8BS132mum2rL645qpDrLtAJtVpuow==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.21.3.tgz",
+      "integrity": "sha512-sBGdETxC+/M4o/zKC0sl6sjWv62WFR/uzxrJ6uYyMLZOUlPnwzw0tKgVHOXxaAd5l2g8pEDM5RZ495GPQI77kg==",
       "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.19.4",
@@ -2133,9 +2132,9 @@
       }
     },
     "node_modules/@csstools/css-tokenizer": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/@csstools/css-tokenizer/-/css-tokenizer-2.0.1.tgz",
-      "integrity": "sha512-sYD3H7ReR88S/4+V5VbKiBEUJF4FqvG+8aNJkxqoPAnbhFziDG22IDZc4+h+xA63SfgM+h15lq5OnLeCxQ9nPA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-tokenizer/-/css-tokenizer-2.1.0.tgz",
+      "integrity": "sha512-dtqFyoJBHUxGi9zPZdpCKP1xk8tq6KPHJ/NY4qWXiYo6IcSGwzk3L8x2XzZbbyOyBs9xQARoGveU2AsgLj6D2A==",
       "dev": true,
       "engines": {
         "node": "^14 || ^16 || >=18"
@@ -14182,11 +14181,10 @@
       }
     },
     "node_modules/known-css-properties": {
-      "version": "0.26.0",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/known-css-properties/-/known-css-properties-0.26.0.tgz",
-      "integrity": "sha512-5FZRzrZzNTBruuurWpvZnvP9pum+fe0HcK8z/ooo+U+Hmp4vtbyp1/QDsqmufirXy4egGzbaH/y2uCZf+6W5Kg==",
-      "dev": true,
-      "license": "MIT"
+      "version": "0.27.0",
+      "resolved": "https://registry.npmmirror.com/known-css-properties/-/known-css-properties-0.27.0.tgz",
+      "integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==",
+      "dev": true
     },
     "node_modules/launch-editor": {
       "version": "2.4.0",
@@ -18536,9 +18534,9 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.59.2",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.59.2.tgz",
-      "integrity": "sha512-jJyO6SmbzkJexF8MUorHx5tAilcgabioYxT/BHbY4+OvoqmbHxsYlrjZ8Adhqcgl6Zqwie0TgMXLCAmPFxXOuw==",
+      "version": "1.59.3",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.59.3.tgz",
+      "integrity": "sha512-QCq98N3hX1jfTCoUAsF3eyGuXLsY7BCnCEg9qAact94Yc21npG2/mVOqoDvE0fCbWDqiM4WlcJQla0gWG2YlxQ==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -20008,18 +20006,18 @@
       }
     },
     "node_modules/stylelint": {
-      "version": "15.2.0",
-      "resolved": "https://registry.npmmirror.com/stylelint/-/stylelint-15.2.0.tgz",
-      "integrity": "sha512-wjg5OLn8zQwjlj5cYUgyQpMWKzct42AG5dYlqkHRJQJqsystFFn3onqEc263KH4xfEI0W3lZCnlIhFfS64uwSA==",
+      "version": "15.3.0",
+      "resolved": "https://registry.npmmirror.com/stylelint/-/stylelint-15.3.0.tgz",
+      "integrity": "sha512-9UYBYk7K9rtlKcTUDZrtntE840sZM00qyYBQHHe7tjwMNUsPsGvR6Fd43IxHEAhRrDLzpy3TVaHb6CReBB3eFg==",
       "dev": true,
       "dependencies": {
         "@csstools/css-parser-algorithms": "^2.0.1",
-        "@csstools/css-tokenizer": "^2.0.1",
+        "@csstools/css-tokenizer": "^2.1.0",
         "@csstools/media-query-list-parser": "^2.0.1",
         "@csstools/selector-specificity": "^2.1.1",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
-        "cosmiconfig": "^8.0.0",
+        "cosmiconfig": "^8.1.0",
         "css-functions-list": "^3.1.0",
         "css-tree": "^2.3.1",
         "debug": "^4.3.4",
@@ -20034,7 +20032,7 @@
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
-        "known-css-properties": "^0.26.0",
+        "known-css-properties": "^0.27.0",
         "mathml-tag-names": "^2.1.3",
         "meow": "^9.0.0",
         "micromatch": "^4.0.5",
@@ -20050,7 +20048,7 @@
         "string-width": "^4.2.3",
         "strip-ansi": "^6.0.1",
         "style-search": "^0.1.0",
-        "supports-hyperlinks": "^2.3.0",
+        "supports-hyperlinks": "^3.0.0",
         "svg-tags": "^1.0.0",
         "table": "^6.8.1",
         "v8-compile-cache": "^2.3.0",
@@ -20506,9 +20504,9 @@
       "license": "MIT"
     },
     "node_modules/stylelint/node_modules/cosmiconfig": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-8.0.0.tgz",
-      "integrity": "sha512-da1EafcpH6b/TD8vDRaWV7xFINlHlF6zKsGwS1TsuVJTZRkquaS5HTMq7uq6h31619QjbsYl21gVDOm32KM1vQ==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-8.1.0.tgz",
+      "integrity": "sha512-0tLZ9URlPGU7JsKq0DQOQ3FoRsYX8xDZ7xMiATQfaiGMz7EHowNkbU9u1coAOmnh9p/1ySpm0RB3JNWRXM5GCg==",
       "dev": true,
       "dependencies": {
         "import-fresh": "^3.2.1",
@@ -20565,10 +20563,9 @@
     },
     "node_modules/stylelint/node_modules/has-flag": {
       "version": "4.0.0",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/has-flag/-/has-flag-4.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -20714,10 +20711,9 @@
     },
     "node_modules/stylelint/node_modules/supports-color": {
       "version": "7.2.0",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/supports-color/-/supports-color-7.2.0.tgz",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -20726,17 +20722,16 @@
       }
     },
     "node_modules/stylelint/node_modules/supports-hyperlinks": {
-      "version": "2.3.0",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
-      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz",
+      "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0",
         "supports-color": "^7.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=14.18"
       }
     },
     "node_modules/stylelint/node_modules/trim-newlines": {
@@ -23668,21 +23663,21 @@
       "dev": true
     },
     "@babel/core": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.21.0.tgz",
-      "integrity": "sha512-PuxUbxcW6ZYe656yL3EAhpy7qXKq0DmYsrJLpbB8XrsCP9Nm+XCg9XFMb5vIDliPD7+U/+M+QJlH17XOcB7eXA==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.21.3.tgz",
+      "integrity": "sha512-qIJONzoa/qiHghnm0l1n4i/6IIziDpzqc36FBs4pzMhDUraHqponwJLiAKm1hGLP3OSB/TVNz6rMwVGpwxxySw==",
       "dev": true,
       "requires": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.21.0",
+        "@babel/generator": "^7.21.3",
         "@babel/helper-compilation-targets": "^7.20.7",
-        "@babel/helper-module-transforms": "^7.21.0",
+        "@babel/helper-module-transforms": "^7.21.2",
         "@babel/helpers": "^7.21.0",
-        "@babel/parser": "^7.21.0",
+        "@babel/parser": "^7.21.3",
         "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.21.0",
-        "@babel/types": "^7.21.0",
+        "@babel/traverse": "^7.21.3",
+        "@babel/types": "^7.21.3",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -23691,9 +23686,9 @@
       }
     },
     "@babel/eslint-parser": {
-      "version": "7.19.1",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/eslint-parser/-/eslint-parser-7.19.1.tgz",
-      "integrity": "sha512-AqNf2QWt1rtu2/1rLswy6CDP7H9Oh3mMhk177Y67Rg8d7RD9WfOLLv8CGn6tisFvS2htm86yIe1yLF6I1UDaGQ==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmmirror.com/@babel/eslint-parser/-/eslint-parser-7.21.3.tgz",
+      "integrity": "sha512-kfhmPimwo6k4P8zxNs8+T7yR44q1LdpsZdE1NkCsVlfiuTPRfnGgjaF8Qgug9q9Pou17u6wneYF0lDCZJATMFg==",
       "dev": true,
       "requires": {
         "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
@@ -23702,12 +23697,12 @@
       }
     },
     "@babel/generator": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.21.1.tgz",
-      "integrity": "sha512-1lT45bAYlQhFn/BHivJs43AiW2rg3/UbLyShGfF3C0KmHvO5fSghWd5kBJy30kpRRucGzXStvnnCFniCR2kXAA==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.21.3.tgz",
+      "integrity": "sha512-QS3iR1GYC/YGUnW7IdggFeN5c1poPUurnGttOV/bZgPGV+izC/D8HnD6DLwod0fsatNyVn1G3EVWMYIF0nHbeA==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.21.0",
+        "@babel/types": "^7.21.3",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -23867,9 +23862,9 @@
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.0.tgz",
-      "integrity": "sha512-eD/JQ21IG2i1FraJnTMbUarAUkA7G988ofehG5MDCRXaUU91rEBJuCeSoou2Sk1y4RbLYXzqEg1QLwEmRU4qcQ==",
+      "version": "7.21.2",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz",
+      "integrity": "sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==",
       "dev": true,
       "requires": {
         "@babel/helper-environment-visitor": "^7.18.9",
@@ -23878,8 +23873,8 @@
         "@babel/helper-split-export-declaration": "^7.18.6",
         "@babel/helper-validator-identifier": "^7.19.1",
         "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.21.0",
-        "@babel/types": "^7.21.0"
+        "@babel/traverse": "^7.21.2",
+        "@babel/types": "^7.21.2"
       }
     },
     "@babel/helper-optimise-call-expression": {
@@ -24002,9 +23997,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.21.1.tgz",
-      "integrity": "sha512-JzhBFpkuhBNYUY7qs+wTzNmyCWUHEaAFpQQD2YfU1rPL38/L43Wvid0fFkiOCnHvsGncRZgEPyGnltABLcVDTg=="
+      "version": "7.21.3",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.21.3.tgz",
+      "integrity": "sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ=="
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.18.6",
@@ -24977,27 +24972,27 @@
       }
     },
     "@babel/traverse": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.21.0.tgz",
-      "integrity": "sha512-Xdt2P1H4LKTO8ApPfnO1KmzYMFpp7D/EinoXzLYN/cHcBNrVCAkAtGUcXnHXrl/VGktureU6fkQrHSBE2URfoA==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.21.3.tgz",
+      "integrity": "sha512-XLyopNeaTancVitYZe2MlUEvgKb6YVVPXzofHgqHijCImG33b/uTurMS488ht/Hbsb2XK3U2BnSTxKVNGV3nGQ==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.21.0",
+        "@babel/generator": "^7.21.3",
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-function-name": "^7.21.0",
         "@babel/helper-hoist-variables": "^7.18.6",
         "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.21.0",
-        "@babel/types": "^7.21.0",
+        "@babel/parser": "^7.21.3",
+        "@babel/types": "^7.21.3",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       }
     },
     "@babel/types": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.21.0.tgz",
-      "integrity": "sha512-uR7NWq2VNFnDi7EYqiRz2Jv/VQIu38tu64Zy8TX2nQFQ6etJ9V/Rr2msW8BS132mum2rL645qpDrLtAJtVpuow==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.21.3.tgz",
+      "integrity": "sha512-sBGdETxC+/M4o/zKC0sl6sjWv62WFR/uzxrJ6uYyMLZOUlPnwzw0tKgVHOXxaAd5l2g8pEDM5RZ495GPQI77kg==",
       "dev": true,
       "requires": {
         "@babel/helper-string-parser": "^7.19.4",
@@ -25018,9 +25013,9 @@
       "dev": true
     },
     "@csstools/css-tokenizer": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/@csstools/css-tokenizer/-/css-tokenizer-2.0.1.tgz",
-      "integrity": "sha512-sYD3H7ReR88S/4+V5VbKiBEUJF4FqvG+8aNJkxqoPAnbhFziDG22IDZc4+h+xA63SfgM+h15lq5OnLeCxQ9nPA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-tokenizer/-/css-tokenizer-2.1.0.tgz",
+      "integrity": "sha512-dtqFyoJBHUxGi9zPZdpCKP1xk8tq6KPHJ/NY4qWXiYo6IcSGwzk3L8x2XzZbbyOyBs9xQARoGveU2AsgLj6D2A==",
       "dev": true
     },
     "@csstools/media-query-list-parser": {
@@ -33549,9 +33544,9 @@
       "dev": true
     },
     "known-css-properties": {
-      "version": "0.26.0",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/known-css-properties/-/known-css-properties-0.26.0.tgz",
-      "integrity": "sha512-5FZRzrZzNTBruuurWpvZnvP9pum+fe0HcK8z/ooo+U+Hmp4vtbyp1/QDsqmufirXy4egGzbaH/y2uCZf+6W5Kg==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmmirror.com/known-css-properties/-/known-css-properties-0.27.0.tgz",
+      "integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==",
       "dev": true
     },
     "launch-editor": {
@@ -36553,9 +36548,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.59.2",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.59.2.tgz",
-      "integrity": "sha512-jJyO6SmbzkJexF8MUorHx5tAilcgabioYxT/BHbY4+OvoqmbHxsYlrjZ8Adhqcgl6Zqwie0TgMXLCAmPFxXOuw==",
+      "version": "1.59.3",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.59.3.tgz",
+      "integrity": "sha512-QCq98N3hX1jfTCoUAsF3eyGuXLsY7BCnCEg9qAact94Yc21npG2/mVOqoDvE0fCbWDqiM4WlcJQla0gWG2YlxQ==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -37630,18 +37625,18 @@
       }
     },
     "stylelint": {
-      "version": "15.2.0",
-      "resolved": "https://registry.npmmirror.com/stylelint/-/stylelint-15.2.0.tgz",
-      "integrity": "sha512-wjg5OLn8zQwjlj5cYUgyQpMWKzct42AG5dYlqkHRJQJqsystFFn3onqEc263KH4xfEI0W3lZCnlIhFfS64uwSA==",
+      "version": "15.3.0",
+      "resolved": "https://registry.npmmirror.com/stylelint/-/stylelint-15.3.0.tgz",
+      "integrity": "sha512-9UYBYk7K9rtlKcTUDZrtntE840sZM00qyYBQHHe7tjwMNUsPsGvR6Fd43IxHEAhRrDLzpy3TVaHb6CReBB3eFg==",
       "dev": true,
       "requires": {
         "@csstools/css-parser-algorithms": "^2.0.1",
-        "@csstools/css-tokenizer": "^2.0.1",
+        "@csstools/css-tokenizer": "^2.1.0",
         "@csstools/media-query-list-parser": "^2.0.1",
         "@csstools/selector-specificity": "^2.1.1",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
-        "cosmiconfig": "^8.0.0",
+        "cosmiconfig": "^8.1.0",
         "css-functions-list": "^3.1.0",
         "css-tree": "^2.3.1",
         "debug": "^4.3.4",
@@ -37656,7 +37651,7 @@
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
-        "known-css-properties": "^0.26.0",
+        "known-css-properties": "^0.27.0",
         "mathml-tag-names": "^2.1.3",
         "meow": "^9.0.0",
         "micromatch": "^4.0.5",
@@ -37672,7 +37667,7 @@
         "string-width": "^4.2.3",
         "strip-ansi": "^6.0.1",
         "style-search": "^0.1.0",
-        "supports-hyperlinks": "^2.3.0",
+        "supports-hyperlinks": "^3.0.0",
         "svg-tags": "^1.0.0",
         "table": "^6.8.1",
         "v8-compile-cache": "^2.3.0",
@@ -37715,9 +37710,9 @@
           "dev": true
         },
         "cosmiconfig": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-8.0.0.tgz",
-          "integrity": "sha512-da1EafcpH6b/TD8vDRaWV7xFINlHlF6zKsGwS1TsuVJTZRkquaS5HTMq7uq6h31619QjbsYl21gVDOm32KM1vQ==",
+          "version": "8.1.0",
+          "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-8.1.0.tgz",
+          "integrity": "sha512-0tLZ9URlPGU7JsKq0DQOQ3FoRsYX8xDZ7xMiATQfaiGMz7EHowNkbU9u1coAOmnh9p/1ySpm0RB3JNWRXM5GCg==",
           "dev": true,
           "requires": {
             "import-fresh": "^3.2.1",
@@ -37760,7 +37755,7 @@
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://repo.huaweicloud.com/repository/npm/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
@@ -37862,7 +37857,7 @@
         },
         "supports-color": {
           "version": "7.2.0",
-          "resolved": "https://repo.huaweicloud.com/repository/npm/supports-color/-/supports-color-7.2.0.tgz",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
@@ -37870,9 +37865,9 @@
           }
         },
         "supports-hyperlinks": {
-          "version": "2.3.0",
-          "resolved": "https://repo.huaweicloud.com/repository/npm/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
-          "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
+          "version": "3.0.0",
+          "resolved": "https://registry.npmmirror.com/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz",
+          "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0",

package.json

@@ -16,7 +16,7 @@
     "@tinymce/tinymce-vue": "^3.2.8",
     "awe-dnd": "^0.3.4",
     "axios": "^1.3.4",
-    "book-ui": "file:../book-ui-0.3.28.tgz",
+    "book-ui": "file:../book-ui-0.3.29.tgz",
     "core-js": "^3.29.1",
     "dayjs": "^1.11.7",
     "element-ui": "^2.15.13",
@@ -36,8 +36,8 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/core": "^7.21.3",
+    "@babel/eslint-parser": "^7.21.3",
     "@rushstack/eslint-patch": "^1.2.0",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
@@ -58,10 +58,10 @@
     "postcss": "^8.4.21",
     "postcss-html": "^1.5.0",
     "prettier": "2.8.4",
-    "sass": "^1.59.2",
+    "sass": "^1.59.3",
     "sass-loader": "^10.4.1",
     "script-ext-html-webpack-plugin": "^2.1.5",
-    "stylelint": "^15.2.0",
+    "stylelint": "^15.3.0",
     "stylelint-config-recess-order": "^4.0.0",
     "stylelint-config-recommended-scss": "^9.0.1",
     "stylelint-config-recommended-vue": "^1.4.0",

src/router/index.js

@@ -13,7 +13,7 @@ const routes = [
   },
   {
     path: '/canvas',
-    component: () => import('@/views/canvas')
+    component: () => import('@/views/canvas/canvas.vue')
   },
   {
     path: '/404',

src/views/canvas/canvas.vue

@@ -0,0 +1,985 @@
+<template>
+  <div>
+    <canvas id="canvas" ref="canvas" width="800" height="500"></canvas>
+
+    <div>
+      <el-button @click="clearCanvas">清空画布</el-button>
+      <!-- <el-button @click="eraser">橡皮擦</el-button> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CanvasPage'
+};
+</script>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+let canvasData = [
+  {
+    action: 'draw',
+    data: {
+      draw: [
+        {
+          offsetX: 192,
+          offsetY: 144
+        },
+        {
+          offsetX: 192,
+          offsetY: 143
+        },
+        {
+          offsetX: 193,
+          offsetY: 142
+        },
+        {
+          offsetX: 194,
+          offsetY: 142
+        },
+        {
+          offsetX: 195,
+          offsetY: 142
+        },
+        {
+          offsetX: 196,
+          offsetY: 142
+        },
+        {
+          offsetX: 197,
+          offsetY: 142
+        },
+        {
+          offsetX: 198,
+          offsetY: 142
+        },
+        {
+          offsetX: 199,
+          offsetY: 142
+        },
+        {
+          offsetX: 200,
+          offsetY: 142
+        },
+        {
+          offsetX: 201,
+          offsetY: 142
+        },
+        {
+          offsetX: 202,
+          offsetY: 142
+        },
+        {
+          offsetX: 203,
+          offsetY: 142
+        },
+        {
+          offsetX: 204,
+          offsetY: 142
+        },
+        {
+          offsetX: 205,
+          offsetY: 142
+        },
+        {
+          offsetX: 206,
+          offsetY: 142
+        },
+        {
+          offsetX: 207,
+          offsetY: 142
+        },
+        {
+          offsetX: 208,
+          offsetY: 143
+        },
+        {
+          offsetX: 209,
+          offsetY: 143
+        },
+        {
+          offsetX: 210,
+          offsetY: 143
+        },
+        {
+          offsetX: 211,
+          offsetY: 143
+        },
+        {
+          offsetX: 212,
+          offsetY: 144
+        },
+        {
+          offsetX: 213,
+          offsetY: 144
+        },
+        {
+          offsetX: 214,
+          offsetY: 144
+        },
+        {
+          offsetX: 215,
+          offsetY: 145
+        },
+        {
+          offsetX: 215,
+          offsetY: 146
+        },
+        {
+          offsetX: 216,
+          offsetY: 146
+        },
+        {
+          offsetX: 217,
+          offsetY: 146
+        },
+        {
+          offsetX: 218,
+          offsetY: 146
+        },
+        {
+          offsetX: 219,
+          offsetY: 146
+        },
+        {
+          offsetX: 219,
+          offsetY: 147
+        },
+        {
+          offsetX: 220,
+          offsetY: 147
+        },
+        {
+          offsetX: 221,
+          offsetY: 147
+        },
+        {
+          offsetX: 222,
+          offsetY: 148
+        },
+        {
+          offsetX: 224,
+          offsetY: 149
+        },
+        {
+          offsetX: 225,
+          offsetY: 149
+        },
+        {
+          offsetX: 227,
+          offsetY: 151
+        },
+        {
+          offsetX: 228,
+          offsetY: 151
+        },
+        {
+          offsetX: 229,
+          offsetY: 152
+        },
+        {
+          offsetX: 230,
+          offsetY: 152
+        },
+        {
+          offsetX: 231,
+          offsetY: 153
+        },
+        {
+          offsetX: 232,
+          offsetY: 153
+        },
+        {
+          offsetX: 233,
+          offsetY: 154
+        },
+        {
+          offsetX: 234,
+          offsetY: 155
+        },
+        {
+          offsetX: 236,
+          offsetY: 155
+        },
+        {
+          offsetX: 236,
+          offsetY: 156
+        },
+        {
+          offsetX: 237,
+          offsetY: 156
+        },
+        {
+          offsetX: 238,
+          offsetY: 157
+        },
+        {
+          offsetX: 239,
+          offsetY: 158
+        },
+        {
+          offsetX: 240,
+          offsetY: 158
+        },
+        {
+          offsetX: 241,
+          offsetY: 159
+        },
+        {
+          offsetX: 243,
+          offsetY: 160
+        },
+        {
+          offsetX: 243,
+          offsetY: 161
+        },
+        {
+          offsetX: 246,
+          offsetY: 162
+        },
+        {
+          offsetX: 247,
+          offsetY: 164
+        },
+        {
+          offsetX: 249,
+          offsetY: 165
+        },
+        {
+          offsetX: 250,
+          offsetY: 165
+        },
+        {
+          offsetX: 251,
+          offsetY: 167
+        },
+        {
+          offsetX: 253,
+          offsetY: 167
+        },
+        {
+          offsetX: 254,
+          offsetY: 169
+        },
+        {
+          offsetX: 256,
+          offsetY: 170
+        },
+        {
+          offsetX: 257,
+          offsetY: 171
+        },
+        {
+          offsetX: 260,
+          offsetY: 173
+        },
+        {
+          offsetX: 261,
+          offsetY: 174
+        },
+        {
+          offsetX: 262,
+          offsetY: 175
+        },
+        {
+          offsetX: 264,
+          offsetY: 178
+        },
+        {
+          offsetX: 266,
+          offsetY: 178
+        },
+        {
+          offsetX: 268,
+          offsetY: 180
+        },
+        {
+          offsetX: 270,
+          offsetY: 182
+        },
+        {
+          offsetX: 271,
+          offsetY: 183
+        },
+        {
+          offsetX: 274,
+          offsetY: 185
+        },
+        {
+          offsetX: 276,
+          offsetY: 186
+        },
+        {
+          offsetX: 278,
+          offsetY: 190
+        },
+        {
+          offsetX: 283,
+          offsetY: 193
+        },
+        {
+          offsetX: 284,
+          offsetY: 194
+        },
+        {
+          offsetX: 287,
+          offsetY: 197
+        },
+        {
+          offsetX: 289,
+          offsetY: 199
+        },
+        {
+          offsetX: 292,
+          offsetY: 201
+        },
+        {
+          offsetX: 294,
+          offsetY: 203
+        },
+        {
+          offsetX: 299,
+          offsetY: 207
+        },
+        {
+          offsetX: 301,
+          offsetY: 209
+        },
+        {
+          offsetX: 304,
+          offsetY: 211
+        },
+        {
+          offsetX: 306,
+          offsetY: 214
+        },
+        {
+          offsetX: 308,
+          offsetY: 216
+        },
+        {
+          offsetX: 311,
+          offsetY: 217
+        },
+        {
+          offsetX: 311,
+          offsetY: 218
+        },
+        {
+          offsetX: 314,
+          offsetY: 220
+        },
+        {
+          offsetX: 316,
+          offsetY: 223
+        },
+        {
+          offsetX: 319,
+          offsetY: 225
+        },
+        {
+          offsetX: 321,
+          offsetY: 227
+        },
+        {
+          offsetX: 323,
+          offsetY: 229
+        },
+        {
+          offsetX: 333,
+          offsetY: 238
+        },
+        {
+          offsetX: 334,
+          offsetY: 240
+        },
+        {
+          offsetX: 336,
+          offsetY: 242
+        },
+        {
+          offsetX: 340,
+          offsetY: 245
+        },
+        {
+          offsetX: 341,
+          offsetY: 246
+        },
+        {
+          offsetX: 344,
+          offsetY: 249
+        },
+        {
+          offsetX: 346,
+          offsetY: 250
+        },
+        {
+          offsetX: 348,
+          offsetY: 253
+        },
+        {
+          offsetX: 350,
+          offsetY: 255
+        },
+        {
+          offsetX: 352,
+          offsetY: 256
+        },
+        {
+          offsetX: 354,
+          offsetY: 259
+        },
+        {
+          offsetX: 357,
+          offsetY: 261
+        },
+        {
+          offsetX: 358,
+          offsetY: 262
+        },
+        {
+          offsetX: 360,
+          offsetY: 265
+        },
+        {
+          offsetX: 362,
+          offsetY: 266
+        },
+        {
+          offsetX: 365,
+          offsetY: 270
+        },
+        {
+          offsetX: 369,
+          offsetY: 273
+        },
+        {
+          offsetX: 371,
+          offsetY: 275
+        },
+        {
+          offsetX: 372,
+          offsetY: 277
+        },
+        {
+          offsetX: 374,
+          offsetY: 278
+        },
+        {
+          offsetX: 376,
+          offsetY: 280
+        },
+        {
+          offsetX: 377,
+          offsetY: 281
+        },
+        {
+          offsetX: 379,
+          offsetY: 283
+        },
+        {
+          offsetX: 380,
+          offsetY: 284
+        },
+        {
+          offsetX: 383,
+          offsetY: 287
+        },
+        {
+          offsetX: 385,
+          offsetY: 288
+        },
+        {
+          offsetX: 386,
+          offsetY: 290
+        },
+        {
+          offsetX: 388,
+          offsetY: 290
+        },
+        {
+          offsetX: 388,
+          offsetY: 292
+        },
+        {
+          offsetX: 390,
+          offsetY: 293
+        },
+        {
+          offsetX: 391,
+          offsetY: 294
+        },
+        {
+          offsetX: 392,
+          offsetY: 295
+        },
+        {
+          offsetX: 394,
+          offsetY: 297
+        },
+        {
+          offsetX: 395,
+          offsetY: 297
+        },
+        {
+          offsetX: 397,
+          offsetY: 299
+        },
+        {
+          offsetX: 397,
+          offsetY: 300
+        },
+        {
+          offsetX: 401,
+          offsetY: 303
+        },
+        {
+          offsetX: 402,
+          offsetY: 304
+        },
+        {
+          offsetX: 403,
+          offsetY: 305
+        },
+        {
+          offsetX: 404,
+          offsetY: 306
+        },
+        {
+          offsetX: 405,
+          offsetY: 307
+        },
+        {
+          offsetX: 406,
+          offsetY: 308
+        },
+        {
+          offsetX: 407,
+          offsetY: 309
+        },
+        {
+          offsetX: 408,
+          offsetY: 310
+        },
+        {
+          offsetX: 409,
+          offsetY: 310
+        },
+        {
+          offsetX: 410,
+          offsetY: 312
+        },
+        {
+          offsetX: 411,
+          offsetY: 312
+        },
+        {
+          offsetX: 412,
+          offsetY: 313
+        },
+        {
+          offsetX: 413,
+          offsetY: 315
+        },
+        {
+          offsetX: 415,
+          offsetY: 316
+        },
+        {
+          offsetX: 416,
+          offsetY: 317
+        },
+        {
+          offsetX: 418,
+          offsetY: 318
+        },
+        {
+          offsetX: 418,
+          offsetY: 319
+        },
+        {
+          offsetX: 419,
+          offsetY: 319
+        },
+        {
+          offsetX: 421,
+          offsetY: 321
+        },
+        {
+          offsetX: 422,
+          offsetY: 322
+        },
+        {
+          offsetX: 423,
+          offsetY: 323
+        },
+        {
+          offsetX: 423,
+          offsetY: 324
+        },
+        {
+          offsetX: 425,
+          offsetY: 325
+        },
+        {
+          offsetX: 426,
+          offsetY: 325
+        },
+        {
+          offsetX: 426,
+          offsetY: 326
+        },
+        {
+          offsetX: 427,
+          offsetY: 326
+        },
+        {
+          offsetX: 427,
+          offsetY: 327
+        },
+        {
+          offsetX: 429,
+          offsetY: 328
+        },
+        {
+          offsetX: 430,
+          offsetY: 329
+        },
+        {
+          offsetX: 431,
+          offsetY: 330
+        },
+        {
+          offsetX: 432,
+          offsetY: 331
+        },
+        {
+          offsetX: 433,
+          offsetY: 333
+        },
+        {
+          offsetX: 434,
+          offsetY: 334
+        },
+        {
+          offsetX: 436,
+          offsetY: 335
+        },
+        {
+          offsetX: 443,
+          offsetY: 342
+        },
+        {
+          offsetX: 444,
+          offsetY: 342
+        },
+        {
+          offsetX: 445,
+          offsetY: 343
+        },
+        {
+          offsetX: 445,
+          offsetY: 344
+        },
+        {
+          offsetX: 450,
+          offsetY: 348
+        },
+        {
+          offsetX: 451,
+          offsetY: 349
+        },
+        {
+          offsetX: 453,
+          offsetY: 350
+        },
+        {
+          offsetX: 454,
+          offsetY: 352
+        },
+        {
+          offsetX: 455,
+          offsetY: 353
+        },
+        {
+          offsetX: 457,
+          offsetY: 354
+        },
+        {
+          offsetX: 462,
+          offsetY: 358
+        },
+        {
+          offsetX: 463,
+          offsetY: 361
+        },
+        {
+          offsetX: 465,
+          offsetY: 361
+        },
+        {
+          offsetX: 470,
+          offsetY: 366
+        },
+        {
+          offsetX: 472,
+          offsetY: 368
+        },
+        {
+          offsetX: 473,
+          offsetY: 369
+        },
+        {
+          offsetX: 475,
+          offsetY: 370
+        },
+        {
+          offsetX: 476,
+          offsetY: 372
+        },
+        {
+          offsetX: 477,
+          offsetY: 372
+        },
+        {
+          offsetX: 479,
+          offsetY: 373
+        },
+        {
+          offsetX: 480,
+          offsetY: 375
+        },
+        {
+          offsetX: 482,
+          offsetY: 376
+        },
+        {
+          offsetX: 483,
+          offsetY: 377
+        },
+        {
+          offsetX: 484,
+          offsetY: 378
+        },
+        {
+          offsetX: 489,
+          offsetY: 382
+        },
+        {
+          offsetX: 490,
+          offsetY: 383
+        },
+        {
+          offsetX: 492,
+          offsetY: 385
+        },
+        {
+          offsetX: 494,
+          offsetY: 386
+        },
+        {
+          offsetX: 496,
+          offsetY: 387
+        },
+        {
+          offsetX: 496,
+          offsetY: 388
+        },
+        {
+          offsetX: 498,
+          offsetY: 389
+        },
+        {
+          offsetX: 499,
+          offsetY: 390
+        },
+        {
+          offsetX: 500,
+          offsetY: 391
+        },
+        {
+          offsetX: 503,
+          offsetY: 393
+        },
+        {
+          offsetX: 504,
+          offsetY: 393
+        },
+        {
+          offsetX: 506,
+          offsetY: 395
+        },
+        {
+          offsetX: 507,
+          offsetY: 396
+        },
+        {
+          offsetX: 507,
+          offsetY: 397
+        },
+        {
+          offsetX: 509,
+          offsetY: 397
+        },
+        {
+          offsetX: 509,
+          offsetY: 398
+        },
+        {
+          offsetX: 511,
+          offsetY: 398
+        },
+        {
+          offsetX: 519,
+          offsetY: 404
+        },
+        {
+          offsetX: 519,
+          offsetY: 405
+        },
+        {
+          offsetX: 520,
+          offsetY: 405
+        },
+        {
+          offsetX: 521,
+          offsetY: 406
+        },
+        {
+          offsetX: 522,
+          offsetY: 406
+        },
+        {
+          offsetX: 522,
+          offsetY: 407
+        },
+        {
+          offsetX: 523,
+          offsetY: 407
+        },
+        {
+          offsetX: 523,
+          offsetY: 408
+        },
+        {
+          offsetX: 524,
+          offsetY: 408
+        },
+        {
+          offsetX: 525,
+          offsetY: 408
+        },
+        {
+          offsetX: 525,
+          offsetY: 409
+        },
+        {
+          offsetX: 526,
+          offsetY: 409
+        },
+        {
+          offsetX: 526,
+          offsetY: 410
+        },
+        {
+          offsetX: 526,
+          offsetY: 411
+        }
+      ],
+      time: 0
+    }
+  }
+];
+let canvasItem = { action: 'draw', data: { draw: [], time: 0 } };
+
+let canvas = ref(null);
+let ctx = null;
+onMounted(() => {
+  ctx = canvas.value.getContext('2d');
+  setCanvasStatus();
+  canvasAddEventListener();
+  draw();
+});
+
+function draw() {
+  canvasData.forEach(({ data }) => {
+    let { draw } = data;
+    if (!draw.length) return;
+    ctx.beginPath();
+    ctx.moveTo(draw[0].offsetX, draw[0].offsetY);
+    draw.forEach(({ offsetX, offsetY }) => {
+      ctx.lineTo(offsetX, offsetY);
+    });
+    ctx.stroke();
+  });
+}
+
+// 线条宽度
+let strokeWidth = 1;
+// 线条颜色
+let strokeColor = 'green';
+/**
+ * 设置画布状态
+ */
+function setCanvasStatus() {
+  // 线条末端添加圆形线帽，减少线条的生硬感
+  ctx.lineCap = 'round';
+  // 当两条线条交汇时，创建圆形边角
+  ctx.lineJoin = 'round';
+  ctx.lineWidth = strokeWidth;
+  ctx.strokeStyle = strokeColor;
+  // 利用阴影,消除锯齿
+  ctx.shadowBlur = 1;
+  ctx.shadowColor = strokeColor;
+}
+
+let drawStatus = false;
+/**
+ * 为画布添加事件
+ */
+function canvasAddEventListener() {
+  canvas.value.addEventListener('mousemove', ({ offsetX, offsetY }) => {
+    if (!drawStatus) return;
+    ctx.lineTo(offsetX, offsetY);
+    ctx.stroke();
+    canvasItem.data.draw.push({ offsetX, offsetY });
+  });
+
+  canvas.value.addEventListener('mousedown', (e) => {
+    drawStatus = true;
+    ctx.moveTo(e.offsetX, e.offsetY);
+  });
+
+  ['mouseup', 'mouseout'].forEach((event) => {
+    canvas.value.addEventListener(event, () => {
+      if (drawStatus) canvasData.push(canvasItem);
+      drawStatus = false;
+      canvasItem = { action: 'draw', data: { draw: [], time: 0 } };
+      console.log(canvasData);
+    });
+  });
+}
+
+/**
+ * 清空画布
+ */
+function clearCanvas() {
+  ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
+  canvasData = [];
+}
+
+/**
+ * 橡皮擦
+ */
+function eraser() {
+  ctx.strokeStyle = 'white';
+}
+</script>
+
+<style lang="scss" scoped>
+#canvas {
+  border: 1px solid red;
+}
+</style>