From 3dc60a04ef84113098981dd2d20fa4db54fcdfd9 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Fri, 24 May 2024 17:30:39 +0800
Subject: [PATCH] save

---
 src/hooks/dict.ts                             |  8 ++--
 src/pages/pc/components/dialog/DictDiglog.vue | 39 +++-------------
 .../pc/components/dialog/WordListDialog.vue   |  2 +-
 src/pages/pc/components/toolbar/index.vue     |  2 +-
 src/pages/pc/practice/practice-word/index.vue |  6 +--
 .../index.vue => word/StudyWord.vue}          | 45 +++++++++++++++++--
 src/pages/pc/word/WordHome.vue                |  4 +-
 src/router.ts                                 |  4 +-
 src/stores/base.ts                            |  2 +-
 9 files changed, 62 insertions(+), 50 deletions(-)
 rename src/pages/pc/{practice/index.vue => word/StudyWord.vue} (80%)

diff --git a/src/hooks/dict.ts b/src/hooks/dict.ts
index e98e3533..efe3df57 100644
--- a/src/hooks/dict.ts
+++ b/src/hooks/dict.ts
@@ -71,15 +71,15 @@ export function useArticleOptions() {
   const store = useBaseStore()
 
   function isArticleCollect(val: Article) {
-    return !!store.collect.articles.find(v => v.title.toLowerCase() === val.title.toLowerCase())
+    return !!store.collectArticle.find(v => v.title.toLowerCase() === val.title.toLowerCase())
   }
 
   function toggleArticleCollect(val: Article) {
-    let rIndex = store.collect.articles.findIndex(v => v.title.toLowerCase() === val.title.toLowerCase())
+    let rIndex = store.collectArticle.findIndex(v => v.title.toLowerCase() === val.title.toLowerCase())
     if (rIndex > -1) {
-      store.collect.articles.splice(rIndex, 1)
+      store.collectArticle.splice(rIndex, 1)
     } else {
-      store.collect.articles.push(val)
+      store.collectArticle.push(val)
     }
   }
 
diff --git a/src/pages/pc/components/dialog/DictDiglog.vue b/src/pages/pc/components/dialog/DictDiglog.vue
index 8e02c0a0..6e2b36a4 100644
--- a/src/pages/pc/components/dialog/DictDiglog.vue
+++ b/src/pages/pc/components/dialog/DictDiglog.vue
@@ -15,23 +15,15 @@ import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
 import {useRouter} from "vue-router";
 
 const store = useBaseStore()
-const settingStore = useSettingStore()
 const runtimeStore = useRuntimeStore()
-let router = useRouter()
 
 let show = $ref(false)
 let chapterWordNumber = $ref(0)
-let toggleLoading = $ref(false)
-
 
 function close() {
   show = false
 }
 
-const dictIsArticle = $computed(() => {
-  return isArticle(runtimeStore.editDict.type)
-})
-
 function showAllWordModal() {
   emitter.emit(EventKey.openWordListModal, {
     title: runtimeStore.editDict.name,
@@ -52,13 +44,6 @@ function resetChapterList(v: number) {
   }
 }
 
-function option(type: string) {
-  show = false
-  setTimeout(() => {
-    router.push({path: '/pc/dict', query: {type: type}})
-  }, 500)
-}
-
 onMounted(() => {
   emitter.on(EventKey.openDictModal, (typ) => {
     show = true
@@ -76,7 +61,7 @@ onMounted(() => {
     <div id="DictDialog">
       <header>
         <div class="text-2xl">
-          {{ store.currentDict.name }}
+          {{ store.currentStudyWordDict.name }}
         </div>
         <Icon @click="close"
               class="hvr-grow pointer"
@@ -84,18 +69,12 @@ onMounted(() => {
               icon="ion:close-outline"/>
       </header>
       <div class="detail">
-        <div class="desc">{{ store.currentDict.description }}</div>
-        <div class="text flex align-center">
-          <div v-if="dictIsArticle">总文章：{{ store.currentDict.articles.length }}篇
-          </div>
-          <div v-else>总词汇：
-            <span class="count" @click="showAllWordModal">{{
-                store.currentDict.originWords.length
-              }}词</span>
-          </div>
-          <BaseIcon icon="mi:add"
-                    @click='option("addWordOrArticle")'
-                    :title="`添加${dictIsArticle?'文章':'单词'}`"
+        <div class="desc">{{ store.currentStudyWordDict.description }}</div>
+        <div class="text flex align-center gap-2">
+          <div>总词汇： {{ store.currentStudyWordDict.originWords.length }}词</div>
+          <BaseIcon icon="circum:view-list"
+                    @click='showAllWordModal'
+                    title="单词列表"
           />
         </div>
         <div class="text">开始日期：-</div>
@@ -189,10 +168,6 @@ $header-height: 4rem;
       margin-bottom: 1.2rem;
     }
 
-    .count {
-      cursor: pointer;
-      border-bottom: 2px solid var(--color-item-active);
-    }
 
     :deep(.edit-icon) {
       position: absolute;
diff --git a/src/pages/pc/components/dialog/WordListDialog.vue b/src/pages/pc/components/dialog/WordListDialog.vue
index 057563ed..c2f27721 100644
--- a/src/pages/pc/components/dialog/WordListDialog.vue
+++ b/src/pages/pc/components/dialog/WordListDialog.vue
@@ -53,7 +53,7 @@ onUnmounted(() => {
 .all-word {
   padding-bottom: var(--space);
   padding-top: 0;
-  width: 400rem;
+  width: 30rem;
   height: 75vh;
   display: flex;
 }
diff --git a/src/pages/pc/components/toolbar/index.vue b/src/pages/pc/components/toolbar/index.vue
index c62ed86d..7564b434 100644
--- a/src/pages/pc/components/toolbar/index.vue
+++ b/src/pages/pc/components/toolbar/index.vue
@@ -65,7 +65,7 @@ const {nav} = useNav()
         <Tooltip
             :title="`词典详情(${settingStore.shortcutKeyMap[ShortcutKey.OpenDictDetail]})`">
           <div class="info" @click="emitter.emit(EventKey.openDictModal,'detail')">
-            {{ store.currentDict.name }} {{ practiceStore.repeatNumber ? '  复习错词' : '' }}
+            {{ store.currentStudyWordDict.name }} {{ practiceStore.repeatNumber ? '  复习错词' : '' }}
           </div>
         </Tooltip>
         <BaseIcon title="切换词典"
diff --git a/src/pages/pc/practice/practice-word/index.vue b/src/pages/pc/practice/practice-word/index.vue
index ba87909f..e4e3e387 100644
--- a/src/pages/pc/practice/practice-word/index.vue
+++ b/src/pages/pc/practice/practice-word/index.vue
@@ -12,8 +12,6 @@ import {useSettingStore} from "@/stores/setting.ts";
 import {syncMyDictList} from "@/hooks/dict.ts";
 
 const store = useBaseStore()
-const runtimeStore = useRuntimeStore()
-const settingStore = useSettingStore()
 
 let wordData = $ref({
   words: [],
@@ -21,9 +19,9 @@ let wordData = $ref({
 })
 
 function getCurrentPractice() {
-  if (store.currentWordDict.words?.length) {
+  if (store.currentStudyWordDict.words?.length) {
     wordData.index = 0
-    wordData.words = cloneDeep(store.currentWordDict.words.slice(store.currentStudy.word.lastLearnIndex, store.currentStudy.word.lastLearnIndex + store.currentStudy.word.perDayStudyNumber))
+    wordData.words = cloneDeep(store.currentStudyWordDict.words.slice(store.currentStudy.word.lastLearnIndex, store.currentStudy.word.lastLearnIndex + store.currentStudy.word.perDayStudyNumber))
     emitter.emit(EventKey.resetWord)
   }
 }
diff --git a/src/pages/pc/practice/index.vue b/src/pages/pc/word/StudyWord.vue
similarity index 80%
rename from src/pages/pc/practice/index.vue
rename to src/pages/pc/word/StudyWord.vue
index 6031a64f..7845a520 100644
--- a/src/pages/pc/practice/index.vue
+++ b/src/pages/pc/word/StudyWord.vue
@@ -13,12 +13,15 @@ import {useRuntimeStore} from "@/stores/runtime.ts";
 import {MessageBox} from "@/utils/MessageBox.tsx";
 import PracticeArticle from "@/pages/pc/practice/practice-article/index.vue";
 import PracticeWord from "@/pages/pc/practice/practice-word/index.vue";
-import {ShortcutKey} from "@/types.ts";
+import {ShortcutKey, Word} from "@/types.ts";
 import DictModal from "@/pages/pc/components/dialog/DictDiglog.vue";
 import {useStartKeyboardEventListener} from "@/hooks/event.ts";
 import useTheme from "@/hooks/theme.ts";
 import Logo from "@/pages/pc/components/Logo.vue";
 import {Icon} from "@iconify/vue";
+import TypingWord from "@/pages/pc/practice/practice-word/TypingWord.vue";
+import {cloneDeep} from "lodash-es";
+import {syncMyDictList} from "@/hooks/dict.ts";
 
 const practiceStore = usePracticeStore()
 const store = useBaseStore()
@@ -60,7 +63,7 @@ function write() {
 function repeat() {
   // console.log('repeat')
   emitter.emit(EventKey.resetWord)
-  practiceRef.getCurrentPractice()
+  getCurrentPractice()
 }
 
 function prev() {
@@ -137,13 +140,49 @@ onUnmounted(() => {
   emitter.off(ShortcutKey.TogglePanel, togglePanel)
 })
 
+
+let wordData = $ref({
+  words: [],
+  index: -1
+})
+
+function getCurrentPractice() {
+  if (store.currentStudyWordDict.words?.length) {
+    wordData.index = 0
+    wordData.words = cloneDeep(store.currentStudyWordDict.words.slice(store.currentStudy.word.lastLearnIndex, store.currentStudy.word.lastLearnIndex + store.currentStudy.word.perDayStudyNumber))
+    emitter.emit(EventKey.resetWord)
+  }
+}
+
+//TODO wait
+function sort(list: Word[]) {
+  store.currentDict.chapterWords[store.currentDict.chapterIndex] = wordData.words = list
+  wordData.index = 0
+  syncMyDictList(store.currentDict)
+}
+
+onMounted(() => {
+  getCurrentPractice()
+  emitter.on(EventKey.changeDict, getCurrentPractice)
+})
+
+onUnmounted(() => {
+  emitter.off(EventKey.changeDict, getCurrentPractice)
+})
+
+
 useStartKeyboardEventListener()
 
 </script>
 <template>
   <div class="practice-wrapper">
     <Toolbar/>
-    <PracticeWord ref="practiceRef"/>
+    <div class="flex flex-1">
+      <TypingWord
+          @sort="sort"
+          v-model:words="wordData.words"
+          :index="wordData.index"/>
+    </div>
     <Footer/>
   </div>
   <DictModal/>
diff --git a/src/pages/pc/word/WordHome.vue b/src/pages/pc/word/WordHome.vue
index fe4ffb9a..86d88705 100644
--- a/src/pages/pc/word/WordHome.vue
+++ b/src/pages/pc/word/WordHome.vue
@@ -43,12 +43,12 @@ function clickEvent(e) {
         <div class="card ">
           <div class="flex justify-between items-center">
             <div class="bg-slate-200 p-3 rounded-md cursor-pointer flex items-center">
-              <span class="text-lg font-bold">{{ base.currentWordDict.name }}</span>
+              <span class="text-lg font-bold">{{ base.currentStudyWordDict.name }}</span>
               <Icon icon="gg:arrows-exchange" class="text-2xl ml-2"/>
               <Icon icon="uil:setting" class="text-2xl ml-2"/>
             </div>
             <div class="rounded-xl bg-slate-800 flex items-center py-3 px-5 text-white cursor-pointer"
-                 @click="router.push('/practice')">
+                 @click="router.push('study-word')">
               开始学习
             </div>
           </div>
diff --git a/src/router.ts b/src/router.ts
index 5e165c46..fe2d1db9 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,6 +1,5 @@
 import * as VueRouter from 'vue-router'
 import {RouteRecordRaw} from 'vue-router'
-import Practice from "@/pages/pc/practice/index.vue";
 import Dict from '@/pages/pc/dict/index.vue'
 import Mobile from '@/pages/mobile/index.vue'
 import MobilePractice from '@/pages/mobile/practice/index.vue'
@@ -24,6 +23,7 @@ import ArticleIndex from "@/pages/pc/article/ArticleIndex.vue";
 import HomeIndex from "@/pages/pc/home/HomeIndex.vue";
 import LearnArticle from "@/pages/pc/article/LearnArticle.vue";
 import EditWordDict from "@/pages/pc/word/EditWordDict.vue";
+import StudyWord from "@/pages/pc/word/StudyWord.vue";
 
 export const routes: RouteRecordRaw[] = [
   {
@@ -32,9 +32,9 @@ export const routes: RouteRecordRaw[] = [
     children: [
       {path: 'home', component: HomeIndex},
       {path: 'word', component: WordHome},
+      {path: 'study-word', component: StudyWord},
       {path: 'edit-word-dict', component: EditWordDict},
       {path: 'dict', component: Dict2},
-      {path: 'practice', component: Practice},
       {path: 'article', component: ArticleIndex},
       {path: 'learn-article', component: LearnArticle},
     ]
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 9a06ec81..e92f9ecf 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -260,7 +260,7 @@ export const useBaseStore = defineStore('base', {
     currentDict(): Dict {
       return this.myDictList[this.current.index] ?? {}
     },
-    currentWordDict(): Dict {
+    currentStudyWordDict(): Dict {
       return this.wordDictList[this.currentStudy.word.dictIndex] ?? {}
     },
     currentArticleDict(): Dict {