feat： system 样式调整

nezha-fronted/src/components/common/language/cn.js

@@ -980,6 +980,7 @@ const cn = {
     system: {
       system: '系统设置',
       basic: {
+        title: '基本信息',
         basic: '基础设置',
         alertApi: '告警API',
         assetPingSwith: '资产Ping开关',
@@ -995,7 +996,7 @@ const cn = {
         minute: '分',
         second: '秒',
         day: '天',
-        maxSeries: '指标查询最大条数',
+        maxSeries: '查询最大条数',
         unsaved: '未保存提示',
         mapConfig: '地图中心点',
         mapTitle: '配置地图',
@@ -1011,22 +1012,24 @@ const cn = {
       },
       monitor: {
         monitor: '监控',
+        metricsTitle: '指标配置',
+        logsTitle: '日志配置',
         alertApi: 'Alert api',
         prometheusFederation: 'Prometheus federation',
         asset_ping_from: 'Asset ping from',
-        metrics_storage_retention: '指标存储天数',
+        metrics_storage_retention: '保存天数',
-        metrics_storage_type: '指标存储模式',
+        metrics_storage_type: '保存模式',
-        metrics_storage_s3_endpoint: '指标 s3 endpoint',
+        metrics_storage_s3_endpoint: 'Endpoint',
-        metrics_storage_s3_bucket: '指标 s3 bucket',
+        metrics_storage_s3_bucket: 'Bucket name',
-        metrics_storage_s3_access_key: '指标 s3 access',
+        metrics_storage_s3_access_key: 'Access key',
-        metrics_storage_s3_secret_access_key: '指标 s3 secret access',
+        metrics_storage_s3_secret_access_key: 'Secret key',
-        logs_storage_retention: '日志存储天数',
+        logs_storage_retention: '保存天数',
-        logs_storage_type: '日志存储模式',
+        logs_storage_type: '保存模式',
-        logs_storage_s3_endpoint: '日志 s3 endpoint',
+        logs_storage_s3_endpoint: 'Endpoint',
-        logs_storage_s3_bucket: '日志 s3 bucket',
+        logs_storage_s3_bucket: 'Bucket name',
-        logs_storage_s3_access_key: '日志 s3 access',
+        logs_storage_s3_access_key: 'Access key',
-        logs_storage_s3_secret_access_key: '日志 s3 secret access',
+        logs_storage_s3_secret_access_key: 'Secret key',
-        logs_query_range_default_limit: '日志查询最大条数',
+        logs_query_range_default_limit: '查询最大条数',
         local: '本地文件存储',
         s3: 'S3对象存储'
       },

nezha-fronted/src/components/common/language/en.js

@@ -972,6 +972,7 @@ const en = {
     system: {
       system: 'System',
       basic: {
+        title: 'Basic info',
         basic: 'Basic',
         alertApi: 'Alert API',
         assetPingSwith: 'Asset ping',
@@ -987,7 +988,7 @@ const en = {
         day: 'day',
         sessionTimeout: 'Session timeout',
         minute: 'minute',
-        maxSeries: 'Metrics query max series',
+        maxSeries: 'Query max series',
         unsaved: 'Unsaved prompt',
         mapConfig: 'Map center',
         mapTitle: 'Configurate map',
@@ -1003,22 +1004,24 @@ const en = {
       },
       monitor: {
         monitor: 'Monitor',
+        metricsTitle: 'Metrics configuration',
+        logsTitle: 'Logs configuration',
         alertApi: 'Alert api',
         prometheusFederation: 'Prometheus federation',
         asset_ping_from: 'Asset ping from',
-        metrics_storage_retention: 'Metrics storage days',
+        metrics_storage_retention: 'Retention days',
-        metrics_storage_type: 'Metrics storage mode',
+        metrics_storage_type: 'Storage backend',
-        metrics_storage_s3_endpoint: 'Metrics s3 endpoint',
+        metrics_storage_s3_endpoint: 'Endpoint',
-        metrics_storage_s3_bucket: 'Metrics s3 bucket',
+        metrics_storage_s3_bucket: 'Bucket',
-        metrics_storage_s3_access_key: 'Metrics s3 access',
+        metrics_storage_s3_access_key: 'Access key',
-        metrics_storage_s3_secret_access_key: 'Metrics s3 secret access',
+        metrics_storage_s3_secret_access_key: 'Secret key',
-        logs_storage_retention: 'Logs storage days',
+        logs_storage_retention: 'Retention days',
-        logs_storage_type: 'Logs storage mode',
+        logs_storage_type: 'Storage backend',
-        logs_storage_s3_endpoint: 'Logs s3 endpoint',
+        logs_storage_s3_endpoint: 'Endpoint',
-        logs_storage_s3_bucket: 'Logs s3 bucket',
+        logs_storage_s3_bucket: 'Bucket',
-        logs_storage_s3_access_key: 'Logs s3 access',
+        logs_storage_s3_access_key: 'Access key',
-        logs_storage_s3_secret_access_key: 'Logs s3 secret access',
+        logs_storage_s3_secret_access_key: 'Secret key',
-        logs_query_range_default_limit: 'Logs query max series',
+        logs_query_range_default_limit: 'Query line limit',
         local: 'LocalStorage',
         s3: 'S3 object storage'
       },

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

@@ -4,6 +4,7 @@
       <el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
         <div class="system-config-form basicForm" v-if="activeTab === 'basic'">
           <el-form :model="basic"  label-width="180px" size="small" ref="basicForm" :rules="basicRules" :validate-on-rule-change="false">
+            <div class="system-title">{{$t('config.system.basic.title')}}</div>
 <!--            <el-form-item :label="$t('config.system.basic.sysLogo')" prop="system_logo">-->
 <!--              <el-upload-->
 <!--                class="avatar-uploader"-->
@@ -66,6 +67,7 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('config.system.monitor.monitor')" name="monitor">
         <div class="system-config-form basicForm" v-if="activeTab === 'monitor'">
+          <div class="system-title">{{$t('config.system.basic.title')}}</div>
           <el-form :model="monitor"  label-width="208px" size="small" ref="monitorForm" :rules="monitorRules" :validate-on-rule-change="false">
             <el-form-item :label="$t('config.system.monitor.alertApi')" prop="asset_ping_interval">
               <el-input v-model="monitor.alert_api" id="monitor-alert-api"></el-input>
@@ -96,6 +98,7 @@
               </el-select>
             </el-form-item>
             <!--metrics-->
+            <div class="system-title system-title-border">{{$t('config.system.monitor.metricsTitle')}}</div>
             <el-form-item :label="$t('config.system.monitor.metrics_storage_retention')" prop="metrics_storage_retention">
               <el-input v-model.number="monitor.metrics_storage_retention" id="monitor-metrics_storage_retention">
                 <template slot="append"><span >{{$t('config.system.basic.day')}}</span></template>
@@ -128,6 +131,7 @@
             </el-form-item>
 
             <!--logs-->
+            <div class="system-title system-title-border">{{$t('config.system.monitor.logsTitle')}}</div>
             <el-form-item :label="$t('config.system.monitor.logs_storage_retention')" prop="logs_storage_retention">
               <el-input v-model.number="monitor.logs_storage_retention" id="monitor-logs_storage_retention">
                 <template slot="append"><span >{{$t('config.system.basic.day')}}</span></template>
@@ -171,6 +175,7 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('config.system.email.email')" name="email" >
         <div class="system-config-form" v-if="activeTab === 'email'">
+          <div class="system-title">{{$t('config.system.basic.title')}}</div>
           <el-form :model="email"  label-width="180px" size="small" ref="emailForm" :rules="email.email_enable=='on'?emailRules:{}" :validate-on-rule-change="false">
             <el-form-item :label="$t('config.system.email.enable')" prop="email_enable">
               <el-checkbox v-model="email.email_enable" true-label="on" false-label="off"  @change="switchChange('emailForm')" id="system-email-email_enable"></el-checkbox>
@@ -218,6 +223,7 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('config.system.terminal.terminal')" name="terminal">
         <div class="system-config-form terminal" v-if="activeTab === 'terminal'">
+          <div class="system-title">{{$t('config.system.basic.title')}}</div>
           <el-form :model="terminal"  label-width="180px" size="small" ref="terminalForm" :rules="terminalRules">
 <!--            <el-form-item :label="$t('config.system.terminal.timeout')" prop="terminal_timeout">-->
 <!--              <el-input v-model="terminal.terminal_timeout" controls-position="right" :min="1"  id="system-terminal-max_terminal_num">-->
@@ -243,6 +249,7 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('config.system.ldap.ldap')" name="ldap">
         <div class="system-config-form" v-if="activeTab === 'ldap'">
+          <div class="system-title">{{$t('config.system.basic.title')}}</div>
           <el-form :model="ldap"  label-width="180px" size="small" ref="ldapForm" :rules="ldap.ldap_enable == 'on'?ldapRules:{}" :validate-on-rule-change="false">
             <el-form-item :label="$t('config.system.ldap.active')" prop="ldap_enable">
               <el-checkbox v-model="ldap.ldap_enable" true-label='on' false-label='off' @change="switchChange('ldapForm')" id="system-ldap-ldap_enable"></el-checkbox>
@@ -293,6 +300,7 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('config.system.reset.reset')" name="reset">
         <div class="system-config-form" v-if="activeTab === 'reset'">
+          <div class="system-title">{{$t('config.system.basic.title')}}</div>
           <el-form :model="reset"  label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false" class="reset-form">
             <el-form-item  prop="type" :label="$t('config.system.reset.type')">
 <!--              <div class="el-checkbox-group">-->
@@ -1082,6 +1090,21 @@ export default {
     color: #999999;
     font-size: 12px;
   }
+  .system-title{
+    ont-family: Roboto-Medium;
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    text-align: left;
+    padding-left: 20px;
+    font-weight: 500;
+    margin-bottom: 30px;
+  }
+  .system-title-border{
+    border-top: 1px dashed #E7EAED;
+    padding-top: 30px;
+    width: 699px;
+  }
 </style>
 <style lang="scss">
   .system {