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-05-25 19:17:27 +08:00
parent d84cf85dd0
commit aa20b159e9
12 changed files with 132 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@
--color-background: #E6E8EB;
//--color-main-bg: #E6E8EB;
--color-main-bg: rgb(238, 240, 244);
--color-second-bg: rgb(240, 242, 244);
--color-second-bg: rgb(247, 247, 247);
--color-third-bg: rgb(213, 215, 217);
--color-item-bg: rgb(228, 230, 232);
@@ -143,9 +143,7 @@ html, body {
//font-size: 1px;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
overflow-x: hidden;
color: var(--color-font-1);
font-family: var(--font-family);
-webkit-font-smoothing: antialiased;
@@ -183,8 +181,8 @@ html, body {
}
#app {
width: 100%;
height: 100%;
width: 100vw;
min-height: 100vh;
}
a {
@@ -217,29 +215,27 @@ a {
}
}
::-webkit-scrollbar {
width: .5rem;
height: .6rem;
@supports selector(::-webkit-scrollbar) {
::-webkit-scrollbar {
width: .5rem;
height: .6rem;
}
::-webkit-scrollbar-track {
background: transparent;
border-radius: .1rem;
}
::-webkit-scrollbar-thumb {
background: var(--color-scrollbar);
border-radius: .6rem;
}
}
::-webkit-scrollbar-track {
background: transparent;
border-radius: .1rem;
}
::-webkit-scrollbar-thumb {
background: var(--color-scrollbar);
border-radius: .6rem;
}
/* 火狐美化滚动条 */
* {
scrollbar-color: var(--color-scrollbar) #f3f4f9;
/* 滑块颜色 滚动条背景颜色 */
scrollbar-width: thin;
/* 滚动条宽度有三种：thin、auto、none */
}
//@supports (scrollbar-width: thin) {
// * {
// scrollbar-color: var(--color-scrollbar) #f3f4f9;
// scrollbar-width: thin;
// }
//}
footer {
$footer-height: 60rem;
@@ -450,9 +446,9 @@ footer {
}
.text-shadow {
.word-shadow {
color: transparent !important;
text-shadow: #b0b0b0 0 0 8rem;
text-shadow: #b0b0b0 0 0 .5rem;
user-select: none;
}
@@ -488,4 +484,8 @@ footer {
.container2 {
@apply w-5/10 pt-5;
}
.center {
@apply flex justify-center items-center;
}

35
src/pages/pc/components/Ring.vue
View File

@@ -1,24 +1,24 @@
<template>
<div class="ring">
<div class="round">
<svg height="100%" width="100%">
<circle class="circle-full"
cx="2.5rem"
cy="2.5rem"
r="2.2rem"
cx="3rem"
cy="3rem"
r="2.6rem"
fill="none"
stroke-width=".3rem"
stroke-width=".4rem"
stroke-linecap="round"></circle>
<circle v-if="props.percentage" ref="circleEl"
class="circle-detail"
cx="2.5rem"
cy="2.5rem"
r="2.2rem"
cx="3rem"
cy="3rem"
r="2.6rem"
fill="none"
stroke-width=".3rem"
stroke-width=".4rem"
stroke-linecap="round"
stroke-dasharray="0,10000"></circle>
</svg>
<span class="value">{{ props.value }}</span>
<span class="text-2xl">{{ props.value }}</span>
<span class="desc">{{ props.desc }}</span>
</div>
</template>
@@ -37,7 +37,7 @@ const circleEl = $ref(null)
onMounted(() => {
if (props.percentage) {
let circleLength = Math.floor(2 * Math.PI * 40);
let circleLength = Math.floor(2 * Math.PI * 35);
let val = Number(props.percentage.toFixed(0));
circleEl.setAttribute("stroke-dasharray", "" + circleLength * val / 100 + "px,10000");
}
@@ -46,10 +46,10 @@ onMounted(() => {
<style scoped lang="scss">
@import "@/assets/css/variable";
$w: 5rem;
$w: 6rem;
$w2: calc($w / 2);
.ring {
.round {
font-size: 1rem;
width: $w;
height: $w;
@@ -58,7 +58,6 @@ $w2: calc($w / 2);
justify-content: center;
flex-direction: column;
position: relative;
margin-bottom: .38rem;
svg {
position: absolute;
@@ -75,13 +74,5 @@ $w2: calc($w / 2);
}
}
.value {
}
.desc {
font-size: .8rem;
opacity: .6;
}
}
</style>

2
src/pages/pc/components/list/WordList.vue
View File

@@ -48,7 +48,7 @@ defineExpose({scrollToBottom, scrollToItem})
</template>
<template v-slot="{ item, index }">
<div class="item-title">
<span class="word" :class="!showWord && 'text-shadow'">{{ item.word }}</span>
<span class="word" :class="!showWord && 'word-shadow'">{{ item.word }}</span>
<span class="phonetic">{{ item.phonetic0 }}</span>
<VolumeIcon class="volume" @click="playWordAudio(item.word)"></VolumeIcon>
</div>

41
src/pages/pc/components/toolbar/index.vue
View File

@@ -18,7 +18,6 @@ import {emitter, EventKey} from "@/utils/eventBus.ts";
import BaseIcon from "@/components/BaseIcon.vue";
import {useNav} from "@/utils";
const {toggleTheme} = useTheme()
const store = useBaseStore()
const settingStore = useSettingStore()
const runtimeStore = useRuntimeStore()
@@ -65,17 +64,13 @@ const {nav} = useNav()
<Tooltip
:title="`词典详情(${settingStore.shortcutKeyMap[ShortcutKey.OpenDictDetail]})`">
<div class="info" @click="emitter.emit(EventKey.openDictModal,'detail')">
{{ store.currentStudyWordDict.name }} {{ practiceStore.repeatNumber ? ' 复习错词' : '' }}
{{ store.currentStudyWordDict.name }}
</div>
</Tooltip>
<BaseIcon title="切换词典"
@click="nav('/dict')"
icon="gg:arrows-exchange"/>
<div class="info-text" v-if="practiceStore.repeatNumber">
复习错词
</div>
</div>
<div class="options" ref="moreOptionsRef">
<div class="more" :class="settingStore.collapse && 'hide'">
<Tooltip title="收起图标">
@@ -104,15 +99,6 @@ const {nav} = useNav()
<RepeatSetting/>
<Tooltip
:title="`切换主题(${settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]})`"
>
<IconWrapper>
<Icon icon="ep:moon" v-if="settingStore.theme === 'dark'"
@click="toggleTheme"/>
<Icon icon="tabler:sun" v-else @click="toggleTheme"/>
</IconWrapper>
</Tooltip>
<BaseIcon
@click="settingStore.showPanel = !settingStore.showPanel"
:title="`单词本(${settingStore.shortcutKeyMap[ShortcutKey.TogglePanel]})`"
@@ -148,35 +134,15 @@ const {nav} = useNav()
color: white;
}
}
.info-text {
@extend .info;
cursor: unset;
&:hover {
background: unset;
}
}
</style>
<style scoped lang="scss">
@import "@/assets/css/style";
.test-enter-active,
.test-leave-active {
transition: all 0.3s;
}
.test-enter-from,
.test-leave-to {
width: 0;
}
header {
width: var(--toolbar-width);
margin-top: 1rem;
background: var(--color-second-bg);
border-radius: .8rem;
margin-bottom: 2.5rem;
margin-bottom: 1.8rem;
position: relative;
z-index: 2;
padding: .4rem var(--space);
@@ -197,7 +163,8 @@ header {
max-width: 45%;
font-size: 1rem;
position: relative;
gap: .5rem;
align-items: center;
gap: .3rem;
}
.hide {

3
src/pages/pc/home/HomeIndex.vue
View File

@@ -119,9 +119,6 @@ function clickEvent(e) {
@apply rounded-xl bg-white p-4 mt-5;
}
.center {
@apply flex justify-center items-center;
}
.title {
@apply text-lg font-medium;

55
src/pages/pc/index.vue
View File

@@ -8,21 +8,27 @@ import {useBaseStore} from "@/stores/base.ts";
import {useSettingStore} from "@/stores/setting.ts";
import {useRuntimeStore} from "@/stores/runtime.ts";
import {useRouter} from "vue-router";
import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
import Tooltip from "@/pages/pc/components/Tooltip.vue";
import useTheme from "@/hooks/theme.ts";
import BaseIcon from "@/components/BaseIcon.vue";
const practiceStore = usePracticeStore()
const store = useBaseStore()
const settingStore = useSettingStore()
const runtimeStore = useRuntimeStore()
const router = useRouter()
const {toggleTheme} = useTheme()
</script>
<template>
<div class="layout">
<div class="aside">
<div class="aside" :class="{'hide':settingStore.showSide}">
<div class="top">
<Logo/>
<div class="row" @click="router.push('/home')">
<Icon icon="iconoir:home" />
<Icon icon="iconoir:home"/>
<span>主页</span>
</div>
<div class="row" @click="router.push('/word')">
@@ -43,16 +49,32 @@ const router = useRouter()
<span>社区</span>
</div>
</div>
<div class="bottom">
<div class="row"
:title="`设置(${settingStore.shortcutKeyMap[ShortcutKey.OpenSetting]})`"
@click="runtimeStore.showSettingModal = true">
<Icon icon="uil:setting"/>
<span>试卷</span>
</div>
<div class="bottom flex justify-evenly ">
<BaseIcon
:title="`收起(${settingStore.shortcutKeyMap[ShortcutKey.OpenSetting]})`"
@click="settingStore.showSide = !settingStore.showSide"
icon="formkit:left"/>
<Tooltip
:title="`切换主题(${settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]})`"
>
<IconWrapper>
<Icon icon="ep:moon" v-if="settingStore.theme === 'dark'"
@click="toggleTheme"/>
<Icon icon="tabler:sun" v-else @click="toggleTheme"/>
</IconWrapper>
</Tooltip>
<BaseIcon
:title="`设置(${settingStore.shortcutKeyMap[ShortcutKey.OpenSetting]})`"
@click="runtimeStore.showSettingModal = true"
icon="uil:setting"/>
</div>
</div>
<div class="content overflow-auto">
<BaseIcon
class="fixed top-5 left-6 z-9"
:title="`收起(${settingStore.shortcutKeyMap[ShortcutKey.OpenSetting]})`"
@click="settingStore.showSide = !settingStore.showSide"
icon="formkit:right"/>
<div class="flex-1 z-1">
<router-view></router-view>
</div>
</div>
@@ -60,11 +82,8 @@ const router = useRouter()
<style scoped lang="scss">
.layout {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;
display: flex;
}
@@ -81,6 +100,8 @@ const router = useRouter()
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: rgb(0 0 0 / 3%) 0px 0px 12px 0px;
transition: all .3s;
.row {
@apply cursor-pointer;
@@ -95,6 +116,10 @@ const router = useRouter()
font-size: 2rem;
}
}
&.hide {
transform: translateX(-12rem);
}
}
.content {

2
src/pages/pc/practice/Footer.vue
View File

@@ -85,7 +85,7 @@ onUnmounted(() => {
margin-top: 1rem;
&.hide {
margin-bottom: -7rem;
margin-bottom: -6rem;
margin-top: 3rem;
.progress {

2
src/pages/pc/practice/Panel.vue
View File

@@ -86,7 +86,7 @@ const showCollectToggleButton = $computed(() => {
</script>
<template>
<Transition name="fade">
<div class="panel anim" v-show="settingStore.showPanel || 1">
<div class="panel anim" v-show="settingStore.showPanel ">
<header>
<div class="tabs">
<div class="tab" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">当前</div>

125
src/pages/pc/practice/Statistics.vue
View File

@@ -54,69 +54,62 @@ const isEnd = $computed(() => {
<Dialog
:header="false"
v-model="statModalIsOpen">
<div class="statistics">
<div class="statistics relative flex flex-col gap-6">
<header>
<div class="title">{{ store.currentDict.name }}</div>
<div class="text-2xl">{{ store.currentStudyWordDict.name }}</div>
</header>
<div class="content">
<div class="rings">
<Ring
:value="currentStat.correctRate + '%'"
desc="正确率"
:percentage="currentStat.correctRate"/>
<Ring
:value="currentStat.wrongWordNumber"
desc="错误数"
:percentage="0"
/>
<Ring
:value="currentStat.inputWordNumber"
desc="输入数"
:percentage="0"
/>
<Ring
:value="currentStat.total"
desc="单词总数"
:percentage="0"
style="margin-bottom: 0;"/>
<div class="flex justify-center gap-10">
<div class="text-xl text-center flex flex-col justify-around">
<div class="font-bold">非常棒!</div>
<div>坚持了 <span class="color-green font-bold text-2xl">10</span> 分钟</div>
</div>
<div class="result">
<div class="wrong-words-wrapper">
<div class="wrong-words">
<div class="word" v-for="i in currentStat.wrongWords">{{ i.word }}</div>
<!-- <div class="word" v-for="i in 100">{{ i }}</div>-->
</div>
</div>
<div class="notice" v-if="!currentStat.wrongWords.length">
<!-- <div class="notice">-->
<Icon class="hvr-grow pointer" icon="flat-color-icons:like" width="20" color="#929596"/>
表现不错，全对了！
<Ring
:value="currentStat.wrongWordNumber"
desc="New"
:percentage="10"
/>
</div>
<div class="flex justify-center gap-10">
<div class="flex justify-center items-center py-3 px-10 rounded-md color-red-500 flex-col"
style="background: rgb(254,236,236)">
<div class="text-3xl">3</div>
<div class="center gap-2">
<Icon icon="iconamoon:close" class="text-2xl"/>
错词
</div>
</div>
<div class="shares">
<Tooltip title="分享给朋友">
<Icon class="hvr-grow pointer" icon="ph:share-light" width="20" color="#929596"/>
</Tooltip>
<Tooltip title="请我喝杯咖啡">
<Icon class="hvr-grow pointer" icon="twemoji:teacup-without-handle" width="20" color="#929596"/>
</Tooltip>
<div class="flex justify-center items-center py-3 px-10 rounded-md color-green-600 flex-col"
style="background: rgb(231,248,241)">
<div class="text-3xl">3</div>
<div class="center gap-2">
<Icon icon="tabler:check" class="text-2xl"/>
正确
</div>
</div>
</div>
<div class="absolute right-5 top-20 flex flex-col gap-4">
<Tooltip title="分享给朋友">
<Icon class="hvr-grow pointer" icon="ph:share-light" width="20" color="#929596"/>
</Tooltip>
<Tooltip title="请我喝杯咖啡">
<Icon class="hvr-grow pointer" icon="twemoji:teacup-without-handle" width="20" color="#929596"/>
</Tooltip>
</div>
<div class="footer">
<BaseButton
:keyboard="settingStore.shortcutKeyMap[ShortcutKey.DictationChapter]"
@click="options('write')">
默写本章
默写
</BaseButton>
<BaseButton
:keyboard="settingStore.shortcutKeyMap[ShortcutKey.RepeatChapter]"
@click="options('repeat')">
重复本章
重学
</BaseButton>
<BaseButton
:keyboard="settingStore.shortcutKeyMap[ShortcutKey.NextChapter]"
@click="options('next')">
{{ isEnd ? '重新练习' : '下一章' }}
{{ isEnd ? '重新练习' : '继续' }}
</BaseButton>
</div>
</div>
@@ -131,7 +124,6 @@ $dark-second-bg: rgb(60, 63, 65);
$item-hover: rgb(75, 75, 75);
.statistics {
width: 60rem;
padding: var(--space);
background: $dark-second-bg;
border-radius: $card-radius;
@@ -153,49 +145,6 @@ $item-hover: rgb(75, 75, 75);
gap: var(--space);
margin-bottom: 1rem;
.result {
box-sizing: border-box;
overflow: hidden;
height: 30rem;
display: flex;
flex-direction: column;
border-radius: $card-radius;
background: $item-hover;
flex: 1;
.wrong-words-wrapper {
flex: 1;
overflow: auto;
padding: var(--space);
}
.wrong-words {
box-sizing: border-box;
display: flex;
margin-right: .3rem;
flex-wrap: wrap;
gap: .6rem;
align-items: flex-start;
.word {
display: inline-block;
border-radius: .4rem;
padding: .3rem 1rem;
background: $dark-second-bg;
}
}
.notice {
$main: rgb(64,158,255);
background: $main;
height: 2.5rem;
display: flex;
gap: .6rem;
align-items: center;
padding-left: var(--space);
}
}
.shares {
display: flex;
flex-direction: column;

2
src/pages/pc/practice/practice-word/TypingWord.vue
View File

@@ -256,7 +256,7 @@ onUnmounted(() => {
<Tooltip
:title="`下一个(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
>
<div class="word" :class="settingStore.dictation && 'text-shadow'">{{ nextWord.word }}</div>
<div class="word" :class="settingStore.dictation && 'word-shadow'">{{ nextWord.word }}</div>
</Tooltip>
<Icon class="arrow" icon="bi:arrow-right" width="22"/>
</div>

5
src/pages/pc/word/StudyWord.vue
View File

@@ -192,13 +192,14 @@ useStartKeyboardEventListener()
.practice-wrapper {
font-size: 0.9rem;
width: 100%;
height: 100%;
height: 100vh;
display: flex;
overflow: hidden;
flex-direction: column;
justify-content: space-between;
align-items: center;
//padding-right: var(--practice-wrapper-padding-right);
transform: translateX(var(--practice-wrapper-translateX));
//transform: translateX(var(--practice-wrapper-translateX));
}

2
src/stores/setting.ts
View File

@@ -36,6 +36,7 @@ export interface SettingState {
wordTranslateFontSize: number,
},
showPanel: boolean,
showSide: boolean,
theme: string,
collapse: boolean,
chapterWordNumber: number,
@@ -48,6 +49,7 @@ export const DefaultSettingState = (): SettingState => ({
showToolbar: true,
show: false,
showPanel: true,
showSide: true,
allSound: true,
wordSound: true,