From 66c2e4eaaa1f66d992ccfa7acd3112bf9d559e58 Mon Sep 17 00:00:00 2001
From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com>
Date: Wed, 17 Aug 2022 13:52:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E7=89=88=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AsyncComponent/index.vue   |   1 -
 .../components/business/DeLayoutContent.vue   |   3 +-
 frontend/src/components/deCustomCm/deBtn.vue  | 355 +++++++++++
 frontend/src/components/msgCfm/index.js       |  40 ++
 frontend/src/lang/en.js                       |  77 ++-
 frontend/src/lang/tw.js                       |  77 ++-
 frontend/src/lang/zh.js                       |  85 ++-
 frontend/src/main.js                          |   3 +
 frontend/src/styles/index.scss                | 205 ++++++-
 .../template/component/TemplateImport.vue     | 263 +++++----
 .../panel/template/component/TemplateItem.vue | 193 +++---
 .../panel/template/component/TemplateList.vue | 324 +++++++----
 frontend/src/views/panel/template/index.vue   | 438 +++++++++-----
 .../views/system/SysParam/BasicSetting.vue    | 343 ++++++-----
 .../system/SysParam/ClusterModeSetting.vue    | 549 +++++++++++-------
 .../views/system/SysParam/EmailSetting.vue    | 388 ++++++++-----
 .../views/system/SysParam/KettleSetting.vue   | 426 +++++++++-----
 .../SysParam/MapSetting/MapSettingLeft.vue    |   4 +-
 .../SysParam/MapSetting/MapSettingRight.vue   |   4 +-
 .../system/SysParam/SimpleModeSetting.vue     |   6 +-
 frontend/src/views/system/SysParam/index.vue  | 224 ++++---
 .../src/views/system/SysParam/operater.vue    |  36 ++
 frontend/src/views/system/plugin/dynamic.vue  |   8 +-
 .../system/settings/AppearanceSetting.vue     |  72 ++-
 frontend/src/views/system/user/index.vue      |   1 +
 25 files changed, 2910 insertions(+), 1215 deletions(-)
 create mode 100644 frontend/src/components/deCustomCm/deBtn.vue
 create mode 100644 frontend/src/components/msgCfm/index.js
 create mode 100644 frontend/src/views/system/SysParam/operater.vue

diff --git a/frontend/src/components/AsyncComponent/index.vue b/frontend/src/components/AsyncComponent/index.vue
index e3cd7d212c..485e46a61e 100644
--- a/frontend/src/components/AsyncComponent/index.vue
+++ b/frontend/src/components/AsyncComponent/index.vue
@@ -49,7 +49,6 @@ export default {
         } else {
           res = await window.SyncComponentCache[this.url]
         }
-
         if (res) {
           const Fn = Function
           const dynamicCode = res.data || res
diff --git a/frontend/src/components/business/DeLayoutContent.vue b/frontend/src/components/business/DeLayoutContent.vue
index e38271e634..ddd0a8bfff 100644
--- a/frontend/src/components/business/DeLayoutContent.vue
+++ b/frontend/src/components/business/DeLayoutContent.vue
@@ -34,7 +34,7 @@ export default {
       return backPath || backName || backTo
     },
     needInnerPadding() {
-      return ['system-dept', 'system-dept-form', 'system-auth'].includes(this.$route.name)
+      return ['system-dept', 'system-dept-form', 'system-auth', 'sys-appearance', 'system-param', 'system-template'].includes(this.$route.name)
     }
   }
 }
@@ -77,6 +77,7 @@ export default {
   .layout-inner-padding {
     padding: 0;
     margin-top: 16px;
+    overflow: hidden;
   }
 }
 </style>
