CN-1551 feat: element-plus升级后样式调整

src/assets/css/common/table-common.scss

@@ -46,19 +46,40 @@
 
     }
     .top-tool-search {
-     .top-tool-btn {
+      .top-tool-btn {
-       border-left: none;
+        border-left: none;
-     }
+      }
-     .top-tool-btn--search:hover {
+      .top-tool-btn--search {
-       border-left: none !important;
+        width: 28px !important;
-     }
+        height:28px !important;
-     .top-tool-btn--search:focus {
+        padding:unset !important;
-       border-left: none !important;
+        display: flex;
-     }
+        align-items: center;
+        justify-content: center;
+        i {
+          font-size: 14px;
+          color: $--text-color-2;
+          margin-right:unset !important;
+        }
+      }
+      .top-tool-btn--search:hover {
+        border-left: none !important;
+      }
+      .top-tool-btn--search:focus {
+        border-left: none !important;
+      }
       .el-input--small .el-input__wrapper {
         height: 28px !important;
         border-radius: 2px 0 0 2px !important;
       }
+      .el-input--small{
+        width: 214px !important;
+        line-height: 27px;
+      }
+      .el-input--small .el-input__inner {
+        height: 28px;
+        border-radius: 2px 0 0 2px;
+      }
     }
 
     .top-tool-right {
@@ -92,7 +113,6 @@
       transition: background-color linear .1s;
       font-size:12px;
       font-weight: 500;
-      font-family: NotoSansHans-Medium !important;
       i {
         font-size: 14px;
         color: #575757;
@@ -167,10 +187,10 @@
     }
 
     .btn-customize {
-      color:$blue;
+      color: #2E88A6;
       font-size: 12px;
       .icon-gear{
-        color:#2C72C6;
+        color: #2E88A6;
         width:12px;
         height:12px;
         margin-right:2px;
@@ -188,7 +208,31 @@
       min-width: 36px;
     }
   }
+
   .cn-table {
+    padding: 0 20px;
+    height: calc(100% - 48px);
+
+    .el-table:not(.chart-table) {
+      height: calc(100% - 58px);
+      width: calc(100% - 2px); // 防止出现横向滚动条
+      border: 1px solid var(--el-table-border-color);
+      border-bottom: none;
+
+      thead {
+        color: #333;
+      }
+      .el-switch {
+        height: auto;
+        --el-switch-on-color: #38ACD2;
+        --el-switch-off-color: #C0CEDB;
+      }
+      .el-checkbox__input {
+        --el-checkbox-checked-bg-color: #38ACD2;
+      }
+    }
+  }
+  /*.cn-table {
     position: relative;
     padding: 0 20px;
     width: 100%;
@@ -306,7 +350,7 @@
       }
     }
   }
-  /* start--覆盖el-table边框、gutter等样式 */
+  !* start--覆盖el-table边框、gutter等样式 *!
   .el-table__body-wrapper, .el-table__fixed-body-wrapper {
     box-shadow: 1px 0 $--right-box-border-color;
 
@@ -321,8 +365,8 @@
     .el-table--border td {
       border-right: none !important;
     }
-    /* 最后一列用box-shadow模拟边框 */
+    !* 最后一列用box-shadow模拟边框 *!
-    /*.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
+    !*.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
       box-shadow: 1px 0 $--right-box-border-color;
     }
     .el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
@@ -341,7 +385,7 @@
       th:last-of-type {
         border-right: none !important;
       }
-    }*/
+    }*!
     .el-table--border:not(.chart-table)::after, .el-table--group:not(.chart-table)::after {
       // width: 0;
     }
@@ -355,7 +399,7 @@
         height: 0;
       }
     }
