perf: project样式调整

2021-04-30 17:11:34 +08:00
parent ceef9ba5dc
commit 24c6f8d052
11 changed files with 728 additions and 735 deletions
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -190,7 +190,7 @@
    .el-table {
      position: absolute;
      width: calc(100% - 40px);
-      border: 1px solid #E7EAED;
+      border: 1px solid $--right-box-border-color;
      border-bottom: none;

      .caret-wrapper {
@@ -209,10 +209,10 @@

      td {
        padding: 9px 0;
-        border-bottom: 1px solid #E7EAED;
+        border-bottom: 1px solid $--right-box-border-color;
      }
      th {
-        border-color: #E7EAED;
+        border-color: $--right-box-border-color;
      }
      .el-table__header th:first-of-type {
        border-left: none;
@@ -221,7 +221,7 @@
        position: fixed;
        right: 31px;
        height: 49px;
-        border-bottom: 1px solid #E7EAED;
+        border-bottom: 1px solid $--right-box-border-color;
        background-color: white;
      }
      thead {
@@ -284,7 +284,7 @@
  }
  /* start--覆盖el-table边框、gutter等样式 */
  .el-table__body-wrapper, .el-table__fixed-body-wrapper {
-    box-shadow: 1px 0 #E7EAED;
+    box-shadow: 1px 0 $--right-box-border-color;

    .cell {
      color: #333;
@@ -298,20 +298,20 @@
  }
  /* 最后一列用box-shadow模拟边框 */
  .el-table:not(.no-operation).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
-    box-shadow: 1px 0 #E7EAED;
+    box-shadow: 1px 0 $--right-box-border-color;
  }
  .el-table:not(.no-operation).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
    border-right: none !important;
-    box-shadow: 1px 0 #E7EAED;
+    box-shadow: 1px 0 $--right-box-border-color;
  }
  .el-table__fixed-body-wrapper {
    td:not(.is-hidden) {
-      border-left: 1px solid #E7EAED;
+      border-left: 1px solid $--right-box-border-color;
    }
  }
  .el-table__fixed-header-wrapper {
    th:not(.is-hidden) {
-      border-left: 1px solid #E7EAED;
+      border-left: 1px solid $--right-box-border-color;
    }
    th:last-of-type {
      border-right: none !important;
--- a/nezha-fronted/src/assets/css/theme.scss
+++ b/nezha-fronted/src/assets/css/theme.scss
@@ -50,6 +50,8 @@ $--monitor-color: #98AEC5; //全局停用色灰色
  warningColor: var(--theme-color);
  suspendedColor: $--suspended-color;
  monitorColor: $--monitor-color;
+  primaryBorderColor: $--primary-border-color;
+  rightBoxBorderColor: $--right-box-border-color;
 }
 /* element-ui变量覆盖 */
 /*$--color-primary: red; // 覆盖element-ui的主题色
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -2073,27 +2073,6 @@ li{
  line-height: 20px;
 }

-.right-bottom-zoom{
-  position: absolute;
-  top: calc(100% - 100px);
-  left: calc(100% - 45px);
-  height: 90px;
-  width: 35px;
-  border: 1px solid #E7EAED;
-  box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-  .zoom-option{
-    width: 100%;
-    height: 50%;
-    opacity: 0.42;
-    background: #FFF;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-  }
-  .zoom-option:hover{
-    cursor: pointer;
-  }
-}
 .nz-icon-arrow-down{
  font-size: 14px;
 }
--- a/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
+++ b/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
@@ -212,7 +212,7 @@ export default {
  justify-content: space-between;
  padding: 15px 0 15px 17px;
  box-sizing: border-box;
-  border: 1px solid #E7EAED;
+  border: 1px solid $--right-box-border-color;
  background-color: #FFFFFF;
  overflow-x: hidden;
  overflow-y: auto;
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -1,12 +1,12 @@
 <style>
-@import "./L5/css/iconfont.css";
-@import "./L5/css/props.css";
+  @import "./L5/css/iconfont.css";
+  @import "./L5/css/props.css";
 </style>
 <template>
  <div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'">
-    <!--project主要信息-->
-    <div v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }" class="project-title">
-      <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px">
+    <div class="main-list">
+      <div class="main-container" style="padding-left: 0">
+        <div v-if="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px">
          <!--工具栏-->
          <span class="project-topology-tool">
          <el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
@@ -110,19 +110,9 @@
           </button>
         </span>
        </div>
-      <div v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools" style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px;padding-top: 10px">
+        <div v-if="!editTopologyFlag&&!fromOverView" class="top-tools" style="padding-left: 10px">
          <div>{{topologyInfo.name}}</div>
-        <span v-show="!editTopologyFlag&&!fromPrev&&!fromOverView" class="edit-topologyLine" style="padding-top: 5px">
-<button class="top-tool-btn float-right" style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;"
-        type="button" @click="changeScreen"
->
-                  <i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
-        </button>
-        <button v-has="'project_topo_update'" class="top-tool-btn float-right"
-                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button" @click="editTopology"
-        >
-                  <i :title="$t('project.topology.edit')" class="nz-icon nz-icon-edit"></i>
-        </button>
+          <div v-if="!editTopologyFlag&&!fromPrev&&!fromOverView" class="top-tool-right">
            <pick-time
              v-show="!editTopologyFlag"
              ref="pickTime"
@@ -130,38 +120,52 @@
              :refresh-data-func="dateChange"
              :showTimePicker="false"
              :use-chart-unit="false"
-            class="float-right pickTime top-tool-btn-group">
+              class="pickTime margin-r-10">
            </pick-time>
-
-      </span>
+            <button v-has="'project_topo_update'" class="top-tool-btn margin-r-10" type="button" @click="editTopology">
+              <i :title="$t('project.topology.edit')" class="nz-icon nz-icon-edit"></i>
+            </button>
+            <button class="top-tool-btn" type="button" @click="changeScreen">
+              <i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
+            </button>
          </div>
        </div>
-    <div :class="['page',fromOverView?'overview-page':'']" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
+        <div class="nz-table2" style="padding: 0 20px 10px 5px;">
+          <!--悬浮network部分-->
+          <div class="network-info">
+            <div v-if="popDataShow.main">
+              <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
+            </div>
+            <div v-if="popDataShow.info">
+              <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
+            </div>
+          </div>
+          <div :class="['page',fromOverView?'overview-page':'']" :style="`border: 1px solid ${theme.rightBoxBorderColor};`">
            <!--画布部分-->
-      <div :id="'topology-canvas' + topologyIndexF" class="full" :ref="'topology-canvas'+ topologyIndexF"></div>
+            <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full"></div>
            <!--设置属性-->
-      <div class="props" v-if="editTopologyFlag&&toolShow.attr">
-        <CanvasProps :selection.sync="props"
-                     @change="onUpdateProps"
-                     @animate="animateCanvas"
-                     @changeProjectTitle="changeProjectTitle"
-                     @notModuleIDArrChange="notModuleIDArrChange"
+            <div v-if="editTopologyFlag&&toolShow.attr" class="props">
+              <CanvasProps ref="CanvasProps"
                           :index="topologyIndex"
-                     @del="delPen"
                           :modules="modules"
-                     ref="CanvasProps">
+                           :selection.sync="props"
+                           @animate="animateCanvas"
+                           @change="onUpdateProps"
+                           @changeProjectTitle="changeProjectTitle"
+                           @del="delPen"
+                           @notModuleIDArrChange="notModuleIDArrChange">
              </CanvasProps>
            </div>
            <!--所有节点上的小图标-->
-      <div v-for="(item,index) in nodesArr" :key="index"
+            <div v-for="(item,index) in nodesArr" v-if="!editTopologyFlag&&item.data.iconToolState&&!fromPrev"
+                 :key="index"
                 :style="{position: 'absolute',top:item.rect.y - (48*(fromOverView?penToolTipScale:1))+'px',left:item.rect.center.x - (24*(fromOverView?penToolTipScale:1)) +'px',transform:'scale('+(fromOverView?penToolTipScale:1)+')'}"
-           v-if="!editTopologyFlag&&item.data.iconToolState&&!fromPrev"
                 class="network-pop"
            >

              <i
-          :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
                :ref="'modelTopId'+index"
+                :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
                @click="showNodeTools(index,item)"
              >
                <i class="nz-icon nz-icon-model"></i>
@@ -183,6 +187,7 @@
            </div>
            <!--提示未添加module id的块-->
            <div v-for="(item, index) in notModuleIDArr"
+                 v-if="editTopologyFlag&&!fromPrev"
                 :key="index"
                 :style="{
             position: 'absolute',
@@ -190,23 +195,35 @@
             left:item.rect.x - 10+'px',
             transform:'scale('+(fromOverView?penToolTipScale:1)+')',
           }"
-           v-if="editTopologyFlag&&!fromPrev"
            >
-        <div class="module-rect-top" :style="{top:0,left:0,width:item.rect.width+15+'px',height:0}"></div>
-        <div class="module-rect-right" :style="{top:0,left:item.rect.width+15+'px',width:0,height:item.rect.height+15+'px'}"></div>
-        <div class="module-rect-bottom" :style="{top:item.rect.height+15 +'px',left:0,width:item.rect.width+15+'px',height:0}"></div>
-        <div class="module-rect-left" :style="{top:0,left:0,width:0,height:item.rect.height+15+'px'}"></div>
+              <div :style="{top:0,left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-top"></div>
+              <div :style="{top:0,left:item.rect.width+15+'px',width:0,height:item.rect.height+15+'px'}" class="module-rect-right"></div>
+              <div :style="{top:item.rect.height+15 +'px',left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-bottom"></div>
+              <div :style="{top:0,left:0,width:0,height:item.rect.height+15+'px'}" class="module-rect-left"></div>
            </div>
            <!--节点连线相关的 tooltip-->
-      <div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
-           v-if="tooltipPosition.show&&!editTopologyFlag"
-           @mouseover="tooltipOver"
-           @mouseout="tooltipOut"
+            <div v-if="tooltipPosition.show&&!editTopologyFlag"
                 ref="topoTooltip"
+                 :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
+                 @mouseout="tooltipOut"
+                 @mouseover="tooltipOver"
            >
              <topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
            </div>
          </div>
+          <!--endpoint-->
+          <transition name="right-box">
+            <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :projectId="projectInfo.id"
+                           @close="popDataShowUpdate('',true)">endpoint
+            </endpointTable>
+          </transition>
+          <div v-if="!fromOverView&&!editTopologyFlag&&!fromPrev" class="right-bottom-zoom">
+            <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
+            <div class="zoom-option" @click="zoomMap(-0.25)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
+          </div>
+        </div>
+      </div>
+    </div>
    <!--<div class="left-bottom" v-if="editTopologyFlag">-->
    <!--<div class="title">小提示</div>-->
    <!--<ul class="group">-->
@@ -216,21 +233,6 @@
    <!--<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>-->
    <!--</ul>-->
    <!--</div>-->
-    <!--悬浮network部分-->
-    <div class="network-info">
-      <div v-if="popDataShow.main">
-        <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
-      </div>
-      <div v-if="popDataShow.info">
-        <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
-      </div>
-    </div>
-    <!--endpoint-->
-    <transition name="right-box">
-      <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :projectId="projectInfo.id"
-                     @close="popDataShowUpdate('',true)">endpoint
-      </endpointTable>
-    </transition>
    <!--asset-->
    <transition name="right-box">
      <assetTable v-if="popDataShow.asset" :moduleId="moduleId" :projectId="projectInfo.id"
@@ -322,10 +324,6 @@
      </div>

    </el-dialog>
-    <div v-if="!fromOverView&&!editTopologyFlag&&!fromPrev" class="right-bottom-zoom">
-      <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
-      <div class="zoom-option" @click="zoomMap(-0.25)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
-    </div>
  </div>
 </template>

@@ -1549,7 +1547,6 @@ export default {
    upload () {
      const form = new FormData()
      form.append('file', this.file)
-      console.log(this.file)
      if (this.uploadPic.name) {
        form.append('name', this.uploadPic.name)
      } else {
@@ -1562,7 +1559,7 @@ export default {
        if (res.code == 200) {
          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
          this.uploadPicShow = false
-          this.dealImg(`monitor/project/topo/icon/${res.data.id}/0`).then((data,header) => {
+          this.dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data,header) => {
            const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
            if (group) {
              group.children.push({
@@ -1618,7 +1615,7 @@ export default {
          res.data.list.forEach((item, index) => {
            item.imageName = item.name
            delete item.name
-            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/0`))
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/1`))
            imgArr.push({ ...item })
          })
          Promise.all(promiseArr).then((res2,header) => {
@@ -1662,7 +1659,7 @@ export default {
        const promiseArr = []
        imgidList.forEach((item, index) => {
          if (item.data.imageId) {
-            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/0`))
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))
          } else {
            promiseArr.push('')
          }
@@ -1688,13 +1685,10 @@ export default {
      if (url) {
        return new Promise((resolve, reject) => {
          this.$axios
-            .get(url, {
-              responseType: 'arraybuffer'
-            })
-            .then((res, resHeader) => {
+            .get(url)
+            .then((res) => {
              return {
-                data: ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))),
-                header: resHeader
+                data: ('data:image/jpeg;base64,' + res.data),
              }
            })
            .then(data => {
@@ -2038,7 +2032,7 @@ export default {
 }
 </script>
 <style lang="scss">
-.el-dropdown-menu {
+  .el-dropdown-menu {
    .project-topology-add-node {
      .el-collapse-item__header {
        padding: 0 10px;
@@ -2180,10 +2174,10 @@ export default {
    .avatar-uploader:active .el-upload--picture-card:hover, .avatar-uploader:active .el-upload:focus {
      color: #DB8B8B;
    }
-}
+  }
 </style>
 <style lang="scss" scoped>
-.project-box{
+  .project-box{
    @keyframes model-error-animation {
      0% {
        transform: scale(0.7);
@@ -2452,13 +2446,13 @@ export default {
    .align--center{
      text-align: center;
    }
-}
-.project-topology-tool {
+  }
+  .project-topology-tool {
    display: inline-flex;
    height: 30px;
-}
+  }

-.el-dropdown-title {
+  .el-dropdown-title {
    background: #FFFFFF;
    border: 1px solid $--primary-border-color;
    border-radius: 2px;
@@ -2470,12 +2464,10 @@ export default {
    .icon-cube {
      margin-left: 15px;
    }
-}
+  }

-.project-box {
+  .project-box {
    width: 100%;
-  height: calc(100% - 20px);
-  margin-top: 10px;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
@@ -2499,18 +2491,22 @@ export default {
      left: 10px;
      bottom: 10px;
    }
-}
+  }

-.page {
+  .page {
    display: flex;
+    height: calc(100% - 1px);
+    width: 100%;
+/*
    height: calc(100% - 65px);
    width: calc(100% - 10px);
    margin: 5px;
+*/
    position: relative;

    .tools {
      width: 300px;
-    height: 100%;
+      height: calc(100% - 1px);
      border: none;
      position: absolute;
      z-index: 1 !important;
@@ -2539,49 +2535,49 @@ export default {
      box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09);
      border-radius: 0px;
    }
-}
-.overview-page{
+  }
+  .overview-page{
    height: 100%;
-}
-.special-select svg {
+  }
+  .special-select svg {
    width: 75px;
    height: 30px;
-}
+  }

