diff --git a/components.d.ts b/components.d.ts
index c3c9bea91d3de742597fe6a5b2843c44eef0657f..c7e1d5bc0b5de23a95a70bae17510613494624e8 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -4,8 +4,11 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
+    EchartsComponent: typeof import('./src/components/echartsComponent.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     InputComponents: typeof import('./src/components/inputComponents.vue')['default']
   }
diff --git a/package-lock.json b/package-lock.json
index c59bb6cafe8a99027f8083eae207d5cc8f0f702a..50b12c893c13e845a922ab6f4070a123b40618c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,15 @@
       "name": "vue3-vite-project",
       "version": "0.0.0",
       "dependencies": {
-        "vue": "^3.2.25"
+        "axios": "^0.26.1",
+        "element-plus": "^2.1.4",
+        "pinia": "^2.0.13",
+        "vue": "^3.2.25",
+        "vue-router": "^4.0.14"
       },
       "devDependencies": {
         "@types/node": "^17.0.23",
+        "@types/qs": "^6.9.7",
         "@typescript-eslint/eslint-plugin": "^5.17.0",
         "@typescript-eslint/parser": "^5.17.0",
         "@vitejs/plugin-vue": "^2.3.0",
@@ -20,7 +25,11 @@
         "eslint-plugin-prettier": "^3.4.1",
         "eslint-plugin-vue": "^8.5.0",
         "prettier": "2.4.1",
+        "qs": "^6.10.3",
+        "sass": "^1.49.11",
         "typescript": "^4.5.4",
+        "unplugin-auto-import": "^0.6.9",
+        "unplugin-vue-components": "^0.18.5",
         "vite": "^2.9.0",
         "vite-plugin-eslint": "^1.3.0",
         "vite-tsconfig-paths": "^3.4.1",
@@ -28,6 +37,12 @@
         "vue-tsc": "^0.29.8"
       }
     },
+    "node_modules/@antfu/utils": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.5.0.tgz",
+      "integrity": "sha512-MrAQ/MrPSxbh1bBrmwJjORfJymw4IqSHFBXqvxaga3ZdDM+/zokYF8DjyJpSjY2QmpmgQrajDUBJOWrYeARfzA==",
+      "dev": true
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.12.11",
       "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.12.11.tgz",
@@ -155,12 +170,28 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
+      "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@cush/relative": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/@cush/relative/-/relative-1.0.0.tgz",
       "integrity": "sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==",
       "dev": true
     },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
+      "integrity": "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@emmetio/abbreviation": {
       "version": "2.2.3",
       "resolved": "https://registry.npmmirror.com/@emmetio/abbreviation/-/abbreviation-2.2.3.tgz",
@@ -214,6 +245,19 @@
         "node": ">= 4"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-0.6.1.tgz",
+      "integrity": "sha512-Y30eVMcZva8o84c0HcXAtDO4BEzPJMvF6+B7x7urL2xbAqVsGJhojOyHLaoQHQYjb6OkqRq5kO+zeySycQwKqg=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-0.4.4.tgz",
+      "integrity": "sha512-0Ulu3B/dqQplUUSqnTx0foSrlYuMN+GTtlJWvNJwt6Fr7/PqmlR/Y08o6/+bxDWr6p3roBJRaQ51MDZsNmEhhw==",
+      "dependencies": {
+        "@floating-ui/core": "^0.6.1"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@@ -269,6 +313,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-4.2.0.tgz",
@@ -294,12 +343,33 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.181",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.181.tgz",
+      "integrity": "sha512-n3tyKthHJbkiWhDZs3DkhkCzt2MexYHXlX0td5iMplyfwketaOeKboEVBqzceH7juqvEg3q5oUoBFxSLu7zFag==",
+      "peer": true
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+      "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "peer": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "17.0.23",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-17.0.23.tgz",
       "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==",
       "dev": true
     },
+    "node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmmirror.com/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.17.0",
       "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.17.0.tgz",
@@ -622,6 +692,11 @@
         "@vue/shared": "3.2.31"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
+      "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.2.31",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.31.tgz",
@@ -678,6 +753,74 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.31.tgz",
       "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-5prZAA1Ji2ltwNUnzreu6WIXYqHYP/9U2BiY5mD/650VYLpVcwVlYznJDFcLCmEWI3o3Vd34oS1FUf+6Mh68GQ==",
+      "dependencies": {
+        "@vueuse/metadata": "8.2.5",
+        "@vueuse/shared": "8.2.5",
+        "vue-demi": "*"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-8.2.5.tgz",
+      "integrity": "sha512-lNWo+7sk6JCuOj4AiYM+6HZ6fq4xAuVq1sVckMQKgfCJZpZRe4i8es+ZULO5bYTKP+VrOCtqrLR2GzEfrbr3YQ==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz",
+      "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-8.2.5.tgz",
+      "integrity": "sha512-Lk9plJjh9cIdiRdcj16dau+2LANxIdFCiTgdfzwYXbflxq0QnMBeOD2qHgKDE7fuVrtPcVWj8VSuZEx1HRfNQA=="
+    },
     "node_modules/acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
@@ -741,6 +884,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmmirror.com/argparse/-/argparse-1.0.10.tgz",
@@ -780,6 +936,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/async-validator": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.0.7.tgz",
+      "integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ=="
+    },
+    "node_modules/axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "node_modules/babel-walk": {
       "version": "3.0.0-canary-5",
       "resolved": "https://registry.npmmirror.com/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