-  }
+  }*/
   /* end--覆盖el-table边框、gutter等样式 */
   .cn-pagination{
     position: absolute;

src/assets/css/components/components/advancedSearch/advanced-search.scss

@@ -1,82 +0,0 @@
-.advanced-search {
-  width: 100%;
-  height: 100%;
-  max-height: 66px;
-
-  .el-input__suffix {
-    right: 0;
-  }
-  &.advanced-search--show-list {
-    max-height: 40px;
-
-    .el-input__inner {
-      padding-right: 0;
-      border: none;
-    }
-  }
-  .el-input__inner {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    border: 1px solid #CECECE;
-    border-radius: 2px;
-    padding-right: 10px;
-  }
-  .search__suffixes, .search__suffixes--show-list {
-    display: flex;
-    height: 100%;
-
-    .search__suffix {
-      cursor: pointer;
-    }
-  }
-  .search__suffixes {
-    justify-content: space-evenly;
-    width: 100px;
-
-    .search__suffix {
-      display: flex;
-      align-items: center;
-
-      .cn-icon-search-advance {
-        color: #A6AAAE;
-        font-size: 20px;
-      }
-      .cn-icon-filter {
-        color: #A6AAAE;
-        font-size: 20px;
-      }
-      .el-icon-search {
-        color: #3976CB;
-        font-size: 32px;
-      }
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-  .search__suffixes--show-list {
-    .search__suffix {
-      padding: 0 12px;
-
-      &:last-of-type {
-        background-color: $--color-primary;
-        border-radius: 0 2px 2px 0;
-      }
-      .cn-icon-search-advance {
-        color: #A6AAAE;
-        font-size: 14px;
-      }
-      .cn-icon-filter {
-        color: #A6AAAE;
-        font-size: 14px;
-      }
-      .el-icon-search {
-        color: white;
-        font-size: 16px;
-      }
-    }
-  }
-
-}

src/assets/css/components/components/advancedSearch/advanced-search2.scss

@@ -73,6 +73,34 @@
       background: #fff;
     }
   }
+  .HintInfo {
+    height: 280px;
+    overflow: auto;
+    background: #fff;
+
+    ul {
+      min-width: 300px;
+      height:auto;
+      width: fit-content;
+      box-sizing: border-box;
+      padding-bottom: 10px;
+    }
+    .relative-item {
+      text-indent: 1em;
+      font-size: 14px !important;
+      color: #575757;
+      height: 24px;
+      line-height: 24px !important;
+
+      &:hover {
+        background-color: #f0f5fa;
+        color: #046ECA;
+      }
+    }
+    .hint-clear {
+      text-indent: 1em;
+    }
+  }
 }
 .detections {
   .tag-search, .CodeMirror {

src/assets/css/components/components/table/common.scss

@@ -66,48 +66,9 @@
     }
   }
 }
-.unshow {
-  display: none;
-}
 