-.special-select .el-select.el-select--small {
+  .special-select .el-select.el-select--small {
    width: 100%;
-}
+  }

-.special-select /deep/ .el-select-dropdown {
+  .special-select /deep/ .el-select-dropdown {
    width: 130px !important;

    .el-select-dropdown__item {
      padding: 0 0 0 10px;
    }
-}
+  }

-.special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
+  .special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
    border: 1px solid #DCDFE6;
    height: 28px;
-}
+  }

-.special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
+  .special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
    display: none;
-}
+  }

-.special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
+  .special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
    height: 28px;
    line-height: 28px;
    color: #899FB7;
    width: 100%;
-}
+  }

-.special-select /deep/ .el-input__prefix > div {
+  .special-select /deep/ .el-input__prefix > div {
    width: 100%;
    height: 100%;
-}
+  }

-.upload-pic-row{
+  .upload-pic-row{
    width: 420px;
    margin-bottom: 10px;
    .upload-pic-label{
@@ -2600,8 +2596,8 @@ export default {
        width: 100%;
      }
    }
-}
-.upload-pic-box{
+  }
+  .upload-pic-box{
    width: 284px;
    height: 30px;
    text-align: center;
@@ -2613,8 +2609,8 @@ export default {
    .el-icon-plus{
      color: #FA901C;
    }
-}
-.top-tool-btn{
+  }
+  .top-tool-btn{
    height: 32px;
    width: 32px;
    border: 1px solid $--primary-border-color;
@@ -2624,15 +2620,36 @@ export default {
    -webkit-transition: background-color linear .1s;
    transition: background-color linear .1s;
    padding: 0;
-}
-.top-tool-btn:hover{
+  }
+  .top-tool-btn:hover{
    background-color: #fff;
-}
-.top-tool-btn:focus{
+  }
+  .top-tool-btn:focus{
    background-color: #fff;
    border-color: #FBCEA4;
-}
-.top-tool-btn:focus .nz-icon{
+  }
+  .top-tool-btn:focus .nz-icon{
    color: #FBCEA4;
-}
+  }
+  .right-bottom-zoom{
+    position: absolute;
+    bottom: 30px;
+    right: 40px;
+    height: 90px;
+    width: 35px;
+    border: 1px solid #E7EAED;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+    .zoom-option{
+      width: 100%;
+      height: 50%;
+      opacity: 0.42;
+      background: #FFF;
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+    .zoom-option:hover{
+      cursor: pointer;
+    }
+  }
 </style>
--- a/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
@@ -851,7 +851,7 @@ export default {
    width: 37.5%;
    margin-right: 2%;
    background: #FFFFFF;
-    border: 1px solid #E7EAED;
+    border: 1px solid $--right-box-border-color;
    border-radius: 2px;
    position: relative;
  }
@@ -875,7 +875,7 @@ export default {

    width: 100%;
    background: #FFFFFF;
-    border: 1px solid #E7EAED;
+    border: 1px solid $--right-box-border-color;
    border-radius: 2px;
  }
  /* end--table*/
@@ -884,7 +884,7 @@ export default {
  .search-box{
    width: calc(100% - 10px);
    padding: 10px 5px;
-    border-bottom: 1px solid #E7EAED;
+    border-bottom: 1px solid $--right-box-border-color;
    display: flex;
  }
  /deep/ .new-search .search-input-all{
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -5,7 +5,7 @@
      <!-- 顶部工具栏 -->
      <div class="main-modal"></div>
      <div class="main-container">
-        <div v-show="bottomBox.mainResizeShow" class="top-tools">
+        <div v-show="bottomBox.mainResizeShow" :style="from === fromRoute.project ? 'padding-right: 5px' : ''" class="top-tools">
          <div class="top-tool-left" style="min-width: 300px">
            <slot name="top-tool-left"></slot>
          </div>
@@ -25,10 +25,10 @@
        <div v-if="showLayout.indexOf('clickSearch') > -1" class="search-box">
          <slot name="search"></slot>
        </div>
-        <div v-show="bottomBox.mainResizeShow" class="nz-table2">
+        <div v-show="bottomBox.mainResizeShow" :style="from === fromRoute.project ? 'padding-right: 5px' : ''" class="nz-table2">
          <slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
        </div>
-        <div v-show="bottomBox.mainResizeShow" class="pagination-bottom">
+        <div v-show="bottomBox.mainResizeShow" :style="from === fromRoute.project ? 'width: calc(100% - 15px);bottom: 18px' : ''" class="pagination-bottom">
          <slot name="pagination"></slot>
        </div>
      </div>
@@ -62,6 +62,7 @@
 </template>

 <script>
+import { fromRoute } from '@/components/common/js/constants'
 import bottomBox from '@/components/common/bottomBox/bottomBox'
 import { bottomBoxWindow } from '@/components/common/js/tools'

@@ -91,6 +92,7 @@ export default {
  },
  data () {
    return {
+      fromRoute: fromRoute,
      /* 二级页面相关 */
      bottomBox: {
        object: {},
--- a/nezha-fronted/src/components/common/table/settings/operationLogTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/operationLogTable.vue
@@ -126,9 +126,6 @@ export default {
        return '-'
      }
    }
-  },
-  mounted () {
-    console.info(this.customTableTitle)
  }
 }
 </script>
--- a/nezha-fronted/src/components/common/table/settings/projectTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/projectTable.vue
@@ -4,6 +4,7 @@
    ref="dataTable"
    :data="tableData"
    :height="height"
+    style="width: calc(100% - 25px)"
    border
    @header-dragend="dragend"
    @sort-change="tableDataSort"
--- a/nezha-fronted/src/components/page/monitor/project/project.vue
+++ b/nezha-fronted/src/components/page/monitor/project/project.vue
@@ -549,13 +549,6 @@ export default {
        }
      }
    },
-    getUserData () {
-      this.$get('sys/user/list').then(response => {
-        if (response.code === 200) {
-          this.userData = response.data.list
-        }
-      })
-    },
    // 刷新拓扑图
    visNetworkReload () {
      this.$refs.facade.$refs.visNetwork.reload()
@@ -617,7 +610,6 @@ export default {
    if (pageSize) {
      this.endpointPageObj.pageSize = pageSize
    }
-    this.getUserData()
  },
  mounted () {
    // 初始化表头
--- a/nezha-fronted/src/components/page/monitor/project/projectList.vue
+++ b/nezha-fronted/src/components/page/monitor/project/projectList.vue
@@ -23,9 +23,10 @@
          v-loading="slotProps.loading"
          :api="url"
          :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
+          :height="projectTableHeight"
          :table-data="tableData"
          :tableId="tableId"
+          style="padding-right: 0"
          @del="del"
          @edit="edit"
          @orderBy="tableDataSort"
@@ -35,7 +36,8 @@
      </template>
      <template v-slot:pagination>
        <div class="project-page">
-          <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+          <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" style="width: calc(100% - 15px);padding-bottom: 6px;" @pageNo='pageNo'
+                      @pageSize='pageSize'></Pagination>
        </div>
      </template>
    </nz-data-list>
@@ -68,6 +70,7 @@ export default {
        name: '',
        remark: ''
      },
+      projectTableHeight: 'calc(100% - 58px)',
      tableId: 'projectTable',
      queryPermission: 'account_view',
      searchMsg: { // 给搜索框子组件传递的信息
@@ -140,8 +143,8 @@ export default {
 <style lang="scss">
  .project-list{
    .project-page{
-      margin: 0 10px 0 20px;
-      border: 1px solid #eeeeee;
+      margin: 0 0 0 20px;
+      border: 1px solid $--right-box-border-color;
      border-top: none;
      /deep/ .pagination{
        padding-top: 0;