From dc64b40e3ab8f33938197f513cbcf9c76f9ecb06 Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Tue, 29 Oct 2024 16:22:38 +0800
Subject: [PATCH 1/3] fix(refactor/styles): fix property panel styles and
 common styles

---
 packages/common/component/ConfigItem.vue      |   2 +-
 packages/common/component/MetaChildItem.vue   |   6 +-
 packages/common/component/MetaCodeEditor.vue  |   8 ++
 .../JsSlotConfigurator.vue                    |  17 ++-
 .../SliderConfigurator.vue                    |   7 +-
 .../slot-configurator/SlotConfigurator.vue    |   2 +-
 packages/design-core/assets/empty-action.svg  |  32 ++---
 packages/design-core/assets/page-schema.svg   |  15 ++-
 .../events/src/components/AdvanceConfig.vue   |   2 +-
 .../events/src/components/BindEvents.vue      |   6 +-
 .../src/components/BindEventsDialog.vue       |   4 +-
 .../components/BindEventsDialogContent.vue    |   2 +-
 .../components/BindEventsDialogSidebar.vue    |   2 +-
 .../components/background/BackgroundGroup.vue |   2 +-
 .../src/components/border/BorderGroup.vue     |   3 +-
 .../src/components/effects/EffectGroup.vue    |   2 +-
 .../styles/src/components/size/SizeGroup.vue  |   2 +-
 .../components/typography/TypographyGroup.vue |   7 +-
 packages/theme/base/src/base.less             |   1 +
 packages/theme/base/src/common.less           |   4 +
 packages/theme/base/src/component-common.less |  12 +-
 .../theme/base/src/page/base-config-page.less | 126 ++++++++++++++++++
 packages/theme/dark/variable.less             |   2 +-
 packages/theme/light/variable.less            |   4 +-
 24 files changed, 213 insertions(+), 57 deletions(-)

diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
index 57271c7120..dcf05f57e8 100644
--- a/packages/common/component/ConfigItem.vue
+++ b/packages/common/component/ConfigItem.vue
@@ -518,7 +518,7 @@ export default {
   justify-content: space-between;
   position: relative;
   align-items: center;
-  padding-bottom: 8px;
+  padding-bottom: var(--te-common-vertical-item-spacing-normal);
   &:last-child {
     padding-bottom: 0;
   }
diff --git a/packages/common/component/MetaChildItem.vue b/packages/common/component/MetaChildItem.vue
index a0441b1362..6c5165d757 100644
--- a/packages/common/component/MetaChildItem.vue
+++ b/packages/common/component/MetaChildItem.vue
@@ -93,15 +93,19 @@ export default {
   color: var(--te-common-text-primary);
   padding: 0 10px;
   font-weight: bold;
+  margin-bottom: 16px;
 }
 .items-container {
   width: 100%;
   display: flex;
-  flex-wrap: wrap;
   flex-direction: column;
+  height: calc(100% - 34px); // 22为头部+底部的高度
+  overflow-y: auto;
+
   .meta-config-item {
     flex: 1;
     padding: 0 10px;
+    margin-bottom: var(--te-common-vertical-item-spacing-normal);
   }
 }
 </style>
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 1141455fd4..441fe1c10d 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -7,6 +7,8 @@
       </div>
       <tiny-button v-else class="edit-btn" @click="open">
         <slot name="icon"></slot>
+        <svg-icon name="page-schema" v-if="buttonText === '编辑代码'" class="edit-btn-icon"></svg-icon>
+
         {{ buttonLabel }}
       </tiny-button>
     </slot>
@@ -267,6 +269,12 @@ export default {
     &:focus {
       border-color: var(--te-common-border-active);
     }
+    .edit-btn-icon {
+      font-size: 14px;
+      margin-right: 4px;
+      vertical-align: text-top;
+      color: var(--te-common-icon-secondary);
+    }
   }
 }
 
diff --git a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
index 5e270b44d5..e8839afde0 100644
--- a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
+++ b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
@@ -3,17 +3,19 @@
     <div class="label">使用插槽</div>
     <tiny-form ref="slotRef" class="slot-form" :model="slotList" label-width="0" inline>
       <div v-for="(slot, index) in slotList" :key="slot.name" class="use-slot">
