perf: 样式调整

1.登录页
2.一些小细节包括table、btn

nezha-fronted/src/assets/css/main.css

@@ -73,7 +73,7 @@ html {
 .nz-btn {
   border-radius: 4px;
   cursor: pointer;
-  line-height: 21px;
+  line-height: 18px;
   font-size: 14px;
   font-weight: 700;
   padding: 4px 14px;
@@ -205,6 +205,12 @@ html {
   border-left: 1px solid white;
   border-bottom: 1px solid #d4d4d4;;
 }
+.content-right .el-table .el-table__header th:first-of-type {
+  border-left: none;
+}
+.content-right .el-table .el-table__header th:nth-last-child(2) {
+  border-right: none;
+}
 .content-right .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
   border-right: none;
 }
@@ -267,7 +273,7 @@ html {
 }
 
 /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
-.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint ,.right-box-panel {
+.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint {
   width: 520px;
   height: calc(100% - 100px);
 }

nezha-fronted/src/assets/img/lang-box-active.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="27px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1090 -737 )">
+    <path d="M 30 19.5943053208275  C 29.9711583333333 20.9438560308555  28.8528894086021 22.0377313464236  27.4734765591398 22.0377313464236  L 26.2247422311828 22.0377313464236  L 26.2247422311828 24.4810323018934  C 26.2247422311828 25.830374526648  25.1063028225806 26.9242915497896  23.7271030913979 27  L 2.49738341397849 27  C 1.1181410483871 26.9242081609397  0 25.830374526648  0 24.4809489130435  L 0 7.37788393232819  C 0 6.0285  1.11809841397849 4.93466636570827  2.49738341397849 4.93466639200561  L 3.74624561827957 4.93466639200561  L 3.74624561827957 2.4912403401122  C 3.74624561827957 1.14168963008415  4.86438666666667 0.0480227734922861  6.24397 0  L 27.4735191935484 0  C 28.8529320430108 0.0480227734922861  29.9712435752688 1.14168963008415  30 2.4912403401122  L 30 19.5943053208275  Z M 23.7271456989247 6.15621261395512  L 2.49738341397849 6.15621261395512  C 1.8077622311828 6.15621261395512  1.24869169354839 6.70312944424965  1.24869172043011 7.37788393232819  L 1.24869172043011 24.4809489130435  C 1.24869172043011 25.1555783309958  1.80776225806452 25.7026619389902  2.49738341397849 25.7026619389902  L 23.7271456989247 25.7026619389902  C 24.4167668817204 25.7026619389902  24.9758374193548 25.1555783309958  25 24.4809489130435  L 25 7.37788393232819  C 24.9758374193548 6.70312941795231  24.4167668817204 6.15621261395512  23.7271456989247 6.15621261395512  Z M 28.7223387634409 2.4912403401122  C 28.7223387634409 1.81648582573633  28.1632682258065 1.26969409186536  27.4734765591398 1.26969411816269  L 6.24392739247312 1.26969411816269  C 5.55409309139785 1.26969411816269  4.99502258064516 1.81648585203366  4.99502258064516 2.4912403401122  L 4.99502258064516 5  L 23.7271456989247 5  C 25.1064306989247 4.93466639200561  26.2249553494624 6.02850002629734  26 7.37788393232819  L 26 20.8159766392006  L 27.4736470698925 20.8159766392006  C 28.1632682526882 20.8159766392006  28.7223387903226 20.2688930312062  28.7223387634409 19.5943053208275  L 28.7223387634409 2.49107356241234  Z " fill-rule="nonzero" fill="#31759c" stroke="none" transform="matrix(1 0 0 1 1090 737 )" />
+  </g>
+</svg>

nezha-fronted/src/assets/img/lang-box.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="29px" height="27px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1134 -737 )">
+    <path d="M 29 19.5943053208275  C 28.9721197222222 20.9438560308555  27.8911264283154 22.0377313464236  26.5576940071685 22.0377313464236  L 25.35058415681 22.0377313464236  L 25.35058415681 24.4810323018934  C 25.35058415681 25.830374526648  24.269426061828 26.9242915497896  22.9361996550179 27  L 2.41413730017921 27  C 1.08086968010753 26.9242081609397  0 25.830374526648  0 24.4809489130435  L 0 7.37788393232819  C 0 6.0285  1.08082846684588 4.93466636570827  2.41413730017921 4.93466639200561  L 3.62137076433692 4.93466639200561  L 3.62137076433692 2.4912403401122  C 3.62137076433692 1.14168963008415  4.70224044444445 0.0480227734922861  6.03583766666667 0  L 26.5577352204301 0  C 27.8911676415771 0.0480227734922861  28.9722021227599 1.14168963008415  29 2.4912403401122  L 29 19.5943053208275  Z M 22.9362408422939 6.15621261395512  L 2.41413730017921 6.15621261395512  C 1.74750349014337 6.15621261395512  1.20706863709677 6.70312944424965  1.20706866308244 7.37788393232819  L 1.20706866308244 24.4809489130435  C 1.20706866308244 25.1555783309958  1.74750351612903 25.7026619389902  2.41413730017921 25.7026619389902  L 22.9362408422939 25.7026619389902  C 23.6028746523297 25.7026619389902  24.1433095053763 25.1555783309958  24 24.4809489130435  L 24 7.37788393232819  C 24.1433095053763 6.70312941795231  23.6028746523297 6.15621261395512  22.9362408422939 6.15621261395512  Z M 27.7649274713262 2.4912403401122  C 27.7649274713262 1.81648582573633  27.2244926182796 1.26969409186536  26.5576940071685 1.26969411816269  L 6.03579647939068 1.26969411816269  C 5.36895665501792 1.26969411816269  4.82852182795699 1.81648585203366  4.82852182795699 2.4912403401122  L 4.82852182795699 5  L 22.9362408422939 5  C 24.2695496756272 4.93466639200561  25.350790171147 6.02850002629734  25 7.37788393232819  L 25 20.8159766392006  L 26.5578588342294 20.8159766392006  C 27.2244926442652 20.8159766392006  27.7649274973118 20.2688930312062  27.7649274713262 19.5943053208275  L 27.7649274713262 2.49107356241234  Z " fill-rule="nonzero" fill="#000000" stroke="none" fill-opacity="0.603921568627451" transform="matrix(1 0 0 1 1134 737 )" />
+  </g>
+</svg>

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

@@ -23,17 +23,11 @@
             </el-menu-item>
           </template>
         </el-submenu>
-                <el-submenu index="1"  popper-class="nz-submenu">
+        <el-menu-item index="1" @click="jumpTo('dashboard')">
-                    <template slot="title">
+          <div>
-                      <div @click="jumpTo('dashboard')">{{$t('overall.dashboard')}}</div>
+            {{$t('overall.dashboard')}}
-                    </template>
+          </div>
-                    <el-menu-item index="1-0">
-                      <div @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
         </el-menu-item>
-                    <el-menu-item index="1-1">
-                      <div @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
-                    </el-menu-item>
-                </el-submenu>
         <el-submenu index="2" popper-class="nz-submenu">
           <template slot="title">
             <div @click="jumpToProject(projectData[0])">{{$t('overall.project')}}</div>
@@ -92,7 +86,7 @@
       >
         <el-submenu index="6" popper-class="nz-submenu">
           <template slot="title">
-                <div>[username]</div>
+            <div>{{username}}</div>
           </template>
           <el-menu-item index="6-0">
             <div :style="language=='en'?'color:#f90':''" @click="changeLocal('en')">English</div>
@@ -100,8 +94,11 @@
           <el-menu-item index="6-1">
             <div :style="language=='cn'?'color:#f90':''" @click="changeLocal('cn')">中文</div>
           </el-menu-item>
-              <el-menu-item index="6-2">
+          <el-menu-item class="nz-menu-line" @click.stop index="6-2">
-                <div @click="jumpTo('')">{{$t('overall.signOut')}}</div>
+            <div style="height: 1px; width: 100%; background-color: #cccccc;"></div>
+          </el-menu-item>
+          <el-menu-item index="6-3">
+            <div @click="logout">{{$t('overall.signOut')}}</div>
           </el-menu-item>
         </el-submenu>
       </el-menu>
@@ -148,7 +145,8 @@ export default {
     name: "Header",
     data() {
       return {
-      language: localStorage.getItem("language"),
+        username: sessionStorage.getItem("nz-username"),
+        language: localStorage.getItem("nz-language"),
         assetData: [],
         projectData: [], //顶部菜单project列表中的数据
         editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
@@ -243,8 +241,10 @@ export default {
         this.jumpTo('project');
       },
       changeLocal(lang) {
-      localStorage.setItem("language", lang);
+        if (lang != localStorage.getItem("nz-language")) {
+          localStorage.setItem("nz-language", lang);
           window.location.reload();
+        }
       },
       getAssetData() {
         this.$get('idc', this.pageObj).then(response => {
@@ -278,8 +278,18 @@ export default {
       },
       projectReload() {
         this.getProjectList();
+      },
+      logout() {
+        this.$get('logout');
+        this.jumpTo('login');
       }
     },
+    created() {
+      if (!localStorage.getItem("nz-language")) {
+        localStorage.setItem("nz-language", "en");
+      }
+      this.language = localStorage.getItem("nz-language");
+    },
     mounted() {
       this.getAssetData();
       this.getProjectList();
@@ -343,6 +353,12 @@ export default {
   .el-menu-item>div, .el-menu-item>div>div {
     font-size: 15px;
   }
+  .nz-menu-line {
+    cursor: default;
+    display: flex;
+    align-items: center;
+    height: 18px !important;
+  }
 </style>
 
 <style scoped>

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

@@ -5,7 +5,7 @@ import messages from './language'
 Vue.use(VueI18n)
 //从localStorage获取语言选择。
 const i18n = new VueI18n({
-  locale: localStorage.language || 'en', //初始未选择默认 en 英文
+  locale: localStorage.getItem('nz-language') || 'en', //初始未选择默认 en 英文
   messages,
 })
 locale.i18n((key, value) => i18n.t(key, value)) //兼容element

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

@@ -1,20 +1,37 @@
 <template>
-    <div>
+  <div class="login">
+    <div class="model">
       <div class='login-right'>
         <div class="login-content">
-                <div class="login-title">
+          <div class="login-title">NEZHA</div>
-                    <h1>NeZha</h1>
+          <div class="login-label" style="padding-top: 35px;">User Name</div>
-                    <div></div>
-                </div>
-                <div class="login-input" style="margin-top: 20px;">
-                    <input v-model="loginData.username" class="inputL" placeholder="username" ></input>
-                </div>
-
           <div class="login-input">
-                    <input v-model="loginData.password" type="password" class="inputL" @keyup.enter="login" placeholder="password" ></input>
+            <input v-model="loginData.username" class="inputL"></input>
+          </div>
+          <div class="login-label">Password</div>
+          <div class="login-input">
+            <input v-model="loginData.password" type="password" class="inputL" @keyup.enter="login"></input>
           </div>
           <div class="login-button">
-                    <button @click="login">登录</button>
+            <button @click="login">Login</button>
+          </div>
+          <div class="login-foot">
+            <div class="login-foot-remember"></div>
+            <div class="login-foot-langs">
+              <div @click="changeLang('en')" class="login-foot-lang" :class="{'login-foot-lang-active': lang == 'en'}">
+                <img v-if="lang == 'en'" src="../../assets/img/lang-box-active.svg"/>
+                <img v-if="lang != 'en'" src="../../assets/img/lang-box.svg"/>
+                <span class="lang-name lang-name-en">EN</span>
+                <div v-if="lang == 'en'" class="lang-active-model"></div>
+              </div>
+              <div @click="changeLang('cn')" class="login-foot-lang" :class="{'login-foot-lang-active': lang == 'cn'}">
+                <img v-if="lang == 'cn'" src="../../assets/img/lang-box-active.svg"/>
+                <img v-if="lang != 'cn'" src="../../assets/img/lang-box.svg"/>
+                <span class="lang-name">中</span>
+                <div v-if="lang == 'cn'" class="lang-active-model"></div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -22,6 +39,7 @@
 </template>
 
 <script>
+
 export default {
   name: "login",
   data() {
@@ -29,14 +47,17 @@ export default {
       loginData: {
         username: '',
         password: '',
+        remember: false
       },
+      lang: localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en'
     }
   },
   methods: {
     login() {
       this.$post('sys/login', (this.loginData)).then(res => {
         if (res.code == 200) {
-          sessionStorage.setItem("token", res.data.token);
+          sessionStorage.setItem("nz-token", res.data.token);
+          sessionStorage.setItem("nz-username", this.loginData.username);
           this.$router.push({
             path: "/dashboard",
             query: {
@@ -46,17 +67,35 @@ export default {
         }
       })
     },
+    changeLang(lang) {
+      if (this.lang == lang) {
+        return;
+      } else {
+        localStorage.setItem("nz-language", lang);
+        this.lang = lang;
+        this.$i18n.locale = lang;
+      }
+    }
   }
 }
 </script>
 
 <style scoped>
+.login {
+  background-image: url("../../assets/img/login-background.png");
+  background-size: 100% 100%;
+}
+.model {
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.737);
+}
 button {
-    width:180px;
+  width: 80%;
   padding-top: 10px;
   padding-bottom: 12px;
-    background: #17558e !important;
+  background: #31759c;
-    border-radius: 5px;
+  border-radius: 270px;
   font-size: 18px;
   box-shadow: none;
   outline: none;
@@ -65,25 +104,81 @@ button {
   display: block;
   margin: 0 auto;
   margin-top: 50px;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #5c9fc4;
 }
 
 .login-right {
-    width: 400px;
+  position: relative;
-    height: 330px;
+  width: 500px;
-    position: absolute;
+  height: 475px;
-    top: 50%;
+  margin: auto;
-    transform: translateY(-60%);
-    right: 42%;
-    background: #356b9d;
   overflow: hidden;
-    padding: 2px;
+  padding: 250px 0 0 0;
+}
+.login-title {
+  position: absolute;
+  font-size: 90px;
+  font-weight: 400;
+  color: white;
+  top: 60px;
+  width: 100%;
+  text-align: center;
+}
+.login-label {
+  margin-left: 10%;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
 }
 .login-input {
-    height: 40px;
+  height: 30px;
-    margin-bottom: 20px;
+  margin: 28px 0 16px 10%;
-    padding: 0 20px;
+  width: 80%;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.6);
+}
+.login-foot {
+  position: absolute;
+  bottom: 30px;
+  width: 100%;
+}
+.login-foot>div {
+  display: inline-block;
+}
+.login-foot-langs {
+  float: right;
+  padding-right: 10%;
+}
+.login-foot-lang {
+  display: inline-block;
+  margin-left: 8px;
+  cursor: pointer;
+  position: relative;
+}
+.lang-active-model {
+  width: 19px;
+  height: 16px;
+  position: absolute;
+  border-radius: 2px;
+  background-color: rgba(49, 117, 156, 0.27);
+  top: 8px;
+  left: 9px;
+}
+.lang-name {
+  position: absolute;
+  left: 6px;
+  top: 7px;
+  font-size: 13px;
+  font-weight: bold;
+  color: #656565;
+}
+.lang-name-en {
+  left: 4px;
+}
+.login-foot-lang-active .lang-name {
+  color: #31759c;
 }
-
 .login-input input {
   outline: none;
   border: none;
@@ -96,31 +191,6 @@ button {
   background: #fff;
   width: 100%;
   height: 100%;
-}
+  border-radius: 10px;
-.login-content .login-title{
-    text-align: center;
-    padding-top: 20px;
-}
-.login-content .login-title h1{
-    color: rgb(23, 85, 142);
-    font-size: 26px;
-}
-.login-content .login-title div{
-    width: 260px;
-    margin: 0 auto;
-    margin-top: 25px;
-    margin-bottom: 20px;
-    height: 1px;
-    background: #507faa;
-}
-.login-content .login-content{
-    text-align: center;
-    padding-top: 20px;
-}
-.login-input{
-    border: 2px solid #507faa;
-    width: 70%;
-    margin-left: 10%;
-    border-radius: 5px;
 }
 </style>

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -267,6 +267,7 @@
     methods: {
       show(show) {
         this.rightBox.show = show;
+        this.currentModuleCopy = JSON.parse(JSON.stringify(this.currentModule)); //打开弹框时将currentModule还原
       },
 
       //子弹框控制  obj: module或endpoint对象  type:1module2endpoint

nezha-fronted/src/components/common/rightBox/projectBox.vue

@@ -56,9 +56,9 @@
       </div>-->
 
       <!-- begin--底部按钮-->
-      <div class="right-box-bottom-btns">
+      <!--<div class="right-box-bottom-btns">
         <div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{project.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
-      </div>
+      </div>-->
       <!-- end--底部按钮-->
     </div>
   </transition>

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

@@ -1022,14 +1022,14 @@
         display: flex;
         position: relative;
         box-shadow: 0px 0px 20px 0px rgba(0,0,0,.08);
-        line-height: 31px;
+        line-height: 28px;
     }
     .new-search .search-input-all{
         width: 300px;
         background: #fff;
         color: rgba(0,0,0,.55);
-        height: 31px;
+        height: 28px;
-        line-height: 31px;
+        line-height: 28px;
         border-bottom-left-radius: 5px;
         border-top-left-radius: 5px;
         display: flex;
@@ -1042,8 +1042,8 @@
     }
     .search-input-all .search-history{
         padding: 0px 10px;
-        height: 23px;
+        height: 20px;
-        line-height: 23px;
+        line-height: 20px;
         text-align: center;
         border-right: 1px solid #e5e5e5;
         margin-top: 4px;

nezha-fronted/src/components/page/alert/config.vue

@@ -59,6 +59,7 @@
                   height="calc(100% - 65px)"
                   style="width: 100%;">
                 <el-table-column
+                  :resizable="false"
                   v-for="(item, index) in tableTitle"
                   v-if="item.show"
                   :width="item.width"

nezha-fronted/src/components/page/alert/list.vue

@@ -177,6 +177,7 @@
                   height="calc(100% - 65px)"
                   style="width: 100%;">
                 <el-table-column
+                  :resizable="false"
                   v-for="(item, index) in tableTitle"
                   v-if="item.show"
                   :width="item.width"

nezha-fronted/src/components/page/config/account.vue

@@ -60,6 +60,7 @@
                   height="calc(100% - 65px)"
                   style="width: 100%;">
                 <el-table-column
+                  :resizable="false"
                   v-for="(item, index) in tableTitle"
                   v-if="item.show"
                   :width="item.width"
@@ -382,7 +383,7 @@ export default {
       this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
       this.$get('sys/user/list', this.searchLabel).then(response => {
         if (response.code === 200) {
-          for (var i = 0; i < response.data.list.length; i++) {
+          for (let i = 0; i < response.data.list.length; i++) {
             response.data.list[i].status = response.data.list[i].status + "";
           }
           this.tableData = response.data.list;
@@ -459,7 +460,7 @@ export default {
       }
     },
     blurEditReceiver: function() {
-      for (var i = 0; i < this.receiverData.length; i++) {
+      for (let i = 0; i < this.receiverData.length; i++) {
         if (this.receiverData[i].isEdit) {
           this.receiverData[i].name = this.receiverData[i].oldName;
           this.receiverData[i].isEdit = false;
@@ -473,7 +474,7 @@ export default {
       //TODO 请求后台，删除用户组
     },
     initReceiverData: function() {
-      for (var i = 0; i < this.receiverData.length; i++) {
+      for (let i = 0; i < this.receiverData.length; i++) {
         this.$set(this.receiverData[i], 'oldName', this.receiverData[i].name);
         this.$set(this.receiverData[i], 'isEdit', false);
       }
@@ -483,7 +484,7 @@ export default {
     },
     updateReceiverName: function(item) {
       //TODO 请求接口改名
-      var code = 200;
+      let code = 200;
       //this.$set(item, 'errorMessage', 'err');
       item.errorMessage = '';
       item.oldName = item.name;

nezha-fronted/src/components/page/config/promServer.vue

@@ -82,6 +82,7 @@
                   height="calc(100% - 65px)"
                   style="width: 100%;">
                 <el-table-column
+                  :resizable="false"
                   v-for="(item, index) in tableTitle"
                   v-if="item.show"
                   :width="item.width"
@@ -97,7 +98,7 @@
                         <span v-else>{{scope.row[item.prop]}}</span>
                     </template>
                 </el-table-column>
-                <el-table-column :label="$t('config.account.option')" width="100">
+                <el-table-column :resizable="false" :label="$t('config.account.option')" width="100">
                   <template slot-scope="scope" :column="item">
                     <div class="content-right-options">
                         <span @click="del(scope.row)" class="content-right-option"><i class="el-icon-delete"></i></span>

nezha-fronted/src/components/page/project/project.vue

@@ -34,6 +34,7 @@
         height="calc(100% - 65px)"
         style="width: 100%;">
         <el-table-column
+          :resizable="false"
           v-for="(item, index) in metricsTableTitle"
           v-if="item.show"
           :width="item.width"
@@ -70,6 +71,7 @@
         height="calc(100% - 65px)"
         style="width: 100%;">
         <el-table-column
+          :resizable="false"
           v-for="(item, index) in endpointTableTitle"
           v-if="item.show"
           :width="item.width"
@@ -86,7 +88,7 @@
             <span v-else>{{scope.row[item.prop]}}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('overall.option')" width="100">
+        <el-table-column :resizable="false" :label="$t('overall.option')" width="100">
           <template slot-scope="scope" :column="item">
             <div class="content-right-options">
               <span @click.stop="endpointDetail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>

nezha-fronted/src/http.js

@@ -11,7 +11,7 @@ axios.interceptors.request.use(config => {
       //   "Content-Type": 'application/x-www-form-urlencoded',
       // }
       // config.data = qs.stringify(config.data);
-      let token = sessionStorage.getItem('token')
+      let token = sessionStorage.getItem('nz-token')
       if (token) {
         config.headers['Authorization'] = token //请求头token
       }