Optimize UI interface
This commit is contained in:
zyronon
@@ -41,9 +41,12 @@ watch(store.wrong.originWords, (n) => {
|
||||
useStartKeyboardEventListener()
|
||||
|
||||
onMounted(() => {
|
||||
store.init()
|
||||
settingStore.init()
|
||||
setTheme(settingStore.theme)
|
||||
console.time()
|
||||
Promise.allSettled([store.init(), settingStore.init()]).then(e => {
|
||||
store.load = true
|
||||
setTheme(settingStore.theme)
|
||||
console.timeEnd()
|
||||
})
|
||||
})
|
||||
|
||||
useEventListener('keyup', (e: KeyboardEvent) => {
|
||||
|
||||
@@ -22,6 +22,14 @@ withDefaults(defineProps<IProps>(), {
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/style.scss";
|
||||
|
||||
.mini-row-title {
|
||||
min-height: 35rem;
|
||||
text-align: center;
|
||||
font-size: 16rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-font-1);
|
||||
}
|
||||
|
||||
.mini-row {
|
||||
min-height: 35rem;
|
||||
display: flex;
|
||||
@@ -40,8 +48,9 @@ withDefaults(defineProps<IProps>(), {
|
||||
border-radius: 8rem;
|
||||
box-shadow: 0 0 8px 2px var(--color-item-border);
|
||||
padding: 10rem $space;
|
||||
top: 40rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 10rem;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
//margin-top: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -14,6 +14,7 @@ import {useRuntimeStore} from "@/stores/runtime.ts";
|
||||
import {MessageBox} from "@/utils/MessageBox.tsx";
|
||||
import PracticeArticle from "@/components/Practice/PracticeArticle/PracticeArticle.vue";
|
||||
import PracticeWord from "@/components/Practice/PracticeWord/PracticeWord.vue";
|
||||
import VolumeSetting from "@/components/Toolbar/VolumeSetting.vue";
|
||||
|
||||
const practiceStore = usePracticeStore()
|
||||
const store = useBaseStore()
|
||||
@@ -70,8 +71,8 @@ function test() {
|
||||
<div class="practice">
|
||||
<Toolbar/>
|
||||
<!-- <BaseButton @click="test">test</BaseButton>-->
|
||||
<!-- <PracticeArticle v-if="store.isArticle"/>-->
|
||||
<!-- <PracticeWord v-else/>-->
|
||||
<PracticeArticle v-if="store.isArticle"/>
|
||||
<PracticeWord v-else/>
|
||||
<Footer/>
|
||||
</div>
|
||||
<Statistics
|
||||
|
||||
@@ -17,9 +17,17 @@ let show = $ref(false)
|
||||
let radio1 = $ref('1')
|
||||
useWindowClick(() => show = false)
|
||||
|
||||
function toggle() {
|
||||
if (!show) emitter.emit(EventKey.closeOther)
|
||||
show = !show
|
||||
let timer = 0
|
||||
function toggle(val) {
|
||||
clearTimeout(timer)
|
||||
if (val) {
|
||||
emitter.emit(EventKey.closeOther)
|
||||
show = val
|
||||
} else {
|
||||
timer = setTimeout(() => {
|
||||
show = val
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -31,11 +39,15 @@ onMounted(() => {
|
||||
<Tooltip title="单词循环设置">
|
||||
<IconWrapper>
|
||||
<Icon icon="tabler:repeat"
|
||||
@click="toggle"/>
|
||||
@mouseenter="toggle(true)"
|
||||
@mouseleave="toggle(false)"
|
||||
/>
|
||||
</IconWrapper>
|
||||
</Tooltip>
|
||||
<MiniModal
|
||||
v-model="show"
|
||||
@mouseenter="toggle(true)"
|
||||
@mouseleave="toggle(false)"
|
||||
style="width: 230rem;"
|
||||
>
|
||||
<div class="title">选择单词的循环次数</div>
|
||||
|
||||
@@ -10,7 +10,7 @@ import {Icon} from '@iconify/vue';
|
||||
|
||||
import IconWrapper from "@/components/IconWrapper.vue";
|
||||
import {emitter, EventKey} from "@/utils/eventBus.ts"
|
||||
import {watch} from "vue"
|
||||
import {onMounted, watch} from "vue"
|
||||
import VolumeSetting from "@/components/Toolbar/VolumeSetting.vue";
|
||||
import RepeatSetting from "@/components/Toolbar/RepeatSetting.vue";
|
||||
import TranslateSetting from "@/components/Toolbar/TranslateSetting.vue";
|
||||
@@ -51,8 +51,15 @@ function toggle() {
|
||||
moreOptionsRef.style.overflow = 'hidden'
|
||||
}
|
||||
settingStore.collapse = !settingStore.collapse
|
||||
|
||||
}
|
||||
|
||||
watch(() => store.load, n => {
|
||||
if (!settingStore.collapse) {
|
||||
moreOptionsRef.style.overflow = 'unset'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -185,12 +192,13 @@ header {
|
||||
}
|
||||
|
||||
.hide {
|
||||
transform: translateX(calc(100% - 36rem))
|
||||
transform: translateX(calc(100% - 36rem));
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.icon-wrapper {
|
||||
margin-left: 10rem;
|
||||
|
||||
@@ -10,6 +10,7 @@ import {useSettingStore} from "@/stores/setting.ts";
|
||||
import VolumeIcon from "@/components/VolumeIcon.vue";
|
||||
import {getAudioFileUrl, useChangeAllSound, usePlayAudio, useWatchAllSound} from "@/hooks/sound.ts";
|
||||
import {SoundFileOptions} from "@/utils/const.ts";
|
||||
import {throttle} from "lodash-es";
|
||||
|
||||
const settingStore = useSettingStore()
|
||||
|
||||
@@ -18,30 +19,45 @@ let show = $ref(false)
|
||||
useWindowClick(() => show = false)
|
||||
useWatchAllSound()
|
||||
|
||||
function toggle() {
|
||||
console.log('e')
|
||||
if (!show) emitter.emit(EventKey.closeOther)
|
||||
show = !show
|
||||
let timer = 0
|
||||
function toggle(val) {
|
||||
clearTimeout(timer)
|
||||
if (val) {
|
||||
emitter.emit(EventKey.closeOther)
|
||||
show = val
|
||||
} else {
|
||||
timer = setTimeout(() => {
|
||||
show = val
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="setting"
|
||||
@click.stop="null">
|
||||
<Tooltip title="音效设置">
|
||||
<IconWrapper>
|
||||
<Icon v-if="settingStore.allSound" icon="icon-park-outline:volume-notice"
|
||||
@click="toggle"
|
||||
/>
|
||||
<Icon v-else icon="icon-park-outline:volume-mute"
|
||||
@click="toggle"
|
||||
/>
|
||||
</IconWrapper>
|
||||
</Tooltip>
|
||||
@click.stop="null"
|
||||
>
|
||||
<IconWrapper>
|
||||
<Icon v-if="settingStore.allSound" icon="icon-park-outline:volume-notice"
|
||||
@mouseenter="toggle(true)"
|
||||
@mouseleave="toggle(false)"
|
||||
/>
|
||||
<Icon v-else icon="icon-park-outline:volume-mute"
|
||||
@mouseenter="toggle(true)"
|
||||
@mouseleave="toggle(false)"
|
||||
|
||||
/>
|
||||
</IconWrapper>
|
||||
<MiniModal
|
||||
width="250rem"
|
||||
@mouseenter="toggle(true)"
|
||||
@mouseleave="toggle(false)"
|
||||
v-model="show">
|
||||
<div class="mini-row-title">
|
||||
音效设置
|
||||
</div>
|
||||
<div class="mini-row">
|
||||
<label class="item-title">所有音效</label>
|
||||
<div class="wrapper">
|
||||
@@ -74,16 +90,16 @@ function toggle() {
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="mini-row">-->
|
||||
<!-- <label class="item-title">释义发音</label>-->
|
||||
<!-- <div class="wrapper">-->
|
||||
<!-- <el-switch v-model="settingStore.translateSound"-->
|
||||
<!-- inline-prompt-->
|
||||
<!-- active-text="开"-->
|
||||
<!-- inactive-text="关"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="mini-row">-->
|
||||
<!-- <label class="item-title">释义发音</label>-->
|
||||
<!-- <div class="wrapper">-->
|
||||
<!-- <el-switch v-model="settingStore.translateSound"-->
|
||||
<!-- inline-prompt-->
|
||||
<!-- active-text="开"-->
|
||||
<!-- inactive-text="关"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div class="mini-row">
|
||||
<label class="item-title">按键音</label>
|
||||
<div class="wrapper">
|
||||
|
||||
@@ -6,17 +6,17 @@ import {v4 as uuidv4} from 'uuid';
|
||||
import {useRuntimeStore} from "@/stores/runtime.ts";
|
||||
|
||||
export interface State {
|
||||
collect: Dict,
|
||||
simple: Dict,
|
||||
wrong: Dict,
|
||||
myDicts: Dict[],
|
||||
current: {
|
||||
dictType: DictType,
|
||||
index: number,
|
||||
practiceType: DictType,//练习类型，目前仅词典为collect时判断是练单词还是文章使用
|
||||
},
|
||||
simpleWords: string[],
|
||||
load: boolean
|
||||
collect: Dict,
|
||||
simple: Dict,
|
||||
wrong: Dict,
|
||||
myDicts: Dict[],
|
||||
current: {
|
||||
dictType: DictType,
|
||||
index: number,
|
||||
practiceType: DictType,//练习类型，目前仅词典为collect时判断是练单词还是文章使用
|
||||
},
|
||||
simpleWords: string[],
|
||||
load: boolean
|
||||
}
|
||||
|
||||
// words: [
|
||||
@@ -65,232 +65,236 @@ export interface State {
|
||||
// ],
|
||||
|
||||
export const useBaseStore = defineStore('base', {
|
||||
state: (): State => {
|
||||
return {
|
||||
collect: {
|
||||
...cloneDeep(DefaultDict),
|
||||
id: 'collect',
|
||||
name: '收藏',
|
||||
type: DictType.collect,
|
||||
},
|
||||
simple: {
|
||||
...cloneDeep(DefaultDict),
|
||||
id: 'skip',
|
||||
name: '简单词',
|
||||
type: DictType.simple,
|
||||
},
|
||||
wrong: {
|
||||
...cloneDeep(DefaultDict),
|
||||
id: 'wrong',
|
||||
name: '错词本',
|
||||
type: DictType.wrong,
|
||||
},
|
||||
myDicts: [
|
||||
{
|
||||
...cloneDeep(DefaultDict),
|
||||
id: '新概念英语2-课文',
|
||||
name: '新概念英语2-课文',
|
||||
type: DictType.article,
|
||||
url: 'NCE_2.json',
|
||||
translateLanguage: 'common',
|
||||
language: 'en',
|
||||
},
|
||||
{
|
||||
...cloneDeep(DefaultDict),
|
||||
id: '新概念英语2',
|
||||
name: '新概念英语2',
|
||||
type: DictType.word,
|
||||
url: 'nce-new-2.json',
|
||||
resourceId: 'nce-new-2',
|
||||
translateLanguage: 'common',
|
||||
language: 'en',
|
||||
}
|
||||
],
|
||||
current: {
|
||||
dictType: DictType.word,
|
||||
index: 1,
|
||||
// dictType: DictType.article,
|
||||
// index: 0,
|
||||
practiceType: DictType.word,
|
||||
},
|
||||
simpleWords: [
|
||||
'a', 'an',
|
||||
'i', 'my', 'you', 'your', 'me', 'it',
|
||||
'am', 'is', 'do', 'are', 'did', 'were',
|
||||
'what', 'who', 'where', 'how', 'no', 'yes',
|
||||
'not', 'can', 'could',
|
||||
'the', 'to', 'of', 'for', 'and', 'that', 'this', 'be'
|
||||
],
|
||||
load: false
|
||||
state: (): State => {
|
||||
return {
|
||||
collect: {
|
||||
...cloneDeep(DefaultDict),
|
||||
id: 'collect',
|
||||
name: '收藏',
|
||||
type: DictType.collect,
|
||||
},
|
||||
simple: {
|
||||
...cloneDeep(DefaultDict),
|
||||
id: 'skip',
|
||||
name: '简单词',
|
||||
type: DictType.simple,
|
||||
},
|
||||
wrong: {
|
||||
...cloneDeep(DefaultDict),
|
||||
id: 'wrong',
|
||||
name: '错词本',
|
||||
type: DictType.wrong,
|
||||
},
|
||||
myDicts: [
|
||||
{
|
||||
...cloneDeep(DefaultDict),
|
||||
id: '新概念英语2-课文',
|
||||
name: '新概念英语2-课文',
|
||||
type: DictType.article,
|
||||
url: 'NCE_2.json',
|
||||
translateLanguage: 'common',
|
||||
language: 'en',
|
||||
},
|
||||
{
|
||||
...cloneDeep(DefaultDict),
|
||||
id: '新概念英语2',
|
||||
name: '新概念英语2',
|
||||
type: DictType.word,
|
||||
url: 'nce-new-2.json',
|
||||
resourceId: 'nce-new-2',
|
||||
translateLanguage: 'common',
|
||||
language: 'en',
|
||||
}
|
||||
],
|
||||
current: {
|
||||
dictType: DictType.word,
|
||||
index: 1,
|
||||
// dictType: DictType.article,
|
||||
// index: 0,
|
||||
practiceType: DictType.word,
|
||||
},
|
||||
simpleWords: [
|
||||
'a', 'an',
|
||||
'i', 'my', 'you', 'your', 'me', 'it',
|
||||
'am', 'is', 'do', 'are', 'did', 'were',
|
||||
'what', 'who', 'where', 'how', 'no', 'yes',
|
||||
'not', 'can', 'could',
|
||||
'the', 'to', 'of', 'for', 'and', 'that', 'this', 'be'
|
||||
],
|
||||
load: false
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
skipWordNames: (state: State) => {
|
||||
return state.simple.originWords.map(v => v.name.toLowerCase())
|
||||
},
|
||||
getters: {
|
||||
skipWordNames: (state: State) => {
|
||||
return state.simple.originWords.map(v => v.name.toLowerCase())
|
||||
},
|
||||
skipWordNamesWithSimpleWords: (state: State) => {
|
||||
return state.simple.originWords.map(v => v.name.toLowerCase()).concat(state.simpleWords)
|
||||
},
|
||||
isArticle(state: State): boolean {
|
||||
//如果是收藏时，特殊判断
|
||||
if (state.current.dictType === DictType.collect) {
|
||||
return state.current.practiceType === DictType.article
|
||||
}
|
||||
return [
|
||||
DictType.article,
|
||||
DictType.customArticle
|
||||
].includes(state.current.dictType)
|
||||
},
|
||||
currentDict(state: State): Dict {
|
||||
switch (state.current.dictType) {
|
||||
case DictType.collect:
|
||||
return state.collect
|
||||
case DictType.simple:
|
||||
return state.simple
|
||||
case DictType.wrong:
|
||||
return state.wrong
|
||||
case DictType.word:
|
||||
case DictType.article:
|
||||
case DictType.customWord:
|
||||
case DictType.customArticle:
|
||||
return this.myDicts[this.current.index]
|
||||
}
|
||||
},
|
||||
currentEditDict(): Dict {
|
||||
return this.myDicts[this.current.editIndex]
|
||||
},
|
||||
wordIndex(state: State): number {
|
||||
return this.currentDict.wordIndex
|
||||
},
|
||||
chapter(state: State): Word[] {
|
||||
return this.currentDict.chapterWords[this.currentDict.chapterIndex] ?? []
|
||||
},
|
||||
dictTitle(state: State) {
|
||||
let title = this.currentDict.name
|
||||
switch (state.current.dictType) {
|
||||
case DictType.collect:
|
||||
if (state.current.dictType === DictType.collect) {
|
||||
title += ` 第${this.currentDict.chapterIndex + 1}章`
|
||||
}
|
||||
break
|
||||
case DictType.word:
|
||||
case DictType.article:
|
||||
case DictType.customWord:
|
||||
case DictType.customArticle:
|
||||
title += ` 第${this.currentDict.chapterIndex + 1}章`
|
||||
break
|
||||
}
|
||||
return title
|
||||
skipWordNamesWithSimpleWords: (state: State) => {
|
||||
return state.simple.originWords.map(v => v.name.toLowerCase()).concat(state.simpleWords)
|
||||
},
|
||||
isArticle(state: State): boolean {
|
||||
//如果是收藏时，特殊判断
|
||||
if (state.current.dictType === DictType.collect) {
|
||||
return state.current.practiceType === DictType.article
|
||||
}
|
||||
return [
|
||||
DictType.article,
|
||||
DictType.customArticle
|
||||
].includes(state.current.dictType)
|
||||
},
|
||||
currentDict(state: State): Dict {
|
||||
switch (state.current.dictType) {
|
||||
case DictType.collect:
|
||||
return state.collect
|
||||
case DictType.simple:
|
||||
return state.simple
|
||||
case DictType.wrong:
|
||||
return state.wrong
|
||||
case DictType.word:
|
||||
case DictType.article:
|
||||
case DictType.customWord:
|
||||
case DictType.customArticle:
|
||||
return this.myDicts[this.current.index]
|
||||
}
|
||||
},
|
||||
currentEditDict(): Dict {
|
||||
return this.myDicts[this.current.editIndex]
|
||||
},
|
||||
wordIndex(state: State): number {
|
||||
return this.currentDict.wordIndex
|
||||
},
|
||||
chapter(state: State): Word[] {
|
||||
return this.currentDict.chapterWords[this.currentDict.chapterIndex] ?? []
|
||||
},
|
||||
dictTitle(state: State) {
|
||||
let title = this.currentDict.name
|
||||
switch (state.current.dictType) {
|
||||
case DictType.collect:
|
||||
if (state.current.dictType === DictType.collect) {
|
||||
title += ` 第${this.currentDict.chapterIndex + 1}章`
|
||||
}
|
||||
break
|
||||
case DictType.word:
|
||||
case DictType.article:
|
||||
case DictType.customWord:
|
||||
case DictType.customArticle:
|
||||
title += ` 第${this.currentDict.chapterIndex + 1}章`
|
||||
break
|
||||
}
|
||||
return title
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setState(obj: any) {
|
||||
for (const [key, value] of Object.entries(obj)) {
|
||||
this[key] = value
|
||||
}
|
||||
// console.log('this/', this)
|
||||
},
|
||||
async init() {
|
||||
return new Promise(async resolve => {
|
||||
|
||||
let configStr = localStorage.getItem(SaveDict.key)
|
||||
if (configStr) {
|
||||
let obj: State = JSON.parse(configStr)
|
||||
// this.setState(obj)
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setState(obj: any) {
|
||||
for (const [key, value] of Object.entries(obj)) {
|
||||
this[key] = value
|
||||
}
|
||||
// console.log('this/', this)
|
||||
},
|
||||
async init() {
|
||||
let configStr = localStorage.getItem(SaveDict.key)
|
||||
if (configStr) {
|
||||
let obj: State = JSON.parse(configStr)
|
||||
// this.setState(obj)
|
||||
}
|
||||
|
||||
if ([
|
||||
DictType.collect,
|
||||
DictType.wrong,
|
||||
DictType.simple,
|
||||
].includes(this.current.dictType)) {
|
||||
if ([
|
||||
DictType.collect,
|
||||
DictType.wrong,
|
||||
DictType.simple,
|
||||
].includes(this.current.dictType)) {
|
||||
|
||||
} else {
|
||||
if ([
|
||||
DictType.word,
|
||||
DictType.customWord,
|
||||
].includes(this.current.dictType)) {
|
||||
if (!this.currentDict.originWords.length) {
|
||||
let r = await fetch(`./dicts/${this.currentDict.language}/${this.currentDict.type}/${this.currentDict.translateLanguage}/${this.currentDict.url}`)
|
||||
// let r = await fetch(`.${this.currentDict.url}`)
|
||||
r.json().then(v => {
|
||||
if (this.currentDict.translateLanguage === 'common') {
|
||||
const runtimeStore = useRuntimeStore()
|
||||
fetch('./translate/en2zh_CN.json').then(r => {
|
||||
r.json().then((list: Word[]) => {
|
||||
console.time()
|
||||
runtimeStore.translateWordList = list
|
||||
} else {
|
||||
if ([
|
||||
DictType.word,
|
||||
DictType.customWord,
|
||||
].includes(this.current.dictType)) {
|
||||
if (!this.currentDict.originWords.length) {
|
||||
let r = await fetch(`./dicts/${this.currentDict.language}/${this.currentDict.type}/${this.currentDict.translateLanguage}/${this.currentDict.url}`)
|
||||
// let r = await fetch(`.${this.currentDict.url}`)
|
||||
r.json().then(v => {
|
||||
if (this.currentDict.translateLanguage === 'common') {
|
||||
const runtimeStore = useRuntimeStore()
|
||||
fetch('./translate/en2zh_CN.json').then(r => {
|
||||
r.json().then((list: Word[]) => {
|
||||
runtimeStore.translateWordList = list
|
||||
|
||||
this.currentDict.originWords = cloneDeep(v)
|
||||
this.currentDict.words = cloneDeep(v)
|
||||
this.currentDict.chapterWords = chunk(this.currentDict.words, this.currentDict.chapterWordNumber)
|
||||
this.currentDict.chapterWords[this.currentDict.chapterIndex].map((w: Word) => {
|
||||
let res = list.find(a => a.name === w.name)
|
||||
if (res) w = Object.assign(w, res)
|
||||
})
|
||||
this.currentDict.originWords = cloneDeep(v)
|
||||
this.currentDict.words = cloneDeep(v)
|
||||
this.currentDict.chapterWords = chunk(this.currentDict.words, this.currentDict.chapterWordNumber)
|
||||
this.currentDict.chapterWords[this.currentDict.chapterIndex].map((w: Word) => {
|
||||
let res = list.find(a => a.name === w.name)
|
||||
if (res) w = Object.assign(w, res)
|
||||
})
|
||||
|
||||
this.load = true
|
||||
|
||||
console.timeEnd()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.currentDict.originWords = cloneDeep(v)
|
||||
this.currentDict.words = cloneDeep(v)
|
||||
this.currentDict.chapterWords = chunk(this.currentDict.words, this.currentDict.chapterWordNumber)
|
||||
this.load = true
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if ([
|
||||
DictType.article,
|
||||
DictType.customArticle,
|
||||
].includes(this.current.dictType)) {
|
||||
console.log(1, this.currentDict)
|
||||
if (!this.currentDict.articles.length) {
|
||||
console.log(2)
|
||||
let r = await fetch(`./dicts/${this.currentDict.language}/${this.currentDict.type}/${this.currentDict.translateLanguage}/${this.currentDict.url}`)
|
||||
r.json().then((v: any[]) => {
|
||||
console.log(3)
|
||||
this.currentDict.articles = cloneDeep(v.map(v => {
|
||||
v.id = uuidv4()
|
||||
return v
|
||||
}))
|
||||
this.load = true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
saveStatistics(statistics: DisplayStatistics) {
|
||||
if (statistics.spend > 1000 * 10) {
|
||||
delete statistics.wrongWords
|
||||
this.currentDict.statistics.push(statistics)
|
||||
}
|
||||
},
|
||||
async changeDict(dict: Dict, chapterIndex: number = dict.chapterIndex, chapterWordIndex: number = dict.chapterWordNumber, practiceType: DictType) {
|
||||
//TODO 保存统计
|
||||
// this.saveStatistics()
|
||||
console.log('changeDict', cloneDeep(dict), chapterIndex, chapterWordIndex)
|
||||
this.current.dictType = dict.type
|
||||
this.current.practiceType = practiceType
|
||||
if ([DictType.collect,
|
||||
DictType.simple,
|
||||
DictType.wrong].includes(dict.type)) {
|
||||
this[dict.type].chapterIndex = 0
|
||||
this[dict.type].chapterWordIndex = chapterWordIndex
|
||||
this[dict.type].chapterWords = [this[dict.type].words]
|
||||
} else {
|
||||
let rIndex = this.myDicts.findIndex((v: Dict) => v.name === dict.name)
|
||||
if (rIndex > -1) {
|
||||
this.myDicts[rIndex] = dict
|
||||
this.current.index = rIndex
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.myDicts.push(cloneDeep(dict))
|
||||
this.current.index = this.myDicts.length - 1
|
||||
this.currentDict.originWords = cloneDeep(v)
|
||||
this.currentDict.words = cloneDeep(v)
|
||||
this.currentDict.chapterWords = chunk(this.currentDict.words, this.currentDict.chapterWordNumber)
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
emitter.emit(EventKey.resetWord)
|
||||
}
|
||||
|
||||
if ([
|
||||
DictType.article,
|
||||
DictType.customArticle,
|
||||
].includes(this.current.dictType)) {
|
||||
console.log(1, this.currentDict)
|
||||
if (!this.currentDict.articles.length) {
|
||||
console.log(2)
|
||||
let r = await fetch(`./dicts/${this.currentDict.language}/${this.currentDict.type}/${this.currentDict.translateLanguage}/${this.currentDict.url}`)
|
||||
r.json().then((v: any[]) => {
|
||||
console.log(3)
|
||||
this.currentDict.articles = cloneDeep(v.map(v => {
|
||||
v.id = uuidv4()
|
||||
return v
|
||||
}))
|
||||
resolve()
|
||||
})
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
saveStatistics(statistics: DisplayStatistics) {
|
||||
if (statistics.spend > 1000 * 10) {
|
||||
delete statistics.wrongWords
|
||||
this.currentDict.statistics.push(statistics)
|
||||
}
|
||||
},
|
||||
async changeDict(dict: Dict, chapterIndex: number = dict.chapterIndex, chapterWordIndex: number = dict.chapterWordNumber, practiceType: DictType) {
|
||||
//TODO 保存统计
|
||||
// this.saveStatistics()
|
||||
console.log('changeDict', cloneDeep(dict), chapterIndex, chapterWordIndex)
|
||||
this.current.dictType = dict.type
|
||||
this.current.practiceType = practiceType
|
||||
if ([DictType.collect,
|
||||
DictType.simple,
|
||||
DictType.wrong].includes(dict.type)) {
|
||||
this[dict.type].chapterIndex = 0
|
||||
this[dict.type].chapterWordIndex = chapterWordIndex
|
||||
this[dict.type].chapterWords = [this[dict.type].words]
|
||||
} else {
|
||||
let rIndex = this.myDicts.findIndex((v: Dict) => v.name === dict.name)
|
||||
if (rIndex > -1) {
|
||||
this.myDicts[rIndex] = dict
|
||||
this.current.index = rIndex
|
||||
} else {
|
||||
this.myDicts.push(cloneDeep(dict))
|
||||
this.current.index = this.myDicts.length - 1
|
||||
}
|
||||
}
|
||||
emitter.emit(EventKey.resetWord)
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -3,109 +3,112 @@ import {cloneDeep} from "lodash-es";
|
||||
import {DefaultShortcutKeyMap, SaveConfig} from "@/types.ts";
|
||||
|
||||
export interface SettingState {
|
||||
showToolbar: boolean,
|
||||
show: boolean,
|
||||
showToolbar: boolean,
|
||||
show: boolean,
|
||||
|
||||
allSound: boolean,
|
||||
wordSound: boolean,
|
||||
wordSoundVolume: number,
|
||||
wordSoundSpeed: number,
|
||||
wordSoundType: string,
|
||||
keyboardSound: boolean,
|
||||
keyboardSoundVolume: number,
|
||||
keyboardSoundFile: string,
|
||||
translateSound: boolean,
|
||||
translateSoundVolume: number,
|
||||
effectSound: boolean,
|
||||
effectSoundVolume: number,
|
||||
repeatCount: number,
|
||||
repeatCustomCount?: number,
|
||||
dictation: boolean,
|
||||
translate: boolean,
|
||||
showNearWord: boolean
|
||||
ignoreCase: boolean
|
||||
allowWordTip: boolean
|
||||
waitTimeForChangeWord: number
|
||||
fontSize: {
|
||||
articleForeignFontSize: number,
|
||||
articleTranslateFontSize: number,
|
||||
wordForeignFontSize: number,
|
||||
wordTranslateFontSize: number,
|
||||
},
|
||||
showPanel: boolean,
|
||||
theme: string,
|
||||
collapse: boolean,
|
||||
shortcutKeyMap: Record<string, string>
|
||||
allSound: boolean,
|
||||
wordSound: boolean,
|
||||
wordSoundVolume: number,
|
||||
wordSoundSpeed: number,
|
||||
wordSoundType: string,
|
||||
keyboardSound: boolean,
|
||||
keyboardSoundVolume: number,
|
||||
keyboardSoundFile: string,
|
||||
translateSound: boolean,
|
||||
translateSoundVolume: number,
|
||||
effectSound: boolean,
|
||||
effectSoundVolume: number,
|
||||
repeatCount: number,
|
||||
repeatCustomCount?: number,
|
||||
dictation: boolean,
|
||||
translate: boolean,
|
||||
showNearWord: boolean
|
||||
ignoreCase: boolean
|
||||
allowWordTip: boolean
|
||||
waitTimeForChangeWord: number
|
||||
fontSize: {
|
||||
articleForeignFontSize: number,
|
||||
articleTranslateFontSize: number,
|
||||
wordForeignFontSize: number,
|
||||
wordTranslateFontSize: number,
|
||||
},
|
||||
showPanel: boolean,
|
||||
theme: string,
|
||||
collapse: boolean,
|
||||
shortcutKeyMap: Record<string, string>
|
||||
}
|
||||
|
||||
|
||||
export const useSettingStore = defineStore('setting', {
|
||||
state: (): SettingState => {
|
||||
return {
|
||||
showToolbar: true,
|
||||
show: false,
|
||||
showPanel: true,
|
||||
state: (): SettingState => {
|
||||
return {
|
||||
showToolbar: true,
|
||||
show: false,
|
||||
showPanel: true,
|
||||
|
||||
allSound: true,
|
||||
wordSound: true,
|
||||
wordSoundVolume: 100,
|
||||
wordSoundSpeed: 1,
|
||||
wordSoundType: 'us',
|
||||
keyboardSound: true,
|
||||
keyboardSoundVolume: 100,
|
||||
keyboardSoundFile: '老式机械',
|
||||
translateSound: true,
|
||||
translateSoundVolume: 100,
|
||||
effectSound: true,
|
||||
effectSoundVolume: 100,
|
||||
repeatCount: 1,
|
||||
repeatCustomCount: null,
|
||||
dictation: false,
|
||||
translate: true,
|
||||
allSound: true,
|
||||
wordSound: true,
|
||||
wordSoundVolume: 100,
|
||||
wordSoundSpeed: 1,
|
||||
wordSoundType: 'us',
|
||||
keyboardSound: true,
|
||||
keyboardSoundVolume: 100,
|
||||
keyboardSoundFile: '老式机械',
|
||||
translateSound: true,
|
||||
translateSoundVolume: 100,
|
||||
effectSound: true,
|
||||
effectSoundVolume: 100,
|
||||
repeatCount: 1,
|
||||
repeatCustomCount: null,
|
||||
dictation: false,
|
||||
translate: true,
|
||||
|
||||
showNearWord: true,
|
||||
ignoreCase: true,
|
||||
allowWordTip: true,
|
||||
fontSize: {
|
||||
articleForeignFontSize: 48,
|
||||
articleTranslateFontSize: 20,
|
||||
wordForeignFontSize: 48,
|
||||
wordTranslateFontSize: 20,
|
||||
},
|
||||
waitTimeForChangeWord: 300,
|
||||
showNearWord: true,
|
||||
ignoreCase: true,
|
||||
allowWordTip: true,
|
||||
fontSize: {
|
||||
articleForeignFontSize: 48,
|
||||
articleTranslateFontSize: 20,
|
||||
wordForeignFontSize: 48,
|
||||
wordTranslateFontSize: 20,
|
||||
},
|
||||
waitTimeForChangeWord: 300,
|
||||
|
||||
theme: 'auto',
|
||||
collapse: false,
|
||||
shortcutKeyMap: cloneDeep(DefaultShortcutKeyMap)
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setState(obj: any) {
|
||||
for (const [key, value] of Object.entries(obj)) {
|
||||
this[key] = value
|
||||
}
|
||||
},
|
||||
init() {
|
||||
const setDefaultConfig = () => {
|
||||
localStorage.setItem(SaveConfig.key, JSON.stringify({val: this.$state, version: SaveConfig.version}))
|
||||
}
|
||||
let configStr = localStorage.getItem(SaveConfig.key)
|
||||
if (configStr) {
|
||||
try {
|
||||
let obj: any = JSON.parse(configStr)
|
||||
if (!obj.version) {
|
||||
setDefaultConfig()
|
||||
} else {
|
||||
if (obj.version !== SaveConfig.version) {
|
||||
setDefaultConfig()
|
||||
} else {
|
||||
this.setState(obj.val)
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
setDefaultConfig()
|
||||
}
|
||||
}
|
||||
}
|
||||
theme: 'auto',
|
||||
collapse: false,
|
||||
shortcutKeyMap: cloneDeep(DefaultShortcutKeyMap)
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setState(obj: any) {
|
||||
for (const [key, value] of Object.entries(obj)) {
|
||||
this[key] = value
|
||||
}
|
||||
},
|
||||
init() {
|
||||
return new Promise(resolve => {
|
||||
const setDefaultConfig = () => {
|
||||
localStorage.setItem(SaveConfig.key, JSON.stringify({val: this.$state, version: SaveConfig.version}))
|
||||
}
|
||||
let configStr = localStorage.getItem(SaveConfig.key)
|
||||
if (configStr) {
|
||||
try {
|
||||
let obj: any = JSON.parse(configStr)
|
||||
if (!obj.version) {
|
||||
setDefaultConfig()
|
||||
} else {
|
||||
if (obj.version !== SaveConfig.version) {
|
||||
setDefaultConfig()
|
||||
} else {
|
||||
this.setState(obj.val)
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
setDefaultConfig()
|
||||
}
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user