添加统计

2023-08-26 00:01:59 +08:00
parent 71f4b0e5fd
commit d0e81638ec
7 changed files with 222 additions and 145 deletions
--- 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>
--- 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;

--- 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() {
--- 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);
    }
  }
 }
--- 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;
  }
 }