save

src/App.vue

@@ -13,7 +13,7 @@ import correct from './assets/sound/correct.wav'
 import {$ref} from "vue/macros"
 import {useSound} from "@/hooks/useSound.ts"
 import {useBaseStore} from "@/stores/base.ts"
-import {SaveKey, Word} from "./types";
+import {DictType, SaveKey, Word} from "./types";
 import WordList from "./components/WordList.vue";
 import Side from "@/components/Side.vue"
 import {usePlayWordAudio} from "@/hooks/usePlayWordAudio.ts"
@@ -31,6 +31,8 @@ const [playKeySound, setAudio] = useSound([机械0, 机械1, 机械2, 机械3],
 // const [playKeySound, setAudio] = useSound([电话打字的声音Mp3], 3)
 const [playBeep] = useSound([beep], 1)
 const [playCorrect] = useSound([correct], 1)
+const [playAudio] = usePlayWordAudio()
+
 const keyMap = {
   Show: 'Escape',
   Ignore: 'Tab',
@@ -71,7 +73,7 @@ function next() {
     store.currentDict.wordIndex++
     // console.log('这个词完了')
   }
-  if (store.skipWordNames.includes(store.word.name)) {
+  if ([DictType.custom, DictType.inner].includes(store.currentDictType.name) && store.skipWordNames.includes(store.word.name)) {
     next()
   }
   wrong = input = ''
@@ -139,7 +141,6 @@ async function onKeyDown(e: KeyboardEvent) {
   }
 }
 
-const [playAudio] = usePlayWordAudio()
 
 </script>
 

src/components/PopConfirm.vue

@@ -0,0 +1,103 @@
+<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";
+
+export default {
+  name: "PopConfirm",
+  props: {
+    title: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  methods: {
+    showPop(e) {
+      if (this.disabled) return
+      let rect = e.target.getBoundingClientRect()
+      this.show = true
+      nextTick(() => {
+        this.$refs.tip.style.top = rect.top + 'px'
+        this.$refs.tip.style.left = rect.left + rect.width / 2 - 50 + 'px'
+      })
+    },
+    confirm() {
+      this.show = false
+      this.$emit('confirm')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+$bg-color: rgb(226, 226, 226);
+
+.pop-confirm-content {
+  position: fixed;
+  background: white;
+  padding: 15rem;
+  box-shadow: 0 0 12px rgba(0, 0, 0, .2);
+  border-radius: 4rem;
+  transform: translate(-50%, calc(-100% - 10rem));
+  z-index: 999;
+
+  .text {
+    color: black;
+    text-align: start;
+    font-size: 14rem;
+    width: 150rem;
+    min-width: 150rem;
+  }
+
+  .options {
+    margin-top: 15rem;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 10rem;
+    font-size: 10rem;
+
+    div {
+      cursor: pointer;
+    }
+
+    .main {
+      color: gray;
+      background: $bg-color;
+      padding: 3rem 8rem;
+      border-radius: 2rem;
+    }
+  }
+}
+</style>
+ 

src/components/Side.vue

@@ -9,6 +9,7 @@ import {Swiper, SwiperSlide} from 'swiper/vue';
 import 'swiper/css';
 import {Swiper as SwiperClass} from "swiper/types"
 import {Dict, DictType} from "@/types.ts"
+import PopConfirm from "@/components/PopConfirm.vue"
 
 const store = useBaseStore()
 const swiperIns0: SwiperClass = $ref(null as any)
@@ -49,15 +50,16 @@ function changeDict(dict: Dict, i: number) {
           <div class="page0">
             <header>
               <arrow-left theme="outline" size="20" fill="#929596" :strokeWidth="2"/>
-              <div class="dict-name">16.</div>
+              <div class="dict-name">{{ store.dict.chapterIndex + 1 }}.</div>
             </header>
             <WordList
                 class="word-list"
+                @change="(e:number) => store.changeDict(store.dict,-1,e)"
                 :isActive="store.sideIsOpen && tabIndex === 0"
-                :list="store.chapter"
+                :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,store.dict.chapterIndex,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>
@@ -70,6 +72,7 @@ function changeDict(dict: Dict, i: number) {
             </header>
             <WordList
                 class="word-list"
+                @change="(e:number) => store.changeDict(store.newWordDict,-1,e)"
                 :isActive="store.sideIsOpen && tabIndex === 1"
                 :list="store.newWordDict.wordList"
                 :activeIndex="store.newWordDict.wordIndex"/>
@@ -87,14 +90,18 @@ function changeDict(dict: Dict, i: number) {
             </header>
             <WordList
                 class="word-list"
-                @change="(e:number) => store.changeDict(store.skipWordDict,0,e)"
+                @change="(e:number) => store.changeDict(store.skipWordDict,-1,e)"
                 :isActive="store.sideIsOpen && tabIndex === 2"
                 :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,0,0)">
-                切换
-              </div>
+              <PopConfirm
+                  :title="`确认花费 10 个铜币向  的这条回复发送感谢？`"
+              >
+                <div class="my-button" @click="store.changeDict(store.skipWordDict)">
+                  切换
+                </div>
+              </PopConfirm>
             </footer>
           </div>
         </swiper-slide>

src/stores/base.ts

@@ -104,7 +104,7 @@ export const useBaseStore = defineStore('base', {
                 this[dict.type].wordIndex = wordIndex === -1 ? 0 : wordIndex
             } else {
                 if (dict.name === this.dict.name) {
-                    this.currentDictType.name === dict.type
+                    this.currentDictType.name = dict.type
                     this.currentDictType.dictUrl = dict.url
                     if (wordIndex !== -1) this.dict.wordIndex = wordIndex
                     if (chapterIndex !== -1) this.dict.chapterIndex = chapterIndex