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替代

src/components/layout/Header.vue

@@ -135,6 +135,7 @@
         direction="ttb"
         custom-class="cn-menu"
         modal-class="cn-menu-modal"
+        class="cn-menu"
         :with-header="false"
         :show-close="false"
     >

src/components/rightBox/settings/RoleBox.vue

@@ -27,8 +27,8 @@
             <el-tree :data="menus" :default-expand-all="expandAllFlag" check-strictly="true" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
               <template #default="{ data }">
               <span>
-                <el-icon v-if="data.type === 1"><Menu /></el-icon>
+                <el-icon v-if="data.type === '1'"><Menu /></el-icon>
-                <el-icon v-if="data.type === 2"><Edit /></el-icon>
+                <el-icon v-if="data.type === '2'"><Edit /></el-icon>
               </span>
                 {{$t(data.i18n)}}
               </template>

src/components/table/administration/OperationLogTable.vue

@@ -157,3 +157,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.list-page .cn-table .el-table:not(.chart-table) td {
+  padding: 8px 0;
+}
+</style>

src/components/table/report/ReportTable.vue

@@ -3,8 +3,9 @@
     <el-table
         id="reportTable"
         ref="dataTable"
+        :header-cell-class-name="headerCellClass"
         :data="tableData"
-        :height="height"
+        height="100%"
         :expand-row-keys="expandedIds"
         border
         empty-text=" "
@@ -213,7 +214,7 @@ import Loading from '@/components/common/Loading'
 import axios from 'axios'
 import { api } from '@/utils/api'
 import { storageKey, report } from '@/utils/constants'
-import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
+import { urlParamsHandler, overwriteUrl, headerCellClass } from '@/utils/tools'
 import { ref } from 'vue'
 import { dateFormatToUTC, getNowTime } from '@/utils/date-util'
 import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
