feat: i18n support for document title (#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 <[email protected]>

Author: object-kaz

crowdin.yml

@@ -0,0 +1,3 @@
+files:
+  - source: /packages/web/locales/en.yml
+    translation: /packages/web/locales/%locale%.yml

packages/web/.env.development

@@ -1,6 +1,8 @@
 # just a flag
 ENV = 'development'
 
+
 PORT = 9527
 
 VITE_APP_CONSOLE_URI = 'http://localhost:9528/app-console'
+

packages/web/.env.production

@@ -1,4 +1,6 @@
 # just a flag
 ENV = 'production'
 
+
 VITE_APP_CONSOLE_URI = '/app-console'
+

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']

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

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:

packages/web/router.d.ts

@@ -0,0 +1,7 @@
+import 'vue-router'
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    title?: string
+  }
+}

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>

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()
+}

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>

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) {

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: [],
     },
   },
+
 })