From 20e7f1141bdc5f1393b0d7053cb101d4d9515af6 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 26 Sep 2024 22:53:04 -0700
Subject: [PATCH 01/57] =?UTF-8?q?feat(style-panel):=20=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E7=A8=BF=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E7=9A=84UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/configurator/src/index.js            |   2 +
 .../TabsGroupConfigurator.vue                 | 123 ++++++++++++++++++
 .../src/components/layout/LayoutGroup.vue     |  58 +++++----
 packages/settings/styles/src/js/cssType.js    |  29 +++--
 4 files changed, 179 insertions(+), 33 deletions(-)
 create mode 100644 packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue

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/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
new file mode 100644
index 000000000..1636c08de
--- /dev/null
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="tab-container">
+    <div
+      v-for="(item, index) in options"
+      :key="item.label"
+      :class="['tab-item', picked === item.value ? 'active-tab' : '']"
+      :style="{ width: getItemWidth(item) + 'px' }"
+      @click="change(item.value)"
+    >
+      <span :class="['label-text', index < options.length - 1 ? 'border-right' : '']">
+        {{ item.label }}
+        <tiny-popover
+          v-if="item.children"
+          placement="bottom-start"
+          :visible-arrow="false"
+          :width="getItemWidth(item.value)"
+        >
+          <template #reference>
+            <svg-icon name="down-arrow" color="#DBDBDB"></svg-icon>
+          </template>
+          <div
+            v-for="collapseItem in item.children"
+            :class="['collapse-item', picked === item.value ? 'active-tab' : '']"
+            :key="collapseItem.label"
+            @click="change(collapseItem.value)"
+          >
+            {{ collapseItem.label }}
+          </div>
+        </tiny-popover>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { ref } from 'vue'
+import { Popover } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopover: Popover
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    labelWidth: {
+      type: String,
+      default: '64'
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const picked = ref(props.value)
+
+    const getItemWidth = (item) => {
+      return `${parseInt(props.labelWidth, 10) + (item.children ? 20 : 0)}`
+    }
+
+    const change = (val) => {
+      emit('update:modelValue', val)
+    }
+    return {
+      picked,
+      getItemWidth,
+      change
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.tab-container {
+  width: 210px;
+  height: 24px;
+  font-size: 12px;
+  background-color: #f6f6f6;
+  display: flex;
+  border-radius: 4px;
+  .tab-item {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    cursor: pointer;
+    .label-text {
+      width: 100%;
+      height: 16px;
+    }
+    &:hover {
+      background-color: #e6e6e6;
+      border-radius: 4px;
+    }
+  }
+
+  :deep(.icon-down-arrow:focus) {
+    outline: none;
+  }
+}
+.collapse-item {
+  font-size: 12px;
+  line-height: 24px;
+  padding-left: 6px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #e6e6e6;
+    border-radius: 4px;
+  }
+}
+
+.active-tab {
+  background-color: #e6e6e6;
+  border-radius: 4px;
+}
+
+.border-right {
+  border-right: 1px solid #dbdbdb;
+}
+</style>
diff --git a/packages/settings/styles/src/components/layout/LayoutGroup.vue b/packages/settings/styles/src/components/layout/LayoutGroup.vue
index c3736e97c..0bc815feb 100644
--- a/packages/settings/styles/src/components/layout/LayoutGroup.vue
+++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue
@@ -2,7 +2,11 @@
   <div class="display-row">
     <div :class="['display-label', { selected: display }]" @click="openDisplayModal($event)">排布</div>
     <div class="display-content">
-      <radio-configurator :options="layoutOpts" :value="picked" @pickedChange="select"></radio-configurator>
+      <tabs-group-configurator
+        :options="layoutOpts"
+        :value="picked"
+        @update:modelValue="select"
+      ></tabs-group-configurator>
     </div>
   </div>
 
@@ -13,15 +17,15 @@
 
 <script>
 import { ref, watch } from 'vue'
-import { DISPLAY_TYPE } from '../../js/cssType'
-import { RadioConfigurator } from '@opentiny/tiny-engine-configurator'
+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
   },
