add mobile

src/App.vue

@@ -14,6 +14,7 @@ import ArticleContentDialog from "@/components/dialog/ArticleContentDialog.vue";
 import CollectNotice from "@/components/CollectNotice.vue";
 import {SAVE_SETTING_KEY, SAVE_DICT_KEY} from "@/utils/const.ts";
 import {shakeCommonDict} from "@/utils";
+import router from "@/router.ts";
 
 const store = useBaseStore()
 const runtimeStore = useRuntimeStore()
@@ -69,6 +70,12 @@ async function init() {
 
 onMounted(() => {
   init()
+
+  if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
+    // 当前设备是移动设备
+    console.log('当前设备是移动设备')
+    router.replace('/mobile')
+  }
 })
 
 

src/pages/mobile/index.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+
+import {useBaseStore} from "@/stores/base.ts";
+import {useRuntimeStore} from "@/stores/runtime.ts";
+import {useSettingStore} from "@/stores/setting.ts";
+import {$computed, $ref} from "vue/macros";
+import {Word} from "@/types.ts";
+import {cloneDeep} from "lodash-es";
+import {emitter, EventKey} from "@/utils/eventBus.ts";
+import {syncMyDictList} from "@/hooks/dict.ts";
+import {onMounted, onUnmounted} from "vue";
+
+const store = useBaseStore()
+const runtimeStore = useRuntimeStore()
+const settingStore = useSettingStore()
+
+let wordData = $ref({
+  words: [],
+  index: -1,
+  wrongWords: [],
+})
+
+const word: Word = $computed(() => {
+  return wordData.words[wordData.index] ?? {
+    trans: [],
+    name: '',
+    usphone: '',
+    ukphone: '',
+  }
+})
+
+
+function getCurrentPractice() {
+  if (store.chapter.length) {
+    wordData.words = store.chapter
+    wordData.index = 0
+
+    store.chapter.map((w: Word) => {
+      if (!w.trans.length) {
+        let res = runtimeStore.translateWordList.find(a => a.name === w.name)
+        if (res) w = Object.assign(w, res)
+      }
+    })
+
+    wordData.words = cloneDeep(store.chapter)
+    emitter.emit(EventKey.resetWord)
+  }
+}
+
+function sort(list: Word[]) {
+  store.currentDict.chapterWords[store.currentDict.chapterIndex] = wordData.words = list
+  wordData.index = 0
+  syncMyDictList(store.currentDict)
+}
+
+function next() {
+  if (store.currentDict.chapterIndex >= store.currentDict.chapterWords.length - 1) {
+    store.currentDict.chapterIndex = 0
+  } else store.currentDict.chapterIndex++
+
+  getCurrentPractice()
+}
+
+onMounted(() => {
+  getCurrentPractice()
+})
+
+onUnmounted(() => {
+})
+
+</script>
+
+<template>
+  <div id="mobile">
+    <div class="content">
+      <div class="translate">
+        <div class="translate-item" v-for="(v,i) in word.trans">
+          <span>{{ v }}</span>
+        </div>
+      </div>
+      <div class="word">
+        {{ word.name }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+#mobile {
+  position: relative;
+  z-index: 1;
+  font-size: 14rem;
+  color: black;
+
+}
+</style>

src/router.ts

@@ -1,11 +1,13 @@
 import * as VueRouter from 'vue-router'
 import Practice from "@/pages/practice/index.vue";
-import Dict from '@/pages/dict'
+import Dict from '@/pages/dict/index.vue'
+import Mobile from '@/pages/mobile/index.vue'
 import Test from "@/pages/test.vue";
 
 const routes: any[] = [
   {path: '/practice', component: Practice},
   {path: '/dict', name: 'dict', component: Dict},
+  {path: '/mobile', name: 'dict', component: Mobile},
   {path: '/test', name: 'test', component: Test},
   {path: '/', redirect: '/practice'},
 ]