Update i18n & header

frontend/package.json

@@ -11,7 +11,8 @@
  "dependencies": {
  "@vueuse/core": "^10.9.0",
  "vue": "^3.4.25",
- "vue-i18n": "^9.13.1"
+ "vue-i18n": "^9.13.1",
+ "vue-router": "^4.3.2"
  },
  "devDependencies": {
  "@types/node": "^20.12.7",

frontend/src/App.vue

@@ -1 +1,31 @@
-<template></template>
+<script lang="ts" setup>
+import { onBeforeMount, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { setupI18n } from '@/i18n';
+import { useTitle } from '@vueuse/core';
+
+// Components
+import AppHeader from '@/components/AppHeader.vue';
+
+// Injects
+const title = useTitle();
+const { locale, t } = useI18n();
+
+// Watches
+watch(locale, (): void => {
+ title.value = t('title');
+});
+
+// Hooks
+onBeforeMount(async (): Promise<void> => {
+ // Setup i18n
+ await setupI18n();
+
+ // Set title
+ title.value = t('title');
+});
+</script>
+
+<template>
+ <AppHeader />
+</template>

frontend/src/i18n/index.ts

@@ -1,10 +1,11 @@
 /// I18n module
+import { Ref } from 'vue';
 import { I18n, createI18n } from 'vue-i18n';
 import { useLocalStorage, useNavigatorLanguage } from '@vueuse/core';
 
 // Intergrated locales
 import en from '@/i18n/locales/en.json';
-import { Ref } from 'vue';
+import zh from '@/i18n/locales/zh.json';
 
 // Types
 export type LocaleInfo = {
@@ -19,7 +20,7 @@ export const SUPPORT_LOCALES: LocaleInfo[] = [
  display: 'English'
  },
  {
- locale: 'zh-CN',
+ locale: 'zh',
  display: '简体中文'
  }
 ];
@@ -28,11 +29,11 @@ export const SUPPORT_LOCALES: LocaleInfo[] = [
 export const i18n: I18n = createI18n({
  fallbackLocale: 'en',
  legacy: false,
- messages: { en }
+ messages: { en, zh }
 });
 
 // Setup i18n
-export const setupI18n = (): void => {
+export const setupI18n = async (): Promise<void> => {
  // Get local storage locale
  let locale: string | undefined = useLocalStorage('language', undefined).value;
 
@@ -45,37 +46,66 @@ export const setupI18n = (): void => {
  }
 
  // Set locale
- setLocale(locale);
+ await setLocale(locale);
 };
 
 // Set language
-export const setLocale = (locale: string): void => {
- // Set locale
- (i18n.global.locale as Ref).value = locale;
- document.documentElement.setAttribute('lang', locale);
+export const setLocale = async (locale: string): Promise<void> => {
+ console.debug(`[i18n] Try set locale to "${locale}"`);
 
- // Check support
- if (
- SUPPORT_LOCALES.find(
- (v: LocaleInfo): boolean =>
- v.locale === locale || v.locale.split('-')[0] === locale
- ) === undefined
- ) {
- return;
+ // Match support
+ const match: [string, number][] = SUPPORT_LOCALES.map(
+ (v: LocaleInfo): [string, number] => {
+ // Split locales
+ const p1: string[] = v.locale.split('-');
+ const p2: string[] = locale.split('-');
+
+ // Count matches
+ let matches: number = 0;
+ for (let i = 0; i < Math.min(p1.length, p2.length); i++) {
+ if (p1[i] === p2[i]) {
+ matches++;
+ } else {
+ break;
+ }
+ }
+
+ // Return match
+ return [v.locale, matches];
+ }
+ ).sort(([l1, a], [l2, b]): number => (a !== b ? b - a : l1 < l2 ? -1 : 1));
+ console.debug(
+ `[i18n] Support locale matches: ${match
+ .filter(([_, n]): boolean => n > 0)
+ .map(([l, n]): string => `(${l},${n})`)
+ .join(',')}`
+ );
+
+ // If has support
+ if (match.length > 0 && match[0][1] > 0) {
+ await loadMessages(match[0][0]);
+ } else {
+ console.debug(`[i18n] Locale "${locale}" not support`);
  }
 
- // Load messages
- loadMessages(locale);
+ // Set locale
+ (i18n.global.locale as Ref).value = locale;
+ document.documentElement.setAttribute('lang', locale);
+ console.debug(`[i18n] Locale "${locale}" set`);
 };
 
 // Load messages
 const loadMessages = async (locale: string): Promise<void> => {
+ console.debug(`[i18n] Try load locale "${locale}" messages`);
+
  // If already loaded
  if (i18n.global.availableLocales.includes(locale)) {
+ console.debug(`[i18n] Locale "${locale}" messages already loaded`);
  return;
  }
 
  // Load messages
  const msg: any = await import(`./locales/${locale}.json`);
  i18n.global.setLocaleMessage(locale, msg);
+ console.debug(`[i18n] Locale "${locale}" messages loaded`);
 };

frontend/src/i18n/locales/en.json

@@ -1 +1,3 @@
-{}
+{
+ "title": "P2P Transfer"
+}

frontend/src/i18n/locales/zh.json

@@ -0,0 +1,3 @@
+{
+ "title": "P2P 传输助手"
+}