@@ -798,6 +967,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -861,6 +1039,27 @@
         "is-regex": "^1.0.3"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
@@ -914,6 +1113,11 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz",
       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
+    "node_modules/dayjs": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.0.tgz",
+      "integrity": "sha512-JLC809s6Y948/FuCZPm5IX8rRhQwOiyMb2TfVVQEixG7P8Lm/gt5S7yoQZmC8x1UehI9Pb7sksEt4xx14m+7Ug=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
@@ -1013,6 +1217,29 @@
         "domhandler": "^4.2.0"
       }
     },
+    "node_modules/element-plus": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.1.8.tgz",
+      "integrity": "sha512-hwFtzw0R5lKMhWf3oVvSU/ucfN8RiY8DRaRWo6LktX4RlWWA2QjKfDXtISBi5Rb303Ny4I0Sgz0CA1Fd4Z2GGg==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.0",
+        "@element-plus/icons-vue": "^1.1.4",
+        "@floating-ui/dom": "^0.4.2",
+        "@popperjs/core": "^2.11.4",
+        "@vueuse/core": "^8.2.3",
+        "async-validator": "^4.0.7",
+        "dayjs": "^1.11.0",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.1.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/emmet": {
       "version": "2.3.6",
       "resolved": "https://registry.npmmirror.com/emmet/-/emmet-2.3.6.tgz",
@@ -1404,6 +1631,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -1796,6 +2028,19 @@
       "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.14.9",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1971,6 +2216,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2009,6 +2260,18 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-core-module": {
       "version": "2.8.1",
       "resolved": "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.8.1.tgz",
@@ -2170,11 +2433,34 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/local-pkg": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.1.tgz",
+      "integrity": "sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.2.tgz",
+      "integrity": "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
@@ -2208,6 +2494,11 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz",
@@ -2271,6 +2562,20 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.1.2.tgz",
+      "integrity": "sha512-scX83plWJXYH1J4+BhAuIHadROzxX0UBF3+HuZNY2Ks8BciE7tSTQ+5JhTsvzjaO0/EJdm4JBGrfObKxFf3Png=="
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
@@ -2280,6 +2585,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.0.tgz",
+      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
+      "dev": true
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
@@ -2365,6 +2676,49 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.0.13.tgz",
+      "integrity": "sha512-B7rSqm1xNpwcPMnqns8/gVBfbbi7lWTByzS6aPZ4JOXSJD4Y531rZHDCoYWBwLyHY/8hWnXljgiXp6rRyrofcw==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.1.4",
+        "vue-demi": "*"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz",
+      "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.12",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.12.tgz",
@@ -2562,12 +2916,36 @@
         "node": ">=6"
       }
     },
+    "node_modules/qs": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "dev": true,
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/recrawl-sync": {
       "version": "2.2.2",
       "resolved": "https://registry.npmmirror.com/recrawl-sync/-/recrawl-sync-2.2.2.tgz",
@@ -2673,6 +3051,23 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/sass": {
+      "version": "1.50.0",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.50.0.tgz",
+      "integrity": "sha512-cLsD6MEZ5URXHStxApajEh7gW189kkjn4Rc8DQweMyF+o5HF5nfEz8QYLMlPsTOD88DknatTmBWkOcw5/LnJLQ==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-7.3.5.tgz",
@@ -2709,6 +3104,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
@@ -2949,7 +3355,7 @@
       "version": "4.6.3",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-4.6.3.tgz",
       "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -2958,6 +3364,140 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/unplugin": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-0.4.0.tgz",
