Add i18n

Former-commit-id: c7fe41b748c5af0afe4049b5db0f1f572a4613b4

.env

@@ -8,3 +8,7 @@ VUE_APP_API=/api/
 
 # 仓库地址
 VUE_APP_REPO=https://github.com/d2-projects/d2-admin-start-kit
+
+# 国际化配置
+VUE_APP_I18N_LOCALE=zh-chs
+VUE_APP_I18N_FALLBACK_LOCALE=en

package-lock.json

@@ -876,30 +876,30 @@
       "integrity": "sha512-mV6T0IYqb0xL1UALPFplXYQmR0twnXG0M6jUswpquqT2sD12BOiCiLy3EvMp/Fy7s3DZElC4/aPjEjo2jeZpvw==",
       "dev": true
     },
+    "@hapi/bourne": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@hapi/bourne/-/bourne-1.3.2.tgz",
+      "integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==",
+      "dev": true
+    },
     "@hapi/hoek": {
-      "version": "6.2.4",
+      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-6.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.2.1.tgz",
-      "integrity": "sha512-HOJ20Kc93DkDVvjwHyHawPwPkX44sIrbXazAUDiUXaY2R9JwQGo2PhFfnQtdrsIe4igjG2fPgMra7NYw7qhy0A==",
+      "integrity": "sha512-JPiBy+oSmsq3St7XlipfN5pNA6bDJ1kpa73PrK/zR29CVClDVqy04AanM/M/qx5bSF+I61DdCfAvRrujau+zRg==",
       "dev": true
     },
     "@hapi/joi": {
-      "version": "15.1.0",
+      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-15.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-15.1.1.tgz",
-      "integrity": "sha512-n6kaRQO8S+kepUTbXL9O/UOL788Odqs38/VOfoCrATDtTvyfiO3fgjlSRaNkHabpTLgM7qru9ifqXlXbXk8SeQ==",
+      "integrity": "sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==",
       "dev": true,
       "requires": {
         "@hapi/address": "2.x.x",
-        "@hapi/hoek": "6.x.x",
+        "@hapi/bourne": "1.x.x",
-        "@hapi/marker": "1.x.x",
+        "@hapi/hoek": "8.x.x",
         "@hapi/topo": "3.x.x"
       }
     },
-    "@hapi/marker": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@hapi/marker/-/marker-1.0.0.tgz",
-      "integrity": "sha512-JOfdekTXnJexfE8PyhZFyHvHjt81rBFSAbTIRAhF2vv/2Y1JzoKsGqxH/GpZJoF7aEfYok8JVcAHmSz1gkBieA==",
-      "dev": true
-    },
     "@hapi/topo": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-3.1.3.tgz",
@@ -907,14 +907,6 @@
       "dev": true,
       "requires": {
         "@hapi/hoek": "8.x.x"
-      },
-      "dependencies": {
-        "@hapi/hoek": {
-          "version": "8.2.1",
-          "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.2.1.tgz",
-          "integrity": "sha512-JPiBy+oSmsq3St7XlipfN5pNA6bDJ1kpa73PrK/zR29CVClDVqy04AanM/M/qx5bSF+I61DdCfAvRrujau+zRg==",
-          "dev": true
-        }
       }
     },
     "@intervolga/optimize-cssnano-plugin": {
@@ -929,10 +921,14 @@
       }
     },
     "@kazupon/vue-i18n-loader": {
-      "version": "0.3.0",
+      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@kazupon/vue-i18n-loader/-/vue-i18n-loader-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@kazupon/vue-i18n-loader/-/vue-i18n-loader-0.4.1.tgz",
-      "integrity": "sha512-M2280E9PMxetu6mOdtyh1d6Dif7LwH4gvxD2dgsu7HOyzR26AUNok8DxZ1Y5YAexJvPfbBXC75Llui2myO05Hg==",
+      "integrity": "sha512-hVznmhnyoUKozGY7pwq/UtPL76UDzb+aiN2YksZZIzCY/MkEqih0MSyEmTGw7+HVWzJRPAlDyoRNR4tWKmkCRw==",
-      "dev": true
+      "dev": true,
+      "requires": {
+        "js-yaml": "^3.13.1",
+        "json5": "^2.1.0"
+      }
     },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
