feat: UI i18n depends on router (#289)

frontend/src/views/index/AccountSettings.vue

@@ -6,17 +6,17 @@ import { useRouter } from 'vue-router'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import Appearance from '../common/Appearance.vue'
+import { getRouterPathWithLang } from '../../utils'
 
 const {
-    jwt, localeCache, settings, showAddressCredential, loading
+    jwt, settings, showAddressCredential, loading
 } = useGlobalState()
 const router = useRouter()
 const message = useMessage()
 
 const showLogout = ref(false)
 const showDelteAccount = ref(false)
-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
     messages: {
         en: {
             logout: "Logout",
@@ -39,7 +39,7 @@ const { t } = useI18n({
 
 const logout = async () => {
     jwt.value = '';
-    await router.push('/')
+    await router.push(getRouterPathWithLang("/", locale.value))
     location.reload()
 }
 
@@ -49,7 +49,7 @@ const deleteAccount = async () => {
             method: 'DELETE'
         });
         jwt.value = '';
-        await router.push('/')
+        await router.push(getRouterPathWithLang("/", locale.value))
         location.reload()
     } catch (error) {
         message.error(error.message || "error");

frontend/src/views/index/AddressBar.vue

@@ -11,18 +11,18 @@ import Login from '../common/Login.vue'
 import AddressManagement from '../user/AddressManagement.vue'
 import TelegramAddress from './TelegramAddress.vue'
 import LocalAddress from './LocalAddress.vue'
+import { getRouterPathWithLang } from '../../utils'
 
 const { toClipboard } = useClipboard()
 const message = useMessage()
 const router = useRouter()
 
 const {
-    jwt, localeCache, settings, showAddressCredential, userJwt,
+    jwt, settings, showAddressCredential, userJwt,
     isTelegram
 } = useGlobalState()
 
-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
     messages: {
         en: {
             addressManage: 'Address Manage',
@@ -62,6 +62,10 @@ const copy = async () => {
     }
 }
 
+const onUserLogin = async () => {
+    await router.push(getRouterPathWithLang("/user", locale.value))
+}
+
 onMounted(async () => {
     await api.getSettings();
 });
@@ -104,7 +108,7 @@ onMounted(async () => {
                 </n-alert>
                 <Login />
                 <n-divider />
-                <n-button @click="router.push('/user')" type="primary" block secondary strong>
+                <n-button @click="onUserLogin" type="primary" block secondary strong>
                     <template #icon>
                         <n-icon :component="User" />
                     </template>

frontend/src/views/index/LocalAddress.vue

@@ -9,12 +9,11 @@ import { useGlobalState } from '../../store'
 // @ts-ignore
 import Login from '../common/Login.vue';
 
-const { localeCache, jwt } = useGlobalState()
+const { jwt } = useGlobalState()
 // @ts-ignore
 const message = useMessage()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             tip: 'These addresses are stored in your browser, maybe loss if you clear the browser cache.',

frontend/src/views/index/TelegramAddress.vue

@@ -10,12 +10,11 @@ import { api } from '../../api'
 // @ts-ignore
 import Login from '../common/Login.vue';
 
-const { localeCache, jwt, telegramApp } = useGlobalState()
+const { jwt, telegramApp } = useGlobalState()
 // @ts-ignore
 const message = useMessage()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             success: 'success',

frontend/src/views/index/Webhook.vue

@@ -7,12 +7,11 @@ import { useGlobalState } from '../../store'
 // @ts-ignore
 import { api } from '../../api'
 
-const { localeCache, settings } = useGlobalState()
+const { settings } = useGlobalState()
 // @ts-ignore
 const message = useMessage()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             successTip: 'Success',