diff --git a/.editorconfig b/.editorconfig
index da599f40..9d08a1a8 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -3,10 +3,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
-
-[*.md]
-trim_trailing_whitespace = false
diff --git a/.env.example b/.env.example
index ab9e6cd5..7ea58d8f 100644
--- a/.env.example
+++ b/.env.example
@@ -10,10 +10,8 @@ VITE_APP_API_BASEURL = /
 VITE_APP_DEBUG_TOOL =
 
 # 是否在打包时启用 Mock
-VITE_BUILD_MOCK = true
+VITE_BUILD_MOCK = false
 # 是否在打包时生成 sourcemap
 VITE_BUILD_SOURCEMAP = false
-# 是否在打包时删除 console 代码
-VITE_BUILD_DROP_CONSOLE = true
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip,brotli
diff --git a/.env.production b/.env.production
deleted file mode 100644
index 17fad7c5..00000000
--- a/.env.production
+++ /dev/null
@@ -1,17 +0,0 @@
-NODE_ENV = production
-
-# 页面标题
-VITE_APP_TITLE = Fantastic-admin 基础版
-# 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = /
-# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
-VITE_APP_DEBUG_TOOL =
-
-# 是否在打包时启用 Mock
-VITE_BUILD_MOCK = false
-# 是否在打包时生成 sourcemap
-VITE_BUILD_SOURCEMAP = false
-# 是否在打包时删除 console 代码
-VITE_BUILD_DROP_CONSOLE = true
-# 是否在打包时开启压缩，支持 gzip 和 brotli
-VITE_BUILD_COMPRESS = gzip,brotli
diff --git a/.env.test b/.env.test
deleted file mode 100644
index 9a2b3b61..00000000
--- a/.env.test
+++ /dev/null
@@ -1,17 +0,0 @@
-NODE_ENV = production
-
-# 页面标题
-VITE_APP_TITLE = Fantastic-admin 专业版
-# 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = /
-# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
-VITE_APP_DEBUG_TOOL =
-
-# 是否在打包时启用 Mock
-VITE_BUILD_MOCK = true
-# 是否在打包时生成 sourcemap
-VITE_BUILD_SOURCEMAP = true
-# 是否在打包时删除 console 代码
-VITE_BUILD_DROP_CONSOLE = true
-# 是否在打包时开启压缩，支持 gzip 和 brotli
-VITE_BUILD_COMPRESS = gzip,brotli
diff --git a/.eslintignore b/.eslintignore
index 58ce8430..1eae0cf6 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,2 @@
 dist/
 node_modules/
-babel.config.js
-.eslintrc.js
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 00000000..09c2e423
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "@antfu"
+}
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 3f4cb551..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,101 +0,0 @@
-module.exports = {
-    root: true,
-    env: {
-        browser: true,
-        es6: true
-    },
-    globals: {
-        __dirname: true,
-        process: true,
-        require: true,
-        module: true,
-        // element-plus
-        ElMessage: true,
-        ElMessageBox: true,
-        ElNotification: true,
-        ElLoading: true
-    },
-    extends: [
-        'plugin:vue/vue3-recommended',
-        'plugin:vue/vue3-strongly-recommended',
-        'eslint:recommended',
-        './.eslintrc-auto-import.json'
-    ],
-    parser: 'vue-eslint-parser',
-    parserOptions: {
-        ecmaVersion: '2020',
-        ecmaFeatures: {
-            jsx: true
-        }
-    },
-    rules: {
-        // 代码风格
-        'block-spacing': [2, 'always'],
-        'brace-style': [2, '1tbs', {
-            'allowSingleLine': true
-        }],
-        'comma-spacing': [2, {
-            'before': false,
-            'after': true
-        }],
-        'comma-dangle': [2, 'never'],
-        'comma-style': [2, 'last'],
-        'computed-property-spacing': [2, 'never'],
-        'indent': [2, 4, {
-            'SwitchCase': 1
-        }],
-        'key-spacing': [2, {
-            'beforeColon': false,
-            'afterColon': true
-        }],
-        'keyword-spacing': [2, {
-            'before': true,
-            'after': true
-        }],
-        'linebreak-style': 0,
-        'multiline-ternary': [2, 'always-multiline'],
-        'no-multiple-empty-lines': [2, {
-            'max': 1
-        }],
-        'no-unneeded-ternary': [2, {
-            'defaultAssignment': false
-        }],
-        'quotes': [2, 'single'],
-        'semi': [2, 'never'],
-        'space-before-blocks': [2, 'always'],
-        'space-before-function-paren': [2, 'never'],
-        'space-in-parens': [2, 'never'],
-        'space-infix-ops': 2,
-        'space-unary-ops': [2, {
-            'words': true,
-            'nonwords': false
-        }],
-        'spaced-comment': [2, 'always', {
-            'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
-        }],
-        'switch-colon-spacing': [2, {
-            'after': true,
-            'before': false
-        }],
-        'object-curly-spacing': [2, 'always'],
-        // ES6
-        'arrow-parens': [2, 'as-needed'],
-        'arrow-spacing': [2, {
-            'before': true,
-            'after': true
-        }],
-        // Vue - https://github.com/vuejs/eslint-plugin-vue
-        'vue/multi-word-component-names': 0,
-        'vue/html-indent': [2, 4],
-        'vue/no-v-html': 0,
-        'vue/max-attributes-per-line': 0,
-        'vue/require-default-prop': 0,
-        'vue/singleline-html-element-content-newline': 0,
-        'vue/require-explicit-emits': [2, {
-            'allowProps': true
-        }],
-        'vue/script-indent': [2, 4, {
-            'switchCase': 1
-        }]
-    }
-};
diff --git a/.gitignore b/.gitignore
index c66a0a66..165d220b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,5 @@ node_modules
 dist*
 dist-ssr
 *.local
-.eslintrc-auto-import.json
-public/icons
 src/assets/sprites/*.*
+!src/assets/sprites/.gitkeep
diff --git a/.lintstagedrc b/.lintstagedrc
index b35aaba8..fc89276a 100644
--- a/.lintstagedrc
+++ b/.lintstagedrc
@@ -1,5 +1,5 @@
 {
-    "src/**/*.{js,jsx}": "eslint --fix",
-    "src/**/*.{css,scss}": "stylelint --fix --allow-empty-input",
-    "src/**/*.vue": ["eslint --fix", "stylelint --fix --allow-empty-input"]
+  "src/**/*.{js,jsx,ts,tsx}": "eslint --fix",
+  "src/**/*.{css,scss}": "stylelint --fix --allow-empty-input",
+  "src/**/*.vue": ["eslint --fix", "stylelint --fix --allow-empty-input"]
 }
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000..cf040424
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/.stylelintrc b/.stylelintrc
index a848b996..f397ec98 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,48 +1,23 @@
 {
-    "extends": [
-        "stylelint-config-standard",
-        "stylelint-config-recommended-vue/scss"
-    ],
-    "overrides": [
-        {
-            "files": ["**/*.scss"],
-            "customSyntax": "postcss-scss"
-        }
-    ],
-    "plugins": [
-        "stylelint-scss"
-    ],
-    "rules": {
-        "indentation": 4,
-        "rule-empty-line-before": "never",
-        "at-rule-empty-line-before": "never",
-        "at-rule-no-unknown": null,
-        "no-descending-specificity": null,
-        "selector-pseudo-class-no-unknown": null,
-        "property-no-unknown": null,
-        "font-family-no-missing-generic-family-keyword": null,
-        "selector-id-pattern": null,
-        "selector-class-pattern": null,
-        "scss/no-global-function-names": null,
-        "scss/at-import-partial-extension": null,
-        "function-no-unknown": [
-            true,
-            {
-                "ignoreFunctions": [
-                    "v-bind",
-                    "lighten",
-                    "darken"
-                ]
-            }
-        ],
-        "property-no-vendor-prefix": [
-            true,
-            {
-                "ignoreProperties": [
-                    "mask-image"
-                ]
-            }
-        ],
-        "max-line-length": null
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-standard-vue/scss"
+  ],
+  "overrides": [
+    {
+      "files": ["**/*.scss"],
+      "customSyntax": "postcss-scss"
     }
+  ],
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "no-descending-specificity": null,
+    "property-no-unknown": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "selector-class-pattern": null,
+    "max-line-length": null
+  }
 }
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index bd128e51..fef58956 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,9 +1,9 @@
 {
-    "recommendations": [
-        "EditorConfig.EditorConfig",
-        "mikestead.dotenv",
-        "dbaeumer.vscode-eslint",
-        "stylelint.vscode-stylelint",
-        "vue.volar"
-    ]
+  "recommendations": [
+    "EditorConfig.EditorConfig",
+    "mikestead.dotenv",
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint",
+    "vue.volar"
+  ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f1783033..e5e29ce4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
-    "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true,
-        "source.fixAll.stylelint": true
-    },
-    "stylelint.validate": ["css", "scss", "vue"]
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": true
+  },
+  "stylelint.validate": ["css", "scss", "vue"]
 }
diff --git a/index.html b/index.html
index b673219b..c801c4c5 100644
--- a/index.html
+++ b/index.html
@@ -1,78 +1,40 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" href="/favicon.ico" />
-        <link rel="stylesheet" href="/index.css" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title><%= title %></title>
-        <%- copyrightScript %>
-        <% if (appMode == 'example') { %>
-            <script>
-                var _hmt = _hmt || [];
-                _hmt.push(['_requirePlugin', 'UrlChangeTracker', {
-                    shouldTrackUrlChange: function(newPath, oldPath) {
-                        return newPath && oldPath;
-                    }
-                }]);
-                (function() {
-                    var hm = document.createElement("script");
-                    hm.src = "https://hm.baidu.com/hm.js?c31a3e8267162de8420bc73e06d62463";
-                    var s = document.getElementsByTagName("script")[0];
-                    s.parentNode.insertBefore(hm, s);
-                })();
-            </script>
-        <% } %>
-    </head>
-    <body>
-        <div id="app">
-            <div class="fantastic-admin-home">
-                <div class="loading">
-                    <div class="square"></div>
-                    <div class="square"></div>
-                    <div class="square"></div>
-                    <div class="square"></div>
-                </div>
-                <div class="text"><%= title %>载入中…</div>
-            </div>
-            <div id="browser-upgrade">
-                <div class="title">为了您的体验，推荐使用以下浏览器</div>
-                <div class="browsers">
-                    <a href="https://www.microsoft.com/edge" target="_blank" class="browser">
-                        <img class="browser-icon" src="/browser_upgrade/edge.png" />
-                        <div class="browser-name">Mircosoft Edge</div>
-                    </a>
-                    <a href="https://www.google.cn/chrome/" target="_blank" class="browser">
-                        <img class="browser-icon" src="/browser_upgrade/chrome.png" />
-                        <div class="browser-name">Google Chrome</div>
-                    </a>
-                </div>
-            </div>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/browser_upgrade/index.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= title %></title>
+    <%- copyrightScript %>
+  </head>
+  <body>
+    <div id="app">
+      <div class="fantastic-admin-home">
+        <div class="loading">
+          <div class="square"></div>
+          <div class="square"></div>
+          <div class="square"></div>
+          <div class="square"></div>
         </div>
-        <script>
-            if(!!window.ActiveXObject || "ActiveXObject" in window) {
-                document.getElementById('browser-upgrade').style.display = 'block'
-            } else {
-                var Loading = document.querySelector('.loading')
-                Loading.classList.add('animate')
-                Loading.addEventListener('animationend', function() {
-                    setTimeout(function() {
-                        Loading.classList.remove('animate')
-                    }, 600)
-                    setTimeout(function() {
-                        Loading.classList.add('animate')
-                    }, 1000)
-                })
-            }
-        </script>
-        <script type="module" src="/src/main.js"></script>
-        <% if (debugTool == 'eruda') { %>
-            <script src="//unpkg.com/eruda/eruda.js"></script>
-            <script>eruda.init();</script>
-        <% } %>
-        <% if (debugTool == 'vconsole') { %>
-            <script src="//unpkg.com/vconsole/dist/vconsole.min.js"></script>
-            <script>new VConsole();</script>
-        <% } %>
-    </body>
+        <div class="text"><%= title %>载入中…</div>
+      </div>
+      <div id="browser-upgrade">
+        <div class="title">为了您的体验，推荐使用以下浏览器</div>
+        <div class="browsers">
+          <a href="https://www.microsoft.com/edge" target="_blank" class="browser">
+            <img class="browser-icon" src="/browser_upgrade/edge.png" />
+            <div class="browser-name">Mircosoft Edge</div>
+          </a>
+          <a href="https://www.google.cn/chrome/" target="_blank" class="browser">
+            <img class="browser-icon" src="/browser_upgrade/chrome.png" />
+            <div class="browser-name">Google Chrome</div>
+          </a>
+        </div>
+      </div>
+    </div>
+    <%- loadingScript %>
+    <script type="module" src="/src/main.ts"></script>
+    <%- devtoolScript %>
+  </body>
 </html>
diff --git a/jsconfig.json b/jsconfig.json
deleted file mode 100644
index bfb2bc61..00000000
--- a/jsconfig.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "es2017",
-        "allowSyntheticDefaultImports": false,
-        "baseUrl": "./",
-        "paths": {
-            "@/*": ["src/*"]
-        },
-        "jsx": "preserve"
-    },
-    "exclude": ["node_modules", "dist", "dist-test"]
-}
diff --git a/package.json b/package.json
index df044936..edba3dba 100644
--- a/package.json
+++ b/package.json
@@ -1,79 +1,77 @@
 {
-    "name": "fantastic-admin",
-    "version": "0.1.0",
-    "scripts": {
-        "dev": "vite",
-        "build:test": "vite build --mode test",
-        "build": "vite build",
-        "build:example": "vite build --mode example",
-        "serve:test": "http-server ./dist-test -o",
-        "serve": "http-server ./dist -o",
-        "serve:example": "http-server ./dist-example -o",
-        "svgo": "svgo -f src/assets/icons",
-        "new": "plop",
-        "lint:eslint": "eslint src/**/*.{js,vue} --fix",
-        "lint:stylelint": "stylelint src/**/*.{css,scss,vue} --fix",
-        "prepare": "husky install",
-        "postinstall": "esno scripts/prepare.js",
-        "preinstall": "npx only-allow pnpm"
-    },
-    "dependencies": {
-        "@tinymce/tinymce-vue": "^5.0.0",
-        "@vueuse/core": "^9.2.0",
-        "@vueuse/integrations": "^9.2.0",
-        "axios": "^0.27.2",
-        "dayjs": "^1.11.5",
-        "element-plus": "^2.2.16",
-        "hotkeys-js": "^3.10.0",
-        "js-cookie": "^3.0.1",
-        "mavon-editor": "^3.0.0-beta",
-        "mitt": "^3.0.0",
-        "mockjs": "^1.1.0",
-        "nprogress": "^0.2.0",
-        "path-browserify": "^1.0.1",
-        "path-to-regexp": "^6.2.1",
-        "pinia": "^2.0.22",
-        "qs": "^6.11.0",
-        "tinymce": "^6.2.0",
-        "vue": "^3.2.39",
-        "vue-router": "^4.1.3"
-    },
-    "devDependencies": {
-        "@iconify-json/ep": "^1.1.7",
-        "@iconify/vue": "^4.0.0",
-        "@vitejs/plugin-vue": "^3.1.0",
-        "@vitejs/plugin-vue-jsx": "^2.0.1",
-        "@vue/compiler-sfc": "^3.2.39",
-        "eslint": "^8.23.1",
-        "eslint-plugin-vue": "^9.3.0",
-        "esno": "^0.16.3",
-        "fs-extra": "^10.1.0",
-        "http-server": "^14.1.1",
-        "husky": "^8.0.1",
-        "lint-staged": "^13.0.3",
-        "plop": "^3.1.1",
-        "postcss-html": "^1.5.0",
-        "postcss-scss": "^4.0.5",
-        "sass": "^1.54.9",
-        "stylelint": "^14.10.0",
-        "stylelint-config-recommended-scss": "^7.0.0",
-        "stylelint-config-recommended-vue": "^1.4.0",
-        "stylelint-config-standard": "^28.0.0",
-        "stylelint-scss": "^4.3.0",
-        "svgo": "^2.8.0",
-        "unplugin-auto-import": "^0.11.2",
-        "unplugin-vue-components": "^0.22.7",
-        "vite": "^3.1.1",
-        "vite-plugin-banner": "^0.5.0",
-        "vite-plugin-compression": "^0.5.1",
-        "vite-plugin-html": "^3.2.0",
-        "vite-plugin-mock": "^2.9.6",
-        "vite-plugin-pages": "^0.26.0",
-        "vite-plugin-restart": "^0.2.0",
-        "vite-plugin-spritesmith": "^0.1.1",
-        "vite-plugin-svg-icons": "^2.0.1",
-        "vite-plugin-vue-layouts": "^0.6.0",
-        "vite-plugin-vue-setup-extend": "^0.4.0",
-        "vue-eslint-parser": "^9.1.0"
-    }
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build:example": "vue-tsc --noEmit && vite build --mode example",
+    "serve:example": "http-server ./dist-example -o",
+    "svgo": "svgo -f src/assets/icons",
+    "new": "plop",
+    "lint:eslint": "eslint src/**/*.{ts,tsx,vue} --fix",
+    "lint:stylelint": "stylelint src/**/*.{css,scss,vue} --fix",
+    "prepare": "husky install",
+    "postinstall": "esno scripts/prepare.js",
+    "preinstall": "npx only-allow pnpm"
+  },
+  "dependencies": {
+    "@tinymce/tinymce-vue": "^5.0.0",
+    "@vueuse/core": "^9.2.0",
+    "@vueuse/integrations": "^9.2.0",
+    "axios": "^0.27.2",
+    "dayjs": "^1.11.5",
+    "element-plus": "^2.2.17",
+    "hotkeys-js": "^3.10.0",
+    "lodash-es": "^4.17.21",
+    "mitt": "^3.0.0",
+    "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
+    "path-browserify": "^1.0.1",
+    "path-to-regexp": "^6.2.1",
+    "pinia": "^2.0.22",
+    "qs": "^6.11.0",
+    "tinymce": "^6.2.0",
+    "vue": "^3.2.39",
+    "vue-router": "^4.1.5"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.27.0",
+    "@iconify-json/ep": "^1.1.7",
+    "@iconify/vue": "^4.0.0",
+    "@types/nprogress": "^0.2.0",
+    "@types/path-browserify": "^1.0.0",
+    "@types/qs": "^6.9.7",
+    "@vitejs/plugin-vue": "^3.1.0",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "autoprefixer": "^10.4.12",
+    "eslint": "^8.24.0",
+    "esno": "^0.16.3",
+    "fs-extra": "^10.1.0",
+    "http-server": "^14.1.1",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "plop": "^3.1.1",
+    "postcss-html": "^1.5.0",
+    "postcss-scss": "^4.0.5",
+    "sass": "^1.55.0",
+    "stylelint": "^14.12.1",
+    "stylelint-config-standard": "^28.0.0",
+    "stylelint-config-standard-scss": "^5.0.0",
+    "stylelint-config-standard-vue": "^1.0.0",
+    "stylelint-scss": "^4.3.0",
+    "svgo": "^2.8.0",
+    "typescript": "^4.8.3",
+    "unplugin-auto-import": "^0.11.2",
+    "unplugin-vue-components": "^0.22.7",
+    "vite": "^3.1.3",
+    "vite-plugin-banner": "^0.5.0",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-pages": "^0.26.0",
+    "vite-plugin-restart": "^0.2.0",
+    "vite-plugin-spritesmith": "^0.1.1",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-layouts": "^0.6.0",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-tsc": "^0.40.13"
+  }
 }
diff --git a/plop-templates/component/index.hbs b/plop-templates/component/index.hbs
index 2ca042bb..cc1916c9 100644
--- a/plop-templates/component/index.hbs
+++ b/plop-templates/component/index.hbs
@@ -1,12 +1,11 @@
-<script setup{{#if isGlobal}} name="{{ properCase name }}"{{/if}}>
-// const router = useRouter()
-// const route = useRoute()
+<script lang="ts" setup{{#if isGlobal}} name="{{ properCase name }}"{{/if}}>
+// const proxy = useCurrentInstance()
 </script>
 
 <template>
-    <div>
-        <!-- 内容区 -->
-    </div>
+  <div>
+    <!-- 内容区 -->
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/plop-templates/component/prompt.js b/plop-templates/component/prompt.js
index 13739d19..43a2f20c 100644
--- a/plop-templates/component/prompt.js
+++ b/plop-templates/component/prompt.js
@@ -1,63 +1,64 @@
 const fs = require('fs')
 
 function getFolder(path) {
-    let components = []
-    const files = fs.readdirSync(path)
-    files.forEach(function(item) {
-        let stat = fs.lstatSync(path + '/' + item)
-        if (stat.isDirectory() === true && item != 'components') {
-            components.push(path + '/' + item)
-            components.push.apply(components, getFolder(path + '/' + item))
-        }
-    })
-    return components
+  const components = []
+  const files = fs.readdirSync(path)
+  files.forEach((item) => {
+    const stat = fs.lstatSync(`${path}/${item}`)
+    if (stat.isDirectory() === true && item !== 'components') {
+      components.push(`${path}/${item}`)
+      components.push(...getFolder(`${path}/${item}`))
+    }
+  })
+  return components
 }
 
 module.exports = {
-    description: '创建组件',
-    prompts: [
-        {
-            type: 'confirm',
-            name: 'isGlobal',
-            message: '是否为全局组件',
-            default: false
-        },
-        {
-            type: 'list',
-            name: 'path',
-            message: '请选择组件创建目录',
-            choices: getFolder('src/views'),
-            when: answers => {
-                return !answers.isGlobal
-            }
-        },
-        {
-            type: 'input',
-            name: 'name',
-            message: '请输入组件名称',
-            validate: v => {
-                if (!v || v.trim === '') {
-                    return '组件名称不能为空'
-                } else {
-                    return true
-                }
-            }
-        }
-    ],
-    actions: data => {
-        let path = ''
-        if (data.isGlobal) {
-            path = 'src/components/{{properCase name}}/index.vue'
-        } else {
-            path = `${data.path}/components/{{properCase name}}/index.vue`
-        }
-        const actions = [
-            {
-                type: 'add',
-                path: path,
-                templateFile: 'plop-templates/component/index.hbs'
-            }
-        ]
-        return actions
-    }
+  description: '创建组件',
+  prompts: [
+    {
+      type: 'confirm',
+      name: 'isGlobal',
+      message: '是否为全局组件',
+      default: false,
+    },
+    {
+      type: 'list',
+      name: 'path',
+      message: '请选择组件创建目录',
+      choices: getFolder('src/views'),
+      when: (answers) => {
+        return !answers.isGlobal
+      },
+    },
+    {
+      type: 'input',
+      name: 'name',
+      message: '请输入组件名称',
+      validate: (v) => {
+        if (!v || v.trim === '')
+          return '组件名称不能为空'
+
+        else
+          return true
+      },
+    },
+  ],
+  actions: (data) => {
+    let path = ''
+    if (data.isGlobal)
+      path = 'src/components/{{properCase name}}/index.vue'
+
+    else
+      path = `${data.path}/components/{{properCase name}}/index.vue`
+
+    const actions = [
+      {
+        type: 'add',
+        path,
+        templateFile: 'plop-templates/component/index.hbs',
+      },
+    ]
+    return actions
+  },
 }
diff --git a/plop-templates/mock/mock.hbs b/plop-templates/mock/mock.hbs
deleted file mode 100644
index 4999f424..00000000
--- a/plop-templates/mock/mock.hbs
+++ /dev/null
@@ -1,80 +0,0 @@
-import Mock from 'mockjs'
-
-const AllList = []
-for (let i = 0; i < 50; i++) {
-    AllList.push(Mock.mock({
-        id: '@id',
-        title: '@ctitle(10, 20)'
-    }))
-}
-
-export default [
-    {
-        url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/list',
-        method: 'get',
-        response: option => {
-            let { title, from, limit } = option.query
-            from = ~~from
-            limit = ~~limit
-            let list = AllList.filter(item => {
-                return title ? item.title.includes(title) : true
-            })
-            let pageList = list.filter((item, index) => {
-                return index >= from && index < (from + limit)
-            })
-            return {
-                error: '',
-                status: 1,
-                data: {
-                    list: pageList,
-                    total: list.length
-                }
-            }
-        }
-    },
-    {
-        url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/detail',
-        method: 'get',
-        response: option => {
-            let info = AllList.filter(item => item.id == option.query.id)
-            return {
-                error: '',
-                status: 1,
-                data: info[0]
-            }
-        }
-    },
-    {
-        url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/create',
-        method: 'post',
-        response: {
-            error: '',
-            status: 1,
-            data: {
-                isSuccess: true
-            }
-        }
-    },
-    {
-        url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/edit',
-        method: 'post',
-        response: {
-            error: '',
-            status: 1,
-            data: {
-                isSuccess: true
-            }
-        }
-    },
-    {
-        url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/delete',
-        method: 'post',
-        response: {
-            error: '',
-            status: 1,
-            data: {
-                isSuccess: true
-            }
-        }
-    }
-]
diff --git a/plop-templates/mock/prompt.js b/plop-templates/mock/prompt.js
deleted file mode 100644
index 5d1c2f96..00000000
--- a/plop-templates/mock/prompt.js
+++ /dev/null
@@ -1,43 +0,0 @@
-const path = require('path')
-const fs = require('fs')
-
-function getFolder(path) {
-    let components = []
-    const files = fs.readdirSync(path)
-    files.forEach(function(item) {
-        let stat = fs.lstatSync(path + '/' + item)
-        if (stat.isDirectory() === true && item != 'components') {
-            components.push(path + '/' + item)
-            components.push.apply(components, getFolder(path + '/' + item))
-        }
-    })
-    return components
-}
-
-module.exports = {
-    description: '创建标准模块 Mock',
-    prompts: [
-        {
-            type: 'list',
-            name: 'path',
-            message: '请选择模块目录',
-            choices: getFolder('src/views')
-        }
-    ],
-    actions: data => {
-        let pathArr = path.relative('src/views', data.path).split('\\')
-        let moduleName = pathArr.pop()
-        let relativePath = pathArr.join('/')
-        const actions = []
-        actions.push({
-            type: 'add',
-            path: pathArr.length == 0 ? 'src/mock/{{moduleName}}.js' : `src/mock/${pathArr.join('.')}.{{moduleName}}.js`,
-            templateFile: 'plop-templates/mock/mock.hbs',
-            data: {
-                relativePath,
-                moduleName
-            }
-        })
-        return actions
-    }
-}
diff --git a/plop-templates/page/index.hbs b/plop-templates/page/index.hbs
index 390fefb3..1dbd3510 100644
--- a/plop-templates/page/index.hbs
+++ b/plop-templates/page/index.hbs
@@ -1,15 +1,13 @@
-<script setup name="{{ properCase componentName }}">
+<script lang="ts" setup name="{{ properCase componentName }}">
+// const proxy = useCurrentInstance()
 // const router = useRouter()
 // const route = useRoute()
 </script>
 
 <template>
-    <div>
-        <page-header title="{{ cname }}" />
-        <page-main>
-            页面内容区域
-        </page-main>
-    </div>
+  <div>
+    页面内容区域
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 8e631236..0f0026c0 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -2,60 +2,52 @@ const path = require('path')
 const fs = require('fs')
 
 function getFolder(path) {
-    let components = []
-    const files = fs.readdirSync(path)
-    files.forEach(function(item) {
-        let stat = fs.lstatSync(path + '/' + item)
-        if (stat.isDirectory() === true && item != 'components') {
-            components.push(path + '/' + item)
-            components.push.apply(components, getFolder(path + '/' + item))
-        }
-    })
-    return components
+  const components = []
+  const files = fs.readdirSync(path)
+  files.forEach((item) => {
+    const stat = fs.lstatSync(`${path}/${item}`)
+    if (stat.isDirectory() === true && item !== 'components') {
+      components.push(`${path}/${item}`)
+      components.push(...getFolder(`${path}/${item}`))
+    }
+  })
+  return components
 }
 
 module.exports = {
-    description: '创建页面',
-    prompts: [
-        {
-            type: 'list',
-            name: 'path',
-            message: '请选择页面创建目录',
-            choices: getFolder('src/views')
+  description: '创建页面',
+  prompts: [
+    {
+      type: 'list',
+      name: 'path',
+      message: '请选择页面创建目录',
+      choices: getFolder('src/views'),
+    },
+    {
+      type: 'input',
+      name: 'name',
+      message: '请输入文件名',
+      validate: (v) => {
+        if (!v || v.trim === '')
+          return '文件名不能为空'
+
+        else
+          return true
+      },
+    },
+  ],
+  actions: (data) => {
+    const relativePath = path.relative('src/views', data.path)
+    const actions = [
+      {
+        type: 'add',
+        path: `${data.path}/{{dotCase name}}.vue`,
+        templateFile: 'plop-templates/page/index.hbs',
+        data: {
+          componentName: `${relativePath} ${data.name}`,
         },
-        {
-            type: 'input',
-            name: 'name',
-            message: '请输入文件名',
-            validate: v => {
-                if (!v || v.trim === '') {
-                    return '文件名不能为空'
-                } else if (v == 'list' || v == 'detail') {
-                    return 'list 和 detail 为保留关键字，无法直接创建，请通过创建标准模块进行生成'
-                } else {
-                    return true
-                }
-            }
-        },
-        {
-            type: 'input',
-            name: 'cname',
-            message: '请输入页面中文名称',
-            default: '默认页面'
-        }
-    ],
-    actions: data => {
-        let relativePath = path.relative('src/views', data.path)
-        const actions = [
-            {
-                type: 'add',
-                path: `${data.path}/{{dotCase name}}.vue`,
-                templateFile: 'plop-templates/page/index.hbs',
-                data: {
-                    componentName: `${relativePath} ${data.name}`
-                }
-            }
-        ]
-        return actions
-    }
+      },
+    ]
+    return actions
+  },
 }
diff --git a/plop-templates/store/index.hbs b/plop-templates/store/index.hbs
index 838ac111..6be06c7d 100644
--- a/plop-templates/store/index.hbs
+++ b/plop-templates/store/index.hbs
@@ -1,11 +1,11 @@
 const use{{ properCase name }}Store = defineStore(
-    // 唯一ID
-    '{{ camelCase name }}',
-    {
-        state: () => ({}),
-        getters: {},
-        actions: {}
-    }
+  // 唯一ID
+  '{{ camelCase name }}',
+  {
+    state: () => ({}),
+    getters: {},
+    actions: {}
+  }
 )
 
 export default use{{ properCase name }}Store
diff --git a/plop-templates/store/prompt.js b/plop-templates/store/prompt.js
index 9fcef846..7e7b22a8 100644
--- a/plop-templates/store/prompt.js
+++ b/plop-templates/store/prompt.js
@@ -1,27 +1,27 @@
 module.exports = {
-    description: '创建全局状态',
-    prompts: [
-        {
-            type: 'input',
-            name: 'name',
-            message: '请输入模块名称',
-            validate: v => {
-                if (!v || v.trim === '') {
-                    return '模块名称不能为空'
-                } else {
-                    return true
-                }
-            }
-        }
-    ],
-    actions: () => {
-        const actions = [
-            {
-                type: 'add',
-                path: 'src/store/modules/{{camelCase name}}.js',
-                templateFile: 'plop-templates/store/index.hbs'
-            }
-        ]
-        return actions
-    }
+  description: '创建全局状态',
+  prompts: [
+    {
+      type: 'input',
+      name: 'name',
+      message: '请输入模块名称',
+      validate: (v) => {
+        if (!v || v.trim === '')
+          return '模块名称不能为空'
+
+        else
+          return true
+      },
+    },
+  ],
+  actions: () => {
+    const actions = [
+      {
+        type: 'add',
+        path: 'src/store/modules/{{camelCase name}}.js',
+        templateFile: 'plop-templates/store/index.hbs',
+      },
+    ]
+    return actions
+  },
 }
diff --git a/plopfile.js b/plopfile.js
index f6109325..2103b176 100644
--- a/plopfile.js
+++ b/plopfile.js
@@ -1,7 +1,6 @@
-module.exports = function(plop) {
-    plop.setWelcomeMessage('请选择需要创建的模式：')
-    plop.setGenerator('page', require('./plop-templates/page/prompt'))
-    plop.setGenerator('component', require('./plop-templates/component/prompt'))
-    plop.setGenerator('store', require('./plop-templates/store/prompt'))
-    plop.setGenerator('mock', require('./plop-templates/mock/prompt'))
+module.exports = function (plop) {
+  plop.setWelcomeMessage('请选择需要创建的模式：')
+  plop.setGenerator('page', require('./plop-templates/page/prompt'))
+  plop.setGenerator('component', require('./plop-templates/component/prompt'))
+  plop.setGenerator('store', require('./plop-templates/store/prompt'))
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 06b19872..2826497a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,27 +1,29 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@antfu/eslint-config': ^0.27.0
   '@iconify-json/ep': ^1.1.7
   '@iconify/vue': ^4.0.0
   '@tinymce/tinymce-vue': ^5.0.0
+  '@types/nprogress': ^0.2.0
+  '@types/path-browserify': ^1.0.0
+  '@types/qs': ^6.9.7
   '@vitejs/plugin-vue': ^3.1.0
   '@vitejs/plugin-vue-jsx': ^2.0.1
-  '@vue/compiler-sfc': ^3.2.39
   '@vueuse/core': ^9.2.0
   '@vueuse/integrations': ^9.2.0
+  autoprefixer: ^10.4.12
   axios: ^0.27.2
   dayjs: ^1.11.5
-  element-plus: ^2.2.16
-  eslint: ^8.23.1
-  eslint-plugin-vue: ^9.3.0
+  element-plus: ^2.2.17
+  eslint: ^8.24.0
   esno: ^0.16.3
   fs-extra: ^10.1.0
   hotkeys-js: ^3.10.0
   http-server: ^14.1.1
   husky: ^8.0.1
-  js-cookie: ^3.0.1
   lint-staged: ^13.0.3
-  mavon-editor: ^3.0.0-beta
+  lodash-es: ^4.17.21
   mitt: ^3.0.0
   mockjs: ^1.1.0
   nprogress: ^0.2.0
@@ -32,17 +34,18 @@ specifiers:
   postcss-html: ^1.5.0
   postcss-scss: ^4.0.5
   qs: ^6.11.0
-  sass: ^1.54.9
-  stylelint: ^14.10.0
-  stylelint-config-recommended-scss: ^7.0.0
-  stylelint-config-recommended-vue: ^1.4.0
+  sass: ^1.55.0
+  stylelint: ^14.12.1
   stylelint-config-standard: ^28.0.0
+  stylelint-config-standard-scss: ^5.0.0
+  stylelint-config-standard-vue: ^1.0.0
   stylelint-scss: ^4.3.0
   svgo: ^2.8.0
   tinymce: ^6.2.0
+  typescript: ^4.8.3
   unplugin-auto-import: ^0.11.2
   unplugin-vue-components: ^0.22.7
-  vite: ^3.1.1
+  vite: ^3.1.3
   vite-plugin-banner: ^0.5.0
   vite-plugin-compression: ^0.5.1
   vite-plugin-html: ^3.2.0
@@ -54,8 +57,8 @@ specifiers:
   vite-plugin-vue-layouts: ^0.6.0
   vite-plugin-vue-setup-extend: ^0.4.0
   vue: ^3.2.39
-  vue-eslint-parser: ^9.1.0
-  vue-router: ^4.1.3
+  vue-router: ^4.1.5
+  vue-tsc: ^0.40.13
 
 dependencies:
   '@tinymce/tinymce-vue': 5.0.0_vue@3.2.39
@@ -63,29 +66,31 @@ dependencies:
   '@vueuse/integrations': 9.2.0_ybr6quqgxz4hf2z3q6fk5do3zu
   axios: 0.27.2
   dayjs: 1.11.5
-  element-plus: 2.2.16_vue@3.2.39
+  element-plus: 2.2.17_vue@3.2.39
   hotkeys-js: 3.10.0
-  js-cookie: 3.0.1
-  mavon-editor: 3.0.0-beta
+  lodash-es: 4.17.21
   mitt: 3.0.0
   mockjs: 1.1.0
   nprogress: 0.2.0
   path-browserify: 1.0.1
   path-to-regexp: 6.2.1
-  pinia: 2.0.22_vue@3.2.39
+  pinia: 2.0.22_arz4dztosvwy2ghjrlh2wdhejm
   qs: 6.11.0
   tinymce: 6.2.0
   vue: 3.2.39
   vue-router: 4.1.5_vue@3.2.39
 
 devDependencies:
+  '@antfu/eslint-config': 0.27.0_7ilbxdl5iguzcjriqqcg2m5cku
   '@iconify-json/ep': 1.1.7
   '@iconify/vue': 4.0.0_vue@3.2.39
-  '@vitejs/plugin-vue': 3.1.0_vite@3.1.1+vue@3.2.39
-  '@vitejs/plugin-vue-jsx': 2.0.1_vite@3.1.1+vue@3.2.39
-  '@vue/compiler-sfc': 3.2.39
-  eslint: 8.23.1
-  eslint-plugin-vue: 9.4.0_eslint@8.23.1
+  '@types/nprogress': 0.2.0
+  '@types/path-browserify': 1.0.0
+  '@types/qs': 6.9.7
+  '@vitejs/plugin-vue': 3.1.0_vite@3.1.3+vue@3.2.39
+  '@vitejs/plugin-vue-jsx': 2.0.1_vite@3.1.3+vue@3.2.39
+  autoprefixer: 10.4.12
+  eslint: 8.24.0
   esno: 0.16.3
   fs-extra: 10.1.0
   http-server: 14.1.1
@@ -94,27 +99,28 @@ devDependencies:
   plop: 3.1.1
   postcss-html: 1.5.0
   postcss-scss: 4.0.5
-  sass: 1.54.9
-  stylelint: 14.11.0
-  stylelint-config-recommended-scss: 7.0.0_stylelint@14.11.0
-  stylelint-config-recommended-vue: 1.4.0_35nbotopgds64plu275w6fpq24
-  stylelint-config-standard: 28.0.0_stylelint@14.11.0
-  stylelint-scss: 4.3.0_stylelint@14.11.0
+  sass: 1.55.0
+  stylelint: 14.12.1
+  stylelint-config-standard: 28.0.0_stylelint@14.12.1
+  stylelint-config-standard-scss: 5.0.0_stylelint@14.12.1
+  stylelint-config-standard-vue: 1.0.0_kt2wnpkut4en7qamswpshuiu4m
+  stylelint-scss: 4.3.0_stylelint@14.12.1
   svgo: 2.8.0
-  unplugin-auto-import: 0.11.2_j257a7fvehe4l6224muo7g6tiu
-  unplugin-vue-components: 0.22.7_vite@3.1.1+vue@3.2.39
-  vite: 3.1.1_sass@1.54.9
+  typescript: 4.8.3
+  unplugin-auto-import: 0.11.2_ddncce744ormlo74xpe4fre3qq
+  unplugin-vue-components: 0.22.7_vite@3.1.3+vue@3.2.39
+  vite: 3.1.3_sass@1.55.0
   vite-plugin-banner: 0.5.0
-  vite-plugin-compression: 0.5.1_vite@3.1.1
-  vite-plugin-html: 3.2.0_vite@3.1.1
-  vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@3.1.1
-  vite-plugin-pages: 0.26.0_erjgrqwit2pomeuknzqk3muw2e
-  vite-plugin-restart: 0.2.0_vite@3.1.1
+  vite-plugin-compression: 0.5.1_vite@3.1.3
+  vite-plugin-html: 3.2.0_vite@3.1.3
+  vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@3.1.3
+  vite-plugin-pages: 0.26.0_vite@3.1.3
+  vite-plugin-restart: 0.2.0_vite@3.1.3
   vite-plugin-spritesmith: 0.1.1
-  vite-plugin-svg-icons: 2.0.1_vite@3.1.1
-  vite-plugin-vue-layouts: 0.6.0_npdn3jm2zg4g7dngdn2zkjbyju
-  vite-plugin-vue-setup-extend: 0.4.0_vite@3.1.1
-  vue-eslint-parser: 9.1.0_eslint@8.23.1
+  vite-plugin-svg-icons: 2.0.1_vite@3.1.3
+  vite-plugin-vue-layouts: 0.6.0_xkhgfkrxwsspbw2hhglk5wewfa
+  vite-plugin-vue-setup-extend: 0.4.0_vite@3.1.3
+  vue-tsc: 0.40.13_typescript@4.8.3
 
 packages:
 
@@ -126,6 +132,91 @@ packages:
       '@jridgewell/trace-mapping': 0.3.15
     dev: true
 
+  /@antfu/eslint-config-basic/0.27.0_4gkcvl6qsi23tqqawfqgcwtp54:
+    resolution: {integrity: sha512-QgQVCiNiV9ZF7h09uBqTHctHDfVqJGIIpe0ZHCicLvUv233nAYeu4adAr53buhKrxDeoalozSs2ePiDiCyceTg==}
+    peerDependencies:
+      eslint: '>=7.4.0'
+    dependencies:
+      eslint: 8.24.0
+      eslint-plugin-antfu: 0.27.0_7ilbxdl5iguzcjriqqcg2m5cku
+      eslint-plugin-eslint-comments: 3.2.0_eslint@8.24.0
+      eslint-plugin-html: 7.1.0
+      eslint-plugin-import: 2.26.0_2azyxy5wfmd73v3pbt5rvmgcsm
+      eslint-plugin-jsonc: 2.4.0_eslint@8.24.0
+      eslint-plugin-markdown: 3.0.0_eslint@8.24.0
+      eslint-plugin-n: 15.3.0_eslint@8.24.0
+      eslint-plugin-promise: 6.0.1_eslint@8.24.0
+      eslint-plugin-unicorn: 43.0.2_eslint@8.24.0
+      eslint-plugin-yml: 1.2.0_eslint@8.24.0
+      jsonc-eslint-parser: 2.1.0
+      yaml-eslint-parser: 1.1.0
+    transitivePeerDependencies:
+      - '@typescript-eslint/parser'
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+      - typescript
+    dev: true
+
+  /@antfu/eslint-config-ts/0.27.0_7ilbxdl5iguzcjriqqcg2m5cku:
+    resolution: {integrity: sha512-h/ai9xe65lXtsUiSBRAvfcN47fqn5uGHcCA5c0LoBRX6fVFHk06BbPWMlSJRtqmc3uBTmv3gU8SrnWwrycnKag==}
+    peerDependencies:
+      eslint: '>=7.4.0'
+      typescript: '>=3.9'
+    dependencies:
+      '@antfu/eslint-config-basic': 0.27.0_4gkcvl6qsi23tqqawfqgcwtp54
+      '@typescript-eslint/eslint-plugin': 5.38.0_4gkcvl6qsi23tqqawfqgcwtp54
+      '@typescript-eslint/parser': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
+      eslint: 8.24.0
+      typescript: 4.8.3
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /@antfu/eslint-config-vue/0.27.0_7ilbxdl5iguzcjriqqcg2m5cku:
+    resolution: {integrity: sha512-Iw4GY4rXK1dPxzIl35bOwPE1vn6E5Wm8uljqdpQYQpTX1j6el7Yo30bpanCogWRcdPSMWKcS7GVlHjV47QB59w==}
+    peerDependencies:
+      eslint: '>=7.4.0'
+    dependencies:
+      '@antfu/eslint-config-ts': 0.27.0_7ilbxdl5iguzcjriqqcg2m5cku
+      eslint: 8.24.0
+      eslint-plugin-vue: 9.5.1_eslint@8.24.0
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+      - typescript
+    dev: true
+
+  /@antfu/eslint-config/0.27.0_7ilbxdl5iguzcjriqqcg2m5cku:
+    resolution: {integrity: sha512-xM1In6/ueNyKxxWO86jd7a9IdKby66lZVT/fE8k2RlP+X0xe5/DTTQfwLbVvnRpn77jCPIhEjNKVWxDO/DUEIg==}
+    peerDependencies:
+      eslint: '>=7.4.0'
+    dependencies:
+      '@antfu/eslint-config-vue': 0.27.0_7ilbxdl5iguzcjriqqcg2m5cku
+      '@typescript-eslint/eslint-plugin': 5.38.0_4gkcvl6qsi23tqqawfqgcwtp54
+      '@typescript-eslint/parser': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
+      eslint: 8.24.0
+      eslint-plugin-eslint-comments: 3.2.0_eslint@8.24.0
+      eslint-plugin-html: 7.1.0
+      eslint-plugin-import: 2.26.0_2azyxy5wfmd73v3pbt5rvmgcsm
+      eslint-plugin-jsonc: 2.4.0_eslint@8.24.0
+      eslint-plugin-n: 15.3.0_eslint@8.24.0
+      eslint-plugin-promise: 6.0.1_eslint@8.24.0
+      eslint-plugin-unicorn: 43.0.2_eslint@8.24.0
+      eslint-plugin-vue: 9.5.1_eslint@8.24.0
+      eslint-plugin-yml: 1.2.0_eslint@8.24.0
+      jsonc-eslint-parser: 2.1.0
+      yaml-eslint-parser: 1.1.0
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+      - typescript
+    dev: true
+
   /@antfu/utils/0.5.2:
     resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==}
     dev: true
@@ -137,25 +228,25 @@ packages:
       '@babel/highlight': 7.18.6
     dev: true
 
-  /@babel/compat-data/7.18.13:
-    resolution: {integrity: sha512-5yUzC5LqyTFp2HLmDoxGQelcdYgSpP9xsnMWBphAscOdFrHSAVbLNzWiy32sVNDqJRDiJK6klfDnAgu6PAGSHw==}
+  /@babel/compat-data/7.19.1:
+    resolution: {integrity: sha512-72a9ghR0gnESIa7jBN53U32FOVCEoztyIlKaNoU05zRhEecduGK9L9c3ww7Mp06JiR+0ls0GBPFJQwwtjn9ksg==}
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/core/7.18.13:
-    resolution: {integrity: sha512-ZisbOvRRusFktksHSG6pjj1CSvkPkcZq/KHD45LAkVP/oiHJkNBZWfpvlLmX8OtHDG8IuzsFlVRWo08w7Qxn0A==}
+  /@babel/core/7.19.1:
+    resolution: {integrity: sha512-1H8VgqXme4UXCRv7/Wa1bq7RVymKOzC7znjyFM8KiEzwFqcKUKYNoQef4GhdklgNvoBXyW4gYhuBNCM5o1zImw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@ampproject/remapping': 2.2.0
       '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.18.13
-      '@babel/helper-compilation-targets': 7.18.9_@babel+core@7.18.13
-      '@babel/helper-module-transforms': 7.18.9
-      '@babel/helpers': 7.18.9
-      '@babel/parser': 7.18.13
+      '@babel/generator': 7.19.0
+      '@babel/helper-compilation-targets': 7.19.1_@babel+core@7.19.1
+      '@babel/helper-module-transforms': 7.19.0
+      '@babel/helpers': 7.19.0
+      '@babel/parser': 7.19.1
       '@babel/template': 7.18.10
-      '@babel/traverse': 7.18.13
-      '@babel/types': 7.18.13
+      '@babel/traverse': 7.19.1
+      '@babel/types': 7.19.0
       convert-source-map: 1.8.0
       debug: 4.3.4
       gensync: 1.0.0-beta.2
@@ -165,11 +256,11 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/generator/7.18.13:
-    resolution: {integrity: sha512-CkPg8ySSPuHTYPJYo7IRALdqyjM9HCbt/3uOBEFbzyGVP6Mn8bwFPB0jX6982JVNBlYzM1nnPkfjuXSOPtQeEQ==}
+  /@babel/generator/7.19.0:
+    resolution: {integrity: sha512-S1ahxf1gZ2dpoiFgA+ohK9DIpz50bJ0CWs7Zlzb54Z4sG8qmdIrGrVqmy1sAtTVRb+9CU6U8VqT9L0Zj7hxHVg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.18.13
+      '@babel/types': 7.19.0
       '@jridgewell/gen-mapping': 0.3.2
       jsesc: 2.5.2
     dev: true
@@ -178,35 +269,35 @@ packages:
     resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.18.13
+      '@babel/types': 7.19.0
     dev: true
 
-  /@babel/helper-compilation-targets/7.18.9_@babel+core@7.18.13:
-    resolution: {integrity: sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==}
+  /@babel/helper-compilation-targets/7.19.1_@babel+core@7.19.1:
+    resolution: {integrity: sha512-LlLkkqhCMyz2lkQPvJNdIYU7O5YjWRgC2R4omjCTpZd8u8KMQzZvX4qce+/BluN1rcQiV7BoGUpmQ0LeHerbhg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/compat-data': 7.18.13
-      '@babel/core': 7.18.13
+      '@babel/compat-data': 7.19.1
+      '@babel/core': 7.19.1
       '@babel/helper-validator-option': 7.18.6
-      browserslist: 4.21.3
+      browserslist: 4.21.4
       semver: 6.3.0
     dev: true
 
-  /@babel/helper-create-class-features-plugin/7.18.13_@babel+core@7.18.13:
-    resolution: {integrity: sha512-hDvXp+QYxSRL+23mpAlSGxHMDyIGChm0/AwTfTAAK5Ufe40nCsyNdaYCGuK91phn/fVu9kqayImRDkvNAgdrsA==}
+  /@babel/helper-create-class-features-plugin/7.19.0_@babel+core@7.19.1:
+    resolution: {integrity: sha512-NRz8DwF4jT3UfrmUoZjd0Uph9HQnP30t7Ash+weACcyNkiYTywpIjDBgReJMKgr+n86sn2nPVVmJ28Dm053Kqw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.18.13
+      '@babel/core': 7.19.1
       '@babel/helper-annotate-as-pure': 7.18.6
       '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-function-name': 7.18.9
+      '@babel/helper-function-name': 7.19.0
       '@babel/helper-member-expression-to-functions': 7.18.9
       '@babel/helper-optimise-call-expression': 7.18.6
-      '@babel/helper-replace-supers': 7.18.9
+      '@babel/helper-replace-supers': 7.19.1
       '@babel/helper-split-export-declaration': 7.18.6
     transitivePeerDependencies:
       - supports-color
@@ -222,42 +313,50 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.18.10
-      '@babel/types': 7.18.13
+      '@babel/types': 7.18.10
+    dev: true
+
+  /@babel/helper-function-name/7.19.0:
+    resolution: {integrity: sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.18.10
+      '@babel/types': 7.19.0
     dev: true
 
   /@babel/helper-hoist-variables/7.18.6:
     resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.18.13
+      '@babel/types': 7.19.0
     dev: true
 
   /@babel/helper-member-expression-to-functions/7.18.9:
     resolution: {integrity: sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.18.13
+      '@babel/types': 7.19.0
     dev: true
 
   /@babel/helper-module-imports/7.18.6:
     resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.18.13
+      '@babel/types': 7.18.10
     dev: true
 
-  /@babel/helper-module-transforms/7.18.9:
-    resolution: {integrity: sha512-KYNqY0ICwfv19b31XzvmI/mfcylOzbLtowkw+mfvGPAQ3kfCnMLYbED3YecL5tPd8nAYFQFAd6JHp2LxZk/J1g==}
+  /@babel/helper-module-transforms/7.19.0:
+    resolution: {integrity: sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-environment-visitor': 7.18.9
       '@babel/helper-module-imports': 7.18.6
       '@babel/helper-simple-access': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/helper-validator-identifier': 7.18.6
+      '@babel/helper-validator-identifier': 7.19.1
       '@babel/template': 7.18.10
-      '@babel/traverse': 7.18.13
-      '@babel/types': 7.18.13
+      '@babel/traverse': 7.19.1
+      '@babel/types': 7.19.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -266,7 +365,7 @@ packages:
     resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.18.13
+      '@babel/types': 7.19.0
     dev: true
 
   /@babel/helper-plugin-utils/7.18.9:
@@ -274,15 +373,20 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/helper-replace-supers/7.18.9:
-    resolution: {integrity: sha512-dNsWibVI4lNT6HiuOIBr1oyxo40HvIVmbwPUm3XZ7wMh4k2WxrxTqZwSqw/eEmXDS9np0ey5M2bz9tBmO9c+YQ==}
+  /@babel/helper-plugin-utils/7.19.0:
+    resolution: {integrity: sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-replace-supers/7.19.1:
+    resolution: {integrity: sha512-T7ahH7wV0Hfs46SFh5Jz3s0B6+o8g3c+7TMxu7xKfmHikg7EAZ3I2Qk9LFhjxXq8sL7UkP5JflezNwoZa8WvWw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-environment-visitor': 7.18.9
       '@babel/helper-member-expression-to-functions': 7.18.9
       '@babel/helper-optimise-call-expression': 7.18.6
-      '@babel/traverse': 7.18.13
-      '@babel/types': 7.18.13
+      '@babel/traverse': 7.19.1
+      '@babel/types': 7.19.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -291,14 +395,14 @@ packages:
     resolution: {integrity: sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.18.13
+      '@babel/types': 7.19.0
     dev: true
 
   /@babel/helper-split-export-declaration/7.18.6:
     resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.18.13
+      '@babel/types': 7.19.0
     dev: true
 
   /@babel/helper-string-parser/7.18.10:
@@ -308,19 +412,24 @@ packages:
   /@babel/helper-validator-identifier/7.18.6:
     resolution: {integrity: sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==}
     engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-validator-identifier/7.19.1:
+    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
+    engines: {node: '>=6.9.0'}
 
   /@babel/helper-validator-option/7.18.6:
     resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/helpers/7.18.9:
-    resolution: {integrity: sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==}
+  /@babel/helpers/7.19.0:
+    resolution: {integrity: sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.18.10
-      '@babel/traverse': 7.18.13
-      '@babel/types': 7.18.13
+      '@babel/traverse': 7.19.1
+      '@babel/types': 7.19.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -329,57 +438,65 @@ packages:
     resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-validator-identifier': 7.18.6
+      '@babel/helper-validator-identifier': 7.19.1
       chalk: 2.4.2
       js-tokens: 4.0.0
     dev: true
 
-  /@babel/parser/7.18.13:
-    resolution: {integrity: sha512-dgXcIfMuQ0kgzLB2b9tRZs7TTFFaGM2AbtA4fJgUUYukzGH4jwsS7hzQHEGs67jdehpm22vkgKwvbU+aEflgwg==}
+  /@babel/parser/7.18.11:
+    resolution: {integrity: sha512-9JKn5vN+hDt0Hdqn1PiJ2guflwP+B6Ga8qbDuoF0PzzVhrzsKIJo8yGqVk6CmMHiMei9w1C1Bp9IMJSIK+HPIQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.18.13
+      '@babel/types': 7.19.0
+    dev: true
 
-  /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.18.13:
+  /@babel/parser/7.19.1:
+    resolution: {integrity: sha512-h7RCSorm1DdTVGJf3P2Mhj3kdnkmF/EiysUkzS2TdgAYqyjFdMQJbVuXOBej2SBJaXan/lIVtT6KkGbyyq753A==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.19.0
+
+  /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.19.1:
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.18.13
+      '@babel/core': 7.19.1
       '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
-  /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.18.13:
+  /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.19.1:
     resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.18.13
-      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/core': 7.19.1
+      '@babel/helper-plugin-utils': 7.19.0
     dev: true
 
-  /@babel/plugin-syntax-typescript/7.18.6_@babel+core@7.18.13:
+  /@babel/plugin-syntax-typescript/7.18.6_@babel+core@7.19.1:
     resolution: {integrity: sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.18.13
-      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/core': 7.19.1
+      '@babel/helper-plugin-utils': 7.19.0
     dev: true
 
-  /@babel/plugin-transform-typescript/7.18.12_@babel+core@7.18.13:
-    resolution: {integrity: sha512-2vjjam0cum0miPkenUbQswKowuxs/NjMwIKEq0zwegRxXk12C9YOF9STXnaUptITOtOJHKHpzvvWYOjbm6tc0w==}
+  /@babel/plugin-transform-typescript/7.19.1_@babel+core@7.19.1:
+    resolution: {integrity: sha512-+ILcOU+6mWLlvCwnL920m2Ow3wWx3Wo8n2t5aROQmV55GZt+hOiLvBaa3DNzRjSEHa1aauRs4/YLmkCfFkhhRQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.18.13
-      '@babel/helper-create-class-features-plugin': 7.18.13_@babel+core@7.18.13
-      '@babel/helper-plugin-utils': 7.18.9
-      '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.18.13
+      '@babel/core': 7.19.1
+      '@babel/helper-create-class-features-plugin': 7.19.0_@babel+core@7.19.1
+      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.19.1
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -389,35 +506,62 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/parser': 7.18.13
-      '@babel/types': 7.18.13
+      '@babel/parser': 7.19.1
+      '@babel/types': 7.19.0
     dev: true
 
-  /@babel/traverse/7.18.13:
-    resolution: {integrity: sha512-N6kt9X1jRMLPxxxPYWi7tgvJRH/rtoU+dbKAPDM44RFHiMH8igdsaSBgFeskhSl/kLWLDUvIh1RXCrTmg0/zvA==}
+  /@babel/traverse/7.18.11:
+    resolution: {integrity: sha512-TG9PiM2R/cWCAy6BPJKeHzNbu4lPzOSZpeMfeNErskGpTJx6trEvFaVCbDvpcxwy49BKWmEPwiW8mrysNiDvIQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.18.13
+      '@babel/generator': 7.19.0
       '@babel/helper-environment-visitor': 7.18.9
       '@babel/helper-function-name': 7.18.9
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.18.13
-      '@babel/types': 7.18.13
+      '@babel/parser': 7.19.1
+      '@babel/types': 7.18.10
       debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/types/7.18.13:
-    resolution: {integrity: sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ==}
+  /@babel/traverse/7.19.1:
+    resolution: {integrity: sha512-0j/ZfZMxKukDaag2PtOPDbwuELqIar6lLskVPPJDjXMXjfLb1Obo/1yjxIGqqAJrmfaTIY3z2wFLAQ7qSkLsuA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.19.0
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.19.0
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/parser': 7.19.1
+      '@babel/types': 7.19.0
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/types/7.18.10:
+    resolution: {integrity: sha512-MJvnbEiiNkpjo+LknnmRrqbY1GPUUggjv+wQVjetM/AONoupqRALB7I6jGqNUAZsKcRIEu2J6FRFvsczljjsaQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-string-parser': 7.18.10
       '@babel/helper-validator-identifier': 7.18.6
       to-fast-properties: 2.0.0
+    dev: true
+
+  /@babel/types/7.19.0:
+    resolution: {integrity: sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.18.10
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
 
   /@csstools/selector-specificity/2.0.2_pnx64jze6bptzcedy5bidi3zdi:
     resolution: {integrity: sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==}
@@ -453,7 +597,7 @@ packages:
   /@esbuild-kit/core-utils/2.3.0:
     resolution: {integrity: sha512-JL73zt/LN/qqziHuod4/bM2xBNNofDZu1cbwT6KIn6B11lA4cgDXkoSHOfNCbZMZOnh0Aqf0vW/gNQC+Z18hKQ==}
     dependencies:
-      esbuild: 0.15.5
+      esbuild: 0.15.7
       source-map-support: 0.5.21
     dev: true
 
@@ -464,15 +608,6 @@ packages:
       get-tsconfig: 4.2.0
     dev: true
 
-  /@esbuild/linux-loong64/0.15.5:
-    resolution: {integrity: sha512-UHkDFCfSGTuXq08oQltXxSZmH1TXyWsL+4QhZDWvvLl6mEJQqk3u7/wq1LjhrrAXYIllaTtRSzUXl4Olkf2J8A==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-loong64/0.15.7:
     resolution: {integrity: sha512-IKznSJOsVUuyt7cDzzSZyqBEcZe+7WlBqTVXiF1OXP/4Nm387ToaXZ0fyLwI1iBlI/bzpxVq411QE2/Bt2XWWw==}
     engines: {node: '>=12'}
@@ -509,8 +644,8 @@ packages:
       '@floating-ui/core': 1.0.1
     dev: false
 
-  /@humanwhocodes/config-array/0.10.4:
-    resolution: {integrity: sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==}
+  /@humanwhocodes/config-array/0.10.5:
+    resolution: {integrity: sha512-XVVDtp+dVvRxMoxSiSfasYaG02VEe1qH5cKgMQJWhol6HwzbcqoCMJi8dAGoYAO57jhUyhI6cWuRiTcRaDaYug==}
     engines: {node: '>=10.10.0'}
     dependencies:
       '@humanwhocodes/object-schema': 1.2.1
@@ -687,17 +822,26 @@ packages:
     resolution: {integrity: sha512-CWYnSRnun3CGbt6taXeVo2lCbuaj4mchVJ4UF/BdU5TSuIn3AmS13pGMwCsBUoehGbhZrBrpNJZSZI5EVilXww==}
     dev: true
 
-  /@types/inquirer/8.2.3:
-    resolution: {integrity: sha512-ZlBqD+8WIVNy3KIVkl+Qne6bGLW2erwN0GJXY9Ri/9EMbyupee3xw3H0Mmv5kJoLyNpfd/oHlwKxO0DUDH7yWA==}
+  /@types/inquirer/8.2.1:
+    resolution: {integrity: sha512-wKW3SKIUMmltbykg4I5JzCVzUhkuD9trD6efAmYgN2MrSntY0SMRQzEnD3mkyJ/rv9NLbTC7g3hKKE86YwEDLw==}
     dependencies:
       '@types/through': 0.0.30
+      rxjs: 7.5.6
+    dev: true
+
+  /@types/json-schema/7.0.11:
+    resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
+    dev: true
+
+  /@types/json5/0.0.29:
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
   /@types/liftoff/4.0.0:
     resolution: {integrity: sha512-Ny/PJkO6nxWAQnaet8q/oWz15lrfwvdvBpuY4treB0CSsBO1CG0fVuNLngR3m3bepQLd+E4c3Y3DlC2okpUvPw==}
     dependencies:
       '@types/fined': 1.1.3
-      '@types/node': 18.7.13
+      '@types/node': 18.6.3
     dev: true
 
   /@types/lodash-es/4.17.6:
@@ -710,6 +854,12 @@ packages:
     resolution: {integrity: sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==}
     dev: false
 
+  /@types/mdast/3.0.10:
+    resolution: {integrity: sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: true
+
   /@types/minimist/1.2.2:
     resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==}
     dev: true
@@ -722,79 +872,259 @@ packages:
     resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
     dev: true
 
-  /@types/node/18.7.13:
-    resolution: {integrity: sha512-46yIhxSe5xEaJZXWdIBP7GU4HDTG8/eo0qd9atdiL+lFpA03y8KS+lkTN834TWJj5767GbWv4n/P6efyTFt1Dw==}
+  /@types/node/18.6.3:
+    resolution: {integrity: sha512-6qKpDtoaYLM+5+AFChLhHermMQxc3TOEFIDzrZLPRGHPrLEwqFkkT5Kx3ju05g6X7uDPazz3jHbKPX0KzCjntg==}
     dev: true
 
   /@types/normalize-package-data/2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
 
+  /@types/nprogress/0.2.0:
+    resolution: {integrity: sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==}
+    dev: true
+
   /@types/parse-json/4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
     dev: true
 
+  /@types/path-browserify/1.0.0:
+    resolution: {integrity: sha512-XMCcyhSvxcch8b7rZAtFAaierBYdeHXVvg2iYnxOV0MCQHmPuRRmGZPFDRzPayxcGiiSL1Te9UIO+f3cuj0tfw==}
+    dev: true
+
+  /@types/qs/6.9.7:
+    resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
+    dev: true
+
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
-      '@types/node': 18.7.13
+      '@types/node': 18.6.3
     dev: true
 
-  /@types/svgo/2.6.4:
-    resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}
+  /@types/svgo/2.6.3:
+    resolution: {integrity: sha512-5sP0Xgo0dXppY0tbYF6TevB/1+tzFLuu71XXxC/zGvQAn9PW7y+DwtDO81g0ZUPye00K6tPwtsLDOpARa0mFcA==}
     dependencies:
-      '@types/node': 18.7.13
+      '@types/node': 18.6.3
     dev: true
 
   /@types/through/0.0.30:
     resolution: {integrity: sha512-FvnCJljyxhPM3gkRgWmxmDZyAQSiBQQWLI0A0VFL0K7W1oRUrPJSqNO0NvTnLkBcotdlp3lKvaT0JrnyRDkzOg==}
     dependencies:
-      '@types/node': 18.7.13
+      '@types/node': 18.6.3
+    dev: true
+
+  /@types/unist/2.0.6:
+    resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: true
 
   /@types/web-bluetooth/0.0.15:
     resolution: {integrity: sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA==}
 
-  /@vitejs/plugin-vue-jsx/2.0.1_vite@3.1.1+vue@3.2.39:
+  /@typescript-eslint/eslint-plugin/5.38.0_4gkcvl6qsi23tqqawfqgcwtp54:
+    resolution: {integrity: sha512-GgHi/GNuUbTOeoJiEANi0oI6fF3gBQc3bGFYj40nnAPCbhrtEDf2rjBmefFadweBmO1Du1YovHeDP2h5JLhtTQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^5.0.0
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
+      '@typescript-eslint/scope-manager': 5.38.0
+      '@typescript-eslint/type-utils': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
+      '@typescript-eslint/utils': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
+      debug: 4.3.4
+      eslint: 8.24.0
+      ignore: 5.2.0
+      regexpp: 3.2.0
+      semver: 7.3.7
+      tsutils: 3.21.0_typescript@4.8.3
+      typescript: 4.8.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/parser/5.38.0_7ilbxdl5iguzcjriqqcg2m5cku:
+    resolution: {integrity: sha512-/F63giJGLDr0ms1Cr8utDAxP2SPiglaD6V+pCOcG35P2jCqdfR7uuEhz1GIC3oy4hkUF8xA1XSXmd9hOh/a5EA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 5.38.0
+      '@typescript-eslint/types': 5.38.0
+      '@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
+      debug: 4.3.4
+      eslint: 8.24.0
+      typescript: 4.8.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/scope-manager/5.38.0:
+    resolution: {integrity: sha512-ByhHIuNyKD9giwkkLqzezZ9y5bALW8VNY6xXcP+VxoH4JBDKjU5WNnsiD4HJdglHECdV+lyaxhvQjTUbRboiTA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      '@typescript-eslint/types': 5.38.0
+      '@typescript-eslint/visitor-keys': 5.38.0
+    dev: true
+
+  /@typescript-eslint/type-utils/5.38.0_7ilbxdl5iguzcjriqqcg2m5cku:
+    resolution: {integrity: sha512-iZq5USgybUcj/lfnbuelJ0j3K9dbs1I3RICAJY9NZZpDgBYXmuUlYQGzftpQA9wC8cKgtS6DASTvF3HrXwwozA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
+      '@typescript-eslint/utils': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
+      debug: 4.3.4
+      eslint: 8.24.0
+      tsutils: 3.21.0_typescript@4.8.3
+      typescript: 4.8.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/types/5.38.0:
+    resolution: {integrity: sha512-HHu4yMjJ7i3Cb+8NUuRCdOGu2VMkfmKyIJsOr9PfkBVYLYrtMCK/Ap50Rpov+iKpxDTfnqvDbuPLgBE5FwUNfA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3:
+    resolution: {integrity: sha512-6P0RuphkR+UuV7Avv7MU3hFoWaGcrgOdi8eTe1NwhMp2/GjUJoODBTRWzlHpZh6lFOaPmSvgxGlROa0Sg5Zbyg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 5.38.0
+      '@typescript-eslint/visitor-keys': 5.38.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.3.7
+      tsutils: 3.21.0_typescript@4.8.3
+      typescript: 4.8.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/utils/5.38.0_7ilbxdl5iguzcjriqqcg2m5cku:
+    resolution: {integrity: sha512-6sdeYaBgk9Fh7N2unEXGz+D+som2QCQGPAf1SxrkEr+Z32gMreQ0rparXTNGRRfYUWk/JzbGdcM8NSSd6oqnTA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      '@types/json-schema': 7.0.11
+      '@typescript-eslint/scope-manager': 5.38.0
+      '@typescript-eslint/types': 5.38.0
+      '@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
+      eslint: 8.24.0
+      eslint-scope: 5.1.1
+      eslint-utils: 3.0.0_eslint@8.24.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@typescript-eslint/visitor-keys/5.38.0:
+    resolution: {integrity: sha512-MxnrdIyArnTi+XyFLR+kt/uNAcdOnmT+879os7qDRI+EYySR4crXJq9BXPfRzzLGq0wgxkwidrCJ9WCAoacm1w==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      '@typescript-eslint/types': 5.38.0
+      eslint-visitor-keys: 3.3.0
+    dev: true
+
+  /@vitejs/plugin-vue-jsx/2.0.1_vite@3.1.3+vue@3.2.39:
     resolution: {integrity: sha512-lmiR1k9+lrF7LMczO0pxtQ8mOn6XeppJDHxnpxkJQpT5SiKz4SKhKdeNstXaTNuR8qZhUo5X0pJlcocn72Y4Jg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^3.0.0
       vue: ^3.0.0
     dependencies:
-      '@babel/core': 7.18.13
-      '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.18.13
-      '@babel/plugin-transform-typescript': 7.18.12_@babel+core@7.18.13
-      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.18.13
-      vite: 3.1.1_sass@1.54.9
+      '@babel/core': 7.19.1
+      '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.19.1
+      '@babel/plugin-transform-typescript': 7.19.1_@babel+core@7.19.1
+      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.19.1
+      vite: 3.1.3_sass@1.55.0
       vue: 3.2.39
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue/3.1.0_vite@3.1.1+vue@3.2.39:
+  /@vitejs/plugin-vue/3.1.0_vite@3.1.3+vue@3.2.39:
     resolution: {integrity: sha512-fmxtHPjSOEIRg6vHYDaem+97iwCUg/uSIaTzp98lhELt2ISOQuDo2hbkBdXod0g15IhfPMQmAxh4heUks2zvDA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^3.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.55.0
       vue: 3.2.39
     dev: true
 
+  /@volar/code-gen/0.40.13:
+    resolution: {integrity: sha512-4gShBWuMce868OVvgyA1cU5WxHbjfEme18Tw6uVMfweZCF5fB2KECG0iPrA9D54vHk3FeHarODNwgIaaFfUBlA==}
+    dependencies:
+      '@volar/source-map': 0.40.13
+    dev: true
+
+  /@volar/source-map/0.40.13:
+    resolution: {integrity: sha512-dbdkAB2Nxb0wLjAY5O64o3ywVWlAGONnBIoKAkXSf6qkGZM+nJxcizsoiI66K+RHQG0XqlyvjDizfnTxr+6PWg==}
+    dependencies:
+      '@vue/reactivity': 3.2.38
+    dev: true
+
+  /@volar/typescript-faster/0.40.13:
+    resolution: {integrity: sha512-uy+TlcFkKoNlKEnxA4x5acxdxLyVDIXGSc8cYDNXpPKjBKXrQaetzCzlO3kVBqu1VLMxKNGJMTKn35mo+ILQmw==}
+    dependencies:
+      semver: 7.3.7
+    dev: true
+
+  /@volar/vue-language-core/0.40.13:
+    resolution: {integrity: sha512-QkCb8msi2KUitTdM6Y4kAb7/ZlEvuLcbBFOC2PLBlFuoZwyxvSP7c/dBGmKGtJlEvMX0LdCyrg5V2aBYxD38/Q==}
+    dependencies:
+      '@volar/code-gen': 0.40.13
+      '@volar/source-map': 0.40.13
+      '@vue/compiler-core': 3.2.39
+      '@vue/compiler-dom': 3.2.39
+      '@vue/compiler-sfc': 3.2.39
+      '@vue/reactivity': 3.2.39
+      '@vue/shared': 3.2.39
+    dev: true
+
+  /@volar/vue-typescript/0.40.13:
+    resolution: {integrity: sha512-o7bNztwjs8JmbQjVkrnbZUOfm7q4B8ZYssETISN1tRaBdun6cfNqgpkvDYd+VUBh1O4CdksvN+5BUNnwAz4oCQ==}
+    dependencies:
+      '@volar/code-gen': 0.40.13
+      '@volar/typescript-faster': 0.40.13
+      '@volar/vue-language-core': 0.40.13
+    dev: true
+
   /@vue/babel-helper-vue-transform-on/1.0.2:
     resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}
     dev: true
 
-  /@vue/babel-plugin-jsx/1.1.1_@babel+core@7.18.13:
+  /@vue/babel-plugin-jsx/1.1.1_@babel+core@7.19.1:
     resolution: {integrity: sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==}
     dependencies:
       '@babel/helper-module-imports': 7.18.6
-      '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.18.13
+      '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.19.1
       '@babel/template': 7.18.10
-      '@babel/traverse': 7.18.13
-      '@babel/types': 7.18.13
+      '@babel/traverse': 7.18.11
+      '@babel/types': 7.18.10
       '@vue/babel-helper-vue-transform-on': 1.0.2
       camelcase: 6.3.0
       html-tags: 3.2.0
@@ -804,24 +1134,55 @@ packages:
       - supports-color
     dev: true
 
+  /@vue/compiler-core/3.2.37:
+    resolution: {integrity: sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==}
+    dependencies:
+      '@babel/parser': 7.18.11
+      '@vue/shared': 3.2.37
+      estree-walker: 2.0.2
+      source-map: 0.6.1
+    dev: true
+
   /@vue/compiler-core/3.2.39:
     resolution: {integrity: sha512-mf/36OWXqWn0wsC40nwRRGheR/qoID+lZXbIuLnr4/AngM0ov8Xvv8GHunC0rKRIkh60bTqydlqTeBo49rlbqw==}
     dependencies:
-      '@babel/parser': 7.18.13
+      '@babel/parser': 7.19.1
       '@vue/shared': 3.2.39
       estree-walker: 2.0.2
       source-map: 0.6.1
 
+  /@vue/compiler-dom/3.2.37:
+    resolution: {integrity: sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==}
+    dependencies:
+      '@vue/compiler-core': 3.2.37
+      '@vue/shared': 3.2.37
+    dev: true
+
   /@vue/compiler-dom/3.2.39:
     resolution: {integrity: sha512-HMFI25Be1C8vLEEv1hgEO1dWwG9QQ8LTTPmCkblVJY/O3OvWx6r1+zsox5mKPMGvqYEZa6l8j+xgOfUspgo7hw==}
     dependencies:
       '@vue/compiler-core': 3.2.39
       '@vue/shared': 3.2.39
 
+  /@vue/compiler-sfc/3.2.37:
+    resolution: {integrity: sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==}
+    dependencies:
+      '@babel/parser': 7.18.11
+      '@vue/compiler-core': 3.2.37
+      '@vue/compiler-dom': 3.2.37
+      '@vue/compiler-ssr': 3.2.37
+      '@vue/reactivity-transform': 3.2.37
+      '@vue/shared': 3.2.37
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+      postcss: 8.4.16
+      source-map: 0.6.1
+    dev: true
+
   /@vue/compiler-sfc/3.2.39:
     resolution: {integrity: sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==}
     dependencies:
-      '@babel/parser': 7.18.13
+      '@babel/parser': 7.19.1
       '@vue/compiler-core': 3.2.39
       '@vue/compiler-dom': 3.2.39
       '@vue/compiler-ssr': 3.2.39
@@ -832,6 +1193,13 @@ packages:
       postcss: 8.4.16
       source-map: 0.6.1
 
+  /@vue/compiler-ssr/3.2.37:
+    resolution: {integrity: sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.37
+      '@vue/shared': 3.2.37
+    dev: true
+
   /@vue/compiler-ssr/3.2.39:
     resolution: {integrity: sha512-EoGCJ6lincKOZGW+0Ky4WOKsSmqL7hp1ZYgen8M7u/mlvvEQUaO9tKKOy7K43M9U2aA3tPv0TuYYQFrEbK2eFQ==}
     dependencies:
@@ -841,15 +1209,31 @@ packages:
   /@vue/devtools-api/6.2.1:
     resolution: {integrity: sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==}
 
+  /@vue/reactivity-transform/3.2.37:
+    resolution: {integrity: sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==}
+    dependencies:
+      '@babel/parser': 7.18.11
+      '@vue/compiler-core': 3.2.37
+      '@vue/shared': 3.2.37
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+    dev: true
+
   /@vue/reactivity-transform/3.2.39:
     resolution: {integrity: sha512-HGuWu864zStiWs9wBC6JYOP1E00UjMdDWIG5W+FpUx28hV3uz9ODOKVNm/vdOy/Pvzg8+OcANxAVC85WFBbl3A==}
     dependencies:
-      '@babel/parser': 7.18.13
+      '@babel/parser': 7.19.1
       '@vue/compiler-core': 3.2.39
       '@vue/shared': 3.2.39
       estree-walker: 2.0.2
       magic-string: 0.25.9
 
+  /@vue/reactivity/3.2.38:
+    resolution: {integrity: sha512-6L4myYcH9HG2M25co7/BSo0skKFHpAN8PhkNPM4xRVkyGl1K5M3Jx4rp5bsYhvYze2K4+l+pioN4e6ZwFLUVtw==}
+    dependencies:
+      '@vue/shared': 3.2.38
+    dev: true
+
   /@vue/reactivity/3.2.39:
     resolution: {integrity: sha512-vlaYX2a3qMhIZfrw3Mtfd+BuU+TZmvDrPMa+6lpfzS9k/LnGxkSuf0fhkP0rMGfiOHPtyKoU9OJJJFGm92beVQ==}
     dependencies:
@@ -877,6 +1261,14 @@ packages:
       '@vue/shared': 3.2.39
       vue: 3.2.39
 
+  /@vue/shared/3.2.37:
+    resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
+    dev: true
+
+  /@vue/shared/3.2.38:
+    resolution: {integrity: sha512-dTyhTIRmGXBjxJE+skC8tTWCGLCVc4wQgRRLt8+O9p5ewBAjoBwtCAkLPrtToSr1xltoe3st21Pv953aOZ7alg==}
+    dev: true
+
   /@vue/shared/3.2.39:
     resolution: {integrity: sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw==}
 
@@ -886,7 +1278,7 @@ packages:
       '@types/web-bluetooth': 0.0.15
       '@vueuse/metadata': 9.2.0
       '@vueuse/shared': 9.2.0_vue@3.2.39
-      vue-demi: 0.13.11_vue@3.2.39
+      vue-demi: 0.13.6_vue@3.2.39
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -930,7 +1322,7 @@ packages:
       '@vueuse/shared': 9.2.0_vue@3.2.39
       axios: 0.27.2
       nprogress: 0.2.0
-      vue-demi: 0.13.11_vue@3.2.39
+      vue-demi: 0.13.6_vue@3.2.39
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -942,7 +1334,7 @@ packages:
   /@vueuse/shared/9.2.0_vue@3.2.39:
     resolution: {integrity: sha512-NnRp/noSWuXW0dKhZK5D0YLrDi0nmZ18UeEgwXQq7Ul5TTP93lcNnKjrHtd68j2xFB/l59yPGFlCryL692bnrA==}
     dependencies:
-      vue-demi: 0.13.11_vue@3.2.39
+      vue-demi: 0.13.6_vue@3.2.39
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -1065,6 +1457,17 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /array-includes/3.1.5:
+    resolution: {integrity: sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.3
+      get-intrinsic: 1.1.3
+      is-string: 1.0.7
+    dev: true
+
   /array-slice/1.1.0:
     resolution: {integrity: sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==}
     engines: {node: '>=0.10.0'}
@@ -1080,6 +1483,16 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /array.prototype.flat/1.3.0:
+    resolution: {integrity: sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.3
+      es-shim-unscopables: 1.0.0
+    dev: true
+
   /arrify/1.0.1:
     resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
     engines: {node: '>=0.10.0'}
@@ -1129,6 +1542,21 @@ packages:
     hasBin: true
     dev: true
 
+  /autoprefixer/10.4.12:
+    resolution: {integrity: sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.21.4
+      caniuse-lite: 1.0.30001412
+      fraction.js: 4.2.0
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /available-typed-arrays/1.0.5:
     resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
     engines: {node: '>= 0.4'}
@@ -1264,15 +1692,15 @@ packages:
       fill-range: 7.0.1
     dev: true
 
-  /browserslist/4.21.3:
-    resolution: {integrity: sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==}
+  /browserslist/4.21.4:
+    resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001384
-      electron-to-chromium: 1.4.233
+      caniuse-lite: 1.0.30001412
+      electron-to-chromium: 1.4.261
       node-releases: 2.0.6
-      update-browserslist-db: 1.0.5_browserslist@4.21.3
+      update-browserslist-db: 1.0.9_browserslist@4.21.4
     dev: true
 
   /buffer-from/1.1.2:
@@ -1298,6 +1726,12 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /builtins/5.0.1:
+    resolution: {integrity: sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==}
+    dependencies:
+      semver: 7.3.7
+    dev: true
+
   /cache-base/1.0.1:
     resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==}
     engines: {node: '>=0.10.0'}
@@ -1317,7 +1751,7 @@ packages:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
     dependencies:
       function-bind: 1.1.1
-      get-intrinsic: 1.1.2
+      get-intrinsic: 1.1.3
 
   /callsites/3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
@@ -1350,8 +1784,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /caniuse-lite/1.0.30001384:
-    resolution: {integrity: sha512-BBWt57kqWbc0GYZXb47wTXpmAgqr5LSibPzNjk/AWMdmJMQhLqOl3c/Kd4OAU/tu4NLfYkMx8Tlq3RVBkOBolQ==}
+  /caniuse-lite/1.0.30001412:
+    resolution: {integrity: sha512-+TeEIee1gS5bYOiuf+PS/kp2mrXic37Hl66VY6EAfxasIk5fELTktK2oOezYed12H8w7jt3s512PpulQidPjwA==}
     dev: true
 
   /capital-case/1.0.4:
@@ -1416,6 +1850,18 @@ packages:
       tslib: 2.4.0
     dev: true
 
+  /character-entities-legacy/1.1.4:
+    resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
+    dev: true
+
+  /character-entities/1.2.4:
+    resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
+    dev: true
+
+  /character-reference-invalid/1.1.4:
+    resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
+    dev: true
+
   /chardet/0.7.0:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
     dev: true
@@ -1435,6 +1881,10 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /ci-info/3.4.0:
+    resolution: {integrity: sha512-t5QdPT5jq3o262DOQ8zA6E1tlH2upmUc4Hlvrbx1pGYJuiiHl7O7rvVNI+l8HTVhd/q3Qc9vqimkNk5yiXsAug==}
+    dev: true
+
   /class-utils/0.3.6:
     resolution: {integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==}
     engines: {node: '>=0.10.0'}
@@ -1452,6 +1902,13 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /clean-regexp/1.0.0:
+    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
+    engines: {node: '>=4'}
+    dependencies:
+      escape-string-regexp: 1.0.5
+    dev: true
+
   /clean-stack/2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
@@ -1556,6 +2013,7 @@ packages:
 
   /commander/2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+    dev: true
 
   /commander/7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
@@ -1576,7 +2034,7 @@ packages:
     dev: true
 
   /concat-map/0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=, tarball: concat-map/download/concat-map-0.0.1.tgz}
     dev: true
 
   /concat-stream/1.5.2:
@@ -1710,10 +2168,6 @@ packages:
     hasBin: true
     dev: true
 
-  /cssfilter/0.0.10:
-    resolution: {integrity: sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==}
-    dev: false
-
   /csso/4.2.0:
     resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
     engines: {node: '>=8.0.0'}
@@ -1738,7 +2192,7 @@ packages:
     dev: true
 
   /data-uri-to-buffer/0.0.3:
-    resolution: {integrity: sha1-GK6XmmoMqZSwYlhTkW0mYruuCxo=}
+    resolution: {integrity: sha512-Cp+jOa8QJef5nXS5hU7M1DWzXPEIoVR3kbV0dQuVGwROZg8bGf1DcCnkmajBTnvghTtSNMUdRrPjgaT6ZQucbw==}
     dev: true
 
   /dayjs/1.11.5:
@@ -1802,7 +2256,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       es-get-iterator: 1.1.2
-      get-intrinsic: 1.1.2
+      get-intrinsic: 1.1.3
       is-arguments: 1.1.1
       is-date-object: 1.0.5
       is-regex: 1.1.4
@@ -1892,6 +2346,13 @@ packages:
       path-type: 4.0.0
     dev: true
 
+  /doctrine/2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
   /doctrine/3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
@@ -2002,7 +2463,7 @@ packages:
     dev: true
 
   /ee-first/1.1.1:
-    resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=}
+    resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=, tarball: ee-first/download/ee-first-1.1.1.tgz}
     dev: true
 
   /ejs/3.1.8:
@@ -2013,12 +2474,12 @@ packages:
       jake: 10.8.5
     dev: true
 
-  /electron-to-chromium/1.4.233:
-    resolution: {integrity: sha512-ejwIKXTg1wqbmkcRJh9Ur3hFGHFDZDw1POzdsVrB2WZjgRuRMHIQQKNpe64N/qh3ZtH2otEoRoS+s6arAAuAAw==}
+  /electron-to-chromium/1.4.261:
+    resolution: {integrity: sha512-fVXliNUGJ7XUVJSAasPseBbVgJIeyw5M1xIkgXdTSRjlmCqBbiSTsEdLOCJS31Fc8B7CaloQ/BFAg8By3ODLdg==}
     dev: true
 
-  /element-plus/2.2.16_vue@3.2.39:
-    resolution: {integrity: sha512-rvaTMFIujec9YDC5lyaiQv2XVUCHuhVDq2k+9vQxP78N8Wd07iEOGa9pvEVOO2uYc75l4rSl2RE/IWPH/6Mdzw==}
+  /element-plus/2.2.17_vue@3.2.39:
+    resolution: {integrity: sha512-MGwMIE/q+FFD3kgS23x8HIe5043tmD1cTRwjhIX9o6fim1avFnUkrsfYRvybbz4CkyqSb185EheZS5AUPpXh2g==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
@@ -2087,13 +2548,13 @@ packages:
       es-to-primitive: 1.2.1
       function-bind: 1.1.1
       function.prototype.name: 1.1.5
-      get-intrinsic: 1.1.2
+      get-intrinsic: 1.1.3
       get-symbol-description: 1.0.0
       has: 1.0.3
       has-property-descriptors: 1.0.0
       has-symbols: 1.0.3
       internal-slot: 1.0.3
-      is-callable: 1.2.4
+      is-callable: 1.2.7
       is-negative-zero: 2.0.2
       is-regex: 1.1.4
       is-shared-array-buffer: 1.0.2
@@ -2108,11 +2569,41 @@ packages:
       unbox-primitive: 1.0.2
     dev: true
 
+  /es-abstract/1.20.3:
+    resolution: {integrity: sha512-AyrnaKVpMzljIdwjzrj+LxGmj8ik2LckwXacHqrJJ/jxz6dDDBcZ7I7nlHM0FvEW8MfbWJwOd+yT2XzYW49Frw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      es-to-primitive: 1.2.1
+      function-bind: 1.1.1
+      function.prototype.name: 1.1.5
+      get-intrinsic: 1.1.3
+      get-symbol-description: 1.0.0
+      has: 1.0.3
+      has-property-descriptors: 1.0.0
+      has-symbols: 1.0.3
+      internal-slot: 1.0.3
+      is-callable: 1.2.7
+      is-negative-zero: 2.0.2
+      is-regex: 1.1.4
+      is-shared-array-buffer: 1.0.2
+      is-string: 1.0.7
+      is-weakref: 1.0.2
+      object-inspect: 1.12.2
+      object-keys: 1.1.1
+      object.assign: 4.1.4
+      regexp.prototype.flags: 1.4.3
+      safe-regex-test: 1.0.0
+      string.prototype.trimend: 1.0.5
+      string.prototype.trimstart: 1.0.5
+      unbox-primitive: 1.0.2
+    dev: true
+
   /es-get-iterator/1.1.2:
     resolution: {integrity: sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ==}
     dependencies:
       call-bind: 1.0.2
-      get-intrinsic: 1.1.2
+      get-intrinsic: 1.1.3
       has-symbols: 1.0.3
       is-arguments: 1.1.1
       is-map: 2.0.2
@@ -2121,24 +2612,21 @@ packages:
       isarray: 2.0.5
     dev: true
 
+  /es-shim-unscopables/1.0.0:
+    resolution: {integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==}
+    dependencies:
+      has: 1.0.3
+    dev: true
+
   /es-to-primitive/1.2.1:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      is-callable: 1.2.4
+      is-callable: 1.2.7
       is-date-object: 1.0.5
       is-symbol: 1.0.4
     dev: true
 
-  /esbuild-android-64/0.15.5:
-    resolution: {integrity: sha512-dYPPkiGNskvZqmIK29OPxolyY3tp+c47+Fsc2WYSOVjEPWNCHNyqhtFqQadcXMJDQt8eN0NMDukbyQgFcHquXg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-android-64/0.15.7:
     resolution: {integrity: sha512-p7rCvdsldhxQr3YHxptf1Jcd86dlhvc3EQmQJaZzzuAxefO9PvcI0GLOa5nCWem1AJ8iMRu9w0r5TG8pHmbi9w==}
     engines: {node: '>=12'}
@@ -2148,15 +2636,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-android-arm64/0.15.5:
-    resolution: {integrity: sha512-YyEkaQl08ze3cBzI/4Cm1S+rVh8HMOpCdq8B78JLbNFHhzi4NixVN93xDrHZLztlocEYqi45rHHCgA8kZFidFg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-android-arm64/0.15.7:
     resolution: {integrity: sha512-L775l9ynJT7rVqRM5vo+9w5g2ysbOCfsdLV4CWanTZ1k/9Jb3IYlQ06VCI1edhcosTYJRECQFJa3eAvkx72eyQ==}
     engines: {node: '>=12'}
@@ -2166,15 +2645,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-darwin-64/0.15.5:
-    resolution: {integrity: sha512-Cr0iIqnWKx3ZTvDUAzG0H/u9dWjLE4c2gTtRLz4pqOBGjfjqdcZSfAObFzKTInLLSmD0ZV1I/mshhPoYSBMMCQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-darwin-64/0.15.7:
     resolution: {integrity: sha512-KGPt3r1c9ww009t2xLB6Vk0YyNOXh7hbjZ3EecHoVDxgtbUlYstMPDaReimKe6eOEfyY4hBEEeTvKwPsiH5WZg==}
     engines: {node: '>=12'}
@@ -2184,15 +2654,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-darwin-arm64/0.15.5:
-    resolution: {integrity: sha512-WIfQkocGtFrz7vCu44ypY5YmiFXpsxvz2xqwe688jFfSVCnUsCn2qkEVDo7gT8EpsLOz1J/OmqjExePL1dr1Kg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-darwin-arm64/0.15.7:
     resolution: {integrity: sha512-kBIHvtVqbSGajN88lYMnR3aIleH3ABZLLFLxwL2stiuIGAjGlQW741NxVTpUHQXUmPzxi6POqc9npkXa8AcSZQ==}
     engines: {node: '>=12'}
@@ -2202,15 +2663,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-freebsd-64/0.15.5:
-    resolution: {integrity: sha512-M5/EfzV2RsMd/wqwR18CELcenZ8+fFxQAAEO7TJKDmP3knhWSbD72ILzrXFMMwshlPAS1ShCZ90jsxkm+8FlaA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-freebsd-64/0.15.7:
     resolution: {integrity: sha512-hESZB91qDLV5MEwNxzMxPfbjAhOmtfsr9Wnuci7pY6TtEh4UDuevmGmkUIjX/b+e/k4tcNBMf7SRQ2mdNuK/HQ==}
     engines: {node: '>=12'}
@@ -2220,15 +2672,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-freebsd-arm64/0.15.5:
-    resolution: {integrity: sha512-2JQQ5Qs9J0440F/n/aUBNvY6lTo4XP/4lt1TwDfHuo0DY3w5++anw+jTjfouLzbJmFFiwmX7SmUhMnysocx96w==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-freebsd-arm64/0.15.7:
     resolution: {integrity: sha512-dLFR0ChH5t+b3J8w0fVKGvtwSLWCv7GYT2Y2jFGulF1L5HftQLzVGN+6pi1SivuiVSmTh28FwUhi9PwQicXI6Q==}
     engines: {node: '>=12'}
@@ -2238,15 +2681,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-32/0.15.5:
-    resolution: {integrity: sha512-gO9vNnIN0FTUGjvTFucIXtBSr1Woymmx/aHQtuU+2OllGU6YFLs99960UD4Dib1kFovVgs59MTXwpFdVoSMZoQ==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-32/0.15.7:
     resolution: {integrity: sha512-v3gT/LsONGUZcjbt2swrMjwxo32NJzk+7sAgtxhGx1+ZmOFaTRXBAi1PPfgpeo/J//Un2jIKm/I+qqeo4caJvg==}
     engines: {node: '>=12'}
@@ -2256,15 +2690,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-64/0.15.5:
-    resolution: {integrity: sha512-ne0GFdNLsm4veXbTnYAWjbx3shpNKZJUd6XpNbKNUZaNllDZfYQt0/zRqOg0sc7O8GQ+PjSMv9IpIEULXVTVmg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-64/0.15.7:
     resolution: {integrity: sha512-LxXEfLAKwOVmm1yecpMmWERBshl+Kv5YJ/1KnyAr6HRHFW8cxOEsEfisD3sVl/RvHyW//lhYUVSuy9jGEfIRAQ==}
     engines: {node: '>=12'}
@@ -2274,15 +2699,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-arm/0.15.5:
-    resolution: {integrity: sha512-wvAoHEN+gJ/22gnvhZnS/+2H14HyAxM07m59RSLn3iXrQsdS518jnEWRBnJz3fR6BJa+VUTo0NxYjGaNt7RA7Q==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-arm/0.15.7:
     resolution: {integrity: sha512-JKgAHtMR5f75wJTeuNQbyznZZa+pjiUHV7sRZp42UNdyXC6TiUYMW/8z8yIBAr2Fpad8hM1royZKQisqPABPvQ==}
     engines: {node: '>=12'}
@@ -2292,15 +2708,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-arm64/0.15.5:
-    resolution: {integrity: sha512-7EgFyP2zjO065XTfdCxiXVEk+f83RQ1JsryN1X/VSX2li9rnHAt2swRbpoz5Vlrl6qjHrCmq5b6yxD13z6RheA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-arm64/0.15.7:
     resolution: {integrity: sha512-P3cfhudpzWDkglutWgXcT2S7Ft7o2e3YDMrP1n0z2dlbUZghUkKCyaWw0zhp4KxEEzt/E7lmrtRu/pGWnwb9vw==}
     engines: {node: '>=12'}
@@ -2310,15 +2717,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-mips64le/0.15.5:
-    resolution: {integrity: sha512-KdnSkHxWrJ6Y40ABu+ipTZeRhFtc8dowGyFsZY5prsmMSr1ZTG9zQawguN4/tunJ0wy3+kD54GaGwdcpwWAvZQ==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-mips64le/0.15.7:
     resolution: {integrity: sha512-T7XKuxl0VpeFLCJXub6U+iybiqh0kM/bWOTb4qcPyDDwNVhLUiPcGdG2/0S7F93czUZOKP57YiLV8YQewgLHKw==}
     engines: {node: '>=12'}
@@ -2328,15 +2726,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-ppc64le/0.15.5:
-    resolution: {integrity: sha512-QdRHGeZ2ykl5P0KRmfGBZIHmqcwIsUKWmmpZTOq573jRWwmpfRmS7xOhmDHBj9pxv+6qRMH8tLr2fe+ZKQvCYw==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-ppc64le/0.15.7:
     resolution: {integrity: sha512-6mGuC19WpFN7NYbecMIJjeQgvDb5aMuvyk0PDYBJrqAEMkTwg3Z98kEKuCm6THHRnrgsdr7bp4SruSAxEM4eJw==}
     engines: {node: '>=12'}
@@ -2346,15 +2735,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-riscv64/0.15.5:
-    resolution: {integrity: sha512-p+WE6RX+jNILsf+exR29DwgV6B73khEQV0qWUbzxaycxawZ8NE0wA6HnnTxbiw5f4Gx9sJDUBemh9v49lKOORA==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-riscv64/0.15.7:
     resolution: {integrity: sha512-uUJsezbswAYo/X7OU/P+PuL/EI9WzxsEQXDekfwpQ23uGiooxqoLFAPmXPcRAt941vjlY9jtITEEikWMBr+F/g==}
     engines: {node: '>=12'}
@@ -2364,15 +2744,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-s390x/0.15.5:
-    resolution: {integrity: sha512-J2ngOB4cNzmqLHh6TYMM/ips8aoZIuzxJnDdWutBw5482jGXiOzsPoEF4j2WJ2mGnm7FBCO4StGcwzOgic70JQ==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-s390x/0.15.7:
     resolution: {integrity: sha512-+tO+xOyTNMc34rXlSxK7aCwJgvQyffqEM5MMdNDEeMU3ss0S6wKvbBOQfgd5jRPblfwJ6b+bKiz0g5nABpY0QQ==}
     engines: {node: '>=12'}
@@ -2382,15 +2753,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-netbsd-64/0.15.5:
-    resolution: {integrity: sha512-MmKUYGDizYjFia0Rwt8oOgmiFH7zaYlsoQ3tIOfPxOqLssAsEgG0MUdRDm5lliqjiuoog8LyDu9srQk5YwWF3w==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-netbsd-64/0.15.7:
     resolution: {integrity: sha512-yVc4Wz+Pu3cP5hzm5kIygNPrjar/v5WCSoRmIjCPWfBVJkZNb5brEGKUlf+0Y759D48BCWa0WHrWXaNy0DULTQ==}
     engines: {node: '>=12'}
@@ -2400,15 +2762,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-openbsd-64/0.15.5:
-    resolution: {integrity: sha512-2mMFfkLk3oPWfopA9Plj4hyhqHNuGyp5KQyTT9Rc8hFd8wAn5ZrbJg+gNcLMo2yzf8Uiu0RT6G9B15YN9WQyMA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-openbsd-64/0.15.7:
     resolution: {integrity: sha512-GsimbwC4FSR4lN3wf8XmTQ+r8/0YSQo21rWDL0XFFhLHKlzEA4SsT1Tl8bPYu00IU6UWSJ+b3fG/8SB69rcuEQ==}
     engines: {node: '>=12'}
@@ -2418,15 +2771,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-sunos-64/0.15.5:
-    resolution: {integrity: sha512-2sIzhMUfLNoD+rdmV6AacilCHSxZIoGAU2oT7XmJ0lXcZWnCvCtObvO6D4puxX9YRE97GodciRGDLBaiC6x1SA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-sunos-64/0.15.7:
     resolution: {integrity: sha512-8CDI1aL/ts0mDGbWzjEOGKXnU7p3rDzggHSBtVryQzkSOsjCHRVe0iFYUuhczlxU1R3LN/E7HgUO4NXzGGP/Ag==}
     engines: {node: '>=12'}
@@ -2436,15 +2780,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-32/0.15.5:
-    resolution: {integrity: sha512-e+duNED9UBop7Vnlap6XKedA/53lIi12xv2ebeNS4gFmu7aKyTrok7DPIZyU5w/ftHD4MUDs5PJUkQPP9xJRzg==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-windows-32/0.15.7:
     resolution: {integrity: sha512-cOnKXUEPS8EGCzRSFa1x6NQjGhGsFlVgjhqGEbLTPsA7x4RRYiy2RKoArNUU4iR2vHmzqS5Gr84MEumO/wxYKA==}
     engines: {node: '>=12'}
@@ -2454,15 +2789,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-64/0.15.5:
-    resolution: {integrity: sha512-v+PjvNtSASHOjPDMIai9Yi+aP+Vwox+3WVdg2JB8N9aivJ7lyhp4NVU+J0MV2OkWFPnVO8AE/7xH+72ibUUEnw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-windows-64/0.15.7:
     resolution: {integrity: sha512-7MI08Ec2sTIDv+zH6StNBKO+2hGUYIT42GmFyW6MBBWWtJhTcQLinKS6ldIN1d52MXIbiJ6nXyCJ+LpL4jBm3Q==}
     engines: {node: '>=12'}
@@ -2472,15 +2798,6 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-arm64/0.15.5:
-    resolution: {integrity: sha512-Yz8w/D8CUPYstvVQujByu6mlf48lKmXkq6bkeSZZxTA626efQOJb26aDGLzmFWx6eg/FwrXgt6SZs9V8Pwy/aA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-windows-arm64/0.15.7:
     resolution: {integrity: sha512-R06nmqBlWjKHddhRJYlqDd3Fabx9LFdKcjoOy08YLimwmsswlFBJV4rXzZCxz/b7ZJXvrZgj8DDv1ewE9+StMw==}
     engines: {node: '>=12'}
@@ -2496,35 +2813,6 @@ packages:
     requiresBuild: true
     dev: true
 
-  /esbuild/0.15.5:
-    resolution: {integrity: sha512-VSf6S1QVqvxfIsSKb3UKr3VhUCis7wgDbtF4Vd9z84UJr05/Sp2fRKmzC+CSPG/dNAPPJZ0BTBLTT1Fhd6N9Gg==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@esbuild/linux-loong64': 0.15.5
-      esbuild-android-64: 0.15.5
-      esbuild-android-arm64: 0.15.5
-      esbuild-darwin-64: 0.15.5
-      esbuild-darwin-arm64: 0.15.5
-      esbuild-freebsd-64: 0.15.5
-      esbuild-freebsd-arm64: 0.15.5
-      esbuild-linux-32: 0.15.5
-      esbuild-linux-64: 0.15.5
-      esbuild-linux-arm: 0.15.5
-      esbuild-linux-arm64: 0.15.5
-      esbuild-linux-mips64le: 0.15.5
-      esbuild-linux-ppc64le: 0.15.5
-      esbuild-linux-riscv64: 0.15.5
-      esbuild-linux-s390x: 0.15.5
-      esbuild-netbsd-64: 0.15.5
-      esbuild-openbsd-64: 0.15.5
-      esbuild-sunos-64: 0.15.5
-      esbuild-windows-32: 0.15.5
-      esbuild-windows-64: 0.15.5
-      esbuild-windows-arm64: 0.15.5
-    dev: true
-
   /esbuild/0.15.7:
     resolution: {integrity: sha512-7V8tzllIbAQV1M4QoE52ImKu8hT/NLGlGXkiDsbEU5PS6K8Mn09ZnYoS+dcmHxOS9CRsV4IRAMdT3I67IyUNXw==}
     engines: {node: '>=12'}
@@ -2577,24 +2865,227 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /eslint-plugin-vue/9.4.0_eslint@8.23.1:
-    resolution: {integrity: sha512-Nzz2QIJ8FG+rtJaqT/7/ru5ie2XgT9KCudkbN0y3uFYhQ41nuHEaboLAiqwMcK006hZPQv/rVMRhUIwEGhIvfQ==}
+  /eslint-import-resolver-node/0.3.6:
+    resolution: {integrity: sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==}
+    dependencies:
+      debug: 3.2.7
+      resolve: 1.22.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-module-utils/2.7.4_p4qznrk3s64lneh234w7tfu7j4:
+    resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
+      debug: 3.2.7
+      eslint: 8.24.0
+      eslint-import-resolver-node: 0.3.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-antfu/0.27.0_7ilbxdl5iguzcjriqqcg2m5cku:
+    resolution: {integrity: sha512-xjNfATHonE3Do2igOlhwjfL2tlaGnm1EgbsLLkHgdk30oIvJU4bLNxF6wXIuaCdjqmwWIqF6smJbX2YhtaEC4w==}
+    dependencies:
+      '@typescript-eslint/utils': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
+    transitivePeerDependencies:
+      - eslint
+      - supports-color
+      - typescript
+    dev: true
+
+  /eslint-plugin-es/4.1.0_eslint@8.24.0:
+    resolution: {integrity: sha512-GILhQTnjYE2WorX5Jyi5i4dz5ALWxBIdQECVQavL6s7cI76IZTDWleTHkxz/QT3kvcs2QlGHvKLYsSlPOlPXnQ==}
+    engines: {node: '>=8.10.0'}
+    peerDependencies:
+      eslint: '>=4.19.1'
+    dependencies:
+      eslint: 8.24.0
+      eslint-utils: 2.1.0
+      regexpp: 3.2.0
+    dev: true
+
+  /eslint-plugin-eslint-comments/3.2.0_eslint@8.24.0:
+    resolution: {integrity: sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==}
+    engines: {node: '>=6.5.0'}
+    peerDependencies:
+      eslint: '>=4.19.1'
+    dependencies:
+      escape-string-regexp: 1.0.5
+      eslint: 8.24.0
+      ignore: 5.2.0
+    dev: true
+
+  /eslint-plugin-html/7.1.0:
+    resolution: {integrity: sha512-fNLRraV/e6j8e3XYOC9xgND4j+U7b1Rq+OygMlLcMg+wI/IpVbF+ubQa3R78EjKB9njT6TQOlcK5rFKBVVtdfg==}
+    dependencies:
+      htmlparser2: 8.0.1
+    dev: true
+
+  /eslint-plugin-import/2.26.0_2azyxy5wfmd73v3pbt5rvmgcsm:
+    resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
+      array-includes: 3.1.5
+      array.prototype.flat: 1.3.0
+      debug: 2.6.9
+      doctrine: 2.1.0
+      eslint: 8.24.0
+      eslint-import-resolver-node: 0.3.6
+      eslint-module-utils: 2.7.4_p4qznrk3s64lneh234w7tfu7j4
+      has: 1.0.3
+      is-core-module: 2.10.0
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.values: 1.1.5
+      resolve: 1.22.1
+      tsconfig-paths: 3.14.1
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-plugin-jsonc/2.4.0_eslint@8.24.0:
+    resolution: {integrity: sha512-YXy5PjyUL9gFYal6pYijd8P6EmpeWskv7PVhB9Py/AwKPn+hwnQHcIzQILiLfxztfhtWiRIUSzoLe/JThZgSUw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      eslint: 8.24.0
+      eslint-utils: 3.0.0_eslint@8.24.0
+      jsonc-eslint-parser: 2.1.0
+      natural-compare: 1.4.0
+    dev: true
+
+  /eslint-plugin-markdown/3.0.0_eslint@8.24.0:
+    resolution: {integrity: sha512-hRs5RUJGbeHDLfS7ELanT0e29Ocyssf/7kBM+p7KluY5AwngGkDf8Oyu4658/NZSGTTq05FZeWbkxXtbVyHPwg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      eslint: 8.24.0
+      mdast-util-from-markdown: 0.8.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-n/15.3.0_eslint@8.24.0:
+    resolution: {integrity: sha512-IyzPnEWHypCWasDpxeJnim60jhlumbmq0pubL6IOcnk8u2y53s5QfT8JnXy7skjHJ44yWHRb11PLtDHuu1kg/Q==}
+    engines: {node: '>=12.22.0'}
+    peerDependencies:
+      eslint: '>=7.0.0'
+    dependencies:
+      builtins: 5.0.1
+      eslint: 8.24.0
+      eslint-plugin-es: 4.1.0_eslint@8.24.0
+      eslint-utils: 3.0.0_eslint@8.24.0
+      ignore: 5.2.0
+      is-core-module: 2.10.0
+      minimatch: 3.1.2
+      resolve: 1.22.1
+      semver: 7.3.7
+    dev: true
+
+  /eslint-plugin-promise/6.0.1_eslint@8.24.0:
+    resolution: {integrity: sha512-uM4Tgo5u3UWQiroOyDEsYcVMOo7re3zmno0IZmB5auxoaQNIceAbXEkSt8RNrKtaYehARHG06pYK6K1JhtP0Zw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+    dependencies:
+      eslint: 8.24.0
+    dev: true
+
+  /eslint-plugin-unicorn/43.0.2_eslint@8.24.0:
+    resolution: {integrity: sha512-DtqZ5mf/GMlfWoz1abIjq5jZfaFuHzGBZYIeuJfEoKKGWRHr2JiJR+ea+BF7Wx2N1PPRoT/2fwgiK1NnmNE3Hg==}
+    engines: {node: '>=14.18'}
+    peerDependencies:
+      eslint: '>=8.18.0'
+    dependencies:
+      '@babel/helper-validator-identifier': 7.19.1
+      ci-info: 3.4.0
+      clean-regexp: 1.0.0
+      eslint: 8.24.0
+      eslint-utils: 3.0.0_eslint@8.24.0
+      esquery: 1.4.0
+      indent-string: 4.0.0
+      is-builtin-module: 3.2.0
+      lodash: 4.17.21
+      pluralize: 8.0.0
+      read-pkg-up: 7.0.1
+      regexp-tree: 0.1.24
+      safe-regex: 2.1.1
+      semver: 7.3.7
+      strip-indent: 3.0.0
+    dev: true
+
+  /eslint-plugin-vue/9.5.1_eslint@8.24.0:
+    resolution: {integrity: sha512-Y0sL2RY7Xc9S8kNih9lbwHIDmewUg9bfas6WSzsOWRgDXhIHKxRBZYNAnVcXBFfE+bMWHUA5GLChl7TcTYUI8w==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      eslint: 8.23.1
-      eslint-utils: 3.0.0_eslint@8.23.1
+      eslint: 8.24.0
+      eslint-utils: 3.0.0_eslint@8.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.0.10
       semver: 7.3.7
-      vue-eslint-parser: 9.1.0_eslint@8.23.1
+      vue-eslint-parser: 9.1.0_eslint@8.24.0
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
+  /eslint-plugin-yml/1.2.0_eslint@8.24.0:
+    resolution: {integrity: sha512-v0jAU/F5SJg28zkpxwGpY04eGZMWFP6os8u2qaEAIRjSH2GqrNl0yBR5+sMHLU/026kAduxVbvLSqmT3Mu3O0g==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      debug: 4.3.4
+      eslint: 8.24.0
+      lodash: 4.17.21
+      natural-compare: 1.4.0
+      yaml-eslint-parser: 1.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-scope/5.1.1:
+    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 4.3.0
+    dev: true
+
   /eslint-scope/7.1.1:
     resolution: {integrity: sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2603,16 +3094,28 @@ packages:
       estraverse: 5.3.0
     dev: true
 
-  /eslint-utils/3.0.0_eslint@8.23.1:
+  /eslint-utils/2.1.0:
+    resolution: {integrity: sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==}
+    engines: {node: '>=6'}
+    dependencies:
+      eslint-visitor-keys: 1.3.0
+    dev: true
+
+  /eslint-utils/3.0.0_eslint@8.24.0:
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
     peerDependencies:
       eslint: '>=5'
     dependencies:
-      eslint: 8.23.1
+      eslint: 8.24.0
       eslint-visitor-keys: 2.1.0
     dev: true
 
+  /eslint-visitor-keys/1.3.0:
+    resolution: {integrity: sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==}
+    engines: {node: '>=4'}
+    dev: true
+
   /eslint-visitor-keys/2.1.0:
     resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==}
     engines: {node: '>=10'}
@@ -2623,13 +3126,13 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint/8.23.1:
-    resolution: {integrity: sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==}
+  /eslint/8.24.0:
+    resolution: {integrity: sha512-dWFaPhGhTAiPcCgm3f6LI2MBWbogMnTJzFBbhXVRQDJPkr9pGZvVjlVfXd+vyDcWPA2Ic9L2AXPIQM0+vk/cSQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
       '@eslint/eslintrc': 1.3.2
-      '@humanwhocodes/config-array': 0.10.4
+      '@humanwhocodes/config-array': 0.10.5
       '@humanwhocodes/gitignore-to-minimatch': 1.0.2
       '@humanwhocodes/module-importer': 1.0.1
       ajv: 6.12.6
@@ -2639,7 +3142,7 @@ packages:
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.1.1
-      eslint-utils: 3.0.0_eslint@8.23.1
+      eslint-utils: 3.0.0_eslint@8.24.0
       eslint-visitor-keys: 3.3.0
       espree: 9.4.0
       esquery: 1.4.0
@@ -2714,6 +3217,11 @@ packages:
       estraverse: 5.3.0
     dev: true
 
+  /estraverse/4.3.0:
+    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
+    engines: {node: '>=4.0'}
+    dev: true
+
   /estraverse/5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
@@ -2982,12 +3490,12 @@ packages:
     resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
     engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
-      flatted: 3.2.7
+      flatted: 3.2.6
       rimraf: 3.0.2
     dev: true
 
-  /flatted/3.2.7:
-    resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
+  /flatted/3.2.6:
+    resolution: {integrity: sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==}
     dev: true
 
   /follow-redirects/1.15.1:
@@ -3002,7 +3510,7 @@ packages:
   /for-each/0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
     dependencies:
-      is-callable: 1.2.4
+      is-callable: 1.2.7
     dev: true
 
   /for-in/1.0.2:
@@ -3039,6 +3547,10 @@ packages:
       mime-types: 2.1.35
     dev: false
 
+  /fraction.js/4.2.0:
+    resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
+    dev: true
+
   /fragment-cache/0.2.1:
     resolution: {integrity: sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==}
     engines: {node: '>=0.10.0'}
@@ -3076,7 +3588,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.20.2
+      es-abstract: 1.20.3
       functions-have-names: 1.2.3
     dev: true
 
@@ -3103,6 +3615,13 @@ packages:
       has: 1.0.3
       has-symbols: 1.0.3
 
+  /get-intrinsic/1.1.3:
+    resolution: {integrity: sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==}
+    dependencies:
+      function-bind: 1.1.1
+      has: 1.0.3
+      has-symbols: 1.0.3
+
   /get-pixels/3.3.3:
     resolution: {integrity: sha512-5kyGBn90i9tSMUVHTqkgCHsoWoR+/lGbl4yC83Gefyr0HLIhgSWEx/2F/3YgsZ7UpYNuM6pDhDK7zebrUJ5nXg==}
     dependencies:
@@ -3129,7 +3648,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.2
-      get-intrinsic: 1.1.2
+      get-intrinsic: 1.1.3
     dev: true
 
   /get-tsconfig/4.2.0:
@@ -3297,7 +3816,7 @@ packages:
       source-map: 0.6.1
       wordwrap: 1.0.0
     optionalDependencies:
-      uglify-js: 3.17.0
+      uglify-js: 3.17.1
     dev: true
 
   /har-schema/2.0.0:
@@ -3348,7 +3867,7 @@ packages:
   /has-property-descriptors/1.0.0:
     resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
     dependencies:
-      get-intrinsic: 1.1.2
+      get-intrinsic: 1.1.3
     dev: true
 
   /has-symbols/1.0.3:
@@ -3411,16 +3930,6 @@ packages:
       tslib: 2.4.0
     dev: true
 
-  /highlight.js-async-webpack/1.0.4:
-    resolution: {integrity: sha512-IC0AwUgNr7BU8pqheaCEvOQvOtIZwO3I4rtbmT489Ndz8loE31IRmBmT6C4qDCbfZjzNO+k2w3VceZjTQ3JQ8Q==}
-    dev: false
-
-  /highlight.js/9.18.5:
-    resolution: {integrity: sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==}
-    deprecated: Support has ended for 9.x series. Upgrade to @latest
-    requiresBuild: true
-    dev: false
-
   /homedir-polyfill/1.0.3:
     resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
     engines: {node: '>=0.10.0'}
@@ -3461,7 +3970,7 @@ packages:
       he: 1.2.0
       param-case: 3.0.4
       relateurl: 0.2.7
-      terser: 5.15.0
+      terser: 5.14.2
     dev: true
 
   /html-tags/3.2.0:
@@ -3514,7 +4023,7 @@ packages:
       mime: 1.6.0
       minimist: 1.2.6
       opener: 1.5.2
-      portfinder: 1.0.32
+      portfinder: 1.0.28
       secure-compare: 3.0.1
       union: 0.5.0
       url-join: 4.0.1
@@ -3639,7 +4148,7 @@ packages:
     resolution: {integrity: sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      get-intrinsic: 1.1.2
+      get-intrinsic: 1.1.3
       has: 1.0.3
       side-channel: 1.0.4
     dev: true
@@ -3675,6 +4184,17 @@ packages:
       kind-of: 6.0.3
     dev: true
 
+  /is-alphabetical/1.0.4:
+    resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
+    dev: true
+
+  /is-alphanumerical/1.0.4:
+    resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
+    dependencies:
+      is-alphabetical: 1.0.4
+      is-decimal: 1.0.4
+    dev: true
+
   /is-arguments/1.1.1:
     resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
     engines: {node: '>= 0.4'}
@@ -3719,8 +4239,8 @@ packages:
       builtin-modules: 3.3.0
     dev: true
 
-  /is-callable/1.2.4:
-    resolution: {integrity: sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==}
+  /is-callable/1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
     dev: true
 
@@ -3751,6 +4271,10 @@ packages:
       has-tostringtag: 1.0.0
     dev: true
 
+  /is-decimal/1.0.4:
+    resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
+    dev: true
+
   /is-descriptor/0.1.6:
     resolution: {integrity: sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==}
     engines: {node: '>=0.10.0'}
@@ -3803,6 +4327,10 @@ packages:
       is-extglob: 2.1.1
     dev: true
 
+  /is-hexadecimal/1.0.4:
+    resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
+    dev: true
+
   /is-interactive/1.0.0:
     resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
     engines: {node: '>=8'}
@@ -3966,7 +4494,7 @@ packages:
     resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
     dependencies:
       call-bind: 1.0.2
-      get-intrinsic: 1.1.2
+      get-intrinsic: 1.1.3
     dev: true
 
   /is-windows/1.0.2:
@@ -4030,11 +4558,6 @@ packages:
     resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}
     dev: true
 
-  /js-cookie/3.0.1:
-    resolution: {integrity: sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==}
-    engines: {node: '>=12'}
-    dev: false
-
   /js-sdsl/4.1.4:
     resolution: {integrity: sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==}
     dev: true
@@ -4106,6 +4629,16 @@ packages:
     hasBin: true
     dev: true
 
+  /jsonc-eslint-parser/2.1.0:
+    resolution: {integrity: sha512-qCRJWlbP2v6HbmKW7R3lFbeiVWHo+oMJ0j+MizwvauqnCV/EvtAeEeuCgoc/ErtsuoKgYB8U4Ih8AxJbXoE6/g==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.8.0
+      eslint-visitor-keys: 3.3.0
+      espree: 9.4.0
+      semver: 7.3.7
+    dev: true
+
   /jsonc-parser/3.1.0:
     resolution: {integrity: sha512-DRf0QjnNeCUds3xTjKlQQ3DpJD51GvDjJfnxUVWg6PZTo2otSm+slzNAxU/35hF8/oJIKoG9slq30JYOsF2azg==}
     dev: true
@@ -4386,13 +4919,21 @@ packages:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
     dev: true
 
-  /mavon-editor/3.0.0-beta:
-    resolution: {integrity: sha512-cmGKbkgrlvFtrhEVyEUIO2X30R+0p0cWpWcYZ97p2E7zn5flKakgv3gq/4mrzjb6UTmhUiHis38k+a6fP6XUEQ==}
+  /mdast-util-from-markdown/0.8.5:
+    resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
     dependencies:
-      highlight.js: 9.18.5
-      highlight.js-async-webpack: 1.0.4
-      xss: 1.0.14
-    dev: false
+      '@types/mdast': 3.0.10
+      mdast-util-to-string: 2.0.0
+      micromark: 2.11.4
+      parse-entities: 2.0.0
+      unist-util-stringify-position: 2.0.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /mdast-util-to-string/2.0.0:
+    resolution: {integrity: sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==}
+    dev: true
 
   /mdn-data/2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
@@ -4436,6 +4977,15 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /micromark/2.11.4:
+    resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
+    dependencies:
+      debug: 4.3.4
+      parse-entities: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /micromatch/3.1.0:
     resolution: {integrity: sha512-3StSelAE+hnRvMs8IdVW7Uhk8CVed5tp+kLLGlBP6WiRAXS21GPGu/Nat4WNPXj2Eoc24B02SaeoyozPMfj0/g==}
     engines: {node: '>=0.10.0'}
@@ -4553,8 +5103,8 @@ packages:
     hasBin: true
     dev: true
 
-  /mlly/0.5.14:
-    resolution: {integrity: sha512-DgRgNUSX9NIxxCxygX4Xeg9C7GX7OUx1wuQ8cXx9o9LE0e9wrH+OZ9fcnrlEedsC/rtqry3ZhUddC759XD/L0w==}
+  /mlly/0.5.13:
+    resolution: {integrity: sha512-0SK2fqoan+PMjADs4I2egAtrtNtpjqRez6PDTCeAdGjUQNJCvO5o9v2NEq52WA1jFmMU97qBr/JgdvCquehDbA==}
     dependencies:
       acorn: 8.8.0
       pathe: 0.3.5
@@ -4581,7 +5131,7 @@ packages:
     dev: true
 
   /mute-stream/0.0.8:
-    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
+    resolution: {integrity: sha1-FjDEKyJR/4HiooPelqVJfqkuXg0=, tarball: mute-stream/download/mute-stream-0.0.8.tgz}
     dev: true
 
   /nanoid/3.3.4:
@@ -4644,12 +5194,12 @@ packages:
     dev: true
 
   /node-bitmap/0.0.1:
-    resolution: {integrity: sha1-GA6scAPgxwdhjvMTaPYvhLKmkJE=}
+    resolution: {integrity: sha512-Jx5lPaaLdIaOsj2mVLWMWulXF6GQVdyLvNSxmiYCvZ8Ma2hfKX0POoR2kgKOqz+oFsRreq0yYZjQ2wjE9VNzCA==}
     engines: {node: '>=v0.6.5'}
     dev: true
 
-  /node-html-parser/5.4.1:
-    resolution: {integrity: sha512-xy/O2wOEBJsIRLs4avwa1lVY7tIpXXOoHHUJLa0GvnoPPqMG1hgBVl1tNI3GHOwRktTVZy+Y6rjghk4B9/NLyg==}
+  /node-html-parser/5.3.3:
+    resolution: {integrity: sha512-ncg1033CaX9UexbyA7e1N0aAoAYRDiV8jkTvzEnfd1GDvzFdrsXLzR4p4ik8mwLgnaKP/jyUFWDy9q3jvRT2Jw==}
     dependencies:
       css-select: 4.3.0
       he: 1.2.0
@@ -4659,7 +5209,7 @@ packages:
     resolution: {integrity: sha512-aKLPxiBoFTNUovvtK8j/Whc4PZREkYx6htw2HJPiU8wYquXmN8pkd9B3xlFo6AJ4ZlzFsQSf/NXR5xET8EqRYw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dependencies:
-      '@types/inquirer': 8.2.3
+      '@types/inquirer': 8.2.1
       change-case: 4.1.2
       del: 6.1.1
       globby: 13.1.2
@@ -4702,6 +5252,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /normalize-range/0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /normalize-wheel-es/1.2.0:
     resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
     dev: false
@@ -4803,6 +5358,15 @@ packages:
       isobject: 3.0.1
     dev: true
 
+  /object.values/1.1.5:
+    resolution: {integrity: sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.3
+    dev: true
+
   /omggif/1.0.10:
     resolution: {integrity: sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw==}
     dev: true
@@ -4951,6 +5515,17 @@ packages:
       data-uri-to-buffer: 0.0.3
     dev: true
 
+  /parse-entities/2.0.0:
+    resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
+    dependencies:
+      character-entities: 1.2.4
+      character-entities-legacy: 1.1.4
+      character-reference-invalid: 1.1.4
+      is-alphanumerical: 1.0.4
+      is-decimal: 1.0.4
+      is-hexadecimal: 1.0.4
+    dev: true
+
   /parse-filepath/1.0.2:
     resolution: {integrity: sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==}
     engines: {node: '>=0.8'}
@@ -5073,7 +5648,7 @@ packages:
     hasBin: true
     dev: true
 
-  /pinia/2.0.22_vue@3.2.39:
+  /pinia/2.0.22_arz4dztosvwy2ghjrlh2wdhejm:
     resolution: {integrity: sha512-u+b8/BC+tmvo3ACbYO2w5NfxHWFOjvvw9DQnyT0dW8aUMCPRQT5QnfZ5R5W2MzZBMTeZRMQI7V/QFbafmM9QHw==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
@@ -5086,8 +5661,9 @@ packages:
         optional: true
     dependencies:
       '@vue/devtools-api': 6.2.1
+      typescript: 4.8.3
       vue: 3.2.39
-      vue-demi: 0.13.11_vue@3.2.39
+      vue-demi: 0.13.6_vue@3.2.39
     dev: false
 
   /pixelsmith/2.6.0:
@@ -5108,7 +5684,7 @@ packages:
     resolution: {integrity: sha512-s214f/xkRpwlwVBToWq9Mu0XlU3HhZMYCnr2var8+jjbavBHh/VCh4pBLsJW29rJ//B1jb4HlpMIaNIMH+W2/w==}
     dependencies:
       jsonc-parser: 3.1.0
-      mlly: 0.5.14
+      mlly: 0.5.13
       pathe: 0.3.5
     dev: true
 
@@ -5127,6 +5703,11 @@ packages:
       v8flags: 4.0.0
     dev: true
 
+  /pluralize/8.0.0:
+    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
+    engines: {node: '>=4'}
+    dev: true
+
   /pngjs-nozlib/1.0.0:
     resolution: {integrity: sha512-N1PggqLp9xDqwAoKvGohmZ3m4/N9xpY0nDZivFqQLcpLHmliHnCp9BuNCsOeqHWMuEEgFjpEaq9dZq6RZyy0fA==}
     engines: {iojs: '>= 1.0.0', node: '>=0.10.0'}
@@ -5137,8 +5718,8 @@ packages:
     engines: {node: '>=4.0.0'}
     dev: true
 
-  /portfinder/1.0.32:
-    resolution: {integrity: sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==}
+  /portfinder/1.0.28:
+    resolution: {integrity: sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==}
     engines: {node: '>= 0.12.0'}
     dependencies:
       async: 2.6.4
@@ -5159,8 +5740,8 @@ packages:
     dependencies:
       htmlparser2: 8.0.1
       js-tokens: 8.0.0
-      postcss: 8.4.16
-      postcss-safe-parser: 6.0.0_postcss@8.4.16
+      postcss: 8.4.14
+      postcss-safe-parser: 6.0.0_postcss@8.4.14
     dev: true
 
   /postcss-media-query-parser/0.2.3:
@@ -5179,6 +5760,15 @@ packages:
     resolution: {integrity: sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==}
     dev: true
 
+  /postcss-safe-parser/6.0.0_postcss@8.4.14:
+    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+    dependencies:
+      postcss: 8.4.14
+    dev: true
+
   /postcss-safe-parser/6.0.0_postcss@8.4.16:
     resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
     engines: {node: '>=12.0'}
@@ -5217,6 +5807,15 @@ packages:
       supports-color: 3.2.3
     dev: true
 
+  /postcss/8.4.14:
+    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.4
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
   /postcss/8.4.16:
     resolution: {integrity: sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -5409,6 +6008,11 @@ packages:
       safe-regex: 1.1.0
     dev: true
 
+  /regexp-tree/0.1.24:
+    resolution: {integrity: sha512-s2aEVuLhvnVJW6s/iPgEGK6R+/xngd2jNQ+xy4bXNDKxZKJH6jpPHY6kVeVv1IeLCHgswRj+Kl3ELaDjG6V1iw==}
+    hasBin: true
+    dev: true
+
   /regexp.prototype.flags/1.4.3:
     resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
     engines: {node: '>= 0.4'}
@@ -5439,7 +6043,7 @@ packages:
     dev: true
 
   /replace-ext/0.0.1:
-    resolution: {integrity: sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=}
+    resolution: {integrity: sha512-AFBWBy9EVRTa/LhEcG8QDP3FvpwZqmvN2QFDuJswFeaVhWnZMp8q3E6Zd90SR04PlIwfGdyVjNyLPyen/ek5CQ==}
     engines: {node: '>= 0.4'}
     dev: true
 
@@ -5581,18 +6185,32 @@ packages:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: true
 
+  /safe-regex-test/1.0.0:
+    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.1.3
+      is-regex: 1.1.4
+    dev: true
+
   /safe-regex/1.1.0:
     resolution: {integrity: sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==}
     dependencies:
       ret: 0.1.15
     dev: true
 
+  /safe-regex/2.1.1:
+    resolution: {integrity: sha512-rx+x8AMzKb5Q5lQ95Zoi6ZbJqwCLkqi3XuJXp5P3rT8OEc6sZCJG5AE5dU3lsgRr/F4Bs31jSlVN+j5KrsGu9A==}
+    dependencies:
+      regexp-tree: 0.1.24
+    dev: true
+
   /safer-buffer/2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
-  /sass/1.54.9:
-    resolution: {integrity: sha512-xb1hjASzEH+0L0WI9oFjqhRi51t/gagWnxLiwUNMltA0Ab6jIDkAacgKiGYKM9Jhy109osM7woEEai6SXeJo5Q==}
+  /sass/1.55.0:
+    resolution: {integrity: sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==}
     engines: {node: '>=12.0.0'}
     hasBin: true
     dependencies:
@@ -5618,7 +6236,7 @@ packages:
     dev: true
 
   /secure-compare/3.0.1:
-    resolution: {integrity: sha1-8aAymzCLIh+uN7mXTz1XjQypmeM=}
+    resolution: {integrity: sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==}
     dev: true
 
   /semver/5.0.3:
@@ -5803,7 +6421,7 @@ packages:
     resolution: {integrity: sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==}
     dependencies:
       spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.12
+      spdx-license-ids: 3.0.11
     dev: true
 
   /spdx-exceptions/2.3.0:
@@ -5814,11 +6432,11 @@ packages:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
     dependencies:
       spdx-exceptions: 2.3.0
-      spdx-license-ids: 3.0.12
+      spdx-license-ids: 3.0.11
     dev: true
 
-  /spdx-license-ids/3.0.12:
-    resolution: {integrity: sha512-rr+VVSXtRhO4OHbXUiAF7xW3Bo9DuuF6C5jH+q/x15j2jniycgKbxU09Hr0WqlSLUs4i4ltHGXqTe7VHclYWyA==}
+  /spdx-license-ids/3.0.11:
+    resolution: {integrity: sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==}
     dev: true
 
   /split-string/3.1.0:
@@ -5921,7 +6539,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.20.2
+      es-abstract: 1.20.3
     dev: true
 
   /string.prototype.trimstart/1.0.5:
@@ -5929,7 +6547,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.20.2
+      es-abstract: 1.20.3
     dev: true
 
   /string_decoder/0.10.31:
@@ -5984,6 +6602,11 @@ packages:
       is-utf8: 0.2.1
     dev: true
 
+  /strip-bom/3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+    dev: true
+
   /strip-final-newline/3.0.0:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
     engines: {node: '>=12'}
@@ -6011,7 +6634,7 @@ packages:
     resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
     dev: true
 
-  /stylelint-config-html/1.1.0_35nbotopgds64plu275w6fpq24:
+  /stylelint-config-html/1.1.0_kt2wnpkut4en7qamswpshuiu4m:
     resolution: {integrity: sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==}
     engines: {node: ^12 || >=14}
     peerDependencies:
@@ -6019,23 +6642,23 @@ packages:
       stylelint: '>=14.0.0'
     dependencies:
       postcss-html: 1.5.0
-      stylelint: 14.11.0
+      stylelint: 14.12.1
     dev: true
 
-  /stylelint-config-recommended-scss/7.0.0_stylelint@14.11.0:
+  /stylelint-config-recommended-scss/7.0.0_stylelint@14.12.1:
     resolution: {integrity: sha512-rGz1J4rMAyJkvoJW4hZasuQBB7y9KIrShb20l9DVEKKZSEi1HAy0vuNlR8HyCKy/jveb/BdaQFcoiYnmx4HoiA==}
     peerDependencies:
       stylelint: ^14.4.0
     dependencies:
       postcss-scss: 4.0.5
-      stylelint: 14.11.0
-      stylelint-config-recommended: 8.0.0_stylelint@14.11.0
-      stylelint-scss: 4.3.0_stylelint@14.11.0
+      stylelint: 14.12.1
+      stylelint-config-recommended: 8.0.0_stylelint@14.12.1
+      stylelint-scss: 4.3.0_stylelint@14.12.1
     transitivePeerDependencies:
       - postcss
     dev: true
 
-  /stylelint-config-recommended-vue/1.4.0_35nbotopgds64plu275w6fpq24:
+  /stylelint-config-recommended-vue/1.4.0_kt2wnpkut4en7qamswpshuiu4m:
     resolution: {integrity: sha512-DVJqyX2KvMCn9U0+keL12r7xlsH26K4Vg8NrIZuq5MoF7g82DpMp326Om4E0Q+Il1o+bTHuUyejf2XAI0iD04Q==}
     engines: {node: ^12 || >=14}
     peerDependencies:
@@ -6044,37 +6667,72 @@ packages:
     dependencies:
       postcss-html: 1.5.0
       semver: 7.3.7
-      stylelint: 14.11.0
-      stylelint-config-html: 1.1.0_35nbotopgds64plu275w6fpq24
-      stylelint-config-recommended: 9.0.0_stylelint@14.11.0
+      stylelint: 14.12.1
+      stylelint-config-html: 1.1.0_kt2wnpkut4en7qamswpshuiu4m
+      stylelint-config-recommended: 9.0.0_stylelint@14.12.1
     dev: true
 
-  /stylelint-config-recommended/8.0.0_stylelint@14.11.0:
+  /stylelint-config-recommended/8.0.0_stylelint@14.12.1:
     resolution: {integrity: sha512-IK6dWvE000+xBv9jbnHOnBq01gt6HGVB2ZTsot+QsMpe82doDQ9hvplxfv4YnpEuUwVGGd9y6nbaAnhrjcxhZQ==}
     peerDependencies:
       stylelint: ^14.8.0
     dependencies:
-      stylelint: 14.11.0
+      stylelint: 14.12.1
     dev: true
 
-  /stylelint-config-recommended/9.0.0_stylelint@14.11.0:
+  /stylelint-config-recommended/9.0.0_stylelint@14.12.1:
     resolution: {integrity: sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==}
     peerDependencies:
       stylelint: ^14.10.0
     dependencies:
-      stylelint: 14.11.0
+      stylelint: 14.12.1
     dev: true
 
-  /stylelint-config-standard/28.0.0_stylelint@14.11.0:
+  /stylelint-config-standard-scss/5.0.0_stylelint@14.12.1:
+    resolution: {integrity: sha512-zoXLibojHZYPFjtkc4STZtAJ2yGTq3Bb4MYO0oiyO6f/vNxDKRcSDZYoqN260Gv2eD5niQIr1/kr5SXlFj9kcQ==}
+    peerDependencies:
+      stylelint: ^14.9.0
+    dependencies:
+      stylelint: 14.12.1
+      stylelint-config-recommended-scss: 7.0.0_stylelint@14.12.1
+      stylelint-config-standard: 26.0.0_stylelint@14.12.1
+    transitivePeerDependencies:
+      - postcss
+    dev: true
+
+  /stylelint-config-standard-vue/1.0.0_kt2wnpkut4en7qamswpshuiu4m:
+    resolution: {integrity: sha512-wAzU7p6DSlo04pWfCbOcaMq09Nojt0FEsbdxhCBTdC7IguD9ZVl7FP/bvyA0HAHjZGC4JkW7m6WiQaoVMDSuFw==}
+    engines: {node: ^12 || >=14}
+    peerDependencies:
+      postcss-html: ^1.0.0
+      stylelint: '>=14.0.0'
+    dependencies:
+      postcss-html: 1.5.0
+      stylelint: 14.12.1
+      stylelint-config-html: 1.1.0_kt2wnpkut4en7qamswpshuiu4m
+      stylelint-config-recommended-vue: 1.4.0_kt2wnpkut4en7qamswpshuiu4m
+      stylelint-config-standard: 28.0.0_stylelint@14.12.1
+    dev: true
+
+  /stylelint-config-standard/26.0.0_stylelint@14.12.1:
+    resolution: {integrity: sha512-hUuB7LaaqM8abvkOO84wh5oYSkpXgTzHu2Zza6e7mY+aOmpNTjoFBRxSLlzY0uAOMWEFx0OMKzr+reG1BUtcqQ==}
+    peerDependencies:
+      stylelint: ^14.9.0
+    dependencies:
+      stylelint: 14.12.1
+      stylelint-config-recommended: 8.0.0_stylelint@14.12.1
+    dev: true
+
+  /stylelint-config-standard/28.0.0_stylelint@14.12.1:
     resolution: {integrity: sha512-q/StuowDdDmFCravzGHAwgS9pjX0bdOQUEBBDIkIWsQuYGgYz/xsO8CM6eepmIQ1fc5bKdDVimlJZ6MoOUcJ5Q==}
     peerDependencies:
       stylelint: ^14.11.0
     dependencies:
-      stylelint: 14.11.0
-      stylelint-config-recommended: 9.0.0_stylelint@14.11.0
+      stylelint: 14.12.1
+      stylelint-config-recommended: 9.0.0_stylelint@14.12.1
     dev: true
 
-  /stylelint-scss/4.3.0_stylelint@14.11.0:
+  /stylelint-scss/4.3.0_stylelint@14.12.1:
     resolution: {integrity: sha512-GvSaKCA3tipzZHoz+nNO7S02ZqOsdBzMiCx9poSmLlb3tdJlGddEX/8QzCOD8O7GQan9bjsvLMsO5xiw6IhhIQ==}
     peerDependencies:
       stylelint: ^14.5.1
@@ -6084,11 +6742,11 @@ packages:
       postcss-resolve-nested-selector: 0.1.1
       postcss-selector-parser: 6.0.10
       postcss-value-parser: 4.2.0
-      stylelint: 14.11.0
+      stylelint: 14.12.1
     dev: true
 
-  /stylelint/14.11.0:
-    resolution: {integrity: sha512-OTLjLPxpvGtojEfpESWM8Ir64Z01E89xsisaBMUP/ngOx1+4VG2DPRcUyCCiin9Rd3kPXPsh/uwHd9eqnvhsYA==}
+  /stylelint/14.12.1:
+    resolution: {integrity: sha512-ZEM4TuksChMBfuPadQsHUkbOoRySAT9QMfDvvYxdAchOJl0p+csTMBXOu6ORAAxKhwBmxqJiep8V88bXfNs3EQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
     dependencies:
@@ -6098,7 +6756,7 @@ packages:
       cosmiconfig: 7.0.1
       css-functions-list: 3.1.0
       debug: 4.3.4
-      fast-glob: 3.2.11
+      fast-glob: 3.2.12
       fastest-levenshtein: 1.0.16
       file-entry-cache: 6.0.1
       global-modules: 2.0.0
@@ -6125,7 +6783,7 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       style-search: 0.1.0
-      supports-hyperlinks: 2.2.0
+      supports-hyperlinks: 2.3.0
       svg-tags: 1.0.0
       table: 6.8.0
       v8-compile-cache: 2.3.0
@@ -6160,8 +6818,8 @@ packages:
       has-flag: 4.0.0
     dev: true
 
-  /supports-hyperlinks/2.2.0:
-    resolution: {integrity: sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==}
+  /supports-hyperlinks/2.3.0:
+    resolution: {integrity: sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==}
     engines: {node: '>=8'}
     dependencies:
       has-flag: 4.0.0
@@ -6222,8 +6880,8 @@ packages:
       strip-ansi: 6.0.1
     dev: true
 
-  /terser/5.15.0:
-    resolution: {integrity: sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==}
+  /terser/5.14.2:
+    resolution: {integrity: sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
@@ -6318,10 +6976,33 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /tsconfig-paths/3.14.1:
+    resolution: {integrity: sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==}
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.1
+      minimist: 1.2.6
+      strip-bom: 3.0.0
+    dev: true
+
+  /tslib/1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+    dev: true
+
   /tslib/2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
     dev: true
 
+  /tsutils/3.21.0_typescript@4.8.3:
+    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
+    engines: {node: '>= 6'}
+    peerDependencies:
+      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
+    dependencies:
+      tslib: 1.14.1
+      typescript: 4.8.3
+    dev: true
+
   /tsx/3.8.2:
     resolution: {integrity: sha512-Jf9izq3Youry5aEarspf6Gm+v/IE2A2xP7YVhtNH1VSCpM0jjACg7C3oD5rIoLBfXWGJSZj4KKC2bwE0TgLb2Q==}
     hasBin: true
@@ -6379,12 +7060,17 @@ packages:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
     dev: true
 
+  /typescript/4.8.3:
+    resolution: {integrity: sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+
   /ufo/0.8.5:
     resolution: {integrity: sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==}
     dev: true
 
-  /uglify-js/3.17.0:
-    resolution: {integrity: sha512-aTeNPVmgIMPpm1cxXr2Q/nEbvkmV8yq66F3om7X3P/cvOXQ0TMQ64Wk63iyT1gPlmdmGzjGpyLh1f3y8MZWXGg==}
+  /uglify-js/3.17.1:
+    resolution: {integrity: sha512-+juFBsLLw7AqMaqJ0GFvlsGZwdQfI2ooKQB39PSBgMnMakcFosi9O8jCwE+2/2nMNcc0z63r9mwjoDG8zr+q0Q==}
     engines: {node: '>=0.8.0'}
     hasBin: true
     requiresBuild: true
@@ -6416,7 +7102,7 @@ packages:
     resolution: {integrity: sha512-BQFnUDuAQ4Yf/cYY5LNrK9NCJFKriaRbD9uR1fTeXnBeoa97W0i41qkZfGO9pSo8I5KzjAcSY2XYtdf0oKd7KQ==}
     dev: true
 
-  /unimport/0.6.7_vite@3.1.1:
+  /unimport/0.6.7_vite@3.1.3:
     resolution: {integrity: sha512-EMoVqDjswHkU+nD098QYHXH7Mkw7KwGDQAyeRF2lgairJnuO+wpkhIcmCqrD1OPJmsjkTbJ2tW6Ap8St0PuWZA==}
     dependencies:
       '@rollup/pluginutils': 4.2.1
@@ -6424,11 +7110,11 @@ packages:
       fast-glob: 3.2.12
       local-pkg: 0.4.2
       magic-string: 0.26.2
-      mlly: 0.5.14
+      mlly: 0.5.13
       pathe: 0.3.5
       scule: 0.3.2
       strip-literal: 0.4.0
-      unplugin: 0.9.5_vite@3.1.1
+      unplugin: 0.9.3_vite@3.1.3
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -6457,6 +7143,12 @@ packages:
     resolution: {integrity: sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==}
     dev: true
 
+  /unist-util-stringify-position/2.0.3:
+    resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: true
+
   /universalify/2.0.0:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
@@ -6467,7 +7159,7 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /unplugin-auto-import/0.11.2_j257a7fvehe4l6224muo7g6tiu:
+  /unplugin-auto-import/0.11.2_ddncce744ormlo74xpe4fre3qq:
     resolution: {integrity: sha512-1+VwBfn9dtiYv9SQLKP1AvZolUbK9xTVeAT+iOcEk4EHSFUlmIqBVLEKI76cifSQTLOJ3rZyPrEgptf3SZNLlQ==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -6481,8 +7173,8 @@ packages:
       '@vueuse/core': 9.2.0_vue@3.2.39
       local-pkg: 0.4.2
       magic-string: 0.26.2
-      unimport: 0.6.7_vite@3.1.1
-      unplugin: 0.9.5_vite@3.1.1
+      unimport: 0.6.7_vite@3.1.3
+      unplugin: 0.9.3_vite@3.1.3
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -6490,7 +7182,7 @@ packages:
       - webpack
     dev: true
 
-  /unplugin-vue-components/0.22.7_vite@3.1.1+vue@3.2.39:
+  /unplugin-vue-components/0.22.7_vite@3.1.3+vue@3.2.39:
     resolution: {integrity: sha512-MJEAKJF9bRykTRvJ4WXF0FNMAyt1PX3iwpu2NN+li35sAKjQv6sC1col5aZDLiwDZDo2AGwxNkzLJFKaun9qHw==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -6509,7 +7201,7 @@ packages:
       magic-string: 0.26.3
       minimatch: 5.1.0
       resolve: 1.22.1
-      unplugin: 0.9.5_vite@3.1.1
+      unplugin: 0.9.5_vite@3.1.3
       vue: 3.2.39
     transitivePeerDependencies:
       - esbuild
@@ -6519,7 +7211,31 @@ packages:
       - webpack
     dev: true
 
-  /unplugin/0.9.5_vite@3.1.1:
+  /unplugin/0.9.3_vite@3.1.3:
+    resolution: {integrity: sha512-GWXxizZG+tobNs8fuGTCeilerkkfZTZax2iivuE4pxLaF9wTnPJHOq8tbLKDb5ohVb+2BXNjrU9xx59yWTUnuw==}
+    peerDependencies:
+      esbuild: '>=0.13'
+      rollup: ^2.50.0
+      vite: ^2.3.0 || ^3.0.0-0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      acorn: 8.8.0
+      chokidar: 3.5.3
+      vite: 3.1.3_sass@1.55.0
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.4.4
+    dev: true
+
+  /unplugin/0.9.5_vite@3.1.3:
     resolution: {integrity: sha512-luraheyfxwtvkvHpsOvMNv7IjLdORTWKZp0gWYNHGLi2ImON3iIZOj464qEyyEwLA/EMt12fC415HW9zRpOfTg==}
     peerDependencies:
       esbuild: '>=0.13'
@@ -6538,7 +7254,7 @@ packages:
     dependencies:
       acorn: 8.8.0
       chokidar: 3.5.3
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.55.0
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.4.4
     dev: true
@@ -6551,13 +7267,13 @@ packages:
       isobject: 3.0.1
     dev: true
 
-  /update-browserslist-db/1.0.5_browserslist@4.21.3:
-    resolution: {integrity: sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==}
+  /update-browserslist-db/1.0.9_browserslist@4.21.4:
+    resolution: {integrity: sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
-      browserslist: 4.21.3
+      browserslist: 4.21.4
       escalade: 3.1.1
       picocolors: 1.0.0
     dev: true
@@ -6599,7 +7315,7 @@ packages:
     dev: true
 
   /utils-merge/1.0.1:
-    resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=}
+    resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=, tarball: utils-merge/download/utils-merge-1.0.1.tgz}
     engines: {node: '>= 0.4.0'}
     dev: true
 
@@ -6631,7 +7347,7 @@ packages:
     dev: true
 
   /verror/1.10.0:
-    resolution: {integrity: sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=}
+    resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
     engines: {'0': node >=0.6.0}
     dependencies:
       assert-plus: 1.0.0
@@ -6662,7 +7378,7 @@ packages:
     resolution: {integrity: sha512-GDyecw4mb7uUeE6BFsicFOJ4sL9KWof+QNRvASXehpNNwwQVYCtB9HAjvKt6ixgvwSp6jWR1gM9dKLqNDZaEjQ==}
     dev: true
 
-  /vite-plugin-compression/0.5.1_vite@3.1.1:
+  /vite-plugin-compression/0.5.1_vite@3.1.3:
     resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
     peerDependencies:
       vite: '>=2.0.0'
@@ -6670,12 +7386,12 @@ packages:
       chalk: 4.1.2
       debug: 4.3.4
       fs-extra: 10.1.0
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.55.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-plugin-html/3.2.0_vite@3.1.1:
+  /vite-plugin-html/3.2.0_vite@3.1.3:
     resolution: {integrity: sha512-2VLCeDiHmV/BqqNn5h2V+4280KRgQzCFN47cst3WiNK848klESPQnzuC3okH5XHtgwHH/6s1Ho/YV6yIO0pgoQ==}
     peerDependencies:
       vite: '>=2.0.0'
@@ -6690,12 +7406,12 @@ packages:
       fast-glob: 3.2.11
       fs-extra: 10.1.0
       html-minifier-terser: 6.1.0
-      node-html-parser: 5.4.1
+      node-html-parser: 5.3.3
       pathe: 0.2.0
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.55.0
     dev: true
 
-  /vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@3.1.1:
+  /vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@3.1.3:
     resolution: {integrity: sha512-/Rm59oPppe/ncbkSrUuAxIQihlI2YcBmnbR4ST1RA2VzM1C0tEQc1KlbQvnUGhXECAGTaQN2JyasiwXP6EtKgg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -6712,13 +7428,13 @@ packages:
       fast-glob: 3.2.11
       mockjs: 1.1.0
       path-to-regexp: 6.2.1
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.55.0
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /vite-plugin-pages/0.26.0_erjgrqwit2pomeuknzqk3muw2e:
+  /vite-plugin-pages/0.26.0_vite@3.1.3:
     resolution: {integrity: sha512-yJZvwHEt7puYIf19S89IvkDsWPjWleSied4H8hmdW6i8buCA93z1UAU1ipW1d8fNKrC4FzXsUHHbPm6+kl1p9w==}
     peerDependencies:
       '@vue/compiler-sfc': ^2.7.0 || ^3.0.0
@@ -6728,27 +7444,26 @@ packages:
         optional: true
     dependencies:
       '@types/debug': 4.1.7
-      '@vue/compiler-sfc': 3.2.39
       debug: 4.3.4
       deep-equal: 2.0.5
       extract-comments: 1.1.0
-      fast-glob: 3.2.11
+      fast-glob: 3.2.12
       json5: 2.2.1
       local-pkg: 0.4.2
       picocolors: 1.0.0
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.55.0
       yaml: 2.1.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-plugin-restart/0.2.0_vite@3.1.1:
+  /vite-plugin-restart/0.2.0_vite@3.1.3:
     resolution: {integrity: sha512-DDgZh2EM0b2ZvqMpk3AOiXMP/ZOLhrJhUvcYkV21qbBl85tM5ezzt2OUXamV0wIsOzz3UDFAnLcHs3k6G3QMWw==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0
     dependencies:
       micromatch: 4.0.5
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.55.0
     dev: true
 
   /vite-plugin-spritesmith/0.1.1:
@@ -6762,12 +7477,12 @@ packages:
       spritesmith: 3.4.0
     dev: true
 
-  /vite-plugin-svg-icons/2.0.1_vite@3.1.1:
+  /vite-plugin-svg-icons/2.0.1_vite@3.1.3:
     resolution: {integrity: sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==}
     peerDependencies:
       vite: '>=2.0.0'
     dependencies:
-      '@types/svgo': 2.6.4
+      '@types/svgo': 2.6.3
       cors: 2.8.5
       debug: 4.3.4
       etag: 1.8.1
@@ -6775,40 +7490,40 @@ packages:
       pathe: 0.2.0
       svg-baker: 1.7.0
       svgo: 2.8.0
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.55.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-plugin-vue-layouts/0.6.0_npdn3jm2zg4g7dngdn2zkjbyju:
+  /vite-plugin-vue-layouts/0.6.0_xkhgfkrxwsspbw2hhglk5wewfa:
     resolution: {integrity: sha512-7QX7o/NpCfs+hyXphwYfmPqAEQ6qd4uXsvI0VsovjGT2eCoEE5dMdP6L+uqqNWY4uqv7oCvtinecZmbzZv/9Rg==}
     peerDependencies:
       vite: ^2.5.0
       vue: ^2.6.12 || ^3.2.4
       vue-router: ^3.5.1 || ^ 4.0.11
     dependencies:
-      '@vue/compiler-sfc': 3.2.39
+      '@vue/compiler-sfc': 3.2.37
       debug: 4.3.4
       fast-glob: 3.2.11
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.55.0
       vue: 3.2.39
       vue-router: 4.1.5_vue@3.2.39
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-plugin-vue-setup-extend/0.4.0_vite@3.1.1:
+  /vite-plugin-vue-setup-extend/0.4.0_vite@3.1.3:
     resolution: {integrity: sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ==}
     peerDependencies:
       vite: '>=2.0.0'
     dependencies:
-      '@vue/compiler-sfc': 3.2.39
+      '@vue/compiler-sfc': 3.2.37
       magic-string: 0.25.9
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.55.0
     dev: true
 
-  /vite/3.1.1_sass@1.54.9:
-    resolution: {integrity: sha512-hgxQWev/AL7nWYrqByYo8nfcH9n97v6oFsta9+JX8h6cEkni7nHKP2kJleNYV2kcGhE8jsbaY1aStwPZXzPbgA==}
+  /vite/3.1.3_sass@1.55.0:
+    resolution: {integrity: sha512-/3XWiktaopByM5bd8dqvHxRt5EEgRikevnnrpND0gRfNkrMrPaGGexhtLCzv15RcCMtV2CLw+BPas8YFeSG0KA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -6830,13 +7545,13 @@ packages:
       postcss: 8.4.16
       resolve: 1.22.1
       rollup: 2.78.1
-      sass: 1.54.9
+      sass: 1.55.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /vue-demi/0.13.11_vue@3.2.39:
-    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
+  /vue-demi/0.13.6_vue@3.2.39:
+    resolution: {integrity: sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
@@ -6849,14 +7564,14 @@ packages:
     dependencies:
       vue: 3.2.39
 
-  /vue-eslint-parser/9.1.0_eslint@8.23.1:
+  /vue-eslint-parser/9.1.0_eslint@8.24.0:
     resolution: {integrity: sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
       debug: 4.3.4
-      eslint: 8.23.1
+      eslint: 8.24.0
       eslint-scope: 7.1.1
       eslint-visitor-keys: 3.3.0
       espree: 9.4.0
@@ -6875,6 +7590,17 @@ packages:
       '@vue/devtools-api': 6.2.1
       vue: 3.2.39
 
+  /vue-tsc/0.40.13_typescript@4.8.3:
+    resolution: {integrity: sha512-xzuN3g5PnKfJcNrLv4+mAjteMd5wLm5fRhW0034OfNJZY4WhB07vhngea/XeGn7wNYt16r7syonzvW/54dcNiA==}
+    hasBin: true
+    peerDependencies:
+      typescript: '*'
+    dependencies:
+      '@volar/vue-language-core': 0.40.13
+      '@volar/vue-typescript': 0.40.13
+      typescript: 4.8.3
+    dev: true
+
   /vue/3.2.39:
     resolution: {integrity: sha512-tRkguhRTw9NmIPXhzk21YFBqXHT2t+6C6wPOgQ50fcFVWnPdetmRqbmySRHznrYjX2E47u0cGlKGcxKZJ38R/g==}
     dependencies:
@@ -6996,15 +7722,6 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /xss/1.0.14:
-    resolution: {integrity: sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==}
-    engines: {node: '>= 0.10.0'}
-    hasBin: true
-    dependencies:
-      commander: 2.20.3
-      cssfilter: 0.0.10
-    dev: false
-
   /xtend/4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
@@ -7014,6 +7731,15 @@ packages:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
 
+  /yaml-eslint-parser/1.1.0:
+    resolution: {integrity: sha512-b464Q1fYiX1oYx2kE8k4mEp6S9Prk+tfDsY/IPxQ0FCjEuj3AKko5Skf3/yQJeYTTDyjDE+aWIJemnv29HvEWQ==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    dependencies:
+      eslint-visitor-keys: 3.3.0
+      lodash: 4.17.21
+      yaml: 2.1.1
+    dev: true
+
   /yaml/1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000..90d9fffc
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+}
diff --git a/public/index.css b/public/browser_upgrade/index.css
similarity index 100%
rename from public/index.css
rename to public/browser_upgrade/index.css
diff --git a/public/icons/icons.json b/public/icons/icons.json
new file mode 100644
index 00000000..5ea4c120
--- /dev/null
+++ b/public/icons/icons.json
@@ -0,0 +1 @@
+{"prefix":"ep","icons":{"add-location":{"body":"<path fill=\"currentColor\" d=\"M288 896h448q32 0 32 32t-32 32H288q-32 0-32-32t32-32z\"/><path fill=\"currentColor\" d=\"M800 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576C705.472 688.128 800 534.144 800 416zM512 960C277.312 746.688 160 565.312 160 416a352 352 0 0 1 704 0c0 149.312-117.312 330.688-352 544z\"/><path fill=\"currentColor\" d=\"M544 384h96a32 32 0 1 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96v-96a32 32 0 0 1 64 0v96z\"/>"},"aim":{"body":"<path fill=\"currentColor\" d=\"M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z\"/><path fill=\"currentColor\" d=\"M512 96a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V128a32 32 0 0 1 32-32zm0 576a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V704a32 32 0 0 1 32-32zM96 512a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32zm576 0a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64H704a32 32 0 0 1-32-32z\"/>"},"alarm-clock":{"body":"<path fill=\"currentColor\" d=\"M512 832a320 320 0 1 0 0-640a320 320 0 0 0 0 640zm0 64a384 384 0 1 1 0-768a384 384 0 0 1 0 768z\"/><path fill=\"currentColor\" d=\"m292.288 824.576l55.424 32l-48 83.136a32 32 0 1 1-55.424-32l48-83.136zm439.424 0l-55.424 32l48 83.136a32 32 0 1 0 55.424-32l-48-83.136zM512 512h160a32 32 0 1 1 0 64H480a32 32 0 0 1-32-32V320a32 32 0 0 1 64 0v192zM90.496 312.256A160 160 0 0 1 312.32 90.496l-46.848 46.848a96 96 0 0 0-128 128L90.56 312.256zm835.264 0A160 160 0 0 0 704 90.496l46.848 46.848a96 96 0 0 1 128 128l46.912 46.912z\"/>"},"apple":{"body":"<path fill=\"currentColor\" d=\"M599.872 203.776a189.44 189.44 0 0 1 64.384-4.672l2.624.128c31.168 1.024 51.2 4.096 79.488 16.32c37.632 16.128 74.496 45.056 111.488 89.344c96.384 115.264 82.752 372.8-34.752 521.728c-7.68 9.728-32 41.6-30.72 39.936a426.624 426.624 0 0 1-30.08 35.776c-31.232 32.576-65.28 49.216-110.08 50.048c-31.36.64-53.568-5.312-84.288-18.752l-6.528-2.88c-20.992-9.216-30.592-11.904-47.296-11.904c-18.112 0-28.608 2.88-51.136 12.672l-6.464 2.816c-28.416 12.224-48.32 18.048-76.16 19.2c-74.112 2.752-116.928-38.08-180.672-132.16c-96.64-142.08-132.608-349.312-55.04-486.4c46.272-81.92 129.92-133.632 220.672-135.04c32.832-.576 60.288 6.848 99.648 22.72c27.136 10.88 34.752 13.76 37.376 14.272c16.256-20.16 27.776-36.992 34.56-50.24c13.568-26.304 27.2-59.968 40.704-100.8a32 32 0 1 1 60.8 20.224c-12.608 37.888-25.408 70.4-38.528 97.664zm-51.52 78.08c-14.528 17.792-31.808 37.376-51.904 58.816a32 32 0 1 1-46.72-43.776l12.288-13.248c-28.032-11.2-61.248-26.688-95.68-26.112c-70.4 1.088-135.296 41.6-171.648 105.792C121.6 492.608 176 684.16 247.296 788.992c34.816 51.328 76.352 108.992 130.944 106.944c52.48-2.112 72.32-34.688 135.872-34.688c63.552 0 81.28 34.688 136.96 33.536c56.448-1.088 75.776-39.04 126.848-103.872c107.904-136.768 107.904-362.752 35.776-449.088c-72.192-86.272-124.672-84.096-151.68-85.12c-41.472-4.288-81.6 12.544-113.664 25.152z\"/>"},"arrow-down":{"body":"<path fill=\"currentColor\" d=\"M831.872 340.864L512 652.672L192.128 340.864a30.592 30.592 0 0 0-42.752 0a29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728a30.592 30.592 0 0 0-42.752 0z\"/>"},"arrow-down-bold":{"body":"<path fill=\"currentColor\" d=\"M104.704 338.752a64 64 0 0 1 90.496 0l316.8 316.8l316.8-316.8a64 64 0 0 1 90.496 90.496L557.248 791.296a64 64 0 0 1-90.496 0L104.704 429.248a64 64 0 0 1 0-90.496z\"/>"},"arrow-left":{"body":"<path fill=\"currentColor\" d=\"M609.408 149.376L277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0a30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688a29.12 29.12 0 0 0-41.728 0z\"/>"},"arrow-left-bold":{"body":"<path fill=\"currentColor\" d=\"M685.248 104.704a64 64 0 0 1 0 90.496L368.448 512l316.8 316.8a64 64 0 0 1-90.496 90.496L232.704 557.248a64 64 0 0 1 0-90.496l362.048-362.048a64 64 0 0 1 90.496 0z\"/>"},"arrow-right":{"body":"<path fill=\"currentColor\" d=\"M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512L340.864 831.872a30.592 30.592 0 0 0 0 42.752a29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z\"/>"},"arrow-right-bold":{"body":"<path fill=\"currentColor\" d=\"M338.752 104.704a64 64 0 0 0 0 90.496l316.8 316.8l-316.8 316.8a64 64 0 0 0 90.496 90.496l362.048-362.048a64 64 0 0 0 0-90.496L429.248 104.704a64 64 0 0 0-90.496 0z\"/>"},"arrow-up":{"body":"<path fill=\"currentColor\" d=\"m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z\"/>"},"arrow-up-bold":{"body":"<path fill=\"currentColor\" d=\"M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z\"/>"},"avatar":{"body":"<path fill=\"currentColor\" d=\"M628.736 528.896A416 416 0 0 1 928 928H96a415.872 415.872 0 0 1 299.264-399.104L512 704l116.736-175.104zM720 304a208 208 0 1 1-416 0a208 208 0 0 1 416 0z\"/>"},"back":{"body":"<path fill=\"currentColor\" d=\"M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64z\"/><path fill=\"currentColor\" d=\"m237.248 512l265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312L237.248 512z\"/>"},"baseball":{"body":"<path fill=\"currentColor\" d=\"M195.2 828.8a448 448 0 1 1 633.6-633.6a448 448 0 0 1-633.6 633.6zm45.248-45.248a384 384 0 1 0 543.104-543.104a384 384 0 0 0-543.104 543.104z\"/><path fill=\"currentColor\" d=\"M497.472 96.896c22.784 4.672 44.416 9.472 64.896 14.528a256.128 256.128 0 0 0 350.208 350.208c5.056 20.48 9.856 42.112 14.528 64.896A320.128 320.128 0 0 1 497.472 96.896zM108.48 491.904a320.128 320.128 0 0 1 423.616 423.68c-23.04-3.648-44.992-7.424-65.728-11.52a256.128 256.128 0 0 0-346.496-346.432a1736.64 1736.64 0 0 1-11.392-65.728z\"/>"},"basketball":{"body":"<path fill=\"currentColor\" d=\"M778.752 788.224a382.464 382.464 0 0 0 116.032-245.632a256.512 256.512 0 0 0-241.728-13.952a762.88 762.88 0 0 1 125.696 259.584zm-55.04 44.224a699.648 699.648 0 0 0-125.056-269.632a256.128 256.128 0 0 0-56.064 331.968a382.72 382.72 0 0 0 181.12-62.336zm-254.08 61.248A320.128 320.128 0 0 1 557.76 513.6a715.84 715.84 0 0 0-48.192-48.128a320.128 320.128 0 0 1-379.264 88.384a382.4 382.4 0 0 0 110.144 229.696a382.4 382.4 0 0 0 229.184 110.08zM129.28 481.088a256.128 256.128 0 0 0 331.072-56.448a699.648 699.648 0 0 0-268.8-124.352a382.656 382.656 0 0 0-62.272 180.8zm106.56-235.84a762.88 762.88 0 0 1 258.688 125.056a256.512 256.512 0 0 0-13.44-241.088A382.464 382.464 0 0 0 235.84 245.248zm318.08-114.944c40.576 89.536 37.76 193.92-8.448 281.344a779.84 779.84 0 0 1 66.176 66.112a320.832 320.832 0 0 1 282.112-8.128a382.4 382.4 0 0 0-110.144-229.12a382.4 382.4 0 0 0-229.632-110.208zM828.8 828.8a448 448 0 1 1-633.6-633.6a448 448 0 0 1 633.6 633.6z\"/>"},"bell":{"body":"<path fill=\"currentColor\" d=\"M512 64a64 64 0 0 1 64 64v64H448v-64a64 64 0 0 1 64-64z\"/><path fill=\"currentColor\" d=\"M256 768h512V448a256 256 0 1 0-512 0v320zm256-640a320 320 0 0 1 320 320v384H192V448a320 320 0 0 1 320-320z\"/><path fill=\"currentColor\" d=\"M96 768h832q32 0 32 32t-32 32H96q-32 0-32-32t32-32zm352 128h128a64 64 0 0 1-128 0z\"/>"},"bell-filled":{"body":"<path fill=\"currentColor\" d=\"M640 832a128 128 0 0 1-256 0h256zm192-64H134.4a38.4 38.4 0 0 1 0-76.8H192V448c0-154.88 110.08-284.16 256.32-313.6a64 64 0 1 1 127.36 0A320.128 320.128 0 0 1 832 448v243.2h57.6a38.4 38.4 0 0 1 0 76.8H832z\"/>"},"bicycle":{"body":"<path fill=\"currentColor\" d=\"M256 832a128 128 0 1 0 0-256a128 128 0 0 0 0 256zm0 64a192 192 0 1 1 0-384a192 192 0 0 1 0 384z\"/><path fill=\"currentColor\" d=\"M288 672h320q32 0 32 32t-32 32H288q-32 0-32-32t32-32z\"/><path fill=\"currentColor\" d=\"M768 832a128 128 0 1 0 0-256a128 128 0 0 0 0 256zm0 64a192 192 0 1 1 0-384a192 192 0 0 1 0 384z\"/><path fill=\"currentColor\" d=\"M480 192a32 32 0 0 1 0-64h160a32 32 0 0 1 31.04 24.256l96 384a32 32 0 0 1-62.08 15.488L615.04 192H480zM96 384a32 32 0 0 1 0-64h128a32 32 0 0 1 30.336 21.888l64 192a32 32 0 1 1-60.672 20.224L200.96 384H96z\"/><path fill=\"currentColor\" d=\"m373.376 599.808l-42.752-47.616l320-288l42.752 47.616z\"/>"},"bottom":{"body":"<path fill=\"currentColor\" d=\"M544 805.888V168a32 32 0 1 0-64 0v637.888L246.656 557.952a30.72 30.72 0 0 0-45.312 0a35.52 35.52 0 0 0 0 48.064l288 306.048a30.72 30.72 0 0 0 45.312 0l288-306.048a35.52 35.52 0 0 0 0-48a30.72 30.72 0 0 0-45.312 0L544 805.824z\"/>"},"bottom-left":{"body":"<path fill=\"currentColor\" d=\"M256 768h416a32 32 0 1 1 0 64H224a32 32 0 0 1-32-32V352a32 32 0 0 1 64 0v416z\"/><path fill=\"currentColor\" d=\"M246.656 822.656a32 32 0 0 1-45.312-45.312l544-544a32 32 0 0 1 45.312 45.312l-544 544z\"/>"},"bottom-right":{"body":"<path fill=\"currentColor\" d=\"M352 768a32 32 0 1 0 0 64h448a32 32 0 0 0 32-32V352a32 32 0 0 0-64 0v416H352z\"/><path fill=\"currentColor\" d=\"M777.344 822.656a32 32 0 0 0 45.312-45.312l-544-544a32 32 0 0 0-45.312 45.312l544 544z\"/>"},"bowl":{"body":"<path fill=\"currentColor\" d=\"M714.432 704a351.744 351.744 0 0 0 148.16-256H161.408a351.744 351.744 0 0 0 148.16 256h404.864zM288 766.592A415.68 415.68 0 0 1 96 416a32 32 0 0 1 32-32h768a32 32 0 0 1 32 32a415.68 415.68 0 0 1-192 350.592V832a64 64 0 0 1-64 64H352a64 64 0 0 1-64-64v-65.408zM493.248 320h-90.496l254.4-254.4a32 32 0 1 1 45.248 45.248L493.248 320zm187.328 0h-128l269.696-155.712a32 32 0 0 1 32 55.424L680.576 320zM352 768v64h320v-64H352z\"/>"},"box":{"body":"<path fill=\"currentColor\" d=\"M317.056 128L128 344.064V896h768V344.064L706.944 128H317.056zm-14.528-64h418.944a32 32 0 0 1 24.064 10.88l206.528 236.096A32 32 0 0 1 960 332.032V928a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V332.032a32 32 0 0 1 7.936-21.12L278.4 75.008A32 32 0 0 1 302.528 64z\"/><path fill=\"currentColor\" d=\"M64 320h896v64H64z\"/><path fill=\"currentColor\" d=\"M448 327.872V640h128V327.872L526.08 128h-28.16L448 327.872zM448 64h128l64 256v352a32 32 0 0 1-32 32H416a32 32 0 0 1-32-32V320l64-256z\"/>"},"briefcase":{"body":"<path fill=\"currentColor\" d=\"M320 320V128h384v192h192v192H128V320h192zM128 576h768v320H128V576zm256-256h256.064V192H384v128z\"/>"},"brush":{"body":"<path fill=\"currentColor\" d=\"M896 448H128v192a64 64 0 0 0 64 64h192v192h256V704h192a64 64 0 0 0 64-64V448zm-770.752-64c0-47.552 5.248-90.24 15.552-128c14.72-54.016 42.496-107.392 83.2-160h417.28l-15.36 70.336L736 96h211.2c-24.832 42.88-41.92 96.256-51.2 160a663.872 663.872 0 0 0-6.144 128H960v256a128 128 0 0 1-128 128H704v160a32 32 0 0 1-32 32H352a32 32 0 0 1-32-32V768H192A128 128 0 0 1 64 640V384h61.248zm64 0h636.544c-2.048-45.824.256-91.584 6.848-137.216c4.48-30.848 10.688-59.776 18.688-86.784h-96.64l-221.12 141.248L561.92 160H256.512c-25.856 37.888-43.776 75.456-53.952 112.832c-8.768 32.064-13.248 69.12-13.312 111.168z\"/>"},"brush-filled":{"body":"<path fill=\"currentColor\" d=\"M608 704v160a96 96 0 0 1-192 0V704h-96a128 128 0 0 1-128-128h640a128 128 0 0 1-128 128h-96zM192 512V128.064h640V512H192z\"/>"},"burger":{"body":"<path fill=\"currentColor\" d=\"M160 512a32 32 0 0 0-32 32v64a32 32 0 0 0 30.08 32H864a32 32 0 0 0 32-32v-64a32 32 0 0 0-32-32H160zm736-58.56A96 96 0 0 1 960 544v64a96 96 0 0 1-51.968 85.312L855.36 833.6a96 96 0 0 1-89.856 62.272H258.496A96 96 0 0 1 168.64 833.6l-52.608-140.224A96 96 0 0 1 64 608v-64a96 96 0 0 1 64-90.56V448a384 384 0 1 1 768 5.44zM832 448a320 320 0 0 0-640 0h640zM512 704H188.352l40.192 107.136a32 32 0 0 0 29.952 20.736h507.008a32 32 0 0 0 29.952-20.736L835.648 704H512z\"/>"},"calendar":{"body":"<path fill=\"currentColor\" d=\"M128 384v512h768V192H768v32a32 32 0 1 1-64 0v-32H320v32a32 32 0 0 1-64 0v-32H128v128h768v64H128zm192-256h384V96a32 32 0 1 1 64 0v32h160a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h160V96a32 32 0 0 1 64 0v32zm-32 384h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64zm0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64zm192-192h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64zm0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64zm192-192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64zm0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64z\"/>"},"camera":{"body":"<path fill=\"currentColor\" d=\"M896 256H128v576h768V256zm-199.424-64l-32.064-64h-304.96l-32 64h369.024zM96 192h160l46.336-92.608A64 64 0 0 1 359.552 64h304.96a64 64 0 0 1 57.216 35.328L768.192 192H928a32 32 0 0 1 32 32v640a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V224a32 32 0 0 1 32-32zm416 512a160 160 0 1 0 0-320a160 160 0 0 0 0 320zm0 64a224 224 0 1 1 0-448a224 224 0 0 1 0 448z\"/>"},"camera-filled":{"body":"<path fill=\"currentColor\" d=\"M160 224a64 64 0 0 0-64 64v512a64 64 0 0 0 64 64h704a64 64 0 0 0 64-64V288a64 64 0 0 0-64-64H748.416l-46.464-92.672A64 64 0 0 0 644.736 96H379.328a64 64 0 0 0-57.216 35.392L275.776 224H160zm352 435.2a115.2 115.2 0 1 0 0-230.4a115.2 115.2 0 0 0 0 230.4zm0 140.8a256 256 0 1 1 0-512a256 256 0 0 1 0 512z\"/>"},"caret-bottom":{"body":"<path fill=\"currentColor\" d=\"m192 384l320 384l320-384z\"/>"},"caret-left":{"body":"<path fill=\"currentColor\" d=\"M672 192L288 511.936L672 832z\"/>"},"caret-right":{"body":"<path fill=\"currentColor\" d=\"M384 192v640l384-320.064z\"/>"},"caret-top":{"body":"<path fill=\"currentColor\" d=\"M512 320L192 704h639.936z\"/>"},"cellphone":{"body":"<path fill=\"currentColor\" d=\"M256 128a64 64 0 0 0-64 64v640a64 64 0 0 0 64 64h512a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64H256zm0-64h512a128 128 0 0 1 128 128v640a128 128 0 0 1-128 128H256a128 128 0 0 1-128-128V192A128 128 0 0 1 256 64zm128 128h256a32 32 0 1 1 0 64H384a32 32 0 0 1 0-64zm128 640a64 64 0 1 1 0-128a64 64 0 0 1 0 128z\"/>"},"chat-dot-round":{"body":"<path fill=\"currentColor\" d=\"m174.72 855.68l135.296-45.12l23.68 11.84C388.096 849.536 448.576 864 512 864c211.84 0 384-166.784 384-352S723.84 160 512 160S128 326.784 128 512c0 69.12 24.96 139.264 70.848 199.232l22.08 28.8l-46.272 115.584zm-45.248 82.56A32 32 0 0 1 89.6 896l58.368-145.92C94.72 680.32 64 596.864 64 512C64 299.904 256 96 512 96s448 203.904 448 416s-192 416-448 416a461.056 461.056 0 0 1-206.912-48.384l-175.616 58.56z\"/><path fill=\"currentColor\" d=\"M512 563.2a51.2 51.2 0 1 1 0-102.4a51.2 51.2 0 0 1 0 102.4zm192 0a51.2 51.2 0 1 1 0-102.4a51.2 51.2 0 0 1 0 102.4zm-384 0a51.2 51.2 0 1 1 0-102.4a51.2 51.2 0 0 1 0 102.4z\"/>"},"chat-dot-square":{"body":"<path fill=\"currentColor\" d=\"M273.536 736H800a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64H224a64 64 0 0 0-64 64v570.88L273.536 736zM296 800L147.968 918.4A32 32 0 0 1 96 893.44V256a128 128 0 0 1 128-128h576a128 128 0 0 1 128 128v416a128 128 0 0 1-128 128H296z\"/><path fill=\"currentColor\" d=\"M512 499.2a51.2 51.2 0 1 1 0-102.4a51.2 51.2 0 0 1 0 102.4zm192 0a51.2 51.2 0 1 1 0-102.4a51.2 51.2 0 0 1 0 102.4zm-384 0a51.2 51.2 0 1 1 0-102.4a51.2 51.2 0 0 1 0 102.4z\"/>"},"chat-line-round":{"body":"<path fill=\"currentColor\" d=\"m174.72 855.68l135.296-45.12l23.68 11.84C388.096 849.536 448.576 864 512 864c211.84 0 384-166.784 384-352S723.84 160 512 160S128 326.784 128 512c0 69.12 24.96 139.264 70.848 199.232l22.08 28.8l-46.272 115.584zm-45.248 82.56A32 32 0 0 1 89.6 896l58.368-145.92C94.72 680.32 64 596.864 64 512C64 299.904 256 96 512 96s448 203.904 448 416s-192 416-448 416a461.056 461.056 0 0 1-206.912-48.384l-175.616 58.56z\"/><path fill=\"currentColor\" d=\"M352 576h320q32 0 32 32t-32 32H352q-32 0-32-32t32-32zm32-192h256q32 0 32 32t-32 32H384q-32 0-32-32t32-32z\"/>"},"chat-line-square":{"body":"<path fill=\"currentColor\" d=\"M160 826.88L273.536 736H800a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64H224a64 64 0 0 0-64 64v570.88zM296 800L147.968 918.4A32 32 0 0 1 96 893.44V256a128 128 0 0 1 128-128h576a128 128 0 0 1 128 128v416a128 128 0 0 1-128 128H296z\"/><path fill=\"currentColor\" d=\"M352 512h320q32 0 32 32t-32 32H352q-32 0-32-32t32-32zm0-192h320q32 0 32 32t-32 32H352q-32 0-32-32t32-32z\"/>"},"chat-round":{"body":"<path fill=\"currentColor\" d=\"m174.72 855.68l130.048-43.392l23.424 11.392C382.4 849.984 444.352 864 512 864c223.744 0 384-159.872 384-352c0-192.832-159.104-352-384-352S128 319.168 128 512a341.12 341.12 0 0 0 69.248 204.288l21.632 28.8l-44.16 110.528zm-45.248 82.56A32 32 0 0 1 89.6 896l56.512-141.248A405.12 405.12 0 0 1 64 512C64 299.904 235.648 96 512 96s448 203.904 448 416s-173.44 416-448 416c-79.68 0-150.848-17.152-211.712-46.72l-170.88 56.96z\"/>"},"chat-square":{"body":"<path fill=\"currentColor\" d=\"M273.536 736H800a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64H224a64 64 0 0 0-64 64v570.88L273.536 736zM296 800L147.968 918.4A32 32 0 0 1 96 893.44V256a128 128 0 0 1 128-128h576a128 128 0 0 1 128 128v416a128 128 0 0 1-128 128H296z\"/>"},"check":{"body":"<path fill=\"currentColor\" d=\"M406.656 706.944L195.84 496.256a32 32 0 1 0-45.248 45.248l256 256l512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z\"/>"},"checked":{"body":"<path fill=\"currentColor\" d=\"M704 192h160v736H160V192h160.064v64H704v-64zM311.616 537.28l-45.312 45.248L447.36 763.52l316.8-316.8l-45.312-45.184L447.36 673.024L311.616 537.28zM384 192V96h256v96H384z\"/>"},"cherry":{"body":"<path fill=\"currentColor\" d=\"M261.056 449.6c13.824-69.696 34.88-128.96 63.36-177.728c23.744-40.832 61.12-88.64 112.256-143.872H320a32 32 0 0 1 0-64h384a32 32 0 1 1 0 64H554.752c14.912 39.168 41.344 86.592 79.552 141.76c47.36 68.48 84.8 106.752 106.304 114.304a224 224 0 1 1-84.992 14.784c-22.656-22.912-47.04-53.76-73.92-92.608c-38.848-56.128-67.008-105.792-84.352-149.312c-55.296 58.24-94.528 107.52-117.76 147.2c-23.168 39.744-41.088 88.768-53.568 147.072a224.064 224.064 0 1 1-64.96-1.6zM288 832a160 160 0 1 0 0-320a160 160 0 0 0 0 320zm448-64a160 160 0 1 0 0-320a160 160 0 0 0 0 320z\"/>"},"chicken":{"body":"<path fill=\"currentColor\" d=\"M349.952 716.992L478.72 588.16a106.688 106.688 0 0 1-26.176-19.072a106.688 106.688 0 0 1-19.072-26.176L304.704 671.744c.768 3.072 1.472 6.144 2.048 9.216l2.048 31.936l31.872 1.984c3.136.64 6.208 1.28 9.28 2.112zm57.344 33.152a128 128 0 1 1-216.32 114.432l-1.92-32l-32-1.92a128 128 0 1 1 114.432-216.32L416.64 469.248c-2.432-101.44 58.112-239.104 149.056-330.048c107.328-107.328 231.296-85.504 316.8 0c85.44 85.44 107.328 209.408 0 316.8c-91.008 90.88-228.672 151.424-330.112 149.056L407.296 750.08zm90.496-226.304c49.536 49.536 233.344-7.04 339.392-113.088c78.208-78.208 63.232-163.072 0-226.304c-63.168-63.232-148.032-78.208-226.24 0C504.896 290.496 448.32 474.368 497.792 523.84zM244.864 708.928a64 64 0 1 0-59.84 59.84l56.32-3.52l3.52-56.32zm8.064 127.68a64 64 0 1 0 59.84-59.84l-56.32 3.52l-3.52 56.32z\"/>"},"chrome-filled":{"body":"<path fill=\"currentColor\" d=\"M938.67 512.01c0-44.59-6.82-87.6-19.54-128H682.67a212.372 212.372 0 0 1 42.67 128c.06 38.71-10.45 76.7-30.42 109.87l-182.91 316.8c235.65-.01 426.66-191.02 426.66-426.67z\"/><path fill=\"currentColor\" d=\"M576.79 401.63a127.92 127.92 0 0 0-63.56-17.6c-22.36-.22-44.39 5.43-63.89 16.38s-35.79 26.82-47.25 46.02a128.005 128.005 0 0 0-2.16 127.44l1.24 2.13a127.906 127.906 0 0 0 46.36 46.61a127.907 127.907 0 0 0 63.38 17.44c22.29.2 44.24-5.43 63.68-16.33a127.94 127.94 0 0 0 47.16-45.79v-.01l1.11-1.92a127.984 127.984 0 0 0 .29-127.46a127.957 127.957 0 0 0-46.36-46.91z\"/><path fill=\"currentColor\" d=\"M394.45 333.96A213.336 213.336 0 0 1 512 298.67h369.58A426.503 426.503 0 0 0 512 85.34a425.598 425.598 0 0 0-171.74 35.98a425.644 425.644 0 0 0-142.62 102.22l118.14 204.63a213.397 213.397 0 0 1 78.67-94.21zm117.56 604.72H512zm-97.25-236.73a213.284 213.284 0 0 1-89.54-86.81L142.48 298.6c-36.35 62.81-57.13 135.68-57.13 213.42c0 203.81 142.93 374.22 333.95 416.55h.04l118.19-204.71a213.315 213.315 0 0 1-122.77-21.91z\"/>"},"circle-check":{"body":"<path fill=\"currentColor\" d=\"M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z\"/><path fill=\"currentColor\" d=\"M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z\"/>"},"circle-check-filled":{"body":"<path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896zm-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z\"/>"},"circle-close":{"body":"<path fill=\"currentColor\" d=\"m466.752 512l-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z\"/><path fill=\"currentColor\" d=\"M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z\"/>"},"circle-close-filled":{"body":"<path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512L353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336L616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512L670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z\"/>"},"circle-plus":{"body":"<path fill=\"currentColor\" d=\"M352 480h320a32 32 0 1 1 0 64H352a32 32 0 0 1 0-64z\"/><path fill=\"currentColor\" d=\"M480 672V352a32 32 0 1 1 64 0v320a32 32 0 0 1-64 0z\"/><path fill=\"currentColor\" d=\"M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z\"/>"},"circle-plus-filled":{"body":"<path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896zm-38.4 409.6H326.4a38.4 38.4 0 1 0 0 76.8h147.2v147.2a38.4 38.4 0 0 0 76.8 0V550.4h147.2a38.4 38.4 0 0 0 0-76.8H550.4V326.4a38.4 38.4 0 1 0-76.8 0v147.2z\"/>"},"clock":{"body":"<path fill=\"currentColor\" d=\"M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z\"/><path fill=\"currentColor\" d=\"M480 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32z\"/><path fill=\"currentColor\" d=\"M480 512h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32z\"/>"},"close":{"body":"<path fill=\"currentColor\" d=\"M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z\"/>"},"close-bold":{"body":"<path fill=\"currentColor\" d=\"M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504L738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512L828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496L285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512L195.2 285.696a64 64 0 0 1 0-90.496z\"/>"},"cloudy":{"body":"<path fill=\"currentColor\" d=\"M598.4 831.872H328.192a256 256 0 0 1-34.496-510.528A352 352 0 1 1 598.4 831.872zm-271.36-64h272.256a288 288 0 1 0-248.512-417.664L335.04 381.44l-34.816 3.584a192 192 0 0 0 26.88 382.848z\"/>"},"coffee":{"body":"<path fill=\"currentColor\" d=\"M822.592 192h14.272a32 32 0 0 1 31.616 26.752l21.312 128A32 32 0 0 1 858.24 384h-49.344l-39.04 546.304A32 32 0 0 1 737.92 960H285.824a32 32 0 0 1-32-29.696L214.912 384H165.76a32 32 0 0 1-31.552-37.248l21.312-128A32 32 0 0 1 187.136 192h14.016l-6.72-93.696A32 32 0 0 1 226.368 64h571.008a32 32 0 0 1 31.936 34.304L822.592 192zm-64.128 0l4.544-64H260.736l4.544 64h493.184zm-548.16 128H820.48l-10.688-64H214.208l-10.688 64h6.784zm68.736 64l36.544 512H708.16l36.544-512H279.04z\"/>"},"coffee-cup":{"body":"<path fill=\"currentColor\" d=\"M768 192a192 192 0 1 1-8 383.808A256.128 256.128 0 0 1 512 768H320A256 256 0 0 1 64 512V160a32 32 0 0 1 32-32h640a32 32 0 0 1 32 32v32zm0 64v256a128 128 0 1 0 0-256zM96 832h640a32 32 0 1 1 0 64H96a32 32 0 1 1 0-64zm32-640v320a192 192 0 0 0 192 192h192a192 192 0 0 0 192-192V192H128z\"/>"},"coin":{"body":"<path fill=\"currentColor\" d=\"m161.92 580.736l29.888 58.88C171.328 659.776 160 681.728 160 704c0 82.304 155.328 160 352 160s352-77.696 352-160c0-22.272-11.392-44.16-31.808-64.32l30.464-58.432C903.936 615.808 928 657.664 928 704c0 129.728-188.544 224-416 224S96 833.728 96 704c0-46.592 24.32-88.576 65.92-123.264z\"/><path fill=\"currentColor\" d=\"m161.92 388.736l29.888 58.88C171.328 467.84 160 489.792 160 512c0 82.304 155.328 160 352 160s352-77.696 352-160c0-22.272-11.392-44.16-31.808-64.32l30.464-58.432C903.936 423.808 928 465.664 928 512c0 129.728-188.544 224-416 224S96 641.728 96 512c0-46.592 24.32-88.576 65.92-123.264z\"/><path fill=\"currentColor\" d=\"M512 544c-227.456 0-416-94.272-416-224S284.544 96 512 96s416 94.272 416 224s-188.544 224-416 224zm0-64c196.672 0 352-77.696 352-160S708.672 160 512 160s-352 77.696-352 160s155.328 160 352 160z\"/>"},"cold-drink":{"body":"<path fill=\"currentColor\" d=\"M768 64a192 192 0 1 1-69.952 370.88L480 725.376V896h96a32 32 0 1 1 0 64H320a32 32 0 1 1 0-64h96V725.376L76.8 273.536a64 64 0 0 1-12.8-38.4v-10.688a32 32 0 0 1 32-32h71.808l-65.536-83.84a32 32 0 0 1 50.432-39.424l96.256 123.264h337.728A192.064 192.064 0 0 1 768 64zM656.896 192.448H800a32 32 0 0 1 32 32v10.624a64 64 0 0 1-12.8 38.4l-80.448 107.2a128 128 0 1 0-81.92-188.16v-.064zm-357.888 64l129.472 165.76a32 32 0 0 1-50.432 39.36l-160.256-205.12H144l304 404.928l304-404.928H299.008z\"/>"},"collection":{"body":"<path fill=\"currentColor\" d=\"M192 736h640V128H256a64 64 0 0 0-64 64v544zm64-672h608a32 32 0 0 1 32 32v672a32 32 0 0 1-32 32H160l-32 57.536V192A128 128 0 0 1 256 64z\"/><path fill=\"currentColor\" d=\"M240 800a48 48 0 1 0 0 96h592v-96H240zm0-64h656v160a64 64 0 0 1-64 64H240a112 112 0 0 1 0-224zm144-608v250.88l96-76.8l96 76.8V128H384zm-64-64h320v381.44a32 32 0 0 1-51.968 24.96L480 384l-108.032 86.4A32 32 0 0 1 320 445.44V64z\"/>"},"collection-tag":{"body":"<path fill=\"currentColor\" d=\"M256 128v698.88l196.032-156.864a96 96 0 0 1 119.936 0L768 826.816V128H256zm-32-64h576a32 32 0 0 1 32 32v797.44a32 32 0 0 1-51.968 24.96L531.968 720a32 32 0 0 0-39.936 0L243.968 918.4A32 32 0 0 1 192 893.44V96a32 32 0 0 1 32-32z\"/>"},"comment":{"body":"<path fill=\"currentColor\" d=\"M736 504a56 56 0 1 1 0-112a56 56 0 0 1 0 112zm-224 0a56 56 0 1 1 0-112a56 56 0 0 1 0 112zm-224 0a56 56 0 1 1 0-112a56 56 0 0 1 0 112zM128 128v640h192v160l224-160h352V128H128z\"/>"},"compass":{"body":"<path fill=\"currentColor\" d=\"M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z\"/><path fill=\"currentColor\" d=\"M725.888 315.008C676.48 428.672 624 513.28 568.576 568.64c-55.424 55.424-139.968 107.904-253.568 157.312a12.8 12.8 0 0 1-16.896-16.832c49.536-113.728 102.016-198.272 157.312-253.632c55.36-55.296 139.904-107.776 253.632-157.312a12.8 12.8 0 0 1 16.832 16.832z\"/>"},"connection":{"body":"<path fill=\"currentColor\" d=\"M640 384v64H448a128 128 0 0 0-128 128v128a128 128 0 0 0 128 128h320a128 128 0 0 0 128-128V576a128 128 0 0 0-64-110.848V394.88c74.56 26.368 128 97.472 128 181.056v128a192 192 0 0 1-192 192H448a192 192 0 0 1-192-192V576a192 192 0 0 1 192-192h192z\"/><path fill=\"currentColor\" d=\"M384 640v-64h192a128 128 0 0 0 128-128V320a128 128 0 0 0-128-128H256a128 128 0 0 0-128 128v128a128 128 0 0 0 64 110.848v70.272A192.064 192.064 0 0 1 64 448V320a192 192 0 0 1 192-192h320a192 192 0 0 1 192 192v128a192 192 0 0 1-192 192H384z\"/>"},"coordinate":{"body":"<path fill=\"currentColor\" d=\"M480 512h64v320h-64z\"/><path fill=\"currentColor\" d=\"M192 896h640a64 64 0 0 0-64-64H256a64 64 0 0 0-64 64zm64-128h512a128 128 0 0 1 128 128v64H128v-64a128 128 0 0 1 128-128zm256-256a192 192 0 1 0 0-384a192 192 0 0 0 0 384zm0 64a256 256 0 1 1 0-512a256 256 0 0 1 0 512z\"/>"},"copy-document":{"body":"<path fill=\"currentColor\" d=\"M768 832a128 128 0 0 1-128 128H192A128 128 0 0 1 64 832V384a128 128 0 0 1 128-128v64a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64h64z\"/><path fill=\"currentColor\" d=\"M384 128a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64H384zm0-64h448a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H384a128 128 0 0 1-128-128V192A128 128 0 0 1 384 64z\"/>"},"cpu":{"body":"<path fill=\"currentColor\" d=\"M320 256a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h384a64 64 0 0 0 64-64V320a64 64 0 0 0-64-64H320zm0-64h384a128 128 0 0 1 128 128v384a128 128 0 0 1-128 128H320a128 128 0 0 1-128-128V320a128 128 0 0 1 128-128z\"/><path fill=\"currentColor\" d=\"M512 64a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm-320 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 896a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm160 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm-320 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zM64 512a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0-160a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0 320a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm896-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0 320a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32z\"/>"},"credit-card":{"body":"<path fill=\"currentColor\" d=\"M896 324.096c0-42.368-2.496-55.296-9.536-68.48a52.352 52.352 0 0 0-22.144-22.08c-13.12-7.04-26.048-9.536-68.416-9.536H228.096c-42.368 0-55.296 2.496-68.48 9.536a52.352 52.352 0 0 0-22.08 22.144c-7.04 13.12-9.536 26.048-9.536 68.416v375.808c0 42.368 2.496 55.296 9.536 68.48a52.352 52.352 0 0 0 22.144 22.08c13.12 7.04 26.048 9.536 68.416 9.536h567.808c42.368 0 55.296-2.496 68.48-9.536a52.352 52.352 0 0 0 22.08-22.144c7.04-13.12 9.536-26.048 9.536-68.416V324.096zm64 0v375.808c0 57.088-5.952 77.76-17.088 98.56c-11.136 20.928-27.52 37.312-48.384 48.448c-20.864 11.136-41.6 17.088-98.56 17.088H228.032c-57.088 0-77.76-5.952-98.56-17.088a116.288 116.288 0 0 1-48.448-48.384c-11.136-20.864-17.088-41.6-17.088-98.56V324.032c0-57.088 5.952-77.76 17.088-98.56c11.136-20.928 27.52-37.312 48.384-48.448c20.864-11.136 41.6-17.088 98.56-17.088H795.84c57.088 0 77.76 5.952 98.56 17.088c20.928 11.136 37.312 27.52 48.448 48.384c11.136 20.864 17.088 41.6 17.088 98.56z\"/><path fill=\"currentColor\" d=\"M64 320h896v64H64v-64zm0 128h896v64H64v-64zm128 192h256v64H192z\"/>"},"crop":{"body":"<path fill=\"currentColor\" d=\"M256 768h672a32 32 0 1 1 0 64H224a32 32 0 0 1-32-32V96a32 32 0 0 1 64 0v672z\"/><path fill=\"currentColor\" d=\"M832 224v704a32 32 0 1 1-64 0V256H96a32 32 0 0 1 0-64h704a32 32 0 0 1 32 32z\"/>"},"d-arrow-left":{"body":"<path fill=\"currentColor\" d=\"M529.408 149.376a29.12 29.12 0 0 1 41.728 0a30.592 30.592 0 0 1 0 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264a29.12 29.12 0 0 1-41.216-.512L197.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224zm256 0a29.12 29.12 0 0 1 41.728 0a30.592 30.592 0 0 1 0 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264a29.12 29.12 0 0 1-41.216-.512L453.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224z\"/>"},"d-arrow-right":{"body":"<path fill=\"currentColor\" d=\"M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0a30.592 30.592 0 0 1 0-42.752L764.736 512L452.864 192a30.592 30.592 0 0 1 0-42.688zm-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0a30.592 30.592 0 0 1 0-42.752L508.736 512L196.864 192a30.592 30.592 0 0 1 0-42.688z\"/>"},"d-caret":{"body":"<path fill=\"currentColor\" d=\"m512 128l288 320H224l288-320zM224 576h576L512 896L224 576z\"/>"},"data-analysis":{"body":"<path fill=\"currentColor\" d=\"m665.216 768l110.848 192h-73.856L591.36 768H433.024L322.176 960H248.32l110.848-192H160a32 32 0 0 1-32-32V192H64a32 32 0 0 1 0-64h896a32 32 0 1 1 0 64h-64v544a32 32 0 0 1-32 32H665.216zM832 192H192v512h640V192zM352 448a32 32 0 0 1 32 32v64a32 32 0 0 1-64 0v-64a32 32 0 0 1 32-32zm160-64a32 32 0 0 1 32 32v128a32 32 0 0 1-64 0V416a32 32 0 0 1 32-32zm160-64a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V352a32 32 0 0 1 32-32z\"/>"},"data-board":{"body":"<path fill=\"currentColor\" d=\"M32 128h960v64H32z\"/><path fill=\"currentColor\" d=\"M192 192v512h640V192H192zm-64-64h768v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V128z\"/><path fill=\"currentColor\" d=\"M322.176 960H248.32l144.64-250.56l55.424 32L322.176 960zm453.888 0h-73.856L576 741.44l55.424-32L776.064 960z\"/>"},"data-line":{"body":"<path fill=\"currentColor\" d=\"M359.168 768H160a32 32 0 0 1-32-32V192H64a32 32 0 0 1 0-64h896a32 32 0 1 1 0 64h-64v544a32 32 0 0 1-32 32H665.216l110.848 192h-73.856L591.36 768H433.024L322.176 960H248.32l110.848-192zM832 192H192v512h640V192zM342.656 534.656a32 32 0 1 1-45.312-45.312L444.992 341.76l125.44 94.08L679.04 300.032a32 32 0 1 1 49.92 39.936L581.632 524.224L451.008 426.24L342.656 534.592z\"/>"},"delete":{"body":"<path fill=\"currentColor\" d=\"M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z\"/>"},"delete-filled":{"body":"<path fill=\"currentColor\" d=\"M352 192V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64H96a32 32 0 0 1 0-64h256zm64 0h192v-64H416v64zM192 960a32 32 0 0 1-32-32V256h704v672a32 32 0 0 1-32 32H192zm224-192a32 32 0 0 0 32-32V416a32 32 0 0 0-64 0v320a32 32 0 0 0 32 32zm192 0a32 32 0 0 0 32-32V416a32 32 0 0 0-64 0v320a32 32 0 0 0 32 32z\"/>"},"delete-location":{"body":"<path fill=\"currentColor\" d=\"M288 896h448q32 0 32 32t-32 32H288q-32 0-32-32t32-32z\"/><path fill=\"currentColor\" d=\"M800 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576C705.472 688.128 800 534.144 800 416zM512 960C277.312 746.688 160 565.312 160 416a352 352 0 0 1 704 0c0 149.312-117.312 330.688-352 544z\"/><path fill=\"currentColor\" d=\"M384 384h256q32 0 32 32t-32 32H384q-32 0-32-32t32-32z\"/>"},"dessert":{"body":"<path fill=\"currentColor\" d=\"M128 416v-48a144 144 0 0 1 168.64-141.888a224.128 224.128 0 0 1 430.72 0A144 144 0 0 1 896 368v48a384 384 0 0 1-352 382.72V896h-64v-97.28A384 384 0 0 1 128 416zm287.104-32.064h193.792a143.808 143.808 0 0 1 58.88-132.736a160.064 160.064 0 0 0-311.552 0a143.808 143.808 0 0 1 58.88 132.8zm-72.896 0a72 72 0 1 0-140.48 0h140.48zm339.584 0h140.416a72 72 0 1 0-140.48 0zM512 736a320 320 0 0 0 318.4-288.064H193.6A320 320 0 0 0 512 736zM384 896.064h256a32 32 0 1 1 0 64H384a32 32 0 1 1 0-64z\"/>"},"discount":{"body":"<path fill=\"currentColor\" d=\"M224 704h576V318.336L552.512 115.84a64 64 0 0 0-81.024 0L224 318.336V704zm0 64v128h576V768H224zM593.024 66.304l259.2 212.096A32 32 0 0 1 864 303.168V928a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V303.168a32 32 0 0 1 11.712-24.768l259.2-212.096a128 128 0 0 1 162.112 0z\"/><path fill=\"currentColor\" d=\"M512 448a64 64 0 1 0 0-128a64 64 0 0 0 0 128zm0 64a128 128 0 1 1 0-256a128 128 0 0 1 0 256z\"/>"},"dish":{"body":"<path fill=\"currentColor\" d=\"M480 257.152V192h-96a32 32 0 0 1 0-64h256a32 32 0 1 1 0 64h-96v65.152A448 448 0 0 1 955.52 768H68.48A448 448 0 0 1 480 257.152zM128 704h768a384 384 0 1 0-768 0zM96 832h832a32 32 0 1 1 0 64H96a32 32 0 1 1 0-64z\"/>"},"dish-dot":{"body":"<path fill=\"currentColor\" d=\"m384.064 274.56l.064-50.688A128 128 0 0 1 512.128 96c70.528 0 127.68 57.152 127.68 127.68v50.752A448.192 448.192 0 0 1 955.392 768H68.544A448.192 448.192 0 0 1 384 274.56zM96 832h832a32 32 0 1 1 0 64H96a32 32 0 1 1 0-64zm32-128h768a384 384 0 1 0-768 0zm447.808-448v-32.32a63.68 63.68 0 0 0-63.68-63.68a64 64 0 0 0-64 63.936V256h127.68z\"/>"},"document":{"body":"<path fill=\"currentColor\" d=\"M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z\"/>"},"document-add":{"body":"<path fill=\"currentColor\" d=\"M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm320 512V448h64v128h128v64H544v128h-64V640H352v-64h128z\"/>"},"document-checked":{"body":"<path fill=\"currentColor\" d=\"M805.504 320L640 154.496V320h165.504zM832 384H576V128H192v768h640V384zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm318.4 582.144l180.992-180.992L704.64 510.4L478.4 736.64L320 578.304l45.248-45.312L478.4 646.144z\"/>"},"document-copy":{"body":"<path fill=\"currentColor\" d=\"M128 320v576h576V320H128zm-32-64h640a32 32 0 0 1 32 32v640a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32zM960 96v704a32 32 0 0 1-32 32h-96v-64h64V128H384v64h-64V96a32 32 0 0 1 32-32h576a32 32 0 0 1 32 32zM256 672h320v64H256v-64zm0-192h320v64H256v-64z\"/>"},"document-delete":{"body":"<path fill=\"currentColor\" d=\"M805.504 320L640 154.496V320h165.504zM832 384H576V128H192v768h640V384zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm308.992 546.304l-90.496-90.624l45.248-45.248l90.56 90.496l90.496-90.432l45.248 45.248l-90.496 90.56l90.496 90.496l-45.248 45.248l-90.496-90.496l-90.56 90.496l-45.248-45.248l90.496-90.496z\"/>"},"document-remove":{"body":"<path fill=\"currentColor\" d=\"M805.504 320L640 154.496V320h165.504zM832 384H576V128H192v768h640V384zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm192 512h320v64H352v-64z\"/>"},"download":{"body":"<path fill=\"currentColor\" d=\"M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-253.696l236.288-236.352l45.248 45.248L508.8 704L192 387.2l45.248-45.248L480 584.704V128h64v450.304z\"/>"},"drizzling":{"body":"<path fill=\"currentColor\" d=\"m739.328 291.328l-35.2-6.592l-12.8-33.408a192.064 192.064 0 0 0-365.952 23.232l-9.92 40.896l-41.472 7.04a176.32 176.32 0 0 0-146.24 173.568c0 97.28 78.72 175.936 175.808 175.936h400a192 192 0 0 0 35.776-380.672zM959.552 480a256 256 0 0 1-256 256h-400A239.808 239.808 0 0 1 63.744 496.192a240.32 240.32 0 0 1 199.488-236.8a256.128 256.128 0 0 1 487.872-30.976A256.064 256.064 0 0 1 959.552 480zM288 800h64v64h-64v-64zm192 0h64v64h-64v-64zm-96 96h64v64h-64v-64zm192 0h64v64h-64v-64zm96-96h64v64h-64v-64z\"/>"},"edit":{"body":"<path fill=\"currentColor\" d=\"M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z\"/><path fill=\"currentColor\" d=\"m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z\"/>"},"edit-pen":{"body":"<path fill=\"currentColor\" d=\"m199.04 672.64l193.984 112l224-387.968l-193.92-112l-224 388.032zm-23.872 60.16l32.896 148.288l144.896-45.696L175.168 732.8zM455.04 229.248l193.92 112l56.704-98.112l-193.984-112l-56.64 98.112zM104.32 708.8l384-665.024l304.768 175.936L409.152 884.8h.064l-248.448 78.336L104.32 708.8zm384 254.272v-64h448v64h-448z\"/>"},"eleme":{"body":"<path fill=\"currentColor\" d=\"M300.032 188.8c174.72-113.28 408-63.36 522.24 109.44c5.76 10.56 11.52 20.16 17.28 30.72v.96a22.4 22.4 0 0 1-7.68 26.88l-352.32 228.48c-9.6 6.72-22.08 3.84-28.8-5.76l-18.24-27.84a54.336 54.336 0 0 1 16.32-74.88l225.6-146.88c9.6-6.72 12.48-19.2 5.76-28.8c-.96-1.92-1.92-3.84-3.84-4.8a267.84 267.84 0 0 0-315.84-17.28c-123.84 81.6-159.36 247.68-78.72 371.52a268.096 268.096 0 0 0 370.56 78.72a54.336 54.336 0 0 1 74.88 16.32l17.28 26.88c5.76 9.6 3.84 21.12-4.8 27.84c-8.64 7.68-18.24 14.4-28.8 21.12a377.92 377.92 0 0 1-522.24-110.4c-113.28-174.72-63.36-408 111.36-522.24zm526.08 305.28a22.336 22.336 0 0 1 28.8 5.76l23.04 35.52a63.232 63.232 0 0 1-18.24 87.36l-35.52 23.04c-9.6 6.72-22.08 3.84-28.8-5.76l-46.08-71.04c-6.72-9.6-3.84-22.08 5.76-28.8l71.04-46.08z\"/>"},"eleme-filled":{"body":"<path fill=\"currentColor\" d=\"M176 64h672c61.824 0 112 50.176 112 112v672a112 112 0 0 1-112 112H176A112 112 0 0 1 64 848V176c0-61.824 50.176-112 112-112zm150.528 173.568c-152.896 99.968-196.544 304.064-97.408 456.96a330.688 330.688 0 0 0 456.96 96.64c9.216-5.888 17.6-11.776 25.152-18.56a18.24 18.24 0 0 0 4.224-24.32L700.352 724.8a47.552 47.552 0 0 0-65.536-14.272A234.56 234.56 0 0 1 310.592 641.6C240 533.248 271.104 387.968 379.456 316.48a234.304 234.304 0 0 1 276.352 15.168c1.664.832 2.56 2.56 3.392 4.224c5.888 8.384 3.328 19.328-5.12 25.216L456.832 489.6a47.552 47.552 0 0 0-14.336 65.472l16 24.384c5.888 8.384 16.768 10.88 25.216 5.056l308.224-199.936a19.584 19.584 0 0 0 6.72-23.488v-.896c-4.992-9.216-10.048-17.6-15.104-26.88c-99.968-151.168-304.064-194.88-456.96-95.744zM786.88 504.704l-62.208 40.32c-8.32 5.888-10.88 16.768-4.992 25.216L760 632.32c5.888 8.448 16.768 11.008 25.152 5.12l31.104-20.16a55.36 55.36 0 0 0 16-76.48l-20.224-31.04a19.52 19.52 0 0 0-25.152-5.12z\"/>"},"element-plus":{"body":"<path fill=\"currentColor\" d=\"M839.7 734.7c0 33.3-17.9 41-17.9 41S519.7 949.8 499.2 960c-10.2 5.1-20.5 5.1-30.7 0c0 0-314.9-184.3-325.1-192c-5.1-5.1-10.2-12.8-12.8-20.5V368.6c0-17.9 20.5-28.2 20.5-28.2L466 158.6c12.8-5.1 25.6-5.1 38.4 0c0 0 279 161.3 309.8 179.2c17.9 7.7 28.2 25.6 25.6 46.1c-.1-5-.1 317.5-.1 350.8zM714.2 371.2c-64-35.8-217.6-125.4-217.6-125.4c-7.7-5.1-20.5-5.1-30.7 0L217.6 389.1s-17.9 10.2-17.9 23v297c0 5.1 5.1 12.8 7.7 17.9c7.7 5.1 256 148.5 256 148.5c7.7 5.1 17.9 5.1 25.6 0c15.4-7.7 250.9-145.9 250.9-145.9s12.8-5.1 12.8-30.7v-74.2l-276.5 169v-64c0-17.9 7.7-30.7 20.5-46.1L745 535c5.1-7.7 10.2-20.5 10.2-30.7v-66.6l-279 169v-69.1c0-15.4 5.1-30.7 17.9-38.4l220.1-128zM919 135.7c0-5.1-5.1-7.7-7.7-7.7h-58.9V66.6c0-5.1-5.1-5.1-10.2-5.1l-30.7 5.1c-5.1 0-5.1 2.6-5.1 5.1V128h-56.3c-5.1 0-5.1 5.1-7.7 5.1v38.4h69.1v64c0 5.1 5.1 5.1 10.2 5.1l30.7-5.1c5.1 0 5.1-2.6 5.1-5.1v-56.3h64l-2.5-38.4z\"/>"},"expand":{"body":"<path fill=\"currentColor\" d=\"M128 192h768v128H128V192zm0 256h512v128H128V448zm0 256h768v128H128V704zm576-352l192 160l-192 128V352z\"/>"},"failed":{"body":"<path fill=\"currentColor\" d=\"m557.248 608l135.744-135.744l-45.248-45.248l-135.68 135.744l-135.808-135.68l-45.248 45.184L466.752 608l-135.68 135.68l45.184 45.312L512 653.248l135.744 135.744l45.248-45.248L557.312 608zM704 192h160v736H160V192h160v64h384v-64zm-320 0V96h256v96H384z\"/>"},"female":{"body":"<path fill=\"currentColor\" d=\"M512 640a256 256 0 1 0 0-512a256 256 0 0 0 0 512zm0 64a320 320 0 1 1 0-640a320 320 0 0 1 0 640z\"/><path fill=\"currentColor\" d=\"M512 640q32 0 32 32v256q0 32-32 32t-32-32V672q0-32 32-32z\"/><path fill=\"currentColor\" d=\"M352 800h320q32 0 32 32t-32 32H352q-32 0-32-32t32-32z\"/>"},"files":{"body":"<path fill=\"currentColor\" d=\"M128 384v448h768V384H128zm-32-64h832a32 32 0 0 1 32 32v512a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V352a32 32 0 0 1 32-32zm64-128h704v64H160zm96-128h512v64H256z\"/>"},"film":{"body":"<path fill=\"currentColor\" d=\"M160 160v704h704V160H160zm-32-64h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32z\"/><path fill=\"currentColor\" d=\"M320 288V128h64v352h256V128h64v160h160v64H704v128h160v64H704v128h160v64H704v160h-64V544H384v352h-64V736H128v-64h192V544H128v-64h192V352H128v-64h192z\"/>"},"filter":{"body":"<path fill=\"currentColor\" d=\"M384 523.392V928a32 32 0 0 0 46.336 28.608l192-96A32 32 0 0 0 640 832V523.392l280.768-343.104a32 32 0 1 0-49.536-40.576l-288 352A32 32 0 0 0 576 512v300.224l-128 64V512a32 32 0 0 0-7.232-20.288L195.52 192H704a32 32 0 1 0 0-64H128a32 32 0 0 0-24.768 52.288L384 523.392z\"/>"},"finished":{"body":"<path fill=\"currentColor\" d=\"M280.768 753.728L691.456 167.04a32 32 0 1 1 52.416 36.672L314.24 817.472a32 32 0 0 1-45.44 7.296l-230.4-172.8a32 32 0 0 1 38.4-51.2l203.968 152.96zM736 448a32 32 0 1 1 0-64h192a32 32 0 1 1 0 64H736zM608 640a32 32 0 0 1 0-64h319.936a32 32 0 1 1 0 64H608zM480 832a32 32 0 1 1 0-64h447.936a32 32 0 1 1 0 64H480z\"/>"},"first-aid-kit":{"body":"<path fill=\"currentColor\" d=\"M192 256a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V320a64 64 0 0 0-64-64H192zm0-64h640a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H192A128 128 0 0 1 64 768V320a128 128 0 0 1 128-128z\"/><path fill=\"currentColor\" d=\"M544 512h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96v-96a32 32 0 0 1 64 0v96zM352 128v64h320v-64H352zm-32-64h384a32 32 0 0 1 32 32v128a32 32 0 0 1-32 32H320a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32z\"/>"},"flag":{"body":"<path fill=\"currentColor\" d=\"M288 128h608L736 384l160 256H288v320h-96V64h96v64z\"/>"},"fold":{"body":"<path fill=\"currentColor\" d=\"M896 192H128v128h768V192zm0 256H384v128h512V448zm0 256H128v128h768V704zM320 384L128 512l192 128V384z\"/>"},"folder":{"body":"<path fill=\"currentColor\" d=\"M128 192v640h768V320H485.76L357.504 192H128zm-32-64h287.872l128.384 128H928a32 32 0 0 1 32 32v576a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32z\"/>"},"folder-add":{"body":"<path fill=\"currentColor\" d=\"M128 192v640h768V320H485.76L357.504 192H128zm-32-64h287.872l128.384 128H928a32 32 0 0 1 32 32v576a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32zm384 416V416h64v128h128v64H544v128h-64V608H352v-64h128z\"/>"},"folder-checked":{"body":"<path fill=\"currentColor\" d=\"M128 192v640h768V320H485.76L357.504 192H128zm-32-64h287.872l128.384 128H928a32 32 0 0 1 32 32v576a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32zm414.08 502.144l180.992-180.992L736.32 494.4L510.08 720.64l-158.4-158.336l45.248-45.312L510.08 630.144z\"/>"},"folder-delete":{"body":"<path fill=\"currentColor\" d=\"M128 192v640h768V320H485.76L357.504 192H128zm-32-64h287.872l128.384 128H928a32 32 0 0 1 32 32v576a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32zm370.752 448l-90.496-90.496l45.248-45.248L512 530.752l90.496-90.496l45.248 45.248L557.248 576l90.496 90.496l-45.248 45.248L512 621.248l-90.496 90.496l-45.248-45.248L466.752 576z\"/>"},"folder-opened":{"body":"<path fill=\"currentColor\" d=\"M878.08 448H241.92l-96 384h636.16l96-384zM832 384v-64H485.76L357.504 192H128v448l57.92-231.744A32 32 0 0 1 216.96 384H832zm-24.96 512H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h287.872l128.384 128H864a32 32 0 0 1 32 32v96h23.04a32 32 0 0 1 31.04 39.744l-112 448A32 32 0 0 1 807.04 896z\"/>"},"folder-remove":{"body":"<path fill=\"currentColor\" d=\"M128 192v640h768V320H485.76L357.504 192H128zm-32-64h287.872l128.384 128H928a32 32 0 0 1 32 32v576a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32zm256 416h320v64H352v-64z\"/>"},"food":{"body":"<path fill=\"currentColor\" d=\"M128 352.576V352a288 288 0 0 1 491.072-204.224a192 192 0 0 1 274.24 204.48a64 64 0 0 1 57.216 74.24C921.6 600.512 850.048 710.656 736 756.992V800a96 96 0 0 1-96 96H384a96 96 0 0 1-96-96v-43.008c-114.048-46.336-185.6-156.48-214.528-330.496A64 64 0 0 1 128 352.64zm64-.576h64a160 160 0 0 1 320 0h64a224 224 0 0 0-448 0zm128 0h192a96 96 0 0 0-192 0zm439.424 0h68.544A128.256 128.256 0 0 0 704 192c-15.36 0-29.952 2.688-43.52 7.616c11.328 18.176 20.672 37.76 27.84 58.304A64.128 64.128 0 0 1 759.424 352zM672 768H352v32a32 32 0 0 0 32 32h256a32 32 0 0 0 32-32v-32zm-342.528-64h365.056c101.504-32.64 165.76-124.928 192.896-288H136.576c27.136 163.072 91.392 255.36 192.896 288z\"/>"},"football":{"body":"<path fill=\"currentColor\" d=\"M512 960a448 448 0 1 1 0-896a448 448 0 0 1 0 896zm0-64a384 384 0 1 0 0-768a384 384 0 0 0 0 768z\"/><path fill=\"currentColor\" d=\"M186.816 268.288c16-16.384 31.616-31.744 46.976-46.08c17.472 30.656 39.808 58.112 65.984 81.28l-32.512 56.448a385.984 385.984 0 0 1-80.448-91.648zm653.696-5.312a385.92 385.92 0 0 1-83.776 96.96l-32.512-56.384a322.923 322.923 0 0 0 68.48-85.76c15.552 14.08 31.488 29.12 47.808 45.184zM465.984 445.248l11.136-63.104a323.584 323.584 0 0 0 69.76 0l11.136 63.104a387.968 387.968 0 0 1-92.032 0zm-62.72-12.8A381.824 381.824 0 0 1 320 396.544l32-55.424a319.885 319.885 0 0 0 62.464 27.712l-11.2 63.488zm300.8-35.84a381.824 381.824 0 0 1-83.328 35.84l-11.2-63.552A319.885 319.885 0 0 0 672 341.184l32 55.424zm-520.768 364.8a385.92 385.92 0 0 1 83.968-97.28l32.512 56.32c-26.88 23.936-49.856 52.352-67.52 84.032c-16-13.44-32.32-27.712-48.96-43.072zm657.536.128a1442.759 1442.759 0 0 1-49.024 43.072a321.408 321.408 0 0 0-67.584-84.16l32.512-56.32c33.216 27.456 61.696 60.352 84.096 97.408zM465.92 578.752a387.968 387.968 0 0 1 92.032 0l-11.136 63.104a323.584 323.584 0 0 0-69.76 0l-11.136-63.104zm-62.72 12.8l11.2 63.552a319.885 319.885 0 0 0-62.464 27.712L320 627.392a381.824 381.824 0 0 1 83.264-35.84zm300.8 35.84l-32 55.424a318.272 318.272 0 0 0-62.528-27.712l11.2-63.488c29.44 8.64 57.28 20.736 83.264 35.776z\"/>"},"fork-spoon":{"body":"<path fill=\"currentColor\" d=\"M256 410.304V96a32 32 0 0 1 64 0v314.304a96 96 0 0 0 64-90.56V96a32 32 0 0 1 64 0v223.744a160 160 0 0 1-128 156.8V928a32 32 0 1 1-64 0V476.544a160 160 0 0 1-128-156.8V96a32 32 0 0 1 64 0v223.744a96 96 0 0 0 64 90.56zM672 572.48C581.184 552.128 512 446.848 512 320c0-141.44 85.952-256 192-256s192 114.56 192 256c0 126.848-69.184 232.128-160 252.48V928a32 32 0 1 1-64 0V572.48zM704 512c66.048 0 128-82.56 128-192s-61.952-192-128-192s-128 82.56-128 192s61.952 192 128 192z\"/>"},"fries":{"body":"<path fill=\"currentColor\" d=\"M608 224v-64a32 32 0 0 0-64 0v336h26.88A64 64 0 0 0 608 484.096V224zm101.12 160A64 64 0 0 0 672 395.904V384h64V224a32 32 0 1 0-64 0v160h37.12zm74.88 0a92.928 92.928 0 0 1 91.328 110.08l-60.672 323.584A96 96 0 0 1 720.32 896H303.68a96 96 0 0 1-94.336-78.336L148.672 494.08A92.928 92.928 0 0 1 240 384h-16V224a96 96 0 0 1 188.608-25.28A95.744 95.744 0 0 1 480 197.44V160a96 96 0 0 1 188.608-25.28A96 96 0 0 1 800 224v160h-16zM670.784 512a128 128 0 0 1-99.904 48H453.12a128 128 0 0 1-99.84-48H352v-1.536a128.128 128.128 0 0 1-9.984-14.976L314.88 448H240a28.928 28.928 0 0 0-28.48 34.304L241.088 640h541.824l29.568-157.696A28.928 28.928 0 0 0 784 448h-74.88l-27.136 47.488A132.405 132.405 0 0 1 672 510.464V512h-1.216zM480 288a32 32 0 0 0-64 0v196.096A64 64 0 0 0 453.12 496H480V288zm-128 96V224a32 32 0 0 0-64 0v160h64h-37.12A64 64 0 0 1 352 395.904zm-98.88 320l19.072 101.888A32 32 0 0 0 303.68 832h416.64a32 32 0 0 0 31.488-26.112L770.88 704H253.12z\"/>"},"full-screen":{"body":"<path fill=\"currentColor\" d=\"m160 96.064l192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872l-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z\"/>"},"goblet":{"body":"<path fill=\"currentColor\" d=\"M544 638.4V896h96a32 32 0 1 1 0 64H384a32 32 0 1 1 0-64h96V638.4A320 320 0 0 1 192 320c0-85.632 21.312-170.944 64-256h512c42.688 64.32 64 149.632 64 256a320 320 0 0 1-288 318.4zM256 320a256 256 0 1 0 512 0c0-78.592-12.608-142.4-36.928-192h-434.24C269.504 192.384 256 256.256 256 320z\"/>"},"goblet-full":{"body":"<path fill=\"currentColor\" d=\"M256 320h512c0-78.592-12.608-142.4-36.928-192h-434.24C269.504 192.384 256 256.256 256 320zm503.936 64H264.064a256.128 256.128 0 0 0 495.872 0zM544 638.4V896h96a32 32 0 1 1 0 64H384a32 32 0 1 1 0-64h96V638.4A320 320 0 0 1 192 320c0-85.632 21.312-170.944 64-256h512c42.688 64.32 64 149.632 64 256a320 320 0 0 1-288 318.4z\"/>"},"goblet-square":{"body":"<path fill=\"currentColor\" d=\"M544 638.912V896h96a32 32 0 1 1 0 64H384a32 32 0 1 1 0-64h96V638.848C250.624 623.424 192 442.496 192 319.68V96a32 32 0 0 1 32-32h576a32 32 0 0 1 32 32v224c0 122.816-58.624 303.68-288 318.912zM256 319.68c0 149.568 80 256.192 256 256.256C688.128 576 768 469.568 768 320V128H256v191.68z\"/>"},"goblet-square-full":{"body":"<path fill=\"currentColor\" d=\"M256 270.912c10.048 6.72 22.464 14.912 28.992 18.624a220.16 220.16 0 0 0 114.752 30.72c30.592 0 49.408-9.472 91.072-41.152l.64-.448c52.928-40.32 82.368-55.04 132.288-54.656c55.552.448 99.584 20.8 142.72 57.408l1.536 1.28V128H256v142.912zm.96 76.288C266.368 482.176 346.88 575.872 512 576c157.44.064 237.952-85.056 253.248-209.984a952.32 952.32 0 0 1-40.192-35.712c-32.704-27.776-63.36-41.92-101.888-42.24c-31.552-.256-50.624 9.28-93.12 41.6l-.576.448c-52.096 39.616-81.024 54.208-129.792 54.208c-54.784 0-100.48-13.376-142.784-37.056zM480 638.848C250.624 623.424 192 442.496 192 319.68V96a32 32 0 0 1 32-32h576a32 32 0 0 1 32 32v224c0 122.816-58.624 303.68-288 318.912V896h96a32 32 0 1 1 0 64H384a32 32 0 1 1 0-64h96V638.848z\"/>"},"gold-medal":{"body":"<path fill=\"currentColor\" d=\"m772.13 452.84l53.86-351.81c1.32-10.01-1.17-18.68-7.49-26.02S804.35 64 795.01 64H228.99v-.01h-.06c-9.33 0-17.15 3.67-23.49 11.01s-8.83 16.01-7.49 26.02l53.87 351.89C213.54 505.73 193.59 568.09 192 640c2 90.67 33.17 166.17 93.5 226.5S421.33 957.99 512 960c90.67-2 166.17-33.17 226.5-93.5c60.33-60.34 91.49-135.83 93.5-226.5c-1.59-71.94-21.56-134.32-59.87-187.16zM640.01 128h117.02l-39.01 254.02c-20.75-10.64-40.74-19.73-59.94-27.28c-5.92-3-11.95-5.8-18.08-8.41V128h.01zM576 128v198.76c-13.18-2.58-26.74-4.43-40.67-5.55c-8.07-.8-15.85-1.2-23.33-1.2c-10.54 0-21.09.66-31.64 1.96a359.844 359.844 0 0 0-32.36 4.79V128h128zm-192 0h.04v218.3c-6.22 2.66-12.34 5.5-18.36 8.56c-19.13 7.54-39.02 16.6-59.66 27.16L267.01 128H384zm308.99 692.99c-48 48-108.33 73-180.99 75.01c-72.66-2.01-132.99-27.01-180.99-75.01S258.01 712.66 256 640c2.01-72.66 27.01-132.99 75.01-180.99c19.67-19.67 41.41-35.47 65.22-47.41c38.33-15.04 71.15-23.92 98.44-26.65c5.07-.41 10.2-.7 15.39-.88c.63-.01 1.28-.03 1.91-.03c.66 0 1.35.03 2.02.04c5.11.17 10.15.46 15.13.86c27.4 2.71 60.37 11.65 98.91 26.79c23.71 11.93 45.36 27.69 64.96 47.29c48 48 73 108.33 75.01 180.99c-2.01 72.65-27.01 132.98-75.01 180.98z\"/><path fill=\"currentColor\" d=\"M544 480H416v64h64v192h-64v64h192v-64h-64z\"/>"},"goods":{"body":"<path fill=\"currentColor\" d=\"M320 288v-22.336C320 154.688 405.504 64 512 64s192 90.688 192 201.664v22.4h131.072a32 32 0 0 1 31.808 28.8l57.6 576a32 32 0 0 1-31.808 35.2H131.328a32 32 0 0 1-31.808-35.2l57.6-576a32 32 0 0 1 31.808-28.8H320zm64 0h256v-22.336C640 189.248 582.272 128 512 128c-70.272 0-128 61.248-128 137.664v22.4zm-64 64H217.92l-51.2 512h690.56l-51.264-512H704v96a32 32 0 1 1-64 0v-96H384v96a32 32 0 0 1-64 0v-96z\"/>"},"goods-filled":{"body":"<path fill=\"currentColor\" d=\"M192 352h640l64 544H128l64-544zm128 224h64V448h-64v128zm320 0h64V448h-64v128zM384 288h-64a192 192 0 1 1 384 0h-64a128 128 0 1 0-256 0z\"/>"},"grape":{"body":"<path fill=\"currentColor\" d=\"M544 195.2a160 160 0 0 1 96 60.8a160 160 0 1 1 146.24 254.976a160 160 0 0 1-128 224a160 160 0 1 1-292.48 0a160 160 0 0 1-128-224A160 160 0 1 1 384 256a160 160 0 0 1 96-60.8V128h-64a32 32 0 0 1 0-64h192a32 32 0 0 1 0 64h-64v67.2zM512 448a96 96 0 1 0 0-192a96 96 0 0 0 0 192zm-256 0a96 96 0 1 0 0-192a96 96 0 0 0 0 192zm128 224a96 96 0 1 0 0-192a96 96 0 0 0 0 192zm128 224a96 96 0 1 0 0-192a96 96 0 0 0 0 192zm128-224a96 96 0 1 0 0-192a96 96 0 0 0 0 192zm128-224a96 96 0 1 0 0-192a96 96 0 0 0 0 192z\"/>"},"grid":{"body":"<path fill=\"currentColor\" d=\"M640 384v256H384V384h256zm64 0h192v256H704V384zm-64 512H384V704h256v192zm64 0V704h192v192H704zm-64-768v192H384V128h256zm64 0h192v192H704V128zM320 384v256H128V384h192zm0 512H128V704h192v192zm0-768v192H128V128h192z\"/>"},"guide":{"body":"<path fill=\"currentColor\" d=\"M640 608h-64V416h64v192zm0 160v160a32 32 0 0 1-32 32H416a32 32 0 0 1-32-32V768h64v128h128V768h64zM384 608V416h64v192h-64zm256-352h-64V128H448v128h-64V96a32 32 0 0 1 32-32h192a32 32 0 0 1 32 32v160z\"/><path fill=\"currentColor\" d=\"m220.8 256l-71.232 80l71.168 80H768V256H220.8zm-14.4-64H800a32 32 0 0 1 32 32v224a32 32 0 0 1-32 32H206.4a32 32 0 0 1-23.936-10.752l-99.584-112a32 32 0 0 1 0-42.496l99.584-112A32 32 0 0 1 206.4 192zm678.784 496l-71.104 80H266.816V608h547.2l71.168 80zm-56.768-144H234.88a32 32 0 0 0-32 32v224a32 32 0 0 0 32 32h593.6a32 32 0 0 0 23.936-10.752l99.584-112a32 32 0 0 0 0-42.496l-99.584-112A32 32 0 0 0 828.48 544z\"/>"},"handbag":{"body":"<path fill=\"currentColor\" d=\"M887.01 264.99c-6-5.99-13.67-8.99-23.01-8.99H704c-1.34-54.68-20.01-100.01-56-136s-81.32-54.66-136-56c-54.68 1.34-100.01 20.01-136 56s-54.66 81.32-56 136H160c-9.35 0-17.02 3-23.01 8.99c-5.99 6-8.99 13.67-8.99 23.01v640c0 9.35 2.99 17.02 8.99 23.01S150.66 960 160 960h704c9.35 0 17.02-2.99 23.01-8.99S896 937.34 896 928V288c0-9.35-2.99-17.02-8.99-23.01zM421.5 165.5c24.32-24.34 54.49-36.84 90.5-37.5c35.99.68 66.16 13.18 90.5 37.5s36.84 54.49 37.5 90.5H384c.68-35.99 13.18-66.16 37.5-90.5zM832 896H192V320h128v128h64V320h256v128h64V320h128v576z\"/>"},"headset":{"body":"<path fill=\"currentColor\" d=\"M896 529.152V512a384 384 0 1 0-768 0v17.152A128 128 0 0 1 320 640v128a128 128 0 1 1-256 0V512a448 448 0 1 1 896 0v256a128 128 0 1 1-256 0V640a128 128 0 0 1 192-110.848zM896 640a64 64 0 0 0-128 0v128a64 64 0 0 0 128 0V640zm-768 0v128a64 64 0 0 0 128 0V640a64 64 0 1 0-128 0z\"/>"},"help":{"body":"<path fill=\"currentColor\" d=\"m759.936 805.248l-90.944-91.008A254.912 254.912 0 0 1 512 768a254.912 254.912 0 0 1-156.992-53.76l-90.944 91.008A382.464 382.464 0 0 0 512 896c94.528 0 181.12-34.176 247.936-90.752zm45.312-45.312A382.464 382.464 0 0 0 896 512c0-94.528-34.176-181.12-90.752-247.936l-91.008 90.944C747.904 398.4 768 452.864 768 512c0 59.136-20.096 113.6-53.76 156.992l91.008 90.944zm-45.312-541.184A382.464 382.464 0 0 0 512 128c-94.528 0-181.12 34.176-247.936 90.752l90.944 91.008A254.912 254.912 0 0 1 512 256c59.136 0 113.6 20.096 156.992 53.76l90.944-91.008zm-541.184 45.312A382.464 382.464 0 0 0 128 512c0 94.528 34.176 181.12 90.752 247.936l91.008-90.944A254.912 254.912 0 0 1 256 512c0-59.136 20.096-113.6 53.76-156.992l-91.008-90.944zm417.28 394.496a194.56 194.56 0 0 0 22.528-22.528C686.912 602.56 704 559.232 704 512a191.232 191.232 0 0 0-67.968-146.56A191.296 191.296 0 0 0 512 320a191.232 191.232 0 0 0-146.56 67.968C337.088 421.44 320 464.768 320 512a191.232 191.232 0 0 0 67.968 146.56C421.44 686.912 464.768 704 512 704c47.296 0 90.56-17.088 124.032-45.44zM512 960a448 448 0 1 1 0-896a448 448 0 0 1 0 896z\"/>"},"help-filled":{"body":"<path fill=\"currentColor\" d=\"M926.784 480H701.312A192.512 192.512 0 0 0 544 322.688V97.216A416.064 416.064 0 0 1 926.784 480zm0 64A416.064 416.064 0 0 1 544 926.784V701.312A192.512 192.512 0 0 0 701.312 544h225.472zM97.28 544h225.472A192.512 192.512 0 0 0 480 701.312v225.472A416.064 416.064 0 0 1 97.216 544zm0-64A416.064 416.064 0 0 1 480 97.216v225.472A192.512 192.512 0 0 0 322.688 480H97.216z\"/>"},"hide":{"body":"<path fill=\"currentColor\" d=\"M876.8 156.8c0-9.6-3.2-16-9.6-22.4c-6.4-6.4-12.8-9.6-22.4-9.6c-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8c-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4c0 9.6 3.2 16 9.6 22.4c6.4 6.4 12.8 9.6 22.4 9.6c9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8c28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8c0-44.8 16-83.2 48-112c32-28.8 67.2-48 112-48c28.8 0 54.4 6.4 73.6 19.2L371.2 588.8ZM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6c-28.8 48-80 105.6-153.6 172.8c-73.6 67.2-172.8 108.8-284.8 115.2c-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8c160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z\"/><path fill=\"currentColor\" d=\"M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2c64 0 115.2-22.4 160-64c41.6-41.6 64-96 64-160c0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4c0 44.8-16 83.2-48 112c-32 28.8-67.2 48-112 48Z\"/>"},"histogram":{"body":"<path fill=\"currentColor\" d=\"M416 896V128h192v768H416zm-288 0V448h192v448H128zm576 0V320h192v576H704z\"/>"},"home-filled":{"body":"<path fill=\"currentColor\" d=\"M512 128L128 447.936V896h255.936V640H640v256h255.936V447.936z\"/>"},"hot-water":{"body":"<path fill=\"currentColor\" d=\"M273.067 477.867h477.866V409.6H273.067v68.267zm0 68.266v51.2A187.733 187.733 0 0 0 460.8 785.067h102.4a187.733 187.733 0 0 0 187.733-187.734v-51.2H273.067zm-34.134-204.8h546.134a34.133 34.133 0 0 1 34.133 34.134v221.866a256 256 0 0 1-256 256H460.8a256 256 0 0 1-256-256V375.467a34.133 34.133 0 0 1 34.133-34.134zM512 34.133a34.133 34.133 0 0 1 34.133 34.134v170.666a34.133 34.133 0 0 1-68.266 0V68.267A34.133 34.133 0 0 1 512 34.133zM375.467 102.4a34.133 34.133 0 0 1 34.133 34.133v102.4a34.133 34.133 0 0 1-68.267 0v-102.4a34.133 34.133 0 0 1 34.134-34.133zm273.066 0a34.133 34.133 0 0 1 34.134 34.133v102.4a34.133 34.133 0 1 1-68.267 0v-102.4a34.133 34.133 0 0 1 34.133-34.133zM170.667 921.668h682.666a34.133 34.133 0 1 1 0 68.267H170.667a34.133 34.133 0 1 1 0-68.267z\"/>"},"house":{"body":"<path fill=\"currentColor\" d=\"M192 413.952V896h640V413.952L512 147.328L192 413.952zM139.52 374.4l352-293.312a32 32 0 0 1 40.96 0l352 293.312A32 32 0 0 1 896 398.976V928a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V398.976a32 32 0 0 1 11.52-24.576z\"/>"},"ice-cream":{"body":"<path fill=\"currentColor\" d=\"M128.64 448a208 208 0 0 1 193.536-191.552a224 224 0 0 1 445.248 15.488A208.128 208.128 0 0 1 894.784 448H896L548.8 983.68a32 32 0 0 1-53.248.704L128 448h.64zm64.256 0h286.208a144 144 0 0 0-286.208 0zm351.36 0h286.272a144 144 0 0 0-286.272 0zm-294.848 64l271.808 396.608L778.24 512H249.408zM511.68 352.64a207.872 207.872 0 0 1 189.184-96.192a160 160 0 0 0-314.752 5.632c52.608 12.992 97.28 46.08 125.568 90.56z\"/>"},"ice-cream-round":{"body":"<path fill=\"currentColor\" d=\"m308.352 489.344l226.304 226.304a32 32 0 0 0 45.248 0L783.552 512A192 192 0 1 0 512 240.448L308.352 444.16a32 32 0 0 0 0 45.248zm135.744 226.304L308.352 851.392a96 96 0 0 1-135.744-135.744l135.744-135.744l-45.248-45.248a96 96 0 0 1 0-135.808L466.752 195.2A256 256 0 0 1 828.8 557.248L625.152 760.96a96 96 0 0 1-135.808 0l-45.248-45.248zM398.848 670.4L353.6 625.152L217.856 760.896a32 32 0 0 0 45.248 45.248L398.848 670.4zm248.96-384.64a32 32 0 0 1 0 45.248L466.624 512a32 32 0 1 1-45.184-45.248l180.992-181.056a32 32 0 0 1 45.248 0zm90.496 90.496a32 32 0 0 1 0 45.248L557.248 602.496A32 32 0 1 1 512 557.248l180.992-180.992a32 32 0 0 1 45.312 0z\"/>"},"ice-cream-square":{"body":"<path fill=\"currentColor\" d=\"M416 640h256a32 32 0 0 0 32-32V160a32 32 0 0 0-32-32H352a32 32 0 0 0-32 32v448a32 32 0 0 0 32 32h64zm192 64v160a96 96 0 0 1-192 0V704h-64a96 96 0 0 1-96-96V160a96 96 0 0 1 96-96h320a96 96 0 0 1 96 96v448a96 96 0 0 1-96 96h-64zm-64 0h-64v160a32 32 0 1 0 64 0V704z\"/>"},"ice-drink":{"body":"<path fill=\"currentColor\" d=\"M512 448v128h239.68l16.064-128H512zm-64 0H256.256l16.064 128H448V448zm64-255.36V384h247.744A256.128 256.128 0 0 0 512 192.64zm-64 8.064A256.448 256.448 0 0 0 264.256 384H448V200.704zm64-72.064A320.128 320.128 0 0 1 825.472 384H896a32 32 0 1 1 0 64h-64v1.92l-56.96 454.016A64 64 0 0 1 711.552 960H312.448a64 64 0 0 1-63.488-56.064L192 449.92V448h-64a32 32 0 0 1 0-64h70.528A320.384 320.384 0 0 1 448 135.04V96a96 96 0 0 1 96-96h128a32 32 0 1 1 0 64H544a32 32 0 0 0-32 32v32.64zM743.68 640H280.32l32.128 256h399.104l32.128-256z\"/>"},"ice-tea":{"body":"<path fill=\"currentColor\" d=\"M197.696 259.648a320.128 320.128 0 0 1 628.608 0A96 96 0 0 1 896 352v64a96 96 0 0 1-71.616 92.864l-49.408 395.072A64 64 0 0 1 711.488 960H312.512a64 64 0 0 1-63.488-56.064l-49.408-395.072A96 96 0 0 1 128 416v-64a96 96 0 0 1 69.696-92.352zM264.064 256h495.872a256.128 256.128 0 0 0-495.872 0zm495.424 256H264.512l48 384h398.976l48-384zM224 448h576a32 32 0 0 0 32-32v-64a32 32 0 0 0-32-32H224a32 32 0 0 0-32 32v64a32 32 0 0 0 32 32zm160 192h64v64h-64v-64zm192 64h64v64h-64v-64zm-128 64h64v64h-64v-64zm64-192h64v64h-64v-64z\"/>"},"info-filled":{"body":"<path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896.064A448 448 0 0 1 512 64zm67.2 275.072c33.28 0 60.288-23.104 60.288-57.344s-27.072-57.344-60.288-57.344c-33.28 0-60.16 23.104-60.16 57.344s26.88 57.344 60.16 57.344zM590.912 699.2c0-6.848 2.368-24.64 1.024-34.752l-52.608 60.544c-10.88 11.456-24.512 19.392-30.912 17.28a12.992 12.992 0 0 1-8.256-14.72l87.68-276.992c7.168-35.136-12.544-67.2-54.336-71.296c-44.096 0-108.992 44.736-148.48 101.504c0 6.784-1.28 23.68.064 33.792l52.544-60.608c10.88-11.328 23.552-19.328 29.952-17.152a12.8 12.8 0 0 1 7.808 16.128L388.48 728.576c-10.048 32.256 8.96 63.872 55.04 71.04c67.84 0 107.904-43.648 147.456-100.416z\"/>"},"iphone":{"body":"<path fill=\"currentColor\" d=\"M224 768v96.064a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64V768H224zm0-64h576V160a64 64 0 0 0-64-64H288a64 64 0 0 0-64 64v544zm32 288a96 96 0 0 1-96-96V128a96 96 0 0 1 96-96h512a96 96 0 0 1 96 96v768a96 96 0 0 1-96 96H256zm304-144a48 48 0 1 1-96 0a48 48 0 0 1 96 0z\"/>"},"key":{"body":"<path fill=\"currentColor\" d=\"M448 456.064V96a32 32 0 0 1 32-32.064L672 64a32 32 0 0 1 0 64H512v128h160a32 32 0 0 1 0 64H512v128a256 256 0 1 1-64 8.064zM512 896a192 192 0 1 0 0-384a192 192 0 0 0 0 384z\"/>"},"knife-fork":{"body":"<path fill=\"currentColor\" d=\"M256 410.56V96a32 32 0 0 1 64 0v314.56A96 96 0 0 0 384 320V96a32 32 0 0 1 64 0v224a160 160 0 0 1-128 156.8V928a32 32 0 1 1-64 0V476.8A160 160 0 0 1 128 320V96a32 32 0 0 1 64 0v224a96 96 0 0 0 64 90.56zm384-250.24V544h126.72c-3.328-78.72-12.928-147.968-28.608-207.744c-14.336-54.528-46.848-113.344-98.112-175.872zM640 608v320a32 32 0 1 1-64 0V64h64c85.312 89.472 138.688 174.848 160 256c21.312 81.152 32 177.152 32 288H640z\"/>"},"lightning":{"body":"<path fill=\"currentColor\" d=\"M288 671.36v64.128A239.808 239.808 0 0 1 63.744 496.192a240.32 240.32 0 0 1 199.488-236.8a256.128 256.128 0 0 1 487.872-30.976A256.064 256.064 0 0 1 736 734.016v-64.768a192 192 0 0 0 3.328-377.92l-35.2-6.592l-12.8-33.408a192.064 192.064 0 0 0-365.952 23.232l-9.92 40.896l-41.472 7.04a176.32 176.32 0 0 0-146.24 173.568c0 91.968 70.464 167.36 160.256 175.232z\"/><path fill=\"currentColor\" d=\"M416 736a32 32 0 0 1-27.776-47.872l128-224a32 32 0 1 1 55.552 31.744L471.168 672H608a32 32 0 0 1 27.776 47.872l-128 224a32 32 0 1 1-55.68-31.744L552.96 736H416z\"/>"},"link":{"body":"<path fill=\"currentColor\" d=\"M715.648 625.152L670.4 579.904l90.496-90.56c75.008-74.944 85.12-186.368 22.656-248.896c-62.528-62.464-173.952-52.352-248.96 22.656L444.16 353.6l-45.248-45.248l90.496-90.496c100.032-99.968 251.968-110.08 339.456-22.656c87.488 87.488 77.312 239.424-22.656 339.456l-90.496 90.496zm-90.496 90.496l-90.496 90.496C434.624 906.112 282.688 916.224 195.2 828.8c-87.488-87.488-77.312-239.424 22.656-339.456l90.496-90.496l45.248 45.248l-90.496 90.56c-75.008 74.944-85.12 186.368-22.656 248.896c62.528 62.464 173.952 52.352 248.96-22.656l90.496-90.496l45.248 45.248zm0-362.048l45.248 45.248L398.848 670.4L353.6 625.152L625.152 353.6z\"/>"},"list":{"body":"<path fill=\"currentColor\" d=\"M704 192h160v736H160V192h160v64h384v-64zM288 512h448v-64H288v64zm0 256h448v-64H288v64zm96-576V96h256v96H384z\"/>"},"loading":{"body":"<path fill=\"currentColor\" d=\"M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z\"/>"},"location":{"body":"<path fill=\"currentColor\" d=\"M800 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576C705.472 688.128 800 534.144 800 416zM512 960C277.312 746.688 160 565.312 160 416a352 352 0 0 1 704 0c0 149.312-117.312 330.688-352 544z\"/><path fill=\"currentColor\" d=\"M512 512a96 96 0 1 0 0-192a96 96 0 0 0 0 192zm0 64a160 160 0 1 1 0-320a160 160 0 0 1 0 320z\"/>"},"location-filled":{"body":"<path fill=\"currentColor\" d=\"M512 928c23.936 0 117.504-68.352 192.064-153.152C803.456 661.888 864 535.808 864 416c0-189.632-155.84-320-352-320S160 226.368 160 416c0 120.32 60.544 246.4 159.936 359.232C394.432 859.84 488 928 512 928zm0-435.2a64 64 0 1 0 0-128a64 64 0 0 0 0 128zm0 140.8a204.8 204.8 0 1 1 0-409.6a204.8 204.8 0 0 1 0 409.6z\"/>"},"location-information":{"body":"<path fill=\"currentColor\" d=\"M288 896h448q32 0 32 32t-32 32H288q-32 0-32-32t32-32z\"/><path fill=\"currentColor\" d=\"M800 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576C705.472 688.128 800 534.144 800 416zM512 960C277.312 746.688 160 565.312 160 416a352 352 0 0 1 704 0c0 149.312-117.312 330.688-352 544z\"/><path fill=\"currentColor\" d=\"M512 512a96 96 0 1 0 0-192a96 96 0 0 0 0 192zm0 64a160 160 0 1 1 0-320a160 160 0 0 1 0 320z\"/>"},"lock":{"body":"<path fill=\"currentColor\" d=\"M224 448a32 32 0 0 0-32 32v384a32 32 0 0 0 32 32h576a32 32 0 0 0 32-32V480a32 32 0 0 0-32-32H224zm0-64h576a96 96 0 0 1 96 96v384a96 96 0 0 1-96 96H224a96 96 0 0 1-96-96V480a96 96 0 0 1 96-96z\"/><path fill=\"currentColor\" d=\"M512 544a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V576a32 32 0 0 1 32-32zm192-160v-64a192 192 0 1 0-384 0v64h384zM512 64a256 256 0 0 1 256 256v128H256V320A256 256 0 0 1 512 64z\"/>"},"lollipop":{"body":"<path fill=\"currentColor\" d=\"M513.28 448a64 64 0 1 1 76.544 49.728A96 96 0 0 0 768 448h64a160 160 0 0 1-320 0h1.28zm-126.976-29.696a256 256 0 1 0 43.52-180.48A256 256 0 0 1 832 448h-64a192 192 0 0 0-381.696-29.696zm105.664 249.472L285.696 874.048a96 96 0 0 1-135.68-135.744l206.208-206.272a320 320 0 1 1 135.744 135.744zm-54.464-36.032a321.92 321.92 0 0 1-45.248-45.248L195.2 783.552a32 32 0 1 0 45.248 45.248l197.056-197.12z\"/>"},"magic-stick":{"body":"<path fill=\"currentColor\" d=\"M512 64h64v192h-64V64zm0 576h64v192h-64V640zM160 480v-64h192v64H160zm576 0v-64h192v64H736zM249.856 199.04l45.248-45.184L430.848 289.6L385.6 334.848L249.856 199.104zM657.152 606.4l45.248-45.248l135.744 135.744l-45.248 45.248L657.152 606.4zM114.048 923.2L68.8 877.952l316.8-316.8l45.248 45.248l-316.8 316.8zM702.4 334.848L657.152 289.6l135.744-135.744l45.248 45.248L702.4 334.848z\"/>"},"magnet":{"body":"<path fill=\"currentColor\" d=\"M832 320V192H704v320a192 192 0 1 1-384 0V192H192v128h128v64H192v128a320 320 0 0 0 640 0V384H704v-64h128zM640 512V128h256v384a384 384 0 1 1-768 0V128h256v384a128 128 0 1 0 256 0z\"/>"},"male":{"body":"<path fill=\"currentColor\" d=\"M399.5 849.5a225 225 0 1 0 0-450a225 225 0 0 0 0 450zm0 56.25a281.25 281.25 0 1 1 0-562.5a281.25 281.25 0 0 1 0 562.5zm253.125-787.5h225q28.125 0 28.125 28.125T877.625 174.5h-225q-28.125 0-28.125-28.125t28.125-28.125z\"/><path fill=\"currentColor\" d=\"M877.625 118.25q28.125 0 28.125 28.125v225q0 28.125-28.125 28.125T849.5 371.375v-225q0-28.125 28.125-28.125z\"/><path fill=\"currentColor\" d=\"M604.813 458.9L565.1 419.131l292.613-292.668l39.825 39.824z\"/>"},"management":{"body":"<path fill=\"currentColor\" d=\"M576 128v288l96-96l96 96V128h128v768H320V128h256zm-448 0h128v768H128V128z\"/>"},"map-location":{"body":"<path fill=\"currentColor\" d=\"M800 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576C705.472 688.128 800 534.144 800 416zM512 960C277.312 746.688 160 565.312 160 416a352 352 0 0 1 704 0c0 149.312-117.312 330.688-352 544z\"/><path fill=\"currentColor\" d=\"M512 448a64 64 0 1 0 0-128a64 64 0 0 0 0 128zm0 64a128 128 0 1 1 0-256a128 128 0 0 1 0 256zm345.6 192L960 960H672v-64H352v64H64l102.4-256h691.2zm-68.928 0H235.328l-76.8 192h706.944l-76.8-192z\"/>"},"medal":{"body":"<path fill=\"currentColor\" d=\"M512 896a256 256 0 1 0 0-512a256 256 0 0 0 0 512zm0 64a320 320 0 1 1 0-640a320 320 0 0 1 0 640z\"/><path fill=\"currentColor\" d=\"M576 128H448v200a286.72 286.72 0 0 1 64-8c19.52 0 40.832 2.688 64 8V128zm64 0v219.648c24.448 9.088 50.56 20.416 78.4 33.92L757.44 128H640zm-256 0H266.624l39.04 253.568c27.84-13.504 53.888-24.832 78.336-33.92V128zM229.312 64h565.376a32 32 0 0 1 31.616 36.864L768 480c-113.792-64-199.104-96-256-96c-56.896 0-142.208 32-256 96l-58.304-379.136A32 32 0 0 1 229.312 64z\"/>"},"memo":{"body":"<path fill=\"currentColor\" d=\"M480 320h192c21.33 0 32-10.67 32-32s-10.67-32-32-32H480c-21.33 0-32 10.67-32 32s10.67 32 32 32z\"/><path fill=\"currentColor\" d=\"M887.01 72.99C881.01 67 873.34 64 864 64H160c-9.35 0-17.02 3-23.01 8.99C131 78.99 128 86.66 128 96v832c0 9.35 2.99 17.02 8.99 23.01S150.66 960 160 960h704c9.35 0 17.02-2.99 23.01-8.99S896 937.34 896 928V96c0-9.35-3-17.02-8.99-23.01zM192 896V128h96v768h-96zm640 0H352V128h480v768z\"/><path fill=\"currentColor\" d=\"M480 512h192c21.33 0 32-10.67 32-32s-10.67-32-32-32H480c-21.33 0-32 10.67-32 32s10.67 32 32 32zm0 192h192c21.33 0 32-10.67 32-32s-10.67-32-32-32H480c-21.33 0-32 10.67-32 32s10.67 32 32 32z\"/>"},"menu":{"body":"<path fill=\"currentColor\" d=\"M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H608zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H608z\"/>"},"message":{"body":"<path fill=\"currentColor\" d=\"M128 224v512a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V224H128zm0-64h768a64 64 0 0 1 64 64v512a128 128 0 0 1-128 128H192A128 128 0 0 1 64 736V224a64 64 0 0 1 64-64z\"/><path fill=\"currentColor\" d=\"M904 224L656.512 506.88a192 192 0 0 1-289.024 0L120 224h784zm-698.944 0l210.56 240.704a128 128 0 0 0 192.704 0L818.944 224H205.056z\"/>"},"message-box":{"body":"<path fill=\"currentColor\" d=\"M288 384h448v64H288v-64zm96-128h256v64H384v-64zM131.456 512H384v128h256V512h252.544L721.856 192H302.144L131.456 512zM896 576H704v128H320V576H128v256h768V576zM275.776 128h472.448a32 32 0 0 1 28.608 17.664l179.84 359.552A32 32 0 0 1 960 519.552V864a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V519.552a32 32 0 0 1 3.392-14.336l179.776-359.552A32 32 0 0 1 275.776 128z\"/>"},"mic":{"body":"<path fill=\"currentColor\" d=\"M480 704h160a64 64 0 0 0 64-64v-32h-96a32 32 0 0 1 0-64h96v-96h-96a32 32 0 0 1 0-64h96v-96h-96a32 32 0 0 1 0-64h96v-32a64 64 0 0 0-64-64H384a64 64 0 0 0-64 64v32h96a32 32 0 0 1 0 64h-96v96h96a32 32 0 0 1 0 64h-96v96h96a32 32 0 0 1 0 64h-96v32a64 64 0 0 0 64 64h96zm64 64v128h192a32 32 0 1 1 0 64H288a32 32 0 1 1 0-64h192V768h-96a128 128 0 0 1-128-128V192A128 128 0 0 1 384 64h256a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128h-96z\"/>"},"microphone":{"body":"<path fill=\"currentColor\" d=\"M512 128a128 128 0 0 0-128 128v256a128 128 0 1 0 256 0V256a128 128 0 0 0-128-128zm0-64a192 192 0 0 1 192 192v256a192 192 0 1 1-384 0V256A192 192 0 0 1 512 64zm-32 832v-64a288 288 0 0 1-288-288v-32a32 32 0 0 1 64 0v32a224 224 0 0 0 224 224h64a224 224 0 0 0 224-224v-32a32 32 0 1 1 64 0v32a288 288 0 0 1-288 288v64h64a32 32 0 1 1 0 64H416a32 32 0 1 1 0-64h64z\"/>"},"milk-tea":{"body":"<path fill=\"currentColor\" d=\"M416 128V96a96 96 0 0 1 96-96h128a32 32 0 1 1 0 64H512a32 32 0 0 0-32 32v32h320a96 96 0 0 1 11.712 191.296l-39.68 581.056A64 64 0 0 1 708.224 960H315.776a64 64 0 0 1-63.872-59.648l-39.616-581.056A96 96 0 0 1 224 128h192zM276.48 320l39.296 576h392.448l4.8-70.784a224.064 224.064 0 0 1 30.016-439.808L747.52 320H276.48zM224 256h576a32 32 0 1 0 0-64H224a32 32 0 0 0 0 64zm493.44 503.872l21.12-309.12a160 160 0 0 0-21.12 309.12z\"/>"},"minus":{"body":"<path fill=\"currentColor\" d=\"M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z\"/>"},"money":{"body":"<path fill=\"currentColor\" d=\"M256 640v192h640V384H768v-64h150.976c14.272 0 19.456 1.472 24.64 4.288a29.056 29.056 0 0 1 12.16 12.096c2.752 5.184 4.224 10.368 4.224 24.64v493.952c0 14.272-1.472 19.456-4.288 24.64a29.056 29.056 0 0 1-12.096 12.16c-5.184 2.752-10.368 4.224-24.64 4.224H233.024c-14.272 0-19.456-1.472-24.64-4.288a29.056 29.056 0 0 1-12.16-12.096c-2.688-5.184-4.224-10.368-4.224-24.576V640h64z\"/><path fill=\"currentColor\" d=\"M768 192H128v448h640V192zm64-22.976v493.952c0 14.272-1.472 19.456-4.288 24.64a29.056 29.056 0 0 1-12.096 12.16c-5.184 2.752-10.368 4.224-24.64 4.224H105.024c-14.272 0-19.456-1.472-24.64-4.288a29.056 29.056 0 0 1-12.16-12.096C65.536 682.432 64 677.248 64 663.04V169.024c0-14.272 1.472-19.456 4.288-24.64a29.056 29.056 0 0 1 12.096-12.16C85.568 129.536 90.752 128 104.96 128h685.952c14.272 0 19.456 1.472 24.64 4.288a29.056 29.056 0 0 1 12.16 12.096c2.752 5.184 4.224 10.368 4.224 24.64z\"/><path fill=\"currentColor\" d=\"M448 576a160 160 0 1 1 0-320a160 160 0 0 1 0 320zm0-64a96 96 0 1 0 0-192a96 96 0 0 0 0 192z\"/>"},"monitor":{"body":"<path fill=\"currentColor\" d=\"M544 768v128h192a32 32 0 1 1 0 64H288a32 32 0 1 1 0-64h192V768H192A128 128 0 0 1 64 640V256a128 128 0 0 1 128-128h640a128 128 0 0 1 128 128v384a128 128 0 0 1-128 128H544zM192 192a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64H192z\"/>"},"moon":{"body":"<path fill=\"currentColor\" d=\"M240.448 240.448a384 384 0 1 0 559.424 525.696a448 448 0 0 1-542.016-542.08a390.592 390.592 0 0 0-17.408 16.384zm181.056 362.048a384 384 0 0 0 525.632 16.384A448 448 0 1 1 405.056 76.8a384 384 0 0 0 16.448 525.696z\"/>"},"moon-night":{"body":"<path fill=\"currentColor\" d=\"M384 512a448 448 0 0 1 215.872-383.296A384 384 0 0 0 213.76 640h188.8A448.256 448.256 0 0 1 384 512zM171.136 704a448 448 0 0 1 636.992-575.296A384 384 0 0 0 499.328 704h-328.32z\"/><path fill=\"currentColor\" d=\"M32 640h960q32 0 32 32t-32 32H32q-32 0-32-32t32-32zm128 128h384a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm160 127.68l224 .256a32 32 0 0 1 32 32V928a32 32 0 0 1-32 32l-224-.384a32 32 0 0 1-32-32v-.064a32 32 0 0 1 32-32z\"/>"},"more":{"body":"<path fill=\"currentColor\" d=\"M176 416a112 112 0 1 0 0 224a112 112 0 0 0 0-224m0 64a48 48 0 1 1 0 96a48 48 0 0 1 0-96zm336-64a112 112 0 1 1 0 224a112 112 0 0 1 0-224zm0 64a48 48 0 1 0 0 96a48 48 0 0 0 0-96zm336-64a112 112 0 1 1 0 224a112 112 0 0 1 0-224zm0 64a48 48 0 1 0 0 96a48 48 0 0 0 0-96z\"/>"},"more-filled":{"body":"<path fill=\"currentColor\" d=\"M176 416a112 112 0 1 1 0 224a112 112 0 0 1 0-224zm336 0a112 112 0 1 1 0 224a112 112 0 0 1 0-224zm336 0a112 112 0 1 1 0 224a112 112 0 0 1 0-224z\"/>"},"mostly-cloudy":{"body":"<path fill=\"currentColor\" d=\"M737.216 357.952L704 349.824l-11.776-32a192.064 192.064 0 0 0-367.424 23.04l-8.96 39.04l-39.04 8.96A192.064 192.064 0 0 0 320 768h368a207.808 207.808 0 0 0 207.808-208a208.32 208.32 0 0 0-158.592-202.048zm15.168-62.208A272.32 272.32 0 0 1 959.744 560a271.808 271.808 0 0 1-271.552 272H320a256 256 0 0 1-57.536-505.536a256.128 256.128 0 0 1 489.92-30.72z\"/>"},"mouse":{"body":"<path fill=\"currentColor\" d=\"M438.144 256c-68.352 0-92.736 4.672-117.76 18.112c-20.096 10.752-35.52 26.176-46.272 46.272C260.672 345.408 256 369.792 256 438.144v275.712c0 68.352 4.672 92.736 18.112 117.76c10.752 20.096 26.176 35.52 46.272 46.272C345.408 891.328 369.792 896 438.144 896h147.712c68.352 0 92.736-4.672 117.76-18.112c20.096-10.752 35.52-26.176 46.272-46.272C763.328 806.592 768 782.208 768 713.856V438.144c0-68.352-4.672-92.736-18.112-117.76a110.464 110.464 0 0 0-46.272-46.272C678.592 260.672 654.208 256 585.856 256H438.144zm0-64h147.712c85.568 0 116.608 8.96 147.904 25.6c31.36 16.768 55.872 41.344 72.576 72.64C823.104 321.536 832 352.576 832 438.08v275.84c0 85.504-8.96 116.544-25.6 147.84a174.464 174.464 0 0 1-72.64 72.576C702.464 951.104 671.424 960 585.92 960H438.08c-85.504 0-116.544-8.96-147.84-25.6a174.464 174.464 0 0 1-72.64-72.704c-16.768-31.296-25.664-62.336-25.664-147.84v-275.84c0-85.504 8.96-116.544 25.6-147.84a174.464 174.464 0 0 1 72.768-72.576c31.232-16.704 62.272-25.6 147.776-25.6z\"/><path fill=\"currentColor\" d=\"M512 320q32 0 32 32v128q0 32-32 32t-32-32V352q0-32 32-32zm32-96a32 32 0 0 1-64 0v-64a32 32 0 0 0-32-32h-96a32 32 0 0 1 0-64h96a96 96 0 0 1 96 96v64z\"/>"},"mug":{"body":"<path fill=\"currentColor\" d=\"M736 800V160H160v640a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64zm64-544h63.552a96 96 0 0 1 96 96v224a96 96 0 0 1-96 96H800v128a128 128 0 0 1-128 128H224A128 128 0 0 1 96 800V128a32 32 0 0 1 32-32h640a32 32 0 0 1 32 32v128zm0 64v288h63.552a32 32 0 0 0 32-32V352a32 32 0 0 0-32-32H800z\"/>"},"mute":{"body":"<path fill=\"currentColor\" d=\"m412.16 592.128l-45.44 45.44A191.232 191.232 0 0 1 320 512V256a192 192 0 1 1 384 0v44.352l-64 64V256a128 128 0 1 0-256 0v256c0 30.336 10.56 58.24 28.16 80.128zm51.968 38.592A128 128 0 0 0 640 512v-57.152l64-64V512a192 192 0 0 1-287.68 166.528l47.808-47.808zM314.88 779.968l46.144-46.08A222.976 222.976 0 0 0 480 768h64a224 224 0 0 0 224-224v-32a32 32 0 1 1 64 0v32a288 288 0 0 1-288 288v64h64a32 32 0 1 1 0 64H416a32 32 0 1 1 0-64h64v-64c-61.44 0-118.4-19.2-165.12-52.032zM266.752 737.6A286.976 286.976 0 0 1 192 544v-32a32 32 0 0 1 64 0v32c0 56.832 21.184 108.8 56.064 148.288L266.752 737.6z\"/><path fill=\"currentColor\" d=\"M150.72 859.072a32 32 0 0 1-45.44-45.056l704-708.544a32 32 0 0 1 45.44 45.056l-704 708.544z\"/>"},"mute-notification":{"body":"<path fill=\"currentColor\" d=\"m241.216 832l63.616-64H768V448c0-42.368-10.24-82.304-28.48-117.504l46.912-47.232C815.36 331.392 832 387.84 832 448v320h96a32 32 0 1 1 0 64H241.216zm-90.24 0H96a32 32 0 1 1 0-64h96V448a320.128 320.128 0 0 1 256-313.6V128a64 64 0 1 1 128 0v6.4a319.552 319.552 0 0 1 171.648 97.088l-45.184 45.44A256 256 0 0 0 256 448v278.336L151.04 832zM448 896h128a64 64 0 0 1-128 0z\"/><path fill=\"currentColor\" d=\"M150.72 859.072a32 32 0 0 1-45.44-45.056l704-708.544a32 32 0 0 1 45.44 45.056l-704 708.544z\"/>"},"no-smoking":{"body":"<path fill=\"currentColor\" d=\"M440.256 576H256v128h56.256l-64 64H224a32 32 0 0 1-32-32V544a32 32 0 0 1 32-32h280.256l-64 64zm143.488 128H704V583.744L775.744 512H928a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H519.744l64-64zM768 576v128h128V576H768zm-29.696-207.552l45.248 45.248l-497.856 497.856l-45.248-45.248zM256 64h64v320h-64zM128 192h64v192h-64zM64 512h64v256H64z\"/>"},"notebook":{"body":"<path fill=\"currentColor\" d=\"M192 128v768h640V128H192zm-32-64h704a32 32 0 0 1 32 32v832a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32z\"/><path fill=\"currentColor\" d=\"M672 128h64v768h-64zM96 192h128q32 0 32 32t-32 32H96q-32 0-32-32t32-32zm0 192h128q32 0 32 32t-32 32H96q-32 0-32-32t32-32zm0 192h128q32 0 32 32t-32 32H96q-32 0-32-32t32-32zm0 192h128q32 0 32 32t-32 32H96q-32 0-32-32t32-32z\"/>"},"notification":{"body":"<path fill=\"currentColor\" d=\"M512 128v64H256a64 64 0 0 0-64 64v512a64 64 0 0 0 64 64h512a64 64 0 0 0 64-64V512h64v256a128 128 0 0 1-128 128H256a128 128 0 0 1-128-128V256a128 128 0 0 1 128-128h256z\"/><path fill=\"currentColor\" d=\"M768 384a128 128 0 1 0 0-256a128 128 0 0 0 0 256zm0 64a192 192 0 1 1 0-384a192 192 0 0 1 0 384z\"/>"},"odometer":{"body":"<path fill=\"currentColor\" d=\"M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z\"/><path fill=\"currentColor\" d=\"M192 512a320 320 0 1 1 640 0a32 32 0 1 1-64 0a256 256 0 1 0-512 0a32 32 0 0 1-64 0z\"/><path fill=\"currentColor\" d=\"M570.432 627.84A96 96 0 1 1 509.568 608l60.992-187.776A32 32 0 1 1 631.424 440l-60.992 187.776zM502.08 734.464a32 32 0 1 0 19.84-60.928a32 32 0 0 0-19.84 60.928z\"/>"},"office-building":{"body":"<path fill=\"currentColor\" d=\"M192 128v704h384V128H192zm-32-64h448a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32z\"/><path fill=\"currentColor\" d=\"M256 256h256v64H256v-64zm0 192h256v64H256v-64zm0 192h256v64H256v-64zm384-128h128v64H640v-64zm0 128h128v64H640v-64zM64 832h896v64H64v-64z\"/><path fill=\"currentColor\" d=\"M640 384v448h192V384H640zm-32-64h256a32 32 0 0 1 32 32v512a32 32 0 0 1-32 32H608a32 32 0 0 1-32-32V352a32 32 0 0 1 32-32z\"/>"},"open":{"body":"<path fill=\"currentColor\" d=\"M329.956 257.138a254.862 254.862 0 0 0 0 509.724h364.088a254.862 254.862 0 0 0 0-509.724H329.956zm0-72.818h364.088a327.68 327.68 0 1 1 0 655.36H329.956a327.68 327.68 0 1 1 0-655.36z\"/><path fill=\"currentColor\" d=\"M694.044 621.227a109.227 109.227 0 1 0 0-218.454a109.227 109.227 0 0 0 0 218.454zm0 72.817a182.044 182.044 0 1 1 0-364.088a182.044 182.044 0 0 1 0 364.088z\"/>"},"operation":{"body":"<path fill=\"currentColor\" d=\"M389.44 768a96.064 96.064 0 0 1 181.12 0H896v64H570.56a96.064 96.064 0 0 1-181.12 0H128v-64h261.44zm192-288a96.064 96.064 0 0 1 181.12 0H896v64H762.56a96.064 96.064 0 0 1-181.12 0H128v-64h453.44zm-320-288a96.064 96.064 0 0 1 181.12 0H896v64H442.56a96.064 96.064 0 0 1-181.12 0H128v-64h133.44z\"/>"},"opportunity":{"body":"<path fill=\"currentColor\" d=\"M384 960v-64h192.064v64H384zm448-544a350.656 350.656 0 0 1-128.32 271.424C665.344 719.04 640 763.776 640 813.504V832H320v-14.336c0-48-19.392-95.36-57.216-124.992a351.552 351.552 0 0 1-128.448-344.256c25.344-136.448 133.888-248.128 269.76-276.48A352.384 352.384 0 0 1 832 416zm-544 32c0-132.288 75.904-224 192-224v-64c-154.432 0-256 122.752-256 288h64z\"/>"},"orange":{"body":"<path fill=\"currentColor\" d=\"M544 894.72a382.336 382.336 0 0 0 215.936-89.472L577.024 622.272c-10.24 6.016-21.248 10.688-33.024 13.696v258.688zm261.248-134.784A382.336 382.336 0 0 0 894.656 544H635.968c-3.008 11.776-7.68 22.848-13.696 33.024l182.976 182.912zM894.656 480a382.336 382.336 0 0 0-89.408-215.936L622.272 446.976c6.016 10.24 10.688 21.248 13.696 33.024h258.688zm-134.72-261.248A382.336 382.336 0 0 0 544 129.344v258.688c11.776 3.008 22.848 7.68 33.024 13.696l182.912-182.976zM480 129.344a382.336 382.336 0 0 0-215.936 89.408l182.912 182.976c10.24-6.016 21.248-10.688 33.024-13.696V129.344zm-261.248 134.72A382.336 382.336 0 0 0 129.344 480h258.688c3.008-11.776 7.68-22.848 13.696-33.024L218.752 264.064zM129.344 544a382.336 382.336 0 0 0 89.408 215.936l182.976-182.912A127.232 127.232 0 0 1 388.032 544H129.344zm134.72 261.248A382.336 382.336 0 0 0 480 894.656V635.968a127.232 127.232 0 0 1-33.024-13.696L264.064 805.248zM512 960a448 448 0 1 1 0-896a448 448 0 0 1 0 896zm0-384a64 64 0 1 0 0-128a64 64 0 0 0 0 128z\"/>"},"paperclip":{"body":"<path fill=\"currentColor\" d=\"M602.496 240.448A192 192 0 1 1 874.048 512l-316.8 316.8A256 256 0 0 1 195.2 466.752L602.496 59.456l45.248 45.248L240.448 512A192 192 0 0 0 512 783.552l316.8-316.8a128 128 0 1 0-181.056-181.056L353.6 579.904a32 32 0 1 0 45.248 45.248l294.144-294.144l45.312 45.248L444.096 670.4a96 96 0 1 1-135.744-135.744l294.144-294.208z\"/>"},"partly-cloudy":{"body":"<path fill=\"currentColor\" d=\"M598.4 895.872H328.192a256 256 0 0 1-34.496-510.528A352 352 0 1 1 598.4 895.872zm-271.36-64h272.256a288 288 0 1 0-248.512-417.664L335.04 445.44l-34.816 3.584a192 192 0 0 0 26.88 382.848z\"/><path fill=\"currentColor\" d=\"M139.84 501.888a256 256 0 1 1 417.856-277.12c-17.728 2.176-38.208 8.448-61.504 18.816A192 192 0 1 0 189.12 460.48a6003.84 6003.84 0 0 0-49.28 41.408z\"/>"},"pear":{"body":"<path fill=\"currentColor\" d=\"M542.336 258.816a443.255 443.255 0 0 0-9.024 25.088a32 32 0 1 1-60.8-20.032l1.088-3.328a162.688 162.688 0 0 0-122.048 131.392l-17.088 102.72l-20.736 15.36C256.192 552.704 224 610.88 224 672c0 120.576 126.4 224 288 224s288-103.424 288-224c0-61.12-32.192-119.296-89.728-161.92l-20.736-15.424l-17.088-102.72a162.688 162.688 0 0 0-130.112-133.12zm-40.128-66.56c7.936-15.552 16.576-30.08 25.92-43.776c23.296-33.92 49.408-59.776 78.528-77.12a32 32 0 1 1 32.704 55.04c-20.544 12.224-40.064 31.552-58.432 58.304a316.608 316.608 0 0 0-9.792 15.104a226.688 226.688 0 0 1 164.48 181.568l12.8 77.248C819.456 511.36 864 587.392 864 672c0 159.04-157.568 288-352 288S160 831.04 160 672c0-84.608 44.608-160.64 115.584-213.376l12.8-77.248a226.624 226.624 0 0 1 213.76-189.184z\"/>"},"phone":{"body":"<path fill=\"currentColor\" d=\"M79.36 432.256L591.744 944.64a32 32 0 0 0 35.2 6.784l253.44-108.544a32 32 0 0 0 9.984-52.032l-153.856-153.92a32 32 0 0 0-36.928-6.016l-69.888 34.944L358.08 394.24l35.008-69.888a32 32 0 0 0-5.952-36.928L233.152 133.568a32 32 0 0 0-52.032 10.048L72.512 397.056a32 32 0 0 0 6.784 35.2zm60.48-29.952l81.536-190.08L325.568 316.48l-24.64 49.216l-20.608 41.216l32.576 32.64l271.552 271.552l32.64 32.64l41.216-20.672l49.28-24.576l104.192 104.128l-190.08 81.472L139.84 402.304zM512 320v-64a256 256 0 0 1 256 256h-64a192 192 0 0 0-192-192zm0-192V64a448 448 0 0 1 448 448h-64a384 384 0 0 0-384-384z\"/>"},"phone-filled":{"body":"<path fill=\"currentColor\" d=\"M199.232 125.568L90.624 379.008a32 32 0 0 0 6.784 35.2l512.384 512.384a32 32 0 0 0 35.2 6.784l253.44-108.608a32 32 0 0 0 10.048-52.032L769.6 633.92a32 32 0 0 0-36.928-5.952l-130.176 65.088l-271.488-271.552l65.024-130.176a32 32 0 0 0-5.952-36.928L251.2 115.52a32 32 0 0 0-51.968 10.048z\"/>"},"picture":{"body":"<path fill=\"currentColor\" d=\"M160 160v704h704V160H160zm-32-64h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32z\"/><path fill=\"currentColor\" d=\"M384 288q64 0 64 64t-64 64q-64 0-64-64t64-64zM185.408 876.992l-50.816-38.912L350.72 556.032a96 96 0 0 1 134.592-17.856l1.856 1.472l122.88 99.136a32 32 0 0 0 44.992-4.864l216-269.888l49.92 39.936l-215.808 269.824l-.256.32a96 96 0 0 1-135.04 14.464l-122.88-99.072l-.64-.512a32 32 0 0 0-44.8 5.952L185.408 876.992z\"/>"},"picture-filled":{"body":"<path fill=\"currentColor\" d=\"M96 896a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h832a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32H96zm315.52-228.48l-68.928-68.928a32 32 0 0 0-45.248 0L128 768.064h778.688l-242.112-290.56a32 32 0 0 0-49.216 0L458.752 665.408a32 32 0 0 1-47.232 2.112zM256 384a96 96 0 1 0 192.064-.064A96 96 0 0 0 256 384z\"/>"},"picture-rounded":{"body":"<path fill=\"currentColor\" d=\"M512 128a384 384 0 1 0 0 768a384 384 0 0 0 0-768zm0-64a448 448 0 1 1 0 896a448 448 0 0 1 0-896z\"/><path fill=\"currentColor\" d=\"M640 288q64 0 64 64t-64 64q-64 0-64-64t64-64zM214.656 790.656l-45.312-45.312l185.664-185.6a96 96 0 0 1 123.712-10.24l138.24 98.688a32 32 0 0 0 39.872-2.176L906.688 422.4l42.624 47.744L699.52 693.696a96 96 0 0 1-119.808 6.592l-138.24-98.752a32 32 0 0 0-41.152 3.456l-185.664 185.6z\"/>"},"pie-chart":{"body":"<path fill=\"currentColor\" d=\"M448 68.48v64.832A384.128 384.128 0 0 0 512 896a384.128 384.128 0 0 0 378.688-320h64.768A448.128 448.128 0 0 1 64 512A448.128 448.128 0 0 1 448 68.48z\"/><path fill=\"currentColor\" d=\"M576 97.28V448h350.72A384.064 384.064 0 0 0 576 97.28zM512 64V33.152A448 448 0 0 1 990.848 512H512V64z\"/>"},"place":{"body":"<path fill=\"currentColor\" d=\"M512 512a192 192 0 1 0 0-384a192 192 0 0 0 0 384zm0 64a256 256 0 1 1 0-512a256 256 0 0 1 0 512z\"/><path fill=\"currentColor\" d=\"M512 512a32 32 0 0 1 32 32v256a32 32 0 1 1-64 0V544a32 32 0 0 1 32-32z\"/><path fill=\"currentColor\" d=\"M384 649.088v64.96C269.76 732.352 192 771.904 192 800c0 37.696 139.904 96 320 96s320-58.304 320-96c0-28.16-77.76-67.648-192-85.952v-64.96C789.12 671.04 896 730.368 896 800c0 88.32-171.904 160-384 160s-384-71.68-384-160c0-69.696 106.88-128.96 256-150.912z\"/>"},"platform":{"body":"<path fill=\"currentColor\" d=\"M448 832v-64h128v64h192v64H256v-64h192zM128 704V128h768v576H128z\"/>"},"plus":{"body":"<path fill=\"currentColor\" d=\"M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z\"/>"},"pointer":{"body":"<path fill=\"currentColor\" d=\"M511.552 128c-35.584 0-64.384 28.8-64.384 64.448v516.48L274.048 570.88a94.272 94.272 0 0 0-112.896-3.456a44.416 44.416 0 0 0-8.96 62.208L332.8 870.4A64 64 0 0 0 384 896h512V575.232a64 64 0 0 0-45.632-61.312l-205.952-61.76A96 96 0 0 1 576 360.192V192.448C576 156.8 547.2 128 511.552 128zM359.04 556.8l24.128 19.2V192.448a128.448 128.448 0 1 1 256.832 0v167.744a32 32 0 0 0 22.784 30.656l206.016 61.76A128 128 0 0 1 960 575.232V896a64 64 0 0 1-64 64H384a128 128 0 0 1-102.4-51.2L101.056 668.032A108.416 108.416 0 0 1 128 512.512a158.272 158.272 0 0 1 185.984 8.32L359.04 556.8z\"/>"},"position":{"body":"<path fill=\"currentColor\" d=\"m249.6 417.088l319.744 43.072l39.168 310.272L845.12 178.88L249.6 417.088zm-129.024 47.168a32 32 0 0 1-7.68-61.44l777.792-311.04a32 32 0 0 1 41.6 41.6l-310.336 775.68a32 32 0 0 1-61.44-7.808L512 516.992l-391.424-52.736z\"/>"},"postcard":{"body":"<path fill=\"currentColor\" d=\"M160 224a32 32 0 0 0-32 32v512a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32V256a32 32 0 0 0-32-32H160zm0-64h704a96 96 0 0 1 96 96v512a96 96 0 0 1-96 96H160a96 96 0 0 1-96-96V256a96 96 0 0 1 96-96z\"/><path fill=\"currentColor\" d=\"M704 320a64 64 0 1 1 0 128a64 64 0 0 1 0-128zM288 448h256q32 0 32 32t-32 32H288q-32 0-32-32t32-32zm0 128h256q32 0 32 32t-32 32H288q-32 0-32-32t32-32z\"/>"},"pouring":{"body":"<path fill=\"currentColor\" d=\"m739.328 291.328l-35.2-6.592l-12.8-33.408a192.064 192.064 0 0 0-365.952 23.232l-9.92 40.896l-41.472 7.04a176.32 176.32 0 0 0-146.24 173.568c0 97.28 78.72 175.936 175.808 175.936h400a192 192 0 0 0 35.776-380.672zM959.552 480a256 256 0 0 1-256 256h-400A239.808 239.808 0 0 1 63.744 496.192a240.32 240.32 0 0 1 199.488-236.8a256.128 256.128 0 0 1 487.872-30.976A256.064 256.064 0 0 1 959.552 480zM224 800a32 32 0 0 1 32 32v96a32 32 0 1 1-64 0v-96a32 32 0 0 1 32-32zm192 0a32 32 0 0 1 32 32v96a32 32 0 1 1-64 0v-96a32 32 0 0 1 32-32zm192 0a32 32 0 0 1 32 32v96a32 32 0 1 1-64 0v-96a32 32 0 0 1 32-32zm192 0a32 32 0 0 1 32 32v96a32 32 0 1 1-64 0v-96a32 32 0 0 1 32-32z\"/>"},"present":{"body":"<path fill=\"currentColor\" d=\"M480 896V640H192v-64h288V320H192v576h288zm64 0h288V320H544v256h288v64H544v256zM128 256h768v672a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V256z\"/><path fill=\"currentColor\" d=\"M96 256h832q32 0 32 32t-32 32H96q-32 0-32-32t32-32z\"/><path fill=\"currentColor\" d=\"M416 256a64 64 0 1 0 0-128a64 64 0 0 0 0 128zm0 64a128 128 0 1 1 0-256a128 128 0 0 1 0 256z\"/><path fill=\"currentColor\" d=\"M608 256a64 64 0 1 0 0-128a64 64 0 0 0 0 128zm0 64a128 128 0 1 1 0-256a128 128 0 0 1 0 256z\"/>"},"price-tag":{"body":"<path fill=\"currentColor\" d=\"M224 318.336V896h576V318.336L552.512 115.84a64 64 0 0 0-81.024 0L224 318.336zM593.024 66.304l259.2 212.096A32 32 0 0 1 864 303.168V928a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V303.168a32 32 0 0 1 11.712-24.768l259.2-212.096a128 128 0 0 1 162.112 0z\"/><path fill=\"currentColor\" d=\"M512 448a64 64 0 1 0 0-128a64 64 0 0 0 0 128zm0 64a128 128 0 1 1 0-256a128 128 0 0 1 0 256z\"/>"},"printer":{"body":"<path fill=\"currentColor\" d=\"M256 768H105.024c-14.272 0-19.456-1.472-24.64-4.288a29.056 29.056 0 0 1-12.16-12.096C65.536 746.432 64 741.248 64 727.04V379.072c0-42.816 4.48-58.304 12.8-73.984c8.384-15.616 20.672-27.904 36.288-36.288c15.68-8.32 31.168-12.8 73.984-12.8H256V64h512v192h68.928c42.816 0 58.304 4.48 73.984 12.8c15.616 8.384 27.904 20.672 36.288 36.288c8.32 15.68 12.8 31.168 12.8 73.984v347.904c0 14.272-1.472 19.456-4.288 24.64a29.056 29.056 0 0 1-12.096 12.16c-5.184 2.752-10.368 4.224-24.64 4.224H768v192H256V768zm64-192v320h384V576H320zm-64 128V512h512v192h128V379.072c0-29.376-1.408-36.48-5.248-43.776a23.296 23.296 0 0 0-10.048-10.048c-7.232-3.84-14.4-5.248-43.776-5.248H187.072c-29.376 0-36.48 1.408-43.776 5.248a23.296 23.296 0 0 0-10.048 10.048c-3.84 7.232-5.248 14.4-5.248 43.776V704h128zm64-448h384V128H320v128zm-64 128h64v64h-64v-64zm128 0h64v64h-64v-64z\"/>"},"promotion":{"body":"<path fill=\"currentColor\" d=\"m64 448l832-320l-128 704l-446.08-243.328L832 192L242.816 545.472L64 448zm256 512V657.024L512 768L320 960z\"/>"},"quartz-watch":{"body":"<path fill=\"currentColor\" d=\"M422.02 602.01v-.03c-6.68-5.99-14.35-8.83-23.01-8.51c-8.67.32-16.17 3.66-22.5 10.02c-6.33 6.36-9.5 13.7-9.5 22.02s3 15.82 8.99 22.5c8.68 8.68 19.02 11.35 31.01 8s19.49-10.85 22.5-22.5c3.01-11.65.51-22.15-7.49-31.49v-.01zM384 512c0-9.35-3-17.02-8.99-23.01c-6-5.99-13.66-8.99-23.01-8.99c-9.35 0-17.02 3-23.01 8.99c-5.99 6-8.99 13.66-8.99 23.01s3 17.02 8.99 23.01c6 5.99 13.66 8.99 23.01 8.99c9.35 0 17.02-3 23.01-8.99c5.99-6 8.99-13.67 8.99-23.01zm6.53-82.49c11.65 3.01 22.15.51 31.49-7.49h.04c5.99-6.68 8.83-14.34 8.51-23.01c-.32-8.67-3.66-16.16-10.02-22.5c-6.36-6.33-13.7-9.5-22.02-9.5s-15.82 3-22.5 8.99c-8.68 8.69-11.35 19.02-8 31.01c3.35 11.99 10.85 19.49 22.5 22.5zm242.94 0c11.67-3.03 19.01-10.37 22.02-22.02c3.01-11.65.51-22.15-7.49-31.49h.01c-6.68-5.99-14.18-8.99-22.5-8.99s-15.66 3.16-22.02 9.5c-6.36 6.34-9.7 13.84-10.02 22.5c-.32 8.66 2.52 16.33 8.51 23.01c9.32 8.02 19.82 10.52 31.49 7.49zM512 640c-9.35 0-17.02 3-23.01 8.99c-5.99 6-8.99 13.66-8.99 23.01s3 17.02 8.99 23.01c6 5.99 13.67 8.99 23.01 8.99c9.35 0 17.02-3 23.01-8.99c5.99-6 8.99-13.66 8.99-23.01s-3-17.02-8.99-23.01c-6-5.99-13.66-8.99-23.01-8.99zm183.01-151.01c-6-5.99-13.66-8.99-23.01-8.99s-17.02 3-23.01 8.99c-5.99 6-8.99 13.66-8.99 23.01s3 17.02 8.99 23.01c6 5.99 13.66 8.99 23.01 8.99s17.02-3 23.01-8.99c5.99-6 8.99-13.67 8.99-23.01c0-9.35-3-17.02-8.99-23.01z\"/><path fill=\"currentColor\" d=\"M832 512c-2-90.67-33.17-166.17-93.5-226.5c-20.43-20.42-42.6-37.49-66.5-51.23V64H352v170.26c-23.9 13.74-46.07 30.81-66.5 51.24c-60.33 60.33-91.49 135.83-93.5 226.5c2 90.67 33.17 166.17 93.5 226.5c20.43 20.43 42.6 37.5 66.5 51.24V960h320V789.74c23.9-13.74 46.07-30.81 66.5-51.24c60.33-60.34 91.49-135.83 93.5-226.5zM416 128h192v78.69c-29.85-9.03-61.85-13.93-96-14.69c-34.15.75-66.15 5.65-96 14.68V128zm192 768H416v-78.68c29.85 9.03 61.85 13.93 96 14.68c34.15-.75 66.15-5.65 96-14.68V896zm-96-128c-72.66-2.01-132.99-27.01-180.99-75.01S258.01 584.66 256 512c2.01-72.66 27.01-132.99 75.01-180.99S439.34 258.01 512 256c72.66 2.01 132.99 27.01 180.99 75.01S765.99 439.34 768 512c-2.01 72.66-27.01 132.99-75.01 180.99S584.66 765.99 512 768z\"/><path fill=\"currentColor\" d=\"M512 320c-9.35 0-17.02 3-23.01 8.99c-5.99 6-8.99 13.66-8.99 23.01c0 9.35 3 17.02 8.99 23.01c6 5.99 13.67 8.99 23.01 8.99c9.35 0 17.02-3 23.01-8.99c5.99-6 8.99-13.66 8.99-23.01c0-9.35-3-17.02-8.99-23.01c-6-5.99-13.66-8.99-23.01-8.99zm112.99 273.5c-8.66-.32-16.33 2.52-23.01 8.51c-7.98 9.32-10.48 19.82-7.49 31.49s10.49 19.17 22.5 22.5s22.35.66 31.01-8v.04c5.99-6.68 8.99-14.18 8.99-22.5s-3.16-15.66-9.5-22.02s-13.84-9.7-22.5-10.02z\"/>"},"question-filled":{"body":"<path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896zm23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352c-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992c13.376-19.712 35.2-28.864 66.176-28.864c23.936 0 42.944 6.336 56.32 19.712c12.672 13.376 19.712 31.68 19.712 54.912c0 17.6-6.336 34.496-19.008 49.984l-8.448 9.856c-45.76 40.832-73.216 70.4-82.368 89.408c-9.856 19.008-14.08 42.24-14.08 68.992v9.856h80.96v-9.856c0-16.896 3.52-31.68 10.56-45.76c6.336-12.672 15.488-24.64 28.16-35.2c33.792-29.568 54.208-48.576 60.544-55.616c16.896-22.528 26.048-51.392 26.048-86.592c0-42.944-14.08-76.736-42.24-101.376c-28.16-25.344-65.472-37.312-111.232-37.312zm-12.672 406.208a54.272 54.272 0 0 0-38.72 14.784a49.408 49.408 0 0 0-15.488 38.016c0 15.488 4.928 28.16 15.488 38.016A54.848 54.848 0 0 0 523.072 768c15.488 0 28.16-4.928 38.72-14.784a51.52 51.52 0 0 0 16.192-38.72a51.968 51.968 0 0 0-15.488-38.016a55.936 55.936 0 0 0-39.424-14.784z\"/>"},"rank":{"body":"<path fill=\"currentColor\" d=\"m186.496 544l41.408 41.344a32 32 0 1 1-45.248 45.312l-96-96a32 32 0 0 1 0-45.312l96-96a32 32 0 1 1 45.248 45.312L186.496 480h290.816V186.432l-41.472 41.472a32 32 0 1 1-45.248-45.184l96-96.128a32 32 0 0 1 45.312 0l96 96.064a32 32 0 0 1-45.248 45.184l-41.344-41.28V480H832l-41.344-41.344a32 32 0 0 1 45.248-45.312l96 96a32 32 0 0 1 0 45.312l-96 96a32 32 0 0 1-45.248-45.312L832 544H541.312v293.44l41.344-41.28a32 32 0 1 1 45.248 45.248l-96 96a32 32 0 0 1-45.312 0l-96-96a32 32 0 1 1 45.312-45.248l41.408 41.408V544H186.496z\"/>"},"reading":{"body":"<path fill=\"currentColor\" d=\"m512 863.36l384-54.848v-638.72L525.568 222.72a96 96 0 0 1-27.136 0L128 169.792v638.72l384 54.848zM137.024 106.432l370.432 52.928a32 32 0 0 0 9.088 0l370.432-52.928A64 64 0 0 1 960 169.792v638.72a64 64 0 0 1-54.976 63.36l-388.48 55.488a32 32 0 0 1-9.088 0l-388.48-55.488A64 64 0 0 1 64 808.512v-638.72a64 64 0 0 1 73.024-63.36z\"/><path fill=\"currentColor\" d=\"M480 192h64v704h-64z\"/>"},"reading-lamp":{"body":"<path fill=\"currentColor\" d=\"M352 896h320q32 0 32 32t-32 32H352q-32 0-32-32t32-32zm-44.672-768l-99.52 448h608.384l-99.52-448H307.328zm-25.6-64h460.608a32 32 0 0 1 31.232 25.088l113.792 512A32 32 0 0 1 856.128 640H167.872a32 32 0 0 1-31.232-38.912l113.792-512A32 32 0 0 1 281.664 64z\"/><path fill=\"currentColor\" d=\"M672 576q32 0 32 32v128q0 32-32 32t-32-32V608q0-32 32-32zm-192-.064h64V960h-64z\"/>"},"refresh":{"body":"<path fill=\"currentColor\" d=\"M771.776 794.88A384 384 0 0 1 128 512h64a320 320 0 0 0 555.712 216.448H654.72a32 32 0 1 1 0-64h149.056a32 32 0 0 1 32 32v148.928a32 32 0 1 1-64 0v-50.56zM276.288 295.616h92.992a32 32 0 0 1 0 64H220.16a32 32 0 0 1-32-32V178.56a32 32 0 0 1 64 0v50.56A384 384 0 0 1 896.128 512h-64a320 320 0 0 0-555.776-216.384z\"/>"},"refresh-left":{"body":"<path fill=\"currentColor\" d=\"M289.088 296.704h92.992a32 32 0 0 1 0 64H232.96a32 32 0 0 1-32-32V179.712a32 32 0 0 1 64 0v50.56a384 384 0 0 1 643.84 282.88a384 384 0 0 1-383.936 384a384 384 0 0 1-384-384h64a320 320 0 1 0 640 0a320 320 0 0 0-555.712-216.448z\"/>"},"refresh-right":{"body":"<path fill=\"currentColor\" d=\"M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384a384 384 0 0 1-384-384a384 384 0 0 1 643.712-282.88z\"/>"},"refrigerator":{"body":"<path fill=\"currentColor\" d=\"M256 448h512V160a32 32 0 0 0-32-32H288a32 32 0 0 0-32 32v288zm0 64v352a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V512H256zm32-448h448a96 96 0 0 1 96 96v704a96 96 0 0 1-96 96H288a96 96 0 0 1-96-96V160a96 96 0 0 1 96-96zm32 224h64v96h-64v-96zm0 288h64v96h-64v-96z\"/>"},"remove":{"body":"<path fill=\"currentColor\" d=\"M352 480h320a32 32 0 1 1 0 64H352a32 32 0 0 1 0-64z\"/><path fill=\"currentColor\" d=\"M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z\"/>"},"remove-filled":{"body":"<path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896zM288 512a38.4 38.4 0 0 0 38.4 38.4h371.2a38.4 38.4 0 0 0 0-76.8H326.4A38.4 38.4 0 0 0 288 512z\"/>"},"right":{"body":"<path fill=\"currentColor\" d=\"M754.752 480H160a32 32 0 1 0 0 64h594.752L521.344 777.344a32 32 0 0 0 45.312 45.312l288-288a32 32 0 0 0 0-45.312l-288-288a32 32 0 1 0-45.312 45.312L754.752 480z\"/>"},"scale-to-original":{"body":"<path fill=\"currentColor\" d=\"M813.176 180.706a60.235 60.235 0 0 1 60.236 60.235v481.883a60.235 60.235 0 0 1-60.236 60.235H210.824a60.235 60.235 0 0 1-60.236-60.235V240.94a60.235 60.235 0 0 1 60.236-60.235h602.352zm0-60.235H210.824A120.47 120.47 0 0 0 90.353 240.94v481.883a120.47 120.47 0 0 0 120.47 120.47h602.353a120.47 120.47 0 0 0 120.471-120.47V240.94a120.47 120.47 0 0 0-120.47-120.47zm-120.47 180.705a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 0 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zm-361.412 0a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 1 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zM512 361.412a30.118 30.118 0 0 0-30.118 30.117v30.118a30.118 30.118 0 0 0 60.236 0V391.53A30.118 30.118 0 0 0 512 361.412zM512 512a30.118 30.118 0 0 0-30.118 30.118v30.117a30.118 30.118 0 0 0 60.236 0v-30.117A30.118 30.118 0 0 0 512 512z\"/>"},"school":{"body":"<path fill=\"currentColor\" d=\"M224 128v704h576V128H224zm-32-64h640a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32z\"/><path fill=\"currentColor\" d=\"M64 832h896v64H64zm256-640h128v96H320z\"/><path fill=\"currentColor\" d=\"M384 832h256v-64a128 128 0 1 0-256 0v64zm128-256a192 192 0 0 1 192 192v128H320V768a192 192 0 0 1 192-192zM320 384h128v96H320zm256-192h128v96H576zm0 192h128v96H576z\"/>"},"scissor":{"body":"<path fill=\"currentColor\" d=\"m512.064 578.368l-106.88 152.768a160 160 0 1 1-23.36-78.208L472.96 522.56L196.864 128.256a32 32 0 1 1 52.48-36.736l393.024 561.344a160 160 0 1 1-23.36 78.208l-106.88-152.704zm54.4-189.248l208.384-297.6a32 32 0 0 1 52.48 36.736l-221.76 316.672l-39.04-55.808zm-376.32 425.856a96 96 0 1 0 110.144-157.248a96 96 0 0 0-110.08 157.248zm643.84 0a96 96 0 1 0-110.08-157.248a96 96 0 0 0 110.08 157.248z\"/>"},"search":{"body":"<path fill=\"currentColor\" d=\"m795.904 750.72l124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704a352 352 0 0 0 0 704z\"/>"},"select":{"body":"<path fill=\"currentColor\" d=\"M77.248 415.04a64 64 0 0 1 90.496 0l226.304 226.304L846.528 188.8a64 64 0 1 1 90.56 90.496l-543.04 543.04l-316.8-316.8a64 64 0 0 1 0-90.496z\"/>"},"sell":{"body":"<path fill=\"currentColor\" d=\"M704 288h131.072a32 32 0 0 1 31.808 28.8L886.4 512h-64.384l-16-160H704v96a32 32 0 1 1-64 0v-96H384v96a32 32 0 0 1-64 0v-96H217.92l-51.2 512H512v64H131.328a32 32 0 0 1-31.808-35.2l57.6-576a32 32 0 0 1 31.808-28.8H320v-22.336C320 154.688 405.504 64 512 64s192 90.688 192 201.664v22.4zm-64 0v-22.336C640 189.248 582.272 128 512 128c-70.272 0-128 61.248-128 137.664v22.4h256zm201.408 483.84L768 698.496V928a32 32 0 1 1-64 0V698.496l-73.344 73.344a32 32 0 1 1-45.248-45.248l128-128a32 32 0 0 1 45.248 0l128 128a32 32 0 1 1-45.248 45.248z\"/>"},"semi-select":{"body":"<path fill=\"currentColor\" d=\"M128 448h768q64 0 64 64t-64 64H128q-64 0-64-64t64-64z\"/>"},"service":{"body":"<path fill=\"currentColor\" d=\"M864 409.6a192 192 0 0 1-37.888 349.44A256.064 256.064 0 0 1 576 960h-96a32 32 0 1 1 0-64h96a192.064 192.064 0 0 0 181.12-128H736a32 32 0 0 1-32-32V416a32 32 0 0 1 32-32h32c10.368 0 20.544.832 30.528 2.432a288 288 0 0 0-573.056 0A193.235 193.235 0 0 1 256 384h32a32 32 0 0 1 32 32v320a32 32 0 0 1-32 32h-32a192 192 0 0 1-96-358.4a352 352 0 0 1 704 0zM256 448a128 128 0 1 0 0 256V448zm640 128a128 128 0 0 0-128-128v256a128 128 0 0 0 128-128z\"/>"},"set-up":{"body":"<path fill=\"currentColor\" d=\"M224 160a64 64 0 0 0-64 64v576a64 64 0 0 0 64 64h576a64 64 0 0 0 64-64V224a64 64 0 0 0-64-64H224zm0-64h576a128 128 0 0 1 128 128v576a128 128 0 0 1-128 128H224A128 128 0 0 1 96 800V224A128 128 0 0 1 224 96z\"/><path fill=\"currentColor\" d=\"M384 416a64 64 0 1 0 0-128a64 64 0 0 0 0 128zm0 64a128 128 0 1 1 0-256a128 128 0 0 1 0 256z\"/><path fill=\"currentColor\" d=\"M480 320h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32zm160 416a64 64 0 1 0 0-128a64 64 0 0 0 0 128zm0 64a128 128 0 1 1 0-256a128 128 0 0 1 0 256z\"/><path fill=\"currentColor\" d=\"M288 640h256q32 0 32 32t-32 32H288q-32 0-32-32t32-32z\"/>"},"setting":{"body":"<path fill=\"currentColor\" d=\"M600.704 64a32 32 0 0 1 30.464 22.208l35.2 109.376c14.784 7.232 28.928 15.36 42.432 24.512l112.384-24.192a32 32 0 0 1 34.432 15.36L944.32 364.8a32 32 0 0 1-4.032 37.504l-77.12 85.12a357.12 357.12 0 0 1 0 49.024l77.12 85.248a32 32 0 0 1 4.032 37.504l-88.704 153.6a32 32 0 0 1-34.432 15.296L708.8 803.904c-13.44 9.088-27.648 17.28-42.368 24.512l-35.264 109.376A32 32 0 0 1 600.704 960H423.296a32 32 0 0 1-30.464-22.208L357.696 828.48a351.616 351.616 0 0 1-42.56-24.64l-112.32 24.256a32 32 0 0 1-34.432-15.36L79.68 659.2a32 32 0 0 1 4.032-37.504l77.12-85.248a357.12 357.12 0 0 1 0-48.896l-77.12-85.248A32 32 0 0 1 79.68 364.8l88.704-153.6a32 32 0 0 1 34.432-15.296l112.32 24.256c13.568-9.152 27.776-17.408 42.56-24.64l35.2-109.312A32 32 0 0 1 423.232 64H600.64zm-23.424 64H446.72l-36.352 113.088l-24.512 11.968a294.113 294.113 0 0 0-34.816 20.096l-22.656 15.36l-116.224-25.088l-65.28 113.152l79.68 88.192l-1.92 27.136a293.12 293.12 0 0 0 0 40.192l1.92 27.136l-79.808 88.192l65.344 113.152l116.224-25.024l22.656 15.296a294.113 294.113 0 0 0 34.816 20.096l24.512 11.968L446.72 896h130.688l36.48-113.152l24.448-11.904a288.282 288.282 0 0 0 34.752-20.096l22.592-15.296l116.288 25.024l65.28-113.152l-79.744-88.192l1.92-27.136a293.12 293.12 0 0 0 0-40.256l-1.92-27.136l79.808-88.128l-65.344-113.152l-116.288 24.96l-22.592-15.232a287.616 287.616 0 0 0-34.752-20.096l-24.448-11.904L577.344 128zM512 320a192 192 0 1 1 0 384a192 192 0 0 1 0-384zm0 64a128 128 0 1 0 0 256a128 128 0 0 0 0-256z\"/>"},"share":{"body":"<path fill=\"currentColor\" d=\"m679.872 348.8l-301.76 188.608a127.808 127.808 0 0 1 5.12 52.16l279.936 104.96a128 128 0 1 1-22.464 59.904l-279.872-104.96a128 128 0 1 1-16.64-166.272l301.696-188.608a128 128 0 1 1 33.92 54.272z\"/>"},"ship":{"body":"<path fill=\"currentColor\" d=\"M512 386.88V448h405.568a32 32 0 0 1 30.72 40.768l-76.48 267.968A192 192 0 0 1 687.168 896H336.832a192 192 0 0 1-184.64-139.264L75.648 488.768A32 32 0 0 1 106.368 448H448V117.888a32 32 0 0 1 47.36-28.096l13.888 7.616L512 96v2.88l231.68 126.4a32 32 0 0 1-2.048 57.216L512 386.88zm0-70.272l144.768-65.792L512 171.84v144.768zM512 512H148.864l18.24 64H856.96l18.24-64H512zM185.408 640l28.352 99.2A128 128 0 0 0 336.832 832h350.336a128 128 0 0 0 123.072-92.8l28.352-99.2H185.408z\"/>"},"shop":{"body":"<path fill=\"currentColor\" d=\"M704 704h64v192H256V704h64v64h384v-64zm188.544-152.192C894.528 559.616 896 567.616 896 576a96 96 0 1 1-192 0a96 96 0 1 1-192 0a96 96 0 1 1-192 0a96 96 0 1 1-192 0c0-8.384 1.408-16.384 3.392-24.192L192 128h640l60.544 423.808z\"/>"},"shopping-bag":{"body":"<path fill=\"currentColor\" d=\"M704 320v96a32 32 0 0 1-32 32h-32V320H384v128h-32a32 32 0 0 1-32-32v-96H192v576h640V320H704zm-384-64a192 192 0 1 1 384 0h160a32 32 0 0 1 32 32v640a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32h160zm64 0h256a128 128 0 1 0-256 0z\"/><path fill=\"currentColor\" d=\"M192 704h640v64H192z\"/>"},"shopping-cart":{"body":"<path fill=\"currentColor\" d=\"M432 928a48 48 0 1 1 0-96a48 48 0 0 1 0 96zm320 0a48 48 0 1 1 0-96a48 48 0 0 1 0 96zM96 128a32 32 0 0 1 0-64h160a32 32 0 0 1 31.36 25.728L320.64 256H928a32 32 0 0 1 31.296 38.72l-96 448A32 32 0 0 1 832 768H384a32 32 0 0 1-31.36-25.728L229.76 128H96zm314.24 576h395.904l82.304-384H333.44l76.8 384z\"/>"},"shopping-cart-full":{"body":"<path fill=\"currentColor\" d=\"M432 928a48 48 0 1 1 0-96a48 48 0 0 1 0 96zm320 0a48 48 0 1 1 0-96a48 48 0 0 1 0 96zM96 128a32 32 0 0 1 0-64h160a32 32 0 0 1 31.36 25.728L320.64 256H928a32 32 0 0 1 31.296 38.72l-96 448A32 32 0 0 1 832 768H384a32 32 0 0 1-31.36-25.728L229.76 128H96zm314.24 576h395.904l82.304-384H333.44l76.8 384z\"/><path fill=\"currentColor\" d=\"M699.648 256L608 145.984L516.352 256h183.296zm-140.8-151.04a64 64 0 0 1 98.304 0L836.352 320H379.648l179.2-215.04z\"/>"},"shopping-trolley":{"body":"<path fill=\"currentColor\" d=\"M368 833c-13.3 0-24.5 4.5-33.5 13.5S321 866.7 321 880s4.5 24.5 13.5 33.5s20.2 13.8 33.5 14.5c13.3-.7 24.5-5.5 33.5-14.5S415 893.3 415 880s-4.5-24.5-13.5-33.5S381.3 833 368 833zm439-193c7.4 0 13.8-2.2 19.5-6.5S836 623.3 838 616l112-448c2-10-.2-19.2-6.5-27.5S929 128 919 128H96c-9.3 0-17 3-23 9s-9 13.7-9 23s3 17 9 23s13.7 9 23 9h96v576h672c9.3 0 17-3 23-9s9-13.7 9-23s-3-17-9-23s-13.7-9-23-9H256v-64h551zM256 192h622l-96 384H256V192zm432 641c-13.3 0-24.5 4.5-33.5 13.5S641 866.7 641 880s4.5 24.5 13.5 33.5s20.2 13.8 33.5 14.5c13.3-.7 24.5-5.5 33.5-14.5S735 893.3 735 880s-4.5-24.5-13.5-33.5S701.3 833 688 833z\"/>"},"smoking":{"body":"<path fill=\"currentColor\" d=\"M256 576v128h640V576H256zm-32-64h704a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H224a32 32 0 0 1-32-32V544a32 32 0 0 1 32-32z\"/><path fill=\"currentColor\" d=\"M704 576h64v128h-64zM256 64h64v320h-64zM128 192h64v192h-64zM64 512h64v256H64z\"/>"},"soccer":{"body":"<path fill=\"currentColor\" d=\"M418.496 871.04L152.256 604.8c-16.512 94.016-2.368 178.624 42.944 224c44.928 44.928 129.344 58.752 223.296 42.24zm72.32-18.176a573.056 573.056 0 0 0 224.832-137.216a573.12 573.12 0 0 0 137.216-224.832L533.888 171.84a578.56 578.56 0 0 0-227.52 138.496A567.68 567.68 0 0 0 170.432 532.48l320.384 320.384zM871.04 418.496c16.512-93.952 2.688-178.368-42.24-223.296c-44.544-44.544-128.704-58.048-222.592-41.536L871.04 418.496zM149.952 874.048c-112.96-112.96-88.832-408.96 111.168-608.96C461.056 65.152 760.96 36.928 874.048 149.952c113.024 113.024 86.784 411.008-113.152 610.944c-199.936 199.936-497.92 226.112-610.944 113.152zm452.544-497.792l22.656-22.656a32 32 0 0 1 45.248 45.248l-22.656 22.656l45.248 45.248A32 32 0 1 1 647.744 512l-45.248-45.248L557.248 512l45.248 45.248a32 32 0 1 1-45.248 45.248L512 557.248l-45.248 45.248L512 647.744a32 32 0 1 1-45.248 45.248l-45.248-45.248l-22.656 22.656a32 32 0 1 1-45.248-45.248l22.656-22.656l-45.248-45.248A32 32 0 1 1 376.256 512l45.248 45.248L466.752 512l-45.248-45.248a32 32 0 1 1 45.248-45.248L512 466.752l45.248-45.248L512 376.256a32 32 0 0 1 45.248-45.248l45.248 45.248z\"/>"},"sold-out":{"body":"<path fill=\"currentColor\" d=\"M704 288h131.072a32 32 0 0 1 31.808 28.8L886.4 512h-64.384l-16-160H704v96a32 32 0 1 1-64 0v-96H384v96a32 32 0 0 1-64 0v-96H217.92l-51.2 512H512v64H131.328a32 32 0 0 1-31.808-35.2l57.6-576a32 32 0 0 1 31.808-28.8H320v-22.336C320 154.688 405.504 64 512 64s192 90.688 192 201.664v22.4zm-64 0v-22.336C640 189.248 582.272 128 512 128c-70.272 0-128 61.248-128 137.664v22.4h256zm201.408 476.16a32 32 0 1 1 45.248 45.184l-128 128a32 32 0 0 1-45.248 0l-128-128a32 32 0 1 1 45.248-45.248L704 837.504V608a32 32 0 1 1 64 0v229.504l73.408-73.408z\"/>"},"sort":{"body":"<path fill=\"currentColor\" d=\"M384 96a32 32 0 0 1 64 0v786.752a32 32 0 0 1-54.592 22.656L95.936 608a32 32 0 0 1 0-45.312h.128a32 32 0 0 1 45.184 0L384 805.632V96zm192 45.248a32 32 0 0 1 54.592-22.592L928.064 416a32 32 0 0 1 0 45.312h-.128a32 32 0 0 1-45.184 0L640 218.496V928a32 32 0 1 1-64 0V141.248z\"/>"},"sort-down":{"body":"<path fill=\"currentColor\" d=\"M576 96v709.568L333.312 562.816A32 32 0 1 0 288 608l297.408 297.344A32 32 0 0 0 640 882.688V96a32 32 0 0 0-64 0z\"/>"},"sort-up":{"body":"<path fill=\"currentColor\" d=\"M384 141.248V928a32 32 0 1 0 64 0V218.56l242.688 242.688A32 32 0 1 0 736 416L438.592 118.656A32 32 0 0 0 384 141.248z\"/>"},"stamp":{"body":"<path fill=\"currentColor\" d=\"M624 475.968V640h144a128 128 0 0 1 128 128H128a128 128 0 0 1 128-128h144V475.968a192 192 0 1 1 224 0zM128 896v-64h768v64H128z\"/>"},"star":{"body":"<path fill=\"currentColor\" d=\"m512 747.84l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08l184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256l99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96l221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z\"/>"},"star-filled":{"body":"<path fill=\"currentColor\" d=\"M283.84 867.84L512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08l184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z\"/>"},"stopwatch":{"body":"<path fill=\"currentColor\" d=\"M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z\"/><path fill=\"currentColor\" d=\"M672 234.88c-39.168 174.464-80 298.624-122.688 372.48c-64 110.848-202.624 30.848-138.624-80C453.376 453.44 540.48 355.968 672 234.816z\"/>"},"success-filled":{"body":"<path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896zm-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z\"/>"},"sugar":{"body":"<path fill=\"currentColor\" d=\"m801.728 349.184l4.48 4.48a128 128 0 0 1 0 180.992L534.656 806.144a128 128 0 0 1-181.056 0l-4.48-4.48l-19.392 109.696a64 64 0 0 1-108.288 34.176L78.464 802.56a64 64 0 0 1 34.176-108.288l109.76-19.328l-4.544-4.544a128 128 0 0 1 0-181.056l271.488-271.488a128 128 0 0 1 181.056 0l4.48 4.48l19.392-109.504a64 64 0 0 1 108.352-34.048l142.592 143.04a64 64 0 0 1-34.24 108.16l-109.248 19.2zm-548.8 198.72h447.168v2.24l60.8-60.8a63.808 63.808 0 0 0 18.752-44.416h-426.88l-89.664 89.728a64.064 64.064 0 0 0-10.24 13.248zm0 64c2.752 4.736 6.144 9.152 10.176 13.248l135.744 135.744a64 64 0 0 0 90.496 0L638.4 611.904H252.928zm490.048-230.976L625.152 263.104a64 64 0 0 0-90.496 0L416.768 380.928h326.208zM123.712 757.312l142.976 142.976l24.32-137.6a25.6 25.6 0 0 0-29.696-29.632l-137.6 24.256zm633.6-633.344l-24.32 137.472a25.6 25.6 0 0 0 29.632 29.632l137.28-24.064l-142.656-143.04z\"/>"},"suitcase":{"body":"<path fill=\"currentColor\" d=\"M128 384h768v-64a64 64 0 0 0-64-64H192a64 64 0 0 0-64 64v64zm0 64v320a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V448H128zm64-256h640a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H192A128 128 0 0 1 64 768V320a128 128 0 0 1 128-128z\"/><path fill=\"currentColor\" d=\"M384 128v64h256v-64H384zm0-64h256a64 64 0 0 1 64 64v64a64 64 0 0 1-64 64H384a64 64 0 0 1-64-64v-64a64 64 0 0 1 64-64z\"/>"},"suitcase-line":{"body":"<path fill=\"currentColor\" d=\"M922.5 229.5c-24.32-24.34-54.49-36.84-90.5-37.5H704v-64c-.68-17.98-7.02-32.98-19.01-44.99S658.01 64.66 640 64H384c-17.98.68-32.98 7.02-44.99 19.01S320.66 110 320 128v64H192c-35.99.68-66.16 13.18-90.5 37.5C77.16 253.82 64.66 283.99 64 320v448c.68 35.99 13.18 66.16 37.5 90.5s54.49 36.84 90.5 37.5h640c35.99-.68 66.16-13.18 90.5-37.5s36.84-54.49 37.5-90.5V320c-.68-35.99-13.18-66.16-37.5-90.5zM384 128h256v64H384v-64zM256 832h-64c-17.98-.68-32.98-7.02-44.99-19.01S128.66 786.01 128 768V448h128v384zm448 0H320V448h384v384zm192-64c-.68 17.98-7.02 32.98-19.01 44.99S850.01 831.34 832 832h-64V448h128v320zm0-384H128v-64c.69-17.98 7.02-32.98 19.01-44.99S173.99 256.66 192 256h640c17.98.69 32.98 7.02 44.99 19.01S895.34 301.99 896 320v64z\"/>"},"sunny":{"body":"<path fill=\"currentColor\" d=\"M512 704a192 192 0 1 0 0-384a192 192 0 0 0 0 384zm0 64a256 256 0 1 1 0-512a256 256 0 0 1 0 512zm0-704a32 32 0 0 1 32 32v64a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 768a32 32 0 0 1 32 32v64a32 32 0 1 1-64 0v-64a32 32 0 0 1 32-32zM195.2 195.2a32 32 0 0 1 45.248 0l45.248 45.248a32 32 0 1 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm543.104 543.104a32 32 0 0 1 45.248 0l45.248 45.248a32 32 0 0 1-45.248 45.248l-45.248-45.248a32 32 0 0 1 0-45.248zM64 512a32 32 0 0 1 32-32h64a32 32 0 0 1 0 64H96a32 32 0 0 1-32-32zm768 0a32 32 0 0 1 32-32h64a32 32 0 1 1 0 64h-64a32 32 0 0 1-32-32zM195.2 828.8a32 32 0 0 1 0-45.248l45.248-45.248a32 32 0 0 1 45.248 45.248L240.448 828.8a32 32 0 0 1-45.248 0zm543.104-543.104a32 32 0 0 1 0-45.248l45.248-45.248a32 32 0 0 1 45.248 45.248l-45.248 45.248a32 32 0 0 1-45.248 0z\"/>"},"sunrise":{"body":"<path fill=\"currentColor\" d=\"M32 768h960a32 32 0 1 1 0 64H32a32 32 0 1 1 0-64zm129.408-96a352 352 0 0 1 701.184 0h-64.32a288 288 0 0 0-572.544 0h-64.32zM512 128a32 32 0 0 1 32 32v96a32 32 0 0 1-64 0v-96a32 32 0 0 1 32-32zm407.296 168.704a32 32 0 0 1 0 45.248l-67.84 67.84a32 32 0 1 1-45.248-45.248l67.84-67.84a32 32 0 0 1 45.248 0zm-814.592 0a32 32 0 0 1 45.248 0l67.84 67.84a32 32 0 1 1-45.248 45.248l-67.84-67.84a32 32 0 0 1 0-45.248z\"/>"},"sunset":{"body":"<path fill=\"currentColor\" d=\"M82.56 640a448 448 0 1 1 858.88 0h-67.2a384 384 0 1 0-724.288 0H82.56zM32 704h960q32 0 32 32t-32 32H32q-32 0-32-32t32-32zm256 128h448q32 0 32 32t-32 32H288q-32 0-32-32t32-32z\"/>"},"switch":{"body":"<path fill=\"currentColor\" d=\"M118.656 438.656a32 32 0 0 1 0-45.248L416 96l4.48-3.776A32 32 0 0 1 461.248 96l3.712 4.48a32.064 32.064 0 0 1-3.712 40.832L218.56 384H928a32 32 0 1 1 0 64H141.248a32 32 0 0 1-22.592-9.344zM64 608a32 32 0 0 1 32-32h786.752a32 32 0 0 1 22.656 54.592L608 928l-4.48 3.776a32.064 32.064 0 0 1-40.832-49.024L805.632 640H96a32 32 0 0 1-32-32z\"/>"},"switch-button":{"body":"<path fill=\"currentColor\" d=\"M352 159.872V230.4a352 352 0 1 0 320 0v-70.528A416.128 416.128 0 0 1 512 960a416 416 0 0 1-160-800.128z\"/><path fill=\"currentColor\" d=\"M512 64q32 0 32 32v320q0 32-32 32t-32-32V96q0-32 32-32z\"/>"},"switch-filled":{"body":"<path fill=\"currentColor\" d=\"M247.47 358.4v.04c.07 19.17 7.72 37.53 21.27 51.09s31.92 21.2 51.09 21.27c39.86 0 72.41-32.6 72.41-72.4s-32.6-72.36-72.41-72.36s-72.36 32.55-72.36 72.36z\"/><path fill=\"currentColor\" d=\"M492.38 128H324.7c-52.16 0-102.19 20.73-139.08 57.61a196.655 196.655 0 0 0-57.61 139.08V698.7c-.01 25.84 5.08 51.42 14.96 75.29s24.36 45.56 42.63 63.83s39.95 32.76 63.82 42.65a196.67 196.67 0 0 0 75.28 14.98h167.68c3.03 0 5.46-2.43 5.46-5.42V133.42c.6-2.99-1.83-5.42-5.46-5.42zm-56.11 705.88H324.7c-17.76.13-35.36-3.33-51.75-10.18s-31.22-16.94-43.61-29.67c-25.3-25.35-39.81-59.1-39.81-95.32V324.69c-.13-17.75 3.33-35.35 10.17-51.74a131.695 131.695 0 0 1 29.64-43.62c25.39-25.3 59.14-39.81 95.36-39.81h111.57v644.36zm402.12-647.67a196.655 196.655 0 0 0-139.08-57.61H580.48c-3.03 0-4.82 2.43-4.82 4.82v757.16c-.6 2.99 1.79 5.42 5.42 5.42h118.23a196.69 196.69 0 0 0 139.08-57.61A196.655 196.655 0 0 0 896 699.31V325.29a196.69 196.69 0 0 0-57.61-139.08zm-111.3 441.92c-42.83 0-77.82-34.99-77.82-77.82s34.98-77.82 77.82-77.82c42.83 0 77.82 34.99 77.82 77.82s-34.99 77.82-77.82 77.82z\"/>"},"takeaway-box":{"body":"<path fill=\"currentColor\" d=\"M832 384H192v448h640V384zM96 320h832V128H96v192zm800 64v480a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V384H64a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32h896a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32h-64zM416 512h192a32 32 0 0 1 0 64H416a32 32 0 0 1 0-64z\"/>"},"ticket":{"body":"<path fill=\"currentColor\" d=\"M640 832H64V640a128 128 0 1 0 0-256V192h576v160h64V192h256v192a128 128 0 1 0 0 256v192H704V672h-64v160zm0-416v192h64V416h-64z\"/>"},"tickets":{"body":"<path fill=\"currentColor\" d=\"M192 128v768h640V128H192zm-32-64h704a32 32 0 0 1 32 32v832a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h192v64H320v-64zm0 384h384v64H320v-64z\"/>"},"timer":{"body":"<path fill=\"currentColor\" d=\"M512 896a320 320 0 1 0 0-640a320 320 0 0 0 0 640zm0 64a384 384 0 1 1 0-768a384 384 0 0 1 0 768z\"/><path fill=\"currentColor\" d=\"M512 320a32 32 0 0 1 32 32l-.512 224a32 32 0 1 1-64 0L480 352a32 32 0 0 1 32-32z\"/><path fill=\"currentColor\" d=\"M448 576a64 64 0 1 0 128 0a64 64 0 1 0-128 0zm96-448v128h-64V128h-96a32 32 0 0 1 0-64h256a32 32 0 1 1 0 64h-96z\"/>"},"toilet-paper":{"body":"<path fill=\"currentColor\" d=\"M595.2 128H320a192 192 0 0 0-192 192v576h384V352c0-90.496 32.448-171.2 83.2-224zM736 64c123.712 0 224 128.96 224 288S859.712 640 736 640H576v320H64V320A256 256 0 0 1 320 64h416zM576 352v224h160c84.352 0 160-97.28 160-224s-75.648-224-160-224s-160 97.28-160 224z\"/><path fill=\"currentColor\" d=\"M736 448c-35.328 0-64-43.008-64-96s28.672-96 64-96s64 43.008 64 96s-28.672 96-64 96z\"/>"},"tools":{"body":"<path fill=\"currentColor\" d=\"M764.416 254.72a351.68 351.68 0 0 1 86.336 149.184H960v192.064H850.752a351.68 351.68 0 0 1-86.336 149.312l54.72 94.72l-166.272 96l-54.592-94.72a352.64 352.64 0 0 1-172.48 0L371.136 936l-166.272-96l54.72-94.72a351.68 351.68 0 0 1-86.336-149.312H64v-192h109.248a351.68 351.68 0 0 1 86.336-149.312L204.8 160l166.208-96h.192l54.656 94.592a352.64 352.64 0 0 1 172.48 0L652.8 64h.128L819.2 160l-54.72 94.72zM704 499.968a192 192 0 1 0-384 0a192 192 0 0 0 384 0z\"/>"},"top":{"body":"<path fill=\"currentColor\" d=\"M572.235 205.282v600.365a30.118 30.118 0 1 1-60.235 0V205.282L292.382 438.633a28.913 28.913 0 0 1-42.646 0a33.43 33.43 0 0 1 0-45.236l271.058-288.045a28.913 28.913 0 0 1 42.647 0L834.5 393.397a33.43 33.43 0 0 1 0 45.176a28.913 28.913 0 0 1-42.647 0l-219.618-233.23z\"/>"},"top-left":{"body":"<path fill=\"currentColor\" d=\"M256 256h416a32 32 0 1 0 0-64H224a32 32 0 0 0-32 32v448a32 32 0 0 0 64 0V256z\"/><path fill=\"currentColor\" d=\"M246.656 201.344a32 32 0 0 0-45.312 45.312l544 544a32 32 0 0 0 45.312-45.312l-544-544z\"/>"},"top-right":{"body":"<path fill=\"currentColor\" d=\"M768 256H353.6a32 32 0 1 1 0-64H800a32 32 0 0 1 32 32v448a32 32 0 0 1-64 0V256z\"/><path fill=\"currentColor\" d=\"M777.344 201.344a32 32 0 0 1 45.312 45.312l-544 544a32 32 0 0 1-45.312-45.312l544-544z\"/>"},"trend-charts":{"body":"<path fill=\"currentColor\" d=\"M128 896V128h768v768H128zm291.712-327.296l128 102.4l180.16-201.792l-47.744-42.624l-139.84 156.608l-128-102.4l-180.16 201.792l47.744 42.624l139.84-156.608zM816 352a48 48 0 1 0-96 0a48 48 0 0 0 96 0z\"/>"},"trophy":{"body":"<path fill=\"currentColor\" d=\"M480 896V702.08A256.256 256.256 0 0 1 264.064 512h-32.64a96 96 0 0 1-91.968-68.416L93.632 290.88a76.8 76.8 0 0 1 73.6-98.88H256V96a32 32 0 0 1 32-32h448a32 32 0 0 1 32 32v96h88.768a76.8 76.8 0 0 1 73.6 98.88L884.48 443.52A96 96 0 0 1 792.576 512h-32.64A256.256 256.256 0 0 1 544 702.08V896h128a32 32 0 1 1 0 64H352a32 32 0 1 1 0-64h128zm224-448V128H320v320a192 192 0 1 0 384 0zm64 0h24.576a32 32 0 0 0 30.656-22.784l45.824-152.768A12.8 12.8 0 0 0 856.768 256H768v192zm-512 0V256h-88.768a12.8 12.8 0 0 0-12.288 16.448l45.824 152.768A32 32 0 0 0 231.424 448H256z\"/>"},"trophy-base":{"body":"<path fill=\"currentColor\" d=\"M918.4 201.6c-6.4-6.4-12.8-9.6-22.4-9.6H768V96c0-9.6-3.2-16-9.6-22.4C752 67.2 745.6 64 736 64H288c-9.6 0-16 3.2-22.4 9.6C259.2 80 256 86.4 256 96v96H128c-9.6 0-16 3.2-22.4 9.6c-6.4 6.4-9.6 16-9.6 22.4c3.2 108.8 25.6 185.6 64 224c34.4 34.4 77.56 55.65 127.65 61.99c10.91 20.44 24.78 39.25 41.95 56.41c40.86 40.86 91 65.47 150.4 71.9V768h-96c-9.6 0-16 3.2-22.4 9.6c-6.4 6.4-9.6 12.8-9.6 22.4s3.2 16 9.6 22.4c6.4 6.4 12.8 9.6 22.4 9.6h256c9.6 0 16-3.2 22.4-9.6c6.4-6.4 9.6-12.8 9.6-22.4s-3.2-16-9.6-22.4c-6.4-6.4-12.8-9.6-22.4-9.6h-96V637.26c59.4-7.71 109.54-30.01 150.4-70.86c17.2-17.2 31.51-36.06 42.81-56.55c48.93-6.51 90.02-27.7 126.79-61.85c38.4-38.4 60.8-112 64-224c0-6.4-3.2-16-9.6-22.4zM256 438.4c-19.2-6.4-35.2-19.2-51.2-35.2c-22.4-22.4-35.2-70.4-41.6-147.2H256v182.4zm390.4 80C608 553.6 566.4 576 512 576s-99.2-19.2-134.4-57.6C342.4 480 320 438.4 320 384V128h384v256c0 54.4-19.2 99.2-57.6 134.4zm172.8-115.2c-16 16-32 25.6-51.2 35.2V256h92.8c-6.4 76.8-19.2 124.8-41.6 147.2zM768 896H256c-9.6 0-16 3.2-22.4 9.6c-6.4 6.4-9.6 12.8-9.6 22.4s3.2 16 9.6 22.4c6.4 6.4 12.8 9.6 22.4 9.6h512c9.6 0 16-3.2 22.4-9.6c6.4-6.4 9.6-12.8 9.6-22.4s-3.2-16-9.6-22.4c-6.4-6.4-12.8-9.6-22.4-9.6z\"/>"},"turn-off":{"body":"<path fill=\"currentColor\" d=\"M329.956 257.138a254.862 254.862 0 0 0 0 509.724h364.088a254.862 254.862 0 0 0 0-509.724H329.956zm0-72.818h364.088a327.68 327.68 0 1 1 0 655.36H329.956a327.68 327.68 0 1 1 0-655.36z\"/><path fill=\"currentColor\" d=\"M329.956 621.227a109.227 109.227 0 1 0 0-218.454a109.227 109.227 0 0 0 0 218.454zm0 72.817a182.044 182.044 0 1 1 0-364.088a182.044 182.044 0 0 1 0 364.088z\"/>"},"umbrella":{"body":"<path fill=\"currentColor\" d=\"M320 768a32 32 0 1 1 64 0a64 64 0 0 0 128 0V512H64a448 448 0 1 1 896 0H576v256a128 128 0 1 1-256 0zm570.688-320a384.128 384.128 0 0 0-757.376 0h757.376z\"/>"},"unlock":{"body":"<path fill=\"currentColor\" d=\"M224 448a32 32 0 0 0-32 32v384a32 32 0 0 0 32 32h576a32 32 0 0 0 32-32V480a32 32 0 0 0-32-32H224zm0-64h576a96 96 0 0 1 96 96v384a96 96 0 0 1-96 96H224a96 96 0 0 1-96-96V480a96 96 0 0 1 96-96z\"/><path fill=\"currentColor\" d=\"M512 544a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V576a32 32 0 0 1 32-32zm178.304-295.296A192.064 192.064 0 0 0 320 320v64h352l96 38.4V448H256V320a256 256 0 0 1 493.76-95.104l-59.456 23.808z\"/>"},"upload":{"body":"<path fill=\"currentColor\" d=\"M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-578.304V704h-64V247.296L237.248 490.048L192 444.8L508.8 128l316.8 316.8l-45.312 45.248L544 253.696z\"/>"},"upload-filled":{"body":"<path fill=\"currentColor\" d=\"M544 864V672h128L512 480L352 672h128v192H320v-1.6c-5.376.32-10.496 1.6-16 1.6A240 240 0 0 1 64 624c0-123.136 93.12-223.488 212.608-237.248A239.808 239.808 0 0 1 512 192a239.872 239.872 0 0 1 235.456 194.752c119.488 13.76 212.48 114.112 212.48 237.248a240 240 0 0 1-240 240c-5.376 0-10.56-1.28-16-1.6v1.6H544z\"/>"},"user":{"body":"<path fill=\"currentColor\" d=\"M512 512a192 192 0 1 0 0-384a192 192 0 0 0 0 384zm0 64a256 256 0 1 1 0-512a256 256 0 0 1 0 512zm320 320v-96a96 96 0 0 0-96-96H288a96 96 0 0 0-96 96v96a32 32 0 1 1-64 0v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 1 1-64 0z\"/>"},"user-filled":{"body":"<path fill=\"currentColor\" d=\"M288 320a224 224 0 1 0 448 0a224 224 0 1 0-448 0zm544 608H160a32 32 0 0 1-32-32v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 0 1-32 32z\"/>"},"van":{"body":"<path fill=\"currentColor\" d=\"M128.896 736H96a32 32 0 0 1-32-32V224a32 32 0 0 1 32-32h576a32 32 0 0 1 32 32v96h164.544a32 32 0 0 1 31.616 27.136l54.144 352A32 32 0 0 1 922.688 736h-91.52a144 144 0 1 1-286.272 0H415.104a144 144 0 1 1-286.272 0zm23.36-64a143.872 143.872 0 0 1 239.488 0H568.32c17.088-25.6 42.24-45.376 71.744-55.808V256H128v416h24.256zm655.488 0h77.632l-19.648-128H704v64.896A144 144 0 0 1 807.744 672zm48.128-192l-14.72-96H704v96h151.872zM688 832a80 80 0 1 0 0-160a80 80 0 0 0 0 160zm-416 0a80 80 0 1 0 0-160a80 80 0 0 0 0 160z\"/>"},"video-camera":{"body":"<path fill=\"currentColor\" d=\"M704 768V256H128v512h576zm64-416l192-96v512l-192-96v128a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V224a32 32 0 0 1 32-32h640a32 32 0 0 1 32 32v128zm0 71.552v176.896l128 64V359.552l-128 64zM192 320h192v64H192v-64z\"/>"},"video-camera-filled":{"body":"<path fill=\"currentColor\" d=\"m768 576l192-64v320l-192-64v96a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V480a32 32 0 0 1 32-32h640a32 32 0 0 1 32 32v96zM192 768v64h384v-64H192zm192-480a160 160 0 0 1 320 0a160 160 0 0 1-320 0zm64 0a96 96 0 1 0 192.064-.064A96 96 0 0 0 448 288zm-320 32a128 128 0 1 1 256.064.064A128 128 0 0 1 128 320zm64 0a64 64 0 1 0 128 0a64 64 0 0 0-128 0z\"/>"},"video-pause":{"body":"<path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768a384 384 0 0 0 0 768zm-96-544q32 0 32 32v256q0 32-32 32t-32-32V384q0-32 32-32zm192 0q32 0 32 32v256q0 32-32 32t-32-32V384q0-32 32-32z\"/>"},"video-play":{"body":"<path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768a384 384 0 0 0 0 768zm-48-247.616L668.608 512L464 375.616v272.768zm10.624-342.656l249.472 166.336a48 48 0 0 1 0 79.872L474.624 718.272A48 48 0 0 1 400 678.336V345.6a48 48 0 0 1 74.624-39.936z\"/>"},"view":{"body":"<path fill=\"currentColor\" d=\"M512 160c320 0 512 352 512 352S832 864 512 864S0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288c52.608 79.872 211.456 288 436.8 288c225.28 0 384.128-208.064 436.8-288c-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448a224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160s-71.744-160-160-160z\"/>"},"wallet":{"body":"<path fill=\"currentColor\" d=\"M640 288h-64V128H128v704h384v32a32 32 0 0 0 32 32H96a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32h512a32 32 0 0 1 32 32v192z\"/><path fill=\"currentColor\" d=\"M128 320v512h768V320H128zm-32-64h832a32 32 0 0 1 32 32v576a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32z\"/><path fill=\"currentColor\" d=\"M704 640a64 64 0 1 1 0-128a64 64 0 0 1 0 128z\"/>"},"wallet-filled":{"body":"<path fill=\"currentColor\" d=\"M688 512a112 112 0 1 0 0 224h208v160H128V352h768v160H688zm32 160h-32a48 48 0 0 1 0-96h32a48 48 0 0 1 0 96zm-80-544l128 160H384l256-160z\"/>"},"warn-triangle-filled":{"body":"<path fill=\"currentColor\" d=\"M928.99 755.83L574.6 203.25c-12.89-20.16-36.76-32.58-62.6-32.58s-49.71 12.43-62.6 32.58L95.01 755.83c-12.91 20.12-12.9 44.91.01 65.03c12.92 20.12 36.78 32.51 62.59 32.49h708.78c25.82.01 49.68-12.37 62.59-32.49c12.91-20.12 12.92-44.91.01-65.03zM554.67 768h-85.33v-85.33h85.33V768zm0-426.67v298.66h-85.33V341.32l85.33.01z\"/>"},"warning":{"body":"<path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768a384 384 0 0 0 0 768zm48-176a48 48 0 1 1-96 0a48 48 0 0 1 96 0zm-48-464a32 32 0 0 1 32 32v288a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32z\"/>"},"warning-filled":{"body":"<path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896zm0 192a58.432 58.432 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.432 58.432 0 0 0 512 256zm0 512a51.2 51.2 0 1 0 0-102.4a51.2 51.2 0 0 0 0 102.4z\"/>"},"watch":{"body":"<path fill=\"currentColor\" d=\"M512 768a256 256 0 1 0 0-512a256 256 0 0 0 0 512zm0 64a320 320 0 1 1 0-640a320 320 0 0 1 0 640z\"/><path fill=\"currentColor\" d=\"M480 352a32 32 0 0 1 32 32v160a32 32 0 0 1-64 0V384a32 32 0 0 1 32-32z\"/><path fill=\"currentColor\" d=\"M480 512h128q32 0 32 32t-32 32H480q-32 0-32-32t32-32zm128-256V128H416v128h-64V64h320v192h-64zM416 768v128h192V768h64v192H352V768h64z\"/>"},"watermelon":{"body":"<path fill=\"currentColor\" d=\"m683.072 600.32l-43.648 162.816l-61.824-16.512l53.248-198.528L576 493.248l-158.4 158.4l-45.248-45.248l158.4-158.4l-55.616-55.616l-198.528 53.248l-16.512-61.824l162.816-43.648L282.752 200A384 384 0 0 0 824 741.248L683.072 600.32zm231.552 141.056a448 448 0 1 1-632-632l632 632z\"/>"},"wind-power":{"body":"<path fill=\"currentColor\" d=\"M160 64q32 0 32 32v832q0 32-32 32t-32-32V96q0-32 32-32zm416 354.624l128-11.584V168.96l-128-11.52v261.12zm-64 5.824V151.552L320 134.08V160h-64V64l616.704 56.064A96 96 0 0 1 960 215.68v144.64a96 96 0 0 1-87.296 95.616L256 512V224h64v217.92l192-17.472zm256-23.232l98.88-8.96A32 32 0 0 0 896 360.32V215.68a32 32 0 0 0-29.12-31.872l-98.88-8.96v226.368z\"/>"},"zoom-in":{"body":"<path fill=\"currentColor\" d=\"m795.904 750.72l124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704a352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z\"/>"},"zoom-out":{"body":"<path fill=\"currentColor\" d=\"m795.904 750.72l124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704a352 352 0 0 0 0 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z\"/>"}},"lastModified":1660284884,"width":1024,"height":1024}
diff --git a/scripts/prepare.js b/scripts/prepare.js
index dda33c21..d456d881 100644
--- a/scripts/prepare.js
+++ b/scripts/prepare.js
@@ -1,15 +1,15 @@
-import path from 'path'
+import path from 'node:path'
 import fs from 'fs-extra'
 import { icons } from '@iconify-json/ep'
 
 async function prepare() {
-    const outputDir = path.resolve(process.cwd(), 'public/icons')
-    await fs.ensureDir(outputDir)
-    await fs.emptyDir(outputDir)
-    await fs.writeJSON(
-        path.resolve(outputDir, 'icons.json'),
-        icons
-    )
+  const outputDir = path.resolve(process.cwd(), 'public/icons')
+  await fs.ensureDir(outputDir)
+  await fs.emptyDir(outputDir)
+  await fs.writeJSON(
+    path.resolve(outputDir, 'icons.json'),
+    icons,
+  )
 }
 
 prepare()
diff --git a/scss.template.hbs b/scss.template.hbs
index 7821aed7..7b015727 100644
--- a/scss.template.hbs
+++ b/scss.template.hbs
@@ -1,7 +1,7 @@
 {
-    // Default options
-    'functions': true,
-    'variableNameTransforms': ['dasherize']
+  // Default options
+  'functions': true,
+  'variableNameTransforms': ['dasherize']
 }
 
 {{#block "sprites"}}
@@ -19,35 +19,35 @@ ${{spritesheet_info.strings.name}}-sprites: (
 {{#block "sprite-functions"}}
 {{#if options.functions}}
 @mixin {{spritesheet_info.strings.name}}-sprite-width($sprite) {
-    width: nth($sprite, 5);
+  width: nth($sprite, 5);
 }
 
 @mixin {{spritesheet_info.strings.name}}-sprite-height($sprite) {
-    height: nth($sprite, 6);
+  height: nth($sprite, 6);
 }
 
 @mixin {{spritesheet_info.strings.name}}-sprite-position($sprite) {
-    $sprite-offset-x: nth($sprite, 3);
-    $sprite-offset-y: nth($sprite, 4);
-    background-position: $sprite-offset-x $sprite-offset-y;
+  $sprite-offset-x: nth($sprite, 3);
+  $sprite-offset-y: nth($sprite, 4);
+  background-position: $sprite-offset-x $sprite-offset-y;
 }
 
 @mixin {{spritesheet_info.strings.name}}-sprite-size($sprite) {
-    background-size: nth($sprite, 7) nth($sprite, 8);
+  background-size: nth($sprite, 7) nth($sprite, 8);
 }
 
 @mixin {{spritesheet_info.strings.name}}-sprite-image($sprite) {
-    $sprite-image: nth($sprite, 9);
-    background-image: url(#{$sprite-image});
+  $sprite-image: nth($sprite, 9);
+  background-image: url(#{$sprite-image});
 }
 
 @mixin {{spritesheet_info.strings.name}}-sprite($name) {
-    @include {{spritesheet_info.strings.name}}-sprite-image(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-    @include {{spritesheet_info.strings.name}}-sprite-position(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-    @include {{spritesheet_info.strings.name}}-sprite-size(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-    @include {{spritesheet_info.strings.name}}-sprite-width(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-    @include {{spritesheet_info.strings.name}}-sprite-height(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-    background-repeat: no-repeat;
+  @include {{spritesheet_info.strings.name}}-sprite-image(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
+  @include {{spritesheet_info.strings.name}}-sprite-position(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
+  @include {{spritesheet_info.strings.name}}-sprite-size(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
+  @include {{spritesheet_info.strings.name}}-sprite-width(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
+  @include {{spritesheet_info.strings.name}}-sprite-height(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
+  background-repeat: no-repeat;
 }
 {{/if}}
 {{/block}}
@@ -55,12 +55,12 @@ ${{spritesheet_info.strings.name}}-sprites: (
 {{#block "spritesheet-functions"}}
 {{#if options.functions}}
 @mixin all-{{spritesheet_info.strings.name}}-sprites() {
-    @each $key, $val in ${{spritesheet_info.strings.name}}-sprites {
-        $sprite-name: nth($val, 10);
-        .{{spritesheet_info.strings.name}}-#{$sprite-name}-sprites {
-            @include {{spritesheet_info.strings.name}}-sprite($key);
-        }
+  @each $key, $val in ${{spritesheet_info.strings.name}}-sprites {
+    $sprite-name: nth($val, 10);
+    .{{spritesheet_info.strings.name}}-#{$sprite-name}-sprites {
+      @include {{spritesheet_info.strings.name}}-sprite($key);
     }
+  }
 }
 {{/if}}
 {{/block}}
diff --git a/src/App.vue b/src/App.vue
index d7a5908b..bf910fda 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,89 +1,100 @@
-<script setup>
+<script lang="ts" setup>
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import hotkeys from 'hotkeys-js'
+import eventBus from './utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
+import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
 
+const buttonConfig = ref({
+  autoInsertSpace: true,
+})
+
 // 侧边栏主导航当前实际宽度
 const mainSidebarActualWidth = computed(() => {
-    let actualWidth = getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width')
-    actualWidth = parseInt(actualWidth)
-    if (['head', 'single'].includes(settingsStore.menu.menuMode)) {
-        actualWidth = 0
-    }
-    return `${actualWidth}px`
+  let actualWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
+  if (['head', 'single'].includes(settingsStore.menu.menuMode))
+    actualWidth = 0
+
+  return `${actualWidth}px`
 })
 
 // 侧边栏次导航当前实际宽度
 const subSidebarActualWidth = computed(() => {
-    let actualWidth = getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width')
-    actualWidth = parseInt(actualWidth)
-    if (settingsStore.menu.subMenuCollapse) {
-        actualWidth = 64
-    }
-    return `${actualWidth}px`
+  let actualWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width'))
+  if (settingsStore.menu.subMenuCollapse)
+    actualWidth = 64
+
+  return `${actualWidth}px`
 })
 
 watch(() => settingsStore.app.colorScheme, () => {
-    if (settingsStore.app.colorScheme === 'dark') {
-        document.documentElement.classList.add('dark')
-    } else {
-        document.documentElement.classList.remove('dark')
-    }
+  if (settingsStore.app.colorScheme === 'dark')
+    document.documentElement.classList.add('dark')
+
+  else
+    document.documentElement.classList.remove('dark')
 }, {
-    immediate: true
+  immediate: true,
 })
 
 watch(() => settingsStore.mode, () => {
-    if (settingsStore.mode === 'pc') {
-        settingsStore.$patch(state => {
-            state.menu.subMenuCollapse = settingsStore.subMenuCollapseLastStatus
-        })
-    } else if (settingsStore.mode === 'mobile') {
-        settingsStore.$patch(state => {
-            state.menu.subMenuCollapse = true
-        })
-    }
-    document.body.setAttribute('data-mode', settingsStore.mode)
+  if (settingsStore.mode === 'pc') {
+    settingsStore.$patch((state) => {
+      state.menu.subMenuCollapse = settingsStore.subMenuCollapseLastStatus
+    })
+  }
+  else if (settingsStore.mode === 'mobile') {
+    settingsStore.$patch((state) => {
+      state.menu.subMenuCollapse = true
+    })
+  }
+  document.body.setAttribute('data-mode', settingsStore.mode)
 }, {
-    immediate: true
+  immediate: true,
 })
 
 watch(() => settingsStore.menu.menuMode, () => {
-    document.body.setAttribute('data-menu-mode', settingsStore.menu.menuMode)
+  document.body.setAttribute('data-menu-mode', settingsStore.menu.menuMode)
 }, {
-    immediate: true
+  immediate: true,
 })
 
 watch([
-    () => settingsStore.app.enableDynamicTitle,
-    () => settingsStore.title
+  () => settingsStore.app.enableDynamicTitle,
+  () => settingsStore.title,
 ], () => {
-    if (settingsStore.app.enableDynamicTitle && settingsStore.title) {
-        let title = settingsStore.title
-        document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
-    } else {
-        document.title = import.meta.env.VITE_APP_TITLE
-    }
+  if (settingsStore.app.enableDynamicTitle && settingsStore.title) {
+    const title = settingsStore.title
+    document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
+  }
+  else {
+    document.title = import.meta.env.VITE_APP_TITLE
+  }
 }, {
-    immediate: true
+  immediate: true,
 })
 
 onMounted(() => {
-    window.onresize = () => {
-        settingsStore.setMode(document.documentElement.clientWidth)
-    }
-    window.onresize()
+  settingsStore.setMode(document.documentElement.clientWidth)
+  window.onresize = () => {
+    settingsStore.setMode(document.documentElement.clientWidth)
+  }
+  hotkeys('alt+i', () => {
+    eventBus.emit('global-system-info-toggle')
+  })
 })
 </script>
 
 <template>
-    <el-config-provider :locale="zhCn" :size="settingsStore.app.elementSize" :button="{autoInsertSpace: true}">
-        <RouterView
-            :style="{
-                '--g-main-sidebar-actual-width': mainSidebarActualWidth,
-                '--g-sub-sidebar-actual-width': subSidebarActualWidth
-            }"
-        />
-    </el-config-provider>
+  <el-config-provider :locale="zhCn" :size="settingsStore.app.elementSize" :button="buttonConfig">
+    <RouterView
+      :style="{
+        '--g-main-sidebar-actual-width': mainSidebarActualWidth,
+        '--g-sub-sidebar-actual-width': subSidebarActualWidth,
+      }"
+    />
+    <system-info />
+  </el-config-provider>
 </template>
diff --git a/src/api/index.js b/src/api/index.js
deleted file mode 100644
index 6bf5f5f8..00000000
--- a/src/api/index.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import axios from 'axios'
-// import qs from 'qs'
-import router from '@/router/index'
-import { ElMessage } from 'element-plus'
-import useUserStore from '@/store/modules/user'
-
-const toLogin = () => {
-    useUserStore().logout().then(() => {
-        router.push({
-            name: 'login',
-            query: {
-                redirect: router.currentRoute.value.path !== '/login' ? router.currentRoute.value.fullPath : undefined
-            }
-        })
-    })
-}
-
-const api = axios.create({
-    baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
-    timeout: 10000,
-    responseType: 'json'
-})
-
-api.interceptors.request.use(
-    request => {
-        const userStore = useUserStore()
-        /**
-         * 全局拦截请求发送前提交的参数
-         * 以下代码为示例，在请求头里带上 token 信息
-         */
-        if (userStore.isLogin) {
-            request.headers['Token'] = userStore.token
-        }
-        // 是否将 POST 请求参数进行字符串化处理
-        if (request.method === 'post') {
-            // request.data = qs.stringify(request.data, {
-            //     arrayFormat: 'brackets'
-            // })
-        }
-        return request
-    }
-)
-
-api.interceptors.response.use(
-    response => {
-        /**
-         * 全局拦截请求发送后返回的数据，如果数据有报错则在这做全局的错误提示
-         * 假设返回数据格式为：{ status: 1, error: '', data: '' }
-         * 规则是当 status 为 1 时表示请求成功，为 0 时表示接口需要登录或者登录状态失效，需要重新登录
-         * 请求出错时 error 会返回错误信息
-         */
-        if (response.data.status === 1) {
-            if (response.data.error === '') {
-                // 请求成功并且没有报错
-                return Promise.resolve(response.data)
-            } else {
-                // 这里做错误提示
-                // ElMessage.error(options)
-                return Promise.reject(response.data)
-            }
-        } else {
-            toLogin()
-        }
-    },
-    error => {
-        let message = error.message
-        if (message == 'Network Error') {
-            message = '后端网络故障'
-        } else if (message.includes('timeout')) {
-            message = '接口请求超时'
-        } else if (message.includes('Request failed with status code')) {
-            message = '接口' + message.substr(message.length - 3) + '异常'
-        }
-        ElMessage({
-            message,
-            type: 'error'
-        })
-        return Promise.reject(error)
-    }
-)
-
-export default api
diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 00000000..a0b8fe3e
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1,83 @@
+import axios from 'axios'
+// import qs from 'qs'
+import router from '@/router/index'
+import useUserStore from '@/store/modules/user'
+
+const toLogin = () => {
+  router.push({
+    path: '/login',
+    query: {
+      redirect: router.currentRoute.value.path !== '/login' ? router.currentRoute.value.fullPath : undefined,
+    },
+  })
+}
+
+const api = axios.create({
+  baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
+  timeout: 10000,
+  responseType: 'json',
+})
+
+api.interceptors.request.use(
+  (request) => {
+    const userStore = useUserStore()
+    /**
+     * 全局拦截请求发送前提交的参数
+     * 以下代码为示例，在请求头里带上 token 信息
+     */
+    if (userStore.isLogin && request.headers)
+      request.headers.Token = userStore.token
+
+    // 是否将 POST 请求参数进行字符串化处理
+    if (request.method === 'post') {
+      // request.data = qs.stringify(request.data, {
+      //   arrayFormat: 'brackets',
+      // })
+    }
+    return request
+  },
+)
+
+api.interceptors.response.use(
+  (response) => {
+    /**
+     * 全局拦截请求发送后返回的数据，如果数据有报错则在这做全局的错误提示
+     * 假设返回数据格式为：{ status: 1, error: '', data: '' }
+     * 规则是当 status 为 1 时表示请求成功，为 0 时表示接口需要登录或者登录状态失效，需要重新登录
+     * 请求出错时 error 会返回错误信息
+     */
+    if (response.data.status === 1) {
+      if (response.data.error === '') {
+        // 请求成功并且没有报错
+        return Promise.resolve(response.data)
+      }
+      else {
+        // 这里做错误提示，如果使用了 element plus 则可以使用 Message 进行提示
+        // ElMessage.error(options)
+        return Promise.reject(response.data)
+      }
+    }
+    else {
+      toLogin()
+    }
+  },
+  (error) => {
+    let message = error.message
+    if (message === 'Network Error')
+      message = '后端网络故障'
+
+    else if (message.includes('timeout'))
+      message = '接口请求超时'
+
+    else if (message.includes('Request failed with status code'))
+      message = `接口${message.substr(message.length - 3)}异常`
+
+    ElMessage({
+      message,
+      type: 'error',
+    })
+    return Promise.reject(error)
+  },
+)
+
+export default api
diff --git a/src/assets/icons/captcha.svg b/src/assets/icons/captcha.svg
deleted file mode 100644
index 7d77e50f..00000000
--- a/src/assets/icons/captcha.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1623578868505" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5778" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M972.4928 217.4976a73.4208 73.4208 0 0 0-58.5728-64.0512 1415.7312 1415.7312 0 0 1-189.184-42.9568A706.1504 706.1504 0 0 1 555.52 14.4384a77.6704 77.6704 0 0 0-90.112 0 445.8496 445.8496 0 0 1-170.496 96.0512 639.0272 639.0272 0 0 1-183.8592 44.8512A67.8912 67.8912 0 0 0 53.1968 219.392S51.2 379.2384 51.2 520.448C51.2 776.4992 358.1952 1024 511.8464 1024c153.6 0 413.5936-174.592 455.0144-499.712 6.5536-101.888 7.68-204.0832 3.328-306.176H972.8l-0.3072-0.6144z m-167.168 197.9392l-320.512 297.216a43.6736 43.6736 0 0 1-53.248 5.12l-8.5504-7.0144L246.272 529.408a42.752 42.752 0 0 1 2.304-61.184 43.776 43.776 0 0 1 62.1568 2.56l145.7664 150.2208 288.8704-269.6704a44.4416 44.4416 0 0 1 62.5152 2.56c16.5376 17.7664 15.36 45.1072-2.6112 61.44z" p-id="5779"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/eye-open.svg b/src/assets/icons/eye-open.svg
deleted file mode 100644
index b80fd2b6..00000000
--- a/src/assets/icons/eye-open.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/eye.svg b/src/assets/icons/eye.svg
deleted file mode 100644
index 16ed2d87..00000000
--- a/src/assets/icons/eye.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/password.svg b/src/assets/icons/password.svg
deleted file mode 100644
index e291d85d..00000000
--- a/src/assets/icons/password.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/sidebar-element.svg b/src/assets/icons/sidebar-element.svg
deleted file mode 100644
index 6965ced0..00000000
--- a/src/assets/icons/sidebar-element.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1628158537840" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1342" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M954.391106 733.455997c-0.269471 42.495631-22.366122 51.954075-22.366122 51.954075s-380.897745 220.131141-405.662161 233.901127c-24.521892 10.53633-40.959644 0-40.959645 0S86.882008 788.15868 72.330555 777.99961c-14.551453-10.15907-14.901765-26.003985-14.901765-26.003985s0.404207-457.724025 0-478.93142c-0.404207-21.180448 26.057879-37.106204 26.057879-37.106204L481.711421 5.748632c24.521892-12.934625 48.370106 0 48.370106 0s351.821787 204.52875 390.787343 226.490665c38.237984 18.162369 33.522235 55.67278 33.522236 55.67278s0.215577 406.039421 0 445.54392z m-159.015041-459.421695a166166.674868 166166.674868 0 0 1-273.621202-158.233573s-18.755206-10.132123-37.99546 0L171.091803 295.942323s-20.776241 12.476523-20.479823 29.04901c0.323366 16.599435 0 374.83464 0 374.83464s0.269471 12.395682 11.695057 20.345087 324.362657 188.845518 324.362657 188.845517 12.88073 8.245823 32.147931 0c19.455831-10.778854 318.515129-183.051884 318.515129-183.051884s17.327007-7.410462 17.515637-40.690172c0.080841-9.566233 0.107789-46.807172 0.107789-93.560451L502.837974 805.054533v-81.62287c0-33.522235 25.95009-55.645833 25.950091-55.645833l311.454979-187.659844c11.748951-12.287893 14.174193-31.932354 14.659241-39.369763v-82.727703L502.837974 571.288142v-85.314628c0-33.549182 22.258333-48.235371 22.258333-48.23537l270.279758-163.730789z" p-id="1343"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/sidebar-permission.svg b/src/assets/icons/sidebar-permission.svg
deleted file mode 100644
index 2f812c4f..00000000
--- a/src/assets/icons/sidebar-permission.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M936.003 250.68C908.57 92.426 759.26-13.143 602.593 14.69 446.136 42.526 313.923 164.397 341.56 322.451c5.965 34.197 22.462 87.48 41.948 125.85L99.215 858.445c-10.537 15.109-16.501 42.347-13.322 60.636l12.33 70.18c-11.73-67.594 3.179 24.453 12.323 24.054l93.64 1.392c18.094-3.18 40.755-18.488 50.698-33.997L367.41 804.762l.988-1.193 98.217 7.756 131.41-205.967c43.146 7.358 104.97 4.772 141.753-1.587 155.863-27.838 224.061-195.036 196.224-353.09zm-759.87 635.904-24.591 15.483 5.729-27.817L424.079 492.4l18.453 12.918-266.399 381.266zM797.43 331.597c-43.141 62.034-87.076 18.294-148.511-25.247-61.435-43.54-117.3-70.175-74.158-132.408 43.141-62.024 127.836-77.338 189.266-33.797 61.435 43.735 76.544 129.423 33.403 191.452z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg
deleted file mode 100644
index 0ba0716a..00000000
--- a/src/assets/icons/user.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>
\ No newline at end of file
diff --git a/src/assets/sprites/.gitkeep b/src/assets/sprites/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/src/assets/sprites/example/address.png b/src/assets/sprites/example/address.png
deleted file mode 100644
index 2b5d1db3..00000000
Binary files a/src/assets/sprites/example/address.png and /dev/null differ
diff --git a/src/assets/sprites/example/feedback.png b/src/assets/sprites/example/feedback.png
deleted file mode 100644
index 065b55dd..00000000
Binary files a/src/assets/sprites/example/feedback.png and /dev/null differ
diff --git a/src/assets/sprites/example/payment.png b/src/assets/sprites/example/payment.png
deleted file mode 100644
index 1c2f680a..00000000
Binary files a/src/assets/sprites/example/payment.png and /dev/null differ
diff --git a/src/assets/styles/element-plus/dark.scss b/src/assets/styles/element-plus/dark.scss
index 1e3ddf33..c20a369e 100644
--- a/src/assets/styles/element-plus/dark.scss
+++ b/src/assets/styles/element-plus/dark.scss
@@ -1,9 +1,10 @@
 // 暗黑模式
 @forward "element-plus/theme-chalk/src/dark/var.scss" with (
-    $bg-color: (
-        "page": #0a0a0a,
-        "": #141414,
-        "overlay": #1d1e1f,
-    )
+  $bg-color: (
+    "page": #0a0a0a,
+    "": #141414,
+    "overlay": #1d1e1f,
+  )
 );
+
 @use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 14cacee8..4ff67107 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -1,9 +1,10 @@
 // @forward "element-plus/theme-chalk/src/common/var.scss" with (
-//     $colors: (
-//         "primary": (
-//             "base": green
-//         )
+//   $colors: (
+//     "primary": (
+//       "base": green
 //     )
+//   )
 // );
+
 @use "element-plus/theme-chalk/src/index.scss" as *;
 @use "./dark.scss";
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index ae012a7f..fedf28c6 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -3,73 +3,82 @@
 
 // 全局变量
 :root {
-    // 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
-    --g-header-width: 100%;
-    // 头部高度
-    --g-header-height: 70px;
-    // 侧边栏宽度
-    --g-main-sidebar-width: 70px;
-    --g-sub-sidebar-width: 220px;
-    // 侧边栏Logo高度
-    --g-sidebar-logo-height: 50px;
-    // 顶栏高度
-    --g-topbar-height: 50px;
+  // 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
+  --g-header-width: 100%;
+  // 头部高度
+  --g-header-height: 70px;
+  // 侧边栏宽度
+  --g-main-sidebar-width: 70px;
+  --g-sub-sidebar-width: 220px;
+  // 侧边栏Logo高度
+  --g-sidebar-logo-height: 50px;
+  // 顶栏高度
+  --g-topbar-height: 50px;
 }
 // 全局样式
 ::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
+  width: 12px;
+  height: 12px;
 }
+
 ::-webkit-scrollbar-thumb {
-    background-color: rgb(0 0 0 / 40%);
-    background-clip: padding-box;
-    border: 3px solid transparent;
-    border-radius: 6px;
+  background-color: rgb(0 0 0 / 40%);
+  background-clip: padding-box;
+  border: 3px solid transparent;
+  border-radius: 6px;
 }
+
 ::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(0 0 0 / 50%);
+  background-color: rgb(0 0 0 / 50%);
 }
+
 ::-webkit-scrollbar-track {
-    background-color: transparent;
+  background-color: transparent;
 }
+
 html,
 body {
-    height: 100%;
+  height: 100%;
 }
+
 body {
-    margin: 0;
-    box-sizing: border-box;
-    font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
-    -webkit-tap-highlight-color: transparent;
-    &.hidden {
-        overflow: hidden;
-    }
+  margin: 0;
+  box-sizing: border-box;
+  font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
+  -webkit-tap-highlight-color: transparent;
+
+  &.hidden {
+    overflow: hidden;
+  }
 }
+
 * {
-    box-sizing: inherit;
+  box-sizing: inherit;
 }
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
-    position: fixed;
-    left: 50%;
-    right: 0;
-    width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-    transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  position: fixed;
+  left: 50%;
+  right: 0;
+  width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
+  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
+
 [data-mode="mobile"] {
-    [data-fixed-calc-width] {
-        width: 100% !important;
-        transform: translateX(-50%) !important;
-    }
+  [data-fixed-calc-width] {
+    width: 100% !important;
+    transform: translateX(-50%) !important;
+  }
 }
 // textarea 字体跟随系统
 textarea {
-    font-family: inherit;
+  font-family: inherit;
 }
 // 列表页全局样式
 .el-table.list-table {
-    margin: 20px 0;
-    .el-button + .el-dropdown {
-        margin-left: 10px;
-    }
+  margin: 20px 0;
+
+  .el-button + .el-dropdown {
+    margin-left: 10px;
+  }
 }
diff --git a/src/assets/styles/nprogress.scss b/src/assets/styles/nprogress.scss
index a96b4945..9947aa68 100644
--- a/src/assets/styles/nprogress.scss
+++ b/src/assets/styles/nprogress.scss
@@ -1,55 +1,63 @@
 #nprogress {
-    pointer-events: none;
-    .bar {
-        position: fixed;
-        z-index: 1031;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background: var(--g-nprogress-color);
-    }
-    .peg {
-        display: block;
-        position: absolute;
-        right: 0;
-        width: 100px;
-        height: 100%;
-        opacity: 1;
-        transform: rotate(3deg) translate(0, -4px);
-        box-shadow: 0 0 10px var(--g-nprogress-color), 0 0 5px var(--g-nprogress-color);
-    }
-    .spinner {
-        display: block;
-        position: fixed;
-        z-index: 1031;
-        top: 11px;
-        right: 14px;
-        .spinner-icon {
-            width: 18px;
-            height: 18px;
-            box-sizing: border-box;
-            border: solid 2px transparent;
-            border-radius: 50%;
-            animation: nprogress-spinner 400ms linear infinite;
-            border-top-color: var(--g-nprogress-color);
-            border-left-color: var(--g-nprogress-color);
-        }
+  pointer-events: none;
+
+  .bar {
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--g-nprogress-color);
+  }
+
+  .peg {
+    display: block;
+    position: absolute;
+    right: 0;
+    width: 100px;
+    height: 100%;
+    opacity: 1;
+    transform: rotate(3deg) translate(0, -4px);
+    box-shadow: 0 0 10px var(--g-nprogress-color), 0 0 5px var(--g-nprogress-color);
+  }
+
+  .spinner {
+    display: block;
+    position: fixed;
+    z-index: 1031;
+    top: 11px;
+    right: 14px;
+
+    .spinner-icon {
+      width: 18px;
+      height: 18px;
+      box-sizing: border-box;
+      border: solid 2px transparent;
+      border-radius: 50%;
+      animation: nprogress-spinner 400ms linear infinite;
+      border-top-color: var(--g-nprogress-color);
+      border-left-color: var(--g-nprogress-color);
     }
+  }
 }
+
 .nprogress-custom-parent {
-    overflow: hidden;
-    position: relative;
-    #nprogress .spinner,
-    #nprogress .bar {
-        position: absolute;
-    }
+  overflow: hidden;
+  position: relative;
+
+  #nprogress .spinner,
+  #nprogress .bar {
+    position: absolute;
+  }
 }
+
 @keyframes nprogress-spinner {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
+
 @keyframes nprogress-spinner {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
diff --git a/src/assets/styles/resources/utils.scss b/src/assets/styles/resources/utils.scss
index 40d054ac..ce32009a 100644
--- a/src/assets/styles/resources/utils.scss
+++ b/src/assets/styles/resources/utils.scss
@@ -1,50 +1,55 @@
 // 文字超出隐藏，默认为单行超出隐藏，可设置多行
 @mixin text-overflow($line: 1, $fixed-width: true) {
-    @if ($line == 1 and $fixed-width == true) {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-    @else {
-        /* stylelint-disable-next-line value-no-vendor-prefix */
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: $line;
-        overflow: hidden;
-    }
+  @if ($line == 1 and $fixed-width == true) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @else {
+    /* stylelint-disable-next-line value-no-vendor-prefix */
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $line;
+    overflow: hidden;
+  }
 }
 
 // 定位居中，默认水平居中，可选择垂直居中，或者水平垂直都居中
 @mixin position-center($type: x) {
-    position: absolute;
-    @if ($type == x) {
-        left: 50%;
-        transform: translateX(-50%);
-    }
-    @if ($type == y) {
-        top: 50%;
-        transform: translateY(-50%);
-    }
-    @if ($type == xy) {
-        left: 50%;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%);
-    }
+  position: absolute;
+
+  @if ($type == x) {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  @if ($type == y) {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @if ($type == xy) {
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
 }
 
 // 文字两端对齐
 %justify-align {
-    text-align: justify;
-    text-align-last: justify;
+  text-align: justify;
+  text-align-last: justify;
 }
 
 // 清除浮动
 %clearfix {
-    zoom: 1;
-    &::before,
-    &::after {
-        content: "";
-        display: block;
-        clear: both;
-    }
+  zoom: 1;
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
 }
diff --git a/src/assets/styles/themes.scss b/src/assets/styles/themes.scss
index 3ce94315..179e406f 100644
--- a/src/assets/styles/themes.scss
+++ b/src/assets/styles/themes.scss
@@ -1,5 +1,67 @@
 :root {
-    --g-box-shadow-color: rgb(0 0 0 / 12%);
+  --g-box-shadow-color: rgb(0 0 0 / 12%);
+
+  /* ----- 应用 ----- */
+  // 应用背景色
+  --g-app-bg: var(--el-bg-color);
+  // 主区域背景色
+  --g-main-bg: var(--el-bg-color-page);
+
+  /* ----- 顶部 ----- */
+  // 背景色
+  --g-header-bg: #222b45;
+  // 文字颜色
+  --g-header-color: #fff;
+  // 导航文字颜色
+  --g-header-menu-color: #fff;
+  // 导航鼠标悬浮文字颜色
+  --g-header-menu-hover-color: #fff;
+  // 导航鼠标悬浮背景色
+  --g-header-menu-hover-bg: #334067;
+  // 导航选中文字颜色
+  --g-header-menu-active-color: #fff;
+  // 导航选中背景色
+  --g-header-menu-active-bg: #334067;
+
+  /* ----- 主导航 ----- */
+  // 背景色
+  --g-main-sidebar-bg: #222b45;
+  // 菜单文字颜色
+  --g-main-sidebar-menu-color: #eee;
+  // 菜单鼠标悬浮文字颜色
+  --g-main-sidebar-menu-hover-color: #fff;
+  // 菜单鼠标悬浮背景色
+  --g-main-sidebar-menu-hover-bg: #334067;
+  // 菜单选中文字颜色
+  --g-main-sidebar-menu-active-color: #fff;
+  // 菜单选中背景色
+  --g-main-sidebar-menu-active-bg: #334067;
+
+  /* ----- 次导航 ----- */
+  // 背景色
+  --g-sub-sidebar-bg: #fff;
+  // 菜单背景色
+  --g-sub-sidebar-menu-bg: #e8e8e8;
+  // 菜单文字颜色
+  --g-sub-sidebar-menu-color: var(--el-text-color-primary);
+  // 菜单鼠标悬浮文字颜色
+  --g-sub-sidebar-menu-hover-color: var(--el-text-color-primary);
+  // 菜单鼠标悬浮背景色
+  --g-sub-sidebar-menu-hover-bg: #e1e1e1;
+  // 菜单选中文字颜色
+  --g-sub-sidebar-menu-active-color: #fff;
+  // 菜单选中背景色
+  --g-sub-sidebar-menu-active-bg: var(--el-color-primary);
+
+  /* ----- 顶栏 ----- */
+  --g-toolbar-bg: var(--el-bg-color);
+
+  /* ----- 进度条 ----- */
+  --g-nprogress-color: var(--el-color-primary);
+
+  /* ----- 暗黑模式 ----- */
+  &.dark {
+    --g-box-shadow-color: rgb(0 0 0 / 72%);
 
     /* ----- 应用 ----- */
     // 应用背景色
@@ -9,116 +71,54 @@
 
     /* ----- 顶部 ----- */
     // 背景色
-    --g-header-bg: #222b45;
+    --g-header-bg: var(--el-bg-color);
     // 文字颜色
     --g-header-color: #fff;
     // 导航文字颜色
-    --g-header-menu-color: #fff;
+    --g-header-menu-color: #ccc;
     // 导航鼠标悬浮文字颜色
     --g-header-menu-hover-color: #fff;
     // 导航鼠标悬浮背景色
-    --g-header-menu-hover-bg: #334067;
+    --g-header-menu-hover-bg: var(--el-color-primary-light-5);
     // 导航选中文字颜色
     --g-header-menu-active-color: #fff;
     // 导航选中背景色
-    --g-header-menu-active-bg: #334067;
+    --g-header-menu-active-bg: var(--el-color-primary-light-3);
 
     /* ----- 主导航 ----- */
     // 背景色
-    --g-main-sidebar-bg: #222b45;
+    --g-main-sidebar-bg: var(--el-bg-color);
     // 菜单文字颜色
-    --g-main-sidebar-menu-color: #eee;
+    --g-main-sidebar-menu-color: #ccc;
     // 菜单鼠标悬浮文字颜色
     --g-main-sidebar-menu-hover-color: #fff;
     // 菜单鼠标悬浮背景色
-    --g-main-sidebar-menu-hover-bg: #334067;
+    --g-main-sidebar-menu-hover-bg: var(--el-color-primary-light-5);
     // 菜单选中文字颜色
     --g-main-sidebar-menu-active-color: #fff;
     // 菜单选中背景色
-    --g-main-sidebar-menu-active-bg: #334067;
+    --g-main-sidebar-menu-active-bg: var(--el-color-primary-light-3);
 
     /* ----- 次导航 ----- */
     // 背景色
-    --g-sub-sidebar-bg: #fff;
+    --g-sub-sidebar-bg: var(--el-bg-color-page);
     // 菜单背景色
-    --g-sub-sidebar-menu-bg: #e8e8e8;
+    --g-sub-sidebar-menu-bg: var(--el-bg-color);
     // 菜单文字颜色
-    --g-sub-sidebar-menu-color: var(--el-text-color-primary);
+    --g-sub-sidebar-menu-color: var(--el-text-color-secondary);
     // 菜单鼠标悬浮文字颜色
     --g-sub-sidebar-menu-hover-color: var(--el-text-color-primary);
     // 菜单鼠标悬浮背景色
-    --g-sub-sidebar-menu-hover-bg: #e1e1e1;
+    --g-sub-sidebar-menu-hover-bg: var(--el-color-primary-light-5);
     // 菜单选中文字颜色
-    --g-sub-sidebar-menu-active-color: #fff;
+    --g-sub-sidebar-menu-active-color: var(--el-text-color-primary);
     // 菜单选中背景色
-    --g-sub-sidebar-menu-active-bg: var(--el-color-primary);
+    --g-sub-sidebar-menu-active-bg: var(--el-color-primary-light-3);
 
     /* ----- 顶栏 ----- */
     --g-toolbar-bg: var(--el-bg-color);
 
     /* ----- 进度条 ----- */
     --g-nprogress-color: var(--el-color-primary);
-
-    /* ----- 暗黑模式 ----- */
-    &.dark {
-        --g-box-shadow-color: rgb(0 0 0 / 72%);
-
-        /* ----- 应用 ----- */
-        // 应用背景色
-        --g-app-bg: var(--el-bg-color);
-        // 主区域背景色
-        --g-main-bg: var(--el-bg-color-page);
-
-        /* ----- 顶部 ----- */
-        // 背景色
-        --g-header-bg: var(--el-bg-color);
-        // 文字颜色
-        --g-header-color: #fff;
-        // 导航文字颜色
-        --g-header-menu-color: #ccc;
-        // 导航鼠标悬浮文字颜色
-        --g-header-menu-hover-color: #fff;
-        // 导航鼠标悬浮背景色
-        --g-header-menu-hover-bg: var(--el-color-primary-light-5);
-        // 导航选中文字颜色
-        --g-header-menu-active-color: #fff;
-        // 导航选中背景色
-        --g-header-menu-active-bg: var(--el-color-primary-light-3);
-
-        /* ----- 主导航 ----- */
-        // 背景色
-        --g-main-sidebar-bg: var(--el-bg-color);
-        // 菜单文字颜色
-        --g-main-sidebar-menu-color: #ccc;
-        // 菜单鼠标悬浮文字颜色
-        --g-main-sidebar-menu-hover-color: #fff;
-        // 菜单鼠标悬浮背景色
-        --g-main-sidebar-menu-hover-bg: var(--el-color-primary-light-5);
-        // 菜单选中文字颜色
-        --g-main-sidebar-menu-active-color: #fff;
-        // 菜单选中背景色
-        --g-main-sidebar-menu-active-bg: var(--el-color-primary-light-3);
-
-        /* ----- 次导航 ----- */
-        // 背景色
-        --g-sub-sidebar-bg: var(--el-bg-color-page);
-        // 菜单背景色
-        --g-sub-sidebar-menu-bg: var(--el-bg-color);
-        // 菜单文字颜色
-        --g-sub-sidebar-menu-color: var(--el-text-color-secondary);
-        // 菜单鼠标悬浮文字颜色
-        --g-sub-sidebar-menu-hover-color: var(--el-text-color-primary);
-        // 菜单鼠标悬浮背景色
-        --g-sub-sidebar-menu-hover-bg: var(--el-color-primary-light-5);
-        // 菜单选中文字颜色
-        --g-sub-sidebar-menu-active-color: var(--el-text-color-primary);
-        // 菜单选中背景色
-        --g-sub-sidebar-menu-active-bg: var(--el-color-primary-light-3);
-
-        /* ----- 顶栏 ----- */
-        --g-toolbar-bg: var(--el-bg-color);
-
-        /* ----- 进度条 ----- */
-        --g-nprogress-color: var(--el-color-primary);
-    }
+  }
 }
diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
new file mode 100644
index 00000000..5e30355b
--- /dev/null
+++ b/src/auto-imports.d.ts
@@ -0,0 +1,75 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const ElNotification: typeof import('element-plus/es')['ElNotification']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const createPinia: typeof import('pinia')['createPinia']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const effectScope: typeof import('vue')['effectScope']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useAuth: typeof import('./utils/composables/useAuth')['default']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentInstance: typeof import('./utils/composables/useCurrentInstance')['default']
+  const useMainPage: typeof import('./utils/composables/useMainPage')['default']
+  const useMenu: typeof import('./utils/composables/useMenu')['default']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
diff --git a/src/components.d.ts b/src/components.d.ts
new file mode 100644
index 00000000..d96655b3
--- /dev/null
+++ b/src/components.d.ts
@@ -0,0 +1,30 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    Auth: typeof import('./components/Auth/index.vue')['default']
+    AuthAll: typeof import('./components/AuthAll/index.vue')['default']
+    BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
+    Copyright: typeof import('./components/Copyright/index.vue')['default']
+    Editor: typeof import('./components/Editor/index.vue')['default']
+    FileUpload: typeof import('./components/FileUpload/index.vue')['default']
+    FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
+    ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
+    ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
+    ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
+    PageHeader: typeof import('./components/PageHeader/index.vue')['default']
+    PageMain: typeof import('./components/PageMain/index.vue')['default']
+    PcasCascader: typeof import('./components/PcasCascader/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SearchBar: typeof import('./components/SearchBar/index.vue')['default']
+    SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
+    SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
+    Trend: typeof import('./components/Trend/index.vue')['default']
+  }
+}
diff --git a/src/components/Auth/index.vue b/src/components/Auth/index.vue
index 9f475e72..a43fa74a 100644
--- a/src/components/Auth/index.vue
+++ b/src/components/Auth/index.vue
@@ -1,21 +1,16 @@
-<script setup name="Auth">
-import { useAuth } from '@/utils/composables'
-
-const props = defineProps({
-    value: {
-        type: [String, Array],
-        default: ''
-    }
-})
+<script lang="ts" setup name="Auth">
+const props = defineProps<{
+  value: string | string[]
+}>()
 
 function check() {
-    return useAuth().auth(props.value)
+  return useAuth().auth(props.value)
 }
 </script>
 
 <template>
-    <div>
-        <slot v-if="check()" />
-        <slot v-else name="no-auth" />
-    </div>
+  <div>
+    <slot v-if="check()" />
+    <slot v-else name="no-auth" />
+  </div>
 </template>
diff --git a/src/components/AuthAll/index.vue b/src/components/AuthAll/index.vue
index 49390e99..3c4178c8 100644
--- a/src/components/AuthAll/index.vue
+++ b/src/components/AuthAll/index.vue
@@ -1,21 +1,16 @@
-<script setup name="AuthAll">
-import { useAuth } from '@/utils/composables'
-
-const props = defineProps({
-    value: {
-        type: Array,
-        default: () => []
-    }
-})
+<script lang="ts" setup name="AuthAll">
+const props = defineProps<{
+  value: string[]
+}>()
 
 function check() {
-    return useAuth().authAll(props.value)
+  return useAuth().authAll(props.value)
 }
 </script>
 
 <template>
-    <div>
-        <slot v-if="check()" />
-        <slot v-else name="no-auth" />
-    </div>
+  <div>
+    <slot v-if="check()" />
+    <slot v-else name="no-auth" />
+  </div>
 </template>
diff --git a/src/components/BatchActionBar/index.vue b/src/components/BatchActionBar/index.vue
index 803ffdc1..1e0dc48a 100644
--- a/src/components/BatchActionBar/index.vue
+++ b/src/components/BatchActionBar/index.vue
@@ -1,73 +1,82 @@
-<script setup name="BatchActionBar">
+<script lang="ts" setup name="BatchActionBar">
 const props = defineProps({
-    data: {
-        type: Array,
-        default: () => []
-    },
-    selectionData: {
-        type: Array,
-        default: () => []
-    }
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  selectionData: {
+    type: Array,
+    default: () => [],
+  },
 })
 
-const emit = defineEmits(['check-all', 'check-null'])
+const emit = defineEmits(['checkAll', 'checkNull'])
 
 const checkAll = computed({
-    get: function() {
-        let flag = false
-        if (props.data.length != 0 && props.data.length == props.selectionData.length) {
-            flag = true
-        }
-        return flag
-    },
-    set: function(newVal) {
-        newVal ? emit('check-all') : emit('check-null')
-    }
+  get() {
+    let flag = false
+    if (props.data.length !== 0 && props.data.length === props.selectionData.length)
+      flag = true
+
+    return flag
+  },
+  set(newVal) {
+    newVal ? emit('checkAll') : emit('checkNull')
+  },
 })
 
 const isIndeterminate = computed(() => {
-    let flag = false
-    if (props.selectionData.length > 0 && props.selectionData.length < props.data.length) {
-        flag = true
-    }
-    return flag
+  let flag = false
+  if (props.selectionData.length > 0 && props.selectionData.length < props.data.length)
+    flag = true
+
+  return flag
 })
 </script>
 
 <template>
-    <div class="batch-action-bar">
-        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" :disabled="!data.length">当页全选</el-checkbox>
-        <div v-if="selectionData.length" class="tips">已选 {{ selectionData.length }} 项</div>
-        <el-form :disabled="!selectionData.length">
-            <slot />
-        </el-form>
+  <div class="batch-action-bar">
+    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" :disabled="!data.length">
+      当页全选
+    </el-checkbox>
+    <div v-if="selectionData.length" class="tips">
+      已选 {{ selectionData.length }} 项
     </div>
+    <el-form :disabled="!selectionData.length">
+      <slot />
+    </el-form>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .batch-action-bar {
-    display: flex;
-    align-items: center;
-    margin: 20px 0;
-    padding: 0 10px;
-    &:first-child {
-        margin-top: 0;
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+  padding: 0 10px;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  .el-checkbox {
+    margin-right: 20px;
+  }
+
+  .tips {
+    margin-right: 20px;
+    color: #909399;
+    font-size: 13px;
+  }
+
+  :deep(.el-form) {
+    > .el-button {
+      margin-right: 10px;
     }
-    .el-checkbox {
-        margin-right: 20px;
-    }
-    .tips {
-        margin-right: 20px;
-        color: #909399;
-        font-size: 13px;
-    }
-    :deep(.el-form) {
-        > .el-button {
-            margin-right: 10px;
-        }
-        > .el-button-group {
-            margin-right: 10px;
-        }
+
+    > .el-button-group {
+      margin-right: 10px;
     }
+  }
 }
 </style>
diff --git a/src/components/Copyright/index.vue b/src/components/Copyright/index.vue
index 25c7196a..e770b65c 100644
--- a/src/components/Copyright/index.vue
+++ b/src/components/Copyright/index.vue
@@ -1,44 +1,50 @@
-<script setup name="Copyright">
+<script lang="ts" setup name="Copyright">
 import useSettingsStore from '@/store/modules/settings'
+
+const route = useRoute()
 const settingsStore = useSettingsStore()
 </script>
 
 <template>
-    <footer class="copyright">
-        <span>Copyright</span>
-        <span class="icon">©</span>
-        <span v-if="settingsStore.copyright.dates">{{ settingsStore.copyright.dates }}</span>
-        <template v-if="settingsStore.copyright.company">
-            <a v-if="settingsStore.copyright.website" :href="settingsStore.copyright.website" target="_blank" rel="noopener">{{ settingsStore.copyright.company }}</a>
-            <span v-else>{{ settingsStore.copyright.company }}</span>
-        </template>
-        <a v-if="settingsStore.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">{{ settingsStore.copyright.beian }}</a>
-    </footer>
+  <footer v-if="route.meta.copyright ?? settingsStore.copyright.enable" class="copyright">
+    <span>Copyright</span>
+    <span class="icon">©</span>
+    <span v-if="settingsStore.copyright.dates">{{ settingsStore.copyright.dates }}</span>
+    <template v-if="settingsStore.copyright.company">
+      <a v-if="settingsStore.copyright.website" :href="settingsStore.copyright.website" target="_blank" rel="noopener">{{ settingsStore.copyright.company }}</a>
+      <span v-else>{{ settingsStore.copyright.company }}</span>
+    </template>
+    <a v-if="settingsStore.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">{{ settingsStore.copyright.beian }}</a>
+  </footer>
 </template>
 
 <style lang="scss" scoped>
 footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 40px 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 40px 0 20px;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+
+  span,
+  a {
+    padding: 0 5px;
+  }
+
+  a {
+    text-decoration: none;
     color: var(--el-text-color-secondary);
-    font-size: 14px;
-    span,
-    a {
-        padding: 0 5px;
-    }
-    a {
-        text-decoration: none;
-        color: var(--el-text-color-secondary);
-        transition: var(--el-transition-color);
-        &:hover {
-            color: var(--el-text-color-primary);
-        }
-    }
-    .icon {
-        padding: 0;
-        font-size: 18px;
+    transition: var(--el-transition-color);
+
+    &:hover {
+      color: var(--el-text-color-primary);
     }
+  }
+
+  .icon {
+    padding: 0;
+    font-size: 18px;
+  }
 }
 </style>
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index 09f2331c..2d96b9c5 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -1,4 +1,4 @@
-<script setup name="Editor">
+<script lang="ts" setup name="Editor">
 import tinymce from 'tinymce/tinymce'
 import TinymceEditor from '@tinymce/tinymce-vue'
 import 'tinymce/themes/silver/theme'
@@ -20,78 +20,78 @@ import 'tinymce/plugins/searchreplace'
 
 import useSettingsStore from '@/store/modules/settings'
 
-const settingsStore = useSettingsStore()
-
 const props = defineProps({
-    modelValue: {
-        type: String,
-        default: ''
-    },
-    setting: {
-        type: Object,
-        default: () => {}
-    },
-    disabled: {
-        type: Boolean,
-        default: false
-    }
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  setting: {
+    type: Object,
+    default: () => {},
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
 
+const settingsStore = useSettingsStore()
+
 const defaultSetting = ref({
-    language_url: 'tinymce/langs/zh-Hans.js',
-    language: 'zh-Hans',
-    skin_url: settingsStore.app.colorScheme === 'light' ? 'tinymce/skins/ui/oxide' : 'tinymce/skins/ui/oxide-dark',
-    content_css: settingsStore.app.colorScheme === 'light' ? 'tinymce/skins/content/default/content.min.css' : 'tinymce/skins/content/dark/content.min.css',
-    min_height: 250,
-    max_height: 600,
-    selector: 'textarea',
-    plugins: 'autolink autoresize fullscreen image insertdatetime link lists media preview table wordcount code searchreplace',
-    toolbar: 'undo redo | blocks | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | forecolor backcolor removeformat | link image media table insertdatetime searchreplace | preview code fullscreen',
-    branding: false,
-    menubar: false,
-    toolbar_mode: 'sliding',
-    insertdatetime_formats: [
-        '%Y年%m月%d日',
-        '%H点%M分%S秒',
-        '%Y-%m-%d',
-        '%H:%M:%S'
-    ],
-    // https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_upload_handler
-    images_upload_handler: blobInfo => new Promise(resolve => {
-        const img = `data:image/jpeg;base64,${blobInfo.base64()}`
-        resolve(img)
-    })
+  language_url: 'tinymce/langs/zh-Hans.js',
+  language: 'zh-Hans',
+  skin_url: settingsStore.app.colorScheme === 'light' ? 'tinymce/skins/ui/oxide' : 'tinymce/skins/ui/oxide-dark',
+  content_css: settingsStore.app.colorScheme === 'light' ? 'tinymce/skins/content/default/content.min.css' : 'tinymce/skins/content/dark/content.min.css',
+  min_height: 250,
+  max_height: 600,
+  selector: 'textarea',
+  plugins: 'autolink autoresize fullscreen image insertdatetime link lists media preview table wordcount code searchreplace',
+  toolbar: 'undo redo | blocks | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | forecolor backcolor removeformat | link image media table insertdatetime searchreplace | preview code fullscreen',
+  branding: false,
+  menubar: false,
+  toolbar_mode: 'sliding',
+  insertdatetime_formats: [
+    '%Y年%m月%d日',
+    '%H点%M分%S秒',
+    '%Y-%m-%d',
+    '%H:%M:%S',
+  ],
+  // https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_upload_handler
+  images_upload_handler: (blobInfo: any, progress: any) => new Promise((resolve, reject) => {
+    const img = `data:image/jpeg;base64,${blobInfo.base64()}`
+    resolve(img)
+  }),
 })
 
 const myValue = ref(props.modelValue)
 
 const completeSetting = computed(() => {
-    return Object.assign(defaultSetting.value, props.setting)
+  return Object.assign(defaultSetting.value, props.setting)
 })
 
-watch(() => myValue.value, newValue => {
-    emit('update:modelValue', newValue)
+watch(() => myValue.value, (newValue) => {
+  emit('update:modelValue', newValue)
 })
 
-watch(() => props.modelValue, newValue => {
-    myValue.value = newValue
+watch(() => props.modelValue, (newValue) => {
+  myValue.value = newValue
 })
 
 onMounted(() => {
-    tinymce.init({})
+  tinymce.init({})
 })
 </script>
 
 <template>
-    <div class="editor">
-        <TinymceEditor v-model="myValue" :init="completeSetting" :disabled="disabled" />
-    </div>
+  <div class="editor">
+    <TinymceEditor v-model="myValue" :init="completeSetting" :disabled="disabled" />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 :deep(.tox-tinymce) {
-    border-radius: 4px;
+  border-radius: 4px;
 }
 </style>
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index bee145b8..37a1db78 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -1,107 +1,117 @@
-<script setup name="FileUpload">
+<script lang="ts" setup name="FileUpload">
+import { UploadUserFile } from 'element-plus'
+import type { UploadProps } from 'element-plus'
+
 const props = defineProps({
-    action: {
-        type: String,
-        required: true
-    },
-    headers: {
-        type: Object,
-        default: () => {}
-    },
-    data: {
-        type: Object,
-        default: () => {}
-    },
-    name: {
-        type: String,
-        default: 'file'
-    },
-    size: {
-        type: Number,
-        default: 2
-    },
-    max: {
-        type: Number,
-        default: 3
-    },
-    files: {
-        type: Array,
-        default: () => []
-    },
-    notip: {
-        type: Boolean,
-        default: false
-    },
-    ext: {
-        type: Array,
-        default: () => ['zip', 'rar']
-    }
+  action: {
+    type: String,
+    required: true,
+  },
+  headers: {
+    type: Object,
+    default: () => {},
+  },
+  data: {
+    type: Object,
+    default: () => {},
+  },
+  name: {
+    type: String,
+    default: 'file',
+  },
+  size: {
+    type: Number,
+    default: 2,
+  },
+  max: {
+    type: Number,
+    default: 3,
+  },
+  files: {
+    type: Array,
+    default: () => [],
+  },
+  notip: {
+    type: Boolean,
+    default: false,
+  },
+  ext: {
+    type: Array,
+    default: () => ['zip', 'rar'],
+  },
 })
 
-const emit = defineEmits(['on-success'])
+const emit = defineEmits(['onSuccess'])
 
-function beforeUpload(file) {
-    const fileName = file.name.split('.')
-    const fileExt = fileName[fileName.length - 1]
-    const isTypeOk = props.ext.indexOf(fileExt) >= 0
-    const isSizeOk = file.size / 1024 / 1024 < props.size
-    if (!isTypeOk) {
-        ElMessage.error(`上传文件只支持 ${ props.ext.join(' / ') } 格式！`)
-    }
-    if (!isSizeOk) {
-        ElMessage.error(`上传文件大小不能超过 ${props.size}MB！`)
-    }
-    return isTypeOk && isSizeOk
+const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+  const fileName = file.name.split('.')
+  const fileExt = fileName.at(-1)
+  const isTypeOk = props.ext.includes(fileExt)
+  const isSizeOk = file.size / 1024 / 1024 < props.size
+  if (!isTypeOk)
+    ElMessage.error(`上传文件只支持 ${props.ext.join(' / ')} 格式！`)
+
+  if (!isSizeOk)
+    ElMessage.error(`上传文件大小不能超过 ${props.size}MB！`)
+
+  return isTypeOk && isSizeOk
 }
-function onExceed() {
-    ElMessage.warning('文件上传超过限制')
+
+const onExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('文件上传超过限制')
 }
-function onSuccess(res, file, fileList) {
-    emit('on-success', res, file, fileList)
+
+const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
+  emit('onSuccess', res, file, fileList)
 }
 </script>
 
 <template>
-    <el-upload
-        :headers="headers"
-        :action="action"
-        :data="data"
-        :name="name"
-        :before-upload="beforeUpload"
-        :on-exceed="onExceed"
-        :on-success="onSuccess"
-        :file-list="files"
-        :limit="max"
-        drag
-    >
-        <div class="slot">
-            <el-icon class="el-icon--upload">
-                <svg-icon name="ep:upload-filled" />
-            </el-icon>
-            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+  <el-upload
+    :headers="headers"
+    :action="action"
+    :data="data"
+    :name="name"
+    :before-upload="beforeUpload"
+    :on-exceed="onExceed"
+    :on-success="onSuccess"
+    :file-list="files as UploadUserFile[]"
+    :limit="max"
+    drag
+  >
+    <div class="slot">
+      <el-icon class="el-icon--upload">
+        <svg-icon name="ep:upload-filled" />
+      </el-icon>
+      <div class="el-upload__text">
+        将文件拖到此处，或<em>点击上传</em>
+      </div>
+    </div>
+    <template #tip>
+      <div v-if="!notip" class="el-upload__tip">
+        <div style="display: inline-block;">
+          <el-alert :title="`上传文件支持 ${ext.join(' / ')} 格式，单个文件大小不超过 ${size}MB，且文件数量不超过 ${max} 个`" type="info" show-icon :closable="false" />
         </div>
-        <template #tip>
-            <div v-if="!notip" class="el-upload__tip">
-                <div style="display: inline-block;">
-                    <el-alert :title="`上传文件支持 ${ ext.join(' / ') } 格式，单个文件大小不超过 ${ size }MB，且文件数量不超过 ${ max } 个`" type="info" show-icon :closable="false" />
-                </div>
-            </div>
-        </template>
-    </el-upload>
+      </div>
+    </template>
+  </el-upload>
 </template>
 
 <style lang="scss" scoped>
 :deep(.el-upload.is-drag) {
-    display: inline-block;
-    .el-upload-dragger {
-        padding: 0;
-    }
-    &.is-dragover {
-        border-width: 1px;
-    }
-    .slot {
-        width: 300px;
-        padding: 40px 0;
-    }
+  display: inline-block;
+
+  .el-upload-dragger {
+    padding: 0;
+  }
+
+  &.is-dragover {
+    border-width: 1px;
+  }
+
+  .slot {
+    width: 300px;
+    padding: 40px 0;
+  }
 }
 </style>
diff --git a/src/components/FixedActionBar/index.vue b/src/components/FixedActionBar/index.vue
index c4839659..86bd7eac 100644
--- a/src/components/FixedActionBar/index.vue
+++ b/src/components/FixedActionBar/index.vue
@@ -1,53 +1,49 @@
-<script setup name="FixedActionBar">
-const data = ref({
-    isBottom: true
-})
+<script lang="ts" setup name="FixedActionBar">
+const isBottom = ref(false)
 
 onMounted(() => {
-    onScroll()
-    window.addEventListener('scroll', onScroll)
+  onScroll()
+  window.addEventListener('scroll', onScroll)
 })
 
 onUnmounted(() => {
-    window.removeEventListener('scroll', onScroll)
+  window.removeEventListener('scroll', onScroll)
 })
 
 function onScroll() {
-    // 变量scrollTop是滚动条滚动时，滚动条上端距离顶部的距离
-    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-    // 变量windowHeight是可视区的高度
-    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
-    // 变量scrollHeight是滚动条的总高度（当前可滚动的页面的总高度）
-    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
-    // 滚动条到底部
-    if (Math.ceil(scrollTop + windowHeight) >= scrollHeight) {
-        data.value.isBottom = true
-    } else {
-        data.value.isBottom = false
-    }
+  // 变量scrollTop是滚动条滚动时，滚动条上端距离顶部的距离
+  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+  // 变量windowHeight是可视区的高度
+  const windowHeight = document.documentElement.clientHeight || document.body.clientHeight
+  // 变量scrollHeight是滚动条的总高度（当前可滚动的页面的总高度）
+  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
+  // 滚动条到底部
+  isBottom.value = Math.ceil(scrollTop + windowHeight) >= scrollHeight
 }
 </script>
 
 <template>
-    <div class="actionbar" :class="{'shadow': !data.isBottom}" data-fixed-calc-width>
-        <slot />
-    </div>
+  <div class="actionbar" :class="{ shadow: !isBottom }" data-fixed-calc-width>
+    <slot />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .actionbar {
-    z-index: 4;
-    bottom: 0;
-    padding: 20px;
-    text-align: center;
-    background-color: var(--g-app-bg);
-    box-shadow: 0 0 1px 0 var(--g-box-shadow-color);
-    transition: all 0.3s, var(--el-transition-box-shadow);
-    &.shadow {
-        box-shadow: 0 -10px 10px -10px var(--g-box-shadow-color);
-    }
+  z-index: 4;
+  bottom: 0;
+  padding: 20px;
+  text-align: center;
+  background-color: var(--g-app-bg);
+  box-shadow: 0 0 1px 0 var(--g-box-shadow-color);
+  transition: all 0.3s, var(--el-transition-box-shadow);
+
+  &.shadow {
+    box-shadow: 0 -10px 10px -10px var(--g-box-shadow-color);
+  }
 }
+
 :deep(.el-form-item) {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 </style>
diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index 86b1c05c..cd6fc591 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -1,61 +1,64 @@
-<script setup name="ImagePreview">
+<script lang="ts" setup name="ImagePreview">
 const props = defineProps({
-    src: {
-        type: String,
-        required: true
-    },
-    width: {
-        type: [Number, String],
-        default: ''
-    },
-    height: {
-        type: [Number, String],
-        default: ''
-    }
+  src: {
+    type: String,
+    required: true,
+  },
+  width: {
+    type: [Number, String],
+    default: '',
+  },
+  height: {
+    type: [Number, String],
+    default: '',
+  },
 })
 
 const realWidth = computed(() => {
-    return typeof props.width == 'string' ? props.width : `${props.width}px`
+  return typeof props.width === 'string' ? props.width : `${props.width}px`
 })
 
 const realHeight = computed(() => {
-    return typeof props.height == 'string' ? props.height : `${props.height}px`
+  return typeof props.height === 'string' ? props.height : `${props.height}px`
 })
 </script>
 
 <template>
-    <el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]">
-        <template #error>
-            <div class="image-slot">
-                <el-icon>
-                    <svg-icon name="image-load-fail" />
-                </el-icon>
-            </div>
-        </template>
-    </el-image>
+  <el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]">
+    <template #error>
+      <div class="image-slot">
+        <el-icon>
+          <svg-icon name="image-load-fail" />
+        </el-icon>
+      </div>
+    </template>
+  </el-image>
 </template>
 
 <style lang="scss" scoped>
 .el-image {
-    border-radius: 5px;
-    background-color: var(--el-fill-color);
-    box-shadow: var(--el-box-shadow-light);
-    transition: background-color 0.3s, var(--el-transition-box-shadow);
-    :deep(.el-image__inner) {
-        transition: all 0.3s;
-        cursor: pointer;
-        &:hover {
-            transform: scale(1.2);
-        }
-    }
-    :deep(.image-slot) {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        color: #909399;
-        font-size: 30px;
+  border-radius: 5px;
+  background-color: var(--el-fill-color);
+  box-shadow: var(--el-box-shadow-light);
+  transition: background-color 0.3s, var(--el-transition-box-shadow);
+
+  :deep(.el-image__inner) {
+    transition: all 0.3s;
+    cursor: pointer;
+
+    &:hover {
+      transform: scale(1.2);
     }
+  }
+
+  :deep(.image-slot) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: #909399;
+    font-size: 30px;
+  }
 }
 </style>
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index e3214837..ac369cbe 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -1,242 +1,263 @@
-<script setup name="ImageUpload">
+<script lang="ts" setup name="ImageUpload">
+import type { UploadProps } from 'element-plus'
+
 const props = defineProps({
-    action: {
-        type: String,
-        required: true
-    },
-    headers: {
-        type: Object,
-        default: () => {}
-    },
-    data: {
-        type: Object,
-        default: () => {}
-    },
-    name: {
-        type: String,
-        default: 'file'
-    },
-    url: {
-        type: String,
-        default: ''
-    },
-    size: {
-        type: Number,
-        default: 2
-    },
-    width: {
-        type: Number,
-        default: 150
-    },
-    height: {
-        type: Number,
-        default: 150
-    },
-    placeholder: {
-        type: String,
-        default: ''
-    },
-    notip: {
-        type: Boolean,
-        default: false
-    },
-    ext: {
-        type: Array,
-        default: () => ['jpg', 'png', 'gif', 'bmp']
-    }
+  action: {
+    type: String,
+    required: true,
+  },
+  headers: {
+    type: Object,
+    default: () => {},
+  },
+  data: {
+    type: Object,
+    default: () => {},
+  },
+  name: {
+    type: String,
+    default: 'file',
+  },
+  url: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: Number,
+    default: 2,
+  },
+  width: {
+    type: Number,
+    default: 150,
+  },
+  height: {
+    type: Number,
+    default: 150,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  notip: {
+    type: Boolean,
+    default: false,
+  },
+  ext: {
+    type: Array,
+    default: () => ['jpg', 'png', 'gif', 'bmp'],
+  },
 })
 
-const emit = defineEmits(['update:url', 'on-success'])
+const emit = defineEmits(['update:url', 'onSuccess'])
 
 const uploadData = ref({
-    imageViewerVisible: false,
-    progress: {
-        preview: '',
-        percent: 0
-    }
+  imageViewerVisible: false,
+  progress: {
+    preview: '',
+    percent: 0,
+  },
 })
 
 // 预览
 function preview() {
-    uploadData.value.imageViewerVisible = true
+  uploadData.value.imageViewerVisible = true
 }
 // 关闭预览
 function previewClose() {
-    uploadData.value.imageViewerVisible = false
+  uploadData.value.imageViewerVisible = false
 }
 // 移除
 function remove() {
-    emit('update:url', '')
+  emit('update:url', '')
 }
-function beforeUpload(file) {
-    const fileName = file.name.split('.')
-    const fileExt = fileName[fileName.length - 1]
-    const isTypeOk = props.ext.indexOf(fileExt) >= 0
-    const isSizeOk = file.size / 1024 / 1024 < props.size
-    if (!isTypeOk) {
-        ElMessage.error(`上传图片只支持 ${ props.ext.join(' / ') } 格式！`)
-    }
-    if (!isSizeOk) {
-        ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`)
-    }
-    if (isTypeOk && isSizeOk) {
-        uploadData.value.progress.preview = URL.createObjectURL(file)
-    }
-    return isTypeOk && isSizeOk
+const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+  const fileName = file.name.split('.')
+  const fileExt = fileName.at(-1)
+  const isTypeOk = props.ext.includes(fileExt)
+  const isSizeOk = file.size / 1024 / 1024 < props.size
+  if (!isTypeOk)
+    ElMessage.error(`上传图片只支持 ${props.ext.join(' / ')} 格式！`)
+
+  if (!isSizeOk)
+    ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`)
+
+  if (isTypeOk && isSizeOk)
+    uploadData.value.progress.preview = URL.createObjectURL(file)
+
+  return isTypeOk && isSizeOk
 }
-function onProgress(file) {
-    uploadData.value.progress.percent = ~~file.percent
+const onProgress: UploadProps['onProgress'] = (file) => {
+  uploadData.value.progress.percent = ~~file.percent
 }
-function onSuccess(res) {
-    uploadData.value.progress.preview = ''
-    uploadData.value.progress.percent = 0
-    emit('on-success', res)
+const onSuccess: UploadProps['onSuccess'] = (res) => {
+  uploadData.value.progress.preview = ''
+  uploadData.value.progress.percent = 0
+  emit('onSuccess', res)
 }
 </script>
 
 <template>
-    <div class="upload-container">
-        <el-upload
-            :show-file-list="false"
-            :headers="headers"
-            :action="action"
-            :data="data"
-            :name="name"
-            :before-upload="beforeUpload"
-            :on-progress="onProgress"
-            :on-success="onSuccess"
-            drag
-            class="image-upload"
-        >
-            <el-image v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
-                <template #error>
-                    <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-                        <el-icon>
-                            <svg-icon name="ep:plus" />
-                        </el-icon>
-                    </div>
-                </template>
-            </el-image>
-            <div v-else class="image">
-                <el-image :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-                <div class="mask">
-                    <div class="actions">
-                        <span title="预览" @click.stop="preview">
-                            <el-icon>
-                                <svg-icon name="ep:zoom-in" />
-                            </el-icon>
-                        </span>
-                        <span title="移除" @click.stop="remove">
-                            <el-icon>
-                                <svg-icon name="ep:delete" />
-                            </el-icon>
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div v-show="url === '' && uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
-                <el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-                <el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
-            </div>
-        </el-upload>
-        <div v-if="!notip" class="el-upload__tip">
-            <div style="display: inline-block;">
-                <el-alert :title="`上传图片支持 ${ ext.join(' / ') } 格式，且图片大小不超过 ${ size }MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
-            </div>
+  <div class="upload-container">
+    <el-upload
+      :show-file-list="false"
+      :headers="headers"
+      :action="action"
+      :data="data"
+      :name="name"
+      :before-upload="beforeUpload"
+      :on-progress="onProgress"
+      :on-success="onSuccess"
+      drag
+      class="image-upload"
+    >
+      <el-image v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
+        <template #error>
+          <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
+            <el-icon>
+              <svg-icon name="ep:plus" />
+            </el-icon>
+          </div>
+        </template>
+      </el-image>
+      <div v-else class="image">
+        <el-image :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
+        <div class="mask">
+          <div class="actions">
+            <span title="预览" @click.stop="preview">
+              <el-icon>
+                <svg-icon name="ep:zoom-in" />
+              </el-icon>
+            </span>
+            <span title="移除" @click.stop="remove">
+              <el-icon>
+                <svg-icon name="ep:delete" />
+              </el-icon>
+            </span>
+          </div>
         </div>
-        <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="[url]" @close="previewClose" />
+      </div>
+      <div v-show="url === '' && uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
+        <el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
+        <el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
+      </div>
+    </el-upload>
+    <div v-if="!notip" class="el-upload__tip">
+      <div style="display: inline-block;">
+        <el-alert :title="`上传图片支持 ${ext.join(' / ')} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
+      </div>
     </div>
+    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="[url]" @close="previewClose" />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .upload-container {
-    line-height: initial;
+  line-height: initial;
 }
+
 .el-image {
-    display: block;
+  display: block;
 }
+
 .image {
-    position: relative;
-    border-radius: 6px;
-    overflow: hidden;
-    .mask {
-        opacity: 0;
+  position: relative;
+  border-radius: 6px;
+  overflow: hidden;
+
+  .mask {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--el-overlay-color-lighter);
+    transition: opacity 0.3s;
+
+    .actions {
+      width: 100px;
+      height: 100px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+
+      @include position-center(xy);
+
+      span {
+        width: 50%;
+        text-align: center;
+        cursor: pointer;
+        color: var(--el-color-white);
+        transition: color 0.1s, transform 0.1s;
+
+        &:hover {
+          transform: scale(1.5);
+        }
+
+        .el-icon {
+          font-size: 24px;
+        }
+      }
+    }
+  }
+
+  &:hover .mask {
+    opacity: 1;
+  }
+}
+
+.image-upload {
+  display: inline-block;
+  vertical-align: top;
+}
+
+:deep(.el-upload) {
+  .el-upload-dragger {
+    display: inline-block;
+    padding: 0;
+
+    &.is-dragover {
+      border-width: 1px;
+    }
+
+    .image-slot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      color: var(--el-text-color-placeholder);
+      background-color: transparent;
+
+      i {
+        font-size: 30px;
+      }
+    }
+
+    .progress {
+      position: absolute;
+      top: 0;
+
+      &::after {
+        content: "";
         position: absolute;
-        top: 0;
         width: 100%;
         height: 100%;
+        left: 0;
+        top: 0;
         background-color: var(--el-overlay-color-lighter);
-        transition: opacity 0.3s;
-        .actions {
-            width: 100px;
-            height: 100px;
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: center;
-            @include position-center(xy);
-            span {
-                width: 50%;
-                text-align: center;
-                cursor: pointer;
-                color: var(--el-color-white);
-                transition: color 0.1s, transform 0.1s;
-                &:hover {
-                    transform: scale(1.5);
-                }
-                .el-icon {
-                    font-size: 24px;
-                }
-            }
-        }
-    }
-    &:hover .mask {
-        opacity: 1;
-    }
-}
-.image-upload {
-    display: inline-block;
-    vertical-align: top;
-}
-:deep(.el-upload) {
-    .el-upload-dragger {
-        display: inline-block;
-        padding: 0;
-        &.is-dragover {
-            border-width: 1px;
-        }
-        .image-slot {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            height: 100%;
-            color: var(--el-text-color-placeholder);
-            background-color: transparent;
-            i {
-                font-size: 30px;
-            }
-        }
-        .progress {
-            position: absolute;
-            top: 0;
-            &::after {
-                content: "";
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                background-color: var(--el-overlay-color-lighter);
-            }
-            .el-progress {
-                z-index: 1;
-                @include position-center(xy);
-                .el-progress__text {
-                    color: var(--el-text-color-placeholder);
-                }
-            }
+      }
+
+      .el-progress {
+        z-index: 1;
+
+        @include position-center(xy);
+
+        .el-progress__text {
+          color: var(--el-text-color-placeholder);
         }
+      }
     }
+  }
 }
 </style>
diff --git a/src/components/ImagesUpload/index.vue b/src/components/ImagesUpload/index.vue
index 7696c251..5e765389 100644
--- a/src/components/ImagesUpload/index.vue
+++ b/src/components/ImagesUpload/index.vue
@@ -1,275 +1,298 @@
-<script setup name="ImagesUpload">
+<script lang="ts" setup name="ImagesUpload">
+import type { UploadProps } from 'element-plus'
+
 const props = defineProps({
-    action: {
-        type: String,
-        required: true
-    },
-    headers: {
-        type: Object,
-        default: () => {}
-    },
-    data: {
-        type: Object,
-        default: () => {}
-    },
-    name: {
-        type: String,
-        default: 'file'
-    },
-    url: {
-        type: Array,
-        default: () => []
-    },
-    max: {
-        type: Number,
-        default: 3
-    },
-    size: {
-        type: Number,
-        default: 2
-    },
-    width: {
-        type: Number,
-        default: 150
-    },
-    height: {
-        type: Number,
-        default: 150
-    },
-    placeholder: {
-        type: String,
-        default: ''
-    },
-    notip: {
-        type: Boolean,
-        default: false
-    },
-    ext: {
-        type: Array,
-        default: () => ['jpg', 'png', 'gif', 'bmp']
-    }
+  action: {
+    type: String,
+    required: true,
+  },
+  headers: {
+    type: Object,
+    default: () => {},
+  },
+  data: {
+    type: Object,
+    default: () => {},
+  },
+  name: {
+    type: String,
+    default: 'file',
+  },
+  url: {
+    type: Array,
+    default: () => [],
+  },
+  max: {
+    type: Number,
+    default: 3,
+  },
+  size: {
+    type: Number,
+    default: 2,
+  },
+  width: {
+    type: Number,
+    default: 150,
+  },
+  height: {
+    type: Number,
+    default: 150,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  notip: {
+    type: Boolean,
+    default: false,
+  },
+  ext: {
+    type: Array,
+    default: () => ['jpg', 'png', 'gif', 'bmp'],
+  },
 })
 
-const emit = defineEmits(['update:url', 'on-success'])
+const emit = defineEmits(['update:url', 'onSuccess'])
 
 const uploadData = ref({
-    dialogImageIndex: 0,
-    imageViewerVisible: false,
-    progress: {
-        preview: '',
-        percent: 0
-    }
+  dialogImageIndex: 0,
+  imageViewerVisible: false,
+  progress: {
+    preview: '',
+    percent: 0,
+  },
 })
 
 // 预览
-function preview(index) {
-    uploadData.value.dialogImageIndex = index
-    uploadData.value.imageViewerVisible = true
+function preview(index: number) {
+  uploadData.value.dialogImageIndex = index
+  uploadData.value.imageViewerVisible = true
 }
 // 关闭预览
 function previewClose() {
-    uploadData.value.imageViewerVisible = false
+  uploadData.value.imageViewerVisible = false
 }
 // 移除
-function remove(index) {
-    let url = props.url
-    url.splice(index, 1)
-    emit('update:url', url)
+function remove(index: number) {
+  const url = props.url
+  url.splice(index, 1)
+  emit('update:url', url)
 }
 // 移动
-function move(index, type) {
-    let url = props.url
-    if (type == 'left' && index != 0) {
-        url[index] = url.splice(index - 1, 1, url[index])[0]
-    }
-    if (type == 'right' && index != url.length - 1) {
-        url[index] = url.splice(index + 1, 1, url[index])[0]
-    }
-    emit('update:url', url)
+function move(index: number, type: 'left' | 'right') {
+  const url = props.url
+  if (type === 'left' && index !== 0)
+    url[index] = url.splice(index - 1, 1, url[index])[0]
+
+  if (type === 'right' && index !== url.length - 1)
+    url[index] = url.splice(index + 1, 1, url[index])[0]
+
+  emit('update:url', url)
 }
-function beforeUpload(file) {
-    const fileName = file.name.split('.')
-    const fileExt = fileName[fileName.length - 1]
-    const isTypeOk = props.ext.indexOf(fileExt) >= 0
-    const isSizeOk = file.size / 1024 / 1024 < props.size
-    if (!isTypeOk) {
-        ElMessage.error(`上传图片只支持 ${ props.ext.join(' / ') } 格式！`)
-    }
-    if (!isSizeOk) {
-        ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`)
-    }
-    if (isTypeOk && isSizeOk) {
-        uploadData.value.progress.preview = URL.createObjectURL(file)
-    }
-    return isTypeOk && isSizeOk
+
+const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+  const fileName = file.name.split('.')
+  const fileExt = fileName.at(-1)
+  const isTypeOk = props.ext.includes(fileExt)
+  const isSizeOk = file.size / 1024 / 1024 < props.size
+  if (!isTypeOk)
+    ElMessage.error(`上传图片只支持 ${props.ext.join(' / ')} 格式！`)
+
+  if (!isSizeOk)
+    ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`)
+
+  if (isTypeOk && isSizeOk)
+    uploadData.value.progress.preview = URL.createObjectURL(file)
+
+  return isTypeOk && isSizeOk
 }
-function onProgress(file) {
-    uploadData.value.progress.percent = ~~file.percent
+const onProgress: UploadProps['onProgress'] = (file) => {
+  uploadData.value.progress.percent = ~~file.percent
 }
-function onSuccess(res) {
-    uploadData.value.progress.preview = ''
-    uploadData.value.progress.percent = 0
-    emit('on-success', res)
+const onSuccess: UploadProps['onSuccess'] = (res) => {
+  uploadData.value.progress.preview = ''
+  uploadData.value.progress.percent = 0
+  emit('onSuccess', res)
 }
 </script>
 
 <template>
-    <div class="upload-container">
-        <div v-for="(item, index) in url" :key="index" class="images">
-            <el-image v-if="index < max" :src="item" :style="`width:${width}px;height:${height}px;`" fit="cover" />
-            <div class="mask">
-                <div class="actions">
-                    <span title="预览" @click="preview(index)">
-                        <el-icon>
-                            <svg-icon name="ep:zoom-in" />
-                        </el-icon>
-                    </span>
-                    <span title="移除" @click="remove(index)">
-                        <el-icon>
-                            <svg-icon name="ep:delete" />
-                        </el-icon>
-                    </span>
-                    <span v-show="url.length > 1" title="左移" :class="{'disabled': index == 0}" @click="move(index, 'left')">
-                        <el-icon>
-                            <svg-icon name="ep:back" />
-                        </el-icon>
-                    </span>
-                    <span v-show="url.length > 1" title="右移" :class="{'disabled': index == url.length - 1}" @click="move(index, 'right')">
-                        <el-icon>
-                            <svg-icon name="ep:right" />
-                        </el-icon>
-                    </span>
-                </div>
-            </div>
+  <div class="upload-container">
+    <div v-for="(item, index) in (url as string[])" :key="index" class="images">
+      <el-image v-if="index < max" :src="item" :style="`width:${width}px;height:${height}px;`" fit="cover" />
+      <div class="mask">
+        <div class="actions">
+          <span title="预览" @click="preview(index)">
+            <el-icon>
+              <svg-icon name="ep:zoom-in" />
+            </el-icon>
+          </span>
+          <span title="移除" @click="remove(index)">
+            <el-icon>
+              <svg-icon name="ep:delete" />
+            </el-icon>
+          </span>
+          <span v-show="url.length > 1" title="左移" :class="{ disabled: index === 0 }" @click="move(index, 'left')">
+            <el-icon>
+              <svg-icon name="ep:back" />
+            </el-icon>
+          </span>
+          <span v-show="url.length > 1" title="右移" :class="{ disabled: index === url.length - 1 }" @click="move(index, 'right')">
+            <el-icon>
+              <svg-icon name="ep:right" />
+            </el-icon>
+          </span>
         </div>
-        <el-upload
-            v-show="url.length < max"
-            :show-file-list="false"
-            :headers="headers"
-            :action="action"
-            :data="data"
-            :name="name"
-            :before-upload="beforeUpload"
-            :on-progress="onProgress"
-            :on-success="onSuccess"
-            drag
-            class="images-upload"
-        >
-            <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-                <el-icon>
-                    <svg-icon name="ep:plus" />
-                </el-icon>
-            </div>
-            <div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
-                <el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-                <el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
-            </div>
-        </el-upload>
-        <div v-if="!notip" class="el-upload__tip">
-            <div style="display: inline-block;">
-                <el-alert :title="`上传图片支持 ${ ext.join(' / ') } 格式，单张图片大小不超过 ${ size }MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${ max } 张`" type="info" show-icon :closable="false" />
-            </div>
-        </div>
-        <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="url" :initial-index="uploadData.dialogImageIndex" @close="previewClose" />
+      </div>
     </div>
+    <el-upload
+      v-show="url.length < max"
+      :show-file-list="false"
+      :headers="headers"
+      :action="action"
+      :data="data"
+      :name="name"
+      :before-upload="beforeUpload"
+      :on-progress="onProgress"
+      :on-success="onSuccess"
+      drag
+      class="images-upload"
+    >
+      <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
+        <el-icon>
+          <svg-icon name="ep:plus" />
+        </el-icon>
+      </div>
+      <div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
+        <el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
+        <el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
+      </div>
+    </el-upload>
+    <div v-if="!notip" class="el-upload__tip">
+      <div style="display: inline-block;">
+        <el-alert :title="`上传图片支持 ${ext.join(' / ')} 格式，单张图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${max} 张`" type="info" show-icon :closable="false" />
+      </div>
+    </div>
+    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" @close="previewClose" />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .upload-container {
-    line-height: initial;
+  line-height: initial;
 }
+
 .el-image {
-    display: block;
+  display: block;
 }
+
 .images {
-    position: relative;
+  position: relative;
+  display: inline-block;
+  margin-right: 10px;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  overflow: hidden;
+
+  .mask {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--el-overlay-color-lighter);
+    transition: opacity 0.3s;
+
+    .actions {
+      width: 100px;
+      height: 100px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+
+      @include position-center(xy);
+
+      span {
+        width: 50%;
+        text-align: center;
+        cursor: pointer;
+        color: var(--el-color-white);
+        transition: color 0.1s, transform 0.1s;
+
+        &.disabled {
+          color: var(--el-text-color-disabled);
+          cursor: not-allowed;
+        }
+
+        &:hover:not(.disabled) {
+          transform: scale(1.5);
+        }
+
+        .el-icon {
+          font-size: 24px;
+        }
+      }
+    }
+  }
+
+  &:hover .mask {
+    opacity: 1;
+  }
+}
+
+.images-upload {
+  display: inline-block;
+  vertical-align: top;
+}
+
+:deep(.el-upload) {
+  .el-upload-dragger {
     display: inline-block;
-    margin-right: 10px;
-    border: 1px dashed var(--el-border-color);
-    border-radius: 6px;
-    overflow: hidden;
-    .mask {
-        opacity: 0;
+    padding: 0;
+
+    &.is-dragover {
+      border-width: 1px;
+    }
+
+    .image-slot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      color: var(--el-text-color-placeholder);
+      background-color: transparent;
+
+      i {
+        font-size: 30px;
+      }
+    }
+
+    .progress {
+      position: absolute;
+      top: 0;
+
+      &::after {
+        content: "";
         position: absolute;
-        top: 0;
         width: 100%;
         height: 100%;
+        left: 0;
+        top: 0;
         background-color: var(--el-overlay-color-lighter);
-        transition: opacity 0.3s;
-        .actions {
-            width: 100px;
-            height: 100px;
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: center;
-            @include position-center(xy);
-            span {
-                width: 50%;
-                text-align: center;
-                cursor: pointer;
-                color: var(--el-color-white);
-                transition: color 0.1s, transform 0.1s;
-                &.disabled {
-                    color: var(--el-text-color-disabled);
-                    cursor: not-allowed;
-                }
-                &:hover:not(.disabled) {
-                    transform: scale(1.5);
-                }
-                .el-icon {
-                    font-size: 24px;
-                }
-            }
-        }
-    }
-    &:hover .mask {
-        opacity: 1;
-    }
-}
-.images-upload {
-    display: inline-block;
-    vertical-align: top;
-}
-:deep(.el-upload) {
-    .el-upload-dragger {
-        display: inline-block;
-        padding: 0;
-        &.is-dragover {
-            border-width: 1px;
-        }
-        .image-slot {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            height: 100%;
-            color: var(--el-text-color-placeholder);
-            background-color: transparent;
-            i {
-                font-size: 30px;
-            }
-        }
-        .progress {
-            position: absolute;
-            top: 0;
-            &::after {
-                content: "";
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                background-color: var(--el-overlay-color-lighter);
-            }
-            .el-progress {
-                z-index: 1;
-                @include position-center(xy);
-                .el-progress__text {
-                    color: var(--el-text-color-placeholder);
-                }
-            }
+      }
+
+      .el-progress {
+        z-index: 1;
+
+        @include position-center(xy);
+
+        .el-progress__text {
+          color: var(--el-text-color-placeholder);
         }
+      }
     }
+  }
 }
 </style>
diff --git a/src/components/PageHeader/index.vue b/src/components/PageHeader/index.vue
index 52955afb..3dc41f39 100644
--- a/src/components/PageHeader/index.vue
+++ b/src/components/PageHeader/index.vue
@@ -1,59 +1,68 @@
-<script setup name="PageHeader">
+<script lang="ts" setup name="PageHeader">
 defineProps({
-    title: {
-        type: String,
-        required: true
-    },
-    content: {
-        type: String,
-        default: ''
-    }
+  title: {
+    type: String,
+    required: true,
+  },
+  content: {
+    type: String,
+    default: '',
+  },
 })
 </script>
 
 <template>
-    <div class="header">
-        <div class="main">
-            <div class="title">{{ title }}</div>
-            <div class="content">
-                <slot name="content">{{ content }}</slot>
-            </div>
-        </div>
-        <div class="sub">
-            <slot />
-        </div>
+  <div class="header">
+    <div class="main">
+      <div class="title">
+        {{ title }}
+      </div>
+      <div class="content">
+        <slot name="content">
+          {{ content }}
+        </slot>
+      </div>
     </div>
+    <div class="sub">
+      <slot />
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 20px;
-    padding: 16px 20px;
-    background-color: var(--g-app-bg);
-    transition: background-color 0.3s;
-    .main {
-        flex: 1;
-        margin-right: 20px;
-        .title {
-            font-size: 22px;
-            color: var(--el-text-color-primary);
-            transition: var(--el-transition-color);
-        }
-        .content {
-            margin-top: 10px;
-            font-size: 14px;
-            color: var(--el-text-color-secondary);
-            transition: var(--el-transition-color);
-            &:empty {
-                display: none;
-            }
-        }
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  padding: 16px 20px;
+  background-color: var(--g-app-bg);
+  transition: background-color 0.3s;
+
+  .main {
+    flex: 1;
+    margin-right: 20px;
+
+    .title {
+      font-size: 22px;
+      color: var(--el-text-color-primary);
+      transition: var(--el-transition-color);
     }
-    .sub {
-        flex: none;
+
+    .content {
+      margin-top: 10px;
+      font-size: 14px;
+      color: var(--el-text-color-secondary);
+      transition: var(--el-transition-color);
+
+      &:empty {
+        display: none;
+      }
     }
+  }
+
+  .sub {
+    flex: none;
+  }
 }
 </style>
diff --git a/src/components/PageMain/index.vue b/src/components/PageMain/index.vue
index 84a24091..f325bc12 100644
--- a/src/components/PageMain/index.vue
+++ b/src/components/PageMain/index.vue
@@ -1,84 +1,89 @@
-<script setup name="PageMain">
+<script lang="ts" setup name="PageMain">
 const props = defineProps({
-    title: {
-        type: String,
-        default: ''
-    },
-    collaspe: {
-        type: Boolean,
-        default: false
-    },
-    height: {
-        type: String,
-        default: ''
-    }
+  title: {
+    type: String,
+    default: '',
+  },
+  collaspe: {
+    type: Boolean,
+    default: false,
+  },
+  height: {
+    type: String,
+    default: '',
+  },
 })
 
 const titleSlot = !!useSlots().title
 
 const collaspeData = ref(props.collaspe)
 function unCollaspe() {
-    collaspeData.value = false
+  collaspeData.value = false
 }
 </script>
 
 <template>
-    <div
-        :class="{
-            'page-main': true,
-            'is-collaspe': collaspeData
-        }" :style="{
-            'height': collaspeData ? height : ''
-        }"
-    >
-        <div v-if="titleSlot || title" class="title-container">
-            <slot v-if="titleSlot" name="title" />
-            <template v-else>{{ title }}</template>
-        </div>
-        <slot />
-        <div v-if="collaspeData" class="collaspe" title="展开" @click="unCollaspe">
-            <el-icon>
-                <svg-icon name="ep:arrow-down" />
-            </el-icon>
-        </div>
+  <div
+    class="page-main" :class="{
+      'is-collaspe': collaspeData,
+    }" :style="{
+      height: collaspeData ? height : '',
+    }"
+  >
+    <div v-if="titleSlot || title" class="title-container">
+      <slot v-if="titleSlot" name="title" />
+      <template v-else>
+        {{ title }}
+      </template>
     </div>
+    <slot />
+    <div v-if="collaspeData" class="collaspe" title="展开" @click="unCollaspe">
+      <el-icon>
+        <svg-icon name="ep:arrow-down" />
+      </el-icon>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .page-main {
-    position: relative;
-    margin: 20px;
-    padding: 20px;
-    background-color: var(--g-app-bg);
-    transition: background-color 0.3s;
-    &.is-collaspe {
-        overflow: hidden;
-        .collaspe {
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            width: 100%;
-            padding: 40px 0 10px;
-            text-align: center;
-            font-size: 24px;
-            color: var(--el-text-color-primary);
-            text-shadow: 0 0 1px var(--el-text-color-primary);
-            background: linear-gradient(to bottom, transparent, var(--g-app-bg));
-            transition: background 0.3s, var(--el-transition-color);
-            cursor: pointer;
-            &:hover {
-                color: var(--el-text-color-secondary);
-            }
-        }
-    }
-    .title-container {
-        width: calc(100% + 40px);
-        padding: 14px 20px;
-        margin-left: -20px;
-        margin-top: -20px;
-        margin-bottom: 20px;
-        border-bottom: 1px solid var(--el-border-color-lighter);
-        transition: var(--el-transition-border);
+  position: relative;
+  margin: 20px;
+  padding: 20px;
+  background-color: var(--g-app-bg);
+  transition: background-color 0.3s;
+
+  &.is-collaspe {
+    overflow: hidden;
+
+    .collaspe {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      padding: 40px 0 10px;
+      text-align: center;
+      font-size: 24px;
+      color: var(--el-text-color-primary);
+      text-shadow: 0 0 1px var(--el-text-color-primary);
+      background: linear-gradient(to bottom, transparent, var(--g-app-bg));
+      transition: background 0.3s, var(--el-transition-color);
+      cursor: pointer;
+
+      &:hover {
+        color: var(--el-text-color-secondary);
+      }
     }
+  }
+
+  .title-container {
+    width: calc(100% + 40px);
+    padding: 14px 20px;
+    margin-left: -20px;
+    margin-top: -20px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    transition: var(--el-transition-border);
+  }
 }
 </style>
diff --git a/src/components/PcasCascader/index.vue b/src/components/PcasCascader/index.vue
index d07e3f12..69029488 100644
--- a/src/components/PcasCascader/index.vue
+++ b/src/components/PcasCascader/index.vue
@@ -1,131 +1,137 @@
-<script setup name="PcasCascader">
+<script lang="ts" setup name="PcasCascader">
+// 行政区划数据来源于 https://github.com/modood/Administrative-divisions-of-China
 import pcasRaw from './pcas-code.json'
 
 const props = defineProps({
-    modelValue: {
-        type: Array,
-        default: () => []
-    },
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    type: {
-        type: String,
-        default: 'pca'
-    },
-    format: {
-        type: String,
-        default: 'code'
-    }
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String as () => 'pc' | 'pca' | 'pcas',
+    default: 'pca',
+  },
+  format: {
+    type: String as () => 'code' | 'name' | 'both',
+    default: 'code',
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
 
+interface pcasItem {
+  code: string
+  name: string
+  children?: pcasItem[]
+}
+
 const pcasData = computed(() => {
-    const data = []
-    // 省份
-    pcasRaw.forEach(p => {
-        const tempP = {
-            code: p.code,
-            name: p.name
-        }
-        const tempChildrenC = []
-        // 城市
-        p.children.forEach(c => {
-            const tempC = {
-                code: c.code,
-                name: c.name
-            }
-            if (['pca', 'pcas'].includes(props.type)) {
-                const tempChildrenA = []
-                // 区县
-                c.children.forEach(a => {
-                    const tempA = {
-                        code: a.code,
-                        name: a.name
-                    }
-                    if (props.type === 'pcas') {
-                        const tempChildrenS = []
-                        // 街道
-                        a.children.forEach(s => {
-                            const tempS = {
-                                code: s.code,
-                                name: s.name
-                            }
-                            tempChildrenS.push(tempS)
-                        })
-                        tempA.children = tempChildrenS
-                    }
-                    tempChildrenA.push(tempA)
-                })
-                tempC.children = tempChildrenA
-            }
-            tempChildrenC.push(tempC)
+  const data: pcasItem[] = []
+  // 省份
+  pcasRaw.forEach((p) => {
+    const tempP: pcasItem = {
+      code: p.code,
+      name: p.name,
+    }
+    const tempChildrenC: pcasItem[] = []
+    // 城市
+    p.children.forEach((c) => {
+      const tempC: pcasItem = {
+        code: c.code,
+        name: c.name,
+      }
+      if (['pca', 'pcas'].includes(props.type)) {
+        const tempChildrenA: pcasItem[] = []
+        // 区县
+        c.children.forEach((a) => {
+          const tempA: pcasItem = {
+            code: a.code,
+            name: a.name,
+          }
+          if (props.type === 'pcas') {
+            const tempChildrenS: pcasItem[] = []
+            // 街道
+            a.children.forEach((s) => {
+              const tempS: pcasItem = {
+                code: s.code,
+                name: s.name,
+              }
+              tempChildrenS.push(tempS)
+            })
+            tempA.children = tempChildrenS
+          }
+          tempChildrenA.push(tempA)
         })
-        tempP.children = tempChildrenC
-        data.push(tempP)
+        tempC.children = tempChildrenA
+      }
+      tempChildrenC.push(tempC)
     })
-    return data
+    tempP.children = tempChildrenC
+    data.push(tempP)
+  })
+  return data
 })
 
 const myValue = computed({
-    // 将入参数据转成 code 码
-    get: () => {
-        return anyToCode(props.modelValue)
-    },
-    // 将 code 码转成出参数据
-    set: value => {
-        emit('update:modelValue', value ? codeToAny(value) : [])
-    }
+  // 将入参数据转成 code 码
+  get: () => {
+    return anyToCode(props.modelValue)
+  },
+  // 将 code 码转成出参数据
+  set: (value) => {
+    emit('update:modelValue', value ? codeToAny(value) : [])
+  },
 })
 
-function anyToCode(value, dictionarie = pcasData.value) {
-    const input = []
-    if (value.length > 0) {
-        const findItem = dictionarie.find(item => {
-            if (props.format === 'code') {
-                return item.code === value[0]
-            } else if (props.format === 'name') {
-                return item.name === value[0]
-            } else {
-                return item.name === value[0].name && item.code === value[0].code
-            }
-        })
-        input.push(findItem.code)
-        if (findItem.children) {
-            input.push(...anyToCode(value.slice(1 - value.length), findItem.children))
-        }
-    }
-    return input
+function anyToCode(value: any[], dictionarie: any[] = pcasData.value) {
+  const input: string[] = []
+  if (value.length > 0) {
+    const findItem = dictionarie.find((item) => {
+      if (props.format === 'code')
+        return item.code === value[0]
+
+      else if (props.format === 'name')
+        return item.name === value[0]
+
+      else
+        return item.name === value[0].name && item.code === value[0].code
+    })
+    input.push(findItem.code)
+    if (findItem.children)
+      input.push(...anyToCode(value.slice(1 - value.length), findItem.children))
+  }
+  return input
 }
 
-function codeToAny(codes, dictionarie = pcasData.value) {
-    const output = []
-    const findItem = dictionarie.find(item => item.code === codes[0])
-    if (findItem) {
-        switch (props.format) {
-            case 'code':
-                output.push(findItem.code)
-                break
-            case 'name':
-                output.push(findItem.name)
-                break
-            case 'both':
-                output.push({
-                    code: findItem.code,
-                    name: findItem.name
-                })
-        }
-        const newCodes = codes.slice(1 - codes.length)
-        if (newCodes.length > 0 && findItem.children) {
-            output.push(...codeToAny(newCodes, findItem.children))
-        }
+function codeToAny(codes: string[], dictionarie: any[] = pcasData.value): any {
+  const output = []
+  const findItem = dictionarie.find(item => item.code === codes[0])
+  if (findItem) {
+    switch (props.format) {
+      case 'code':
+        output.push(findItem.code)
+        break
+      case 'name':
+        output.push(findItem.name)
+        break
+      case 'both':
+        output.push({
+          code: findItem.code,
+          name: findItem.name,
+        })
     }
-    return output
+    const newCodes = codes.slice(1 - codes.length)
+    if (newCodes.length > 0 && findItem.children)
+      output.push(...codeToAny(newCodes, findItem.children))
+  }
+  return output
 }
 </script>
 
 <template>
-    <el-cascader v-model="myValue" :options="pcasData" :props="{ value: 'code', label: 'name' }" :disabled="disabled" clearable filterable />
+  <el-cascader v-model="myValue" :options="pcasData as any[]" :props="{ value: 'code', label: 'name' }" :disabled="disabled" clearable filterable />
 </template>
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index 4f744ac5..e4906864 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -1,13 +1,13 @@
-<script setup name="SearchBar">
+<script lang="ts" setup name="SearchBar">
 const props = defineProps({
-    showMore: {
-        type: Boolean,
-        default: false
-    },
-    unfold: {
-        type: Boolean,
-        default: false
-    }
+  showMore: {
+    type: Boolean,
+    default: false,
+  },
+  unfold: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['toggle'])
@@ -15,57 +15,63 @@ const emit = defineEmits(['toggle'])
 const isUnfold = ref(!props.unfold)
 
 watch(() => props.unfold, () => toggle(), {
-    immediate: true
+  immediate: true,
 })
 
 function toggle() {
-    isUnfold.value = !isUnfold.value
-    emit('toggle', isUnfold.value)
+  isUnfold.value = !isUnfold.value
+  emit('toggle', isUnfold.value)
 }
 </script>
 
 <template>
-    <div class="search-container">
-        <slot />
-        <div v-if="showMore" class="more">
-            <el-button text size="small" @click="toggle">
-                <template #icon>
-                    <el-icon>
-                        <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
-                    </el-icon>
-                </template>
-                {{ isUnfold ? '收起' : '展开' }}
-            </el-button>
-        </div>
+  <div class="search-container">
+    <slot />
+    <div v-if="showMore" class="more">
+      <el-button text size="small" @click="toggle">
+        <template #icon>
+          <el-icon>
+            <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
+          </el-icon>
+        </template>
+        {{ isUnfold ? '收起' : '展开' }}
+      </el-button>
     </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .search-container {
+  position: relative;
+  margin: 20px 0;
+  padding: 20px;
+  background-color: var(--el-fill-color-lighter);
+  transition: background-color 0.3s;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  :deep(.el-form) {
+    margin-bottom: -10px;
+
+    .el-select {
+      width: 100%;
+    }
+
+    .el-date-editor {
+      width: 100%;
+    }
+  }
+
+  .more {
     position: relative;
-    margin: 20px 0;
-    padding: 20px;
-    background-color: var(--el-fill-color);
-    transition: background-color 0.3s;
-    &:first-child {
-        margin-top: 0;
-    }
-    &:last-child {
-        margin-bottom: 0;
-    }
-    :deep(.el-form) {
-        margin-bottom: -10px;
-        .el-select {
-            width: 100%;
-        }
-        .el-date-editor {
-            width: 100%;
-        }
-    }
-    .more {
-        position: relative;
-        text-align: center;
-        margin-bottom: -10px;
-    }
+    text-align: center;
+    margin-bottom: -10px;
+  }
 }
 </style>
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 90c565d0..65fb51b0 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -1,53 +1,47 @@
-<script setup name="SvgIcon">
+<script lang="ts" setup name="SvgIcon">
 import { Icon } from '@iconify/vue'
 
 const props = defineProps({
-    name: {
-        type: String,
-        required: true
-    },
-    flip: {
-        type: String,
-        validator(value) {
-            return ['', 'horizontal', 'vertical', 'both'].includes(value)
-        },
-        default: ''
-    },
-    rotate: {
-        type: Number,
-        validator(value) {
-            return value >= 0 && value <= 360
-        },
-        default: 0
-    }
+  name: {
+    type: String,
+    required: true,
+  },
+  flip: {
+    type: String as () => 'horizontal' | 'vertical' | 'both' | '',
+    default: '',
+  },
+  rotate: {
+    type: Number,
+    default: 0,
+  },
 })
 
 const transformStyle = computed(() => {
-    let style = []
-    if (props.flip != '') {
-        switch (props.flip) {
-            case 'horizontal':
-                style.push('rotateY(180deg)')
-                break
-            case 'vertical':
-                style.push('rotateX(180deg)')
-                break
-            case 'both':
-                style.push('rotateX(180deg)')
-                style.push('rotateY(180deg)')
-                break
-        }
+  const style = []
+  if (props.flip !== '') {
+    switch (props.flip) {
+      case 'horizontal':
+        style.push('rotateY(180deg)')
+        break
+      case 'vertical':
+        style.push('rotateX(180deg)')
+        break
+      case 'both':
+        style.push('rotateX(180deg)')
+        style.push('rotateY(180deg)')
+        break
     }
-    if (props.rotate != 0) {
-        style.push(`rotate(${props.rotate}deg)`)
-    }
-    return `transform: ${style.join(' ')};`
+  }
+  if (props.rotate !== 0)
+    style.push(`rotate(${props.rotate}deg)`)
+
+  return `transform: ${style.join(' ')};`
 })
 </script>
 
 <template>
-    <Icon v-if="name.indexOf('ep:') === 0" :icon="name" :style="transformStyle" />
-    <svg v-else :style="transformStyle" aria-hidden="true">
-        <use :xlink:href="`#icon-${name}`" />
-    </svg>
+  <Icon v-if="name.indexOf('ep:') === 0" :icon="name" :style="transformStyle" />
+  <svg v-else :style="transformStyle" aria-hidden="true">
+    <use :xlink:href="`#icon-${name}`" />
+  </svg>
 </template>
diff --git a/src/components/SystemInfo/index.vue b/src/components/SystemInfo/index.vue
new file mode 100644
index 00000000..d4f4f4b1
--- /dev/null
+++ b/src/components/SystemInfo/index.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import eventBus from '@/utils/eventBus'
+
+const isShow = ref(false)
+
+const { pkg, lastBuildTime } = __SYSTEM_INFO__
+
+onMounted(() => {
+  eventBus.on('global-system-info-toggle', () => {
+    isShow.value = !isShow.value
+  })
+})
+</script>
+
+<template>
+  <div>
+    <el-drawer v-model="isShow" title="系统信息" direction="rtl" :size="360">
+      <el-descriptions direction="vertical" :column="1" border>
+        <el-descriptions-item label="版本号" align="center">
+          {{ pkg.version }}
+        </el-descriptions-item>
+        <el-descriptions-item label="最后编译时间" align="center">
+          {{ lastBuildTime }}
+        </el-descriptions-item>
+      </el-descriptions>
+      <el-descriptions title="生产环境依赖" :column="1" size="small" border>
+        <el-descriptions-item v-for="(val, key) in (pkg.dependencies as object)" :key="key" :label="key">
+          {{ val }}
+        </el-descriptions-item>
+      </el-descriptions>
+      <el-descriptions title="开发环境依赖" :column="1" size="small" border>
+        <el-descriptions-item v-for="(val, key) in (pkg.devDependencies as object)" :key="key" :label="key">
+          {{ val }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-drawer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-drawer__header) {
+  margin-bottom: initial;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--el-border-color);
+  transition: var(--el-transition-border);
+}
+
+:deep(.el-descriptions) {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/components/Trend/index.vue b/src/components/Trend/index.vue
index 87641278..e51e5e21 100644
--- a/src/components/Trend/index.vue
+++ b/src/components/Trend/index.vue
@@ -1,65 +1,68 @@
-<script setup name="Trend">
+<script lang="ts" setup name="Trend">
 const props = defineProps({
-    value: {
-        type: String,
-        required: true
-    },
-    type: {
-        type: String,
-        validator: val => ['up', 'down'].includes(val),
-        default: 'up'
-    },
-    prefix: {
-        type: String,
-        default: ''
-    },
-    suffix: {
-        type: String,
-        default: ''
-    },
-    reverse: {
-        type: Boolean,
-        default: false
-    }
+  value: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String as () => 'up' | 'down',
+    default: 'up',
+  },
+  prefix: {
+    type: String,
+    default: '',
+  },
+  suffix: {
+    type: String,
+    default: '',
+  },
+  reverse: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const isUp = computed(() => {
-    let isUp = props.type === 'up'
-    if (props.reverse) {
-        isUp = !isUp
-    }
-    return isUp
+  let isUp = props.type === 'up'
+  if (props.reverse)
+    isUp = !isUp
+
+  return isUp
 })
 </script>
 
 <template>
-    <div :class="`trend ${isUp ? 'up' : 'down'}`">
-        <span v-if="prefix" class="prefix">{{ prefix }}</span>
-        <span class="text">{{ value }}</span>
-        <span v-if="suffix" class="suffix">{{ suffix }}</span>
-        <el-icon>
-            <svg-icon name="ep:caret-top" />
-        </el-icon>
-    </div>
+  <div :class="`trend ${isUp ? 'up' : 'down'}`">
+    <span v-if="prefix" class="prefix">{{ prefix }}</span>
+    <span class="text">{{ value }}</span>
+    <span v-if="suffix" class="suffix">{{ suffix }}</span>
+    <el-icon>
+      <svg-icon name="ep:caret-top" />
+    </el-icon>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .trend {
-    display: flex;
-    align-items: center;
-    transition: var(--el-transition-color);
-    &.up {
-        color: var(--el-color-success);
-    }
-    &.down {
-        color: var(--el-color-danger);
-        .el-icon {
-            transform: rotate(180deg);
-        }
-    }
+  display: flex;
+  align-items: center;
+  transition: var(--el-transition-color);
+
+  &.up {
+    color: var(--el-color-success);
+  }
+
+  &.down {
+    color: var(--el-color-danger);
+
     .el-icon {
-        margin-left: 5px;
-        transition: transform 0.3s;
+      transform: rotate(180deg);
     }
+  }
+
+  .el-icon {
+    margin-left: 5px;
+    transition: transform 0.3s;
+  }
 }
 </style>
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 00000000..178b234d
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,266 @@
+import type { StyleValue } from "vue"
+import type { RouteRecordRaw, RouteMeta, NavigationGuard } from 'vue-router'
+
+type RecursiveRequired<T> = {
+  [P in keyof T]-?: RecursiveRequired<T[P]>
+}
+
+declare namespace Settings {
+  interface app {
+    /**
+     * 颜色方案
+     * @默认值 `''` 跟随系统
+     * @可选值 `'light'` 明亮模式
+     * @可选值 `'dark'` 暗黑模式
+     */
+    colorScheme?: '' | 'light' | 'dark'
+    /**
+     * Element Plus 组件默认尺寸
+     * @默认值 `'default'` 默认
+     * @可选值 `'large'` 大号
+     * @可选值 `'small'` 小号
+     */
+    elementSize?: 'default' | 'large' | 'small'
+    /**
+     * 是否将 iconify 图标集中的 Element Plus 图标下载到本地，以便在离线环境下使用
+     * @默认值 `false`
+     */
+    iconifyOfflineUse?: boolean
+    /**
+     * 是否开启权限功能
+     * @默认值 `false`
+     */
+    enablePermission?: boolean
+    /**
+     * 是否开启载入进度条
+     * @默认值 `true`
+     */
+    enableProgress?: boolean
+    /**
+     * 是否开启动态标题
+     * @默认值 `false`
+     */
+    enableDynamicTitle?: boolean
+    /**
+     * 路由数据来源
+     * @默认值 `'frontend'` 前端
+     * @可选值 `'backend'` 后端
+     * @可选值 `'filesystem'` 文件系统
+     */
+    routeBaseOn?: 'frontend' | 'backend' | 'filesystem'
+  }
+  interface dashboard {
+    /**
+     * 是否开启控制台页面
+     * @默认值 `true`
+     */
+    enable?: boolean
+    /**
+     * 控制台名称
+     * @默认值 `'控制台'`
+     */
+    title?: string
+  }
+  interface layout {
+    /**
+     * 是否开启移动端适配，开启后当页面宽度小于 992px 时自动切换为移动端展示
+     * @默认值 `false`
+     */
+    enableMobileAdaptation?: boolean
+  }
+  interface menu {
+    /**
+     * 导航栏数据来源，当 `app.routeBaseOn: 'filesystem'` 时生效
+     * @默认值 `'frontend'` 前端
+     * @可选值 `'backend'` 后端
+     */
+    baseOn?: 'frontend' | 'backend'
+    /**
+     * 导航栏模式
+     * @默认值 `'side'` 侧边栏模式（有主导航）
+     * @可选值 `'head'` 顶部模式
+     * @可选值 `'single'` 侧边栏模式（无主导航）
+     */
+    menuMode?: 'side' | 'head' | 'single'
+    /**
+     * 切换主导航是否跳转页面
+     * @默认值 `false`
+     */
+    switchMainMenuAndPageJump?: boolean
+    /**
+     * 次导航是否只保持一个子项的展开
+     * @默认值 `true`
+     */
+    subMenuUniqueOpened?: boolean
+    /**
+     * 次导航是否收起
+     * @默认值 `false`
+     */
+    subMenuCollapse?: boolean
+    /**
+     * 是否开启次导航的展开/收起按钮
+     * @默认值 `false`
+     */
+    enableSubMenuCollapseButton?: boolean
+    /**
+     * 是否开启主导航切换快捷键
+     * @默认值 `false`
+     */
+    enableHotkeys?: boolean
+  }
+  interface topbar {
+    /**
+     * 是否固定顶栏
+     * @默认值 `true`
+     */
+    fixed?: boolean
+  }
+  interface toolbar {
+    /**
+     * 是否开启全屏
+     * @默认值 `false`
+     */
+    enableFullscreen?: boolean
+    /**
+     * 是否开启页面刷新
+     * @默认值 `false`
+     */
+    enablePageReload?: boolean
+    /**
+     * 是否开启颜色主题
+     * @默认值 `false`
+     */
+    enableColorScheme?: boolean
+    /**
+     * 是否开启应用配置，强烈建议在生产环境中关闭
+     * @默认值 `false`
+     */
+    enableAppSetting?: boolean
+  }
+  interface breadcrumb {
+    /**
+     * 是否开启面包屑导航
+     * @默认值 `true`
+     */
+    enable?: boolean
+  }
+  interface navSearch {
+    /**
+     * 是否开启导航搜索
+     * @默认值 `true`
+     */
+    enable?: boolean
+    /**
+     * 是否开启导航搜索快捷键
+     * @默认值 `true`
+     */
+    enableHotkeys?: boolean
+  }
+  interface copyright {
+    /**
+     * 是否开启底部版权，同时在路由 meta 对象里可以单独设置某个路由是否显示底部版权信息
+     * @默认值 `true`
+     */
+    enable?: boolean
+    /**
+     * 网站运行日期
+     * @默认值 `'2020-2022'`
+     */
+    dates?: string
+    /**
+     * 公司名称
+     * @默认值 `'Fantastic-admin'`
+     */
+    company?: string
+    /**
+     * 网站地址
+     * @默认值 `'https://hooray.gitee.io/fantastic-admin/'`
+     */
+    website?: string
+    /**
+     * 网站备案号
+     * @默认值 `''`
+     */
+    beian?: string
+  }
+  interface all {
+    /** 应用设置 */
+    app?: app
+    /** 控制台设置 */
+    dashboard?: dashboard
+    /** 布局设置 */
+    layout?: layout
+    /** 导航栏设置 */
+    menu?: menu
+    /** 顶栏设置 */
+    topbar?: topbar
+    /** 工具栏设置 */
+    toolbar?: toolbar
+    /** 面包屑导航设置 */
+    breadcrumb?: breadcrumb
+    /** 导航搜索设置 */
+    navSearch?: navSearch
+    /** 底部版权设置 */
+    copyright?: copyright
+  }
+}
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    title: string | Function
+    i18n?: string
+    icon?: string
+    activeIcon?: string
+    defaultOpened?: boolean
+    auth?: string | string[]
+    sidebar?: boolean
+    breadcrumb?: boolean
+    activeMenu?: string
+    cache?: boolean | string | string[]
+    breadcrumbNeste?: Route.breadcrumb[]
+  }
+}
+
+declare namespace Route {
+  interface recordRaw extends Omit<RouteRecordRaw, 'meta' | 'children'> {
+    meta: RouteMeta
+    children?: recordRaw[]
+  }
+  interface recordMainRaw {
+    meta: {
+      title?: string | Function
+      icon?: string
+      auth?: string | string[]
+    }
+    children: recordRaw[]
+  }
+  interface breadcrumb {
+    path: string
+    title: string | Function
+    hide: boolean
+  }
+}
+
+declare namespace Menu {
+  /** 原始 */
+  interface recordRaw {
+    path?: string
+    meta: {
+      title: string
+      icon?: string
+      defaultOpened?: boolean
+      auth?: string | string[]
+      sidebar?: boolean
+    }
+    children?: recordRaw[]
+  }
+  /** 主导航 */
+  interface recordMainRaw {
+    meta: {
+      title?: string
+      icon?: string
+      auth?: string | string[]
+    }
+    children: recordRaw[]
+  }
+}
diff --git a/src/iconify-ep/index.js b/src/iconify-ep/index.js
deleted file mode 100644
index 5bc75eb9..00000000
--- a/src/iconify-ep/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { addCollection } from '@iconify/vue'
-
-export async function downloadAndInstall() {
-    const data = Object.freeze(await fetch('./icons/icons.json').then(r => r.json()))
-    addCollection(data)
-}
diff --git a/src/iconify-ep/index.ts b/src/iconify-ep/index.ts
new file mode 100644
index 00000000..37deffa0
--- /dev/null
+++ b/src/iconify-ep/index.ts
@@ -0,0 +1,6 @@
+import { addCollection } from '@iconify/vue'
+
+export async function downloadAndInstall() {
+  const data = Object.freeze(await fetch('./icons/icons.json').then(r => r.json()))
+  addCollection(data)
+}
diff --git a/src/layout/components/AppSetting/index.vue b/src/layout/components/AppSetting/index.vue
deleted file mode 100644
index 6404d264..00000000
--- a/src/layout/components/AppSetting/index.vue
+++ /dev/null
@@ -1,457 +0,0 @@
-<script setup name="AppSetting">
-import { useClipboard } from '@vueuse/core'
-import eventBus from '@/utils/eventBus'
-import useSettingsStore from '@/store/modules/settings'
-import useMenuStore from '@/store/modules/menu'
-import globalSettings from '@/settings'
-
-const route = useRoute()
-
-const settingsStore = useSettingsStore()
-const menuStore = useMenuStore()
-
-const isShow = ref(false)
-
-const settings = ref(globalSettings)
-
-watch(() => settings, () => {
-    settingsStore.updateThemeSetting(settings.value)
-    menuStore.setActived(0)
-    settings.value.menu.menuMode !== 'single' && menuStore.setActived(route.fullPath)
-}, {
-    deep: true
-})
-
-onMounted(() => {
-    eventBus.on('global-theme-toggle', () => {
-        isShow.value = !isShow.value
-    })
-})
-
-const { copy, copied, isSupported } = useClipboard()
-
-watch(copied, val => {
-    if (val) {
-        ElMessage.success('复制成功，请粘贴到 src/settings.custom.json 文件中！')
-    }
-})
-
-function handleCopy() {
-    copy(JSON.stringify(settings.value, null, 4))
-}
-</script>
-
-<template>
-    <div>
-        <el-drawer v-model="isShow" title="应用配置" direction="rtl" :size="360">
-            <el-alert title="应用配置可实时预览效果，但仅是临时生效，要想真正作用于项目，可以点击下方的“复制配置”按钮，将配置粘贴到 src/settings.custom.json 中即可，或者也可在 src/settings.js 中直接修改默认配置。同时建议在生产环境隐藏应用配置功能。" type="error" :closable="false" />
-            <el-divider>颜色主题</el-divider>
-            <div class="color-scheme">
-                <div class="switch" :class="settings.app.colorScheme" @click="settings.app.colorScheme = settings.app.colorScheme === 'dark' ? 'light' : 'dark'">
-                    <el-icon class="icon">
-                        <svg-icon v-show="settings.app.colorScheme === 'light'" name="ep:sunny" />
-                        <svg-icon v-show="settings.app.colorScheme === 'dark'" name="ep:moon" />
-                    </el-icon>
-                </div>
-            </div>
-            <el-divider v-if="settingsStore.mode === 'pc'">导航栏模式</el-divider>
-            <div v-if="settingsStore.mode === 'pc'" class="menu-mode">
-                <el-tooltip content="侧边栏模式（含主导航）" placement="top" :show-after="500">
-                    <div class="mode mode-side" :class="{'active': settings.menu.menuMode === 'side'}" @click="settings.menu.menuMode = 'side'">
-                        <div class="mode-container" />
-                        <el-icon>
-                            <svg-icon name="ep:check" />
-                        </el-icon>
-                    </div>
-                </el-tooltip>
-                <el-tooltip content="顶部模式" placement="top" :show-after="500">
-                    <div class="mode mode-head" :class="{'active': settings.menu.menuMode === 'head'}" @click="settings.menu.menuMode = 'head'">
-                        <div class="mode-container" />
-                        <el-icon>
-                            <svg-icon name="ep:check" />
-                        </el-icon>
-                    </div>
-                </el-tooltip>
-                <el-tooltip content="侧边栏模式（不含主导航）" placement="top" :show-after="500">
-                    <div class="mode mode-single" :class="{'active': settings.menu.menuMode === 'single'}" @click="settings.menu.menuMode = 'single'">
-                        <div class="mode-container" />
-                        <el-icon>
-                            <svg-icon name="ep:check" />
-                        </el-icon>
-                    </div>
-                </el-tooltip>
-            </div>
-            <el-divider>导航栏</el-divider>
-            <div class="setting-item">
-                <div class="label">是否折叠</div>
-                <el-switch v-model="settings.menu.subMenuCollapse" />
-            </div>
-            <div class="setting-item">
-                <div class="label">
-                    切换跳转
-                    <el-tooltip content="开启该功能后，切换侧边栏时，页面自动跳转至该侧边栏导航下第一个路由地址" placement="top">
-                        <el-icon>
-                            <svg-icon name="ep:question-filled" />
-                        </el-icon>
-                    </el-tooltip>
-                </div>
-                <el-switch v-model="settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settings.menu.menuMode)" />
-            </div>
-            <div class="setting-item">
-                <div class="label">
-                    保持展开一个
-                    <el-tooltip content="开启该功能后，侧边栏只保持一个子菜单的展开" placement="top">
-                        <el-icon>
-                            <svg-icon name="ep:question-filled" />
-                        </el-icon>
-                    </el-tooltip>
-                </div>
-                <el-switch v-model="settings.menu.subMenuUniqueOpened" />
-            </div>
-            <el-divider>顶栏</el-divider>
-            <div class="setting-item">
-                <div class="label">是否固定</div>
-                <el-switch v-model="settings.topbar.fixed" />
-            </div>
-            <div v-if="settingsStore.mode === 'pc'" class="setting-item">
-                <div class="label">折叠按钮</div>
-                <el-switch v-model="settings.topbar.enableSidebarCollapse" />
-            </div>
-            <div v-if="settingsStore.mode === 'pc'" class="setting-item">
-                <div class="label">面包屑导航</div>
-                <el-switch v-model="settings.topbar.enableBreadcrumb" />
-            </div>
-            <div class="setting-item">
-                <div class="label">
-                    导航栏搜索
-                    <el-tooltip content="对导航栏进行快捷搜索" placement="top">
-                        <el-icon>
-                            <svg-icon name="ep:question-filled" />
-                        </el-icon>
-                    </el-tooltip>
-                </div>
-                <el-switch v-model="settings.topbar.enableNavSearch" />
-            </div>
-            <div v-if="settingsStore.mode === 'pc'" class="setting-item">
-                <div class="label">
-                    全屏
-                    <el-tooltip content="该功能使用场景极少，用户习惯于通过窗口“最大化”功能来扩大显示区域，以显示更多内容，并且使用 F11 键也可以进入全屏效果" placement="top">
-                        <el-icon>
-                            <svg-icon name="ep:question-filled" />
-                        </el-icon>
-                    </el-tooltip>
-                </div>
-                <el-switch v-model="settings.topbar.enableFullscreen" />
-            </div>
-            <div class="setting-item">
-                <div class="label">
-                    页面刷新
-                    <el-tooltip content="开启时会阻止原生 F5 键刷新功能，并采用框架提供的刷新模式进行页面刷新" placement="top">
-                        <el-icon>
-                            <svg-icon name="ep:question-filled" />
-                        </el-icon>
-                    </el-tooltip>
-                </div>
-                <el-switch v-model="settings.topbar.enablePageReload" />
-            </div>
-            <div class="setting-item">
-                <div class="label">
-                    颜色主题
-                    <el-tooltip content="开启后可在明亮/暗黑模式中切换" placement="top">
-                        <el-icon>
-                            <svg-icon name="ep:question-filled" />
-                        </el-icon>
-                    </el-tooltip>
-                </div>
-                <el-switch v-model="settings.topbar.enableColorScheme" />
-            </div>
-            <el-divider>底部版权</el-divider>
-            <div class="setting-item">
-                <div class="label">是否启用</div>
-                <el-switch v-model="settings.copyright.enable" />
-            </div>
-            <div class="setting-item">
-                <div class="label">日期</div>
-                <el-input v-model="settings.copyright.dates" size="small" :disabled="!settings.copyright.enable" />
-            </div>
-            <div class="setting-item">
-                <div class="label">公司</div>
-                <el-input v-model="settings.copyright.company" size="small" :disabled="!settings.copyright.enable" />
-            </div>
-            <div class="setting-item">
-                <div class="label">网址</div>
-                <el-input v-model="settings.copyright.website" size="small" :disabled="!settings.copyright.enable" />
-            </div>
-            <div class="setting-item">
-                <div class="label">备案</div>
-                <el-input v-model="settings.copyright.beian" size="small" :disabled="!settings.copyright.enable" />
-            </div>
-            <el-divider>控制台</el-divider>
-            <div class="setting-item">
-                <div class="label">
-                    是否开启
-                    <el-tooltip content="该功能开启时，登录成功默认进入控制台页面，反之则默认进入导航栏里第一个导航页面" placement="top">
-                        <el-icon>
-                            <svg-icon name="ep:question-filled" />
-                        </el-icon>
-                    </el-tooltip>
-                </div>
-                <el-switch v-model="settings.dashboard.enable" />
-            </div>
-            <div class="setting-item">
-                <div class="label">控制台名称</div>
-                <el-input v-model="settings.dashboard.title" size="small" />
-            </div>
-            <el-divider>其它</el-divider>
-            <div class="setting-item">
-                <div class="label">
-                    组件尺寸
-                    <el-tooltip content="全局设置 Element Plus 组件的默认尺寸大小" placement="top">
-                        <el-icon>
-                            <svg-icon name="ep:question-filled" />
-                        </el-icon>
-                    </el-tooltip>
-                </div>
-                <el-radio-group v-model="settings.app.elementSize" size="small">
-                    <el-radio-button label="large">较大</el-radio-button>
-                    <el-radio-button label="default">默认</el-radio-button>
-                    <el-radio-button label="small">稍小</el-radio-button>
-                </el-radio-group>
-            </div>
-            <div class="setting-item">
-                <div class="label">是否启用权限</div>
-                <el-switch v-model="settings.app.enablePermission" />
-            </div>
-            <div class="setting-item">
-                <div class="label">
-                    载入进度条
-                    <el-tooltip content="该功能开启时，跳转路由会看到页面顶部有进度条" placement="top">
-                        <el-icon>
-                            <svg-icon name="ep:question-filled" />
-                        </el-icon>
-                    </el-tooltip>
-                </div>
-                <el-switch v-model="settings.app.enableProgress" />
-            </div>
-            <div class="setting-item">
-                <div class="label">
-                    动态标题
-                    <el-tooltip content="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置" placement="top">
-                        <el-icon>
-                            <svg-icon name="ep:question-filled" />
-                        </el-icon>
-                    </el-tooltip>
-                </div>
-                <el-switch v-model="settings.app.enableDynamicTitle" />
-            </div>
-            <template v-if="isSupported" #footer>
-                <el-button type="primary" @click="handleCopy">
-                    <template #icon>
-                        <el-icon>
-                            <svg-icon name="ep:document-copy" />
-                        </el-icon>
-                    </template>
-                    复制配置
-                </el-button>
-            </template>
-        </el-drawer>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.el-drawer__header) {
-    margin-bottom: initial;
-    padding-bottom: 20px;
-    border-bottom: 1px solid var(--el-border-color);
-}
-:deep(.el-drawer__footer) {
-    padding: 20px;
-    border-top: 1px solid var(--el-border-color);
-    transition: var(--el-transition-border);
-    .el-button {
-        width: 100%;
-    }
-}
-:deep(.el-divider) {
-    margin: 36px 0 24px;
-}
-.color-scheme {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-bottom: 10px;
-    $width: 50px;
-    .switch {
-        width: $width;
-        height: 30px;
-        border-radius: 15px;
-        cursor: pointer;
-        background-color: var(--el-fill-color-darker);
-        transition: background-color 0.3s;
-        &.dark {
-            .icon {
-                margin-left: calc($width - 24px - 3px);
-            }
-        }
-        .icon {
-            margin: 3px;
-            padding: 5px;
-            font-size: 24px;
-            border-radius: 50%;
-            background-color: var(--el-fill-color-lighter);
-            transition: margin-left 0.3s, background-color 0.3s;
-        }
-    }
-}
-.menu-mode {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    padding-bottom: 10px;
-    .mode {
-        position: relative;
-        width: 80px;
-        height: 55px;
-        margin: 10px;
-        border-radius: 5px;
-        overflow: hidden;
-        cursor: pointer;
-        background-color: var(--g-app-bg);
-        box-shadow: 0 0 5px 1px var(--el-border-color-lighter);
-        transition: 0.2s;
-        &:hover {
-            box-shadow: 0 0 5px 1px var(--el-border-color-darker);
-        }
-        &.active {
-            box-shadow: 0 0 0 2px var(--el-color-primary);
-        }
-        &::before,
-        &::after,
-        .mode-container {
-            pointer-events: none;
-            position: absolute;
-            border-radius: 3px;
-        }
-        .mode-container::before {
-            content: "";
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background-color: var(--g-sub-sidebar-menu-active-bg);
-            opacity: 0.2;
-        }
-        &-side {
-            &::before {
-                content: "";
-                top: 5px;
-                left: 5px;
-                bottom: 5px;
-                width: 10px;
-                background-color: var(--g-sub-sidebar-menu-active-bg);
-            }
-            &::after {
-                content: "";
-                top: 5px;
-                left: 20px;
-                bottom: 5px;
-                width: 15px;
-                background-color: var(--g-sub-sidebar-menu-active-bg);
-                opacity: 0.5;
-            }
-            .mode-container {
-                top: 5px;
-                left: 40px;
-                right: 5px;
-                bottom: 5px;
-                border: 1px dashed var(--g-sub-sidebar-menu-active-bg);
-            }
-        }
-        &-head {
-            &::before {
-                content: "";
-                top: 5px;
-                left: 5px;
-                right: 5px;
-                height: 10px;
-                background-color: var(--g-sub-sidebar-menu-active-bg);
-            }
-            &::after {
-                content: "";
-                top: 20px;
-                left: 5px;
-                bottom: 5px;
-                width: 15px;
-                background-color: var(--g-sub-sidebar-menu-active-bg);
-                opacity: 0.5;
-            }
-            .mode-container {
-                top: 20px;
-                left: 25px;
-                right: 5px;
-                bottom: 5px;
-                border: 1px dashed var(--g-sub-sidebar-menu-active-bg);
-            }
-        }
-        &-single {
-            &::before {
-                content: "";
-                position: absolute;
-                top: 5px;
-                left: 5px;
-                bottom: 5px;
-                width: 15px;
-                background-color: var(--g-sub-sidebar-menu-active-bg);
-                opacity: 0.5;
-            }
-            .mode-container {
-                top: 5px;
-                left: 25px;
-                right: 5px;
-                bottom: 5px;
-                border: 1px dashed var(--g-sub-sidebar-menu-active-bg);
-            }
-        }
-        i {
-            position: absolute;
-            right: 10px;
-            bottom: 10px;
-            display: none;
-        }
-        &.active i {
-            display: block;
-            color: var(--el-color-primary);
-        }
-    }
-}
-.setting-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 5px 0;
-    padding: 5px 10px;
-    border-radius: 5px;
-    transition: all 0.3s;
-    &:hover {
-        background: var(--el-fill-color);
-    }
-    .label {
-        font-size: 14px;
-        color: var(--el-text-color-regular);
-        display: flex;
-        align-items: center;
-        i {
-            margin-left: 4px;
-            font-size: 17px;
-            color: var(--el-color-warning);
-            cursor: help;
-        }
-    }
-    .el-switch {
-        height: auto;
-    }
-    .el-input {
-        width: 150px;
-    }
-}
-</style>
diff --git a/src/layout/components/BuyIt/index.vue b/src/layout/components/BuyIt/index.vue
deleted file mode 100644
index 15213a05..00000000
--- a/src/layout/components/BuyIt/index.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script setup name="BuyIt">
-const isActived = ref(true)
-setTimeout(() => {
-    isActived.value = false
-}, 5000)
-
-onMounted(() => {
-    ElNotification({
-        type: 'success',
-        title: '温馨提示',
-        dangerouslyUseHTMLString: true,
-        message: `
-            <p>当前访问的是<b>基础版</b> (Vue3)</p>
-            <p>你可以点<a href="https://hooray.gitee.io/fantastic-admin-pro-example/" target="_blank"><b>这里</b></a>访问专业版 (Vue3)</p>
-        `,
-        position: 'bottom-right',
-        duration: 5000
-    })
-})
-
-function open(url) {
-    window.open(url, 'top')
-}
-</script>
-
-<template>
-    <div class="buy-it" :class="{'actived': isActived}">
-        <div class="item" @click="open(`https://hooray.gitee.io/fantastic-admin/buy.html`)">
-            <el-icon>
-                <svg-icon name="fixed-right-buy" />
-            </el-icon>
-            <span class="title">购买<br>专业版</span>
-        </div>
-        <div class="item" @click="open('https://gitee.com/hooray/fantastic-admin/')">
-            <el-icon>
-                <svg-icon name="fixed-right-code" />
-            </el-icon>
-            <span class="title">下载<br>基础版</span>
-        </div>
-        <div class="item" @click="open(`https://hooray.gitee.io/fantastic-admin/`)">
-            <el-icon>
-                <svg-icon name="fixed-right-doc" />
-            </el-icon>
-            <span class="title">开发<br>文档</span>
-        </div>
-        <div class="item" @click="open(`https://hooray.gitee.io/fantastic-admin/support.html`)">
-            <el-icon>
-                <svg-icon name="fixed-right-chat" />
-            </el-icon>
-            <span class="title">技术<br>支持</span>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.buy-it {
-    position: fixed;
-    z-index: 10;
-    right: -58px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 70px;
-    display: flex;
-    flex-direction: column;
-    transition: right 0.3s;
-    &.actived,
-    &:hover {
-        right: 0;
-    }
-    .item {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        height: 70px;
-        text-align: center;
-        color: #fff;
-        border-bottom: 1px solid #fff;
-        transition: 0.3s;
-        opacity: 0.7;
-        cursor: pointer;
-        &:hover {
-            opacity: 1;
-        }
-        &:first-child {
-            border-top-left-radius: 5px;
-        }
-        &:last-child {
-            border-bottom-left-radius: 5px;
-            border-bottom: 0;
-        }
-        &:nth-child(1) {
-            background-color: #ff4200;
-        }
-        &:nth-child(2) {
-            background-color: #409eff;
-        }
-        &:nth-child(3) {
-            background-color: #0fcc1a;
-        }
-        &:nth-child(4) {
-            background-color: #343b42;
-        }
-        .el-icon {
-            display: block;
-            margin: 0 auto;
-            font-size: 20px;
-        }
-        .title {
-            display: inline-block;
-            font-size: 12px;
-        }
-    }
-}
-</style>
diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue
deleted file mode 100644
index 51c68163..00000000
--- a/src/layout/components/Header/index.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<script setup name="Header">
-import Logo from '../Logo/index.vue'
-import Tools from '../Tools/index.vue'
-import useSettingsStore from '@/store/modules/settings'
-import useMenuStore from '@/store/modules/menu'
-import { useMenu } from '@/utils/composables'
-
-const settingsStore = useSettingsStore()
-const menuStore = useMenuStore()
-
-const navRef = ref()
-
-// 顶部模式鼠标滚动
-function handlerMouserScroll(event) {
-    navRef.value.scrollBy({
-        left: (event.deltaY || event.detail) > 0 ? 50 : -50
-    })
-}
-</script>
-
-<template>
-    <transition name="header">
-        <header v-if="settingsStore.mode === 'pc' && settingsStore.menu.menuMode === 'head'">
-            <div class="header-container">
-                <div class="main">
-                    <Logo />
-                    <!-- 顶部模式 -->
-                    <div ref="navRef" class="nav" @wheel.prevent="handlerMouserScroll">
-                        <template v-for="(item, index) in menuStore.allMenus" :key="index">
-                            <div v-if="item.children && item.children.length !== 0" class="item-container" :class="{'active': index == menuStore.actived}">
-                                <div class="item" @click="useMenu().switchTo(index)">
-                                    <el-icon>
-                                        <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
-                                    </el-icon>
-                                    <span v-if="item.meta.title">{{ item.meta.title }}</span>
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-                </div>
-                <Tools />
-            </div>
-        </header>
-    </transition>
-</template>
-
-<style lang="scss" scoped>
-header {
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-    height: var(--g-header-height);
-    color: var(--g-header-color);
-    background-color: var(--g-header-bg);
-    transition: background-color 0.3s, var(--el-transition-color);
-    .header-container {
-        width: var(--g-header-width);
-        height: 100%;
-        margin: 0 auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .main {
-            flex: 1;
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            height: 100%;
-        }
-    }
-    @media screen and (max-width: var(--g-header-width)) {
-        .header-container {
-            width: 100%;
-        }
-    }
-    :deep(.title) {
-        position: relative;
-        width: inherit;
-        height: inherit;
-        padding: inherit;
-        background-color: inherit;
-        .logo {
-            width: 50px;
-            height: 50px;
-        }
-        span {
-            font-size: 24px;
-            letter-spacing: 1px;
-            color: var(--g-header-color);
-        }
-    }
-    .nav {
-        flex: 1;
-        display: flex;
-        width: 0;
-        height: 100%;
-        margin: 0 30px;
-        padding: 0 20px;
-        overflow-x: auto;
-        mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
-        -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
-        // firefox隐藏滚动条
-        scrollbar-width: none;
-        // chrome隐藏滚动条
-        &::-webkit-scrollbar {
-            display: none;
-        }
-        .item-container {
-            position: relative;
-            display: flex;
-            width: initial;
-            .item {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex-direction: column;
-                padding: 0 5px;
-                width: 80px;
-                height: 100%;
-                cursor: pointer;
-                color: var(--g-header-menu-color);
-                background-color: var(--g-header-bg);
-                transition: background-color 0.3s, var(--el-transition-color);
-                &:hover {
-                    color: var(--g-header-menu-hover-color);
-                    background-color: var(--g-header-menu-hover-bg);
-                }
-                .el-icon {
-                    font-size: 24px;
-                    vertical-align: middle;
-                }
-                span {
-                    text-align: center;
-                    vertical-align: middle;
-                    word-break: break-all;
-                    @include text-overflow(1, false);
-                }
-            }
-            &.active .item {
-                color: var(--g-header-menu-active-color);
-                background-color: var(--g-header-menu-active-bg);
-            }
-        }
-    }
-    :deep(.tools) {
-        padding: 0;
-        .buttons .item .el-icon {
-            color: var(--g-header-color);
-        }
-        .user-container {
-            font-size: 16px;
-            color: var(--g-header-color);
-        }
-    }
-}
-// 头部动画
-.header-enter-active,
-.header-leave-active {
-    transition: transform 0.3s;
-}
-.header-enter-from,
-.header-leave-to {
-    transform: translateY(calc(var(--g-header-height) * -1));
-}
-</style>
diff --git a/src/layout/components/Logo/index.vue b/src/layout/components/Logo/index.vue
deleted file mode 100644
index b04cff27..00000000
--- a/src/layout/components/Logo/index.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup name="Logo">
-import imgLogo from '@/assets/images/logo.png'
-import useSettingsStore from '@/store/modules/settings'
-
-const settingsStore = useSettingsStore()
-
-defineProps({
-    showLogo: {
-        type: Boolean,
-        default: true
-    },
-    showTitle: {
-        type: Boolean,
-        default: true
-    }
-})
-
-const title = ref(import.meta.env.VITE_APP_TITLE)
-const logo = ref(imgLogo)
-
-const to = computed(() => {
-    let rtn = {}
-    if (settingsStore.dashboard.enable) {
-        rtn.name = 'dashboard'
-    }
-    return rtn
-})
-</script>
-
-<template>
-    <router-link :to="to" class="title" :class="{'is-link': settingsStore.dashboard.enable}" :title="title">
-        <img v-if="showLogo" :src="logo" class="logo">
-        <span v-if="showTitle">{{ title }}</span>
-    </router-link>
-</template>
-
-<style lang="scss" scoped>
-.title {
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    width: inherit;
-    padding: 0 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--g-sidebar-logo-height);
-    text-align: center;
-    overflow: hidden;
-    text-decoration: none;
-    &.is-link {
-        cursor: pointer;
-    }
-    .logo {
-        width: 30px;
-        height: 30px;
-        & + span {
-            margin-left: 10px;
-        }
-    }
-    span {
-        display: block;
-        font-weight: bold;
-        color: #fff;
-        @include text-overflow;
-    }
-}
-</style>
diff --git a/src/layout/components/MainSidebar/index.vue b/src/layout/components/MainSidebar/index.vue
deleted file mode 100644
index 54ab7c70..00000000
--- a/src/layout/components/MainSidebar/index.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup name="MainSidebar">
-import Logo from '../Logo/index.vue'
-import useSettingsStore from '@/store/modules/settings'
-import useMenuStore from '@/store/modules/menu'
-import { useMenu } from '@/utils/composables'
-
-const settingsStore = useSettingsStore()
-const menuStore = useMenuStore()
-</script>
-
-<template>
-    <transition name="main-sidebar">
-        <div v-if="settingsStore.menu.menuMode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.menu.menuMode !== 'single')" class="main-sidebar-container">
-            <Logo :show-title="false" class="sidebar-logo" />
-            <!-- 侧边栏模式（含主导航） -->
-            <div class="nav">
-                <template v-for="(item, index) in menuStore.allMenus">
-                    <div
-                        v-if="item.children && item.children.length !== 0" :key="index" :class="{
-                            'item': true,
-                            'active': index === menuStore.actived
-                        }" :title="item.meta.title" @click="useMenu().switchTo(index)"
-                    >
-                        <el-icon>
-                            <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
-                        </el-icon>
-                        <span>{{ item.meta.title }}</span>
-                    </div>
-                </template>
-            </div>
-        </div>
-    </transition>
-</template>
-
-<style lang="scss" scoped>
-.main-sidebar-container {
-    overflow-x: hidden;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    // firefox隐藏滚动条
-    scrollbar-width: none;
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-        display: none;
-    }
-
-    position: relative;
-    z-index: 1;
-    width: var(--g-main-sidebar-width);
-    color: var(--g-main-sidebar-menu-color);
-    background-color: var(--g-main-sidebar-bg);
-    transition: background-color 0.3s, var(--el-transition-color);
-    .sidebar-logo {
-        transition: 0.3s;
-        background-color: var(--g-main-sidebar-bg);
-    }
-    .nav {
-        width: inherit;
-        padding-top: var(--g-sidebar-logo-height);
-        .item {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            text-align: center;
-            height: 60px;
-            padding: 0 5px;
-            cursor: pointer;
-            color: var(--g-main-sidebar-menu-color);
-            background-color: var(--g-main-sidebar-bg);
-            transition: background-color 0.3s, var(--el-transition-color);
-            &:hover {
-                color: var(--g-main-sidebar-menu-hover-color);
-                background-color: var(--g-main-sidebar-menu-hover-bg);
-            }
-            &.active {
-                color: var(--g-main-sidebar-menu-active-color);
-                background-color: var(--g-main-sidebar-menu-active-bg);
-            }
-            .el-icon {
-                margin: 0 auto;
-                font-size: 24px;
-            }
-            span {
-                text-align: center;
-                font-size: 14px;
-                @include text-overflow(1, false);
-            }
-        }
-    }
-}
-// 主侧边栏动画
-.main-sidebar-enter-active,
-.main-sidebar-leave-active {
-    transition: transform 0.3s;
-}
-.main-sidebar-enter-from,
-.main-sidebar-leave-to {
-    transform: translateX(calc(var(--g-main-sidebar-width) * -1));
-}
-</style>
diff --git a/src/layout/components/Search/index.vue b/src/layout/components/Search/index.vue
deleted file mode 100644
index 52194e7c..00000000
--- a/src/layout/components/Search/index.vue
+++ /dev/null
@@ -1,398 +0,0 @@
-<script setup name="Search">
-import hotkeys from 'hotkeys-js'
-import { deepClone, isExternalLink } from '@/utils'
-import eventBus from '@/utils/eventBus'
-import useSettingsStore from '@/store/modules/settings'
-import useRouteStore from '@/store/modules/route'
-import useMenuStore from '@/store/modules/menu'
-
-const settingsStore = useSettingsStore()
-const routeStore = useRouteStore()
-const menuStore = useMenuStore()
-
-const isShow = ref(false)
-const searchInput = ref('')
-const sourceList = ref([])
-const actived = ref(-1)
-
-const inputRef = ref()
-const resultRef = ref()
-const resultItemRef = ref([])
-const setResultItemRef = el => resultItemRef.value.push(el)
-onBeforeUpdate(() => {
-    resultItemRef.value = []
-})
-
-const resultList = computed(() => {
-    let result = []
-    result = sourceList.value.filter(item => {
-        let flag = false
-        if (item.title.indexOf(searchInput.value) >= 0) {
-            flag = true
-        }
-        if (item.path.indexOf(searchInput.value) >= 0) {
-            flag = true
-        }
-        if (item.breadcrumb.some(b => b.indexOf(searchInput.value) >= 0)) {
-            flag = true
-        }
-        return flag
-    })
-    return result
-})
-
-watch(() => isShow.value, val => {
-    if (val) {
-        document.querySelector('body').classList.add('hidden')
-        resultRef.value.scrollTop = 0
-        // 当搜索显示的时候绑定上、下、回车快捷键，隐藏的时候再解绑。另外当 input 处于 focus 状态时，采用 vue 来绑定键盘事件
-        hotkeys('up', keyUp)
-        hotkeys('down', keyDown)
-        hotkeys('enter', keyEnter)
-        setTimeout(() => {
-            inputRef.value.focus()
-        }, 500)
-    } else {
-        document.querySelector('body').classList.remove('hidden')
-        hotkeys.unbind('up', keyUp)
-        hotkeys.unbind('down', keyDown)
-        hotkeys.unbind('enter', keyEnter)
-        setTimeout(() => {
-            searchInput.value = ''
-            actived.value = -1
-        }, 500)
-    }
-})
-watch(() => resultList.value, () => {
-    actived.value = -1
-    handleScroll()
-})
-
-onMounted(() => {
-    eventBus.on('global-search-toggle', () => {
-        isShow.value = !isShow.value
-    })
-    hotkeys('alt+s', e => {
-        if (settingsStore.topbar.enableNavSearch) {
-            e.preventDefault()
-            isShow.value = true
-        }
-    })
-    hotkeys('esc', e => {
-        if (settingsStore.topbar.enableNavSearch) {
-            e.preventDefault()
-            isShow.value = false
-        }
-    })
-    if (settingsStore.app.routeBaseOn !== 'filesystem') {
-        routeStore.routes.map(item => {
-            getSourceList(item.children)
-        })
-    } else {
-        menuStore.menus.map(item => {
-            getSourceList(item.children)
-        })
-    }
-})
-
-function hasChildren(item) {
-    let flag = true
-    if (item.children) {
-        if (item.children.every(i => i.meta.sidebar === false)) {
-            flag = false
-        }
-    } else {
-        flag = false
-    }
-    return flag
-}
-function getSourceList(arr) {
-    arr.map(item => {
-        if (item.meta.sidebar !== false) {
-            if (hasChildren(item)) {
-                let baseBreadcrumb = item.meta.baseBreadcrumb ? deepClone(item.meta.baseBreadcrumb) : []
-                baseBreadcrumb.push(item.meta.title)
-                let child = deepClone(item.children)
-                child.map(c => {
-                    c.meta.baseIcon = item.meta.icon || item.meta.baseIcon
-                    c.meta.baseBreadcrumb = baseBreadcrumb
-                    c.meta.basePath = item.meta.basePath ? [item.meta.basePath, item.path].join('/') : item.path
-                })
-                getSourceList(child)
-            } else {
-                let breadcrumb = []
-                if (item.meta.baseBreadcrumb) {
-                    breadcrumb = deepClone(item.meta.baseBreadcrumb)
-                }
-                breadcrumb.push(item.meta.title)
-                let path = ''
-                if (isExternalLink(item.path)) {
-                    path = item.path
-                } else {
-                    path = item.meta.basePath ? [item.meta.basePath, item.path].join('/') : item.path
-                }
-                sourceList.value.push({
-                    icon: item.meta.icon || item.meta.baseIcon,
-                    title: item.meta.title,
-                    i18n: item.meta.i18n,
-                    breadcrumb: breadcrumb,
-                    path: path
-                })
-            }
-        }
-    })
-}
-function keyUp() {
-    if (resultList.value.length) {
-        actived.value -= 1
-        if (actived.value < 0) {
-            actived.value = resultList.value.length - 1
-        }
-        handleScroll()
-    }
-}
-function keyDown() {
-    if (resultList.value.length) {
-        actived.value += 1
-        if (actived.value > resultList.value.length - 1) {
-            actived.value = 0
-        }
-        handleScroll()
-    }
-}
-function keyEnter() {
-    if (actived.value !== -1) {
-        resultItemRef.value[actived.value].click()
-    }
-}
-function handleScroll() {
-    let scrollTo = 0
-    if (actived.value !== -1) {
-        scrollTo = resultRef.value.scrollTop
-        const activedOffsetTop = resultItemRef.value[actived.value].offsetTop
-        const activedClientHeight = resultItemRef.value[actived.value].clientHeight
-        const searchScrollTop = resultRef.value.scrollTop
-        const searchClientHeight = resultRef.value.clientHeight
-        if (activedOffsetTop + activedClientHeight > searchScrollTop + searchClientHeight) {
-            scrollTo = activedOffsetTop + activedClientHeight - searchClientHeight
-        } else if (activedOffsetTop <= searchScrollTop) {
-            scrollTo = activedOffsetTop
-        }
-    }
-    resultRef.value.scrollTo({
-        top: scrollTo
-    })
-}
-</script>
-
-<template>
-    <div id="search" :class="{'searching': isShow}" @click="isShow && eventBus.emit('global-search-toggle')">
-        <div class="container">
-            <div class="search-box" @click.stop>
-                <el-input ref="inputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" clearable @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
-                    <template #prefix>
-                        <el-icon>
-                            <svg-icon name="ep:search" />
-                        </el-icon>
-                    </template>
-                </el-input>
-                <div v-if="settingsStore.mode === 'pc'" class="tips">
-                    <div class="tip">
-                        <span>Alt</span>+<span>S</span>
-                        唤醒搜索面板
-                    </div>
-                    <div class="tip">
-                        <span>
-                            <el-icon>
-                                <svg-icon name="search-up" />
-                            </el-icon>
-                        </span>
-                        <span>
-                            <el-icon>
-                                <svg-icon name="search-down" />
-                            </el-icon>
-                        </span>
-                        切换搜索结果
-                    </div>
-                    <div class="tip">
-                        <span>
-                            <el-icon>
-                                <svg-icon name="search-enter" />
-                            </el-icon>
-                        </span>
-                        访问页面
-                    </div>
-                    <div class="tip">
-                        <span>ESC</span>
-                        退出
-                    </div>
-                </div>
-            </div>
-            <div ref="resultRef" class="result" :class="{'mobile': settingsStore.mode === 'mobile'}">
-                <router-link v-for="(item, index) in resultList" :key="item.path" v-slot="{ href, navigate }" custom :to="isShow ? item.path : ''">
-                    <a :ref="setResultItemRef" :href="isExternalLink(item.path) ? item.path : href" class="item" :class="{'actived': index === actived}" :target="isExternalLink(item.path) ? '_blank' : '_self'" @click="navigate" @mouseover="actived = index">
-                        <el-icon class="icon">
-                            <svg-icon v-if="item.icon" :name="item.icon" />
-                        </el-icon>
-                        <div class="info">
-                            <div class="title">
-                                {{ item.title }}
-                            </div>
-                            <div class="breadcrumb">
-                                <span v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex">
-                                    {{ bc }}
-                                    <el-icon>
-                                        <svg-icon name="ep:arrow-right" />
-                                    </el-icon>
-                                </span>
-                            </div>
-                            <div class="path">{{ item.path }}</div>
-                        </div>
-                    </a>
-                </router-link>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-#search {
-    position: fixed;
-    z-index: 2000;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--el-overlay-color-lighter);
-    backdrop-filter: blur(10px);
-    transition: all 0.2s;
-    transform: translateZ(0);
-    opacity: 0;
-    visibility: hidden;
-    &.searching {
-        opacity: 1;
-        visibility: visible;
-        .container {
-            transform: initial;
-            filter: initial;
-        }
-    }
-    .container {
-        display: flex;
-        flex-direction: column;
-        max-width: 800px;
-        height: 100%;
-        margin: 0 auto;
-        transition: all 0.2s;
-        transform: scale(1.1);
-        filter: blur(10px);
-        .search-box {
-            margin: 50px 20px 40px;
-            :deep(.el-input__inner) {
-                height: 52px;
-                line-height: 52px;
-            }
-            :deep(.el-input__icon) {
-                height: 100%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-            .tips {
-                display: flex;
-                align-items: center;
-                justify-content: space-evenly;
-                margin-top: 20px;
-                line-height: 24px;
-                font-size: 14px;
-                color: #fff;
-                span {
-                    margin: 0 5px;
-                    padding: 3px 8px 5px;
-                    border-radius: 5px;
-                    font-size: 12px;
-                    font-weight: bold;
-                    color: var(--el-text-color-primary);
-                    background-color: var(--el-fill-color);
-                    box-shadow: inset 0 -2px var(--el-fill-color-lighter), inset 0 0 1px 1px var(--el-fill-color-darker);
-                }
-            }
-        }
-        .result {
-            position: relative;
-            margin: 0 20px;
-            max-height: calc(100% - 250px);
-            border-radius: 5px;
-            overflow: auto;
-            background-color: var(--el-bg-color);
-            box-shadow: 0 0 0 1px var(--el-border-color-darker);
-            &.mobile {
-                max-height: calc(100% - 200px);
-            }
-            .item {
-                display: flex;
-                align-items: center;
-                text-decoration: none;
-                cursor: pointer;
-                transition: all 0.3s;
-                &.actived {
-                    background-color: var(--el-bg-color-page);
-                    .icon {
-                        color: var(--el-color-primary);
-                        transform: scale(1.2);
-                    }
-                    .info {
-                        border-left-color: var(--el-border-color);
-                        .title {
-                            color: var(--el-text-color-primary);
-                        }
-                        .breadcrumb,
-                        .path {
-                            color: var(--el-text-color-regular);
-                        }
-                    }
-                }
-                .icon {
-                    flex: 0 0 66px;
-                    text-align: center;
-                    color: var(--el-color-info);
-                    font-size: 20px;
-                    transition: all 0.3s;
-                }
-                .info {
-                    flex: 1;
-                    height: 70px;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                    border-left: 1px solid var(--el-border-color-lighter);
-                    padding: 5px 10px 7px;
-                    transition: all 0.3s;
-                    @include text-overflow(1, true);
-                    .title {
-                        font-size: 18px;
-                        font-weight: bold;
-                        color: var(--el-text-color-regular);
-                        @include text-overflow(1, true);
-                    }
-                    .breadcrumb,
-                    .path {
-                        font-size: 12px;
-                        color: var(--el-text-color-secondary);
-                        transition: all 0.3s;
-                        @include text-overflow(1, true);
-                    }
-                    .breadcrumb {
-                        span {
-                            margin-right: 5px;
-                            &:last-child i {
-                                display: none;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-</style>
diff --git a/src/layout/components/SidebarItem/index.vue b/src/layout/components/SidebarItem/index.vue
deleted file mode 100644
index 1e6bcd7e..00000000
--- a/src/layout/components/SidebarItem/index.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<script setup name="SidebarItem">
-import SidebarItem from './index.vue'
-import { isExternalLink, resolveRoutePath } from '@/utils'
-
-const props = defineProps({
-    item: {
-        type: Object,
-        required: true
-    },
-    basePath: {
-        type: String,
-        default: ''
-    }
-})
-
-const hasChildren = computed(() => {
-    let flag = true
-    if (props.item.children) {
-        if (props.item.children.every(item => item.meta.sidebar === false)) {
-            flag = false
-        }
-    } else {
-        flag = false
-    }
-    return flag
-})
-</script>
-
-<template>
-    <div class="sidebar-item">
-        <el-sub-menu v-if="item.path == undefined" :title="item.meta.title" :index="JSON.stringify(item)">
-            <template #title>
-                <el-icon v-if="item.meta.icon" class="title-icon">
-                    <svg-icon :name="item.meta.icon" />
-                </el-icon>
-                <span class="title">{{ item.meta.title }}</span>
-            </template>
-            <template v-for="route in item.children">
-                <SidebarItem v-if="route.meta.sidebar !== false" :key="route.path" :item="route" />
-            </template>
-        </el-sub-menu>
-        <router-link v-else-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolveRoutePath(basePath, item.path)">
-            <a :href="isExternalLink(resolveRoutePath(basePath, item.path)) ? resolveRoutePath(basePath, item.path) : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="isExternalLink(resolveRoutePath(basePath, item.path)) ? '_blank' : '_self'" @click="navigate">
-                <el-menu-item :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
-                    <el-icon v-if="item.meta.icon" class="title-icon">
-                        <svg-icon :name="item.meta.icon" />
-                    </el-icon>
-                    <span class="title">{{ item.meta.title }}</span>
-                </el-menu-item>
-            </a>
-        </router-link>
-        <el-sub-menu v-else :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
-            <template #title>
-                <el-icon v-if="item.meta.icon" class="title-icon">
-                    <svg-icon :name="item.meta.icon" />
-                </el-icon>
-                <span class="title">{{ item.meta.title }}</span>
-            </template>
-            <template v-for="route in item.children">
-                <SidebarItem v-if="route.meta.sidebar !== false" :key="route.path" :item="route" :base-path="resolveRoutePath(basePath, item.path)" />
-            </template>
-        </el-sub-menu>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.el-menu-item),
-:deep(.el-menu-item span.title),
-:deep(.el-sub-menu__title),
-:deep(.el-sub-menu__title span.title) {
-    flex: 1;
-    vertical-align: inherit;
-    @include text-overflow;
-}
-:deep(.el-menu-item),
-:deep(.el-sub-menu__title) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-:deep(.el-sub-menu),
-:deep(.el-menu-item) {
-    .title-icon {
-        width: 20px;
-        font-size: 20px;
-        vertical-align: -0.25em;
-        transition: transform 0.3s;
-        color: unset;
-    }
-    .title-icon + .title {
-        margin-left: 10px;
-    }
-    &:hover > .title-icon,
-    .el-sub-menu__title:hover > .title-icon {
-        transform: scale(1.2);
-    }
-}
-a {
-    cursor: pointer;
-    color: inherit;
-    text-decoration: none;
-}
-.el-sub-menu__title {
-    > .badge {
-        &-dot {
-            right: 40px;
-        }
-        &-text {
-            right: 40px;
-        }
-    }
-}
-</style>
-
-<style lang="scss">
-.el-menu--inline {
-    background-color: var(--g-sub-sidebar-menu-bg) !important;
-    .el-menu-item,
-    .el-sub-menu > .el-sub-menu__title {
-        color: var(--g-sub-sidebar-menu-color);
-        background-color: var(--g-sub-sidebar-menu-bg) !important;
-        &:hover {
-            color: var(--g-sub-sidebar-menu-hover-color) !important;
-            background-color: var(--g-sub-sidebar-menu-hover-bg) !important;
-        }
-    }
-}
-.el-menu-item,
-.el-sub-menu__title {
-    color: var(--g-sub-sidebar-menu-color) !important;
-    background: transparent !important;
-    &:hover {
-        color: var(--g-sub-sidebar-menu-hover-color) !important;
-        background-color: var(--g-sub-sidebar-menu-hover-bg) !important;
-    }
-}
-.el-menu-item.is-active,
-.el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title,
-.el-sub-menu .el-menu--inline .el-menu-item.is-active {
-    color: var(--g-sub-sidebar-menu-active-color) !important;
-    background-color: var(--g-sub-sidebar-menu-active-bg) !important;
-    .icon,
-    .el-sub-menu__icon-arrow {
-        color: unset;
-    }
-}
-</style>
diff --git a/src/layout/components/SubSidebar/index.vue b/src/layout/components/SubSidebar/index.vue
deleted file mode 100644
index 20d574d6..00000000
--- a/src/layout/components/SubSidebar/index.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<script setup name="SubSidebar">
-import Logo from '../Logo/index.vue'
-import SidebarItem from '../SidebarItem/index.vue'
-import useSettingsStore from '@/store/modules/settings'
-import useMenuStore from '@/store/modules/menu'
-
-const settingsStore = useSettingsStore()
-const menuStore = useMenuStore()
-
-const sidebarScrollTop = ref(0)
-
-function onSidebarScroll(e) {
-    sidebarScrollTop.value = e.target.scrollTop
-}
-</script>
-
-<template>
-    <div v-if="['side', 'head', 'single'].includes(settingsStore.menu.menuMode) || settingsStore.mode === 'mobile'" class="sub-sidebar-container" :class="{'is-collapse': settingsStore.mode === 'pc' && settingsStore.menu.subMenuCollapse}" @scroll="onSidebarScroll">
-        <Logo
-            :show-logo="settingsStore.menu.menuMode === 'single'" :class="{
-                'sidebar-logo': true,
-                'sidebar-logo-bg': settingsStore.menu.menuMode === 'single',
-                'shadow': sidebarScrollTop
-            }"
-        />
-        <!-- 侧边栏模式（无主导航） -->
-        <el-menu
-            :unique-opened="settingsStore.menu.subMenuUniqueOpened" :default-openeds="menuStore.defaultOpenedPaths" :default-active="$route.meta.activeMenu || $route.path" :collapse="settingsStore.mode === 'pc' && settingsStore.menu.subMenuCollapse" :collapse-transition="false" :class="{
-                'is-collapse-without-logo': settingsStore.menu.menuMode !== 'single' && settingsStore.menu.subMenuCollapse
-            }"
-        >
-            <transition-group name="sub-sidebar">
-                <template v-for="(route, index) in menuStore.sidebarMenus">
-                    <SidebarItem v-if="route.meta.sidebar !== false" :key="route.path || index" :item="route" :base-path="route.path" />
-                </template>
-            </transition-group>
-        </el-menu>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.sub-sidebar-container {
-    overflow-x: hidden;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    // firefox隐藏滚动条
-    scrollbar-width: none;
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-        display: none;
-    }
-
-    width: var(--g-sub-sidebar-width);
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    background-color: var(--g-sub-sidebar-bg);
-    box-shadow: 10px 0 10px -10px var(--g-box-shadow-color);
-    transition: background-color 0.3s, var(--el-transition-box-shadow), left 0.3s, width 0.3s;
-    &.is-collapse {
-        width: 64px;
-        .sidebar-logo {
-            &:not(.sidebar-logo-bg) {
-                display: none;
-            }
-            :deep(span) {
-                display: none;
-            }
-        }
-    }
-    .sidebar-logo {
-        transition: box-shadow 0.2s, background-color 0.3s, color 0.3s;
-        background-color: var(--g-sub-sidebar-bg);
-        &:not(.sidebar-logo-bg) {
-            :deep(span) {
-                color: var(--g-sub-sidebar-menu-color);
-            }
-        }
-        &.sidebar-logo-bg {
-            background-color: var(--g-main-sidebar-bg);
-        }
-        &.shadow {
-            box-shadow: 0 10px 10px -10px var(--g-box-shadow-color);
-        }
-    }
-    .el-menu {
-        border-right: 0;
-        padding-top: var(--g-sidebar-logo-height);
-        transition: border-color 0.3s, background-color 0.3s, color 0.3s, padding-top 0.3s;
-        background-color: var(--g-sub-sidebar-bg);
-        &:not(.el-menu--collapse) {
-            width: inherit;
-        }
-        &.is-collapse-without-logo {
-            padding-top: 0;
-        }
-        &.el-menu--collapse {
-            :deep(.title-icon) {
-                margin-right: 0;
-            }
-            :deep(.el-menu-item),
-            :deep(.el-sub-menu__title) {
-                span,
-                .el-sub-menu__icon-arrow {
-                    display: none;
-                }
-            }
-        }
-        &.menu-radius:not(.el-menu--collapse) {
-            .sidebar-item {
-                padding: 0 10px;
-                &:first-child {
-                    padding-top: 10px;
-                }
-                &:last-child {
-                    padding-bottom: 10px;
-                }
-            }
-            :deep(.el-menu--inline),
-            :deep(.el-menu-item),
-            :deep(.el-sub-menu__title) {
-                border-radius: 10px;
-            }
-        }
-    }
-}
-// 次侧边栏动画
-.sub-sidebar-enter-active {
-    transition: opacity 0.3s, transform 0.3s;
-}
-.sub-sidebar-enter-from,
-.sub-sidebar-leave-active {
-    opacity: 0;
-    transform: translateY(30px) skewY(10deg);
-}
-.sub-sidebar-leave-active {
-    position: absolute;
-}
-</style>
diff --git a/src/layout/components/Tools/index.vue b/src/layout/components/Tools/index.vue
deleted file mode 100644
index 84ac25e9..00000000
--- a/src/layout/components/Tools/index.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<script setup name="Tools">
-import { useFullscreen } from '@vueuse/core'
-import eventBus from '@/utils/eventBus'
-import { useMainPage } from '@/utils/composables'
-import useSettingsStore from '@/store/modules/settings'
-import useUserStore from '@/store/modules/user'
-
-const router = useRouter()
-
-const settingsStore = useSettingsStore()
-const userStore = useUserStore()
-
-const { isFullscreen, toggle } = useFullscreen()
-
-function userCommand(command) {
-    switch (command) {
-        case 'dashboard':
-            router.push({
-                name: 'dashboard'
-            })
-            break
-        case 'setting':
-            router.push({
-                name: 'personalSetting'
-            })
-            break
-        case 'logout':
-            userStore.logout().then(() => {
-                router.push({
-                    name: 'login'
-                })
-            })
-            break
-    }
-}
-function pro() {
-    window.open('https://hooray.gitee.io/fantastic-admin-pro-example/', 'top')
-}
-</script>
-
-<template>
-    <div class="tools">
-        <div class="buttons">
-            <span v-if="settingsStore.mode == 'pc'" class="item item-pro" @click="pro">
-                <el-icon>
-                    <svg-icon name="pro" />
-                </el-icon>
-                <span class="title">查看专业版</span>
-            </span>
-            <span v-if="settingsStore.topbar.enableNavSearch" class="item" @click="eventBus.emit('global-search-toggle')">
-                <el-icon>
-                    <svg-icon name="ep:search" />
-                </el-icon>
-            </span>
-            <span v-if="settingsStore.mode === 'pc' && settingsStore.topbar.enableFullscreen" class="item" @click="toggle">
-                <el-icon>
-                    <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
-                </el-icon>
-            </span>
-            <span v-if="settingsStore.topbar.enablePageReload" class="item" @click="useMainPage().reload()">
-                <el-icon>
-                    <svg-icon name="ep:refresh-right" />
-                </el-icon>
-            </span>
-            <span v-if="settingsStore.topbar.enableColorScheme" class="item" @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')">
-                <el-icon>
-                    <svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" />
-                    <svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />
-                </el-icon>
-            </span>
-            <span v-if="settingsStore.topbar.enableAppSetting" class="item" @click="eventBus.emit('global-theme-toggle')">
-                <el-icon>
-                    <svg-icon name="ep:setting" />
-                </el-icon>
-            </span>
-        </div>
-        <el-dropdown class="user-container" size="default" @command="userCommand">
-            <div class="user-wrapper">
-                <el-avatar size="small">
-                    <el-icon>
-                        <svg-icon name="ep:user-filled" />
-                    </el-icon>
-                </el-avatar>
-                {{ userStore.account }}
-                <el-icon>
-                    <svg-icon name="ep:caret-bottom" />
-                </el-icon>
-            </div>
-            <template #dropdown>
-                <el-dropdown-menu class="user-dropdown">
-                    <el-dropdown-item v-if="settingsStore.dashboard.enable" command="dashboard">控制台</el-dropdown-item>
-                    <el-dropdown-item command="setting">个人设置</el-dropdown-item>
-                    <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
-                </el-dropdown-menu>
-            </template>
-        </el-dropdown>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.tools {
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-    white-space: nowrap;
-    .buttons {
-        margin-right: 20px;
-        .item {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            height: 24px;
-            width: 34px;
-            cursor: pointer;
-            vertical-align: middle;
-            .el-icon {
-                color: var(--el-text-color-primary);
-                transition: var(--el-transition-color);
-            }
-        }
-        .item-pro {
-            display: inline-block;
-            width: auto;
-            padding: 0 10px;
-            transform-origin: right center;
-            animation: pro-text 3s ease-out infinite;
-            @keyframes pro-text {
-                0%,
-                20% {
-                    transform: scale(1);
-                }
-                50%,
-                70% {
-                    transform: scale(1.2);
-                }
-                100% {
-                    transform: scale(1);
-                }
-            }
-            .el-icon {
-                vertical-align: middle;
-            }
-            .title {
-                padding-left: 5px;
-                font-weight: bold;
-                font-size: 14px;
-                background-image: linear-gradient(to right, #ffa237, #fc455d);
-                /* stylelint-disable-next-line property-no-vendor-prefix */
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-            }
-        }
-    }
-}
-:deep(.user-container) {
-    display: inline-block;
-    height: 24px;
-    line-height: 24px;
-    cursor: pointer;
-    .user-wrapper {
-        .el-avatar {
-            vertical-align: middle;
-            margin-top: -2px;
-            margin-right: 4px;
-        }
-    }
-}
-</style>
diff --git a/src/layout/components/Topbar/index.vue b/src/layout/components/Topbar/index.vue
deleted file mode 100644
index 851a0bef..00000000
--- a/src/layout/components/Topbar/index.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<script setup name="Topbar">
-import { compile } from 'path-to-regexp'
-import useSettingsStore from '@/store/modules/settings'
-import Tools from '../Tools/index.vue'
-
-const route = useRoute()
-
-const settingsStore = useSettingsStore()
-
-const enableSidebarCollapse = computed(() => {
-    return settingsStore.mode === 'mobile' || (
-        ['side', 'head', 'single'].includes(settingsStore.menu.menuMode) &&
-        settingsStore.topbar.enableSidebarCollapse
-    )
-})
-
-const breadcrumbList = computed(() => {
-    let breadcrumbList = []
-    if (settingsStore.dashboard.enable) {
-        breadcrumbList.push({
-            path: '/dashboard',
-            title: settingsStore.dashboard.title
-        })
-    }
-    if (route.meta.breadcrumbNeste) {
-        breadcrumbList.push(...route.meta.breadcrumbNeste.filter(item => item.hide === false))
-    }
-    return breadcrumbList
-})
-
-const scrollTop = ref(0)
-onMounted(() => {
-    window.addEventListener('scroll', onScroll)
-})
-onUnmounted(() => {
-    window.removeEventListener('scroll', onScroll)
-})
-function onScroll() {
-    scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop
-}
-
-function pathCompile(path) {
-    let toPath = compile(path)
-    return toPath(route.params)
-}
-</script>
-
-<template>
-    <div
-        class="topbar-container" :class="{
-            'fixed': settingsStore.topbar.fixed,
-            'shadow': scrollTop
-        }" data-fixed-calc-width
-    >
-        <div class="left-box">
-            <div v-if="enableSidebarCollapse" class="sidebar-collapse" :class="{'is-collapse': settingsStore.menu.subMenuCollapse}" @click="settingsStore.toggleSidebarCollapse()">
-                <el-icon>
-                    <svg-icon name="toolbar-collapse" />
-                </el-icon>
-            </div>
-            <el-breadcrumb v-if="settingsStore.topbar.enableBreadcrumb && settingsStore.mode === 'pc' && settingsStore.app.routeBaseOn !== 'filesystem'">
-                <transition-group name="breadcrumb">
-                    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path" :to="index < breadcrumbList.length - 1 ? pathCompile(item.path) : ''">
-                        {{ item.title }}
-                    </el-breadcrumb-item>
-                </transition-group>
-            </el-breadcrumb>
-        </div>
-        <Tools />
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.topbar-container {
-    position: absolute;
-    z-index: 999;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: var(--g-topbar-height);
-    background-color: var(--g-toolbar-bg);
-    transition: width 0.3s, top 0.3s, transform 0.3s, background-color 0.3s, var(--el-transition-box-shadow);
-    &.fixed {
-        position: fixed;
-        &.shadow {
-            box-shadow: 0 10px 10px -10px var(--g-box-shadow-color);
-        }
-    }
-    .left-box {
-        display: flex;
-        align-items: center;
-        padding-right: 50px;
-        overflow: hidden;
-        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 50px), transparent);
-        mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 50px), transparent);
-        .sidebar-collapse {
-            display: flex;
-            align-items: center;
-            padding: 0 20px;
-            height: 50px;
-            cursor: pointer;
-            .el-icon {
-                color: var(--el-text-color-primary);
-                transition: var(--el-transition-color), var(--el-transition-md-fade);
-            }
-            &:hover .el-icon {
-                color: var(--el-color-primary);
-            }
-            &.is-collapse .el-icon {
-                transform: rotateZ(-180deg);
-            }
-            & + .el-breadcrumb {
-                margin-left: 0;
-            }
-        }
-        :deep(.el-breadcrumb) {
-            margin-left: 20px;
-            white-space: nowrap;
-            .el-breadcrumb__item {
-                display: inline-block;
-                float: none;
-                span {
-                    font-weight: normal;
-                }
-                &:last-child span {
-                    color: #97a8be;
-                }
-            }
-        }
-    }
-}
-// 面包屑动画
-.breadcrumb-enter-active {
-    transition: all 0.25s;
-}
-.breadcrumb-enter-from,
-.breadcrumb-leave-active {
-    opacity: 0;
-    transform: translateX(30px) skewX(-50deg);
-}
-</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
deleted file mode 100644
index 392ffd04..00000000
--- a/src/layout/index.vue
+++ /dev/null
@@ -1,210 +0,0 @@
-<script setup name="Layout">
-import hotkeys from 'hotkeys-js'
-import Header from './components/Header/index.vue'
-import MainSidebar from './components/MainSidebar/index.vue'
-import SubSidebar from './components/SubSidebar/index.vue'
-import Topbar from './components/Topbar/index.vue'
-import Search from './components/Search/index.vue'
-import AppSetting from './components/AppSetting/index.vue'
-import BuyIt from './components/BuyIt/index.vue'
-import useSettingsStore from '@/store/modules/settings'
-import useKeepAliveStore from '@/store/modules/keepAlive'
-import { useMainPage } from '@/utils/composables'
-
-const routeInfo = useRoute()
-
-const settingsStore = useSettingsStore()
-const keepAliveStore = useKeepAliveStore()
-
-const showCopyright = computed(() => {
-    return typeof routeInfo.meta.copyright !== 'undefined' ? routeInfo.meta.copyright : settingsStore.copyright.enable
-})
-
-watch(() => settingsStore.menu.subMenuCollapse, val => {
-    if (settingsStore.mode === 'mobile') {
-        if (!val) {
-            document.querySelector('body').classList.add('hidden')
-        } else {
-            document.querySelector('body').classList.remove('hidden')
-        }
-    }
-})
-
-watch(() => routeInfo.path, () => {
-    if (settingsStore.mode === 'mobile') {
-        settingsStore.$patch(state => {
-            state.menu.subMenuCollapse = true
-        })
-    }
-})
-
-onMounted(() => {
-    hotkeys('f5', e => {
-        if (settingsStore.topbar.enablePageReload) {
-            e.preventDefault()
-            useMainPage().reload()
-        }
-    })
-})
-onUnmounted(() => {
-    hotkeys.unbind('f5')
-})
-</script>
-
-<template>
-    <div class="layout">
-        <div id="app-main">
-            <Header />
-            <div class="wrapper">
-                <div class="sidebar-container" :class="{'show': settingsStore.mode === 'mobile' && !settingsStore.menu.subMenuCollapse}">
-                    <MainSidebar />
-                    <SubSidebar />
-                </div>
-                <div class="sidebar-mask" :class="{'show': settingsStore.mode === 'mobile' && !settingsStore.menu.subMenuCollapse}" @click="settingsStore.toggleSidebarCollapse()" />
-                <div class="main-container" :style="{'padding-bottom': $route.meta.paddingBottom}">
-                    <Topbar v-if="!(settingsStore.menu.menuMode === 'head' && !settingsStore.topbar.enableSidebarCollapse && !settingsStore.topbar.enableBreadcrumb)" />
-                    <div class="main">
-                        <router-view v-slot="{ Component, route }">
-                            <transition name="main" mode="out-in" appear>
-                                <keep-alive :include="keepAliveStore.list">
-                                    <component :is="Component" :key="route.fullPath" />
-                                </keep-alive>
-                            </transition>
-                        </router-view>
-                    </div>
-                    <Copyright v-if="showCopyright" />
-                </div>
-            </div>
-            <el-backtop :right="20" :bottom="20" title="回到顶部" />
-        </div>
-        <Search />
-        <AppSetting />
-        <BuyIt />
-    </div>
-</template>
-
-<style lang="scss" scoped>
-[data-mode="mobile"] {
-    .sidebar-container {
-        transform: translateX(calc((var(--g-main-sidebar-width) + var(--g-sub-sidebar-width)) * -1));
-        &.show {
-            transform: translateX(0);
-        }
-    }
-    .main-container {
-        margin-left: 0 !important;
-    }
-    &[data-menu-mode="single"] {
-        .sidebar-container {
-            transform: translateX(calc(var(--g-sub-sidebar-width) * -1));
-            &.show {
-                transform: translateX(0);
-            }
-        }
-    }
-}
-.layout {
-    height: 100%;
-}
-#app-main {
-    width: 100%;
-    height: 100%;
-    margin: 0 auto;
-    transition: all 0.2s;
-}
-.wrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    box-shadow: -1px 0 0 0 var(--g-box-shadow-color);
-    transition: padding-top 0.3s;
-    .sidebar-container {
-        position: fixed;
-        z-index: 1010;
-        top: 0;
-        bottom: 0;
-        display: flex;
-        transition: transform 0.3s, top 0.3s;
-        width: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
-    }
-    .sidebar-mask {
-        position: fixed;
-        z-index: 1000;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgb(0 0 0 / 50%);
-        backdrop-filter: blur(2px);
-        transition: all 0.2s;
-        transform: translateZ(0);
-        opacity: 0;
-        visibility: hidden;
-        &.show {
-            opacity: 1;
-            visibility: visible;
-        }
-    }
-    .main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container {
-        left: var(--g-main-sidebar-width);
-    }
-    .main-container {
-        display: flex;
-        flex-direction: column;
-        min-height: 100%;
-        margin-left: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
-        background-color: var(--g-main-bg);
-        transition: margin-left 0.3s, background-color 0.3s;
-        .topbar-container {
-            top: 0;
-            z-index: 998;
-        }
-        .main {
-            height: 100%;
-            flex: auto;
-            position: relative;
-            overflow: hidden;
-            transition: 0.3s;
-        }
-        .topbar-container + .main {
-            margin: var(--g-topbar-height) 0 0;
-        }
-    }
-}
-header:not(.header-leave-active) + .wrapper {
-    padding-top: var(--g-header-height);
-    .sidebar-container {
-        top: var(--g-header-height);
-        :deep(.sidebar-logo) {
-            display: none;
-        }
-        :deep(.el-menu) {
-            padding-top: 0;
-        }
-    }
-    .main-container {
-        .topbar-container {
-            top: var(--g-header-height);
-            :deep(.tools) {
-                display: none;
-            }
-        }
-    }
-}
-
-// 主内容区动画
-.main-enter-active {
-    transition: 0.2s;
-}
-.main-leave-active {
-    transition: 0.15s;
-}
-.main-enter-from {
-    opacity: 0;
-    margin-left: -20px;
-}
-.main-leave-to {
-    opacity: 0;
-    margin-left: 20px;
-}
-</style>
diff --git a/src/layouts/components/AppSetting/index.vue b/src/layouts/components/AppSetting/index.vue
new file mode 100644
index 00000000..8918186c
--- /dev/null
+++ b/src/layouts/components/AppSetting/index.vue
@@ -0,0 +1,532 @@
+<script lang="ts" setup name="AppSetting">
+import { useClipboard } from '@vueuse/core'
+import eventBus from '@/utils/eventBus'
+import useSettingsStore from '@/store/modules/settings'
+import useMenuStore from '@/store/modules/menu'
+import globalSettingsDefault from '@/settings.default'
+
+const route = useRoute()
+
+const settingsStore = useSettingsStore()
+const menuStore = useMenuStore()
+
+const isShow = ref(false)
+
+const settings = ref(globalSettingsDefault)
+
+watch(() => settings, () => {
+  settingsStore.updateSettings(settings.value)
+  menuStore.setActived(0)
+  settings.value.menu.menuMode !== 'single' && menuStore.setActived(route.fullPath)
+}, {
+  deep: true,
+})
+
+onMounted(() => {
+  eventBus.on('global-theme-toggle', () => {
+    isShow.value = !isShow.value
+  })
+})
+
+const { copy, copied, isSupported } = useClipboard()
+
+watch(copied, (val) => {
+  if (val)
+    ElMessage.success('复制成功，请粘贴到 src/settings.ts 文件中！')
+})
+
+function handleCopy() {
+  copy(JSON.stringify(settings.value, null, 4))
+}
+</script>
+
+<template>
+  <div>
+    <el-drawer v-model="isShow" title="应用配置" direction="rtl" :size="360">
+      <el-alert title="应用配置可实时预览效果，但只是临时生效，要想真正作用于项目，可以点击下方的“复制配置”按钮，并将配置粘贴到 src/settings.ts 文件中。同时建议在生产环境隐藏应用配置功能。" type="error" :closable="false" />
+      <el-divider>颜色主题</el-divider>
+      <div class="color-scheme">
+        <div class="switch" :class="settings.app.colorScheme" @click="settings.app.colorScheme = settings.app.colorScheme === 'dark' ? 'light' : 'dark'">
+          <el-icon class="icon">
+            <svg-icon :name="settings.app.colorScheme === 'light' ? 'ep:sunny' : 'ep:moon'" />
+          </el-icon>
+        </div>
+      </div>
+      <el-divider v-if="settingsStore.mode === 'pc'">
+        导航栏模式
+      </el-divider>
+      <div v-if="settingsStore.mode === 'pc'" class="menu-mode">
+        <el-tooltip content="侧边栏模式（含主导航）" placement="top" :show-after="500">
+          <div class="mode mode-side" :class="{ active: settings.menu.menuMode === 'side' }" @click="settings.menu.menuMode = 'side'">
+            <div class="mode-container" />
+            <el-icon>
+              <svg-icon name="ep:check" />
+            </el-icon>
+          </div>
+        </el-tooltip>
+        <el-tooltip content="顶部模式" placement="top" :show-after="500">
+          <div class="mode mode-head" :class="{ active: settings.menu.menuMode === 'head' }" @click="settings.menu.menuMode = 'head'">
+            <div class="mode-container" />
+            <el-icon>
+              <svg-icon name="ep:check" />
+            </el-icon>
+          </div>
+        </el-tooltip>
+        <el-tooltip content="侧边栏模式（不含主导航）" placement="top" :show-after="500">
+          <div class="mode mode-single" :class="{ active: settings.menu.menuMode === 'single' }" @click="settings.menu.menuMode = 'single'">
+            <div class="mode-container" />
+            <el-icon>
+              <svg-icon name="ep:check" />
+            </el-icon>
+          </div>
+        </el-tooltip>
+      </div>
+      <el-divider>导航栏</el-divider>
+      <div class="setting-item">
+        <div class="label">
+          主导航切换跳转
+          <el-tooltip content="开启该功能后，切换主导航时，页面自动跳转至该主导航下，次导航里第一个导航" placement="top">
+            <el-icon>
+              <svg-icon name="ep:question-filled" />
+            </el-icon>
+          </el-tooltip>
+        </div>
+        <el-switch v-model="settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settings.menu.menuMode)" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          次导航保持展开一个
+          <el-tooltip content="开启该功能后，次导航只保持单个菜单的展开" placement="top">
+            <el-icon>
+              <svg-icon name="ep:question-filled" />
+            </el-icon>
+          </el-tooltip>
+        </div>
+        <el-switch v-model="settings.menu.subMenuUniqueOpened" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          次导航是否折叠
+        </div>
+        <el-switch v-model="settings.menu.subMenuCollapse" />
+      </div>
+      <div v-if="settingsStore.mode === 'pc'" class="setting-item">
+        <div class="label">
+          显示次导航折叠按钮
+        </div>
+        <el-switch v-model="settings.menu.enableSubMenuCollapseButton" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          是否启用快捷键
+        </div>
+        <el-switch v-model="settings.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.menu.menuMode)" />
+      </div>
+      <el-divider>顶栏</el-divider>
+      <div class="setting-item">
+        <div class="label">
+          是否固定
+        </div>
+        <el-switch v-model="settings.topbar.fixed" />
+      </div>
+      <el-divider>工具栏</el-divider>
+      <div v-if="settingsStore.mode === 'pc'" class="setting-item">
+        <div class="label">
+          全屏
+          <el-tooltip content="该功能使用场景极少，用户习惯于通过窗口“最大化”功能来扩大显示区域，以显示更多内容，并且使用 F11 键也可以进入全屏效果" placement="top">
+            <el-icon>
+              <svg-icon name="ep:question-filled" />
+            </el-icon>
+          </el-tooltip>
+        </div>
+        <el-switch v-model="settings.toolbar.enableFullscreen" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          页面刷新
+          <el-tooltip content="开启时会阻止原生 F5 键刷新功能，并采用框架提供的刷新模式进行页面刷新" placement="top">
+            <el-icon>
+              <svg-icon name="ep:question-filled" />
+            </el-icon>
+          </el-tooltip>
+        </div>
+        <el-switch v-model="settings.toolbar.enablePageReload" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          颜色主题
+          <el-tooltip content="开启后可在明亮/暗黑模式中切换" placement="top">
+            <el-icon>
+              <svg-icon name="ep:question-filled" />
+            </el-icon>
+          </el-tooltip>
+        </div>
+        <el-switch v-model="settings.toolbar.enableColorScheme" />
+      </div>
+      <el-divider v-if="settingsStore.mode === 'pc'">
+        面包屑导航
+      </el-divider>
+      <div v-if="settingsStore.mode === 'pc'" class="setting-item">
+        <div class="label">
+          是否启用
+        </div>
+        <el-switch v-model="settings.breadcrumb.enable" />
+      </div>
+      <el-divider>导航搜索</el-divider>
+      <div class="setting-item">
+        <div class="label">
+          是否启用
+          <el-tooltip content="对导航进行快捷搜索" placement="top">
+            <el-icon>
+              <svg-icon name="ep:question-filled" />
+            </el-icon>
+          </el-tooltip>
+        </div>
+        <el-switch v-model="settings.navSearch.enable" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          是否启用快捷键
+        </div>
+        <el-switch v-model="settings.navSearch.enableHotkeys" :disabled="!settings.navSearch.enable" />
+      </div>
+      <el-divider>底部版权</el-divider>
+      <div class="setting-item">
+        <div class="label">
+          是否启用
+        </div>
+        <el-switch v-model="settings.copyright.enable" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          日期
+        </div>
+        <el-input v-model="settings.copyright.dates" size="small" :disabled="!settings.copyright.enable" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          公司
+        </div>
+        <el-input v-model="settings.copyright.company" size="small" :disabled="!settings.copyright.enable" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          网址
+        </div>
+        <el-input v-model="settings.copyright.website" size="small" :disabled="!settings.copyright.enable" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          备案
+        </div>
+        <el-input v-model="settings.copyright.beian" size="small" :disabled="!settings.copyright.enable" />
+      </div>
+      <el-divider>控制台</el-divider>
+      <div class="setting-item">
+        <div class="label">
+          是否开启
+          <el-tooltip content="该功能开启时，登录成功默认进入控制台页面，反之则默认进入导航栏里第一个导航页面" placement="top">
+            <el-icon>
+              <svg-icon name="ep:question-filled" />
+            </el-icon>
+          </el-tooltip>
+        </div>
+        <el-switch v-model="settings.dashboard.enable" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          控制台名称
+        </div>
+        <el-input v-model="settings.dashboard.title" size="small" />
+      </div>
+      <el-divider>其它</el-divider>
+      <div class="setting-item">
+        <div class="label">
+          组件尺寸
+          <el-tooltip content="全局设置 Element Plus 组件的默认尺寸大小" placement="top">
+            <el-icon>
+              <svg-icon name="ep:question-filled" />
+            </el-icon>
+          </el-tooltip>
+        </div>
+        <el-radio-group v-model="settings.app.elementSize" size="small">
+          <el-radio-button label="large">
+            较大
+          </el-radio-button>
+          <el-radio-button label="default">
+            默认
+          </el-radio-button>
+          <el-radio-button label="small">
+            稍小
+          </el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          是否启用权限
+        </div>
+        <el-switch v-model="settings.app.enablePermission" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          载入进度条
+          <el-tooltip content="该功能开启时，跳转路由会看到页面顶部有进度条" placement="top">
+            <el-icon>
+              <svg-icon name="ep:question-filled" />
+            </el-icon>
+          </el-tooltip>
+        </div>
+        <el-switch v-model="settings.app.enableProgress" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          动态标题
+          <el-tooltip content="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置" placement="top">
+            <el-icon>
+              <svg-icon name="ep:question-filled" />
+            </el-icon>
+          </el-tooltip>
+        </div>
+        <el-switch v-model="settings.app.enableDynamicTitle" />
+      </div>
+      <template v-if="isSupported" #footer>
+        <el-button type="primary" @click="handleCopy">
+          <template #icon>
+            <el-icon>
+              <svg-icon name="ep:document-copy" />
+            </el-icon>
+          </template>
+          复制配置
+        </el-button>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-drawer__header) {
+  margin-bottom: initial;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--el-border-color);
+}
+
+:deep(.el-drawer__footer) {
+  padding: 20px;
+  border-top: 1px solid var(--el-border-color);
+  transition: var(--el-transition-border);
+
+  .el-button {
+    width: 100%;
+  }
+}
+
+:deep(.el-divider) {
+  margin: 36px 0 24px;
+}
+
+.color-scheme {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 10px;
+
+  $width: 50px;
+
+  .switch {
+    width: $width;
+    height: 30px;
+    border-radius: 15px;
+    cursor: pointer;
+    background-color: var(--el-fill-color-darker);
+    transition: background-color 0.3s;
+
+    &.dark {
+      .icon {
+        margin-left: calc($width - 24px - 3px);
+      }
+    }
+
+    .icon {
+      margin: 3px;
+      padding: 5px;
+      font-size: 24px;
+      border-radius: 50%;
+      background-color: var(--el-fill-color-lighter);
+      transition: margin-left 0.3s, background-color 0.3s;
+    }
+  }
+}
+
+.menu-mode {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 10px;
+
+  .mode {
+    position: relative;
+    width: 80px;
+    height: 55px;
+    margin: 10px;
+    border-radius: 5px;
+    overflow: hidden;
+    cursor: pointer;
+    background-color: var(--g-app-bg);
+    box-shadow: 0 0 5px 1px var(--el-border-color-lighter);
+    transition: 0.2s;
+
+    &:hover {
+      box-shadow: 0 0 5px 1px var(--el-border-color-darker);
+    }
+
+    &.active {
+      box-shadow: 0 0 0 2px var(--el-color-primary);
+    }
+
+    &::before,
+    &::after,
+    .mode-container {
+      pointer-events: none;
+      position: absolute;
+      border-radius: 3px;
+    }
+
+    .mode-container::before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: var(--g-sub-sidebar-menu-active-bg);
+      opacity: 0.2;
+    }
+
+    &-side {
+      &::before {
+        content: "";
+        top: 5px;
+        left: 5px;
+        bottom: 5px;
+        width: 10px;
+        background-color: var(--g-sub-sidebar-menu-active-bg);
+      }
+
+      &::after {
+        content: "";
+        top: 5px;
+        left: 20px;
+        bottom: 5px;
+        width: 15px;
+        background-color: var(--g-sub-sidebar-menu-active-bg);
+        opacity: 0.5;
+      }
+
+      .mode-container {
+        top: 5px;
+        left: 40px;
+        right: 5px;
+        bottom: 5px;
+        border: 1px dashed var(--g-sub-sidebar-menu-active-bg);
+      }
+    }
+
+    &-head {
+      &::before {
+        content: "";
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        height: 10px;
+        background-color: var(--g-sub-sidebar-menu-active-bg);
+      }
+
+      &::after {
+        content: "";
+        top: 20px;
+        left: 5px;
+        bottom: 5px;
+        width: 15px;
+        background-color: var(--g-sub-sidebar-menu-active-bg);
+        opacity: 0.5;
+      }
+
+      .mode-container {
+        top: 20px;
+        left: 25px;
+        right: 5px;
+        bottom: 5px;
+        border: 1px dashed var(--g-sub-sidebar-menu-active-bg);
+      }
+    }
+
+    &-single {
+      &::before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        bottom: 5px;
+        width: 15px;
+        background-color: var(--g-sub-sidebar-menu-active-bg);
+        opacity: 0.5;
+      }
+
+      .mode-container {
+        top: 5px;
+        left: 25px;
+        right: 5px;
+        bottom: 5px;
+        border: 1px dashed var(--g-sub-sidebar-menu-active-bg);
+      }
+    }
+
+    i {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+      display: none;
+    }
+
+    &.active i {
+      display: block;
+      color: var(--el-color-primary);
+    }
+  }
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 5px 0;
+  padding: 5px 10px;
+  border-radius: 5px;
+  transition: all 0.3s;
+
+  &:hover {
+    background: var(--el-fill-color);
+  }
+
+  .label {
+    font-size: 14px;
+    color: var(--el-text-color-regular);
+    display: flex;
+    align-items: center;
+
+    i {
+      margin-left: 4px;
+      font-size: 17px;
+      color: var(--el-color-warning);
+      cursor: help;
+    }
+  }
+
+  .el-switch {
+    height: auto;
+  }
+
+  .el-input {
+    width: 150px;
+  }
+}
+</style>
diff --git a/src/layouts/components/BuyIt/index.vue b/src/layouts/components/BuyIt/index.vue
new file mode 100644
index 00000000..5e757e3a
--- /dev/null
+++ b/src/layouts/components/BuyIt/index.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup name="BuyIt">
+const isActived = ref(true)
+setTimeout(() => {
+  isActived.value = false
+}, 5000)
+
+onMounted(() => {
+  ElNotification({
+    type: 'success',
+    title: '温馨提示',
+    dangerouslyUseHTMLString: true,
+    message: `
+      <p>当前访问的是<b>基础版</b> (Vue3)</p>
+      <p>你可以点<a href="https://hooray.gitee.io/fantastic-admin-pro-example/" target="_blank"><b>这里</b></a>访问专业版 (Vue3)</p>
+    `,
+    position: 'bottom-right',
+    duration: 5000,
+  })
+})
+
+function open(url: string) {
+  window.open(url, 'top')
+}
+</script>
+
+<template>
+  <div class="buy-it" :class="{ actived: isActived }">
+    <div class="item" @click="open(`https://hooray.gitee.io/fantastic-admin/buy.html`)">
+      <el-icon>
+        <svg-icon name="fixed-right-buy" />
+      </el-icon>
+      <span class="title">购买<br>专业版</span>
+    </div>
+    <div class="item" @click="open('https://gitee.com/hooray/fantastic-admin/')">
+      <el-icon>
+        <svg-icon name="fixed-right-code" />
+      </el-icon>
+      <span class="title">下载<br>基础版</span>
+    </div>
+    <div class="item" @click="open(`https://hooray.gitee.io/fantastic-admin/`)">
+      <el-icon>
+        <svg-icon name="fixed-right-doc" />
+      </el-icon>
+      <span class="title">开发<br>文档</span>
+    </div>
+    <div class="item" @click="open(`https://hooray.gitee.io/fantastic-admin/support.html`)">
+      <el-icon>
+        <svg-icon name="fixed-right-chat" />
+      </el-icon>
+      <span class="title">技术<br>支持</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.buy-it {
+  position: fixed;
+  z-index: 10;
+  right: -58px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 70px;
+  display: flex;
+  flex-direction: column;
+  transition: right 0.3s;
+
+  &.actived,
+  &:hover {
+    right: 0;
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 70px;
+    text-align: center;
+    color: #fff;
+    border-bottom: 1px solid #fff;
+    transition: 0.3s;
+    opacity: 0.7;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:first-child {
+      border-top-left-radius: 5px;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: 5px;
+      border-bottom: 0;
+    }
+
+    &:nth-child(1) {
+      background-color: #ff4200;
+    }
+
+    &:nth-child(2) {
+      background-color: #409eff;
+    }
+
+    &:nth-child(3) {
+      background-color: #0fcc1a;
+    }
+
+    &:nth-child(4) {
+      background-color: #343b42;
+    }
+
+    .el-icon {
+      display: block;
+      margin: 0 auto;
+      font-size: 20px;
+    }
+
+    .title {
+      display: inline-block;
+      font-size: 12px;
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Header/index.vue b/src/layouts/components/Header/index.vue
new file mode 100644
index 00000000..6339ad0e
--- /dev/null
+++ b/src/layouts/components/Header/index.vue
@@ -0,0 +1,191 @@
+<script lang="ts" setup name="Header">
+import Logo from '../Logo/index.vue'
+import Tools from '../Tools/index.vue'
+import useSettingsStore from '@/store/modules/settings'
+import useMenuStore from '@/store/modules/menu'
+
+const settingsStore = useSettingsStore()
+const menuStore = useMenuStore()
+
+const { switchTo } = useMenu()
+
+const navRef = ref()
+
+// 顶部模式鼠标滚动
+function handlerMouserScroll(event: WheelEvent) {
+  navRef.value.scrollBy({
+    left: (event.deltaY || event.detail) > 0 ? 50 : -50,
+  })
+}
+</script>
+
+<template>
+  <transition name="header">
+    <header v-if="settingsStore.mode === 'pc' && settingsStore.menu.menuMode === 'head'">
+      <div class="header-container">
+        <div class="main">
+          <Logo />
+          <!-- 顶部模式 -->
+          <div ref="navRef" class="nav" @wheel.prevent="handlerMouserScroll">
+            <template v-for="(item, index) in menuStore.allMenus" :key="index">
+              <div v-if="item.children && item.children.length !== 0" class="item-container" :class="{ active: index === menuStore.actived }">
+                <div class="item" @click="switchTo(index)">
+                  <el-icon>
+                    <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
+                  </el-icon>
+                  <span v-if="item.meta.title">{{ item.meta.title }}</span>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+        <Tools />
+      </div>
+    </header>
+  </transition>
+</template>
+
+<style lang="scss" scoped>
+header {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  height: var(--g-header-height);
+  color: var(--g-header-color);
+  background-color: var(--g-header-bg);
+  transition: background-color 0.3s, var(--el-transition-color);
+
+  .header-container {
+    width: var(--g-header-width);
+    height: 100%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .main {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      height: 100%;
+    }
+  }
+
+  @media screen and (max-width: var(--g-header-width)) {
+    .header-container {
+      width: 100%;
+    }
+  }
+
+  :deep(.title) {
+    position: relative;
+    width: inherit;
+    height: inherit;
+    padding: inherit;
+    background-color: inherit;
+
+    .logo {
+      width: 50px;
+      height: 50px;
+    }
+
+    span {
+      font-size: 24px;
+      letter-spacing: 1px;
+      color: var(--g-header-color);
+    }
+  }
+
+  .nav {
+    flex: 1;
+    display: flex;
+    width: 0;
+    height: 100%;
+    margin: 0 30px;
+    padding: 0 20px;
+    overflow-x: auto;
+    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
+
+    // firefox隐藏滚动条
+    scrollbar-width: none;
+
+    // chrome隐藏滚动条
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .item-container {
+      position: relative;
+      display: flex;
+      width: initial;
+
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        padding: 0 5px;
+        width: 80px;
+        height: 100%;
+        cursor: pointer;
+        color: var(--g-header-menu-color);
+        background-color: var(--g-header-bg);
+        transition: background-color 0.3s, var(--el-transition-color);
+
+        &:hover {
+          color: var(--g-header-menu-hover-color);
+          background-color: var(--g-header-menu-hover-bg);
+        }
+
+        .el-icon {
+          font-size: 24px;
+          vertical-align: middle;
+        }
+
+        span {
+          text-align: center;
+          vertical-align: middle;
+          word-break: break-all;
+
+          @include text-overflow(1, false);
+        }
+      }
+
+      &.active .item {
+        color: var(--g-header-menu-active-color);
+        background-color: var(--g-header-menu-active-bg);
+      }
+    }
+  }
+
+  :deep(.tools) {
+    padding: 0;
+
+    .buttons .item .el-icon {
+      color: var(--g-header-color);
+    }
+
+    .user-container {
+      font-size: 16px;
+      color: var(--g-header-color);
+    }
+  }
+}
+
+// 头部动画
+.header-enter-active,
+.header-leave-active {
+  transition: transform 0.3s;
+}
+
+.header-enter-from,
+.header-leave-to {
+  transform: translateY(calc(var(--g-header-height) * -1));
+}
+</style>
diff --git a/src/layouts/components/HotkeysIntro/index.vue b/src/layouts/components/HotkeysIntro/index.vue
new file mode 100644
index 00000000..22e25784
--- /dev/null
+++ b/src/layouts/components/HotkeysIntro/index.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import eventBus from '@/utils/eventBus'
+import useSettingsStore from '@/store/modules/settings'
+
+const isShow = ref(false)
+
+const settingsStore = useSettingsStore()
+
+onMounted(() => {
+  eventBus.on('global-hotkeys-intro-toggle', () => {
+    isShow.value = !isShow.value
+  })
+})
+</script>
+
+<template>
+  <div>
+    <el-drawer v-model="isShow" title="快捷键介绍" direction="rtl" :size="360">
+      <el-descriptions title="全局" :column="1" border>
+        <el-descriptions-item label="查看系统信息">
+          Alt + I
+        </el-descriptions-item>
+        <el-descriptions-item v-if="settingsStore.navSearch.enable && settingsStore.navSearch.enableHotkeys" label="唤起导航搜索">
+          Alt + S
+        </el-descriptions-item>
+      </el-descriptions>
+      <el-descriptions v-if="settingsStore.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.menu.menuMode)" title="主导航" :column="1" border>
+        <el-descriptions-item label="激活下一个主导航">
+          Alt + `
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-drawer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-drawer__header) {
+  margin-bottom: initial;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--el-border-color);
+  transition: var(--el-transition-border);
+}
+
+:deep(.el-descriptions) {
+  margin-bottom: 20px;
+
+  .el-descriptions__label {
+    width: 200px;
+  }
+}
+</style>
diff --git a/src/layouts/components/Logo/index.vue b/src/layouts/components/Logo/index.vue
new file mode 100644
index 00000000..68eed913
--- /dev/null
+++ b/src/layouts/components/Logo/index.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup name="Logo">
+import imgLogo from '@/assets/images/logo.png'
+import useSettingsStore from '@/store/modules/settings'
+
+defineProps({
+  showLogo: {
+    type: Boolean,
+    default: true,
+  },
+  showTitle: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const settingsStore = useSettingsStore()
+
+const title = ref(import.meta.env.VITE_APP_TITLE)
+const logo = ref(imgLogo)
+
+const to = computed(() => {
+  const rtn: {
+    name?: string
+  } = {}
+  if (settingsStore.dashboard.enable)
+    rtn.name = 'dashboard'
+
+  return rtn
+})
+</script>
+
+<template>
+  <router-link :to="to" class="title" :class="{ 'is-link': settingsStore.dashboard.enable }" :title="title">
+    <img v-if="showLogo" :src="logo" class="logo">
+    <span v-if="showTitle">{{ title }}</span>
+  </router-link>
+</template>
+
+<style lang="scss" scoped>
+.title {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  width: inherit;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--g-sidebar-logo-height);
+  text-align: center;
+  overflow: hidden;
+  text-decoration: none;
+
+  &.is-link {
+    cursor: pointer;
+  }
+
+  .logo {
+    width: 30px;
+    height: 30px;
+
+    & + span {
+      margin-left: 10px;
+    }
+  }
+
+  span {
+    display: block;
+    font-weight: bold;
+    color: #fff;
+
+    @include text-overflow;
+  }
+}
+</style>
diff --git a/src/layouts/components/MainSidebar/index.vue b/src/layouts/components/MainSidebar/index.vue
new file mode 100644
index 00000000..40d4fa33
--- /dev/null
+++ b/src/layouts/components/MainSidebar/index.vue
@@ -0,0 +1,113 @@
+<script lang="ts" setup name="MainSidebar">
+import Logo from '../Logo/index.vue'
+import useSettingsStore from '@/store/modules/settings'
+import useMenuStore from '@/store/modules/menu'
+
+const settingsStore = useSettingsStore()
+const menuStore = useMenuStore()
+
+const { switchTo } = useMenu()
+</script>
+
+<template>
+  <transition name="main-sidebar">
+    <div v-if="settingsStore.menu.menuMode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.menu.menuMode !== 'single')" class="main-sidebar-container">
+      <Logo :show-title="false" class="sidebar-logo" />
+      <!-- 侧边栏模式（含主导航） -->
+      <div class="nav">
+        <template v-for="(item, index) in menuStore.allMenus">
+          <div
+            v-if="item.children && item.children.length !== 0" :key="index" class="item" :class="{
+              active: index === menuStore.actived,
+            }" :title="item.meta.title" @click="switchTo(index)"
+          >
+            <el-icon>
+              <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
+            </el-icon>
+            <span>{{ item.meta.title }}</span>
+          </div>
+        </template>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style lang="scss" scoped>
+.main-sidebar-container {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  position: relative;
+  z-index: 1;
+  width: var(--g-main-sidebar-width);
+  color: var(--g-main-sidebar-menu-color);
+  background-color: var(--g-main-sidebar-bg);
+  transition: background-color 0.3s, var(--el-transition-color);
+
+  .sidebar-logo {
+    transition: 0.3s;
+    background-color: var(--g-main-sidebar-bg);
+  }
+
+  .nav {
+    width: inherit;
+    padding-top: var(--g-sidebar-logo-height);
+
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      text-align: center;
+      height: 60px;
+      padding: 0 5px;
+      cursor: pointer;
+      color: var(--g-main-sidebar-menu-color);
+      background-color: var(--g-main-sidebar-bg);
+      transition: background-color 0.3s, var(--el-transition-color);
+
+      &:hover {
+        color: var(--g-main-sidebar-menu-hover-color);
+        background-color: var(--g-main-sidebar-menu-hover-bg);
+      }
+
+      &.active {
+        color: var(--g-main-sidebar-menu-active-color);
+        background-color: var(--g-main-sidebar-menu-active-bg);
+      }
+
+      .el-icon {
+        margin: 0 auto;
+        font-size: 24px;
+      }
+
+      span {
+        text-align: center;
+        font-size: 14px;
+
+        @include text-overflow(1, false);
+      }
+    }
+  }
+}
+
+// 主侧边栏动画
+.main-sidebar-enter-active,
+.main-sidebar-leave-active {
+  transition: transform 0.3s;
+}
+
+.main-sidebar-enter-from,
+.main-sidebar-leave-to {
+  transform: translateX(calc(var(--g-main-sidebar-width) * -1));
+}
+</style>
diff --git a/src/layouts/components/Search/index.vue b/src/layouts/components/Search/index.vue
new file mode 100644
index 00000000..2ad595b6
--- /dev/null
+++ b/src/layouts/components/Search/index.vue
@@ -0,0 +1,448 @@
+<script lang="ts" setup name="Search">
+import { cloneDeep } from 'lodash-es'
+import hotkeys from 'hotkeys-js'
+import { isExternalLink } from '@/utils'
+import eventBus from '@/utils/eventBus'
+import useSettingsStore from '@/store/modules/settings'
+import useRouteStore from '@/store/modules/route'
+import useMenuStore from '@/store/modules/menu'
+import type { Menu, Route } from '@/global'
+
+const router = useRouter()
+
+const settingsStore = useSettingsStore()
+const routeStore = useRouteStore()
+const menuStore = useMenuStore()
+
+interface listTypes {
+  icon?: string
+  title: string
+  breadcrumb: string[]
+  path: string
+}
+
+const isShow = ref(false)
+const searchInput = ref('')
+const sourceList = ref<listTypes[]>([])
+const actived = ref(-1)
+
+const searchInputRef = ref()
+const searchResultRef = ref()
+const searchResultItemRef = ref<any>([])
+const setSearchResultItemRef = (el: any) => searchResultItemRef.value.push(el)
+onBeforeUpdate(() => {
+  searchResultItemRef.value = []
+})
+
+const resultList = computed(() => {
+  let result = []
+  result = sourceList.value.filter((item) => {
+    let flag = false
+    if (item.title.includes(searchInput.value))
+      flag = true
+
+    if (item.path.includes(searchInput.value))
+      flag = true
+
+    if (item.breadcrumb.some(b => b.includes(searchInput.value)))
+      flag = true
+
+    return flag
+  })
+  return result
+})
+
+watch(() => isShow.value, (val) => {
+  if (val) {
+    document.body.classList.add('hidden')
+    searchResultRef.value.scrollTop = 0
+    // 当搜索显示的时候绑定上、下、回车快捷键，隐藏的时候再解绑。另外当 input 处于 focus 状态时，采用 vue 来绑定键盘事件
+    hotkeys('up', keyUp)
+    hotkeys('down', keyDown)
+    hotkeys('enter', keyEnter)
+    setTimeout(() => {
+      searchInputRef.value.focus()
+    }, 500)
+  }
+  else {
+    document.body.classList.remove('hidden')
+    hotkeys.unbind('up', keyUp)
+    hotkeys.unbind('down', keyDown)
+    hotkeys.unbind('enter', keyEnter)
+    setTimeout(() => {
+      searchInput.value = ''
+      actived.value = -1
+    }, 500)
+  }
+})
+watch(() => resultList.value, () => {
+  actived.value = -1
+  searchResultItemRef.value = []
+  handleScroll()
+})
+
+onMounted(() => {
+  eventBus.on('global-search-toggle', () => {
+    isShow.value = !isShow.value
+  })
+  hotkeys('alt+s', (e) => {
+    if (settingsStore.navSearch.enable && settingsStore.navSearch.enableHotkeys) {
+      e.preventDefault()
+      isShow.value = true
+    }
+  })
+  hotkeys('esc', (e) => {
+    if (settingsStore.navSearch.enable && settingsStore.navSearch.enableHotkeys) {
+      e.preventDefault()
+      isShow.value = false
+    }
+  })
+  if (settingsStore.app.routeBaseOn !== 'filesystem') {
+    routeStore.routes.forEach((item) => {
+      item.children && getSourceList(item.children)
+    })
+  }
+  else {
+    menuStore.menus.forEach((item) => {
+      getSourceListByMenus(item.children)
+    })
+  }
+})
+
+function hasChildren(item: Route.recordRaw) {
+  let flag = true
+  if (item.children && item.children.every(i => i.meta.sidebar === false))
+    flag = false
+
+  return flag
+}
+function getSourceList(arr: Route.recordRaw[], basePath?: string, icon?: string, breadcrumb?: string[]) {
+  arr.forEach((item) => {
+    if (item.meta.sidebar !== false) {
+      const breadcrumbTemp = cloneDeep(breadcrumb) || []
+      if (item.children && hasChildren(item)) {
+        breadcrumbTemp.push(typeof item.meta.title === 'function' ? item.meta.title() : item.meta.title)
+        getSourceList(item.children, basePath ? [basePath, item.path].join('/') : item.path, item.meta.icon || icon, breadcrumbTemp)
+      }
+      else {
+        breadcrumbTemp.push(typeof item.meta.title === 'function' ? item.meta.title() : item.meta.title)
+        let path = ''
+        if (isExternalLink(item.path))
+          path = item.path
+
+        else
+          path = basePath ? [basePath, item.path].join('/') : item.path
+
+        sourceList.value.push({
+          icon: item.meta.icon || icon,
+          title: typeof item.meta.title === 'function' ? item.meta.title() : item.meta.title,
+          breadcrumb: breadcrumbTemp,
+          path,
+        })
+      }
+    }
+  })
+}
+function getSourceListByMenus(arr: Menu.recordRaw[], icon?: string, breadcrumb?: string[]) {
+  arr.forEach((item) => {
+    const breadcrumbTemp = cloneDeep(breadcrumb) || []
+    if (item.children && item.children.length > 0) {
+      breadcrumbTemp.push(item.meta.title)
+      getSourceListByMenus(item.children, item.meta.icon, breadcrumbTemp)
+    }
+    else {
+      breadcrumbTemp.push(item.meta.title)
+      sourceList.value.push({
+        icon: item.meta.icon || icon,
+        title: item.meta.title,
+        path: item.path as string,
+        breadcrumb: breadcrumbTemp,
+      })
+    }
+  })
+}
+
+function keyUp() {
+  if (resultList.value.length) {
+    actived.value -= 1
+    if (actived.value < 0)
+      actived.value = resultList.value.length - 1
+
+    handleScroll()
+  }
+}
+function keyDown() {
+  if (resultList.value.length) {
+    actived.value += 1
+    if (actived.value > resultList.value.length - 1)
+      actived.value = 0
+
+    handleScroll()
+  }
+}
+function keyEnter() {
+  if (actived.value !== -1)
+    searchResultItemRef.value[actived.value].click()
+}
+function handleScroll() {
+  let scrollTo = 0
+  if (actived.value !== -1) {
+    scrollTo = searchResultRef.value.scrollTop
+    const activedOffsetTop = searchResultItemRef.value[actived.value].offsetTop
+    const activedClientHeight = searchResultItemRef.value[actived.value].clientHeight
+    const searchScrollTop = searchResultRef.value.scrollTop
+    const searchClientHeight = searchResultRef.value.clientHeight
+    if (activedOffsetTop + activedClientHeight > searchScrollTop + searchClientHeight)
+      scrollTo = activedOffsetTop + activedClientHeight - searchClientHeight
+
+    else if (activedOffsetTop <= searchScrollTop)
+      scrollTo = activedOffsetTop
+  }
+  searchResultRef.value.scrollTo({
+    top: scrollTo,
+  })
+}
+
+function pageJump(url: string) {
+  if (isExternalLink(url))
+    window.open(url, 'top')
+
+  else
+    router.push(url)
+}
+</script>
+
+<template>
+  <div id="search" :class="{ searching: isShow }" @click="isShow && eventBus.emit('global-search-toggle')">
+    <div class="container">
+      <div class="search-box" @click.stop>
+        <el-input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" clearable @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
+          <template #prefix>
+            <el-icon>
+              <svg-icon name="ep:search" />
+            </el-icon>
+          </template>
+        </el-input>
+        <div v-if="settingsStore.mode === 'pc'" class="tips">
+          <div class="tip">
+            <span>Alt</span>+<span>S</span>
+            唤醒搜索面板
+          </div>
+          <div class="tip">
+            <span>
+              <el-icon>
+                <svg-icon name="search-up" />
+              </el-icon>
+            </span>
+            <span>
+              <el-icon>
+                <svg-icon name="search-down" />
+              </el-icon>
+            </span>
+            切换搜索结果
+          </div>
+          <div class="tip">
+            <span>
+              <el-icon>
+                <svg-icon name="search-enter" />
+              </el-icon>
+            </span>
+            访问页面
+          </div>
+          <div class="tip">
+            <span>ESC</span>
+            退出
+          </div>
+        </div>
+      </div>
+      <div ref="searchResultRef" class="result" :class="{ mobile: settingsStore.mode === 'mobile' }">
+        <a v-for="(item, index) in resultList" :key="item.path" :ref="setSearchResultItemRef" class="item" :class="{ actived: index === actived }" @click="pageJump(item.path)" @mouseover="actived = index">
+          <el-icon class="icon">
+            <svg-icon v-if="item.icon" :name="item.icon" />
+          </el-icon>
+          <div class="info">
+            <div class="title">
+              {{ item.title }}
+            </div>
+            <div class="breadcrumb">
+              <span v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex">
+                {{ bc }}
+                <el-icon>
+                  <svg-icon name="ep:arrow-right" />
+                </el-icon>
+              </span>
+            </div>
+            <div class="path">{{ item.path }}</div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#search {
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--el-overlay-color-lighter);
+  backdrop-filter: blur(10px);
+  transition: all 0.2s;
+  transform: translateZ(0);
+  opacity: 0;
+  visibility: hidden;
+
+  &.searching {
+    opacity: 1;
+    visibility: visible;
+
+    .container {
+      transform: initial;
+      filter: initial;
+    }
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    max-width: 800px;
+    height: 100%;
+    margin: 0 auto;
+    transition: all 0.2s;
+    transform: scale(1.1);
+    filter: blur(10px);
+
+    .search-box {
+      margin: 50px 20px 40px;
+
+      :deep(.el-input__inner) {
+        height: 52px;
+        line-height: 52px;
+      }
+
+      :deep(.el-input__icon) {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .tips {
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        margin-top: 20px;
+        line-height: 24px;
+        font-size: 14px;
+        color: #fff;
+
+        span {
+          margin: 0 5px;
+          padding: 3px 8px 5px;
+          border-radius: 5px;
+          font-size: 12px;
+          font-weight: bold;
+          color: var(--el-text-color-primary);
+          background-color: var(--el-fill-color);
+          box-shadow: inset 0 -2px var(--el-fill-color-lighter), inset 0 0 1px 1px var(--el-fill-color-darker);
+        }
+      }
+    }
+
+    .result {
+      position: relative;
+      margin: 0 20px;
+      max-height: calc(100% - 250px);
+      border-radius: 5px;
+      overflow: auto;
+      background-color: var(--el-bg-color);
+      box-shadow: 0 0 0 1px var(--el-border-color-darker);
+
+      &.mobile {
+        max-height: calc(100% - 200px);
+      }
+
+      .item {
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &.actived {
+          background-color: var(--el-bg-color-page);
+
+          .icon {
+            color: var(--el-color-primary);
+            transform: scale(1.2);
+          }
+
+          .info {
+            border-left-color: var(--el-border-color);
+
+            .title {
+              color: var(--el-text-color-primary);
+            }
+
+            .breadcrumb,
+            .path {
+              color: var(--el-text-color-regular);
+            }
+          }
+        }
+
+        .icon {
+          flex: 0 0 66px;
+          text-align: center;
+          color: var(--el-color-info);
+          font-size: 20px;
+          transition: all 0.3s;
+        }
+
+        .info {
+          flex: 1;
+          height: 70px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          border-left: 1px solid var(--el-border-color-lighter);
+          padding: 5px 10px 7px;
+          transition: all 0.3s;
+
+          @include text-overflow(1, true);
+
+          .title {
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--el-text-color-regular);
+
+            @include text-overflow(1, true);
+          }
+
+          .breadcrumb,
+          .path {
+            font-size: 12px;
+            color: var(--el-text-color-secondary);
+            transition: all 0.3s;
+
+            @include text-overflow(1, true);
+          }
+
+          .breadcrumb {
+            span {
+              margin-right: 5px;
+
+              &:last-child i {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/SidebarItem/index.vue b/src/layouts/components/SidebarItem/index.vue
new file mode 100644
index 00000000..1a236f93
--- /dev/null
+++ b/src/layouts/components/SidebarItem/index.vue
@@ -0,0 +1,151 @@
+<script lang="ts" setup name="SidebarItem">
+// import SidebarItem from './index.vue'
+import { isExternalLink, resolveRoutePath } from '@/utils'
+import type { Menu } from '@/global'
+
+const props = defineProps({
+  item: {
+    type: Object as () => Menu.recordRaw,
+    required: true,
+  },
+  basePath: {
+    type: String,
+    default: '',
+  },
+})
+
+const hasChildren = computed(() => {
+  let flag = true
+  if (props.item.children) {
+    if (props.item.children.every(item => item.meta.sidebar === false))
+      flag = false
+  }
+  else {
+    flag = false
+  }
+  return flag
+})
+</script>
+
+<template>
+  <div class="sidebar-item">
+    <router-link v-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolveRoutePath(basePath, item.path || '')">
+      <a :href="isExternalLink(resolveRoutePath(basePath, item.path || '')) ? resolveRoutePath(basePath, item.path || '') : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="isExternalLink(resolveRoutePath(basePath, item.path || '')) ? '_blank' : '_self'" @click="navigate">
+        <el-menu-item :title="item.meta.title" :index="resolveRoutePath(basePath, item.path || '')">
+          <el-icon v-if="item.meta.icon" class="title-icon">
+            <svg-icon :name="item.meta.icon" />
+          </el-icon>
+          <span class="title">{{ item.meta.title }}</span>
+        </el-menu-item>
+      </a>
+    </router-link>
+    <el-sub-menu v-else :title="item.meta.title" :index="resolveRoutePath(basePath, item.path || '')">
+      <template #title>
+        <el-icon v-if="item.meta.icon" class="title-icon">
+          <svg-icon :name="item.meta.icon" />
+        </el-icon>
+        <span class="title">{{ item.meta.title }}</span>
+      </template>
+      <template v-for="route in item.children">
+        <SidebarItem v-if="route.meta.sidebar !== false" :key="route.path" :item="route" :base-path="resolveRoutePath(basePath, item.path || '')" />
+      </template>
+    </el-sub-menu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-menu-item),
+:deep(.el-menu-item span.title),
+:deep(.el-sub-menu__title),
+:deep(.el-sub-menu__title span.title) {
+  flex: 1;
+  vertical-align: inherit;
+
+  @include text-overflow;
+}
+
+:deep(.el-menu-item),
+:deep(.el-sub-menu__title) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:deep(.el-sub-menu),
+:deep(.el-menu-item) {
+  .title-icon {
+    width: 20px;
+    font-size: 20px;
+    vertical-align: -0.25em;
+    transition: transform 0.3s;
+    color: unset;
+  }
+
+  .title-icon + .title {
+    margin-left: 10px;
+  }
+
+  &:hover > .title-icon,
+  .el-sub-menu__title:hover > .title-icon {
+    transform: scale(1.2);
+  }
+}
+
+a {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+.el-sub-menu__title {
+  > .badge {
+    &-dot {
+      right: 40px;
+    }
+
+    &-text {
+      right: 40px;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.el-menu--inline {
+  background-color: var(--g-sub-sidebar-menu-bg) !important;
+
+  .el-menu-item,
+  .el-sub-menu > .el-sub-menu__title {
+    color: var(--g-sub-sidebar-menu-color);
+    background-color: var(--g-sub-sidebar-menu-bg) !important;
+
+    &:hover {
+      color: var(--g-sub-sidebar-menu-hover-color) !important;
+      background-color: var(--g-sub-sidebar-menu-hover-bg) !important;
+    }
+  }
+}
+
+.el-menu-item,
+.el-sub-menu__title {
+  color: var(--g-sub-sidebar-menu-color) !important;
+  background: transparent !important;
+
+  &:hover {
+    color: var(--g-sub-sidebar-menu-hover-color) !important;
+    background-color: var(--g-sub-sidebar-menu-hover-bg) !important;
+  }
+}
+
+.el-menu-item.is-active,
+.el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title,
+.el-sub-menu .el-menu--inline .el-menu-item.is-active {
+  color: var(--g-sub-sidebar-menu-active-color) !important;
+  background-color: var(--g-sub-sidebar-menu-active-bg) !important;
+
+  .icon,
+  .el-sub-menu__icon-arrow {
+    color: unset;
+  }
+}
+</style>
diff --git a/src/layouts/components/SubSidebar/index.vue b/src/layouts/components/SubSidebar/index.vue
new file mode 100644
index 00000000..cf6833bf
--- /dev/null
+++ b/src/layouts/components/SubSidebar/index.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup name="SubSidebar">
+import Logo from '../Logo/index.vue'
+import SidebarItem from '../SidebarItem/index.vue'
+import useSettingsStore from '@/store/modules/settings'
+import useMenuStore from '@/store/modules/menu'
+
+const settingsStore = useSettingsStore()
+const menuStore = useMenuStore()
+
+const sidebarScrollTop = ref(0)
+
+function onSidebarScroll(e: Event) {
+  sidebarScrollTop.value = (e.target as HTMLElement).scrollTop
+}
+</script>
+
+<template>
+  <div v-if="['side', 'head', 'single'].includes(settingsStore.menu.menuMode) || settingsStore.mode === 'mobile'" class="sub-sidebar-container" :class="{ 'is-collapse': settingsStore.mode === 'pc' && settingsStore.menu.subMenuCollapse }" @scroll="onSidebarScroll">
+    <Logo
+      :show-logo="settingsStore.menu.menuMode === 'single'" class="sidebar-logo" :class="{
+        'sidebar-logo-bg': settingsStore.menu.menuMode === 'single',
+        'shadow': sidebarScrollTop,
+      }"
+    />
+    <!-- 侧边栏模式（无主导航） -->
+    <el-menu
+      :unique-opened="settingsStore.menu.subMenuUniqueOpened" :default-openeds="menuStore.defaultOpenedPaths" :default-active="$route.meta.activeMenu || $route.path" :collapse="settingsStore.mode === 'pc' && settingsStore.menu.subMenuCollapse" :collapse-transition="false" :class="{
+        'is-collapse-without-logo': settingsStore.menu.menuMode !== 'single' && settingsStore.menu.subMenuCollapse,
+      }"
+    >
+      <transition-group name="sub-sidebar">
+        <template v-for="(route, index) in menuStore.sidebarMenus">
+          <SidebarItem v-if="route.meta.sidebar !== false" :key="route.path || index" :item="route" :base-path="route.path" />
+        </template>
+      </transition-group>
+    </el-menu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sub-sidebar-container {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  width: var(--g-sub-sidebar-width);
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background-color: var(--g-sub-sidebar-bg);
+  box-shadow: 10px 0 10px -10px var(--g-box-shadow-color);
+  transition: background-color 0.3s, var(--el-transition-box-shadow), left 0.3s, width 0.3s;
+
+  &.is-collapse {
+    width: 64px;
+
+    .sidebar-logo {
+      &:not(.sidebar-logo-bg) {
+        display: none;
+      }
+
+      :deep(span) {
+        display: none;
+      }
+    }
+  }
+
+  .sidebar-logo {
+    transition: box-shadow 0.2s, background-color 0.3s, color 0.3s;
+    background-color: var(--g-sub-sidebar-bg);
+
+    &:not(.sidebar-logo-bg) {
+      :deep(span) {
+        color: var(--g-sub-sidebar-menu-color);
+      }
+    }
+
+    &.sidebar-logo-bg {
+      background-color: var(--g-main-sidebar-bg);
+    }
+
+    &.shadow {
+      box-shadow: 0 10px 10px -10px var(--g-box-shadow-color);
+    }
+  }
+
+  .el-menu {
+    border-right: 0;
+    padding-top: var(--g-sidebar-logo-height);
+    transition: border-color 0.3s, background-color 0.3s, color 0.3s, padding-top 0.3s;
+    background-color: var(--g-sub-sidebar-bg);
+
+    &:not(.el-menu--collapse) {
+      width: inherit;
+    }
+
+    &.is-collapse-without-logo {
+      padding-top: 0;
+    }
+
+    &.el-menu--collapse {
+      :deep(.title-icon) {
+        margin-right: 0;
+      }
+
+      :deep(.el-menu-item),
+      :deep(.el-sub-menu__title) {
+        span,
+        .el-sub-menu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+
+    &.menu-radius:not(.el-menu--collapse) {
+      .sidebar-item {
+        padding: 0 10px;
+
+        &:first-child {
+          padding-top: 10px;
+        }
+
+        &:last-child {
+          padding-bottom: 10px;
+        }
+      }
+
+      :deep(.el-menu--inline),
+      :deep(.el-menu-item),
+      :deep(.el-sub-menu__title) {
+        border-radius: 10px;
+      }
+    }
+  }
+}
+
+// 次侧边栏动画
+.sub-sidebar-enter-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.sub-sidebar-enter-from,
+.sub-sidebar-leave-active {
+  opacity: 0;
+  transform: translateY(30px) skewY(10deg);
+}
+
+.sub-sidebar-leave-active {
+  position: absolute;
+}
+</style>
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
new file mode 100644
index 00000000..94bd4570
--- /dev/null
+++ b/src/layouts/components/Tools/index.vue
@@ -0,0 +1,191 @@
+<script lang="ts" setup name="Tools">
+import { useFullscreen } from '@vueuse/core'
+import eventBus from '@/utils/eventBus'
+import useSettingsStore from '@/store/modules/settings'
+import useUserStore from '@/store/modules/user'
+
+const router = useRouter()
+
+const settingsStore = useSettingsStore()
+const userStore = useUserStore()
+
+const mainPage = useMainPage()
+const { isFullscreen, toggle } = useFullscreen()
+
+function userCommand(command: 'dashboard' | 'setting' | 'hotkeys' | 'logout') {
+  switch (command) {
+    case 'dashboard':
+      router.push({
+        name: 'dashboard',
+      })
+      break
+    case 'setting':
+      router.push({
+        name: 'personalSetting',
+      })
+      break
+    case 'hotkeys':
+      eventBus.emit('global-hotkeys-intro-toggle')
+      break
+    case 'logout':
+      userStore.logout().then(() => {
+        router.push({
+          name: 'login',
+        })
+      })
+      break
+  }
+}
+function pro() {
+  window.open('https://hooray.gitee.io/fantastic-admin-pro-example/', 'top')
+}
+</script>
+
+<template>
+  <div class="tools">
+    <div class="buttons">
+      <span v-if="settingsStore.mode === 'pc'" class="item item-pro" @click="pro">
+        <el-icon>
+          <svg-icon name="pro" />
+        </el-icon>
+        <span class="title">查看专业版</span>
+      </span>
+      <span v-if="settingsStore.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
+        <el-icon>
+          <svg-icon name="ep:search" />
+        </el-icon>
+      </span>
+      <span v-if="settingsStore.mode === 'pc' && settingsStore.toolbar.enableFullscreen" class="item" @click="toggle">
+        <el-icon>
+          <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
+        </el-icon>
+      </span>
+      <span v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
+        <el-icon>
+          <svg-icon name="ep:refresh-right" />
+        </el-icon>
+      </span>
+      <span v-if="settingsStore.toolbar.enableColorScheme" class="item" @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')">
+        <el-icon>
+          <svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" />
+          <svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />
+        </el-icon>
+      </span>
+      <span v-if="settingsStore.toolbar.enableAppSetting" class="item" @click="eventBus.emit('global-theme-toggle')">
+        <el-icon>
+          <svg-icon name="ep:setting" />
+        </el-icon>
+      </span>
+    </div>
+    <el-dropdown class="user-container" size="default" @command="userCommand">
+      <div class="user-wrapper">
+        <el-avatar size="small">
+          <el-icon>
+            <svg-icon name="ep:user-filled" />
+          </el-icon>
+        </el-avatar>
+        {{ userStore.account }}
+        <el-icon>
+          <svg-icon name="ep:caret-bottom" />
+        </el-icon>
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu class="user-dropdown">
+          <el-dropdown-item v-if="settingsStore.dashboard.enable" command="dashboard">
+            控制台
+          </el-dropdown-item>
+          <el-dropdown-item command="setting">
+            个人设置
+          </el-dropdown-item>
+          <el-dropdown-item v-if="settingsStore.mode === 'pc'" divided command="hotkeys">
+            快捷键介绍
+          </el-dropdown-item>
+          <el-dropdown-item divided command="logout">
+            退出登录
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tools {
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  white-space: nowrap;
+
+  .buttons {
+    margin-right: 20px;
+
+    .item {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 24px;
+      width: 34px;
+      cursor: pointer;
+      vertical-align: middle;
+
+      .el-icon {
+        color: var(--el-text-color-primary);
+        transition: var(--el-transition-color);
+      }
+    }
+
+    .item-pro {
+      display: inline-block;
+      width: auto;
+      padding: 0 10px;
+      transform-origin: right center;
+      animation: pro-text 3s ease-out infinite;
+
+      @keyframes pro-text {
+        0%,
+        20% {
+          transform: scale(1);
+        }
+
+        50%,
+        70% {
+          transform: scale(1.2);
+        }
+
+        100% {
+          transform: scale(1);
+        }
+      }
+
+      .el-icon {
+        vertical-align: middle;
+      }
+
+      .title {
+        padding-left: 5px;
+        font-weight: bold;
+        font-size: 14px;
+        background-image: linear-gradient(to right, #ffa237, #fc455d);
+        /* stylelint-disable-next-line property-no-vendor-prefix */
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+  }
+}
+
+:deep(.user-container) {
+  display: inline-block;
+  height: 24px;
+  line-height: 24px;
+  cursor: pointer;
+
+  .user-wrapper {
+    .el-avatar {
+      vertical-align: middle;
+      margin-top: -2px;
+      margin-right: 4px;
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Topbar/index.vue b/src/layouts/components/Topbar/index.vue
new file mode 100644
index 00000000..1d3c4092
--- /dev/null
+++ b/src/layouts/components/Topbar/index.vue
@@ -0,0 +1,155 @@
+<script lang="ts" setup name="Topbar">
+import { compile } from 'path-to-regexp'
+import Tools from '../Tools/index.vue'
+import useSettingsStore from '@/store/modules/settings'
+
+const route = useRoute()
+
+const settingsStore = useSettingsStore()
+
+const enableSubMenuCollapseButton = computed(() => {
+  return settingsStore.mode === 'mobile' || (
+    ['side', 'head', 'single'].includes(settingsStore.menu.menuMode)
+      && settingsStore.menu.enableSubMenuCollapseButton
+  )
+})
+
+const breadcrumbList = computed(() => {
+  const breadcrumbList = []
+  if (settingsStore.dashboard.enable) {
+    breadcrumbList.push({
+      path: '/dashboard',
+      title: settingsStore.dashboard.title,
+    })
+  }
+  if (route.meta.breadcrumbNeste)
+    breadcrumbList.push(...route.meta.breadcrumbNeste.filter(item => item.hide === false))
+
+  return breadcrumbList
+})
+
+const scrollTop = ref(0)
+onMounted(() => {
+  window.addEventListener('scroll', onScroll)
+})
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScroll)
+})
+function onScroll() {
+  scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop
+}
+
+function pathCompile(path: string) {
+  const toPath = compile(path)
+  return toPath(route.params)
+}
+</script>
+
+<template>
+  <div
+    class="topbar-container" :class="{
+      fixed: settingsStore.topbar.fixed,
+      shadow: scrollTop,
+    }" data-fixed-calc-width
+  >
+    <div class="left-box">
+      <div v-if="enableSubMenuCollapseButton" class="sidebar-collapse" :class="{ 'is-collapse': settingsStore.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
+        <el-icon>
+          <svg-icon name="toolbar-collapse" />
+        </el-icon>
+      </div>
+      <el-breadcrumb v-if="settingsStore.breadcrumb.enable && settingsStore.mode === 'pc' && settingsStore.app.routeBaseOn !== 'filesystem'">
+        <transition-group name="breadcrumb">
+          <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path" :to="index < breadcrumbList.length - 1 ? pathCompile(item.path) : ''">
+            {{ item.title }}
+          </el-breadcrumb-item>
+        </transition-group>
+      </el-breadcrumb>
+    </div>
+    <Tools />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.topbar-container {
+  position: absolute;
+  z-index: 999;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--g-topbar-height);
+  background-color: var(--g-toolbar-bg);
+  transition: width 0.3s, top 0.3s, transform 0.3s, background-color 0.3s, var(--el-transition-box-shadow);
+
+  &.fixed {
+    position: fixed;
+
+    &.shadow {
+      box-shadow: 0 10px 10px -10px var(--g-box-shadow-color);
+    }
+  }
+
+  .left-box {
+    display: flex;
+    align-items: center;
+    padding-right: 50px;
+    overflow: hidden;
+    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 50px), transparent);
+
+    .sidebar-collapse {
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      height: 50px;
+      cursor: pointer;
+
+      .el-icon {
+        color: var(--el-text-color-primary);
+        transition: var(--el-transition-color), var(--el-transition-md-fade);
+      }
+
+      &:hover .el-icon {
+        color: var(--el-color-primary);
+      }
+
+      &.is-collapse .el-icon {
+        transform: rotateZ(-180deg);
+      }
+
+      & + .el-breadcrumb {
+        margin-left: 0;
+      }
+    }
+
+    :deep(.el-breadcrumb) {
+      margin-left: 20px;
+      white-space: nowrap;
+
+      .el-breadcrumb__item {
+        display: inline-block;
+        float: none;
+
+        span {
+          font-weight: normal;
+        }
+
+        &:last-child span {
+          color: #97a8be;
+        }
+      }
+    }
+  }
+}
+
+// 面包屑动画
+.breadcrumb-enter-active {
+  transition: all 0.25s;
+}
+
+.breadcrumb-enter-from,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(30px) skewX(-50deg);
+}
+</style>
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
new file mode 100644
index 00000000..768dca0c
--- /dev/null
+++ b/src/layouts/index.vue
@@ -0,0 +1,240 @@
+<script lang="ts" setup name="Layout">
+import hotkeys from 'hotkeys-js'
+import Header from './components/Header/index.vue'
+import MainSidebar from './components/MainSidebar/index.vue'
+import SubSidebar from './components/SubSidebar/index.vue'
+import Topbar from './components/Topbar/index.vue'
+import Search from './components/Search/index.vue'
+import AppSetting from './components/AppSetting/index.vue'
+import HotkeysIntro from './components/HotkeysIntro/index.vue'
+import BuyIt from './components/BuyIt/index.vue'
+import useSettingsStore from '@/store/modules/settings'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+import useMenuStore from '@/store/modules/menu'
+
+const routeInfo = useRoute()
+
+const settingsStore = useSettingsStore()
+const keepAliveStore = useKeepAliveStore()
+const menuStore = useMenuStore()
+
+watch(() => settingsStore.menu.subMenuCollapse, (val) => {
+  if (settingsStore.mode === 'mobile') {
+    if (!val)
+      document.body.classList.add('hidden')
+
+    else
+      document.body.classList.remove('hidden')
+  }
+})
+
+watch(() => routeInfo.path, () => {
+  if (settingsStore.mode === 'mobile') {
+    settingsStore.$patch((state) => {
+      state.menu.subMenuCollapse = true
+    })
+  }
+})
+
+onMounted(() => {
+  hotkeys('f5', (e) => {
+    if (settingsStore.toolbar.enablePageReload) {
+      e.preventDefault()
+      useMainPage().reload()
+    }
+  })
+  hotkeys('alt+`', (e) => {
+    if (settingsStore.menu.enableHotkeys) {
+      e.preventDefault()
+      useMenu().switchTo(menuStore.actived + 1 < menuStore.allMenus.length ? menuStore.actived + 1 : 0)
+    }
+  })
+})
+onUnmounted(() => {
+  hotkeys.unbind('f5')
+  hotkeys.unbind('alt+`')
+})
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <Header />
+      <div class="wrapper">
+        <div class="sidebar-container" :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.menu.subMenuCollapse }">
+          <MainSidebar />
+          <SubSidebar />
+        </div>
+        <div class="sidebar-mask" :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()" />
+        <div class="main-container" :style="{ 'padding-bottom': $route.meta.paddingBottom } as any">
+          <Topbar v-if="!(settingsStore.menu.menuMode === 'head' && !settingsStore.menu.enableSubMenuCollapseButton && !settingsStore.breadcrumb.enable)" />
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode="out-in" appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <Copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+    <Search />
+    <AppSetting />
+    <HotkeysIntro />
+    <BuyIt />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+[data-mode="mobile"] {
+  .sidebar-container {
+    transform: translateX(calc((var(--g-main-sidebar-width) + var(--g-sub-sidebar-width)) * -1));
+
+    &.show {
+      transform: translateX(0);
+    }
+  }
+
+  .main-container {
+    margin-left: 0 !important;
+  }
+
+  &[data-menu-mode="single"] {
+    .sidebar-container {
+      transform: translateX(calc(var(--g-sub-sidebar-width) * -1));
+
+      &.show {
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
+.layout {
+  height: 100%;
+}
+
+#app-main {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  transition: all 0.2s;
+}
+
+.wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-shadow: -1px 0 0 0 var(--g-box-shadow-color);
+  transition: padding-top 0.3s;
+
+  .sidebar-container {
+    position: fixed;
+    z-index: 1010;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    transition: transform 0.3s, top 0.3s;
+    width: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
+  }
+
+  .sidebar-mask {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0 0 0 / 50%);
+    backdrop-filter: blur(2px);
+    transition: all 0.2s;
+    transform: translateZ(0);
+    opacity: 0;
+    visibility: hidden;
+
+    &.show {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container {
+    left: var(--g-main-sidebar-width);
+  }
+
+  .main-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    margin-left: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
+    background-color: var(--g-main-bg);
+    transition: margin-left 0.3s, background-color 0.3s;
+
+    .topbar-container {
+      top: 0;
+      z-index: 998;
+    }
+
+    .main {
+      height: 100%;
+      flex: auto;
+      position: relative;
+      overflow: hidden;
+      transition: 0.3s;
+    }
+
+    .topbar-container + .main {
+      margin: var(--g-topbar-height) 0 0;
+    }
+  }
+}
+
+header:not(.header-leave-active) + .wrapper {
+  padding-top: var(--g-header-height);
+
+  .sidebar-container {
+    top: var(--g-header-height);
+
+    :deep(.sidebar-logo) {
+      display: none;
+    }
+
+    :deep(.el-menu) {
+      padding-top: 0;
+    }
+  }
+
+  .main-container {
+    .topbar-container {
+      top: var(--g-header-height);
+
+      :deep(.tools) {
+        display: none;
+      }
+    }
+  }
+}
+
+// 主内容区动画
+.main-enter-active {
+  transition: 0.2s;
+}
+
+.main-leave-active {
+  transition: 0.15s;
+}
+
+.main-enter-from {
+  opacity: 0;
+  margin-left: -20px;
+}
+
+.main-leave-to {
+  opacity: 0;
+  margin-left: 20px;
+}
+</style>
diff --git a/src/main.js b/src/main.ts
similarity index 80%
rename from src/main.js
rename to src/main.ts
index c0c63405..41759e36 100644
--- a/src/main.js
+++ b/src/main.ts
@@ -1,30 +1,25 @@
 import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
 import App from './App.vue'
-const app = createApp(App)
-
 import pinia from './store'
-app.use(pinia)
-
 import router from './router'
-app.use(router)
-
-/* importElementPlusPlaceholder */
+import useSettingsStore from './store/modules/settings'
 
 // 自定义指令
 import directive from '@/utils/directive'
-directive(app)
-
 // 加载 svg 图标
 import 'virtual:svg-icons-register'
-
-// 加载 iconify 图标（element plus）
-import { downloadAndInstall } from '@/iconify-ep'
-import useSettingsStore from './store/modules/settings'
-if (useSettingsStore().app.iconifyOfflineUse) {
-    downloadAndInstall()
-}
-
 // 全局样式
 import '@/assets/styles/globals.scss'
+// 加载 iconify 图标（element plus）
+import { downloadAndInstall } from '@/iconify-ep'
+if (useSettingsStore().app.iconifyOfflineUse)
+  downloadAndInstall()
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.use(pinia)
+app.use(router)
+directive(app)
 
 app.mount('#app')
diff --git a/src/menu/index.js b/src/menu/index.js
deleted file mode 100644
index 2e76b864..00000000
--- a/src/menu/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import MultilevelMenuExample from './modules/multilevel.menu.example'
-
-const menu = [
-    {
-        meta: {
-            title: '演示',
-            icon: 'sidebar-default'
-        },
-        children: [
-            MultilevelMenuExample
-        ]
-    }
-]
-
-export default menu
diff --git a/src/menu/index.ts b/src/menu/index.ts
new file mode 100644
index 00000000..aff0e3e5
--- /dev/null
+++ b/src/menu/index.ts
@@ -0,0 +1,17 @@
+import MultilevelMenuExample from './modules/multilevel.menu.example'
+
+import type { Menu } from '@/global'
+
+const menu: Menu.recordMainRaw[] = [
+  {
+    meta: {
+      title: '演示',
+      icon: 'sidebar-default',
+    },
+    children: [
+      MultilevelMenuExample,
+    ],
+  },
+]
+
+export default menu
diff --git a/src/menu/modules/multilevel.menu.example.js b/src/menu/modules/multilevel.menu.example.js
deleted file mode 100644
index 40f6ea72..00000000
--- a/src/menu/modules/multilevel.menu.example.js
+++ /dev/null
@@ -1,46 +0,0 @@
-export default {
-    meta: {
-        title: '多级导航',
-        icon: 'sidebar-menu'
-    },
-    children: [
-        {
-            path: '/multilevel_menu_example/page',
-            meta: {
-                title: '导航1'
-            }
-        },
-        {
-            meta: {
-                title: '导航2'
-            },
-            children: [
-                {
-                    path: '/multilevel_menu_example/level2/page',
-                    meta: {
-                        title: '导航2-1'
-                    }
-                },
-                {
-                    meta: {
-                        title: '导航2-2'
-                    },
-                    children: [
-                        {
-                            path: '/multilevel_menu_example/level2/level3/page1',
-                            meta: {
-                                title: '导航2-2-1'
-                            }
-                        },
-                        {
-                            path: '/multilevel_menu_example/level2/level3/page2',
-                            meta: {
-                                title: '导航2-2-2'
-                            }
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
-}
diff --git a/src/menu/modules/multilevel.menu.example.ts b/src/menu/modules/multilevel.menu.example.ts
new file mode 100644
index 00000000..ce26d431
--- /dev/null
+++ b/src/menu/modules/multilevel.menu.example.ts
@@ -0,0 +1,50 @@
+import type { Menu } from '@/global'
+
+const menus: Menu.recordRaw = {
+  meta: {
+    title: '多级导航',
+    icon: 'heroicons-solid:menu-alt-3',
+  },
+  children: [
+    {
+      path: '/multilevel_menu_example/page',
+      meta: {
+        title: '导航1',
+      },
+    },
+    {
+      meta: {
+        title: '导航2',
+      },
+      children: [
+        {
+          path: '/multilevel_menu_example/level2/page',
+          meta: {
+            title: '导航2-1',
+          },
+        },
+        {
+          meta: {
+            title: '导航2-2',
+          },
+          children: [
+            {
+              path: '/multilevel_menu_example/level2/level3/page1',
+              meta: {
+                title: '导航2-2-1',
+              },
+            },
+            {
+              path: '/multilevel_menu_example/level2/level3/page2',
+              meta: {
+                title: '导航2-2-2',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+export default menus
diff --git a/src/mock/member.js b/src/mock/member.js
deleted file mode 100644
index e9bdef5b..00000000
--- a/src/mock/member.js
+++ /dev/null
@@ -1,54 +0,0 @@
-export default [
-    {
-        url: '/mock/member/login',
-        method: 'post',
-        response: option => {
-            return {
-                error: '',
-                status: 1,
-                data: {
-                    account: option.body.account,
-                    token: '@string',
-                    failure_time: Math.ceil(new Date().getTime() / 1000) + 24 * 60 * 60
-                }
-            }
-        }
-    },
-    {
-        url: '/mock/member/permission',
-        method: 'get',
-        response: option => {
-            let permissions = []
-            if (option.query.account == 'admin') {
-                permissions = [
-                    'permission.browse',
-                    'permission.create',
-                    'permission.edit',
-                    'permission.remove'
-                ]
-            } else if (option.query.account == 'test') {
-                permissions = [
-                    'permission.browse'
-                ]
-            }
-            return {
-                error: '',
-                status: 1,
-                data: {
-                    permissions
-                }
-            }
-        }
-    },
-    {
-        url: '/mock/member/edit/password',
-        method: 'post',
-        response: {
-            error: '',
-            status: 1,
-            data: {
-                isSuccess: true
-            }
-        }
-    }
-]
diff --git a/src/mock/member.ts b/src/mock/member.ts
new file mode 100644
index 00000000..5f36cb41
--- /dev/null
+++ b/src/mock/member.ts
@@ -0,0 +1,55 @@
+export default [
+  {
+    url: '/mock/member/login',
+    method: 'post',
+    response: (option: any) => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          account: option.body.account,
+          token: '@string',
+          failure_time: Math.ceil(new Date().getTime() / 1000) + 24 * 60 * 60,
+        },
+      }
+    },
+  },
+  {
+    url: '/mock/member/permission',
+    method: 'get',
+    response: (option: any) => {
+      let permissions: string[] = []
+      if (option.query.account === 'admin') {
+        permissions = [
+          'permission.browse',
+          'permission.create',
+          'permission.edit',
+          'permission.remove',
+        ]
+      }
+      else if (option.query.account === 'test') {
+        permissions = [
+          'permission.browse',
+        ]
+      }
+      return {
+        error: '',
+        status: 1,
+        data: {
+          permissions,
+        },
+      }
+    },
+  },
+  {
+    url: '/mock/member/edit/password',
+    method: 'post',
+    response: {
+      error: '',
+      status: 1,
+      data: {
+        isSuccess: true,
+      },
+    },
+  },
+]
diff --git a/src/mock/menu.js b/src/mock/menu.js
deleted file mode 100644
index 7b67c94d..00000000
--- a/src/mock/menu.js
+++ /dev/null
@@ -1,68 +0,0 @@
-export default [
-    {
-        url: '/mock/menu/list',
-        method: 'get',
-        response: () => {
-            return {
-                error: '',
-                status: 1,
-                data: [
-                    {
-                        meta: {
-                            title: '演示',
-                            icon: 'sidebar-default'
-                        },
-                        children: [
-                            {
-                                meta: {
-                                    title: '多级导航',
-                                    icon: 'sidebar-menu'
-                                },
-                                children: [
-                                    {
-                                        path: '/multilevel_menu_example/page',
-                                        meta: {
-                                            title: '导航1'
-                                        }
-                                    },
-                                    {
-                                        meta: {
-                                            title: '导航2'
-                                        },
-                                        children: [
-                                            {
-                                                path: '/multilevel_menu_example/level2/page',
-                                                meta: {
-                                                    title: '导航2-1'
-                                                }
-                                            },
-                                            {
-                                                meta: {
-                                                    title: '导航2-2'
-                                                },
-                                                children: [
-                                                    {
-                                                        path: '/multilevel_menu_example/level2/level3/page1',
-                                                        meta: {
-                                                            title: '导航2-2-1'
-                                                        }
-                                                    },
-                                                    {
-                                                        path: '/multilevel_menu_example/level2/level3/page2',
-                                                        meta: {
-                                                            title: '导航2-2-2'
-                                                        }
-                                                    }
-                                                ]
-                                            }
-                                        ]
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            }
-        }
-    }
-]
diff --git a/src/mock/menu.ts b/src/mock/menu.ts
new file mode 100644
index 00000000..639a6989
--- /dev/null
+++ b/src/mock/menu.ts
@@ -0,0 +1,68 @@
+export default [
+  {
+    url: '/mock/menu/list',
+    method: 'get',
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: [
+          {
+            meta: {
+              title: '演示',
+              icon: 'sidebar-default',
+            },
+            children: [
+              {
+                meta: {
+                  title: '多级导航',
+                  icon: 'sidebar-menu',
+                },
+                children: [
+                  {
+                    path: '/multilevel_menu_example/page',
+                    meta: {
+                      title: '导航1',
+                    },
+                  },
+                  {
+                    meta: {
+                      title: '导航2',
+                    },
+                    children: [
+                      {
+                        path: '/multilevel_menu_example/level2/page',
+                        meta: {
+                          title: '导航2-1',
+                        },
+                      },
+                      {
+                        meta: {
+                          title: '导航2-2',
+                        },
+                        children: [
+                          {
+                            path: '/multilevel_menu_example/level2/level3/page1',
+                            meta: {
+                              title: '导航2-2-1',
+                            },
+                          },
+                          {
+                            path: '/multilevel_menu_example/level2/level3/page2',
+                            meta: {
+                              title: '导航2-2-2',
+                            },
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      }
+    },
+  },
+]
diff --git a/src/mock/route.js b/src/mock/route.js
deleted file mode 100644
index 051e2a91..00000000
--- a/src/mock/route.js
+++ /dev/null
@@ -1,86 +0,0 @@
-export default [
-    {
-        url: '/mock/route/list',
-        method: 'get',
-        response: () => {
-            return {
-                error: '',
-                status: 1,
-                data: [
-                    {
-                        meta: {
-                            title: '演示',
-                            icon: 'sidebar-default'
-                        },
-                        children: [
-                            {
-                                path: '/multilevel_menu_example',
-                                component: 'Layout',
-                                redirect: '/multilevel_menu_example/page',
-                                name: 'multilevelMenuExample',
-                                meta: {
-                                    title: '多级导航',
-                                    icon: 'sidebar-menu'
-                                },
-                                children: [
-                                    {
-                                        path: 'page',
-                                        name: 'multilevelMenuExample1',
-                                        component: 'multilevel_menu_example/page.vue',
-                                        meta: {
-                                            title: '导航1'
-                                        }
-                                    },
-                                    {
-                                        path: 'level2',
-                                        name: 'multilevelMenuExample2',
-                                        redirect: '/multilevel_menu_example/level2/page',
-                                        meta: {
-                                            title: '导航2'
-                                        },
-                                        children: [
-                                            {
-                                                path: 'page',
-                                                name: 'multilevelMenuExample2-1',
-                                                component: 'multilevel_menu_example/level2/page.vue',
-                                                meta: {
-                                                    title: '导航2-1'
-                                                }
-                                            },
-                                            {
-                                                path: 'level3',
-                                                name: 'multilevelMenuExample2-2',
-                                                redirect: '/multilevel_menu_example/level2/level3/page1',
-                                                meta: {
-                                                    title: '导航2-2'
-                                                },
-                                                children: [
-                                                    {
-                                                        path: 'page1',
-                                                        name: 'multilevelMenuExample2-2-1',
-                                                        component: 'multilevel_menu_example/level2/level3/page1.vue',
-                                                        meta: {
-                                                            title: '导航2-2-1'
-                                                        }
-                                                    },
-                                                    {
-                                                        path: 'page2',
-                                                        name: 'multilevelMenuExample2-2-2',
-                                                        component: 'multilevel_menu_example/level2/level3/page2.vue',
-                                                        meta: {
-                                                            title: '导航2-2-2'
-                                                        }
-                                                    }
-                                                ]
-                                            }
-                                        ]
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            }
-        }
-    }
-]
diff --git a/src/mock/route.ts b/src/mock/route.ts
new file mode 100644
index 00000000..e35890ab
--- /dev/null
+++ b/src/mock/route.ts
@@ -0,0 +1,86 @@
+export default [
+  {
+    url: '/mock/route/list',
+    method: 'get',
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: [
+          {
+            meta: {
+              title: '演示',
+              icon: 'sidebar-default',
+            },
+            children: [
+              {
+                path: '/multilevel_menu_example',
+                component: 'Layout',
+                redirect: '/multilevel_menu_example/page',
+                name: 'multilevelMenuExample',
+                meta: {
+                  title: '多级导航',
+                  icon: 'sidebar-menu',
+                },
+                children: [
+                  {
+                    path: 'page',
+                    name: 'multilevelMenuExample1',
+                    component: 'multilevel_menu_example/page.vue',
+                    meta: {
+                      title: '导航1',
+                    },
+                  },
+                  {
+                    path: 'level2',
+                    name: 'multilevelMenuExample2',
+                    redirect: '/multilevel_menu_example/level2/page',
+                    meta: {
+                      title: '导航2',
+                    },
+                    children: [
+                      {
+                        path: 'page',
+                        name: 'multilevelMenuExample2-1',
+                        component: 'multilevel_menu_example/level2/page.vue',
+                        meta: {
+                          title: '导航2-1',
+                        },
+                      },
+                      {
+                        path: 'level3',
+                        name: 'multilevelMenuExample2-2',
+                        redirect: '/multilevel_menu_example/level2/level3/page1',
+                        meta: {
+                          title: '导航2-2',
+                        },
+                        children: [
+                          {
+                            path: 'page1',
+                            name: 'multilevelMenuExample2-2-1',
+                            component: 'multilevel_menu_example/level2/level3/page1.vue',
+                            meta: {
+                              title: '导航2-2-1',
+                            },
+                          },
+                          {
+                            path: 'page2',
+                            name: 'multilevelMenuExample2-2-2',
+                            component: 'multilevel_menu_example/level2/level3/page2.vue',
+                            meta: {
+                              title: '导航2-2-2',
+                            },
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      }
+    },
+  },
+]
diff --git a/src/mockProdServer.js b/src/mockProdServer.js
deleted file mode 100644
index 84271fa8..00000000
--- a/src/mockProdServer.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
-
-const mocks = []
-const mockContext = import.meta.globEager('./mock/*.js')
-Object.keys(mockContext).forEach(v => {
-    mocks.push(...mockContext[v].default)
-})
-
-export function setupProdMockServer() {
-    createProdMockServer(mocks)
-}
diff --git a/src/mockProdServer.ts b/src/mockProdServer.ts
new file mode 100644
index 00000000..a9900a0a
--- /dev/null
+++ b/src/mockProdServer.ts
@@ -0,0 +1,11 @@
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
+
+const mocks: any[] = []
+const mockContext: any = import.meta.glob('./mock/*.js', { eager: true })
+Object.keys(mockContext).forEach((v) => {
+  mocks.push(...mockContext[v].default)
+})
+
+export function setupProdMockServer() {
+  createProdMockServer(mocks)
+}
diff --git a/src/router/index.js b/src/router/index.js
deleted file mode 100644
index 2d85fb57..00000000
--- a/src/router/index.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
-import useSettingsStore from '@/store/modules/settings'
-import useKeepAliveStore from '@/store/modules/keepAlive'
-import useUserStore from '@/store/modules/user'
-import useMenuStore from '@/store/modules/menu'
-import useRouteStore from '@/store/modules/route'
-
-import '@/assets/styles/nprogress.scss'
-import { useNProgress } from '@vueuse/integrations/useNProgress'
-const { isLoading } = useNProgress()
-
-// 路由相关数据
-import { constantRoutes, asyncRoutes } from './routes'
-
-const router = createRouter({
-    history: createWebHashHistory(),
-    routes: constantRoutes
-})
-
-router.beforeEach(async(to, from, next) => {
-    const settingsStore = useSettingsStore()
-    const userStore = useUserStore()
-    const menuStore = useMenuStore()
-    const routeStore = useRouteStore()
-    settingsStore.app.enableProgress && (isLoading.value = true)
-    // 是否已登录
-    if (userStore.isLogin) {
-        // 是否已根据权限动态生成并挂载路由
-        if (routeStore.isGenerate) {
-            // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态
-            settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path)
-            if (to.name) {
-                if (to.matched.length !== 0) {
-                    // 如果已登录状态下，进入登录页会强制跳转到控制台页面
-                    if (to.name == 'login') {
-                        next({
-                            name: 'dashboard',
-                            replace: true
-                        })
-                    } else if (!settingsStore.dashboard.enable && to.name == 'dashboard') {
-                        // 如果未开启控制台页面，则默认进入侧边栏导航第一个模块
-                        if (menuStore.sidebarMenus.length > 0) {
-                            next({
-                                path: menuStore.sidebarMenusFirstDeepestPath,
-                                replace: true
-                            })
-                        } else {
-                            next()
-                        }
-                    } else {
-                        next()
-                    }
-                } else {
-                    // 如果是通过 name 跳转，并且 name 对应的路由没有权限时，需要做这步处理，手动指向到 404 页面
-                    next({
-                        path: '/404'
-                    })
-                }
-            } else {
-                next()
-            }
-        } else {
-            switch (settingsStore.app.routeBaseOn) {
-                case 'frontend':
-                    await routeStore.generateRoutesAtFront(asyncRoutes)
-                    break
-                case 'backend':
-                    await routeStore.generateRoutesAtBack()
-                    break
-                case 'filesystem':
-                    await routeStore.generateRoutesAtFilesystem(asyncRoutes)
-                    switch (settingsStore.menu.baseOn) {
-                        case 'frontend':
-                            await menuStore.generateMenusAtFront()
-                            break
-                        case 'backend':
-                            await menuStore.generateMenusAtBack()
-                            break
-                    }
-                    break
-            }
-            let removeRoutes = []
-            routeStore.flatRoutes.forEach(route => {
-                if (!/^(https?:|mailto:|tel:)/.test(route.path)) {
-                    removeRoutes.push(router.addRoute(route))
-                }
-            })
-            if (settingsStore.app.routeBaseOn !== 'filesystem') {
-                routeStore.flatSystemRoutes.forEach(route => {
-                    removeRoutes.push(router.addRoute(route))
-                })
-            }
-            // 记录的 accessRoutes 路由数据，在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name ，则通过调用 router.addRoute() 返回的回调进行删除
-            routeStore.setCurrentRemoveRoutes(removeRoutes)
-            next({
-                path: to.fullPath,
-                query: to.query,
-                replace: true
-            })
-        }
-    } else {
-        if (to.name != 'login') {
-            next({
-                name: 'login',
-                query: {
-                    redirect: to.fullPath
-                }
-            })
-        } else {
-            next()
-        }
-    }
-})
-
-router.afterEach((to, from) => {
-    const settingsStore = useSettingsStore()
-    const keepAliveStore = useKeepAliveStore()
-    settingsStore.app.enableProgress && (isLoading.value = false)
-    // 设置页面 title
-    to.meta.title && settingsStore.setTitle(typeof to.meta.title === 'function' ? to.meta.title() : to.meta.title)
-    // 判断当前页面是否开启缓存，如果开启，则将当前页面的 name 信息存入 keep-alive 全局状态
-    if (to.meta.cache) {
-        let componentName = to.matched[to.matched.length - 1].components.default.name
-        if (componentName) {
-            keepAliveStore.add(componentName)
-        } else {
-            console.warn('该页面组件未设置组件名，会导致缓存失效，请检查')
-        }
-    }
-    // 判断离开页面是否开启缓存，如果开启，则根据缓存规则判断是否需要清空 keep-alive 全局状态里离开页面的 name 信息
-    if (from.meta.cache) {
-        let componentName = from.matched[from.matched.length - 1].components.default.name
-        // 通过 meta.cache 判断针对哪些页面进行缓存
-        switch (typeof from.meta.cache) {
-            case 'string':
-                if (from.meta.cache != to.name) {
-                    keepAliveStore.remove(componentName)
-                }
-                break
-            case 'object':
-                if (!from.meta.cache.includes(to.name)) {
-                    keepAliveStore.remove(componentName)
-                }
-                break
-        }
-        // 如果进入的是 reload 页面，则也将离开页面的缓存清空
-        if (to.name == 'reload') {
-            keepAliveStore.remove(componentName)
-        }
-    }
-})
-
-export default router
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 00000000..3d680a81
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,164 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import { useNProgress } from '@vueuse/integrations/useNProgress'
+import '@/assets/styles/nprogress.scss'
+// 路由相关数据
+import { asyncRoutes, asyncRoutesByFilesystem, constantRoutes, constantRoutesByFilesystem } from './routes'
+import pinia from '@/store'
+import useSettingsStore from '@/store/modules/settings'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+import useUserStore from '@/store/modules/user'
+import useMenuStore from '@/store/modules/menu'
+import useRouteStore from '@/store/modules/route'
+
+const { isLoading } = useNProgress()
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem : constantRoutes as RouteRecordRaw[],
+})
+
+router.beforeEach(async (to, from, next) => {
+  const settingsStore = useSettingsStore()
+  const userStore = useUserStore()
+  const menuStore = useMenuStore()
+  const routeStore = useRouteStore()
+  settingsStore.app.enableProgress && (isLoading.value = true)
+  // 是否已登录
+  if (userStore.isLogin) {
+    // 是否已根据权限动态生成并挂载路由
+    if (routeStore.isGenerate) {
+      // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态
+      settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path)
+      if (to.name) {
+        if (to.matched.length !== 0) {
+          // 如果已登录状态下，进入登录页会强制跳转到控制台页面
+          if (to.name === 'login') {
+            next({
+              name: 'dashboard',
+              replace: true,
+            })
+          }
+          else if (!settingsStore.dashboard.enable && to.name === 'dashboard') {
+            // 如果未开启控制台页面，则默认进入侧边栏导航第一个模块
+            if (menuStore.sidebarMenus.length > 0) {
+              next({
+                path: menuStore.sidebarMenusFirstDeepestPath,
+                replace: true,
+              })
+            }
+            else {
+              next()
+            }
+          }
+          else {
+            next()
+          }
+        }
+        else {
+          // 如果是通过 name 跳转，并且 name 对应的路由没有权限时，需要做这步处理，手动指向到 404 页面
+          next({
+            path: '/404',
+          })
+        }
+      }
+      else {
+        next()
+      }
+    }
+    else {
+      switch (settingsStore.app.routeBaseOn) {
+        case 'frontend':
+          await routeStore.generateRoutesAtFront(asyncRoutes)
+          break
+        case 'backend':
+          await routeStore.generateRoutesAtBack()
+          break
+        case 'filesystem':
+          await routeStore.generateRoutesAtFilesystem(asyncRoutesByFilesystem)
+          switch (settingsStore.menu.baseOn) {
+            case 'frontend':
+              await menuStore.generateMenusAtFront()
+              break
+            case 'backend':
+              await menuStore.generateMenusAtBack()
+              break
+          }
+          break
+      }
+      const removeRoutes: Function[] = []
+      routeStore.flatRoutes.forEach((route) => {
+        if (!/^(https?:|mailto:|tel:)/.test(route.path))
+          removeRoutes.push(router.addRoute(route as RouteRecordRaw))
+      })
+      if (settingsStore.app.routeBaseOn !== 'filesystem') {
+        routeStore.flatSystemRoutes.forEach((route) => {
+          removeRoutes.push(router.addRoute(route as RouteRecordRaw))
+        })
+      }
+      // 记录路由数据，在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name ，则通过调用 router.addRoute() 返回的回调进行删除
+      routeStore.setCurrentRemoveRoutes(removeRoutes)
+      next({
+        path: to.path,
+        query: to.query,
+        replace: true,
+      })
+    }
+  }
+  else {
+    if (to.name !== 'login') {
+      next({
+        name: 'login',
+        query: {
+          redirect: to.fullPath,
+        },
+      })
+    }
+    else {
+      next()
+    }
+  }
+})
+
+router.afterEach((to, from) => {
+  const settingsStore = useSettingsStore()
+  const keepAliveStore = useKeepAliveStore()
+  settingsStore.app.enableProgress && (isLoading.value = false)
+  // 设置页面 title
+  to.meta.title && settingsStore.setTitle(typeof to.meta.title === 'function' ? to.meta.title() : to.meta.title)
+  // 判断当前页面是否开启缓存，如果开启，则将当前页面的 name 信息存入 keep-alive 全局状态
+  if (to.meta.cache) {
+    const componentName = to.matched.at(-1)?.components?.default.name
+    if (componentName)
+      keepAliveStore.add(componentName)
+
+    else
+      console.warn('该页面组件未设置组件名，会导致缓存失效，请检查')
+  }
+  // 判断离开页面是否开启缓存，如果开启，则根据缓存规则判断是否需要清空 keep-alive 全局状态里离开页面的 name 信息
+  if (from.meta.cache) {
+    const componentName = from.matched.at(-1)?.components?.default.name
+    if (componentName) {
+    // 通过 meta.cache 判断针对哪些页面进行缓存
+      switch (typeof from.meta.cache) {
+        case 'string':
+          if (from.meta.cache !== to.name)
+            keepAliveStore.remove(componentName)
+
+          break
+        case 'object':
+          if (!from.meta.cache.includes(to.name as string))
+            keepAliveStore.remove(componentName)
+
+          break
+      }
+      // 如果进入的是 reload 页面，则也将离开页面的缓存清空
+      if (to.name === 'reload')
+        keepAliveStore.remove(componentName)
+    }
+  }
+  document.body.scrollTop = 0
+  document.documentElement.scrollTop = 0
+})
+
+export default router
diff --git a/src/router/modules/breadcrumb.example.js b/src/router/modules/breadcrumb.example.js
deleted file mode 100644
index a81d9cd1..00000000
--- a/src/router/modules/breadcrumb.example.js
+++ /dev/null
@@ -1,61 +0,0 @@
-const Layout = () => import('@/layout/index.vue')
-
-export default {
-    path: '/breadcrumb_example',
-    component: Layout,
-    redirect: '/breadcrumb_example/list1',
-    name: 'breadcrumbExample',
-    meta: {
-        title: '面包屑导航',
-        icon: 'sidebar-breadcrumb'
-    },
-    children: [
-        {
-            path: 'list1',
-            name: 'breadcrumbExampleList1',
-            component: () => import('@/views/breadcrumb_example/list1.vue'),
-            meta: {
-                title: '列表1（平级模式）'
-            }
-        },
-        {
-            path: 'detail1',
-            name: 'breadcrumbExampleDetail1',
-            component: () => import('@/views/breadcrumb_example/detail1.vue'),
-            meta: {
-                title: '详情1',
-                sidebar: false,
-                activeMenu: '/breadcrumb_example/list1'
-            }
-        },
-        {
-            path: 'list2',
-            name: 'breadcrumbExampleList2',
-            redirect: '/breadcrumb_example/list2',
-            meta: {
-                title: '列表2（层级模式）'
-            },
-            children: [
-                {
-                    path: '',
-                    component: () => import('@/views/breadcrumb_example/list2.vue'),
-                    meta: {
-                        title: '列表2（层级模式）',
-                        sidebar: false,
-                        breadcrumb: false
-                    }
-                },
-                {
-                    path: 'detail2',
-                    name: 'breadcrumbExampleDetail2',
-                    component: () => import('@/views/breadcrumb_example/detail2.vue'),
-                    meta: {
-                        title: '详情2',
-                        sidebar: false,
-                        activeMenu: '/breadcrumb_example/list2'
-                    }
-                }
-            ]
-        }
-    ]
-}
diff --git a/src/router/modules/breadcrumb.example.ts b/src/router/modules/breadcrumb.example.ts
new file mode 100644
index 00000000..72f492e9
--- /dev/null
+++ b/src/router/modules/breadcrumb.example.ts
@@ -0,0 +1,65 @@
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/index.vue')
+
+const routes: Route.recordRaw = {
+  path: '/breadcrumb_example',
+  component: Layout,
+  redirect: '/breadcrumb_example/list1',
+  name: 'breadcrumbExample',
+  meta: {
+    title: '面包屑导航',
+    icon: 'sidebar-breadcrumb',
+  },
+  children: [
+    {
+      path: 'list1',
+      name: 'breadcrumbExampleList1',
+      component: () => import('@/views/breadcrumb_example/list1.vue'),
+      meta: {
+        title: '列表1（平级模式）',
+      },
+    },
+    {
+      path: 'detail1',
+      name: 'breadcrumbExampleDetail1',
+      component: () => import('@/views/breadcrumb_example/detail1.vue'),
+      meta: {
+        title: '详情1',
+        sidebar: false,
+        activeMenu: '/breadcrumb_example/list1',
+      },
+    },
+    {
+      path: 'list2',
+      name: 'breadcrumbExampleList2',
+      redirect: '/breadcrumb_example/list2',
+      meta: {
+        title: '列表2（层级模式）',
+      },
+      children: [
+        {
+          path: '',
+          component: () => import('@/views/breadcrumb_example/list2.vue'),
+          meta: {
+            title: '列表2（层级模式）',
+            sidebar: false,
+            breadcrumb: false,
+          },
+        },
+        {
+          path: 'detail2',
+          name: 'breadcrumbExampleDetail2',
+          component: () => import('@/views/breadcrumb_example/detail2.vue'),
+          meta: {
+            title: '详情2',
+            sidebar: false,
+            activeMenu: '/breadcrumb_example/list2',
+          },
+        },
+      ],
+    },
+  ],
+}
+
+export default routes
diff --git a/src/router/modules/component.basic.example.js b/src/router/modules/component.basic.example.js
deleted file mode 100644
index f9426b68..00000000
--- a/src/router/modules/component.basic.example.js
+++ /dev/null
@@ -1,126 +0,0 @@
-const Layout = () => import('@/layout/index.vue')
-
-export default {
-    path: '/component_basic_example',
-    component: Layout,
-    redirect: '/component_basic_example/icon',
-    name: 'componentBasicExample',
-    meta: {
-        title: '基础组件（部分）',
-        icon: 'sidebar-element'
-    },
-    children: [
-        {
-            path: 'icon',
-            name: 'componentBasicExampleIcon',
-            component: () => import('@/views/component_basic_example/icon.vue'),
-            meta: {
-                title: '图标'
-            }
-        },
-        {
-            path: 'button',
-            name: 'componentBasicExampleButton',
-            component: () => import('@/views/component_basic_example/button.vue'),
-            meta: {
-                title: '按钮'
-            }
-        },
-        {
-            path: 'link',
-            name: 'componentBasicExampleLink',
-            component: () => import('@/views/component_basic_example/link.vue'),
-            meta: {
-                title: '文字链接'
-            }
-        },
-        {
-            path: 'radio',
-            name: 'componentBasicExampleRadio',
-            component: () => import('@/views/component_basic_example/radio.vue'),
-            meta: {
-                title: '单选框'
-            }
-        },
-        {
-            path: 'checkbox',
-            name: 'componentBasicExampleCheckbox',
-            component: () => import('@/views/component_basic_example/checkbox.vue'),
-            meta: {
-                title: '多选框'
-            }
-        },
-        {
-            path: 'input',
-            name: 'componentBasicExampleInput',
-            component: () => import('@/views/component_basic_example/input.vue'),
-            meta: {
-                title: '输入框'
-            }
-        },
-        {
-            path: 'inputnumber',
-            name: 'componentBasicExampleInputnumber',
-            component: () => import('@/views/component_basic_example/inputnumber.vue'),
-            meta: {
-                title: '计数器'
-            }
-        },
-        {
-            path: 'select',
-            name: 'componentBasicExampleSelect',
-            component: () => import('@/views/component_basic_example/select.vue'),
-            meta: {
-                title: '选择器'
-            }
-        },
-        {
-            path: 'switch',
-            name: 'componentBasicExampleSwitch',
-            component: () => import('@/views/component_basic_example/switch.vue'),
-            meta: {
-                title: '开关'
-            }
-        },
-        {
-            path: 'slider',
-            name: 'componentBasicExampleSlider',
-            component: () => import('@/views/component_basic_example/slider.vue'),
-            meta: {
-                title: '滑块'
-            }
-        },
-        {
-            path: 'timepicker',
-            name: 'componentBasicExampleTimepicker',
-            component: () => import('@/views/component_basic_example/timepicker.vue'),
-            meta: {
-                title: '时间选择器'
-            }
-        },
-        {
-            path: 'datepicker',
-            name: 'componentBasicExampleDatepicker',
-            component: () => import('@/views/component_basic_example/datepicker.vue'),
-            meta: {
-                title: '日期选择器'
-            }
-        },
-        {
-            path: 'datetimepicker',
-            name: 'componentBasicExampleDatetimepicker',
-            component: () => import('@/views/component_basic_example/datetimepicker.vue'),
-            meta: {
-                title: '日期时间选择器'
-            }
-        },
-        {
-            path: 'rate',
-            name: 'componentBasicExampleRate',
-            component: () => import('@/views/component_basic_example/rate.vue'),
-            meta: {
-                title: '评分'
-            }
-        }
-    ]
-}
diff --git a/src/router/modules/component.basic.example.ts b/src/router/modules/component.basic.example.ts
new file mode 100644
index 00000000..d854cf11
--- /dev/null
+++ b/src/router/modules/component.basic.example.ts
@@ -0,0 +1,122 @@
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/index.vue')
+
+const routes: Route.recordRaw = {
+  path: '/component_basic_example',
+  component: Layout,
+  redirect: '/component_basic_example/icon',
+  name: 'componentBasicExample',
+  meta: {
+    title: '基础组件（部分）',
+    icon: 'ep:element-plus',
+  },
+  children: [
+    {
+      path: 'button',
+      name: 'componentBasicExampleButton',
+      component: () => import('@/views/component_basic_example/button.vue'),
+      meta: {
+        title: '按钮',
+      },
+    },
+    {
+      path: 'link',
+      name: 'componentBasicExampleLink',
+      component: () => import('@/views/component_basic_example/link.vue'),
+      meta: {
+        title: '文字链接',
+      },
+    },
+    {
+      path: 'radio',
+      name: 'componentBasicExampleRadio',
+      component: () => import('@/views/component_basic_example/radio.vue'),
+      meta: {
+        title: '单选框',
+      },
+    },
+    {
+      path: 'checkbox',
+      name: 'componentBasicExampleCheckbox',
+      component: () => import('@/views/component_basic_example/checkbox.vue'),
+      meta: {
+        title: '多选框',
+      },
+    },
+    {
+      path: 'input',
+      name: 'componentBasicExampleInput',
+      component: () => import('@/views/component_basic_example/input.vue'),
+      meta: {
+        title: '输入框',
+      },
+    },
+    {
+      path: 'inputnumber',
+      name: 'componentBasicExampleInputnumber',
+      component: () => import('@/views/component_basic_example/inputnumber.vue'),
+      meta: {
+        title: '计数器',
+      },
+    },
+    {
+      path: 'select',
+      name: 'componentBasicExampleSelect',
+      component: () => import('@/views/component_basic_example/select.vue'),
+      meta: {
+        title: '选择器',
+      },
+    },
+    {
+      path: 'switch',
+      name: 'componentBasicExampleSwitch',
+      component: () => import('@/views/component_basic_example/switch.vue'),
+      meta: {
+        title: '开关',
+      },
+    },
+    {
+      path: 'slider',
+      name: 'componentBasicExampleSlider',
+      component: () => import('@/views/component_basic_example/slider.vue'),
+      meta: {
+        title: '滑块',
+      },
+    },
+    {
+      path: 'timepicker',
+      name: 'componentBasicExampleTimepicker',
+      component: () => import('@/views/component_basic_example/timepicker.vue'),
+      meta: {
+        title: '时间选择器',
+      },
+    },
+    {
+      path: 'datepicker',
+      name: 'componentBasicExampleDatepicker',
+      component: () => import('@/views/component_basic_example/datepicker.vue'),
+      meta: {
+        title: '日期选择器',
+      },
+    },
+    {
+      path: 'datetimepicker',
+      name: 'componentBasicExampleDatetimepicker',
+      component: () => import('@/views/component_basic_example/datetimepicker.vue'),
+      meta: {
+        title: '日期时间选择器',
+      },
+    },
+    {
+      path: 'rate',
+      name: 'componentBasicExampleRate',
+      component: () => import('@/views/component_basic_example/rate.vue'),
+      meta: {
+        title: '评分',
+      },
+    },
+  ],
+}
+
+export default routes
diff --git a/src/router/modules/component.extend.example.js b/src/router/modules/component.extend.example.js
deleted file mode 100644
index d87dfcc1..00000000
--- a/src/router/modules/component.extend.example.js
+++ /dev/null
@@ -1,110 +0,0 @@
-const Layout = () => import('@/layout/index.vue')
-
-export default {
-    path: '/component_extend_example',
-    component: Layout,
-    redirect: '/component_extend_example/pageheader',
-    name: 'componentExtendExample',
-    meta: {
-        title: '扩展组件',
-        icon: 'sidebar-component'
-    },
-    children: [
-        {
-            path: 'svg',
-            name: 'componentExtendExampleSvg',
-            component: () => import('@/views/component_extend_example/svg.demo.vue'),
-            meta: {
-                title: 'SVG Icon'
-            }
-        },
-        {
-            path: 'pageheader',
-            name: 'componentExtendExamplePageheader',
-            component: () => import('@/views/component_extend_example/pageheader.demo.vue'),
-            meta: {
-                title: '页头'
-            }
-        },
-        {
-            path: 'pagemain',
-            name: 'componentExtendExamplePagemain',
-            component: () => import('@/views/component_extend_example/pagemain.demo.vue'),
-            meta: {
-                title: '内容块'
-            }
-        },
-        {
-            path: 'actionbar',
-            name: 'componentExtendExampleActionbar',
-            component: () => import('@/views/component_extend_example/actionbar.demo.vue'),
-            meta: {
-                title: '固定底部操作栏'
-            }
-        },
-        {
-            path: 'searchbar',
-            name: 'componentExtendExampleSearchbar',
-            component: () => import('@/views/component_extend_example/searchbar.demo.vue'),
-            meta: {
-                title: '搜索面板'
-            }
-        },
-        {
-            path: 'batchactionbar',
-            name: 'componentExtendExampleBatchactionbar',
-            component: () => import('@/views/component_extend_example/batchactionbar.demo.vue'),
-            meta: {
-                title: '批量操作栏'
-            }
-        },
-        {
-            path: 'tableautoheight',
-            name: 'componentExtendExampleTableautoheight',
-            component: () => import('@/views/component_extend_example/table.autoheight.demo.vue'),
-            meta: {
-                title: '表格高度自适应'
-            }
-        },
-        {
-            path: 'upload',
-            name: 'componentExtendExampleUpload',
-            component: () => import('@/views/component_extend_example/upload.demo.vue'),
-            meta: {
-                title: '上传'
-            }
-        },
-        {
-            path: 'imagepreview',
-            name: 'componentExtendExampleImagePreview',
-            component: () => import('@/views/component_extend_example/image.preview.demo.vue'),
-            meta: {
-                title: '图片预览'
-            }
-        },
-        {
-            path: 'trend',
-            name: 'componentExtendExampleTrend',
-            component: () => import('@/views/component_extend_example/trend.demo.vue'),
-            meta: {
-                title: '趋势标记'
-            }
-        },
-        {
-            path: 'pcas',
-            name: 'componentExtendExamplePcas',
-            component: () => import('@/views/component_extend_example/pcas.demo.vue'),
-            meta: {
-                title: '省市区街道联动'
-            }
-        },
-        {
-            path: 'editor',
-            name: 'componentExtendExampleEditor',
-            component: () => import('@/views/component_extend_example/editor.demo.vue'),
-            meta: {
-                title: '编辑器'
-            }
-        }
-    ]
-}
diff --git a/src/router/modules/component.extend.example.ts b/src/router/modules/component.extend.example.ts
new file mode 100644
index 00000000..339a2f34
--- /dev/null
+++ b/src/router/modules/component.extend.example.ts
@@ -0,0 +1,114 @@
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/index.vue')
+
+const routes: Route.recordRaw = {
+  path: '/component_extend_example',
+  component: Layout,
+  redirect: '/component_extend_example/pageheader',
+  name: 'componentExtendExample',
+  meta: {
+    title: '扩展组件',
+    icon: 'sidebar-component',
+  },
+  children: [
+    {
+      path: 'svg',
+      name: 'componentExtendExampleSvg',
+      component: () => import('@/views/component_extend_example/svg.demo.vue'),
+      meta: {
+        title: 'SVG Icon',
+      },
+    },
+    {
+      path: 'pageheader',
+      name: 'componentExtendExamplePageheader',
+      component: () => import('@/views/component_extend_example/pageheader.demo.vue'),
+      meta: {
+        title: '页头',
+      },
+    },
+    {
+      path: 'pagemain',
+      name: 'componentExtendExamplePagemain',
+      component: () => import('@/views/component_extend_example/pagemain.demo.vue'),
+      meta: {
+        title: '内容块',
+      },
+    },
+    {
+      path: 'actionbar',
+      name: 'componentExtendExampleActionbar',
+      component: () => import('@/views/component_extend_example/actionbar.demo.vue'),
+      meta: {
+        title: '固定底部操作栏',
+      },
+    },
+    {
+      path: 'searchbar',
+      name: 'componentExtendExampleSearchbar',
+      component: () => import('@/views/component_extend_example/searchbar.demo.vue'),
+      meta: {
+        title: '搜索面板',
+      },
+    },
+    {
+      path: 'batchactionbar',
+      name: 'componentExtendExampleBatchactionbar',
+      component: () => import('@/views/component_extend_example/batchactionbar.demo.vue'),
+      meta: {
+        title: '批量操作栏',
+      },
+    },
+    {
+      path: 'tableautoheight',
+      name: 'componentExtendExampleTableautoheight',
+      component: () => import('@/views/component_extend_example/table.autoheight.demo.vue'),
+      meta: {
+        title: '表格高度自适应',
+      },
+    },
+    {
+      path: 'upload',
+      name: 'componentExtendExampleUpload',
+      component: () => import('@/views/component_extend_example/upload.demo.vue'),
+      meta: {
+        title: '上传',
+      },
+    },
+    {
+      path: 'imagepreview',
+      name: 'componentExtendExampleImagePreview',
+      component: () => import('@/views/component_extend_example/image.preview.demo.vue'),
+      meta: {
+        title: '图片预览',
+      },
+    },
+    {
+      path: 'trend',
+      name: 'componentExtendExampleTrend',
+      component: () => import('@/views/component_extend_example/trend.demo.vue'),
+      meta: {
+        title: '趋势标记',
+      },
+    },
+    {
+      path: 'pcas',
+      name: 'componentExtendExamplePcas',
+      component: () => import('@/views/component_extend_example/pcas.demo.vue'),
+      meta: {
+        title: '省市区街道联动',
+      },
+    },
+    {
+      path: 'editor',
+      name: 'componentExtendExampleEditor',
+      component: () => import('@/views/component_extend_example/editor.demo.vue'),
+      meta: {
+        title: '编辑器',
+      },
+    },
+  ],
+}
+
+export default routes
diff --git a/src/router/modules/ecology.example.js b/src/router/modules/ecology.example.js
deleted file mode 100644
index 65f7f2e0..00000000
--- a/src/router/modules/ecology.example.js
+++ /dev/null
@@ -1,66 +0,0 @@
-const Layout = () => import('@/layout/index.vue')
-
-export default [
-    {
-        path: '/official',
-        meta: {
-            title: '官方周边',
-            icon: 'ep:grid'
-        },
-        children: [
-            {
-                path: 'https://hooray.gitee.io/fantastic-startkit/',
-                meta: {
-                    title: 'Fantastic-startkit 项目启动套件'
-                }
-            },
-            {
-                path: 'https://hooray.gitee.io/one-step-admin/',
-                meta: {
-                    title: 'One-step-admin 干啥都快人一步的中后台框架'
-                }
-            }
-        ]
-    },
-    {
-        path: '/cooperation',
-        meta: {
-            title: '战略合作',
-            icon: 'sidebar-cooperation'
-        },
-        children: [
-            {
-                path: 'https://www.vform666.com',
-                meta: {
-                    title: 'VForm 低代码表单'
-                }
-            },
-            {
-                path: 'https://gitee.com/sciqtw/quickadmin',
-                meta: {
-                    title: 'QuickAdmin 快速开发管理框架'
-                }
-            }
-        ]
-    },
-    {
-        path: '/videos/coming/soon',
-        component: Layout,
-        meta: {
-            title: '视频教程',
-            icon: 'sidebar-videos'
-        },
-        children: [
-            {
-                path: '',
-                name: 'videosComingSoon',
-                component: () => import('@/views/videos_example/coming.soon.vue'),
-                meta: {
-                    title: '视频教程',
-                    sidebar: false,
-                    breadcrumb: false
-                }
-            }
-        ]
-    }
-]
diff --git a/src/router/modules/ecology.example.ts b/src/router/modules/ecology.example.ts
new file mode 100644
index 00000000..f24c33c5
--- /dev/null
+++ b/src/router/modules/ecology.example.ts
@@ -0,0 +1,70 @@
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/index.vue')
+
+const routes: Route.recordRaw[] = [
+  {
+    path: '/official',
+    meta: {
+      title: '官方周边',
+      icon: 'ep:grid',
+    },
+    children: [
+      {
+        path: 'https://hooray.gitee.io/fantastic-startkit/',
+        meta: {
+          title: 'Fantastic-startkit 项目启动套件',
+        },
+      },
+      {
+        path: 'https://hooray.gitee.io/one-step-admin/',
+        meta: {
+          title: 'One-step-admin 干啥都快人一步的中后台框架',
+        },
+      },
+    ],
+  },
+  {
+    path: '/cooperation',
+    meta: {
+      title: '战略合作',
+      icon: 'sidebar-cooperation',
+    },
+    children: [
+      {
+        path: 'https://www.vform666.com',
+        meta: {
+          title: 'VForm 低代码表单',
+        },
+      },
+      {
+        path: 'https://gitee.com/sciqtw/quickadmin',
+        meta: {
+          title: 'QuickAdmin 快速开发管理框架',
+        },
+      },
+    ],
+  },
+  {
+    path: '/video/coming/soon',
+    component: Layout,
+    meta: {
+      title: '视频教程',
+      icon: 'sidebar-videos',
+    },
+    children: [
+      {
+        path: '',
+        name: 'videosComingSoon',
+        component: () => import('@/views/videos_example/coming.soon.vue'),
+        meta: {
+          title: '视频教程',
+          sidebar: false,
+          breadcrumb: false,
+        },
+      },
+    ],
+  },
+]
+
+export default routes
diff --git a/src/router/modules/external.link.example.js b/src/router/modules/external.link.example.js
deleted file mode 100644
index 1ae9ce61..00000000
--- a/src/router/modules/external.link.example.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const Layout = () => import('@/layout/index.vue')
-
-export default {
-    path: '/link',
-    component: Layout,
-    redirect: '/link/iframe',
-    name: 'externalLinkExample',
-    meta: {
-        title: '外链',
-        icon: 'sidebar-external-link'
-    },
-    children: [
-        {
-            path: 'https://gitee.com/hooray/fantastic-admin',
-            meta: {
-                title: 'Gitee 仓库'
-            }
-        },
-        {
-            path: 'https://github.com/hooray/fantastic-admin',
-            meta: {
-                title: 'Github 仓库'
-            }
-        }
-    ]
-}
diff --git a/src/router/modules/external.link.example.ts b/src/router/modules/external.link.example.ts
new file mode 100644
index 00000000..72e7f94c
--- /dev/null
+++ b/src/router/modules/external.link.example.ts
@@ -0,0 +1,29 @@
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/index.vue')
+
+const routes: Route.recordRaw = {
+  path: '/link',
+  component: Layout,
+  name: 'externalLinkExample',
+  meta: {
+    title: '外链',
+    icon: 'sidebar-external-link',
+  },
+  children: [
+    {
+      path: 'https://gitee.com/hooray/fantastic-admin',
+      meta: {
+        title: 'Gitee 仓库',
+      },
+    },
+    {
+      path: 'https://github.com/hooray/fantastic-admin',
+      meta: {
+        title: 'Github 仓库',
+      },
+    },
+  ],
+}
+
+export default routes
diff --git a/src/router/modules/jsx.example.js b/src/router/modules/jsx.example.js
deleted file mode 100644
index a2edd5e0..00000000
--- a/src/router/modules/jsx.example.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const Layout = () => import('@/layout/index.vue')
-
-export default {
-    path: '/jsx_example',
-    component: Layout,
-    redirect: '/jsx_example/index',
-    name: 'jsxExample',
-    meta: {
-        title: 'JSX',
-        icon: 'sidebar-jsx'
-    },
-    children: [
-        {
-            path: 'index',
-            name: 'jsxExampleIndex',
-            component: () => import('@/views/jsx_example/index.jsx'),
-            meta: {
-                title: 'JSX',
-                sidebar: false,
-                breadcrumb: false,
-                activeMenu: '/jsx_example'
-            }
-        }
-    ]
-}
diff --git a/src/router/modules/jsx.example.ts b/src/router/modules/jsx.example.ts
new file mode 100644
index 00000000..a545018f
--- /dev/null
+++ b/src/router/modules/jsx.example.ts
@@ -0,0 +1,29 @@
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/index.vue')
+
+const routes: Route.recordRaw = {
+  path: '/jsx_example',
+  component: Layout,
+  redirect: '/jsx_example/index',
+  name: 'jsxExample',
+  meta: {
+    title: 'JSX',
+    icon: 'sidebar-jsx',
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'jsxExampleIndex',
+      component: () => import('@/views/jsx_example/index.jsx'),
+      meta: {
+        title: 'JSX',
+        sidebar: false,
+        breadcrumb: false,
+        activeMenu: '/jsx_example',
+      },
+    },
+  ],
+}
+
+export default routes
diff --git a/src/router/modules/keep.alive.example.js b/src/router/modules/keep.alive.example.js
deleted file mode 100644
index ffa5d699..00000000
--- a/src/router/modules/keep.alive.example.js
+++ /dev/null
@@ -1,81 +0,0 @@
-const Layout = () => import('@/layout/index.vue')
-
-export default {
-    path: '/keep_alive_example',
-    component: Layout,
-    redirect: '/keep_alive_example/page',
-    name: 'keepAliveExample',
-    meta: {
-        title: '页面缓存',
-        icon: 'sidebar-keep-alive'
-    },
-    children: [
-        {
-            path: 'page',
-            name: 'keepAliveExamplePage',
-            component: () => import('@/views/keep_alive_example/page.vue'),
-            meta: {
-                title: '页面缓存',
-                breadcrumb: false
-            }
-        },
-        {
-            path: 'detail',
-            name: 'keepAliveExampleDetail',
-            component: () => import('@/views/keep_alive_example/detail.vue'),
-            meta: {
-                title: '平级路由',
-                sidebar: false,
-                activeMenu: '/keep_alive_example/page'
-            }
-        },
-        {
-            path: 'nested',
-            redirect: '/keep_alive_example/detail2',
-            meta: {
-                title: '下级路由',
-                sidebar: false
-            },
-            children: [
-                {
-                    path: 'detail',
-                    name: 'keepAliveExampleNestedDetail',
-                    component: () => import('@/views/keep_alive_example/detail.vue'),
-                    meta: {
-                        title: '测试页面',
-                        activeMenu: '/keep_alive_example/page'
-                    }
-                }
-            ]
-        },
-        {
-            path: 'nested',
-            name: 'keepAliveExampleNested1',
-            component: () => import('@/views/keep_alive_example/nested/nested.vue'),
-            meta: {
-                title: '路由多级缓存(1)'
-            },
-            children: [
-                {
-                    path: 'nested',
-                    name: 'keepAliveExampleNested2',
-                    component: () => import('@/views/keep_alive_example/nested/nested/nested.vue'),
-                    meta: {
-                        title: '路由多级缓存(1-1)'
-                    },
-                    children: [
-                        {
-                            path: 'test',
-                            name: 'keepAliveExampleNestedTest',
-                            component: () => import('@/views/keep_alive_example/nested/nested/nested/index.vue'),
-                            meta: {
-                                title: '测试页面(1-1-1)',
-                                cache: true
-                            }
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
-}
diff --git a/src/router/modules/keep.alive.example.ts b/src/router/modules/keep.alive.example.ts
new file mode 100644
index 00000000..caca5ef7
--- /dev/null
+++ b/src/router/modules/keep.alive.example.ts
@@ -0,0 +1,85 @@
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/index.vue')
+
+const routes: Route.recordRaw = {
+  path: '/keep_alive_example',
+  component: Layout,
+  redirect: '/keep_alive_example/page',
+  name: 'keepAliveExample',
+  meta: {
+    title: '页面缓存',
+    icon: 'sidebar-keep-alive',
+  },
+  children: [
+    {
+      path: 'page',
+      name: 'keepAliveExamplePage',
+      component: () => import('@/views/keep_alive_example/page.vue'),
+      meta: {
+        title: '页面缓存',
+        breadcrumb: false,
+      },
+    },
+    {
+      path: 'detail',
+      name: 'keepAliveExampleDetail',
+      component: () => import('@/views/keep_alive_example/detail.vue'),
+      meta: {
+        title: '平级路由',
+        sidebar: false,
+        activeMenu: '/keep_alive_example/page',
+      },
+    },
+    {
+      path: 'nested',
+      redirect: '/keep_alive_example/nested/detail',
+      meta: {
+        title: '嵌套路由',
+        sidebar: false,
+      },
+      children: [
+        {
+          path: 'detail',
+          name: 'keepAliveExampleNestedDetail',
+          component: () => import('@/views/keep_alive_example/detail.vue'),
+          meta: {
+            title: '嵌套路由',
+            activeMenu: '/keep_alive_example/page',
+          },
+        },
+      ],
+    },
+    {
+      path: 'nested1',
+      name: 'keepAliveExampleNested1',
+      component: () => import('@/views/keep_alive_example/nested/nested.vue'),
+      meta: {
+        title: '路由多级缓存1',
+      },
+      children: [
+        {
+          path: 'nested2',
+          name: 'keepAliveExampleNested2',
+          component: () => import('@/views/keep_alive_example/nested/nested/nested.vue'),
+          meta: {
+            title: '路由多级缓存1-1',
+          },
+          children: [
+            {
+              path: 'index',
+              name: 'keepAliveExampleNestedIndex',
+              component: () => import('@/views/keep_alive_example/nested/nested/nested/index.vue'),
+              meta: {
+                title: '路由多级缓存1-1-1',
+                cache: true,
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+export default routes
diff --git a/src/router/modules/mock.example.js b/src/router/modules/mock.example.js
deleted file mode 100644
index 2736a867..00000000
--- a/src/router/modules/mock.example.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const Layout = () => import('@/layout/index.vue')
-
-export default {
-    path: '/mock_example',
-    component: Layout,
-    redirect: '/mock_example/index',
-    name: 'mockExample',
-    meta: {
-        title: 'Mock',
-        icon: 'sidebar-mock'
-    },
-    children: [
-        {
-            path: 'index',
-            name: 'mockExampleIndex',
-            component: () => import('@/views/mock_example/index.vue'),
-            meta: {
-                title: 'Mock',
-                sidebar: false,
-                breadcrumb: false,
-                activeMenu: '/mock_example'
-            }
-        }
-    ]
-}
diff --git a/src/router/modules/mock.example.ts b/src/router/modules/mock.example.ts
new file mode 100644
index 00000000..36c9df36
--- /dev/null
+++ b/src/router/modules/mock.example.ts
@@ -0,0 +1,29 @@
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/index.vue')
+
+const routes: Route.recordRaw = {
+  path: '/mock_example',
+  component: Layout,
+  redirect: '/mock_example/index',
+  name: 'mockExample',
+  meta: {
+    title: 'Mock',
+    icon: 'sidebar-mock',
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'mockExampleIndex',
+      component: () => import('@/views/mock_example/index.vue'),
+      meta: {
+        title: 'Mock',
+        sidebar: false,
+        breadcrumb: false,
+        activeMenu: '/mock_example',
+      },
+    },
+  ],
+}
+
+export default routes
diff --git a/src/router/modules/multilevel.menu.example.js b/src/router/modules/multilevel.menu.example.js
deleted file mode 100644
index 6f632ccd..00000000
--- a/src/router/modules/multilevel.menu.example.js
+++ /dev/null
@@ -1,66 +0,0 @@
-const Layout = () => import('@/layout/index.vue')
-
-export default {
-    path: '/multilevel_menu_example',
-    component: Layout,
-    redirect: '/multilevel_menu_example/page',
-    name: 'multilevelMenuExample',
-    meta: {
-        title: '多级导航',
-        icon: 'sidebar-menu'
-    },
-    children: [
-        {
-            path: 'page',
-            name: 'multilevelMenuExample1',
-            component: () => import('@/views/multilevel_menu_example/page.vue'),
-            meta: {
-                title: '导航1'
-            }
-        },
-        {
-            path: 'level2',
-            name: 'multilevelMenuExample2',
-            redirect: '/multilevel_menu_example/level2/page',
-            meta: {
-                title: '导航2'
-            },
-            children: [
-                {
-                    path: 'page',
-                    name: 'multilevelMenuExample2-1',
-                    component: () => import('@/views/multilevel_menu_example/level2/page.vue'),
-                    meta: {
-                        title: '导航2-1'
-                    }
-                },
-                {
-                    path: 'level3',
-                    name: 'multilevelMenuExample2-2',
-                    redirect: '/multilevel_menu_example/level2/level3/page1',
-                    meta: {
-                        title: '导航2-2'
-                    },
-                    children: [
-                        {
-                            path: 'page1',
-                            name: 'multilevelMenuExample2-2-1',
-                            component: () => import('@/views/multilevel_menu_example/level2/level3/page1.vue'),
-                            meta: {
-                                title: '导航2-2-1'
-                            }
-                        },
-                        {
-                            path: 'page2',
-                            name: 'multilevelMenuExample2-2-2',
-                            component: () => import('@/views/multilevel_menu_example/level2/level3/page2.vue'),
-                            meta: {
-                                title: '导航2-2-2'
-                            }
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
-}
diff --git a/src/router/modules/multilevel.menu.example.ts b/src/router/modules/multilevel.menu.example.ts
new file mode 100644
index 00000000..75f3eb39
--- /dev/null
+++ b/src/router/modules/multilevel.menu.example.ts
@@ -0,0 +1,70 @@
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/index.vue')
+
+const routes: Route.recordRaw = {
+  path: '/multilevel_menu_example',
+  component: Layout,
+  redirect: '/multilevel_menu_example/page',
+  name: 'multilevelMenuExample',
+  meta: {
+    title: '多级导航',
+    icon: 'sidebar-menu',
+  },
+  children: [
+    {
+      path: 'page',
+      name: 'multilevelMenuExample1',
+      component: () => import('@/views/multilevel_menu_example/page.vue'),
+      meta: {
+        title: '导航1',
+      },
+    },
+    {
+      path: 'level2',
+      name: 'multilevelMenuExample2',
+      redirect: '/multilevel_menu_example/level2/page',
+      meta: {
+        title: '导航2',
+      },
+      children: [
+        {
+          path: 'page',
+          name: 'multilevelMenuExample2-1',
+          component: () => import('@/views/multilevel_menu_example/level2/page.vue'),
+          meta: {
+            title: '导航2-1',
+          },
+        },
+        {
+          path: 'level3',
+          name: 'multilevelMenuExample2-2',
+          redirect: '/multilevel_menu_example/level2/level3/page1',
+          meta: {
+            title: '导航2-2',
+          },
+          children: [
+            {
+              path: 'page1',
+              name: 'multilevelMenuExample2-2-1',
+              component: () => import('@/views/multilevel_menu_example/level2/level3/page1.vue'),
+              meta: {
+                title: '导航2-2-1',
+              },
+            },
+            {
+              path: 'page2',
+              name: 'multilevelMenuExample2-2-2',
+              component: () => import('@/views/multilevel_menu_example/level2/level3/page2.vue'),
+              meta: {
+                title: '导航2-2-2',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+export default routes
diff --git a/src/router/modules/permission.example.js b/src/router/modules/permission.example.js
deleted file mode 100644
index 7a2b18af..00000000
--- a/src/router/modules/permission.example.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const Layout = () => import('@/layout/index.vue')
-
-export default {
-    path: '/permission_example',
-    component: Layout,
-    redirect: '/permission_example/index',
-    name: 'permissionExample',
-    meta: {
-        title: '权限验证',
-        icon: 'sidebar-permission'
-    },
-    children: [
-        {
-            path: 'index',
-            name: 'permissionExampleIndex',
-            component: () => import('@/views/permission_example/index.vue'),
-            meta: {
-                title: '权限验证',
-                auth: ['permission.browse'],
-                sidebar: false,
-                breadcrumb: false,
-                activeMenu: '/permission_example'
-            }
-        }
-    ]
-}
diff --git a/src/router/modules/permission.example.ts b/src/router/modules/permission.example.ts
new file mode 100644
index 00000000..26431ede
--- /dev/null
+++ b/src/router/modules/permission.example.ts
@@ -0,0 +1,30 @@
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/index.vue')
+
+const routes: Route.recordRaw = {
+  path: '/permission_example',
+  component: Layout,
+  redirect: '/permission_example/index',
+  name: 'permissionExample',
+  meta: {
+    title: '权限验证',
+    icon: 'ep:key',
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'permissionExampleIndex',
+      component: () => import('@/views/permission_example/index.vue'),
+      meta: {
+        title: '权限验证',
+        auth: ['permission.browse'],
+        sidebar: false,
+        breadcrumb: false,
+        activeMenu: '/permission_example',
+      },
+    },
+  ],
+}
+
+export default routes
diff --git a/src/router/routes.js b/src/router/routes.js
deleted file mode 100644
index 1e0f9d8a..00000000
--- a/src/router/routes.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import pinia from '@/store'
-import useSettingsStore from '@/store/modules/settings'
-
-// 固定路由（默认路由）
-let constantRoutes = [
-    {
-        path: '/',
-        redirect: '/dashboard'
-    },
-    {
-        path: '/login',
-        name: 'login',
-        component: () => import('@/views/login.vue'),
-        meta: {
-            title: '登录'
-        }
-    },
-    {
-        path: '/:all(.*)*',
-        name: 'notFound',
-        component: () => import('@/views/[...all].vue'),
-        meta: {
-            title: '找不到页面'
-        }
-    }
-]
-
-// 系统路由
-let systemRoutes = [
-    {
-        path: '/dashboard',
-        component: () => import('@/layout/index.vue'),
-        meta: {
-            title: () => {
-                return useSettingsStore().dashboard.title
-            },
-            breadcrumb: false
-        },
-        children: [
-            {
-                path: '',
-                name: 'dashboard',
-                component: () => import('@/views/index.vue'),
-                meta: {
-                    title: () => {
-                        return useSettingsStore().dashboard.title
-                    },
-                    breadcrumb: false
-                }
-            }
-        ]
-    },
-    {
-        path: '/personal',
-        component: () => import('@/layout/index.vue'),
-        redirect: '/personal/setting',
-        meta: {
-            title: '个人中心',
-            breadcrumb: false
-        },
-        children: [
-            {
-                path: 'setting',
-                name: 'personalSetting',
-                component: () => import('@/views/personal/setting.vue'),
-                meta: {
-                    title: '个人设置',
-                    i18n: 'route.personal.setting',
-                    cache: 'personalEditPassword'
-                }
-            },
-            {
-                path: 'edit/password',
-                name: 'personalEditPassword',
-                component: () => import('@/views/personal/edit.password.vue'),
-                meta: {
-                    title: '修改密码',
-                    i18n: 'route.personal.editpassword'
-                }
-            }
-        ]
-    },
-    {
-        path: '/reload',
-        component: () => import('@/layout/index.vue'),
-        meta: {
-            title: '重新加载',
-            breadcrumb: false
-        },
-        children: [
-            {
-                path: '',
-                name: 'reload',
-                component: () => import('@/views/reload.vue'),
-                meta: {
-                    title: '重新加载',
-                    breadcrumb: false
-                }
-            }
-        ]
-    }
-]
-
-import MultilevelMenuExample from './modules/multilevel.menu.example'
-import BreadcrumbExample from './modules/breadcrumb.example'
-import KeepAliveExample from './modules/keep.alive.example'
-import ComponentBasicExample from './modules/component.basic.example'
-import ComponentExtendExample from './modules/component.extend.example'
-import PermissionExample from './modules/permission.example'
-import MockExample from './modules/mock.example'
-import JsxExample from './modules/jsx.example'
-import ExternalLinkExample from './modules/external.link.example'
-import EcologyExample from './modules/ecology.example'
-
-// 动态路由（异步路由、导航栏路由）
-let asyncRoutes = [
-    {
-        meta: {
-            title: '演示',
-            icon: 'sidebar-default'
-        },
-        children: [
-            MultilevelMenuExample,
-            BreadcrumbExample,
-            KeepAliveExample,
-            ComponentBasicExample,
-            ComponentExtendExample,
-            PermissionExample,
-            MockExample,
-            JsxExample,
-            ExternalLinkExample
-        ]
-    },
-    {
-        meta: {
-            title: '生态',
-            icon: 'sidebar-ecology'
-        },
-        children: [
-            ...EcologyExample
-        ]
-    }
-]
-
-import { setupLayouts } from 'virtual:generated-layouts'
-import generatedRoutes from 'virtual:generated-pages'
-
-if (useSettingsStore(pinia).app.routeBaseOn === 'filesystem') {
-    constantRoutes = generatedRoutes.filter(item => {
-        return item.meta?.enabled !== false && item.meta?.constant === true
-    })
-    asyncRoutes = setupLayouts(generatedRoutes.filter(item => {
-        return item.meta?.enabled !== false && item.meta?.constant !== true && item.meta?.layout !== false
-    }))
-}
-
-export {
-    constantRoutes,
-    systemRoutes,
-    asyncRoutes
-}
diff --git a/src/router/routes.ts b/src/router/routes.ts
new file mode 100644
index 00000000..1fa3bc58
--- /dev/null
+++ b/src/router/routes.ts
@@ -0,0 +1,157 @@
+import { setupLayouts } from 'virtual:generated-layouts'
+import generatedRoutes from 'virtual:generated-pages'
+import MultilevelMenuExample from './modules/multilevel.menu.example'
+import BreadcrumbExample from './modules/breadcrumb.example'
+import KeepAliveExample from './modules/keep.alive.example'
+import ComponentBasicExample from './modules/component.basic.example'
+import ComponentExtendExample from './modules/component.extend.example'
+import PermissionExample from './modules/permission.example'
+import MockExample from './modules/mock.example'
+import JsxExample from './modules/jsx.example'
+import ExternalLinkExample from './modules/external.link.example'
+import EcologyExample from './modules/ecology.example'
+import type { Route } from '@/global'
+import useSettingsStore from '@/store/modules/settings'
+
+// 固定路由（默认路由）
+const constantRoutes: Route.recordRaw[] = [
+  {
+    path: '/',
+    redirect: '/dashboard',
+    meta: {
+      title: '',
+    },
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('@/views/login.vue'),
+    meta: {
+      title: '登录',
+    },
+  },
+  {
+    path: '/:all(.*)*',
+    name: 'notFound',
+    component: () => import('@/views/[...all].vue'),
+    meta: {
+      title: '找不到页面',
+    },
+  },
+]
+
+// 系统路由
+const systemRoutes: Route.recordRaw[] = [
+  {
+    path: '/dashboard',
+    component: () => import('@/layouts/index.vue'),
+    meta: {
+      title: () => useSettingsStore().dashboard.title,
+      breadcrumb: false,
+    },
+    children: [
+      {
+        path: '',
+        name: 'dashboard',
+        component: () => import('@/views/index.vue'),
+        meta: {
+          title: () => useSettingsStore().dashboard.title,
+          breadcrumb: false,
+        },
+      },
+    ],
+  },
+  {
+    path: '/personal',
+    component: () => import('@/layouts/index.vue'),
+    redirect: '/personal/setting',
+    meta: {
+      title: '个人中心',
+      breadcrumb: false,
+    },
+    children: [
+      {
+        path: 'setting',
+        name: 'personalSetting',
+        component: () => import('@/views/personal/setting.vue'),
+        meta: {
+          title: '个人设置',
+          cache: 'personalEditPassword',
+        },
+      },
+      {
+        path: 'edit/password',
+        name: 'personalEditPassword',
+        component: () => import('@/views/personal/edit.password.vue'),
+        meta: {
+          title: '修改密码',
+        },
+      },
+    ],
+  },
+  {
+    path: '/reload',
+    component: () => import('@/layouts/index.vue'),
+    meta: {
+      title: '重新加载',
+      breadcrumb: false,
+    },
+    children: [
+      {
+        path: '',
+        name: 'reload',
+        component: () => import('@/views/reload.vue'),
+        meta: {
+          title: '重新加载',
+          breadcrumb: false,
+        },
+      },
+    ],
+  },
+]
+
+// 动态路由（异步路由、导航栏路由）
+const asyncRoutes: Route.recordMainRaw[] = [
+  {
+    meta: {
+      title: '演示',
+      icon: 'sidebar-default',
+    },
+    children: [
+      MultilevelMenuExample,
+      BreadcrumbExample,
+      KeepAliveExample,
+      ComponentBasicExample,
+      ComponentExtendExample,
+      PermissionExample,
+      MockExample,
+      JsxExample,
+      ExternalLinkExample,
+    ],
+  },
+  {
+    meta: {
+      title: '生态',
+      icon: 'sidebar-ecology',
+    },
+    children: [
+      ...EcologyExample,
+    ],
+  },
+]
+
+const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
+  return item.meta?.enabled !== false && item.meta?.constant === true
+})
+
+const asyncRoutesByFilesystem = setupLayouts(generatedRoutes.filter((item) => {
+  return item.meta?.enabled !== false && item.meta?.constant !== true && item.meta?.layout !== false
+})) as Route.recordRaw[]
+
+export {
+  constantRoutes,
+  systemRoutes,
+  asyncRoutes,
+  constantRoutesByFilesystem,
+  asyncRoutesByFilesystem,
+}
diff --git a/src/settings.custom.json b/src/settings.custom.json
deleted file mode 100644
index 0967ef42..00000000
--- a/src/settings.custom.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/src/settings.default.ts b/src/settings.default.ts
new file mode 100644
index 00000000..99c4ad49
--- /dev/null
+++ b/src/settings.default.ts
@@ -0,0 +1,56 @@
+// 该文件为系统默认配置，请勿修改！！！
+
+import type { RecursiveRequired, Settings } from './global'
+
+const globalSettingsDefault: RecursiveRequired<Settings.all> = {
+  app: {
+    colorScheme: 'light',
+    elementSize: 'default',
+    iconifyOfflineUse: false,
+    enablePermission: false,
+    enableProgress: true,
+    enableDynamicTitle: false,
+    routeBaseOn: 'frontend',
+  },
+  dashboard: {
+    enable: true,
+    title: '控制台',
+  },
+  layout: {
+    enableMobileAdaptation: false,
+  },
+  menu: {
+    baseOn: 'frontend',
+    menuMode: 'side',
+    switchMainMenuAndPageJump: false,
+    subMenuUniqueOpened: true,
+    subMenuCollapse: false,
+    enableSubMenuCollapseButton: false,
+    enableHotkeys: false,
+  },
+  topbar: {
+    fixed: true,
+  },
+  toolbar: {
+    enableFullscreen: false,
+    enablePageReload: false,
+    enableColorScheme: false,
+    enableAppSetting: false,
+  },
+  breadcrumb: {
+    enable: true,
+  },
+  navSearch: {
+    enable: true,
+    enableHotkeys: true,
+  },
+  copyright: {
+    enable: true,
+    dates: '2020-2022',
+    company: 'Fantastic-admin',
+    website: 'https://hooray.gitee.io/fantastic-admin/',
+    beian: '',
+  },
+}
+
+export default globalSettingsDefault
diff --git a/src/settings.js b/src/settings.js
deleted file mode 100644
index 9351269e..00000000
--- a/src/settings.js
+++ /dev/null
@@ -1,102 +0,0 @@
-let globalSettings = {
-    app: {
-        // 颜色方案，可选值为 light、dark
-        colorScheme: 'light',
-        // Element 组件默认尺寸，支持：large、default、small
-        elementSize: 'default',
-        // 是否将 iconify 图标集中的 Element Plus 图标下载到本地，以便在离线环境下使用
-        iconifyOfflineUse: false,
-        // 是否开启权限功能
-        enablePermission: false,
-        // 是否开启载入进度条
-        enableProgress: true,
-        // 是否开启动态标题
-        enableDynamicTitle: false,
-        /**
-         * 路由数据来源
-         * frontend 前端
-         * backend 后端
-         * filesystem 文件系统
-         */
-        routeBaseOn: 'frontend'
-    },
-    // 控制台
-    dashboard: {
-        // 是否开启
-        enable: true,
-        // 控制台名称
-        title: '控制台'
-    },
-    // 布局
-    layout: {
-        // 是否开启移动端适配，开启后当页面宽度小于 992px 时自动切换为移动端展示
-        enableMobileAdaptation: true
-    },
-    // 导航栏
-    menu: {
-        /**
-         * 数据来源，当 app.routeBaseOn 为 filesystem 时生效
-         * frontend 前端
-         * backend 后端
-         */
-        baseOn: 'frontend',
-        /**
-         * 导航栏模式
-         * side 侧边栏模式（含主导航）
-         * head 顶部模式
-         * single 侧边栏模式（无主导航）
-         */
-        menuMode: 'side',
-        // 切换主导航同时跳转页面
-        switchMainMenuAndPageJump: false,
-        // 次导航只保持一个子项的展开
-        subMenuUniqueOpened: true,
-        // 次导航是否收起
-        subMenuCollapse: false
-    },
-    // 顶栏
-    topbar: {
-        // 是否固定
-        fixed: true,
-        // 是否开启侧边栏展开收起按钮
-        enableSidebarCollapse: false,
-        // 是否开启面包屑导航
-        enableBreadcrumb: true,
-        // 是否开启导航搜索
-        enableNavSearch: true,
-        // 是否开启全屏
-        enableFullscreen: false,
-        // 是否开启页面刷新
-        enablePageReload: false,
-        // 是否开启颜色主题
-        enableColorScheme: false,
-        // 是否开启应用配置（建议在生产环境关闭）
-        enableAppSetting: false
-    },
-    // 底部版权
-    copyright: {
-        // 是否开启，同时在路由 meta 对象里可以单独设置某个路由是否显示底部版权信息
-        enable: true,
-        // 版权信息配置，格式为：Copyright © [dates] <company> <beian>
-        dates: '2020-2022',
-        company: 'Fantastic-admin',
-        website: 'https://hooray.gitee.io/fantastic-admin/',
-        beian: ''
-    }
-}
-
-import settingsCustom from './settings.custom.json'
-Object.assign(globalSettings, settingsCustom)
-
-// 演示&开发环境开启全部功能（这部分代码可删除，仅方便作者打包演示环境）
-if (import.meta.env.VITE_APP_MODE === 'example' || import.meta.env.MODE === 'development') {
-    globalSettings.app.enablePermission = true
-    globalSettings.app.enableDynamicTitle = true
-    globalSettings.topbar.enableSidebarCollapse = true
-    globalSettings.topbar.enableFullscreen = true
-    globalSettings.topbar.enablePageReload = true
-    globalSettings.topbar.enableColorScheme = true
-    globalSettings.topbar.enableAppSetting = true
-}
-
-export default globalSettings
diff --git a/src/settings.ts b/src/settings.ts
new file mode 100644
index 00000000..6e4d2f3b
--- /dev/null
+++ b/src/settings.ts
@@ -0,0 +1,23 @@
+import type { Settings } from './global'
+
+const globalSettings: Settings.all = {
+  app: {
+    enablePermission: true,
+    enableDynamicTitle: true,
+  },
+  layout: {
+    enableMobileAdaptation: true,
+  },
+  menu: {
+    enableSubMenuCollapseButton: true,
+    enableHotkeys: true,
+  },
+  toolbar: {
+    enableFullscreen: true,
+    enablePageReload: true,
+    enableColorScheme: true,
+    enableAppSetting: true,
+  },
+}
+
+export default globalSettings
diff --git a/src/shims.d.ts b/src/shims.d.ts
new file mode 100644
index 00000000..691ab88a
--- /dev/null
+++ b/src/shims.d.ts
@@ -0,0 +1,19 @@
+declare interface Window {
+  webkitDevicePixelRatio: any
+  mozDevicePixelRatio: any
+}
+
+declare module '*.vue' {
+  import { type DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare const __SYSTEM_INFO__: {
+  pkg: {
+    version: string
+    dependencies: Recordable<string>
+    devDependencies: Recordable<string>
+  }
+  lastBuildTime: string
+}
diff --git a/src/store/index.js b/src/store/index.ts
similarity index 100%
rename from src/store/index.js
rename to src/store/index.ts
diff --git a/src/store/modules/keepAlive.js b/src/store/modules/keepAlive.js
deleted file mode 100644
index f61c87c5..00000000
--- a/src/store/modules/keepAlive.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const useKeepAliveStore = defineStore(
-    // 唯一ID
-    'keepAlive',
-    {
-        state: () => ({
-            list: []
-        }),
-        actions: {
-            add(name) {
-                if (typeof name === 'string') {
-                    !this.list.includes(name) && this.list.push(name)
-                } else {
-                    name.map(v => {
-                        v && !this.list.includes(v) && this.list.push(v)
-                    })
-                }
-            },
-            remove(name) {
-                if (typeof name === 'string') {
-                    this.list = this.list.filter(v => {
-                        return v !== name
-                    })
-                } else {
-                    this.list = this.list.filter(v => {
-                        return !name.includes(v)
-                    })
-                }
-            },
-            clean() {
-                this.list = []
-            }
-        }
-    }
-)
-
-export default useKeepAliveStore
diff --git a/src/store/modules/keepAlive.ts b/src/store/modules/keepAlive.ts
new file mode 100644
index 00000000..30aaec1d
--- /dev/null
+++ b/src/store/modules/keepAlive.ts
@@ -0,0 +1,38 @@
+const useKeepAliveStore = defineStore(
+  // 唯一ID
+  'keepAlive',
+  {
+    state: () => ({
+      list: [] as string[],
+    }),
+    actions: {
+      add(name: string | string[]) {
+        if (typeof name === 'string') {
+          !this.list.includes(name) && this.list.push(name)
+        }
+        else {
+          name.forEach((v) => {
+            v && !this.list.includes(v) && this.list.push(v)
+          })
+        }
+      },
+      remove(name: string | string[]) {
+        if (typeof name === 'string') {
+          this.list = this.list.filter((v) => {
+            return v !== name
+          })
+        }
+        else {
+          this.list = this.list.filter((v) => {
+            return !name.includes(v)
+          })
+        }
+      },
+      clean() {
+        this.list = []
+      },
+    },
+  },
+)
+
+export default useKeepAliveStore
diff --git a/src/store/modules/menu.js b/src/store/modules/menu.js
deleted file mode 100644
index 4508ccd0..00000000
--- a/src/store/modules/menu.js
+++ /dev/null
@@ -1,180 +0,0 @@
-import { deepClone, resolveRoutePath } from '@/utils'
-import path from 'path-browserify'
-import api from '@/api'
-import menu from '@/menu'
-
-import useSettingsStore from './settings'
-import useUserStore from './user'
-import useRouteStore from './route'
-
-function getDeepestPath(routes, rootPath = '') {
-    let retnPath
-    if (routes.children) {
-        if (
-            routes.children.some(item => {
-                return item.meta.sidebar != false
-            })
-        ) {
-            for (let i = 0; i < routes.children.length; i++) {
-                if (routes.children[i].meta.sidebar != false) {
-                    retnPath = getDeepestPath(routes.children[i], resolveRoutePath(rootPath, routes.path))
-                    break
-                }
-            }
-        } else {
-            retnPath = getDeepestPath(routes.children[0], resolveRoutePath(rootPath, routes.path))
-        }
-    } else {
-        retnPath = resolveRoutePath(rootPath, routes.path)
-    }
-    return retnPath
-}
-
-function hasPermission(permissions, route) {
-    let isAuth = false
-    if (route.meta && route.meta.auth) {
-        isAuth = permissions.some(auth => {
-            if (typeof route.meta.auth == 'string') {
-                return route.meta.auth === auth
-            } else {
-                return route.meta.auth.some(routeAuth => {
-                    return routeAuth === auth
-                })
-            }
-        })
-    } else {
-        isAuth = true
-    }
-    return isAuth
-}
-
-function filterAsyncMenus(menus, permissions) {
-    const res = []
-    menus.forEach(menu => {
-        let tmpMenu = deepClone(menu)
-        if (hasPermission(permissions, tmpMenu)) {
-            if (tmpMenu.children) {
-                tmpMenu.children = filterAsyncMenus(tmpMenu.children, permissions)
-                tmpMenu.children.length && res.push(tmpMenu)
-            } else {
-                res.push(tmpMenu)
-            }
-        }
-    })
-    return res
-}
-
-const useMenuStore = defineStore(
-    // 唯一ID
-    'menu',
-    {
-        state: () => ({
-            menus: [],
-            actived: 0
-        }),
-        getters: {
-            // 完整导航数据
-            allMenus() {
-                const settingsStore = useSettingsStore()
-                let menus
-                if (settingsStore.app.routeBaseOn !== 'filesystem') {
-                    const routeStore = useRouteStore()
-                    if (settingsStore.menu.menuMode === 'single') {
-                        menus = [{ children: [] }]
-                        routeStore.routes.map(item => {
-                            menus[0].children.push(...item.children)
-                        })
-                    } else {
-                        menus = routeStore.routes
-                    }
-                } else {
-                    menus = this.menus
-                }
-                return menus
-            },
-            // 次导航数据
-            sidebarMenus() {
-                return this.allMenus.length > 0 ? this.allMenus[this.actived].children : []
-            },
-            // 次导航里第一个导航的路径
-            sidebarMenusFirstDeepestPath() {
-                return this.allMenus.length > 0 ? getDeepestPath(this.sidebarMenus[0]) : '/'
-            },
-            defaultOpenedPaths() {
-                const settingsStore = useSettingsStore()
-                let defaultOpenedPaths = []
-                if (settingsStore.app.routeBaseOn !== 'filesystem') {
-                    const routeStore = useRouteStore()
-                    routeStore.routes.map(item => {
-                        item.meta.defaultOpened && defaultOpenedPaths.push(item.path)
-                        item.children && item.children.map(child => {
-                            child.meta.defaultOpened && defaultOpenedPaths.push(path.resolve(item.path, child.path))
-                        })
-                    })
-                }
-                return defaultOpenedPaths
-            }
-        },
-        actions: {
-            // 生成导航（前端生成）
-            generateMenusAtFront() {
-                // eslint-disable-next-line no-async-promise-executor
-                return new Promise(async resolve => {
-                    const settingsStore = useSettingsStore()
-                    const userStore = useUserStore()
-                    let accessedMenus
-                    // 如果权限功能开启，则需要对导航数据进行筛选过滤
-                    if (settingsStore.app.enablePermission) {
-                        const permissions = await userStore.getPermissions()
-                        accessedMenus = filterAsyncMenus(menu, permissions)
-                    } else {
-                        accessedMenus = deepClone(menu)
-                    }
-                    this.menus = accessedMenus.filter(item => item.children.length != 0)
-                    resolve()
-                })
-            },
-            // 生成导航（后端生成）
-            generateMenusAtBack() {
-                return new Promise(resolve => {
-                    api.get('menu/list', {
-                        baseURL: '/mock/'
-                    }).then(async res => {
-                        const settingsStore = useSettingsStore()
-                        const userStore = useUserStore()
-                        let accessedMenus
-                        // 如果权限功能开启，则需要对导航数据进行筛选过滤
-                        if (settingsStore.app.enablePermission) {
-                            const permissions = await userStore.getPermissions()
-                            accessedMenus = filterAsyncMenus(res.data, permissions)
-                        } else {
-                            accessedMenus = deepClone(res.data)
-                        }
-                        this.menus = accessedMenus.filter(item => item.children.length != 0)
-                        resolve()
-                    })
-                })
-            },
-            // 切换主导航
-            setActived(data) {
-                if (typeof data === 'number') {
-                    // 如果是 number 类型，则认为是主导航的索引
-                    this.actived = data
-                } else {
-                    // 如果是 string 类型，则认为是路由，需要查找对应的主导航索引
-                    this.allMenus.map((item, index) => {
-                        if (
-                            item.children.some(r => {
-                                return data.indexOf(r.path + '/') === 0 || data == r.path
-                            })
-                        ) {
-                            this.actived = index
-                        }
-                    })
-                }
-            }
-        }
-    }
-)
-
-export default useMenuStore
diff --git a/src/store/modules/menu.ts b/src/store/modules/menu.ts
new file mode 100644
index 00000000..43e44825
--- /dev/null
+++ b/src/store/modules/menu.ts
@@ -0,0 +1,206 @@
+import { cloneDeep } from 'lodash-es'
+import useSettingsStore from './settings'
+import useUserStore from './user'
+import useRouteStore from './route'
+import type { Menu } from '@/global'
+
+import { resolveRoutePath } from '@/utils'
+import api from '@/api'
+import menu from '@/menu'
+
+function getDeepestPath(menu: Menu.recordRaw, rootPath = '') {
+  let retnPath = ''
+  if (menu.path) {
+    if (menu.children) {
+      if (
+        menu.children.some((item) => {
+          return item.meta.sidebar !== false
+        })
+      ) {
+        for (let i = 0; i < menu.children.length; i++) {
+          if (menu.children[i].meta.sidebar !== false) {
+            retnPath = getDeepestPath(menu.children[i], resolveRoutePath(rootPath, menu.path))
+            break
+          }
+        }
+      }
+      else {
+        retnPath = getDeepestPath(menu.children[0], resolveRoutePath(rootPath, menu.path))
+      }
+    }
+    else {
+      retnPath = resolveRoutePath(rootPath, menu.path)
+    }
+  }
+  return retnPath
+}
+
+function hasPermission(permissions: string[], menu: Menu.recordMainRaw | Menu.recordRaw) {
+  let isAuth = false
+  if (menu.meta && menu.meta.auth) {
+    isAuth = permissions.some((auth) => {
+      return typeof menu.meta.auth === 'string'
+        ? menu.meta.auth === auth
+        : typeof menu.meta.auth === 'object'
+          ? menu.meta.auth.includes(auth)
+          : false
+    })
+  }
+  else {
+    isAuth = true
+  }
+  return isAuth
+}
+
+function filterAsyncMenus<T extends Menu.recordMainRaw[] | Menu.recordRaw[]>(menus: T, permissions: string[]): T {
+  const res: any = []
+  menus.forEach((menu) => {
+    const tmpMenu = cloneDeep(menu)
+    if (hasPermission(permissions, tmpMenu)) {
+      if (tmpMenu.children) {
+        tmpMenu.children = filterAsyncMenus(tmpMenu.children, permissions) as Menu.recordRaw[]
+        tmpMenu.children.length && res.push(tmpMenu)
+      }
+      else {
+        res.push(tmpMenu)
+      }
+    }
+  })
+  return res
+}
+
+function getDefaultOpenedPaths(menus: Menu.recordRaw[], rootPath = '') {
+  const defaultOpenedPaths: string[] = []
+  menus.forEach((item) => {
+    if (item.path && item.meta.defaultOpened && item.children) {
+      defaultOpenedPaths.push(resolveRoutePath(rootPath, item.path))
+      const childrenDefaultOpenedPaths = getDefaultOpenedPaths(item.children, resolveRoutePath(rootPath, item.path))
+      if (childrenDefaultOpenedPaths.length > 0)
+        defaultOpenedPaths.push(...childrenDefaultOpenedPaths)
+    }
+  })
+  return defaultOpenedPaths
+}
+
+const useMenuStore = defineStore(
+  // 唯一ID
+  'menu',
+  {
+    state: () => ({
+      menus: [{
+        meta: {},
+        children: [],
+      }] as Menu.recordMainRaw[],
+      actived: 0,
+    }),
+    getters: {
+      // 完整导航数据
+      allMenus() {
+        const settingsStore = useSettingsStore()
+        let menus: Menu.recordMainRaw[] = [{
+          meta: {},
+          children: [],
+        }]
+        if (settingsStore.app.routeBaseOn !== 'filesystem') {
+          const routeStore = useRouteStore()
+          if (settingsStore.menu.menuMode === 'single') {
+            menus[0].children = []
+            routeStore.routes.forEach((item) => {
+              menus[0].children?.push(...item.children as Menu.recordRaw[])
+            })
+          }
+          else {
+            menus = routeStore.routes as Menu.recordMainRaw[]
+          }
+        }
+        else {
+          menus = this.menus
+        }
+        return menus
+      },
+      // 次导航数据
+      sidebarMenus(): Menu.recordMainRaw['children'] {
+        return this.allMenus.length > 0
+          ? this.allMenus[this.actived].children
+          : []
+      },
+      // 次导航里第一个导航的路径
+      sidebarMenusFirstDeepestPath(): string {
+        return this.allMenus.length > 0
+          ? getDeepestPath(this.sidebarMenus[0])
+          : '/'
+      },
+      defaultOpenedPaths() {
+        const settingsStore = useSettingsStore()
+        let defaultOpenedPaths: string[] = []
+        if (settingsStore.app.routeBaseOn !== 'filesystem')
+          defaultOpenedPaths = getDefaultOpenedPaths(this.sidebarMenus)
+
+        return defaultOpenedPaths
+      },
+    },
+    actions: {
+      // 生成导航（前端生成）
+      generateMenusAtFront() {
+        // eslint-disable-next-line no-async-promise-executor
+        return new Promise<void>(async (resolve) => {
+          const settingsStore = useSettingsStore()
+          const userStore = useUserStore()
+          let accessedMenus
+          // 如果权限功能开启，则需要对导航数据进行筛选过滤
+          if (settingsStore.app.enablePermission) {
+            const permissions = await userStore.getPermissions()
+            accessedMenus = filterAsyncMenus(menu, permissions)
+          }
+          else {
+            accessedMenus = cloneDeep(menu)
+          }
+          this.menus = accessedMenus.filter(item => item.children.length !== 0)
+          resolve()
+        })
+      },
+      // 生成导航（后端生成）
+      generateMenusAtBack() {
+        return new Promise<void>((resolve) => {
+          api.get('menu/list', {
+            baseURL: '/mock/',
+          }).then(async (res) => {
+            const settingsStore = useSettingsStore()
+            const userStore = useUserStore()
+            let accessedMenus: Menu.recordMainRaw[]
+            // 如果权限功能开启，则需要对导航数据进行筛选过滤
+            if (settingsStore.app.enablePermission) {
+              const permissions = await userStore.getPermissions()
+              accessedMenus = filterAsyncMenus(res.data, permissions)
+            }
+            else {
+              accessedMenus = cloneDeep(res.data)
+            }
+            this.menus = accessedMenus.filter(item => item.children.length !== 0)
+            resolve()
+          })
+        })
+      },
+      // 切换主导航
+      setActived(data: number | string) {
+        if (typeof data === 'number') {
+          // 如果是 number 类型，则认为是主导航的索引
+          this.actived = data
+        }
+        else {
+          // 如果是 string 类型，则认为是路由，需要查找对应的主导航索引
+          this.allMenus.forEach((item, index) => {
+            if (
+              item.children.some((r) => {
+                return data.indexOf(`${r.path}/`) === 0 || data === r.path
+              })
+            )
+              this.actived = index
+          })
+        }
+      },
+    },
+  },
+)
+
+export default useMenuStore
diff --git a/src/store/modules/route.js b/src/store/modules/route.js
deleted file mode 100644
index e82c672a..00000000
--- a/src/store/modules/route.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import { deepClone, resolveRoutePath } from '@/utils'
-import api from '@/api'
-import { systemRoutes } from '@/router/routes'
-
-import useSettingsStore from './settings'
-import useUserStore from './user'
-
-function hasPermission(permissions, route) {
-    let isAuth = false
-    if (route.meta && route.meta.auth) {
-        isAuth = permissions.some(auth => {
-            if (typeof route.meta.auth == 'string') {
-                return route.meta.auth === auth
-            } else {
-                return route.meta.auth.some(routeAuth => {
-                    return routeAuth === auth
-                })
-            }
-        })
-    } else {
-        isAuth = true
-    }
-    return isAuth
-}
-
-function filterAsyncRoutes(routes, permissions) {
-    const res = []
-    routes.forEach(route => {
-        let tmpRoute = deepClone(route)
-        if (hasPermission(permissions, tmpRoute)) {
-            if (tmpRoute.children) {
-                tmpRoute.children = filterAsyncRoutes(tmpRoute.children, permissions)
-                tmpRoute.children.length && res.push(tmpRoute)
-            } else {
-                res.push(tmpRoute)
-            }
-        }
-    })
-    return res
-}
-
-function formatBackRoutes(routes, views = import.meta.glob('../../views/**/*.vue')) {
-    return routes.map(route => {
-        switch (route.component) {
-            case 'Layout':
-                route.component = () => import('@/layout/index.vue')
-                break
-            default:
-                if (route.component) {
-                    route.component = views[`../../views/${route.component}`]
-                }
-        }
-        if (route.children) {
-            route.children = formatBackRoutes(route.children, views)
-        }
-        return route
-    })
-}
-
-// 将多层嵌套路由处理成两层，保留顶层和最子层路由，中间层级将被拍平
-function flatAsyncRoutes(routes) {
-    if (routes.children) {
-        routes.children = flatAsyncRoutesRecursive(routes.children, [{
-            path: routes.path,
-            title: routes.meta.title,
-            hide: !routes.meta.breadcrumb && routes.meta.breadcrumb === false
-        }], routes.path)
-    }
-    return routes
-}
-function flatAsyncRoutesRecursive(routes, breadcrumb, baseUrl) {
-    let res = []
-    routes.forEach(route => {
-        if (route.children) {
-            let childrenBaseUrl = resolveRoutePath(baseUrl, route.path)
-            let tmpBreadcrumb = deepClone(breadcrumb)
-            if (route.meta.breadcrumb !== false) {
-                tmpBreadcrumb.push({
-                    path: childrenBaseUrl,
-                    title: route.meta.title,
-                    hide: !route.meta.breadcrumb && route.meta.breadcrumb === false
-                })
-            }
-            let tmpRoute = deepClone(route)
-            tmpRoute.path = childrenBaseUrl
-            tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
-            delete tmpRoute.children
-            res.push(tmpRoute)
-            let childrenRoutes = flatAsyncRoutesRecursive(route.children, tmpBreadcrumb, childrenBaseUrl)
-            childrenRoutes.map(item => {
-                // 如果 path 一样则覆盖，因为子路由的 path 可能设置为空，导致和父路由一样，直接注册会提示路由重复
-                if (res.some(v => v.path == item.path)) {
-                    res.forEach((v, i) => {
-                        if (v.path == item.path) {
-                            res[i] = item
-                        }
-                    })
-                } else {
-                    res.push(item)
-                }
-            })
-        } else {
-            let tmpRoute = deepClone(route)
-            tmpRoute.path = resolveRoutePath(baseUrl, tmpRoute.path)
-            // 处理面包屑导航
-            let tmpBreadcrumb = deepClone(breadcrumb)
-            tmpBreadcrumb.push({
-                path: tmpRoute.path,
-                title: tmpRoute.meta.title,
-                hide: !tmpRoute.meta.breadcrumb && tmpRoute.meta.breadcrumb === false
-            })
-            tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
-            res.push(tmpRoute)
-        }
-    })
-    return res
-}
-
-const useRouteStore = defineStore(
-    // 唯一ID
-    'route',
-    {
-        state: () => ({
-            isGenerate: false,
-            routes: [],
-            currentRemoveRoutes: []
-        }),
-        getters: {
-            // 扁平化路由（将三级及以上路由数据拍平成二级）
-            flatRoutes: state => {
-                const settingsStore = useSettingsStore()
-                let routes = []
-                if (state.routes) {
-                    if (settingsStore.app.routeBaseOn !== 'filesystem') {
-                        state.routes.map(item => {
-                            routes.push(...deepClone(item.children))
-                        })
-                        routes.map(item => flatAsyncRoutes(item))
-                    } else {
-                        routes.push(...deepClone(state.routes))
-                    }
-                }
-                return routes
-            },
-            flatSystemRoutes: () => {
-                let routes = [...systemRoutes]
-                routes.map(item => flatAsyncRoutes(item))
-                return routes
-            }
-        },
-        actions: {
-            // 根据权限动态生成路由（前端生成）
-            generateRoutesAtFront(asyncRoutes) {
-                // eslint-disable-next-line no-async-promise-executor
-                return new Promise(async resolve => {
-                    const settingsStore = useSettingsStore()
-                    const userStore = useUserStore()
-                    let accessedRoutes
-                    // 如果权限功能开启，则需要对路由数据进行筛选过滤
-                    if (settingsStore.app.enablePermission) {
-                        const permissions = await userStore.getPermissions()
-                        accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
-                    } else {
-                        accessedRoutes = deepClone(asyncRoutes)
-                    }
-                    // 设置 routes 数据
-                    this.isGenerate = true
-                    this.routes = accessedRoutes.filter(item => item.children.length != 0)
-                    resolve()
-                })
-            },
-            // 根据权限动态生成路由（后端获取）
-            generateRoutesAtBack() {
-                return new Promise(resolve => {
-                    api.get('route/list', {
-                        baseURL: '/mock/'
-                    }).then(async res => {
-                        const settingsStore = useSettingsStore()
-                        const userStore = useUserStore()
-                        let asyncRoutes = formatBackRoutes(res.data)
-                        let accessedRoutes
-                        // 如果权限功能开启，则需要对路由数据进行筛选过滤
-                        if (settingsStore.app.enablePermission) {
-                            const permissions = await userStore.getPermissions()
-                            accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
-                        } else {
-                            accessedRoutes = deepClone(asyncRoutes)
-                        }
-                        // 设置 routes 数据
-                        this.isGenerate = true
-                        this.routes = accessedRoutes.filter(item => item.children.length != 0)
-                        resolve()
-                    })
-                })
-            },
-            // 根据权限动态生成路由（文件系统生成）
-            generateRoutesAtFilesystem(asyncRoutes) {
-                // eslint-disable-next-line no-async-promise-executor
-                return new Promise(async resolve => {
-                    const settingsStore = useSettingsStore()
-                    const userStore = useUserStore()
-                    let accessedRoutes
-                    // 如果权限功能开启，则需要对路由数据进行筛选过滤
-                    if (settingsStore.app.enablePermission) {
-                        const permissions = await userStore.getPermissions()
-                        accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
-                    } else {
-                        accessedRoutes = deepClone(asyncRoutes)
-                    }
-                    // 设置 routes 数据
-                    this.isGenerate = true
-                    this.routes = accessedRoutes.filter(item => item.children.length != 0)
-                    resolve()
-                })
-            },
-            // 记录 accessRoutes 路由，用于登出时删除路由
-            setCurrentRemoveRoutes(routes) {
-                this.currentRemoveRoutes = routes
-            },
-            // 清空路由
-            removeRoutes() {
-                this.isGenerate = false
-                this.routes = []
-                this.currentRemoveRoutes.forEach(removeRoute => {
-                    removeRoute()
-                })
-                this.currentRemoveRoutes = []
-            }
-        }
-    }
-)
-
-export default useRouteStore
diff --git a/src/store/modules/route.ts b/src/store/modules/route.ts
new file mode 100644
index 00000000..4a4d0374
--- /dev/null
+++ b/src/store/modules/route.ts
@@ -0,0 +1,240 @@
+import { cloneDeep } from 'lodash-es'
+import useSettingsStore from './settings'
+import useUserStore from './user'
+import api from '@/api'
+import { resolveRoutePath } from '@/utils'
+import { systemRoutes } from '@/router/routes'
+import type { Route } from '@/global'
+
+function hasPermission(permissions: string[], route: Route.recordMainRaw | Route.recordRaw) {
+  let isAuth = false
+  if (route.meta?.auth) {
+    isAuth = permissions.some((auth) => {
+      return typeof route.meta.auth === 'string'
+        ? route.meta.auth === auth
+        : typeof route.meta.auth === 'object'
+          ? route.meta.auth.includes(auth)
+          : false
+    })
+  }
+  else {
+    isAuth = true
+  }
+  return isAuth
+}
+
+function filterAsyncRoutes<T extends Route.recordMainRaw[] | Route.recordRaw[]>(routes: T, permissions: string[]): T {
+  const res: any = []
+  routes.forEach((route) => {
+    if (hasPermission(permissions, route)) {
+      const tmpRoute = cloneDeep(route)
+      if (tmpRoute.children) {
+        tmpRoute.children = filterAsyncRoutes(tmpRoute.children, permissions)
+        tmpRoute.children.length && res.push(tmpRoute)
+      }
+      else {
+        res.push(tmpRoute)
+      }
+    }
+  })
+  return res
+}
+
+function formatBackRoutes(routes: any, views = import.meta.glob('../../views/**/*.vue')): Route.recordMainRaw[] {
+  return routes.map((route: any) => {
+    switch (route.component) {
+      case 'Layout':
+        route.component = () => import('@/layouts/index.vue')
+        break
+      default:
+        if (route.component)
+          route.component = views[`../../views/${route.component}`]
+    }
+    if (route.children)
+      route.children = formatBackRoutes(route.children, views)
+
+    return route
+  })
+}
+
+// 将多层嵌套路由处理成两层，保留顶层和最子层路由，中间层级将被拍平
+function flatAsyncRoutes<T extends Route.recordRaw>(routes: T): T {
+  if (routes.children) {
+    routes.children = flatAsyncRoutesRecursive(routes.children, [{
+      path: routes.path,
+      title: routes.meta.title,
+      hide: !routes.meta.breadcrumb && routes.meta.breadcrumb === false,
+    }], routes.path)
+  }
+  return routes
+}
+function flatAsyncRoutesRecursive(routes: Route.recordRaw[], breadcrumb: Route.breadcrumb[] = [], baseUrl = ''): Route.recordRaw[] {
+  const res: Route.recordRaw[] = []
+  routes.forEach((route) => {
+    if (route.children) {
+      const childrenBaseUrl = resolveRoutePath(baseUrl, route.path)
+      const tmpBreadcrumb = cloneDeep(breadcrumb)
+      if (route.meta.breadcrumb !== false) {
+        tmpBreadcrumb.push({
+          path: childrenBaseUrl,
+          title: route.meta.title,
+          hide: !route.meta.breadcrumb && route.meta.breadcrumb === false,
+        })
+      }
+      const tmpRoute = cloneDeep(route)
+      tmpRoute.path = childrenBaseUrl
+      tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
+      delete tmpRoute.children
+      res.push(tmpRoute)
+      const childrenRoutes = flatAsyncRoutesRecursive(route.children, tmpBreadcrumb, childrenBaseUrl)
+      childrenRoutes.forEach((item) => {
+        // 如果 path 一样则覆盖，因为子路由的 path 可能设置为空，导致和父路由一样，直接注册会提示路由重复
+        if (res.some(v => v.path === item.path)) {
+          res.forEach((v, i) => {
+            if (v.path === item.path)
+              res[i] = item
+          })
+        }
+        else {
+          res.push(item)
+        }
+      })
+    }
+    else {
+      const tmpRoute = cloneDeep(route)
+      tmpRoute.path = resolveRoutePath(baseUrl, tmpRoute.path)
+      // 处理面包屑导航
+      const tmpBreadcrumb = cloneDeep(breadcrumb)
+      tmpBreadcrumb.push({
+        path: tmpRoute.path,
+        title: tmpRoute.meta.title,
+        hide: !tmpRoute.meta.breadcrumb && tmpRoute.meta.breadcrumb === false,
+      })
+      tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
+      res.push(tmpRoute)
+    }
+  })
+  return res
+}
+
+const useRouteStore = defineStore(
+  // 唯一ID
+  'route',
+  {
+    state: () => ({
+      isGenerate: false,
+      routes: [] as Route.recordMainRaw[],
+      fileSystemRoutes: [] as Route.recordRaw[],
+      currentRemoveRoutes: [] as Function[],
+    }),
+    getters: {
+      // 扁平化路由（将三级及以上路由数据拍平成二级）
+      flatRoutes: (state) => {
+        const settingsStore = useSettingsStore()
+        const routes: Route.recordRaw[] = []
+        if (state.routes) {
+          if (settingsStore.app.routeBaseOn !== 'filesystem') {
+            state.routes.forEach((item) => {
+              routes.push(...cloneDeep(item.children))
+            })
+            routes.forEach(item => flatAsyncRoutes(item))
+          }
+          else {
+            // @ts-expect-error: ignore
+            routes.push(...cloneDeep(state.fileSystemRoutes))
+          }
+        }
+        return routes
+      },
+      flatSystemRoutes: () => {
+        const routes = [...systemRoutes]
+        routes.forEach(item => flatAsyncRoutes(item))
+        return routes
+      },
+    },
+    actions: {
+      // 根据权限动态生成路由（前端生成）
+      generateRoutesAtFront(asyncRoutes: Route.recordMainRaw[]) {
+        // eslint-disable-next-line no-async-promise-executor
+        return new Promise<void>(async (resolve) => {
+          const settingsStore = useSettingsStore()
+          const userStore = useUserStore()
+          let accessedRoutes
+          // 如果权限功能开启，则需要对路由数据进行筛选过滤
+          if (settingsStore.app.enablePermission) {
+            const permissions = await userStore.getPermissions()
+            accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
+          }
+          else {
+            accessedRoutes = cloneDeep(asyncRoutes)
+          }
+          // 设置 routes 数据
+          this.isGenerate = true
+          this.routes = accessedRoutes.filter(item => item.children?.length !== 0)
+          resolve()
+        })
+      },
+      // 根据权限动态生成路由（后端获取）
+      generateRoutesAtBack() {
+        return new Promise<void>((resolve) => {
+          api.get('route/list', {
+            baseURL: '/mock/',
+          }).then(async (res) => {
+            const settingsStore = useSettingsStore()
+            const userStore = useUserStore()
+            const asyncRoutes = formatBackRoutes(res.data)
+            let accessedRoutes
+            // 如果权限功能开启，则需要对路由数据进行筛选过滤
+            if (settingsStore.app.enablePermission) {
+              const permissions = await userStore.getPermissions()
+              accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
+            }
+            else {
+              accessedRoutes = cloneDeep(asyncRoutes)
+            }
+            // 设置 routes 数据
+            this.isGenerate = true
+            this.routes = accessedRoutes.filter(item => item.children.length !== 0)
+            resolve()
+          })
+        })
+      },
+      // 根据权限动态生成路由（文件系统生成）
+      generateRoutesAtFilesystem(asyncRoutes: Route.recordRaw[]) {
+        // eslint-disable-next-line no-async-promise-executor
+        return new Promise<void>(async (resolve) => {
+          const settingsStore = useSettingsStore()
+          const userStore = useUserStore()
+          let accessedRoutes
+          // 如果权限功能开启，则需要对路由数据进行筛选过滤
+          if (settingsStore.app.enablePermission) {
+            const permissions = await userStore.getPermissions()
+            accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
+          }
+          else {
+            accessedRoutes = cloneDeep(asyncRoutes)
+          }
+          // 设置 routes 数据
+          this.isGenerate = true
+          this.fileSystemRoutes = accessedRoutes.filter(item => item.children?.length !== 0)
+          resolve()
+        })
+      },
+      // 记录 accessRoutes 路由，用于登出时删除路由
+      setCurrentRemoveRoutes(routes: Function[]) {
+        this.currentRemoveRoutes = routes
+      },
+      // 清空动态路由
+      removeRoutes() {
+        this.isGenerate = false
+        this.routes = []
+        this.currentRemoveRoutes.forEach((removeRoute) => {
+          removeRoute()
+        })
+        this.currentRemoveRoutes = []
+      },
+    },
+  },
+)
+
+export default useRouteStore
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
deleted file mode 100644
index e6d4c4fb..00000000
--- a/src/store/modules/settings.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import settings from '@/settings'
-
-const useSettingsStore = defineStore(
-    // 唯一ID
-    'settings',
-    {
-        state: () => ({
-            ...settings,
-            // 侧边栏是否收起（用于记录 pc 模式下最后的状态）
-            subMenuCollapseLastStatus: settings.menu.subMenuCollapse,
-            // 显示模式，支持：mobile、pc
-            mode: 'pc',
-            // 页面标题
-            title: ''
-        }),
-        actions: {
-            // 设置访问模式
-            setMode(width) {
-                if (this.layout.enableMobileAdaptation) {
-                    // 先判断 UA 是否为移动端设备（手机&平板）
-                    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
-                        this.mode = 'mobile'
-                    } else {
-                        // 如果为桌面设备，再根据页面宽度判断是否需要切换为移动端展示
-                        if (width < 992) {
-                            this.mode = 'mobile'
-                        } else {
-                            this.mode = 'pc'
-                        }
-                    }
-                } else {
-                    this.mode = 'pc'
-                }
-            },
-            // 设置网页标题
-            setTitle(title) {
-                this.title = title
-            },
-            // 切换侧边栏导航展开/收起
-            toggleSidebarCollapse() {
-                this.menu.subMenuCollapse = !this.menu.subMenuCollapse
-                if (this.mode == 'pc') {
-                    this.subMenuCollapseLastStatus = !this.subMenuCollapseLastStatus
-                }
-            },
-            // 设置主题颜色模式
-            setColorScheme(color) {
-                this.app.colorScheme = color
-            },
-            // 更新主题配置
-            updateThemeSetting(data) {
-                Object.assign(this, data)
-            }
-        }
-    }
-)
-
-export default useSettingsStore
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
new file mode 100644
index 00000000..644817dd
--- /dev/null
+++ b/src/store/modules/settings.ts
@@ -0,0 +1,72 @@
+import type { RecursiveRequired, Settings } from '@/global'
+import settings from '@/settings'
+import settingsDefault from '@/settings.default'
+
+interface SettingsStore extends RecursiveRequired<Settings.all> {
+  subMenuCollapseLastStatus: boolean
+  mode: 'pc' | 'mobile'
+  title: string
+}
+
+// 合并配置
+Object.keys(settingsDefault).forEach((key) => {
+  Object.assign(settingsDefault[key as keyof Settings.all], settings[key as keyof Settings.all])
+})
+
+const useSettingsStore = defineStore(
+  // 唯一ID
+  'settings',
+  {
+    state: (): SettingsStore => ({
+      ...settingsDefault,
+      // 侧边栏是否收起（用于记录 pc 模式下最后的状态）
+      subMenuCollapseLastStatus: settingsDefault.menu.subMenuCollapse,
+      // 显示模式，支持：mobile、pc
+      mode: 'pc',
+      // 页面标题
+      title: '',
+    }),
+    actions: {
+      // 设置网页标题
+      setTitle(title: string) {
+        this.title = title
+      },
+      // 设置访问模式
+      setMode(width: number) {
+        if (this.layout.enableMobileAdaptation) {
+          // 先判断 UA 是否为移动端设备（手机&平板）
+          if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+            this.mode = 'mobile'
+          }
+          else {
+            // 如果为桌面设备，再根据页面宽度判断是否需要切换为移动端展示
+            if (width < 992)
+              this.mode = 'mobile'
+
+            else
+              this.mode = 'pc'
+          }
+        }
+        else {
+          this.mode = 'pc'
+        }
+      },
+      // 切换侧边栏导航展开/收起
+      toggleSidebarCollapse() {
+        this.menu.subMenuCollapse = !this.menu.subMenuCollapse
+        if (this.mode === 'pc')
+          this.subMenuCollapseLastStatus = !this.subMenuCollapseLastStatus
+      },
+      // 设置主题颜色模式
+      setColorScheme(color: Required<Settings.app>['colorScheme']) {
+        this.app.colorScheme = color
+      },
+      // 更新应用配置
+      updateSettings(data: Settings.all) {
+        Object.assign(this, data)
+      },
+    },
+  },
+)
+
+export default useSettingsStore
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
deleted file mode 100644
index 926c8f3c..00000000
--- a/src/store/modules/user.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import api from '@/api'
-
-import useRouteStore from './route'
-import useMenuStore from './menu'
-
-const useUserStore = defineStore(
-    // 唯一ID
-    'user',
-    {
-        state: () => ({
-            account: localStorage.account || '',
-            token: localStorage.token || '',
-            failure_time: localStorage.failure_time || '',
-            permissions: []
-        }),
-        getters: {
-            isLogin: state => {
-                let retn = false
-                if (state.token) {
-                    if (new Date().getTime() < state.failure_time * 1000) {
-                        retn = true
-                    }
-                }
-                return retn
-            }
-        },
-        actions: {
-            login(data) {
-                return new Promise((resolve, reject) => {
-                    // 通过 mock 进行登录
-                    api.post('member/login', data, {
-                        baseURL: '/mock/'
-                    }).then(res => {
-                        localStorage.setItem('account', res.data.account)
-                        localStorage.setItem('token', res.data.token)
-                        localStorage.setItem('failure_time', res.data.failure_time)
-                        this.account = res.data.account
-                        this.token = res.data.token
-                        this.failure_time = res.data.failure_time
-                        resolve()
-                    }).catch(error => {
-                        reject(error)
-                    })
-                })
-            },
-            logout() {
-                return new Promise(resolve => {
-                    const routeStore = useRouteStore()
-                    const menuStore = useMenuStore()
-                    localStorage.removeItem('account')
-                    localStorage.removeItem('token')
-                    localStorage.removeItem('failure_time')
-                    this.account = ''
-                    this.token = ''
-                    this.failure_time = ''
-                    routeStore.removeRoutes()
-                    menuStore.setActived(0)
-                    resolve()
-                })
-            },
-            // 获取我的权限
-            getPermissions() {
-                return new Promise(resolve => {
-                    // 通过 mock 获取权限
-                    api.get('member/permission', {
-                        baseURL: '/mock/',
-                        params: {
-                            account: this.account
-                        }
-                    }).then(res => {
-                        this.permissions = res.data.permissions
-                        resolve(res.data.permissions)
-                    })
-                })
-            },
-            editPassword(data) {
-                return new Promise(resolve => {
-                    api.post('member/edit/password', {
-                        account: this.account,
-                        password: data.password,
-                        newpassword: data.newpassword
-                    }, {
-                        baseURL: '/mock/'
-                    }).then(() => {
-                        resolve()
-                    })
-                })
-            }
-        }
-    }
-)
-
-export default useUserStore
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
new file mode 100644
index 00000000..1fdd5ec5
--- /dev/null
+++ b/src/store/modules/user.ts
@@ -0,0 +1,97 @@
+import useRouteStore from './route'
+import useMenuStore from './menu'
+import api from '@/api'
+
+const useUserStore = defineStore(
+  // 唯一ID
+  'user',
+  {
+    state: () => ({
+      account: localStorage.account || '',
+      token: localStorage.token || '',
+      failure_time: localStorage.failure_time || '',
+      permissions: [],
+    }),
+    getters: {
+      isLogin: (state) => {
+        let retn = false
+        if (state.token) {
+          if (new Date().getTime() < parseInt(state.failure_time) * 1000)
+            retn = true
+        }
+        return retn
+      },
+    },
+    actions: {
+      login(data: {
+        account: string
+        password: string
+      }) {
+        return new Promise<void>((resolve, reject) => {
+          // 通过 mock 进行登录
+          api.post('member/login', data, {
+            baseURL: '/mock/',
+          }).then((res) => {
+            localStorage.setItem('account', res.data.account)
+            localStorage.setItem('token', res.data.token)
+            localStorage.setItem('failure_time', res.data.failure_time)
+            this.account = res.data.account
+            this.token = res.data.token
+            this.failure_time = res.data.failure_time
+            resolve()
+          }).catch((error) => {
+            reject(error)
+          })
+        })
+      },
+      logout() {
+        return new Promise<void>((resolve) => {
+          const routeStore = useRouteStore()
+          const menuStore = useMenuStore()
+          localStorage.removeItem('account')
+          localStorage.removeItem('token')
+          localStorage.removeItem('failure_time')
+          this.account = ''
+          this.token = ''
+          this.failure_time = ''
+          routeStore.removeRoutes()
+          menuStore.setActived(0)
+          resolve()
+        })
+      },
+      // 获取我的权限
+      getPermissions() {
+        return new Promise<string[]>((resolve) => {
+          // 通过 mock 获取权限
+          api.get('member/permission', {
+            baseURL: '/mock/',
+            params: {
+              account: this.account,
+            },
+          }).then((res) => {
+            this.permissions = res.data.permissions
+            resolve(res.data.permissions)
+          })
+        })
+      },
+      editPassword(data: {
+        password: string
+        newpassword: string
+      }) {
+        return new Promise<void>((resolve) => {
+          api.post('member/edit/password', {
+            account: this.account,
+            password: data.password,
+            newpassword: data.newpassword,
+          }, {
+            baseURL: '/mock/',
+          }).then(() => {
+            resolve()
+          })
+        })
+      },
+    },
+  },
+)
+
+export default useUserStore
diff --git a/src/utils/composables/auth/index.js b/src/utils/composables/auth/index.js
deleted file mode 100644
index 4fce7a36..00000000
--- a/src/utils/composables/auth/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import useSettingsStore from '@/store/modules/settings'
-import useUserStore from '@/store/modules/user'
-
-function useAuth() {
-    function hasPermission(permission) {
-        const settingsStore = useSettingsStore()
-        const userStore = useUserStore()
-        if (settingsStore.app.enablePermission) {
-            return userStore.permissions.some(v => {
-                return v === permission
-            })
-        } else {
-            return true
-        }
-    }
-
-    function auth(value) {
-        let auth
-        if (typeof value === 'string') {
-            auth = hasPermission(value)
-        } else {
-            auth = value.some(item => {
-                return hasPermission(item)
-            })
-        }
-        return auth
-    }
-
-    function authAll(value) {
-        const auth = value.every(item => {
-            return hasPermission(item)
-        })
-        return auth
-    }
-
-    return {
-        hasPermission,
-        auth,
-        authAll
-    }
-}
-
-export default useAuth
diff --git a/src/utils/composables/index.js b/src/utils/composables/index.js
deleted file mode 100644
index f3593063..00000000
--- a/src/utils/composables/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import useAuth from './auth'
-import useMainPage from './mainPage'
-import useMenu from './menu'
-
-export {
-    useAuth,
-    useMainPage,
-    useMenu
-}
diff --git a/src/utils/composables/mainPage/index.js b/src/utils/composables/mainPage/index.js
deleted file mode 100644
index 52ded1e3..00000000
--- a/src/utils/composables/mainPage/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import router from '@/router'
-
-function useMainPage() {
-    function reload() {
-        router.push({
-            name: 'reload'
-        })
-    }
-
-    return {
-        reload
-    }
-}
-
-export default useMainPage
diff --git a/src/utils/composables/menu/index.js b/src/utils/composables/menu/index.js
deleted file mode 100644
index ef2a487c..00000000
--- a/src/utils/composables/menu/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import router from '@/router'
-import useSettingsStore from '@/store/modules/settings'
-import useMenuStore from '@/store/modules/menu'
-import { isExternalLink } from '@/utils'
-
-export default function useMenu() {
-    const settingsStore = useSettingsStore()
-    const menuStore = useMenuStore()
-
-    function switchTo(index) {
-        menuStore.setActived(index)
-        if (settingsStore.menu.switchMainMenuAndPageJump) {
-            if (isExternalLink(menuStore.sidebarMenusFirstDeepestPath))
-                window.open(menuStore.sidebarMenusFirstDeepestPath, '_blank')
-
-            else
-                router.push(menuStore.sidebarMenusFirstDeepestPath)
-        }
-    }
-
-    return {
-        switchTo
-    }
-}
diff --git a/src/utils/composables/useAuth.ts b/src/utils/composables/useAuth.ts
new file mode 100644
index 00000000..cb9ba136
--- /dev/null
+++ b/src/utils/composables/useAuth.ts
@@ -0,0 +1,39 @@
+import useSettingsStore from '@/store/modules/settings'
+import useUserStore from '@/store/modules/user'
+
+export default function useAuth() {
+  function hasPermission(permission: string) {
+    const settingsStore = useSettingsStore()
+    const userStore = useUserStore()
+    if (settingsStore.app.enablePermission)
+      return userStore.permissions.includes(permission)
+
+    else
+      return true
+  }
+
+  function auth(value: string | string[]) {
+    let auth
+    if (typeof value === 'string') {
+      auth = hasPermission(value)
+    }
+    else {
+      auth = value.some((item) => {
+        return hasPermission(item)
+      })
+    }
+    return auth
+  }
+
+  function authAll(value: string[]) {
+    const auth = value.every((item) => {
+      return hasPermission(item)
+    })
+    return auth
+  }
+
+  return {
+    auth,
+    authAll,
+  }
+}
diff --git a/src/utils/composables/useCurrentInstance.ts b/src/utils/composables/useCurrentInstance.ts
new file mode 100644
index 00000000..c75fa942
--- /dev/null
+++ b/src/utils/composables/useCurrentInstance.ts
@@ -0,0 +1,6 @@
+import type { ComponentInternalInstance } from 'vue'
+
+export default function useCurrentInstance() {
+  const { appContext } = getCurrentInstance() as ComponentInternalInstance
+  return appContext.config.globalProperties
+}
diff --git a/src/utils/composables/useMainPage.ts b/src/utils/composables/useMainPage.ts
new file mode 100644
index 00000000..3ccb739a
--- /dev/null
+++ b/src/utils/composables/useMainPage.ts
@@ -0,0 +1,13 @@
+import router from '@/router'
+
+export default function useMainPage() {
+  function reload() {
+    router.push({
+      name: 'reload',
+    })
+  }
+
+  return {
+    reload,
+  }
+}
diff --git a/src/utils/composables/useMenu.ts b/src/utils/composables/useMenu.ts
new file mode 100644
index 00000000..aca65ca8
--- /dev/null
+++ b/src/utils/composables/useMenu.ts
@@ -0,0 +1,24 @@
+import router from '@/router'
+import useSettingsStore from '@/store/modules/settings'
+import useMenuStore from '@/store/modules/menu'
+import { isExternalLink } from '@/utils'
+
+export default function useMenu() {
+  const settingsStore = useSettingsStore()
+  const menuStore = useMenuStore()
+
+  function switchTo(index: number | string) {
+    menuStore.setActived(index)
+    if (settingsStore.menu.switchMainMenuAndPageJump) {
+      if (isExternalLink(menuStore.sidebarMenusFirstDeepestPath))
+        window.open(menuStore.sidebarMenusFirstDeepestPath, '_blank')
+
+      else
+        router.push(menuStore.sidebarMenusFirstDeepestPath)
+    }
+  }
+
+  return {
+    switchTo,
+  }
+}
diff --git a/src/utils/dayjs.ts b/src/utils/dayjs.ts
new file mode 100644
index 00000000..37bf2f2e
--- /dev/null
+++ b/src/utils/dayjs.ts
@@ -0,0 +1,6 @@
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+
+dayjs.locale('zh-cn')
+
+export default dayjs
diff --git a/src/utils/directive.js b/src/utils/directive.js
deleted file mode 100644
index b5b53e74..00000000
--- a/src/utils/directive.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useAuth } from '@/utils/composables'
-
-export default function directive(app) {
-    // 注册 v-auth 和 v-auth-all 指令
-    app.directive('auth', {
-        mounted: (el, binding) => {
-            if (!useAuth().auth(binding.value)) {
-                el.remove()
-            }
-        }
-    })
-    app.directive('auth-all', {
-        mounted: (el, binding) => {
-            if (!useAuth().authAll(binding.value)) {
-                el.remove()
-            }
-        }
-    })
-}
diff --git a/src/utils/directive.ts b/src/utils/directive.ts
new file mode 100644
index 00000000..b42fb0f1
--- /dev/null
+++ b/src/utils/directive.ts
@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+
+export default function directive(app: App) {
+  // 注册 v-auth 和 v-auth-all 指令
+  app.directive('auth', {
+    mounted: (el, binding) => {
+      if (!useAuth().auth(binding.value))
+        el.remove()
+    },
+  })
+  app.directive('auth-all', {
+    mounted: (el, binding) => {
+      if (!useAuth().authAll(binding.value))
+        el.remove()
+    },
+  })
+}
diff --git a/src/utils/eventBus.js b/src/utils/eventBus.ts
similarity index 100%
rename from src/utils/eventBus.js
rename to src/utils/eventBus.ts
diff --git a/src/utils/index.js b/src/utils/index.js
deleted file mode 100644
index 29f9e511..00000000
--- a/src/utils/index.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import path from 'path-browserify'
-
-export function deepClone(target) {
-    // 定义一个变量
-    let result
-    // 如果当前需要深拷贝的是一个对象的话
-    if (typeof target === 'object') {
-        // 如果是一个数组的话
-        if (Array.isArray(target)) {
-            result = [] // 将result赋值为一个数组，并且执行遍历
-            for (let i in target) {
-                // 递归克隆数组中的每一项
-                result.push(deepClone(target[i]))
-            }
-            // 判断如果当前的值是null的话；直接赋值为null
-        } else if (target === null) {
-            result = null
-            // 判断如果当前的值是一个RegExp对象的话，直接赋值
-        } else if (target.constructor === RegExp) {
-            result = target
-        } else {
-            // 否则是普通对象，直接for in循环，递归赋值对象的所有值
-            result = {}
-            for (let i in target) {
-                result[i] = deepClone(target[i])
-            }
-        }
-        // 如果不是对象的话，就是基本数据类型，那么直接赋值
-    } else {
-        result = target
-    }
-    // 返回最终结果
-    return result
-}
-
-export function isExternalLink(path) {
-    return /^(https?:|mailto:|tel:)/.test(path)
-}
-
-export function resolveRoutePath(basePath, routePath) {
-    if (isExternalLink(routePath)) {
-        return routePath
-    }
-    if (isExternalLink(basePath)) {
-        return basePath
-    }
-    return basePath ? path.resolve(basePath, routePath) : routePath
-}
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 00000000..c48e7d7f
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,15 @@
+import path from 'path-browserify'
+
+export function isExternalLink(path: string) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+export function resolveRoutePath(basePath: string, routePath: string) {
+  if (isExternalLink(routePath))
+    return routePath
+
+  if (isExternalLink(basePath))
+    return basePath
+
+  return basePath ? path.resolve(basePath, routePath) : routePath
+}
diff --git a/src/views/[...all].vue b/src/views/[...all].vue
index 289e4920..4de4f13a 100644
--- a/src/views/[...all].vue
+++ b/src/views/[...all].vue
@@ -1,75 +1,80 @@
-<route>
-{
-    name: 'notFound',
-    meta: {
-        title: "找不到页面",
-        constant: true,
-        layout: false
-    }
-}
+<route lang="yaml">
+name: notFound
+meta:
+  title: 找不到页面
+  constant: true
+  layout: false
 </route>
 
-<script setup>
+<script lang="ts" setup>
 import { onBeforeRouteLeave } from 'vue-router'
 const router = useRouter()
 
 const data = ref({
-    inter: null,
-    countdown: 5
+  inter: null as NodeJS.Timer | null,
+  countdown: 5,
 })
 
 onBeforeRouteLeave(() => {
-    clearInterval(data.value.inter)
+  data.value.inter && clearInterval(data.value.inter)
 })
 
 onMounted(() => {
-    data.value.inter = setInterval(() => {
-        data.value.countdown--
-        if (data.value.countdown == 0) {
-            clearInterval(data.value.inter)
-            goBack()
-        }
-    }, 1000)
+  data.value.inter = setInterval(() => {
+    data.value.countdown--
+    if (data.value.countdown === 0) {
+      data.value.inter && clearInterval(data.value.inter)
+      goBack()
+    }
+  }, 1000)
 })
 
 function goBack() {
-    router.push('/')
+  router.push('/')
 }
 </script>
 
 <template>
-    <div class="notfound">
-        <svg-icon name="404" class="icon" />
-        <div class="content">
-            <h1>404</h1>
-            <div class="desc">抱歉，你访问的页面不存在</div>
-            <el-button type="primary" @click="goBack">{{ data.countdown }} 秒后，返回首页</el-button>
-        </div>
+  <div class="notfound">
+    <svg-icon name="404" class="icon" />
+    <div class="content">
+      <h1>404</h1>
+      <div class="desc">
+        抱歉，你访问的页面不存在
+      </div>
+      <el-button type="primary" @click="goBack">
+        {{ data.countdown }} 秒后，返回首页
+      </el-button>
     </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .notfound {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 700px;
-    @include position-center(xy);
-    .icon {
-        width: 400px;
-        height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 700px;
+
+  @include position-center(xy);
+
+  .icon {
+    width: 400px;
+    height: 400px;
+  }
+
+  .content {
+    h1 {
+      margin: 0;
+      font-size: 72px;
+      color: var(--el-text-color-primary);
     }
-    .content {
-        h1 {
-            margin: 0;
-            font-size: 72px;
-            color: var(--el-text-color-primary);
-        }
-        .desc {
-            margin: 20px 0 30px;
-            font-size: 20px;
-            color: var(--el-text-color-secondary);
-        }
+
+    .desc {
+      margin: 20px 0 30px;
+      font-size: 20px;
+      color: var(--el-text-color-secondary);
     }
+  }
 }
 </style>
diff --git a/src/views/breadcrumb_example/detail1.vue b/src/views/breadcrumb_example/detail1.vue
index a2748508..82959057 100644
--- a/src/views/breadcrumb_example/detail1.vue
+++ b/src/views/breadcrumb_example/detail1.vue
@@ -1,15 +1,12 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
 <template>
-    <div>
-        <page-main>
-            注意看面包屑导航的变化
-        </page-main>
-    </div>
+  <div>
+    <page-main>
+      注意看面包屑导航的变化
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/breadcrumb_example/detail2.vue b/src/views/breadcrumb_example/detail2.vue
index a2748508..82959057 100644
--- a/src/views/breadcrumb_example/detail2.vue
+++ b/src/views/breadcrumb_example/detail2.vue
@@ -1,15 +1,12 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
 <template>
-    <div>
-        <page-main>
-            注意看面包屑导航的变化
-        </page-main>
-    </div>
+  <div>
+    <page-main>
+      注意看面包屑导航的变化
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/breadcrumb_example/list1.vue b/src/views/breadcrumb_example/list1.vue
index 280c001b..b9c15483 100644
--- a/src/views/breadcrumb_example/list1.vue
+++ b/src/views/breadcrumb_example/list1.vue
@@ -1,13 +1,12 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
 <template>
-    <page-main>
-        <router-link :to="{name: 'breadcrumbExampleDetail1'}">查看详情页</router-link>
-    </page-main>
+  <page-main>
+    <router-link :to="{ name: 'breadcrumbExampleDetail1' }">
+      查看详情页
+    </router-link>
+  </page-main>
 </template>
diff --git a/src/views/breadcrumb_example/list2.vue b/src/views/breadcrumb_example/list2.vue
index 0d0640fd..17f62e52 100644
--- a/src/views/breadcrumb_example/list2.vue
+++ b/src/views/breadcrumb_example/list2.vue
@@ -1,13 +1,12 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
 <template>
-    <page-main>
-        <router-link :to="{name: 'breadcrumbExampleDetail2'}">查看详情页</router-link>
-    </page-main>
+  <page-main>
+    <router-link :to="{ name: 'breadcrumbExampleDetail2' }">
+      查看详情页
+    </router-link>
+  </page-main>
 </template>
diff --git a/src/views/component_basic_example/button.vue b/src/views/component_basic_example/button.vue
index 1493bef0..d1f41211 100644
--- a/src/views/component_basic_example/button.vue
+++ b/src/views/component_basic_example/button.vue
@@ -1,211 +1,294 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script setup>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="按钮" />
-        <page-main title="基础用法" class="demo">
-            <el-row>
-                <el-button>默认按钮</el-button>
-                <el-button type="primary">主要按钮</el-button>
-                <el-button type="success">成功按钮</el-button>
-                <el-button type="info">信息按钮</el-button>
-                <el-button type="warning">警告按钮</el-button>
-                <el-button type="danger">危险按钮</el-button>
-            </el-row>
-            <el-row>
-                <el-button plain>朴素按钮</el-button>
-                <el-button type="primary" plain>主要按钮</el-button>
-                <el-button type="success" plain>成功按钮</el-button>
-                <el-button type="info" plain>信息按钮</el-button>
-                <el-button type="warning" plain>警告按钮</el-button>
-                <el-button type="danger" plain>危险按钮</el-button>
-            </el-row>
-            <el-row>
-                <el-button round>圆角按钮</el-button>
-                <el-button type="primary" round>主要按钮</el-button>
-                <el-button type="success" round>成功按钮</el-button>
-                <el-button type="info" round>信息按钮</el-button>
-                <el-button type="warning" round>警告按钮</el-button>
-                <el-button type="danger" round>危险按钮</el-button>
-            </el-row>
-            <el-row>
-                <el-button circle>
-                    <template #icon>
-                        <el-icon>
-                            <svg-icon name="ep:search" />
-                        </el-icon>
-                    </template>
-                </el-button>
-                <el-button type="primary" circle>
-                    <template #icon>
-                        <el-icon>
-                            <svg-icon name="ep:edit" />
-                        </el-icon>
-                    </template>
-                </el-button>
-                <el-button type="success" circle>
-                    <template #icon>
-                        <el-icon>
-                            <svg-icon name="ep:check" />
-                        </el-icon>
-                    </template>
-                </el-button>
-                <el-button type="info" circle>
-                    <template #icon>
-                        <el-icon>
-                            <svg-icon name="ep:message" />
-                        </el-icon>
-                    </template>
-                </el-button>
-                <el-button type="warning" circle>
-                    <template #icon>
-                        <el-icon>
-                            <svg-icon name="ep:star" />
-                        </el-icon>
-                    </template>
-                </el-button>
-                <el-button type="danger" circle>
-                    <template #icon>
-                        <el-icon>
-                            <svg-icon name="ep:delete" />
-                        </el-icon>
-                    </template>
-                </el-button>
-            </el-row>
-        </page-main>
-        <page-main title="禁用状态" class="demo">
-            <el-row>
-                <el-button disabled>默认按钮</el-button>
-                <el-button type="primary" disabled>主要按钮</el-button>
-                <el-button type="success" disabled>成功按钮</el-button>
-                <el-button type="info" disabled>信息按钮</el-button>
-                <el-button type="warning" disabled>警告按钮</el-button>
-                <el-button type="danger" disabled>危险按钮</el-button>
-            </el-row>
-            <el-row>
-                <el-button plain disabled>朴素按钮</el-button>
-                <el-button type="primary" plain disabled>主要按钮</el-button>
-                <el-button type="success" plain disabled>成功按钮</el-button>
-                <el-button type="info" plain disabled>信息按钮</el-button>
-                <el-button type="warning" plain disabled>警告按钮</el-button>
-                <el-button type="danger" plain disabled>危险按钮</el-button>
-            </el-row>
-        </page-main>
-        <page-main title="文字按钮" class="demo">
-            <el-button text>文字按钮</el-button>
-            <el-button text disabled>文字按钮</el-button>
-        </page-main>
-        <page-main title="图标按钮" class="demo">
-            <el-button type="primary">
-                <template #icon>
-                    <el-icon>
-                        <svg-icon name="ep:edit" />
-                    </el-icon>
-                </template>
-            </el-button>
-            <el-button type="primary">
-                <template #icon>
-                    <el-icon>
-                        <svg-icon name="ep:share" />
-                    </el-icon>
-                </template>
-            </el-button>
-            <el-button type="primary">
-                <template #icon>
-                    <el-icon>
-                        <svg-icon name="ep:delete" />
-                    </el-icon>
-                </template>
-            </el-button>
-            <el-button type="primary">
-                <template #icon>
-                    <el-icon>
-                        <svg-icon name="ep:search" />
-                    </el-icon>
-                </template>
-                搜索
-            </el-button>
-            <el-button type="primary">
-                上传
-                <el-icon class="el-icon--right">
-                    <svg-icon name="ep:upload" />
-                </el-icon>
-            </el-button>
-        </page-main>
-        <page-main title="按钮组" class="demo">
-            <el-button-group style="margin-right: 10px;">
-                <el-button type="primary">
-                    <template #icon>
-                        <el-icon>
-                            <svg-icon name="ep:arrow-left" />
-                        </el-icon>
-                    </template>
-                    上一页
-                </el-button>
-                <el-button type="primary">
-                    下一页
-                    <el-icon class="el-icon--right">
-                        <svg-icon name="ep:arrow-right" />
-                    </el-icon>
-                </el-button>
-            </el-button-group>
-            <el-button-group>
-                <el-button type="primary">
-                    <template #icon>
-                        <el-icon>
-                            <svg-icon name="ep:edit" />
-                        </el-icon>
-                    </template>
-                </el-button>
-                <el-button type="primary">
-                    <template #icon>
-                        <el-icon>
-                            <svg-icon name="ep:share" />
-                        </el-icon>
-                    </template>
-                </el-button>
-                <el-button type="primary">
-                    <template #icon>
-                        <el-icon>
-                            <svg-icon name="ep:delete" />
-                        </el-icon>
-                    </template>
-                </el-button>
-            </el-button-group>
-        </page-main>
-        <page-main title="加载中" class="demo">
-            <el-button type="primary" :loading="true">加载中</el-button>
-        </page-main>
-        <page-main title="不同尺寸" class="demo">
-            <div style="margin-bottom: 10px;">
-                <el-button size="large">大号按钮</el-button>
-                <el-button size="default">默认按钮</el-button>
-                <el-button size="small">小号按钮</el-button>
-            </div>
-            <div>
-                <el-button size="large" round>大号按钮</el-button>
-                <el-button size="default" round>默认按钮</el-button>
-                <el-button size="small" round>小号按钮</el-button>
-            </div>
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="按钮" />
+    <page-main title="基础用法" class="demo">
+      <el-row>
+        <el-button>默认按钮</el-button>
+        <el-button type="primary">
+          主要按钮
+        </el-button>
+        <el-button type="success">
+          成功按钮
+        </el-button>
+        <el-button type="info">
+          信息按钮
+        </el-button>
+        <el-button type="warning">
+          警告按钮
+        </el-button>
+        <el-button type="danger">
+          危险按钮
+        </el-button>
+      </el-row>
+      <el-row>
+        <el-button plain>
+          朴素按钮
+        </el-button>
+        <el-button type="primary" plain>
+          主要按钮
+        </el-button>
+        <el-button type="success" plain>
+          成功按钮
+        </el-button>
+        <el-button type="info" plain>
+          信息按钮
+        </el-button>
+        <el-button type="warning" plain>
+          警告按钮
+        </el-button>
+        <el-button type="danger" plain>
+          危险按钮
+        </el-button>
+      </el-row>
+      <el-row>
+        <el-button round>
+          圆角按钮
+        </el-button>
+        <el-button type="primary" round>
+          主要按钮
+        </el-button>
+        <el-button type="success" round>
+          成功按钮
+        </el-button>
+        <el-button type="info" round>
+          信息按钮
+        </el-button>
+        <el-button type="warning" round>
+          警告按钮
+        </el-button>
+        <el-button type="danger" round>
+          危险按钮
+        </el-button>
+      </el-row>
+      <el-row>
+        <el-button circle>
+          <template #icon>
+            <el-icon>
+              <svg-icon name="i-ep:search" />
+            </el-icon>
+          </template>
+        </el-button>
+        <el-button type="primary" circle>
+          <template #icon>
+            <el-icon>
+              <svg-icon name="i-ep:edit" />
+            </el-icon>
+          </template>
+        </el-button>
+        <el-button type="success" circle>
+          <template #icon>
+            <el-icon>
+              <svg-icon name="i-ep:check" />
+            </el-icon>
+          </template>
+        </el-button>
+        <el-button type="info" circle>
+          <template #icon>
+            <el-icon>
+              <svg-icon name="i-ep:message" />
+            </el-icon>
+          </template>
+        </el-button>
+        <el-button type="warning" circle>
+          <template #icon>
+            <el-icon>
+              <svg-icon name="i-ep:star" />
+            </el-icon>
+          </template>
+        </el-button>
+        <el-button type="danger" circle>
+          <template #icon>
+            <el-icon>
+              <svg-icon name="i-ep:delete" />
+            </el-icon>
+          </template>
+        </el-button>
+      </el-row>
+    </page-main>
+    <page-main title="禁用状态" class="demo">
+      <el-row>
+        <el-button disabled>
+          默认按钮
+        </el-button>
+        <el-button type="primary" disabled>
+          主要按钮
+        </el-button>
+        <el-button type="success" disabled>
+          成功按钮
+        </el-button>
+        <el-button type="info" disabled>
+          信息按钮
+        </el-button>
+        <el-button type="warning" disabled>
+          警告按钮
+        </el-button>
+        <el-button type="danger" disabled>
+          危险按钮
+        </el-button>
+      </el-row>
+      <el-row>
+        <el-button plain disabled>
+          朴素按钮
+        </el-button>
+        <el-button type="primary" plain disabled>
+          主要按钮
+        </el-button>
+        <el-button type="success" plain disabled>
+          成功按钮
+        </el-button>
+        <el-button type="info" plain disabled>
+          信息按钮
+        </el-button>
+        <el-button type="warning" plain disabled>
+          警告按钮
+        </el-button>
+        <el-button type="danger" plain disabled>
+          危险按钮
+        </el-button>
+      </el-row>
+    </page-main>
+    <page-main title="文字按钮" class="demo">
+      <el-button text>
+        文字按钮
+      </el-button>
+      <el-button type="primary" text>
+        文字按钮
+      </el-button>
+      <el-button type="success" text>
+        文字按钮
+      </el-button>
+      <el-button type="info" text>
+        文字按钮
+      </el-button>
+      <el-button type="warning" text>
+        文字按钮
+      </el-button>
+      <el-button type="danger" text>
+        文字按钮
+      </el-button>
+    </page-main>
+    <page-main title="图标按钮" class="demo">
+      <el-button type="primary">
+        <template #icon>
+          <el-icon>
+            <svg-icon name="i-ep:edit" />
+          </el-icon>
+        </template>
+      </el-button>
+      <el-button type="primary">
+        <template #icon>
+          <el-icon>
+            <svg-icon name="i-ep:share" />
+          </el-icon>
+        </template>
+      </el-button>
+      <el-button type="primary">
+        <template #icon>
+          <el-icon>
+            <svg-icon name="i-ep:delete" />
+          </el-icon>
+        </template>
+      </el-button>
+      <el-button type="primary">
+        <template #icon>
+          <el-icon>
+            <svg-icon name="i-ep:search" />
+          </el-icon>
+        </template>
+        搜索
+      </el-button>
+      <el-button type="primary">
+        上传
+        <el-icon class="el-icon--right">
+          <svg-icon name="i-ep:upload" />
+        </el-icon>
+      </el-button>
+    </page-main>
+    <page-main title="按钮组" class="demo">
+      <el-button-group style="margin-right: 10px;">
+        <el-button type="primary">
+          <el-icon class="el-icon--left">
+            <svg-icon name="i-ep:arrow-left" />
+          </el-icon>
+          上一页
+        </el-button>
+        <el-button type="primary">
+          下一页
+          <el-icon class="el-icon--right">
+            <svg-icon name="i-ep:arrow-right" />
+          </el-icon>
+        </el-button>
+      </el-button-group>
+      <el-button-group>
+        <el-button type="primary">
+          <template #icon>
+            <el-icon>
+              <svg-icon name="i-ep:edit" />
+            </el-icon>
+          </template>
+        </el-button>
+        <el-button type="primary">
+          <template #icon>
+            <el-icon>
+              <svg-icon name="i-ep:share" />
+            </el-icon>
+          </template>
+        </el-button>
+        <el-button type="primary">
+          <template #icon>
+            <el-icon>
+              <svg-icon name="i-ep:delete" />
+            </el-icon>
+          </template>
+        </el-button>
+      </el-button-group>
+    </page-main>
+    <page-main title="加载中" class="demo">
+      <el-button type="primary" :loading="true">
+        加载中
+      </el-button>
+    </page-main>
+    <page-main title="不同尺寸" class="demo">
+      <div style="margin-bottom: 10px;">
+        <el-button size="large">
+          大号按钮
+        </el-button>
+        <el-button size="default">
+          默认按钮
+        </el-button>
+        <el-button size="small">
+          小号按钮
+        </el-button>
+      </div>
+      <div>
+        <el-button size="large" round>
+          大号按钮
+        </el-button>
+        <el-button size="default" round>
+          默认按钮
+        </el-button>
+        <el-button size="small" round>
+          小号按钮
+        </el-button>
+      </div>
+    </page-main>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .demo {
-    .el-row {
-        margin-bottom: 20px;
-    }
+  .el-row {
+    margin-bottom: 20px;
+  }
 }
 </style>
diff --git a/src/views/component_basic_example/checkbox.vue b/src/views/component_basic_example/checkbox.vue
index 4bdb5f49..8ecb89ed 100644
--- a/src/views/component_basic_example/checkbox.vue
+++ b/src/views/component_basic_example/checkbox.vue
@@ -1,69 +1,65 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
 
-const cityOptions = ['上海', '北京', '广州', '深圳']
-
-export default {
-    components: {
-        Alert
-    },
-    data() {
-        return {
-            checked: true,
-            checked1: false,
-            checked2: true,
-            checkList: ['选中且禁用', '复选框 A'],
-            checkedCities: ['上海', '北京'],
-            cities: cityOptions,
-            checkboxGroup1: ['上海'],
-            checked3: true,
-            checked4: false
-        }
-    }
-}
+const checked = ref(true)
+const checked1 = ref(false)
+const checked2 = ref(true)
+const checkList = ref(['选中且禁用', '复选框 A'])
+const checkedCities = ref(['上海', '北京'])
+const cities = ref(['上海', '北京', '广州', '深圳'])
+const checkboxGroup1 = ref(['上海'])
+const checked3 = ref(true)
+const checked4 = ref(false)
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="多选框" />
-        <page-main title="基础用法" class="demo">
-            <el-checkbox v-model="checked">备选项</el-checkbox>
-        </page-main>
-        <page-main title="禁用状态" class="demo">
-            <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>
-            <el-checkbox v-model="checked2" disabled>备选项</el-checkbox>
-        </page-main>
-        <page-main title="多选框组" class="demo">
-            <el-checkbox-group v-model="checkList">
-                <el-checkbox label="复选框 A" />
-                <el-checkbox label="复选框 B" />
-                <el-checkbox label="复选框 C" />
-                <el-checkbox label="禁用" disabled />
-                <el-checkbox label="选中且禁用" disabled />
-            </el-checkbox-group>
-        </page-main>
-        <page-main title="可选项目数量的限制" class="demo">
-            <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
-                <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
-            </el-checkbox-group>
-        </page-main>
-        <page-main title="按钮样式" class="demo">
-            <el-checkbox-group v-model="checkboxGroup1">
-                <el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
-            </el-checkbox-group>
-        </page-main>
-        <page-main title="带有边框" class="demo">
-            <el-checkbox v-model="checked3" label="备选项1" border />
-            <el-checkbox v-model="checked4" label="备选项2" border />
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="多选框" />
+    <page-main title="基础用法" class="demo">
+      <el-checkbox v-model="checked">
+        备选项
+      </el-checkbox>
+    </page-main>
+    <page-main title="禁用状态" class="demo">
+      <el-checkbox v-model="checked1" disabled>
+        备选项1
+      </el-checkbox>
+      <el-checkbox v-model="checked2" disabled>
+        备选项
+      </el-checkbox>
+    </page-main>
+    <page-main title="多选框组" class="demo">
+      <el-checkbox-group v-model="checkList">
+        <el-checkbox label="复选框 A" />
+        <el-checkbox label="复选框 B" />
+        <el-checkbox label="复选框 C" />
+        <el-checkbox label="禁用" disabled />
+        <el-checkbox label="选中且禁用" disabled />
+      </el-checkbox-group>
+    </page-main>
+    <page-main title="可选项目数量的限制" class="demo">
+      <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
+        <el-checkbox v-for="city in cities" :key="city" :label="city">
+          {{ city }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </page-main>
+    <page-main title="按钮样式" class="demo">
+      <el-checkbox-group v-model="checkboxGroup1">
+        <el-checkbox-button v-for="city in cities" :key="city" :label="city">
+          {{ city }}
+        </el-checkbox-button>
+      </el-checkbox-group>
+    </page-main>
+    <page-main title="带有边框" class="demo">
+      <el-checkbox v-model="checked3" label="备选项1" border />
+      <el-checkbox v-model="checked4" label="备选项2" border />
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_basic_example/components/alert.vue b/src/views/component_basic_example/components/alert.vue
index 7a7e2a83..ec63da85 100644
--- a/src/views/component_basic_example/components/alert.vue
+++ b/src/views/component_basic_example/components/alert.vue
@@ -1,17 +1,20 @@
 <template>
-    <div class="alert">
-        <el-alert show-icon type="info" :closable="false" close-text="前往 Element Plus 官网">
-            <template #title>
-                基础组件来自 Element Plus ，更多组件及使用技巧请查看 <el-link type="primary" href="https://element-plus.org/#/zh-CN" target="_blank">Element Plus 官网</el-link>
-            </template>
-        </el-alert>
-    </div>
+  <div class="alert">
+    <el-alert show-icon type="info" :closable="false" close-text="前往 Element Plus 官网">
+      <template #title>
+        基础组件来自 Element Plus ，更多组件及使用技巧请查看
+        <el-link type="primary" href="https://element-plus.org/#/zh-CN" target="_blank">
+          Element Plus 官网
+        </el-link>
+      </template>
+    </el-alert>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .alert {
-    padding: 20px 20px 0;
-    background-color: var(--g-app-bg);
-    transition: background-color 0.3s;
+  padding: 20px 20px 0;
+  background-color: var(--g-app-bg);
+  transition: background-color 0.3s;
 }
 </style>
diff --git a/src/views/component_basic_example/datepicker.vue b/src/views/component_basic_example/datepicker.vue
index 27ac92ad..152d6c0c 100644
--- a/src/views/component_basic_example/datepicker.vue
+++ b/src/views/component_basic_example/datepicker.vue
@@ -1,83 +1,73 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
 
-export default {
-    components: {
-        Alert
-    },
-    data() {
-        return {
-            disabledDate(time) {
-                return time.getTime() > Date.now()
-            },
-            shortcuts: [
-                {
-                    text: '今天',
-                    value: new Date()
-                },
-                {
-                    text: '昨天',
-                    value: (() => {
-                        const date = new Date()
-                        date.setTime(date.getTime() - 3600 * 1000 * 24)
-                        return date
-                    })()
-                },
-                {
-                    text: '一周前',
-                    value: (() => {
-                        const date = new Date()
-                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
-                        return date
-                    })()
-                }
-            ],
-            value1: '',
-            value2: '',
-            value3: '',
-            value4: '',
-            value5: '',
-            value6: '',
-            value7: '',
-            value8: ''
-        }
-    }
+function disabledDate(time: Date) {
+  return time.getTime() > Date.now()
 }
+
+const shortcuts = ref([
+  {
+    text: '今天',
+    value: new Date(),
+  },
+  {
+    text: '昨天',
+    value: (() => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24)
+      return date
+    })(),
+  },
+  {
+    text: '一周前',
+    value: (() => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+      return date
+    })(),
+  },
+])
+
+const value1 = ref('')
+const value2 = ref('')
+const value3 = ref('')
+const value4 = ref('')
+const value5 = ref('')
+const value6 = ref('')
+const value7 = ref('')
+const value8 = ref('')
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="日期选择器" />
-        <page-main title="选择日" class="demo">
-            <div>默认</div>
-            <el-date-picker v-model="value1" type="date" placeholder="选择日期" />
-            <div>带快捷选项</div>
-            <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :disabled-date="disabledDate" :shortcuts="shortcuts" />
-        </page-main>
-        <page-main title="其他日期单位" class="demo">
-            <div>周</div>
-            <el-date-picker v-model="value3" type="week" format="gggg 第 ww 周" placeholder="选择周" />
-            <div>月</div>
-            <el-date-picker v-model="value4" type="month" placeholder="选择月" />
-            <div>年</div>
-            <el-date-picker v-model="value5" type="year" placeholder="选择年" />
-            <div>多个日期</div>
-            <el-date-picker v-model="value6" type="dates" placeholder="选择一个或多个日期" />
-        </page-main>
-        <page-main title="选择日期范围" class="demo">
-            <el-date-picker v-model="value7" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
-        </page-main>
-        <page-main title="选择月份范围" class="demo">
-            <el-date-picker v-model="value8" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" />
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="日期选择器" />
+    <page-main title="选择日" class="demo">
+      <div>默认</div>
+      <el-date-picker v-model="value1" type="date" placeholder="选择日期" />
+      <div>带快捷选项</div>
+      <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :disabled-date="disabledDate" :shortcuts="shortcuts" />
+    </page-main>
+    <page-main title="其他日期单位" class="demo">
+      <div>周</div>
+      <el-date-picker v-model="value3" type="week" format="gggg 第 ww 周" placeholder="选择周" />
+      <div>月</div>
+      <el-date-picker v-model="value4" type="month" placeholder="选择月" />
+      <div>年</div>
+      <el-date-picker v-model="value5" type="year" placeholder="选择年" />
+      <div>多个日期</div>
+      <el-date-picker v-model="value6" type="dates" placeholder="选择一个或多个日期" />
+    </page-main>
+    <page-main title="选择日期范围" class="demo">
+      <el-date-picker v-model="value7" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
+    </page-main>
+    <page-main title="选择月份范围" class="demo">
+      <el-date-picker v-model="value8" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" />
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_basic_example/datetimepicker.vue b/src/views/component_basic_example/datetimepicker.vue
index 052b75ed..347f7787 100644
--- a/src/views/component_basic_example/datetimepicker.vue
+++ b/src/views/component_basic_example/datetimepicker.vue
@@ -1,41 +1,32 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
 
-export default {
-    components: {
-        Alert
-    },
-    data() {
-        return {
-            value1: '',
-            value2: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-            value3: ''
-        }
-    }
-}
+const value1 = ref('')
+const value2 = ref<any>([
+  new Date(2000, 10, 10, 10, 10),
+  new Date(2000, 10, 11, 10, 10),
+])
+const value3 = ref('')
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="日期时间选择器" />
-        <page-main title="日期和时间点" class="demo">
-            <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" />
-        </page-main>
-        <page-main title="日期和时间范围" class="demo">
-            <el-date-picker v-model="value2" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
-        </page-main>
-        <page-main title="默认的起始与结束时刻" class="demo">
-            <div>起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</div>
-            <el-date-picker v-model="value3" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="[new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)]" />
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="日期时间选择器" />
+    <page-main title="日期和时间点" class="demo">
+      <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" />
+    </page-main>
+    <page-main title="日期和时间范围" class="demo">
+      <el-date-picker v-model="value2" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
+    </page-main>
+    <page-main title="默认的起始与结束时刻" class="demo">
+      <div>起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</div>
+      <el-date-picker v-model="value3" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="[new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)]" />
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_basic_example/icon.vue b/src/views/component_basic_example/icon.vue
index b69fd5fb..f68468dc 100644
--- a/src/views/component_basic_example/icon.vue
+++ b/src/views/component_basic_example/icon.vue
@@ -1,59 +1,65 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script setup>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
+import { icons } from '@/iconify'
+
+const icon = icons.filter(item => item.prefix === 'ep')[0]
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="图标" />
-        <page-main class="demo">
-            <el-icon>
-                <svg-icon name="ep:edit" />
-            </el-icon>
-            <el-icon>
-                <svg-icon name="ep:share" />
-            </el-icon>
-            <el-icon>
-                <svg-icon name="ep:delete" />
-            </el-icon>
-            <el-button type="primary">
-                <template #icon>
-                    <el-icon>
-                        <svg-icon name="ep:search" />
-                    </el-icon>
-                </template>
-                搜索
-            </el-button>
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="图标" />
+    <page-main class="demo">
+      <el-icon><svg-icon name="i-ep:edit" /></el-icon>
+      <el-icon><svg-icon name="i-ep:share" /></el-icon>
+      <el-icon><svg-icon name="i-ep:delete" /></el-icon>
+      <el-button type="primary">
+        <template #icon>
+          <el-icon>
+            <svg-icon name="i-ep:search" />
+          </el-icon>
+        </template>
+        搜索
+      </el-button>
+    </page-main>
+    <page-main title="图标集合">
+      <div v-for="(item, index) in icon.icons" :key="index" class="list-icon">
+        <el-tooltip class="item" effect="dark" :content="`ep:${item}`" placement="top">
+          <el-icon>
+            <svg-icon :name="`ep:${item}`" />
+          </el-icon>
+        </el-tooltip>
+      </div>
+    </page-main>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .demo {
-    > .el-icon {
-        color: #606266;
-        margin: 0 20px;
-        font-size: 1.5em;
-        vertical-align: middle;
-    }
-    button {
-        margin: 0 20px;
-    }
+  > .el-icon {
+    color: #606266;
+    margin: 0 20px;
+    font-size: 1.5em;
+    vertical-align: middle;
+  }
+
+  button {
+    margin: 0 20px;
+  }
 }
+
 .list-icon {
-    display: inline-block;
-    margin: 10px;
-    i {
-        font-size: 32px;
-        color: #606266;
-    }
+  display: inline-block;
+  margin: 10px;
+
+  i {
+    font-size: 32px;
+    color: #606266;
+  }
 }
 </style>
diff --git a/src/views/component_basic_example/input.vue b/src/views/component_basic_example/input.vue
index 92b7933e..27353eb9 100644
--- a/src/views/component_basic_example/input.vue
+++ b/src/views/component_basic_example/input.vue
@@ -1,63 +1,51 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
 
-export default {
-    components: {
-        Alert
-    },
-    data() {
-        return {
-            input: '',
-            input1: '',
-            input2: '',
-            textarea: ''
-        }
-    }
-}
+const input = ref('')
+const input1 = ref('')
+const input2 = ref('')
+const textarea = ref('')
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="输入框" />
-        <page-main title="基础用法" class="demo">
-            <el-input v-model="input" placeholder="请输入内容" />
-        </page-main>
-        <page-main title="禁用状态" class="demo">
-            <el-input v-model="input" placeholder="请输入内容" :disabled="true" />
-        </page-main>
-        <page-main title="可清空" class="demo">
-            <el-input v-model="input" placeholder="请输入内容" clearable />
-        </page-main>
-        <page-main title="密码框" class="demo">
-            <el-input v-model="input" placeholder="请输入内容" show-password />
-        </page-main>
-        <page-main title="带 icon 的输入框" class="demo">
-            <el-input v-model="input1" placeholder="请选择日期">
-                <template #suffix>
-                    <el-icon>
-                        <svg-icon name="ep:calendar" />
-                    </el-icon>
-                </template>
-            </el-input>
-            <el-input v-model="input2" placeholder="请输入内容">
-                <template #prefix>
-                    <el-icon>
-                        <svg-icon name="ep:search" />
-                    </el-icon>
-                </template>
-            </el-input>
-        </page-main>
-        <page-main title="文本域" class="demo">
-            <el-input v-model="textarea" type="textarea" :rows="2" placeholder="请输入内容" />
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="输入框" />
+    <page-main title="基础用法" class="demo">
+      <el-input v-model="input" placeholder="请输入内容" />
+    </page-main>
+    <page-main title="禁用状态" class="demo">
+      <el-input v-model="input" placeholder="请输入内容" :disabled="true" />
+    </page-main>
+    <page-main title="可清空" class="demo">
+      <el-input v-model="input" placeholder="请输入内容" clearable />
+    </page-main>
+    <page-main title="密码框" class="demo">
+      <el-input v-model="input" placeholder="请输入内容" show-password />
+    </page-main>
+    <page-main title="带 icon 的输入框" class="demo">
+      <el-input v-model="input1" placeholder="请选择日期">
+        <template #suffix>
+          <el-icon class="el-input__icon">
+            <svg-icon name="i-ep:calendar" />
+          </el-icon>
+        </template>
+      </el-input>
+      <el-input v-model="input2" placeholder="请输入内容">
+        <template #prefix>
+          <el-icon class="el-input__icon">
+            <svg-icon name="i-ep:search" />
+          </el-icon>
+        </template>
+      </el-input>
+    </page-main>
+    <page-main title="文本域" class="demo">
+      <el-input v-model="textarea" type="textarea" :rows="2" placeholder="请输入内容" />
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_basic_example/inputnumber.vue b/src/views/component_basic_example/inputnumber.vue
index f603fccb..a2efcb2a 100644
--- a/src/views/component_basic_example/inputnumber.vue
+++ b/src/views/component_basic_example/inputnumber.vue
@@ -1,48 +1,36 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
 
-export default {
-    components: {
-        Alert
-    },
-    data() {
-        return {
-            num: 1,
-            num2: 1,
-            num3: 5,
-            num4: 1,
-            num5: 1
-        }
-    }
-}
+const num = ref(1)
+const num2 = ref(1)
+const num3 = ref(5)
+const num4 = ref(1)
+const num5 = ref(1)
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="计数器" />
-        <page-main title="基础用法" class="demo">
-            <el-input-number v-model="num" :min="1" :max="10" label="描述文字" />
-        </page-main>
-        <page-main title="禁用状态" class="demo">
-            <el-input-number v-model="num2" :disabled="true" />
-        </page-main>
-        <page-main title="步数" class="demo">
-            <el-input-number v-model="num3" :step="2" />
-        </page-main>
-        <page-main title="精度" class="demo">
-            <el-input-number v-model="num4" :precision="2" :step="0.1" :max="10" />
-        </page-main>
-        <page-main title="按钮位置" class="demo">
-            <el-input-number v-model="num5" controls-position="right" :min="1" :max="10" />
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="数字输入框" />
+    <page-main title="基础用法" class="demo">
+      <el-input-number v-model="num" :min="1" :max="10" label="描述文字" />
+    </page-main>
+    <page-main title="禁用状态" class="demo">
+      <el-input-number v-model="num2" :disabled="true" />
+    </page-main>
+    <page-main title="步数" class="demo">
+      <el-input-number v-model="num3" :step="2" />
+    </page-main>
+    <page-main title="精度" class="demo">
+      <el-input-number v-model="num4" :precision="2" :step="0.1" :max="10" />
+    </page-main>
+    <page-main title="按钮位置" class="demo">
+      <el-input-number v-model="num5" controls-position="right" :min="1" :max="10" />
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_basic_example/link.vue b/src/views/component_basic_example/link.vue
index f86342a3..07ffda33 100644
--- a/src/views/component_basic_example/link.vue
+++ b/src/views/component_basic_example/link.vue
@@ -1,60 +1,83 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script setup>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="文字链接" />
-        <page-main title="基础用法" class="demo">
-            <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
-            <el-link type="primary">主要链接</el-link>
-            <el-link type="success">成功链接</el-link>
-            <el-link type="warning">警告链接</el-link>
-            <el-link type="danger">危险链接</el-link>
-            <el-link type="info">信息链接</el-link>
-        </page-main>
-        <page-main title="禁用状态" class="demo">
-            <el-link disabled>默认链接</el-link>
-            <el-link type="primary" disabled>主要链接</el-link>
-            <el-link type="success" disabled>成功链接</el-link>
-            <el-link type="warning" disabled>警告链接</el-link>
-            <el-link type="danger" disabled>危险链接</el-link>
-            <el-link type="info" disabled>信息链接</el-link>
-        </page-main>
-        <page-main title="下划线" class="demo">
-            <el-link :underline="false">无下划线</el-link>
-            <el-link>有下划线</el-link>
-        </page-main>
-        <page-main title="图标" class="demo">
-            <el-link>
-                <el-icon class="el-icon--left">
-                    <svg-icon name="ep:edit" />
-                </el-icon>
-                编辑
-            </el-link>
-            <el-link>
-                查看
-                <el-icon class="el-icon--right">
-                    <svg-icon name="ep:view" />
-                </el-icon>
-            </el-link>
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="文字链接" />
+    <page-main title="基础用法" class="demo">
+      <el-link href="https://element.eleme.io" target="_blank">
+        默认链接
+      </el-link>
+      <el-link type="primary">
+        主要链接
+      </el-link>
+      <el-link type="success">
+        成功链接
+      </el-link>
+      <el-link type="warning">
+        警告链接
+      </el-link>
+      <el-link type="danger">
+        危险链接
+      </el-link>
+      <el-link type="info">
+        信息链接
+      </el-link>
+    </page-main>
+    <page-main title="禁用状态" class="demo">
+      <el-link disabled>
+        默认链接
+      </el-link>
+      <el-link type="primary" disabled>
+        主要链接
+      </el-link>
+      <el-link type="success" disabled>
+        成功链接
+      </el-link>
+      <el-link type="warning" disabled>
+        警告链接
+      </el-link>
+      <el-link type="danger" disabled>
+        危险链接
+      </el-link>
+      <el-link type="info" disabled>
+        信息链接
+      </el-link>
+    </page-main>
+    <page-main title="下划线" class="demo">
+      <el-link :underline="false">
+        无下划线
+      </el-link>
+      <el-link>有下划线</el-link>
+    </page-main>
+    <page-main title="图标" class="demo">
+      <el-link>
+        <el-icon class="el-icon--left">
+          <svg-icon name="i-ep:edit" />
+        </el-icon>
+        编辑
+      </el-link>
+      <el-link>
+        查看
+        <el-icon class="el-icon--right">
+          <svg-icon name="i-ep:view" />
+        </el-icon>
+      </el-link>
+    </page-main>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .demo {
-    .el-link {
-        margin: 0 5px;
-    }
+  .el-link {
+    margin: 0 5px;
+  }
 }
 </style>
diff --git a/src/views/component_basic_example/radio.vue b/src/views/component_basic_example/radio.vue
index 9675c491..81b8e234 100644
--- a/src/views/component_basic_example/radio.vue
+++ b/src/views/component_basic_example/radio.vue
@@ -1,60 +1,66 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
 
-export default {
-    components: {
-        Alert
-    },
-    data() {
-        return {
-            radio: '1',
-            radio2: '选中且禁用',
-            radio3: 3,
-            radio4: '上海',
-            radio5: '1'
-        }
-    }
-}
+const radio = ref('1')
+const radio2 = ref('选中且禁用')
+const radio3 = ref(3)
+const radio4 = ref('上海')
+const radio5 = ref('1')
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="单选框" />
-        <page-main title="基础用法" class="demo">
-            <el-radio v-model="radio" label="1">备选项</el-radio>
-            <el-radio v-model="radio" label="2">备选项</el-radio>
-        </page-main>
-        <page-main title="禁用状态" class="demo">
-            <el-radio v-model="radio2" disabled label="禁用">备选项</el-radio>
-            <el-radio v-model="radio2" disabled label="选中且禁用">备选项</el-radio>
-        </page-main>
-        <page-main title="单选框组" class="demo">
-            <el-radio-group v-model="radio3">
-                <el-radio :label="3">备选项</el-radio>
-                <el-radio :label="6">备选项</el-radio>
-                <el-radio :label="9">备选项</el-radio>
-            </el-radio-group>
-        </page-main>
-        <page-main title="按钮样式" class="demo">
-            <el-radio-group v-model="radio4">
-                <el-radio-button label="上海" />
-                <el-radio-button label="北京" />
-                <el-radio-button label="广州" />
-                <el-radio-button label="深圳" />
-            </el-radio-group>
-        </page-main>
-        <page-main title="带有边框" class="demo">
-            <el-radio v-model="radio5" label="1" border>备选项1</el-radio>
-            <el-radio v-model="radio5" label="2" border>备选项2</el-radio>
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="单选框" />
+    <page-main title="基础用法" class="demo">
+      <el-radio v-model="radio" label="1">
+        备选项
+      </el-radio>
+      <el-radio v-model="radio" label="2">
+        备选项
+      </el-radio>
+    </page-main>
+    <page-main title="禁用状态" class="demo">
+      <el-radio v-model="radio2" disabled label="禁用">
+        备选项
+      </el-radio>
+      <el-radio v-model="radio2" disabled label="选中且禁用">
+        备选项
+      </el-radio>
+    </page-main>
+    <page-main title="单选框组" class="demo">
+      <el-radio-group v-model="radio3">
+        <el-radio :label="3">
+          备选项
+        </el-radio>
+        <el-radio :label="6">
+          备选项
+        </el-radio>
+        <el-radio :label="9">
+          备选项
+        </el-radio>
+      </el-radio-group>
+    </page-main>
+    <page-main title="按钮样式" class="demo">
+      <el-radio-group v-model="radio4">
+        <el-radio-button label="上海" />
+        <el-radio-button label="北京" />
+        <el-radio-button label="广州" />
+        <el-radio-button label="深圳" />
+      </el-radio-group>
+    </page-main>
+    <page-main title="带有边框" class="demo">
+      <el-radio v-model="radio5" label="1" border>
+        备选项1
+      </el-radio>
+      <el-radio v-model="radio5" label="2" border>
+        备选项2
+      </el-radio>
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_basic_example/rate.vue b/src/views/component_basic_example/rate.vue
index 22de01ef..9341f910 100644
--- a/src/views/component_basic_example/rate.vue
+++ b/src/views/component_basic_example/rate.vue
@@ -1,40 +1,28 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
 
-export default {
-    components: {
-        Alert
-    },
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: 3.7
-        }
-    }
-}
+const value1 = ref()
+const value2 = ref()
+const value3 = ref(3.7)
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="评分" />
-        <page-main title="基础用法" class="demo">
-            <el-rate v-model="value1" />
-        </page-main>
-        <page-main title="辅助文字" class="demo">
-            <el-rate v-model="value2" show-text :texts="['极差', '差', '一般', '好', '极好']" />
-        </page-main>
-        <page-main title="只读" class="demo">
-            <el-rate v-model="value3" disabled show-score text-color="#ff9900" score-template="{value}" />
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="评分" />
+    <page-main title="基础用法" class="demo">
+      <el-rate v-model="value1" />
+    </page-main>
+    <page-main title="辅助文字" class="demo">
+      <el-rate v-model="value2" show-text :texts="['极差', '差', '一般', '好', '极好']" />
+    </page-main>
+    <page-main title="只读" class="demo">
+      <el-rate v-model="value3" disabled show-score text-color="#ff9900" score-template="{value}" />
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_basic_example/select.vue b/src/views/component_basic_example/select.vue
index cfd6151d..27509941 100644
--- a/src/views/component_basic_example/select.vue
+++ b/src/views/component_basic_example/select.vue
@@ -1,75 +1,63 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
 
-export default {
-    components: {
-        Alert
-    },
-    data() {
-        return {
-            options1: [
-                { value: '选项1', label: '黄金糕' },
-                { value: '选项2', label: '双皮奶' },
-                { value: '选项3', label: '蚵仔煎' },
-                { value: '选项4', label: '龙须面' },
-                { value: '选项5', label: '北京烤鸭' }
-            ],
-            value1: '',
-            options2: [
-                { value: '选项1', label: '黄金糕' },
-                { value: '选项2', label: '双皮奶', disabled: true },
-                { value: '选项3', label: '蚵仔煎' },
-                { value: '选项4', label: '龙须面' },
-                { value: '选项5', label: '北京烤鸭' }
-            ],
-            value2: '',
-            value3: []
-        }
-    }
-}
+const options1 = ref([
+  { value: '选项1', label: '黄金糕' },
+  { value: '选项2', label: '双皮奶' },
+  { value: '选项3', label: '蚵仔煎' },
+  { value: '选项4', label: '龙须面' },
+  { value: '选项5', label: '北京烤鸭' },
+])
+const value1 = ref('')
+const options2 = ref([
+  { value: '选项1', label: '黄金糕' },
+  { value: '选项2', label: '双皮奶', disabled: true },
+  { value: '选项3', label: '蚵仔煎' },
+  { value: '选项4', label: '龙须面' },
+  { value: '选项5', label: '北京烤鸭' },
+])
+const value2 = ref('')
+const value3 = ref([])
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="选择器" />
-        <page-main title="基础用法" class="demo">
-            <el-select v-model="value1" placeholder="请选择">
-                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-        </page-main>
-        <page-main title="有禁用选项" class="demo">
-            <el-select v-model="value2" placeholder="请选择">
-                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-        </page-main>
-        <page-main title="禁用状态" class="demo">
-            <el-select v-model="value1" disabled placeholder="请选择">
-                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-        </page-main>
-        <page-main title="可清空单选" class="demo">
-            <el-select v-model="value1" clearable placeholder="请选择">
-                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-        </page-main>
-        <page-main title="基础多选" class="demo">
-            <el-select v-model="value3" multiple placeholder="请选择">
-                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-        </page-main>
-        <page-main title="可搜索" class="demo">
-            <el-select v-model="value1" filterable placeholder="请选择">
-                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="选择器" />
+    <page-main title="基础用法" class="demo">
+      <el-select v-model="value1" placeholder="请选择">
+        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </page-main>
+    <page-main title="有禁用选项" class="demo">
+      <el-select v-model="value2" placeholder="请选择">
+        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </page-main>
+    <page-main title="禁用状态" class="demo">
+      <el-select v-model="value1" disabled placeholder="请选择">
+        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </page-main>
+    <page-main title="可清空单选" class="demo">
+      <el-select v-model="value1" clearable placeholder="请选择">
+        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </page-main>
+    <page-main title="基础多选" class="demo">
+      <el-select v-model="value3" multiple placeholder="请选择">
+        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </page-main>
+    <page-main title="可搜索" class="demo">
+      <el-select v-model="value1" filterable placeholder="请选择">
+        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_basic_example/slider.vue b/src/views/component_basic_example/slider.vue
index ee6b63e1..35fc9fde 100644
--- a/src/views/component_basic_example/slider.vue
+++ b/src/views/component_basic_example/slider.vue
@@ -1,69 +1,56 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
 
-export default {
-    components: {
-        Alert
-    },
-    data() {
-        return {
-            value1: 0,
-            value2: 50,
-            value3: 36,
-            value4: 48,
-            value5: 42,
-            value6: 0,
-            value7: 0,
-            value8: [4, 8],
-            value9: 0
-        }
-    },
-    methods: {
-        formatTooltip(val) {
-            return val / 100
-        }
-    }
+const value1 = ref(0)
+const value2 = ref(50)
+const value3 = ref(36)
+const value4 = ref(48)
+const value5 = ref(42)
+const value6 = ref(0)
+const value7 = ref(0)
+const value8 = ref([4, 8])
+const value9 = ref(0)
+
+function formatTooltip(val: number) {
+  return val / 100
 }
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="滑块" />
-        <page-main title="基础用法" class="demo">
-            <span class="demonstration">默认</span>
-            <el-slider v-model="value1" />
-            <span class="demonstration">自定义初始值</span>
-            <el-slider v-model="value2" />
-            <span class="demonstration">隐藏 Tooltip</span>
-            <el-slider v-model="value3" :show-tooltip="false" />
-            <span class="demonstration">格式化 Tooltip</span>
-            <el-slider v-model="value4" :format-tooltip="formatTooltip" />
-            <span class="demonstration">禁用</span>
-            <el-slider v-model="value5" disabled />
-        </page-main>
-        <page-main title="离散值" class="demo">
-            <span class="demonstration">不显示间断点</span>
-            <el-slider v-model="value6" :step="10" />
-            <span class="demonstration">显示间断点</span>
-            <el-slider v-model="value6" :step="10" show-stops />
-        </page-main>
-        <page-main title="带有输入框" class="demo">
-            <el-slider v-model="value7" show-input />
-        </page-main>
-        <page-main title="范围选择" class="demo">
-            <el-slider v-model="value8" range show-stops :max="10" />
-        </page-main>
-        <page-main title="竖向模式" class="demo">
-            <el-slider v-model="value9" vertical height="200px" />
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="滑块" />
+    <page-main title="基础用法" class="demo">
+      <span class="demonstration">默认</span>
+      <el-slider v-model="value1" />
+      <span class="demonstration">自定义初始值</span>
+      <el-slider v-model="value2" />
+      <span class="demonstration">隐藏 Tooltip</span>
+      <el-slider v-model="value3" :show-tooltip="false" />
+      <span class="demonstration">格式化 Tooltip</span>
+      <el-slider v-model="value4" :format-tooltip="formatTooltip" />
+      <span class="demonstration">禁用</span>
+      <el-slider v-model="value5" disabled />
+    </page-main>
+    <page-main title="离散值" class="demo">
+      <span class="demonstration">不显示间断点</span>
+      <el-slider v-model="value6" :step="10" />
+      <span class="demonstration">显示间断点</span>
+      <el-slider v-model="value6" :step="10" show-stops />
+    </page-main>
+    <page-main title="带有输入框" class="demo">
+      <el-slider v-model="value7" show-input />
+    </page-main>
+    <page-main title="范围选择" class="demo">
+      <el-slider v-model="value8" range show-stops :max="10" />
+    </page-main>
+    <page-main title="竖向模式" class="demo">
+      <el-slider v-model="value9" vertical height="200px" />
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_basic_example/switch.vue b/src/views/component_basic_example/switch.vue
index 123854b0..9c7db807 100644
--- a/src/views/component_basic_example/switch.vue
+++ b/src/views/component_basic_example/switch.vue
@@ -1,42 +1,30 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
 
-export default {
-    components: {
-        Alert
-    },
-    data() {
-        return {
-            value: true,
-            value1: true,
-            value2: true,
-            value3: false
-        }
-    }
-}
+const value = ref(true)
+const value1 = ref(true)
+const value2 = ref(true)
+const value3 = ref(false)
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="开关" />
-        <page-main title="基础用法" class="demo">
-            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />
-        </page-main>
-        <page-main title="文字描述" class="demo">
-            <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费" />
-        </page-main>
-        <page-main title="禁用状态" class="demo">
-            <el-switch v-model="value2" disabled style="margin-right: 10px;" />
-            <el-switch v-model="value3" disabled />
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="开关" />
+    <page-main title="基础用法" class="demo">
+      <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />
+    </page-main>
+    <page-main title="文字描述" class="demo">
+      <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费" />
+    </page-main>
+    <page-main title="禁用状态" class="demo">
+      <el-switch v-model="value2" disabled style="margin-right: 10px;" />
+      <el-switch v-model="value3" disabled />
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_basic_example/timepicker.vue b/src/views/component_basic_example/timepicker.vue
index 77c735ab..24dffc62 100644
--- a/src/views/component_basic_example/timepicker.vue
+++ b/src/views/component_basic_example/timepicker.vue
@@ -1,68 +1,59 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
+<script lang="ts" setup>
 import Alert from './components/alert.vue'
 
-const makeRange = (start, end) => {
-    const result = []
-    for (let i = start; i <= end; i++) {
-        result.push(i)
-    }
-    return result
+const makeRange = (start: number, end: number) => {
+  const result: number[] = []
+  for (let i = start; i <= end; i++)
+    result.push(i)
+
+  return result
 }
-export default {
-    components: {
-        Alert
-    },
-    data() {
-        return {
-            value: '',
-            value1: new Date(2016, 9, 10, 18, 40),
-            startTime: '',
-            endTime: ''
-        }
-    },
-    methods: {
-        // 如允许 17:30:00 - 18:30:00
-        disabledHours() {
-            return makeRange(0, 16).concat(makeRange(19, 23))
-        },
-        disabledMinutes(hour) {
-            if (hour === 17) {
-                return makeRange(0, 29)
-            }
-            if (hour === 18) {
-                return makeRange(31, 59)
-            }
-        },
-        disabledSeconds(hour, minute) {
-            if (hour === 18 && minute === 30) {
-                return makeRange(1, 59)
-            }
-        }
-    }
+
+const value = ref('')
+const value1 = ref(new Date(2016, 9, 10, 18, 30))
+const startTime = ref('')
+const endTime = ref('')
+
+// 如允许 17:30:00 - 18:30:00
+const disabledHours = () => {
+  return makeRange(0, 16).concat(makeRange(19, 23))
+}
+const disabledMinutes = (hour: number) => {
+  if (hour === 17)
+    return makeRange(0, 29)
+
+  else if (hour === 18)
+    return makeRange(31, 59)
+
+  else
+    return makeRange(0, 59)
+}
+const disabledSeconds = (hour: number, minute: number) => {
+  if (hour === 18 && minute === 30)
+    return makeRange(1, 59)
+  else
+    return makeRange(0, 59)
 }
 </script>
 
 <template>
-    <div>
-        <Alert />
-        <page-header title="时间选择器" />
-        <page-main title="固定时间点" class="demo">
-            <el-time-select v-model="value" start="08:30" step="00:15" end="18:30" placeholder="选择时间" />
-        </page-main>
-        <page-main title="任意时间点" class="demo">
-            <el-time-picker v-model="value1" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" placeholder="任意时间点" />
-        </page-main>
-        <page-main title="固定时间范围" class="demo">
-            <el-time-select v-model="startTime" placeholder="起始时间" start="08:30" step="00:15" end="18:30" style="margin-right: 10px;" />
-            <el-time-select v-model="endTime" placeholder="结束时间" start="08:30" step="00:15" end="18:30" :min-time="startTime" />
-        </page-main>
-    </div>
+  <div>
+    <Alert />
+    <page-header title="时间选择器" />
+    <page-main title="固定时间点" class="demo">
+      <el-time-select v-model="value" start="08:30" step="00:15" end="18:30" placeholder="选择时间" />
+    </page-main>
+    <page-main title="限制时间选择范围" class="demo">
+      <el-time-picker v-model="value1" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" placeholder="任意时间点" />
+    </page-main>
+    <page-main title="固定时间范围" class="demo">
+      <el-time-select v-model="startTime" placeholder="起始时间" start="08:30" step="00:15" end="18:30" style="margin-right: 10px;" />
+      <el-time-select v-model="endTime" placeholder="结束时间" start="08:30" step="00:15" end="18:30" :min-time="startTime" />
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_extend_example/actionbar.demo.vue b/src/views/component_extend_example/actionbar.demo.vue
index 2ff58049..71048280 100644
--- a/src/views/component_extend_example/actionbar.demo.vue
+++ b/src/views/component_extend_example/actionbar.demo.vue
@@ -1,163 +1,166 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
-export default {
-    data() {
-        return {
-            form: {
-                name: '',
-                region: '',
-                date1: '',
-                date2: '',
-                delivery: false,
-                type: [],
-                resource: '',
-                desc: ''
-            }
-        }
-    }
-}
+<script lang="ts" setup name="ComponentExampleActionbar">
+const form = ref({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+})
 </script>
 
 <template>
-    <div>
-        <page-header title="固定底部操作栏" content="避免因页面过长导致操作按钮需要滚动到页面底部才能操作，例如表单页">
-            <template #content>
-                <p>FixedActionBar</p>
-                <p style="margin-bottom: 0;">避免因页面过长导致操作按钮需要滚动到页面底部才能操作，例如表单页</p>
-            </template>
-        </page-header>
-        <page-main>
-            <el-row>
-                <el-col :md="24" :lg="12">
-                    <el-form ref="form" :model="form" label-width="120px">
-                        <el-form-item label="活动名称">
-                            <el-input v-model="form.name" />
-                        </el-form-item>
-                        <el-form-item label="活动区域">
-                            <el-select v-model="form.region" placeholder="请选择活动区域">
-                                <el-option label="区域一" value="shanghai" />
-                                <el-option label="区域二" value="beijing" />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="活动时间">
-                            <el-col :span="11">
-                                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
-                            </el-col>
-                            <el-col class="line" :span="2">-</el-col>
-                            <el-col :span="11">
-                                <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
-                            </el-col>
-                        </el-form-item>
-                        <el-form-item label="即时配送">
-                            <el-switch v-model="form.delivery" />
-                        </el-form-item>
-                        <el-form-item label="活动性质">
-                            <el-checkbox-group v-model="form.type">
-                                <el-checkbox label="美食/餐厅线上活动" name="type" />
-                                <el-checkbox label="地推活动" name="type" />
-                                <el-checkbox label="线下主题活动" name="type" />
-                                <el-checkbox label="单纯品牌曝光" name="type" />
-                            </el-checkbox-group>
-                        </el-form-item>
-                        <el-form-item label="特殊资源">
-                            <el-radio-group v-model="form.resource">
-                                <el-radio label="线上品牌商赞助" />
-                                <el-radio label="线下场地免费" />
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item label="活动形式">
-                            <el-input v-model="form.desc" type="textarea" />
-                        </el-form-item>
-                        <el-form-item label="活动名称">
-                            <el-input v-model="form.name" />
-                        </el-form-item>
-                        <el-form-item label="活动区域">
-                            <el-select v-model="form.region" placeholder="请选择活动区域">
-                                <el-option label="区域一" value="shanghai" />
-                                <el-option label="区域二" value="beijing" />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="活动时间">
-                            <el-col :span="11">
-                                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
-                            </el-col>
-                            <el-col class="line" :span="2">-</el-col>
-                            <el-col :span="11">
-                                <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
-                            </el-col>
-                        </el-form-item>
-                        <el-form-item label="即时配送">
-                            <el-switch v-model="form.delivery" />
-                        </el-form-item>
-                        <el-form-item label="活动性质">
-                            <el-checkbox-group v-model="form.type">
-                                <el-checkbox label="美食/餐厅线上活动" name="type" />
-                                <el-checkbox label="地推活动" name="type" />
-                                <el-checkbox label="线下主题活动" name="type" />
-                                <el-checkbox label="单纯品牌曝光" name="type" />
-                            </el-checkbox-group>
-                        </el-form-item>
-                        <el-form-item label="特殊资源">
-                            <el-radio-group v-model="form.resource">
-                                <el-radio label="线上品牌商赞助" />
-                                <el-radio label="线下场地免费" />
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item label="活动形式">
-                            <el-input v-model="form.desc" type="textarea" />
-                        </el-form-item>
-                        <el-form-item label="活动名称">
-                            <el-input v-model="form.name" />
-                        </el-form-item>
-                        <el-form-item label="活动区域">
-                            <el-select v-model="form.region" placeholder="请选择活动区域">
-                                <el-option label="区域一" value="shanghai" />
-                                <el-option label="区域二" value="beijing" />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="活动时间">
-                            <el-col :span="11">
-                                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
-                            </el-col>
-                            <el-col class="line" :span="2">-</el-col>
-                            <el-col :span="11">
-                                <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
-                            </el-col>
-                        </el-form-item>
-                        <el-form-item label="即时配送">
-                            <el-switch v-model="form.delivery" />
-                        </el-form-item>
-                        <el-form-item label="活动性质">
-                            <el-checkbox-group v-model="form.type">
-                                <el-checkbox label="美食/餐厅线上活动" name="type" />
-                                <el-checkbox label="地推活动" name="type" />
-                                <el-checkbox label="线下主题活动" name="type" />
-                                <el-checkbox label="单纯品牌曝光" name="type" />
-                            </el-checkbox-group>
-                        </el-form-item>
-                        <el-form-item label="特殊资源">
-                            <el-radio-group v-model="form.resource">
-                                <el-radio label="线上品牌商赞助" />
-                                <el-radio label="线下场地免费" />
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item label="活动形式">
-                            <el-input v-model="form.desc" type="textarea" />
-                        </el-form-item>
-                    </el-form>
-                </el-col>
-            </el-row>
-        </page-main>
-        <fixed-action-bar>
-            <el-button type="primary" size="large">立即创建</el-button>
-            <el-button size="large">取消</el-button>
-        </fixed-action-bar>
-    </div>
+  <div>
+    <page-header title="固定底部操作栏" content="避免因页面过长导致操作按钮需要滚动到页面底部才能操作，例如表单页">
+      <template #content>
+        <p>FixedActionBar</p>
+        <p style="margin-bottom: 0;">
+          避免因页面过长导致操作按钮需要滚动到页面底部才能操作，例如表单页
+        </p>
+      </template>
+    </page-header>
+    <page-main>
+      <el-row>
+        <el-col :md="24" :lg="12">
+          <el-form ref="form" :model="form" label-width="120px">
+            <el-form-item label="活动名称">
+              <el-input v-model="form.name" />
+            </el-form-item>
+            <el-form-item label="活动区域">
+              <el-select v-model="form.region" placeholder="请选择活动区域">
+                <el-option label="区域一" value="shanghai" />
+                <el-option label="区域二" value="beijing" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="活动时间">
+              <el-col :span="11">
+                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
+              </el-col>
+              <el-col class="line" :span="2">
+                -
+              </el-col>
+              <el-col :span="11">
+                <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
+              </el-col>
+            </el-form-item>
+            <el-form-item label="即时配送">
+              <el-switch v-model="form.delivery" />
+            </el-form-item>
+            <el-form-item label="活动性质">
+              <el-checkbox-group v-model="form.type">
+                <el-checkbox label="美食/餐厅线上活动" name="type" />
+                <el-checkbox label="地推活动" name="type" />
+                <el-checkbox label="线下主题活动" name="type" />
+                <el-checkbox label="单纯品牌曝光" name="type" />
+              </el-checkbox-group>
+            </el-form-item>
+            <el-form-item label="特殊资源">
+              <el-radio-group v-model="form.resource">
+                <el-radio label="线上品牌商赞助" />
+                <el-radio label="线下场地免费" />
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="活动形式">
+              <el-input v-model="form.desc" type="textarea" />
+            </el-form-item>
+            <el-form-item label="活动名称">
+              <el-input v-model="form.name" />
+            </el-form-item>
+            <el-form-item label="活动区域">
+              <el-select v-model="form.region" placeholder="请选择活动区域">
+                <el-option label="区域一" value="shanghai" />
+                <el-option label="区域二" value="beijing" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="活动时间">
+              <el-col :span="11">
+                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
+              </el-col>
+              <el-col class="line" :span="2">
+                -
+              </el-col>
+              <el-col :span="11">
+                <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
+              </el-col>
+            </el-form-item>
+            <el-form-item label="即时配送">
+              <el-switch v-model="form.delivery" />
+            </el-form-item>
+            <el-form-item label="活动性质">
+              <el-checkbox-group v-model="form.type">
+                <el-checkbox label="美食/餐厅线上活动" name="type" />
+                <el-checkbox label="地推活动" name="type" />
+                <el-checkbox label="线下主题活动" name="type" />
+                <el-checkbox label="单纯品牌曝光" name="type" />
+              </el-checkbox-group>
+            </el-form-item>
+            <el-form-item label="特殊资源">
+              <el-radio-group v-model="form.resource">
+                <el-radio label="线上品牌商赞助" />
+                <el-radio label="线下场地免费" />
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="活动形式">
+              <el-input v-model="form.desc" type="textarea" />
+            </el-form-item>
+            <el-form-item label="活动名称">
+              <el-input v-model="form.name" />
+            </el-form-item>
+            <el-form-item label="活动区域">
+              <el-select v-model="form.region" placeholder="请选择活动区域">
+                <el-option label="区域一" value="shanghai" />
+                <el-option label="区域二" value="beijing" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="活动时间">
+              <el-col :span="11">
+                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
+              </el-col>
+              <el-col class="line" :span="2">
+                -
+              </el-col>
+              <el-col :span="11">
+                <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
+              </el-col>
+            </el-form-item>
+            <el-form-item label="即时配送">
+              <el-switch v-model="form.delivery" />
+            </el-form-item>
+            <el-form-item label="活动性质">
+              <el-checkbox-group v-model="form.type">
+                <el-checkbox label="美食/餐厅线上活动" name="type" />
+                <el-checkbox label="地推活动" name="type" />
+                <el-checkbox label="线下主题活动" name="type" />
+                <el-checkbox label="单纯品牌曝光" name="type" />
+              </el-checkbox-group>
+            </el-form-item>
+            <el-form-item label="特殊资源">
+              <el-radio-group v-model="form.resource">
+                <el-radio label="线上品牌商赞助" />
+                <el-radio label="线下场地免费" />
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="活动形式">
+              <el-input v-model="form.desc" type="textarea" />
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </page-main>
+    <fixed-action-bar>
+      <el-button type="primary" size="large">
+        立即创建
+      </el-button>
+      <el-button size="large">
+        取消
+      </el-button>
+    </fixed-action-bar>
+  </div>
 </template>
diff --git a/src/views/component_extend_example/batchactionbar.demo.vue b/src/views/component_extend_example/batchactionbar.demo.vue
index f8805554..874e09d4 100644
--- a/src/views/component_extend_example/batchactionbar.demo.vue
+++ b/src/views/component_extend_example/batchactionbar.demo.vue
@@ -1,77 +1,79 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
-export default {
-    name: 'ComponentExampleBatchactionbar',
-    props: {},
-    data() {
-        return {
-            dataList: [
-                {
-                    date: '2016-05-02',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1518 弄'
-                },
-                {
-                    date: '2016-05-04',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1517 弄'
-                },
-                {
-                    date: '2016-05-01',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1519 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1516 弄'
-                }
-            ],
-            selectionDataList: []
-        }
-    },
-    created() {},
-    mounted() {},
-    methods: {}
-}
+<script lang="ts" setup name="ComponentExampleBatchactionbar">
+const tableRef = ref()
+
+const dataList = ref([
+  {
+    date: '2016-05-02',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1518 弄',
+  },
+  {
+    date: '2016-05-04',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1517 弄',
+  },
+  {
+    date: '2016-05-01',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1519 弄',
+  },
+  {
+    date: '2016-05-03',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1516 弄',
+  },
+])
+const selectionDataList = ref([])
 </script>
 
 <template>
-    <div>
-        <page-header title="批量操作栏">
-            <template #content>
-                <p>BatchActionBar</p>
-                <p style="margin-bottom: 0;">该组件需要和 ElTable 搭配使用</p>
-            </template>
-        </page-header>
-        <page-main>
-            <batch-action-bar :data="dataList" :selection-data="selectionDataList" @check-all="$refs.table.toggleAllSelection()" @check-null="$refs.table.clearSelection()">
-                <el-button size="default">单个批量操作按钮</el-button>
-                <el-button-group>
-                    <el-button size="default">批量操作按钮组1</el-button>
-                    <el-button size="default">批量操作按钮组2</el-button>
-                </el-button-group>
-            </batch-action-bar>
-            <el-table ref="table" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
-                <el-table-column type="selection" width="40" />
-                <el-table-column prop="date" label="日期" width="180" />
-                <el-table-column prop="name" label="姓名" width="180" />
-                <el-table-column prop="address" label="地址" />
-            </el-table>
-            <batch-action-bar :data="dataList" :selection-data="selectionDataList" @check-all="$refs.table.toggleAllSelection()" @check-null="$refs.table.clearSelection()">
-                <el-button size="default">单个批量操作按钮</el-button>
-                <el-button-group>
-                    <el-button size="default">批量操作按钮组1</el-button>
-                    <el-button size="default">批量操作按钮组2</el-button>
-                </el-button-group>
-            </batch-action-bar>
-        </page-main>
-    </div>
+  <div>
+    <page-header title="批量操作栏">
+      <template #content>
+        <p>BatchActionBar</p>
+        <p style="margin-bottom: 0;">
+          该组件需要和 ElTable 搭配使用
+        </p>
+      </template>
+    </page-header>
+    <page-main>
+      <batch-action-bar :data="dataList" :selection-data="selectionDataList" @check-all="tableRef.toggleAllSelection()" @check-null="tableRef.clearSelection()">
+        <el-button size="default">
+          单个批量操作按钮
+        </el-button>
+        <el-button-group>
+          <el-button size="default">
+            批量操作按钮组1
+          </el-button>
+          <el-button size="default">
+            批量操作按钮组2
+          </el-button>
+        </el-button-group>
+      </batch-action-bar>
+      <el-table ref="tableRef" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
+        <el-table-column type="selection" width="40" />
+        <el-table-column prop="date" label="日期" width="180" />
+        <el-table-column prop="name" label="姓名" width="180" />
+        <el-table-column prop="address" label="地址" />
+      </el-table>
+      <batch-action-bar :data="dataList" :selection-data="selectionDataList" @check-all="tableRef.toggleAllSelection()" @check-null="tableRef.clearSelection()">
+        <el-button size="default">
+          单个批量操作按钮
+        </el-button>
+        <el-button-group>
+          <el-button size="default">
+            批量操作按钮组1
+          </el-button>
+          <el-button size="default">
+            批量操作按钮组2
+          </el-button>
+        </el-button-group>
+      </batch-action-bar>
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_extend_example/editor.demo.vue b/src/views/component_extend_example/editor.demo.vue
index fffac700..8b336b62 100644
--- a/src/views/component_extend_example/editor.demo.vue
+++ b/src/views/component_extend_example/editor.demo.vue
@@ -1,43 +1,36 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script setup>
-import { mavonEditor } from 'mavon-editor'
-import 'mavon-editor/dist/css/index.css'
-
-const content1 = ref('<h1>Fantastic-admin</h1>')
-const content2 = ref('# Fantastic-admin')
-
-const mdContent2 = computed(() => {
-    const mdit = mavonEditor.getMarkdownIt()
-    return mdit.render(content2.value)
-})
+<script lang="ts" setup name="ComponentExampleEditor">
+const content = ref('<h1>Fantastic-admin</h1>')
 </script>
 
 <template>
-    <div>
-        <page-main title="富文本编辑器">
-            <editor v-model="content1" />
-            <div class="preview" v-html="content1" />
-        </page-main>
-        <page-main title="markdown 编辑器">
-            <mavon-editor v-model="content2" style="z-index: 9;" />
-            <div class="preview" v-html="mdContent2" />
-        </page-main>
-    </div>
+  <div>
+    <page-header title="富文本编辑器">
+      <template #content>
+        <p>Editor</p>
+        <p style="margin-bottom: 0;">
+          基于 TinyMCE 并做了简单封装
+        </p>
+      </template>
+    </page-header>
+    <page-main title="富文本编辑器">
+      <editor v-model="content" />
+      <div class="preview" v-html="content" />
+    </page-main>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .preview {
-    margin-top: 10px;
-    &::before {
-        content: "预览：";
-        display: block;
-    }
+  margin-top: 10px;
+
+  &::before {
+    content: "预览：";
+    display: block;
+  }
 }
 </style>
diff --git a/src/views/component_extend_example/image.preview.demo.vue b/src/views/component_extend_example/image.preview.demo.vue
index 2f75b35e..65fa2a8c 100644
--- a/src/views/component_extend_example/image.preview.demo.vue
+++ b/src/views/component_extend_example/image.preview.demo.vue
@@ -1,23 +1,20 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
 <template>
-    <div>
-        <page-header title="图片预览" content="ImagePreview" />
-        <page-main>
-            <div>
-                <image-preview :src="`https://hooray.gitee.io/fantastic-admin/logo.png`" :width="200" />
-            </div>
-        </page-main>
-        <page-main title="图片加载失败时">
-            <div>
-                <image-preview src="http://www.baidu.com" width="100px" height="100px" />
-            </div>
-        </page-main>
-    </div>
+  <div>
+    <page-header title="图片预览" content="ImagePreview" />
+    <page-main>
+      <div>
+        <image-preview src="https://hooray.gitee.io/fantastic-admin/logo.png" :width="200" />
+      </div>
+    </page-main>
+    <page-main title="图片加载失败时">
+      <div>
+        <image-preview src="http://www.baidu.com" width="100px" height="100px" />
+      </div>
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_extend_example/pageheader.demo.vue b/src/views/component_extend_example/pageheader.demo.vue
index 29fc5502..11913ca7 100644
--- a/src/views/component_extend_example/pageheader.demo.vue
+++ b/src/views/component_extend_example/pageheader.demo.vue
@@ -1,27 +1,24 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
 <template>
-    <div>
-        <page-header title="页头" content="PageHeader" />
-        <page-header title="页面标题">
-            <template #content>
-                <p>提供两块插槽：</p>
-                <p>一块是 content 区域插槽，一块是右侧区域</p>
-            </template>
-            <el-button round>
-                <template #icon>
-                    <el-icon>
-                        <svg-icon name="ep:arrow-left" />
-                    </el-icon>
-                </template>
-                返回
-            </el-button>
-        </page-header>
-    </div>
+  <div>
+    <page-header title="页头" content="PageHeader" />
+    <page-header title="页面标题">
+      <template #content>
+        <p>提供两块插槽：</p>
+        <p>一块是 content 区域插槽，一块是右侧区域</p>
+      </template>
+      <el-button round>
+        <template #icon>
+          <el-icon>
+            <svg-icon name="ep:arrow-left" />
+          </el-icon>
+        </template>
+        返回
+      </el-button>
+    </page-header>
+  </div>
 </template>
diff --git a/src/views/component_extend_example/pagemain.demo.vue b/src/views/component_extend_example/pagemain.demo.vue
index 80bc72e4..105b73a9 100644
--- a/src/views/component_extend_example/pagemain.demo.vue
+++ b/src/views/component_extend_example/pagemain.demo.vue
@@ -1,50 +1,49 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
 <template>
-    <div>
-        <page-header title="内容块" content="PageMain" />
-        <page-main>
-            PageMain 是最常用的页面组件，几乎所有页面都会使用到
+  <div>
+    <page-header title="内容块" content="PageMain" />
+    <page-main>
+      PageMain 是最常用的页面组件，几乎所有页面都会使用到
+    </page-main>
+    <page-main title="你可以设置一个自定义的标题">
+      这里放页面内容
+    </page-main>
+    <page-main>
+      <template #title>
+        <div style="display: flex; align-item: center; justify-content: space-between;">
+          通过 slot 设置标题
+          <el-button size="small">
+            还可以放置自定义按钮
+          </el-button>
+        </div>
+      </template>
+      这里放页面内容
+    </page-main>
+    <el-row :gutter="20" style="margin: -10px 10px;">
+      <el-col :md="8">
+        <page-main style="margin: 10px 0;">
+          还可以结合 ElRow 使用
         </page-main>
-        <page-main title="你可以设置一个自定义的标题">
-            这里放页面内容
+      </el-col>
+      <el-col :md="8">
+        <page-main style="margin: 10px 0;">
+          这里放页面内容
         </page-main>
-        <page-main>
-            <template #title>
-                <div style="display: flex; align-item: center; justify-content: space-between;">
-                    通过 slot 设置标题
-                    <el-button size="small">还可以放置自定义按钮</el-button>
-                </div>
-            </template>
-            这里放页面内容
+      </el-col>
+      <el-col :md="8">
+        <page-main style="margin: 10px 0;">
+          这里放页面内容
         </page-main>
-        <el-row :gutter="20" style="margin: -10px 10px;">
-            <el-col :md="8">
-                <page-main style="margin: 10px 0;">
-                    还可以结合 ElRow 使用
-                </page-main>
-            </el-col>
-            <el-col :md="8">
-                <page-main style="margin: 10px 0;">
-                    这里放页面内容
-                </page-main>
-            </el-col>
-            <el-col :md="8">
-                <page-main style="margin: 10px 0;">
-                    这里放页面内容
-                </page-main>
-            </el-col>
-        </el-row>
-        <page-main title="带展开功能" collaspe height="200px">
-            <h1>Fantastic-admin</h1>
-            <img src="../../assets/images/logo.png">
-            <p>这是一款开箱即用的中后台框架，同时它也经历过数十个真实项目的技术沉淀，确保框架在开发中可落地、可使用、可维护</p>
-        </page-main>
-    </div>
+      </el-col>
+    </el-row>
+    <page-main title="带展开功能" collaspe height="200px">
+      <h1>Fantastic-admin</h1>
+      <img src="../../assets/images/logo.png">
+      <p>这是一款开箱即用的中后台框架，同时它也经历过数十个真实项目的技术沉淀，确保框架在开发中可落地、可使用、可维护</p>
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_extend_example/pcas.demo.vue b/src/views/component_extend_example/pcas.demo.vue
index b6321b43..27707dff 100644
--- a/src/views/component_extend_example/pcas.demo.vue
+++ b/src/views/component_extend_example/pcas.demo.vue
@@ -1,71 +1,69 @@
-<route>
-{
-  meta: {
-    enabled: false
-  }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script setup name="ComponentExampleArea">
+<script lang="ts" setup name="ComponentExampleArea">
+import type { FormInstance, FormRules } from 'element-plus'
+
 const pcas1 = ref([])
 const pcas2 = ref([])
 const pcas3 = ref([])
 const pcasCode = ref(['33', '3301', '330106'])
 const pcasName = ref(['浙江省', '杭州市', '西湖区'])
 const pcasBoth = ref([
-    { code: '33', name: '浙江省' },
-    { code: '3301', name: '杭州市' },
-    { code: '330106', name: '西湖区' }
+  { code: '33', name: '浙江省' },
+  { code: '3301', name: '杭州市' },
+  { code: '330106', name: '西湖区' },
 ])
 
-const formRef = ref()
+const formRef = ref<FormInstance>()
 const ruleForm = ref({
-    pca: []
+  pca: [],
 })
-const rules = ref({
-    pca: [
-        { type: 'array', required: true, message: '请选择地区', trigger: 'change' }
-    ]
+const rules = ref<FormRules>({
+  pca: [
+    { type: 'array', required: true, message: '请选择地区', trigger: 'change' },
+  ],
 })
 function submitForm() {
-    formRef.value.validate(valid => {
-        if (valid) {
-            ElMessage('提交成功')
-        }
-    })
+  formRef.value?.validate((valid) => {
+    if (valid)
+      ElMessage('提交成功')
+  })
 }
 </script>
 
 <template>
-    <div>
-        <page-header title="省市区街道联动" content="PcasCascader" />
-        <page-main title="多级联动">
-            <p>省份/城市联动</p>
-            <pcas-cascader v-model="pcas1" type="pc" />
-            <p>省份/城市/区县联动</p>
-            <pcas-cascader v-model="pcas2" />
-            <p>省份/城市/区县/街道联动</p>
-            <pcas-cascader v-model="pcas3" type="pcas" />
-        </page-main>
-        <page-main title="数据格式化">
-            <p>{{ pcasCode }}</p>
-            <pcas-cascader v-model="pcasCode" />
-            <p>{{ pcasName }}</p>
-            <pcas-cascader v-model="pcasName" format="name" />
-            <p>{{ pcasBoth }}</p>
-            <pcas-cascader v-model="pcasBoth" format="both" />
-        </page-main>
-        <page-main title="表单验证">
-            <el-form ref="formRef" :model="ruleForm" :rules="rules">
-                <el-form-item label="地区" prop="pca">
-                    <pcas-cascader v-model="ruleForm.pca" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="submitForm">
-                        提交
-                    </el-button>
-                </el-form-item>
-            </el-form>
-        </page-main>
-    </div>
+  <div>
+    <page-header title="省市区街道联动" content="PcasCascader" />
+    <page-main title="多级联动">
+      <p>省份/城市联动</p>
+      <pcas-cascader v-model="pcas1" type="pc" />
+      <p>省份/城市/区县联动</p>
+      <pcas-cascader v-model="pcas2" />
+      <p>省份/城市/区县/街道联动</p>
+      <pcas-cascader v-model="pcas3" type="pcas" />
+    </page-main>
+    <page-main title="数据格式化">
+      <p>{{ pcasCode }}</p>
+      <pcas-cascader v-model="pcasCode" />
+      <p>{{ pcasName }}</p>
+      <pcas-cascader v-model="pcasName" format="name" />
+      <p>{{ pcasBoth }}</p>
+      <pcas-cascader v-model="pcasBoth" format="both" />
+    </page-main>
+    <page-main title="表单验证">
+      <el-form ref="formRef" :model="ruleForm" :rules="rules">
+        <el-form-item label="地区" prop="pca">
+          <pcas-cascader v-model="ruleForm.pca" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm">
+            提交
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_extend_example/searchbar.demo.vue b/src/views/component_extend_example/searchbar.demo.vue
index 2f8007cf..d3690f23 100644
--- a/src/views/component_extend_example/searchbar.demo.vue
+++ b/src/views/component_extend_example/searchbar.demo.vue
@@ -1,154 +1,157 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
-export default {
-    data() {
-        return {
-            search: {
-                name: '',
-                department_id: '',
-                department_job_id: '',
-                role_id: '',
-                check1: true,
-                check2: false
-            },
-            searchMore: false,
-            searchMore2: false
-        }
-    }
-}
+<script lang="ts" setup name="ComponentExampleSearchbar">
+const search = ref({
+  name: '',
+  department_id: '',
+  department_job_id: '',
+  role_id: '',
+  check1: true,
+  check2: false,
+})
+const searchMore = ref(false)
+const searchMore2 = ref(false)
 </script>
 
 <template>
-    <div>
-        <page-header title="搜索面板" content="SearchBar" />
-        <page-main>
-            <search-bar show-more @toggle="searchMore = $event">
-                <el-form :model="search" size="default" label-width="120px">
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="姓名 / 手机号">
-                                <el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="6">
-                            <el-form-item v-auth="'supplay.department.browse'" label="部门">
-                                <el-select v-model="search.department_id" clearable placeholder="请选择部门">
-                                    <el-option label="技术部" :value="1" />
-                                    <el-option label="设计部" :value="2" />
-                                    <el-option label="行政部" :value="3" />
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item v-auth="'supplay.department_job.browse'" label="职位">
-                                <el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
-                                    <el-option label="程序员" :value="1" />
-                                    <el-option label="设计师" :value="2" />
-                                    <el-option label="人事" :value="3" />
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item v-auth="'supplay.role.browse'" label="角色">
-                                <el-select v-model="search.role_id" clearable placeholder="请选择角色">
-                                    <el-option label="主管" :value="1" />
-                                    <el-option label="普通职员" :value="2" />
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row v-show="searchMore">
-                        <el-col :span="24">
-                            <el-form-item label="角色">
-                                <el-checkbox :value="true">备选项</el-checkbox>
-                                <el-checkbox :value="false">备选项</el-checkbox>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-form-item>
-                        <el-button type="primary">
-                            <template #icon>
-                                <el-icon>
-                                    <svg-icon name="ep:search" />
-                                </el-icon>
-                            </template>
-                            筛选
-                        </el-button>
-                        <el-button>导出</el-button>
-                        <el-button text>查看已导出记录</el-button>
-                    </el-form-item>
-                </el-form>
-            </search-bar>
-        </page-main>
-        <page-main title="默认展开">
-            <search-bar show-more unfold @toggle="searchMore2 = $event">
-                <el-form :model="search" size="default" label-width="120px">
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="姓名 / 手机号">
-                                <el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="6">
-                            <el-form-item v-auth="'supplay.department.browse'" label="部门">
-                                <el-select v-model="search.department_id" clearable placeholder="请选择部门">
-                                    <el-option label="技术部" :value="1" />
-                                    <el-option label="设计部" :value="2" />
-                                    <el-option label="行政部" :value="3" />
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item v-auth="'supplay.department_job.browse'" label="职位">
-                                <el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
-                                    <el-option label="程序员" :value="1" />
-                                    <el-option label="设计师" :value="2" />
-                                    <el-option label="人事" :value="3" />
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item v-auth="'supplay.role.browse'" label="角色">
-                                <el-select v-model="search.role_id" clearable placeholder="请选择角色">
-                                    <el-option label="主管" :value="1" />
-                                    <el-option label="普通职员" :value="2" />
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row v-show="searchMore2">
-                        <el-col :span="24">
-                            <el-form-item label="角色">
-                                <el-checkbox v-model="search.check1">备选项</el-checkbox>
-                                <el-checkbox v-model="search.check2">备选项</el-checkbox>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-form-item>
-                        <el-button type="primary">
-                            <template #icon>
-                                <el-icon>
-                                    <svg-icon name="ep:search" />
-                                </el-icon>
-                            </template>
-                            筛选
-                        </el-button>
-                        <el-button>导出</el-button>
-                        <el-button text>查看已导出记录</el-button>
-                    </el-form-item>
-                </el-form>
-            </search-bar>
-        </page-main>
-    </div>
+  <div>
+    <page-header title="搜索面板" content="SearchBar" />
+    <page-main>
+      <search-bar show-more @toggle="searchMore = $event">
+        <el-form :model="search" size="default" label-width="120px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="姓名 / 手机号">
+                <el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="6">
+              <el-form-item v-auth="'supplay.department.browse'" label="部门">
+                <el-select v-model="search.department_id" clearable placeholder="请选择部门">
+                  <el-option label="技术部" :value="1" />
+                  <el-option label="设计部" :value="2" />
+                  <el-option label="行政部" :value="3" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item v-auth="'supplay.department_job.browse'" label="职位">
+                <el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
+                  <el-option label="程序员" :value="1" />
+                  <el-option label="设计师" :value="2" />
+                  <el-option label="人事" :value="3" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item v-auth="'supplay.role.browse'" label="角色">
+                <el-select v-model="search.role_id" clearable placeholder="请选择角色">
+                  <el-option label="主管" :value="1" />
+                  <el-option label="普通职员" :value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="searchMore">
+            <el-col :span="24">
+              <el-form-item label="角色">
+                <el-checkbox :value="true">
+                  备选项
+                </el-checkbox>
+                <el-checkbox :value="false">
+                  备选项
+                </el-checkbox>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item>
+            <el-button type="primary">
+              <template #icon>
+                <el-icon>
+                  <svg-icon name="ep:search" />
+                </el-icon>
+              </template>
+              筛选
+            </el-button>
+            <el-button>导出</el-button>
+            <el-button type="primary" link>
+              查看已导出记录
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </search-bar>
+    </page-main>
+    <page-main title="默认展开">
+      <search-bar show-more unfold @toggle="searchMore2 = $event">
+        <el-form :model="search" size="default" label-width="120px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="姓名 / 手机号">
+                <el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="6">
+              <el-form-item v-auth="'supplay.department.browse'" label="部门">
+                <el-select v-model="search.department_id" clearable placeholder="请选择部门">
+                  <el-option label="技术部" :value="1" />
+                  <el-option label="设计部" :value="2" />
+                  <el-option label="行政部" :value="3" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item v-auth="'supplay.department_job.browse'" label="职位">
+                <el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
+                  <el-option label="程序员" :value="1" />
+                  <el-option label="设计师" :value="2" />
+                  <el-option label="人事" :value="3" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item v-auth="'supplay.role.browse'" label="角色">
+                <el-select v-model="search.role_id" clearable placeholder="请选择角色">
+                  <el-option label="主管" :value="1" />
+                  <el-option label="普通职员" :value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="searchMore2">
+            <el-col :span="24">
+              <el-form-item label="角色">
+                <el-checkbox v-model="search.check1">
+                  备选项
+                </el-checkbox>
+                <el-checkbox v-model="search.check2">
+                  备选项
+                </el-checkbox>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item>
+            <el-button type="primary">
+              <template #icon>
+                <el-icon>
+                  <svg-icon name="ep:search" />
+                </el-icon>
+              </template>
+              筛选
+            </el-button>
+            <el-button>导出</el-button>
+            <el-button type="primary" link>
+              查看已导出记录
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </search-bar>
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/component_extend_example/svg.demo.vue b/src/views/component_extend_example/svg.demo.vue
index 28a2e8f8..256872e4 100644
--- a/src/views/component_extend_example/svg.demo.vue
+++ b/src/views/component_extend_example/svg.demo.vue
@@ -1,67 +1,66 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
-export default {
-    data() {
-        return {
-            flip: '',
-            rotate: 0
-        }
-    }
-}
+<script lang="ts" setup name="ComponentExampleSvg">
+const flip = ref<'horizontal' | 'vertical' | 'both' | ''>('')
+const rotate = ref(0)
 </script>
 
 <template>
-    <div>
-        <page-header title="SVG Icon" content="除了使用 Element Plus 提供的图标外，你还可以使用自己的 SVG 图标" />
-        <page-main>
-            <el-icon class="example-icon">
-                <svg-icon name="example-emotion-line" :flip="flip" :rotate="rotate" />
-            </el-icon>
-            <el-icon class="example-icon">
-                <svg-icon name="example-emotion-laugh-line" :flip="flip" :rotate="rotate" />
-            </el-icon>
-            <el-icon class="example-icon">
-                <svg-icon name="example-emotion-unhappy-line" :flip="flip" :rotate="rotate" />
-            </el-icon>
-            <p>也支持彩色 SVG Icon</p>
-            <el-icon class="example-icon">
-                <svg-icon name="example-crown" :flip="flip" :rotate="rotate" />
-            </el-icon>
-            <el-icon class="example-icon">
-                <svg-icon name="example-star" :flip="flip" :rotate="rotate" />
-            </el-icon>
-            <el-icon class="example-icon">
-                <svg-icon name="example-vip" :flip="flip" :rotate="rotate" />
-            </el-icon>
-            <div>
-                <p>翻转：</p>
-                <el-radio-group v-model="flip">
-                    <el-radio-button label="">无</el-radio-button>
-                    <el-radio-button label="horizontal">水平翻转</el-radio-button>
-                    <el-radio-button label="vertical">垂直翻转</el-radio-button>
-                    <el-radio-button label="both">水平垂直翻转</el-radio-button>
-                </el-radio-group>
-                <p>旋转：</p>
-                <el-slider v-model="rotate" :min="0" max="360" style="width: 50%;" />
-            </div>
-            <p>使用方法：</p>
-            <ol>
-                <li>上 <a href="https://www.iconfont.cn/" target="_blank">Iconfont</a> 下载需要的 svg 图标</li>
-                <li>将 svg 文件放入 ./src/assets/icons 目录下，文件名即为 name</li>
-            </ol>
-        </page-main>
-    </div>
+  <div>
+    <page-header title="SVG Icon" content="除了使用 Element Plus 提供的图标外，你还可以使用自己的 SVG 图标" />
+    <page-main>
+      <el-icon class="example-icon">
+        <svg-icon name="example-emotion-line" :flip="flip" :rotate="rotate" />
+      </el-icon>
+      <el-icon class="example-icon">
+        <svg-icon name="example-emotion-laugh-line" :flip="flip" :rotate="rotate" />
+      </el-icon>
+      <el-icon class="example-icon">
+        <svg-icon name="example-emotion-unhappy-line" :flip="flip" :rotate="rotate" />
+      </el-icon>
+      <p>也支持彩色 SVG Icon</p>
+      <el-icon class="example-icon">
+        <svg-icon name="example-crown" :flip="flip" :rotate="rotate" />
+      </el-icon>
+      <el-icon class="example-icon">
+        <svg-icon name="example-star" :flip="flip" :rotate="rotate" />
+      </el-icon>
+      <el-icon class="example-icon">
+        <svg-icon name="example-vip" :flip="flip" :rotate="rotate" />
+      </el-icon>
+      <div>
+        <p>翻转：</p>
+        <el-radio-group v-model="flip">
+          <el-radio-button label="">
+            无
+          </el-radio-button>
+          <el-radio-button label="horizontal">
+            水平翻转
+          </el-radio-button>
+          <el-radio-button label="vertical">
+            垂直翻转
+          </el-radio-button>
+          <el-radio-button label="both">
+            水平垂直翻转
+          </el-radio-button>
+        </el-radio-group>
+        <p>旋转：</p>
+        <el-slider v-model="rotate" :min="0" :max="360" style="width: 50%;" />
+      </div>
+      <p>使用方法：</p>
+      <ol>
+        <li>上 <a href="https://www.iconfont.cn/" target="_blank">Iconfont</a> 下载需要的 svg 图标</li>
+        <li>将 svg 文件放入 ./src/assets/icons 目录下，文件名即为 name</li>
+      </ol>
+    </page-main>
+  </div>
 </template>
 
 <style scoped>
 .example-icon {
-    font-size: 48px;
+  font-size: 48px;
 }
 </style>
diff --git a/src/views/component_extend_example/table.autoheight.demo.vue b/src/views/component_extend_example/table.autoheight.demo.vue
index a8386ab5..20124291 100644
--- a/src/views/component_extend_example/table.autoheight.demo.vue
+++ b/src/views/component_extend_example/table.autoheight.demo.vue
@@ -1,160 +1,155 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
-export default {
-    name: 'ComponentExampleTableHeightAdaption',
-    props: {},
-    data() {
-        return {
-            dataList: [
-                {
-                    date: '2016-05-02',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1518 弄'
-                },
-                {
-                    date: '2016-05-04',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1517 弄'
-                },
-                {
-                    date: '2016-05-01',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1519 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1516 弄'
-                },
-                {
-                    date: '2016-05-04',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1517 弄'
-                },
-                {
-                    date: '2016-05-01',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1519 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1516 弄'
-                },
-                {
-                    date: '2016-05-04',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1517 弄'
-                },
-                {
-                    date: '2016-05-01',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1519 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1516 弄'
-                },
-                {
-                    date: '2016-05-04',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1517 弄'
-                },
-                {
-                    date: '2016-05-01',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1519 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1516 弄'
-                },
-                {
-                    date: '2016-05-04',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1517 弄'
-                },
-                {
-                    date: '2016-05-01',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1519 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1516 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1516 弄'
-                },
-                {
-                    date: '2016-05-04',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1517 弄'
-                },
-                {
-                    date: '2016-05-01',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1519 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1516 弄'
-                }
-            ]
-        }
-    }
-}
+<script lang="ts" setup name="ComponentExampleTableHeightAdaption">
+const dataList = ref([
+  {
+    date: '2016-05-02',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1518 弄',
+  },
+  {
+    date: '2016-05-04',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1517 弄',
+  },
+  {
+    date: '2016-05-01',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1519 弄',
+  },
+  {
+    date: '2016-05-03',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1516 弄',
+  },
+  {
+    date: '2016-05-04',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1517 弄',
+  },
+  {
+    date: '2016-05-01',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1519 弄',
+  },
+  {
+    date: '2016-05-03',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1516 弄',
+  },
+  {
+    date: '2016-05-04',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1517 弄',
+  },
+  {
+    date: '2016-05-01',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1519 弄',
+  },
+  {
+    date: '2016-05-03',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1516 弄',
+  },
+  {
+    date: '2016-05-04',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1517 弄',
+  },
+  {
+    date: '2016-05-01',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1519 弄',
+  },
+  {
+    date: '2016-05-03',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1516 弄',
+  },
+  {
+    date: '2016-05-04',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1517 弄',
+  },
+  {
+    date: '2016-05-01',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1519 弄',
+  },
+  {
+    date: '2016-05-03',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1516 弄',
+  },
+  {
+    date: '2016-05-03',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1516 弄',
+  },
+  {
+    date: '2016-05-04',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1517 弄',
+  },
+  {
+    date: '2016-05-01',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1519 弄',
+  },
+  {
+    date: '2016-05-03',
+    name: '王小虎',
+    address: '上海市普陀区金沙江路 1516 弄',
+  },
+])
 </script>
 
 <template>
-    <div class="absolute-container">
-        <page-header title="表格高度自适应">
-            <template #content>
-                <p style="margin-bottom: 0;">该特性早期通过二次封装组件实现，现在则通过设置 el-table 组件的 height 为 100% 即可</p>
-            </template>
-        </page-header>
-        <page-main>
-            <el-table :data="dataList" border stripe highlight-current-row height="100%">
-                <el-table-column type="index" width="50" />
-                <el-table-column prop="date" label="日期" width="180" />
-                <el-table-column prop="name" label="姓名" width="180" />
-                <el-table-column prop="address" label="地址" />
-            </el-table>
-            <el-button type="primary">按钮</el-button>
-        </page-main>
-    </div>
+  <div class="absolute-container">
+    <page-header title="表格高度自适应">
+      <template #content>
+        <p style="margin-bottom: 0;">
+          该特性早期通过二次封装组件实现，现在则通过设置 el-table 组件的 height 为 100% 即可
+        </p>
+      </template>
+    </page-header>
+    <page-main>
+      <el-table :data="dataList" border stripe highlight-current-row height="100%">
+        <el-table-column type="index" width="50" />
+        <el-table-column prop="date" label="日期" width="180" />
+        <el-table-column prop="name" label="姓名" width="180" />
+        <el-table-column prop="address" label="地址" />
+      </el-table>
+      <el-button type="primary">
+        按钮
+      </el-button>
+    </page-main>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .absolute-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .page-main {
+    // 让 page-main 的高度自适应
+    flex: 1;
+    overflow: auto;
+    margin-top: 0;
     display: flex;
     flex-direction: column;
-    .page-main {
-        // 让 page-main 的高度自适应
-        flex: 1;
-        overflow: auto;
-        margin-top: 0;
-        display: flex;
-        flex-direction: column;
-        .el-button {
-            margin-top: 20px;
-        }
+
+    .el-button {
+      margin-top: 20px;
     }
+  }
 }
 </style>
diff --git a/src/views/component_extend_example/trend.demo.vue b/src/views/component_extend_example/trend.demo.vue
index 44c3c672..f9f2fccc 100644
--- a/src/views/component_extend_example/trend.demo.vue
+++ b/src/views/component_extend_example/trend.demo.vue
@@ -1,50 +1,49 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
 <template>
-    <div>
-        <page-header title="趋势符号">
-            <template #content>
-                <p>Trend</p>
-                <p style="margin-bottom: 0;">标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外</p>
-            </template>
-        </page-header>
-        <el-row :gutter="20" style="margin: 0 10px;">
-            <el-col :md="8">
-                <page-main title="基础用法" style="margin: 0;">
-                    <p>
-                        <trend value="12.3" />
-                    </p>
-                    <p>
-                        <trend value="12.3" type="down" />
-                    </p>
-                </page-main>
-            </el-col>
-            <el-col :md="8">
-                <page-main title="颜色反转" style="margin: 0;">
-                    <p>
-                        <trend value="12.3" reverse />
-                    </p>
-                    <p>
-                        <trend value="12.3" type="down" reverse />
-                    </p>
-                </page-main>
-            </el-col>
-            <el-col :md="8">
-                <page-main title="前缀后缀" style="margin: 0;">
-                    <p>
-                        <trend value="12.3" prefix="$" />
-                    </p>
-                    <p>
-                        <trend value="12.3" suffix="%" />
-                    </p>
-                </page-main>
-            </el-col>
-        </el-row>
-    </div>
+  <div>
+    <page-header title="趋势符号">
+      <template #content>
+        <p>Trend</p>
+        <p style="margin-bottom: 0;">
+          标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外
+        </p>
+      </template>
+    </page-header>
+    <el-row :gutter="20" style="margin: 0 10px;">
+      <el-col :md="8">
+        <page-main title="基础用法" style="margin: 0;">
+          <p>
+            <trend value="12.3" />
+          </p>
+          <p>
+            <trend value="12.3" type="down" />
+          </p>
+        </page-main>
+      </el-col>
+      <el-col :md="8">
+        <page-main title="颜色反转" style="margin: 0;">
+          <p>
+            <trend value="12.3" reverse />
+          </p>
+          <p>
+            <trend value="12.3" type="down" reverse />
+          </p>
+        </page-main>
+      </el-col>
+      <el-col :md="8">
+        <page-main title="前缀后缀" style="margin: 0;">
+          <p>
+            <trend value="12.3" prefix="$" />
+          </p>
+          <p>
+            <trend value="12.3" suffix="%" />
+          </p>
+        </page-main>
+      </el-col>
+    </el-row>
+  </div>
 </template>
diff --git a/src/views/component_extend_example/upload.demo.vue b/src/views/component_extend_example/upload.demo.vue
index d8820499..f27966d3 100644
--- a/src/views/component_extend_example/upload.demo.vue
+++ b/src/views/component_extend_example/upload.demo.vue
@@ -1,68 +1,70 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script setup>
+<script lang="ts" setup name="ComponentExampleUpload">
+import type { UploadProps } from 'element-plus'
+
 const image = ref('https://picsum.photos/400')
 const images = ref([
-    'https://picsum.photos/400',
-    'https://picsum.photos/600',
-    'https://picsum.photos/500'
+  'https://picsum.photos/400',
+  'https://picsum.photos/600',
+  'https://picsum.photos/500',
 ])
 const files = ref([
-    {
-        name: '测试文件.zip',
-        url: 'http://images.lookbi.com/uploads/apply/96/d8521fc691e472eec91a170201866e7d.zip'
-    }
+  {
+    name: '测试文件.zip',
+    url: 'http://images.lookbi.com/uploads/apply/96/d8521fc691e472eec91a170201866e7d.zip',
+  },
 ])
 
-function handleSuccess1(res) {
-    if (res.error === '')
-        image.value = res.data.path
+const handleSuccess1: UploadProps['onSuccess'] = (res) => {
+  if (res.error === '')
+    image.value = res.data.path
 
-    else
-        ElMessage.warning(res.error)
+  else
+    ElMessage.warning(res.error)
 }
-function handleSuccess2(res) {
-    if (res.error === '')
-        images.value.push(res.data.path)
+const handleSuccess2: UploadProps['onSuccess'] = (res) => {
+  if (res.error === '')
+    images.value.push(res.data.path)
 
-    else
-        ElMessage.warning(res.error)
+  else
+    ElMessage.warning(res.error)
 }
-function handleSuccess3(res, file, fileList) {
-    if (res.error === '') {
-        files.value.push({
-            name: file.name,
-            url: res.error === '' ? res.data.path : ''
-        })
-    } else {
-        fileList.pop()
-        ElMessage.warning(res.error)
-    }
+const handleSuccess3: UploadProps['onSuccess'] = (res, file, fileList) => {
+  if (res.error === '') {
+    files.value.push({
+      name: file.name,
+      url: res.error === '' ? res.data.path : '',
+    })
+  }
+  else {
+    fileList.pop()
+    ElMessage.warning(res.error)
+  }
 }
 </script>
 
 <template>
-    <div>
-        <page-header title="上传">
-            <template #content>
-                <p>ImageUpload / ImagesUpload / FileUpload</p>
-                <p style="margin-bottom: 0;">由于线上演示环境开启了 Mock ，会导致上传功能报错，请在本地运行并查看演示</p>
-            </template>
-        </page-header>
-        <page-main title="单图上传">
-            <image-upload v-model:url="image" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/image" name="image" :width="250" :height="150" @on-success="handleSuccess1" />
-        </page-main>
-        <page-main title="多图上传（默认最多3张）">
-            <images-upload v-model:url="images" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/image" name="image" @on-success="handleSuccess2" />
-        </page-main>
-        <page-main title="文件上传（默认最多3个）">
-            <file-upload :files="files" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/file" @on-success="handleSuccess3" />
-        </page-main>
-    </div>
+  <div>
+    <page-header title="上传">
+      <template #content>
+        <p>ImageUpload / ImagesUpload / FileUpload</p>
+        <p style="margin-bottom: 0;">
+          由于线上演示环境开启了 Mock ，会导致上传功能报错，请在本地运行并查看演示
+        </p>
+      </template>
+    </page-header>
+    <page-main title="单图上传">
+      <image-upload v-model:url="image" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/image" name="image" :width="250" :height="150" @on-success="handleSuccess1" />
+    </page-main>
+    <page-main title="多图上传（默认最多3张）">
+      <images-upload v-model:url="images" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/image" name="image" @on-success="handleSuccess2" />
+    </page-main>
+    <page-main title="文件上传（默认最多3个）">
+      <file-upload :files="files" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/file" @on-success="handleSuccess3" />
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/index.vue b/src/views/index.vue
index a02422ec..8082fa94 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,279 +1,300 @@
-<route>
-{
-    name: 'dashboard',
-    meta: {
-        title: "控制台"
-    }
-}
+<route lang="yaml">
+name: dashboard
+meta:
+  title: 控制台
 </route>
 
-<script setup>
-function open(url) {
-    window.open(url, 'top')
+<script lang="ts" setup>
+function open(url: string) {
+  window.open(url, 'top')
 }
 
 const fantasticStartkitInfo = ref({
-    feature: [
-        '支持 TypeScript',
-        '默认集成 vue-router 和 pinia',
-        '全局 SCSS 资源引入',
-        '全局组件自动注册',
-        '支持 SVG 图标，CSS 精灵图自动合成',
-        '支持 mock 数据，可摆脱后端束缚独立开发',
-        '支持 gzip / brotli 优化项目体积，提高加载速度',
-        '结合 IDE 插件、ESlint 、stylelint 、Git 钩子，轻松实现团队代码规范'
-    ]
+  feature: [
+    '支持 TypeScript',
+    '默认集成 vue-router 和 pinia',
+    '全局 SCSS 资源引入',
+    '全局组件自动注册',
+    '支持 SVG 图标，CSS 精灵图自动合成',
+    '支持 mock 数据，可摆脱后端束缚独立开发',
+    '支持 gzip / brotli 优化项目体积，提高加载速度',
+    '结合 IDE 插件、ESlint 、stylelint 、Git 钩子，轻松实现团队代码规范',
+  ],
 })
 
 const fantasticAdminInfo = ref({
-    imageVisible: false,
-    index: 0,
-    data: [
-        'https://hooray.gitee.io/fantastic-admin/preview1.png',
-        'https://hooray.gitee.io/fantastic-admin/preview2.png',
-        'https://hooray.gitee.io/fantastic-admin/preview3.png',
-        'https://hooray.gitee.io/fantastic-admin/preview4.png',
-        'https://hooray.gitee.io/fantastic-admin/preview5.png',
-        'https://hooray.gitee.io/fantastic-admin/preview6.png'
-    ]
+  imageVisible: false,
+  index: 0,
+  data: [
+    'https://hooray.gitee.io/fantastic-admin/preview1.png',
+    'https://hooray.gitee.io/fantastic-admin/preview2.png',
+    'https://hooray.gitee.io/fantastic-admin/preview3.png',
+    'https://hooray.gitee.io/fantastic-admin/preview4.png',
+    'https://hooray.gitee.io/fantastic-admin/preview5.png',
+    'https://hooray.gitee.io/fantastic-admin/preview6.png',
+  ],
 })
 
 const oneStepAdminInfo = ref({
-    imageVisible: false,
-    index: 0,
-    data: [
-        'https://hooray.gitee.io/one-step-admin/preview1.png',
-        'https://hooray.gitee.io/one-step-admin/preview2.png',
-        'https://hooray.gitee.io/one-step-admin/preview3.png',
-        'https://hooray.gitee.io/one-step-admin/preview4.png',
-        'https://hooray.gitee.io/one-step-admin/preview5.png',
-        'https://hooray.gitee.io/one-step-admin/preview6.png'
-    ]
+  imageVisible: false,
+  index: 0,
+  data: [
+    'https://hooray.gitee.io/one-step-admin/preview1.png',
+    'https://hooray.gitee.io/one-step-admin/preview2.png',
+    'https://hooray.gitee.io/one-step-admin/preview3.png',
+    'https://hooray.gitee.io/one-step-admin/preview4.png',
+    'https://hooray.gitee.io/one-step-admin/preview5.png',
+    'https://hooray.gitee.io/one-step-admin/preview6.png',
+  ],
 })
 </script>
 
 <template>
-    <div>
-        <page-header title="欢迎使用 Fantastic-admin（基础版）">
-            <template #content>
-                <div>
-                    <div style="margin-bottom: 5px;">这是一款<b class="text-emphasis">开箱即用</b>的中后台框架，同时它也经历过数十个真实项目的技术沉淀，确保框架在开发中可落地、可使用、可维护</div>
-                    <div>注：在作者就职的公司，本框架已在电商、直播、OA、ERP等多个不同领域的中后台系统中应用并稳定运行</div>
-                </div>
-            </template>
-            <el-button-group style="margin-right: 10px;">
-                <el-button type="success" size="large" plain @click="open('https://hooray.gitee.io/fantastic-admin/')">开发文档</el-button>
-                <el-dropdown>
-                    <el-button type="primary" size="large">
-                        代码仓库
-                        <el-icon class="el-icon--right">
-                            <svg-icon name="ep:arrow-down" />
-                        </el-icon>
-                    </el-button>
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <el-dropdown-item @click="open('https://gitee.com/hooray/fantastic-admin')">Gitee</el-dropdown-item>
-                            <el-dropdown-item @click="open('https://github.com/hooray/fantastic-admin')">Github</el-dropdown-item>
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
-            </el-button-group>
-        </page-header>
-        <el-row :gutter="20" style="margin: 0 10px;">
-            <el-col :lg="8">
-                <page-main style="margin: 0;">
-                    <div class="ecology vue">
-                        <div class="main">
-                            <img src="https://cn.vuejs.org/logo.svg" style="width: 30%;">
-                            <h1>Fantastic-startkit</h1>
-                            <h2>一款开箱即用的 Vue 项目启动套件</h2>
-                            <div>
-                                <el-button type="primary" plain @click="open('https://hooray.gitee.io/fantastic-startkit/')">
-                                    <template #icon>
-                                        <el-icon>
-                                            <svg-icon name="ep:link" />
-                                        </el-icon>
-                                    </template>
-                                    访问官网
-                                </el-button>
-                                <el-button plain @click="open('https://hooray.github.io/fantastic-startkit/')">
-                                    <template #icon>
-                                        <el-icon>
-                                            <svg-icon name="ep:link" />
-                                        </el-icon>
-                                    </template>
-                                    备用地址
-                                </el-button>
-                            </div>
-                        </div>
-                        <el-divider border-style="dashed" />
-                        <ul>
-                            <li v-for="item in fantasticStartkitInfo.feature" :key="item">{{ item }}</li>
-                        </ul>
-                    </div>
-                </page-main>
-            </el-col>
-            <el-col :lg="8">
-                <page-main style="margin: 0;">
-                    <div class="ecology fa">
-                        <div class="main">
-                            <img src="https://hooray.gitee.io/fantastic-admin/logo.png" style="width: 30%;">
-                            <h1>Fantastic-admin</h1>
-                            <h2>一款开箱即用的 Vue 中后台管理系统框架</h2>
-                            <div>
-                                <el-button type="primary" plain @click="open('https://hooray.gitee.io/fantastic-admin/')">
-                                    <template #icon>
-                                        <el-icon>
-                                            <svg-icon name="ep:link" />
-                                        </el-icon>
-                                    </template>
-                                    访问官网
-                                </el-button>
-                                <el-button plain @click="open('https://hooray.github.io/fantastic-admin/')">
-                                    <template #icon>
-                                        <el-icon>
-                                            <svg-icon name="ep:link" />
-                                        </el-icon>
-                                    </template>
-                                    备用地址
-                                </el-button>
-                            </div>
-                        </div>
-                        <el-divider border-style="dashed" />
-                        <el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
-                            <el-carousel-item v-for="(item, index) in fantasticAdminInfo.data" :key="item">
-                                <el-image :src="item" fit="cover" style="cursor: pointer; width: 100%; height: 250px; margin: auto;" @click="fantasticAdminInfo.imageVisible = true; fantasticAdminInfo.index = index" />
-                            </el-carousel-item>
-                        </el-carousel>
-                        <el-image-viewer v-if="fantasticAdminInfo.imageVisible" :url-list="fantasticAdminInfo.data" :initial-index="fantasticAdminInfo.index" @close="fantasticAdminInfo.imageVisible = false" />
-                    </div>
-                </page-main>
-            </el-col>
-            <el-col :lg="8">
-                <page-main style="margin: 0;">
-                    <div class="ecology osa">
-                        <div class="main">
-                            <img src="https://hooray.gitee.io/one-step-admin/logo.png" style="width: 30%;">
-                            <h1>One-step-admin</h1>
-                            <h2>一款干啥都快人一步的 Vue 中后台系统框架</h2>
-                            <div>
-                                <el-button type="primary" plain @click="open('https://hooray.gitee.io/one-step-admin/')">
-                                    <template #icon>
-                                        <el-icon>
-                                            <svg-icon name="ep:link" />
-                                        </el-icon>
-                                    </template>
-                                    访问官网
-                                </el-button>
-                                <el-button plain @click="open('https://hooray.github.io/one-step-admin/')">
-                                    <template #icon>
-                                        <el-icon>
-                                            <svg-icon name="ep:link" />
-                                        </el-icon>
-                                    </template>
-                                    备用地址
-                                </el-button>
-                            </div>
-                        </div>
-                        <el-divider border-style="dashed" />
-                        <el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
-                            <el-carousel-item v-for="(item, index) in oneStepAdminInfo.data" :key="item">
-                                <el-image :src="item" fit="cover" style="cursor: pointer; width: 100%; height: 250px; margin: auto;" @click="oneStepAdminInfo.imageVisible = true; oneStepAdminInfo.index = index" />
-                            </el-carousel-item>
-                        </el-carousel>
-                        <el-image-viewer v-if="oneStepAdminInfo.imageVisible" :url-list="oneStepAdminInfo.data" :initial-index="oneStepAdminInfo.index" @close="oneStepAdminInfo.imageVisible = false" />
-                    </div>
-                </page-main>
-            </el-col>
-        </el-row>
-        <page-main title="应用场景">
-            <div class="question">
-                <ol class="answer">
-                    <li><span>没有前端开发人员的小型公司。</span>据了解，有些小型公司没有前端开发人员，而这些公司在开发中后台系统的时候，直接要求后端开发人员来进行开发工作。所以借助 Vue 的易学习易上手特性，再加上本框架的加持，可以让后端开发人员能在短时间内转型成为全栈开发。</li>
-                    <li><span>前端开发人员不足的中小型公司。</span>根据招聘网站统计，几乎所有公司都缺前端，其中有很大一部分中小型公司标配只有1-2名前端开发人员，而这些公司在开发中后台系统的时候，如果能有一套现成的中后台框架系统，不仅能提高项目开发效率，同时还大大减轻前端开发人员工作压力。</li>
-                    <li><span>项目型公司。</span>特点为项目多，周期短，甲方对页面布局和主题风格有绝对话语权，而通过专业版提供的布局和主题风格，可应对绝大部分甲方需求，并且可自定义扩展主题风格的样式，实现高度定制化。</li>
-                    <li><span>产品型公司。</span>产品型公司最担心的就是产品开发中代码不可控的因素，本框架除了提供完善的开发文档和代码注释外，作者还提供一对一的技术支持，确保开发人员尽可能理解整套框架源码的方方面面，为产品保驾护航。</li>
-                    <li><span>个人开发者。</span>手里有一套可高度定制化的中后台框架，什么项目都不用担心啦~</li>
-                </ol>
+  <div>
+    <page-header title="欢迎使用 Fantastic-admin（基础版）">
+      <template #content>
+        <div>
+          <div style="margin-bottom: 5px;">
+            这是一款<b class="text-emphasis">开箱即用</b>的中后台框架，同时它也经历过数十个真实项目的技术沉淀，确保框架在开发中可落地、可使用、可维护
+          </div>
+          <div>注：在作者就职的公司，本框架已在电商、直播、OA、ERP等多个不同领域的中后台系统中应用并稳定运行</div>
+        </div>
+      </template>
+      <el-button-group style="margin-right: 10px;">
+        <el-button type="success" size="large" plain @click="open('https://hooray.gitee.io/fantastic-admin/')">
+          开发文档
+        </el-button>
+        <el-dropdown>
+          <el-button type="primary" size="large">
+            代码仓库
+            <el-icon class="el-icon--right">
+              <svg-icon name="ep:arrow-down" />
+            </el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="open('https://gitee.com/hooray/fantastic-admin')">
+                Gitee
+              </el-dropdown-item>
+              <el-dropdown-item @click="open('https://github.com/hooray/fantastic-admin')">
+                Github
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-button-group>
+    </page-header>
+    <el-row :gutter="20" style="margin: 0 10px;">
+      <el-col :lg="8">
+        <page-main style="margin: 0;">
+          <div class="ecology vue">
+            <div class="main">
+              <img src="https://cn.vuejs.org/logo.svg" style="width: 30%;">
+              <h1>Fantastic-startkit</h1>
+              <h2>一款开箱即用的 Vue 项目启动套件</h2>
+              <div>
+                <el-button type="primary" plain @click="open('https://hooray.gitee.io/fantastic-startkit/')">
+                  <template #icon>
+                    <el-icon>
+                      <svg-icon name="ep:link" />
+                    </el-icon>
+                  </template>
+                  访问官网
+                </el-button>
+                <el-button plain @click="open('https://hooray.github.io/fantastic-startkit/')">
+                  <template #icon>
+                    <el-icon>
+                      <svg-icon name="ep:link" />
+                    </el-icon>
+                  </template>
+                  备用地址
+                </el-button>
+              </div>
             </div>
+            <el-divider border-style="dashed" />
+            <ul>
+              <li v-for="item in fantasticStartkitInfo.feature" :key="item">
+                {{ item }}
+              </li>
+            </ul>
+          </div>
         </page-main>
-        <page-main title="优势">
-            <div class="question">
-                <ol class="answer">
-                    <li><span>作者拥有10年+的前后端开发经验。</span>部分框架的作者由于缺少后端开发经验，可能会在设计框架的时候，很少或者没有考虑后端的实现逻辑，导致框架在实际使用中，业务场景无法落地，开发人员得通过修改源码自行实现业务。</li>
-                    <li><span>经历过数十个真实项目的打磨。</span>没用在真实业务场景中使用过的框架都是纸飞机，哪怕它提供的演示功能特别华丽。而本框架在作者就职的公司，已经稳定应用在电商、直播、OA、CRM、ERP等多个不同领域的中后台系统中。</li>
-                    <li><span>丰富的组件库。</span>除了支持 ElementUI / Element Plus 自带的组件外，框架还扩充了部分业务组件，以及第三方插件。借助以往的项目经验，提供最佳实践方案，方便开发人员直接使用。</li>
-                    <li><span>持续更新的业务应用静态页面。</span>通过项目积累，沉淀出数十个业务应用的静态页面，做到开发人员拿来即可使用，极大提升开发效率的同时，还省去了产品和设计人员的工作。</li>
-                    <li><span>长期维护。</span>无论是免费的基础版，还是付费的专业版，均提供长期维护。区别在于基础版侧重于稳定性维护，主要在修复 bug ，不定期增加新特性；专业版侧重于新特性开发，在确保稳定的基础上，会长期深挖中后台系统框架，持续产出可落地的特性或开发规范。</li>
-                </ol>
+      </el-col>
+      <el-col :lg="8">
+        <page-main style="margin: 0;">
+          <div class="ecology fa">
+            <div class="main">
+              <img src="https://hooray.gitee.io/fantastic-admin/logo.png" style="width: 30%;">
+              <h1>Fantastic-admin</h1>
+              <h2>一款开箱即用的 Vue 中后台管理系统框架</h2>
+              <div>
+                <el-button type="primary" plain @click="open('https://hooray.gitee.io/fantastic-admin/')">
+                  <template #icon>
+                    <el-icon>
+                      <svg-icon name="ep:link" />
+                    </el-icon>
+                  </template>
+                  访问官网
+                </el-button>
+                <el-button plain @click="open('https://hooray.github.io/fantastic-admin/')">
+                  <template #icon>
+                    <el-icon>
+                      <svg-icon name="ep:link" />
+                    </el-icon>
+                  </template>
+                  备用地址
+                </el-button>
+              </div>
             </div>
+            <el-divider border-style="dashed" />
+            <el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
+              <el-carousel-item v-for="(item, index) in fantasticAdminInfo.data" :key="item">
+                <el-image :src="item" fit="cover" style="cursor: pointer; width: 100%; height: 250px; margin: auto;" @click="fantasticAdminInfo.imageVisible = true; fantasticAdminInfo.index = index" />
+              </el-carousel-item>
+            </el-carousel>
+            <el-image-viewer v-if="fantasticAdminInfo.imageVisible" :url-list="fantasticAdminInfo.data" :initial-index="fantasticAdminInfo.index" @close="fantasticAdminInfo.imageVisible = false" />
+          </div>
         </page-main>
-    </div>
+      </el-col>
+      <el-col :lg="8">
+        <page-main style="margin: 0;">
+          <div class="ecology osa">
+            <div class="main">
+              <img src="https://hooray.gitee.io/one-step-admin/logo.png" style="width: 30%;">
+              <h1>One-step-admin</h1>
+              <h2>一款干啥都快人一步的 Vue 中后台系统框架</h2>
+              <div>
+                <el-button type="primary" plain @click="open('https://hooray.gitee.io/one-step-admin/')">
+                  <template #icon>
+                    <el-icon>
+                      <svg-icon name="ep:link" />
+                    </el-icon>
+                  </template>
+                  访问官网
+                </el-button>
+                <el-button plain @click="open('https://hooray.github.io/one-step-admin/')">
+                  <template #icon>
+                    <el-icon>
+                      <svg-icon name="ep:link" />
+                    </el-icon>
+                  </template>
+                  备用地址
+                </el-button>
+              </div>
+            </div>
+            <el-divider border-style="dashed" />
+            <el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
+              <el-carousel-item v-for="(item, index) in oneStepAdminInfo.data" :key="item">
+                <el-image :src="item" fit="cover" style="cursor: pointer; width: 100%; height: 250px; margin: auto;" @click="oneStepAdminInfo.imageVisible = true; oneStepAdminInfo.index = index" />
+              </el-carousel-item>
+            </el-carousel>
+            <el-image-viewer v-if="oneStepAdminInfo.imageVisible" :url-list="oneStepAdminInfo.data" :initial-index="oneStepAdminInfo.index" @close="oneStepAdminInfo.imageVisible = false" />
+          </div>
+        </page-main>
+      </el-col>
+    </el-row>
+    <page-main title="应用场景">
+      <div class="question">
+        <ol class="answer">
+          <li><span>没有前端开发人员的小型公司。</span>据了解，有些小型公司没有前端开发人员，而这些公司在开发中后台系统的时候，直接要求后端开发人员来进行开发工作。所以借助 Vue 的易学习易上手特性，再加上本框架的加持，可以让后端开发人员能在短时间内转型成为全栈开发。</li>
+          <li><span>前端开发人员不足的中小型公司。</span>根据招聘网站统计，几乎所有公司都缺前端，其中有很大一部分中小型公司标配只有1-2名前端开发人员，而这些公司在开发中后台系统的时候，如果能有一套现成的中后台框架系统，不仅能提高项目开发效率，同时还大大减轻前端开发人员工作压力。</li>
+          <li><span>项目型公司。</span>特点为项目多，周期短，甲方对页面布局和主题风格有绝对话语权，而通过专业版提供的布局和主题风格，可应对绝大部分甲方需求，并且可自定义扩展主题风格的样式，实现高度定制化。</li>
+          <li><span>产品型公司。</span>产品型公司最担心的就是产品开发中代码不可控的因素，本框架除了提供完善的开发文档和代码注释外，作者还提供一对一的技术支持，确保开发人员尽可能理解整套框架源码的方方面面，为产品保驾护航。</li>
+          <li><span>个人开发者。</span>手里有一套可高度定制化的中后台框架，什么项目都不用担心啦~</li>
+        </ol>
+      </div>
+    </page-main>
+    <page-main title="优势">
+      <div class="question">
+        <ol class="answer">
+          <li><span>作者拥有10年+的前后端开发经验。</span>部分框架的作者由于缺少后端开发经验，可能会在设计框架的时候，很少或者没有考虑后端的实现逻辑，导致框架在实际使用中，业务场景无法落地，开发人员得通过修改源码自行实现业务。</li>
+          <li><span>经历过数十个真实项目的打磨。</span>没用在真实业务场景中使用过的框架都是纸飞机，哪怕它提供的演示功能特别华丽。而本框架在作者就职的公司，已经稳定应用在电商、直播、OA、CRM、ERP等多个不同领域的中后台系统中。</li>
+          <li><span>丰富的组件库。</span>除了支持 ElementUI / Element Plus 自带的组件外，框架还扩充了部分业务组件，以及第三方插件。借助以往的项目经验，提供最佳实践方案，方便开发人员直接使用。</li>
+          <li><span>持续更新的业务应用静态页面。</span>通过项目积累，沉淀出数十个业务应用的静态页面，做到开发人员拿来即可使用，极大提升开发效率的同时，还省去了产品和设计人员的工作。</li>
+          <li><span>长期维护。</span>无论是免费的基础版，还是付费的专业版，均提供长期维护。区别在于基础版侧重于稳定性维护，主要在修复 bug ，不定期增加新特性；专业版侧重于新特性开发，在确保稳定的基础上，会长期深挖中后台系统框架，持续产出可落地的特性或开发规范。</li>
+        </ol>
+      </div>
+    </page-main>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .text-emphasis {
-    text-emphasis-style: "❤";
+  text-emphasis-style: "❤";
 }
+
 .ecology {
-    padding: 10px 0 0;
-    &.vue {
-        h1 {
-            color: #41b883;
-        }
+  padding: 10px 0 0;
+
+  &.vue {
+    h1 {
+      color: #41b883;
     }
-    &.fa {
-        h1 {
-            color: #e60000;
-        }
+  }
+
+  &.fa {
+    h1 {
+      color: #e60000;
     }
-    &.osa {
-        h1 {
-            color: #67c23a;
-        }
+  }
+
+  &.osa {
+    h1 {
+      color: #67c23a;
     }
-    .main {
-        text-align: center;
-        img {
-            display: block;
-            margin: 0 auto;
-        }
-        h1 {
-            margin: 10px auto 0;
-            text-align: center;
-        }
-        h2 {
-            font-size: 16px;
-            font-weight: normal;
-            color: var(--el-text-color-secondary);
-            text-align: center;
-        }
+  }
+
+  .main {
+    text-align: center;
+
+    img {
+      display: block;
+      margin: 0 auto;
     }
-    .el-carousel {
-        box-shadow: var(--el-box-shadow-light);
-        transition: var(--el-transition-box-shadow);
+
+    h1 {
+      margin: 10px auto 0;
+      text-align: center;
     }
-    ul li {
-        line-height: 28px;
+
+    h2 {
+      font-size: 16px;
+      font-weight: normal;
+      color: var(--el-text-color-secondary);
+      text-align: center;
     }
+  }
+
+  .el-carousel {
+    box-shadow: var(--el-box-shadow-light);
+    transition: var(--el-transition-box-shadow);
+  }
+
+  ul li {
+    line-height: 28px;
+  }
 }
+
 .question {
-    .answer {
-        margin: 20px 0 0;
-        padding-left: 20px;
-        font-size: 16px;
-        color: var(--el-text-color-secondary);
-        li {
-            margin-bottom: 10px;
-            line-height: 1.5;
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
-        span {
-            color: var(--el-text-color-primary);
-            font-weight: bold;
-        }
+  .answer {
+    margin: 20px 0 0;
+    padding-left: 20px;
+    font-size: 16px;
+    color: var(--el-text-color-secondary);
+
+    li {
+      margin-bottom: 10px;
+      line-height: 1.5;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
+
+    span {
+      color: var(--el-text-color-primary);
+      font-weight: bold;
+    }
+  }
 }
 </style>
diff --git a/src/views/jsx_example/components/JsxComp/index.vue b/src/views/jsx_example/components/JsxComp/index.vue
index 5ea360b6..08ed2c4a 100644
--- a/src/views/jsx_example/components/JsxComp/index.vue
+++ b/src/views/jsx_example/components/JsxComp/index.vue
@@ -1,20 +1,21 @@
-<script lang="jsx">
+<script lang="tsx">
 export default defineComponent({
-    name: 'JsxComp',
-    setup() {
-        return () => <div class="test">
-            这是一个用<span>JSX</span>编写的SFC组件。
-        </div>
-    }
+  name: 'JsxComp',
+  setup() {
+    return () => <div className="test">
+      这是一个用<span>JSX</span>编写的SFC组件。
+    </div>
+  },
 })
 </script>
 
 <style lang="scss" scoped>
 .test {
-    font-size: 24px;
-    span {
-        font-weight: bold;
-        color: #f00;
-    }
+  font-size: 24px;
+
+  span {
+    font-weight: bold;
+    color: #f00;
+  }
 }
 </style>
diff --git a/src/views/jsx_example/index.jsx b/src/views/jsx_example/index.jsx
deleted file mode 100644
index 3ee4218f..00000000
--- a/src/views/jsx_example/index.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import styles from './index.module.scss'
-import JsxComp from './components/JsxComp/index.vue'
-
-export default defineComponent({
-    name: 'JsxExample',
-    render() {
-        const iconsArr = ref([
-            'sidebar-jsx',
-            'sidebar-element'
-        ])
-        const icons = (
-            iconsArr.value.map(v => {
-                return (
-                    <el-icon class={styles['example-icon']}>
-                        <svg-icon name={v} />
-                    </el-icon>
-                )
-            })
-        )
-
-        let count = ref(0)
-        function onPlus(v = 1) {
-            count.value += v
-        }
-        const html = '<p>这是<i>一段</i><b>HTML</b>代码</p>'
-        const html2 = <p>
-        这也是<i>一段</i><b>HTML</b>代码
-        </p>
-
-        return <div>
-            <page-header title="JSX" content="请查看本页面源码，更多 JSX 介绍请访问官网文档。" />
-            <page-main>
-                <p>这是两个 Svg Icon 图标</p>
-                {icons}
-                <el-divider />
-                <div class={styles.test1}>
-                    <div class={styles.a}></div>
-                </div>
-                <div class={styles.test2}>
-                    <div class={styles.a}></div>
-                </div>
-                <el-divider />
-                <el-button onClick={() => onPlus(10)}>点我：{ count.value }</el-button>
-                <div v-html={html}></div>
-                {html2}
-                <el-divider />
-                <JsxComp />
-            </page-main>
-        </div>
-    }
-})
diff --git a/src/views/jsx_example/index.module.scss b/src/views/jsx_example/index.module.scss
index 529deba5..e954ed28 100644
--- a/src/views/jsx_example/index.module.scss
+++ b/src/views/jsx_example/index.module.scss
@@ -1,19 +1,23 @@
 .example-icon {
-    font-size: 48px;
+  font-size: 48px;
 }
+
 .test1 {
-    font-size: 24px;
-    .a {
-        width: 100px;
-        height: 100px;
-        background-color: #000;
-    }
+  font-size: 24px;
+
+  .a {
+    width: 100px;
+    height: 100px;
+    background-color: #000;
+  }
 }
+
 .test2 {
-    font-size: 24px;
-    .a {
-        width: 100px;
-        height: 100px;
-        background-color: #ff0;
-    }
+  font-size: 24px;
+
+  .a {
+    width: 100px;
+    height: 100px;
+    background-color: #ff0;
+  }
 }
diff --git a/src/views/jsx_example/index.tsx b/src/views/jsx_example/index.tsx
new file mode 100644
index 00000000..905a923b
--- /dev/null
+++ b/src/views/jsx_example/index.tsx
@@ -0,0 +1,51 @@
+import styles from './index.module.scss'
+import JsxComp from './components/JsxComp/index.vue'
+
+export default defineComponent({
+  name: 'JsxExample',
+  render() {
+    const iconsArr = ref([
+      'sidebar-jsx',
+      'ep:element-plus',
+    ])
+    const icons = (
+      iconsArr.value.map((v) => {
+        return (
+          <el-icon key={v} class={styles['example-icon']}>
+            <svg-icon name={v} />
+          </el-icon>
+        )
+      })
+    )
+
+    const count = ref(0)
+    function onPlus(v = 1) {
+      count.value += v
+    }
+    const html = '<p>这是<i>一段</i><b>HTML</b>代码</p>'
+    const html2 = <p>
+      这也是<i>一段</i><b>HTML</b>代码
+    </p>
+
+    return <div>
+      <page-header title="JSX" content="请查看本页面源码，更多 JSX 介绍请访问官网文档。" />
+      <page-main>
+        <p>这是两个 Svg Icon 图标</p>
+        {icons}
+        <el-divider />
+        <div className={styles.test1}>
+          <div className={styles.a}></div>
+        </div>
+        <div className={styles.test2}>
+          <div className={styles.a}></div>
+        </div>
+        <el-divider />
+        <el-button onClick={() => onPlus(10)}>点我：{ count.value }</el-button>
+        <div v-html={html}></div>
+        {html2}
+        <el-divider />
+        <JsxComp />
+      </page-main>
+    </div>
+  },
+})
diff --git a/src/views/keep_alive_example/detail.vue b/src/views/keep_alive_example/detail.vue
index 07805d2f..a954c718 100644
--- a/src/views/keep_alive_example/detail.vue
+++ b/src/views/keep_alive_example/detail.vue
@@ -1,13 +1,12 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
 <template>
-    <page-main>
-        <el-button @click="$router.go(-1)">返回</el-button>
-    </page-main>
+  <page-main>
+    <el-button @click="$router.go(-1)">
+      返回
+    </el-button>
+  </page-main>
 </template>
diff --git a/src/views/keep_alive_example/nested/nested.vue b/src/views/keep_alive_example/nested/nested.vue
index 28717362..6bb0a2a4 100644
--- a/src/views/keep_alive_example/nested/nested.vue
+++ b/src/views/keep_alive_example/nested/nested.vue
@@ -1,25 +1,22 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script setup name="TabExampleNested1">
+<script lang="ts" setup name="TabExampleNested1">
 import useKeepAliveStore from '@/store/modules/keepAlive'
 const keepAliveStore = useKeepAliveStore()
 </script>
 
 <template>
-    <div>
-        <page-main>
-            <div>层级：1</div>
-            <router-view v-slot="{ Component }">
-                <keep-alive :include="keepAliveStore.list">
-                    <component :is="Component" />
-                </keep-alive>
-            </router-view>
-        </page-main>
-    </div>
+  <div>
+    <page-main>
+      <div>层级：1</div>
+      <router-view v-slot="{ Component }">
+        <keep-alive :include="keepAliveStore.list">
+          <component :is="Component" />
+        </keep-alive>
+      </router-view>
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/keep_alive_example/nested/nested/nested.vue b/src/views/keep_alive_example/nested/nested/nested.vue
index d5266909..530f7594 100644
--- a/src/views/keep_alive_example/nested/nested/nested.vue
+++ b/src/views/keep_alive_example/nested/nested/nested.vue
@@ -1,25 +1,22 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script setup name="TabExampleNested2">
+<script lang="ts" setup name="TabExampleNested2">
 import useKeepAliveStore from '@/store/modules/keepAlive'
 const keepAliveStore = useKeepAliveStore()
 </script>
 
 <template>
-    <div>
-        <page-main>
-            <div>层级：1-1</div>
-            <router-view v-slot="{ Component }">
-                <keep-alive :include="keepAliveStore.list">
-                    <component :is="Component" />
-                </keep-alive>
-            </router-view>
-        </page-main>
-    </div>
+  <div>
+    <page-main>
+      <div>层级：1-1</div>
+      <router-view v-slot="{ Component }">
+        <keep-alive :include="keepAliveStore.list">
+          <component :is="Component" />
+        </keep-alive>
+      </router-view>
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/keep_alive_example/nested/nested/nested/index.vue b/src/views/keep_alive_example/nested/nested/nested/index.vue
index 842c3d70..543306d1 100644
--- a/src/views/keep_alive_example/nested/nested/nested/index.vue
+++ b/src/views/keep_alive_example/nested/nested/nested/index.vue
@@ -1,27 +1,17 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
-export default {
-    name: 'TabExampleNestedTest',
-    data() {
-        return {
-            val: ''
-        }
-    }
-}
+<script lang="ts" setup name="TabExampleNestedTest">
+const val = ref('')
 </script>
 
 <template>
-    <div>
-        <page-main>
-            <div>层级 1-1-1</div>
-            <el-input v-model="val" />
-        </page-main>
-    </div>
+  <div>
+    <page-main>
+      <div>层级 1-1-1</div>
+      <el-input v-model="val" />
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/keep_alive_example/nested/nested/nested/index2.vue b/src/views/keep_alive_example/nested/nested/nested/index2.vue
index 1d6fdd8f..dbbc55e6 100644
--- a/src/views/keep_alive_example/nested/nested/nested/index2.vue
+++ b/src/views/keep_alive_example/nested/nested/nested/index2.vue
@@ -1,27 +1,17 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script>
-export default {
-    name: 'TabExampleNestedTest2',
-    data() {
-        return {
-            val: ''
-        }
-    }
-}
+<script lang="ts" setup name="TabExampleNestedTest2">
+const val = ref('')
 </script>
 
 <template>
-    <div>
-        <page-main>
-            <div>层级 1-1-2</div>
-            <el-input v-model="val" />
-        </page-main>
-    </div>
+  <div>
+    <page-main>
+      <div>层级 1-1-2</div>
+      <el-input v-model="val" />
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/keep_alive_example/page.vue b/src/views/keep_alive_example/page.vue
index 958dd010..bc72dafe 100644
--- a/src/views/keep_alive_example/page.vue
+++ b/src/views/keep_alive_example/page.vue
@@ -1,68 +1,71 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script setup name="KeepAliveExamplePage">
-import useKeepAliveStore from '@/store/modules/keepAlive'
+<script lang="ts" setup name="KeepAliveExamplePage">
 import { onBeforeRouteLeave } from 'vue-router'
+import useKeepAliveStore from '@/store/modules/keepAlive'
 
 const router = useRouter()
+
 const keepAliveStore = useKeepAliveStore()
 
 const openKeepAlive = ref(false)
 const num = ref(1)
 
-function go(type) {
-    let routerName
-    switch (type) {
-        case 1: routerName = 'keepAliveExampleDetail'; break
-        case 2: routerName = 'keepAliveExampleNestedDetail'; break
-    }
-    router.push({
-        name: routerName
-    })
+function go(type: number) {
+  let routerName
+  switch (type) {
+    case 1: routerName = 'keepAliveExampleDetail'; break
+    case 2: routerName = 'keepAliveExampleNestedDetail'; break
+  }
+  router.push({
+    name: routerName,
+  })
 }
 
 onBeforeRouteLeave((to, from) => {
-    const componentName = from.matched[to.matched.length - 1].components.default.name
-    if (openKeepAlive.value) {
-        // 因为并不是所有的路由跳转都需要将当前页面进行缓存，例如最常见的情况，从列表页进入详情页，则需要将列表页缓存，而从列表页跳转到其它页面，则不需要将列表页缓存
-        // 所以下面的代码意思就是，如果目标路由的 name 是 keepAliveExampleDetail 或者 keepAliveExampleNestedDetail ，则将当前页面组件的 name 添加进 keep-alive 中，否则则删除
-        if (['keepAliveExampleDetail', 'keepAliveExampleNestedDetail'].includes(to.name)) {
-            keepAliveStore.add(componentName)
-        } else {
-            keepAliveStore.remove(componentName)
-        }
-    } else {
-        keepAliveStore.remove(componentName)
-    }
+  const componentName = from.matched.at(-1)?.components?.default.name
+  if (openKeepAlive.value) {
+    // 因为并不是所有的路由跳转都需要将当前页面进行缓存，例如最常见的情况，从列表页进入详情页，则需要将列表页缓存，而从列表页跳转到其它页面，则不需要将列表页缓存
+    // 所以下面的代码意思就是，如果目标路由的 name 是 keepAliveExampleDetail 或者 keepAliveExampleNestedDetail ，则将当前页面组件的 name 添加进 keep-alive 中，否则则删除
+    if (['keepAliveExampleDetail', 'keepAliveExampleNestedDetail'].includes(to.name as string))
+      componentName && keepAliveStore.add(componentName)
+
+    else
+      componentName && keepAliveStore.remove(componentName)
+  }
+  else {
+    componentName && keepAliveStore.remove(componentName)
+  }
 })
 </script>
 
 <template>
-    <div>
-        <page-header title="页面缓存" content="除了可以在路由里配置页面是否需要缓存外，你也可以不使用框架提供的方法，而是在页面里自行实现。" />
-        <page-main>
-            <div class="block">
-                <el-switch v-model="openKeepAlive" active-text="开启缓存" inactive-text="关闭缓存" />
-            </div>
-            <div class="block">
-                <el-input-number v-model="num" />
-            </div>
-            <div class="block">
-                <el-button @click="go(1)">进入同级路由页面</el-button>
-                <el-button @click="go(2)">进入下级路由页面</el-button>
-            </div>
-        </page-main>
-    </div>
+  <div>
+    <page-header title="页面缓存" content="除了可以在路由里配置页面是否需要缓存外，你也可以不使用框架提供的方法，而是在页面里自行实现。" />
+    <page-main>
+      <div class="block">
+        <el-switch v-model="openKeepAlive" active-text="开启缓存" inactive-text="关闭缓存" />
+      </div>
+      <div class="block">
+        <el-input-number v-model="num" />
+      </div>
+      <div class="block">
+        <el-button @click="go(1)">
+          进入同级路由页面
+        </el-button>
+        <el-button @click="go(2)">
+          进入下级路由页面
+        </el-button>
+      </div>
+    </page-main>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .block {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 </style>
diff --git a/src/views/login.vue b/src/views/login.vue
index 96164dbd..8f636b44 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,20 +1,17 @@
-<route>
-{
-    meta: {
-        title: "登录",
-        constant: true,
-        layout: false
-    }
-}
+<route lang="yaml">
+meta:
+  title: 登录
+  constant: true
+  layout: false
 </route>
 
-<script setup name="Login">
-import useSettingsStore from '@/store/modules/settings'
+<script lang="ts" setup name="Login">
+import type { FormInstance, FormRules } from 'element-plus'
 import useUserStore from '@/store/modules/user'
 
-const route = useRoute(), router = useRouter()
+const route = useRoute()
+const router = useRouter()
 
-const settingsStore = useSettingsStore()
 const userStore = useUserStore()
 
 const banner = new URL('../assets/images/login-banner.png', import.meta.url).href
@@ -22,445 +19,496 @@ const title = import.meta.env.VITE_APP_TITLE
 
 // 表单类型，login 登录，reset 重置密码
 const formType = ref('login')
+const loading = ref(false)
+const passwordType = ref('password')
+const redirect = ref(route.query.redirect?.toString() ?? '/')
 
 // 登录
-const loginFormRef = ref()
+const loginFormRef = ref<FormInstance>()
+const loginPasswordRef = ref<HTMLElement>()
 const loginForm = ref({
-    account: localStorage.login_account || '',
-    password: '',
-    remember: !!localStorage.login_account
+  account: localStorage.login_account || '',
+  password: '',
+  remember: !!localStorage.login_account,
 })
-const loginRules = ref({
-    account: [
-        { required: true, trigger: 'blur', message: '请输入用户名' }
-    ],
-    password: [
-        { required: true, trigger: 'blur', message: '请输入密码' },
-        { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' }
-    ]
+const loginRules = ref<FormRules>({
+  account: [
+    { required: true, trigger: 'blur', message: '请输入用户名' },
+  ],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
 })
 function handleLogin() {
-    loginFormRef.value.validate(valid => {
-        if (valid) {
-            loading.value = true
-            userStore.login(loginForm.value).then(() => {
-                loading.value = false
-                if (loginForm.value.remember) {
-                    localStorage.setItem('login_account', loginForm.value.account)
-                } else {
-                    localStorage.removeItem('login_account')
-                }
-                router.push(redirect.value)
-            }).catch(() => {
-                loading.value = false
-            })
-        }
-    })
+  loginFormRef.value && loginFormRef.value.validate((valid) => {
+    if (valid) {
+      loading.value = true
+      userStore.login(loginForm.value).then(() => {
+        loading.value = false
+        if (loginForm.value.remember)
+          localStorage.setItem('login_account', loginForm.value.account)
+
+        else
+          localStorage.removeItem('login_account')
+
+        router.push(redirect.value)
+      }).catch(() => {
+        loading.value = false
+      })
+    }
+  })
 }
 
 // 注册
-const registerFormRef = ref()
+const registerFormRef = ref<FormInstance>()
+const registerPasswordRef = ref<HTMLElement>()
+const registerCheckPasswordRef = ref<HTMLElement>()
 const registerForm = ref({
-    account: '',
-    captcha: '',
-    password: '',
-    checkPassword: ''
+  account: '',
+  captcha: '',
+  password: '',
+  checkPassword: '',
 })
-const registerRules = ref({
-    account: [
-        { required: true, trigger: 'blur', message: '请输入用户名' }
-    ],
-    captcha: [
-        { required: true, trigger: 'blur', message: '请输入验证码' }
-    ],
-    password: [
-        { required: true, trigger: 'blur', message: '请输入密码' },
-        { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' }
-    ],
-    checkPassword: [
-        { required: true, trigger: 'blur', message: '请再次输入密码' },
-        { validator: (rule, value, callback) => {
-            if (value !== registerForm.password) {
-                callback(new Error('两次输入的密码不一致'))
-            } else {
-                callback()
-            }
-        } }
-    ]
+const registerRules = ref<FormRules>({
+  account: [
+    { required: true, trigger: 'blur', message: '请输入用户名' },
+  ],
+  captcha: [
+    { required: true, trigger: 'blur', message: '请输入验证码' },
+  ],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+  checkPassword: [
+    { required: true, trigger: 'blur', message: '请再次输入密码' },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== registerForm.value.password)
+          callback(new Error('两次输入的密码不一致'))
+
+        else
+          callback()
+      },
+    },
+  ],
 })
 function handleRegister() {
-    ElMessage({
-        message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
-        type: 'warning'
-    })
-    registerFormRef.value.validate(valid => {
-        if (valid) {
-            // 这里编写业务代码
-        }
-    })
+  ElMessage({
+    message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
+    type: 'warning',
+  })
+  registerFormRef.value && registerFormRef.value.validate((valid) => {
+    if (valid) {
+      // 这里编写业务代码
+    }
+  })
 }
 
 // 重置密码
-const resetFormRef = ref()
+const resetFormRef = ref<FormInstance>()
+const resetNewPasswordRef = ref<HTMLElement>()
 const resetForm = ref({
-    account: localStorage.login_account || '',
-    captcha: '',
-    newPassword: ''
+  account: localStorage.login_account || '',
+  captcha: '',
+  newPassword: '',
 })
-const resetRules = ref({
-    account: [
-        { required: true, trigger: 'blur', message: '请输入用户名' }
-    ],
-    captcha: [
-        { required: true, trigger: 'blur', message: '请输入验证码' }
-    ],
-    newPassword: [
-        { required: true, trigger: 'blur', message: '请输入新密码' },
-        { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' }
-    ]
+const resetRules = ref<FormRules>({
+  account: [
+    { required: true, trigger: 'blur', message: '请输入用户名' },
+  ],
+  captcha: [
+    { required: true, trigger: 'blur', message: '请输入验证码' },
+  ],
+  newPassword: [
+    { required: true, trigger: 'blur', message: '请输入新密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
 })
 function handleReset() {
-    ElMessage({
-        message: '重置密码模块仅提供界面演示，无实际功能，需开发者自行扩展',
-        type: 'warning'
-    })
-    resetFormRef.value.validate(valid => {
-        if (valid) {
-            // 这里编写业务代码
-        }
-    })
+  ElMessage({
+    message: '重置密码模块仅提供界面演示，无实际功能，需开发者自行扩展',
+    type: 'warning',
+  })
+  resetFormRef.value && resetFormRef.value.validate((valid) => {
+    if (valid) {
+      // 这里编写业务代码
+    }
+  })
 }
 
-const loading = ref(false)
-const passwordType = ref('password')
-const redirect = ref(null)
-const passwordRef = ref()
-
-onMounted(() => {
-    redirect.value = route.query.redirect ?? '/'
-})
-
-function showPassword() {
-    passwordType.value = passwordType.value === 'password' ? '' : 'password'
-    nextTick(() => {
-        passwordRef.value.focus()
-    })
+function showPassword(passwordEl: HTMLElement | undefined) {
+  passwordType.value = passwordType.value === 'password' ? '' : 'password'
+  nextTick(() => {
+    passwordEl?.focus()
+  })
 }
 
-function testAccount(account) {
-    loginForm.value.account = account
-    loginForm.value.password = '123456'
-    handleLogin()
+function testAccount(account: string) {
+  loginForm.value.account = account
+  loginForm.value.password = '123456'
+  handleLogin()
 }
 </script>
 
 <template>
-    <div>
-        <div class="bg-banner" />
-        <div id="login-box">
-            <div class="login-banner">
-                <div class="logo" />
-                <img :src="banner" class="banner">
-            </div>
-            <el-form v-show="formType == 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on">
-                <div class="title-container">
-                    <h3 class="title">欢迎来到 {{ title }} ! 👋🏻</h3>
-                </div>
-                <div>
-                    <el-form-item prop="account">
-                        <el-input ref="name" v-model="loginForm.account" placeholder="用户名" text tabindex="1" autocomplete="on">
-                            <template #prefix>
-                                <el-icon>
-                                    <svg-icon name="user" />
-                                </el-icon>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item prop="password">
-                        <el-input ref="passwordRef" v-model="loginForm.password" :type="passwordType" placeholder="密码" tabindex="2" autocomplete="on" @keyup.enter="handleLogin">
-                            <template #prefix>
-                                <el-icon>
-                                    <svg-icon name="password" />
-                                </el-icon>
-                            </template>
-                            <template #suffix>
-                                <el-icon>
-                                    <svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'" @click="showPassword" />
-                                </el-icon>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                </div>
-                <div class="flex-bar">
-                    <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
-                    <el-link type="primary" :underline="false" @click="formType = 'reset'">忘记密码了?</el-link>
-                </div>
-                <el-button :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">登录</el-button>
-                <div class="sub-link">
-                    <span class="text">还没有帐号?</span>
-                    <el-link type="primary" :underline="false" @click="formType = 'register'">创建新帐号</el-link>
-                </div>
-                <div style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
-                    <el-divider>演示账号一键登录</el-divider>
-                    <el-button type="primary" size="small" plain @click="testAccount('admin')">admin</el-button>
-                    <el-button size="small" plain @click="testAccount('test')">test</el-button>
-                </div>
-            </el-form>
-            <el-form v-show="formType == 'register'" ref="registerFormRef" :model="registerForm" :rules="registerRules" class="login-form" auto-complete="on">
-                <div class="title-container">
-                    <h3 class="title">探索从这里开始! 🚀</h3>
-                </div>
-                <div>
-                    <el-form-item prop="account">
-                        <el-input ref="name" v-model="registerForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
-                            <template #prefix>
-                                <el-icon>
-                                    <svg-icon name="user" />
-                                </el-icon>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item prop="captcha">
-                        <el-input ref="captcha" v-model="registerForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
-                            <template #prefix>
-                                <el-icon>
-                                    <svg-icon name="captcha" />
-                                </el-icon>
-                            </template>
-                            <template #append>
-                                <el-button>发送验证码</el-button>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item prop="password">
-                        <el-input ref="passwordRef" v-model="registerForm.password" :type="passwordType" placeholder="密码" tabindex="3" autocomplete="on">
-                            <template #prefix>
-                                <el-icon>
-                                    <svg-icon name="password" />
-                                </el-icon>
-                            </template>
-                            <template #suffix>
-                                <el-icon>
-                                    <svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'" @click="showPassword" />
-                                </el-icon>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item prop="checkPassword">
-                        <el-input ref="checkPassword" v-model="registerForm.checkPassword" :type="passwordType" placeholder="确认密码" tabindex="4" autocomplete="on">
-                            <template #prefix>
-                                <el-icon>
-                                    <svg-icon name="password" />
-                                </el-icon>
-                            </template>
-                            <template #suffix>
-                                <el-icon>
-                                    <svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'" @click="showPassword" />
-                                </el-icon>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                </div>
-                <el-button :loading="loading" type="primary" size="large" style="width: 100%; margin-top: 20px;" @click.prevent="handleRegister">注册</el-button>
-                <div class="sub-link">
-                    <span class="text">已经有帐号?</span>
-                    <el-link type="primary" :underline="false" @click="formType = 'login'">去登录</el-link>
-                </div>
-            </el-form>
-            <el-form v-show="formType == 'reset'" ref="resetFormRef" :model="resetForm" :rules="resetRules" class="login-form" auto-complete="on">
-                <div class="title-container">
-                    <h3 class="title">忘记密码了? 🔒</h3>
-                </div>
-                <div>
-                    <el-form-item prop="account">
-                        <el-input ref="name" v-model="resetForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
-                            <template #prefix>
-                                <el-icon>
-                                    <svg-icon name="user" />
-                                </el-icon>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item prop="captcha">
-                        <el-input ref="captcha" v-model="resetForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
-                            <template #prefix>
-                                <el-icon>
-                                    <svg-icon name="captcha" />
-                                </el-icon>
-                            </template>
-                            <template #append>
-                                <el-button>发送验证码</el-button>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item prop="newPassword">
-                        <el-input ref="newPassword" v-model="resetForm.newPassword" :type="passwordType" placeholder="新密码" tabindex="3" autocomplete="on">
-                            <template #prefix>
-                                <el-icon>
-                                    <svg-icon name="password" />
-                                </el-icon>
-                            </template>
-                            <template #suffix>
-                                <el-icon>
-                                    <svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'" @click="showPassword" />
-                                </el-icon>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                </div>
-                <el-button :loading="loading" type="primary" size="large" style="width: 100%; margin-top: 20px;" @click.prevent="handleReset">确认</el-button>
-                <div class="sub-link">
-                    <el-link type="primary" :underline="false" @click="formType = 'login'">返回登录</el-link>
-                </div>
-            </el-form>
+  <div>
+    <div class="bg-banner" />
+    <div id="login-box">
+      <div class="login-banner">
+        <div class="logo" />
+        <img :src="banner" class="banner">
+      </div>
+      <el-form v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on">
+        <div class="title-container">
+          <h3 class="title">
+            欢迎来到 {{ title }} ! 👋🏻
+          </h3>
         </div>
-        <Copyright v-if="settingsStore.copyright.enable" />
+        <div>
+          <el-form-item prop="account">
+            <el-input ref="name" v-model="loginForm.account" placeholder="用户名" text tabindex="1" autocomplete="on">
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:user" />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input ref="loginPasswordRef" v-model="loginForm.password" :type="passwordType" placeholder="密码" tabindex="2" autocomplete="on" @keyup.enter="handleLogin">
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:lock" />
+                </el-icon>
+              </template>
+              <template #suffix>
+                <el-icon>
+                  <svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'" @click="showPassword(loginPasswordRef)" />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="flex-bar">
+          <el-checkbox v-model="loginForm.remember">
+            记住我
+          </el-checkbox>
+          <el-link type="primary" :underline="false" @click="formType = 'reset'">
+            忘记密码了?
+          </el-link>
+        </div>
+        <el-button :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
+          登录
+        </el-button>
+        <div class="sub-link">
+          <span class="text">还没有帐号?</span>
+          <el-link type="primary" :underline="false" @click="formType = 'register'">
+            创建新帐号
+          </el-link>
+        </div>
+        <div style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
+          <el-divider>演示账号一键登录</el-divider>
+          <el-button type="primary" size="small" plain @click="testAccount('admin')">
+            admin
+          </el-button>
+          <el-button size="small" plain @click="testAccount('test')">
+            test
+          </el-button>
+        </div>
+      </el-form>
+      <el-form v-show="formType === 'register'" ref="registerFormRef" :model="registerForm" :rules="registerRules" class="login-form" auto-complete="on">
+        <div class="title-container">
+          <h3 class="title">
+            探索从这里开始! 🚀
+          </h3>
+        </div>
+        <div>
+          <el-form-item prop="account">
+            <el-input ref="name" v-model="registerForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:user" />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="captcha">
+            <el-input ref="captcha" v-model="registerForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:key" />
+                </el-icon>
+              </template>
+              <template #append>
+                <el-button>发送验证码</el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input ref="registerPasswordRef" v-model="registerForm.password" :type="passwordType" placeholder="密码" tabindex="3" autocomplete="on">
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:lock" />
+                </el-icon>
+              </template>
+              <template #suffix>
+                <el-icon>
+                  <svg-icon :name="passwordType === 'password' ? 'ep:hide' : 'ep:view'" @click="showPassword(registerPasswordRef)" />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="checkPassword">
+            <el-input ref="registerCheckPasswordRef" v-model="registerForm.checkPassword" :type="passwordType" placeholder="确认密码" tabindex="4" autocomplete="on">
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:lock" />
+                </el-icon>
+              </template>
+              <template #suffix>
+                <el-icon>
+                  <svg-icon :name="passwordType === 'password' ? 'ep:hide' : 'ep:view'" @click="showPassword(registerCheckPasswordRef)" />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <el-button :loading="loading" type="primary" size="large" style="width: 100%; margin-top: 20px;" @click.prevent="handleRegister">
+          注册
+        </el-button>
+        <div class="sub-link">
+          <span class="text">已经有帐号?</span>
+          <el-link type="primary" :underline="false" @click="formType = 'login'">
+            去登录
+          </el-link>
+        </div>
+      </el-form>
+      <el-form v-show="formType === 'reset'" ref="resetFormRef" :model="resetForm" :rules="resetRules" class="login-form" auto-complete="on">
+        <div class="title-container">
+          <h3 class="title">
+            忘记密码了? 🔒
+          </h3>
+        </div>
+        <div>
+          <el-form-item prop="account">
+            <el-input ref="name" v-model="resetForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:user" />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="captcha">
+            <el-input ref="captcha" v-model="resetForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:key" />
+                </el-icon>
+              </template>
+              <template #append>
+                <el-button>发送验证码</el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="newPassword">
+            <el-input ref="resetNewPasswordRef" v-model="resetForm.newPassword" :type="passwordType" placeholder="新密码" tabindex="3" autocomplete="on">
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:lock" />
+                </el-icon>
+              </template>
+              <template #suffix>
+                <el-icon>
+                  <svg-icon :name="passwordType === 'password' ? 'ep:hide' : 'ep:view'" @click="showPassword(resetNewPasswordRef)" />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <el-button :loading="loading" type="primary" size="large" style="width: 100%; margin-top: 20px;" @click.prevent="handleReset">
+          确认
+        </el-button>
+        <div class="sub-link">
+          <el-link type="primary" :underline="false" @click="formType = 'login'">
+            返回登录
+          </el-link>
+        </div>
+      </el-form>
     </div>
+    <Copyright />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 [data-mode="mobile"] {
-    #login-box {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        top: inherit;
-        left: inherit;
-        transform: translateX(0) translateY(0);
-        flex-direction: column;
-        justify-content: start;
-        border-radius: 0;
-        box-shadow: none;
-        .login-banner {
-            width: 100%;
-            padding: 20px 0;
-            .banner {
-                position: relative;
-                right: inherit;
-                width: 100%;
-                max-width: 375px;
-                margin: 0 auto;
-                display: inherit;
-                top: inherit;
-                transform: translateY(0);
-            }
-        }
-        .login-form {
-            width: 100%;
-            min-height: auto;
-            padding: 30px;
-        }
-    }
-    .copyright {
-        position: relative;
-        bottom: 0;
-        padding-bottom: 10px;
-    }
-}
-:deep(input[type="password"]::-ms-reveal) {
-    display: none;
-}
-.bg-banner {
-    position: fixed;
-    z-index: 0;
+  #login-box {
+    position: relative;
     width: 100%;
     height: 100%;
-    background: radial-gradient(circle at center, var(--el-fill-color-lighter), var(--el-bg-color-page));
-}
-#login-box {
-    display: flex;
-    justify-content: space-between;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    background-color: var(--el-bg-color);
-    border-radius: 10px;
-    overflow: hidden;
-    box-shadow: var(--el-box-shadow);
+    top: inherit;
+    left: inherit;
+    transform: translateX(0) translateY(0);
+    flex-direction: column;
+    justify-content: start;
+    border-radius: 0;
+    box-shadow: none;
+
     .login-banner {
+      width: 100%;
+      padding: 20px 0;
+
+      .banner {
         position: relative;
-        width: 450px;
-        background-color: var(--el-fill-color-light);
-        overflow: hidden;
-        .banner {
-            width: 100%;
-            @include position-center(y);
-        }
-        .logo {
-            position: absolute;
-            top: 20px;
-            left: 20px;
-            width: 30px;
-            height: 30px;
-            border-radius: 4px;
-            background: url("../assets/images/logo.png") no-repeat;
-            background-size: contain;
-            box-shadow: var(--el-box-shadow-light);
-        }
+        right: inherit;
+        width: 100%;
+        max-width: 375px;
+        margin: 0 auto;
+        display: inherit;
+        top: inherit;
+        transform: translateY(0);
+      }
     }
+
     .login-form {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        min-height: 500px;
-        width: 500px;
-        padding: 50px;
-        overflow: hidden;
-        .title-container {
-            position: relative;
-            .title {
-                font-size: 1.3em;
-                color: var(--el-text-color-primary);
-                margin: 0 auto 30px;
-                font-weight: bold;
-            }
-        }
-    }
-    .el-form-item {
-        margin-bottom: 24px;
-        :deep(.el-input) {
-            height: 48px;
-            line-height: inherit;
-            width: 100%;
-            input {
-                height: 48px;
-            }
-            .el-input__prefix,
-            .el-input__suffix {
-                display: flex;
-                align-items: center;
-            }
-            .el-input__prefix {
-                left: 10px;
-            }
-            .el-input__suffix {
-                right: 10px;
-            }
-        }
-    }
-    .flex-bar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 20px;
-    }
-    .sub-link {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 20px;
-        font-size: 14px;
-        color: var(--el-text-color-secondary);
-        .text {
-            margin-right: 10px;
-        }
+      width: 100%;
+      min-height: auto;
+      padding: 30px;
     }
+  }
+
+  .copyright {
+    position: relative;
+    bottom: 0;
+    padding-bottom: 10px;
+  }
 }
+
+:deep(input[type="password"]::-ms-reveal) {
+  display: none;
+}
+
+.bg-banner {
+  position: fixed;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at center, var(--el-fill-color-lighter), var(--el-bg-color-page));
+}
+
+#login-box {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  background-color: var(--el-bg-color);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: var(--el-box-shadow);
+
+  .login-banner {
+    position: relative;
+    width: 450px;
+    background-color: var(--el-fill-color-light);
+    overflow: hidden;
+
+    .banner {
+      width: 100%;
+
+      @include position-center(y);
+    }
+
+    .logo {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      width: 30px;
+      height: 30px;
+      border-radius: 4px;
+      background: url("../assets/images/logo.png") no-repeat;
+      background-size: contain;
+      box-shadow: var(--el-box-shadow-light);
+    }
+  }
+
+  .login-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 500px;
+    width: 500px;
+    padding: 50px;
+    overflow: hidden;
+
+    .title-container {
+      position: relative;
+
+      .title {
+        font-size: 1.3em;
+        color: var(--el-text-color-primary);
+        margin: 0 auto 30px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .el-form-item {
+    margin-bottom: 24px;
+
+    :deep(.el-input) {
+      height: 48px;
+      line-height: inherit;
+      width: 100%;
+
+      input {
+        height: 48px;
+      }
+
+      .el-input__prefix,
+      .el-input__suffix {
+        display: flex;
+        align-items: center;
+      }
+
+      .el-input__prefix {
+        left: 10px;
+      }
+
+      .el-input__suffix {
+        right: 10px;
+      }
+    }
+  }
+
+  .flex-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+
+  .sub-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+    font-size: 14px;
+    color: var(--el-text-color-secondary);
+
+    .text {
+      margin-right: 10px;
+    }
+  }
+}
+
 .copyright {
-    position: absolute;
-    bottom: 30px;
-    width: 100%;
-    margin: 0;
+  position: absolute;
+  bottom: 30px;
+  width: 100%;
+  margin: 0;
 }
 </style>
diff --git a/src/views/mock_example/index.vue b/src/views/mock_example/index.vue
index ff029942..e6c6d0db 100644
--- a/src/views/mock_example/index.vue
+++ b/src/views/mock_example/index.vue
@@ -1,44 +1,43 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script setup>
+<script lang="ts" setup>
 import useUserStore from '@/store/modules/user'
 const userStore = useUserStore()
 
 function getPermission() {
-    userStore.getPermissions().then(res => {
-        ElNotification({
-            title: '当前用户权限',
-            dangerouslyUseHTMLString: true,
-            message: res.map(p => `<p>${p}</p>`).join('')
-        })
+  userStore.getPermissions().then((res) => {
+    ElNotification({
+      title: '当前用户权限',
+      dangerouslyUseHTMLString: true,
+      message: res.map(p => `<p>${p}</p>`).join(''),
     })
+  })
 }
 
-function open(url) {
-    window.open(url, 'top')
+function open(url: string) {
+  window.open(url, 'top')
 }
 </script>
 
 <template>
-    <div>
-        <page-header title="Mock" content="通过拦截 Ajax 请求，返回模拟的响应数据，可以让前端工程师独立于后端进行开发，本演示站的登录和权限获取就是通过 mock 实现的。更多 Mock 语法规则请查询官方文档">
-            <el-button @click="open('http://mockjs.com/')">
-                <template #icon>
-                    <el-icon>
-                        <svg-icon name="ep:link" />
-                    </el-icon>
-                </template>
-                Mock.js 官网
-            </el-button>
-        </page-header>
-        <page-main>
-            <el-button @click="getPermission">测试：获取用户权限</el-button>
-        </page-main>
-    </div>
+  <div>
+    <page-header title="Mock" content="通过拦截 Ajax 请求，返回模拟的响应数据，可以让前端工程师独立于后端进行开发，本演示站的登录和权限获取就是通过 mock 实现的。更多 Mock 语法规则请查询官方文档">
+      <el-button @click="open('http://mockjs.com/')">
+        <template #icon>
+          <el-icon>
+            <svg-icon name="i-ep:link" />
+          </el-icon>
+        </template>
+        Mock.js 官网
+      </el-button>
+    </page-header>
+    <page-main>
+      <el-button @click="getPermission">
+        测试：获取用户权限
+      </el-button>
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/multilevel_menu_example/level2/level3/page1.vue b/src/views/multilevel_menu_example/level2/level3/page1.vue
index a8c02465..22356834 100644
--- a/src/views/multilevel_menu_example/level2/level3/page1.vue
+++ b/src/views/multilevel_menu_example/level2/level3/page1.vue
@@ -1,15 +1,12 @@
-<route>
-{
-    meta: {
-        title: '导航2-2-1'
-    }
-}
+<route lang="yaml">
+meta:
+  title: 导航2-2-1
 </route>
 
 <template>
-    <div>
-        <page-main>
-            多级导航2-2-1
-        </page-main>
-    </div>
+  <div>
+    <page-main>
+      多级导航2-2-1
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/multilevel_menu_example/level2/level3/page2.vue b/src/views/multilevel_menu_example/level2/level3/page2.vue
index 948df997..451294c0 100644
--- a/src/views/multilevel_menu_example/level2/level3/page2.vue
+++ b/src/views/multilevel_menu_example/level2/level3/page2.vue
@@ -1,15 +1,12 @@
-<route>
-{
-    meta: {
-        title: '导航2-2-2'
-    }
-}
+<route lang="yaml">
+meta:
+  title: 导航2-2-2
 </route>
 
 <template>
-    <div>
-        <page-main>
-            多级导航2-2-2
-        </page-main>
-    </div>
+  <div>
+    <page-main>
+      多级导航2-2-2
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/multilevel_menu_example/level2/page.vue b/src/views/multilevel_menu_example/level2/page.vue
index 3800c048..c092eeae 100644
--- a/src/views/multilevel_menu_example/level2/page.vue
+++ b/src/views/multilevel_menu_example/level2/page.vue
@@ -1,15 +1,12 @@
-<route>
-{
-    meta: {
-        title: '导航2-1'
-    }
-}
+<route lang="yaml">
+meta:
+  title: 导航2-1
 </route>
 
 <template>
-    <div>
-        <page-main>
-            多级导航2-1
-        </page-main>
-    </div>
+  <div>
+    <page-main>
+      多级导航2-1
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/multilevel_menu_example/page.vue b/src/views/multilevel_menu_example/page.vue
index a80ce220..59c83ade 100644
--- a/src/views/multilevel_menu_example/page.vue
+++ b/src/views/multilevel_menu_example/page.vue
@@ -1,15 +1,12 @@
-<route>
-{
-    meta: {
-        title: '导航1'
-    }
-}
+<route lang="yaml">
+meta:
+  title: 导航1
 </route>
 
 <template>
-    <div>
-        <page-main>
-            多级导航1
-        </page-main>
-    </div>
+  <div>
+    <page-main>
+      多级导航1
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/permission_example/index.vue b/src/views/permission_example/index.vue
index d84e9dca..40235c5e 100644
--- a/src/views/permission_example/index.vue
+++ b/src/views/permission_example/index.vue
@@ -1,118 +1,132 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
-<script setup>
+<script lang="ts" setup>
 import useSettingsStore from '@/store/modules/settings'
 import useUserStore from '@/store/modules/user'
-import { useAuth } from '@/utils/composables'
 
+const { auth, authAll } = useAuth()
 const settingsStore = useSettingsStore()
 const userStore = useUserStore()
-const { auth, authAll } = useAuth()
 
-function accountChange(val) {
-    ElLoading.service({
-        lock: true,
-        text: '帐号切换中',
-        background: 'rgba(0, 0, 0, 0.7)'
-    })
-    userStore.login({
-        account: val,
-        password: ''
-    }).then(() => {
-        setTimeout(() => {
-            location.reload()
-        }, 1000)
-    })
+function accountChange(val: any) {
+  ElLoading.service({
+    lock: true,
+    text: '帐号切换中',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
+  userStore.login({
+    account: val,
+    password: '',
+  }).then(() => {
+    setTimeout(() => {
+      location.reload()
+    }, 1000)
+  })
 }
-function permissionCheck(permissions) {
-    if (auth(permissions)) {
-        ElMessage.success('校验通过')
-    } else {
-        ElMessage.error('校验不通过')
-    }
+function permissionCheck(permissions: string | string[]) {
+  if (auth(permissions))
+    ElMessage.success('校验通过')
+
+  else
+    ElMessage.error('校验不通过')
 }
-function permissionCheck2(permissions) {
-    if (authAll(permissions)) {
-        ElMessage.success('校验通过')
-    } else {
-        ElMessage.error('校验不通过')
-    }
+function permissionCheck2(permissions: string[]) {
+  if (authAll(permissions))
+    ElMessage.success('校验通过')
+
+  else
+    ElMessage.error('校验不通过')
 }
 </script>
 
 <template>
-    <div>
-        <page-header title="权限验证" />
-        <page-main>
-            <div v-if="!settingsStore.app.enablePermission">请到 seeting.js 里打开权限功能，再进入该页面查看演示</div>
-            <div v-else>
-                <h3>切换帐号</h3>
-                <el-radio-group v-model="userStore.account" @change="accountChange">
-                    <el-radio-button label="admin" />
-                    <el-radio-button label="test" />
-                </el-radio-group>
-                <h3>帐号权限</h3>
-                <div>{{ userStore.permissions }}</div>
-                <h3>鉴权组件（请对照代码查看）</h3>
-                <div>
-                    <Auth value="permission.browse" style="margin-bottom: 10px;">
-                        <el-tag>你有 permission.browse 权限</el-tag>
-                        <template #no-auth>
-                            <el-tag type="danger">你没有 permission.browse 权限</el-tag>
-                        </template>
-                    </Auth>
-                    <Auth value="permission.create" style="margin-bottom: 10px;">
-                        <el-tag>你有 permission.create 权限</el-tag>
-                        <template #no-auth>
-                            <el-tag type="danger">你没有 permission.create 权限</el-tag>
-                        </template>
-                    </Auth>
-                    <Auth :value="['permission.browse', 'permission.create']" style="margin-bottom: 10px;">
-                        <el-tag>你有 permission.browse 或 permission.create 权限</el-tag>
-                        <template #no-auth>
-                            <el-tag type="danger">你没有 permission.browse 或 permission.create 权限</el-tag>
-                        </template>
-                    </Auth>
-                    <AuthAll :value="['permission.browse', 'permission.create']">
-                        <el-tag>你有 permission.browse 和 permission.create 权限</el-tag>
-                        <template #no-auth>
-                            <el-tag type="danger">你没有 permission.browse 和 permission.create 权限</el-tag>
-                        </template>
-                    </AuthAll>
-                </div>
-                <h3>鉴权指令（请对照代码查看）</h3>
-                <div>
-                    <div v-auth="'permission.browse'">
-                        如果你有 permission.browse 权限则能看到这句话
-                    </div>
-                    <div v-auth="'permission.create'">
-                        如果你有 permission.create 权限则能看到这句话
-                    </div>
-                    <div v-auth="['permission.browse', 'permission.create']">
-                        如果你有 permission.browse 或 permission.create 权限则能看到这句话
-                    </div>
-                    <div v-auth-all="['permission.browse', 'permission.create']">
-                        如果你有 permission.browse 和 permission.create 权限则能看到这句话
-                    </div>
-                </div>
-                <h3>鉴权函数（请对照代码查看）</h3>
-                <div>
-                    <el-button-group style="display: block; margin-bottom: 10px;">
-                        <el-button @click="permissionCheck('permission.browse')">校验 permission.browse 权限</el-button>
-                        <el-button @click="permissionCheck('permission.create')">校验 permission.create 权限</el-button>
-                    </el-button-group>
-                    <el-button-group>
-                        <el-button @click="permissionCheck(['permission.browse', 'permission.create'])">校验 permission.browse 或 permission.create 权限</el-button>
-                        <el-button @click="permissionCheck2(['permission.browse', 'permission.create'])">校验 permission.browse 和 permission.create 权限</el-button>
-                    </el-button-group>
-                </div>
-            </div>
-        </page-main>
-    </div>
+  <div>
+    <page-header title="权限验证" />
+    <page-main>
+      <div v-if="!settingsStore.app.enablePermission">
+        请到 seeting.js 里打开权限功能，再进入该页面查看演示
+      </div>
+      <div v-else>
+        <h3>切换帐号</h3>
+        <el-radio-group v-model="userStore.account" @change="accountChange">
+          <el-radio-button label="admin" />
+          <el-radio-button label="test" />
+        </el-radio-group>
+        <h3>帐号权限</h3>
+        <div>{{ userStore.permissions }}</div>
+        <h3>鉴权组件（请对照代码查看）</h3>
+        <div>
+          <Auth value="permission.browse" style="margin-bottom: 10px;">
+            <el-tag>你有 permission.browse 权限</el-tag>
+            <template #no-auth>
+              <el-tag type="danger">
+                你没有 permission.browse 权限
+              </el-tag>
+            </template>
+          </Auth>
+          <Auth value="permission.create" style="margin-bottom: 10px;">
+            <el-tag>你有 permission.create 权限</el-tag>
+            <template #no-auth>
+              <el-tag type="danger">
+                你没有 permission.create 权限
+              </el-tag>
+            </template>
+          </Auth>
+          <Auth :value="['permission.browse', 'permission.create']" style="margin-bottom: 10px;">
+            <el-tag>你有 permission.browse 或 permission.create 权限</el-tag>
+            <template #no-auth>
+              <el-tag type="danger">
+                你没有 permission.browse 或 permission.create 权限
+              </el-tag>
+            </template>
+          </Auth>
+          <AuthAll :value="['permission.browse', 'permission.create']">
+            <el-tag>你有 permission.browse 和 permission.create 权限</el-tag>
+            <template #no-auth>
+              <el-tag type="danger">
+                你没有 permission.browse 和 permission.create 权限
+              </el-tag>
+            </template>
+          </AuthAll>
+        </div>
+        <h3>鉴权指令（请对照代码查看）</h3>
+        <div>
+          <div v-auth="'permission.browse'">
+            如果你有 permission.browse 权限则能看到这句话
+          </div>
+          <div v-auth="'permission.create'">
+            如果你有 permission.create 权限则能看到这句话
+          </div>
+          <div v-auth="['permission.browse', 'permission.create']">
+            如果你有 permission.browse 或 permission.create 权限则能看到这句话
+          </div>
+          <div v-auth-all="['permission.browse', 'permission.create']">
+            如果你有 permission.browse 和 permission.create 权限则能看到这句话
+          </div>
+        </div>
+        <h3>鉴权函数（请对照代码查看）</h3>
+        <div>
+          <el-button-group style="display: block; margin-bottom: 10px;">
+            <el-button @click="permissionCheck('permission.browse')">
+              校验 permission.browse 权限
+            </el-button>
+            <el-button @click="permissionCheck('permission.create')">
+              校验 permission.create 权限
+            </el-button>
+          </el-button-group>
+          <el-button-group>
+            <el-button @click="permissionCheck(['permission.browse', 'permission.create'])">
+              校验 permission.browse 或 permission.create 权限
+            </el-button>
+            <el-button @click="permissionCheck2(['permission.browse', 'permission.create'])">
+              校验 permission.browse 和 permission.create 权限
+            </el-button>
+          </el-button-group>
+        </div>
+      </div>
+    </page-main>
+  </div>
 </template>
diff --git a/src/views/personal/edit.password.vue b/src/views/personal/edit.password.vue
index 84a95b67..57054be7 100644
--- a/src/views/personal/edit.password.vue
+++ b/src/views/personal/edit.password.vue
@@ -1,12 +1,11 @@
-<route>
-{
-    meta: {
-        title: "修改密码"
-    }
-}
+<route lang="yaml">
+name: personalEditPassword
+meta:
+  title: 修改密码
 </route>
 
-<script setup name="PersonalEditPassword">
+<script lang="ts" setup name="PersonalEditPassword">
+import type { FormInstance, FormRules } from 'element-plus'
 import useUserStore from '@/store/modules/user'
 
 const route = useRoute()
@@ -14,79 +13,81 @@ const router = useRouter()
 
 const userStore = useUserStore()
 
-const validatePassword = (rule, value, callback) => {
-    if (value !== form.value.newpassword) {
-        callback(new Error('请确认新密码'))
-    } else {
-        callback()
-    }
-}
-
-const formRef = ref()
+const formRef = ref<FormInstance>()
 const form = ref({
-    password: '',
-    newpassword: '',
-    checkpassword: ''
+  password: '',
+  newpassword: '',
+  checkpassword: '',
 })
 
-const rules = ref({
-    password: [
-        { required: true, message: '请输入原密码', trigger: 'blur' }
-    ],
-    newpassword: [
-        { required: true, message: '请输入新密码', trigger: 'blur' },
-        { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' }
-    ],
-    checkpassword: [
-        { required: true, message: '请输入新密码', trigger: 'blur' },
-        { validator: validatePassword }
-    ]
+const rules = ref<FormRules>({
+  password: [
+    { required: true, message: '请输入原密码', trigger: 'blur' },
+  ],
+  newpassword: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+  checkpassword: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    {
+      validator: (rule: any, value: any, callback: any) => {
+        if (value !== form.value.newpassword)
+          callback(new Error('请确认新密码'))
+
+        else
+          callback()
+      },
+    },
+  ],
 })
 
 function onSubmit() {
-    formRef.value.validate(valid => {
-        if (valid) {
-            userStore.editPassword(form.value).then(() => {
-                ElMessage({
-                    type: 'success',
-                    message: '模拟修改成功，请重新登录'
-                })
-                userStore.logout().then(() => {
-                    router.push({
-                        name: 'login',
-                        query: {
-                            redirect: route.fullPath
-                        }
-                    })
-                })
-            }).catch(() => {})
-        }
-    })
+  formRef.value && formRef.value.validate((valid) => {
+    if (valid) {
+      userStore.editPassword(form.value).then(() => {
+        ElMessage({
+          type: 'success',
+          message: '模拟修改成功，请重新登录',
+        })
+        userStore.logout().then(() => {
+          router.push({
+            name: 'login',
+            query: {
+              redirect: route.fullPath,
+            },
+          })
+        })
+      })
+    }
+  })
 }
 </script>
 
 <template>
-    <div>
-        <page-header title="修改密码" content="定期修改密码可以提高帐号安全性噢~" />
-        <page-main>
-            <el-row>
-                <el-col :md="24" :lg="12">
-                    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
-                        <el-form-item label="原密码" prop="password">
-                            <el-input v-model="form.password" type="password" placeholder="请输入原密码" />
-                        </el-form-item>
-                        <el-form-item label="新密码" prop="newpassword">
-                            <el-input v-model="form.newpassword" type="password" placeholder="请输入原密码" />
-                        </el-form-item>
-                        <el-form-item label="确认新密码" prop="checkpassword">
-                            <el-input v-model="form.checkpassword" type="password" placeholder="请输入原密码" />
-                        </el-form-item>
-                    </el-form>
-                </el-col>
-            </el-row>
-        </page-main>
-        <fixed-action-bar>
-            <el-button type="primary" size="large" @click="onSubmit">提交</el-button>
-        </fixed-action-bar>
-    </div>
+  <div>
+    <page-header title="修改密码" content="定期修改密码可以提高帐号安全性噢~" />
+    <page-main>
+      <el-row>
+        <el-col :md="24" :lg="12">
+          <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+            <el-form-item label="原密码" prop="password">
+              <el-input v-model="form.password" type="password" placeholder="请输入原密码" />
+            </el-form-item>
+            <el-form-item label="新密码" prop="newpassword">
+              <el-input v-model="form.newpassword" type="password" placeholder="请输入原密码" />
+            </el-form-item>
+            <el-form-item label="确认新密码" prop="checkpassword">
+              <el-input v-model="form.checkpassword" type="password" placeholder="请输入原密码" />
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </page-main>
+    <fixed-action-bar>
+      <el-button type="primary" size="large" @click="onSubmit">
+        提交
+      </el-button>
+    </fixed-action-bar>
+  </div>
 </template>
diff --git a/src/views/personal/setting.vue b/src/views/personal/setting.vue
index 989a6ec1..2da2e562 100644
--- a/src/views/personal/setting.vue
+++ b/src/views/personal/setting.vue
@@ -1,163 +1,191 @@
-<route>
-{
-    meta: {
-        title: "个人设置",
-        cache: "personal-edit.password"
-    }
-}
+<route lang="yaml">
+name: personalSetting
+meta:
+  title: 个人设置
+  cache: personal-edit.password
 </route>
 
-<script setup name="PersonalSetting">
+<script lang="ts" setup name="PersonalSetting">
+import type { UploadProps } from 'element-plus'
+
 const router = useRouter()
 
-const formRef = ref()
 const form = ref({
-    headimg: '',
-    mobile: '',
-    name: '',
-    qq: '',
-    wechat: ''
+  headimg: '',
+  mobile: '',
+  name: '',
+  qq: '',
+  wechat: '',
 })
 
-function handleSuccess(res) {
-    if (res.error == '') {
-        form.value.headimg = res.data.path
-    } else {
-        ElMessage.warning(res.error)
-    }
+const handleSuccess: UploadProps['onSuccess'] = (res) => {
+  if (res.error === '')
+    form.value.headimg = res.data.path
+
+  else
+    ElMessage.warning(res.error)
 }
-function editPassword() {
-    router.push({
-        name: 'personalEditPassword'
-    })
+const editPassword = () => {
+  router.push({
+    name: 'personalEditPassword',
+  })
 }
 </script>
 
 <template>
-    <div>
-        <page-main>
-            <el-tabs tab-position="left" style="height: 600px;">
-                <el-tab-pane label="基本设置" class="basic">
-                    <h2>基本设置</h2>
-                    <el-row :gutter="20">
-                        <el-col :span="16">
-                            <el-form ref="formRef" :model="form" label-width="120px" label-suffix="：">
-                                <el-form-item label="名 称">
-                                    <el-input v-model="form.name" placeholder="请输入你的名称" />
-                                </el-form-item>
-                                <el-form-item label="手机号">
-                                    <el-input v-model="form.mobile" placeholder="请输入你的手机号" />
-                                </el-form-item>
-                                <el-form-item label="QQ 号">
-                                    <el-input v-model="form.qq" placeholder="请输入你的 QQ 号" />
-                                </el-form-item>
-                                <el-form-item label="微信号">
-                                    <el-input v-model="form.wechat" placeholder="请输入你的微信号" />
-                                </el-form-item>
-                                <el-form-item>
-                                    <el-button type="primary">保存</el-button>
-                                </el-form-item>
-                            </el-form>
-                        </el-col>
-                        <el-col :span="8">
-                            <image-upload v-model:url="form.headimg" action="http://scrm.1daas.com/api/upload/upload" name="image" :data="{'token':'TKD628431923530324'}" notip class="headimg-upload" @on-success="handleSuccess" />
-                        </el-col>
-                    </el-row>
-                </el-tab-pane>
-                <el-tab-pane label="安全设置" class="security">
-                    <h2>安全设置</h2>
-                    <div class="setting-list">
-                        <div class="item">
-                            <div class="content">
-                                <div class="title">账户密码</div>
-                                <div class="desc">当前密码强度：强</div>
-                            </div>
-                            <div class="action">
-                                <el-button text @click="editPassword">修改</el-button>
-                            </div>
-                        </div>
-                        <div class="item">
-                            <div class="content">
-                                <div class="title">密保手机</div>
-                                <div class="desc">已绑定手机：187****3441</div>
-                            </div>
-                            <div class="action">
-                                <el-button text>修改</el-button>
-                            </div>
-                        </div>
-                        <div class="item">
-                            <div class="content">
-                                <div class="title">备用邮箱</div>
-                                <div class="desc">当前未绑定备用邮箱</div>
-                            </div>
-                            <div class="action">
-                                <el-button text>绑定</el-button>
-                            </div>
-                        </div>
-                    </div>
-                </el-tab-pane>
-            </el-tabs>
-        </page-main>
-    </div>
+  <div>
+    <page-main>
+      <el-tabs tab-position="left" style="height: 600px;">
+        <el-tab-pane label="基本设置" class="basic">
+          <h2>基本设置</h2>
+          <el-row :gutter="20">
+            <el-col :span="16">
+              <el-form ref="formRef" :model="form" label-width="120px" label-suffix="：">
+                <el-form-item label="名 称">
+                  <el-input v-model="form.name" placeholder="请输入你的名称" />
+                </el-form-item>
+                <el-form-item label="手机号">
+                  <el-input v-model="form.mobile" placeholder="请输入你的手机号" />
+                </el-form-item>
+                <el-form-item label="QQ 号">
+                  <el-input v-model="form.qq" placeholder="请输入你的 QQ 号" />
+                </el-form-item>
+                <el-form-item label="微信号">
+                  <el-input v-model="form.wechat" placeholder="请输入你的微信号" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary">
+                    保存
+                  </el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+            <el-col :span="8">
+              <image-upload v-model:url="form.headimg" action="http://scrm.1daas.com/api/upload/upload" name="image" :data="{ token: 'TKD628431923530324' }" notip class="headimg-upload" @on-success="handleSuccess" />
+            </el-col>
+          </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="安全设置" class="security">
+          <h2>安全设置</h2>
+          <div class="setting-list">
+            <div class="item">
+              <div class="content">
+                <div class="title">
+                  账户密码
+                </div>
+                <div class="desc">
+                  当前密码强度：强
+                </div>
+              </div>
+              <div class="action">
+                <el-button type="primary" text @click="editPassword">
+                  修改
+                </el-button>
+              </div>
+            </div>
+            <div class="item">
+              <div class="content">
+                <div class="title">
+                  密保手机
+                </div>
+                <div class="desc">
+                  已绑定手机：187****3441
+                </div>
+              </div>
+              <div class="action">
+                <el-button type="primary" text>
+                  修改
+                </el-button>
+              </div>
+            </div>
+            <div class="item">
+              <div class="content">
+                <div class="title">
+                  备用邮箱
+                </div>
+                <div class="desc">
+                  当前未绑定备用邮箱
+                </div>
+              </div>
+              <div class="action">
+                <el-button type="primary" text>
+                  绑定
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </page-main>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 :deep(.el-tabs) {
-    .el-tabs__header .el-tabs__nav {
-        .el-tabs__active-bar {
-            z-index: 0;
-            width: 100%;
-            background-color: var(--el-color-primary-light-9);
-            border-right: 2px solid var(--el-color-primary);
-            transition: transform 0.3s, background-color 0.3s, var(--el-transition-border);
-        }
-        .el-tabs__item {
-            text-align: left;
-            padding-right: 100px;
-        }
+  .el-tabs__header .el-tabs__nav {
+    .el-tabs__active-bar {
+      z-index: 0;
+      width: 100%;
+      background-color: var(--el-color-primary-light-9);
+      border-right: 2px solid var(--el-color-primary);
+      transition: transform 0.3s, background-color 0.3s, var(--el-transition-border);
     }
-    .el-tab-pane {
-        padding: 0 20px 0 30px;
+
+    .el-tabs__item {
+      text-align: left;
+      padding-right: 100px;
     }
+  }
+
+  .el-tab-pane {
+    padding: 0 20px 0 30px;
+  }
 }
+
 h2 {
-    margin: 0;
-    margin-bottom: 30px;
-    font-weight: normal;
+  margin: 0;
+  margin-bottom: 30px;
+  font-weight: normal;
 }
+
 .basic {
-    :deep(.headimg-upload) {
-        text-align: center;
-        .el-upload-dragger {
-            border-radius: 50%;
-        }
+  :deep(.headimg-upload) {
+    text-align: center;
+
+    .el-upload-dragger {
+      border-radius: 50%;
     }
+  }
 }
+
 .security {
-    .setting-list {
-        .item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 10px 0;
-            border-bottom: 1px solid var(--el-border-color-lighter);
-            transition: var(--el-transition-border);
-            .content {
-                .title {
-                    margin-bottom: 5px;
-                    color: var(--el-text-color-primary);
-                    transition: var(--el-transition-color);
-                }
-                .desc {
-                    font-size: 14px;
-                    color: var(--el-text-color-secondary);
-                    transition: var(--el-transition-color);
-                }
-            }
-            &:last-child {
-                border-bottom: 0;
-            }
+  .setting-list {
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 0;
+      border-bottom: 1px solid var(--el-border-color-lighter);
+      transition: var(--el-transition-border);
+
+      .content {
+        .title {
+          margin-bottom: 5px;
+          color: var(--el-text-color-primary);
+          transition: var(--el-transition-color);
         }
+
+        .desc {
+          font-size: 14px;
+          color: var(--el-text-color-secondary);
+          transition: var(--el-transition-color);
+        }
+      }
+
+      &:last-child {
+        border-bottom: 0;
+      }
     }
+  }
 }
 </style>
diff --git a/src/views/reload.vue b/src/views/reload.vue
index 8206cfcf..80ffa153 100644
--- a/src/views/reload.vue
+++ b/src/views/reload.vue
@@ -1,17 +1,15 @@
-<route>
-{
-    name: 'reload'
-}
+<route lang="yaml">
+name: reload
 </route>
 
-<script setup>
+<script lang="ts" setup>
 const router = useRouter()
 
 onMounted(() => {
-    router.go(-1)
+  router.go(-1)
 })
 </script>
 
 <template>
-    <div />
+  <div />
 </template>
diff --git a/src/views/videos_example/coming.soon.vue b/src/views/videos_example/coming.soon.vue
index 8f98cf05..2e78ae13 100644
--- a/src/views/videos_example/coming.soon.vue
+++ b/src/views/videos_example/coming.soon.vue
@@ -1,13 +1,10 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
+<route lang="yaml">
+meta:
+  enabled: false
 </route>
 
 <template>
-    <div>
-        <page-header title="即将推出 Vue3 版本视频教程，尽请期待" />
-    </div>
+  <div>
+    <page-header title="即将推出 Vue3 版本视频教程，尽请期待" />
+  </div>
 </template>
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..fc53447f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "skipLibCheck": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "types": [
+      "vite/client",
+      "element-plus/global",
+      "vite-plugin-pages/client",
+      "vite-plugin-vue-layouts/client"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 00000000..62bdcce0
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "package.json",
+    "vite.config.ts",
+    "vite/**/*.ts"
+  ]
+}
diff --git a/vite.config.js b/vite.config.js
deleted file mode 100644
index 39676ab9..00000000
--- a/vite.config.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { defineConfig, loadEnv } from 'vite'
-import createVitePlugins from './vite/plugins'
-
-const fs = require('fs')
-const path = require('path')
-
-// https://vitejs.dev/config/
-export default ({ mode, command }) => {
-    const env = loadEnv(mode, process.cwd())
-    // 全局 scss 资源
-    const scssResources = []
-    fs.readdirSync('src/assets/styles/resources').map(dirname => {
-        if (fs.statSync(`src/assets/styles/resources/${dirname}`).isFile()) {
-            scssResources.push(`@use "src/assets/styles/resources/${dirname}" as *;`)
-        }
-    })
-    // css 精灵图相关
-    fs.readdirSync('src/assets/sprites').map(dirname => {
-        if (fs.statSync(`src/assets/sprites/${dirname}`).isDirectory()) {
-            // css 精灵图生成的 scss 文件也需要放入全局 scss 资源
-            scssResources.push(`@use "src/assets/sprites/_${dirname}.scss" as *;`)
-        }
-    })
-    return defineConfig({
-        base: './',
-        // 开发服务器选项 https://cn.vitejs.dev/config/#server-options
-        server: {
-            open: true,
-            port: 9000,
-            proxy: {
-                '/proxy': {
-                    target: env.VITE_APP_API_BASEURL,
-                    changeOrigin: command === 'serve' && env.VITE_OPEN_PROXY == 'true',
-                    rewrite: path => path.replace(/\/proxy/, '')
-                }
-            }
-        },
-        // 构建选项 https://cn.vitejs.dev/config/#server-fsserve-root
-        build: {
-            outDir: mode == 'production' ? 'dist' : `dist-${mode}`,
-            sourcemap: env.VITE_BUILD_SOURCEMAP == 'true',
-            minify: 'terser',
-            terserOptions: {
-                compress: {
-                    drop_console: env.VITE_BUILD_DROP_CONSOLE == 'true'
-                }
-            }
-        },
-        optimizeDeps: {
-            include: [
-                'element-plus/es',
-                'element-plus/es/components/message/style/css',
-                'element-plus/es/components/notification/style/css',
-                'element-plus/es/components/message-box/style/css'
-            ]
-        },
-        plugins: [
-            ...createVitePlugins(env, command === 'build'),
-            // BUG https://github.com/antfu/unplugin-vue-components/issues/361
-            {
-                name: 'dev-auto-import-element-plus',
-                transform(code, id) {
-                    if (command === 'serve' && /src\/main.js$/.test(id)) {
-                        return {
-                            code: code.replace('/* importElementPlusPlaceholder */', `
-                                import ElementPlus from 'element-plus';
-                                app.use(ElementPlus);
-                            `),
-                            map: null
-                        }
-                    }
-                }
-            }
-        ],
-        resolve: {
-            alias: {
-                '@': path.resolve(__dirname, 'src')
-            }
-        },
-        css: {
-            preprocessorOptions: {
-                scss: {
-                    additionalData: scssResources.join('')
-                }
-            }
-        }
-    })
-}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..3219f3b6
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,77 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { defineConfig, loadEnv } from 'vite'
+import dayjs from 'dayjs'
+import pkg from './package.json'
+import createVitePlugins from './vite/plugins'
+
+// https://vitejs.dev/config/
+export default ({ mode, command }) => {
+  const env = loadEnv(mode, process.cwd())
+  // 全局 scss 资源
+  const scssResources = []
+  fs.readdirSync('src/assets/styles/resources').forEach((dirname) => {
+    if (fs.statSync(`src/assets/styles/resources/${dirname}`).isFile())
+      scssResources.push(`@use "src/assets/styles/resources/${dirname}" as *;`)
+  })
+  // css 精灵图相关
+  fs.readdirSync('src/assets/sprites').forEach((dirname) => {
+    if (fs.statSync(`src/assets/sprites/${dirname}`).isDirectory()) {
+      // css 精灵图生成的 scss 文件也需要放入全局 scss 资源
+      scssResources.push(`@use "src/assets/sprites/_${dirname}.scss" as *;`)
+    }
+  })
+  return defineConfig({
+    base: './',
+    // 开发服务器选项 https://cn.vitejs.dev/config/#server-options
+    server: {
+      open: true,
+      port: 9000,
+      proxy: {
+        '/proxy': {
+          target: env.VITE_APP_API_BASEURL,
+          changeOrigin: command === 'serve' && env.VITE_OPEN_PROXY === 'true',
+          rewrite: path => path.replace(/\/proxy/, ''),
+        },
+      },
+    },
+    // 构建选项 https://cn.vitejs.dev/config/#server-fsserve-root
+    build: {
+      outDir: mode === 'production' ? 'dist' : `dist-${mode}`,
+      sourcemap: env.VITE_BUILD_SOURCEMAP === 'true',
+    },
+    define: {
+      __SYSTEM_INFO__: JSON.stringify({
+        pkg: {
+          version: pkg.version,
+          dependencies: pkg.dependencies,
+          devDependencies: pkg.devDependencies,
+        },
+        lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      }),
+    },
+    optimizeDeps: {
+      include: [
+        'element-plus',
+        'element-plus/es',
+        'element-plus/es/components/message/style/css',
+        'element-plus/es/components/notification/style/css',
+        'element-plus/es/components/message-box/style/css',
+        'element-plus/es/components/loading/style/css',
+      ],
+    },
+    plugins: createVitePlugins(env, command === 'build'),
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+      },
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: scssResources.join(''),
+        },
+      },
+    },
+  })
+}
diff --git a/vite/plugins/auto-import.js b/vite/plugins/auto-import.js
deleted file mode 100644
index 57ec6a8b..00000000
--- a/vite/plugins/auto-import.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import autoImport from 'unplugin-auto-import/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-
-export default function createAutoImport() {
-    return autoImport({
-        imports: [
-            'vue',
-            'vue-router',
-            {
-                'vue': [
-                    'defineProps',
-                    'defineEmits',
-                    'defineExpose',
-                    'withDefaults'
-                ]
-            },
-            'pinia'
-        ],
-        eslintrc: {
-            enabled: true,
-            filepath: './.eslintrc-auto-import.json',
-            globalsPropValue: true
-        },
-        resolvers: [
-            ElementPlusResolver()
-        ],
-        dts: false
-    })
-}
diff --git a/vite/plugins/auto-import.ts b/vite/plugins/auto-import.ts
new file mode 100644
index 00000000..3e60cfab
--- /dev/null
+++ b/vite/plugins/auto-import.ts
@@ -0,0 +1,19 @@
+import autoImport from 'unplugin-auto-import/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+export default function createAutoImport() {
+  return autoImport({
+    imports: [
+      'vue',
+      'vue-router',
+      'pinia',
+    ],
+    dts: 'src/auto-imports.d.ts',
+    dirs: [
+      './src/utils/composables/**',
+    ],
+    resolvers: [
+      ElementPlusResolver(),
+    ],
+  })
+}
diff --git a/vite/plugins/banner.js b/vite/plugins/banner.ts
similarity index 76%
rename from vite/plugins/banner.js
rename to vite/plugins/banner.ts
index ca9a744e..3340a5f8 100644
--- a/vite/plugins/banner.js
+++ b/vite/plugins/banner.ts
@@ -1,14 +1,12 @@
 import banner from 'vite-plugin-banner'
 
 export default function createBanner() {
-    return banner(`
+  return banner(`
 /**
  * 由 Fantastic-admin 提供技术支持
  * Powered by Fantastic-admin
- * https://fantastic-admin.netlify.app
- * 代码仓库
  * Gitee  https://gitee.com/hooray/fantastic-admin
  * Github https://github.com/hooray/fantastic-admin
  */
-    `)
+  `)
 }
diff --git a/vite/plugins/components.js b/vite/plugins/components.js
deleted file mode 100644
index bc0ed749..00000000
--- a/vite/plugins/components.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-
-export default function createComponents(isBuild) {
-    const resolvers = []
-    isBuild && resolvers.push(ElementPlusResolver())
-    return components({
-        resolvers,
-        dirs: ['src/components'],
-        include: [/\.vue$/, /\.vue\?vue/, /\.jsx$/],
-        dts: false
-    })
-}
diff --git a/vite/plugins/components.ts b/vite/plugins/components.ts
new file mode 100644
index 00000000..c9e5e529
--- /dev/null
+++ b/vite/plugins/components.ts
@@ -0,0 +1,9 @@
+import components from 'unplugin-vue-components/vite'
+
+export default function createComponents() {
+  return components({
+    dirs: ['src/components'],
+    include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/],
+    dts: 'src/components.d.ts',
+  })
+}
diff --git a/vite/plugins/compression.js b/vite/plugins/compression.js
deleted file mode 100644
index f808ecad..00000000
--- a/vite/plugins/compression.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import compression from 'vite-plugin-compression'
-
-export default function createCompression(env) {
-    const { VITE_BUILD_COMPRESS } = env
-    const compressList = VITE_BUILD_COMPRESS.split(',')
-    const plugin = []
-    if (compressList.includes('gzip')) {
-        plugin.push(
-            compression({
-                ext: '.gz',
-                deleteOriginFile: false
-            })
-        )
-    }
-    if (compressList.includes('brotli')) {
-        plugin.push(
-            compression({
-                ext: '.br',
-                algorithm: 'brotliCompress',
-                deleteOriginFile: false
-            })
-        )
-    }
-    return plugin
-}
diff --git a/vite/plugins/compression.ts b/vite/plugins/compression.ts
new file mode 100644
index 00000000..317582d7
--- /dev/null
+++ b/vite/plugins/compression.ts
@@ -0,0 +1,25 @@
+import compression from 'vite-plugin-compression'
+
+export default function createCompression(env) {
+  const { VITE_BUILD_COMPRESS } = env
+  const compressList = VITE_BUILD_COMPRESS.split(',')
+  const plugin: any[] = []
+  if (compressList.includes('gzip')) {
+    plugin.push(
+      compression({
+        ext: '.gz',
+        deleteOriginFile: false,
+      }),
+    )
+  }
+  if (compressList.includes('brotli')) {
+    plugin.push(
+      compression({
+        ext: '.br',
+        algorithm: 'brotliCompress',
+        deleteOriginFile: false,
+      }),
+    )
+  }
+  return plugin
+}
diff --git a/vite/plugins/html.js b/vite/plugins/html.js
deleted file mode 100644
index 66bbeb6b..00000000
--- a/vite/plugins/html.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createHtmlPlugin } from 'vite-plugin-html'
-
-const copyright_common_style = 'font-size: 14px; margin-bottom: 2px; padding: 6px 8px; color: #fff;'
-const copyright_main_style = `${copyright_common_style} background: #e24329;`
-const copyright_sub_style = `${copyright_common_style} background: #707070;`
-
-export default function createHtml(env, isBuild) {
-    const { VITE_APP_TITLE, VITE_APP_DEBUG_TOOL, VITE_APP_MODE } = env
-    const html = createHtmlPlugin({
-        inject: {
-            data: {
-                title: VITE_APP_TITLE,
-                debugTool: VITE_APP_DEBUG_TOOL,
-                appMode: VITE_APP_MODE,
-                copyrightScript: `
-<script>
-if ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn') {
-    console.info('%c由%cFantastic-admin%c提供技术支持', '${copyright_sub_style}', '${copyright_main_style}', '${copyright_sub_style}', '\\nhttps://gitee.com/hooray/fantastic-admin');
-} else {
-    console.info('%cPowered by%cFantastic-admin', '${copyright_sub_style}', '${copyright_main_style}', '\\nhttps://github.com/hooray/fantastic-admin');
-}
-</script>
-                `
-            }
-        },
-        minify: isBuild
-    })
-    return html
-}
diff --git a/vite/plugins/html.ts b/vite/plugins/html.ts
new file mode 100644
index 00000000..54b7102b
--- /dev/null
+++ b/vite/plugins/html.ts
@@ -0,0 +1,87 @@
+import { createHtmlPlugin } from 'vite-plugin-html'
+
+const copyright_common_style = 'font-size: 14px; margin-bottom: 2px; padding: 6px 8px; color: #fff;'
+const copyright_main_style = `${copyright_common_style} background: #e24329;`
+const copyright_sub_style = `${copyright_common_style} background: #707070;`
+
+export default function createHtml(env, isBuild) {
+  const { VITE_APP_TITLE, VITE_APP_DEBUG_TOOL, VITE_APP_MODE } = env
+  let copyrightScript = `
+<script>
+if ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn') {
+  console.info('%c由%cFantastic-admin%c提供技术支持', '${copyright_sub_style}', '${copyright_main_style}', '${copyright_sub_style}', '\\nhttps://gitee.com/hooray/fantastic-admin');
+} else {
+  console.info('%cPowered by%cFantastic-admin', '${copyright_sub_style}', '${copyright_main_style}', '\\nhttps://github.com/hooray/fantastic-admin');
+}
+</script>
+  `
+  if (VITE_APP_MODE === 'example') {
+    copyrightScript += `
+<script>
+  var _hmt = _hmt || [];
+  _hmt.push(['_requirePlugin', 'UrlChangeTracker', {
+    shouldTrackUrlChange: function(newPath, oldPath) {
+      return newPath && oldPath;
+    }
+  }]);
+  (function() {
+    var hm = document.createElement("script");
+    hm.src = "https://hm.baidu.com/hm.js?c31a3e8267162de8420bc73e06d62463";
+    var s = document.getElementsByTagName("script")[0];
+    s.parentNode.insertBefore(hm, s);
+  })();
+</script>
+    `
+  }
+  let devtoolScript = ''
+  switch (VITE_APP_DEBUG_TOOL) {
+    case 'eruda':
+      devtoolScript = `
+<script src="//unpkg.com/eruda/eruda.js"></script>
+<script>
+  eruda.init()
+</script>
+      `
+      break
+    case 'vconsole':
+      devtoolScript = `
+<script src="//unpkg.com/vconsole/dist/vconsole.min.js"></script>
+<script>
+  new VConsole()
+</script>
+      `
+      break
+  }
+  const loadingScript = `
+<script>
+(function(){
+  if(!!window.ActiveXObject || "ActiveXObject" in window) {
+    document.getElementById('browser-upgrade').style.display = 'block'
+  } else {
+    var Loading = document.querySelector('.loading')
+    Loading.classList.add('animate')
+    Loading.addEventListener('animationend', function() {
+      setTimeout(function() {
+        Loading.classList.remove('animate')
+      }, 600)
+      setTimeout(function() {
+        Loading.classList.add('animate')
+      }, 1000)
+    })
+  }
+})()
+</script>
+  `
+  const html = createHtmlPlugin({
+    inject: {
+      data: {
+        title: VITE_APP_TITLE,
+        copyrightScript,
+        loadingScript,
+        devtoolScript,
+      },
+    },
+    minify: isBuild,
+  })
+  return html
+}
diff --git a/vite/plugins/index.js b/vite/plugins/index.js
deleted file mode 100644
index 7c10c0d8..00000000
--- a/vite/plugins/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import vue from '@vitejs/plugin-vue'
-
-import createRestart from './restart'
-import createJsx from './jsx'
-import createHtml from './html'
-import createAutoImport from './auto-import'
-import createComponents from './components'
-import createSetupExtend from './setup-extend'
-import createSvgIcon from './svg-icon'
-import createMock from './mock'
-import createLayouts from './layouts'
-import createPages from './pages'
-import createCompression from './compression'
-import createSpritesmith from './spritesmith'
-import createBanner from './banner'
-
-export default function createVitePlugins(viteEnv, isBuild = false) {
-    const vitePlugins = [vue()]
-    !isBuild && vitePlugins.push(createRestart())
-    vitePlugins.push(createJsx())
-    vitePlugins.push(createHtml(viteEnv, isBuild))
-    vitePlugins.push(createAutoImport())
-    vitePlugins.push(createComponents(isBuild))
-    vitePlugins.push(createSetupExtend())
-    vitePlugins.push(createSvgIcon(isBuild))
-    vitePlugins.push(createMock(viteEnv, isBuild))
-    vitePlugins.push(createLayouts())
-    vitePlugins.push(createPages())
-    isBuild && vitePlugins.push(...createCompression(viteEnv))
-    vitePlugins.push(...createSpritesmith(isBuild))
-    vitePlugins.push(createBanner())
-    return vitePlugins
-}
diff --git a/vite/plugins/index.ts b/vite/plugins/index.ts
new file mode 100644
index 00000000..ce35e40d
--- /dev/null
+++ b/vite/plugins/index.ts
@@ -0,0 +1,38 @@
+import type { PluginOption } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+import createRestart from './restart'
+import createHtml from './html'
+import createAutoImport from './auto-import'
+import createComponents from './components'
+import createSetupExtend from './setup-extend'
+import createSvgIcon from './svg-icon'
+import createMock from './mock'
+import createLayouts from './layouts'
+import createPages from './pages'
+import createCompression from './compression'
+import createSpritesmith from './spritesmith'
+import createBanner from './banner'
+
+export default function createVitePlugins(viteEnv, isBuild = false) {
+  const vitePlugins: (PluginOption | PluginOption[])[] = [
+    vue({
+      reactivityTransform: true,
+    }),
+    vueJsx(),
+  ]
+  !isBuild && vitePlugins.push(createRestart())
+  vitePlugins.push(createHtml(viteEnv, isBuild))
+  vitePlugins.push(createAutoImport())
+  vitePlugins.push(createComponents())
+  vitePlugins.push(createSetupExtend())
+  vitePlugins.push(createSvgIcon(isBuild))
+  vitePlugins.push(createMock(viteEnv, isBuild))
+  vitePlugins.push(createLayouts())
+  vitePlugins.push(createPages())
+  isBuild && vitePlugins.push(...createCompression(viteEnv))
+  vitePlugins.push(...createSpritesmith(isBuild))
+  vitePlugins.push(createBanner())
+  return vitePlugins
+}
diff --git a/vite/plugins/jsx.js b/vite/plugins/jsx.js
deleted file mode 100644
index e22d7c84..00000000
--- a/vite/plugins/jsx.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import vueJsx from '@vitejs/plugin-vue-jsx'
-
-export default function createJsx() {
-    return vueJsx()
-}
diff --git a/vite/plugins/layouts.js b/vite/plugins/layouts.js
deleted file mode 100644
index b6ba36fd..00000000
--- a/vite/plugins/layouts.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Layouts from 'vite-plugin-vue-layouts'
-
-export default function createPages() {
-    return Layouts({
-        layoutsDirs: 'src/layout',
-        defaultLayout: 'index'
-    })
-}
diff --git a/vite/plugins/layouts.ts b/vite/plugins/layouts.ts
new file mode 100644
index 00000000..4f7e03b4
--- /dev/null
+++ b/vite/plugins/layouts.ts
@@ -0,0 +1,7 @@
+import Layouts from 'vite-plugin-vue-layouts'
+
+export default function createLayouts() {
+  return Layouts({
+    defaultLayout: 'index',
+  })
+}
diff --git a/vite/plugins/mock.js b/vite/plugins/mock.js
deleted file mode 100644
index 8ccb9197..00000000
--- a/vite/plugins/mock.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { viteMockServe } from 'vite-plugin-mock'
-
-export default function createMock(env, isBuild) {
-    const { VITE_BUILD_MOCK } = env
-    return viteMockServe({
-        mockPath: 'src/mock',
-        localEnabled: !isBuild,
-        prodEnabled: isBuild && VITE_BUILD_MOCK === 'true',
-        injectCode: `
-            import { setupProdMockServer } from './mockProdServer';
-            setupProdMockServer();
-        `
-    })
-}
diff --git a/vite/plugins/mock.ts b/vite/plugins/mock.ts
new file mode 100644
index 00000000..a709524c
--- /dev/null
+++ b/vite/plugins/mock.ts
@@ -0,0 +1,14 @@
+import { viteMockServe } from 'vite-plugin-mock'
+
+export default function createMock(env, isBuild) {
+  const { VITE_BUILD_MOCK } = env
+  return viteMockServe({
+    mockPath: 'src/mock',
+    localEnabled: !isBuild,
+    prodEnabled: isBuild && VITE_BUILD_MOCK === 'true',
+    injectCode: `
+import { setupProdMockServer } from './mockProdServer';
+setupProdMockServer();
+    `,
+  })
+}
diff --git a/vite/plugins/pages.js b/vite/plugins/pages.js
deleted file mode 100644
index 8a28099c..00000000
--- a/vite/plugins/pages.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Pages from 'vite-plugin-pages'
-
-export default function createPages() {
-    return Pages({
-        dirs: 'src/views',
-        exclude: [
-            '**/components/**/*.vue'
-        ]
-    })
-}
diff --git a/vite/plugins/pages.ts b/vite/plugins/pages.ts
new file mode 100644
index 00000000..470bcca5
--- /dev/null
+++ b/vite/plugins/pages.ts
@@ -0,0 +1,10 @@
+import Pages from 'vite-plugin-pages'
+
+export default function createPages() {
+  return Pages({
+    dirs: 'src/views',
+    exclude: [
+      '**/components/**/*.vue',
+    ],
+  })
+}
diff --git a/vite/plugins/restart.js b/vite/plugins/restart.js
deleted file mode 100644
index 24814386..00000000
--- a/vite/plugins/restart.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import ViteRestart from 'vite-plugin-restart'
-
-export default function createRestart() {
-    const pluginsFile = []
-    const fs = require('fs')
-    fs.readdirSync('vite/plugins').map(dirname => {
-        if (fs.statSync(`vite/plugins/${dirname}`).isFile()) {
-            pluginsFile.push(`vite/plugins/${dirname}`)
-        }
-    })
-    return ViteRestart({
-        restart: pluginsFile
-    })
-}
diff --git a/vite/plugins/restart.ts b/vite/plugins/restart.ts
new file mode 100644
index 00000000..0b5724ce
--- /dev/null
+++ b/vite/plugins/restart.ts
@@ -0,0 +1,13 @@
+import fs from 'node:fs'
+import ViteRestart from 'vite-plugin-restart'
+
+export default function createRestart() {
+  const pluginsFile: string[] = []
+  fs.readdirSync('vite/plugins').forEach((dirname) => {
+    if (fs.statSync(`vite/plugins/${dirname}`).isFile())
+      pluginsFile.push(`vite/plugins/${dirname}`)
+  })
+  return ViteRestart({
+    restart: pluginsFile,
+  })
+}
diff --git a/vite/plugins/setup-extend.js b/vite/plugins/setup-extend.ts
similarity index 80%
rename from vite/plugins/setup-extend.js
rename to vite/plugins/setup-extend.ts
index a4980f30..60d33f51 100644
--- a/vite/plugins/setup-extend.js
+++ b/vite/plugins/setup-extend.ts
@@ -1,5 +1,5 @@
 import setupExtend from 'vite-plugin-vue-setup-extend'
 
 export default function createSetupExtend() {
-    return setupExtend()
+  return setupExtend()
 }
diff --git a/vite/plugins/spritesmith.js b/vite/plugins/spritesmith.js
deleted file mode 100644
index e016f315..00000000
--- a/vite/plugins/spritesmith.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import spritesmith from 'vite-plugin-spritesmith'
-import fs from 'fs'
-
-export default function createSpritesmith(isBuild) {
-    const spriteDirnames = []
-    fs.readdirSync('src/assets/sprites').map(dirname => {
-        if (fs.statSync(`src/assets/sprites/${dirname}`).isDirectory()) {
-            spriteDirnames.push(dirname)
-        }
-    })
-    const plugin = []
-    spriteDirnames.map(item => {
-        plugin.push(
-            spritesmith({
-                watch: !isBuild,
-                src: {
-                    cwd: `./src/assets/sprites/${item}`,
-                    glob: '*.png'
-                },
-                target: {
-                    image: `./src/assets/sprites/${item}.png`,
-                    css: [
-                        [
-                            `./src/assets/sprites/_${item}.scss`,
-                            {
-                                format: 'handlebars_based_template'
-                            }
-                        ]
-                    ]
-                },
-                apiOptions: {
-                    cssImageRef: `@/assets/sprites/${item}.png`,
-                    spritesheet_info: {
-                        name: item,
-                        format: 'handlebars_based_template'
-                    }
-                },
-                customTemplates: {
-                    handlebars_based_template: './scss.template.hbs'
-                },
-                spritesmithOptions: {
-                    algorithm: 'binary-tree',
-                    padding: 10
-                }
-            })
-        )
-    })
-    return plugin
-}
diff --git a/vite/plugins/spritesmith.ts b/vite/plugins/spritesmith.ts
new file mode 100644
index 00000000..5d5e28a8
--- /dev/null
+++ b/vite/plugins/spritesmith.ts
@@ -0,0 +1,48 @@
+import fs from 'fs'
+import spritesmith from 'vite-plugin-spritesmith'
+
+export default function createSpritesmith(isBuild) {
+  const spriteDirnames: string[] = []
+  fs.readdirSync('src/assets/sprites').forEach((dirname) => {
+    if (fs.statSync(`src/assets/sprites/${dirname}`).isDirectory())
+      spriteDirnames.push(dirname)
+  })
+  const plugin: any[] = []
+  spriteDirnames.forEach((item) => {
+    plugin.push(
+      spritesmith({
+        watch: !isBuild,
+        src: {
+          cwd: `./src/assets/sprites/${item}`,
+          glob: '*.png',
+        },
+        target: {
+          image: `./src/assets/sprites/${item}.png`,
+          css: [
+            [
+              `./src/assets/sprites/_${item}.scss`,
+              {
+                format: 'handlebars_based_template',
+              },
+            ],
+          ],
+        },
+        apiOptions: {
+          cssImageRef: `@/assets/sprites/${item}.png`,
+          spritesheet_info: {
+            name: item,
+            format: 'handlebars_based_template',
+          },
+        },
+        customTemplates: {
+          handlebars_based_template: './scss.template.hbs',
+        },
+        spritesmithOptions: {
+          algorithm: 'binary-tree',
+          padding: 10,
+        },
+      }),
+    )
+  })
+  return plugin
+}
diff --git a/vite/plugins/svg-icon.js b/vite/plugins/svg-icon.js
deleted file mode 100644
index dbd89b76..00000000
--- a/vite/plugins/svg-icon.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
-import path from 'path'
-
-export default function createSvgIcon(isBuild) {
-    return createSvgIconsPlugin({
-        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/')],
-        symbolId: 'icon-[dir]-[name]',
-        svgoOptions: isBuild
-    })
-}
diff --git a/vite/plugins/svg-icon.ts b/vite/plugins/svg-icon.ts
new file mode 100644
index 00000000..99595fe0
--- /dev/null
+++ b/vite/plugins/svg-icon.ts
@@ -0,0 +1,10 @@
+import path from 'node:path'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+
+export default function createSvgIcon(isBuild) {
+  return createSvgIconsPlugin({
+    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/')],
+    symbolId: 'icon-[dir]-[name]',
+    svgoOptions: isBuild,
+  })
+}