+      "integrity": "sha512-4ScITEmzlz1iZW3tkz+3L1V5k/xMQ6kjgm4lEXKxH0ozd8/OUWfiSA7RMRyrawsvq/t50JIzPpp1UyuSL/AXkA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": "^3.5.3",
+        "webpack-virtual-modules": "^0.4.3"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.13",
+        "rollup": "^2.50.0",
+        "vite": "^2.3.0",
+        "webpack": "4 || 5"
+      },
+      "peerDependenciesMeta": {
+        "esbuild": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-auto-import": {
+      "version": "0.6.9",
+      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.6.9.tgz",
+      "integrity": "sha512-IqgT7AoRrNQwNhiF/wDH3sMEDX8SqCYBEgJzwdg5441b5aiC5VwZz0J0wYqkaKu89YkZE9DG6rQ2JpFfZv1iiQ==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.5.0",
+        "@rollup/pluginutils": "^4.2.0",
+        "local-pkg": "^0.4.1",
+        "magic-string": "^0.26.1",
+        "resolve": "^1.22.0",
+        "unplugin": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@vueuse/core": "*"
+      },
+      "peerDependenciesMeta": {
+        "@vueuse/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/magic-string": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.26.1.tgz",
+      "integrity": "sha512-ndThHmvgtieXe8J/VGPjG+Apu7v7ItcD5mhEIvOscWjPF/ccOiLxHaSuCAS2G+3x4GKsAbT8u7zdyamupui8Tg==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.18.5.tgz",
+      "integrity": "sha512-VPA6z/4pcKRDYtWu1H+FIpV0MADlFKG3q7YMVFzNFC3EhMVZ4WuBJ76490oKyauguNw1T1obLCuxNU9JzJ0oAQ==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.5.0",
+        "@rollup/pluginutils": "^4.2.0",
+        "chokidar": "^3.5.3",
+        "debug": "^4.3.3",
+        "fast-glob": "^3.2.11",
+        "local-pkg": "^0.4.1",
+        "magic-string": "^0.26.1",
+        "minimatch": "^5.0.1",
+        "resolve": "^1.22.0",
+        "unplugin": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@babel/traverse": "^7.15.4",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        },
+        "@babel/traverse": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/magic-string": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.26.1.tgz",
+      "integrity": "sha512-ndThHmvgtieXe8J/VGPjG+Apu7v7ItcD5mhEIvOscWjPF/ccOiLxHaSuCAS2G+3x4GKsAbT8u7zdyamupui8Tg==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/minimatch": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-5.0.1.tgz",
+      "integrity": "sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/upath": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/upath/-/upath-2.0.1.tgz",
@@ -3300,6 +3840,17 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.14.tgz",
+      "integrity": "sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "0.29.8",
       "resolved": "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-0.29.8.tgz",
@@ -3316,6 +3867,12 @@
         "typescript": "*"
       }
     },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz",
+      "integrity": "sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==",
+      "dev": true
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
@@ -3369,6 +3926,12 @@
     }
   },
   "dependencies": {
+    "@antfu/utils": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.5.0.tgz",
+      "integrity": "sha512-MrAQ/MrPSxbh1bBrmwJjORfJymw4IqSHFBXqvxaga3ZdDM+/zokYF8DjyJpSjY2QmpmgQrajDUBJOWrYeARfzA==",
+      "dev": true
+    },
     "@babel/code-frame": {
       "version": "7.12.11",
       "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.12.11.tgz",
@@ -3468,12 +4031,23 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@ctrl/tinycolor": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
+      "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ=="
+    },
     "@cush/relative": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/@cush/relative/-/relative-1.0.0.tgz",
       "integrity": "sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==",
       "dev": true
     },
+    "@element-plus/icons-vue": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
+      "integrity": "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ==",
+      "requires": {}
+    },
     "@emmetio/abbreviation": {
       "version": "2.2.3",
       "resolved": "https://registry.npmmirror.com/@emmetio/abbreviation/-/abbreviation-2.2.3.tgz",
@@ -3523,6 +4097,19 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-0.6.1.tgz",
+      "integrity": "sha512-Y30eVMcZva8o84c0HcXAtDO4BEzPJMvF6+B7x7urL2xbAqVsGJhojOyHLaoQHQYjb6OkqRq5kO+zeySycQwKqg=="
+    },
+    "@floating-ui/dom": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-0.4.4.tgz",
+      "integrity": "sha512-0Ulu3B/dqQplUUSqnTx0foSrlYuMN+GTtlJWvNJwt6Fr7/PqmlR/Y08o6/+bxDWr6p3roBJRaQ51MDZsNmEhhw==",
+      "requires": {
+        "@floating-ui/core": "^0.6.1"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@@ -3566,6 +4153,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+    },
     "@rollup/pluginutils": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-4.2.0.tgz",
