diff --git a/designer-demo/public/mock/bundle.json b/designer-demo/public/mock/bundle.json
index 358e84215b..57e5d416d6 100644
--- a/designer-demo/public/mock/bundle.json
+++ b/designer-demo/public/mock/bundle.json
@@ -9823,8 +9823,7 @@
                             },
                             "description": {
                               "zh_CN": "单元格编辑渲染配置项，也可以是函数 Function(h, params)"
-                            },
-                            "labelPosition": "left"
+                            }
                           },
                           {
                             "property": "filter",
diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
index 39f81f8e31..d4d57bb652 100644
--- a/packages/common/component/ConfigItem.vue
+++ b/packages/common/component/ConfigItem.vue
@@ -527,7 +527,7 @@ export default {
   }
 
   .item-label {
-    color: var(--ti-lowcode-meta-config-item-label-color);
+    color: var(--te-common-text-secondary);
     font-size: 12px;
     display: flex;
     line-height: 18px;
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index d74b7c700d..d7f86934f3 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -302,8 +302,9 @@ export default {
   width: 100%;
   height: 24px;
   padding: 4px;
+  padding-left: 10px;
   border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color);
-  border-radius: 6px;
+  border-radius: var(--te-base-border-radius-1);
 
   &:hover {
     border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color);
diff --git a/packages/common/component/MetaListItem.vue b/packages/common/component/MetaListItem.vue
index 30b2344e75..332baf51c5 100644
--- a/packages/common/component/MetaListItem.vue
+++ b/packages/common/component/MetaListItem.vue
@@ -16,7 +16,8 @@
                 :popper-class="['option-popper', { 'fixed-left': expand }]"
                 :visible-arrow="!expand"
                 title=""
-                width="267"
+                width="295"
+                height="auto"
                 trigger="manual"
                 @hide="hide(item)"
               >
@@ -295,14 +296,21 @@ export default {
     }
   }
 }
