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

添加统计

Browse Source
This commit is contained in:
zyronon
2023-08-26 17:38:20 +08:00
parent d0e81638ec
commit 997187b1f6
7 changed files with 231 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Modal/Statistics.vue
View File

@@ -8,24 +8,52 @@ import Fireworks from "@/components/Fireworks.vue";
import BaseButton from "@/components/BaseButton.vue";
const store = useBaseStore()
function write() {
store.isDictation = true
repeat()
}
//TODO 需要判断是否已忽略
function repeat() {
store.currentDict.wordIndex = 0
store.currentWrongDict.wordList = []
store.statModalIsOpen = false
}
function next() {
store.currentDict.chapterIndex++
repeat()
}
</script>
<template>
<Modal v-model="store.dictModalIsOpen2">
<Modal v-model="store.statModalIsOpen" @close="next">
<div class="statistics">
<header>
<div class="title">新概念英语-2 第3章</div>
</header>
<div class="content">
<div class="rings">
<Ring/>
<Ring/>
<Ring style="margin-bottom: 0;"/>
<Ring
:value="store.lastStatistics.correctRate + '%'"
desc="正确率"
:percentage="store.lastStatistics.correctRate"/>
<Ring
:value="store.lastStatistics.correctNumber"
desc="正确数"
:percentage="0"
/>
<Ring
:value="store.currentDict.wordIndex"
desc="输入数"
:percentage="0"
style="margin-bottom: 0;"/>
</div>
<div class="result">
<div class="wrong-words-wrapper">
<div class="wrong-words">
<div class="word" v-for="i in 500">Yes</div>
<div class="word" v-for="i in store.currentWrongDict.wordList">{{ i.name }}</div>
</div>
</div>
@@ -47,19 +75,19 @@ const store = useBaseStore()
</div>
</div>
<div class="footer">
<BaseButton keyboard="Ctrl + Enter" >
<BaseButton keyboard="Ctrl + Enter" @click="write">
默写本章节
</BaseButton>
<BaseButton keyboard="Enter" >
<BaseButton keyboard="Enter" @click="repeat">
重复本章节
</BaseButton>
<BaseButton keyboard="Tab" >
<BaseButton keyboard="Tab" @click="next">
下一章节
</BaseButton>
</div>
</div>
</Modal>
<!-- <Fireworks v-if="store.dictModalIsOpen2"/>-->
<Fireworks v-if="store.statModalIsOpen"/>
</template>
<style scoped lang="scss">
@import "@/assets/css/style";

17
src/components/Ring.vue
View File

