From 83f2baaa5694d4b4ae6d60660ecf7681927ed9e0 Mon Sep 17 00:00:00 2001 From: jiangx Date: Tue, 8 Mar 2022 11:01:39 +0800 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=E5=88=87=E6=8D=A2=E8=AF=AD?= =?UTF-8?q?=E8=A8=80=E6=8C=87=E4=BB=A4=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/directives/language.ts | 59 ++++++++++++++++++++++---------------- src/store/state.ts | 2 +- 2 files changed, 36 insertions(+), 25 deletions(-) diff --git a/src/directives/language.ts b/src/directives/language.ts index 7bc9714..4f71ffa 100644 --- a/src/directives/language.ts +++ b/src/directives/language.ts @@ -2,35 +2,46 @@ import { watchEffect, DirectiveBinding } from 'vue' import { useStore } from '@/store' import { chineseLanguageLoader } from '@/i18n/util' +interface MyHtmlElement extends HTMLElement { + stopHandler: (() => void) | null +} + /* 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 +export default { + mounted(el: MyHtmlElement, binding: DirectiveBinding) { + if (el.stopHandler) { + el.stopHandler() + el.stopHandler = null } + el.stopHandler = watchEffect(() => { + const store = useStore() + const language = store.language + const { arg, value } = binding - 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 (!Object.keys(value)?.length || !arg) { + return '' + } - if (language === 'tw') { - content = chineseLanguageLoader(value[arg]) - } - el.innerHTML = content - }) + let content = '' + 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 + }) + }, + beforeUnmount(el: MyHtmlElement) { + el.stopHandler && el.stopHandler() + el.stopHandler = null + } } diff --git a/src/store/state.ts b/src/store/state.ts index d030a4f..e289c04 100644 --- a/src/store/state.ts +++ b/src/store/state.ts @@ -15,7 +15,7 @@ export interface State { export const state = (): State => ({ shopList: [], selectedModule: '', - language: 'tw', + language: 'zh', config: {}, shop: {}, currentFloor: {}, From 7780b98b66067afa5d3364076de7004529b1dac6 Mon Sep 17 00:00:00 2001 From: jiangx Date: Thu, 10 Mar 2022 13:24:38 +0800 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E8=AF=AD=E8=A8=80=E7=94=B1=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E6=8C=87=E4=BB=A4=E6=94=B9=E4=B8=BA=E5=85=A8=E5=B1=80=E5=87=BD?= =?UTF-8?q?=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/directives/language.ts | 47 ----------------------------------- src/main.ts | 5 ++-- src/plugins/switchLanguage.ts | 26 +++++++++++++++++++ src/typings/switchLanguage.ts | 7 ++++++ 4 files changed, 36 insertions(+), 49 deletions(-) delete mode 100644 src/directives/language.ts create mode 100644 src/plugins/switchLanguage.ts create mode 100644 src/typings/switchLanguage.ts diff --git a/src/directives/language.ts b/src/directives/language.ts deleted file mode 100644 index 4f71ffa..0000000 --- a/src/directives/language.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { watchEffect, DirectiveBinding } from 'vue' -import { useStore } from '@/store' -import { chineseLanguageLoader } from '@/i18n/util' - -interface MyHtmlElement extends HTMLElement { - stopHandler: (() => void) | null -} - -/* - ep:v-language:title="state.obj" -*/ - -export default { - mounted(el: MyHtmlElement, binding: DirectiveBinding) { - if (el.stopHandler) { - el.stopHandler() - el.stopHandler = null - } - el.stopHandler = watchEffect(() => { - const store = useStore() - const language = store.language - const { arg, value } = binding - - if (!Object.keys(value)?.length || !arg) { - return '' - } - - let content = '' - 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 - }) - }, - beforeUnmount(el: MyHtmlElement) { - el.stopHandler && el.stopHandler() - el.stopHandler = null - } -} diff --git a/src/main.ts b/src/main.ts index 3cd6008..7831c22 100644 --- a/src/main.ts +++ b/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) - app.use(router).use(i18n).mount('#app') + app.use(router).use(i18n).use(switchLanguage).mount('#app') }) diff --git a/src/plugins/switchLanguage.ts b/src/plugins/switchLanguage.ts new file mode 100644 index 0000000..16b7acd --- /dev/null +++ b/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) => { + const store = useStore() + + app.config.globalProperties.switchLanguage = (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 + } + } +} diff --git a/src/typings/switchLanguage.ts b/src/typings/switchLanguage.ts new file mode 100644 index 0000000..b1ebb67 --- /dev/null +++ b/src/typings/switchLanguage.ts @@ -0,0 +1,7 @@ +declare module '@vue/runtime-core' { + export interface ComponentCustomProperties { + // eslint-disable-next-line no-unused-vars + switchLanguage: (value: V, key: K) => V[K] + } +} +export {} From d28b9cff4e85abdf127d804ddaa9abceffd46094 Mon Sep 17 00:00:00 2001 From: jiangx Date: Thu, 10 Mar 2022 14:08:07 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9F=BA?= =?UTF-8?q?=E7=A1=80=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=88=E5=92=8C=E7=B9=81?= =?UTF-8?q?=E4=BD=93=E6=96=87=E6=A1=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/Map.vue | 4 ++-- src/i18n/lang/en.json | 3 ++- src/i18n/lang/tw.json | 5 ++++- src/i18n/lang/zh.json | 5 ++++- src/views/Nav/Nav.vue | 13 ++++++++++--- 5 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/components/Map/Map.vue b/src/components/Map/Map.vue index 12fc3eb..47412da 100644 --- a/src/components/Map/Map.vue +++ b/src/components/Map/Map.vue @@ -7,8 +7,8 @@
-
详情
-
导航
+
{{ $t('detail') }}
+
{{ $t('nav') }}
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json index 1797133..0bf8607 100644 --- a/src/i18n/lang/en.json +++ b/src/i18n/lang/en.json @@ -1,3 +1,4 @@ { - + "detail": "Detail", + "nav": "Navigate" } diff --git a/src/i18n/lang/tw.json b/src/i18n/lang/tw.json index 0967ef4..a9b2637 100644 --- a/src/i18n/lang/tw.json +++ b/src/i18n/lang/tw.json @@ -1 +1,4 @@ -{} +{ + "detail": "詳情", + "nav": "導航" +} diff --git a/src/i18n/lang/zh.json b/src/i18n/lang/zh.json index 0967ef4..54f6d36 100644 --- a/src/i18n/lang/zh.json +++ b/src/i18n/lang/zh.json @@ -1 +1,4 @@ -{} +{ + "detail": "详情", + "nav": "导航" +} diff --git a/src/views/Nav/Nav.vue b/src/views/Nav/Nav.vue index db297f3..a506adb 100644 --- a/src/views/Nav/Nav.vue +++ b/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 }