-.list-page .top-tools .top-tool-btn {
+// 自定义列
-  height: 33px;
+.drag-list {
-  width: 36px;
-  border: 1px solid #DEDEDE;
-  outline: none;
-  border-radius: 2px;
-  background-color: #F9F9F9;
-  transition: background-color linear .1s;
-  padding-left:10px;
-}
-
-
-.list-page .top-tools .top-tool-btn--search{
-  width:28px !important;
-  height:28px !important;
-  padding:unset !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  i {
-    font-size: 14px;
-    color: $--text-color-2;
-    margin-right:unset !important;
-  }
-}
-
-.list-page {
-  .el-input--small{
-    width: 214px !important;
-    line-height: 27px;
-  }
-  .el-input--small .el-input__inner {
-    height: 28px;
-    border-radius: 2px 0px 0px 2px;
-  }
-}
-
-.list {
   list-style: none;
   padding-inline-start: 0 !important;
   max-height: 358px !important;

src/assets/css/components/views/administration/AdministrationTabs.scss

@@ -3,11 +3,13 @@
     height: 18px;
   }
   .administration-container {
-    height: calc(100% - 26px);
+    height: calc(100% - 86px);
     flex-direction: column;
+    overflow: hidden;
+
     .list-page {
       .main-container {
-        padding: 0px;
+        padding: 0;
         .cn-pagination {
           height: 34px;
         }

src/assets/css/components/views/charts2/networkOverviewTabs.scss

@@ -80,9 +80,13 @@
         border: 1px solid #E2E5EC;
         border-radius: 4px 4px 0 0;
         padding: 1px;
+
         .data-click:hover{
           cursor: pointer;
         }
+        .el-table__inner-wrapper {
+          width: calc(100% + 2px);
+        }
         .el-table__header {
           width:100% !important;
         }
@@ -129,6 +133,9 @@
         .data-click:hover{
           cursor: pointer;
         }
+        .el-table__inner-wrapper {
+          width: calc(100% + 2px);
+        }
         .el-table__header {
           width:100% !important;
         }
@@ -380,10 +387,10 @@
     margin-bottom: 0px !important;
   }
   .el-tabs__item{
-    width:50%;
+    width: 50%;
-    text-align:center;
+    text-align: center;
-    padding:0px;
+    padding: 0;
-    height:30px;
+    height: 30px;
     line-height: 30px;
     font-size: 12px;
     color: #353636;
@@ -400,68 +407,13 @@
     border-left: 1px #E2E5EC solid !important;
   }
   .el-tabs--card > .el-tabs__header .el-tabs__item{
-    border-bottom: 0px ;
+    border-bottom: 0;
     border-top: 3px solid white;
     color: #353636;
   }
   .el-tabs--card > .el-tabs__header .el-tabs__nav {
-    border:0px ;
+    border: 0;
   }
-
-  .list {
-    list-style: none;
-    padding-inline-start: 0px !important;
-    /*height:375px;*/
-    max-height: 358px !important;
-    overflow:auto;
-    margin:0 0;
-    .drag-move {
-      transition: transform 0.3s;
-    }
-
-    .list-item:last-child {
-      margin-bottom: 6px;
-    }
-    .list-item {
-      width:100%;
-      color: #575757;
-      margin-bottom: 0px;
-      height: 24px;
-      line-height: 24px;
-      text-align: left;
-      font-weight:400;
-      font-size:12px;
-
-      .icon-drag{
-        cursor: move;
-        margin-left:6px;
-        margin-right:3px;
-      }
-
-      .el-checkbox__input.is-checked .el-checkbox__inner {
-        width: 14px;
-        height: 14px;
-        background-color: #38ACD2;
-        border-color: #38ACD2;
-        border-radius: 2px;
-      }
-      .el-checkbox__input .el-checkbox__inner {
-        width: 14px;
-        height: 14px;
-        background-color: #F2F7F9;
-        border: 1px solid rgba(0,0,0,0.15);
-        border-radius: 2px;
-      }
-      .el-checkbox__input.is-checked + .el-checkbox__label,.el-checkbox__input + .el-checkbox__label {
-        font-size: 12px;
-        color: #575757;
-        font-weight: 400;
-      }
-    }
-  }
-  /*top:0px !important;
-  right:200px !important;
-  transform: translateY(126px) !important;*/
 }
 .fixed-row {
   display:flex;

src/assets/css/components/views/setting/knowledgeBase.scss

@@ -677,57 +677,43 @@
       }
       .list-mode__row {
         width: 100%;
-        height:calc(100% - 102px);
+        height: calc(100% - 80px);
-        margin-bottom:0px;
+        margin-bottom: 0;
-        padding-bottom:30px;
+
-        .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
-          border-color: #38ACD2;
-          background: #38ACD2;
-          border-radius: 2px;
-        }
-        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-          background-color: #38ACD2;
-          border-color: #38ACD2;
-        }
-        .el-table--border {
-          border: 1px solid rgba(226,229,236,1);
-          border-radius: 4px;
-          border-bottom:none;
-        }
-        .el-table--border th ,.el-table--border td {
-          border-right: none;
-        }
         .el-table {
-          &::after {
+          height: 100%;
-            width: 0;
+          width: calc(100% - 2px); // 防止出现横向滚动条
-          }
+          border: 1px solid var(--el-table-border-color);
+          border-bottom: none;
+
           th {
-            padding-top:6px;
+            padding-top: 6px;
-            padding-bottom:6px;
+            padding-bottom: 6px;
-            font-size:12px;
+            font-size: 12px;
-            line-height:12px;
+            line-height: 12px;
-            color: #353636;
+            color: #333;
             font-weight: 500;
           }
           td {
-            padding-top:8px;
+            padding-top: 8px;
-            padding-bottom:8px;
+            padding-bottom: 8px;
-            font-size:12px;
+            font-size: 12px;
-            line-height:12px;
+            line-height: 12px;
             color: #353636;
             font-weight: 400;
           }
           .cell {
             height: fit-content;
-            /*max-height:64px;
-            min-height:32px;*/
             line-height: 20px;
+
             .reference-tag__show {
               display: flex;
               flex-direction: row;
+
               .reference-tag__group {
                 display: flex;
                 flex-direction: column;
+
                 .reference-tag {
                   display: inline-block;
                   padding: 0 10px;
@@ -737,19 +723,27 @@
                   border-radius: 12px;
                   margin-bottom: 8px;
                   width: fit-content;
-                  min-width:fit-content;
+                  min-width: fit-content;
                 }
                 .reference-tag:last-of-type {
-                  margin-bottom:0px !important;
+                  margin-bottom: 0 !important;
-                  margin-right:6px;
+                  margin-right: 6px;
                 }
               }
               .reference-more {
-                display:flex;
+                display: flex;
-                flex-direction:column-reverse;
+                flex-direction: column-reverse;
               }
             }
           }
+          .el-switch {
+            height: auto;
+            --el-switch-on-color: #38ACD2;
+            --el-switch-off-color: #C0CEDB;
+          }
+          .el-checkbox__input {
+            --el-checkbox-checked-bg-color: #38ACD2;
+          }
         }
       }
       .list-mode__card {
@@ -958,10 +952,15 @@
         }
       }
       .knowledge-pagination {
-        height:56px;
+        position: relative;
-        width:100%;
+        height: 56px;
+        width: 100%;
         background: #FFFFFF;
-        box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.07);
+
+        .el-pagination {
+          position: absolute;
+          bottom: 4px;
+        }
       }
     }
   }

