NEZ-289 perf: 标题色调浅、优化动画

nezha-fronted/src/assets/stylus/main.scss

@@ -845,6 +845,104 @@ li{
     transform-origin: right;
   }
 }
+@keyframes unfold-200 {
+  0%{
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+  }
+  25%{
+    opacity: 0;
+    max-height: 50px;
+  }
+  50%{
+    opacity: 0;
+    max-height: 100px;
+  }
+  75%{
+    opacity: 0.4;
+    max-height: 150px;
+  }
+  100% {
+    visibility: visible;
+    opacity: 1;
+    max-height: 200px;
+  }
+}
+@keyframes fold-200 {
+  0% {
+    opacity: 1;
+    max-height: 200px;
+    visibility: visible;
+  }
+  25%{
+
+    opacity: 0.4;
+    max-height: 150px;
+  }
+  50%{
+    opacity: 0;
+    max-height: 100px;
+  }
+  75%{
+    opacity: 0;
+    max-height: 50px;
+  }
+  100% {
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+  }
+}
+@keyframes unfold-500 {
+  0%{
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+  }
+  25%{
+    opacity: 0;
+    max-height: 125px;
+  }
+  50%{
+    opacity: 0;
+    max-height: 250px;
+  }
+  75%{
+    opacity: 0.4;
+    max-height: 375px;
+  }
+  100% {
+    visibility: visible;
+    opacity: 1;
+    max-height: 500px;
+  }
+}
+@keyframes fold-500 {
+  0% {
+    opacity: 1;
+    max-height: 500px;
+    visibility: visible;
+  }
+  25%{
+
+    opacity: 0.4;
+    max-height: 375px;
+  }
+  50%{
+    opacity: 0;
+    max-height: 250px;
+  }
+  75%{
+    opacity: 0;
+    max-height: 125px;
+  }
+  100% {
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+  }
+}
 .right-box-enter-active {
   animation: slide-in-from-right 0.4s;
 }

nezha-fronted/src/components/charts/chart-asset-info.vue

@@ -33,7 +33,7 @@
                     <span><i :class="{'el-icon-caret-right':hideBasic,'el-icon-caret-bottom':!hideBasic}"></i></span>
                     <span>{{$t('asset.createAssetTab.basicTitle')}}</span>
                   </div>
-                  <div class="basic-content" :class="{'shrink':hideBasic}">
+                  <div class="basic-content basic-content-asset" :class="{'fold':hideBasic, 'unfold':!hideBasic}">
                     <template v-if="assetInfos.Basic && Object.keys(assetInfos.Basic).length>0">
                       <div v-for="(item,index) in basicKey" :key="index" class="content-item hover-bg">
                         <div class="content-item-key item-tip" :id="'basicKey' + index">
@@ -63,7 +63,7 @@
                     <span><i :class="{'el-icon-caret-right':hideFeature,'el-icon-caret-bottom':!hideFeature}"></i></span>
                     <span>{{$t('asset.createAssetTab.featureTitle')}}</span>
                   </div>
-                  <div class="feature-content" :class="{'shrink':hideFeature}">
+                  <div class="feature-content feature-content-asset" :class="{'fold':hideFeature, 'unfold':!hideFeature}">
                     <div v-for="(value,key,index) in assetInfos.Feature" class="content-item item-tip">
                       <div class="content-item-key item-tip" :id="'featureKey' + index">
                         <span>{{key}}</span>
@@ -282,9 +282,9 @@
         }else{
           this.hideFeature=!this.hideFeature
         }
