save

src/components/PopConfirm.vue

@@ -22,10 +22,18 @@ export default {
       show: false
     }
   },
+  mounted() {
+    window.addEventListener('click', () => {
+      this.show = false
+    })
+    window.addEventListener('keydown', () => {
+      this.show = false
+    })
+  },
   methods: {
     showPop(e) {
-      // return console.log('sss')
       if (this.disabled) return
+      e.stopPropagation()
       let rect = e.target.getBoundingClientRect()
       this.show = true
       nextTick(() => {

src/components/Side.vue

@@ -58,13 +58,12 @@ function changeDict(dict: Dict, i: number) {
                 :isActive="store.sideIsOpen && tabIndex === 0"
                 :list="store.dict.chapterList[store.dict.chapterIndex]??[]"
                 :activeIndex="store.dict.wordIndex"/>
-            <!--            <footer v-if="![DictType.custom,DictType.inner].includes(store.currentDictType.name)">-->
-            <footer>
+            <footer v-if="![DictType.custom,DictType.inner].includes(store.currentDictType.name)">
               <PopConfirm
-                  :title="`确认花费 10 个铜币向  的这条回复发送感谢？`"
+                  :title="`确认切换？`"
                   @confirm="store.changeDict(store.dict)"
               >
-                <div class="my-button" >
+                <div class="my-button">
                   切换
                 </div>
               </PopConfirm>
@@ -83,9 +82,14 @@ function changeDict(dict: Dict, i: number) {
                 :list="store.newWordDict.wordList"
                 :activeIndex="store.newWordDict.wordIndex"/>
             <footer v-if="store.currentDictType.name !== DictType.newWordDict && store.newWordDict.wordList.length">
-              <div class="my-button" @click="store.changeDict(store.newWordDict)">
-                切换
-              </div>
+              <PopConfirm
+                  :title="`确认切换？`"
+                  @confirm="store.changeDict(store.newWordDict)"
+              >
+                <div class="my-button">
+                  切换
+                </div>
+              </PopConfirm>
             </footer>
           </div>
         </swiper-slide>
@@ -101,9 +105,14 @@ function changeDict(dict: Dict, i: number) {
                 :list="store.skipWordDict.wordList"
                 :activeIndex="store.skipWordDict.wordIndex"/>
             <footer v-if="store.currentDictType.name !== DictType.skipWordDict && store.skipWordDict.wordList.length">
-              <div class="my-button" @click="store.changeDict(store.skipWordDict)">
-                切换
-              </div>
+              <PopConfirm
+                  :title="`确认切换？`"
+                  @confirm="store.changeDict(store.skipWordDict)"
+              >
+                <div class="my-button hvr-grow">
+                  切换
+                </div>
+              </PopConfirm>
             </footer>
           </div>
         </swiper-slide>

src/components/WordList.vue

@@ -3,6 +3,7 @@ import {Word} from "../types";
 import {usePlayWordAudio} from "../hooks/usePlayWordAudio";
 import {watch} from "vue"
 import {useBaseStore} from "@/stores/base.ts"
+import {Delete} from "@icon-park/vue-next"
 
 const store = useBaseStore()
 const emit = defineEmits(['change'])
@@ -52,7 +53,7 @@ watch(() => props.list, () => {
           </div>
           <div class="right">
             <div class="audio" @click="playAudio(item.name)">播放</div>
-            <div class="audio" @click="playAudio(item.name)">删除</div>
+            <delete theme="outline" size="20" fill="#929596" :strokeWidth="2"/>
           </div>
         </div>
       </template>