@@ -479,6 +480,7 @@ export default {
     })
   },
   methods: {
+    headerCellClass,
     /**
      * 进入页面判断是否需要展开表格
      * 即展开表格后刷新界面，保持展开效果
@@ -783,3 +785,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.list-page .cn-table .el-table:not(.chart-table) td {
+  padding: 7.5px 0;
+}
+</style>

src/components/table/setting/knowledgeBaseTableForCard.vue

@@ -32,7 +32,7 @@
   <div class="center-dialog">
     <el-dialog v-model="showUpdateDialog"
                :destroy-on-close="true"
-               :custom-class="showAddUpdateDialog ? 'update-knowledge update-knowledge--upload' : 'update-knowledge'"
+               :class="showAddUpdateDialog ? 'update-knowledge update-knowledge--upload' : 'update-knowledge'"
                :before-close="beforeClose"
                :after-close="handleClose">
       <div class="knowledge-update__top" >
@@ -107,9 +107,8 @@
                     'update-dialog__table--psiphon3': updateKnowledge.source === 'cn_psiphon3_ip' && activeTab === 'intelligenceLearning',
                     'update-dialog__table--system-user': updateKnowledge.source === 'cn_psiphon3_ip' && activeTab !== 'intelligenceLearning'
                   }"
-                  :header-cell-style="{background:'#f5f7fa',color:'#353636',fontWeight: '400',fontSize: '12px',borderRight: 'none',borderBottom: 'none'}"
+                  :cell-style="myCellStyle"
-                  cell-style="padding:6px 0px;font-size: 12px;color: #353636;font-weight: 400;line-height: 20px;border-right:none;"
+                  :header-cell-style="myHeaderCellStyle">
-                  header-cell-style="padding:8px 0px;font-size: 12px;color: #353636;font-weight: 500;border-right:none;">
           <el-table-column prop="opTime" :label="$t('entities.tab.informationAggregation.updateTime')" width="150" >
             <template #default="scope" :column="item">
               <span>{{scope.row.opTime ? dateFormatByAppearance(scope.row.opTime) : '-'}}</span>
@@ -202,6 +201,7 @@
                          :on-error="uploadError"
                          :class="uploadErrorTip ? 'el-upload--error' : ''"
                          :accept="fileTypeLimit"
+                         style="margin-bottom: -10px"
                          :auto-upload="false"
                          ref="knowledgeUpload"
                          id="knowledgeUpload"
@@ -228,7 +228,7 @@
     </el-dialog>
     <el-dialog v-model="showConfirmDialog"
                :title="$t('overall.tips')"
-               custom-class="update-knowledge-tip"
+               class="update-knowledge-tip"
                :width="480"
                :before-close="handleConfirmClose">
       <div class="dialog-message">{{$t('knowledge.updateTips')}}</div>
@@ -326,7 +326,27 @@
           { value: 10080, name: this.$t('dateTime.last7Days') },
           { value: 21600, name: this.$t('dateTime.last15Days') },
           { value: 43200, name: this.$t('dateTime.last30Days') }
-        ]
+        ],
+        myCellStyle: {
+          padding: '6px 0px',
+          'font-size': '12px',
+          color: '#353636',
+          'font-weight': 400,
+          'line-height': '20px',
+          'border-right': 'none'
+        },
+        myHeaderCellStyle: {
+          padding: '8px 0px',
+          'font-size': '12px',
+          color: '#353636',
+          'font-weight': 500,
+          'border-right': 'none',
+          background: '#f5f7fa',
+          fontWeight: '400',
+          fontSize: '12px',
+          borderRight: 'none',
+          borderBottom: 'none'
+        }
       }
     },
     setup () {

src/utils/tools.js

@@ -1565,3 +1565,7 @@ const tagValueHandler = (value) => {
   const find = tagValueLabelMapping.find(t => t.value === value)
   return find ? find.name : value
 }
+
+export const headerCellClass = (row) => {
+  return 'my-header-cell-class'
+}

src/views/administration/Appearance.vue

@@ -51,7 +51,7 @@
         <button style="position: relative;" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save"
                 v-if="hasPermission('editAppearence')"
         >
-          <loading size="small" :loading="blockOperation.save"></loading>
+          <el-loading size="small" :loading="blockOperation.save"></el-loading>
           <span>{{$t('overall.save')}}</span>
         </button>
       </div>

src/views/administration/I18n.vue

@@ -51,7 +51,7 @@
     <el-drawer
         v-model="rightBox.show"
         direction="rtl"
-        custom-class="common-right-box"
+        class="common-right-box"
         :size="700"
         :with-header="false"
         destroy-on-close>

src/views/administration/Roles.vue

@@ -55,7 +55,7 @@
     <el-drawer
             v-model="rightBox.show"
             direction="rtl"
-            custom-class="common-right-box"
+            class="common-right-box"
             :with-header="false"
             :size="700"
             destroy-on-close>

src/views/administration/User.vue

@@ -52,7 +52,7 @@
     <el-drawer
             v-model="rightBox.show"
             direction="rtl"
-            custom-class="common-right-box"
+            class="common-right-box"
             :size="700"
             :with-header="false"
             destroy-on-close>

src/views/detections/detectionPolicies/PolicyForm.vue

@@ -563,20 +563,6 @@ export default {
           query: queryInfo
         })
       }).catch(() => {})
-      // this.$confirm(this.$t('tip.leavePage'), {
-      //   confirmButtonText: this.$t('tip.confirm'),
-      //   cancelButtonText: this.$t('overall.cancel'),
-      //   message: this.$t('tip.leavePageTips'),
-      //   title: this.$t('tip.leavePage'),
-      //   type: 'warning',
-      //   iconClass: 'width:0px;height:0px;',
-      //   customClass: 'del-model'
-      // }).then(() => {
-      //   this.$router.push({
-      //     path: '/detection/policy',
-      //     query: queryInfo
-      //   })
-      // }).catch(() => {})
     },
     resetEditFlag () {
       this.triggerObj.editFlag = true
@@ -586,7 +572,22 @@ export default {
 </script>
 
 <style lang="scss">
+.el-overlay-message-box, .el-message-box {
+  padding: 0 !important;
+}
+.el-overlay-message-box {
+  text-align: center !important;
+}
+.is-message-box .el-overlay-message-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .del-model {
+  &.el-message-box {
+    max-width: 480px !important;
+  }
   display: flex;
   flex-direction: column;
   padding-bottom: 0 !important;
@@ -600,8 +601,8 @@ export default {
     height: 42px;
     background: #F7F7F7;
     box-shadow: 0 1px 0 0 rgba(53, 54, 54, 0.08);
-    padding-left: 20px;
+    padding-left: 21px;
-    padding-top: 14px;
+    padding-top: 10px;
     padding-bottom: 14px;
 
     .el-message-box__headerbtn {
@@ -611,7 +612,7 @@ export default {
       align-items: center;
       font-size: 10px;
       line-height: 10px;
-      padding-right: 5px !important;
+      padding-right: 10px !important;
 
       i {
         width: 10px;
@@ -634,9 +635,9 @@ export default {
     letter-spacing: 0;
     line-height: 22px;
     font-weight: 400;
-    padding-top: 8px;
+    padding-top: 9px;
     padding-right: 20px;
-    padding-left: 20px;
+    padding-left: 21px;
 
     .el-message-box__message {
       padding-left: 0 !important;
@@ -648,8 +649,11 @@ export default {
     height: 52px;
     border-top: 1px solid #eee;
     box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.07);
-    padding: 11px 0 12px !important;
+    padding: 13px 1px 12px 0 !important;
 
+    .el-button {
+      font-size: 12px;
+    }
     .el-button--small {
       padding: 8px 21px !important;
       line-height: 12px;

src/views/entityExplorer/EntityGraph.vue

@@ -7,6 +7,7 @@
           v-model="rightBox.show"
           direction="rtl"
           custom-class="entity-graph__detail"
+          class="entity-graph__detail"
           :close-on-click-modal="true"
           :modal="false"
           :size="400"

src/views/report/Report.vue

@@ -70,6 +70,7 @@
           v-model="rightBox.show"
           direction="rtl"
           custom-class="common-right-box"
+          class="common-right-box"
           :size="700"
           :with-header="false"
           destroy-on-close>

src/views/setting/KnowledgeBaseForm.vue

@@ -244,6 +244,7 @@ import { api } from '@/utils/api'
 import { regular } from '@/utils/regular'
 import unitConvert from '@/utils/unit-convert'
 import Loading from '@/components/common/Loading'
+import { ElMessageBox } from 'element-plus'
 
 export default {
   name: 'CreateKnowledgeBase',
@@ -653,12 +654,12 @@ export default {
         this.isShowUploadTips = true
         const self = this
         if (this.importedData.length > 0) {
-          this.$confirm(this.$t('tip.uploadFile'), {
+          ElMessageBox.confirm(this.$t('tip.uploadFile'), {
             confirmButtonText: this.$t('tip.confirm'),
             cancelButtonText: this.$t('overall.cancel'),
             message: this.$t('tip.uploadFileTips'),
             title: this.$t('tip.uploadFile'),
-            type: 'warning',
+            // type: 'warning',
             iconClass: 'width:0px;height:0px;',
             customClass: 'del-model'
           }).then(() => {
@@ -670,6 +671,7 @@ export default {
         } else {
           this.isClick = true
           this.isShowUploadTips = false
+          self.$refs.upload.submit()
           self.$refs.upload.$refs.uploadRef.handleClick()
         }
       }
@@ -693,12 +695,12 @@ export default {
         } else {
           if (!this.isClick) {
             if (this.importedData.length > 0) {
-              this.$confirm(this.$t('tip.uploadFile'), {
+              ElMessageBox.confirm(this.$t('tip.uploadFile'), {
                 confirmButtonText: this.$t('tip.confirm'),
                 cancelButtonText: this.$t('overall.cancel'),
                 message: this.$t('tip.uploadFileTips'),
                 title: this.$t('tip.uploadFile'),
-                type: 'warning',
+                // type: 'warning',
                 iconClass: 'width:0px;height:0px;',
                 customClass: 'del-model'
               }).then(() => {
@@ -797,12 +799,12 @@ export default {
     cancel () {
       const self = this
       if (this.isPreviewChange) {
-        this.$confirm(this.$t('tip.leavePage'), {
+        ElMessageBox.confirm(this.$t('tip.leavePage'), {
           confirmButtonText: this.$t('tip.confirm'),
           cancelButtonText: this.$t('overall.cancel'),
           message: this.$t('tip.leavePageTips'),
           title: this.$t('tip.leavePage'),
-          type: 'warning',
+          // type: 'warning',
           iconClass: 'width:0px;height:0px;',
           customClass: 'del-model'
         }).then(() => {
@@ -1441,7 +1443,22 @@ export default {
 </script>
 
 <style lang="scss">
+.el-overlay-message-box, .el-message-box {
+  padding: 0 !important;
+}
+.el-overlay-message-box {
+  text-align: center !important;
+}
+.is-message-box .el-overlay-message-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .del-model {
+  &.el-message-box {
+    max-width: 480px !important;
+  }
   display: flex;
   flex-direction: column;
   padding-bottom: 0 !important;
@@ -1455,8 +1472,8 @@ export default {
     height: 42px;
     background: #F7F7F7;
     box-shadow: 0 1px 0 0 rgba(53, 54, 54, 0.08);
-    padding-left: 20px;
+    padding-left: 21px;
-    padding-top: 14px;
+    padding-top: 10px;
     padding-bottom: 14px;
 
     .el-message-box__headerbtn {
@@ -1466,7 +1483,7 @@ export default {
       align-items: center;
       font-size: 10px;
       line-height: 10px;
-      padding-right: 5px !important;
+      padding-right: 10px !important;
 
       i {
         width: 10px;
@@ -1489,9 +1506,9 @@ export default {
     letter-spacing: 0;
     line-height: 22px;
     font-weight: 400;
-    padding-top: 8px;
+    padding-top: 9px;
     padding-right: 20px;
-    padding-left: 20px;
+    padding-left: 21px;
 
     .el-message-box__message {
       padding-left: 0 !important;
@@ -1503,8 +1520,11 @@ export default {
     height: 52px;
     border-top: 1px solid #eee;
     box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.07);
-    padding: 11px 0 12px !important;
+    padding: 13px 1px 12px 0;
 
+    .el-button {
+      font-size: 12px;
+    }
     .el-button--small {
       padding: 8px 21px !important;
       line-height: 12px;

src/views/setting/KnowledgeBaseUserDefinedList.vue

@@ -68,6 +68,7 @@
              :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/Plugin.vue

@@ -71,7 +71,7 @@ export default {
         this.searchLabel = { ...this.searchLabel, ...params }
       }
       // this.searchLabel = { ...this.searchLabel, ...this.pageObj }
-      this.searchLabel = { ...this.searchLabel, jobGroup: 3 }
+      this.searchLabel = { ...this.searchLabel, jobGroup: 3, pageSize: -1 }
       this.isNoData = false
       this.toggleLoading(true)
       delete this.searchLabel.total