diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
index 702860f0e0..39f81f8e31 100644
--- a/packages/common/component/ConfigItem.vue
+++ b/packages/common/component/ConfigItem.vue
@@ -518,7 +518,7 @@ export default {
   justify-content: space-between;
   position: relative;
   align-items: center;
-  padding-bottom: 8px;
+  padding-bottom: var(--te-common-vertical-item-spacing-normal);
   &:last-child {
     padding-bottom: 0;
   }
diff --git a/packages/common/component/MetaChildItem.vue b/packages/common/component/MetaChildItem.vue
index a0441b1362..f909cafbf5 100644
--- a/packages/common/component/MetaChildItem.vue
+++ b/packages/common/component/MetaChildItem.vue
@@ -93,15 +93,19 @@ export default {
   color: var(--te-common-text-primary);
   padding: 0 10px;
   font-weight: bold;
+  margin-bottom: 16px;
 }
 .items-container {
   width: 100%;
   display: flex;
-  flex-wrap: wrap;
   flex-direction: column;
+  height: calc(100% - 34px); // 34为头部+底部的高度
+  overflow-y: auto;
+
   .meta-config-item {
     flex: 1;
     padding: 0 10px;
+    margin-bottom: var(--te-common-vertical-item-spacing-normal);
   }
 }
 </style>
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 1141455fd4..0c97ce569a 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -7,6 +7,12 @@
       </div>
       <tiny-button v-else class="edit-btn" @click="open">
         <slot name="icon"></slot>
+        <svg-icon
+          name="page-schema"
+          v-if="[buttonText[locale], buttonText].includes(EDIT_CODE_TEXT)"
+          class="edit-btn-icon"
+        ></svg-icon>
+
         {{ buttonLabel }}
       </tiny-button>
     </slot>
@@ -143,6 +149,8 @@ export default {
     const editorTipsTitle = computed(() => props.tips?.title?.[locale.value] ?? props.tips?.title)
     const editorTipsDemo = computed(() => props.tips?.demo?.[locale.value] ?? props.tips?.demo)
 
+    const EDIT_CODE_TEXT = '编辑代码'
+
     watchEffect(() => {
       const { modelValue, dataType } = props
       const val = dataType ? modelValue?.value || '' : modelValue
@@ -239,6 +247,7 @@ export default {
       editor,
       editorState,
       value,
+      EDIT_CODE_TEXT,
       options: {
         language: props.language,
         minimap: {
@@ -267,6 +276,12 @@ export default {
     &:focus {
       border-color: var(--te-common-border-active);
     }
+    .edit-btn-icon {
+      font-size: 14px;
+      margin-right: 4px;
+      vertical-align: text-top;
+      color: var(--te-common-icon-secondary);
+    }
   }
 }
 
diff --git a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
index 5e270b44d5..e8839afde0 100644
--- a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
+++ b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
@@ -3,17 +3,19 @@
     <div class="label">使用插槽</div>
     <tiny-form ref="slotRef" class="slot-form" :model="slotList" label-width="0" inline>
       <div v-for="(slot, index) in slotList" :key="slot.name" class="use-slot">
-        <div class="use-slot-item-name">{{ slot.name }}</div>
+        <div class="use-slot-item-name">
+          {{ slot.name }}
+          <tiny-tooltip effect="dark" :content="state.currentComponent?.content" placement="top">
+            <span class="item-icon">
+              <component :is="state.currentComponent?.icon"></component>
+            </span>
+          </tiny-tooltip>
+        </div>
         <div class="use-slot-item-content">
           <div class="use-slot-switch-wrap">
             <div :class="['e__switch', { 'e_is-checked': slot.bind }]">
               <span class="e__switch-core" @click="toggleSlot(index, slot)"></span>
             </div>
-            <tiny-tooltip effect="dark" :content="state.currentComponent?.content" placement="top">
-              <span class="item-icon">
-                <component :is="state.currentComponent?.icon"></component>
-              </span>
-            </tiny-tooltip>
           </div>
           <tiny-form-item
             :prop="paramsPropPath(index)"
@@ -191,6 +193,7 @@ export default {
 
   .use-slot-switch-wrap {
     display: flex;
+    align-items: center;
   }
 
   &-item-name {
@@ -214,7 +217,7 @@ export default {
   }
 
   .item-icon {
-    margin: 3px 3px 0 6px;
+    margin: 0 3px 0 6px;
   }
 }
 
diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index 8a6cc08c7d..dbe835dc3d 100644
--- a/packages/configurator/src/slider-configurator/SliderConfigurator.vue
+++ b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -128,17 +128,17 @@ export default {
   }
   input[type='range'] {
     height: 4px;
-    border-radius: 8px;
+    border-radius: 10px;
     margin: 0.8em 0;
     padding: 0;
     cursor: pointer;
     border: 0;
-    background: -webkit-linear-gradient(#fff, #fff) no-repeat #999999;
-    background-size: 0% 100%;
+    background-color: transparent;
     position: relative;
     outline: 0;
-    top: -1px;
-    -webkit-appearance: none !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
   }
   input[type='range']::-webkit-slider-thumb {
     width: 10px;
@@ -152,7 +152,9 @@ export default {
     cursor: pointer;
     background-clip: padding-box;
     box-sizing: border-box;
-    -webkit-appearance: none !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
   }
   input[type='range']::-webkit-slider-thumb:active {
     border: 0;
diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
index 35ebbe0f49..6e4989a038 100644
--- a/packages/configurator/src/slot-configurator/SlotConfigurator.vue
+++ b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
@@ -137,7 +137,7 @@ export default {
   justify-content: center;
   align-items: center;
   &:not(:last-child) {
-    margin-bottom: 8px;
+    margin-bottom: var(--te-common-vertical-item-spacing-normal);
   }
   .slot-name {
     width: 30%;
diff --git a/packages/design-core/assets/empty-action.svg b/packages/design-core/assets/empty-action.svg
index 357df9518d..25bb6cc2e4 100644
--- a/packages/design-core/assets/empty-action.svg
+++ b/packages/design-core/assets/empty-action.svg
@@ -1,15 +1,17 @@
-<svg data-icon="ElementEvents" aria-hidden="true" focusable="false" width="41" height="41" viewBox="0 0 41 41"
-  class="bem-Svg" style="display: block">
-  <g fill="none" fill-rule="evenodd">
-    <path d="M-4-4h48v48H-4z"></path>
-    <path
-      d="M40.828 38.002l-5.414-5.414 3.878-3.88c.388-.388.27-.816-.262-.95l-14.062-3.516c-.532-.132-.86.196-.726.728l3.516 14.06c.132.534.56.652.95.262l3.878-3.88L38 40.832l2.828-2.83z"
-      fill="#A9A9A9"></path>
-    <path
-      d="M4 20.004c0-8.822 7.178-16 16-16s16 7.178 16 16h4c0-11.028-8.972-20-20-20s-20 8.972-20 20 8.972 20 20 20v-4c-8.822-.002-16-7.178-16-16z"
-      fill="#707070"></path>
-    <path
-      d="M20 12.004c4.41 0 8 3.588 8 8h4c0-6.618-5.382-12-12-12s-12 5.382-12 12 5.382 12 12 12v-4c-4.41 0-8-3.588-8-8s3.59-8 8-8z"
-      fill="#707070"></path>
-  </g>
-</svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:currentColor;}
+</style>
+<desc>Created with Pixso.</desc>
+<path class="st0" d="M16,0C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16c0.4,0,0.8-0.4,0.8-0.8c0-0.5-0.4-0.8-0.8-0.8C8,30.4,1.6,24,1.6,16
+	C1.6,8,8,1.6,16,1.6C24,1.6,30.4,8,30.4,16c0,0.4,0.4,0.8,0.8,0.8c0.4,0,0.8-0.4,0.8-0.8C32,7.2,24.8,0,16,0z M16,8
+	c-4.4,0-8,3.6-8,8c0,4.4,3.6,8,8,8c0.4,0,0.8-0.4,0.8-0.8c0-0.5-0.4-0.8-0.8-0.8c-3.5,0-6.4-2.9-6.4-6.4c0-3.5,2.9-6.4,6.4-6.4
+	c3.5,0,6.4,2.9,6.4,6.4c0,0.4,0.4,0.8,0.8,0.8c0.4,0,0.8-0.4,0.8-0.8C24,11.6,20.4,8,16,8z M20.4,21.1c0.3,0,0.7-0.4,0.7-0.7
+	l2.1,9.5c-0.1-0.4-0.9-0.6-1.2-0.4l2.1-2.1l1.3-1.3l1.1,1.5l1.9,2.7c-0.1-0.1-0.3-0.1-0.4,0l2.3-2.3c-0.1,0.1,0,0.3,0,0.4l-2.7-1.9
+	l-1.5-1.1l1.3-1.3l2.2-2.1c-0.3,0.3,0,1.2,0.4,1.2L20.4,21.1z M26.1,29.6l-0.8-1.1l-1,1l-0.2,0.2l-1,1c-0.6,0.6-1.3,0.4-1.5-0.4
+	l-2.1-9.4c-0.2-0.9,0.4-1.4,1.2-1.2l9.7,2c0.9,0.2,1.1,0.8,0.4,1.5l-1,1l-0.2,0.2l-1,1l1.1,0.8l0.2,0.2l1.4,1c0.7,0.5,0.8,1.4,0.2,2
+	l-2.3,2.3c-0.6,0.6-1.6,0.6-2.1-0.2l-1-1.3L26.1,29.6z"/>
+</svg>
diff --git a/packages/settings/events/src/components/AdvanceConfig.vue b/packages/settings/events/src/components/AdvanceConfig.vue
index 7e7754f6bd..ac965f478b 100644
--- a/packages/settings/events/src/components/AdvanceConfig.vue
+++ b/packages/settings/events/src/components/AdvanceConfig.vue
@@ -236,7 +236,7 @@ export default {
 .advanced-config-container {
   .advnce-config {
     &:not(:last-child) {
-      margin-bottom: 8px;
+      margin-bottom: var(--te-common-vertical-item-spacing-normal);
     }
     align-items: center;
     display: flex;
diff --git a/packages/settings/events/src/components/BindEvents.vue b/packages/settings/events/src/components/BindEvents.vue
index da3715b10a..515fc08eb6 100644
--- a/packages/settings/events/src/components/BindEvents.vue
+++ b/packages/settings/events/src/components/BindEvents.vue
@@ -313,7 +313,7 @@ export default {
     .bind-action-button-item {
       width: 50%;
       &:not(:last-child) {
-        margin-right: 8px;
+        margin-right: 12px;
       }
     }
     .add-custom-event-button {
@@ -344,7 +344,7 @@ export default {
     background-color: var(--ti-lowcode-events-empty-action-bg-color);
     color: var(--ti-lowcode-events-empty-action-color);
     padding: 24px 18px;
-    margin-top: 8px;
+    margin-top: var(--te-common-vertical-item-spacing-normal);
     .empty-action-icon {
       font-size: 48px;
     }
@@ -365,7 +365,7 @@ export default {
   }
 }
 .bind-event-list {
-  padding: 8px 0;
+  padding: var(--te-common-vertical-item-spacing-normal) 0;
   color: var(--ti-lowcode-events-bind-event-list-color);
 }
 .bind-event-list-item-notallow {
diff --git a/packages/settings/events/src/components/BindEventsDialog.vue b/packages/settings/events/src/components/BindEventsDialog.vue
index a7f6ef122b..ca5cbb6502 100644
--- a/packages/settings/events/src/components/BindEventsDialog.vue
+++ b/packages/settings/events/src/components/BindEventsDialog.vue
@@ -247,8 +247,8 @@ export default {
 }
 
 .bind-event-dialog-tip {
-  padding: 8px 14px;
-  margin-bottom: 8px;
+  padding: var(--te-common-vertical-item-spacing-normal) 14px;
+  margin-bottom: var(--te-common-vertical-item-spacing-normal);
   background-color: var(--te-common-bg-container);
   color: var(--te-common-text-weaken);
 }
diff --git a/packages/settings/events/src/components/BindEventsDialogContent.vue b/packages/settings/events/src/components/BindEventsDialogContent.vue
index 31b00d1e86..3da6c581e1 100644
--- a/packages/settings/events/src/components/BindEventsDialogContent.vue
+++ b/packages/settings/events/src/components/BindEventsDialogContent.vue
@@ -146,7 +146,7 @@ export default {
   }
   .content-right-top .content-right-title,
   .content-right-bottom .content-right-title {
-    margin-bottom: 8px;
+    margin-bottom: var(--te-common-vertical-item-spacing-normal);
     .set-params-tip {
       margin-top: 6px;
       font-weight: 400;
diff --git a/packages/settings/events/src/components/BindEventsDialogSidebar.vue b/packages/settings/events/src/components/BindEventsDialogSidebar.vue
index 554f612f32..ae8aa1a696 100644
--- a/packages/settings/events/src/components/BindEventsDialogSidebar.vue
+++ b/packages/settings/events/src/components/BindEventsDialogSidebar.vue
@@ -113,7 +113,7 @@ export default {
     border: 1px solid var(--ti-lowcode-bind-event-dialog-content-left-border-color);
     border-radius: 4px;
     height: 300px;
-    margin-top: 8px;
+    margin-top: var(--te-common-vertical-item-spacing-normal);
     display: flex;
     flex: 1;
 
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 66de5a4730..9040b0321f 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -383,7 +383,7 @@ export default {
 <style lang="less" scoped>
 .background-group {
   display: grid;
-  gap: 8px;
+  gap: 12px 8px;
   grid-template-columns: 48px auto auto;
   align-items: center;
   .background-label {
diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue
index 64159f4e6b..2e9ff1e685 100644
--- a/packages/settings/styles/src/components/border/BorderGroup.vue
+++ b/packages/settings/styles/src/components/border/BorderGroup.vue
@@ -551,13 +551,14 @@ export default {
   }
 }
 .item-row {
-  margin-bottom: 8px;
+  margin-bottom: var(--te-common-vertical-form-label-spacing);
 }
 .radius-row {
   display: flex;
   align-items: center;
   gap: 8px;
   position: relative;
+  margin-bottom: var(--te-common-vertical-item-spacing-normal);
   svg {
     color: var(--ti-lowcode-input-icon-color);
     font-size: 16px;
diff --git a/packages/settings/styles/src/components/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue
index cba6a1b872..1d01cd41e2 100644
--- a/packages/settings/styles/src/components/effects/EffectGroup.vue
+++ b/packages/settings/styles/src/components/effects/EffectGroup.vue
@@ -519,7 +519,7 @@ export default {
   gap: 8px;
   grid-template-columns: 44px auto;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: var(--te-common-vertical-item-spacing-normal);
   &:last-child {
     margin-bottom: 0;
   }
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 0e16b4872c..2d208d2bc2 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -447,7 +447,7 @@ export default {
 <style lang="less" scoped>
 .size-row {
   display: flex;
-  margin-bottom: 8px;
+  margin-bottom: var(--te-common-vertical-item-spacing-normal);
   &:last-child {
     margin-bottom: 0;
   }
diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index 14cbfaebbf..ee508b26b3 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -473,7 +473,7 @@ export default {
     gap: 4px 20px;
     grid-template-columns: 15px 1fr;
     align-items: center;
-    margin-bottom: 8px;
+    margin-bottom: var(--te-common-vertical-item-spacing-normal);
     &:last-child {
       margin-bottom: 0;
     }
@@ -488,8 +488,7 @@ export default {
 
     .typography-label {
       margin-right: -16px;
-      align-self: flex-start;
-      line-height: 26px;
+      line-height: 16px;
       color: var(--ti-lowcode-component-setting-panel-label-color);
     }
 
@@ -498,7 +497,7 @@ export default {
       display: flex;
 
       .typography-content-item {
-        padding: 4px 5px;
+        padding: 0 5px;
         font-size: 16px;
         color: var(--ti-lowcode-component-setting-panel-icon-color);
         position: relative;
diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less
index 3eb22af2bd..cce9ac5c85 100644
--- a/packages/theme/base/src/base.less
+++ b/packages/theme/base/src/base.less
@@ -282,6 +282,7 @@
   --te-base-blue-22: #006cff;
   --te-base-blue-23: #8bbefa;
   --te-base-blue-24: #476be5;
+  --te-base-blue-25: rgba(20, 118, 255, 0.1);
 
   // expand-indigo
   --te-base-indigo-1: #eee8ff;
diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
index 9bb549d473..263a2e8d86 100644
--- a/packages/theme/base/src/common.less
+++ b/packages/theme/base/src/common.less
@@ -46,6 +46,10 @@
   --te-common-bg-default: var(--te-base-gray-1); // 白色背景-输入框背景/面板背景色 #fff
   --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0
   --te-common-bg-switch: var(--te-base-gray-18); // 开关默认色 #c2c2c2
+
+  // 通用间距
+  --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
+  --te-common-vertical-form-label-spacing: 8px; // 上下布局时，表单label与表单元素的间隔
 }
 
 :root[data-theme='dark'] {
@@ -93,4 +97,8 @@
   --te-common-bg-default: var(--te-base-dark-27); // 深色背景-输入框背景/面板背景色 #212329
   --te-common-bg-disabled: var(--te-base-dark-29); // 禁用/标签/下拉框多选标签 背景色 #2a2c31
   --te-common-bg-switch: var(--te-base-gray-67); // 开关默认色 #4D4E52
+
+  // 通用间距
+  --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
+  --te-common-vertical-form-label-spacing: 8px; // 上下布局时，表单label与表单元素的间隔
 }
diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
index 673b3601f6..1513c1d3b9 100644
--- a/packages/theme/base/src/component-common.less
+++ b/packages/theme/base/src/component-common.less
@@ -114,7 +114,7 @@
     border-bottom-style: none;
 
     .tiny-collapse-item__word-overflow {
-      margin: 12px 0px;
+      margin: var(--te-common-vertical-item-spacing-normal) 0px;
       width: 100%;
       line-height: var(--te-base-line-height-4);
     }
@@ -210,6 +210,9 @@
         border-radius: var(--te-base-border-radius-1);
       }
     }
+    .tiny-tabs__nav-wrap-not-separator::after {
+      background-color: var(--te-common-border-divider);
+    }
   }
 }
 
@@ -457,9 +460,7 @@
   font-size: var(--te-base-font-size-base);
   color: var(--te-common-text-primary);
   background-color: var(--te-common-bg-default);
-
   height: auto;
-  line-height: 28px;
 }
 
 // 13、tag标签
@@ -600,7 +601,9 @@
 // 17、tooltip文字提示
 .tiny-tooltip.tiny-tooltip {
   &.tiny-tooltip__popper {
-    box-shadow: 0 2px 12px 0 var(--te-base-dark-bg-8);
+    background: var(--te-common-bg-default);
+    color: var(--te-common-text-primary);
+    box-shadow: 0 0 20px 0 var(--te-base-dark-bg-8);
     &[class*='is-'] {
       background: var(--te-common-bg-default);
       color: var(--te-common-text-primary);
@@ -608,6 +611,7 @@
       padding: 12px;
       &[x-placement^='top'] {
         .popper__arrow {
+          border-top-color: var(--te-common-text-inverse);
           &.popper__arrow::after {
             border-top-color: var(--te-common-text-inverse);
           }
@@ -615,7 +619,7 @@
       }
       &[x-placement^='bottom'] {
         .popper__arrow {
-          border-bottom-width: 0;
+          border-bottom-color: var(--te-common-text-inverse);
           &.popper__arrow::after {
             border-bottom-color: var(--te-common-text-inverse);
           }
@@ -623,6 +627,7 @@
       }
       &[x-placement^='left'] {
         .popper__arrow {
+          border-left-color: var(--te-common-text-inverse);
           &.popper__arrow::after {
             border-left-color: var(--te-common-text-inverse);
           }
@@ -630,6 +635,7 @@
       }
       &[x-placement^='right'] {
         .popper__arrow {
+          border-right-color: var(--te-common-text-inverse);
           &.popper__arrow::after {
             border-right-color: var(--te-common-text-inverse);
           }
diff --git a/packages/theme/base/src/page/base-config-page.less b/packages/theme/base/src/page/base-config-page.less
index 90f204b7d9..603b1511dd 100644
--- a/packages/theme/base/src/page/base-config-page.less
+++ b/packages/theme/base/src/page/base-config-page.less
@@ -131,3 +131,129 @@ td {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+
+.tiny-popover.tiny-popover.option-popper {
+  background: var(--ti-lowcode-popover-bg-color);
+  border: 1px solid var(--ti-lowcode-popover-option-popper-border-color);
+  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  padding: 0px 8px 12px;
+  &[x-placement^='bottom'] {
+    .popper__arrow {
+      &,
+      &::after {
+        border-bottom-color: var(--ti-lowcode-popover-bg-color);
+      }
+    }
+  }
+
+  &[x-placement^='right'] {
+    margin-left: 16px;
+
+    .popper__arrow {
+      left: -7px;
+      border-color: transparent;
+
+      &::after {
+        border-right-color: var(--ti-lowcode-popover-bg-color);
+      }
+    }
+  }
+
+  &[x-placement^='top'] {
+    .popper__arrow {
+      &,
+      &::after {
+        border-top-color: var(--ti-lowcode-popover-bg-color);
+      }
+    }
+  }
+
+  &[x-placement^='left'] {
+    .popper__arrow {
+      right: -7px;
+
+      &,
+      &::after {
+        border-left-color: var(--ti-lowcode-popover-bg-color);
+      }
+    }
+  }
+
+  .add-options {
+    &.top {
+      border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
+      margin-bottom: 15px;
+      overflow: hidden;
+      display: flex;
+      height: 26px;
+      justify-content: space-between;
+      align-items: center;
+      padding: 6px;
+
+      .title {
+        font-weight: 600;
+      }
+
+      .icon-close {
+        margin-bottom: 4px;
+        margin-right: 0px;
+      }
+    }
+
+    .demo-form {
+      padding: 6px;
+
+      .tiny-form-item {
+        margin-bottom: 4px;
+
+        :deep(.tiny-form-item__label) {
+          color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        }
+
+        :deep(.tiny-input__inner) {
+          color: var(--ti-lowcode-tootip-input-color);
+          background: var(--ti-lowcode-tootip-input-background-color);
+          border-color: var(--ti-lowcode-tootip-input-border-color);
+
+          &:focus {
+            border-color: var(--ti-lowcode-canvas-handle-hover-bg);
+          }
+        }
+      }
+
+      :deep(.btn) {
+        .tiny-form-item__content {
+          display: flex;
+
+          .tiny-button {
+            min-width: auto;
+            flex: 1;
+          }
+        }
+      }
+    }
+
+    .tiny-svg {
+      &.icon-close {
+        margin: 10px;
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &.header-icon {
+        margin-right: 0;
+      }
+
+      &.isBind {
+        color: var(--ti-lowcode-icon-bind-color);
+      }
+    }
+  }
+  &.fixed-left {
+    top: calc(24px + var(--base-nav-panel-width)) !important;
+    transform: translateX(calc(4px - var(--base-right-panel-width)));
+    height: calc(100% - 36px);
+  }
+}
diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less
index d148d58a02..58083c1bad 100644
--- a/packages/theme/dark/variable.less
+++ b/packages/theme/dark/variable.less
@@ -350,7 +350,7 @@
   // 次要描述字体颜色 && 面包屑label 字体颜色
   --ti-lowcode-description-minor-color: #ababab;
   // 样式设置 label 字体颜色
-  --ti-lowcode-style-setting-label-color: #8bbefa;
+  --ti-lowcode-style-setting-label-color: var(--te-common-bg-primary-checked);
   // 样式设置 label 背景颜色
   --ti-lowcode-style-setting-label-bg: rgba(76, 152, 241, 0.15);
   // 多人协作item项hover背景色
diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less
index e2e11dd550..8a000272c2 100644
--- a/packages/theme/light/variable.less
+++ b/packages/theme/light/variable.less
@@ -327,9 +327,9 @@
   // 次要描述字体颜色 && 面包屑label 字体颜色
   --ti-lowcode-description-minor-color: #ababab;
   // 样式设置 label 字体颜色
-  --ti-lowcode-style-setting-label-color: #8bbefa;
+  --ti-lowcode-style-setting-label-color: var(--te-common-bg-primary-checked);
   // 样式设置 label 背景颜色
-  --ti-lowcode-style-setting-label-bg: rgba(76, 152, 241, 0.15);
+  --ti-lowcode-style-setting-label-bg: var(--te-base-blue-25);
   // 多人协作item项hover背景色
   --ti-lowcode-user-item-hover-bg: #f3f3f5;
   // 多人协作人员头像背景色