shalu-velofex/apps/web-velofex/src/layouts/select-lang.vue

<script setup lang="ts">
import { computed, ref } from 'vue';

import { loadLocaleMessages } from '@vben/locales';
import { preferences, updatePreferences } from '@vben/preferences';

import { Dropdown } from 'antdv-next';

const items = [
  {
    key: 'en-US',
    label: 'English',
  },
  {
    key: 'zh-CN',
    label: '中文',
  },
];

const show = ref(false);

const currentLabel = computed(() => {
  const selected = items.find((item) => item.key === preferences.app.locale);
  return selected?.label ?? 'Language';
});

const onOpenChange = (open: boolean) => {
  show.value = open;
};

const onMenuClick = (info: any) => {
  if (preferences.app.locale === info.key) {
    return;
  }
  updatePreferences({
    app: {
      locale: info.key,
    },
  });

  loadLocaleMessages(info.key);
};
</script>

<template>
  <Dropdown
    :menu="{ items }"
    placement="bottom"
    @menu-click="onMenuClick"
    @open-change="onOpenChange"
  >
    <div class="flex cursor-pointer items-center gap-2">
      <img
        alt="earth"
        height="20px"
        src="@/assets/image/earth_18301626@2x.png"
        width="20px"
      />
      <span>{{ currentLabel }}</span>
      <img
        :class="show ? 'rotate-180' : ''"
        alt="polygon"
        height="6px"
        src="@/assets/image/Polygon 2.png"
        width="7px"
      />
    </div>
  </Dropdown>
</template>

<style scoped></style>