feat:

新增国际化功能,language文件夹为语言选项,header选择语言类型

nezha-fronted/package.json

@@ -10,8 +10,11 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "element-ui": "^2.13.0",
     "vue": "^2.5.2",
+    "vue-i18n": "^8.15.1",
+    "vue-infinite-scroll": "^2.0.2",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {

nezha-fronted/src/components/common/Header.vue

@@ -1,61 +0,0 @@
-<template>
-    <div class="header">
-        <div class="submenu">
-            <el-menu
-                    class="el-menu-demo"
-                    mode="horizontal"
-                    background-color="#ffffff"
-                    unique-opened
-            >
-                <el-menu-item index="1" @rou><div @click="jumpadd">dashboard</div></el-menu-item>
-                <el-submenu index="2">
-                    <template slot="title" router="../dashboard">project</template>
-                    <el-menu-item index="2-1">选项1</el-menu-item>
-                    <el-menu-item index="2-2">选项2</el-menu-item>
-                    <el-menu-item index="2-3">选项3</el-menu-item>
-                </el-submenu>
-                <el-submenu index="3">
-                    <template slot="title">asset</template>
-                    <el-menu-item index="2-1">选项1</el-menu-item>
-                    <el-menu-item index="2-2">选项2</el-menu-item>
-                    <el-menu-item index="2-3">选项3</el-menu-item>
-                </el-submenu>
-            </el-menu>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-  name: "Header",
-  methods:{
-    jumpadd(){
-      this.$router.push({
-        path: "/dashboard",
-      });
-    },
-    jump() {
-      this.$router.push({
-        path: "/project",
-      });
-    },
-  }
-}
-</script>
-
-<style scoped>
-.submenu{
-    padding-left: 50%;
-}
-.header {
-    position: relative;
-    box-sizing: border-box;
-    width: 100%;
-    height: 60px;
-    font-size: 22px;
-    background-color: #ffffff;
-    position: relative;
-    z-index: 999;
-    box-shadow: 0px 20px 13px -19px #5E5E5E;
-}
-</style>

nezha-fronted/src/components/common/header.vue

