perf: 二级页面布局调整、增加动画

nezha-fronted/src/assets/css/font/iconfont.svg

@@ -20,6 +20,9 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="exit-full-screen" unicode="&#58962;" d="M566.872 478.454l177.54 177.54 39.599-39.598-177.54-177.54zM537.328 409.395l0.068 56 205.82-0.252-0.068-56zM537.153 615.137l56 0.068 0.251-205.82-56-0.068zM240.012 151.59400000000005l177.54 177.54 39.599-39.598-177.54-177.54zM280.794 302.855l0.069 56 205.82-0.252-0.069-56zM430.616 358.597l56 0.068 0.252-205.82-56-0.068zM866.68 241.66999999999996h56v-268.22h-56zM654.37 29.360000000000014h268.22v-56H654.37zM100.89 795.06h56v-268.22h-56zM100.98 795.15H369.2v-56H100.98zM654.37 795.15h268.22v-56H654.37zM866.68 795.06h56v-268.22h-56zM100.98 29.360000000000014H369.2v-56H100.98zM100.89 241.66999999999996h56v-268.22h-56z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="asset" unicode="&#58925;" d="M1024 128H0V896h1024v-768zM960 832H64v-576h896V832zM384 64h256v-128h128v-64H256v64h128V64z"  horiz-adv-x="1024" />
 
     

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

