feat: multi-language layout

src/components/Application/index.ts

@@ -1,8 +1,8 @@
-import AppLocalPicker from './src/AppLocalPicker.vue';
+import AppLocalePicker from './src/AppLocalePicker.vue';
 import AppPageFooter from './src/AppPageFooter.vue';
 import AppLogo from './src/AppLogo.vue';
 import { withInstall } from '../util';
 
-export { AppLocalPicker, AppPageFooter, AppLogo };
+export { AppLocalePicker, AppPageFooter, AppLogo };
 
-export default withInstall(AppLocalPicker, AppPageFooter, AppLogo);
+export default withInstall(AppLocalePicker, AppPageFooter, AppLogo);

src/components/Application/src/AppLocalePicker.vue

@@ -4,6 +4,7 @@
     :dropMenuList="localeList"
     :selectedKeys="selectedKeys"
     @menuEvent="handleMenuEvent"
+    overlayClassName="app-locale-picker-overlay"
   >
     <span class="app-local-picker">
       <GlobalOutlined class="app-local-picker__icon" />
@@ -30,8 +31,12 @@
         type: Boolean,
         default: true,
       },
+      reload: {
+        type: Boolean,
+        default: false,
+      },
     },
-    setup() {
+    setup(props) {
       const { localeList } = useLocaleSetting();
       const selectedKeys = ref<string[]>([]);
 
@@ -50,6 +55,7 @@
       function toggleLocale(lang: LocaleType | string) {
         changeLocale(lang as LocaleType);
         selectedKeys.value = [lang as string];
+        props.reload && location.reload();
       }
 
       function handleMenuEvent(menu: DropMenu) {
@@ -61,7 +67,13 @@
   });
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
+  .app-locale-picker-overlay {
+    .ant-dropdown-menu-item {
+      min-width: 160px;
+    }
+  }
+
   .app-local-picker {
     display: flex;
     align-items: center;

src/components/Dropdown/src/Dropdown.tsx

@@ -1,11 +1,12 @@
+import type { Trigger } from './types';
+
 import { defineComponent, computed, unref } from 'vue';
-import { Dropdown, Menu, Divider } from 'ant-design-vue';
+import { Dropdown, Menu } 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',
@@ -24,7 +25,7 @@ export default defineComponent({
         <Menu onClick={handleClickMenu} selectedKeys={props.selectedKeys}>
           {() => (
             <>
-              {unref(getMenuList).map((item, index) => {
+              {unref(getMenuList).map((item) => {
                 const { disabled, icon, text, divider, event } = item;
                 return [
                   <Menu.Item key={`${event}`} disabled={disabled}>
@@ -35,7 +36,8 @@ export default defineComponent({
                       </>
                     )}
                   </Menu.Item>,
-                  divider && <Divider key={`d-${index}`} />,
+                  // @ts-ignore
+                  divider && <Menu.Divider key={`d-${event}`} />,
                 ];
               })}
             </>