lint

i18n.json

 {
-  "en": {
+  "en-US": {
     "title":"MoeCube",
     "Home":"Home",
     "username": "User Name",
@@ -82,7 +82,7 @@
 
     "没毛用":"防逗号报错,上线删"
   },
-  "zh": {
+  "zh-CN": {
     "title":"萌立方",
     "Home":"主页",
     "username": "用户名",

src/models/common.js

@@ -14,10 +14,13 @@ export default {
         ...state, ...action.payload,
       };
     },
-    changeLanguage(state, { payload: id }) {
-      localStorage.setItem('locale', id.id);
+    changeLanguage(state, action) {
+      localStorage.setItem('locale', action.payload.language);
       history.go(0);
-      return state;
+      return {
+        ...state,
+        ...action.payload,
+      };
     },
   },
   effects: {},
@@ -26,8 +29,8 @@ export default {
       let client;
       const language = localStorage.getItem('locale') || navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage;
 
-      const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
-      const messages = i18n[languageWithoutRegionCode];
+      // const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
+      const messages = i18n[language];
 
       const { userAgent } = navigator;
 
@@ -35,7 +38,7 @@ export default {
         client = 'electron';
       }
 
-      dispatch({ type: 'init', payload: { language: languageWithoutRegionCode, messages, client } });
+      dispatch({ type: 'init', payload: { language, messages, client } });
     },
   },
 };

src/router.js

-import { Route, Router, Redirect } from 'dva/router';
+import { Route, Router } from 'dva/router';
 import React from 'react';
 
 import Active from './routes/Activate.js';

src/routes/Index.js

@@ -7,6 +7,11 @@ import { FormattedMessage as Format } from 'react-intl';
 import Particles from 'react-particles-js';
 import logo from '../assets/MoeCube.png';
 
+const languageMap = {
+  'zh-CN': '中文',
+  'en-US': 'English',
+}
+
 const { Header, Footer } = Layout;
 const particleConfig = {
   particles: {
@@ -122,36 +127,30 @@ const particleConfig = {
   retina_detect: true,
 };
 
-function Index({ children, messages, dispatch, client }) {
-  const language = localStorage.getItem('locale') || navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage || navigator.browserLanguage || 'zh-CN';
+function Index({ children, messages, dispatch, client, token, language }) {
   const menu = (
     <Menu style={{ transform: 'translateX(-16px)' }}>
-      <Menu.Item key="0">
-        <a
-          onClick={() => {
-            dispatch({ type: 'common/changeLanguage', payload: { id: 'en-US' } });
-          }}
-        >
-          &nbsp;English</a>
-      </Menu.Item>
-      <Menu.Item key="1">
-        <a
-          onClick={() => {
-            dispatch({ type: 'common/changeLanguage', payload: { id: 'zh-EN' } });
-          }}
-        >
-          &nbsp;中文</a>
+      {
+        Object.keys(languageMap).map((lan, i) => {
+          return (
+            <Menu.Item key={i}>
+              <a onClick={() => { dispatch({ type: 'common/changeLanguage', payload: { language: lan } }) }}>
+                {languageMap[lan]}
+              </a>
             </Menu.Item>
+          )
+        })
+      }
     </Menu>
   );
   return (
     <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '100%' }}>
-      <DocumentTitle title={messages.title || 'Moe Cube'}/>
+      <DocumentTitle title={messages.title || 'Moe Cube'} />
 
       {client !== 'electron' &&
         <Header style={{ display: 'flex', alignItems: 'center' }}>
           <Link to="/" style={{ marginTop: '20px' }}>
-          <img alt="logo" src={logo} style={{ width: '140px', height: '44px' }}/>
+            <img alt="logo" src={logo} style={{ width: '140px', height: '44px' }} />
           </Link>
 
           <Menu
@@ -162,7 +161,7 @@ function Index({ children, messages, dispatch, client }) {
           >
             <Menu.Item key="1">
               <Link to="/">
-              <Format id="Home"/>
+                <Format id="Home" />
               </Link>
             </Menu.Item>
           </Menu>
@@ -173,15 +172,15 @@ function Index({ children, messages, dispatch, client }) {
             defaultSelectedKeys={['1']}
             style={{ lineHeight: '64px', position: 'absolute', right: '50px' }}
           >
-          {localStorage.getItem('token') ? (<Menu.Item key="1">
+            {token && (<Menu.Item key="1">
               <div
                 onClick={() => {
                   dispatch({ type: 'auth/signOut' });
                 }}
               >
-              <Format id="sign-out"/>
+                <Format id="sign-out" />
               </div>
-          </Menu.Item>) : ('')
+            </Menu.Item>)
             }
           </Menu>
 
@@ -198,13 +197,9 @@ function Index({ children, messages, dispatch, client }) {
 
       <Footer style={{ width: '100%', justifyContent: 'space-between', display: 'flex', zIndex: 100 }}>
         <div><Dropdown overlay={menu} trigger={['click']}>
-          {language === 'en-US' ?
           <a className="ant-dropdown-link changelanguage">
-              &nbsp;English <Icon type="down" className="flag"/>
-            </a> : <a className="ant-dropdown-link changelanguage">
-              &nbsp;中文 <Icon type="down" className="flag"/>
+            {languageMap[language]} <Icon type="down" className="flag" />
           </a>
-          }
         </Dropdown></div>
         <div>© MoeCube 2017 all right reserved.</div>
       </Footer>
@@ -214,9 +209,13 @@ function Index({ children, messages, dispatch, client }) {
 
 function mapStateToProps(state) {
   const {
-    common: { messages, client },
+    common: { messages, client, language },
+    user: { user, token },
   } = state;
   return {
+    token,
+    user,
+    language,
     messages,
     client,
   };