src/assets/css/main.scss

@@ -1,12 +1,12 @@
-@font-face { // 由于主题嵌套原因，原ele的icon图标字体加载会出错，需重写
+/*@font-face { // 由于主题嵌套原因，原ele的icon图标字体加载会出错，需重写
   font-family: 'element-icons';
-  src: url('~@/assets/css/themes/src/fonts/element-icons.woff') format('woff'), /* chrome, firefox */
+  src: url('~@/assets/css/themes/src/fonts/element-icons.woff') format('woff'), !* chrome, firefox *!
-  url('~@/assets/css/themes/src/fonts/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('~@/assets/css/themes/src/fonts/element-icons.ttf') format('truetype'); !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!
   font-weight: normal;
   font-display: auto;
   font-style: normal;
 }
-$--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语句出错
+$--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语句出错*/
 
 @font-face {
   font-family: 'NotoSansSChineseRegular';

src/components/advancedSearch/showhint/Hint/HintInfo.vue

@@ -100,28 +100,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-  .HintInfo {
-    height: 280px;
-    overflow: auto;
-    background: #fff;
-  }
-  ul {
-    min-width: 300px;
-    height:auto;
-    width: fit-content;
-    box-sizing: border-box;
-    padding-bottom: 10px;
-  }
-  .el-dropdown-menu__item{
-    text-indent: 1em;
-    font-size: 12px !important;
-    font-family: NotoSansSChineseRegular;
-    color: #575757;
-    font-weight: 400;
-  }
-  .hint-clear{
-    text-indent: 1em;
-  }
-</style>

src/components/table/ColumnCustomize.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pop-custom" v-ele-click-outside="esc">
-    <transition-group name="dragTabs" class="list" tag="ul" ref="tabs">
+    <transition-group name="dragTabs" class="drag-list" tag="ul" ref="tabs">
       <li v-for="(item, index) in custom"
           :key="item.label"
           class="list-item"

src/components/table/administration/ChartTable.vue

@@ -1,165 +0,0 @@
-<template>
-  <el-table
-          id="chartTable"
-          ref="dataTable"
-          :data="tableData"
-          border
-          empty-text=" "
-          @header-dragend="dragend"
-          @sort-change="tableDataSort"
-          @selection-change="selectionChange"
-  >
-    <el-table-column
-            :resizable="false"
-            align="center"
-            type="selection"
-            width="55">
-    </el-table-column>
-    <el-table-column
-            v-for="item in customTableTitles"
-            :key="item.prop"
-            :fixed="item.fixed"
-            :label="item.label"
-            :min-width="`${item.minWidth}`"
-            :prop="item.prop"
-            :resizable="true"
-            :sort-orders="['ascending', 'descending']"
-            :sortable="item.sortable"
-            :width="`${item.width}`"
-            class="data-column"
-    >
-      <template #header>
-        <span class="data-column__span">{{item.label}}</span>
-        <div class="col-resize-area"></div>
-      </template>
-      <template  #default="scope" :column="item">
-        <template v-if="item.prop === 'name'">
-          <template v-if="scope.row.i18n">
-            <span>{{$t(scope.row.i18n)}}</span>
-          </template>
-          <template v-else-if="scope.row.name">
-            <span>{{scope.row.name}}</span>
-          </template>
-          <template v-else>
-            <span>-</span>
-          </template>
-        </template>
-        <template v-else-if="item.prop === 'buildIn'">
-          <template v-if="scope.row[item.prop]==1">
-            {{$t('config.chart.buildIn.yes')}}
-          </template>
-          <template v-else-if="scope.row[item.prop]==0">
-             {{$t('config.chart.buildIn.no')}}
-          </template>
-          <template v-else>
-            {{scope.row[item.prop]}}
-          </template>
-        </template>
-        <template v-else-if="item.prop === 'panelId'">
-          <template v-if="scope.row[item.prop]==panelTypeAndRouteMapping.trafficSummary">
-            {{$t('trafficSummary.trafficSummary')}}
-          </template>
-          <template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.networkAppPerformance">
-             {{$t('networkAppPerformance.networkAppPerformance')}}
-          </template>
-          <template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.dnsServiceInsights">
-            {{$t('dnsServiceInsights.dnsServiceInsights')}}
-          </template>
-          <template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.ipEntityDetail">
-            {{$t('entities.ipEntityDetail')}}
-          </template>
-          <template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.domainEntityDetail">
-            {{$t('entities.domainEntityDetail')}}
-          </template>
-          <template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.appEntityDetail">
-            {{$t('entities.appEntityDetail')}}
-          </template>
-          <template v-else>
-            {{scope.row[item.prop]}}
-          </template>
-        </template>
-        <span v-else>{{scope.row[item.prop]}}</span>
-      </template>
-    </el-table-column>
-    <template v-slot:empty >
-      <div class="table-no-data" v-if="isNoData">
-        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
-      </div>
-    </template>
-  </el-table>
-</template>
-
-<script>
-import table from '@/mixins/table'
-import { panelTypeAndRouteMapping } from '@/utils/constants'
-
-export default {
-  name: 'chartTable',
-  mixins: [table],
-  props: {
-    isNoData: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      panelTypeAndRouteMapping: panelTypeAndRouteMapping,
-      tableTitle: [ // 原table列
-
-        {
-          label: 'ID',
-          prop: 'id',
-          show: true,
-          width: 110,
-          sortable: 'custom'
-        }, {
-          label: this.$t('config.chart.name'),
-          prop: 'name',
-          show: true
-        }, {
-          label: this.$t('config.chart.params'),
-          prop: 'params',
-          show: true
-        }, {
-          label: this.$t('config.chart.panel'),
-          prop: 'panelId',
-          show: true
-        }, {
-          label: this.$t('config.chart.i18n'),
-          prop: 'i18n',
-          show: true
-        }, {
-          label: this.$t('config.chart.type'),
-          prop: 'type',
-          show: true
-        }, {
-          label: this.$t('config.chart.x'),
-          prop: 'x',
-          show: true
-        }, {
-          label: this.$t('config.chart.y'),
-          prop: 'y',
-          show: true
-        }, {
-          label: this.$t('config.chart.w'),
-          prop: 'w',
-          show: true
-        }, {
-          label: this.$t('config.chart.h'),
-          prop: 'h',
-          show: true
-        }, {
-          label: this.$t('config.chart.buildIn'),
-          prop: 'buildIn',
-          show: true
-        }, {
-          label: this.$t('config.chart.remark'),
-          prop: 'remark',
-          show: true
-        }
-      ]
-    }
-  }
-}
-</script>

src/components/table/administration/GalaxyProxyTable.vue

@@ -1,198 +0,0 @@
-<template>
-  <el-table
-    class="galaxy-proxy-table"
-    id="userTable"
-    ref="dataTable"
-    :data="tableData"
-    tooltip-effect="light"
-    border
-    empty-text=" "
-    @header-dragend="dragend"
-    @sort-change="tableDataSort"
-    @selection-change="selectionChange"
-  >
-    <el-table-column
-      :resizable="false"
-      align="center"
-      type="selection"
-      width="55">
-    </el-table-column>
-    <el-table-column
-      v-for="item in customTableTitles"
-      :key="item.prop"
-      :fixed="item.fixed"
-      :label="item.label"
-      :min-width="`${item.minWidth}`"
-      :prop="item.prop"
-      :resizable="true"
-      :sort-orders="['ascending', 'descending']"
-      :sortable="item.sortable"
-      :width="`${item.width}`"
-      :show-overflow-tooltip="['targetParam', 'targetHeader', 'preHandle', 'postHandle'].indexOf(item.prop) === -1"
-    >
-      <template #header>
-        <span class="data-column__span">{{item.label}}</span>
-        <div class="col-resize-area"></div>
-      </template>
-      <template #default="scope" :column="item">
-        <template v-if="item.prop === 'targetParam' || item.prop === 'targetHeader'">
-          <template v-if="scope.row[item.prop]">
-            <el-popover
-                width="250px"
-                popper-class="js-code-highlight"
-                placement="left"
-                trigger="hover"
-            >
-              <template #reference>
-                <span style="color: #41ABFD">{...}</span>
-              </template>
-              <div class="highlight-box">
-                <span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><el-icon><CopyDocument /></el-icon></span>
-                <highlightjs
-                    language="json"
-                    :code="scope.row[item.prop]"
-                />
-              </div>
-            </el-popover>
-          </template>
-          <template v-else>-</template>
-        </template>
-        <template v-else-if="item.prop === 'preHandle' || item.prop === 'postHandle'">
-          <template v-if="scope.row[item.prop]">
-            <el-popover
-                width="250px"
-                popper-class="js-code-highlight"
-                placement="left"
-                trigger="hover"
-            >
-              <template #reference>
-                <span style="color: #41ABFD">{...}</span>
-              </template>
-              <div class="highlight-box">
-                <span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><el-icon><CopyDocument /></el-icon></span>
-                <highlightjs
-                    language="js"
-                    :code="scope.row[item.prop]"
-                />
-              </div>
-            </el-popover>
-          </template>
-          <template v-else>-</template>
-        </template>
-        <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
-      </template>
-    </el-table-column>
-    <el-table-column
-      :resizable="false"
-      :width="operationWidth"
-      fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items">
-          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-            <div class="table-operation-item table-operation-item--more">
-              <i class="cn-icon cn-icon-more-arrow-down"></i>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu >
-                <el-dropdown-item :command="['copy', scope.row]"><i class="cn-icon cn-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-                <el-dropdown-item :command="['debug', scope.row]"><i class="cn-icon cn-icon-debug"></i><span class="operation-dropdown-text">{{$t('overall.debug')}}</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </template>
-    </el-table-column>
-    <template v-slot:empty >
-      <div class="table-no-data" v-if="isNoData">
-        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
-      </div>
-    </template>
-  </el-table>
-</template>
-
-<script>
-import table from '@/mixins/table'
-import { copyValue } from '@/utils/tools'
-
-export default {
-  name: 'galaxyProxyTable',
-  mixins: [table],
-  props: {
-    isNoData: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      tableTitle: [ // 原始table列
-        {
-          label: 'ID',
-          prop: 'id',
-          show: true,
-          width: 100,
-          sortable: 'custom'
-        }, {
-          label: this.$t('overall.name'),
-          prop: 'name',
-          show: true,
-          sortable: 'custom',
-          width: 150
-        }, {
-          label: this.$t('overall.path'),
-          prop: 'path',
-          show: true,
-          width: 150
-        }, {
-          label: this.$t('overall.method'),
-          prop: 'method',
-          show: true,
-          width: 150
-        }, {
-          label: this.$t('overall.version'),
-          prop: 'version',
-          show: true,
-          minWidth: 150
-        }, {
-          label: this.$t('galaxyProxy.targetUrl'),
-          prop: 'targetUrl',
-          show: true,
-          width: 250
-        }, {
-          label: this.$t('galaxyProxy.targetParam'),
-          prop: 'targetParam',
-          show: true,
-          width: 150
-        }, {
-          label: this.$t('galaxyProxy.targetHeader'),
-          prop: 'targetHeader',
-          show: true,
-          width: 150
-        }, {
-          label: 'Pre handle',
-          prop: 'preHandle',
-          show: true,
-          width: 150
-        }, {
-          label: 'Post handle',
-          prop: 'postHandle',
-          show: true,
-          width: 150
-        }, {
-          label: this.$t('overall.remark'),
-          prop: 'remark',
-          show: true
-        }
-      ]
-    }
-  },
-  setup () {
-    return {
-      copyValue
-    }
-  }
-}
-</script>

