From 0f8b867f01f952cae2735d0faeb1308967670022 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Wed, 30 Aug 2023 01:08:53 +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/components/Modal/Statistics.vue | 14 +++----
 src/components/Ring.vue             | 18 +++++++--
 src/components/Side.vue             | 63 +++++++++++++++++++++--------
 src/components/Type.vue             |  8 +++-
 src/stores/base.ts                  | 46 ++++++++++++++-------
 5 files changed, 104 insertions(+), 45 deletions(-)

diff --git a/src/components/Modal/Statistics.vue b/src/components/Modal/Statistics.vue
index 7ffae0cd..fc55268d 100644
--- a/src/components/Modal/Statistics.vue
+++ b/src/components/Modal/Statistics.vue
@@ -18,13 +18,7 @@ let currentStat = reactive<Statistics>(cloneDeep(DefaultStatistics))
 onMounted(() => {
   emitter.on(EventKey.openStatModal, () => {
     statModalIsOpen = true
-    currentStat = cloneDeep(store.current.statistics)
-    currentStat.endDate = Date.now()
-    currentStat.spend = Date.now() - currentStat.startDate
-    currentStat.wrongWordNumber = store.current.originWrongWords.length
-    currentStat.correctRate = 100 - Math.trunc((currentStat.wrongWordNumber / currentStat.wordNumber) * 100)
-    console.log(cloneDeep(currentStat))
-    store.currentDict.statistics.push(currentStat)
+    currentStat = store.saveStatistics()
   })
 })
 
