chore: Nuxtlink

app.vue

@@ -7,6 +7,7 @@ useHead({
     class: 'scrollbar-thumb-color-dark-50 scrollbar-track-color-transparent scrollbar-radius-2 scrollbar-thumb-radius-4 scrollbar-w-4px scrollbar scrollbar-rounded',
   },
 })
+usePreferredDark()
 </script>
 
 <template>

components/Footer.vue

@@ -16,9 +16,9 @@ const footer = useFoot()
         {{ $t(col.title) }}
       </h5>
 
-      <NuxtLink v-for="(item, i) in col.child" :key="i" class="font-bold" :href="item.link.href">
+      <LocaleNuxtLink v-for="(item, i) in col.child" :key="i" class="font-bold" :href="item.link.href">
         {{ $t(item.link.name) }}
-      </NuxtLink>
+      </LocaleNuxtLink>
     </div>
   </div>
   <div my-10 flex flex-col items-center justify-center gap-4>

components/LocaleNuxtLink.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+$defineProps<{
+  href?: string
+}>()
+
+const localePath = useLocalePath()
+</script>
+
+<template>
+  <NuxtLink :href="href && localePath(href)">
+    <slot />
+  </NuxtLink>
+</template>

components/Typography.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 $defineProps<{
-  img: string
   title?: string
   topic?: string
   description?: string

components/header/nav.vue

@@ -2,19 +2,27 @@
 import { useNav } from '~/config/use-nav'
 
 const navs = useNav()
+
+const { locale, locales, setLocale } = useI18n()
+
+const switchLocalePath = useSwitchLocalePath()
+const availableLocales = computed(() => {
+  // @ts-expect-error
+  return (locales.value).filter(i => i.code !== locale.value)
+})
 </script>
 
 <template>
   <nav>
-    <NuxtLink v-for="(nav, i) in navs" :key="i" class="mx-2 border-primary p-1 pb-5 transition-all" :to="nav.href" active-class="border-b-3px">
+    <LocaleNuxtLink v-for="(nav, i) in navs" :key="i" class="mx-2 border-primary p-1 pb-5 transition-all" :href="nav.href" active-class="border-b-3px">
       <ABtn variant="text">
-        <AMenu v-if="nav.child" style="--un-bg-opacity:0.6;--a-spacing:2" class="backdrop-blur-md" z-1000 mt-5 placement="bottom">
+        <AMenu v-if="nav.child" style="--un-bg-opacity:0.6;--a-spacing:2" class="" z-1000 mt-5 placement="bottom">
           <AList
             :items="nav.child"
             avatar-append
-            class="[--a-list-item-gap:1rem] [--a-spacing:1] border-1px border-light-50/20 !m-0 divide-y divide-dark-50/10 dark:(border-dark-50/20 divide-light-50/10)"
+            class="[--a-list-item-gap:1rem] [--a-spacing:1] border-1px border-light-50/20 backdrop-blur-md !m-0 divide-y divide-dark-50/10 dark:(border-dark-50/20 divide-light-50/10)"
           >
-            <NuxtLink v-for="(item, index) in nav.child" :key="index" :href="item.href" class="overflow-hidden py-1 hover:(bg-primary/20)" active-class="bg-primary/20">
+            <LocaleNuxtLink v-for="(item, index) in nav.child" :key="index" :href="item.href" class="overflow-hidden py-1 hover:(bg-primary/20)" active-class="bg-primary/20">
               <AListItem
                 class="[--a-spacing:1] max-w-300px"
                 :title="$t(item.title)"
@@ -27,11 +35,25 @@ const navs = useNav()
                   />
                 </template>
               </AListItem>
-            </NuxtLink>
+            </LocaleNuxtLink>
           </AList>
         </AMenu>
         <span style="color: hsla(var(--a-base-c), 0.87); " class="font-bold">{{ $t(nav.title) }}</span>
       </ABtn>
-    </NuxtLink>
+    </LocaleNuxtLink>
+    <LocaleNuxtLink
+      v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)"
+      class="mx-2 border-primary p-1 pb-5 transition-all"
+    >
+      <ABtn
+        variant="text"
+      >
+        <span style="color: hsla(var(--a-base-c), 0.87); " class="font-bold">
+          {{
+            locale.code
+          }}
+        </span>
+      </ABtn>
+    </LocaleNuxtLink>
   </nav>
 </template>

config/use-nav.ts

