Fix footer statistics error bug

2023-11-07 15:07:58 +08:00
parent c92cf74075
commit 0cf09b8da3
8 changed files with 76 additions and 51 deletions
--- a/src/components/Practice/Footer.vue
+++ b/src/components/Practice/Footer.vue
@@ -3,14 +3,11 @@
 import {$computed, $ref} from "vue/macros"
 import {onMounted, onUnmounted} from "vue"
 import {useBaseStore} from "@/stores/base.ts"
-import Tooltip from "@/components/Tooltip.vue"
 import {usePracticeStore} from "@/stores/practice.ts";
-import {Icon} from "@iconify/vue";
 import {useSettingStore} from "@/stores/setting.ts";

 const practiceStore = usePracticeStore()
 const settingStore = useSettingStore()
-const store = useBaseStore()

 function format(val: number, suffix: string = '', check: number = -1) {
  return val === check ? '-' : (val + suffix)
--- a/src/components/Practice/PracticeWord/TypingWord.vue
+++ b/src/components/Practice/PracticeWord/TypingWord.vue
@@ -2,7 +2,15 @@
 import {onMounted, onUnmounted, watch} from "vue"
 import {$computed, $ref} from "vue/macros"
 import {useBaseStore} from "@/stores/base.ts"
-import {DefaultShortcutKeyMap, DictType, DisplayStatistics, ShortcutKey, ShortcutKeyMap, Word} from "../../../types";
+import {
+  DefaultDisplayStatistics,
+  DefaultShortcutKeyMap,
+  DictType,
+  DisplayStatistics,
+  ShortcutKey,
+  ShortcutKeyMap,
+  Word
+} from "../../../types";
 import {emitter, EventKey} from "@/utils/eventBus.ts"
 import {cloneDeep} from "lodash-es"
 import {usePracticeStore} from "@/stores/practice.ts"
@@ -29,19 +37,11 @@ const props = withDefaults(defineProps<IProps>(), {
  index: -1
 })

-let data = $ref({
-  index: props.index,
-  words: props.words,
-  wrongWords: [],
-  originWrongWords: [],
-})
-
-let typingRef: any = $ref()
+const typingRef: any = $ref()
 const store = useBaseStore()
 const runtimeStore = useRuntimeStore()
 const practiceStore = usePracticeStore()
 const settingStore = useSettingStore()
-const playWordAudio = usePlayWordAudio()

 const {
  isWordCollect,
@@ -50,10 +50,17 @@ const {
  toggleWordSimple
 } = useWordOptions()

+let data = $ref({
+  index: props.index,
+  words: props.words,
+  wrongWords: [],
+})
+
+let stat = cloneDeep(DefaultDisplayStatistics)
+
 watch(() => props.words, () => {
  data.words = props.words
  data.index = props.index
-  data.originWrongWords = []
  data.wrongWords = []

  practiceStore.wrongWords = []
@@ -62,6 +69,8 @@ watch(() => props.words, () => {
  practiceStore.correctRate = -1
  practiceStore.inputWordNumber = 0
  practiceStore.wrongWordNumber = 0
+  stat = cloneDeep(DefaultDisplayStatistics)
+
 }, {immediate: true})

 watch(data, () => {
@@ -88,13 +97,27 @@ const nextWord: Word = $computed(() => {

 function next(isTyping: boolean = true) {
  if (data.index === data.words.length - 1) {
+
+    //复制当前错词，因为第一遍错词是最多的，后续的练习都是从错词中练习
+    if (stat.total === -1) {
+      let now = Date.now()
+      stat = {
+        startDate: practiceStore.startDate,
+        endDate: now,
+        spend: now - practiceStore.startDate,
+        total: props.words.length,
+        correctRate: -1,
+        inputWordNumber: practiceStore.inputWordNumber,
+        wrongWordNumber: data.wrongWords.length,
+        wrongWords: data.wrongWords,
+      }
+      stat.correctRate = 100 - Math.trunc(((stat.wrongWordNumber) / (stat.total)) * 100)
+    }
+
    if (data.wrongWords.length) {
      console.log('当前背完了，但还有错词')
      data.words = cloneDeep(data.wrongWords)
-      //如果原始错词没值就复制当前错词的，因为第一遍错词是最多的，后续的练习都是从错词中练习
-      if (!data.originWrongWords.length) {
-        data.originWrongWords = cloneDeep(data.wrongWords)
-      }
+
      practiceStore.total = data.words.length
      practiceStore.index = data.index = 0
      practiceStore.inputWordNumber = 0
@@ -104,17 +127,11 @@ function next(isTyping: boolean = true) {
    } else {
      console.log('这章节完了')
      isTyping && practiceStore.inputWordNumber++
+
      let now = Date.now()
-      let stat: DisplayStatistics = {
-        startDate: practiceStore.startDate,
-        endDate: now,
-        spend: now - practiceStore.startDate,
-        total: props.words.length,
-        correctRate: -1,
-        wrongWordNumber: data.originWrongWords.length,
-        wrongWords: data.originWrongWords,
-      }
-      stat.correctRate = 100 - Math.trunc(((stat.wrongWordNumber) / (stat.total)) * 100)
+      stat.endDate = now
+      stat.spend = now - stat.startDate
+
      emitter.emit(EventKey.openStatModal, stat)
    }
  } else {
--- a/src/components/Practice/Statistics.vue
+++ b/src/components/Practice/Statistics.vue
@@ -21,9 +21,12 @@ let currentStat = reactive<DisplayStatistics>(cloneDeep(DefaultDisplayStatistics

 onMounted(() => {
  emitter.on(EventKey.openStatModal, (stat: DisplayStatistics) => {
-    currentStat = {...DefaultDisplayStatistics, ...stat}
+    if (stat) {
+      currentStat = {...DefaultDisplayStatistics, ...stat}
+      store.saveStatistics(stat)
+      console.log('stat', stat)
+    }
    statModalIsOpen = true
-    store.saveStatistics(stat)
  })

  const close = () => {
@@ -68,6 +71,11 @@ const isEnd = $computed(() => {
              desc="错误数"
              :percentage="0"
          />
+          <Ring
+              :value="currentStat.inputWordNumber"
+              desc="输入数"
+              :percentage="0"
+          />
          <Ring
              :value="currentStat.total"
              desc="单词总数"
@@ -146,7 +154,7 @@ const isEnd = $computed(() => {
    .result {
      box-sizing: border-box;
      overflow: hidden;
-      height: 320rem;
+      height: 340rem;
      display: flex;
      flex-direction: column;
      border-radius: $card-radius;
--- a/src/components/Ring.vue
+++ b/src/components/Ring.vue
@@ -2,19 +2,19 @@
  <div class="ring">
    <svg height="100%" width="100%">
      <circle class="circle-full"
-              cx="50rem"
-              cy="50rem"
-              r="45rem"
+              cx="40rem"
+              cy="40rem"
+              r="35rem"
              fill="none"
-              stroke-width="8rem"
+              stroke-width="6rem"
              stroke-linecap="round"></circle>
      <circle v-if="props.percentage" ref="circleEl"
              class="circle-detail"
-              cx="50rem"
-              cy="50rem"
-              r="45rem"
+              cx="40rem"
+              cy="40rem"
+              r="35rem"
              fill="none"
-              stroke-width="8rem"
+              stroke-width="6rem"
              stroke-linecap="round"
              stroke-dasharray="0,10000"></circle>
    </svg>
@@ -46,11 +46,11 @@ onMounted(() => {
 <style scoped lang="scss">
@import "@/assets/css/variable.scss";

-$w: 100rem;
+$w: 80rem;
 $w2: calc($w / 2);

 .ring {
-  font-size: 18rem;
+  font-size: 16rem;
  width: $w;
  height: $w;
  display: flex;
@@ -58,7 +58,7 @@ $w2: calc($w / 2);
  justify-content: center;
  flex-direction: column;
  position: relative;
-  margin-bottom: 10rem;
+  margin-bottom: 6rem;

  svg {
    position: absolute;
@@ -79,7 +79,7 @@ $w2: calc($w / 2);
  }

  .desc {
-    font-size: 14rem;
+    font-size: 12rem;
    opacity: .6;
  }
 }
--- a/src/components/Toolbar/Toolbar.vue
+++ b/src/components/Toolbar/Toolbar.vue
@@ -110,7 +110,7 @@ watch(() => store.load, n => {

          <Tooltip
              :title="`切换主题(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]})`"
-           >
+          >
            <IconWrapper>
              <Icon icon="ep:moon" v-if="settingStore.theme === 'dark'"
                    @click="toggleTheme"/>
@@ -127,7 +127,8 @@ watch(() => store.load, n => {
              <Icon icon="uil:setting" @click="runtimeStore.showSettingModal = true"/>
            </IconWrapper>
          </Tooltip>
-          <!--        <div class="base-button" @click="emitter.emit(EventKey.openStatModal)">ok</div>-->
+
+<!--          <div class="base-button" @click="emitter.emit(EventKey.openStatModal)">ok</div>-->

          <Tooltip title="单词本">
            <IconWrapper>
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@@ -73,7 +73,7 @@ export default {
 .tip {
  position: fixed;
  font-size: 14rem;
-  z-index: 999;
+  z-index: 9999;
  border-radius: 4rem;
  padding: 10rem;
  color: var(--color-font-1);
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -228,18 +228,18 @@ export const useBaseStore = defineStore('base', {
                        if (res) w = Object.assign(w, res)
                      })

-                      resolve()
+                      resolve(true)
                    })
                  })
                } else {
                  this.currentDict.originWords = cloneDeep(v)
                  this.currentDict.words = cloneDeep(v)
                  this.currentDict.chapterWords = chunk(this.currentDict.words, this.currentDict.chapterWordNumber)
-                  resolve()
+                  resolve(true)
                }
              })
            } else {
-              resolve()
+              resolve(true)
            }
          }

@@ -257,10 +257,10 @@ export const useBaseStore = defineStore('base', {
                  v.id = uuidv4()
                  return v
                }))
-                resolve()
+                resolve(true)
              })
            } else {
-              resolve()
+              resolve(true)
            }
          }
        }
--- a/src/types.ts
+++ b/src/types.ts
@@ -138,6 +138,7 @@ export interface Statistics {

 export interface DisplayStatistics extends Statistics {
  wrongWords: Word[]
+  inputWordNumber: number//输入数
 }

 export const DefaultDisplayStatistics: DisplayStatistics = {
@@ -147,6 +148,7 @@ export const DefaultDisplayStatistics: DisplayStatistics = {
  total: -1,
  correctRate: -1,
  wrongWordNumber: -1,
+  inputWordNumber: -1,
  wrongWords: [],
 }