Using dropdown to select the language and localized to Brazilian Portuguese (#2384)

* using dropdown to select the language

* Brazilian portuguese idiome

* lang: change the select language dropdown label to "Languages" instead
of showing the current language.

* lang: change the select language dropdown label to "Languages" instead
of showing the current language.

* Select language from login and register

* Refactored SelectLang component

* Localized login to portuguese

src/components/GlobalHeader/RightContent.js

 import React, { PureComponent } from 'react';
-import { FormattedMessage, formatMessage, setLocale, getLocale } from 'umi/locale';
-import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip, Button } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi/locale';
+import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip } from 'antd';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
 import NoticeIcon from '../NoticeIcon';
 import HeaderSearch from '../HeaderSearch';
+import SelectLang from '../SelectLang';
 import styles from './index.less';
 
 export default class GlobalHeaderRight extends PureComponent {
@@ -39,15 +40,6 @@ export default class GlobalHeaderRight extends PureComponent {
     return groupBy(newNotices, 'type');
   }
 
-  changLang = () => {
-    const locale = getLocale();
-    if (!locale || locale === 'zh-CN') {
-      setLocale('en-US');
-    } else {
-      setLocale('zh-CN');
-    }
-  };
-
   render() {
     const {
       currentUser,
@@ -156,18 +148,7 @@ export default class GlobalHeaderRight extends PureComponent {
         ) : (
           <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
         )}
-        <Button
-          size="small"
-          ghost={theme === 'dark'}
-          style={{
-            margin: '0 8px',
-          }}
-          onClick={() => {
-            this.changLang();
-          }}
-        >
-          <FormattedMessage id="navbar.lang" />
-        </Button>
+        <SelectLang className={styles.action} />
       </div>
     );
   }

src/components/Login/index.less

 @import '~antd/lib/style/themes/default.less';
 
 .login {
-  .tabs {
-    padding: 0 2px;
-    margin: 0 -2px;
-    :global {
-      .ant-tabs-tab {
-        font-size: 16px;
-        line-height: 24px;
-      }
-      .ant-input-affix-wrapper .ant-input:not(:first-child) {
-        padding-left: 34px;
-      }
-    }
-  }
-
   :global {
     .ant-tabs .ant-tabs-bar {
       border-bottom: 0;
@@ -27,16 +13,34 @@
     }
   }
 
+  .icon {
+    font-size: 24px;
+    color: rgba(0, 0, 0, 0.2);
+    margin-left: 16px;
+    vertical-align: middle;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: @primary-color;
+    }
+  }
+
+  .other {
+    text-align: left;
+    margin-top: 24px;
+    line-height: 22px;
+
+    .register {
+      float: right;
+    }
+  }
+
   .prefixIcon {
     font-size: @font-size-base;
     color: @disabled-color;
   }
 
