From ea73bff42f3939bff5856a6922ae1bd51e338d7b Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 8 Nov 2024 14:26:30 +0800
Subject: [PATCH 1/3] feat(style-panel): modify this style-panel styles
 according to the design craft (#853)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(style-panel): 根据设计稿修改样式面板的UI

* feat(style-panel): 根据设计稿修改样式面板的UI

* feat(style-panel): 根据设计稿修改样式面板的UI

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): modify this style-panel styles according to the design craft

* feat(style-panel): add style-panel can be collapsed or expanded

* feat(style-panel): modify tabGroupComponent style error;

* feat(style-panel): 对其设计稿后修改部分样式

* feat(style-pane): 修复部分样式颜色和间距问题

* feat(style-panel): 修复eslint报错问题

* feat(style-panel): 修改review意见

* feat(style-panel): 修复AI的review意见

* feat(style-panel): use color variables insteads color values;

* feat(style-panel): fix AI reviews;

* feat(style-panel): fix AI reviews

* feat(style-panel): 修改颜色变量--ti-base系列为--te-base

* feat(style-panel): fix item width error

* feat(style-panel): fix review error

* feat(style-panel): use buttonGroup & dorpDown replace tabsGroupComponent elements;

* feat(style-panel): adjust the spacing font to non-italic, the spacing of the ModalMask pop-window to 20px, and the closing icon to 16px;

* feat(style-panel): fix the color variables;

* feat(style-panel): Modified review comments: color variables; numeric component; optimized;

* feat(style-panel): Resolved the remainning styles issues

* feat(style-panel): fix some reviews

* feat(style-panel): Resolved the remainning styles issues

* feat(style-panel): fix some reviews

* feat(style-panel): fix some reviews

* feat(style-panel): fix some reviews

* feat(style-panel): add style panel collapsed or expand icon

* Create style-panel-expand.svg

feat(style-panel): add expand icon of style collapsed tab

* Create style-pabel-collapsed.svg

feat(style-panel): add collapsed icon of style panel collapsed tabs

* Delete packages/design-core/assets/style-pabel-collapsed.svg

* Create style-panel-collapsed.svg

* feat(style-panel): modify some icon color

* feat(style-panel): fix some reviews

* feat(style-panel): fix some reviews

* feat(style-panel): fix some reviews

* feat(style-panel): fix some reviews
---
 packages/common/component/MetaCodeEditor.vue  |  10 +-
 .../color-configurator/ColorConfigurator.vue  |   8 +-
 packages/configurator/src/index.js            |   2 +
 .../NumberConfigurator.vue                    |  11 +-
 .../SliderConfigurator.vue                    |   9 +-
 .../TabsGroupConfigurator.vue                 | 297 ++++++++++++
 .../assets/style-panel-collapsed.svg          |   8 +
 .../design-core/assets/style-panel-expand.svg |   7 +
 packages/layout/src/DesignSettings.vue        |  26 +-
 packages/settings/styles/src/Main.vue         |  32 +-
 .../components/background/BackgroundGroup.vue |  77 ++-
 .../background/BackgroundImageGradient.vue    |  40 +-
 .../background/BackgroundImageSetting.vue     |  84 ++--
 .../components/background/ImageSetting.vue    | 200 ++++----
 .../components/background/LinearGradient.vue  |   6 +-
 .../components/background/PositionOrigin.vue  |  84 ++--
 .../components/background/RadialGradient.vue  |  39 +-
 .../src/components/border/BorderGroup.vue     |  65 ++-
 .../components/classNamesContainer/index.vue  |  22 +-
 .../src/components/effects/EffectGroup.vue    | 173 ++++---
 .../src/components/inputs/InputSelect.vue     |  11 +-
 .../src/components/inputs/ModalMask.vue       |  55 ++-
 .../src/components/inputs/NumericSelect.vue   |  66 ++-
 .../src/components/inputs/ResetButton.vue     |   6 +-
 .../styles/src/components/layout/FlexBox.vue  |   2 -
 .../src/components/layout/LayoutGroup.vue     |  69 +--
 .../src/components/position/PositionGroup.vue |  15 +-
 .../styles/src/components/size/SizeGroup.vue  | 173 ++++---
 .../src/components/spacing/SpacingGroup.vue   | 214 ++++-----
 .../src/components/spacing/SpacingSetting.vue |   8 +-
 .../components/typography/TypographyGroup.vue | 446 +++++++++++-------
 packages/settings/styles/src/js/cssType.js    |  29 +-
 .../settings/styles/src/js/styleProperty.js   |  48 +-
 packages/theme/base/src/common.less           |   1 +
 packages/theme/dark/variable.less             |   2 +-
 packages/theme/light/base.less                |   1 +
 packages/theme/light/setting-style.less       |   3 +
 packages/theme/light/variable.less            |   2 +-
 38 files changed, 1466 insertions(+), 885 deletions(-)
 create mode 100644 packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
 create mode 100644 packages/design-core/assets/style-panel-collapsed.svg
 create mode 100644 packages/design-core/assets/style-panel-expand.svg

diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 0c97ce569..9d5caceb7 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -2,7 +2,9 @@
   <div class="editor-wrap">
     <slot :open="open">
       <div v-if="buttonShowContent" :class="['full-width', { 'empty-color': value === '' }]" @click="open">
-        <span class="text-content text-ellipsis-multiple">{{ value === '' ? buttonLabel : value }}</span>
+        <span class="text-content text-ellipsis-multiple text-line-clamp">{{
+          value === '' ? buttonLabel : value
+        }}</span>
         <svg-icon class="edit-icon" name="to-edit"></svg-icon>
       </div>
       <tiny-button v-else class="edit-btn" @click="open">
@@ -298,7 +300,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: 32px;
+  height: 24px;
   padding: 4px;
   border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color);
   border-radius: 6px;
@@ -322,6 +324,10 @@ export default {
     color: var(--ti-lowcode-common-text-main-color);
   }
 }
+
+.text-line-clamp {
+  -webkit-line-clamp: 1;
+}
 :deep(.tiny-dialog-box__header) {
   padding-bottom: 15px;
 }
diff --git a/packages/configurator/src/color-configurator/ColorConfigurator.vue b/packages/configurator/src/color-configurator/ColorConfigurator.vue
index 42542c7c3..d4e32ce47 100644
--- a/packages/configurator/src/color-configurator/ColorConfigurator.vue
+++ b/packages/configurator/src/color-configurator/ColorConfigurator.vue
@@ -2,7 +2,7 @@
   <div class="background-input">
     <tiny-input v-model="color" placeholder="请输入颜色" @change="change">
       <template #prefix>
-        <input v-model="color" type="color" class="input-color" @change="changeColor" />
+        <input v-model="inputColor" type="color" class="input-color" @change="changeColor" />
       </template>
     </tiny-input>
   </div>
@@ -10,7 +10,7 @@
 
 <script>
 import { Input } from '@opentiny/vue'