@@ -3588,12 +4180,33 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.14.181",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.181.tgz",
+      "integrity": "sha512-n3tyKthHJbkiWhDZs3DkhkCzt2MexYHXlX0td5iMplyfwketaOeKboEVBqzceH7juqvEg3q5oUoBFxSLu7zFag==",
+      "peer": true
+    },
+    "@types/lodash-es": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+      "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "peer": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
     "@types/node": {
       "version": "17.0.23",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-17.0.23.tgz",
       "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==",
       "dev": true
     },
+    "@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmmirror.com/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "5.17.0",
       "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.17.0.tgz",
@@ -3850,6 +4463,11 @@
         "@vue/shared": "3.2.31"
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
+      "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+    },
     "@vue/reactivity": {
       "version": "3.2.31",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.31.tgz",
@@ -3903,6 +4521,37 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.31.tgz",
       "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
     },
+    "@vueuse/core": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-5prZAA1Ji2ltwNUnzreu6WIXYqHYP/9U2BiY5mD/650VYLpVcwVlYznJDFcLCmEWI3o3Vd34oS1FUf+6Mh68GQ==",
+      "requires": {
+        "@vueuse/metadata": "8.2.5",
+        "@vueuse/shared": "8.2.5",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "@vueuse/shared": {
+          "version": "8.2.5",
+          "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-8.2.5.tgz",
+          "integrity": "sha512-lNWo+7sk6JCuOj4AiYM+6HZ6fq4xAuVq1sVckMQKgfCJZpZRe4i8es+ZULO5bYTKP+VrOCtqrLR2GzEfrbr3YQ==",
+          "requires": {
+            "vue-demi": "*"
+          }
+        },
+        "vue-demi": {
+          "version": "0.12.5",
+          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz",
+          "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-8.2.5.tgz",
+      "integrity": "sha512-Lk9plJjh9cIdiRdcj16dau+2LANxIdFCiTgdfzwYXbflxq0QnMBeOD2qHgKDE7fuVrtPcVWj8VSuZEx1HRfNQA=="
+    },
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
@@ -3949,6 +4598,16 @@
         "color-convert": "^2.0.1"
       }
     },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmmirror.com/argparse/-/argparse-1.0.10.tgz",
@@ -3982,6 +4641,19 @@
       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
       "dev": true
     },
+    "async-validator": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.0.7.tgz",
+      "integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ=="
+    },
+    "axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "requires": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "babel-walk": {
       "version": "3.0.0-canary-5",
       "resolved": "https://registry.npmmirror.com/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
@@ -3997,6 +4669,12 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4051,6 +4729,22 @@
         "is-regex": "^1.0.3"
       }
     },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      }
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
@@ -4098,6 +4792,11 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz",
       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
+    "dayjs": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.0.tgz",
+      "integrity": "sha512-JLC809s6Y948/FuCZPm5IX8rRhQwOiyMb2TfVVQEixG7P8Lm/gt5S7yoQZmC8x1UehI9Pb7sksEt4xx14m+7Ug=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
@@ -4182,6 +4881,26 @@
         "domhandler": "^4.2.0"
       }
     },
+    "element-plus": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.1.8.tgz",
+      "integrity": "sha512-hwFtzw0R5lKMhWf3oVvSU/ucfN8RiY8DRaRWo6LktX4RlWWA2QjKfDXtISBi5Rb303Ny4I0Sgz0CA1Fd4Z2GGg==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.4.0",
+        "@element-plus/icons-vue": "^1.1.4",
+        "@floating-ui/dom": "^0.4.2",
+        "@popperjs/core": "^2.11.4",
+        "@vueuse/core": "^8.2.3",
+        "async-validator": "^4.0.7",
+        "dayjs": "^1.11.0",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.1.2"
+      }
+    },
     "emmet": {
       "version": "2.3.6",
       "resolved": "https://registry.npmmirror.com/emmet/-/emmet-2.3.6.tgz",
@@ -4381,6 +5100,11 @@
       "dev": true,
       "optional": true
     },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
     "escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -4685,6 +5409,11 @@
       "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
       "dev": true
     },
