feat(word): show/play UK-US audio and add example sentence

memora-web/src/services/api/types.ts

@@ -7,6 +7,7 @@ export interface Word {
   audio_us?: string
   part_of_speech?: string
   definition?: string
+  example_sentence?: string
 }
 
 export interface MemoryRecord {

memora-web/src/views/Memory.vue

@@ -32,8 +32,13 @@
         <el-descriptions-item label="单词">{{ saved.word }}</el-descriptions-item>
         <el-descriptions-item label="词性">{{ saved.part_of_speech }}</el-descriptions-item>
         <el-descriptions-item label="释义">{{ saved.definition }}</el-descriptions-item>
-        <el-descriptions-item label="英音">{{ saved.phonetic_uk }}</el-descriptions-item>
-        <el-descriptions-item label="美音">{{ saved.phonetic_us }}</el-descriptions-item>
+        <el-descriptions-item label="英音">{{ saved.phonetic_uk || '暂无' }}</el-descriptions-item>
+        <el-descriptions-item label="美音">{{ saved.phonetic_us || '暂无' }}</el-descriptions-item>
+        <el-descriptions-item label="例句">{{ saved.example_sentence || '暂无' }}</el-descriptions-item>
+        <el-descriptions-item label="发音播放">
+          <el-button size="small" @click="playUK" :disabled="!saved.word">播放英音</el-button>
+          <el-button size="small" @click="playUS" :disabled="!saved.word">播放美音</el-button>
+        </el-descriptions-item>
       </el-descriptions>
     </el-card>
   </div>
@@ -41,7 +46,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { addWord } from '../services/api'
+import { addWord, audioUrl } from '../services/api'
 
 const word = ref('')
 const loading = ref(false)
@@ -67,6 +72,18 @@ async function submit() {
     loading.value = false
   }
 }
+
+function playUK() {
+  if (!saved.value?.word) return
+  const audio = new Audio(audioUrl(saved.value.word, 'uk'))
+  audio.play().catch(() => {})
+}
+
+function playUS() {
+  if (!saved.value?.word) return
+  const audio = new Audio(audioUrl(saved.value.word, 'us'))
+  audio.play().catch(() => {})
+}
 </script>
 
 <style scoped>