feat: save progress of each episode

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)
 
 <p align="center">
  <img src="./resource/1.png" width="80%"/>
  <img src="./resource/2.png" width="80%"/>
 </p>
 
-## TODO
+## 待办事项
 
-- [ ] 记录练习进度
+- [ ] 在入口展示每集的总体进度
+- [x] 记录分集练习进度（不同浏览器之间不互通）
+- [x] 页面展示和英文句子检查

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",

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,33 +15,49 @@ type Lines = {
     sentences: Sentence[]
 }
 
+const yesAudio = new Audio(audioYesUrl)
+const noAudio = new Audio(audioNoUrl)
+
 const route = useRoute()
 const router = useRouter()
 const back = () => router.back()
 
 const epNum = Number(route.query.i)
 const episode = ref<Lines>(data[epNum - 1] as Lines)
 const total = episode.value.sentences.length
+const completedList = useLocalStorage<boolean[]>(
+    `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<Sentence>(
-    () => 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
     }
 }
 </script>
@@ -67,7 +82,7 @@ function next() {
     <div class="vapp">
         <div class="flex items-center gap-2">
             <i-mdi:close
-                class="text-xl"
+                class="text-xl cursor-pointer"
                 @click="back"
             />
             <progress
@@ -102,11 +117,12 @@ function next() {
                     class="textarea textarea-bordered w-full text-lg bg-gray-50"
                     placeholder="请输入上述台词的英文"
                     rows="8"
+                    @keyup.enter.exact="check"
                 ></textarea>
             </div>
             <!-- <i-mdi:chevron-right class="text-2xl" /> -->
         </div>
-        <div class="mt-5 px-2 flex justify-between items-center">
+        <div class="mt-5 flex justify-between items-center">
             <div>
                 <input
                     v-model="page.current"
@@ -120,21 +136,21 @@ function next() {
             </div>
             <button
                 v-show="!showResult"
-                class="m-btn btn-neutral"
+                class="btn btn-neutral lg:w-32"
                 :disabled="checkDisabled"
                 @click="check"
             >
                 检查
             </button>
             <div v-show="showResult">
                 <button
-                    class="m-btn btn-outline mr-3"
+                    class="btn btn-outline lg:w-32 mr-3"
                     @click="restore"
                 >
                     取消
                 </button>
                 <button
-                    class="m-btn"
+                    class="btn lg:w-32"
                     :class="{
                         'btn-success': result,
                         'btn-error': !result
@@ -159,10 +175,6 @@ function next() {
 </template>
 
 <style lang="scss" scoped>
-.m-btn {
-    @apply btn lg:w-32;
-}
-
 .btn-bar {
     position: fixed;
     left: 0;

types/components.d.ts

@@ -7,7 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    HelloWorld: typeof import('./../src/components/HelloWorld.vue')['default']
     'IMdi:check': typeof import('~icons/mdi/check')['default']
     'IMdi:chevronLeft': typeof import('~icons/mdi/chevron-left')['default']
     'IMdi:chevronRight': typeof import('~icons/mdi/chevron-right')['default']