SAve

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>