CN-1612 feat: 部分css重构内容: system下的plugin

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

@@ -210,11 +210,12 @@
     }
 
     .btn-customize {
-      color: var(--el-color-business-dark-2);
+      color: var(--el-color-primary);
       font-size: 12px;
+      padding: 2px 11px;
 
       .icon-gear {
-        color: var(--el-color-business-dark-2);
+        color: var(--el-color-primary);
         width: 12px;
         height: 12px;
         margin-right: 2px;
@@ -224,6 +225,8 @@
 
     .btn-customize:hover {
       cursor: pointer;
+      background: var(--el-color-primary-light-9);
+      border-radius: 2px;
     }
 
     .top-tool-btn--dropdown {

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

@@ -22,7 +22,7 @@
   }
 
   .el-pagination .btn-prev {
-    background-color: var(--el-bg-color-page) !important;
+    background-color: var(--el-fill-color-blank) !important;
   }
 
   .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
@@ -32,7 +32,7 @@
   }
 
   .btn-next, .btn-prev {
-    background-color: var(--el-bg-color-page) !important;
+    background-color: var(--el-fill-color-blank) !important;
   }
 
   .el-pager li.is-active {

src/assets/css/components/views/system/Plugin.scss

@@ -1,64 +1,76 @@
-.plugin-management .list-page {
-  .cn-table {
-    height: 100%;
-    .el-table {
+.plugin-management {
+  .list-page {
+    .cn-table {
       height: 100%;
-    }
-    .el-table--group::after,.el-table--border::after, .el-table::before {
-      height: 0;
-    }
-  }
-  .cn-pagination {
-    display: none;
-  }
-}
-.plugin {
-  font-size: 12px;
-  color: #353636;
-  line-height: 14px;
-  font-weight: 400;
-  .type-tag {
-    display: inline-block;
-    padding: 0 10px;
-    background-color: #EBF7FA;
-    color: #046ECA;
-    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
-    border-radius: 12px;
-    margin-right:10px;
-  }
-  .plugin-name {
-    display: flex;
-    flex-direction: row;
-    justify-content: left;
-    align-items: center;
-    .icon-background {
-      display:flex;
-      justify-content: center;
-      align-items: center;
-      width:32px;
-      height:32px;
-      background: #ECECEC;
-      border-radius: 4px;
-      margin-right:6px;
-      .plugin-name-icon {
-        width:25px;
-        height:25px;
-        color:red;
-        display:flex;
-        justify-content: center;
-        align-items: center;
+
+      .el-table {
+        height: 100%;
+      }
+
+      .el-table--group::after, .el-table--border::after, .el-table::before {
+        height: 0;
       }
     }
+
+    .cn-pagination {
+      display: none;
+    }
   }
-  .two-line {
-    overflow: hidden; //超出的文本隐藏
-    text-overflow: ellipsis; //溢出用省略号显示
-    display: -webkit-box;
-    line-clamp:2 ;
-    -webkit-line-clamp: 2; // 超出多少行
-    -webkit-box-orient: vertical;
-  }
-  .cn-table .el-table:not(.chart-table) td {
-    padding: 8px 0 !important;
+
+  .plugin {
+    font-size: 12px;
+    color: var(--el-text-color-primary);
+    line-height: 14px;
+    font-weight: 400;
+
+    .type-tag {
+      display: inline-block;
+      padding: 0 10px;
+      background-color: var(--el-color-primary-light-9);
+      color: var(--el-color-primary);
+      box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
+      border-radius: 12px;
+      margin-right: 10px;
+    }
+
+    .plugin-name {
+      display: flex;
+      flex-direction: row;
+      justify-content: left;
+      align-items: center;
+
+      .icon-background {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 32px;
+        height: 32px;
+        background: var(--el-color-info-light-8);
+        border-radius: 4px;
+        margin-right: 6px;
+
+        .plugin-name-icon {
+          width: 25px;
+          height: 25px;
+          color: var(--el-color-danger);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+
+    .two-line {
+      overflow: hidden; //超出的文本隐藏
+      text-overflow: ellipsis; //溢出用省略号显示
+      display: -webkit-box;
+      line-clamp: 2;
+      -webkit-line-clamp: 2; // 超出多少行
+      -webkit-box-orient: vertical;
+    }
+
+    .cn-table .el-table:not(.chart-table) td {
+      padding: 8px 0 !important;
+    }
   }
 }

src/views/detections/detectionPolicies/Index.vue

@@ -50,7 +50,7 @@
       v-model="showConfirmDialog"
       :title="$t('overall.hint')"
       width="480px"
-      custom-class="del-model-hint"
+      class="del-model-hint"
       :before-close="handleClose">
     <div class="dialog-message">{{ $t('knowledge.deleteDataHint') }}</div>
     <el-table v-model="delItemList"

src/views/system/Index.vue

@@ -4,7 +4,7 @@
     <div class="explorer-top-tools explorer-detection-top-tools">
       <div class="explorer-top-tools-title">{{$t('overall.system')}}</div>
     </div>
-    <div style="width: 100%;padding-bottom: 26px;">
+    <div class="administration__tabs">
       <chart-tabs :data="tabsData" router></chart-tabs>
     </div>
     <!-- 内容区 -->

src/views/system/Plugin.vue

@@ -1,28 +1,28 @@
 <template>
-  <div style="height: 100%;" class="plugin-management">
+  <div class="plugin-management">
     <cn-data-list
-            ref="dataList"
-            :tableId="tableId"
-            v-model:custom-table-title="tools.customTableTitle"
-            :api="url"
-            :from="fromRoute.plugin"
-            :layout="['columnCustomize']"
-            @search="search"
+        ref="dataList"
+        :tableId="tableId"
+        v-model:custom-table-title="tools.customTableTitle"
+        :api="url"
+        :from="fromRoute.plugin"
+        :layout="['columnCustomize']"
+        @search="search"
     >
       <template #default>
         <loading :loading="loading"></loading>
         <plugin-table
-                ref="dataTable"
-                :api="url"
-                :isNoData="isNoData"
-                :custom-table-title="tools.customTableTitle"
-                :height="mainTableHeight"
-                :table-data="tableData"
-                @delete="del"
-                @edit="edit"
-                @orderBy="tableDataSort"
-                @reload="getTableData"
-                @selectionChange="selectionChange"
+            ref="dataTable"
+            :api="url"
+            :isNoData="isNoData"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            @delete="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
         />
       </template>
       <template #pagination>
@@ -71,7 +71,11 @@ export default {
         this.searchLabel = { ...this.searchLabel, ...params }
       }
       // this.searchLabel = { ...this.searchLabel, ...this.pageObj }
-      this.searchLabel = { ...this.searchLabel, jobGroup: 3, pageSize: -1 }
+      this.searchLabel = {
+        ...this.searchLabel,
+        jobGroup: 3,
+        pageSize: -1
+      }
       this.isNoData = false
       this.toggleLoading(true)
       delete this.searchLabel.total
@@ -87,7 +91,7 @@ export default {
             response.data.data.list[i].triggerStatus = response.data.data.list[i].triggerStatus + ''
             const basicInfo = pluginBasicInfo.find(plugin => plugin.id === response.data.data.list[i].id)
             if (basicInfo) {
-              filterDataList.push(Object.assign({},basicInfo,response.data.data.list[i]))
+              filterDataList.push(Object.assign({}, basicInfo, response.data.data.list[i]))
             }
           }
           this.tableData = filterDataList