diff --git a/packages/common/component/MetaListItems.vue b/packages/common/component/MetaListItems.vue
index b81825a539..c2d737d16d 100644
--- a/packages/common/component/MetaListItems.vue
+++ b/packages/common/component/MetaListItems.vue
@@ -1,6 +1,6 @@
 <template>
   <template v-if="draggable">
-    <vue-draggable-next class="dragArea list-group w-full" :list="optionsList" @change="dragEnd">
+    <vue-draggable-next class="dragArea list-group w-full" :list="optionsList" handle=".icon-more" @change="dragEnd">
       <div v-for="(item, index) in optionsList" :key="index" class="option-item">
         <meta-list-item
           :item="item"
diff --git a/packages/configurator/src/container-configurator/ContainerConfigurator.vue b/packages/configurator/src/container-configurator/ContainerConfigurator.vue
index 6e3a5dfc49..86e9644f28 100644
--- a/packages/configurator/src/container-configurator/ContainerConfigurator.vue
+++ b/packages/configurator/src/container-configurator/ContainerConfigurator.vue
@@ -1,10 +1,15 @@
 <template>
   <div>
+    <div class="tabs-header">
+      <div>页签标题</div>
+      <div class="tabs-header-id">页签值</div>
+    </div>
     <meta-list-items class="list" :optionsList="children" @dragEnd="dragEnd">
       <template #content="{ data }">
         <div class="item-text">
           <div class="tiny-input">
             <tiny-input v-model="data.props.title" @update:modelValue="onTitleUpdate(data)" />
+            <tiny-input v-model="data.props.name" @update:modelValue="onTitleUpdate(data)" />
           </div>
         </div>
       </template>
@@ -137,7 +142,7 @@ export default {
       operateNode({ type: 'changeProps', id, value: { props: value.props } })
     }
 
-    return { children, addChildren, delChildren, dragEnd, onTitleUpdate }
+    return { children, addChildren, delChildren, dragEnd, onTitleUpdate, componentName }
   }
 }
 </script>
@@ -168,4 +173,40 @@ export default {
     cursor: pointer;
   }
 }
+:deep(.item-content .option-input) {
+  height: auto;
+}
+.item-text {
+  margin: 4px 0;
+  .tiny-input {
+    display: inline-flex;
+    gap: 4px;
+  }
+}
+.tabs-header {
+  display: inline-flex;
+  align-items: center;
+  padding-left: 22px;
+  gap: 4px;
+  height: 24px;
+  color: var(--te-configurator-common-text-color-secondary);
+  background-color: var(--te-configurator-container-bg-color);
+  width: 100%;
+  & > div {
+    width: calc(50% - 14px);
+  }
+  .tabs-header-id {
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      left: -7px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 1px;
+      height: 10px;
+      background-color: var(--te-configurator-container-border-color-divider);
+    }
+  }
+}
 </style>
diff --git a/packages/configurator/src/styles/vars.less b/packages/configurator/src/styles/vars.less
index 3e172e8d69..bae819898c 100644
--- a/packages/configurator/src/styles/vars.less
+++ b/packages/configurator/src/styles/vars.less
@@ -40,4 +40,7 @@
   --te-configurator-tabs-group-bg-color: var(--te-common-bg-container);
 
   --te-configurator-code-list-bg-color: var(--te-common-bg-container-weaken);
+
+  --te-configurator-container-bg-color: var(--te-common-bg-container);
+  --te-configurator-container-border-color-divider: var(--te-common-border-bg-divider);
 }