Localized GlobalHeader, NoticeIcon and Header.

src/components/GlobalHeader/RightContent.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { FormattedMessage, setLocale, getLocale } from 'umi/locale';
+import { FormattedMessage, formatMessage, setLocale, getLocale } from 'umi/locale';
 import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip, Button } from 'antd';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
@@ -87,7 +87,7 @@ export default class GlobalHeaderRight extends PureComponent {
       <div className={className}>
         <HeaderSearch
           className={`${styles.action} ${styles.search}`}
-          placeholder="站内搜索"
+          placeholder={formatMessage({ id: 'component.globalHeader.search' })}
           dataSource={['搜索提示一', '搜索提示二', '搜索提示三']}
           onSearch={value => {
             console.log('input', value); // eslint-disable-line
@@ -96,13 +96,13 @@ export default class GlobalHeaderRight extends PureComponent {
             console.log('enter', value); // eslint-disable-line
           }}
         />
-        <Tooltip title="使用文档">
+        <Tooltip title={formatMessage({ id: 'component.globalHeader.help' })}>
           <a
             target="_blank"
             href="https://pro.ant.design/docs/getting-started"
             rel="noopener noreferrer"
             className={styles.action}
-            title="使用文档"
+            title="{ formatMessage({id: 'component.globalHeader.help'}) }"
           >
             <Icon type="question-circle-o" />
           </a>
@@ -120,20 +120,20 @@ export default class GlobalHeaderRight extends PureComponent {
         >
           <NoticeIcon.Tab
             list={noticeData['通知']}
-            title="通知"
+            title={formatMessage({ id: 'component.globalHeader.notification' })}
-            emptyText="你已查看所有通知"
+            emptyText={formatMessage({ id: 'component.globalHeader.notification.empty' })}
             emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
           />
           <NoticeIcon.Tab
             list={noticeData['消息']}
-            title="消息"
+            title={formatMessage({ id: 'component.globalHeader.message' })}
-            emptyText="您已读完所有消息"
+            emptyText={formatMessage({ id: 'component.globalHeader.message.empty' })}
             emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
           />
           <NoticeIcon.Tab
             list={noticeData['待办']}
-            title="待办"
+            title={formatMessage({ id: 'component.globalHeader.event' })}
-            emptyText="你已完成所有待办"
+            emptyText={formatMessage({ id: 'component.globalHeader.event.empty' })}
             emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
           />
         </NoticeIcon>

src/components/NoticeIcon/NoticeList.js

@@ -63,8 +63,7 @@ export default function NoticeList({
       </List>
       {showClear ? (
         <div className={styles.clear} onClick={onClear}>
-          {locale.clear}
+          {locale.clear} {title}
-          {title}
         </div>
       ) : null}
     </div>

src/components/NoticeIcon/index.js

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import { formatMessage } from 'umi/locale';
 import { Popover, Icon, Tabs, Badge, Spin } from 'antd';
 import classNames from 'classnames';
 import List from './NoticeList';
@@ -16,8 +17,8 @@ export default class NoticeIcon extends PureComponent {
     onClear: () => {},
     loading: false,
     locale: {
-      emptyText: '暂无数据',
+      emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
-      clear: '清空',
+      clear: formatMessage({ id: 'component.noticeIcon.clear' }),
     },
     emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
   };

src/layouts/Header.js

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import { formatMessage } from 'umi/locale';
 import { Layout, message } from 'antd';
 import Animate from 'rc-animate';
 import { connect } from 'dva';
@@ -42,7 +43,7 @@ class HeaderView extends PureComponent {
   };
 
   handleNoticeClear = type => {
-    message.success(`清空了${type}`);
+    message.success(`${formatMessage({ id: 'component.noticeIcon.cleared' })} ${type}`);
     const { dispatch } = this.props;
     dispatch({
       type: 'global/clearNotices',

src/locales/en-US.js

@@ -1,5 +1,16 @@
 export default {
   'navbar.lang': '中文',
+  'component.globalHeader.search': 'Search',
+  'component.globalHeader.help': 'Help',
+  'component.globalHeader.notification': 'Notification',
+  'component.globalHeader.notification.empty': 'You have viewed all notifications.',
+  'component.globalHeader.message': 'Message',
+  'component.globalHeader.message.empty': 'You have viewed all messsages.',
+  'component.globalHeader.event': 'Event',
+  'component.globalHeader.event.empty': 'You have viewed all events.',
+  'component.noticeIcon.clear': 'Clear',
+  'component.noticeIcon.cleared': 'Cleared',
+  'component.noticeIcon.empty': 'No notifications',
   'menu.home': 'Home',
   'menu.dashboard': 'Dashboard',
   'menu.dashboard.analysis': 'Analysis',

src/locales/zh-CN.js

@@ -2,6 +2,17 @@
 
 export default {
   'navbar.lang': 'English',
+  'component.globalHeader.search': '站内搜索',
+  'component.globalHeader.help': '使用文档',
+  'component.globalHeader.notification': '通知',
+  'component.globalHeader.notification.empty': '你已查看所有通知',
+  'component.globalHeader.message': '消息"',
+  'component.globalHeader.message.empty': '您已读完所有消息"',
+  'component.globalHeader.event': '待办',
+  'component.globalHeader.event.empty': '你已完成所有待办',
+  'component.noticeIcon.clear': '清空',
+  'component.noticeIcon.cleared': '清空了',
+  'component.noticeIcon.empty': '暂无数据',
   'menu.home': '首页',
   'menu.dashboard': 'Dashboard',
   'menu.dashboard.analysis': '分析页',