@@ -487,14 +487,17 @@ li{
   display: flex;
   height: 50px;
   align-items : center;
-  justify-content: space-between;
+  /*justify-content: space-between;*/
+}
+.top-tools-reverse {
+  /*flex-direction: row-reverse;*/
 }
 .top-tools>div {
   margin-top: 2px;
 }
 .top-tools .top-tool-search {
   width: 260px;
-  margin: -1px 0 0 0;
+  margin: -2px 0 0 0;
 }
 .top-tools .top-tool-btn-txt .nz-icon{
   display: inline-block;
@@ -1240,16 +1243,6 @@ li{
 .top-tools input, .sub-top-tools input {
   background-color: $content-right-background-color;
 }
-.top-tool-setting-btn {
-  width: 28px;
-  background-image: linear-gradient(#f8f8f8, #e6e6e6);
-  border: none;
-  height: 30px;
-  border-right: 1px solid #d4d4d4;
-  border-left: 1px solid #d4d4d4;
-  cursor: pointer;
-  outline: none;
-}
 .query-input-active .el-input__inner, .query-input-inactive .el-input__inner {
   height: 25px;
   line-height: 25px !important;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="pagination" :class="{'is-sub-list': isSubList}">
+  <div class="pagination">
     <el-pagination
       ref="page"
       @size-change="size"
@@ -9,7 +9,7 @@
       :current-page="pageObj.pageNo"
       :page-sizes="pageSizes?pageSizes:[20, 50, 100]"
       :page-size="pageSize"
-      :layout="isSubList ? 'prev, pager, next' : 'total, prev, pager, next, slot, jumper'"
+      layout="total, prev, pager, next, slot"
       :total="this.pageObj.total"
     >
       <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"  :popper-append-to-body="false" class="pagination-size-select" @change="size">
@@ -23,7 +23,7 @@
 <script>
 export default {
   name: "pagination",
-  props: ['pageObj', 'tableId', 'postPageSizes', 'isSubList'],
+  props: ['pageObj', 'tableId', 'postPageSizes'],
   data() {
     return {
       pageSize: 20,
@@ -117,6 +117,9 @@ export default {
     text-align: center;
     max-height: 42px;
   }
+  .pagination-top .pagination {
+    padding-top: 0;
+  }
   /*.pagination .el-popper[x-placement^=bottom] .popper__arrow {
     bottom: -6px;
     margin-right: 3px;
@@ -205,8 +208,4 @@ export default {
   .el-pagination__sizes .el-input .el-input__inner:hover{
     border-color: rgba(154,154,154,0.20);
   }
-  .pagination.is-sub-list {
-    margin-top: -4px !important;
-    padding-top: 0;
-  }
 </style>

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

@@ -3,10 +3,10 @@
   .project-calendar .el-input__inner {
      height: 24px;
   }
-  .top-tools .el-input__inner {
+  /*.top-tools .el-input__inner {
     height: 25px !important;
     border-color: #d8d8d8;
-  }
+  }*/
   .change-time-height {
     height: 23px;
   }
@@ -25,6 +25,7 @@
   .main-list {
     height: 100%;
     transition: .4s height, .4s transform;
+    position: relative;
   }
   .main-list.main-list-with-sub {
     transform: translate3d(0,0,0);
@@ -68,6 +69,22 @@
   .window-control-btn>i:hover {
     color: $global-text-color-active;
   }
+  .abc {
+    right: 100% !important;
+    transform: translateX(100%);
+  }
+  .pagination-position {
+    position: absolute;
+    transition: .4s right, .4s top, .4s width;
+  }
+  .pagination-position-bottom {
+    width: 100%;
+    top: calc(100% - 50px);
+  }
+  .pagination-position-top {
+    top: 0;
+    right: 0;
+  }
 </style>
 <style scope>
   .chart-bottom {
@@ -105,44 +122,36 @@
     <div class="content-right">
       <!-- 主列表 -->
       <div class="main-list" :class="{'main-list-with-sub': tableShow == 3}">
-        <!-- 一般状态的工具栏 -->
+        <!--<div style="position: absolute; left: 0; top: 13px; z-index: 2;">
-        <div class="top-tools" v-show="tableShow == 1">
+          <div class="top-tool-search margin-r-20" style="margin: -2px 0 0 0;"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
-          <div class="nz-tab">
+          <export-excel
-          </div>
+            export-file-name="endpoint"
-          <div>
+            export-url="/endpoint/export"
+            :params="endpointSearchLabel"
+            @afterImport="getEndpointTableData"
+          >
+            <template slot="optionZone">
+              <i class="nz-icon nz-icon-create-square" @click.stop="toCreateEndpoint" :title="$t('overall.createProject')" ></i>
+            </template>
+          </export-excel>
+
+        </div>-->
+        <div class="top-tools" style="position: relative;" :class="{'top-tools-reverse': tableShow == 3}" v-show="mainResizeShow">
+          <!--<div class="pagination-top"></div>-->
+          <div style="position: absolute; right: 0; display: flex; align-items: center; transition: .4s right;" :class="{'abc': tableShow == 3}">
+            <div class="top-tool-search"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
             <export-excel
               export-file-name="endpoint"
               export-url="/endpoint/export"
               :params="endpointSearchLabel"
               @afterImport="getEndpointTableData"
-              class="float-right">
+              class="margin-l-20"
+              style="width: 59px;"
+            >
               <template slot="optionZone">
                 <i class="nz-icon nz-icon-create-square" @click.stop="toCreateEndpoint" :title="$t('overall.createProject')" ></i>
               </template>
             </export-excel>
-            <div class="top-tool-search float-right margin-r-20"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
-          </div>
-        </div>
-        <!-- 浏览副列表时的工具栏 -->
-        <div class="top-tools" v-show="tableShow == 3 && mainResizeShow">
-          <div>
-            <export-excel
-              export-file-name="endpoint"
-              export-url="/endpoint/export"
-              :params="endpointSearchLabel"
-              @afterImport="getEndpointTableData"
-              class="float-left margin-l-5">
-              <template slot="optionZone">
-                <i class="nz-icon nz-icon-create-square" @click.stop="toCreateEndpoint" :title="$t('overall.createProject')" ></i>
-              </template>
-            </export-excel>
-            <div class="top-tool-search float-right margin-l-20"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
-          </div>
-          <div style="display: flex; justify-content: space-between; align-items: center">
-            <Pagination :isSubList="true" :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination2"></Pagination>
-            <span class="nz-table-gear" @click.stop="elementsetShow('shezhi',$event)">
-              <button class="top-tool-setting-btn"><i class="nz-icon nz-icon-gear"></i></button>
-            </span>
           </div>
         </div>
         <el-table
@@ -190,7 +199,7 @@
               <template v-else>-</template>
             </template>
           </el-table-column>
-          <el-table-column width="28" v-if="tableShow == 1">
+          <el-table-column width="28">
             <template slot="header" slot-scope="scope">
               <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
                 <i class="nz-icon nz-icon-gear"></i>
@@ -198,7 +207,9 @@
             </template>
           </el-table-column>
         </el-table>
-        <Pagination v-show="tableShow == 1" :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
+        <div class="pagination-position pagination-position-bottom">
+          <Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
+        </div>
         <button class="to-top" v-show="showTopBtn1" @click="toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
       </div>
 
@@ -246,9 +257,9 @@
             </el-dropdown>
             <div class="sub-list-window-control">
               <!--半屏-->
-              <div class="window-control-btn" @click="halfScreen"><i class="el-icon-minus"></i></div>
+              <div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen"><i class="nz-icon nz-icon-exit-full-screen"></i></div>
               <!--全屏-->
-              <div class="window-control-btn" @click="fullScreen"><i class="el-icon-full-screen"></i></div>
+              <div class="window-control-btn" v-if="!isFullScreen" @click="fullScreen"><i class="el-icon-full-screen"></i></div>
               <!--关闭-->
               <div class="window-control-btn" @click="backToEdpTab"><i class="el-icon-close"></i></div>
             </div>
@@ -385,7 +396,8 @@
         tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
         mainResizeShow: true, //dom高度改变时部分内容是否展示
         subResizeShow: true,
-        tableShow: 1, // 1.endpoint; 2.metrics
+        mainListHeight: '', //主列表dom的高度
+        tableShow: 1, // 1.endpoint; 3.query
         showTopBtn1: false,
         showTopBtn2: false,
         editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
@@ -842,14 +854,14 @@
           document.onmousemove = null;
         }
       },
-      halfScreen() {
+      exitFullScreen() {
         let contentRightDom = document.querySelector(".content-right"); //右侧内容区
         let contentRightHeight = contentRightDom.offsetHeight;//可视高度
         //主列表
-        document.querySelector(".main-list-with-sub").style.height = 'calc(50% - 4px)';
+        document.querySelector(".main-list-with-sub").style.height = this.mainListHeight ? this.mainListHeight + 'px' : 'calc(50% - 4px)';
 
         //副列表
-        document.querySelector(".sub-list").style.height = 'calc(50% - 4px)';
+        document.querySelector(".sub-list").style.height = this.mainListHeight ? contentRightHeight-this.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
         setTimeout(() => {
           this.isFullScreen = false;
           this.mainResizeShow = true;
@@ -859,12 +871,12 @@
       fullScreen() {
         let contentRightDom = document.querySelector(".content-right"); //右侧内容区
         let contentRightHeight = contentRightDom.offsetHeight;//可视高度
+        this.isFullScreen = true;
         //主列表
+        this.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
         document.querySelector(".main-list-with-sub").style.height = '0';
         this.mainResizeShow = false;
-
         //副列表
-        this.isFullScreen = true;
         document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
       },
       clickLegend(legendName,index){
@@ -1241,7 +1253,12 @@
       },
       showEndpoint:function(endpoint){
         this.tableShow=3;
-        this.mainTableHeight = this.$tableHeight.openSubList.mainList;
+        this.mainTableHeight = this.$tableHeight.openSubList.mainList; //重置table高度
+        //移动分页组件的位置
+        let pagination = document.querySelector(".pagination-position");
+        pagination.classList.remove("pagination-position-bottom");
+        pagination.classList.add("pagination-position-top");
+
         this.queryEdpLoading=true;
         setTimeout(() => {
           if(endpoint){
@@ -1347,10 +1364,16 @@
       },
       backToEdpTab:function(){
         this.tableShow=1;
-        this.mainTableHeight = this.$tableHeight.normal;
+        this.mainTableHeight = this.$tableHeight.normal; //重置table的高度
         this.isFullScreen = false;
+        //重置二级列表数据
         this.selectedEndpoints=[];
         this.showTableData = [];
+        //移动分页组件的位置
+        let pagination = document.querySelector(".pagination-position");
+        pagination.classList.remove("pagination-position-top");
+        pagination.classList.add("pagination-position-bottom");
+
         this.showTopBtn1 = false;
         // 主列表恢复全屏
         this.mainResizeShow = this.subResizeShow = true;