+    "follow-redirects": {
+      "version": "1.14.9",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4827,6 +5556,12 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
+    "immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+      "dev": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4859,6 +5594,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
     "is-core-module": {
       "version": "2.8.1",
       "resolved": "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.8.1.tgz",
@@ -4996,11 +5740,27 @@
         "type-check": "~0.4.0"
       }
     },
+    "local-pkg": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.1.tgz",
+      "integrity": "sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==",
+      "dev": true
+    },
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "lodash-unified": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.2.tgz",
+      "integrity": "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==",
+      "requires": {}
     },
     "lodash.merge": {
       "version": "4.6.2",
@@ -5031,6 +5791,11 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz",
@@ -5079,12 +5844,29 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "normalize-wheel-es": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.1.2.tgz",
+      "integrity": "sha512-scX83plWJXYH1J4+BhAuIHadROzxX0UBF3+HuZNY2Ks8BciE7tSTQ+5JhTsvzjaO0/EJdm4JBGrfObKxFf3Png=="
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
       "dev": true
     },
+    "object-inspect": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.0.tgz",
+      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
+      "dev": true
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
@@ -5152,6 +5934,23 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.0.13.tgz",
+      "integrity": "sha512-B7rSqm1xNpwcPMnqns8/gVBfbbi7lWTByzS6aPZ4JOXSJD4Y531rZHDCoYWBwLyHY/8hWnXljgiXp6rRyrofcw==",
+      "requires": {
+        "@vue/devtools-api": "^6.1.4",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.12.5",
+          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz",
+          "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
+          "requires": {}
+        }
+      }
+    },
     "postcss": {
       "version": "8.4.12",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.12.tgz",
@@ -5328,12 +6127,30 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
+    "qs": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "dev": true,
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
     "recrawl-sync": {
       "version": "2.2.2",
       "resolved": "https://registry.npmmirror.com/recrawl-sync/-/recrawl-sync-2.2.2.tgz",
@@ -5414,6 +6231,17 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "sass": {
+      "version": "1.50.0",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.50.0.tgz",
+      "integrity": "sha512-cLsD6MEZ5URXHStxApajEh7gW189kkjn4Rc8DQweMyF+o5HF5nfEz8QYLMlPsTOD88DknatTmBWkOcw5/LnJLQ==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-7.3.5.tgz",
@@ -5438,6 +6266,17 @@
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true
     },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
@@ -5629,7 +6468,89 @@
       "version": "4.6.3",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-4.6.3.tgz",
       "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
-      "dev": true
+      "devOptional": true
+    },
+    "unplugin": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-0.4.0.tgz",
+      "integrity": "sha512-4ScITEmzlz1iZW3tkz+3L1V5k/xMQ6kjgm4lEXKxH0ozd8/OUWfiSA7RMRyrawsvq/t50JIzPpp1UyuSL/AXkA==",
+      "dev": true,
+      "requires": {
+        "chokidar": "^3.5.3",
+        "webpack-virtual-modules": "^0.4.3"
+      }
+    },
+    "unplugin-auto-import": {
+      "version": "0.6.9",
+      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.6.9.tgz",
+      "integrity": "sha512-IqgT7AoRrNQwNhiF/wDH3sMEDX8SqCYBEgJzwdg5441b5aiC5VwZz0J0wYqkaKu89YkZE9DG6rQ2JpFfZv1iiQ==",
+      "dev": true,
+      "requires": {
+        "@antfu/utils": "^0.5.0",
+        "@rollup/pluginutils": "^4.2.0",
+        "local-pkg": "^0.4.1",
+        "magic-string": "^0.26.1",
+        "resolve": "^1.22.0",
+        "unplugin": "^0.4.0"
+      },
+      "dependencies": {
+        "magic-string": {
+          "version": "0.26.1",
+          "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.26.1.tgz",
+          "integrity": "sha512-ndThHmvgtieXe8J/VGPjG+Apu7v7ItcD5mhEIvOscWjPF/ccOiLxHaSuCAS2G+3x4GKsAbT8u7zdyamupui8Tg==",
+          "dev": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        }
+      }
+    },
+    "unplugin-vue-components": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.18.5.tgz",
+      "integrity": "sha512-VPA6z/4pcKRDYtWu1H+FIpV0MADlFKG3q7YMVFzNFC3EhMVZ4WuBJ76490oKyauguNw1T1obLCuxNU9JzJ0oAQ==",
+      "dev": true,
+      "requires": {
+        "@antfu/utils": "^0.5.0",
+        "@rollup/pluginutils": "^4.2.0",
+        "chokidar": "^3.5.3",
+        "debug": "^4.3.3",
+        "fast-glob": "^3.2.11",
+        "local-pkg": "^0.4.1",
+        "magic-string": "^0.26.1",
+        "minimatch": "^5.0.1",
+        "resolve": "^1.22.0",
+        "unplugin": "^0.4.0"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "magic-string": {
+          "version": "0.26.1",
+          "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.26.1.tgz",
+          "integrity": "sha512-ndThHmvgtieXe8J/VGPjG+Apu7v7ItcD5mhEIvOscWjPF/ccOiLxHaSuCAS2G+3x4GKsAbT8u7zdyamupui8Tg==",
+          "dev": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        },
+        "minimatch": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-5.0.1.tgz",
+          "integrity": "sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
     },
     "upath": {
       "version": "2.0.1",
@@ -5912,6 +6833,14 @@
         }
       }
     },
