初始化项目，自 v1.7.1 版本开始

src/layout/components/LocaleDropdown/index.ts

@@ -0,0 +1,3 @@
+import LocaleDropdown from './src/LocaleDropdown.vue'
+
+export { LocaleDropdown }

src/layout/components/LocaleDropdown/src/LocaleDropdown.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useLocaleStore } from '@/store/modules/locale'
+import { useLocale } from '@/hooks/web/useLocale'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('locale-dropdown')
+
+defineProps({
+  color: propTypes.string.def('')
+})
+
+const localeStore = useLocaleStore()
+
+const langMap = computed(() => localeStore.getLocaleMap)
+
+const currentLang = computed(() => localeStore.getCurrentLocale)
+
+const setLang = (lang: LocaleType) => {
+  if (lang === unref(currentLang).lang) return
+  // 需要重新加载页面让整个语言多初始化
+  window.location.reload()
+  localeStore.setCurrentLocale({
+    lang
+  })
+  const { changeLocale } = useLocale()
+  changeLocale(lang)
+}
+</script>
+
+<template>
+  <ElDropdown :class="prefixCls" trigger="click" @command="setLang">
+    <Icon
+      :size="18"
+      icon="ion:language-sharp"
+      class="cursor-pointer"
+      :class="$attrs.class"
+      :color="color"
+    />
+    <template #dropdown>
+      <ElDropdownMenu>
+        <ElDropdownItem v-for="item in langMap" :key="item.lang" :command="item.lang">
+          {{ item.name }}
+        </ElDropdownItem>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>