feat: i18n support for document title (labring#148)

* docs: update docs; * fix: error on opening app-console * Update Crowdin configuration file * feat: i18n support for document title * chore: update language * Update Crowdin configuration file Co-authored-by: maslow <wangfugen@126.com>
LeezQ · Sep 19, 2022 · 5aa8517 · 5aa8517
1 parent ab5b6fc
commit 5aa8517
Show file tree

Hide file tree

Showing 13 changed files with 4,201 additions and 10 deletions.
diff --git a/crowdin.yml b/crowdin.yml
@@ -0,0 +1,3 @@
+files:
+  - source: /packages/web/locales/en.yml
+    translation: /packages/web/locales/%locale%.yml
diff --git a/packages/web/.env.development b/packages/web/.env.development
@@ -1,6 +1,8 @@
 # just a flag
 ENV = 'development'
 
+
 PORT = 9527
 
 VITE_APP_CONSOLE_URI = 'http://localhost:9528/app-console'
+
diff --git a/packages/web/.env.production b/packages/web/.env.production
@@ -1,4 +1,6 @@
 # just a flag
 ENV = 'production'
 
+
 VITE_APP_CONSOLE_URI = '/app-console'
+
diff --git a/packages/web/auto-imports.d.ts b/packages/web/auto-imports.d.ts
@@ -110,7 +110,6 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
-  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
@@ -158,7 +157,6 @@ declare global {
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
   const useI18n: typeof import('vue-i18n')['useI18n']
   const useIdle: typeof import('@vueuse/core')['useIdle']
-  const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
   const useInterval: typeof import('@vueuse/core')['useInterval']

diff --git a/packages/web/locales/en.yml b/packages/web/locales/en.yml
@@ -1,3 +1,5 @@
+app:
+  title: Laf Cloud
 layout:
   topbar:
     title: Laf Cloud
@@ -17,3 +19,14 @@ utils:
     email: Email is invalid
     password: '{name} requires at least 8 digits'
     required: '{name} cannot be empty'
+  message:
+    confirm:
+      buttons:
+        cancel: Cancel
+        confirm: confirm
+      default-message: Are you sure you want to do this?
+      default-title: hint
+    error:
+      default-message: operation failed
+    success:
+      default-message: Successful operation
diff --git a/packages/web/locales/zh-CN.yml b/packages/web/locales/zh-CN.yml
@@ -1,3 +1,5 @@
+app:
+  title: Laf 云开发
 layout:
   topbar:
     title: Laf 云开发
@@ -10,7 +12,7 @@ pages:
       account: 账户
       login-btn: 登录
       password: 密码
-      title: Laf 云开发账户登录
+      title: 登录
     register: 注册
 utils:
   form:

diff --git a/packages/web/router.d.ts b/packages/web/router.d.ts
@@ -0,0 +1,7 @@
+import 'vue-router'
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    title?: string
+  }
+}
diff --git a/packages/web/src/App.vue b/packages/web/src/App.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { initLanguageModule } from './modules/locales'
+import { initLocaleModule } from './modules/locales'
 
-initLanguageModule()
+initLocaleModule()
 </script>
 
 <template>

diff --git a/packages/web/src/modules/locales.ts b/packages/web/src/modules/locales.ts
@@ -35,10 +35,34 @@ const commonLanguages = intersection(userLocales, supportLanguageNames)
 export const bestDefaultLanguage = commonLanguages.length > 0 ? commonLanguages[0] : 'en'
 
 export function initLanguageModule() {
-  // 同步语言设置
+  // sync config from config to i18n
   const { locale } = useI18n()
   const config = useConfigStore()
   watchEffect(() => {
     locale.value = config.local.language
   })
 }
+
+export function initDocTitleModule() {
+  const { t, locale } = useI18n()
+  const title = useTitle()
+  const route = useRoute()
+  watch([() => route.meta.title, locale], () => {
+    const titleParts = [t('app.title')]
+
+    if (route.meta.title) {
+      // support of expressions like t(\'xxxx.xxxx\')
+      const matchResult = /t\(['\"`](([\w\d.]+))['\"`]\)/g.exec(route.meta.title)
+      titleParts.unshift(matchResult ? t(matchResult[1]) : route.meta.title)
+    }
+
+    title.value = titleParts.join(' - ')
+  }, {
+    immediate: true,
+  })
+}
+
+export function initLocaleModule() {
+  initLanguageModule()
+  initDocTitleModule()
+}
diff --git a/packages/web/src/pages/account/login.vue b/packages/web/src/pages/account/login.vue
@@ -85,5 +85,5 @@ const login = async (loginEl: FormInstance | undefined) => {
 <route lang="yaml">
 name: login
 meta:
-  title: 登录
+  title: t('pages.account.login.title')
 </route>
diff --git a/packages/web/src/router/permission.ts b/packages/web/src/router/permission.ts
@@ -12,9 +12,6 @@ router.beforeEach(async (to, from, next) => {
   // start progress bar
   NProgress.start()
 
-  // set page title
-  document.title = to.meta.title ? `${to.meta.title} - LAF 云开发` : 'LAF 云开发'
-
   // determine whether the user has logged in
   const hasToken = getToken()
   if (hasToken) {

diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
@@ -94,6 +94,7 @@ export default defineConfig({
       },
       '/sys-extension-api': {
         target: 'http://console.127-0-0-1.nip.io:8080/',
+
         changeOrigin: true,
       },
     },
@@ -104,4 +105,5 @@ export default defineConfig({
       external: [],
     },
   },
+
 })