feat(i18n): enhance locale handling and routing (#996)

* feat(i18n): enhance locale handling and routing

- Implemented dynamic locale aliases in router configuration.
- Added support for preferred locale storage in global state.
- Improved locale resolution logic in router beforeEach guard.
- Created utility functions for locale management and path manipulation.
- Added tests for locale matching and message extraction.
- Updated Header component to allow language selection.
- Refactored getRouterPathWithLang to utilize new locale utilities.
- Updated Vite configuration to support aliasing for vue-i18n.
- Bumped version numbers across various packages to 1.9.0.

* feat(i18n): update version to 1.8.0 and enhance locale handling

- Updated version numbers across all package.json files to 1.8.0.
- Enhanced locale handling in App.vue by centralizing locale configurations.
- Improved Turnstile component to support dynamic language rendering.
- Refactored i18n utilities to include initial locale setup and empty locale messages.
- Updated i18n.ts to utilize the new locale management structure.
- Added naive-locale.ts for better integration with Naive UI's locale handling.
- Adjusted Header.vue to streamline language selection and locale changes.
- Fixed translations in multiple locale files for consistency and accuracy.

* fix(i18n): address review feedback

* feat(i18n): update default locale to English and enhance language handling in components

* fix(i18n): switch locale selector to dropdown

* docs: add topbar language and github order design spec

* fix(i18n): 修复 Header 语言切换器相关问题，恢复为独立控件并调整样式

* Refactor locale handling in router and add locale-guard utility functions

- Improved locale resolution logic in router by introducing utility functions for better readability and maintainability.
- Added `locale-guard.js` to encapsulate locale-related functions such as getting route locale, resolving locale for navigation, and applying locale navigation state.
- Updated JWT synchronization logic to streamline the handling of JWT from query parameters.
- Modified i18n messages test to check for coverage of registered locale message keys instead of extracting English source messages.

* 删除顶部栏语言和GitHub顺序设计文档

* fix: 修复前端设置初始化时未返回 domains 数组导致的 undefined 错误

* refactor(i18n): consolidate locale infrastructure

* fix(i18n): stabilize locale route switching

* fix(i18n): persist default locale selection

* fix(i18n): 修复前端设置初始化时未返回 domains 数组导致的 undefined 错误，统一按空数组兜底处理
feat(i18n): 添加 locale 别名处理，支持默认语言的重定向
test(i18n): 增加对默认语言别名重定向的测试用例

* refactor: replace useAppI18n with useScopedI18n in multiple components for improved localization management

* fix(tests): 移除不必要的 URL 断言以简化 Passkey 测试

* fix(i18n): 更新语言切换逻辑，确保使用当前语言设置进行路由导航

* fix(i18n): 强制路由切换以确保语言切换后正确导航

* refactor(i18n): 优化消息注册和路由本地化逻辑，移除冗余代码

* refactor(i18n): 拆分 API 文件以优化路由管理，更新语言处理逻辑

* fix: align i18n release notes and frontend test script

frontend/src/components/AddressSelect.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onMounted, ref, watch } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
-import { useI18n } from 'vue-i18n'
+import { useScopedI18n } from '@/i18n/app'
 import { useMessage } from 'naive-ui'
 import useClipboard from 'vue-clipboard3'
 import { Copy } from '@vicons/fa'
@@ -27,24 +27,7 @@ const {
     jwt, settings, userJwt, isTelegram, openSettings, telegramApp
 } = useGlobalState()
 
-const { t } = useI18n({
-    messages: {
-        en: {
-            userAddresses: 'User Addresses',
-            localAddresses: 'Local Addresses',
-            address: 'Address',
-            copy: 'Copy',
-            copied: 'Copied',
-        },
-        zh: {
-            userAddresses: '用户地址',
-            localAddresses: '本地地址',
-            address: '地址',
-            copy: '复制',
-            copied: '已复制',
-        }
-    }
-});
+const { t } = useScopedI18n('components.AddressSelect')
 
 const addressOptions = ref([])
 const addressValue = ref(null)

