🐛 修复i18n的 Bug

components/common/Footer.vue

@@ -1,3 +1,6 @@
+<script setup lang="ts">
+const localePath = useLocalePath()
+</script>
 <template>
   <footer class="text-gray-800 h-[10vh] bg-[#F1F3F4] dark:text-white  dark:bg-[#5b77af]">
     <div class="max-w-4xl mx-auto py-4 px-4 flex justify-between items-center">
@@ -5,7 +8,7 @@
         © 2024 Whois查询. All rights reserved.
       </div>
       <div class="flex items-center space-x-4">
-        <NuxtLink to="/api.html" class="hover:underline">API文档</NuxtLink>
+        <NuxtLink :to="localePath('/api.html')" class="hover:underline">API文档</NuxtLink>
         <NuxtLink to="https://github.com/7836246/Nuxt-Whois" class="hover:underline">
           <Icon name="ant-design:github-outlined" class="h-6 w-6" />
         </NuxtLink>

lang/en.ts

@@ -3,6 +3,7 @@ export default defineI18nLocale(async locale => {
         index: {
             tips: 'The information you submit for your query will not be recorded!',
             placeholder: 'Please enter a domain name',
+            onSubmit: 'Submit',
         },
         error:{
             formatDomain: 'Error formatting domain name',

lang/tw.ts

@@ -3,6 +3,7 @@ export default defineI18nLocale(async locale => {
         index: {
             tips: '您提交的查詢信息不會被記錄！',
             placeholder: '請輸入域名',
+            onSubmit: '提交',
         },
         error:{
             formatDomain: '域名格式錯誤',

lang/zh.ts

@@ -3,6 +3,7 @@ export default defineI18nLocale(async locale => {
         index: {
             tips: '您提交的查询信息不会被记录！',
             placeholder: '请输入域名',
+            onSubmit: '提交',
         },
         error:{
             formatDomain: '域名格式错误',

layouts/default.vue

@@ -12,6 +12,8 @@ const toast = useToast();
 const router = useRouter();
 
 const runtimeConfig = useRuntimeConfig()
+const localePath = useLocalePath()
+
 
 const handleAction = async (url: any) => {
   if (!state.domain) return toast.add({ title: '请输入域名' })
@@ -23,7 +25,7 @@ const handleAction = async (url: any) => {
   domain = updateDomainForTLD(parts);
   state.domain = domain;
 
-  await router.push(`/${url}/${state.domain.replace(/\./g, '_')}.html`);
+  await router.push(localePath(`/${url}/${state.domain.replace(/\./g, '_')}.html`));
 }
 
 
@@ -67,6 +69,7 @@ const updateDomainForTLD = (parts: string[]): string => {
 const styleStore = useStyleStore()
 const clientMounted = ref(false);
 
+
 onMounted(() => {
   clientMounted.value = true;
 });
@@ -83,7 +86,7 @@ onMounted(() => {
     >
       <nav class=" w-full text-[#464747] h-5 dark:bg-gray-700">
         <NuxtLink class="mb-3 font-bold text-2xl inline-block text-current no-underline dark:text-white"
-                  to="/"
+                  :to="localePath('/')"
         >
           <h1 class="inline-block text-current no-underline dark:text-white">{{ runtimeConfig?.public?.Domain }}</h1>
           <sup class="text-[#59a8d7] dark:text-[#ace4f8]">{{ runtimeConfig?.public?.DomainSuffix }}</sup>
@@ -104,7 +107,7 @@ onMounted(() => {
           </div>
           <!-- 使用v-if或v-show基于state.domain的值来控制按钮的显示 -->
           <UButton type="submit" color="sky" size="xl" v-if="state.domain">
-            提交
+            {{ t('index.onSubmit') }}
           </UButton>
         </UForm>
       </div>

nuxt.config.ts

@@ -32,9 +32,7 @@ export default defineNuxtConfig({
     strategy: 'prefix_except_default',
     defaultLocale: 'zh',
     detectBrowserLanguage: {
-      useCookie: true,
+          useCookie: true,
-      cookieKey: 'i18n_redirected',
-      redirectOn: 'root' // recommended
     },
     locales: [
       { code: 'zh', iso: 'zh-Hans', file: 'zh.ts' },

pages/api.html.vue

@@ -2,6 +2,7 @@
 definePageMeta({
   layout: 'empty',
 })
+const localePath = useLocalePath()
 </script>
 
 <template>
@@ -9,7 +10,7 @@ definePageMeta({
     <div class="overflow-hidden shadow-md rounded-lg">
       <div class="px-6 py-4 bg-red-500 text-white font-bold uppercase">
         <div class="flex items-center justify-between">
-          <NuxtLink to="/" class="hover:text-white">
+          <NuxtLink :to="localePath('/')" class="hover:text-white">
             <Icon name="ic:outline-home" class="h-6 w-6" /> <!-- 调整图标大小 -->
           </NuxtLink>
           <span>Whois关键信息提取API</span>