-import { ref, watchEffect } from 'vue'
+import { ref, computed, watchEffect } from 'vue'
 
 export default {
   components: {
@@ -29,6 +29,7 @@ export default {
   emits: ['change', 'update:modelValue'],
   setup(props, { emit }) {
     const color = ref(props.modelValue)
+    const inputColor = computed(() => color.value || '#FFFFFF')
 
     const change = (value) => {
       emit('update:modelValue', value)
@@ -45,6 +46,7 @@ export default {
 
     return {
       color,
+      inputColor,
       change,
       changeColor
     }
@@ -57,7 +59,7 @@ export default {
   width: 100%;
 
   .input-color {
-    width: 22px;
+    width: 20px;
     height: 24px;
     border: none;
     background: transparent;
diff --git a/packages/configurator/src/index.js b/packages/configurator/src/index.js
index 1bceb32c5..39f5f81e3 100644
--- a/packages/configurator/src/index.js
+++ b/packages/configurator/src/index.js
@@ -26,6 +26,7 @@ import SliderConfigurator from './slider-configurator/SliderConfigurator.vue'
 import SlotConfigurator from './slot-configurator/SlotConfigurator.vue'
 import SwitchConfigurator from './switch-configurator/SwitchConfigurator.vue'
 import TableColumnsConfigurator from './table-columns-configurator/TableColumnsConfigurator.vue'
+import TabsGroupConfigurator from './tabs-group-configurator/TabsGroupConfigurator.vue'
 import VariableConfigurator from './variable-configurator/VariableConfigurator.vue'
 
 import { I18nInput, MetaCodeEditor } from '@opentiny/tiny-engine-common'
@@ -59,6 +60,7 @@ export {
   SlotConfigurator,
   SwitchConfigurator,
   TableColumnsConfigurator,
+  TabsGroupConfigurator,
   VariableConfigurator,
   MetaCodeEditor,
   I18nInput as I18nConfigurator,
diff --git a/packages/configurator/src/number-configurator/NumberConfigurator.vue b/packages/configurator/src/number-configurator/NumberConfigurator.vue
index cce0a68e5..157b857e8 100644
--- a/packages/configurator/src/number-configurator/NumberConfigurator.vue
+++ b/packages/configurator/src/number-configurator/NumberConfigurator.vue
@@ -169,7 +169,9 @@ export default {
     :deep(.tiny-numeric__input-inner) {
       text-align: left;
     }
-
+    :deep(.is-disabled) {
+      background-color: var(--te-common-bg-disabled);
+    }
     &.is-without-controls {
       :deep(.tiny-numeric__input-inner) {
         padding-left: 8px;
@@ -181,6 +183,9 @@ export default {
     }
   }
   .meta-numeric-unit {
+    position: absolute;
+    top: 2px;
+    height: calc(100% - 2px);
     span {
       color: var(--ti-lowcode-numeric-unit-text-color);
       font-size: 14px;
@@ -188,8 +193,8 @@ export default {
     }
     :deep(.tiny-select) {
       width: 100%;
-      float: right;
       .tiny-input__inner {
+        height: 100%;
         color: var(--ti-lowcode-numeric-unit-text-color);
         padding: 2px;
         border: none;
@@ -200,7 +205,7 @@ export default {
         display: none;
       }
       .tiny-input.is-disabled .tiny-input__inner {
-        background: var(--ti-lowcode-input-bg);
+        background-color: var(--te-common-bg-container);
       }
     }
   }
diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index dbe835dc3..e9ffb6ca8 100644
--- a/packages/configurator/src/slider-configurator/SliderConfigurator.vue
+++ b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -133,20 +133,21 @@ export default {
     padding: 0;
     cursor: pointer;
     border: 0;
-    background-color: transparent;
+    background-color: var(--te-common-border-bg-divider);
     position: relative;
     outline: 0;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
   }
+
   input[type='range']::-webkit-slider-thumb {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     border: 0;
-    background-color: #fff;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
+    background-color: var(--te-common-bg-default);
+    box-shadow: 0 0 2px 0 var(--te-common-border-default);
     -webkit-transition: border-color 0.15s, background-color 0.15s;
     transition: border-color 0.15s, background-color 0.15s;
     cursor: pointer;
@@ -158,7 +159,7 @@ export default {
   }
   input[type='range']::-webkit-slider-thumb:active {
     border: 0;
-    background-color: #fff;
+    background-color: var(--te-common-bg-default);
   }
 }
 </style>
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
new file mode 100644
index 000000000..841beb01a
--- /dev/null
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -0,0 +1,297 @@
+<template>
+  <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 }
+            ]"
+          >
+            <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>
+        <tiny-dropdown
+          v-if="collapsedOptions.length"
+          trigger="click"
+          :class="[
+            'drop-down-options',
+            { selected: collapsedOptions.find((item) => picked === (valueKey ? item.value[valueKey] : item.value)) }
+          ]"
+          :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>
+          <template #dropdown>
+            <tiny-dropdown-menu>
+              <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>
+              </tiny-dropdown-item>
+            </tiny-dropdown-menu>
+          </template>
+        </tiny-dropdown>
+      </tiny-button-group>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, computed, watch, defineProps, defineEmits } from 'vue'
+import {
+  Popover as TinyPopover,
+  ButtonGroup as TinyButtonGroup,
+  Button as TinyButton,
+  Dropdown as TinyDropdown,
+  DropdownMenu as TinyDropdownMenu,
+  DropdownItem as TinyDropdownItem
+} from '@opentiny/vue'
+
+const props = defineProps({
+  // tab选中值，用于默认选中的tab
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  // tab选中值如果是对象，valueKey是对象内的某个key
+  valueKey: {
+    type: String,
+    default: ''
+  },
+  // 提示内容位置
+  placement: {
+    type: String,
+    default: 'top'
+  },
+  // tabItem宽度
+  labelWidth: {
+    type: Number,
+    default: 63
+  },
+  // tab的选项，如果选项中包含collapsed，则会折叠为下拉
+  options: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const picked = ref(null)
+const uncollapsedOptions = computed(() => props.options.filter((option) => !option.collapsed))
+const collapsedOptions = computed(() => props.options.filter((option) => option.collapsed))
+const foldsOptions = ref([])
+const selectedCollapsedOption = ref(null)
+const isCollapsedSelected = ref(false)
+
+const getItemWidth = (collapsed = false) => {
+  return `${parseInt(props.labelWidth, 10) + (collapsed ? 15 : 0)}`
+}
+
+const findMatchingFoldValue = (value) => {
+  selectedCollapsedOption.value =
+    foldsOptions.value.find((item) => (props.valueKey ? item.value[props.valueKey] === value : item.value === value)) ??
+    selectedCollapsedOption.value
+}
+
+const filterNonMatchingValues = (value) =>
+  collapsedOptions.value.filter((item) =>
+    props.valueKey ? item.value[props.valueKey] !== value : item.value !== value
+  )
+
+const updateOptionDisplay = (value) => {
+  if (!value) {
+    foldsOptions.value = collapsedOptions.value.slice(1)
+    selectedCollapsedOption.value = collapsedOptions.value[0]
+    return
+  }
+  findMatchingFoldValue(value)
+  if (selectedCollapsedOption.value) {
+    foldsOptions.value = filterNonMatchingValues(value)
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    picked.value = value
+    if (collapsedOptions.value.length > 0) {
+      updateOptionDisplay(value)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+const change = (item) => {
+  if (props.valueKey ? picked.value[props.valueKey] === item.value[props.valueKey] : picked.value === item.value) {
+    return
+  }
+  isCollapsedSelected.value = Boolean(item.collapsed)
+
+  emit('update:modelValue', item.value)
+}
+</script>
+
+<style scoped lang="less">
+.tab-container {
+  max-width: 210px;
+  height: 24px;
+  font-size: 12px;
+  display: flex;
+  border-radius: 4px;
+
+  .tabs-wrap {
+    display: flex;
+    justify-content: space-between;
+    .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;
+      color: var(--te-common-text-weaken);
+
+      &:hover {
+        background-color: var(--ti-lowcode-base-gray-101);
+        color: var(--te-common-text-primary);
+        border-radius: 4px;
+      }
+
+      &.selected {
+        background-color: var(--ti-lowcode-base-gray-101);
+        color: var(--te-common-text-primary);
+        border-radius: 4px;
+      }
+    }
+    .tab-item {
+      display: flex;
+      align-items: center;
+      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 {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 24px;
+      background-color: var(--ti-lowcode-base-bg-5);
+      color: var(--te-common-text-weaken);
+      &.selected {
+        background-color: var(--ti-lowcode-base-gray-101);
+        color: var(--te-common-text-primary);
+        border-radius: 4px;
+      }
+      :deep(.tiny-dropdown__title) {
+        margin: 0;
+        line-height: 12px;
+        .selected-option {
+          text-align: center;
+        }
+      }
+
+      :deep(.tiny-dropdown__suffix-inner) {
+        width: 20px;
+        display: flex;
+        justify-content: center;
+      }
+
+      &:hover {
+        background-color: var(--ti-lowcode-base-gray-101);
+        border-radius: 4px;
+        color: var(--te-common-text-primary);
+      }
+    }
+  }
+}
+.tiny-dropdown-menu {
+  padding: 8px 0px;
+  margin: 0px 0px 0px 20px;
+  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);
+  }
+
+  :deep(.tiny-dropdown-item__wrap) {
+    padding: 4px 12px;
+    background-color: var(--te-common-bg-default);
+
+    &:hover {
+      background-color: var(--ti-lowcode-base-gray-101);
+      border-radius: 4px;
+      color: var(--te-common-text-primary);
+    }
+  }
+}
+.border-right {
+  border-right: 1px solid var(--te-common-border-default);
+}
+</style>
diff --git a/packages/design-core/assets/style-panel-collapsed.svg b/packages/design-core/assets/style-panel-collapsed.svg
new file mode 100644
index 000000000..4909844dd
--- /dev/null
+++ b/packages/design-core/assets/style-panel-collapsed.svg
@@ -0,0 +1,8 @@
+<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<rect id="矩形 43" width="16.000004" height="16.000004" fill="#C4C4C4" fill-opacity="0"/>
+	<path id="矢量 3" d="M13 4L10.64 6.35C10.56 6.43 10.43 6.43 10.35 6.35L8 4" stroke="#808080" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linecap="round"/>
+	<path id="矢量 4" d="M13 9.5L10.64 11.85C10.56 11.93 10.43 11.93 10.35 11.85L8 9.5" stroke="#808080" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linecap="round"/>
+	<path id="矢量 5" d="M2 4L6 4" stroke="#808080" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linecap="round"/>
+	<path id="矢量 6" d="M2 8L6 8" stroke="#808080" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linecap="round"/>
+	<path id="矢量 7" d="M2 12L6 12" stroke="#808080" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linecap="round"/>
+</svg>
diff --git a/packages/design-core/assets/style-panel-expand.svg b/packages/design-core/assets/style-panel-expand.svg
new file mode 100644
index 000000000..90ed6ec7b
--- /dev/null
+++ b/packages/design-core/assets/style-panel-expand.svg
@@ -0,0 +1,7 @@
+<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<rect id="矩形 43" width="16.000004" height="16.000004" fill="#C4C4C4" fill-opacity="0"/>
+	<path id="矢量 4" d="M13 7L11.34 8.65C11.26 8.73 11.13 8.73 11.05 8.65L9.39 7" stroke="#808080" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linecap="round"/>
+	<path id="矢量 5" d="M3 4L13 4" stroke="#808080" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linecap="round"/>
+	<path id="矢量 6" d="M3 8L7 8" stroke="#808080" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linecap="round"/>
+	<path id="矢量 7" d="M3 12L13 12" stroke="#808080" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linecap="round"/>
+</svg>
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index 993ef02a7..8ad765762 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -2,10 +2,15 @@
   <div id="tiny-right-panel">
     <tiny-tabs v-model="layoutState.settings.render">
       <tiny-tab-item v-for="(setting, index) in settings" :key="index" :title="setting.title" :name="setting.name">
-        <component :is="setting.entry"></component>
+        <component :is="setting.entry" :is-collapsed="isCollapsed"></component>
         <div v-show="activating" class="active"></div>
       </tiny-tab-item>
     </tiny-tabs>
+    <div v-if="layoutState.settings.render === 'style'" class="tabs-setting">
+      <tiny-tooltip effect="dark" :content="isCollapsed ? '展开' : '折叠'" placement="top" :visible-arrow="false">
+        <template #default> <svg-icon :name="settingIcon" @click="isCollapsed = !isCollapsed"></svg-icon> </template>
+      </tiny-tooltip>
+    </div>
   </div>
 </template>
 
@@ -29,10 +34,14 @@ export default {
     const { layoutState } = useLayout()
     const activating = computed(() => layoutState.settings.activating)
     const showMask = ref(true)
+    const isCollapsed = ref(false)
+    const settingIcon = computed(() => (isCollapsed.value ? 'style-panel-collapsed' : 'style-panel-expand'))
 
     return {
       showMask,
+      isCollapsed,
       activating,
+      settingIcon,
       layoutState
     }
   }
@@ -49,12 +58,23 @@ export default {
   padding-top: 12px;
   background-color: var(--ti-lowcode-setting-panel-bg-color);
 
+  .tabs-setting {
+    position: absolute;
+    top: 9px;
+    right: 18px;
+    line-height: 26px;
+    color: var(--te-common-icon-secondary);
+    cursor: pointer;
+  }
   .tiny-tabs {
     height: 100%;
   }
   :deep(.tiny-tabs) {
     display: flex;
     flex-direction: column;
+    .tiny-tabs__header .tiny-tabs__nav {
+      width: 60%;
+    }
     .tiny-tabs__nav-scroll {
       margin-left: 12px;
       .tiny-tabs__active-bar {
@@ -69,10 +89,14 @@ export default {
       padding: 0;
       margin: 0;
     }
+    .tiny-tabs__nav.is-show-active-bar .tiny-tabs__item {
+      margin-right: 8px;
+    }
     .tiny-tabs__item {
       flex: 1;
       background-color: var(--ti-lowcode-setting-panel-bg-color);
       color: var(--ti-lowcode-setting-panel-tabs-item-title-color);
+      margin-right: 5px;
       &:hover {
         color: var(--ti-lowcode-setting-panel-tabs-item-title-hover-color);
       }
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index fd0a038cf..2ac04daea 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -27,7 +27,7 @@
     </div>
   </div>
   <class-names-container></class-names-container>
-  <tiny-collapse v-model="activeNames">
+  <tiny-collapse v-model="activeNames" @change="handoverGroup">
     <tiny-collapse-item title="布局" name="layout">
       <layout-group :display="state.style.display" @update="updateStyle" />
       <flex-box v-if="state.style.display === 'flex'" :style="state.style" @update="updateStyle"></flex-box>
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { ref, watch } from 'vue'
+import { computed, watch } from 'vue'
 import { Collapse, CollapseItem, Input } from '@opentiny/vue'
 import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-meta-register'
 import { CodeConfigurator, VariableConfigurator } from '@opentiny/tiny-engine-configurator'
@@ -105,8 +105,14 @@ export default {
     TinyInput: Input,
     VariableConfigurator
   },
-  setup() {
-    const activeNames = ref([
+  props: {
+    isCollapsed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const styleCategoryGroup = [
       'layout',
       'spacing',
       'size',
@@ -115,13 +121,20 @@ export default {
       'backgrounds',
       'borders',
       'effects'
-    ])
+    ]
+    const activeNames = computed(() => (props.isCollapsed ? [styleCategoryGroup[0]] : styleCategoryGroup))
     const { getCurrentSchema } = useCanvas()
     // 获取当前节点 style 对象
     const { state, updateStyle } = useStyle() // updateStyle
     const { addHistory } = useHistory()
     const { getSchema } = useProperties()
 
+    const handoverGroup = (actives) => {
+      if (props.isCollapsed) {
+        activeNames.value = actives.length > 1 ? actives.shift() : actives
+      }
+    }
+
     // 保存编辑器内容，并回写到 schema
     const save = ({ content }) => {
       const { getSchema: getCanvasPageSchema, updateRect } = useCanvas().canvasApi.value
@@ -192,6 +205,7 @@ export default {
       activeNames,
       CSS_TYPE,
       open,
+      handoverGroup,
       save,
       close,
       updateStyle,
@@ -246,4 +260,12 @@ export default {
     }
   }
 }
+
+.dots {
+  display: inline-block;
+  margin-left: 4px;
+  vertical-align: middle;
+  border: 2px solid var(--te-common-border-checked);
+  border-radius: 2px;
+}
 </style>
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 9040b0321..92bd6ba45 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -5,8 +5,9 @@
         <label
           :class="['background-label', { 'is-setting': getSettingFlag(BACKGROUND_PROPERTY.BackgroundImage) }]"
           @click="openSetting(BACKGROUND_PROPERTY.BackgroundImage, $event)"
-          >背景图 & 渐变</label
         >
+          <span>背景图 & 渐变</span>
+        </label>
         <tiny-tooltip effect="dark" placement="top" content="添加背景图，线性渐变，径向渐变等">
           <div class="background-image-icon" @click="openBackgroundImageModal($event, { isAdd: true })">
             <icon-plus></icon-plus>
@@ -50,16 +51,18 @@
       <label
         :class="['background-label', { 'is-setting': getSettingFlag(BACKGROUND_PROPERTY.BackgroundColor) }]"
         @click="openSetting(BACKGROUND_PROPERTY.BackgroundColor, $event)"
-        >颜色</label
       >
+        <span>颜色</span>
+      </label>
       <color-configurator :modelValue="getProperty(BACKGROUND_PROPERTY.BackgroundColor).value" @change="changeColor" />
     </div>
     <div class="background-clip">
       <label
         :class="['background-label', { 'is-setting': getSettingFlag(BACKGROUND_PROPERTY.BackgroundClip) }]"
         @click="openSetting(BACKGROUND_PROPERTY.BackgroundClip, $event)"
-        >裁剪</label
       >
+        <span>裁剪</span>
+      </label>
       <div class="position-select">
         <select-configurator
           :modelValue="state.selectValue"
@@ -72,7 +75,11 @@
   <modal-mask v-if="state.showModal" @close="state.showModal = false">
     <reset-button @reset="reset" />
   </modal-mask>
-  <modal-mask v-if="state.showBackgroundImageModal" @close="state.showBackgroundImageModal = false">
+  <modal-mask v-if="state.showBackgroundImageModal" teleport="body">
+    <div class="background-model-title">
+      <span>背景图 & 渐变设置</span>
+      <svg-icon name="close" @click="state.showBackgroundImageModal = false"></svg-icon>
+    </div>
     <background-image-setting
       :style="state.currentBackgroundImage"
       @update:modelValue="updateCurrentBackground"
@@ -386,8 +393,12 @@ export default {
   gap: 12px 8px;
   grid-template-columns: 48px auto auto;
   align-items: center;
+  position: relative;
+  span {
+    padding: 2px;
+  }
   .background-label {
-    color: var(--ti-lowcode-component-setting-panel-label-color);
+    color: var(--te-common-text-primary);
   }
   .background-color,
   .background-clip {
@@ -395,7 +406,7 @@ export default {
     display: grid;
     gap: 8px;
     grid-column: 1 / -1;
-    grid-template-columns: 48px 1fr;
+    grid-template-columns: 35px 1fr;
   }
 
   .background-image-wrap {
@@ -418,18 +429,17 @@ export default {
     place-items: stretch;
     gap: 1px;
     border-radius: 2px;
-    border-width: 1px;
-    border-style: solid;
-    border-color: #2b2b2b;
-    background-color: #2b2b2b;
-    margin-bottom: 12px;
+    border-top: 1px solid var(--te-common-border-divider);
+    background-color: var(--te-common-bg-default);
+    margin: 12px 0;
     .image-list-item {
       display: grid;
       grid-template-columns: 8px 16px minmax(auto, 1fr) auto;
       gap: 8px 4px;
       height: 24px;
       align-items: center;
-      background-color: rgb(54, 54, 54);
+      background-color: var(--te-common-bg-default);
+      border-bottom: 1px solid var(--te-common-border-divider);
       pointer-events: all;
       font-size: 11px;
       font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
@@ -441,6 +451,7 @@ export default {
       position: relative;
       overflow: visible;
       &:hover {
+        background-color: var(--te-common-bg-container);
         .dragger-icon,
         .icon-wrap {
           opacity: 1;
@@ -457,8 +468,7 @@ export default {
           right: 0;
           top: 0;
           bottom: 0;
-          background-color: rgb(43, 43, 43);
-          box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px inset;
+          background-color: var(--ti-lowcode-setting-style-drag-bar-bg);
         }
       }
       &.image-list-item-invisible {
@@ -473,12 +483,12 @@ export default {
         width: 100%;
         height: 3px;
         border-radius: 3px;
-        background-color: #8ac2ff;
+        background-color: var(--ti-lowcode-setting-style-drag-bar-bg);
       }
     }
     .dragger-icon {
       display: inline-flex;
-      color: #757575;
+      color: var(--te-common-icon-secondary);
       cursor: grab;
       width: 12px;
       opacity: 0;
@@ -490,7 +500,7 @@ export default {
       height: 10px;
       border-radius: 1px;
       margin: 1px;
-      box-shadow: #212121 0px 0px 0px 1px;
+      box-shadow: var(--te-common-border-default) 0px 0px 0px 1px;
       align-self: center;
       overflow: hidden;
       .image {
@@ -515,15 +525,12 @@ export default {
         width: 16px;
         max-height: 16px;
         border-width: 0px;
-        color: #757575;
+        color: var(--te-common-icon-secondary);
         background-color: transparent;
         border-radius: 2px;
         padding-left: 0px;
         padding-right: 0px;
         font-size: 13px;
-        &:hover {
-          color: #d9d9d9;
-        }
       }
     }
   }
@@ -537,14 +544,36 @@ export default {
       font-size: 16px;
       padding: 4px;
       &:hover svg {
-        color: var(--ti-lowcode-toolbar-icon-color);
+        color: var(--te-common-icon-secondary);
       }
     }
   }
 
   .is-setting {
-    color: var(--ti-lowcode-style-setting-label-color);
-    background-color: var(--ti-lowcode-style-setting-label-bg);
+    span {
+      cursor: pointer;
+      border-radius: 2px;
+      color: var(--te-common-text-emphasize);
+      background-color: var(--ti-lowcode-style-setting-label-bg);
+    }
+  }
+}
+
+.background-model-title {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  padding: 6px 0;
+
+  span {
+    font-weight: 600;
+  }
+
+  .svg-icon {
+    position: absolute;
+    cursor: pointer;
+    top: 0px;
+    right: -4px;
   }
 }
 </style>
diff --git a/packages/settings/styles/src/components/background/BackgroundImageGradient.vue b/packages/settings/styles/src/components/background/BackgroundImageGradient.vue
index 1d55397c1..0c76d7620 100644
--- a/packages/settings/styles/src/components/background/BackgroundImageGradient.vue
+++ b/packages/settings/styles/src/components/background/BackgroundImageGradient.vue
@@ -59,8 +59,8 @@ export default {
       value: '0',
       repeat: false,
       colorValue: '#000',
-      gradientLeftColor: '#000',
-      gradientRightColor: '#fff',
+      gradientLeftColor: '#D6D6D6',
+      gradientRightColor: '#F5F5F5',
       gradientLeftPercent: 0,
       gradientRightPercent: 100
     })
@@ -104,11 +104,11 @@ export default {
 .background-image-gradient {
   padding: 8px 0;
   .slider {
-    height: 16px;
+    height: 12px;
     overflow: visible;
     grid-column: 1 / -1;
     position: relative;
-    border-width: 1px;
+    border-width: 0;
     box-sizing: border-box;
     border-style: solid;
     border-color: rgba(0, 0, 0, 0.8);
@@ -121,8 +121,8 @@ export default {
   }
   .color {
     display: grid;
-    gap: 8px 4px;
-    grid-template-columns: 44px 1fr 54px;
+    gap: 8px 8px;
+    grid-template-columns: 52px 1fr 65px;
     align-items: center;
     .color-input {
       :deep(.tiny-input__inner) {
@@ -133,35 +133,37 @@ export default {
   .slider-inner {
     position: relative;
     width: 100%;
-    height: 100%;
+    height: 16px;
     cursor: default;
   }
   .delta-right {
     position: absolute;
-    height: calc(100% - 2px);
+    height: calc(100% - 7px);
     top: 1px;
     right: 0;
-    width: 6px;
-    border-radius: 1px;
-    background-color: rgb(235, 235, 235);
-    box-shadow: rgb(0 0 0 / 30%) 0px 0px 0px 1px;
+    width: 9px;
+    border-radius: 10px;
+    background-color: rgb(219 219 219);
+    box-shadow: rgb(255 255 255) 0px 0px 0px 1px, rgb(0 0 0 / 10%) 0px 0px 0px 2px,
+      rgb(219 219 219) 0px 0px 0px 0px inset;
     opacity: 1;
     cursor: ew-resize;
   }
   .delta-left {
     position: absolute;
-    height: calc(100% - 2px);
-    top: 1px;
-    width: 8px;
-    border-radius: 1px;
-    left: 1px;
-    box-shadow: rgb(235 235 235) 0px 0px 0px 2px, rgb(0 0 0 / 30%) 0px 0px 0px 3px,
-      rgb(0 0 0 / 30%) 0px 0px 0px 1px inset;
+    height: calc(100% - 4px);
+    width: 12px;
+    border-radius: 10px;
+    left: -1px;
+    background-color: rgb(219 219 219);
+    box-shadow: rgb(255 255 255) 0px 0px 0px 2px, rgb(0 0 0 / 10%) 0px 0px 0px 3px,
+      rgb(219 219 219) 0px 0px 0px 1px inset;
     opacity: 1;
     cursor: ew-resize;
   }
   .delta-inner {
     position: relative;
+    border-radius: 10px;
     top: -4px;
     left: -4px;
     width: calc(100% + 8px);
diff --git a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
index eaa75a620..769aebffa 100644
--- a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
+++ b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
@@ -2,26 +2,15 @@
   <div class="background-image-setting">
     <div class="background-row line">
       <label class="row-label">类型</label>
-      <div class="row-content">
-        <tiny-tooltip
-          v-for="item in state.typeLists"
-          :key="item.tipContent"
-          :effect="effect"
-          :placement="placement"
-          :content="item.tipContent"
-          popper-class="background-type-tooltip"
-        >
-          <div
-            :class="[
-              'row-content-item background-type-item',
-              { selected: state.styleComponent === item.styleComponent }
-            ]"
-            @click="selectType(item)"
-          >
-            <svg-icon :name="item.iconName"></svg-icon>
-          </div>
-        </tiny-tooltip>
-      </div>
+      <tabs-group-configurator
+        :options="state.typeLists"
+        :modelValue="state.styleComponent"
+        value-key="styleComponent"
+        label-width="50"
+        :effect="effect"
+        :placement="placement"
+        @update:modelValue="selectType"
+      ></tabs-group-configurator>
     </div>
     <div class="background-image-content">
       <component
@@ -38,7 +27,7 @@
 <script>
 import { reactive, onMounted } from 'vue'
 import { Tooltip, Checkbox } from '@opentiny/vue'
-import { ColorConfigurator } from '@opentiny/tiny-engine-configurator'
+import { ColorConfigurator, TabsGroupConfigurator } from '@opentiny/tiny-engine-configurator'
 import InputSelect from '../inputs/InputSelect.vue'
 import PositionOrigin from './PositionOrigin.vue'
 import ImageSetting from './ImageSetting.vue'
@@ -54,6 +43,7 @@ export default {
     TinyCheckbox: Checkbox,
     InputSelect,
     ColorConfigurator,
+    TabsGroupConfigurator,
     PositionOrigin,
     ImageSetting,
     LinearGradient,
@@ -82,32 +72,38 @@ export default {
       styleComponent: 'ImageSetting',
       typeLists: [
         {
-          tipContent: '背景图',
-          styleComponent: 'ImageSetting',
-          iconName: 'background-image',
+          content: '背景图',
+          icon: 'background-image',
           value: {
+            styleComponent: 'ImageSetting',
             imageUrl: 'img/bgcModal.png',
             position: '0px 0px',
             size: 'auto'
           }
         },
         {
-          tipContent: '线性渐变',
-          styleComponent: 'LinearGradient',
-          iconName: 'linear-gradient',
-          value: 'linear-gradient(#000, #fff)'
+          content: '线性渐变',
+          icon: 'linear-gradient',
+          value: {
+            styleComponent: 'LinearGradient',
+            imageUrl: 'linear-gradient(#000, #fff)'
+          }
         },
         {
-          tipContent: '径向渐变',
-          styleComponent: 'RadialGradient',
-          iconName: 'radial-gradient',
-          value: 'radial-gradient(circle at 50% 50%, #000, #fff)'
+          content: '径向渐变',
+          icon: 'radial-gradient',
+          value: {
+            styleComponent: 'RadialGradient',
+            imageUrl: 'radial-gradient(circle at 50% 50%, #000, #fff)'
+          }
         },
         {
-          tipContent: '颜色叠加',
-          styleComponent: 'ColorOverlay',
-          iconName: 'background-color',
-          value: 'linear-gradient(#000, #000)'
+          content: '颜色叠加',
+          icon: 'background-color',
+          value: {
+            styleComponent: 'ColorOverlay',
+            imageUrl: 'linear-gradient(#000, #000)'
+          }
         }
       ]
     })
@@ -116,18 +112,18 @@ export default {
       emit('update:modelValue', { ...property, type: state.styleComponent })
     }
 
-    const selectType = (item) => {
+    const selectType = (value) => {
       let styleObj = {}
 
-      if (item.styleComponent === 'ImageSetting') {
+      if (value.styleComponent === 'ImageSetting') {
         styleObj = {
-          [BACKGROUND_PROPERTY.BackgroundImage]: `url(${item.value.imageUrl})`,
-          [BACKGROUND_PROPERTY.BackgroundPosition]: item.value.position,
-          [BACKGROUND_PROPERTY.BackgroundSize]: item.value.size
+          [BACKGROUND_PROPERTY.BackgroundImage]: `url(${value.imageUrl})`,
+          [BACKGROUND_PROPERTY.BackgroundPosition]: value.position,
+          [BACKGROUND_PROPERTY.BackgroundSize]: value.size
         }
       } else {
         styleObj = {
-          [BACKGROUND_PROPERTY.BackgroundImage]: item.value,
+          [BACKGROUND_PROPERTY.BackgroundImage]: value.imageUrl,
           [BACKGROUND_PROPERTY.BackgroundPosition]: null,
           [BACKGROUND_PROPERTY.BackgroundSize]: null,
           [BACKGROUND_PROPERTY.BackgroundRepeat]: null,
@@ -135,7 +131,7 @@ export default {
         }
       }
 
-      state.styleComponent = item.styleComponent
+      state.styleComponent = value.styleComponent
       updateStyle(styleObj)
     }
 
@@ -217,7 +213,7 @@ export default {
     }
   }
   :deep(.line) {
-    padding: 8px 0;
+    padding: 6px 0;
     position: relative;
     &::after {
       content: '';
diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
index 20408cc1f..bcb0227de 100644
--- a/packages/settings/styles/src/components/background/ImageSetting.vue
+++ b/packages/settings/styles/src/components/background/ImageSetting.vue
@@ -6,9 +6,8 @@
         <div class="image-inner"></div>
       </div>
       <div class="text-wrap">
-        <span>background-image.svg</span>
-        <span class="size">250 * 250</span>
-        <span class="size">3.4 KB</span>
+        <span class="size">background-image.svg</span>
+        <span class="size">250 * 250 3.4 KB</span>
         <span>
           <tiny-checkbox v-model="state.checked" @change="imageSizeChange">@2x</tiny-checkbox>
         </span>
@@ -19,76 +18,63 @@
     </div>
   </div>
   <div class="background-row line">
-    <label class="size-label top">大小</label>
-    <div class="size-content">
-      <div class="row-content">
-        <div
-          v-for="item in BACKGROUND_SIZE_OPTIONS"
-          :key="item.value"
-          :class="['row-content-item image-size-item', { selected: state.sizeSelected === item.value }]"
-          @click="selectSize(item)"
-        >
-          <span>{{ item.label }}</span>
-        </div>
-      </div>
-      <div class="dim-wrap">
-        <input-select
-          :modelValue="state.width"
-          :suffixValue="state.widthSuffix"
-          :options="UNIT_OPTIONS"
-          :disabled="state.sizeSelected !== 'custom'"
-          @input-change="sizeWidthChange"
-          @select-change="suffixWidthChange"
-        ></input-select>
-        <input-select
-          :modelValue="state.height"
-          :suffixValue="state.heightSuffix"
-          :options="UNIT_OPTIONS"
-          :disabled="state.sizeSelected !== 'custom'"
-          @input-change="sizeHeightChange"
-          @select-change="suffixHeightChange"
-        ></input-select>
-        <span>宽度</span>
-        <span>高度</span>
-      </div>
+    <label class="size-label">大小</label>
+    <tabs-group-configurator
+      :options="BACKGROUND_SIZE_OPTIONS"
+      :modelValue="state.sizeSelected"
+      label-width="67"
+      @update:modelValue="selectSize"
+    ></tabs-group-configurator>
+  </div>
+  <div class="size-row">
+    <div class="size-col">
+      <label class="size-label">宽度</label>
+      <input-select
+        :modelValue="state.width"
+        :suffixValue="state.widthSuffix"
+        :options="UNIT_OPTIONS"
+        :disabled="state.sizeSelected !== 'custom'"
+        @input-change="sizeWidthChange"
+        @select-change="suffixWidthChange"
+      ></input-select>
+    </div>
+    <div class="size-col">
+      <label class="size-label">高度</label>
+      <input-select
+        :modelValue="state.height"
+        :suffixValue="state.heightSuffix"
+        :options="UNIT_OPTIONS"
+        :disabled="state.sizeSelected !== 'custom'"
+        @input-change="sizeHeightChange"
+        @select-change="suffixHeightChange"
+      ></input-select>
     </div>
   </div>
-  <position-origin class="background-row line" @update="updateStyle"></position-origin>
+  <position-origin class="background-row line" :is-top="true" @update="updateStyle"></position-origin>
   <div class="background-row tile-wrap">
     <label class="row-label">重复</label>
-    <div class="row-content">
-      <tiny-tooltip
-        v-for="item in REPEAT_OPTIONS"
-        :key="item.tip"
-        :effect="effect"
-        :placement="placement"
-        :content="item.tip"
-        popper-class="background-type-tooltip"
-      >
-        <div :class="['row-content-item', { selected: state.repeat === item.value }]" @click="selectRepeat(item)">
-          <svg-icon :name="item.icon"></svg-icon>
-        </div>
-      </tiny-tooltip>
-    </div>
+    <tabs-group-configurator
+      :options="REPEAT_OPTIONS"
+      :modelValue="state.repeat"
+      label-width="50"
+      @update:modelValue="selectRepeat"
+    ></tabs-group-configurator>
   </div>
   <div class="background-row fixed-wrap">
     <label class="row-label">固定</label>
-    <div class="row-content">
-      <div
-        v-for="item in FIXED_OPTIONS"
-        :key="item.value"
-        :class="['row-content-item', { selected: state.fixedSelected === item.value }]"
-        @click="selectFixed(item)"
-      >
-        <span>{{ item.label }}</span>
-      </div>
-    </div>
+    <tabs-group-configurator
+      :options="FIXED_OPTIONS"
+      :modelValue="state.fixedSelected"
+      label-width="98"
+      @update:modelValue="selectFixed"
+    ></tabs-group-configurator>
   </div>
 </template>
 
 <script setup>
 import { reactive, defineProps, defineEmits, onMounted } from 'vue'
-import { Tooltip as TinyTooltip, Checkbox as TinyCheckbox } from '@opentiny/vue'
+import { Checkbox as TinyCheckbox } from '@opentiny/vue'
+import { TabsGroupConfigurator } from '@opentiny/tiny-engine-configurator'
 import PositionOrigin from './PositionOrigin.vue'
 import InputSelect from '../inputs/InputSelect.vue'
 import {
@@ -102,7 +88,7 @@ import {
 const props = defineProps({
   style: {
     type: Object,
-    default: () => {}
+    default: () => ({})
   },
   effect: {
     type: String,
@@ -141,16 +127,16 @@ const imageSizeChange = (val) => {
     : updateStyle({ [BACKGROUND_PROPERTY.BackgroundSize]: null })
 }
 
-const selectSize = (item) => {
-  if (item.value !== 'auto') {
+const selectSize = (value) => {
+  if (value !== 'auto') {
     state.width = 'Auto'
     state.widthSuffix = 'auto'
     state.height = 'Auto'
     state.heightSuffix = 'auto'
   }
   state.checked = false
-  state.sizeSelected = item.value
-  updateStyle({ [BACKGROUND_PROPERTY.BackgroundSize]: item.value })
+  state.sizeSelected = value
+  updateStyle({ [BACKGROUND_PROPERTY.BackgroundSize]: value })
 }
 
 const isNum = (num) => {
@@ -158,6 +144,17 @@ const isNum = (num) => {
   return reg.test(num)
 }
 
+const setBackgroundSize = () => {
+  const isAutoWidth = state.width.toLocaleLowerCase() === 'auto'
+  const isAutoHeight = state.height.toLocaleLowerCase() === 'auto'
+  const width = isAutoWidth ? state.width.toLocaleLowerCase() : `${state.width.toLocaleLowerCase() + state.widthSuffix}`
+  const height = isAutoHeight
+    ? state.height.toLocaleLowerCase()
+    : `${state.height.toLocaleLowerCase() + state.heightSuffix}`
+
+  updateStyle({ [BACKGROUND_PROPERTY.BackgroundSize]: `${width} ${height}` })
+}
+
 const sizeWidthChange = (val) => {
   state.width = val
   if (state.widthSuffix === 'auto') {
@@ -190,25 +187,14 @@ const suffixHeightChange = (val) => {
   setBackgroundSize()
 }
 
-const setBackgroundSize = () => {
-  const isAutoWidth = state.width.toLocaleLowerCase() === 'auto'
-  const isAutoHeight = state.height.toLocaleLowerCase() === 'auto'
-  const width = isAutoWidth ? state.width.toLocaleLowerCase() : `${state.width.toLocaleLowerCase() + state.widthSuffix}`
-  const height = isAutoHeight
-    ? state.height.toLocaleLowerCase()
-    : `${state.height.toLocaleLowerCase() + state.heightSuffix}`
-
-  updateStyle({ [BACKGROUND_PROPERTY.BackgroundSize]: `${width} ${height}` })
+const selectRepeat = (value) => {
+  state.repeat = value
+  updateStyle({ [BACKGROUND_PROPERTY.BackgroundRepeat]: value })
 }
 
-const selectRepeat = (item) => {
-  state.repeat = item.value
-  updateStyle({ [BACKGROUND_PROPERTY.BackgroundRepeat]: item.value })
-}
-
-const selectFixed = (item) => {
-  state.fixedSelected = item.value
-  updateStyle({ [BACKGROUND_PROPERTY.BackgroundAttachment]: item.value })
+const selectFixed = (value) => {
+  state.fixedSelected = value
+  updateStyle({ [BACKGROUND_PROPERTY.BackgroundAttachment]: value })
 }
 
 onMounted(() => {
@@ -254,10 +240,9 @@ onMounted(() => {
   height: 64px;
   border-width: 1px;
   box-sizing: border-box;
-  background-color: rgb(43, 43, 43);
   border-style: solid;
-  border-color: rgb(33, 33, 33);
-  border-radius: 2px;
+  border: 1px dotted var(--te-common-border-default);
+  border-radius: 4px;
 }
 .image-inner {
   width: 100%;
@@ -267,11 +252,43 @@ onMounted(() => {
   background-repeat: no-repeat;
   background-position: 50% 50%;
 }
+.size-row {
+  display: flex;
+  padding: 6px 0;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+  .size-col {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    &:not(:last-child) {
+      margin-right: 8px;
+    }
+    .input-select {
+      width: 70px;
+    }
+    .size-label {
+      flex: 0 0 55px;
+      margin-right: 6px;
+      line-height: 28px;
+      color: var(--ti-lowcode-component-setting-panel-label-color);
+    }
+    &:last-child {
+      .size-label {
+        flex: 0 0 48px;
+        margin-right: 10px;
+        text-align: right;
+      }
+    }
+  }
+}
 .text-wrap {
   display: flex;
   flex-direction: column;
   font-size: 12px;
-  color: #d9d9d9;
+  color: var(--ti-lowcode-common-text-color-2);
   margin-left: 8px;
   white-space: nowrap;
   overflow: hidden;
@@ -291,11 +308,11 @@ onMounted(() => {
     }
   }
   .size {
-    color: #ababab;
+    color: var(--te-common-text-secondary);
   }
 }
 .choose-image {
-  border-color: rgb(54, 54, 54);
+  border-color: var(--ti-lowcode-component-setting-panel-label-color);
   outline: 0px;
   cursor: default;
   user-select: none;
@@ -309,9 +326,8 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   height: 24px;
-  border-radius: 2px;
-  color: rgb(217, 217, 217);
-  background: rgb(94, 94, 94);
+  border-radius: 4px;
+  color: var(--te-common-bg-prompt);
   border-width: 1px;
   border-style: solid;
   align-self: center;
diff --git a/packages/settings/styles/src/components/background/LinearGradient.vue b/packages/settings/styles/src/components/background/LinearGradient.vue
index 56afcae2d..9a1bdb4ba 100644
--- a/packages/settings/styles/src/components/background/LinearGradient.vue
+++ b/packages/settings/styles/src/components/background/LinearGradient.vue
@@ -14,7 +14,7 @@
             viewBox="0 0 22 22"
             class="rotate-svg"
           >
-            <circle cx="11" cy="11" r="11" fill="currentColor"></circle>
+            <circle cx="11" cy="11" r="11" fill="#C2C2C2"></circle>
             <circle cx="11" cy="4" r="2" fill="#EEE"></circle>
           </svg>
           <svg
@@ -30,8 +30,8 @@
             <circle cx="11" cy="11" r="11" fill="currentColor"></circle>
           </svg>
         </div>
-        <span @click="counterclockwiseRotate"><svg-icon name="clock-wise-counter"></svg-icon></span>
-        <span @click="clockwiseRotate"><svg-icon name="clock-wise"></svg-icon></span>
+        <span @click="counterclockwiseRotate"><svg-icon name="clock-wise-counter" color="#808080"></svg-icon></span>
+        <span @click="clockwiseRotate"><svg-icon name="clock-wise" color="#808080"></svg-icon></span>
       </div>
       <input-select
         :modelValue="state.angle"
diff --git a/packages/settings/styles/src/components/background/PositionOrigin.vue b/packages/settings/styles/src/components/background/PositionOrigin.vue
index 0cd1cd84f..71c20d617 100644
--- a/packages/settings/styles/src/components/background/PositionOrigin.vue
+++ b/packages/settings/styles/src/components/background/PositionOrigin.vue
@@ -14,20 +14,24 @@
         </div>
       </div>
       <div class="input-wrap">
-        <input-select
-          :modelValue="state.leftValue"
-          :suffixValue="state.leftSuffix"
-          @input-change="leftChange"
-          @select-change="suffixLeftChange"
-        ></input-select>
-        <input-select
-          :modelValue="state.topValue"
-          :suffixValue="state.topSuffix"
-          @input-change="topChange"
-          @select-change="suffixTopChange"
-        ></input-select>
-        <span class="left">左侧</span>
-        <span class="top">上侧</span>
+        <div class="input-item-wrap">
+          <label class="input-label">左侧</label>
+          <input-select
+            :modelValue="state.leftValue"
+            :suffixValue="state.leftSuffix"
+            @input-change="leftChange"
+            @select-change="suffixLeftChange"
+          ></input-select>
+        </div>
+        <div class="input-item-wrap">
+          <label class="input-label">上侧</label>
+          <input-select
+            :modelValue="state.topValue"
+            :suffixValue="state.topSuffix"
+            @input-change="topChange"
+            @select-change="suffixTopChange"
+          ></input-select>
+        </div>
       </div>
     </div>
   </div>
@@ -177,7 +181,7 @@ export default {
 .position-origin {
   .position-content {
     place-items: start center;
-    height: 64px;
+    height: 68px;
     display: grid;
     gap: 4px 8px;
     grid-template-columns: auto auto;
@@ -186,8 +190,8 @@ export default {
   .coordinate {
     grid-column-start: 1;
     grid-row: 1 / span 3;
-    width: 64px;
-    height: 64px;
+    width: 68px;
+    height: 68px;
     background: var(--ti-lowcode-fit-coordinate-bg);
     display: inline-grid;
     overflow: hidden;
@@ -196,7 +200,7 @@ export default {
     box-sizing: border-box;
     border-style: solid;
     border-color: var(--ti-lowcode-fit-coordinate-border-color);
-    border-radius: 2px;
+    border-radius: 4px;
     gap: 0px;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
@@ -205,39 +209,29 @@ export default {
     background-color: var(--ti-lowcode-fit-coordinate-bg);
     transition: color 0.1s ease 0s;
     color: var(--ti-lowcode-fit-coordinate-origin-color);
-    font-size: 19px;
+    font-size: 14px;
     &:hover,
     &.selected {
       color: var(--ti-lowcode-fit-label-color);
     }
   }
   .input-wrap {
-    grid-column-end: span 1;
-    grid-row-start: 2;
-    align-items: center;
-    box-sizing: border-box;
-    display: grid;
-    gap: 4px 8px;
-    grid-template-columns: auto auto;
-    .left-input {
-      grid-column-start: 1;
-    }
-    .top-input {
-      grid-column-start: 2;
-    }
-    .left {
-      color: var(--ti-lowcode-fit-label-color);
-      justify-self: center;
-      grid-column-start: 1;
-    }
-    .top {
-      color: var(--ti-lowcode-fit-label-color);
-      justify-self: center;
-      grid-column-start: 2;
-    }
-    :deep(.tiny-select) {
-      width: auto;
-      max-width: 22px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    .input-item-wrap {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 4px 0;
+      margin-right: 2px;
+
+      .input-label {
+        flex: 0 0 51px;
+        margin-right: 10px;
+        text-align: right;
+      }
     }
   }
   .top {
diff --git a/packages/settings/styles/src/components/background/RadialGradient.vue b/packages/settings/styles/src/components/background/RadialGradient.vue
index a94083a99..dc62e2dc4 100644
--- a/packages/settings/styles/src/components/background/RadialGradient.vue
+++ b/packages/settings/styles/src/components/background/RadialGradient.vue
@@ -1,24 +1,15 @@
 <template>
-  <position-origin class="background-row line" @update="updatePositionOrigin"></position-origin>
+  <position-origin class="background-row line" :is-top="true" @update="updatePositionOrigin"></position-origin>
   <div class="background-row line">
     <label class="row-label">Size</label>
-    <div class="row-content">
-      <tiny-tooltip
-        v-for="item in RADIAL_SIZE_LIST"
-        :key="item.tip"
-        :effect="effect"
-        :placement="placement"
-        :content="item.tip"
-        popper-class="background-type-tooltip"
-      >
-        <div
-          :class="['row-content-item', { selected: state.radialSize === item.value }]"
-          @click="selectRadialSize(item)"
-        >
-          <svg-icon :name="item.icon"></svg-icon>
-        </div>
-      </tiny-tooltip>
-    </div>
+    <tabs-group-configurator
+      :options="RADIAL_SIZE_LIST"
+      :modelValue="state.radialSize"
+      label-width="50"
+      :effect="effect"
+      :placement="placement"
+      @update:modelValue="selectRadialSize"
+    ></tabs-group-configurator>
   </div>
   <background-image-gradient
     :repeat="state.repeat"
@@ -29,7 +20,7 @@
 
 <script setup>
 import { reactive, defineProps, defineEmits, onMounted } from 'vue'
-import { Tooltip as TinyTooltip } from '@opentiny/vue'
+import { TabsGroupConfigurator } from '@opentiny/tiny-engine-configurator'
 import PositionOrigin from './PositionOrigin.vue'
 import BackgroundImageGradient from './BackgroundImageGradient.vue'
 import { BACKGROUND_PROPERTY, RADIAL_SIZE_LIST } from '../../js/styleProperty'
@@ -68,8 +59,8 @@ const updateStyle = () => {
   emit('updateStyle', property)
 }
 
-const selectRadialSize = (item) => {
-  state.radialSize = item.value
+const selectRadialSize = (value) => {
+  state.radialSize = value
   updateStyle()
 }
 
@@ -96,7 +87,7 @@ onMounted(() => {
     state[BACKGROUND_PROPERTY.BackgroundImage] = gradientMatch[2]
   }
 
-  const rColor = /\#(?:[a-f0-9]{6}|[a-f0-9]{3})/ // #fff | #fff
+  const rColor = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/ // #fff | #fff
   const rLengthPercentage = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/ // .5 5px 50%
   const rLinearColorStop = new RegExp(`${rColor.source}(?:\\s+${rLengthPercentage.source})?`)
   const rComma = /\s*,\s*/
@@ -143,7 +134,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   font-size: 12px;
-  color: #d9d9d9;
+  color: var(--ti-lowcode-common-text-color-2);
   margin-left: 8px;
   white-space: nowrap;
   overflow: hidden;
@@ -163,7 +154,7 @@ onMounted(() => {
     }
   }
   .size {
-    color: #ababab;
+    color: var(--ti-lowcode-common-third-text-color);
   }
 }
 .choose-image {
diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue
index 2e9ff1e68..5eb2432e7 100644
--- a/packages/settings/styles/src/components/border/BorderGroup.vue
+++ b/packages/settings/styles/src/components/border/BorderGroup.vue
@@ -4,7 +4,7 @@
       :class="['radius-label', { 'is-setting': isRadiusSetting() }]"
       @click="openSetting(BORDER_RADIUS_PROPERTY.BorderRadius, $event)"
     >
-      圆角
+      <span>圆角</span>
     </div>
     <div class="radius-content">
       <div class="radius-btn-group">
@@ -85,12 +85,13 @@
   </div>
 
   <div class="item-row">
-    <span
+    <label
       class="border-label"
       :class="{ 'is-setting': isBorderSetting(), 'set-border-style': true }"
       @click="openSetting(BORDER_PROPERTY.Border, $event)"
-      >边框</span
     >
+      <span class="border-title">边框</span>
+    </label>
   </div>
   <div class="border-container">
     <div class="position-selector">
@@ -138,27 +139,32 @@
     </div>
     <div class="inputs">
       <div class="input-row">
-        <span
+        <label
           class="border-label"
           :class="{ 'is-setting': isBorderStyleSetting() }"
           @click="openSetting(BORDER_PROPERTY.BorderStyle, $event)"
-          >样式</span
         >
+          <span>样式</span>
+        </label>
         <div class="styles-container">
-          <button-group
+          <tabs-group-configurator
             :options="styleOptions"
             :modelValue="styleValue"
+            label-width="30"
+            :effect="effect"
+            :placement="placement"
             @update:modelValue="(value) => selectBorderStyle(value)"
-          ></button-group>
+          ></tabs-group-configurator>
         </div>
       </div>
       <div class="input-row">
-        <span
+        <label
           class="border-label"
           :class="{ 'is-setting': isBorderWidthSetting() }"
           @click="openSetting(BORDER_PROPERTY.BorderWidth, $event)"
-          >宽度</span
         >
+          <span>宽度</span>
+        </label>
         <numeric-select
           :name="borderWidthValue.name"
           :numericalText="borderWidthValue.text"
@@ -167,12 +173,13 @@
         />
       </div>
       <div class="input-row">
-        <span
+        <label
           class="border-label"
           :class="{ 'is-setting': isBorderColorSetting() }"
           @click="openSetting(BORDER_PROPERTY.BorderColor, $event)"
-          >颜色</span
         >
+          <span>颜色</span>
+        </label>
         <color-configurator :modelValue="borderColorValue" @change="changeBorderColor"></color-configurator>
       </div>
     </div>
@@ -190,7 +197,7 @@ import ModalMask, { useModal } from '../inputs/ModalMask.vue'
 import NumericSelect from '../inputs/NumericSelect.vue'
 import ResetButton from '../inputs/ResetButton.vue'
 import ButtonGroup from '../buttons/ButtonGroup.vue'
-import { ColorConfigurator, SliderConfigurator } from '@opentiny/tiny-engine-configurator'
+import { ColorConfigurator, SliderConfigurator, TabsGroupConfigurator } from '@opentiny/tiny-engine-configurator'
 import useEvent from '../../js/useEvent'
 import { useProperties } from '../../js/useStyle'
 import { RADIUS_SETTING, BORDER_SETTING, BORDER_STYLE_TYPE } from '../../js/cssType'
@@ -223,6 +230,7 @@ const BORDER_COLOR = {
 export default {
   components: {
     SliderConfigurator,
+    TabsGroupConfigurator,
     ModalMask,
     ResetButton,
     ColorConfigurator,
@@ -399,10 +407,10 @@ export default {
     }
 
     const styleOptions = [
-      { icon: 'cross', value: BORDER_STYLE_TYPE.None, tip: 'none-无' },
-      { icon: 'border-style-solid', value: BORDER_STYLE_TYPE.Solid, tip: 'solid-实线' },
-      { icon: 'border-style-dashed', value: BORDER_STYLE_TYPE.Dashed, tip: 'dashed-虚线' },
-      { icon: 'border-style-dotted', value: BORDER_STYLE_TYPE.Dotted, tip: 'dotted-圆点' }
+      { icon: 'cross', value: BORDER_STYLE_TYPE.None, content: 'none-无' },
+      { icon: 'border-style-solid', value: BORDER_STYLE_TYPE.Solid, content: 'solid-实线' },
+      { icon: 'border-style-dashed', value: BORDER_STYLE_TYPE.Dashed, content: 'dashed-虚线' },
+      { icon: 'border-style-dotted', value: BORDER_STYLE_TYPE.Dotted, content: 'dotted-圆点' }
     ]
 
     const styleValue = computed(() => {
@@ -569,11 +577,6 @@ export default {
     padding: 0 2px;
     line-height: 24px;
     color: var(--ti-lowcode-component-setting-panel-label-color);
-
-    &.is-setting {
-      color: var(--ti-lowcode-style-setting-label-color);
-      background: var(--ti-lowcode-style-setting-label-bg);
-    }
   }
 
   .radius-content {
@@ -626,6 +629,13 @@ export default {
   }
 }
 
+.border-label,
+.radius-label {
+  span {
+    padding: 2px;
+  }
+}
+
 .radius-multiple-container {
   flex: 1;
   display: grid;
@@ -645,6 +655,10 @@ export default {
 .border-label {
   color: var(--te-common-text-secondary);
   flex-shrink: 0;
+
+  .border-title {
+    margin-left: 2px;
+  }
 }
 .border-container {
   display: flex;
@@ -707,8 +721,11 @@ export default {
 }
 
 .is-setting {
-  color: var(--ti-lowcode-style-setting-label-color);
-  background: var(--ti-lowcode-style-setting-label-bg);
-  padding: 2px;
+  span {
+    border-radius: 2px;
+    color: var(--ti-lowcode-style-setting-label-color);
+    background: var(--ti-lowcode-style-setting-label-bg);
+    cursor: pointer;
+  }
 }
 </style>
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index 70630c262..b9af5b6ed 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -490,6 +490,7 @@ const handleDeleteCurSelector = () => {
 .selector-container {
   display: flex;
   margin-top: 10px;
+  height: 24px;
   color: var(--ti-lowcode-className-selector-container-color);
 
   .selector-right-container {
@@ -502,17 +503,18 @@ const handleDeleteCurSelector = () => {
   }
   .selector-right-container-wrap {
     display: flex;
+    height: 24px;
   }
   .className-selector-wrap {
     max-width: 180px;
     min-width: 0;
   }
   :deep(.editor-wrap) {
-    width: 30px;
+    width: 24px;
   }
   .edit-global-css {
     display: flex;
-    padding: 7px;
+    padding: 3px;
     border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
     border-radius: 6px;
     cursor: pointer;
@@ -522,7 +524,6 @@ const handleDeleteCurSelector = () => {
     display: flex;
     row-gap: 2px;
     align-items: center;
-    flex-wrap: wrap;
     max-width: 180px;
     min-width: 0;
     padding: 1px 10px;
@@ -555,9 +556,9 @@ const handleDeleteCurSelector = () => {
         align-items: center;
         background-color: var(--ti-lowcode-className-selector-container-label-bg-color);
         color: var(--ti-lowcode-className-selector-container-label-color);
-        padding: 1px 4px;
+        padding: 0 4px;
         border-radius: 4px;
-        line-height: 26px;
+        line-height: 18px;
         .selector-label-text {
           outline: none;
           overflow: hidden;
@@ -591,7 +592,7 @@ const handleDeleteCurSelector = () => {
       color: var(--ti-lowcode-className-selector-container-color);
       min-width: 0;
       flex: 0 0 0;
-      line-height: 28px;
+      line-height: 24px;
       z-index: 1;
       border: none;
       outline: none;
@@ -635,7 +636,7 @@ const handleDeleteCurSelector = () => {
     .selector-dropdown-list-tips {
       font-size: 12px;
       padding: 0 10px;
-      line-height: 32px;
+      line-height: 24px;
       color: var(--ti-lowcode-className-selector-dropdown-list-tips-color);
     }
 
@@ -648,7 +649,7 @@ const handleDeleteCurSelector = () => {
 
     .exist-class-item {
       cursor: pointer;
-      height: 32px;
+      height: 24px;
       padding: 0 16px;
       display: flex;
       align-items: center;
@@ -677,6 +678,11 @@ const handleDeleteCurSelector = () => {
       padding-right: 30px;
       border: none;
       font-size: 12px;
+      height: 22px;
+      border-radius: 6px;
+    }
+    :deep(.tiny-input__suffix) {
+      top: 10px;
     }
   }
 }
diff --git a/packages/settings/styles/src/components/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue
index 1d01cd41e..7fc575ec9 100644
--- a/packages/settings/styles/src/components/effects/EffectGroup.vue
+++ b/packages/settings/styles/src/components/effects/EffectGroup.vue
@@ -3,8 +3,9 @@
     <label
       :class="['opacity-label', { 'is-setting': getSettingFlag(EFFECTS_PROPERTY.Opacity) }]"
       @click="openSetting(EFFECTS_PROPERTY.Opacity, $event)"
-      >透明度</label
     >
+      <span>透明度</span>
+    </label>
     <div>
       <slider-configurator
         :modelValue="state.opacity"
@@ -20,63 +21,44 @@
       :class="['outline-label', { 'is-setting': getSettingFlag(EFFECTS_PROPERTY.Outline) }]"
       @click="openSetting(EFFECTS_PROPERTY.Outline, $event)"
     >
-      轮廓
+      <span>轮廓</span>
     </label>
     <div class="outline-content">
-      <tiny-tooltip effect="dark" placement="top" content="none-无">
-        <div
-          :class="['outline-content-svg', { selected: isOutlineStyleSelected(BORDER_STYLE_TYPE.None) }]"
-          @click="selectOutlineStyle(BORDER_STYLE_TYPE.None)"
-        >
-          <svg-icon name="cross"></svg-icon>
-        </div>
-      </tiny-tooltip>
-      <tiny-tooltip effect="dark" placement="top" content="solid-实线">
-        <div
-          :class="['outline-content-svg', { selected: isOutlineStyleSelected(BORDER_STYLE_TYPE.Solid) }]"
-          @click="selectOutlineStyle(BORDER_STYLE_TYPE.Solid)"
-        >
-          <svg-icon name="border-style-solid"></svg-icon>
-        </div>
-      </tiny-tooltip>
-      <tiny-tooltip effect="dark" placement="top" content="dashed-虚线">
-        <div
-          :class="['outline-content-svg', { selected: isOutlineStyleSelected(BORDER_STYLE_TYPE.Dashed) }]"
-          @click="selectOutlineStyle(BORDER_STYLE_TYPE.Dashed)"
-        >
-          <svg-icon name="border-style-dashed"></svg-icon>
-        </div>
-      </tiny-tooltip>
-      <tiny-tooltip effect="dark" placement="top" content="dotted-圆点">
-        <div
-          :class="['outline-content-svg', { selected: isOutlineStyleSelected(BORDER_STYLE_TYPE.Dotted) }]"
-          @click="selectOutlineStyle(BORDER_STYLE_TYPE.Dotted)"
-        >
-          <svg-icon name="border-style-dotted"></svg-icon>
-        </div>
-      </tiny-tooltip>
+      <tabs-group-configurator
+        :options="outlineOptions"
+        :modelValue="state.activedType"
+        label-width="52"
+        effect="dark"
+        placement="top"
+        @update:modelValue="selectOutlineStyle"
+      ></tabs-group-configurator>
     </div>
     <div v-if="state.activedType && state.activedType !== 'none'" class="outline-setting">
-      <div class="outline-width">
-        <label>宽度</label>
-        <input-select
-          :modelValue="state.outlineWidth"
-          :suffixValue="state.outlineWidthSuffix"
-          :options="outlineSuffixOptions"
-          @input-change="outlineWidthChange"
-          @select-change="outlineWidthSuffixChange"
-        ></input-select>
-        <label>偏移</label>
-        <input-select
-          :modelValue="state.outlineOffset"
-          :suffixValue="state.outlineOffsetSuffix"
-          :options="outlineSuffixOptions"
-          @input-change="outlineOffsetChange"
-          @select-change="outlineOffsetSuffixChange"
-        ></input-select>
+      <div class="outline-row-wrap">
+        <div class="left outline-width">
+          <label class="outline-label"><span>宽度</span></label>
+          <input-select
+            :modelValue="state.outlineWidth"
+            :suffixValue="state.outlineWidthSuffix"
+            :options="outlineSuffixOptions"
+            @input-change="outlineWidthChange"
+            @select-change="outlineWidthSuffixChange"
+          ></input-select>
+        </div>
+        <div class="right outline-width">
+          <label class="outline-label"><span>偏移</span></label>
+          <input-select
+            :modelValue="state.outlineOffset"
+            :suffixValue="state.outlineOffsetSuffix"
+            :options="outlineSuffixOptions"
+            @input-change="outlineOffsetChange"
+            @select-change="outlineOffsetSuffixChange"
+          ></input-select>
+        </div>
       </div>
+
       <div class="outline-color">
-        <label>颜色</label>
+        <label class="outline-label"><span>颜色</span></label>
         <color-configurator :modelValue="state.outlineColor" @change="changeOutlineColor" />
       </div>
     </div>
@@ -85,8 +67,9 @@
     <label
       :class="['cursor-label', { 'is-setting': getSettingFlag(EFFECTS_PROPERTY.Cursor) }]"
       @click="openSetting(EFFECTS_PROPERTY.Cursor, $event)"
-      >光标</label
     >
+      <span>光标</span>
+    </label>
     <div>
       <tiny-select v-model="state.cursorValue" placeholder="请选择" @change="cursorChange">
         <tiny-option-group
@@ -112,8 +95,8 @@
 
 <script>
 import { reactive } from 'vue'
-import { Select, Option, OptionGroup, Tooltip } from '@opentiny/vue'
-import { ColorConfigurator, SliderConfigurator } from '@opentiny/tiny-engine-configurator'
+import { Select, Option, OptionGroup } from '@opentiny/vue'
+import { ColorConfigurator, SliderConfigurator, TabsGroupConfigurator } from '@opentiny/tiny-engine-configurator'
 import ModalMask, { useModal } from '../inputs/ModalMask.vue'
 import ResetButton from '../inputs/ResetButton.vue'
 import InputSelect from '../inputs/InputSelect.vue'
@@ -126,9 +109,9 @@ export default {
     TinySelect: Select,
     TinyOption: Option,
     TinyOptionGroup: OptionGroup,
-    TinyTooltip: Tooltip,
     SliderConfigurator,
     ColorConfigurator,
+    TabsGroupConfigurator,
     ModalMask,
     ResetButton,
     InputSelect
@@ -346,6 +329,29 @@ export default {
       }
     ]
 
+    const outlineOptions = [
+      {
+        icon: 'cross',
+        value: BORDER_STYLE_TYPE.None,
+        content: 'none-无'
+      },
+      {
+        icon: 'border-style-solid',
+        value: BORDER_STYLE_TYPE.Solid,
+        content: 'solid-实线'
+      },
+      {
+        icon: 'border-style-dashed',
+        value: BORDER_STYLE_TYPE.Dashed,
+        content: 'dashed-虚线'
+      },
+      {
+        icon: 'border-style-dotted',
+        value: BORDER_STYLE_TYPE.Dotted,
+        content: 'dotted-圆点'
+      }
+    ]
+
     const outlineSuffixOptions = [
       {
         label: 'PX',
@@ -435,10 +441,6 @@ export default {
       })
     }
 
-    const isOutlineStyleSelected = (type) => {
-      return state.activedType === type
-    }
-
     const selectOutlineStyle = (type) => {
       state.activedType = type
 
@@ -492,6 +494,7 @@ export default {
     return {
       state,
       cursorGroup,
+      outlineOptions,
       EFFECTS_PROPERTY,
       BORDER_STYLE_TYPE,
       outlineSuffixOptions,
@@ -500,7 +503,6 @@ export default {
       openSetting,
       reset,
       cursorChange,
-      isOutlineStyleSelected,
       selectOutlineStyle,
       outlineWidthChange,
       outlineWidthSuffixChange,
@@ -517,9 +519,12 @@ export default {
 .effect-group {
   display: grid;
   gap: 8px;
-  grid-template-columns: 44px auto;
+  grid-template-columns: 36px auto;
   align-items: center;
   margin-bottom: var(--te-common-vertical-item-spacing-normal);
+  span {
+    padding: 2px;
+  }
   &:last-child {
     margin-bottom: 0;
   }
@@ -530,8 +535,12 @@ export default {
   }
 
   .is-setting {
-    color: var(--ti-lowcode-style-setting-label-color);
-    background-color: var(--ti-lowcode-style-setting-label-bg);
+    span {
+      cursor: pointer;
+      border-radius: 2px;
+      color: var(--te-common-text-emphasize);
+      background-color: var(--ti-lowcode-style-setting-label-bg);
+    }
   }
 
   :deep(.slider-container) {
@@ -561,19 +570,47 @@ export default {
   }
   .outline-setting {
     grid-column: 1 / -1;
-    .outline-width {
+
+    .outline-row-wrap {
       display: grid;
-      grid-template-columns: 44px 1fr 1fr 1fr;
-      gap: 8px;
+      gap: 4px 20px;
+      grid-template-columns: 15px 1fr;
       align-items: center;
+      margin-bottom: var(--te-common-vertical-item-spacing-normal);
+      grid-template-columns: 45% auto;
+      .left {
+        display: grid;
+        align-items: center;
+        gap: 4px 20px;
+        grid-template-columns: 23px 1fr;
+      }
+      .right {
+        display: grid;
+        align-items: center;
+        gap: 4px 8px;
+        grid-template-columns: 40px 1fr;
+      }
     }
+
     .outline-color {
       display: grid;
-      grid-template-columns: 44px auto;
+      grid-template-columns: 36px auto;
       gap: 8px;
       align-items: center;
       margin-top: 8px;
     }
+    .outline-label {
+      margin-right: -16px;
+      line-height: 16px;
+      color: var(--ti-lowcode-component-setting-panel-label-color);
+      span {
+        padding: 2px;
+      }
+    }
   }
 }
+
+.opacity-wrap {
+  grid-template-columns: 40px auto;
+}
 </style>
diff --git a/packages/settings/styles/src/components/inputs/InputSelect.vue b/packages/settings/styles/src/components/inputs/InputSelect.vue
index 4ab77f47b..642a50a2a 100644
--- a/packages/settings/styles/src/components/inputs/InputSelect.vue
+++ b/packages/settings/styles/src/components/inputs/InputSelect.vue
@@ -55,7 +55,7 @@ export default {
       type: Array,
       default: () => [
         {
-          label: 'PX',
+          label: 'px',
           value: 'px'
         },
         {
@@ -63,11 +63,11 @@ export default {
           value: '%'
         },
         {
-          label: 'VW',
+          label: 'vw',
           value: 'vw'
         },
         {
-          label: 'VH',
+          label: 'vh',
           value: 'vh'
         }
       ]
@@ -166,14 +166,13 @@ export default {
     .tiny-input__inner {
       color: var(--ti-lowcode-text-color);
       padding: 2px 0;
-      border: none;
       font-size: 12px;
-      height: 24px;
+      border: none;
+      height: 20px;
       text-align: center;
       box-sizing: border-box;
       cursor: pointer;
       &:hover {
-        color: var(--ti-lowcode-tootip-input-color);
         background: var(--ti-lowcode-icon-hover-bg);
       }
     }
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 5bc33a035..5266892be 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -1,9 +1,13 @@
 <template>
-  <teleport to=".tiny-engine-right-wrap">
+  <teleport :to="teleport">
     <div class="modal-wrapper">
-      <div class="modal-mask" @click="$emit('close')"></div>
+      <div :class="[isAlignBody ? '' : 'modal-mask']" @click="$emit('close')"></div>
 
-      <div :style="{ top: modal.top - 30 + 'px' }" class="modal-content">
+      <div
+        ref="modalContent"
+        :style="{ top: `${topStyle}px` }"
+        :class="['modal-content', { 'align-body': isAlignBody }, { 'modal-padding': isAlignBody }]"
+      >
         <slot></slot>
       </div>
     </div>
@@ -11,7 +15,7 @@
 </template>
 
 <script>
-import { reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 
 const modal = reactive({
   left: 0,
@@ -38,9 +42,33 @@ export const useModal = () => {
 }
 
 export default {
-  setup() {
+  props: {
+    teleport: {
+      type: String,
+      default: '.tiny-engine-right-wrap'
+    }
+  },
+  setup(props) {
+    const isAlignBody = props.teleport === 'body'
+    const topStyle = ref(0)
+    const modalContent = ref(null)
+
+    const calculateTopStyle = (modalContent) => {
+      if (isAlignBody && modalContent) {
+        return modal.top < modalContent.offsetHeight ? 40 : modal.top - modalContent.offsetHeight + 40
+      }
+      return modal.top - 34
+    }
+
+    onMounted(() => {
+      topStyle.value = calculateTopStyle(modalContent.value)
+    })
+
     return {
-      modal
+      modal,
+      modalContent,
+      topStyle,
+      isAlignBody
     }
   }
 }
@@ -55,23 +83,32 @@ export default {
     bottom: 0;
     left: 0;
     background: rgba(0, 0, 0, 0.2);
-    z-index: 9999;
+    z-index: 999;
   }
 
   .modal-content {
     position: absolute;
     top: 0;
     left: 16px;
-    z-index: 10000;
+    z-index: 1000;
     padding: 8px;
     color: var(--ti-lowcode-toolbar-breadcrumb-color);
     border: 1px solid var(--ti-lowcode-tabs-border-color);
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
     border-radius: 8px;
-    background-color: var(--ti-lowcode-toolbar-bg);
+    background-color: var(--te-common-bg-default);
     overflow: auto;
     max-height: 100%;
     box-sizing: border-box;
   }
+  .modal-padding {
+    padding: var(--ti-modal-padding-y, 14px) var(--ti-modal-padding-x, 20px);
+  }
+  .align-body {
+    right: var(--modal-right-offset, 280px);
+    left: calc(
+      100% - var(--modal-right-offset, 287px) - var(--modal-right-offset, 280px) - var(--modal-spaceing, 16px)
+    );
+  }
 }
 </style>
diff --git a/packages/settings/styles/src/components/inputs/NumericSelect.vue b/packages/settings/styles/src/components/inputs/NumericSelect.vue
index 5586de8fe..b0a775bb3 100644
--- a/packages/settings/styles/src/components/inputs/NumericSelect.vue
+++ b/packages/settings/styles/src/components/inputs/NumericSelect.vue
@@ -1,27 +1,31 @@
 <template>
   <div :class="['style-numeric', { focus: focus }]">
-    <tiny-input
+    <tiny-numeric
       v-model="numericalModelValue"
       :placeholder="placeholder"
+      controls-position="right"
+      :unit="numericalSuffix"
+      :empty-value="null"
+      min="0"
+      allow-empty
+      @mouseover="isNumericHover = true"
+      @mouseleave="isNumericHover = false"
       @focus="focus = true"
       @blur="focus = false"
       @change="change"
     >
-      <template #suffix>
-        <span class="suffix">{{ numericalSuffix }}</span>
-      </template>
-    </tiny-input>
+    </tiny-numeric>
   </div>
 </template>
 
 <script>
 import { computed, ref, watch } from 'vue'
-import { Input } from '@opentiny/vue'
+import { Numeric } from '@opentiny/vue'
 import useEvent from '../../js/useEvent'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyNumeric: Numeric
   },
   props: {
     name: {
@@ -47,27 +51,30 @@ export default {
   },
   emits: useEvent(),
   setup(props, { emit }) {
-    const numericalModelValue = ref(String(props.numericalText || ''))
+    const numericalModelValue = ref(props.numericalText || null)
+    const isNumericHover = ref(false)
+    const focus = ref(false)
 
     const percentageReg = (val) => /^\d+(.\d+)?%$/.test(val)
     const numericalSuffix = computed(() => {
       const val = String(numericalModelValue.value).toLowerCase()
+      if (isNumericHover.value) {
+        return ''
+      }
       return val === 'auto' || val === 'none' || percentageReg(val) ? '-' : props.suffix
     })
 
     watch(
       () => props.numericalText,
       (newValue) => {
-        numericalModelValue.value = String(newValue || '')
+        numericalModelValue.value = newValue || null
       }
     )
 
-    const focus = ref(false)
-
-    const change = (value) => {
+    const change = () => {
       focus.value = false
-
-      if (value.trim().length === 0) {
+      numericalModelValue.value = String(numericalModelValue.value)
+      if (numericalModelValue.value.trim().length === 0) {
         emit('update', { [props.name]: null })
       }
 
@@ -86,6 +93,7 @@ export default {
     return {
       numericalModelValue,
       numericalSuffix,
+      isNumericHover,
       focus,
       change
     }
@@ -101,20 +109,30 @@ export default {
   border-radius: 3px;
   transition: 0.3s;
   &.focus {
-    border-color: var(--ti-lowcode-canvas-handle-hover-bg);
+    border-color: var(--te-common-border-default);
   }
+  :deep(.tiny-numeric) {
+    width: 100%;
+    .tiny-numeric__input-inner {
+      padding-right: 22px;
+    }
 
-  .suffix {
-    font-size: 12px;
-    color: var(--ti-lowcode-text-color);
+    .tiny-numeric__unit {
+      font-size: 12px;
+      color: var(--te-common-text-weaken);
+      background-color: var(--te-common-bg-default);
+    }
   }
-
-  :deep(.tiny-input-suffix) {
-    .tiny-input__inner {
-      padding: 0 20px 0 4px;
+  .suffix-wrap {
+    .suffix-text {
+      font-size: 12px;
+      color: var(--te-common-text-weaken);
     }
-    .tiny-input__suffix {
-      right: 4px;
+
+    &:hover {
+      .suffix-text {
+        display: none;
+      }
     }
   }
 }
diff --git a/packages/settings/styles/src/components/inputs/ResetButton.vue b/packages/settings/styles/src/components/inputs/ResetButton.vue
index c739468e4..d31556119 100644
--- a/packages/settings/styles/src/components/inputs/ResetButton.vue
+++ b/packages/settings/styles/src/components/inputs/ResetButton.vue
@@ -32,15 +32,15 @@ export default {
 <style lang="less" scoped>
 .reset-btn.tiny-button {
   display: block;
-  width: 100%;
   max-width: 100%;
   border: 0;
-  border: 1px solid var(--ti-lowcode-toolbar-border-color);
+  color: var(--te-common-text-primary);
+  border: 1px solid var(--te-common-border-active);
 }
 .reset-desc {
   display: block;
   padding: 8px 4px;
   text-align: center;
-  color: var(--ti-lowcode-common-third-text-color);
+  color: var(--te-common-text-description);
 }
 </style>
diff --git a/packages/settings/styles/src/components/layout/FlexBox.vue b/packages/settings/styles/src/components/layout/FlexBox.vue
index 1d8bdef59..8943495a6 100644
--- a/packages/settings/styles/src/components/layout/FlexBox.vue
+++ b/packages/settings/styles/src/components/layout/FlexBox.vue
@@ -248,6 +248,4 @@ export default {
 .flex-item :deep(.radio-button) {
   padding: 5px;
 }
-.is-setting {
-}
 </style>
diff --git a/packages/settings/styles/src/components/layout/LayoutGroup.vue b/packages/settings/styles/src/components/layout/LayoutGroup.vue
index c3736e97c..6d927efbd 100644
--- a/packages/settings/styles/src/components/layout/LayoutGroup.vue
+++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue
@@ -1,8 +1,14 @@
 <template>
   <div class="display-row">
-    <div :class="['display-label', { selected: display }]" @click="openDisplayModal($event)">排布</div>
+    <div :class="['display-label', { selected: picked }]" @click="openDisplayModal($event)">
+      <span>排布</span>
+    </div>
     <div class="display-content">
-      <radio-configurator :options="layoutOpts" :value="picked" @pickedChange="select"></radio-configurator>
+      <tabs-group-configurator
+        :options="layoutOpts"
+        :modelValue="picked"
+        @update:modelValue="select"
+      ></tabs-group-configurator>
     </div>
   </div>
 
@@ -12,16 +18,16 @@
 </template>
 
 <script>
-import { ref, watch } from 'vue'
-import { DISPLAY_TYPE } from '../../js/cssType'
-import { RadioConfigurator } from '@opentiny/tiny-engine-configurator'
+import { ref, computed } from 'vue'
+import { DISPLAY_TYPE, DISPLAY_TEXT } from '../../js/cssType'
+import { TabsGroupConfigurator } from '@opentiny/tiny-engine-configurator'
 import useEvent from '../../js/useEvent'
 import ResetButton from '../inputs/ResetButton.vue'
 import ModalMask, { useModal } from '../inputs/ModalMask.vue'
 
 export default {
   components: {
-    RadioConfigurator,
+    TabsGroupConfigurator,
     ModalMask,
     ResetButton
   },
@@ -47,16 +53,9 @@ export default {
   setup(props, { emit }) {
     const { setPosition } = useModal()
 
-    const picked = ref(props.display)
+    const picked = computed(() => props.display)
     const showModal = ref(false)
 
-    watch(
-      () => props.display,
-      () => {
-        picked.value = props.display
-      }
-    )
-
     const select = (type) => {
       picked.value = type
       if (type && !props.disabled[type]) {
@@ -72,47 +71,40 @@ export default {
     }
 
     const reset = () => {
-      picked.value = ''
-      emit('update', { display: '' })
+      picked.value = null
+      emit('update', { display: null })
       showModal.value = false
     }
 
     const layoutOpts = ref([
       {
         value: DISPLAY_TYPE.Block,
-        title: '',
-        tip: 'block-块级布局',
-        icon: 'display-block'
+        label: DISPLAY_TEXT.Block
       },
       {
         value: DISPLAY_TYPE.Flex,
-        title: '',
-        tip: 'flex-弹性布局',
-        icon: 'display-flex'
+        label: DISPLAY_TEXT.Flex
       },
       {
         value: DISPLAY_TYPE.Grid,
-        title: '',
-        tip: 'grid-网格布局',
-        icon: 'display-grid'
+        label: DISPLAY_TEXT.Grid,
+        collapsed: true
       },
+
       {
         value: DISPLAY_TYPE.InlineBlock,
-        title: '',
-        tip: 'inline-block-内联块级',
-        icon: 'display-inline-block'
+        label: DISPLAY_TEXT.InlineBlock,
+        collapsed: true
       },
       {
         value: DISPLAY_TYPE.Inline,
-        title: '',
-        tip: 'inline-内联',
-        icon: 'display-inline'
+        label: DISPLAY_TEXT.Inline,
+        collapsed: true
       },
       {
         value: DISPLAY_TYPE.Invisible,
-        title: '',
-        tip: 'eye-invisible-隐藏',
-        icon: 'eye-invisible'
+        label: DISPLAY_TEXT.Invisible,
+        collapsed: true
       }
     ])
 
@@ -138,7 +130,16 @@ export default {
     padding: 0 3px;
     line-height: 24px;
 
+    span {
+      padding: 2px;
+    }
     &.selected {
+      span {
+        cursor: pointer;
+        border-radius: 2px;
+        color: var(--te-common-text-emphasize);
+        background-color: var(--ti-lowcode-style-setting-label-bg);
+      }
     }
   }
 
diff --git a/packages/settings/styles/src/components/position/PositionGroup.vue b/packages/settings/styles/src/components/position/PositionGroup.vue
index 376787046..671173925 100644
--- a/packages/settings/styles/src/components/position/PositionGroup.vue
+++ b/packages/settings/styles/src/components/position/PositionGroup.vue
@@ -5,7 +5,7 @@
       title="position"
       @click="openSetting(POSITION_PROPERTY.Position, $event)"
     >
-      定位
+      <span>定位</span>
     </div>
     <div class="position-select">
       <select-configurator
@@ -457,6 +457,11 @@ export default {
   gap: 8px;
   grid-template-columns: 48px 1fr;
   align-items: center;
+
+  span {
+    padding: 2px;
+  }
+
   .position-label {
     color: var(--ti-lowcode-component-setting-panel-label-color);
   }
@@ -594,8 +599,12 @@ export default {
     }
   }
   .is-setting {
-    color: var(--ti-lowcode-style-setting-label-color);
-    background-color: var(--ti-lowcode-style-setting-label-bg);
+    span {
+      cursor: pointer;
+      border-radius: 2px;
+      color: var(--te-common-text-emphasize);
+      background-color: var(--ti-lowcode-style-setting-label-bg);
+    }
   }
   .lr-path-color {
     color: var(--ti-lowcode-spacing-lr-color);
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 2d208d2bc..89ab3a67a 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -5,7 +5,7 @@
         :class="['size-label', { 'is-setting': getSettingFlag(SIZE_PROPERTY.Width) }]"
         @click="openSetting(SIZE_PROPERTY.Width, $event)"
       >
-        宽(W)
+        <span>宽度</span>
       </div>
       <numeric-select
         :name="getProperty(SIZE_PROPERTY.Width).name"
@@ -18,7 +18,7 @@
         :class="['size-label', { 'is-setting': getSettingFlag(SIZE_PROPERTY.Height) }]"
         @click="openSetting(SIZE_PROPERTY.Height, $event)"
       >
-        高(H)
+        <span>高度</span>
       </div>
       <numeric-select
         :name="getProperty(SIZE_PROPERTY.Height).name"
@@ -33,7 +33,7 @@
         :class="['size-label', { 'is-setting': getSettingFlag(SIZE_PROPERTY.MinWidth) }]"
         @click="openSetting(SIZE_PROPERTY.MinWidth, $event)"
       >
-        最小宽
+        <span>最小宽</span>
       </div>
       <numeric-select
         :name="getProperty(SIZE_PROPERTY.MinWidth).name"
@@ -46,7 +46,7 @@
         :class="['size-label', { 'is-setting': getSettingFlag(SIZE_PROPERTY.MinHeight) }]"
         @click="openSetting(SIZE_PROPERTY.MinHeight, $event)"
       >
-        最小高
+        <span>最小高</span>
       </div>
       <numeric-select
         :name="getProperty(SIZE_PROPERTY.MinHeight).name"
@@ -61,7 +61,7 @@
         :class="['size-label', { 'is-setting': getSettingFlag(SIZE_PROPERTY.MaxWidth) }]"
         @click="openSetting(SIZE_PROPERTY.MaxWidth, $event)"
       >
-        最大宽
+        <span>最大宽</span>
       </div>
       <numeric-select
         :name="getProperty(SIZE_PROPERTY.MaxWidth).name"
@@ -74,7 +74,7 @@
         :class="['size-label', { 'is-setting': getSettingFlag(SIZE_PROPERTY.MaxHeight) }]"
         @click="openSetting(SIZE_PROPERTY.MaxHeight, $event)"
       >
-        最大高
+        <span>最大高</span>
       </div>
       <numeric-select
         :name="getProperty(SIZE_PROPERTY.MaxHeight).name"
@@ -86,56 +86,34 @@
 
   <div class="overflow-row">
     <div
-      :class="['overflow-label', { 'is-setting': getSettingFlag(SIZE_PROPERTY.Overflow) }]"
+      :class="[
+        'overflow-label',
+        { 'is-setting': getSettingFlag(SIZE_PROPERTY.Overflow), selected: Boolean(selectedOverflow) }
+      ]"
       @click="openSetting(SIZE_PROPERTY.Overflow, $event)"
     >
-      溢出
-    </div>
-    <div class="overflow-content">
-      <tiny-tooltip :effect="effect" :placement="placement" content="visible 溢出可见">
-        <div
-          :class="['overflow-content-item', { selected: isOverflowSelected(OVERFLOW_TYPE.Visible) }]"
-          @click="selectOverflow(OVERFLOW_TYPE.Visible)"
-        >
-          <svg-icon name="eye" class="overflow-svg"></svg-icon>
-        </div>
-      </tiny-tooltip>
-
-      <tiny-tooltip :effect="effect" :placement="placement" content="hidden 溢出隐藏">
-        <div
-          :class="['overflow-content-item', { selected: isOverflowSelected(OVERFLOW_TYPE.Hidden) }]"
-          @click="selectOverflow(OVERFLOW_TYPE.Hidden)"
-        >
-          <svg-icon name="eye-invisible" class="overflow-svg"></svg-icon>
-        </div>
-      </tiny-tooltip>
-
-      <tiny-tooltip :effect="effect" :placement="placement" content="overflow 溢出滚动">
-        <div
-          :class="['overflow-content-item', { selected: isOverflowSelected(OVERFLOW_TYPE.Scroll) }]"
-          @click="selectOverflow(OVERFLOW_TYPE.Scroll)"
-        >
-          <svg-icon name="overflow-scroll" class="overflow-svg"></svg-icon>
-        </div>
-      </tiny-tooltip>
-      <tiny-tooltip :effect="effect" :placement="placement" content="auto 溢出才自动滚动">
-        <div
-          :class="['overflow-content-item', { selected: isOverflowSelected(OVERFLOW_TYPE.Auto) }]"
-          @click="selectOverflow(OVERFLOW_TYPE.Auto)"
-        >
-          <div class="overflow-auto">Auto</div>
-        </div>
-      </tiny-tooltip>
+      <span>溢出</span>
     </div>
+    <tabs-group-configurator
+      :options="overflowOpt"
+      :modelValue="selectedOverflow"
+      :label-width="50"
+      :effect="effect"
+      :placement="placement"
+      @update:modelValue="selectOverflow"
+    ></tabs-group-configurator>
   </div>
 
   <div class="fit-row">
     <div
-      :class="['fit-label', { 'is-setting': getSettingFlag(SIZE_PROPERTY.ObjectFit) }]"
+      :class="[
+        'fit-label',
+        { 'is-setting': getSettingFlag(SIZE_PROPERTY.ObjectFit), selected: state.value !== 'object-fit:fill' }
+      ]"
       title="object-fit"
       @click="openSetting(SIZE_PROPERTY.ObjectFit, $event)"
     >
-      适应
+      <span>适应</span>
     </div>
     <div class="fit-select">
       <select-configurator
@@ -211,10 +189,10 @@
 </template>
 
 <script>
-import { reactive, ref } from 'vue'
+import { reactive, ref, computed } from 'vue'
 import { Tooltip, Popover, Input } from '@opentiny/vue'
 import { MaskModal } from '@opentiny/tiny-engine-common'
-import { SelectConfigurator } from '@opentiny/tiny-engine-configurator'
+import { SelectConfigurator, TabsGroupConfigurator } from '@opentiny/tiny-engine-configurator'
 import { iconEllipsis } from '@opentiny/vue-icon'
 import ModalMask, { useModal } from '../inputs/ModalMask.vue'
 import ResetButton from '../inputs/ResetButton.vue'
@@ -230,6 +208,7 @@ export default {
     ResetButton,
     NumericSelect,
     SelectConfigurator,
+    TabsGroupConfigurator,
     MaskModal,
     TinyPopover: Popover,
     TinyInput: Input,
@@ -331,6 +310,28 @@ export default {
         top: '100'
       }
     ]
+    const overflowOpt = [
+      {
+        icon: 'eye',
+        content: 'visible 溢出可见',
+        value: OVERFLOW_TYPE.Visible
+      },
+      {
+        icon: 'eye-invisible',
+        content: 'hidden 溢出隐藏',
+        value: OVERFLOW_TYPE.Hidden
+      },
+      {
+        icon: 'overflow-scroll',
+        content: 'overflow 溢出滚动',
+        value: OVERFLOW_TYPE.Scroll
+      },
+      {
+        label: 'Auto',
+        content: 'auto 溢出才自动滚动',
+        value: OVERFLOW_TYPE.Auto
+      }
+    ]
     const showModal = ref(false)
     const { setPosition } = useModal()
     const state = reactive({
@@ -348,6 +349,10 @@ export default {
       parseNumber: true
     })
 
+    const selectedOverflow = computed(() => {
+      return getPropertyValue(SIZE_PROPERTY.Overflow)
+    })
+
     const updateStyle = (property) => {
       emit('update', property)
     }
@@ -380,8 +385,6 @@ export default {
       }
     }
 
-    const isOverflowSelected = (type) => type === getPropertyValue(SIZE_PROPERTY.Overflow)
-
     const showPopover = () => {
       state.flag = true
       state.disabled = true
@@ -425,6 +428,8 @@ export default {
       SIZE_PROPERTY,
       selectOptions,
       originOptions,
+      overflowOpt,
+      selectedOverflow,
       reset,
       showModal,
       updateStyle,
@@ -432,7 +437,6 @@ export default {
       getProperty,
       getSettingFlag,
       selectOverflow,
-      isOverflowSelected,
       showPopover,
       hidePopover,
       selectOrigin,
@@ -445,6 +449,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+span {
+  padding: 2px;
+}
 .size-row {
   display: flex;
   margin-bottom: var(--te-common-vertical-item-spacing-normal);
@@ -464,7 +471,7 @@ export default {
       padding-left: 2px;
       margin-right: 2px;
       line-height: 28px;
-      color: var(--ti-lowcode-component-setting-panel-label-color);
+      color: var(--te-common-text-secondary);
     }
   }
 }
@@ -480,49 +487,22 @@ export default {
     flex: 0 0 54px;
     padding: 0 2px;
     line-height: 24px;
-
-    &.selected {
-      color: var(--ti-lowcode-style-setting-label-color);
-      background-color: var(--ti-lowcode-style-setting-label-bg);
-    }
   }
+}
 
-  .overflow-content {
-    display: flex;
-
-    .overflow-content-item {
-      min-width: 30px;
-      flex: 1;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 4px 0;
-      font-size: 16px;
-      color: var(--ti-lowcode-component-setting-panel-icon-color);
-      position: relative;
-
-      &:hover {
-        color: var(--ti-lowcode-property-hover-color);
-      }
-
-      &.selected {
-        color: var(--ti-lowcode-property-active-color);
-      }
-
-      .overflow-svg {
-        margin: auto;
-      }
+.selected-label {
+  cursor: pointer;
+  border-radius: 2px;
+  color: var(--te-common-text-emphasize);
+  background-color: var(--ti-lowcode-style-setting-label-bg);
+}
 
-      .overflow-auto {
-        cursor: default;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        text-align: center;
-        font-size: 14px;
-      }
-    }
+.is-setting {
+  span {
+    .selected-label();
   }
 }
+
 .size-fit-content {
   display: block;
   padding: 10px;
@@ -544,7 +524,7 @@ export default {
         .size-label {
           padding-right: 5px;
           display: inline-block;
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
+          color: var(--te-common-text-secondary);
         }
 
         :deep(.tiny-input) {
@@ -566,6 +546,14 @@ export default {
     flex: 0 0 54px;
     padding: 0 2px;
     line-height: 28px;
+    span {
+      padding: 2px;
+    }
+    &.selected {
+      span {
+        .selected-label();
+      }
+    }
   }
   .more-icon-wrap {
     display: flex;
@@ -580,8 +568,7 @@ export default {
     &.selected {
       background: var(--ti-lowcode-more-icon-selected-bg);
       &.is-setting {
-        color: var(--ti-lowcode-style-setting-label-color);
-        background-color: var(--ti-lowcode-style-setting-label-bg);
+        .selected-label();
       }
     }
   }
diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
index a7703b39e..347d44111 100644
--- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
@@ -1,18 +1,23 @@
 <template>
   <div class="spacing-wrap">
     <div class="spacing-max-icon">
-      <svg xmlns="http://www.w3.org/2000/svg" width="224" height="120" style="grid-area: 1 / 1 / -1 / -1">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="#F5F5F5"
+        width="256"
+        height="120"
+        style="grid-area: 1 / 1 / -1 / -1"
+      >
         <g>
           <g>
             <path
               mode="delta"
-              fill="currentColor"
               d="
-              m1,1
-              h223
-              l-36,24
+              m0,0
+              h256
+              l-36,25
               h-151
-              l-36,-24z
+              l-36,-25z
             "
               data-automation-id="margin-top-button"
               aria-label="Margin top button"
@@ -25,13 +30,12 @@
           <g>
             <path
               mode="delta"
-              fill="currentColor"
               d="
-              m223,1
-              v119
-              l-36,-24
+              m256,0
+              v120
+              l-45,-24
               v-71
-              l36,-24z
+              l45,-24z
             "
               data-automation-id="margin-right-button"
               aria-label="Margin right button"
@@ -44,13 +48,12 @@
           <g>
             <path
               mode="delta"
-              fill="currentColor"
               d="
-              m1,119
-              h223
-              l-36,-24
+              m0,120
+              h256
+              l-36,-25
               h-151
-              l-36,24z
+              l-36,25z
             "
               data-automation-id="margin-bottom-button"
               aria-label="Margin bottom button"
@@ -63,13 +66,12 @@
           <g>
             <path
               mode="delta"
-              fill="currentColor"
               d="
-              m1,1
-              v119
-              l36,-24
+              m0,0
+              v120
+              l45,-24
               v-71
-              l-36,-24z
+              l-45,-24z
             "
               data-automation-id="margin-left-button"
               aria-label="Margin left button"
@@ -79,52 +81,34 @@
           </g>
         </g>
         <clipPath id="margin-outer">
-          <rect
-            x="0"
-            y="0"
-            width="224"
-            height="120"
-            fill="transparent"
-            rx="2"
-            ry="2"
-            style="pointer-events: none"
-          ></rect>
+          <rect x="0" y="0" width="256" height="120" fill="#F5F5F5" rx="4" ry="4" style="pointer-events: none"></rect>
         </clipPath>
         <rect
           class="stroke"
           clip-path="url(#margin-outer)"
           x="0"
           y="0"
-          width="224"
+          width="256"
           height="120"
-          fill="transparent"
-          rx="2"
-          ry="2"
-          style="pointer-events: none; stroke-width: 2px"
+          fill="#F5F5F5"
+          rx="4"
+          ry="4"
+          style="pointer-events: none; stroke-width: 0"
         ></rect>
         <clipPath id="margin-inner">
-          <rect
-            x="36"
-            y="24"
-            width="152"
-            height="72"
-            fill="transparent"
-            rx="2"
-            ry="2"
-            style="pointer-events: none"
-          ></rect>
+          <rect x="45" y="25" width="168" height="70" fill="#E6E6E6" rx="4" ry="4" style="pointer-events: none"></rect>
         </clipPath>
         <rect
           class="stroke"
           clip-path="url(#margin-inner)"
-          x="36"
-          y="24"
-          width="152"
-          height="72"
-          fill="transparent"
-          rx="2"
-          ry="2"
-          style="pointer-events: none; stroke-width: 2px"
+          x="45"
+          y="25"
+          width="168"
+          height="70"
+          fill="#E6E6E6"
+          rx="4"
+          ry="4"
+          style="pointer-events: none; stroke-width: 0"
         ></rect>
       </svg>
       <div
@@ -181,18 +165,17 @@
       </div>
     </div>
     <div class="spacing-min-icon">
-      <svg xmlns="http://www.w3.org/2000/svg" width="144" height="64" style="grid-area: 1 / 1 / -1 / -1">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="#F5F5F5" width="168" height="70" style="grid-area: 1 / 1 / -1 / -1">
         <g>
           <g>
             <path
               mode="delta"
-              fill="currentColor"
               d="
-              m1,1
-              h143
-              l-36,24
+              m5,-4
+              h168
+              l-36,25
               h-71
-              l-36,-24z
+              l-36,-25z
             "
               data-automation-id="padding-top-button"
               aria-label="Padding top button"
@@ -205,13 +188,12 @@
           <g>
             <path
               mode="delta"
-              fill="currentColor"
               d="
-              m143,1
-              v63
-              l-36,-24
+              m173,-4
+              v70
+              l-60,-24
               v-15
-              l36,-24z
+              l60,-24z
             "
               data-automation-id="padding-right-button"
               aria-label="Padding right button"
@@ -224,13 +206,12 @@
           <g>
             <path
               mode="delta"
-              fill="currentColor"
               d="
-              m1,63
-              h143
-              l-36,-24
+              m5,66
+              h168
+              l-36,-25
               h-71
-              l-36,24z
+              l-36,25z
             "
               data-automation-id="padding-bottom-button"
               aria-label="Padding bottom button"
@@ -243,13 +224,12 @@
           <g>
             <path
               mode="delta"
-              fill="currentColor"
               d="
-              m1,1
-              v63
-              l36,-24
+              m5,-4
+              v70
+              l60,-24
               v-15
-              l-36,-24z
+              l-60,-24z
             "
               data-automation-id="padding-left-button"
               aria-label="Padding left button"
@@ -259,52 +239,34 @@
           </g>
         </g>
         <clipPath id="padding-outer">
-          <rect
-            x="0"
-            y="0"
-            width="144"
-            height="64"
-            fill="transparent"
-            rx="2"
-            ry="2"
-            style="pointer-events: none"
-          ></rect>
+          <rect x="5" y="-4" width="168" height="70" fill="#E6E6E6" rx="4" ry="4" style="pointer-events: none"></rect>
         </clipPath>
         <rect
           class="stroke"
           clip-path="url(#padding-outer)"
           x="0"
           y="0"
-          width="144"
-          height="64"
-          fill="transparent"
-          rx="2"
-          ry="2"
-          style="pointer-events: none; stroke-width: 2px"
+          width="168"
+          height="70"
+          fill="#E6E6E6"
+          rx="4"
+          ry="4"
+          style="pointer-events: none; stroke-width: 0"
         ></rect>
         <clipPath id="padding-inner">
-          <rect
-            x="36"
-            y="24"
-            width="72"
-            height="16"
-            fill="transparent"
-            rx="2"
-            ry="2"
-            style="pointer-events: none"
-          ></rect>
+          <rect x="64" y="25" width="48" height="20" fill="#FFF" rx="4" ry="4" style="pointer-events: none"></rect>
         </clipPath>
         <rect
           class="stroke"
           clip-path="url(#padding-inner)"
-          x="36"
-          y="24"
-          width="72"
-          height="16"
-          fill="transparent"
-          rx="2"
-          ry="2"
-          style="pointer-events: none; stroke-width: 2px"
+          x="64"
+          y="25"
+          width="48"
+          height="20"
+          fill="#FFF"
+          rx="4"
+          ry="4"
+          style="pointer-events: none; stroke-width: 0"
         ></rect>
       </svg>
       <div
@@ -366,9 +328,7 @@
       height="100%"
       style="grid-area: 3 / 3 / span 3 / span 3; pointer-events: none"
     >
-      <text x="6" y="4" fill="#a6a6a6" font-style="italic" font-weight="bold" font-size="8" dominant-baseline="hanging">
-        padding
-      </text>
+      <text x="12" y="4" fill="#808080" font-weight="normal" font-size="10" dominant-baseline="hanging">Padding</text>
     </svg>
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -376,9 +336,7 @@
       height="100%"
       style="grid-area: 1 / 1 / -1 / -1; pointer-events: none"
     >
-      <text x="6" y="4" fill="#a6a6a6" font-style="italic" font-weight="bold" font-size="8" dominant-baseline="hanging">
-        margin
-      </text>
+      <text x="12" y="4" fill="#808080" font-weight="normal" font-size="10" dominant-baseline="hanging">Margin</text>
     </svg>
   </div>
 
@@ -499,9 +457,9 @@ export default {
 .spacing-wrap {
   position: relative;
   display: grid;
-  grid-template-columns: 36px 4px 36px 1fr 36px 4px 36px;
-  grid-template-rows: 24px 4px 24px 1fr 24px 4px 24px;
-  width: 224px;
+  grid-template-columns: 45px 0px 60px 1fr 60px 0px 45px;
+  grid-template-rows: 25px 0px 25px 1fr 25px 0px 25px;
+  width: 256px;
   height: 120px;
   margin: 0 auto;
   outline-style: none;
@@ -511,21 +469,21 @@ export default {
   .spacing-max-icon {
     grid-area: 1 / 1 / -1 / -1;
     display: grid;
-    grid-template-columns: 36px 1fr 36px;
-    grid-template-rows: 24px minmax(16px, 1fr) 24px;
+    grid-template-columns: 45px 1fr 45px;
+    grid-template-rows: 25px minmax(16px, 1fr) 25px;
     justify-items: center;
-    width: 224px;
+    width: 256px;
     height: 120px;
   }
 
   .spacing-min-icon {
     grid-area: 3 / 3 / span 3 / span 3;
     display: grid;
-    grid-template-columns: 36px 1fr 36px;
-    grid-template-rows: 24px minmax(16px, 1fr) 24px;
+    grid-template-columns: 56px 54px 56px;
+    grid-template-rows: 25px minmax(16px, 1fr) 25px;
     justify-items: center;
-    width: 144px;
-    height: 64px;
+    width: 168px;
+    height: 70px;
   }
 
   .spacing-edit {
@@ -534,14 +492,14 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 10px;
+    font-size: 12px;
     font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
       'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
     font-weight: 400;
     line-height: 10px;
     letter-spacing: -0.2px;
     display: flex;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-base-text-color);
     background: transparent;
     padding: 2px 4px;
     margin-left: -2px;
@@ -559,7 +517,7 @@ export default {
     }
 
     &.is-show {
-      background-color: #6b6b6b;
+      background-color: var(--ti-lowcode-setting-style-spacing-bg);
     }
 
     &.margin-top,
diff --git a/packages/settings/styles/src/components/spacing/SpacingSetting.vue b/packages/settings/styles/src/components/spacing/SpacingSetting.vue
index 1e950ae87..c906e2dba 100644
--- a/packages/settings/styles/src/components/spacing/SpacingSetting.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingSetting.vue
@@ -21,7 +21,7 @@
       </ul>
     </div>
   </div>
-  <reset-button v-show="isReset" class="reset" @reset="reset" />
+  <reset-button v-show="isReset" @reset="reset" />
 </template>
 
 <script>
@@ -113,6 +113,8 @@ export default {
 
 <style lang="less" scoped>
 .content-wrap {
+  width: 236px;
+  margin-bottom: 10px;
   .content-input {
     display: flex;
     justify-content: flex-start;
@@ -230,8 +232,4 @@ export default {
     }
   }
 }
-
-.reset {
-  margin-top: 10px;
-}
 </style>
diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index ee508b26b..9d6c5ac13 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -1,26 +1,17 @@
 <template>
   <div class="typography-wrap">
-    <div class="typography-row split">
-      <div class="left typography-col">
+    <div class="typography-font-row split">
+      <div class="font-left typography-col">
         <label
-          :class="['typography-label', { 'is-setting': getSettingFlag(TYPO_PROPERTY.FontSize) }]"
-          @click="openSetting(TYPO_PROPERTY.FontSize, $event)"
-          >字号</label
+          :class="[
+            'typography-label',
+            { 'is-setting': getSettingFlag(TYPO_PROPERTY.FontWeight) || getSettingFlag(TYPO_PROPERTY.FontFamily) }
+          ]"
+          @click="openSetting(`${TYPO_PROPERTY.FontFamily},${TYPO_PROPERTY.FontWeight}`, $event)"
         >
-        <numeric-select
-          :name="getProperty(TYPO_PROPERTY.FontSize).name"
-          :numericalText="getProperty(TYPO_PROPERTY.FontSize).text"
-          @update="updateStyle"
-        />
-      </div>
+          <span>Font</span>
+        </label>
 
-      <div class="right typography-col">
-        <div
-          :class="['typography-label', { 'is-setting': getSettingFlag(TYPO_PROPERTY.FontFamily) }]"
-          @click="openSetting(TYPO_PROPERTY.FontFamily, $event)"
-        >
-          字体
-        </div>
         <div class="typography-select">
           <select-configurator
             v-model="state.fontFamilyValue"
@@ -32,166 +23,115 @@
           ></select-configurator>
         </div>
       </div>
+
+      <div class="font-right typography-col">
+        <div class="typography-select">
+          <select-configurator
+            v-model="state.value"
+            :options="selectOptions"
+            @update:modelValue="selectFontWeight"
+            allow-create
+            filterable
+            default-first-option
+          ></select-configurator>
+        </div>
+      </div>
     </div>
 
     <div class="typography-row split">
       <div class="left typography-col">
+        <label
+          :class="['typography-label', { 'is-setting': getSettingFlag(TYPO_PROPERTY.FontSize) }]"
+          @click="openSetting(TYPO_PROPERTY.FontSize, $event)"
+        >
+          <span>Size</span>
+        </label>
+
+        <numeric-select
+          :name="getProperty(TYPO_PROPERTY.FontSize).name"
+          :numericalText="getProperty(TYPO_PROPERTY.FontSize).text"
+          @update="updateStyle"
+        />
+      </div>
+
+      <div class="right typography-col">
         <label
           :class="['typography-label', { 'is-setting': getSettingFlag(TYPO_PROPERTY.LineHeight) }]"
           @click="openSetting(TYPO_PROPERTY.LineHeight, $event)"
-          >行高</label
         >
+          <span>Height</span>
+        </label>
         <numeric-select
           :name="getProperty(TYPO_PROPERTY.LineHeight).name"
           :numericalText="getProperty(TYPO_PROPERTY.LineHeight).text"
           @update="updateStyle"
         />
       </div>
+    </div>
 
-      <div class="right typography-col">
-        <div
-          :class="['typography-label', { 'is-setting': getSettingFlag(TYPO_PROPERTY.FontWeight) }]"
-          @click="openSetting(TYPO_PROPERTY.FontWeight, $event)"
+    <div class="typography-row">
+      <div class="left">
+        <label
+          :class="['typography-label', { 'is-setting': getSettingFlag(TYPO_PROPERTY.Color) }]"
+          @click="openSetting(TYPO_PROPERTY.Color, $event)"
         >
-          字重
-        </div>
-        <div class="typography-select">
-          <select-configurator
-            v-model="state.value"
-            :options="selectOptions"
-            @update:modelValue="selectFontWeight"
-            allow-create
-            filterable
-            default-first-option
-          ></select-configurator>
+          <span>Color</span>
+        </label>
+        <div class="color-wrap">
+          <color-configurator :modelValue="getProperty(TYPO_PROPERTY.Color).value" @change="changeColor" />
         </div>
       </div>
     </div>
-
     <div class="typography-row">
-      <label
-        :class="['typography-label', { 'is-setting': getSettingFlag(TYPO_PROPERTY.Color) }]"
-        @click="openSetting(TYPO_PROPERTY.Color, $event)"
-        >颜色</label
-      >
-      <color-configurator :modelValue="getProperty(TYPO_PROPERTY.Color).value" @change="changeColor" />
-    </div>
-    <div class="typography-row">
-      <label
-        :class="['typography-label', { 'is-setting': getSettingFlag(TYPO_PROPERTY.TextAlign) }]"
-        @click="openSetting(TYPO_PROPERTY.TextAlign, $event)"
-        >对齐</label
-      >
-      <div class="typography-content">
-        <tiny-tooltip :effect="effect" :placement="placement" content="Left-左对齐">
-          <div :class="['typography-content-item', { selected: isAlignSelected('left') }]" @click="selectAlign('left')">
-            <svg-icon name="text-align-left" class="bem-Svg"></svg-icon>
-          </div>
-        </tiny-tooltip>
-
-        <tiny-tooltip :effect="effect" :placement="placement" content="Center-居中对齐">
-          <div
-            :class="['typography-content-item', { selected: isAlignSelected('center') }]"
-            @click="selectAlign('center')"
-          >
-            <svg-icon name="text-align-center" class="bem-Svg"></svg-icon>
-          </div>
-        </tiny-tooltip>
-
-        <tiny-tooltip :effect="effect" :placement="placement" content="Right-右对齐">
-          <div
-            :class="['typography-content-item', { selected: isAlignSelected('right') }]"
-            @click="selectAlign('right')"
-          >
-            <svg-icon name="text-align-right" class="bem-Svg"></svg-icon>
-          </div>
-        </tiny-tooltip>
-
-        <tiny-tooltip :effect="effect" :placement="placement" content="Justify-两侧对齐">
-          <div
-            :class="['typography-content-item', { selected: isAlignSelected('justify') }]"
-            @click="selectAlign('justify')"
-          >
-            <svg-icon name="text-align-justify" class="bem-Svg"></svg-icon>
-          </div>
-        </tiny-tooltip>
+      <div class="left">
+        <label
+          :class="['typography-label', { 'is-setting': getSettingFlag(TYPO_PROPERTY.TextAlign) }]"
+          @click="openSetting(TYPO_PROPERTY.TextAlign, $event)"
+        >
+          <span>对齐</span>
+        </label>
       </div>
+      <tabs-group-configurator
+        :options="alignOptions"
+        :modelValue="selectedAlign"
+        :label-width="52"
+        :effect="effect"
+        :placement="placement"
+        @update:modelValue="selectAlign"
+      ></tabs-group-configurator>
     </div>
-    <div class="typography-row">
-      <label
-        :class="['typography-label', { 'is-setting': getSettingFlag(TYPO_PROPERTY.FontStyle) }]"
-        title="font-style"
-        @click="openSetting(TYPO_PROPERTY.FontStyle, $event)"
-        >风格</label
-      >
-      <div class="typography-style">
-        <div class="typography-content italicize">
-          <tiny-tooltip :effect="effect" :placement="placement" content="Regular-常规">
-            <div
-              :class="['typography-content-item', { selected: isFontStyleSelected('normal') }]"
-              @click="selectFontStyle('normal')"
-            >
-              <svg-icon name="font-style-none" class="bem-Svg"></svg-icon>
-            </div>
-          </tiny-tooltip>
-
-          <tiny-tooltip :effect="effect" :placement="placement" content="Italic-斜体">
-            <div
-              :class="['typography-content-item', { selected: isFontStyleSelected('italic') }]"
-              @click="selectFontStyle('italic')"
-            >
-              <svg-icon name="font-style-italic" class="bem-Svg"></svg-icon>
-            </div>
-          </tiny-tooltip>
-        </div>
+    <div class="typography-style-row">
+      <div class="style-left">
+        <label
+          :class="[
+            'typography-label',
+            { 'is-setting': getSettingFlag(TYPO_PROPERTY.FontStyle) || getSettingFlag(TYPO_PROPERTY.TextDecoration) }
+          ]"
+          title="font-style"
+          @click="openSetting(`${TYPO_PROPERTY.FontStyle},${TYPO_PROPERTY.TextDecoration}`, $event)"
+        >
+          <span>样式</span>
+        </label>
       </div>
-    </div>
-    <div class="typography-row">
-      <label
-        :class="['typography-label', { 'is-setting': getSettingFlag(TYPO_PROPERTY.TextDecoration) }]"
-        title="font-decoration"
-        @click="openSetting(TYPO_PROPERTY.TextDecoration, $event)"
-        >修饰</label
-      >
-      <div class="typography-content decoration">
-        <tiny-tooltip :effect="effect" :placement="placement" content="None-无">
-          <div
-            :class="['typography-content-item', { selected: isTextDecorationSelected('none') }]"
-            @click="selectTextDecoration('none')"
-          >
-            <svg-icon name="cross" class="bem-Svg"></svg-icon>
-          </div>
-        </tiny-tooltip>
-
-        <tiny-tooltip :effect="effect" :placement="placement" content="Strikethrough-删除线">
-          <div
-            :class="['typography-content-item', { selected: isTextDecorationSelected('line-through') }]"
-            @click="selectTextDecoration('line-through')"
-          >
-            <svg-icon name="text-decoration-strike" class="bem-Svg"></svg-icon>
-          </div>
-        </tiny-tooltip>
-
-        <tiny-tooltip :effect="effect" :placement="placement" content="Underline-下划线">
-          <div
-            :class="['typography-content-item', { selected: isTextDecorationSelected('underline') }]"
-            @click="selectTextDecoration('underline')"
-          >
-            <svg-icon name="text-decoration-underline" class="bem-Svg"></svg-icon>
-          </div>
-        </tiny-tooltip>
-
-        <tiny-tooltip :effect="effect" :placement="placement" content="Overline-上划线">
-          <div
-            :class="['typography-content-item', { selected: isTextDecorationSelected('overline') }]"
-            @click="selectTextDecoration('overline')"
-          >
-            <svg-icon name="text-decoration-overline" class="bem-Svg"></svg-icon>
-          </div>
-        </tiny-tooltip>
+      <div class="style-decoration-wrap">
+        <tabs-group-configurator
+          :options="styleOptions"
+          :modelValue="selectedFontStyle"
+          :label-width="32"
+          :effect="effect"
+          :placement="placement"
+          @update:modelValue="selectFontStyle"
+        ></tabs-group-configurator>
+        <tabs-group-configurator
+          :options="decorationOptions"
+          :modelValue="selectedTextDecoration"
+          :label-width="32"
+          :effect="effect"
+          :placement="placement"
+          @update:modelValue="selectTextDecoration"
+        ></tabs-group-configurator>
       </div>
     </div>
-
     <modal-mask v-if="showModal" @close="showModal = false">
       <reset-button @reset="reset" />
     </modal-mask>
@@ -200,9 +140,8 @@
 
 <script>
 import { ref, reactive } from 'vue'
-import { Tooltip } from '@opentiny/vue'
 import NumericSelect from '../inputs/NumericSelect.vue'
-import { ColorConfigurator, SelectConfigurator } from '@opentiny/tiny-engine-configurator'
+import { ColorConfigurator, SelectConfigurator, TabsGroupConfigurator } from '@opentiny/tiny-engine-configurator'
 import { TYPO_PROPERTY } from '../../js/styleProperty'
 import useEvent from '../../js/useEvent'
 import { useProperties } from '../../js/useStyle'
@@ -215,8 +154,8 @@ export default {
     ModalMask,
     ResetButton,
     ColorConfigurator,
-    TinyTooltip: Tooltip,
-    SelectConfigurator
+    SelectConfigurator,
+    TabsGroupConfigurator
   },
   props: {
     style: {
@@ -236,7 +175,7 @@ export default {
   setup(props, { emit }) {
     let activedName = ''
     const showModal = ref(false)
-    const { getProperty, getSettingFlag, getPropertyValue } = useProperties({
+    const { getProperty, getSettingFlag } = useProperties({
       names: Object.values(TYPO_PROPERTY),
       parseNumber: true
     })
@@ -373,8 +312,75 @@ export default {
       }
     ]
 
+    const alignOptions = [
+      {
+        icon: 'text-align-left',
+        content: 'Left-左对齐',
+        value: 'left'
+      },
+      {
+        icon: 'text-align-center',
+        content: 'Center-居中对齐',
+        value: 'center'
+      },
+      {
+        icon: 'text-align-right',
+        content: 'Right-右对齐',
+        value: 'right'
+      },
+      {
+        icon: 'text-align-justify',
+        content: 'Justify-两侧对齐',
+        value: 'justify'
+      }
+    ]
+
+    const styleOptions = [
+      {
+        icon: 'font-style-none',
+        content: 'Regular-常规',
+        value: 'normal'
+      },
+      {
+        icon: 'font-style-italic',
+        content: 'Italic-斜体',
+        value: 'italic'
+      }
+    ]
+
+    const decorationOptions = [
+      {
+        icon: 'cross',
+        content: 'None-无',
+        value: 'none'
+      },
+      {
+        icon: 'text-decoration-strike',
+        content: 'Strikethrough-删除线',
+        value: 'line-through'
+      },
+      {
+        icon: 'text-decoration-underline',
+        content: 'Underline-下划线',
+        value: 'underline'
+      },
+      {
+        icon: 'text-decoration-overline',
+        content: 'Overline-上划线',
+        value: 'overline'
+      }
+    ]
+
     const openSetting = (name, event) => {
-      if (getSettingFlag(name)) {
+      let hasSettingFlag = false
+      if (name.includes(',')) {
+        hasSettingFlag = name.split(',').some((item) => {
+          return getSettingFlag(item)
+        })
+      } else {
+        hasSettingFlag = Boolean(getSettingFlag(name))
+      }
+      if (hasSettingFlag) {
         setPosition(event)
         activedName = name
         showModal.value = true
@@ -386,13 +392,35 @@ export default {
       fontFamilyValue: 'Arial, "Helvetica Neue", Helvetica'
     })
 
+    const selectedAlign = ref('')
+
+    const selectedFontStyle = ref('')
+
+    const selectedTextDecoration = ref('')
+
     const updateStyle = (property) => {
       emit('update', property)
     }
 
     const reset = () => {
-      updateStyle({ [activedName]: null })
-      state.value = '400'
+      if (activedName.includes(',')) {
+        activedName.split(',').forEach((name) => {
+          updateStyle({ [name]: null })
+        })
+      } else {
+        updateStyle({ [activedName]: null })
+      }
+      if (activedName.includes(TYPO_PROPERTY.FontFamily) || activedName.includes(TYPO_PROPERTY.FontWeight)) {
+        state.value = '400'
+        state.fontFamilyValue = 'Arial, "Helvetica Neue", Helvetica'
+      }
+      if (activedName.includes(TYPO_PROPERTY.FontStyle) || activedName.includes(TYPO_PROPERTY.TextDecoration)) {
+        selectedFontStyle.value = ''
+        selectedTextDecoration.value = ''
+      }
+      if (activedName.includes(TYPO_PROPERTY.TextAlign)) {
+        selectedAlign.value = ''
+      }
       showModal.value = false
     }
 
@@ -405,26 +433,23 @@ export default {
       }
     }
 
-    const isAlignSelected = (type) => type === getPropertyValue(TYPO_PROPERTY.TextAlign)
-
     const selectAlign = (type) => {
       if (type) {
+        selectedAlign.value = type
         updateStyle({ 'text-align': type })
       }
     }
 
-    const isFontStyleSelected = (type) => type === getPropertyValue(TYPO_PROPERTY.FontStyle)
-
     const selectFontStyle = (type) => {
       if (type) {
+        selectedFontStyle.value = type
         updateStyle({ 'font-style': type })
       }
     }
 
-    const isTextDecorationSelected = (type) => type === getPropertyValue(TYPO_PROPERTY.TextDecoration)
-
     const selectTextDecoration = (type) => {
       if (type) {
+        selectedTextDecoration.value = type
         updateStyle({ 'text-decoration': type })
       }
     }
@@ -449,17 +474,20 @@ export default {
       getSettingFlag,
       updateStyle,
       changeColor,
-      isAlignSelected,
+      selectedAlign,
       selectAlign,
-      isFontStyleSelected,
+      selectedFontStyle,
       selectFontStyle,
+      selectedTextDecoration,
       selectTextDecoration,
-      isTextDecorationSelected,
       openSetting,
       selectOptions,
       state,
       selectFontWeight,
       fontFamilyOptions,
+      styleOptions,
+      decorationOptions,
+      alignOptions,
       selectFontFamily
     }
   }
@@ -468,6 +496,9 @@ export default {
 
 <style lang="less" scoped>
 .typography-wrap {
+  span {
+    padding: 2px;
+  }
   .typography-row {
     display: grid;
     gap: 4px 20px;
@@ -490,6 +521,14 @@ export default {
       margin-right: -16px;
       line-height: 16px;
       color: var(--ti-lowcode-component-setting-panel-label-color);
+
+      .font-family-col {
+        width: 118px;
+      }
+
+      .font-weight-col {
+        width: 84px;
+      }
     }
 
     .typography-content {
@@ -554,11 +593,11 @@ export default {
     }
 
     .left {
-      grid-template-columns: 15px 1fr;
+      grid-template-columns: 23px 1fr;
     }
 
     .right {
-      grid-template-columns: auto 1fr;
+      grid-template-columns: 40px 1fr;
       .typography-label {
         margin-right: 0;
       }
@@ -567,8 +606,69 @@ export default {
     & > div {
       width: 100%;
     }
+    .color-wrap {
+      width: 210px;
+    }
+  }
+
+  .typography-font-row {
+    display: grid;
+    gap: 4px 8px;
+    grid-template-columns: 63% 1fr;
+    align-items: center;
+    margin-bottom: 8px;
+
+    .font-left {
+      display: grid;
+      align-items: center;
+      gap: 4px 20px;
+    }
+    .font-right {
+      display: grid;
+      align-items: center;
+      gap: 4px 8px;
+    }
+
+    .font-left {
+      grid-template-columns: 23px 1fr;
+    }
+  }
+
+  .typography-style-row {
+    display: grid;
+    gap: 4px 20px;
+    grid-template-columns: 15px 1fr;
+    align-items: center;
+    margin-bottom: 8px;
+    color: var(--ti-lowcode-component-setting-panel-label-color);
+
+    .style-left {
+      display: grid;
+      align-items: center;
+      gap: 4px 15px;
+    }
+    .style-right {
+      display: grid;
+      align-items: center;
+      gap: 4px 8px;
+    }
+
+    .style-left {
+      grid-template-columns: 28px 1fr;
+    }
+
+    .style-decoration-wrap {
+      display: flex;
+      gap: 18px;
+    }
+  }
 
-    .is-setting {
+  .is-setting {
+    span {
+      cursor: pointer;
+      border-radius: 2px;
+      color: var(--te-common-text-emphasize);
+      background-color: var(--ti-lowcode-style-setting-label-bg);
     }
   }
 }
diff --git a/packages/settings/styles/src/js/cssType.js b/packages/settings/styles/src/js/cssType.js
index 7d82f3be9..463d5f786 100644
--- a/packages/settings/styles/src/js/cssType.js
+++ b/packages/settings/styles/src/js/cssType.js
@@ -1,14 +1,14 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 export const CSS_TYPE = {
   Css: 'css',
@@ -24,6 +24,15 @@ export const DISPLAY_TYPE = {
   InlineBlock: 'inline-block'
 }
 
+export const DISPLAY_TEXT = {
+  Flex: '弹性布局',
+  Grid: '网格布局',
+  Block: '块级布局',
+  Inline: '内联',
+  Invisible: '隐藏',
+  InlineBlock: '内联块级'
+}
+
 export const OVERFLOW_TYPE = {
   Auto: 'auto',
   Scroll: 'scroll',
diff --git a/packages/settings/styles/src/js/styleProperty.js b/packages/settings/styles/src/js/styleProperty.js
index 336107fc3..ee157cea3 100644
--- a/packages/settings/styles/src/js/styleProperty.js
+++ b/packages/settings/styles/src/js/styleProperty.js
@@ -1,14 +1,14 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 export const PADDING_PROPERTY = {
   Padding: 'padding',
@@ -157,7 +157,7 @@ export const Style_Property = {
 
 export const UNIT_OPTIONS = [
   {
-    label: 'PX',
+    label: 'px',
     value: 'px'
   },
   {
@@ -165,19 +165,19 @@ export const UNIT_OPTIONS = [
     value: '%'
   },
   {
-    label: 'VW',
+    label: 'vw',
     value: 'vw'
   },
   {
-    label: 'VH',
+    label: 'vh',
     value: 'vh'
   },
   {
-    label: 'EM',
+    label: 'em',
     value: 'em'
   },
   {
-    label: 'REM',
+    label: 'rem',
     value: 'rem'
   },
   {
@@ -214,22 +214,22 @@ export const FIXED_OPTIONS = [
 
 export const REPEAT_OPTIONS = [
   {
-    tip: '水平垂直轴都重复',
+    content: '水平垂直轴都重复',
     icon: 'tile-xy',
     value: 'repeat'
   },
   {
-    tip: '水平轴重复',
+    content: '水平轴重复',
     icon: 'tile-x',
     value: 'repeat-x'
   },
   {
-    tip: '垂直轴重复',
+    content: '垂直轴重复',
     icon: 'tile-y',
     value: 'repeat-y'
   },
   {
-    tip: '不重复',
+    content: '不重复',
     icon: 'close',
     value: 'no-repeat'
   }
@@ -237,24 +237,24 @@ export const REPEAT_OPTIONS = [
 
 export const RADIAL_SIZE_LIST = [
   {
-    tip: 'Closest side extends the gradient from the defined position to the closest side.',
+    content: 'Closest side extends the gradient from the defined position to the closest side.',
     icon: 'closest-side',
     value: 'closest-side'
   },
   {
-    tip: 'Closest corner extends the gradient from the defined position to the closest corner.',
+    content: 'Closest corner extends the gradient from the defined position to the closest corner.',
     icon: 'closest-corner',
     value: 'closest-corner'
   },
   {
-    tip: 'Farthest side extends the gradient from the defined position to the farthest side.',
+    content: 'Farthest side extends the gradient from the defined position to the farthest side.',
     icon: 'farthest-side',
     value: 'farthest-side'
   },
   {
-    tip: 'Farthest corner extends the gradient from the defined position to the farthest corner.',
+    content: 'Farthest corner extends the gradient from the defined position to the farthest corner.',
     icon: 'farthest-corner',
-    value: ''
+    value: 'farthest-corner'
   }
 ]
 
diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
index 263a2e8d8..fe510a02b 100644
--- a/packages/theme/base/src/common.less
+++ b/packages/theme/base/src/common.less
@@ -16,6 +16,7 @@
   --te-common-text-inverse: var(--te-base-gray-1); // 主按钮上的文本色 #fff
   --te-common-text-dark-inverse: var(--te-base-gray-1); // 深色背景下按钮上的文本色 #fff
   --te-common-text-emphasize: var(--te-base-blue-6); // 强调性文字 #1476ff
+  --te-common-text-description: var(--te-base-gray-47); // 描述性文字 #9d9d9d
 
   --te-common-icon-primary: var(--te-base-dark-5); // 重要图标色 #191919
   --te-common-icon-secondary: var(--te-base-gray-43); // 图标默认色 #808080
diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less
index 58083c1ba..d7b61cb61 100644
--- a/packages/theme/dark/variable.less
+++ b/packages/theme/dark/variable.less
@@ -192,7 +192,7 @@
   // 中间画布底部面包屑三角箭头颜色
   --ti-lowcode-breadcrumb-icon-color: #858585;
   // 弹框遮罩层背景色
-  --ti-lowcode-mask-modal-bg: rgba(0, 0, 0, 0.5);
+  --ti-lowcode-mask-modal-bg: rgba(0, 0, 0, 0.2);
   // 引导提示框遮罩层背景色
   --ti-lowcode-guide-mask-bg: rgba(255, 255, 255, 0.5);
   // 引导高亮遮罩层背景色
diff --git a/packages/theme/light/base.less b/packages/theme/light/base.less
index 519a89c0b..9b40a5f0d 100644
--- a/packages/theme/light/base.less
+++ b/packages/theme/light/base.less
@@ -239,6 +239,7 @@
   --ti-lowcode-base-bg-4: #595959;
   --ti-lowcode-base-bg-5: #fff;
   --ti-lowcode-base-bg-6: #5959591a;
+  --ti-lowcode-base-bg-7: #f6f6f6;
 
   // 文本色
   --ti-lowcode-base-text-color: #191919;
diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less
index 4afe8bfe8..1782792b4 100644
--- a/packages/theme/light/setting-style.less
+++ b/packages/theme/light/setting-style.less
@@ -5,4 +5,7 @@
   --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-50);
   --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-gray-90);
   --ti-lowcode-setting-style-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-setting-style-tab-bg-color: var(--ti-lowcode-base-bg-7);
+  --ti-lowcode-setting-style-drag-bar-bg: var(--ti-lowcode-base-bg);
+  --ti-lowcode-setting-style-spacing-bg: var(--te-base-gray-34);
 }
diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less
index 8a000272c..aa5d12c92 100644
--- a/packages/theme/light/variable.less
+++ b/packages/theme/light/variable.less
@@ -156,7 +156,7 @@
   // 中间画布底部面包屑三角箭头颜色
   --ti-lowcode-breadcrumb-icon-color: #ccc;
   // 弹框遮罩层背景色
-  --ti-lowcode-mask-modal-bg: rgba(0, 0, 0, 0.5);
+  --ti-lowcode-mask-modal-bg: rgba(0, 0, 0, 0.2);
   // 引导提示框遮罩层背景色
   --ti-lowcode-guide-mask-bg: rgba(0, 0, 0, 0.5);
   // 引导高亮遮罩层背景色

From 79199104bb0af85eada29909a87527b575700832 Mon Sep 17 00:00:00 2001
From: lichunn <46984087+lichunn@users.noreply.github.com>
Date: Fri, 8 Nov 2024 02:02:47 -0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E6=A0=B7=E5=BC=8F=20(#901)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/component/VueMonaco.vue       | 20 -------------------
 packages/plugins/state/src/CreateStore.vue    |  2 +-
 packages/plugins/state/src/CreateVariable.vue |  2 +-
 3 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/packages/common/component/VueMonaco.vue b/packages/common/component/VueMonaco.vue
index f7bf86d6d..c2e661330 100644
--- a/packages/common/component/VueMonaco.vue
+++ b/packages/common/component/VueMonaco.vue
@@ -211,23 +211,3 @@ export default {
   }
 }
 </script>
-<style lang="less" scoped>
-:deep(.monaco-editor) {
-  background: var(--ti-lowcode-base-bg-2);
-  .monaco-scrollable-element {
-    left: 12px !important;
-    width: 100% !important;
-  }
-  .monaco-editor,
-  .monaco-editor-background {
-    background: var(--ti-lowcode-base-bg-2) !important;
-  }
-  .margin {
-    display: none;
-    width: 0;
-  }
-  .minimap {
-    display: none !important;
-  }
-}
-</style>
diff --git a/packages/plugins/state/src/CreateStore.vue b/packages/plugins/state/src/CreateStore.vue
index a09a3d633..168f4b401 100644
--- a/packages/plugins/state/src/CreateStore.vue
+++ b/packages/plugins/state/src/CreateStore.vue
@@ -258,7 +258,7 @@ export default {
   :deep(.toolbar) {
     position: absolute;
     z-index: 99;
-    right: 4px;
+    right: 20px;
   }
   .stores {
     padding: 12px;
diff --git a/packages/plugins/state/src/CreateVariable.vue b/packages/plugins/state/src/CreateVariable.vue
index 4614d61fc..100f2d96e 100644
--- a/packages/plugins/state/src/CreateVariable.vue
+++ b/packages/plugins/state/src/CreateVariable.vue
@@ -416,7 +416,7 @@ export default {
   :deep(.toolbar) {
     position: absolute;
     z-index: 99;
-    right: 4px;
+    right: 20px;
   }
   .var {
     padding: 12px;

From 5279ef171867408293711b077e2d234637298583 Mon Sep 17 00:00:00 2001
From: chilingling <26962197+chilingling@users.noreply.github.com>
Date: Mon, 11 Nov 2024 09:34:23 +0800
Subject: [PATCH 3/3] fix: del unnecessary scripts (#849)

---
 package.json | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 823ce54bf..af2d9e7d9 100644
--- a/package.json
+++ b/package.json
@@ -3,17 +3,13 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "pnpm run setup && concurrently 'pnpm:serve:backend' 'pnpm:dev:demo:frontend'",
-    "dev:mock": "pnpm --filter @opentiny/tiny-engine dev",
-    "dev:demo": "pnpm run setup && concurrently 'pnpm:serve:backend' 'pnpm:dev:demo:frontend'",
+    "dev": "pnpm run setup && concurrently 'pnpm:serve:backend' 'pnpm:serve:frontend'",
     "serve:frontend": "pnpm --filter designer-demo dev",
-    "dev:demo:frontend": "pnpm --filter designer-demo dev",
     "serve:backend": "pnpm --filter @opentiny/tiny-engine-mock dev",
     "build:plugin": "pnpm --filter @opentiny/tiny-engine-* --filter @opentiny/tiny-engine build",
     "build:alpha": "pnpm --filter designer-demo build:alpha",
     "build:prod": "pnpm --filter designer-demo build",
     "buildComponentSchemas": "node scripts/buildComponentSchemas.js",
-    "preview": "pnpm --filter @opentiny/tiny-engine preview",
     "lint": "eslint . --ext .js,.vue,.jsx --fix",
     "format": "prettier --write **/*{.vue,.js,.ts,.html,.json}",
     "prepare": "node -e \"if(require('fs').existsSync('.git')){process.exit(1)}\" || husky install",