base framework

package.json

@@ -41,6 +41,7 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-document-title": "^2.0.3",
     "react-fittext": "^1.0.0",
+    "react-intl": "^2.4.0",
     "rollbar": "^2.3.4",
     "rollup": "^0.62.0",
     "rollup-plugin-json": "^3.0.0",

src/locale/en-US.js

@@ -0,0 +1,14 @@
+import appLocaleData from 'react-intl/locale-data/en';
+import antdEn from 'antd/lib/locale-provider/en_US';
+// import enMessages from '../../locales/en.json';
+
+export default {
+  locale: 'en-US',
+  data: appLocaleData,
+  antd: antdEn,
+  messages: {
+    'app.home.introduce': 'introduce',
+    'app.analysis.test': 'Gongzhuan road No.{no} shop',
+  // ...enMessages,
+  },
+};

src/locale/zh-CN.js

@@ -0,0 +1,14 @@
+import appLocaleData from 'react-intl/locale-data/zh';
+import antdZh from 'antd/lib/locale-provider/zh_CN';
+// import zhMessages from '../../locales/zh.json';
+
+export default {
+  locale: 'zh-CN',
+  data: appLocaleData,
+  antd: antdZh,
+  messages: {
+    'app.home.introduce': '介绍',
+    'app.analysis.test': '工专路 {no} 号店',
+  // ...zhMessages,
+  },
+};

src/pages/Dashboard/Analysis.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'dva';
+import { injectIntl } from 'react-intl';
 import {
   Row,
   Col,
@@ -47,7 +48,23 @@ for (let i = 0; i < 7; i += 1) {
   chart,
   loading: loading.effects['chart/fetch'],
 }))
-export default class Analysis extends Component {
+class Analysis extends Component {
+  constructor(props) {
+    super(props);
+    const { intl } = props;
+    this.rankingListData = [];
+    for (let i = 0; i < 7; i += 1) {
+      this.rankingListData.push({
+        title: intl.formatMessage({ id: 'app.analysis.test' }, { no: i }),
+        total: 323234,
+      });
+    }
+    this.state = {
+      salesType: 'all',
+      currentTabKey: '',
+      rangePickerValue: getTimeDistance('year'),
+    };
+  }
   state = {
     salesType: 'all',
     currentTabKey: '',
@@ -354,7 +371,7 @@ export default class Analysis extends Component {
                     <div className={styles.salesRank}>
                       <h4 className={styles.rankingTitle}>门店销售额排名</h4>
                       <ul className={styles.rankingList}>
-                        {rankingListData.map((item, i) => (
+                        {this.rankingListData.map((item, i) => (
                           <li key={item.title}>
                             <span className={i < 3 ? styles.active : ''}>{i + 1}</span>
                             <span>{item.title}</span>
@@ -377,7 +394,7 @@ export default class Analysis extends Component {
                     <div className={styles.salesRank}>
                       <h4 className={styles.rankingTitle}>门店访问量排名</h4>
                       <ul className={styles.rankingList}>
-                        {rankingListData.map((item, i) => (
+                        {this.rankingListData.map((item, i) => (
                           <li key={item.title}>
                             <span className={i < 3 ? styles.active : ''}>{i + 1}</span>
                             <span>{item.title}</span>
@@ -503,3 +520,5 @@ export default class Analysis extends Component {
     );
   }
 }
+
+export default injectIntl(Analysis);

src/router.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { routerRedux, Route, Switch } from 'dva/router';
 import { LocaleProvider, Spin } from 'antd';
-import zhCN from 'antd/lib/locale-provider/zh_CN';
 import dynamic from 'dva/dynamic';
+import { addLocaleData, IntlProvider } from 'react-intl';
 import { getRouterData } from './common/router';
 import Authorized from './utils/Authorized';
 import { getQueryPath } from './utils/utils';
 import styles from './index.less';
+import enLocale from './locale/en-US';
+import cnLocale from './locale/zh-CN';
 
 const { ConnectedRouter } = routerRedux;
 const { AuthorizedRoute } = Authorized;
@@ -14,26 +16,35 @@ dynamic.setDefaultLoadingComponent(() => {
   return <Spin size="large" className={styles.globalSpin} />;
 });
 
+function getLang() {
+  return (window.localStorage && localStorage.getItem('locale')) ||
+    (navigator.language || navigator.browserLanguage).toLowerCase() === 'en-us'
+    ? 'en-US'
+    : 'zh-CN';
+}
+
 function RouterConfig({ history, app }) {
   const routerData = getRouterData(app);
   const UserLayout = routerData['/user'].component;
   const BasicLayout = routerData['/'].component;
+  const appLocale = getLang() === 'zh-CN' ? cnLocale : enLocale;
+  addLocaleData(appLocale.data);
   return (
-    <LocaleProvider locale={zhCN}>
+    <IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
-      <ConnectedRouter history={history}>
+      <LocaleProvider locale={appLocale.antd}>
-        <Switch>
+        <ConnectedRouter history={history}>
-          <Route path="/user" component={UserLayout} />
+          <Switch>
-          <AuthorizedRoute
+            <Route path="/user" component={UserLayout} />
-            path="/"
+            <AuthorizedRoute
-            render={props => <BasicLayout {...props} />}
+              path="/"
-            authority={['admin', 'user']}
+              render={props => <BasicLayout {...props} />}
-            redirectPath={getQueryPath('/user/login', {
+              authority={['admin', 'user']}
-              redirect: window.location.href,
+              redirectPath="/user/login"
-            })}
+            />
-          />
+          </Switch>
-        </Switch>
+        </ConnectedRouter>
-      </ConnectedRouter>
+      </LocaleProvider>
-    </LocaleProvider>
+    </IntlProvider>
   );
 }