diff --git a/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss b/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
index f4772f085..56dce5e6b 100644
--- a/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
@@ -10,7 +10,7 @@
   .props-box {
     width: 500px;
     position: absolute;
-    height: calc(100% - 78px);
+    height: calc(100% - 64px);
     top: 61px;
     padding: 0 !important;
     box-sizing: border-box;
@@ -24,9 +24,12 @@
     display: inline-block;
     box-sizing: border-box;
     padding: 0 5px;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
     .form-row-key{
-      margin-bottom: 5px;
+      margin-bottom: 10px;
+      font-size: 14px;
+      color: $--color-text-regular;
+      letter-spacing: 0;
     }
   }
   .special-meta2d-select {
@@ -101,25 +104,48 @@
     display: flex;
     justify-content: space-between;
     padding: 3px 10px;
+    .nz-icon-shuru {
+      display: none;
+    }
+    &:hover{
+      background: $--background-color-empty;
+      border: 1px solid $--border-select-color;
+      color: $--color-primary;
+      .nz-icon-shuru {
+        display: inline-block;
+      }
+    }
     &.is-active {
-      background: $--table-row-hover-background-color;
-      border: 1px solid $--table-row-hover-background-color;
+      background: $--background-color-empty;
+      border: 1px solid $--border-select-color;
       color: $--color-primary;
       .el-input__inner {
         color: $--color-primary;
       }
     }
     .hide-input {
+      display: flex;
+      .hide-input-nzName {
+        display: inline-block;
+        max-width: 260px;
+        flex-shrink: 0;
+        margin-left: 10px;
+        margin-right: 10px;
+      }
       .el-input__inner {
         border-color: transparent;
         height: 26px;
         line-height: 26px;
         padding: 0 10px;
+        padding-right: 108px;
       }
       .el-input__inner:focus {
-        border-color: $--border-color-base-focus;
+        border-color: $--border-select-color;
         color: $--color-text-regular;
       }
+      .el-input__suffix {
+        line-height: 26px;
+      }
     }
   }
   .promqlInput .el-cascader-menu{
@@ -227,4 +253,7 @@
       display: inline-block;
     }
   }
+  .thresholds-from-item {
+    margin-left: 10px;
+  }
 }
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index f456ddde7..552326d6d 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -59,6 +59,8 @@ $--border-color-light-hover: lighten($--border-color-light, 10%);
 $--border-color-light-focus: lighten($--border-color-light, 20%);
 // 深色边框
 $--explore-border-color-bottom: #090909;
+// 选中边框
+$--border-select-color: #FBCF9F;
 
 /* 5.提示色 */
 // 正常绿色
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index 1503c61cf..541112c48 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -59,6 +59,8 @@ $--border-color-light-hover: darken($--border-color-light, 10%);
 $--border-color-light-focus: darken($--border-color-light, 20%);
 // 深色边框
 $--explore-border-color-bottom: #DEDEDE;
+// 选中边框
+$--border-select-color: #FBCF9F;
 
 /* 5.提示色 */
 // 正常绿色(覆盖element-ui内置变量)
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
index 9a698c364..02a04f74e 100644
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
@@ -54,14 +54,26 @@
                   <i v-if="item.type !== 1" class="nz-icon nz-icon-juxing" style="margin-right: 3px"/>
                   <i v-else class="nz-icon nz-icon-xiantiao" />
                   <el-input
+                    :ref="'hideInput' + index"
+                    v-if="editFlag[index]"
                     :title="item.nzName"
-                    style="width: 120px"
-                    @focus="focusName"
+                    style="width: 290px"
+                    @blur="blurName(index)"
+                    @keydown.enter.native="blurName(index)"
                     v-model="item.nzName"
-                    size="small"/>
+                    size="small"
+                  >
+                    <span slot="suffix">
+                      {{$t('terminal.confirm')}}
+                    </span>
+                  </el-input>
+                  <span class="hide-input-nzName text-ellipsis" v-if="!editFlag[index]">
+                    {{item.nzName}}
+                  </span>
+                  <i @click="changeEditFlag(index)" v-if="!editFlag[index]"  class="nz-icon nz-icon-shuru"/>
                 </span>
               <span>
-                    <span @click.stop="penChange(item, 'locked')" class="pen-tools-item" :title="!item.locked?$t('overall.locked'): $t('overall.unlocked')">
+                  <span @click.stop="penChange(item, 'locked')" class="pen-tools-item" :title="!item.locked?$t('overall.locked'): $t('overall.unlocked')">
                     <i  class="nz-icon nz-icon-lock" v-if="item.locked"/>
                     <i  class="nz-icon nz-icon-unlock" v-if="!item.locked"/>
                   </span>
@@ -166,6 +178,7 @@ export default {
           icon: 'nz-icon-shuxiangfenbu'
         }
       ],
