Localized: Dashboard Monitor Page (#2463)

* 🌐localization of dashboard monitor page

* 🔥 remove umi/plugin localization from components

src/locales/en-US.js

@@ -155,6 +155,22 @@ export default {
   'app.forms.basic.title': 'Basic form',
   'app.forms.basic.description':
     'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
+  'app.monitor.trading-activity': 'Real-Time Trading Activity',
+  'app.monitor.total-transactions-today': 'Total transactions today',
+  'app.monitor.sales-target': 'Sales target completion rate',
+  'app.monitor.remaining-time': 'Remaining time of activity',
+  'app.monitor.total-transactions-per-second': 'Total transactions per second',
+  'app.monitor.activity-forecast': 'Activity forecast',
+  'app.monitor.efficiency': 'Efficiency',
+  'app.monitor.ratio': 'Ratio',
+  'app.monitor.proportion-per-category': 'Proportion Per Category',
+  'app.monitor.fast-food': 'Fast food',
+  'app.monitor.western-food': 'Western food',
+  'app.monitor.hot-pot': 'Hot pot',
+  'app.monitor.waiting-for-implementation': 'Waiting for implementation',
+  'app.monitor.popular-searches': 'Popular Searches',
+  'app.monitor.resource-surplus': 'Resource Surplus',
+  'app.monitor.fund-surplus': 'Fund Surplus',
   'app.settings.menuMap.basic': 'Basic Settings',
   'app.settings.menuMap.security': 'Security Settings',
   'app.settings.menuMap.binding': 'Account Binding',

src/locales/zh-CN.js

@@ -155,6 +155,22 @@ export default {
   'app.forms.basic.title': '基础表单',
   'app.forms.basic.description':
     '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+  'app.monitor.trading-activity': '活动实时交易情况',
+  'app.monitor.total-transactions': '今日交易总额',
+  'app.monitor.sales-target': '销售目标完成率',
+  'app.monitor.remaining-time': '活动剩余时间',
+  'app.monitor.total-transactions-per-second': '每秒交易总额',
+  'app.monitor.activity-forecast': '活动情况预测',
+  'app.monitor.efficiency': '券核效率',
+  'app.monitor.ratio': '跳出率',
+  'app.monitor.proportion-per-category': '各品类占比',
+  'app.monitor.fast-food': '中式快餐',
+  'app.monitor.western-food': '西餐',
+  'app.monitor.hot-pot': '火锅',
+  'app.monitor.waiting-for-implementation': 'Waiting for implementation',
+  'app.monitor.popular-searches': '热门搜索',
+  'app.monitor.resource-surplus': '资源剩余',
+  'app.monitor.fund-surplus': '补贴资金剩余',
   'app.settings.menuMap.basic': '基本设置',
   'app.settings.menuMap.security': '安全设置',
   'app.settings.menuMap.binding': '账号绑定',

src/pages/Dashboard/Monitor.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'dva';
+import { formatMessage, FormattedMessage } from 'umi/locale';
 import { Row, Col, Card, Tooltip } from 'antd';
 import { Pie, WaterWave, Gauge, TagCloud } from '@/components/Charts';
 import NumberInfo from '@/components/NumberInfo';
@@ -42,31 +43,72 @@ class Monitor extends PureComponent {
       <GridContent>
         <Row gutter={24}>
           <Col xl={18} lg={24} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
-            <Card title="活动实时交易情况" bordered={false}>
+            <Card
+              title={
+                <FormattedMessage
+                  id="app.monitor.trading-activity"
+                  defaultMessage="Real-Time Trading Activity"
+                />
+              }
+              bordered={false}
+            >
               <Row>
                 <Col md={6} sm={12} xs={24}>
                   <NumberInfo
-                    subTitle="今日交易总额"
+                    subTitle={
+                      <FormattedMessage
+                        id="app.monitor.total-transactions"
+                        defaultMessage="Total transactions today"
+                      />
+                    }
                     suffix="元"
                     total={numeral(124543233).format('0,0')}
                   />
                 </Col>
                 <Col md={6} sm={12} xs={24}>
-                  <NumberInfo subTitle="销售目标完成率" total="92%" />
+                  <NumberInfo
+                    subTitle={
+                      <FormattedMessage
+                        id="app.monitor.sales-target"
+                        defaultMessage="Sales target completion rate"
+                      />
+                    }
+                    total="92%"
+                  />
                 </Col>
                 <Col md={6} sm={12} xs={24}>
-                  <NumberInfo subTitle="活动剩余时间" total={<CountDown target={targetTime} />} />
+                  <NumberInfo
+                    subTitle={
+                      <FormattedMessage
+                        id="app.monitor.remaining-time"
+                        defaultMessage="Remaining time of activity"
+                      />
+                    }
+                    total={<CountDown target={targetTime} />}
+                  />
                 </Col>
                 <Col md={6} sm={12} xs={24}>
                   <NumberInfo
-                    subTitle="每秒交易总额"
+                    subTitle={
+                      <FormattedMessage
+                        id="app.monitor.total-transactions-per-second"
+                        defaultMessage="Total transactions per second"
+                      />
+                    }
                     suffix="元"
                     total={numeral(234).format('0,0')}
                   />
                 </Col>
               </Row>
               <div className={styles.mapChart}>
-                <Tooltip title="等待后期实现">
+                <Tooltip
+                  title={
+                    <FormattedMessage
+                      id="app.monitor.waiting-for-implementation"
+                      defaultMessage="Waiting for implementation"
+                    />
+                  }
+                >
                   <img
                     src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png"
                     alt="map"
@@ -76,28 +118,52 @@ class Monitor extends PureComponent {
             </Card>
           </Col>
           <Col xl={6} lg={24} md={24} sm={24} xs={24}>
-            <Card title="活动情况预测" style={{ marginBottom: 24 }} bordered={false}>
+            <Card
+              title={
+                <FormattedMessage
+                  id="app.monitor.total-activity-forecast"
+                  defaultMessage="Activity forecast"
+                />
+              }
+              style={{ marginBottom: 24 }}
+              bordered={false}
+            >
               <ActiveChart />
             </Card>
             <Card
-              title="券核效率"
+              title={<FormattedMessage id="app.monitor.efficiency" defaultMessage="Efficiency" />}
               style={{ marginBottom: 24 }}
               bodyStyle={{ textAlign: 'center' }}
               bordered={false}
             >
-              <Gauge title="跳出率" height={180} percent={87} />
+              <Gauge
+                title={formatMessage({ id: 'app.monitor.ratio', defaultMessage: 'Ratio' })}
+                height={180}
+                percent={87}
+              />
             </Card>
           </Col>
         </Row>
         <Row gutter={24}>
           <Col xl={12} lg={24} sm={24} xs={24}>
-            <Card title="各品类占比" bordered={false} className={styles.pieCard}>
+            <Card
+              title={
+                <FormattedMessage
+                  id="app.monitor.proportion-per-category"
+                  defaultMessage="Proportion Per Category"
+                />
+              }
+              bordered={false}
+              className={styles.pieCard}
+            >
               <Row style={{ padding: '16px 0' }}>
                 <Col span={8}>
                   <Pie
                     animate={false}
                     percent={28}
-                    subTitle="中式快餐"
+                    subTitle={
+                      <FormattedMessage id="app.monitor.fast-food" defaultMessage="Fast food" />
+                    }
                     total="28%"
                     height={128}
                     lineWidth={2}
@@ -108,7 +174,12 @@ class Monitor extends PureComponent {
                     animate={false}
                     color="#5DDECF"
                     percent={22}
-                    subTitle="西餐"
+                    subTitle={
+                      <FormattedMessage
+                        id="app.monitor.western-food"
+                        defaultMessage="Western food"
+                      />
+                    }
                     total="22%"
                     height={128}
                     lineWidth={2}
@@ -119,7 +190,9 @@ class Monitor extends PureComponent {
                     animate={false}
                     color="#2FC25B"
                     percent={32}
-                    subTitle="火锅"
+                    subTitle={
+                      <FormattedMessage id="app.monitor.hot-pot" defaultMessage="Hot pot" />
+                    }
                     total="32%"
                     height={128}
                     lineWidth={2}
@@ -130,7 +203,12 @@ class Monitor extends PureComponent {
           </Col>
           <Col xl={6} lg={12} sm={24} xs={24}>
             <Card
-              title="热门搜索"
+              title={
+                <FormattedMessage
+                  id="app.monitor.popular-searches"
+                  defaultMessage="Popular Searches"
+                />
+              }
               loading={loading}
               bordered={false}
               bodyStyle={{ overflow: 'hidden' }}
@@ -140,11 +218,22 @@ class Monitor extends PureComponent {
           </Col>
           <Col xl={6} lg={12} sm={24} xs={24}>
             <Card
-              title="资源剩余"
+              title={
+                <FormattedMessage
+                  id="app.monitor.resource-surplus"
+                  defaultMessage="Resource Surplus"
+                />
+              }
               bodyStyle={{ textAlign: 'center', fontSize: 0 }}
               bordered={false}
             >
-              <WaterWave height={161} title="补贴资金剩余" percent={34} />
+              <WaterWave
+                height={161}
+                title={
+                  <FormattedMessage id="app.monitor.fund-surplus" defaultMessage="Fund Surplus" />
+                }
+                percent={34}
+              />
             </Card>
           </Col>
         </Row>