feat: performance optimization.

public/index.html

@@ -10,7 +10,7 @@
   <link rel="icon" href="<%= BASE_URL %>logo.png" />
   <title>Halo Dashboard</title>
   <style>
-    #loader{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;border:solid 3px #e5e5e5;border-top-color:#333;border-radius:50%;width:30px;height:30px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
+    body {height: 100%;background-color: #f5f5f5;}#loader{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;border:solid 3px #e5e5e5;border-top-color:#333;border-radius:50%;width:30px;height:30px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
   </style>
   <!-- require cdn assets css -->
   <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>

src/components/global.less

@@ -1,4 +1,5 @@
 @import './index.less';
+@import './style.less';
 
 * {
   &::-webkit-scrollbar {
@@ -112,7 +113,23 @@ body {
     &.content-width-Fluid {
       .header-index-wide {
         max-width: unset;
-        margin-left: 24px;
+
+        .header-index-left {
+          flex: 1 1 1000px;
+
+          .logo {
+            margin-left: 25px;
+          }
+
+          .ant-menu.ant-menu-horizontal {
+            max-width: calc(100vw - 190px - 238px - 25px);
+            flex: 1 1 calc(100vw - 190px - 238px - 25px);
+          }
+        }
+
+        .header-index-right {
+          margin-right: 25px;
+        }
       }
 
       .page-header-index-wide {
@@ -255,7 +272,7 @@ body {
         }
 
         .ant-menu.ant-menu-horizontal {
-          flex: 1 1;
+          flex: 1 1 auto;
           white-space: normal;
         }
       }
@@ -276,16 +293,19 @@ body {
       height: 64px;
 
       .ant-menu.ant-menu-horizontal {
+        max-width: 835px;
+        flex: 0 1 835px;
         border: none;
         height: 64px;
         line-height: 64px;
       }
 
       .header-index-left {
-        flex: 1 1;
+        flex: 0 1 1000px;
         display: flex;
 
         .logo.top-nav-header {
+          flex: 0 0 165px;
           width: 165px;
           height: 64px;
           position: relative;
@@ -313,9 +333,20 @@ body {
       }
 
       .header-index-right {
-        flex: 0 0 auto;
+        flex: 0 0 238px;
+        align-self: flex-end;
         height: 64px;
         overflow: hidden;
+
+        .content-box {
+          float: right;
+          .action {
+            max-width: 140px;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space:nowrap;
+          }
+        }
       }
     }
 
@@ -380,11 +411,10 @@ body {
 .sider {
   box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
   position: relative;
-  z-index: 10;
+  z-index: @ant-global-sider-zindex;
-  height: auto;
+  min-height: 100vh;
 
   .ant-layout-sider-children {
-    padding-top: 64px;
     overflow-y: hidden;
 
     &:hover {
@@ -398,18 +428,13 @@ body {
   }
 
   .logo {
-    position: absolute;
+    position: relative;
     text-align: center;
-    top: 0;
-    left: 0;
-    width: 100%;
     height: 64px;
-    line-height: 64px;
-    -webkit-transition: all .3s;
-    transition: all .3s;
-    background: #002140;
     overflow: hidden;
-    z-index: 9;
+    line-height: 64px;
+    background: #002140;
+    transition: all .3s;
 
     img,
     svg,

src/components/index.less

@@ -7,3 +7,5 @@ html [type='button'] {
 
 // The prefix to use on all css classes from ant-pro.
 @ant-pro-prefix : ant-pro;
+@ant-global-sider-zindex    : 106;
+@ant-global-header-zindex   : 105;

src/components/style.less

@@ -0,0 +1,40 @@
+@import './animate.less';
+.container-wrapper {
+    background: #ffffff;
+    position: absolute;
+    border-radius: 5px;
+    top: 45%;
+    left: 50%;
+    margin: -160px 0 0 -160px;
+    width: 320px;
+    padding: 18px 28px 28px 28px;
+    box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
+
+    .halo-logo {
+        margin-bottom: 20px;
+        text-align: center;
+
+        span {
+            vertical-align: text-bottom;
+            font-size: 38px;
+            display: inline-block;
+            font-weight: 600;
+            color: #1790fe;
+            background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
+            -webkit-text-fill-color: transparent;
+            -webkit-background-clip: text;
+            background-clip: text;
+
+            small {
+                margin-left: 5px;
+                font-size: 35%;
+            }
+        }
+    }
+
+    .tip {
+        cursor: pointer;
+        margin-left: 0.5rem;
+        float: right;
+    }
+}

src/views/user/Login.vue

@@ -205,47 +205,3 @@ export default {
   }
 }
 </script>
-<style lang="less">
-@import url('../../components/animate.less');
-body {
-  height: 100%;
-  background-color: #f5f5f5;
-}
-
-.container-wrapper {
-  background: #ffffff;
-  position: absolute;
-  border-radius: 5px;
-  top: 45%;
-  left: 50%;
-  margin: -160px 0 0 -160px;
-  width: 320px;
-  padding: 18px 28px 28px 28px;
-  box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
-
-  .halo-logo {
-    margin-bottom: 20px;
-    text-align: center;
-    span {
-      vertical-align: text-bottom;
-      font-size: 38px;
-      display: inline-block;
-      font-weight: 600;
-      color: #1790fe;
-      background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
-      -webkit-text-fill-color: transparent;
-      -webkit-background-clip: text;
-      background-clip: text;
-      small {
-        margin-left: 5px;
-        font-size: 35%;
-      }
-    }
-  }
-  .tip {
-    cursor: pointer;
-    margin-left: 0.5rem;
-    float: right;
-  }
-}
-</style>

src/views/user/ResetPassword.vue

@@ -203,47 +203,3 @@ export default {
   }
 }
 </script>
-<style lang="less">
-@import url('../../components/animate.less');
-body {
-  height: 100%;
-  background-color: #f5f5f5;
-}
-
-.container-wrapper {
-  background: #ffffff;
-  position: absolute;
-  border-radius: 5px;
-  top: 45%;
-  left: 50%;
-  margin: -160px 0 0 -160px;
-  width: 320px;
-  padding: 18px 28px 28px 28px;
-  box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
-
-  .halo-logo {
-    margin-bottom: 20px;
-    text-align: center;
-    span {
-      vertical-align: text-bottom;
-      font-size: 38px;
-      display: inline-block;
-      font-weight: 600;
-      color: #1790fe;
-      background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
-      -webkit-text-fill-color: transparent;
-      -webkit-background-clip: text;
-      background-clip: text;
-      small {
-        margin-left: 5px;
-        font-size: 35%;
-      }
-    }
-  }
-  .tip {
-    cursor: pointer;
-    margin-left: 0.5rem;
-    float: right;
-  }
-}
-</style>