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

Optimize UI interface

Browse Source
This commit is contained in:
zyronon
2023-11-01 17:26:30 +08:00
parent 091dcb5d98
commit 1832e840ff
16 changed files with 143 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,36 +4,54 @@
@import "anim";
:root {
--color-main-bg: rgb(226, 226, 226);
--color-second-bg: rgb(238, 240, 244);
--color-main-bg: #E6E8EB;
--color-second-bg: rgb(240, 242, 244);
--color-item-bg: rgb(228, 230, 232);
--color-item-hover: white;
//--color-item-active: rgb(75, 110, 175);
--color-item-active: rgb(253, 246, 236);
--color-item-border: rgb(226, 226, 226);
--color-header-bg: white;
--color-tooltip-bg: white;
--color-tooltip-shadow: #bbbbbb;
--color-font-1: rgb(75,85,99);
--color-font-1: rgb(75, 85, 99);
--color-font-2: rgb(46, 46, 46);
--color-font-3: black;
--color-font-active-1: white;
--color-font-active-2: whitesmoke;
--color-item-bg: white;
--color-item-hover: white;
--color-item-active: rgb(75, 110, 175);
--color-main-active: rgb(12, 140, 233);
--toolbar-width: 700rem;
//--toolbar-width: 50vw;
--color-gray: gray;
--color-scrollbar: rgb(147, 173, 227);
}
html[data-theme='dark'] {
//--color-main-bg: rgba(0, 5, 24, 1);
--color-main-bg: rgba(14, 18, 23, 1);
//--color-main-bg: rgba(17,24,39, 1);
--color-main-bg: rgba(14, 18, 23, 1);
--color-second-bg: rgb(60, 63, 65);
--color-header-bg: rgb(60, 63, 65);
//--color-tooltip-bg: rgb(60, 63, 65);
--color-item-bg: rgb(51, 51, 51);
--color-item-hover: #5e5e5e;
//--color-item-active: rgb(75, 110, 175);
--color-item-active: rgb(103, 103, 103);
--color-item-border: rgb(73, 73, 73);
--color-header-bg: rgb(51, 51, 51);
--color-tooltip-bg: #252525;
--color-tooltip-shadow: #3b3b3b;
--color-font-1: rgba(249, 250, 251, 0.8);
--color-font-2: rgba(255, 255, 255, 0.8);
--color-item-bg: gray;
--color-font-3: white;
--color-gray: #bebebe;
--color-scrollbar: rgb(59, 87, 138);
}
$anim-time: 0.3s;
@@ -41,8 +59,6 @@ $anim-time: 0.3s;
transition: background $anim-time, color $anim-time;
}
$font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
html, body {
padding: 0;
margin: 0;
@@ -87,7 +103,6 @@ a {
}
}
::-webkit-scrollbar {
width: 8rem;
height: 10rem;
@@ -99,14 +114,14 @@ a {
}
::-webkit-scrollbar-thumb {
background: $second;
background: var(--color-scrollbar);
border-radius: 10rem;
}
/* 火狐美化滚动条 */
* {
scrollbar-color: $second #f3f4f9;
scrollbar-color: var(--color-scrollbar) #f3f4f9;
/* 滑块颜色 滚动条背景颜色 */
scrollbar-width: thin;
/* 滚动条宽度有三种：thin、auto、none */
@@ -129,6 +144,10 @@ footer {
display: flex;
}
.gap10 {
gap: 10rem;
}
.justify-content-between {
justify-content: space-between;
}
@@ -154,7 +173,7 @@ footer {
justify-content: space-between;
align-items: center;
font-size: 16rem;
color: black;
color: var(--color-font-3);
.left {
flex: 1;
@@ -179,36 +198,53 @@ footer {
}
}
.word-item {
.common-list-item {
width: 100%;
box-sizing: border-box;
background: var(--color-item-bg);
color: var(--color-font-1);
font-size: 18rem;
border-radius: 8rem;
display: flex;
justify-content: space-between;
transition: all .3s;
padding: 10rem;
gap: 20rem;
border: 1px solid var(--color-item-border);
.volume {
opacity: 0;
}
&:hover {
background: var(--color-item-hover);
.volume {
opacity: 1;
}
}
&.active {
.phonetic {
color: white !important;
}
background: var(--color-item-active);
.volume {
color: #E6A23C;
}
.phonetic, .item-sub-title {
color: var(--color-gray) !important;
}
}
.word-wrapper {
.item-title {
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);
.title {
.word {
font-size: 20rem;
color: var(--color-font-1);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
display: flex;
}
@@ -219,7 +255,13 @@ footer {
}
}
.sub-title {
.item-sub-title {
font-size: 16rem;
color: var(--color-font-2);
color: gray;
}
.text-shadow {
color: transparent !important;
text-shadow: #b0b0b0 0 0 8rem;
user-select: none;
}

8
src/assets/css/variable.scss
View File

@@ -6,8 +6,12 @@ $font-color: rgb(187, 187, 187);
$main: rgb(64,158,255);
//$main: rgb(121,187,255);
$second: rgb(75, 110, 175);
//$second: rgb(75, 110, 175);
$second: rgb(59, 87, 138);
$item-hover: rgb(75, 75, 75);
$space: 24rem;
$footer-height: 40rem;
$card-radius: 8rem;
$card-radius: 8rem;
$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;

5
src/components/Add/AddDict.vue
View File

@@ -161,8 +161,7 @@ function close() {
<div class="page add-page">
<header>
<div class="left" @click.stop="step = 0">
<Icon icon="octicon:arrow-left-24"
class="go" width="20" color="#000000"/>
<Icon icon="octicon:arrow-left-24" class="go" width="20"/>
<div class="title">
词典详情
</div>
@@ -268,7 +267,7 @@ $header-height: 60rem;
width: 50%;
header {
color: black;
color: var(--color-font-3);
display: flex;
justify-content: space-between;
align-items: center;

56
src/components/ChapterList.vue
View File

@@ -27,8 +27,8 @@ function showWordListModal(index: number, item: Word[]) {
if (runtimeStore.editDict.translateLanguage === 'common') {
console.time()
item.map((w: Word) => {
if (!w.trans.length){
let res = runtimeStore.translateWordList.find(a => a.name === w.name)
if (!w.trans.length) {
let res = runtimeStore.translateWordList.find(a => a.name === w.name)
if (res) w = Object.assign(w, res)
}
})
@@ -40,23 +40,25 @@ function showWordListModal(index: number, item: Word[]) {
<template>
<div class="list">
<div class="item"
<div class="common-list-item"
:class="activeIndex === index && 'active'"
v-for="(item,index) in list"
@click="emit('update:activeIndex', index)">
<input type="radio" :checked="activeIndex === index">
<template v-if="isArticle">
<div class="title"
@click.stop="emitter.emit(EventKey.openArticleListModal,item)"
>{{ index + 1 }}.&nbsp;&nbsp;&nbsp;{{ item.title }}
</div>
</template>
<template v-else>
<div class="title"
@click.stop="showWordListModal(index,item)"
>第{{ index + 1 }}章&nbsp;&nbsp;&nbsp;{{ item.length }}词
</div>
</template>
<div class="flex gap10">
<input type="radio" :checked="activeIndex === index">
<template v-if="isArticle">
<div class="title"
@click.stop="emitter.emit(EventKey.openArticleListModal,item)"
>{{ index + 1 }}.&nbsp;&nbsp;&nbsp;{{ item.title }}
</div>
</template>
<template v-else>
<div class="title"
@click.stop="showWordListModal(index,item)"
>第{{ index + 1 }}章&nbsp;&nbsp;&nbsp;{{ item.length }}词
</div>
</template>
</div>
</div>
</div>
</template>
@@ -74,29 +76,11 @@ function showWordListModal(index: number, item: Word[]) {
gap: 10rem;
//padding-right: 10rem;
.item {
padding: 15rem;
background: var(--color-item-bg);
color: var(--color-font-1);
display: flex;
gap: 10rem;
border-radius: 8rem;
border-bottom: 1px solid #e1e1e1;
&.active {
background: var(--color-item-active);
color: var(--color-font-active-1);
&:hover {
.title {
border-bottom: 2px solid white !important;
}
}
}
.common-list-item {
&:hover {
.title {
border-bottom: 2px solid var(--color-item-active);
border-bottom: 2px solid gray !important;
}
}

23
src/components/ListItem.vue
View File

@@ -7,8 +7,8 @@ defineProps<{
showVolume?: boolean,
showDel?: boolean,
active?: boolean
isCollect: boolean
isSimple: boolean
isCollect?: boolean
isSimple?: boolean
}>()
defineEmits<{
@@ -65,18 +65,6 @@ defineEmits<{
<style scoped lang="scss">
.list-item {
width: 100%;
box-sizing: border-box;
background: var(--color-item-bg);
color: var(--color-font-1);
font-size: 18rem;
border-radius: 8rem;
display: flex;
justify-content: space-between;
transition: all .3s;
padding: 10rem;
gap: 20rem;
.left {
display: flex;
gap: 10rem;
@@ -100,7 +88,6 @@ defineEmits<{
}
&:hover {
background: rgb(226, 226, 226);
:deep(.collect) {
opacity: 1;
@@ -112,13 +99,13 @@ defineEmits<{
}
&.active {
background: var(--color-item-active);
:deep(.sub-title) {
color: white !important;
//color: black;
}
:deep(.title) {
color: white !important;
//color: black;
}
$c: #E6A23C;

2
src/components/MiniModal.vue
View File

@@ -38,7 +38,7 @@ withDefaults(defineProps<IProps>(), {
width: 180rem;
background: var(--color-second-bg);
border-radius: 8rem;
box-shadow: 1px 1px 6px #bbbbbb;
box-shadow: 0 0 8px 2px var(--color-item-border);
padding: 10rem $space;
left: 50%;
transform: translateX(-50%);

8
src/components/Practice/Footer.vue
View File

@@ -41,8 +41,8 @@ onUnmounted(() => {
<div class="bottom">
<el-progress
:percentage="progress"
:stroke-width="8"
:show-text="false"/>
:stroke-width="8"
:show-text="false"/>
<div class="stat">
<div class="row">
<div class="num">{{ speedMinute }}分钟</div>
@@ -97,14 +97,16 @@ onUnmounted(() => {
bottom: calc(100% + 20rem);
}
}
.bottom {
position: relative;
width: 100%;
box-sizing: border-box;
border-radius: 10rem;
background: var(--color-header-bg);
background: var(--color-second-bg);
padding: 3rem 10rem 10rem 10rem;
z-index: 2;
border: 1px solid var(--color-item-border);
.stat {
margin-top: 10rem;

2
src/components/Practice/Panel.vue
View File

@@ -214,6 +214,8 @@ $header-height: 50rem;
flex-direction: column;
transition: all .3s;
z-index: 1;
border: 1px solid var(--color-item-border);
& > header {
min-height: 50rem;

6
src/components/Practice/PracticeWord/Typing.vue
View File

@@ -195,6 +195,10 @@ defineExpose({del, showWord, hideWord})
transition: all .3s;
}
.phonetic {
font-family: $word-font-family;
}
.translate {
position: absolute;
transform: translateY(-50%);
@@ -211,7 +215,7 @@ defineExpose({del, showWord, hideWord})
.word {
font-size: 48rem;
line-height: 1;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
font-family: $word-font-family;
letter-spacing: 5rem;
.input {

24
src/components/Practice/PracticeWord/TypingWord.vue
View File

@@ -188,14 +188,14 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
<Icon class="arrow" icon="bi:arrow-left" width="22"/>
<div class="word">{{ prevWord.name }}</div>
</div>
<Tooltip title="快捷键：Tab">
<div class="next"
@click="next(false)"
v-if="nextWord">
<div class="word" :class="settingStore.dictation && 'shadow'">{{ nextWord.name }}</div>
<Icon class="arrow" icon="bi:arrow-right" width="22"/>
</div>
</Tooltip>
<div class="next"
@click="next(false)"
v-if="nextWord">
<Tooltip title="快捷键：Tab">
<div class="word" :class="settingStore.dictation && 'text-shadow'">{{ nextWord.name }}</div>
</Tooltip>
<Icon class="arrow" icon="bi:arrow-right" width="22"/>
</div>
</div>
<Typing
ref="typingRef"
@@ -282,9 +282,9 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
.word {
font-size: 24rem;
margin-bottom: 4rem;
font-family: $word-font-family;
}
.prev {
cursor: pointer;
display: flex;
@@ -299,12 +299,6 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
gap: 10rem;
float: right;
}
.shadow {
color: transparent !important;
text-shadow: #b0b0b0 0 0 6px;
user-select: none;
}
}
.options-wrapper {

2
src/components/Toolbar/DictGroup.vue
View File

@@ -54,7 +54,7 @@ watch(() => props.groupByTag, () => {
<style scoped lang="scss">
.dict-group {
color: black;
color: var(--color-font-1);
margin-bottom: 40rem;
//border-bottom: 1px dashed gray;

9
src/components/Toolbar/DictModal.vue
View File

@@ -196,8 +196,7 @@ const dictIsArticle = $computed(() => {
<div class="dict-detail-page">
<header>
<div class="left" @click.stop="step = 0">
<Icon icon="octicon:arrow-left-24"
class="go" width="20" color="#000000"/>
<Icon icon="octicon:arrow-left-24" class="go" width="20"/>
<div class="title">
词典详情
</div>
@@ -418,7 +417,7 @@ $header-height: 60rem;
.translate {
display: flex;
align-items: center;
color: black;
color: var(--color-font-1);
margin-bottom: 30rem;
& > span {
@@ -446,7 +445,7 @@ $header-height: 60rem;
height: $header-height;
align-items: center;
justify-content: space-between;
color: #000;
color: var(--color-font-3);
.left {
display: flex;
@@ -464,7 +463,7 @@ $header-height: 60rem;
.common-title {
font-size: 20rem;
color: gray;
color: var(--color-font-1);
text-align: center;
margin-bottom: 10rem;
}

2
src/components/Toolbar/SettingModal.vue
View File

@@ -267,7 +267,7 @@ useWatchAllSound()
gap: 10rem;
&.active {
background: whitesmoke;
background: var(--color-item-bg);
}
}
}

10
src/components/Toolbar/Toolbar.vue
View File

@@ -44,7 +44,7 @@ watch(() => settingStore.showToolbar, n => {
<template>
<header ref="headerRef">
<div class="content">
<div class="info" @click="runtimeStore.showDictModal = true">
<div class="info hvr-grow" @click="runtimeStore.showDictModal = true">
{{ store.dictTitle }} {{ practiceStore.repeatNumber ? ' 复习错词' : '' }}
</div>
<div class="options">
@@ -124,17 +124,17 @@ watch(() => settingStore.showToolbar, n => {
header {
width: var(--toolbar-width);
margin-top: 10rem;
background: var(--color-header-bg);
background: var(--color-second-bg);
border-radius: 8rem;
margin-bottom: 30rem;
//position: absolute;
position: relative;
z-index: 2;
padding: 10rem $space;
box-sizing: border-box;
transition: all .3s;
gap: 10rem;
//opacity: 0;
border: 1px solid var(--color-item-border);
.content {
min-height: 60rem;
@@ -143,7 +143,7 @@ header {
justify-content: space-between;
.info {
font-size: 16rem;
font-size: 17rem;
padding: 6rem 10rem;
border-radius: 6rem;
color: var(--color-font-1);

10
src/components/WordList.vue
View File

@@ -64,7 +64,7 @@ const {
<div class="list" ref="listRef">
<ListItem
v-for="(word,i) in list" :key="i"
class="word-item"
class="common-list-item"
:active="activeIndex === i"
:class="{active:activeIndex === i}"
:show-volume="true"
@@ -76,13 +76,13 @@ const {
:show-del="showDel"
@del="delWrongWord(word)"
>
<div class="word-wrapper">
<span class="title">{{ word.name }}</span>
<div class="item-title">
<span class="word" :class="settingStore.dictation && 'text-shadow'">{{ word.name }}</span>
<span class="phonetic">{{ word.usphone }}</span>
<VolumeIcon class="volume" @click="playWordAudio(word.name)"></VolumeIcon>
</div>
<div class="sub-title" v-if="word.trans.length">
<div v-for="item in word.trans">{{item}}</div>
<div class="item-sub-title" v-if="word.trans.length && settingStore.translate">
<div v-for="item in word.trans">{{ item }}</div>
</div>
</ListItem>
</div>

14
src/components/WordListModal.vue
View File

@@ -41,14 +41,14 @@ onUnmounted(() => {
>
<template #={source}>
<ListItem
class="word-item"
class="common-list-item"
:show-volume="true">
<div class="word-wrapper">
<div class="item-title">
<span class="word">{{ source.name }}</span>
<span class="phonetic">{{ source.usphone }}</span>
<VolumeIcon class="volume" @click="playWordAudio(source.name)"></VolumeIcon>
</div>
<div class="item-translate" v-if="source.trans.length">{{ source.trans.join('；') }}</div>
<div class="item-sub-title" v-if="source.trans.length">{{ source.trans.join('；') }}</div>
</ListItem>
</template>
</virtual-list>
@@ -76,13 +76,7 @@ onUnmounted(() => {
}
.dict-virtual-item {
background: var(--color-header-bg);
border-radius: 6rem;
display: flex;
justify-content: space-between;
transition: all .3s;
color: var(--color-font-1);
margin-bottom: 10rem;
margin-bottom: 15rem;
}
</style>