CN-1551 feat: 升级element-ui版本的样式修改

src/assets/css/common/cover-element-plus.scss

@@ -8,10 +8,10 @@
 }
 
 .el-table--border::before, .el-table__border-left-patch {
-  //width: 0 !important;
+  width: 0 !important;
 }
 .el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
-  //height: 0 !important;
+  height: 0 !important;
 }
 
 .el-popper.is-pure {
@@ -66,3 +66,25 @@
 .el-popover.el-popper {
   padding: 0 !important;
 }
+.my-header-cell-class .el-checkbox__input{
+  display: none;
+}
+.el-dialog {
+  padding: 0 !important;
+}
+.el-switch.is-checked .el-switch__core {
+  background-color: $--color-primary !important;
+}
+.el-date-table td.end-date .el-date-table-cell__text, .el-date-table td.start-date .el-date-table-cell__text {
+  background-color: $--color-primary !important;
+}
+.el-date-table td.available:hover {
+  color: $--color-primary !important;
+}
+.el-picker__popper.el-popper {
+  margin-top: 8px;
+}
+//.el-button:hover {
+//  color: $--color-primary !important;
+//  border-color: $--color-primary !important;
+//}

src/assets/css/common/right-box-common.scss

@@ -64,6 +64,9 @@
           }
         }
       }
+    }
+    .container__form {
+
     }
     .el-form-item__content {
       .input-box {
@@ -136,6 +139,9 @@
         .el-input__inner:focus {
           border-color: darken($--right-box-border-color, 20%);
         }
+        .el-form-item__label {
+          padding-bottom: 2px;
+        }
       }
       .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
         border-color: #F56C6C
@@ -301,4 +307,24 @@
   .el-form-item__content .el-autocomplete .el-input-group {
     vertical-align: unset;
   }
+  .el-input__wrapper {
+    border-radius: 2px;
+    height: 32px !important;
+    line-height: 32px !important;
+    //box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
+    box-shadow: 0 0 0 1px #e7eaed inset;
+  }
+  .el-input__inner, .el-textarea__inner {
+    border: none !important;
+  }
+  .el-select__wrapper {
+    height: 32px;
+    line-height: 32px;
+  }
+  .el-switch.is-checked .el-switch__core {
+    background-color: $--color-primary;
+  }
+  .el-textarea__inner {
+    font-size: 12px;
+  }
 }

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

@@ -55,6 +55,10 @@
      .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;
+      }
     }
 
     .top-tool-right {

src/assets/css/components/components/common/TimeRange/date-time-range.scss

@@ -144,6 +144,9 @@
           background: $--select-bg-color-hover-1;
         }
       }
+      .el-range-editor.el-input__wrapper{
+        opacity: 0;
+      }
     }
 
     .date-range-panel-content-right {

src/assets/css/components/components/rightBox/report/reportBox.scss

@@ -4,6 +4,7 @@
       .el-checkbox {
         margin-right: 24px;
         line-height: 28px;
+        margin-top: -2px;
       }
       .el-checkbox-group {
         line-height: 28px;
@@ -108,10 +109,40 @@
         height: 32px;
         margin: 10px 0 0 10px;
       }
+      .el-input__wrapper {
+        height: 32px !important;
+        padding: 1px 11px !important;
+        border-radius: 2px;
+      }
+      .el-input__inner {
+        padding: 0;
+      }
+
+      .el-form-item__content {
+        line-height: 40px !important;
+      }
+    }
+    .el-input__inner {
+      border: none;
+    }
+    .el-select--small .el-select__wrapper {
+      padding: 0 10px;
+      min-height: 32px !important;
+      line-height: 32px !important;
+      margin-top: -2px;
+      border-radius: 2px;
     }
   }
   .right-box__select--param {
-    .el-input__prefix {
+    //.el-select--small .el-select__prefix {
+    //  left: 0;
+    //  background-color: #f5f7fa;
+    //  color: #999;
+    //  padding: 0 1.07143rem;
+    //  border: 1px solid #dcdfe6;
+    //  border-radius: 2px 0 0 2px;
+    //}
+    .el-select__prefix, .el-input__prefix {
       left: 0;
       background-color: #f5f7fa;
       color: #999;
@@ -119,6 +150,9 @@
       border: 1px solid #dcdfe6;
       border-radius: 2px 0 0 2px;
     }
+    .el-select__wrapper {
+      padding-left: 0 !important;
+    }
   }
 }
 .my-form-item .el-form-item__content {

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

@@ -10,6 +10,21 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    .el-form-item {
+      margin-bottom: 27px;
+    }
+    .el-form-item__content {
+      width: 600px;
+      .el-select__wrapper {
+        min-height: 32px !important;
+        line-height: 32px;
+        padding: 0 10px 0 16px;
+        font-size: 13px;
+      }
+    }
+    .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
+      margin-bottom: 4px;
+    }
     .el-input {
       width:600px;
     }
