xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-18 01:36:37 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

optimize(components): optimize spacing for lang-switch dropdown options

Browse Source
This commit is contained in:
wenyuan 2025-06-14 23:06:20 +08:00 committed by Soybean
parent dc674ce870
commit fcb89883fa
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/common/lang-switch.vue
View File

@ -31,13 +31,25 @@ const tooltipContent = computed(() => {
return $t('icon.lang'); 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) { function changeLang(lang: App.I18n.LangType) {
emit('changeLang', lang); emit('changeLang', lang);
} }
</script> </script>
<template> <template>
<NDropdown :value="lang" :options="langOptions" trigger="hover" @select="changeLang"> <NDropdown :value="lang" :options="dropdownOptions" trigger="hover" @select="changeLang">
<div> <div>
<ButtonIcon :tooltip-content="tooltipContent" tooltip-placement="left"> <ButtonIcon :tooltip-content="tooltipContent" tooltip-placement="left">
<SvgIcon icon="heroicons:language" /> <SvgIcon icon="heroicons:language" />