@@ -0,0 +1,164 @@
+<template>
+    <div class="header">
+        <div class="submenu">
+            <el-menu
+                    class="el-menu-demo"
+                    mode="horizontal"
+                    background-color="#ffffff"
+                    unique-opened
+            >
+                <el-menu-item index="1" @click="jumpTo('dashboard')"><div>
+                    {{$t('overall.dashboard')}}</div></el-menu-item>
+                <el-submenu index="2">
+                    <template slot="title"><div @click="jumpTo('project')">{{$t('overall.project')}}</div></template>
+                    <el-menu-item index="2-1">选项1</el-menu-item>
+                    <el-menu-item index="2-2">选项2</el-menu-item>
+                    <el-menu-item index="2-3">选项3</el-menu-item>
+                </el-submenu>
+                <el-submenu index="3">
+                    <template slot="title"><div @click="jumpTo('asset')">{{$t('overall.asset')}}</div></template>
+                    <el-menu-item index="2-1">选项1</el-menu-item>
+                    <el-menu-item index="2-2">选项2</el-menu-item>
+                    <el-menu-item index="2-3">选项3</el-menu-item>
+                </el-submenu>
+            </el-menu>
+        </div>
+        <div class="header-right">
+            <div class="header-user-con">
+                <div class="flagselect">
+                </div>
+                <el-popover
+                        placement="bottom"
+                        title=""
+                        width="200"
+                        trigger="hover"
+                >
+                    <div class="userout">
+                        <div :style="language!='en'?'color:#a6a6a6':''" @click="changeLocal('en')">
+                            <p>English</p>
+                        </div>
+                        <div :style="language=='cn'?'':'color:#a6a6a6'" @click="changeLocal('cn')" >
+                            <p>简体</p>
+                        </div>
+                        <div style="cursor:no-drop;color:#a6a6a6" >
+                            <p>русский</p>
+                        </div>
+                    </div>
+                    <div class="SignOut" @click="jumpTo('')">
+                        退出登录
+                    </div>
+                    <div slot="reference" class="user-avator">
+                        <span>用户名</span>
+                        <i class="el-submenu__icon-arrow el-icon-arrow-down header-name-jiantou"></i>
+                    </div>
+                </el-popover>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "Header",
+  data(){
+    return{
+      language:localStorage.getItem("language"),
+    }
+  },
+  methods:{
+    jumpTo(data){
+      this.$router.push({
+        path: "/"+data,
+        query: {
+          t: +new Date() // 保证每次点击路由的query项都是不一样的，确保会重新刷新view
+        }
+      });
+    },
+    changeLocal(lang) {
+      localStorage.setItem("language", lang);
+      window.location.reload();
+    },
+  }
+}
+</script>
+
+<style>
+.el-submenu__title .el-submenu__icon-arrow{
+    display: none;
+}
+</style>
+
+<style scoped>
+.submenu{
+    padding-left: 50%;
+    width: 300px;
+    float: left;
+}
+.header {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 60px;
+    font-size: 22px;
+    background-color: #ffffff;
+    z-index: 999;
+    box-shadow: 0px 20px 13px -19px #5E5E5E;
+}
+.header-right {
+    float: right;
+    padding-right: 5px;
+}
+.header-user-con {
+    display: flex;
+    height: 50px;
+    align-items: center;
+}
+.user-avator {
+    padding: 0 5px 3px 0 ;
+    margin-left: 20px;
+    line-height: 30px;
+    cursor: pointer;
+}
+.user-avator:hover{
+    border-radius: 2px;
+    background: rgba(255,255,255,.3);
+}
+.user-avator span {
+    font-size: 16px;
+    margin: 0 5px;
+}
+.user-avator i.iconfont {
+    color: #fff;
+    font-size: 25px;
+    transform: translateY(2.5px);
+    display: inline-block;
+    line-height: 30px;
+}
+.userout{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.userout>div{
+    width: 33.3%;
+    color: rgba(51, 137, 185, 1);
+    cursor: pointer;
+    text-align: center;
+}
+.SignOut{
+    width: 100%;
+    height: 30px;
+    color: #fff;
+    text-align: center;
+    line-height: 30px;
+    background: rgba(51, 137, 185, 1);
+    margin-top: 20px;
+    cursor: pointer;
+}
+.SignOut:hover{
+    opacity: .8;
+}
+.header-name-jiantou{
+    position: static !important;
+}
+</style>

nezha-fronted/src/components/common/i18n.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import locale from 'element-ui/lib/locale';
+import VueI18n from 'vue-i18n'
+import messages from './language'
+Vue.use(VueI18n)
+//从localStorage获取语言选择。
+const i18n = new VueI18n({
+  locale: localStorage.language || 'en', //初始未选择默认 en 英文
+  messages,
+})
+locale.i18n((key, value) => i18n.t(key, value)) //兼容element
+
+export default i18n

nezha-fronted/src/components/common/language/cn.js

@@ -0,0 +1,11 @@
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包
+const cn = {
+  overall:{
+    dashboard:'仪表盘',
+    project:'工程',
+    asset:'资产'
+  },
+  ...zhLocale
+}
+
+export default cn;

nezha-fronted/src/components/common/language/en.js

@@ -0,0 +1,11 @@
+import enLocale from 'element-ui/lib/locale/lang/en' //引入element语言包
+const en = {
+  overall:{
+    dashboard:'dashboard',
+    project:'project',
+    asset:'asset'
+  },
+  ...enLocale
+}
+
+export default en;

nezha-fronted/src/components/common/language/index.js

@@ -0,0 +1,6 @@
+import en from './en';
+import cn from './cn';
+export default {
+  en: en,
+  cn: cn
+}

nezha-fronted/src/main.js

@@ -1,24 +1,33 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-
 import "./assets/css/main.css";
 import 'element-ui/lib/theme-chalk/index.css';
 import ElementUI from 'element-ui';
-import vueiInfinite from 'vue-infinite-scroll'
 
+import i18n from './components/common/i18n'
 
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import axios from 'axios';
+import { post, get, patch, put, del } from './components/common/js/http.js'
+
+import Pagination from "./components/common/pagination"; //引入全局分页组件
+Vue.component("Pagination", Pagination);
+
+Vue.prototype.$axios = axios
+Vue.prototype.$post = post;
+Vue.prototype.$get = get;
+Vue.prototype.$patch = patch;
+Vue.prototype.$put = put;
+Vue.prototype.$delete = del;
 
 Vue.config.productionTip = false
 Vue.use(ElementUI)
-Vue.use(vueiInfinite)
 
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
+  i18n,
   components: { App },
   template: '<App/>'
 })