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

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"
-    border
+    tooltip-effect="light"
     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"