feat:autoplay

src/components/base/Audio.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ref, computed, watch, useAttrs} from 'vue';
+import { computed, ref, useAttrs, watch } from 'vue';
 
 interface IProps {
   src?: string;
@@ -20,6 +20,9 @@ const props = withDefaults(defineProps<IProps>(), {
   disabled: false
 });
 
+const emit = defineEmits<{
+  ended: []
+}>();
 
 const attrs = useAttrs();
 
@@ -119,10 +122,6 @@ const handlePause = () => {
   isPlaying.value = false;
 };
 
-const emit = defineEmits<{
-  ended: []
-}>();
-
 const handleEnded = () => {
   isPlaying.value = false;
   currentTime.value = 0;

src/components/list/WordList.vue

@@ -47,8 +47,8 @@ defineExpose({scrollToBottom, scrollToItem})
       <slot name="prefix" :item="item" :index="index"></slot>
     </template>
     <template v-slot="{ item, index }">
-      <div class="item-title word-title">
-        <span class="index">{{ index + 1 }}.</span>
+      <div class="item-title">
+        <span class="text-sm">{{ index + 1 }}.</span>
         <span class="word" :class="!showWord && 'word-shadow'">{{ item.word }}</span>
         <span class="phonetic" :class="!showWord && 'word-shadow'">{{ item.phonetic0 }}</span>
         <VolumeIcon class="volume" @click="playWordAudio(item.word)"></VolumeIcon>
@@ -70,13 +70,4 @@ defineExpose({scrollToBottom, scrollToItem})
       <slot name="suffix" :item="item" :index="index"></slot>
     </template>
   </BaseList>
-</template>
-
-<style scoped lang="scss">
-.word-title{
-  display: flex;
-  span{
-    flex-shrink: 0;
-  }
-}
-</style>
+</template>