fix:添加冲突提醒弹窗

src/App.vue

@@ -11,6 +11,7 @@ import {isMobile, shakeCommonDict} from "@/utils";
 import router, {routes} from "@/router.ts";
 
 import {useRoute} from "vue-router";
+import ConflictNotice from "@/pages/pc/components/ConflictNotice.vue";
 
 const store = useBaseStore()
 const runtimeStore = useRuntimeStore()

src/components/HostNotice.vue

@@ -1,140 +0,0 @@
-<script setup lang="ts">
-
-import BaseButton from "@/components/BaseButton.vue";
-import {watch} from "vue";
-import {useSettingStore} from "@/stores/setting.ts";
-
-let settingStore = useSettingStore()
-let show = $ref(false)
-
-function toggleNotice() {
-  show = false
-}
-
-watch(() => settingStore.load, (n) => {
-  const params = new URLSearchParams(window.location.search);
-  if (params.get('from') === 'redirect') {
-    show = true
-  }
-})
-
-</script>
-
-<template>
-  <transition name="right">
-    <div class="HostNotice" v-if="show">
-      <div class="notice">
-        <div>检查到您是通过老域名 typing-word.ttentau.top 访问的本网站，特此弹窗提示！</div>
-        <p>老域名已不再续费，7天后过期将无法访问，请更换为新域名 <span class="active"><a href="https://2study.top">2study.top</a></span>
-          访问</p>
-      </div>
-      <div class="wrapper">
-        <BaseButton size="large" @click="toggleNotice">关闭</BaseButton>
-      </div>
-    </div>
-  </transition>
-
-</template>
-
-<style scoped lang="scss">
-
-.right-enter-active,
-.right-leave-active {
-  transition: all .5s ease;
-}
-
-.right-enter-from,
-.right-leave-to {
-  transform: translateX(110%);
-}
-
-.HostNotice {
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 2;
-  font-size: 20rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: var(--color-second-bg);
-  padding: 30rem;
-  border-radius: 12rem;
-  width: 500rem;
-  color: var(--color-font-1);
-  line-height: 1.5;
-  border: 1px solid var(--color-item-border);
-  box-shadow: var(--shadow);
-
-  .notice {
-    margin-top: 30rem;
-  }
-
-  .active {
-    color: var(--color-main-active);
-  }
-
-  .wrapper {
-    .collect {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      .href-wrapper {
-        display: flex;
-        font-size: 16rem;
-        align-items: center;
-        gap: 10rem;
-
-        .round {
-          color: var(--color-font-1);
-          border-radius: 50rem;
-          padding: 10rem 10rem;
-          padding-left: 20rem;
-          gap: 30rem;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          background: var(--color-main-bg);
-
-          .href {
-            font-size: 14rem;
-          }
-        }
-
-        .star {
-          color: var(--color-main-active);
-        }
-
-        .right {
-          display: flex;
-          align-items: center;
-        }
-      }
-
-      .collect-keyboard {
-        margin-top: 20rem;
-        font-size: 16rem;
-
-        span {
-          margin-left: 10rem;
-        }
-      }
-    }
-  }
-
-  .close-wrapper {
-    right: var(--space);
-    top: var(--space);
-    position: absolute;
-    font-size: 14rem;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    color: var(--color-font-1);
-    gap: 10rem;
-  }
-}
-
-</style>

src/hooks/dict.ts

@@ -1,7 +1,5 @@
 import {Article, Word} from "@/types/types.ts";
 import {useBaseStore} from "@/stores/base.ts";
-import {nanoid} from "nanoid";
-import {getDefaultArticle} from "@/types/func.ts";
 
 export function useWordOptions() {
   const store = useBaseStore()
@@ -64,7 +62,7 @@ export function useArticleOptions() {
   const store = useBaseStore()
 
   function isArticleCollect(val: Article) {
-    return !!store.collectArticle.articles.find(v => v.id === val.id)
+    return !!store.collectArticle?.articles?.find(v => v.id === val.id)
   }
 
   //todo 这里先收藏，再修改。收藏里面的未同步。单词也是一样的

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()

src/stores/setting.ts

@@ -41,6 +41,7 @@ export interface SettingState {
   first: boolean
   firstTime: number
   load: boolean
+  conflictNotice: boolean // 其他脚本/插件冲突提示
 }
 
 export const DefaultChapterWordNumber = 30
@@ -83,7 +84,8 @@ export const getDefaultSettingState = (): SettingState => ({
   shortcutKeyMap: cloneDeep(DefaultShortcutKeyMap),
   first: true,
   firstTime: Date.now(),
-  load: false
+  load: false,
+  conflictNotice: true
 })
 
 export const useSettingStore = defineStore('setting', {

src/utils/const.ts

@@ -14,7 +14,7 @@ export const SAVE_DICT_KEY = {
 }
 export const SAVE_SETTING_KEY = {
     key: 'typing-word-setting',
-    version: 8
+    version: 9
 }
 export const EXPORT_DATA_KEY = {
     key: 'typing-word-export',