frontend/src/components/AiExtractInfo.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useScopedI18n } from '@/i18n/app';
 import { ContentCopyOutlined, LinkRound, CodeRound } from '@vicons/material';
 import { useMessage } from 'naive-ui';
 import { useGlobalState } from '../store';
@@ -32,30 +32,7 @@ const tagThemeOverrides = computed(() => {
   return {}
 });
 
-const { t } = useI18n({
-  messages: {
-    en: {
-      authCode: 'Verification Code',
-      authLink: 'Authentication Link',
-      serviceLink: 'Service Link',
-      subscriptionLink: 'Subscription Link',
-      otherLink: 'Other Link',
-      copySuccess: 'Copied successfully',
-      copyFailed: 'Copy failed',
-      open: 'Open',
-    },
-    zh: {
-      authCode: '验证码',
-      authLink: '认证链接',
-      serviceLink: '服务链接',
-      subscriptionLink: '订阅链接',
-      otherLink: '其他链接',
-      copySuccess: '复制成功',
-      copyFailed: '复制失败',
-      open: '打开',
-    }
-  }
-});
+const { t } = useScopedI18n('components.AiExtractInfo')
 
 const props = defineProps({
   metadata: {

frontend/src/components/MailBox.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { watch, onMounted, ref, onBeforeUnmount, computed } from "vue";
 import { useMessage } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
+import { useScopedI18n } from '@/i18n/app'
 import { useGlobalState } from '../store'
 import { CloudDownloadRound, ArrowBackIosNewFilled, ArrowForwardIosFilled, InboxRound } from '@vicons/material'
 import { useIsMobile } from '../utils/composables'
@@ -138,60 +138,7 @@ const showMultiActionDelete = ref(false)
 const multiActionDownloadZip = ref({})
 const multiActionDeleteProgress = ref({ percentage: 0, tip: '0/0' })
 
-const { t } = useI18n({
-  messages: {
-    en: {
-      success: 'Success',
-      autoRefresh: 'Auto Refresh',
-      refreshAfter: 'Refresh After {msg} Seconds',
-      refresh: 'Refresh',
-      attachments: 'Show Attachments',
-      downloadMail: 'Download Mail',
-      pleaseSelectMail: "Please select mail",
-      emptyInbox: "Your inbox is empty",
-      delete: 'Delete',
-      deleteMailTip: 'Are you sure you want to delete mail?',
-      reply: 'Reply',
-      forwardMail: 'Forward',
-      showTextMail: 'Show Text Mail',
-      showHtmlMail: 'Show Html Mail',
-      saveToS3: 'Save to S3',
-      multiAction: 'Multi Action',
-      cancelMultiAction: 'Cancel Multi Action',
-      selectAll: 'Select All of This Page',
-      unselectAll: 'Unselect All',
-      prevMail: 'Previous',
-      nextMail: 'Next',
-      keywordQueryTip: 'Filter current page',
-      query: 'Query',
-    },
-    zh: {
-      success: '成功',
-      autoRefresh: '自动刷新',
-      refreshAfter: '{msg}秒后刷新',
-      refresh: '刷新',
-      downloadMail: '下载邮件',
-      attachments: '查看附件',
-      pleaseSelectMail: "请选择邮件",
-      emptyInbox: "收件箱为空",
-      delete: '删除',
-      deleteMailTip: '确定要删除邮件吗?',
-      reply: '回复',
-      forwardMail: '转发',
-      showTextMail: '显示纯文本邮件',
-      showHtmlMail: '显示HTML邮件',
-      saveToS3: '保存到S3',
-      multiAction: '多选',
-      cancelMultiAction: '取消多选',
-      selectAll: '全选本页',
-      unselectAll: '取消全选',
-      prevMail: '上一封',
-      nextMail: '下一封',
-      keywordQueryTip: '过滤当前页',
-      query: '查询',
-    }
-  }
-});
+const { t } = useScopedI18n('components.MailBox')
 
 const setupAutoRefresh = async (autoRefresh) => {
   // auto refresh every configAutoRefreshInterval seconds

frontend/src/components/MailContentRenderer.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from "vue";
-import { useI18n } from 'vue-i18n'
+import { useScopedI18n } from '@/i18n/app'
 import { CloudDownloadRound, ReplyFilled, ForwardFilled, FullscreenRound } from '@vicons/material'
 import ShadowHtmlComponent from "./ShadowHtmlComponent.vue";
 import AiExtractInfo from "./AiExtractInfo.vue";
@@ -10,36 +10,7 @@ import { useGlobalState } from '../store';
 
 const { preferShowTextMail, useIframeShowMail, useUTCDate, isDark } = useGlobalState();
 
-const { t } = useI18n({
-  messages: {
-    en: {
-      delete: 'Delete',
-      deleteMailTip: 'Are you sure you want to delete mail?',
-      attachments: 'View Attachments',
-      downloadMail: 'Download Mail',
-      reply: 'Reply',
-      forward: 'Forward',
-      showTextMail: 'Show Text Mail',
-      showHtmlMail: 'Show HTML Mail',
-      saveToS3: 'Save to S3',
-      size: 'Size',
-      fullscreen: 'Fullscreen',
-    },
-    zh: {
-      delete: '删除',
-      deleteMailTip: '确定要删除邮件吗?',
-      attachments: '查看附件',
-      downloadMail: '下载邮件',
-      reply: '回复',
-      forward: '转发',
-      showTextMail: '显示纯文本邮件',
-      showHtmlMail: '显示HTML邮件',
-      saveToS3: '保存到S3',
-      size: '大小',
-      fullscreen: '全屏',
-    }
-  }
-});
+const { t } = useScopedI18n('components.MailContentRenderer')
 
 const props = defineProps({
   mail: {

frontend/src/components/SendBox.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { watch, onMounted, ref, computed } from "vue";
 import { useMessage } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
+import { useScopedI18n } from '@/i18n/app'
 import { useGlobalState } from '../store'
 import { useIsMobile } from '../utils/composables'
 import { utcToLocalDate } from '../utils';
@@ -46,36 +46,7 @@ const multiActionMode = ref(false)
 const showMultiActionDelete = ref(false)
 const multiActionDeleteProgress = ref({ percentage: 0, tip: '0/0' })
 
-const { t } = useI18n({
-  messages: {
-    en: {
-      success: 'Success',
-      refresh: 'Refresh',
-      showCode: 'Change View Original Code',
-      pleaseSelectMail: "Please select a mail to view.",
-      emptySent: "No sent emails",
-      delete: 'Delete',
-      deleteMailTip: 'Are you sure you want to delete mail?',
-      multiAction: 'Multi Action',
-      cancelMultiAction: 'Cancel Multi Action',
-      selectAll: 'Select All of This Page',
-      unselectAll: 'Unselect All',
-    },
-    zh: {
-      success: '成功',
-      refresh: '刷新',
-      showCode: '切换查看元数据',
-      pleaseSelectMail: "请选择一封邮件查看。",
-      emptySent: "发件箱为空",
-      delete: '删除',
-      deleteMailTip: '确定要删除邮件吗?',
-      multiAction: '多选',
-      cancelMultiAction: '取消多选',
-      selectAll: '全选本页',
-      unselectAll: '取消全选',
-    }
-  }
-});
+const { t } = useScopedI18n('components.SendBox')
 
 watch([page, pageSize], async ([page, pageSize], [oldPage, oldPageSize]) => {
   if (page !== oldPage || pageSize !== oldPageSize) {

frontend/src/components/Turnstile.vue

@@ -1,29 +1,32 @@
 <script setup>
-import { ref, watch, onMounted } from "vue";
-import { useI18n } from 'vue-i18n'
+import { ref, watch } from "vue";
+import { useScopedI18n } from '@/i18n/app'
 import { useGlobalState } from '../store'
+import { getTurnstileLocale } from '../i18n/locale-registry'
+import { DEFAULT_LOCALE, isSupportedLocale } from '../i18n/utils'
 const { openSettings, isDark } = useGlobalState()
 
 const cfToken = defineModel('value')
 
-const { locale, t } = useI18n({
-    messages: {
-        en: {
-            refresh: 'Refresh'
-        },
-        zh: {
-            refresh: '刷新'
-        }
-    }
-});
+const { locale, t } = useScopedI18n('components.Turnstile')
 
 const containerId = `cf-turnstile-${Math.random().toString(36).slice(2, 9)}`
 const cfTurnstileId = ref("")
 const turnstileLoading = ref(false)
+let turnstileRenderQueue = Promise.resolve()
 
-const refresh = () => checkCfTurnstile(true)
+const refresh = () => rerenderTurnstile()
 defineExpose({ refresh })
 
+const rerenderTurnstile = () => {
+    cfToken.value = "";
+    turnstileRenderQueue = turnstileRenderQueue
+        .catch(() => { })
+        .then(() => checkCfTurnstile(true))
+    turnstileRenderQueue.catch(() => { })
+    return turnstileRenderQueue
+}
+
 const checkCfTurnstile = async (remove) => {
     if (!openSettings.value.cfTurnstileSiteKey) return;
     turnstileLoading.value = true;
@@ -41,11 +44,15 @@ const checkCfTurnstile = async (remove) => {
         if (remove && cfTurnstileId.value) {
             window.turnstile.remove(cfTurnstileId.value);
         }
+        // Cloudflare documents sitekey/theme/language as render-time options and
+        // exposes remove()/render() for widget lifecycle updates, so recreate the
+        // widget when any of those inputs change:
+        // https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/
         cfTurnstileId.value = window.turnstile.render(
             `#${containerId}`,
             {
                 sitekey: openSettings.value.cfTurnstileSiteKey,
-                language: locale.value == 'zh' ? 'zh-CN' : 'en-US',
+                language: getTurnstileLocale(isSupportedLocale(locale.value) ? locale.value : DEFAULT_LOCALE),
                 theme: isDark.value ? 'dark' : 'light',
                 callback: function (token) {
                     cfToken.value = token;
@@ -57,14 +64,7 @@ const checkCfTurnstile = async (remove) => {
     }
 }
 
-watch(isDark, async (isDark) => {
-    checkCfTurnstile(true)
-}, { immediate: true })
-
-onMounted(() => {
-    cfToken.value = "";
-    checkCfTurnstile(true);
-})
+watch([isDark, locale, () => openSettings.value.cfTurnstileSiteKey], rerenderTurnstile, { immediate: true })
 </script>
 
 <template>
@@ -73,7 +73,7 @@ onMounted(() => {
             <n-form-item-row>
                 <n-flex vertical>
                     <div :id="containerId"></div>
-                    <n-button text @click="checkCfTurnstile(true)">
+                    <n-button text @click="rerenderTurnstile">
                         {{ t('refresh') }}
                     </n-button>
                 </n-flex>

frontend/src/components/WebhookComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, h } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { useScopedI18n } from '@/i18n/app'
 import type { DropdownOption } from 'naive-ui'
 
 const props = defineProps({
@@ -24,30 +24,7 @@ const props = defineProps({
 // @ts-ignore
 const message = useMessage()
 
-const { t } = useI18n({
-    messages: {
-        en: {
-            successTip: 'Success',
-            test: 'Test',
-            save: 'Save',
-            notEnabled: 'Webhook is not enabled for you',
-            urlMissing: 'URL is required',
-            enable: 'Enable',
-            presets: 'Presets',
-            fillInDemoTip: 'Please modify the URL and other settings to your own',
-        },
-        zh: {
-            successTip: '成功',
-            test: '测试',
-            save: '保存',
-            notEnabled: 'Webhook 未开启，请联系管理员开启',
-            urlMissing: 'URL 不能为空',
-            enable: '启用',
-            presets: '示例模板',
-            fillInDemoTip: '请修改URL和其他设置为您自己的配置',
-        }
-    }
-});
+const { t } = useScopedI18n('components.WebhookComponent')
 
 class WebhookSettings {
     enabled: boolean = false