修改popconfirm

src/components/PopConfirm.vue

@@ -1,25 +1,5 @@
-<template>
-  <div class="pop-confirm">
-    <Teleport to="body">
-      <Transition>
-        <div ref="tip" class="pop-confirm-content" v-if="show">
-          <div class="text">
-            {{ title }}
-          </div>
-          <div class="options">
-            <div @click="show = false">取消</div>
-            <div class="main" @click="confirm">确认</div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-    <span @click="showPop">
-      <slot></slot>
-    </span>
-  </div>
-</template>
-<script>
-import {nextTick} from "vue";
+<script lang="jsx">
+import {nextTick, Teleport, Transition} from "vue";
 
 export default {
   name: "PopConfirm",
@@ -44,6 +24,7 @@ export default {
   },
   methods: {
     showPop(e) {
+      // return console.log('sss')
       if (this.disabled) return
       let rect = e.target.getBoundingClientRect()
       this.show = true
@@ -56,6 +37,31 @@ export default {
       this.show = false
       this.$emit('confirm')
     }
+  },
+  render() {
+    let Vnode = this.$slots.default()[0]
+    return (
+        <div class="pop-confirm">
+          <Teleport to="body">
+            <Transition>
+              {
+                  this.show && (
+                      <div ref="tip" className="pop-confirm-content">
+                        <div className="text">
+                          {this.title}
+                        </div>
+                        <div className="options">
+                          <div onClick={() => this.show = false}>取消</div>
+                          <div className="main" onClick={() => this.confirm()}>确认</div>
+                        </div>
+                      </div>
+                  )
+              }
+            </Transition>
+          </Teleport>
+          <Vnode onClick={(e) => this.showPop(e)}/>
+        </div>
+    )
   }
 }
 </script>
@@ -100,4 +106,3 @@ $bg-color: rgb(226, 226, 226);
   }
 }
 </style>
- 

src/components/Side.vue

@@ -58,10 +58,16 @@ 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)">
-              <div class="my-button" @click="store.changeDict(store.dict)">
-                切换
-              </div>
+            <!--            <footer v-if="![DictType.custom,DictType.inner].includes(store.currentDictType.name)">-->
+            <footer>
+              <PopConfirm
+                  :title="`确认花费 10 个铜币向  的这条回复发送感谢？`"
+                  @confirm="store.changeDict(store.dict)"
+              >
+                <div class="my-button" >
+                  切换
+                </div>
+              </PopConfirm>
             </footer>
           </div>
         </swiper-slide>
@@ -95,13 +101,9 @@ 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">
-              <PopConfirm
-                  :title="`确认花费 10 个铜币向  的这条回复发送感谢？`"
-              >
-                <div class="my-button" @click="store.changeDict(store.skipWordDict)">
-                  切换
-                </div>
-              </PopConfirm>
+              <div class="my-button" @click="store.changeDict(store.skipWordDict)">
+                切换
+              </div>
             </footer>
           </div>
         </swiper-slide>

src/components/WordList.vue

@@ -64,12 +64,10 @@ watch(() => props.list, () => {
 <style scoped lang="scss">
 @import "@/assets/css/colors";
 
-
-
 .list {
   display: flex;
   flex-direction: column;
-  gap: 15rem;
+  gap: 12rem;
   width: 100%;
   height: 100%;
   padding: 0 $space;
@@ -79,8 +77,9 @@ watch(() => props.list, () => {
 
   .item {
     background: $dark-main-bg;
+    //background: $item-hover;
     border-radius: 6rem;
-    padding: 10rem;
+    padding: 12rem;
     //border: 1px solid gray;
     display: flex;
     justify-content: space-between;
@@ -91,6 +90,7 @@ watch(() => props.list, () => {
     }
 
     &:hover {
+      //background: $dark-main-bg;
       background: $item-hover;
     }
 

src/stores/base.ts

@@ -96,6 +96,7 @@ export const useBaseStore = defineStore('base', {
             }
         },
         async changeDict(dict: Dict, chapterIndex: number = -1, wordIndex: number = -1) {
+            console.log('changeDict')
             if ([DictType.newWordDict, DictType.skipWordDict].includes(dict.type)) {
                 this.currentDictType.name = dict.type
                 this.currentDictType.dictUrl = ''