fix: replace vue3-flag-icons with custom CSS-only flag icons

- Remove vue3-flag-icons dependency (was causing slow loading)
- Create custom flag-icons.css with only cn and us flags (inline SVG)
- Update language-change.vue to use CSS-based flag icons
- Delete vue3-flag-icons type declaration file
- Flag icons now load instantly without any JavaScript overhead
This commit is contained in:
2026-05-07 23:21:53 +08:00
parent c816f4d85c
commit 74d030f846
5 changed files with 28 additions and 30 deletions
+8 -5
View File
@@ -3,7 +3,6 @@ import type { AcceptableValue } from 'reka-ui'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import FlagIcon from 'vue3-flag-icons'
import type { Language } from '@/plugins/i18n'
@@ -35,8 +34,12 @@ const currentFlagCode = computed(() => {
<UiDropdownMenu>
<UiDropdownMenuTrigger as-child>
<UiButton variant="ghost" size="icon" class="h-9 w-9">
<FlagIcon :code="currentFlagCode" :size="20" />
<span class="sr-only">切换语言</span>
<span
class="flag-icon"
:class="`flag-icon-${currentFlagCode}`"
:style="{ width: '20px', height: '15px' }"
/>
<span class="sr-only">{{ $t('changeLanguage') }}</span>
</UiButton>
</UiDropdownMenuTrigger>
<UiDropdownMenuContent align="end">
@@ -47,11 +50,11 @@ const currentFlagCode = computed(() => {
@update:model-value="handleLocaleChange"
>
<UiDropdownMenuRadioItem value="en">
<FlagIcon code="us" :size="18" />
<span class="flag-icon flag-icon-us" :style="{ width: '18px', height: '13.5px' }" />
<span class="ml-2">English</span>
</UiDropdownMenuRadioItem>
<UiDropdownMenuRadioItem value="zh">
<FlagIcon code="cn" :size="18" />
<span class="flag-icon flag-icon-cn" :style="{ width: '18px', height: '13.5px' }" />
<span class="ml-2">中文</span>
</UiDropdownMenuRadioItem>
</UiDropdownMenuRadioGroup>