feat: 翻译文案

src/components/Map/Map.vue

@@ -7,8 +7,8 @@
     <div id="shopInfo" class="boxShop boxShop2" style="background: url('/static/img/map-dialog.png') no-repeat center center">
       <div id="shopNum"></div>
       <div style="display: flex; align-items: center">
-        <div class="pop-bottom" @click="handleDetail">详情</div>
-        <div class="go-button" @click="handleGO">导航</div>
+        <div class="pop-bottom" @click="handleDetail">{{ $t('detail') }}</div>
+        <div class="go-button" @click="handleGO">{{ $t('nav') }}</div>
       </div>
     </div>
 

src/directives/language.ts

@@ -1,36 +0,0 @@
-import { watchEffect, DirectiveBinding } from 'vue'
-import { useStore } from '@/store'
-import { chineseLanguageLoader } from '@/i18n/util'
-
-/*
- ep:v-language:title="state.obj"
-*/
-
-export default (el: HTMLElement, binding: DirectiveBinding) => {
-  watchEffect(() => {
-    const store = useStore()
-    const language = store.language
-    const { arg, value } = binding
-
-    let content = ''
-
-    if (!Object.keys(value)?.length || !arg) {
-      return
-    }
-
-    if (language === 'zh') {
-      content = value[arg]
-    }
-
-    if (language === 'en' && value[arg + 'En']) {
-      content = value[arg + 'En']
-    } else if (language === 'en' && !value[arg + 'En']) {
-      content = value[arg]
-    }
-
-    if (language === 'tw') {
-      content = chineseLanguageLoader(value[arg])
-    }
-    el.innerHTML = content
-  })
-}

src/i18n/lang/en.json

@@ -1,3 +1,4 @@
 {
-  
+  "detail": "Detail",
+  "nav": "Navigate"
 }

src/i18n/lang/tw.json

@@ -1 +1,4 @@
-{}
+{
+  "detail": "詳情",
+  "nav": "導航"
+}

src/i18n/lang/zh.json

@@ -1 +1,4 @@
-{}
+{
+  "detail": "详情",
+  "nav": "导航"
+}

src/main.ts

@@ -7,6 +7,7 @@ import { get } from '@/http/http'
 import { i18n } from '@/i18n'
 import { useStore } from '@/store'
 import directives from '@/directives'
+import { switchLanguage } from '@/plugins/switchLanguage'
 
 import '@/assets/scss/index.scss'
 import 'animate.css/animate.min.css'
