From d6561ad33165b0b0df93f3d509941dca69343d15 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Mon, 7 Aug 2023 16:33:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |   2 +
 pnpm-lock.yaml                   |  28 +-
 src/App.vue                      | 194 +----------
 src/assets/css/colors.scss       |   2 +
 src/assets/css/style.scss        |  13 +
 src/components/ChapterDetail.vue |  35 ++
 src/components/ChapterList.vue   |  48 +++
 src/components/DictList.vue      |  56 +++
 src/components/Side.vue          | 165 +++++++++
 src/components/Side2.vue         | 204 +++++++++++
 src/components/WordList.vue      |  50 ++-
 src/main.ts                      |   2 +-
 src/stores/base.ts               |  97 +++---
 src/style.css                    |  11 -
 tsconfig.json                    |   1 -
 yarn.lock                        | 578 -------------------------------
 16 files changed, 647 insertions(+), 839 deletions(-)
 create mode 100644 src/assets/css/colors.scss
 create mode 100644 src/assets/css/style.scss
 create mode 100644 src/components/ChapterDetail.vue
 create mode 100644 src/components/ChapterList.vue
 create mode 100644 src/components/DictList.vue
 create mode 100644 src/components/Side.vue
 create mode 100644 src/components/Side2.vue
 delete mode 100644 src/style.css
 delete mode 100644 yarn.lock

diff --git a/package.json b/package.json
index f578b14b..17bedcea 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@icon-park/vue-next": "^1.4.2",
     "lodash": "^4.17.21",
     "pinia": "^2.1.6",
+    "swiper": "^10.1.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 28d13cf8..ffd7d8af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,16 +1,18 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
+  '@icon-park/vue-next':
+    specifier: ^1.4.2
+    version: 1.4.2(vue@3.3.4)
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
   pinia:
     specifier: ^2.1.6
     version: 2.1.6(typescript@5.0.2)(vue@3.3.4)
+  swiper:
+    specifier: ^10.1.0
+    version: 10.1.0
   vue:
     specifier: ^3.3.4
     version: 3.3.4
@@ -258,6 +260,15 @@ packages:
     dev: true
     optional: true
 
+  /@icon-park/vue-next@1.4.2(vue@3.3.4):
+    resolution: {integrity: sha512-+QklF255wkfBOabY+xw6FAI0Bwln/RhdwCunNy/9sKdKuChtaU67QZqU67KGAvZUTeeBgsL+yaHHxqfQeGZXEQ==}
+    engines: {node: '>= 8.0.0', npm: '>= 5.0.0'}
+    peerDependencies:
+      vue: 3.x
+    dependencies:
+      vue: 3.3.4
+    dev: false
+
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
@@ -648,6 +659,11 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
+  /swiper@10.1.0:
+    resolution: {integrity: sha512-E+wh+hcSbwlRfXuwBTclcOOikOjNdSF0a2Sdg3J4cIWtHO64A7SaLRfezfrJ67CW3GEc15AduYU2YKlElsjqsQ==}
+    engines: {node: '>= 4.7.0'}
+    dev: false
+
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -746,3 +762,7 @@ packages:
   /yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
diff --git a/src/App.vue b/src/App.vue
index d0dd49c0..30a6a072 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {onMounted, onUnmounted, watch} from "vue"
+import {computed, onMounted, onUnmounted, provide, watch} from "vue"
 import 快速打字的机械键盘声音Mp3 from './assets/sound/key-sounds/快速打字的机械键盘声音.mp3'
 import 键盘快速打字的声音Mp3 from './assets/sound/key-sounds/键盘快速打字的声音.mp3'
 import 电话打字的声音Mp3 from './assets/sound/key-sounds/电话打字的声音.mp3'
@@ -15,6 +15,8 @@ import {useSound} from "@/hooks/useSound.ts"
 import {useBaseStore} from "@/stores/base.ts"
 import {SaveKey} from "./types";
 import WordList from "./components/WordList.vue";
+import Side from "@/components/Side.vue"
+import {usePlayWordAudio} from "@/hooks/usePlayWordAudio.ts"
 
 let input = $ref('')
 let wrong = $ref('')
@@ -23,9 +25,9 @@ let isDictation = $ref(true)
 let activeIndex = $ref(-1)
 const store = useBaseStore()
 
-// const [play, setAudio] = useSound([机械0, 机械1, 机械2, 机械3], 1)
-const [playKeySound, setAudio] = useSound([老式机械], 3)
-// const [play, setAudio] = useSound([电话打字的声音Mp3], 3)
+const [playKeySound, setAudio] = useSound([机械0, 机械1, 机械2, 机械3], 1)
+// const [playKeySound, setAudio] = useSound([老式机械], 3)
+// const [playKeySound, setAudio] = useSound([电话打字的声音Mp3], 3)
 const [playBeep] = useSound([beep], 1)
 const [playCorrect] = useSound([correct], 1)
 const keyMap = {
@@ -95,7 +97,7 @@ async function onKeyDown(e: KeyboardEvent) {
     }
     if (input === store.word.name) {
       playCorrect()
-      setTimeout(next, 300)
+      setTimeout(next, 200)
     }
   } else {
     // console.log('e', e)
@@ -136,23 +138,11 @@ async function onKeyDown(e: KeyboardEvent) {
   }
 }
 
-const pronunciationApi = 'https://dict.youdao.com/dictvoice?audio='
+const [playAudio] = usePlayWordAudio()
 
-function generateWordSoundSrc(word: string, pronunciation: string) {
-  switch (pronunciation) {
-    case 'uk':
-      return `${pronunciationApi}${word}&type=1`
-    case 'us':
-      return `${pronunciationApi}${word}&type=2`
-  }
-}
+const openSide = $ref(true)
+provide('sideIsOpen', computed(() => openSide))
 
-function playAudio(word) {
-  let audio = new Audio(generateWordSoundSrc(word, 'us'))
-  audio.play()
-}
-
-const step = $ref(1)
 </script>
 
 <template>
@@ -181,52 +171,18 @@ const step = $ref(1)
         </div>
       </div>
     </div>
-    <div class="side">
-      <header>
-        <div class="tabs">
-          <div class="tab">单词表</div>
-          <div class="tab active">生词本</div>
-          <div class="tab">已忽略</div>
-        </div>
-        <div class="close">关闭</div>
-      </header>
-      <div class="wrapper">
-        <WordList :word-list="store.newWords" :index="0"></WordList>
-
-        <div class="pages" v-if="false" :class="`step${step}`">
-          <div class="dict page">
-            <div class="tags">
-              <div class="tag" :class="i === 5 &&'active'" v-for="i in 2">六级</div>
-            </div>
-            <div class="dict-list">
-              <div class="dict-item" v-for="i in 5" @click="step = 1">
-                <div class="name">CET-4</div>
-                <div class="desc">大学英语四级词库</div>
-                <div class="num">2607词</div>
-              </div>
-            </div>
-          </div>
-
-          <div class="chapter page">
-            <div class="dict-name">CET-4</div>
-            <div class="chapter-list">
-              <div class="chapter-item" v-for="i in 10">
-                <div class="title">1.A private conversation</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <Side v-model="openSide"/>
   </div>
 </template>
 
 <style scoped lang="scss">
