diff --git a/nezha-fronted/src/components/common/alert/alertDaysInfo.vue b/nezha-fronted/src/components/common/alert/alertDaysInfo.vue
index 36d7cab25..abf89a970 100644
--- a/nezha-fronted/src/components/common/alert/alertDaysInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertDaysInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="alert-days-info">
-<!--    {{timestampStr(item.time, 'YYYY-MM-DD')}} {{item.P1+' '+item.P2+' '+item.P3}}-->
+<!--    {{utcTimeToTimezoneStr(item.time, 'YYYY-MM-DD')}} {{item.P1+' '+item.P2+' '+item.P3}}-->
     <div v-for="item in alertDaysData" :key="item.time" :style="showPriority(item)" @mouseenter="tooltipHover(item,true, $event)" @mouseleave="tooltipHover(item,false, $event)">
       <div v-if="item.tooltipShow" class="alert-days-info-tooltip" :style="{left: item.position.left + 'px',top:item.position.top + 'px'}">
-        <div class="tooltip-title severity-time">{{timestampStr(item.time, dateFormatStr)}}</div>
+        <div class="tooltip-title severity-time">{{utcTimeToTimezoneStr(item.time, dateFormatStr)}}</div>
         <div v-for="(severity,index) in severityDataWeight" :key="index" class="severity-info">
           <div class="severity-block" :style="{background: severity.color}"></div>
           <div class="severity-name">{{severity.name}}</div>
diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index a70a647e0..279565c86 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -17,6 +17,10 @@
         <div class="alert-label-title">{{$t('overall.manageIp')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
       </div>
+      <div class="alert-label-box name-label">
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
+      </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.type')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
@@ -355,7 +359,7 @@ export default {
             dialog = document.querySelector('#viewGraphDialog .el-dialog')
           }
           const dialogHeight = dialog.getBoundingClientRect()
-          leftOffSet = leftOffSet - dialogHeight.x
+          leftOffSet = leftOffSet - 3 * dialogHeight.x
           leftOffSetView = dialogHeight.x
           topOffSet = topOffSet - dialogHeight.y
           topOffSetView = topOffSet
@@ -538,3 +542,5 @@ export default {
 }
 
 </script>
+<style>
+</style>
diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfoDetail.vue b/nezha-fronted/src/components/common/alert/alertMessageInfoDetail.vue
index 88c08cbfc..3fcf17396 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoDetail.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoDetail.vue
@@ -30,6 +30,7 @@
       :id="alertLabelId"
       :that="alertLabelObj"
       :type="alertLabelType"
+      :alertTableDialog="true"
     ></alertLabel>
   </div>
 </template>
diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
index ca8094728..41ccdd6fa 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
@@ -8,6 +8,7 @@
         <div v-else-if="(activeName === item.key) && infoData[item.key]" class="no-position-alert-label">
 <!--          <searchItemInfo :obj="findData(item.key)" :severityData="severityData" :fa-loading="false"></searchItemInfo>-->
           <alertLabel
+            class="a"
             v-if="item.key !=='alertRule'"
             :id="infoData[item.key].id"
             :that="findData2(item.key)"
@@ -151,6 +152,5 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style>
 </style>
diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue b/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
index 1fb84c7d3..93cec1f23 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 100%; width: 100%">
+  <div style="height: 100%; width: 100%" class="message-time-line">
     <div class="time-line-header">
       <span>{{ $t("alert.relatedAlerts") }}</span>
       <div class="scope-icon-box">
@@ -54,7 +54,7 @@
           <div class="alert-message-summary">{{ item.summary }}</div>
           <div class="alert-message-startAt">
             <span>Start time:</span>
-            <span>{{item.startTime.split(" ")[1]}}</span>
+            <span>{{utcTimeToTimezoneStr(item.startTime)}}</span>
             <span>Duration:</span>
             <span>{{getDuration(item)}}</span>
           </div>
@@ -114,7 +114,6 @@ import { alertMessage as alertMessageConstant } from "@/components/common/js/con
 import alertMessageLabelMixin from "@/components/common/alert/alertMessageLabelMixin";
 import alertLabelMixin from "@/components/common/mixin/alertLabelMixin";
 import { calcDurationByStringTimeB } from '@/components/common/js/tools.js'
-
 export default {
   name: "alertMessageInfoTimeLine",
   props: {
@@ -144,6 +143,7 @@ export default {
       handler(n) {
         if (n && n.length) {
           this.pageNo = 1;
+          this.lastDataTime = ''
           this.getTimeLineData();
         }
       },
@@ -268,7 +268,7 @@ export default {
     disposeTime(pageNo) {
       let i = (pageNo - 1) * this.pageSize;
       for (i; i < this.timeLineData.length; i++) {
-        const lastDataTime = this.timestampStr(
+        const lastDataTime = this.utcTimeToTimezoneStr(
           this.timeLineData[i].startAt,
           this.dateFormatStr
         );
@@ -322,6 +322,7 @@ export default {
       }
       this.scopeChangeTimer = setTimeout(() => {
         this.pageNo = 1;
+        this.lastDataTime = ''
         this.getTimeLineData();
       }, 100);
     },
diff --git a/nezha-fronted/src/components/common/mixin/mainMixinFun.js b/nezha-fronted/src/components/common/mixin/mainMixinFun.js
new file mode 100644
index 000000000..635e2da5b
--- /dev/null
+++ b/nezha-fronted/src/components/common/mixin/mainMixinFun.js
@@ -0,0 +1,87 @@
+import bus from '@/libs/bus'
+import { hasButton } from '@/permission'
+import i18n from '@/components/common/i18n'
+export default {
+  methods: {
+    utcTimeToTimezone: function (time) { // 将utc时间 转为系统设者的时间  返回时间戳
+      if (time) {
+        return bus.UTCTimeToConfigTimezone(time)
+      }
+    },
+    utcTimeToTimezoneStr: function (time, fmt) { // 将utc时间 转为系统设者的时间  返回String
+      if (!fmt) {
+        fmt = localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss'
+      }
+      if (time) {
+        return bus.timeFormate(bus.UTCTimeToConfigTimezone(time), fmt)
+      } else {
+        return '-'
+      }
+    },
+    timezoneToUtcTime: function (time) { // 将系统设者的时间 转为utc时间 返回时间戳
+      if (time) {
+        return bus.configTimezoneToUTCTime(time)
+      }
+    },
+    timezoneToUtcTimeStr: function (time, fmt) { // 将系统设者的时间 转为utc时间 返回String
+      if (!fmt) {
+        fmt = localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss'
+      }
+      if (time) {
+        return bus.timeFormate(this.timezoneToUtcTime(time), fmt)
+      }
+    },
+    timeFormate (time) {
+      return bus.timeFormate(time)
+    },
+    hasButton (code) {
+      return hasButton(this.$store.getters.buttonList, code)
+    },
+    numberWithEConvent (num) {
+      if (num) {
+        if ((('' + num).indexOf('E') !== -1) || (('' + num).indexOf('e') !== -1)) {
+          const regExp = /'^((\\d+.?\\d+)[Ee]{1}(\\d+))$', 'ig'/
+          let result = regExp.exec(num)
+          let resultValue = ''
+          let power
+          if (result != null) {
+            resultValue = result[2]
+            power = result[3]
+            result = regExp.exec(num)
+          }
+
+          if (resultValue) {
+            if (power) {
+              const powVer = Math.pow(10, power)
+              resultValue = resultValue * powVer
+              return resultValue
+            }
+          }
+        } else {
+          return num
+        }
+      }
+      return 0
+    },
+    translation (key) {
+      return i18n.t(key)
+    },
+    timeFormatStrToDatePickFormat (str, flag) {
+      if (flag) {
+        const reg = /Y/g
+        str = str.replace(reg, 'y')
+        const reg1 = /D/g
+        str = str.replace(reg1, 'd')
+        const reg2 = /[H,m,s,:]/g
+        str = str.replace(reg2, '')
+        return str
+      } else {
+        const reg = /Y/g
+        str = str.replace(reg, 'y')
+        const reg1 = /D/g
+        str = str.replace(reg1, 'd')
+        return str
+      }
+    },
+  }
+}
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index b8f742494..e803c0c28 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -643,7 +643,6 @@ export default {
       handler (n, o) {
         this.isEdit = true
         this.editAlertRule = JSON.parse(JSON.stringify(n))
-        console.log(this.editAlertRule)
         if (this.editAlertRule.id || this.editAlertRule.name) {
           this.expressions = [this.editAlertRule.expr]
           this.showTypeSelect = true // 当 edit 时禁用 type下拉框
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleEvalLogTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleEvalLogTable.vue
index 25e4f6ff2..aff6ea989 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleEvalLogTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleEvalLogTable.vue
@@ -48,13 +48,13 @@
           <el-tooltip :disabled="!scope.row.etts" effect="light" placement="right">
             <div slot="content">
               {{$t('config.terminallog.endTime')}}<br/>
-              {{timestampStr(scope.row.etts)}}
+              {{utcTimeToTimezoneStr(scope.row.etts)}}
             </div>
             <span>{{getDuration(scope.row)}}</span>
           </el-tooltip>
         </template>
         <template v-else-if="item.prop === 'stts'">
-          {{timestampStr(scope.row[item.prop])}}
+          {{utcTimeToTimezoneStr(scope.row[item.prop])}}
         </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <template v-else>-</template>
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index 5f9692afe..4a0caa4f8 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -399,6 +399,7 @@ export default {
       pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
       pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' },
       orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
+      sign: '',
       ids: {
         target: this.searchLabel,
         isSearchInput: true,
diff --git a/nezha-fronted/src/components/page/alert/alertSilence.vue b/nezha-fronted/src/components/page/alert/alertSilence.vue
index 3d286c4df..5ff505b63 100644
--- a/nezha-fronted/src/components/page/alert/alertSilence.vue
+++ b/nezha-fronted/src/components/page/alert/alertSilence.vue
@@ -169,7 +169,6 @@ export default {
   },
   methods: {
     queryMessage(alertRule) {
-      console.log(alertRule);
       this.$refs.dataList.showBottomBox('alertRuleAlertMessage', alertRule)
     },
     closeRightBox(refresh) {
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 0d4f4be44..cf7bc5cfd 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -394,24 +394,24 @@
 </template>
 
 <script>
-import selectAlertSilence from '../../../common/alert/selectAlertSilence';
-        import { get } from '@/http';
-import { PromQLExtension } from 'codemirror-promql';
-import { basicSetup } from '@codemirror/basic-setup';
+import selectAlertSilence from '../../../common/alert/selectAlertSilence'
+import { get } from '@/http'
+import { PromQLExtension } from 'codemirror-promql'
+import { basicSetup } from '@codemirror/basic-setup'
 // import { EditorState } from '@codemirror/state';
-import { highlightSelectionMatches } from '@codemirror/search';
-import { EditorState, Prec, Compartment } from '@codemirror/state';
-import { indentOnInput, syntaxTree } from '@codemirror/language';
-import { EditorView , highlightSpecialChars, keymap, ViewUpdate, placeholder} from '@codemirror/view';
-import { history, historyKeymap } from '@codemirror/history';
-import { bracketMatching } from '@codemirror/matchbrackets';
-import { defaultKeymap, insertNewlineAndIndent } from '@codemirror/commands';
-import { commentKeymap } from '@codemirror/comment';
-import { lintKeymap } from '@codemirror/lint';
-import { baseTheme, lightTheme, darkTheme, promqlHighlighter } from './CMTheme.tsx';
-import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
-import { autocompletion, completionKeymap, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
-      
+import { highlightSelectionMatches } from '@codemirror/search'
+import { EditorState, Prec, Compartment } from '@codemirror/state'
+import { indentOnInput, syntaxTree } from '@codemirror/language'
+import { EditorView, highlightSpecialChars, keymap, ViewUpdate, placeholder } from '@codemirror/view'
+import { history, historyKeymap } from '@codemirror/history'
+import { bracketMatching } from '@codemirror/matchbrackets'
+import { defaultKeymap, insertNewlineAndIndent } from '@codemirror/commands'
+import { commentKeymap } from '@codemirror/comment'
+import { lintKeymap } from '@codemirror/lint'
+import { baseTheme, promqlHighlighter } from './CMTheme.tsx'
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets'
+import { autocompletion, completionKeymap, CompletionContext, CompletionResult } from '@codemirror/autocomplete'
+
 export default {
   name: 'promqlInput',
   components: {
@@ -450,6 +450,7 @@ export default {
   },
   data () {
     return {
+      a: 'a',
       dropDownVisible: false,
       // metricStore:[],
       metricOptions: [],
@@ -515,43 +516,104 @@ export default {
     }
   },
   mounted () {
-    
-    let promQL = new PromQLExtension().setComplete(
-      // { 
-      //   remote: { url: 'https://prometheus.land' } 
-      //   }
-        )
-// const dynamicConfigCompartment = new Compartment();
-
-      new EditorView({
-      state: EditorState.create({
-          extensions: [
-            baseTheme,
-          highlightSpecialChars(),
-          history(),
-          indentOnInput(),
-          bracketMatching(),
-          closeBrackets(),
-          autocompletion(),
-          highlightSelectionMatches(),
-            keymap.of([
-            ...closeBracketsKeymap,
-            ...defaultKeymap,
-            ...historyKeymap,
-            ...commentKeymap,
-            ...completionKeymap,
-            ...lintKeymap,
-          ]),
-          placeholder('Expression (press Shift+Enter for newlines)'),
-            basicSetup, promQL.asExtension()],
-      }),
+    const self = this
+    const promQL = new PromQLExtension().setComplete(
+      {
+        remote: {
+          cache: {
+            initialMetricList: [
+              'ALERTS',
+              'ALERTS_FOR_STATE',
+              'alertmanager_alerts',
+              'alertmanager_alerts_invalid_total',
+              'alertmanager_alerts_received_total',
+              'nz-agent'
+            ]
+          }
+        }
+      }
+    )
+    const dynamicConfigCompartment = new Compartment()
+    const dynamicConfig = [
+      promqlHighlighter,
+      promQL.asExtension(),
+      baseTheme
+    ]
+    // const dynamicConfigCompartment = new Compartment();
+    const EditorViewstate = EditorState.create({
+      extensions: [
+        baseTheme,
+        highlightSpecialChars(),
+        history(),
+        EditorState.allowMultipleSelections.of(true),
+        indentOnInput(),
+        bracketMatching(),
+        closeBrackets(),
+        autocompletion(),
+        highlightSelectionMatches(),
+        EditorView.lineWrapping,
+        keymap.of([
+          ...closeBracketsKeymap,
+          ...defaultKeymap,
+          ...historyKeymap,
+          ...commentKeymap,
+          ...completionKeymap,
+          ...lintKeymap
+        ]),
+        placeholder('Expression (press Shift+Enter for newlines)'),
+        dynamicConfigCompartment.of(dynamicConfig),
+        // This keymap is added without precedence so that closing the autocomplete dropdown
+        // via Escape works without blurring the editor.
+        keymap.of([
+          {
+            key: 'Escape',
+            run: (v) => {
+              v.contentDOM.blur()
+              return false
+            }
+          }
+        ]),
+        Prec.override(
+          keymap.of([
+            {
+              key: 'Enter',
+              run: (v) => {
+                self.newChange()
+                return true
+              }
+            },
+            {
+              key: 'Shift-Enter',
+              run: insertNewlineAndIndent
+            }
+          ])
+        ),
+        EditorView.updateListener.of((update) => {
+          self.newChange(update.state.doc.toString())
+        })
+      ],
+      doc: self.a,
+      editorState: {
+        changeByRange: self.newChange(),
+        changes: self.newDoc(),
+        facet: self.newChange()
+      }
+    })
+    new EditorView({
+      state: EditorViewstate,
       parent: document.getElementById('editor')
-  });
+    })
     if (!this.fromFatherData && this.type !== 'logs') {
       this.queryMetrics()
     }
   },
   methods: {
+    newChange (val) {
+      console.log(val)
+    },
+    newDoc (val) {
+      console.log(val)
+    },
     closeDropdown () {
       this.dropDownVisible = false
     },
@@ -648,13 +710,11 @@ export default {
       this.cascaderValue = ''
     },
     metricKeyDown (val) {
-      console.log(val);
       if (this.required) {
         this.metricChange(val)
       }
     },
     expressionChange: function () {
-      console.log('expressionChange');
       this.$emit('change')
     },
     setError: function (errMsg) {
@@ -916,6 +976,9 @@ export default {
         }
       }
     },
+    a () {
+      console.log(this.a)
+    },
     metricOptionsParent: {
       deep: true,
       immediate: true,
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 380e6c760..fd97ed842 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -31,11 +31,11 @@ import chartList from '@/components/chart/chartList.vue' // 全局引入 chartLi
 
 import loading from '@/components/common/loading'
 import pickTime from '@/components/common/pickTime'
-import bus from '@/libs/bus'
 import myDatePicker from '@/components/common/myDatePicker'
 import vSelectPage from '@/components/common/v-selectpagenew'
 import nzDataList from '@/components/common/table/nzDataList'
 import htmlToPdf from '@/components/common/js/htmlToPdf'
+import mainMixin from '@/components/common/mixin/mainMixinFun'
 
 Vue.use(htmlToPdf)
 Vue.use(vSelectPage, {
@@ -100,127 +100,6 @@ Vue.mixin({
       }
     }
   },
-  methods: {
-    utcTimeToTimezone: function (time) { // 将utc时间 转为系统设者的时间  返回时间戳
-      if (time) {
-        return bus.UTCTimeToConfigTimezone(time)
-      }
-    },
-    utcTimeToTimezoneStr: function (time) { // 将utc时间 转为系统设者的时间  返回String
-      if (time) {
-        return bus.timeFormate(bus.UTCTimeToConfigTimezone(time), localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss')
-      } else {
-        return '-'
-      }
-    },
-    timezoneToUtcTime: function (time) { // 将系统设者的时间 转为utc时间 返回时间戳
-      if (time) {
-        return bus.configTimezoneToUTCTime(time)
-      }
-    },
-    timezoneToUtcTimeStr: function (time, fmt) { // 将系统设者的时间 转为utc时间 返回String
-      if (!fmt) {
-        fmt = localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss'
-      }
-      if (time) {
-        return bus.timeFormate(this.timezoneToUtcTime(time), fmt)
-      }
-    },
-    timestampStr: function (time, fmt) { // 将utc时间 转为系统设者的时间  返回String
-      const date = new Date(time)
-      const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果
-      const dateStr = new Date(time).getTime() + localOffset
-      if (!fmt) {
-        fmt = localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss'
-      }
-      if (time) {
-        return bus.timeFormate(bus.UTCTimeToConfigTimezone(dateStr), fmt)
-      } else {
-        return '-'
-      }
-    },
-    timeFormate (time) {
-      return bus.timeFormate(time)
-    },
-    hasButton (code) {
-      return hasButton(this.$store.getters.buttonList, code)
-    },
-    numberWithEConvent (num) {
-      if (num) {
-        if ((('' + num).indexOf('E') !== -1) || (('' + num).indexOf('e') !== -1)) {
-          const regExp = /'^((\\d+.?\\d+)[Ee]{1}(\\d+))$', 'ig'/
-          let result = regExp.exec(num)
-          let resultValue = ''
-          let power
-          if (result != null) {
-            resultValue = result[2]
-            power = result[3]
-            result = regExp.exec(num)
-          }
-
-          if (resultValue) {
-            if (power) {
-              const powVer = Math.pow(10, power)
-              resultValue = resultValue * powVer
-              return resultValue
-            }
-          }
-        } else {
-          return num
-        }
-      }
-      return 0
-    },
-    translation (key) {
-      return i18n.t(key)
-    },
-    timeFormatStrToDatePickFormat (str, flag) {
-      if (flag) {
-        const reg = /Y/g
-        str = str.replace(reg, 'y')
-        const reg1 = /D/g
-        str = str.replace(reg1, 'd')
-        const reg2 = /[H,m,s,:]/g
-        str = str.replace(reg2, '')
-        return str
-      } else {
-        const reg = /Y/g
-        str = str.replace(reg, 'y')
-        const reg1 = /D/g
-        str = str.replace(reg1, 'd')
-        return str
-      }
-    },
-    copyRow (row, rightBoxValKey, idKey = 'id', show = false, format, callback) {
-      /*
-      row 表格当前行
-      rightBoxValKey 右侧弹窗绑定的 data
-      idKey 当前数据的唯一标识
-      show 打开对应的弹窗 函数
-      format 是否需要对当前行进行处理
-      callBack 回调
-      */
-      let rowCopy = { ...row }
-      if (rowCopy.name) {
-        rowCopy.name = 'Copy from ' + rowCopy.name
-      }
-      if (format) {
-        rowCopy = format(rowCopy)
-      }
-      delete rowCopy[idKey]
-      this[rightBoxValKey] = rowCopy
-      if (typeof show === 'function') {
-        show()
-      } else if (typeof show === 'string') {
-        this[show] = true
-      } else {
-        this.rightBox.show = true
-      }
-      if (callback) {
-        callback()
-      }
-    }
-  },
   computed: {
     timeFormatMain () {
       return this.$store.getters.getTimeFormatMain
@@ -234,7 +113,8 @@ Vue.mixin({
     $routePath () {
       return this.$route.path
     }
-  }
+  },
+  ...mainMixin
 })
 
 Vue.config.productionTip = false
diff --git a/nezha-fronted/test/unit/__mocks__/fileMock.js b/nezha-fronted/test/unit/__mocks__/fileMock.js
index d922057e7..89b3cab1b 100644
--- a/nezha-fronted/test/unit/__mocks__/fileMock.js
+++ b/nezha-fronted/test/unit/__mocks__/fileMock.js
@@ -1,5 +1,10 @@
 module.exports = {
   'test-file-stub': 'test-file-stub',
+  $store:{
+    getters: {
+      buttonList: ['main_add']
+    },
+  },
   getters: {},
   commit: ()=>{}
 }
diff --git a/nezha-fronted/test/unit/__mocks__/i18nMock.js b/nezha-fronted/test/unit/__mocks__/i18nMock.js
index 24441e55d..e5c18ca5b 100644
--- a/nezha-fronted/test/unit/__mocks__/i18nMock.js
+++ b/nezha-fronted/test/unit/__mocks__/i18nMock.js
@@ -1,3 +1,14 @@
 module.exports = {
-  t: () => { return 'i18n' }
+  local: 'en',
+  obj: {
+    en: {
+      'overall.all': 'All'
+    },
+    zh: {
+      'overall.all': '全部'
+    }
+  },
+  t (code) {
+    return this.obj[this.local][code] || code
+  }
 }
diff --git a/nezha-fronted/test/unit/jest.conf.js b/nezha-fronted/test/unit/jest.conf.js
index d662d782e..3c3d0c999 100644
--- a/nezha-fronted/test/unit/jest.conf.js
+++ b/nezha-fronted/test/unit/jest.conf.js
@@ -56,7 +56,7 @@ module.exports = {
     // 'test/unit/specs/*.(js)',
     'src/components/common/js/example.js',
     'src/libs/bus.js',
-    'src/main.js',
+    'src/components/common/mixin/*.js',
     // 'src/components/common/js/tools.js',
     // '!src/*.(js)',
     '!src/http.js',
diff --git a/nezha-fronted/test/unit/specs/main.spec.js b/nezha-fronted/test/unit/specs/main.spec.js
index 2d33017ab..1f4808b06 100644
--- a/nezha-fronted/test/unit/specs/main.spec.js
+++ b/nezha-fronted/test/unit/specs/main.spec.js
@@ -1,22 +1,90 @@
-import main from '@/main'
+import mainMixin from '@/components/common/mixin/mainMixinFun'
+import i18n from '@/components/common/i18n'
 describe('时间函数', () => {
-  // 测试代码可读性最好
-  // 分组
-  // const str = 'node_load1{module="node-exporter",endpoint_id="69",project="Common",datacenter="xin_xi_gang_DC",asset_id="11",endpoint="node-exporter-192.168.44.18",module_id="165",nz_agent_id="75",project_id="17",olap="node_exporter_nacos",asset="Bifang-CM-Server2",datacenter_id="4"} '
-  // it('正常替换一个', () => {
-  //   expect(dealLegendAlias(str, '{{module}}')).toBe('node-exporter')
-  // })
   localStorage.setItem('nz-sys-timezone', 'Asia/Shanghai')
   it('utc时间转系统时间 返回时间戳', () => {
-    expect(main.utcTimeToTimezone(1650006960000)).toBe(1650035760000)
+    expect(mainMixin.methods.utcTimeToTimezone(1650006960000)).toBe(1650035760000)
   })
   it('utc时间转系统时间 返回时间戳', () => {
-    expect(main.utcTimeToTimezone('2022-04-15 15:16:00')).toBe(1650035760000)
+    expect(mainMixin.methods.utcTimeToTimezone('2022-04-15 15:16:00')).toBe(1650035760000)
   })
   it('utc时间转系统时间 返回时间字符串', () => {
-    expect(main.utcTimeToTimezoneStr(1650006960000)).toBe('2022-04-15 23:16:00')
+    expect(mainMixin.methods.utcTimeToTimezoneStr(1650006960000)).toBe('2022-04-15 23:16:00')
   })
   it('utc时间转系统时间 返回时间字符串', () => {
-    expect(main.utcTimeToTimezoneStr('2022-04-15 15:16:00')).toBe('2022-04-15 23:16:00')
+    expect(mainMixin.methods.utcTimeToTimezoneStr('2022-04-15 15:16:00')).toBe('2022-04-15 23:16:00')
+  })
+  it('utc时间转系统时间 返回时间字符串 指定时间格式', () => {
+    expect(mainMixin.methods.utcTimeToTimezoneStr('2022-04-15 15:16:00', 'DD/MM/YYYY')).toBe('15/04/2022')
+  })
+
+  it('系统时间转utc时间转 返回时间戳', () => {
+    expect(mainMixin.methods.timezoneToUtcTime(1650006960000)).toBe(1649978160000)
+  })
+  it('系统时间转utc时间转 返回时间戳', () => {
+    expect(mainMixin.methods.timezoneToUtcTime('2022-04-15 15:16:00')).toBe(1649978160000)
+  })
+  it('系统时间转utc时间转  返回时间字符串', () => {
+    expect(mainMixin.methods.timezoneToUtcTimeStr(1650006960000)).toBe('2022-04-15 07:16:00')
+  })
+  it('系统时间转utc时间转  返回时间字符串', () => {
+    expect(mainMixin.methods.timezoneToUtcTimeStr('2022-04-15 15:16:00')).toBe('2022-04-15 07:16:00')
+  })
+  it('系统时间转utc时间转 返回时间字符串 指定时间格式', () => {
+    expect(mainMixin.methods.timezoneToUtcTimeStr('2022-04-15 15:16:00', 'DD/MM/YYYY')).toBe('15/04/2022')
+  })
+  it('使用bus提供的 时间函数', () => {
+    expect(mainMixin.methods.timeFormate('2022-04-15 15:16:00')).toBe('2022-04-15 15:16:00')
+  })
+})
+describe('是否含有指数', () => {
+  it('测试正常数字是否是指数显示', () => {
+    expect(mainMixin.methods.numberWithEConvent(10)).toBe(10)
+  })
+  it('测试小数是否是指数显示', () => {
+    expect(mainMixin.methods.numberWithEConvent(0.1)).toBe(0.1)
+  })
+  it('测试较小数字是否是指数显示', () => {
+    expect(mainMixin.methods.numberWithEConvent(1.0000000000000004e-8)).toBe(0)
+  })
+  it('测试较大的数字是否是指数显示', () => {
+    expect(mainMixin.methods.numberWithEConvent(1e+23)).toBe(0)
+  })
+})
+
+describe('是否含有Button的权限', () => {
+  const obj = {
+    $store: {
+      getters: {
+        buttonList: ['main_add']
+      }
+    }
+  }
+  it('有', () => {
+    expect(mainMixin.methods.hasButton.bind(obj)('main_add')).toBeTruthy()
+  })
+  it('无', () => {
+    expect(mainMixin.methods.hasButton.bind(obj)('main_qwe')).toBeFalsy()
+  })
+})
+describe('i18n的使用', () => {
+  it('正常使用 匹配英文', () => {
+    expect(mainMixin.methods.translation('overall.all')).toBe('All')
+  })
+  it('正常使用 匹配中文', () => {
+    i18n.local = 'zh'
+    expect(mainMixin.methods.translation('overall.all')).toBe('全部')
+  })
+  it('未匹配到', () => {
+    expect(mainMixin.methods.translation('overall.asd')).toBe('overall.asd')
+  })
+})
+describe('替换 moment 跟 elementui的时间格式', () => {
+  // timeFormatStrToDatePickFormat
+  it('正常替换', () => {
+    expect(mainMixin.methods.timeFormatStrToDatePickFormat('YYYY-DD-MM HH:mm:ss')).toBe('yyyy-dd-MM HH:mm:ss')
+  })
+  it('不包含时分秒', () => {
+    expect(mainMixin.methods.timeFormatStrToDatePickFormat('YYYY-DD-MM HH:mm:ss', true)).toBe('yyyy-dd-MM ')
   })
 })