@@ -35,11 +29,13 @@ function write() {
 
 //TODO 需要判断是否已忽略
 function repeat() {
+  console.log(store.chapter)
   store.setCurrentWord(store.chapter, true)
   statModalIsOpen = false
   emitter.emit(EventKey.resetWord)
 }
 
+//TODO 能否下一章
 function next() {
   store.currentDict.chapterIndex++
   repeat()
@@ -111,7 +107,7 @@ function next() {
   <Fireworks v-if="statModalIsOpen"/>
 </template>
 <style scoped lang="scss">
-@import "@/assets/css/style";
+@import "@/assets/css/style.scss";
 
 .statistics {
   width: 800rem;
@@ -139,7 +135,7 @@ function next() {
     .result {
       box-sizing: border-box;
       overflow: hidden;
-      height: 310rem;
+      height: 320rem;
       display: flex;
       flex-direction: column;
       border-radius: $card-radius;
diff --git a/src/components/Ring.vue b/src/components/Ring.vue
index 3ea74533..7d1289b6 100644
--- a/src/components/Ring.vue
+++ b/src/components/Ring.vue
@@ -1,9 +1,19 @@
 <template>
   <div class="ring">
     <svg height="100%" width="100%">
-      <circle class="circle-full" cx="45rem" cy="45rem" r="40rem" fill="none" stroke-width="8rem"
+      <circle class="circle-full"
+              cx="50rem"
+              cy="50rem"
+              r="45rem"
+              fill="none"
+              stroke-width="8rem"
               stroke-linecap="round"></circle>
-      <circle v-if="props.percentage" ref="circleEl" class="circle-detail" cx="45rem" cy="45rem" r="40rem" fill="none"
+      <circle v-if="props.percentage" ref="circleEl"
+              class="circle-detail"
+              cx="50rem"
+              cy="50rem"
+              r="45rem"
+              fill="none"
               stroke-width="8rem"
               stroke-linecap="round"
               stroke-dasharray="0,10000"></circle>
@@ -36,7 +46,7 @@ onMounted(() => {
 <style scoped lang="scss">
 @import "@/assets/css/colors";
 
-$w: 90rem;
+$w: 100rem;
 $w2: calc($w / 2);
 
 .ring {
@@ -48,7 +58,7 @@ $w2: calc($w / 2);
   justify-content: center;
   flex-direction: column;
   position: relative;
-  margin-bottom: 20rem;
+  margin-bottom: 10rem;
 
   svg {
     position: absolute;
diff --git a/src/components/Side.vue b/src/components/Side.vue
index 1fffea89..011de5c0 100644
--- a/src/components/Side.vue
+++ b/src/components/Side.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import {useBaseStore} from "@/stores/base.ts"
 import WordList from "@/components/WordList.vue"
-import {ArrowLeft, ArrowRight, MenuFold} from '@icon-park/vue-next'
 
 import {$ref} from "vue/macros"
-import {computed, nextTick, onMounted, provide} from "vue"
+import {computed, onMounted, provide} from "vue"
 import {Swiper, SwiperSlide} from 'swiper/vue';
 import 'swiper/css';
 import {Swiper as SwiperClass} from "swiper/types"
-import {Dict, DictType} from "@/types.ts"
+import {DictType} from "@/types.ts"
 import PopConfirm from "@/components/PopConfirm.vue"
 import BaseButton from "@/components/BaseButton.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts"
@@ -41,6 +40,35 @@ onMounted(() => {
   })
 })
 
+function getActiveIndex(type: DictType) {
+  if (store.current.dictType !== type) return -1
+  else {
+    return store[type].chapterWordIndex
+  }
+}
+
+const newWordDictActiveIndex = computed(() => {
+  if (store.current.dictType !== DictType.newWordDict) return -1
+  else return store.current.index
+})
+
+const dictActiveIndex = computed(() => {
+  if (store.current.dictType !== DictType.inner) return -1
+  else return store.current.index
+})
+
+
+const wrongWordDictActiveIndex = computed(() => {
+  if (store.current.dictType !== DictType.wrongWordDict) return -1
+  else return store.current.index
+})
+
+
+const skipWordDictActiveIndex = computed(() => {
+  if (store.current.dictType !== DictType.skipWordDict) return -1
+  else return store.current.index
+})
+
 </script>
 <template>
   <Transition name="fade">
@@ -62,10 +90,10 @@ onMounted(() => {
               </header>
               <WordList
                   class="word-list"
-                  @change="(e:number) => store.changeDict(store.dict,-1,e)"
+                  @change="(e:number) => store.changeDict(store.dict,store.dict.chapterIndex,e)"
                   :isActive="store.sideIsOpen && tabIndex === 0"
                   :list="store.dict.chapters[store.dict.chapterIndex]??[]"
-                  :activeIndex="store.dict.chapterWordIndex"/>
+                  :activeIndex="dictActiveIndex"/>
               <footer v-if="![DictType.custom,DictType.inner].includes(store.current.dictType)">
                 <PopConfirm
                     :title="`确认切换？`"
@@ -85,11 +113,11 @@ onMounted(() => {
               </header>
               <WordList
                   class="word-list"
-                  @change="(e:number) => store.changeDict(store.newWordDict,-1,e)"
+                  @change="(e:number) => store.changeDict(store.newWordDict,store.newWordDict.chapterIndex,e)"
                   :isActive="store.sideIsOpen && tabIndex === 1"
-                  :list="store.newWordDict.originWords"
-                  :activeIndex="store.newWordDict.chapterWordIndex"/>
-              <footer v-if="store.current.dictType !== DictType.newWordDict && store.newWordDict.originWords.length">
+                  :list="store.newWordDict.words"
+                  :activeIndex="newWordDictActiveIndex"/>
+              <footer v-if="store.current.dictType !== DictType.newWordDict && store.newWordDict.words.length">
                 <PopConfirm
                     :title="`确认切换？`"
                     @confirm="store.changeDict(store.newWordDict)"
@@ -109,11 +137,12 @@ onMounted(() => {
               </header>
               <WordList
                   class="word-list"
-                  @change="(e:number) => store.changeDict(store.wrongWordDict,-1,e)"
+                  @change="(e:number) => store.changeDict(store.wrongWordDict,store.wrongWordDict.chapterIndex,e)"
                   :isActive="store.sideIsOpen && tabIndex === 2"
-                  :list="store.wrongWordDict.originWords"
-                  :activeIndex="store.wrongWordDict.chapterWordIndex"/>
-              <footer v-if="store.current.dictType !== DictType.wrongWordDict && store.wrongWordDict.originWords.length">
+                  :list="store.wrongWordDict.words"
+                  :activeIndex="wrongWordDictActiveIndex"/>
+              <footer
+                  v-if="store.current.dictType !== DictType.wrongWordDict && store.wrongWordDict.words.length">
                 <PopConfirm
                     :title="`确认切换？`"
                     @confirm="store.changeDict(store.wrongWordDict)"
@@ -132,11 +161,11 @@ onMounted(() => {
               </header>
               <WordList
                   class="word-list"
-                  @change="(e:number) => store.changeDict(store.skipWordDict,-1,e)"
+                  @change="(e:number) => store.changeDict(store.skipWordDict,store.skipWordDict.chapterIndex,e)"
                   :isActive="store.sideIsOpen && tabIndex === 3"
-                  :list="store.skipWordDict.originWords"
-                  :activeIndex="store.skipWordDict.chapterWordIndex"/>
-              <footer v-if="store.current.dictType !== DictType.skipWordDict && store.skipWordDict.originWords.length">
+                  :list="store.skipWordDict.words"
+                  :activeIndex="skipWordDictActiveIndex"/>
+              <footer v-if="store.current.dictType !== DictType.skipWordDict && store.skipWordDict.words.length">
                 <PopConfirm
                     :title="`确认切换？`"
                     @confirm="store.changeDict(store.skipWordDict)"
diff --git a/src/components/Type.vue b/src/components/Type.vue
index 7fe4127d..347e6085 100644
--- a/src/components/Type.vue
+++ b/src/components/Type.vue
@@ -118,6 +118,8 @@ async function onKeyDown(e: KeyboardEvent) {
     } else {
       if (!store.wrongWordDict.originWords.find((v: Word) => v.name === store.word.name)) {
         store.wrongWordDict.originWords.push(store.word)
+        store.wrongWordDict.words.push(store.word)
+        store.wrongWordDict.chapters = [store.wrongWordDict.words]
       }
       if (!store.current.wrongWords.find((v: Word) => v.name === store.word.name)) {
         store.current.wrongWords.push(store.word)
@@ -148,12 +150,16 @@ async function onKeyDown(e: KeyboardEvent) {
       case keyMap.Collect:
         if (!store.newWordDict.originWords.find((v: Word) => v.name === store.word.name)) {
           store.newWordDict.originWords.push(store.word)
+          store.newWordDict.words.push(store.word)
+          store.newWordDict.chapters = [store.newWordDict.words]
         }
         activeIndex = 1
         break
       case keyMap.Remove:
         if (!store.skipWordNames.includes(store.word.name)) {
           store.skipWordDict.originWords.push(store.word)
+          store.skipWordDict.words.push(store.word)
+          store.skipWordDict.chapters = [store.skipWordDict.words]
         }
         activeIndex = 0
         next()
@@ -243,7 +249,7 @@ onUnmounted(() => {
           <div class="name">时间</div>
         </div>
         <div class="row">
-          <div class="num">{{ store.current.statistics.wordNumber }}</div>
+          <div class="num">{{ store.current.words.length }}</div>
           <div class="line"></div>
           <div class="name">单词总数</div>
         </div>
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 38f6fe5d..98e1483e 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -138,7 +138,7 @@ export const useBaseStore = defineStore('base', {
       }
       // console.log('this/', this)
     },
-    setCurrentWord(words: Word[], restart: boolean = false) {
+    setCurrentWord(words: Word[], restart: boolean = false, index: number = 0) {
       this.current.words = cloneDeep(words)
       if (restart) {
         this.current.repeatNumber = 0
@@ -159,7 +159,7 @@ export const useBaseStore = defineStore('base', {
         this.current.statistics.correctRate = -1
         this.current.statistics.wrongWordNumber = -1
       }
-      this.current.index = 0
+      this.current.index = index
       this.current.wrongWords = []
     },
     async init() {
@@ -173,28 +173,46 @@ export const useBaseStore = defineStore('base', {
         r.json().then(v => {
           this.dict.originWords = cloneDeep(v)
           this.dict.words = cloneDeep(v)
-          this.dict.chapters = chunk(this.dict.originWords, this.dict.chapterWordNumber)
+          this.dict.chapters = chunk(this.dict.words, this.dict.chapterWordNumber)
           this.setCurrentWord(this.chapter, true)
         })
       }
     },
-    async changeDict(dict: Dict, chapterIndex: number = -1, chapterWordIndex: number = -1) {
-      console.log('changeDict', dict)
-      emitter.emit(EventKey.resetWord)
+    saveStatistics() {
+      let currentStat = cloneDeep(this.current.statistics)
+      currentStat.endDate = Date.now()
+      currentStat.spend = Date.now() - currentStat.startDate
+      currentStat.wrongWordNumber = this.current.originWrongWords.length
+      currentStat.correctRate = 100 - Math.trunc((currentStat.wrongWordNumber / currentStat.wordNumber) * 100)
+      // console.log(cloneDeep(currentStat))
+      if (currentStat.spend > 1000 * 10) {
+        this.currentDict.statistics.push(currentStat)
+      }
+      return currentStat
+    },
+    async changeDict(dict: Dict, chapterIndex: number = dict.chapterIndex, chapterWordIndex: number = dict.chapterWordNumber) {
+      this.saveStatistics()
+      console.log('changeDict', cloneDeep(dict), chapterIndex, chapterWordIndex)
+      this.current.dictType = dict.type
       if ([DictType.newWordDict,
         DictType.skipWordDict,
         DictType.wrongWordDict].includes(dict.type)) {
-        this.current.dictType = dict.type
-        this[dict.type].chapters = [this[dict.type].wordList]
-        this[dict.type].chapterIndex = 0
-        this[dict.type].chapterWordIndex = chapterWordIndex === -1 ? 0 : chapterWordIndex
+        this[dict.type].chapterIndex = chapterIndex
+        this[dict.type].chapterWordIndex = chapterWordIndex
       } else {
         this.dict = cloneDeep(dict)
-        this.current.dictType = dict.type
-        if (chapterWordIndex !== -1) this.dict.chapterWordIndex = chapterWordIndex
-        if (chapterIndex !== -1) this.dict.chapterIndex = chapterIndex
+        if (dict.originWords.length) {
+          let r = await fetch(`/public/${this.dict.url}`)
+          let v = await r.json()
+          this.dict.originWords = cloneDeep(v)
+          this.dict.words = cloneDeep(v)
+          this.dict.chapters = chunk(this.dict.words, this.dict.chapterWordNumber)
+        }
+        this.dict.chapterIndex = chapterIndex
+        this.dict.chapterWordIndex = chapterWordIndex
       }
-      console.log('this.dict', this.dict)
+      this.setCurrentWord(this.chapter, true, chapterWordIndex)
+      emitter.emit(EventKey.resetWord)
     }
   },
 })
\ No newline at end of file