opentiny · hexqi · Oct 30, 2024 · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024
diff --git 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
@@ -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
@@ -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 === EDIT_CODE_TEXT" class="edit-btn-icon"></svg-icon>
+
         {{ buttonLabel }}
       </tiny-button>
     </slot>
@@ -143,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
@@ -239,6 +243,7 @@ export default {
       editor,
       editorState,
       value,
+      EDIT_CODE_TEXT,
       options: {
         language: props.language,
         minimap: {
@@ -267,6 +272,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
@@ -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
@@ -128,17 +128,17 @@ export default {
   }
   input[type='range'] {
     height: 4px;
-    border-radius: 8px;
+    border-radius: 10px;
     margin: 0.8em 0;
     padding: 0;
     cursor: pointer;
     border: 0;
-    background: -webkit-linear-gradient(#fff, #fff) no-repeat #999999;
-    background-size: 0% 100%;
+    background-color: transparent;
     position: relative;
     outline: 0;
-    top: -1px;
-    -webkit-appearance: none !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
   }
   input[type='range']::-webkit-slider-thumb {
     width: 10px;
@@ -152,7 +152,9 @@ export default {
     cursor: pointer;
     background-clip: padding-box;
     box-sizing: border-box;
-    -webkit-appearance: none !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
   }
   input[type='range']::-webkit-slider-thumb:active {
     border: 0;

diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -46,6 +46,10 @@
   --te-common-bg-default: var(--te-base-gray-1); // 白色背景-输入框背景/面板背景色 #fff
   --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0
   --te-common-bg-switch: var(--te-base-gray-18); // 开关默认色 #c2c2c2
+
+  // 通用间距
+  --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
+  --te-common-vertical-form-label-spacing: 8px; // 上下布局时，表单label与表单元素的间隔
 }
 
 :root[data-theme='dark'] {
@@ -93,4 +97,8 @@
   --te-common-bg-default: var(--te-base-dark-27); // 深色背景-输入框背景/面板背景色 #212329
   --te-common-bg-disabled: var(--te-base-dark-29); // 禁用/标签/下拉框多选标签 背景色 #2a2c31
   --te-common-bg-switch: var(--te-base-gray-67); // 开关默认色 #4D4E52
+
+  // 通用间距
+  --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
+  --te-common-vertical-form-label-spacing: 8px; // 上下布局时，表单label与表单元素的间隔
 }