fix:添加冲突提醒弹窗

src/pages/pc/article/BookDetail.vue

@@ -54,8 +54,8 @@ async function init() {
     if (!runtimeStore.editDict.id) {
       await router.push("/article")
     } else {
-      if (!runtimeStore.editDict.articles.length
-          && !runtimeStore.editDict.custom
+      if (!runtimeStore.editDict?.articles?.length
+          && !runtimeStore.editDict?.custom
           && ![DictId.articleCollect].includes(runtimeStore.editDict.id)
       ) {
         loading = true
@@ -66,6 +66,7 @@ async function init() {
       if (runtimeStore.editDict.articles.length) {
         selectArticle = runtimeStore.editDict.articles[0]
       }
+      console.log(runtimeStore.editDict)
     }
   }
 }

src/pages/pc/article/StudyArticle.vue

@@ -4,7 +4,6 @@ import {onMounted, onUnmounted} from "vue";
 import {useBaseStore} from "@/stores/base.ts";
 import {emitter, EventKey, useEvents} from "@/utils/eventBus.ts";
 import {useSettingStore} from "@/stores/setting.ts";
-import {useRuntimeStore} from "@/stores/runtime.ts";
 import {Article, ArticleItem, ArticleWord, ShortcutKey, Word} from "@/types/types.ts";
 import {useOnKeyboardEventListener, useStartKeyboardEventListener} from "@/hooks/event.ts";
 import useTheme from "@/hooks/theme.ts";
@@ -22,6 +21,7 @@ import ArticleList from "@/pages/pc/components/list/ArticleList.vue";
 import EditSingleArticleModal from "@/pages/pc/article/components/EditSingleArticleModal.vue";
 import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import {Icon} from "@iconify/vue";
+import ConflictNotice from "@/pages/pc/components/ConflictNotice.vue";
 
 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -352,6 +352,7 @@ const {playSentenceAudio} = usePlaySentenceAudio()
       </div>
     </div>
   </div>
+  <ConflictNotice/>
 </template>
 
 <style scoped lang="scss">

src/pages/pc/components/CollectNotice.vue

@@ -3,7 +3,7 @@
 import {Icon} from "@iconify/vue";
 import Close from "@/components/icon/Close.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import {watch} from "vue";
+import {onMounted, watch} from "vue";
 import {useSettingStore} from "@/stores/setting.ts";
 
 import {isMobile} from "@/utils";

src/pages/pc/components/ConflictNotice.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+
+import BaseButton from "@/components/BaseButton.vue";
+import {onMounted, watch} from "vue";
+import {useSettingStore} from "@/stores/setting.ts";
+import {Icon} from "@iconify/vue";
+import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
+
+let settingStore = useSettingStore()
+let show = $ref(false)
+
+watch(() => settingStore.load, (n) => {
+  show = settingStore.conflictNotice
+})
+onMounted(() => {
+  if (settingStore.load) {
+    show = settingStore.conflictNotice
+  }
+})
+</script>
+
+<template>
+  <Dialog :modelValue="show"
+          title="提示"
+          footer
+          cancel-button-text="不再提醒"
+          confirm-button-text="关闭"
+          @cancel="settingStore.conflictNotice = false"
+  >
+    <div class="card w-120 center flex-col color-main py-0 mb-0">
+      <div>
+        <div class="text">
+          1、 如果您安装了 <span class="font-bold text-red">“调速” “Vim”</span> 等会接管键盘点击的插件/脚本，将导致本网站无法正常使用
+        </div>
+        <div class="pl-4">
+          <div>①：在对应插件/脚本的设置里面排除本网站</div>
+          <div>②：临时禁用对应插件/脚本</div>
+        </div>
+        <div class="text mt-2">
+          2、如果您未安装以上插件/脚本，还是无法使用
+        </div>
+        <div class="pl-4">
+          <div>①：请打开浏览器无痕模式尝试</div>
+          <div>②：无痕模式下无法正常使用，请给<a href="https://github.com/zyronon/TypeWords/issues">给作者提一个 BUG</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Dialog>
+</template>

src/pages/pc/components/dialog/Dialog.vue

@@ -93,13 +93,13 @@ watch(() => props.modelValue, n => {
     runtimeStore.modalList.push({id, close})
     zIndex = 999 + runtimeStore.modalList.length
     visible = true
+    console.log(12)
   } else {
     close()
   }
 })
 
 onMounted(() => {
-  // console.log('props.modelValue', props.modelValue)
   if (props.modelValue === undefined) {
     visible = true
     id = Date.now()

src/pages/pc/components/dialog/WordListDialog.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-
-import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
-
-import {onMounted, onUnmounted, watch} from "vue";
-import {emitter, EventKey} from "@/utils/eventBus.ts";
-import {useRuntimeStore} from "@/stores/runtime.ts";
-import WordList from "@/pages/pc/components/list/WordList.vue";
-import Empty from "@/components/Empty.vue";
-
-let show = $ref(false)
-let list = $ref([])
-let title = $ref('')
-
-onMounted(() => {
-  emitter.on(EventKey.openWordListModal, (val: any) => {
-    show = true
-    list = val.list
-    title = val.title + `(${list.length}词)`
-  })
-})
-
-watch(() => show, v => {
-  if (!v) {
-    list = []
-  }
-})
-
-onUnmounted(() => {
-  emitter.off(EventKey.openWordListModal)
-})
-
-</script>
-
-<template>
-  <Dialog
-      :title="title"
-      v-model="show">
-    <div class="all-word">
-      <WordList
-          v-if="list.length"
-          class="word-list"
-          :list="list">
-      </WordList>
-      <Empty v-else/>
-    </div>
-  </Dialog>
-</template>
-
-<style lang="scss" scoped>
-
-
-.all-word {
-  padding-bottom: var(--space);
-  padding-top: 0;
-  width: 30rem;
-  height: 75vh;
-  display: flex;
-}
-</style>

src/pages/pc/word/StudyWord.vue

@@ -25,6 +25,7 @@ import {usePracticeStore} from "@/stores/practice.ts";
 import {dictionaryResources} from "@/assets/dictionary.ts";
 import {ElMessage} from "element-plus";
 import {getDefaultWord} from "@/types/func.ts";
+import ConflictNotice from "@/pages/pc/components/ConflictNotice.vue";
 
 interface IProps {
   new: Word[],
@@ -439,6 +440,7 @@ useEvents([
     </div>
   </div>
   <Statistics v-model="showStatDialog"/>
+  <ConflictNotice/>
 </template>
 
 <style scoped lang="scss">

src/pages/pc/word/WordHomePage.vue

@@ -15,6 +15,7 @@ import PopConfirm from "@/pages/pc/components/PopConfirm.vue";
 import {ElMessage, ElProgress, ElSlider} from 'element-plus';
 import BaseButton from "@/components/BaseButton.vue";
 import {getDefaultDict} from "@/types/func.ts";
+import ConflictNotice from "@/pages/pc/components/ConflictNotice.vue";
 
 const store = useBaseStore()
 const router = useRouter()