src/components/table/administration/I18nTable.vue

@@ -3,7 +3,7 @@
       id="i18nTable"
       ref="dataTable"
       :data="tableData"
-      border
+      tooltip-effect="light"
       empty-text=" "
       @header-dragend="dragend"
       @sort-change="tableDataSort"

src/components/table/administration/OperationLogTable.vue

@@ -4,10 +4,7 @@
     ref="dataTable"
     :data="tableData"
     tooltip-effect="light"
-    :height="height"
-    border
     empty-text=" "
-    class="no-operation"
     @header-dragend="dragend"
     @sort-change="tableDataSort"
     @selection-change="selectionChange"

src/components/table/administration/RoleTable.vue

@@ -3,8 +3,7 @@
     id="roleTable"
     ref="dataTable"
     :data="tableData"
-    :height="height"
+    tooltip-effect="light"
-    border
     empty-text=" "
     @header-dragend="dragend"
     @sort-change="tableDataSort"

src/components/table/administration/UserTable.vue

@@ -3,9 +3,8 @@
     id="userTable"
     ref="dataTable"
     :data="tableData"
-    :height="height"
+    tooltip-effect="light"
     empty-text=" "
-    border
     @header-dragend="dragend"
     @sort-change="tableDataSort"
     @selection-change="selectionChange"

