chore: save

README.md

@@ -5,4 +5,5 @@ bug
 打完一段的一最后一行的时候，没有自动换行，需要按下空格才能换段
 打完了没检测到
 
-所有的图标hover时，有放大效果
+所有的图标hover时，有放大效果
+各种声音可以单独调节音量大小

src/components/Practice/AddArticle.vue

@@ -4,18 +4,15 @@ import {onMounted, reactive, watch} from "vue";
 import {Article, Sentence, TranslateEngine} from "@/types.ts";
 import BaseButton from "@/components/BaseButton.vue";
 import {
-  getSentenceAllTranslateText,
-  updateLocalSentenceTranslate,
   getNetworkTranslate,
-  getSentenceAllText
+  getSentenceAllText,
+  getSentenceAllTranslateText,
+  updateLocalSentenceTranslate
 } from "@/hooks/translate.ts";
 import * as copy from "copy-to-clipboard";
-import {CnKeyboardMap, getSplitTranslateText, splitArticle, splitCNArticle} from "@/hooks/article.ts";
-import {Action,} from "element-plus";
-import useSleep from "@/hooks/useSleep.ts";
+import {getSplitTranslateText, splitArticle} from "@/hooks/article.ts";
 import EditAbleText from "@/components/EditAbleText.vue";
 import {Icon} from "@iconify/vue";
-import Backgorund from "@/components/Backgorund.vue";
 
 let article1 = `How does the older investor differ in his approach to investment from the younger investor?
 There is no shortage of tipsters around offering 'get-rich-quick' opportunities. But if you are a serious private investor, leave the Las Vegas mentality to those with money to fritter. The serious investor needs a proper 'portfolio' -- a well-planned selection of investments, with a definite structure and a clear aim. But exactly how does a newcomer to the stock market go about achieving that?
@@ -375,7 +372,7 @@ watch(() => article.translateType, () => {
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      gap: $space / 2;
+      gap: calc($space / 2);
     }
 
     .el-progress {

src/components/Practice/Practice.vue

@@ -1144,7 +1144,6 @@ onMounted(() => {
 
 })
 
-
 </script>
 
 <template>

src/components/Practice/Statistics.vue

@@ -22,7 +22,15 @@ const practiceStore = usePracticeStore()
 onMounted(() => {
   emitter.on(EventKey.openStatModal, () => {
     statModalIsOpen = true
-    currentStat = store.saveStatistics()
+    let now = Date.now()
+    currentStat = {
+      startDate: practiceStore.startDate,
+      endDate: now,
+      spend: now - practiceStore.startDate,
+      total: -1,
+      correctRate: -1,
+      wrongWordNumber: -1,
+    }
   })
 })
 
@@ -65,7 +73,7 @@ function next() {
               :percentage="0"
           />
           <Ring
-              :value="currentStat.wordNumber"
+              :value="currentStat.total"
               desc="单词总数"
               :percentage="0"
               style="margin-bottom: 0;"/>
@@ -88,7 +96,7 @@ function next() {
             <Icon class="hvr-grow pointer" icon="ph:share-light" width="20" color="#929596"/>
           </Tooltip>
           <Tooltip title="请我喝杯咖啡">
-            <Icon class="hvr-grow pointer"  icon="twemoji:teacup-without-handle" width="20" color="#929596"/>
+            <Icon class="hvr-grow pointer" icon="twemoji:teacup-without-handle" width="20" color="#929596"/>
           </Tooltip>
         </div>
       </div>

src/components/Practice/TypeArticle.vue

@@ -4,10 +4,10 @@ import {$ref} from "vue/macros";
 import {Article, ArticleWord, ShortKeyMap, Word} from "@/types";
 import {useBaseStore} from "@/stores/base";
 import {usePracticeStore} from "@/components/Practice/usePracticeStore.ts";
-import {useEventListener} from "@/hooks/useEvent.ts";
 import TypeWord from "@/components/Practice/TypeWord.vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import {usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio} from "@/hooks/sound.ts";
+import {useEventListener} from "@/hooks/event.ts";
 
 let article1 = `How does the older investor differ in his approach to investment from the younger investor?
 There is no shortage of tipsters around offering 'get-rich-quick' opportunities. But if you are a serious private investor, leave the Las Vegas mentality to those with money to fritter. The serious investor needs a proper 'portfolio' -- a well-planned selection of investments, with a definite structure and a clear aim. But exactly how does a newcomer to the stock market go about achieving that?

src/components/Practice/TypeWord.vue

@@ -7,9 +7,9 @@ import BaseButton from "@/components/BaseButton.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts"
 import {cloneDeep} from "lodash-es"
 import {usePracticeStore} from "@/components/Practice/usePracticeStore.ts"
