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

chore: change store data

Browse Source
This commit is contained in:
zyronon
2023-09-19 12:35:03 +08:00
parent b82fffc883
commit cbbb760eac
17 changed files with 1308 additions and 2315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Practice/Footer.vue
View File

@@ -6,8 +6,10 @@ import {useBaseStore} from "@/stores/base.ts"
import Tooltip from "@/components/Tooltip.vue"
import {usePracticeStore} from "@/components/Practice/usePracticeStore.ts";
import {Icon} from "@iconify/vue";
import {useSettingStore} from "@/stores/setting.ts";
const practiceStore = usePracticeStore()
const settingStore = useSettingStore()
const store = useBaseStore()
function format(val: number, suffix: string = '', check: number = -1) {
@@ -35,12 +37,12 @@ onUnmounted(() => {
</script>
<template>
<div class="footer" :class="!store.setting.showToolbar && 'hide'">
<Tooltip :title="store.setting.showToolbar?'收起':'展开'">
<div class="footer" :class="!settingStore.showToolbar && 'hide'">
<Tooltip :title="settingStore.showToolbar?'收起':'展开'">
<Icon icon="icon-park-outline:down"
@click="store.setting.showToolbar = !store.setting.showToolbar"
@click="settingStore.showToolbar = !settingStore.showToolbar"
class="arrow"
:class="!store.setting.showToolbar && 'down'"
:class="!settingStore.showToolbar && 'down'"
width="24" color="#999"/>
</Tooltip>
<div class="bottom">

2158
src/components/Practice/Practice.vue
View File

File diff suppressed because it is too large Load Diff

6
src/components/Modal/Statistics.vue → src/components/Practice/Statistics.vue
View File

@@ -10,10 +10,14 @@ import {emitter, EventKey} from "@/utils/eventBus.ts";
import {onMounted, reactive} from "vue";
import {cloneDeep} from "lodash-es";
import {Icon} from '@iconify/vue';
import {usePracticeStore} from "@/components/Practice/usePracticeStore.ts";
import {useSettingStore} from "@/stores/setting.ts";
const store = useBaseStore()
const settingStore = useSettingStore()
let statModalIsOpen = $ref(false)
let currentStat = reactive<Statistics>(cloneDeep(DefaultStatistics))
const practiceStore = usePracticeStore()
onMounted(() => {
emitter.on(EventKey.openStatModal, () => {
@@ -23,7 +27,7 @@ onMounted(() => {
})
function write() {
store.setting.dictation = true
settingStore.dictation = true
repeat()
}

1123
src/components/Practice/TypeArticle.vue
View File

File diff suppressed because it is too large Load Diff

34
src/components/Practice/TypeWord.vue
View File

@@ -22,6 +22,7 @@ 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";
interface IProps {
words: Word[],
@@ -44,8 +45,10 @@ let data = $ref({
let input = $ref('')
let wrong = $ref('')
let showFullWord = $ref(false)
let activeIndex = $ref(-1)
let activeBtnIndex = $ref(-1)
const store = useBaseStore()
const practiceStore = usePracticeStore()
const settingStore = useSettingStore()
// const [playKeySound, setAudio] = useSound([机械0, 机械1, 机械2, 机械3], 1)
// const [playKeySound, setAudio] = useSound([老式机械], 3)
@@ -54,7 +57,6 @@ const [playBeep] = useSound([beep], 1)
const [playCorrect] = useSound([correct], 1)
const [playAudio] = usePlayWordAudio()
const practiceStore = usePracticeStore()
watchEffect(() => {
data.words = props.words
@@ -130,7 +132,7 @@ async function onKeyDown(e: KeyboardEvent) {
if ((e.keyCode >= 65 && e.keyCode <= 90) || e.code === 'Space') {
let letter = e.key
let isWrong = false
if (store.setting.ignoreCase) {
if (settingStore.ignoreCase) {
isWrong = (input + letter).toLowerCase() === word.name.toLowerCase().slice(0, input.length + 1)
} else {
isWrong = (input + letter) === word.name.slice(0, input.length + 1)
@@ -158,7 +160,7 @@ async function onKeyDown(e: KeyboardEvent) {
}
if (input.toLowerCase() === word.name.toLowerCase()) {
playCorrect()
setTimeout(next, store.setting.waitTimeForChangeWord)
setTimeout(next, settingStore.waitTimeForChangeWord)
}
} else {
// console.log('e', e)
@@ -176,7 +178,7 @@ async function onKeyDown(e: KeyboardEvent) {
store.newWordDict.words.push(word)
store.newWordDict.chapterWords = [store.newWordDict.words]
}
activeIndex = 1
activeBtnIndex = 1
break
case ShortKeyMap.Remove:
if (!store.skipWordNames.includes(word.name.toLowerCase())) {
@@ -184,22 +186,22 @@ async function onKeyDown(e: KeyboardEvent) {
store.skipWordDict.words.push(word)
store.skipWordDict.chapterWords = [store.skipWordDict.words]
}
activeIndex = 0
activeBtnIndex = 0
next()
break
case ShortKeyMap.Ignore:
e.preventDefault()
activeIndex = 2
activeBtnIndex = 2
next()
break
case ShortKeyMap.Show:
if (store.setting.allowWordTip) {
if (settingStore.allowWordTip) {
showFullWord = true
}
break
}
setTimeout(() => {
activeIndex = -1
activeBtnIndex = -1
}, 200)
}
}
@@ -208,19 +210,19 @@ async function onKeyDown(e: KeyboardEvent) {
<template>
<div class="type-word">
<div class="translate"
:style="{fontSize: store.setting.foreignLanguageFontSize +'rem'}"
:style="{fontSize: settingStore.foreignLanguageFontSize +'rem'}"
>{{ word.trans.join('；') }}
</div>
<div class="word-wrapper">
<div class="word"
:class="wrong && 'is-wrong'"
:style="{fontSize: store.setting.translateLanguageFontSize +'rem'}"
:style="{fontSize: settingStore.translateLanguageFontSize +'rem'}"
>
<span class="input" v-if="input">{{ input }}</span>
<span class="wrong" v-if="wrong">{{ wrong }}</span>
<template v-if="store.setting.dictation">
<template v-if="settingStore.dictation">
<span class="letter" v-if="!showFullWord"
@mouseenter="store.setting.allowWordTip && (showFullWord = true)">{{
@mouseenter="settingStore.allowWordTip && (showFullWord = true)">{{
resetWord.split('').map(v => '_').join('')
}}</span>
<span class="letter" v-else @mouseleave="showFullWord = false">{{ resetWord }}</span>
@@ -231,13 +233,13 @@ async function onKeyDown(e: KeyboardEvent) {
</div>
<div class="phonetic">{{ word.usphone }}</div>
<div class="options">
<BaseButton keyboard="`" :active="activeIndex === 0">
<BaseButton keyboard="`" :active="activeBtnIndex === 0">
忽略
</BaseButton>
<BaseButton keyboard="Enter" :active="activeIndex === 1">
<BaseButton keyboard="Enter" :active="activeBtnIndex === 1">
收藏
</BaseButton>
<BaseButton keyboard="Tab" :active="activeIndex === 2">
<BaseButton keyboard="Tab" :active="activeBtnIndex === 2">
下一个
</BaseButton>
</div>

4
src/components/Toolbar/Add.vue
View File

@@ -28,7 +28,9 @@ function toggle() {
/>
</IconWrapper>
</Tooltip>
<AddArticle v-if="show" @close="show = false"/>
<AddArticle v-if="show"
@close="show = false"
/>
</div>
</template>

9
src/components/Toolbar/RepeatSetting.vue
View File

@@ -8,8 +8,11 @@ import {useBaseStore} from "@/stores/base.ts";
import {useWindowClick} from "@/hooks/event.ts";
import {emitter, EventKey} from "@/utils/eventBus.ts";
import {onMounted} from "vue";
import {useSettingStore} from "@/stores/setting.ts";
const store = useBaseStore()
const settingStore = useSettingStore()
let show = $ref(false)
let radio1 = $ref('1')
useWindowClick(() => show = false)
@@ -36,16 +39,16 @@ onMounted(() => {
style="width: 230rem;"
>
<div class="title">选择单词的循环次数</div>
<el-radio-group v-model="store.setting.repeatCount">
<el-radio-group v-model="settingStore.repeatCount">
<el-radio :label="1" size="default">1</el-radio>
<el-radio :label="2" size="default">2</el-radio>
<el-radio :label="3" size="default">3</el-radio>
<el-radio :label="5" size="default">5</el-radio>
<el-radio :label="100" size="default">自定义</el-radio>
</el-radio-group>
<div class="mini-row" v-if="store.setting.repeatCount === 100">
<div class="mini-row" v-if="settingStore.repeatCount === 100">
<label class="item-title">自定义循环次数</label>
<el-input-number v-model="store.setting.repeatCustomCount"
<el-input-number v-model="settingStore.repeatCustomCount"
:min="6"
:max="100"
type="number"

65
src/components/Toolbar/SettingModal.vue
View File

@@ -3,9 +3,10 @@ import Modal from "@/components/Modal/Modal.vue"
import {useBaseStore} from "@/stores/base.ts"
import {Icon} from '@iconify/vue';
import {watch, ref} from "vue";
import {useSettingStore} from "@/stores/setting.ts";
const tabIndex = $ref(0)
const store = useBaseStore()
const settingStore = useSettingStore()
interface IProps {
modelValue: boolean,
@@ -22,10 +23,10 @@ const emit = defineEmits([
let allSound = $ref<boolean>(true)
watch([
() => store.setting.wordSound,
() => store.setting.keyboardSound,
() => store.setting.translateSound,
() => store.setting.effectSound,
() => settingStore.wordSound,
() => settingStore.keyboardSound,
() => settingStore.translateSound,
() => settingStore.effectSound,
], (n) => {
if (n.some(v => v)) {
allSound = true
@@ -36,10 +37,10 @@ watch([
function changAllSound(e: boolean) {
allSound = e
store.setting.wordSound = e
store.setting.keyboardSound = e
store.setting.translateSound = e
store.setting.effectSound = e
settingStore.wordSound = e
settingStore.keyboardSound = e
settingStore.translateSound = e
settingStore.effectSound = e
}
</script>
@@ -77,7 +78,7 @@ function changAllSound(e: boolean) {
<div class="row">
<label class="item-title">单词发音</label>
<div class="wrapper">
<el-switch v-model="store.setting.wordSound"
<el-switch v-model="settingStore.wordSound"
inline-prompt
active-text="开"
inactive-text="关"
@@ -87,22 +88,22 @@ function changAllSound(e: boolean) {
<div class="row">
<label class="sub-title">音量</label>
<div class="wrapper">
<el-slider v-model="store.setting.wordSoundVolume"/>
<span>{{ store.setting.wordSoundVolume }}%</span>
<el-slider v-model="settingStore.wordSoundVolume"/>
<span>{{ settingStore.wordSoundVolume }}%</span>
</div>
</div>
<div class="row">
<label class="sub-title">倍速</label>
<div class="wrapper">
<el-slider v-model="store.setting.wordSoundSpeed" :step="0.1" :min="1" :max="4"/>
<span>{{ store.setting.wordSoundSpeed }}</span>
<el-slider v-model="settingStore.wordSoundSpeed" :step="0.1" :min="1" :max="4"/>
<span>{{ settingStore.wordSoundSpeed }}</span>
</div>
</div>
<div class="line"></div>
<div class="row">
<label class="item-title">按键音</label>
<div class="wrapper">
<el-switch v-model="store.setting.keyboardSound"
<el-switch v-model="settingStore.keyboardSound"
inline-prompt
active-text="开"
inactive-text="关"
@@ -112,15 +113,15 @@ function changAllSound(e: boolean) {
<div class="row">
<label class="sub-title">音量</label>
<div class="wrapper">
<el-slider v-model="store.setting.keyboardSoundVolume"/>
<span>{{ store.setting.keyboardSoundVolume }}%</span>
<el-slider v-model="settingStore.keyboardSoundVolume"/>
<span>{{ settingStore.keyboardSoundVolume }}%</span>
</div>
</div>
<div class="line"></div>
<div class="row">
<label class="item-title">释义发音</label>
<div class="wrapper">
<el-switch v-model="store.setting.translateSound"
<el-switch v-model="settingStore.translateSound"
inline-prompt
active-text="开"
inactive-text="关"
@@ -130,15 +131,15 @@ function changAllSound(e: boolean) {
<div class="row">
<label class="sub-title">音量</label>
<div class="wrapper">
<el-slider v-model="store.setting.translateSoundVolume"/>
<span>{{ store.setting.translateSoundVolume }}%</span>
<el-slider v-model="settingStore.translateSoundVolume"/>
<span>{{ settingStore.translateSoundVolume }}%</span>
</div>
</div>
<div class="line"></div>
<div class="row">
<label class="item-title">效果音（章节结算页烟花音效）</label>
<div class="wrapper">
<el-switch v-model="store.setting.effectSound"
<el-switch v-model="settingStore.effectSound"
inline-prompt
active-text="开"
inactive-text="关"
@@ -148,8 +149,8 @@ function changAllSound(e: boolean) {
<div class="row">
<label class="sub-title">音量</label>
<div class="wrapper">
<el-slider v-model="store.setting.effectSoundVolume"/>
<span>{{ store.setting.effectSoundVolume }}%</span>
<el-slider v-model="settingStore.effectSoundVolume"/>
<span>{{ settingStore.effectSoundVolume }}%</span>
</div>
</div>
</div>
@@ -157,7 +158,7 @@ function changAllSound(e: boolean) {
<div class="row">
<label class="item-title">章节乱序</label>
<div class="wrapper">
<el-switch v-model="store.setting.value1"
<el-switch v-model="settingStore.value1"
inline-prompt
active-text="开"
inactive-text="关"
@@ -171,7 +172,7 @@ function changAllSound(e: boolean) {
<div class="row">
<label class="item-title">练习时展示上一个/下一个单词</label>
<div class="wrapper">
<el-switch v-model="store.setting.showNearWord"
<el-switch v-model="settingStore.showNearWord"
inline-prompt
active-text="开"
inactive-text="关"
@@ -185,7 +186,7 @@ function changAllSound(e: boolean) {
<div class="row">
<label class="item-title">是否忽略大小写</label>
<div class="wrapper">
<el-switch v-model="store.setting.ignoreCase"
<el-switch v-model="settingStore.ignoreCase"
inline-prompt
active-text="开"
inactive-text="关"
@@ -199,7 +200,7 @@ function changAllSound(e: boolean) {
<div class="row">
<label class="item-title">是否允许默写模式下显示提示</label>
<div class="wrapper">
<el-switch v-model="store.setting.allowWordTip"
<el-switch v-model="settingStore.allowWordTip"
inline-prompt
active-text="开"
inactive-text="关"
@@ -219,8 +220,8 @@ function changAllSound(e: boolean) {
<el-slider
:min="10"
:max="100"
v-model="store.setting.foreignLanguageFontSize"/>
<span>{{ store.setting.foreignLanguageFontSize }}</span>
v-model="settingStore.foreignLanguageFontSize"/>
<span>{{ settingStore.foreignLanguageFontSize }}</span>
</div>
</div>
<div class="row">
@@ -229,8 +230,8 @@ function changAllSound(e: boolean) {
<el-slider
:min="10"
:max="100"
v-model="store.setting.translateLanguageFontSize"/>
<span>{{ store.setting.translateLanguageFontSize }}</span>
v-model="settingStore.translateLanguageFontSize"/>
<span>{{ settingStore.translateLanguageFontSize }}</span>
</div>
</div>
@@ -241,7 +242,7 @@ function changAllSound(e: boolean) {
<div class="row">
<label class="sut-title">切换下一个单词时间</label>
<div class="wrapper">
<el-input-number v-model="store.setting.waitTimeForChangeWord"
<el-input-number v-model="settingStore.waitTimeForChangeWord"
:min="6"
:max="100"
type="number"

17
src/components/Toolbar/Toolbar.vue
View File

@@ -15,15 +15,18 @@ import VolumeSetting from "@/components/Toolbar/VolumeSetting.vue";
import RepeatSetting from "@/components/Toolbar/RepeatSetting.vue";
import TranslateSetting from "@/components/Toolbar/TranslateSetting.vue";
import Add from "@/components/Toolbar/Add.vue";
import {useSettingStore} from "@/stores/setting.ts";
const {toggle} = useTheme()
const store = useBaseStore()
const settingStore = useSettingStore()
const showFeedbackModal = $ref(false)
const showSettingModal = $ref(false)
const showDictModal = $ref(false)
const headerRef = $ref<HTMLDivElement>(null)
watch(() => store.setting.showToolbar, n => {
watch(() => settingStore.showToolbar, n => {
if (headerRef) {
if (n) {
headerRef.style.marginTop = '10rem'
@@ -57,11 +60,11 @@ watch(() => store.setting.showToolbar, n => {
<Tooltip title="开关默写模式">
<IconWrapper>
<Icon icon="majesticons:eye-off-line"
v-if="store.setting.dictation"
@click="store.setting.dictation = false"/>
v-if="settingStore.dictation"
@click="settingStore.dictation = false"/>
<Icon icon="mdi:eye-outline"
v-else
@click="store.setting.dictation = true"/>
@click="settingStore.dictation = true"/>
</IconWrapper>
</Tooltip>
@@ -88,11 +91,11 @@ watch(() => store.setting.showToolbar, n => {
</Tooltip>
</div>
</div>
<Tooltip :title="store.setting.showToolbar?'收起':'展开'">
<Tooltip :title="settingStore.showToolbar?'收起':'展开'">
<Icon icon="icon-park-outline:down"
@click="store.setting.showToolbar = !store.setting.showToolbar"
@click="settingStore.showToolbar = !settingStore.showToolbar"
class="arrow"
:class="!store.setting.showToolbar && 'down'"
:class="!settingStore.showToolbar && 'down'"
width="24"
color="#999"/>
</Tooltip>

7
src/components/Toolbar/TranslateSetting.vue
View File

@@ -9,8 +9,11 @@ import {useWindowClick} from "@/hooks/event.ts";
import {emitter, EventKey} from "@/utils/eventBus.ts";
import BaseButton from "@/components/BaseButton.vue";
import Modal from "@/components/Modal/Modal.vue";
import {useSettingStore} from "@/stores/setting.ts";
const store = useBaseStore()
const settingStore = useSettingStore()
let show = $ref(false)
let showCustomTranslateModal = $ref(false)
@@ -39,7 +42,7 @@ function save() {
<div class="setting" @click.stop="null">
<Tooltip title="开关释义显示">
<IconWrapper>
<Icon v-if="store.setting.translate" icon="mdi:translate"
<Icon v-if="settingStore.translate" icon="mdi:translate"
@click="toggle"
/>
<Icon v-else icon="mdi:translate-off"
@@ -53,7 +56,7 @@ function save() {
<div class="mini-row">
<label class="item-title">显示翻译</label>
<div class="wrapper">
<el-switch v-model="store.setting.translate"
<el-switch v-model="settingStore.translate"
inline-prompt
active-text="开"
inactive-text="关"

11
src/components/Toolbar/VolumeSetting.vue
View File

@@ -7,8 +7,11 @@ import Tooltip from "@/components/Tooltip.vue";
import {useBaseStore} from "@/stores/base.ts";
import {useWindowClick} from "@/hooks/event.ts";
import {emitter, EventKey} from "@/utils/eventBus.ts";
import {useSettingStore} from "@/stores/setting.ts";
const store = useBaseStore()
const settingStore = useSettingStore()
let show = $ref(false)
useWindowClick(() => show = false)
@@ -32,7 +35,7 @@ function toggle() {
<div class="mini-row">
<label class="item-title">单词发音</label>
<div class="wrapper">
<el-switch v-model="store.setting.wordSound"
<el-switch v-model="settingStore.wordSound"
inline-prompt
active-text="开"
inactive-text="关"
@@ -42,7 +45,7 @@ function toggle() {
<div class="mini-row">
<label class="item-title">释义发音</label>
<div class="wrapper">
<el-switch v-model="store.setting.translateSound"
<el-switch v-model="settingStore.translateSound"
inline-prompt
active-text="开"
inactive-text="关"
@@ -52,7 +55,7 @@ function toggle() {
<div class="mini-row">
<label class="item-title">按键音</label>
<div class="wrapper">
<el-switch v-model="store.setting.keyboardSound"
<el-switch v-model="settingStore.keyboardSound"
inline-prompt
active-text="开"
inactive-text="关"
@@ -62,7 +65,7 @@ function toggle() {
<div class="mini-row">
<label class="item-title">效果音</label>
<div class="wrapper">
<el-switch v-model="store.setting.effectSound"
<el-switch v-model="settingStore.effectSound"
inline-prompt
active-text="开"
inactive-text="关"