From 921f0b518d8740a6e3da3ac9fbf84c558889166f Mon Sep 17 00:00:00 2001
From: lixuan <lx7664@163.com>
Date: Wed, 28 May 2025 02:12:48 -0700
Subject: [PATCH 1/4] fix: The tab supports editing the title and name

---
 .../ContainerConfigurator.vue                 | 51 ++++++++++++++++---
 packages/configurator/src/styles/vars.less    |  3 ++
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/packages/configurator/src/container-configurator/ContainerConfigurator.vue b/packages/configurator/src/container-configurator/ContainerConfigurator.vue
index 6e3a5dfc49..b044db6250 100644
--- a/packages/configurator/src/container-configurator/ContainerConfigurator.vue
+++ b/packages/configurator/src/container-configurator/ContainerConfigurator.vue
@@ -1,10 +1,15 @@
 <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-model="data.props.name" @update:modelValue="onTitleUpdate(data)" />
           </div>
         </div>
       </template>
@@ -16,11 +21,9 @@
         </tiny-tooltip>
       </template>
     </meta-list-items>
-    <div class="bottom">
-      <div class="add-btn" @click="addChildren">
-        <svg-icon name="add"></svg-icon>
-        <span>添加标签页</span>
-      </div>
+    <div class="add-btn" @click="addChildren">
+      <svg-icon name="flow-add"></svg-icon>
+      <span>添加标签页</span>
     </div>
   </div>
 </template>
@@ -137,7 +140,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 +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 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);
 }

From 5e0f67d6b0ea79c3c15fbee40597c5e30e932b03 Mon Sep 17 00:00:00 2001
From: lixuan <lx7664@163.com>
Date: Wed, 28 May 2025 02:14:40 -0700
Subject: [PATCH 2/4] fix: The tab supports editing the title and name

---
 .../src/container-configurator/ContainerConfigurator.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/configurator/src/container-configurator/ContainerConfigurator.vue b/packages/configurator/src/container-configurator/ContainerConfigurator.vue
index b044db6250..3a0a8481f5 100644
--- a/packages/configurator/src/container-configurator/ContainerConfigurator.vue
+++ b/packages/configurator/src/container-configurator/ContainerConfigurator.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="componentName === 'TinyTabs'" class="tabs-header">
+    <div class="tabs-header">
       <div>页签标题</div>
       <div class="tabs-header-id">页签值</div>
     </div>

From f7646e0c8d9f296c22e195613af3cbf10205ab36 Mon Sep 17 00:00:00 2001
From: lixuan <lx7664@163.com>
Date: Wed, 28 May 2025 02:20:20 -0700
Subject: [PATCH 3/4] fix: The tab supports editing the title and name

---
 .../src/container-configurator/ContainerConfigurator.vue  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/configurator/src/container-configurator/ContainerConfigurator.vue b/packages/configurator/src/container-configurator/ContainerConfigurator.vue
index 3a0a8481f5..86e9644f28 100644
--- a/packages/configurator/src/container-configurator/ContainerConfigurator.vue
+++ b/packages/configurator/src/container-configurator/ContainerConfigurator.vue
@@ -21,9 +21,11 @@
         </tiny-tooltip>
       </template>
     </meta-list-items>
-    <div class="add-btn" @click="addChildren">
-      <svg-icon name="flow-add"></svg-icon>
-      <span>添加标签页</span>
+    <div class="bottom">
+      <div class="add-btn" @click="addChildren">
+        <svg-icon name="add"></svg-icon>
+        <span>添加标签页</span>
+      </div>
     </div>
   </div>
 </template>

From b17ce50e2ce751892c454cc4c48b3cc7be6638dd Mon Sep 17 00:00:00 2001
From: lixuan <lx7664@163.com>
Date: Wed, 28 May 2025 18:37:54 -0700
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E9=BC=A0=E6=A0=87?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E9=80=89=E4=B8=AD=E8=BE=93=E5=85=A5=E6=A1=86?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=EF=BC=8C=E4=BC=9A=E8=A7=A6=E5=8F=91=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/component/MetaListItems.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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"