-import {useEventListener} from "@/hooks/useEvent.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio} from "@/hooks/sound.ts";
+import {useEventListener} from "@/hooks/event.ts";
 
 interface IProps {
   words: Word[],
@@ -93,8 +93,16 @@ function next() {
       data.wrongWords = []
     } else {
       console.log('这章节完了')
-      practiceStore.wrongWords = cloneDeep(data.originWrongWords)
-      emitter.emit(EventKey.openStatModal)
+
+      let now = Date.now()
+      emitter.emit(EventKey.openStatModal, {
+        startDate: practiceStore.startDate,
+        endDate: now,
+        spend: now - practiceStore.startDate,
+        total: props.words.length,
+        correctRate: -1,
+        wrongWordNumber: data.originWrongWords.length,
+      })
     }
   } else {
     data.index++

src/hooks/event.ts

@@ -2,11 +2,27 @@ import {onMounted, onUnmounted} from "vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 
 export function useWindowClick(cb: () => void) {
-  onMounted(() => {
-    emitter.on(EventKey.closeOther, cb)
-    window.addEventListener('click', cb)
-  })
-  onUnmounted(() => {
-    window.removeEventListener('click', cb)
-  })
+    onMounted(() => {
+        emitter.on(EventKey.closeOther, cb)
+        window.addEventListener('click', cb)
+    })
+    onUnmounted(() => {
+        window.removeEventListener('click', cb)
+    })
+}
+
+export function useEventListener(type: string, listener: EventListenerOrEventListenerObject) {
+    onMounted(() => window.addEventListener(type, listener))
+    onUnmounted(() => window.removeEventListener(type, listener))
+}
+
+export function useEsc(can: boolean) {
+    onMounted(() => {
+        window.addEventListener('keyup', (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && can) {
+                close()
+            }
+        })
+    })
+    return []
 }

src/hooks/useEsc.ts

@@ -1,12 +0,0 @@
-import {onMounted} from "vue"
-
-export function useEsc(can: boolean) {
-    onMounted(() => {
-        window.addEventListener('keyup', (e: KeyboardEvent) => {
-            if (e.key === 'Escape' && can) {
-                close()
-            }
-        })
-    })
-    return []
-}

src/hooks/useEvent.ts

@@ -1,7 +0,0 @@
-// event.js
-import {onMounted, onUnmounted} from 'vue'
-
-export function useEventListener(type: string, listener: EventListenerOrEventListenerObject) {
-  onMounted(() => window.addEventListener(type, listener))
-  onUnmounted(() => window.removeEventListener(type, listener))
-}

src/stores/base.ts

@@ -74,7 +74,7 @@ export const useBaseStore = defineStore('base', {
           startDate: -1,
           endDate: -1,
           spend: -1,
-          wordNumber: -1,
+          total: -1,
           correctRate: -1,
           wrongWordNumber: -1,
         }

src/types.ts

@@ -146,7 +146,7 @@ export interface Statistics {
   startDate: number,//开始日期
   endDate: number//结束日期
   spend: number,//花费时间
-  wordNumber: number//单词数量
+  total: number//单词数量
   correctRate: number//正确率
   wrongWordNumber: number//错误数
 }
@@ -155,7 +155,7 @@ export const DefaultStatistics: Statistics = {
   startDate: Date.now(),
   endDate: -1,
   spend: -1,
-  wordNumber: -1,
+  total: -1,
   correctRate: -1,
   wrongWordNumber: -1,
 }

src/vite-env.d.ts

@@ -9,14 +9,19 @@ import {ElMessageBox} from "element-plus";
 
 
 declare module '*.mp3' {
-  const src: string;
-  export default src;
+    const src: string;
+    export default src;
+}
+
+declare module '*.wav' {
+    const src: string;
+    export default src;
 }
 
 declare module "*.vue" {
-  import type {DefineComponent} from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+    import type {DefineComponent} from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
 }
 
 // declare module '*.vue' {

tsconfig.json

@@ -35,7 +35,9 @@
     //For TS to resolve aliases, they should be added in tsconfig.json under compilerOptions.paths:
     // https://betterprogramming.pub/the-right-usage-of-aliases-in-webpack-typescript-4418327f47fa
     "paths": {
-      "@/*": ["*"]
+      "@/*": [
+        "*"
+      ]
     }
   },
   "include": [
@@ -43,7 +45,8 @@
     "src/**/*.d.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
-    "auto-imports.d.ts"
+    "auto-imports.d.ts",
+    "src/vite-env.d.ts"
   ],
   "references": [
     {