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
2023-12-02 16:59:03 +08:00
parent fd34e3e902
commit d602d5459a
10 changed files with 306 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/DictListPanel.vue
View File

@@ -8,7 +8,7 @@ import {useBaseStore} from "@/stores/base.ts";
import {useSettingStore} from "@/stores/setting.ts";
import {useRuntimeStore} from "@/stores/runtime.ts";
import DictList from "@/components/list/DictList.vue";
import DictGroup from "@/components/toolbar/DictGroup.vue";
import DictGroup from "@/components/list/DictGroup.vue";
const emit = defineEmits<{
add: [],
@@ -160,7 +160,7 @@ const groupedByCategoryAndTag = $computed(() => {
flex: 1;
overflow: auto;
height: 100%;
padding-right: var(--space);
padding-right: 10rem;
.translate {
display: flex;

2
src/components/dialog/DictDiglog.vue
View File

@@ -412,7 +412,7 @@ $header-height: 60rem;
//transform: translate(-50%, -50%);
background: var(--color-second-bg);
z-index: 99999;
width: 1000rem;
width: 1030rem;
height: 75vh;
}

20
src/components/list/BaseList.vue
View File

@@ -40,7 +40,7 @@ const localActiveIndex = $computed(() => {
function scrollViewToCenter(index: number) {
if (index === -1) return
nextTick(()=>{
nextTick(() => {
if (props.list.length > limit) {
listRef?.scrollToItem(index)
} else {
@@ -65,7 +65,7 @@ watch(() => props.isActive, (n: boolean) => {
watch(() => props.list, () => {
if (props.static) return
nextTick(()=>{
nextTick(() => {
if (props.list.length > limit) {
listRef?.scrollToItem(0)
} else {
@@ -75,14 +75,22 @@ watch(() => props.list, () => {
})
function scrollToBottom() {
nextTick(()=>{
listRef.scrollToBottom()
nextTick(() => {
if (props.list.length > limit) {
listRef.scrollToBottom()
} else {
listRef?.scrollTo(0, listRef.scrollHeight)
}
})
}
function scrollToItem(index: number) {
nextTick(()=>{
listRef.scrollToItem(index)
nextTick(() => {
if (props.list.length > limit) {
listRef?.scrollToItem(index)
} else {
listRef?.children[index]?.scrollIntoView({block: 'center', behavior: 'smooth'})
}
})
}

15
src/components/toolbar/DictGroup.vue → src/components/list/DictGroup.vue
View File

@@ -3,6 +3,7 @@ import {$computed, $ref} from "vue/macros";
import {watch} from "vue";
import {DictResource} from "@/types.ts";
import DictItem from "@/components/list/DictItem.vue";
import DictList from "@/components/list/DictList.vue";
const props = defineProps<{
category: string,
@@ -34,12 +35,9 @@ watch(() => props.groupByTag, () => {
v-for="i in Object.keys(groupByTag)">{{ i }}
</div>
</div>
<div class="dict-list">
<DictItem v-for="(dict,index) in list"
@click="emit('selectDict',{dict,index})"
:active="selectDictName === dict.id"
:dict="dict"/>
</div>
<DictList
@selectDict="e => emit('selectDict',e)"
:list="list" :select-dict-name="selectDictName"/>
</div>
</template>
@@ -74,9 +72,4 @@ watch(() => props.groupByTag, () => {
}
}
.dict-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15rem;
}
</style>

29
src/components/list/DictItem.vue
View File

@@ -21,8 +21,10 @@ const emit = defineEmits<{
:class="active && 'active'"
>
<template v-if="dict.name">
<div class="name">{{ dict.name }}</div>
<div class="desc">{{ dict.description }}</div>
<div class="top">
<div class="name">{{ dict.name }}</div>
<div class="desc">{{ dict.description }}</div>
</div>
<div class="num">{{ dict.length ?? dict.originWords.length }}词</div>
</template>
<div v-else class="add" @click.stop="emit('add')">
@@ -35,24 +37,41 @@ const emit = defineEmits<{
<style scoped lang="scss">
.dict-item {
cursor: pointer;
box-sizing: border-box;
padding: 10rem;
min-height: 100rem;
width: 125rem;
height: 165rem;
border-radius: 10rem;
position: relative;
background: var(--color-item-bg);
color: var(--color-font-1);
font-size: 14rem;
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
font-size: 18rem;
font-size: 16rem;
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //显示的行
}
.desc {
color: var(--color-font-2);
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //显示的行
}
.num {
font-weight: bold;
text-align: right;
color: var(--color-font-2);
//font-weight: bold;
}
.go {

4
src/components/list/DictList.vue
View File

@@ -27,8 +27,8 @@ const emit = defineEmits<{
<style scoped lang="scss">
.dict-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
display: flex;
flex-wrap: wrap;
gap: 15rem;
}

3
src/pages/dict/components/ChapterWordList.vue
View File

@@ -4,7 +4,7 @@ import {Sort, Word} from "@/types.ts";
import BaseIcon from "@/components/BaseIcon.vue";
import Empty from "@/components/Empty.vue";
import {$computed, $ref} from "vue/macros";
import {watch} from "vue";
import {nextTick, watch} from "vue";
import MiniDialog from "@/components/dialog/MiniDialog.vue";
import BaseButton from "@/components/BaseButton.vue";
import {useWindowClick} from "@/hooks/event.ts";
@@ -90,7 +90,6 @@ defineExpose({scrollToBottom, scrollToItem})
let show = $ref(false)
useWindowClick(() => show = false)
const playWordAudio = usePlayWordAudio()
</script>
<template>

32
src/pages/dict/components/WordDictDetail.vue
View File

@@ -38,7 +38,7 @@ let chapterWordListRef: any = $ref()
let residueWordListRef: any = $ref()
let chapterListRef: any = $ref()
let chapterIndex = $ref(1)
let residueWordList = $ref([])
// let residueWordList = $ref([])
let isEditDict = $ref(false)
let showExport = $ref(false)
let chapterWordNumber = $ref(settingStore.chapterWordNumber)
@@ -61,6 +61,15 @@ let chapterWordList: Word[] = $computed({
}
})
let residueWordList: Word[] = $computed({
get() {
return runtimeStore.editDict.residueWords ?? []
},
set(newValue) {
runtimeStore.editDict.residueWords = newValue
}
})
async function getDictDetail(val: {
dict: DictResource | Dict,
index: number
@@ -99,7 +108,7 @@ async function getDictDetail(val: {
runtimeStore.editDict.originWords = cloneDeep(v)
changeSort(runtimeStore.editDict.sort)
} else {
runtimeStore.editDict.length = runtimeStore.editDict.words.length + runtimeStore.editDict.residueWords.length
runtimeStore.editDict.length = runtimeStore.editDict.words.length
}
}
}
@@ -403,7 +412,7 @@ function resetChapterList(num?: number) {
chapterIndex = -1
runtimeStore.editDict.words.map(v => v.checked = false)
runtimeStore.editDict.chapterWords = chunk(runtimeStore.editDict.words, runtimeStore.editDict.chapterWordNumber)
runtimeStore.editDict.length = runtimeStore.editDict.words.length + runtimeStore.editDict.residueWords.length
runtimeStore.editDict.length = runtimeStore.editDict.words.length
chapterList2 = runtimeStore.editDict.chapterWords.map((v, i) => ({id: i}))
}
@@ -513,6 +522,14 @@ function editDict() {
isEditDict = true
}
function s() {
if (runtimeStore.editDict.words.length) {
showAllocationChapterDialog = true
} else {
ElMessage.warning('请先添加单词')
}
}
defineExpose({getDictDetail, add: addWord, editDict})
</script>
@@ -582,8 +599,7 @@ defineExpose({getDictDetail, add: addWord, editDict})
</div>
</div>
<div class="select">
<BaseButton v-if="isCanOperation" size="small" @click="showAllocationChapterDialog = true">智能分配
</BaseButton>
<BaseButton v-if="isCanOperation" size="small" @click="s">智能分配</BaseButton>
<span>{{ runtimeStore.editDict.chapterWords.length }}章</span>
</div>
</div>
@@ -697,10 +713,12 @@ defineExpose({getDictDetail, add: addWord, editDict})
<span class="text">最小:10</span>
<el-slider :min="10"
:step="10"
:max="runtimeStore.editDict.words.length ?? 10"
:max="runtimeStore.editDict.words.length < 10 ? 10 : runtimeStore.editDict.words.length"
v-model="chapterWordNumber"
/>
<span class="text">最大:{{ runtimeStore.editDict.words.length ?? 10 }}</span>
<span class="text">最大:{{
runtimeStore.editDict.words.length < 10 ? 10 : runtimeStore.editDict.words.length
}}</span>
</div>
<div class="notice">鼠标按住滑块，按键盘左右箭头可进行微调</div>

466
src/stores/base.ts
View File

@@ -7,13 +7,13 @@ import * as localforage from "localforage";
import {nanoid} from "nanoid";
export interface BaseState {
myDictList: Dict[],
current: {
index: number,
practiceType: DictType,//练习类型，目前仅词典为collect时判断是练单词还是文章使用
},
simpleWords: string[],
load: boolean
myDictList: Dict[],
current: {
index: number,
practiceType: DictType,//练习类型，目前仅词典为collect时判断是练单词还是文章使用
},
simpleWords: string[],
load: boolean
}
// words: [
@@ -62,238 +62,236 @@ export interface BaseState {
// ],
export const useBaseStore = defineStore('base', {
state: (): BaseState => {
return {
myDictList: [
{
...cloneDeep(DefaultDict),
id: 'collect',
name: '收藏',
type: DictType.collect,
category: '自带字典',
tags: ['自带'],
},
{
...cloneDeep(DefaultDict),
id: 'skip',
name: '简单词',
type: DictType.simple,
category: '自带字典'
},
{
...cloneDeep(DefaultDict),
id: 'wrong',
name: '错词本',
type: DictType.wrong,
category: '自带字典'
},
{
...cloneDeep(DefaultDict),
id: 'article_nce2',
name: "新概念英语2-课文",
description: '新概念英语2-课文',
category: '英语学习',
tags: ['新概念英语'],
url: 'NCE_2.json',
translateLanguage: 'common',
language: 'en',
type: DictType.article,
resourceId: 'article_nce2',
},
{
...cloneDeep(DefaultDict),
id: 'nce-new-2',
name: '新概念英语(新版)-2',
description: '新概念英语新版第二册',
category: '青少年英语',
tags: ['新概念英语'],
url: 'nce-new-2.json',
translateLanguage: 'common',
language: 'en',
type: DictType.word,
resourceId: 'nce-new-2',
},
],
current: {
index: 4,
// 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: (): BaseState => {
return {
myDictList: [
{
...cloneDeep(DefaultDict),
id: 'collect',
name: '收藏',
type: DictType.collect,
category: '自带字典',
tags: ['自带'],
},
{
...cloneDeep(DefaultDict),
id: 'skip',
name: '简单词',
type: DictType.simple,
category: '自带字典'
},
{
...cloneDeep(DefaultDict),
id: 'wrong',
name: '错词本',
type: DictType.wrong,
category: '自带字典'
},
{
...cloneDeep(DefaultDict),
id: 'article_nce2',
name: "新概念英语2-课文",
description: '新概念英语2-课文',
category: '英语学习',
tags: ['新概念英语'],
url: 'NCE_2.json',
translateLanguage: 'common',
language: 'en',
type: DictType.article,
resourceId: 'article_nce2',
},
{
...cloneDeep(DefaultDict),
id: 'nce-new-2',
name: '新概念英语(新版)-2',
description: '新概念英语新版第二册',
category: '青少年英语',
tags: ['新概念英语'],
url: 'nce-new-2.json',
translateLanguage: 'common',
language: 'en',
type: DictType.word,
resourceId: 'nce-new-2',
},
],
current: {
index: 4,
// 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: {
collect() {
return this.myDictList[0] ?? {}
},
getters: {
collect() {
return this.myDictList[0] ?? {}
},
simple(): Dict {
return this.myDictList[1]
},
wrong() {
return this.myDictList[2]
},
skipWordNames() {
return this.simple.originWords.map(v => v.name.toLowerCase())
},
skipWordNamesWithSimpleWords() {
return this.simple.originWords.map(v => v.name.toLowerCase()).concat(this.simpleWords)
},
isArticle(state: BaseState): boolean {
//如果是收藏时，特殊判断
if (this.currentDict.type === DictType.collect) {
return state.current.practiceType === DictType.article
}
return [
DictType.article,
].includes(this.currentDict.type)
},
currentDict(): Dict {
return this.myDictList[this.current.index]
},
chapter(state: BaseState): Word[] {
return this.currentDict.chapterWords[this.currentDict.chapterIndex] ?? []
},
dictTitle(state: BaseState) {
let title = this.currentDict.name
return title + this.chapterName
},
chapterName(state: BaseState) {
let title = ''
switch (this.currentDict.type) {
case DictType.collect:
if (state.current.practiceType === DictType.article || state.current.practiceType === DictType.customArticle) {
return `第${this.currentDict.chapterIndex + 1}章`
}
return ''
case DictType.word:
case DictType.customWord:
return `第${this.currentDict.chapterIndex + 1}章`
}
return title
}
simple(): Dict {
return this.myDictList[1]
},
actions: {
setState(obj: any) {
//这样不会丢失watch的值的引用
merge(this, obj)
},
async init() {
return new Promise(async resolve => {
try {
let configStr: string = await localforage.getItem(SaveDict.key)
// console.log(configStr)
// console.log('s', new Blob([configStr]).size)
configStr = ''
if (configStr) {
let data = JSON.parse(configStr)
let state: BaseState = data.val
state.load = false
wrong() {
return this.myDictList[2]
},
skipWordNames() {
return this.simple.originWords.map(v => v.name.toLowerCase())
},
skipWordNamesWithSimpleWords() {
return this.simple.originWords.map(v => v.name.toLowerCase()).concat(this.simpleWords)
},
isArticle(state: BaseState): boolean {
//如果是收藏时，特殊判断
if (this.currentDict.type === DictType.collect) {
return state.current.practiceType === DictType.article
}
return [
DictType.article,
].includes(this.currentDict.type)
},
currentDict(): Dict {
return this.myDictList[this.current.index]
},
chapter(state: BaseState): Word[] {
return this.currentDict.chapterWords[this.currentDict.chapterIndex] ?? []
},
dictTitle(state: BaseState) {
let title = this.currentDict.name
return title + this.chapterName
},
chapterName(state: BaseState) {
let title = ''
switch (this.currentDict.type) {
case DictType.collect:
if (state.current.practiceType === DictType.article || state.current.practiceType === DictType.customArticle) {
return `第${this.currentDict.chapterIndex + 1}章`
}
return ''
case DictType.word:
case DictType.customWord:
return `第${this.currentDict.chapterIndex + 1}章`
}
return title
}
},
actions: {
setState(obj: any) {
//这样不会丢失watch的值的引用
merge(this, obj)
},
async init() {
return new Promise(async resolve => {
try {
let configStr: string = await localforage.getItem(SaveDict.key)
// console.log(configStr)
// console.log('s', new Blob([configStr]).size)
configStr = ''
if (configStr) {
let data = JSON.parse(configStr)
let state: BaseState = data.val
state.load = false
if (data.version === SaveDict.version) {
this.setState(state)
} else {
this.setState(state)
}
}
} catch (e) {
console.error('读取本地dict数据失败', e)
}
if (this.current.index < 3) {
} else {
let dictResourceUrl = `./dicts/${this.currentDict.language}/${this.currentDict.type}/${this.currentDict.translateLanguage}/${this.currentDict.url}`;
if ([DictType.word].includes(this.currentDict.type)) {
if (!this.currentDict.originWords.length) {
let r = await fetch(dictResourceUrl)
// let r = await fetch(`.${this.currentDict.url}`)
let v = await r.json()
v.map(s => {
s.id = nanoid(6)
})
if (this.currentDict.translateLanguage === 'common') {
const runtimeStore = useRuntimeStore()
let r2 = await fetch('./translate/en2zh_CN-min.json')
// fetch('http://sc.ttentau.top/en2zh_CN-min.json').then(r2 => {
let list: Word[] = await r2.json()
if (list && list.length) {
runtimeStore.translateWordList = list
}
}
this.currentDict.originWords = cloneDeep(v)
this.currentDict.words = cloneDeep(v)
this.currentDict.chapterWords = chunk(this.currentDict.words, this.currentDict.chapterWordNumber)
}
}
if ([DictType.article].includes(this.currentDict.type)) {
if (!this.currentDict.articles.length) {
let r = await fetch(dictResourceUrl)
let s: any[] = await r.json()
this.currentDict.articles = cloneDeep(s.map(v => {
v.id = nanoid(6)
return v
}))
}
}
}
resolve(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, wordIndex: number = dict.wordIndex, practiceType: DictType) {
//TODO 保存统计
// this.saveStatistics()
console.log('changeDict', cloneDeep(dict), chapterIndex, wordIndex)
this.currentDict.type = dict.type
this.current.practiceType = practiceType
if ([DictType.collect,
DictType.simple,
DictType.wrong].includes(dict.type)) {
dict.chapterIndex = 0
dict.wordIndex = wordIndex
dict.chapterWordNumber = dict.words.length
dict.chapterWords = [dict.words]
if (data.version === SaveDict.version) {
this.setState(state)
} else {
if (dict.type === DictType.article || dict.type === DictType.customArticle) {
if (chapterIndex > dict.articles.length) {
dict.chapterIndex = 0
dict.wordIndex = 0
}
} else {
if (chapterIndex > dict.chapterWords.length) {
dict.chapterIndex = 0
dict.wordIndex = 0
}
}
this.setState(state)
}
// await checkDictHasTranslate(dict)
let rIndex = this.myDictList.findIndex((v: Dict) => v.id === dict.id)
if (rIndex > -1) {
this.myDictList[rIndex] = dict
this.current.index = rIndex
} else {
this.myDictList.push(cloneDeep(dict))
this.current.index = this.myDictList.length - 1
}
emitter.emit(EventKey.resetWord)
emitter.emit(EventKey.changeDict)
}
} catch (e) {
console.error('读取本地dict数据失败', e)
}
if (this.current.index < 3) {
} else {
let dictResourceUrl = `./dicts/${this.currentDict.language}/${this.currentDict.type}/${this.currentDict.translateLanguage}/${this.currentDict.url}`;
if ([DictType.word].includes(this.currentDict.type)) {
if (!this.currentDict.originWords.length) {
let r = await fetch(dictResourceUrl)
// let r = await fetch(`.${this.currentDict.url}`)
let v = await r.json()
v.map(s => {
s.id = nanoid(6)
})
if (this.currentDict.translateLanguage === 'common') {
const runtimeStore = useRuntimeStore()
let r2 = await fetch('./translate/en2zh_CN-min.json')
// fetch('http://sc.ttentau.top/en2zh_CN-min.json').then(r2 => {
let list: Word[] = await r2.json()
if (list && list.length) {
runtimeStore.translateWordList = list
}
}
this.currentDict.originWords = cloneDeep(v)
this.currentDict.words = cloneDeep(v)
this.currentDict.chapterWords = chunk(this.currentDict.words, this.currentDict.chapterWordNumber)
}
}
if ([DictType.article].includes(this.currentDict.type)) {
if (!this.currentDict.articles.length) {
let r = await fetch(dictResourceUrl)
let s: any[] = await r.json()
this.currentDict.articles = cloneDeep(s.map(v => {
v.id = nanoid(6)
return v
}))
}
}
}
resolve(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, wordIndex: number = dict.wordIndex, practiceType: DictType) {
//TODO 保存统计
// this.saveStatistics()
console.log('changeDict', cloneDeep(dict), chapterIndex, wordIndex)
this.currentDict.type = dict.type
this.current.practiceType = practiceType
if ([DictType.collect,
DictType.simple,
DictType.wrong].includes(dict.type)) {
dict.chapterIndex = 0
dict.wordIndex = wordIndex
dict.chapterWordNumber = dict.words.length
dict.chapterWords = [dict.words]
} else {
if (dict.type === DictType.article) {
if (chapterIndex > dict.articles.length) {
dict.chapterIndex = 0
dict.wordIndex = 0
}
} else {
if (chapterIndex > dict.chapterWords.length) {
dict.chapterIndex = 0
dict.wordIndex = 0
}
}
}
// await checkDictHasTranslate(dict)
let rIndex = this.myDictList.findIndex((v: Dict) => v.id === dict.id)
if (rIndex > -1) {
this.myDictList[rIndex] = dict
this.current.index = rIndex
} else {
this.myDictList.push(cloneDeep(dict))
this.current.index = this.myDictList.length - 1
}
emitter.emit(EventKey.resetWord)
emitter.emit(EventKey.changeDict)
}
},
})