@@ -10,14 +10,10 @@ interface NavMenu {
 }
 
 export function useNav(): NavMenu[] {
-  const { locale } = useI18n()
-
-  const path = locale.value === 'zh' ? '/' : `/${locale.value}`
-
   return [
     {
       title: 'nav.home',
-      href: `${path}`,
+      href: '/',
     },
     {
       title: 'nav.solutions.t',
@@ -25,21 +21,21 @@ export function useNav(): NavMenu[] {
         {
           title: 'nav.solutions.child.land.service[0]',
           subtitle: 'nav.solutions.child.land.description[0]',
-          href: `${path}/land`,
+          href: '/land',
           icon: 'i-solar-airbuds-left-bold-duotone',
           iconColor: 'red',
         },
         {
           title: 'nav.solutions.child.land.service[1]',
           subtitle: 'nav.solutions.child.land.description[1]',
-          href: `${path}/land`,
+          href: '/land',
           icon: 'i-solar-airbuds-left-bold-duotone',
           iconColor: 'amber',
         },
         {
           title: 'nav.solutions.child.land.service[2]',
           subtitle: 'nav.solutions.child.land.description[2]',
-          href: `${path}/land`,
+          href: '/land',
           icon: 'i-solar-airbuds-left-bold-duotone',
           iconColor: 'amber',
         },
@@ -47,7 +43,7 @@ export function useNav(): NavMenu[] {
     },
     {
       title: 'nav.news',
-      href: `${path}/news`,
+      href: '/news',
     },
     {
       title: 'nav.event.t',
@@ -55,14 +51,14 @@ export function useNav(): NavMenu[] {
         {
           title: 'nav.event.child.act[0]',
           subtitle: 'nav.event.child.description[0]',
-          href: `${path}/land`,
+          href: '/land',
           icon: 'i-solar-airbuds-left-bold-duotone',
           iconColor: 'red',
         },
         {
           title: 'nav.event.child.act[1]',
           subtitle: 'nav.event.child.description[1]',
-          href: `${path}/land`,
+          href: '/land',
           icon: 'i-solar-airbuds-left-bold-duotone',
           iconColor: 'red',
         },

nuxt.config.ts

@@ -66,10 +66,6 @@ export default defineNuxtConfig({
         file: 'zh-CN.json',
       },
     ],
-    detectBrowserLanguage: {
-      useCookie: true,
-      cookieCrossOrigin: true,
-    },
     lazy: true,
     langDir: 'locales',
     defaultLocale: 'zh',

pages/index.vue

@@ -31,7 +31,7 @@ const sectionNine = useSectionNine()
     <Typography :title=" $t(sectionTwo.title) " :description=" $t(sectionTwo.description) " />
 
     <div class="grid-row grid-cols-2 py-10 md:grid-cols-3" :class="`lg:grid-cols-${sectionTwo.content.length}`">
-      <NuxtLink
+      <LocaleNuxtLink
         v-for="(content, i) in sectionTwo.content"
         :key="i"
         class="h-10 w-full flex justify-center"
@@ -39,7 +39,7 @@ const sectionNine = useSectionNine()
         :title="$t(content.title)"
       >
         <img :src="content.img">
-      </NuxtLink>
+      </LocaleNuxtLink>
     </div>
   </Section>
 
@@ -70,9 +70,9 @@ const sectionNine = useSectionNine()
         />
       </div>
     </div>
-    <NuxtLink :href="sectionThree.link.href">
+    <LocaleNuxtLink :href="sectionThree.link.href">
       <ABtn>{{ $t(sectionThree.link.name) }}</ABtn>
-    </NuxtLink>
+    </LocaleNuxtLink>
   </Section>
 
   <!-- Section Four -->
@@ -125,11 +125,11 @@ const sectionNine = useSectionNine()
             {{ $t(item.description) }}
           </p>
           <div v-if="item.link" w-full py-10>
-            <NuxtLink :href="item.link.href">
+            <LocaleNuxtLink :href="item.link.href">
               <ABtn variant="light" class="group">
                 {{ $t(item.link.name) }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
               </ABtn>
-            </NuxtLink>
+            </LocaleNuxtLink>
           </div>
         </div>
       </div>
@@ -178,7 +178,7 @@ const sectionNine = useSectionNine()
   <Divider />
 
   <!-- Section Nine -->
-  <Section class="bg-gradient-green my-10">
+  <Section class="my-10 bg-gradient-green">
     <Typography :title="$t(sectionNine.title)" :topic=" $t(sectionNine.topic)" :description=" $t(sectionNine.description)" class="text-start" />
   </Section>
   <Divider />