<script setup lang="ts">
|
import type { DropMenu } from '@jnpf/ui';
|
|
import type { SupportedLanguagesType } from '@vben/locales';
|
|
import { onMounted, ref, unref, watchEffect } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { Dropdown } from '@jnpf/ui';
|
|
import { loadLocaleMessages } from '@vben/locales';
|
import { preferences, updatePreferences } from '@vben/preferences';
|
|
import { VbenIconButton } from '@vben-core/shadcn-ui';
|
|
import { updateLanguage } from '#/api/permission/userSetting';
|
import { useBaseStore } from '#/store';
|
|
defineOptions({
|
name: 'LanguageToggle',
|
});
|
|
const selectedKeys = ref<string[]>([]);
|
const localeList = ref<DropMenu[]>([]);
|
const baseStore = useBaseStore();
|
const { createMessage } = useMessage();
|
|
watchEffect(() => {
|
selectedKeys.value = [unref(preferences.app.locale)];
|
});
|
|
async function handleUpdate(value: string) {
|
const locale = value as SupportedLanguagesType;
|
selectedKeys.value = [locale as string];
|
updatePreferences({
|
app: {
|
locale,
|
},
|
});
|
await loadLocaleMessages(locale);
|
setTimeout(() => location.reload(), 100);
|
}
|
function handleMenuEvent(menu: DropMenu) {
|
if (unref(preferences.app.locale) === menu.event) return false;
|
updateLanguage({ language: menu.event }).then(() => {
|
let msg = '切换成功';
|
if (menu.event === 'en-US') msg = 'Switch Language Success';
|
if (menu.event === 'zh-TW') msg = '切換成功';
|
createMessage.success(msg);
|
handleUpdate(menu.event as string);
|
});
|
}
|
async function getLocaleList() {
|
const list = (await baseStore.getDictionaryData('Language')) as any[];
|
localeList.value = list.map((item: any) => ({
|
event: item.enCode,
|
text: item.fullName,
|
}));
|
}
|
|
onMounted(() => {
|
getLocaleList();
|
});
|
</script>
|
|
<template>
|
<Dropdown
|
:drop-menu-list="localeList"
|
:selected-keys="selectedKeys"
|
:trigger="['click']"
|
overlay-class-name="app-locale-picker-overlay"
|
placement="bottom"
|
@menu-event="handleMenuEvent">
|
<VbenIconButton class="global-header-icon rounded-md px-[10px]">
|
<i class="icon-ym icon-ym-header-lang text-[18px] text-foreground"></i>
|
</VbenIconButton>
|
</Dropdown>
|
</template>
|