-        <div class="use-slot-item-name">{{ slot.name }}</div>
+        <div class="use-slot-item-name">
+          {{ slot.name }}
+          <tiny-tooltip effect="dark" :content="state.currentComponent?.content" placement="top">
+            <span class="item-icon">
+              <component :is="state.currentComponent?.icon"></component>
+            </span>
+          </tiny-tooltip>
+        </div>
         <div class="use-slot-item-content">
           <div class="use-slot-switch-wrap">
             <div :class="['e__switch', { 'e_is-checked': slot.bind }]">
               <span class="e__switch-core" @click="toggleSlot(index, slot)"></span>
             </div>
-            <tiny-tooltip effect="dark" :content="state.currentComponent?.content" placement="top">
-              <span class="item-icon">
-                <component :is="state.currentComponent?.icon"></component>
-              </span>
-            </tiny-tooltip>
           </div>
           <tiny-form-item
             :prop="paramsPropPath(index)"
@@ -191,6 +193,7 @@ export default {
 
   .use-slot-switch-wrap {
     display: flex;
+    align-items: center;
   }
 
   &-item-name {
@@ -214,7 +217,7 @@ export default {
   }
 
   .item-icon {
-    margin: 3px 3px 0 6px;
+    margin: 0 3px 0 6px;
   }
 }
 
diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index 8a6cc08c7d..0a5f196fd5 100644
--- a/packages/configurator/src/slider-configurator/SliderConfigurator.vue
+++ b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -128,17 +128,16 @@ export default {
   }
   input[type='range'] {
     height: 4px;
-    border-radius: 8px;
+    border-radius: 10px;
     margin: 0.8em 0;
     padding: 0;
     cursor: pointer;
     border: 0;
-    background: -webkit-linear-gradient(#fff, #fff) no-repeat #999999;
-    background-size: 0% 100%;
+    background-color: transparent;
     position: relative;
     outline: 0;
-    top: -1px;
     -webkit-appearance: none !important;
+    appearance: none;
   }
   input[type='range']::-webkit-slider-thumb {
     width: 10px;
diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
index 35ebbe0f49..6e4989a038 100644
--- a/packages/configurator/src/slot-configurator/SlotConfigurator.vue
+++ b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
@@ -137,7 +137,7 @@ export default {
   justify-content: center;
   align-items: center;
   &:not(:last-child) {
-    margin-bottom: 8px;
+    margin-bottom: var(--te-common-vertical-item-spacing-normal);
   }
   .slot-name {
     width: 30%;
diff --git a/packages/design-core/assets/empty-action.svg b/packages/design-core/assets/empty-action.svg
index 357df9518d..25bb6cc2e4 100644
--- a/packages/design-core/assets/empty-action.svg
+++ b/packages/design-core/assets/empty-action.svg
@@ -1,15 +1,17 @@
-<svg data-icon="ElementEvents" aria-hidden="true" focusable="false" width="41" height="41" viewBox="0 0 41 41"
-  class="bem-Svg" style="display: block">
-  <g fill="none" fill-rule="evenodd">
-    <path d="M-4-4h48v48H-4z"></path>
-    <path
-      d="M40.828 38.002l-5.414-5.414 3.878-3.88c.388-.388.27-.816-.262-.95l-14.062-3.516c-.532-.132-.86.196-.726.728l3.516 14.06c.132.534.56.652.95.262l3.878-3.88L38 40.832l2.828-2.83z"
-      fill="#A9A9A9"></path>
-    <path
-      d="M4 20.004c0-8.822 7.178-16 16-16s16 7.178 16 16h4c0-11.028-8.972-20-20-20s-20 8.972-20 20 8.972 20 20 20v-4c-8.822-.002-16-7.178-16-16z"
-      fill="#707070"></path>
-    <path
-      d="M20 12.004c4.41 0 8 3.588 8 8h4c0-6.618-5.382-12-12-12s-12 5.382-12 12 5.382 12 12 12v-4c-4.41 0-8-3.588-8-8s3.59-8 8-8z"
-      fill="#707070"></path>
-  </g>
-</svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:currentColor;}
+</style>
+<desc>Created with Pixso.</desc>
+<path class="st0" d="M16,0C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16c0.4,0,0.8-0.4,0.8-0.8c0-0.5-0.4-0.8-0.8-0.8C8,30.4,1.6,24,1.6,16
+	C1.6,8,8,1.6,16,1.6C24,1.6,30.4,8,30.4,16c0,0.4,0.4,0.8,0.8,0.8c0.4,0,0.8-0.4,0.8-0.8C32,7.2,24.8,0,16,0z M16,8
+	c-4.4,0-8,3.6-8,8c0,4.4,3.6,8,8,8c0.4,0,0.8-0.4,0.8-0.8c0-0.5-0.4-0.8-0.8-0.8c-3.5,0-6.4-2.9-6.4-6.4c0-3.5,2.9-6.4,6.4-6.4
+	c3.5,0,6.4,2.9,6.4,6.4c0,0.4,0.4,0.8,0.8,0.8c0.4,0,0.8-0.4,0.8-0.8C24,11.6,20.4,8,16,8z M20.4,21.1c0.3,0,0.7-0.4,0.7-0.7
+	l2.1,9.5c-0.1-0.4-0.9-0.6-1.2-0.4l2.1-2.1l1.3-1.3l1.1,1.5l1.9,2.7c-0.1-0.1-0.3-0.1-0.4,0l2.3-2.3c-0.1,0.1,0,0.3,0,0.4l-2.7-1.9
+	l-1.5-1.1l1.3-1.3l2.2-2.1c-0.3,0.3,0,1.2,0.4,1.2L20.4,21.1z M26.1,29.6l-0.8-1.1l-1,1l-0.2,0.2l-1,1c-0.6,0.6-1.3,0.4-1.5-0.4
+	l-2.1-9.4c-0.2-0.9,0.4-1.4,1.2-1.2l9.7,2c0.9,0.2,1.1,0.8,0.4,1.5l-1,1l-0.2,0.2l-1,1l1.1,0.8l0.2,0.2l1.4,1c0.7,0.5,0.8,1.4,0.2,2
+	l-2.3,2.3c-0.6,0.6-1.6,0.6-2.1-0.2l-1-1.3L26.1,29.6z"/>
+</svg>
diff --git a/packages/design-core/assets/page-schema.svg b/packages/design-core/assets/page-schema.svg
index ab4b1b64ad..6d94f9e9e0 100644
--- a/packages/design-core/assets/page-schema.svg
+++ b/packages/design-core/assets/page-schema.svg
@@ -1,11 +1,16 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+	 viewBox="0 0 132 132" style="enable-background:new 0 0 132 132;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:currentColor;}
+	.st0{fill:none;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;}
 </style>
-<polygon class="st0" points="23.5,11.2 16.9,4.6 15.4,6.1 20.4,11.2 15.3,16.3 16.9,17.9 22,12.8 22,12.8 "/>
-<polygon class="st0" points="0.5,11.2 7.1,17.9 8.6,16.3 3.6,11.2 8.7,6.1 7.1,4.6 2,9.7 2,9.7 "/>
-<polygon class="st0" points="9.8,17.7 11.9,4.6 14.2,4.6 12.1,17.7 "/>
+<rect id="size" class="st0" width="132" height="132"/>
+<path id="矢量_7__x28_边框_x29_" class="st1" d="M79.1,17.3l-19.3,99c-0.4,2.3-2.6,3.7-4.8,3.3c-2.3-0.4-3.7-2.6-3.3-4.8
+	l19.3-99c0.4-2.3,2.6-3.7,4.8-3.3C78.1,12.9,79.5,15,79.1,17.3z M39.5,39.2L13.4,66l26.1,26.8c1.6,1.7,1.6,4.3-0.1,5.9
+	c-1.7,1.6-4.3,1.5-5.9-0.1L5.8,70c-0.6-0.5-1-1.2-1.2-1.8c-0.3-0.7-0.4-1.4-0.4-2.1c0-0.8,0.1-1.5,0.4-2.2c0.3-0.7,0.7-1.3,1.2-1.8
+	l27.7-28.6c1.6-1.6,4.2-1.7,5.9-0.1C41.1,34.9,41.1,37.5,39.5,39.2z M97.3,33.4c-1.6-1.6-4.2-1.7-5.9-0.1c-1.7,1.6-1.7,4.2-0.1,5.9
+	L117.4,66L91.3,92.8c-1.6,1.7-1.6,4.3,0.1,5.9c1.7,1.6,4.3,1.5,5.9-0.1L125,70c0.6-0.5,1-1.2,1.2-1.8c0.3-0.7,0.4-1.4,0.4-2.1
+	c0-0.8-0.1-1.5-0.4-2.2c-0.3-0.7-0.7-1.3-1.2-1.8L97.3,33.4z"/>
 </svg>
diff --git a/packages/settings/events/src/components/AdvanceConfig.vue b/packages/settings/events/src/components/AdvanceConfig.vue
index 7e7754f6bd..ac965f478b 100644
--- a/packages/settings/events/src/components/AdvanceConfig.vue
+++ b/packages/settings/events/src/components/AdvanceConfig.vue
@@ -236,7 +236,7 @@ export default {
 .advanced-config-container {
   .advnce-config {
     &:not(:last-child) {
-      margin-bottom: 8px;
+      margin-bottom: var(--te-common-vertical-item-spacing-normal);
     }
     align-items: center;
     display: flex;
diff --git a/packages/settings/events/src/components/BindEvents.vue b/packages/settings/events/src/components/BindEvents.vue
index da3715b10a..515fc08eb6 100644
--- a/packages/settings/events/src/components/BindEvents.vue
+++ b/packages/settings/events/src/components/BindEvents.vue
@@ -313,7 +313,7 @@ export default {
     .bind-action-button-item {
       width: 50%;
       &:not(:last-child) {
-        margin-right: 8px;
+        margin-right: 12px;
       }
     }
     .add-custom-event-button {
@@ -344,7 +344,7 @@ export default {
     background-color: var(--ti-lowcode-events-empty-action-bg-color);
     color: var(--ti-lowcode-events-empty-action-color);
     padding: 24px 18px;
-    margin-top: 8px;
+    margin-top: var(--te-common-vertical-item-spacing-normal);
     .empty-action-icon {
       font-size: 48px;
     }
@@ -365,7 +365,7 @@ export default {
   }
 }
 .bind-event-list {
-  padding: 8px 0;
+  padding: var(--te-common-vertical-item-spacing-normal) 0;
   color: var(--ti-lowcode-events-bind-event-list-color);
 }
 .bind-event-list-item-notallow {
diff --git a/packages/settings/events/src/components/BindEventsDialog.vue b/packages/settings/events/src/components/BindEventsDialog.vue
index a7f6ef122b..ca5cbb6502 100644
--- a/packages/settings/events/src/components/BindEventsDialog.vue
+++ b/packages/settings/events/src/components/BindEventsDialog.vue
@@ -247,8 +247,8 @@ export default {
 }
 
 .bind-event-dialog-tip {
-  padding: 8px 14px;
-  margin-bottom: 8px;
+  padding: var(--te-common-vertical-item-spacing-normal) 14px;
+  margin-bottom: var(--te-common-vertical-item-spacing-normal);
   background-color: var(--te-common-bg-container);
   color: var(--te-common-text-weaken);
 }
diff --git a/packages/settings/events/src/components/BindEventsDialogContent.vue b/packages/settings/events/src/components/BindEventsDialogContent.vue
index 31b00d1e86..3da6c581e1 100644
--- a/packages/settings/events/src/components/BindEventsDialogContent.vue
+++ b/packages/settings/events/src/components/BindEventsDialogContent.vue
@@ -146,7 +146,7 @@ export default {
   }
   .content-right-top .content-right-title,
   .content-right-bottom .content-right-title {
-    margin-bottom: 8px;
+    margin-bottom: var(--te-common-vertical-item-spacing-normal);
     .set-params-tip {
       margin-top: 6px;
       font-weight: 400;
diff --git a/packages/settings/events/src/components/BindEventsDialogSidebar.vue b/packages/settings/events/src/components/BindEventsDialogSidebar.vue
index 554f612f32..ae8aa1a696 100644
--- a/packages/settings/events/src/components/BindEventsDialogSidebar.vue
+++ b/packages/settings/events/src/components/BindEventsDialogSidebar.vue
@@ -113,7 +113,7 @@ export default {
     border: 1px solid var(--ti-lowcode-bind-event-dialog-content-left-border-color);
     border-radius: 4px;
     height: 300px;
-    margin-top: 8px;
+    margin-top: var(--te-common-vertical-item-spacing-normal);
     display: flex;
     flex: 1;
 
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 66de5a4730..9040b0321f 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -383,7 +383,7 @@ export default {
 <style lang="less" scoped>
 .background-group {
   display: grid;
-  gap: 8px;
+  gap: 12px 8px;
   grid-template-columns: 48px auto auto;
   align-items: center;
   .background-label {
diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue
index 64159f4e6b..2e9ff1e685 100644
--- a/packages/settings/styles/src/components/border/BorderGroup.vue
+++ b/packages/settings/styles/src/components/border/BorderGroup.vue
@@ -551,13 +551,14 @@ export default {
   }
 }
 .item-row {
-  margin-bottom: 8px;
+  margin-bottom: var(--te-common-vertical-form-label-spacing);
 }
 .radius-row {
   display: flex;
   align-items: center;
   gap: 8px;
   position: relative;
+  margin-bottom: var(--te-common-vertical-item-spacing-normal);
   svg {
     color: var(--ti-lowcode-input-icon-color);
     font-size: 16px;
diff --git a/packages/settings/styles/src/components/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue
index cba6a1b872..1d01cd41e2 100644
--- a/packages/settings/styles/src/components/effects/EffectGroup.vue
+++ b/packages/settings/styles/src/components/effects/EffectGroup.vue
@@ -519,7 +519,7 @@ export default {
   gap: 8px;
   grid-template-columns: 44px auto;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: var(--te-common-vertical-item-spacing-normal);
   &:last-child {
     margin-bottom: 0;
   }
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 0e16b4872c..2d208d2bc2 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -447,7 +447,7 @@ export default {
 <style lang="less" scoped>
 .size-row {
   display: flex;
-  margin-bottom: 8px;
+  margin-bottom: var(--te-common-vertical-item-spacing-normal);
   &:last-child {
     margin-bottom: 0;
   }
diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index 14cbfaebbf..ee508b26b3 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -473,7 +473,7 @@ export default {
     gap: 4px 20px;
     grid-template-columns: 15px 1fr;
     align-items: center;
-    margin-bottom: 8px;
+    margin-bottom: var(--te-common-vertical-item-spacing-normal);
     &:last-child {
       margin-bottom: 0;
     }
@@ -488,8 +488,7 @@ export default {
 
     .typography-label {
       margin-right: -16px;
-      align-self: flex-start;
-      line-height: 26px;
+      line-height: 16px;
       color: var(--ti-lowcode-component-setting-panel-label-color);
     }
 
@@ -498,7 +497,7 @@ export default {
       display: flex;
 
       .typography-content-item {
-        padding: 4px 5px;
+        padding: 0 5px;
         font-size: 16px;
         color: var(--ti-lowcode-component-setting-panel-icon-color);
         position: relative;
diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less
index 51e8402932..edb31e5321 100644
--- a/packages/theme/base/src/base.less
+++ b/packages/theme/base/src/base.less
@@ -282,6 +282,7 @@
   --te-base-blue-22: #006cff;
   --te-base-blue-23: #8bbefa;
   --te-base-blue-24: #476be5;
+  --te-base-blue-25: rgba(20, 118, 255, 0.1);
 
   // expand-indigo
   --te-base-indigo-1: #eee8ff;
diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
index 9bb549d473..3184d01d6a 100644
--- a/packages/theme/base/src/common.less
+++ b/packages/theme/base/src/common.less
@@ -46,6 +46,10 @@
   --te-common-bg-default: var(--te-base-gray-1); // 白色背景-输入框背景/面板背景色 #fff
   --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0
   --te-common-bg-switch: var(--te-base-gray-18); // 开关默认色 #c2c2c2
+
+  // 通用间距
+  --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
+  --te-common-vertical-form-label-spacing: 8px; // 上下布局时，表单label与表单元素的间隔
 }
 
 :root[data-theme='dark'] {
diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
index 89db377182..285a454de2 100644
--- a/packages/theme/base/src/component-common.less
+++ b/packages/theme/base/src/component-common.less
@@ -114,7 +114,7 @@
     border-bottom-style: none;
 
     .tiny-collapse-item__word-overflow {
-      margin: 12px 0px;
+      margin: var(--te-common-vertical-item-spacing-normal) 0px;
       width: 100%;
       line-height: var(--te-base-line-height-4);
     }
@@ -452,9 +452,7 @@
   font-size: var(--te-base-font-size-base);
   color: var(--te-common-text-primary);
   background-color: var(--te-common-bg-default);
-
   height: auto;
-  line-height: 28px;
 }
 
 // 13、tag标签
@@ -590,7 +588,9 @@
 // 17、tooltip文字提示
 .tiny-tooltip.tiny-tooltip {
   &.tiny-tooltip__popper {
-    box-shadow: 0 4px 16px 0 var(--te-base-rgba-23);
+    box-shadow: 0 0 20px 0 var(--te-base-rgba-23);
+    background: var(--te-common-bg-default);
+    color: var(--te-common-text-primary);
     &[class*='is-'] {
       background: var(--te-common-bg-default);
       color: var(--te-common-text-primary);
@@ -599,6 +599,7 @@
       border: 1px solid var(--te-common-border-default);
       &[x-placement^='top'] {
         .popper__arrow {
+          border-top-color: var(--te-common-border-default);
           &.popper__arrow::after {
             border-top-color: var(--te-common-text-inverse);
           }
@@ -606,6 +607,7 @@
       }
       &[x-placement^='bottom'] {
         .popper__arrow {
+          border-bottom-color: var(--te-common-border-default);
           &.popper__arrow::after {
             border-bottom-color: var(--te-common-text-inverse);
           }
@@ -613,6 +615,7 @@
       }
       &[x-placement^='left'] {
         .popper__arrow {
+          border-left-color: var(--te-common-text-inverse);
           &.popper__arrow::after {
             border-left-color: var(--te-common-text-inverse);
           }
@@ -620,6 +623,7 @@
       }
       &[x-placement^='right'] {
         .popper__arrow {
+          border-right-color: var(--te-common-text-inverse);
           &.popper__arrow::after {
             border-right-color: var(--te-common-text-inverse);
           }
diff --git a/packages/theme/base/src/page/base-config-page.less b/packages/theme/base/src/page/base-config-page.less
index b295912f1e..e2848699a6 100644
--- a/packages/theme/base/src/page/base-config-page.less
+++ b/packages/theme/base/src/page/base-config-page.less
@@ -131,3 +131,129 @@ td {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+
+.tiny-popover.tiny-popover.option-popper {
+  background: var(--ti-lowcode-popover-bg-color);
+  border: 1px solid var(--ti-lowcode-popover-option-popper-border-color);
+  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  padding: 0px 8px 12px;
+  &[x-placement^='bottom'] {
+    .popper__arrow {
+      &,
+      &::after {
+        border-bottom-color: var(--ti-lowcode-popover-bg-color);
+      }
+    }
+  }
+
+  &[x-placement^='right'] {
+    margin-left: 16px;
+
+    .popper__arrow {
+      left: -7px;
+      border-color: transparent;
+
+      &::after {
+        border-right-color: var(--ti-lowcode-popover-bg-color);
+      }
+    }
+  }
+
+  &[x-placement^='top'] {
+    .popper__arrow {
+      &,
+      &::after {
+        border-top-color: var(--ti-lowcode-popover-bg-color);
+      }
+    }
+  }
+
+  &[x-placement^='left'] {
+    .popper__arrow {
+      right: -7px;
+
+      &,
+      &::after {
+        border-left-color: var(--ti-lowcode-popover-bg-color);
+      }
+    }
+  }
+
+  .add-options {
+    &.top {
+      border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
+      margin-bottom: 15px;
+      overflow: hidden;
+      display: flex;
+      height: 26px;
+      justify-content: space-between;
+      align-items: center;
+      padding: 6px;
+
+      .title {
+        font-weight: 600;
+      }
+
+      .icon-close {
+        margin-bottom: 4px;
+        margin-right: 0px;
+      }
+    }
+
+    .demo-form {
+      padding: 6px;
+
+      .tiny-form-item {
+        margin-bottom: 4px;
+
+        :deep(.tiny-form-item__label) {
+          color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        }
+
+        :deep(.tiny-input__inner) {
+          color: var(--ti-lowcode-tootip-input-color);
+          background: var(--ti-lowcode-tootip-input-background-color);
+          border-color: var(--ti-lowcode-tootip-input-border-color);
+
+          &:focus {
+            border-color: var(--ti-lowcode-canvas-handle-hover-bg);
+          }
+        }
+      }
+
+      :deep(.btn) {
+        .tiny-form-item__content {
+          display: flex;
+
+          .tiny-button {
+            min-width: auto;
+            flex: 1;
+          }
+        }
+      }
+    }
+
+    .tiny-svg {
+      &.icon-close {
+        margin: 10px;
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &.header-icon {
+        margin-right: 0;
+      }
+
+      &.isBind {
+        color: var(--ti-lowcode-icon-bind-color);
+      }
+    }
+  }
+  &.fixed-left {
+    top: calc(24px + var(--base-nav-panel-width)) !important;
+    transform: translateX(calc(4px - var(--base-right-panel-width)));
+    height: calc(100% - 36px);
+  }
+}
diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less
index d148d58a02..58083c1bad 100644
--- a/packages/theme/dark/variable.less
+++ b/packages/theme/dark/variable.less
@@ -350,7 +350,7 @@
   // 次要描述字体颜色 && 面包屑label 字体颜色
   --ti-lowcode-description-minor-color: #ababab;
   // 样式设置 label 字体颜色
-  --ti-lowcode-style-setting-label-color: #8bbefa;
+  --ti-lowcode-style-setting-label-color: var(--te-common-bg-primary-checked);
   // 样式设置 label 背景颜色
   --ti-lowcode-style-setting-label-bg: rgba(76, 152, 241, 0.15);
   // 多人协作item项hover背景色
diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less
index 9d1d8a5623..dd53faa63e 100644
--- a/packages/theme/light/variable.less
+++ b/packages/theme/light/variable.less
@@ -327,9 +327,9 @@
   // 次要描述字体颜色 && 面包屑label 字体颜色
   --ti-lowcode-description-minor-color: #ababab;
   // 样式设置 label 字体颜色
-  --ti-lowcode-style-setting-label-color: #8bbefa;
+  --ti-lowcode-style-setting-label-color: var(--te-common-bg-primary-checked);
   // 样式设置 label 背景颜色
-  --ti-lowcode-style-setting-label-bg: rgba(76, 152, 241, 0.15);
+  --ti-lowcode-style-setting-label-bg: var(--te-base-blue-25);
   // 多人协作item项hover背景色
   --ti-lowcode-user-item-hover-bg: #f3f3f5;
   // 多人协作人员头像背景色

From da985327d1dc4402cf28273faa4dc6da831771ff Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Tue, 29 Oct 2024 17:13:01 +0800
Subject: [PATCH 2/3]  fix(refactor/styles): fix property panel styles and
 common styles review

---
 packages/common/component/MetaCodeEditor.vue               | 5 ++++-
 .../src/slider-configurator/SliderConfigurator.vue         | 7 +++++--
 packages/theme/base/src/common.less                        | 4 ++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 441fe1c10d..020fbc4bbf 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -7,7 +7,7 @@
       </div>
       <tiny-button v-else class="edit-btn" @click="open">
         <slot name="icon"></slot>
-        <svg-icon name="page-schema" v-if="buttonText === '编辑代码'" class="edit-btn-icon"></svg-icon>
+        <svg-icon name="page-schema" v-if="buttonText === EDIT_CODE_TEXT" class="edit-btn-icon"></svg-icon>
 
         {{ buttonLabel }}
       </tiny-button>
@@ -145,6 +145,8 @@ export default {
     const editorTipsTitle = computed(() => props.tips?.title?.[locale.value] ?? props.tips?.title)
     const editorTipsDemo = computed(() => props.tips?.demo?.[locale.value] ?? props.tips?.demo)
 
+    const EDIT_CODE_TEXT = '编辑代码'
+
     watchEffect(() => {
       const { modelValue, dataType } = props
       const val = dataType ? modelValue?.value || '' : modelValue
@@ -241,6 +243,7 @@ export default {
       editor,
       editorState,
       value,
+      EDIT_CODE_TEXT,
       options: {
         language: props.language,
         minimap: {
diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index 0a5f196fd5..dbe835dc3d 100644
--- a/packages/configurator/src/slider-configurator/SliderConfigurator.vue
+++ b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -136,7 +136,8 @@ export default {
     background-color: transparent;
     position: relative;
     outline: 0;
-    -webkit-appearance: none !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
     appearance: none;
   }
   input[type='range']::-webkit-slider-thumb {
@@ -151,7 +152,9 @@ export default {
     cursor: pointer;
     background-clip: padding-box;
     box-sizing: border-box;
-    -webkit-appearance: none !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
   }
   input[type='range']::-webkit-slider-thumb:active {
     border: 0;
diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
index 3184d01d6a..263a2e8d86 100644
--- a/packages/theme/base/src/common.less
+++ b/packages/theme/base/src/common.less
@@ -97,4 +97,8 @@
   --te-common-bg-default: var(--te-base-dark-27); // 深色背景-输入框背景/面板背景色 #212329
   --te-common-bg-disabled: var(--te-base-dark-29); // 禁用/标签/下拉框多选标签 背景色 #2a2c31
   --te-common-bg-switch: var(--te-base-gray-67); // 开关默认色 #4D4E52
+
+  // 通用间距
+  --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
+  --te-common-vertical-form-label-spacing: 8px; // 上下布局时，表单label与表单元素的间隔
 }

From 89e42039d48835061d60e9f85d9f8dc96ca14256 Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Tue, 29 Oct 2024 20:42:59 +0800
Subject: [PATCH 3/3] fix(refactor/styles): fix property panel styles and
 common styles review

---
 packages/common/component/MetaChildItem.vue   | 2 +-
 packages/common/component/MetaCodeEditor.vue  | 6 +++++-
 packages/theme/base/src/component-common.less | 3 +++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/common/component/MetaChildItem.vue b/packages/common/component/MetaChildItem.vue
index 6c5165d757..f909cafbf5 100644
--- a/packages/common/component/MetaChildItem.vue
+++ b/packages/common/component/MetaChildItem.vue
@@ -99,7 +99,7 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
-  height: calc(100% - 34px); // 22为头部+底部的高度
+  height: calc(100% - 34px); // 34为头部+底部的高度
   overflow-y: auto;
 
   .meta-config-item {
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 020fbc4bbf..0c97ce569a 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -7,7 +7,11 @@
       </div>
       <tiny-button v-else class="edit-btn" @click="open">
         <slot name="icon"></slot>
-        <svg-icon name="page-schema" v-if="buttonText === EDIT_CODE_TEXT" class="edit-btn-icon"></svg-icon>
+        <svg-icon
+          name="page-schema"
+          v-if="[buttonText[locale], buttonText].includes(EDIT_CODE_TEXT)"
+          class="edit-btn-icon"
+        ></svg-icon>
 
         {{ buttonLabel }}
       </tiny-button>
diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
index 89027776f0..1513c1d3b9 100644
--- a/packages/theme/base/src/component-common.less
+++ b/packages/theme/base/src/component-common.less
@@ -210,6 +210,9 @@
         border-radius: var(--te-base-border-radius-1);
       }
     }
+    .tiny-tabs__nav-wrap-not-separator::after {
+      background-color: var(--te-common-border-divider);
+    }
   }
 }