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

Develop dictionary management function

Browse Source
This commit is contained in:
zyronon
2023-11-27 02:19:55 +08:00
parent 88c38514fe
commit e9b2739ba1
5 changed files with 83 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/assets/css/style.scss
View File

@@ -38,6 +38,9 @@
--color-input-bg: white;
--color-input-icon: #d3d4d7;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
--word-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}
html.dark {
@@ -123,6 +126,14 @@ html.dark {
transition: background var(--anim-time), color var(--anim-time), border var(--anim-time);
}
.word-font-family {
font-family: var(--word-font-family);
//font-family: source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif; //medium
//font-family: Optimistic Text,-apple-system,ui-sans-serif,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; // react
//font-family: Google Sans Text,Noto Sans,Noto Sans JP,Noto Sans KR,Noto Naskh Arabic,Noto Sans Thai,Noto Sans Hebrew,Noto Sans Bengali,sans-serif; //android-dev
line-height: 30rem;
}
html, body {
font-size: 1px;
padding: 0;
@@ -131,11 +142,15 @@ html, body {
height: 100%;
color: $font-color;
//color: var(--color-font-1);
font-family: $font-family;
//font-family: var(--font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.en-word {
font-family: var(--word-font-family);
}
#app {
width: 100%;
height: 100%;
@@ -294,7 +309,7 @@ footer {
padding: 0 var(--space);
}
.list-item-wrapper{
.list-item-wrapper {
padding-bottom: 15rem;
}
@@ -316,7 +331,7 @@ footer {
display: flex;
gap: 10rem;
.title-wrapper{
.title-wrapper {
display: flex;
flex-direction: column;
gap: 3rem;
@@ -360,7 +375,6 @@ footer {
display: flex;
align-items: center;
gap: 8rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
color: var(--color-font-1);
.word {
@@ -387,7 +401,7 @@ footer {
}
.common-title {
height: 40rem;
min-height: 40rem;
font-size: 18rem;
color: var(--color-font-1);
display: flex;

4
src/components/Empty.vue
View File

@@ -30,6 +30,10 @@ defineEmits<{
font-size: 12rem;
gap: 20rem;
span {
font-family: var(--font-family);
}
img {
margin-top: -50rem;
width: 120rem;

116
src/pages/dict/components/ArticleDetail.vue
View File

@@ -9,9 +9,10 @@ import {$ref} from "vue/macros";
import VirtualWordList2 from "@/components/list/VirtualWordList2.vue";
import {cloneDeep} from "lodash-es";
import {Article, DefaultArticle, TranslateType} from "@/types.ts";
import {emitter, EventKey} from "@/utils/eventBus.ts";
const runtimeStore = useRuntimeStore()
let chapterIndex = $ref(0)
let chapterIndex = $ref(-1)
let article: Article = $ref(cloneDeep(DefaultArticle))
function handleCheckedChange(val) {
@@ -19,6 +20,19 @@ function handleCheckedChange(val) {
article = val.data
}
function delArticle(index: number) {
runtimeStore.editDict.articles.splice(index, 1)
if (runtimeStore.editDict.articles.length) {
if (chapterIndex === index) {
article = runtimeStore.editDict.articles[index]
}
} else {
article = cloneDeep(DefaultArticle)
}
ElMessage.success('删除成功！')
}
</script>
@@ -30,14 +44,12 @@ function handleCheckedChange(val) {
<span>章节管理</span>
<div class="options">
<BaseIcon
@click="emitter.emit(EventKey.openArticleListModal)"
icon="fluent:add-20-filled"
title="新增章节"/>
<span>{{ runtimeStore.editDict.articles.length }}章</span>
</div>
</div>
<div class="select">
<BaseButton size="small" @click="showAllocationChapterDialog = true">智能分配</BaseButton>
<span>{{ runtimeStore.editDict.articles.length }}章</span>
</div>
</div>
<div class="wrapper">
<ArticleList3
@@ -52,82 +64,41 @@ function handleCheckedChange(val) {
<template v-slot="{data,index}">
<BaseIcon
class-name="del"
@click="emit('edit',{data,index})"
@click="emitter.emit(EventKey.openArticleListModal,data)"
title="编辑"
icon="tabler:edit"/>
<BaseIcon
class-name="del"
@click="del({data,index})"
@click="delArticle(index)"
title="删除"
icon="solar:trash-bin-minimalistic-linear"/>
</template>
</ArticleList3>
<template v-if="false">
<RecycleScroller
v-if="runtimeStore.editDict.articles.length"
ref="chapterListRef"
style="height: 100%;"
:items="runtimeStore.editDict.articles"
:item-size="63"
key-field="id"
v-slot="{ item,index }"
>
<div style="padding: 0 15rem;">
<div class="common-list-item"
:class="chapterIndex === item.id && 'active'"
@click="handleChangeCurrentChapter(item.id)">
<div class="flex gap10 flex1 ">
<input type="radio" :checked="chapterIndex === item.id">
<div class="item-title flex flex1 space-between">
<span>{{ index + 1 }}.</span>
<span>{{ item.title }}</span>
</div>
</div>
<div class="right">
<BaseIcon
class-name="del"
@click="delWordChapter(item.id)"
title="移除"
icon="solar:trash-bin-minimalistic-linear"/>
</div>
</div>
</div>
</RecycleScroller>
<Empty v-else/>
</template>
<Empty v-else/>
</div>
</div>
<div class="article-content">
<div class="common-title">原文</div>
<div class="item">
<div class="label">标题：</div>
<p>{{ article.title }}</p>
<div class="article-content word-font-family">
<div class="title">
<div>{{ article.title }}</div>
</div>
<div class="item basic">
<div class="label">正文：</div>
<p>
{{ article.text }}
</p>
<div class="text" v-if="article.text">
<div class="sentence" v-for="t in article.text.split('\n')">{{ t }}</div>
</div>
<Empty v-else/>
</div>
<div class="article-content">
<div class="common-title">译文</div>
<div class="item">
<div class="label">标题：</div>
<p>{{ article.titleTranslate }}</p>
<div class="title">
<div>{{ article.titleTranslate }}</div>
</div>
<div class="item basic">
<div class="label">正文：</div>
<p>
{{ article.textCustomTranslate }}
</p>
<div class="text" v-if="article.textCustomTranslate">
{{ article.textCustomTranslate }}
</div>
<Empty v-else/>
</div>
</div>
</template>
<style scoped lang="scss">
.article-detail {
width: 100%;
height: 100%;
@@ -180,6 +151,7 @@ function handleCheckedChange(val) {
.wrapper {
flex: 1;
padding-bottom: var(--space);
overflow: hidden;
}
}
@@ -187,13 +159,27 @@ function handleCheckedChange(val) {
.article-content {
@extend .box;
flex: 1;
overflow: auto;
padding: var(--space);
overflow: hidden;
font-size: 20rem;
.item {
display: flex;
align-items: flex-start;
gap: var(--space);
.title {
text-align: center;
margin-bottom: var(--space);
font-size: 24rem;
}
.text {
//white-space: pre-wrap;
text-indent: 1.5em;
line-height: 35rem;
overflow: auto;
padding-right: 10rem;
padding-bottom: 50rem;
.sentence {
margin-bottom: 30rem;
}
}
}
}

2
src/pages/dict/index.vue
View File

@@ -11,7 +11,7 @@ import DictManage from "@/pages/dict/DictManage.vue";
</template>
<style scoped lang="scss">
#page{
#page {
background: var(--color-main-bg);
height: 100%;
width: 100%;

13
src/pages/practice/practice-article/TypingArticle.vue
View File

@@ -382,7 +382,7 @@ const {
<template>
<div class="typing-article">
<header>
<div class="title">{{ props.article.title }}</div>
<div class="title word">{{ props.article.title }}</div>
<div class="titleTranslate" v-if="settingStore.translate">{{ props.article.titleTranslate }}</div>
<div class="options-wrapper">
<div class="flex gap10">
@@ -498,14 +498,13 @@ $article-width: 1000px;
text-align: center;
color: rgba(gray, .8);
font-size: 36rem;
font-weight: 500;
word-spacing: 3rem;
//opacity: 0;
font-family: var(--word-font-family);
}
.titleTranslate {
@extend .title;
font-size: 20rem;
font-family: unset;
}
.options-wrapper {
@@ -527,7 +526,6 @@ $article-width: 1000px;
//height: 100%;
font-size: 24rem;
line-height: 2.5;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
color: gray;
word-break: keep-all;
word-wrap: break-word;
@@ -535,11 +533,16 @@ $article-width: 1000px;
padding-top: 20rem;
.section {
font-family: var(--word-font-family);
margin-bottom: var(--space);
.sentence {
transition: all .3s;
&:first-child{
padding-left: 50rem;
}
&.dictation {
letter-spacing: 3rem;
}