-        this.$nextTick(()=>{
+        setTimeout(()=>{
           this.$refs.scrollbar.update();
-        })
+        },400);
       },
       replaceSplit(key){
         if(key){

nezha-fronted/src/components/charts/chart-list.vue

@@ -196,6 +196,7 @@
         this.dataListDragTmp = [...this.dataList];
       },
       end (event) {
+        console.info("end event:", event)
         let item = event.item;
         let oldIndex = event.oldIndex;
         let newIndex = event.newIndex;

nezha-fronted/src/components/charts/chart-project-info.vue

@@ -21,7 +21,7 @@
             </span>
           </el-popover>
           <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
-            <span class="chart-title-text">{{$t('asset.createAssetTab.assetInfo')}}</span>
+            <span class="chart-title-text">{{$t('project.chart.projectInfo')}}</span>
           </span>
         </div>
         <div class="mt-10 chart-info-container" v-cloak  v-show="firstShow" >
@@ -30,10 +30,10 @@
               <div style="padding: 0 15px">
                 <div class="basic-container">
                   <div class="basic-title asset-info-content-title" @click="hideElement('basic')">
-                    <span><i :class="{'el-icon-caret-right':hidebasic,'el-icon-caret-bottom':!hidebasic}"></i></span>
+                    <span><i :class="{'el-icon-caret-right':hideBasic,'el-icon-caret-bottom':!hideBasic}"></i></span>
                     <span>{{$t('project.chart.basicTitle')}}</span>
                   </div>
-                  <div class="basic-content" :class="{'shrink':hidebasic}">
+                  <div class="basic-content basic-content-project" :class="{'fold':hideBasic, 'unfold':!hideBasic}">
                     <template v-if="projectInfos.basic && Object.keys(projectInfos.basic).length>0">
                       <div v-for="(item,index) in basicKey" :key="index" class="content-item">
                         <div class="content-item-key item-tip" :id="'basicKey' + index">
@@ -57,11 +57,11 @@
                   </div>
                 </div>
                 <div class="feature-container" v-for="(module, mi) in projectInfos.module" :key="mi">
-                  <div class="feature-title asset-info-content-title" @click="hideElement(module.id)" >
+                  <div class="feature-title asset-info-content-title" @click.stop="hideElement(module.id)" >
-                    <span><i :class="{'el-icon-caret-right':showModuleId != module.id,'el-icon-caret-bottom':showModuleId == module.id}"></i></span>
+                    <span><i :class="{'el-icon-caret-right': showModuleIds.indexOf(module.id) == -1,'el-icon-caret-bottom': showModuleIds.indexOf(module.id) > -1}"></i></span>
                     <span>{{$t('project.module.module')}}：{{module.name}}</span>
                   </div>
-                  <div class="feature-content" :class="{'shrink':showModuleId != module.id}">
+                  <div class="feature-content feature-content-project" :class="{'fold': showModuleIds.indexOf(module.id) == -1, 'unfold': showModuleIds.indexOf(module.id) > -1}">
                     <div v-for="(item,index) in moduleKey" :key="index" class="content-item">
                       <div class="content-item-key item-tip" :id="'featureKey' + module.id + '-' + index">
                         <span>{{item.label}}</span>
@@ -140,8 +140,8 @@
           start_time: '',
           end_time: '',
         },
-        hidebasic:false,
+        hideBasic:false,
-        showModuleId: 0,
+        showModuleIds: [],
         firstShow: false, // 默认不显示操作按钮,
         caretShow:false,
         dragTitleShow:false,
@@ -238,17 +238,18 @@
       },
       hideElement:function(type){
         if(type ==  'basic'){
-          this.hidebasic=!this.hidebasic;
+          this.hideBasic=!this.hideBasic;
         }else{
-          if (this.showModuleId == type) {
+          let index = this.showModuleIds.indexOf(type);
-            this.showModuleId = 0;
+          if (index == -1) {
+            this.showModuleIds.push(type);
           } else {
-            this.showModuleId = type;
+            this.showModuleIds.splice(index, 1);
           }
         }
-        this.$nextTick(()=>{
+        setTimeout(()=>{
           this.$refs.scrollbar.update();
-        })
+        },400);
       },
       replaceSplit(key){
         if(key){

nezha-fronted/src/components/charts/chart.scss

@@ -209,23 +209,46 @@
       height: calc(100% - 10px);
     }
     .asset-info-content-title {
-      background-image: linear-gradient(#f5f5f5, #e7e7e7);
+      background-image: linear-gradient(#fafafa, #f0f0f0);
       font-size: 13px;
       color: #505255;
       padding-left: 2px;
       height: 25px;
       line-height: 25px;
     }
-    .basic-content.shrink, .feature-content.shrink {
+    .basic-content-asset.fold, .feature-content-asset.fold {
-      height: 0;
+      animation-name: fold-500; //该动画定义在main.scss里
-      transform: scaleY(0);
+      animation-duration: 0.3s;
+      animation-iteration-count:1;
       opacity: 0;
+      max-height: 0;
+      visibility: hidden;
+     }
+    .basic-content-project.fold, .feature-content-project.fold {
+      animation-name: fold-200; //该动画定义在main.scss里
+      animation-duration: 0.3s;
+      animation-iteration-count:1;
+      opacity: 0;
+      max-height: 0;
+      visibility: hidden;
+     }
+    .basic-content-asset.unfold, .feature-content-asset.unfold {
+      animation-name: unfold-500;
+      animation-duration: 0.3s;
+      animation-iteration-count:1;
+      opacity: 1;
+      max-height: 500px;
+      visibility: visible;
+    }
+    .basic-content-project.unfold, .feature-content-project.unfold {
+      animation-name: unfold-200;
+      animation-duration: 0.3s;
+      animation-iteration-count:1;
+      opacity: 1;
+      max-height: 200px;
+      visibility: visible;
     }
     .basic-content, .feature-content {
-      height: 100%;
-      opacity: 1;
-      transform-origin: top;
-      transition: all 0.2s linear;
       width: 100%;
       margin-bottom: 5px;
       box-sizing: border-box;

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

@@ -798,6 +798,7 @@ const en = {
       basicTitle: "Basic info",
       alertStat: "Alert state",
       endpointStat: "Endpoint state",
+      projectInfo: "Project information"
     },
     project: {
       project: 'Project',//"系统"