初始化 antd-pro

admin-web/src/components/SelectLang/index.js

@@ -0,0 +1,49 @@
+import React, { PureComponent } from 'react';
+import { formatMessage, setLocale, getLocale } from 'umi/locale';
+import { Menu, Icon } from 'antd';
+import classNames from 'classnames';
+import HeaderDropdown from '../HeaderDropdown';
+import styles from './index.less';
+
+export default class SelectLang extends PureComponent {
+  changeLang = ({ key }) => {
+    setLocale(key);
+  };
+
+  render() {
+    const { className } = this.props;
+    const selectedLang = getLocale();
+    const locales = ['zh-CN', 'zh-TW', 'en-US', 'pt-BR'];
+    const languageLabels = {
+      'zh-CN': '简体中文',
+      'zh-TW': '繁体中文',
+      'en-US': 'English',
+      'pt-BR': 'Português',
+    };
+    const languageIcons = {
+      'zh-CN': '🇨🇳',
+      'zh-TW': '🇭🇰',
+      'en-US': '🇬🇧',
+      'pt-BR': '🇧🇷',
+    };
+    const langMenu = (
+      <Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={this.changeLang}>
+        {locales.map(locale => (
+          <Menu.Item key={locale}>
+            <span role="img" aria-label={languageLabels[locale]}>
+              {languageIcons[locale]}
+            </span>{' '}
+            {languageLabels[locale]}
+          </Menu.Item>
+        ))}
+      </Menu>
+    );
+    return (
+      <HeaderDropdown overlay={langMenu} placement="bottomRight">
+        <span className={classNames(styles.dropDown, className)}>
+          <Icon type="global" title={formatMessage({ id: 'navBar.lang' })} />
+        </span>
+      </HeaderDropdown>
+    );
+  }
+}

admin-web/src/components/SelectLang/index.less

@@ -0,0 +1,24 @@
+@import '~antd/lib/style/themes/default.less';
+
+.menu {
+  :global(.anticon) {
+    margin-right: 8px;
+  }
+  :global(.ant-dropdown-menu-item) {
+    min-width: 160px;
+  }
+}
+
+.dropDown {
+  line-height: @layout-header-height;
+  vertical-align: top;
+  cursor: pointer;
+  > i {
+    font-size: 16px !important;
+    transform: none !important;
+    svg {
+      position: relative;
+      top: -1px;
+    }
+  }
+}