国际化

package-lock.json

@@ -4046,6 +4046,16 @@
         "sha.js": "2.4.11"
       }
     },
+    "cross-env": {
+      "version": "5.2.0",
+      "resolved": "http://registry.npm.taobao.org/cross-env/download/cross-env-5.2.0.tgz",
+      "integrity": "sha1-bs1MAV1Xc+YUA57lKQdmabnRJvI=",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "6.0.5",
+        "is-windows": "1.0.2"
+      }
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -4557,8 +4567,7 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "http://registry.npm.taobao.org/decode-uri-component/download/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
-      "dev": true
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
     "dedent": {
       "version": "0.7.0",
@@ -12338,6 +12347,16 @@
       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
       "dev": true
     },
+    "query-string": {
+      "version": "6.4.2",
+      "resolved": "http://registry.npm.taobao.org/query-string/download/query-string-6.4.2.tgz",
+      "integrity": "sha1-i+Hb0QUwauv4YCIUT1daKdUWtxM=",
+      "requires": {
+        "decode-uri-component": "0.2.0",
+        "split-on-first": "1.0.0",
+        "strict-uri-encode": "2.0.0"
+      }
+    },
     "querystring": {
       "version": "0.2.0",
       "resolved": "http://registry.npm.taobao.org/querystring/download/querystring-0.2.0.tgz",
@@ -13564,6 +13583,11 @@
         }
       }
     },
+    "split-on-first": {
+      "version": "1.0.0",
+      "resolved": "http://registry.npm.taobao.org/split-on-first/download/split-on-first-1.0.0.tgz",
+      "integrity": "sha1-ZIr0zpoo+8qt1DJ0RV8pi1UCX8Y="
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -13701,6 +13725,11 @@
       "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=",
       "dev": true
     },
+    "strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "http://registry.npm.taobao.org/strict-uri-encode/download/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
+    },
     "string-argv": {
       "version": "0.0.2",
       "resolved": "http://registry.npm.taobao.org/string-argv/download/string-argv-0.0.2.tgz",
@@ -14817,6 +14846,11 @@
       "integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "8.11.1",
+      "resolved": "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-8.11.1.tgz",
+      "integrity": "sha1-Ghd5LW0ter9BREwlbyMlB6kcvTA="
+    },
     "vue-jest": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.4.tgz",

package.json

@@ -15,9 +15,11 @@
         "echarts": "^4.2.1",
         "moment": "^2.24.0",
         "nprogress": "^0.2.0",
+        "query-string": "^6.4.2",
         "resize-detector": "^0.2.0",
         "vue": "^2.6.6",
         "vue-color": "^2.7.0",
+        "vue-i18n": "^8.11.1",
         "vue-router": "^3.0.1",
         "vuex": "^3.0.1"
     },

src/App.vue

@@ -1,7 +1,27 @@
 <template>
   <div id="app">
-    <router-view />
+    <a-locale-provider :locale="locale">
+      <router-view />
+    </a-locale-provider>
   </div>
 </template>
+<script>
+import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
+import enUS from "ant-design-vue/lib/locale-provider/en_US";
+import moment from "moment";
+export default {
+  data() {
+    return {
+      locale: zhCN
+    };
+  },
+  watch: {
+    "$route.query.locale": function(val) {
+      this.locale = val === "enUS" ? enUS : zhCN;
+      moment.locale(val === "enUS" ? "en" : "zh-cn");
+    }
+  }
+};
+</script>
 
 <style lang="less"></style>

src/layouts/Header.vue

@@ -1,13 +1,37 @@
 <template>
-  <div class="header">Header</div>
+  <div class="header">
+    <a-dropdown>
+      <a-icon type="global" />
+      <a-menu
+        slot="overlay"
+        @click="localeChange"
+        :selectedKeys="[$route.query.locale || 'zhCN']"
+      >
+        <a-menu-item key="zhCN">
+          中文
+        </a-menu-item>
+        <a-menu-item key="enUS">
+          English
+        </a-menu-item>
+      </a-menu>
+    </a-dropdown>
+  </div>
 </template>
 
 <script>
-export default {};
+export default {
+  methods: {
+    localeChange({ key }) {
+      this.$router.push({ query: { ...this.$route.query, locale: key } });
+      this.$i18n.locale = key;
+    }
+  }
+};
 </script>
 
 <style scoped>
 .header {
   float: right;
+  margin-right: 30px;
 }
 </style>

src/locale/enUS.js

@@ -0,0 +1,3 @@
+export default {
+  "app.dashboard.analysis.timeLabel": "Time"
+};

src/locale/zhCN.js

@@ -0,0 +1,3 @@
+export default {
+  "app.dashboard.analysis.timeLabel": "时间"
+};

src/main.js

@@ -1,7 +1,11 @@
 import Vue from "vue";
+import VueI18n from "vue-i18n";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store/index.js";
+import enUS from "./locale/enUS";
+import zhCN from "./locale/zhCN";
+import queryString from "query-string";
 import {
   Button,
   Layout,
@@ -11,7 +15,10 @@ import {
   Menu,
   Form,
   Input,
-  Select
+  Select,
+  LocaleProvider,
+  Dropdown,
+  DatePicker
 } from "ant-design-vue";
 import Authorized from "./components/Authorized";
 import Auth from "./directives/auth";
@@ -27,8 +34,20 @@ Vue.use(Menu);
 Vue.use(Form);
 Vue.use(Input);
 Vue.use(Select);
+Vue.use(LocaleProvider);
+Vue.use(Dropdown);
+Vue.use(DatePicker);
 Vue.component("Authorized", Authorized);
 Vue.use(Auth);
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+  locale: queryString.parse(location.search).locale || "zhCN",
+  messages: {
+    zhCN: { message: zhCN },
+    enUS: { message: enUS }
+  }
+});
 
 const IconFont = Icon.createFromIconfontCN({
   scriptUrl: "//at.alicdn.com/t/font_1154049_w87h4oeytph.js" // 在 iconfont.cn 上生成
@@ -37,6 +56,7 @@ const IconFont = Icon.createFromIconfontCN({
 Vue.component("IconFont", IconFont);
 
 new Vue({
+  i18n,
   router,
   store,
   render: h => h(App)

src/views/Dashboard/Analysis.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
+    {{ $t("message")["app.dashboard.analysis.timeLabel"] }} :
+    <a-date-picker></a-date-picker>
     <Chart :option="chartOption" style="height: 400px" />
   </div>
 </template>