Add i18n

Former-commit-id: c7fe41b748c5af0afe4049b5db0f1f572a4613b4
2019-08-17 17:56:09 +08:00
parent c2d6645ee7
commit e78edd0004
19 changed files with 10928 additions and 115 deletions
@@ -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>

@@ -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
+})
@@ -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
-  }
-})
@@ -1 +0,0 @@
-export default {}
@@ -1 +0,0 @@
-export default {}
@@ -1 +0,0 @@
-export default {}
@@ -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>
@@ -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,
@@ -0,0 +1,3 @@
+{
+	"_name": "English"
+}
@@ -0,0 +1,3 @@
+{
+	"_name": "日本語"
+}
@@ -0,0 +1,3 @@
+{
+	"_name": "简体中文"
+}
@@ -0,0 +1,3 @@
+{
+	"_name": "繁體中文"
+}
@@ -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'
@@ -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="- - - -">
-                    <template slot="prepend">验证码</template>
+                  <el-input
+                    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;
-      font-size: 14px;
+      margin-bottom: 15px;
+      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 {