feat: add langSwitcher

components/Header.vue

@@ -1,23 +1,34 @@
 <script lang="ts" setup>
 const isSettingsShow = ref(false);
+const isLanguageSwitcherShow = ref(false);
 const localePath = useLocalePath();
 </script>
 
 <template>
   <header h-16 flex items-center container mx-auto px-4 md:px-0>
     <NuxtLink :to="localePath('/')"><Logo /></NuxtLink>
     <Nav flex-1 />
-    <div flex flex-cols gap-4>
+    <div flex flex-cols gap-1 md:gap-4>
       <NuxtLink to="https://github.com/KeJunMao/ai-anything" target="_blank">
         <ABtn color="inherit" variant="text">
           <div class="i-mdi:github"></div>
         </ABtn>
       </NuxtLink>
       <ThemeSelect />
+      <ABtn
+        @click="isLanguageSwitcherShow = true"
+        color="inherit"
+        variant="text"
+      >
+        <div class="i-mdi:translate-variant"></div>
+      </ABtn>
       <ABtn @click="isSettingsShow = true" color="inherit" variant="text">
         <div class="i-mdi:cog"></div>
       </ABtn>
     </div>
+    <ADialog v-model="isLanguageSwitcherShow">
+      <LangSwitcher @change="isLanguageSwitcherShow = false" />
+    </ADialog>
     <ADialog v-model="isSettingsShow">
       <ChatGPTSettings @save="isSettingsShow = false" />
     </ADialog>

components/LangSwitcher.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+const { locale, locales } = useI18n();
+const switchLocalePath = useSwitchLocalePath();
+const emit = defineEmits(["change"]);
+function change(item: any) {
+  emit("change");
+  navigateTo(switchLocalePath(item.code));
+}
+</script>
+<template>
+  <AList>
+    <AListItem
+      v-for="item in locales"
+      :key="item.code"
+      :text="item.name"
+      :is-active="locale === item.code"
+      @click="change(item)"
+    />
+  </AList>
+</template>

locales/en.json

@@ -7,7 +7,7 @@
   "tool.finding_bugs.desc": "The QA...",
   "tool.okr_generator.title": "OKR generator",
   "tool.okr_generator.desc": "How to set OKRs? AI help.",
-  "tool.redbook.title": "Little Red Book Copywriting Generator",
+  "tool.redbook.title": "RedBook Copywriting Generator",
   "tool.redbook.desc": "Help you generate Little Red Book style copywriting.",
   "tool.translator.title": "AI Translator",
   "tool.translator.desc": "Is learning a foreign language difficult? AI can help you translate.",

nuxt.config.ts

@@ -21,7 +21,16 @@ export default defineNuxtConfig({
     classSuffix: "",
   },
   i18n: {
-    locales: ["en", "zh-cn"],
+    locales: [
+      {
+        code: 'en',
+        name: 'English'
+      },
+      {
+        code: 'zh-cn',
+        name: '简体中文'
+      },
+    ],
     defaultLocale: "en",
     vueI18n: {
       legacy: false,