diff --git a/frontend/src/components/deCustomCm/deBtn.vue b/frontend/src/components/deCustomCm/deBtn.vue
new file mode 100644
index 0000000000..3a19b42e73
--- /dev/null
+++ b/frontend/src/components/deCustomCm/deBtn.vue
@@ -0,0 +1,355 @@
+<template>
+  <button
+    class="de-button"
+    @click="handleClick"
+    :disabled="buttonDisabled || loading"
+    :class="[
+      type ? 'de-button--' + type : '',
+      {
+        'is-de-plain': plain,
+        'is-de-secondary': secondary,
+        'is-de-disabled': buttonDisabled,
+        'is-de-loading': loading,
+      },
+    ]"
+  >
+    <!-- <svg
+      class="de-circular"
+      v-if="loading"
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.04575 3.00511C3.11074 2.94007 3.1879 2.88847 3.27283 2.85326C3.35776 2.81804 3.4488 2.7999 3.54074 2.79987C3.63269 2.79983 3.72374 2.81791 3.80869 2.85306C3.89365 2.88822 3.97085 2.93976 4.03589 3.00475C4.10093 3.06974 4.15253 3.14691 4.18774 3.23184C4.22296 3.31677 4.2411 3.40781 4.24113 3.49975C4.24117 3.5917 4.22309 3.68275 4.18794 3.7677C4.15278 3.85266 4.10124 3.92986 4.03625 3.9949C3.64356 4.38689 3.33222 4.85263 3.12013 5.36535C2.90804 5.87807 2.79938 6.42765 2.80039 6.9825C2.80039 9.31246 4.68128 11.2 7.00039 11.2C9.3195 11.2 11.2004 9.31246 11.2004 6.9825C11.2004 6.79685 11.2741 6.6188 11.4054 6.48753C11.5367 6.35625 11.7147 6.2825 11.9004 6.2825C12.086 6.2825 12.2641 6.35625 12.3954 6.48753C12.5266 6.6188 12.6004 6.79685 12.6004 6.9825C12.6004 10.0846 10.0937 12.6 7.00039 12.6C3.90709 12.6 1.40039 10.0846 1.40039 6.9825C1.40039 5.4705 1.99959 4.05195 3.04575 3.00511Z"
+        fill="#3370ff"
+      />
+    </svg> -->
+    <svg v-if="loading" viewBox="25 25 50 50" class="de-circular">
+      <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
+    </svg>
+    <i :class="icon" v-if="icon && !loading"></i>
+    <span :class="[{'de-btn-mar5': icon || loading }]" v-if="$slots.default"><slot></slot></span>
+  </button>
+</template>
+<script>
+export default {
+  name: "DeButton",
+  inject: {
+    elForm: {
+      default: "",
+    },
+  },
+  props: {
+    type: {
+      type: String,
+      default: "default",
+    },
+    size: String,
+    icon: {
+      type: String,
+      default: "",
+    },
+    loading: Boolean,
+    disabled: Boolean,
+    plain: Boolean,
+    secondary: Boolean,
+  },
+
+  computed: {
+    buttonDisabled() {
+      return this.$options.propsData.hasOwnProperty("disabled")
+        ? this.disabled
+        : (this.elForm || {}).disabled;
+    },
+  },
+
+  methods: {
+    handleClick(evt) {
+      this.$emit("click", evt);
+    },
+  },
+};
+</script>
+<style lang="scss">
+$namespace: "de";
+$state-prefix: "is-de-";
+$modifier-separator: "--";
+@mixin b($block) {
+  $B: $namespace + "-" + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector +
+      & +
+      $modifier-separator +
+      $unit +
+      ","};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin button-variant($color, $background-color, $hover, $active, $loading) {
+  color: $color;
+  background-color: $background-color;
+  border-color: $background-color;
+
+  &:hover,
+  &:focus {
+    background: $hover;
+    border-color: $hover;
+    color: $color;
+  }
+
+  &:active {
+    background: $active;
+    border-color: $active;
+    color: $color;
+    outline: none;
+  }
+
+  &.is-de-loading {
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+      color: $color;
+      background-color: $loading;
+      border-color: $loading;
+    }
+  }
+
+  &.is-de-disabled {
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+      color: $color;
+      background-color: mix(#fff, #bbbfc4, 40%);
+      border-color: mix(#fff, #bbbfc4, 40%);
+    }
+  }
+}
+@include b(button) {
+  font-family: PingFang SC;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: none;
+  margin: 0;
+  height: 32px;
+  transition: 0.1s;
+  min-width: 80px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 4px;
+  padding: 0 16px;
+
+  .de-circular {
+    height: 14px;
+    width: 14px;
+    animation: loading-rotate 2s linear infinite;
+  }
+
+  .path {
+    animation: loading-dash 1.5s ease-in-out infinite;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: 0;
+    stroke-width: 3;
+    stroke: #3370ff;
+    stroke-linecap: round;
+  }
+
+  & + & {
+    margin-left: 12px;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  .de-btn-mar5 {
+    margin-left: 5.17px;
+  }
+
+  @include when(secondary) {
+    color: var(--deTextPrimary, #1F2329);
+    background-color: var(--deWhite, #ffffff);
+    border: 1px solid;
+    border-color: var(--deComponentStrokeColor, #BBBFC4);
+
+    &:hover,
+    &:focus {
+      background: var(--deComBorderColorHover, #ffffff);
+      border-color: var(--deComponentStrokeColor, #BBBFC4);
+    }
+
+    &:active {
+      background: var(--deComBorderColorActive, #ffffff);
+      border-color: var(--deComponentStrokeColor, #BBBFC4);
+      outline: none;
+    }
+
+    &.is-de-loading {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        color: var(--deTextPlaceholder, #3370FF);
+        background-color: var(--deWhite, #ffffff);
+        border-color: var(--deComponentStrokeColor, #BBBFC4);
+      }
+    }
+
+    &.is-de-disabled {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        color: #8f959e;
+        background-color: #ffffff;
+        border-color: #8f959e;
+      }
+    }
+  }
+  
+
+  @include when(plain) {
+    color: var(--primary, #3370FF);
+    background-color: var(--deWhite, #ffffff);
+    border: 1px solid;
+    border-color: var(--primary, #3370FF);
+
+    &:hover,
+    &:focus {
+      background: var(--deWhiteHover, #ffffff);
+      border-color: var(--primary, #3370FF);
+    }
+
+    &:active {
+      background: var(--deWhiteActive, #ffffff);
+      border-color: var(--primary, #3370FF);
+      outline: none;
+    }
+
+    &.is-de-loading {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        color: var(--primary, #3370FF);
+        background-color: var(--deWhite, #ffffff);
+        border-color: var(--primary, #3370FF);
+        opacity: .6;
+      }
+    }
+
+    &.is-de-disabled {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        color: #8f959e;
+        background-color: #ffffff;
+        border-color: #8f959e;
+      }
+    }
+  }
+
+
+    @include when(disabled) {
+      &,
+      &:hover,
+      &:focus {
+        cursor: not-allowed;
+        background-image: none;
+      }
+
+    }
+
+    // @include when(loading) {
+    //   position: relative;
+    //   pointer-events: none;
+
+    //   &:before {
+    //     pointer-events: none;
+    //     content: '';
+    //     position: absolute;
+    //     left: -1px;
+    //     top: -1px;
+    //     right: -1px;
+    //     bottom: -1px;
+    //     border-radius: inherit;
+    //     background-color: rgba(255,255,255,.35);
+    //   }
+    // }
+  @include m(primary) {
+    @include button-variant(#fff, var(--primary, #3370ff), var(--primaryHover, #3370ff), var(--primaryActive, #3370ff), var(--primaryloading, #3370ff));
+  }
+  //   @include m(success) {
+  //     @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
+  //   }
+  //   @include m(warning) {
+  //     @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
+  //   }
+  @include m(danger) {
+    @include button-variant(#fff, var(--deDanger, #f54a45), var(--deDangerHover, #f54a45), var(--deDangerActive, #f54a45), var(--deDangerloading, #f54a45));
+  }
+  //   @include m(info) {
+  //     @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
+  //   }
+  //   @include m(text) {
+  //     border-color: transparent;
+  //     color: $--color-primary;
+  //     background: transparent;
+  //     padding-left: 0;
+  //     padding-right: 0;
+
+  //     &:hover,
+  //     &:focus {
+  //       color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
+  //       border-color: transparent;
+  //       background-color: transparent;
+  //     }
+  //     &:active {
+  //       color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+  //       border-color: transparent;
+  //       background-color: transparent;
+  //     }
+
+  //     &.is-disabled,
+  //     &.is-disabled:hover,
+  //     &.is-disabled:focus {
+  //       border-color: transparent;
+  //     }
+  //   }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/msgCfm/index.js b/frontend/src/components/msgCfm/index.js
new file mode 100644
index 0000000000..b4bd469128
--- /dev/null
+++ b/frontend/src/components/msgCfm/index.js
@@ -0,0 +1,40 @@
+
+export default {
+  methods: {
+    openMessageSuccess(text, type) {
+      const h = this.$createElement;
+      const iconClass = `el-icon-${ type || 'success'}`;
+      const customClass = `de-message-${ type || 'success'} de-message`;
+      this.$message({
+        message: h("p", null, [h("span", null, this.$t(text))]),
+        iconClass,
+        customClass,
+      });
+    },
+    handlerConfirm(options) {
+      let { title, content, type = 'danger', cb, confirmButtonText = this.$t('commons.delete'), showCancelButton = true, cancelButtonText = this.$t("commons.cancel") } = options;
+      let text = content ? `<span>${ this.$t(title) }</span><br><span class="use-html">${ this.$t(content) }</span>` : this.$t(title);
+      const dangerouslyUseHTMLString = Boolean(content);
+      let customClass = `de-confirm de-confirm-fail ${ dangerouslyUseHTMLString && 'de-use-html'}`
+      let confirmButtonClass = `de-confirm-${type}-btn de-confirm-btn`
+      this.$confirm(
+        text,
+        "",
+        {
+          confirmButtonText,
+          cancelButtonText,
+          showCancelButton,
+          cancelButtonClass: "de-confirm-btn de-confirm-plain-cancel",
+          dangerouslyUseHTMLString,
+          confirmButtonClass,
+          customClass,
+          iconClass: "el-icon-warning",
+        }
+      )
+        .then(() => {
+          cb();
+        })
+        .catch(() => {});
+    },
+  },
+};
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 4a2c80ece0..e6338d1984 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -716,7 +716,82 @@ export default {
     engine_mode_setting: 'Engine Setting',
     kettle_setting: 'Kettle Setting',
     cas_selected_warn: 'Selecting CAS will cause you to login again',
-    cas_reset: 'CAS switches back to the default login mode to access API:'
+    cas_reset: 'CAS switches back to the default login mode to access API:',
+    main_color: 'Main color',
+    success_color: 'Success color',
+    warning_color: 'Warning color:',
+    wrong_color: 'Wrong color',
+    main_text_color: 'Main text color',
+    secondary_font_color: 'Secondary font color',
+    prompt_font_color: 'Prompt font color',
+    disable_font_color: 'Disable font color',
+    component_stroke_color: 'Component stroke color',
+    card_stroke_color: 'Card stroke color',
+    basic_white: 'Basic white',
+    page_background_color: 'Page background color',
+    disable_background_color: 'Input box: disable background color',
+    basic_black: 'Basic black',
+    label_color: 'Label color:',
+    system_theme: 'System theme',
+    custom_theme: 'Custom theme',
+    color_settings: 'Color settings',
+    add_theme: 'Add theme',
+    subject_based: 'Subject based',
+    the_subject_name: 'Please enter the subject name',
+    name_already_exists: 'The subject name already exists',
+    successfully_and_apply: 'Save successfully and apply',
+    sure_to_exit: 'The information you filled in has not been saved. Are you sure to exit?',
+    copy_theme: 'Copy theme',
+    advanced_configuration: 'Advanced configuration',
+    no_custom_theme: 'No custom theme',
+    recommended_size: 'Recommended size:',
+    support: 'support',
+    no_more_than: 'Size no more than',
+    request_timeout: 'Request timeout',
+    message_retention_time: 'Message retention time',
+    test_mail_recipient: 'Used only as a test mail recipient',
+    to_enable_tsl: 'If the SMTP port is 587, you usually need to enable TSL',
+    to_enable_ssl: 'If the SMTP port is 465, you usually need to enable SSL',
+    added_successfully: 'Added successfully',
+    text_link_etc: 'Applicable scenarios: call to action, selected status, information highlight, general prompt information, text link, etc',
+    prompt_and_icon: 'Applicable scenario: success status prompt and Icon',
+    prompt_and_icon_danger: 'Applicable scenario: warning status prompt and Icon',
+    icon_danger_button: 'Applicable scenario: error status prompt and icon, danger button',
+    first_level_icon: 'Applicable scenario: first level title, first level text, important information display, first level Icon',
+    copy_secondary_icon: 'Applicable scenario: secondary title, secondary copy, secondary Icon',
+    radio_checkbox_unchecked: 'Applicable scenario: input box guide, auxiliary copy, prompt copy, three-level icon, radio, checkbox unchecked',
+    button_background_color: 'Applicable scenario: disable copy, disable icon, disable button background color',
+    background_header_background: 'Applicable scenario: page background, header background',
+    scenario_component_stroking: 'Applicable scenario: component stroking',
+    main_background: 'Main background',
+    content_background: 'Content background',
+    select_font: 'Select font',
+    no_font_selected: 'No font selected',
+    head_background: 'Head background',
+    head_font: 'Head font',
+    menu_floating_background: 'Menu floating background',
+    menu_selection_background: 'Menu selection background',
+    left_menu_background: 'Left menu background',
+    left_menu_font: 'Left menu font',
+    table_background: 'Table background',
+    table_font: 'Table font',
+    table_borders: 'Table borders',
+    subject_name: 'Subject name',
+    template_name: 'Template name',
+    search_keywords: 'Search keywords:',
+    delete_this_topic: 'Are you sure to delete this topic?',
+    network_error: 'network error',
+    to_overwrite_them: 'There are templates with the same name in the current classification. Do you want to overwrite them?',
+    import_succeeded: 'Import succeeded',
+    name_already_exists_type: 'Classification name already exists',
+    rename_succeeded: 'Rename succeeded',
+    the_same_category: 'The template name already exists under the same category',
+    delete_this_template: 'Are you sure to delete this template?',
+    also_be_deleted: 'After deletion, all templates in this category will also be deleted.',
+    delete_this_category: 'Are you sure to delete this category?',
+    edit_template: 'Edit template',
+    edit_classification: 'Edit classification',
+    classification_name: 'Classification Name:'
   },
   chart: {
     view_reset: 'View Reset',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 937408af50..173d69bf77 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -717,7 +717,82 @@ export default {
     engine_mode_setting: '引擎設置',
     kettle_setting: 'Kettle 設置',
     cas_selected_warn: '選擇CAS方式保存後會註銷當前回話，重新登錄',
-    cas_reset: 'CAS切換回默認登錄方式訪問API：'
+    cas_reset: 'CAS切換回默認登錄方式訪問API：',
+    main_color: '主色',
+    success_color: '成功顏色',
+    warning_color: '警示顏色',
+    wrong_color: '錯誤顏色',
+    main_text_color: '主要文字顏色',
+    secondary_font_color: '二級字體顏色',
+    prompt_font_color: '提示字體顏色',
+    disable_font_color: '禁用字體顏色',
+    component_stroke_color: '組件描邊顏色',
+    card_stroke_color: '卡片描邊顏色',
+    basic_white: '基礎白色',
+    page_background_color: '頁面背景色',
+    disable_background_color: '輸入框禁用背景色',
+    basic_black: '基礎黑色',
+    label_color: '標籤顏色',
+    system_theme: '系統主題',
+    custom_theme: '自定義主題',
+    color_settings: '配色設定',
+    add_theme: '添加主題',
+    subject_based: '基於主題',
+    the_subject_name: '請輸入主題名稱',
+    name_already_exists: '主題名稱已存在',
+    successfully_and_apply: '保存成功並應用',
+    sure_to_exit: '你填寫的資訊未保存，確認退出嗎？',
+    copy_theme: '複製主題',
+    advanced_configuration: '高級配寘',
+    no_custom_theme: '暫無自定義主題',
+    recommended_size: '建議尺寸',
+    support: '支持',
+    no_more_than: '大小不超過',
+    request_timeout: '請求超時時間',
+    message_retention_time: '消息保留時間',
+    test_mail_recipient: '僅用來作為測試郵件收件人',
+    to_enable_tsl: '如果SMTP埠是587，通常需要啟用TSL',
+    to_enable_ssl: '如果SMTP埠是465，通常需要啟用SSL',
+    added_successfully: '添加成功',
+    text_link_etc: '適用場景：行動號召、選中態、資訊高亮、常規提示資訊、文字連結等',
+    prompt_and_icon: '適用場景：成功狀態提示及圖標',
+    prompt_and_icon_danger: '適用場景：警示狀態提示及圖標',
+    icon_danger_button: '適用場景：錯誤狀態提示及圖標、危險按鈕',
+    first_level_icon: '適用場景：一級標題、一級正文、重要資訊展示、一級圖標',
+    copy_secondary_icon: '適用場景：二級標題、二級文案、二級圖標',
+    radio_checkbox_unchecked: '適用場景：輸入框引導語、輔助文案、提示文案、三級圖標、radio、checkbox未選中態',
+    button_background_color: '適用場景：禁用文案、禁用圖標、禁用按鈕背景色',
+    background_header_background: '適用場景：頁面背景、表頭背景',
+    scenario_component_stroking: '適用場景：組件描邊',
+    main_background: '主背景',
+    content_background: '內容背景',
+    select_font: '選中字體',
+    no_font_selected: '未選中字體',
+    head_background: '頭部背景',
+    head_font: '頭部字體',
+    menu_floating_background: '選單懸浮背景',
+    menu_selection_background: '選單選中背景',
+    left_menu_background: '左側選單背景',
+    left_menu_font: '左側選單字體',
+    table_background: '表格背景',
+    table_font: '表格字體',
+    table_borders: '表格邊框',
+    subject_name: '主題名稱',
+    template_name: '模版名稱',
+    search_keywords: '蒐索關鍵字',
+    delete_this_topic: '確定删除該主題嗎？',
+    network_error: '網絡錯誤',
+    to_overwrite_them: '當前分類存在相同名稱模版，是否覆蓋？',
+    import_succeeded: '導入成功',
+    name_already_exists_type: '分類名稱已存在',
+    rename_succeeded: '重命名成功',
+    the_same_category: '同一分類下，該模版名稱已存在',
+    delete_this_template: '確定删除該模版嗎？',
+    also_be_deleted: '删除後，該分類中所有的模版也將被删除。',
+    delete_this_category: '確定删除該分類嗎？',
+    edit_template: '編輯模版',
+    edit_classification: '編輯分類',
+    classification_name: '分類名稱'
   },
   chart: {
     view_reset: '視圖重置',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 0669a1c323..887112bc01 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -693,7 +693,7 @@ export default {
     edite_organization: '编辑组织'
   },
   system_parameter_setting: {
-    mailbox_service_settings: '邮件设置',
+    mailbox_service_settings: '邮件设置', 
     test_connection: '测试连接',
     SMTP_host: 'SMTP主机',
     basic_setting: '基础设置',
@@ -718,7 +718,82 @@ export default {
     engine_mode_setting: '引擎设置',
     kettle_setting: 'Kettle 设置',
     cas_selected_warn: '选择CAS方式保存后会注销当前回话，重新登录',
-    cas_reset: 'CAS切换回默认登录方式访问API：'
+    cas_reset: 'CAS切换回默认登录方式访问API：',
+    main_color: '主色',
+    success_color: '成功颜色',
+    warning_color: '警示颜色',
+    wrong_color: '错误颜色',
+    main_text_color: '主要文字颜色',
+    secondary_font_color: '二级字体颜色',
+    prompt_font_color: '提示字体颜色',
+    disable_font_color: '禁用字体颜色',
+    component_stroke_color: '组件描边颜色',
+    card_stroke_color: '卡片描边颜色',
+    basic_white: '基础白色',
+    page_background_color: '页面背景色',
+    disable_background_color: '输入框禁用背景色',
+    basic_black: '基础黑色',
+    label_color: '标签颜色',
+    system_theme: '系统主题',
+    custom_theme: '自定义主题',
+    color_settings: '配色设置',
+    add_theme: '添加主题',
+    subject_based: '基于主题',
+    the_subject_name: '请输入主题名称',
+    name_already_exists: '主题名称已存在',
+    successfully_and_apply: '保存成功并应用',
+    sure_to_exit: '你填写的信息未保存，确认退出吗？',
+    copy_theme: '复制主题',
+    advanced_configuration: '高级配置',
+    no_custom_theme: '暂无自定义主题',
+    recommended_size: '建议尺寸 ',
+    support: '支持',
+    no_more_than: '大小不超过',
+    request_timeout: '请求超时时间',
+    message_retention_time: '消息保留时间',
+    test_mail_recipient: '仅用来作为测试邮件收件人',
+    to_enable_tsl: '如果SMTP端口是587，通常需要启用TSL',
+    to_enable_ssl: '如果SMTP端口是465，通常需要启用SSL',
+    added_successfully: '添加成功',
+    text_link_etc: '适用场景：行动号召、选中态、信息高亮、常规提示信息、文字链接等',
+    prompt_and_icon: '适用场景：成功状态提示及图标',
+    prompt_and_icon_danger: '适用场景：警示状态提示及图标',
+    icon_danger_button: '适用场景：错误状态提示及图标、危险按钮',
+    first_level_icon: '适用场景：一级标题、一级正文、重要信息展示、一级图标',
+    copy_secondary_icon: '适用场景：二级标题、二级文案、二级图标',
+    radio_checkbox_unchecked: '适用场景：输入框引导语、辅助文案、提示文案、三级图标、radio、checkbox未选中态',
+    button_background_color: '适用场景：禁用文案、禁用图标、禁用按钮背景色',
+    scenario_component_stroking: '适用场景：组件描边',
+    background_header_background: '适用场景：页面背景、表头背景',
+    main_background: '主背景',
+    content_background: '内容背景',
+    select_font: '选中字体',
+    no_font_selected: '未选中字体',
+    head_background: '头部背景',
+    head_font: '头部字体',
+    menu_floating_background: '菜单悬浮背景',
+    menu_selection_background: '菜单选中背景',
+    left_menu_background: '左侧菜单背景',
+    left_menu_font: '左侧菜单字体',
+    table_background: '表格背景',
+    table_font: '表格字体',
+    table_borders: '表格边框',
+    subject_name: '主题名称',
+    template_name: '模版名称',
+    search_keywords: '搜索关键词',
+    delete_this_topic: '确定删除该主题吗？',
+    network_error: '网络错误',
+    to_overwrite_them: '当前分类存在相同名称模版，是否覆盖？',
+    import_succeeded: '导入成功',
+    name_already_exists_type: '分类名称已存在',
+    rename_succeeded: '重命名成功',
+    the_same_category: '同一分类下，该模版名称已存在',
+    delete_this_template: '确定删除该模版吗？',
+    also_be_deleted: '删除后，该分类中所有的模版也将被删除。',
+    delete_this_category: '确定删除该分类吗？',
+    edit_template: '编辑模版',
+    edit_classification: '编辑分类',
+    classification_name: '分类名称'
   },
   chart: {
     view_reset: '视图重置',
@@ -1900,14 +1975,14 @@ export default {
     un_install_error: '卸载失败，请联系管理员'
   },
   display: {
-    logo: '头部系统logo',
-    loginLogo: '登录页面头部logo',
+    logo: '头部系统LOGO',
+    loginLogo: '登录页面头部LOGO',
     loginImage: '登录页面右侧图片',
     loginTitle: '登录页面标题',
     title: '系统名称',
     advice_size: '建议图片大小',
     theme: '主题颜色',
-
+    favicon: '网站图标',
     topMenuColor: '头部背景',
     topMenuActiveColor: '头部选中背景',
 
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 7a8a248651..13658d299c 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -26,6 +26,7 @@ import DeViewSelect from '@/components/DeViewSelect'
 import RemarkEditor from '@/views/chart/components/component-style/dialog/RemarkEditor'
 import TitleRemark from '@/views/chart/view/TitleRemark'
 import '@/components/canvas/custom-component' // 注册自定义组件
+import deBtn from '@/components/deCustomCm/deBtn.vue'
 
 import '@/utils/DateUtil'
 import draggable from 'vuedraggable'
@@ -92,6 +93,8 @@ Vue.component('DeComplexSelect', DeComplexSelect)
 Vue.component('DeViewSelect', DeViewSelect)
 Vue.component('RemarkEditor', RemarkEditor)
 Vue.component('TitleRemark', TitleRemark)
+Vue.component('deBtn', deBtn)
+
 Vue.config.productionTip = false
 
 import vueToPdf from 'vue-to-pdf'
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index b4741d71da..1f25ac6bb1 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -854,7 +854,7 @@ div:focus {
     display: none !important;
 }
 
-.el-checkbox__input.is-checked + .el-checkbox__label {
+.el-checkbox__input.is-checked:not(.is-disabled) + .el-checkbox__label {
   color: #1F2329 !important;
 }
 
@@ -867,6 +867,20 @@ div:focus {
   background-color: rgba(31, 35, 41, 0.15) !important;
 }
 
+.de-tabs {
+  .el-tabs__header {
+    margin: 0 0 12px !important;
+  }
+  
+  .el-tabs__item {
+    height: 24px !important;
+    line-height: 24px !important;
+    margin-bottom: 9px !important;
+    padding: 0 12px !important;
+    font-size: 16px !important;
+  }
+}
+
 .el-tabs__item:not(.is-active) {
   font-weight: 400 !important;
 }
@@ -915,19 +929,19 @@ div:focus {
     margin-right: 8.67px;
   }
 }
-.de-message-fail {
-  border: 1px solid #f54a45 !important;
-  background: #fef1f1 !important;
+.de-message-error {
+  border: 1px solid var(--deDanger, #f54a45) !important;
+  background: var(--deWhitemsgDeDanger, #fef1f1) !important;
   i {
-    color: #f54a45;
+    color: var(--deDanger, #f54a45);
   }
 }
 
 .de-message-success {
-  border: 1px solid #34c724 !important;
-  background: #f0fbef !important;
+  border: 1px solid var(--deSuccess, #34c724) !important;
+  background: var(--deWhitemsgDeSuccess, #f0fbef) !important;
   i {
-    color: #34c724;
+    color: var(--deSuccess, #34c724);
   }
 }
 
@@ -975,3 +989,178 @@ div:focus {
     border: none !important;
   }
 }
+
+
+.de-form-item { 
+  .el-form-item__label {
+    width: 100% !important;
+    text-align: left;
+    margin-bottom: 8px;
+    height: 22px;
+    line-height: 22px !important;
+    position: relative;
+  }
+
+    .el-form-item.is-required:not(.is-no-asterisk)
+    > .el-form-item__label:before {
+    display: none;
+  }
+
+    .el-form-item.is-required:not(.is-no-asterisk)
+    > .el-form-item__label::after {
+    content: "*";
+    color: #f54a45;
+    margin-left: 2px;
+  }
+ .el-form-item__content {
+    margin-left: 0 !important;
+  }
+
+  .el-form-item {
+    margin-bottom: 28px !important;
+  }
+
+  .tips-not-absolute {
+    z-index: 10;
+    position: relative;
+  }
+}
+
+.de-dialog-form {
+  .el-dialog__body {
+    padding: 0 24px 24px 24px;
+  }
+
+  .el-dialog__header {
+    padding: 24px;
+  }
+
+  .el-dialog__footer {
+    padding-top: 0;
+  }
+}
+
+.de-confirm {
+  border: none;
+  .el-message-box__header {
+    display: none;
+  }
+
+  .el-message-box__content {
+    padding: 24px;
+  }
+
+  .el-message-box__container {
+    display: flex;
+    align-items: center;
+  }
+  .el-message-box__status {
+    height: 22px;
+    width: 22px;
+    font-size: 22px !important;
+    margin-right: 17px;
+  }
+
+  .el-message-box__message {
+    //styleName: 中文/桌面端/四级标题 16 24 Medium;
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0px;
+    text-align: left;
+    color: #1f2329;
+  }
+
+  .el-message-box__btns {
+    padding: 0;
+  }
+
+  .de-confirm-btn {
+    height: 32px;
+    width: 80px;
+    border-radius: 4px;
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    text-align: center;
+    padding: 0;
+  }
+}
+
+.de-confirm-fail {
+  padding: 0 24px 24px 0 !important;
+  .el-message-box__status {
+    color: #ff8800 !important;
+  }
+}
+
+.de-use-html {
+  min-width: 420px;
+  width: auto !important;
+
+  .el-message-box__container {
+    position: relative;
+
+    .use-html {
+      //styleName: 中文/桌面端/正文 14 22 Regular;
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      letter-spacing: 0px;
+      text-align: left;
+      color: #1f2329;
+      display: inline-block;
+      margin-top: 8px;
+    }
+  }
+
+  .el-message-box__status {
+    position: absolute;
+    top: 1px;
+    transform: translateY(0);
+  }
+}
+
+.de-confirm-primary-btn {
+  background: var(--deSuccess, #3370ff) !important;
+  border: none !important;
+  color: #ffffff !important;
+
+  &:hover {
+    background: var(--deSuccessHover, #3370ff) !important;
+  }
+
+  &:active {
+    background: var(--deSuccessActive, #3370ff) !important;
+  }
+}
+
+.de-confirm-plain-cancel {
+  background: #ffffff !important;
+  border: 1px solid #bbbfc4 !important;
+  color: #1f2329 !important;
+}
+
+.de-confirm-danger-btn {
+  background: var(--deDanger, #f54a45) !important;
+  border: none !important;
+  color: #ffffff !important;
+  &:hover {
+    background: var(--deDangerHover, #f54a45) !important;
+  }
+
+  &:active {
+    background: var(--deDangerActive, #f54a45) !important;
+  }
+}
+
+.el-switch__label.is-active {
+  color: var(--deTextPrimary, #1F2329) !important;
+}
+
+.el-radio__input.is-checked:not(.is-disabled)+.el-radio__label {
+  color: var(--deTextPrimary, #1F2329) !important;
+}
\ No newline at end of file
diff --git a/frontend/src/views/panel/template/component/TemplateImport.vue b/frontend/src/views/panel/template/component/TemplateImport.vue
index 0b2dae2a86..878c3ab472 100644
--- a/frontend/src/views/panel/template/component/TemplateImport.vue
+++ b/frontend/src/views/panel/template/component/TemplateImport.vue
@@ -1,169 +1,222 @@
 <template>
-  <el-row v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
-    <el-row style="margin-top: 5px">
-      <el-col :span="4">{{ $t('commons.name') }}</el-col>
-      <el-col :span="16">
-        <el-input v-model="templateInfo.name" clearable size="mini" />
-      </el-col>
-      <el-col :span="4">
-        <el-button style="margin-left: 10px" class="el-icon-upload" size="small" type="primary" @click="goFile">{{ $t('panel.upload_template') }}</el-button>
-        <input id="input" ref="files" type="file" accept=".DET" hidden @change="handleFileChange">
-      </el-col>
-    </el-row>
+  <div
+    class="template-import"
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+  >
+    <el-form
+      ref="templateImportForm"
+      class="de-form-item"
+      :model="templateInfo"
+      :rules="templateInfoRules"
+    >
+      <el-form-item :label="$t('system_parameter_setting.template_name')" prop="name">
+        <el-row>
+          <el-col :span="19" style="padding-right: 2px;">
+            <el-input v-model="templateInfo.name" clearable size="small" />
+          </el-col>
+          <el-col :span="5" >
+            <deBtn
+              style="margin-left: 10px"
+              class="el-icon-upload2"
+              secondary
+              @click="goFile"
+              >{{ $t("panel.upload_template") }}</deBtn
+            >
+            <input
+              id="input"
+              ref="files"
+              type="file"
+              accept=".DET"
+              hidden
+              @change="handleFileChange"
+            />
+          </el-col>
+        </el-row>
+      </el-form-item>
+    </el-form>
     <el-row class="preview" :style="classBackground" />
-    <el-row class="root-class">
-      <el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
-      <el-button type="primary" size="mini" @click="save()">{{ $t('commons.confirm') }}</el-button>
+    <el-row class="de-root-class">
+      <deBtn secondary @click="cancel()">{{
+        $t("commons.cancel")
+      }}</deBtn>
+      <deBtn type="primary" @click="save()">{{
+        $t("commons.confirm")
+      }}</deBtn>
     </el-row>
-  </el-row>
+  </div>
 </template>
 
 <script>
-import { save, nameCheck } from '@/api/system/template'
+import { save, nameCheck } from "@/api/system/template";
+import msgCfm from "@/components/msgCfm/index";
+import { find } from "@/api/system/template";
 
 export default {
-
+  mixins: [msgCfm],
   props: {
     pid: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
-      tableRadio: null,
-      keyWordSearch: '',
-      columnLabel: this.$t('panel.belong_to_category'),
-      templateList: [],
       importTemplateInfo: {
-        snapshot: ''
+        snapshot: "",
       },
+      templateInfoRules: {
+        name: [
+          {
+            required: true,
+            message: this.$t("commons.input_content"),
+            trigger: "change",
+          },
+        ],
+      },
+      recover: false,
       templateInfo: {
-        level: '1',
+        level: "1",
         pid: this.pid,
-        name: '',
+        name: "",
         templateStyle: null,
         templateData: null,
         dynamicData: null,
         staticResource: null,
-        snapshot: ''
-      }
-    }
+        snapshot: "",
+      },
+    };
   },
   computed: {
     classBackground() {
       if (this.importTemplateInfo.snapshot) {
         return {
-          background: `url(${this.importTemplateInfo.snapshot}) no-repeat`
-        }
+          background: `url(${this.importTemplateInfo.snapshot}) no-repeat`,
+        };
       } else {
-        return {}
+        return {};
       }
-    }
+    },
+  },
+  created() {
+    this.showCurrentTemplate(this.pid);
   },
   methods: {
-    handleExceed(file) {
+    // selectRecover() {
+    //   this.recover = true;
+    //   this.templateInfo
+    //   this.$refs.templateImportForm.clearValidate();
+    // },
+    // validator(rule, value, callback) {
+    //   if (this.nameRepeat(value)) {
+        
+    //     callback(new Error(this.$t('commons.already_exists')));
+    //   } else {
+    //     callback();
+    //   }
+    // },
+    showCurrentTemplate(pid) {
+      find({ pid }).then((response) => {
+        this.nameList = response.data;
+      });
     },
+    // nameRepeat(value) {
+    //   if (!this.nameList || this.nameList.length === 0 || this.recover) {
+    //     return false;
+    //   }
+    //   return this.nameList.some((ele) => ele.name === value);
+    // },
     cancel() {
-      this.$emit('closeEditTemplateDialog')
+      this.$emit("closeEditTemplateDialog");
     },
     save() {
       if (!this.templateInfo.name) {
-        this.$warning(this.$t('chart.name_can_not_empty'))
-        return false
+        this.$warning(this.$t("chart.name_can_not_empty"));
+        return false;
       }
       if (!this.templateInfo.templateData) {
-        this.$warning(this.$t('chart.template_can_not_empty'))
-        return false
+        this.$warning(this.$t("chart.template_can_not_empty"));
+        return false;
       }
       const nameCheckRequest = {
         pid: this.templateInfo.pid,
         name: this.templateInfo.name,
-        optType: 'insert'
-      }
-      nameCheck(nameCheckRequest).then(response => {
-        if (response.data.indexOf('exist') > -1) {
-          this.$confirm(this.$t('template.exit_same_template_check'), this.$t('template.confirm_upload'), {
-            confirmButtonText: this.$t('template.override'),
-            cancelButtonText: this.$t('template.cancel'),
-            type: 'warning'
-          }).then(() => {
-            save(this.templateInfo).then(response => {
-              this.$message({
-                message: this.$t('commons.save_success'),
-                type: 'success',
-                showClose: true
-              })
-              this.$emit('closeEditTemplateDialog')
-            })
-          }).catch(() => {
-          })
+        optType: "insert",
+      };
+      nameCheck(nameCheckRequest).then((response) => {
+        if (response.data.indexOf("exist") > -1) {
+          const options = {
+          title: 'commons.prompt',
+          content: "system_parameter_setting.to_overwrite_them",
+          type: "primary",
+          cb: () => save(this.templateInfo).then((response) => {
+                this.openMessageSuccess("system_parameter_setting.import_succeeded");
+                this.$emit("closeEditTemplateDialog");
+              }),
+          confirmButtonText: this.$t('template.override')
+        };
+        this.handlerConfirm(options);
         } else {
-          save(this.templateInfo).then(response => {
-            this.$message({
-              message: this.$t('commons.save_success'),
-              type: 'success',
-              showClose: true
-            })
-            this.$emit('closeEditTemplateDialog')
-          })
+          save(this.templateInfo).then((response) => {
+            this.openMessageSuccess("system_parameter_setting.import_succeeded");
+            this.$emit("closeEditTemplateDialog");
+          });
         }
-      })
+      });
     },
     handleFileChange(e) {
-      const file = e.target.files[0]
-      const reader = new FileReader()
+      const file = e.target.files[0];
+      const reader = new FileReader();
       reader.onload = (res) => {
-        const result = res.target.result
-        this.importTemplateInfo = JSON.parse(result)
-        this.templateInfo.name = this.importTemplateInfo.name
-        this.templateInfo.templateStyle = this.importTemplateInfo.panelStyle
-        this.templateInfo.templateData = this.importTemplateInfo.panelData
-        this.templateInfo.snapshot = this.importTemplateInfo.snapshot
-        this.templateInfo.dynamicData = this.importTemplateInfo.dynamicData
-        this.templateInfo.staticResource = this.importTemplateInfo.staticResource
-        this.templateInfo.nodeType = 'template'
-      }
-      reader.readAsText(file)
+        const result = res.target.result;
+        this.importTemplateInfo = JSON.parse(result);
+        this.templateInfo.name = this.importTemplateInfo.name;
+        this.templateInfo.templateStyle = this.importTemplateInfo.panelStyle;
+        this.templateInfo.templateData = this.importTemplateInfo.panelData;
+        this.templateInfo.snapshot = this.importTemplateInfo.snapshot;
+        this.templateInfo.dynamicData = this.importTemplateInfo.dynamicData;
+        this.templateInfo.staticResource =
+          this.importTemplateInfo.staticResource;
+        this.templateInfo.nodeType = "template";
+      };
+      reader.readAsText(file);
     },
     goFile() {
-      this.$refs.files.click()
-    }
-
-  }
-}
+      this.$refs.files.click();
+    },
+  },
+};
 </script>
 
 <style scoped>
-
-.my_table ::v-deep .el-table__row>td{
+.my_table ::v-deep .el-table__row > td {
   /* 去除表格线 */
   border: none;
   padding: 0 0;
 }
 .my_table ::v-deep .el-table th.is-leaf {
   /* 去除上边框 */
-    border: none;
+  border: none;
 }
-.my_table ::v-deep .el-table::before{
+.my_table ::v-deep .el-table::before {
   /* 去除下边框 */
   height: 0;
 }
 
-  .root-class {
-    margin: 15px 0px 5px;
-    text-align: center;
-  }
-  .preview {
-    margin-top: 5px;
-    border:1px solid #E6E6E6;
-    height:300px !important;
-    overflow:auto;
-    background-size: 100% 100% !important;
-  }
-  .preview-show {
-    border-left:1px solid #E6E6E6;
-    height:300px;
-    background-size: 100% 100% !important;
-  }
+.de-root-class {
+  margin-top: 24px;
+  text-align: right;
+}
+.preview {
+  margin-top: -12px;
+  border: 1px solid #e6e6e6;
+  height: 300px !important;
+  overflow: auto;
+  background-size: 100% 100% !important;
+  border-radius: 4px;
+}
+.preview-show {
+  border-left: 1px solid #e6e6e6;
+  height: 300px;
+  background-size: 100% 100% !important;
+}
 </style>
diff --git a/frontend/src/views/panel/template/component/TemplateItem.vue b/frontend/src/views/panel/template/component/TemplateItem.vue
index 3a37bc7f13..05891e3f43 100644
--- a/frontend/src/views/panel/template/component/TemplateItem.vue
+++ b/frontend/src/views/panel/template/component/TemplateItem.vue
@@ -1,114 +1,127 @@
 <template>
-  <div class="testcase-template">
-    <div class="template-img" :style="classBackground">
-      <i class="el-icon-error" @click.stop="templateDelete" />
-      <i class="el-icon-edit" @click.stop="templateEdit" />
+  <div class="de-card-model">
+    <div class="card-img-model">
+      <img :src="model.snapshot" alt="" />
+    </div>
+    <div class="card-info">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        :content="model.name"
+        placement="top"
+      >
+        <span class="de-model-text">{{ model.name }}</span>
+      </el-tooltip>
+      <el-dropdown size="medium" trigger="click" @command="handleCommand">
+        <i class="el-icon-more"></i>
+        <el-dropdown-menu class="de-card-dropdown" slot="dropdown">
+          <slot>
+            <el-dropdown-item command="rename">
+              <i class="el-icon-edit"></i>
+              重命名
+            </el-dropdown-item>
+            <el-dropdown-item command="delete">
+              <i class="el-icon-delete"></i>
+              删除
+            </el-dropdown-item>
+          </slot>
+        </el-dropdown-menu>
+      </el-dropdown>
     </div>
-    <el-tooltip class="item" effect="light" :content="template.name" placement="bottom">
-      <span class="demonstration">{{ template.name }}</span>
-    </el-tooltip>
   </div>
 </template>
 
 <script>
-// eslint-disable-next-line no-unused-vars
-import { get, post } from '@/api/panel/panel'
 export default {
-  name: 'TemplateItem',
   props: {
-    template: {
+    model: {
       type: Object,
-      default() {
-        return {}
-      }
-    }
-  },
-  computed: {
-    classBackground() {
-      if (this.template.snapshot) {
-        return {
-          background: `url(${this.template.snapshot}) no-repeat`,
-          'background-size': `100% 100%`
-        }
-      } else {
-        return {}
-      }
-    }
+      default: () => {},
+    },
   },
   methods: {
-    templateDelete() {
-      this.$alert(this.$t('panel.confirm_delete') + this.$t('panel.template') + ': ' + this.template.name + '？', '', {
-        confirmButtonText: this.$t('panel.confirm'),
-        callback: (action) => {
-          if (action === 'confirm') {
-            this.$emit('templateDelete', this.template.id)
-          }
-        }
-      })
+    handleCommand(key) {
+      this.$emit("command", key);
     },
-    templateEdit() {
-      this.$emit('templateEdit', this.template)
-    },
-    handleDelete() {
-    }
-  }
-}
+  },
+};
 </script>
 
-<style scoped>
+<style lang="scss">
+.de-card-model {
+  width: 258px;
+  height: 184px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border: 1px solid var(--deCardStrokeColor, #dee0e3);
+  border-radius: 4px;
+  margin: 0 25px 25px 0;
+  .card-img-model {
+    border-bottom: 1px solid var(--deCardStrokeColor, #dee0e3);
+    height: 144px;
+    width: 100%;
 
-  .testcase-template {
-    display: inline-block;
-    margin: 10px 30px;
-    width: 150px;
+    img {
+      width: 100%;
+      height: 100%;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
   }
 
-  .demonstration {
-    display: block;
-    font-size: 14px;
-    color: gray;
-    text-align: center;
-    margin: 10px auto;
-    width: 150px;
-    white-space:nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
-  }
-
-  .template-img {
-    height: 112px;
-    width: 200px;
-    margin: 0 auto;
-    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
-    border: solid 2px #fff;
+  .card-info {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px 9px 12px;
     box-sizing: border-box;
-    border-radius: 3px;
+
+    .el-icon-more {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      font-size: 12px;
+      color: #646a73;
+      cursor: pointer;
+    }
+
+    .el-icon-more:hover {
+      background: rgba(31, 35, 41, 0.1);
+      border-radius: 4px;
+    }
+
+    .el-icon-more:active {
+      background: rgba(31, 35, 41, 0.2);
+      border-radius: 4px;
+    }
   }
 
-  .template-img:hover {
-    border: solid 1px #4b8fdf;
-    border-radius: 3px;
-    color: deepskyblue;
-    cursor: pointer;
+  .de-model-text {
+    font-family: "PingFang SC";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    color: #1f2329;
+    display: inline-block;
+    width: 90%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin-right: 10px;
   }
+}
 
-  .template-img > i{
-    display:none;
-    float: right;
-    color: gray;
-    margin: 2px;
+.de-card-model:hover {
+  box-shadow: 0px 6px 24px rgba(31, 35, 41, 0.08);
+}
+
+.de-card-dropdown {
+  margin-top: 0 !important;
+  .popper__arrow {
+    display: none !important;
   }
-
-  .template-img > i:hover {
-    color: red;
-  }
-
-  .template-img:hover > .el-icon-error {
-    display: inline;
-  }
-
-  .template-img:hover > .el-icon-edit {
-    display: inline;
-  }
-
+}
 </style>
diff --git a/frontend/src/views/panel/template/component/TemplateList.vue b/frontend/src/views/panel/template/component/TemplateList.vue
index 11f50ced1e..45142edf22 100644
--- a/frontend/src/views/panel/template/component/TemplateList.vue
+++ b/frontend/src/views/panel/template/component/TemplateList.vue
@@ -1,163 +1,235 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
-  <el-col>
-    <el-row>
-      <el-button icon="el-icon-folder-add" type="primary" size="mini" @click="add()">
-        {{ $t('panel.add_category') }}
-      </el-button>
-    </el-row>
-    <el-row style="margin-top: 5px">
-      <el-row>
-        <el-input
-          v-model="templateFilterText"
-          :placeholder="$t('panel.filter_keywords')"
-          size="mini"
-          clearable
-          prefix-icon="el-icon-search"
-        />
-      </el-row>
-      <el-row style="margin-top: 5px">
-        <el-tree
-          ref="templateTree"
-          :default-expanded-keys="defaultExpandedKeys"
-          :data="templateList"
-          node-key="id"
-          :expand-on-click-node="true"
-          :filter-node-method="filterNode"
-          :highlight-current="true"
-          @node-click="nodeClick"
-        >
-          <span slot-scope="{ node, data }" class="custom-tree-node">
-            <span style="display: flex; flex: 1 1 0%; width: 0px;">
-              <span>
-                <i class="el-icon-folder" />
-              </span>
-              <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
+  <div class="de-template-list">
+    <el-input
+      v-model="templateFilterText"
+      :placeholder="$t('panel.filter_keywords')"
+      size="mini"
+      clearable
+      prefix-icon="el-icon-search"
+    />
+    <el-empty
+      v-if="!templateListComputed.length && templateFilterText === ''"
+      description="暂无分类"
+    ></el-empty>
+    <el-empty
+      v-if="!templateListComputed.length && templateFilterText !== ''"
+      description="没有找到相关内容"
+    ></el-empty>
+    <ul>
+      <li
+        :class="[{ select: activeTemplate === ele.id }]"
+        @click="nodeClick(ele)"
+        v-for="ele in templateListComputed"
+        :key="ele.name"
+      >
+        <i class="el-icon-folder folder" />
+        <span>{{ ele.name }}</span>
+        <span @click.stop class="more">
+          <el-dropdown
+            trigger="click"
+            size="small"
+            @command="(type) => clickMore(type, ele)"
+          >
+            <span class="el-dropdown-link">
+              <i class="el-icon-more"></i>
             </span>
-            <span>
-              <span @click.stop>
-                <el-dropdown trigger="click" size="small" @command="clickMore">
-                  <span class="el-dropdown-link">
-                    <el-button
-                      icon="el-icon-more"
-                      type="text"
-                      size="small"
-                    />
-                  </span>
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item icon="el-icon-upload2" :command="beforeClickMore('import',data,node)">
-                      {{ $t('panel.import') }}
-                    </el-dropdown-item>
-                    <el-dropdown-item icon="el-icon-edit" :command="beforeClickMore('edit',data,node)">
-                      {{ $t('panel.rename') }}
-                    </el-dropdown-item>
-                    <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
-                      {{ $t('panel.delete') }}
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
-              </span>
-            </span>
-          </span>
-
-        </el-tree>
-      </el-row>
-    </el-row>
-  </el-col>
+            <el-dropdown-menu class="de-template-dropdown" slot="dropdown">
+              <el-dropdown-item icon="el-icon-upload2" command="import">
+                {{ $t("panel.import") }}
+              </el-dropdown-item>
+              <el-dropdown-item icon="el-icon-edit" command="edit">
+                {{ $t("panel.rename") }}
+              </el-dropdown-item>
+              <el-dropdown-item icon="el-icon-delete" command="delete">
+                {{ $t("panel.delete") }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </span>
+      </li>
+    </ul>
+    <deBtn
+      v-if="templateFilterText === ''"
+      style="width: 100%"
+      icon="el-icon-plus"
+      secondary
+      @click="add()"
+    >
+      {{ $t("panel.add_category") }}
+    </deBtn>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'TemplateList',
-  components: { },
+  name: "TemplateList",
+  components: {},
   props: {
     templateType: {
       type: String,
-      default: ''
+      default: "",
     },
     templateList: {
       type: Array,
-      default: function() {
-        return []
-      }
-    }
+      default: function () {
+        return [];
+      },
+    },
   },
   data() {
     return {
-      templateFilterText: '',
-      defaultExpandedKeys: [],
-      currentTemplateShowList: []
-    }
+      templateFilterText: "",
+      activeTemplate: "",
+    };
   },
   computed: {
-
-  },
-  watch: {
-    templateFilterText(val) {
-      this.$refs.templateTree.filter(val)
-    }
+    templateListComputed() {
+      // if (!this.templateFilterText)
+      //   return [
+      //     ...this.templateList,
+      //     ...this.templateList,
+      //     ...this.templateList,
+      //     ...this.templateList,
+      //   ];
+      if (!this.templateFilterText) return [...this.templateList];
+      return this.templateList.filter((ele) =>
+        ele.name.includes(this.templateFilterText)
+      );
+    },
   },
   methods: {
-    clickAdd() {
-
-    },
-    clickMore(param) {
-      switch (param.type) {
-        case 'edit':
-          this.templateEdit(param.data)
-          break
-        case 'delete':
-          this.templateDelete(param.data)
-          break
-        case 'import':
-          this.templateImport(param.data)
-          break
+    clickMore(type, data) {
+      switch (type) {
+        case "edit":
+          this.templateEdit(data);
+          break;
+        case "delete":
+          this.templateDelete(data);
+          break;
+        case "import":
+          this.templateImport(data);
+          break;
       }
     },
-    beforeClickMore(type, data, node) {
-      return {
-        'type': type,
-        'data': data,
-        'node': node
-      }
-    },
-
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    },
-    nodeClick(data, node) {
-      this.$emit('showCurrentTemplate', data.id)
+    nodeClick({ id, label }) {
+      this.activeTemplate = id;
+      this.$emit("showCurrentTemplate", id, label);
     },
     add() {
-      this.$emit('showTemplateEditDialog', 'new')
+      this.$emit("showTemplateEditDialog", "new");
     },
     templateDelete(template) {
-      this.$alert(this.$t('panel.confirm_delete') + this.$t('panel.category') + ': ' + template.name + '？', '', {
-        confirmButtonText: this.$t('panel.confirm_delete'),
-        callback: (action) => {
-          if (action === 'confirm') {
-            this.$emit('templateDelete', template.id)
-          }
+      this.$alert(
+        this.$t("panel.confirm_delete") +
+          this.$t("panel.category") +
+          ": " +
+          template.name +
+          "？",
+        "",
+        {
+          confirmButtonText: this.$t("panel.confirm_delete"),
+          callback: (action) => {
+            if (action === "confirm") {
+              this.$emit("templateDelete", template.id);
+            }
+          },
         }
-      })
+      );
     },
     templateEdit(template) {
-      this.$emit('templateEdit', template)
+      this.$emit("templateEdit", template);
     },
     templateImport(template) {
-      this.$emit('templateImport', template.id)
-    }
-  }
-}
+      this.$emit("templateImport", template.id);
+    },
+  },
+};
 </script>
 
-<style scoped>
-  .custom-tree-node {
-    flex: 1;
+<style scoped lang="scss">
+.de-template-list {
+  height: 100%;
+  position: relative;
+  ul {
+    margin: 16px 0 20px 0;
+    padding: 0;
+    overflow-y: auto;
+    max-height: calc(100% - 90px);
+  }
+  li {
+    list-style: none;
+    width: 100%;
+    box-sizing: border-box;
+    height: 40px;
+    padding: 0 30px 0 12px;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    border-radius: 4px;
+    color: var(--deTextPrimary, #1F2329);
+    font-family: "PingFang SC";
+    font-style: normal;
+    font-weight: 500;
     font-size: 14px;
-    padding-right: 8px;
+    cursor: pointer;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .folder {
+      color: #8f959e;
+      margin-right: 9px;
+    }
+    .more {
+      position: absolute;
+      top: 50%;
+      right: 10px;
+      transform: translateY(-50%);
+      display: none;
+      .el-icon-more {
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        font-size: 12px;
+        color: #646a73;
+        cursor: pointer;
+      }
+
+      .el-icon-more:hover {
+        background: rgba(31, 35, 41, 0.1);
+        border-radius: 4px;
+      }
+
+      .el-icon-more:active {
+        background: rgba(31, 35, 41, 0.2);
+        border-radius: 4px;
+      }
+    }
+
+    &:hover {
+      background: rgba(31, 35, 41, 0.1);
+
+      .more {
+        display: block;
+      }
+    }
   }
+
+  li.select {
+    background: var(--deWhiteHover, #3370ff);
+    color: var(--primary, #3370ff);
+  }
+  .de-btn-fix {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+}
+.de-template-dropdown {
+  margin-top: 0 !important;
+  .popper__arrow {
+    display: none !important;
+  }
+}
 </style>
diff --git a/frontend/src/views/panel/template/index.vue b/frontend/src/views/panel/template/index.vue
index 116a0d923a..69861d18f1 100644
--- a/frontend/src/views/panel/template/index.vue
+++ b/frontend/src/views/panel/template/index.vue
@@ -1,25 +1,27 @@
 <template>
-  <de-container class="content-container">
-    <de-aside-container class="template-aside-container" is-template>
-      <el-tabs v-model="currentTemplateType" @tab-click="handleClick">
+  <de-layout-content>
+    <div class="de-template">
+      <el-tabs
+        class="de-tabs"
+        v-model="currentTemplateType"
+        @tab-click="handleClick"
+      >
         <el-tab-pane name="self">
-          <span slot="label"><i class="el-icon-star-off tablepanel-i" />{{ $t('panel.user_template') }}</span>
-          <!--v-if 重新渲染 强制刷新首行高亮属性-->
-          <template-list
-            v-if="currentTemplateType==='self'"
-            :template-type="currentTemplateType"
-            :template-list="templateList"
-            @templateDelete="templateDelete"
-            @templateEdit="templateEdit"
-            @showCurrentTemplate="showCurrentTemplate"
-            @templateImport="templateImport"
-            @showTemplateEditDialog="showTemplateEditDialog"
-          />
+          <span slot="label">{{ $t("panel.user_template") }}</span>
         </el-tab-pane>
         <el-tab-pane v-permission="['sys-template:read']" name="system">
-          <span slot="label" v-permission="['sys-template:read']"><i class="el-icon-document tablepanel-i" /> {{ $t('panel.sys_template') }}</span>
+          <span slot="label" v-permission="['sys-template:read']">
+            {{ $t("panel.sys_template") }}</span
+          >
+        </el-tab-pane>
+      </el-tabs>
+      <div
+        class="tabs-container flex-tabs"
+        v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+      >
+        <div class="de-tabs-left">
           <template-list
-            v-if="currentTemplateType==='system'"
+            ref="templateList"
             :template-type="currentTemplateType"
             :template-list="templateList"
             @templateDelete="templateDelete"
@@ -28,196 +30,370 @@
             @templateImport="templateImport"
             @showTemplateEditDialog="showTemplateEditDialog"
           />
-        </el-tab-pane>
-      </el-tabs>
-    </de-aside-container>
-    <de-main-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
-      <template-item
-        v-for="item in currentTemplateShowList"
-        :key="item.id"
-        :template="item"
-        @templateDelete="templateDelete"
-        @templateEdit="templateEdit"
-      />
-    </de-main-container>
-    <el-dialog :title="dialogTitle" :visible="editTemplate" :show-close="false" width="30%">
-      <el-form ref="templateEditForm" :model="templateEditForm" :rules="templateEditFormRules">
-        <el-form-item :label="$t('commons.name')" prop="name">
+        </div>
+        <div class="de-tabs-right">
+          <div v-if="currentTemplateLabel" class="active-template">
+            {{ currentTemplateLabel }}({{ currentTemplateShowList.length }})
+            <deBtn
+              type="primary"
+              @click="templateImport(currentTemplateId)"
+              icon="el-icon-upload2"
+            >
+              {{ $t("panel.import") }}
+            </deBtn>
+          </div>
+          <el-empty
+            v-if="!currentTemplateShowList.length"
+            description="暂无模版"
+          ></el-empty>
+          <div v-if="currentTemplateId !== ''" class="template-box">
+            <template-item
+              v-for="item in currentTemplateShowList"
+              :key="item.id"
+              :model="item"
+              @command="(key) => handleCommand(key, item)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      :title="dialogTitle"
+      :visible="editTemplate"
+      append-to-body
+      class="de-dialog-form"
+      width="600px"
+    >
+      <el-form
+        ref="templateEditForm"
+        class="de-form-item"
+        :model="templateEditForm"
+        :rules="templateEditFormRules"
+      >
+        <el-form-item
+          :label="dialogTitleLabel"
+          prop="name"
+        >
           <el-input v-model="templateEditForm.name" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="close()">{{ $t('commons.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveTemplateEdit(templateEditForm)">{{ $t('commons.confirm') }}
-        </el-button>
+        <deBtn secondary @click="close()">{{ $t("commons.cancel") }}</deBtn>
+        <deBtn type="primary" @click="saveTemplateEdit(templateEditForm)"
+          >{{ $t("commons.confirm") }}
+        </deBtn>
       </div>
     </el-dialog>
 
     <!--导入templatedialog-->
-    <el-dialog :title="templateDialog.title" :visible.sync="templateDialog.visible" :show-close="true" width="600px">
+    <el-dialog
+      :title="templateDialog.title"
+      :visible.sync="templateDialog.visible"
+      :show-close="true"
+      class="de-dialog-form"
+      width="600px"
+    >
       <template-import
         v-if="templateDialog.visible"
         :pid="templateDialog.pid"
         @closeEditTemplateDialog="closeEditTemplateDialog"
       />
     </el-dialog>
-  </de-container>
+  </de-layout-content>
 </template>
 
 <script>
-import DeMainContainer from '@/components/dataease/DeMainContainer'
-import DeContainer from '@/components/dataease/DeContainer'
-import DeAsideContainer from '@/components/dataease/DeAsideContainer'
-import TemplateList from './component/TemplateList'
-import TemplateItem from './component/TemplateItem'
-import TemplateImport from './component/TemplateImport'
-import { save, templateDelete, find } from '@/api/system/template'
-
+import DeLayoutContent from "@/components/business/DeLayoutContent";
+import TemplateList from "./component/TemplateList";
+import TemplateItem from "./component/TemplateItem";
+import TemplateImport from "./component/TemplateImport";
+import { save, templateDelete, find } from "@/api/system/template";
+import msgCfm from "@/components/msgCfm/index";
 export default {
-  name: 'PanelMain',
-  components: { DeMainContainer, DeContainer, DeAsideContainer, TemplateList, TemplateItem, TemplateImport },
+  name: "PanelMain",
+  mixins: [msgCfm],
+  components: { DeLayoutContent, TemplateList, TemplateItem, TemplateImport },
   data() {
     return {
       showShare: false,
       currentTemplateShowList: [],
-      currentPid: '',
-      currentTemplateType: 'self',
+      currentPid: "",
+      currentTemplateType: "self",
       templateEditFormRules: {
         name: [
-          { required: true, message: this.$t('commons.input_content'), trigger: 'change' },
-          { max: 50, message: this.$t('commons.char_can_not_more_50'), trigger: 'change' }
-        ]
+          { required: true, trigger: "blur", validator: this.roleValidator },
+          {
+            required: true,
+            message: this.$t("commons.input_content"),
+            trigger: "change",
+          },
+          {
+            max: 50,
+            message: this.$t("commons.char_can_not_more_50"),
+            trigger: "change",
+          },
+        ],
       },
       templateEditForm: {},
       editTemplate: false,
-      dialogTitle: '',
+      dialogTitle: "",
+      dialogTitleLabel: "",
+      currentTemplateLabel: "",
+      currentTemplateId: "",
       templateList: [],
+      formType: "",
+      originName: "",
       templateDialog: {
-        title: this.$t('panel.import_template'),
+        title: this.$t("panel.import_template"),
         visible: false,
-        pid: ''
+        pid: "",
+      },
+    };
+  },
+  computed: {
+    nameList() {
+      const { nodeType } = this.templateEditForm || {};
+      if ("template" === nodeType) {
+        return this.currentTemplateShowList.map((ele) => ele.label);
       }
-    }
+
+      if ("folder" === nodeType) {
+        return this.templateList.map((ele) => ele.label);
+      }
+      return [];
+    },
   },
   mounted() {
-    this.getTree()
+    this.getTree();
   },
   methods: {
-    handleClick(tab, event) {
-      this.getTree()
+    roleValidator(rule, value, callback) {
+      if (this.nameRepeat(value)) {
+        const { nodeType } = this.templateEditForm || {};
+        callback(
+          new Error(
+            this.$t(
+              `system_parameter_setting.${
+                "folder" === nodeType
+                  ? "name_already_exists_type"
+                  : "the_same_category"
+              }`
+            )
+          )
+        );
+      } else {
+        callback();
+      }
     },
-    showCurrentTemplate(pid) {
-      this.currentTemplateId = pid
+    nameRepeat(value) {
+      if (!this.nameList || this.nameList.length === 0) {
+        return false;
+      }
+      // 编辑场景 不能 因为名称重复而报错
+      if (this.formType === "edit" && this.originName === value) {
+        return false;
+      }
+      return this.nameList.some((name) => name === value);
+    },
+    handleCommand(key, data) {
+      switch (key) {
+        case "rename":
+          this.templateEdit(data);
+          break;
+        case "delete":
+          this.templateDeleteConfirm(data);
+          break;
+        default:
+          break;
+      }
+    },
+    templateDeleteConfirm(template) {
+      // const options = {
+      //   title: 'jkjhjjhhkh',
+      //   showCancelButton: false,
+      //   type: 'primary',
+      // }
+      // this.handlerConfirm(options);
+      // return
+      this.$alert(
+        this.$t("panel.confirm_delete") +
+          this.$t("panel.template") +
+          ": " +
+          this.template.name +
+          "？",
+        "",
+        {
+          confirmButtonText: this.$t("panel.confirm"),
+          callback: (action) => {
+            if (action === "confirm") {
+              this.templateDelete(template.id);
+            }
+          },
+        }
+      );
+    },
+    handleClick(tab, event) {
+      this.getTree();
+    },
+    showCurrentTemplate(pid, label) {
+      this.currentTemplateId = pid;
+      this.currentTemplateLabel = label;
       if (this.currentTemplateId) {
-        find({ pid: this.currentTemplateId }).then(response => {
-          this.currentTemplateShowList = response.data
-        })
+        find({ pid: this.currentTemplateId }).then((response) => {
+          this.currentTemplateShowList = response.data;
+        });
       }
     },
     templateDelete(id) {
       if (id) {
-        templateDelete(id).then(response => {
+        templateDelete(id).then((response) => {
           this.$message({
-            message: this.$t('commons.delete_success'),
-            type: 'success',
-            showClose: true
-          })
-          this.getTree()
-        })
+            message: this.$t("commons.delete_success"),
+            type: "success",
+            showClose: true,
+          });
+          this.getTree();
+        });
       }
     },
     showTemplateEditDialog(type, templateInfo) {
-      if (type === 'edit') {
-        this.dialogTitle = this.$t('commons.edit')
-        this.templateEditForm = JSON.parse(JSON.stringify(templateInfo))
+      this.templateEditForm = null;
+      this.formType = type;
+      if (type === "edit") {
+        this.templateEditForm = JSON.parse(JSON.stringify(templateInfo));
+        this.dialogTitle =  this.$t(`system_parameter_setting.${"folder" === this.templateEditForm.nodeType ? 'edit_classification' : 'edit_template'}`);
+        this.originName = this.templateEditForm.label;
       } else {
-        this.dialogTitle = this.$t('commons.create')
-        this.templateEditForm = { name: '', nodeType: 'folder', templateType: this.currentTemplateType, level: 0 }
+        this.dialogTitle = this.$t("panel.add_category");
+        this.templateEditForm = {
+          name: "",
+          nodeType: "folder",
+          templateType: this.currentTemplateType,
+          level: 0,
+        };
       }
-      this.editTemplate = true
+      this.dialogTitleLabel = this.$t(`system_parameter_setting.${ "folder" === this.templateEditForm.nodeType ? 'classification_name' : 'template_name'}`)
+      this.editTemplate = true;
     },
     templateEdit(templateInfo) {
-      this.showTemplateEditDialog('edit', templateInfo)
+      this.showTemplateEditDialog("edit", templateInfo);
     },
     saveTemplateEdit(templateEditForm) {
-      this.$refs['templateEditForm'].validate((valid) => {
+      this.$refs["templateEditForm"].validate((valid) => {
         if (valid) {
-          save(templateEditForm).then(response => {
-            this.close()
-            this.$message({
-              message: this.$t('commons.save_success'),
-              type: 'success',
-              showClose: true
-            })
-            this.getTree()
-          })
+          save(templateEditForm).then((response) => {
+            this.close();
+            this.openMessageSuccess(
+              `system_parameter_setting.${
+                this.templateEditForm.id
+                  ? "rename_succeeded"
+                  : "added_successfully"
+              }`
+            );
+            this.getTree();
+          });
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
     close() {
-      this.$refs['templateEditForm'].resetFields()
-      this.editTemplate = false
+      this.$refs["templateEditForm"].resetFields();
+      this.editTemplate = false;
     },
     getTree() {
       const request = {
         templateType: this.currentTemplateType,
-        level: '0'
-      }
-      find(request).then(res => {
-        this.templateList = res.data
-        this.showFirst()
-      })
+        level: "0",
+      };
+      find(request).then((res) => {
+        this.templateList = res.data;
+        this.showFirst();
+      });
     },
     showFirst() {
       // 判断是否默认点击第一条
       if (this.templateList && this.templateList.length > 0) {
-        let showFirst = true
-        this.templateList.forEach(template => {
+        let showFirst = true;
+        this.templateList.forEach((template) => {
           if (template.id === this.currentTemplateId) {
-            showFirst = false
+            showFirst = false;
           }
-        })
+        });
         if (showFirst) {
           this.$nextTick().then(() => {
-            const firstNode = document.querySelector('.el-tree-node')
-            firstNode.click()
-          })
+            const [obj = {}] = this.templateList;
+            this.$refs.templateList.nodeClick(obj);
+          });
         } else {
-          this.showCurrentTemplate(this.currentTemplateId)
+          this.showCurrentTemplate(this.currentTemplateId);
         }
       } else {
-        this.currentTemplateShowList = []
+        this.currentTemplateShowList = [];
       }
     },
     closeEditTemplateDialog() {
-      this.templateDialog.visible = false
-      this.showCurrentTemplate(this.templateDialog.pid)
+      this.templateDialog.visible = false;
+      this.showCurrentTemplate(this.templateDialog.pid);
     },
     templateImport(pid) {
-      this.templateDialog.visible = true
-      this.templateDialog.pid = pid
+      this.templateDialog.visible = true;
+      this.templateDialog.pid = pid;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.de-template {
+  height: 100%;
+  background-color: var(--MainBG, #f5f6f7);
+
+  .tabs-container {
+    height: calc(100% - 48px);
+    background: var(--ContentBG, #ffffff);
+    overflow-x: auto;
+  }
+
+  .flex-tabs {
+    display: flex;
+    background: #f5f6f7;
+  }
+
+  .de-tabs-left {
+    background: #fff;
+    width: 269px;
+    border-right: 1px solid rgba(31, 35, 41, 0.15);
+    padding: 24px;
+  }
+
+  .de-tabs-right {
+    flex: 1;
+    background: #fff;
+    padding: 24px;
+    overflow: hidden;
+
+    .template-box {
+      display: flex;
+      flex-wrap: wrap;
+      overflow-y: auto;
+      box-sizing: border-box;
+      height: calc(100% - 10px);
+      width: 100%;
+      padding-bottom: 24px;
+    }
+
+    .active-template {
+      margin: 4px 0 20px 0;
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: var(--deTextPrimary, #1f2329);
     }
   }
 }
-</script>
-
-<style scoped>
-  .el-card-template {
-    min-width: 260px;
-    min-width: 460px;
-    width: 100%;
-    height: 100%;
-  }
-
-  .content-container{
-    padding: 20px!important;
-    overflow: hidden;
-    height: calc(100vh - 56px)!important;
-  }
-
-  .template-aside-container{
-    height: calc(100vh - 96px)!important;
-  }
-</style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/SysParam/BasicSetting.vue b/frontend/src/views/system/SysParam/BasicSetting.vue
index 5d345d9167..ecf07106c0 100644
--- a/frontend/src/views/system/SysParam/BasicSetting.vue
+++ b/frontend/src/views/system/SysParam/BasicSetting.vue
@@ -1,95 +1,87 @@
 <template>
   <div>
+    <operater title="system_parameter_setting.basic_setting">
+      <deBtn type="primary" v-if="showEdit" @click="edit">{{
+          $t("commons.edit")
+      }}</deBtn>
+      <deBtn v-if="showCancel" secondary @click="cancel">{{
+          $t("commons.cancel")
+      }}</deBtn>
+      <deBtn v-if="showSave" type="primary" :disabled="disabledSave" size="small" @click="save('formInline')">
+        {{ $t("commons.save") }}
+      </deBtn>
+    </operater>
+
     <!--基础配置表单-->
-    <el-form
-      ref="formInline"
-      v-loading="loading"
-      :model="formInline"
-      :rules="rules"
-      class="demo-form-inline"
-      :disabled="show"
-      size="small"
-    >
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('system_parameter_setting.front_time_out')" prop="frontTimeOut">
-            <el-input
-              v-model="formInline.frontTimeOut"
-              :placeholder="$t('system_parameter_setting.empty_front')"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('system_parameter_setting.msg_time_out')" prop="msgTimeOut">
-            <el-input
-              v-model="formInline.msgTimeOut"
-              :placeholder="$t('system_parameter_setting.empty_msg')"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
+    <el-form ref="formInline" v-loading="loading" :model="formInline" :rules="rules"
+      class="demo-form-inline de-form-item" :disabled="show" label-width="80px" label-position="right" size="small">
+      <el-form-item prop="frontTimeOut">
+        <template slot="label">
+          {{ $t('system_parameter_setting.request_timeout')}}
+          <el-tooltip class="item" effect="dark" :content="$t('system_parameter_setting.front_time_out')"
+            placement="top">
+            <i class="el-icon-warning-outline tips"></i>
+          </el-tooltip>
+        </template>
+        <el-input v-model="formInline.frontTimeOut" :placeholder="$t('system_parameter_setting.empty_front')"><template
+            slot="append">{{ $t("panel.second") }}</template></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('system_parameter_setting.message_retention_time')" prop="msgTimeOut">
+        <el-input v-model="formInline.msgTimeOut" :placeholder="$t('system_parameter_setting.empty_msg')"><template
+            slot="append">天</template></el-input>
+      </el-form-item>
 
-      <el-row v-if="loginTypes.length > 1">
-        <el-col>
-          <el-form-item :label="$t('system_parameter_setting.login_type')" prop="loginType">
-            <el-radio-group v-model="formInline.loginType">
-              <el-radio :label="0" size="mini">{{ $t('login.default_login') }}</el-radio>
-              <el-radio v-if="loginTypes.includes(1)" :label="1" size="mini">LDAP</el-radio>
-              <el-radio v-if="loginTypes.includes(2)" :label="2" size="mini">OIDC</el-radio>
-              <el-radio v-if="loginTypes.includes(3)" :label="3" size="mini">CAS</el-radio>
-            </el-radio-group>
+      <el-form-item v-if="loginTypes.length > 1" :label="$t('system_parameter_setting.login_type')" prop="loginType">
+        <el-radio-group v-model="formInline.loginType">
+          <el-radio :label="0" size="mini">{{
+              $t("login.default_login")
+          }}</el-radio>
+          <el-radio v-if="loginTypes.includes(1)" :label="1" size="mini">LDAP</el-radio>
+          <el-radio v-if="loginTypes.includes(2)" :label="2" size="mini">OIDC</el-radio>
+          <el-radio v-if="loginTypes.includes(3)" :label="3" size="mini">CAS</el-radio>
+        </el-radio-group>
+      </el-form-item>
 
-          </el-form-item>
-
-        </el-col>
-      </el-row>
-      <el-row v-if="loginTypes.includes(3)">
+      <!-- <el-row v-if="loginTypes.includes(3)">
         <el-button class="pwd-tips" type="text">{{ $t('system_parameter_setting.cas_reset') + '[/cas/reset/{adminAcount}/{adminPwd}]' }}</el-button>
-      </el-row>
+      </el-row> -->
 
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('display.openMarketPage')">
-            <el-checkbox v-model="formInline.openMarketPage" true-label="true" false-label="false" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('display.openHomePage')">
-            <el-checkbox v-model="formInline.openHomePage" true-label="true" false-label="false" />
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <el-form-item :label="
+        $t('commons.yes') + $t('commons.no') + $t('display.openMarketPage')
+      ">
+        <el-radio-group v-model="formInline.openMarketPage">
+          <el-radio label="true" size="mini">{{ $t("commons.yes") }}</el-radio>
+          <el-radio label="false" size="mini">{{ $t("commons.no") }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
 
+      <el-form-item :label="
+        $t('commons.yes') + $t('commons.no') + $t('display.openHomePage')
+      " prop="openHomePage">
+        <el-radio-group v-model="formInline.openHomePage">
+          <el-radio label="true" size="mini">{{ $t("commons.yes") }}</el-radio>
+          <el-radio label="false" size="mini">{{ $t("commons.no") }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
     </el-form>
-
-    <div>
-
-      <el-button v-if="showEdit" size="small" @click="edit">{{ $t('commons.edit') }}</el-button>
-      <el-button v-if="showSave" type="success" :disabled="disabledSave" size="small" @click="save('formInline')">
-        {{ $t('commons.save') }}
-      </el-button>
-      <el-button v-if="showCancel" type="info" size="small" @click="cancel">{{ $t('commons.cancel') }}</el-button>
-    </div>
   </div>
 </template>
 
 <script>
-
-import { basicInfo, updateInfo } from '@/api/system/basic'
-import { ldapStatus, oidcStatus, casStatus } from '@/api/user'
-import bus from '@/utils/bus'
+import { basicInfo, updateInfo } from "@/api/system/basic";
+import { ldapStatus, oidcStatus, casStatus } from "@/api/user";
+import bus from "@/utils/bus";
+import operater from "./operater";
+import msgCfm from '@/components/msgCfm'
 export default {
-  name: 'EmailSetting',
+  name: "EmailSetting",
+  mixins: [msgCfm],
+  components: {
+    operater,
+  },
   data() {
     return {
       formInline: {},
-      input: '',
-      visible: true,
       showEdit: true,
       showSave: false,
       showCancel: false,
@@ -100,134 +92,175 @@ export default {
       rules: {
         frontTimeOut: [
           {
-            pattern: '^([0-9]|\\b[1-9]\\d\\b|\\b[1-2]\\d\\d\\b|\\b300\\b)$', // 修改了正则表达式，让其正确匹配0-300的数值
-            message: this.$t('system_parameter_setting.front_error'),
-            trigger: 'blur'
-          }
+            pattern: "^([0-9]|\\b[1-9]\\d\\b|\\b[1-2]\\d\\d\\b|\\b300\\b)$", // 修改了正则表达式，让其正确匹配0-300的数值
+            message: this.$t("system_parameter_setting.front_error"),
+            trigger: "blur",
+            required: true,
+          },
         ],
         msgTimeOut: [
           {
-            pattern: '^([1-9]|[1-9][0-9]|[1-2][0-9][0-9]|3[0-5][0-9]|36[0-5])$',
-            message: this.$t('system_parameter_setting.msg_error'),
-            trigger: 'blur'
-          }
-        ]
+            pattern: "^([1-9]|[1-9][0-9]|[1-2][0-9][0-9]|3[0-5][0-9]|36[0-5])$",
+            message: this.$t("system_parameter_setting.msg_error"),
+            trigger: "blur",
+            required: true,
+          },
+        ],
       },
-      originLoginType: null
-    }
-  },
-  computed: {
-
+      originLoginType: null,
+    };
   },
+  computed: {},
   beforeCreate() {
-    ldapStatus().then(res => {
+    ldapStatus().then((res) => {
       if (res.success && res.data) {
-        this.loginTypes.push(1)
+        this.loginTypes.push(1);
       }
-    })
+    });
 
-    oidcStatus().then(res => {
+    oidcStatus().then((res) => {
       if (res.success && res.data) {
-        this.loginTypes.push(2)
+        this.loginTypes.push(2);
       }
-    })
+    });
 
-    casStatus().then(res => {
+    casStatus().then((res) => {
       if (res.success && res.data) {
-        this.loginTypes.push(3)
+        this.loginTypes.push(3);
       }
-    })
+    });
   },
   created() {
-    this.query()
+    this.query();
   },
   methods: {
-
     query() {
-      basicInfo().then(response => {
-        this.formInline = response.data
+      basicInfo().then((response) => {
+        this.formInline = response.data;
 
         if (this.formInline && !this.formInline.loginType) {
-          this.formInline.loginType = 0
+          this.formInline.loginType = 0;
         }
         if (!this.originLoginType) {
-          this.originLoginType = this.formInline.loginType
+          this.originLoginType = this.formInline.loginType;
         }
 
         this.$nextTick(() => {
-          this.$refs.formInline.clearValidate()
-        })
-      })
+          this.$refs.formInline.clearValidate();
+        });
+      });
     },
 
     edit() {
-      this.showEdit = false
-      this.showSave = true
-      this.showCancel = true
-      this.show = false
+      this.showEdit = false;
+      this.showSave = true;
+      this.showCancel = true;
+      this.show = false;
     },
     save(formInline) {
       const param = [
-        { paramKey: 'basic.frontTimeOut', paramValue: this.formInline.frontTimeOut, type: 'text', sort: 1 },
-        { paramKey: 'basic.msgTimeOut', paramValue: this.formInline.msgTimeOut, type: 'text', sort: 2 },
-        { paramKey: 'basic.loginType', paramValue: this.formInline.loginType, type: 'text', sort: 3 },
-        { paramKey: 'ui.openHomePage', paramValue: this.formInline.openHomePage, type: 'text', sort: 13 },
-        { paramKey: 'ui.openMarketPage', paramValue: this.formInline.openMarketPage, type: 'text', sort: 14 }
-      ]
+        {
+          paramKey: "basic.frontTimeOut",
+          paramValue: this.formInline.frontTimeOut,
+          type: "text",
+          sort: 1,
+        },
+        {
+          paramKey: "basic.msgTimeOut",
+          paramValue: this.formInline.msgTimeOut,
+          type: "text",
+          sort: 2,
+        },
+        {
+          paramKey: "basic.loginType",
+          paramValue: this.formInline.loginType,
+          type: "text",
+          sort: 3,
+        },
+        {
+          paramKey: "ui.openHomePage",
+          paramValue: this.formInline.openHomePage,
+          type: "text",
+          sort: 13,
+        },
+        {
+          paramKey: "ui.openMarketPage",
+          paramValue: this.formInline.openMarketPage,
+          type: "text",
+          sort: 14,
+        },
+      ];
 
-      this.$refs[formInline].validate(valid => {
+      this.$refs[formInline].validate((valid) => {
         if (valid) {
-          const needWarn = this.formInline.loginType === 3 && this.originLoginType !== 3
+          const needWarn =
+            this.formInline.loginType === 3 && this.originLoginType !== 3;
           if (needWarn) {
-            this.$confirm(this.$t('system_parameter_setting.cas_selected_warn'), '', {
-              confirmButtonText: this.$t('commons.confirm'),
-              cancelButtonText: this.$t('commons.cancel'),
-              type: 'warning'
-            }).then(() => {
-              this.saveHandler(param)
-            }).catch(() => {
-              // this.$info(this.$t('commons.delete_cancel'))
-            })
-            return
+            this.$confirm(
+              this.$t("system_parameter_setting.cas_selected_warn"),
+              "",
+              {
+                confirmButtonText: this.$t("commons.confirm"),
+                cancelButtonText: this.$t("commons.cancel"),
+                type: "warning",
+              }
+            )
+              .then(() => {
+                this.saveHandler(param);
+              })
+              .catch(() => {
+                // this.$info(this.$t('commons.delete_cancel'))
+              });
+            return;
           }
-          this.saveHandler(param)
+          this.saveHandler(param);
         } else {
           // this.result = false
         }
-      })
+      });
     },
     saveHandler(param) {
-      updateInfo(param).then(response => {
-        const flag = response.success
+      updateInfo(param).then((response) => {
+        const flag = response.success;
         if (flag) {
           if (response.data && response.data.needLogout) {
-            const casEnable = response.data.casEnable
-            bus.$emit('sys-logout', { casEnable })
-            return
+            const casEnable = response.data.casEnable;
+            bus.$emit("sys-logout", { casEnable });
+            return;
           }
-          this.$success(this.$t('commons.save_success'))
-          this.showEdit = true
-          this.showCancel = false
-          this.showSave = false
-          this.show = true
-          window.location.reload()
+          this.openMessageSuccess("commons.save_success");
+          this.showEdit = true;
+          this.showCancel = false;
+          this.showSave = false;
+          this.show = true;
+          window.location.reload();
         } else {
-          this.$message.error(this.$t('commons.save_failed'))
-        }
-      })
+        } this.openMessageSuccess("commons.save_failed", 'error');
+      });
     },
     cancel() {
-      this.showEdit = true
-      this.showCancel = false
-      this.showSave = false
-      this.show = true
-      this.query()
-    }
-
-  }
-}
+      this.showEdit = true;
+      this.showCancel = false;
+      this.showSave = false;
+      this.show = true;
+      this.query();
+    },
+  },
+};
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.demo-form-inline {
+  .tips {
+    position: absolute;
+    left: 100px;
+    top: 5px;
+    z-index: 10;
+  }
 
+  .el-radio {
+    margin-right: 0;
+    width: 156px;
+  }
+}
 </style>
diff --git a/frontend/src/views/system/SysParam/ClusterModeSetting.vue b/frontend/src/views/system/SysParam/ClusterModeSetting.vue
index 9e0d067251..f87c81dc49 100644
--- a/frontend/src/views/system/SysParam/ClusterModeSetting.vue
+++ b/frontend/src/views/system/SysParam/ClusterModeSetting.vue
@@ -1,138 +1,210 @@
 <template>
   <div>
-    <el-form ref="form" v-loading="loading"
-             :model="form"
-             :rules="rules"
-             class="demo-form-inline"
-             :disabled="show"
-             label-width="180px"
-             label-position="top"
-             size="small"
+    <operater title="system_parameter_setting.engine_mode_setting">
+      <deBtn v-if="showCancel" secondary @click="cancel">
+        {{ $t("commons.cancel") }}
+      </deBtn>
+      <deBtn secondary  @click="validaDatasource">
+        {{ $t("commons.validate") }}
+      </deBtn>
+      <deBtn v-if="showEdit" type="primary" @click="edit">
+        {{ $t("commons.edit") }}
+      </deBtn>
+      <deBtn v-if="showSave" type="primary"  @click="save">
+        {{ $t("commons.save") }}
+      </deBtn>
+    </operater>
+    <el-form
+      ref="form"
+      v-loading="loading"
+      :model="form"
+      :rules="rules"
+      class="de-form-item"
+      :disabled="show"
+      label-width="180px"
+      label-position="top"
+      size="small"
     >
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('datasource.doris_host')" prop="configuration.host">
-            <el-input v-model="form.configuration.host"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('datasource.data_base')" prop="configuration.dataBase">
-            <el-input v-model="form.configuration.dataBase"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('datasource.user_name')">
-            <el-input v-model="form.configuration.username"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('datasource.password')">
-            <el-input v-model="form.configuration.password" show-password/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('datasource.query_port')" prop="configuration.port">
-            <el-input v-model="form.configuration.port" autocomplete="off" type="number" min="0"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('datasource.http_port')" prop="configuration.httpPort">
-            <el-input v-model="form.configuration.httpPort" autocomplete="off" type="number" min="0"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <el-form-item
+        :label="$t('datasource.doris_host')"
+        prop="configuration.host"
+      >
+        <el-input v-model="form.configuration.host" />
+      </el-form-item>
+      <el-form-item
+        :label="$t('datasource.data_base')"
+        prop="configuration.dataBase"
+      >
+        <el-input v-model="form.configuration.dataBase" />
+      </el-form-item>
+      <el-form-item :label="$t('datasource.user_name')">
+        <el-input v-model="form.configuration.username" />
+      </el-form-item>
+      <el-form-item :label="$t('datasource.password')">
+        <el-input v-model="form.configuration.password" show-password />
+      </el-form-item>
+      <el-form-item
+        :label="$t('datasource.query_port')"
+        prop="configuration.port"
+      >
+        <el-input-number
+          controls-position="right"
+          v-model="form.configuration.port"
+          autocomplete="off"
+          type="number"
+          min="0"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('datasource.http_port')"
+        prop="configuration.httpPort"
+      >
+        <el-input-number
+          controls-position="right"
+          v-model="form.configuration.httpPort"
+          autocomplete="off"
+          type="number"
+          min="0"
+        />
+      </el-form-item>
 
-      <el-collapse>
-        <el-collapse-item :title="$t('datasource.priority')" name="1">
-          <el-form-item :label="$t('datasource.replication_num')" prop="configuration.replicationNum">
-            <el-input v-model="form.configuration.replicationNum" autocomplete="off" type="number" min="1"/>
-          </el-form-item>
-          <el-form-item :label="$t('datasource.bucket_num')" prop="configuration.bucketNum">
-            <el-input v-model="form.configuration.bucketNum" autocomplete="off" type="number" min="1"/>
-          </el-form-item>
-
-          <el-form-item :label="$t('datasource.initial_pool_size')" prop="configuration.initialPoolSize">
-            <el-input v-model="form.configuration.initialPoolSize" autocomplete="off" type="number" min="0" size="small"/>
-          </el-form-item>
-          <el-form-item :label="$t('datasource.min_pool_size')" prop="configuration.minPoolSize">
-            <el-input v-model="form.configuration.minPoolSize" autocomplete="off" type="number" min="0"/>
-          </el-form-item>
-          <el-form-item :label="$t('datasource.max_pool_size')" prop="configuration.maxPoolSize">
-            <el-input v-model="form.configuration.maxPoolSize" autocomplete="off" type="number" min="0"/>
-          </el-form-item>
-        </el-collapse-item>
-      </el-collapse>
+      <span @click="showPriority = !showPriority" class="de-expand"
+        >{{ $t("datasource.priority")
+        }}<i v-if="showPriority" class="el-icon-arrow-up"></i>
+        <i v-else class="el-icon-arrow-down"></i
+      ></span>
+      <template v-if="showPriority">
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item
+              :label="$t('datasource.replication_num')"
+              prop="configuration.replicationNum"
+            >
+              <el-input-number
+                controls-position="right"
+                v-model="form.configuration.replicationNum"
+                autocomplete="off"
+                type="number"
+                min="1"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              :label="$t('datasource.bucket_num')"
+              prop="configuration.bucketNum"
+            >
+              <el-input-number
+                controls-position="right"
+                v-model="form.configuration.bucketNum"
+                autocomplete="off"
+                type="number"
+                min="1"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item
+              :label="$t('datasource.initial_pool_size')"
+              prop="configuration.initialPoolSize"
+            >
+              <el-input-number
+                controls-position="right"
+                v-model="form.configuration.initialPoolSize"
+                autocomplete="off"
+                type="number"
+                min="0"
+                size="small"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              :label="$t('datasource.min_pool_size')"
+              prop="configuration.minPoolSize"
+            >
+              <el-input-number
+                controls-position="right"
+                v-model="form.configuration.minPoolSize"
+                autocomplete="off"
+                type="number"
+                min="0"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item
+              :label="$t('datasource.max_pool_size')"
+              prop="configuration.maxPoolSize"
+            >
+              <el-input-number
+                controls-position="right"
+                v-model="form.configuration.maxPoolSize"
+                autocomplete="off"
+                type="number"
+                min="0"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </template>
     </el-form>
-    <div>
-      <el-button type="primary" size="small" @click="validaDatasource">
-        {{ $t('commons.validate') }}
-      </el-button>
-      <el-button v-if="showEdit" size="small" @click="edit">
-        {{ $t('commons.edit') }}
-      </el-button>
-      <el-button v-if="showSave" type="success" size="small" @click="save">
-        {{ $t('commons.save') }}
-      </el-button>
-      <el-button v-if="showCancel" type="info" size="small" @click="cancel">
-        {{ $t('commons.cancel') }}
-      </el-button>
-    </div>
   </div>
 </template>
 
 <script>
-
-import {engineInfo, validate, save} from '@/api/system/engine'
+import { engineInfo, validate, save } from "@/api/system/engine";
 import i18n from "@/lang";
-
+import operater from "./operater";
+import msgCfm from '@/components/msgCfm'
 export default {
-  name: 'ClusterMode',
+  name: "ClusterMode",
+  mixins: [msgCfm],
+  components: {
+    operater,
+  },
   data() {
     return {
-      form:
-        {
-          type: 'engine_doris',
-          configuration: {
-            host: '',
-            dataBase: '',
-            username: '',
-            password: '',
-            port: '',
-            httpPort: 8030,
-            extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull',
-            replicationNum: 1,
-            bucketNum: 10,
-            minPoolSize: 5,
-            maxPoolSize: 50,
-            initialPoolSize: 5
-          }
+      showPriority: false,
+      form: {
+        type: "engine_doris",
+        configuration: {
+          host: "",
+          dataBase: "",
+          username: "",
+          password: "",
+          port: "",
+          httpPort: 8030,
+          extraParams:
+            "characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull",
+          replicationNum: 1,
+          bucketNum: 10,
+          minPoolSize: 5,
+          maxPoolSize: 50,
+          initialPoolSize: 5,
         },
+      },
       originConfiguration: {
-        host: '',
-        dataBase: '',
-        username: '',
-        password: '',
-        port: '',
+        host: "",
+        dataBase: "",
+        username: "",
+        password: "",
+        port: "",
         httpPort: 8030,
-        extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull',
+        extraParams:
+          "characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull",
         replicationNum: 1,
         bucketNum: 10,
         minPoolSize: 5,
         maxPoolSize: 50,
-        initialPoolSize: 5
+        initialPoolSize: 5,
       },
-      input: '',
+      input: "",
       visible: true,
       showEdit: true,
       showSave: false,
@@ -142,155 +214,224 @@ export default {
       disabledSave: false,
       loading: false,
       rules: {
-        'configuration.host': [
+        "configuration.host": [
           {
             required: true,
-            message: this.$t('datasource.please_input_host'),
-            trigger: ['change', 'blur']
-          }
+            message: this.$t("datasource.please_input_host"),
+            trigger: ["change", "blur"],
+          },
         ],
-        'configuration.port': [
+        "configuration.port": [
           {
             required: true,
-            message: this.$t('datasource.please_input_port'),
-            trigger: ['change', 'blur']
-          }
+            message: this.$t("datasource.please_input_port"),
+            trigger: ["change", "blur"],
+          },
         ],
-        'configuration.httpPort': [
+        "configuration.httpPort": [
           {
             required: true,
-            message: this.$t('datasource.please_input_port'),
-            trigger: ['change', 'blur']
-          }
+            message: this.$t("datasource.please_input_port"),
+            trigger: ["change", "blur"],
+          },
         ],
-        'configuration.dataBase': [
+        "configuration.dataBase": [
           {
             required: true,
-            message: this.$t('datasource.please_input_data_base'),
-            trigger: ['change', 'blur']
-          }
+            message: this.$t("datasource.please_input_data_base"),
+            trigger: ["change", "blur"],
+          },
         ],
-        'configuration.replicationNum': [
+        "configuration.replicationNum": [
           {
             required: true,
-            message: this.$t('datasource.please_input_replication_num'),
-            trigger: ['change', 'blur']
-          }
+            message: this.$t("datasource.please_input_replication_num"),
+            trigger: ["change", "blur"],
+          },
         ],
-        'configuration.bucketNum': [
+        "configuration.bucketNum": [
           {
             required: true,
-            message: this.$t('datasource.please_input_bucket_num'),
-            trigger: ['change', 'blur']
-          }
-        ]
+            message: this.$t("datasource.please_input_bucket_num"),
+            trigger: ["change", "blur"],
+          },
+        ],
+        "configuration.minPoolSize": [
+          {
+            required: true,
+            message: this.$t("datasource.commons.cannot_be_null"),
+            trigger: ["change", "blur"],
+          },
+        ],
+        "configuration.initialPoolSize": [
+          {
+            required: true,
+            message: this.$t("commons.cannot_be_null"),
+            trigger: ["change", "blur"],
+          },
+        ],
+        "configuration.maxPoolSize": [
+          {
+            required: true,
+            message: this.$t("datasource.commons.cannot_be_null"),
+            trigger: ["change", "blur"],
+          },
+        ],
       },
       allTypes: [
         {
-          name: 'engine_mysql',
-          label: 'MySQL',
-          type: 'jdbc',
-          extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'
-        }
-      ]
-    }
+          name: "engine_mysql",
+          label: "MySQL",
+          type: "jdbc",
+          extraParams:
+            "characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true",
+        },
+      ],
+    };
   },
 
   created() {
-    this.query()
+    this.query();
   },
   methods: {
     query() {
-      engineInfo().then(response => {
+      engineInfo().then((response) => {
         if (response.data.id) {
-          this.form = JSON.parse(JSON.stringify(response.data))
-          this.form.configuration = JSON.parse(this.form.configuration)
-          this.originConfiguration = JSON.parse(JSON.stringify(this.form.configuration))
+          this.form = JSON.parse(JSON.stringify(response.data));
+          this.form.configuration = JSON.parse(this.form.configuration);
+          this.originConfiguration = JSON.parse(
+            JSON.stringify(this.form.configuration)
+          );
         }
         this.$nextTick(() => {
-          this.$refs.form.clearValidate()
-        })
-      })
+          this.$refs.form.clearValidate();
+        });
+      });
     },
     edit() {
-      this.showEdit = false
-      this.showSave = true
-      this.showCancel = true
-      this.show = false
+      this.showEdit = false;
+      this.showSave = true;
+      this.showCancel = true;
+      this.show = false;
     },
     save() {
-      if (this.form.configuration.dataSourceType === 'jdbc' && (this.form.configuration.port <= 0 || this.form.configuration.httpPort <= 0)) {
-        this.$message.error(i18n.t('datasource.port_no_less_then_0'))
-        return
+      if (
+        this.form.configuration.dataSourceType === "jdbc" &&
+        (this.form.configuration.port <= 0 ||
+          this.form.configuration.httpPort <= 0)
+      ) {
+        this.$message.error(i18n.t("datasource.port_no_less_then_0"));
+        return;
       }
-      if (this.form.configuration.initialPoolSize < 0 || this.form.configuration.minPoolSize < 0 || this.form.configuration.maxPoolSize < 0) {
-        this.$message.error(i18n.t('datasource.no_less_then_0'))
-        return
+      if (
+        this.form.configuration.initialPoolSize < 0 ||
+        this.form.configuration.minPoolSize < 0 ||
+        this.form.configuration.maxPoolSize < 0
+      ) {
+        this.$message.error(i18n.t("datasource.no_less_then_0"));
+        return;
       }
-      this.$refs.form.validate(valid => {
+      this.$refs.form.validate((valid) => {
         if (!valid) {
-          return false
+          return false;
         }
-        const form = JSON.parse(JSON.stringify(this.form))
-        form.configuration = JSON.stringify(form.configuration)
-        save(form).then(res => {
-          this.showEdit = true
-          this.showCancel = false
-          this.showSave = false
-          this.show = true
-          this.originConfiguration = JSON.parse(JSON.stringify(this.form.configuration))
-          this.$success(i18n.t('commons.save_success'))
-        })
-      })
+        const form = JSON.parse(JSON.stringify(this.form));
+        form.configuration = JSON.stringify(form.configuration);
+        save(form).then((res) => {
+          this.showEdit = true;
+          this.showCancel = false;
+          this.showSave = false;
+          this.show = true;
+          this.originConfiguration = JSON.parse(
+            JSON.stringify(this.form.configuration)
+          );
+          this.openMessageSuccess("commons.save_success");
+        });
+      });
     },
     cancel() {
-      this.showEdit = true
-      this.showCancel = false
-      this.showSave = false
-      this.show = true
-      this.form.configuration = JSON.parse(JSON.stringify(this.originConfiguration))
+      this.showEdit = true;
+      this.showCancel = false;
+      this.showSave = false;
+      this.show = true;
+      this.form.configuration = JSON.parse(
+        JSON.stringify(this.originConfiguration)
+      );
     },
     changeType() {
       for (let i = 0; i < this.allTypes.length; i++) {
         if (this.allTypes[i].name === this.form.type) {
-          this.form.configuration.dataSourceType = this.allTypes[i].type
-          this.form.configuration.extraParams = this.allTypes[i].extraParams
+          this.form.configuration.dataSourceType = this.allTypes[i].type;
+          this.form.configuration.extraParams = this.allTypes[i].extraParams;
         }
       }
     },
     validaDatasource() {
-      if (!this.form.configuration.schema && this.form.type === 'oracle') {
-        this.$message.error(i18n.t('datasource.please_choose_schema'))
-        return
+      if (!this.form.configuration.schema && this.form.type === "oracle") {
+        this.$message.error(i18n.t("datasource.please_choose_schema"));
+        return;
       }
-      if (this.form.configuration.dataSourceType === 'jdbc' && (this.form.configuration.port <= 0 || this.form.configuration.httpPort <= 0)) {
-        this.$message.error(i18n.t('datasource.port_no_less_then_0'))
-        return
+      if (
+        this.form.configuration.dataSourceType === "jdbc" &&
+        (this.form.configuration.port <= 0 ||
+          this.form.configuration.httpPort <= 0)
+      ) {
+        this.$message.error(i18n.t("datasource.port_no_less_then_0"));
+        return;
       }
-      this.$refs.form.validate(valid => {
+      this.$refs.form.validate((valid) => {
         if (valid) {
-          const data = JSON.parse(JSON.stringify(this.form))
-          data.configuration = JSON.stringify(data.configuration)
-          validate(data).then(res => {
+          const data = JSON.parse(JSON.stringify(this.form));
+          data.configuration = JSON.stringify(data.configuration);
+          validate(data).then((res) => {
             if (res.success) {
-              this.$success(i18n.t('datasource.validate_success'))
+              this.openMessageSuccess("datasource.validate_success");
             } else {
               if (res.message.length < 2500) {
-                this.$error(res.message)
+                this.$error(res.message);
               } else {
-                this.$error(res.message.substring(0, 2500) + '......')
+                this.$error(res.message.substring(0, 2500) + "......");
               }
             }
-          })
+          });
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.de-expand {
+  font-family: PingFang SC;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: #3370ff;
+  cursor: pointer;
+  margin: 12px 0 16px 0;
+  display: inline-block;
+}
+.el-input-number {
+  width: 100%;
+  ::v-deep .el-input__inner {
+    text-align: left;
+  }
+
+  ::v-deep.el-input-number__decrease,
+  ::v-deep.el-input-number__increase {
+    background: transparent;
+  }
+
+  &.is-disabled {
+    .el-input-number__decrease {
+      border-right-color: #e4e7ed;
+    }
+
+    .el-input-number__increase {
+      border-bottom-color: #e4e7ed;
+    }
   }
 }
-</script>
-
-<style scoped>
-
-</style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/SysParam/EmailSetting.vue b/frontend/src/views/system/SysParam/EmailSetting.vue
index 722ce2c6be..75147b9384 100644
--- a/frontend/src/views/system/SysParam/EmailSetting.vue
+++ b/frontend/src/views/system/SysParam/EmailSetting.vue
@@ -1,111 +1,150 @@
 <template>
   <div>
+    <operater title="system_parameter_setting.mailbox_service_settings">
+      <deBtn v-if="showCancel" secondary  @click="cancel">{{
+        $t("commons.cancel")
+      }}</deBtn>
+      <deBtn
+        secondary
+        :disabled="disabledConnection"
+        @click="testConnection('formInline')"
+      >
+        {{ $t("system_parameter_setting.test_connection") }}
+      </deBtn>
+      <deBtn type="primary" v-if="showEdit"  @click="edit">{{
+        $t("commons.edit")
+      }}</deBtn>
+      <deBtn
+        v-if="showSave"
+        type="primary"
+        :disabled="disabledSave"
+        
+        @click="save('formInline')"
+      >
+        {{ $t("commons.save") }}
+      </deBtn>
+    </operater>
     <!--邮件表单-->
     <el-form
       ref="formInline"
       v-loading="loading"
       :model="formInline"
       :rules="rules"
-      class="demo-form-inline"
+      class="demo-form-inline de-form-item"
       :disabled="show"
       size="small"
     >
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('system_parameter_setting.SMTP_host')" prop="host">
-            <el-input
-              v-model="formInline.host"
-              :placeholder="$t('system_parameter_setting.SMTP_host')"
-              @input="change()"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('system_parameter_setting.SMTP_port')" prop="port">
-            <el-input
-              v-model="formInline.port"
-              :placeholder="$t('system_parameter_setting.SMTP_port')"
-              @input="change()"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('system_parameter_setting.SMTP_account')" prop="account">
-            <el-input
-              v-model="formInline.account"
-              :placeholder="$t('system_parameter_setting.SMTP_account')"
-              @input="change()"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('system_parameter_setting.SMTP_password')" prop="password">
-            <el-input
-              ref="input"
-              v-model="formInline.password"
-              :placeholder="$t('system_parameter_setting.SMTP_password')"
-              autocomplete="new-password"
-              show-password
-              type="text"
-              @focus="changeType"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col>
-          <el-form-item :label="$t('system_parameter_setting.test_recipients')">
-            <el-input
-              ref="input"
-              v-model="formInline.recipient"
-              :placeholder="$t('system_parameter_setting.test_recipients')"
-              autocomplete="new-password"
-              show-password
-              type="text"
-            />
-            <p style="color: #8a8b8d">({{ $t('system_parameter_setting.tip') }})</p>
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <el-form-item
+        :label="$t('system_parameter_setting.SMTP_host')"
+        prop="host"
+      >
+        <el-input
+          v-model="formInline.host"
+          :placeholder="$t('system_parameter_setting.SMTP_host')"
+          @input="change()"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('system_parameter_setting.SMTP_port')"
+        prop="port"
+      >
+        <el-input
+          v-model="formInline.port"
+          :placeholder="$t('system_parameter_setting.SMTP_port')"
+          @input="change()"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('system_parameter_setting.SMTP_account')"
+        prop="account"
+      >
+        <el-input
+          v-model="formInline.account"
+          :placeholder="$t('system_parameter_setting.SMTP_account')"
+          @input="change()"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('system_parameter_setting.SMTP_password')"
+        prop="password"
+      >
+        <el-input
+          ref="input"
+          v-model="formInline.password"
+          :placeholder="$t('system_parameter_setting.SMTP_password')"
+          autocomplete="new-password"
+          show-password
+          type="text"
+          @focus="changeType"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('system_parameter_setting.test_recipients')">
+        <template slot="label">
+          {{ $t("system_parameter_setting.test_recipients") }}
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="$t('system_parameter_setting.test_mail_recipient')"
+            placement="top"
+          >
+            <i class="el-icon-warning-outline tips-not-absolute"></i>
+          </el-tooltip>
+        </template>
+        <el-input
+          ref="input"
+          v-model="formInline.recipient"
+          :placeholder="$t('system_parameter_setting.test_recipients')"
+          autocomplete="new-password"
+          show-password
+          type="text"
+        />
+      </el-form-item>
+      <el-form-item label="邮箱服务器配置">
+        <el-checkbox v-model="formInline.ssl"
+          >开启SSL
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="$t('system_parameter_setting.to_enable_ssl')"
+            placement="top"
+          >
+            <i class="el-icon-warning-outline tips-not-absolute"></i>
+          </el-tooltip>
+        </el-checkbox>
 
+        <el-checkbox v-model="formInline.tls">
+          开启TSL
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="$t('system_parameter_setting.to_enable_tsl')"
+            placement="top"
+          >
+            <i class="el-icon-warning-outline tips-not-absolute"></i>
+          </el-tooltip>
+        </el-checkbox>
+      </el-form-item>
       <!---->
-      <div style="border: 0px;margin-bottom: 20px">
-        <el-checkbox v-model="formInline.ssl" :label="$t('system_parameter_setting.SSL')" />
-      </div>
-      <div style="border: 0px;margin-bottom: 20px">
-        <el-checkbox v-model="formInline.tls" :label="$t('system_parameter_setting.TLS')" />
-      </div>
       <template v-slot:footer />
     </el-form>
-    <div>
-      <el-button type="primary" :disabled="disabledConnection" size="small" @click="testConnection('formInline')">
-        {{ $t('system_parameter_setting.test_connection') }}
-      </el-button>
-      <el-button v-if="showEdit" size="small" @click="edit">{{ $t('commons.edit') }}</el-button>
-      <el-button v-if="showSave" type="success" :disabled="disabledSave" size="small" @click="save('formInline')">
-        {{ $t('commons.save') }}
-      </el-button>
-      <el-button v-if="showCancel" type="info" size="small" @click="cancel">{{ $t('commons.cancel') }}</el-button>
-    </div>
   </div>
 </template>
 
 <script>
-
-import { emailInfo, updateInfo, validate } from '@/api/system/email'
+import { emailInfo, updateInfo, validate } from "@/api/system/email";
+import operater from "./operater";
+import msgCfm from '@/components/msgCfm'
 
 export default {
-  name: 'EmailSetting',
+  name: "EmailSetting",
+  mixins: [msgCfm],
+  components: {
+    operater,
+  },
   data() {
     return {
       formInline: {},
-      input: '',
+      input: "",
       visible: true,
       showEdit: true,
       showSave: false,
@@ -118,122 +157,159 @@ export default {
         host: [
           {
             required: true,
-            message: this.$t('system_parameter_setting.host'),
-            trigger: ['change', 'blur']
-          }
+            message: this.$t("system_parameter_setting.host"),
+            trigger: ["change", "blur"],
+          },
         ],
         port: [
           {
             required: true,
-            message: this.$t('system_parameter_setting.port'),
-            trigger: ['change', 'blur']
-          }
+            message: this.$t("system_parameter_setting.port"),
+            trigger: ["change", "blur"],
+          },
         ],
         account: [
           {
             required: true,
-            message: this.$t('system_parameter_setting.account'),
-            trigger: ['change', 'blur']
-          }]
-      }
-    }
+            message: this.$t("system_parameter_setting.account"),
+            trigger: ["change", "blur"],
+          },
+        ],
+      },
+    };
   },
 
   created() {
-    this.query()
+    this.query();
   },
   methods: {
     changeType() {
-      this.$refs.input = 'password'
+      this.$refs.input = "password";
     },
     query() {
-      emailInfo().then(response => {
-        this.formInline = response.data
-        this.formInline.ssl = this.formInline.ssl === 'true'
-        this.formInline.tls = this.formInline.tls === 'true'
+      emailInfo().then((response) => {
+        this.formInline = response.data;
+        this.formInline.ssl = this.formInline.ssl === "true";
+        this.formInline.tls = this.formInline.tls === "true";
         this.$nextTick(() => {
-          this.$refs.formInline.clearValidate()
-        })
-      })
+          this.$refs.formInline.clearValidate();
+        });
+      });
     },
     change() {
-      if (!this.formInline.host || !this.formInline.port || !this.formInline.account) {
-        this.disabledConnection = true
-        this.disabledSave = true
+      if (
+        !this.formInline.host ||
+        !this.formInline.port ||
+        !this.formInline.account
+      ) {
+        this.disabledConnection = true;
+        this.disabledSave = true;
       } else {
-        this.disabledConnection = false
-        this.disabledSave = false
+        this.disabledConnection = false;
+        this.disabledSave = false;
       }
     },
     testConnection(formInline) {
       const param = {
-        'smtp.host': this.formInline.host,
-        'smtp.port': this.formInline.port,
-        'smtp.account': this.formInline.account,
-        'smtp.password': this.formInline.password,
-        'smtp.ssl': this.formInline.ssl,
-        'smtp.tls': this.formInline.tls,
-        'smtp.recipient': this.formInline.recipient
-      }
+        "smtp.host": this.formInline.host,
+        "smtp.port": this.formInline.port,
+        "smtp.account": this.formInline.account,
+        "smtp.password": this.formInline.password,
+        "smtp.ssl": this.formInline.ssl,
+        "smtp.tls": this.formInline.tls,
+        "smtp.recipient": this.formInline.recipient,
+      };
       this.$refs[formInline].validate((valid) => {
         if (valid) {
-          validate(param).then(response => {
-            this.$success(this.$t('commons.connection_successful'))
-          })
+          validate(param).then((response) => {
+          this.openMessageSuccess("commons.connection_successful");
+          });
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
     edit() {
-      this.showEdit = false
-      this.showSave = true
-      this.showCancel = true
-      this.show = false
+      this.showEdit = false;
+      this.showSave = true;
+      this.showCancel = true;
+      this.show = false;
     },
     save(formInline) {
-      this.showEdit = true
-      this.showCancel = false
-      this.showSave = false
-      this.show = true
+      this.showEdit = true;
+      this.showCancel = false;
+      this.showSave = false;
+      this.show = true;
       const param = [
-        { paramKey: 'smtp.host', paramValue: this.formInline.host, type: 'text', sort: 1 },
-        { paramKey: 'smtp.port', paramValue: this.formInline.port, type: 'text', sort: 2 },
-        { paramKey: 'smtp.account', paramValue: this.formInline.account, type: 'text', sort: 3 },
-        { paramKey: 'smtp.password', paramValue: this.formInline.password, type: 'password', sort: 4 },
-        { paramKey: 'smtp.ssl', paramValue: this.formInline.ssl, type: 'text', sort: 5 },
-        { paramKey: 'smtp.tls', paramValue: this.formInline.tls, type: 'text', sort: 6 },
-        { paramKey: 'smtp.recipient', paramValue: this.formInline.recipient, type: 'text', sort: 8 }
+        {
+          paramKey: "smtp.host",
+          paramValue: this.formInline.host,
+          type: "text",
+          sort: 1,
+        },
+        {
+          paramKey: "smtp.port",
+          paramValue: this.formInline.port,
+          type: "text",
+          sort: 2,
+        },
+        {
+          paramKey: "smtp.account",
+          paramValue: this.formInline.account,
+          type: "text",
+          sort: 3,
+        },
+        {
+          paramKey: "smtp.password",
+          paramValue: this.formInline.password,
+          type: "password",
+          sort: 4,
+        },
+        {
+          paramKey: "smtp.ssl",
+          paramValue: this.formInline.ssl,
+          type: "text",
+          sort: 5,
+        },
+        {
+          paramKey: "smtp.tls",
+          paramValue: this.formInline.tls,
+          type: "text",
+          sort: 6,
+        },
+        {
+          paramKey: "smtp.recipient",
+          paramValue: this.formInline.recipient,
+          type: "text",
+          sort: 8,
+        },
+      ];
 
-      ]
-
-      this.$refs[formInline].validate(valid => {
+      this.$refs[formInline].validate((valid) => {
         if (valid) {
-          updateInfo(param).then(response => {
-            const flag = response.success
+          updateInfo(param).then((response) => {
+            const flag = response.success;
             if (flag) {
-              this.$success(this.$t('commons.save_success'))
+              this.openMessageSuccess("commons.save_success");
             } else {
-              this.$message.error(this.$t('commons.save_failed'))
+              this.$message.error(this.$t("commons.save_failed"));
             }
-          })
+          });
         } else {
           // this.result = false
         }
-      })
+      });
     },
     cancel() {
-      this.showEdit = true
-      this.showCancel = false
-      this.showSave = false
-      this.show = true
-      this.query()
-    }
-
-  }
-}
+      this.showEdit = true;
+      this.showCancel = false;
+      this.showSave = false;
+      this.show = true;
+      this.query();
+    },
+  },
+};
 </script>
 
 <style scoped>
-
 </style>
diff --git a/frontend/src/views/system/SysParam/KettleSetting.vue b/frontend/src/views/system/SysParam/KettleSetting.vue
index fa4f9acdf0..2dad820057 100644
--- a/frontend/src/views/system/SysParam/KettleSetting.vue
+++ b/frontend/src/views/system/SysParam/KettleSetting.vue
@@ -1,232 +1,344 @@
 <template>
-  <el-col>
-    <el-row style="margin-top: 10px;">
-      <el-button icon="el-icon-circle-plus-outline" @click="create(undefined)">{{ $t('kettle.add') }}</el-button>
-      <fu-table :data="data">
-        <el-table-column prop="configuration.carte" :label="$t('kettle.carte')"/>
-        <el-table-column prop="configuration.port" :label="$t('kettle.port')"/>
+  <div class="kettle-setting">
+    <deBtn type="primary" icon="el-icon-plus" @click="create(undefined)">{{
+      $t("kettle.add")
+    }}</deBtn>
+    <div class="table-box">
+      <grid-table
+        :tableData="data"
+        :pagination="paginationConfig"
+        @size-change="sizeChange"
+        @current-change="currentChange"
+      >
+        <el-table-column
+          prop="configuration.carte"
+          :label="$t('kettle.carte')"
+        />
+        <el-table-column prop="configuration.port" :label="$t('kettle.port')" />
         <el-table-column prop="status" :label="$t('kettle.status')">
           <template slot-scope="scope">
-            <span v-if="scope.row.status === 'Error'"   style="color: red">{{ $t('datasource.invalid') }}</span>
-            <span v-if="scope.row.status === 'Success'" style="color: green">{{ $t('datasource.valid') }}</span>
+            <span
+              v-if="scope.row.status === 'Error'"
+              class="de-tag"
+              style="color: #646a73; background: rgba(31, 35, 41, 0.1)"
+              >{{ $t("datasource.invalid") }}</span
+            >
+            <span
+              v-if="scope.row.status === 'Success'"
+              class="de-tag"
+              style="color: green; background: rgba(52, 199, 36, 0.2)"
+              >{{ $t("datasource.valid") }}</span
+            >
           </template>
         </el-table-column>
-
-        <fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix/>
-      </fu-table>
-      <div class="pagination">
-        <fu-table-pagination :current-page.sync="paginationConfig.currentPage"
-                             :page-size.sync="paginationConfig.pageSize"
-                             :total="paginationConfig.total"
-                             @size-change="sizeChange"
-                             @current-change="currentChange"/>
-      </div>
-    </el-row>
-
-
-    <el-dialog v-dialogDrag :title="edit_dialog_title" :visible="show_dialog" :before-close="closeDialog"
-               :show-close="true" width="50%" class="dialog-css" append-to-body>
+        <el-table-column
+          slot="__operation"
+          :label="$t('commons.operating')"
+          fixed="right"
+          width="168"
+        >
+          <template slot-scope="scope">
+            <el-button
+              @click="create(scope.row)"
+              class="text-btn"
+              type="text"
+              >{{ $t("commons.edit") }}</el-button
+            >
+            <el-button
+              @click="validateById(scope.row)"
+              class="text-btn"
+              type="text"
+              >{{ $t("commons.validate") }}</el-button
+            >
+            <el-button @click="del(scope.row)" class="text-btn" type="text">{{
+              $t("commons.delete")
+            }}</el-button>
+          </template>
+        </el-table-column>
+      </grid-table>
+    </div>
+    <el-dialog
+      v-dialogDrag
+      :title="edit_dialog_title"
+      :visible="show_dialog"
+      :before-close="closeDialog"
+      :show-close="true"
+      width="50%"
+      class="dialog-css de-kettle"
+      append-to-body
+    >
       <el-col>
-        <el-form ref="kettleform" :form="form" :model="form" label-width="120px" :rules="rule">
+        <el-form
+          class="de-form-item"
+          ref="kettleform"
+          :form="form"
+          :model="form"
+          label-width="120px"
+          :rules="rule"
+        >
           <el-form-item :label="$t('kettle.carte')" prop="configuration.carte">
-            <el-input v-model="form.configuration.carte"/>
+            <el-input v-model="form.configuration.carte" />
           </el-form-item>
           <el-form-item :label="$t('kettle.port')" prop="configuration.port">
-            <el-input v-model="form.configuration.port" autocomplete="off" type="number" min="0"/>
+            <el-input-number
+              v-model="form.configuration.port"
+              controls-position="right"
+            />
           </el-form-item>
           <el-form-item :label="$t('kettle.user')" prop="configuration.user">
-            <el-input v-model="form.configuration.user"/>
+            <el-input v-model="form.configuration.user" />
           </el-form-item>
-          <el-form-item :label="$t('kettle.passwd')" prop="configuration.passwd">
-            <el-input v-model="form.configuration.passwd" show-password/>
+          <el-form-item
+            :label="$t('kettle.passwd')"
+            prop="configuration.passwd"
+          >
+            <el-input v-model="form.configuration.passwd" show-password />
           </el-form-item>
-
         </el-form>
       </el-col>
       <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="validate()">{{ $t('commons.validate') }}</el-button>
-        <el-button type="primary" size="mini" @click="save()">{{ $t('commons.save') }}</el-button>
+        <deBtn secondary @click="closeDialog">
+        {{ $t("commons.cancel") }}
+      </deBtn>
+        <deBtn secondary @click="validate()">{{
+          $t("commons.validate")
+        }}</deBtn>
+        <deBtn type="primary"  @click="save()">{{
+          $t("commons.confirm")
+        }}</deBtn>
       </div>
     </el-dialog>
-
-
-  </el-col>
+  </div>
 </template>
 
 <script>
-
-import {deleteKettle, validate, save, pageList, validateById} from '@/api/system/kettle'
+import {
+  deleteKettle,
+  validate,
+  save,
+  pageList,
+  validateById,
+} from "@/api/system/kettle";
 import i18n from "@/lang";
+import GridTable from "@/components/gridTable/index.vue";
+import msgCfm from '@/components/msgCfm'
 
 export default {
-  name: 'KettleSetting',
+  name: "KettleSetting",
+  components: { GridTable },
+  mixins: [msgCfm],
   data() {
     return {
-      columns: [],
-      buttons: [
-        {
-          label: this.$t('commons.edit'),
-          icon: 'el-icon-edit',
-          type: 'primary',
-          click: this.create
-        },
-        {
-          label: this.$t('commons.validate'),
-          icon: 'el-icon-success',
-          type: 'success',
-          click: this.validateById
-        },
-        {
-          label: this.$t('commons.delete'),
-          icon: 'el-icon-delete',
-          type: 'danger',
-          click: this.delete,
-        }
-      ],
-      last_condition: null,
       paginationConfig: {
         currentPage: 1,
         pageSize: 10,
-        total: 0
+        total: 0,
       },
       data: [],
       show_dialog: false,
-      edit_dialog_title: '',
+      edit_dialog_title: "",
       form: {
         configuration: {
-          carte: '',
-          port: '',
-          user: '',
-          passwd: ''
-        }
+          carte: "",
+          port: "",
+          user: "",
+          passwd: "",
+        },
       },
       rule: {
-        'configuration.carte': [{
-          required: true,
-          message: this.$t('commons.required'),
-          trigger: 'blur'
-        }],
-        'configuration.port': [{
-          required: true,
-          message: this.$t('commons.required'),
-          trigger: 'blur'
-        }],
-        'configuration.user': [{
-          required: true,
-          message: this.$t('commons.required'),
-          trigger: 'blur'
-        }],
-        'configuration.passwd': [{
-          required: true,
-          message: this.$t('commons.required'),
-          trigger: 'blur'
-        }]
-      }
-    }
+        "configuration.carte": [
+          {
+            required: true,
+            message: this.$t("commons.required"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.port": [
+          {
+            required: true,
+            message: this.$t("commons.required"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.user": [
+          {
+            required: true,
+            message: this.$t("commons.required"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.passwd": [
+          {
+            required: true,
+            message: this.$t("commons.required"),
+            trigger: "blur",
+          },
+        ],
+      },
+    };
   },
 
   created() {
-    this.search()
+    this.search();
   },
   methods: {
-
-    currentChange() {
-      this.search()
+    initSearch() {
+      this.currentChange(1);
     },
-    sizeChange() {
-      this.currentPage = 1;
-      this.search()
+    currentChange(currentPage) {
+      this.paginationConfig.currentPage = currentPage;
+      this.search();
+    },
+    sizeChange(pageSize) {
+      this.paginationConfig.pageSize = pageSize;
+      this.paginationConfig.currentPage = 1;
+      this.search();
     },
     search() {
-      const {currentPage, pageSize} = this.paginationConfig
-      pageList('/kettle/pageList/' + currentPage + '/' + pageSize, {}).then(response => {
-        this.data = response.data.listObject
-        this.data.forEach(item => {
-          item.configuration = JSON.parse(item.configuration)
-        })
-        this.paginationConfig.total = response.data.itemCount
-      })
+      const { currentPage, pageSize } = this.paginationConfig;
+      pageList("/kettle/pageList/" + currentPage + "/" + pageSize, {}).then(
+        (response) => {
+          this.data = response.data.listObject;
+          this.data.forEach((item) => {
+            item.configuration = JSON.parse(item.configuration);
+          });
+          this.paginationConfig.total = response.data.itemCount;
+        }
+      );
     },
-    delete(item) {
-      deleteKettle(item.id).then(response => {
-        this.search()
-      })
+    del(item) {
+      deleteKettle(item.id).then((response) => {
+        this.initSearch();
+      });
     },
     create(item) {
       if (!item) {
-        this.targetObjs = []
-        this.form = {configuration: {carte: '', port: '', user: '', passwd: ''}}
-        this.edit_dialog_title = this.$t('kettle.add')
+        this.targetObjs = [];
+        this.form = {
+          configuration: { carte: "", port: "", user: "", passwd: "" },
+        };
+        this.edit_dialog_title = this.$t("kettle.add");
       } else {
-        this.edit_dialog_title = this.$t('commons.edit')
-        this.form = JSON.parse(JSON.stringify(item))
+        this.edit_dialog_title = this.$t("commons.edit");
+        this.form = JSON.parse(JSON.stringify(item));
       }
-      this.show_dialog = true
+      this.show_dialog = true;
     },
 
     save() {
-      this.$refs.kettleform.validate(valid => {
+      this.$refs.kettleform.validate((valid) => {
         if (!valid) {
-          return false
+          return false;
         }
-        const form = JSON.parse(JSON.stringify(this.form))
-        form.configuration = JSON.stringify(form.configuration)
-        save(form).then(res => {
-          this.show_dialog = false
-          this.$success(i18n.t('commons.save_success'))
-          this.search()
-        })
-      })
+        const form = JSON.parse(JSON.stringify(this.form));
+        form.configuration = JSON.stringify(form.configuration);
+        save(form).then((res) => {
+          this.show_dialog = false;
+          this.openMessageSuccess("commons.save_success");
+          this.initSearch();
+        });
+      });
     },
 
     closeDialog() {
-      this.show_dialog = false
-      this.form = {configuration: {carte: '', port: '', user: '', passwd: ''}}
+      this.$refs.kettleform.resetFields();
+      this.show_dialog = false;
+      this.form = {
+        configuration: { carte: "", port: "", user: "", passwd: "" },
+      };
     },
 
     validate() {
-      this.$refs.kettleform.validate(valid => {
+      this.$refs.kettleform.validate((valid) => {
         if (valid) {
-          validate(this.form.configuration).then(res => {
-            if (res.success) {
-              this.$success(i18n.t('datasource.validate_success'))
-            } else {
-              if (res.message.length < 2500) {
-                this.$error(res.message)
+          validate(this.form.configuration)
+            .then((res) => {
+              if (res.success) {
+                this.openMessageSuccess("datasource.validate_success");
               } else {
-                this.$error(res.message.substring(0, 2500) + '......')
+                if (res.message.length < 2500) {
+                  this.$error(res.message);
+                } else {
+                  this.$error(res.message.substring(0, 2500) + "......");
+                }
               }
-            }
-          }).catch(res => {
-            this.$error(res.message)
-          })
+            })
+            .catch((res) => {
+              this.$error(res.message);
+            });
         } else {
-          return
+          return;
         }
-      })
+      });
     },
 
     validateById(item) {
-      validateById(item.id).then(res => {
-        if (res.success) {
-          item.status = res.data.status
-          this.$success(i18n.t('datasource.validate_success'))
-        } else {
-          item.status = 'Error'
-          if (res.message.length < 2500) {
-            this.$error(res.message)
+      validateById(item.id)
+        .then((res) => {
+          if (res.success) {
+            item.status = res.data.status;
+            this.openMessageSuccess("datasource.validate_success");
           } else {
-            this.$error(res.message.substring(0, 2500) + '......')
+            item.status = "Error";
+            if (res.message.length < 2500) {
+              this.$error(res.message);
+            } else {
+              this.$error(res.message.substring(0, 2500) + "......");
+            }
           }
-        }
-      }).catch(res => {
-        this.$error(res.message)
-      })
+        })
+        .catch((res) => {
+          this.$error(res.message);
+        });
     },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.kettle-setting {
+  height: 100%;
+  .table-box {
+    height: calc(100% - 52px);
+    margin-top: 16px;
+
+    .text-btn {
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      letter-spacing: 0px;
+      text-align: center;
+      margin-left: 2px;
+      border: none;
+      padding: 2px 4px;
+    }
+
+    .text-btn:hover {
+      background: rgba(51, 112, 255, 0.1);
+    }
   }
 }
-</script>
-
-<style scoped>
-
 </style>
+<style lang="scss">
+.de-kettle {
+  .el-input-number {
+    width: 100%;
+    .el-input__inner {
+      text-align: left;
+    }
+
+    .el-input-number__decrease,
+    .el-input-number__increase {
+      background: transparent;
+    }
+  }
+}
+.de-tag {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 2px;
+  width: 40px;
+  height: 24px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/SysParam/MapSetting/MapSettingLeft.vue b/frontend/src/views/system/SysParam/MapSetting/MapSettingLeft.vue
index 003efd0eca..3780afbb8c 100644
--- a/frontend/src/views/system/SysParam/MapSetting/MapSettingLeft.vue
+++ b/frontend/src/views/system/SysParam/MapSetting/MapSettingLeft.vue
@@ -69,6 +69,7 @@
 
 <script>
 import { removeMap } from '@/api/map/map'
+import msgCfm from '@/components/msgCfm'
 export default {
   name: 'MapSettingLeft',
   props: {
@@ -77,6 +78,7 @@ export default {
       default: () => []
     }
   },
+  mixins: [msgCfm],
   data() {
     return {
       filterText: '',
@@ -154,7 +156,7 @@ export default {
             value: null
           }).then(() => {
             this.$emit('refresh-tree')
-            this.$success(this.$t('commons.delete_success'))
+            this.openMessageSuccess("commons.delete_success");
           })
         })
       }).catch(() => {
diff --git a/frontend/src/views/system/SysParam/MapSetting/MapSettingRight.vue b/frontend/src/views/system/SysParam/MapSetting/MapSettingRight.vue
index 041e8a78d7..a814b1df64 100644
--- a/frontend/src/views/system/SysParam/MapSetting/MapSettingRight.vue
+++ b/frontend/src/views/system/SysParam/MapSetting/MapSettingRight.vue
@@ -117,10 +117,12 @@
 import jsonView from 'vue-json-views'
 import { geoJson, saveMap } from '@/api/map/map'
 import ElTreeSelect from '@/components/ElTreeSelect'
+import msgCfm from '@/components/msgCfm'
 
 export default {
   name: 'MapSettingRight',
   components: { jsonView, ElTreeSelect },
+  mixins: [msgCfm],
   props: {
     status: {
       type: String,
@@ -271,7 +273,7 @@ export default {
         const flag = response.success
         if (flag) {
           this.$emit('refresh-tree', param)
-          this.$success(this.$t('commons.save_success'))
+          this.openMessageSuccess("commons.save_success");
         } else {
           this.$message.error(this.$t('commons.save_failed'))
         }
diff --git a/frontend/src/views/system/SysParam/SimpleModeSetting.vue b/frontend/src/views/system/SysParam/SimpleModeSetting.vue
index 2b77350737..e6a6fbf5b8 100644
--- a/frontend/src/views/system/SysParam/SimpleModeSetting.vue
+++ b/frontend/src/views/system/SysParam/SimpleModeSetting.vue
@@ -93,9 +93,11 @@
 
 import {engineInfo, validate, save} from '@/api/system/engine'
 import i18n from "@/lang";
+import msgCfm from '@/components/msgCfm'
 
 export default {
   name: 'SimpleMode',
+  mixins: [msgCfm],
   data() {
     return {
       form:
@@ -204,7 +206,7 @@ export default {
           this.showSave = false
           this.show = true
           this.originConfiguration = JSON.parse(JSON.stringify(this.form.configuration))
-          this.$success(i18n.t('commons.save_success'))
+          this.openMessageSuccess("commons.save_success");
         })
       })
     },
@@ -238,7 +240,7 @@ export default {
           data.configuration = JSON.stringify(data.configuration)
           validate(data).then(res => {
             if (res.success) {
-              this.$success(i18n.t('datasource.validate_success'))
+              this.openMessageSuccess("datasource.validate_success");
             } else {
               if (res.message.length < 2500) {
                 this.$error(res.message)
diff --git a/frontend/src/views/system/SysParam/index.vue b/frontend/src/views/system/SysParam/index.vue
index efe3a34a95..149f0ad217 100644
--- a/frontend/src/views/system/SysParam/index.vue
+++ b/frontend/src/views/system/SysParam/index.vue
@@ -1,89 +1,181 @@
 <template>
-  <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
-    <el-tabs v-model="activeName" @tab-click="handleClick">
+  <de-layout-content
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+  >
+    <div class="sys-setting">
+      <el-tabs v-model="activeName" class="de-tabs">
+        <el-tab-pane
+          :lazy="true"
+          :label="$t('system_parameter_setting.basic_setting')"
+          name="zero"
+        >
+        </el-tab-pane>
 
-      <el-tab-pane :lazy="true" :label="$t('system_parameter_setting.basic_setting')" name="zero">
-        <basic-setting v-if="activeName === 'zero'" />
-      </el-tab-pane>
+        <el-tab-pane
+          :lazy="true"
+          :label="$t('system_parameter_setting.mailbox_service_settings')"
+          name="first"
+        >
+        </el-tab-pane>
 
-      <el-tab-pane :lazy="true" :label="$t('system_parameter_setting.mailbox_service_settings')" name="first">
-        <email-setting />
-      </el-tab-pane>
+        <el-tab-pane :lazy="true" :label="$t('sysParams.map')" name="ten">
+        </el-tab-pane>
 
-      <el-tab-pane :lazy="true" :label="$t('sysParams.map')" name="ten">
-        <map-setting v-if="activeName === 'ten'" ref="mapSetting" />
-      </el-tab-pane>
+        <el-tab-pane
+          v-if="isPluginLoaded"
+          :lazy="true"
+          :label="$t('sysParams.ldap')"
+          name="fourth"
+        >
+        </el-tab-pane>
 
-      <el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.display')" name="second">
-        <plugin-com v-if="isPluginLoaded" ref="DisplaySetting" component-name="DisplaySetting" />
-      </el-tab-pane>
+        <el-tab-pane
+          v-if="isPluginLoaded"
+          :lazy="true"
+          :label="$t('sysParams.oidc')"
+          name="five"
+        >
+        </el-tab-pane>
 
-      <el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.theme')" name="third">
-        <plugin-com v-if="isPluginLoaded" ref="ThemeSetting" component-name="ThemeSetting" />
-      </el-tab-pane>
+        <el-tab-pane
+          v-if="engineMode === 'simple'"
+          :lazy="true"
+          :label="$t('system_parameter_setting.engine_mode_setting')"
+          name="six"
+        >
+        </el-tab-pane>
 
-      <el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.ldap')" name="fourth">
-        <plugin-com v-if="isPluginLoaded" ref="DisplaySetting" component-name="LdapSetting" />
-      </el-tab-pane>
+        <el-tab-pane
+          v-if="engineMode === 'cluster'"
+          :lazy="true"
+          :label="$t('system_parameter_setting.engine_mode_setting')"
+          name="seven"
+        >
+        </el-tab-pane>
 
-      <el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.oidc')" name="five">
-        <plugin-com v-if="isPluginLoaded" ref="DisplaySetting" component-name="SsoSetting" />
-      </el-tab-pane>
+        <el-tab-pane
+          v-if="engineMode === 'cluster'"
+          :lazy="true"
+          :label="$t('system_parameter_setting.kettle_setting')"
+          name="eight"
+        >
+        </el-tab-pane>
 
-      <el-tab-pane v-if="engineMode==='simple'" :lazy="true" :label="$t('system_parameter_setting.engine_mode_setting')" name="six">
-        <simple-mode />
-      </el-tab-pane>
-
-      <el-tab-pane v-if="engineMode==='cluster'" :lazy="true" :label="$t('system_parameter_setting.engine_mode_setting')" name="seven">
-        <cluster-mode />
-      </el-tab-pane>
-
-      <el-tab-pane v-if="engineMode==='cluster'" :lazy="true" :label="$t('system_parameter_setting.kettle_setting')" name="eight">
-        <kettle-setting />
-      </el-tab-pane>
-
-      <el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.cas')" name="nine">
-        <plugin-com v-if="isPluginLoaded" ref="CasSetting" component-name="CasSetting" />
-      </el-tab-pane>
-
-    </el-tabs>
-  </layout-content>
+        <el-tab-pane
+          v-if="isPluginLoaded"
+          :lazy="true"
+          :label="$t('sysParams.cas')"
+          name="nine"
+        >
+        </el-tab-pane>
+      </el-tabs>
+      <div
+        class="tabs-container"
+        :class="[activeName !== 'eight' ? 'is-center' : 'pad-center']"
+      >
+        <div class="min-w600">
+          <basic-setting v-if="activeName === 'zero'" />
+          <email-setting v-if="activeName === 'first'" />
+          <map-setting v-if="activeName === 'ten'" ref="mapSetting" />
+          <plugin-com
+            v-if="activeName === 'fourth'"
+            ref="DisplaySetting"
+            component-name="LdapSetting"
+          />
+          <plugin-com
+            v-if="activeName === 'five'"
+            ref="DisplaySetting"
+            component-name="SsoSetting"
+          />
+          <simple-mode v-if="activeName === 'six'" />
+          <cluster-mode v-if="activeName === 'seven'" />
+          <kettle-setting v-if="activeName === 'eight'" />
+          <plugin-com
+            v-if="activeName === 'nine'"
+            ref="CasSetting"
+            component-name="CasSetting"
+          />
+        </div>
+      </div>
+    </div>
+  </de-layout-content>
 </template>
 <script>
-import BasicSetting from './BasicSetting'
-import MapSetting from './MapSetting'
-import EmailSetting from './EmailSetting'
-import SimpleMode from './SimpleModeSetting'
-import ClusterMode from './ClusterModeSetting'
-import KettleSetting from './KettleSetting'
-import LayoutContent from '@/components/business/LayoutContent'
-import PluginCom from '@/views/system/plugin/PluginCom'
-import { pluginLoaded } from '@/api/user'
-import { engineMode } from '@/api/system/engine'
+import BasicSetting from "./BasicSetting";
+import MapSetting from "./MapSetting";
+import EmailSetting from "./EmailSetting";
+import SimpleMode from "./SimpleModeSetting";
+import ClusterMode from "./ClusterModeSetting";
+import KettleSetting from "./KettleSetting";
+import DeLayoutContent from "@/components/business/DeLayoutContent";
+import PluginCom from "@/views/system/plugin/PluginCom";
+import { pluginLoaded } from "@/api/user";
+import { engineMode } from "@/api/system/engine";
 export default {
-
-  components: { BasicSetting, EmailSetting, LayoutContent, PluginCom, SimpleMode, ClusterMode, KettleSetting, MapSetting },
+  components: {
+    BasicSetting,
+    EmailSetting,
+    DeLayoutContent,
+    PluginCom,
+    SimpleMode,
+    ClusterMode,
+    KettleSetting,
+    MapSetting,
+  },
   data() {
     return {
-      activeName: 'zero',
+      activeName: "zero",
       isPluginLoaded: false,
-      engineMode: 'local'
-    }
+      engineMode: "local",
+    };
   },
   beforeCreate() {
-    pluginLoaded().then(res => {
-      this.isPluginLoaded = res.success && res.data
-    })
-    engineMode().then(res => {
-      this.engineMode = res.data
-    })
+    pluginLoaded().then((res) => {
+      this.isPluginLoaded = res.success && res.data;
+    });
+    engineMode().then((res) => {
+      this.engineMode = res.data;
+    });
   },
-  created() {
-
+  computed: {
+    btnList() {},
   },
   methods: {
-    handleClick(tab, event) {
+    handlerBtn(btn) {
+      console.log(1, btn);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.sys-setting {
+  height: 100%;
+  background-color: var(--MainBG, #f5f6f7);
+
+  .tabs-container {
+    height: calc(100% - 48px);
+    background: var(--ContentBG, #ffffff);
+    overflow-x: auto;
+
+    .min-w600 {
+      min-width: 600px;
+      height: 100%;
+      & > :nth-child(1) {
+        box-sizing: border-box;
+        padding-bottom: 20px;
+      }
     }
   }
+
+  .is-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 20px 20px 20px;
+  }
+
+  .pad-center {
+    padding: 24px;
+  }
 }
-</script>
+</style>
diff --git a/frontend/src/views/system/SysParam/operater.vue b/frontend/src/views/system/SysParam/operater.vue
new file mode 100644
index 0000000000..1cd7c85eda
--- /dev/null
+++ b/frontend/src/views/system/SysParam/operater.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="operater-bar">
+    <p class="title">{{ $t(title) }}</p>
+    <div class="btn-grounp">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.operater-bar {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .title {
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: #1f2329;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/plugin/dynamic.vue b/frontend/src/views/system/plugin/dynamic.vue
index 1402ccbb02..fcf9437f14 100644
--- a/frontend/src/views/system/plugin/dynamic.vue
+++ b/frontend/src/views/system/plugin/dynamic.vue
@@ -1,10 +1,16 @@
 <template>
-  <de-layout-content v-if="!noLayout" v-loading="jsname && !innerLoadingNames.includes(jsname) && $store.getters.loadingMap[$store.getters.currentPath]" :header="header" :back-name="backName">
+  <de-layout-content v-if="!noLayout && menuid !== 740" v-loading="jsname && !innerLoadingNames.includes(jsname) && $store.getters.loadingMap[$store.getters.currentPath]" :header="header" :back-name="backName">
     <async-component v-if="showAsync" :url="url" @execute-axios="executeAxios" @on-add-languanges="addLanguages" @on-plugin-layout="setLayoutInfo" @plugin-call-back="pluginCallBack" />
     <div v-else>
       <h1>未知组件无法展示</h1>
     </div>
   </de-layout-content>
+  <div v-else-if="menuid === 740">
+    <async-component v-if="showAsync" :url="url" @execute-axios="executeAxios" @on-add-languanges="addLanguages" @on-plugin-layout="setLayoutInfo" @plugin-call-back="pluginCallBack" />
+    <div v-else>
+      <h1>未知组件无法展示</h1>
+    </div>
+  </div>
   <div v-else>
     <async-component v-if="showAsync" :url="url" @execute-axios="executeAxios" @on-add-languanges="addLanguages" @on-plugin-layout="setLayoutInfo" @plugin-call-back="pluginCallBack" />
     <div v-else>
diff --git a/frontend/src/views/system/settings/AppearanceSetting.vue b/frontend/src/views/system/settings/AppearanceSetting.vue
index 520630528b..abcafc60a2 100644
--- a/frontend/src/views/system/settings/AppearanceSetting.vue
+++ b/frontend/src/views/system/settings/AppearanceSetting.vue
@@ -1,14 +1,80 @@
 <template>
-  <div>外观配置</div>
+  <de-layout-content
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+  >
+    <div class="display-setting">
+      <el-tabs v-model="activeName" class="de-tabs">
+        <el-tab-pane :label="$t('sysParams.display')" name="display">
+        </el-tab-pane>
+        <el-tab-pane :label="$t('sysParams.theme')" name="theme"> </el-tab-pane>
+      </el-tabs>
+      <div
+        class="tabs-container"
+        :class="[activeName !== 'theme' ? 'is-center' : 'pad-center']"
+      >
+        <div class="min-w600">
+          <plugin-com
+            v-if="activeName === 'display'"
+            ref="DisplaySetting"
+            component-name="DisplaySetting"
+          />
+          <plugin-com
+            v-if="activeName === 'theme'"
+            ref="ThemeSetting"
+            component-name="ThemeSetting"
+          />
+        </div>
+      </div>
+    </div>
+  </de-layout-content>
 </template>
 
 <script>
+import DeLayoutContent from "@/components/business/DeLayoutContent";
+import PluginCom from "@/views/system/plugin/PluginCom";
+
 export default {
-  name: 'AppearanceSetting',
+  name: "AppearanceSetting",
+  components: { DeLayoutContent, PluginCom },
   data() {
     return {
+      activeName: "display",
+    };
+  },
+};
+</script>
 
+
+<style lang="scss" scoped>
+.display-setting {
+  height: 100%;
+  background-color: var(--MainBG, #f5f6f7);
+
+  .tabs-container {
+    height: calc(100% - 48px);
+    background: var(--ContentBG, #ffffff);
+    overflow-x: auto;
+
+    .min-w600 {
+      min-width: 600px;
+      height: 100%;
+
+      & > :nth-child(1) {
+        box-sizing: border-box;
+        padding-bottom: 20px;
+      }
     }
   }
+
+  .is-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 20px 20px 20px;
+  }
+
+  .pad-center {
+    padding: 24px;
+  }
 }
-</script>
+</style>
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index a677aa3a4f..d09722d00f 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -491,6 +491,7 @@ export default {
     },
     onError(e) {},
     handleSizeChange(pageSize) {
+      this.paginationConfig.currentPage = 1;
       this.paginationConfig.pageSize = pageSize;
       this.search();
     },