+    "vue-router": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.14.tgz",
+      "integrity": "sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0"
+      }
+    },
     "vue-tsc": {
       "version": "0.29.8",
       "resolved": "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-0.29.8.tgz",
@@ -5922,6 +6851,12 @@
         "vscode-vue-languageservice": "0.29.8"
       }
     },
+    "webpack-virtual-modules": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz",
+      "integrity": "sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==",
+      "dev": true
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 77a54a79087361af0fab93fca21dcc682c325c8c..4d8209dd9f426a0574327af1526253938ace09b3 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.26.1",
+    "echarts": "^5.3.2",
     "element-plus": "^2.1.4",
     "pinia": "^2.0.13",
     "vue": "^3.2.25",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a8b78a37bb659cfffb6a38c2b77f649049ac16cd..f29954e4e2e8853aa95871783c37297b2619dae3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,7 @@ specifiers:
   '@typescript-eslint/parser': ^5.17.0
   '@vitejs/plugin-vue': ^2.3.0
   axios: ^0.26.1
+  echarts: ^5.3.2
   element-plus: ^2.1.4
   eslint: ^7.32.0
   eslint-config-prettier: ^8.5.0
@@ -29,6 +30,7 @@ specifiers:
 
 dependencies:
   axios: registry.npmmirror.com/axios/0.26.1
+  echarts: registry.npmmirror.com/echarts/5.3.2
   element-plus: registry.npmmirror.com/element-plus/2.1.8_vue@3.2.31
   pinia: registry.npmmirror.com/pinia/2.0.13_typescript@4.6.3+vue@3.2.31
   vue: registry.npmmirror.com/vue/3.2.31
@@ -1065,6 +1067,15 @@ packages:
       domhandler: registry.npmmirror.com/domhandler/4.3.1
     dev: true
 
+  registry.npmmirror.com/echarts/5.3.2:
+    resolution: {integrity: sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/echarts/-/echarts-5.3.2.tgz}
+    name: echarts
+    version: 5.3.2
+    dependencies:
+      tslib: registry.npmmirror.com/tslib/2.3.0
+      zrender: registry.npmmirror.com/zrender/5.3.1
+    dev: false
+
   registry.npmmirror.com/element-plus/2.1.8_vue@3.2.31:
     resolution: {integrity: sha512-hwFtzw0R5lKMhWf3oVvSU/ucfN8RiY8DRaRWo6LktX4RlWWA2QjKfDXtISBi5Rb303Ny4I0Sgz0CA1Fd4Z2GGg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.1.8.tgz}
     id: registry.npmmirror.com/element-plus/2.1.8
@@ -2819,6 +2830,12 @@ packages:
     version: 1.14.1
     dev: true
 
+  registry.npmmirror.com/tslib/2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz}
+    name: tslib
+    version: 2.3.0
+    dev: false
+
   registry.npmmirror.com/tsutils/3.21.0_typescript@4.6.3:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tsutils/-/tsutils-3.21.0.tgz}
     id: registry.npmmirror.com/tsutils/3.21.0
@@ -3302,3 +3319,11 @@ packages:
     name: yallist
     version: 4.0.0
     dev: true
