fix : APM settings、Web terminal setting页面调整

nezha-fronted/src/assets/css/components/page/config/system.scss

@@ -36,7 +36,6 @@
       .el-input.el-input--small {
         width: calc(100% - 49px);
       }
-
     }
   }
   #system-basic {
@@ -47,6 +46,22 @@
     }
   }
 }
+.system-config-form.basicForm {
+  .vue-tags-input {
+    max-width: unset !important;
+  }
+  .vue-tags-input .ti-input {
+    min-height: 32px;
+    padding: 0px 0px 0px 15px !important;
+  }
+  .vue-tags-input .ti-input .ti-new-tag-input-wrapper {
+    padding: 0;
+    margin: 0;
+  }
+  .vue-tags-input.interface-name .ti-input .ti-new-tag-input-wrapper {
+    padding-left: 7px;
+  }
+}
 .system-config-form {
   width: 61.8% !important;
   position: relative;
@@ -183,14 +198,20 @@
       margin-bottom: 20px;
     }
   }
+  .el-form-item:last-of-type.monitorLastElement {
+    .el-form-item__content {
+      margin-left: 180px !important;
+    }
+  }
   .el-tabs__nav-scroll {
     background-color: $--background-color-empty;
   }
-  .el-tabs__nav-scroll,.el-tabs__header,.el-tabs__nav-wrap{
+  .el-tabs__nav-scroll,
+  .el-tabs__header,
+  .el-tabs__nav-wrap {
     border-bottom: 0;
   }
   .el-form-item:last-of-type {
-
     .el-form-item__content {
       margin-left: 0 !important;
       text-align: center;
@@ -206,7 +227,8 @@
     .list-page .main-container {
       padding: unset;
     }
-    .table-column-setting,.pagination-bottom{
+    .table-column-setting,
+    .pagination-bottom {
       display: none;
     }
   }
@@ -222,11 +244,11 @@
     color: $--color-primary;
     background: $--background-color-empty;
     border-bottom: none;
-    margin-left: .1px;
+    margin-left: 0.1px;
   }
   .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
     color: $--color-primary;
-    opacity: .8;
+    opacity: 0.8;
   }
   .el-tabs--border-card > .el-tabs__header .el-tabs__item {
     height: 40px;
@@ -249,7 +271,10 @@
     border: 1px solid $--border-color-light;
     border-left: none;
   }
-  .el-input-number__decrease,.el-input-number__increase,.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled {
+  .el-input-number__decrease,
+  .el-input-number__increase,
+  .el-input-number__decrease.is-disabled,
+  .el-input-number__increase.is-disabled {
     background-color: $--popover-background-color;
   }
   .el-input-number__decrease {
@@ -318,22 +343,32 @@
   margin-bottom: 54px;
 }
 @keyframes warnBackground {
-  0% {background-color: #FFFFFF;}
+  0% {
-  25% {background-color: #EF7458;}
+    background-color: #ffffff;
-  50% {background-color: #FFFFFF;}
+  }
-  75% {background-color: #EF7458;}
+  25% {
-  100% {background-color: #FFFFFF;}
+    background-color: #ef7458;
+  }
+  50% {
+    background-color: #ffffff;
+  }
+  75% {
+    background-color: #ef7458;
+  }
+  100% {
+    background-color: #ffffff;
+  }
 }
 .warn-pop {
-  background-color: #FEF0F0;
+  background-color: #fef0f0;
-  border-color: #FEF0F0;
+  border-color: #fef0f0;
-  color:#F66C6C;
+  color: #f66c6c;
 }
 .warn-pop .popper__arrow:after {
-  border-top-color: #FEF0F0 !important;
+  border-top-color: #fef0f0 !important;
 }
 .system .logo-upload-tip {
-  color:#F66C6C;
+  color: #f66c6c;
   font-size: 12px;
   line-height: 20px;
 }

nezha-fronted/src/components/common/mixin/system/systemMixin.js

@@ -119,12 +119,18 @@ export default {
         terminal_timeout: 30,
         terminal_telnet_user_tip: 'ogin:',
         terminal_telnet_pin_tip: 'assword:',
-        terminal_record_local_retention: 365
+        terminal_record_local_retention: 365,
+        terminal_storage_type: '',
+        terminal_storage_s3_endpoint: '',
+        terminal_storage_s3_bucket: '',
+        terminal_storage_s3_access_key: '',
+        terminal_storage_s3_secret_access_key: ''
       },
       terminalCopy: null,
       terminalRules: {
         terminal_timeout: [{ validator: positiveInteger, trigger: 'blur' }],
-        terminal_record_local_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }]
+        terminal_record_local_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }],
+        terminal_storage_type: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
       },
       ldap: {
         ldap_address: '',

nezha-fronted/src/components/page/config/monitor.vue

@@ -64,7 +64,7 @@
               <el-input v-model="monitor.metrics_storage_s3_access_key" id="monitor-metrics_storage_s3_access_key">
               </el-input>
             </el-form-item>
-            <el-form-item :label="$t('config.terminallog.key')" prop="metrics_storage_s3_secret_access_key" :rules=" [ { required: monitor.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastEle">
+            <el-form-item :label="$t('config.terminallog.key')" prop="metrics_storage_s3_secret_access_key" :rules=" [ { required: monitor.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastElement">
               <el-input v-model="monitor.metrics_storage_s3_secret_access_key" id="monitor-metrics_storage_s3_secret_access_key" type="password">
               </el-input>
             </el-form-item>
@@ -100,7 +100,7 @@
               <el-input v-model="monitor.logs_storage_s3_access_key" id="monitor-logs_storage_s3_access_key">
               </el-input>
             </el-form-item>
-            <el-form-item :label="$t('config.terminallog.key')" prop="logs_storage_s3_secret_access_key" :rules=" [ { required: monitor.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastEle">
+            <el-form-item :label="$t('config.terminallog.key')" prop="logs_storage_s3_secret_access_key" :rules=" [ { required: monitor.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastElement">
               <el-input v-model="monitor.logs_storage_s3_secret_access_key" id="monitor-logs_storage_s3_secret_access_key" type="password">
               </el-input>
             </el-form-item>
@@ -186,18 +186,4 @@ export default {
 }
 </script>
 <style scoped>
-.vue-tags-input{
-  max-width: unset;
-}
-/deep/ .vue-tags-input .ti-input{
-    min-height: 32px;
-    padding: 0px 0px 0px 15px !important;
-}
-/deep/ .vue-tags-input .ti-input .ti-new-tag-input-wrapper{
-  padding: 0;
-  margin: 0;
-}
-/deep/ .vue-tags-input.interface-name .ti-input .ti-new-tag-input-wrapper{
-  padding-left: 7px;
-}
 </style>

nezha-fronted/src/components/page/config/terminal.vue

@@ -39,7 +39,7 @@
               <el-input v-model="terminal.terminal_storage_s3_access_key" id="terminal-terminal_storage_s3_access_key">
               </el-input>
             </el-form-item>
-            <el-form-item :label="$t('config.terminallog.key')" prop="terminal_storage_s3_secret_access_key" :rules=" [ { required: terminal.terminal_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastEle">
+            <el-form-item :label="$t('config.terminallog.key')" prop="terminal_storage_s3_secret_access_key" :rules=" [ { required: terminal.terminal_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastElement">
               <el-input v-model="terminal.terminal_storage_s3_secret_access_key" id="terminal-terminal_storage_s3_secret_access_key" type="password">
               </el-input>
             </el-form-item>