NEZ-948 fix: asset label 样式调整

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

@@ -1,5 +1,5 @@
 <template>
-  <el-popover ref="selectAssetMetaGroupPopBox" v-model="popBox.show" :placement="placement" popper-class="nz-pop nz-pop-select-panel" transition="slide" width="300">
+  <el-popover ref="selectAssetMetaGroupPopBox" v-model="popBox.show" :placement="placement" popper-class="nz-pop nz-pop-select-panel nz-pop-select-panel__dropdown" transition="slide" width="300">
     <div>
       <div class="pop-item-wider">
 
@@ -19,11 +19,34 @@
             node-key="id"
             @node-click="selectObject">
             <div slot-scope="{ node, data }" class="tree--node">
-              <span>{{ node.label }}</span>
+<!--              -->
-              <span class="tree--operation">
+              <span>
-                <span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(data)"><i class="nz-icon nz-icon-delete"></i></span>
+                <el-popover
-                <span class="panel-dropdown-btn" @click.stop="edit(data)"><i class="nz-icon nz-icon-edit"></i></span>
+                  placement="right"
+                  trigger="hover"
+                  :content="node.label">
+                  <span slot="reference">{{ node.label }}</span>
+                </el-popover>
               </span>
+<!--              <span class="tree&#45;&#45;operation">-->
+<!--                <span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(data)"><i class="nz-icon nz-icon-delete"></i></span>-->
+<!--                <span class="panel-dropdown-btn" @click.stop="edit(data)"><i class="nz-icon nz-icon-edit"></i></span>-->
+<!--              </span>-->
+              <el-row class="block-col-2" style="width: 35px;">
+                <el-col>
+                  <el-dropdown placement="bottom" trigger="click">
+                    <span class="el-dropdown-link tree--operation" @click.stop><i class="nz-icon nz-icon-more1"></i></span>
+                    <el-dropdown-menu slot="dropdown"  v-has="['asset_label_delete', 'asset_label_edit']">
+                      <el-dropdown-item>
+                        <span @click.stop="edit(data)"><i v-has="'asset_label_edit'" class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</span>
+                      </el-dropdown-item>
+                      <el-dropdown-item>
+                        <span @click.stop="del(data)" v-has="'asset_label_delete'"><i class="nz-icon nz-icon-delete"></i>{{$t('overall.delete')}}</span>
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </el-col>
+              </el-row>
             </div>
           </el-tree>
         </div>
@@ -32,6 +55,9 @@
     <div slot="reference">
       <slot name="trigger"></slot>
     </div>
+    <div slot="default">
+      <slot name="tail"></slot>
+    </div>
   </el-popover>
 </template>
 

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

@@ -11,15 +11,21 @@
     >
       <template v-slot:top-tool-left>
         <select-group ref="selectGroup" :filter-object="filterGroup" :object-data="groupData" :placement="'bottom-start'"
-                      :show-object="showGroup" style="width: 300px;" @del="delGroup" @edit="editGroup" @selectObject="groupChange">
+                      :show-object="showGroup" @del="delGroup" @edit="editGroup" @selectObject="groupChange">
           <template v-slot:header>
             <div class="panel-select-header">
-              <el-input id="panel-list-search" v-model="filterGroup" :placeholder="$t('overall.search')" clearable size="mini" style="width: 240px; margin-right: 5px;"></el-input>
+              <el-input id="panel-list-search" v-model="filterGroup" :placeholder="$t('overall.search')" clearable size="mini" style="width: 280px;"></el-input>
-              <span id="panel-list-toadd" v-has="'asset_label_add'" :title='$t("dashboard.panel.createPanelTitleSec")' class="panel-select-add" @click="addGroup"><i class="nz-icon nz-icon-plus"></i></span>
             </div>
           </template>
           <template v-slot:trigger>
-            <el-input v-model="showGroup.name" class="panel-name" placeholder="" readonly="readonly" size="small"></el-input>
+<!--            <el-input v-model="showGroup.name" class="panel-name" placeholder="" readonly="readonly" size="small"></el-input>-->
+            <span style="display: inline-block;padding: 0 7px;font-weight: bold">{{showGroup.name}}</span>
+            <i style="font-size: 12px;color: #BEBEBE;" class="nz-icon nz-icon-arrow-down"></i>
+          </template>
+          <template v-slot:tail>
+            <div class="panel-select-tail">
+              <span id="panel-list-toadd" v-has="'asset_label_add'" :title='$t("dashboard.panel.createPanelTitleSec")' class="panel-select-add" @click="addGroup"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{ $t('overall.addProject') }}</span>
+            </div>
           </template>
         </select-group>
       </template>
@@ -268,7 +274,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .content{
     display: flex;
     height: calc(100% - 40px);
@@ -322,6 +328,21 @@ export default {
   }
 
   .panel-select-header {
-    padding: 0 0 10px 16px;
+    text-align: center;
+  }
+  .panel-select-tail {
+    border-top: 1px solid  #DEDEDE;
+    .panel-select-add {
+      line-height: 32px;
+      height: 32px;
+      display: inline-block;
+      cursor: pointer;
+      i {
+        color: #FA901C;
+        font-size: 12px;
+        font-weight: bold;
+        padding-left: 20px;
+      }
+    }
   }
 </style>

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

@@ -28,7 +28,7 @@
                 </template>
                 <template v-slot:tail>
                   <div class="panel-select-tail">
-                    <span id="panel-list-toadd" v-has="'panel_add'" :title='$t("dashboard.panel.createPanelTitleSec")' class="panel-select-add" @click="toAdd"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;Add</span>
+                    <span id="panel-list-toadd" v-has="'panel_add'" :title='$t("dashboard.panel.createPanelTitleSec")' class="panel-select-add" @click="toAdd"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{ $t('overall.addProject') }}</span>
                   </div>
                 </template>
               </select-panel>