-  .getCaptcha {
-    display: block;
-    width: 100%;
-  }
-
   .submit {
     width: 100%;
     margin-top: 24px;

src/components/SelectLang/index.js

+import React, { PureComponent } from 'react';
+import { FormattedMessage, setLocale, getLocale } from 'umi/locale';
+import { Menu, Icon, Dropdown } from 'antd';
+import classNames from 'classnames';
+import styles from './index.less';
+
+export default class SelectLang extends PureComponent {
+  changLang = ({ key }) => {
+    setLocale(key);
+  };
+
+  render() {
+    const { className } = this.props;
+    const langMenu = (
+      <Menu className={styles.menu} selectedKeys={[getLocale()]} onClick={this.changLang}>
+        <Menu.Item key="zh-CN">中文</Menu.Item>
+        <Menu.Item key="en-US">English</Menu.Item>
+        <Menu.Item key="pt-BR">Português</Menu.Item>
+      </Menu>
+    );
+    return (
+      <Dropdown overlay={langMenu}>
+        <span className={classNames(styles.dropdown, className)}>
+          <FormattedMessage id="navbar.lang" /> <Icon type="down" />
+        </span>
+      </Dropdown>
+    );
+  }
+}

src/components/SelectLang/index.less

+@import '~antd/lib/style/themes/default.less';
+
+.menu {
+  :global(.anticon) {
+    margin-right: 8px;
+  }
+  :global(.ant-dropdown-menu-item) {
+    width: 160px;
+  }
+}
+
+.dropdown {
+  cursor: pointer;
+}

src/layouts/UserLayout.js

@@ -3,6 +3,7 @@ import { formatMessage } from 'umi/locale';
 import Link from 'umi/link';
 import { Icon } from 'antd';
 import GlobalFooter from '@/components/GlobalFooter';
+import SelectLang from '@/components/SelectLang';
 import styles from './UserLayout.less';
 import logo from '../assets/logo.svg';
 
@@ -47,6 +48,9 @@ class UserLayout extends React.PureComponent {
     return (
       // @TODO <DocumentTitle title={this.getPageTitle()}>
       <div className={styles.container}>
+        <div className={styles.lang}>
+          <SelectLang />
+        </div>
         <div className={styles.content}>
           <div className={styles.top}>
             <div className={styles.header}>

src/layouts/UserLayout.less

@@ -8,6 +8,16 @@
   background: @layout-body-background;
 }
 
+.lang {
+  text-align: right;
+  width: 100%;
+  height: 40px;
+  line-height: 44px;
+  :global(.ant-dropdown-trigger) {
+    margin-right: 8px;
+  }
+}
+
 .content {
   padding: 32px 0;
   flex: 1;
@@ -22,7 +32,7 @@
   }
 
   .content {
-    padding: 112px 0 24px 0;
+    padding: 72px 0 24px 0;
   }
 }
 

src/locales/en-US.js

 export default {
-  'navbar.lang': '中文',
+  'navbar.lang': 'Languages',
   'layout.user.link.help': 'help',
   'layout.user.link.privacy': 'privacy',
   'layout.user.link.terms': 'terms',

src/locales/pt-BR.js

+export default {
+  'navbar.lang': 'Idiomas',
+  'layout.user.link.help': 'ajuda',
+  'layout.user.link.privacy': 'política de privacidade',
+  'layout.user.link.terms': 'termos de serviços',
+  'validation.email.required': 'Por favor insira seu email!',
+  'validation.email.wrong-format': 'O email está errado!',
+  'validation.password.required': 'Por favor insira sua senha!',
+  'validation.password.twice': 'As senhas não estão iguais!',
+  'validation.password.strength.msg':
+    'Por favor insira pelo menos 6 caracteres e não use senhas fáceis de adivinhar.',
+  'validation.password.strength.strong': 'Força: forte',
+  'validation.password.strength.medium': 'Força: média',
+  'validation.password.strength.short': 'Força: curta',
+  'validation.confirm-password.required': 'Por favor confirme sua senha!',
+  'validation.phone-number.required': 'Por favor insira seu telefone!',
+  'validation.phone-number.wrong-format': 'Formato de telefone errado!',
+  'validation.verification-code.required': 'Por favor insira seu código de verificação!',
+  'form.email.placeholder': 'Email',
+  'form.password.placeholder': 'Senha',
+  'form.confirm-password.placeholder': 'Confirme a senha',
+  'form.phone-number.placeholder': 'Telefone',
+  'form.verification-code.placeholder': 'Código de verificação',
+  'component.globalHeader.search': 'Busca',
+  'component.globalHeader.search.example1': 'Exemplo de busca 1',
+  'component.globalHeader.search.example2': 'Exemplo de busca 2',
+  'component.globalHeader.search.example3': 'Exemplo de busca 3',
+  'component.globalHeader.help': 'Ajuda',
+  'component.globalHeader.notification': 'Notificação',
+  'component.globalHeader.notification.empty': 'Você visualizou todas as notificações.',
+  'component.globalHeader.message': 'Mensagem',
+  'component.globalHeader.message.empty': 'Você visualizou todas as mensagens.',
+  'component.globalHeader.event': 'Evento',
+  'component.globalHeader.event.empty': 'Você visualizou todos os eventos.',
+  'component.noticeIcon.clear': 'Limpar',
+  'component.noticeIcon.cleared': 'Limpo',
+  'component.noticeIcon.empty': 'Sem notificações',
+  'menu.home': 'Início',
+  'menu.dashboard': 'Dashboard',
+  'menu.dashboard.analysis': 'Análise',
+  'menu.dashboard.monitor': 'Monitor',
+  'menu.dashboard.workplace': 'Ambiente de Trabalho',
+  'menu.form': 'Formulário',
+  'menu.form.basicform': 'Formulário Básico',
+  'menu.form.stepform': 'Formulário Assistido',
+  'menu.form.stepform.info': 'Formulário Assistido(gravar informações de transferência)',
+  'menu.form.stepform.confirm': 'Formulário Assistido(confirmar informações de transferência)',
+  'menu.form.stepform.result': 'Formulário Assistido(finalizado)',
+  'menu.form.advancedform': 'Formulário Avançado',
+  'menu.list': 'Lista',
+  'menu.list.searchtable': 'Tabela de Busca',
+  'menu.list.basiclist': 'Lista Básica',
+  'menu.list.cardlist': 'Lista de Card',
+  'menu.list.searchlist': 'Lista de Busca',
+  'menu.list.searchlist.articles': 'Lista de Busca(artigos)',
+  'menu.list.searchlist.projects': 'Lista de Busca(projetos)',
+  'menu.list.searchlist.applications': 'Lista de Busca(aplicações)',
+  'menu.profile': 'Perfil',
+  'menu.profile.basic': 'Perfil Básico',
+  'menu.profile.advanced': 'Perfil Avançado',
+  'menu.result': 'Resultado',
+  'menu.result.success': 'Sucesso',
+  'menu.result.fail': 'Falha',
+  'menu.exception': 'Exceção',
+  'menu.exception.not-permission': '403',
+  'menu.exception.not-find': '404',
+  'menu.exception.server-error': '500',
+  'menu.exception.trigger': 'Disparar',
+  'menu.account': 'Conta',
+  'menu.account.center': 'Central da Conta',
+  'menu.account.settings': 'Configurar Conta',
+  'menu.account.trigger': 'Disparar Erro',
+  'menu.account.logout': 'Sair',
+  'app.login.tab-login-credentials': 'Credenciais',
+  'app.login.tab-login-mobile': 'Telefone',
+  'app.login.remember-me': 'Lembre-me',
+  'app.login.forgot-password': 'Esqueceu sua senha?',
+  'app.login.sign-in-with': 'Login com',
+  'app.login.signup': 'Cadastre-se',
+  'app.login.login': 'Login',
+  'app.register.register': 'Cadastro',
+  'app.register.get-verification-code': 'Recuperar código',
+  'app.register.sing-in': 'Já tem uma conta?',
+  'app.register-result.msg': 'Conta：registrada em {email}',
+  'app.register-result.activation-email':
+    'Um email de ativação foi enviado para o seu email e é válido por 24 horas. Por favor entre no seu email e clique no link de ativação da conta.',
+  'app.register-result.back-home': 'Voltar ao Início',
+  'app.register-result.view-mailbox': 'Visualizar a caixa de email',
+  'app.home.introduce': 'introduzir',
+  'app.analysis.test': 'Gongzhuan No.{no} shop',
+  'app.analysis.introduce': 'Introduzir',
+  'app.analysis.total-sales': 'Vendas Totais',
+  'app.analysis.day-sales': 'Vendas do Dia',
+  'app.analysis.visits': 'Visitas',
+  'app.analysis.visits-trend': 'Tendência de Visitas',
+  'app.analysis.visits-ranking': 'Ranking de Visitas',
+  'app.analysis.day-visits': 'Visitas do Dia',
+  'app.analysis.week': 'Taxa Semanal',
+  'app.analysis.day': 'Taxa Diária',
+  'app.analysis.payments': 'Pagamentos',
+  'app.analysis.conversion-rate': 'Taxa de Conversão',
+  'app.analysis.operational-effect': 'Efeito Operacional',
+  'app.analysis.sales-trend': 'Tendência de Vendas das Lojas',
+  'app.analysis.sales-ranking': 'Ranking de Vendas',
+  'app.analysis.all-year': 'Todo ano',
+  'app.analysis.all-month': 'Todo mês',
+  'app.analysis.all-week': 'Toda semana',
+  'app.analysis.all-day': 'Todo dia',
+  'app.analysis.search-users': 'Pesquisa de Usuários',
+  'app.analysis.per-capita-search': 'Busca Per Capta',
+  'app.analysis.online-top-search': 'Mais Buscadas Online',
+  'app.analysis.the-proportion-of-sales': 'The Proportion Of Sales',
+  'app.analysis.channel.all': 'Tudo',
+  'app.analysis.channel.online': 'Online',
+  'app.analysis.channel.stores': 'Lojas',
+  'app.analysis.sales': 'Vendas',
+  'app.analysis.traffic': 'Tráfego',
+  'app.analysis.table.rank': 'Rank',
+  'app.analysis.table.search-keyword': 'Palavra chave',
+  'app.analysis.table.users': 'Usuários',
+  'app.analysis.table.weekly-range': 'Faixa Semanal',
+  'app.settings.menuMap.basic': 'Configurações Básicas',
+  'app.settings.menuMap.security': 'Configurações de Segurança',
+  'app.settings.menuMap.binding': 'Vinculação de Conta',
+  'app.settings.menuMap.notification': 'Mensagens de Notificação',
+  'app.settings.basic.avatar': 'Alterar avatar',
+  'app.settings.basic.email': 'Email',
+  'app.settings.basic.email-message': 'Por favor insira seu email!',
+  'app.settings.basic.nickname': 'Nome de usuário',
+  'app.settings.basic.nickname-message': 'Por favor insira seu nome de usuário!',
+  'app.settings.basic.profile': 'Perfil pessoal',
+  'app.settings.basic.profile-message': 'Por favor insira seu perfil pessoal!',
+  'app.settings.basic.profile-placeholder': 'Breve introdução sua',
+  'app.settings.basic.country': 'País/Região',
+  'app.settings.basic.country-message': 'Por favor insira país!',
+  'app.settings.basic.geographic': 'Província, estado ou cidade',
+  'app.settings.basic.geographic-message': 'Por favor insira suas informações geográficas!',
+  'app.settings.basic.address': 'Endereço',
+  'app.settings.basic.address-message': 'Por favor insira seu endereço!',
+  'app.settings.basic.phone': 'Número de telefone',
+  'app.settings.basic.phone-message': 'Por favor insira seu número de telefone!',
+  'app.settings.basic.update': 'Atualizar Informações',
+  'app.settings.security.strong': 'Forte',
+  'app.settings.security.medium': 'Média',
+  'app.settings.security.weak': 'Fraca',
+  'app.settings.security.password': 'Senha da Conta',
+  'app.settings.security.password-description': 'Força da senha',
+  'app.settings.security.phone': 'Telefone de Seguraça',
+  'app.settings.security.phone-description': 'Telefone vinculado',
+  'app.settings.security.question': 'Pergunta de Segurança',
+  'app.settings.security.question-description':
+    'A pergunta de segurança não está definida e a política de segurança pode proteger efetivamente a segurança da conta',
+  'app.settings.security.email': 'Email de Backup',
+  'app.settings.security.email-description': 'Email vinculado',
+  'app.settings.security.mfa': 'Dispositivo MFA',
+  'app.settings.security.mfa-description':
+    'O dispositivo MFA não vinculado, após a vinculação, pode ser confirmado duas vezes',
+  'app.settings.security.modify': 'Modificar',
+  'app.settings.security.set': 'Atribuir',
+  'app.settings.security.bind': 'Vincular',
+  'app.settings.binding.taobao': 'Vincular Taobao',
+  'app.settings.binding.taobao-description': 'Atualmente não vinculado à conta Taobao',
+  'app.settings.binding.alipay': 'Vincular Alipay',
+  'app.settings.binding.alipay-description': 'Atualmente não vinculado à conta Alipay',
+  'app.settings.binding.dingding': 'Vincular DingTalk',
+  'app.settings.binding.dingding-description': 'Atualmente não vinculado à conta DingTalk',
+  'app.settings.binding.bind': 'Vincular',
+  'app.settings.notification.password': 'Senha da Conta',
+  'app.settings.notification.password-description':
+    'Mensagens de outros usuários serão notificadas na forma de uma estação de letra',
+  'app.settings.notification.messages': 'Mensagens de Sistema',
+  'app.settings.notification.messages-description':
+    'Mensagens de sistema serão notificadas na forma de uma estação de letra',
+  'app.settings.notification.todo': 'Notificação de To-do',
+  'app.settings.notification.todo-description':
+    'A lista de to-do será notificada na forma de uma estação de letra',
+  'app.settings.open': 'Aberto',
+  'app.settings.close': 'Fechado',
+  'app.exception.back': 'Voltar para Início',
+  'app.exception.description.403': 'Desculpe, você não tem acesso a esta página',
+  'app.exception.description.404': 'Desculpe, a página que você visitou não existe',
+  'app.exception.description.500': 'Desculpe, o servidor está reportando um erro',
+  'app.result.error.title': 'A Submissão Falhou',
+  'app.result.error.description':
+    'Por favor, verifique e modifique as seguintes informações antes de reenviar.',
+  'app.result.error.hint-title': 'O conteúdo que você enviou tem o seguinte erro:',
+  'app.result.error.hint-text1': 'Sua conta foi congelada',
+  'app.result.error.hint-btn1': 'Descongele imediatamente',
+  'app.result.error.hint-text2': 'Sua conta ainda não está qualificada para se candidatar',
+  'app.result.error.hint-btn2': 'Atualizar imediatamente',
+  'app.result.error.btn-text': 'Retornar para modificar',
+  'app.result.success.title': 'A Submissão foi um Sucesso',
+  'app.result.success.description':
+    'A página de resultados de envio é usada para fornecer os resultados de uma série de tarefas operacionais. Se for uma operação simples, use o prompt de feedback de Mensagem global. Esta área de texto pode mostrar uma explicação suplementar simples. Se houver um requisito semelhante para exibir "documentos", a área cinza a seguir pode apresentar um conteúdo mais complicado.',
+  'app.result.success.operate-title': 'Nome do Projeto',
+  'app.result.success.operate-id': 'ID do Projeto：',
+  'app.result.success.principal': 'Principal：',
+  'app.result.success.operate-time': 'Tempo efetivo：',
+  'app.result.success.step1-title': 'Criar projeto',
+  'app.result.success.step1-operator': 'Qu Lili',
+  'app.result.success.step2-title': 'Revisão preliminar do departamento',
+  'app.result.success.step2-operator': 'Zhou Maomao',
+  'app.result.success.step2-extra': 'Urge',
+  'app.result.success.step3-title': 'Revisão financeira',
+  'app.result.success.step4-title': 'Terminar',
+  'app.result.success.btn-return': 'Voltar a lista',
+  'app.result.success.btn-project': 'Ver projeto',
+  'app.result.success.btn-print': 'imprimir',
+  'app.setting.pagestyle': 'Configuração de estilo da página',
+  'app.setting.pagestyle.dark': 'Dark style',
+  'app.setting.pagestyle.light': 'Light style',
+  'app.setting.content-width': 'Largura do conteúdo',
+  'app.setting.content-width.fixed': 'Fixo',
+  'app.setting.content-width.fluid': 'Fluido',
+  'app.setting.themecolor': 'Cor do Tema',
+  'app.setting.themecolor.dust': 'Dust Red',
+  'app.setting.themecolor.volcano': 'Volcano',
+  'app.setting.themecolor.sunset': 'Sunset Orange',
+  'app.setting.themecolor.cyan': 'Cyan',
+  'app.setting.themecolor.green': 'Polar Green',
+  'app.setting.themecolor.daybreak': 'Daybreak Blue (default)',
+  'app.setting.themecolor.geekblue': 'Geek Glue',
+  'app.setting.themecolor.purple': 'Golden Purple',
+  'app.setting.navigationmode': 'Modo de Navegação',
+  'app.setting.sidemenu': 'Leioute de Menu Lateral',
+  'app.setting.topmenu': 'Leioute de Menu Superior',
+  'app.setting.fixedheader': 'Cabeçalho fixo',
+  'app.setting.fixedsidebar': 'Barra lateral fixa',
+  'app.setting.fixedsidebar.hint': 'Funciona no leioute de menu lateral',
+  'app.setting.hideheader': 'Esconder o cabeçalho quando rolar',
+  'app.setting.hideheader.hint': 'Funciona quando o esconder cabeçalho está abilitado',
+  'app.setting.othersettings': 'Outras configurações',
+  'app.setting.weakmode': 'Weak Mode',
+  'app.setting.copy': 'Copiar Configuração',
+  'app.setting.copyinfo':
+    'copiado com sucesso，por favor trocar o defaultSettings em src/models/setting.js',
+  'app.setting.production.hint':
+    'O painel de configuração apenas é exibido no ambiente de desenvolvimento, por favor modifique manualmente o',
+};

src/locales/zh-CN.js

 // import zhMessages from '../../locales/zh.json';
 
 export default {
-  'navbar.lang': 'English',
+  'navbar.lang': '语言',
   'layout.user.link.help': '帮助',
   'layout.user.link.privacy': '隐私',
   'layout.user.link.terms': '条款',