From 6d248ad1fbf9a57d57e6e08b8a3f86a0f026775d Mon Sep 17 00:00:00 2001
From: jiangx <jiangx@1000mu.com>
Date: Thu, 10 Mar 2022 13:24:38 +0800
Subject: [PATCH] =?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<string, any>)
 
-  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<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
+    }
+  }
+}
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: <V extends object, K extends keyof V>(value: V, key: K) => V[K]
+  }
+}
+export {}