From 288a59a4ccc9f3715dede39dfde53f1ec7402b21 Mon Sep 17 00:00:00 2001
From: fxzer <fxzer8888@163.com>
Date: Thu, 4 Jan 2024 11:39:23 +0800
Subject: [PATCH] fix: add @antfu/eslint-config

---
 .github/workflows/deploy.yml                  |   16 +-
 .gitignore                                    |    1 -
 .vscode/settings.json                         |   43 +
 api/index.js                                  |    7 +-
 docs/.vitepress/theme/UnoCSSLayout.vue        |    8 +-
 docs/.vitepress/theme/components/DemoWrap.vue |    2 +-
 docs/.vitepress/theme/components/Loading.vue  |   19 +-
 .../theme/components/RegisterSW.vue           |   64 +-
 .../theme/components/ReloadPrompt.vue         |   44 +-
 docs/.vitepress/theme/components/ToolItem.vue |    4 +-
 docs/.vitepress/theme/components/ToolWrap.vue |   14 +-
 docs/.vitepress/theme/styles/overrides.css    |   32 +-
 docs/.vitepress/theme/styles/rainbow.css      |  736 +++++++-
 .../MongoDB\347\254\224\350\256\260.md"       |  403 ++---
 ...07\344\273\266\344\270\212\344\274\240.md" |    4 +-
 ...46\344\271\240\347\254\224\350\256\260.md" |  596 +++----
 ...12\344\274\240\346\226\207\344\273\266.md" |   86 +-
 ...46\344\271\240\347\254\224\350\256\260.md" |   77 +-
 ...46\344\271\240\347\254\224\350\256\260.md" |   33 +-
 ...00\346\200\273\347\273\223\344\270\200.md" |  242 +--
 ...00\346\200\273\347\273\223\344\270\211.md" |  127 +-
 ...00\346\200\273\347\273\223\344\272\214.md" |  241 ++-
 ...00\346\200\273\347\273\223\344\270\200.md" |  460 ++---
 ...13\350\257\225\346\265\201\347\250\213.md" |   23 +-
 ...37\347\220\206\345\255\246\344\271\240.md" |    3 +-
 ...7\233\256\350\277\201\347\247\273Vite5.md" |   65 +-
 ...45\346\274\217\347\254\224\350\256\260.md" |   64 +-
 ...36\346\230\276\344\274\230\345\214\226.md" |  304 ++--
 ...40\351\231\244\345\244\204\347\220\206.md" |   12 +-
 ...47\253\231\346\267\273\345\212\240 PWA.md" |   20 +-
 ...46\344\271\240\347\254\224\350\256\260.md" |  179 +-
 docs/FrontEnd/CSS/demo/GridStar.vue           |   20 +-
 ...50\344\273\243\347\240\201\346\256\265.md" |   44 +-
 ...73\344\271\246\346\221\230\350\246\201.md" |  340 ++--
 ...70\347\224\250\346\223\215\344\275\234.md" |   88 +-
 ...10\347\253\257\347\276\216\345\214\226.md" |   55 +-
 ...15\345\257\206\347\231\273\345\275\225.md" |    9 +-
 ...344\270\252\345\271\263\345\217\260SSH.md" |   46 +-
 .../JavaScript/async\344\270\216await.md"     |  114 +-
 docs/FrontEnd/JavaScript/demo/FilePicker.vue  |    2 +-
 ...06\346\224\257\344\274\230\345\214\226.md" |    3 +-
 ...07\346\207\222\345\212\240\350\275\275.md" |   47 +-
 ...00\345\244\215\344\271\240\344\270\200.md" |   93 +-
 ...00\345\244\215\344\271\240\344\272\214.md" |  452 +++--
 ...70\350\247\201\347\256\227\346\263\225.md" |  702 ++++----
 .../\346\211\213\345\206\231Promise.md"       |  724 ++++----
 ...60\346\215\256\345\216\273\351\207\215.md" |  229 +--
 ...04\346\261\202\351\233\206\345\220\210.md" |   52 +-
 ...07\344\273\266\347\263\273\347\273\237.md" |   46 +-
 ...15\347\275\256\345\261\236\346\200\247.md" |    9 +-
 ...31\350\241\250\350\276\276\345\274\217.md" |   49 +-
 ...56\345\275\225\347\273\223\346\236\204.md" |   27 +-
 ...30\351\230\266\345\207\275\346\225\260.md" |  307 ++--
 ...07\344\273\266\350\257\246\350\247\243.md" |   48 +-
 ...50\347\275\262\350\204\232\346\234\254.md" |   26 +-
 ...35\345\255\246\347\254\224\350\256\260.md" |  329 ++--
 ...77\347\224\250\346\212\200\345\267\247.md" |    3 +-
 ...07\344\273\266\350\257\246\350\247\243.md" |  102 +-
 docs/GoodTool/index.md                        |    9 +-
 ...52\347\216\257\346\234\272\345\210\266.md" |   38 +-
 ...67\346\261\202\350\277\207\347\250\213.md" |   49 +-
 ...27\346\234\272\347\275\221\347\273\234.md" |   11 +-
 ...00\351\235\242\350\257\225\351\242\230.md" |  154 +-
 ...66\351\235\242\350\257\225\351\242\230.md" |   30 +-
 .../Promise\347\233\270\345\205\263.md"       |  222 +--
 ...16\345\216\237\345\236\213\351\223\276.md" |   77 +-
 ...00\351\235\242\350\257\225\351\242\230.md" |  223 +--
 ...70\347\224\250\346\226\271\346\263\225.md" |   37 +-
 ...66\351\235\242\350\257\225\351\242\230.md" |  246 ++-
 ...47\351\235\242\350\257\225\351\242\230.md" |   35 +-
 ...24\345\274\217\345\216\237\347\220\206.md" |    3 +-
 ...ue\345\237\272\347\241\200\347\257\207.md" |    5 +-
 ...60\346\230\216\345\221\250\346\234\237.md" |   54 +-
 ...47\350\241\214\350\277\207\347\250\213.md" |    4 +-
 ...71\347\233\256\344\274\230\345\214\226.md" |   26 +-
 ...50\247\201Path\345\214\272\345\210\253.md" |   13 +-
 ...32\344\271\211\346\214\207\344\273\244.md" |   70 +-
 docs/Interview/index.md                       |    3 +-
 ...07\346\256\265\351\233\206\351\224\246.md" |  477 +++--
 ...77\347\224\250\346\200\273\347\273\223.md" |   28 +-
 ...56\351\242\230\346\200\273\347\273\223.md" |  159 +-
 ...71\347\233\256\350\270\251\345\235\221.md" |   32 +-
 ...51\345\235\221\350\256\260\345\275\225.md" |  113 +-
 ...51\345\235\221\350\256\260\345\275\225.md" |   25 +-
 ...56\350\270\251\345\235\221\344\270\200.md" |  321 ++--
 docs/Problem/index.md                         |    5 +-
 documate.json                                 |    2 +-
 eslint.config.js                              |    5 +
 package.json                                  |   17 +-
 pnpm-lock.yaml                                | 1546 ++++++++++++++++-
 scripts/auto-update-pages.js                  |   30 +-
 scripts/generate-sidebar.cjs                  |   63 +-
 tsconfig.json                                 |   16 +-
 vercel.json                                   |    2 +-
 94 files changed, 7039 insertions(+), 5006 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 eslint.config.js

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index e0b335d5..7e05a499 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -10,18 +10,18 @@ on:
 # 任务
 jobs:
   build-and-deploy:
-    runs-on: ubuntu-latest #部署运行环境搭建
+    runs-on: ubuntu-latest # 部署运行环境搭建
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@main
         with:
           persist-credentials: false
-          fetch-depth: 0 #github代码拉取深度
+          fetch-depth: 0 # github代码拉取深度
       - name: Setup Node  🎬
         uses: actions/setup-node@main
         with:
-          node-version: "lts/*"
-      - name: Build 🔧 
+          node-version: 'lts/*'
+      - name: Build 🔧
         run: |
           yarn
           yarn run build
@@ -51,7 +51,7 @@ jobs:
       #     source-repo: 'git@github.com:fxzer/zerdocs.git'
       #     # 注意替换为你的 Gitee 目标仓库地址
       #     destination-repo: 'git@gitee.com:fxzer/zerdocs.git'
-      
+
       # - name: ✅ Build Gitee Pages #触发Gitee自动部署
       #   uses: yanglbme/gitee-pages-action@master
       #   with:
@@ -59,12 +59,12 @@ jobs:
       #     gitee-username: fxzer
       #     # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
       #     gitee-password: ${{ secrets.GITEE_PASSWORD }}
-      #     # 注意替换为你的 Gitee 仓库 
+      #     # 注意替换为你的 Gitee 仓库
       #     # 坑点:https://gitee.com/fxzer/zerdocs -->则填:fxzer/zerdocs,注意仓库名和路径名不一致问题
-      #     gitee-repo: fxzer/zerdocs 
+      #     gitee-repo: fxzer/zerdocs
       #     # 要部署的分支
       #     branch: gh-pages
-          
+
       # - name: Deploy 🚀 #把打包后的dist文件部署到master分支
       #   uses: JamesIves/github-pages-deploy-action@4.1.5
       #   with:
diff --git a/.gitignore b/.gitignore
index a8c68379..367ce703 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,7 +3,6 @@ node_modules
 docs/.vitepress/cache
 docs/.vitepress/dist
 dist
-.vscode
 components.d.ts
 .idea
 # local env files
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..eae23ffc
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,43 @@
+{
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "format/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml"
+  ]
+}
diff --git a/api/index.js b/api/index.js
index 8892efaf..1a6ebd25 100644
--- a/api/index.js
+++ b/api/index.js
@@ -1,4 +1,5 @@
-const express = require('express');
-const app = express();
+const express = require('express')
+
+const app = express()
 app.use(express.static('../dist'))
-module.exports = app;
\ No newline at end of file
+module.exports = app
diff --git a/docs/.vitepress/theme/UnoCSSLayout.vue b/docs/.vitepress/theme/UnoCSSLayout.vue
index 02574b5f..a564aaf2 100644
--- a/docs/.vitepress/theme/UnoCSSLayout.vue
+++ b/docs/.vitepress/theme/UnoCSSLayout.vue
@@ -6,7 +6,7 @@ const { isDark } = useData()
 
 function enableTransitions() {
   return 'startViewTransition' in document
-      && window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+    && window.matchMedia('(prefers-reduced-motion: no-preference)').matches
 }
 
 provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
@@ -18,8 +18,8 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
   const clipPath = [
     `circle(0px at ${x}px ${y}px)`,
     `circle(${Math.hypot(
-        Math.max(x, innerWidth - x),
-        Math.max(y, innerHeight - y),
+      Math.max(x, innerWidth - x),
+      Math.max(y, innerHeight - y),
     )}px at ${x}px ${y}px)`,
   ]
 
@@ -40,5 +40,5 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
 </script>
 
 <template>
-  <DefaultTheme.Layout/>
+  <DefaultTheme.Layout />
 </template>
diff --git a/docs/.vitepress/theme/components/DemoWrap.vue b/docs/.vitepress/theme/components/DemoWrap.vue
index a85eba04..f3d9623c 100644
--- a/docs/.vitepress/theme/components/DemoWrap.vue
+++ b/docs/.vitepress/theme/components/DemoWrap.vue
@@ -34,7 +34,7 @@ const URL = `${GITHUB_BLOB_URL}${demoPath.value}`
 <style scoped lang="scss">
 .demo {
   font-size: 14px;
-  background: rgba(125, 125, 125, .04);
+  background: rgba(125, 125, 125, 0.04);
   padding: 1em;
   position: relative;
   margin-bottom: 10px;
diff --git a/docs/.vitepress/theme/components/Loading.vue b/docs/.vitepress/theme/components/Loading.vue
index c8a91138..b74c27fa 100644
--- a/docs/.vitepress/theme/components/Loading.vue
+++ b/docs/.vitepress/theme/components/Loading.vue
@@ -1,20 +1,21 @@
-<template>
+<script setup lang='ts'>
+
+</script>
 
+<template>
   <div class="loader">
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
+    <div />
+    <div />
+    <div />
+    <div />
   </div>
 </template>
-<script setup lang='ts'>
 
-</script>
 <style scoped lang='scss'>
 .loader {
   /* 相对定位 */
   position: relative;
-  color: #A886F2;
+  color: #a886f2;
   width: 60px;
   height: 60px;
 }
@@ -111,4 +112,4 @@
     opacity: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/.vitepress/theme/components/RegisterSW.vue b/docs/.vitepress/theme/components/RegisterSW.vue
index e5ab6fbc..65ba8a3e 100644
--- a/docs/.vitepress/theme/components/RegisterSW.vue
+++ b/docs/.vitepress/theme/components/RegisterSW.vue
@@ -2,10 +2,10 @@
 import { onBeforeMount, ref } from 'vue'
 
 const offlineReady = ref(false)
-const onOfflineReady = () => {
+function onOfflineReady() {
   offlineReady.value = true
 }
-const close = async () => {
+async function close() {
   offlineReady.value = false
 }
 
@@ -26,19 +26,11 @@ onBeforeMount(async () => {
 
 <template>
   <template v-if="offlineReady">
-    <div
-      class="pwa-toast"
-      role="alertdialog"
-      aria-labelledby="pwa-message"
-    >
+    <div class="pwa-toast" role="alertdialog" aria-labelledby="pwa-message">
       <div id="pwa-message" class="mb-3">
         App ready to work offline
       </div>
-      <button
-        type="button"
-        class="pwa-cancel"
-        @click="close"
-      >
+      <button type="button" class="pwa-cancel" @click="close">
         Close
       </button>
     </div>
@@ -46,27 +38,29 @@ onBeforeMount(async () => {
 </template>
 
 <style>
-    .pwa-toast {
-        position: fixed;
-        right: 0;
-        bottom: 0;
-        margin: 16px;
-        padding: 12px;
-        border: 1px solid #8885;
-        border-radius: 4px;
-        z-index: 100;
-        text-align: left;
-        box-shadow: 3px 4px 5px 0 #8885;
-        background-color: white;
-    }
-    .pwa-toast #pwa-message {
-        margin-bottom: 8px;
-    }
-    .pwa-toast button {
-        border: 1px solid #8885;
-        outline: none;
-        margin-right: 5px;
-        border-radius: 2px;
-        padding: 3px 10px;
-    }
+.pwa-toast {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 16px;
+  padding: 12px;
+  border: 1px solid #8885;
+  border-radius: 4px;
+  z-index: 100;
+  text-align: left;
+  box-shadow: 3px 4px 5px 0 #8885;
+  background-color: white;
+}
+
+.pwa-toast #pwa-message {
+  margin-bottom: 8px;
+}
+
+.pwa-toast button {
+  border: 1px solid #8885;
+  outline: none;
+  margin-right: 5px;
+  border-radius: 2px;
+  padding: 3px 10px;
+}
 </style>
diff --git a/docs/.vitepress/theme/components/ReloadPrompt.vue b/docs/.vitepress/theme/components/ReloadPrompt.vue
index ed3d381d..04d471a6 100644
--- a/docs/.vitepress/theme/components/ReloadPrompt.vue
+++ b/docs/.vitepress/theme/components/ReloadPrompt.vue
@@ -65,26 +65,26 @@ onBeforeMount(async () => {
 
 <style>
     .pwa-toast {
-        position: fixed;
-        right: 0;
-        bottom: 0;
-        margin: 16px;
-        padding: 12px;
-        border: 1px solid #8885;
-        border-radius: 4px;
-        z-index: 100;
-        text-align: left;
-        box-shadow: 3px 4px 5px 0 #8885;
-        background-color: white;
-    }
-    .pwa-toast #pwa-message {
-        margin-bottom: 8px;
-    }
-    .pwa-toast button {
-        border: 1px solid #8885;
-        outline: none;
-        margin-right: 5px;
-        border-radius: 2px;
-        padding: 3px 10px;
-    }
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 16px;
+  padding: 12px;
+  border: 1px solid #8885;
+  border-radius: 4px;
+  z-index: 100;
+  text-align: left;
+  box-shadow: 3px 4px 5px 0 #8885;
+  background-color: white;
+}
+.pwa-toast #pwa-message {
+  margin-bottom: 8px;
+}
+.pwa-toast button {
+  border: 1px solid #8885;
+  outline: none;
+  margin-right: 5px;
+  border-radius: 2px;
+  padding: 3px 10px;
+}
 </style>
diff --git a/docs/.vitepress/theme/components/ToolItem.vue b/docs/.vitepress/theme/components/ToolItem.vue
index b1d0adc8..d2d17c9d 100644
--- a/docs/.vitepress/theme/components/ToolItem.vue
+++ b/docs/.vitepress/theme/components/ToolItem.vue
@@ -53,7 +53,7 @@ $gradient-color: linear-gradient(120deg, #bd34fe, var(--vp-c-brand-light));
     margin: 0 15px 5px 15px;
     border: 1px solid #eee;
     border-radius: 8px;
-    transition: all .2s ease-in-out;
+    transition: all 0.2s ease-in-out;
 
     &:hover {
       border: 1px solid var(--vp-c-green);
@@ -70,7 +70,7 @@ $gradient-color: linear-gradient(120deg, #bd34fe, var(--vp-c-brand-light));
     text-overflow: ellipsis;
     white-space: nowrap;
     margin: 0;
-    transition: all .2s ease-in-out;
+    transition: all 0.2s ease-in-out;
     color: transparent;
     background: $gradient-color;
     background-clip: text;
diff --git a/docs/.vitepress/theme/components/ToolWrap.vue b/docs/.vitepress/theme/components/ToolWrap.vue
index 942a88c8..b73244f6 100644
--- a/docs/.vitepress/theme/components/ToolWrap.vue
+++ b/docs/.vitepress/theme/components/ToolWrap.vue
@@ -1,25 +1,27 @@
-<template>
+<script setup lang='ts'>
+import toolGroup from './toolGroup'
+</script>
 
+<template>
   <div class="tool-wrap">
     <template v-for="(group, key) in toolGroup" :key="key">
-      <div class="tool-group-title">{{ key }}</div>
+      <div class="tool-group-title">
+        {{ key }}
+      </div>
       <div class="tool-group">
         <ToolItem v-for="(tool, index) in group" :key="index" :tool="tool" />
       </div>
     </template>
   </div>
 </template>
-<script setup lang='ts'>
-import  toolGroup   from './toolGroup'
 
-</script>
 <style scoped lang='scss'>
 .tool-wrap {
   .tool-group-title {
     font-size: 20px;
     font-weight: 600;
     padding: 20px 15px 10px;
-    color:var(--vp-c-brand-light);
+    color: var(--vp-c-brand-light);
   }
 
   .tool-group {
diff --git a/docs/.vitepress/theme/styles/overrides.css b/docs/.vitepress/theme/styles/overrides.css
index fc520e8e..9479ab97 100644
--- a/docs/.vitepress/theme/styles/overrides.css
+++ b/docs/.vitepress/theme/styles/overrides.css
@@ -18,20 +18,19 @@
   background-color: #56475769;
   border-left-color: #d2a3f6;
 }
-.vp-doc blockquote{
+.vp-doc blockquote {
   background-color: #f8efffb0;
   border-left-color: #d2a3f6;
 }
 
 /* 详情展开 */
-.custom-block.details{
+.custom-block.details {
   background-color: #f3f3f3;
 }
-.dark .custom-block.details{
+.dark .custom-block.details {
   background-color: var(--vp-custom-block-details-bg);
 }
 
-
 .container .outline-marker {
   width: 2px;
 }
@@ -78,26 +77,29 @@
   .DocSearch-Button-Keys {
     display: none;
   }
-  .VPNavBarHamburger{
+  .VPNavBarHamburger {
     height: 32px !important;
     width: 32px !important;
     border-radius: 4px;
   }
 }
-.content img{
-  box-shadow: 0 0 3px 0 rgba(0,0,0,.2);
-  transition: all .3s;
+.content img {
+  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
+  transition: all 0.3s;
 }
-.content img:hover{
-  box-shadow: 0 0 6px 0 rgba(0,0,0,.2);
+.content img:hover {
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
   transform: translate(0, -2px);
 }
 
-
- .vp-doc .details.custom-block div[class*='language-'] + div[class*='language-']{
-  margin-top:8px;
+.vp-doc
+  .details.custom-block
+  div[class*='language-']
+  + div[class*='language-'] {
+  margin-top: 8px;
 }
 
-.VPNavBarMenuLink.active span, .level-1.is-active{
-  color:var(--vp-c-brand-light) !important;
+.VPNavBarMenuLink.active span,
+.level-1.is-active {
+  color: var(--vp-c-brand-light) !important;
 }
diff --git a/docs/.vitepress/theme/styles/rainbow.css b/docs/.vitepress/theme/styles/rainbow.css
index 8c003b10..263beddc 100644
--- a/docs/.vitepress/theme/styles/rainbow.css
+++ b/docs/.vitepress/theme/styles/rainbow.css
@@ -1,89 +1,661 @@
 @keyframes rainbow {
-  0% { --vp-c-brand-1: #00a98e; --vp-c-brand-light: #4ad1b4; --vp-c-brand-lighter: #78fadc; --vp-c-brand-dark: #008269; --vp-c-brand-darker: #005d47; --vp-c-brand-next: #009ff7; }
-1.25% { --vp-c-brand-1: #00a996; --vp-c-brand-light: #4bd1bd; --vp-c-brand-lighter: #79fbe5; --vp-c-brand-dark: #008371; --vp-c-brand-darker: #005e4f; --vp-c-brand-next: #009dfa; }
-2.5% { --vp-c-brand-1: #00a99f; --vp-c-brand-light: #4cd1c6; --vp-c-brand-lighter: #7afbee; --vp-c-brand-dark: #00837a; --vp-c-brand-darker: #005e56; --vp-c-brand-next: #009bfc; }
-3.75% { --vp-c-brand-1: #00a9a7; --vp-c-brand-light: #4dd1cf; --vp-c-brand-lighter: #7bfbf8; --vp-c-brand-dark: #008382; --vp-c-brand-darker: #005e5e; --vp-c-brand-next: #0098fd; }
-  5% { --vp-c-brand-1: #00a9b0; --vp-c-brand-light: #4ed1d7; --vp-c-brand-lighter: #7dfaff; --vp-c-brand-dark: #00838a; --vp-c-brand-darker: #005e65; --vp-c-brand-next: #0096fd; }
-6.25% { --vp-c-brand-1: #00a9b8; --vp-c-brand-light: #4fd1e0; --vp-c-brand-lighter: #7efaff; --vp-c-brand-dark: #008391; --vp-c-brand-darker: #005e6d; --vp-c-brand-next: #0093fd; }
-7.5% { --vp-c-brand-1: #00a9c0; --vp-c-brand-light: #50d0e8; --vp-c-brand-lighter: #7ffaff; --vp-c-brand-dark: #008399; --vp-c-brand-darker: #005e74; --vp-c-brand-next: #2e90fc; }
-8.75% { --vp-c-brand-1: #00a8c7; --vp-c-brand-light: #51d0f0; --vp-c-brand-lighter: #81f9ff; --vp-c-brand-dark: #0082a0; --vp-c-brand-darker: #005e7b; --vp-c-brand-next: #4d8dfa; }
- 10% { --vp-c-brand-1: #00a8cf; --vp-c-brand-light: #52cff7; --vp-c-brand-lighter: #82f8ff; --vp-c-brand-dark: #0082a7; --vp-c-brand-darker: #005e81; --vp-c-brand-next: #638af8; }
-11.25% { --vp-c-brand-1: #00a7d5; --vp-c-brand-light: #53cfff; --vp-c-brand-lighter: #84f8ff; --vp-c-brand-dark: #0081ae; --vp-c-brand-darker: #005d87; --vp-c-brand-next: #7587f5; }
-12.5% { --vp-c-brand-1: #00a6dc; --vp-c-brand-light: #55ceff; --vp-c-brand-lighter: #85f7ff; --vp-c-brand-dark: #0081b4; --vp-c-brand-darker: #005d8d; --vp-c-brand-next: #8583f1; }
-13.75% { --vp-c-brand-1: #00a6e2; --vp-c-brand-light: #56cdff; --vp-c-brand-lighter: #87f6ff; --vp-c-brand-dark: #0080b9; --vp-c-brand-darker: #005c93; --vp-c-brand-next: #9280ed; }
- 15% { --vp-c-brand-1: #00a4e7; --vp-c-brand-light: #57ccff; --vp-c-brand-lighter: #88f4ff; --vp-c-brand-dark: #007fbf; --vp-c-brand-darker: #005b98; --vp-c-brand-next: #9f7ce9; }
-16.25% { --vp-c-brand-1: #00a3ec; --vp-c-brand-light: #58caff; --vp-c-brand-lighter: #89f3ff; --vp-c-brand-dark: #007ec3; --vp-c-brand-darker: #005b9c; --vp-c-brand-next: #aa78e3; }
-17.5% { --vp-c-brand-1: #00a2f1; --vp-c-brand-light: #58c9ff; --vp-c-brand-lighter: #8af1ff; --vp-c-brand-dark: #007dc8; --vp-c-brand-darker: #0059a0; --vp-c-brand-next: #b574dd; }
-18.75% { --vp-c-brand-1: #00a0f4; --vp-c-brand-light: #59c7ff; --vp-c-brand-lighter: #8bf0ff; --vp-c-brand-dark: #007bcb; --vp-c-brand-darker: #0058a3; --vp-c-brand-next: #be71d7; }
- 20% { --vp-c-brand-1: #009ff7; --vp-c-brand-light: #5ac5ff; --vp-c-brand-lighter: #8ceeff; --vp-c-brand-dark: #007ace; --vp-c-brand-darker: #0057a6; --vp-c-brand-next: #c76dd1; }
-21.25% { --vp-c-brand-1: #009dfa; --vp-c-brand-light: #5ac3ff; --vp-c-brand-lighter: #8decff; --vp-c-brand-dark: #0078d0; --vp-c-brand-darker: #0055a8; --vp-c-brand-next: #cf69c9; }
-22.5% { --vp-c-brand-1: #009bfc; --vp-c-brand-light: #5bc1ff; --vp-c-brand-lighter: #8de9ff; --vp-c-brand-dark: #0076d2; --vp-c-brand-darker: #0053aa; --vp-c-brand-next: #d566c2; }
-23.75% { --vp-c-brand-1: #0098fd; --vp-c-brand-light: #5bbfff; --vp-c-brand-lighter: #8ee7ff; --vp-c-brand-dark: #0074d3; --vp-c-brand-darker: #0051ab; --vp-c-brand-next: #dc63ba; }
- 25% { --vp-c-brand-1: #0096fd; --vp-c-brand-light: #5bbcff; --vp-c-brand-lighter: #8ee4ff; --vp-c-brand-dark: #0071d4; --vp-c-brand-darker: #004fab; --vp-c-brand-next: #e160b3; }
-26.25% { --vp-c-brand-1: #0093fd; --vp-c-brand-light: #5bb9ff; --vp-c-brand-lighter: #8ee1ff; --vp-c-brand-dark: #006fd3; --vp-c-brand-darker: #004dab; --vp-c-brand-next: #e65eab; }
-27.5% { --vp-c-brand-1: #2e90fc; --vp-c-brand-light: #69b6ff; --vp-c-brand-lighter: #99deff; --vp-c-brand-dark: #006cd2; --vp-c-brand-darker: #004baa; --vp-c-brand-next: #e95ca2; }
-28.75% { --vp-c-brand-1: #4d8dfa; --vp-c-brand-light: #7eb3ff; --vp-c-brand-lighter: #abdbff; --vp-c-brand-dark: #0069d1; --vp-c-brand-darker: #0048a9; --vp-c-brand-next: #ed5a9a; }
- 30% { --vp-c-brand-1: #638af8; --vp-c-brand-light: #8fb0ff; --vp-c-brand-lighter: #bbd7ff; --vp-c-brand-dark: #3066cf; --vp-c-brand-darker: #0045a7; --vp-c-brand-next: #ef5992; }
-31.25% { --vp-c-brand-1: #7587f5; --vp-c-brand-light: #9fadff; --vp-c-brand-lighter: #cad4ff; --vp-c-brand-dark: #4963cc; --vp-c-brand-darker: #0941a4; --vp-c-brand-next: #f15989; }
-32.5% { --vp-c-brand-1: #8583f1; --vp-c-brand-light: #aea9ff; --vp-c-brand-lighter: #d8d1ff; --vp-c-brand-dark: #5b5fc8; --vp-c-brand-darker: #2e3ea1; --vp-c-brand-next: #f25981; }
-33.75% { --vp-c-brand-1: #9280ed; --vp-c-brand-light: #bca6ff; --vp-c-brand-lighter: #e6cdff; --vp-c-brand-dark: #6a5cc4; --vp-c-brand-darker: #413a9d; --vp-c-brand-next: #f25a79; }
- 35% { --vp-c-brand-1: #9f7ce9; --vp-c-brand-light: #c8a2ff; --vp-c-brand-lighter: #f2c9ff; --vp-c-brand-dark: #7758c0; --vp-c-brand-darker: #503598; --vp-c-brand-next: #f25c71; }
-36.25% { --vp-c-brand-1: #aa78e3; --vp-c-brand-light: #d39eff; --vp-c-brand-lighter: #fec6ff; --vp-c-brand-dark: #8354bb; --vp-c-brand-darker: #5c3193; --vp-c-brand-next: #f15e69; }
-37.5% { --vp-c-brand-1: #b574dd; --vp-c-brand-light: #de9bff; --vp-c-brand-lighter: #ffc2ff; --vp-c-brand-dark: #8d50b5; --vp-c-brand-darker: #662c8e; --vp-c-brand-next: #ef6061; }
-38.75% { --vp-c-brand-1: #be71d7; --vp-c-brand-light: #e897ff; --vp-c-brand-lighter: #ffbfff; --vp-c-brand-dark: #964baf; --vp-c-brand-darker: #6f2688; --vp-c-brand-next: #ed635a; }
- 40% { --vp-c-brand-1: #c76dd1; --vp-c-brand-light: #f194fa; --vp-c-brand-lighter: #ffbcff; --vp-c-brand-dark: #9e47a9; --vp-c-brand-darker: #772082; --vp-c-brand-next: #eb6552; }
-41.25% { --vp-c-brand-1: #cf69c9; --vp-c-brand-light: #f991f2; --vp-c-brand-lighter: #ffb9ff; --vp-c-brand-dark: #a643a2; --vp-c-brand-darker: #7e197c; --vp-c-brand-next: #e8694b; }
-42.5% { --vp-c-brand-1: #d566c2; --vp-c-brand-light: #ff8deb; --vp-c-brand-lighter: #ffb6ff; --vp-c-brand-dark: #ac3f9b; --vp-c-brand-darker: #841075; --vp-c-brand-next: #e46c44; }
-43.75% { --vp-c-brand-1: #dc63ba; --vp-c-brand-light: #ff8be3; --vp-c-brand-lighter: #ffb3ff; --vp-c-brand-dark: #b23b94; --vp-c-brand-darker: #89046f; --vp-c-brand-next: #e06f3d; }
- 45% { --vp-c-brand-1: #e160b3; --vp-c-brand-light: #ff88db; --vp-c-brand-lighter: #ffb1ff; --vp-c-brand-dark: #b7378c; --vp-c-brand-darker: #8d0068; --vp-c-brand-next: #db7336; }
-46.25% { --vp-c-brand-1: #e65eab; --vp-c-brand-light: #ff86d2; --vp-c-brand-lighter: #ffaffb; --vp-c-brand-dark: #bb3485; --vp-c-brand-darker: #910060; --vp-c-brand-next: #d77630; }
-47.5% { --vp-c-brand-1: #e95ca2; --vp-c-brand-light: #ff84ca; --vp-c-brand-lighter: #ffadf2; --vp-c-brand-dark: #be317d; --vp-c-brand-darker: #940059; --vp-c-brand-next: #d17a2a; }
-48.75% { --vp-c-brand-1: #ed5a9a; --vp-c-brand-light: #ff83c1; --vp-c-brand-lighter: #fface9; --vp-c-brand-dark: #c12f75; --vp-c-brand-darker: #970052; --vp-c-brand-next: #cc7d24; }
- 50% { --vp-c-brand-1: #ef5992; --vp-c-brand-light: #ff82b8; --vp-c-brand-lighter: #ffabe0; --vp-c-brand-dark: #c32d6d; --vp-c-brand-darker: #98004b; --vp-c-brand-next: #c6811e; }
-51.25% { --vp-c-brand-1: #f15989; --vp-c-brand-light: #ff82af; --vp-c-brand-lighter: #ffabd7; --vp-c-brand-dark: #c52d65; --vp-c-brand-darker: #9a0043; --vp-c-brand-next: #bf8418; }
-52.5% { --vp-c-brand-1: #f25981; --vp-c-brand-light: #ff82a7; --vp-c-brand-lighter: #ffabce; --vp-c-brand-dark: #c52e5e; --vp-c-brand-darker: #9a003c; --vp-c-brand-next: #b98713; }
-53.75% { --vp-c-brand-1: #f25a79; --vp-c-brand-light: #ff839e; --vp-c-brand-lighter: #ffacc5; --vp-c-brand-dark: #c62f56; --vp-c-brand-darker: #9a0035; --vp-c-brand-next: #b28a0f; }
- 55% { --vp-c-brand-1: #f25c71; --vp-c-brand-light: #ff8496; --vp-c-brand-lighter: #ffadbc; --vp-c-brand-dark: #c5314e; --vp-c-brand-darker: #99002e; --vp-c-brand-next: #ab8d0c; }
-56.25% { --vp-c-brand-1: #f15e69; --vp-c-brand-light: #ff868d; --vp-c-brand-lighter: #ffaeb4; --vp-c-brand-dark: #c43447; --vp-c-brand-darker: #980027; --vp-c-brand-next: #a3900b; }
-57.5% { --vp-c-brand-1: #ef6061; --vp-c-brand-light: #ff8885; --vp-c-brand-lighter: #ffb0ab; --vp-c-brand-dark: #c3373f; --vp-c-brand-darker: #970020; --vp-c-brand-next: #9c920d; }
-58.75% { --vp-c-brand-1: #ed635a; --vp-c-brand-light: #ff8a7d; --vp-c-brand-lighter: #ffb2a3; --vp-c-brand-dark: #c13b38; --vp-c-brand-darker: #940619; --vp-c-brand-next: #949510; }
- 60% { --vp-c-brand-1: #eb6552; --vp-c-brand-light: #ff8d76; --vp-c-brand-lighter: #ffb59b; --vp-c-brand-dark: #be3e31; --vp-c-brand-darker: #921111; --vp-c-brand-next: #8b9715; }
-61.25% { --vp-c-brand-1: #e8694b; --vp-c-brand-light: #ff8f6e; --vp-c-brand-lighter: #ffb794; --vp-c-brand-dark: #bb4229; --vp-c-brand-darker: #8f1908; --vp-c-brand-next: #83991b; }
-62.5% { --vp-c-brand-1: #e46c44; --vp-c-brand-light: #ff9367; --vp-c-brand-lighter: #ffba8c; --vp-c-brand-dark: #b74622; --vp-c-brand-darker: #8c1f00; --vp-c-brand-next: #7a9b21; }
-63.75% { --vp-c-brand-1: #e06f3d; --vp-c-brand-light: #ff9661; --vp-c-brand-lighter: #ffbd86; --vp-c-brand-dark: #b44a1a; --vp-c-brand-darker: #882500; --vp-c-brand-next: #719d27; }
- 65% { --vp-c-brand-1: #db7336; --vp-c-brand-light: #ff995a; --vp-c-brand-lighter: #ffc17f; --vp-c-brand-dark: #af4e11; --vp-c-brand-darker: #842a00; --vp-c-brand-next: #679e2e; }
-66.25% { --vp-c-brand-1: #d77630; --vp-c-brand-light: #ff9c54; --vp-c-brand-lighter: #ffc47a; --vp-c-brand-dark: #ab5206; --vp-c-brand-darker: #802f00; --vp-c-brand-next: #5da035; }
-67.5% { --vp-c-brand-1: #d17a2a; --vp-c-brand-light: #fea04f; --vp-c-brand-lighter: #ffc774; --vp-c-brand-dark: #a55600; --vp-c-brand-darker: #7b3300; --vp-c-brand-next: #51a13c; }
-68.75% { --vp-c-brand-1: #cc7d24; --vp-c-brand-light: #f8a34a; --vp-c-brand-lighter: #ffca70; --vp-c-brand-dark: #a05900; --vp-c-brand-darker: #773700; --vp-c-brand-next: #44a244; }
- 70% { --vp-c-brand-1: #c6811e; --vp-c-brand-light: #f2a646; --vp-c-brand-lighter: #ffce6c; --vp-c-brand-dark: #9b5d00; --vp-c-brand-darker: #713b00; --vp-c-brand-next: #34a44b; }
-71.25% { --vp-c-brand-1: #bf8418; --vp-c-brand-light: #ebaa42; --vp-c-brand-lighter: #ffd168; --vp-c-brand-dark: #956000; --vp-c-brand-darker: #6c3e00; --vp-c-brand-next: #1ba553; }
-72.5% { --vp-c-brand-1: #b98713; --vp-c-brand-light: #e4ad3f; --vp-c-brand-lighter: #ffd466; --vp-c-brand-dark: #8e6300; --vp-c-brand-darker: #674100; --vp-c-brand-next: #00a65b; }
-73.75% { --vp-c-brand-1: #b28a0f; --vp-c-brand-light: #ddb03d; --vp-c-brand-lighter: #ffd764; --vp-c-brand-dark: #886600; --vp-c-brand-darker: #614400; --vp-c-brand-next: #00a663; }
- 75% { --vp-c-brand-1: #ab8d0c; --vp-c-brand-light: #d5b33c; --vp-c-brand-lighter: #ffda63; --vp-c-brand-dark: #816900; --vp-c-brand-darker: #5b4700; --vp-c-brand-next: #00a76c; }
-76.25% { --vp-c-brand-1: #a3900b; --vp-c-brand-light: #cdb63c; --vp-c-brand-lighter: #f8dd63; --vp-c-brand-dark: #7a6b00; --vp-c-brand-darker: #554900; --vp-c-brand-next: #00a874; }
-77.5% { --vp-c-brand-1: #9c920d; --vp-c-brand-light: #c5b83d; --vp-c-brand-lighter: #f0e064; --vp-c-brand-dark: #736e00; --vp-c-brand-darker: #4e4b00; --vp-c-brand-next: #00a87d; }
-78.75% { --vp-c-brand-1: #949510; --vp-c-brand-light: #bdbb3e; --vp-c-brand-lighter: #e7e366; --vp-c-brand-dark: #6c7000; --vp-c-brand-darker: #474d00; --vp-c-brand-next: #00a985; }
- 80% { --vp-c-brand-1: #8b9715; --vp-c-brand-light: #b4bd41; --vp-c-brand-lighter: #dee668; --vp-c-brand-dark: #647200; --vp-c-brand-darker: #404f00; --vp-c-brand-next: #00a98e; }
-81.25% { --vp-c-brand-1: #83991b; --vp-c-brand-light: #abc045; --vp-c-brand-lighter: #d4e86c; --vp-c-brand-dark: #5c7400; --vp-c-brand-darker: #385100; --vp-c-brand-next: #00a996; }
-82.5% { --vp-c-brand-1: #7a9b21; --vp-c-brand-light: #a2c249; --vp-c-brand-lighter: #cbea70; --vp-c-brand-dark: #537600; --vp-c-brand-darker: #2f5200; --vp-c-brand-next: #00a99f; }
-83.75% { --vp-c-brand-1: #719d27; --vp-c-brand-light: #98c44e; --vp-c-brand-lighter: #c1ec75; --vp-c-brand-dark: #4a7700; --vp-c-brand-darker: #255300; --vp-c-brand-next: #00a9a7; }
- 85% { --vp-c-brand-1: #679e2e; --vp-c-brand-light: #8ec654; --vp-c-brand-lighter: #b7ee7a; --vp-c-brand-dark: #407900; --vp-c-brand-darker: #185500; --vp-c-brand-next: #00a9b0; }
-86.25% { --vp-c-brand-1: #5da035; --vp-c-brand-light: #84c75a; --vp-c-brand-lighter: #acf080; --vp-c-brand-dark: #357a0a; --vp-c-brand-darker: #015600; --vp-c-brand-next: #00a9b8; }
-87.5% { --vp-c-brand-1: #51a13c; --vp-c-brand-light: #79c961; --vp-c-brand-lighter: #a1f287; --vp-c-brand-dark: #277b16; --vp-c-brand-darker: #005700; --vp-c-brand-next: #00a9c0; }
-88.75% { --vp-c-brand-1: #44a244; --vp-c-brand-light: #6dca68; --vp-c-brand-lighter: #96f48e; --vp-c-brand-dark: #117c1f; --vp-c-brand-darker: #005700; --vp-c-brand-next: #00a8c7; }
- 90% { --vp-c-brand-1: #34a44b; --vp-c-brand-light: #60cc70; --vp-c-brand-lighter: #89f595; --vp-c-brand-dark: #007d28; --vp-c-brand-darker: #005801; --vp-c-brand-next: #00a8cf; }
-91.25% { --vp-c-brand-1: #1ba553; --vp-c-brand-light: #51cd77; --vp-c-brand-lighter: #7cf69d; --vp-c-brand-dark: #007e30; --vp-c-brand-darker: #00590d; --vp-c-brand-next: #00a7d5; }
-92.5% { --vp-c-brand-1: #00a65b; --vp-c-brand-light: #48ce80; --vp-c-brand-lighter: #75f7a6; --vp-c-brand-dark: #007f38; --vp-c-brand-darker: #005917; --vp-c-brand-next: #00a6dc; }
-93.75% { --vp-c-brand-1: #00a663; --vp-c-brand-light: #48cf88; --vp-c-brand-lighter: #75f8ae; --vp-c-brand-dark: #008040; --vp-c-brand-darker: #005a20; --vp-c-brand-next: #00a6e2; }
- 95% { --vp-c-brand-1: #00a76c; --vp-c-brand-light: #49cf91; --vp-c-brand-lighter: #76f9b7; --vp-c-brand-dark: #008049; --vp-c-brand-darker: #005b28; --vp-c-brand-next: #00a4e7; }
-96.25% { --vp-c-brand-1: #00a874; --vp-c-brand-light: #49d099; --vp-c-brand-lighter: #76f9c0; --vp-c-brand-dark: #008151; --vp-c-brand-darker: #005c30; --vp-c-brand-next: #00a3ec; }
-97.5% { --vp-c-brand-1: #00a87d; --vp-c-brand-light: #49d0a2; --vp-c-brand-lighter: #77fac9; --vp-c-brand-dark: #008159; --vp-c-brand-darker: #005c37; --vp-c-brand-next: #00a2f1; }
-98.75% { --vp-c-brand-1: #00a985; --vp-c-brand-light: #4ad1ab; --vp-c-brand-lighter: #77fad3; --vp-c-brand-dark: #008261; --vp-c-brand-darker: #005d3f; --vp-c-brand-next: #00a0f4; }
-100% { --vp-c-brand-1: #00a98e; --vp-c-brand-light: #4ad1b4; --vp-c-brand-lighter: #78fadc; --vp-c-brand-dark: #008269; --vp-c-brand-darker: #005d47; --vp-c-brand-next: #009ff7; }
+  0% {
+    --vp-c-brand-1: #00a98e;
+    --vp-c-brand-light: #4ad1b4;
+    --vp-c-brand-lighter: #78fadc;
+    --vp-c-brand-dark: #008269;
+    --vp-c-brand-darker: #005d47;
+    --vp-c-brand-next: #009ff7;
+  }
+  1.25% {
+    --vp-c-brand-1: #00a996;
+    --vp-c-brand-light: #4bd1bd;
+    --vp-c-brand-lighter: #79fbe5;
+    --vp-c-brand-dark: #008371;
+    --vp-c-brand-darker: #005e4f;
+    --vp-c-brand-next: #009dfa;
+  }
+  2.5% {
+    --vp-c-brand-1: #00a99f;
+    --vp-c-brand-light: #4cd1c6;
+    --vp-c-brand-lighter: #7afbee;
+    --vp-c-brand-dark: #00837a;
+    --vp-c-brand-darker: #005e56;
+    --vp-c-brand-next: #009bfc;
+  }
+  3.75% {
+    --vp-c-brand-1: #00a9a7;
+    --vp-c-brand-light: #4dd1cf;
+    --vp-c-brand-lighter: #7bfbf8;
+    --vp-c-brand-dark: #008382;
+    --vp-c-brand-darker: #005e5e;
+    --vp-c-brand-next: #0098fd;
+  }
+  5% {
+    --vp-c-brand-1: #00a9b0;
+    --vp-c-brand-light: #4ed1d7;
+    --vp-c-brand-lighter: #7dfaff;
+    --vp-c-brand-dark: #00838a;
+    --vp-c-brand-darker: #005e65;
+    --vp-c-brand-next: #0096fd;
+  }
+  6.25% {
+    --vp-c-brand-1: #00a9b8;
+    --vp-c-brand-light: #4fd1e0;
+    --vp-c-brand-lighter: #7efaff;
+    --vp-c-brand-dark: #008391;
+    --vp-c-brand-darker: #005e6d;
+    --vp-c-brand-next: #0093fd;
+  }
+  7.5% {
+    --vp-c-brand-1: #00a9c0;
+    --vp-c-brand-light: #50d0e8;
+    --vp-c-brand-lighter: #7ffaff;
+    --vp-c-brand-dark: #008399;
+    --vp-c-brand-darker: #005e74;
+    --vp-c-brand-next: #2e90fc;
+  }
+  8.75% {
+    --vp-c-brand-1: #00a8c7;
+    --vp-c-brand-light: #51d0f0;
+    --vp-c-brand-lighter: #81f9ff;
+    --vp-c-brand-dark: #0082a0;
+    --vp-c-brand-darker: #005e7b;
+    --vp-c-brand-next: #4d8dfa;
+  }
+  10% {
+    --vp-c-brand-1: #00a8cf;
+    --vp-c-brand-light: #52cff7;
+    --vp-c-brand-lighter: #82f8ff;
+    --vp-c-brand-dark: #0082a7;
+    --vp-c-brand-darker: #005e81;
+    --vp-c-brand-next: #638af8;
+  }
+  11.25% {
+    --vp-c-brand-1: #00a7d5;
+    --vp-c-brand-light: #53cfff;
+    --vp-c-brand-lighter: #84f8ff;
+    --vp-c-brand-dark: #0081ae;
+    --vp-c-brand-darker: #005d87;
+    --vp-c-brand-next: #7587f5;
+  }
+  12.5% {
+    --vp-c-brand-1: #00a6dc;
+    --vp-c-brand-light: #55ceff;
+    --vp-c-brand-lighter: #85f7ff;
+    --vp-c-brand-dark: #0081b4;
+    --vp-c-brand-darker: #005d8d;
+    --vp-c-brand-next: #8583f1;
+  }
+  13.75% {
+    --vp-c-brand-1: #00a6e2;
+    --vp-c-brand-light: #56cdff;
+    --vp-c-brand-lighter: #87f6ff;
+    --vp-c-brand-dark: #0080b9;
+    --vp-c-brand-darker: #005c93;
+    --vp-c-brand-next: #9280ed;
+  }
+  15% {
+    --vp-c-brand-1: #00a4e7;
+    --vp-c-brand-light: #57ccff;
+    --vp-c-brand-lighter: #88f4ff;
+    --vp-c-brand-dark: #007fbf;
+    --vp-c-brand-darker: #005b98;
+    --vp-c-brand-next: #9f7ce9;
+  }
+  16.25% {
+    --vp-c-brand-1: #00a3ec;
+    --vp-c-brand-light: #58caff;
+    --vp-c-brand-lighter: #89f3ff;
+    --vp-c-brand-dark: #007ec3;
+    --vp-c-brand-darker: #005b9c;
+    --vp-c-brand-next: #aa78e3;
+  }
+  17.5% {
+    --vp-c-brand-1: #00a2f1;
+    --vp-c-brand-light: #58c9ff;
+    --vp-c-brand-lighter: #8af1ff;
+    --vp-c-brand-dark: #007dc8;
+    --vp-c-brand-darker: #0059a0;
+    --vp-c-brand-next: #b574dd;
+  }
+  18.75% {
+    --vp-c-brand-1: #00a0f4;
+    --vp-c-brand-light: #59c7ff;
+    --vp-c-brand-lighter: #8bf0ff;
+    --vp-c-brand-dark: #007bcb;
+    --vp-c-brand-darker: #0058a3;
+    --vp-c-brand-next: #be71d7;
+  }
+  20% {
+    --vp-c-brand-1: #009ff7;
+    --vp-c-brand-light: #5ac5ff;
+    --vp-c-brand-lighter: #8ceeff;
+    --vp-c-brand-dark: #007ace;
+    --vp-c-brand-darker: #0057a6;
+    --vp-c-brand-next: #c76dd1;
+  }
+  21.25% {
+    --vp-c-brand-1: #009dfa;
+    --vp-c-brand-light: #5ac3ff;
+    --vp-c-brand-lighter: #8decff;
+    --vp-c-brand-dark: #0078d0;
+    --vp-c-brand-darker: #0055a8;
+    --vp-c-brand-next: #cf69c9;
+  }
+  22.5% {
+    --vp-c-brand-1: #009bfc;
+    --vp-c-brand-light: #5bc1ff;
+    --vp-c-brand-lighter: #8de9ff;
+    --vp-c-brand-dark: #0076d2;
+    --vp-c-brand-darker: #0053aa;
+    --vp-c-brand-next: #d566c2;
+  }
+  23.75% {
+    --vp-c-brand-1: #0098fd;
+    --vp-c-brand-light: #5bbfff;
+    --vp-c-brand-lighter: #8ee7ff;
+    --vp-c-brand-dark: #0074d3;
+    --vp-c-brand-darker: #0051ab;
+    --vp-c-brand-next: #dc63ba;
+  }
+  25% {
+    --vp-c-brand-1: #0096fd;
+    --vp-c-brand-light: #5bbcff;
+    --vp-c-brand-lighter: #8ee4ff;
+    --vp-c-brand-dark: #0071d4;
+    --vp-c-brand-darker: #004fab;
+    --vp-c-brand-next: #e160b3;
+  }
+  26.25% {
+    --vp-c-brand-1: #0093fd;
+    --vp-c-brand-light: #5bb9ff;
+    --vp-c-brand-lighter: #8ee1ff;
+    --vp-c-brand-dark: #006fd3;
+    --vp-c-brand-darker: #004dab;
+    --vp-c-brand-next: #e65eab;
+  }
+  27.5% {
+    --vp-c-brand-1: #2e90fc;
+    --vp-c-brand-light: #69b6ff;
+    --vp-c-brand-lighter: #99deff;
+    --vp-c-brand-dark: #006cd2;
+    --vp-c-brand-darker: #004baa;
+    --vp-c-brand-next: #e95ca2;
+  }
+  28.75% {
+    --vp-c-brand-1: #4d8dfa;
+    --vp-c-brand-light: #7eb3ff;
+    --vp-c-brand-lighter: #abdbff;
+    --vp-c-brand-dark: #0069d1;
+    --vp-c-brand-darker: #0048a9;
+    --vp-c-brand-next: #ed5a9a;
+  }
+  30% {
+    --vp-c-brand-1: #638af8;
+    --vp-c-brand-light: #8fb0ff;
+    --vp-c-brand-lighter: #bbd7ff;
+    --vp-c-brand-dark: #3066cf;
+    --vp-c-brand-darker: #0045a7;
+    --vp-c-brand-next: #ef5992;
+  }
+  31.25% {
+    --vp-c-brand-1: #7587f5;
+    --vp-c-brand-light: #9fadff;
+    --vp-c-brand-lighter: #cad4ff;
+    --vp-c-brand-dark: #4963cc;
+    --vp-c-brand-darker: #0941a4;
+    --vp-c-brand-next: #f15989;
+  }
+  32.5% {
+    --vp-c-brand-1: #8583f1;
+    --vp-c-brand-light: #aea9ff;
+    --vp-c-brand-lighter: #d8d1ff;
+    --vp-c-brand-dark: #5b5fc8;
+    --vp-c-brand-darker: #2e3ea1;
+    --vp-c-brand-next: #f25981;
+  }
+  33.75% {
+    --vp-c-brand-1: #9280ed;
+    --vp-c-brand-light: #bca6ff;
+    --vp-c-brand-lighter: #e6cdff;
+    --vp-c-brand-dark: #6a5cc4;
+    --vp-c-brand-darker: #413a9d;
+    --vp-c-brand-next: #f25a79;
+  }
+  35% {
+    --vp-c-brand-1: #9f7ce9;
+    --vp-c-brand-light: #c8a2ff;
+    --vp-c-brand-lighter: #f2c9ff;
+    --vp-c-brand-dark: #7758c0;
+    --vp-c-brand-darker: #503598;
+    --vp-c-brand-next: #f25c71;
+  }
+  36.25% {
+    --vp-c-brand-1: #aa78e3;
+    --vp-c-brand-light: #d39eff;
+    --vp-c-brand-lighter: #fec6ff;
+    --vp-c-brand-dark: #8354bb;
+    --vp-c-brand-darker: #5c3193;
+    --vp-c-brand-next: #f15e69;
+  }
+  37.5% {
+    --vp-c-brand-1: #b574dd;
+    --vp-c-brand-light: #de9bff;
+    --vp-c-brand-lighter: #ffc2ff;
+    --vp-c-brand-dark: #8d50b5;
+    --vp-c-brand-darker: #662c8e;
+    --vp-c-brand-next: #ef6061;
+  }
+  38.75% {
+    --vp-c-brand-1: #be71d7;
+    --vp-c-brand-light: #e897ff;
+    --vp-c-brand-lighter: #ffbfff;
+    --vp-c-brand-dark: #964baf;
+    --vp-c-brand-darker: #6f2688;
+    --vp-c-brand-next: #ed635a;
+  }
+  40% {
+    --vp-c-brand-1: #c76dd1;
+    --vp-c-brand-light: #f194fa;
+    --vp-c-brand-lighter: #ffbcff;
+    --vp-c-brand-dark: #9e47a9;
+    --vp-c-brand-darker: #772082;
+    --vp-c-brand-next: #eb6552;
+  }
+  41.25% {
+    --vp-c-brand-1: #cf69c9;
+    --vp-c-brand-light: #f991f2;
+    --vp-c-brand-lighter: #ffb9ff;
+    --vp-c-brand-dark: #a643a2;
+    --vp-c-brand-darker: #7e197c;
+    --vp-c-brand-next: #e8694b;
+  }
+  42.5% {
+    --vp-c-brand-1: #d566c2;
+    --vp-c-brand-light: #ff8deb;
+    --vp-c-brand-lighter: #ffb6ff;
+    --vp-c-brand-dark: #ac3f9b;
+    --vp-c-brand-darker: #841075;
+    --vp-c-brand-next: #e46c44;
+  }
+  43.75% {
+    --vp-c-brand-1: #dc63ba;
+    --vp-c-brand-light: #ff8be3;
+    --vp-c-brand-lighter: #ffb3ff;
+    --vp-c-brand-dark: #b23b94;
+    --vp-c-brand-darker: #89046f;
+    --vp-c-brand-next: #e06f3d;
+  }
+  45% {
+    --vp-c-brand-1: #e160b3;
+    --vp-c-brand-light: #ff88db;
+    --vp-c-brand-lighter: #ffb1ff;
+    --vp-c-brand-dark: #b7378c;
+    --vp-c-brand-darker: #8d0068;
+    --vp-c-brand-next: #db7336;
+  }
+  46.25% {
+    --vp-c-brand-1: #e65eab;
+    --vp-c-brand-light: #ff86d2;
+    --vp-c-brand-lighter: #ffaffb;
+    --vp-c-brand-dark: #bb3485;
+    --vp-c-brand-darker: #910060;
+    --vp-c-brand-next: #d77630;
+  }
+  47.5% {
+    --vp-c-brand-1: #e95ca2;
+    --vp-c-brand-light: #ff84ca;
+    --vp-c-brand-lighter: #ffadf2;
+    --vp-c-brand-dark: #be317d;
+    --vp-c-brand-darker: #940059;
+    --vp-c-brand-next: #d17a2a;
+  }
+  48.75% {
+    --vp-c-brand-1: #ed5a9a;
+    --vp-c-brand-light: #ff83c1;
+    --vp-c-brand-lighter: #fface9;
+    --vp-c-brand-dark: #c12f75;
+    --vp-c-brand-darker: #970052;
+    --vp-c-brand-next: #cc7d24;
+  }
+  50% {
+    --vp-c-brand-1: #ef5992;
+    --vp-c-brand-light: #ff82b8;
+    --vp-c-brand-lighter: #ffabe0;
+    --vp-c-brand-dark: #c32d6d;
+    --vp-c-brand-darker: #98004b;
+    --vp-c-brand-next: #c6811e;
+  }
+  51.25% {
+    --vp-c-brand-1: #f15989;
+    --vp-c-brand-light: #ff82af;
+    --vp-c-brand-lighter: #ffabd7;
+    --vp-c-brand-dark: #c52d65;
+    --vp-c-brand-darker: #9a0043;
+    --vp-c-brand-next: #bf8418;
+  }
+  52.5% {
+    --vp-c-brand-1: #f25981;
+    --vp-c-brand-light: #ff82a7;
+    --vp-c-brand-lighter: #ffabce;
+    --vp-c-brand-dark: #c52e5e;
+    --vp-c-brand-darker: #9a003c;
+    --vp-c-brand-next: #b98713;
+  }
+  53.75% {
+    --vp-c-brand-1: #f25a79;
+    --vp-c-brand-light: #ff839e;
+    --vp-c-brand-lighter: #ffacc5;
+    --vp-c-brand-dark: #c62f56;
+    --vp-c-brand-darker: #9a0035;
+    --vp-c-brand-next: #b28a0f;
+  }
+  55% {
+    --vp-c-brand-1: #f25c71;
+    --vp-c-brand-light: #ff8496;
+    --vp-c-brand-lighter: #ffadbc;
+    --vp-c-brand-dark: #c5314e;
+    --vp-c-brand-darker: #99002e;
+    --vp-c-brand-next: #ab8d0c;
+  }
+  56.25% {
+    --vp-c-brand-1: #f15e69;
+    --vp-c-brand-light: #ff868d;
+    --vp-c-brand-lighter: #ffaeb4;
+    --vp-c-brand-dark: #c43447;
+    --vp-c-brand-darker: #980027;
+    --vp-c-brand-next: #a3900b;
+  }
+  57.5% {
+    --vp-c-brand-1: #ef6061;
+    --vp-c-brand-light: #ff8885;
+    --vp-c-brand-lighter: #ffb0ab;
+    --vp-c-brand-dark: #c3373f;
+    --vp-c-brand-darker: #970020;
+    --vp-c-brand-next: #9c920d;
+  }
+  58.75% {
+    --vp-c-brand-1: #ed635a;
+    --vp-c-brand-light: #ff8a7d;
+    --vp-c-brand-lighter: #ffb2a3;
+    --vp-c-brand-dark: #c13b38;
+    --vp-c-brand-darker: #940619;
+    --vp-c-brand-next: #949510;
+  }
+  60% {
+    --vp-c-brand-1: #eb6552;
+    --vp-c-brand-light: #ff8d76;
+    --vp-c-brand-lighter: #ffb59b;
+    --vp-c-brand-dark: #be3e31;
+    --vp-c-brand-darker: #921111;
+    --vp-c-brand-next: #8b9715;
+  }
+  61.25% {
+    --vp-c-brand-1: #e8694b;
+    --vp-c-brand-light: #ff8f6e;
+    --vp-c-brand-lighter: #ffb794;
+    --vp-c-brand-dark: #bb4229;
+    --vp-c-brand-darker: #8f1908;
+    --vp-c-brand-next: #83991b;
+  }
+  62.5% {
+    --vp-c-brand-1: #e46c44;
+    --vp-c-brand-light: #ff9367;
+    --vp-c-brand-lighter: #ffba8c;
+    --vp-c-brand-dark: #b74622;
+    --vp-c-brand-darker: #8c1f00;
+    --vp-c-brand-next: #7a9b21;
+  }
+  63.75% {
+    --vp-c-brand-1: #e06f3d;
+    --vp-c-brand-light: #ff9661;
+    --vp-c-brand-lighter: #ffbd86;
+    --vp-c-brand-dark: #b44a1a;
+    --vp-c-brand-darker: #882500;
+    --vp-c-brand-next: #719d27;
+  }
+  65% {
+    --vp-c-brand-1: #db7336;
+    --vp-c-brand-light: #ff995a;
+    --vp-c-brand-lighter: #ffc17f;
+    --vp-c-brand-dark: #af4e11;
+    --vp-c-brand-darker: #842a00;
+    --vp-c-brand-next: #679e2e;
+  }
+  66.25% {
+    --vp-c-brand-1: #d77630;
+    --vp-c-brand-light: #ff9c54;
+    --vp-c-brand-lighter: #ffc47a;
+    --vp-c-brand-dark: #ab5206;
+    --vp-c-brand-darker: #802f00;
+    --vp-c-brand-next: #5da035;
+  }
+  67.5% {
+    --vp-c-brand-1: #d17a2a;
+    --vp-c-brand-light: #fea04f;
+    --vp-c-brand-lighter: #ffc774;
+    --vp-c-brand-dark: #a55600;
+    --vp-c-brand-darker: #7b3300;
+    --vp-c-brand-next: #51a13c;
+  }
+  68.75% {
+    --vp-c-brand-1: #cc7d24;
+    --vp-c-brand-light: #f8a34a;
+    --vp-c-brand-lighter: #ffca70;
+    --vp-c-brand-dark: #a05900;
+    --vp-c-brand-darker: #773700;
+    --vp-c-brand-next: #44a244;
+  }
+  70% {
+    --vp-c-brand-1: #c6811e;
+    --vp-c-brand-light: #f2a646;
+    --vp-c-brand-lighter: #ffce6c;
+    --vp-c-brand-dark: #9b5d00;
+    --vp-c-brand-darker: #713b00;
+    --vp-c-brand-next: #34a44b;
+  }
+  71.25% {
+    --vp-c-brand-1: #bf8418;
+    --vp-c-brand-light: #ebaa42;
+    --vp-c-brand-lighter: #ffd168;
+    --vp-c-brand-dark: #956000;
+    --vp-c-brand-darker: #6c3e00;
+    --vp-c-brand-next: #1ba553;
+  }
+  72.5% {
+    --vp-c-brand-1: #b98713;
+    --vp-c-brand-light: #e4ad3f;
+    --vp-c-brand-lighter: #ffd466;
+    --vp-c-brand-dark: #8e6300;
+    --vp-c-brand-darker: #674100;
+    --vp-c-brand-next: #00a65b;
+  }
+  73.75% {
+    --vp-c-brand-1: #b28a0f;
+    --vp-c-brand-light: #ddb03d;
+    --vp-c-brand-lighter: #ffd764;
+    --vp-c-brand-dark: #886600;
+    --vp-c-brand-darker: #614400;
+    --vp-c-brand-next: #00a663;
+  }
+  75% {
+    --vp-c-brand-1: #ab8d0c;
+    --vp-c-brand-light: #d5b33c;
+    --vp-c-brand-lighter: #ffda63;
+    --vp-c-brand-dark: #816900;
+    --vp-c-brand-darker: #5b4700;
+    --vp-c-brand-next: #00a76c;
+  }
+  76.25% {
+    --vp-c-brand-1: #a3900b;
+    --vp-c-brand-light: #cdb63c;
+    --vp-c-brand-lighter: #f8dd63;
+    --vp-c-brand-dark: #7a6b00;
+    --vp-c-brand-darker: #554900;
+    --vp-c-brand-next: #00a874;
+  }
+  77.5% {
+    --vp-c-brand-1: #9c920d;
+    --vp-c-brand-light: #c5b83d;
+    --vp-c-brand-lighter: #f0e064;
+    --vp-c-brand-dark: #736e00;
+    --vp-c-brand-darker: #4e4b00;
+    --vp-c-brand-next: #00a87d;
+  }
+  78.75% {
+    --vp-c-brand-1: #949510;
+    --vp-c-brand-light: #bdbb3e;
+    --vp-c-brand-lighter: #e7e366;
+    --vp-c-brand-dark: #6c7000;
+    --vp-c-brand-darker: #474d00;
+    --vp-c-brand-next: #00a985;
+  }
+  80% {
+    --vp-c-brand-1: #8b9715;
+    --vp-c-brand-light: #b4bd41;
+    --vp-c-brand-lighter: #dee668;
+    --vp-c-brand-dark: #647200;
+    --vp-c-brand-darker: #404f00;
+    --vp-c-brand-next: #00a98e;
+  }
+  81.25% {
+    --vp-c-brand-1: #83991b;
+    --vp-c-brand-light: #abc045;
+    --vp-c-brand-lighter: #d4e86c;
+    --vp-c-brand-dark: #5c7400;
+    --vp-c-brand-darker: #385100;
+    --vp-c-brand-next: #00a996;
+  }
+  82.5% {
+    --vp-c-brand-1: #7a9b21;
+    --vp-c-brand-light: #a2c249;
+    --vp-c-brand-lighter: #cbea70;
+    --vp-c-brand-dark: #537600;
+    --vp-c-brand-darker: #2f5200;
+    --vp-c-brand-next: #00a99f;
+  }
+  83.75% {
+    --vp-c-brand-1: #719d27;
+    --vp-c-brand-light: #98c44e;
+    --vp-c-brand-lighter: #c1ec75;
+    --vp-c-brand-dark: #4a7700;
+    --vp-c-brand-darker: #255300;
+    --vp-c-brand-next: #00a9a7;
+  }
+  85% {
+    --vp-c-brand-1: #679e2e;
+    --vp-c-brand-light: #8ec654;
+    --vp-c-brand-lighter: #b7ee7a;
+    --vp-c-brand-dark: #407900;
+    --vp-c-brand-darker: #185500;
+    --vp-c-brand-next: #00a9b0;
+  }
+  86.25% {
+    --vp-c-brand-1: #5da035;
+    --vp-c-brand-light: #84c75a;
+    --vp-c-brand-lighter: #acf080;
+    --vp-c-brand-dark: #357a0a;
+    --vp-c-brand-darker: #015600;
+    --vp-c-brand-next: #00a9b8;
+  }
+  87.5% {
+    --vp-c-brand-1: #51a13c;
+    --vp-c-brand-light: #79c961;
+    --vp-c-brand-lighter: #a1f287;
+    --vp-c-brand-dark: #277b16;
+    --vp-c-brand-darker: #005700;
+    --vp-c-brand-next: #00a9c0;
+  }
+  88.75% {
+    --vp-c-brand-1: #44a244;
+    --vp-c-brand-light: #6dca68;
+    --vp-c-brand-lighter: #96f48e;
+    --vp-c-brand-dark: #117c1f;
+    --vp-c-brand-darker: #005700;
+    --vp-c-brand-next: #00a8c7;
+  }
+  90% {
+    --vp-c-brand-1: #34a44b;
+    --vp-c-brand-light: #60cc70;
+    --vp-c-brand-lighter: #89f595;
+    --vp-c-brand-dark: #007d28;
+    --vp-c-brand-darker: #005801;
+    --vp-c-brand-next: #00a8cf;
+  }
+  91.25% {
+    --vp-c-brand-1: #1ba553;
+    --vp-c-brand-light: #51cd77;
+    --vp-c-brand-lighter: #7cf69d;
+    --vp-c-brand-dark: #007e30;
+    --vp-c-brand-darker: #00590d;
+    --vp-c-brand-next: #00a7d5;
+  }
+  92.5% {
+    --vp-c-brand-1: #00a65b;
+    --vp-c-brand-light: #48ce80;
+    --vp-c-brand-lighter: #75f7a6;
+    --vp-c-brand-dark: #007f38;
+    --vp-c-brand-darker: #005917;
+    --vp-c-brand-next: #00a6dc;
+  }
+  93.75% {
+    --vp-c-brand-1: #00a663;
+    --vp-c-brand-light: #48cf88;
+    --vp-c-brand-lighter: #75f8ae;
+    --vp-c-brand-dark: #008040;
+    --vp-c-brand-darker: #005a20;
+    --vp-c-brand-next: #00a6e2;
+  }
+  95% {
+    --vp-c-brand-1: #00a76c;
+    --vp-c-brand-light: #49cf91;
+    --vp-c-brand-lighter: #76f9b7;
+    --vp-c-brand-dark: #008049;
+    --vp-c-brand-darker: #005b28;
+    --vp-c-brand-next: #00a4e7;
+  }
+  96.25% {
+    --vp-c-brand-1: #00a874;
+    --vp-c-brand-light: #49d099;
+    --vp-c-brand-lighter: #76f9c0;
+    --vp-c-brand-dark: #008151;
+    --vp-c-brand-darker: #005c30;
+    --vp-c-brand-next: #00a3ec;
+  }
+  97.5% {
+    --vp-c-brand-1: #00a87d;
+    --vp-c-brand-light: #49d0a2;
+    --vp-c-brand-lighter: #77fac9;
+    --vp-c-brand-dark: #008159;
+    --vp-c-brand-darker: #005c37;
+    --vp-c-brand-next: #00a2f1;
+  }
+  98.75% {
+    --vp-c-brand-1: #00a985;
+    --vp-c-brand-light: #4ad1ab;
+    --vp-c-brand-lighter: #77fad3;
+    --vp-c-brand-dark: #008261;
+    --vp-c-brand-darker: #005d3f;
+    --vp-c-brand-next: #00a0f4;
+  }
+  100% {
+    --vp-c-brand-1: #00a98e;
+    --vp-c-brand-light: #4ad1b4;
+    --vp-c-brand-lighter: #78fadc;
+    --vp-c-brand-dark: #008269;
+    --vp-c-brand-darker: #005d47;
+    --vp-c-brand-next: #009ff7;
+  }
 }
 
 :root {
-  --vp-c-brand-1: #00a98e; --vp-c-brand-light: #4ad1b4; --vp-c-brand-lighter: #78fadc; --vp-c-brand-dark: #008269; --vp-c-brand-darker: #005d47; --vp-c-brand-next: #009ff7;
+  --vp-c-brand-1: #00a98e;
+  --vp-c-brand-light: #4ad1b4;
+  --vp-c-brand-lighter: #78fadc;
+  --vp-c-brand-dark: #008269;
+  --vp-c-brand-darker: #005d47;
+  --vp-c-brand-next: #009ff7;
   animation: rainbow 50s linear infinite;
 }
 
diff --git "a/docs/BackEnd/NodeJS/MongoDB\347\254\224\350\256\260.md" "b/docs/BackEnd/NodeJS/MongoDB\347\254\224\350\256\260.md"
index 7e3ddea0..e1f36280 100644
--- "a/docs/BackEnd/NodeJS/MongoDB\347\254\224\350\256\260.md"
+++ "b/docs/BackEnd/NodeJS/MongoDB\347\254\224\350\256\260.md"
@@ -1,4 +1,3 @@
-
 ## 一、相关概念
 
 **MongoDB是文档型的NoSQL数据库**。
@@ -7,8 +6,6 @@
 
 ![image-20220507220553150](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220507220553150.png)
 
-
-
 **优点**：
 
 1. 高性能
@@ -16,12 +13,8 @@
 2. 高可用性
 3. 可扩展分片集群
 
-
-
 **应用场景**：（数据量大、读写操作频繁、对事务要求不高）
 
-
-
 ## 二、数据库操作
 
 **查看所有数据库**
@@ -30,7 +23,7 @@
 show databases
 show dbs
 #连接数据库后默认在test库
-use testdb01 	#切换数据库
+use testdb01   #切换数据库
 ```
 
 ![image-20220507215028603](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220507215028603.png)
@@ -38,61 +31,57 @@ use testdb01 	#切换数据库
 **创建/删除数据库**
 
 ```shell
-use 数据库名 	# use testdb01
-db 	#查看所在数据库
-db.dropDatabase() 	#删除当前所在库
+use 数据库名   # use testdb01
+db   #查看所在数据库
+db.dropDatabase()   #删除当前所在库
 ```
 
-
-
 ## 三、集合相关操作
 
 ```shell
-show collections; 	# 查看数据库集合	show tables;
-db.createCollection('collectionName',[option]);	 #显式创建集合
-db.users.insert({'name':'李四'}); 	#隐式创建集合 往不存在的集合插入数据
-db.users.drop(); 	#删除集合
+show collections;   # 查看数据库集合  show tables;
+db.createCollection('collectionName',[option]);   #显式创建集合
+db.users.insert({'name':'李四'});   #隐式创建集合 往不存在的集合插入数据
+db.users.drop();   #删除集合
 ```
 
-
-
 ## 四、文档相关操作
 
 ### 1.查询
 
 ```shell
-db.users.find() 	#查询所有 SELECT * from users  
-db.getCollection('users').find()	#查询所有
-db.getCollection('users').findOne()	#查询第一个
-db.getCollection('users').findOne({name:'zhang3'})		#查询符合条件的第一个
-
-db.users.find( { name: 1, age: 1 } ) 	#SELECT _id,name,age from users 
-db.users.find( {  name: 1, age: 1, _id: 0 } ) 	#去除id字段
-db.users.find( { name: 0, age: 0 } ) 	#去除特定字段
-db.users.find().pretty() 	#格式化查询(适用于长/复杂数据)
+db.users.find()   #查询所有 SELECT * from users
+db.getCollection('users').find()  #查询所有
+db.getCollection('users').findOne()  #查询第一个
+db.getCollection('users').findOne({name:'zhang3'})    #查询符合条件的第一个
+
+db.users.find( { name: 1, age: 1 } )   #SELECT _id,name,age from users
+db.users.find( {  name: 1, age: 1, _id: 0 } )   #去除id字段
+db.users.find( { name: 0, age: 0 } )   #去除特定字段
+db.users.find().pretty()   #格式化查询(适用于长/复杂数据)
 ```
 
 - **等值查询**
 
 ```shell
 db.users.find( { age:18} )
-#	WHERE age = 18
+#  WHERE age = 18
 ```
 
 - **AND条件**
 
 ```shell
 db.users.find( { age: { $lt: 30 } ,sex:'男',} )
-#	WHERE sex = "男" AND age < 30
+#  WHERE sex = "男" AND age < 30
 db.users.find( { age:24, age: { $lt: 30 } } )  #相同字段and查询中出现多次,以最后一个为查询条件
-#	WHERE age < 30
+#  WHERE age < 30
 ```
 
 - **OR条件**
 
 ```shell
 db.users.find( { $or: [{sex:'男'}, { age: { $lt: 30 } } ] } )
-#	WHERE sex = "男" OR age < 30
+#  WHERE sex = "男" OR age < 30
 ```
 
 - **同时使用AND和OR条件**
@@ -100,9 +89,9 @@ db.users.find( { $or: [{sex:'男'}, { age: { $lt: 30 } } ] } )
 ```shell
 db.users.find( {
     { like:'美女'},
-     $or: [{sex:'男'}, { age: { $lt: 30 } },{ name: /^p/ } ] 
+     $or: [{sex:'男'}, { age: { $lt: 30 } },{ name: /^p/ } ]
 } )
-#	WHERE like = "美女" AND (sex = "男" OR age < 30 OR name LIKE "%p%")
+#  WHERE like = "美女" AND (sex = "男" OR age < 30 OR name LIKE "%p%")
 ```
 
 - **查询条件中使用查询操作符**
@@ -121,13 +110,13 @@ db.users.find( { name:/张/} ) #查询名字中含有'张'的所有
 - **数组中的查询**
 
 ```shell
-db.users.find(likes:{$size:3})	#查询'喜好'数组大小为3
+db.users.find(likes:{$size:3})  #查询'喜好'数组大小为3
 ```
 
 - **排序**
 
 ```shell
-db.users.find().sort({age:-1}) # 1 升序 	-1 降序 (没有这个字段的数据排在前面)
+db.users.find().sort({age:-1}) # 1 升序   -1 降序 (没有这个字段的数据排在前面)
 ```
 
 - **分页**
@@ -148,10 +137,6 @@ db.users.find().count()
 db.users.find().distinct('字段')
 ```
 
-
-
-
-
 - **对比语法:**
 
 ![image-20220507231641824](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220507231641824.png)
@@ -177,301 +162,289 @@ db.getCollection('users').insertMany([{name:'zhang3',age:19},{name:'zhang4',age:
 - **脚本方式**
 
 ```shell
-for(let i =0;i<5;i++){ 
-	db.users.insert({id:i,name:'zhang'+i})
+for(let i =0;i<5;i++){
+  db.users.insert({id:i,name:'zhang'+i})
 }
 ```
 
-
-
 ### 3.删除
 
 ```shell
-db.users.remove({}) 	#删除所有文档
-db.users.remove({_id:ObjectId("62767f841f41a9d7de748124")})	 #删除某一条
-db.users.remove({age:20})	 #删除满足条件的数据
+db.users.remove({})   #删除所有文档
+db.users.remove({_id:ObjectId("62767f841f41a9d7de748124")})   #删除某一条
+db.users.remove({age:20})   #删除满足条件的数据
 
-db.getCollection('users').deleteOne({name:'zhang3'})	 #删除某一条
-db.getCollection('users').deleteMany({age:18})	 #删除满足条件的数据
+db.getCollection('users').deleteOne({name:'zhang3'})   #删除某一条
+db.getCollection('users').deleteMany({age:18})   #删除满足条件的数据
 ```
 
-
-
 ### 4.更新
 
 语法 :
 
 ```js
-db.集合名称.update(
-	<query>,
+/* db.集合名称.update(
+  <query>,
     <update>,
     {
-        updert:<boolean>, 
+        updert:<boolean>,
         multi:<boolean>,
-    	writeConcern:<document> //抛出异常的级别
+      writeConcern:<document> //抛出异常的级别
     }
-)
+) */
 ```
 
-
-
 ```shell
 db.users.update({_id:ObjectId('627686574f57a31b328b63ab')},{$set:{age:24,likes:['代码','吃饭']}})  #指定更新
 db.users.update({age:18},{$set:{age:24,likes:['动漫','美女']}})  #更新匹配到的第一条
 db.users.update(
     {age:18},
     {$set:{age:24,likes:['动漫','美女']}},
-    {multi:true} 	#更新多条
-    {upsert:true} 	#不存在则插入
+    {multi:true}   #更新多条
+    {upsert:true}   #不存在则插入
 )  #更新匹配到的所有
 
-db.getCollection('users').update({age:18},{$set:{age:24,likes:['动漫','美女']}})	#更新匹配到的第一条
+db.getCollection('users').update({age:18},{$set:{age:24,likes:['动漫','美女']}})  #更新匹配到的第一条
 ```
 
-
-
 ## 五、[Mongoose学习](http://www.mongoosejs.net/docs/index.html)
 
 ### 1.插入
 
 ```js
-exports.register = async (req,res,next)=>{
+exports.register = async (req, res, next) => {
   try {
-     let user = new User(req.body.user)
-     await user.save() 
-     //转化为json才能移除密码
-     user = user.toJSON()
-     delete user.password
-     res.send({
-       msg:'注册成功!',
-       user
-     });
+    let user = new User(req.body.user);
+    await user.save();
+    // 转化为json才能移除密码
+    user = user.toJSON();
+    delete user.password;
+    res.send({
+      msg: "注册成功!",
+      user,
+    });
   } catch (error) {
-    next(error)
+    next(error);
   }
-}
+};
 ```
 
-
-
 ### 2.删除
 
 ```js
-exports.deleteArticle = async (req,res,next)=>{
+exports.deleteArticle = async (req, res, next) => {
   try {
-    let id = mongoose.Types.ObjectId(req.body.id)
-    const result = await Article.findByIdAndRemove(id)
-    console.log('result: ', result);
+    const id = mongoose.Types.ObjectId(req.body.id);
+    const result = await Article.findByIdAndRemove(id);
+    console.log("result: ", result);
     res.succ({
-      msg:'文章删除成功!'
-    })
+      msg: "文章删除成功!",
+    });
   } catch (error) {
-    res.errs(error)
+    res.errs(error);
   }
-}
+};
 ```
 
-
-
 ### 3.更新
 
 ```js
-exports.updateArticle =async (req,res,next)=>{
-  const article = req.body.article
+exports.updateArticle = async (req, res, next) => {
+  const article = req.body.article;
   try {
-    let {_id:id,title,desc,body,tagList} = req.body.article 
-    
-    let article  = await  Article.findByIdAndUpdate(id, { $set:req.body.article},  {new:true})
-      res.succ({
-        msg:'文章更新成功!',
-        article:article
-      })
+    const { _id: id, title, desc, body, tagList } = req.body.article;
+
+    const article = await Article.findByIdAndUpdate(
+      id,
+      { $set: req.body.article },
+      { new: true }
+    );
+    res.succ({
+      msg: "文章更新成功!",
+      article,
+    });
   } catch (error) {
-    res.errs(error)
+    res.errs(error);
   }
-}
+};
 ```
 
-
-
 ### 4.查询
 
 ```js
-//获取一个文章
+// 获取一个文章
 
-exports.getArticleById = async (req,res,next)=>{
+exports.getArticleById = async (req, res, next) => {
   try {
-      //映射用户
-    const article = await Article.findById(req.params.articleId).populate('author')
-    if(!article){
-     return  res.errs('文章不存在!')
-    }
+    // 映射用户
+    const article = await Article.findById(req.params.articleId).populate(
+      "author"
+    );
+    if (!article) return res.errs("文章不存在!");
+
     res.succ({
-      msg:'文章查询成功!',
-      article
-    })
+      msg: "文章查询成功!",
+      article,
+    });
   } catch (error) {
-    res.errs(error)
+    res.errs(error);
   }
-}
+};
 ```
 
-
-
 ```js
 // 获取文章列表
-exports.getArticles = async (req,res,next)=>{
+exports.getArticles = async (req, res, next) => {
   try {
-   const {limit=20,offset=0,tag ,author,favorited,sortBy}  = req.body.conditions  || {}
-    const filter = {}
-    if(tag){
-      filter.tagList = tag
-    }
-    //某个作者的文章
-    if(author){
-      const user = await User.findOne({username:author})
-        filter.author =user? user._id:null;
+    const {
+      limit = 20,
+      offset = 0,
+      tag,
+      author,
+      favorited,
+      sortBy,
+    } = req.body.conditions || {};
+    const filter = {};
+    if (tag) filter.tagList = tag;
+
+    // 某个作者的文章
+    if (author) {
+      const user = await User.findOne({ username: author });
+      filter.author = user ? user._id : null;
     }
-    const articleList = await Article.find(filter).skip(Number.parseInt(offset))
-    .limit(Number.parseInt(limit)).sort({creeateAt:-1,...sortBy})
+    const articleList = await Article.find(filter)
+      .skip(Number.parseInt(offset))
+      .limit(Number.parseInt(limit))
+      .sort({ creeateAt: -1, ...sortBy });
+
+    const articleCount = await Article.find(filter)
+      .skip(offset)
+      .limit(limit)
+      .count();
+    const totalCount = await Article.countDocuments();
+    if (!articleList) return res.errs("暂无文章!");
 
-    const articleCount = await Article.find(filter).skip(offset).limit(limit).count()
-    const totalCount = await Article.countDocuments()
-    if(!articleList){
-     return  res.errs('暂无文章!')
-    }
     res.succ({
-      msg:'文章查询列表成功!',
+      msg: "文章查询列表成功!",
       articleList,
       articleCount,
-      totalCount
-    })
+      totalCount,
+    });
   } catch (error) {
-    res.errs(error)
+    res.errs(error);
   }
-}
+};
 ```
 
-
-
 ### 5.模型
 
 📝model/index.js
 
 ```js
-const mongoose = require('mongoose');
-const { dbUri  } = require('../config/config.default')
+const mongoose = require("mongoose");
+const { dbUri } = require("../config/config.default");
 mongoose.connect(dbUri);
 
 const db = mongoose.connection;
 
-db.on('error', console.error.bind(console, 'MongDB数据库连接失败!'));
+db.on("error", console.error.bind(console, "MongDB数据库连接失败!"));
 
-db.once('open', function() {
-  console.log('MongDB数据库连接成功!');
+db.once("open", () => {
+  console.log("MongDB数据库连接成功!");
 });
-const Cat = mongoose.model('Cat', { name: String });
+const Cat = mongoose.model("Cat", { name: String });
 
 module.exports = {
-  User:mongoose.model('User',require('./user')),
-  Article:mongoose.model('Article',require('./article')),
-}
+  User: mongoose.model("User", require("./user")),
+  Article: mongoose.model("Article", require("./article")),
+};
 ```
 
-
-
 📝model/base.js
 
 ```js
-//基础模型 
-module.exports =  {
-  createAt:{
-    type:Date,
-    default:Date.now
+// 基础模型
+module.exports = {
+  createAt: {
+    type: Date,
+    default: Date.now,
   },
-  updtedAt:{
-    type:Date,
-    default:Date.now
-  }
-}
+  updtedAt: {
+    type: Date,
+    default: Date.now,
+  },
+};
 ```
 
-
-
 📝model/user.js
 
 ```js
-
-const mongoose =  require('mongoose')
-const baseSchema = require('./base')
-const md5 = require('../util/md5')
-//用户模型
+const mongoose = require("mongoose");
+const md5 = require("../util/md5");
+const baseSchema = require("./base");
+// 用户模型
 const userSchema = new mongoose.Schema({
   ...baseSchema,
-  username:{
-    type:String,
-    required:true
+  username: {
+    type: String,
+    required: true,
   },
-  password:{
-    type:String,
-    required:true,
-    set:value => md5(value),
-    select:false,
+  password: {
+    type: String,
+    required: true,
+    set: (value) => md5(value),
+    select: false,
   },
-  email:{
-    type:String,
-    required:true
+  email: {
+    type: String,
+    required: true,
   },
-  bio:{
-    type:String,
-    default:null
+  bio: {
+    type: String,
+    default: null,
   },
-  image:{
-    type:String,
-    default:null
+  image: {
+    type: String,
+    default: null,
   },
-  
-})
-module.exports = userSchema
+});
+module.exports = userSchema;
 ```
 
-
-
 📝model/article.js
 
 ```js
- const mongoose =  require('mongoose')
-const Schema = mongoose.Schema
-const baseSchema = require('./base')
-//文章模型
+const mongoose = require("mongoose");
+const Schema = mongoose.Schema;
+const baseSchema = require("./base");
+// 文章模型
 const articleSchema = new mongoose.Schema({
   ...baseSchema,
-  title:{
-    type:String,
-    required:true
+  title: {
+    type: String,
+    required: true,
   },
-  desc:{
-    type:String,
-    required:true
+  desc: {
+    type: String,
+    required: true,
   },
-  body:{
-    type:String,
-    required:true
+  body: {
+    type: String,
+    required: true,
   },
-  favoritesCount:{
-    type:Number,
-    default:0
+  favoritesCount: {
+    type: Number,
+    default: 0,
   },
-  tagList:{
-    type:[String],
-    default:null
+  tagList: {
+    type: [String],
+    default: null,
   },
-   author:{
-     type:Schema.Types.ObjectId,
-     ref:'User',
-     required:true,
-   }
-})
-module.exports = articleSchema
+  author: {
+    type: Schema.Types.ObjectId,
+    ref: "User",
+    required: true,
+  },
+});
+module.exports = articleSchema;
 ```
-
diff --git "a/docs/BackEnd/NodeJS/Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.md" "b/docs/BackEnd/NodeJS/Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.md"
index 19f5bf72..388c0a9c 100644
--- "a/docs/BackEnd/NodeJS/Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.md"
+++ "b/docs/BackEnd/NodeJS/Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.md"
@@ -1,4 +1,5 @@
 # Node大文件上传
+
 1. 创建文件唯一 HASH
 2. 发请求检查文件是否已传过
    1. 传过:提示'秒传成功'
@@ -7,6 +8,7 @@
 3. 上传完成，发送合并切片请求
 
 ## Vue 前端代码
+
 ```vue
 <template>
   <el-upload :http-request="customRequest">
@@ -124,7 +126,6 @@ const uploadChunks = async (chunks: Array<Chunk>, hash: string) => {
   await Promise.all(taskPool)
 }
 
-
 </script>
 
 <style scoped lang="scss">
@@ -133,4 +134,3 @@ const uploadChunks = async (chunks: Array<Chunk>, hash: string) => {
 }
 </style>
 ```
-
diff --git "a/docs/BackEnd/NodeJS/Node\345\255\246\344\271\240\347\254\224\350\256\260.md" "b/docs/BackEnd/NodeJS/Node\345\255\246\344\271\240\347\254\224\350\256\260.md"
index 3f264763..6525abaf 100644
--- "a/docs/BackEnd/NodeJS/Node\345\255\246\344\271\240\347\254\224\350\256\260.md"
+++ "b/docs/BackEnd/NodeJS/Node\345\255\246\344\271\240\347\254\224\350\256\260.md"
@@ -1,17 +1,15 @@
 ## 一、读取文件
 
 ```js
-const fs = require('fs')
-fs.readFile('1.txt','utf8',function(err,data){
+const fs = require("node:fs");
+fs.readFile("1.txt", "utf8", (err, data) => {
+  console.log("data: ", data); // 失败为undefined
+  console.log("err: ", err); // 成功为null,否则为错误对象
 
-    console.log('data: ', data);//失败为undefined
-    console.log('err: ', err);//成功为null,否则为错误对象
+  if (err) return console.log(`读取失败${err.message}`);
 
-    if(err){
-	 return console.log('读取失败'+err.message)
-   }
- console.log('读取成功'+data)
-})
+  console.log(`读取成功${data}`);
+});
 ```
 
 **问题**
@@ -28,45 +26,43 @@ fs.readFile('1.txt','utf8',function(err,data){
 ```js
 //__dirname:  D:\PracticeProject\Node\readfile
 
-fs.readFile(__dirname+'/3.txt','utf8',function(err,data){
-    __dirname+'\\\\3.txt',
-    __dirname+'\\\3.txt',
-     __dirname+'\\\3.txt',
-    __dirname+'/\\3.txt',
-   console.log('__dirname: ', __dirname+'\\3.txt');//这四个都可以成功(?)
-
-  console.log('__dirname: ', __dirname);
-    console.log('data: ', data);
-    if(err){
-	    return console.log('读取失败'+err.message)
-   }
-})
+fs.readFile(__dirname + "/3.txt", "utf8", function (err, data) {
+  __dirname + "\\\\3.txt",
+    __dirname + "\\\3.txt",
+    __dirname + "\\\3.txt",
+    __dirname + "/\\3.txt",
+    console.log("__dirname: ", __dirname + "\\3.txt"); //这四个都可以成功(?)
+
+  console.log("__dirname: ", __dirname);
+  console.log("data: ", data);
+  if (err) {
+    return console.log("读取失败" + err.message);
+  }
+});
 ```
 
 ### path 路径模块
 
 ```js
-const pathStr = path.join('/a','/b/c','../','/d')  //  a\b\d 抵消路劲(../)
+const pathStr = path.join("/a", "/b/c", "../", "/d"); //  a\b\d 抵消路劲(../)
 ```
 
 获取文件扩展名
 
 ```js
-const fext = path.extname(fpath)
+const fext = path.extname(fpath);
 ```
 
 ## 二、写入文件
 
 ```js
-const fs = require('fs')
-fs.writeFile('F:/12.txt','888888',function(err  ){
+const fs = require("node:fs");
+fs.writeFile("F:/12.txt", "888888", (err) => {
+  if (err) console.log("写入失败 ", err.message);
 
-  if(err){
-    console.log('写入失败 ', err.message);
-  }
-  //写入成功,错误为null
-     console.log('写入成功');
-})
+  // 写入成功,错误为null
+  console.log("写入成功");
+});
 ```
 
 > fs.writeFile 只能创建文件，不能创建路径
@@ -85,56 +81,53 @@ fs.writeFile('F:/12.txt','888888',function(err  ){
 - 启动服务器
 
 ```js
-const http = require('http')
-const server = http.createServer()
-server.on('request',(req,res)=>{
-    //返回数据给客户端(解决中文乱码两种方法)
-     res.writeHead(200, { "Content-Type": "text/plain;charset=utf-8" });
-    // res.setHeader('Content-Type','text/html; charset=utf-8')
- 	 res.end('请求url:'+req.url+',请求方法:'+req.method)
-	 console.log('服务器监听到请求')
-})
-server.listen(80,()=>{
-	console.log('服务器运行在 127.0.0.1')
-})
+const http = require("node:http");
+const server = http.createServer();
+server.on("request", (req, res) => {
+  // 返回数据给客户端(解决中文乱码两种方法)
+  res.writeHead(200, { "Content-Type": "text/plain;charset=utf-8" });
+  // res.setHeader('Content-Type','text/html; charset=utf-8')
+  res.end(`请求url:${req.url},请求方法:${req.method}`);
+  console.log("服务器监听到请求");
+});
+server.listen(80, () => {
+  console.log("服务器运行在 127.0.0.1");
+});
 ```
 
 ### 2.动态响应内容
 
 ```js
-const http = require("http");
+const http = require("node:http");
 const server = http.createServer();
 
 server.on("request", (req, res) => {
   const url = req.url;
   let content = `<h1>Not Found 404</h1>`;
-  if (url === "/" || url === "/index.html") {
-    content = `<h1>Home</h1>`;
-  } else if (url === "/about.html") {
-    content = `<h1>About</h1>`;
-  }
-  res.setHeader('Content-Type','text/html; charset=utf-8')
+  if (url === "/" || url === "/index.html") content = `<h1>Home</h1>`;
+  else if (url === "/about.html") content = `<h1>About</h1>`;
+
+  res.setHeader("Content-Type", "text/html; charset=utf-8");
   res.end(content);
 });
 server.listen(80, () => {
   console.log("运行在localhost:8080");
 });
-
 ```
 
 ### 3.响应文件内容
 
 ```js
-const http = require("http");
-const path = require("path");
-const fs = require("fs");
+const http = require("node:http");
+const path = require("node:path");
+const fs = require("node:fs");
 
 const server = http.createServer();
 
 server.on("request", (req, res) => {
   console.log("请求路径和方式 ", req.url, req.method);
   const fpath = req.url;
-    //映射服务器文件路径
+  // 映射服务器文件路径
   fs.readFile(path.join(__dirname, fpath), "utf-8", (err, data) => {
     if (err) {
       res.end("<h1>Not Found 404</h1>");
@@ -148,32 +141,30 @@ server.on("request", (req, res) => {
 server.listen(8888, () => {
   console.log("服务器运行在localhost:8888");
 });
-
 ```
 
 **优化访问方式**
 
 ```js
-const http = require("http");
-const path = require("path");
-const fs = require("fs");
+const http = require("node:http");
+const path = require("node:path");
+const fs = require("node:fs");
 
 const server = http.createServer();
 
 server.on("request", (req, res) => {
   console.log("请求路径和方式 ", req.url, req.method);
-  const url = req.url
-  let fpath = '';
-
-    //让访问(/,/index.html,/stock-roolup/index.html)都可以得到响应
-  if(url ==='/'){
-    fpath = path.join(__dirname,'/stock-rollup/index.html')
-  }else if(url === '/index.html'){
-    fpath = path.join(__dirname,'/stock-rollup',url)
-  }else if(url === '/stock-rollup/index.html'){
-    fpath = path.join(__dirname, url)
-  }
-  console.log('fpath: ', fpath);
+  const url = req.url;
+  let fpath = "";
+
+  // 让访问(/,/index.html,/stock-roolup/index.html)都可以得到响应
+  if (url === "/") fpath = path.join(__dirname, "/stock-rollup/index.html");
+  else if (url === "/index.html")
+    fpath = path.join(__dirname, "/stock-rollup", url);
+  else if (url === "/stock-rollup/index.html")
+    fpath = path.join(__dirname, url);
+
+  console.log("fpath: ", fpath);
   fs.readFile(fpath, "utf-8", (err, data) => {
     if (err) {
       res.end("<h1>Not Found 404</h1>");
@@ -187,7 +178,6 @@ server.on("request", (req, res) => {
 server.listen(8888, () => {
   console.log("服务器运行在localhost:8888");
 });
-
 ```
 
 ## 四、Node 模块化
@@ -205,16 +195,16 @@ server.listen(8888, () => {
 `m1.js`
 
 ```js
-const name = 'zhangsan'
+const name = "zhangsan";
 
-module.exports.name ='lisi'
-console.log('module-m1: ', module);
+module.exports.name = "lisi";
+console.log("module-m1: ", module);
 ```
 
 `m2.js`
 
 ```js
-const m1 = require('./m1')
+const m1 = require("./m1");
 console.log(m1.name);
 ```
 
@@ -225,18 +215,18 @@ console.log(m1.name);
 导出的对象以`module.expports`为准, 使用`require()`得到的永远是`module.expports`指向的对象
 
 ```js
-//m1.js
-exports.name = 'zhangsan'
-exports.age = 18
+// m1.js
+exports.name = "zhangsan";
+exports.age = 18;
 
-module.exports={
-  name:'lisi',
-  age:20
-}
-//m2.js
-const m1 = require('./m1')
-console.log(m1.name); //lisi
-console.log(m1.age); //20
+module.exports = {
+  name: "lisi",
+  age: 20,
+};
+// m2.js
+const m1 = require("./m1");
+console.log(m1.name); // lisi
+console.log(m1.age); // 20
 ```
 
 ![image-20220430121633293](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220430121633293.png)
@@ -267,16 +257,16 @@ console.log(m1.age); //20
 ### 1.Express 创建服务器
 
 ```js
-const express = require('express')
-const app = express()
+const express = require("express");
+const app = express();
 
-app.get('/zhj',(req,res)=>{
-  console.log('zhj被访问');
-  res.send('zhj被访问哈哈哈')
-})
-app.listen(80,()=>{
-  console.log('run 80');
-})
+app.get("/zhj", (req, res) => {
+  console.log("zhj被访问");
+  res.send("zhj被访问哈哈哈");
+});
+app.listen(80, () => {
+  console.log("run 80");
+});
 ```
 
 ### 2.Express 中间件
@@ -292,23 +282,23 @@ app.listen(80,()=>{
   ![image-20220501095912439](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220501095912439.png)
 
 ```js
-const express = require('express')
-const app = express()
+const express = require("express");
+const app = express();
 
-const mw = (req,res,next) => {
-  console.log('全局中间件被执行了');
-  req.name= 'zhangsan'
-  next()
+function mw(req, res, next) {
+  console.log("全局中间件被执行了");
+  req.name = "zhangsan";
+  next();
 }
-app.use(mw)
-app.get('/zjj',(req,res)=>{
-  console.log('req.name: ', req.name); //zhangsan
-  console.log('zjj被访问');
-  res.send('zjj被访问哈哈哈')
-})
-app.listen(80,()=>{
-  console.log('run 80');
-})
+app.use(mw);
+app.get("/zjj", (req, res) => {
+  console.log("req.name: ", req.name); // zhangsan
+  console.log("zjj被访问");
+  res.send("zjj被访问哈哈哈");
+});
+app.listen(80, () => {
+  console.log("run 80");
+});
 ```
 
 - **中间件本质**
@@ -339,39 +329,39 @@ app.get('/mw1',mw1,(req,res)=>{
 - **多个局部中间件**
 
 ```js
-const express = require('express')
-const app = express()
+const express = require("express");
+const app = express();
 
-const mw = (req,res,next) => {
-  console.log('全局中间件被执行了');
-  req.name= 'zhangsan'
-  next()
+function mw(req, res, next) {
+  console.log("全局中间件被执行了");
+  req.name = "zhangsan";
+  next();
 }
-const mw1 = (req,res,next) => {
-  console.log('中间件mw1被执行了');
-  req.age= 18
-  next()
+function mw1(req, res, next) {
+  console.log("中间件mw1被执行了");
+  req.age = 18;
+  next();
 }
-const mw2 = (req,res,next) => {
-  console.log('中间件mw2被执行了');
-  req.age= 20
-  next()
+function mw2(req, res, next) {
+  console.log("中间件mw2被执行了");
+  req.age = 20;
+  next();
 }
-app.use(mw)
-app.get('/zhj',(req,res)=>{
-  console.log('req.name: ', req.name);
-  console.log('zhj被访问');
-  res.send('zhj被访问哈哈哈')
-})
-//两种传参方式
-app.get('/mw1',[mw1,mw2],(req,res)=>{
-//app.get('/mw1',mw1,mw2,(req,res)=>{
-  console.log('req.age: ', req.age); //20
-  res.send('mw1被访问哈哈哈')
-})
-app.listen(80,()=>{
-  console.log('run 80');
-})
+app.use(mw);
+app.get("/zhj", (req, res) => {
+  console.log("req.name: ", req.name);
+  console.log("zhj被访问");
+  res.send("zhj被访问哈哈哈");
+});
+// 两种传参方式
+app.get("/mw1", [mw1, mw2], (req, res) => {
+  // app.get('/mw1',mw1,mw2,(req,res)=>{
+  console.log("req.age: ", req.age); // 20
+  res.send("mw1被访问哈哈哈");
+});
+app.listen(80, () => {
+  console.log("run 80");
+});
 ```
 
 ![image-20220501101526777](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220501101526777.png)
@@ -393,55 +383,54 @@ app.listen(80,()=>{
 ## 七、编写接口
 
 ```js
-//index.js
-const express = require('express')
-const router = require('./router')
-
-const app = express()
+// index.js
+const express = require("express");
+const router = require("./router");
 
-//配置解析urlencoded请求体中间件(在路由中间件前使用)
-app.use(express.urlencoded({extended:false}))
+const app = express();
 
-//CORS解决跨域
-const cors = require('cors')
-app.use(cors)
+// 配置解析urlencoded请求体中间件(在路由中间件前使用)
+app.use(express.urlencoded({ extended: false }));
 
-app.use('/api',router)
+// CORS解决跨域
+const cors = require("cors");
+app.use(cors);
 
-app.listen(80,()=>{
-  console.log('server running 127.0.0.1:80');
-})
+app.use("/api", router);
 
+app.listen(80, () => {
+  console.log("server running 127.0.0.1:80");
+});
 ```
 
 ```js
-//router.js
-const express = require('express')
-const apiRouter = express.Router()
+// router.js
+const express = require("express");
+const apiRouter = express.Router();
 
-apiRouter.get('/get',(req,res)=>{
-  console.log('req.query: ', req.query);
+apiRouter.get("/get", (req, res) => {
+  console.log("req.query: ", req.query);
   res.send({
-    status:200,
-    message:'GET 请求成功',
-    success:1,
-    data:{
-      name:'zhangsan',
-      age:18
-    }
-  })
-})
-apiRouter.post('/post',(req,res)=>{
-  console.log('req.body',req.body);
+    status: 200,
+    message: "GET 请求成功",
+    success: 1,
+    data: {
+      name: "zhangsan",
+      age: 18,
+    },
+  });
+});
+apiRouter.post("/post", (req, res) => {
+  console.log("req.body", req.body);
   res.send({
-    status:200,
-    message:'POST 请求成功',
-    success:1,
-    data:req.body
-  })
-})
+    status: 200,
+    message: "POST 请求成功",
+    success: 1,
+    data: req.body,
+  });
+});
 
-module.exports = apiRouter
+module.exports = apiRouter;
 ```
 
 ### 1. CORS 跨域资源共享
@@ -469,36 +458,34 @@ module.exports = apiRouter
 - 连接数据库并测试 mysql 是否连接成功
 
 ```js
-const mysql = require('mysql')
+const mysql = require("mysql");
 
 const db = mysql.createPool({
-  host:'127.0.0.1',
-  user:'root',
-  password:'root',
-  database:'mydb01'
-})
+  host: "127.0.0.1",
+  user: "root",
+  password: "root",
+  database: "mydb01",
+});
 
-//测试
-db.query('select 1',(err,res)=>{
-  if(err){
-    return console.log(err.message);
-  }
-  console.log('res: ', res); //res:  [ RowDataPacket { '1': 1 } ]
-})
+// 测试
+db.query("select 1", (err, res) => {
+  if (err) return console.log(err.message);
+
+  console.log("res: ", res); // res:  [ RowDataPacket { '1': 1 } ]
+});
 ```
 
 ### 2.查询数据
 
 ```js
-//查询语句
-const qstr = 'select * from users'
-db.query(qstr ,(err,res)=>{
-  if(err){
-    return console.log(err.message);
-  }
-  console.log('res: ', res);
-})
-/*查询结果:
+// 查询语句
+const qstr = "select * from users";
+db.query(qstr, (err, res) => {
+  if (err) return console.log(err.message);
+
+  console.log("res: ", res);
+});
+/* 查询结果:
 res:  [
   RowDataPacket { id: 1, name: '张三', age: 19 },
   RowDataPacket { id: 2, name: '李四', age: 22 }
@@ -511,19 +498,19 @@ res:  [
 ```js
 //方式一:
 let zl = {
-  id:6,
-  name:'zhaoliu',
-  age:21
-}
+  id: 6,
+  name: "zhaoliu",
+  age: 21,
+};
 //占位符的数量和表的列数需要一致,
 //否则报错ER_WRONG_VALUE_COUNT_ON_ROW: Column count doesn't match value count at row 1
-const istr = `insert into users values(?,?,?)`
-db.query(istr,[zl.id,zl.name,zl.age],(err,res)=>{
-  if(err){
+const istr = `insert into users values(?,?,?)`;
+db.query(istr, [zl.id, zl.name, zl.age], (err, res) => {
+  if (err) {
     return console.log(err.message);
   }
-  console.log('res:',res);//res.affectedRows大于0表示插入成功
-})
+  console.log("res:", res); //res.affectedRows大于0表示插入成功
+});
 /* 返回结果:
 res: OkPacket {
   fieldCount: 0,
@@ -538,16 +525,15 @@ res: OkPacket {
 */
 
 //方式二:(便捷形式)
-const istr = `insert into users set ?`
-db.query(istr,zl,(err,res)=>{
-  if(err){
+const istr = `insert into users set ?`;
+db.query(istr, zl, (err, res) => {
+  if (err) {
     return console.log(err.message);
   }
- if(res.affectedRows>0){
-     console.log('插入成功',);
- }
-})
-
+  if (res.affectedRows > 0) {
+    console.log("插入成功");
+  }
+});
 ```
 
 ### 4.更新数据
@@ -579,8 +565,6 @@ db.query(ustr, [user, user.id], (err, res) => {
     console.log("更新成功");
   }
 });
-
-
 ```
 
 ### 5.删除数据
@@ -588,35 +572,28 @@ db.query(ustr, [user, user.id], (err, res) => {
 - 硬删除
 
 ```js
-let dstr = "delete from users where id=?";
-//只有一个占位符可省略数组括号
+const dstr = "delete from users where id=?";
+// 只有一个占位符可省略数组括号
 db.query(dstr, 6, (err, res) => {
-  if (err) {
-    return console.log(err.message);
-  }
-  if (res.affectedRows > 0) {
-    console.log("硬删除成功");
-  }
+  if (err) return console.log(err.message);
+
+  if (res.affectedRows > 0) console.log("硬删除成功");
 });
 ```
 
 - 软删除
 
 ```js
-let user = {
-  id:2,
-  deleted:1
-}
-let dstr  = "update users set ? where id = ?"
-db.query(dstr,[user,user.id],(err,res)=>{
-  if (err) {
-    return console.log(err.message);
-  }
-  if (res.affectedRows > 0) {
-    console.log("软删除成功");
-  }
-})
+const user = {
+  id: 2,
+  deleted: 1,
+};
+const dstr = "update users set ? where id = ?";
+db.query(dstr, [user, user.id], (err, res) => {
+  if (err) return console.log(err.message);
 
+  if (res.affectedRows > 0) console.log("软删除成功");
+});
 ```
 
 ## 九、身份认证
@@ -640,66 +617,63 @@ db.query(dstr,[user,user.id],(err,res)=>{
 ![image-20220502193259029](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502193259029.png)
 
 ```js
-const express = require('express')
-const app = express()
+const express = require("express");
+const app = express();
 
-//配置 Session 中间件
-const session = require('express-session')
+// 配置 Session 中间件
+const session = require("express-session");
 app.use(
   session({
-    secret: 'usersession',
+    secret: "usersession",
     resave: false,
     saveUninitialized: true,
   })
-)
+);
 
 // 托管静态页面
-app.use(express.static('./pages'))
+app.use(express.static("./pages"));
 // 解析 POST 提交过来的表单数据
-app.use(express.urlencoded({ extended: false }))
+app.use(express.urlencoded({ extended: false }));
 
 // 登录的 API 接口
-app.post('/api/login', (req, res) => {
+app.post("/api/login", (req, res) => {
   // 判断用户提交的登录信息是否正确
-  if (req.body.username !== 'admin' || req.body.password !== '000000') {
-    return res.send({ status: 1, msg: '登录失败' })
-  }
+  if (req.body.username !== "admin" || req.body.password !== "000000")
+    return res.send({ status: 1, msg: "登录失败" });
 
-  //将登录成功后的用户信息，保存到 Session 中(express-session配置后才有)
-  req.session.user = req.body // 用户的信息
-  req.session.islogin = true // 用户的登录状态
+  // 将登录成功后的用户信息，保存到 Session 中(express-session配置后才有)
+  req.session.user = req.body; // 用户的信息
+  req.session.islogin = true; // 用户的登录状态
 
-  res.send({ status: 0, msg: '登录成功' })
-})
+  res.send({ status: 0, msg: "登录成功" });
+});
 
 // 获取用户姓名的接口
-app.get('/api/username', (req, res) => {
-  //从 Session 中获取用户的名称，响应给客户端
-  if (!req.session.islogin) {
-    return res.send({ status: 1, msg: 'fail' })
-  }
+app.get("/api/username", (req, res) => {
+  // 从 Session 中获取用户的名称，响应给客户端
+  if (!req.session.islogin) return res.send({ status: 1, msg: "fail" });
+
   res.send({
     status: 0,
-    msg: 'success',
+    msg: "success",
     username: req.session.user.username,
-  })
-})
+  });
+});
 
 // 退出登录的接口
-app.post('/api/logout', (req, res) => {
-  //清空 Session 信息
-  req.session.destroy()
+app.post("/api/logout", (req, res) => {
+  // 清空 Session 信息
+  req.session.destroy();
   res.send({
     status: 0,
-    msg: '退出登录成功',
-  })
-})
+    msg: "退出登录成功",
+  });
+});
 
 // 调用 app.listen 方法，指定端口号并启动web服务器
-app.listen(80, function () {
-  console.log('Express server running at http://127.0.0.1:80')
-})
-
+app.listen(80, () => {
+  console.log("Express server running at http://127.0.0.1:80");
+});
 ```
 
 > Session 认证弊端：需要配合 Cookie，Cookie 不支持跨域，需要做额外配置，才能实现跨域 Session 认证。
@@ -719,82 +693,82 @@ JWT 组成部分：Header（头部）、Payload（有效载荷)、Signature（
 安装`jsonwebtoken`、`express-jwt`
 
 ```js
-const express = require('express')
-const app = express()
+const express = require("express");
+const app = express();
 
 // 01：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt
-const jwt = require('jsonwebtoken')
-const expressJWT = require('express-jwt')
+const jwt = require("jsonwebtoken");
+const expressJWT = require("express-jwt");
 
 // 允许跨域资源共享
-const cors = require('cors')
-app.use(cors())
+const cors = require("cors");
+app.use(cors());
 
 // 解析 post 表单数据的中间件
-const bodyParser = require('body-parser')
-app.use(bodyParser.urlencoded({ extended: false }))
+const bodyParser = require("body-parser");
+app.use(bodyParser.urlencoded({ extended: false }));
 
 // 02：定义 secret 密钥，建议将密钥命名为 secretKey
-const secretKey = 'coder8888'
+const secretKey = "coder8888";
 
 // 04：注册将 JWT 字符串解析还原成 JSON 对象的中间件
 // 注意：只要配置成功了 express-jwt 这个中间件，就可以把解析出来的用户信息，挂载到 req.user 属性上
-app.use(expressJWT({ secret: secretKey }).unless({ path: [/^\/api\//] }))
+app.use(expressJWT({ secret: secretKey }).unless({ path: [/^\/api\//] }));
 
 // 登录接口
-app.post('/api/login', function (req, res) {
+app.post("/api/login", (req, res) => {
   // 将 req.body 请求体中的数据，转存为 userinfo 常量
-  const userinfo = req.body
+  const userinfo = req.body;
   // 登录失败
-  if (userinfo.username !== 'admin' || userinfo.password !== '000000') {
+  if (userinfo.username !== "admin" || userinfo.password !== "000000") {
     return res.send({
       status: 400,
-      message: '登录失败！',
-    })
+      message: "登录失败！",
+    });
   }
   // 登录成功
   /* 03：在登录成功之后，调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端
    参数1：用户的信息对象
    参数2：加密的秘钥
    参数3：配置对象，可以配置当前 token 的有效期
-   记住：千万不要把密码加密到 token 字符中*/
-  const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' })
+   记住：千万不要把密码加密到 token 字符中 */
+  const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, {
+    expiresIn: "30s",
+  });
   res.send({
     status: 200,
-    message: '登录成功！',
+    message: "登录成功！",
     token: tokenStr, // 要发送给客户端的 token 字符串
-  })
-})
+  });
+});
 
 // 这是一个有权限的 API 接口
-app.get('/admin/getinfo', function (req, res) {
+app.get("/admin/getinfo", (req, res) => {
   // 05：使用 req.user 获取用户信息，并使用 data 属性将用户信息发送给客户端
-  console.log(req.user)
+  console.log(req.user);
   res.send({
     status: 200,
-    message: '获取用户信息成功！',
+    message: "获取用户信息成功！",
     data: req.user, // 要发送给客户端的用户信息
-  })
-})
+  });
+});
 
 // 06：使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误
 app.use((err, req, res, next) => {
   // 这次错误是由 token 解析失败导致的
-  if (err.name === 'UnauthorizedError') {
+  if (err.name === "UnauthorizedError") {
     return res.send({
       status: 401,
-      message: '无效的token',
-    })
+      message: "无效的token",
+    });
   }
   res.send({
     status: 500,
-    message: '未知的错误',
-  })
-})
-
-
-app.listen(8888, function () {
-  console.log('Express server running at http://127.0.0.1:8888')
-})
+    message: "未知的错误",
+  });
+});
 
+app.listen(8888, () => {
+  console.log("Express server running at http://127.0.0.1:8888");
+});
 ```
diff --git "a/docs/BackEnd/NodeJS/Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.md" "b/docs/BackEnd/NodeJS/Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.md"
index bf6ba6c6..f1ee1df2 100644
--- "a/docs/BackEnd/NodeJS/Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.md"
+++ "b/docs/BackEnd/NodeJS/Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.md"
@@ -5,17 +5,17 @@
 ```vue
 <script setup>
 import axios from 'axios'
-const onUpload = (e) => {
-  let formData = new FormData()
-  formData.append('fileName', e.target.files[0]) //fileName:后端接收的参数名
+function onUpload(e) {
+  const formData = new FormData()
+  formData.append('fileName', e.target.files[0]) // fileName:后端接收的参数名
   console.log('[ formData ]-6', formData)
   axios.post('http://localhost:3000/upload/postFile', formData, {
     headers: {
       'Content-Type': 'multipart/form-data'
     }
-  }).then(res => {
+  }).then((res) => {
     console.log('[ res ]', res)
-  }).catch(err => {
+  }).catch((err) => {
     console.log('[ err ]', err)
   })
 }
@@ -29,64 +29,64 @@ const onUpload = (e) => {
 ## Express 后端代码
 
 ```js
-const express = require("express");
-const multer = require("multer");
-const fs = require("fs");
-const path = require("path");
+const fs = require('node:fs')
+const path = require('node:path')
+const express = require('express')
+const multer = require('multer')
 
-const app = express();
-const router = express.Router();
-app.use("/upload", router);
+const app = express()
+const router = express.Router()
+app.use('/upload', router)
 
 const upload = multer({
   storage: multer.diskStorage({
-    //设置文件存储位置
+    // 设置文件存储位置
     destination: (req, file, cb) => {
-      let date = new Date();
-      let year = date.getFullYear();
-      let month = (date.getMonth() + 1).toString().padStart(2, "0");
-      let day = date.getDate();
-      let dir = "./public/uploads/" + year + month + day;
-      //判断目录是否存在，没有则创建
-      if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
-      //dir就是上传文件存放的目录
-      cb(null, dir);
-    }, //设置文件名称
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = (date.getMonth() + 1).toString().padStart(2, '0')
+      const day = date.getDate()
+      const dir = `./public/uploads/${year}${month}${day}`
+      // 判断目录是否存在，没有则创建
+      if (!fs.existsSync(dir))
+        fs.mkdirSync(dir, { recursive: true })
+      // dir就是上传文件存放的目录
+      cb(null, dir)
+    }, // 设置文件名称
     filename: (req, file, cb) => {
       // 获取原来的文件名
-      let oldName = file.originalname;
-      //获取文件前缀
-      let prefix = oldName.startsWith(".") ? oldName : oldName.split(".")[0];
-      let fileName =
-        prefix + "-" + Date.now() + path.extname(file.originalname);
-      //fileName就是上传文件的文件名
-      cb(null, fileName);
+      const oldName = file.originalname
+      // 获取文件前缀
+      const prefix = oldName.startsWith('.') ? oldName : oldName.split('.')[0]
+      const fileName
+        = `${prefix}-${Date.now()}${path.extname(file.originalname)}`
+      // fileName就是上传文件的文件名
+      cb(null, fileName)
     },
   }),
-});
- //访问地址为:localhost:3000/upload/index,操作界面,使用 Vue 时可不需要这个接口
-router.get("/index", (req, res) => {
-  //接口地址为:localhost:3000/upload/postFile ,input的name属性值为imgFile和upload.single("imgFile")对应
+})
+// 访问地址为:localhost:3000/upload/index,操作界面,使用 Vue 时可不需要这个接口
+router.get('/index', (req, res) => {
+  // 接口地址为:localhost:3000/upload/postFile ,input的name属性值为imgFile和upload.single("imgFile")对应
   res.send(`
   <form action="http://localhost:3000/upload/postFile" method="post" enctype="multipart/form-data">
   <input id="postFile" type="file" name="fileName" multiple>
   <button type="submit">上传</button>
-</form>`);
-});
-router.post("/postFile", upload.single("fileName"), (req, res, next) => {
+</form>`)
+})
+router.post('/postFile', upload.single('fileName'), (req, res, next) => {
   res.json({
     file: req.file,
-  });
-});
+  })
+})
 
 app.listen(3000, () => {
-  console.log("server is running at http://localhost:3000");
-});
-
+  console.log('server is running at http://localhost:3000')
+})
 ```
 
 **可以借助接口调试工具测试或直接访问：`http://localhost:3000/upload/index`**
 
 ![image-20230213141712478](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302131417657.png)
 
-![image-20230213141820443](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302131418470.png)
\ No newline at end of file
+![image-20230213141820443](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302131418470.png)
diff --git "a/docs/BackEnd/Server/Docker\345\255\246\344\271\240\347\254\224\350\256\260.md" "b/docs/BackEnd/Server/Docker\345\255\246\344\271\240\347\254\224\350\256\260.md"
index 5853362e..d5789091 100644
--- "a/docs/BackEnd/Server/Docker\345\255\246\344\271\240\347\254\224\350\256\260.md"
+++ "b/docs/BackEnd/Server/Docker\345\255\246\344\271\240\347\254\224\350\256\260.md"
@@ -1,9 +1,10 @@
 ## 一、解决痛点
+
 1. 环境不一致
 2. 版本不一样
 3. 配置不一致，配置费力费时
-> 把源码+配置+环境+版本打包成镜像，装载在Dokcer容器引擎上，达到跨平台无缝接轨运作。
-> 一次镜像，处处运行，从搬家到搬楼。
+   > 把源码+配置+环境+版本打包成镜像，装载在Dokcer容器引擎上，达到跨平台无缝接轨运作。
+   > 一次镜像，处处运行，从搬家到搬楼。
 
 ## 二、优点和应用
 
@@ -18,10 +19,14 @@
 1. 镜像：一个只读的模板，用于创建容器，一个镜像可以创建多个容器。
 2. 容器：镜像创建出来的虚拟化运行环境容器实例（简易的Linux环境）。
 3. 仓库：集中存放镜像的场所，分为公开库和私有库。
+
 ## 四、工作原理
+
 ![](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032203456.png)
 ![](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032204209.png)
+
 ## 五、CentOS安装Docker
+
 ```bash
 sudo yum install -y yum-utils
 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
@@ -31,17 +36,23 @@ systemctl start docker #启动
 ps -ef | grep docker
 docker run hello-world #测试
 ```
+
 ## 六、阿里云镜像加速
+
 [参考教程](https://blog.csdn.net/weixin_45764765/article/details/128367219)
 
 ## 七、常用命令
+
 ### 1. Docker
+
 ```bash
 systemctl enable docker #开机启动
 docker system df #负载查看
 
 ```
+
 ### 2. 镜像
+
 ```bash
 docker images #展示本地镜像 -a 所有，-q只显示ID
 docker search mongo #搜索镜像
@@ -50,16 +61,20 @@ docker pull 镜像名[:TAG]  #下载镜像，没有版本号默认最新
 docker rmi -f hello-world #强制删除镜像
 
 ```
+
 > 虚悬镜像：构建或删除过程中产生的仓库名和标签都为none的镜像，没啥用建议删除
 > `docker image ls -f dangling=true` 删除：`docker image prune`
 
 **生成新镜像**
+
 ```bash
 agt-get update
 apt-get -y install vim
 docker commit -m="vim is ok" -a="fxj" 容器id myubt:1.1
 ```
+
 **本地镜像推送到阿里云**
+
 ```bash
 #发布和拉取
 docker login --username=yunzhishangfxj registry.cn-hangzhou.aliyuncs.com
@@ -67,11 +82,14 @@ docker tag [ImageId] registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:[镜像版本
 docker push registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:[镜像版本号]
 docker run -it registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:1.1  /bin/bash #记得带版本
 ```
+
 ![](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032206243.png)
+
 ### 3. 容器
+
 ```bash
 docker ps #列出正在运行容器 -a -s
-docker run -it --name="ub01"  ubuntu /bin/bash 
+docker run -it --name="ub01"  ubuntu /bin/bash
 #-p: 外部主机端口:docker容器端口 -P:随机分配主机端口映射到内部容器端口
 #-i:交互式 -t:输出伪终端 -d:后台运行 --name="容器名" /bin/bash:指定命令解释器
 
@@ -79,38 +97,47 @@ exit #退出，ctrl+q+p:退出但不停止
 docker exec -it 容器id /bin/bash #重新进容器，exit退出不会停止容器
 
 docker start 容器id或容器名
-docker restart 
+docker restart
 docker stop
 docker kill #强制停止
 
 docker rm 容器id或容器名 #删除已停止容器 、未停止 -f 强制删除
-docker rm 
-docker rm -f $(docker ps -a -q) 
+docker rm
+docker rm -f $(docker ps -a -q)
 docker ps -a -q | xargs docker rm #一次性删除多个再运行的
 ```
+
 #### 启动守护式
+
 ```bash
 docker run -it #前台交互启动
 docker run -d  #后台守护启动
 ```
+
 #### 查看容器日志
+
 ```bash
 docker logs 容器id #查看容器日志
 docker inspect  容器id #查看容器内部细节
 ```
+
 #### 容器备份到主机
+
 ```bash
 docker cp 容器id:容器文件路径 目的主机路径  #备份文件
-docker export 容器id > xxx.tar	 #备份整个容器
+docker export 容器id > xxx.tar   #备份整个容器
 cat ub.tar | docker import - 恢复后的镜像名  #从tar包中恢复成镜像
 docker run -it  镜像id /bin/bash #重新恢复容器
 
 ```
+
 #### 容器卷
+
 ## 八、[Dockerfile](https://docs.docker.com/engine/reference/builder/#from)编写
+
 ```dockerfile
-#基础镜像，基于什么镜像什么版本作为模版 
-From xxx:1.1 
+#基础镜像，基于什么镜像什么版本作为模版
+From xxx:1.1
 
 #构建参数，运行时无效，可以构建时候临时修改变量（docker build --build-arg B=10）
 ARG
@@ -125,10 +152,10 @@ WORKDIR $NGINX_HOME
 COPY <src>  <dest>
 
 #将主机目录下的文件拷贝到镜像，且会自动处理URL和解压tar压缩包
-ADD 
+ADD
 
-#Dockerfile构建时运行(docker build)， 
-RUN 
+#Dockerfile构建时运行(docker build)，
+RUN
 
 #容器启动后(docker run)执行的脚本，多个命令时只会生效最后一个???
 #会被docker run之后的参数替换(/bin/bash)
@@ -140,8 +167,6 @@ ENTRYPOINT ["nginx","-c"] ==> nginx -c /etc/nginx/nginx.conf
 一般语句为：
 FROM WORKDIR COPY-ADD RUN CMD-ENTRYPOINT
 
-
-
 #暴露镜像的指定端口
 EXPOSE 9999
 
@@ -149,24 +174,26 @@ EXPOSE 9999
 VOLUME ["/var/www", "/var/log/apache2", "/etc/apache2"]
 
 #指定元数据，标识容器便于查找
-LABEL 
+LABEL
 
 #当前镜像构建的时候不会执行，基于当前镜像的镜像去构建的时候才会在FROM后执行
-ONBUILD 
+ONBUILD
 
 #指定容器使用什么信号，一般指定信号名
 STOPSIGNAL
 
 #检查容易的健康状态
-HEALTHCHECK 
+HEALTHCHECK
 
 #指定命令解释器 linux为/bin/sh，windows为cmd
-SHELL 
+SHELL
 
 #用于指定RUN CMD等指令运行时的用户身份，不指定是root(用户名:用户组 或 USER 用户id:组id)
-USER  
+USER
 ```
+
 ## 九、Docker网络
+
 ```bash
 docker network ls #查看网络
 docker network inspect 网络名 #查看网络源数据
@@ -180,12 +207,16 @@ docker run -d --network host --name 容器名 镜像名
 
 docker run -d --network none --name 容器名 镜像名 #只有lo网卡
 ```
+
 #### 共用网卡
+
 ```bash
-docker run -d --network container:另一个容器名 --name 容器名 /bin/bash 镜像名  
+docker run -d --network container:另一个容器名 --name 容器名 /bin/bash 镜像名
 #共用的容器关闭，这个容器网卡也没有啦
 ```
+
 #### 自定义网络
+
 ```bash
 #启动两个网桥模式容器
 docker run -d -p 8081:8080 --name tomcat81 tomcat
@@ -199,13 +230,19 @@ docker run -d -p 8081:8080 --network my_network --name tomcat81 tomcat
 docker run -d -p 8082:8080 --network my_network --name tomcat82 tomcat
 #ip、域名互ping都能通（维护好主机和ip的关系）
 ```
+
 ## 十、[容器编排](https://docs.docker.com/compose/compose-file/)
+
 > 意义：集中快速管理多个容器
 
 #### 1. [安装Compose](https://docs.docker.com/compose/install/)
+
 ```bash
 curl -SL https://github.com/docker/compose/releases/download/v2.14.2/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose
 ```
+
 #### 2. [常用命令](https://cloud.tencent.com/developer/article/1499032)
+
 ![](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032205681.png)
+
 #### 3. [安装 Portainer](https://cloud.tencent.com/developer/article/2047779)
diff --git "a/docs/BackEnd/Server/Nginx\345\255\246\344\271\240\347\254\224\350\256\260.md" "b/docs/BackEnd/Server/Nginx\345\255\246\344\271\240\347\254\224\350\256\260.md"
index 06e8c5fe..17eccb01 100644
--- "a/docs/BackEnd/Server/Nginx\345\255\246\344\271\240\347\254\224\350\256\260.md"
+++ "b/docs/BackEnd/Server/Nginx\345\255\246\344\271\240\347\254\224\350\256\260.md"
@@ -1,26 +1,33 @@
 ## 一、Nginx安装
+
 ### 1.安装命令
-| Ubuntu | apt install nginx |
-| --- | --- |
+
+| Ubuntu              | apt install nginx |
+| ------------------- | ----------------- |
 | CentOS(Red Hat系列) | yum install nginx |
 
 ### 2.Linux目录结构
+
 ![](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032207741.png)
+
 ### 3.基础命令
-| nginx -v/nginx -V | 查看nginx版本等信息 |
-| --- | --- |
-| systemctl start/stop nginx | 启动/停止nginx |
-| systemctl status nginx | 查看nginx运行状态 |
-| ps -ef &#124; grep nginx  | 查看nginx进程 |
-| kill -QUIT 进程号     
-kill -TERM 进程号     | 从容停止 |
-| kill -TERM 进程号    
-kill -INT 进程号   | 快速停止 |
+
+| nginx -v/nginx -V          | 查看nginx版本等信息 |
+| -------------------------- | ------------------- |
+| systemctl start/stop nginx | 启动/停止nginx      |
+| systemctl status nginx     | 查看nginx运行状态   |
+| ps -ef &#124; grep nginx   | 查看nginx进程       |
+
+| kill -QUIT 进程号
+kill -TERM 进程号 | 从容停止 |
+| kill -TERM 进程号
+kill -INT 进程号 | 快速停止 |
 | pkill -9 nginx | 强制停止 |
 
 ## 编写配置
+
 ```bash
-nginx -t	#检查配置文件有没有问题
+nginx -t  #检查配置文件有没有问题
 grep -Ei  "\{|\}"   nginx.conf #检查配置文件括号配对问题
 nginx -s reload #重载配置
 ```
@@ -30,7 +37,9 @@ nginx -s reload #重载配置
 ## [netstat命令](https://linux.cn/article-2434-1.html)
 
 ## [curl命令](https://blog.csdn.net/u013514928/article/details/102810250)
+
 ## CentOS7联网
+
 ```bash
 ip a #查看网卡
 cd /etc/sysconfig/network-scripts
diff --git "a/docs/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md" "b/docs/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md"
index dc5dce17..d8f0d3b8 100644
--- "a/docs/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md"
+++ "b/docs/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md"
@@ -10,10 +10,10 @@
 
 #### @NgModule元数据
 
-+ **declarations** —— 该模块的依赖项（该模块用到的组件、指令、管道）。
-+ **imports** —— 导入其他的ngModule。
-+ **providers** —— 提供各种服务。
-+ **bootstrap** —— 根组件，Angular 创建它并插入 index.html 宿主页面
+- **declarations** —— 该模块的依赖项（该模块用到的组件、指令、管道）。
+- **imports** —— 导入其他的ngModule。
+- **providers** —— 提供各种服务。
+- **bootstrap** —— 根组件，Angular 创建它并插入 index.html 宿主页面
 
 #### declarations 数组
 
@@ -34,7 +34,7 @@
 #### providers 数组
 
 ```js
-该数组为当前模块提供一系列服务
+该数组为当前模块提供一系列服务;
 ```
 
 #### bootstrap 数组
@@ -59,26 +59,31 @@
 > **模版中还可以写些简单的逻辑，比如判断或运算**
 
 ```typescript
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 @Component({
-  selector: 'app-root',
-  template: `<h1>{{title}}</h1>
-             <p> sum : {{1 + 1}}</p>
-             <p>price: {{price * 0.7}}</p>
-             <p>与方法结合: {{price * 0.7 + getVal()}}.</p>
-`,    //内联模板
-  styles: [`h1 { color: yellow }`]    //内联样式
-})    
+  selector: "app-root",
+  template: `<h1>{{ title }}</h1>
+    <p>sum : {{ 1 + 1 }}</p>
+    <p>price: {{ price * 0.7 }}</p>
+    <p>与方法结合: {{ price * 0.7 + getVal() }}.</p> `, //内联模板
+  styles: [
+    `
+      h1 {
+        color: yellow;
+      }
+    `,
+  ], //内联样式
+})
 export class AppComponent {
-  title = 'my-angular-title';
-  price = 30
+  title = "my-angular-title";
+  price = 30;
   getVal(): number {
-        return 33;
+    return 33;
   }
 }
 ```
 
-::: warning  <b>模板表达式遵循原则：</b>
+::: warning <b>模板表达式遵循原则：</b>
 
 - 非常简单
 - 执行迅速
@@ -89,23 +94,23 @@ export class AppComponent {
 #### 2. 模板来源
 
 ```typescript
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'] //注意： styleUrls
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"], //注意： styleUrls
 })
-export class AppComponent {
-
-}
+export class AppComponent {}
 ```
 
 #### 3. 属性绑定
 
 ```html
 <img src="../assets/images/zorro.jpg" alt="madao" /><!-- 静态绑定-->
-<img [src]="zorroSrc" alt="zorro" />     <!-- 简写形式-->
-<img bind-src="zorroSrc" alt="zorro" /> <!-- 完整形式-->
+<img [src]="zorroSrc" alt="zorro" />
+<!-- 简写形式-->
+<img bind-src="zorroSrc" alt="zorro" />
+<!-- 完整形式-->
 <button [disabled]="isDisabled">click</button>
 <!-- zorroSrc、zorro、isDisabled均为变量 -->
 ```
@@ -120,71 +125,82 @@ export class AppComponent {
 #### 5. 插值表达式属性绑定
 
 ```html
-<img src="{{ picUrl }}" alt="{{ picInfo }}" /> <!-- 不常用 -->
+<img src="{{ picUrl }}" alt="{{ picInfo }}" />
+<!-- 不常用 -->
 ```
 
 #### 6. 单个class样式绑定
 
 ```typescript
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 @Component({
-  selector: 'app-root',
+  selector: "app-root",
   template: `
-      <button type="button" class="btn" [class.btn-primary]="theme === 'primary'">Primary</button>
-      <button type="button" class="btn" [class.btn-secondary]="true">secondary</button>
-      <button type="button" class="btn" [class.btn-success]="isSuccess">success</button>
-      <button type="button" class="btn" [class.btn-danger]="'啦啦啦'">danger</button>
-      <button type="button" class="btn" [class.btn-danger]="0">danger</button>
-      <button type="button" class="btn" [class.btn-danger]="undefined">danger</button>
-    `,
-  styles: []
+    <button type="button" class="btn" [class.btn-primary]="theme === 'primary'">
+      Primary
+    </button>
+    <button type="button" class="btn" [class.btn-secondary]="true">
+      secondary
+    </button>
+    <button type="button" class="btn" [class.btn-success]="isSuccess">
+      success
+    </button>
+    <button type="button" class="btn" [class.btn-danger]="'啦啦啦'">
+      danger
+    </button>
+    <button type="button" class="btn" [class.btn-danger]="0">danger</button>
+    <button type="button" class="btn" [class.btn-danger]="undefined">
+      danger
+    </button>
+  `,
+  styles: [],
 })
 export class AppComponent {
-    theme = 'primary';
-    isSuccess = true;
+  theme = "primary";
+  isSuccess = true;
 }
 ```
 
 #### 7. 绑定多个class
 
 ```typescript
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 @Component({
-  selector: 'app-root',
+  selector: "app-root",
   template: `
-      <button type="button" [class]="btnCls">btnCls</button>
-      <button type="button" [class]="btnCls2">btnCls2</button>
-      <button type="button" [class]="btnCls3">btnCls3</button>
-
-      <!-- 也可以用内置指令ngClass -->
-      <button type="button" [ngClass]="btnCls">btnCls</button>
-      <button type="button" [ngClass]="btnCls2">btnCls2</button>
-      <button type="button" [ngClass]="btnCls3">btnCls3</button>
-    `,
-  styles: []
+    <button type="button" [class]="btnCls">btnCls</button>
+    <button type="button" [class]="btnCls2">btnCls2</button>
+    <button type="button" [class]="btnCls3">btnCls3</button>
+
+    <!-- 也可以用内置指令ngClass -->
+    <button type="button" [ngClass]="btnCls">btnCls</button>
+    <button type="button" [ngClass]="btnCls2">btnCls2</button>
+    <button type="button" [ngClass]="btnCls3">btnCls3</button>
+  `,
+  styles: [],
 })
 export class AppComponent {
-    btnCls = 'btn btn-primary';
-    btnCls2 = ['btn', 'btn-success'];
-    btnCls3 = {
-      btn: true,
-      'btn-info': true
-    };
+  btnCls = "btn btn-primary";
+  btnCls2 = ["btn", "btn-success"];
+  btnCls3 = {
+    btn: true,
+    "btn-info": true,
+  };
 }
 ```
 
 #### 8. 绑定单个style
 
 ```typescript
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 @Component({
-  selector: 'app-root',
+  selector: "app-root",
   template: `
-      <p [style.color]="'##f60'">一段文字</p>
-      <p [style.height]="'50px'" [style.border]="'1px solid'">设置高度</p>
-      <p [style.height.px]="50" [style.border]="'1px solid'">设置高度</p>
-    `,
-  styles: []
+    <p [style.color]="'##f60'">一段文字</p>
+    <p [style.height]="'50px'" [style.border]="'1px solid'">设置高度</p>
+    <p [style.height.px]="50" [style.border]="'1px solid'">设置高度</p>
+  `,
+  styles: [],
 })
 export class AppComponent {}
 ```
@@ -231,29 +247,29 @@ export class AppComponent {
 #### 10. 绑定事件
 
 ```typescript
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 @Component({
-  selector: 'app-root',
+  selector: "app-root",
   template: `
-      <button (click)="onClick()">CLICK</button>
-       <button  (click)="onClick1($event)">Primary</button>
-    `,
-  styles: []
+    <button (click)="onClick()">CLICK</button>
+    <button (click)="onClick1($event)">Primary</button>
+  `,
+  styles: [],
 })
 export class AppComponent {
-    onClick() {
-      console.log('onClick');
-    } 
-    onClick1(event: MouseEvent) {
-        console.log('onClick1', event.target);
-    } 
+  onClick() {
+    console.log("onClick");
+  }
+  onClick1(event: MouseEvent) {
+    console.log("onClick1", event.target);
+  }
 }
 ```
 
 #### 11. 输入与输出属性
 
 > 输入属性：用于父组件传值给子组件（父传子）` @Input()`
-> 
+>
 > 输出属性：用于子组件传值给父组件（子传父）`@Output()`
 
 #### 输入属性`@Input`
@@ -261,34 +277,32 @@ export class AppComponent {
 :memo:父组件
 
 ```typescript
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 @Component({
-  selector: 'app-root',
+  selector: "app-root",
   template: `
-     <app-mycpn [item]="currentItem"></app-mycpn>
-     <!-- <app-mycpn item="我是传入的字符串"></app-mycpn>--> <!--静态属性可不用[]包裹 -->
-
+    <app-mycpn [item]="currentItem"></app-mycpn>
+    <!-- <app-mycpn item="我是传入的字符串"></app-mycpn>-->
+    <!--静态属性可不用[]包裹 -->
   `,
 })
 export class AppComponent {
-  currentItem = 'Television';
+  currentItem = "Television";
 }
 ```
 
 :memo:子组件
 
 ```typescript
-import { Component, Input } from '@angular/core';
+import { Component, Input } from "@angular/core";
 @Component({
-  selector: 'app-mycpn',
-  template: `<p>
-               Today's item: {{item}}
-             </p>`
+  selector: "app-mycpn",
+  template: `<p>Today's item: {{ item }}</p>`,
 })
-export class MycpnComponent  {
-  @Input() item: string;   
- //@Input('aliasItem') item: string; 提供别名，item变量只可以在本组件使用
- //相当于对父组件传入的aliasItem变量进行重命名
+export class MycpnComponent {
+  @Input() item: string;
+  //@Input('aliasItem') item: string; 提供别名，item变量只可以在本组件使用
+  //相当于对父组件传入的aliasItem变量进行重命名
 }
 ```
 
@@ -297,31 +311,29 @@ export class MycpnComponent  {
 :memo:父组件
 
 ```typescript
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 @Component({
-  selector: 'app-root',
-  template: `
-     <app-mycpn  (newItemEvent)="addItem($event)"></app-mycpn>
-  `,
+  selector: "app-root",
+  template: ` <app-mycpn (newItemEvent)="addItem($event)"></app-mycpn> `,
 })
 export class AppComponent {
-   items = ['item1', 'item2', 'item3', 'item4'];
-    addItem(newItem: string) {
-      this.items.push(newItem);
-    }
+  items = ["item1", "item2", "item3", "item4"];
+  addItem(newItem: string) {
+    this.items.push(newItem);
+  }
 }
 ```
 
 :memo:子组件
 
 ```typescript
-import { Component, Input } from '@angular/core';
+import { Component, Input } from "@angular/core";
 @Component({
-  selector: 'app-mycpn',
-  template: `<label>Add an item: <input ##newItem></label>
-             <button (click)="addNewItem(newItem.value)">Add to parent's list</button>`
+  selector: "app-mycpn",
+  template: `<label>Add an item: <input ##newItem /></label>
+    <button (click)="addNewItem(newItem.value)">Add to parent's list</button>`,
 })
-export class MycpnComponent  {
+export class MycpnComponent {
   @Output() newItemEvent = new EventEmitter<string>();
   // @Output('newItem') newItemEvent = new EventEmitter<string>();
   addNewItem(value: string) {
@@ -336,7 +348,7 @@ export class MycpnComponent  {
 
 #### 宿主选择器
 
->  `:host`选择是是把宿主元素作为目标的唯一方式
+> `:host`选择是是把宿主元素作为目标的唯一方式
 
 ```md
 它选中的是组件模板标签，比如<app-child></app-child>，相当于在父组件的style中使用标签选择器选择 app-child {}
@@ -356,22 +368,22 @@ export class MycpnComponent  {
 
 ```css
 :host-context(.light) .title {
-      background-color: ##bfa;
+  background-color: ##bfa;
 }
 ```
 
 #### 样式模块化
 
 > 在 @Component 的元数据中指定的样式只会对该组件的模板生效
-> 
+>
 > 组件的样式不会影响到子组件中的模板
-> 
+>
 > 组件的样式不会影响到投影内容
 
 #### 视图封装模式
 
 > ShadowDom -- **不进不出**，没有样式能进来，组件样式出不去, 就自己玩
-> 
-> Emulated  --**只进不出**， 默认选项，全局样式能进来，组件样式出不去
-> 
-> None  -- **能进能出**，此时组件的样式是全局生效的，注意与其他组件发生样式冲突，（对父组件样式也能生效）
+>
+> Emulated --**只进不出**， 默认选项，全局样式能进来，组件样式出不去
+>
+> None -- **能进能出**，此时组件的样式是全局生效的，注意与其他组件发生样式冲突，（对父组件样式也能生效）
diff --git "a/docs/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.md" "b/docs/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.md"
index baa25215..4dab3236 100644
--- "a/docs/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.md"
+++ "b/docs/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.md"
@@ -3,11 +3,13 @@
 :memo:shadow.component.html
 
 ```html
-<p>    shadow works!
-    <ng-content select=".head"></ng-content>
-    <ng-content select="[attr-content]"></ng-content>
-    <ng-content select="section"></ng-content>
+<p>
+  shadow works!
+  <ng-content select=".head"></ng-content>
+  <ng-content select="[attr-content]"></ng-content>
+  <ng-content select="section"></ng-content>
 </p>
+
 ```
 
 :memo:app.component.html
@@ -15,10 +17,11 @@
 ```html
 <!-- 组件投影 -->
 <app-shadow>
-    <p class="head">头部投影内容</p>
-    <section>标签选择器投影内容</section>
-    <p attr-content>自定义属性选择器投影内容</p>
+  <p class="head">头部投影内容</p>
+  <section>标签选择器投影内容</section>
+  <p attr-content>自定义属性选择器投影内容</p>
 </app-shadow>
+
 ```
 
 :medal_military:结果展示
@@ -78,6 +81,7 @@ import { ChildComponent } from './child/child.component';
 <app-child></app-child>
 <app-child></app-child>
 <app-child></app-child>
+
 ```
 
 :memo:parent.component.ts
@@ -96,13 +100,13 @@ export class ParentComponent implements OnInit,AfterViewInit {
   // ViewChildren批量获取元素和组件
   @ViewChildren(ChildComponent) private childs:QueryList<ChildComponent>
   @ViewChildren('boxs') private childs1:QueryList<ChildComponent>
-  constructor() { 
+  constructor() {
   }
   ngOnInit(): void {
   }
   ngAfterViewInit(): void { //（3）
      console.log(this.childs);
-     console.log(this.childs1);  //输出QueryList数组 
+     console.log(this.childs1);  //输出QueryList数组
       //QueryList中监听子组件变化的回调函数
      this.childs1.changes.subscribe((changes)=>{
        console.log(changes);
@@ -120,14 +124,15 @@ export class ParentComponent implements OnInit,AfterViewInit {
 
 ```html
 <app-content-child>
-    <div class="head" #head>head</div>
-    <div class="main">main</div>
-    <div class="footer">footer</div>
-    <app-content-box #cbox></app-content-box>
-    <app-content-box #cbox></app-content-box>
-    <app-content-box #cbox></app-content-box>
-    <app-content-box #cbox></app-content-box>
+  <div class="head" #head>head</div>
+  <div class="main">main</div>
+  <div class="footer">footer</div>
+  <app-content-box #cbox></app-content-box>
+  <app-content-box #cbox></app-content-box>
+  <app-content-box #cbox></app-content-box>
+  <app-content-box #cbox></app-content-box>
 </app-content-child>
+
 ```
 
 📝content-child.html
@@ -135,6 +140,7 @@ export class ParentComponent implements OnInit,AfterViewInit {
 ```html
 <p>content-child works!</p>
 <ng-content></ng-content>
+
 ```
 
 :memo:content-child.ts
@@ -168,7 +174,7 @@ export class ContentChildComponent implements OnInit,AfterViewInit {
 ## ContentChildren
 
 > **用法类似ViewChildren, 批量获取投影中到组件或指令。**
-> 
+>
 > **默认只批量获取直属组件，获取所有组件需开启：{ descendants: true }**
 
 :memo:content-parent.html
@@ -176,15 +182,16 @@ export class ContentChildComponent implements OnInit,AfterViewInit {
 ```html
 <p>content-parent works!</p>
 <app-content-child>
+  <app-content-box #cbox></app-content-box>
+  <app-content-box #cbox></app-content-box>
+  <app-content-box #cbox></app-content-box>
+  <app-content-box #cbox></app-content-box>
+  <div class="container">
     <app-content-box #cbox></app-content-box>
     <app-content-box #cbox></app-content-box>
-    <app-content-box #cbox></app-content-box>
-    <app-content-box #cbox></app-content-box>
-    <div class="container">
-        <app-content-box #cbox></app-content-box>
-        <app-content-box #cbox></app-content-box>
-    </div>
+  </div>
 </app-content-child>
+
 ```
 
 :memo:content-child.ts
@@ -208,7 +215,7 @@ export class ContentChildComponent implements OnInit,AfterViewInit {
   }
   ngAfterViewInit(): void {
     console.log(this.cboxs);//只获取直属投影组件
-    console.log(this.cboxss);//获取全部投影组件   
+    console.log(this.cboxss);//获取全部投影组件
   }
 }
 ```
@@ -233,12 +240,13 @@ export class PipepowPipe implements PipeTransform {
 > 在相应的Module中导入并使用
 
 ```html
-<div> {{8| pipepow}}</div>
-<div> {{8| pipepow:3}}</div>
-<div> {{value | pipepow:2}}</div>
-<div>Boost factor: <input [(ngModel)]="factor"></div>
-<div>Normal power: <input [(ngModel)]="power"></div>
-<div> {{factor | pipepow:power}}</div>
+<div>{{8| pipepow}}</div>
+<div>{{8| pipepow:3}}</div>
+<div>{{value | pipepow:2}}</div>
+<div>Boost factor: <input [(ngModel)]="factor" /></div>
+<div>Normal power: <input [(ngModel)]="power" /></div>
+<div>{{factor | pipepow:power}}</div>
+
 ```
 
 ## 非纯管道
@@ -271,7 +279,7 @@ export class Pipe2Pipe implements PipeTransform {
 
 :::
 
-::: details  AppComponent
+::: details AppComponent
 
 ```typescript
 import { Component } from '@angular/core';
@@ -346,7 +354,7 @@ export class AppComponent {
 ## 生命周期
 
 > 生命周期函数：组件创建、组件更新、组件销毁的时候会触发的一系列的方法。
-> 
+>
 > 当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些 生命周期钩子函数。
 
 <img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211106200214.png"/>
@@ -354,7 +362,7 @@ export class AppComponent {
 ::: details 所有生命周期钩子函数执行顺序
 
 ```typescript
-import { AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, 
+import { AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component,
         DoCheck, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 
 @Component({
@@ -366,7 +374,7 @@ export class AppComponent implements OnInit,OnChanges,DoCheck,AfterContentInit,
         AfterContentChecked,AfterViewInit,AfterViewChecked,OnDestroy{
   constructor(){} //组件初始化，写简单的逻辑和数据初始化操作，（获取不到最新输入属性值）
   ngOnChanges(changes: SimpleChanges): void {
-    console.log('changes ', changes); 
+    console.log('changes ', changes);
       //可最早获取到输入属性最新值，输入属性更新时触发，但组件内部改变输入属性是不会触发的
   }
   ngOnInit(): void {
@@ -407,14 +415,14 @@ export class AppComponent implements OnInit,OnChanges,DoCheck,AfterContentInit,
 }
 ```
 
-::: 
+:::
 
 <img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211106202053.png"/>
 
 > 当组件、父组件发生变更检测后都会调用这三个钩子：
-> 
+>
 > 模板中的DOM事件触发就会进行变更检测（`<input (input)="$event">`）
-> 
+>
 > ngDoCheck
 > ngAfterContentChecked
 > ngAfterViewChecked
@@ -443,10 +451,10 @@ changeDetection:ChangeDetectionStrategy.Default
 - 定时器：setTimeout()、setInterval()
 
 > 只要某个组件触发了以上中的一个，就会从顶级组件从上至下开始进行变更检测，每个组件都会进行变更检测，
-> 
+>
 > 检测组件中的值是否应该改变
 
-::: warning  <b>注意</b>
+::: warning <b>注意</b>
 
 已经检测完的组件，不允许在被子组件修改，(子组件不能修改检测完的父组件数据)，这就是单向数据流
 
@@ -460,7 +468,7 @@ changeDetection:ChangeDetectionStrategy.Default
 changeDetection:ChangeDetectionStrategy.OnPush
 ```
 
-::: warning 
+::: warning
 
 onPush策略会把组件从组件树中剥离出去，他和他的子组件都不会检测了；
 
@@ -476,8 +484,8 @@ onPush策略会把组件从组件树中剥离出去，他和他的子组件都
 - 手动调用：ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick()方法
 
 ```js
-markForCheck() //把该视图显式标记为已更改（脏的），以便它下一轮再次进行检查。
-detectChanges() //检查该视图及其子视图。与 detach 结合使用可以实现局部变更检测。(强行检测)
+markForCheck() // 把该视图显式标记为已更改（脏的），以便它下一轮再次进行检查。
+detectChanges() // 检查该视图及其子视图。与 detach 结合使用可以实现局部变更检测。(强行检测)
 ```
 
 :::
@@ -487,7 +495,7 @@ detectChanges() //检查该视图及其子视图。与 detach 结合使用可以
 ## 动态组件
 
 > 如果说，之前在模版中调用的组件为静态组件（比如：app-xxx）
-> 
+>
 > 那么不用在模版里声明，而是通过ts动态插入到dom中到组件，可以视为动态组件
 
 :memo:alert.component.ts:
@@ -622,14 +630,14 @@ export class ShowDataComponent implements OnInit {
 ```html
 <app-tmp-outlet [render]="mycontent"></app-tmp-outlet>
 <ng-template #mycontent>
-    <div>一段父组件传入的内容</div>
+  <div>一段父组件传入的内容</div>
 </ng-template>
 
 <!--使用tem-outlet组件中的数据-->
 <ng-template #mycontent let-context let-val="value">
-    <div>一段父组件传入的内容</div>
-    <div>使用outlet中的context:{{context}}</div>
-    <div>使用outlet中的value:{{val}}</div>
+  <div>一段父组件传入的内容</div>
+  <div>使用outlet中的context:{{context}}</div>
+  <div>使用outlet中的value:{{val}}</div>
 </ng-template>
 ```
 
@@ -640,22 +648,31 @@ export class ShowDataComponent implements OnInit {
 <ng-container [ngTemplateOutlet]="render || default"></ng-container>
 
 <!--传递出去tem-outlet组件中的数据-->
-<ng-container [ngTemplateOutlet]="render || default" [ngTemplateOutletContext]="myContext"></ng-container>
+<ng-container
+  [ngTemplateOutlet]="render || default"
+  [ngTemplateOutletContext]="myContext"
+></ng-container>
 <!-- <ng-container *ngTemplateOutlet="render || default ;context:myContext"></ng-container>简写 -->
 
 <!--ng-template使用效果一样 -->
-<ng-template [ngTemplateOutlet]="render || default" [ngTemplateOutletContext]="myContext"></ng-template>
-<ng-template *ngTemplateOutlet="render || default ;context:myContext"></ng-template>
+<ng-template
+  [ngTemplateOutlet]="render || default"
+  [ngTemplateOutletContext]="myContext"
+></ng-template>
+<ng-template
+  *ngTemplateOutlet="render || default ;context:myContext"
+></ng-template>
 <ng-template #default>
-    <div>一段组价默认的内容</div>
+  <div>一段组价默认的内容</div>
 </ng-template>
 
 <!-- context在内部ng-template也可以绑定 -->
 <ng-template #default let-context let-val="value">
-    <div>一段组价默认的内容</div>
-    <div> context:{{context}}</div>
-    <div> value:{{val}}</div>
+  <div>一段组价默认的内容</div>
+  <div>context:{{context}}</div>
+  <div>value:{{val}}</div>
 </ng-template>
+
 ```
 
 :memo:tmp-outlet.component.ts
@@ -670,7 +687,7 @@ import { Component, Input, OnInit } from '@angular/core';
 })
 export class TmpOutletComponent implements OnInit {
 
-  @Input()  render 
+  @Input()  render
   myContext = {$implicit: 'tmp-outlet组件里的context', value: 'tmp-outlet组件里的value'};
   constructor() { }
 
diff --git "a/docs/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.md" "b/docs/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.md"
index e050678c..c36650fd 100644
--- "a/docs/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.md"
+++ "b/docs/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.md"
@@ -1,4 +1,3 @@
-
 ## 双向绑定
 
 ### 1. 基本双向绑定
@@ -43,16 +42,16 @@ export class SbindComponent implements OnInit {
 
   //默认值
   @Input()  size=16;
-  
+
   @Output() change = new EventEmitter<number>();
-    
+
   dec() {
     this.change.emit(this.size-1)
   }
   inc() {
     this.change.emit(this.size+1)
   }
-    
+
   constructor() { }
   ngOnInit(): void {
   }
@@ -67,6 +66,7 @@ export class SbindComponent implements OnInit {
 ```html
 <app-sbind [(size)]="fontSizePx"></app-sbind>
 <p [style.font-size.px]="fontSizePx">APP 字体大小: {{fontSizePx}}px</p>
+
 ```
 
 :memo:父组件：`app.component.ts`
@@ -84,19 +84,16 @@ export class AppComponent {
 }
 ```
 
-
-
 :memo:子组件：`sbind.component.html`
 
 ```html
 <div>
-    <button (click)="dec()">-</button>
-    <button (click)="inc()">+</button>
-    <p [style.font-size.px]="size"> sbind 字体大小: {{size}}px</p>
+  <button (click)="dec()">-</button>
+  <button (click)="inc()">+</button>
+  <p [style.font-size.px]="size">sbind 字体大小: {{size}}px</p>
 </div>
-```
-
 
+```
 
 :memo:子组件：`sbind.component.ts`
 
@@ -112,7 +109,7 @@ export class SbindComponent implements OnInit {
 
   //默认值
   @Input()  size=16;
-  
+
   // 双向绑定语法：output变量名=输入属性名+Change
   @Output() sizeChange = new EventEmitter<number>();
   constructor() { }
@@ -128,8 +125,6 @@ export class SbindComponent implements OnInit {
 }
 ```
 
-
-
 ### 2. input双向绑定
 
 **普通写法：**
@@ -141,9 +136,9 @@ export class SbindComponent implements OnInit {
 
 **简写形式：**
 
-::: warning 
+::: warning
 
-**ngMoel 指令来源于FormsModule模块**  
+**ngMoel 指令来源于FormsModule模块**
 
 `[(ngMoel)]`可拆解为：
 
@@ -153,11 +148,10 @@ export class SbindComponent implements OnInit {
 
 :::
 
-
-
 ```html
-<input type ="text" [(ngMoel)] ="inputVal">
-<p>{{inputVal}}</p> //默认值 inputVal=''
+<input type="text" [(ngMoel)]="inputVal" />
+<p>{{inputVal}}</p>
+//默认值 inputVal=''
 <!-- <input type="text" [ngModel] = "inputVal" (ngModelChange) ="inputVal= $event">
 <p>{{inputVal}}</p> 完整写法-->
 
@@ -165,7 +159,7 @@ export class SbindComponent implements OnInit {
 
 ### 3. 表单Form中双向绑定
 
- ::: tip 
+::: tip
 
 表单中使用[(ngModel)]，满足下列两个条件之一：
 
@@ -175,15 +169,17 @@ export class SbindComponent implements OnInit {
 :::
 
 ```html
- <form>
-    <input [(ngModel)]="value" name="name" />
-    <input [(ngModel)]="value" [ngModelOptions]="{ name: 'name' }" />
-    <input [(ngModel)]="value" [ngModelOptions]="{ standalone: true }" />
-    <input [(ngModel)]="value" [ngModelOptions]="{  name: 'name' ,standalone: true }" />
-  </form>
-```
-
+<form>
+  <input [(ngModel)]="value" name="name" />
+  <input [(ngModel)]="value" [ngModelOptions]="{ name: 'name' }" />
+  <input [(ngModel)]="value" [ngModelOptions]="{ standalone: true }" />
+  <input
+    [(ngModel)]="value"
+    [ngModelOptions]="{  name: 'name' ,standalone: true }"
+  />
+</form>
 
+```
 
 ::: details ngModel拓展
 
@@ -203,7 +199,7 @@ setVal(){
 
 > 指令：**用于改变DOM元素的外观或行为的指令**（组件是一种特殊的指令）
 
-::: details  组件改为属性型指令
+::: details 组件改为属性型指令
 
 :memo:AppComponent
 
@@ -215,7 +211,7 @@ setVal(){
 import {Component} from '@angular/core';
 @Component({
   selector: '[app-decr]',//属性选择器
-  template: `   
+  template: `
   `,
 })
 export class DecrComponent {
@@ -225,33 +221,31 @@ export class DecrComponent {
 
 :::
 
-
-
 ## 结构型指令
 
 ### `*ngIf`指令
 
 ```html
- <p *ngIf="isShow">一段文字 {{ isShow }}</p> 
+<p *ngIf="isShow">一段文字 {{ isShow }}</p>
 <!-- <p *ngIf="isShow as s">一段文字 {{ s }}</p> 局部变量：只能在标签内部使用-->
 isShow:true显示，反之（取决于绑定的值是否为真）
+
 ```
 
-::: warning 
+::: warning
 
 会改变DOM结构，原理：移除和插入DOM节点
 
 :::
 
-::: details *ngIf  完整写法
+::: details \*ngIf 完整写法
 
 ```html
- <ng-template [ngIf]="isShow" let-s>
-     <p *ngIf="isShow">一段文字 {{ isShow }} {{s}}</p> 
- </ng-template>
-```
-
+<ng-template [ngIf]="isShow" let-s>
+  <p *ngIf="isShow">一段文字 {{ isShow }} {{s}}</p>
+</ng-template>
 
+```
 
 :::
 
@@ -264,7 +258,7 @@ import {Component} from '@angular/core';
   template: `
     <div *ngIf="condition; else elseBlock">condition为真时显示</div>
 
-    <ng-template ##elseBlock> 
+    <ng-template ##elseBlock>
       <p> condition为假时显示 </p>
     </ng-template>
   `,
@@ -291,7 +285,7 @@ export class IfComp {
 }
 ```
 
-::: details    TemplateRef拓展
+::: details TemplateRef拓展
 
 ```typescript
 import {Component, OnInit, ChangeDetectionStrategy, ViewChild, TemplateRef, AfterViewInit} from '@angular/core';
@@ -300,8 +294,8 @@ import {Component, OnInit, ChangeDetectionStrategy, ViewChild, TemplateRef, Afte
   template: `
     <button(click)="condition = !condition">toggle block</button>
     <p *ngIf="condition else elseBlocks">{{ condition }} === true 时显示</p>
-    
-	<ng-template ##firstTpl>
+
+  <ng-template ##firstTpl>
       <p>{{ condition }} === false 时显示</p>
     </ng-template>
   `,
@@ -333,9 +327,9 @@ import {Component} from '@angular/core';
   selector: 'app-for',
   template: `
     <ul>
-      <li *ngFor="let item of Persons; 
-			index as i; count as len; let ev = even; let od = odd; let f = first; let l = last;
-			trackBy: trackByPerson">{{ item.name }}</li>
+      <li *ngFor="let item of Persons;
+      index as i; count as len; let ev = even; let od = odd; let f = first; let l = last;
+      trackBy: trackByPerson">{{ item.name }}</li>
     </ul>
   `,
 })
@@ -353,10 +347,10 @@ export class ForComponent {
     id: 'p3',
     name: '王五'
   },
-  
+
 ];
 trackByPerson(index,item){
-    return item.id	//追踪id，id值不变不刷新（提升性能）
+    return item.id  //追踪id，id值不变不刷新（提升性能）
   }
 }
 ```
@@ -364,57 +358,51 @@ trackByPerson(index,item){
 ::: details ngFor局部变量
 
 ```js
- index: number	//可迭代对象中当前条目的索引。
- count: number	//可迭代对象的长度。
- first: boolean	//如果当前条目是可迭代对象中的第一个条目则为 true。
- last: boolean	//如果当前条目是可迭代对象中的最后一个条目则为 true。
- even: boolean	//如果当前条目在可迭代对象中的索引号为偶数则为 true。
- odd: boolean	//如果当前条目在可迭代对象中的索引号为奇数则为 true。
- $implicit: T	//迭代目标（绑定到ngForOf）中每个条目的值。
- ngForOf: NgIterable<T>	//迭代表达式的值。当表达式不局限于访问某个属性时，这会非常有用，比如在使用 async 管道时（userStreams | async）。
+ index: number  //可迭代对象中当前条目的索引。
+ count: number  //可迭代对象的长度。
+ first: boolean  //如果当前条目是可迭代对象中的第一个条目则为 true。
+ last: boolean  //如果当前条目是可迭代对象中的最后一个条目则为 true。
+ even: boolean  //如果当前条目在可迭代对象中的索引号为偶数则为 true。
+ odd: boolean  //如果当前条目在可迭代对象中的索引号为奇数则为 true。
+ $implicit: T  //迭代目标（绑定到ngForOf）中每个条目的值。
+ ngForOf: NgIterable<T>  //迭代表达式的值。当表达式不局限于访问某个属性时，这会非常有用，比如在使用 async 管道时（userStreams | async）。
 ```
 
-
-
 :::
 
-
-
-::: details  *ngFor展开写法
+::: details \*ngFor展开写法
 
 ```html
- <ul>
-     <ng-template
-       ngFor
-       [ngForOf]="heros"
-       [ngForTrackBy]="trackByHero"
-       let-item
-       let-i="index"
-       let-od="odd"
-       let-ev="even"
-       let-len="count"
-       let-f="first"
-       let-l="last">
-       <li [class.even]="ev" [class.odd]="od">
-         <p>index: {{ i }}</p>
-         <p>count: {{ len }}</p>
-         <p>name: {{ item.name }}</p>
-         <p>first: {{ f }} -- last: {{ l }}</p>
-         <hr>
-       </li>
-     </ng-template>
-   </ul>
-```
-
+<ul>
+  <ng-template
+    ngFor
+    [ngForOf]="heros"
+    [ngForTrackBy]="trackByHero"
+    let-item
+    let-i="index"
+    let-od="odd"
+    let-ev="even"
+    let-len="count"
+    let-f="first"
+    let-l="last"
+  >
+    <li [class.even]="ev" [class.odd]="od">
+      <p>index: {{ i }}</p>
+      <p>count: {{ len }}</p>
+      <p>name: {{ item.name }}</p>
+      <p>first: {{ f }} -- last: {{ l }}</p>
+      <hr />
+    </li>
+  </ng-template>
+</ul>
 
+```
 
 :::
 
-
-
 ### `[ngSwitch]`指令
 
-::: warning 
+::: warning
 
 `[ngSwitch]` 为属性型指令
 
@@ -443,9 +431,9 @@ import {Component} from '@angular/core';
       <input type="radio" name="fruit" value="other" id="other" [(ngModel)]="fruit" />
       <label for="other">other</label>
     </p>
-    
+
     selected fruit: {{ fruit }}
-    
+
     <div class="content" [ngSwitch]="fruit">
       <p *ngSwitchCase="'apple'">这是 苹果</p>
       <p *ngSwitchCase="'pear'"> 这是 梨</p>
@@ -478,24 +466,18 @@ export class SwitchComponent {
      </div>
 ```
 
-
-
 :::
 
-
-
-
-
-
-
 ## 自定义指令
 
 使用：
 
 ```html
-<p appHighlight highlightColor ='red'></p>
-<p appHighlight [highlightColor] ='color'></p>
-<p appHighlight='color'></p> <!-- 起别名后，输入属性和指令名设为一样-->
+<p appHighlight highlightColor="red"></p>
+<p appHighlight [highlightColor]="color"></p>
+<p appHighlight="color"></p>
+<!-- 起别名后，输入属性和指令名设为一样-->
+
 ```
 
 ### 自定义高亮指令（属性型）
@@ -514,14 +496,14 @@ export class HighlightDirective {
   constructor(private el: ElementRef) {
     console.log('appHighlight');
   }
-   
+
   @HostListener('mouseenter') onMouseEnter() {
     this.highlight(this.highlightColor || 'yellow');
   }
-	//内部事件监听
+  //内部事件监听
   @HostListener('mouseleave',['$event']) onMouseLeave() {
     this.highlight('');
-      console.log(event)	//传递事件对象
+      console.log(event)  //传递事件对象
   }
 
   private highlight(color: string) {
@@ -540,8 +522,6 @@ export class HighlightDirective {
 
 :::
 
-
-
 ### 自定义unless指令（结构型）
 
 ::: details 定义
@@ -560,12 +540,12 @@ export class UnlessDirective implements OnChanges {
   @Input('appUnless') unless: boolean;
   private hasView = false;//是否已显示
   private context = new UnlessContext();
-  
+
   constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {
     // console.log(this.templateRef);
     // console.log(this.viewContainer);
   }
-	//监听输入属性变化
+  //监听输入属性变化
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['unless']) {
     this.context.$implicit = this.context.appUnless = this.unless;
@@ -588,8 +568,6 @@ export class UnlessDirective implements OnChanges {
 }
 ```
 
-
-
 :::
 
 ::: details 调用
@@ -609,7 +587,7 @@ import { Component } from '@angular/core';
   `,
 })
 export class AppComponent {
-  show = false;	//false: 显示 	true: 隐藏
+  show = false;  //false: 显示   true: 隐藏
 }
 ```
 
@@ -620,11 +598,13 @@ export class AppComponent {
 ### `ng-template`
 
 ```html
-<ng-template>是一个 Angular 元素，用来渲染 HTML。 它永远不会直接显示出来。
-事实上，在渲染视图之前，Angular 会把 <ng-template> 及其内容替换为一个注释。
-```
-
+<ng-template
+  >是一个 Angular 元素，用来渲染 HTML。 它永远不会直接显示出来。
+  事实上，在渲染视图之前，Angular 会把
+  <ng-template> 及其内容替换为一个注释。 </ng-template></ng-template
+>
 
+```
 
 ::: warning
 
@@ -635,15 +615,23 @@ export class AppComponent {
 ### `ng-container`
 
 ```html
-Angular 的 <ng-container> 是一个分组元素，但它不会污染样式或元素布局，因为 Angular 压根不会把它放进 DOM 中。
-<ng-container> 是一个由 Angular 解析器负责识别处理的语法元素。 它不是一个指令、组件、类或接口，更像是 JavaScript 中 if 块中的花括号。
+Angular 的
+<ng-container>
+  是一个分组元素，但它不会污染样式或元素布局，因为 Angular 压根不会把它放进 DOM
+  中。
+  <ng-container>
+    是一个由 Angular 解析器负责识别处理的语法元素。
+    它不是一个指令、组件、类或接口，更像是 JavaScript 中 if 块中的花括号。
+  </ng-container></ng-container
+>
+
 ```
 
 ```js
 if (someCondition) {
-  statement1;
-  statement2;
-  statement3;
+  statement1
+  statement2
+  statement3
 }
 ```
 
@@ -657,10 +645,10 @@ import {Component} from '@angular/core';
   selector: 'app-tpl-var',
   template: `
     <input ##phone placeholder="phone number" />
- 	<input ref-phone placeholder="phone number" />
+   <input ref-phone placeholder="phone number" />
     <button (click)="callPhone(phone.value)">Call</button>
   `,
-})	//两种写法
+})  //两种写法
 export class TplVarComponent {
   constructor() { }
   callPhone(value: string) {
@@ -676,11 +664,11 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'app-root',
   template: `
-    
+
       <button (click)="sizer.inc()">app inc</button>
       <app-sbind [(size)]="size" ##sizer></app-sbind>
       size: {{ size }}
-    
+
   `,
 })
 export class AppComponent {
@@ -693,7 +681,7 @@ export class AppComponent {
 
 ### 管道 `|`
 
-::: warning 
+::: warning
 
 模板变量可以通过一条或多条管道格式化数据，
 
@@ -749,4 +737,3 @@ export class AppComponent {
 ```typescript
 <p> {{$any(item).bestByDate}}</p>
 ```
-
diff --git "a/docs/Framework/React/React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md" "b/docs/Framework/React/React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md"
index 591363f1..005c9e5f 100644
--- "a/docs/Framework/React/React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md"
+++ "b/docs/Framework/React/React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md"
@@ -1,40 +1,38 @@
-
-
 ## 一、前置知识
 
 ### 虚拟DOM
 
 ```jsx
-const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
-			<h1 id="title">
-				<span>Hello,React</span>
-			</h1>
-		)
-//2.渲染虚拟DOM到页面   准备好一个“容器”<div id="root"></div> 
-ReactDOM.render(VDOM,document.getElementById('root'))
+const VDOM = (/* 此处一定不要写引号，因为不是字符串 */
+  <h1 id="title">
+    <span>Hello,React</span>
+  </h1>
+)
+// 2.渲染虚拟DOM到页面   准备好一个“容器”<div id="root"></div>
+ReactDOM.render(VDOM, document.getElementById('root'))
 ```
 
 **关于虚拟DOM：**
 
 1.本质是Object类型的对象（一般对象）
 
-​     2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
+​ 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
 
-​     3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上
+​ 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上
 
 **JSX语法规则**
 
-​      1.定义虚拟DOM时，不要写引号。
+​ 1.定义虚拟DOM时，不要写引号。
 
-​	   2.标签中混入JS表达式时要用 `{}`。
+​ 2.标签中混入JS表达式时要用 `{}`。
 
-​      3.样式的类名指定不要用class，要用className。
+​ 3.样式的类名指定不要用class，要用className。
 
-​      4.只有一个根标签
+​ 4.只有一个根标签
 
-​      5.标签必须闭合
+​ 5.标签必须闭合
 
-​      6.标签首字母
+​ 6.标签首字母
 
 **注意**
 
@@ -45,10 +43,10 @@ ReactDOM.render(VDOM,document.getElementById('root'))
      (1). a
           (2). a+b
           (3). demo(1)
-          (4). arr.map() 
+          (4). arr.map()
           (5). function test () {}
 
->  2.语句(代码)：
+> 2.语句(代码)：
 
 ```js
 (1).if(){}
@@ -61,334 +59,344 @@ ReactDOM.render(VDOM,document.getElementById('root'))
 ### 函数式组件
 
 ```js
-	<!-- 准备好一个“容器” -->
-	<div id="root"></div>
-	
-	<!-- 引入react核心库 -->
-	<script type="text/javascript" src="../js/react.development.js"></script>
-	<!-- 引入react-dom，用于支持react操作DOM -->
-	<script type="text/javascript" src="../js/react-dom.development.js"></script>
-	<!-- 引入babel，用于将jsx转为js -->
-	<script type="text/javascript" src="../js/babel.min.js"></script>
-
-	<script type="text/babel">
-		//1.创建函数式组件
-		function MyComponent(){
-			console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
-			return <h2>函数式组件</h2>
-		}
-		//2.渲染组件到页面
-		ReactDOM.render(<MyComponent/>,document.getElementById('root'))
-		/* 
-			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
-					1.React解析组件标签，找到了MyComponent组件。
-					2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
-		*/
-	</script>
+  <!-- 准备好一个“容器” -->
+  <div id="root"></div>
+
+  <!-- 引入react核心库 -->
+  <script type="text/javascript" src="../js/react.development.js"></script>
+  <!-- 引入react-dom，用于支持react操作DOM -->
+  <script type="text/javascript" src="../js/react-dom.development.js"></script>
+  <!-- 引入babel，用于将jsx转为js -->
+  <script type="text/javascript" src="../js/babel.min.js"></script>
+
+  <script type="text/babel">
+    //1.创建函数式组件
+    function MyComponent(){
+      console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
+      return <h2>函数式组件</h2>
+    }
+    //2.渲染组件到页面
+    ReactDOM.render(<MyComponent/>,document.getElementById('root'))
+    /*
+      执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
+          1.React解析组件标签，找到了MyComponent组件。
+          2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
+    */
+  </script>
 ```
 
-
-
 ### 类式组件
 
 ```js
-//创建类式组件
+// 创建类式组件
 class MyComponent extends React.Component {
-	render(){
-		//render在MyComponent的原型对象上，供实例使用。
-		//render中的this指向MyComponent组件实例对象。
-		console.log('render中的this:',this);
-		return <h2>类式组件</h2>
-	}
+  render() {
+    // render在MyComponent的原型对象上，供实例使用。
+    // render中的this指向MyComponent组件实例对象。
+    console.log('render中的this:', this)
+    return <h2>类式组件</h2>
+  }
 }
-//渲染组件到页面
-ReactDOM.render(<MyComponent/>,document.getElementById('root'))
+// 渲染组件到页面
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
 ```
+
 ::: tip
-  执行了`ReactDOM.render(<MyComponent/>`.......之后，发生了什么？
+执行了`ReactDOM.render(<MyComponent/>`.......之后，发生了什么？
 
-  ​     1.React解析组件标签，找到了MyComponent组件。
+​ 1.React解析组件标签，找到了MyComponent组件。
 
-  ​     2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
+​ 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
 
-  ​     3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
+​ 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
 :::
+
 ### 补充
 
 **受控组件**：React 中受控组件的是指表单元素的控制是交给 React ，表单元素的值是完全交由组件的 state 控制。
 
-​					受控组件也可以用于描述内部状态由传入 props 控制的 React 自定义组件。
+​ 受控组件也可以用于描述内部状态由传入 props 控制的 React 自定义组件。
 
 **非受控组件**： 表单元素的状态并不受 React 组件状态的影响，表单元素的值存储于 DOM 元素中。
 
-​						如果要 React 组件要获取 DOM 元素的值，需要通过绑定 ref 的方式去获取。
-
-
-
-
+​ 如果要 React 组件要获取 DOM 元素的值，需要通过绑定 ref 的方式去获取。
 
 ### 组实例三大属性
 
 #### state
 
 ```jsx
-//1.创建组件
-class Weather extends React.Component{
-	//初始化状态
-	state = {isHot:false,wind:'微风'}
-	render(){
-		const {isHot,wind} = this.state
-		return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
-	}
-	//自定义方法————要用赋值语句的形式+箭头函数 **
-	changeWeather = () =>{
-		const isHot = this.state.isHot
-		this.setState({isHot:!isHot})
-	}
+// 1.创建组件
+class Weather extends React.Component {
+  // 初始化状态
+  state = { isHot: false, wind: '微风' }
+  render() {
+    const { isHot, wind } = this.state
+    return (
+      <h1 onClick={this.changeWeather}>
+        今天天气很
+        {isHot ? '炎热' : '凉爽'}
+        ，
+        {wind}
+      </h1>
+    )
+  }
+
+  // 自定义方法————要用赋值语句的形式+箭头函数 **
+  changeWeather = () => {
+    const isHot = this.state.isHot
+    this.setState({ isHot: !isHot })
+  }
 }
-//2.渲染组件到页面
-ReactDOM.render(<Weather/>,document.getElementById('test'))
+// 2.渲染组件到页面
+ReactDOM.render(<Weather />, document.getElementById('test'))
 ```
 
 #### props
 
 ```jsx
-//创建组件
-class Person extends React.Component{
-    //props简写形式: 对标签属性进行类型、必要性的限制
-    static propTypes = {
-        name:PropTypes.string.isRequired, //限制name必传，且为字符串
-        sex:PropTypes.string,//限制sex为字符串
-        age:PropTypes.number,//限制age为数值
-	}
-	render(){
-		const {name,age,sex} = this.props
-		return (
-			<ul>
-				<li>姓名：{name}</li>
-				<li>性别：{sex}</li>
-				<li>年龄：{age+1}</li>
-			</ul>
-		)
-	}
+// 创建组件
+class Person extends React.Component {
+  // props简写形式: 对标签属性进行类型、必要性的限制
+  static propTypes = {
+    name: PropTypes.string.isRequired, // 限制name必传，且为字符串
+    sex: PropTypes.string, // 限制sex为字符串
+    age: PropTypes.number, // 限制age为数值
+  }
+
+  render() {
+    const { name, age, sex } = this.props
+    return (
+      <ul>
+        <li>
+          姓名：
+          {name}
+        </li>
+        <li>
+          性别：
+          {sex}
+        </li>
+        <li>
+          年龄：
+          {age + 1}
+        </li>
+      </ul>
+    )
+  }
 }
- 
-/*Person.propTypes = {
-	name:PropTypes.string.isRequired, //限制name必传，且为字符串
-	sex:PropTypes.string,//限制sex为字符串
-	age:PropTypes.number,//限制age为数值
-	speak:PropTypes.func,//限制speak为函数
+
+/* Person.propTypes = {
+  name:PropTypes.string.isRequired, //限制name必传，且为字符串
+  sex:PropTypes.string,//限制sex为字符串
+  age:PropTypes.number,//限制age为数值
+  speak:PropTypes.func,//限制speak为函数
 }
 
 Person.defaultProps = {//指定默认标签属性值
-	sex:'男',//sex默认值为男
-	age:18 //age默认值为18
-}*/
-//渲染组件到页面
-ReactDOM.render(<Person name="jerry" age={19}  sex="男"/>,document.getElementById('test1'))
-ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))
-
-const p = {name:'老刘',age:18,sex:'女'}
+  sex:'男',//sex默认值为男
+  age:18 //age默认值为18
+} */
+// 渲染组件到页面
+ReactDOM.render(<Person name="jerry" age={19} sex="男" />, document.getElementById('test1'))
+ReactDOM.render(<Person name="tom" age={18} sex="女" />, document.getElementById('test2'))
+
+const p = { name: '老刘', age: 18, sex: '女' }
 // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
-ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
+ReactDOM.render(<Person {...p} />, document.getElementById('test3'))
 ```
 
-
-
 **函数组件使用props**
 
 ```jsx
-function Person (props){
-	const {name,age,sex} = props
-	return (
-        <ul>
-            <li>姓名：{name}</li>
-            <li>性别：{sex}</li>
-            <li>年龄：{age}</li>
-        </ul>
-	)
+function Person(props) {
+  const { name, age, sex } = props
+  return (
+    <ul>
+      <li>
+        姓名：
+        {name}
+      </li>
+      <li>
+        性别：
+        {sex}
+      </li>
+      <li>
+        年龄：
+        {age}
+      </li>
+    </ul>
+  )
 }
 Person.propTypes = {
-	name:PropTypes.string.isRequired, 
-	sex:PropTypes.string,
-	age:PropTypes.number,
+  name: PropTypes.string.isRequired,
+  sex: PropTypes.string,
+  age: PropTypes.number,
 }
 
 Person.defaultProps = {
-	sex:'男',
-	age:18 
+  sex: '男',
+  age: 18
 }
 ```
 
-
-
 #### refs
 
 ```jsx
-class Demo extends React.Component{
-    myRef2 = React.createRef() //3.createRef形式
-    //React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点
-    
-	showData = ()=>{
-		const {input1} = this.refs //1.字符串形式
-        const {input2} = this //2.回调函数形式
-	}
-    saveInput = (c)=>{
-        this.input2 = c;
-        console.log('=@=',c);
-    }
-	render(){
-		return(
-			<div>
-				<input ref="input1" type="text"/> {/*字符串形式*/}
-			  	<input ref={(c)=>{this.input2 = c;console.log('@',c);}} type="text"/> {/*回调函数形式*/}
-               	<input ref={this.saveInput} type="text"/>
-                <input ref={this.myRef} type="text" />{/*createRef形式*/}
-			</div>
-		)
-	}
+class Demo extends React.Component {
+  myRef2 = React.createRef() // 3.createRef形式
+  // React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点
+
+  showData = () => {
+    const { input1 } = this.refs // 1.字符串形式
+    const { input2 } = this // 2.回调函数形式
+  }
+
+  saveInput = (c) => {
+    this.input2 = c
+    console.log('=@=', c)
+  }
+
+  render() {
+    return (
+      <div>
+        <input ref="input1" type="text" />
+        {' '}
+        {/* 字符串形式 */}
+        <input ref={(c) => { this.input2 = c; console.log('@', c) }} type="text" />
+        {' '}
+        {/* 回调函数形式 */}
+        <input ref={this.saveInput} type="text" />
+        <input ref={this.myRef} type="text" />
+        {/* createRef形式 */}
+      </div>
+    )
+  }
 }
-ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
+ReactDOM.render(<Demo a="1" b="2" />, document.getElementById('test'))
 ```
 
 > 注意: 回调函数形式执行次数
 
-
-
 ### 事件处理
+
 ::: warning
- (1).通过onXxx属性指定事件处理函数(注意大小写)
+(1).通过onXxx属性指定事件处理函数(注意大小写)
 
- ​      a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
+​ a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
 
- ​      b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效
+​ b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效
 
- (2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref
+(2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref
 :::
 
+**高阶函数**：参数或返回值是一个函数满足一个条件则为高阶函数。
 
- **高阶函数**：参数或返回值是一个函数满足一个条件则为高阶函数。
-
-​         常见的高阶函数有：Promise、setTimeout、arr.map()等等
+​ 常见的高阶函数有：Promise、setTimeout、arr.map()等等
 
-
-
- **函数的柯里化**：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 
+**函数的柯里化**：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
 
 ```js
-function sum(a){
-	return(b)=>{
-		return (c)=>{
-			return a+b+c
-		}
-	}
+function sum(a) {
+  return (b) => {
+    return (c) => {
+      return a + b + c
+    }
+  }
 }
-//函数柯里化传参
-saveFormData = (dataType)=>{
-	return (event)=>{
-		this.setState({[dataType]:event.target.value})
-	}
+// 函数柯里化传参
+saveFormData = (dataType) => {
+  return (event) => {
+    this.setState({ [dataType]: event.target.value })
+  }
 }
-//<input onChange={this.saveFormData('username')} type="text" name="username"/>
+// <input onChange={this.saveFormData('username')} type="text" name="username"/>
 
-//箭头函数传参
-saveFormData = (dataType,event)=>{
-        this.setState({[dataType]:event.target.value})
-    }
-//<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
+// 箭头函数传参
+saveFormData = (dataType, event) => {
+  this.setState({ [dataType]: event.target.value })
+}
+// <input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
 ```
 
-
-
 ### 组件生命周期
 
 **旧版(16)**
 
 ![image-20220421223156627](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220421223156627.png)
 
-
-
 ```js
-/* 
+/*
 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
-            1.	constructor()
-            2.	componentWillMount()
-            3.	render()
-            4.	componentDidMount() =====> 常用
+            1.  constructor()
+            2.  componentWillMount()
+            3.  render()
+            4.  componentDidMount() =====> 常用
             一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
-            
+
 2. 更新阶段: 由组件内部this.setSate()或父组件render触发
-            1.	shouldComponentUpdate()
-            2.	componentWillUpdate()
-            3.	render() =====> 必须使用的一个
-            4.	componentDidUpdate()
-            
+            1.  shouldComponentUpdate()
+            2.  componentWillUpdate()
+            3.  render() =====> 必须使用的一个
+            4.  componentDidUpdate()
+
 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
-            1.	componentWillUnmount()  =====> 常用
+            1.  componentWillUnmount()  =====> 常用
             一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
 */
 ```
 
-
-
 **新版(17+)**
 
 ![image-20220421223604701](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220421223604701.png)
 
-
-
 ```markdown
 
 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
-            1.	constructor()
-            2.	getDerivedStateFromProps
-            3.	render()
-            4.	componentDidMount() =====> 常用
+            1.  constructor()
+            2.  getDerivedStateFromProps
+            3.  render()
+            4.  componentDidMount() =====> 常用
                         一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
 2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
-            1.	getDerivedStateFromProps
-            2.	shouldComponentUpdate()
-            3.	render()
-            4.	getSnapshotBeforeUpdate
-            5.	componentDidUpdate()
+            1.  getDerivedStateFromProps
+            2.  shouldComponentUpdate()
+            3.  render()
+            4.  getSnapshotBeforeUpdate
+            5.  componentDidUpdate()
 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
-            1.	componentWillUnmount()  =====> 常用
+            1.  componentWillUnmount()  =====> 常用
                         一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
 
 ```
 
-
-
-**getSnapshotBeforeUpdate** 
+**getSnapshotBeforeUpdate**
 
 > 在render之前调用，state已更新
 >
 > 典型场景：获取render之前的dom状态
 
-
-
 **getDerivedStateFromProps**
 ::: tip
 
- 1：当state需要从props初始化时，使用
+1：当state需要从props初始化时，使用
 
- 2：尽量不使用，维护俩者状态需要消耗额外资源，增加复杂度
+2：尽量不使用，维护俩者状态需要消耗额外资源，增加复杂度
 
- 3：每次render都会调用
+3：每次render都会调用
 
- 4：典型场景表单获取默认值
+4：典型场景表单获取默认值
 
 :::
 
 ```markdown
  面试相关题:
-	1). react/vue中的key有什么作用？（key的内部原理是什么？）
-	2). 为什么遍历列表时，key最好不要用index?
+  1). react/vue中的key有什么作用？（key的内部原理是什么？）
+  2). 为什么遍历列表时，key最好不要用index?
 
 1. 虚拟DOM中key的作用：
-	1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
+  1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
 
-	2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 
+  2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】,
                     随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
 
         a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
@@ -412,6 +420,4 @@ saveFormData = (dataType,event)=>{
     1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
     2.如果确定只是简单的展示数据，用index也是可以的。
 
-	
 ```
-
diff --git "a/docs/Framework/Vitest/\346\265\213\350\257\225\346\265\201\347\250\213.md" "b/docs/Framework/Vitest/\346\265\213\350\257\225\346\265\201\347\250\213.md"
index dc43bea2..f735a92e 100644
--- "a/docs/Framework/Vitest/\346\265\213\350\257\225\346\265\201\347\250\213.md"
+++ "b/docs/Framework/Vitest/\346\265\213\350\257\225\346\265\201\347\250\213.md"
@@ -1,20 +1,24 @@
 ## 大致步骤
-  1. 准备数据
-  2. 验证
-  3. 
+
+1. 准备数据
+2. 验证
+3.
+
 ## 准备数据
 
 ### 数据的位置
+
 1. **内联**
 2. **隐式**
 
-###  准备方式
+### 准备方式
+
 1. **后门(偷懒式)**
+
 ```js
 it('should be ok', () => {
-
   // 通过后门的方式准备数据（不推荐：暴露逻辑结构，不利于后续维护）
-  let todo = {
+  const todo = {
     id: 1,
     title: 'test',
     completed: false
@@ -22,19 +26,23 @@ it('should be ok', () => {
   addTodo(todo)
 })
 ```
+
 2. **委托**
    1. 通过委托函数来准备数据
    2. roundtrip，调用非公开 API 准备数据
 
 ## 验证
+
 ### 验证方式
+
 1. **验证状态**
 2. **验证行为**
 
-
 ## 测试调试
+
 1. **JavaScript Debug Terminal**
 2. **launch.json + F5**
+
 ```json
 {
   // 想了解更多的信息, 请访问：https://go.microsoft.com/fwlink/?linkid=830387
@@ -54,5 +62,6 @@ it('should be ok', () => {
   ]
 }
 ```
+
 3. **Vitest 插件**
 4. **vitest --ui**
diff --git "a/docs/Framework/Vue/Vite\345\216\237\347\220\206\345\255\246\344\271\240.md" "b/docs/Framework/Vue/Vite\345\216\237\347\220\206\345\255\246\344\271\240.md"
index c5b7da85..fc0d658e 100644
--- "a/docs/Framework/Vue/Vite\345\216\237\347\220\206\345\255\246\344\271\240.md"
+++ "b/docs/Framework/Vue/Vite\345\216\237\347\220\206\345\255\246\344\271\240.md"
@@ -1,10 +1,9 @@
-
 # Vite底层原理学习
 
 ## 构建工具承担：
+
 1. 模块化开发支持：ES Module、CommonJS、AMD、CMD等
 2. 处理代码兼容性：babel语法降级，less/sass/stylus等语法转换
 3. 提升项目性能：压缩代码，合并代码，图片压缩，代码分割，懒加载，预加载等
 4. 优化开发体验：热更新，自动刷新，代理服务器，自动打开浏览器等
 5. 统一开发标准：eslint代码检查，prettier代码格式化，git提交规范等
-   
diff --git "a/docs/Framework/Vue/Vue2\351\241\271\347\233\256\350\277\201\347\247\273Vite5.md" "b/docs/Framework/Vue/Vue2\351\241\271\347\233\256\350\277\201\347\247\273Vite5.md"
index e0f566ec..a1a5154b 100644
--- "a/docs/Framework/Vue/Vue2\351\241\271\347\233\256\350\277\201\347\247\273Vite5.md"
+++ "b/docs/Framework/Vue/Vue2\351\241\271\347\233\256\350\277\201\347\247\273Vite5.md"
@@ -16,8 +16,8 @@
 8. 把 `public/index.html` 移动到根目录 `index.html`，并修改占位符 `href="<%= BASE_URL %>favicon.ico"`
 9. 语法转换：动态导入，浏览器环境获取环境变量
 
-
 ### `index.html` 迁移
+
 ::: details webpack: public/index.html + .env
 
 ```env
@@ -26,7 +26,7 @@ BASE_URL=/xxx/admin
 ```
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
   <head>
     <meta charset="utf-8" />
@@ -51,10 +51,10 @@ BASE_URL=/xxx/admin
 :::
 ::: details vite: /index.html + vite.config.js(plugins)
 
-```js {3-8} 
+```js {3-8}
   plugins: [
     vue(),
-    createHtmlPlugin({ 
+    createHtmlPlugin({
       inject: {
         data: {
           title: 'APP TITLE',
@@ -65,7 +65,7 @@ BASE_URL=/xxx/admin
 ```
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
   <head>
     <meta charset="utf-8" />
@@ -82,7 +82,8 @@ BASE_URL=/xxx/admin
       >
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script> // [!code ++]
+    <script type="module" src="/src/main.js"></script>
+    // [!code ++]
   </body>
 </html>
 ```
@@ -94,28 +95,28 @@ BASE_URL=/xxx/admin
 ::: details vue.config.js
 
 ```js
-const path = require("path");
+const path = require('node:path')
 function resolve(relativePath) {
-  return path.join(__dirname, relativePath);
+  return path.join(__dirname, relativePath)
 }
-const webpack = require("webpack");
-let isProduction = process.env.NODE_ENV;
+const webpack = require('webpack')
+const isProduction = process.env.NODE_ENV
 module.exports = {
-  publicPath: "/xxx/admin", // www.xxx.com/xxx/admin
+  publicPath: '/xxx/admin', // www.xxx.com/xxx/admin
   configureWebpack: (config) => {
-    if (isProduction === "production") {
+    if (isProduction === 'production') {
       return {
         resolve: {
           alias: {
-            "@": resolve("src"),
+            '@': resolve('src'),
           },
         },
         optimization: {
-          runtimeChunk: "single",
-          //分离js
+          runtimeChunk: 'single',
+          // 分离js
           splitChunks: {
-            chunks: "all", //chunk 可以在异步和非异步 chunk 之间共享
-            maxInitialRequests: Infinity, // 最大并行请求数
+            chunks: 'all', // chunk 可以在异步和非异步 chunk 之间共享
+            maxInitialRequests: Number.POSITIVE_INFINITY, // 最大并行请求数
             minSize: 20000, // 生成 chunk 的最小体积
             maxSize: 60000, // 若引入的模块大于60kb，则告诉webpack尝试再进行拆分
             cacheGroups: {
@@ -126,37 +127,38 @@ module.exports = {
                   // 设定分包以后的文件模块名字，按照包名字替换拼接一下
                   const packageName = module.context.match(
                     /[\\/]node_modules[\\/](.*?)([\\/]|$)/
-                  )[1];
-                  return `npm.${packageName.replace("@", "")}`;
+                  )[1]
+                  return `npm.${packageName.replace('@', '')}`
                 },
               },
             },
           },
         },
-      };
-    } else {
+      }
+    }
+    else {
       return {
         resolve: {
           alias: {
-            "@": resolve("src"),
+            '@': resolve('src'),
           },
         },
-      };
+      }
     }
   },
   chainWebpack(config) {
-    config.module.rule("js").exclude.add(resolve("src/assets/fonts")).end();
+    config.module.rule('js').exclude.add(resolve('src/assets/fonts')).end()
   },
   devServer: {
     proxy: {
-      "/xxx/api": {
-        target: "http://172.16.16.16",
+      '/xxx/api': {
+        target: 'http://172.16.16.16',
         ws: false,
         changeOrigin: true,
       },
     },
   },
-};
+}
 ```
 
 :::
@@ -215,7 +217,6 @@ export default defineConfig({
     },
   },
 })
-
 ```
 
 :::
@@ -224,7 +225,7 @@ export default defineConfig({
 
 #### 动态导入-动态添加路由
 
-```js 
+```js
 const modules = import.meta.glob('@/views/**/*.vue') // [!code ++]
 ...
 routeList.forEach((item) => {
@@ -249,9 +250,9 @@ vite: `import.meta.env.VITE_APP_TITLE`
 
 ```js
 const router = new VueRouter({
-  mode: "history",
-  base: process.env.BASE_URL,  // [!code --]
+  mode: 'history',
+  base: process.env.BASE_URL, // [!code --]
   base: import.meta.env.BASE_URL, // [!code ++]
   routes,
-});
+})
 ```
diff --git "a/docs/Framework/Vue/Vue3\350\241\245\346\274\217\347\254\224\350\256\260.md" "b/docs/Framework/Vue/Vue3\350\241\245\346\274\217\347\254\224\350\256\260.md"
index f4095fe7..c2155401 100644
--- "a/docs/Framework/Vue/Vue3\350\241\245\346\274\217\347\254\224\350\256\260.md"
+++ "b/docs/Framework/Vue/Vue3\350\241\245\346\274\217\347\254\224\350\256\260.md"
@@ -1,75 +1,71 @@
 ## inheritAttrs
-> 唯一一个需要用额外的   `script` 块书写的选项
 
- ::: tip $attrs
+> 唯一一个需要用额外的 `script` 块书写的选项
+
+::: tip $attrs
 透传 Attributes 是指由父组件传入，且没有被子组件声明为 props 或是 组件自定义事件的 attributes 和 事件处理函数。
- :::
+:::
 
 ```html
-<template> 
-  <Home :attr="12345" :val="false"/>
+<template>
+  <Home :attr="12345" :val="false" />
 </template>
 ```
 
-###  场景一： 
+### 场景一：
+
 ```html
 <template>
-  <div class="home">
-    Home work!
-  </div>
+  <div class="home">Home work!</div>
 </template>
-<script setup lang='ts'>
-
-</script>
+<script setup lang="ts"></script>
 <script>
   export default {
-    inheritAttrs: true,//默认继承父组件属性
+    inheritAttrs: true, //默认继承父组件属性
     mounted() {
       console.log('this.$attrs', this.$attrs)
-	  }
+    },
   }
 </script>
 ```
-![image-20230219215449385](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192154427.png) 
-###  场景二： 
+
+![image-20230219215449385](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192154427.png)
+
+### 场景二：
 
 ```html
 <template>
-  <div class="home">
-    Home work!
-  </div>
+  <div class="home">Home work!</div>
 </template>
-<script setup lang='ts'>
-
-</script>
+<script setup lang="ts"></script>
 <script>
   export default {
-    inheritAttrs: fasle,//取消继承
+    inheritAttrs: fasle, //取消继承
     mounted() {
       console.log('this.$attrs', this.$attrs)
-	  }
+    },
   }
 </script>
 ```
-![image-20230219215459359](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192154391.png) 
-### 场景三： 
+
+![image-20230219215459359](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192154391.png)
+
+### 场景三：
+
 ```html
 <template>
-  <div class="home">
-    Home work!
-  </div>
+  <div class="home">Home work!</div>
 </template>
-<script setup lang='ts'>
-
-</script>
+<script setup lang="ts"></script>
 <script>
   export default {
     inheritAttrs: fasle,//取消继承
     mounted() {
       console.log('this.$attrs', this.$attrs)//输出被props接收以外的属性
-	  }
+   }
     props: ['val']
   }
 </script>
 ```
-![image-20230219215510922](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192155953.png) 
+
+![image-20230219215510922](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192155953.png)
diff --git "a/docs/Framework/Vue/\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.md" "b/docs/Framework/Vue/\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.md"
index 26b2c8da..29bb024f 100644
--- "a/docs/Framework/Vue/\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.md"
+++ "b/docs/Framework/Vue/\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.md"
@@ -1,7 +1,5 @@
 # 分页与搜索条件记录并回显优化
 
-
-
 ## 整体逻辑
 
 ![image-20230215205106488](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302152051979.png)
@@ -20,184 +18,174 @@ export default new Vuex.Store({
 }
 ```
 
-
-
 ## Mixins
 
 ```js
 import { mapState } from 'vuex'
 export default {
-	data() {
-		return {
-			wrapperLoading: false,
-			gridLoading: false,
-			isEchoCond: false,//回显开关（某些页面特殊需要特殊处理）
-			searchConds: [],
-			paginationOptions: {
-				currentPage: 1,
-				pageSize: 10,
-				total: 0,
-			},
-		}
-	},
+  data() {
+    return {
+      wrapperLoading: false,
+      gridLoading: false,
+      isEchoCond: false, // 回显开关（某些页面特殊需要特殊处理）
+      searchConds: [],
+      paginationOptions: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+      },
+    }
+  },
   computed: {
-		...mapState(["pageOptions"]),
-	},
-	methods: {
-		//搜索
-		search(conds) {
-			this.searchConds = conds
-			const query = this.$route.query;
-			let newQuery = Object.assign({}, query, { conds: JSON.stringify(conds), page: 1 })
-			this.$router.push({
-				query: newQuery,
-		 });
-		},
-		//每页数量改变
-		sizeChange(size, queryFn) {
-			const query = this.$route.query
-			this.$router.push({
-				query: Object.assign({}, query, { size, page: 1 }),
-			})
-		},
-		//页码改变
-		currentChange(page) {
-			const query = this.$route.query
-			this.$router.push({
-				query: Object.assign({}, query, { page }),
-			})
-			this.paginationOptions.currentPage = page
-		},
-		//从query中获取分页信息
-    initPage(){
-			let { page, size ,conds} = this.$route.query
-      this.paginationOptions.currentPage = page ?  parseInt(page) : 1
-			this.paginationOptions.pageSize = size ?  parseInt(size) : 10
-			conds = conds ? conds : '[]';
-			if (this.isEchoCond) {
-				 this.searchConds = JSON.parse(conds);
-				 this.initSearchFromCond(this.searchConds);
-			 } 
-		},
-		//回显搜索条件
-		initSearchFromCond(conds) {
-      const group = [];
-      this.relateOptions?.forEach(options => {
-        const nameArr = options.list.map( item => item.name);
-				options.model.value = ''
-        group.push(nameArr);
-      });
-      conds.forEach(cond => {
-				group.forEach((g, i) => {
-					if(g.includes(cond.name)) {
-						const obj = {name: '', op: '', value: ''};
-						obj.name = cond.name;
-						obj.op = cond.op;
-						obj.value = cond.op === 'like' ? cond.value.replace(/^%|%$/g, '') : cond.value;
-						this.relateOptions[i].model = obj;
-					}
-				});
-      });
+    ...mapState(['pageOptions']),
+  },
+  methods: {
+    // 搜索
+    search(conds) {
+      this.searchConds = conds
+      const query = this.$route.query
+      const newQuery = Object.assign({}, query, { conds: JSON.stringify(conds), page: 1 })
+      this.$router.push({
+        query: newQuery,
+     })
+    },
+    // 每页数量改变
+    sizeChange(size, queryFn) {
+      const query = this.$route.query
+      this.$router.push({
+        query: Object.assign({}, query, { size, page: 1 }),
+      })
     },
-	},
+    // 页码改变
+    currentChange(page) {
+      const query = this.$route.query
+      this.$router.push({
+        query: Object.assign({}, query, { page }),
+      })
+      this.paginationOptions.currentPage = page
+    },
+    // 从query中获取分页信息
+    initPage() {
+      let { page, size, conds } = this.$route.query
+      this.paginationOptions.currentPage = page ? Number.parseInt(page) : 1
+      this.paginationOptions.pageSize = size ? Number.parseInt(size) : 10
+      conds = conds || '[]'
+      if (this.isEchoCond) {
+         this.searchConds = JSON.parse(conds)
+         this.initSearchFromCond(this.searchConds)
+       }
+    },
+    // 回显搜索条件
+    initSearchFromCond(conds) {
+      const group = []
+      this.relateOptions?.forEach((options) => {
+        const nameArr = options.list.map(item => item.name)
+        options.model.value = ''
+        group.push(nameArr)
+      })
+      conds.forEach((cond) => {
+        group.forEach((g, i) => {
+          if (g.includes(cond.name)) {
+            const obj = { name: '', op: '', value: '' }
+            obj.name = cond.name
+            obj.op = cond.op
+            obj.value = cond.op === 'like' ? cond.value.replace(/^%|%$/g, '') : cond.value
+            this.relateOptions[i].model = obj
+          }
+        })
+      })
+    },
+  },
 }
-
 ```
 
-
-
-
-
 ## 列表页 xxxList.vue
 
 ```js
 data() {
-	return {
-		relateOptions: [
-				{
-					inputWidth: "200px",
-					list: [
-						{
-							name: "number",
-							op: "=",
-							label: "序号",
-							placeholder: "情输入序号",
-						},
-						{
-							name: "name",
-							op: "like",
-							label: "名称",
-							placeholder: "请输入名称",
-						},
-						{
-							name: "esn",
-							op: "like",
-							label: "ESN",
-							placeholder: "请输入ESN",
-						},
-						{
-							name: "status.status",
-							op: "=",
-							label: "状态",
-							valueList: [
-								{
-									name: "",
-									label: "全部",
-								},
-								{
-									name: "Online",
-									label: "在线",
-								},
-								{
-									name: "Offline",
-									label: "离线",
-								},
-							],
-						},
-					],
-					model: { name: "number", op: "like", value: "" },
-				},
-			],
+  return {
+    relateOptions: [
+        {
+          inputWidth: "200px",
+          list: [
+            {
+              name: "number",
+              op: "=",
+              label: "序号",
+              placeholder: "情输入序号",
+            },
+            {
+              name: "name",
+              op: "like",
+              label: "名称",
+              placeholder: "请输入名称",
+            },
+            {
+              name: "esn",
+              op: "like",
+              label: "ESN",
+              placeholder: "请输入ESN",
+            },
+            {
+              name: "status.status",
+              op: "=",
+              label: "状态",
+              valueList: [
+                {
+                  name: "",
+                  label: "全部",
+                },
+                {
+                  name: "Online",
+                  label: "在线",
+                },
+                {
+                  name: "Offline",
+                  label: "离线",
+                },
+              ],
+            },
+          ],
+          model: { name: "number", op: "like", value: "" },
+        },
+      ],
 }
 mixins: [listPage],
 watch: {
-		'$route.query':{
+    '$route.query':{
       immediate:true,
       deep:true,
       handler(){
-					this.initPage()
-					this.queryXXX();
+          this.initPage()
+          this.queryXXX();
       }
     },
-	},
-    
-methods: {
-		async queryXXX() {
-			this.gridLoading = true
-		  const qobj = {}
-			qobj.conditions = this.searchConds
-      
-			let { pageSize, currentPage } = this.paginationOptions
-			qobj.limit = pageSize
-			qobj.start = (currentPage - 1) * pageSize
+  },
 
-			const result = await queryXXX(qobj)
-			if (result.success && result.inventories.length) {
-			this.xxxList = result.success ? result.inventories : []
-			this.paginationOptions.total = result.success ? result.total : 0
-			this.gridLoading = false
-		},
-		searchCondDone(conds) {
-			this.search(conds)
-		},
-		handleSizeChange(size) {
-			this.sizeChange(size)
-		},
-		handleCurrentChange(page) {
-		  this.currentChange(page)
-		},
+methods: {
+    async queryXXX() {
+      this.gridLoading = true
+      const qobj = {}
+      qobj.conditions = this.searchConds
+
+      let { pageSize, currentPage } = this.paginationOptions
+      qobj.limit = pageSize
+      qobj.start = (currentPage - 1) * pageSize
+
+      const result = await queryXXX(qobj)
+      if (result.success && result.inventories.length) {
+      this.xxxList = result.success ? result.inventories : []
+      this.paginationOptions.total = result.success ? result.total : 0
+      this.gridLoading = false
+    },
+    searchCondDone(conds) {
+      this.search(conds)
+    },
+    handleSizeChange(size) {
+      this.sizeChange(size)
+    },
+    handleCurrentChange(page) {
+      this.currentChange(page)
+    },
    }
 ```
-
-
-
diff --git "a/docs/Framework/Vue/\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.md" "b/docs/Framework/Vue/\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.md"
index 6508c9f2..6eb0bcb0 100644
--- "a/docs/Framework/Vue/\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.md"
+++ "b/docs/Framework/Vue/\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.md"
@@ -1,12 +1,7 @@
-
-
-
-
-
 # 一、删除最后一条数据跳转到上一页
 
-
 > 方案一
+
 ```js
 /*
 paginationOptions: {
@@ -30,7 +25,7 @@ async removeDone() {
         	if (this.contactsData.length === 1 &&  total > 1) {
             this.paginationOptions.currentPage = currentPage - 1
         }
-        
+
         //方案二:
           let { currentPage,pageSize,total} = this.paginationOptions
           //求删除后还有几页
@@ -39,7 +34,7 @@ async removeDone() {
           let curPage = currentPage > deleteAfterPage ? deleteAfterPage : currentPage
           //当前页只有一页则为1,否则取计算得到的页
           this.paginationOptions.currentPage = curPage < 2 ? 1 : curPage
-        
+
         this.queryAccount()
     } else {
         this.$notify({
@@ -49,4 +44,3 @@ async removeDone() {
     }
 },
 ```
-
diff --git "a/docs/Framework/Vue/\347\275\221\347\253\231\346\267\273\345\212\240 PWA.md" "b/docs/Framework/Vue/\347\275\221\347\253\231\346\267\273\345\212\240 PWA.md"
index 080c104f..bccac13b 100644
--- "a/docs/Framework/Vue/\347\275\221\347\253\231\346\267\273\345\212\240 PWA.md"	
+++ "b/docs/Framework/Vue/\347\275\221\347\253\231\346\267\273\345\212\240 PWA.md"	
@@ -24,15 +24,15 @@ pnpm i vite-plugin-pwa -D
 ```js
 export default defineConfig(({ _, mode }) => {
   return {
-  plugins: [
-        // 其他插件 ...
+    plugins: [
+      // 其他插件 ...
       VitePWA({
         outDir: 'dist',
         manifest: {
           name: 'json-viewer', // pwa窗口标题
           short_name: 'json-viewer',
           theme_color: '#ffffff', // pwa窗口顶部颜色
-          icons: [  // 至少需要这两个尺寸图标，并且 purpose 属性为 maskable,any (注意图片与 Logo 主体需要有一定 Padding, 否则会被裁剪)
+          icons: [ // 至少需要这两个尺寸图标，并且 purpose 属性为 maskable,any (注意图片与 Logo 主体需要有一定 Padding, 否则会被裁剪)
             {
               src: '/json-viewer/logo_512.png', // 图标放在 public 目录下，若网站是部署在二级目录下（如：https://fxzer.gitee.io/json-viewer），则需要加上二级目录名
               types: 'img/png',
@@ -49,14 +49,16 @@ export default defineConfig(({ _, mode }) => {
         },
       }),
     ]
-  }   
+  }
 })
- ```
+```
+
+### 3.调整图标，放在 public 目录下
 
- ### 3.调整图标，放在 public 目录下
 :::tip
 图标放在 public 目录下，若网站是部署在二级目录下，则需要加上二级目录名
 如：
- - https://fxzer.gitee.io/json-viewer  ==> src:'/json-viewer/logo_512.png'
- - https://fxzer.gitee.io  ==> src:'/logo_512.png'
-:::
+
+- https://fxzer.gitee.io/json-viewer ==> src:'/json-viewer/logo_512.png'
+- https://fxzer.gitee.io ==> src:'/logo_512.png'
+  :::
diff --git "a/docs/FrontEnd/CSS/Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.md" "b/docs/FrontEnd/CSS/Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.md"
index 83aede0c..e13a2c35 100644
--- "a/docs/FrontEnd/CSS/Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.md"
+++ "b/docs/FrontEnd/CSS/Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.md"
@@ -1,9 +1,11 @@
 # Grid布局学习笔记
 
 ## 实用网站
+
 - [GRID GARDEN 小游戏](https://link.juejin.cn/?target=https%3A%2F%2Fcssgridgarden.com%2F%23zh-cn)
 - [CSS Grid Generator 在线生成器](https://link.juejin.cn/?target=https%3A%2F%2Fcssgrid-generator.netlify.app%2F)
 - [A Complete Guide to Grid 学习导航](https://link.juejin.cn/?target=https%3A%2F%2Fcss-tricks.com%2Fsnippets%2Fcss%2Fcomplete-guide-grid%2F%23introduction)
+
 ## 基本概念
 
 ![image-20230216202917923](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162029422.png)
@@ -15,8 +17,8 @@
 ### 开启 Grid布局
 
 ```css
-.box{
-  display:grid;
+.box {
+  display: grid;
 }
 ```
 
@@ -24,7 +26,7 @@
 
 1. 取值为数值 `grid-template-rows:100px 100px 100px`
 2. 取值为百分比 `grid-template-rows:20% 30% 50%`
-3. 重复函数 `grid-template-rows:repeat(3,20%)`  
+3. 重复函数 `grid-template-rows:repeat(3,20%)`
 4. 自动填充 `grid-template-rows:repeat(auto-fill, 30%)`
 5. auto自动 `grid-template-rows:100px auto 100px`
 6. fr片段划分 `grid-template-rows:1fr 2fr 1fr`
@@ -49,17 +51,16 @@
 ### 调整间距属性
 
 ```css
-.box{
+.box {
   /* 写法一：*/
-  grid-row-gap:20px;
-  grid-column-gap:30px;
-
-   /* 写法二：*/
-  grid-gap:20px 30px;
+  grid-row-gap: 20px;
+  grid-column-gap: 30px;
 
-   /* 写法三：*/
-  gap:20px 30px;
+  /* 写法二：*/
+  grid-gap: 20px 30px;
 
+  /* 写法三：*/
+  gap: 20px 30px;
 }
 ```
 
@@ -74,10 +75,10 @@
 :::
 
 ```css
-.box{
+.box {
   /*justify-content:space-around;
   align-content:space-evenly;*/
-  palce-content:space-around space-evenly;
+  palce-content: space-around space-evenly;
 }
 ```
 
@@ -86,9 +87,9 @@
 **案例**
 
 ```css
-.box{
-  justify-content:center; 
-   align-content: center;
+.box {
+  justify-content: center;
+  align-content: center;
 }
 ```
 
@@ -115,43 +116,42 @@
 **案例：**
 
 ```html
- <div class="box">
-      <div class="item a"></div>
-      <div class="item b"></div>
-      <div class="item c"></div>
-    </div>
+<div class="box">
+  <div class="item a"></div>
+  <div class="item b"></div>
+  <div class="item c"></div>
+</div>
 ```
 
 ```css
-     .box {
-        width: 800px;
-        height: 800px;
-        display: grid;
-        grid-template-columns: repeat(3, 100px);
-        grid-template-rows: repeat(3, 100px);
-        align-items: center;
-        justify-items: center;
-        grid-gap: 10px;
-        grid-template-areas:
-          "a a a"
-          ". b b"
-          "c c c";
-      }
-      .item{
-        width: 50px ;
-        height: 50px;
-        border:1px dashed #000;
-
-      }
-      .a{
-        grid-area: a;
-      }
-      .b{
-        grid-area: b;
-      }
-      .c{
-        grid-area: c;
-      }
+.box {
+  width: 800px;
+  height: 800px;
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  align-items: center;
+  justify-items: center;
+  grid-gap: 10px;
+  grid-template-areas:
+    'a a a'
+    '. b b'
+    'c c c';
+}
+.item {
+  width: 50px;
+  height: 50px;
+  border: 1px dashed #000;
+}
+.a {
+  grid-area: a;
+}
+.b {
+  grid-area: b;
+}
+.c {
+  grid-area: c;
+}
 ```
 
 ![image-20230216222635254](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162226287.png)
@@ -172,31 +172,31 @@
 
 ```css
 .box {
-    width: 800px;
-    height: 800px;
-    display: grid;
-    grid-template-columns: repeat(3, 100px);
-    grid-template-rows: repeat(3, 100px);
-    align-content: center;
-    justify-content: center;
-    grid-gap: 10px;
-    grid-template-areas:
-      "a a a"
-      ". b b"
-      "c c c";
-  }
-  .item{
-    border:1px dashed #000;
-  }
-  .a{
-    grid-area: a;
-  }
-  .b{
-    grid-area: b;
-  }
-  .c{
-    grid-area: c;
-  }
+  width: 800px;
+  height: 800px;
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  align-content: center;
+  justify-content: center;
+  grid-gap: 10px;
+  grid-template-areas:
+    'a a a'
+    '. b b'
+    'c c c';
+}
+.item {
+  border: 1px dashed #000;
+}
+.a {
+  grid-area: a;
+}
+.b {
+  grid-area: b;
+}
+.c {
+  grid-area: c;
+}
 ```
 
 ![image-20230216220606952](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162206984.png)
@@ -206,7 +206,7 @@
 ### 合并单元格属性
 
 ```css
-.header{
+.header {
   /* 写法一：*/
   grid-column-start: 1;
   grid-column-end: 3;
@@ -222,8 +222,9 @@
   grid-column-start: span 2;
 
   /* 写法四：若跨度为 1，则可简写第二根网格线*/
-  grid-row: 1 / 2; ==>  grid-row: 1;
-  grid-row: 3 / 4; ==>  grid-row: 3;
+  grid-row: 1/2; /* grid-row: 1; */
+  grid-row: 3/4;
+  background-position:; /* grid-row: 3; */
 }
 ```
 
@@ -232,15 +233,15 @@
 ### 项目区域定义
 
 ```css
-  .a{
-    grid-area: a;
-  }
-  .b{
-    grid-area: b;
-  }
-  .c{
-    grid-area: c;
-  }
+.a {
+  grid-area: a;
+}
+.b {
+  grid-area: b;
+}
+.c {
+  grid-area: c;
+}
 ```
 
 :::tip grid-area
@@ -257,13 +258,13 @@
 
 ### 单个项目位置
 
-:::tip  justify-self 和 align-self
+:::tip justify-self 和 align-self
 
 `justify-self` 属性设置单元格内容的水平位置（左中右），跟 `justify-items` 属性的用法完全一致，但只作用于单个项目。
 
 `align-self` 属性设置单元格内容的垂直位置（上中下），跟 `align-items` 属性的用法完全一致，也是只作用于单个项目。
 
-::: 
+:::
 
 ```css
 .item {
diff --git a/docs/FrontEnd/CSS/demo/GridStar.vue b/docs/FrontEnd/CSS/demo/GridStar.vue
index 628cafca..f73be460 100644
--- a/docs/FrontEnd/CSS/demo/GridStar.vue
+++ b/docs/FrontEnd/CSS/demo/GridStar.vue
@@ -1,8 +1,14 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const isDark = ref(true)
+</script>
+
 <template>
-  <p><radio></radio></p>
+  <p><radio /></p>
   <svg
-  @click="isDark = !isDark"
-  :style="{ backgroundColor: isDark ? '#13121a' : '#fff' }"
+    :style="{ backgroundColor: isDark ? '#13121a' : '#fff' }"
+    @click="isDark = !isDark"
   >
     <pattern
       id="pattern-1"
@@ -13,15 +19,11 @@
       patternUnits="userSpaceOnUse"
       patternTransform="translate(-0.5,-0.5)"
     >
-      <circle cx="0.5" cy="0.5" r="0.5" fill="#60606F"></circle>
+      <circle cx="0.5" cy="0.5" r="0.5" fill="#60606F" />
     </pattern>
-    <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-1)"></rect>
+    <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-1)" />
   </svg>
 </template>
-<script lang="ts" setup>
-import { ref } from "vue";
-const isDark = ref(true);
-</script>
 
 <style lang="scss" scoped>
 svg {
diff --git "a/docs/FrontEnd/CSS/\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.md" "b/docs/FrontEnd/CSS/\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.md"
index 53c44f9b..2f49e4b9 100644
--- "a/docs/FrontEnd/CSS/\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.md"
+++ "b/docs/FrontEnd/CSS/\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.md"
@@ -4,9 +4,9 @@
 
 ```css
 .text {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 ```
 
@@ -33,8 +33,8 @@ body {
   }
 }
 
- /* 自定义滚动条 */
-body{
+/* 自定义滚动条 */
+body {
   overflow: auto;
   scrollbar-width: none; /* Firefox */
   &::-webkit-scrollbar {
@@ -42,11 +42,11 @@ body{
     height: 5px;
   }
   &::-webkit-scrollbar-track-piece {
-    background-color: rgba($color: #000000, $alpha: .3);
+    background-color: rgba($color: #000000, $alpha: 0.3);
   }
   &::-webkit-scrollbar-thumb:vertical {
     height: 5px;
-    background-color: #0085F9;
+    background-color: #0085f9;
     border-radius: 6px;
   }
 }
@@ -55,7 +55,7 @@ body{
 ## 画布网状满天星背景
 
 ```html
-<svg >
+<svg>
   <pattern
     id="pattern-1"
     x="0"
@@ -76,7 +76,7 @@ svg {
   margin-top: 20px;
   width: 100%;
   height: 200px;
-  background-color:#13121a;
+  background-color: #13121a;
 }
 ```
 
@@ -90,9 +90,10 @@ import GridStar from './demo/GridStar.vue'
     <GridStar/>
 </DemoWrap>
 
-
 ## 轮播闪光
+
 ![](https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/202306052345184.gif)
+
 ```css
 .shine::before {
   content: '';
@@ -101,10 +102,12 @@ import GridStar from './demo/GridStar.vue'
   left: -50%;
   width: 200%;
   height: 200%;
-  background: linear-gradient(to bottom right,
-      rgba(255, 255, 255, 0.3),
-      rgba(255, 255, 255, 0.15),
-      rgba(255, 255, 255, 0));
+  background: linear-gradient(
+    to bottom right,
+    rgba(255, 255, 255, 0.3),
+    rgba(255, 255, 255, 0.15),
+    rgba(255, 255, 255, 0)
+  );
   transform: rotate(-45deg);
   animation: shine 2s ease-in-out infinite;
 }
@@ -117,21 +120,24 @@ import GridStar from './demo/GridStar.vue'
   to {
     left: 150%;
   }
-
 }
 ```
 
 ## flex布局子元素给了高度，实际渲染确有小数点问题
+
 ```css
-.parent{
+.parent {
   display: flex;
   flex-direction: column;
 }
-.child{
+.child {
   height: 100%;
 }
-.child1{
-    flex: 1; //需要给相邻元素添加
+.child1 {
+  flex: 1; /*  需要给相邻元素添加 */
 }
 ```
+
+```
+
 ```
diff --git "a/docs/FrontEnd/CSS/\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.md" "b/docs/FrontEnd/CSS/\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.md"
index 142e61bc..087dc37b 100644
--- "a/docs/FrontEnd/CSS/\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.md"
+++ "b/docs/FrontEnd/CSS/\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.md"
@@ -1,13 +1,13 @@
 # 妙妙怪的《CSS 揭秘》读书摘要
 
 > 看这本书前：看书，现在短视频时代，正经人谁看书啊，要看也是看视频教程和大佬博客啊！
-> 
+>
 > 看完这本后：似乎有一点香！(轻松有趣)
 
 从这本书字里行间可以感受到作者也是个有趣的灵魂。
 
 > 看了这本书知识浅显易懂、挺有趣的，重新让我拾回看书的一些兴趣；
-> 
+>
 > 这本书让我感受到 CSS 一些巧妙的技巧，故摘抄以便往后快捷运用。
 
 ## 背景与边框
@@ -15,7 +15,10 @@
 ### 多重边框
 
 ```css
-box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px #ccc;
+box-shadow:
+  0 0 0 10px #655,
+  0 0 0 15px deeppink,
+  0 2px 5px 15px #ccc;
 ```
 
 ![image-20230204162420066](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041624153.png)
@@ -23,35 +26,49 @@ box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px #ccc;
 ### 灵活的背景定位
 
 ```css
-background-position:right 20px bottom 10px;//离右侧20px、下边10px
-background-position:calc(100%-20px) calc(100%-10px);
-background-origin:content-box;//以内容盒为准
+background-position: right 20px bottom 10px; /* 离右侧20px、下边10px */
+background-position: calc(100% - 20px) calc(100% - 10px);
+background-origin: content-box; /* 以内容盒为准 */
 ```
 
 ### 边框内圆角
 
 ```css
 background: tan;
-border-radius: .8em;
+border-radius: 0.8em;
 padding: 1em;
-box-shadow: 0 0 0 .4em #655;//扩张半径取圆角的一半
-outline: .4em solid #655;
+box-shadow: 0 0 0 0.4em #655; /* 扩张半径取圆角的一半 */
+outline: 0.4em solid #655;
 ```
 
 ### 条纹背景
 
 ```css
-//横向
+/* 横向 */
 background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, #ccc 0);
 background-size: 100% 20px;
-//垂直
+/* 垂直 */
 background: linear-gradient(to right, #fb3 33.3%, #58a 0, #58a 66.6%, #ccc 0);
 background-size: 20px 100%;
-//斜向
-background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #ccc 0, #ccc 75%, #58a 0);
+/* 斜向 */
+background: linear-gradient(
+  45deg,
+  #fb3 25%,
+  #58a 0,
+  #58a 50%,
+  #ccc 0,
+  #ccc 75%,
+  #58a 0
+);
 background-size: 100%;
-//重复任意角度条纹
- background: repeating-linear-gradient( 60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
+/* 重复任意角度条纹 */
+background: repeating-linear-gradient(
+  60deg,
+  #fb3,
+  #fb3 15px,
+  #58a 0,
+  #58a 30px
+);
 ```
 
 ![image-20230204162605711](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041626739.png)
@@ -61,10 +78,10 @@ background-size: 100%;
 ### 圆角
 
 ```css
-border-radius:水平半径/垂直半径 
-border-radius: 50% / 100% 0;//树叶形状   
-border-radius: 100% 0 0 100%/50%; //半椭圆
-border-radius: 100% 0 0 0;//四分之一椭圆
+border-radius:; /* 水平半径/垂直半径  */
+/* border-radius: 50%/100% 0; 树叶形状
+    border-radius: 100% 0 0 100%/50%;  半椭圆
+    border-radius: 100% 0 0 0; 四分之一椭圆 */
 ```
 
 ![image-20230204162727674](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041627705.png)
@@ -74,29 +91,29 @@ border-radius: 100% 0 0 0;//四分之一椭圆
 ```css
 /*按钮内容不行变解决方案*/
 button {
-        position: relative;
-        background: transparent;
-        outline: none;
-        border: none;
-        padding: 10px 20px;
-        margin-left: 50px;
-        z-index: 1;
-    }
-
-    button::after {
-        position: absolute;
-        content: '';
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        width: 90px;
-        height: 35px;
-        display: block;
-        background: #5C7AEA;
-        transform: skewX(-30deg);
-        z-index: -1;
-    }
+  position: relative;
+  background: transparent;
+  outline: none;
+  border: none;
+  padding: 10px 20px;
+  margin-left: 50px;
+  z-index: 1;
+}
+
+button::after {
+  position: absolute;
+  content: '';
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 90px;
+  height: 35px;
+  display: block;
+  background: #5c7aea;
+  transform: skewX(-30deg);
+  z-index: -1;
+}
 ```
 
 ![image-20230204162908289](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041629321.png)
@@ -105,38 +122,38 @@ button {
 
 ```css
 .box {
-    width: 100px;
-    height: 100px;
-    background: rgb(52, 199, 155);
-    margin: 200px auto;
-    position: relative;
-    font-size: 40px;
-    color: #fff;
-    line-height: 100px;
+  width: 100px;
+  height: 100px;
+  background: rgb(52, 199, 155);
+  margin: 200px auto;
+  position: relative;
+  font-size: 40px;
+  color: #fff;
+  line-height: 100px;
 }
 .box::before {
-    position: absolute;
-    top: -100px;
-    left: -100px;
-    display: block;
-    content: '';
-    width: 0;
-    height: 0;
-    z-index: -1;
-    border: 100px solid transparent;
-    border-bottom-color: rgb(52, 199, 155);
+  position: absolute;
+  top: -100px;
+  left: -100px;
+  display: block;
+  content: '';
+  width: 0;
+  height: 0;
+  z-index: -1;
+  border: 100px solid transparent;
+  border-bottom-color: rgb(52, 199, 155);
 }
 .box::after {
-    position: absolute;
-    top: -100px;
-    right: -100px;
-    display: block;
-    content: '';
-    width: 0;
-    height: 0;
-    z-index: -1;
-    border: 100px solid transparent;
-    border-bottom-color: rgb(52, 199, 155);
+  position: absolute;
+  top: -100px;
+  right: -100px;
+  display: block;
+  content: '';
+  width: 0;
+  height: 0;
+  z-index: -1;
+  border: 100px solid transparent;
+  border-bottom-color: rgb(52, 199, 155);
 }
 ```
 
@@ -145,7 +162,7 @@ button {
 ## 视觉效果
 
 > 投影大致原理： `box-shadow: 2px 3px 4px rgba(0, 0, 0, .5);`
-> 
+>
 > 1. 画该元素相同尺寸、位置、指定颜色的矩形
 > 2. 按指定的 x、y 进行水平垂直位移
 > 3. 按指定模糊半径，使用高斯模糊算法进行处理
@@ -154,7 +171,9 @@ button {
 ### 双侧投影
 
 ```css
-box-shadow: 5px 0 5px -5px #000,-5px 0 5px -5px red
+box-shadow:
+  5px 0 5px -5px #000,
+  -5px 0 5px -5px red;
 ```
 
 ![image-20230204163300223](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041633244.png)
@@ -163,7 +182,7 @@ box-shadow: 5px 0 5px -5px #000,-5px 0 5px -5px red
 
 ```css
 img {
-    filter: sepia(1) saturate( 4) hue-rotate( 295deg);
+  filter: sepia(1) saturate(4) hue-rotate(295deg);
 }
 ```
 
@@ -180,28 +199,28 @@ img {
 
 ```css
 box {
-            width: 200px;
-            height: 100px;
-            margin: 100px;
-            padding: 20px;
-            position: relative;
-                 border-radius: .5em;
-            background: linear-gradient(210deg, transparent 1.5em, #edb21d);
-        }
-
-        .box::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 1.73em;
-            height: 3em;
-            background: linear-gradient(240deg, transparent 50%, #ccc);
-            transform: translateY(-1.3em) rotate(-30deg);
-            transform-origin: bottom right;
-            border-bottom-left-radius: inherit;
-            box-shadow: -0.3em 0.2em 0.3em -0.1em #bbb;
-        }
+  width: 200px;
+  height: 100px;
+  margin: 100px;
+  padding: 20px;
+  position: relative;
+  border-radius: 0.5em;
+  background: linear-gradient(210deg, transparent 1.5em, #edb21d);
+}
+
+.box::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1.73em;
+  height: 3em;
+  background: linear-gradient(240deg, transparent 50%, #ccc);
+  transform: translateY(-1.3em) rotate(-30deg);
+  transform-origin: bottom right;
+  border-bottom-left-radius: inherit;
+  box-shadow: -0.3em 0.2em 0.3em -0.1em #bbb;
+}
 ```
 
 ![](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041641904.png)
@@ -209,33 +228,41 @@ box {
 **折角效果 mixin 预处理器**
 
 ```css
-@mixin folded-corner($background,$size,$angle:30deg){
-    position:relative;
-    background:$background;
-    background:linear-gradient($angle - 180deg,
-        transparent $size,$background 0);
-    border-radius: .5em;
-    $x:$size / sin($angle);
-    $y:$size / cos($angle);
-
-&::before{
+@mixin folded-corner($background, $size, $angle: 30deg) {
+  position: relative;
+  background: $background;
+  background: linear-gradient(
+    $angle - 180deg,
+    transparent $size,
+    $background 0
+  );
+  border-radius: 0.5em;
+  $x: $size / sin($angle);
+  $y: $size / cos($angle);
+
+  &::before {
     content: '';
     position: absolute;
-    top: 0;right: 0;
-    background: linear-gradient(to left bottom,
+    top: 0;
+    right: 0;
+    background: linear-gradient(
+        to left bottom,
         transparent 50%,
-        rgba(0,0,0,.2) 0,
-        rgba(0,0,0,.4)) 100% 0 no-repeat;
-    width:$y;height:$x;
-    transform:translateY($y-$x) rotate(2*$angle - 90deg);
-    transform-origin:bottom right;
-    border-bottom-left-radius:inherit;
-    box-shadow:-.2em .2em .3em -.1em rgba(0,0,0,.15);
-}
+        rgba(0, 0, 0, 0.2) 0,
+        rgba(0, 0, 0, 0.4)
+      )
+      100% 0 no-repeat;
+    width: $y;
+    height: $x;
+    transform: translateY($y-$x) rotate(2 * $angle - 90deg);
+    transform-origin: bottom right;
+    border-bottom-left-radius: inherit;
+    box-shadow: -0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15);
+  }
 }
 /*当调用时...*/
-.note{
-    @include folded-corner(#68d,1.3em,60deg);
+.note {
+  @include folded-corner(#68d, 1.3em, 60deg);
 }
 ```
 
@@ -244,33 +271,32 @@ box {
 ### 插入换行
 
 ```css
-hyphens：manual; / *手工设定。默认值，只有单词中有建议换行符才会换行，即手工在单词中插入 ­ * /
-hyphens：none; / *无。即使单词中有换行符，也不会换行，只会在空白处换行* /
-hyphens：auto; / *自动。浏览器在适当的位置自动插入连字符换行* /
+/* hyphens：manual; 手工设定。默认值，只有单词中有建议换行符才会换行，即手工在单词中插入 ­ */
+/* hyphens：none; 无。即使单词中有换行符，也不会换行，只会在空白处换行 */
+/* hyphens：auto; 自动。浏览器在适当的位置自动插入连字符换行 */
 ```
 
 > 可以结合选择器 `+ / ~ / not(:first-child)` 实现在元素后面添加 `，/ 换行符`
 
 ```css
-dd+dt::before{
-    content:'\A';
-    /*content:',';*/
-    white-space:pre;/*空白会被浏览器保留*/
-
+dd + dt::before {
+  content: '\A';
+  /*content:',';*/
+  white-space: pre; /*空白会被浏览器保留*/
 }
 ```
 
 ### 文本行斑马线
 
 ```css
-.box{
-     padding: 0 .5em;
-    line-height: 1.2;
-    background: hsl(184, 61%, 76%);
-    background-image: linear-gradient( rgb(230, 230, 230) 50%, transparent 0);
-    background-size: auto 50%;
-    background-origin: content-box;
-    font-family: Consolas, Monaco, monospace;
+.box {
+  padding: 0 0.5em;
+  line-height: 1.2;
+  background: hsl(184, 61%, 76%);
+  background-image: linear-gradient(rgb(230, 230, 230) 50%, transparent 0);
+  background-size: auto 50%;
+  background-origin: content-box;
+  font-family: Consolas, Monaco, monospace;
 }
 ```
 
@@ -279,21 +305,27 @@ dd+dt::before{
 ### 自定义下划线
 
 ```css
-.box{
-    background: linear-gradient(gray, gray) no-repeat;
-    background-size: 100% 1px;
-    background-position: 0 1.15em;
-    text-shadow: .05em 0 white, -.05em 0 white;
+.box {
+  background: linear-gradient(gray, gray) no-repeat;
+  background-size: 100% 1px;
+  background-position: 0 1.15em;
+  text-shadow:
+    0.05em 0 white,
+    -0.05em 0 white;
 }
 ```
 
- ![image-20230204164714672](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041647704.png)
+![image-20230204164714672](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041647704.png)
 
 ### 凹凸印刷文字效果
 
 ```css
-text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;//凸
-text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;//凹
+text-shadow:
+  1px 1px 1px #000,
+  -1px -1px 1px #fff; /* 凸 */
+text-shadow:
+  -1px -1px 1px #000,
+  1px 1px 1px #fff; /* 凹 */
 ```
 
 ![image-20230204165035803](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041650836.png)
@@ -301,32 +333,32 @@ text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;//凹
 ### 满幅背景、定宽内容（页脚）
 
 ```css
-footer{
-    max-width:1000px;
-    padding:1em calc(50%-500px)
+footer {
+  max-width: 1000px;
+  padding: 1em calc(50%-500px);
 }
 ```
 
 ### 紧贴底部的页脚
 
 ```css
-body{
-    display:flex;
-    flex-direction:column;
-    min-height:100vh;
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
-main{
-    flex:1;
+main {
+  flex: 1;
 }
 ```
 
 ### 闪烁效果
 
 ```css
-.box{
-  background-color:  pink;
-  animation: twinkle 0.5s infinite steps(2) alternate;/*普通闪烁*/
-  animation: twinkle 0.5s infinite   alternate;  /*真实闪烁*/
+.box {
+  background-color: pink;
+  animation: twinkle 0.5s infinite steps(2) alternate; /*普通闪烁*/
+  animation: twinkle 0.5s infinite alternate; /*真实闪烁*/
 }
 @keyframes twinkle {
   0% {
diff --git "a/docs/FrontEnd/Git/Git\345\270\270\347\224\250\346\223\215\344\275\234.md" "b/docs/FrontEnd/Git/Git\345\270\270\347\224\250\346\223\215\344\275\234.md"
index 8cc4d884..ff18f319 100644
--- "a/docs/FrontEnd/Git/Git\345\270\270\347\224\250\346\223\215\344\275\234.md"
+++ "b/docs/FrontEnd/Git/Git\345\270\270\347\224\250\346\223\215\344\275\234.md"
@@ -1,21 +1,23 @@
 # Git常用操作
 
 ## 拉取最新提交
+
 ```zsh
   git fetch -p  #或 git fetch -p origin
 ```
 
-`git fetch -p` （或者 `--prune`）命令用于从远程仓库中拉取最新的提交记录，同时也会删除 *本地不存在的远程分支*；不会更新本地分支和远程分支之间的关联关系，需要手动执行 `git merge` 或 `git rebase` 命令，或者使用 `git pull` 命令。例：删除远程 `dev`分支后，使用此命令，本地的远程分支也会被清理。
+`git fetch -p` （或者 `--prune`）命令用于从远程仓库中拉取最新的提交记录，同时也会删除 _本地不存在的远程分支_；不会更新本地分支和远程分支之间的关联关系，需要手动执行 `git merge` 或 `git rebase` 命令，或者使用 `git pull` 命令。例：删除远程 `dev`分支后，使用此命令，本地的远程分支也会被清理。
 
 `git fetch` 命令用于将远程仓库中的最新提交记录拉取到本地仓库中，但是不会自动合并（merge）这些提交；不会删除本地不存在的远程分支，可能会导致本地分支列表过长，不便于管理。
 
 ## 删除远程分支
 
 ```zsh
-git branch / git branch -r 	     #列出所有本地/远程分支
+git branch / git branch -r        #列出所有本地/远程分支
 git branch -D 分支名              #删除本地库分支
 git push origin --delete 分支名   #删除远程库分支
 ```
+
 ## 删除Tag
 
 ```zsh
@@ -31,24 +33,28 @@ git tag -l | xargs git tag -d   #删除本地所有 tag
 git rm -r -n --cached 文件/文件夹名称   #预览要删除的文件列表
 git rm -r --cached 文件/文件夹名称      #确定无误后删除文件
 ```
+
 ## 删除本地仓库文件
+
 ```zsh
 git reset HEAD^1  #上一个提交的所有文件回退到工作区， 处于未添加到暂存库状态
 git reset --hard HEAD^1  #回退到上一个版本:最新一次提交的所有内容都被删除，本地文件也不存在
 ```
 
 ## 删除远程库文件
-```zsh 
+
+```zsh
 git push origin --delete node_modules  #git push <远程仓库名称> --delete <文件路径>
 git ls-remote  #确认文件是否成功删除
 git rebase #变更历史记录
 git remote prune origin  # git remote prune <远程仓库名称> : 理远程仓库中已删除文件的缓存
 ```
 
-## fork后的仓库，拉取合并原仓库的更新 
+## fork后的仓库，拉取合并原仓库的更新
+
 ```zsh
 git remote add upstream [原仓库URL] #添加上游分支路径
-git pull upstream [分支名]  				#拉取上游分支更新并合并
+git pull upstream [分支名]          #拉取上游分支更新并合并
 ```
 
 ## 合并多次提交
@@ -64,52 +70,52 @@ git rebase -i 8fc6389   #填第2 次提交的 hash，则表示合并 2 之后（
 
 ![image-20230227205854474](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302272058564.png)
 
-把需要压缩的提交 `pick ` 改为  `s`，必须保留一个 `pick`，下一步填写合并提交信息，保存退出(`:wq`)完成合并
+把需要压缩的提交 `pick ` 改为 `s`，必须保留一个 `pick`，下一步填写合并提交信息，保存退出(`:wq`)完成合并
 
 ![image-20230227105523929](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302271055952.png)
 
 ![image-20230227205916425](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302272059457.png)
 
-
-
 ## 关联多个代码托管平台
+
 > 当本地仓库项同时关联 github 和 gitee，同步更新两边代码
 
-1. **方法一**  ` git remote add gitee [gitee_repo_url]`，需要多次推送
+1. **方法一** ` git remote add gitee [gitee_repo_url]`，需要多次推送
 
 效果：
+
 ```zsh
 [branch "master"]
-	remote = origin
-	merge = refs/heads/master
+  remote = origin
+  merge = refs/heads/master
 [remote "origin"]
-	url = git@github.com:fxzer/juejin-server-mysql.git
-	fetch = +refs/heads/*:refs/remotes/origin/*
+  url = git@github.com:fxzer/juejin-server-mysql.git
+  fetch = +refs/heads/*:refs/remotes/origin/*
 [remote "gitee"]
-	url = git@gitee.com:fxzer/juejin-server-mysql.git
-	fetch = +refs/heads/*:refs/remotes/gitee/*
+  url = git@gitee.com:fxzer/juejin-server-mysql.git
+  fetch = +refs/heads/*:refs/remotes/gitee/*
 ```
 
 ```zsh
-#git remote -v                                                   
+#git remote -v
 gitee   git@gitee.com:fxzer/juejin-server-mysql.git (fetch)
 gitee   git@gitee.com:fxzer/juejin-server-mysql.git (push)
 origin  git@github.com:fxzer/juejin-server-mysql.git (fetch)
 origin  git@github.com:fxzer/juejin-server-mysql.git (push)
 ```
 
-
 2. **方法二** `git remote set-url --add origin [gitee_repo_url]` , 只需一次推送
 
 效果：~
+
 ```zsh
 [remote "origin"]
-	url = git@github.com:fxzer/json-viewer.git
-	fetch = +refs/heads/*:refs/remotes/origin/*
-	url = git@gitee.com:fxzer/json-viewer.git
+  url = git@github.com:fxzer/json-viewer.git
+  fetch = +refs/heads/*:refs/remotes/origin/*
+  url = git@gitee.com:fxzer/json-viewer.git
 [branch "master"]
-	remote = origin
-	merge = refs/heads/master
+  remote = origin
+  merge = refs/heads/master
 ```
 
 ```zsh
@@ -120,11 +126,13 @@ origin  git@gitee.com:fxzer/json-viewer.git (push)
 ```
 
 ::: tip `git remote add` 和 `git remote set-url --add`区别
+
 - git remote add 用于添加一个新的远程仓库。该本地仓库已关联远程库，希望添加新的远程库。**运用：**fork后的仓库，需要拉取合并原仓库的更新。
 - git remote set-url --add 用于向已经存在的远程仓库中添加一个新的 URL。**运用：**同一个仓库关联 github 和 gitee 方便同时更新。
 - git remote set-url 命令会替换掉原有的链接，git remote set-url --add 命令，则是添加一个标识对应的远程库链接。
 
 :::
+
 ## 改错分支但为未提交
 
 ```zsh
@@ -133,10 +141,11 @@ git checkout 分支名   #切换分支
 git stash pop        #从stash中取出暂存的代码修改
 ```
 
-
 ## 提交完未推送前，需要再次提交
+
 - 提交完未推送前，发现代码有的有点小问题，还需要修改再提交，但是不想新增垃圾提交信息，保持简洁。
 - 只需要修改提交的内容而不需要改变提交信息， 可以使用 --no-edit 参数来跳过编辑提交信息的步骤。
+
 ```zsh
 git commit --amend --no-edit # 做的修改合并到最近的提交中，相当于是在原有的提交上进行修改，而不是创建一个新的提交。
 
@@ -148,23 +157,26 @@ git commit --amend --no-edit # 做的修改合并到最近的提交中，相当
 ```
 
 ## 修改第一次提交信息
+
 ```zsh
 git rebase -i --root  #把第一次提交的 pick 改为 edit 后 e
 git rebase --continue
 git rebase pull.rebase true
 git pull
-git push 
+git push
 
 ```
 
 ## 代码提交到了错误的分支
 
 ### 方法一
+
 切换到正确的分支并使用， 将指定的提交复制到当前分支，并将其添加到暂存区
 
 ```zsh
-git cherry-pick [commit] 	
+git cherry-pick [commit]
 ```
+
 ### 方法二
 
 使用 `git rebase` 命令将提交移动到正确的分支上：
@@ -175,8 +187,8 @@ git cherry-pick [commit]
 4. 将更改提交到正确的分支上：`git checkout [correct-branch]`，然后 `git merge [error-branch]`
 5. 在错误分支`git push -f`更新远程代码
 
-
 ## Git 提交规范化
+
 - **husky**: Git 钩子工具,在 Git 提交过程的不同阶段自动运行脚本，以此来实现对代码的验证、格式化、测试等操作
 - **@commitlint/cli**: 提交信息校验脚手架
 - **@commitlint/config-conventional**: 定义了 commitlint 默认使用的规范。
@@ -185,19 +197,23 @@ git cherry-pick [commit]
 - **cz-conventional-changelog**: git cz 提交规范和 changelog 生成工具
 
 ### [husky](https://typicode.github.io/husky) [文档](https://typicode.github.io/husky/getting-started.html)
-``` zsh
+
+```zsh
 # 安装
 pnpm dlx husky-init && pnpm install
 # 初始化husky配置，在根目录新增.husky配置文件。初始化配置pre-commit
 
 # 新增一个提交git commit 执行前的钩子（commit-msg）
-npx husky add .husky/commit-msg 
+npx husky add .husky/commit-msg
 
 ```
 
 #### 注意：需要 `git init`后才能初始化，否则报错如下
+
 ![2023-06-27-20-25-35](https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-06-27-20-25-35.png)
+
 ### @commitlint/cli与@commitlint/config-conventional
+
 ```zsh
 #安装校验脚手架、校验规范
 pnpm i @commitlint/cli @commitlint/config-conventional -D
@@ -207,12 +223,12 @@ pnpm set-script '"prepare": "husky install"'
 ```
 
 ```js
-//commitlint.config.js （若报错 type:'module'）可改：commitlint.config.js ==> commitlint.config.cjs
+// commitlint.config.js （若报错 type:'module'）可改：commitlint.config.js ==> commitlint.config.cjs
 module.exports = {
-  extends: ["@commitlint/config-conventional"],
-};
-
+  extends: ['@commitlint/config-conventional'],
+}
 ```
+
 ### [commitizen](http://commitizen.github.io/cz-cli/)
 
 ```zsh
@@ -220,7 +236,6 @@ module.exports = {
 npm install -g commitizen
 ```
 
-
 ### cz-conventional-changelog
 
 ```zsh
@@ -229,6 +244,7 @@ npm install -g cz-conventional-changelog
 ```
 
 配置 `~/.czrc`， 将其设置为 `commitizen` 的插件。
+
 ```zsh
 {
   "path": "cz-conventional-changelog"
@@ -243,12 +259,12 @@ npm install -g cz-conventional-changelog
 输入完毕后，会自动将提交信息转换成符合规范的格式，并将其写入到 `CHANGELOG.md` 文件中。
 :::
 
-
 ## 浅克隆 github 仓库，push 到 gitee 仓库
 
 :::danger 报错：
->`! [remote rejected] main -> main (shallow update not allowed)`
-:::
+
+> `! [remote rejected] main -> main (shallow update not allowed)`
+> :::
 
 ```zsh
 git fetch --unshallow origin  # 取消浅克隆，拉取完整的仓库
diff --git "a/docs/FrontEnd/Git/Terminal\347\273\210\347\253\257\347\276\216\345\214\226.md" "b/docs/FrontEnd/Git/Terminal\347\273\210\347\253\257\347\276\216\345\214\226.md"
index 95aff871..7aa5a7ab 100644
--- "a/docs/FrontEnd/Git/Terminal\347\273\210\347\253\257\347\276\216\345\214\226.md"
+++ "b/docs/FrontEnd/Git/Terminal\347\273\210\347\253\257\347\276\216\345\214\226.md"
@@ -1,4 +1,3 @@
-
 ## 安装[Oh My Posh](https://ohmyposh.dev/docs/installation/windows)
 
 > 可以先去Microsofe Store 安装winget，会比较方便
@@ -11,8 +10,6 @@ winget install JanDeDobbeleer.OhMyPosh
 
 会在`C:\Users\自己用户名\AppData\Local\Programs\oh-my-posh\themes>`有很多主题
 
-
-
 ## 预览所有主题命令
 
 ```bash
@@ -21,10 +18,6 @@ Get-PoshThemes
 
 ![image-20220426123111651](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426123111651.png)
 
-
-
-
-
 ## 初始化并应用主题
 
 ```bash
@@ -32,19 +25,15 @@ oh-my-posh --init --shell pwsh --config "自己的安装目录\oh-my-posh\themes
 #schema.json ---- 选择themes目录下的一款主题文件
 ```
 
-
-
 ## 分隔符乱码问题
 
 > 但会发现分隔符会有乱码的问题
 
-**[乱码问题解决方式](https://ohmyposh.dev/docs/configuration/fonts)**: 
+**[乱码问题解决方式](https://ohmyposh.dev/docs/configuration/fonts)**:
 
 安装[**Nerd Fonts**](https://www.nerdfonts.com/font-downloads)字体，在`Terminal>Power Shell`选择自己安装的字体，保存重启就生效啦。
 
-PS：刚开始以为没有我常用的`JetBrain Mono`字体,就没在意这种解决方案,没想到里面字体挺丰富. 
-
-
+PS：刚开始以为没有我常用的`JetBrain Mono`字体,就没在意这种解决方案,没想到里面字体挺丰富.
 
 ## 配置PowerShell
 
@@ -52,7 +41,7 @@ PS：刚开始以为没有我常用的`JetBrain Mono`字体,就没在意这种
 
 ### 1.打开配置文件方式一
 
-+ 获取到PowerShell配置文件绝对路径
+- 获取到PowerShell配置文件绝对路径
 
 ```bash
 $PROFILE
@@ -60,14 +49,12 @@ $PROFILE
 
 ![image-20220426124525580](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426124525580.png)
 
-+ 找到这个文件位置，打开并添加需要Power Shell启动时执行的脚本，保存文件重新打开Terminal看效果
+- 找到这个文件位置，打开并添加需要Power Shell启动时执行的脚本，保存文件重新打开Terminal看效果
 
 ```bash
 oh-my-posh --init --shell pwsh --config "自己的安装目录\oh-my-posh\themes\schema.json" | Invoke-Expression
 ```
 
-
-
 ### 2.打开配置文件方式二
 
 > 如果安装了VS Code，如下命令可以直接打开Power Shell配置文件
@@ -76,16 +63,12 @@ oh-my-posh --init --shell pwsh --config "自己的安装目录\oh-my-posh\themes
 code $PROFILE
 ```
 
-
-
 ## 自定义主题
 
 可借鉴的up主题文件：https://gitee.com/NilTor/public/blob/master/oh-my-posh-config.json
 
 更多配置可查看[官网配置文档](https://ohmyposh.dev/docs/configuration/overview)
 
-
-
 ## VS Code终端配置
 
 没有配置打开VS Code终端报错:
@@ -95,18 +78,14 @@ The term 'oh-my-posh' is not recognized as a name of a cmdlet, function, script
      | that the path is correct and try again.
 ```
 
-
-
-+ 在环境变量新增Oh My Posh路径下bin目录
+- 在环境变量新增Oh My Posh路径下bin目录
 
 ![image-20220426141214178](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426141214178.png)
 
-+ 在设置中配置配置自己安装的**Nerd Font**终端字体，（这里我填上我安装的是`JetBrainsMono Nerd Font Mono`)
+- 在设置中配置配置自己安装的**Nerd Font**终端字体，（这里我填上我安装的是`JetBrainsMono Nerd Font Mono`)
 
 ![image-20220426141358102](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426141358102.png)
 
- 
-
 ## 隐藏提示语
 
 每次打开都会有这四句提示语，想要打开是干干净净的界面。
@@ -123,22 +102,18 @@ The term 'oh-my-posh' is not recognized as a name of a cmdlet, function, script
 
 ```json
 {
-    "colorScheme": "Campbell",
-    "font": 
+  "colorScheme": "Campbell",
+  "font":
     {
-        "face": "JetBrainsMono Nerd Font Mono"
+      "face": "JetBrainsMono Nerd Font Mono"
     },
-    "guid": "{574e775e-4f2a-5b96-ac1e-a2962a402336}",
-    "hidden": false,
-    "name": "PowerShell",
-    "source": "Windows.Terminal.PowershellCore",
-    "commandline": "C:\\Program Files\\WindowsApps\\Microsoft.PowerShell_7.2.2.0_x64__8wekyb3d8bbwe\\pwsh.exe -NoLogo",
-    "startingDirectory": null
+  "guid": "{574e775e-4f2a-5b96-ac1e-a2962a402336}",
+  "hidden": false,
+  "name": "PowerShell",
+  "source": "Windows.Terminal.PowershellCore",
+  "commandline": "C:\\Program Files\\WindowsApps\\Microsoft.PowerShell_7.2.2.0_x64__8wekyb3d8bbwe\\pwsh.exe -NoLogo",
+  "startingDirectory": null
 }
 ```
 
-
-
-
-
 ![image-20220426233614912](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426233614912.png)
diff --git "a/docs/FrontEnd/Git/\351\205\215\347\275\256 Ubuntu \346\234\215\345\212\241\345\231\250\345\205\215\345\257\206\347\231\273\345\275\225.md" "b/docs/FrontEnd/Git/\351\205\215\347\275\256 Ubuntu \346\234\215\345\212\241\345\231\250\345\205\215\345\257\206\347\231\273\345\275\225.md"
index 7d3527ec..ac70ea4b 100644
--- "a/docs/FrontEnd/Git/\351\205\215\347\275\256 Ubuntu \346\234\215\345\212\241\345\231\250\345\205\215\345\257\206\347\231\273\345\275\225.md"	
+++ "b/docs/FrontEnd/Git/\351\205\215\347\275\256 Ubuntu \346\234\215\345\212\241\345\231\250\345\205\215\345\257\206\347\231\273\345\275\225.md"	
@@ -1,10 +1,8 @@
-
-
 ## 1.生成公钥和私钥
 
 ```bash
 cd ~/.ssh # 进入.ssh目录
-ssh-keygen  
+ssh-keygen
 # 第一步输入生成的公、私钥文件名，例如：aws-root
 # 密码不用填 直接回车
 ```
@@ -25,7 +23,7 @@ cat authorized_keys # 查看是否有上传的公钥
 ```
 
 ## 4.配置 ssh config文件
- 
+
 ```bash
 vim /etc/ssh/sshd_config
 PermitRootLogin yes # no改为yes  # 允许root用户登录：解决root用户登录报错 Permission denied 问题
@@ -38,7 +36,6 @@ systemctl restart sshd.service
 
 ## 5.测试连接、配置本地ssh config文件，使用 VSCODE插件 ([Remote - SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)) 连接
 
-
 ```bash
 # 测试连接
 ssh -i ~/.ssh/aws-root root@192.227.112.172
@@ -53,5 +50,7 @@ User root
 IdentityFile ~/.ssh/aws-root
 
 ```
+
 ## 6.大功告成，可以每次轻松愉快一键连接远程服务器啦！
+
 > 注意：若同时安装了 Remote Repositories 和 Remote - SSH 插件，需要在最顶部进行选择切换到 Remote - SSH 插件，并点击顶部刷新按钮，这样才能看到 ssh/config 文件配置的所有主机。
diff --git "a/docs/FrontEnd/Git/\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.md" "b/docs/FrontEnd/Git/\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.md"
index b02ad30a..db5328f0 100644
--- "a/docs/FrontEnd/Git/\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.md"
+++ "b/docs/FrontEnd/Git/\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.md"
@@ -1,5 +1,3 @@
-
-
 ## 1.生成公钥和私钥
 
 ```bash
@@ -11,16 +9,12 @@ ssh-keygen -t rsa -C '8888888@qq.com'  #换成自己邮箱,可以随便填,相
 
 > `ls` 查看生成的文件
 
-
-
 ![image-20220416211808297](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220416211808297.png)
 
-
-
 ## 2.在代码托管平台设置添加公钥
 
-+ **查看生成的公钥`.pub`文件  例如: `cat  id_rsa_github_gmail.pub`**
-+ **复制公钥所有内容 ，在github/gitee/gitlab添加**
+- **查看生成的公钥`.pub`文件 例如: `cat  id_rsa_github_gmail.pub`**
+- **复制公钥所有内容 ，在github/gitee/gitlab添加**
 
 ![image-20220416212417100](https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220416212417100.png)
 
@@ -34,11 +28,11 @@ ssh-add ~/.ssh/id_rsa_github_qq
 
 1. 若提示 `Could not open a connection to your authentication agent`
 
-​	先执行`ssh-agent bash` 再执行上面代码
+​ 先执行`ssh-agent bash` 再执行上面代码
 
 2. 报错: `Error connecting to agent: No such file or directory`
 
-​	解决方法：检查文件是否存在，并【**以管理员身份运行**】在 `PowerShell` 执行
+​ 解决方法：检查文件是否存在，并【**以管理员身份运行**】在 `PowerShell` 执行
 
 ```bash
 Set-Service ssh-agent -StartupType Manual
@@ -47,15 +41,13 @@ Start-Service ssh-agent
 
 3. 报错 `unable to start ssh-agent service, error :1058`
 
-​	以【**管理员身份**】打开终端，执行`Set-Service -Name ssh-agent -StartupType automatic`
-
-
+​ 以【**管理员身份**】打开终端，执行`Set-Service -Name ssh-agent -StartupType automatic`
 
-+ **查看私钥列表**
+- **查看私钥列表**
 
- ```bash
- ssh-add -l
- ```
+```bash
+ssh-add -l
+```
 
 **出现此提示表示未配置成功，重新检查步骤配置**
 
@@ -65,10 +57,10 @@ fatal: Could not read from remote repository.
 
 Please make sure you have the correct access rights
 and the repository exists.
-                                                                                             
+
 ```
 
-## 4.创建`config`件，打开编辑 
+## 4.创建`config`件，打开编辑
 
 > 注意：文件名就是`config`，没有文件后缀，编辑完保存前记得去掉注释
 
@@ -79,27 +71,21 @@ PreferredAuthentications publickey
 IdentityFile ~/.ssh/id_rsa_github #私钥地址
 
 Host gitlab.xxx.cn  #公司gitlab主机地址
-HostName gitlab.xxx.cn	#gitlab主机名
+HostName gitlab.xxx.cn  #gitlab主机名
 PreferredAuthentications publickey
-IdentityFile ~/.ssh/id_rsa_gitlab	#私钥地址
+IdentityFile ~/.ssh/id_rsa_gitlab  #私钥地址
 ```
 
-+ 测试连接是否成功，显示出这句话表示成功啦，可以看到自己账户名
+- 测试连接是否成功，显示出这句话表示成功啦，可以看到自己账户名
 
   `Hi CoderFXJ! You've successfully authenticated, but GitHub does not provide shell access.`
-  
+
   ```bash
   ssh -T git@gitee.com
   #或
   ssh -T git@github.com
-  
+
   ssh -T git@gitlab.xxx.cn
   ```
 
-  
-  
-  
-
 ## SSH公钥私钥加密解密原理
-
- 
\ No newline at end of file
diff --git "a/docs/FrontEnd/JavaScript/async\344\270\216await.md" "b/docs/FrontEnd/JavaScript/async\344\270\216await.md"
index 502e5d80..0cf2031d 100644
--- "a/docs/FrontEnd/JavaScript/async\344\270\216await.md"
+++ "b/docs/FrontEnd/JavaScript/async\344\270\216await.md"
@@ -1,39 +1,34 @@
-
 # Javascript实现异步
+
 :::info
-  Javascript是单线程执行语言
+Javascript是单线程执行语言
 :::
 
-
-
 ### 方式一：回调函数
 
 ```js
-let timer = setTimeout(()=>{
-    console.log("3秒后打印的")
-},3000)
-console.log("比setTimeout回调函数先执行")
-//本身会立刻返回，然后执行后面同步代码，回调函数则等预定时间才执行
+const timer = setTimeout(() => {
+  console.log("3秒后打印的");
+}, 3000);
+console.log("比setTimeout回调函数先执行");
+// 本身会立刻返回，然后执行后面同步代码，回调函数则等预定时间才执行
 ```
 
 缺点：容易形成回调地狱
 
 ```js
-setTimeout(()=>{
-    console.log("3秒后打印的")
-    
-   setTimeout(()=>{    
-       console.log("6秒后打印的")
-       
-         setTimeout(
-            ()=>{    
-               console.log("9秒后打印的")
-         },3000)
-   },3000)
-},3000)
-```
+setTimeout(() => {
+  console.log("3秒后打印的");
 
+  setTimeout(() => {
+    console.log("6秒后打印的");
 
+    setTimeout(() => {
+      console.log("9秒后打印的");
+    }, 3000);
+  }, 3000);
+}, 3000);
+```
 
 ### 方式二：Promise
 
@@ -42,42 +37,50 @@ setTimeout(()=>{
 > new Promise(function(resolve, reject){ })
 
 ```js
-new Promise(function(resolve, reject) { 
-    resolve('success')  // 成功执行
-}).then(result => {
-    alert(result)  //走then
-}).finally(()=>{
-	//无论成功失败，都会执行的回调
-    //做一些清理工作，如关闭加载动画
+new Promise((resolve, reject) => {
+  resolve("success"); // 成功执行
 })
-
-new Promise(function(resolve, reject) { 
-    reject('fail')  // 失败执行
-}).then(result => {
-    alert(result)
-}).catch(error => {
-     alert(error)  //走catch
+  .then((result) => {
+    alert(result); // 走then
+  })
+  .finally(() => {
+    // 无论成功失败，都会执行的回调
+    // 做一些清理工作，如关闭加载动画
+  });
+
+new Promise((resolve, reject) => {
+  reject("fail"); // 失败执行
 })
+  .then((result) => {
+    alert(result);
+  })
+  .catch((error) => {
+    alert(error); // 走catch
+  });
 ```
 
 如果想终止在某个执行链的位置，可以用**Promise.reject(new Error())**
 
 ```js
-new Promise(function(resolve, reject) {
-    resolve(1)
-}).then(result => {
-    return result + 1
-}).then(result => {
-    return result + 1
-}).then(result => {
-    
-  return  Promise.reject(new Error(result + '失败'))
-   // return result + 1
-}).then(result => {
-    return result + 1
-}).catch(error => {	
-    alert(error)
+new Promise((resolve, reject) => {
+  resolve(1);
 })
+  .then((result) => {
+    return result + 1;
+  })
+  .then((result) => {
+    return result + 1;
+  })
+  .then((result) => {
+    return Promise.reject(new Error(`${result}失败`));
+    // return result + 1
+  })
+  .then((result) => {
+    return result + 1;
+  })
+  .catch((error) => {
+    alert(error);
+  });
 ```
 
 ### 语法糖：async /await
@@ -90,14 +93,14 @@ new Promise(function(resolve, reject) {
 
 ```js
 async fn1() {
- const result = await new Promise(function(resolve){  
+ const result = await new Promise(function(resolve){
     setTimeout(function(){
       resolve('fn1执行结果')
     },5000)
  })
  console.log(result)
 },
-    
+
 fn2(){
   this.fn1() //async的函数并不会阻塞后续同步代码执行
   console.log('fn2执行') //先执行
@@ -116,7 +119,7 @@ fn2(){
 #### 捕获异常
 
 ```js
-   async  getCatch () {
+   async  getCatch() {
       try { // 通过 try/catch捕获异常
         await new Promise(function (resolve, reject) {
           reject(new Error('失败'))
@@ -148,13 +151,11 @@ async  fn1(){
     const promistB =  fetch("http://.../post/2")
     //利用 Promise.all组合
     const [a,b] = await Promise.all([promiseA,pormiseB])
-    
+
 }
 
 ```
 
-
-
 > 2.循环中执行异步操作，不能直接使用forEach,map等方法
 
 ```js
@@ -192,4 +193,3 @@ async  fn(){
     console.log('done')
 }
 ```
-
diff --git a/docs/FrontEnd/JavaScript/demo/FilePicker.vue b/docs/FrontEnd/JavaScript/demo/FilePicker.vue
index 3e029b2d..c4e6fa67 100644
--- a/docs/FrontEnd/JavaScript/demo/FilePicker.vue
+++ b/docs/FrontEnd/JavaScript/demo/FilePicker.vue
@@ -85,7 +85,7 @@ const openSaveAs = () => {
       padding: 0px 6px;
       margin-right: 10px;
       border: 1px solid #ccc;
-      background-color: #4E9EF5;
+      background-color: #4e9ef5;
     }
   }
 }
diff --git "a/docs/FrontEnd/JavaScript/\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.md" "b/docs/FrontEnd/JavaScript/\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.md"
index 51a6d189..eef841d8 100644
--- "a/docs/FrontEnd/JavaScript/\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.md"
+++ "b/docs/FrontEnd/JavaScript/\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.md"
@@ -1,6 +1,7 @@
 # if else 多分支优化
 
 ## 简单分支
+
 ```js
 //优化前
 function speak(name){
@@ -31,6 +32,7 @@ speak('老牛')
 ```
 
 ## 条件单一,处理不同
+
 ```js
 function speak(name){
    const map = {
@@ -73,4 +75,3 @@ function speak(name){
   }
 }
 ```
-
diff --git "a/docs/FrontEnd/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md" "b/docs/FrontEnd/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md"
index 221466f2..4c25c2a4 100644
--- "a/docs/FrontEnd/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md"
+++ "b/docs/FrontEnd/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md"
@@ -1,8 +1,5 @@
-
 # JS 图片懒加载
 
-
-
 ## 方案一：监听滚动
 
 ::: tip
@@ -12,36 +9,34 @@
 ```js
 const images = document.querySelectorAll('img')
 window.addEventListener('scroll', (e) => {
-    images.forEach(
-        image => {
-            const imageTop = image.getBoundingClientRect().top
-            if (imageTop < window.innerHeight) {
-                const data_src = image.getAttribute('data-src')
-                image.setAttribute('src', data_src)
-            }
-        }
-    )
+  images.forEach(
+    (image) => {
+      const imageTop = image.getBoundingClientRect().top
+      if (imageTop < window.innerHeight) {
+        const data_src = image.getAttribute('data-src')
+        image.setAttribute('src', data_src)
+      }
+    }
+  )
 })
 ```
 
-## 方案二：观察者 
+## 方案二：观察者
 
 ```js
 const images = document.querySelectorAll('img')
-const callback = enteries => {
-    enteries.forEach(entry => {
-        if (entry.isIntersecting) {
-            const img = entry.target
-            const data_src = img.getAttribute('data-src')
-            img.setAttribute('src', data_src)
-            observer.unobserve(img)
-        }
-    });
+function callback(enteries) {
+  enteries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      const img = entry.target
+      const data_src = img.getAttribute('data-src')
+      img.setAttribute('src', data_src)
+      observer.unobserve(img)
+    }
+  })
 }
 const observer = new IntersectionObserver(callback)
-images.forEach(image => {
-    observer.observe(image)
+images.forEach((image) => {
+  observer.observe(image)
 })
 ```
-
- 
\ No newline at end of file
diff --git "a/docs/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.md" "b/docs/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.md"
index 33bd18f8..b542efba 100644
--- "a/docs/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.md"
+++ "b/docs/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.md"
@@ -1,4 +1,3 @@
-
 ### 1.算术运算符
 
 **隐式类型转换**
@@ -6,99 +5,96 @@
 > 除了**加法**和其他*字符串*运算时，它先将其他值转为字符串，在进行拼接；其他运算它先将其他值转为*数字*，在进行运算
 
 ```js
-a = 10 - '5' //5
-a = 10 - true // 9
-a = 10 - false //10
-a = 10 - undefined // NaN
-a = 10 - null // 10
+a = 10 - "5"; // 5
+a = 10 - true; // 9
+a = 10 - false; // 10
+a = 10 - undefined; // NaN
+a = 10 - null; // 10
 ```
 
 ### 2.赋值运算符
 
 ```js
-let a = 10
-a = a + 10 // a += 10  (*= 	/=   %=		**=)
-//	??= 只有当a为undefined或null才会进行赋值
+let a = 10;
+a = a + 10; // a += 10  (*=   /=   %=    **=)
+//  ??= 只有当a为undefined或null才会进行赋值
 ```
 
 ### 3..运算符
 
 ```js
-+'123' // 123
-a = 123
-b = -a //-123
++"123"; // 123
+a = 123;
+b = -a; // -123
 ```
 
 ### 4.自增和自减
 
 ```js
-//	++ 使用后回事原来的变量立刻增加1
-a++
-a--
-
-//前自增:返回自增前的值
-//后自增:返回自增后的值
+//  ++ 使用后回事原来的变量立刻增加1
+a++;
+a--;
 
+// 前自增:返回自增前的值
+// 后自增:返回自增后的值
 ```
 
-
-
 ### 5.逻辑运算符
 
 ```js
 !   //逻辑非:对布尔值值取反,对非布尔值值取反,会先将其转为布尔值值再取反,可运用于隐式转布尔值   !!123 -> true
-    
+
 &&  //逻辑与:左右都为true返回true,否则返回false;非布尔值运算,会先转为布尔值后运算,但是最终返回原值
-    	//-	第一个值为(falsy),则直接返回第一个值的原值1,如果第一个值为ture,则直接返回第二个值
-    	NaN && 2	-> NaN
-		0 && 1 		-> 0
+      //-  第一个值为(falsy),则直接返回第一个值的原值1,如果第一个值为ture,则直接返回第二个值
+      NaN && 2  -> NaN
+    0 && 1     -> 0
 
-        1 && undefined	->	undefined
-        1 && false 		->	false
+        1 && undefined  ->  undefined
+        1 && false     ->  false
 
-||  //逻辑或:左右有true,则不看第二个值,则返回true的原值,否则返回false 	
-      	12 || false		->	 12	
-		null || {a : 1}	->	 {a : 1}
+||  //逻辑或:左右有true,则不看第二个值,则返回true的原值,否则返回false
+        12 || false    ->   12
+    null || {a : 1}  ->   {a : 1}
 ```
 
 ### 6.关系运算符
 
 ```js
 //用来检查两个值的关系是否成立,成立返回true,否则返回false (多个比较用&&)
-	>	>=	<	<=
+  >  >=  <  <=
 // 非数值与数值比较会先非数值转为数值再比较  7 < '10' ->  true
-//	两端为字符串则逐个比较字符的Unicode编码	 
-   'a' > 'b' -> false		
+//  两端为字符串则逐个比较字符的Unicode编码
+   'a' > 'b' -> false
    'abc' < 'b' -> true(比完第一位则结束)
-   '12' < '2'	-> true
-	
+   '12' < '2'  -> true
+
 ```
 
 ### 7.相等运算符
 
 ```js
-==/!=	//用来比较两个值是否相等/不相等,不同类型会转为相同类型再比较	
-    '2' == 2	-> true
-	//null和undefined进行相等比较会返回true(null == undefined -> true)
-	//NaN不和任何值相等,包括它自身
+==/!=  //用来比较两个值是否相等/不相等,不同类型会转为相同类型再比较
+    '2' == 2  -> true
+  //null和undefined进行相等比较会返回true(null == undefined -> true)
+  //NaN不和任何值相等,包括它自身
 ===/!== //检查两个值是否全等/不全等,不会自动类型转换
-    '2' == 2	-> false
-	//null === undefined -> false
+    '2' == 2  -> false
+  //null === undefined -> false
 
 ```
 
 ### 8.条件运算符
 
 ```js
-表达式 ? 表达式1 : 表达式2	//let max = a > b ? a : b
+表达式 ? 表达式1 : 表达式2; // let max = a > b ? a : b
 ```
 
 ### 9.控制语句
 
 ```js
-if{	}else if(){	}else{	}
+if{  }else if(){  }else{  }
 if //不加{}if只会控制紧随其后的一条语句
- 
+
 switch(表达式){
     case 表达式:
         break
@@ -106,15 +102,15 @@ switch(表达式){
     default
         ...
         //表达式进行全等比较,满足则执行代码,否则比较其他case后的表达式
-}       
+}
 ```
 
 ### 10.循环语句
 
 ```js
-//循环三要素 1.初始化变量	2.条件表达式	3.更新表达式
+//循环三要素 1.初始化变量  2.条件表达式  3.更新表达式
 while(条件表达式){...}
-do{	...	}while(表达式)	//先执行一次循环体,再判断条件是否执行循环体
+do{  ...  }while(表达式)  //先执行一次循环体,再判断条件是否执行循环体
 for(let i = 0;i < 10;i++){ ... } //for(;;)死循环
 ```
 
@@ -124,11 +120,10 @@ for(let i = 0;i < 10;i++){ ... } //for(;;)死循环
 
 ```js
 //原始值(7种):
-	Number,String,Boolean,Null,Undefined,BigInt,Symbol
+Number,String,Boolean,Null,Undefined,BigInt,Symbol
 //引用值(对象)
-	Object
+Object
     {
         [Symbol()]:'此值不可枚举'
     }
 ```
-
diff --git "a/docs/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.md" "b/docs/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.md"
index 5f68fec9..eec9afcd 100644
--- "a/docs/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.md"
+++ "b/docs/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.md"
@@ -1,115 +1,104 @@
-
-
 ### this指向
 
-
 根据函数调用方式的不同，this的值也不同：
 
 :::tip
+
 1. 以函数形式调用，this是window
 2. 以方法形式调用, this是调用方法的对象
 3. 构造函数中，this是新建的对象
 4. 箭头函数没有自己的this, 由外层作用域决定
 5. 通过call和apply调用的函数，它们的第一个参数就是函数的this
 6. 通过bind返回的函数，this由bind第一个参数决定（无法修改）
-:::
+   :::
 
 ```js
-function fn(){
-	console.log(this)//window
+function fn() {
+  console.log(this); // window
 }
-let obj = {
-	name:'zhansan',
-    fn(){
-		console.log(this)//obj
-        function fn2(){
-            console.log(this) //window     
-        }
-        fn3 = ()=> {
-            console.log(this)//obj,与调用方式无关,指向声明时外层作用域的this
-        }
-        fn2()//以函数形式调用指向window
+const obj = {
+  name: "zhansan",
+  fn() {
+    console.log(this); // obj
+    function fn2() {
+      console.log(this); // window
     }
-}
-obj.fn()//以方法形式调用,指向obj
+    fn3 = () => {
+      console.log(this); // obj,与调用方式无关,指向声明时外层作用域的this
+    };
+    fn2(); // 以函数形式调用指向window
+  },
+};
+obj.fn(); // 以方法形式调用,指向obj
 ```
 
 函数三种调用方式
 
 ```js
-fn()
-fn.call()
-fn.apply()
+fn();
+fn.call();
+fn.apply();
 ```
 
+:::tip call和bind与apply
 
-:::tip  call和bind与apply
 1. call 和 apply除了可以调用函数，还可以用来指定函数中的this
-    - 通过call方法调用函数，函数的实参直接在第一个参数后一个一个的列出来
-    - apply 实参需要通过一个数组传递
 
-1. bind() 是函数的方法，可以用来创建一个新的函数
-    - bind可以为新函数绑定this
-    - bind可以为新函数绑定参数
-::: 
+   - 通过call方法调用函数，函数的实参直接在第一个参数后一个一个的列出来
+   - apply 实参需要通过一个数组传递
+
+1. bind() 是函数的方法，可以用来创建一个新的函数 - bind可以为新函数绑定this - bind可以为新函数绑定参数
+   :::
+
 ```js
 fn2.call(obj, "hello", true)//会立即执行
 fn2.apply(obj, ["hello", true]//会立即执行
 let newfn = fn.bind(obj, 10, 20, 30)//不会立即执行, 返回一个新函数 	newfn()
 ```
 
- 箭头函数没有自身的this，它的this由定义时外层作用域决定，
-
-+ 也无法通过call apply 和 bind修改它的this 
-
-+  箭头函数中没有arguments
-
-
-
-
+箭头函数没有自身的this，它的this由定义时外层作用域决定，
 
+- 也无法通过call apply 和 bind修改它的this
 
+- 箭头函数中没有arguments
 
 ### 可变参数 `arguments`
 
 ```js
- // 定义一个函数，可以求任意个数值的和
+// 定义一个函数，可以求任意个数值的和
 function sum() {
-// 通过arguments，可以不受参数数量的限制更加灵活的创建函数
- /* arguments
+  // 通过arguments，可以不受参数数量的限制更加灵活的创建函数
+  /* arguments
     - arguments是函数中又一个隐含参数
     - arguments是一个类数组对象（伪数组）
-        和数组相似，可以通过索引来读取元素，也可以通过for循环变量，							
+        和数组相似，可以通过索引来读取元素，也可以通过for循环变量，
         但是它不是一个数组对象，不能调用数组的方法
     - arguments用来存储函数的实参，
         无论用户是否定义形参，实参都会存储到arguments对象中
-        可以通过该对象直接访问实参*/
-    let result = 0
+        可以通过该对象直接访问实参 */
+  let result = 0;
 
-    for (let num of arguments) {
-        result += num
-    }
+  for (const num of arguments) result += num;
 
-    return result
+  return result;
 }
-
 ```
 
 ### 剩余参数 `...args`
 
 ```js
- function sum2(...num) {
- /* 
+function sum2(...num) {
+  /*
 剩余参数，在定义函数时可以将参数指定为剩余参数
 - 剩余参数可以接收任意数量实参，并将他们统一存储到一个数组中返回
 - 作用和arguments基本是一致，但是也具有一些不同点：
     是一个数组，名字可以自己指定，配合其他参数一起使用，剩余参数写到最后。
  */
-    return num.reduce((a, b) => a + b, 0)
- }
+  return num.reduce((a, b) => a + b, 0);
+}
 function fn3(a, b, ...args) {
-  console.log(args)
- }
+  console.log(args);
+}
 ```
 
 ### Map
@@ -117,53 +106,53 @@ function fn3(a, b, ...args) {
 - **Map用来存储键值对结构的数据（key-value）**
 - Object中存储的数据就可以认为是一种键值对结构
 - Map和Object的主要区别：
-     - Object中的属性名只能是字符串或符号，如果传递了一个其他类型的属性名，
-         JS解释器会自动将其转换为字符串
-     - Map中任何类型的值都可以称为数据的key
+  - Object中的属性名只能是字符串或符号，如果传递了一个其他类型的属性名，
+    JS解释器会自动将其转换为字符串
+  - Map中任何类型的值都可以称为数据的key
 
 ```js
-/*属性和方法：
+/* 属性和方法：
   map.size() 获取map中键值对的数量
   map.set(key, value) 向map中添加键值对
-  map.get(key) 根据key获取值   
+  map.get(key) 根据key获取值
   map.delete(key) 删除指定数据
   map.has(key) 检查map中是否包含指定键
-  map.clear() 删除全部的键值对*/
-    
-    const obj = {
-        "name":"孙悟空",
-        'age':18,
-        [Symbol()]:"哈哈",
-        [obj2]:"嘻嘻"
-    }
+  map.clear() 删除全部的键值对 */
+
+const obj = {
+  name: "孙悟空",
+  age: 18,
+  [Symbol()]: "哈哈",
+  [obj2]: "嘻嘻",
+};
 ```
 
 **将map转换为数组**
 
 ```js
-const arr = Array.from(map)//const arr = [...map]
- // 遍历map
-  for (const [key, value] of map) {
-     const [key, value] = entry
-    console.log(key, value)
-   }
-
-    map.forEach((key, value)=>{
-        console.log(key, value)
-    })
-
- map.keys() - 获取map的所有的key
- map.values() - 获取map的所有的value
+const arr = Array.from(map); // const arr = [...map]
+// 遍历map
+for (const [key, value] of map) {
+  const [key, value] = entry;
+  console.log(key, value);
+}
+
+map.forEach((key, value) => {
+  console.log(key, value);
+});
+
+map.keys() - 获取map的所有的key;
+map.values() - 获取map的所有的value;
 ```
 
 **数组转map**
 
 ```js
 const map2 = new Map([
-    ["name", "猪八戒"],
-    ["age", 18],
-    [{}, () => {}],
-])
+  ["name", "猪八戒"],
+  ["age", 18],
+  [{}, () => {}],
+]);
 ```
 
 ### Set
@@ -179,10 +168,9 @@ const map2 = new Map([
         add() 添加元素
         has() 检查元素
         delete() 删除元素
-        [...set]转为数组获取元素 
+        [...set]转为数组获取元素
         set.entries() 得到键值对(键值对一样)
         */
-
 ```
 
 ### 随机数生成
@@ -200,10 +188,10 @@ Math.round(Math.random() * (y-x) + x)
 ### 时间格式化
 
 ```js
-const d = new Date()
+const d = new Date();
 
-let result = d.toLocaleDateString() // 将日期转换为本地的字符串		'2021/10/1
-result = d.toLocaleTimeString() // 将时间转换为本地的字符串 	'21:32:35'
+let result = d.toLocaleDateString(); // 将日期转换为本地的字符串		'2021/10/1
+result = d.toLocaleTimeString(); // 将时间转换为本地的字符串 	'21:32:35'
 /*   - 参数：
 1. locales: 描述语言和国家信息的字符串
     zh-CN 中文中国
@@ -211,46 +199,41 @@ result = d.toLocaleTimeString() // 将时间转换为本地的字符串 	'21:32:
     en-US 英文美国
 2. options: 需要一个对象作为参数，在对象中可以通过对象的属性来对日期的格式进行配置
 */
-  result = d.toLocaleString("zh-CN", {
-    year: "numeric",
-    month: "long",
-    day: "2-digit",
-    weekday: "short",
-    hour: "2-digit",
-    minute: "2-digit"
-})
-
+result = d.toLocaleString("zh-CN", {
+  year: "numeric",
+  month: "long",
+  day: "2-digit",
+  weekday: "short",
+  hour: "2-digit",
+  minute: "2-digit",
+});
 ```
 
 ### 面向对象之类
 
 ```js
- class Person{
-	 constructor(name, age, gender){
-        // console.log("构造函数执行了~", name, age, gender)
-        // 可以在构造函数中，为实例属性进行赋值
-        // 在构造函数中，this表示当前所创建的对象
-        this.name = name
-        this.age = age
-        this.gender = gender
-
-    }
-
-    // sayHello = function(){} // 添加方法的一种方式
-
-    sayHello(){
-        console.log('大家好，我是' + this.name)
-    } // 添加方法（实例方法） 实例方法中this就是当前实例
-
-    static test(){
-        console.log("我是静态方法", this)
-    } // 静态方法（类方法） 通过类来调用 静态方法中this指向的是当前类
-
+class Person {
+  constructor(name, age, gender) {
+    // console.log("构造函数执行了~", name, age, gender)
+    // 可以在构造函数中，为实例属性进行赋值
+    // 在构造函数中，this表示当前所创建的对象
+    this.name = name;
+    this.age = age;
+    this.gender = gender;
+  }
+
+  // sayHello = function(){} // 添加方法的一种方式
+
+  sayHello() {
+    console.log(`大家好，我是${this.name}`);
+  } // 添加方法（实例方法） 实例方法中this就是当前实例
+
+  static test() {
+    console.log("我是静态方法", this);
+  } // 静态方法（类方法） 通过类来调用 静态方法中this指向的是当前类
 }
 ```
 
-
-
 **面向对象的特点：封装、继承和多态**
 
 > 封装 —— 安全性
@@ -258,16 +241,16 @@ result = d.toLocaleTimeString() // 将时间转换为本地的字符串 	'21:32:
 > 多态 —— 灵活性
 
 #### 封装
+
 :::tip
+
 1. 对象就是一个用来存储不同属性的容器
 2. 对象不仅存储属性，还要负责数据的安全, 直接添加到对象中的属性，并不安全，因为它们可以被任意的修改
 3. 如何确保数据的安全：
    - 私有化数据: 将需要保护的数据设置为私有，只能在类内部使用
    - 提供setter和getter方法来开放对数据的操作
-   - 属性设置私有，通过getter setter方法操作属性带来的好处
-        1. 可以控制属性的读写权限
-        2. 可以在方法中对属性的值进行验证
-::: 
+   - 属性设置私有，通过getter setter方法操作属性带来的好处1. 可以控制属性的读写权限2. 可以在方法中对属性的值进行验证
+     :::
 
 ```js
  - 实现封装的方式：
@@ -283,68 +266,73 @@ result = d.toLocaleTimeString() // 将时间转换为本地的字符串 	'21:32:
 ```
 
 ```js
- class Person {
-	 #name//实例使用#开头就变成了私有属性，私有属性只能在类内部访问
-        constructor(name, age, gender) {
-            this.#name = name
-        }
-
-        sayHello() {
-            console.log(this.#name)
-        }
- 
-        getName(){// getter方法，用p.getName()来读取属性
-            return this.#name
-        }
-
-        // setter方法，用来设置属性,p.setName('zhangsan')
-        setName(name){
-            this.#name = name
-        }
-
-        get name(){//简化读取方式:p.name
-            return this.#name
-        }
-
-        set name(gender){
-            this.#name = name
-        }
-    }
+class Person {
+  #name; // 实例使用#开头就变成了私有属性，私有属性只能在类内部访问
+  constructor(name, age, gender) {
+    this.#name = name;
+  }
+
+  sayHello() {
+    console.log(this.#name);
+  }
+
+  getName() {
+    // getter方法，用p.getName()来读取属性
+    return this.#name;
+  }
+
+  // setter方法，用来设置属性,p.setName('zhangsan')
+  setName(name) {
+    this.#name = name;
+  }
+
+  get name() {
+    // 简化读取方式:p.name
+    return this.#name;
+  }
+
+  set name(gender) {
+    this.#name = name;
+  }
+}
 ```
 
 #### 继承
+
 :::tip 继承
+
 - 可以通过extends关键来完成继承
-     时，就相当于将另一个类中的代码复制到了当前类中（简单理解）
+  时，就相当于将另一个类中的代码复制到了当前类中（简单理解）
 - 继承发生时，被继承的类称为 父类（超类），继承的类称为 子类
-     的代码，并且可以在不修改一个类的前提对其进行扩展
-:::
+  的代码，并且可以在不修改一个类的前提对其进行扩展
+  :::
 
 ```js
- class Animal{
-    constructor(name){
-        this.name = name
-    }
-    sayHello(){
-        console.log("动物在叫~")
-    }
+class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  sayHello() {
+    console.log("动物在叫~");
+  }
 }
 
-class Dog extends Animal{
-    // 重写构造函数
-    constructor(name, age){
-        // 重写构造函数时，构造函数的第一行代码必须为super()
-        super(name) // 调用父类的构造函数
-        this.age = age
-
-    }
-	// 在子类中，可以通过创建同名方法来重写父类的方法
-    sayHello(){
-        console.log("汪汪汪")
-    }
+class Dog extends Animal {
+  // 重写构造函数
+  constructor(name, age) {
+    // 重写构造函数时，构造函数的第一行代码必须为super()
+    super(name); // 调用父类的构造函数
+    this.age = age;
+  }
+
+  // 在子类中，可以通过创建同名方法来重写父类的方法
+  sayHello() {
+    console.log("汪汪汪");
+  }
 }
-const dog = new Dog("旺财")
-dog.sayHello()
+const dog = new Dog("旺财");
+dog.sayHello();
 ```
 
 #### 多态
@@ -352,16 +340,13 @@ dog.sayHello()
 在JS中不会检查参数的类型，所以这就意味着任何数据都可以作为参数传递
 指定的类型，只要对象满足某些条件即可
 
-
-
 ```js
-function sayHello(obj){
- console.log("Hello,"+obj.name)
+function sayHello(obj) {
+  console.log(`Hello,${obj.name}`);
 }
-//只要参数有obj.name就可以调用
-sayHello(dog)
-sayHello(person)
-
+// 只要参数有obj.name就可以调用
+sayHello(dog);
+sayHello(person);
 ```
 
 ### 对象的结构
@@ -371,71 +356,77 @@ sayHello(person)
 对象中存储属性的区域实际有两个：
 
 :::tip
+
 1. 对象自身
-    - 直接通过对象所添加的属性，位于对象自身中
-    - 在**类**中通过 x = y 的形式添加的属性，位于对象自身中
+
+   - 直接通过对象所添加的属性，位于对象自身中
+   - 在**类**中通过 x = y 的形式添加的属性，位于对象自身中
 
 2. 原型对象（prototype）
-    - 对象中还有一些内容，会存储到其他的对象里（原型对象）
-    - 在对象中会有一个属性用来存储原型对象，这个属性叫做`__proto__`
-    - 原型对象也负责为对象存储属性，<br>
-        当我们访问对象中的属性时，会优先访问对象自身的属性，<br>
-        对象自身不包含该属性时，才会去原型对象中寻找
-    - 会添加到原型对象中的情况：
-        1. 在类中通过xxx(){}方式添加的方法，位于原型中
-        2. 主动向原型中添加的属性或方法
-
-1. 访问一个对象的原型对象
+
+   - 对象中还有一些内容，会存储到其他的对象里（原型对象）
+   - 在对象中会有一个属性用来存储原型对象，这个属性叫做`__proto__`
+   - 原型对象也负责为对象存储属性，<br>
+     当我们访问对象中的属性时，会优先访问对象自身的属性，<br>
+     对象自身不包含该属性时，才会去原型对象中寻找
+   - 会添加到原型对象中的情况：
+     1. 在类中通过xxx(){}方式添加的方法，位于原型中
+     2. 主动向原型中添加的属性或方法
+
+3. 访问一个对象的原型对象
+
    - `obj.__proto__`
    - `Object.getPrototypeOf(对象)`
-   
-2. 原型对象中的数据：
+
+4. 原型对象中的数据：
    - 对象中的数据（属性、方法等）
    - constructor （对象的构造函数）
 
-
 **原型链:** 原型对象也有原型，这样就构成了一条原型链，根据对象的复杂程度不同，原型链的长度也不同
- obj对象的原型链：obj对象 --> 原型 --> null
-::: 
-
+obj对象的原型链：obj对象 --> 原型 --> null
+:::
 
 #### 原型链
+
 ::: info 原型链属性查找规则
+
 1. 读取对象属性时，会优先对象自身属性，
 2. 如果对象中有，则使用，没有则去对象的原型中寻找
 3. 如果原型中有，则使用，没有则去原型的原型中寻找
 4. 直到找到`Object`对象的原型（Object的原型没有原型（为`null`））
 5. 如果依然没有找到，则返回`undefined`
 
-::: 
-:::tip  原型的作用：
- 1. 原型就相当于是一个公共的区域，可以被所有该类实例访问，
- 2. 可以将该类实例中，所有的公共属性（方法）统一存储到原型中
- 3. 这样我们只需要创建一个属性，即可被所有实例访问
- 4. 一修改就是修改所有实例的原型
- 5. 无需创建实例即可完成对类的修改
-::: 
+:::
+:::tip 原型的作用：
 
+1.  原型就相当于是一个公共的区域，可以被所有该类实例访问，
+2.  可以将该类实例中，所有的公共属性（方法）统一存储到原型中
+3.  这样我们只需要创建一个属性，即可被所有实例访问
+4.  一修改就是修改所有实例的原型
+5.  无需创建实例即可完成对类的修改
+    :::
 
 #### 修改原型
 
-
 ::: warning 原则
+
 1. 原型尽量不要手动改
 2. 要改也不要通过实例对象去改
 3. 通过 类.prototype 属性去修改
 4. 最好不要直接给prototype去赋值
-:::
+   :::
+
 ```js
- Person.prototype.fly = () => {	//在原型添加方法
-    console.log("我在飞！")
-}
+Person.prototype.fly = () => {
+  // 在原型添加方法
+  console.log("我在飞！");
+};
 ```
 
 #### instanceof/in/hasOwn
 
 > 用于检查的是对象的原型链上是否有该类 `dog instanceof Animal`
-:::info 检查对象属性
+> :::info 检查对象属性
 
 - in:使用in运算符检查属性时，无论属性在对象自身还是在原型中，都会返回true
 - 对象.hasOwnProperty(属性名):用来检查一个对象的 自身 是否含有某个属性
@@ -447,7 +438,6 @@ sayHello(person)
 
 ::: tip new运算符是创建对象时，将会发生这4件事：
 
-
 1. 创建一个普通的JS对象（`Object`对象 {}）, 称其为新对象
 
 2. 将构造函数的`prototype`属性设置为新对象的原型
@@ -459,21 +449,21 @@ sayHello(person)
    如果构造函数的返回值是一个**原始值**或者**没有指定返回值**(`undefined`)
 
    则*新的对象*将会作为返回值返回（通常不会为构造函数指定返回值）
-:::
+   :::
 
- ```js
-function MyClass(){
+```js
+function MyClass() {
 
-      // let newInstance = {}
-      // newInstance.__proto__ = MyClass.prototype
-      // this = newInstance
-      // return newInstance
+    / let newInstance = {}
+   / newInstance.__proto__ = MyClass.prototype
+    / this = newInstance
+   / return newInstance
 
-      }
+``
 
-```
+**对象的分类**：
 
-  **对象的分类**：                       
- 1. **内建对象**: 由ES标准所定义的对象
- 2. **宿主对象**: 由浏览器提供的对象
- 3. **自定义对象**: 由开发人员自己创建的对象(Vue, React)
+1.  **内建对象**: 由ES标准所定义的对象
+2.  **宿主对象**: 由浏览器提供的对象
+3.  **自定义对象**: 由开发人员自己创建的对象(Vue, React)
+```
diff --git "a/docs/FrontEnd/JavaScript/\345\270\270\350\247\201\347\256\227\346\263\225.md" "b/docs/FrontEnd/JavaScript/\345\270\270\350\247\201\347\256\227\346\263\225.md"
index af9ef0b9..2eefa263 100644
--- "a/docs/FrontEnd/JavaScript/\345\270\270\350\247\201\347\256\227\346\263\225.md"
+++ "b/docs/FrontEnd/JavaScript/\345\270\270\350\247\201\347\256\227\346\263\225.md"
@@ -1,60 +1,56 @@
-
-
 ## 括号匹配
 
 ```js
-let str1 = '{[]}'	//true
-let str2 = '{[[]}'	//false
-let str3 = '{[]}['	//false
-let str4 = '{[()]}'	//true
+const str1 = "{[]}"; // true
+const str2 = "{[[]}"; // false
+const str3 = "{[]}["; // false
+const str4 = "{[()]}"; // true
 ```
+
 **解决方案：**
 
 ```js {11-19}
-//方案一：
-const isValid = function(str) {
-  	if (str.length == 0) return false
-  	let arr = []
-    let map = {
-        ')': '(',
-        '}': '{',
-        ']': '['
-    }
-    for (let i = 0; i < str.length; i++) {
-        if (str[i] == '(' || str[i] == '{' || str[i] == '[') {
-            arr.push(str[i])
-        } else {
-            //栈顶出栈的左括号 !== map取出右括号匹配的括号类型
-            if (map[str[i]] != arr.pop()) {
-                return false
-            }
-        }
-    }
-    // arr数组已全部匹配，出完栈
-    if (arr.length !== 0) {
-        return false
+// 方案一：
+const isValid = function (str) {
+  if (str.length === 0) return false;
+  const arr = [];
+  const map = {
+    ")": "(",
+    "}": "{",
+    "]": "[",
+  };
+  for (let i = 0; i < str.length; i++) {
+    if (str[i] === "(" || str[i] === "{" || str[i] === "[") {
+      arr.push(str[i]);
+    } else {
+      // 栈顶出栈的左括号 !=== map取出右括号匹配的括号类型
+      if (map[str[i]] != arr.pop()) return false;
     }
-    return true
-}
+  }
+  // arr数组已全部匹配，出完栈
+  if (arr.length !=== 0) return false;
+
+  return true;
+};
 
-//方案二：
+// 方案二：
 function isMatched(str) {
-  let stack = [];
+  const stack = [];
   let top = -1;
 
   for (let i = 0; i < str.length; i++) {
-    let ch = str.charAt(i);
+    const ch = str.charAt(i);
 
-    if (ch === '{' || ch === '[' || ch === '(') {
+    if (ch ==== "{" || ch ==== "[" || ch ==== "(") {
       stack.push(ch);
       top++;
-    } else if (ch === '}' && stack[top] === '{') {
+    } else if (ch ==== "}" && stack[top] ==== "{") {
       stack.pop();
       top--;
-    } else if (ch === ']' && stack[top] === '[') {
+    } else if (ch ==== "]" && stack[top] ==== "[") {
       stack.pop();
       top--;
-    } else if (ch === ')' && stack[top] === '(') {
+    } else if (ch ==== ")" && stack[top] ==== "(") {
       stack.pop();
       top--;
     } else {
@@ -62,9 +58,10 @@ function isMatched(str) {
     }
   }
 
-  return stack.length === 0;
+  return stack.length ==== 0;
 }
 ```
+
 解析：
 
 - 利用栈来实现括号匹配，用 `top` 标识栈顶元素的下标，初始值为 `-1`。
@@ -74,17 +71,14 @@ function isMatched(str) {
 - 如果字符不是括号，则返回 `false`。
 - 最后，如果栈为空说明所有括号都匹配，返回 `true`，否则不匹配返回 `false`。
 
-
-
 ## 简单递归
 
 ### 计算阶乘
 
 ```js
 function factorial(n) {
-  if (n === 0) {
-    return 1;
-  }
+  if (n ==== 0) return 1;
+
   return n * factorial(n - 1);
 }
 ```
@@ -93,9 +87,8 @@ function factorial(n) {
 
 ```js
 function fibonacci(n) {
-  if (n <= 1) {
-    return n;
-  }
+  if (n <= 1) return n;
+
   return fibonacci(n - 1) + fibonacci(n - 2);
 }
 ```
@@ -105,39 +98,39 @@ function fibonacci(n) {
 ```js
 //ES6的flat方法实现：
 function flatten(array) {
-  return array.flat(Infinity)
+  return array.flat(Infinity);
 }
 //仅限二维数组
-function flat(arr){
-  return Array.prototype.concat.apply([],arr)
+function flat(arr) {
+  return Array.prototype.concat.apply([], arr);
 }
-let array1 = [2,3,4,[4,6,5,8]]
-flat(array1)	[2, 3, 4, 4, 6, 5, 8]
- 
+let array1 = [2, 3, 4, [4, 6, 5, 8]];
+flat(array1)[(2, 3, 4, 4, 6, 5, 8)];
+
 //多维数组
-function flatplus(arr){
-  while(arr.some(item => item instanceof Array)){
-    arr = Array.prototype.concat.apply([],arr)
+function flatplus(arr) {
+  while (arr.some((item) => item instanceof Array)) {
+    arr = Array.prototype.concat.apply([], arr);
   }
-  return arr
+  return arr;
 }
-let arr = [2,3,4,[5,[6,[7]]]]
-flatplus(arr)	//[2, 3, 4, 5, 6, 7]
+let arr = [2, 3, 4, [5, [6, [7]]]];
+flatplus(arr); //[2, 3, 4, 5, 6, 7]
 
 //可控制扁平化深度：Array.prototype.concat.apply
-function flatplus(arr,depth){
-  let deep = 0	
-  let flag = arr.some(item => item instanceof Array) && deep < depth
-  while(flag){
-    arr = Array.prototype.concat.apply([],arr)
-    ++deep
+function flatplus(arr, depth) {
+  let deep = 0;
+  let flag = arr.some((item) => item instanceof Array) && deep < depth;
+  while (flag) {
+    arr = Array.prototype.concat.apply([], arr);
+    ++deep;
   }
-  return arr
+  return arr;
 }
 //递归+concat
 function flatten(arr) {
   var result = [];
- for (var i = 0; i < arr.length; i++) {
+  for (var i = 0; i < arr.length; i++) {
     if (Array.isArray(arr[i])) {
       result = result.concat(flatten(arr[i]));
     } else {
@@ -153,12 +146,12 @@ function flatten(arr) {
 ```js
 //解法一：使用数组的reverse()方法
 function reverseString(str) {
-  return str.split('').reverse().join('');
+  return str.split("").reverse().join("");
 }
 
 //解法二：使用for循环遍历字符串
 function reverseString(str) {
-  let result = '';
+  let result = "";
   for (let i = str.length - 1; i >= 0; i--) {
     result += str[i];
   }
@@ -167,7 +160,7 @@ function reverseString(str) {
 
 //解法三：使用递归函数
 function reverseString(str) {
-  if (str === "")	return "";
+  if (str ==== "") return "";
   return reverseString(str.slice(1)) + str[0];
 }
 ```
@@ -176,52 +169,50 @@ function reverseString(str) {
 
 ```js
 function gcd(a, b) {
-  if (b === 0) return a;
+  if (b ==== 0) return a;
   return gcd(b, a % b);
 }
 ```
 
-
-
 ### 斐波那契数列
 
 ```js
 //递归实现
-function fibonacci(n){
-  if(n<=1) return n;
-  return fibonacci(n-1) + fibonacci(n-2);
+function fibonacci(n) {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
 }
 
 //动态规划实现
-function fibonacci(n){
-  let f = [0,1];
-  for(let i=2;i<=n;i++){
-    f[i] = f[i-1] + f[i-2];
+function fibonacci(n) {
+  let f = [0, 1];
+  for (let i = 2; i <= n; i++) {
+    f[i] = f[i - 1] + f[i - 2];
   }
   return f[n];
 }
 
 //测试
-for(let i=0;i<=10;i++){
+for (let i = 0; i <= 10; i++) {
   console.log(`fibonacci(${i}): ${fibonacci(i)}`);
   //输出：0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55
 }
 ```
 
-
-
 ## 排序算法
+
 ### 冒泡排序
+
 ```js
 function bubbleSort(arr) {
-  let len = arr.length;
+  const len = arr.length;
   for (let i = 0; i < len - 1; i++) {
-      for (let j = 0; j < len - 1 - i; j++) {
-          if (arr[j] > arr[j+1]) {
-            let temp = arr[j+1];
-            arr[j+1] = arr[j];
-            arr[j] = temp;
-            /*
+    for (let j = 0; j < len - 1 - i; j++) {
+      if (arr[j] > arr[j + 1]) {
+        const temp = arr[j + 1];
+        arr[j + 1] = arr[j];
+        arr[j] = temp;
+        /*
             不使用额外变量交换
             方法一：
             [arr[j+1],arr[j]] = [arr[j],arr[j+1]]
@@ -236,48 +227,42 @@ function bubbleSort(arr) {
             b = a ^ b;
             a = a ^ b;
             */
-          }
       }
+    }
   }
   return arr;
 }
-
 ```
+
 ### 选择排序
 
-[**排序动画图解**   ](https://visualgo.net/en)
+[**排序动画图解** ](https://visualgo.net/en)
 
 **随机生成测试数组**
 
 ```js {3}
-var testArr = []
-for (var i = 0; i < 10000; i++) {
-     testArr.push(Math.floor(Math.random() * 100000))
-}
+const testArr = [];
+for (let i = 0; i < 10000; i++)
+  testArr.push(Math.floor(Math.random() * 100000));
 ```
 
-
-
 ```js {9-13}
-arr = [3,7,6,9,4,5,2,8]
-const selectSort = (arr) => {
-if (!Array.isArray(arr)) {
-    throw new Error(arr + "is not Array")
-}
-for (let i = 0; i < arr.length; i++) {
+arr = [3, 7, 6, 9, 4, 5, 2, 8];
+function selectSort(arr) {
+  if (!Array.isArray(arr)) throw new Error(`${arr}is not Array`);
+
+  for (let i = 0; i < arr.length; i++) {
     let minIndex = i;
-    //找到arr[i]后的最小值得索引
+    // 找到arr[i]后的最小值得索引
     for (let j = i + 1; j < arr.length; j++) {
-        if (arr[j] < arr[minIndex]) {
-            minIndex = j
-        }
+      if (arr[j] < arr[minIndex]) minIndex = j;
     }
-    //交换
-    let tem = arr[i]
-    arr[i] = arr[minIndex]
-    arr[minIndex] = tem
-}
-return arr
+    // 交换
+    const tem = arr[i];
+    arr[i] = arr[minIndex];
+    arr[minIndex] = tem;
+  }
+  return arr;
 }
 ```
 
@@ -285,26 +270,26 @@ return arr
 
 ```js {6,9-13}
 function quickSort(arr) {
-    if (arr.length <= 1) return arr;
- 
-    const pivotIndex = Math.floor(arr.length / 2);
-	//选中心轴索引，并选取中心轴的值
-    const pivot = arr.splice(pivotIndex, 1)[0];　　
-    const left = [];　　
-    const right = [];　
-    for (let i = 0; i < arr.length; i++) {　　　　
-        //与中心轴比较，小的放在左数组，大的放在右数组　
-     	arr[i] <= pivot ? left.push(arr[i]) : right.push(arr[i])
-    }　　
-    return quickSort(left).concat([pivot], quickSort(right));
-};
+  if (arr.length <= 1) return arr;
+
+  const pivotIndex = Math.floor(arr.length / 2);
+  // 选中心轴索引，并选取中心轴的值
+  const pivot = arr.splice(pivotIndex, 1)[0];
+  const left = [];
+  const right = [];
+  for (let i = 0; i < arr.length; i++) {
+    // 与中心轴比较，小的放在左数组，大的放在右数组
+    arr[i] <= pivot ? left.push(arr[i]) : right.push(arr[i]);
+  }
+  return quickSort(left).concat([pivot], quickSort(right));
+}
 ```
 
 ### 插入排序
 
 以第一个数为有序数组，让后面每一个数比较找位置并插入有序数组里。
 
- 若后面待插入的数大于有序数组的最后一个数，就放在原位；
+若后面待插入的数大于有序数组的最后一个数，就放在原位；
 
 若第小于有序数组的最后一个数，则进入while循环，在有序数组中找位置：
 
@@ -312,88 +297,91 @@ function quickSort(arr) {
 
 ```js {8-12}
 function insertSort(arr) {
-    let len = arr.length;
-    let preIndex, current;
-    for (let i = 1; i < len; i++) {
-        preIndex = i - 1;
-        current = arr[i];
-      //  while (preIndex >= 0 && current < arr[preIndex]) {//从大到小
-        while (preIndex >= 0 && current < arr[preIndex]) {//从小到大
-            arr[preIndex + 1] = arr[preIndex];//后移
-            preIndex--;
-        }//退出while循环时，说明插入位置找到
-        arr[preIndex + 1] = current;
-    }
-    return arr;
+  const len = arr.length;
+  let preIndex, current;
+  for (let i = 1; i < len; i++) {
+    preIndex = i - 1;
+    current = arr[i];
+    //  while (preIndex >= 0 && current < arr[preIndex]) {//从大到小
+    while (preIndex >= 0 && current < arr[preIndex]) {
+      // 从小到大
+      arr[preIndex + 1] = arr[preIndex]; // 后移
+      preIndex--;
+    } // 退出while循环时，说明插入位置找到
+    arr[preIndex + 1] = current;
+  }
+  return arr;
 }
 ```
+
 ### 希尔排序
 
 ```js {10-14,6}
 function shellSort(array) {
-    let gap = Math.floor(array.length / 2);
-
-    while (1 <= gap) {
-        // 把距离为 gap 的元素编为一个组，扫描所有组
-        for (let i = gap; i < array.length; i++) {
-            let j = 0;
-            let temp = array[i];
-
-            // 对距离为 gap 的元素组进行排序
-            for (j = i - gap; j >= 0 && temp < array[j]; j -= gap) {
-                array[j + gap] = array[j];
-            }
-            array[j + gap] = temp;
-        }
-        gap = Math.floor(gap / 2); // 减小增量
+  let gap = Math.floor(array.length / 2);
+
+  while (gap >= 1) {
+    // 把距离为 gap 的元素编为一个组，扫描所有组
+    for (let i = gap; i < array.length; i++) {
+      let j = 0;
+      const temp = array[i];
+
+      // 对距离为 gap 的元素组进行排序
+      for (j = i - gap; j >= 0 && temp < array[j]; j -= gap)
+        array[j + gap] = array[j];
+
+      array[j + gap] = temp;
     }
-    return array;
+    gap = Math.floor(gap / 2); // 减小增量
+  }
+  return array;
 }
 ```
 
 ## 求两个有序数组的中位数
+
 ```js
-//出这两个有序数组的中位数,时间复杂度为 O(m+n)
+// 出这两个有序数组的中位数,时间复杂度为 O(m+n)
 function findMedianSortedArrays(nums1, nums2) {
-    const mergeArr = merge(nums1, nums2); // 合并两个有序数组
-    const len = mergeArr.length;
-    // 判断合并后的数组长度，分奇偶情况求中位数
-    if(len % 2 === 0) {
-        return (mergeArr[len/2-1] + mergeArr[len/2])/2;
-    } else {
-        return mergeArr[Math.floor(len/2)];
-    }
+  const mergeArr = merge(nums1, nums2); // 合并两个有序数组
+  const len = mergeArr.length;
+  // 判断合并后的数组长度，分奇偶情况求中位数
+  if (len % 2 ==== 0) return (mergeArr[len / 2 - 1] + mergeArr[len / 2]) / 2;
+  else return mergeArr[Math.floor(len / 2)];
 }
 
 // 归并排序合并两个有序数组
 function merge(nums1, nums2) {
-    const result = [];
-    let i = 0, j = 0;
-    while(i < nums1.length && j < nums2.length) {
-        if(nums1[i] < nums2[j]) {
-            result.push(nums1[i]);
-            i++;
-        } else {
-            result.push(nums2[j]);
-            j++;
-        }
-    }
-    while(i < nums1.length) {
-        result.push(nums1[i]);
-        i++;
-    }
-    while(j < nums2.length) {
-        result.push(nums2[j]);
-        j++;
+  const result = [];
+  let i = 0;
+  let j = 0;
+  while (i < nums1.length && j < nums2.length) {
+    if (nums1[i] < nums2[j]) {
+      result.push(nums1[i]);
+      i++;
+    } else {
+      result.push(nums2[j]);
+      j++;
     }
-    return result;
+  }
+  while (i < nums1.length) {
+    result.push(nums1[i]);
+    i++;
+  }
+  while (j < nums2.length) {
+    result.push(nums2[j]);
+    j++;
+  }
+  return result;
 }
 ```
+
 ```js
 function findMedianSortedArrays(nums1, nums2) {
   const merge = (arr1, arr2) => {
     const merged = [];
-    let i = 0, j = 0;
+    let i = 0;
+    let j = 0;
 
     while (i < arr1.length && j < arr2.length) {
       if (arr1[i] < arr2[j]) merged.push(arr1[i++]);
@@ -401,31 +389,29 @@ function findMedianSortedArrays(nums1, nums2) {
     }
 
     return [...merged, ...arr1.slice(i), ...arr2.slice(j)];
-  }
+  };
 
   const merged = merge(nums1, nums2);
   const mid = Math.floor(merged.length / 2);
 
-  return merged.length % 2 === 0 ? (merged[mid - 1] + merged[mid]) / 2 : merged[mid];
+  return merged.length % 2 ==== 0
+    ? (merged[mid - 1] + merged[mid]) / 2
+    : merged[mid];
 }
-
 ```
 
-
-
 ## 实现EventEmitter
 
 ```js
-//可以添加事件侦听器，触发事件，并处理异步事件
+// 可以添加事件侦听器，触发事件，并处理异步事件
 class EventEmitter {
   constructor() {
     this.registry = {};
   }
 
   on(eventName, listener) {
-    if (!this.registry[eventName]) {
-      this.registry[eventName] = [];
-    }
+    if (!this.registry[eventName]) this.registry[eventName] = [];
+
     this.registry[eventName].push(listener);
   }
 
@@ -442,18 +428,22 @@ class EventEmitter {
 ```
 
 :::details 测试
+
 ```js
 const eventEmitter = new EventEmitter();
 
-eventEmitter.on('eventA', () => { console.log('eventA triggered'); });
-eventEmitter.on('eventB', () => { console.log('eventB triggered'); });
+eventEmitter.on("eventA", () => {
+  console.log("eventA triggered");
+});
+eventEmitter.on("eventB", () => {
+  console.log("eventB triggered");
+});
 
-eventEmitter.emit('eventA');
-eventEmitter.emit('eventB');
+eventEmitter.emit("eventA");
+eventEmitter.emit("eventB");
 ```
-:::
-
 
+:::
 
 ## [生成随机十六进制颜色](https://css-tricks.com/snippets/javascript/random-hex-color/)
 
@@ -461,10 +451,10 @@ eventEmitter.emit('eventB');
 
 ```js
 function randomHexColor() {
-  var red = Math.floor(Math.random() * 256).toString(16);
-  var green = Math.floor(Math.random() * 256).toString(16);
-  var blue = Math.floor(Math.random() * 256).toString(16);
-  return "#" + red + green + blue;
+  const red = Math.floor(Math.random() * 256).toString(16);
+  const green = Math.floor(Math.random() * 256).toString(16);
+  const blue = Math.floor(Math.random() * 256).toString(16);
+  return `#${red}${green}${blue}`;
 }
 ```
 
@@ -472,7 +462,7 @@ function randomHexColor() {
 
 ```js
 function randomHexColor() {
-  var color = Math.floor(Math.random() * 16777215).toString(16);
+  const color = Math.floor(Math.random() * 16777215).toString(16);
   return `#${color}`;
 }
 ```
@@ -481,8 +471,10 @@ function randomHexColor() {
 
 ```js
 function randomHexColor() {
-  var hexColor = Array.from({length: 3}, () => Math.floor(Math.random() * 256).toString(16));
-  return "#" + hexColor.join("");
+  const hexColor = Array.from({ length: 3 }, () =>
+    Math.floor(Math.random() * 256).toString(16)
+  );
+  return `#${hexColor.join("")}`;
 }
 ```
 
@@ -490,11 +482,10 @@ function randomHexColor() {
 
 ```js
 function randomHexColor() {
-  let letters = "0123456789ABCDEF";
+  const letters = "0123456789ABCDEF";
   let color = "#";
-  for (let i = 0; i < 6; i++) {
-     color += letters[Math.floor(Math.random() * 16)];
-  }
+  for (let i = 0; i < 6; i++) color += letters[Math.floor(Math.random() * 16)];
+
   return color;
 }
 ```
@@ -503,27 +494,29 @@ function randomHexColor() {
 
 ```js
 function randomHexColor() {
-  let color = Math.floor(Math.random() * 0xFFFFFF).toString(16);
-  return "#" + ("000000" + color).slice(-6);
+  const color = Math.floor(Math.random() * 0xffffff).toString(16);
+  return `#${`000000${color}`.slice(-6)}`;
 }
 ```
 
 方案六：
 
 ```js
-let color = '#' + parseInt(Math.random() * 0x1000000).toString(16).padStart(6, '0')
+const color = `#${Number.parseInt(Math.random() * 0x1000000)
+  .toString(16)
+  .padStart(6, "0")}`;
 ```
 
 方案七：
 
 ```js
 function randomColor() {
-    const r = (Math.floor(Math.random() * 255)).toString(16);
-    const g = (Math.floor(Math.random() * 255)).toString(16);
-    const b = (Math.floor(Math.random() * 255)).toString(16);
-    const a = (Math.random()).toString(16).slice(2, 4);
-    return `#` + r + g + b + a;
-  }
+  const r = Math.floor(Math.random() * 255).toString(16);
+  const g = Math.floor(Math.random() * 255).toString(16);
+  const b = Math.floor(Math.random() * 255).toString(16);
+  const a = Math.random().toString(16).slice(2, 4);
+  return `#${r}${g}${b}${a}`;
+}
 ```
 
 ## 返回给定起止字符串月份中间所有月份
@@ -537,25 +530,23 @@ function getMonths(start, end) {
   while (startDate <= endDate) {
     const year = startDate.getFullYear();
     const month = startDate.getMonth() + 1;
-    const monthStr = `${year}-${month.toString().padStart(2, '0')}`;
+    const monthStr = `${year}-${month.toString().padStart(2, "0")}`;
 
-  	months.push(monthStr)
+    months.push(monthStr);
     startDate.setMonth(month);
   }
-  return months
+  return months;
 }
 ```
 
-
-
 ## 实现Promise的all方法
 
 ```js
 function promiseAll(promiseArr) {
   return new Promise((resolve, reject) => {
-     if (!Array.isArray(promiseArr)) {
-      return reject(new TypeError('arguments should be an array'));
-    }
+    if (!Array.isArray(promiseArr))
+      return reject(new TypeError("arguments should be an array"));
+
     const resArr = [];
     // let count = 0;
     // for (let i = 0; i < promiseArr.length; i++) {
@@ -563,7 +554,7 @@ function promiseAll(promiseArr) {
     //     .then((res) => {
     //       count++;
     //       resArr[i] = res;
-    //       if (count === promiseArr.length) {
+    //       if (count ==== promiseArr.length) {
     //         resolve(resArr);
     //       }
     //     })
@@ -571,53 +562,53 @@ function promiseAll(promiseArr) {
     //       reject(err);
     //     });
     // }
-    promiseArr.forEach((p,i) =>{
-      if(p instanceof Promise){
-          p.then(res => {
+    promiseArr.forEach((p, i) => {
+      if (p instanceof Promise) {
+        p.then((res) => {
           resArr[i] = res;
-          if(resArr.length == i +1) resolve(resArr)
-        }).catch(err => reject(err))
-      }else{
+          if (resArr.length === i + 1) resolve(resArr);
+        }).catch((err) => reject(err));
+      } else {
         resArr[resArr.length] = p;
       }
-    })
-     
+    });
   });
 }
 
 // 使用示例
-let p1 = Promise.resolve(1);
-let p2 = new Promise((resolve, reject) => {
-    setTimeout(() => {
-        resolve(2)
-    }, 2000);
+const p1 = Promise.resolve(1);
+const p2 = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    resolve(2);
+  }, 2000);
 });
-let p3 = Promise.resolve("error");
+const p3 = Promise.resolve("error");
 
-let p = promiseAll([p1, p2, p3])
+const p = promiseAll([p1, p2, p3])
   .then((res) => {
     resolve(res); // [1, 2, "error"]
   })
   .catch((err) => {
     reject(err); // error
   });
-  p.then(res => console.log(res)).catch(err => console.log(err))
+p.then((res) => console.log(res)).catch((err) => console.log(err));
 ```
 
 ## LRU缓存算法
+
 ```js
-//LRU缓存算法: 缓存固定大小，当缓存超出容量时，删除最久未被使用的元素
+// LRU缓存算法: 缓存固定大小，当缓存超出容量时，删除最久未被使用的元素
 class LRUCache {
   constructor(capacity) {
     this.capacity = capacity; // 缓存最大容量
     this.cache = new Map(); // 使用Map来存储key-value
   }
-  //获取缓存中对应key的值，如果不存在则返回-1
+
+  // 获取缓存中对应key的值，如果不存在则返回-1
   get(key) {
     const cache = this.cache;
-    if (!cache.has(key)) {
-      return -1;
-    }
+    if (!cache.has(key)) return -1;
+
     const value = cache.get(key);
     // 将访问的元素删除并重新添加到最前面
     cache.delete(key);
@@ -625,7 +616,7 @@ class LRUCache {
     return value;
   }
 
-  //添加一个元素到缓存中，并在超出容量时删除最久未被使用的元素
+  // 添加一个元素到缓存中，并在超出容量时删除最久未被使用的元素
   put(key, value) {
     const cache = this.cache;
     // 如果key已经存在，则先删除这个节点
@@ -658,11 +649,13 @@ console.log(cache.get(1)); // 返回 -1
 console.log(cache.get(3)); // 返回 3
 console.log(cache.get(4)); // 返回 4
 ```
+
 ## 不使用乘法符号乘法函数
+
 ```js
 //递归
 function multiply(x, y) {
-  if (y === 0) {
+  if (y ==== 0) {
     return 0;
   }
   if (y > 0) {
@@ -675,10 +668,10 @@ function multiply(x, y) {
 //for循环
 function multiply(a, b) {
   let result = 0;
-  for(let i = 0; i < Math.abs(b); i++) {
+  for (let i = 0; i < Math.abs(b); i++) {
     result += Math.abs(a);
   }
-  if(a < 0 && b > 0 || a > 0 && b < 0) {
+  if ((a < 0 && b > 0) || (a > 0 && b < 0)) {
     result = -result;
   }
   return result;
@@ -690,15 +683,14 @@ console.log(multiply(5, -3)); // -15
 console.log(multiply(-5, -3)); // 15
 ```
 
-
 ## 链表反转
 
 ```js
 function reverseLinkedList(head) {
   let prev = null;
   let current = head;
-  while (current !== null) {
-    let next = current.next;
+  while (current !=== null) {
+    const next = current.next;
     current.next = prev;
     prev = current;
     current = next;
@@ -706,7 +698,7 @@ function reverseLinkedList(head) {
   return prev;
 }
 
-//测试
+// 测试
 class Node {
   constructor(value, next = null) {
     this.value = value;
@@ -714,11 +706,11 @@ class Node {
   }
 }
 
-let n1 = new Node(1);
-let n2 = new Node(2);
-let n3 = new Node(3);
-let n4 = new Node(4);
-let n5 = new Node(5);
+const n1 = new Node(1);
+const n2 = new Node(2);
+const n3 = new Node(3);
+const n4 = new Node(4);
+const n5 = new Node(5);
 
 n1.next = n2;
 n2.next = n3;
@@ -735,8 +727,8 @@ printLinkedList(head);
 
 function printLinkedList(head) {
   let current = head;
-  while (current !== null) {
-    process.stdout.write(current.value + " ");
+  while (current !=== null) {
+    process.stdout.write(`${current.value} `);
     current = current.next;
   }
 }
@@ -789,6 +781,7 @@ function postOrderTraversal(root, res = []) {
 ```
 
 :::details 测试
+
 ```js
 /* ------------- 测试 -------------- */
 
@@ -796,7 +789,7 @@ function postOrderTraversal(root, res = []) {
 //   /   \
 //  2     3
 // / \   / \
-//4   5 6   7
+// 4   5 6   7
 const root = new TreeNode(1);
 root.left = new TreeNode(2);
 root.left.left = new TreeNode(4);
@@ -805,13 +798,15 @@ root.right = new TreeNode(3);
 root.right.left = new TreeNode(6);
 root.right.right = new TreeNode(7);
 
-console.log(preOrderTraversal(root));   // [1, 2, 4, 5, 3, 6, 7]
-console.log(inOrderTraversal(root));    // [4, 2, 5, 1, 6, 3, 7]
-console.log(postOrderTraversal(root));  // [4, 5, 2, 6, 7, 3, 1]
+console.log(preOrderTraversal(root)); // [1, 2, 4, 5, 3, 6, 7]
+console.log(inOrderTraversal(root)); // [4, 2, 5, 1, 6, 3, 7]
+console.log(postOrderTraversal(root)); // [4, 5, 2, 6, 7, 3, 1]
 ```
+
 :::
 
 ## 二叉搜索树的插入和查找
+
 ```js
 递归实现：
 
@@ -827,7 +822,7 @@ function BST() {
 
 BST.prototype.insert = function(value) {
   var newNode = new Node(value);
-  if (this.root === null) {
+  if (this.root ==== null) {
     this.root = newNode;
   } else {
     this.insertNode(this.root, newNode);
@@ -836,13 +831,13 @@ BST.prototype.insert = function(value) {
 
 BST.prototype.insertNode = function(node, newNode) {
   if (newNode.value < node.value) {
-    if (node.left === null) {
+    if (node.left ==== null) {
       node.left = newNode;
     } else {
       this.insertNode(node.left, newNode);
     }
   } else {
-    if (node.right === null) {
+    if (node.right ==== null) {
       node.right = newNode;
     } else {
       this.insertNode(node.right, newNode);
@@ -850,12 +845,12 @@ BST.prototype.insertNode = function(node, newNode) {
   }
 };
 
-BST.prototype.search = function(value) { 
-  return this.searchNode(this.root, value); 
+BST.prototype.search = function(value) {
+  return this.searchNode(this.root, value);
 };
 
-BST.prototype.searchNode = function(node, value) { 
-  if (node === null) {
+BST.prototype.searchNode = function(node, value) {
+  if (node ==== null) {
     return false;
   } else if (value < node.value) {
     return this.searchNode(node.left, value);
@@ -880,20 +875,20 @@ function BST() {
 
 BST.prototype.insert = function(value) {
   var newNode = new Node(value);
-  if (this.root === null) {
+  if (this.root ==== null) {
     this.root = newNode;
     return;
   }
   var current = this.root;
-  while (current !== null) {
+  while (current !=== null) {
     if (value < current.value) {
-      if (current.left === null) {
+      if (current.left ==== null) {
         current.left = newNode;
         return;
       }
       current = current.left;
     } else {
-      if (current.right === null) {
+      if (current.right ==== null) {
         current.right = newNode;
         return;
       }
@@ -904,7 +899,7 @@ BST.prototype.insert = function(value) {
 
 BST.prototype.search = function(value) {
   var current = this.root;
-  while (current !== null) {
+  while (current !=== null) {
     if (value < current.value) {
       current = current.left;
     } else if (value > current.value) {
@@ -917,8 +912,6 @@ BST.prototype.search = function(value) {
 };
 ```
 
-
-
 ## 字符串搜索算法
 
 ```javascript
@@ -931,10 +924,10 @@ function kmp(text, pattern) {
   let prefix = Array(m).fill(0);
   let j = 0;
   for (let i = 1; i < m; i++) {
-    while (j > 0 && pattern[j] !== pattern[i]) {
+    while (j > 0 && pattern[j] !=== pattern[i]) {
       j = prefix[j - 1];
     }
-    if (pattern[j] === pattern[i]) {
+    if (pattern[j] ==== pattern[i]) {
       j++;
     }
     prefix[i] = j;
@@ -943,13 +936,13 @@ function kmp(text, pattern) {
   // 匹配文本串和模式串
   j = 0;
   for (let i = 0; i < n; i++) {
-    while (j > 0 && pattern[j] !== text[i]) {
+    while (j > 0 && pattern[j] !=== text[i]) {
       j = prefix[j - 1];
     }
-    if (pattern[j] === text[i]) {
+    if (pattern[j] ==== text[i]) {
       j++;
     }
-    if (j === m) {
+    if (j ==== m) {
       return i - m + 1;
     }
   }
@@ -984,20 +977,19 @@ console.log(index); // 输出7
 
 总之，KMP算法是一种高效的字符串搜索算法，通过利用前缀表来避免不必要的比较，能够快速地查找匹配位置。
 
-
 ## 数字转中文
 
 **方法一：**
+
 ```js
 function numberToChinese(num, upper = false) {
-  if (!/^(\-|\+)?\d*(\.\d*)?$/.test(num)) {
-    return "不是一个合法的数字！";
-  }
-  let digitMap = {
-    plain:["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"],
-    upper:["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"]
-  }
-  let unitMap = {
+  if (!/^(\-|\+)?\d*(\.\d*)?$/.test(num)) return "不是一个合法的数字！";
+
+  const digitMap = {
+    plain: ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"],
+    upper: ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"],
+  };
+  const unitMap = {
     plain: [
       ["元", "万", "亿"],
       ["", "十", "百", "千"],
@@ -1007,16 +999,16 @@ function numberToChinese(num, upper = false) {
       ["", "拾", "佰", "仟"],
     ],
   };
-  let ustr = upper ? "upper" : "plain"
-  let head = num < 0 ? "负" : "";
-  let unit = unitMap[ustr];
+  const ustr = upper ? "upper" : "plain";
+  const head = num < 0 ? "负" : "";
+  const unit = unitMap[ustr];
   num = Math.abs(num);
   let result = "";
   for (let i = 0; i < unit[0].length && num > 0; i++) {
     let currUnit = "";
     for (let j = 0; j < unit[1].length && num > 0; j++) {
-      let index = num % 10;
-      let d =digitMap[ustr];
+      const index = num % 10;
+      const d = digitMap[ustr];
       currUnit = d + unit[1][j] + currUnit;
       num = Math.floor(num / 10);
     }
@@ -1025,8 +1017,8 @@ function numberToChinese(num, upper = false) {
       unit[0][i] +
       result;
   }
-  let reg = upper ? /億零{0,3}萬/ : /亿零{0,3}万/;
-  let lastres =
+  const reg = upper ? /億零{0,3}萬/ : /亿零{0,3}万/;
+  const lastres =
     head +
     result
       .replace(/(零.)*零元/, "元")
@@ -1038,17 +1030,17 @@ function numberToChinese(num, upper = false) {
 ```
 
 **方法二：**
+
 ```js
 function numberToChinese(num) {
-  if (num === 0) return "零";
-  //数字超过999999999999则报错
-  if (num.toString().length > 12) {
-    throw new Error("数字过大，无法转换");
-  }
+  if (num ==== 0) return "零";
+  // 数字超过999999999999则报错
+  if (num.toString().length > 12) throw new Error("数字过大，无法转换");
+
   let cstr = "";
-  let bunits = ["", "万", "亿"];
-  //把数字转换成字符串，四位一组，从后往前分割
-  let numStr = num
+  const bunits = ["", "万", "亿"];
+  // 把数字转换成字符串，四位一组，从后往前分割
+  const numStr = num
     .toString()
     .split("")
     .reverse()
@@ -1059,64 +1051,62 @@ function numberToChinese(num) {
     .reverse()
     .join("")
     .split(",");
-  let len = numStr.length;
+  const len = numStr.length;
 
   function transform(str) {
     let res = "";
-    let carr = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
-    let units = ["", "十", "百", "千"];
+    const carr = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
+    const units = ["", "十", "百", "千"];
     for (let i = 0; i < str.length; i++) {
-      let digit = +str[i];
-      let char = carr[digit];
-      let unit = units[str.length - i - 1];
-      if (digit === 0) {
-        //如果是0，且不是最后一位不是零，则加零，并且不加单位
-        if (res[res.length - 1] !== "零") {
-          res += char;
-        }
+      const digit = +str[i];
+      const char = carr[digit];
+      const unit = units[str.length - i - 1];
+      if (digit ==== 0) {
+        // 如果是0，且不是最后一位不是零，则加零，并且不加单位
+        if (res[res.length - 1] !=== "零") res += char;
       } else {
         res += char + unit;
       }
     }
-    if (res[res.length - 1] === "零") {
-      res = res.slice(0, res.length - 1);
-    }
+    if (res[res.length - 1] ==== "零") res = res.slice(0, res.length - 1);
+
     return res;
   }
   for (let i = 0; i < len; i++) {
-    let part = numStr[i];
-    let str = transform(part);
-    let unit = str ? bunits[len - i - 1] : "";
+    const part = numStr[i];
+    const str = transform(part);
+    const unit = str ? bunits[len - i - 1] : "";
     cstr += str + unit;
   }
   cstr.startsWith("一十") && (cstr = cstr.slice(1));
   return cstr;
 }
 
-//大写中文
-function bigChinese(str){
-  let  map ={
-    '零':'零',
-    '一':'壹',
-    '二':'贰',
-    '三':'叁',
-    '四':'肆',
-    '五':'伍',
-    '六':'陆',
-    '七':'柒',
-    '八':'捌',
-    '九':'玖',
-    '十':'拾',
-    '百':'佰',
-    '千':'仟',
-    '万':'萬',
-    '亿':'億',
-  }
-  let s = numberToChinese(str)
-  return s.split('').map( item => map[item]).join('')
-
+// 大写中文
+function bigChinese(str) {
+  const map = {
+    零: "零",
+    一: "壹",
+    二: "贰",
+    三: "叁",
+    四: "肆",
+    五: "伍",
+    六: "陆",
+    七: "柒",
+    八: "捌",
+    九: "玖",
+    十: "拾",
+    百: "佰",
+    千: "仟",
+    万: "萬",
+    亿: "億",
+  };
+  const s = numberToChinese(str);
+  return s
+    .split("")
+    .map((item) => map[item])
+    .join("");
 }
-let n = bigChinese(1000100001); //拾億零壹拾萬零壹
-console.log('[ n ]-66', n)
-
-```
\ No newline at end of file
+const n = bigChinese(1000100001); // 拾億零壹拾萬零壹
+console.log("[ n ]-66", n);
+```
diff --git "a/docs/FrontEnd/JavaScript/\346\211\213\345\206\231Promise.md" "b/docs/FrontEnd/JavaScript/\346\211\213\345\206\231Promise.md"
index 89f57502..9ffe36bf 100644
--- "a/docs/FrontEnd/JavaScript/\346\211\213\345\206\231Promise.md"
+++ "b/docs/FrontEnd/JavaScript/\346\211\213\345\206\231Promise.md"
@@ -1,171 +1,163 @@
-
-
 ## 一、声名Promise并绑定this
 
 ```js
 class Promise {
-    // 1.定义三个状态
-    static PENDING = 'pending'
-    static FUFILLED = 'fulfilled'
-    static REJECTED = 'rejected'
-        // 2.构造函数
-    constructor(executor) {
-            //初始态
-            this.status = Promise.PENDING
-            this.value = null
-                // 绑定this
-            executor(this.resolve.bind(this), this.reject.bind(this))
-        }
-        // 3.成功状态
-    resolve(value) {
-            this.status = Promise.FUFILLED
-            this.value = value
-        }
-        // 4.失败状态
-    reject(reason) {
-        this.status = Promise.REJECTED
-        this.reason = reason
-    }
+  // 1.定义三个状态
+  static PENDING = 'pending'
+  static FUFILLED = 'fulfilled'
+  static REJECTED = 'rejected'
+  // 2.构造函数
+  constructor(executor) {
+    // 初始态
+    this.status = Promise.PENDING
+    this.value = null
+    // 绑定this
+    executor(this.resolve.bind(this), this.reject.bind(this))
+  }
+
+  // 3.成功状态
+  resolve(value) {
+    this.status = Promise.FUFILLED
+    this.value = value
+  }
+
+  // 4.失败状态
+  reject(reason) {
+    this.status = Promise.REJECTED
+    this.reason = reason
+  }
 }
 ```
 
 问题一：能多次修改状态
 
 ```html
-<!DOCTYPE html>
-
-<head>
+<!doctype html>
+<html lang="en">
+  <head>
     <title>My-Promise</title>
     <script src="./Promise.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <script>
-        var p1 = new Promise((resolve, reject) => {
-            resolve('大功告成！')
-            reject('一败涂地！')
-        })
-        console.log(p1);
+      var p1 = new Promise((resolve, reject) => {
+        resolve('大功告成！')
+        reject('一败涂地！')
+      })
+      console.log(p1)
     </script>
-</body>
-
+  </body>
 </html>
-```
-
 
+```
 
 <img src="https://gitee.com/GiteeFXJ/picstore/raw/master/codepic/20210708162731.png"/>
 
-
-
-
 ## 二、状态保护与执行者异步捕获
 
 > 改变状态前先判断，让初始状态只能修改一次
 
 ```js
 class Promise {
-    // 1.定义三个状态
-    static PENDING = 'pending'
-    static FUFILLED = 'fulfilled'
-    static REJECTED = 'rejected'
-        // 2.构造函数
-    constructor(executor) {
-            //初始态
-            this.status = Promise.PENDING
-            this.value = null
-                // 绑定this
-            try {
-                executor(this.resolve.bind(this), this.reject.bind(this))
-            } catch {
-
-            }
-
-        }
-        // 3.成功状态
-    resolve(value) {
-            //判断是不是初始态
-            if (this.status == Promise.PENDING) {
-                this.status = Promise.FUFILLED
-                this.value = value
-            }
+  // 1.定义三个状态
+  static PENDING = 'pending'
+  static FUFILLED = 'fulfilled'
+  static REJECTED = 'rejected'
+  // 2.构造函数
+  constructor(executor) {
+    // 初始态
+    this.status = Promise.PENDING
+    this.value = null
+    // 绑定this
+    try {
+      executor(this.resolve.bind(this), this.reject.bind(this))
+    }
+    catch {
 
-        }
-        // 4.失败状态
-    reject(reason) {
-        //判断是不是初始态
-        if (this.status == Promise.PENDING) {
-            this.status = Promise.REJECTED
-            this.reason = reason
-        }
     }
+  }
+
+  // 3.成功状态
+  resolve(value) {
+    // 判断是不是初始态
+    if (this.status === Promise.PENDING) {
+      this.status = Promise.FUFILLED
+      this.value = value
+    }
+  }
+
+  // 4.失败状态
+  reject(reason) {
+    // 判断是不是初始态
+    if (this.status === Promise.PENDING) {
+      this.status = Promise.REJECTED
+      this.reason = reason
+    }
+  }
 }
 ```
 
-
 ## 三、then方法构建
 
 ```js
  then(onFulfilled, onRejected) {
-        if (typeof onFulfilled !== 'function') {
+        if (typeof onFulfilled !=== 'function') {
             onFulfilled = () => {}
         }
-        if (typeof onRejected !== 'function') {
+        if (typeof onRejected !=== 'function') {
             onRejected = () => {}
         }
-        if (this.status == Promise.FUFILLED) {
+        if (this.status === Promise.FUFILLED) {
             onFulfilled(this.value)
         }
-        if (this.status == Promise.REJECTED) {
+        if (this.status === Promise.REJECTED) {
             onRejected(this.value)
         }
     }
 ```
 
-
-
 ## 四、实现then异步
 
 ```js
-if (this.status == Promise.FUFILLED) {
-    setTimeout(() => {
-        try {
-            onFulfilled(this.value)
-        } catch (error) {
-            onRejected(error)
-        }
-    });
+if (this.status === Promise.FUFILLED) {
+  setTimeout(() => {
+    try {
+      onFulfilled(this.value)
+    }
+    catch (error) {
+      onRejected(error)
+    }
+  })
+}
+if (this.status === Promise.REJECTED) {
+  setTimeout(() => {
+    try {
+      onRejected(this.value)
+    }
+    catch (error) {
+      onRejected(error)
+    }
+  })
 }
-if (this.status == Promise.REJECTED) {
-    setTimeout(() => {
-        try {
-            onRejected(this.value)
-        } catch (error) {
-            onRejected(error)
-        }
-    });
-        }
 ```
 
-
-
 ## 五、解决同步代码需要等待执行问题
 
 ```js
-var p1 = new Promise((resolve, reject) => {
-        // resolve('大功告成！')S
-        setTimeout(() => {
-            reject('一败涂地！')
-            console.log('反败为胜！');
-        }, 100)
-
-    })
-    p1.then((value) => {
-        console.log(value);
-    }, (reason) => {
-        console.log(reason);
-    })
-    console.log('同步代码');
+const p1 = new Promise((resolve, reject) => {
+  // resolve('大功告成！')S
+  setTimeout(() => {
+    reject('一败涂地！')
+    console.log('反败为胜！')
+  }, 100)
+})
+p1.then((value) => {
+  console.log(value)
+}, (reason) => {
+  console.log(reason)
+})
+console.log('同步代码')
 
 ```
 
@@ -174,9 +166,9 @@ var p1 = new Promise((resolve, reject) => {
 > 一败涂地！
 > 反败为胜！
 
-````js
+```js
     resolve(value) {
-        if (this.status == Promise.PENDING) {
+        if (this.status === Promise.PENDING) {
             this.status = Promise.FULFILLED;
             this.value = value;
             setTimeout(() => {
@@ -187,7 +179,7 @@ var p1 = new Promise((resolve, reject) => {
         }
     }
     reject(value) {
-        if (this.status == Promise.PENDING) {
+        if (this.status === Promise.PENDING) {
             this.status = Promise.REJECTED;
             this.value = value;
             setTimeout(() => {
@@ -197,7 +189,7 @@ var p1 = new Promise((resolve, reject) => {
             });
         }
     }
-````
+```
 
 > 解决后输出：
 > 同步代码
@@ -206,37 +198,37 @@ var p1 = new Promise((resolve, reject) => {
 
 ## 六、then的链式操作
 
->  **注意点：**
+> **注意点：**
 >
 > 1. then返回的时Promise，Promise需要改变
 > 2. 之前的Promise状态并不会影响之后的Promise状态
 
-````js
-let p = new Promise((resolve, reject) => {
-        resolve("大功告成！");
-        // reject("一败涂地！");
-        console.log("状态绑定成功！");
-    })
-    p.then(
-            value => {
-                console.log(value);
-                return "马到功成！";
-            },
-            reason => {
-                console.log(reason);
-                return '优胜劣败！'
-            }
-        )
-        .then(
-            value => {
-                console.log(value);
-            },
-            reason => {
-                console.log(reason);
-            }
-        );
-    console.log("同步代码");
-````
+```js
+const p = new Promise((resolve, reject) => {
+  resolve('大功告成！')
+  // reject("一败涂地！");
+  console.log('状态绑定成功！')
+})
+p.then(
+  (value) => {
+    console.log(value)
+    return '马到功成！'
+  },
+  (reason) => {
+    console.log(reason)
+    return '优胜劣败！'
+  }
+)
+  .then(
+    (value) => {
+      console.log(value)
+    },
+    (reason) => {
+      console.log(reason)
+    }
+  )
+console.log('同步代码')
+```
 
 ```js
 then(onFulfilled, onRejected) {
@@ -249,7 +241,7 @@ then(onFulfilled, onRejected) {
         onRejected = value => value;
     }
     return new Promise((resolve, reject) => {
-        if (this.status == Promise.PENDING) {
+        if (this.status === Promise.PENDING) {
             this.callbacks.push({
                 onFulfilled: value => {
                     try {
@@ -263,13 +255,13 @@ then(onFulfilled, onRejected) {
                     try {
                         let result = onRejected(value);
                         resolve(result);
-                    } catch (error) { 
+                    } catch (error) {
                         reject(error);
                     }
                 }
             });
         }
-        if (this.status == Promise.FULFILLED) {
+        if (this.status === Promise.FULFILLED) {
             setTimeout(() => {
                 try {
                     let result = onFulfilled(this.value);
@@ -279,7 +271,7 @@ then(onFulfilled, onRejected) {
                 }
             });
         }
-        if (this.status == Promise.REJECTED) {
+        if (this.status === Promise.REJECTED) {
             setTimeout(() => {
                 try {
                     let result = onRejected(this.value);
@@ -297,49 +289,43 @@ then(onFulfilled, onRejected) {
 
 <img src="https://gitee.com/GiteeFXJ/picstore/raw/master/codepic/20210708174000.png"/>
 
-
-
-
-
 ## 七、返回值的判断与处理
 
 > 判断并分别处理返回值为Promise、普通值的情况
 
 ```js
-if (this.status == Promise.FULFILLED) {
-    setTimeout(() => {
-        try {
-            let result = onFulfilled(this.value);
-            // 判断并处理返回值 
-            if (result instanceof Promise) {
-                result.then(resolve, reject);
-            } else {
-                resolve(result);
-            }
-        } catch (error) {
-            reject(error);
-        }
-    });
+if (this.status === Promise.FULFILLED) {
+  setTimeout(() => {
+    try {
+      const result = onFulfilled(this.value)
+      // 判断并处理返回值
+      if (result instanceof Promise)
+        result.then(resolve, reject)
+      else
+        resolve(result)
+    }
+    catch (error) {
+      reject(error)
+    }
+  })
 }
-if (this.status == Promise.REJECTED) {
-    setTimeout(() => {
-        try {
-            let result = onRejected(this.value);
-            // 判断并处理返回值 
-            if (result instanceof Promise) {
-                result.then(resolve, reject);
-            } else {
-                resolve(result);
-            }
-        } catch (error) {
-            reject(error);
-        }
-    });
+if (this.status === Promise.REJECTED) {
+  setTimeout(() => {
+    try {
+      const result = onRejected(this.value)
+      // 判断并处理返回值
+      if (result instanceof Promise)
+        result.then(resolve, reject)
+      else
+        resolve(result)
+    }
+    catch (error) {
+      reject(error)
+    }
+  })
 }
 ```
 
-
-
 ## 八、代码优化及复用
 
 ```js
@@ -351,7 +337,7 @@ then(onFulfilled, onRejected) {
         onRejected = value => value;
     }
     return new Promise((resolve, reject) => {
-        if (this.status == Promise.PENDING) {
+        if (this.status === Promise.PENDING) {
             this.callbacks.push({
                 onFulfilled: value => {
                     // try {
@@ -374,7 +360,7 @@ then(onFulfilled, onRejected) {
                 }
             });
         }
-        if (this.status == Promise.FULFILLED) {
+        if (this.status === Promise.FULFILLED) {
             setTimeout(() => {
                 // try {
                 //     let result = onFulfilled(this.value);
@@ -390,7 +376,7 @@ then(onFulfilled, onRejected) {
                 this.parse(onFulfilled(this.value), resolve, reject);
             });
         }
-        if (this.status == Promise.REJECTED) {
+        if (this.status === Promise.REJECTED) {
             setTimeout(() => {
                 // try {
                 //     let result = onRejected(this.value);
@@ -421,15 +407,13 @@ parse(result, resolve, reject) {
 }
 ```
 
-
-
 ## 九、返回类型约束
 
 > 当前Promise不能返回自己
 >
->  ````js
+> ```js
 > let p = promise.then(value => return p) //原生的会报错:TypeError
->  ````
+> ```
 
 ```js
 then(onFulfilled, onRejected) {
@@ -440,7 +424,7 @@ then(onFulfilled, onRejected) {
         onRejected = value => value;
     }
     let promise = new Promise((resolve, reject) => {
-        if (this.status == Promise.PENDING) {
+        if (this.status === Promise.PENDING) {
             this.callbacks.push({
                 onFulfilled: value => {
                     this.parse(promise, onFulfilled(this.value), resolve, reject);
@@ -450,12 +434,12 @@ then(onFulfilled, onRejected) {
                 }
             });
         }
-        if (this.status == Promise.FULFILLED) {
+        if (this.status === Promise.FULFILLED) {
             setTimeout(() => {
                 this.parse(promise, onFulfilled(this.value), resolve, reject);
             });
         }
-        if (this.status == Promise.REJECTED) {
+        if (this.status === Promise.REJECTED) {
             setTimeout(() => {
                 this.parse(promise, onRejected(this.value), resolve, reject);
             });
@@ -464,7 +448,7 @@ then(onFulfilled, onRejected) {
     return promise;
 }
 parse(promise, result, resolve, reject) {
-    if (promise == result) {
+    if (promise === result) {
         throw new TypeError("Chaining cycle detected for promise");
     }
     try {
@@ -479,8 +463,6 @@ parse(promise, result, resolve, reject) {
 }
 ```
 
-
-
 ## 十、实现resolve和reject
 
 ```js
@@ -500,8 +482,6 @@ parse(promise, result, resolve, reject) {
     }
 ```
 
-
-
 ## 十一、Promise.all()实现
 
 ```js
@@ -513,7 +493,7 @@ static all(promises) {
                 value => {
                     resolves.push(value);
                     //判断数组长度，来看是否全部成功
-                    if (resolves.length == promises.length) {
+                    if (resolves.length === promises.length) {
                         resolve(resolves);
                     }
                 },
@@ -529,32 +509,30 @@ static all(promises) {
 **测试**
 
 ```js
-let p1 = new Promise((resolve, reject) => {
-        resolve("成功");
-    });
-let p2 = new Promise((resolve, reject) => {
-    reject("失败");
-});
-//所有成功才会执行成功的回调函数
-let promises = Promise.all([p1, p2]).then(
-    promises => {
-        console.log('resolve:', promises);
-    },
-    reason => {
-        console.log('reject:', reason);
-    }
-);
+const p1 = new Promise((resolve, reject) => {
+  resolve('成功')
+})
+const p2 = new Promise((resolve, reject) => {
+  reject('失败')
+})
+// 所有成功才会执行成功的回调函数
+const promises = Promise.all([p1, p2]).then(
+  (promises) => {
+    console.log('resolve:', promises)
+  },
+  (reason) => {
+    console.log('reject:', reason)
+  }
+)
 ```
 
-
-
 ## 十二、实现Promise.race()
 
-````js
-const p = Promise.race([p1, p2, p3]);
-````
+```js
+const p = Promise.race([p1, p2, p3])
+```
 
->只要`p1`、`p2`、`p3`之中有一个实例率先改变状态，`p`的状态就跟着改变；率先改变的 Promise 实例的返回值，就传递给`p`的回调函数。 **(谁快用谁)**
+> 只要`p1`、`p2`、`p3`之中有一个实例率先改变状态，`p`的状态就跟着改变；率先改变的 Promise 实例的返回值，就传递给`p`的回调函数。 **(谁快用谁)**
 
 ```js
  static race(promises) {
@@ -568,177 +546,177 @@ const p = Promise.race([p1, p2, p3]);
     }
 ```
 
-
-
 **测试**
 
 ```js
- let p1 = new Promise(resolve => {
-        setInterval(() => {
-            resolve("成功1");
-        }, 1000);
-    });
-let p2 = new Promise(resolve => {
-    setInterval(() => {
-        resolve("成功2");
-    }, 500);
-});
-let promises = Promise.race([p1, p2]).then(
-    promises => {
-        console.log(promises);
-    },
-    reason => {
-        console.log(reason);
-    }
-);
+const p1 = new Promise((resolve) => {
+  setInterval(() => {
+    resolve('成功1')
+  }, 1000)
+})
+const p2 = new Promise((resolve) => {
+  setInterval(() => {
+    resolve('成功2')
+  }, 500)
+})
+const promises = Promise.race([p1, p2]).then(
+  (promises) => {
+    console.log(promises)
+  },
+  (reason) => {
+    console.log(reason)
+  }
+)
 ```
 
 ## 十三、完整代码
 
 ```js
 class Promise {
-    // 1.定义三个状态
-    static PENDING = 'pending'
-    static FUFILLED = 'fulfilled'
-    static REJECTED = 'rejected'
-
-    // 2.构造函数
-    constructor(executor) {
-        //初始态
-        this.status = Promise.PENDING
-        this.value = null
-        this.callbacks = []
-        // 绑定this    
-        try {
-            executor(this.resolve.bind(this), this.reject.bind(this))
-        } catch (error) {
-
-        }
+  // 1.定义三个状态
+  static PENDING = 'pending'
+  static FUFILLED = 'fulfilled'
+  static REJECTED = 'rejected'
+
+  // 2.构造函数
+  constructor(executor) {
+    // 初始态
+    this.status = Promise.PENDING
+    this.value = null
+    this.callbacks = []
+    // 绑定this
+    try {
+      executor(this.resolve.bind(this), this.reject.bind(this))
+    }
+    catch (error) {
 
     }
-    //3.resolve改变状态并执行回调函数
-    resolve(value) {
-        if (this.status == Promise.PENDING) {
-            this.status = Promise.FULFILLED;
-            this.value = value;
-            setTimeout(() => {
-                //遍历回调函数数组，传值并执行onFulfilled函数
-                this.callbacks.map(callback => {
-                    callback.onFulfilled(value);
-                });
-            });
-        }
+  }
+
+  // 3.resolve改变状态并执行回调函数
+  resolve(value) {
+    if (this.status === Promise.PENDING) {
+      this.status = Promise.FULFILLED
+      this.value = value
+      setTimeout(() => {
+        // 遍历回调函数数组，传值并执行onFulfilled函数
+        this.callbacks.map((callback) => {
+          callback.onFulfilled(value)
+        })
+      })
     }
-  //3. reject改变状态并执行回调函数
-    reject(value) {
-        if (this.status == Promise.PENDING) {
-            this.status = Promise.REJECTED;
-            this.value = value;
-             setTimeout(() => {
-                 //遍历回调函数数组，传值并执行onRejected函数
-            this.callbacks.map(callback => {
-                callback.onRejected(value);
-          	  });
-            });
-        }
+  }
+
+  // 3. reject改变状态并执行回调函数
+  reject(value) {
+    if (this.status === Promise.PENDING) {
+      this.status = Promise.REJECTED
+      this.value = value
+      setTimeout(() => {
+        // 遍历回调函数数组，传值并执行onRejected函数
+        this.callbacks.map((callback) => {
+          callback.onRejected(value)
+          	  })
+      })
     }
+  }
+
+  // then方法
+  then(onFulfilled, onRejected) {
+    // 判断参数是否为函数
+    if (typeof onFulfilled != 'function')
+      onFulfilled = value => value
+
+    if (typeof onRejected != 'function')
+      onRejected = value => value
+
+    const promise = new Promise((resolve, reject) => {
+      // 初始态把回调函数存入数组
+      if (this.status === Promise.PENDING) {
+        this.callbacks.push({
+          onFulfilled: (value) => {
+            this.parse(promise, onFulfilled(this.value), resolve, reject)
+          },
+          onRejected: (value) => {
+            this.parse(promise, onRejected(this.value), resolve, reject)
+          }
+        })
+      }
+      // 成功
+      if (this.status === Promise.FULFILLED) {
+        setTimeout(() => {
+          this.parse(promise, onFulfilled(this.value), resolve, reject)
+        })
+      }
+      // 失败
+      if (this.status === Promise.REJECTED) {
+        setTimeout(() => {
+          this.parse(promise, onRejected(this.value), resolve, reject)
+        })
+      }
+    })
+    // 解决链式调用
+    return promise
+  }
 
+  parse(promise, result, resolve, reject) {
+    // 不能返回自身promise
+    if (promise === result)
+      throw new TypeError('Chaining cycle detected for promise')
 
-//then方法
-    then(onFulfilled, onRejected) {
-        //判断参数是否为函数
-        if (typeof onFulfilled != "function") {
-            onFulfilled = value => value;
-        }
-        if (typeof onRejected != "function") {
-            onRejected = value => value;
-        }
-        let promise = new Promise((resolve, reject) => {
-            //初始态把回调函数存入数组
-            if (this.status == Promise.PENDING) {
-                this.callbacks.push({
-                    onFulfilled: value => {
-                        this.parse(promise, onFulfilled(this.value), resolve, reject);
-                    },
-                    onRejected: value => {
-                        this.parse(promise, onRejected(this.value), resolve, reject);
-                    }
-                });
-            }
-            //成功
-            if (this.status == Promise.FULFILLED) {
-                setTimeout(() => {
-                    this.parse(promise, onFulfilled(this.value), resolve, reject);
-                });
-            }
-            //失败
-            if (this.status == Promise.REJECTED) {
-                setTimeout(() => {
-                    this.parse(promise, onRejected(this.value), resolve, reject);
-                });
-            }
-        });
-        //解决链式调用
-        return promise;
-    }
-    parse(promise, result, resolve, reject) {
-        //不能返回自身promise
-        if (promise == result) {
-            throw new TypeError("Chaining cycle detected for promise");
-        }
-        try {
-            if (result instanceof Promise) {
-                result.then(resolve, reject);
-            } else {
-                resolve(result);
-            }
-        } catch (error) {
-            reject(error);
-        }
-    }
-    static resolve(value) {
-        return new Promise((resolve, reject) => {
-            if (value instanceof Promise) {
-                value.then(resolve, reject);
-            } else {
-                resolve(value);
-            }
-        });
+    try {
+      if (result instanceof Promise)
+        result.then(resolve, reject)
+      else
+        resolve(result)
     }
-    static reject(reason) {
-        return new Promise((_, reject) => {
-            reject(reason);
-        });
+    catch (error) {
+      reject(error)
     }
+  }
 
-    static all(promises) {
-        let resolves = [];
-        return new Promise((resolve, reject) => {
-            //遍历每一个promise并执行
-            promises.forEach((promise, index) => {
-                promise.then(
-                    value => {
-                        resolves.push(value);//保存
-                        if (resolves.length == promises.length) {
-                            resolve(resolves);
-                        }
-                    },
-                    reason => {
-                        reject(reason);
-                    }
-                );
-            });
-        });
-    }
-    static race(promises) {
-        return new Promise((resolve, reject) => {
-            promises.map(promise => {
-                promise.then(value => {
-                    resolve(value);
-                });
-            });
-        });
-    }
+  static resolve(value) {
+    return new Promise((resolve, reject) => {
+      if (value instanceof Promise)
+        value.then(resolve, reject)
+      else
+        resolve(value)
+    })
+  }
+
+  static reject(reason) {
+    return new Promise((_, reject) => {
+      reject(reason)
+    })
+  }
+
+  static all(promises) {
+    const resolves = []
+    return new Promise((resolve, reject) => {
+      // 遍历每一个promise并执行
+      promises.forEach((promise, index) => {
+        promise.then(
+          (value) => {
+            resolves.push(value)// 保存
+            if (resolves.length === promises.length)
+              resolve(resolves)
+          },
+          (reason) => {
+            reject(reason)
+          }
+        )
+      })
+    })
+  }
+
+  static race(promises) {
+    return new Promise((resolve, reject) => {
+      promises.map((promise) => {
+        promise.then((value) => {
+          resolve(value)
+        })
+      })
+    })
+  }
 }
 ```
-
diff --git "a/docs/FrontEnd/JavaScript/\346\225\260\346\215\256\345\216\273\351\207\215.md" "b/docs/FrontEnd/JavaScript/\346\225\260\346\215\256\345\216\273\351\207\215.md"
index 5f8d07c5..121a870b 100644
--- "a/docs/FrontEnd/JavaScript/\346\225\260\346\215\256\345\216\273\351\207\215.md"
+++ "b/docs/FrontEnd/JavaScript/\346\225\260\346\215\256\345\216\273\351\207\215.md"
@@ -1,14 +1,14 @@
-
 > 去重的核心：要根据实际业务怎么定义'重'
 
 ## 基本数据类型
+
 ```js
 const arr = [1, 2, 1, 3];
 //用Set去重
 const uniqueArr = [...new Set(arr)]; // [1, 2, 3]
 //用filter去重
 const uniqueArr = arr => arr.filter((item, index) => arr.indexOf(item) === index); // 相同的元素只保留一个
- 
+
 //indexOf
 const uniqueArr = (arr)  =>{
    let newArr = [];
@@ -40,27 +40,32 @@ for (let i = 0; i < arr.length; i++) {
 }
 console.log(uniqueArr); // [1, 2, 3]
 ```
+
 如果要去重一个包含不同数据类型的数组，需要添加一些额外的检查。
 
 Date类型转换成Unix时间戳，RegExp类型转换成字符串。
 
 ```js
-const arr = ["a", "b", 1, 1, "a", /abc/, /abc/, new Date(), new Date()];
+const arr = ['a', 'b', 1, 1, 'a', /abc/, /abc/, new Date(), new Date()]
 
-const isObject = val => Object(val) === val;//判断是否为对象
-const uniqueArr = (arr) =>[...new Set(arr.map(item => {
- if (!isObject(item))  return item //不是
-    if (item instanceof Date) {
-      return item.getTime();
-    } else if (item instanceof RegExp) {
-      return item.toString();
-    }
-}))];
- uniqueArr(arr); // ['a', 'b', 1, '/abc/', 1678519417983]
+const isObject = val => Object(val) === val// 判断是否为对象
+function uniqueArr(arr) {
+  return [...new Set(arr.map((item) => {
+    if (!isObject(item))
+      return item // 不是
+    if (item instanceof Date)
+      return item.getTime()
+    else if (item instanceof RegExp)
+      return item.toString()
+  }))]
+}
+uniqueArr(arr) // ['a', 'b', 1, '/abc/', 1678519417983]
 ```
+
 ## 对象数组去重
 
 ### 对象相同比较
+
 **基本思路**：
 
 1. 首先判断两个值的类型是否相同，如果不同，则返回 `false`；
@@ -68,7 +73,6 @@ const uniqueArr = (arr) =>[...new Set(arr.map(item => {
 3. 处理数组类型，对比项的数量，再递归对比每个项是否相等；
 4. 处理朴素对象，对比键的数量，相等则再递归对比值是否相等。
 
-
 ```javascript
 function isEqual(obj1, obj2) {
   const equalType = (val1,val2) => Object.prototype.toString.call(val1)!== Object.prototype.toString.call(val2)
@@ -121,6 +125,7 @@ function isEqual(obj1, obj2) {
 ```
 
 :::details **测试示例**
+
 ```js
 // 示例
 const obj1 = {
@@ -134,12 +139,12 @@ const obj1 = {
       street: 'Xinxi Road',
       number: 888
     },
-    date:new Date('2022-02-13'),
-    func:function(){
+    date: new Date('2022-02-13'),
+    func() {
       console.log(1)
     }
   }
-};
+}
 const obj2 = {
   name: 'Tom',
   age: 18,
@@ -151,16 +156,16 @@ const obj2 = {
       street: 'Xinxi Road',
       number: 888
     },
-    date:new Date('2022-02-13'),
-    func:function(){
+    date: new Date('2022-02-13'),
+    func() {
       console.log(1)
     }
   }
-};
+}
 const obj3 = {
   name: 'Tom',
   age: 18,
-  hobby: ['reading', 'music','dance'],
+  hobby: ['reading', 'music', 'dance'],
   address: {
     province: 'Guangdong',
     city: 'Shenzhen',
@@ -168,19 +173,19 @@ const obj3 = {
       street: 'Xinxi Road',
       number: 888
     },
-    //date:new Date('2022-02-13'),
+    // date:new Date('2022-02-13'),
     // func:function(){
     //  console.log(1)
-    //}
+    // }
   }
-};
+}
 isEqual(obj1, obj2) // true
 isEqual(obj1, obj3) // false
 isEqual(undefined, null)// false
 isEqual(null, null)
 ```
-:::
 
+:::
 
 ### 对象数组去重
 
@@ -191,7 +196,7 @@ const arr = [1,2,3,1]
 //深拷贝
 function deepClone(obj){
   if(obj === null || typeof obj !== 'object') return obj
-  if(obj.constructor === Date) return new Date(obj); 
+  if(obj.constructor === Date) return new Date(obj);
   if(obj.constructor === RegExp) return new RegExp(obj);
   let newObj = Array.isArray(obj) ? [] : {}
   for(let key in obj){
@@ -215,97 +220,103 @@ const uniqueArr(arr){
 ```
 
 :::details 测试数据
+
 ```js
-let objArr1 = [
-  {a:1,b:2},
-  {a:2,b:3},
-  {b:2,a:1},
-  {a:3,b:2},
-  [1,2,3],
-  [4,5,6],
-  [2,1,3],
+const objArr1 = [
+  { a: 1, b: 2 },
+  { a: 2, b: 3 },
+  { b: 2, a: 1 },
+  { a: 3, b: 2 },
+  [1, 2, 3],
+  [4, 5, 6],
+  [2, 1, 3],
   {
-  name: 'Tom',
-  age: 18,
-  hobby: ['reading', 'music'],
-  address: {
-    province: 'Guangdong',
-    city: 'Shenzhen',
-    detail: {
-      street: 'Xinxi Road',
-      number: 888
-    },
-    date:new Date('2022-02-13'),
-    func:function(){
-      console.log(1)
+    name: 'Tom',
+    age: 18,
+    hobby: ['reading', 'music'],
+    address: {
+      province: 'Guangdong',
+      city: 'Shenzhen',
+      detail: {
+        street: 'Xinxi Road',
+        number: 888
+      },
+      date: new Date('2022-02-13'),
+      func() {
+        console.log(1)
+      }
     }
-  }
-},{
-  name: 'Tom',
-  age: 18,
-  hobby: ['reading', 'music'],
-  address: {
-    province: 'Guangdong',
-    city: 'Shenzhen',
-    detail: {
-      street: 'Xinxi Road',
-      number: 888
-    },
-    date:new Date('2022-02-13'),
-    func:function(){
-      console.log(1)
+  },
+  {
+    name: 'Tom',
+    age: 18,
+    hobby: ['reading', 'music'],
+    address: {
+      province: 'Guangdong',
+      city: 'Shenzhen',
+      detail: {
+        street: 'Xinxi Road',
+        number: 888
+      },
+      date: new Date('2022-02-13'),
+      func() {
+        console.log(1)
+      }
     }
-  }
-},{
-  name: 'Tom',
-  age: 18,
-  hobby: ['reading', 'music','dance'],
-  address: {
-    province: 'Guangdong',
-    city: 'Shenzhen',
-    detail: {
-      street: 'Xinxi Road',
-      number: 888
-    },
-    //date:new Date('2022-02-13'),
+  },
+  {
+    name: 'Tom',
+    age: 18,
+    hobby: ['reading', 'music', 'dance'],
+    address: {
+      province: 'Guangdong',
+      city: 'Shenzhen',
+      detail: {
+        street: 'Xinxi Road',
+        number: 888
+      },
+    // date:new Date('2022-02-13'),
     // func:function(){
     //  console.log(1)
-    //}
-  }
-},{
-  name: 'Tom',
-  age: 18,
-  hobby: ['reading', 'music','dance'],
-  address: {
-    province: 'Guangdong',
-    city: 'Shenzhen',
-    detail: {
-      street: 'Xinxi Road',
-      number: 888
-    },
-    date:new Date('2022-02-13'),
-    func:function(){
-     console.log(2)
+    // }
     }
-  }
-},{
-  name: 'Tom',
-  age: 18,
-  hobby: ['reading', 'music','dance'],
-  address: {
-    province: 'Guangdong',
-    city: 'Shenzhen',
-    detail: {
-      street: 'Xinxi Road',
-      number: 888
-    },
-    date:new Date('2022-02-11'),
-    func:function(){
-     console.log(2)
+  },
+  {
+    name: 'Tom',
+    age: 18,
+    hobby: ['reading', 'music', 'dance'],
+    address: {
+      province: 'Guangdong',
+      city: 'Shenzhen',
+      detail: {
+        street: 'Xinxi Road',
+        number: 888
+      },
+      date: new Date('2022-02-13'),
+      func() {
+        console.log(2)
+      }
+    }
+  },
+  {
+    name: 'Tom',
+    age: 18,
+    hobby: ['reading', 'music', 'dance'],
+    address: {
+      province: 'Guangdong',
+      city: 'Shenzhen',
+      detail: {
+        street: 'Xinxi Road',
+        number: 888
+      },
+      date: new Date('2022-02-11'),
+      func() {
+        console.log(2)
+      }
     }
   }
-}
 ]
-//uniqueArr(objArr1)
+// uniqueArr(objArr1)
 ```
-:::
\ No newline at end of file
+
+:::
diff --git "a/docs/FrontEnd/JavaScript/\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.md" "b/docs/FrontEnd/JavaScript/\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.md"
index a0e804ed..fa589814 100644
--- "a/docs/FrontEnd/JavaScript/\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.md"
+++ "b/docs/FrontEnd/JavaScript/\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.md"
@@ -1,4 +1,3 @@
-
 # JS常用的求交集、并集、差集的方法
 
 ## 普通数组
@@ -6,8 +5,8 @@
 > 示例数组
 
 ```js
-let a = [1, 2, 3];
-let b = [4, 3, 2];
+const a = [1, 2, 3]
+const b = [4, 3, 2]
 ```
 
 ### 一、并集(A∪B)
@@ -29,12 +28,10 @@ const union = (arr1,arr2) => arr1.concat(arr2.filter(val => !arr1.includes(val))
 const union = (arr1,arr2) => arr1.concat(arr2.filter(val=> arr2.indexOf(val) === -1));
 ```
 
-
-
 ### 二、交集（*A*∩B）
 
 ```js
-let intersection  = (arr1,arr2) => [...new Set(arr1.filter(val => arr2.includes(val)))];//[2, NaN]
+const intersection = (arr1, arr2) => [...new Set(arr1.filter(val => arr2.includes(val)))]// [2, NaN]
 ```
 
 ### 三、差集(A-B)
@@ -42,8 +39,8 @@ let intersection  = (arr1,arr2) => [...new Set(arr1.filter(val => arr2.includes(
 ```js
 // 差集（a 相对于 b 的差集） 属于a不属于b的元素
 let difference  = (arr1,arr2) => [...new Set(arr1.filter(val => !arr2.includes(val)))];
- 
-//返回a与b数组区别的集合（交集取反） 
+
+//返回a与b数组区别的集合（交集取反）
 let a = [1, 2, 3];
 let b = [2, 4, 5];
 let difference = a.concat(b).filter(v => !a.includes(v) || !b.includes(v));
@@ -53,32 +50,31 @@ console.log(difference)// [1,3,4,5]
 //方法二：先转为 Set
 let aSet = new Set(a);
 let bSet = new Set(b)
-//  
+//
 let difference = Array.from(new Set(a.concat(b).filter(v => !aSet.has(v) || !bSet.has(v))));
 console.log(difference) // [1,3,4,5]
 
 ```
 
-
 ## 对象数组
 
 > 示例数组
 
 ```js
-let a=[
-    {id:'01',name:'product01'},
-    {id:'02',name:'product02'},
-    {id:'03',name:'product03'},
-    {id:'04',name:'product04'},
-    {id:'05',name:'product05'}
-    ];
-let b=[
-    {id:'03',name:'product03'},
-    {id:'06',name:'product06'},
-    {id:'07',name:'product07'},
-    {id:'08',name:'product08'},
-
-];
+const a = [
+  { id: '01', name: 'product01' },
+  { id: '02', name: 'product02' },
+  { id: '03', name: 'product03' },
+  { id: '04', name: 'product04' },
+  { id: '05', name: 'product05' }
+]
+const b = [
+  { id: '03', name: 'product03' },
+  { id: '06', name: 'product06' },
+  { id: '07', name: 'product07' },
+  { id: '08', name: 'product08' },
+
+]
 
 ```
 
@@ -112,15 +108,13 @@ const union = (arr1,arr2)=>{
 }
   //简化
   //判断目标在数组中相同的 id 是否存在
-const isExist = (arr,target,attr) => arr.findIndex(item => item[attr] == target[attr]) != -1 
+const isExist = (arr,target,attr) => arr.findIndex(item => item[attr] == target[attr]) != -1
 //合并数组并遍历，判断新数组不存在当前项，则收集
 const union = (arr1,arr2) =>  arr1.concat(arr2).reduce((pre,cur) => isExist(pre,cur,'id') ? pre  : [...pre,cur],[])
 ```
 
-
 ### 二、交集（*A*∩B）
 
-
 ```js
 //方法一：
 const intersection = (arr1,arr2) => {
@@ -136,5 +130,5 @@ const intersection = (arr1,arr2) =>  arr1.reduce((pre,cur) => arr2.findIndex(ite
 ```js
 //找出arr1数组中，arr2数组没有的对象
  const diff = (arr1, arr2) =>  arr1.filter(i => arr2.every(j => i.id !== j.id))
- const diff = (arr1, arr2) =>  arr1.filter(i => !arr2.some(j => i.id === j.id))
-```
\ No newline at end of file
+//  const diff = (arr1, arr2) =>  arr1.filter(i => !arr2.some(j => i.id === j.id))
+```
diff --git "a/docs/FrontEnd/JavaScript/\346\226\207\344\273\266\347\263\273\347\273\237.md" "b/docs/FrontEnd/JavaScript/\346\226\207\344\273\266\347\263\273\347\273\237.md"
index 65e62423..dc043719 100644
--- "a/docs/FrontEnd/JavaScript/\346\226\207\344\273\266\347\263\273\347\273\237.md"
+++ "b/docs/FrontEnd/JavaScript/\346\226\207\344\273\266\347\263\273\347\273\237.md"
@@ -1,16 +1,17 @@
 ## Blob与 File
+
 ```js
 const blob = new Blob(['1,2,3'])
 const file = new File(['1,2,3'], 'test.txt', { type: 'text/plain' })
 ```
-## ArrayBuffer
-```js
 
+## ArrayBuffer
 
+```js
 const blob = new Blob(['1,2,3'])
 const file = new File(['1,2,3'], 'test.txt', { type: 'text/plain' })
 
-//ArrayBuffer
+// ArrayBuffer
 const blobArrayBuffer = await blob.arrayBuffer()
 const fileArrayBuffer = await file.arrayBuffer()
 
@@ -18,25 +19,27 @@ console.log('[ blobArrayBuffer ]-6', blobArrayBuffer)
 console.log('[ fileArrayBuffer ]-8', fileArrayBuffer)
 ```
 
-
 <DemoWrap pkg="FrontEnd/JavaScript/demo"   path='demo1.vue' >
     <Demo1/>
 </DemoWrap>
 
 ## FileReader
+
 ```js
 const fileReader = new FileReader()
 fileReader.readAsArrayBuffer(file)
 fileReader.onload = (e) => {
   console.log('[ e ]-13', e)
   console.log('[ e.target ]-14', e.target)
-  console.log('[ e.target.result ]-15', e.target?.result  )
-  console.log( e.target?.result === fileArrayBuffer) // false
+  console.log('[ e.target.result ]-15', e.target?.result)
+  console.log(e.target?.result === fileArrayBuffer) // false
 }
 ```
+
 ![2023-02-11-18-18-03](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-02-11-18-18-03.png)
 
 ## DataView
+
 ```js
 const dataView = new DataView(blobArrayBuffer)
 console.log('[ dataView ]-19', dataView)
@@ -44,9 +47,11 @@ console.log('[ dataView.getUint8(0) ]-20', dataView.getUint8(0))
 dataView.setUint8(0, 4)
 console.log('[ dataView.getUint8(0) ]-20', dataView.getUint8(0))
 ```
+
 ![2023-02-11-18-25-32](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-02-11-18-25-32.png)
 
 ## FilePicker
+
 ```js
 const openFilePicker = async (e: any) => {
    const option = {
@@ -64,12 +69,15 @@ const openFilePicker = async (e: any) => {
     }
 }
 ```
+
 <script setup>
 import Demo1 from './demo/demo1.vue';
-import FilePicker from './demo/FilePicker.vue'; 
-import DemoUrl from './demo/DemoUrl.vue'; 
+import FilePicker from './demo/FilePicker.vue';
+import DemoUrl from './demo/DemoUrl.vue';
 </script>
+
 ## 文件操作
+
 ```ts
 
 const textarea = ref('Hello World')
@@ -101,27 +109,31 @@ const openSaveAs = () => {
   openCreate()
 }
 ```
+
 **filepicker**
 <DemoWrap pkg="FrontEnd/JavaScript/demo"   path='FilePicker.vue'>
-    <FilePicker/>
+<FilePicker/>
 </DemoWrap>
 
 ## URL
 
-```js 
-//Blob URL
-URL.createObjectURL(blob) 
+```js
+// Blob URL
+URL.createObjectURL(blob)
 
-//Data  URL
-FileReader.readAsDataURL(file)  
-canvas.toDataURL() 
+// Data  URL
+FileReader.readAsDataURL(file)
+canvas.toDataURL()
 ```
 
 ```vue
-<a :href="url">   </a> 
+<a :href="url">   </a>
+
 <img :src="url" />
+
 <iframe :src="url"></iframe>
 ```
+
 ```ts
 type TYPE = 'text' | 'image' | ''
 const url = ref<string>('')
@@ -140,11 +152,13 @@ const onFetch = async (type: TYPE, path: string) => {
 }
 
 ```
+
 <DemoWrap pkg="FrontEnd/JavaScript/demo"   path='DemoUrl.vue'>
     <DemoUrl/>
 </DemoWrap>
 
 ## 参考资料
+
 [MDN Blob API 参考](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob)<br>
 [MDN File API 参考](https://developer.mozilla.org/zh-CN/docs/Web/API/File)<br>
 [谈谈JS二进制：File、Blob、FileReader、ArrayBuffer、Base64](https://zhuanlan.zhihu.com/p/568915443)
diff --git "a/docs/FrontEnd/JavaScript/\346\230\223\346\267\267\346\267\206\347\232\204\344\275\215\347\275\256\345\261\236\346\200\247.md" "b/docs/FrontEnd/JavaScript/\346\230\223\346\267\267\346\267\206\347\232\204\344\275\215\347\275\256\345\261\236\346\200\247.md"
index f75a525a..00dff458 100644
--- "a/docs/FrontEnd/JavaScript/\346\230\223\346\267\267\346\267\206\347\232\204\344\275\215\347\275\256\345\261\236\346\200\247.md"
+++ "b/docs/FrontEnd/JavaScript/\346\230\223\346\267\267\346\267\206\347\232\204\344\275\215\347\275\256\345\261\236\346\200\247.md"
@@ -1,13 +1,14 @@
 # 易混淆的位置属性
+
 ## clientWidth、clientLeft、offsetWidth、offsetLeft、screenX、scrollWidth、innerWidth、pageX
+
 ```js
-clientWidth = width + padding //元素内部宽度
-clientLeft = left + margin + border //元素内部左边距
+clientWidth = width + padding // 元素内部宽度
+clientLeft = left + margin + border // 元素内部左边距
 
-offsetWidth = width + padding + border + scrollbar 
+offsetWidth = width + padding + border + scrollbar
 offsetLeft = left + margin // 元素左边框与定位父元素左边框的距离(偏移量)
 
-
 screenX = left + margin + border + padding + width + scrollbar // 相对于显示器屏幕左上角的水平偏移量（并不是可视区）
 
 e.pageX // 鼠标相对于文档的水平偏移量
diff --git "a/docs/FrontEnd/JavaScript/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/docs/FrontEnd/JavaScript/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md"
index 66d9c331..a29c97f9 100644
--- "a/docs/FrontEnd/JavaScript/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md"
+++ "b/docs/FrontEnd/JavaScript/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md"
@@ -11,12 +11,14 @@
 2. [Regexper](https://regexper.com/)
 
 ## 1. 或者 `|`
+
 ```javascript
 let tel = "020-99999999"
 console.log(/(010|020)\-\d{8}/.test(tel));//true
 ```
 
 ## 2. 原子表`[]`、原子组`()`
+
 ```javascript
 //原子表
 let reg = /[123456]/ //出现在其中就匹配成功
@@ -32,7 +34,9 @@ let reg = /(34|56)/
 console.log(reg.test("hdjfaks34fjj")) //true 满足组合才行
 console.log(reg.test("hdjfaks35fjj")) //false
 ```
-## 3. 边界符`^`、`$` 
+
+## 3. 边界符`^`、`$`
+
 ```javascript
 let tel = "12020-99999999"
 console.log(/^(010|020)\-\d{8}/.test(tel));//false 以010开头
@@ -40,14 +44,20 @@ console.log(/^(010|020)\-\d{8}/.test(tel));//false 以010开头
 let tel = "020-999999998"
 console.log(/^(010|020)\-\d{8}$/.test(tel));//false 以8位数结尾
 ```
+
 ## 4. 元字符
+
 ![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032157146.png)
+
 ## 5. 匹配所有字符
+
 ```javascript
-/[\s\S]/  
-/[\d\D]/ 
+/[\s\S]/
+/[\d\D]/
 ```
+
 ## 6. 模式修正符号`i`、`g`
+
 ```javascript
 let hd = 'djfkdjakDJFKJD'
 hd.match(/[a-z]/ig)
@@ -63,28 +73,29 @@ hdstr.match(/\p{P}/gu) //匹配所有标点符号  //[',', '!', '，', '！']
 hdstr.match(/\p{L}/gu) //匹配所有字母
 
 ```
+
 ## 7. 原子组中的原子表`([-\/])`
+
 ```javascript
-let dateStr = '2022-08-30'  或 '2022/08/30'//true 
+let dateStr = '2022-08-30'  或 '2022/08/30'//true
 let reg = /^\d{4}([-\/])\d{2}\1\d{2}/
 console.log(reg.test('2022-08/30') //false
 
 let reg1 = /^[a-z]\w{3,7}$/gi //校验用户名
 
-
 let hhtml = `<h1>www.baidu.com</h1>
 <h2>www.sougou.com</h2>`
 let reg = /<(h[1-6])>([\s\S]*)<\/\1>/i;
 [
     "<h1>www.baidu.com</h1>", //匹配到的第一个
-    "h1", //原子组1   
+    "h1", //原子组1
     "www.baidu.com" //原子组2
 ]
 
 //替换操作
 let res = hhtml.replace(reg,`<p>$1</p>`)
 let res = hhtml.replace(reg,(p0,p1,p2)=>`<p>${p1}</p>`
-                        
+
 $& //找到内容本身 (\0)
 $` //内容前面的字符
 $' //内容后面的字符
@@ -97,12 +108,12 @@ let reg = /<(h[1-6])>([\s\S]*)<\/\1>/gi; //全局匹配
 
 let mailReg =  /^\w[\w-]+@[\w]([\w-]+.)+(com|cn|cc|net|org)/
 
-
 //不记录分组(?:) 原子组中使用?:则（match,exec输出结果中）不会记录此原子组
 
 ```
 
 ## 8.贪婪匹配`+`、`*`、`?`
+
 ```javascript
 + //一个或多个
 * //0个或多个
@@ -124,13 +135,17 @@ let regbaidu1 = /<span>([\s\S]+?)<\/span>/gi
 let newhtml= html.replace(regbaidu1,(v,p1)=> `<h2 style='color:red'>${p1}</h2>`)
 //"<h2 style='color:red'>www.baidu.com</h2>\n<h2 style='color:red'>www.map.baidu.com</h2>\n<h2 style='color:red'>www.know.baidu.com</h2>"
 ```
+
 ### 批量验证密码
+
 ```javascript
 let psdRegs = [/^[0-9a-z]{6,10}$/i,/[A-Z]/,/[0-9]/]
 let result = psdRegs.every(reg => reg.test('fdkafad')) //false
 let result = psdRegs.every(reg => reg.test('1f12aA'))  //true
 ```
+
 ## 9. matchAll
+
 ```javascript
 let hstr = `<h1>www.baidu.com</h1>
 <h2>www.map.baidu.com</h2>
@@ -141,7 +156,7 @@ hstr.match(breg) //全局匹配拿不到它每个原子组
 ['<h1>www.baidu.com</h1>', '<h2>www.map.baidu.com</h2>', '<h3>百度一下</h3>']
 
 //解决方法：使用matchAll
-for(it of hstr.matchAll(breg)){ 
+for(it of hstr.matchAll(breg)){
   console.dir(it);
   content.push(it[2]);
 }
@@ -154,14 +169,16 @@ for(it of hstr.matchAll(breg)){
 ```
 
 ## ![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155273.png)
+
 ## 10. 断言匹配``
+
 ```javascript
 let reg = /百度(?=地图)/g
 // 只有百度后面有地图两字的才满足要求
 let htm = <p>百度一下，百度地图</p>
 p.innerHTML.replace(reg,`<a href="www.map.baidu.com">$&</a>`)
 
-?= //判断 
+?= //判断
 
 ?<= //判断前面内容是..
 ?<=href= //前面是href="www.baidu.com"符合
@@ -172,19 +189,29 @@ let reg =  /[a-z]+(?!\d)$/i  //限制最后一位不是数字
 ?! //限定不包含关键词,必须以字母结束
 let reg = /^(?!.*百度.*)[a-z]{4,5}$/i
 
-?<! //前面不是数字 
+?<! //前面不是数字
 let reg = /(?<!\d+)[a-z]+/i
 'baidu88baidu'.match(reg) //baidu
 ```
+
 ### 将链接替换为想要的网址
+
 ## ![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155274.png)
+
 ### 将不含oss的替换
+
 ## ![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155275.png)
+
 ### 模糊电话后四位
+
 ## ![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155277.png)
 
 ## 案例练习
+
 ### 替换练习
+
 ## ![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155279.png)
+
 ### 给原子组起别名
+
 ## ![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155280.png)
diff --git "a/docs/FrontEnd/JavaScript/\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.md" "b/docs/FrontEnd/JavaScript/\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.md"
index 8c74731d..2379a803 100644
--- "a/docs/FrontEnd/JavaScript/\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.md"
+++ "b/docs/FrontEnd/JavaScript/\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.md"
@@ -1,14 +1,17 @@
-
 # 获取目录结构(纯前端)
+
 ```vue
- <button @click="onSelectDir" class="select-btn">选择文件夹</button>
+ <button @click="onSelectDir" class="select-btn">
+选择文件夹
+</button>
 ```
+
 ```js
-const onSelectDir = async () => {
+async function onSelectDir() {
   const dirHandle = await window.showDirectoryPicker()
   await getDirData(dirHandle, directoryData)
 }
-/*递归获取文件夹下的所有文件, 并生成树状结构 
+/* 递归获取文件夹下的所有文件, 并生成树状结构
  {
 "id": "o6ukw45e",
 "name": "core",
@@ -21,11 +24,11 @@ const onSelectDir = async () => {
   },]
 }
 */
-let exclude = ["node_modules", ".git", ".vscode", ".prettierignore", "dist"]; //排除的文件夹
-const getDirData = async (dirHandle, dirData) => {
+const exclude = ['node_modules', '.git', '.vscode', '.prettierignore', 'dist'] // 排除的文件夹
+async function getDirData(dirHandle, dirData) {
   for await (const entry of dirHandle.values()) {
-    let { name, kind } = entry
-    //文件大小
+    const { name, kind } = entry
+    // 文件大小
     if (kind === 'file') {
       const size = await entry.getFile().then(file => file.size || 0)
       const ftype = name.split('.').length > 1 ? name.split('.')[1] : 'unknown'
@@ -36,8 +39,10 @@ const getDirData = async (dirHandle, dirData) => {
         value: size,
         ftype
       })
-    } else if (kind === 'directory') {
-      if (exclude.includes(name)) continue;
+    }
+    else if (kind === 'directory') {
+      if (exclude.includes(name))
+        continue
       const children = {
         id: randomId(),
         name,
@@ -49,4 +54,4 @@ const getDirData = async (dirHandle, dirData) => {
     }
   }
 }
-```
\ No newline at end of file
+```
diff --git "a/docs/FrontEnd/JavaScript/\351\253\230\351\230\266\345\207\275\346\225\260.md" "b/docs/FrontEnd/JavaScript/\351\253\230\351\230\266\345\207\275\346\225\260.md"
index d8711a49..5318e5fe 100644
--- "a/docs/FrontEnd/JavaScript/\351\253\230\351\230\266\345\207\275\346\225\260.md"
+++ "b/docs/FrontEnd/JavaScript/\351\253\230\351\230\266\345\207\275\346\225\260.md"
@@ -17,7 +17,7 @@
 ### 语法
 
 ```js
-array.filter(function(currentValue,index,arr), thisValue)
+array.filter(function(currentValue, index, arr), thisValue)
 //currentValue  必须，遍历到的当前元素值
 //index         可选，当前元素的索引值
 //arr           可选，当前元素属于的数组对象
@@ -28,21 +28,21 @@ array.filter(function(currentValue,index,arr), thisValue)
 ##### 过滤小于 100
 
 ```javascript
-const nums = [20,30,110,60,190,50]
-let newNums =nums.filter(n =>{
-  return n < 100
-})
-console.log(newNums)//[20,30,60,50]
+const nums = [20, 30, 110, 60, 190, 50];
+let newNums = nums.filter((n) => {
+  return n < 100;
+});
+console.log(newNums); //[20,30,60,50]
 ```
 
 ##### 返回奇数元素
 
 ```js
-var arr=[1,2,3,4,5,6];
-let res = arr.filter(function(x){
-    return x%2!==0;
-})
-console.log(res)//[1,3,5]
+const arr = [1, 2, 3, 4, 5, 6];
+const res = arr.filter((x) => {
+  return x % 2 !== 0;
+});
+console.log(res); // [1,3,5]
 ```
 
 ##### 数组去重
@@ -53,54 +53,47 @@ var  arr= ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange',
 //去除重复元素依靠的是indexOf总是返回第一个元素的位置，
 //后续的重复元素位置与indexOf返回的位置相等,表示是同一个元素
 //后续的重复元素位置与indexOf返回的位置不相等，表示元素重复并且过滤。
-var filterArr = arr.filter((value,index,arr) => arr.indexOf(value)===index;)
+var filterArr = arr.filter((value,index,arr) => arr.indexOf(value) === index;)
 console.log(filterArr);//["apple", "strawberry", "banana", "pear", "orange"]
 
 ```
 
 ```js
 const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
-const arr2 = arr1.filter( (element, index, self) => {
-    return self.indexOf( element ) === index;
+const arr2 = arr1.filter((element, index, self) => {
+  return self.indexOf(element) === index;
 });
 
-console.log( arr2 );
+console.log(arr2);
 // [1, 2, 3, 5, 4]
-console.log( arr1 );
+console.log(arr1);
 // [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]
 ```
 
-
-
 ##### 找出素数
 
 ```js
-//除了1和自身,不能被其他数整除的
-var arr=[1,2,3,4,5,6,7,8,9,11,20,37];
-const result = arr.filter(value => {
-	if(value == 1) return false;
- 	if(value == 2) return true; 
-    for(var i = 2; i < Math.sqrt(value) + 1; i++){
-      if(value % i == 0)  return false;
-    }
-     return true;
- });
-```
-
+// 除了1和自身,不能被其他数整除的
+const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 20, 37];
+const result = arr.filter((value) => {
+  if (value === 1) return false;
+  if (value === 2) return true;
+  for (let i = 2; i < Math.sqrt(value) + 1; i++) {
+    if (value % i === 0) return false;
+  }
 
+  return true;
+});
+```
 
-##  高阶函数之map
+## 高阶函数之map
 
 ### 定义
 
-
-
 > 原数组中的每个元素依次调用一个指定方法后，
 >
 > 返回值组成的新数组
 
-
-
 ::: tip
 
 1. **原始数组不发生改变**
@@ -119,87 +112,78 @@ array.map(function(currentValue,index,arr), thisValue)
 //thisArg可选 执行 callback 函数时使用的this 值。
 ```
 
-
-
 ### 用法
 
 ##### 返回数组元素平方后的新数组
 
 ```js
-function pow(x){  //定义一个平方函数
-    return x*x;
+function pow(x) {
+  // 定义一个平方函数
+  return x * x;
 }
 
-var arr=[1,2,3,4,5,6,7,8,9];
-var result = arr.map(pow);  //map()传入的是函数对象本身
-console.log(result);       //结果：[1,4,9,16,25,36,49,64,81];
+const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+const result = arr.map(pow); // map()传入的是函数对象本身
+console.log(result); // 结果：[1,4,9,16,25,36,49,64,81];
 ```
 
-
-
 ##### 用给定函数创建新字符串
 
 ```js
-const mapString = (str, fn) =>
-  str
-    .split('')
+function mapString(str, fn) {
+  return str
+    .split("")
     .map((c, i) => fn(c, i, str))
-    .join('');
-mapString('lorem ipsum', c => c.toUpperCase()); // 'LOREM IPSUM'
+    .join("");
+}
+mapString("lorem ipsum", (c) => c.toUpperCase()); // 'LOREM IPSUM'
 ```
 
-
-
 ##### 把二维数组变字符串
 
 ```js
-const arr = [[1, 2], [3, 4]];
-const str = arr.map(row => row.join(',')).join(';');
+const arr = [
+  [1, 2],
+  [3, 4],
+];
+const str = arr.map((row) => row.join(",")).join(";");
 console.log(str); // "1,2;3,4"
-
 ```
 
-
-
 ##### 数字序列转为数组，删除符号
 
 ```js
-const digitize = n => [...`${Math.abs(n)}`].map(i => parseInt(i));
+const digitize = (n) => [...`${Math.abs(n)}`].map((i) => Number.parseInt(i));
 digitize(123); // [1, 2, 3]
 digitize(-123); // [1, 2, 3]
 ```
 
-
-
 ##### 拿到所有图片的图片名称并以数组形式返回
 
 ```js
-const getImages = (el, includeDuplicates = false) => {
-  const images = [...el.getElementsByTagName('img')]
-  const srcList = images.map(img =>
-    img.getAttribute('src')
-  );
+function getImages(el, includeDuplicates = false) {
+  const images = [...el.getElementsByTagName("img")];
+  const srcList = images.map((img) => img.getAttribute("src"));
   return includeDuplicates ? srcList : [...new Set(srcList)];
-};
+}
 
-getImages(document, true); 
+getImages(document, true);
 // ['image1.jpg', 'image2.png', 'image1.png', '...']
 getImages(document, false);
 // ['image1.jpg', 'image2.png', '...'] 名字去重
 ```
 
-
-
 ##### vue中循环注册组件
 
 ```js
-Vue.component('ele',{
-		render:function(createElement){
-			return createElement('div',
-			    Array.apply(null,{ length:5 }).map(() => createElement(Child))
-			);
-		}
-	});
+Vue.component("ele", {
+  render(createElement) {
+    return createElement(
+      "div",
+      Array.apply(null, { length: 5 }).map(() => createElement(Child))
+    );
+  },
+});
 ```
 
 ## 高阶函数之 reduce
@@ -210,23 +194,21 @@ Vue.component('ele',{
 >
 > **对于空数组是不会执行回调函数的**
 
-
-
 ### 语法
 
 ```js
-arr.reduce(callback , [initialValue])
-//callback （执行数组中每个值的函数，包含四个参数）
-//initialValue （作为第一次调用 callback 的第一个参数。）
-//如果没有提供initialValue，从索引1的地方开始执行callback方法，跳过第一个索引。
-//如果提供initialValue，从索引0开始
+arr.reduce(callback, [initialValue]);
+// callback （执行数组中每个值的函数，包含四个参数）
+// initialValue （作为第一次调用 callback 的第一个参数。）
+// 如果没有提供initialValue，从索引1的地方开始执行callback方法，跳过第一个索引。
+// 如果提供initialValue，从索引0开始
 ```
 
 ```js
 //执行数组中每个值的callback 函数，包含四个参数
-const sum = arr.reduce(function(previousValue, currentValue, index, array) {
-   return previousValue + currentValue;
-}，0)
+const sum = arr.reduce(function (previousValue, currentValue, index, array) {
+  return previousValue + currentValue;
+}, 0);
 ```
 
 ::: tip
@@ -251,87 +233,88 @@ sum(1, 2, 3, 4); // 10
 sum(...[1, 2, 3, 4]); // 10
 ```
 
-
-
 ##### 数组去重
 
 ```js
-let arr = [1,2,3,4,4,1]
-let newArr = arr.reduce((pre,cur)=> pre.includes(cur) ? pre : [...pre,cur],[])
-console.log(newArr);// [1, 2, 3, 4]
+const arr = [1, 2, 3, 4, 4, 1];
+const newArr = arr.reduce(
+  (pre, cur) => (pre.includes(cur) ? pre : [...pre, cur]),
+  []
+);
+console.log(newArr); // [1, 2, 3, 4]
 ```
 
-
-
 ##### 计算两个或多个数字的平均值
 
 ```js
-const average = (...nums) =>
-  nums.reduce((acc, val) => acc + val, 0) / nums.length;
+function average(...nums) {
+  return nums.reduce((acc, val) => acc + val, 0) / nums.length;
+}
 average(...[1, 2, 3]); // 2
 average(1, 2, 3); // 2
 ```
 
-
-
 ##### 将多维数组转化为一维
 
 ```js
-let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
-const convertArr = (arr) => arr.reduce((pre,cur) => Array.isArray(cur) ? [...pre,...convertArr(cur)] : [...pre,cur],[])
-console.log(convertArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
+const arr = [
+  [0, 1],
+  [2, 3],
+  [4, [5, 6, 7]],
+];
+const convertArr = (arr) =>
+  arr.reduce(
+    (pre, cur) =>
+      Array.isArray(cur) ? [...pre, ...convertArr(cur)] : [...pre, cur],
+    []
+  );
+console.log(convertArr(arr)); // [0, 1, 2, 3, 4, 5, 6, 7]
 ```
 
-
-
 ##### 对象里的属性求和
 
 ```js
-var result = [
-    {
-        subject: 'math',
-        score: 10
-    },
-    {
-        subject: 'chinese',
-        score: 20
-    },
-    {
-        subject: 'english',
-        score: 30
-    }
+const result = [
+  {
+    subject: "math",
+    score: 10,
+  },
+  {
+    subject: "chinese",
+    score: 20,
+  },
+  {
+    subject: "english",
+    score: 30,
+  },
 ];
 
-var sum = result.reduce((prev, cur) => cur.score + prev, 0);
-console.log(sum) //60
+const sum = result.reduce((prev, cur) => cur.score + prev, 0);
+console.log(sum); // 60
 ```
 
 ##### 统计数组中每个元素出现的次数
 
 ```js
-arr11 = [111, 22, 111, 234, 999, 999, 111]
-let arr1 = arr11.reduce((pre, item) => {
-    pre[item] = pre[item] ? pre[item] + 1 : 1
-    return pre
-}, {})
-//{ '22': 1, '111': 3, '234': 1, '999': 2 }
+arr11 = [111, 22, 111, 234, 999, 999, 111];
+const arr1 = arr11.reduce((pre, item) => {
+  pre[item] = pre[item] ? pre[item] + 1 : 1;
+  return pre;
+}, {});
+// { '22': 1, '111': 3, '234': 1, '999': 2 }
 ```
 
 ```js
-let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
-
-let nameNum = names.reduce((pre,cur)=>{
-  if(cur in pre){
-    pre[cur]++
-  }else{
-    pre[cur] = 1 
-  }
-  return pre
-},{})
-console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
-```
+const names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];
 
+const nameNum = names.reduce((pre, cur) => {
+  if (cur in pre) pre[cur]++;
+  else pre[cur] = 1;
 
+  return pre;
+}, {});
+console.log(nameNum); // {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
+```
 
 ## 高阶函数之 sort
 
@@ -343,19 +326,15 @@ console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
 >
 > 排序算法现在是稳定的。默认排序顺序是根据字符串 Unicode 码点。
 
-
-
 ### 语法
 
 ```js
-arr.sort(sortby)
-//sort() 在没有参数时，返回的结果是按升序来排列的
+arr.sort(sortby);
+// sort() 在没有参数时，返回的结果是按升序来排列的
 
-//sortby	可选。规定排序顺序。必须是函数。
+// sortby  可选。规定排序顺序。必须是函数。
 ```
 
-
-
 ::: tip
 
 **function(a, b)(return a- b)**
@@ -370,30 +349,26 @@ arr.sort(sortby)
 ### 用法
 
 ```js
-let sortby= function (a, b) {
-    return a - b;
-}
-let koala=[10, 20, 1, 2].sort(sortby)
+const sortby = function (a, b) {
+  return a - b;
+};
+const koala = [10, 20, 1, 2].sort(sortby);
 
 console.log(koala);
 // [1 , 2 , 10 , 20]
 ```
 
 ```js
-var arr = [10, 20, 1, 2];
-    arr.sort(function (x, y) {
-        if (x < y) {
-            return -1;
-        }
-        if (x > y) {
-            return 1;
-        }
-        return 0;
-    });
-console.log(arr); // [1, 2, 10, 20]
-```
+const arr = [10, 20, 1, 2];
+arr.sort((x, y) => {
+  if (x < y) return -1;
 
+  if (x > y) return 1;
 
+  return 0;
+});
+console.log(arr); // [1, 2, 10, 20]
+```
 
 ## 自定义高阶函数
 
@@ -409,16 +384,14 @@ console.log(arr); // [1, 2, 10, 20]
 ### 用法
 
 ```js
-const strArray=['JavaScript','PHP','JAVA','C','Python'];
-function mapForEach(arr,fn){
-    const newArray = [];
-    for(let i = 0; i < arr.length;i++){
-        newArray.push(fn(arr[i]));
-    }
-    return newArray;
+const strArray = ["JavaScript", "PHP", "JAVA", "C", "Python"];
+function mapForEach(arr, fn) {
+  const newArray = [];
+  for (let i = 0; i < arr.length; i++) newArray.push(fn(arr[i]));
+
+  return newArray;
 }
-const lenArray = mapForEach(strArray,(str) =>  str.length);
+const lenArray = mapForEach(strArray, (str) => str.length);
 
-console.log(lenArray);//[10,3,4,1,6]
+console.log(lenArray); // [10,3,4,1,6]
 ```
-
diff --git "a/docs/FrontEnd/Other/package\346\226\207\344\273\266\350\257\246\350\247\243.md" "b/docs/FrontEnd/Other/package\346\226\207\344\273\266\350\257\246\350\247\243.md"
index 024898ed..075dda2b 100644
--- "a/docs/FrontEnd/Other/package\346\226\207\344\273\266\350\257\246\350\247\243.md"
+++ "b/docs/FrontEnd/Other/package\346\226\207\344\273\266\350\257\246\350\247\243.md"
@@ -1,20 +1,19 @@
 ```json
-
 {
-  "name": "theme-vitesse-dark-custom", //包名，扩展ID: publisher.name
-  "displayName": "Vitesse Dark Custom", //发布扩展显示的名称
-  "version": "0.0.10", //和 name 组成唯一标识
+  "name": "theme-vitesse-dark-custom", // 包名，扩展ID: publisher.name
+  "displayName": "Vitesse Dark Custom", // 发布扩展显示的名称
+  "version": "0.0.10", // 和 name 组成唯一标识
   "publisher": "fxzer",
-  "packageManager": "pnpm@8.7.1", //包管理器,设置后会在安装时自动安装,默认npm
+  "packageManager": "pnpm@8.7.1", // 包管理器,设置后会在安装时自动安装,默认npm
   "description": "Vitesse Dark Custom is a custom theme baseed on Vitesse Dark for VS Code",
-  "license": "MIT", //协议
-  "repository": { //包在npm的 Repository
+  "license": "MIT", // 协议
+  "repository": { // 包在npm的 Repository
     "type": "git",
     "url": "https://github.com/fxzer/theme-vitesse-dark-custom"
   },
   "homepage": "https://github.com/owner/project#readme", // 首页， 默认是项目根目录 README.md
-  //问题反馈
-  "bugs": {  
+  // 问题反馈
+  "bugs": {
     "url": "https://github.com/fxzer/theme-vitesse-dark-custom/issues"
   },
   "keywords": [ // 在 npm 能被哪些关键词搜到
@@ -27,16 +26,16 @@
     "Themes"
   ],
   "icon": "icon.png", // 扩展图标
-  //** 浏览器环境 import 导入，优先级 browser > module > main  */
-  //** node 环境 require 导入，优先级 main > 默认index.js 其他选项配置(module,browser)无效 */
-  "main":"index.js", // 入口文件
+  //* * 浏览器环境 import 导入，优先级 browser > module > main  */
+  //* * node 环境 require 导入，优先级 main > 默认index.js 其他选项配置(module,browser)无效 */
+  "main": "index.js", // 入口文件
   "module": "index.js", // esm入口文件
-  "browser": "index.js", // 浏览器入口文件  
+  "browser": "index.js", // 浏览器入口文件
   "types": "index.d.ts", // ts类型定义文件
 
   "exports": { // 14.13.0+会覆盖main,module,browser配置项
-  //定义导入的模块路径
-  ".": {
+  // 定义导入的模块路径
+    ".": {
       "import": {
         "types": "./dist/vue.d.mts",
         "node": "./index.mjs",
@@ -47,7 +46,7 @@
         "default": "./index.js"
       }
     },
-    //自己写的模块需要放在node_modules下
+    // 自己写的模块需要放在node_modules下
     "./compiler-sfc": {
       "import": {
         "types": "./compiler-sfc/index.d.mts",
@@ -59,15 +58,15 @@
         "browser": "./compiler-sfc/index.browser.js",
         "default": "./compiler-sfc/index.js"
       }
-    },
-   
+    }
+
   },
   "files": [
     "themes"
   ],
   "engines": {
     "vscode": "^1.43.0",
-    "node": ">=18.12.0", // node版本
+    "node": ">=18.12.0" // node版本
   },
   "contributes": {
     "themes": [
@@ -79,22 +78,21 @@
     ]
   },
   "scripts": {
-    //** 命令 执行多个：&&，传参：--name=zs   */
+    //* * 命令 执行多个：&&，传参：--name=zs   */
     "dev": "pnpm gs  && vitepress dev docs",
     "gs": "node scripts/generate-sidebar.cjs",
     "pb:gitee": "zsh deploy.sh && node scripts/auto-update-pages.js",
     "clean": "rimraf node_modules && rm -rf dist && pnpm i"
   },
-    /* 项目运行依赖 */
+  /* 项目运行依赖 */
   "dependencies": {
-    
+
   },
-  //** 开发依赖 */
+  //* * 开发依赖 */
   "devDependencies": {
 
   },
   "preview": true,
-  "private": true, // 私有包:会被拒绝发布到npm
+  "private": true // 私有包:会被拒绝发布到npm
 }
-
 ```
diff --git "a/docs/FrontEnd/Shell/\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.md" "b/docs/FrontEnd/Shell/\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.md"
index dc4c90a6..faadd328 100644
--- "a/docs/FrontEnd/Shell/\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.md"
+++ "b/docs/FrontEnd/Shell/\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.md"
@@ -11,7 +11,7 @@ npm run docs:build
 
 cd docs/.vitepress/dist
 
-git init 
+git init
 
 git add -A
 
@@ -28,13 +28,14 @@ cd -
 ```
 
 ## Action
+
 ::: tip 主要流程
-检查代码(Checkout) ===> 启动node环境(Setup Node) ===> 构建静态文件(Build) ===> 
+检查代码(Checkout) ===> 启动node环境(Setup Node) ===> 构建静态文件(Build) ===>
 把静态文件push到gh-pages,触发gh-pages自带的workflow部署(Push To GitHub Pages)===>
 把仓库同步到Gitee(Sync to Gitee) ===> 触发Gitee Pages服务部署(Build Gitee Pages)
 :::
-```yml
 
+```yml
 name: Deploy GitHub Pages And Sync to Gitee
 
 # 触发条件：在 push 到 master 分支后
@@ -45,18 +46,18 @@ on:
 # 任务
 jobs:
   build-and-deploy:
-    runs-on: ubuntu-latest #部署运行环境搭建
+    runs-on: ubuntu-latest # 部署运行环境搭建
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@main
         with:
           persist-credentials: false
-          fetch-depth: 0 #github代码拉取深度
+          fetch-depth: 0 # github代码拉取深度
       - name: Setup Node  🎬
         uses: actions/setup-node@main
         with:
-          node-version: "lts/*"
-      - name: Build 🔧 
+          node-version: 'lts/*'
+      - name: Build 🔧
         run: |
           yarn
           yarn run build
@@ -66,7 +67,7 @@ jobs:
         with:
           build_dir: dist
           github_token: ${{ secrets.DEPLOY_TOKEN }}
-      - name: 🔁 Sync to Gitee #同步到Gitee
+      - name: 🔁 Sync to Gitee # 同步到Gitee
         uses: wearerequired/git-mirror-action@master
         env:
           # 注意在此项目的 Settings->Actions-> Secrets 配置 GITEE_RSA_PRIVATE_KEY
@@ -76,17 +77,16 @@ jobs:
           source-repo: 'git@github.com:fxzer/zerdocs.git'
           # 注意替换为你的 Gitee 目标仓库地址
           destination-repo: 'git@gitee.com:fxzer/zerdocs.git'
-      - name: ✅ Build Gitee Pages #触发Gitee自动部署
+      - name: ✅ Build Gitee Pages # 触发Gitee自动部署
         uses: yanglbme/gitee-pages-action@master
         with:
           # 注意替换为你的 Gitee 用户名
           gitee-username: fxzer
           # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
           gitee-password: ${{ secrets.GITEE_PASSWORD }}
-          # 注意替换为你的 Gitee 仓库 
+          # 注意替换为你的 Gitee 仓库
           # 坑点:https://gitee.com/fxzer/zerdocs -->则填:fxzer/zerdocs,注意仓库名和路径名不一致问题
-          gitee-repo: fxzer/zerdocs 
+          gitee-repo: fxzer/zerdocs
           # 要部署的分支
           branch: gh-pages
-          
-```
\ No newline at end of file
+```
diff --git "a/docs/FrontEnd/TypeScript/\345\210\235\345\255\246\347\254\224\350\256\260.md" "b/docs/FrontEnd/TypeScript/\345\210\235\345\255\246\347\254\224\350\256\260.md"
index c33826be..5b51846c 100644
--- "a/docs/FrontEnd/TypeScript/\345\210\235\345\255\246\347\254\224\350\256\260.md"
+++ "b/docs/FrontEnd/TypeScript/\345\210\235\345\255\246\347\254\224\350\256\260.md"
@@ -1,4 +1,3 @@
-
 ## 基础语法
 
 ### 一、基础类型
@@ -10,9 +9,9 @@ boolean
 number
 string
 array
-object	//对象: {}、 function(){}
+object  // 对象: {}、 function(){}
 null
-undefined	//默认情况下null和undefined是所有类型的子类型。可以赋值给其他类型
+undefined  // 默认情况下null和undefined是所有类型的子类型。可以赋值给其他类型
 ```
 
 ::: warning **object 类型常见用法**
@@ -48,8 +47,8 @@ d = function(n1,n2){
 :::
 
 ```typescript
-let arr: string[] 	//字符串数组 arr = ['zhansan','lisi']
-let arr1:Array<number>	//数值数组 arr1 = [1,2,3,4,5]
+let arr: string[]   //字符串数组 arr = ['zhansan','lisi']
+let arr1:Array<number>  //数值数组 arr1 = [1,2,3,4,5]
 ```
 
 ::: warning **元组**
@@ -69,18 +68,16 @@ let c: Color = Color.Green;  //c为2
 Color[2] // Green 枚举的值得到它的名字
 ```
 
-
-
 #### TS新增类型
 
-``` typescript
-字面量	  //限制类型在几个值之间（联合类型）例：let b : 'male'|'amale' 、 
-enum	//枚举类型
-tuple	//元组 [string, number];
-void	//表示没有返回值，不返回或返回undefined，和其他类型平等关系，不能直接赋值给其他类型	
-Any		//任意类型
-unknown //未知类型 
-never	//永远不返回结果，没有类型是never的子类型、没有类型可以赋值给never类型（除了never本身之外）
+```typescript
+字面量    //限制类型在几个值之间（联合类型）例：let b : 'male'|'amale' 、
+enum  //枚举类型
+tuple  //元组 [string, number];
+void  //表示没有返回值，不返回或返回undefined，和其他类型平等关系，不能直接赋值给其他类型
+Any    //任意类型
+unknown //未知类型
+never  //永远不返回结果，没有类型是never的子类型、没有类型可以赋值给never类型（除了never本身之外）
 //函数用于执行不到返回值那一步，(抛出异常或死循环)的返回值类型
 ```
 
@@ -89,7 +86,7 @@ never	//永远不返回结果，没有类型是never的子类型、没有类型
 
 ```typescript
 let a: any
-let b: string 
+let b: string
 b =  a // OK  any类型可以赋值任意类型
 ```
 
@@ -97,18 +94,18 @@ b =  a // OK  any类型可以赋值任意类型
 let e: unknown
 e = 'TypeScript'
 let f: string
-f = e 	//Error 未知类型不能直接赋值给其他变量（类型安全的any）
+f = e   //Error 未知类型不能直接赋值给其他变量（类型安全的any）
 
 //处理方式一：
 if(typeof  e === "string" ){
-	f = e
+  f = e
 }
 //处理方式二：类型断言
-f = e as string 
+f = e as string
 f = <string> e
 ```
 
-::: warning `|`和`&`    ：表示或，&：表示且
+::: warning `|`和`&` ：表示或，&：表示且
 :::
 
 ```typescript
@@ -124,35 +121,29 @@ f = {
 }
 ```
 
-
-
 ### 二、类型声名
 
 ```typescript
-let name:string	 //声名string类型变量
-let age = 19	 //类型声名可省略，会自动类型推断，age推断为number
+let name:string   //声名string类型变量
+let age = 19   //类型声名可省略，会自动类型推断，age推断为number
 ```
 
-
-
 ### 三、as const 断言
 
 ```typescript
-let a = 99 as const 	//a值只能为99,指定明确的值、类型
+let a = 99 as const   //a值只能为99,指定明确的值、类型
 let b:string = 'asfghj'
 let obj = {
-    name:b,		//值只能为string
+    name:b,    //值只能为string
 } as const
 ```
 
-
-
 ```typescript
 let x = 1024
 let y = '2048'
 
-let arr = [x,y] 	// arr[1]类型是 number|string
-let arr = [x,y] as const 	// 指定为元组，arr[1]类型只能为 number
+let arr = [x,y]   // arr[1]类型是 number|string
+let arr = [x,y] as const   // 指定为元组，arr[1]类型只能为 number
 //同：let arr = <const>[x,y]
 ```
 
@@ -163,11 +154,11 @@ let arr = [x,y] as const 	// 指定为元组，arr[1]类型只能为 number
 ```typescript
 class 类名 {
     属性名: 类型;
-    
+
     constructor(参数: 类型){
         this.属性名 = 参数;
     }
-    
+
     方法名(){
         ....
     }
@@ -182,12 +173,12 @@ class 类名 {
     class Person{
         name: string;
         age: number;
-    
+
         constructor(name: string, age: number){
             this.name = name;
             this.age = age;
         }
-    
+
         sayHello(){
             console.log(`大家好，我是${this.name}`);
         }
@@ -213,7 +204,6 @@ class Person{
 
 > **注2：子类继承父类时，必须调用父类的构造方法（如果子类中也定义了构造方法）！**
 
-
 ```typescript
 class A {
     protected num: number;
@@ -248,8 +238,6 @@ class X extends A {
   - protected ，可以在类、子类中修改
   - private ，可以在类中修改
 
-  
-
 ::: details public
 
 ```typescript
@@ -279,8 +267,6 @@ p.name = '猪八戒';// 可以通过对象修改
 
 ```
 
-
-
 :::
 
 ::: details protected
@@ -313,12 +299,8 @@ p.name = '猪八戒';// 不能修改
 
 ```
 
-
-
 :::
 
-
-
 ::: details private
 
 ```typescript
@@ -349,8 +331,6 @@ p.name = '猪八戒';// 不能修改
 
 ```
 
-
-
 :::
 
 ### 三、属性存取器
@@ -386,17 +366,13 @@ class Person{
 const p1 = new Person('孙悟空');
 // 实际通过调用getter方法读取name属性
 console.log(p1.name);
-// 实际通过调用setter方法修改name属性 
-p1.name = '猪八戒'; 
+// 实际通过调用setter方法修改name属性
+p1.name = '猪八戒';
 
 ```
 
-
-
 :::
 
-
-
 #### 静态属性
 
 > 静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用
@@ -406,7 +382,7 @@ p1.name = '猪八戒';
 ```typescript
 class Tools{
     static PI = 3.1415926;
-    
+
     static sum(num1: number, num2: number){
         return num1 + num2
     }
@@ -481,7 +457,7 @@ dog.bark();
 
 ### 五、抽象类（abstract class）
 
->  抽象类是专门用来被其他类所继承的类，它只能被其他类所继承不能用来创建实例，用于抽取类的共同特点
+> 抽象类是专门用来被其他类所继承的类，它只能被其他类所继承不能用来创建实例，用于抽取类的共同特点
 >
 > 使用abstract开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现;
 
@@ -501,8 +477,6 @@ class Dog extends Animals{
 
 ```
 
-
-
 ### 六、接口
 
 ```typescript
@@ -510,8 +484,8 @@ class Dog extends Animals{
 interface Person {
     firstName: string;
      lastName: string;
-     address?: string;	//可选属性
- readonly age: number;	//只读属性
+     address?: string;  //可选属性
+ readonly age: number;  //只读属性
 }
 
 function greeter(person: Person) {
@@ -530,7 +504,7 @@ function greeter(person: Person) {
 
 ```js
 {
-/* 
+/*
     tsconfig.json 是ts编译器的配置文件，ts编译器可以更具它的信息来对代码进行编译
     "include" 用来表示指定哪些ts文件需要被编译
         路径：
@@ -542,7 +516,7 @@ function greeter(person: Person) {
     "include": [
         "./src/**/*"
     ],
-    
+
     // "exclude": [
     //     "./src/hello/**/*"
     // ]
@@ -556,9 +530,9 @@ function greeter(person: Person) {
       */
     //  "files": [],
 
-    //compilerOptions 编译器的选项 
+    //compilerOptions 编译器的选项
     "compilerOptions": {
-        
+
         //target 用来指定ts被编译为ES的版本
         //'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'.
         "target": "ES2015",
@@ -566,16 +540,15 @@ function greeter(person: Person) {
         //module 指定要使用的模块化的规范
         //'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
         "module": "es2015",
-        
+
         //lib 用来指定项目所用的库
-       /* 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext', 'dom', 
-       'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection', 
+       /* 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext', 'dom',
+       'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection',
           'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include',
-          'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 
-         'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise', 
+          'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl',
+         'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise',
          'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', */
 
-
         //outDir 用来指定编译后文件所在的目录
         "outDir": "./dist",
 
@@ -613,13 +586,10 @@ function greeter(person: Person) {
         // 严格检查空值
         "strictNullChecks": true
 
-
     }
 }
 ```
 
-
-
 :::
 
 ### 二、webpack整合
@@ -640,114 +610,114 @@ npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpa
 
 ::: details webpack.config.js详细配置
 
- ```js
- // 引入一个包
- const path = require('path');
- // 引入html插件
- const HTMLWebpackPlugin = require('html-webpack-plugin');
- //引入clean插件
- const { CleanWebpackPlugin } = require('clean-webpack-plugin')
- 
- // npm init -y 初始化 创建package.json文件
- // npm i -D webpack webpack-cli typescript ts-loader  安装四个依赖
- // 编写webpack配置文件
- // 编写tsconfig.json文件
- // 修改package.json中加上build命令
- // npm i -D html-webpack-plugin //自动生成html
- // npm i -D webpack-dev-server //自动响应浏览器更新
- // npm i -D clean-webpack-plugin //清楚dist目录旧文件
- 
- //webpack 中所有的配置信息都应该写在module.exports中
- module.exports = {
- 
-     // 指定入口文件
-     entry: "./src/index.ts",
- 
-     // 指定打包文件所在目录
-     output: {
-         //指定打包文件的目录
-         path: path.resolve(__dirname, 'dist'),
-         //打包后文件的名字
-         filename: "bundle.js",
-         //告诉webpack不使用箭头函数
-         environment: {
-             arrowFunction: false
-         }
- 
-     },
-     //指定webpack打包时要使用的模块
-     module: {
-         // 指定要loader加载的规则
-         rules: [
-             {
-                 // test指定的时规则生效的文件
-                 test: /\.ts$/,//以ts结尾的文件
-                 // 要使用的loader
-                 use: [
-                     // 配置babel
-                     {
-                         //指定加载器
-                         loader: "babel-loader",
-                         // 设置babel
-                         options: {
-                             //设置预定义的环境
-                             presets: [
-                                 [
-                                     //指定环境的插件
-                                     "@babel/preset-env",
-                                     // 配置信息
-                                     {
-                                         // 要兼容的目标浏览器及版本
-                                         targets: {
-                                             "chrome": "58",
-                                             "ie": "11"
-                                         },
-                                         //指定corejs的版本
-                                         "corejs": "3",
-                                         //使用corejs的方式 "usage"  表示按需加载
-                                         "useBuiltIns": "usage" 
-                                     }
- 
-                                 ]
-                             ]
-                         }
-                     },
-                     // 'babel-loader',
-                     'ts-loader'
-                 ],
-                 // 要排除的文件
-                 exclude: /node-modules/
-             }
-         ]
-     },
- 
-     //配置Webpack 插件
-     plugins: [
-         new CleanWebpackPlugin(),
-         new HTMLWebpackPlugin({
-             // title: "这是一个自定义的title"、
-             template: "./src/index.html" 
-         }),
-     ],
- 
-     // 用来设置引用模块，可以将这些文件识别为模块
-     resolve: {
-         extensions: ['.ts', '.js']
-     }
- }
- ```
+```js
+// 引入一个包
+const path = require('node:path')
+// 引入html插件
+const HTMLWebpackPlugin = require('html-webpack-plugin')
+// 引入clean插件
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+
+// npm init -y 初始化 创建package.json文件
+// npm i -D webpack webpack-cli typescript ts-loader  安装四个依赖
+// 编写webpack配置文件
+// 编写tsconfig.json文件
+// 修改package.json中加上build命令
+// npm i -D html-webpack-plugin //自动生成html
+// npm i -D webpack-dev-server //自动响应浏览器更新
+// npm i -D clean-webpack-plugin //清楚dist目录旧文件
+
+// webpack 中所有的配置信息都应该写在module.exports中
+module.exports = {
+
+  // 指定入口文件
+  entry: './src/index.ts',
+
+  // 指定打包文件所在目录
+  output: {
+    // 指定打包文件的目录
+    path: path.resolve(__dirname, 'dist'),
+    // 打包后文件的名字
+    filename: 'bundle.js',
+    // 告诉webpack不使用箭头函数
+    environment: {
+      arrowFunction: false
+    }
+
+  },
+  // 指定webpack打包时要使用的模块
+  module: {
+    // 指定要loader加载的规则
+    rules: [
+      {
+        // test指定的时规则生效的文件
+        test: /\.ts$/, // 以ts结尾的文件
+        // 要使用的loader
+        use: [
+          // 配置babel
+          {
+            // 指定加载器
+            loader: 'babel-loader',
+            // 设置babel
+            options: {
+              // 设置预定义的环境
+              presets: [
+                [
+                  // 指定环境的插件
+                  '@babel/preset-env',
+                  // 配置信息
+                  {
+                    // 要兼容的目标浏览器及版本
+                    targets: {
+                      chrome: '58',
+                      ie: '11'
+                    },
+                    // 指定corejs的版本
+                    corejs: '3',
+                    // 使用corejs的方式 "usage"  表示按需加载
+                    useBuiltIns: 'usage'
+                  }
+
+                ]
+              ]
+            }
+          },
+          // 'babel-loader',
+          'ts-loader'
+        ],
+        // 要排除的文件
+        exclude: /node-modules/
+      }
+    ]
+  },
+
+  // 配置Webpack 插件
+  plugins: [
+    new CleanWebpackPlugin(),
+    new HTMLWebpackPlugin({
+      // title: "这是一个自定义的title"、
+      template: './src/index.html'
+    }),
+  ],
+
+  // 用来设置引用模块，可以将这些文件识别为模块
+  resolve: {
+    extensions: ['.ts', '.js']
+  }
+}
+```
 
 :::
 
-####  4.配置TS编译选项
+#### 4.配置TS编译选项
 
 ```json
 {
-   "compilerOptions": {
-       "target": "ES2015",
-       "module": "ES2015",
-       "strict": true
-   }
+  "compilerOptions": {
+    "target": "ES2015",
+    "module": "ES2015",
+    "strict": true
+  }
 }
 
 ```
@@ -767,10 +737,6 @@ npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpa
 
 ```
 
-
-
-
-
 #### 6.项目使用
 
 在src下创建ts文件，并在并命令行执行`npm run build`对代码进行编译；
@@ -789,7 +755,7 @@ npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpa
 
 **7.1 安装依赖包：**
 
-```npm i -D @babel/core @babel/preset-env babel-loader core-js```
+`npm i -D @babel/core @babel/preset-env babel-loader core-js`
 
 共安装了4个包，分别是：
 
@@ -813,9 +779,9 @@ module: {
                         presets: [
                             [
                                 "@babel/preset-env",
-                                {	//支持的目标版本
+                                {  //支持的目标版本
                                     "targets":{
-                                        "chrome": "58", 
+                                        "chrome": "58",
                                         "ie": "11"
                                     },
                                     //corejs版本
@@ -838,4 +804,3 @@ module: {
 ...
 
 ```
-
diff --git "a/docs/FrontEnd/TypeScript/\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.md" "b/docs/FrontEnd/TypeScript/\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.md"
index 6460cf14..4872e266 100644
--- "a/docs/FrontEnd/TypeScript/\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.md"
+++ "b/docs/FrontEnd/TypeScript/\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.md"
@@ -1,4 +1,5 @@
 ## 松散类型自动推推导
+
 ```ts
 //1.
 type Size = "sm" | "xs"
@@ -27,4 +28,4 @@ type LooseAutoComplete<T extends string> = T | Omit<string, T>
 interface IconProps {
   size:Size // size 可以推导为 "sm" | "xs" | string ,保留模版类型提示
 }
-```
\ No newline at end of file
+```
diff --git "a/docs/FrontEnd/TypeScript/\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.md" "b/docs/FrontEnd/TypeScript/\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.md"
index a359fe28..3d8c12af 100644
--- "a/docs/FrontEnd/TypeScript/\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.md"
+++ "b/docs/FrontEnd/TypeScript/\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.md"
@@ -23,12 +23,11 @@ class C {
     method() {}
 }
 
-
 ```
 
 > 启用 vuex-class同时需要设置`strictFunctionTypes`选项为false
 
-##  2. strictPropertyInitialization
+## 2. strictPropertyInitialization
 
 `是否类的非undefined属性已经在构造函数里初始化`。 boolean类型，默认值：false
 
@@ -60,7 +59,7 @@ arr.find((item: any) => item.name === name) // ok
 
 ```
 
-##  4. target
+## 4. target
 
 `指定编译的ECMAScript目标版本`。枚举值："ES3"， "ES5"， "ES6"/ "ES2015"， "ES2016"， "ES2017"，"ESNext"。默认值： “ES3”
 
@@ -68,13 +67,13 @@ TypeScript是ES6的超集，所以你可以使用ES6来编写ts代码（通常
 
 > target: "ESNext" 是指tc39最新的[ES proposed features(opens new window)](https://github.com/tc39/proposals)
 
-##  5. module
+## 5. module
 
 `指定生成哪个模块系统代码`。枚举值："None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"， "ES2015"，"ESNext"。默认值根据--target选项不同而不同，当target设置为ES6时，默认module为“ES6”，否则为“commonjs”
 
 通常使用ES6的模块来写ts代码，然而2016年1月以前，基本上没有浏览器原生支持ES6的模块系统，所以需要转换为不同的模块系统，如：CommonJS、AMD、SystemJS等，而module选项就是指定编译使用对应的模块系统。
 
-##  6. lib
+## 6. lib
 
 `编译过程中需要引入的库文件的列表`。string[]类型，可选的值有很多，常用的有ES5，ES6，ESNext，DOM，DOM.Iterable、WebWorker、ScriptHost等。该值默认值是根据--target选项不同而不同。当target为ES5时，默认值为['DOM ', 'ES5', 'ScriptHost'];当target为ES6时，默认值为['DOM', 'ES6', 'DOM.Iterable', 'ScriptHost']
 
@@ -128,7 +127,7 @@ TypeScript是ES6的超集，所以你可以使用ES6来编写ts代码（通常
 // in ts code
 import Setting from '@/components/Setting.vue' // 模块实际位置: src/components/Setting.vue
 import TestModule from 'moduleA/index.js' // 模块实际位置: src/libs/moduleA/index.js
- 
+
 ```
 
 ## 9. strictNullChecks
@@ -170,13 +169,13 @@ foo && foo.push('1') // okay
 
 如果设置为true，js后缀的文件也会被typescript进行编译。
 
-##  13. typeRoots和types
+## 13. typeRoots和types
 
 默认所有可见的"@types"包会在编译过程中被包含进来。如果指定了typeRoots，只有typeRoots下面的包才会被包含进来。如果指定了types，只有被列出来的npm包才会被包含进来。[详细内容可看此处(opens new window)](https://www.tslang.cn/docs/handbook/tsconfig-json.html#types-typeroots-and-types)
 
 > 可以指定"types": []来禁用自动引入@types包
 
-##  14. files、include和exclude
+## 14. files、include和exclude
 
 `编译文件包含哪些文件以及排除哪些文件`。
 
@@ -193,71 +192,71 @@ foo && foo.push('1') // okay
         "**/*.spec.ts"
     ]
 }
-   
+
 ```
 
-##  tsconfig.json全解析
+## tsconfig.json全解析
 
 ```json
 {
   "compilerOptions": {
     /* 基本选项 */
-    "target": "es5",                       // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'（"ESNext"表示最新的ES语法，包括还处在stage X阶段）
-    "module": "commonjs",                  // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
-    "lib": [],                             // 指定要包含在编译中的库文件
-    "allowJs": true,                       // 允许编译 javascript 文件
-    "checkJs": true,                       // 报告 javascript 文件中的错误
-    "jsx": "preserve",                     // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
-    "declaration": true,                   // 生成相应的 '.d.ts' 文件
-    "sourceMap": true,                     // 生成相应的 '.map' 文件
-    "outFile": "./",                       // 将输出文件合并为一个文件
-    "outDir": "./",                        // 指定输出目录
-    "rootDir": "./",                       // 用来控制输出目录结构 --outDir.
-    "removeComments": true,                // 删除编译后的所有的注释
-    "noEmit": true,                        // 不生成输出文件
-    "importHelpers": true,                 // 从 tslib 导入辅助工具函数
-    "isolatedModules": true,               // 将每个文件做为单独的模块 （与 'ts.transpileModule' 类似）.
+    "target": "es5", // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'（"ESNext"表示最新的ES语法，包括还处在stage X阶段）
+    "module": "commonjs", // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
+    "lib": [], // 指定要包含在编译中的库文件
+    "allowJs": true, // 允许编译 javascript 文件
+    "checkJs": true, // 报告 javascript 文件中的错误
+    "jsx": "preserve", // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
+    "declaration": true, // 生成相应的 '.d.ts' 文件
+    "sourceMap": true, // 生成相应的 '.map' 文件
+    "outFile": "./", // 将输出文件合并为一个文件
+    "outDir": "./", // 指定输出目录
+    "rootDir": "./", // 用来控制输出目录结构 --outDir.
+    "removeComments": true, // 删除编译后的所有的注释
+    "noEmit": true, // 不生成输出文件
+    "importHelpers": true, // 从 tslib 导入辅助工具函数
+    "isolatedModules": true, // 将每个文件做为单独的模块 （与 'ts.transpileModule' 类似）.
 
     /* 严格的类型检查选项 */
-    "strict": true,                        // 启用所有严格类型检查选项
-    "noImplicitAny": true,                 // 在表达式和声明上有隐含的 any类型时报错
-    "strictNullChecks": true,              // 启用严格的 null 检查
-    "noImplicitThis": true,                // 当 this 表达式值为 any 类型的时候，生成一个错误
-    "alwaysStrict": true,                  // 以严格模式检查每个模块，并在每个文件里加入 'use strict'
+    "strict": true, // 启用所有严格类型检查选项
+    "noImplicitAny": true, // 在表达式和声明上有隐含的 any类型时报错
+    "strictNullChecks": true, // 启用严格的 null 检查
+    "noImplicitThis": true, // 当 this 表达式值为 any 类型的时候，生成一个错误
+    "alwaysStrict": true, // 以严格模式检查每个模块，并在每个文件里加入 'use strict'
 
     /* 额外的检查 */
-    "noUnusedLocals": true,                // 有未使用的变量时，抛出错误
-    "noUnusedParameters": true,            // 有未使用的参数时，抛出错误
-    "noImplicitReturns": true,             // 并不是所有函数里的代码都有返回值时，抛出错误
-    "noFallthroughCasesInSwitch": true,    // 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）
+    "noUnusedLocals": true, // 有未使用的变量时，抛出错误
+    "noUnusedParameters": true, // 有未使用的参数时，抛出错误
+    "noImplicitReturns": true, // 并不是所有函数里的代码都有返回值时，抛出错误
+    "noFallthroughCasesInSwitch": true, // 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）
 
     /* 模块解析选项 */
-    "moduleResolution": "node",            // 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)。默认是classic
-    "baseUrl": "./",                       // 用于解析非相对模块名称的基目录
-    "paths": {},                           // 模块名到基于 baseUrl 的路径映射的列表
-    "rootDirs": [],                        // 根文件夹列表，其组合内容表示项目运行时的结构内容
-    "typeRoots": [],                       // 包含类型声明的文件列表
-    "types": [],                           // 需要包含的类型声明文件名列表
-    "allowSyntheticDefaultImports": true,  // 允许从没有设置默认导出的模块中默认导入。
+    "moduleResolution": "node", // 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)。默认是classic
+    "baseUrl": "./", // 用于解析非相对模块名称的基目录
+    "paths": {}, // 模块名到基于 baseUrl 的路径映射的列表
+    "rootDirs": [], // 根文件夹列表，其组合内容表示项目运行时的结构内容
+    "typeRoots": [], // 包含类型声明的文件列表
+    "types": [], // 需要包含的类型声明文件名列表
+    "allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。
 
     /* Source Map Options */
-    "sourceRoot": "./",                    // 指定调试器应该找到 TypeScript 文件而不是源文件的位置
-    "mapRoot": "./",                       // 指定调试器应该找到映射文件而不是生成文件的位置
-    "inlineSourceMap": true,               // 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件
-    "inlineSources": true,                 // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性
+    "sourceRoot": "./", // 指定调试器应该找到 TypeScript 文件而不是源文件的位置
+    "mapRoot": "./", // 指定调试器应该找到映射文件而不是生成文件的位置
+    "inlineSourceMap": true, // 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件
+    "inlineSources": true, // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性
 
     /* 其他选项 */
-    "experimentalDecorators": true,        // 启用装饰器
-    "emitDecoratorMetadata": true,         // 为装饰器提供元数据的支持
-    "strictFunctionTypes": false           // 禁用函数参数双向协变检查。
+    "experimentalDecorators": true, // 启用装饰器
+    "emitDecoratorMetadata": true, // 为装饰器提供元数据的支持
+    "strictFunctionTypes": false // 禁用函数参数双向协变检查。
   },
   /* 指定编译文件或排除指定编译文件 */
   "include": [
-      "src/**/*"
+    "src/**/*"
   ],
   "exclude": [
-      "node_modules",
-      "**/*.spec.ts"
+    "node_modules",
+    "**/*.spec.ts"
   ],
   "files": [
     "core.ts",
@@ -269,4 +268,3 @@ foo && foo.push('1') // okay
   "compileOnSave": true // 支持这个特性需要Visual Studio 2015， TypeScript1.8.4以上并且安装atom-typescript插件
 }
 ```
-
diff --git a/docs/GoodTool/index.md b/docs/GoodTool/index.md
index 1a54e3c3..826a27b0 100644
--- a/docs/GoodTool/index.md
+++ b/docs/GoodTool/index.md
@@ -1,10 +1,7 @@
-
-
-
-
-
 <script setup  >
 import ToolWrap from '../.vitepress/theme/components/ToolWrap.vue'
  </script>
+
 # 实用工具集锦
- <ToolWrap/>
\ No newline at end of file
+
+ <ToolWrap/>
diff --git "a/docs/Interview/Brower/\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.md" "b/docs/Interview/Brower/\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.md"
index 425c4591..d3be0b13 100644
--- "a/docs/Interview/Brower/\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.md"
+++ "b/docs/Interview/Brower/\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.md"
@@ -1,6 +1,6 @@
 # 事件循环机制
 
-## 进程与线程 
+## 进程与线程
 
 ::: tip 描述
 
@@ -16,8 +16,6 @@
 
 4. 操纵者不同：进程操纵者是操作系统，线程操纵者一般为程序员
 
-   
-
 ![image-20230223165307358](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302231653903.png)
 
 ## 浏览器的线程与进程
@@ -26,11 +24,11 @@
 
 1. 浏览器进程：负责浏览器界面展示、用户交互、子进程管理等；浏览器进程内部会启动多个线程处理不同的任务。
 2. 网络进程：负责加载网络资源，网络进程内部会启动多个线程来处理不同的网络任务。
-3. 渲染进程：渲染进程启动后，会启动一个渲染**主进程**，主进程负责执行 HTML、CSS、JS 代码。 
-> 默认每个标签页开启一个新进程，以保证标签页之间不互相影响。
-
+3. 渲染进程：渲染进程启动后，会启动一个渲染**主进程**，主进程负责执行 HTML、CSS、JS 代码。
+   > 默认每个标签页开启一个新进程，以保证标签页之间不互相影响。
 
 ## 渲染进程任务
+
 1. 解析 HTML
 2. 解析 CSS
 3. 计算 样式
@@ -40,22 +38,27 @@
 7. 执行全局 JS 代码
 8. 执行事件处理函数
 9. 执行定时器的回调函数
+
 ## 事件循环
+
 ![2023-03-05-21-01-25](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-21-01-25.png)
 
 :::details 事件循环解释
+
 1. 在最开始的时候，渲染主线程会进入一个无限循环
 
 2. 每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。
 
 3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的未尾。在添加新任务时，“如果主线程是休眠状态，则会将其唤醒以绁续循环拿取任务；如此循环往复，持续进行。
-:::
-:::tip 异步与事件循环理解
-单线程是异步产生的原因，事件循环是异步的实现方式。
-:::
+   :::
+   :::tip 异步与事件循环理解
+   单线程是异步产生的原因，事件循环是异步的实现方式。
+   :::
+
 ## 如何理解异步
+
 > Js是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。
-> 
+>
 > 而渲染主线程承担渲染页面、执行 JS 等诸多的任务。
 >
 > 如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。
@@ -70,13 +73,13 @@
 
 ## 消息队列
 
->任务没有优先级，在消息队列中先进先出。但是 **消息队列有优先级**。
+> 任务没有优先级，在消息队列中先进先出。但是 **消息队列有优先级**。
 >
->每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
+> 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
 >
->在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
+> 在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
 >
->浏览器必须准备好一个微队列，微队列中的任务**优先**所有其他任务执行。
+> 浏览器必须准备好一个微队列，微队列中的任务**优先**所有其他任务执行。
 
 :::details JS 中的计时器能做到精确计时吗
 
@@ -86,12 +89,9 @@
 
 2．操作系统的计时函数本身就有少量偏差！ 由于 JS 的计时器最终调用的是操作系统的函数，也就携带了此偏养
 
-3．按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，间隔时间少于 4 毫秒，则会增加到 4 毫秒  这又带来了偏差
+3．按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，间隔时间少于 4 毫秒，则会增加到 4 毫秒 这又带来了偏差
 
 4． 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差。
 :::
 
 ![2023-03-05-21-56-25](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-21-56-25.png)
-
-
-
diff --git "a/docs/Interview/Brower/\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.md" "b/docs/Interview/Brower/\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.md"
index 31c86672..f85e06ca 100644
--- "a/docs/Interview/Brower/\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.md"
+++ "b/docs/Interview/Brower/\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.md"
@@ -1,12 +1,13 @@
 # 浏览器网页请求过程
 
- 1. 网络：请求资源
- 2. 渲染：处理渲染
+1.  网络：请求资源
+2.  渲染：处理渲染
 
 ::: tip 完整的 HTTP 请求过程
 域名解析 ==> 与服务器建立连接 ==> 发起 HTTP 请求 ==> 服务器响应 HTTP 请求，浏览器得到 html 代码 ==> 浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片） ==> 浏览器对页面进行渲染呈现给用户
 :::
-##  一、域名解析
+
+## 一、域名解析
 
 1. Chrome 浏览器 会首先搜索浏览器自身的 DNS 缓存，有且没有过期则解析到此结束。
 2. 如果浏览器自身的缓存里面没有找到对应的条目，会搜索操作系统自身的 DNS 缓存，有且没有过期则停止搜索解析到此结束
@@ -29,7 +30,7 @@
 
 如果还没有解析成功，那么就宣告这次解析失败，那就无法跟目标计算机进行通信。只要其中有一步可以解析成功，那就可以成功和目标计算机进行通信。
 
-##  二、与服务器建立连接
+## 二、与服务器建立连接
 
 1. TCP 连接的建立
 
@@ -47,13 +48,13 @@
 
 http 协议：计算机通过网络进行通信的规则，是一个基于请求与响应，无状态的，应用层的协议，常基于 TCP/IP 协议传输数据。
 
-###  请求报文结构
+### 请求报文结构
 
 请求报文包括四个部分：请求行，请求头，空行，请求体。
 
 ![img](data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=)
 
-##   四、服务器端响应 HTTP 请求，浏览器得到 HTML 代码
+## 四、服务器端响应 HTTP 请求，浏览器得到 HTML 代码
 
 HTTP 的响应报文也由四部分组成：响应行、响应头、空行、响应体
 
@@ -61,7 +62,7 @@ HTTP 的响应报文也由四部分组成：响应行、响应头、空行、响
 
 [报文结构参考](https://blog.csdn.net/lyn_00/article/details/84953763)
 
-##  五、浏览器渲染过程
+## 五、浏览器渲染过程
 
 ![2023-03-05-22-05-19](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-05-19.png)
 
@@ -72,7 +73,9 @@ HTTP 的响应报文也由四部分组成：响应行、响应头、空行、响
 5. 将布局渲染到屏幕上
 
 整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画
+
 ### 一、解析 HTML
+
 解析过程中遇到 CSS 解析 CSS，遇到 JS执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和外部的JS 文件。
 
 如果主线程解析到 link 位置，此时外部的CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 css 的工作是在预解析线程中进行的。这就是csS 不会阻塞 HTML 解析的根本原因。
@@ -80,15 +83,19 @@ HTTP 的响应报文也由四部分组成：响应行、响应头、空行、响
 如果主线程解析到 script 位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。这是因为 Js 代码的执行过程可能会修改当前的DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阳塞 HTML 解析的根本原因。
 
 第一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。
- ![2023-03-05-22-07-54](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-07-54.png)
- ![2023-03-05-22-29-15](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-29-15.png)
- > 解析成对象，提供 JS 可操作的能力
+![2023-03-05-22-07-54](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-07-54.png)
+![2023-03-05-22-29-15](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-29-15.png)
+
+> 解析成对象，提供 JS 可操作的能力
+
 ### 二、解析 CSS
+
 ![2023-03-05-22-10-48](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-10-48.png)
 
 > `document.styleSheets、document.styleSheets[0].addRule('div':'border :2px solid red')` 可查看、操作浏览器样式表
 
 ### 三、样式计算
+
 主线程会遍历得到的DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 `Computed Style`。
 
 在这一过程中，很多预设值会变成绝对值，比如 red 会变成 rgb；相对单位会变成绝对单位，比如 em 会变成 px
@@ -98,29 +105,35 @@ HTTP 的响应报文也由四部分组成：响应行、响应头、空行、响
 ![2023-03-05-22-31-23](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-31-23.png)
 
 ### 四、布局Layout
-   DOM树和 Layout 不一定是一一对应的，比如`head`默认样式`display:none`,`::before`在 Layout 树阶段，布局完成后形成布局树。
 
-   ![2023-03-05-22-38-44](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-38-44.png)
+DOM树和 Layout 不一定是一一对应的，比如`head`默认样式`display:none`,`::before`在 Layout 树阶段，布局完成后形成布局树。
+
+![2023-03-05-22-38-44](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-38-44.png)
 
 ### 五、分层Layer
+
 主线程使用复杂的策略对布局树进行分层。
 
-###  六、绘制Paint
+### 六、绘制Paint
+
 为每个层生成绘制指令
 
 ### 七、分块Tiling
-分块工作交给多个线程同时进行
 
+分块工作交给多个线程同时进行
 
 ### 八、光栅化Raster
+
 合成线程将信息交给 GPU 进程，将每个快变成位图，优先处理靠近视口的块，此过程会用到 GPU 加速，提升运算速率。
 
 ### 九、画Draw
+
 合成线程计算出每个位图在屏幕上的位置，交给 GPU 进行呈现。变形（旋转，缩放，倾斜）等发生在合成线程，与渲染主线程无关，这是 `transform` 效率高的本质原因。
 
 ![2023-03-06-21-54-14](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-06-21-54-14.png)
 
 ### 回流reflow
+
 ![2023-03-06-21-56-10](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-06-21-56-10.png)
 
 reflow 的本质就是重新计算 layout 树。
@@ -131,9 +144,8 @@ reflow 的本质就是重新计算 layout 树。
 
 也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息浏览器在反复权衡下，最终决定获取属性立即 ref1ow。
 
-
-
 :::tip 引起回流属性和方法：任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。
+
 1. 页面首次渲染
 2. 添加或者删除可见的DOM元素
 3. 元素尺寸或位置发生改变
@@ -141,7 +153,8 @@ reflow 的本质就是重新计算 layout 树。
 5. 浏览器窗口大小发生改变
 6. 激活CSS伪类（例如：:hover）
 7. 查询某些属性或调用某些方法
-:::
+   :::
+
 ### 重绘repaint
 
 repaint 的本质就是重新根据分层信息计算了绘制指令。
@@ -161,6 +174,7 @@ repaint 的本质就是重新根据分层信息计算了绘制指令。
 > 需要更新属性，只是影响元素的外观、风格，不影响布局。改变 `​color​​​,​ ​background-color​​​, ​​visibility` 等属性
 
 [参考链接](https://blog.51cto.com/u_15499114/4971560)
+
 ## 六、浏览器对页面进行渲染呈现给用户，关闭连接
 
 ### 四次挥手
@@ -184,4 +198,3 @@ repaint 的本质就是重新根据分层信息计算了绘制指令。
 [参考视频 1](https://www.bilibili.com/video/BV1kV411j7hA?from=search&seid=11094337157520488587)
 
 [参考视频 2](https://www.bilibili.com/video/BV1BV411a72M?from=search&seid=4937986881420888725)
-
diff --git "a/docs/Interview/Brower/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.md" "b/docs/Interview/Brower/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.md"
index 12721a62..82ebb4f5 100644
--- "a/docs/Interview/Brower/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.md"
+++ "b/docs/Interview/Brower/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.md"
@@ -4,16 +4,17 @@ http：超文本传输协议，明文传输，信息不安全。用的是80端
 
 https：具有安全性的ssl加密传输协议，信息安全。用的443端口
 
-
 ## 前端缓存
 
 ### HTTP缓存
+
 在服务器代码上设置
+
 1. 强缓存：使用Expires、Cache-Control（优先级高
->  **判断过程**：
-   请求再次发起 -> 浏览器根据 expires 和 cache-control 判断目标资源是否命中"强缓存" -> 若命中，直接从缓存获取资源，不再与服务器发生通讯。
+   > **判断过程**：
+   > 请求再次发起 -> 浏览器根据 expires 和 cache-control 判断目标资源是否命中"强缓存" -> 若命中，直接从缓存获取资源，不再与服务器发生通讯。
 1. 协商缓存：协商缓存主要有四个头字段，它们两两组合配合使用,当命中协商缓存的时候，服务器会返回HTTP状态码304，让客户端直接 从本地缓存里面读取文件。
 
-
 ### 浏览器缓存
-> localStorage、sessionStorage、cookie
\ No newline at end of file
+
+> localStorage、sessionStorage、cookie
diff --git "a/docs/Interview/CSS/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md" "b/docs/Interview/CSS/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md"
index eae2b2ab..98bc7d2b 100644
--- "a/docs/Interview/CSS/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md"
+++ "b/docs/Interview/CSS/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md"
@@ -1,7 +1,5 @@
 # CSS基础面试题
 
-
-
 ## [伪类与伪元素](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
 
 ::: tip 解释
@@ -25,77 +23,79 @@
 
 :::
 
-
 ## 水平垂直居中
+
 1. 行内元素：`text-align 与 line-height`
-块级元素：
+   块级元素：
 1. flex + margin:auto、grid + margin:auto
+
 ```css
-.parent{
+.parent {
   display: flex; /* grid */
 }
-.children{
-  margin:auto; 
+.children {
+  margin: auto;
 }
 ```
 
 2. flex布局
+
 ```css
-.parent{
-  display: flex; 
+.parent {
+  display: flex;
   justify-content: center;
-  align-items:center;
+  align-items: center;
 }
 ```
 
 3. grid布局
+
 ```css
-.parent{
-  display: grid; 
+.parent {
+  display: grid;
   justify-content: center;
-  align-items:center;/* 网格内项目垂直居中 */
+  align-items: center; /* 网格内项目垂直居中 */
 }
 
 /* 或 */
 
-.box{
+.box {
   display: grid;
-  justify-content:center;
-  align-content: center;/* 容器内网格垂直居中 */
+  justify-content: center;
+  align-content: center; /* 容器内网格垂直居中 */
 }
 ```
 
 4. 绝对定位 + transform
+
 ```css
-.parent{
+.parent {
   position: relative;
 }
-.children{
+.children {
   position: absolute;
   top: 50%;
-  left:50%;
-  transform: translate(-50%,-50%);   
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 ```
+
 5. 绝对定位 + margin
+
 ```css
-.parent{
+.parent {
   position: relative;
 }
-.children{
+.children {
   position: absolute;
   top: 0;
-  left:0;
-  right:0;
-  bottom:0;
-  margin:auto;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
 }
 ```
 
-
-
-
-
 ## 盒模型的理解
 
 当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准，把每个元素表示为一个矩形的盒子。
@@ -108,44 +108,47 @@
 
 这样能够更精确地控制元素的尺寸和定位，元素的宽度和高度可以直接指定为内容区域的尺寸，而无需考虑内边距和边框。
 
-##  *[BFC](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts)* 及其应用
+## _[BFC](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts)_ 及其应用
 
-所谓 *BFC*（**块格式化上下文**），指的是一个独立的布局环境，*BFC* 内部的元素布局与外部互不影响。
+所谓 _BFC_（**块格式化上下文**），指的是一个独立的布局环境，_BFC_ 内部的元素布局与外部互不影响。
 
 - 浮动元素(`float` 值不为 `none`)
 - 块级元素的 overflow 属性不为 `visible,clip`
 - 绝对定位的元素 包含 `position: fixed` 或`position: absolute`
 - `display: inline-block`，`display: table-cell`，`flex，grid`
 
-
 **应用**
 
 1. 解决相邻元素外边距塌陷
 2. 清除浮动解决父元素高度塌陷
 
 ## CSS 选择器
+
 `!important`权重最高
 
 **权重**：
 
 1000：内联样式
 
-100： id选择器  
+100： id选择器
 
-10：类、伪类、属性选择器  
+10：类、伪类、属性选择器
 
-1：标签、伪元素选择器 
+1：标签、伪元素选择器
 
-0：子元素、后代、通配符、相邻选择器 
+0：子元素、后代、通配符、相邻选择器
 
 多个可进行累加，相同属性后定义覆盖先定义。
 
 ![2023-03-18-23-39-34](https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-03-18-23-39-34.png)
+
 ## 如何实现动画
+
 1. 用 CSS `@keyframes`关键帧
 2. 使用 JS 的 `setInterval` 或 `requestAnimationFrame`，手动控制元素的位置和样式来实现动画效果
 
 ## 实现渐变背景
+
 1. 使用 CSS3 渐变，通过 `linear-gradient` 或 `radial-gradient` 属性来实现，
    `background: linear-gradient(to right, #ff00cc, #333399)`
 
@@ -153,12 +156,12 @@
 
 ```html
 <svg width="100%" height="100%">
-   <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-     <stop offset="0%" stop-color="#f00"/>
-     <stop offset="100%" stop-color="#00f"/>
-   </linearGradient>
-   <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)"/>
- </svg>
+  <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+    <stop offset="0%" stop-color="#f00" />
+    <stop offset="100%" stop-color="#00f" />
+  </linearGradient>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
+</svg>
 ```
 
 ## 定位position
@@ -173,22 +176,14 @@
 
 **黏性定位**`sticky`：相对于*最近滚动祖先*定位，滚动到元素top小于设定值(top:20px;)则转为固定定位。（relative+fixed）
 
-
-
-
-
 ## 隐藏元素的方式
 
 ![image-20230221172950214](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302211729743.png)
 
-
-
-
-
 ## 用css3实现饼图
 
 ```css
-.pie{
+.pie {
   width: 500px;
   height: 500px;
   border-radius: 50%;
@@ -204,33 +199,30 @@
 }
 ```
 
-
-
 ## margin和padding适用场景
 
-| margin                                                       | Padding                                                      |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
-| 需要在边框**外**留白                                         | 需要在边框**内**留白                                         |
-| 留白处**不需要**背景色时                                     | 留白处**需要**背景色时                                       |
+| margin                                                          | Padding                                                      |
+| --------------------------------------------------------------- | ------------------------------------------------------------ |
+| 需要在边框**外**留白                                            | 需要在边框**内**留白                                         |
+| 留白处**不需要**背景色时                                        | 留白处**需要**背景色时                                       |
 | 上下相连的元素，会相互**抵消**15px+20px的margin，得到20px的空白 | 上下相连的元素，会**累加**15px+20px的padding，得到35px的空白 |
 
 **清除margin塌陷**
 兄弟相邻元素：overflow: hidden、flex 布局
 
 ```html
- <div class="container">
-      <div class="item">1</div>
-      <!--<div class="wrap">  1.额外包一层并加上 overflow: hidden;-->
-        <div class="item">2</div>
-      <!--</div>-->
-    </div>
+<div class="container">
+  <div class="item">1</div>
+  <!--<div class="wrap">  1.额外包一层并加上 overflow: hidden;-->
+  <div class="item">2</div>
+  <!--</div>-->
+</div>
 ```
 
 ```css
 .container {
   border: 1px solid #ccc;
   /* 2.形成 BFC: display: flex; */
-  
 }
 .wrap {
   overflow: hidden;
@@ -246,7 +238,7 @@
 
 父子相邻 margin 重叠
 
-（1）给父元素添加透明边框 
+（1）给父元素添加透明边框
 
 （2）给父元素添加overflow: hidden;
 
@@ -256,8 +248,8 @@
 
 （5）将子元素都margin改为父元素的padding
 
-
 ## 可替换元素
+
 在 HTML 中， 是指其内容不受文档流影响，而是由外部资源定义的元素。
 
 这些元素的内容可以通过 CSS 样式或者 JavaScript 来修改，但是本身的标签和属性并不能直接控制其显示效果。
@@ -265,6 +257,7 @@
 常见的可替换元素包括 img、input、textarea、select、video、audio
 
 ## Canvas和SVG区别
+
 Canvas和SVG都是用于创建图形的HTML5元素，但它们有着不同的工作原理和适用场景。
 
 Canvas是一种基于位图的绘图技术，它使用JavaScript在HTML5画布中创建像素级别的图形，可以制作出非常复杂的动态效果。Canvas要求开发者掌握像素级别的操作，需要自己编写代码来实现各种绘图功能，因此相对较难掌握。
@@ -285,7 +278,7 @@ Canvas是一种基于位图的绘图技术，它使用JavaScript在HTML5画布
 
 3. 简单易用：使用Base64编码的图片无需考虑图片路径等问题，只需要将编码后的字符串嵌入到HTML或CSS代码中即可。
 
-4. 可减少服务器负载：由于使用Base64编码的图片无需额外的文件下载，减少了服务器的负载。这对于高流量网站来说非常重要。 
+4. 可减少服务器负载：由于使用Base64编码的图片无需额外的文件下载，减少了服务器的负载。这对于高流量网站来说非常重要。
 
 **缺点：**
 
@@ -310,13 +303,12 @@ Canvas是一种基于位图的绘图技术，它使用JavaScript在HTML5画布
 6. 懒加载：懒加载可以避免在页面中加载不必要的图片，只有用户需要查看某张图片时才会被加载。这种方式可以大幅减少初始页面加载时间，提高用户体验。
 
 7. 合并多个小图片成一张大图：将多张小图片合并到一张大图中，通过CSS定位显示指定位置的小图片，可以减少请求次数，提高页面加载速度。
-## 优雅降级和渐进增强 
+
+## 优雅降级和渐进增强
 
 优雅降级：在编写项目时，直接针对最高级、最稳定的版本进行开发。然后在后续对低版本进行兼容。
 渐进增强：在编写项目时，针对自己想个兼容的最低版本进行开发。然后在后续对高版本的新特性开发，或者更好的体验
 
-
-
 ## 新项目css架构设计入手方向
 
 1. 公共变量（主题色/主要空隙/主要字号字体等）
@@ -325,19 +317,13 @@ Canvas是一种基于位图的绘图技术，它使用JavaScript在HTML5画布
 4. 目录约定（mixin/common/theme/module/response）
 5. 私有化方案（scoped/css module/css in js）
 
-
-
 ## Tailwindcss断点对应设备
 
-
-
-
-| Breakpoint prefix | Minimum width | CSS                                  | 代表设备   |
-| ----------------- | ------------- | ------------------------------------ | --------- |
-| 不写               | -             | -                                    | 手机       |
-| `sm`              | 640px         | `@media (min-width: 640px) { ... }`  | 大屏手机 |
+| Breakpoint prefix | Minimum width | CSS                                  | 代表设备                             |
+| ----------------- | ------------- | ------------------------------------ | ------------------------------------ |
+| 不写              | -             | -                                    | 手机                                 |
+| `sm`              | 640px         | `@media (min-width: 640px) { ... }`  | 大屏手机                             |
 | `md`              | 768px         | `@media (min-width: 768px) { ... }`  | 768-1024代表 Ipad（Ipad Mini = 768） |
-| `lg`              | 1024px        | `@media (min-width: 1024px) { ... }` | iPad Pro |
-| `xl`              | 1280px        | `@media (min-width: 1280px) { ... }` | 小型笔记本 |
-| `2xl`             | 1536px        | `@media (min-width: 1536px) { ... }` | 电脑显示器 |
-
+| `lg`              | 1024px        | `@media (min-width: 1024px) { ... }` | iPad Pro                             |
+| `xl`              | 1280px        | `@media (min-width: 1280px) { ... }` | 小型笔记本                           |
+| `2xl`             | 1536px        | `@media (min-width: 1536px) { ... }` | 电脑显示器                           |
diff --git "a/docs/Interview/CSS/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md" "b/docs/Interview/CSS/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md"
index 1e582393..fba683eb 100644
--- "a/docs/Interview/CSS/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md"
+++ "b/docs/Interview/CSS/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md"
@@ -1,18 +1,19 @@
 ## 实现一个元素的宽高比
+
 ```css
 .wrapper {
-    width: 100%;
-    height: 0;
-    padding-top: 56.25%; /* 16:9 宽高比 */
-    position: relative;
+  width: 100%;
+  height: 0;
+  padding-top: 56.25%; /* 16:9 宽高比 */
+  position: relative;
 }
 
 .content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }
 ```
 
@@ -20,20 +21,20 @@
 
 ```css
 .square::after {
-  content: "";
+  content: '';
   display: block;
   padding-bottom: 100%;
 }
 ```
 
 ## Sass 中@mixin 与@extend的区别
+
 ::: details 主要区别在于代码生成的方式
 @mixin会直接将@mixin中的样式复制到@include处，而@extend则会生成一个新的选择器，并继承被@extend的选择器的样式。
 因此，@mixin适用于将一组样式应用于多个选择器，而@extend适用于继承现有样式并生成新的选择器。
 :::
 
 ```scss
-
 /* @extend：在现有样式加上加上新类名 */
 .button-style {
   background-color: blue;
@@ -67,13 +68,14 @@
 }
 ```
 
-
 **转化结果：**
 
 ```css
 @charset "UTF-8";
 /* @extend：在现有样式加上加上新类名 */
-.button-style, .button-secondary, .button-primary {
+.button-style,
+.button-secondary,
+.button-primary {
   background-color: blue;
   color: white;
   border: none;
@@ -94,4 +96,4 @@
   border: none;
   padding: 10px;
 }
-```
\ No newline at end of file
+```
diff --git "a/docs/Interview/JavaScript/Promise\347\233\270\345\205\263.md" "b/docs/Interview/JavaScript/Promise\347\233\270\345\205\263.md"
index 30ace675..29570a47 100644
--- "a/docs/Interview/JavaScript/Promise\347\233\270\345\205\263.md"
+++ "b/docs/Interview/JavaScript/Promise\347\233\270\345\205\263.md"
@@ -1,173 +1,181 @@
 ## 前端如何做到并发请求
 
-1.	使用AJAX及其各种高级封装的异步技术，如jQuery的$.ajax()、axios等；
-2.	使用Promise(ES6)异步编程，如使用axios.all()或者Promise.all()多个请求并发发出；
-3.	使用Web Workers技术，将任务并发分发到多个Web Worker中执行；
-4.	使用WebSocket技术，可单个持久链接上进行多次请求；
-5.	使用Stream API技术，浏览器可以同时消费多个数据流，实现多个请求的并发；
-6.	使用定时器setInterval()及setTimeout()，可定时发出多个需要并发请求；
-
+1. 使用AJAX及其各种高级封装的异步技术，如jQuery的$.ajax()、axios等；
+2. 使用Promise(ES6)异步编程，如使用axios.all()或者Promise.all()多个请求并发发出；
+3. 使用Web Workers技术，将任务并发分发到多个Web Worker中执行；
+4. 使用WebSocket技术，可单个持久链接上进行多次请求；
+5. 使用Stream API技术，浏览器可以同时消费多个数据流，实现多个请求的并发；
+6. 使用定时器setInterval()及setTimeout()，可定时发出多个需要并发请求；
 
 ### 方法一:封装队列
+
 ```js
- class taskQueue {
-    constructor() {
-      this.queue = [];
-      this.result = [];
-      this.error = [];
-      this.max = 3;
-      setTimeout(() => {
-        this.run();
-      }, 0);
-    }
-    addTask(task) {
-      this.queue.push(task);
-    }
-    async run() {
-      const length = this.queue.length;
-      if (length === 0) return;
-      const min = Math.min(length, this.max);
-      for (let i = 0; i < min; i++) {
-        this.max--; //开始占用任务空间
-        const task = this.queue.shift();
-        try {
-          const res = await task();
-          console.log("[ res ]-131", res);
-          this.result.push(res);
-        } catch (err) {
-          this.error.push(err);
-        } finally {
-          this.max++; //释放占用空间
-          this.run();
-        }
+class taskQueue {
+  constructor() {
+    this.queue = []
+    this.result = []
+    this.error = []
+    this.max = 3
+    setTimeout(() => {
+      this.run()
+    }, 0)
+  }
+
+  addTask(task) {
+    this.queue.push(task)
+  }
+
+  async run() {
+    const length = this.queue.length
+    if (length === 0)
+      return
+    const min = Math.min(length, this.max)
+    for (let i = 0; i < min; i++) {
+      this.max-- // 开始占用任务空间
+      const task = this.queue.shift()
+      try {
+        const res = await task()
+        console.log('[ res ]-131', res)
+        this.result.push(res)
+      }
+      catch (err) {
+        this.error.push(err)
+      }
+      finally {
+        this.max++ // 释放占用空间
+        this.run()
       }
     }
   }
+}
 
-  //测试
-  function createTask(delay) {
-    return () => {
-      return new Promise((resolve, reject) => {
-        setTimeout(() => {
-          resolve("✅" + delay);
-          // delay % 3 ? resolve("✅" + delay) : reject("❌" + delay);
-        }, delay);
-      });
-    };
+// 测试
+function createTask(delay) {
+  return () => {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(`✅${delay}`)
+        // delay % 3 ? resolve("✅" + delay) : reject("❌" + delay);
+      }, delay)
+    })
   }
-  const task = new taskQueue();
-  const times = [100, 2600, 400, 300, 500, 600, 900, 800, 700, 1000];
-  times.forEach((item) => {
-    task.addTask(createTask(item));
-  });
+}
+const task = new taskQueue()
+const times = [100, 2600, 400, 300, 500, 600, 900, 800, 700, 1000]
+times.forEach((item) => {
+  task.addTask(createTask(item))
+})
 ```
 
 ### 方法二:函数封装
+
 ```js
 // 并发请求函数
-const concurrencyRequest = (tasks, maxNum) => {
+function concurrencyRequest(tasks, maxNum) {
   return new Promise((resolve) => {
     if (tasks.length === 0) {
-      resolve([]);
-      return;
+      resolve([])
+      return
     }
-    const results = [];
-    let index = 0; // 下一个请求的下标
-    let count = 0; // 当前请求完成的数量
+    const results = []
+    let index = 0 // 下一个请求的下标
+    let count = 0 // 当前请求完成的数量
 
     // 发送请求
     async function request() {
-      if (index === tasks.length) return;
-      const i = index; // 保存序号，使result和tasks相对应
-      index++;
+      if (index === tasks.length)
+        return
+      const i = index // 保存序号，使result和tasks相对应
+      index++
       try {
-        const resp = await tasks[i]();
-        console.log("[ resp ]-29", resp);
-        results[i] = resp;
-      } catch (err) {
-        results[i] = err;
-      } finally {
-        count++;
+        const resp = await tasks[i]()
+        console.log('[ resp ]-29', resp)
+        results[i] = resp
+      }
+      catch (err) {
+        results[i] = err
+      }
+      finally {
+        count++
         // 判断是否所有的请求都已完成
         if (count === tasks.length) {
-          console.log("完成了");
-          resolve(results);
+          console.log('完成了')
+          resolve(results)
         }
-        request();
+        request()
       }
     }
-    const times = Math.min(maxNum, tasks.length);
-    for (let i = 0; i < times; i++) {
-      request();
-    }
-  });
-};
+    const times = Math.min(maxNum, tasks.length)
+    for (let i = 0; i < times; i++)
+      request()
+  })
+}
 
-//测试代码
+// 测试代码
 function createTask(delay) {
-    return () => {
-      return new Promise((resolve, reject) => {
-        setTimeout(() => {
-          resolve("✅" + delay);
-          // delay % 3 ? resolve("✅" + delay) : reject("❌" + delay);
-        }, delay);
-      });
-    };
+  return () => {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(`✅${delay}`)
+        // delay % 3 ? resolve("✅" + delay) : reject("❌" + delay);
+      }, delay)
+    })
   }
-  const times = [100, 2600, 400, 300, 500, 600, 900, 800, 700, 1000];
-  const tasks = times.map((item) => createTask(item));
-  console.log("[ tasks ]-141", tasks);
-  concurrencyRequest(tasks, 3).then((res) => {
-    console.log("[ res ]-143", res);
-  });
+}
+const times = [100, 2600, 400, 300, 500, 600, 900, 800, 700, 1000]
+const tasks = times.map(item => createTask(item))
+console.log('[ tasks ]-141', tasks)
+concurrencyRequest(tasks, 3).then((res) => {
+  console.log('[ res ]-143', res)
+})
 ```
 
-
 ## Web Worker
 
 可以创建一个独立线程, 因为不会阻塞主线程运行,可以将比较耗费资源操作放在里面执行,比如耗时计算,可以通过 `postMessage` 进行线程间通信
 
 ```js
 // 主线程
-var worker = new Worker('worker.js')
+const worker = new Worker('worker.js')
 worker.postMessage([10, 24])
-worker.onmessage = function(e) {
-    console.log(e.data)
+worker.onmessage = function (e) {
+  console.log(e.data)
 }
 
 // Worker 线程
 onmessage = function (e) {
-    if (e.data.length > 1) {
-        postMessage(e.data[1] - e.data[0])
-    }
+  if (e.data.length > 1)
+    postMessage(e.data[1] - e.data[0])
 }
 
 // 主线程
 worker.terminate()
 ```
+
 在 Worker 线程中，self 和 this 都代表子线程的全局对象。对于监听 message 事件，以下的四种写法:
 
 ```js
 // 写法 1
-self.addEventListener('message', function (e) {
-    // ...
+self.addEventListener('message', (e) => {
+  // ...
 })
 
 // 写法 2
-this.addEventListener('message', function (e) {
-    // ...
+this.addEventListener('message', (e) => {
+  // ...
 })
 
 // 写法 3
-addEventListener('message', function (e) {
-    // ...
+addEventListener('message', (e) => {
+  // ...
 })
 
 // 写法 4
 onmessage = function (e) {
-    // ...
+  // ...
 }
 ```
+
 ## Service Worker
 
 服务器与浏览器之间的中间人，如果网站中注册了**Service Worker**那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器,我们在**Service Worker** 中可以做拦截客户端的请求、向客户端发送消息、向服务器发起请求等先关操作，其中最重要且广泛的的作用就是离线资源缓存。
@@ -188,4 +196,4 @@ onmessage = function (e) {
 :::warning
 
 不能访问 DOM、不能同步操作
-:::
\ No newline at end of file
+:::
diff --git "a/docs/Interview/JavaScript/\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.md" "b/docs/Interview/JavaScript/\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.md"
index b93f9f7b..cf37406a 100644
--- "a/docs/Interview/JavaScript/\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.md"
+++ "b/docs/Interview/JavaScript/\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.md"
@@ -9,75 +9,80 @@
 4. 对构造函数有返回值的处理判断：
    1. 如果构造函数没有显式地返回对象，返回新创建的对象；(基本类型忽略)
    2. 如果构造函数返回了一个对象，则返回该对象。(引用类型返回)
+
 ```js
 function Person(name, age) {
-  this.name = name;
-  this.age = age;
+  this.name = name
+  this.age = age
 }
 
-var person = new Person('Alice', 18);
-console.log(person); // { name: 'Alice', age: 18 }
-//new Person('Alice', 18)会创建一个新的对象，并执行Person函数，将this关键字指向新对象。最后返回新对象，赋值给变量person。
+const person = new Person('Alice', 18)
+console.log(person) // { name: 'Alice', age: 18 }
+// new Person('Alice', 18)会创建一个新的对象，并执行Person函数，将this关键字指向新对象。最后返回新对象，赋值给变量person。
 ```
+
 ## 原型和原型链
+
 作用：解决构造函数浪费内存问题，实现对象属性和方法的共享。
 
 ```js
-function Star(){
+function Star() {
 
 }
-let star1 = new Star
- star1.__proto__ === star1.constructor.prototype 
- Star === Start.prototype.constructor
- Object.prototype.__proto__ //null
- Object instanceof Function   //Object顶级对象是 顶级构造器 Fcuntion 的实例   
-
+const star1 = new Star()
+star1.__proto__ === star1.constructor.prototype
+Star === Start.prototype.constructor
+Object.prototype.__proto__ // null
+Object instanceof Function // Object顶级对象是 顶级构造器 Fcuntion 的实例
 ```
+
 ![2023-03-03-14-31-08](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-03-14-31-08.png)
 ![2023-03-03-14-55-44](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-03-14-55-44.png)
 ![2023-03-03-16-50-56](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-03-16-50-56.png)
+
 ### 函数的隐式原型对象
+
 ```js
-function test(){}
-test.__proto__ == Function.prototype   //ture
+function test() {}
+test.__proto__ == Function.prototype // ture
 ```
 
 本身 ---> 构造函数.prototype(本身`.__proto__`) ---> 构造函数原型对象的原型`.prototype.__proto__`...--->Object.prototype ---> null
 
+## JS继承有哪些方式
 
- ## JS继承有哪些方式
- ### 方式一：ES6
+### 方式一：ES6
 
 ```js
-class Parent{
-	constructor(){
-		this.age = 18;
-	}
+class Parent {
+  constructor() {
+    this.age = 18
+  }
 }
 
-class Child extends Parent{
-	constructor(){
-		super();
-		this.name = '张三';
-	}
+class Child extends Parent {
+  constructor() {
+    super()
+    this.name = '张三'
+  }
 }
-let o1 = new Child();
-console.log( o1,o1.name,o1.age );
+const o1 = new Child()
+console.log(o1, o1.name, o1.age)
 ```
 
 ### 方式二：原型链继承
 
 ```js
-function Parent(){
-	this.age = 20;
+function Parent() {
+  this.age = 20
 }
-function Child(){
-	this.name = '张三'
+function Child() {
+  this.name = '张三'
 }
-//子构造函数原型对象指向父构造函数实例
-Child.prototype = new Parent();
-let o2 = new Child();
-console.log( o2,o2.name,o2.age );
+// 子构造函数原型对象指向父构造函数实例
+Child.prototype = new Parent()
+const o2 = new Child()
+console.log(o2, o2.name, o2.age)
 ```
 
 ### 方式三：借用构造函数继承
@@ -92,4 +97,4 @@ function Child(){
 }
 let o3 = new Child();
 console.log( o3,o3.name,o3.age );
-```
\ No newline at end of file
+```
diff --git "a/docs/Interview/JavaScript/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md" "b/docs/Interview/JavaScript/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md"
index b281f862..632e527d 100644
--- "a/docs/Interview/JavaScript/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md"
+++ "b/docs/Interview/JavaScript/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md"
@@ -1,39 +1,44 @@
 # 常见基础面试题
+
 ## 数据类型
+
 原始类型：`number,string,boolean,null,undefined,bigint,symbol`
 
 引用类型：Object
-  - 标准普通对象：`Object`
-  - 标准准特殊对象：`Array,Date,Math,Error,RegExp`
-  - 非标准特殊对象（包装类型）：`Number,String,Boolean`
-  - 可执行对象：`Function`
+
+- 标准普通对象：`Object`
+- 标准准特殊对象：`Array,Date,Math,Error,RegExp`
+- 非标准特殊对象（包装类型）：`Number,String,Boolean`
+- 可执行对象：`Function`
 
 :::tip Symbol应用
+
 1. 对象**唯一值**属性
 2. 唯一标识统一管理（pinia 中的 storeId）
 3. iterator底层实现机制
-:::
+   :::
 
 ### 类型检测方式
+
 1. typeof：所有数据类型，在计算机底层都是按照‘64 位二进制’进行存储的，
    typeof是按照二进制值进行检测类型的
    :::details 详细转换机制
 1. 若二进制前三位是‘0’,并且实现了 `call` 方法，则返回 `function`，没有实现则返回 `object`
-2. null是 64 个 ‘0’，`typeof null` ---> 'object'(局限性)
-3. 检测未被声明的变量，返回 `undefined`
-:::
-
+1. null是 64 个 ‘0’，`typeof null` ---> 'object'(局限性)
+1. 检测未被声明的变量，返回 `undefined`
+   :::
 
 ```js
-const isObj = option =>  option !== null && (typeof option === 'object' || typeof option === 'function')
+const isObj = option => option !== null && (typeof option === 'object' || typeof option === 'function')
 ```
+
 ## 数据类型转换
 
 ### 其他类型转为数字类型
 
 规则：
 
-1. **宇符串转换为数宇**：空宇符串变为0，如果出现任何非有效数宇宇符，结果都是NaN       
+1. **宇符串转换为数宇**：空宇符串变为0，如果出现任何非有效数宇宇符，结果都是NaN
 
 2. **把布尔转换为数宇**：`true->1 ; false->0`
 
@@ -45,10 +50,10 @@ const isObj = option =>  option !== null && (typeof option === 'object' || typeo
 
 6. **把对象转换为数字**：
 
- - 先调用对線的 `Symbol.toPrimitive` 这个方法，如果不存在这个方法 
- - 再调用对泉的 `valueof` 获取原始值，如果获取的值不是原始值，比如数组
- - 再调用对線的 `toString` 把其变为字符串
- - 最后再把宇符串基于Number方法转换为数字
+- 先调用对線的 `Symbol.toPrimitive` 这个方法，如果不存在这个方法
+- 再调用对泉的 `valueof` 获取原始值，如果获取的值不是原始值，比如数组
+- 再调用对線的 `toString` 把其变为字符串
+- 最后再把宇符串基于Number方法转换为数字
 
 ```js
 parseInt(val,radix) parseFloat(val)
@@ -58,34 +63,40 @@ parseInt(null) 和 parseInt(undefined) -> NaN
       遇到一个非有效数字字符，则停止查找，并 parseInt(之前符合的字符串)  parseInt('12px') -> 12
 */
 ```
+
 ![2023-03-04-22-31-38](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-04-22-31-38.png)
 
 ### 其他类型转为字符串
-  隐式转换：`String(val)`
-  ```js
-  let a = '10'
-  let n = a++ // 10（数字）  ++a / a++ 一定是数字运算
-  //+出现在左边，转换为数字    +'10'->10
-  ```
+
+隐式转换：`String(val)`
+
+```js
+let a = '10'
+const n = a++ // 10（数字）  ++a / a++ 一定是数字运算
+// +出现在左边，转换为数字    +'10'->10
+```
+
 ![2023-03-04-22-57-17](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-04-22-57-17.png)
+
 ### 其他类型转为布尔类型
-  除了falsy值： `0、-0、NaN、null、undefined、空串`，其余都是 `true`
 
-## 相等与全等区别 
+除了falsy值： `0、-0、NaN、null、undefined、空串`，其余都是 `true`
+
+## 相等与全等区别
 
 > 相等(==)：两边数据类型不同，会先进行类型转换，再进行比较
-   1. **对象与字符串**：对象转字符串 `Symbol.toPrimitive -> valueOf -> toString`，再比较
-   2. `null == undefined --> true ` ；null/undefined 与其他任何值都不相等
-   3. **对象与对象**，比较的是内存地址是否相同
-   4. **NaN 与其他**，NaN 不与任何值相等，`NaN == NaN --> false`
-   5. **除了以上情况**，只要两边类型不一致，剩下的都是转为数字，再进行比较
-> 全等(===)：两个操作数类型相同，值也需相同才返回 true
 
+1.  **对象与字符串**：对象转字符串 `Symbol.toPrimitive -> valueOf -> toString`，再比较
+2.  `null == undefined --> true ` ；null/undefined 与其他任何值都不相等
+3.  **对象与对象**，比较的是内存地址是否相同
+4.  **NaN 与其他**，NaN 不与任何值相等，`NaN == NaN --> false`
+5.  **除了以上情况**，只要两边类型不一致，剩下的都是转为数字，再进行比较
+    > 全等(===)：两个操作数类型相同，值也需相同才返回 true
 
 **可用==的情况**：使用时相当于 `obj.a === null || obj.a === undefined`
-1. 判断对象的属性是否存在 `obj.a == null` 
-2. 判断函数的参数是否存在 `arg == null`  
 
+1. 判断对象的属性是否存在 `obj.a == null`
+2. 判断函数的参数是否存在 `arg == null`
 
 :::details 面试题
 
@@ -119,13 +130,16 @@ Object.defineProperty(window, 'a', {
   }
 })
 ```
+
 :::
 
 ## 怎么解决精度问题
+
 > **根本原因**：所有数据类型在计算机底层都是以*64位*二进制存储的，可能出现无限循环，超过 64 位部分被丢弃
 
 1. 将数字转为整数【扩大系数法】
 2. 第三方库：Math.js, decimal.js, big.js
+
 ## var/let/const 区别
 
 |                  | var  | let    | const            |
@@ -138,7 +152,7 @@ Object.defineProperty(window, 'a', {
 
 > 函数声明会覆盖其他的同名的变量声明。如果有多个函数声明，则是由最后的一个函数声明覆盖之前所有的声明。
 
-### const  
+### const
 
 1. 声明必须初始化
 
@@ -148,9 +162,11 @@ Object.defineProperty(window, 'a', {
 
    - 引用类型：变量指向的内存地址，保存的只是一个指向实际数据的指针；
 
-      const 只能保证指针固定，不能控制指向的数据结构。
- ### 暂存性死区
- :::tip 暂存性死区
+     const 只能保证指针固定，不能控制指向的数据结构。
+
+### 暂存性死区
+
+:::tip 暂存性死区
 暂存性死区：使用 `let / const ` 定义该变量之前的区域，
 
 不能在声明前访问，作用域内被声明，不受外部影响
@@ -158,9 +174,10 @@ Object.defineProperty(window, 'a', {
 基于 let/const 变量声明，在词法解析阶段就已经明确了未来上下文中必定会有相关变量声明;
 
 如果在声明前使用，则报错 `Uncaught ReferenceError`
-::: 
+:::
 
 ## this指向
+
 1. 全局作用域中或者普通函数中指向全局对象window
 2. 立即执行函数必定指向window
 3. 构造函数中指向对象实例
@@ -179,15 +196,15 @@ Object.defineProperty(window, 'a', {
 ### 防抖
 
 ```js
-//实现原理：每次触发事件时，取消之前的定时器，重新计时
-function debounce(func,delay = 500){
-
+// 实现原理：每次触发事件时，取消之前的定时器，重新计时
+function debounce(func, delay = 500) {
   let timer = null
-  return function(...args){
-    if(timer) clearTimeout(timer) //清除上一次
-    timer = setTimeout(() =>{
-      func.apply(this,args)
-    },delay)
+  return function (...args) {
+    if (timer)
+      clearTimeout(timer) // 清除上一次
+    timer = setTimeout(() => {
+      func.apply(this, args)
+    }, delay)
   }
 }
 ```
@@ -197,15 +214,15 @@ function debounce(func,delay = 500){
 ```js
 function debounce(func,delay = 500，immediate=false){
   //参数判断处理
-	if(typeof func !== 'function') throw new TypeError('func is not a funciton')
+  if(typeof func !== 'function') throw new TypeError('func is not a funciton')
   //debounce(func,true)
   if(typeof delay === 'boolean'){
      immediate = delay
      delay = undefined
   }
-  isNaN(delay = +delay) ? 500 : delay	//若不是数字则默认 500
-	if(typeof immediate !== 'boolean') immediate = false
-  
+  isNaN(delay = +delay) ? 500 : delay  //若不是数字则默认 500
+  if(typeof immediate !== 'boolean') immediate = false
+
   let timer = null
   return function(...args){
     //第一次自执行完，timer 已经有值，
@@ -220,7 +237,7 @@ function debounce(func,delay = 500，immediate=false){
     //若为立即执行，则第一次，开启边界触发
     if(now) func.apply(this,args)
   }
-}	
+}
 ```
 
 :::
@@ -233,7 +250,7 @@ function debounce(func,delay = 500，immediate=false){
 function throttle(func,delay){
   let timer = null
   return function(...args){
-    if(timer) return 
+    if(timer) return
     timer = setTimeout(()=>{
       func.apply(this,...args)
       timer = null
@@ -244,7 +261,7 @@ function throttle(func,delay){
 function throttle(func,delay){
   let flag = true //节流阀：开启状态
   return function(...args){
-    if(!flag) return 
+    if(!flag) return
     flag = false //已经在处理：关闭
     setTimeout(() =>{
       func.apply(this,args)
@@ -259,24 +276,20 @@ funtion throttle(func,delay){
     let now = Data.now()
     if(now - start > delay){
        func.apply(this,args)
-   		 start = now
+        start = now
     }
   }
 }
 ```
 
-
-
 ::: tip 应用
 
-​	防抖：输入框搜索、编辑框实时保存，（手机息屏策略，王者荣耀回城操作）
+​ 防抖：输入框搜索、编辑框实时保存，（手机息屏策略，王者荣耀回城操作）
 
-​	节流：滚动到底部加载更多、图标跟随鼠标（地铁发车时间，王者荣耀技能冷却）
+​ 节流：滚动到底部加载更多、图标跟随鼠标（地铁发车时间，王者荣耀技能冷却）
 
 :::
 
-
-
 ## 前端本地存储方式
 
 #### 区别
@@ -292,32 +305,27 @@ funtion throttle(func,delay){
 **localStorage**
 
 ```js
-localStorage.setItem('key', 'value');   //添加数据
-let val = localStorage.getItem('key');  //读取数据
-localStorage.removeItem('key');         //移除单个
-localStorage.clear();                   //移除所有
+localStorage.setItem('key', 'value') // 添加数据
+const val = localStorage.getItem('key') // 读取数据
+localStorage.removeItem('key') // 移除单个
+localStorage.clear() // 移除所有
 ```
 
-
-
 **sessionStorage**
 
 ```js
-sessionStorage.setItem('key', 'value');  // 保存数据到 sessionStorage
-let data = sessionStorage.getItem('key');//获取数据
-sessionStorage.removeItem('key');        //删除
-sessionStorage.clear();                  //删除所有
-
+sessionStorage.setItem('key', 'value') // 保存数据到 sessionStorage
+const data = sessionStorage.getItem('key')// 获取数据
+sessionStorage.removeItem('key') // 删除
+sessionStorage.clear() // 删除所有
 ```
 
-
-
 **cookie**
 
 ```js
-let cookies = document.cookie           //同源下获取所有cookie
-document.cookie = 'key=value'           //添加
-document.cookie = "key=; expires=xxx"; 	//设定到期时间自动清除
+const cookies = document.cookie // 同源下获取所有cookie
+document.cookie = 'key=value' // 添加
+document.cookie = 'key=; expires=xxx' // 设定到期时间自动清除
 ```
 
 [**IndexedDB**](https://zhuanlan.zhihu.com/p/95076534)
@@ -330,16 +338,16 @@ document.cookie = "key=; expires=xxx"; 	//设定到期时间自动清除
 
 ```js
 function* helloWorldGenerator() {
-  let a = yield 'hello';
-  console.log(a) //123
-  let b = yield 'world';
-  console.log(b) //undefined
-  return 'ending';
+  const a = yield 'hello'
+  console.log(a) // 123
+  const b = yield 'world'
+  console.log(b) // undefined
+  return 'ending'
 }
 
-var hw = helloWorldGenerator();
+const hw = helloWorldGenerator()
 hw.next()
-hw.next(123) //a = 123
+hw.next(123) // a = 123
 ```
 
 `nex()`传参会赋值给上一次`yield`的的返回值
@@ -354,7 +362,7 @@ function* test(){
     },1000)
   })
   console.log(res1) //第一秒执行
-  
+
    let res2 = yield new Promise((resolve) =>{
     setTimeout(function(){
       resolve('第二秒执行')
@@ -363,7 +371,7 @@ function* test(){
 }
 
 function generatorRunner(fn){
-	let generator = fn()
+  let generator = fn()
   let step = generator.next()
   //定义递归函数
   function loop(stepArg,generator){
@@ -379,23 +387,24 @@ function generatorRunner(fn){
       }
     }else{
           //判断程序没有执行完就将本次结果传入下一步进入下一次递归
-  		if(!stepArg.done) loop(generator.next(stepArg.value),generator)
- 	}
+      if(!stepArg.done) loop(generator.next(stepArg.value),generator)
+   }
   }
   loop(step,generator)
 }
 ```
 
 ## requestAnimationFrame
+
 60HZ/1000ms = 16.67ms(显示屏每毫秒刷新频率)
 
 **起因**：setTimeout/setInterval是异步 API，设置的时间间隔没办法保证。
 
 **解决**：为了设置更精确动画时间间隔、达到平滑动画效果。用法类似 `setTimeout` API，
-      	  本质采用的是系统时间间隔，而不是 JS 执行时间间隔。
+本质采用的是系统时间间隔，而不是 JS 执行时间间隔。
 
-  希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
-  该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
+希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
+该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
 
 **用法**：
 ![2023-03-02-15-53-32](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-02-15-53-32.png)
@@ -407,8 +416,8 @@ function generatorRunner(fn){
 深拷贝：完全拷贝一份新的，新对象更改不会影响到旧对象
 :::
 
-
 浅拷贝
+
 ```js
 let newObj = Object.assign({},obj) //只拷贝对象自身的可枚举的属性
 let newObj = [...obj]
@@ -430,27 +439,31 @@ let newArr2 = arr.concat()
 //改变内部的引用类型两者都会有影响
 ```
 
-
 ```js
-//方式一：
-//会忽略undefined,function，RegExp,Date
-let newObj = JSON.parse(JSON.stringify(obj))
-
-//方式二：
-function deepClone(obj){
-  if(obj === null || typeof obj !== 'object') return obj
-  if(obj.constructor === Date) return new Date(obj); 
-  if(obj.constructor === RegExp) return new RegExp(obj);
-  let newObj = Array.isArray(obj) ? [] : {}
-  for(let key in obj){
-    if(obj.hasOwnProperty(key)) newObj[key] =  deepClone(obj[key])
+// 方式一：
+// 会忽略undefined,function，RegExp,Date
+const newObj = JSON.parse(JSON.stringify(obj))
+
+// 方式二：
+function deepClone(obj) {
+  if (obj === null || typeof obj !== 'object')
+    return obj
+  if (obj.constructor === Date)
+    return new Date(obj)
+  if (obj.constructor === RegExp)
+    return new RegExp(obj)
+  const newObj = Array.isArray(obj) ? [] : {}
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key))
+      newObj[key] = deepClone(obj[key])
   }
   return newObj
 }
 ```
 
 ## 事件捕获和冒泡机制
-**事件传播过程**：事件捕获 ---> 目标阶段---> 事件冒泡 
+
+**事件传播过程**：事件捕获 ---> 目标阶段---> 事件冒泡
 
 **事件捕获**：从根元素(html)向内传播，直到目标元素，途中会触发绑定事件捕获元素的回调。`element.addEventListener(event, function, true)`。
 
@@ -458,7 +471,6 @@ function deepClone(obj){
 
 ![](https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/202303191147836.png)
 
-
 阻止冒泡：`event.stopPropagation()`
 
 阻止默认行为：`event.preventDefault()`,例如：a标签跳转，表单按钮数据提交至服务器。
@@ -466,6 +478,7 @@ function deepClone(obj){
 阻止同一节点其他后绑定事件执行：`event.stopImmediatePropagation()`
 
 ## Promise链式调用
+
 是指在一个Promise对象上多次调用then方法，每个then方法都可以接收上一个Promise对象的返回值，
 
 并返回一个新的Promise对象，从而形成一个Promise链 ，从而实现多个异步操作的顺序执行和数据传递。
@@ -474,4 +487,4 @@ function deepClone(obj){
 
 如果then方法中返回了一个Promise对象，那么后续的then方法会等待该Promise对象的状态发生改变后再执行。
 
-可以避免回调地狱，使得代码更加清晰易读。
\ No newline at end of file
+可以避免回调地狱，使得代码更加清晰易读。
diff --git "a/docs/Interview/JavaScript/\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.md" "b/docs/Interview/JavaScript/\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.md"
index 6fe8e79a..bdc17cb9 100644
--- "a/docs/Interview/JavaScript/\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.md"
+++ "b/docs/Interview/JavaScript/\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.md"
@@ -1,28 +1,24 @@
 ## 字符串常用方法
 
-​	**都不会影响原字符串：因为字符串是不可变的！**
+​ **都不会影响原字符串：因为字符串是不可变的！**
 
-1. 增删改：`replace,replaceAll`	
+1. 增删改：`replace,replaceAll`
 
-2. 增：`repeat,concat,padStart,padEnd`	 
+2. 增：`repeat,concat,padStart,padEnd`
 
-3. 删：`substr,substring,slice,trim,trimStart,trimEnd`	 
+3. 删：`substr,substring,slice,trim,trimStart,trimEnd`
 
 4. 改：`split,toLowerCase,toUpperCase,toLocaleLowerCase,`
-
-   ​		`toLocaleUpperCase,`		`String.fromCharCode()`
+   ​ `toLocaleUpperCase,` `String.fromCharCode()`
 
 5. 查：`valueOf,at,charAt,charCodeAt,indexOf,lastIndexOf,`
-
-   ​		`search,includes,match,startsWith,endsWith`
-
-
+   ​ `search,includes,match,startsWith,endsWith`
 
 ### charCodeAt与fromCharCode
 
 ```js
-'ABC'.charCodeAt(2)  //67 返回指定索引位的 ASCII 码
-String.fromCharCode(65, 66, 67) //'ABC' 返回 ASCII 码对应的字符
+'ABC'.charCodeAt(2) // 67 返回指定索引位的 ASCII 码
+String.fromCharCode(65, 66, 67) // 'ABC' 返回 ASCII 码对应的字符
 ```
 
 ### slice 与 substring区别
@@ -52,14 +48,14 @@ console.log(y.substring(4)); //map.baidu.com
 ```
 
 ### valueOf 与 toString 的异同
- 
- **共同点** 
 
-   都是对象的方法，用于将对象转换成可操作的基本类型值。
+**共同点**
+
+都是对象的方法，用于将对象转换成可操作的基本类型值。
 
 |                      | valueOf                    | toString                             |
 | -------------------- | -------------------------- | ------------------------------------ |
-| 返回值               | 原始值或对象本身           | 对象转换成可阅读的字符串                 |
+| 返回值               | 原始值或对象本身           | 对象转换成可阅读的字符串             |
 | 能否接受参数转换基数 | 不可以                     | 可以，返回不同进制的字符串形式的数值 |
 | Date类型返回         | 现在到1970年1月1日的毫秒数 | 时间的字符串                         |
 
@@ -68,9 +64,8 @@ console.log(y.substring(4)); //map.baidu.com
 `Object.prototype.toString.toString()` 能够很好的判断数据的类型及内置对象
 
 ```js
-Number(10).toString(2)	//'1010'
-Number(10).valueOf(2)		//10
-new Date().toString()		//'Thu Mar 02 2023 11:39:56 GMT+0800 (中国标准时间)'
-new Date().valueOf() 		//1677728421211
+Number(10).toString(2)  // '1010'
+Number(10).valueOf(2) // 10
+new Date().toString() // 'Thu Mar 02 2023 11:39:56 GMT+0800 (中国标准时间)'
+new Date().valueOf() // 1677728421211
 ```
-
diff --git "a/docs/Interview/JavaScript/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md" "b/docs/Interview/JavaScript/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md"
index 0d3a3a18..c82e9b32 100644
--- "a/docs/Interview/JavaScript/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md"
+++ "b/docs/Interview/JavaScript/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md"
@@ -1,8 +1,6 @@
-# 常见进阶面试题 
-
- ## 模块化 
-
+# 常见进阶面试题
 
+## 模块化
 
 | JS运行的环境 | 全局对象 |                                                |
 | ------------ | -------- | ---------------------------------------------- |
@@ -11,27 +9,24 @@
 | Webpack      |          | Common JS&ES6Module都支持，支持相互之间的“混用 |
 | Vite         |          | 基于ES6Module规范，实现模块之间的相互引用      |
 
-
-
 ## 闭包
 
 闭包：作用域的一种特殊应用，内层函数作用域用到了外层函数作用域的变量。由于被内层函数引用，导致外层函数执行完变量不会被释放，就形成了闭包。
 
 :::details 闭包案例
+
 ```js
-function func(){
-  const val = 10 
-  return function(){
+function func() {
+  const val = 10
+  return function () {
     console.log(val)
   }
 }
 const val = 100
 const fn = func()
-fn()//10
+fn()// 10
 ```
 
-
-
 ```js
 function fn(){
   const data = {}
@@ -49,14 +44,12 @@ handle.set('name','zhangsan')
 handle.get('name')
 ```
 
-
-
 ```js
 const btns = document.querySelectorAll('.btn') //5个按钮
-for(val i = 0;i < btns.length; i++){	//改用 let 形成闭包
-	btns[i].onclick = function(){
+for(val i = 0;i < btns.length; i++){  //改用 let 形成闭包
+  btns[i].onclick = function(){
     console.log(i) //输出结果都是 5
-  } 
+  }
 }
 //==>
 for(val i = 0;i < btns.length; i++){
@@ -66,9 +59,8 @@ for(val i = 0;i < btns.length; i++){
   }})(i)
 }
 ```
-:::
-
 
+:::
 
 ### 应用
 
@@ -79,65 +71,71 @@ for(val i = 0;i < btns.length; i++){
 
 过度使用闭包会造成内存占用过多，容易造成内存泄漏，手动清空可解决问题。
 
-
 ## 函数柯里化
- :::details 数组求和
-  ```js
-  let arr = [1,2,3,4]
-  //方法一：
-  let sum = arr.reduce((pre,cur) => pre + cur,0)
-  //方法二：
-  eval(arr.join('+'))
-
-  ```
- :::
-
- :::details 实现 add(1,2)(3)
-  ```js
-  const add = function(...params){ // params:[1,2]
-    return function(...args){ //args:[3]
-      return params.concat(args).reduce((pre,cur) => cur+pre)
-    }
+
+:::details 数组求和
+
+```js
+const arr = [1, 2, 3, 4]
+// 方法一：
+const sum = arr.reduce((pre, cur) => pre + cur, 0)
+// 方法二：
+// eval(arr.join('+'))
+```
+
+:::
+
+:::details 实现 add(1,2)(3)
+
+```js
+const add = function(...params){ // params:[1,2]
+  return function(...args){ //args:[3]
+    return params.concat(args).reduce((pre,cur) => cur+pre)
   }
-  //简化
-  const add = (...params) => (...args) => params.concat(args).reduce((pre,cur) => pre + cur)
-
-  ```
- :::
-
-  :::details 实现 add(1)(2)(3)
-  ```js
-  const add = function(a){
-    return function(b){
-      return function(c){
-        return a + b + c
-      }
+}
+//简化
+// const add = (...params) => (...args) => params.concat(args).reduce((pre,cur) => pre + cur)
+
+```
+
+:::
+
+:::details 实现 add(1)(2)(3)
+
+```js
+const add = function(a){
+  return function(b){
+    return function(c){
+      return a + b + c
     }
   }
-  //简化
-  const add = a => b => c => a + b + c 
-
-  //柯里化：curring 函数
-  const curring = function(){
-    let params = []//利用闭包存储实参
-    const add = (...args) =>{
-      params = params.concat(args)
-      return add
-    }
-    //在对象转数字过程中，进行求和处理
-    add[Symbol.toPrimitive] = () => {
-      return params.reduce((pre,cur) => pre + cur)
-    }
+}
+//简化
+// const add = a => b => c => a + b + c
+
+//柯里化：curring 函数
+const curring = function(){
+  let params = []//利用闭包存储实参
+  const add = (...args) =>{
+    params = params.concat(args)
     return add
   }
-  const add = curring()
-  let sum = add(1)(2)(3)(4)(5)(6)
-  alert(sum) //21
-  console.log(+sum)//21
-  ```
- :::
-
- ### compose
+  //在对象转数字过程中，进行求和处理
+  add[Symbol.toPrimitive] = () => {
+    return params.reduce((pre,cur) => pre + cur)
+  }
+  return add
+}
+const add = curring()
+let sum = add(1)(2)(3)(4)(5)(6)
+alert(sum) //21
+console.log(+sum)//21
+```
+
+:::
+
+### compose
+
 > 思想：利用闭包预先存储，供其夏季上下文后期使用，可解决函数嵌套导致的可读性差问题。
 
 ```js
@@ -159,14 +157,15 @@ const compose = function(...funcs){
 const operate = compose()
 operate(10) //10
 //传一个
-const operate = compose(add1)
-operate(10) //11
+// const operate = compose(add1)
+// operate(10) //11
 // 传多个
-const operate = compose(div2,mul3,add1,add1)
-operate(10) //18
+// const operate = compose(div2,mul3,add1,add1)
+// operate(10) //18
 ```
 
 ### 闭包惰性思想
+
 ```js
 function getCss(ele, attr){
   //加载判断样式兼容问题，没有更换刷新浏览器每次都需要做多余的判断
@@ -193,34 +192,35 @@ function getCss(ele, attr){
 getCss(body, 'width')
 getCss(body, 'padding')
 ```
+
 ## 深度优先和广度优先
 
 ```js
-//数据
-let tree =  {
-    id: '1',
-    title: '节点1',
-    children: [
-      {
-        id: '1-1',
-        title: '节点1-1'
-      },
-      {
-        id: '1-2',
-        title: '节点1-2',
-        children: [{
-          id: '2',
-          title: '节点2',
-          children: [
-            {
-              id: '2-1',
-              title: '节点2-1'
-            }
-          ]
-        }]
-      }
-    ]
-  }
+// 数据
+const tree = {
+  id: '1',
+  title: '节点1',
+  children: [
+    {
+      id: '1-1',
+      title: '节点1-1'
+    },
+    {
+      id: '1-2',
+      title: '节点1-2',
+      children: [{
+        id: '2',
+        title: '节点2',
+        children: [
+          {
+            id: '2-1',
+            title: '节点2-1'
+          }
+        ]
+      }]
+    }
+  ]
+}
 ```
 
 ### 深度优先遍历(DFS)
@@ -235,45 +235,43 @@ let tree =  {
 JavaScript 中 DFS 的时间复杂度为 O(n)，其中 n 是节点数。空间复杂度为 O(h)，其中 h 是树的高度。
 
 ```js
-//递归方式
-let dfs = (node, nodes = []) => {
+// 递归方式
+function dfs(node, nodes = []) {
   if (node) {
     nodes.push(node.id)
-    node.children?.forEach(child =>	dfs(child, nodes) )
+    node.children?.forEach(child =>  dfs(child, nodes))
   }
   return nodes
 }
 ```
 
 ```js
-//非递归方式
-let dfs = (node) => {
-  let nodes = []
-  let stack = []
-  if(node){
+// 非递归方式
+function dfs(node) {
+  const nodes = []
+  const stack = []
+  if (node) {
     stack.push(node)
-    while(stack.length){
-      let item = stack.shift()
-      let children = item.children
+    while (stack.length) {
+      const item = stack.shift()
+      const children = item.children
       nodes.push(item.id)
-      children?.forEach(child => stack.push(child) )
+      children?.forEach(child => stack.push(child))
     }
   }
   return nodes
 }
 ```
 
-
-
 ```js
 // 用非递归方式实现二叉树深度优先遍历
 function dfs(node) {
-  let nodes = [];
+  let nodes = []
   if (node) {
-    nodes.push(node);
+    nodes.push(node)
     node.children?.forEach(child => nodes = nodes.concat(dfs(child)))
   }
-  return nodes;
+  return nodes
 }
 ```
 
@@ -317,13 +315,12 @@ function bfs(root){
 
 ```js
 function bfs(node) {
-  let nodes = []
+  const nodes = []
   if (node !== null) {
     nodes.push(node)
     let i = 0
-    while (node = nodes[i++]) {
+    while (node = nodes[i++])
       node.children && nodes.push(...node.children)
-    }
   }
   return nodes
 }
@@ -348,11 +345,10 @@ function bfs(node) {
 - **查找拓扑排序**：可以找到图的拓扑排序，即节点的一个线性序列，使得对于每个有向边 (u,v)，都有 u 在序列中排在 v 的前面。
 - **查找强联通分量**：通过深度优先遍历，可以找到图的强联通分量，即任意两点之间都存在一条路径的最大子图。
 
-
 [图文详解深度优先，广度优先遍历](https://juejin.cn/post/6844904127735005198#heading-5)
 
-
 ## loader和plugin区别
+
 :::tip Loader
 是用来处理单个模块的转换，将各种类型的文件（如 js、css、sass、less、图片等）转换为 Webpack 可以处理的模块；
 
@@ -367,9 +363,10 @@ function bfs(node) {
 
 Plugin 在 Loader 执行完成之后执行，可以访问 Webpack 的内部环境，并对其进行修改和优化。
 
-
 :::
+
 ## 前端模块化规范
+
 前端模块化规范是为了解决前端代码复杂度、可维护性和可扩展性等问题而产生的。目前常用的前端模块化规范有CommonJS、AMD、CMD和ES6 Module等，它们之间的区别如下：
 
 **CommonJS规范**：主要用于服务器端的JavaScript编程，Node.js采用了该规范。采用同步加载模块的方式，即在需要使用某个模块时，通过require函数同步加载该模块，然后才能执行后续代码。
@@ -377,4 +374,3 @@ Plugin 在 Loader 执行完成之后执行，可以访问 Webpack 的内部环
 **ES6 Module**：是ECMAScript 6标准中新增的模块化规范。 采用静态加载模块的方式，即在编译时就确定模块之间的依赖关系，然后再执行代码。
 
 与其他模块化规范不同的是，ES6 Module不需要使用特定的函数或语法来定义和导入模块，而是使用import和export关键字来实现。
-
diff --git "a/docs/Interview/JavaScript/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md" "b/docs/Interview/JavaScript/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md"
index ccf13f87..a7dcf862 100644
--- "a/docs/Interview/JavaScript/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md"
+++ "b/docs/Interview/JavaScript/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md"
@@ -1,19 +1,23 @@
 # 常见高级面试题
 
 ## 怎么禁止下载图片（midjourney实现）
+
 **方案一：禁止右键**
+
 ```html
 <img src="image.png" oncontextmenu="return false;" />
 ```
+
 ```js
-window.onload = function() {
-    document.oncontextmenu = function(event) {
-        event.returnValue = false;
-    };
+window.onload = function () {
+  document.oncontextmenu = function (event) {
+    event.returnValue = false
+  }
 }
 ```
 
 **方案二：禁止拖拽**
+
 ```html
 <img src="image.png" ondragstart="return false;" />
 ```
@@ -21,14 +25,25 @@ window.onload = function() {
 **方案三：使用遮罩层**
 
 ```html
-<div style="position: relative; display: inline-block;">
-    <img src="image.png" alt="">
-    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;
-                background: url(image.png) no-repeat center center / contain; opacity: 0.7;"></div>
+<div style="position: relative; display: inline-block">
+  <img src="image.png" alt="" />
+  <div
+    style="
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 10;
+      background: url(image.png) no-repeat center center / contain;
+      opacity: 0.7;
+    "
+  ></div>
 </div>
 ```
 
 **方案四:转换为 canvas**
+
 ```js
 export async function imageToCanvas(url: string, canvas: HTMLCanvasElement) {
   return new Promise((resolve, reject) => {
@@ -54,7 +69,7 @@ export async function imageToCanvas(url: string, canvas: HTMLCanvasElement) {
 }
 ```
 
-```js
+```ts
 const throwFn = () => {
   throw new Error(
     "Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.",
@@ -76,4 +91,4 @@ const $canvasRef = useRef<HTMLCanvasElement>(null)
          onContextMenu={preventDefaultListener}
      />
  )
- ```
\ No newline at end of file
+```
diff --git "a/docs/Interview/Vue/Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.md" "b/docs/Interview/Vue/Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.md"
index 052fd995..a26a5c4d 100644
--- "a/docs/Interview/Vue/Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.md"
+++ "b/docs/Interview/Vue/Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.md"
@@ -1,4 +1,5 @@
 ## 数组劫持原理
+
 1. 使用 `Object.create(Array.prototype)` 备份原型上的方法
 2. 利用 AOP 思想，对 7 个变异方法进行重写，重写函数：先调用原来对应方法，再对新增的每一项进行数据劫持
-3. 
\ No newline at end of file
+3.
diff --git "a/docs/Interview/Vue/Vue\345\237\272\347\241\200\347\257\207.md" "b/docs/Interview/Vue/Vue\345\237\272\347\241\200\347\257\207.md"
index f850796c..0fe1f566 100644
--- "a/docs/Interview/Vue/Vue\345\237\272\347\241\200\347\257\207.md"
+++ "b/docs/Interview/Vue/Vue\345\237\272\347\241\200\347\257\207.md"
@@ -1,10 +1,9 @@
-## 对MVVM的理解 
+## 对MVVM的理解
 
 MVVM 由 MVC 模型演变而来，M(Model)代表数据模型，V(View)代表用户操作的界面，VM(ViewModel)代表业务逻辑层，
 
 充当数据模型与视图界面的桥梁，可以把数据绑定到页面，页面操作触发数据更新，数据修改自动触发视图更新。
 
-
 ## Mixins的原理
 
 Vue 的 mixins混入 可以抽离封装Vue 组件选项达到复用的效果。
@@ -19,4 +18,4 @@ Vue 的 mixins混入 可以抽离封装Vue 组件选项达到复用的效果。
 
 **props、methods、inject、computed**：定义一个对象 ret，遍历前者的属性或方法，对 ret进行扩展，再遍历后者的属性或方法，后者将覆盖前者的属性或方法；
 
-**默认策略**：策略中没有定义的策略，后者有则返回后者，否则返回前者；
\ No newline at end of file
+**默认策略**：策略中没有定义的策略，后者有则返回后者，否则返回前者；
diff --git "a/docs/Interview/Vue/Vue\345\243\260\346\230\216\345\221\250\346\234\237.md" "b/docs/Interview/Vue/Vue\345\243\260\346\230\216\345\221\250\346\234\237.md"
index ab5dcefb..c832ba4c 100644
--- "a/docs/Interview/Vue/Vue\345\243\260\346\230\216\345\221\250\346\234\237.md"
+++ "b/docs/Interview/Vue/Vue\345\243\260\346\230\216\345\221\250\346\234\237.md"
@@ -1,6 +1,7 @@
 ## Vue声明周期
+
 ```js
-//自带 8 个
+// 自带 8 个
 beforeCreate
 created
 beforeMount
@@ -12,45 +13,48 @@ destoryed
 ```
 
 ### 嵌套组件组件执行顺序
+
 ```js
-//父组件
+// 父组件
+beforeCreate
+created
+beforeMount
+// 子组件
+beforeCreate
+created
+beforeMount
+mounted
+// 孙子组件
 beforeCreate
 created
 beforeMount
-  //子组件
-  beforeCreate
-  created
-  beforeMount
-  mounted
-    //孙子组件
-      beforeCreate
-      created
-      beforeMount
-      mounted
+mounted
 ```
 
 ## beforeCreate 与 created 区别
 
-
-
 ## created 与 mounted 区别
 
 > 请求问题：当需要子组件的请求需要比父组件**先**完成时，可以把父组件请求卸载`mounted`中，子组件写在`created`中。
 
 ## keep-alive内置缓存组件
+
 额外增加两个声明周期:activated, deactivated
+
 ```js
-//第一次执行顺序
-  beforeCreate
-  created
-  beforeMount
-  mounted
-  activated
-
-  //第二次：多次进入详情页，在activated钩子中，判断 id 相同则不需要发请求
-  activated
+// 第一次执行顺序
+beforeCreate
+created
+beforeMount
+mounted
+activated
+
+// 第二次：多次进入详情页，在activated钩子中，判断 id 相同则不需要发请求
+activated
 ```
+
 ## 虚拟 DOM(VNode) 和 DOM
+
 1. VNode是一个纯 JavaScript 对象，用来描述真实 DOM 中的一个节点，属性比真实 dom 精简许多。
 
 虚拟 DOM 的优点包括：
@@ -61,8 +65,8 @@ beforeMount
 
 组件化开发：Vue 的组件是以 VNode 为基础的，通过对 VNode 的操作，可以方便地实现组件的开发。
 
-
 ## Vue3.0性能提升
+
 1. 响应式系统不需要深度遍历就可以对整个对象监听
 2. 在diff算法中增加了静态标记
-3. 源码体积减小，所有 API 都可以按需引入
\ No newline at end of file
+3. 源码体积减小，所有 API 都可以按需引入
diff --git "a/docs/Interview/Vue/npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.md" "b/docs/Interview/Vue/npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.md"
index 26fd4811..dab67129 100644
--- "a/docs/Interview/Vue/npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.md"	
+++ "b/docs/Interview/Vue/npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.md"	
@@ -1,5 +1,3 @@
-
-
 # npm run xxx执行过程
 
 ## vue cli 项目
@@ -16,4 +14,4 @@
 
 1. npm run 会先把 `node_modules/.bin` 加入到 `PATH` 环境变量
 2. 找到项目根目录 `package.json` 文件中 `  scripts` 对应的脚本并执行对应命令
-3. 去找`.bin/vite` 软链接，进而找到 `node_modules/.pnpm/vite@4.1.1/node_modules/vite/bin/vite.js`执行
\ No newline at end of file
+3. 去找`.bin/vite` 软链接，进而找到 `node_modules/.pnpm/vite@4.1.1/node_modules/vite/bin/vite.js`执行
diff --git "a/docs/Interview/Vue/\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.md" "b/docs/Interview/Vue/\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.md"
index ab302b10..50dd3598 100644
--- "a/docs/Interview/Vue/\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.md"
+++ "b/docs/Interview/Vue/\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.md"
@@ -1,36 +1,32 @@
 # 前端项目优化
 
-
-
 ## HTML
 
-
-
 ## CSS
 
-
 ## JavaScript
 
-
-
 ## 构建优化
 
 ### 移除console
+
 `npm install babel-plugin-transform-remove-console --D`
 
 ```js
-//babel.config.js
-const proPlugins = [];
-if (process.env.NODE_ENV === 'production') {
-  proPlugins.push('transform-remove-console');
-}
+// babel.config.js
+const proPlugins = []
+if (process.env.NODE_ENV === 'production')
+  proPlugins.push('transform-remove-console')
+
 module.exports = {
   plugins: [
-      ...proPlugins
+    ...proPlugins
   ]
-};
+}
 ```
+
 ### 分包和共享依赖
+
 ```js
  configureWebpack: {
     resolve: {
@@ -67,4 +63,4 @@ module.exports = {
       },
     },
   },
-  ```
\ No newline at end of file
+```
diff --git "a/docs/Interview/Vue/\345\270\270\350\247\201Path\345\214\272\345\210\253.md" "b/docs/Interview/Vue/\345\270\270\350\247\201Path\345\214\272\345\210\253.md"
index b98021d6..c03a54a8 100644
--- "a/docs/Interview/Vue/\345\270\270\350\247\201Path\345\214\272\345\210\253.md"
+++ "b/docs/Interview/Vue/\345\270\270\350\247\201Path\345\214\272\345\210\253.md"
@@ -1,5 +1,5 @@
-
 ## VueRouter的 base
+
 VueRouter的base属性是指应用的基路径，它会影响到所有使用了vue-router的路由路径，包括 routes 配置中的路径和 通过 $router.push() 或 $router.replace() 调用的路径。
 
 在router对象中，base属性可以通过以下方式设置：
@@ -9,6 +9,7 @@ const router = new VueRouter({
   base: '/my-app/'
 })
 ```
+
 这个属性值的默认值为 '/'。如果你的应用被部署在一个子目录下，你就需要手动指定base属性的值。
 
 例如，假设你的应用被部署在`http://example.com/my-app/`这个路径下，那么你就需要设置如下的base属性：
@@ -19,13 +20,12 @@ const router = new VueRouter({
 })
 ```
 
-这个设置是非常重要的，因为Vue Router 路由器的默认行为是从根路径(localhost:8080/)  开始的，
+这个设置是非常重要的，因为Vue Router 路由器的默认行为是从根路径(localhost:8080/) 开始的，
 
 如果你需要从你的实际路径下查看（例如 localhost:8080/my-project/），就需要设置base属性了。
 
 除了上述的情况之外，一般我们都不会配置base属性，这个属性的作用主要是为了适应应用被部署在服务器上的子目录下的情况。
 
-
 ## vue.config.js的 publicPath
 
 在 Vue.js 中， publicPath 是用来指定应用程序部署的基础 URL。它作用于构建过程中的静态文件的路径，
@@ -51,6 +51,7 @@ module.exports = {
 ```
 
 通常可以在根目录配置环境变量，相对于不同环境打包时的打包命令
+
 ```json
 //package.json
 "scripts": {
@@ -61,14 +62,14 @@ module.exports = {
 
 ```
 
-```js 
+```js
 //.env.production   --服务器打包预览环境变量
 OUTPUT_DIR=/opt/nginx/www/html/music
 BASE_URL=/music/
 ```
 
-```js 
-//.env.buildlocal   --本地打包预览环境变量
+```env
+#.env.buildlocal   --本地打包预览环境变量
 OUTPUT_DIR=dist
 BASE_URL=/
 ```
diff --git "a/docs/Interview/Vue/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md" "b/docs/Interview/Vue/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md"
index 9ed4723c..010b345b 100644
--- "a/docs/Interview/Vue/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md"
+++ "b/docs/Interview/Vue/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md"
@@ -1,53 +1,53 @@
 ## 一键复制
+
 ```js
-//方案一：
+// 方案一：
+// 方案二：
+import { Notification } from 'element-ui'
+
 Vue.directive('copy', {
-  bind: function (el) {
-    el.addEventListener('click', function () {
-      var range = document.createRange();
-      range.selectNode(el);
-      window.getSelection().addRange(range);
-      document.execCommand('copy');
-      window.getSelection().removeAllRanges();
-    });
+  bind(el) {
+    el.addEventListener('click', () => {
+      const range = document.createRange()
+      range.selectNode(el)
+      window.getSelection().addRange(range)
+      document.execCommand('copy')
+      window.getSelection().removeAllRanges()
+    })
   }
-});
-
-//方案二：
-import { Notification } from "element-ui";
+})
 export const COPY = {
   bind(el, { value }) {
-    el.$value = value;
+    el.$value = value
     el.handler = () => {
       if (!el.$value) {
         Notification.success({
-          title: "无复制内容",
-        });
-        return;
+          title: '无复制内容',
+        })
+        return
       }
-      const textarea = document.createElement("textarea");
-      textarea.readOnly = "readonly";
-      textarea.style.position = "absolute";
-      textarea.style.left = "-9999px";
-      textarea.value = el.$value;
-      document.body.appendChild(textarea);
-      textarea.select();
-      const result = document.execCommand("Copy");
+      const textarea = document.createElement('textarea')
+      textarea.readOnly = 'readonly'
+      textarea.style.position = 'absolute'
+      textarea.style.left = '-9999px'
+      textarea.value = el.$value
+      document.body.appendChild(textarea)
+      textarea.select()
+      const result = document.execCommand('Copy')
       if (result) {
         Notification.success({
-          title: "复制成功",
-        });
+          title: '复制成功',
+        })
       }
-      document.body.removeChild(textarea);
-    };
-    el.addEventListener("click", el.handler);
+      document.body.removeChild(textarea)
+    }
+    el.addEventListener('click', el.handler)
   },
   componentUpdated(el, { value }) {
-    el.$value = value;
+    el.$value = value
   },
   unbind(el) {
-    el.removeEventListener("click", el.handler);
+    el.removeEventListener('click', el.handler)
   },
-};
-
-```
\ No newline at end of file
+}
+```
diff --git a/docs/Interview/index.md b/docs/Interview/index.md
index d3f83c96..9d1ef5c8 100644
--- a/docs/Interview/index.md
+++ b/docs/Interview/index.md
@@ -1,4 +1,5 @@
 # 面试
+
 :::tip
 面试题总结与归纳!
-:::
\ No newline at end of file
+:::
diff --git "a/docs/Problem/Graphical/Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.md" "b/docs/Problem/Graphical/Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.md"
index fedece96..e7bdbd1e 100644
--- "a/docs/Problem/Graphical/Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.md"
+++ "b/docs/Problem/Graphical/Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.md"
@@ -1,7 +1,7 @@
 # 网络拓扑图代码
 
-
 ## 图实例化
+
 ```js
 import { commonRegister ,viewRegister} './registerElements.js'
 
@@ -98,7 +98,7 @@ initChart() {
 },
 graphBehaviors(){
     this.graph.on('node:click',this.debounce(this.eventHandle, 300));
- //this.graph.on('edge:click'... 
+ //this.graph.on('edge:click'...
 },
 debounce(fn, delay) {
   const delays = delay || 300;
@@ -162,127 +162,126 @@ beforeDestroy() {
 ## 注册节点
 
 ```js
-//registerElements.js
-import G6 from "@antv/g6";
-//共同节点注册
-export  function commonRegister(){
+// registerElements.js
+import G6 from '@antv/g6'
+// 共同节点注册
+export function commonRegister() {
   // 注册实线动画
-  G6.registerEdge("animate-line",
-    {
-      drawShape(cfg, group) {
-        const self = this;
-        let shapeStyle = self.getShapeStyle(cfg);
-        shapeStyle = Object.assign(shapeStyle, {
-          opacity: 0,
-          strokeOpacity: 0,
-        });
-        const keyShape = group.addShape("path", {
-          attrs: shapeStyle,
-          name: "path-shape",
-        });
-        return keyShape;
-      },
-      afterDraw(cfg, group) {
-        const shape = group.get("children")[0];
-        //线条动画
-        shape.animate(
-          (ratio) => {
-            const opacity = ratio * cfg.style.opacity;
-            const strokeOpacity = ratio * cfg.style.strokeOpacity;
-            return {
-              opacity: ratio || opacity,
-              strokeOpacity: ratio || strokeOpacity,
-            };
-          },
-          {
-            duration: 300,
+  G6.registerEdge('animate-line', {
+    drawShape(cfg, group) {
+      const self = this
+      let shapeStyle = self.getShapeStyle(cfg)
+      shapeStyle = Object.assign(shapeStyle, {
+        opacity: 0,
+        strokeOpacity: 0,
+      })
+      const keyShape = group.addShape('path', {
+        attrs: shapeStyle,
+        name: 'path-shape',
+      })
+      return keyShape
+    },
+    afterDraw(cfg, group) {
+      const shape = group.get('children')[0]
+      // 线条动画
+      shape.animate(
+        (ratio) => {
+          const opacity = ratio * cfg.style.opacity
+          const strokeOpacity = ratio * cfg.style.strokeOpacity
+          return {
+            opacity: ratio || opacity,
+            strokeOpacity: ratio || strokeOpacity,
           }
-        );
-        //箭头动画
-        const startPoint = shape.getPoint(0);
-        const circle = group.addShape("circle", {
-          attrs: {
-            x: startPoint.x,
-            y: startPoint.y,
-            fill: "#1890ff",
-            r: 2,
-          },
-          name: "circle-shape",
-        });
-        circle.animate(
+        },
+        {
+          duration: 300,
+        }
+      )
+      // 箭头动画
+      const startPoint = shape.getPoint(0)
+      const circle = group.addShape('circle', {
+        attrs: {
+          x: startPoint.x,
+          y: startPoint.y,
+          fill: '#1890ff',
+          r: 2,
+        },
+        name: 'circle-shape',
+      })
+      circle.animate(
+        (ratio) => {
+          const tmpPoint = shape.getPoint(ratio)
+          return {
+            x: tmpPoint.x,
+            y: tmpPoint.y,
+          }
+        },
+        {
+          repeat: true,
+          duration: 3000,
+        }
+      )
+    },
+    setState(name, value, item) {
+      const shape = item.get('keyShape')
+      if (name === 'disappearing' && value) {
+        shape.animate(
           (ratio) => {
-            const tmpPoint = shape.getPoint(ratio);
             return {
-              x: tmpPoint.x,
-              y: tmpPoint.y,
-            };
+              opacity: 1 - ratio,
+              strokeOpacity: 1 - ratio,
+            }
           },
           {
-            repeat: true,
-            duration: 3000,
+            duration: 200,
           }
-        );
-      },
-      setState(name, value, item) {
-        const shape = item.get("keyShape");
-        if (name === "disappearing" && value) {
-          shape.animate(
-            (ratio) => {
-              return {
-                opacity: 1 - ratio,
-                strokeOpacity: 1 - ratio,
-              };
-            },
-            {
-              duration: 200,
-            }
-          );
-        } else if (name === "dark") {
-          if (value) shape.attr("opacity", 0.2);
-          else shape.attr("opacity", 1);
-        }
-      },
+        )
+      }
+      else if (name === 'dark') {
+        if (value)
+          shape.attr('opacity', 0.2)
+        else shape.attr('opacity', 1)
+      }
     },
-    "line"
-  );
-  //注册iconfont节点
-  G6.registerNode("iconfontHub", {
+  }, 'line')
+  // 注册iconfont节点
+  G6.registerNode('iconfontHub', {
     draw(cfg, group) {
-      const { style, labelCfg: labelStyle ,size } = cfg;
-      group.addShape("circle", {
+      const { style, labelCfg: labelStyle, size } = cfg
+      group.addShape('circle', {
         attrs: {
           x: 0,
           y: size / 2,
           r: size,
         },
-        name: "hub-bg-shape",
-      });
-      //添加图标
-      const keyShape = group.addShape("text", {
+        name: 'hub-bg-shape',
+      })
+      // 添加图标
+      const keyShape = group.addShape('text', {
         attrs: {
           x: 0,
-          y: size  / 2,
-          fontFamily: "iconfont",
-          textAlign: "center",
+          y: size / 2,
+          fontFamily: 'iconfont',
+          textAlign: 'center',
           text: cfg.text,
           fontSize: Math.round(size),
           ...style,
         },
-        name: "hub-shape",
-      });
-      //添加label
-      group.addShape("text", {
+        name: 'hub-shape',
+      })
+      // 添加label
+      group.addShape('text', {
         attrs: {
           x: 0,
-          y: Math.round(size/4),
-          textAlign: "center",
-          textBaseline: "middle",
+          y: Math.round(size / 4),
+          textAlign: 'center',
+          textBaseline: 'middle',
           text: cfg.label,
           ...labelStyle.style,
         },
-        name: "hub-label",
-      });
-      return keyShape;
+        name: 'hub-label',
+      })
+      return keyShape
     },
     // afterDraw(cfg, group) {
     //   const shape = group.get('children')[0];
@@ -307,54 +306,53 @@ export  function commonRegister(){
     //     },
     //   );
     // },
-  });
-  //自定义节点和节点动画
-  G6.registerNode( "vpe-rect-animate",
-    {
+  })
+  // 自定义节点和节点动画
+  G6.registerNode('vpe-rect-animate', {
     afterDraw(cfg, group) {
-      const { width, height, stroke, radius } = this.getShapeStyle(cfg);
-      const x = -width / 2,
-        y = -height / 2;
-      const back1 = group.addShape("rect", {
+      const { width, height, stroke, radius } = this.getShapeStyle(cfg)
+      const x = -width / 2
+      const y = -height / 2
+      const back1 = group.addShape('rect', {
         zIndex: -3,
         attrs: {
-          x: x,
-          y: y,
-          width: width,
-          height: height,
+          x,
+          y,
+          width,
+          height,
           fill: stroke,
           opacity: 0.6,
           radius,
         },
-        name: "rback1-shape",
-      });
-      const back2 = group.addShape("rect", {
+        name: 'rback1-shape',
+      })
+      const back2 = group.addShape('rect', {
         zIndex: -2,
         attrs: {
-          x: x,
-          y: y,
-          width: width,
-          height: height,
+          x,
+          y,
+          width,
+          height,
           fill: stroke,
           opacity: 0.6,
           radius,
         },
-        name: "rback2-shape",
-      });
-      const back3 = group.addShape("circle", {
+        name: 'rback2-shape',
+      })
+      const back3 = group.addShape('circle', {
         zIndex: -1,
         attrs: {
-          x: x,
-          y: y,
-          width: width,
-          height: height,
+          x,
+          y,
+          width,
+          height,
           fill: stroke,
           opacity: 0.6,
           radius,
         },
-        name: "rback3-shape",
-      });
-      group.sort(); // Sort according to the zIndex
+        name: 'rback3-shape',
+      })
+      group.sort() // Sort according to the zIndex
       back1.animate(
         {
           width: width + 10,
@@ -365,11 +363,11 @@ export  function commonRegister(){
         },
         {
           duration: 3000,
-          easing: "easeCubic",
+          easing: 'easeCubic',
           delay: -300,
           repeat: true, // repeat
         }
-      ); // no delay
+      ) // no delay
       back2.animate(
         {
           width: width + 10,
@@ -380,11 +378,11 @@ export  function commonRegister(){
         },
         {
           duration: 3000,
-          easing: "easeCubic",
+          easing: 'easeCubic',
           delay: 1000,
-          repeat: true,  
+          repeat: true,
         }
-      );  
+      )
       back3.animate(
         {
           width: width + 10,
@@ -395,65 +393,65 @@ export  function commonRegister(){
         },
         {
           duration: 3000,
-          easing: "easeCubic",
+          easing: 'easeCubic',
           delay: 2000,
           repeat: true, // repeat
         }
-      ); // 3s delay
+      ) // 3s delay
     },
-  },
-  "rect"
-);
+  }, 'rect')
 }
-//弹窗特有节点注册
-export function dialogRegister(){
-   //注册iconfont节点
-   G6.registerNode("iconfontCpe", {
+// 弹窗特有节点注册
+export function dialogRegister() {
+  // 注册iconfont节点
+  G6.registerNode('iconfontCpe', {
     draw(cfg, group) {
-      const { style, labelCfg: labelStyle } = cfg;
-      //添加图标
-      const keyShape = group.addShape("text", {
+      const { style, labelCfg: labelStyle } = cfg
+      // 添加图标
+      const keyShape = group.addShape('text', {
         attrs: {
           x: 0,
           y: 0,
-          fontFamily: "iconfont",
-          textAlign: "center",
-          textBaseline: "middle",
+          fontFamily: 'iconfont',
+          textAlign: 'center',
+          textBaseline: 'middle',
           text: cfg.text,
           fontSize: cfg.size,
           ...style,
         },
-        name: "cpe-shape",
-      });
-      //添加label
-      group.addShape("text", {
+        name: 'cpe-shape',
+      })
+      // 添加label
+      group.addShape('text', {
         attrs: {
           x: 0,
           y: 10,
-          textAlign: "center",
+          textAlign: 'center',
           text: cfg.label,
           ...labelStyle.style,
         },
-        name: "cpe-label",
-      });
-  
-      return keyShape;
+        name: 'cpe-label',
+      })
+
+      return keyShape
     },
     afterDraw(cfg, group) {
-      const shape = group.get('children')[0];
+      const shape = group.get('children')[0]
       shape.animate(
         (ratio) => {
-          let text = '\ue604'
-          if(ratio > 0.6){
-            text = '\ue604'
-          }else if(ratio > 0.3){
-            text = '\ue606'
-          }else {
-            text = '\ue605'
-          }
+          let text = '\uE604'
+          if (ratio > 0.6)
+            text = '\uE604'
+
+          else if (ratio > 0.3)
+            text = '\uE606'
+
+          else
+            text = '\uE605'
+
           return {
             text,
-          };
+          }
         },
         {
           repeat: true,
@@ -461,10 +459,10 @@ export function dialogRegister(){
           delay: 3000,
           // easing: 'easeCubic',
         },
-      );
+      )
     },
-  });
-  //注册虚线动画
+  })
+  // 注册虚线动画
   // G6.registerEdge("vpn-line-dash",
   //   {
   //     afterDraw(cfg, group) {
@@ -493,14 +491,14 @@ export function dialogRegister(){
   // );
 }
 
-//网络拓扑总览特有节点注册
-export function viewRegister(){
-  //注册iconfont combos
+// 网络拓扑总览特有节点注册
+export function viewRegister() {
+  // 注册iconfont combos
   // G6.registerCombo("cloudCombo",
   //   {
   //     drawShape: function drawShape(cfg, group) {
   //       // const {  labelCfg: labelStyle   } = cfg;
-  //       const keyShape = group.addShape("text", { 
+  //       const keyShape = group.addShape("text", {
   //         attrs: {
   //           y: 0,
   //           x: 0,
@@ -532,78 +530,75 @@ export function viewRegister(){
   //   },
   //   "cicle"
   // );
-    //注册SVG combo
+  // 注册SVG combo
   G6.registerCombo(
-      "cloudCombo",
-      {
-        drawShape: function drawShape(cfg, group) {
-          const { labelCfg  } = cfg;
-          let str = 'M 448 102.875 c 0 -82.09 -56.678 -150.9 -132.996 -169.48 C 311.762 -195.305 206.546 -298.667 77.142 -298.667 c -75.792 0 -143.266 35.494 -186.854 90.732 c -24.442 -31.598 -62.69 -51.96 -105.708 -51.96 c -73.81 0 -133.642 59.874 -133.642 133.722 c 0 6.436 0.48 12.76 1.364 18.954 c -11.222 -2.024 -22.766 -3.138 -34.57 -3.138 C -489.266 -110.359 -576 -23.5707 -576 83.4853 C -576 190.547 -489.266 277.333 -382.27 277.333 l 656.262 0 l 0 -0.012 C 370.13 277.137 448 199.109 448 102.875 Z'
-            const pathArr =str.split(' ');
-            let opath = []
-            pathArr.forEach(item => {
-              if(/[a-zA-Z]/.test(item)){
-              opath.push([item])
-            }else {
-              opath[opath.length - 1].push(parseFloat(item))
-            }
-            });
+    'cloudCombo',
+    {
+      drawShape: function drawShape(cfg, group) {
+        const { labelCfg } = cfg
+        const str = 'M 448 102.875 c 0 -82.09 -56.678 -150.9 -132.996 -169.48 C 311.762 -195.305 206.546 -298.667 77.142 -298.667 c -75.792 0 -143.266 35.494 -186.854 90.732 c -24.442 -31.598 -62.69 -51.96 -105.708 -51.96 c -73.81 0 -133.642 59.874 -133.642 133.722 c 0 6.436 0.48 12.76 1.364 18.954 c -11.222 -2.024 -22.766 -3.138 -34.57 -3.138 C -489.266 -110.359 -576 -23.5707 -576 83.4853 C -576 190.547 -489.266 277.333 -382.27 277.333 l 656.262 0 l 0 -0.012 C 370.13 277.137 448 199.109 448 102.875 Z'
+        const pathArr = str.split(' ')
+        const opath = []
+        pathArr.forEach((item) => {
+          if (/[a-zA-Z]/.test(item))
+            opath.push([item])
 
-          opath.forEach(item => {
-            item.forEach((p,i) => {
-              if (i > 0) {
-                item [i] = item[i] / 3  ;
-              }
-            });
-          });
-          const keyShape = group.addShape("path", {
-            attrs: {
-              ...cfg.style,
-              width: cfg.style.width,
-              height: cfg.style.height,
-              path:  opath,
-            },
-            id: cfg.id,
-            name: "cloud",
-          });
-          group.addShape("text", {
-            attrs: {
-              x: 0,
-              y:  -100,
-              textAlign: "center",
-              text: cfg.label,
-              fill: '#303133',
-            },
-            name: "hubCombo-label",
-          });
-          return keyShape;
-        },
-        
+          else
+            opath[opath.length - 1].push(Number.parseFloat(item))
+        })
+
+        opath.forEach((item) => {
+          item.forEach((p, i) => {
+            if (i > 0)
+              item[i] = item[i] / 3
+          })
+        })
+        const keyShape = group.addShape('path', {
+          attrs: {
+            ...cfg.style,
+            width: cfg.style.width,
+            height: cfg.style.height,
+            path: opath,
+          },
+          id: cfg.id,
+          name: 'cloud',
+        })
+        group.addShape('text', {
+          attrs: {
+            x: 0,
+            y: -100,
+            textAlign: 'center',
+            text: cfg.label,
+            fill: '#303133',
+          },
+          name: 'hubCombo-label',
+        })
+        return keyShape
       },
-      "single-combo"
-    );
-   
+
+    },
+    'single-combo'
+  )
 }
 
- //节点文本溢出省略处理
- export function fittingString(str, maxWidth, fontSize){
-  const ellipsis = '...';
-  const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
-  let currentWidth = 0;
-  let res = str;
-  const pattern = new RegExp('[\u4E00-\u9FA5]+');  
+// 节点文本溢出省略处理
+export function fittingString(str, maxWidth, fontSize) {
+  const ellipsis = '...'
+  const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0]
+  let currentWidth = 0
+  let res = str
+  const pattern = new RegExp('[\u4E00-\u9FA5]+')
   str.split('').forEach((letter, i) => {
-    if (currentWidth > maxWidth - ellipsisLength) return;
-    if (pattern.test(letter)) {
-      currentWidth += fontSize;
-    } else {
-      currentWidth += G6.Util.getLetterWidth(letter, fontSize);
-    }
-    if (currentWidth > maxWidth - ellipsisLength) {
-      res = `${str.substr(0, i)}${ellipsis}`;
-    }
-  });
-  return res;
-} 
-```
+    if (currentWidth > maxWidth - ellipsisLength)
+      return
+    if (pattern.test(letter))
+      currentWidth += fontSize
+    else
+      currentWidth += G6.Util.getLetterWidth(letter, fontSize)
 
+    if (currentWidth > maxWidth - ellipsisLength)
+      res = `${str.substr(0, i)}${ellipsis}`
+  })
+  return res
+}
+```
diff --git "a/docs/Problem/Graphical/Antv\344\275\277\347\224\250\346\200\273\347\273\223.md" "b/docs/Problem/Graphical/Antv\344\275\277\347\224\250\346\200\273\347\273\223.md"
index f68191e0..cc053356 100644
--- "a/docs/Problem/Graphical/Antv\344\275\277\347\224\250\346\200\273\347\273\223.md"
+++ "b/docs/Problem/Graphical/Antv\344\275\277\347\224\250\346\200\273\347\273\223.md"
@@ -1,34 +1,30 @@
-
 ### 一、默认收缩二级节点
 
 <!-- [控制收缩节点](https://antv-g6.gitee.io/zh/docs/manual/middle/states/defaultBehavior#collapse-expand) -->
 
 ```js
-//树形图哪个需要收缩则把属性collapsed设置为true
+// 树形图哪个需要收缩则把属性collapsed设置为true
 data.children.forEach(item => item.collapsed = true)
 ```
 
 ### 二、改用iconfont文字不居中问题
 
-
 ```js
-//注册节点添加label图形时动态计算label位置
- group.addShape("text", {
-   attrs: {
-     x: 0,
-     y: -80,
-   textAlign: "center",
-   textBaseline: "middle",
+// 注册节点添加label图形时动态计算label位置
+group.addShape('text', {
+  attrs: {
+    x: 0,
+    y: -80,
+    textAlign: 'center',
+    textBaseline: 'middle',
     text: cfg.label,
-   ...labelStyle.style,//这里需要重新处理x,y
- },
-  name: "hubCombo-label",
-});
+    ...labelStyle.style, // 这里需要重新处理x,y
+  },
+  name: 'hubCombo-label',
+})
 
 ```
 
-
-
 ### 三、初始化画图完成后出现这个锯齿
 
 <!-- 官方解决思路: [https://github.com/antvis/G6/issues/3896](antv/G6-github-issues) -->
diff --git "a/docs/Problem/Graphical/Echarts\351\227\256\351\242\230\346\200\273\347\273\223.md" "b/docs/Problem/Graphical/Echarts\351\227\256\351\242\230\346\200\273\347\273\223.md"
index 75f0908b..de52f1ad 100644
--- "a/docs/Problem/Graphical/Echarts\351\227\256\351\242\230\346\200\273\347\273\223.md"
+++ "b/docs/Problem/Graphical/Echarts\351\227\256\351\242\230\346\200\273\347\273\223.md"
@@ -1,29 +1,26 @@
 # Echarts问题总结
 
-
 ## 屏幕适配问题
 
->  方案一: 使用`scss`函数计算比例
+> 方案一: 使用`scss`函数计算比例
 
 ```scss
 //默认设计稿的宽度
-$designWidth:1920;
+$designWidth: 1920;
 //默认设计稿的高度
-$designHeight:1080;
+$designHeight: 1080;
 
 //px转为vw的函数
 @function vw($px) {
-  @return math.div($px , $designWidth) * 100vw;
+  @return math.div($px, $designWidth) * 100vw;
 }
 
 //px转为vh的函数
 @function vh($px) {
-  @return math.div($px , $designHeight) * 100vh;
+  @return math.div($px, $designHeight) * 100vh;
 }
 ```
 
-
-
 ## 左侧菜单折叠响应式
 
 ```js
@@ -51,90 +48,92 @@ $designHeight:1080;
       this.$store.commit('toggleLeftMenu', !this.leftMenuOpen);
       this.doResize()
   },
-doResize(){ 
+doResize(){
     setTimeout(function(){
           var ev = new Event("resize", {"bubbles":true, "cancelable":false});
           window.dispatchEvent(ev);
       },120);//不使用定时器没反应
-    
+
     //有效, 而且提示event.initEvent方法已经过时(deprecated)
     //但是折线图左侧收缩/延伸会有抖动问题,需要调节定时器时间使比较不突兀
-  /*setTimeout(function(){
-      if(document.createEvent) {
-          var event = document.createEvent("HTMLEvents");
-          event.initEvent("resize", true, true);
-          window.dispatchEvent(event);
-      } else if(document.createEventObject) {
-          window.fireEvent("onresize");
-      }
-  },120);*/
-    
+    /*setTimeout(function(){
+        if(document.createEvent) {
+            var event = document.createEvent("HTMLEvents");
+            event.initEvent("resize", true, true);
+            window.dispatchEvent(event);
+        } else if(document.createEventObject) {
+            window.fireEvent("onresize");
+        }
+    },120);*/
 },
 ```
+
 ## 地图缩放重叠问题
+
 ![](https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/202303291527581.png)
 
 [Echart文档参考](https://echarts.apache.org/zh/option.html#series-map.geoIndex)
+
 ```js {34,58}
 export default {
-	geo: {
-		roam: true,
-		map: "china",
-		aspectScale: 0.75,  
-		zoom: 1.1,
-		itemStyle: {
-			normal: {
-				shadowColor: "#ddd",
-				shadowOffsetX: 5,
-				shadowOffsetY: 5,
-			},
-		},
-		regions: [
-			{
-				name: "南海诸岛",
-				itemStyle: {
-					areaColor: "rgba(0, 10, 52, 1)",
-					borderColor: "rgba(0, 10, 52, 1)",
-					normal: {
-						opacity: 0,
-						label: {
-							show: false,
-							color: "#009cc9",
-						},
-					},
-				},
-			},
-		],
-	},
-	series: [
-		{
-			type: "map",
-			geoIndex: 0, //方案一：设置这个属性
-			label: {
-				normal: {
-					show: true,
-					textStyle: {
-						color: "#666",
-					},
-				},
-				emphasis: {
-					textStyle: {
-						color: "#fff",  
-					},
-				},
-			},
-			itemStyle: {
-				normal: {
-					borderType: "dashed",
-				},
-				emphasis: {
-					areaColor: "#3777DD",
-					borderWidth: 0.1,
-				},
-			},
-			zoom: 1.1,
-			map: "china", // //方案二：删除这个属性
-		},
-	],
+  geo: {
+    roam: true,
+    map: 'china',
+    aspectScale: 0.75,
+    zoom: 1.1,
+    itemStyle: {
+      normal: {
+        shadowColor: '#ddd',
+        shadowOffsetX: 5,
+        shadowOffsetY: 5,
+      },
+    },
+    regions: [
+      {
+        name: '南海诸岛',
+        itemStyle: {
+          areaColor: 'rgba(0, 10, 52, 1)',
+          borderColor: 'rgba(0, 10, 52, 1)',
+          normal: {
+            opacity: 0,
+            label: {
+              show: false,
+              color: '#009cc9',
+            },
+          },
+        },
+      },
+    ],
+  },
+  series: [
+    {
+      type: 'map',
+      geoIndex: 0, // 方案一：设置这个属性
+      label: {
+        normal: {
+          show: true,
+          textStyle: {
+            color: '#666',
+          },
+        },
+        emphasis: {
+          textStyle: {
+            color: '#fff',
+          },
+        },
+      },
+      itemStyle: {
+        normal: {
+          borderType: 'dashed',
+        },
+        emphasis: {
+          areaColor: '#3777DD',
+          borderWidth: 0.1,
+        },
+      },
+      zoom: 1.1,
+      map: 'china', // //方案二：删除这个属性
+    },
+  ],
 }
-```
\ No newline at end of file
+```
diff --git "a/docs/Problem/Nuxt3/Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.md" "b/docs/Problem/Nuxt3/Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.md"
index 3b1fc8b2..eaf77715 100644
--- "a/docs/Problem/Nuxt3/Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.md"
+++ "b/docs/Problem/Nuxt3/Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.md"
@@ -3,8 +3,8 @@
 ![2023-05-19-14-49-43](https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-05-19-14-49-43.png)
 
 ```js
-//uno.config.ts
-shortcuts: [["f-s-c", "flex justify-start items-center"]];
+// uno.config.ts
+shortcuts: [['f-s-c', 'flex justify-start items-center']]
 ```
 
 1. 写在类名上不生效
@@ -39,11 +39,11 @@ shortcuts: [["f-s-c", "flex justify-start items-center"]];
 ### hidden 与自定义变体不能一起用
 
 ```ts
-//uno.config.ts
+// uno.config.ts
 shortcuts: [
-  ["f-s-c", "flex justify-start items-center"],
-  ["f-c-c", "flex justify-center items-center"],
-];
+  ['f-s-c', 'flex justify-start items-center'],
+  ['f-c-c', 'flex justify-center items-center'],
+]
 ```
 
 ```html
@@ -71,7 +71,7 @@ export default defineNuxtConfig({
     devProxy: {
       '/account/api': {
         target: 'http://192.168.211.63/account/api',
-       // target: 'http://192.168.211.63', 【不生效】 不同于 vite，这样配置到达 nginx 是 '/'
+        // target: 'http://192.168.211.63', 【不生效】 不同于 vite，这样配置到达 nginx 是 '/'
         ws: false,
         changeOrigin: true,
       },
@@ -81,18 +81,19 @@ export default defineNuxtConfig({
 ```
 
 ```js
-//业务请求
+// 业务请求
 async function getImgCode() {
   const data = await useFetch('/account/api/getImageCode', {
     method: 'POST',
-    body:{},
+    body: {},
   })
   return data.data.value
 }
 ```
- 
- ## nuxt-simple-sitemap插件使用问题
- 打包时报错：解析到错误 URL
+
+## nuxt-simple-sitemap插件使用问题
+
+打包时报错：解析到错误 URL
 
 ```js
 nitro: {
@@ -103,11 +104,10 @@ nitro: {
 }
 ```
 
+> 测试环境能访问`sitemap.xml` 页面
+> 但是线上环境访问不到，报相关错误：`/__sitemap__/routes.json` ，需要在 nginx 配置 IP 和主机名的传送。
 
->测试环境能访问`sitemap.xml` 页面
->但是线上环境访问不到，报相关错误：`/__sitemap__/routes.json` ，需要在 nginx 配置 IP 和主机名的传送。
-
-``` zsh
+```zsh
   # nginx.conf
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
diff --git "a/docs/Problem/VitePress/VitePress\350\270\251\345\235\221\350\256\260\345\275\225.md" "b/docs/Problem/VitePress/VitePress\350\270\251\345\235\221\350\256\260\345\275\225.md"
index e7f7be8d..03fc8e00 100644
--- "a/docs/Problem/VitePress/VitePress\350\270\251\345\235\221\350\256\260\345\275\225.md"
+++ "b/docs/Problem/VitePress/VitePress\350\270\251\345\235\221\350\256\260\345\275\225.md"
@@ -1,8 +1,6 @@
 # VitePress踩坑记录
 
-##  ERR_INVALID_FILE_URL_HOST
-
-
+## ERR_INVALID_FILE_URL_HOST
 
 ::: danger
 
@@ -10,15 +8,12 @@
 
 :::
 
- 
-
 ![](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041941600.png)
 
 ### 形成原因：全局替换时粗心大意造成img src属性多了个'/'
 
+### 解决
 
-
-###  解决
 ::: tip
 刚开始我只能猜到某个文件路径有问题 ，又不知道那个文件有问题，最后用上了 **排除法** 逐个移除文章文件夹最终才定位到出问题的文档。
 虽然问题解决的的过程有点费劲，不得不说当问题搞得人想撞墙的时候，无疑也是一个不错的思路和方法！！！
@@ -26,64 +21,60 @@
 
 删除多余的'/'就好了，自己解决自己的 **[issues](https://github.com/vuejs/vitepress/issues/1895)** ！！！
 
-
-
 ## 实现自动生成文章左侧侧边栏
 
-
-
 ### 痛点及需求
 
 ::: warning
 
-​	每次添加文章过程：对应的目录下添加.md文， 修改`themeConfig的sidebar属性`，给对象加上新增的文章映射
+每次添加文章过程：对应的目录下添加.md文， 修改`themeConfig的sidebar属性`，给对象加上新增的文章映射
 
-​	添加的文章少还好，多了的话就显得很麻烦不够优雅，所有想写个脚本按照目录结构自动生产对应的映射关系。
+添加的文章少还好，多了的话就显得很麻烦不够优雅，所有想写个脚本按照目录结构自动生产对应的映射关系。
 
 :::
 
 ### 想法及实现
+
 #### 在package.json添加脚本执行命令
 
 ![image-20230205230548188](https://zerdocs.oss-cn-shanghai.aliyuncs.com/202302052305259.png)
 
-####  在博客根目录新建`scripts`目录并创建文件`getSidebar.ts`，添加如下代码
+#### 在博客根目录新建`scripts`目录并创建文件`getSidebar.ts`，添加如下代码
 
 ```js
-/********   读取 zerdocs/docs/ 下的所有文件夹，自动生成侧边栏sidebar.ts文件   ***********/
+/** ******   读取 zerdocs/docs/ 下的所有文件夹，自动生成侧边栏sidebar.ts文件   */
 
+const fs = require('node:fs')
+const path = require('node:path')
 
-const fs = require('fs')
-const path = require('path')
+const sidebarObj = {}
 
-let sidebarObj = {}
-
-//生成一级分组 
-let topDirArr = fs.readdirSync(path.resolve(__dirname, '../docs')).filter((item) => isArticleDir(item))
+// 生成一级分组
+const topDirArr = fs.readdirSync(path.resolve(__dirname, '../docs')).filter(item => isArticleDir(item))
 topDirArr.forEach((item) => {
-  if (!sidebarObj[`/${item}/`]) {
+  if (!sidebarObj[`/${item}/`])
     sidebarObj[`/${item}/`] = []
-  }
 })
 
 const sidebars = deepGetFile(path.resolve(__dirname, '../docs')) // 读取 docs 目录下的所有文件夹
 const sidebarlist = deepGenerateSidebar(sidebars)
 
-//写入到docs/.vitepress/sidebar/index.ts
+// 写入到docs/.vitepress/sidebar/index.ts
 
-//把数组里面的每个对象合并到一个对象里面
-let sidebar = sidebarlist.reduce((pre, cur) => Object.assign(pre, cur), {})
+// 把数组里面的每个对象合并到一个对象里面
+const sidebar = sidebarlist.reduce((pre, cur) => Object.assign(pre, cur), {})
 Object.entries(sidebar).forEach(([key, items]) => {
-  let keyArr = splitPath(key)
-  let text = keyArr[keyArr.length - 1]
-  if(sidebarObj[`/${keyArr[0]}/`]){
+  const keyArr = splitPath(key)
+  const text = keyArr[keyArr.length - 1]
+  if (sidebarObj[`/${keyArr[0]}/`]) {
     sidebarObj[`/${keyArr[0]}/`].push({
       text,
       collapsible: true,
       collapsed: false,
       items,
     })
-  }else{
+  }
+  else {
     sidebarObj[`/${keyArr[0]}/`] = [{
       text,
       collapsible: true,
@@ -94,35 +85,35 @@ Object.entries(sidebar).forEach(([key, items]) => {
 })
 
 const sidebarStr = JSON.stringify(sidebarObj, null, 2)
-//把sidebarStr写入到docs/.vitepress/sidebar/index.ts
+// 把sidebarStr写入到docs/.vitepress/sidebar/index.ts
 const sidebarPath = path.resolve(__dirname, '../docs/.vitepress/sidebar/index.ts')
 
-//没有则创建
-if (!fs.existsSync(sidebarPath)) {
+// 没有则创建
+if (!fs.existsSync(sidebarPath))
   fs.mkdirSync(path.resolve(__dirname, '../docs/.vitepress/sidebar'))
-}
 
 fs.writeFileSync(sidebarPath, `export default ${sidebarStr}`)
 
-//判断是否是文件夹
+// 判断是否是文件夹
 function isArticleDir(dir) {
-  let exclude = ['public', 'index.md','vite.config.ts']  //排除的文件夹
+  const exclude = ['public', 'index.md', 'vite.config.ts'] // 排除的文件夹
   return !exclude.includes(dir) && !dir.startsWith('.')
 }
 
 function splitPath(path) {
-  return path.split('/').filter((item) => item !== '')
+  return path.split('/').filter(item => item !== '')
 }
 function deepGetFile(dir) {
   let backList = []
-  let list = fs.readdirSync(dir).filter((item) => isArticleDir(item))
+  const list = fs.readdirSync(dir).filter(item => isArticleDir(item))
 
-  for (let index in list) {
+  for (const index in list) {
     let item = path.resolve(dir, list[index])
     if (fs.statSync(item).isDirectory()) {
       backList = backList.concat(deepGetFile(item))
-    } else {
-      //输出相对路径
+    }
+    else {
+      // 输出相对路径
       item = item.replace(path.resolve(__dirname, '../docs'), '').replace(/\\/g, '/')
       backList.push(item)
     }
@@ -132,24 +123,24 @@ function deepGetFile(dir) {
 
 // 生成侧边栏
 function deepGenerateSidebar(arr) {
-  //递归按照最后一级目录生成侧边栏
+  // 递归按照最后一级目录生成侧边栏
   const sidebar = {}
   sidebars.forEach((item) => {
-    const [dir, ...rest] = splitPath(item)
-    if (!sidebar[dir]) {
+    const [dir] = splitPath(item)
+    if (!sidebar[dir])
       sidebar[dir] = []
-    }
+
     sidebar[dir].push(item)
   })
-  let sidebarList = []
-  //按最后一级目录分组
-  for (let key in sidebar) {
-    let pathPice = sidebar[key].map((item) => splitPath(item))
-    //如果pathPice[pathPice.length-1]相同,则合并
+  const sidebarList = []
+  // 按最后一级目录分组
+  for (const key in sidebar) {
+    let pathPice = sidebar[key].map(item => splitPath(item))
+    // 如果pathPice[pathPice.length-1]相同,则合并
     pathPice = pathPice.reduce((pre, cur) => {
-      let dirStr = cur.slice(0, -1).join('/') // /problem/vueproject/
-      let text = cur[cur.length - 1].replace(/\.md$/, '')
-      let link = '/' + cur.join('/').replace(/\.md$/, '')
+      const dirStr = cur.slice(0, -1).join('/') // /problem/vueproject/
+      const text = cur[cur.length - 1].replace(/\.md$/, '')
+      const link = `/${cur.join('/').replace(/\.md$/, '')}`
       pre[dirStr] = pre[dirStr] ? [...pre[dirStr], { text, link }] : [{ text, link }]
       return pre
     }, {})
@@ -157,11 +148,8 @@ function deepGenerateSidebar(arr) {
   }
   return sidebarList
 }
-
 ```
 
-
-
 ## VitePress添加本地搜索功能
 
 ::: warning
@@ -178,8 +166,7 @@ npm i vitepress-plugin-search markdown-it flexsearch -D
 
 ### 添加和配置插件
 
-::: warning 坑点
-1.[README](https://github.com/emersonbottero/vitepress-plugin-search#readme) 没写在哪个目录下存放`vite.config.ts`，依据经验放在根目录下不管用，放在`.vitepress`也不生效，最后挨个试才发现需要放在`docs`
+::: warning 坑点 1.[README](https://github.com/emersonbottero/vitepress-plugin-search#readme) 没写在哪个目录下存放`vite.config.ts`，依据经验放在根目录下不管用，放在`.vitepress`也不生效，最后挨个试才发现需要放在`docs`
 
 2.示例没有引入`flexSearchIndexOptions`，需要手动从`flexsearch`中引入
 
@@ -187,12 +174,8 @@ npm i vitepress-plugin-search markdown-it flexsearch -D
 
 :::
 
-
-
 ![image-20230205233032922](https://zerdocs.oss-cn-shanghai.aliyuncs.com/202302052330956.png)
 
-
-
 ```typescript
 
 //vite.config.ts
@@ -212,8 +195,6 @@ export default defineConfig({
 });
 ```
 
-
-
 ### 样式覆盖
 
 ```css
@@ -244,12 +225,10 @@ export default defineConfig({
   .DocSearch-Button-Keys {
     display: none;
   }
-  .VPNavBarHamburger{
+  .VPNavBarHamburger {
     height: 32px !important;
     width: 32px !important;
     border-radius: 4px;
   }
 }
-
 ```
-
diff --git "a/docs/Problem/VitePress/VuePress\350\270\251\345\235\221\350\256\260\345\275\225.md" "b/docs/Problem/VitePress/VuePress\350\270\251\345\235\221\350\256\260\345\275\225.md"
index e3632ab2..0c17fe17 100644
--- "a/docs/Problem/VitePress/VuePress\350\270\251\345\235\221\350\256\260\345\275\225.md"
+++ "b/docs/Problem/VitePress/VuePress\350\270\251\345\235\221\350\256\260\345\275\225.md"
@@ -1,12 +1,12 @@
-
 # VuePress踩坑记录
+
 ## 坑点一、自定义目录不能根据视口固定
 
-::: danger  巨坑
+::: danger 巨坑
 找了好多博客参考，没发现有相关的问题，挠破头皮都没想明白啥原因，还好碰到一篇博客解决了疑惑
 :::
 ::: tip
- 参考博客：[position: fixed; 不相对于屏幕视口定位](https://www.jianshu.com/p/238ccd35fa6d?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation)
+参考博客：[position: fixed; 不相对于屏幕视口定位](https://www.jianshu.com/p/238ccd35fa6d?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation)
 :::
 
 ::: warning
@@ -17,33 +17,21 @@
 
 :::
 
-
-
-
 **解决方法**：自定义样式覆盖就好啦
 
 ```css
-.page>section {
-    transform: none!important;
+.page > section {
+  transform: none !important;
 }
 ```
 
-
-
-
-
 ## 坑点二、引用的Gitee图床图片没显示
 
-
 > 有人说是图床的问题、防盗链的问题，最后才发现自己把图床项目设为私有的项目了，重新设为开源成功解决
 
-
-
-
-
 ## 坑点三、Hexo博客源码没有备份，误点VsCode`放弃所有更改并且回退版本`
 
-::: danger  天坑
+::: danger 天坑
 因学习配置博客用git action来自动化部署，配置完后发现打包报错，搞了好久没办法解决。
 本来想执行`git checkout .`，看到VsCode有个快捷按钮，由于之前没有备份博客源码，点了一下直接回到解放前！
 :::
@@ -51,4 +39,3 @@
 ::: tip 领悟
 来到了新的阵地VuePress折腾，学到了码农必备技能------备份
 :::
-
diff --git "a/docs/Problem/VueProject/Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.md" "b/docs/Problem/VueProject/Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.md"
index ac63ab3c..54fe8e93 100644
--- "a/docs/Problem/VueProject/Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.md"
+++ "b/docs/Problem/VueProject/Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.md"
@@ -2,11 +2,9 @@
 
 ## [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)插件
 
- 安装后使用完把`--report`参数去掉，还是会给你生成打包文件，并会提示8888端口被占用，
-
- 需要在`vue.config.js`注释插件的使用，才能不被影响
-
+安装后使用完把`--report`参数去掉，还是会给你生成打包文件，并会提示8888端口被占用，
 
+需要在`vue.config.js`注释插件的使用，才能不被影响
 
 ## 点击弹窗父子传值成功，但是数据没有展示
 
@@ -15,15 +13,19 @@
 > 最后才发现是前端element-ui**全局引入**改为**按需引入**, `DescriptionsItem `组件漏写了(没有警告、报错提示，巨坑)
 
 ```html
-  <el-dialog
+<el-dialog
   :title="title"
   :visible="visible"
-   :before-close="close"  :close-on-click-modal="false">    
-   <el-descriptions   border>
-        <!--在main.js漏了导入并使用DescriptionsItem-->
-        <el-descriptions-item label="ID"> {{accountInfo.id}} </el-descriptions-item>
-        <el-descriptions-item label="name"> {{accountInfo.name}} </el-descriptions-item>
-    </el-descriptions>
+  :before-close="close"
+  :close-on-click-modal="false"
+>
+  <el-descriptions border>
+    <!--在main.js漏了导入并使用DescriptionsItem-->
+    <el-descriptions-item label="ID"> {{accountInfo.id}} </el-descriptions-item>
+    <el-descriptions-item label="name">
+      {{accountInfo.name}}
+    </el-descriptions-item>
+  </el-descriptions>
 </el-dialog>
 ```
 
@@ -32,221 +34,222 @@
 ![image-20230219214203987](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192142529.png)
 
 ```vue
-<template>
-	<div class="text-update-wrap">
-		<p class="text-show" v-if="!isEditing">
-			<span
-				class="single-overflow text-val"
-				:style="{ 'max-width': maxWidth }"
-        :title="text"
-				>{{ text }}</span
-			>
-			<span class="el-icon-edit" @click="switchToEdit"></span>
-		</p>
-		<p class="text-edit" v-else>
-			<el-input
-				v-model="inputVal"
-				ref="inputRef"
-				:placeholder="'请输入' + name"
-				size="mini"
-				clearable
-			></el-input>
-       <!-- @blur='cancelUpdate' 事件比confirmUpdate先执行，导致确定按钮事件没触发-->
-			<span
-				title="确定"
-				:class="loading ? 'el-icon-loading' : 'el-icon-circle-check'"
-				@click="confirmUpdate"
-			></span>
-			<span
-				title="取消"
-				class="el-icon-circle-close"
-				@click="cancelEdit"
-				v-if="!loading"
-			></span>
-		</p>
-	</div>
-</template>
-
 <script>
 export default {
-	name: "UpdateText",
-	props: {
-		textVal: {
-			type: String,
-			default: "",
-		},
-		name: {
-			type: String,
-			default: "名称",
-		},
-		maxWidth: {
-			type: String,
-			default: "200px",
-		},
+  name: 'UpdateText',
+  components: {},
+  props: {
+    textVal: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '名称',
+    },
+    maxWidth: {
+      type: String,
+      default: '200px',
+    },
     id: {
       type: String,
-      default: "",
+      default: '',
     },
-	},
-	data() {
-		return {
-			loading: false,
-			isEditing: false,
-			inputVal: "",
-			text: this.textVal,
-		}
-	},
-	computed: {},
-	watch: {},
-	components: {},
-	methods: {
-		//切换到输入框模式
-		switchToEdit() {
-			this.inputVal = this.textVal
-			this.isEditing = true
-			this.$nextTick(() => {
-				this.$refs.inputRef.focus()
-			})
-		},
-    cancelEdit(){
-				this.isEditing = false	
+  },
+  data() {
+    return {
+      loading: false,
+      isEditing: false,
+      inputVal: '',
+      text: this.textVal,
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    // 解决方案：不使用@blur, 监听焦点不在此组件时，才取消编辑
+    document.addEventListener('click', (e) => {
+      if (!this.$el.contains(e.target))
+        this.cancelEdit()
+    })
+  },
+  methods: {
+    // 切换到输入框模式
+    switchToEdit() {
+      this.inputVal = this.textVal
+      this.isEditing = true
+      this.$nextTick(() => {
+        this.$refs.inputRef.focus()
+      })
     },
-		//确定更新
-	   confirmUpdate() {
-			let { inputVal, name ,id} = this
-      let value = inputVal.trim()
-			if (value === "") {
-				this.$message.error(`${name}不能为空`)
-				return
-			}else if(value === this.textVal){
-				this.isEditing = false
-				return
-			}
-			this.loading = true
-      if(id){
-        this.$emit("confirm", value, id)
-      }else{
-        this.$emit("confirm", value)
+    cancelEdit() {
+      this.isEditing = false
+    },
+    // 确定更新
+     confirmUpdate() {
+      const { inputVal, name, id } = this
+      const value = inputVal.trim()
+      if (value === '') {
+        this.$message.error(`${name}不能为空`)
+        return
+      }
+      else if (value === this.textVal) {
+        this.isEditing = false
+        return
       }
-		},
-		successUpdate() {
-      let { inputVal, name } = this
-			this.loading = false
-			this.text = inputVal
-			this.isEditing = false
-			this.$notify.success(`${name}修改成功`)
-		},
-    //失败
+      this.loading = true
+      if (id)
+        this.$emit('confirm', value, id)
+
+      else
+        this.$emit('confirm', value)
+    },
+    successUpdate() {
+      const { inputVal, name } = this
+      this.loading = false
+      this.text = inputVal
+      this.isEditing = false
+      this.$notify.success(`${name}修改成功`)
+    },
+    // 失败
     failUpdate() {
       this.loading = false
       this.$notify.error(`${this.name}修改失败`)
     },
-	},
-	created() {},
-	mounted() {
-		//解决方案：不使用@blur, 监听焦点不在此组件时，才取消编辑
-		document.addEventListener("click", (e) => {
-			if (!this.$el.contains(e.target)) {
-				this.cancelEdit()
-			}
-		})
-	},
+  },
 }
 </script>
+
+<template>
+  <div class="text-update-wrap">
+    <p v-if="!isEditing" class="text-show">
+      <span
+        class="single-overflow text-val"
+        :style="{ 'max-width': maxWidth }"
+        :title="text"
+      >{{ text }}</span>
+      <span class="el-icon-edit" @click="switchToEdit" />
+    </p>
+    <p v-else class="text-edit">
+      <el-input
+        ref="inputRef"
+        v-model="inputVal"
+        :placeholder="`请输入${name}`"
+        size="mini"
+        clearable
+      />
+      <!-- @blur='cancelUpdate' 事件比confirmUpdate先执行，导致确定按钮事件没触发 -->
+      <span
+        title="确定"
+        :class="loading ? 'el-icon-loading' : 'el-icon-circle-check'"
+        @click="confirmUpdate"
+      />
+      <span
+        v-if="!loading"
+        title="取消"
+        class="el-icon-circle-close"
+        @click="cancelEdit"
+      />
+    </p>
+  </div>
+</template>
 ```
 
 ## 文本溢出隐藏处理后对不齐问题
 
-
-
 ![image-20230219214258711](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192142738.png)
 
-```css
+```scss
 .el-checkbox {
   width: 200px;
   ::v-deep .el-checkbox__label {
     width: 186px;
-    vertical-align: middle; //需要重新设置对齐线
+    vertical-align: middle; /* 需要重新设置对齐线 */
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 }
+
 ```
 
 ## 路由组件切换，事件总线意外多次触发
 
-```js 
-//A路由组件
-this.$bus.$emit("searchDone")
+```js
+// A路由组件
+this.$bus.$emit('searchDone')
 ```
+
 ```js {3}
 //B路由组件
 mounted(){
-		this.$bus.$off('searchDone') //在每次绑定事件前，先解绑该事件
+    this.$bus.$off('searchDone') //在每次绑定事件前，先解绑该事件
 
-		this.$bus.$on('searchDone',this.handleCurrentChange)
-	},
+    this.$bus.$on('searchDone',this.handleCurrentChange)
+  },
 
 ```
 
-
 ## 前端配合 Nginx 服务开启 gzip 页面加载不出来
-```js 
+
+```js
 //vue.config.js
 plugins: [
-	new CompressionWebpackPlugin({
-		exclude: /node_modules/,
-		test: /\.(js|css)$/,
-		threshold: 10240, // 超过10kb的文件就压缩
-		deleteOriginalAssets: true, // 不删除源文件
-		algorithm: "gzip",
-		minRatio: 0.8,
-	}),
+  new CompressionWebpackPlugin({
+    exclude: /node_modules/,
+    test: /\.(js|css)$/,
+    threshold: 10240, // 超过10kb的文件就压缩
+    deleteOriginalAssets: true, // 不删除源文件
+    algorithm: "gzip",
+    minRatio: 0.8,
+  }),
 ],
 ```
- ![2023-03-30-14-58-50](https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-03-30-14-58-50.png)
 
+![2023-03-30-14-58-50](https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-03-30-14-58-50.png)
 
- ## TailwindCSS动态绑定类不能随着渐变
-```vue
+## TailwindCSS动态绑定类不能随着渐变
 
-<template>
-  <header  :class="headerBg"></header>
-</template>
+```vue
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-//通过判断滚动的距离，来决定header 背景色的变化
+import { onMounted, ref } from 'vue'
+// 通过判断滚动的距离，来决定header 背景色的变化
 
-let headerBg = ref("bg-zinc-900/[.00]");
-const handleScroll = () => {
-  const scrollHeight = document.documentElement.scrollTop;
+const headerBg = ref('bg-zinc-900/[.00]')
+function handleScroll() {
+  const scrollHeight = document.documentElement.scrollTop
   if (scrollHeight < 100) {
-    let opacity = (scrollHeight / 100).toFixed(1).slice(1);
+    const opacity = (scrollHeight / 100).toFixed(1).slice(1)
     headerBg.value = `bg-zinc-900/[${opacity}]`
-  } else {
+  }
+  else {
     headerBg.value = `bg-zinc-900/[1]`
   }
-};
-  window.addEventListener("scroll", handleScroll);
+}
+window.addEventListener('scroll', handleScroll)
 </script>
+
+<template>
+  <header :class="headerBg" />
+</template>
 ```
 
 ## 监听非 `window` resize 事件不生效问题
 
-不会生效原因：  div 元素默认不会触发 resize 事件。在 window 对象上，浏览器会自动跟踪窗口的大小变化并触发 resize 事件，但在其他元素上，您需要自己编写代码来检测大小变化。可以使用 MutationObserver 或者 ResizeObserver 来监听元素大小变化。以下是使用 ResizeObserver 的示例代码：
+不会生效原因： div 元素默认不会触发 resize 事件。在 window 对象上，浏览器会自动跟踪窗口的大小变化并触发 resize 事件，但在其他元素上，您需要自己编写代码来检测大小变化。可以使用 MutationObserver 或者 ResizeObserver 来监听元素大小变化。以下是使用 ResizeObserver 的示例代码：
 
 ```js
 mounted() {
   this.tagListRef = this.$refs.tagListRef;
   this.tagBoxRef = this.$refs.tagBoxRef;
   this.resizeHandler()
-  
+
   // 创建 ResizeObserver 实例
   this.tagListResizeObserver = new ResizeObserver(this.resizeHandler);
   // 监听 tagListRef 元素的大小变化
   this.tagListResizeObserver.observe(this.tagListRef);
-  
+
   this.tagListRef.addEventListener('wheel', this.handleScroll);
 },
 beforeUnmount() {
@@ -265,6 +268,6 @@ methods: {
     // entries 是 ResizeObserver 的回调参数，包含被观察的元素的信息
     this.tagListWidth = this.tagListRef.clientWidth
     this.tagBoxWidth = this.tagBoxRef.clientWidth
-  } 
+  }
 }
-```
\ No newline at end of file
+```
diff --git a/docs/Problem/index.md b/docs/Problem/index.md
index 8bf62ffc..b910243e 100644
--- a/docs/Problem/index.md
+++ b/docs/Problem/index.md
@@ -1,4 +1,5 @@
 # 编程踩坑积累与总结
-::: tip 
+
+::: tip
 这里主要记录编程遇到的问题，已经解决方案，以便以后回顾或找到更优解!
-:::
\ No newline at end of file
+:::
diff --git a/documate.json b/documate.json
index 1208ab40..ec81dbc5 100644
--- a/documate.json
+++ b/documate.json
@@ -1,5 +1,5 @@
 {
   "root": ".",
-  "include": [ "**/*.md"],
+  "include": ["**/*.md"],
   "backend": "https://vwg4waeeqt.us.aircode.run/upload"
 }
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 00000000..97ecee26
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,5 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  formatters: true,
+})
diff --git a/package.json b/package.json
index 33fc48c3..f4c03b34 100644
--- a/package.json
+++ b/package.json
@@ -8,11 +8,21 @@
     "gs": "node scripts/generate-sidebar.cjs",
     "pb:gitee": "zsh deploy.sh && node scripts/auto-update-pages.js",
     "documate:upload": "documate upload",
-    "clean": "rimraf node_modules && rm -rf dist && pnpm i"
+    "clean": "rimraf node_modules && rm -rf dist && pnpm i",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix ."
+  },
+  "dependencies": {
+    "@documate/vue": "^0.3.1",
+    "sass": "^1.69.5",
+    "vite-plugin-pwa": "^0.16.7"
   },
   "devDependencies": {
+    "@antfu/eslint-config": "^2.6.1",
     "@documate/documate": "^0.2.1",
     "@vite-pwa/vitepress": "^0.2.3",
+    "eslint": "^8.56.0",
+    "eslint-plugin-format": "^0.1.0",
     "flexsearch": "^0.7.31",
     "markdown-it": "^13.0.2",
     "puppeteer": "^21.5.2",
@@ -23,10 +33,5 @@
     "vitepress": "1.0.0-rc.24",
     "vitepress-plugin-search": "1.0.4-alpha.20",
     "vue": "^3.3.8"
-  },
-  "dependencies": {
-    "@documate/vue": "^0.3.1",
-    "sass": "^1.69.5",
-    "vite-plugin-pwa": "^0.16.7"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 212571ba..1ab46129 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,12 +16,21 @@ dependencies:
     version: 0.16.7(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
 
 devDependencies:
+  '@antfu/eslint-config':
+    specifier: ^2.6.1
+    version: 2.6.1(@vue/compiler-sfc@3.3.8)(eslint-plugin-format@0.1.0)(eslint@8.56.0)(typescript@5.3.3)
   '@documate/documate':
     specifier: ^0.2.1
     version: 0.2.1
   '@vite-pwa/vitepress':
     specifier: ^0.2.3
     version: 0.2.3(vite-plugin-pwa@0.16.7)
+  eslint:
+    specifier: ^8.56.0
+    version: 8.56.0
+  eslint-plugin-format:
+    specifier: ^0.1.0
+    version: 0.1.0(eslint@8.56.0)
   flexsearch:
     specifier: ^0.7.31
     version: 0.7.31
@@ -30,13 +39,13 @@ devDependencies:
     version: 13.0.2
   puppeteer:
     specifier: ^21.5.2
-    version: 21.5.2
+    version: 21.5.2(typescript@5.3.3)
   unplugin-auto-import:
     specifier: ^0.14.4
     version: 0.14.4(rollup@2.79.1)
   unplugin-icons:
     specifier: ^0.15.3
-    version: 0.15.3
+    version: 0.15.3(@vue/compiler-sfc@3.3.8)
   unplugin-vue-components:
     specifier: ^0.23.0
     version: 0.23.0(rollup@2.79.1)(vue@3.3.8)
@@ -45,16 +54,21 @@ devDependencies:
     version: 4.5.0(sass@1.69.5)
   vitepress:
     specifier: 1.0.0-rc.24
-    version: 1.0.0-rc.24(@algolia/client-search@4.20.0)(postcss@8.4.31)(sass@1.69.5)(search-insights@2.11.0)
+    version: 1.0.0-rc.24(@algolia/client-search@4.20.0)(postcss@8.4.31)(sass@1.69.5)(search-insights@2.11.0)(typescript@5.3.3)
   vitepress-plugin-search:
     specifier: 1.0.4-alpha.20
     version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-rc.24)(vue@3.3.8)
   vue:
     specifier: ^3.3.8
-    version: 3.3.8
+    version: 3.3.8(typescript@5.3.3)
 
 packages:
 
+  /@aashutoshrathi/word-wrap@1.2.6:
+    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.11.0):
     resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==}
     dependencies:
@@ -201,6 +215,88 @@ packages:
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.20
 
+  /@antfu/eslint-config@2.6.1(@vue/compiler-sfc@3.3.8)(eslint-plugin-format@0.1.0)(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-hj7TTLXLLyk4YHp6SC0G3NTpGyn+5v9EHX3K8JMwz8qIQZnOSzpU8xQ4PcJW3wD3qePVoGDa1Q9QvYCKplIStQ==}
+    hasBin: true
+    peerDependencies:
+      '@unocss/eslint-plugin': '>=0.50.0'
+      eslint: '>=8.40.0'
+      eslint-plugin-format: '>=0.1.0'
+      eslint-plugin-react: ^7.33.2
+      eslint-plugin-react-hooks: ^4.6.0
+      eslint-plugin-react-refresh: ^0.4.4
+      eslint-plugin-svelte: ^2.34.1
+      svelte-eslint-parser: ^0.33.1
+    peerDependenciesMeta:
+      '@unocss/eslint-plugin':
+        optional: true
+      eslint-plugin-format:
+        optional: true
+      eslint-plugin-react:
+        optional: true
+      eslint-plugin-react-hooks:
+        optional: true
+      eslint-plugin-react-refresh:
+        optional: true
+      eslint-plugin-svelte:
+        optional: true
+      svelte-eslint-parser:
+        optional: true
+    dependencies:
+      '@antfu/eslint-define-config': 1.23.0-2
+      '@antfu/install-pkg': 0.3.1
+      '@eslint-types/jsdoc': 46.8.2-1
+      '@eslint-types/typescript-eslint': 6.17.0
+      '@eslint-types/unicorn': 50.0.1
+      '@stylistic/eslint-plugin': 1.5.3(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/eslint-plugin': 6.17.0(@typescript-eslint/parser@6.17.0)(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 6.17.0(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
+      eslint-config-flat-gitignore: 0.1.2
+      eslint-merge-processors: 0.1.0(eslint@8.56.0)
+      eslint-plugin-antfu: 2.1.1(eslint@8.56.0)
+      eslint-plugin-eslint-comments: 3.2.0(eslint@8.56.0)
+      eslint-plugin-format: 0.1.0(eslint@8.56.0)
+      eslint-plugin-i: 2.29.1(@typescript-eslint/parser@6.17.0)(eslint@8.56.0)
+      eslint-plugin-jsdoc: 46.10.1(eslint@8.56.0)
+      eslint-plugin-jsonc: 2.11.2(eslint@8.56.0)
+      eslint-plugin-markdown: 3.0.1(eslint@8.56.0)
+      eslint-plugin-n: 16.6.1(eslint@8.56.0)
+      eslint-plugin-no-only-tests: 3.1.0
+      eslint-plugin-perfectionist: 2.5.0(eslint@8.56.0)(typescript@5.3.3)(vue-eslint-parser@9.3.2)
+      eslint-plugin-toml: 0.8.0(eslint@8.56.0)
+      eslint-plugin-unicorn: 50.0.1(eslint@8.56.0)
+      eslint-plugin-unused-imports: 3.0.0(@typescript-eslint/eslint-plugin@6.17.0)(eslint@8.56.0)
+      eslint-plugin-vitest: 0.3.20(@typescript-eslint/eslint-plugin@6.17.0)(eslint@8.56.0)(typescript@5.3.3)
+      eslint-plugin-vue: 9.19.2(eslint@8.56.0)
+      eslint-plugin-yml: 1.11.0(eslint@8.56.0)
+      eslint-processor-vue-blocks: 0.1.1(@vue/compiler-sfc@3.3.8)(eslint@8.56.0)
+      globals: 13.24.0
+      jsonc-eslint-parser: 2.4.0
+      local-pkg: 0.5.0
+      parse-gitignore: 2.0.0
+      picocolors: 1.0.0
+      prompts: 2.4.2
+      toml-eslint-parser: 0.9.3
+      vue-eslint-parser: 9.3.2(eslint@8.56.0)
+      yaml-eslint-parser: 1.2.2
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@vue/compiler-sfc'
+      - astro-eslint-parser
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+      - svelte
+      - typescript
+      - vitest
+    dev: true
+
+  /@antfu/eslint-define-config@1.23.0-2:
+    resolution: {integrity: sha512-LvxY21+ZhpuBf/aHeBUtGQhSEfad4PkNKXKvDOSvukaM3XVTfBhwmHX2EKwAsdq5DlfjbT3qqYyMiueBIO5iDQ==}
+    engines: {node: '>=18.0.0', npm: '>=9.0.0', pnpm: '>= 8.6.0'}
+    dev: true
+
   /@antfu/install-pkg@0.1.1:
     resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
     dependencies:
@@ -208,6 +304,12 @@ packages:
       find-up: 5.0.0
     dev: true
 
+  /@antfu/install-pkg@0.3.1:
+    resolution: {integrity: sha512-A3zWY9VeTPnxlMiZtsGHw2lSd3ghwvL8s9RiGOtqvDxhhFfZ781ynsGBa/iUnDJ5zBrmTFQrJDud3TGgRISaxw==}
+    dependencies:
+      execa: 8.0.1
+    dev: true
+
   /@antfu/utils@0.7.6:
     resolution: {integrity: sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==}
     dev: true
@@ -1224,7 +1326,7 @@ packages:
       babel-plugin-polyfill-corejs2: 0.4.6(@babel/core@7.23.3)
       babel-plugin-polyfill-corejs3: 0.8.6(@babel/core@7.23.3)
       babel-plugin-polyfill-regenerator: 0.5.3(@babel/core@7.23.3)
-      core-js-compat: 3.33.2
+      core-js-compat: 3.35.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -1354,12 +1456,33 @@ packages:
       less: 4.2.0
       markdown-it: 13.0.2
       markdown-it-highlightjs: 4.0.1
-      vue: 3.3.8
+      vue: 3.3.8(typescript@5.3.3)
     transitivePeerDependencies:
       - supports-color
       - tailwindcss
     dev: false
 
+  /@dprint/formatter@0.2.1:
+    resolution: {integrity: sha512-GCzgRt2o4mhZLy8L47k2A+q9EMG/jWhzZebE29EqKsxmjDrSfv2VisEj/Q+39OOf04jTkEfB/TRO+IZSyxHdYg==}
+    dev: true
+
+  /@dprint/markdown@0.16.3:
+    resolution: {integrity: sha512-KvwUrCdHR1spFk0EcdW33KEGFLfkcdx6hJN8mwipGBw0b40sl5oPtVUTgRiH70eV7VUhPfycDfIsDutWNHb17w==}
+    dev: true
+
+  /@dprint/toml@0.5.4:
+    resolution: {integrity: sha512-d+5GwwzztZD0QixmOBhaO6nWVLsAeYsJ1HJYNxDoDRbASFCpza9BBVshG5ctBRXCkkIHhD9BO1SnbOoRQltUQw==}
+    dev: true
+
+  /@es-joy/jsdoccomment@0.41.0:
+    resolution: {integrity: sha512-aKUhyn1QI5Ksbqcr3fFJj16p99QdjUxXAEuFst1Z47DRyoiMwivIH9MV/ARcJOCXVjPfjITciej8ZD2O/6qUmw==}
+    engines: {node: '>=16'}
+    dependencies:
+      comment-parser: 1.4.1
+      esquery: 1.5.0
+      jsdoc-type-pratt-parser: 4.0.0
+    dev: true
+
   /@esbuild/android-arm64@0.18.20:
     resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
     engines: {node: '>=12'}
@@ -1536,15 +1659,84 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
+    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
+    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.56.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /@eslint-community/regexpp@4.10.0:
+    resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dev: true
+
+  /@eslint-types/jsdoc@46.8.2-1:
+    resolution: {integrity: sha512-FwD7V0xX0jyaqj8Ul5ZY+TAAPohDfVqtbuXJNHb+OIv1aTIqZi5+Zn3F2UwQ5O3BnQd2mTduyK0+HjGx3/AMFg==}
+    dev: true
+
+  /@eslint-types/typescript-eslint@6.17.0:
+    resolution: {integrity: sha512-fPwdc27nXbsn69obhmOujFMxheimgs+Hf0iHCyq0s1w48iPpd0PgA/UvAs/PRUY/H9GYvrZDSvBTxtHLqnzb3A==}
+    dev: true
+
+  /@eslint-types/unicorn@50.0.1:
+    resolution: {integrity: sha512-nuJuipTNcg9f+oxZ+3QZw4tuDLmir4RJOPfM/oujgToiy1s+tePDZhwg5jUGc3q8OzTtPbVpsFSYX7QApjO3EA==}
+    dev: true
+
+  /@eslint/eslintrc@2.1.4:
+    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.4
+      espree: 9.6.1
+      globals: 13.24.0
+      ignore: 5.3.0
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@eslint/js@8.56.0:
+    resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
   /@headlessui/vue@1.7.16(vue@3.3.8):
     resolution: {integrity: sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==}
     engines: {node: '>=10'}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
-      vue: 3.3.8
+      vue: 3.3.8(typescript@5.3.3)
     dev: false
 
+  /@humanwhocodes/config-array@0.11.13:
+    resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
+    engines: {node: '>=10.10.0'}
+    dependencies:
+      '@humanwhocodes/object-schema': 2.0.1
+      debug: 4.3.4
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@humanwhocodes/module-importer@1.0.1:
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+    dev: true
+
+  /@humanwhocodes/object-schema@2.0.1:
+    resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
+    dev: true
+
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true
@@ -1680,6 +1872,11 @@ packages:
     dev: true
     optional: true
 
+  /@pkgr/core@0.1.0:
+    resolution: {integrity: sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    dev: true
+
   /@puppeteer/browsers@1.8.0:
     resolution: {integrity: sha512-TkRHIV6k2D8OlUe8RtG+5jgOF/H98Myx0M6AOafC8DdNVOFiBSFa5cpRDtpm8LXOa9sVwe0+e6Q3FC56X/DZfg==}
     engines: {node: '>=16.3.0'}
@@ -1761,6 +1958,72 @@ packages:
       rollup: 2.79.1
     dev: true
 
+  /@stylistic/eslint-plugin-js@1.5.3(eslint@8.56.0):
+    resolution: {integrity: sha512-XlKnm82fD7Sw9kQ6FFigE0tobvptNBXZWsdfoKmUyK7bNxHsAHOFT8zJGY3j3MjZ0Fe7rLTu86hX/vOl0bRRdQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: '>=8.40.0'
+    dependencies:
+      acorn: 8.11.3
+      escape-string-regexp: 4.0.0
+      eslint: 8.56.0
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+    dev: true
+
+  /@stylistic/eslint-plugin-jsx@1.5.3(eslint@8.56.0):
+    resolution: {integrity: sha512-gKXWFmvg3B4e6G+bVz2p37icjj3gS5lzazZD6oLjmQ2b0Lw527VpnxGjWxQ16keKXtrVzUfebakjskOoALg3CQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: '>=8.40.0'
+    dependencies:
+      '@stylistic/eslint-plugin-js': 1.5.3(eslint@8.56.0)
+      eslint: 8.56.0
+      estraverse: 5.3.0
+    dev: true
+
+  /@stylistic/eslint-plugin-plus@1.5.3(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-fuOBySbH4dbfY4Dwvu+zg5y+e0lALHTyQske5+a2zNC8Ejnx4rFlVjYOmaVFtxFhTD4V0vM7o21Ozci0igcxKg==}
+    peerDependencies:
+      eslint: '*'
+    dependencies:
+      '@typescript-eslint/utils': 6.17.0(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@stylistic/eslint-plugin-ts@1.5.3(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-/gUEqGo0gpFeu220YmC0788VliKnmTaAz4pI82KA5cUuCp6OzEhGlrNkb1eevMwH0RRgyND20HJxOYvEGlwu+w==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: '>=8.40.0'
+    dependencies:
+      '@stylistic/eslint-plugin-js': 1.5.3(eslint@8.56.0)
+      '@typescript-eslint/utils': 6.17.0(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@stylistic/eslint-plugin@1.5.3(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-Vee+hHKaCd8DPRoRJTCV+mOFz+zFIaA9QiNJaAvgBzmPkcDnSC7Ewh518fN6SSNe9psS8TDIpcxd1g5v4MSY5A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: '>=8.40.0'
+    dependencies:
+      '@stylistic/eslint-plugin-js': 1.5.3(eslint@8.56.0)
+      '@stylistic/eslint-plugin-jsx': 1.5.3(eslint@8.56.0)
+      '@stylistic/eslint-plugin-plus': 1.5.3(eslint@8.56.0)(typescript@5.3.3)
+      '@stylistic/eslint-plugin-ts': 1.5.3(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
   /@surma/rollup-plugin-off-main-thread@2.2.3:
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
     dependencies:
@@ -1793,6 +2056,10 @@ packages:
     resolution: {integrity: sha512-H5IXcRn96/gaDmo+rDl2aJuIJsob8dgOXDqf8K0t8rWZd1AFNaaspmRsElESiU+EWE33qfbFPgI0OC/B1g9FCA==}
     dev: true
 
+  /@types/json-schema@7.0.15:
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+    dev: true
+
   /@types/linkify-it@3.0.5:
     resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==}
     dev: true
@@ -1811,6 +2078,12 @@ packages:
       '@types/mdurl': 1.0.5
     dev: true
 
+  /@types/mdast@3.0.15:
+    resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
+    dependencies:
+      '@types/unist': 2.0.10
+    dev: true
+
   /@types/mdurl@1.0.5:
     resolution: {integrity: sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==}
     dev: true
@@ -1821,14 +2094,26 @@ packages:
     dependencies:
       undici-types: 5.26.5
 
+  /@types/normalize-package-data@2.4.4:
+    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
+    dev: true
+
   /@types/resolve@1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
       '@types/node': 20.9.1
 
+  /@types/semver@7.5.6:
+    resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
+    dev: true
+
   /@types/trusted-types@2.0.6:
     resolution: {integrity: sha512-HYtNooPvUY9WAVRBr4u+4Qa9fYD1ze2IUlAD3HoA6oehn1taGwBx3Oa52U4mTslTS+GAExKpaFu39Y5xUEwfjg==}
 
+  /@types/unist@2.0.10:
+    resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
+    dev: true
+
   /@types/web-bluetooth@0.0.20:
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
     dev: true
@@ -1841,6 +2126,142 @@ packages:
     dev: true
     optional: true
 
+  /@typescript-eslint/eslint-plugin@6.17.0(@typescript-eslint/parser@6.17.0)(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-Vih/4xLXmY7V490dGwBQJTpIZxH4ZFH6eCVmQ4RFkB+wmaCTDAx4dtgoWwMNGKLkqRY1L6rPqzEbjorRnDo4rQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@eslint-community/regexpp': 4.10.0
+      '@typescript-eslint/parser': 6.17.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/scope-manager': 6.17.0
+      '@typescript-eslint/type-utils': 6.17.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.17.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/visitor-keys': 6.17.0
+      debug: 4.3.4
+      eslint: 8.56.0
+      graphemer: 1.4.0
+      ignore: 5.3.0
+      natural-compare: 1.4.0
+      semver: 7.5.4
+      ts-api-utils: 1.0.3(typescript@5.3.3)
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/parser@6.17.0(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-C4bBaX2orvhK+LlwrY8oWGmSl4WolCfYm513gEccdWZj0CwGadbIADb0FtVEcI+WzUyjyoBj2JRP8g25E6IB8A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 6.17.0
+      '@typescript-eslint/types': 6.17.0
+      '@typescript-eslint/typescript-estree': 6.17.0(typescript@5.3.3)
+      '@typescript-eslint/visitor-keys': 6.17.0
+      debug: 4.3.4
+      eslint: 8.56.0
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/scope-manager@6.17.0:
+    resolution: {integrity: sha512-RX7a8lwgOi7am0k17NUO0+ZmMOX4PpjLtLRgLmT1d3lBYdWH4ssBUbwdmc5pdRX8rXon8v9x8vaoOSpkHfcXGA==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.17.0
+      '@typescript-eslint/visitor-keys': 6.17.0
+    dev: true
+
+  /@typescript-eslint/type-utils@6.17.0(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-hDXcWmnbtn4P2B37ka3nil3yi3VCQO2QEB9gBiHJmQp5wmyQWqnjA85+ZcE8c4FqnaB6lBwMrPkgd4aBYz3iNg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/typescript-estree': 6.17.0(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.17.0(eslint@8.56.0)(typescript@5.3.3)
+      debug: 4.3.4
+      eslint: 8.56.0
+      ts-api-utils: 1.0.3(typescript@5.3.3)
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/types@6.17.0:
+    resolution: {integrity: sha512-qRKs9tvc3a4RBcL/9PXtKSehI/q8wuU9xYJxe97WFxnzH8NWWtcW3ffNS+EWg8uPvIerhjsEZ+rHtDqOCiH57A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dev: true
+
+  /@typescript-eslint/typescript-estree@6.17.0(typescript@5.3.3):
+    resolution: {integrity: sha512-gVQe+SLdNPfjlJn5VNGhlOhrXz4cajwFd5kAgWtZ9dCZf4XJf8xmgCTLIqec7aha3JwgLI2CK6GY1043FRxZwg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 6.17.0
+      '@typescript-eslint/visitor-keys': 6.17.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.3
+      semver: 7.5.4
+      ts-api-utils: 1.0.3(typescript@5.3.3)
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/utils@6.17.0(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-LofsSPjN/ITNkzV47hxas2JCsNCEnGhVvocfyOcLzT9c/tSZE7SfhS/iWtzP1lKNOEfLhRTZz6xqI8N2RzweSQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.6
+      '@typescript-eslint/scope-manager': 6.17.0
+      '@typescript-eslint/types': 6.17.0
+      '@typescript-eslint/typescript-estree': 6.17.0(typescript@5.3.3)
+      eslint: 8.56.0
+      semver: 7.5.4
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@typescript-eslint/visitor-keys@6.17.0:
+    resolution: {integrity: sha512-H6VwB/k3IuIeQOyYczyyKN8wH6ed8EwliaYHLxOIhyF0dYEIsN8+Bk3GE19qafeMKyZJJHP8+O1HiFhFLUNKSg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.17.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /@ungap/structured-clone@1.2.0:
+    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+    dev: true
+
   /@vite-pwa/vitepress@0.2.3(vite-plugin-pwa@0.16.7):
     resolution: {integrity: sha512-6k9151CmILbSJQ88hLEMLL+MOQZDURKg2c4Wo5UcaEaOWU0jv7S+mo8nqyg86sM6ry8Jlnp6Zfv6AE0FqnfEyQ==}
     peerDependencies:
@@ -1857,7 +2278,7 @@ packages:
       vue: ^3.2.25
     dependencies:
       vite: 4.5.0(sass@1.69.5)
-      vue: 3.3.8
+      vue: 3.3.8(typescript@5.3.3)
     dev: true
 
   /@vue/compiler-core@3.3.8:
@@ -1932,7 +2353,7 @@ packages:
     dependencies:
       '@vue/compiler-ssr': 3.3.8
       '@vue/shared': 3.3.8
-      vue: 3.3.8
+      vue: 3.3.8(typescript@5.3.3)
 
   /@vue/shared@3.3.8:
     resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
@@ -2012,10 +2433,24 @@ packages:
       - vue
     dev: true
 
+  /acorn-jsx@5.3.2(acorn@8.11.2):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.11.2
+    dev: true
+
   /acorn@8.11.2:
     resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
     engines: {node: '>=0.4.0'}
     hasBin: true
+    dev: true
+
+  /acorn@8.11.3:
+    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
 
   /agent-base@7.1.0:
     resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==}
@@ -2026,6 +2461,15 @@ packages:
       - supports-color
     dev: true
 
+  /ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+    dev: true
+
   /ajv@8.12.0:
     resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
     dependencies:
@@ -2100,6 +2544,11 @@ packages:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  /are-docs-informative@0.0.2:
+    resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
+    engines: {node: '>=14'}
+    dev: true
+
   /arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
     dev: false
@@ -2113,6 +2562,11 @@ packages:
       call-bind: 1.0.5
       is-array-buffer: 3.0.2
 
+  /array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+    dev: true
+
   /arraybuffer.prototype.slice@1.0.2:
     resolution: {integrity: sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==}
     engines: {node: '>= 0.4'}
@@ -2180,7 +2634,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.3
       '@babel/helper-define-polyfill-provider': 0.4.3(@babel/core@7.23.3)
-      core-js-compat: 3.33.2
+      core-js-compat: 3.35.0
     transitivePeerDependencies:
       - supports-color
 
@@ -2210,6 +2664,10 @@ packages:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
 
+  /boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+    dev: true
+
   /brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
@@ -2237,6 +2695,16 @@ packages:
       node-releases: 2.0.13
       update-browserslist-db: 1.0.13(browserslist@4.22.1)
 
+  /browserslist@4.22.2:
+    resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001572
+      electron-to-chromium: 1.4.619
+      node-releases: 2.0.14
+      update-browserslist-db: 1.0.13(browserslist@4.22.2)
+
   /buffer-crc32@0.2.13:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
     dev: true
@@ -2255,6 +2723,12 @@ packages:
     resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
     engines: {node: '>=6'}
 
+  /builtins@5.0.1:
+    resolution: {integrity: sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==}
+    dependencies:
+      semver: 7.5.4
+    dev: true
+
   /c12@1.5.1:
     resolution: {integrity: sha512-BWZRJgDEveT8uI+cliCwvYSSSSvb4xKoiiu5S0jaDbKBopQLQF7E+bq9xKk1pTcG+mUa3yXuFO7bD9d8Lr9Xxg==}
     dependencies:
@@ -2293,6 +2767,9 @@ packages:
   /caniuse-lite@1.0.30001562:
     resolution: {integrity: sha512-kfte3Hym//51EdX4239i+Rmp20EsLIYGdPkERegTgU19hQWCRhsRFGKHTliUlsry53tv17K7n077Kqa0WJU4ng==}
 
+  /caniuse-lite@1.0.30001572:
+    resolution: {integrity: sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==}
+
   /chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -2308,6 +2785,18 @@ packages:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  /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
+
   /chokidar@3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
@@ -2337,6 +2826,18 @@ packages:
       urlpattern-polyfill: 9.0.0
     dev: true
 
+  /ci-info@4.0.0:
+    resolution: {integrity: sha512-TdHqgGf9odd8SXNuxtUBVx8Nv+qZOejE6qyqiy5NtbYYQOeFa6zmHkxlPzmaLxWWHsU6nJmB7AETdVPi+2NBUg==}
+    engines: {node: '>=8'}
+    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
+
   /cli-cursor@3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
@@ -2394,6 +2895,11 @@ packages:
     engines: {node: '>= 6'}
     dev: false
 
+  /comment-parser@1.4.1:
+    resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
+    engines: {node: '>= 12.0.0'}
+    dev: true
+
   /common-tags@1.8.2:
     resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
     engines: {node: '>=4.0.0'}
@@ -2415,12 +2921,12 @@ packages:
       is-what: 3.14.1
     dev: false
 
-  /core-js-compat@3.33.2:
-    resolution: {integrity: sha512-axfo+wxFVxnqf8RvxTzoAlzW4gRoacrHeoFlc9n0x50+7BEyZL/Rt3hicaED1/CEd7I6tPCPVUYcJwCMO5XUYw==}
+  /core-js-compat@3.35.0:
+    resolution: {integrity: sha512-5blwFAddknKeNgsjBzilkdQ0+YK8L1PfqPYq40NOYMYFSS38qj+hpTcLLWwpIwA2A5bje/x5jmVn2tzUMg9IVw==}
     dependencies:
-      browserslist: 4.22.1
+      browserslist: 4.22.2
 
-  /cosmiconfig@8.3.6:
+  /cosmiconfig@8.3.6(typescript@5.3.3):
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -2433,6 +2939,7 @@ packages:
       js-yaml: 4.1.0
       parse-json: 5.2.0
       path-type: 4.0.0
+      typescript: 5.3.3
     dev: true
 
   /cross-fetch@4.0.0:
@@ -2460,7 +2967,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: false
 
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
@@ -2480,8 +2986,6 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.3
-    dev: false
-    optional: true
 
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@@ -2494,6 +2998,10 @@ packages:
     dependencies:
       ms: 2.1.2
 
+  /deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+    dev: true
+
   /deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
@@ -2562,6 +3070,13 @@ packages:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
     dev: false
 
+  /doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
   /dotenv@16.3.1:
     resolution: {integrity: sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==}
     engines: {node: '>=12'}
@@ -2581,6 +3096,9 @@ packages:
   /electron-to-chromium@1.4.587:
     resolution: {integrity: sha512-RyJX0q/zOkAoefZhB9XHghGeATVP0Q3mwA253XD/zj2OeXc+JZB9pCaEv6R578JUYaWM9PRhye0kXvd/V1cQ3Q==}
 
+  /electron-to-chromium@1.4.619:
+    resolution: {integrity: sha512-gW4qlnHxa49kp9kXlLdvnwdYEUlQRio30QOR61YfOQU8MaC/NGHWiJhyMMUl1EwFHbbzQTxvP1Dypdw95DjIow==}
+
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
@@ -2711,6 +3229,11 @@ packages:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
 
+  /escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+    dev: true
+
   /escape-string-regexp@5.0.0:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
@@ -2728,12 +3251,465 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /esprima@4.0.1:
-    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: true
-
+  /eslint-compat-utils@0.1.2(eslint@8.56.0):
+    resolution: {integrity: sha512-Jia4JDldWnFNIru1Ehx1H5s9/yxiRHY/TimCuUc0jNexew3cF1gI6CYZil1ociakfWO3rRqFjl1mskBblB3RYg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      eslint: 8.56.0
+    dev: true
+
+  /eslint-config-flat-gitignore@0.1.2:
+    resolution: {integrity: sha512-PcBsqtd5QHEZH4ROvpnRN4EP0qcHh9voCCHgtyHxnJZHGspJREcZn7oPqRG/GfWt9m3C0fkC2l5CuBtMig2wXQ==}
+    dependencies:
+      parse-gitignore: 2.0.0
+    dev: true
+
+  /eslint-formatting-reporter@0.0.0(eslint@8.56.0):
+    resolution: {integrity: sha512-k9RdyTqxqN/wNYVaTk/ds5B5rA8lgoAmvceYN7bcZMBwU7TuXx5ntewJv81eF3pIL/CiJE+pJZm36llG8yhyyw==}
+    peerDependencies:
+      eslint: '>=8.40.0'
+    dependencies:
+      eslint: 8.56.0
+      prettier-linter-helpers: 1.0.0
+    dev: true
+
+  /eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.13.1
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-merge-processors@0.1.0(eslint@8.56.0):
+    resolution: {integrity: sha512-IvRXXtEajLeyssvW4wJcZ2etxkR9mUf4zpNwgI+m/Uac9RfXHskuJefkHUcawVzePnd6xp24enp5jfgdHzjRdQ==}
+    peerDependencies:
+      eslint: '*'
+    dependencies:
+      eslint: 8.56.0
+    dev: true
+
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.17.0)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0):
+    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
+    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': 6.17.0(eslint@8.56.0)(typescript@5.3.3)
+      debug: 3.2.7
+      eslint: 8.56.0
+      eslint-import-resolver-node: 0.3.9
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-parser-plain@0.1.0:
+    resolution: {integrity: sha512-oOeA6FWU0UJT/Rxc3XF5Cq0nbIZbylm7j8+plqq0CZoE6m4u32OXJrR+9iy4srGMmF6v6pmgvP1zPxSRIGh3sg==}
+    dev: true
+
+  /eslint-plugin-antfu@2.1.1(eslint@8.56.0):
+    resolution: {integrity: sha512-HCPo3IP15/gOaruIb1ce6R4LUv/MKBZCmWzqYiLGDFW43WW4juPURnjaQIE3AgWNSoCURqD3wxerXYKzokKTgA==}
+    peerDependencies:
+      eslint: '*'
+    dependencies:
+      eslint: 8.56.0
+    dev: true
+
+  /eslint-plugin-es-x@7.5.0(eslint@8.56.0):
+    resolution: {integrity: sha512-ODswlDSO0HJDzXU0XvgZ3lF3lS3XAZEossh15Q2UHjwrJggWeBoKqqEsLTZLXl+dh5eOAozG0zRcYtuE35oTuQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=8'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      '@eslint-community/regexpp': 4.10.0
+      eslint: 8.56.0
+      eslint-compat-utils: 0.1.2(eslint@8.56.0)
+    dev: true
+
+  /eslint-plugin-eslint-comments@3.2.0(eslint@8.56.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.56.0
+      ignore: 5.3.0
+    dev: true
+
+  /eslint-plugin-format@0.1.0(eslint@8.56.0):
+    resolution: {integrity: sha512-IgOu+GEH+PdKnpuPrFzY8q8QgnzAUijDZsNLhpp5jx0Lbu9u968/STcmEZGnIMVBw3zeTNN/FsU6d2Rdgcy6Aw==}
+    peerDependencies:
+      eslint: ^8.40.0
+    dependencies:
+      '@dprint/formatter': 0.2.1
+      '@dprint/markdown': 0.16.3
+      '@dprint/toml': 0.5.4
+      eslint: 8.56.0
+      eslint-formatting-reporter: 0.0.0(eslint@8.56.0)
+      eslint-parser-plain: 0.1.0
+      prettier: 3.1.1
+      synckit: 0.8.8
+    dev: true
+
+  /eslint-plugin-i@2.29.1(@typescript-eslint/parser@6.17.0)(eslint@8.56.0):
+    resolution: {integrity: sha512-ORizX37MelIWLbMyqI7hi8VJMf7A0CskMmYkB+lkCX3aF4pkGV7kwx5bSEb4qx7Yce2rAf9s34HqDRPjGRZPNQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: ^7.2.0 || ^8
+    dependencies:
+      debug: 4.3.4
+      doctrine: 3.0.0
+      eslint: 8.56.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.17.0)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0)
+      get-tsconfig: 4.7.2
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      semver: 7.5.4
+    transitivePeerDependencies:
+      - '@typescript-eslint/parser'
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-plugin-jsdoc@46.10.1(eslint@8.56.0):
+    resolution: {integrity: sha512-x8wxIpv00Y50NyweDUpa+58ffgSAI5sqe+zcZh33xphD0AVh+1kqr1ombaTRb7Fhpove1zfUuujlX9DWWBP5ag==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
+    dependencies:
+      '@es-joy/jsdoccomment': 0.41.0
+      are-docs-informative: 0.0.2
+      comment-parser: 1.4.1
+      debug: 4.3.4
+      escape-string-regexp: 4.0.0
+      eslint: 8.56.0
+      esquery: 1.5.0
+      is-builtin-module: 3.2.1
+      semver: 7.5.4
+      spdx-expression-parse: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-jsonc@2.11.2(eslint@8.56.0):
+    resolution: {integrity: sha512-F6A0MZhIGRBPOswzzn4tJFXXkPLiLwJaMlQwz/Qj1qx+bV5MCn79vBeJh2ynMmtqqHloi54KDCnsT/KWrcCcnQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      eslint: 8.56.0
+      eslint-compat-utils: 0.1.2(eslint@8.56.0)
+      espree: 9.6.1
+      graphemer: 1.4.0
+      jsonc-eslint-parser: 2.4.0
+      natural-compare: 1.4.0
+    dev: true
+
+  /eslint-plugin-markdown@3.0.1(eslint@8.56.0):
+    resolution: {integrity: sha512-8rqoc148DWdGdmYF6WSQFT3uQ6PO7zXYgeBpHAOAakX/zpq+NvFYbDA/H7PYzHajwtmaOzAwfxyl++x0g1/N9A==}
+    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.56.0
+      mdast-util-from-markdown: 0.8.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-n@16.6.1(eslint@8.56.0):
+    resolution: {integrity: sha512-M1kE5bVQRLBMDYRZwDhWzlzbp370SRRRC1MHqq4I3L2Tatey+9/2csc5mwLDPlmhJaDvkojbrNUME5/llpRyDg==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      eslint: '>=7.0.0'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      builtins: 5.0.1
+      eslint: 8.56.0
+      eslint-plugin-es-x: 7.5.0(eslint@8.56.0)
+      get-tsconfig: 4.7.2
+      globals: 13.24.0
+      ignore: 5.3.0
+      is-builtin-module: 3.2.1
+      is-core-module: 2.13.1
+      minimatch: 3.1.2
+      resolve: 1.22.8
+      semver: 7.5.4
+    dev: true
+
+  /eslint-plugin-no-only-tests@3.1.0:
+    resolution: {integrity: sha512-Lf4YW/bL6Un1R6A76pRZyE1dl1vr31G/ev8UzIc/geCgFWyrKil8hVjYqWVKGB/UIGmb6Slzs9T0wNezdSVegw==}
+    engines: {node: '>=5.0.0'}
+    dev: true
+
+  /eslint-plugin-perfectionist@2.5.0(eslint@8.56.0)(typescript@5.3.3)(vue-eslint-parser@9.3.2):
+    resolution: {integrity: sha512-F6XXcq4mKKUe/SREoMGQqzgw6cgCgf3pFzkFfQVIGtqD1yXVpQjnhTepzhBeZfxZwgMzR9HO4yH4CUhIQ2WBcQ==}
+    peerDependencies:
+      astro-eslint-parser: ^0.16.0
+      eslint: '>=8.0.0'
+      svelte: '>=3.0.0'
+      svelte-eslint-parser: ^0.33.0
+      vue-eslint-parser: '>=9.0.0'
+    peerDependenciesMeta:
+      astro-eslint-parser:
+        optional: true
+      svelte:
+        optional: true
+      svelte-eslint-parser:
+        optional: true
+      vue-eslint-parser:
+        optional: true
+    dependencies:
+      '@typescript-eslint/utils': 6.17.0(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
+      minimatch: 9.0.3
+      natural-compare-lite: 1.4.0
+      vue-eslint-parser: 9.3.2(eslint@8.56.0)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /eslint-plugin-toml@0.8.0(eslint@8.56.0):
+    resolution: {integrity: sha512-vNfoLQq60nK5FTr6x9F/SK3ZcbMsHzfgXsoDLhoCqgGtpzoAmsZrFB+efKEjjLT9wdIL6sKbz4taLKpB9sU8Hw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      debug: 4.3.4
+      eslint: 8.56.0
+      eslint-compat-utils: 0.1.2(eslint@8.56.0)
+      lodash: 4.17.21
+      toml-eslint-parser: 0.9.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-unicorn@50.0.1(eslint@8.56.0):
+    resolution: {integrity: sha512-KxenCZxqSYW0GWHH18okDlOQcpezcitm5aOSz6EnobyJ6BIByiPDviQRjJIUAjG/tMN11958MxaQ+qCoU6lfDA==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      eslint: '>=8.56.0'
+    dependencies:
+      '@babel/helper-validator-identifier': 7.22.20
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      '@eslint/eslintrc': 2.1.4
+      ci-info: 4.0.0
+      clean-regexp: 1.0.0
+      core-js-compat: 3.35.0
+      eslint: 8.56.0
+      esquery: 1.5.0
+      indent-string: 4.0.0
+      is-builtin-module: 3.2.1
+      jsesc: 3.0.2
+      pluralize: 8.0.0
+      read-pkg-up: 7.0.1
+      regexp-tree: 0.1.27
+      regjsparser: 0.10.0
+      semver: 7.5.4
+      strip-indent: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-unused-imports@3.0.0(@typescript-eslint/eslint-plugin@6.17.0)(eslint@8.56.0):
+    resolution: {integrity: sha512-sduiswLJfZHeeBJ+MQaG+xYzSWdRXoSw61DpU13mzWumCkR0ufD0HmO4kdNokjrkluMHpj/7PJeN35pgbhW3kw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': ^6.0.0
+      eslint: ^8.0.0
+    peerDependenciesMeta:
+      '@typescript-eslint/eslint-plugin':
+        optional: true
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 6.17.0(@typescript-eslint/parser@6.17.0)(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
+      eslint-rule-composer: 0.3.0
+    dev: true
+
+  /eslint-plugin-vitest@0.3.20(@typescript-eslint/eslint-plugin@6.17.0)(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-O05k4j9TGMOkkghj9dRgpeLDyOSiVIxQWgNDPfhYPm5ioJsehcYV/zkRLekQs+c8+RBCVXucSED3fYOyy2EoWA==}
+    engines: {node: ^18.0.0 || >= 20.0.0}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': '*'
+      eslint: '>=8.0.0'
+      vitest: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/eslint-plugin':
+        optional: true
+      vitest:
+        optional: true
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 6.17.0(@typescript-eslint/parser@6.17.0)(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.17.0(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /eslint-plugin-vue@9.19.2(eslint@8.56.0):
+    resolution: {integrity: sha512-CPDqTOG2K4Ni2o4J5wixkLVNwgctKXFu6oBpVJlpNq7f38lh9I80pRTouZSJ2MAebPJlINU/KTFSXyQfBUlymA==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      eslint: 8.56.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.0.13
+      semver: 7.5.4
+      vue-eslint-parser: 9.3.2(eslint@8.56.0)
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-yml@1.11.0(eslint@8.56.0):
+    resolution: {integrity: sha512-NBZP1NDGy0u38pY5ieix75jxS9GNOJy9xd4gQa0rU4gWbfEsVhKDwuFaQ6RJpDbv6Lq5TtcAZS/YnAc0oeRw0w==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      debug: 4.3.4
+      eslint: 8.56.0
+      eslint-compat-utils: 0.1.2(eslint@8.56.0)
+      lodash: 4.17.21
+      natural-compare: 1.4.0
+      yaml-eslint-parser: 1.2.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-processor-vue-blocks@0.1.1(@vue/compiler-sfc@3.3.8)(eslint@8.56.0):
+    resolution: {integrity: sha512-9+dU5lU881log570oBwpelaJmOfOzSniben7IWEDRYQPPWwlvaV7NhOtsTuUWDqpYT+dtKKWPsgz4OkOi+aZnA==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.3.0
+      eslint: ^8.50.0
+    dependencies:
+      '@vue/compiler-sfc': 3.3.8
+      eslint: 8.56.0
+    dev: true
+
+  /eslint-rule-composer@0.3.0:
+    resolution: {integrity: sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==}
+    engines: {node: '>=4.0.0'}
+    dev: true
+
+  /eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+    dev: true
+
+  /eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /eslint@8.56.0:
+    resolution: {integrity: sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      '@eslint-community/regexpp': 4.10.0
+      '@eslint/eslintrc': 2.1.4
+      '@eslint/js': 8.56.0
+      '@humanwhocodes/config-array': 0.11.13
+      '@humanwhocodes/module-importer': 1.0.1
+      '@nodelib/fs.walk': 1.2.8
+      '@ungap/structured-clone': 1.2.0
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      debug: 4.3.4
+      doctrine: 3.0.0
+      escape-string-regexp: 4.0.0
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.5.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      globals: 13.24.0
+      graphemer: 1.4.0
+      ignore: 5.3.0
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      is-path-inside: 3.0.3
+      js-yaml: 4.1.0
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.3
+      strip-ansi: 6.0.1
+      text-table: 0.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.11.2
+      acorn-jsx: 5.3.2(acorn@8.11.2)
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
+  /esquery@1.5.0:
+    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
   /estraverse@5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
@@ -2802,6 +3778,10 @@ packages:
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  /fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+    dev: true
+
   /fast-fifo@1.3.2:
     resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
     dev: true
@@ -2819,6 +3799,10 @@ packages:
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
+  /fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+    dev: true
+
   /fastq@1.15.0:
     resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
     dependencies:
@@ -2830,6 +3814,13 @@ packages:
       pend: 1.2.0
     dev: true
 
+  /file-entry-cache@6.0.1:
+    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flat-cache: 3.2.0
+    dev: true
+
   /filelist@1.0.4:
     resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
     dependencies:
@@ -2841,6 +3832,14 @@ packages:
     dependencies:
       to-regex-range: 5.0.1
 
+  /find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+    dev: true
+
   /find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -2849,11 +3848,24 @@ packages:
       path-exists: 4.0.0
     dev: true
 
+  /flat-cache@3.2.0:
+    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flatted: 3.2.9
+      keyv: 4.5.4
+      rimraf: 3.0.2
+    dev: true
+
   /flat@5.0.2:
     resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
     hasBin: true
     dev: true
 
+  /flatted@3.2.9:
+    resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
+    dev: true
+
   /flexsearch@0.7.31:
     resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
     dev: true
@@ -2990,6 +4002,12 @@ packages:
       call-bind: 1.0.5
       get-intrinsic: 1.2.2
 
+  /get-tsconfig@4.7.2:
+    resolution: {integrity: sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==}
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+    dev: true
+
   /get-uri@6.0.2:
     resolution: {integrity: sha512-5KLucCJobh8vBY1K07EFV4+cPZH3mrV9YeAruUseCQKHB58SGjjT2l9/eA9LD082IiuMjSlFJEcdJ27TXvbZNw==}
     engines: {node: '>= 14'}
@@ -3028,7 +4046,6 @@ packages:
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-    dev: false
 
   /glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
@@ -3071,12 +4088,31 @@ packages:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
 
+  /globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.20.2
+    dev: true
+
   /globalthis@1.0.3:
     resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
     engines: {node: '>= 0.4'}
     dependencies:
       define-properties: 1.2.1
 
+  /globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      ignore: 5.3.0
+      merge2: 1.4.1
+      slash: 3.0.0
+    dev: true
+
   /globby@13.2.2:
     resolution: {integrity: sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -3096,6 +4132,10 @@ packages:
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  /graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+    dev: true
+
   /has-bigints@1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
 
@@ -3145,6 +4185,10 @@ packages:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
     dev: true
 
+  /hosted-git-info@2.8.9:
+    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
+    dev: true
+
   /http-proxy-agent@7.0.0:
     resolution: {integrity: sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==}
     engines: {node: '>= 14'}
@@ -3215,6 +4259,16 @@ packages:
       resolve-from: 4.0.0
     dev: true
 
+  /imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+    dev: true
+
+  /indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+    dev: true
+
   /inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
@@ -3240,6 +4294,17 @@ packages:
     resolution: {integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==}
     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-array-buffer@3.0.2:
     resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
     dependencies:
@@ -3269,6 +4334,13 @@ packages:
       call-bind: 1.0.5
       has-tostringtag: 1.0.0
 
+  /is-builtin-module@3.2.1:
+    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
+    engines: {node: '>=6'}
+    dependencies:
+      builtin-modules: 3.3.0
+    dev: true
+
   /is-callable@1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
@@ -3284,6 +4356,10 @@ packages:
     dependencies:
       has-tostringtag: 1.0.0
 
+  /is-decimal@1.0.4:
+    resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
+    dev: true
+
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -3299,6 +4375,10 @@ packages:
     dependencies:
       is-extglob: 2.1.1
 
+  /is-hexadecimal@1.0.4:
+    resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
+    dev: true
+
   /is-module@1.0.0:
     resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
 
@@ -3320,6 +4400,11 @@ packages:
     resolution: {integrity: sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==}
     engines: {node: '>=0.10.0'}
 
+  /is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+    dev: true
+
   /is-regex@1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
@@ -3420,6 +4505,11 @@ packages:
       argparse: 2.0.1
     dev: true
 
+  /jsdoc-type-pratt-parser@4.0.0:
+    resolution: {integrity: sha512-YtOli5Cmzy3q4dP26GraSOeAhqecewG04hoO8DY56CH4KJ9Fvv5qKWUCCo3HZob7esJQHCv6/+bnTy72xZZaVQ==}
+    engines: {node: '>=12.0.0'}
+    dev: true
+
   /jsesc@0.5.0:
     resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
     hasBin: true
@@ -3429,21 +4519,49 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  /jsesc@3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
+  /json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+    dev: true
+
   /json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
     dev: true
 
+  /json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+    dev: true
+
   /json-schema-traverse@1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
 
   /json-schema@0.4.0:
     resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
 
+  /json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+    dev: true
+
   /json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
     hasBin: true
 
+  /jsonc-eslint-parser@2.4.0:
+    resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.11.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      semver: 7.5.4
+    dev: true
+
   /jsonc-parser@3.2.0:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
     dev: true
@@ -3465,6 +4583,12 @@ packages:
     resolution: {integrity: sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==}
     engines: {node: '>=0.10.0'}
 
+  /keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+    dependencies:
+      json-buffer: 3.0.1
+    dev: true
+
   /kleur@3.0.3:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
@@ -3502,6 +4626,14 @@ packages:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
 
+  /levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+    dev: true
+
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
@@ -3528,6 +4660,13 @@ packages:
       pkg-types: 1.0.3
     dev: true
 
+  /locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-locate: 4.1.0
+    dev: true
+
   /locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -3538,6 +4677,10 @@ packages:
   /lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
+  /lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    dev: true
+
   /lodash.sortby@4.7.0:
     resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
 
@@ -3623,6 +4766,22 @@ packages:
       mdurl: 1.0.1
       uc.micro: 1.0.6
 
+  /mdast-util-from-markdown@0.8.5:
+    resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
+    dependencies:
+      '@types/mdast': 3.0.15
+      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
+
   /mdurl@1.0.1:
     resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
 
@@ -3633,6 +4792,15 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  /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@4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
@@ -3670,6 +4838,11 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+    dev: true
+
   /mini-svg-data-uri@1.4.4:
     resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
     hasBin: true
@@ -3770,8 +4943,6 @@ packages:
   /ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
     requiresBuild: true
-    dev: false
-    optional: true
 
   /mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
@@ -3786,6 +4957,14 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /natural-compare-lite@1.4.0:
+    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
+    dev: true
+
+  /natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+    dev: true
+
   /needle@3.2.0:
     resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==}
     engines: {node: '>= 4.4.x'}
@@ -3824,6 +5003,18 @@ packages:
   /node-releases@2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
 
+  /node-releases@2.0.14:
+    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
+
+  /normalize-package-data@2.5.0:
+    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
+    dependencies:
+      hosted-git-info: 2.8.9
+      resolve: 1.22.8
+      semver: 5.7.2
+      validate-npm-package-license: 3.0.4
+    dev: true
+
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -3842,6 +5033,12 @@ packages:
       path-key: 4.0.0
     dev: true
 
+  /nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+    dependencies:
+      boolbase: 1.0.0
+    dev: true
+
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -3891,6 +5088,25 @@ packages:
       mimic-fn: 4.0.0
     dev: true
 
+  /optionator@0.9.3:
+    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      '@aashutoshrathi/word-wrap': 1.2.6
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+    dev: true
+
+  /p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+    dependencies:
+      p-try: 2.2.0
+    dev: true
+
   /p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -3898,6 +5114,13 @@ packages:
       yocto-queue: 0.1.0
     dev: true
 
+  /p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-limit: 2.3.0
+    dev: true
+
   /p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
@@ -3905,6 +5128,11 @@ packages:
       p-limit: 3.1.0
     dev: true
 
+  /p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+    dev: true
+
   /pac-proxy-agent@7.0.1:
     resolution: {integrity: sha512-ASV8yU4LLKBAjqIPMbrgtaKIvxQri/yh2OpI+S6hVa9JRkUI3Y3NPFbfngDtY7oFtSMD3w31Xns89mDa3Feo5A==}
     engines: {node: '>= 14'}
@@ -3937,6 +5165,22 @@ packages:
       callsites: 3.1.0
     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-gitignore@2.0.0:
+    resolution: {integrity: sha512-RmVuCHWsfu0QPNW+mraxh/xjQVw/lhUCUru8Zni3Ctq3AoMhpDTq0OVdKS6iesd6Kqb7viCV3isAL43dciOSog==}
+    engines: {node: '>=14'}
+    dev: true
+
   /parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
@@ -4031,6 +5275,11 @@ packages:
       pathe: 1.1.1
     dev: true
 
+  /pluralize@8.0.0:
+    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
+    engines: {node: '>=4'}
+    dev: true
+
   /postcss-import@15.1.0(postcss@8.4.31):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
@@ -4086,7 +5335,6 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: false
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
@@ -4104,6 +5352,24 @@ packages:
     resolution: {integrity: sha512-UA9DX/OJwv6YwP9Vn7Ti/vF80XL+YA5H2l7BpCtUr3ya8LWHFzpiO5R+N7dN16ujpIxhekRFuOOF82bXX7K/lg==}
     dev: true
 
+  /prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
+
+  /prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      fast-diff: 1.3.0
+    dev: true
+
+  /prettier@3.1.1:
+    resolution: {integrity: sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /pretty-bytes@5.6.0:
     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
     engines: {node: '>=6'}
@@ -4179,13 +5445,13 @@ packages:
       - utf-8-validate
     dev: true
 
-  /puppeteer@21.5.2:
+  /puppeteer@21.5.2(typescript@5.3.3):
     resolution: {integrity: sha512-BaAGJOq8Fl6/cck6obmwaNLksuY0Bg/lIahCLhJPGXBFUD2mCffypa4A592MaWnDcye7eaHmSK9yot0pxctY8A==}
     engines: {node: '>=16.13.2'}
     requiresBuild: true
     dependencies:
       '@puppeteer/browsers': 1.8.0
-      cosmiconfig: 8.3.6
+      cosmiconfig: 8.3.6(typescript@5.3.3)
       puppeteer-core: 21.5.2
     transitivePeerDependencies:
       - bufferutil
@@ -4221,6 +5487,25 @@ packages:
       pify: 2.3.0
     dev: false
 
+  /read-pkg-up@7.0.1:
+    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
+    engines: {node: '>=8'}
+    dependencies:
+      find-up: 4.1.0
+      read-pkg: 5.2.0
+      type-fest: 0.8.1
+    dev: true
+
+  /read-pkg@5.2.0:
+    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@types/normalize-package-data': 2.4.4
+      normalize-package-data: 2.5.0
+      parse-json: 5.2.0
+      type-fest: 0.6.0
+    dev: true
+
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -4244,6 +5529,11 @@ packages:
     dependencies:
       '@babel/runtime': 7.23.2
 
+  /regexp-tree@0.1.27:
+    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
+    hasBin: true
+    dev: true
+
   /regexp.prototype.flags@1.5.1:
     resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
     engines: {node: '>= 0.4'}
@@ -4263,6 +5553,13 @@ packages:
       unicode-match-property-ecmascript: 2.0.0
       unicode-match-property-value-ecmascript: 2.1.0
 
+  /regjsparser@0.10.0:
+    resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
+    hasBin: true
+    dependencies:
+      jsesc: 0.5.0
+    dev: true
+
   /regjsparser@0.9.1:
     resolution: {integrity: sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==}
     hasBin: true
@@ -4283,6 +5580,10 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+    dev: true
+
   /resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -4303,6 +5604,13 @@ packages:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
+  /rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    hasBin: true
+    dependencies:
+      glob: 7.2.3
+    dev: true
+
   /rollup-plugin-terser@7.0.2(rollup@2.79.1):
     resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
     deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
@@ -4386,8 +5694,6 @@ packages:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
     requiresBuild: true
-    dev: false
-    optional: true
 
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
@@ -4464,6 +5770,11 @@ packages:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
     dev: true
 
+  /slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+    dev: true
+
   /slash@4.0.0:
     resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
     engines: {node: '>=12'}
@@ -4518,6 +5829,35 @@ packages:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     deprecated: Please use @jridgewell/sourcemap-codec instead
 
+  /spdx-correct@3.2.0:
+    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
+    dependencies:
+      spdx-expression-parse: 3.0.1
+      spdx-license-ids: 3.0.16
+    dev: true
+
+  /spdx-exceptions@2.3.0:
+    resolution: {integrity: sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==}
+    dev: true
+
+  /spdx-expression-parse@3.0.1:
+    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
+    dependencies:
+      spdx-exceptions: 2.3.0
+      spdx-license-ids: 3.0.16
+    dev: true
+
+  /spdx-expression-parse@4.0.0:
+    resolution: {integrity: sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==}
+    dependencies:
+      spdx-exceptions: 2.3.0
+      spdx-license-ids: 3.0.16
+    dev: true
+
+  /spdx-license-ids@3.0.16:
+    resolution: {integrity: sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==}
+    dev: true
+
   /spinnies@0.5.1:
     resolution: {integrity: sha512-WpjSXv9NQz0nU3yCT9TFEOfpFrXADY9C5fG6eAJqixLhvTX1jP3w92Y8IE5oafIe42nlF9otjhllnXN/QCaB3A==}
     dependencies:
@@ -4633,6 +5973,18 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      min-indent: 1.0.1
+    dev: true
+
+  /strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+    dev: true
+
   /strip-literal@1.3.0:
     resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}
     dependencies:
@@ -4669,6 +6021,14 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  /synckit@0.8.8:
+    resolution: {integrity: sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    dependencies:
+      '@pkgr/core': 0.1.0
+      tslib: 2.6.2
+    dev: true
+
   /tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
     dev: true
@@ -4751,10 +6111,14 @@ packages:
     hasBin: true
     dependencies:
       '@jridgewell/source-map': 0.3.5
-      acorn: 8.11.2
+      acorn: 8.11.3
       commander: 2.20.3
       source-map-support: 0.5.21
 
+  /text-table@0.2.0:
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+    dev: true
+
   /thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}
@@ -4782,6 +6146,13 @@ packages:
     dependencies:
       is-number: 7.0.0
 
+  /toml-eslint-parser@0.9.3:
+    resolution: {integrity: sha512-moYoCvkNUAPCxSW9jmHmRElhm4tVJpHL8ItC/+uYD0EpPSFXbck7yREz9tNdJVTSpHVod8+HoipcpbQ0oE6gsw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
     dev: true
@@ -4791,6 +6162,15 @@ packages:
     dependencies:
       punycode: 2.3.1
 
+  /ts-api-utils@1.0.3(typescript@5.3.3):
+    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
+    engines: {node: '>=16.13.0'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+    dependencies:
+      typescript: 5.3.3
+    dev: true
+
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: false
@@ -4798,10 +6178,32 @@ packages:
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
+  /type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+    dev: true
+
   /type-fest@0.16.0:
     resolution: {integrity: sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==}
     engines: {node: '>=10'}
 
+  /type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /type-fest@0.6.0:
+    resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /type-fest@0.8.1:
+    resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
+    engines: {node: '>=8'}
+    dev: true
+
   /typed-array-buffer@1.0.0:
     resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
     engines: {node: '>= 0.4'}
@@ -4836,6 +6238,11 @@ packages:
       for-each: 0.3.3
       is-typed-array: 1.1.12
 
+  /typescript@5.3.3:
+    resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   /uc.micro@1.0.6:
     resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
 
@@ -4932,6 +6339,12 @@ packages:
     dependencies:
       crypto-random-string: 2.0.0
 
+  /unist-util-stringify-position@2.0.3:
+    resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
+    dependencies:
+      '@types/unist': 2.0.10
+    dev: true
+
   /universalify@0.1.2:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
     engines: {node: '>= 4.0.0'}
@@ -4963,7 +6376,7 @@ packages:
       - supports-color
     dev: true
 
-  /unplugin-icons@0.15.3:
+  /unplugin-icons@0.15.3(@vue/compiler-sfc@3.3.8):
     resolution: {integrity: sha512-YWgJqv5AahrokeOnta8uX/m1damZA6Rf6zPClgHg2Fa/45iyOe3Lj+Wn/Ba+CSsq9yBffn17YfKfJNyWCNZPvw==}
     peerDependencies:
       '@svgr/core': '>=5.5.0'
@@ -4983,6 +6396,7 @@ packages:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.6
       '@iconify/utils': 2.1.11
+      '@vue/compiler-sfc': 3.3.8
       debug: 4.3.4
       kolorist: 1.8.0
       local-pkg: 0.4.3
@@ -5012,7 +6426,7 @@ packages:
       minimatch: 6.2.0
       resolve: 1.22.8
       unplugin: 1.5.1
-      vue: 3.3.8
+      vue: 3.3.8(typescript@5.3.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -5056,6 +6470,16 @@ packages:
       escalade: 3.1.1
       picocolors: 1.0.0
 
+  /update-browserslist-db@1.0.13(browserslist@4.22.2):
+    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.22.2
+      escalade: 3.1.1
+      picocolors: 1.0.0
+
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
@@ -5067,7 +6491,13 @@ packages:
 
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: false
+
+  /validate-npm-package-license@3.0.4:
+    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
+    dependencies:
+      spdx-correct: 3.2.0
+      spdx-expression-parse: 3.0.1
+    dev: true
 
   /vite-plugin-pwa@0.16.7(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0):
     resolution: {integrity: sha512-4WMA5unuKlHs+koNoykeuCfTcqEGbiTRr8sVYUQMhc6tWxZpSRnv9Ojk4LKmqVhoPGHfBVCdGaMo8t9Qidkc1Q==}
@@ -5134,11 +6564,11 @@ packages:
       flexsearch: 0.7.31
       glob-to-regexp: 0.4.1
       markdown-it: 13.0.2
-      vitepress: 1.0.0-rc.24(@algolia/client-search@4.20.0)(postcss@8.4.31)(sass@1.69.5)(search-insights@2.11.0)
-      vue: 3.3.8
+      vitepress: 1.0.0-rc.24(@algolia/client-search@4.20.0)(postcss@8.4.31)(sass@1.69.5)(search-insights@2.11.0)(typescript@5.3.3)
+      vue: 3.3.8(typescript@5.3.3)
     dev: true
 
-  /vitepress@1.0.0-rc.24(@algolia/client-search@4.20.0)(postcss@8.4.31)(sass@1.69.5)(search-insights@2.11.0):
+  /vitepress@1.0.0-rc.24(@algolia/client-search@4.20.0)(postcss@8.4.31)(sass@1.69.5)(search-insights@2.11.0)(typescript@5.3.3):
     resolution: {integrity: sha512-RpnL8cnOGwiRlBbrYQUm9sYkJbtyOt/wYXk2diTcokY4yvks/5lq9LuSt+MURWB6ZqwpSNHvTmxgaSfLoG0/OA==}
     hasBin: true
     peerDependencies:
@@ -5163,7 +6593,7 @@ packages:
       postcss: 8.4.31
       shiki: 0.14.5
       vite: 4.5.0(sass@1.69.5)
-      vue: 3.3.8
+      vue: 3.3.8(typescript@5.3.3)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -5212,10 +6642,28 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.3.8
+      vue: 3.3.8(typescript@5.3.3)
+    dev: true
+
+  /vue-eslint-parser@9.3.2(eslint@8.56.0):
+    resolution: {integrity: sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      debug: 4.3.4
+      eslint: 8.56.0
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.5.0
+      lodash: 4.17.21
+      semver: 7.5.4
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /vue@3.3.8:
+  /vue@3.3.8(typescript@5.3.3):
     resolution: {integrity: sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==}
     peerDependencies:
       typescript: '*'
@@ -5228,6 +6676,7 @@ packages:
       '@vue/runtime-dom': 3.3.8
       '@vue/server-renderer': 3.3.8(vue@3.3.8)
       '@vue/shared': 3.3.8
+      typescript: 5.3.3
 
   /webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
@@ -5450,6 +6899,11 @@ packages:
         optional: true
     dev: true
 
+  /xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+    dev: true
+
   /y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -5462,10 +6916,18 @@ packages:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
 
+  /yaml-eslint-parser@1.2.2:
+    resolution: {integrity: sha512-pEwzfsKbTrB8G3xc/sN7aw1v6A6c/pKxLAkjclnAyo5g5qOh6eL9WGu0o3cSDQZKrTNk4KL4lQSwZW+nBkANEg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    dependencies:
+      eslint-visitor-keys: 3.4.3
+      lodash: 4.17.21
+      yaml: 2.3.4
+    dev: true
+
   /yaml@2.3.4:
     resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
     engines: {node: '>= 14'}
-    dev: false
 
   /yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
diff --git a/scripts/auto-update-pages.js b/scripts/auto-update-pages.js
index f05d4473..24c8dda9 100644
--- a/scripts/auto-update-pages.js
+++ b/scripts/auto-update-pages.js
@@ -1,37 +1,37 @@
 // #! /usr/bin/env node
-
+import process from 'node:process'
 import puppeteer from 'puppeteer'
 
-/** 在 ~/.zshrc 中配置环境变量（保护隐私）  例如：
+/**
+   在 ~/.zshrc 中配置环境变量（保护隐私）  例如：
   export GITEE_NAME="Gitee 用户名"
-  export GITEE_PSWD="Gitee 登录密码" 
+  export GITEE_PSWD="Gitee 登录密码"
  */
 const { GITEE_NAME = '', GITEE_PSWD = '' } = process.env
 const GITEE_HOME = 'https://gitee.com/'
-const GITEE_LOGIN = "https://gitee.com/login"
+const GITEE_LOGIN = 'https://gitee.com/login'
 const GITEE_PAGES = 'https://gitee.com/fxzer/zerdocs/pages'
 const GITEE_PAGES_URL = 'https://fxzer.gitee.io/zerdocs'
-const delay = (ms) => new Promise((res) => setTimeout(res, ms))
-
+const delay = ms => new Promise(res => setTimeout(res, ms))
 
 async function giteeUpdate() {
   const browser = await puppeteer.launch({
-    headless: false
+    headless: false,
   })
   const page = await browser.newPage()
   await page.setViewport({
     width: 1920,
     height: 1080,
     deviceScaleFactor: 1,
-  });
+  })
   /* 获取输入框，并自动输入 */
   async function autoInput(selector, text) {
-    const inputEl = await page.waitForSelector(selector);
+    const inputEl = await page.waitForSelector(selector)
     await inputEl.type(text)
   }
   /* 自动点击 */
   async function autoClick(selector) {
-    const btn = await page.waitForSelector(selector);
+    const btn = await page.waitForSelector(selector)
     await btn.click()
   }
   //  1. 打开gitee登录页面
@@ -52,16 +52,16 @@ async function giteeUpdate() {
   //  4. 跳转项目的gitee pages页面
   await page.goto(GITEE_PAGES)
   //  5. 监听弹窗，确认更新
-  await page.on("dialog", async dialog => dialog.accept())
+  await page.on('dialog', async dialog => dialog.accept())
   //  6. 点击更新按钮
   await autoClick('.redeploy-button')
-  //循环检查加载图标是否可见 
+  // 循环检查加载图标是否可见
 
   let updateTimes = 0
-  let waitTimer = 10 * 1000
+  const waitTimer = 10 * 1000
   while (true) {
     await delay(waitTimer)
-    //使用 isVisible 方法检查元素是否可见
+    // 使用 isVisible 方法检查元素是否可见
     const loading = await page.waitForSelector('.pages_message_loading')
     const isVisible = await loading.isVisible()
     updateTimes = (updateTimes + waitTimer) / 1000
@@ -71,11 +71,9 @@ async function giteeUpdate() {
       break
     }
     console.log('更新中...，已用时：', updateTimes, 's')
-
   }
   await delay(100)
   //  8.更新完毕，关闭浏览器
   browser.close()
-
 }
 giteeUpdate()
diff --git a/scripts/generate-sidebar.cjs b/scripts/generate-sidebar.cjs
index 8ed84901..797700ab 100644
--- a/scripts/generate-sidebar.cjs
+++ b/scripts/generate-sidebar.cjs
@@ -1,29 +1,30 @@
-const fs = require('fs')
-const path = require('path')
+const fs = require('node:fs')
+const path = require('node:path')
 
 const docsPath = path.resolve(__dirname, '../docs')
 const sidebarPath = path.resolve(__dirname, '../docs/.vitepress/sidebar/index.ts')
 
-//判断是否是文章文件
+// 判断是否是文章文件
 function isArticleDir(dir) {
-  let isExclude = /^(public|index.md|.*\.ts|demo.*|\..*)$/.test(dir)
+  const isExclude = /^(public|index.md|.*\.ts|demo.*|\..*)$/.test(dir)
   return !isExclude
 }
 
 function splitPath(path) {
-  return path.split('/').filter((item) => item !== '')
+  return path.split('/').filter(item => item !== '')
 }
 
 function deepGetFile(dir) {
   let backList = []
-  let list = fs.readdirSync(dir).filter(isArticleDir)
+  const list = fs.readdirSync(dir).filter(isArticleDir)
 
-  for (let index in list) {
+  for (const index in list) {
     let item = path.resolve(dir, list[index])
     if (fs.statSync(item).isDirectory()) {
       backList = backList.concat(deepGetFile(item))
-    } else {
-      //输出相对路径
+    }
+    else {
+      // 输出相对路径
       item = item.replace(docsPath, '').replace(/\\/g, '/')
       backList.push(item)
     }
@@ -33,28 +34,28 @@ function deepGetFile(dir) {
 
 // 生成侧边栏
 function deepGenerateSidebar(arr) {
-  //递归按照最后一级目录生成侧边栏
+  // 递归按照最后一级目录生成侧边栏
   const sidebar = {}
   arr.forEach((item) => {
-    const [dir, ...rest] = splitPath(item)
-    if (!sidebar[dir]) {
+    const [dir] = splitPath(item)
+    if (!sidebar[dir])
       sidebar[dir] = []
-    }
+
     sidebar[dir].push(item)
   })
   return sidebar
 }
 
 function generateSidebarList(sidebar) {
-  let sidebarList = []
-  //按最后一级目录分组
-  for (let key in sidebar) {
-    let pathPice = sidebar[key].map((item) => splitPath(item))
-    //如果pathPice[pathPice.length-1]相同,则合并
+  const sidebarList = []
+  // 按最后一级目录分组
+  for (const key in sidebar) {
+    let pathPice = sidebar[key].map(item => splitPath(item))
+    // 如果pathPice[pathPice.length-1]相同,则合并
     pathPice = pathPice.reduce((pre, cur) => {
-      let dirStr = cur.slice(0, -1).join('/') // /problem/vueproject/
-      let text = cur[cur.length - 1].replace(/\.md$/, '')
-      let link = '/' + cur.join('/').replace(/\.md$/, '')
+      const dirStr = cur.slice(0, -1).join('/') // /problem/vueproject/
+      const text = cur[cur.length - 1].replace(/\.md$/, '')
+      const link = `/${cur.join('/').replace(/\.md$/, '')}`
       pre[dirStr] = pre[dirStr] ? [...pre[dirStr], { text, link }] : [{ text, link }]
       return pre
     }, {})
@@ -66,15 +67,14 @@ function generateSidebarList(sidebar) {
 function generateSidebarObj(topDirArr, sidebarList) {
   const sidebarObj = {}
   topDirArr.forEach((item) => {
-    if (!sidebarObj[`/${item}/`]) {
+    if (!sidebarObj[`/${item}/`])
       sidebarObj[`/${item}/`] = []
-    }
   })
 
-  let sidebar = sidebarList.reduce((pre, cur) => Object.assign(pre, cur), {})
+  const sidebar = sidebarList.reduce((pre, cur) => Object.assign(pre, cur), {})
   Object.entries(sidebar).forEach(([key, items]) => {
-    let keyArr = splitPath(key)
-    let text = keyArr[keyArr.length - 1]
+    const keyArr = splitPath(key)
+    const text = keyArr[keyArr.length - 1]
     if (sidebarObj[`/${keyArr[0]}/`]) {
       sidebarObj[`/${keyArr[0]}/`].push({
         text,
@@ -82,7 +82,8 @@ function generateSidebarObj(topDirArr, sidebarList) {
         collapsed: false,
         items,
       })
-    } else {
+    }
+    else {
       sidebarObj[`/${keyArr[0]}/`] = [{
         text,
         collapsible: true,
@@ -98,16 +99,16 @@ function generateSidebarObj(topDirArr, sidebarList) {
 function writeToFile(sidebarObj) {
   const sidebarStr = JSON.stringify(sidebarObj, null, 2)
   // 检查目录是否存在，如果不存在则创建
-  if (!fs.existsSync(path.dirname(sidebarPath))) {
+  if (!fs.existsSync(path.dirname(sidebarPath)))
     fs.mkdirSync(path.dirname(sidebarPath), { recursive: true })
-  }
 
   fs.writeFile(sidebarPath, `export default ${sidebarStr}`, (err) => {
+    console.log('[ err ]-106', err)
   })
 }
 
-//生成一级分组 
-let topDirArr = fs.readdirSync(docsPath).filter(isArticleDir)
+// 生成一级分组
+const topDirArr = fs.readdirSync(docsPath).filter(isArticleDir)
 const sidebars = deepGetFile(docsPath) // 读取 docs 目录下的所有文件夹
 const sidebar = deepGenerateSidebar(sidebars)
 const sidebarList = generateSidebarList(sidebar)
diff --git a/tsconfig.json b/tsconfig.json
index f0e7d4f6..5bd385af 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,19 +1,19 @@
 {
   "compilerOptions": {
-    "module": "esnext",
     "target": "esnext",
+    "jsx": "preserve",
+    "lib": ["ESNext", "DOM"],
+    "module": "esnext",
     "moduleResolution": "node",
-    "esModuleInterop": true,
+    "resolveJsonModule": true,
     "strict": false,
-    "skipLibCheck": true,
     "noUnusedLocals": true,
-    "resolveJsonModule": true,
+    "esModuleInterop": true,
     "isolatedModules": false,
-    "jsx": "preserve",
-    "lib": ["ESNext", "DOM"]
+    "skipLibCheck": true
   },
-   /* 指定编译文件或排除指定编译文件 */
-  "include": [  
+  /* 指定编译文件或排除指定编译文件 */
+  "include": [
     "./docs/.vitepress/components/*.vue",
     "./docs/.vitepress/components.d.ts",
     "./docs/.vitepress/auto-imports.d.ts"
diff --git a/vercel.json b/vercel.json
index 7f9ff0a3..6dfcb40a 100644
--- a/vercel.json
+++ b/vercel.json
@@ -5,4 +5,4 @@
       "destination": "/api"
     }
   ]
-}
\ No newline at end of file
+}