AMAZEHOME/TypeWords
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save

Browse Source
This commit is contained in:
Zyronon
2025-10-22 01:32:27 +08:00
parent 1c70908afb
commit 84798f8268
6 changed files with 142 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
src/pages/word/PracticeWords.vue
View File

@@ -1,17 +1,17 @@
<script setup lang="ts">
import {onMounted, provide, watch} from "vue";
import { onMounted, provide, watch } from "vue";
import Statistics from "@/pages/word/Statistics.vue";
import {emitter, EventKey, useEvents} from "@/utils/eventBus.ts";
import {useSettingStore} from "@/stores/setting.ts";
import {useRuntimeStore} from "@/stores/runtime.ts";
import {Dict, PracticeData, ShortcutKey, TaskWords, Word} from "@/types/types.ts";
import {useDisableEventListener, useOnKeyboardEventListener, useStartKeyboardEventListener} from "@/hooks/event.ts";
import { emitter, EventKey, useEvents } from "@/utils/eventBus.ts";
import { useSettingStore } from "@/stores/setting.ts";
import { useRuntimeStore } from "@/stores/runtime.ts";
import { Dict, PracticeData, ShortcutKey, TaskWords, Word } from "@/types/types.ts";
import { useDisableEventListener, useOnKeyboardEventListener, useStartKeyboardEventListener } from "@/hooks/event.ts";
import useTheme from "@/hooks/theme.ts";
import {getCurrentStudyWord, useWordOptions} from "@/hooks/dict.ts";
import {_getDictDataByUrl, cloneDeep, resourceWrap, shuffle} from "@/utils";
import {useRoute, useRouter} from "vue-router";
import { getCurrentStudyWord, useWordOptions } from "@/hooks/dict.ts";
import { _getDictDataByUrl, cloneDeep, resourceWrap, shuffle } from "@/utils";
import { useRoute, useRouter } from "vue-router";
import Footer from "@/pages/word/components/Footer.vue";
import Panel from "@/components/Panel.vue";
import BaseIcon from "@/components/BaseIcon.vue";
@@ -19,14 +19,15 @@ import Tooltip from "@/components/base/Tooltip.vue";
import WordList from "@/components/list/WordList.vue";
import TypeWord from "@/pages/word/components/TypeWord.vue";
import Empty from "@/components/Empty.vue";
import {useBaseStore} from "@/stores/base.ts";
import {usePracticeStore} from "@/stores/practice.ts";
import { useBaseStore } from "@/stores/base.ts";
import { usePracticeStore } from "@/stores/practice.ts";
import Toast from '@/components/base/toast/Toast.ts'
import {getDefaultDict, getDefaultWord} from "@/types/func.ts";
import { getDefaultDict, getDefaultWord } from "@/types/func.ts";
import ConflictNotice from "@/components/ConflictNotice.vue";
import PracticeLayout from "@/components/PracticeLayout.vue";
import {DICT_LIST, PracticeSaveWordKey} from "@/config/env.ts";
import { DICT_LIST, PracticeSaveWordKey } from "@/config/env.ts";
import { set } from "idb-keyval";
const {
isWordCollect,
@@ -178,7 +179,24 @@ function next(isTyping: boolean = true) {
}
} else {
if (data.index === data.words.length - 1) {
if ([0, 2].includes(statStore.step)) {
if (!settingStore.dictation) {
let i = data.index
i--
let d = Math.floor(i / 6) - 1
while (i % 6 !== (d < 0 ? 0 : d)) {
i--
d = Math.floor(i / 6) - 1
}
console.log('i', i)
if (i <= 0) i = -1
data.index = i + 1
settingStore.dictation = true
return
}
}
if (data.wrongWords.length) {
settingStore.dictation = false
console.log('当前学完了，但还有错词')
data.words = shuffle(cloneDeep(data.wrongWords))
data.index = 0
@@ -240,12 +258,6 @@ function next(isTyping: boolean = true) {
//开始默写新词
if (statStore.step === 0) {
if (settingStore.wordPracticeMode === 1) {
console.log('自由模式，全完学完了')
showStatDialog = true
localStorage.removeItem(PracticeSaveWordKey.key)
return
}
statStore.step++
console.log('开始默写新词')
settingStore.dictation = true
@@ -254,13 +266,17 @@ function next(isTyping: boolean = true) {
}
}
} else {
let d = Math.floor(data.index / 6) - 1
if (data.index > 0 && data.index % 6 === (d < 0 ? 0 : d)) {
if (!settingStore.dictation) {
settingStore.dictation = true
data.index -= 6
if ([0, 2].includes(statStore.step)) {
let d = Math.floor(data.index / 6) - 1
if (data.index > 0 && data.index % 6 === (d < 0 ? 0 : d)) {
if (!settingStore.dictation) {
settingStore.dictation = true
data.index -= 6
} else {
settingStore.dictation = false
data.index++
}
} else {
settingStore.dictation = false
data.index++
}
} else {
@@ -271,93 +287,6 @@ function next(isTyping: boolean = true) {
savePracticeData()
}
function next1(isTyping: boolean = true) {
// showStatDialog = true
// return
if (isTyping) statStore.inputWordNumber++
if (data.index === data.words.length - 1) {
if (data.wrongWords.length) {
console.log('当前学完了，但还有错词')
data.words = shuffle(cloneDeep(data.wrongWords))
data.index = 0
data.wrongWords = []
} else {
console.log('当前学完了，没错词', statStore.total, statStore.step, data.index)
//学完了
if (statStore.step === 4) {
statStore.spend = Date.now() - statStore.startDate
console.log('全完学完了')
showStatDialog = true
localStorage.removeItem(PracticeSaveWordKey.key)
return;
// emit('complete', {})
}
//开始默认所有单词
if (statStore.step === 3) {
statStore.step++
if (taskWords.write.length) {
console.log('开始默认所有单词')
settingStore.dictation = true
data.words = shuffle(taskWords.write)
data.index = 0
} else {
console.log('开始默认所有单词-无单词略过')
return next()
}
}
//开始默写昨日
if (statStore.step === 2) {
statStore.step++
if (taskWords.review.length) {
console.log('开始默写昨日')
settingStore.dictation = true
data.words = shuffle(taskWords.review)
data.index = 0
} else {
console.log('开始默写昨日-无单词略过')
return next()
}
}
//开始复习昨日
if (statStore.step === 1) {
statStore.step++
if (taskWords.review.length) {
console.log('开始复习昨日')
settingStore.dictation = false
data.words = shuffle(taskWords.review)
data.index = 0
} else {
console.log('开始复习昨日-无单词略过')
return next()
}
}
//开始默写新词
if (statStore.step === 0) {
if (settingStore.wordPracticeMode === 1) {
console.log('自由模式，全完学完了')
showStatDialog = true
localStorage.removeItem(PracticeSaveWordKey.key)
return
}
statStore.step++
console.log('开始默写新词')
settingStore.dictation = true
data.words = shuffle(taskWords.new)
data.index = 0
}
}
} else {
data.index++
// console.log('这个词完了')
}
savePracticeData()
}
function onTypeWrong() {
let temp = word.word.toLowerCase()
if (!allWrongWords.has(word.word.toLowerCase())) {
@@ -532,8 +461,8 @@ useEvents([
<template>
<PracticeLayout
v-loading="loading"
panelLeft="var(--word-panel-margin-left)">
v-loading="loading"
panelLeft="var(--word-panel-margin-left)">
<template v-slot:practice>
<div class="practice-word">
<div class="absolute z-1 top-4 w-full" v-if="settingStore.showNearWord">
@@ -542,7 +471,7 @@ useEvents([
v-if="prevWord">
<IconFluentArrowLeft16Regular class="arrow" width="22"/>
<Tooltip
:title="`上一个(${settingStore.shortcutKeyMap[ShortcutKey.Previous]})`"
:title="`上一个(${settingStore.shortcutKeyMap[ShortcutKey.Previous]})`"
>
<div class="word">{{ prevWord.word }}</div>
</Tooltip>
@@ -551,7 +480,7 @@ useEvents([
@click="next(false)"
v-if="nextWord">
<Tooltip
:title="`下一个(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
:title="`下一个(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
>
<div class="word" :class="settingStore.dictation && 'word-shadow'">{{ nextWord.word }}</div>
</Tooltip>
@@ -559,10 +488,10 @@ useEvents([
</div>
</div>
<TypeWord
ref="typingRef"
:word="word"
@wrong="onTypeWrong"
@complete="next"
ref="typingRef"
:word="word"
@wrong="onTypeWrong"
@complete="next"
/>
</div>
</template>
@@ -574,41 +503,41 @@ useEvents([
<span>{{ store.sdict.name }} ({{ store.sdict.lastLearnIndex }} / {{ store.sdict.length }})</span>
<BaseIcon
@click="continueStudy"
:title="`下一组(${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`">
@click="continueStudy"
:title="`下一组(${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`">
<IconFluentArrowRight16Regular class="arrow" width="22"/>
</BaseIcon>
<BaseIcon
@click="randomWrite"
:title="`随机默写(${settingStore.shortcutKeyMap[ShortcutKey.RandomWrite]})`">
@click="randomWrite"
:title="`随机默写(${settingStore.shortcutKeyMap[ShortcutKey.RandomWrite]})`">
<IconFluentArrowShuffle16Regular class="arrow" width="22"/>
</BaseIcon>
</div>
</template>
<div class="panel-page-item pl-4">
<WordList
v-if="data.words.length"
:is-active="settingStore.showPanel"
:static="false"
:show-word="!settingStore.dictation"
:show-translate="settingStore.translate"
:list="data.words"
:activeIndex="data.index"
@click="(val:any) => data.index = val.index"
v-if="data.words.length"
:is-active="settingStore.showPanel"
:static="false"
:show-word="!settingStore.dictation"
:show-translate="settingStore.translate"
:list="data.words"
:activeIndex="data.index"
@click="(val:any) => data.index = val.index"
>
<template v-slot:suffix="{item,index}">
<BaseIcon
:class="!isWordCollect(item)?'collect':'fill'"
@click.stop="toggleWordCollect(item)"
:title="!isWordCollect(item) ? '收藏' : '取消收藏'">
:class="!isWordCollect(item)?'collect':'fill'"
@click.stop="toggleWordCollect(item)"
:title="!isWordCollect(item) ? '收藏' : '取消收藏'">
<IconFluentStar16Regular v-if="!isWordCollect(item)"/>
<IconFluentStar16Filled v-else/>
</BaseIcon>
<BaseIcon
:class="!isWordSimple(item)?'collect':'fill'"
@click.stop="toggleWordSimple(item)"
:title="!isWordSimple(item) ? '标记为已掌握' : '取消标记已掌握'">
:class="!isWordSimple(item)?'collect':'fill'"
@click.stop="toggleWordSimple(item)"
:title="!isWordSimple(item) ? '标记为已掌握' : '取消标记已掌握'">
<IconFluentCheckmarkCircle16Regular v-if="!isWordSimple(item)"/>
<IconFluentCheckmarkCircle16Filled v-else/>
</BaseIcon>
@@ -620,11 +549,11 @@ useEvents([
</template>
<template v-slot:footer>
<Footer
:is-simple="isWordSimple(word)"
@toggle-simple="toggleWordSimpleWrapper"
:is-collect="isWordCollect(word)"
@toggle-collect="toggleWordCollect(word)"
@skip="next(false)"
:is-simple="isWordSimple(word)"
@toggle-simple="toggleWordSimpleWrapper"
:is-collect="isWordCollect(word)"
@toggle-collect="toggleWordCollect(word)"
@skip="next(false)"
/>
</template>
</PracticeLayout>

6
src/pages/word/Statistics.vue
View File

@@ -89,8 +89,8 @@ useEvents([
])
function options(emitType: string) {
close()
emitter.emit(EventKey[emitType])
close()
}
</script>
@@ -111,11 +111,11 @@ function options(emitType: string) {
<div class="text-4xl font-bold">{{ statStore.newWordNumber }}</div>
</div>
<div class="flex-1 flex flex-col items-center">
<div class="text-sm color-gray">复习数</div>
<div class="text-sm color-gray">复习上次</div>
<div class="text-4xl font-bold">{{ statStore.reviewWordNumber }}</div>
</div>
<div class="flex-1 flex flex-col items-center">
<div class="text-sm color-gray">默写数</div>
<div class="text-sm color-gray">复习之前</div>
<div class="text-4xl font-bold">{{ statStore.writeWordNumber }}</div>
</div>
</div>

60
src/pages/word/WordsPage.vue
View File

@@ -1,27 +1,27 @@
<script setup lang="ts">
import {useBaseStore} from "@/stores/base.ts";
import {useRouter} from "vue-router";
import { useBaseStore } from "@/stores/base.ts";
import { useRouter } from "vue-router";
import BaseIcon from "@/components/BaseIcon.vue";
import {_getAccomplishDate, _getDictDataByUrl, resourceWrap, useNav} from "@/utils";
import { _getAccomplishDate, _getDictDataByUrl, resourceWrap, useNav } from "@/utils";
import BasePage from "@/components/BasePage.vue";
import {DictResource} from "@/types/types.ts";
import {watch} from "vue";
import {getCurrentStudyWord} from "@/hooks/dict.ts";
import {useRuntimeStore} from "@/stores/runtime.ts";
import { DictResource } from "@/types/types.ts";
import { watch } from "vue";
import { getCurrentStudyWord } from "@/hooks/dict.ts";
import { useRuntimeStore } from "@/stores/runtime.ts";
import Book from "@/components/Book.vue";
import PopConfirm from "@/components/PopConfirm.vue";
import Progress from '@/components/base/Progress.vue';
import Toast from '@/components/base/toast/Toast.ts';
import BaseButton from "@/components/BaseButton.vue";
import {getDefaultDict} from "@/types/func.ts";
import { getDefaultDict } from "@/types/func.ts";
import DeleteIcon from "@/components/icon/DeleteIcon.vue";
import PracticeSettingDialog from "@/pages/word/components/PracticeSettingDialog.vue";
import ChangeLastPracticeIndexDialog from "@/pages/word/components/ChangeLastPracticeIndexDialog.vue";
import {useSettingStore} from "@/stores/setting.ts";
import { useSettingStore } from "@/stores/setting.ts";
import CollectNotice from "@/components/CollectNotice.vue";
import {useFetch} from "@vueuse/core";
import {CAN_REQUEST, DICT_LIST, PracticeSaveWordKey} from "@/config/env.ts";
import {myDictList} from "@/apis";
import { useFetch } from "@vueuse/core";
import { CAN_REQUEST, DICT_LIST, PracticeSaveWordKey } from "@/config/env.ts";
import { myDictList } from "@/apis";
import PracticeWordListDialog from "@/pages/word/components/PracticeWordListDialog.vue";
@@ -199,9 +199,9 @@ const {
<Progress class="mt-1" :percentage="store.currentStudyProgress" :show-text="false"></Progress>
</div>
<PopConfirm
:disabled="!isSaveData"
title="当前存在未完成的学习任务，修改会重新生成学习任务，是否继续？"
@confirm="check(()=>showChangeLastPracticeIndexDialog = true)">
:disabled="!isSaveData"
title="当前存在未完成的学习任务，修改会重新生成学习任务，是否继续？"
@confirm="check(()=>showChangeLastPracticeIndexDialog = true)">
<div class="color-blue cursor-pointer">更改</div>
</PopConfirm>
@@ -219,17 +219,17 @@ const {
<div class="flex">
<div class="flex-1 flex flex-col items-center">
<div class="text-4xl font-bold">{{ currentStudy.new.length }}</div>
<div class="text">新词数</div>
<div class="text">新词</div>
</div>
<template v-if="settingStore.wordPracticeMode === 0">
<div class="flex-1 flex flex-col items-center">
<div class="text-4xl font-bold">{{ currentStudy.review.length }}</div>
<div class="text">复习单词</div>
<div class="text">复习上次</div>
</div>
<div class="flex-1 flex flex-col items-center">
<div class="text-4xl font-bold">{{ currentStudy.write.length }}
</div>
<div class="text">默写单词</div>
<div class="text">复习之前</div>
</div>
</template>
</div>
@@ -238,15 +238,15 @@ const {
<div class="flex flex-col items-end justify-around ">
<div class="flex gap-1 items-center">
每日目标
<div style="color:#ac6ed1;" @click="check(()=>showPracticeSettingDialog = true)"
class="bg-third px-2 h-10 flex center text-2xl rounded cursor-pointer">
<div style="color:#ac6ed1;"
class="bg-third px-2 h-10 flex center text-2xl rounded">
{{ store.sdict.id ? store.sdict.perDayStudyNumber : 0 }}
</div>
个单词
<PopConfirm
:disabled="!isSaveData"
title="当前存在未完成的学习任务，修改会重新生成学习任务，是否继续？"
@confirm="check(()=>showPracticeSettingDialog = true)">
:disabled="!isSaveData"
title="当前存在未完成的学习任务，修改会重新生成学习任务，是否继续？"
@confirm="check(()=>showPracticeSettingDialog = true)">
<span class="color-blue cursor-pointer">更改</span>
</PopConfirm>
</div>
@@ -303,18 +303,18 @@ const {
</BasePage>
<PracticeSettingDialog
:show-left-option="false"
v-model="showPracticeSettingDialog"
@ok="savePracticeSetting"/>
:show-left-option="false"
v-model="showPracticeSettingDialog"
@ok="savePracticeSetting"/>
<ChangeLastPracticeIndexDialog
v-model="showChangeLastPracticeIndexDialog"
@ok="saveLastPracticeIndex"
v-model="showChangeLastPracticeIndexDialog"
@ok="saveLastPracticeIndex"
/>
<PracticeWordListDialog
:data="currentStudy"
v-model="showPracticeWordListDialog"
:data="currentStudy"
v-model="showPracticeWordListDialog"
/>
<CollectNotice/>

1
src/pages/word/components/PracticeSettingDialog.vue
View File

@@ -16,7 +16,6 @@ import {useRuntimeStore} from "@/stores/runtime.ts";
const Dialog = defineAsyncComponent(() => import('@/components/dialog/Dialog.vue'))
const store = useBaseStore()
const settings = useSettingStore()
const runtimeStore = useRuntimeStore()

30
src/pages/word/components/PracticeWordListDialog.vue
View File

@@ -22,7 +22,7 @@ let showTranslate = $ref(false)
<div class="px-4 pb-4 h-80vh flex gap-4">
<div class="h-full flex flex-col gap-2">
<div class="flex justify-between items-center">
<span class="title">新词</span>
<span class="title">新词 {{data.new.length}}</span>
</div>
<BaseTable
class="overflow-auto flex-1 w-85"
@@ -42,14 +42,36 @@ let showTranslate = $ref(false)
</template>
</BaseTable>
</div>
<div class="h-full flex flex-col gap-2">
<div class="h-full flex flex-col gap-2" v-if="data.review.length">
<div class="flex justify-between items-center">
<span class="title">复习单词</span>
<span class="title">复习上次 {{data.review.length}}</span>
</div>
<BaseTable
class="overflow-auto flex-1 w-85"
:list='data.review'
:loading='false'
:show-toolbar="false"
:showPagination="false"
>
<template v-slot="item">
<WordItem
:item="item.item"
:show-translate="showTranslate">
<template v-slot:prefix>
{{ item.index }}
</template>
</WordItem>
</template>
</BaseTable>
</div>
<div class="h-full flex flex-col gap-2" v-if="data.write.length">
<div class="flex justify-between items-center">
<span class="title">复习之前 {{data.write.length}}</span>
<Checkbox v-model="showTranslate">翻译</Checkbox>
</div>
<BaseTable
class="overflow-auto flex-1 w-85"
:list='data.review'
:list='data.write'
:loading='false'
:show-toolbar="false"
:showPagination="false"

22
src/pages/word/components/TypeWord.vue
View File

@@ -1,15 +1,15 @@
<script setup lang="ts">
import {ShortcutKey, Word} from "@/types/types.ts";
import { ShortcutKey, Word } from "@/types/types.ts";
import VolumeIcon from "@/components/icon/VolumeIcon.vue";
import {useSettingStore} from "@/stores/setting.ts";
import {usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio, useTTsPlayAudio} from "@/hooks/sound.ts";
import {emitter, EventKey} from "@/utils/eventBus.ts";
import {nextTick, onMounted, onUnmounted, watch} from "vue";
import { useSettingStore } from "@/stores/setting.ts";
import { usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio, useTTsPlayAudio } from "@/hooks/sound.ts";
import { emitter, EventKey } from "@/utils/eventBus.ts";
import { nextTick, onMounted, onUnmounted, watch } from "vue";
import Tooltip from "@/components/base/Tooltip.vue";
import SentenceHightLightWord from "@/pages/word/components/SentenceHightLightWord.vue";
import {usePracticeStore} from "@/stores/practice.ts";
import {getDefaultWord} from "@/types/func.ts";
import {_nextTick, sleep} from "@/utils";
import { usePracticeStore } from "@/stores/practice.ts";
import { getDefaultWord } from "@/types/func.ts";
import { _nextTick, sleep } from "@/utils";
interface IProps {
word: Word,
@@ -297,8 +297,8 @@ function checkCursorPosition() {
}}]
</div>
<VolumeIcon
:title="`发音(${settingStore.shortcutKeyMap[ShortcutKey.PlayWordPronunciation]})`"
ref="volumeIconRef" :simple="true" :cb="() => playWordAudio(word.word)"/>
:title="`发音(${settingStore.shortcutKeyMap[ShortcutKey.PlayWordPronunciation]})`"
ref="volumeIconRef" :simple="true" :cb="() => playWordAudio(word.word)"/>
</div>
<div class="word my-1"
@@ -344,7 +344,7 @@ function checkCursorPosition() {
</template>
<div class="anim" v-opacity="settingStore.translate || showFullWord">
<div class="anim" v-opacity="(settingStore.translate && !settingStore.dictation) || showFullWord ">
<template v-if="word?.phrases?.length">
<div class="flex">
<div class="label">短语</div>