@@ -1027,9 +1023,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "12.7.1",
+      "version": "12.7.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.2.tgz",
-      "integrity": "sha512-aK9jxMypeSrhiYofWWBf/T7O+KwaiAHzM4sveCdWPn71lzUSMimRnKzhXDKfKwV1kWoBo2P1aGgaIYGLf9/ljw==",
+      "integrity": "sha512-dyYO+f6ihZEtNPDcWNR1fkoTDf3zAK3lAABDze3mz6POyIercH0lEUawUFXlG8xaQZmm1yEBON/4TsYv/laDYg==",
       "dev": true
     },
     "@types/normalize-package-data": {
@@ -2765,6 +2761,12 @@
           "requires": {
             "ms": "2.0.0"
           }
+        },
+        "qs": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+          "dev": true
         }
       }
     },
@@ -4414,13 +4416,88 @@
       "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
     },
     "default-gateway": {
-      "version": "5.0.2",
+      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-5.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-5.0.3.tgz",
-      "integrity": "sha512-wXuT0q8T5vxQNecrTgz/KbU2lPUMRc98I9Y5dnH3yhFB3BGYqtADK4lhivLlG0OfjhmfKx1PGILG2jR4zjI+WA==",
+      "integrity": "sha512-zW+ld9xtN0+q48wIwhitUzhfERJN7BPgvijPhuCKG6bfWqnoqtSNSnrXfvAME2ZJLpgYpz6UorpBddGfLzrJBw==",
       "dev": true,
       "requires": {
-        "execa": "^1.0.0",
+        "execa": "^2.0.3"
-        "ip-regex": "^2.1.0"
+      },
+      "dependencies": {
+        "execa": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-2.0.4.tgz",
+          "integrity": "sha512-VcQfhuGD51vQUQtKIq2fjGDLDbL6N1DTQVpYzxZ7LPIXw3HqTuIz6uxRmpV1qf8i31LHf2kjiaGI+GdHwRgbnQ==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^6.0.5",
+            "get-stream": "^5.0.0",
+            "is-stream": "^2.0.0",
+            "merge-stream": "^2.0.0",
+            "npm-run-path": "^3.0.0",
+            "onetime": "^5.1.0",
+            "p-finally": "^2.0.0",
+            "signal-exit": "^3.0.2",
+            "strip-final-newline": "^2.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
+          "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==",
+          "dev": true,
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "is-stream": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+          "dev": true
+        },
+        "merge-stream": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+          "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+          "dev": true
+        },
+        "mimic-fn": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+          "dev": true
+        },
+        "npm-run-path": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz",
+          "integrity": "sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.0.0"
+          }
+        },
+        "onetime": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
+          "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "^2.1.0"
+          }
+        },
+        "p-finally": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
+          "integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
+          "dev": true
+        },
+        "path-key": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.0.tgz",
+          "integrity": "sha512-8cChqz0RP6SHJkMt48FW0A7+qUOn+OsnOsVtzI59tZ8m+5bCSk7hzwET0pulwOM2YMn9J1efb07KB9l9f30SGg==",
+          "dev": true
+        }
       }
     },
     "default-require-extensions": {
@@ -4828,9 +4905,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.225",
+      "version": "1.3.232",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.225.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.232.tgz",
-      "integrity": "sha512-7W/L3jw7HYE+tUPbcVOGBmnSrlUmyZ/Uyg24QS7Vx0a9KodtNrN0r0Q/LyGHrcYMtw2rv7E49F/vTXwlV/fuaA==",
+      "integrity": "sha512-11F8S49B+8AJy5V540BofxvJ1tWP4wZZ0sOre6KF32evS1YSHXiUB7+TQ/mjrfzg1lirnlA8XDdU8CDcJrBCbA==",
       "dev": true
     },
     "element-ui": {
@@ -5323,9 +5400,9 @@
           }
         },
         "table": {
-          "version": "5.4.5",
+          "version": "5.4.6",
-          "resolved": "https://registry.npmjs.org/table/-/table-5.4.5.tgz",
+          "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
-          "integrity": "sha512-oGa2Hl7CQjfoaogtrOHEJroOcYILTx7BZWLGsJIlzoWmB2zmguhNfPJZsWPKYek/MgCxfco54gEi31d1uN2hFA==",
+          "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==",
           "dev": true,
           "requires": {
             "ajv": "^6.10.2",
@@ -5582,9 +5659,9 @@
       },
       "dependencies": {
         "ignore": {
-          "version": "5.1.2",
+          "version": "5.1.4",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.2.tgz",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz",
-          "integrity": "sha512-vdqWBp7MyzdmHkkRWV5nY+PfGRbYbahfuvsBCh277tq+w9zyNi7h5CYJCK0kmzti9kU+O/cB7sE8HvKv6aXAKQ==",
+          "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
           "dev": true
         }
       }
@@ -5970,6 +6047,12 @@
           "requires": {
             "ms": "2.0.0"
           }
+        },
+        "qs": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+          "dev": true
         }
       }
     },
