Initial commit

src/layout/components/i18n-icon.vue

@@ -0,0 +1,52 @@
+<!-- 国际化语言切换组件 -->
+<template>
+  <a-dropdown
+    :placement="placement"
+    :overlay-style="{ minWidth: '120px', paddingTop: '17px' }"
+  >
+    <slot>
+      <global-outlined :style="style" />
+    </slot>
+    <template #overlay>
+      <a-menu :selected-keys="language" @click="changeLanguage">
+        <a-menu-item key="en">English</a-menu-item>
+        <a-menu-item key="zh_CN">简体中文</a-menu-item>
+        <a-menu-item key="zh_TW">繁體中文</a-menu-item>
+      </a-menu>
+    </template>
+  </a-dropdown>
+</template>
+
+<script lang="ts" setup>
+  import type { CSSProperties } from 'vue';
+  import { computed } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { GlobalOutlined } from '@ant-design/icons-vue';
+  import { I18N_CACHE_NAME } from '@/config/setting';
+
+  withDefaults(
+    defineProps<{
+      // dropdown placement
+      placement?: any;
+      // 自定义样式
+      style?: CSSProperties;
+    }>(),
+    {
+      placement: 'bottom',
+      style: () => {
+        return { transform: 'scale(1.08)' };
+      }
+    }
+  );
+
+  const { locale } = useI18n();
+
+  // 当前显示语言
+  const language = computed(() => [locale.value]);
+
+  /* 切换语言 */
+  const changeLanguage = ({ key }) => {
+    locale.value = key;
+    localStorage.setItem(I18N_CACHE_NAME, key);
+  };
+</script>