From 2143a89341a8a342a1b76506ca5d4d74b7a10b88 Mon Sep 17 00:00:00 2001
From: wenyuan <49969025+wenyuanw@users.noreply.github.com>
Date: Sat, 14 Jun 2025 23:06:20 +0800
Subject: [PATCH] optimize(components): optimize spacing for lang-switch
 dropdown options

---
 src/components/common/lang-switch.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/common/lang-switch.vue b/src/components/common/lang-switch.vue
index 466720c6..bd9d2ec0 100644
--- a/src/components/common/lang-switch.vue
+++ b/src/components/common/lang-switch.vue
@@ -31,13 +31,25 @@ const tooltipContent = computed(() => {
   return $t('icon.lang');
 });
 
+/** Add bottom margin to all options except the last one for proper visual separation */
+const dropdownOptions = computed(() => {
+  const lastIndex = props.langOptions.length - 1;
+
+  return props.langOptions.map((option, index) => ({
+    ...option,
+    props: {
+      class: index < lastIndex ? 'mb-1' : undefined
+    }
+  }));
+});
+
 function changeLang(lang: App.I18n.LangType) {
   emit('changeLang', lang);
 }
 </script>
 
 <template>
-  <NDropdown :value="lang" :options="langOptions" trigger="hover" @select="changeLang">
+  <NDropdown :value="lang" :options="dropdownOptions" trigger="hover" @select="changeLang">
     <div>
       <ButtonIcon :tooltip-content="tooltipContent" tooltip-placement="left">
         <SvgIcon icon="heroicons:language" />