@@ -29,7 +30,7 @@ get('/static/offline/JSON/config.json').then(res => {
   pinia.use(
     PiniaLogger({
       disabled: process.env.NODE_ENV === 'production',
-      expanded: true,
+      expanded: false,
       showDuration: true,
       showStoreName: true,
       logErrors: true
@@ -39,5 +40,5 @@ get('/static/offline/JSON/config.json').then(res => {
   const store = useStore()
   store.SET_CONFIG(res.data as Record<string, any>)
 
-  app.use(router).use(i18n).mount('#app')
+  app.use(router).use(i18n).use(switchLanguage).mount('#app')
 })

src/plugins/switchLanguage.ts

@@ -0,0 +1,26 @@
+import { useStore } from '@/store'
+import type { App } from 'vue'
+import { chineseLanguageLoader } from '@/i18n/util'
+
+export const switchLanguage = {
+  install: (app: App<Element>) => {
+    const store = useStore()
+
+    app.config.globalProperties.switchLanguage = <V extends object, K extends keyof V>(value: V, key: K): V[K] => {
+      const language = store.language
+      let content: any
+      if (language === 'zh') {
+        content = value[key]
+      }
+      if (language === 'en' && value[(key + 'En') as keyof typeof value]) {
+        content = value[(key + 'En') as keyof typeof value]
+      } else if (language === 'en' && !value[(key + 'En') as keyof typeof value]) {
+        content = value[key]
+      }
+      if (language === 'tw') {
+        content = chineseLanguageLoader(value[key])
+      }
+      return content
+    }
+  }
+}

src/store/state.ts

@@ -15,7 +15,7 @@ export interface State {
 export const state = (): State => ({
   shopList: [],
   selectedModule: '',
-  language: 'tw',
+  language: 'zh',
   config: {},
   shop: {},
   currentFloor: {},

src/typings/switchLanguage.ts

@@ -0,0 +1,7 @@
+declare module '@vue/runtime-core' {
+  export interface ComponentCustomProperties {
+    // eslint-disable-next-line no-unused-vars
+    switchLanguage: <V extends object, K extends keyof V>(value: V, key: K) => V[K]
+  }
+}
+export {}

src/views/Nav/Nav.vue

@@ -36,6 +36,7 @@ const directionIcon = computed(() => {
     case '向前出发':
       return {
         text: state.direction,
+        textEn: 'Move forward',
         icon: require('../../assets/images/nav/up_arrow.png'),
         passIcon: require('../../assets/images/nav/thumb_up.png'), //经过店铺时的那个小箭头
         class: 'animate__fadeInUp'
@@ -44,6 +45,7 @@ const directionIcon = computed(() => {
     case '向后出发':
       return {
         text: state.direction,
+        textEn: 'Departure backwards',
         icon: require('../../assets/images/nav/down_arrow.png'),
         passIcon: require('../../assets/images/nav/thumb_down.png'),
         class: 'animate__fadeInDown'
@@ -52,6 +54,7 @@ const directionIcon = computed(() => {
     case '向左出发':
       return {
         text: state.direction,
+        textEn: 'Departure to the left',
         icon: require('../../assets/images/nav/left_arrow.png'),
         passIcon: require('../../assets/images/nav/thumb_left.png'),
         class: 'animate__fadeInRight'
@@ -60,6 +63,7 @@ const directionIcon = computed(() => {
     case '向右出发':
       return {
         text: state.direction,
+        textEn: 'Departure to the right',
         icon: require('../../assets/images/nav/right_arrow.png'),
         passIcon: require('../../assets/images/nav/thumg_right.png'),
         class: 'animate__fadeInLeft'
@@ -67,6 +71,7 @@ const directionIcon = computed(() => {
     default:
       return {
         text: '',
+        textEn: '',
         icon: '',
         class: '',
         passIcon: ''
@@ -78,19 +83,19 @@ const directionIcon = computed(() => {
 const list = computed(() => [
   {
     name: '最佳路线',
-    nameEn: '',
+    nameEn: 'Best route',
     icon: require('../../assets/images/nav/best.png'),
     iconSelected: require('../../assets/images/nav/best_active.png')
   },
   {
     name: '扶梯模式',
-    nameEn: '',
+    nameEn: 'Escalator mode',
     icon: require('../../assets/images/nav/ft.png'),
     iconSelected: require('../../assets/images/nav/ft_active.png')
   },
   {
     name: '直梯模式',
-    nameEn: '',
+    nameEn: 'Straight stair mode',
     icon: require('../../assets/images/nav/dt.png'),
     iconSelected: require('../../assets/images/nav/dt_active.png')
   }
@@ -191,6 +196,7 @@ function analyserShop(path: any[]) {
       if (path[i].Facilities.facCode === 'ft') {
         const ft = {
           name: `乘坐扶梯，${path[i].Direction}`,
+          nameEn: `Riding the escalator,${path[i].Direction}`,
           url: '/static/img/ft.png',
           facCode: 1
         }
@@ -198,6 +204,7 @@ function analyserShop(path: any[]) {
       } else if (path[i].Facilities.facCode === 'dt') {
         const dt = {
           name: `乘坐直梯，${path[i].Direction}`,
+          nameEn: `By straight elevator，${path[i].Direction}`,
           url: '/static/img/dt.png',
           facCode: 1
         }