@@ -80,39 +84,47 @@ export default {
     const layoutOpts = ref([
       {
         value: DISPLAY_TYPE.Block,
+        label: DISPLAY_TEXT.Block,
         title: '',
         tip: 'block-块级布局',
         icon: 'display-block'
       },
       {
         value: DISPLAY_TYPE.Flex,
+        label: DISPLAY_TEXT.Flex,
         title: '',
         tip: 'flex-弹性布局',
         icon: 'display-flex'
       },
       {
         value: DISPLAY_TYPE.Grid,
+        label: DISPLAY_TEXT.Grid,
         title: '',
         tip: 'grid-网格布局',
-        icon: 'display-grid'
-      },
-      {
-        value: DISPLAY_TYPE.InlineBlock,
-        title: '',
-        tip: 'inline-block-内联块级',
-        icon: 'display-inline-block'
-      },
-      {
-        value: DISPLAY_TYPE.Inline,
-        title: '',
-        tip: 'inline-内联',
-        icon: 'display-inline'
-      },
-      {
-        value: DISPLAY_TYPE.Invisible,
-        title: '',
-        tip: 'eye-invisible-隐藏',
-        icon: 'eye-invisible'
+        icon: 'display-grid',
+        children: [
+          {
+            value: DISPLAY_TYPE.InlineBlock,
+            label: DISPLAY_TEXT.InlineBlock,
+            title: '',
+            tip: 'inline-block-内联块级',
+            icon: 'display-inline-block'
+          },
+          {
+            value: DISPLAY_TYPE.Inline,
+            label: DISPLAY_TEXT.Inline,
+            title: '',
+            tip: 'inline-内联',
+            icon: 'display-inline'
+          },
+          {
+            value: DISPLAY_TYPE.Invisible,
+            label: DISPLAY_TEXT.Invisible,
+            title: '',
+            tip: 'eye-invisible-隐藏',
+            icon: 'eye-invisible'
+          }
+        ]
       }
     ])
 
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',

From c83e99e554cca581b2a001e2ff91f0c58d199afd Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Sat, 28 Sep 2024 18:07:43 -0700
Subject: [PATCH 02/57] =?UTF-8?q?feat(style-panel):=20=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E7=A8=BF=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E7=9A=84UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TabsGroupConfigurator.vue                 | 30 ++++++++++-----
 .../src/components/layout/LayoutGroup.vue     | 38 +++++++------------
 2 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 1636c08de..a6b1bb74a 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -5,26 +5,34 @@
       :key="item.label"
       :class="['tab-item', picked === item.value ? 'active-tab' : '']"
       :style="{ width: getItemWidth(item) + 'px' }"
-      @click="change(item.value)"
+      @click.stop="change(item.value)"
     >
       <span :class="['label-text', index < options.length - 1 ? 'border-right' : '']">
-        {{ item.label }}
+        <span v-if="item.label">{{ item.label }}</span>
+        <svg-icon v-if="item.icon" :name="item.icon"></svg-icon>
         <tiny-popover
           v-if="item.children"
+          v-model="showMore"
           placement="bottom-start"
           :visible-arrow="false"
-          :width="getItemWidth(item.value)"
+          :width="getItemWidth(item)"
+          trigger="manual"
         >
           <template #reference>
-            <svg-icon name="down-arrow" color="#DBDBDB"></svg-icon>
+            <svg-icon
+              name="down-arrow"
+              color="var(--ti-lowcode-base-default-button-border-disable-color)"
+              @click.stop="showMore = !showMore"
+            ></svg-icon>
           </template>
           <div
             v-for="collapseItem in item.children"
             :class="['collapse-item', picked === item.value ? 'active-tab' : '']"
             :key="collapseItem.label"
-            @click="change(collapseItem.value)"
+            @click.stop="change(collapseItem.value)"
           >
-            {{ collapseItem.label }}
+            <span v-if="collapseItem.label">{{ collapseItem.label }}</span>
+            <svg-icon v-if="collapseItem.icon" :name="collapseItem.icon"></svg-icon>
           </div>
         </tiny-popover>
       </span>
@@ -56,6 +64,7 @@ export default {
   emits: ['update:modelValue'],
   setup(props, { emit }) {
     const picked = ref(props.value)
+    const showMore = ref(false)
 
     const getItemWidth = (item) => {
       return `${parseInt(props.labelWidth, 10) + (item.children ? 20 : 0)}`
@@ -66,6 +75,7 @@ export default {
     }
     return {
       picked,
+      showMore,
       getItemWidth,
       change
     }
@@ -91,7 +101,7 @@ export default {
       height: 16px;
     }
     &:hover {
-      background-color: #e6e6e6;
+      background-color: var(--ti-lowcode-base-gray-101);
       border-radius: 4px;
     }
   }
@@ -107,17 +117,17 @@ export default {
   cursor: pointer;
 
   &:hover {
-    background-color: #e6e6e6;
+    background-color: var(--ti-lowcode-base-gray-101);
     border-radius: 4px;
   }
 }
 
 .active-tab {
-  background-color: #e6e6e6;
+  background-color: var(--ti-lowcode-base-gray-101);
   border-radius: 4px;
 }
 
 .border-right {
-  border-right: 1px solid #dbdbdb;
+  border-right: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
 }
 </style>
diff --git a/packages/settings/styles/src/components/layout/LayoutGroup.vue b/packages/settings/styles/src/components/layout/LayoutGroup.vue
index 0bc815feb..ab9d7cd98 100644
--- a/packages/settings/styles/src/components/layout/LayoutGroup.vue
+++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="display-row">
-    <div :class="['display-label', { selected: display }]" @click="openDisplayModal($event)">排布</div>
+    <div :class="['display-label', { selected: display }]" @click="openDisplayModal($event)">
+      <span>排布</span>
+    </div>
     <div class="display-content">
       <tabs-group-configurator
         :options="layoutOpts"
@@ -84,45 +86,27 @@ export default {
     const layoutOpts = ref([
       {
         value: DISPLAY_TYPE.Block,
-        label: DISPLAY_TEXT.Block,
-        title: '',
-        tip: 'block-块级布局',
-        icon: 'display-block'
+        label: DISPLAY_TEXT.Block
       },
       {
         value: DISPLAY_TYPE.Flex,
-        label: DISPLAY_TEXT.Flex,
-        title: '',
-        tip: 'flex-弹性布局',
-        icon: 'display-flex'
+        label: DISPLAY_TEXT.Flex
       },
       {
         value: DISPLAY_TYPE.Grid,
         label: DISPLAY_TEXT.Grid,
-        title: '',
-        tip: 'grid-网格布局',
-        icon: 'display-grid',
         children: [
           {
             value: DISPLAY_TYPE.InlineBlock,
-            label: DISPLAY_TEXT.InlineBlock,
-            title: '',
-            tip: 'inline-block-内联块级',
-            icon: 'display-inline-block'
+            label: DISPLAY_TEXT.InlineBlock
           },
           {
             value: DISPLAY_TYPE.Inline,
-            label: DISPLAY_TEXT.Inline,
-            title: '',
-            tip: 'inline-内联',
-            icon: 'display-inline'
+            label: DISPLAY_TEXT.Inline
           },
           {
             value: DISPLAY_TYPE.Invisible,
-            label: DISPLAY_TEXT.Invisible,
-            title: '',
-            tip: 'eye-invisible-隐藏',
-            icon: 'eye-invisible'
+            label: DISPLAY_TEXT.Invisible
           }
         ]
       }
@@ -151,6 +135,12 @@ export default {
     line-height: 24px;
 
     &.selected {
+      span {
+        cursor: pointer;
+        padding: 2px;
+        color: var(--ti-lowcode-base-text-color-2);
+        background: var(--ti-lowcode-className-selector-container-label-bg-color);
+      }
     }
   }
 

From 3251a10db537abb7299d105df1e6253270e59a0c Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Sat, 28 Sep 2024 23:12:01 -0700
Subject: [PATCH 03/57] =?UTF-8?q?feat(style-panel):=20=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E7=A8=BF=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E7=9A=84UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TabsGroupConfigurator.vue                 |  37 +++--
 .../src/components/layout/LayoutGroup.vue     |  29 ++--
 .../styles/src/components/size/SizeGroup.vue  | 129 +++++++-----------
 3 files changed, 89 insertions(+), 106 deletions(-)

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index a6b1bb74a..5661d1bf8 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -3,13 +3,24 @@
     <div
       v-for="(item, index) in options"
       :key="item.label"
-      :class="['tab-item', picked === item.value ? 'active-tab' : '']"
+      :class="['tab-item', { selected: picked === item.value }]"
       :style="{ width: getItemWidth(item) + 'px' }"
       @click.stop="change(item.value)"
     >
       <span :class="['label-text', index < options.length - 1 ? 'border-right' : '']">
         <span v-if="item.label">{{ item.label }}</span>
-        <svg-icon v-if="item.icon" :name="item.icon"></svg-icon>
+        <tiny-popover
+          v-if="item?.icon"
+          :effect="effect"
+          :placement="placement"
+          :visible-arrow="false"
+          :content="item.content"
+          trigger="hover"
+        >
+          <template #reference>
+            <svg-icon v-if="item.icon" :name="item.icon"></svg-icon>
+          </template>
+        </tiny-popover>
         <tiny-popover
           v-if="item.children"
           v-model="showMore"
@@ -40,7 +51,7 @@
   </div>
 </template>
 <script>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { Popover } from '@opentiny/vue'
 
 export default {
@@ -52,6 +63,14 @@ export default {
       type: String,
       default: ''
     },
+    effect: {
+      type: String,
+      default: 'dark'
+    },
+    placement: {
+      type: String,
+      default: 'top'
+    },
     labelWidth: {
       type: String,
       default: '64'
@@ -63,7 +82,7 @@ export default {
   },
   emits: ['update:modelValue'],
   setup(props, { emit }) {
-    const picked = ref(props.value)
+    const picked = computed(() => props.value)
     const showMore = ref(false)
 
     const getItemWidth = (item) => {
@@ -100,6 +119,11 @@ export default {
       width: 100%;
       height: 16px;
     }
+
+    &.selected {
+      background-color: var(--ti-lowcode-base-gray-101);
+      border-radius: 4px;
+    }
     &:hover {
       background-color: var(--ti-lowcode-base-gray-101);
       border-radius: 4px;
@@ -122,11 +146,6 @@ export default {
   }
 }
 
-.active-tab {
-  background-color: var(--ti-lowcode-base-gray-101);
-  border-radius: 4px;
-}
-
 .border-right {
   border-right: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
 }
diff --git a/packages/settings/styles/src/components/layout/LayoutGroup.vue b/packages/settings/styles/src/components/layout/LayoutGroup.vue
index ab9d7cd98..20d328c44 100644
--- a/packages/settings/styles/src/components/layout/LayoutGroup.vue
+++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="display-row">
-    <div :class="['display-label', { selected: display }]" @click="openDisplayModal($event)">
+    <div :class="['display-label', { selected: picked }]" @click="openDisplayModal($event)">
       <span>排布</span>
     </div>
     <div class="display-content">
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { ref, watch } from 'vue'
+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'
@@ -53,16 +53,11 @@ export default {
   setup(props, { emit }) {
     const { setPosition } = useModal()
 
-    const picked = ref(props.display)
+    const picked = computed(() => {
+      return props.display
+    })
     const showModal = ref(false)
 
-    watch(
-      () => props.display,
-      () => {
-        picked.value = props.display
-      }
-    )
-
     const select = (type) => {
       picked.value = type
       if (type && !props.disabled[type]) {
@@ -78,8 +73,8 @@ export default {
     }
 
     const reset = () => {
-      picked.value = ''
-      emit('update', { display: '' })
+      picked.value = null
+      emit('update', { display: null })
       showModal.value = false
     }
 
@@ -134,12 +129,14 @@ export default {
     padding: 0 3px;
     line-height: 24px;
 
+    span {
+      cursor: pointer;
+      padding: 2px;
+    }
     &.selected {
       span {
-        cursor: pointer;
-        padding: 2px;
-        color: var(--ti-lowcode-base-text-color-2);
-        background: var(--ti-lowcode-className-selector-container-label-bg-color);
+        color: var(--ti-lowcode-style-setting-label-color);
+        background-color: var(--ti-lowcode-style-setting-label-bg);
       }
     }
   }
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 0e16b4872..b2c609388 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -86,47 +86,19 @@
 
   <div class="overflow-row">
     <div
-      :class="['overflow-label', { 'is-setting': getSettingFlag(SIZE_PROPERTY.Overflow) }]"
+      :class="['overflow-label', { 'is-setting': getSettingFlag(SIZE_PROPERTY.Overflow), selected: 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"
+      :value="selectedOverflow"
+      :label-width="50"
+      :effect="effect"
+      :placement="placement"
+      @update:modelValue="selectOverflow"
+    ></tabs-group-configurator>
   </div>
 
   <div class="fit-row">
@@ -211,10 +183,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 +202,7 @@ export default {
     ResetButton,
     NumericSelect,
     SelectConfigurator,
+    TabsGroupConfigurator,
     MaskModal,
     TinyPopover: Popover,
     TinyInput: Input,
@@ -331,6 +304,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 +343,10 @@ export default {
       parseNumber: true
     })
 
+    const selectedOverflow = computed(() => {
+      return getPropertyValue(SIZE_PROPERTY.Overflow)
+    })
+
     const updateStyle = (property) => {
       emit('update', property)
     }
@@ -380,8 +379,6 @@ export default {
       }
     }
 
-    const isOverflowSelected = (type) => type === getPropertyValue(SIZE_PROPERTY.Overflow)
-
     const showPopover = () => {
       state.flag = true
       state.disabled = true
@@ -425,6 +422,8 @@ export default {
       SIZE_PROPERTY,
       selectOptions,
       originOptions,
+      overflowOpt,
+      selectedOverflow,
       reset,
       showModal,
       updateStyle,
@@ -432,7 +431,6 @@ export default {
       getProperty,
       getSettingFlag,
       selectOverflow,
-      isOverflowSelected,
       showPopover,
       hidePopover,
       selectOrigin,
@@ -480,45 +478,14 @@ 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);
+    span {
+      cursor: pointer;
+      padding: 2px;
     }
-  }
-
-  .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;
-      }
-
-      .overflow-auto {
-        cursor: default;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        text-align: center;
-        font-size: 14px;
+    &.selected {
+      span {
+        color: var(--ti-lowcode-style-setting-label-color);
+        background-color: var(--ti-lowcode-style-setting-label-bg);
       }
     }
   }

From cbfab6fd673b7d46ff855a3e98b66b60305a28ea Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:12:37 -0700
Subject: [PATCH 04/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../configurator/src/color-configurator/ColorConfigurator.vue  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/configurator/src/color-configurator/ColorConfigurator.vue b/packages/configurator/src/color-configurator/ColorConfigurator.vue
index b665ebd17..feb7eec3c 100644
--- a/packages/configurator/src/color-configurator/ColorConfigurator.vue
+++ b/packages/configurator/src/color-configurator/ColorConfigurator.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="background-input">
-    <tiny-input v-model="color" placeholder="color value" @change="change">
+    <tiny-input v-model="color" readonly placeholder="color value" @change="change">
       <template #prefix>
         <input v-model="color" type="color" class="input-color" @change="changeColor" />
       </template>
@@ -73,7 +73,6 @@ export default {
       padding-left: 24px;
       padding-right: 8px;
       background-color: transparent;
-      border: none;
     }
   }
 }

From a58401f47cb60736a70b4b831b81fd262bc90b70 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:13:11 -0700
Subject: [PATCH 05/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../src/number-configurator/NumberConfigurator.vue           | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/configurator/src/number-configurator/NumberConfigurator.vue b/packages/configurator/src/number-configurator/NumberConfigurator.vue
index cce0a68e5..87becc0e9 100644
--- a/packages/configurator/src/number-configurator/NumberConfigurator.vue
+++ b/packages/configurator/src/number-configurator/NumberConfigurator.vue
@@ -181,6 +181,9 @@ export default {
     }
   }
   .meta-numeric-unit {
+    position: absolute;
+    top: 2px;
+    height: 22px;
     span {
       color: var(--ti-lowcode-numeric-unit-text-color);
       font-size: 14px;
@@ -188,8 +191,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;

From 7fb11ef0f0e561e4924f0f5b153eb4f9644933d5 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:13:30 -0700
Subject: [PATCH 06/57] feat(style-panel): modify this style-panel styles
 according to the design craft

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

diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index 8a6cc08c7..fc6f1f2f4 100644
--- a/packages/configurator/src/slider-configurator/SliderConfigurator.vue
+++ b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -133,7 +133,7 @@ export default {
     padding: 0;
     cursor: pointer;
     border: 0;
-    background: -webkit-linear-gradient(#fff, #fff) no-repeat #999999;
+    background: -webkit-linear-gradient(#fff, #fff) no-repeat #ccc;
     background-size: 0% 100%;
     position: relative;
     outline: 0;

From 15996b2424fe9b9a552ba008f05b83e2cbaa8983 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:13:50 -0700
Subject: [PATCH 07/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../TabsGroupConfigurator.vue                 | 92 ++++++++++++++-----
 1 file changed, 71 insertions(+), 21 deletions(-)

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 5661d1bf8..9b82be578 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="tab-container">
     <div
-      v-for="(item, index) in options"
+      v-for="(item, index) in commonOptions"
       :key="item.label"
-      :class="['tab-item', { selected: picked === item.value }]"
-      :style="{ width: getItemWidth(item) + 'px' }"
+      :class="['tab-item', { selected: picked === (valueKey ? item.value[valueKey] : item.value) }]"
+      :style="{ width: getItemWidth(index === commonOptions.length - 1) + 'px' }"
       @click.stop="change(item.value)"
     >
-      <span :class="['label-text', index < options.length - 1 ? 'border-right' : '']">
-        <span v-if="item.label">{{ item.label }}</span>
+      <span :class="['label-text', index < commonOptions.length - 1 ? 'border-right' : '']">
+        <span v-if="item?.label">{{ item.label }}</span>
         <tiny-popover
           v-if="item?.icon"
           :effect="effect"
@@ -18,32 +18,33 @@
           trigger="hover"
         >
           <template #reference>
-            <svg-icon v-if="item.icon" :name="item.icon"></svg-icon>
+            <svg-icon v-if="item.icon" :name="item.icon" class="bem-Svg"></svg-icon>
           </template>
         </tiny-popover>
         <tiny-popover
-          v-if="item.children"
+          v-if="index === commonOptions.length - 1"
           v-model="showMore"
           placement="bottom-start"
           :visible-arrow="false"
-          :width="getItemWidth(item)"
+          :width="getItemWidth(true)"
           trigger="manual"
         >
           <template #reference>
             <svg-icon
               name="down-arrow"
+              class="bem-Svg"
               color="var(--ti-lowcode-base-default-button-border-disable-color)"
               @click.stop="showMore = !showMore"
             ></svg-icon>
           </template>
           <div
-            v-for="collapseItem in item.children"
-            :class="['collapse-item', picked === item.value ? 'active-tab' : '']"
-            :key="collapseItem.label"
-            @click.stop="change(collapseItem.value)"
+            v-for="foldsItem in foldsOptions"
+            class="collapse-item"
+            :key="foldsItem.label"
+            @click.stop="change(foldsItem.value)"
           >
-            <span v-if="collapseItem.label">{{ collapseItem.label }}</span>
-            <svg-icon v-if="collapseItem.icon" :name="collapseItem.icon"></svg-icon>
+            <span v-if="foldsItem.label">{{ foldsItem.label }}</span>
+            <svg-icon v-if="foldsItem.icon" :name="foldsItem.icon" class="bem-Svg"></svg-icon>
           </div>
         </tiny-popover>
       </span>
@@ -51,7 +52,7 @@
   </div>
 </template>
 <script>
-import { ref, computed } from 'vue'
+import { ref, watch } from 'vue'
 import { Popover } from '@opentiny/vue'
 
 export default {
@@ -63,6 +64,10 @@ export default {
       type: String,
       default: ''
     },
+    valueKey: {
+      type: String,
+      default: ''
+    },
     effect: {
       type: String,
       default: 'dark'
@@ -73,7 +78,7 @@ export default {
     },
     labelWidth: {
       type: String,
-      default: '64'
+      default: '60'
     },
     options: {
       type: Array,
@@ -82,18 +87,60 @@ export default {
   },
   emits: ['update:modelValue'],
   setup(props, { emit }) {
-    const picked = computed(() => props.value)
+    const picked = ref()
+    const uncollapsedOptions = ref(props.options.filter((option) => !option.collapsed))
+    const collapsedOptions = ref(props.options.filter((option) => option.collapsed))
+    const commonOptions = ref(
+      collapsedOptions.value.length
+        ? [...uncollapsedOptions.value, collapsedOptions.value[0]]
+        : uncollapsedOptions.value
+    )
+    const foldsOptions = ref(
+      collapsedOptions.value.length <= 1 ? [] : collapsedOptions.value.filter((item, index) => index > 0)
+    )
     const showMore = ref(false)
 
-    const getItemWidth = (item) => {
-      return `${parseInt(props.labelWidth, 10) + (item.children ? 20 : 0)}`
+    const getItemWidth = (collapsed = false) => {
+      return `${parseInt(props.labelWidth, 10) + (collapsed ? 20 : 0)}`
     }
 
+    watch(
+      () => props.value,
+      (value) => {
+        picked.value = value
+        if (collapsedOptions.value.length === 0) {
+          return
+        }
+        if (!value) {
+          commonOptions.value = [...uncollapsedOptions.value, collapsedOptions.value[0]]
+          foldsOptions.value = collapsedOptions.value.filter((item, index) => index > 0)
+        } else {
+          const isFoldsValue = foldsOptions.value.find((item) =>
+            props.valueKey ? item.value[props.valueKey] === value : item.value === value
+          )
+          if (isFoldsValue) {
+            commonOptions.value[commonOptions.value.length - 1] = isFoldsValue
+            foldsOptions.value = collapsedOptions.value.filter((item) =>
+              props.valueKey ? item.value[props.valueKey] !== value : item.value !== value
+            )
+          }
+        }
+      },
+      { immediate: true }
+    )
+
     const change = (val) => {
+      if (picked.value === val) {
+        return
+      }
       emit('update:modelValue', val)
+      showMore.value = false
     }
+
     return {
       picked,
+      commonOptions,
+      foldsOptions,
       showMore,
       getItemWidth,
       change
@@ -104,7 +151,7 @@ export default {
 
 <style scoped lang="less">
 .tab-container {
-  width: 210px;
+  max-width: 210px;
   height: 24px;
   font-size: 12px;
   background-color: #f6f6f6;
@@ -118,8 +165,11 @@ export default {
     .label-text {
       width: 100%;
       height: 16px;
-    }
 
+      .bem-Svg {
+        margin-top: -3px;
+      }
+    }
     &.selected {
       background-color: var(--ti-lowcode-base-gray-101);
       border-radius: 4px;

From 4a187b602e4dc95afecbd63f014c1425c0f0f478 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:14:07 -0700
Subject: [PATCH 08/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../components/background/BackgroundGroup.vue | 45 +++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 66de5a473..6529d5c81 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"
@@ -384,8 +391,12 @@ export default {
 .background-group {
   display: grid;
   gap: 8px;
-  grid-template-columns: 48px auto auto;
+  grid-template-columns: 35px auto auto;
   align-items: center;
+  position: relative;
+  span {
+    padding: 2px;
+  }
   .background-label {
     color: var(--ti-lowcode-component-setting-panel-label-color);
   }
@@ -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 {
@@ -543,8 +554,26 @@ export default {
   }
 
   .is-setting {
-    color: var(--ti-lowcode-style-setting-label-color);
-    background-color: var(--ti-lowcode-style-setting-label-bg);
+    span {
+      cursor: pointer;
+      color: var(--ti-lowcode-style-setting-label-color);
+      background-color: var(--ti-lowcode-style-setting-label-bg);
+    }
+  }
+}
+
+.background-model-title {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 0;
+
+  span {
+    color: #191919;
+    font-weight: 600;
+  }
+
+  .svg-icon {
+    cursor: pointer;
   }
 }
 </style>

From 037cf4860fc5e13a6f9d055ae1366a06369cdc3f Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:14:23 -0700
Subject: [PATCH 09/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../background/BackgroundImageGradient.vue    | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

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);

From f5ad32cbfd22726885a53c4808d897b6762955a0 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:14:38 -0700
Subject: [PATCH 10/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../background/BackgroundImageSetting.vue     | 78 +++++++++----------
 1 file changed, 37 insertions(+), 41 deletions(-)

diff --git a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
index eaa75a620..88bf719d1 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"
+        :value="state.styleComponent"
+        value-key="styleComponent"
+        :label-width="52"
+        :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)'
+          }
         }
       ]
     })
@@ -121,13 +117,13 @@ export default {
 
       if (item.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(${item.imageUrl})`,
+          [BACKGROUND_PROPERTY.BackgroundPosition]: item.position,
+          [BACKGROUND_PROPERTY.BackgroundSize]: item.size
         }
       } else {
         styleObj = {
-          [BACKGROUND_PROPERTY.BackgroundImage]: item.value,
+          [BACKGROUND_PROPERTY.BackgroundImage]: item.imageUrl,
           [BACKGROUND_PROPERTY.BackgroundPosition]: null,
           [BACKGROUND_PROPERTY.BackgroundSize]: null,
           [BACKGROUND_PROPERTY.BackgroundRepeat]: null,
@@ -217,7 +213,7 @@ export default {
     }
   }
   :deep(.line) {
-    padding: 8px 0;
+    padding: 6px 0;
     position: relative;
     &::after {
       content: '';

From e6926849ef362755bb6c1f94fa8d527f6f7aa6a6 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:16:25 -0700
Subject: [PATCH 11/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../components/background/ImageSetting.vue    | 196 ++++++++++--------
 1 file changed, 106 insertions(+), 90 deletions(-)

diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
index 20408cc1f..6cbd9ff28 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"
+      :value="state.sizeSelected"
+      :label-width="69"
+      @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"
+      :value="state.repeat"
+      :label-width="53"
+      @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"
+      :value="state.fixedSelected"
+      :label-width="105"
+      @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 {
@@ -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 #dbdbdb;
+  border-radius: 4px;
 }
 .image-inner {
   width: 100%;
@@ -267,6 +252,38 @@ 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;
@@ -291,11 +308,11 @@ onMounted(() => {
     }
   }
   .size {
-    color: #ababab;
+    color: #595959;
   }
 }
 .choose-image {
-  border-color: rgb(54, 54, 54);
+  border-color: #dbdbdb;
   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: #191919;
   border-width: 1px;
   border-style: solid;
   align-self: center;

From b520b3a40e664423ea12d5e9cfc870ff678ae6ef Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:16:41 -0700
Subject: [PATCH 12/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../styles/src/components/background/LinearGradient.vue     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/settings/styles/src/components/background/LinearGradient.vue b/packages/settings/styles/src/components/background/LinearGradient.vue
index 56afcae2d..8368a811f 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="#DBDBDB"></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="#DBDBDB"></svg-icon></span>
+        <span @click="clockwiseRotate"><svg-icon name="clock-wise" color="#DBDBDB"></svg-icon></span>
       </div>
       <input-select
         :modelValue="state.angle"

From 7cbc1ae78046344ff8a9ca5849279a93036974a7 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:16:57 -0700
Subject: [PATCH 13/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../components/background/PositionOrigin.vue  | 84 +++++++++----------
 1 file changed, 39 insertions(+), 45 deletions(-)

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 {

From 0b340043ea33b487db4e1e4cdf15cb8b06c23747 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:20:28 -0700
Subject: [PATCH 14/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../components/background/RadialGradient.vue  | 33 +++++++------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/packages/settings/styles/src/components/background/RadialGradient.vue b/packages/settings/styles/src/components/background/RadialGradient.vue
index a94083a99..bbddffb52 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"
+      :value="state.radialSize"
+      :label-width="52"
+      :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()
 }
 

From eb014a887ada5e69c3844a472720f0d340d1164e Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:20:45 -0700
Subject: [PATCH 15/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../src/components/effects/EffectGroup.vue    | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/settings/styles/src/components/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue
index cba6a1b87..785e10857 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,7 +21,7 @@
       :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-无">
@@ -85,8 +86,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
@@ -520,6 +522,9 @@ export default {
   grid-template-columns: 44px auto;
   align-items: center;
   margin-bottom: 8px;
+  span {
+    padding: 2px;
+  }
   &:last-child {
     margin-bottom: 0;
   }
@@ -530,8 +535,11 @@ export default {
   }
 
   .is-setting {
-    color: var(--ti-lowcode-style-setting-label-color);
-    background-color: var(--ti-lowcode-style-setting-label-bg);
+    span {
+      cursor: pointer;
+      color: var(--ti-lowcode-style-setting-label-color);
+      background-color: var(--ti-lowcode-style-setting-label-bg);
+    }
   }
 
   :deep(.slider-container) {
@@ -574,6 +582,10 @@ export default {
       align-items: center;
       margin-top: 8px;
     }
+
+    label {
+      padding-left: 2px;
+    }
   }
 }
 </style>

From 21a1ee29f1f61919699fa4717af8b1b77925a6b2 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:21:00 -0700
Subject: [PATCH 16/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../styles/src/components/inputs/InputSelect.vue      | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

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);
       }
     }

From 6c1545a9def97bb46d40be59b09bb1f305232c8b Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:21:17 -0700
Subject: [PATCH 17/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../src/components/inputs/ModalMask.vue       | 41 +++++++++++++++----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 5bc33a035..30dfd2bc4 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -1,9 +1,9 @@
 <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 :style="{ top: topStyle + 'px' }" :class="['modal-content', { 'align-body': isAlignBody }]">
         <slot></slot>
       </div>
     </div>
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 
 const modal = reactive({
   left: 0,
@@ -38,9 +38,29 @@ export const useModal = () => {
 }
 
 export default {
-  setup() {
+  props: {
+    teleport: {
+      type: String,
+      default: '.tiny-engine-right-wrap'
+    }
+  },
+  setup(props) {
+    const isAlignBody = ref(props.teleport === 'body')
+    const topStyle = ref(0)
+
+    onMounted(() => {
+      if (isAlignBody.value) {
+        const modalContentEle = document.querySelector('.modal-content')
+        topStyle.value = modal.top < modalContentEle.offsetHeight ? 40 : modal.top - modalContentEle.offsetHeight + 40
+      } else {
+        topStyle.value = modal.top - 34
+      }
+    })
+
     return {
-      modal
+      modal,
+      topStyle,
+      isAlignBody
     }
   }
 }
@@ -55,14 +75,14 @@ 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);
@@ -73,5 +93,10 @@ export default {
     max-height: 100%;
     box-sizing: border-box;
   }
+
+  .align-body {
+    right: 280px;
+    left: calc(100% - 287px - 280px);
+  }
 }
 </style>

From 2969348c34992ddc6cbeeec67f3a37968395ad5c Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:22:44 -0700
Subject: [PATCH 18/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../src/components/inputs/NumericSelect.vue   | 83 +++++++++++++++++--
 1 file changed, 76 insertions(+), 7 deletions(-)

diff --git a/packages/settings/styles/src/components/inputs/NumericSelect.vue b/packages/settings/styles/src/components/inputs/NumericSelect.vue
index 5586de8fe..42b3b852e 100644
--- a/packages/settings/styles/src/components/inputs/NumericSelect.vue
+++ b/packages/settings/styles/src/components/inputs/NumericSelect.vue
@@ -6,9 +6,20 @@
       @focus="focus = true"
       @blur="focus = false"
       @change="change"
+      @input="input"
     >
       <template #suffix>
-        <span class="suffix">{{ numericalSuffix }}</span>
+        <div class="suffix-wrap">
+          <div class="add-substact-wrap">
+            <div>
+              <svg-icon name="down-arrow" @click="changeNumber()"></svg-icon>
+            </div>
+            <div>
+              <svg-icon name="down-arrow" @click="changeNumber(false)"></svg-icon>
+            </div>
+          </div>
+          <span class="suffix-text">{{ numericalSuffix }}</span>
+        </div>
       </template>
     </tiny-input>
   </div>
@@ -64,10 +75,16 @@ export default {
 
     const focus = ref(false)
 
-    const change = (value) => {
+    const input = (value) => {
+      if (!/^\d+$/.test(value.data)) {
+        numericalModelValue.value = numericalModelValue.value.slice(0, -1)
+      }
+    }
+
+    const change = () => {
       focus.value = false
 
-      if (value.trim().length === 0) {
+      if (numericalModelValue.value.trim().length === 0) {
         emit('update', { [props.name]: null })
       }
 
@@ -83,10 +100,19 @@ export default {
       })
     }
 
+    const changeNumber = (isAdd = true) => {
+      let resNumber = parseInt(numericalModelValue.value, 10) || 0
+      resNumber += isAdd ? 1 : -1
+      numericalModelValue.value = `${resNumber < 0 ? 0 : resNumber}`
+      change()
+    }
+
     return {
       numericalModelValue,
       numericalSuffix,
       focus,
+      input,
+      changeNumber,
       change
     }
   }
@@ -101,12 +127,55 @@ 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);
   }
+  .suffix-wrap {
+    .add-substact-wrap {
+      height: 23px;
+      width: 16px;
+      margin-right: -3px;
+      border-left: 1px solid var(--te-common-border-default);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      border-radius: 0 4px 4px 0;
+      display: none;
+
+      div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        .svg-icon {
+          height: 11px;
+        }
 
-  .suffix {
-    font-size: 12px;
-    color: var(--ti-lowcode-text-color);
+        &:active {
+          background-color: var(--te-common-border-default);
+        }
+
+        &:first-child {
+          border-bottom: 1px solid var(--te-common-border-default);
+          .svg-icon {
+            transform: scaleY(-1);
+          }
+        }
+      }
+    }
+
+    .suffix-text {
+      font-size: 12px;
+      color: var(--ti-lowcode-text-color);
+    }
+
+    &:hover {
+      .suffix-text {
+        display: none;
+      }
+      .add-substact-wrap {
+        display: flex;
+      }
+    }
   }
 
   :deep(.tiny-input-suffix) {

From 3b6c9a6ece7d18aaa0ec8f2e742dd4eb694c076e Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:22:59 -0700
Subject: [PATCH 19/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../src/components/layout/LayoutGroup.vue     | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/settings/styles/src/components/layout/LayoutGroup.vue b/packages/settings/styles/src/components/layout/LayoutGroup.vue
index 20d328c44..8a7c304b5 100644
--- a/packages/settings/styles/src/components/layout/LayoutGroup.vue
+++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue
@@ -90,20 +90,23 @@ export default {
       {
         value: DISPLAY_TYPE.Grid,
         label: DISPLAY_TEXT.Grid,
-        children: [
-          {
-            value: DISPLAY_TYPE.InlineBlock,
-            label: DISPLAY_TEXT.InlineBlock
-          },
-          {
-            value: DISPLAY_TYPE.Inline,
-            label: DISPLAY_TEXT.Inline
-          },
-          {
-            value: DISPLAY_TYPE.Invisible,
-            label: DISPLAY_TEXT.Invisible
-          }
-        ]
+        collapsed: true
+      },
+
+      {
+        value: DISPLAY_TYPE.InlineBlock,
+        label: DISPLAY_TEXT.InlineBlock,
+        collapsed: true
+      },
+      {
+        value: DISPLAY_TYPE.Inline,
+        label: DISPLAY_TEXT.Inline,
+        collapsed: true
+      },
+      {
+        value: DISPLAY_TYPE.Invisible,
+        label: DISPLAY_TEXT.Invisible,
+        collapsed: true
       }
     ])
 
@@ -130,11 +133,11 @@ export default {
     line-height: 24px;
 
     span {
-      cursor: pointer;
       padding: 2px;
     }
     &.selected {
       span {
+        cursor: pointer;
         color: var(--ti-lowcode-style-setting-label-color);
         background-color: var(--ti-lowcode-style-setting-label-bg);
       }

From 6a739a90f7a0cf3a702df91532fb0db59f569c89 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:23:15 -0700
Subject: [PATCH 20/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../src/components/position/PositionGroup.vue      | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/settings/styles/src/components/position/PositionGroup.vue b/packages/settings/styles/src/components/position/PositionGroup.vue
index 376787046..1a534c475 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,11 @@ export default {
     }
   }
   .is-setting {
-    color: var(--ti-lowcode-style-setting-label-color);
-    background-color: var(--ti-lowcode-style-setting-label-bg);
+    span {
+      cursor: pointer;
+      color: var(--ti-lowcode-style-setting-label-color);
+      background-color: var(--ti-lowcode-style-setting-label-bg);
+    }
   }
   .lr-path-color {
     color: var(--ti-lowcode-spacing-lr-color);

From b8e27638a6d5a145eff2001fc06739e6856cf572 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:23:30 -0700
Subject: [PATCH 21/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../styles/src/components/size/SizeGroup.vue  | 52 ++++++++++++-------
 1 file changed, 34 insertions(+), 18 deletions(-)

diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index b2c609388..93f827881 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"
@@ -103,11 +103,14 @@
 
   <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
@@ -443,9 +446,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
+span {
+  padding: 2px;
+}
 .size-row {
   display: flex;
   margin-bottom: 8px;
+
   &:last-child {
     margin-bottom: 0;
   }
@@ -478,18 +485,17 @@ export default {
     flex: 0 0 54px;
     padding: 0 2px;
     line-height: 24px;
-    span {
-      cursor: pointer;
-      padding: 2px;
-    }
-    &.selected {
-      span {
-        color: var(--ti-lowcode-style-setting-label-color);
-        background-color: var(--ti-lowcode-style-setting-label-bg);
-      }
-    }
   }
 }
+
+.is-setting {
+  span {
+    cursor: pointer;
+    color: var(--ti-lowcode-style-setting-label-color);
+    background-color: var(--ti-lowcode-style-setting-label-bg);
+  }
+}
+
 .size-fit-content {
   display: block;
   padding: 10px;
@@ -533,6 +539,16 @@ export default {
     flex: 0 0 54px;
     padding: 0 2px;
     line-height: 28px;
+    span {
+      padding: 2px;
+    }
+    &.selected {
+      span {
+        cursor: pointer;
+        color: var(--ti-lowcode-style-setting-label-color);
+        background-color: var(--ti-lowcode-style-setting-label-bg);
+      }
+    }
   }
   .more-icon-wrap {
     display: flex;

From 317afe12c909c41469a913b68eb26e28253d1f8c Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:23:46 -0700
Subject: [PATCH 22/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../src/components/spacing/SpacingGroup.vue   | 224 ++++++++----------
 1 file changed, 101 insertions(+), 123 deletions(-)

diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
index a7703b39e..1d97af8c3 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
+              m0,0
+              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
+              m168,0
+              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
+              m0,70
+              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
+              m0,0
+              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="0" y="0" 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="60" 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="60"
+          y="25"
+          width="48"
+          height="20"
+          fill="#FFF"
+          rx="4"
+          ry="4"
+          style="pointer-events: none; stroke-width: 0"
         ></rect>
       </svg>
       <div
@@ -366,8 +328,16 @@
       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
+        x="11"
+        y="6"
+        fill="#808080"
+        font-style="italic"
+        font-weight="normal"
+        font-size="10"
+        dominant-baseline="hanging"
+      >
+        Padding
       </text>
     </svg>
     <svg
@@ -376,8 +346,16 @@
       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
+        x="12"
+        y="4"
+        fill="#808080"
+        font-style="italic"
+        font-weight="normal"
+        font-size="10"
+        dominant-baseline="hanging"
+      >
+        Margin
       </text>
     </svg>
   </div>
@@ -501,7 +479,7 @@ export default {
   display: grid;
   grid-template-columns: 36px 4px 36px 1fr 36px 4px 36px;
   grid-template-rows: 24px 4px 24px 1fr 24px 4px 24px;
-  width: 224px;
+  width: 256px;
   height: 120px;
   margin: 0 auto;
   outline-style: none;
@@ -511,21 +489,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: 30px 1fr 36px;
+    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: 38px 1fr 36px;
+    grid-template-rows: 25px minmax(16px, 1fr) 25px;
     justify-items: center;
-    width: 144px;
-    height: 64px;
+    width: 168px;
+    height: 70px;
   }
 
   .spacing-edit {
@@ -534,14 +512,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;

From c5594b872f803033ae2ca6dd498d6f40d29a8707 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:24:06 -0700
Subject: [PATCH 23/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../styles/src/components/spacing/SpacingSetting.vue      | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

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>

From f9df935cd0abe2006b06581009838bd972f41ab0 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Fri, 11 Oct 2024 01:25:09 -0700
Subject: [PATCH 24/57] feat(style-panel): modify this style-panel styles
 according to the design craft

---
 .../components/typography/TypographyGroup.vue | 444 +++++++++++-------
 .../settings/styles/src/js/styleProperty.js   |  48 +-
 2 files changed, 295 insertions(+), 197 deletions(-)

diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index 14cbfaebb..a8f902c57 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>
+        <tabs-group-configurator
+          :options="alignOptions"
+          :value="selectedAlign"
+          :label-width="54"
+          :effect="effect"
+          :placement="placement"
+          @update:modelValue="selectAlign"
+        ></tabs-group-configurator>
       </div>
     </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 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 class="style-decoration-wrap">
+          <tabs-group-configurator
+            :options="styleOptions"
+            :value="selectedFontStyle"
+            :label-width="32"
+            :effect="effect"
+            :placement="placement"
+            @update:modelValue="selectFontStyle"
+          ></tabs-group-configurator>
+          <tabs-group-configurator
+            :options="decorationOptions"
+            :value="selectedTextDecoration"
+            :label-width="32"
+            :effect="effect"
+            :placement="placement"
+            @update:modelValue="selectTextDecoration"
+          ></tabs-group-configurator>
         </div>
       </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>
-    </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 || TYPO_PROPERTY.FontWeight)) {
+        state.value = '400'
+        state.fontFamilyValue = 'Arial, "Helvetica Neue", Helvetica'
+      }
+      if (activedName.includes(TYPO_PROPERTY.FontStyle || 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;
@@ -491,6 +522,14 @@ export default {
       align-self: flex-start;
       line-height: 26px;
       color: var(--ti-lowcode-component-setting-panel-label-color);
+
+      .font-family-col {
+        width: 118px;
+      }
+
+      .font-weight-col {
+        width: 84px;
+      }
     }
 
     .typography-content {
@@ -555,11 +594,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;
       }
@@ -568,8 +607,67 @@ 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;
+
+    .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;
+      color: var(--ti-lowcode-style-setting-label-color);
+      background-color: var(--ti-lowcode-style-setting-label-bg);
     }
   }
 }
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'
   }
 ]
 

From f9cf9a270931b759542f8f3164a6e1d52ecdcd0c Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Sun, 13 Oct 2024 19:49:39 -0700
Subject: [PATCH 25/57] feat(style-panel): add style-panel can be collapsed or
 expanded

---
 packages/layout/src/DesignSettings.vue        | 20 ++++++++++-
 packages/settings/styles/src/Main.vue         | 33 ++++++++++++-------
 .../src/components/inputs/ResetButton.vue     |  6 ++--
 3 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index 993ef02a7..a7ac507ec 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 class="tabs-setting">
+      <tiny-tooltip effect="dark" :content="isCollapsed ? '展开' : '折叠'" placement="top" :visible-arrow="false">
+        <template #default> <svg-icon name="setting" @click="isCollapsed = !isCollapsed"></svg-icon> </template>
+      </tiny-tooltip>
+    </div>
   </div>
 </template>
 
@@ -29,9 +34,11 @@ export default {
     const { layoutState } = useLayout()
     const activating = computed(() => layoutState.settings.activating)
     const showMask = ref(true)
+    const isCollapsed = ref(false)
 
     return {
       showMask,
+      isCollapsed,
       activating,
       layoutState
     }
@@ -49,12 +56,22 @@ export default {
   padding-top: 12px;
   background-color: var(--ti-lowcode-setting-panel-bg-color);
 
+  .tabs-setting {
+    position: absolute;
+    top: 12px;
+    right: 16px;
+    line-height: 24px;
+    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 {
@@ -73,6 +90,7 @@ export default {
       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..f715b9679 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -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,17 +105,18 @@ export default {
     TinyInput: Input,
     VariableConfigurator
   },
-  setup() {
-    const activeNames = ref([
-      'layout',
-      'spacing',
-      'size',
-      'position',
-      'typography',
-      'backgrounds',
-      'borders',
-      'effects'
-    ])
+  props: {
+    isCollapsed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const activeNames = computed(() =>
+      props.isCollapsed
+        ? []
+        : ['layout', 'spacing', 'size', 'position', 'typography', 'backgrounds', 'borders', 'effects']
+    )
     const { getCurrentSchema } = useCanvas()
     // 获取当前节点 style 对象
     const { state, updateStyle } = useStyle() // updateStyle
@@ -246,4 +247,12 @@ export default {
     }
   }
 }
+
+.dots {
+  display: inline-block;
+  margin-left: 4px;
+  vertical-align: middle;
+  border: 2px solid #1476ff;
+  border-radius: 2px;
+}
 </style>
diff --git a/packages/settings/styles/src/components/inputs/ResetButton.vue b/packages/settings/styles/src/components/inputs/ResetButton.vue
index c739468e4..bc269f7e2 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(--ti-lowcode-base-primary-color-1);
+  border: 1px solid var(--ti-lowcode-base-primary-color-1);
 }
 .reset-desc {
   display: block;
   padding: 8px 4px;
   text-align: center;
-  color: var(--ti-lowcode-common-third-text-color);
+  color: var(--ti-lowcode-radio-button-active-bg);
 }
 </style>

From 3904ccb5e6db2dd4cf2cd6545ef31fbd4e354756 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Mon, 14 Oct 2024 00:20:05 -0700
Subject: [PATCH 26/57] feat(style-panel): modify tabGroupComponent style
 error;

---
 .../src/tabs-group-configurator/TabsGroupConfigurator.vue    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 9b82be578..3383b0eb0 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -4,7 +4,7 @@
       v-for="(item, index) in commonOptions"
       :key="item.label"
       :class="['tab-item', { selected: picked === (valueKey ? item.value[valueKey] : item.value) }]"
-      :style="{ width: getItemWidth(index === commonOptions.length - 1) + 'px' }"
+      :style="{ width: getItemWidth(collapsedOptions.length && index === commonOptions.length - 1) + 'px' }"
       @click.stop="change(item.value)"
     >
       <span :class="['label-text', index < commonOptions.length - 1 ? 'border-right' : '']">
@@ -22,7 +22,7 @@
           </template>
         </tiny-popover>
         <tiny-popover
-          v-if="index === commonOptions.length - 1"
+          v-if="collapsedOptions.length && index === commonOptions.length - 1"
           v-model="showMore"
           placement="bottom-start"
           :visible-arrow="false"
@@ -139,6 +139,7 @@ export default {
 
     return {
       picked,
+      collapsedOptions,
       commonOptions,
       foldsOptions,
       showMore,

From 1f703c2d7fa287499f79fe9fbf0ac9ea4ea885f4 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Mon, 14 Oct 2024 01:42:57 -0700
Subject: [PATCH 27/57] =?UTF-8?q?feat(style-panel):=20=E5=AF=B9=E5=85=B6?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E7=A8=BF=E5=90=8E=E4=BF=AE=E6=94=B9=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TabsGroupConfigurator.vue                 | 85 +++++++++++--------
 .../components/background/BackgroundGroup.vue |  3 +-
 .../components/background/LinearGradient.vue  |  6 +-
 .../src/components/effects/EffectGroup.vue    |  3 +-
 .../src/components/inputs/ModalMask.vue       | 11 ++-
 .../src/components/inputs/NumericSelect.vue   |  2 +-
 .../styles/src/components/layout/FlexBox.vue  |  2 -
 .../src/components/layout/LayoutGroup.vue     |  3 +-
 .../src/components/position/PositionGroup.vue |  3 +-
 .../styles/src/components/size/SizeGroup.vue  |  6 +-
 .../components/typography/TypographyGroup.vue |  3 +-
 11 files changed, 75 insertions(+), 52 deletions(-)

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 3383b0eb0..c90b26691 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -21,33 +21,30 @@
             <svg-icon v-if="item.icon" :name="item.icon" class="bem-Svg"></svg-icon>
           </template>
         </tiny-popover>
-        <tiny-popover
+        <svg-icon
           v-if="collapsedOptions.length && index === commonOptions.length - 1"
-          v-model="showMore"
-          placement="bottom-start"
-          :visible-arrow="false"
-          :width="getItemWidth(true)"
-          trigger="manual"
-        >
-          <template #reference>
-            <svg-icon
-              name="down-arrow"
-              class="bem-Svg"
-              color="var(--ti-lowcode-base-default-button-border-disable-color)"
-              @click.stop="showMore = !showMore"
-            ></svg-icon>
-          </template>
-          <div
-            v-for="foldsItem in foldsOptions"
-            class="collapse-item"
-            :key="foldsItem.label"
-            @click.stop="change(foldsItem.value)"
-          >
-            <span v-if="foldsItem.label">{{ foldsItem.label }}</span>
-            <svg-icon v-if="foldsItem.icon" :name="foldsItem.icon" class="bem-Svg"></svg-icon>
-          </div>
-        </tiny-popover>
+          name="down-arrow"
+          class="bem-Svg"
+          color="var(--ti-lowcode-base-default-button-border-disable-color)"
+          @click.stop="showMore = !showMore"
+        ></svg-icon>
       </span>
+      <div
+        v-if="collapsedOptions.length && index === commonOptions.length - 1 && showMore"
+        class="more-tabs-wrap"
+        :visible-arrow="false"
+        :style="{ width: getItemWidth(true) }"
+      >
+        <div
+          v-for="foldsItem in foldsOptions"
+          class="collapse-item"
+          :key="foldsItem.label"
+          @click.stop="change(foldsItem.value)"
+        >
+          <span v-if="foldsItem.label">{{ foldsItem.label }}</span>
+          <svg-icon v-if="foldsItem.icon" :name="foldsItem.icon" class="bem-Svg"></svg-icon>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -163,6 +160,7 @@ export default {
     align-items: center;
     text-align: center;
     cursor: pointer;
+    position: relative;
     .label-text {
       width: 100%;
       height: 16px;
@@ -170,6 +168,32 @@ export default {
       .bem-Svg {
         margin-top: -3px;
       }
+
+      .show-more-tabs {
+        padding: 8px;
+      }
+    }
+    .more-tabs-wrap {
+      padding: 8px 0;
+      position: absolute;
+      top: 24px;
+      right: 0;
+      background-color: #fff;
+      z-index: 2018;
+      border-radius: 4px;
+      box-shadow: 0px 0px 10px 0px rgba(25, 25, 25, 0.15);
+      text-align: left;
+      .collapse-item {
+        padding: 0 8px;
+        font-size: 12px;
+        line-height: 24px;
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--ti-lowcode-base-gray-101);
+          border-radius: 4px;
+        }
+      }
     }
     &.selected {
       background-color: var(--ti-lowcode-base-gray-101);
@@ -185,17 +209,6 @@ export default {
     outline: none;
   }
 }
-.collapse-item {
-  font-size: 12px;
-  line-height: 24px;
-  padding-left: 6px;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--ti-lowcode-base-gray-101);
-    border-radius: 4px;
-  }
-}
 
 .border-right {
   border-right: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 6529d5c81..90f2eeeb5 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -556,7 +556,8 @@ export default {
   .is-setting {
     span {
       cursor: pointer;
-      color: var(--ti-lowcode-style-setting-label-color);
+      border-radius: 2px;
+      color: var(--ti-lowcode-base-text-color-2);
       background-color: var(--ti-lowcode-style-setting-label-bg);
     }
   }
diff --git a/packages/settings/styles/src/components/background/LinearGradient.vue b/packages/settings/styles/src/components/background/LinearGradient.vue
index 8368a811f..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="#DBDBDB"></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" color="#DBDBDB"></svg-icon></span>
-        <span @click="clockwiseRotate"><svg-icon name="clock-wise" color="#DBDBDB"></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/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue
index 785e10857..275d89520 100644
--- a/packages/settings/styles/src/components/effects/EffectGroup.vue
+++ b/packages/settings/styles/src/components/effects/EffectGroup.vue
@@ -537,7 +537,8 @@ export default {
   .is-setting {
     span {
       cursor: pointer;
-      color: var(--ti-lowcode-style-setting-label-color);
+      border-radius: 2px;
+      color: var(--ti-lowcode-base-text-color-2);
       background-color: var(--ti-lowcode-style-setting-label-bg);
     }
   }
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 30dfd2bc4..3346e0a21 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -3,7 +3,10 @@
     <div class="modal-wrapper">
       <div :class="[isAlignBody ? '' : 'modal-mask']" @click="$emit('close')"></div>
 
-      <div :style="{ top: topStyle + 'px' }" :class="['modal-content', { 'align-body': isAlignBody }]">
+      <div
+        :style="{ top: topStyle + 'px' }"
+        :class="['modal-content', { 'align-body': isAlignBody }, { 'modal-padding': isAlignBody }]"
+      >
         <slot></slot>
       </div>
     </div>
@@ -93,10 +96,12 @@ export default {
     max-height: 100%;
     box-sizing: border-box;
   }
-
+  .modal-padding {
+    padding: 10px 16px;
+  }
   .align-body {
     right: 280px;
-    left: calc(100% - 287px - 280px);
+    left: calc(100% - 287px - 280px - 16px);
   }
 }
 </style>
diff --git a/packages/settings/styles/src/components/inputs/NumericSelect.vue b/packages/settings/styles/src/components/inputs/NumericSelect.vue
index 42b3b852e..d16b30228 100644
--- a/packages/settings/styles/src/components/inputs/NumericSelect.vue
+++ b/packages/settings/styles/src/components/inputs/NumericSelect.vue
@@ -165,7 +165,7 @@ export default {
 
     .suffix-text {
       font-size: 12px;
-      color: var(--ti-lowcode-text-color);
+      color: var(--ti-lowcode-common-text-color-5);
     }
 
     &:hover {
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 8a7c304b5..1e4253e0e 100644
--- a/packages/settings/styles/src/components/layout/LayoutGroup.vue
+++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue
@@ -138,7 +138,8 @@ export default {
     &.selected {
       span {
         cursor: pointer;
-        color: var(--ti-lowcode-style-setting-label-color);
+        border-radius: 2px;
+        color: var(--ti-lowcode-base-text-color-2);
         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 1a534c475..67317df3e 100644
--- a/packages/settings/styles/src/components/position/PositionGroup.vue
+++ b/packages/settings/styles/src/components/position/PositionGroup.vue
@@ -601,7 +601,8 @@ export default {
   .is-setting {
     span {
       cursor: pointer;
-      color: var(--ti-lowcode-style-setting-label-color);
+      border-radius: 2px;
+      color: var(--ti-lowcode-base-text-color-2);
       background-color: var(--ti-lowcode-style-setting-label-bg);
     }
   }
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 93f827881..b6ead3ecf 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -491,7 +491,8 @@ span {
 .is-setting {
   span {
     cursor: pointer;
-    color: var(--ti-lowcode-style-setting-label-color);
+    border-radius: 2px;
+    color: var(--ti-lowcode-base-text-color-2);
     background-color: var(--ti-lowcode-style-setting-label-bg);
   }
 }
@@ -545,7 +546,8 @@ span {
     &.selected {
       span {
         cursor: pointer;
-        color: var(--ti-lowcode-style-setting-label-color);
+        border-radius: 2px;
+        color: var(--ti-lowcode-base-text-color-2);
         background-color: var(--ti-lowcode-style-setting-label-bg);
       }
     }
diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index a8f902c57..fd47e3a06 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -666,7 +666,8 @@ export default {
   .is-setting {
     span {
       cursor: pointer;
-      color: var(--ti-lowcode-style-setting-label-color);
+      border-radius: 2px;
+      color: var(--ti-lowcode-base-text-color-2);
       background-color: var(--ti-lowcode-style-setting-label-bg);
     }
   }

From e92b717f173d989a9b3308b29ebd9bd1cc6fbd98 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Tue, 15 Oct 2024 00:41:16 -0700
Subject: [PATCH 28/57] =?UTF-8?q?feat(style-pane):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F=E9=A2=9C=E8=89=B2=E5=92=8C?=
 =?UTF-8?q?=E9=97=B4=E8=B7=9D=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TabsGroupConfigurator.vue                 |  2 +-
 packages/settings/styles/src/Main.vue         | 25 ++++++++++++++-----
 .../components/background/BackgroundGroup.vue | 11 ++++----
 .../src/components/inputs/ModalMask.vue       |  2 +-
 .../src/components/spacing/SpacingGroup.vue   | 20 +++++++--------
 5 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index c90b26691..32535173a 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -184,7 +184,7 @@ export default {
       box-shadow: 0px 0px 10px 0px rgba(25, 25, 25, 0.15);
       text-align: left;
       .collapse-item {
-        padding: 0 8px;
+        padding: 0 16px;
         font-size: 12px;
         line-height: 24px;
         cursor: pointer;
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index f715b9679..da8c74679 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>
@@ -112,17 +112,29 @@ export default {
     }
   },
   setup(props) {
-    const activeNames = computed(() =>
-      props.isCollapsed
-        ? []
-        : ['layout', 'spacing', 'size', 'position', 'typography', 'backgrounds', 'borders', 'effects']
-    )
+    const styleCategoryGroup = [
+      'layout',
+      'spacing',
+      'size',
+      'position',
+      'typography',
+      '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
@@ -193,6 +205,7 @@ export default {
       activeNames,
       CSS_TYPE,
       open,
+      handoverGroup,
       save,
       close,
       updateStyle,
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 90f2eeeb5..cd7d680bc 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -429,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 #ebebeb;
+    background-color: #fff;
+    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: #fff;
+      border-bottom: 1px solid #ebebeb;
       pointer-events: all;
       font-size: 11px;
       font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 3346e0a21..c74b6e804 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -91,7 +91,7 @@ export default {
     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: #fff;
     overflow: auto;
     max-height: 100%;
     box-sizing: border-box;
diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
index 1d97af8c3..78639d972 100644
--- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
@@ -171,7 +171,7 @@
             <path
               mode="delta"
               d="
-              m0,0
+              m5,-4
               h168
               l-36,25
               h-71
@@ -189,7 +189,7 @@
             <path
               mode="delta"
               d="
-              m168,0
+              m173,-4
               v70
               l-60,-24
               v-15
@@ -207,7 +207,7 @@
             <path
               mode="delta"
               d="
-              m0,70
+              m5,66
               h168
               l-36,-25
               h-71
@@ -225,7 +225,7 @@
             <path
               mode="delta"
               d="
-              m0,0
+              m5,-4
               v70
               l60,-24
               v-15
@@ -239,7 +239,7 @@
           </g>
         </g>
         <clipPath id="padding-outer">
-          <rect x="0" y="0" width="168" height="70" fill="#E6E6E6" rx="4" ry="4" 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"
@@ -254,7 +254,7 @@
           style="pointer-events: none; stroke-width: 0"
         ></rect>
         <clipPath id="padding-inner">
-          <rect x="60" y="25" width="48" height="20" fill="#FFF" rx="4" ry="4" style="pointer-events: none"></rect>
+          <rect x="65" y="21" width="48" height="20" fill="#FFF" rx="4" ry="4" style="pointer-events: none"></rect>
         </clipPath>
         <rect
           class="stroke"
@@ -477,8 +477,8 @@ 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;
+  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;
@@ -489,7 +489,7 @@ export default {
   .spacing-max-icon {
     grid-area: 1 / 1 / -1 / -1;
     display: grid;
-    grid-template-columns: 30px 1fr 36px;
+    grid-template-columns: 45px 1fr 45px;
     grid-template-rows: 25px minmax(16px, 1fr) 25px;
     justify-items: center;
     width: 256px;
@@ -499,7 +499,7 @@ export default {
   .spacing-min-icon {
     grid-area: 3 / 3 / span 3 / span 3;
     display: grid;
-    grid-template-columns: 38px 1fr 36px;
+    grid-template-columns: 56px 54px 56px;
     grid-template-rows: 25px minmax(16px, 1fr) 25px;
     justify-items: center;
     width: 168px;

From 1aa3d9a8825590f983fe97e858409dfd94d5ae4a Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Tue, 15 Oct 2024 01:30:07 -0700
Subject: [PATCH 29/57] =?UTF-8?q?feat(style-panel):=20=E4=BF=AE=E5=A4=8Des?=
 =?UTF-8?q?lint=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../styles/src/components/background/RadialGradient.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/settings/styles/src/components/background/RadialGradient.vue b/packages/settings/styles/src/components/background/RadialGradient.vue
index bbddffb52..69e882ece 100644
--- a/packages/settings/styles/src/components/background/RadialGradient.vue
+++ b/packages/settings/styles/src/components/background/RadialGradient.vue
@@ -87,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*/

From 9e7322eee1790ede69f4fa9567771728c106dc45 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Tue, 15 Oct 2024 04:33:42 -0700
Subject: [PATCH 30/57] =?UTF-8?q?feat(style-panel):=20=E4=BF=AE=E6=94=B9re?=
 =?UTF-8?q?view=E6=84=8F=E8=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NumberConfigurator.vue                    |  2 +-
 .../TabsGroupConfigurator.vue                 | 25 +++++++------------
 .../background/BackgroundImageSetting.vue     | 16 ++++++------
 .../components/background/ImageSetting.vue    |  6 ++---
 .../components/background/RadialGradient.vue  |  2 +-
 .../src/components/inputs/ModalMask.vue       |  4 +--
 .../src/components/layout/LayoutGroup.vue     |  6 ++---
 .../styles/src/components/size/SizeGroup.vue  |  2 +-
 .../components/typography/TypographyGroup.vue |  6 ++---
 9 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/packages/configurator/src/number-configurator/NumberConfigurator.vue b/packages/configurator/src/number-configurator/NumberConfigurator.vue
index 87becc0e9..80bb03642 100644
--- a/packages/configurator/src/number-configurator/NumberConfigurator.vue
+++ b/packages/configurator/src/number-configurator/NumberConfigurator.vue
@@ -183,7 +183,7 @@ export default {
   .meta-numeric-unit {
     position: absolute;
     top: 2px;
-    height: 22px;
+    height: calc(100% - 2px);
     span {
       color: var(--ti-lowcode-numeric-unit-text-color);
       font-size: 14px;
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 32535173a..5c0a6c69d 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -2,7 +2,7 @@
   <div class="tab-container">
     <div
       v-for="(item, index) in commonOptions"
-      :key="item.label"
+      :key="item.label || item.icon"
       :class="['tab-item', { selected: picked === (valueKey ? item.value[valueKey] : item.value) }]"
       :style="{ width: getItemWidth(collapsedOptions.length && index === commonOptions.length - 1) + 'px' }"
       @click.stop="change(item.value)"
@@ -32,13 +32,12 @@
       <div
         v-if="collapsedOptions.length && index === commonOptions.length - 1 && showMore"
         class="more-tabs-wrap"
-        :visible-arrow="false"
         :style="{ width: getItemWidth(true) }"
       >
         <div
           v-for="foldsItem in foldsOptions"
           class="collapse-item"
-          :key="foldsItem.label"
+          :key="foldsItem.label || foldsItem.icon"
           @click.stop="change(foldsItem.value)"
         >
           <span v-if="foldsItem.label">{{ foldsItem.label }}</span>
@@ -57,7 +56,7 @@ export default {
     TinyPopover: Popover
   },
   props: {
-    value: {
+    modelValue: {
       type: String,
       default: ''
     },
@@ -74,8 +73,8 @@ export default {
       default: 'top'
     },
     labelWidth: {
-      type: String,
-      default: '60'
+      type: Number,
+      default: 60
     },
     options: {
       type: Array,
@@ -84,17 +83,11 @@ export default {
   },
   emits: ['update:modelValue'],
   setup(props, { emit }) {
-    const picked = ref()
+    const picked = ref(null)
     const uncollapsedOptions = ref(props.options.filter((option) => !option.collapsed))
     const collapsedOptions = ref(props.options.filter((option) => option.collapsed))
-    const commonOptions = ref(
-      collapsedOptions.value.length
-        ? [...uncollapsedOptions.value, collapsedOptions.value[0]]
-        : uncollapsedOptions.value
-    )
-    const foldsOptions = ref(
-      collapsedOptions.value.length <= 1 ? [] : collapsedOptions.value.filter((item, index) => index > 0)
-    )
+    const commonOptions = ref(uncollapsedOptions.value)
+    const foldsOptions = ref()
     const showMore = ref(false)
 
     const getItemWidth = (collapsed = false) => {
@@ -102,7 +95,7 @@ export default {
     }
 
     watch(
-      () => props.value,
+      () => props.modelValue,
       (value) => {
         picked.value = value
         if (collapsedOptions.value.length === 0) {
diff --git a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
index 88bf719d1..d73d87b1c 100644
--- a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
+++ b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
@@ -4,7 +4,7 @@
       <label class="row-label">类型</label>
       <tabs-group-configurator
         :options="state.typeLists"
-        :value="state.styleComponent"
+        :modelValue="state.styleComponent"
         value-key="styleComponent"
         :label-width="52"
         :effect="effect"
@@ -112,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.imageUrl})`,
-          [BACKGROUND_PROPERTY.BackgroundPosition]: item.position,
-          [BACKGROUND_PROPERTY.BackgroundSize]: item.size
+          [BACKGROUND_PROPERTY.BackgroundImage]: `url(${value.imageUrl})`,
+          [BACKGROUND_PROPERTY.BackgroundPosition]: value.position,
+          [BACKGROUND_PROPERTY.BackgroundSize]: value.size
         }
       } else {
         styleObj = {
-          [BACKGROUND_PROPERTY.BackgroundImage]: item.imageUrl,
+          [BACKGROUND_PROPERTY.BackgroundImage]: value.imageUrl,
           [BACKGROUND_PROPERTY.BackgroundPosition]: null,
           [BACKGROUND_PROPERTY.BackgroundSize]: null,
           [BACKGROUND_PROPERTY.BackgroundRepeat]: null,
@@ -131,7 +131,7 @@ export default {
         }
       }
 
-      state.styleComponent = item.styleComponent
+      state.styleComponent = value.styleComponent
       updateStyle(styleObj)
     }
 
diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
index 6cbd9ff28..68221eb6b 100644
--- a/packages/settings/styles/src/components/background/ImageSetting.vue
+++ b/packages/settings/styles/src/components/background/ImageSetting.vue
@@ -21,7 +21,7 @@
     <label class="size-label">大小</label>
     <tabs-group-configurator
       :options="BACKGROUND_SIZE_OPTIONS"
-      :value="state.sizeSelected"
+      :modelValue="state.sizeSelected"
       :label-width="69"
       @update:modelValue="selectSize"
     ></tabs-group-configurator>
@@ -55,7 +55,7 @@
     <label class="row-label">重复</label>
     <tabs-group-configurator
       :options="REPEAT_OPTIONS"
-      :value="state.repeat"
+      :modelValue="state.repeat"
       :label-width="53"
       @update:modelValue="selectRepeat"
     ></tabs-group-configurator>
@@ -64,7 +64,7 @@
     <label class="row-label">固定</label>
     <tabs-group-configurator
       :options="FIXED_OPTIONS"
-      :value="state.fixedSelected"
+      :modelValue="state.fixedSelected"
       :label-width="105"
       @update:modelValue="selectFixed"
     ></tabs-group-configurator>
diff --git a/packages/settings/styles/src/components/background/RadialGradient.vue b/packages/settings/styles/src/components/background/RadialGradient.vue
index 69e882ece..4fe99946c 100644
--- a/packages/settings/styles/src/components/background/RadialGradient.vue
+++ b/packages/settings/styles/src/components/background/RadialGradient.vue
@@ -4,7 +4,7 @@
     <label class="row-label">Size</label>
     <tabs-group-configurator
       :options="RADIAL_SIZE_LIST"
-      :value="state.radialSize"
+      :modelValue="state.radialSize"
       :label-width="52"
       :effect="effect"
       :placement="placement"
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index c74b6e804..409de36e6 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -52,8 +52,8 @@ export default {
     const topStyle = ref(0)
 
     onMounted(() => {
-      if (isAlignBody.value) {
-        const modalContentEle = document.querySelector('.modal-content')
+      const modalContentEle = document.querySelector('.modal-content')
+      if (isAlignBody.value && modalContentEle) {
         topStyle.value = modal.top < modalContentEle.offsetHeight ? 40 : modal.top - modalContentEle.offsetHeight + 40
       } else {
         topStyle.value = modal.top - 34
diff --git a/packages/settings/styles/src/components/layout/LayoutGroup.vue b/packages/settings/styles/src/components/layout/LayoutGroup.vue
index 1e4253e0e..f5ed16982 100644
--- a/packages/settings/styles/src/components/layout/LayoutGroup.vue
+++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue
@@ -6,7 +6,7 @@
     <div class="display-content">
       <tabs-group-configurator
         :options="layoutOpts"
-        :value="picked"
+        :modelValue="picked"
         @update:modelValue="select"
       ></tabs-group-configurator>
     </div>
@@ -53,9 +53,7 @@ export default {
   setup(props, { emit }) {
     const { setPosition } = useModal()
 
-    const picked = computed(() => {
-      return props.display
-    })
+    const picked = computed(() => props.display)
     const showModal = ref(false)
 
     const select = (type) => {
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index b6ead3ecf..5aee65d03 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -93,7 +93,7 @@
     </div>
     <tabs-group-configurator
       :options="overflowOpt"
-      :value="selectedOverflow"
+      :modelValue="selectedOverflow"
       :label-width="50"
       :effect="effect"
       :placement="placement"
diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index fd47e3a06..7302d8794 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -92,7 +92,7 @@
         </label>
         <tabs-group-configurator
           :options="alignOptions"
-          :value="selectedAlign"
+          :modelValue="selectedAlign"
           :label-width="54"
           :effect="effect"
           :placement="placement"
@@ -115,7 +115,7 @@
         <div class="style-decoration-wrap">
           <tabs-group-configurator
             :options="styleOptions"
-            :value="selectedFontStyle"
+            :modelValue="selectedFontStyle"
             :label-width="32"
             :effect="effect"
             :placement="placement"
@@ -123,7 +123,7 @@
           ></tabs-group-configurator>
           <tabs-group-configurator
             :options="decorationOptions"
-            :value="selectedTextDecoration"
+            :modelValue="selectedTextDecoration"
             :label-width="32"
             :effect="effect"
             :placement="placement"

From fdb53f16f8c703f1e299d6e275e6f769be571c9b Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Tue, 15 Oct 2024 17:50:53 -0700
Subject: [PATCH 31/57] =?UTF-8?q?feat(style-panel):=20=E4=BF=AE=E5=A4=8DAI?=
 =?UTF-8?q?=E7=9A=84review=E6=84=8F=E8=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../styles/src/components/typography/TypographyGroup.vue      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index 7302d8794..6f1722a7a 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -410,11 +410,11 @@ export default {
       } else {
         updateStyle({ [activedName]: null })
       }
-      if (activedName.includes(TYPO_PROPERTY.FontFamily || TYPO_PROPERTY.FontWeight)) {
+      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 || TYPO_PROPERTY.TextDecoration)) {
+      if (activedName.includes(TYPO_PROPERTY.FontStyle) || activedName.includes(TYPO_PROPERTY.TextDecoration)) {
         selectedFontStyle.value = ''
         selectedTextDecoration.value = ''
       }

From a13a6acb2d2c76151a005570660ea961a46e3ea4 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Tue, 22 Oct 2024 23:41:57 -0700
Subject: [PATCH 32/57] feat(style-panel): use color variables insteads color
 values;

---
 .../SliderConfigurator.vue                    |   7 +-
 .../TabsGroupConfigurator.vue                 | 157 ++++++++----------
 packages/settings/styles/src/Main.vue         |   2 +-
 .../components/background/BackgroundGroup.vue |  20 +--
 .../components/background/ImageSetting.vue    |  10 +-
 .../components/background/RadialGradient.vue  |   4 +-
 .../src/components/inputs/ModalMask.vue       |  19 ++-
 .../styles/src/components/size/SizeGroup.vue  |  25 +--
 .../src/components/spacing/SpacingGroup.vue   |   2 +-
 packages/theme/light/base.less                |   1 +
 packages/theme/light/setting-style.less       |   6 +
 11 files changed, 126 insertions(+), 127 deletions(-)

diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index fc6f1f2f4..a08dce6ff 100644
--- a/packages/configurator/src/slider-configurator/SliderConfigurator.vue
+++ b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -133,7 +133,8 @@ export default {
     padding: 0;
     cursor: pointer;
     border: 0;
-    background: -webkit-linear-gradient(#fff, #fff) no-repeat #ccc;
+    background: -webkit-linear-gradient(var(--ti-lowcode-base-gray-0), var(--ti-lowcode-base-gray-0)) no-repeat
+      var(--ti-lowcode-breadcrumb-icon-color);
     background-size: 0% 100%;
     position: relative;
     outline: 0;
@@ -145,7 +146,7 @@ export default {
     height: 10px;
     border-radius: 50%;
     border: 0;
-    background-color: #fff;
+    background-color: var(--ti-lowcode-base-bg-5);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
     -webkit-transition: border-color 0.15s, background-color 0.15s;
     transition: border-color 0.15s, background-color 0.15s;
@@ -156,7 +157,7 @@ export default {
   }
   input[type='range']::-webkit-slider-thumb:active {
     border: 0;
-    background-color: #fff;
+    background-color: var(--ti-lowcode-base-bg-5);
   }
 }
 </style>
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 5c0a6c69d..81c1e3b65 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -8,9 +8,9 @@
       @click.stop="change(item.value)"
     >
       <span :class="['label-text', index < commonOptions.length - 1 ? 'border-right' : '']">
-        <span v-if="item?.label">{{ item.label }}</span>
+        <span v-if="item && item.label">{{ item.label }}</span>
         <tiny-popover
-          v-if="item?.icon"
+          v-if="item && item.icon"
           :effect="effect"
           :placement="placement"
           :visible-arrow="false"
@@ -40,103 +40,88 @@
           :key="foldsItem.label || foldsItem.icon"
           @click.stop="change(foldsItem.value)"
         >
-          <span v-if="foldsItem.label">{{ foldsItem.label }}</span>
-          <svg-icon v-if="foldsItem.icon" :name="foldsItem.icon" class="bem-Svg"></svg-icon>
+          <span v-if="foldsItem && foldsItem.label">{{ foldsItem.label }}</span>
+          <svg-icon v-if="foldsItem && foldsItem.icon" :name="foldsItem.icon" class="bem-Svg"></svg-icon>
         </div>
       </div>
     </div>
   </div>
 </template>
-<script>
-import { ref, watch } from 'vue'
-import { Popover } from '@opentiny/vue'
+<script setup>
+import { ref, watch, defineProps, defineEmits } from 'vue'
+import { Popover as TinyPopover } from '@opentiny/vue'
 
-export default {
-  components: {
-    TinyPopover: Popover
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
   },
-  props: {
-    modelValue: {
-      type: String,
-      default: ''
-    },
-    valueKey: {
-      type: String,
-      default: ''
-    },
-    effect: {
-      type: String,
-      default: 'dark'
-    },
-    placement: {
-      type: String,
-      default: 'top'
-    },
-    labelWidth: {
-      type: Number,
-      default: 60
-    },
-    options: {
-      type: Array,
-      default: () => []
-    }
+  valueKey: {
+    type: String,
+    default: ''
+  },
+  effect: {
+    type: String,
+    default: 'dark'
+  },
+  placement: {
+    type: String,
+    default: 'top'
+  },
+  labelWidth: {
+    type: Number,
+    default: 60
   },
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    const picked = ref(null)
-    const uncollapsedOptions = ref(props.options.filter((option) => !option.collapsed))
-    const collapsedOptions = ref(props.options.filter((option) => option.collapsed))
-    const commonOptions = ref(uncollapsedOptions.value)
-    const foldsOptions = ref()
-    const showMore = ref(false)
+  options: {
+    type: Array,
+    default: () => []
+  }
+})
 
-    const getItemWidth = (collapsed = false) => {
-      return `${parseInt(props.labelWidth, 10) + (collapsed ? 20 : 0)}`
-    }
+const emit = defineEmits(['update:modelValue'])
 
-    watch(
-      () => props.modelValue,
-      (value) => {
-        picked.value = value
-        if (collapsedOptions.value.length === 0) {
-          return
-        }
-        if (!value) {
-          commonOptions.value = [...uncollapsedOptions.value, collapsedOptions.value[0]]
-          foldsOptions.value = collapsedOptions.value.filter((item, index) => index > 0)
-        } else {
-          const isFoldsValue = foldsOptions.value.find((item) =>
-            props.valueKey ? item.value[props.valueKey] === value : item.value === value
-          )
-          if (isFoldsValue) {
-            commonOptions.value[commonOptions.value.length - 1] = isFoldsValue
-            foldsOptions.value = collapsedOptions.value.filter((item) =>
-              props.valueKey ? item.value[props.valueKey] !== value : item.value !== value
-            )
-          }
-        }
-      },
-      { immediate: true }
-    )
+const picked = ref(null)
+const uncollapsedOptions = ref(props.options.filter((option) => !option.collapsed))
+const collapsedOptions = ref(props.options.filter((option) => option.collapsed))
+const commonOptions = ref(uncollapsedOptions.value)
+const foldsOptions = ref([])
+const showMore = ref(false)
+
+const getItemWidth = (collapsed = false) => {
+  return `${parseInt(props.labelWidth, 10) + (collapsed ? 20 : 0)}`
+}
 
-    const change = (val) => {
-      if (picked.value === val) {
-        return
+watch(
+  () => props.modelValue,
+  (value) => {
+    picked.value = value
+    if (collapsedOptions.value.length === 0) {
+      return
+    }
+    if (!value) {
+      commonOptions.value = [...uncollapsedOptions.value, collapsedOptions.value[0]]
+      foldsOptions.value = collapsedOptions.value.filter((item, index) => index > 0)
+    } else {
+      const isFoldsValue = foldsOptions.value.find((item) =>
+        props.valueKey ? item.value[props.valueKey] === value : item.value === value
+      )
+      if (isFoldsValue) {
+        commonOptions.value[commonOptions.value.length - 1] = isFoldsValue
+        foldsOptions.value = collapsedOptions.value.filter((item) =>
+          props.valueKey ? item.value[props.valueKey] !== value : item.value !== value
+        )
       }
-      emit('update:modelValue', val)
-      showMore.value = false
     }
+  },
+  { immediate: true }
+)
 
-    return {
-      picked,
-      collapsedOptions,
-      commonOptions,
-      foldsOptions,
-      showMore,
-      getItemWidth,
-      change
-    }
+const change = (val) => {
+  if (picked.value === val) {
+    return
   }
+  emit('update:modelValue', val)
+  showMore.value = false
 }
 </script>
 
@@ -145,7 +130,7 @@ export default {
   max-width: 210px;
   height: 24px;
   font-size: 12px;
-  background-color: #f6f6f6;
+  background-color: var(--ti-lowcode-setting-style-tab-bg-color);
   display: flex;
   border-radius: 4px;
   .tab-item {
@@ -171,7 +156,7 @@ export default {
       position: absolute;
       top: 24px;
       right: 0;
-      background-color: #fff;
+      background-color: var(--ti-lowcode-base-bg-5);
       z-index: 2018;
       border-radius: 4px;
       box-shadow: 0px 0px 10px 0px rgba(25, 25, 25, 0.15);
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index da8c74679..f4cf10469 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -265,7 +265,7 @@ export default {
   display: inline-block;
   margin-left: 4px;
   vertical-align: middle;
-  border: 2px solid #1476ff;
+  border: 2px solid var(--ti-lowcode-setting-style-reset-dot-color);
   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 cd7d680bc..e25c64655 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -429,8 +429,8 @@ export default {
     place-items: stretch;
     gap: 1px;
     border-radius: 2px;
-    border-top: 1px solid #ebebeb;
-    background-color: #fff;
+    border-top: 1px solid var(--ti-lowcode-base-invalidate-color);
+    background-color: var(--ti-lowcode-base-bg-5);
     margin: 12px 0;
     .image-list-item {
       display: grid;
@@ -438,8 +438,8 @@ export default {
       gap: 8px 4px;
       height: 24px;
       align-items: center;
-      background-color: #fff;
-      border-bottom: 1px solid #ebebeb;
+      background-color: var(--ti-lowcode-base-bg-5);
+      border-bottom: 1px solid var(--ti-lowcode-base-invalidate-color);
       pointer-events: all;
       font-size: 11px;
       font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
@@ -483,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(--ti-lowcode-fit-coordinate-origin-color);
       cursor: grab;
       width: 12px;
       opacity: 0;
@@ -500,7 +500,7 @@ export default {
       height: 10px;
       border-radius: 1px;
       margin: 1px;
-      box-shadow: #212121 0px 0px 0px 1px;
+      box-shadow: var(--ti-lowcode-setting-style-bg-box-shadow) 0px 0px 0px 1px;
       align-self: center;
       overflow: hidden;
       .image {
@@ -525,14 +525,14 @@ export default {
         width: 16px;
         max-height: 16px;
         border-width: 0px;
-        color: #757575;
+        color: var(--ti-lowcode-fit-coordinate-origin-color);
         background-color: transparent;
         border-radius: 2px;
         padding-left: 0px;
         padding-right: 0px;
         font-size: 13px;
         &:hover {
-          color: #d9d9d9;
+          color: var(--ti-lowcode-common-text-color-2);
         }
       }
     }
@@ -568,7 +568,7 @@ export default {
   padding: 6px 0;
 
   span {
-    color: #191919;
+    color: var(--ti-lowcode-base-text-color);
     font-weight: 600;
   }
 
diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
index 68221eb6b..79e698c3a 100644
--- a/packages/settings/styles/src/components/background/ImageSetting.vue
+++ b/packages/settings/styles/src/components/background/ImageSetting.vue
@@ -241,7 +241,7 @@ onMounted(() => {
   border-width: 1px;
   box-sizing: border-box;
   border-style: solid;
-  border: 1px dotted #dbdbdb;
+  border: 1px dotted var(--ti-lowcode-base-default-button-border-disable-color);
   border-radius: 4px;
 }
 .image-inner {
@@ -288,7 +288,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;
@@ -308,11 +308,11 @@ onMounted(() => {
     }
   }
   .size {
-    color: #595959;
+    color: var(--ti-lowcode-base-text-color-1);
   }
 }
 .choose-image {
-  border-color: #dbdbdb;
+  border-color: var(--ti-lowcode-component-setting-panel-label-color);
   outline: 0px;
   cursor: default;
   user-select: none;
@@ -327,7 +327,7 @@ onMounted(() => {
   justify-content: center;
   height: 24px;
   border-radius: 4px;
-  color: #191919;
+  color: var(--ti-lowcode-base-text-color);
   border-width: 1px;
   border-style: solid;
   align-self: center;
diff --git a/packages/settings/styles/src/components/background/RadialGradient.vue b/packages/settings/styles/src/components/background/RadialGradient.vue
index 4fe99946c..6122318b9 100644
--- a/packages/settings/styles/src/components/background/RadialGradient.vue
+++ b/packages/settings/styles/src/components/background/RadialGradient.vue
@@ -134,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;
@@ -154,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/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 409de36e6..51e9c1521 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -51,13 +51,16 @@ export default {
     const isAlignBody = ref(props.teleport === 'body')
     const topStyle = ref(0)
 
+    const calculateTopStyle = (modalContent) => {
+      if (isAlignBody.value && modalContent) {
+        return modal.top < modalContent.offsetHeight ? 40 : modal.top - modalContent.offsetHeight + 40
+      }
+      return modal.top - 34
+    }
+
     onMounted(() => {
       const modalContentEle = document.querySelector('.modal-content')
-      if (isAlignBody.value && modalContentEle) {
-        topStyle.value = modal.top < modalContentEle.offsetHeight ? 40 : modal.top - modalContentEle.offsetHeight + 40
-      } else {
-        topStyle.value = modal.top - 34
-      }
+      topStyle.value = calculateTopStyle(modalContentEle)
     })
 
     return {
@@ -91,7 +94,7 @@ export default {
     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: #fff;
+    background-color: var(--ti-lowcode-base-bg-5);
     overflow: auto;
     max-height: 100%;
     box-sizing: border-box;
@@ -100,8 +103,8 @@ export default {
     padding: 10px 16px;
   }
   .align-body {
-    right: 280px;
-    left: calc(100% - 287px - 280px - 16px);
+    right: var(--modal-right-offset, 280px);
+    left: calc(100% - var(--modal-right-offset, 287px) - var(--modal-right-offset, 280px) - 16px);
   }
 }
 </style>
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 5aee65d03..0e5cced94 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -86,7 +86,10 @@
 
   <div class="overflow-row">
     <div
-      :class="['overflow-label', { 'is-setting': getSettingFlag(SIZE_PROPERTY.Overflow), selected: selectedOverflow }]"
+      :class="[
+        'overflow-label',
+        { 'is-setting': getSettingFlag(SIZE_PROPERTY.Overflow), selected: Boolean(selectedOverflow) }
+      ]"
       @click="openSetting(SIZE_PROPERTY.Overflow, $event)"
     >
       <span>溢出</span>
@@ -488,12 +491,16 @@ span {
   }
 }
 
+.selected-label {
+  cursor: pointer;
+  border-radius: 2px;
+  color: var(--ti-lowcode-base-text-color-2);
+  background-color: var(--ti-lowcode-style-setting-label-bg);
+}
+
 .is-setting {
   span {
-    cursor: pointer;
-    border-radius: 2px;
-    color: var(--ti-lowcode-base-text-color-2);
-    background-color: var(--ti-lowcode-style-setting-label-bg);
+    .selected-label();
   }
 }
 
@@ -545,10 +552,7 @@ span {
     }
     &.selected {
       span {
-        cursor: pointer;
-        border-radius: 2px;
-        color: var(--ti-lowcode-base-text-color-2);
-        background-color: var(--ti-lowcode-style-setting-label-bg);
+        .selected-label();
       }
     }
   }
@@ -565,8 +569,7 @@ span {
     &.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 78639d972..8efae5bad 100644
--- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
@@ -537,7 +537,7 @@ export default {
     }
 
     &.is-show {
-      background-color: #6b6b6b;
+      background-color: var(--ti-lowcode-setting-style-spacing-bg);
     }
 
     &.margin-top,
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..2b0d81ce9 100644
--- a/packages/theme/light/setting-style.less
+++ b/packages/theme/light/setting-style.less
@@ -5,4 +5,10 @@
   --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-reset-bg-color: var(--ti-lowcode-base-text-color-2);
+  --ti-lowcode-setting-style-reset-dot-color: var(--ti-lowcode-base-text-color-2);
+  --ti-lowcode-setting-style-bg-box-shadow: #212121;
+  --ti-lowcode-setting-style-drag-bar-bg: #8ac2ff;
+  --ti-lowcode-setting-style-spacing-bg: #6b6b6b;
 }

From bda91338caf3d276b0a00d06060b86f82539fb3a Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 23 Oct 2024 01:03:11 -0700
Subject: [PATCH 33/57] feat(style-panel): fix AI reviews;

---
 .../TabsGroupConfigurator.vue                 | 49 +++++++++++--------
 .../src/components/inputs/ModalMask.vue       | 12 +++--
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 81c1e3b65..fb179e94f 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -4,7 +4,7 @@
       v-for="(item, index) in commonOptions"
       :key="item.label || item.icon"
       :class="['tab-item', { selected: picked === (valueKey ? item.value[valueKey] : item.value) }]"
-      :style="{ width: getItemWidth(collapsedOptions.length && index === commonOptions.length - 1) + 'px' }"
+      :style="{ width: itemWidth(collapsedOptions.length && index === commonOptions.length - 1) }"
       @click.stop="change(item.value)"
     >
       <span :class="['label-text', index < commonOptions.length - 1 ? 'border-right' : '']">
@@ -32,7 +32,7 @@
       <div
         v-if="collapsedOptions.length && index === commonOptions.length - 1 && showMore"
         class="more-tabs-wrap"
-        :style="{ width: getItemWidth(true) }"
+        :style="{ width: itemWidth(true) }"
       >
         <div
           v-for="foldsItem in foldsOptions"
@@ -48,7 +48,7 @@
   </div>
 </template>
 <script setup>
-import { ref, watch, defineProps, defineEmits } from 'vue'
+import { ref, watch, computed, defineProps, defineEmits } from 'vue'
 import { Popover as TinyPopover } from '@opentiny/vue'
 
 const props = defineProps({
@@ -91,26 +91,35 @@ const getItemWidth = (collapsed = false) => {
   return `${parseInt(props.labelWidth, 10) + (collapsed ? 20 : 0)}`
 }
 
+const itemWidth = computed((collapsed) => `${getItemWidth(collapsed)}px`)
+
+const findMatchingFoldValue = (value) =>
+  foldsOptions.value.find((item) => (props.valueKey ? item.value[props.valueKey] === value : item.value === value))
+
+const filterNonMatchingValues = (value) =>
+  collapsedOptions.value.filter((item) =>
+    props.valueKey ? item.value[props.valueKey] === value : item.value === value
+  )
+
+const updateOptionDisplay = (value) => {
+  if (!value) {
+    commonOptions.value = [...uncollapsedOptions.value, collapsedOptions.value[0]]
+    foldsOptions.value = collapsedOptions.value.slice(1)
+    return
+  }
+  const matchingFoldValue = findMatchingFoldValue(value)
+  if (matchingFoldValue) {
+    commonOptions.value[commonOptions.value.length - 1] = matchingFoldValue
+    foldsOptions.value = filterNonMatchingValues(value)
+  }
+}
+
 watch(
   () => props.modelValue,
   (value) => {
     picked.value = value
-    if (collapsedOptions.value.length === 0) {
-      return
-    }
-    if (!value) {
-      commonOptions.value = [...uncollapsedOptions.value, collapsedOptions.value[0]]
-      foldsOptions.value = collapsedOptions.value.filter((item, index) => index > 0)
-    } else {
-      const isFoldsValue = foldsOptions.value.find((item) =>
-        props.valueKey ? item.value[props.valueKey] === value : item.value === value
-      )
-      if (isFoldsValue) {
-        commonOptions.value[commonOptions.value.length - 1] = isFoldsValue
-        foldsOptions.value = collapsedOptions.value.filter((item) =>
-          props.valueKey ? item.value[props.valueKey] !== value : item.value !== value
-        )
-      }
+    if (collapsedOptions.value.length > 0) {
+      updateOptionDisplay(value)
     }
   },
   { immediate: true }
@@ -157,7 +166,7 @@ const change = (val) => {
       top: 24px;
       right: 0;
       background-color: var(--ti-lowcode-base-bg-5);
-      z-index: 2018;
+      z-index: 2200;
       border-radius: 4px;
       box-shadow: 0px 0px 10px 0px rgba(25, 25, 25, 0.15);
       text-align: left;
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 51e9c1521..383a6d633 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -4,6 +4,7 @@
       <div :class="[isAlignBody ? '' : 'modal-mask']" @click="$emit('close')"></div>
 
       <div
+        ref="modalContent"
         :style="{ top: topStyle + 'px' }"
         :class="['modal-content', { 'align-body': isAlignBody }, { 'modal-padding': isAlignBody }]"
       >
@@ -50,6 +51,7 @@ export default {
   setup(props) {
     const isAlignBody = ref(props.teleport === 'body')
     const topStyle = ref(0)
+    const modalContent = ref(null)
 
     const calculateTopStyle = (modalContent) => {
       if (isAlignBody.value && modalContent) {
@@ -59,12 +61,12 @@ export default {
     }
 
     onMounted(() => {
-      const modalContentEle = document.querySelector('.modal-content')
-      topStyle.value = calculateTopStyle(modalContentEle)
+      topStyle.value = calculateTopStyle(modalContent.value)
     })
 
     return {
       modal,
+      modalContent,
       topStyle,
       isAlignBody
     }
@@ -100,11 +102,13 @@ export default {
     box-sizing: border-box;
   }
   .modal-padding {
-    padding: 10px 16px;
+    padding: var(--ti-modal-padding-y, 10px) var(--ti-modal-padding-x, 16px);
   }
   .align-body {
     right: var(--modal-right-offset, 280px);
-    left: calc(100% - var(--modal-right-offset, 287px) - var(--modal-right-offset, 280px) - 16px);
+    left: calc(
+      100% - var(--modal-right-offset, 287px) - var(--modal-right-offset, 280px) - var(--modal-spaceing, 16px)
+    );
   }
 }
 </style>

From d451da6e0603bb11aa346c087f04eb05e10c15e6 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 23 Oct 2024 01:24:49 -0700
Subject: [PATCH 34/57] feat(style-panel): fix AI reviews

---
 .../src/tabs-group-configurator/TabsGroupConfigurator.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index fb179e94f..03339d195 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -98,7 +98,7 @@ const findMatchingFoldValue = (value) =>
 
 const filterNonMatchingValues = (value) =>
   collapsedOptions.value.filter((item) =>
-    props.valueKey ? item.value[props.valueKey] === value : item.value === value
+    props.valueKey ? item.value[props.valueKey] !== value : item.value !== value
   )
 
 const updateOptionDisplay = (value) => {

From 1a62eebef5f6a96016a3c3b0dc5042df57a5e3c3 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 23 Oct 2024 01:59:39 -0700
Subject: [PATCH 35/57] =?UTF-8?q?feat(style-panel):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E5=8F=98=E9=87=8F--ti-base=E7=B3=BB=E5=88=97?=
 =?UTF-8?q?=E4=B8=BA--te-base?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/slider-configurator/SliderConfigurator.vue   |  6 +++---
 .../TabsGroupConfigurator.vue                        |  4 ++--
 .../src/components/background/BackgroundGroup.vue    | 12 ++++++------
 .../src/components/background/ImageSetting.vue       |  6 +++---
 .../styles/src/components/effects/EffectGroup.vue    |  2 +-
 .../styles/src/components/inputs/ModalMask.vue       |  2 +-
 .../styles/src/components/inputs/ResetButton.vue     |  4 ++--
 .../styles/src/components/layout/LayoutGroup.vue     |  2 +-
 .../styles/src/components/position/PositionGroup.vue |  2 +-
 .../styles/src/components/size/SizeGroup.vue         |  2 +-
 .../src/components/typography/TypographyGroup.vue    |  2 +-
 11 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index a08dce6ff..4c46e8910 100644
--- a/packages/configurator/src/slider-configurator/SliderConfigurator.vue
+++ b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -133,7 +133,7 @@ export default {
     padding: 0;
     cursor: pointer;
     border: 0;
-    background: -webkit-linear-gradient(var(--ti-lowcode-base-gray-0), var(--ti-lowcode-base-gray-0)) no-repeat
+    background: -webkit-linear-gradient(var(--te-base-gray-1), var(--te-base-gray-1)) no-repeat
       var(--ti-lowcode-breadcrumb-icon-color);
     background-size: 0% 100%;
     position: relative;
@@ -146,7 +146,7 @@ export default {
     height: 10px;
     border-radius: 50%;
     border: 0;
-    background-color: var(--ti-lowcode-base-bg-5);
+    background-color: var(--te-base-bg-5);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
     -webkit-transition: border-color 0.15s, background-color 0.15s;
     transition: border-color 0.15s, background-color 0.15s;
@@ -157,7 +157,7 @@ export default {
   }
   input[type='range']::-webkit-slider-thumb:active {
     border: 0;
-    background-color: var(--ti-lowcode-base-bg-5);
+    background-color: var(--te-base-bg-5);
   }
 }
 </style>
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 03339d195..d2bd142f5 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -25,7 +25,7 @@
           v-if="collapsedOptions.length && index === commonOptions.length - 1"
           name="down-arrow"
           class="bem-Svg"
-          color="var(--ti-lowcode-base-default-button-border-disable-color)"
+          color="var(--te-common-border-default)"
           @click.stop="showMore = !showMore"
         ></svg-icon>
       </span>
@@ -198,6 +198,6 @@ const change = (val) => {
 }
 
 .border-right {
-  border-right: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
+  border-right: 1px solid var(--te-common-border-default);
 }
 </style>
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index e25c64655..3761fb846 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -429,8 +429,8 @@ export default {
     place-items: stretch;
     gap: 1px;
     border-radius: 2px;
-    border-top: 1px solid var(--ti-lowcode-base-invalidate-color);
-    background-color: var(--ti-lowcode-base-bg-5);
+    border-top: 1px solid var(--te-base-invalidate-color);
+    background-color: var(--te-base-bg-5);
     margin: 12px 0;
     .image-list-item {
       display: grid;
@@ -438,8 +438,8 @@ export default {
       gap: 8px 4px;
       height: 24px;
       align-items: center;
-      background-color: var(--ti-lowcode-base-bg-5);
-      border-bottom: 1px solid var(--ti-lowcode-base-invalidate-color);
+      background-color: var(--te-base-bg-5);
+      border-bottom: 1px solid var(--te-base-invalidate-color);
       pointer-events: all;
       font-size: 11px;
       font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
@@ -556,7 +556,7 @@ export default {
     span {
       cursor: pointer;
       border-radius: 2px;
-      color: var(--ti-lowcode-base-text-color-2);
+      color: var(--te-common-text-emphasize);
       background-color: var(--ti-lowcode-style-setting-label-bg);
     }
   }
@@ -568,7 +568,7 @@ export default {
   padding: 6px 0;
 
   span {
-    color: var(--ti-lowcode-base-text-color);
+    color: var(--te-common-bg-prompt);
     font-weight: 600;
   }
 
diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
index 79e698c3a..d4a317984 100644
--- a/packages/settings/styles/src/components/background/ImageSetting.vue
+++ b/packages/settings/styles/src/components/background/ImageSetting.vue
@@ -241,7 +241,7 @@ onMounted(() => {
   border-width: 1px;
   box-sizing: border-box;
   border-style: solid;
-  border: 1px dotted var(--ti-lowcode-base-default-button-border-disable-color);
+  border: 1px dotted var(--te-common-border-default);
   border-radius: 4px;
 }
 .image-inner {
@@ -308,7 +308,7 @@ onMounted(() => {
     }
   }
   .size {
-    color: var(--ti-lowcode-base-text-color-1);
+    color: var(--te-common-text-secondary);
   }
 }
 .choose-image {
@@ -327,7 +327,7 @@ onMounted(() => {
   justify-content: center;
   height: 24px;
   border-radius: 4px;
-  color: var(--ti-lowcode-base-text-color);
+  color: var(--te-common-bg-prompt);
   border-width: 1px;
   border-style: solid;
   align-self: center;
diff --git a/packages/settings/styles/src/components/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue
index 275d89520..8d48a84c0 100644
--- a/packages/settings/styles/src/components/effects/EffectGroup.vue
+++ b/packages/settings/styles/src/components/effects/EffectGroup.vue
@@ -538,7 +538,7 @@ export default {
     span {
       cursor: pointer;
       border-radius: 2px;
-      color: var(--ti-lowcode-base-text-color-2);
+      color: var(--te-common-text-emphasize);
       background-color: var(--ti-lowcode-style-setting-label-bg);
     }
   }
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 383a6d633..6202c141e 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -96,7 +96,7 @@ export default {
     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-base-bg-5);
+    background-color: var(--te-base-bg-5);
     overflow: auto;
     max-height: 100%;
     box-sizing: border-box;
diff --git a/packages/settings/styles/src/components/inputs/ResetButton.vue b/packages/settings/styles/src/components/inputs/ResetButton.vue
index bc269f7e2..0d1156f3f 100644
--- a/packages/settings/styles/src/components/inputs/ResetButton.vue
+++ b/packages/settings/styles/src/components/inputs/ResetButton.vue
@@ -34,8 +34,8 @@ export default {
   display: block;
   max-width: 100%;
   border: 0;
-  color: var(--ti-lowcode-base-primary-color-1);
-  border: 1px solid var(--ti-lowcode-base-primary-color-1);
+  color: var(--te-common-text-primary);
+  border: 1px solid var(--te-common-text-primary);
 }
 .reset-desc {
   display: block;
diff --git a/packages/settings/styles/src/components/layout/LayoutGroup.vue b/packages/settings/styles/src/components/layout/LayoutGroup.vue
index f5ed16982..6d927efbd 100644
--- a/packages/settings/styles/src/components/layout/LayoutGroup.vue
+++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue
@@ -137,7 +137,7 @@ export default {
       span {
         cursor: pointer;
         border-radius: 2px;
-        color: var(--ti-lowcode-base-text-color-2);
+        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 67317df3e..671173925 100644
--- a/packages/settings/styles/src/components/position/PositionGroup.vue
+++ b/packages/settings/styles/src/components/position/PositionGroup.vue
@@ -602,7 +602,7 @@ export default {
     span {
       cursor: pointer;
       border-radius: 2px;
-      color: var(--ti-lowcode-base-text-color-2);
+      color: var(--te-common-text-emphasize);
       background-color: var(--ti-lowcode-style-setting-label-bg);
     }
   }
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 0e5cced94..58f209bf4 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -494,7 +494,7 @@ span {
 .selected-label {
   cursor: pointer;
   border-radius: 2px;
-  color: var(--ti-lowcode-base-text-color-2);
+  color: var(--te-common-text-emphasize);
   background-color: var(--ti-lowcode-style-setting-label-bg);
 }
 
diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index 6f1722a7a..c82d0cc43 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -667,7 +667,7 @@ export default {
     span {
       cursor: pointer;
       border-radius: 2px;
-      color: var(--ti-lowcode-base-text-color-2);
+      color: var(--te-common-text-emphasize);
       background-color: var(--ti-lowcode-style-setting-label-bg);
     }
   }

From 9b59465a6016684e399662aec31b9c534a69299a Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 23 Oct 2024 17:33:57 -0700
Subject: [PATCH 36/57] feat(style-panel): fix item width error

---
 .../src/tabs-group-configurator/TabsGroupConfigurator.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index d2bd142f5..15155ef7a 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -4,7 +4,7 @@
       v-for="(item, index) in commonOptions"
       :key="item.label || item.icon"
       :class="['tab-item', { selected: picked === (valueKey ? item.value[valueKey] : item.value) }]"
-      :style="{ width: itemWidth(collapsedOptions.length && index === commonOptions.length - 1) }"
+      :style="{ width: getItemWidth(collapsedOptions.length && index === commonOptions.length - 1) + 'px' }"
       @click.stop="change(item.value)"
     >
       <span :class="['label-text', index < commonOptions.length - 1 ? 'border-right' : '']">
@@ -32,7 +32,7 @@
       <div
         v-if="collapsedOptions.length && index === commonOptions.length - 1 && showMore"
         class="more-tabs-wrap"
-        :style="{ width: itemWidth(true) }"
+        :style="{ width: getItemWidth(true) + 'px' }"
       >
         <div
           v-for="foldsItem in foldsOptions"
@@ -48,7 +48,7 @@
   </div>
 </template>
 <script setup>
-import { ref, watch, computed, defineProps, defineEmits } from 'vue'
+import { ref, watch, defineProps, defineEmits } from 'vue'
 import { Popover as TinyPopover } from '@opentiny/vue'
 
 const props = defineProps({
@@ -91,8 +91,6 @@ const getItemWidth = (collapsed = false) => {
   return `${parseInt(props.labelWidth, 10) + (collapsed ? 20 : 0)}`
 }
 
-const itemWidth = computed((collapsed) => `${getItemWidth(collapsed)}px`)
-
 const findMatchingFoldValue = (value) =>
   foldsOptions.value.find((item) => (props.valueKey ? item.value[props.valueKey] === value : item.value === value))
 

From 27b7001f9eed629775bc630351b75eeab74daadc Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 23 Oct 2024 19:57:22 -0700
Subject: [PATCH 37/57] feat(style-panel): fix review error

---
 .../src/slider-configurator/SliderConfigurator.vue        | 3 +--
 .../src/tabs-group-configurator/TabsGroupConfigurator.vue | 8 ++++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index 4c46e8910..4aedeab6b 100644
--- a/packages/configurator/src/slider-configurator/SliderConfigurator.vue
+++ b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -133,8 +133,7 @@ export default {
     padding: 0;
     cursor: pointer;
     border: 0;
-    background: -webkit-linear-gradient(var(--te-base-gray-1), var(--te-base-gray-1)) no-repeat
-      var(--ti-lowcode-breadcrumb-icon-color);
+    background: -webkit-linear-gradient(var(--te-base-gray-1), var(--te-base-gray-1)) no-repeat var(--te-base-gray-17);
     background-size: 0% 100%;
     position: relative;
     outline: 0;
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 15155ef7a..7f2c280d7 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -8,9 +8,9 @@
       @click.stop="change(item.value)"
     >
       <span :class="['label-text', index < commonOptions.length - 1 ? 'border-right' : '']">
-        <span v-if="item && item.label">{{ item.label }}</span>
+        <span v-if="item?.label">{{ item.label }}</span>
         <tiny-popover
-          v-if="item && item.icon"
+          v-if="item?.icon"
           :effect="effect"
           :placement="placement"
           :visible-arrow="false"
@@ -40,8 +40,8 @@
           :key="foldsItem.label || foldsItem.icon"
           @click.stop="change(foldsItem.value)"
         >
-          <span v-if="foldsItem && foldsItem.label">{{ foldsItem.label }}</span>
-          <svg-icon v-if="foldsItem && foldsItem.icon" :name="foldsItem.icon" class="bem-Svg"></svg-icon>
+          <span v-if="foldsItem?.label">{{ foldsItem.label }}</span>
+          <svg-icon v-if="foldsItem.icon" :name="foldsItem.icon" class="bem-Svg"></svg-icon>
         </div>
       </div>
     </div>

From 5be03e72011eabb15659900074a2f1e6d36e85fb Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Tue, 29 Oct 2024 22:51:21 -0700
Subject: [PATCH 38/57] feat(style-panel): use buttonGroup & dorpDown replace
 tabsGroupComponent elements;

---
 .../TabsGroupConfigurator.vue                 | 270 +++++++++++-------
 .../components/background/BackgroundGroup.vue |   3 +-
 .../components/typography/TypographyGroup.vue |  52 ++--
 3 files changed, 200 insertions(+), 125 deletions(-)

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 7f2c280d7..ed09addab 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -1,55 +1,95 @@
 <template>
   <div class="tab-container">
-    <div
-      v-for="(item, index) in commonOptions"
-      :key="item.label || item.icon"
-      :class="['tab-item', { selected: picked === (valueKey ? item.value[valueKey] : item.value) }]"
-      :style="{ width: getItemWidth(collapsedOptions.length && index === commonOptions.length - 1) + 'px' }"
-      @click.stop="change(item.value)"
-    >
-      <span :class="['label-text', index < commonOptions.length - 1 ? 'border-right' : '']">
-        <span v-if="item?.label">{{ item.label }}</span>
-        <tiny-popover
-          v-if="item?.icon"
-          :effect="effect"
-          :placement="placement"
-          :visible-arrow="false"
-          :content="item.content"
-          trigger="hover"
+    <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)"
         >
-          <template #reference>
-            <svg-icon v-if="item.icon" :name="item.icon" class="bem-Svg"></svg-icon>
-          </template>
-        </tiny-popover>
-        <svg-icon
-          v-if="collapsedOptions.length && index === commonOptions.length - 1"
-          name="down-arrow"
-          class="bem-Svg"
-          color="var(--te-common-border-default)"
-          @click.stop="showMore = !showMore"
-        ></svg-icon>
-      </span>
-      <div
-        v-if="collapsedOptions.length && index === commonOptions.length - 1 && showMore"
-        class="more-tabs-wrap"
-        :style="{ width: getItemWidth(true) + 'px' }"
-      >
-        <div
-          v-for="foldsItem in foldsOptions"
-          class="collapse-item"
-          :key="foldsItem.label || foldsItem.icon"
-          @click.stop="change(foldsItem.value)"
+          <span
+            :class="[
+              'label-text',
+              { 'border-right': collapsedOptions.length || index < uncollapsedOptions.length - 1 }
+            ]"
+          >
+            <span v-if="item?.label">{{ item.label }}</span>
+            <tiny-popover
+              v-if="item?.icon"
+              :effect="effect"
+              :placement="placement"
+              :visible-arrow="false"
+              :content="item.content"
+              trigger="hover"
+            >
+              <template #reference>
+                <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 v-if="foldsItem?.label">{{ foldsItem.label }}</span>
-          <svg-icon v-if="foldsItem.icon" :name="foldsItem.icon" class="bem-Svg"></svg-icon>
-        </div>
-      </div>
+          <span class="selected-option" @click.stop="change(selectedCollapsedOption)">
+            <span v-if="selectedCollapsedOption?.label">{{ selectedCollapsedOption.label }}</span>
+            <tiny-popover
+              v-if="selectedCollapsedOption?.icon"
+              :effect="effect"
+              :placement="placement"
+              :visible-arrow="false"
+              :content="item.content"
+              trigger="hover"
+            >
+              <template #reference>
+                <svg-icon
+                  v-if="selectedCollapsedOption.icon"
+                  :name="selectedCollapsedOption.icon"
+                  class="bem-Svg"
+                ></svg-icon>
+              </template>
+            </tiny-popover>
+          </span>
+          <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.label }}</span>
+              <tiny-popover
+                v-if="item?.icon"
+                :effect="effect"
+                :placement="placement"
+                :visible-arrow="false"
+                :content="item.content"
+                trigger="hover"
+              >
+                <template #reference>
+                  <svg-icon v-if="item.icon" :name="item.icon" class="bem-Svg"></svg-icon>
+                </template>
+              </tiny-popover>
+            </tiny-dropdown-item>
+          </tiny-dropdown-menu>
+        </tiny-dropdown>
+      </tiny-button-group>
     </div>
   </div>
 </template>
 <script setup>
 import { ref, watch, defineProps, defineEmits } from 'vue'
-import { Popover as TinyPopover } from '@opentiny/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({
   modelValue: {
@@ -70,7 +110,7 @@ const props = defineProps({
   },
   labelWidth: {
     type: Number,
-    default: 60
+    default: 63
   },
   options: {
     type: Array,
@@ -83,16 +123,19 @@ const emit = defineEmits(['update:modelValue'])
 const picked = ref(null)
 const uncollapsedOptions = ref(props.options.filter((option) => !option.collapsed))
 const collapsedOptions = ref(props.options.filter((option) => option.collapsed))
-const commonOptions = ref(uncollapsedOptions.value)
 const foldsOptions = ref([])
-const showMore = ref(false)
+const selectedCollapsedOption = ref(null)
+const isCollapsedSelected = ref(false)
 
 const getItemWidth = (collapsed = false) => {
-  return `${parseInt(props.labelWidth, 10) + (collapsed ? 20 : 0)}`
+  return `${parseInt(props.labelWidth, 10) + (collapsed ? 15 : 0)}`
 }
 
-const findMatchingFoldValue = (value) =>
-  foldsOptions.value.find((item) => (props.valueKey ? item.value[props.valueKey] === value : item.value === value))
+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) =>
@@ -101,13 +144,12 @@ const filterNonMatchingValues = (value) =>
 
 const updateOptionDisplay = (value) => {
   if (!value) {
-    commonOptions.value = [...uncollapsedOptions.value, collapsedOptions.value[0]]
     foldsOptions.value = collapsedOptions.value.slice(1)
+    selectedCollapsedOption.value = collapsedOptions.value[0]
     return
   }
-  const matchingFoldValue = findMatchingFoldValue(value)
-  if (matchingFoldValue) {
-    commonOptions.value[commonOptions.value.length - 1] = matchingFoldValue
+  findMatchingFoldValue(value)
+  if (selectedCollapsedOption.value) {
     foldsOptions.value = filterNonMatchingValues(value)
   }
 }
@@ -123,12 +165,13 @@ watch(
   { immediate: true }
 )
 
-const change = (val) => {
-  if (picked.value === val) {
+const change = (item) => {
+  if (picked.value === item.value) {
     return
   }
-  emit('update:modelValue', val)
-  showMore.value = false
+  isCollapsedSelected.value = Boolean(item.collapsed)
+
+  emit('update:modelValue', item.value)
 }
 </script>
 
@@ -140,61 +183,94 @@ const change = (val) => {
   background-color: var(--ti-lowcode-setting-style-tab-bg-color);
   display: flex;
   border-radius: 4px;
-  .tab-item {
+
+  .tabs-wrap {
     display: flex;
-    align-items: center;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-    .label-text {
-      width: 100%;
-      height: 16px;
-
-      .bem-Svg {
-        margin-top: -3px;
+    justify-content: space-between;
+    .tiny-button.tiny-button.tiny-button--default {
+      margin: 0;
+      padding: 0;
+      border: none;
+      background-color: var(--ti-lowcode-base-bg-5);
+      line-height: 14px;
+      --ti-button-size-normal-min-width: 20px;
+      --ti-button-size-normal-max-width: 80px;
+
+      &:hover {
+        background-color: var(--ti-lowcode-base-gray-101);
+        border-radius: 4px;
       }
 
-      .show-more-tabs {
-        padding: 8px;
+      &.selected {
+        background-color: var(--ti-lowcode-base-gray-101);
+        border-radius: 4px;
       }
     }
-    .more-tabs-wrap {
-      padding: 8px 0;
-      position: absolute;
-      top: 24px;
-      right: 0;
-      background-color: var(--ti-lowcode-base-bg-5);
-      z-index: 2200;
-      border-radius: 4px;
-      box-shadow: 0px 0px 10px 0px rgba(25, 25, 25, 0.15);
-      text-align: left;
-      .collapse-item {
-        padding: 0 16px;
-        font-size: 12px;
-        line-height: 24px;
-        cursor: pointer;
-
-        &:hover {
-          background-color: var(--ti-lowcode-base-gray-101);
-          border-radius: 4px;
+    .tab-item {
+      display: flex;
+      align-items: center;
+      text-align: center;
+      cursor: pointer;
+      position: relative;
+      .label-text {
+        width: 100%;
+        height: 12px;
+
+        .bem-Svg {
+          margin-top: -3px;
         }
       }
     }
-    &.selected {
-      background-color: var(--ti-lowcode-base-gray-101);
-      border-radius: 4px;
+    .tiny-dropdown {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 24px;
+      background-color: var(--ti-lowcode-base-bg-5);
+      --ti-dropdown-text-color: var(--te-common-text-primary);
+      &.selected {
+        background-color: var(--ti-lowcode-base-gray-101);
+        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;
+        --ti-dropdown-text-color-hover: var(--te-common-text-primary);
+      }
     }
+  }
+}
+.tiny-dropdown-menu {
+  padding: 8px 0px;
+  margin: 0px 0px 0px 20px;
+  background-color: rgb(255, 255, 255);
+  z-index: 9999;
+  --ti-dropdown-menu-arrow-margin-top: 0;
+
+  :deep(.tiny-dropdown-item__wrap) {
+    padding: 4px 12px;
+
     &:hover {
       background-color: var(--ti-lowcode-base-gray-101);
       border-radius: 4px;
+      color: var(--te-common-text-primary);
     }
   }
-
-  :deep(.icon-down-arrow:focus) {
-    outline: none;
-  }
 }
-
 .border-right {
   border-right: 1px solid var(--te-common-border-default);
 }
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 3761fb846..52fb56ca1 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -398,7 +398,7 @@ export default {
     padding: 2px;
   }
   .background-label {
-    color: var(--ti-lowcode-component-setting-panel-label-color);
+    color: var(--te-common-text-primary);
   }
   .background-color,
   .background-clip {
@@ -568,7 +568,6 @@ export default {
   padding: 6px 0;
 
   span {
-    color: var(--te-common-bg-prompt);
     font-weight: 600;
   }
 
diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index c82d0cc43..815f14c50 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -90,15 +90,15 @@
         >
           <span>对齐</span>
         </label>
-        <tabs-group-configurator
-          :options="alignOptions"
-          :modelValue="selectedAlign"
-          :label-width="54"
-          :effect="effect"
-          :placement="placement"
-          @update:modelValue="selectAlign"
-        ></tabs-group-configurator>
       </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-style-row">
       <div class="style-left">
@@ -112,24 +112,24 @@
         >
           <span>样式</span>
         </label>
-        <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>
+      <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">

From f276bd86f5f57c431eb44475c001b3d758ef1b7b Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 30 Oct 2024 19:56:06 -0700
Subject: [PATCH 39/57] 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;

---
 packages/layout/src/DesignSettings.vue        |  9 ++++---
 .../components/background/BackgroundGroup.vue |  4 ++++
 .../background/BackgroundImageSetting.vue     |  2 +-
 .../components/background/ImageSetting.vue    |  6 ++---
 .../components/background/RadialGradient.vue  |  2 +-
 .../src/components/inputs/ModalMask.vue       |  2 +-
 .../src/components/spacing/SpacingGroup.vue   | 24 ++-----------------
 7 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index a7ac507ec..178b75f0c 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -58,9 +58,9 @@ export default {
 
   .tabs-setting {
     position: absolute;
-    top: 12px;
-    right: 16px;
-    line-height: 24px;
+    top: 10px;
+    right: 18px;
+    line-height: 26px;
     cursor: pointer;
   }
   .tiny-tabs {
@@ -86,6 +86,9 @@ 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);
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index d271f93dc..9a2efbf9a 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -565,6 +565,7 @@ export default {
 .background-model-title {
   display: flex;
   justify-content: space-between;
+  position: relative;
   padding: 6px 0;
 
   span {
@@ -572,7 +573,10 @@ export default {
   }
 
   .svg-icon {
+    position: absolute;
     cursor: pointer;
+    top: 0px;
+    right: -4px;
   }
 }
 </style>
diff --git a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
index d73d87b1c..83de165be 100644
--- a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
+++ b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
@@ -6,7 +6,7 @@
         :options="state.typeLists"
         :modelValue="state.styleComponent"
         value-key="styleComponent"
-        :label-width="52"
+        label-width="49"
         :effect="effect"
         :placement="placement"
         @update:modelValue="selectType"
diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
index d4a317984..a6bfa6cf6 100644
--- a/packages/settings/styles/src/components/background/ImageSetting.vue
+++ b/packages/settings/styles/src/components/background/ImageSetting.vue
@@ -22,7 +22,7 @@
     <tabs-group-configurator
       :options="BACKGROUND_SIZE_OPTIONS"
       :modelValue="state.sizeSelected"
-      :label-width="69"
+      label-width="65"
       @update:modelValue="selectSize"
     ></tabs-group-configurator>
   </div>
@@ -56,7 +56,7 @@
     <tabs-group-configurator
       :options="REPEAT_OPTIONS"
       :modelValue="state.repeat"
-      :label-width="53"
+      label-width="50"
       @update:modelValue="selectRepeat"
     ></tabs-group-configurator>
   </div>
@@ -65,7 +65,7 @@
     <tabs-group-configurator
       :options="FIXED_OPTIONS"
       :modelValue="state.fixedSelected"
-      :label-width="105"
+      label-width="98"
       @update:modelValue="selectFixed"
     ></tabs-group-configurator>
   </div>
diff --git a/packages/settings/styles/src/components/background/RadialGradient.vue b/packages/settings/styles/src/components/background/RadialGradient.vue
index 6122318b9..dc62e2dc4 100644
--- a/packages/settings/styles/src/components/background/RadialGradient.vue
+++ b/packages/settings/styles/src/components/background/RadialGradient.vue
@@ -5,7 +5,7 @@
     <tabs-group-configurator
       :options="RADIAL_SIZE_LIST"
       :modelValue="state.radialSize"
-      :label-width="52"
+      label-width="50"
       :effect="effect"
       :placement="placement"
       @update:modelValue="selectRadialSize"
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 6202c141e..b1af6446e 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -102,7 +102,7 @@ export default {
     box-sizing: border-box;
   }
   .modal-padding {
-    padding: var(--ti-modal-padding-y, 10px) var(--ti-modal-padding-x, 16px);
+    padding: var(--ti-modal-padding-y, 14px) var(--ti-modal-padding-x, 20px);
   }
   .align-body {
     right: var(--modal-right-offset, 280px);
diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
index 8efae5bad..bfcc01750 100644
--- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
@@ -328,17 +328,7 @@
       height="100%"
       style="grid-area: 3 / 3 / span 3 / span 3; pointer-events: none"
     >
-      <text
-        x="11"
-        y="6"
-        fill="#808080"
-        font-style="italic"
-        font-weight="normal"
-        font-size="10"
-        dominant-baseline="hanging"
-      >
-        Padding
-      </text>
+      <text x="11" y="6" fill="#808080" font-weight="normal" font-size="10" dominant-baseline="hanging">Padding</text>
     </svg>
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -346,17 +336,7 @@
       height="100%"
       style="grid-area: 1 / 1 / -1 / -1; pointer-events: none"
     >
-      <text
-        x="12"
-        y="4"
-        fill="#808080"
-        font-style="italic"
-        font-weight="normal"
-        font-size="10"
-        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>
 

From 1760b8b2cfbe063f2c5d6b4ea4e34c270efe648c Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 30 Oct 2024 23:27:50 -0700
Subject: [PATCH 40/57] feat(style-panel): fix the color variables;

---
 .../SliderConfigurator.vue                    |  4 +-
 .../TabsGroupConfigurator.vue                 | 48 +++++++++++--------
 .../components/background/BackgroundGroup.vue |  8 ++--
 .../src/components/inputs/ModalMask.vue       |  2 +-
 .../src/components/inputs/NumericSelect.vue   |  2 +-
 .../src/components/inputs/ResetButton.vue     |  4 +-
 .../styles/src/components/size/SizeGroup.vue  |  4 +-
 packages/theme/base/src/common.less           |  1 +
 8 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index 3e7b7a20a..d9119f84f 100644
--- a/packages/configurator/src/slider-configurator/SliderConfigurator.vue
+++ b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -145,7 +145,7 @@ export default {
     height: 10px;
     border-radius: 50%;
     border: 0;
-    background-color: var(--te-base-bg-5);
+    background-color: var(--te-common-bg-default);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
     -webkit-transition: border-color 0.15s, background-color 0.15s;
     transition: border-color 0.15s, background-color 0.15s;
@@ -158,7 +158,7 @@ export default {
   }
   input[type='range']::-webkit-slider-thumb:active {
     border: 0;
-    background-color: var(--te-base-bg-5);
+    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
index ed09addab..6df846e36 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -58,30 +58,36 @@
               </template>
             </tiny-popover>
           </span>
-          <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.label }}</span>
-              <tiny-popover
-                v-if="item?.icon"
-                :effect="effect"
-                :placement="placement"
-                :visible-arrow="false"
-                :content="item.content"
-                trigger="hover"
+          <template #dropdown>
+            <tiny-dropdown-menu>
+              <tiny-dropdown-item
+                v-for="item in foldsOptions"
+                :key="item.label || item.icon"
+                @click.stop="change(item)"
               >
-                <template #reference>
-                  <svg-icon v-if="item.icon" :name="item.icon" class="bem-Svg"></svg-icon>
-                </template>
-              </tiny-popover>
-            </tiny-dropdown-item>
-          </tiny-dropdown-menu>
+                <span v-if="item?.label">{{ item.label }}</span>
+                <tiny-popover
+                  v-if="item?.icon"
+                  :effect="effect"
+                  :placement="placement"
+                  :visible-arrow="false"
+                  :content="item.content"
+                  trigger="hover"
+                >
+                  <template #reference>
+                    <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, watch, defineProps, defineEmits } from 'vue'
+import { ref, computed, watch, defineProps, defineEmits } from 'vue'
 import {
   Popover as TinyPopover,
   ButtonGroup as TinyButtonGroup,
@@ -121,8 +127,8 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 const picked = ref(null)
-const uncollapsedOptions = ref(props.options.filter((option) => !option.collapsed))
-const collapsedOptions = ref(props.options.filter((option) => option.collapsed))
+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)
@@ -162,11 +168,11 @@ watch(
       updateOptionDisplay(value)
     }
   },
-  { immediate: true }
+  { immediate: true, deep: true }
 )
 
 const change = (item) => {
-  if (picked.value === item.value) {
+  if (props.valueKey ? picked.value[props.valueKey] === item.value[props.valueKey] : picked.value === item.value) {
     return
   }
   isCollapsedSelected.value = Boolean(item.collapsed)
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 9a2efbf9a..0d4e2899a 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -429,8 +429,8 @@ export default {
     place-items: stretch;
     gap: 1px;
     border-radius: 2px;
-    border-top: 1px solid var(--te-base-invalidate-color);
-    background-color: var(--te-base-bg-5);
+    border-top: 1px solid var(--te-common-border-divider);
+    background-color: var(--te-common-bg-default);
     margin: 12px 0;
     .image-list-item {
       display: grid;
@@ -438,8 +438,8 @@ export default {
       gap: 8px 4px;
       height: 24px;
       align-items: center;
-      background-color: var(--te-base-bg-5);
-      border-bottom: 1px solid var(--te-base-invalidate-color);
+      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,
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index b1af6446e..88c5cbc3f 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -96,7 +96,7 @@ export default {
     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(--te-base-bg-5);
+    background-color: var(--te-common-bg-default);
     overflow: auto;
     max-height: 100%;
     box-sizing: border-box;
diff --git a/packages/settings/styles/src/components/inputs/NumericSelect.vue b/packages/settings/styles/src/components/inputs/NumericSelect.vue
index d16b30228..2e88800f5 100644
--- a/packages/settings/styles/src/components/inputs/NumericSelect.vue
+++ b/packages/settings/styles/src/components/inputs/NumericSelect.vue
@@ -165,7 +165,7 @@ export default {
 
     .suffix-text {
       font-size: 12px;
-      color: var(--ti-lowcode-common-text-color-5);
+      color: var(--te-common-text-weaken);
     }
 
     &:hover {
diff --git a/packages/settings/styles/src/components/inputs/ResetButton.vue b/packages/settings/styles/src/components/inputs/ResetButton.vue
index 0d1156f3f..d31556119 100644
--- a/packages/settings/styles/src/components/inputs/ResetButton.vue
+++ b/packages/settings/styles/src/components/inputs/ResetButton.vue
@@ -35,12 +35,12 @@ export default {
   max-width: 100%;
   border: 0;
   color: var(--te-common-text-primary);
-  border: 1px solid 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-radio-button-active-bg);
+  color: var(--te-common-text-description);
 }
 </style>
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 6fa8f5354..89ab3a67a 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -471,7 +471,7 @@ span {
       padding-left: 2px;
       margin-right: 2px;
       line-height: 28px;
-      color: var(--ti-lowcode-component-setting-panel-label-color);
+      color: var(--te-common-text-secondary);
     }
   }
 }
@@ -524,7 +524,7 @@ span {
         .size-label {
           padding-right: 5px;
           display: inline-block;
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
+          color: var(--te-common-text-secondary);
         }
 
         :deep(.tiny-input) {
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

From bfd1449d2ea07bf68b300e2498bf266b469b1973 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Mon, 4 Nov 2024 18:57:23 -0800
Subject: [PATCH 41/57] feat(style-panel): Modified review comments: color
 variables; numeric component; optimized;

---
 .../TabsGroupConfigurator.vue                 | 25 +++--
 .../components/background/BackgroundGroup.vue | 13 +--
 .../src/components/inputs/ModalMask.vue       |  6 +-
 .../src/components/inputs/NumericSelect.vue   | 98 +++++--------------
 packages/theme/light/setting-style.less       |  5 +-
 5 files changed, 51 insertions(+), 96 deletions(-)

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 6df846e36..ceaae1cad 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -15,9 +15,9 @@
               { 'border-right': collapsedOptions.length || index < uncollapsedOptions.length - 1 }
             ]"
           >
-            <span v-if="item?.label">{{ item.label }}</span>
+            <span v-if="item?.label && !item?.content">{{ item.label }}</span>
             <tiny-popover
-              v-if="item?.icon"
+              v-if="item?.content"
               :effect="effect"
               :placement="placement"
               :visible-arrow="false"
@@ -25,7 +25,8 @@
               trigger="hover"
             >
               <template #reference>
-                <svg-icon v-if="item.icon" :name="item.icon" class="bem-Svg"></svg-icon>
+                <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>
@@ -40,18 +41,21 @@
           :style="{ width: getItemWidth(true) + 'px' }"
         >
           <span class="selected-option" @click.stop="change(selectedCollapsedOption)">
-            <span v-if="selectedCollapsedOption?.label">{{ selectedCollapsedOption.label }}</span>
+            <span v-if="selectedCollapsedOption?.label && !selectedCollapsedOption?.content">{{
+              selectedCollapsedOption.label
+            }}</span>
             <tiny-popover
-              v-if="selectedCollapsedOption?.icon"
+              v-if="selectedCollapsedOption?.content"
               :effect="effect"
               :placement="placement"
               :visible-arrow="false"
-              :content="item.content"
+              :content="selectedCollapsedOption.content"
               trigger="hover"
             >
               <template #reference>
+                <span v-if="selectedCollapsedOption?.label">{{ selectedCollapsedOption.label }}</span>
                 <svg-icon
-                  v-if="selectedCollapsedOption.icon"
+                  v-if="selectedCollapsedOption?.icon"
                   :name="selectedCollapsedOption.icon"
                   class="bem-Svg"
                 ></svg-icon>
@@ -65,9 +69,9 @@
                 :key="item.label || item.icon"
                 @click.stop="change(item)"
               >
-                <span v-if="item?.label">{{ item.label }}</span>
+                <span v-if="item?.label && !item?.content">{{ item.label }}</span>
                 <tiny-popover
-                  v-if="item?.icon"
+                  v-if="item?.content"
                   :effect="effect"
                   :placement="placement"
                   :visible-arrow="false"
@@ -75,7 +79,8 @@
                   trigger="hover"
                 >
                   <template #reference>
-                    <svg-icon v-if="item.icon" :name="item.icon" class="bem-Svg"></svg-icon>
+                    <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>
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 0d4e2899a..11de8bb54 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -451,6 +451,7 @@ export default {
       position: relative;
       overflow: visible;
       &:hover {
+        background-color: var(--te-common-bg-container);
         .dragger-icon,
         .icon-wrap {
           opacity: 1;
@@ -467,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 {
@@ -488,7 +488,7 @@ export default {
     }
     .dragger-icon {
       display: inline-flex;
-      color: var(--ti-lowcode-fit-coordinate-origin-color);
+      color: var(--te-common-icon-secondary);
       cursor: grab;
       width: 12px;
       opacity: 0;
@@ -500,7 +500,7 @@ export default {
       height: 10px;
       border-radius: 1px;
       margin: 1px;
-      box-shadow: var(--ti-lowcode-setting-style-bg-box-shadow) 0px 0px 0px 1px;
+      box-shadow: var(--te-common-border-default) 0px 0px 0px 1px;
       align-self: center;
       overflow: hidden;
       .image {
@@ -525,15 +525,12 @@ export default {
         width: 16px;
         max-height: 16px;
         border-width: 0px;
-        color: var(--ti-lowcode-fit-coordinate-origin-color);
+        color: var(--te-common-icon-secondary);
         background-color: transparent;
         border-radius: 2px;
         padding-left: 0px;
         padding-right: 0px;
         font-size: 13px;
-        &:hover {
-          color: var(--ti-lowcode-common-text-color-2);
-        }
       }
     }
   }
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 88c5cbc3f..5266892be 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -5,7 +5,7 @@
 
       <div
         ref="modalContent"
-        :style="{ top: topStyle + 'px' }"
+        :style="{ top: `${topStyle}px` }"
         :class="['modal-content', { 'align-body': isAlignBody }, { 'modal-padding': isAlignBody }]"
       >
         <slot></slot>
@@ -49,12 +49,12 @@ export default {
     }
   },
   setup(props) {
-    const isAlignBody = ref(props.teleport === 'body')
+    const isAlignBody = props.teleport === 'body'
     const topStyle = ref(0)
     const modalContent = ref(null)
 
     const calculateTopStyle = (modalContent) => {
-      if (isAlignBody.value && modalContent) {
+      if (isAlignBody && modalContent) {
         return modal.top < modalContent.offsetHeight ? 40 : modal.top - modalContent.offsetHeight + 40
       }
       return modal.top - 34
diff --git a/packages/settings/styles/src/components/inputs/NumericSelect.vue b/packages/settings/styles/src/components/inputs/NumericSelect.vue
index 2e88800f5..a8f6defa0 100644
--- a/packages/settings/styles/src/components/inputs/NumericSelect.vue
+++ b/packages/settings/styles/src/components/inputs/NumericSelect.vue
@@ -1,38 +1,29 @@
 <template>
   <div :class="['style-numeric', { focus: focus }]">
-    <tiny-input
+    <tiny-numeric
       v-model="numericalModelValue"
       :placeholder="placeholder"
+      controls-position="right"
+      :unit="numericalSuffix"
+      @mouseover="isNumericHover = true"
+      @mouseleave="isNumericHover = false"
       @focus="focus = true"
       @blur="focus = false"
       @change="change"
       @input="input"
     >
-      <template #suffix>
-        <div class="suffix-wrap">
-          <div class="add-substact-wrap">
-            <div>
-              <svg-icon name="down-arrow" @click="changeNumber()"></svg-icon>
-            </div>
-            <div>
-              <svg-icon name="down-arrow" @click="changeNumber(false)"></svg-icon>
-            </div>
-          </div>
-          <span class="suffix-text">{{ numericalSuffix }}</span>
-        </div>
-      </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: {
@@ -59,10 +50,15 @@ export default {
   emits: useEvent(),
   setup(props, { emit }) {
     const numericalModelValue = ref(String(props.numericalText || ''))
+    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
     })
 
@@ -73,8 +69,6 @@ export default {
       }
     )
 
-    const focus = ref(false)
-
     const input = (value) => {
       if (!/^\d+$/.test(value.data)) {
         numericalModelValue.value = numericalModelValue.value.slice(0, -1)
@@ -83,7 +77,7 @@ export default {
 
     const change = () => {
       focus.value = false
-
+      numericalModelValue.value = String(numericalModelValue.value)
       if (numericalModelValue.value.trim().length === 0) {
         emit('update', { [props.name]: null })
       }
@@ -100,19 +94,12 @@ export default {
       })
     }
 
-    const changeNumber = (isAdd = true) => {
-      let resNumber = parseInt(numericalModelValue.value, 10) || 0
-      resNumber += isAdd ? 1 : -1
-      numericalModelValue.value = `${resNumber < 0 ? 0 : resNumber}`
-      change()
-    }
-
     return {
       numericalModelValue,
       numericalSuffix,
+      isNumericHover,
       focus,
       input,
-      changeNumber,
       change
     }
   }
@@ -129,40 +116,19 @@ export default {
   &.focus {
     border-color: var(--te-common-border-default);
   }
-  .suffix-wrap {
-    .add-substact-wrap {
-      height: 23px;
-      width: 16px;
-      margin-right: -3px;
-      border-left: 1px solid var(--te-common-border-default);
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      border-radius: 0 4px 4px 0;
-      display: none;
-
-      div {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        .svg-icon {
-          height: 11px;
-        }
-
-        &:active {
-          background-color: var(--te-common-border-default);
-        }
-
-        &:first-child {
-          border-bottom: 1px solid var(--te-common-border-default);
-          .svg-icon {
-            transform: scaleY(-1);
-          }
-        }
-      }
+  :deep(.tiny-numeric) {
+    width: 100%;
+    .tiny-numeric__input-inner {
+      padding-right: 22px;
     }
 
+    .tiny-numeric__unit {
+      font-size: 12px;
+      color: var(--te-common-text-weaken);
+      background-color: var(--te-common-bg-default);
+    }
+  }
+  .suffix-wrap {
     .suffix-text {
       font-size: 12px;
       color: var(--te-common-text-weaken);
@@ -172,18 +138,6 @@ export default {
       .suffix-text {
         display: none;
       }
-      .add-substact-wrap {
-        display: flex;
-      }
-    }
-  }
-
-  :deep(.tiny-input-suffix) {
-    .tiny-input__inner {
-      padding: 0 20px 0 4px;
-    }
-    .tiny-input__suffix {
-      right: 4px;
     }
   }
 }
diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less
index 2b0d81ce9..914b30a03 100644
--- a/packages/theme/light/setting-style.less
+++ b/packages/theme/light/setting-style.less
@@ -8,7 +8,6 @@
   --ti-lowcode-setting-style-tab-bg-color: var(--ti-lowcode-base-bg-7);
   --ti-lowcode-setting-style-reset-bg-color: var(--ti-lowcode-base-text-color-2);
   --ti-lowcode-setting-style-reset-dot-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-setting-style-bg-box-shadow: #212121;
-  --ti-lowcode-setting-style-drag-bar-bg: #8ac2ff;
-  --ti-lowcode-setting-style-spacing-bg: #6b6b6b;
+  --ti-lowcode-setting-style-drag-bar-bg: var(--ti-lowcode-base-bg);
+  --ti-lowcode-setting-style-spacing-bg: var(--te-base-gray-34);
 }

From f66542f476415f973c13bcdefc8f570379c665ad Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 6 Nov 2024 00:33:59 -0800
Subject: [PATCH 42/57] feat(style-panel): Resolved the remainning styles
 issues

---
 packages/common/component/MetaCodeEditor.vue  |   2 +-
 .../color-configurator/ColorConfigurator.vue  |   8 +-
 .../SliderConfigurator.vue                    |   5 +-
 .../TabsGroupConfigurator.vue                 |   2 +
 .../src/components/border/BorderGroup.vue     |  65 +++++---
 .../components/classNamesContainer/index.vue  |  22 ++-
 .../src/components/effects/EffectGroup.vue    | 156 ++++++++++--------
 .../src/components/spacing/SpacingGroup.vue   |   6 +-
 .../components/typography/TypographyGroup.vue |   1 +
 9 files changed, 161 insertions(+), 106 deletions(-)

diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 0c97ce569..100775198 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -298,7 +298,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;
diff --git a/packages/configurator/src/color-configurator/ColorConfigurator.vue b/packages/configurator/src/color-configurator/ColorConfigurator.vue
index 42542c7c3..ab063ab87 100644
--- a/packages/configurator/src/color-configurator/ColorConfigurator.vue
+++ b/packages/configurator/src/color-configurator/ColorConfigurator.vue
@@ -23,7 +23,7 @@ export default {
     },
     modelValue: {
       type: String,
-      default: ''
+      default: '#FFFFFF'
     }
   },
   emits: ['change', 'update:modelValue'],
@@ -57,7 +57,7 @@ export default {
   width: 100%;
 
   .input-color {
-    width: 22px;
+    width: 20px;
     height: 24px;
     border: none;
     background: transparent;
@@ -68,6 +68,10 @@ export default {
   :deep(.tiny-input-prefix) {
     .tiny-input__prefix {
       left: 2px;
+
+      input[type='color' i] {
+        border-color: red;
+      }
     }
     .tiny-input__inner {
       padding-left: 24px;
diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index d9119f84f..e70e42fb5 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: var(--te-common-bg-default);
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.4);
     -webkit-transition: border-color 0.15s, background-color 0.15s;
     transition: border-color 0.15s, background-color 0.15s;
     cursor: pointer;
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index ceaae1cad..53779ffe3 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -223,6 +223,7 @@ const change = (item) => {
       text-align: center;
       cursor: pointer;
       position: relative;
+      background-color: var(--te-common-bg-container);
       .label-text {
         width: 100%;
         height: 12px;
@@ -270,6 +271,7 @@ const change = (item) => {
   margin: 0px 0px 0px 20px;
   background-color: rgb(255, 255, 255);
   z-index: 9999;
+  box-shadow: 0 0 10px 0 rgba(25, 25, 25, 0.15);
   --ti-dropdown-menu-arrow-margin-top: 0;
 
   :deep(.tiny-dropdown-item__wrap) {
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 9420e97b8..7fc575ec9 100644
--- a/packages/settings/styles/src/components/effects/EffectGroup.vue
+++ b/packages/settings/styles/src/components/effects/EffectGroup.vue
@@ -24,60 +24,41 @@
       <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>
@@ -114,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'
@@ -128,9 +109,9 @@ export default {
     TinySelect: Select,
     TinyOption: Option,
     TinyOptionGroup: OptionGroup,
-    TinyTooltip: Tooltip,
     SliderConfigurator,
     ColorConfigurator,
+    TabsGroupConfigurator,
     ModalMask,
     ResetButton,
     InputSelect
@@ -348,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',
@@ -437,10 +441,6 @@ export default {
       })
     }
 
-    const isOutlineStyleSelected = (type) => {
-      return state.activedType === type
-    }
-
     const selectOutlineStyle = (type) => {
       state.activedType = type
 
@@ -494,6 +494,7 @@ export default {
     return {
       state,
       cursorGroup,
+      outlineOptions,
       EFFECTS_PROPERTY,
       BORDER_STYLE_TYPE,
       outlineSuffixOptions,
@@ -502,7 +503,6 @@ export default {
       openSetting,
       reset,
       cursorChange,
-      isOutlineStyleSelected,
       selectOutlineStyle,
       outlineWidthChange,
       outlineWidthSuffixChange,
@@ -519,7 +519,7 @@ 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 {
@@ -570,23 +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;
     }
-
-    label {
-      padding-left: 2px;
+    .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/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
index bfcc01750..347d44111 100644
--- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
@@ -254,12 +254,12 @@
           style="pointer-events: none; stroke-width: 0"
         ></rect>
         <clipPath id="padding-inner">
-          <rect x="65" y="21" width="48" height="20" fill="#FFF" rx="4" ry="4" 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="60"
+          x="64"
           y="25"
           width="48"
           height="20"
@@ -328,7 +328,7 @@
       height="100%"
       style="grid-area: 3 / 3 / span 3 / span 3; pointer-events: none"
     >
-      <text x="11" y="6" fill="#808080" font-weight="normal" font-size="10" 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"
diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index 83ab6c504..9d6c5ac13 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -640,6 +640,7 @@ export default {
     grid-template-columns: 15px 1fr;
     align-items: center;
     margin-bottom: 8px;
+    color: var(--ti-lowcode-component-setting-panel-label-color);
 
     .style-left {
       display: grid;

From 50a7a8a37b586348e618318a1983ca21dee55759 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 6 Nov 2024 21:49:50 -0800
Subject: [PATCH 43/57] feat(style-panel): fix some reviews

---
 packages/common/component/MetaCodeEditor.vue              | 8 +++++++-
 .../src/color-configurator/ColorConfigurator.vue          | 6 +-----
 .../src/slider-configurator/SliderConfigurator.vue        | 2 +-
 .../src/tabs-group-configurator/TabsGroupConfigurator.vue | 4 ++--
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 100775198..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">
@@ -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 ab063ab87..9b71a4639 100644
--- a/packages/configurator/src/color-configurator/ColorConfigurator.vue
+++ b/packages/configurator/src/color-configurator/ColorConfigurator.vue
@@ -23,7 +23,7 @@ export default {
     },
     modelValue: {
       type: String,
-      default: '#FFFFFF'
+      default: ''
     }
   },
   emits: ['change', 'update:modelValue'],
@@ -68,10 +68,6 @@ export default {
   :deep(.tiny-input-prefix) {
     .tiny-input__prefix {
       left: 2px;
-
-      input[type='color' i] {
-        border-color: red;
-      }
     }
     .tiny-input__inner {
       padding-left: 24px;
diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index e70e42fb5..e9ffb6ca8 100644
--- a/packages/configurator/src/slider-configurator/SliderConfigurator.vue
+++ b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -147,7 +147,7 @@ export default {
     border-radius: 50%;
     border: 0;
     background-color: var(--te-common-bg-default);
-    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.4);
+    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;
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 53779ffe3..26a463de9 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -269,9 +269,9 @@ const change = (item) => {
 .tiny-dropdown-menu {
   padding: 8px 0px;
   margin: 0px 0px 0px 20px;
-  background-color: rgb(255, 255, 255);
+  background-color: var(--te-common-bg-default);
   z-index: 9999;
-  box-shadow: 0 0 10px 0 rgba(25, 25, 25, 0.15);
+  box-shadow: 0 0 10px 0 var(--te-common-border-default);
   --ti-dropdown-menu-arrow-margin-top: 0;
 
   :deep(.tiny-dropdown-item__wrap) {

From 92fa49ae607ec5f7aa66c0aace4c25c58011fc8a Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 6 Nov 2024 22:47:01 -0800
Subject: [PATCH 44/57] feat(style-panel): Resolved the remainning styles
 issues

---
 .../styles/src/components/inputs/NumericSelect.vue | 14 ++++----------
 packages/theme/dark/variable.less                  |  2 +-
 packages/theme/light/variable.less                 |  2 +-
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/settings/styles/src/components/inputs/NumericSelect.vue b/packages/settings/styles/src/components/inputs/NumericSelect.vue
index a8f6defa0..9dae48f24 100644
--- a/packages/settings/styles/src/components/inputs/NumericSelect.vue
+++ b/packages/settings/styles/src/components/inputs/NumericSelect.vue
@@ -5,12 +5,13 @@
       :placeholder="placeholder"
       controls-position="right"
       :unit="numericalSuffix"
+      :empty-value="null"
+      allow-empty
       @mouseover="isNumericHover = true"
       @mouseleave="isNumericHover = false"
       @focus="focus = true"
       @blur="focus = false"
       @change="change"
-      @input="input"
     >
     </tiny-numeric>
   </div>
@@ -49,7 +50,7 @@ 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)
 
@@ -65,16 +66,10 @@ export default {
     watch(
       () => props.numericalText,
       (newValue) => {
-        numericalModelValue.value = String(newValue || '')
+        numericalModelValue.value = newValue || null
       }
     )
 
-    const input = (value) => {
-      if (!/^\d+$/.test(value.data)) {
-        numericalModelValue.value = numericalModelValue.value.slice(0, -1)
-      }
-    }
-
     const change = () => {
       focus.value = false
       numericalModelValue.value = String(numericalModelValue.value)
@@ -99,7 +94,6 @@ export default {
       numericalSuffix,
       isNumericHover,
       focus,
-      input,
       change
     }
   }
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/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 f1fd4aa1b271aef24ba217df60d6253f39c2d796 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 6 Nov 2024 22:52:57 -0800
Subject: [PATCH 45/57] feat(style-panel): fix some reviews

---
 .../src/color-configurator/ColorConfigurator.vue           | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/configurator/src/color-configurator/ColorConfigurator.vue b/packages/configurator/src/color-configurator/ColorConfigurator.vue
index 9b71a4639..4949b0375 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 :value="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,8 +29,10 @@ export default {
   emits: ['change', 'update:modelValue'],
   setup(props, { emit }) {
     const color = ref(props.modelValue)
+    const inputColor = computed(() => color.value || '#FFFFFF')
 
     const change = (value) => {
+      inputColor.value = value
       emit('update:modelValue', value)
       emit('change', value)
     }
@@ -45,6 +47,7 @@ export default {
 
     return {
       color,
+      inputColor,
       change,
       changeColor
     }

From 19ba1f3ad00eea6832cd1ab5482739d6cf1292bd Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 6 Nov 2024 22:53:55 -0800
Subject: [PATCH 46/57]  feat(style-panel): fix some reviews

---
 .../configurator/src/color-configurator/ColorConfigurator.vue    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/configurator/src/color-configurator/ColorConfigurator.vue b/packages/configurator/src/color-configurator/ColorConfigurator.vue
index 4949b0375..917b3afbe 100644
--- a/packages/configurator/src/color-configurator/ColorConfigurator.vue
+++ b/packages/configurator/src/color-configurator/ColorConfigurator.vue
@@ -32,7 +32,6 @@ export default {
     const inputColor = computed(() => color.value || '#FFFFFF')
 
     const change = (value) => {
-      inputColor.value = value
       emit('update:modelValue', value)
       emit('change', value)
     }

From bcc65ade6ce0bbe3859ee4ce1b63aaa22156c31d Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 7 Nov 2024 00:29:35 -0800
Subject: [PATCH 47/57] feat(style-panel): fix some reviews

---
 .../configurator/src/color-configurator/ColorConfigurator.vue | 2 +-
 .../settings/styles/src/components/inputs/NumericSelect.vue   | 1 +
 packages/theme/light/setting-style.less                       | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/configurator/src/color-configurator/ColorConfigurator.vue b/packages/configurator/src/color-configurator/ColorConfigurator.vue
index 917b3afbe..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 :value="inputColor" type="color" class="input-color" @change="changeColor" />
+        <input v-model="inputColor" type="color" class="input-color" @change="changeColor" />
       </template>
     </tiny-input>
   </div>
diff --git a/packages/settings/styles/src/components/inputs/NumericSelect.vue b/packages/settings/styles/src/components/inputs/NumericSelect.vue
index 9dae48f24..b0a775bb3 100644
--- a/packages/settings/styles/src/components/inputs/NumericSelect.vue
+++ b/packages/settings/styles/src/components/inputs/NumericSelect.vue
@@ -6,6 +6,7 @@
       controls-position="right"
       :unit="numericalSuffix"
       :empty-value="null"
+      min="0"
       allow-empty
       @mouseover="isNumericHover = true"
       @mouseleave="isNumericHover = false"
diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less
index 914b30a03..aaf0c22d0 100644
--- a/packages/theme/light/setting-style.less
+++ b/packages/theme/light/setting-style.less
@@ -6,8 +6,8 @@
   --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-reset-bg-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-setting-style-reset-dot-color: var(--ti-lowcode-base-text-color-2);
+  --ti-lowcode-setting-style-reset-bg-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-setting-style-reset-dot-color: var(--te-common-bg-primary-checked);
   --ti-lowcode-setting-style-drag-bar-bg: var(--ti-lowcode-base-bg);
   --ti-lowcode-setting-style-spacing-bg: var(--te-base-gray-34);
 }

From 4a7038aed61eea3cce04b95da43700d153dee1d7 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 7 Nov 2024 00:35:21 -0800
Subject: [PATCH 48/57] feat(style-panel): add style panel collapsed or expand
 icon

---
 packages/layout/src/DesignSettings.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index 178b75f0c..745503b42 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -8,7 +8,7 @@
     </tiny-tabs>
     <div class="tabs-setting">
       <tiny-tooltip effect="dark" :content="isCollapsed ? '展开' : '折叠'" placement="top" :visible-arrow="false">
-        <template #default> <svg-icon name="setting" @click="isCollapsed = !isCollapsed"></svg-icon> </template>
+        <template #default> <svg-icon :name="settingIcon" @click="isCollapsed = !isCollapsed"></svg-icon> </template>
       </tiny-tooltip>
     </div>
   </div>
@@ -35,11 +35,13 @@ export default {
     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
     }
   }

From 0bea58c4b06db65a3582a1505111dbcf9781c540 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 7 Nov 2024 17:44:27 +0800
Subject: [PATCH 49/57] Create style-panel-expand.svg

feat(style-panel): add expand icon of style collapsed tab
---
 packages/design-core/assets/style-panel-expand.svg | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 packages/design-core/assets/style-panel-expand.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..d558ebd83
--- /dev/null
+++ b/packages/design-core/assets/style-panel-expand.svg
@@ -0,0 +1,11 @@
+<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">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<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>

From 0e967e593b45f025e68dd2294bf408fcad88d3ab Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 7 Nov 2024 17:45:27 +0800
Subject: [PATCH 50/57] Create style-pabel-collapsed.svg

feat(style-panel): add collapsed icon of style panel collapsed tabs
---
 .../design-core/assets/style-pabel-collapsed.svg     | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 packages/design-core/assets/style-pabel-collapsed.svg

diff --git a/packages/design-core/assets/style-pabel-collapsed.svg b/packages/design-core/assets/style-pabel-collapsed.svg
new file mode 100644
index 000000000..2cf8afafc
--- /dev/null
+++ b/packages/design-core/assets/style-pabel-collapsed.svg
@@ -0,0 +1,12 @@
+<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">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<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>

From ea029d39fc2c1b669921fc6345a8519038f4b62f Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 7 Nov 2024 18:23:25 +0800
Subject: [PATCH 51/57] Delete
 packages/design-core/assets/style-pabel-collapsed.svg

---
 .../design-core/assets/style-pabel-collapsed.svg     | 12 ------------
 1 file changed, 12 deletions(-)
 delete mode 100644 packages/design-core/assets/style-pabel-collapsed.svg

diff --git a/packages/design-core/assets/style-pabel-collapsed.svg b/packages/design-core/assets/style-pabel-collapsed.svg
deleted file mode 100644
index 2cf8afafc..000000000
--- a/packages/design-core/assets/style-pabel-collapsed.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<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">
-	<desc>
-			Created with Pixso.
-	</desc>
-	<defs/>
-	<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>

From 650964e5c47e459cd2eeabafe3dcb1094528aebe Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 7 Nov 2024 18:24:00 +0800
Subject: [PATCH 52/57] Create style-panel-collapsed.svg

---
 .../design-core/assets/style-panel-collapsed.svg     | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 packages/design-core/assets/style-panel-collapsed.svg

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..2cf8afafc
--- /dev/null
+++ b/packages/design-core/assets/style-panel-collapsed.svg
@@ -0,0 +1,12 @@
+<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">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<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>

From 8249af4a5c833f3231483535d2a90eacbabb72fe Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 7 Nov 2024 02:11:18 -0800
Subject: [PATCH 53/57] feat(style-panel): modify some icon color

---
 .../src/number-configurator/NumberConfigurator.vue |  6 ++++--
 .../TabsGroupConfigurator.vue                      | 14 ++++++++++++--
 packages/layout/src/DesignSettings.vue             |  3 ++-
 .../src/components/background/BackgroundGroup.vue  |  2 +-
 .../background/BackgroundImageSetting.vue          |  2 +-
 .../src/components/background/ImageSetting.vue     |  2 +-
 6 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/configurator/src/number-configurator/NumberConfigurator.vue b/packages/configurator/src/number-configurator/NumberConfigurator.vue
index 80bb03642..3aefaa3fd 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-default);
+    }
     &.is-without-controls {
       :deep(.tiny-numeric__input-inner) {
         padding-left: 8px;
@@ -203,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-disabled);
       }
     }
   }
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 26a463de9..e75f320ec 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -191,7 +191,6 @@ const change = (item) => {
   max-width: 210px;
   height: 24px;
   font-size: 12px;
-  background-color: var(--ti-lowcode-setting-style-tab-bg-color);
   display: flex;
   border-radius: 4px;
 
@@ -202,18 +201,21 @@ const change = (item) => {
       margin: 0;
       padding: 0;
       border: none;
-      background-color: var(--ti-lowcode-base-bg-5);
+      background-color: var(--te-common-bg-container);
       line-height: 14px;
       --ti-button-size-normal-min-width: 20px;
       --ti-button-size-normal-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;
       }
     }
@@ -240,8 +242,10 @@ const change = (item) => {
       height: 24px;
       background-color: var(--ti-lowcode-base-bg-5);
       --ti-dropdown-text-color: var(--te-common-text-primary);
+      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) {
@@ -270,12 +274,18 @@ const change = (item) => {
   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);
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index 745503b42..4d06f7461 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -60,9 +60,10 @@ export default {
 
   .tabs-setting {
     position: absolute;
-    top: 10px;
+    top: 9px;
     right: 18px;
     line-height: 26px;
+    color: var(--te-common-icon-secondary);
     cursor: pointer;
   }
   .tiny-tabs {
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 11de8bb54..92bd6ba45 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -544,7 +544,7 @@ export default {
       font-size: 16px;
       padding: 4px;
       &:hover svg {
-        color: var(--ti-lowcode-toolbar-icon-color);
+        color: var(--te-common-icon-secondary);
       }
     }
   }
diff --git a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
index 83de165be..769aebffa 100644
--- a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
+++ b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
@@ -6,7 +6,7 @@
         :options="state.typeLists"
         :modelValue="state.styleComponent"
         value-key="styleComponent"
-        label-width="49"
+        label-width="50"
         :effect="effect"
         :placement="placement"
         @update:modelValue="selectType"
diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
index a6bfa6cf6..86ac59701 100644
--- a/packages/settings/styles/src/components/background/ImageSetting.vue
+++ b/packages/settings/styles/src/components/background/ImageSetting.vue
@@ -22,7 +22,7 @@
     <tabs-group-configurator
       :options="BACKGROUND_SIZE_OPTIONS"
       :modelValue="state.sizeSelected"
-      label-width="65"
+      label-width="67"
       @update:modelValue="selectSize"
     ></tabs-group-configurator>
   </div>

From 99ba593b774e54b40e4cbc7a181d5f41e83e9123 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 7 Nov 2024 18:09:09 -0800
Subject: [PATCH 54/57] feat(style-panel): fix some reviews

---
 .../src/number-configurator/NumberConfigurator.vue       | 4 ++--
 .../tabs-group-configurator/TabsGroupConfigurator.vue    | 9 +++++----
 packages/design-core/assets/style-panel-collapsed.svg    | 4 ----
 packages/design-core/assets/style-panel-expand.svg       | 4 ----
 packages/layout/src/DesignSettings.vue                   | 2 +-
 packages/settings/styles/src/Main.vue                    | 2 +-
 packages/theme/light/setting-style.less                  | 2 --
 7 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/packages/configurator/src/number-configurator/NumberConfigurator.vue b/packages/configurator/src/number-configurator/NumberConfigurator.vue
index 3aefaa3fd..157b857e8 100644
--- a/packages/configurator/src/number-configurator/NumberConfigurator.vue
+++ b/packages/configurator/src/number-configurator/NumberConfigurator.vue
@@ -170,7 +170,7 @@ export default {
       text-align: left;
     }
     :deep(.is-disabled) {
-      background-color: var(--te-common-bg-default);
+      background-color: var(--te-common-bg-disabled);
     }
     &.is-without-controls {
       :deep(.tiny-numeric__input-inner) {
@@ -205,7 +205,7 @@ export default {
         display: none;
       }
       .tiny-input.is-disabled .tiny-input__inner {
-        background-color: var(--te-common-bg-disabled);
+        background-color: var(--te-common-bg-container);
       }
     }
   }
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index e75f320ec..3d6323813 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -103,26 +103,27 @@ import {
 } from '@opentiny/vue'
 
 const props = defineProps({
+  // tab选中值，用于默认选中的tab
   modelValue: {
     type: String,
     default: ''
   },
+  // tab选中值如果是对象，valueKey是对象内的某个key
   valueKey: {
     type: String,
     default: ''
   },
-  effect: {
-    type: String,
-    default: 'dark'
-  },
+  // 提示内容位置
   placement: {
     type: String,
     default: 'top'
   },
+  // tabItem宽度
   labelWidth: {
     type: Number,
     default: 63
   },
+  // tab的选项，如果选项中包含collapsed，则会折叠为下拉
   options: {
     type: Array,
     default: () => []
diff --git a/packages/design-core/assets/style-panel-collapsed.svg b/packages/design-core/assets/style-panel-collapsed.svg
index 2cf8afafc..4909844dd 100644
--- a/packages/design-core/assets/style-panel-collapsed.svg
+++ b/packages/design-core/assets/style-panel-collapsed.svg
@@ -1,8 +1,4 @@
 <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">
-	<desc>
-			Created with Pixso.
-	</desc>
-	<defs/>
 	<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"/>
diff --git a/packages/design-core/assets/style-panel-expand.svg b/packages/design-core/assets/style-panel-expand.svg
index d558ebd83..90ed6ec7b 100644
--- a/packages/design-core/assets/style-panel-expand.svg
+++ b/packages/design-core/assets/style-panel-expand.svg
@@ -1,8 +1,4 @@
 <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">
-	<desc>
-			Created with Pixso.
-	</desc>
-	<defs/>
 	<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"/>
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index 4d06f7461..8ad765762 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -6,7 +6,7 @@
         <div v-show="activating" class="active"></div>
       </tiny-tab-item>
     </tiny-tabs>
-    <div class="tabs-setting">
+    <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>
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index f4cf10469..2ac04daea 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -265,7 +265,7 @@ export default {
   display: inline-block;
   margin-left: 4px;
   vertical-align: middle;
-  border: 2px solid var(--ti-lowcode-setting-style-reset-dot-color);
+  border: 2px solid var(--te-common-border-checked);
   border-radius: 2px;
 }
 </style>
diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less
index aaf0c22d0..1782792b4 100644
--- a/packages/theme/light/setting-style.less
+++ b/packages/theme/light/setting-style.less
@@ -6,8 +6,6 @@
   --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-reset-bg-color: var(--te-common-bg-primary-checked);
-  --ti-lowcode-setting-style-reset-dot-color: var(--te-common-bg-primary-checked);
   --ti-lowcode-setting-style-drag-bar-bg: var(--ti-lowcode-base-bg);
   --ti-lowcode-setting-style-spacing-bg: var(--te-base-gray-34);
 }

From ab35c29ef4c955714710d15b1040db97a3528da8 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 7 Nov 2024 18:17:21 -0800
Subject: [PATCH 55/57] feat(style-panel): fix some reviews

---
 .../src/tabs-group-configurator/TabsGroupConfigurator.vue      | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 3d6323813..a46eb7c9e 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -18,7 +18,6 @@
             <span v-if="item?.label && !item?.content">{{ item.label }}</span>
             <tiny-popover
               v-if="item?.content"
-              :effect="effect"
               :placement="placement"
               :visible-arrow="false"
               :content="item.content"
@@ -46,7 +45,6 @@
             }}</span>
             <tiny-popover
               v-if="selectedCollapsedOption?.content"
-              :effect="effect"
               :placement="placement"
               :visible-arrow="false"
               :content="selectedCollapsedOption.content"
@@ -72,7 +70,6 @@
                 <span v-if="item?.label && !item?.content">{{ item.label }}</span>
                 <tiny-popover
                   v-if="item?.content"
-                  :effect="effect"
                   :placement="placement"
                   :visible-arrow="false"
                   :content="item.content"

From 1f4004d4364f6c45822126842d46b100efa57894 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 7 Nov 2024 18:21:07 -0800
Subject: [PATCH 56/57] feat(style-panel): fix some reviews

---
 .../src/tabs-group-configurator/TabsGroupConfigurator.vue  | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index a46eb7c9e..841beb01a 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -201,8 +201,8 @@ const change = (item) => {
       border: none;
       background-color: var(--te-common-bg-container);
       line-height: 14px;
-      --ti-button-size-normal-min-width: 20px;
-      --ti-button-size-normal-max-width: 80px;
+      min-width: 20px;
+      max-width: 80px;
       color: var(--te-common-text-weaken);
 
       &:hover {
@@ -239,7 +239,6 @@ const change = (item) => {
       align-items: center;
       height: 24px;
       background-color: var(--ti-lowcode-base-bg-5);
-      --ti-dropdown-text-color: var(--te-common-text-primary);
       color: var(--te-common-text-weaken);
       &.selected {
         background-color: var(--ti-lowcode-base-gray-101);
@@ -263,7 +262,7 @@ const change = (item) => {
       &:hover {
         background-color: var(--ti-lowcode-base-gray-101);
         border-radius: 4px;
-        --ti-dropdown-text-color-hover: var(--te-common-text-primary);
+        color: var(--te-common-text-primary);
       }
     }
   }

From 12127ac11ac34684deaaf9ff51d0b26a50f5b6ff Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 7 Nov 2024 21:05:23 -0800
Subject: [PATCH 57/57] feat(style-panel): fix some reviews

---
 .../settings/styles/src/components/background/ImageSetting.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
index 86ac59701..bcb0227de 100644
--- a/packages/settings/styles/src/components/background/ImageSetting.vue
+++ b/packages/settings/styles/src/components/background/ImageSetting.vue
@@ -88,7 +88,7 @@ import {
 const props = defineProps({
   style: {
     type: Object,
-    default: () => {}
+    default: () => ({})
   },
   effect: {
     type: String,