SAve

src/App.vue

@@ -14,6 +14,7 @@ import {$ref} from "vue/macros"
 import {useSound} from "@/hooks/useSound.ts"
 import {useBaseStore} from "@/stores/base.ts"
 import {SaveKey} from "./types";
+import WordList from "./components/WordList.vue";
 
 let input = $ref('')
 let wrong = $ref('')
@@ -190,25 +191,9 @@ const step = $ref(1)
         <div class="close">关闭</div>
       </header>
       <div class="wrapper">
-        <div v-if="false" class="new-words">
-          <div class="list">
-            <div class="item" v-for="item in store.newWords">
-              <div class="left">
-                <div class="letter">{{ item.name }}</div>
-                <div class="info">
-                  <div class="translate">{{ item.trans.join('；') }}</div>
-                  <div class="phonetic">{{ item.usphone }}</div>
-                </div>
-              </div>
+        <WordList :word-list="store.newWords" :index="0"></WordList>
 
-              <div class="right">
-                <div class="audio" @click="playAudio(item.name)">播放</div>
-                <div class="audio" @click="playAudio(item.name)">删除</div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="pages" :class="`step${step}`">
+        <div class="pages" v-if="false" :class="`step${step}`">
           <div class="dict page">
             <div class="tags">
               <div class="tag" :class="i === 5 &&'active'" v-for="i in 2">六级</div>
@@ -425,6 +410,7 @@ const step = $ref(1)
 
     .chapter-list {
       .chapter-item {
+        cursor: pointer;
         margin-bottom: 10rem;
         padding: 10rem;
         border-radius: 10rem;
@@ -433,43 +419,6 @@ const step = $ref(1)
     }
   }
 
-  .new-words {
-
-    .list {
-      display: flex;
-      flex-direction: column;
-
-      .item {
-        margin: 10rem;
-        border-radius: 10rem;
-        padding: 10rem;
-        border: 1px solid blue;
-        display: flex;
-        justify-content: space-between;
-
-        .left {
-          .letter {
-            margin-bottom: 10rem;
-            font-size: 24rem;
-            line-height: 1;
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
-            display: flex;
-          }
-
-          .info {
-            display: flex;
-            gap: 20rem
-          }
-        }
-
-        .right {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-        }
-      }
-    }
-  }
 
 }
 

src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/components/WordList.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import {Word} from "../types";
+import {usePlayWordAudio} from "../hooks/usePlayWordAudio";
+
+const props = defineProps<{ wordList: Word[], index: number }>()
+const [playAudio] = usePlayWordAudio()
+</script>
+
+<template>
+  <div class="words">
+    <div class="list">
+      <div class="item" v-for="item in props.wordList">
+        <div class="left">
+          <div class="letter">{{ item.name }}</div>
+          <div class="info">
+            <div class="translate">{{ item.trans.join('；') }}</div>
+            <div class="phonetic">{{ item.usphone }}</div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="audio" @click="playAudio(item.name)">播放</div>
+          <div class="audio" @click="playAudio(item.name)">删除</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.words {
+  height: 100%;
+  overflow: auto;
+
+  .list {
+    display: flex;
+    flex-direction: column;
+
+    .item {
+      margin: 10rem;
+      border-radius: 10rem;
+      padding: 10rem;
+      border: 1px solid blue;
+      display: flex;
+      justify-content: space-between;
+
+      .left {
+        .letter {
+          margin-bottom: 10rem;
+          font-size: 24rem;
+          line-height: 1;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+          display: flex;
+        }
+
+        .info {
+          display: flex;
+          gap: 20rem
+        }
+      }
+
+      .right {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+    }
+  }
+}
+</style>

src/hooks/usePlayWordAudio.ts

@@ -0,0 +1,21 @@
+import {PronunciationApi} from "../types";
+
+export function usePlayWordAudio() {
+  const audio = $ref(new Audio())
+
+  function generateWordSoundSrc(word: string, pronunciation: string) {
+    switch (pronunciation) {
+      case 'uk':
+        return `${PronunciationApi}${word}&type=1`
+      case 'us':
+        return `${PronunciationApi}${word}&type=2`
+    }
+  }
+
+  function playAudio(word: string) {
+    audio.src = generateWordSoundSrc(word, 'us')
+    audio.play()
+  }
+
+  return [playAudio]
+}

src/types.ts

@@ -9,3 +9,5 @@ export type Config = {
 export type Word = { "name": string, "usphone": string, "ukphone": string, "trans": string[] }
 
 export const SaveKey = 'bb-word-config'
+
+export const PronunciationApi = 'https://dict.youdao.com/dictvoice?audio='