@@ -7162,9 +7245,9 @@
       }
     },
     "graceful-fs": {
-      "version": "4.2.1",
+      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz",
-      "integrity": "sha512-b9usnbDGnD928gJB3LrCmxoibr3VE4U2SMo5PBuBnokWyDADTqDPXg4YpwKF1trpH+UbGp7QLicO3+aWEy0+mw=="
+      "integrity": "sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q=="
     },
     "growly": {
       "version": "1.3.0",
@@ -12084,9 +12167,9 @@
       "dev": true
     },
     "qs": {
-      "version": "6.7.0",
+      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.8.0.tgz",
-      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+      "integrity": "sha512-tPSkj8y92PfZVbinY1n84i1Qdx75lZjMQYx9WZhnkofyxzw2r7Ho39G3/aEvSUdebxpnnM4LZJCtvE/Aq3+s9w=="
     },
     "query-string": {
       "version": "5.1.1",
@@ -12622,9 +12705,9 @@
       "dev": true
     },
     "rimraf": {
-      "version": "2.7.0",
+      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-4Liqw7ccABzsWV5BzeZeGRSq7KWIgQYzOcmRDEwSX4WAawlQpcAFXZ1Kid72XYrjSnK5yxOS6Gez/iGusYE/Pw==",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
       "dev": true,
       "requires": {
         "glob": "^7.1.3"
@@ -12729,9 +12812,9 @@
       }
     },
     "sass": {
-      "version": "1.22.9",
+      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.22.9.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.22.10.tgz",
-      "integrity": "sha512-FzU1X2V8DlnqabrL4u7OBwD2vcOzNMongEJEx3xMEhWY/v26FFR3aG0hyeu2T965sfR0E9ufJwmG+Qjz78vFPQ==",
+      "integrity": "sha512-DUpS1tVMGCH6gr/N9cXCoemrjoNdOLhAHfQ37fJw2A5ZM4gSI9ej/8Xi95Xwus03RqZ2zdSnKZGULL7oS+jfMA==",
       "dev": true,
       "requires": {
         "chokidar": ">=2.0.0 <4.0.0"
@@ -13646,6 +13729,12 @@
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
       "dev": true
     },
+    "strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true
+    },
     "strip-indent": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz",

package.json

@@ -29,12 +29,12 @@
     "screenfull": "^4.2.0",
     "ua-parser-js": "^0.7.19",
     "vue": "^2.6.10",
-    "vue-i18n": "^8.10.0",
+    "vue-i18n": "^8.14.0",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "@kazupon/vue-i18n-loader": "^0.3.0",
+    "@kazupon/vue-i18n-loader": "^0.4.1",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-eslint": "^3.6.0",
     "@vue/cli-plugin-unit-jest": "^3.6.0",

src/App.vue

@@ -5,8 +5,21 @@
 </template>
 
 <script>