+
+  registry.npmmirror.com/zrender/5.3.1:
+    resolution: {integrity: sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/zrender/-/zrender-5.3.1.tgz}
+    name: zrender
+    version: 5.3.1
+    dependencies:
+      tslib: registry.npmmirror.com/tslib/2.3.0
+    dev: false
diff --git a/src/components/echartsComponent.vue b/src/components/echartsComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b015d5dee8c8ff0150a8daf15567bbe5354aaaef
--- /dev/null
+++ b/src/components/echartsComponent.vue
@@ -0,0 +1,122 @@
+<template>
+  <div :id="id" class="echart-div"></div>
+</template>
+
+<!-- <script lang="ts">
+import { defineComponent, onMounted, onUnmounted, PropType, ref, toRefs, watch } from "vue";
+import * as echarts from "echarts";
+import { ECOption } from "@/types/interface";
+export default defineComponent({
+  props: {
+    id: {
+      type: String,
+      default: "echartDiv"
+    },
+    options: {
+      type: Object as PropType<ECOption>,
+      default: Function
+    },
+    theme: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props) {
+    const { options, id, theme } = toRefs(props);
+    let chartDom: echarts.EChartsType | null = null;
+    const handleOptionsChange = () => {
+      if (chartDom != null) {
+        chartDom.setOption({ ...options.value });
+      }
+    };
+    const handleChartResize = () => {
+      if (chartDom != null) {
+        chartDom.resize();
+      }
+    };
+
+    onMounted(() => {
+      chartDom = echarts.init(document.getElementById(id.value)!, theme.value);
+      chartDom.setOption({ ...options.value });
+      window.addEventListener("resize", () => {
+        handleChartResize();
+      });
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", () => {
+        handleChartResize();
+      });
+    });
+    watch(
+      () => options.value,
+      () => {
+        console.log(clientWidth.value, clientHeight.value);
+        handleOptionsChange();
+      },
+      { deep: true }
+    );
+    return {};
+  }
+});
+</script> -->
+
+<script setup lang="ts">
+import { nextTick, onMounted, onUnmounted, PropType, watch } from "vue";
+import * as echarts from "echarts";
+import { ECOption } from "@/types/interface";
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: "echartDiv"
+  },
+  options: {
+    type: Object as PropType<ECOption>,
+    default: Function
+  },
+  theme: {
+    type: String,
+    default: ""
+  }
+});
+
+let chartDom: echarts.EChartsType | null = null;
+const handleOptionsChange = () => {
+  if (chartDom != null) {
+    chartDom.setOption({ ...props.options });
+  }
+};
+const handleChartResize = () => {
+  if (chartDom != null) {
+    chartDom.resize();
+  }
+};
+
+onMounted(() => {
+  chartDom = echarts.init(document.getElementById(props.id)!, props.theme);
+  chartDom.setOption({ ...props.options });
+  window.addEventListener("resize", () => {
+    handleChartResize();
+  });
+});
+onUnmounted(() => {
+  window.removeEventListener("resize", () => {
+    handleChartResize();
+  });
+});
+
+watch(
+  () => props.options,
+  () => {
+    handleOptionsChange();
+  },
+  { deep: true }
+);
+</script>
+
+<style scoped>
+.echart-div {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 0b4433b11c2a7c5f0c2b4ee50b7506dd95726d37..6560920f057d9d21be0f9c021489869bbdece7b1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -15,6 +15,11 @@ const routes: Array<RouteRecordRaw> = [
     path: "/reactive",
     name: "Reactive",
     component: () => import("@/views/reactive/index.vue")
+  },
+  {
+    path: "/echarts",
+    name: "Echarts",
+    component: () => import("@/views/echarts/index.vue")
   }
 ];
 
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 093f9568edf39e8f991de2741867a9e1a48aa0fd..48e186cbe43c3e7b5affdd3555315ab7d6c90204 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -1,3 +1,20 @@
+import * as echarts from "echarts";
+import { BarSeriesOption, LineSeriesOption } from "echarts/charts";
+import {
+  TitleComponentOption,
+  TooltipComponentOption,
+  GridComponentOption,
+  DatasetComponentOption
+} from "echarts/components";
+export type ECOption = echarts.ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+>;
+
 export interface IObject {
   [key: string]: any;
 }
