save

src/pages/pc/components/dialog/Dialog.vue

@@ -331,11 +331,10 @@ $header-height: 4rem;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 1rem 1.6rem;
+      padding: .5rem 1.6rem;
       color: #fff;
       font-size: 1.1rem;
       background: rgba(0, 0, 0, .2);
-      border-radius: 0 0 1.6rem 1.6rem;
 
       .left {
         display: flex;

src/pages/pc/components/practice-word/Typing.vue

@@ -48,7 +48,7 @@ watch(() => props.word, () => {
   if (settingStore.wordSound) {
     volumeIconRef?.play(400, true)
   }
-})
+}, {deep: true})
 
 onMounted(() => {
   emitter.on(EventKey.resetWord, () => {

src/pages/pc/components/practice-word/TypingWord.vue

@@ -94,15 +94,16 @@ function next(isTyping: boolean = true) {
   if (current.index === current.words.length - 1) {
     if (current.wrongWords.length) {
       console.log('学完了，但还有错词')
-      current.words = shuffle(current.wrongWords)
+      current.words = shuffle(cloneDeep(current.wrongWords))
       current.index = 0
       current.wrongWords = []
     } else {
-      console.log('学完了，没错词', statStore.total, statStore.step, current.index, current.words)
+      console.log('学完了，没错词', statStore.total, statStore.step, current.index)
       isTyping && statStore.inputWordNumber++
       statStore.speed = Date.now() - statStore.startDate
 
       if (statStore.step === 2) {
+        console.log('emit')
         emitter.emit(EventKey.openStatModal, {})
         // emit('complete', {})
       }

src/pages/pc/word/Statistics.vue

@@ -6,7 +6,7 @@ import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import Fireworks from "@/pages/pc/components/Fireworks.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import {ShortcutKey} from "@/types.ts";
-import {emitter, EventKey} from "@/utils/eventBus.ts";
+import {emitter, EventKey, useEvent} from "@/utils/eventBus.ts";
 import {onMounted} from "vue";
 import {Icon} from '@iconify/vue';
 import {useSettingStore} from "@/stores/setting.ts";
@@ -18,31 +18,30 @@ const settingStore = useSettingStore()
 const statStore = usePracticeStore()
 let open = $ref(false)
 
-onMounted(() => {
-  emitter.on(EventKey.openStatModal, () => {
-    let data = {
-      startIndex: store.currentStudyWordDict.lastLearnIndex,
-      endIndex: store.currentStudyWordDict.lastLearnIndex + store.currentStudyWordDict.perDayStudyNumber,
-      speed: statStore.speed,
-      startDate: statStore.startDate,
-    }
-    store.currentStudyWordDict.lastLearnIndex = data.endIndex
-    store.currentStudyWordDict.statistics.push(data as any)
-    store.currentStudyWordDict.statistics.sort((a, b) => a.startDate - b.startDate)
+useEvent(EventKey.openStatModal, () => {
+  console.log('on')
 
-    console.log('staa', JSON.parse(JSON.stringify(store.currentStudyWordDict.statistics)))
-    open = true
-  })
-
-  const close = () => {
-    open = false
+  let data = {
+    startIndex: store.currentStudyWordDict.lastLearnIndex,
+    endIndex: store.currentStudyWordDict.lastLearnIndex + store.currentStudyWordDict.perDayStudyNumber,
+    speed: statStore.speed,
+    startDate: statStore.startDate,
   }
+  store.currentStudyWordDict.lastLearnIndex = data.endIndex
+  store.currentStudyWordDict.statistics.push(data as any)
+  store.currentStudyWordDict.statistics.sort((a, b) => a.startDate - b.startDate)
 
-  emitter.on(ShortcutKey.NextChapter, close)
-  emitter.on(ShortcutKey.RepeatChapter, close)
-  emitter.on(ShortcutKey.DictationChapter, close)
+  console.log('staa', JSON.parse(JSON.stringify(store.currentStudyWordDict.statistics)))
+  open = true
 })
 
+const close = () => {
+  open = false
+}
+
+useEvent(ShortcutKey.NextChapter, close)
+useEvent(ShortcutKey.RepeatChapter, close)
+useEvent(ShortcutKey.DictationChapter, close)
 
 function options(emitType: 'write' | 'repeat' | 'next') {
   open = false
@@ -50,9 +49,7 @@ function options(emitType: 'write' | 'repeat' | 'next') {
 }
 
 const isEnd = $computed(() => {
-  return store.isArticle ?
-      store.currentDict.chapterIndex === store.currentDict.articles.length - 1 :
-      store.currentDict.chapterIndex === store.currentDict.chapterWords.length - 1
+  return false
 })
 
 </script>

src/pages/pc/word/StudyWord.vue

@@ -7,7 +7,7 @@ import Footer from "@/pages/pc/word/Footer.vue";
 import {useBaseStore} from "@/stores/base.ts";
 
 import Statistics from "@/pages/pc/word/Statistics.vue";
-import {emitter, EventKey} from "@/utils/eventBus.ts";
+import {emitter, EventKey, useEvent} from "@/utils/eventBus.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {ShortcutKey, Word} from "@/types.ts";
@@ -73,45 +73,26 @@ function togglePanel() {
   settingStore.showPanel = !settingStore.showPanel
 }
 
-onMounted(() => {
-  emitter.on(EventKey.repeat, repeat)
-  emitter.on(EventKey.next, next)
-
-  emitter.on(ShortcutKey.RepeatChapter, repeat)
-  emitter.on(ShortcutKey.ToggleShowTranslate, toggleTranslate)
-  emitter.on(ShortcutKey.ToggleDictation, toggleDictation)
-  emitter.on(ShortcutKey.OpenSetting, openSetting)
-  emitter.on(ShortcutKey.OpenDictDetail, openDictDetail)
-  emitter.on(ShortcutKey.ToggleTheme, toggleTheme)
-  emitter.on(ShortcutKey.ToggleConciseMode, toggleConciseMode)
-  emitter.on(ShortcutKey.TogglePanel, togglePanel)
-})
-
-onUnmounted(() => {
-  emitter.off(EventKey.repeat, repeat)
-  emitter.off(EventKey.next, next)
-
-  emitter.off(ShortcutKey.RepeatChapter, repeat)
-  emitter.off(ShortcutKey.ToggleShowTranslate, toggleTranslate)
-  emitter.off(ShortcutKey.ToggleDictation, toggleDictation)
-  emitter.off(ShortcutKey.OpenSetting, openSetting)
-  emitter.off(ShortcutKey.OpenDictDetail, openDictDetail)
-  emitter.off(ShortcutKey.ToggleTheme, toggleTheme)
-  emitter.off(ShortcutKey.ToggleConciseMode, toggleConciseMode)
-  emitter.off(ShortcutKey.TogglePanel, togglePanel)
-})
-
 onMounted(() => {
   settingStore.dictation = false
   if (runtimeStore.routeData) {
     data = runtimeStore.routeData
   }
-  emitter.on(EventKey.changeDict, getCurrentPractice)
 })
 
-onUnmounted(() => {
-  emitter.off(EventKey.changeDict, getCurrentPractice)
-})
+useEvent(EventKey.changeDict, getCurrentPractice)
+
+useEvent(EventKey.repeat, repeat)
+useEvent(EventKey.next, next)
+
+useEvent(ShortcutKey.RepeatChapter, repeat)
+useEvent(ShortcutKey.ToggleShowTranslate, toggleTranslate)
+useEvent(ShortcutKey.ToggleDictation, toggleDictation)
+useEvent(ShortcutKey.OpenSetting, openSetting)
+useEvent(ShortcutKey.OpenDictDetail, openDictDetail)
+useEvent(ShortcutKey.ToggleTheme, toggleTheme)
+useEvent(ShortcutKey.ToggleConciseMode, toggleConciseMode)
+useEvent(ShortcutKey.TogglePanel, togglePanel)
 
 let data = $ref({
   new: [],
@@ -125,7 +106,6 @@ function getCurrentPractice() {
 
 function complete() {
   // store.currentStudyWordDict.statistics.push()
-
 }
 
 useStartKeyboardEventListener()

src/pages/pc/word/WordHome.vue

@@ -5,6 +5,7 @@ import {ActivityCalendar} from "vue-activity-calendar";
 import "vue-activity-calendar/style.css";
 import {useRouter} from "vue-router";
 import BaseIcon from "@/components/BaseIcon.vue";
+import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
 import {useNav} from "@/utils";
 import BasePage from "@/pages/pc/components/BasePage.vue";
 import {getDefaultDict} from "@/types.ts";
@@ -49,6 +50,8 @@ function study() {
   nav('study-word', {}, currentStudy)
 }
 
+let show = $ref(false)
+let tempPerDayStudyNumber = $ref(0)
 </script>
 
 <template>
@@ -57,7 +60,7 @@ function study() {
       <div class="flex-1">
         <div class="flex gap-5">
           <div class="bg-slate-200 px-3 h-14 rounded-md flex items-center">
-            <span class="text-xl font-bold">{{ store.currentStudyWordDict.name }}</span>
+            <span class="text-xl font-bold">{{ store.sdict.name }}</span>
             <BaseIcon
                 title="切换词典"
                 icon="gg:arrows-exchange"
@@ -74,11 +77,13 @@ function study() {
                   <div style="color:#ac6ed1;" class="cursor-pointer" v-if="false">
                     更改目标
                   </div>
-                  <div class="text-xs">学习 {{ store.currentStudyWordDict.perDayStudyNumber }} 个单词</div>
+                  <div class="text-xs">学习 {{ store.sdict.perDayStudyNumber }} 个单词</div>
                 </div>
               </div>
-              <div class="bg-slate-200 w-10 h-10 flex center text-2xl rounded">
-                {{ store.currentStudyWordDict.perDayStudyNumber }}
+              <div
+                  @click="show = true;tempPerDayStudyNumber = store.sdict.perDayStudyNumber"
+                  class="bg-slate-200 w-10 h-10 flex center text-2xl rounded cursor-pointer">
+                {{ store.sdict.perDayStudyNumber }}
               </div>
             </div>
             <div class="mt-2">
@@ -89,7 +94,9 @@ function study() {
         <div class="mt-2">
           <div class="text-sm flex justify-between">
             已学习{{ store.currentStudyWordProgress }}%
-            <span>{{ store.currentStudyWordDict.lastLearnIndex }} /{{ store.currentStudyWordDict.words.length }}词</span>
+            <span>{{ store.currentStudyWordDict.lastLearnIndex }} /{{
+                store.currentStudyWordDict.words.length
+              }}词</span>
           </div>
           <el-progress class="mt-1" :percentage="store.currentStudyWordProgress" :show-text="false"></el-progress>
         </div>
@@ -194,6 +201,41 @@ function study() {
         />
       </div>
     </div>
+
+    <Dialog v-model="show"
+            title="每日目标"
+            :footer="true"
+            @ok="store.sdict.perDayStudyNumber = tempPerDayStudyNumber"
+    >
+      <div class="target-modal">
+        <div class="center text-2xl gap-2">
+          <span class="text-3xl" style="color:rgb(176,116,211)">{{
+              tempPerDayStudyNumber
+            }}</span>个单词
+        </div>
+        <div class="center text-sm" :style="{opacity:tempPerDayStudyNumber === 20?1:0}">
+          推荐
+        </div>
+        <el-slider :min="10"
+                   :step="10"
+                   show-stops :marks="{10: '10',200: '200'}"
+                   size="small"
+                   class="my-6"
+                   :max="200"
+                   v-model="tempPerDayStudyNumber"
+        />
+        <div class="flex gap-2 mb-2 mt-10 items-center">
+          <div>预计</div>
+          <span class="text-2xl"
+                style="color:rgb(176,116,211)">{{
+              Math.ceil(store.sdict.words.length / tempPerDayStudyNumber)
+            }}</span>天完成学习
+        </div>
+        <div>
+          要达到最佳效果，就坚持每天学习。每天学20个单词是最理想的，但就算再忙的时候每天学10个也有助你养成良好的学习习惯。
+        </div>
+      </div>
+    </Dialog>
   </BasePage>
 </template>
 
@@ -214,4 +256,12 @@ function study() {
 .my-dict {
   @apply p-4 rounded-md bg-slate-200 relative cursor-pointer h-40;
 }
+
+.target-modal {
+  width: 30rem;
+  padding: var(--space);
+  padding-top: 0;
+  color: var(--color-font-1);
+
+}
 </style>

src/stores/base.ts

@@ -315,6 +315,9 @@ export const useBaseStore = defineStore('base', {
       }
       return this.commonDictList[Math.abs(this.currentStudy.word.dictIndex) - 1] ?? getDefaultDict()
     },
+    sdict(): Dict {
+      return this.currentStudyWordDict
+    },
     sword() {
       return this.currentStudy.word
     },

src/utils/eventBus.ts

@@ -1,4 +1,5 @@
 import mitt from 'mitt'
+import {onMounted, onUnmounted} from "vue";
 
 export const emitter = mitt()
 export const EventKey = {
@@ -19,4 +20,14 @@ export const EventKey = {
   editDict: 'editDict',
   openMyDictDialog: 'openMyDictDialog',
   jumpSpecifiedChapter: 'jumpSpecifiedChapter',
+}
+
+export function useEvent(key: string, func: () => void) {
+  onMounted(() => {
+    emitter.on(key, func)
+  })
+
+  onUnmounted(() => {
+    emitter.off(key, func)
+  })
 }