From d0e81638ecd95fb5ab2fe810ba28b9ee01b37292 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sat, 26 Aug 2023 00:01:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          |   3 +-
 src/assets/css/style.scss            |   1 +
 src/components/Backgorund.vue        |   2 +-
 src/components/Side.vue              | 220 +++++++++++++--------------
 src/components/Toolbar/DictModal.vue |   4 +-
 src/components/Toolbar/Toolbar.vue   |  11 +-
 src/components/Type.vue              | 126 ++++++++++++---
 7 files changed, 222 insertions(+), 145 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 16c24f23..9dcdc931 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,11 +4,12 @@ import Toolbar from "@/components/Toolbar/Toolbar.vue";
 import Type from "@/components/Type.vue";
 import Side from "@/components/Side.vue";
 import Statistics from "@/components/Modal/Statistics.vue";
+import Backgorund from "@/components/Backgorund.vue";
 
 </script>
 
 <template>
-  <!--  <Backgorund/>-->
+<!--    <Backgorund/>-->
   <div class="main-page">
     <div class="center">
       <Toolbar/>
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index a98b221f..74f1d53c 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -15,6 +15,7 @@
   --color-item-bg: white;
   --color-item-hover: white;
   --color-item-active: rgb(75, 110, 175);
+  --toolbar-width: 600rem;
 }
 
 html[data-theme='dark'] {
diff --git a/src/components/Backgorund.vue b/src/components/Backgorund.vue
index 1caf846d..8c884826 100644
--- a/src/components/Backgorund.vue
+++ b/src/components/Backgorund.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="background">
+  <div id="background" class="anim">
     <img src="@/assets/img/moon.png" alt="" id="moon" style="display:none">
     <canvas ref="canvas"/>
   </div>
diff --git a/src/components/Side.vue b/src/components/Side.vue
index f2faa6e5..d60a4131 100644
--- a/src/components/Side.vue
+++ b/src/components/Side.vue
@@ -30,113 +30,116 @@ function changeDict(dict: Dict, i: number) {
 
 </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 class="tab" :class="tabIndex===3&&'active'" @click="slideTo(3)">已忽略</div>
+  <Transition name="fade">
+    <div class="side"  v-if="store.sideIsOpen">
+      <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 class="tab" :class="tabIndex===3&&'active'" @click="slideTo(3)">已忽略</div>
+        </div>
+      </header>
+      <div class="side-content">
+        <swiper @swiper="e=>swiperIns0 = e" class="mySwiper" :allow-touch-move="false">
+          <swiper-slide>
+            <div class="page0">
+              <header>
+                <div class="dict-name">{{ store.dict.chapterIndex + 1 }}.</div>
+              </header>
+              <WordList
+                  class="word-list"
+                  @change="(e:number) => store.changeDict(store.dict,-1,e)"
+                  :isActive="store.sideIsOpen && tabIndex === 0"
+                  :list="store.dict.chapterList[store.dict.chapterIndex]??[]"
+                  :activeIndex="store.dict.wordIndex"/>
+              <footer v-if="![DictType.custom,DictType.inner].includes(store.currentDictType)">
+                <PopConfirm
+                    :title="`确认切换？`"
+                    @confirm="store.changeDict(store.dict)"
+                >
+                  <div class="my-button">
+                    切换
+                  </div>
+                </PopConfirm>
+              </footer>
+            </div>
+          </swiper-slide>
+          <swiper-slide>
+            <div class="page0">
+              <header>
+                <div class="dict-name">总词数：{{ store.newWordDict.wordList.length }}</div>
+              </header>
+              <WordList
+                  class="word-list"
+                  @change="(e:number) => store.changeDict(store.newWordDict,-1,e)"
+                  :isActive="store.sideIsOpen && tabIndex === 1"
+                  :list="store.newWordDict.wordList"
+                  :activeIndex="store.newWordDict.wordIndex"/>
+              <footer v-if="store.currentDictType !== DictType.newWordDict && store.newWordDict.wordList.length">
+                <PopConfirm
+                    :title="`确认切换？`"
+                    @confirm="store.changeDict(store.newWordDict)"
+                >
+                  <div class="my-button">
+                    切换
+                  </div>
+                </PopConfirm>
+              </footer>
+            </div>
+          </swiper-slide>
+          <swiper-slide>
+            <div class="page0">
+              <header>
+                <a href="" target="_blank"></a>
+                <div class="dict-name">总词数：{{ store.wrongDict.wordList.length }}</div>
+              </header>
+              <WordList
+                  class="word-list"
+                  @change="(e:number) => store.changeDict(store.wrongDict,-1,e)"
+                  :isActive="store.sideIsOpen && tabIndex === 2"
+                  :list="store.wrongDict.wordList"
+                  :activeIndex="store.wrongDict.wordIndex"/>
+              <footer v-if="store.currentDictType !== DictType.wrongDict && store.wrongDict.wordList.length">
+                <PopConfirm
+                    :title="`确认切换？`"
+                    @confirm="store.changeDict(store.wrongDict)"
+                >
+                  <BaseButton>
+                    切换
+                  </BaseButton>
+                </PopConfirm>
+              </footer>
+            </div>
+          </swiper-slide>
+          <swiper-slide>
+            <div class="page0">
+              <header>
+                <div class="dict-name">总词数：{{ store.skipWordDict.wordList.length }}</div>
+              </header>
+              <WordList
+                  class="word-list"
+                  @change="(e:number) => store.changeDict(store.skipWordDict,-1,e)"
+                  :isActive="store.sideIsOpen && tabIndex === 3"
+                  :list="store.skipWordDict.wordList"
+                  :activeIndex="store.skipWordDict.wordIndex"/>
+              <footer v-if="store.currentDictType !== DictType.skipWordDict && store.skipWordDict.wordList.length">
+                <PopConfirm
+                    :title="`确认切换？`"
+                    @confirm="store.changeDict(store.skipWordDict)"
+                >
+                  <div class="my-button hvr-grow">
+                    切换
+                  </div>
+                </PopConfirm>
+              </footer>
+            </div>
+          </swiper-slide>
+        </swiper>
       </div>
-    </header>
-    <div class="side-content">
-      <swiper @swiper="e=>swiperIns0 = e" class="mySwiper" :allow-touch-move="false">
-        <swiper-slide>
-          <div class="page0">
-            <header>
-              <div class="dict-name">{{ store.dict.chapterIndex + 1 }}.</div>
-            </header>
-            <WordList
-                class="word-list"
-                @change="(e:number) => store.changeDict(store.dict,-1,e)"
-                :isActive="store.sideIsOpen && tabIndex === 0"
-                :list="store.dict.chapterList[store.dict.chapterIndex]??[]"
-                :activeIndex="store.dict.wordIndex"/>
-            <footer v-if="![DictType.custom,DictType.inner].includes(store.currentDictType)">
-              <PopConfirm
-                  :title="`确认切换？`"
-                  @confirm="store.changeDict(store.dict)"
-              >
-                <div class="my-button">
-                  切换
-                </div>
-              </PopConfirm>
-            </footer>
-          </div>
-        </swiper-slide>
-        <swiper-slide>
-          <div class="page0">
-            <header>
-              <div class="dict-name">总词数：{{ store.newWordDict.wordList.length }}</div>
-            </header>
-            <WordList
-                class="word-list"
-                @change="(e:number) => store.changeDict(store.newWordDict,-1,e)"
-                :isActive="store.sideIsOpen && tabIndex === 1"
-                :list="store.newWordDict.wordList"
-                :activeIndex="store.newWordDict.wordIndex"/>
-            <footer v-if="store.currentDictType !== DictType.newWordDict && store.newWordDict.wordList.length">
-              <PopConfirm
-                  :title="`确认切换？`"
-                  @confirm="store.changeDict(store.newWordDict)"
-              >
-                <div class="my-button">
-                  切换
-                </div>
-              </PopConfirm>
-            </footer>
-          </div>
-        </swiper-slide>
-        <swiper-slide>
-          <div class="page0">
-            <header>
-              <a href="" target="_blank"></a>
-              <div class="dict-name">总词数：{{ store.wrongDict.wordList.length }}</div>
-            </header>
-            <WordList
-                class="word-list"
-                @change="(e:number) => store.changeDict(store.wrongDict,-1,e)"
-                :isActive="store.sideIsOpen && tabIndex === 2"
-                :list="store.wrongDict.wordList"
-                :activeIndex="store.wrongDict.wordIndex"/>
-            <footer v-if="store.currentDictType !== DictType.wrongDict && store.wrongDict.wordList.length">
-              <PopConfirm
-                  :title="`确认切换？`"
-                  @confirm="store.changeDict(store.wrongDict)"
-              >
-                <BaseButton>
-                  切换
-                </BaseButton>
-              </PopConfirm>
-            </footer>
-          </div>
-        </swiper-slide>
-        <swiper-slide>
-          <div class="page0">
-            <header>
-              <div class="dict-name">总词数：{{ store.skipWordDict.wordList.length }}</div>
-            </header>
-            <WordList
-                class="word-list"
-                @change="(e:number) => store.changeDict(store.skipWordDict,-1,e)"
-                :isActive="store.sideIsOpen && tabIndex === 3"
-                :list="store.skipWordDict.wordList"
-                :activeIndex="store.skipWordDict.wordIndex"/>
-            <footer v-if="store.currentDictType !== DictType.skipWordDict && store.skipWordDict.wordList.length">
-              <PopConfirm
-                  :title="`确认切换？`"
-                  @confirm="store.changeDict(store.skipWordDict)"
-              >
-                <div class="my-button hvr-grow">
-                  切换
-                </div>
-              </PopConfirm>
-            </footer>
-          </div>
-        </swiper-slide>
-      </swiper>
     </div>
-  </div>
+  </Transition>
+
 </template>
 <style scoped lang="scss">
 @import "@/assets/css/colors";
@@ -160,13 +163,6 @@ function changeDict(dict: Dict, i: number) {
   //transform: rotate(-90deg);
   //transform-origin: 0 0;
   z-index: 1;
-  opacity: 0;
-
-  &.open {
-    //margin-right: 0;
-    //transform: rotate(0deg);
-    opacity: 1;
-  }
 
   $header-height: 40rem;
 
diff --git a/src/components/Toolbar/DictModal.vue b/src/components/Toolbar/DictModal.vue
index f93face4..10e252a1 100644
--- a/src/components/Toolbar/DictModal.vue
+++ b/src/components/Toolbar/DictModal.vue
@@ -32,7 +32,7 @@ const currentSelectChapter: Word[] = $computed(() => {
   return currentSelectDict.chapterList?.[currentSelectDict.chapterIndex] ?? []
 })
 
-watch(() => props.modelValue, (n: Dict) => {
+watch(() => props.modelValue, (n: boolean) => {
   currentSelectDict = store.currentDict
 })
 
@@ -57,7 +57,7 @@ async function selectDict(item: Dict) {
 
 function changeDict() {
   store.changeDict(currentSelectDict)
-  this.close()
+  close()
 }
 
 function close() {
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue
index f8e06472..8a02b691 100644
--- a/src/components/Toolbar/Toolbar.vue
+++ b/src/components/Toolbar/Toolbar.vue
@@ -116,14 +116,14 @@ const showDictModal = $ref(false)
 @import "@/assets/css/colors.scss";
 
 header {
-  margin-top: 10rem;
+  top: 10rem;
   height: 60rem;
-  width: 50%;
+  width: var(--toolbar-width);
   background: var(--color-header-bg);
   display: flex;
   justify-content: space-between;
   border-radius: 8rem;
-  position: relative;
+  position: absolute;
   z-index: 2;
   padding: 10rem $space;
   box-sizing: border-box;
@@ -154,10 +154,11 @@ header {
     left: 50%;
     cursor: pointer;
     transition: all .5s;
-    transform: translate3d(-50%, 120%, 0) rotate(180deg);
+    transform: translate3d(-50%, 100%, 0) rotate(180deg);
+    padding: 10rem;
 
     &.down {
-      transform: translate3d(-50%, 120%, 0) rotate(0);
+      transform: translate3d(-50%, 100%, 0) rotate(0);
     }
   }
 }
diff --git a/src/components/Type.vue b/src/components/Type.vue
index 35365992..62be9b7b 100644
--- a/src/components/Type.vue
+++ b/src/components/Type.vue
@@ -26,6 +26,9 @@ import Toolbar from "@/components/Toolbar/Toolbar.vue"
 import {KeyboardOne} from "@icon-park/vue-next";
 import BaseButton from "@/components/BaseButton.vue";
 import Type from "@/components/Type.vue";
+import {
+  Down,
+} from "@icon-park/vue-next"
 
 let input = $ref('')
 let wrong = $ref('')
@@ -73,6 +76,7 @@ function next() {
       store.currentDict.wordIndex = 0
       store.currentDict.chapterIndex++
       console.log('这一章节完了')
+      wrongWord = []
     } else {
       console.log('这本书完了')
       return
@@ -94,13 +98,15 @@ function next() {
     next()
   }
   wrong = input = ''
+  store.lastStatistics.correctNumber = store.currentDict.wordIndex - wrongWord.length
+  store.lastStatistics.correctRate = Math.trunc(((store.currentDict.wordIndex - wrongWord.length) / (store.currentDict.wordIndex)) * 100)
 }
 
 function onKeyUp(e: KeyboardEvent) {
   showFullWord = false
 }
 
-const wrongWord = $ref([])
+let wrongWord = $ref([])
 
 async function onKeyDown(e: KeyboardEvent) {
   //TODO 还有横杠
@@ -117,6 +123,7 @@ async function onKeyDown(e: KeyboardEvent) {
       if (!wrongWord.find((v: string) => v === store.word.name)) {
         wrongWord.push(store.word.name)
       }
+      store.lastStatistics.correctRate = Math.trunc(((store.currentDict.wordIndex + 1 - wrongWord.length) / (store.currentDict.wordIndex + 1)) * 100)
       wrong = letter
       playKeySound()
       playBeep()
@@ -130,9 +137,6 @@ async function onKeyDown(e: KeyboardEvent) {
       setTimeout(next, 300)
     }
 
-    console.log('s',(store.currentDict.wordIndex + 1 - wrongWord.length) / (store.currentDict.wordIndex + 1))
-    store.lastStatistics.correctRate = Math.trunc(((store.currentDict.wordIndex + 1 - wrongWord.length) / (store.currentDict.wordIndex + 1)) * 100)
-    store.lastStatistics.correctNumber = store.currentDict.wordIndex - wrongWord.length
   } else {
     // console.log('e', e)
     switch (e.key) {
@@ -178,6 +182,10 @@ const progress = $computed(() => {
 
 const {appearance, toggle} = useThemeColor()
 
+function format(val: number, suffix: string = '') {
+  return val === -1 ? '-' : (val + suffix)
+}
+
 </script>
 
 <template>
@@ -208,29 +216,45 @@ const {appearance, toggle} = useThemeColor()
         下一个
       </BaseButton>
     </div>
+    <div class="bottom" :class="!store.setting.showToolbar && 'hide'">
+      <Tooltip :title="store.setting.showToolbar?'收起':'展开'">
+        <Down
+            @click="store.setting.showToolbar = !store.setting.showToolbar"
+            class="arrow"
+            :class="!store.setting.showToolbar && 'down'"
+            theme="outline" size="24" fill="#999"/>
+      </Tooltip>
+      <el-progress :percentage="progress"
+                   :stroke-width="8"
+                   :show-text="false"/>
+      <div class="stat">
+        <div class="row">
+          <div class="num">{{ store.lastStatistics.endDate }}</div>
+          <div class="line"></div>
+          <div class="name">时间</div>
+        </div>
+        <div class="row">
+          <div class="num">{{ store.currentDict.wordIndex }}</div>
+          <div class="line"></div>
+          <div class="name">输入数</div>
+        </div>
+        <div class="row">
+          <div class="num">{{ format(store.lastStatistics.correctRate, '%') }}</div>
+          <div class="line"></div>
+          <div class="name">正确率</div>
+        </div>
+        <div class="row">
+          <div class="num">{{ format(store.lastStatistics.correctNumber) }}</div>
+          <div class="line"></div>
+          <div class="name">正确数</div>
+        </div>
+      </div>
+    </div>
     <div class="progress">
       <el-progress :percentage="progress"
                    :stroke-width="8"
-                   color="rgb(224,231,255)"
                    :show-text="false"/>
     </div>
-    <div class="stat">
-      <div class="row">
-        <div>{{ store.lastStatistics.endDate }}</div>
-      </div>
-      <div class="row">
-        <div>正确率:{{ store.lastStatistics.correctRate }}</div>
-      </div>
-      <div class="row">
-        <div>正确数:{{ store.lastStatistics.correctNumber }}</div>
-      </div>
-      <div class="row">
-        <div>wordIndex:{{ store.currentDict.wordIndex }}</div>
-      </div>
-      <div class="row">
-        <div>wrongWord:{{ wrongWord.length }}</div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -284,9 +308,63 @@ const {appearance, toggle} = useThemeColor()
     }
   }
 
-  .progress {
+  .bottom {
+    position: absolute;
+    bottom: 30rem;
+    width: var(--toolbar-width);
+    box-sizing: border-box;
+    border-radius: 10rem;
+    background: white;
+    padding: 2rem 10rem 10rem 10rem;
     margin-top: 20rem;
-    width: 400rem;
+    transition: all .3s;
+    z-index: 2;
+
+    .arrow {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      cursor: pointer;
+      transition: all .3s;
+      transform: translate3d(-50%, -100%, 0) rotate(0);
+      padding: 10rem;
+    }
+
+    .stat {
+      margin-top: 10rem;
+      display: flex;
+      justify-content: space-around;
+
+      .row {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10rem;
+        width: 50rem;
+
+        .line {
+          height: 1px;
+          width: 100%;
+          background: gainsboro;
+        }
+      }
+    }
+
+    &.hide {
+      transform: translateY(calc(100% + 30rem));
+
+      .arrow {
+        transform: translate3d(-50%, -180%, 0) rotate(180deg);
+      }
+    }
+  }
+
+  .progress {
+    width: var(--toolbar-width);
+    padding:0 10rem;
+    box-sizing: border-box;
+    position: fixed;
+    bottom: 30rem;
   }
 }