diff --git a/src/views/echarts/echartTheme.vue b/src/views/echarts/echartTheme.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b8487f7daa8d1e4aed7b999be851899f8b685fbb
--- /dev/null
+++ b/src/views/echarts/echartTheme.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import EchartsComponent from "@/components/echartsComponent.vue";
+import { ECOption } from "@/types/interface";
+
+const lightOptions = reactive({
+  title: {
+    text: "主题Demo"
+  },
+  tooltip: {},
+  xAxis: {
+    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+  },
+  yAxis: {},
+  series: [
+    {
+      name: "销量",
+      type: "bar",
+      data: [5, 20, 36, 10, 10, 20]
+    }
+  ]
+} as ECOption);
+
+setTimeout(() => {
+  lightOptions.series = {
+    name: "销量",
+    type: "bar",
+    data: [0, 0, 1, 10, 20, 30]
+  };
+  console.log(lightOptions);
+}, 1000);
+</script>
+
+<template>
+  <div class="container">
+    <!-- 亮色主题 -->
+    <EchartsComponent :id="'lightTheme'" :options="lightOptions" class="echarts-demo light-theme"> </EchartsComponent>
+    <!-- 黑暗主题 -->
+    <EchartsComponent
+      :id="'darkTheme'"
+      :options="lightOptions"
+      :theme="'dark'"
+      class="echarts-demo light-theme"
+    ></EchartsComponent>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+}
+.echarts-demo {
+  height: 300px;
+  width: 40%;
+  margin: 20px;
+}
+</style>
diff --git a/src/views/echarts/index.vue b/src/views/echarts/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6f89683509de8dea33ec9494d3be313b2fa0a1e2
--- /dev/null
+++ b/src/views/echarts/index.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import echartThemeVue from "./echartTheme.vue";
+import ringChartsVue from "./ringCharts.vue";
+import type { TabsPaneContext } from "element-plus";
+
+const activeName = ref("theme");
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event);
+};
+</script>
+
+<template>
+  <div>echarts</div>
+
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="黑白主题" name="theme" :lazy="true">
+      <echart-theme-vue></echart-theme-vue>
+    </el-tab-pane>
+    <el-tab-pane label="环形图" name="ring" :lazy="true">
+      <ring-charts-vue></ring-charts-vue>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/echarts/ringCharts.vue b/src/views/echarts/ringCharts.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3d06c1835b59acea378a142b14935a4c569e81ef
--- /dev/null
+++ b/src/views/echarts/ringCharts.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import EchartsComponent from "@/components/echartsComponent.vue";
+import { ECOption } from "@/types/interface";
+import * as echarts from "echarts";
+
+const chartData = {
+  total: 100,
+  value: 77
+};
+const total = chartData.total;
+const value = [chartData.value];
+const color = "rgba(149, 212, 117)";
+const bgColor = "rgba(149, 212, 117,.1)";
+
+const lightOptions = reactive({
+  angleAxis: {
+    max: total,
+    clockwise: true, // 逆时针
+    // 隐藏刻度线
+    show: false
+  },
+  radiusAxis: {
+    type: "category",
+    show: true,
+    axisLabel: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  polar: {
+    center: ["50%", "50%"],
+    radius: "100%" //图形大小
+  },
+  series: [
+    {
+      stack: "round",
+      type: "bar",
+      data: value,
+      showBackground: false,
+      coordinateSystem: "polar",
+      roundCap: true,
+      barWidth: 15,
+      silent: true,
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: bgColor
+            },
+            {
+              offset: 1,
+              color: color
+            }
+          ])
+        }
+      }
+    },
+    {
+      stack: "round",
+      type: "bar",
+      data: [0.01],
+      showBackground: false,
+      backgroundStyle: {
+        shadowColor: "rgba(0, 0, 0, 0.2)",
+        shadowBlur: 10,
+        shadowOffsetY: 2
+      },
+      coordinateSystem: "polar",
+      roundCap: true,
+      barWidth: 15,
+      itemStyle: {
+        color: color,
+        borderColor: color,
+        borderWidth: 5
+      }
+    }
+  ]
+} as ECOption);
+</script>
+
+<template>
+  <div class="container">
+    <!-- 亮色主题 -->
+    <EchartsComponent :id="'lightRing'" :options="lightOptions" class="echarts-demo light-theme"> </EchartsComponent>
+    <!-- 黑暗主题 -->
+    <EchartsComponent
+      :id="'darkRing'"
+      :options="lightOptions"
+      :theme="'dark'"
+      class="echarts-demo light-theme"
+    ></EchartsComponent>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+}
+.echarts-demo {
+  height: 300px;
+  width: 40%;
+  margin: 20px;
+}
+</style>