NEZ-929 fix: explore metrics,logs 切换 样式调整

nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue

@@ -4,7 +4,7 @@
       <i class="nz-icon nz-icon-more2" style="font-size: 12px;"></i>
     </button>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item v-if="showLock">
+      <el-dropdown-item  v-if="showLock">
         <div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i>{{panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div>
       </el-dropdown-item>
       <!-- import、export之前的内容 -->
@@ -102,7 +102,7 @@ export default {
   props: {
     size: {
       type: String,
-      default: 'small'
+      default: 'medium'
     },
     exportUrl: { type: String, default: '' },
     params: { type: Object },

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

@@ -8,16 +8,33 @@
         </div>
         <!-- 顶部工具栏 -->
         <div class="top-tools" style="z-index: 1">
-          <div class="top-tool-left">
+<!--          <div class="top-tool-left">-->
-            <el-select v-model="fromData.status" size="small" style="width: 120px;" @change="changeType">
+<!--            <el-select v-model="fromData.status" size="small" style="width: 120px;" @change="changeType">-->
-              <el-option
+<!--              <el-option-->
-                v-for="item in searchMetrics"
+<!--                v-for="item in searchMetrics"-->
-                :key="item.value"
+<!--                :key="item.value"-->
-                :label="item.label"
+<!--                :label="item.label"-->
-                :value="item.value">
+<!--                :value="item.value">-->
-              </el-option>
+<!--              </el-option>-->
-            </el-select>
+<!--            </el-select>-->
-          </div>
+<!--          </div>-->
+          <el-row class="block-col-2" style="width: 300px;">
+            <el-col>
+              <el-dropdown trigger="click">
+              <span class="el-dropdown-link">
+                <span><i :class="selectIcon"></i></span>
+                <span>{{selectValue}}</span>
+                <span><i class="el-icon-arrow-down el-icon--right"></i></span>
+              </span>
+                <el-dropdown-menu style="width: 118px" class="el-dropdown__width" placement="bottom-end" slot="dropdown">
+                  <el-dropdown-item
+                    @click.native="selectMetricsLogs(item.label,item.icon)"
+                    v-for="item in searchMetrics"
+                    :key="item.value">{{item.label}}</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </el-col>
+          </el-row>
           <div class="top-tool-right">
             <button v-if="!closable" class="top-tool-btn top-tool-btn--text margin-r-10" style="cursor: pointer;" type="button" @click="split">Split</button>
             <pick-time id="explore" ref="pickTime" v-model="filterTime" :class="{'margin-r-10': showMetrics}" :refresh-data-func="expressionChange" @unitChange="chartUnitChange">
@@ -327,13 +344,17 @@ export default {
       searchMetrics: [
         {
           value: 'Metrics',
-          label: this.$t('project.metrics.metrics')
+          label: this.$t('project.metrics.metrics'),
+          icon: 'nz-icon nz-icon-Metrics'
         },
         {
           value: 'Logs',
-          label: this.$t('overall.logs')
+          label: this.$t('overall.logs'),
+          icon: 'nz-icon nz-icon-logs'
         }
       ],
+      selectValue: '',
+      selectIcon: '',
       fromData: {
         status: ''
       },
@@ -463,8 +484,30 @@ export default {
     this.queryMetrics()
     this.promqlKeys.push(getUUID())
     this.fromData.status = this.searchMetrics[0].label
+    this.selectMetricsLogs()
   },
   methods: {
+    selectMetricsLogs (val, icon) {
+      if (this.selectValue === 'Metrics') {
+        this.selectValue = val
+        this.selectIcon = icon
+        this.showMetrics = val === 'Metrics'
+        this.showIntroduce = true
+        this.resetExpression()
+      } else if (this.selectValue === 'Logs') {
+        this.selectValue = val
+        this.selectIcon = icon
+        this.showMetrics = val === 'Metrics'
+        this.showIntroduce = true
+        this.resetExpression()
+      } else {
+        this.selectValue = 'Metrics'
+        this.selectIcon = 'nz-icon nz-icon-Metrics'
+        this.showMetrics = 'Metrics'
+        this.showIntroduce = true
+        this.resetExpression()
+      }
+    },
     changeType (value) {
       this.showMetrics = value === 'Metrics'
       this.showIntroduce = true
@@ -1108,6 +1151,22 @@ export default {
 
 </style>
 <style lang="scss" scoped>
+  .el-dropdown-link {
+    span:nth-of-type(1) {
+      color:  #FA901C;
+      padding-right: 10px;
+    }
+    span:nth-of-type(2) {
+      font-family: Roboto-Medium;
+      font-size: 16px;
+      color: #333333;
+      font-weight: 500;
+      padding-right: 20px;
+    }
+    span:nth-of-type(3) {
+      color: #BEBEBE;
+    }
+  }
   .explore {
     height: 100%;
     .explore-close {