diff --git a/src/App.vue b/src/App.vue index 7848dd71..f3db8785 100644 --- a/src/App.vue +++ b/src/App.vue @@ -53,18 +53,19 @@ onUnmounted(() => { window.removeEventListener('keyup', onKeyUp) }) -// watch(store.$state, (n) => { -// localStorage.setItem(SaveKey, JSON.stringify(n)) -// }) +watch(store.$state, (n) => { + localStorage.setItem(SaveKey, JSON.stringify(n)) +}) function next() { - if (store.wordIndex === store.chapter.length - 1) { - if (store.chapterIndex !== store.currentDict.chapterList.length - 1) { + if (store.currentDict.wordIndex === store.chapter.length - 1) { + if (store.currentDict.chapterIndex !== store.currentDict.chapterList.length - 1) { store.currentDict.wordIndex = 0 store.currentDict.chapterIndex++ console.log('这一章节完了') } else { console.log('这本书完了') + return } } else { store.currentDict.wordIndex++ @@ -140,8 +141,6 @@ async function onKeyDown(e: KeyboardEvent) { const [playAudio] = usePlayWordAudio() -const showDictModal = $ref(false) - @@ -180,7 +179,7 @@ const showDictModal = $ref(false) @import "@/assets/css/colors"; .main-page { - background: $dark-bg; + background: $dark-main-bg; width: 100vw; height: 100%; overflow: hidden; diff --git a/src/assets/css/colors.scss b/src/assets/css/colors.scss index ad247893..227d9ba4 100644 --- a/src/assets/css/colors.scss +++ b/src/assets/css/colors.scss @@ -1,6 +1,10 @@ -$dark-bg: rgb(46, 46, 46); -$dark-bg2: rgb(72, 72, 72); +$dark-main-bg: rgb(46, 46, 46); +$dark-second-bg: rgb(60, 63, 65); + +$font-color: rgb(187, 187, 187); $main: rgb(12, 140, 233); -$second: #7B91CB; -$space: 20rem; \ No newline at end of file +$second: rgb(75, 110, 175); +$item-hover: rgb(75, 75, 75); +$space: 20rem; +$footer-height: 40rem; \ No newline at end of file diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss index 53153bf1..4165abf4 100644 --- a/src/assets/css/style.scss +++ b/src/assets/css/style.scss @@ -6,6 +6,7 @@ html, body { margin: 0; width: 100%; height: 100%; + color: $font-color; } #app { @@ -28,6 +29,15 @@ html, body { border-radius: 10rem; } +footer { + box-sizing: content-box; + height: $footer-height; + display: flex; + align-items: flex-end; + justify-content: flex-end; + gap: $space; +} + .my-button { font-size: 13rem; cursor: pointer; diff --git a/src/components/ChapterDetail.vue b/src/components/ChapterDetail.vue index 0239f14a..4fddfdcf 100644 --- a/src/components/ChapterDetail.vue +++ b/src/components/ChapterDetail.vue @@ -20,7 +20,7 @@ const isActive = computed(() => {
16.
- + diff --git a/src/components/ChapterList.vue b/src/components/ChapterList.vue index 70cd6a93..9c4d6f19 100644 --- a/src/components/ChapterList.vue +++ b/src/components/ChapterList.vue @@ -1,47 +1,51 @@ diff --git a/src/stores/base.ts b/src/stores/base.ts index 509ba6e6..f3b0ec6b 100644 --- a/src/stores/base.ts +++ b/src/stores/base.ts @@ -1,99 +1,128 @@ import {defineStore} from 'pinia' -import {Config, Dict, SaveKey, State, Word} from "../types.ts" -import {chunk} from "lodash"; -import NCE_2 from "../assets/dicts/NCE_2.json"; +import {Config, Dict, DictType, SaveKey, State, Word} from "../types.ts" +import {chunk, cloneDeep} from "lodash"; export const useBaseStore = defineStore('base', { - state: (): State => { - return { - newWordDict: { - wordList: [], - chapterList: [], - chapterIndex: -1, - wordIndex: -1, - }, - skipWordDict: { - wordList: [], - chapterList: [], - chapterIndex: -1, - wordIndex: -1, - }, - dict: { - name: '新概念英语-2', - description: '新概念英语第二册', - category: '青少年英语', - tags: ['新概念英语'], - url: '/dicts/NCE_2.json', - length: 858, - language: 'en', - languageCategory: 'en', - wordList: [], - chapterList: [], - chapterIndex: 0, - wordIndex: 0, - }, - currentDictType: { - name: 'inner', - dictUrl: '/dicts/NCE_2.json' - }, - sideIsOpen: false, - dictModalIsOpen: true, - } - }, - getters: { - skipWordNames: (state: State) => { - return state.skipWordDict.wordList.map(v => v.name) + state: (): State => { + return { + newWordDict: { + type: DictType.newWordDict, + wordList: [], + chapterList: [], + chapterIndex: -1, + wordIndex: -1, + }, + skipWordDict: { + type: DictType.skipWordDict, + wordList: [], + chapterList: [], + chapterIndex: -1, + wordIndex: -1, + }, + dict: { + type: DictType.inner, + name: '新概念英语-2', + description: '新概念英语第二册', + category: '青少年英语', + tags: ['新概念英语'], + url: '/dicts/NCE_2.json', + length: 858, + language: 'en', + languageCategory: 'en', + wordList: [], + chapterList: [], + chapterIndex: 0, + wordIndex: 0, + }, + currentDictType: { + name: DictType.inner, + dictUrl: '/dicts/NCE_2.json' + }, + sideIsOpen: false, + dictModalIsOpen: false, + } }, - currentDict(state: State): Dict { - switch (state.currentDictType.name) { - case "newWordDict": - return state.newWordDict - case "skipWordDict": - return state.skipWordDict - case 'inner': - case 'custom': - return state.dict - } + getters: { + skipWordNames: (state: State) => { + return state.skipWordDict.wordList.map(v => v.name) + }, + currentDict(state: State): Dict { + switch (state.currentDictType.name) { + case DictType.newWordDict: + return state.newWordDict + case DictType.skipWordDict: + return state.skipWordDict + case DictType.inner: + case DictType.custom: + return state.dict + } + }, + chapter(): Word[] { + return this.currentDict.chapterList[this.currentDict.chapterIndex] ?? [] + }, + word(): Word { + return this.chapter[this.currentDict.wordIndex] ?? { + trans: [], + name: '' + } + }, }, - chapter(): Word[] { - return this.currentDict.chapterList[this.currentDict.wordIndex] ?? [] - }, - word(): Word { - return this.chapter[this.currentDict.wordIndex] ?? { - trans: [], - name: '' - } - }, - }, - actions: { - setState(obj: any) { - for (const [key, value] of Object.entries(obj)) { - this[key] = value - } - }, - async init() { - let configStr = localStorage.getItem(SaveKey) - if (configStr) { - let obj: Config = JSON.parse(configStr) - this.setState(obj) - } - if (this.currentDictType.name === 'inner') { - let r = await fetch(`/public/${this.currentDictType.dictUrl}`) - r.json().then(v => { - this.dict.wordList = v - this.dict.chapterList = chunk(this.dict.wordList, 15) - }) - } - if (this.currentDictType.name === 'custom') { - let r = await fetch(`/public/${this.currentDictType.dictUrl}`) - r.json().then(v => { - this.dict.wordList = v - this.dict.chapterList = chunk(this.dict.wordList, 15) - }) - } - }, - changeDict() { + 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(SaveKey) + if (configStr) { + let obj: Config = JSON.parse(configStr) + this.setState(obj) + } + if (this.currentDictType.name === DictType.inner) { + let r = await fetch(`/public/${this.currentDictType.dictUrl}`) + r.json().then(v => { + this.dict.wordList = v + this.dict.chapterList = chunk(this.dict.wordList, 15) + }) + } + if (this.currentDictType.name === DictType.custom) { + let r = await fetch(`/public/${this.currentDictType.dictUrl}`) + r.json().then(v => { + this.dict.wordList = v + this.dict.chapterList = chunk(this.dict.wordList, 15) + }) + } + }, + async changeDict(dict: Dict, chapterIndex: number = -1, wordIndex: number = -1) { + if ([DictType.newWordDict, DictType.skipWordDict].includes(dict.type)) { + this.currentDictType.name = dict.type + this.currentDictType.dictUrl = '' + this[dict.type].chapterList = [this[dict.type].wordList] + this[dict.type].chapterIndex = chapterIndex === -1 ? 0 : chapterIndex + this[dict.type].wordIndex = wordIndex === -1 ? 0 : wordIndex + } else { + if (dict.name === this.dict.name) { + this.currentDictType.name === dict.type + this.currentDictType.dictUrl = dict.url + if (wordIndex !== -1) this.dict.wordIndex = wordIndex + if (chapterIndex !== -1) this.dict.chapterIndex = chapterIndex + } else { + // let r = await fetch(`/public/${dict.url}`) + // r.json().then(v => { + // this.currentDictType.name === dict.type + // this.currentDictType.dictUrl = dict.url + // + // }) + this.dict = cloneDeep(dict) + this.dict.chapterList = chunk(this.dict.wordList, 15) + this.dict.chapterIndex = chapterIndex === -1 ? 0 : chapterIndex + this.dict.wordIndex = wordIndex === -1 ? 0 : wordIndex + } - } - }, + } + + } + }, }) \ No newline at end of file diff --git a/src/types.ts b/src/types.ts index ace4b37b..32b072b2 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,16 +1,16 @@ export type Config = { - newWords: Word[], - skipWords: Word[], - skipWordNames: string[], - dict: string, - currentDict: { - wordList: Word[], - chapterList: Word[][], - name: string, - desc: string - } - chapterIndex: number, - wordIndex: number, + newWords: Word[], + skipWords: Word[], + skipWordNames: string[], + dict: string, + currentDict: { + wordList: Word[], + chapterList: Word[][], + name: string, + desc: string + } + chapterIndex: number, + wordIndex: number, } export type Word = {"name": string, "usphone": string, "ukphone": string, "trans": string[]} @@ -25,92 +25,102 @@ export type LanguageCategoryType = 'en' | 'ja' | 'de' | 'code' export type DictionaryResource = { - id: string - name: string - description: string - category: string - tags: string[] - url: string - length: number - language: LanguageType - languageCategory: LanguageCategoryType - //override default pronunciation when not undefined - defaultPronIndex?: number + id: string + name: string + description: string + category: string + tags: string[] + url: string + length: number + language: LanguageType + languageCategory: LanguageCategoryType + //override default pronunciation when not undefined + defaultPronIndex?: number } export type Dictionary = { - id: string - name: string - description: string - category: string - tags: string[] - url: string - length: number - language: LanguageType - languageCategory: LanguageCategoryType - // calculated in the store - chapterCount: number - //override default pronunciation when not undefined - defaultPronIndex?: number + id: string + name: string + description: string + category: string + tags: string[] + url: string + length: number + language: LanguageType + languageCategory: LanguageCategoryType + // calculated in the store + chapterCount: number + //override default pronunciation when not undefined + defaultPronIndex?: number } export type PronunciationConfig = { - name: string - pron: PronunciationType + name: string + pron: PronunciationType } export type LanguagePronunciationMapConfig = { - defaultPronIndex: number - pronunciation: PronunciationConfig[] + defaultPronIndex: number + pronunciation: PronunciationConfig[] } export type LanguagePronunciationMap = { - [key in LanguageType]: LanguagePronunciationMapConfig + [key in LanguageType]: LanguagePronunciationMapConfig } export type SoundResource = { - key: string - name: string - filename: string + key: string + name: string + filename: string } export interface DictJson { - name: string, - description: string, - category: string, - tags: string[], - url: string, - length: number, - language: string, - languageCategory: string, + name: string, + description: string, + category: string, + tags: string[], + url: string, + length: number, + language: string, + languageCategory: string, +} + +export enum DictType { + newWordDict = 'newWordDict', + skipWordDict = 'skipWordDict', + inner = 'inner', + custom = 'custom', } export interface Dict extends DictJson { - wordList: Word[], - chapterList: Word[][], - chapterIndex: number, - wordIndex: number, + type: DictType, + wordList: Word[], + chapterList: Word[][], + chapterIndex: number, + wordIndex: number, } export interface State { - newWordDict: { - wordList: Word[], - chapterList: Word[][], - chapterIndex: number, - wordIndex: number, - }, - skipWordDict: { - wordList: Word[], - chapterList: Word[][], - chapterIndex: number, - wordIndex: number, - }, - dict: Dict, - currentDictType: { - name: 'newWordDict' | 'skipWordDict' | 'inner' | 'custom', - dictUrl: string - } - sideIsOpen: boolean, - dictModalIsOpen: boolean, + newWordDict: { + type: DictType, + wordList: Word[], + chapterList: Word[][], + chapterIndex: number, + wordIndex: number, + }, + skipWordDict: { + type: DictType, + wordList: Word[], + chapterList: Word[][], + chapterIndex: number, + wordIndex: number, + }, + dict: Dict, + currentDictType: { + name: DictType, + dictUrl: string + } + sideIsOpen: boolean, + dictModalIsOpen: boolean, } \ No newline at end of file