feat：dashboard支持定义变量页面搭建

nezha-fronted/src/assets/css/common.scss

@@ -473,11 +473,17 @@ textarea {
 .is-disabled{
   color: $--color-text-disabled !important;
 }
-.ql-tooltip {
+.ql-snow .ql-tooltip {
   background: $--background-color-empty;
+  border: 1px solid $--select-page-focus-color;
+  box-shadow: 0px 0px 5px $--scrollbar-background-color;
+  color: $--color-text-primary;
+  input[type=text]{
+    border: 1px solid $--select-page-focus-color;
+    background: $--background-color-empty;
+    outline: none;
+  }
 }
-
-
 .chart-time-series.hide{
   display: none !important;
 }

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -3,9 +3,8 @@
 }
 .my-loading-parent--relative {
   position: relative;
-  display: inline-block;
   height: 100%;
-  width: 100%;
+  width: auto;
 }
 .panel-chart {
   border: 1px solid $--chart-box-border-color;

nezha-fronted/src/assets/css/components/common/intro.scss

@@ -0,0 +1,46 @@
+.is-intro.el-dialog{
+  max-height: unset;
+  max-width: unset;
+  height: 100%;
+  .el-dialog__header{
+    display: none;
+  }
+  .el-dialog__body{
+    height: 100%;
+    padding: 0;
+    > div{
+      height: 100%;
+    }
+  }
+}
+.dc-img{
+  width: 100%;
+  height: 100%;
+  background: url("~@/assets/img/jj.png") no-repeat;
+  background-size:cover;
+}
+.dc-img1{
+  width: 100%;
+  height: 100%;
+  background: url("~@/assets/img/jj1.png") no-repeat;
+  background-size:cover;
+}
+.dc-img2{
+  width: 100%;
+  height: 100%;
+  background: url("~@/assets/img/jj3.png") no-repeat;
+  background-size:cover;
+}
+.dc-img3{
+  width: 100%;
+  height: 100%;
+  background: url("~@/assets/img/dc3.png") no-repeat;
+  background-size:cover;
+}
+.intro-bottom{
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}

nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss

@@ -37,7 +37,7 @@
 }
 
 .project-title {
-  background: #eeeeee;
+  background: $--background-color-base;
   height: 36px;
   line-height: 36px;
   border-radius: 0;

nezha-fronted/src/assets/css/components/common/project/topology.scss

@@ -60,7 +60,7 @@
     }
   }
   .edit-topologyLine{
-    background: rgba(196,196,196,0.4) !important;
+    //background: rgba(196,196,196,0.4) !important;
     border-bottom: 1px solid $--explore-border-color-bottom;
   }
   .topology-scroll{
@@ -333,10 +333,9 @@
     margin-right: 10px;
   }
   .project-title {
-    height: 55px;
+    height: 36px;
     padding-bottom: 0;
   }
-
   .drag-header {
     cursor: move;
     background: #1a1a1a;
@@ -543,3 +542,12 @@
   overflow: hidden;
   box-sizing: border-box;
 }
+.full.pr10 {
+  .el-select.el-select--small,.el-input {
+    background-color: $--background-color-empty;
+    border: 1px solid $--background-color-empty;
+  }
+}
+.el-upload-dragger{
+  background-color: $--background-color-empty;
+}

nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss

@@ -38,12 +38,12 @@
     }
     .metrics-input-box{
       .input-box .el-textarea .el-textarea__inner {
-        width: calc(100% + 42px);
+        width: 100%;
       }
       .metric-selector-input-box{
         line-height: 32px;
         .el-input__count{
-          right: -38px !important;
+          right: 18px !important;
         }
       }
       .el-col-24{

nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss

@@ -1,10 +1,17 @@
 .right-box-panel{
+  .item-report{
+    .form__sub-title{
+      margin-bottom: 5px;
+    }
+  }
   .item-receivers{
     .el-select.el-select--small{
       width: 100%;
     }
     .item-receivers-text{
+      font-size: 12px;
       color: $--color-text-secondary;
+      padding-left: 5px;
     }
   }
   .el-input--suffix.el-date-editor--datetime .el-input__inner{
@@ -51,6 +58,9 @@
           }
         }
       }
+      .el-checkbox-button.is-checked{
+        border: 1px solid #fbb569 !important;
+      }
         
       .el-checkbox-button.is-checked .el-checkbox-button__inner {
         color: #fff;
@@ -64,8 +74,16 @@
         height: 41px;
         .el-radio-group{
           height: 100%;
-            border-left: 1px solid $--border-color-light;
+          .el-radio-button{
+            border: 1px solid $--border-color-light;
+            margin-right: -1px;
+          }
+          .el-radio-button.is-active{
+            border: 1px solid #fbb569 !important;
+            border-radius: 0;
+          }
           .el-radio-button__inner{
+            border: 0;
             height: 100%;
             line-height: 1.5;
             font-size: 14px;
@@ -76,6 +94,7 @@
           height: 100%;
           .el-checkbox-button{
             margin-right: -2px;
+            width: calc(100% / 6.9) !important;
             .el-checkbox-button__inner{
               background-color: $--background-color-empty;
               border:1px solid $--border-color-light;
@@ -101,6 +120,7 @@
     }
     .form-tabs{
       width: 100%;
+      margin-bottom: 0 !important;
       .el-tabs__nav{
         display: flex;
         .el-tabs__item{
@@ -179,11 +199,9 @@
       margin-top: 16px;
     }
   }
-   
+}
- }
     
 .el-form-item__content{
-  text-align: unset !important;
   .el-checkbox-button{
     width: calc(100% / 7) !important;
     .el-checkbox-button__inner{
@@ -213,5 +231,3 @@
 .allOptionTip{
   max-width:208px;
 }
-
-  

nezha-fronted/src/assets/css/components/index.scss

@@ -67,6 +67,7 @@
 @import './common/elementSet.scss';
 @import './common/loading.scss';
 @import './common/login.scss';
+@import './common/intro.scss';
 @import './common/multipleTime.scss';
 @import './common/nezhaColor.scss';
 @import './common/nzTransfer.scss';

nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss

@@ -58,6 +58,7 @@
   }
   .el-cascader-menu {
     width: 200px;
+    height: 100%;
   }
   .metric-btn:hover, .metric-btn:focus {
     background-image:  linear-gradient(180deg, rgb(247, 248, 250) 0%, rgb(247, 248, 250) 100%);

nezha-fronted/src/assets/css/themes/src/table.scss

@@ -259,6 +259,7 @@
       right: 0;
       width: 1px;
       height: 100%;
+      background: $--border-color-light;
     }
   }
 

nezha-fronted/src/components/common/ChartDiagram/diagram.vue

@@ -61,7 +61,7 @@
                <div slot="prefix">
                 <div class="icon-item" style="width: 100%;padding: 0">
                   <svg>
-                    <g fill="none" stroke="black" stroke-width="1">
+                    <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
                       <path
                         :d="penLineType.find((item,i)=>item.id==lineName).d"
                       >
@@ -74,7 +74,7 @@
                 <el-option v-for="(item,index) in penLineType" :value="item.id" :key="index">
                   <div class="icon-item" style="position: relative;width: 100%;padding: 0">
                     <svg>
-                    <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
+                    <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f': item.strokeColor " stroke-width="1">
                     <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
                     </g>
                     </svg>
@@ -354,7 +354,9 @@ const canvasOptions = {
 export default {
   name: 'diagram',
   data () {
+    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
     return {
+      theme,
       title: this.$t('overall.uploadCustomPicture'),
       objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
       chartDataInfo: {},
@@ -517,10 +519,10 @@ export default {
       chartData: {},
       chartGetData: [],
       penLineType: [
-        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
+        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
-        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
+        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
-        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
+        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'}
-        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind', strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
       ],
       lineName: 'curve',
       cachesIndex: 0,
@@ -831,8 +833,10 @@ export default {
           this.projectAlertShow = true
           this.saveData = { ...data }
           this.topologyInfo.name = ''
+          data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
           resolve(data)
         } else {
+          data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
           if (data.data) {
             this.topologyInfo = {
               fontSize: data.data.fontSize,

nezha-fronted/src/components/common/alert/alertLabel.vue

@@ -638,7 +638,7 @@
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{ $t("overall.login.name") }}</div>
+        <div class="alert-label-title">{{ $t("profile.username") }}</div>
         <div class="alert-label-value">
           {{ alertLabelData && alertLabelData.username ? alertLabelData.username : "--" }}
         </div>
@@ -656,13 +656,13 @@
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{ $t("overall.soure") }}</div>
+        <div class="alert-label-title">{{ $t("profile.source") }}</div>
         <div class="alert-label-value">
           {{ alertLabelData && alertLabelData.source ? alertLabelData.source : "--" }}
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{ $t("config.operationlog.state") }}</div>
+        <div class="alert-label-title">{{ $t("overall.state") }}</div>
         <div class="alert-label-value">
           <div
             v-if="alertLabelData"
@@ -776,31 +776,15 @@ export default {
           topOffSetView = topOffSet
         }
         if (position.top > clientHeight / 2) {
-          if (this.type === 'user') {
           labelPosition = {
-              // user info 距离
+            left: `${position.left + position.width + leftOffSet}px`,
-              left: `${position.left + position.width / 3 + leftOffSet}px`,
             top: `${position.top - this.heightList - topOffSetView}px`
           }
         } else {
           labelPosition = {
             left: `${position.left + position.width + leftOffSet}px`,
-              top: `${position.top - this.heightList - topOffSetView}px`
-            }
-          }
-        } else {
-          if (this.type === 'user') {
-            // user info 距离
-            labelPosition = {
-              left: `${position.left + position.width / 3 + leftOffSet}px`,
             top: `${position.top + topOffSet}px`
           }
-          } else {
-            labelPosition = {
-              left: `${position.left + position.width + leftOffSet}px`,
-              top: `${position.top + topOffSet}px`
-            }
-          }
         }
         if (position.left > clientWidth / 2) {
           delete labelPosition.left

nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue

@@ -137,7 +137,7 @@ export default {
           width: 120,
           sortable: 'custom'
         }, {
-          label: this.$t('alert.config.receiver'),
+          label: this.$t('alert.receiver'),
           prop: 'receivers',
           show: false,
           minWidth: 100

nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue

@@ -109,7 +109,7 @@ export default {
           show: true,
           width: 150
         }, {
-          label: this.$t('overall.enable'),
+          label: this.$t('overall.enabled'),
           prop: 'status',
           show: true,
           width: 100

nezha-fronted/src/components/common/i18n.js

@@ -3,6 +3,8 @@ import locale from 'element-ui/lib/locale'
 import VueI18n from 'vue-i18n'
 import { get } from '@/http'
 import messages from './language'
+import enLocale from 'element-ui/lib/locale/lang/en' // 引入element语言包
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 引入element语言包
 Vue.use(VueI18n)
 // 从localStorage获取语言选择。
 const i18n = new VueI18n({
@@ -14,7 +16,12 @@ locale.i18n((key, value) => i18n.t(key, value)) // 兼容element
 export function loadI18n (i18nData) {
   if (i18nData) {
     Object.keys(i18nData).forEach(lang => {
-      i18n.setLocaleMessage(lang, i18nData[lang])
+      if (lang === 'zh') {
+        Object.assign(i18nData[lang], { ...zhLocale })
+      } else if (lang === 'en') {
+        Object.assign(i18nData[lang], { ...enLocale })
+      }
+      i18n.setLocaleMessage(lang, { ...i18nData[lang] })
     })
   }
 }

nezha-fronted/src/components/common/intro.vue

@@ -0,0 +1,78 @@
+<template>
+  <el-dialog
+    width="100%"
+    height="100%"
+    title="内层 Dialog"
+    :custom-class="'is-intro'"
+    :show-close="false"
+    :visible.sync="showIntro"
+    append-to-body>
+    <div>
+      <div v-if="introStep==='main'">
+        <el-button @click="introStepChange('dc')">设置dc</el-button>
+        <el-button>设置asset</el-button>
+        <el-button>设置project</el-button>
+        <el-button>设置dc</el-button>
+      </div>
+      <div v-if="introStep === 'dc'" style="height: 100%">
+        <div v-if="step === 0" class="dc-img"></div>
+        <div v-else-if="step === 1" class="dc-img1"></div>
+        <div v-else-if="step === 2" class="dc-img2"></div>
+        <div v-else-if="step === 3" class="dc-img3"></div>
+        <div v-else>
+          <el-button @click="introStepChange('asset')">继续设置asset</el-button>
+        </div>
+      </div>
+      <div v-if="introStep === 'asset'" style="height: 100%">
+        <div v-if="step === 0" >设置asset</div>
+        <div v-if="step === 1" ></div>
+        <div v-if="step === 2" ></div>
+        <div v-if="step === 3" ></div>
+        <div v-if="step === 4" ></div>
+      </div>
+      <div class="intro-bottom">
+        <el-button @click="prev()">上一步</el-button>
+        <el-button @click="next()">下一步</el-button>
+        <el-button @click="exit()">退出</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'intro',
+  data: function () {
+    return {
+      showIntro: false,
+      introStep: 'main',
+      step: 0,
+      timer: ''
+    }
+  },
+  methods: {
+    introStepChange (type) {
+      this.step = 0
+      this.introStep = type
+    },
+    prev () {
+      this.step--
+    },
+    next () {
+      this.step++
+      if (this.introStep == 'dc' && this.step === 4) {
+        this.timer = setTimeout(() => {
+          this.introStepChange('main')
+        })
+      }
+    },
+    exit () {
+      this.showIntro = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -97,5 +97,4 @@ const newen = {
   },
   ...enLocale
 }
-
 export default newen

nezha-fronted/src/components/common/latlngPicker.vue

@@ -3,7 +3,7 @@
     <div class="input-box">
       <div class="input-box-item" style="display: none;">
         <el-input v-model="lnglat" @blur="setLatlng" @change="setLatlng">
-          <template slot="prepend" v-if="showZoom">{{$t('config.dc.lnglat')}}</template>
+          <template slot="prepend" v-if="showZoom">{{$t('config.system.basic.lnglat')}}</template>
         </el-input>
       </div>
       <div class="input-box-item" v-if="showZoom">

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -828,9 +828,11 @@ export default {
             this.projectAlertShow = true
             this.saveData = JSON.parse(JSON.stringify(data))
             this.topologyInfo.name = this.obj.name
+            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
             resolve(data)
             data = null
           } else {
+            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
             if (data.data) {
               this.topologyInfo = {
                 fontSize: data.data.fontSize,

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -2,7 +2,7 @@
   <div v-clickoutside="{obj:endpoint,func:clickOutside}" :class="{'right-box-add-endpoint-snmp': currentModule.type && currentModule.type.toLowerCase() == 'snmp'}" class="right-box right-box-add-endpoint">
     <div class="right-box__header">
       <!-- begin--标题-->
-      <div class="header__title">{{$t("overall.createEndpoint")}}</div>
+      <div class="header__title">{{$t("config.system.basic.lnglatll.createEndpoint")}}</div>
       <!-- end--标题-->
       <div class="header__operation">
         <span v-cancel="{obj: object, func: esc}"><i class="nz-icon nz-icon-close"></i></span>

nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue

@@ -127,7 +127,7 @@
           </el-form-item>
 
           <el-form-item
-            :label="$t('overall.enable')"
+            :label="$t('overall.enabled')"
             prop="status"
             class="form-item__switch"
           >

nezha-fronted/src/components/common/rightBox/administration/userBox.vue

@@ -184,7 +184,7 @@ export default {
       roles: [],
       mfaLevelList: [
         { value: 0, label: this.$t('profile.close') },
-        { value: 1, label: this.$t('overall.enable') },
+        { value: 1, label: this.$t('overall.enabled') },
         { value: 2, label: this.$t('config.user.forceEnable') }
       ],
       languageList: [

nezha-fronted/src/components/common/rightBox/alertRuleBox.vue

@@ -100,7 +100,7 @@
             </el-input>
           </el-form-item>
           <!--unit-->
-          <el-form-item v-if="showSnmpTrap" :label="$t('alert.config.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]">
+          <el-form-item v-if="showSnmpTrap" :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]">
             <el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable
                          placeholder=""
                          popper-class="no-style-class dc-dropdown  unit-popper-class"
@@ -290,7 +290,7 @@
             </el-select>
           </el-form-item>
           <!--receiver-->
-          <el-form-item :label="$t('alert.config.receiver')" prop="receiver" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'blur' }]">
+          <el-form-item :label="$t('alert.receiver')" prop="receiver" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'blur' }]">
             <el-select
               id="alert-box-input-receiver"
               v-model.trim="editAlertRule.receiverShow"

nezha-fronted/src/components/common/rightBox/dcBox.vue

@@ -27,7 +27,7 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item :label="$t('config.dc.lnglat')" prop="lnglat">
+            <el-form-item :label="$t('config.system.basic.lnglat')" prop="lnglat">
               <div style="display: flex">
                 <el-input v-model="editDc.lnglat" maxlength="256" placeholder="" size="small" style="width: calc(100% - 50px);margin-right: 20px;"></el-input>
                 <latlng-picker

nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue

@@ -715,7 +715,7 @@ export default {
         { name: this.$t('project.endpoint.authTypeToken'), value: 2 }
       ],
       endpointStateList: [
-        { name: this.$t('overall.enable'), value: 1 },
+        { name: this.$t('overall.enabled'), value: 1 },
         { name: this.$t('profile.close'), value: 0 }
       ],
       configsCopyValue: '',

nezha-fronted/src/components/common/rightBox/panelBox.vue

@@ -155,10 +155,12 @@
 
           <!--   Report  -->
           <div>
+            <el-form-item class="item-report">
               <div class="form__sub-title">
                 <span>{{$t('dashboard.panel.report')}}</span>
                 <el-switch v-model="editPanel.param.report.enable" size="small"></el-switch>
               </div>
+            </el-form-item>
             <div v-if="editPanel.param.report.enable">
               <transition name="el-zoom-in-top" >
                 <div class="form-items--half-width-group">
@@ -268,7 +270,6 @@
               </transition>
             </div>
           </div>
-
         </el-form>
       </div>
     </div>
@@ -377,17 +378,6 @@ export default {
     this.dateFormatStr = 'YYYY-MM-DD HH:mm:ss'
     if (this.editPanel.id) {
       this.isShow = Number(this.editPanel.param.report.schedule.type)
-      this.editPanel.param.report.schedule.type = this.editPanel.param.report.schedule.type + ''
-      if (this.editPanel.param.report.schedule.stime !== '') {
-        this.editPanel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.stime)
-      } else {
-        this.editPanel.param.report.schedule.stime = ''
-      }
-      if (this.editPanel.param.report.schedule.etime !== '') {
-        this.editPanel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.etime)
-      } else {
-        this.editPanel.param.report.schedule.etime = ''
-      }
     }
   },
   mounted () {
@@ -496,8 +486,8 @@ export default {
               type: Number(this.editPanel.param.report.schedule.type),
               repeat: this.editPanel.param.report.schedule.repeat ? this.editPanel.param.report.schedule.repeat : 1,
               nums: this.editPanel.param.report.schedule.nums,
-              stime: this.editPanel.param.report.schedule.stime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime) : this.editPanel.param.report.schedule.stime,
+              stime: this.editPanel.param.report.schedule.stime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss') : this.editPanel.param.report.schedule.stime,
-              etime: this.editPanel.param.report.schedule.etime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime) : this.editPanel.param.report.schedule.etime
+              etime: this.editPanel.param.report.schedule.etime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss') : this.editPanel.param.report.schedule.etime
             },
             receivers: this.editPanel.param.report.receivers
           },
@@ -584,17 +574,23 @@ export default {
     'editPanel.param.report.schedule.stime': {
       deep: true,
       handler (n) {
+        const startTime = this.$loadsh.get(this.editPanel, 'param.report.schedule.stime', '')
+        if (startTime !== '') {
           this.editPanel.param.report.schedule.stime = bus
             .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
         }
+      }
     },
     'editPanel.param.report.schedule.etime': {
       deep: true,
       handler (n) {
+        const endTime = this.$loadsh.get(this.editPanel, 'param.report.schedule.etime', '')
+        if (endTime !== '') {
           this.editPanel.param.report.schedule.etime = bus
             .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
         }
       }
     }
+  }
 }
 </script>

nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue

@@ -15,7 +15,7 @@
               <el-input placeholder="" maxlength="64" show-word-limit v-model="editCredential.name" size="small" id="credential-box-input-name"></el-input>
             </el-form-item>
             <el-form-item :label='$t("overall.remark")' prop="remark">
-              <el-input placeholder="" maxlength="256" show-word-limit v-model="editCredential.remark" size="small" id="credential-box-input-remark"></el-input>
+              <el-input placeholder="" maxlength="256"  rows="2" show-word-limit size="small" type="textarea" v-model="editCredential.remark"  id="credential-box-input-remark"></el-input>
             </el-form-item>
             <el-form-item :label='$t("config.mib.credential.type")' prop="type">
               <el-select v-model="editCredential.type" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" @change="typeChange">

nezha-fronted/src/components/common/table/alert/alertRuleTable.vue

@@ -243,7 +243,7 @@ export default {
           width: 120,
           sortable: 'custom'
         }, {
-          label: this.$t('alert.config.receiver'),
+          label: this.$t('alert.receiver'),
           prop: 'receivers',
           show: false,
           minWidth: 100

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -153,7 +153,7 @@
             </nz-tooltip>
           </template>
           <template v-else-if="item.prop === 'enabled'">
-            <span v-if="scope.row[item.prop] === 1">{{$t('overall.enable')}}</span>
+            <span v-if="scope.row[item.prop] === 1">{{$t('overall.enabled')}}</span>
             <span v-else>{{$t('profile.close')}}</span>
           </template>
           <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>

nezha-fronted/src/components/layout/header.vue

@@ -66,6 +66,7 @@
       </el-dropdown>
     </div>
     <guide :show-dialog="showGuide" @dialogClosed="dialogClosed" @close="showGuide = false"></guide>
+    <intro></intro>
 <!--    <span v-for="item in fontData" :key="item">-->
 <!--      <span class="temp-dom" :class="`temp-dom&#45;&#45;${fontSzie}`" v-for="fontSzie in [12,13,14,15]" :key="fontSzie">{{item}}</span>-->
 <!--    </span>-->
@@ -76,16 +77,19 @@
 import bus from '../../libs/bus'
 import { mapActions } from 'vuex'
 import guide from '@/components/common/popBox/guide'
+import intro from '@/components/common/intro'
 export default {
   name: 'Header',
   components: {
-    guide
+    guide,
+    intro
   },
   data () {
     return {
       username: '',
       name: '',
       language: 'en',
+      showIntro: 'true',
       // 顶部菜单相关
       createMenu: [ // 新增按钮内容
         {
@@ -228,32 +232,6 @@ export default {
       this.getLinkData()
     }
     window.addEventListener('visibilitychange', this.testUser)
-    // setTimeout(() => {
-    //   this.$intro()
-    //     .setOptions({
-    //       // 我给看的效果图是英⽂的（默认英⽂），这⾥是更换成中⽂
-    //       prevLabel: '上⼀步',
-    //       nextLabel: '下⼀步',
-    //       skipLabel: '跳过',
-    //       doneLabel: '完成',
-    //       // steps步骤，可以写个⼯具类保存起来
-    //       steps: this.steps,
-    //       dontShowAgain: true
-    //     })
-    //     .oncomplete(() => {
-    //       // 需要注意的是，这⾥⽤了箭头函数
-    //       // 点击结束按钮后执⾏的事件
-    //     })
-    //     .onexit(() => {
-    //       // 点击跳过按钮后执⾏的事件
-    //     })
-    //     .onbeforeexit(() => {
-    //       // 确认完毕之后执⾏的事件
-    //       // return confirm('Are you sure?')
-    //     })
-    //   // this.$intro('#personal').start() // start the guide
-    //   // this.$intro('#personal').showHints() // show hints
-    // }, 1000)
   },
   computed: {
     linkData () {

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

@@ -72,7 +72,7 @@ export default {
       customTableTitle: [
         { label: this.$t('alert.config.schedEnable'), prop: 'schedule' },
         { label: this.$t('backup.backupRetention'), prop: 'retention' },
-        { label: this.$t('overall.enable'), prop: 'state' }
+        { label: this.$t('overall.enabled'), prop: 'state' }
       ],
       customTableTitle2: [
         { label: this.$t('config.assetLabel.date'), prop: 'time', minwidth: 228 },

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

@@ -60,7 +60,7 @@
         <el-form-item :label="$t('config.system.basic.mapConfig')" class="basic-lnglat" prop="lnglat">
           <div style="display: flex">
             <el-input v-model="basic.lnglat" maxlength="256" placeholder="" style="width: calc(100% - 50px); padding-right: 50px;">
-              <template slot="prepend">{{$t('config.dc.lnglat')}}</template>
+              <template slot="prepend">{{$t('config.system.basic.lnglat')}}</template>
             </el-input>
             <latlng-picker ref="latlngPicker" :init-data="basic.lnglat" :show-zoom="true" @lnglatChange="lnglatChange"></latlng-picker>
           </div>

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

@@ -70,7 +70,7 @@
             <template slot="append"><span >{{$t('config.system.basic.day')}}</span></template>
           </el-input>
         </el-form-item>
-        <el-form-item :label="$t('config.system.monitor.logs_storage_type')" prop="logs_storage_type">
+        <el-form-item :label="$t('config.system.monitor.metrics_storage_type')" prop="logs_storage_type">
           <el-select v-model="monitor.logs_storage_type" popper-class="right-box-select-top right-public-box-dropdown-top">
             <el-option :label="$t('config.system.monitor.local')" value="1"></el-option>
             <el-option :label="$t('config.system.monitor.s3')" value="2"></el-option>

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

@@ -50,7 +50,7 @@
      </div>
       <div class="profile-left__button table-operation-items">
         <button @click="profileEnable" class="footer__btn"  v-if="mfaEnable != '1' && mfaLevel == 0">
-          <span>{{$t('overall.enable')}}</span>
+          <span>{{$t('overall.enabled')}}</span>
         </button>
         <button @click="profileDisable" class="footer__btn footer__btn--light"  :class="{'footer__btn--disabled': mfaEnable == 1 ||  mfaLevel == 2}" v-if="mfaEnable == '1' || mfaLevel > 0" :disabled="mfaEnable == 1 ||  mfaLevel == 2 ">
           <span>{{$t('profile.close')}}</span>

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

@@ -149,7 +149,7 @@
                 </el-form-item>
                 <el-form-item :label="$t('setup.system.federation')" prop="prometheusFederationEnabled" key="sysprometheusFederationEnabled" >
                   <el-select v-model="system.prometheusFederationEnabled" :placeholder="$t('el.select.placeholder')" style="width: 100%" >
-                    <el-option :label="$t('overall.enable')" :value="1"></el-option>
+                    <el-option :label="$t('overall.enabled')" :value="1"></el-option>
                     <el-option :label="$t('overall.unavailable')"  :value="0"></el-option>
                   </el-select>
                 </el-form-item>

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

@@ -56,7 +56,7 @@
             <el-form-item :label="$t('config.system.basic.mapConfig')" class="basic-lnglat" prop="lnglat">
               <div style="display: flex">
                 <el-input v-model="basic.lnglat" maxlength="256" placeholder="" style="width: calc(100% - 50px); padding-right: 50px;">
-                  <template slot="prepend">{{$t('config.dc.lnglat')}}</template>
+                  <template slot="prepend">{{$t('config.system.basic.lnglat')}}</template>
                 </el-input>
                 <latlng-picker ref="latlngPicker" :init-data="basic.lnglat" :show-zoom="true" @lnglatChange="lnglatChange"></latlng-picker>
               </div>

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

@@ -131,7 +131,7 @@ export default {
           prop: 'name',
           show: true
         }, {
-          label: 'Token',
+          label: this.$t('apiKey.key'),
           prop: 'token',
           show: true
         }, {

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

@@ -89,7 +89,7 @@ export default {
           minWidth: 100,
           show: true
         }, {
-          label: this.$t('asset.talon.token'),
+          label: this.$t('apiKey.key'),
           prop: 'token',
           minWidth: 180,
           show: true

nezha-fronted/src/components/page/dashboard/explore/logTab.vue

@@ -125,7 +125,9 @@ export default {
     }
   },
   data () {
+    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
     return {
+      theme,
       operations: {
         levels: [0, 1, 2, 3, 4, 5, 6],
         descending: true
@@ -262,8 +264,10 @@ export default {
             itemHeight: 4,
             borderRadius: 3,
             textStyle: {
-              padding: [0, 0, 0, 6]
+              padding: [0, 0, 0, 6],
-            }
+              color: this.theme == 'light' ? '#666666' : '#BEBEBE',
+            },
+            inactiveColor: this.theme == 'light' ? '#BEBEBE' : '#666666' // 字体颜色
           },
           series,
           xAxis: {

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -23,7 +23,6 @@
               v-model="cascaderValue"
               v-clickoutside="closeDropdown"
               v-my-loading="tempBoxShowLoading"
-              :loading="loading"
               :options="metricOptions"
               v-if="type !== 'log'"
               :props="cascaderProps"
@@ -925,7 +924,7 @@ export default {
             let childrenCopy = JSON.parse(JSON.stringify(children))
             const findChild = this.metricOptions.find(item => item.label === data.parent)
             if (childrenCopy.length > 100) {
-              childrenCopy = childrenCopy.splice(findChild.children.length, findChild.children.length + 101)
+              childrenCopy = childrenCopy.splice(findChild.children.length, 100)
               findChild.children.splice(findChild.children.length - 1, 1)
               findChild.children.push(...childrenCopy)
               if (findChild.children.length < children.length - 1) {

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -391,10 +391,12 @@ export default {
       })
     },
     edit (u) {
-      this.panel = Object.assign({}, u)
+      this.$get('visual/panel?ids=' + u.id).then(res => {
+        if (res.code === 200) {
+          this.panel = res.data.list[0]
           if (!this.panel.param.report) {
             this.panel = {
-          ...u,
+              ...this.panel,
               param: {
                 report: {
                   enable: false,
@@ -414,7 +416,23 @@ export default {
               }
             }
           }
+          this.panel.param.report.schedule.type = this.panel.param.report.schedule.type + ''
+          const startTime = this.$loadsh.get(this.panel, 'param.report.schedule.stime', '')
+          if (startTime !== '') {
+            this.panel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.panel.param.report.schedule.stime = ''
+          }
+          const endTime = this.$loadsh.get(this.panel, 'param.report.schedule.etime', '')
+          if (endTime !== '') {
+            this.panel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.panel.param.report.schedule.etime = ''
+          }
           this.rightBox.panel.show = true
+        }
+      })
+      // this.panel = Object.assign({}, u)
     },
     toAdd () {
       if (!this.hasButton('panel_view')) {