+import util from '@/libs/util'
 export default {
-  name: 'app'
+  name: 'app',
+  watch: {
+    '$i18n.locale': 'i18nHandle'
+  },
+  created () {
+    this.i18nHandle(this.$i18n.locale)
+  },
+  methods: {
+    i18nHandle (val, oldVal) {
+      util.cookies.set('lang', val)
+      document.querySelector('html').setAttribute('lang', val)
+    }
+  }
 }
 </script>
 

src/i18n.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import util from '@/libs/util'
+
+Vue.use(VueI18n)
+
+function loadLocaleMessages () {
+  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+  const messages = {}
+  locales.keys().forEach(key => {
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      messages[locale] = locales(key)
+    }
+  })
+  return messages
+}
+
+const messages = loadLocaleMessages()
+
+Vue.prototype.$languages = Object.keys(messages).map(langlage => ({
+  label: messages[langlage]._name,
+  value: langlage
+}))
+
+export default new VueI18n({
+  locale: util.cookies.get('lang') || process.env.VUE_APP_I18N_LOCALE,
+  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE,
+  messages
+})

src/i18n/index.js

@@ -1,17 +0,0 @@
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-
-import cn from './lang/cn'
-import ja from './lang/ja'
-import en from './lang/en'
-
-Vue.use(VueI18n)
-
-export default new VueI18n({
-  locale: 'cn',
-  messages: {
-    cn,
-    ja,
-    en
-  }
-})

src/i18n/lang/cn/index.js

@@ -1 +0,0 @@
-export default {}

src/i18n/lang/en/index.js

@@ -1 +0,0 @@
-export default {}

src/i18n/lang/ja/index.js

@@ -1 +0,0 @@
-export default {}

src/layout/header-aside/components/header-locales/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-dropdown
+    placement="bottom"
+    size="small"
+    @command="onChangeLocale">
+    <el-button class="d2-mr btn-text can-hover" type="text">
+      <d2-icon name="language" style="font-size: 16px;"/>
+    </el-button>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item
+        v-for="(language, index) in $languages"
+        :key="index"
+        :command="language.value">
+        <d2-icon :name="$i18n.locale === language.value ? 'dot-circle-o' : 'circle-o'" class="d2-mr-5"/>
+        {{ language.label }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  methods: {
+    onChangeLocale (command) {
+      this.$i18n.locale = command
+      let message = `当前语言：${this.$t('_name')} [ ${this.$i18n.locale} ]`
+      if (!['TRAVIS', 'NETLIFY'].includes(process.env.VUE_APP_BUILD_MODE)) {
+        message = [
+          `当前语言：${this.$t('_name')} [ ${this.$i18n.locale} ]`,
+          `仅提供切换功能，没有配置具体的语言数据 `,
+          `文档参考：<a class="el-link el-link--primary is-underline" target="_blank" href="https://doc.d2admin.fairyever.com/zh/sys-locales/">《国际化 | D2Admin》</a>`
+        ].join('<br/>')
+      }
+      this.$notify({
+        title: '语言变更',
+        dangerouslyUseHTMLString: true,
+        message
+      })
+    }
+  }
+}
+</script>

src/layout/header-aside/layout.vue

@@ -31,6 +31,7 @@
           <d2-header-fullscreen/>
           <d2-header-theme/>
           <d2-header-size/>
+          <d2-header-locales/>
           <d2-header-user/>
         </div>
       </div>
@@ -85,6 +86,7 @@ import d2MenuSide from './components/menu-side'
 import d2MenuHeader from './components/menu-header'
 import d2Tabs from './components/tabs'
 import d2HeaderFullscreen from './components/header-fullscreen'
+import d2HeaderLocales from './components/header-locales'
 import d2HeaderSearch from './components/header-search'
 import d2HeaderSize from './components/header-size'
 import d2HeaderTheme from './components/header-theme'