+      editFlag: []
     }
   },
   mounted () {
@@ -254,8 +267,19 @@ export default {
       this.bkImageId = image.id
       getTopology(this.meta2dId).setBackgroundImage(image.image)
     },
-    focusName (event) {
-      console.log(event)
+    blurName (index) {
+      this.editFlag[index] = false
+      this.$set(this.editFlag, index, false)
+      // console.log(event)
+    },
+    changeEditFlag (index) {
+      this.editFlag[index] = true
+      this.$set(this.editFlag, index, true)
+      this.$nextTick(() => {
+        if (this.$refs['hideInput' + index] && this.$refs['hideInput' + index][0]) {
+          this.$refs['hideInput' + index][0].focus()
+        }
+      })
     },
     onNodesAlign (value) {
       const pens = getTopology(this.meta2dId).store.active
@@ -310,6 +334,16 @@ export default {
       getTopology(this.meta2dId).render()
       bus.$emit('changeSelectPens', [])
     }
+  },
+  watch: {
+    elements: {
+      handler () {
+        this.editFlag = []
+        this.elements.forEach(() => {
+          this.editFlag.push(false)
+        })
+      }
+    }
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
index 2a84537f0..9299953e7 100644
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
@@ -28,19 +28,20 @@
                 @change="change('nzName')"></el-input>
             </div>
           </div>
+          <div class="form-row-item">
+            <div class="form-row-key">
+              {{$t('overall.module')}}
+            </div>
+            <div class="form-row-value">
+              <el-select v-model="pen.moduleId" @change="change('moduleId')" size="small" clearable>
+                <el-option v-for="item in modules" :value="item.id" :key="item.id" :label="item.name" :disabled="item.disabled"/>
+              </el-select>
+            </div>
+          </div>
         </div>
       </div>
       <div v-if="!pen.type">
         <div class="form-row-box">
-          <!--        Module  -->
-          <div class="form-row-title">
-            {{$t('overall.module')}}
-          </div>
-          <div v-show="elements.position" class="form-row-content">
-            <el-select v-model="pen.moduleId" @change="change('moduleId')" size="small" clearable>
-              <el-option v-for="item in modules" :value="item.id" :key="item.id" :label="item.name" :disabled="item.disabled"/>
-            </el-select>
-          </div>
           <!--        Position  -->
           <div class="form-row-title">
             {{$t('project.topology.position')}}
@@ -414,12 +415,12 @@
                     {{ $t('dashboard.dashboard.chartForm.legend') }}
                   </div>
                   <div class="form-row-value">
-                    <div style="display: inline-block;width: calc(20% - 3px)">
+                    <div style="display: inline-block;width: calc(30% - 3px)">
                       <el-select v-model="pen.data.textParent" size="small">
                         <el-option v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name'></el-option>
                       </el-select>
                     </div>
-                    <div style="display: inline-block;width: calc(80% - 3px)">
+                    <div style="display: inline-block;width: calc(70% - 13px);margin-left: 10px">
                       <el-select v-model="pen.data.textLegend" size="small">
                         <el-option v-for="item in queryValues.filter(query => (query.parent === pen.data.textParent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'></el-option>
                       </el-select>
@@ -765,12 +766,12 @@
                 {{$t('dashboard.dashboard.chartForm.legend')}}
               </div>
               <div class="form-row-value">
-                <div style="display: inline-block;width: calc(20% - 3px)">
+                <div style="display: inline-block;width: calc(30% - 3px)">
                   <el-select v-model="pen.data.parent" size="small">
                     <el-option v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name'></el-option>
                   </el-select>
                 </div>
-                <div style="display: inline-block;width: calc(80% - 3px)">
+                <div style="display: inline-block;width: calc(70% - 13px);margin-left: 10px">
                   <el-select v-model="pen.data.legend" size="small">
                     <el-option v-for="item in queryValues.filter(query => (query.parent === pen.data.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'></el-option>
                   </el-select>
@@ -984,7 +985,7 @@
           <div class="form-row-value" style="display: flex">
             <el-input v-model="pen.data.tooltip.title" size="small" style="flex: 1"/>
             <!-- 显示头部 -->
-            <div class="choose-header-btn" @click="pen.data.tooltip.titleShow = !pen.data.tooltip.titleShow" :title="$t('overall.visible')">
+            <div class="choose-header-btn" style="margin-left: 10px;" @click="pen.data.tooltip.titleShow = !pen.data.tooltip.titleShow" :title="$t('overall.visible')">
               <i class="nz-icon nz-icon-mimakejian" v-if="pen.data.tooltip.titleShow"></i>
               <i class="nz-icon nz-icon-mimabukejian" v-else></i>
             </div>
@@ -1013,18 +1014,18 @@
           <div class="form-row-key" style="margin-bottom: 5px">
             {{$t('project.topology.legends')}}
           </div>
-          <div class="form-row-value" style="margin-bottom: 10px" v-for="legend in pen.data.tooltip.legends" :key="legend.parent + legend.legend">
-            <div style="display: inline-block;width: calc(20% - 3px)">
+          <div class="form-row-value" style="margin-bottom: 10px;display: flex;justify-content: space-between" v-for="legend in pen.data.tooltip.legends" :key="legend.parent + legend.legend">
+            <div style="display: inline-block;width: calc(20% - 10px)">
               <el-select v-model="legend.parent" size="small" style="width: 100%">
                 <el-option v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name'></el-option>
               </el-select>
             </div>
-            <div style="display: inline-block;width: calc(40% - 3px)">
+            <div style="display: inline-block;width: calc(40% - 10px)">
               <el-select v-model="legend.legend" size="small" style="width: 100%">
                 <el-option v-for="item in queryValues.filter(query => (query.parent === legend.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'></el-option>
               </el-select>
             </div>
-            <div style="display: inline-block;width: calc(40% - 3px)">
+            <div style="display: inline-block;width: calc(40% - 10px)">
               <el-input v-model="legend.alias" size="small" style="width: 100%">
                 <template slot="prepend">Alias</template>
               </el-input>