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 5cd96d18e..c54c70397 100644
--- a/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
@@ -58,6 +58,15 @@
     justify-content: space-between;
     margin-bottom: 15px;
     text-transform: initial;
+    .nz-icon-arrow-down{
+      display: inline-block;
+      transition: transform .3s;
+    }
+    .nz-icon-arrow-down.is-rotate{
+      transform: rotate(
+          -90deg
+      );
+    }
   }
   .form-row-content{
     margin-bottom: 5px;
@@ -164,4 +173,9 @@
       }
     }
   }
+  .nz-color {
+    .vc-input__input {
+      font-size: 14px;
+    }
+  }
 }
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
index fcb668713..4892d0ae2 100644
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
@@ -4,7 +4,7 @@
       <!--         backGround -->
       <div class="form-row-title">
         {{$t('project.topology.bac')}}
-        <i class="nz-icon nz-icon-arrow-down" @click="updateShow('backGround')"/>
+        <i class="nz-icon nz-icon-arrow-down" :class="canvasProps.backGround?'':'is-rotate'" @click="updateShow('backGround')"/>
       </div>
       <div v-show="canvasProps.backGround" class="form-row-content">
         <div class="form-row-item">
@@ -61,18 +61,18 @@
                   </span>
                 </span>
                 <span>
-                    <span @click.stop="penChange(item, 'locked')" class="pen-tools-item">
+                    <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>
-                  <span @click.stop="penChange(item, 'visible')" class="pen-tools-item">
+                  <span @click.stop="penChange(item, 'visible')" class="pen-tools-item" :title="!item.visible?$t('overall.visible'): $t('overall.invisible')">
                     <i  class="nz-icon nz-icon-mimakejian1" v-if="item.visible"/>
                     <i  class="nz-icon nz-icon-mimabukejian" v-if="!item.visible"/>
                   </span>
-                  <span @click.stop="copyPen(item)" class="pen-tools-item">
+                  <span @click.stop="copyPen(item)" class="pen-tools-item" :title="$t('overall.duplicate')">
                     <i  class="nz-icon nz-icon-override"/>
                   </span>
-                  <span @click.stop="delPen(item)" class="pen-tools-item">
+                  <span @click.stop="delPen(item)" class="pen-tools-item" :title="$t('overall.delete')">
                     <i  class="nz-icon nz-icon-minus"/>
                   </span>
                   <span style="cursor: grab;" class="drag-sort pen-tools-item" :title="$t('dashboard.panel.chartForm.sort')">
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
index f6cac5c3f..74c49b4de 100644
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
@@ -8,7 +8,7 @@
           <!--        Position  -->
           <div class="form-row-title">
             {{$t('project.topology.position')}}
-            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('position')"/>
+            <i class="nz-icon nz-icon-arrow-down"  :class="elements.position?'':'is-rotate'" @click="updateShow('position')"/>
           </div>
           <div v-show="elements.position" class="form-row-content">
             <div class="form-row-item">
@@ -126,7 +126,7 @@
           <!--         Border -->
           <div class="form-row-title">
             {{ $t('project.topology.border') }}
-            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('border')"/>
+            <i class="nz-icon nz-icon-arrow-down" :class="elements.border?'':'is-rotate'" @click="updateShow('border')"/>
           </div>
           <div v-show="elements.border" class="form-row-content">
             <div class="form-row-item special-meta2d-select">
@@ -216,7 +216,7 @@
           <!--         backGround -->
           <div class="form-row-title">
             {{$t('project.topology.bac')}}
-            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('backGround')"/>
+            <i class="nz-icon nz-icon-arrow-down" :class="elements.backGround?'':'is-rotate'" @click="updateShow('backGround')"/>
           </div>
           <div v-show="elements.backGround" class="form-row-content">
             <div class="form-row-item">
@@ -278,7 +278,7 @@
           <!--         text -->
           <div class="form-row-title">
             {{$t('project.topology.text')}}
-            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('text')"/>
+            <i class="nz-icon nz-icon-arrow-down" :class="elements.text?'':'is-rotate'" @click="updateShow('text')"/>
           </div>
           <div v-show="elements.text" class="form-row-content">
             <div class="form-row-item">
@@ -398,7 +398,7 @@
           <!--        Line  -->
           <div class="form-row-title">
             {{$t('project.topology.line')}}
-            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('line')"/>
+            <i class="nz-icon nz-icon-arrow-down" :class="elements.line?'':'is-rotate'" @click="updateShow('line')"/>
           </div>
           <div v-show="elements.line" class="form-row-content">
             <div class="form-row-item special-meta2d-select">
@@ -712,7 +712,7 @@
                 :inactive-value="false"
                 @change="change('data.enable.valueMapping')"
               ></el-switch>
-              <i class="nz-icon nz-icon-arrow-down" @click="updateShow('valueMapping')"/>
+              <i class="nz-icon nz-icon-arrow-down" :class="elements.valueMapping&& pen.data.enable.valueMapping?'':'is-rotate'" @click="updateShow('valueMapping')"/>
             </span>
       </div>
       <transition name="el-zoom-in-top">
@@ -930,7 +930,7 @@
                 :inactive-value="false"
                 @change="change('data.enable.tooltip')"
               ></el-switch>
-              <i class="nz-icon nz-icon-arrow-down" @click="updateShow('tooltip')"/>
+              <i class="nz-icon nz-icon-arrow-down" :class="elements.tooltip&& pen.data.enable.tooltip?'':'is-rotate'" @click="updateShow('tooltip')"/>
             </span>
       </div>
       <transition name="el-zoom-in-top">
diff --git a/nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue b/nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue
index 8b0b07bbd..6c42acb9f 100644
--- a/nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue
@@ -1,10 +1,13 @@
 <template>
   <div class="tool-top" id="tool-top"  @mouseup="changeDrawLineFlag(false)">
-    <div id="tools-left-drag" class="top-tool-item" :title="$t('project.topology.addNode')" :class="dragstartFlag ? 'is-active-meta2d' : ''">
+    <div id="tools-left-drag"
+         class="top-tool-item"
+         :title="$t('project.topology.addNode')"
+         :class="dragstartFlag ? 'is-active-meta2d' : ''"
+         draggable="true"
+         @mousedown="changeState('dragstartFlag')"
+         @dragstart.stop="onDragstart($event)">
       <div
-        draggable="true"
-        @mousedown="changeState('dragstartFlag')"
-        @dragstart.stop="onDragstart($event)"
       >
         <i class="nz-icon nz-icon-zhengfangxing" />
       </div>