refactor(ui): Optimize LanguageSwitcher component rendering and type safety

- Simplify language display logic using computed property
- Add Locale interface for improved type checking
- Remove redundant v-for loops in template
- Enhance readability and performance of language selection rendering

src/components/LanguageSwitcher.vue

@@ -8,20 +8,27 @@ import {
 import { Button } from '@/components/ui/button'
 import { Check } from 'lucide-vue-next'
 import { useLocale } from '@/composables/useLocale'
+import { computed } from 'vue'
+
+interface Locale {
+  code: string
+  name: string
+  flag: string
+}
 
 const { currentLocale, locales, setLocale } = useLocale()
+
+const currentLocaleInfo = computed<Locale | undefined>(() => 
+  locales.value.find((locale: Locale) => locale.code === currentLocale.value)
+)
 </script>
 
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
-      <Button variant="ghost" size="sm" class="gap-2 w-[120px] justify-start">
+      <Button variant="ghost" size="sm" class="w-[120px] justify-start">
-        <span v-for="locale in locales" :key="locale.code">
+        <span>{{ currentLocaleInfo?.flag }}</span>
-          {{ locale.code === currentLocale ? locale.flag : '' }}
+        <span>{{ currentLocaleInfo?.name }}</span>
-        </span>
-        <span v-for="locale in locales" :key="locale.code">
-          {{ locale.code === currentLocale ? locale.name : '' }}
-        </span>
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end" class="w-[120px]">