wip: multi-language support

src/components/Application/index.ts

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

src/components/Application/src/AppLocalPicker.vue

@@ -0,0 +1,53 @@
+<template>
+  <Dropdown
+    :trigger="['click']"
+    :dropMenuList="localeList"
+    :selectedKeys="selectedKeys"
+    @menuEvent="handleMenuEvent"
+  >
+    <GlobalOutlined class="app-locale" />
+  </Dropdown>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, watchEffect, unref } from 'vue';
+
+  import { Dropdown, DropMenu } from '/@/components/Dropdown';
+  import { GlobalOutlined } from '@ant-design/icons-vue';
+
+  import { useLocale } from '/@/hooks/web/useLocale';
+  import { useLocaleSetting } from '/@/settings/use/useLocaleSetting';
+
+  import { LocaleType } from '/@/locales/types';
+
+  export default defineComponent({
+    name: 'AppLocalPicker',
+    components: { GlobalOutlined, Dropdown },
+    setup() {
+      const { localeList } = useLocaleSetting();
+      const selectedKeys = ref<string[]>([]);
+
+      const { changeLocale, getLang } = useLocale();
+
+      watchEffect(() => {
+        selectedKeys.value = [unref(getLang)];
+      });
+
+      function toggleLocale(lang: LocaleType | string) {
+        changeLocale(lang as LocaleType);
+        selectedKeys.value = [lang as string];
+      }
+
+      function handleMenuEvent(menu: DropMenu) {
+        toggleLocale(menu.event as string);
+      }
+
+      return { localeList, handleMenuEvent, selectedKeys };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .app-locale {
+    cursor: pointer;
+  }
+</style>

src/components/Dropdown/index.ts

@@ -1,2 +1,2 @@
-export { default as Dropdown } from './Dropdown';
-export * from './types';
+export { default as Dropdown } from './src/Dropdown';
+export * from './src/types';

src/components/Dropdown/src/Dropdown.tsx

@@ -1,32 +1,33 @@
 import { defineComponent, computed, unref } from 'vue';
-import { Dropdown, Menu } from 'ant-design-vue';
+import { Dropdown, Menu, Divider } from 'ant-design-vue';
 
 import Icon from '/@/components/Icon/index';
 
 import { basicDropdownProps } from './props';
 import { getSlot } from '/@/utils/helper/tsxHelper';
+import { Trigger } from './types';
 
 export default defineComponent({
   name: 'Dropdown',
   props: basicDropdownProps,
+  emits: ['menuEvent'],
   setup(props, { slots, emit, attrs }) {
     const getMenuList = computed(() => props.dropMenuList);
 
     function handleClickMenu({ key }: any) {
-      const menu = unref(getMenuList)[key];
+      const menu = unref(getMenuList).find((item) => item.event === key);
       emit('menuEvent', menu);
     }
 
     function renderMenus() {
       return (
-        <Menu onClick={handleClickMenu}>
+        <Menu onClick={handleClickMenu} selectedKeys={props.selectedKeys}>
           {() => (
             <>
               {unref(getMenuList).map((item, index) => {
-                const { disabled, icon, text, divider } = item;
-
+                const { disabled, icon, text, divider, event } = item;
                 return [
-                  <Menu.Item key={`${index}`} disabled={disabled}>
+                  <Menu.Item key={`${event}`} disabled={disabled}>
                     {() => (
                       <>
                         {icon && <Icon icon={icon} />}
@@ -34,8 +35,7 @@ export default defineComponent({
                       </>
                     )}
                   </Menu.Item>,
-                  // @ts-ignore
-                  divider && <Menu.Divider key={`d-${index}`} />,
+                  divider && <Divider key={`d-${index}`} />,
                 ];
               })}
             </>
@@ -45,7 +45,7 @@ export default defineComponent({
     }
 
     return () => (
-      <Dropdown trigger={props.trigger as any} {...attrs}>
+      <Dropdown trigger={props.trigger as Trigger[]} {...attrs}>
         {{
           default: () => <span>{getSlot(slots)}</span>,
           overlay: () => renderMenus(),

src/components/Dropdown/src/props.ts

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import type { DropMenu } from './types';
 
 export const dropdownProps = {
   /**
@@ -15,7 +16,11 @@ export const dropdownProps = {
 };
 export const basicDropdownProps = Object.assign({}, dropdownProps, {
   dropMenuList: {
-    type: Array as PropType<any[]>,
+    type: Array as PropType<DropMenu[]>,
+    default: () => [],
+  },
+  selectedKeys: {
+    type: Array as PropType<string[]>,
     default: () => [],
   },
 });

src/components/Dropdown/src/types.ts

@@ -6,3 +6,5 @@ export interface DropMenu {
   disabled?: boolean;
   divider?: boolean;
 }
+
+export type Trigger = 'click' | 'hover' | 'contextMenu';