+
 .tiny-popover {
+  position: relative;
   .icon-close {
-    float: right;
+    position: absolute;
+    top: 6px;
+    right: 6px;
   }
 }
 .add-options {
   overflow-y: scroll;
-  height: 100%;
+  padding: 20px 0 20px 2px;
+  &.top {
+    margin-bottom: 0;
+  }
   &::-webkit-scrollbar-track-piece {
     background: var(--ti-lowcode-toolbar-bg);
   }
diff --git a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
index 2582c7bc63..f7aed3c450 100644
--- a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
+++ b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
@@ -5,7 +5,7 @@
       <div v-for="(slot, index) in slotList" :key="slot.name" class="use-slot">
         <div class="use-slot-item-name">
           {{ slot.name }}
-          <tiny-tooltip effect="dark" :content="state.currentComponent?.content" placement="top">
+          <tiny-tooltip effect="dark" :content="state.currentComponent?.content" placement="bottom" width="260">
             <span class="item-icon">
               <component :is="state.currentComponent?.icon"></component>
             </span>
@@ -74,7 +74,7 @@ export default {
       TinyGrid: {
         content:
           '暴露给插槽使用的变量，为解构的参数，可以使用多个用逗号分隔，如：row(行数据)，column(列数据)，$table(内部表格实例)，seq(序号)，cell(单元格)，columnIndex(列索引),rowIndex(行索引)',
-        icon: SvgICons['IconUnknow']()
+        icon: SvgICons['IconHelpCircle']()
       }
     }
 
@@ -202,6 +202,7 @@ export default {
 
   .use-slot-item-content {
     display: flex;
+    justify-content: space-between;
   }
 
   .use-slot-switch-wrap {
@@ -227,6 +228,7 @@ export default {
 
   .slot-name-form-item {
     margin-bottom: 0;
+    margin-right: 6px;
   }
 
   .item-icon {
@@ -240,6 +242,7 @@ export default {
   position: relative;
   font-size: 14px;
   line-height: 20px;
+  width: 40px;
   height: 20px;
   vertical-align: middle;
   cursor: pointer;
@@ -262,7 +265,7 @@ export default {
 .e__switch-core::after {
   content: '';
   position: absolute;
-  top: 1px;
+  top: 2px;
   left: 1px;
   border-radius: 100%;
   transition: all 0.3s;
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 841beb01a1..952331936b 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -2,34 +2,19 @@
   <div class="tab-container">
     <div class="tabs-wrap">
       <tiny-button-group>
-        <tiny-button
-          v-for="(item, index) in uncollapsedOptions"
-          :key="item.label || item.icon"
-          :style="{ width: getItemWidth() + 'px' }"
-          :class="['tab-item', { selected: picked === (valueKey ? item.value[valueKey] : item.value) }]"
-          @click.stop="change(item)"
-        >
-          <span
-            :class="[
-              'label-text',
-              { 'border-right': collapsedOptions.length || index < uncollapsedOptions.length - 1 }
-            ]"
+        <div class="button-wrap" v-for="(item, index) in uncollapsedOptions" :key="item.label || item.icon">
+          <tiny-button
+            :style="{ width: getItemWidth() + 'px' }"
+            :class="['tab-item', { selected: picked === (valueKey ? item.value[valueKey] : item.value) }]"
+            @click.stop="change(item)"
           >
-            <span v-if="item?.label && !item?.content">{{ item.label }}</span>
-            <tiny-popover
-              v-if="item?.content"
-              :placement="placement"
-              :visible-arrow="false"
-              :content="item.content"
-              trigger="hover"
-            >
-              <template #reference>
-                <span v-if="item?.label">{{ item.label }}</span>
-                <svg-icon v-if="item?.icon" :name="item.icon" class="bem-Svg"></svg-icon>
-              </template>
-            </tiny-popover>
-          </span>
-        </tiny-button>
+            <span class="label-text" :title="item?.content">
+              <span v-if="item?.label">{{ item.label }}</span>
+              <svg-icon v-if="item?.icon" :name="item.icon" class="bem-Svg"></svg-icon>
+            </span>
+          </tiny-button>
+          <span :class="[{ 'border-right': collapsedOptions.length || index < uncollapsedOptions.length - 1 }]"></span>
+        </div>
         <tiny-dropdown
           v-if="collapsedOptions.length"
           trigger="click"
@@ -39,47 +24,29 @@
           ]"
           :style="{ width: getItemWidth(true) + 'px' }"
         >
-          <span class="selected-option" @click.stop="change(selectedCollapsedOption)">
-            <span v-if="selectedCollapsedOption?.label && !selectedCollapsedOption?.content">{{
-              selectedCollapsedOption.label
-            }}</span>
-            <tiny-popover
-              v-if="selectedCollapsedOption?.content"
-              :placement="placement"
-              :visible-arrow="false"
-              :content="selectedCollapsedOption.content"
-              trigger="hover"
-            >
-              <template #reference>
-                <span v-if="selectedCollapsedOption?.label">{{ selectedCollapsedOption.label }}</span>
-                <svg-icon
-                  v-if="selectedCollapsedOption?.icon"
-                  :name="selectedCollapsedOption.icon"
-                  class="bem-Svg"
-                ></svg-icon>
-              </template>
-            </tiny-popover>
+          <span
+            class="selected-option"
+            :title="selectedCollapsedOption?.content"
+            @click.stop="change(selectedCollapsedOption)"
+          >
+            <span v-if="selectedCollapsedOption?.label">{{ selectedCollapsedOption.label }}</span>
+            <svg-icon
+              v-if="selectedCollapsedOption?.icon"
+              :name="selectedCollapsedOption.icon"
+              class="bem-Svg"
+            ></svg-icon>
           </span>
           <template #dropdown>
-            <tiny-dropdown-menu>
+            <tiny-dropdown-menu popper-class="dropdown-menu-list">
               <tiny-dropdown-item
                 v-for="item in foldsOptions"
                 :key="item.label || item.icon"
                 @click.stop="change(item)"
               >
-                <span v-if="item?.label && !item?.content">{{ item.label }}</span>
-                <tiny-popover
-                  v-if="item?.content"
-                  :placement="placement"
-                  :visible-arrow="false"
-                  :content="item.content"
-                  trigger="hover"
-                >
-                  <template #reference>
-                    <span v-if="item?.label">{{ item.label }}</span>
-                    <svg-icon v-if="item?.icon" :name="item.icon" class="bem-Svg"></svg-icon>
-                  </template>
-                </tiny-popover>
+                <span :title="item?.content">
+                  <span v-if="item?.label">{{ item.label }}</span>
+                  <svg-icon v-if="item?.icon" :name="item.icon" class="bem-Svg"></svg-icon>
+                </span>
               </tiny-dropdown-item>
             </tiny-dropdown-menu>
           </template>
@@ -91,7 +58,6 @@
 <script setup>
 import { ref, computed, watch, defineProps, defineEmits } from 'vue'
 import {
-  Popover as TinyPopover,
   ButtonGroup as TinyButtonGroup,
   Button as TinyButton,
   Dropdown as TinyDropdown,
@@ -110,11 +76,6 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  // 提示内容位置
-  placement: {
-    type: String,
-    default: 'top'
-  },
   // tabItem宽度
   labelWidth: {
     type: Number,
@@ -195,14 +156,23 @@ const change = (item) => {
   .tabs-wrap {
     display: flex;
     justify-content: space-between;
+    background-color: var(--te-common-bg-container);
+    border-radius: 4px;
+    .tiny-button-group {
+      display: flex;
+      .button-wrap {
+        display: flex;
+        align-items: center;
+      }
+    }
+
     .tiny-button.tiny-button.tiny-button--default {
       margin: 0;
       padding: 0;
       border: none;
-      background-color: var(--te-common-bg-container);
       line-height: 14px;
       min-width: 20px;
-      max-width: 80px;
+      background-color: var(--te-common-bg-container);
       color: var(--te-common-text-weaken);
 
       &:hover {
@@ -223,58 +193,61 @@ const change = (item) => {
       text-align: center;
       cursor: pointer;
       position: relative;
-      background-color: var(--te-common-bg-container);
       .label-text {
         width: 100%;
         height: 12px;
-
         .bem-Svg {
           margin-top: -3px;
         }
       }
     }
-    .tiny-dropdown {
+    :deep(.drop-down-options) {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 24px;
-      background-color: var(--ti-lowcode-base-bg-5);
       color: var(--te-common-text-weaken);
+
+      &:hover {
+        background-color: var(--te-common-bg-prompt);
+        border-radius: 4px;
+        color: var(--te-common-text-primary);
+      }
       &.selected {
-        background-color: var(--ti-lowcode-base-gray-101);
+        background-color: var(--te-common-bg-prompt);
         color: var(--te-common-text-primary);
         border-radius: 4px;
       }
-      :deep(.tiny-dropdown__title) {
+      .tiny-dropdown__title {
         margin: 0;
         line-height: 12px;
         .selected-option {
           text-align: center;
         }
       }
-
-      :deep(.tiny-dropdown__suffix-inner) {
+      .tiny-dropdown__suffix-inner {
         width: 20px;
         display: flex;
         justify-content: center;
       }
-
-      &:hover {
-        background-color: var(--ti-lowcode-base-gray-101);
-        border-radius: 4px;
+      .tiny-dropdown__trigger:hover {
         color: var(--te-common-text-primary);
       }
     }
   }
 }
-.tiny-dropdown-menu {
+.dropdown-menu-list.tiny-popper.tiny-dropdown-menu {
+  margin-top: 4px;
+}
+
+.dropdown-menu-list {
   padding: 8px 0px;
-  margin: 0px 0px 0px 20px;
+  margin-left: 20px;
+  border-radius: 4px;
   background-color: var(--te-common-bg-default);
   color: var(--te-common-text-weaken);
   z-index: 9999;
   box-shadow: 0 0 10px 0 var(--te-common-border-default);
-  --ti-dropdown-menu-arrow-margin-top: 0;
 
   :deep(.focusing) {
     background-color: var(--te-common-bg-default);
@@ -284,14 +257,16 @@ const change = (item) => {
     padding: 4px 12px;
     background-color: var(--te-common-bg-default);
 
-    &:hover {
-      background-color: var(--ti-lowcode-base-gray-101);
-      border-radius: 4px;
+    &:hover,
+    &:active {
+      background-color: var(--te-common-bg-container);
       color: var(--te-common-text-primary);
     }
   }
 }
 .border-right {
+  display: inline-block;
+  height: 12px;
   border-right: 1px solid var(--te-common-border-default);
 }
 </style>
diff --git "a/packages/design-core/assets/\351\207\215\345\220\257.svg" b/packages/design-core/assets/restart.svg
similarity index 100%
rename from "packages/design-core/assets/\351\207\215\345\220\257.svg"
rename to packages/design-core/assets/restart.svg
diff --git a/packages/engine-cli/template/designer/public/mock/bundle.json b/packages/engine-cli/template/designer/public/mock/bundle.json
index 1796684cdf..77114bb436 100644
--- a/packages/engine-cli/template/designer/public/mock/bundle.json
+++ b/packages/engine-cli/template/designer/public/mock/bundle.json
@@ -9525,8 +9525,7 @@
                             },
                             "description": {
                               "zh_CN": "单元格编辑渲染配置项，也可以是函数 Function(h, params)"
-                            },
-                            "labelPosition": "left"
+                            }
                           },
                           {
                             "property": "filter",
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 99a10d509a..10727f3dee 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -223,7 +223,6 @@ export default {
   .line-style {
     padding: 0 8px 0 12px;
     display: block;
-    color: var(--ti-lowcode-setting-style-font-color);
     font-size: 12px;
     .line-text {
       display: block;
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 96d6bdda46..63b148e447 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -554,7 +554,7 @@ export default {
       cursor: pointer;
       border-radius: 2px;
       color: var(--te-common-text-emphasize);
-      background-color: var(--ti-lowcode-style-setting-label-bg);
+      background-color: var(--te-common-bg-text-emphasize);
     }
   }
 }
@@ -567,6 +567,7 @@ export default {
 
   span {
     font-weight: 600;
+    color: var(--te-common-text-primary);
   }
 
   .svg-icon {
diff --git a/packages/settings/styles/src/components/background/BackgroundImageGradient.vue b/packages/settings/styles/src/components/background/BackgroundImageGradient.vue
index 0c76d76204..34042a4da9 100644
--- a/packages/settings/styles/src/components/background/BackgroundImageGradient.vue
+++ b/packages/settings/styles/src/components/background/BackgroundImageGradient.vue
@@ -14,7 +14,7 @@
       <div>
         <tiny-checkbox v-model="state.repeat" @change="changeRepeat">Repeat</tiny-checkbox>
       </div>
-      <span><svg-icon name="clock-small"></svg-icon></span>
+      <span><svg-icon name="restart"></svg-icon></span>
     </div>
     <div class="color">
       <label for="">Color</label>
diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue
index 157d502f09..2417508919 100644
--- a/packages/settings/styles/src/components/border/BorderGroup.vue
+++ b/packages/settings/styles/src/components/border/BorderGroup.vue
@@ -90,7 +90,7 @@
       :class="{ 'is-setting': isBorderSetting(), 'set-border-style': true }"
       @click="openSetting(BORDER_PROPERTY.Border, $event)"
     >
-      <span class="border-title">边框</span>
+      <span>边框</span>
     </label>
   </div>
   <div class="border-container">
@@ -574,7 +574,6 @@ export default {
 
   .radius-label {
     flex: 0 0 48px;
-    padding: 0 2px;
     line-height: 24px;
     color: var(--ti-lowcode-component-setting-panel-label-color);
   }
@@ -655,10 +654,6 @@ export default {
 .border-label {
   color: var(--te-common-text-secondary);
   flex-shrink: 0;
-
-  .border-title {
-    margin-left: 2px;
-  }
 }
 .border-container {
   display: flex;
@@ -724,7 +719,7 @@ export default {
   span {
     border-radius: 2px;
     color: var(--ti-lowcode-style-setting-label-color);
-    background: var(--ti-lowcode-style-setting-label-bg);
+    background: var(--te-common-bg-text-emphasize);
     cursor: pointer;
   }
 }
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index 16613efb5d..2edb4279fd 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -516,7 +516,7 @@ const handleDeleteCurSelector = () => {
     display: flex;
     padding: 3px;
     border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
-    border-radius: 6px;
+    border-radius: var(--te-base-border-radius-1);
     cursor: pointer;
   }
 
@@ -528,7 +528,7 @@ const handleDeleteCurSelector = () => {
     min-width: 0;
     padding: 1px 10px;
     border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
-    border-radius: 6px;
+    border-radius: var(--te-base-border-radius-1);
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     font-size: 12px;
@@ -670,7 +670,7 @@ const handleDeleteCurSelector = () => {
     flex: 4;
     min-width: 84px;
     border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
-    border-radius: 6px;
+    border-radius: var(--te-base-border-radius-1);
     border-left: none;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
diff --git a/packages/settings/styles/src/components/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue
index 7fc575ec99..0f878d1056 100644
--- a/packages/settings/styles/src/components/effects/EffectGroup.vue
+++ b/packages/settings/styles/src/components/effects/EffectGroup.vue
@@ -539,7 +539,7 @@ export default {
       cursor: pointer;
       border-radius: 2px;
       color: var(--te-common-text-emphasize);
-      background-color: var(--ti-lowcode-style-setting-label-bg);
+      background-color: var(--te-common-bg-text-emphasize);
     }
   }
 
diff --git a/packages/settings/styles/src/components/inputs/NumericSelect.vue b/packages/settings/styles/src/components/inputs/NumericSelect.vue
index 7d92d67c6a..9d737afa25 100644
--- a/packages/settings/styles/src/components/inputs/NumericSelect.vue
+++ b/packages/settings/styles/src/components/inputs/NumericSelect.vue
@@ -46,7 +46,7 @@ export default {
     },
     suffix: {
       type: String,
-      default: 'PX'
+      default: 'px'
     }
   },
   emits: useEvent(),
diff --git a/packages/settings/styles/src/components/layout/FlexBox.vue b/packages/settings/styles/src/components/layout/FlexBox.vue
index 8943495a63..104be1d651 100644
--- a/packages/settings/styles/src/components/layout/FlexBox.vue
+++ b/packages/settings/styles/src/components/layout/FlexBox.vue
@@ -244,6 +244,7 @@ export default {
 }
 .title {
   margin-right: 10px;
+  color: var(--te-common-text-secondary);
 }
 .flex-item :deep(.radio-button) {
   padding: 5px;
diff --git a/packages/settings/styles/src/components/layout/GridBox.vue b/packages/settings/styles/src/components/layout/GridBox.vue
index de9e031e5b..1f2f3ff6bd 100644
--- a/packages/settings/styles/src/components/layout/GridBox.vue
+++ b/packages/settings/styles/src/components/layout/GridBox.vue
@@ -545,6 +545,7 @@ export default {
       line-height: 24px;
       padding-left: 3px;
       width: 54px;
+      color: var(--te-common-text-secondary);
     }
     .radio-wrap {
       display: grid;
@@ -553,7 +554,7 @@ export default {
   }
   .is-setting {
     color: var(--ti-lowcode-style-setting-label-color);
-    background-color: var(--ti-lowcode-style-setting-label-bg);
+    background-color: var(--te-common-bg-text-emphasize);
   }
   :deep(.reference-wrapper) {
     width: 100%;
diff --git a/packages/settings/styles/src/components/layout/LayoutGroup.vue b/packages/settings/styles/src/components/layout/LayoutGroup.vue
index 86c4a20773..057c3d0374 100644
--- a/packages/settings/styles/src/components/layout/LayoutGroup.vue
+++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue
@@ -127,7 +127,6 @@ export default {
 
   .display-label {
     flex: 0 0 50px;
-    padding: 0 3px;
     line-height: 24px;
     color: var(--te-common-text-secondary);
     span {
@@ -138,7 +137,7 @@ export default {
         cursor: pointer;
         border-radius: 2px;
         color: var(--te-common-text-emphasize);
-        background-color: var(--ti-lowcode-style-setting-label-bg);
+        background-color: var(--te-common-bg-text-emphasize);
       }
     }
   }
diff --git a/packages/settings/styles/src/components/position/PositionGroup.vue b/packages/settings/styles/src/components/position/PositionGroup.vue
index 671173925e..c0165b29a3 100644
--- a/packages/settings/styles/src/components/position/PositionGroup.vue
+++ b/packages/settings/styles/src/components/position/PositionGroup.vue
@@ -522,7 +522,7 @@ export default {
       align-items: center;
       justify-content: center;
       &.is-setting {
-        background-color: var(--ti-lowcode-style-setting-label-bg);
+        background-color: var(--te-common-bg-text-emphasize);
       }
 
       &.is-show {
@@ -603,7 +603,7 @@ export default {
       cursor: pointer;
       border-radius: 2px;
       color: var(--te-common-text-emphasize);
-      background-color: var(--ti-lowcode-style-setting-label-bg);
+      background-color: var(--te-common-bg-text-emphasize);
     }
   }
   .lr-path-color {
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 193cbdaf42..4034c68371 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -468,7 +468,6 @@ span {
 
     .size-label {
       flex: 0 0 52px;
-      padding-left: 2px;
       margin-right: 2px;
       line-height: 28px;
       color: var(--te-common-text-secondary);
@@ -485,7 +484,6 @@ span {
   }
   .overflow-label {
     flex: 0 0 54px;
-    padding: 0 2px;
     line-height: 24px;
     color: var(--te-common-text-secondary);
   }
@@ -495,7 +493,7 @@ span {
   cursor: pointer;
   border-radius: 2px;
   color: var(--te-common-text-emphasize);
-  background-color: var(--ti-lowcode-style-setting-label-bg);
+  background-color: var(--te-common-bg-text-emphasize);
 }
 
 .is-setting {
@@ -545,8 +543,8 @@ span {
   }
   .fit-label {
     flex: 0 0 54px;
-    padding: 0 2px;
     line-height: 28px;
+    color: var(--te-common-text-secondary);
     span {
       padding: 2px;
     }
diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
index fe59d911f8..de2a674e7e 100644
--- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
@@ -555,7 +555,7 @@ export default {
     justify-content: center;
 
     &.is-setting {
-      background-color: var(--ti-lowcode-style-setting-label-bg);
+      background-color: var(--te-common-bg-text-emphasize);
     }
 
     &.is-show {
diff --git a/packages/settings/styles/src/components/spacing/SpacingSetting.vue b/packages/settings/styles/src/components/spacing/SpacingSetting.vue
index 1f3e43345a..d3e9aa3840 100644
--- a/packages/settings/styles/src/components/spacing/SpacingSetting.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingSetting.vue
@@ -150,7 +150,7 @@ export default {
       &:hover,
       &.active {
         color: var(--ti-lowcode-style-setting-label-color);
-        background: var(--ti-lowcode-style-setting-label-bg);
+        background: var(--te-common-bg-text-emphasize);
       }
     }
 
@@ -187,7 +187,7 @@ export default {
         &:hover,
         &.active {
           color: var(--ti-lowcode-style-setting-label-color);
-          background: var(--ti-lowcode-style-setting-label-bg);
+          background: var(--te-common-bg-text-emphasize);
         }
       }
     }
diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index dca82610a9..753ec71559 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -521,7 +521,6 @@ export default {
     .typography-label {
       margin-right: -16px;
       line-height: 16px;
-      color: var(--ti-lowcode-component-setting-panel-label-color);
 
       .font-family-col {
         width: 118px;
@@ -664,12 +663,15 @@ export default {
     }
   }
 
+  .typography-label {
+    color: var(--te-common-text-secondary);
+  }
   .is-setting {
     span {
       cursor: pointer;
       border-radius: 2px;
       color: var(--te-common-text-emphasize);
-      background-color: var(--ti-lowcode-style-setting-label-bg);
+      background-color: var(--te-common-bg-text-emphasize);
     }
   }
 }
diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
index 5e77d231f7..43e1526172 100644
--- a/packages/theme/base/src/common.less
+++ b/packages/theme/base/src/common.less
@@ -49,6 +49,7 @@
   --te-common-bg-switch: var(--te-base-gray-50); // 开关默认色 #c2c2c2
   --te-common-bg-error: var(--te-base-red-20); // 浅色错误背景-背景色 #fce2e0
   --te-common-bg-popover: var(--te-base-gray-0); // 对话框/tooltip/popover背景 #fff
+  --te-common-bg-text-emphasize: var(--te-base-blue-140); // 强调性文字背景色 rgba(20, 118, 255, 0.1)
 
   // 通用间距
   --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue
index 65c24e0441..07cf4cfa77 100644
--- a/packages/toolbars/media/src/Main.vue
+++ b/packages/toolbars/media/src/Main.vue
@@ -11,17 +11,20 @@
           >
             <tiny-popover
               trigger="hover"
-              width="225"
+              width="260"
               append-to-body
               :open-delay="1000"
               popper-class="media-icon-popover"
             >
               <div class="media-content">
                 <div class="media-title">
-                  <div>{{ item.title }}</div>
-                  <div v-if="item.subTitle" class="sub-title">
-                    （<svg-icon v-if="item.view === 'desktop'" name="stars"></svg-icon> <span>{{ item.subTitle }}</span
-                    >）
+                  <div>
+                    {{ item.title }}
+                    <span v-if="item.subTitle" class="sub-title">
+                      （<svg-icon v-if="item.view === 'desktop'" name="stars"></svg-icon>
+                      <span>{{ item.subTitle }}</span
+                      >）
+                    </span>
                   </div>
                 </div>
                 <div class="content">{{ item.content }}</div>
@@ -32,60 +35,43 @@
             </tiny-popover>
           </span>
         </div>
-        <tiny-popover v-if="isCanvas" width="290" trigger="click" popper-class="toolbar-media-popper">
+        <tiny-popover v-if="isCanvas" width="200" trigger="click" popper-class="toolbar-media-popper">
           <template #reference>
-            <tiny-popover
-              trigger="hover"
-              :open-delay="1000"
-              popper-class="toolbar-right-popover"
-              append-to-body
-              content="画布设置"
-            >
-              <template #reference>
-                <span class="reference-text">
-                  <span>
-                    <span>{{ parseInt(state.width) }}</span>
-                    <span class="symbol">PX</span>
-                  </span>
-                  <span>
-                    <span>{{ scale.toFixed(2) }}</span>
-                    <span class="symbol">%</span>
-                  </span>
-                </span>
-              </template>
-            </tiny-popover>
+            <span class="reference-text" title="画布设置">
+              <span>
+                <span>{{ parseInt(state.width) }}</span>
+                <span class="symbol">px</span>
+              </span>
+              <span>
+                <span>{{ scale.toFixed(2) }}</span>
+                <span class="symbol">%</span>
+              </span>
+            </span>
           </template>
           <div class="content-wrap text-content">
-            <span class="title text-title">{{ state.textData.title }}</span>
+            <div class="title text-title">{{ state.textData.title }}</div>
             <div class="setting">
               <div>
-                <label for="">{{ state.textData.width }}</label>
+                <label>{{ state.textData.width }}</label>
                 <tiny-input v-model="state.width" @change="widthChange">
                   <template #suffix>
-                    <span>PX</span>
+                    <span>px</span>
                   </template>
                 </tiny-input>
               </div>
               <div>
-                <label for="">{{ state.textData.scale }}</label>
+                <label>{{ state.textData.scale }}</label>
                 <tiny-input v-model="state.scaleValue" :readonly="state.readonly" @change="scaleChange">
                   <template #suffix>
                     <span>%</span>
                   </template>
                 </tiny-input>
               </div>
+              <div>
+                <label>{{ '自由布局' }}</label>
+                <tiny-switch v-model="isAbsolute" @change="changeCanvasType"></tiny-switch>
+              </div>
             </div>
-
-            <ul class="more-setting">
-              <li>
-                <div>
-                  <span>{{ '自由布局' }}</span>
-                </div>
-                <div>
-                  <tiny-switch v-model="isAbsolute" @change="changeCanvasType"></tiny-switch>
-                </div>
-              </li>
-            </ul>
           </div>
         </tiny-popover>
       </div>
@@ -196,8 +182,8 @@ export default {
           maxWidth: '1920px',
           title: '大屏',
           subTitle: '1200px 及以上',
-          content: '此处添加的样式将适用于 1200 像素及以上，除非它们在更大的断点处进行编辑',
-          enContent: 'Style added here will apply at 1200px and up,unless they′re edited at a larger breakpoint'
+          content: '此处添加的样式将适用于 1200 像素及以上，除非它们在更大的断点处进行编辑。',
+          enContent: 'Style added here will apply at 1200px and up,unless they′re edited at a larger breakpoint.'
         },
         {
           idx: 1,
@@ -456,7 +442,6 @@ export default {
     flex-wrap: nowrap;
     align-items: center;
     gap: 6px;
-
     .icon {
       width: 24px;
       height: 24px;
@@ -485,7 +470,6 @@ export default {
       }
     }
   }
-
   .more-setting {
     .setting-item {
       display: flex;
@@ -494,4 +478,43 @@ export default {
     }
   }
 }
+.media-content {
+  padding: 12px 8px;
+  line-height: 18px;
+  .media-title {
+    font-weight: 600;
+  }
+  .content {
+    color: var(--te-common-text-secondary);
+  }
+}
+.setting-content {
+  padding: 12px 8px;
+}
+
+.content-wrap {
+  padding: 20px 12px;
+  .title {
+    font-weight: 600;
+    margin-bottom: 16px;
+  }
+
+  .setting {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      label {
+        color: var(--te-common-text-secondary);
+        min-width: 64px;
+      }
+      &:last-child {
+        justify-content: flex-start;
+      }
+    }
+  }
+}
 </style>