@@ -60,3 +75,6 @@
     }
   }
 }
+.el-popper.is-pure {
+  margin-top: 0;
+}

src/assets/css/components/views/detections/detection-tools.scss

@@ -129,6 +129,10 @@
 
     .el-input--small {
       line-height: 27px;
+      .el-input__wrapper {
+        height: 28px !important;
+        border-radius: 2px 0 0 2px !important;
+      }
 
       .el-input__inner {
         height: 28px;

src/assets/css/components/views/report/report.scss

@@ -78,11 +78,37 @@
               color: #1b2e3b;
               background: #ebeef5;
             }
+            .el-range-editor--small.el-input__wrapper {
+              height: 32px;
+              line-height: 32px;
+            }
             .cn-detection__footer {
               text-align: center;
+              display: flex;
+              justify-content: center;
               .el-pagination__jump {
                 margin-left: 3px;
               }
+              .el-pagination__goto {
+                display: none;
+              }
+              .el-input--small {
+                width: 46px !important;
+                .el-input__wrapper {
+                  height: 22px;
+                }
+              }
+              .el-pagination--small {
+                .btn-prev {
+                  margin-right: 10px;
+                }
+                .btn-next {
+                  margin-left: 10px;
+                }
+                &span {
+                  color: $--color-text-primary;
+                }
+              }
             }
           }
           .block.drop-down-time {
@@ -176,6 +202,12 @@
             }
           }
         }