src/components/table/setting/KnowledgeBaseTableForRow.vue

@@ -3,8 +3,6 @@
         id="knowledgeBaseTable"
         ref="dataTable"
         :data="tableData"
-        :height="height"
-        border
         empty-text=" "
         @header-dragend="dragend"
         @sort-change="tableDataSort"

src/components/table/system/PluginTable.vue

@@ -3,9 +3,7 @@
     id="pluginTable"
     ref="dataTable"
     :data="tableData"
-    :height="height"
     empty-text=" "
-    border
     class="plugin"
     @header-dragend="dragend"
     @sort-change="tableDataSort"

src/utils/constants.js

@@ -92,7 +92,7 @@ export const operationLogStateMapping = {
 
 export const position = {
   tableHeight: {
-    normal: 'calc(100% - 48px)' // 常规高度，特例在下方定义
+    normal: 'calc(100% - 58px)' // 常规高度，特例在下方定义
   }
 }
 

src/views/administration/OperationLog.vue

@@ -22,8 +22,8 @@
           @orderBy="tableDataSort"
           @reload="getTableData"
           @selectionChange="selectionChange"
-          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
           @search="search"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
       </template>
       <!-- 分页组件 -->
       <template #pagination>

src/views/administration/User.vue

@@ -36,7 +36,6 @@
           :api="url"
           :isNoData="isNoData"
           :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
           :table-data="tableData"
           @delete="del"
           @edit="edit"

src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue

@@ -21,7 +21,6 @@
                   :id="`tabTable_${tabIndex}`"
                   :ref="`dataTable_${tab.prop}`"
                   :data="tableData.slice(0,showRecordNum)"
-                  border
                   :cell-style="tableCellStyle"
                   :header-cell-style="tableHeaderCellStyle"
                   :row-class-name="rowClassName"
@@ -249,7 +248,7 @@
                  type="card"
         >
           <el-tab-pane :label="$t('network.tabs')" name="tabs" width="50%"  v-if="showCustomizeTabs" >
-            <transition-group name="dragTabs" class="list" tag="ul" ref="tabs">
+            <transition-group name="dragTabs" class="drag-list" tag="ul" ref="tabs">
               <li v-for="(item, index) in list"
                   :key="item.label"
                   class="list-item"
@@ -265,7 +264,7 @@
             </transition-group>
           </el-tab-pane>
           <el-tab-pane :label="tableType==='networkOverview'?$t('network.direction'):$t('network.metrics')" name="metrics" width="50%" >
-            <transition-group name="dragMetric" class="list" tag="ul" ref="metric">
+            <transition-group name="dragMetric" class="drag-list" tag="ul" ref="metric">
               <template v-for="(item, index) in customTableTitles"  :key="item.label">
                 <li v-if="index>0"
                     class="list-item"

src/views/setting/KnowledgeBaseUserDefinedList.vue

@@ -44,7 +44,6 @@
           <loading :loading="loading"></loading>
           <knowledge-base-table-for-row
                   ref="dataTable"
-                  height="100%"
                   :api="url"
                   :isNoData="isNoData"
                   :custom-table-title="tools.customTableTitle"