diff --git a/packages/configurator/src/container-configurator/ContainerConfigurator.vue b/packages/configurator/src/container-configurator/ContainerConfigurator.vue
index 359bff8a5..18a8b7059 100644
--- a/packages/configurator/src/container-configurator/ContainerConfigurator.vue
+++ b/packages/configurator/src/container-configurator/ContainerConfigurator.vue
@@ -1,10 +1,19 @@
 <template>
   <div>
+    <div v-if="componentName === 'TinyTabs'" 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-if="componentName === 'TinyTabs'"
+              v-model="data.props.name"
+              @update:modelValue="onTitleUpdate(data)"
+            />
           </div>
         </div>
       </template>
@@ -16,7 +25,10 @@
         </tiny-tooltip>
       </template>
     </meta-list-items>
-    <div class="add-btn"><span @click="addChildren">+ 添加标签页</span></div>
+    <div class="add-btn" @click="addChildren">
+      <svg-icon name="flow-add"></svg-icon>
+      <span>添加标签页</span>
+    </div>
   </div>
 </template>
 <script>
@@ -132,14 +144,23 @@ export default {
       operateNode({ type: 'changeProps', id, value: { props: value.props } })
     }
 
-    return { children, addChildren, delChildren, dragEnd, onTitleUpdate }
+    return { children, addChildren, delChildren, dragEnd, onTitleUpdate, componentName }
   }
 }
 </script>
 <style lang="less" scoped>
-.add-btn span {
-  line-height: 26px;
-  cursor: pointer;
+.add-btn {
+  display: flex;
+  align-items: center;
+  color: var(--te-configurator-common-text-color-emphasize);
+  margin-top: 4px;
+  &:hover {
+    cursor: pointer;
+  }
+
+  & .svg-icon {
+    margin-right: 4px;
+  }
 }
 .item-icon {
   display: flex;
@@ -150,4 +171,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 3e172e8d6..bae819898 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);
 }