@@ -3,12 +3,13 @@
<svg height="100%" width="100%">
<circle class="circle-full" cx="45rem" cy="45rem" r="40rem" fill="none" stroke-width="8rem"
stroke-linecap="round"></circle>
<circle ref="circleEl" class="circle-detail" cx="45rem" cy="45rem" r="40rem" fill="none" stroke-width="8rem"
<circle v-if="props.percentage" ref="circleEl" class="circle-detail" cx="45rem" cy="45rem" r="40rem" fill="none"
stroke-width="8rem"
stroke-linecap="round"
stroke-dasharray="0,10000"></circle>
</svg>
<span class="value">remark</span>
<span class="desc">dfadf</span>
<span class="value">{{ props.value }}</span>
<span class="desc">{{ props.desc }}</span>
</div>
</template>
<script setup lang="ts">
@@ -16,6 +17,8 @@ import {onMounted} from "vue"
const props = withDefaults(defineProps<{
percentage?: number,
value: string | number,
desc: string,
}>(), {
percentage: 90,
})
@@ -23,9 +26,11 @@ const props = withDefaults(defineProps<{
const circleEl = $ref(null)
onMounted(() => {
let circleLength = Math.floor(2 * Math.PI * 40);
let val = Number(props.percentage.toFixed(0));
circleEl.setAttribute("stroke-dasharray", "" + circleLength * val / 100 + "rem,10000");
if (props.percentage) {
let circleLength = Math.floor(2 * Math.PI * 40);
let val = Number(props.percentage.toFixed(0));
circleEl.setAttribute("stroke-dasharray", "" + circleLength * val / 100 + "rem,10000");
}
})
</script>
<style scoped lang="scss">

12
src/components/Side.vue
View File

@@ -92,18 +92,18 @@ function changeDict(dict: Dict, i: number) {
<div class="page0">
<header>
<a href="" target="_blank"></a>
<div class="dict-name">总词数：{{ store.wrongDict.wordList.length }}</div>
<div class="dict-name">总词数：{{ store.allWrongDict.wordList.length }}</div>
</header>
<WordList
class="word-list"
@change="(e:number) => store.changeDict(store.wrongDict,-1,e)"
@change="(e:number) => store.changeDict(store.allWrongDict,-1,e)"
:isActive="store.sideIsOpen && tabIndex === 2"
:list="store.wrongDict.wordList"
:activeIndex="store.wrongDict.wordIndex"/>
<footer v-if="store.currentDictType !== DictType.wrongDict && store.wrongDict.wordList.length">
:list="store.allWrongDict.wordList"
:activeIndex="store.allWrongDict.wordIndex"/>
<footer v-if="store.currentDictType !== DictType.allWrongDict && store.allWrongDict.wordList.length">
<PopConfirm
:title="`确认切换？`"
@confirm="store.changeDict(store.wrongDict)"
@confirm="store.changeDict(store.allWrongDict)"
>
<BaseButton>
切换

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

@@ -37,12 +37,16 @@ const store = useBaseStore()
const showFeedbackModal = $ref(false)
const showSettingModal = $ref(false)
const showDictModal = $ref(false)
function t() {
console.log('t')
}
</script>
<template>
<header :class="!store.setting.showToolbar && 'hide'">
<div class="info" @click="showDictModal = true">
{{ store.currentDict.name }} 第{{ store.currentDict.chapterIndex + 1}}章
{{ store.currentDict.name }} 第{{ store.currentDict.chapterIndex + 1 }}章
</div>
<div class="options">
<Tooltip title="切换主题">
@@ -65,8 +69,8 @@ const showDictModal = $ref(false)
</Tooltip>
<Tooltip title="开关默写模式">
<IconWrapper>
<IconEye></IconEye>
<IconEyeSlash></IconEyeSlash>
<IconEyeSlash v-if="store.isDictation" @click="store.isDictation = false"></IconEyeSlash>
<IconEye v-else @click="store.isDictation = true"></IconEye>
</IconWrapper>
</Tooltip>
<Tooltip title="开关释义显示">
@@ -91,7 +95,7 @@ const showDictModal = $ref(false)
<IconCog6Tooth @click="showSettingModal = true"></IconCog6Tooth>
</IconWrapper>
</Tooltip>
<div class="my-button" @click="store.dictModalIsOpen2 = true">ok</div>
<div class="my-button" @click="store.statModalIsOpen = true">ok</div>
<Tooltip title="单词本">
<menu-fold class="menu" @click="store.sideIsOpen = !store.sideIsOpen"

52
src/components/Type.vue
View File

@@ -33,7 +33,6 @@ import {
let input = $ref('')
let wrong = $ref('')
let showFullWord = $ref(false)
let isDictation = $ref(true)
let activeIndex = $ref(-1)
const store = useBaseStore()
@@ -73,10 +72,11 @@ watch(store.$state, (n) => {
function next() {
if (store.currentDict.wordIndex === store.chapter.length - 1) {
if (store.currentDict.chapterIndex !== store.currentDict.chapterList.length - 1) {
store.currentDict.wordIndex = 0
store.currentDict.chapterIndex++
// store.currentDict.wordIndex = 0
store.currentDict.wordIndex++
// store.currentDict.chapterIndex++
console.log('这一章节完了')
wrongWord = []
store.statModalIsOpen = true
} else {
console.log('这本书完了')
return
@@ -98,16 +98,19 @@ function next() {
next()
}
wrong = input = ''
store.lastStatistics.correctNumber = store.currentDict.wordIndex - wrongWord.length
store.lastStatistics.correctRate = Math.trunc(((store.currentDict.wordIndex - wrongWord.length) / (store.currentDict.wordIndex)) * 100)
if (store.currentDict.wordIndex) {
store.lastStatistics.correctNumber = store.currentDict.wordIndex - store.currentWrongDict.wordList.length
store.lastStatistics.correctRate = Math.trunc(((store.currentDict.wordIndex - store.currentWrongDict.wordList.length) / (store.currentDict.wordIndex)) * 100)
} else {
store.lastStatistics.correctRate = -1
store.lastStatistics.correctNumber = -1
}
}
function onKeyUp(e: KeyboardEvent) {
showFullWord = false
}
let wrongWord = $ref([])
async function onKeyDown(e: KeyboardEvent) {
//TODO 还有横杠
if ((e.keyCode >= 65 && e.keyCode <= 90) || e.code === 'Space') {
@@ -117,13 +120,13 @@ async function onKeyDown(e: KeyboardEvent) {
wrong = ''
playKeySound()
} else {
if (!store.wrongDict.wordList.find((v: Word) => v.name === store.word.name)) {
store.wrongDict.wordList.push(store.word)
if (!store.allWrongDict.wordList.find((v: Word) => v.name === store.word.name)) {
store.allWrongDict.wordList.push(store.word)
}
if (!wrongWord.find((v: string) => v === store.word.name)) {
wrongWord.push(store.word.name)
if (!store.currentWrongDict.wordList.find((v: Word) => v.name === store.word.name)) {
store.currentWrongDict.wordList.push(store.word)
}
store.lastStatistics.correctRate = Math.trunc(((store.currentDict.wordIndex + 1 - wrongWord.length) / (store.currentDict.wordIndex + 1)) * 100)
store.lastStatistics.correctRate = Math.trunc(((store.currentDict.wordIndex + 1 - store.currentWrongDict.wordList.length) / (store.currentDict.wordIndex + 1)) * 100)
wrong = letter
playKeySound()
playBeep()
@@ -195,7 +198,7 @@ function format(val: number, suffix: string = '') {
<div class="word" :class="wrong&&'is-wrong'">
<span class="input" v-if="input">{{ input }}</span>
<span class="wrong" v-if="wrong">{{ wrong }}</span>
<template v-if="isDictation">
<template v-if="store.isDictation">
<span class="letter" v-if="!showFullWord"
@mouseenter="showFullWord = true">{{ restWord.split('').map(v => '_').join('') }}</span>
<span class="letter" v-else @mouseleave="showFullWord = false">{{ restWord }}</span>
@@ -228,26 +231,21 @@ function format(val: number, suffix: string = '') {
:stroke-width="8"
:show-text="false"/>
<div class="stat">
<div class="row">
<div class="num">{{ store.lastStatistics.endDate }}</div>
<div class="line"></div>
<div class="name">时间</div>
</div>
<div class="row">
<div class="num">{{ store.currentDict.wordIndex }}</div>
<div class="line"></div>
<div class="name">输入数</div>
</div>
<div class="row">
<div class="num">{{ format(store.lastStatistics.correctRate, '%') }}</div>
<div class="line"></div>
<div class="name">正确率</div>
</div>
<div class="row">
<div class="num">{{ format(store.lastStatistics.correctNumber) }}</div>
<div class="line"></div>
<div class="name">正确数</div>
</div>
<div class="row">
<div class="num">{{ format(store.lastStatistics.correctRate, '%') }}</div>
<div class="line"></div>
<div class="name">正确率</div>
</div>
</div>
</div>
<div class="progress">
@@ -295,7 +293,7 @@ function format(val: number, suffix: string = '') {
letter-spacing: 5rem;
.input {
color: rgba(74, 222, 128, 0.8);
color: rgb(22, 163, 74);
}
.wrong {
@@ -340,7 +338,7 @@ function format(val: number, suffix: string = '') {
flex-direction: column;
align-items: center;
gap: 10rem;
width: 50rem;
width: 80rem;
.line {
height: 1px;
@@ -361,7 +359,7 @@ function format(val: number, suffix: string = '') {
.progress {
width: var(--toolbar-width);
padding:0 10rem;
padding: 0 10rem;
box-sizing: border-box;
position: fixed;
bottom: 30rem;