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
2024-06-01 03:15:07 +08:00
parent d5495679ff
commit 380a13410e
7 changed files with 192 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/pc/components/Panel.vue
View File

@@ -23,7 +23,7 @@ import Slide from "@/pages/pc/components/Slide.vue";
import {useNav} from "@/utils";
const props = withDefaults(defineProps<{
type: DictType
type?: DictType
}>(), {
type: DictType.word
})
@@ -69,12 +69,16 @@ const {
const {nav} = useNav()
const showCollectToggleButton = $computed(() => {
if (props.type === DictType.word) return !store.collectWord.length
return !store.collectArticle.length
if (props.type === DictType.word) return store.collectWord.words.length
return store.collectArticle.articles.length
})
function changeCollect(){
function changeCollect() {
if (props.type === DictType.word) {
store.currentStudy.word.dictIndex = -store.collectWord.index
} else {
}
}
</script>
@@ -84,9 +88,10 @@ function changeCollect(){
<header>
<div class="tabs">
<div class="tab" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">当前</div>
<div class="tab" :class="tabIndex === 1 && 'active'" @click="tabIndex = 1">{{ store.collect.name }}</div>
<div class="tab" :class="tabIndex === 1 && 'active'" @click="tabIndex = 1">收藏</div>
<div class="tab" :class="tabIndex === 2 && 'active'" @click="tabIndex = 2">{{ store.simple.name }}</div>
<div class="tab" :class="tabIndex === 3 && 'active'" @click="tabIndex = 3">{{ store.wrong.name }}</div>
<div class="tab" :class="tabIndex === 4 && 'active'" @click="tabIndex = 4">{{ store.master.name }}</div>
</div>
<Tooltip
:title="`关闭(${settingStore.shortcutKeyMap[ShortcutKey.TogglePanel]})`"
@@ -102,18 +107,18 @@ function changeCollect(){
<div class="panel-page-item">
<div class="list-header">
<div class="left">
<div class="dict-name" v-if="props.type === DictType.word && store.collectWord.length">
{{ store.collectWord.length }}个单词
<div class="dict-name" v-if="props.type === DictType.word && store.collectWord.words.length">
{{ store.collectWord.words.length }}个单词
</div>
<div class="dict-name" v-if="props.type === DictType.article">
{{ store.collectArticle.length }}篇文章
<div class="dict-name" v-if="props.type === DictType.article && store.collectArticle.articles.length">
{{ store.collectArticle.articles.length }}篇文章
</div>
<BaseIcon icon="fluent:add-12-regular" title="添加" @click="nav('edit-word-dict',{type:0})"/>
</div>
<template v-if="showCollectToggleButton">
<PopConfirm
:title="`确认切换？`"
@confirm="changeIndex( store.collect)"
@confirm="changeCollect"
>
<BaseButton size="small">切换</BaseButton>
</PopConfirm>
@@ -121,9 +126,9 @@ function changeCollect(){
</div>
<template v-if="props.type === DictType.word">
<WordList
v-if="store.collectWord.length"
v-if="store.collectWord.words.length"
class="word-list"
:list="store.collectWord">
:list="store.collectWord.words">
<template v-slot:suffix="{item,index}">
<BaseIcon
class="del"
@@ -136,8 +141,8 @@ function changeCollect(){
</template>
<template v-else>
<ArticleList
v-if="store.collectArticle.length"
:list="store.collectArticle">
v-if="store.collectArticle.articles.length"
:list="store.collectArticle.articles">
<template v-slot:suffix="{item,index}">
<BaseIcon
class="del"
@@ -154,10 +159,10 @@ function changeCollect(){
<div class="panel-page-item">
<div class="list-header">
<div class="left">
<div class="dict-name">总词数：{{ store.simple2.length }}</div>
<div class="dict-name">总词数：{{ store.simple.words.length }}</div>
<BaseIcon icon="fluent:add-12-regular" title="添加" @click="nav('edit-word-dict',{type:2})"/>
</div>
<template v-if="store.simple2.length">
<template v-if="store.simple.words.length">
<PopConfirm
:title="`确认切换？`"
@confirm="changeIndex( store.simple)"
@@ -167,9 +172,9 @@ function changeCollect(){
</template>
</div>
<WordList
v-if="store.simple2.length"
v-if="store.simple.words.length"
class="word-list"
:list="store.simple2">
:list="store.simple.words">
<template v-slot:suffix="{item,index}">
<BaseIcon
class="del"
@@ -182,22 +187,19 @@ function changeCollect(){
</div>
</div>
<div class="slide-item">
<div class="panel-page-item" v-if="store.wrong2.length">
<div class="panel-page-item" v-if="store.wrong.words.length">
<div class="list-header">
<div class="dict-name">总词数：{{ store.wrong2.length }}</div>
<template
v-if="store.wrong2.length">
<PopConfirm
:title="`确认切换？`"
@confirm="changeIndex( store.wrong)"
>
<BaseButton size="small">切换</BaseButton>
</PopConfirm>
</template>
<div class="dict-name">总词数：{{ store.wrong.words.length }}</div>
<PopConfirm
:title="`确认切换？`"
@confirm="changeIndex( store.wrong)"
>
<BaseButton size="small">切换</BaseButton>
</PopConfirm>
</div>
<WordList
class="word-list"
:list="store.wrong2">
:list="store.wrong.words">
<template v-slot:suffix="{item,index}">
<BaseIcon
class="del"

22
src/pages/pc/components/PopConfirm.vue
View File

@@ -90,27 +90,27 @@ $bg-color: rgb(226, 226, 226);
.pop-confirm-content {
position: fixed;
background: var(--color-tooltip-bg);
padding: 15rem;
border-radius: 4rem;
transform: translate(-50%, calc(-100% - 10rem));
padding: 1rem;
border-radius: .24rem;
transform: translate(-50%, calc(-100% - .6rem));
box-shadow: 0 0 6px 1px var(--color-tooltip-shadow);
z-index: 999;
.text {
color: var(--color-font-1);
text-align: start;
font-size: 14rem;
width: 150rem;
min-width: 150rem;
font-size: .9rem;
width: 9rem;
min-width: 9rem;
}
.options {
margin-top: 15rem;
margin-top: .9rem;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12rem;
font-size: 12rem;
gap: .7rem;
font-size: .7rem;
div {
cursor: pointer;
@@ -119,8 +119,8 @@ $bg-color: rgb(226, 226, 226);
.main {
color: gray;
background: $bg-color;
padding: 3rem 10rem;
border-radius: 4rem;
padding: .2rem .6rem;
border-radius: .24rem;
}
}
}

7
src/pages/pc/word/EditWordDict.vue
View File

@@ -36,12 +36,7 @@ let list = $computed({
onMounted(() => {
switch (Number(route.query.type)) {
case 0:
runtimeStore.editDict = cloneDeep({
...cloneDeep(DefaultDict),
id: nanoid(),
name: '收藏',
words: store.collectWord
})
runtimeStore.editDict = cloneDeep(store.collectWord)
break
case 1:
runtimeStore.editDict = cloneDeep({

14
src/pages/pc/word/WordHome.vue
View File

@@ -74,11 +74,11 @@ function study() {
<div style="color:#ac6ed1;" class="cursor-pointer" v-if="false">
更改目标
</div>
<div class="text-xs">学习 {{ store.currentStudy.word.perDayStudyNumber }} 个单词</div>
<div class="text-xs">学习 {{ store.currentStudyWordDict.perDayStudyNumber }} 个单词</div>
</div>
</div>
<div class="bg-slate-200 w-10 h-10 flex center text-2xl rounded">
{{ store.currentStudy.word.perDayStudyNumber }}
{{ store.currentStudyWordDict.perDayStudyNumber }}
</div>
</div>
<div class="mt-2">
@@ -89,7 +89,7 @@ function study() {
<div class="mt-2">
<div class="text-sm flex justify-between">
已学习{{ store.currentStudyWordProgress }}%
<span>{{ store.currentStudy.word.lastLearnIndex }} /{{ store.currentStudyWordDict.words.length }}词</span>
<span>{{ store.currentStudyWordDict.lastLearnIndex }} /{{ store.currentStudyWordDict.words.length }}词</span>
</div>
<el-progress class="mt-1" :percentage="store.currentStudyWordProgress" :show-text="false"></el-progress>
</div>
@@ -131,19 +131,19 @@ function study() {
<div class="grid grid-cols-6 gap-4 mt-4">
<div class="my-dict" @click="nav('edit-word-dict',{type:0})">
<span>收藏</span>
<div class="absolute bottom-4 right-4">{{ store.collectWord.length }}个词</div>
<div class="absolute bottom-4 right-4">{{ store.collectWord.words.length }}个词</div>
</div>
<div class="my-dict" @click="nav('edit-word-dict',{type:1})">
<span>错词本</span>
<div class="absolute bottom-4 right-4">{{ store.wrong2.length }}个词</div>
<div class="absolute bottom-4 right-4">{{ store.wrong.words.length }}个词</div>
</div>
<div class="my-dict" @click="nav('edit-word-dict',{type:2})">
<span>简单词</span>
<div class="absolute bottom-4 right-4">{{ store.simple2.length }}个词</div>
<div class="absolute bottom-4 right-4">{{ store.simple.words.length }}个词</div>
</div>
<div class="my-dict" @click="nav('edit-word-dict',{type:3})">
<span>已掌握</span>
<div class="absolute bottom-4 right-4">{{ store.master.length }}个词</div>
<div class="absolute bottom-4 right-4">{{ store.master.words.length }}个词</div>
</div>
</div>
</div>