+        .el-table__border-left-patch, .el-table--border::before {
+          width: 0;
+        }
+        .el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
+          height: 0;
+        }
       }
     }
     .table-operation-all {

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

@@ -169,6 +169,8 @@
               align-items: center;
               .card-title-name {
                 width:100%;
+                height: 19.2px;
+                line-height: 19.2px;
                 overflow: hidden; //超出的文本隐藏
                 text-overflow: ellipsis; //溢出用省略号显示
                 white-space:nowrap;
@@ -996,6 +998,10 @@
     padding-left: 20px;
     overflow: auto;
 
+    .el-form--label-top .el-form-item .el-form-item__label {
+      margin-bottom: 3px !important;
+    }
+
     .enable-form__mt {
       .el-form {
         margin-top:6px;
@@ -1176,6 +1182,7 @@
         }
         .el-textarea__inner {
           padding-left: 8px;
+          font-size: 12px;
         }
 
         .form-select__disable {
@@ -1188,6 +1195,13 @@
         .form-select__enable {
           width: 100%;
 
+          .el-select__wrapper {
+            //padding-left: 22px !important;
+            .el-select__inner {
+              background-color: #521919 !important;
+              padding-left: 22px !important;
+            }
+          }
           .el-input__inner {
             background-color: white !important;
             padding-left: 22px !important;
@@ -1899,6 +1913,7 @@
     padding-top:0px;
     padding-right:30px;
     padding-left:30px;
+    padding-bottom:30px;
     .dialog-message {
       padding-left:0px !important;
       padding-right:0px !important;
@@ -1920,12 +1935,21 @@
       &.update-dialog__table--system-user {
         height: calc(100% - 139px);
       }
+      &.el-table .el-table__cell {
+        padding: 12px 0 !important;
+      }
+      &.el-table .el-table__row .el-table__cell {
+        padding: 8px 0 !important;
+      }
     }
     .update-knowledge-form {
       .el-upload {
         width:100%;
       }
       .form-input {
+        .el-input__wrapper {
+          padding: 1px 16px !important;
+        }
         .el-input__inner{
           padding-right: 50px !important;
           font-size: 14px;
@@ -1936,7 +1960,8 @@
         border: 1px solid rgba(222,222,222,1);
         box-shadow: 0px 2px 4px 0px rgba(51,51,51,0.02);
         border-radius: 2px;
-        width:100%;
+        //width:100%;
+        width: 1020px;
         height:28px;
         min-height:28px !important;
         color: #575757;
@@ -1962,6 +1987,16 @@
       }
       .knowledge-remark {
         margin-bottom:0px !important;
+        .el-textarea__inner {
+          font-size: 12px;
+          padding: 5px 15px;
+        }
+      }
+      .el-form--label-top .el-form-item .el-form-item__label {
+        margin-bottom: 0 !important;
+      }
+      .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
+        line-height: 14px;
       }
     }
     .dialog-footer {

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

@@ -43,4 +43,7 @@
     -webkit-line-clamp: 2; // 超出多少行
     -webkit-box-orient: vertical;
   }
+  .cn-table .el-table:not(.chart-table) td {
+    padding: 8px 0 !important;
+  }
 }

src/assets/css/themes/THEME_README.md

@@ -12,10 +12,10 @@
 -   // $arrow-selector: #{& + '__arrow'};   
     改为 $arrow-selector: '.el-popper__arrow';
 
-### 20240118element-plus升级
+### 20240118__element-plus升级
 #### 变动事项
 
-- elemen-plus由1.0.2-beta.71升级至2.5.1，旧版本是将element-plus源文件放到theme/src中进行部分修改使用，现在启用该方法，直接使用element-plus组件，部分组件有差异改动，对比界面进行调整并记录在xxx.scss
+- elemen-plus由1.0.2-beta.71升级至2.5.1，旧版本是将element-plus源文件放到theme/src中进行部分修改使用，现在弃用该方案，直接使用element-plus组件，部分组件有差异改动，对比界面进行调整并记录在cover-element.scss
 - 弃用之前的主题写法，改为官网的主题切换方法。删除body上的class，在html上添加class="dark"。默认明亮主题light，暗黑主题dark，默认引入theme-light.scss样式文件，暗黑主题theme-dark.scss样式文件
 - 如需添加暗黑样式，先在theme-light.scss添加唯一样式名，再到theme-dark中添加同名样式。如在light中添加字体颜色$--text-color-1: #353636;，则需要在dark中添加$--text-color-1: #d8d8d8;
 - header.vue的第四级面包屑导航栏，以及NetworkOverviewTabs.vue第一列搜索的popover。原结构的popover被上一层div包裹，但在html中解析成两个div，原来的popper-class需要提出来，不要在原div的class下，否则样式错乱
@@ -28,4 +28,6 @@
 - icon图标：老版使用：<i class="el-icon-search" />。新版则是svg文件，需要单独引入封装成component的格式，使用时：<el-icon><Search /></el-icon>
 - select选择器：新版被el-select__wrapper的div包裹，与旧版顺序不同。
 - * input和select的右侧图标和maxlength间距新版比旧版略大
-* 
+- drawer抽屉：在header.vue中遇到，custom-class="cn-menu"，渲染后class中没有cn-menu，也许是按需引入导致的，额外标注
+- message-box弹窗：新版在旧版的el-message-box的外层包裹了一层父div el-overlay-message-box，导致原样式会错乱
+- dialog: custom在2.4版本后被移除，使用class替代，插槽中的title也在2.4版本后移除，使用header替代