From e7b22a497b09e35bd529bb9eabb1f9e5c534623a Mon Sep 17 00:00:00 2001
From: ccbikai <ccbikai@gmail.com>
Date: Sun, 16 Mar 2025 11:17:32 +0800
Subject: [PATCH] refactor: optimize language switcher and header layout

- Extracts language switcher into separate component
- Updates locale display to use country flag emojis
- Improves header responsiveness and spacing
- Removes embedded i18n logic for better separation of concerns
- Adjusts menu items alignment and margins for better visual balance
---
 components/SwitchLanguage.vue | 39 +++++++++++++++++++++++++++++++++++
 components/layouts/Header.vue | 34 +++++++-----------------------
 i18n/i18n.ts                  |  4 ++--
 3 files changed, 48 insertions(+), 29 deletions(-)
 create mode 100644 components/SwitchLanguage.vue

diff --git a/components/SwitchLanguage.vue b/components/SwitchLanguage.vue
new file mode 100644
index 0000000..183a2d4
--- /dev/null
+++ b/components/SwitchLanguage.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { Languages } from 'lucide-vue-next'
+
+const nuxtApp = useNuxtApp()
+const i18n = nuxtApp.$i18n
+const { setLocale, locales } = useI18n()
+const currentLocale = ref(i18n.locale.value)
+
+watch(currentLocale, (newLocale) => {
+  setLocale(newLocale)
+})
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost">
+        <Languages class="w-5 h-5" />
+        <span class="sr-only">{{ $t('theme.toggle') }}</span>
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent
+      align="end"
+      class="min-w-min"
+    >
+      <DropdownMenuItem
+        v-for="locale in locales"
+        :key="locale.code"
+        class="cursor-pointer"
+        @click="setLocale(locale.code)"
+      >
+        <span class="mr-1">
+          {{ locale.emoji }}
+        </span>
+        {{ locale.name }}
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/components/layouts/Header.vue b/components/layouts/Header.vue
index e8e4d47..9ae689f 100644
--- a/components/layouts/Header.vue
+++ b/components/layouts/Header.vue
@@ -1,19 +1,9 @@
 <script setup>
 import { Ellipsis, X } from 'lucide-vue-next'
 import { GitHubIcon } from 'vue3-simple-icons'
-import SwitchTheme from '../SwitchTheme.vue'
 
 const showMenu = ref(false)
 const { title, github } = useAppConfig()
-
-const nuxtApp = useNuxtApp()
-const i18n = nuxtApp.$i18n
-const { setLocale, locales } = useI18n()
-const currentLocale = ref(i18n.locale.value)
-
-watch(currentLocale, (newLocale) => {
-  setLocale(newLocale)
-})
 </script>
 
 <template>
@@ -65,9 +55,9 @@ watch(currentLocale, (newLocale) => {
               </span>
               <span class="mx-2">{{ title }}</span>
             </a>
-            <div class="w-full mx-4" />
+            <div class="w-auto mx-4" />
             <div
-              class="flex flex-col items-start justify-end w-full pt-4 md:items-center md:w-3/5 md:flex-row md:py-0"
+              class="flex flex-col items-start justify-end w-full pt-4 md:items-center md:flex-row md:py-0"
             >
               <a
                 class="w-full px-6 py-2 mr-0 text-gray-700 cursor-pointer dark:text-gray-300 md:px-3 md:mr-2 lg:mr-3 md:w-auto"
@@ -78,26 +68,16 @@ watch(currentLocale, (newLocale) => {
                 :href="github"
                 target="_blank"
                 title="Github"
-                class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white bg-gray-900 md:px-3 md:w-auto md:rounded-full hover:bg-gray-800 focus:outline-none md:focus:ring-2 focus:ring-0 focus:ring-offset-2 focus:ring-gray-800"
+                class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white bg-gray-900 md:px-3 md:w-auto md:rounded-full hover:bg-gray-800 focus:outline-none md:focus:ring-2 focus:ring-0 focus:ring-offset-2 focus:ring-gray-800 mr-2"
               >
                 <GitHubIcon
                   class="w-5 h-5 mr-1"
                 />
                 GitHub</a>
-              <Tabs v-model="currentLocale" class="md:ml-2 lg:ml-3">
-                <TabsList>
-                  <TabsTrigger
-                    v-for="locale in locales"
-                    :key="locale.code"
-                    :value="locale.code"
-                  >
-                    {{ locale.language }}
-                  </TabsTrigger>
-                </TabsList>
-              </Tabs>
-              <span class="ml-1">
-                <SwitchTheme />
-              </span>
+
+              <SwitchLanguage />
+
+              <SwitchTheme />
             </div>
           </div>
         </div>
diff --git a/i18n/i18n.ts b/i18n/i18n.ts
index 8d53559..52fb640 100644
--- a/i18n/i18n.ts
+++ b/i18n/i18n.ts
@@ -5,13 +5,13 @@ const locales: LocaleObject[] = [
     code: 'zh-CN',
     file: 'zh-CN.json',
     name: '简体中文',
-    language: '简',
+    emoji: '🇨🇳',
   },
   {
     code: 'en-US',
     file: 'en-US.json',
     name: 'English',
-    language: 'En',
+    emoji: '🇺🇸',
   },
 ]