diff --git a/README.md b/README.md index 617a6d6..6cb6298 100644 --- a/README.md +++ b/README.md @@ -6,13 +6,15 @@ 一个 B 站英语学习教程的配套练习网站（友情提示：我不是 UP 主😊）。 -B 站视频地址：[脑洞部长 / 挑战52天背完小猪佩奇，进来一起卷！](https://space.bilibili.com/33291981/channel/collectiondetail?sid=525129&ctype=0) +B 站视频地址：[脑洞部长 /《挑战52天背完小猪佩奇，进来一起卷！》](https://space.bilibili.com/33291981/channel/collectiondetail?sid=525129&ctype=0)

-## TODO +## 待办事项 -- [ ] 记录练习进度 +- [ ] 在入口展示每集的总体进度 +- [x] 记录分集练习进度（不同浏览器之间不互通） +- [x] 页面展示和英文句子检查 diff --git a/package.json b/package.json index c99cce2..25fe056 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ ] }, "dependencies": { + "@vueuse/core": "^10.7.2", "buffer": "^6.0.3", "number-precision": "^1.6.0", "vue": "^3.3.11", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 91eeaa9..408f6e3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@vueuse/core': + specifier: ^10.7.2 + version: 10.7.2(vue@3.4.15) buffer: specifier: ^6.0.3 version: 6.0.3 @@ -120,7 +123,7 @@ devDependencies: version: 5.3.3 unplugin-auto-import: specifier: ^0.17.3 - version: 0.17.3 + version: 0.17.3(@vueuse/core@10.7.2) unplugin-icons: specifier: ^0.18.2 version: 0.18.2 @@ -906,6 +909,9 @@ packages: resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==} dev: true + /@types/web-bluetooth@0.0.20: + resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==} + /@typescript-eslint/eslint-plugin@6.19.0(@typescript-eslint/parser@6.19.0)(eslint@8.56.0)(typescript@5.3.3): resolution: {integrity: sha512-DUCUkQNklCQYnrBSSikjVChdc84/vMPDQSgJTHBZ64G9bA9w0Crc0rd2diujKbTdp6w2J47qkeHQLoi0rpLCdg==} engines: {node: ^16.0.0 || >=18.0.0} @@ -1179,6 +1185,28 @@ packages: /@vue/shared@3.4.15: resolution: {integrity: sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==} + /@vueuse/core@10.7.2(vue@3.4.15): + resolution: {integrity: sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==} + dependencies: + '@types/web-bluetooth': 0.0.20 + '@vueuse/metadata': 10.7.2 + '@vueuse/shared': 10.7.2(vue@3.4.15) + vue-demi: 0.14.7(vue@3.4.15) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + + /@vueuse/metadata@10.7.2: + resolution: {integrity: sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==} + + /@vueuse/shared@10.7.2(vue@3.4.15): + resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==} + dependencies: + vue-demi: 0.14.7(vue@3.4.15) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + /JSONStream@1.3.5: resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==} hasBin: true @@ -4329,7 +4357,7 @@ packages: engines: {node: '>= 10.0.0'} dev: true - /unplugin-auto-import@0.17.3: + /unplugin-auto-import@0.17.3(@vueuse/core@10.7.2): resolution: {integrity: sha512-0cn0wr8X579TtdZKUAps0dDVrYzttx38ImdxZjmCeNlMDJX8UuSjO83vFqgS4ClNDIGWAute+xl9j5vRSX+vsw==} engines: {node: '>=14'} peerDependencies: @@ -4343,6 +4371,7 @@ packages: dependencies: '@antfu/utils': 0.7.7 '@rollup/pluginutils': 5.1.0 + '@vueuse/core': 10.7.2(vue@3.4.15) fast-glob: 3.3.2 local-pkg: 0.5.0 magic-string: 0.30.5 @@ -4514,6 +4543,20 @@ packages: fsevents: 2.3.3 dev: true + /vue-demi@0.14.7(vue@3.4.15): + resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + dependencies: + vue: 3.4.15(typescript@5.3.3) + /vue-eslint-parser@9.4.0(eslint@8.56.0): resolution: {integrity: sha512-7KsNBb6gHFA75BtneJsoK/dbZ281whUIwFYdQxA68QrCrGMXYzUMbPDHGcOQ0OocIVKrWSKWXZ4mL7tonCXoUw==} engines: {node: ^14.17.0 || >=16.0.0} diff --git a/src/pages/episode.vue b/src/pages/episode.vue index 1f33fab..a15cd65 100644 --- a/src/pages/episode.vue +++ b/src/pages/episode.vue @@ -3,9 +3,7 @@ import data from '@/assets/data.json' import audioYesUrl from '/audio/yes.mp3' import audioNoUrl from '/audio/no.mp3' import { checkSentence } from '@/utils/index' - -const yesAudio = new Audio(audioYesUrl) -const noAudio = new Audio(audioNoUrl) +import { useLocalStorage } from '@vueuse/core' type Sentence = { CN: string @@ -17,6 +15,9 @@ type Lines = { sentences: Sentence[] } +const yesAudio = new Audio(audioYesUrl) +const noAudio = new Audio(audioNoUrl) + const route = useRoute() const router = useRouter() const back = () => router.back() @@ -24,26 +25,39 @@ const back = () => router.back() const epNum = Number(route.query.i) const episode = ref(data[epNum - 1] as Lines) const total = episode.value.sentences.length +const completedList = useLocalStorage( + `completedList-${epNum}`, + new Array(total).fill(false) +) const page = reactive({ - current: 1, - completed: new Array(total).fill(false), + // 当前页码：找到第一个未练习的句子 + current: completedList.value.findIndex((x) => !x) + 1, total }) -const sentence = computed( - () => episode.value.sentences[page.current - 1] -) -const completed = computed(() => page.completed.filter((x) => x).length) +const currentIndex = computed(() => page.current - 1) +const sentence = computed(() => episode.value.sentences[currentIndex.value]) +// 已练习的个数 +const completed = computed(() => completedList.value.filter((x) => x).length) const input = ref('') +watch(input, () => { + input.value = input.value.replace(/\n/g, '') +}) const checkDisabled = computed(() => !input.value) const showResult = ref(false) const result = ref(false) function check() { + if (checkDisabled.value) return + if (showResult.value && !result.value) { + restore() + return + } + result.value = checkSentence(input.value, sentence.value.EN) showResult.value = true if (result.value) { - page.completed[page.current] = true + completedList.value[currentIndex.value] = true yesAudio.play() } else { noAudio.play() @@ -56,9 +70,10 @@ function restore() { function next() { restore() input.value = '' - const current = page.current + 1 - if (current <= page.total) { - page.current = current + for (let i = page.current; i < page.total; i++) { + if (completedList.value[i]) continue + page.current = i + 1 + break } } @@ -67,7 +82,7 @@ function next() {
-
+