feat: base features

justorez · Feb 12, 2024 · ce0bd12 · ce0bd12
1 parent 7753bab
commit ce0bd12
Show file tree

Hide file tree

Showing 22 changed files with 281 additions and 125 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -21,6 +21,7 @@ module.exports = {
         'prettier/prettier': 'warn',
         'no-unref': 'off',
         'no-undef': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
         '@typescript-eslint/ban-ts-comment': 'off',
         '@typescript-eslint/explicit-function-return-type': 'off',
         'vue/html-indent': ['warn', 4],

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -2,17 +2,14 @@
 name: deploy pages
 
 on:
-  workflow_dispatch:
-  # 仅在推送到默认分支时运行。
-  # push:
-  #   branches: main
-  #   paths:
-  #     - '*.cjs'
-  #     - '*.ts'
-  #     - 'src/**'
-
+  push:
+    branches: main
+    paths:
+      - '*.cjs'
+      - '*.ts'
+      - 'src/**'
   # 这个选项可以使你手动在 Action tab 页面触发工作流
-  # workflow_dispatch:
+  workflow_dispatch:
 
 # 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。
 permissions:
@@ -41,7 +38,7 @@ jobs:
         with:
           version: 8
 
-      - name: Setup Node
+      - name: Setup node
         uses: actions/setup-node@v3
         with:
           node-version: 20
@@ -50,10 +47,12 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Build
-        run: pnpm run build
+      - name: Build and sync
+        run: |
+          pnpm run build
+          pnpm run sync:gitee
 
-      - name: Setup Pages
+      - name: Setup pages
         uses: actions/configure-pages@v3
 
       - name: Upload artifact
@@ -62,6 +61,6 @@ jobs:
           # Upload dist repository
           path: './dist'
 
-      - name: Deploy to GitHub Pages
+      - name: Deploy to github pages
         id: deployment
         uses: actions/deploy-pages@v2
diff --git a/README.md b/README.md
@@ -1,7 +1,16 @@
-# 小猪佩奇学英语
+# 挑战 52 天背完小猪佩奇
 
 [![deploy pages](https://github.com/justorez/peppa/actions/workflows/deploy.yml/badge.svg)](https://github.com/justorez/peppa/actions/workflows/deploy.yml)
 
-> Hurry up! Go dev.
+网站链接：[国内地址](https://justorez.gitee.io/peppa/) | [国外地址](https://justorez.github.io/peppa/)
 
-Vue3 + TS + Vue Router + Tailwind CSS + Daisy UI + Icones + Eruda
+一个 B 站英语学习教程的配套练习网站（友情提示：我不是 UP 主😊）。
+
+B 站视频地址：[脑洞部长 / 挑战52天背完小猪佩奇，进来一起卷！](https://space.bilibili.com/33291981/channel/collectiondetail?sid=525129&ctype=0)
+
+![](./resource/1.png)
+![](./resource/2.png)
+
+## TODO
+
+- [ ] 记录练习进度
diff --git a/index.html b/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <link rel="icon" href="/head.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite Vue Starter</title>
+    <title>Peppa Pig</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/public/audio/no.mp3 b/public/audio/no.mp3
diff --git a/public/audio/yes.mp3 b/public/audio/yes.mp3
diff --git a/public/full.png b/public/full.png
diff --git a/public/head.png b/public/head.png
diff --git a/resource/1.png b/resource/1.png
diff --git a/resource/2.png b/resource/2.png
diff --git a/scripts/gitee.js b/scripts/gitee.js
@@ -5,5 +5,5 @@ shell.cd('dist')
 shell.exec('git init')
 shell.exec('git add -A')
 shell.exec('git commit -m "deploy"')
-shell.exec('git push -f git@gitee.com:justorez/xxx.git master:pages')
+shell.exec('git push -f git@gitee.com:justorez/peppa.git master:pages')
 // shell.rm('-rf', '.git')
diff --git a/src/App.vue b/src/App.vue
@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
     <RouterView />
 </template>

diff --git a/src/assets/data.json b/src/assets/data.json
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/pages/episode.vue b/src/pages/episode.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+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)
+
+type Sentence = {
+    CN: string
+    EN: string
+}
+type Lines = {
+    titleEN: string
+    titleCN: string
+    sentences: Sentence[]
+}
+
+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 page = reactive({
+    current: 1,
+    completed: new Array(total).fill(false),
+    total
+})
+const sentence = computed<Sentence>(
+    () => episode.value.sentences[page.current - 1]
+)
+const completed = computed(() => page.completed.filter((x) => x).length)
+
+const input = ref('')
+const checkDisabled = computed(() => !input.value)
+
+const showResult = ref(false)
+const result = ref(false)
+function check() {
+    result.value = checkSentence(input.value, sentence.value.EN)
+    showResult.value = true
+    if (result.value) {
+        page.completed[page.current] = true
+        yesAudio.play()
+    } else {
+        noAudio.play()
+    }
+}
+function restore() {
+    showResult.value = false
+    result.value = false
+}
+function next() {
+    restore()
+    input.value = ''
+    const current = page.current + 1
+    if (current <= page.total) {
+        page.current = current
+    }
+}
+</script>
+
+<template>
+    <div class="vapp">
+        <div class="flex items-center gap-2">
+            <i-mdi:close
+                class="text-xl"
+                @click="back"
+            />
+            <progress
+                class="progress progress-success flex-1 h-4"
+                :value="completed"
+                :max="page.total"
+            ></progress>
+            <span>{{ completed }}/{{ episode.sentences.length }}</span>
+        </div>
+        <div class="mt-5 flex justify-center items-center">
+            <!-- <i-mdi:chevron-left class="text-2xl" /> -->
+            <div class="px-2 flex-1">
+                <h1 class="font-bold text-2xl">
+                    第 {{ epNum }} 集：{{ episode.titleCN }}
+                </h1>
+                <div class="mt-5 mb-3 text-lg">“{{ sentence.CN }}”</div>
+                <div
+                    v-show="showResult"
+                    class="mb-3 text-lg flex items-center"
+                    :class="{
+                        'text-success': result,
+                        'text-error': !result
+                    }"
+                >
+                    <span>"{{ sentence.EN }}"</span>
+                    &nbsp;
+                    <i-mdi:check v-show="result" />
+                    <i-mdi:close v-show="!result" />
+                </div>
+                <textarea
+                    v-model="input"
+                    class="textarea textarea-bordered w-full text-lg bg-gray-50"
+                    placeholder="请输入上述台词的英文"
+                    rows="8"
+                ></textarea>
+            </div>
+            <!-- <i-mdi:chevron-right class="text-2xl" /> -->
+        </div>
+        <div class="mt-5 px-2 flex justify-between items-center">
+            <div>
+                <input
+                    v-model="page.current"
+                    type="number"
+                    class="input input-bordered input-sm"
+                    :min="1"
+                    :max="page.total"
+                />
+                &nbsp;&nbsp;/&nbsp;
+                <span>{{ page.total }}</span>
+            </div>
+            <button
+                v-show="!showResult"
+                class="m-btn btn-neutral"
+                :disabled="checkDisabled"
+                @click="check"
+            >
+                检查
+            </button>
+            <div v-show="showResult">
+                <button
+                    class="m-btn btn-outline mr-3"
+                    @click="restore"
+                >
+                    取消
+                </button>
+                <button
+                    class="m-btn"
+                    :class="{
+                        'btn-success': result,
+                        'btn-error': !result
+                    }"
+                    @click="next"
+                >
+                    继续
+                </button>
+            </div>
+        </div>
+        <!-- <div class="btn-bar">
+            <button class="btn btn-outline">跳过</button>
+            <button
+                class="btn btn-neutral"
+                :disabled="checkDisabled"
+                @click="check"
+            >
+                检查
+            </button>
+        </div> -->
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.m-btn {
+    @apply btn lg:w-32;
+}
+
+.btn-bar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 2.5rem;
+    padding-bottom: 3.5rem;
+    border-top: 2px solid rgb(229, 229, 229);
+    background-color: white;
+    display: grid;
+    grid-gap: 8px 16px;
+    align-items: center;
+    grid-auto-rows: 1fr;
+    grid-template-columns: 100%;
+    justify-items: stretch;
+
+    > button {
+        width: 100%;
+    }
+}
+
+@media (min-width: 700px) {
+    .btn-bar {
+        align-items: center;
+        grid-auto-rows: auto;
+        grid-template-columns: repeat(5, 1fr);
+        grid-template-rows: 100%;
+        justify-content: space-between;
+
+        button:first-child {
+            justify-self: start;
+        }
+        button:last-child {
+            grid-column: 5 / auto;
+            justify-self: end;
+        }
+    }
+}
+</style>
diff --git a/src/pages/hello.vue b/src/pages/hello.vue