@@ -102,6 +104,7 @@ export default {
     d2MenuHeader,
     d2Tabs,
     d2HeaderFullscreen,
+    d2HeaderLocales,
     d2HeaderSearch,
     d2HeaderSize,
     d2HeaderTheme,

src/locales/en.json

@@ -0,0 +1,3 @@
+{
+	"_name": "English"
+}

src/locales/ja.json

@@ -0,0 +1,3 @@
+{
+	"_name": "日本語"
+}

src/locales/zh-chs.json

@@ -0,0 +1,3 @@
+{
+	"_name": "简体中文"
+}

src/locales/zh-cht.json

@@ -0,0 +1,3 @@
+{
+	"_name": "繁體中文"
+}

src/main.js

@@ -1,12 +1,11 @@
 // Vue
 import Vue from 'vue'
+import i18n from './i18n'
 import App from './App'
 // 核心插件
 import d2Admin from '@/plugin/d2admin'
 // store
 import store from '@/store/index'
-// 多国语
-import i18n from './i18n'
 
 // 菜单和路由设置
 import router from './router'

src/views/system/login/page.vue

@@ -13,10 +13,10 @@
     <div class="page-login--layer">
       <div
         class="page-login--content"
-        flex="dir:top main:justify cross:center box:justify">
+        flex="dir:top main:justify cross:stretch box:justify">
         <div class="page-login--content-header">
           <p class="page-login--content-header-motto">
-            时间是一切财富中最宝贵的财富。 <span>—— 德奥弗拉斯多</span>
+            时间是一切财富中最宝贵的财富
           </p>
         </div>
         <div
@@ -24,29 +24,48 @@
           flex="dir:top main:center cross:center">
           <!-- logo -->
           <img class="page-login--logo" src="./image/logo@2x.png">
-          <!-- 表单 -->
+          <!-- form -->
           <div class="page-login--form">
             <el-card shadow="never">
-              <el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin" size="default">
+              <el-form
+                ref="loginForm"
+                label-position="top"
+                :rules="rules"
+                :model="formLogin"
+                size="default">
                 <el-form-item prop="username">
-                  <el-input type="text" v-model="formLogin.username" placeholder="用户名">
+                  <el-input
+                    type="text"
+                    v-model="formLogin.username"
+                    placeholder="用户名">
                     <i slot="prepend" class="fa fa-user-circle-o"></i>
                   </el-input>
                 </el-form-item>
                 <el-form-item prop="password">
-                  <el-input type="password" v-model="formLogin.password" placeholder="密码">
+                  <el-input
+                    type="password"
+                    v-model="formLogin.password"
+                    placeholder="密码">
                     <i slot="prepend" class="fa fa-keyboard-o"></i>
                   </el-input>
                 </el-form-item>
                 <el-form-item prop="code">
-                  <el-input type="text" v-model="formLogin.code" placeholder="- - - -">
+                  <el-input
-                    <template slot="prepend">验证码</template>
+                    type="text"
+                    v-model="formLogin.code"
+                    placeholder="验证码">
                     <template slot="append">
                       <img class="login-code" src="./image/login-code.png">
                     </template>
                   </el-input>
                 </el-form-item>
-                <el-button size="default" @click="submit" type="primary" class="button-login">登录</el-button>
+                <el-button
+                  size="default"
+                  @click="submit"
+                  type="primary"
+                  class="button-login">
+                  登录
+                </el-button>
               </el-form>
             </el-card>
             <p
@@ -55,21 +74,35 @@
               <span><d2-icon name="question-circle"/> 忘记密码</span>
               <span>注册用户</span>
             </p>
-            <!-- 快速登录按钮 -->
+            <!-- quick login -->
             <el-button class="page-login--quick" size="default" type="info" @click="dialogVisible = true">
               快速选择用户（测试功能）
             </el-button>
           </div>
         </div>
         <div class="page-login--content-footer">
+          <p class="page-login--content-footer-locales">
+            <a
+              v-for="language in $languages"
+              :key="language.value"
+              :command="language.value"
+              @click="$i18n.locale = language.value">
+              {{ language.label }}
+            </a>
+          </p>
+          <p class="page-login--content-footer-copyright">
+            Copyright
+            <d2-icon name="copyright"/>
+            2018 D2 Projects 开源组织出品
+            <a href="https://github.com/FairyEver">
+              @FairyEver
+            </a>
+          </p>
           <p class="page-login--content-footer-options">
             <a href="#">帮助</a>
             <a href="#">隐私</a>
             <a href="#">条款</a>
           </p>
-          <p class="page-login--content-footer-copyright">
-            Copyright <d2-icon name="copyright"/> 2018 D2 Projects 开源组织出品 <a href="https://github.com/FairyEver">@FairyEver</a>
-          </p>
         </div>
       </div>
     </div>
@@ -101,17 +134,17 @@ export default {
       dialogVisible: false,
       users: [
         {
-          name: '管理员',
+          name: 'Admin',
           username: 'admin',
           password: 'admin'
         },
         {
-          name: '编辑',
+          name: 'Editor',
           username: 'editor',
           password: 'editor'
         },
         {
-          name: '用户1',
+          name: 'User1',
           username: 'user1',
           password: 'user1'
         }
@@ -122,16 +155,28 @@ export default {
         password: 'admin',
         code: 'v9am'
       },
-      // 校验
+      // 表单校验
       rules: {
         username: [
-          { required: true, message: '请输入用户名', trigger: 'blur' }
+          {
+            required: true,
+            message: '请输入用户名',
+            trigger: 'blur'
+          }
         ],
         password: [
-          { required: true, message: '请输入密码', trigger: 'blur' }
+          {
+            required: true,
+            message: '请输入密码',
+            trigger: 'blur'
+          }
         ],
         code: [
-          { required: true, message: '请输入验证码', trigger: 'blur' }
+          {
+            required: true,
+            message: '请输入验证码',
+            trigger: 'blur'
+          }
         ]
       }
     }
@@ -180,7 +225,7 @@ export default {
             })
         } else {
           // 登录表单校验失败
-          this.$message.error('表单校验失败')
+          this.$message.error('表单校验失败，请检查')
         }
       })
     }