+@import "@/assets/css/colors";
 
 .main-page {
-  background: rgb(17, 24, 39);
-  width: 100%;
+  background: $dark-bg;
+  width: 100vw;
   height: 100%;
+  overflow: hidden;
   display: flex;
   font-size: 14rem;
 
@@ -300,126 +256,6 @@ const step = $ref(1)
     }
   }
 
-  .side {
-    width: 20vw;
-    height: 100%;
-    background: white;
-    display: flex;
-    flex-direction: column;
-
-    header {
-      position: relative;
-      display: flex;
-      align-items: center;
-
-      .tabs {
-        padding: 10rem 20rem;
-        display: flex;
-        align-items: flex-end;
-        border-bottom: 1px solid #e1e1e1;
-        gap: 15rem;
-        font-size: 18rem;
-        color: gray;
-
-        .tab {
-          cursor: pointer;
-
-          &.active {
-            font-size: 22rem;
-            color: blue;
-            font-weight: bold;
-          }
-        }
-      }
-
-      .close {
-        cursor: pointer;
-        position: absolute;
-        right: 20rem;
-      }
-    }
-
-    .wrapper {
-      flex: 1;
-      overflow: hidden;
-
-      .pages {
-        width: 20vw * 2;
-        height: 100%;
-        display: flex;
-        transition: all .3s;
-
-        &.step0 {
-          transform: translate3d(0, 0, 0);
-        }
-
-        &.step1 {
-          transform: translate3d(-20vw, 0, 0);
-        }
-
-        &.step2 {
-          transform: translate3d(-40vw, 0, 0);
-        }
-
-        .page {
-          width: 20vw;
-          padding: 10rem;
-          overflow: auto;
-        }
-      }
-    }
-  }
-
-  .dict {
-    .tags {
-      display: flex;
-      flex-wrap: wrap;
-      margin-bottom: 20rem;
-
-      .tag {
-        cursor: pointer;
-        padding: 5rem 10rem;
-        border-radius: 20rem;
-
-        &.active {
-          background: blue;
-          color: whitesmoke;
-        }
-      }
-    }
-
-    .dict-list {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 10rem;
-
-      .dict-item {
-        cursor: pointer;
-        padding: 10rem;
-        border-radius: 10rem;
-        border: 1px solid gray;
-      }
-    }
-  }
-
-  .chapter {
-    .dict-name {
-      font-size: 26rem;
-      margin-bottom: 10rem;
-    }
-
-    .chapter-list {
-      .chapter-item {
-        cursor: pointer;
-        margin-bottom: 10rem;
-        padding: 10rem;
-        border-radius: 10rem;
-        border: 1px solid gray;
-      }
-    }
-  }
-
-
 }
 
 @keyframes shake {
diff --git a/src/assets/css/colors.scss b/src/assets/css/colors.scss
new file mode 100644
index 00000000..ea93c9e7
--- /dev/null
+++ b/src/assets/css/colors.scss
@@ -0,0 +1,2 @@
+$dark-bg: rgb(46, 46, 46);
+$dark-bg2: rgb(72, 72, 72);
\ No newline at end of file
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
new file mode 100644
index 00000000..8a00bc1b
--- /dev/null
+++ b/src/assets/css/style.scss
@@ -0,0 +1,13 @@
+@import "@icon-park/vue-next/styles/index.css";
+
+html, body {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/components/ChapterDetail.vue b/src/components/ChapterDetail.vue
new file mode 100644
index 00000000..e3c20ef2
--- /dev/null
+++ b/src/components/ChapterDetail.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {ArrowLeft} from '@icon-park/vue-next'
+import {inject} from "vue"
+import WordList from "@/components/WordList.vue"
+import {useBaseStore} from "@/stores/base.ts"
+
+const store = useBaseStore()
+const back = inject('back')
+
+</script>
+
+<template>
+  <div class="chapter-detail page">
+    <header>
+      <arrow-left @click="back" theme="outline" size="20" fill="#929596" :strokeWidth="2"/>
+      <div class="dict-name">16.</div>
+    </header>
+    <WordList :word-list="store.chapter" :index="store.wordIndex"></WordList>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.chapter-wrapper {
+  header {
+    display: flex;
+    align-items: center;
+    gap: 10rem;
+    margin-bottom: 10rem;
+
+    .dict-name {
+      font-size: 26rem;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ChapterList.vue b/src/components/ChapterList.vue
new file mode 100644
index 00000000..70cd6a93
--- /dev/null
+++ b/src/components/ChapterList.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import {ArrowLeft} from '@icon-park/vue-next'
+import {inject} from "vue"
+
+const back = inject('back')
+const next = inject('next')
+
+</script>
+
+<template>
+  <div class="chapter-wrapper page">
+    <header>
+      <arrow-left @click="back" theme="outline" size="20" fill="#929596" :strokeWidth="2"/>
+      <div class="dict-name">CET-4</div>
+    </header>
+    <div class="chapter-list">
+      <div class="chapter-item" v-for="i in 10" @click="next">
+        <div class="title">1.A private conversation</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.chapter-wrapper {
+  header {
+    display: flex;
+    align-items: center;
+    gap: 10rem;
+    margin-bottom: 10rem;
+
+    .dict-name {
+      font-size: 26rem;
+    }
+  }
+
+
+  .chapter-list {
+    .chapter-item {
+      cursor: pointer;
+      margin-bottom: 10rem;
+      padding: 10rem;
+      border-radius: 10rem;
+      border: 1px solid gray;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/DictList.vue b/src/components/DictList.vue
new file mode 100644
index 00000000..273f680b
--- /dev/null
+++ b/src/components/DictList.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import {inject} from "vue"
+
+const next = inject('next')
+
+</script>
+
+<template>
+  <div class="dict-wrapper page">
+    <div class="tags">
+      <div class="tag" :class="i === 5 &&'active'" v-for="i in 2">六级</div>
+    </div>
+    <div class="dict-list">
+      <div class="dict-item" v-for="i in 5" @click="next">
+        <div class="name">CET-4</div>
+        <div class="desc">大学英语四级词库</div>
+        <div class="num">2607词</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.dict-wrapper {
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 20rem;
+
+    .tag {
+      cursor: pointer;
+      padding: 5rem 10rem;
+      border-radius: 20rem;
+
+      &.active {
+        background: gray;
+        color: whitesmoke;
+      }
+    }
+  }
+
+  .dict-list {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10rem;
+
+    .dict-item {
+      cursor: pointer;
+      padding: 10rem;
+      border-radius: 10rem;
+      border: 1px solid gray;
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/Side.vue b/src/components/Side.vue
new file mode 100644
index 00000000..47df37a7
--- /dev/null
+++ b/src/components/Side.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import {useBaseStore} from "@/stores/base.ts"
+import WordList from "@/components/WordList.vue"
+import {ArrowRight, MenuFold} from '@icon-park/vue-next'
+
+import {$ref} from "vue/macros"
+import DictList from "@/components/DictList.vue"
+import ChapterList from "@/components/ChapterList.vue"
+import {computed, onMounted, provide, ref} from "vue"
+import ChapterDetail from "@/components/ChapterDetail.vue"
+import {Swiper, SwiperSlide} from 'swiper/vue';
+import 'swiper/css';
+import {Swiper as SwiperClass} from "swiper/types"
+
+const store = useBaseStore()
+const props = defineProps({
+  modelValue: Boolean,
+})
+
+defineEmits(['update:modelValue'])
+const swiperIns0: SwiperClass = $ref(null)
+const swiperIns1: SwiperClass = $ref(null)
+
+onMounted(() => {
+})
+
+let tabIndex = $ref(0)
+
+function slideTo(index: number) {
+  swiperIns0.slideTo(index)
+  tabIndex = index
+}
+
+
+function next() {
+  swiperIns1.slideNext()
+}
+
+function back() {
+  swiperIns1.slidePrev()
+}
+
+provide('next', next)
+provide('back', back)
+
+</script>
+<template>
+  <div class="side" :class="store.sideIsOpen && 'open'">
+    <header>
+      <div class="tabs">
+        <div class="tab" :class="tabIndex===0&&'active'" @click="slideTo(0)">单词表</div>
+        <div class="tab" :class="tabIndex===1&&'active'" @click="slideTo(1)">生词本</div>
+        <div class="tab" :class="tabIndex===2&&'active'" @click="slideTo(2)">已忽略</div>
+      </div>
+      <arrow-right class="close"
+                   @click="store.sideIsOpen = false"
+                   theme="outline" size="20" fill="#929596" :strokeWidth="2"/>
+    </header>
+    <div class="side-content">
+      <swiper @swiper="e=>swiperIns0 = e" class="mySwiper" :allow-touch-move="false">
+        <swiper-slide>
+          <swiper @swiper="e=>swiperIns1 = e" class="mySwiper" :allow-touch-move="false">
+            <swiper-slide>
+              <DictList/>
+            </swiper-slide>
+            <swiper-slide>
+              <ChapterList/>
+            </swiper-slide>
+            <swiper-slide>
+              <ChapterDetail/>
+            </swiper-slide>
+          </swiper>
+        </swiper-slide>
+        <swiper-slide>
+          <WordList class="page" :word-list="store.newWords" :index="0"/>
+        </swiper-slide>
+        <swiper-slide>
+          <WordList class="page" :word-list="store.skipWords" :index="0"/>
+        </swiper-slide>
+      </swiper>
+    </div>
+  </div>
+  <menu-fold v-if="!modelValue" class="menu" @click="$emit('update:modelValue', true)"
+             theme="outline" size="20" fill="#929596"
+             :strokeWidth="2"/>
+</template>
+<style>
+.page {
+  padding: 15rem;
+}
+</style>
+<style scoped lang="scss">
+@import "@/assets/css/colors";
+
+.menu {
+  position: fixed;
+  right: 20rem;
+  top: 20rem;
+}
+
+.side {
+  $width: 20vw;
+  width: $width;
+  background: $dark-bg2;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: all .3s;
+  margin-right: -$width;
+
+  &.open {
+    margin-right: 0;
+  }
+
+  $header-height: 40rem;
+
+  header {
+    height: $header-height;
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .tabs {
+      padding: 10rem 20rem;
+      width: 100%;
+      display: flex;
+      align-items: flex-end;
+      border-bottom: 1px solid #e1e1e1;
+      gap: 15rem;
+      font-size: 14rem;
+      color: gray;
+
+      .tab {
+        cursor: pointer;
+
+        &.active {
+          font-size: 16rem;
+          color: rgb(36, 127, 255);
+          font-weight: bold;
+        }
+      }
+    }
+
+    .close {
+      cursor: pointer;
+      position: absolute;
+      right: 20rem;
+    }
+  }
+
+  .side-content {
+    height: calc(100% - $header-height);
+
+    .mySwiper {
+      height: 100%;
+    }
+
+    .swiper-slide {
+      height: 100%;
+      overflow: auto;
+    }
+  }
+}
+
+</style>
diff --git a/src/components/Side2.vue b/src/components/Side2.vue
new file mode 100644
index 00000000..f1c3529a
--- /dev/null
+++ b/src/components/Side2.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import {useBaseStore} from "@/stores/base.ts"
+import WordList from "@/components/WordList.vue"
+import {ArrowRight, MenuFold} from '@icon-park/vue-next'
+
+import {$ref} from "vue/macros"
+import DictList from "@/components/DictList.vue"
+import ChapterList from "@/components/ChapterList.vue"
+import {provide} from "vue"
+import ChapterDetail from "@/components/ChapterDetail.vue"
+import {Swiper, SwiperSlide} from 'swiper/vue';
+import 'swiper/css';
+
+const store = useBaseStore()
+const props = defineProps({
+  modelValue: Boolean,
+})
+
+defineEmits(['update:modelValue'])
+
+
+let step = $ref(0)
+let tabIndex = $ref(0)
+
+function next() {
+  step++
+}
+
+function back() {
+  step--
+}
+
+provide('next', next)
+provide('back', back)
+
+const onSwiper = (swiper) => {
+  console.log(swiper);
+};
+const onSlideChange = () => {
+  console.log('slide change');
+};
+</script>
+
+<template>
+  <div class="side" :class="modelValue&&'open'">
+    <header>
+      <div class="tabs">
+        <div class="tab" :class="tabIndex===0&&'active'" @click="tabIndex = 0">单词表</div>
+        <div class="tab" :class="tabIndex===1&&'active'" @click="tabIndex = 1">生词本</div>
+        <div class="tab" :class="tabIndex===2&&'active'" @click="tabIndex = 2">已忽略</div>
+      </div>
+      <arrow-right class="close"
+                   @click="$emit('update:modelValue', false)"
+                   theme="outline" size="20" fill="#929596" :strokeWidth="2"/>
+    </header>
+    <div class="side-content">
+      <swiper
+          :slides-per-view="3"
+          :space-between="50"
+          @swiper="onSwiper"
+          @slideChange="onSlideChange"
+      >
+        <swiper-slide>
+          <DictList/>
+        </swiper-slide>
+        <swiper-slide>
+          <WordList class="page" :word-list="store.newWords" :index="0"/>
+        </swiper-slide>
+        <swiper-slide>
+          <WordList class="page" :word-list="store.skipWords" :index="0"/>
+        </swiper-slide>
+      </swiper>
+    </div>
+
+    <!--    <div class="wrapper">-->
+    <!--      <div class="pages" v-if="tabIndex === 0" :class="`step${step}`">-->
+    <!--        <DictList/>-->
+    <!--        <ChapterList/>-->
+    <!--        <ChapterDetail/>-->
+    <!--      </div>-->
+    <!--      <WordList class="page" v-if="tabIndex === 1" :word-list="store.newWords" :index="0"></WordList>-->
+    <!--      <WordList v-if="tabIndex === 2" :word-list="store.skipWords" :index="0"></WordList>-->
+    <!--    </div>-->
+  </div>
+  <menu-fold v-if="!modelValue" class="menu" @click="$emit('update:modelValue', true)"
+             theme="outline" size="20" fill="#929596"
+             :strokeWidth="2"/>
+</template>
+
+<style scoped lang="scss">
+@import "@/assets/css/colors";
+
+.side {
+  $width: 20vw;
+  background: $dark-bg2;
+  width: $width;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: all .3s;
+  margin-right: -$width;
+
+  &.open {
+    margin-right: 0;
+  }
+
+  header {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .tabs {
+      padding: 10rem 20rem;
+      width: 100%;
+      display: flex;
+      align-items: flex-end;
+      border-bottom: 1px solid #e1e1e1;
+      gap: 15rem;
+      font-size: 14rem;
+      color: gray;
+
+      .tab {
+        cursor: pointer;
+
+        &.active {
+          font-size: 16rem;
+          color: rgb(36, 127, 255);
+          font-weight: bold;
+        }
+      }
+    }
+
+    .close {
+      cursor: pointer;
+      position: absolute;
+      right: 20rem;
+    }
+  }
+
+  .side-content {
+    //flex: 1;
+
+    .swiper {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .wrapper {
+    flex: 1;
+    overflow: hidden;
+
+    .pages {
+      width: 20vw * 3;
+      height: 100%;
+      display: flex;
+      transition: all .3s;
+
+      &.step0 {
+        transform: translate3d(0, 0, 0);
+      }
+
+      &.step1 {
+        transform: translate3d(-20vw, 0, 0);
+      }
+
+      &.step2 {
+        transform: translate3d(-40vw, 0, 0);
+      }
+    }
+  }
+}
+
+
+.menu {
+  position: fixed;
+  right: 20rem;
+  top: 20rem;
+}
+
+
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+
+  /* Center slide text vertically */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/WordList.vue b/src/components/WordList.vue
index 8040a1f3..33495cd9 100644
--- a/src/components/WordList.vue
+++ b/src/components/WordList.vue
@@ -1,45 +1,57 @@
 <script setup lang="ts">
 import {Word} from "../types";
 import {usePlayWordAudio} from "../hooks/usePlayWordAudio";
+import {inject, nextTick, watch} from "vue"
 
-const props = defineProps<{ wordList: Word[], index: number }>()
+const sideIsOpen = inject('sideIsOpen')
+const props = defineProps<{wordList: Word[], index: number}>()
 const [playAudio] = usePlayWordAudio()
+const listRef: HTMLElement = $ref(null)
+watch(() => props.index, (n: number) => {
+  if (sideIsOpen.value) {
+    nextTick(() => {
+      listRef.querySelector('.active').scrollIntoView({block: 'center', behavior: 'smooth'})
+    })
+  }
+})
 </script>
 
 <template>
   <div class="words">
-    <div class="list">
-      <div class="item" v-for="item in props.wordList">
-        <div class="left">
-          <div class="letter">{{ item.name }}</div>
-          <div class="info">
-            <div class="translate">{{ item.trans.join('；') }}</div>
-            <div class="phonetic">{{ item.usphone }}</div>
+    <div class="list" ref="listRef">
+      <template v-for="(item,i) in wordList">
+        <div class="item" :class="index === i && 'active'">
+          <div class="left">
+            <div class="letter">{{ item.name }}</div>
+            <div class="info">
+              <div class="translate">{{ item.trans.join('；') }}</div>
+              <div class="phonetic">{{ item.usphone }}</div>
+            </div>
+          </div>
+          <div class="right">
+            <div class="audio" @click="playAudio(item.name)">播放</div>
+            <div class="audio" @click="playAudio(item.name)">删除</div>
           </div>
         </div>
-        <div class="right">
-          <div class="audio" @click="playAudio(item.name)">播放</div>
-          <div class="audio" @click="playAudio(item.name)">删除</div>
-        </div>
-      </div>
+      </template>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
+@import "@/assets/css/colors";
+
 .words {
-  height: 100%;
-  overflow: auto;
 
   .list {
     display: flex;
     flex-direction: column;
+    gap: 15rem;
 
     .item {
-      margin: 10rem;
       border-radius: 10rem;
       padding: 10rem;
-      border: 1px solid blue;
+      border: 1px solid gray;
       display: flex;
       justify-content: space-between;
 
@@ -63,6 +75,10 @@ const [playAudio] = usePlayWordAudio()
         flex-direction: column;
         justify-content: space-between;
       }
+
+      &.active {
+        background: $dark-bg;
+      }
     }
   }
 }
diff --git a/src/main.ts b/src/main.ts
index 70ace40c..224dc922 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,5 @@
 import {createApp} from 'vue'
-import './style.css'
+import './assets/css/style.scss'
 import App from './App.vue'
 import {createPinia} from "pinia"
 
diff --git a/src/stores/base.ts b/src/stores/base.ts
index e1140a75..29d327b5 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -4,56 +4,57 @@ import {chunk} from "lodash";
 import NCE_2 from "../assets/dicts/NCE_2.json";
 
 export const useBaseStore = defineStore('base', {
-  state: () => {
-    return {
-      newWords: [],
-      skipWords: [],
-      skipWordNames: [],
-      wordList: [],
-      wordListSplit: [],
-      dict: 'nce2',
-      chapterIndex: 0,
-      wordIndex: 0,
-    }
-  },
-  getters: {
-    chapter: (state): Word[] => {
-      return state.wordListSplit?.[state.chapterIndex] ?? []
+    state: () => {
+        return {
+            newWords: [],
+            skipWords: [],
+            skipWordNames: [],
+            wordList: [],
+            wordListSplit: [],
+            dict: 'nce2',
+            chapterIndex: 0,
+            wordIndex: 0,
+            sideIsOpen: false,
+        }
     },
-    word(state): Word {
-      return this.chapter[state.wordIndex] ?? {
-        trans: [],
-        name: ''
-      }
+    getters: {
+        chapter: (state): Word[] => {
+            return state.wordListSplit?.[state.chapterIndex] ?? []
+        },
+        word(state): Word {
+            return this.chapter[state.wordIndex] ?? {
+                trans: [],
+                name: ''
+            }
+        },
     },
-  },
-  actions: {
-    init() {
-      let configStr = localStorage.getItem(SaveKey)
-      if (configStr) {
-        let obj: Config = JSON.parse(configStr)
-        this.newWords = obj.newWords
-        this.skipWords = obj.skipWords
-        this.skipWordNames = obj.skipWordNames
-        this.dict = obj.dict
-        this.chapterIndex = obj.chapterIndex
-        this.wordIndex = 0
-      }
+    actions: {
+        init() {
+            let configStr = localStorage.getItem(SaveKey)
+            if (configStr) {
+                let obj: Config = JSON.parse(configStr)
+                this.newWords = obj.newWords
+                this.skipWords = obj.skipWords
+                this.skipWordNames = obj.skipWordNames
+                this.dict = obj.dict
+                this.chapterIndex = obj.chapterIndex
+                this.wordIndex = 0
+            }
 
-      if (this.dict === 'nce2') {
-        this.wordList = NCE_2
-        this.wordListSplit = chunk(this.wordList, 15)
-        // console.log('this.wordListSplit', this.wordListSplit)
-        // let wordTemp = wordList?.[config.chapterIndex]?.[config.wordIndex]
-        // if (wordTemp && config.skipWordNames.includes(wordTemp.name)) {
-        //   next()
-        // }
-      }
+            if (this.dict === 'nce2') {
+                this.wordList = NCE_2
+                this.wordListSplit = chunk(this.wordList, 15)
+                // console.log('this.wordListSplit', this.wordListSplit)
+                // let wordTemp = wordList?.[config.chapterIndex]?.[config.wordIndex]
+                // if (wordTemp && config.skipWordNames.includes(wordTemp.name)) {
+                //   next()
+                // }
+            }
+        },
+        setState(obj: any) {
+            for (const [key, value] of Object.entries(obj)) {
+                this[key] = value
+            }
+        }
     },
-    setState(obj: any) {
-      for (const [key, value] of Object.entries(obj)) {
-        this[key] = value
-      }
-    }
-  },
 })
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
deleted file mode 100644
index fc696a4c..00000000
--- a/src/style.css
+++ /dev/null
@@ -1,11 +0,0 @@
-html, body {
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-}
-
-#app {
-    width: 100%;
-    height: 100%;
-}
diff --git a/tsconfig.json b/tsconfig.json
index 7b2bcf85..6bdaa35a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,7 +22,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "types": ["vue/ref-macros"]
-
   },
   "include": [
     "src/**/*.ts",
diff --git a/yarn.lock b/yarn.lock
deleted file mode 100644
index 418fd072..00000000
--- a/yarn.lock
+++ /dev/null
@@ -1,578 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@babel/parser@^7.20.15", "@babel/parser@^7.21.3":
-  version "7.22.7"
-  resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.22.7.tgz#df8cf085ce92ddbdbf668a7f186ce848c9036cae"
-  integrity sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==
-
-"@esbuild/android-arm64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.18.17.tgz#9e00eb6865ed5f2dbe71a1e96f2c52254cd92903"
-  integrity sha512-9np+YYdNDed5+Jgr1TdWBsozZ85U1Oa3xW0c7TWqH0y2aGghXtZsuT8nYRbzOMcl0bXZXjOGbksoTtVOlWrRZg==
-
-"@esbuild/android-arm@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.18.17.tgz#1aa013b65524f4e9f794946b415b32ae963a4618"
-  integrity sha512-wHsmJG/dnL3OkpAcwbgoBTTMHVi4Uyou3F5mf58ZtmUyIKfcdA7TROav/6tCzET4A3QW2Q2FC+eFneMU+iyOxg==
-
-"@esbuild/android-x64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.18.17.tgz#c2bd0469b04ded352de011fae34a7a1d4dcecb79"
-  integrity sha512-O+FeWB/+xya0aLg23hHEM2E3hbfwZzjqumKMSIqcHbNvDa+dza2D0yLuymRBQQnC34CWrsJUXyH2MG5VnLd6uw==
-
-"@esbuild/darwin-arm64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.17.tgz#0c21a59cb5bd7a2cec66c7a42431dca42aefeddd"
-  integrity sha512-M9uJ9VSB1oli2BE/dJs3zVr9kcCBBsE883prage1NWz6pBS++1oNn/7soPNS3+1DGj0FrkSvnED4Bmlu1VAE9g==
-
-"@esbuild/darwin-x64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.18.17.tgz#92f8763ff6f97dff1c28a584da7b51b585e87a7b"
-  integrity sha512-XDre+J5YeIJDMfp3n0279DFNrGCXlxOuGsWIkRb1NThMZ0BsrWXoTg23Jer7fEXQ9Ye5QjrvXpxnhzl3bHtk0g==
-
-"@esbuild/freebsd-arm64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.17.tgz#934f74bdf4022e143ba2f21d421b50fd0fead8f8"
-  integrity sha512-cjTzGa3QlNfERa0+ptykyxs5A6FEUQQF0MuilYXYBGdBxD3vxJcKnzDlhDCa1VAJCmAxed6mYhA2KaJIbtiNuQ==
-
-"@esbuild/freebsd-x64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.17.tgz#16b6e90ba26ecc865eab71c56696258ec7f5d8bf"
-  integrity sha512-sOxEvR8d7V7Kw8QqzxWc7bFfnWnGdaFBut1dRUYtu+EIRXefBc/eIsiUiShnW0hM3FmQ5Zf27suDuHsKgZ5QrA==
-
-"@esbuild/linux-arm64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.18.17.tgz#179a58e8d4c72116eb068563629349f8f4b48072"
-  integrity sha512-c9w3tE7qA3CYWjT+M3BMbwMt+0JYOp3vCMKgVBrCl1nwjAlOMYzEo+gG7QaZ9AtqZFj5MbUc885wuBBmu6aADQ==
-
-"@esbuild/linux-arm@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.18.17.tgz#9d78cf87a310ae9ed985c3915d5126578665c7b5"
-  integrity sha512-2d3Lw6wkwgSLC2fIvXKoMNGVaeY8qdN0IC3rfuVxJp89CRfA3e3VqWifGDfuakPmp90+ZirmTfye1n4ncjv2lg==
-
-"@esbuild/linux-ia32@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.18.17.tgz#6fed202602d37361bca376c9d113266a722a908c"
-  integrity sha512-1DS9F966pn5pPnqXYz16dQqWIB0dmDfAQZd6jSSpiT9eX1NzKh07J6VKR3AoXXXEk6CqZMojiVDSZi1SlmKVdg==
-
-"@esbuild/linux-loong64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.18.17.tgz#cdc60304830be1e74560c704bfd72cab8a02fa06"
-  integrity sha512-EvLsxCk6ZF0fpCB6w6eOI2Fc8KW5N6sHlIovNe8uOFObL2O+Mr0bflPHyHwLT6rwMg9r77WOAWb2FqCQrVnwFg==
-
-"@esbuild/linux-mips64el@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.17.tgz#c367b2855bb0902f5576291a2049812af2088086"
-  integrity sha512-e0bIdHA5p6l+lwqTE36NAW5hHtw2tNRmHlGBygZC14QObsA3bD4C6sXLJjvnDIjSKhW1/0S3eDy+QmX/uZWEYQ==
-
-"@esbuild/linux-ppc64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.17.tgz#7fdc0083d42d64a4651711ee0a7964f489242f45"
-  integrity sha512-BAAilJ0M5O2uMxHYGjFKn4nJKF6fNCdP1E0o5t5fvMYYzeIqy2JdAP88Az5LHt9qBoUa4tDaRpfWt21ep5/WqQ==
-
-"@esbuild/linux-riscv64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.17.tgz#5198a417f3f5b86b10c95647b8bc032e5b6b2b1c"
-  integrity sha512-Wh/HW2MPnC3b8BqRSIme/9Zhab36PPH+3zam5pqGRH4pE+4xTrVLx2+XdGp6fVS3L2x+DrsIcsbMleex8fbE6g==
-
-"@esbuild/linux-s390x@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.18.17.tgz#7459c2fecdee2d582f0697fb76a4041f4ad1dd1e"
-  integrity sha512-j/34jAl3ul3PNcK3pfI0NSlBANduT2UO5kZ7FCaK33XFv3chDhICLY8wJJWIhiQ+YNdQ9dxqQctRg2bvrMlYgg==
-
-"@esbuild/linux-x64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.18.17.tgz#948cdbf46d81c81ebd7225a7633009bc56a4488c"
-  integrity sha512-QM50vJ/y+8I60qEmFxMoxIx4de03pGo2HwxdBeFd4nMh364X6TIBZ6VQ5UQmPbQWUVWHWws5MmJXlHAXvJEmpQ==
-
-"@esbuild/netbsd-x64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.17.tgz#6bb89668c0e093c5a575ded08e1d308bd7fd63e7"
-  integrity sha512-/jGlhWR7Sj9JPZHzXyyMZ1RFMkNPjC6QIAan0sDOtIo2TYk3tZn5UDrkE0XgsTQCxWTTOcMPf9p6Rh2hXtl5TQ==
-
-"@esbuild/openbsd-x64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.17.tgz#abac2ae75fef820ef6c2c48da4666d092584c79d"
-  integrity sha512-rSEeYaGgyGGf4qZM2NonMhMOP/5EHp4u9ehFiBrg7stH6BYEEjlkVREuDEcQ0LfIl53OXLxNbfuIj7mr5m29TA==
-
-"@esbuild/sunos-x64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.18.17.tgz#74a45fe1db8ea96898f1a9bb401dcf1dadfc8371"
-  integrity sha512-Y7ZBbkLqlSgn4+zot4KUNYst0bFoO68tRgI6mY2FIM+b7ZbyNVtNbDP5y8qlu4/knZZ73fgJDlXID+ohY5zt5g==
-
-"@esbuild/win32-arm64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.18.17.tgz#fd95ffd217995589058a4ed8ac17ee72a3d7f615"
-  integrity sha512-bwPmTJsEQcbZk26oYpc4c/8PvTY3J5/QK8jM19DVlEsAB41M39aWovWoHtNm78sd6ip6prilxeHosPADXtEJFw==
-
-"@esbuild/win32-ia32@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.18.17.tgz#9b7ef5d0df97593a80f946b482e34fcba3fa4aaf"
-  integrity sha512-H/XaPtPKli2MhW+3CQueo6Ni3Avggi6hP/YvgkEe1aSaxw+AeO8MFjq8DlgfTd9Iz4Yih3QCZI6YLMoyccnPRg==
-
-"@esbuild/win32-x64@0.18.17":
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.18.17.tgz#bcb2e042631b3c15792058e189ed879a22b2968b"
-  integrity sha512-fGEb8f2BSA3CW7riJVurug65ACLuQAzKq0SSqkY2b2yHHH0MzDfbLyKIGzHwOI/gkHcxM/leuSW6D5w/LMNitA==
-
-"@jridgewell/sourcemap-codec@^1.4.15":
-  version "1.4.15"
-  resolved "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
-  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
-
-"@types/lodash@^4.14.196":
-  version "4.14.196"
-  resolved "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.196.tgz#a7c3d6fc52d8d71328b764e28e080b4169ec7a95"
-  integrity sha512-22y3o88f4a94mKljsZcanlNWPzO0uBsBdzLAngf2tp533LzZcQzb6+eZPJ+vCTt+bqF2XnvT9gejTLsAcJAJyQ==
-
-"@vitejs/plugin-vue@^4.2.3":
-  version "4.2.3"
-  resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz#ee0b6dfcc62fe65364e6395bf38fa2ba10bb44b6"
-  integrity sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==
-
-"@volar/language-core@1.10.0", "@volar/language-core@~1.10.0":
-  version "1.10.0"
-  resolved "https://registry.npmmirror.com/@volar/language-core/-/language-core-1.10.0.tgz#fb6b3ad22e75c53a1ae4d644c4a788b47d411b9d"
-  integrity sha512-ddyWwSYqcbEZNFHm+Z3NZd6M7Ihjcwl/9B5cZd8kECdimVXUFdFi60XHWD27nrWtUQIsUYIG7Ca1WBwV2u2LSQ==
-  dependencies:
-    "@volar/source-map" "1.10.0"
-
-"@volar/source-map@1.10.0", "@volar/source-map@~1.10.0":
-  version "1.10.0"
-  resolved "https://registry.npmmirror.com/@volar/source-map/-/source-map-1.10.0.tgz#2413eb190ce69fc1a382f58524a3f82306668024"
-  integrity sha512-/ibWdcOzDGiq/GM1JU2eX8fH1bvAhl66hfe8yEgLEzg9txgr6qb5sQ/DEz5PcDL75tF5H5sCRRwn8Eu8ezi9mw==
-  dependencies:
-    muggle-string "^0.3.1"
-
-"@volar/typescript@~1.10.0":
-  version "1.10.0"
-  resolved "https://registry.npmmirror.com/@volar/typescript/-/typescript-1.10.0.tgz#3b16cf7c4c1802eac023ba4e57fe52bdb6d3016f"
-  integrity sha512-OtqGtFbUKYC0pLNIk3mHQp5xWnvL1CJIUc9VE39VdZ/oqpoBh5jKfb9uJ45Y4/oP/WYTrif/Uxl1k8VTPz66Gg==
-  dependencies:
-    "@volar/language-core" "1.10.0"
-
-"@vue/compiler-core@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz#7fbf591c1c19e1acd28ffd284526e98b4f581128"
-  integrity sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==
-  dependencies:
-    "@babel/parser" "^7.21.3"
-    "@vue/shared" "3.3.4"
-    estree-walker "^2.0.2"
-    source-map-js "^1.0.2"
-
-"@vue/compiler-dom@3.3.4", "@vue/compiler-dom@^3.3.0":
-  version "3.3.4"
-  resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz#f56e09b5f4d7dc350f981784de9713d823341151"
-  integrity sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==
-  dependencies:
-    "@vue/compiler-core" "3.3.4"
-    "@vue/shared" "3.3.4"
-
-"@vue/compiler-sfc@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz#b19d942c71938893535b46226d602720593001df"
-  integrity sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==
-  dependencies:
-    "@babel/parser" "^7.20.15"
-    "@vue/compiler-core" "3.3.4"
-    "@vue/compiler-dom" "3.3.4"
-    "@vue/compiler-ssr" "3.3.4"
-    "@vue/reactivity-transform" "3.3.4"
-    "@vue/shared" "3.3.4"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.0"
-    postcss "^8.1.10"
-    source-map-js "^1.0.2"
-
-"@vue/compiler-ssr@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz#9d1379abffa4f2b0cd844174ceec4a9721138777"
-  integrity sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==
-  dependencies:
-    "@vue/compiler-dom" "3.3.4"
-    "@vue/shared" "3.3.4"
-
-"@vue/devtools-api@^6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
-  integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
-
-"@vue/language-core@1.8.8":
-  version "1.8.8"
-  resolved "https://registry.npmmirror.com/@vue/language-core/-/language-core-1.8.8.tgz#5a8aa8363f4dfacdfcd7808a9926744d7c310ae6"
-  integrity sha512-i4KMTuPazf48yMdYoebTkgSOJdFraE4pQf0B+FTOFkbB+6hAfjrSou/UmYWRsWyZV6r4Rc6DDZdI39CJwL0rWw==
-  dependencies:
-    "@volar/language-core" "~1.10.0"
-    "@volar/source-map" "~1.10.0"
-    "@vue/compiler-dom" "^3.3.0"
-    "@vue/reactivity" "^3.3.0"
-    "@vue/shared" "^3.3.0"
-    minimatch "^9.0.0"
-    muggle-string "^0.3.1"
-    vue-template-compiler "^2.7.14"
-
-"@vue/reactivity-transform@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz#52908476e34d6a65c6c21cd2722d41ed8ae51929"
-  integrity sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==
-  dependencies:
-    "@babel/parser" "^7.20.15"
-    "@vue/compiler-core" "3.3.4"
-    "@vue/shared" "3.3.4"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.0"
-
-"@vue/reactivity@3.3.4", "@vue/reactivity@^3.3.0":
-  version "3.3.4"
-  resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.4.tgz#a27a29c6cd17faba5a0e99fbb86ee951653e2253"
-  integrity sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==
-  dependencies:
-    "@vue/shared" "3.3.4"
-
-"@vue/runtime-core@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.4.tgz#4bb33872bbb583721b340f3088888394195967d1"
-  integrity sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==
-  dependencies:
-    "@vue/reactivity" "3.3.4"
-    "@vue/shared" "3.3.4"
-
-"@vue/runtime-dom@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz#992f2579d0ed6ce961f47bbe9bfe4b6791251566"
-  integrity sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==
-  dependencies:
-    "@vue/runtime-core" "3.3.4"
-    "@vue/shared" "3.3.4"
-    csstype "^3.1.1"
-
-"@vue/server-renderer@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.4.tgz#ea46594b795d1536f29bc592dd0f6655f7ea4c4c"
-  integrity sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==
-  dependencies:
-    "@vue/compiler-ssr" "3.3.4"
-    "@vue/shared" "3.3.4"
-
-"@vue/shared@3.3.4", "@vue/shared@^3.3.0":
-  version "3.3.4"
-  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
-  integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
-
-"@vue/typescript@1.8.8":
-  version "1.8.8"
-  resolved "https://registry.npmmirror.com/@vue/typescript/-/typescript-1.8.8.tgz#8efb375d448862134492a044f4e96afada547500"
-  integrity sha512-jUnmMB6egu5wl342eaUH236v8tdcEPXXkPgj+eI/F6JwW/lb+yAU6U07ZbQ3MVabZRlupIlPESB7ajgAGixhow==
-  dependencies:
-    "@volar/typescript" "~1.10.0"
-    "@vue/language-core" "1.8.8"
-
-anymatch@~3.1.2:
-  version "3.1.3"
-  resolved "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
-  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
-  dependencies:
-    normalize-path "^3.0.0"
-    picomatch "^2.0.4"
-
-balanced-match@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
-  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
-
-binary-extensions@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
-  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
-
-brace-expansion@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
-  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
-  dependencies:
-    balanced-match "^1.0.0"
-
-braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
-  dependencies:
-    fill-range "^7.0.1"
-
-"chokidar@>=3.0.0 <4.0.0":
-  version "3.5.3"
-  resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
-  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
-  dependencies:
-    anymatch "~3.1.2"
-    braces "~3.0.2"
-    glob-parent "~5.1.2"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.6.0"
-  optionalDependencies:
-    fsevents "~2.3.2"
-
-csstype@^3.1.1:
-  version "3.1.2"
-  resolved "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
-  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
-
-de-indent@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
-
-esbuild@^0.18.10:
-  version "0.18.17"
-  resolved "https://registry.npmmirror.com/esbuild/-/esbuild-0.18.17.tgz#2aaf6bc6759b0c605777fdc435fea3969e091cad"
-  integrity sha512-1GJtYnUxsJreHYA0Y+iQz2UEykonY66HNWOb0yXYZi9/kNrORUEHVg87eQsCtqh59PEJ5YVZJO98JHznMJSWjg==
-  optionalDependencies:
-    "@esbuild/android-arm" "0.18.17"
-    "@esbuild/android-arm64" "0.18.17"
-    "@esbuild/android-x64" "0.18.17"
-    "@esbuild/darwin-arm64" "0.18.17"
-    "@esbuild/darwin-x64" "0.18.17"
-    "@esbuild/freebsd-arm64" "0.18.17"
-    "@esbuild/freebsd-x64" "0.18.17"
-    "@esbuild/linux-arm" "0.18.17"
-    "@esbuild/linux-arm64" "0.18.17"
-    "@esbuild/linux-ia32" "0.18.17"
-    "@esbuild/linux-loong64" "0.18.17"
-    "@esbuild/linux-mips64el" "0.18.17"
-    "@esbuild/linux-ppc64" "0.18.17"
-    "@esbuild/linux-riscv64" "0.18.17"
-    "@esbuild/linux-s390x" "0.18.17"
-    "@esbuild/linux-x64" "0.18.17"
-    "@esbuild/netbsd-x64" "0.18.17"
-    "@esbuild/openbsd-x64" "0.18.17"
-    "@esbuild/sunos-x64" "0.18.17"
-    "@esbuild/win32-arm64" "0.18.17"
-    "@esbuild/win32-ia32" "0.18.17"
-    "@esbuild/win32-x64" "0.18.17"
-
-estree-walker@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
-  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
-
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
-  dependencies:
-    to-regex-range "^5.0.1"
-
-fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
-glob-parent@~5.1.2:
-  version "5.1.2"
-  resolved "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
-  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
-  dependencies:
-    is-glob "^4.0.1"
-
-he@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmmirror.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-
-immutable@^4.0.0:
-  version "4.3.2"
-  resolved "https://registry.npmmirror.com/immutable/-/immutable-4.3.2.tgz#f89d910f8dfb6e15c03b2cae2faaf8c1f66455fe"
-  integrity sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==
-
-is-binary-path@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
-  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
-  dependencies:
-    binary-extensions "^2.0.0"
-
-is-extglob@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
-
-is-glob@^4.0.1, is-glob@~4.0.1:
-  version "4.0.3"
-  resolved "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
-  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
-  dependencies:
-    is-extglob "^2.1.1"
-
-is-number@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
-  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
-
-lodash@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
-lru-cache@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
-  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
-  dependencies:
-    yallist "^4.0.0"
-
-magic-string@^0.30.0:
-  version "0.30.2"
-  resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.2.tgz#dcf04aad3d0d1314bc743d076c50feb29b3c7aca"
-  integrity sha512-lNZdu7pewtq/ZvWUp9Wpf/x7WzMTsR26TWV03BRZrXFsv+BI6dy8RAiKgm1uM/kyR0rCfUcqvOlXKG66KhIGug==
-  dependencies:
-    "@jridgewell/sourcemap-codec" "^1.4.15"
-
-minimatch@^9.0.0:
-  version "9.0.3"
-  resolved "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
-  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
-  dependencies:
-    brace-expansion "^2.0.1"
-
-muggle-string@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.3.1.tgz#e524312eb1728c63dd0b2ac49e3282e6ed85963a"
-  integrity sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==
-
-nanoid@^3.3.6:
-  version "3.3.6"
-  resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
-  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
-
-normalize-path@^3.0.0, normalize-path@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
-  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
-
-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
-
-picomatch@^2.0.4, picomatch@^2.2.1:
-  version "2.3.1"
-  resolved "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
-  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
-
-pinia@^2.1.6:
-  version "2.1.6"
-  resolved "https://registry.npmmirror.com/pinia/-/pinia-2.1.6.tgz#e88959f14b61c4debd9c42d0c9944e2875cbe0fa"
-  integrity sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==
-  dependencies:
-    "@vue/devtools-api" "^6.5.0"
-    vue-demi ">=0.14.5"
-
-postcss@^8.1.10, postcss@^8.4.26:
-  version "8.4.27"
-  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.27.tgz#234d7e4b72e34ba5a92c29636734349e0d9c3057"
-  integrity sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
-readdirp@~3.6.0:
-  version "3.6.0"
-  resolved "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
-  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
-  dependencies:
-    picomatch "^2.2.1"
-
-rollup@^3.25.2:
-  version "3.27.1"
-  resolved "https://registry.npmmirror.com/rollup/-/rollup-3.27.1.tgz#e6c7340889f33042b4c3247a2acb38ebcfc3a98c"
-  integrity sha512-tXNDFwOkN6C2w5Blj1g6ForKeFw6c1mDu5jxoeDO3/pmYjgt+8yvIFjKzH5FQUq70OKZBkOt0zzv0THXL7vwzQ==
-  optionalDependencies:
-    fsevents "~2.3.2"
-
-sass@^1.64.2:
-  version "1.64.2"
-  resolved "https://registry.npmmirror.com/sass/-/sass-1.64.2.tgz#0d9805ad6acf31c59c3acc725fcfb91b7fcc6909"
-  integrity sha512-TnDlfc+CRnUAgLO9D8cQLFu/GIjJIzJCGkE7o4ekIGQOH7T3GetiRR/PsTWJUHhkzcSPrARkPI+gNWn5alCzDg==
-  dependencies:
-    chokidar ">=3.0.0 <4.0.0"
-    immutable "^4.0.0"
-    source-map-js ">=0.6.2 <2.0.0"
-
-semver@^7.3.8:
-  version "7.5.4"
-  resolved "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
-  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
-  dependencies:
-    lru-cache "^6.0.0"
-
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
-  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
-
-to-regex-range@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
-  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
-  dependencies:
-    is-number "^7.0.0"
-
-typescript@^5.0.2:
-  version "5.1.6"
-  resolved "https://registry.npmmirror.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
-  integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
-
-vite@^4.4.5:
-  version "4.4.8"
-  resolved "https://registry.npmmirror.com/vite/-/vite-4.4.8.tgz#31e4a438f8748695c68bd57ffd262ba93540fdf7"
-  integrity sha512-LONawOUUjxQridNWGQlNizfKH89qPigK36XhMI7COMGztz8KNY0JHim7/xDd71CZwGT4HtSRgI7Hy+RlhG0Gvg==
-  dependencies:
-    esbuild "^0.18.10"
-    postcss "^8.4.26"
-    rollup "^3.25.2"
-  optionalDependencies:
-    fsevents "~2.3.2"
-
-vue-demi@>=0.14.5:
-  version "0.14.5"
-  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9"
-  integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==
-
-vue-template-compiler@^2.7.14:
-  version "2.7.14"
-  resolved "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"
-  integrity sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==
-  dependencies:
-    de-indent "^1.0.2"
-    he "^1.2.0"
-
-vue-tsc@^1.8.5:
-  version "1.8.8"
-  resolved "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-1.8.8.tgz#67317693eb2ef6747e89e6d834eeb6d2deb8871d"
-  integrity sha512-bSydNFQsF7AMvwWsRXD7cBIXaNs/KSjvzWLymq/UtKE36697sboX4EccSHFVxvgdBlI1frYPc/VMKJNB7DFeDQ==
-  dependencies:
-    "@vue/language-core" "1.8.8"
-    "@vue/typescript" "1.8.8"
-    semver "^7.3.8"
-
-vue@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.npmmirror.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
-  integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==
-  dependencies:
-    "@vue/compiler-dom" "3.3.4"
-    "@vue/compiler-sfc" "3.3.4"
-    "@vue/runtime-dom" "3.3.4"
-    "@vue/server-renderer" "3.3.4"
-    "@vue/shared" "3.3.4"
-
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
-  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==