@@ -225,9 +270,6 @@ export default {
       color: $color-text-normal;
       text-align: center;
       font-size: 12px;
-      span {
-        color: $color-text-sub;
-      }
     }
   }
   // main
@@ -298,26 +340,45 @@ export default {
   // footer
   .page-login--content-footer {
     padding: 1em 0;
-    .page-login--content-footer-options {
+    .page-login--content-footer-locales {
       padding: 0px;
       margin: 0px;
-      margin-bottom: 10px;
+      margin-bottom: 15px;
-      font-size: 14px;
+      font-size: 12px;
+      line-height: 12px;
       text-align: center;
+      color: $color-text-normal;
       a {
         color: $color-text-normal;
-        margin: 0 1em;
+        margin: 0 .5em;
+        &:hover {
+          color: $color-text-main;
+        }
       }
     }
     .page-login--content-footer-copyright {
       padding: 0px;
       margin: 0px;
+      margin-bottom: 10px;
       font-size: 12px;
+      line-height: 12px;
+      text-align: center;
       color: $color-text-normal;
       a {
         color: $color-text-normal;
       }
     }
+    .page-login--content-footer-options {
+      padding: 0px;
+      margin: 0px;
+      font-size: 12px;
+      line-height: 12px;
+      text-align: center;
+      a {
+        color: $color-text-normal;
+        margin: 0 1em;
+      }
+    }
   }
   // 背景
   .circles {

vue.config.js

@@ -50,13 +50,6 @@ module.exports = {
           propName: process.env.VUE_APP_SOURCE_VIEWER_PROP_NAME
         })
       )
-    // i18n
-    config.module
-      .rule('i18n')
-      .resourceQuery(/blockType=i18n/)
-      .use('i18n')
-      .loader('@kazupon/vue-i18n-loader')
-      .end()
     // svg
     const svgRule = config.module.rule('svg')
     svgRule.uses.clear()
@@ -87,5 +80,14 @@ module.exports = {
         .add('@/mock')
         .end()
     }
+  },
+  // i18n
+  pluginOptions: {
+    i18n: {
+      locale: 'zh-chs',
+      fallbackLocale: 'en',
+      localeDir: 'locales',
+      enableInSFC: true
+    }
   }
 }