From ebac8f1262aab45943d309ce587ef4d48c7a629e Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Wed, 25 Sep 2024 21:29:21 +0800
Subject: [PATCH] feat(style): modify style panel widget margin && style

---
 packages/common/component/MetaCodeEditor.vue  |  8 +++--
 packages/layout/src/DesignSettings.vue        |  2 +-
 .../components/background/BackgroundGroup.vue |  1 -
 .../src/components/border/BorderGroup.vue     | 32 ++++++-------------
 .../components/classNamesContainer/index.vue  |  2 +-
 .../src/components/effects/EffectGroup.vue    |  6 ++--
 .../src/components/inputs/ImageSelect.vue     |  1 -
 .../styles/src/components/size/SizeGroup.vue  | 17 +++++++---
 .../components/typography/TypographyGroup.vue | 17 ++--------
 9 files changed, 35 insertions(+), 51 deletions(-)

diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index d693bfe6d..f46f715a0 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -253,12 +253,14 @@ export default {
 <style lang="less" scoped>
 .editor-wrap {
   width: 100%;
-
+  display: flex;
+  text-align: center;
   .edit-btn {
     color: var(--ti-lowcode-meta-codeEditor-color);
     border-color: var(--ti-lowcode-meta-codeEditor-border-color);
-    display: flex;
-    align-items: center;
+    flex: 1;
+    text-align: center;
+    margin-right: 0;
     &:hover {
       color: var(--ti-lowcode-meta-codeEditor-hover-color);
       border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color);
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index 4caec2ed3..993ef02a7 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -91,7 +91,7 @@ export default {
   }
 
   :deep(.tiny-collapse-item__content) {
-    padding: 8px 8px 8px 12px;
+    padding: 0 8px 12px 12px; // 这里的bottom为4px + 内部行元素与底部的距离为8px = 12px
   }
 }
 
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 4ed8c85d6..66de5a473 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -532,7 +532,6 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 4px 0 12px;
     position: relative;
     .background-image-icon {
       font-size: 16px;
diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue
index 1e614164c..e198a2eaf 100644
--- a/packages/settings/styles/src/components/border/BorderGroup.vue
+++ b/packages/settings/styles/src/components/border/BorderGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['radius-row', { 'show-border': isRaduisSelected(RADIUS_SETTING.Single) }]">
+  <div class="radius-row item-row">
     <div
       :class="['radius-label', { 'is-setting': isRadiusSetting() }]"
       @click="openSetting(BORDER_RADIUS_PROPERTY.BorderRadius, $event)"
@@ -95,7 +95,7 @@
     </div>
   </div>
 
-  <div class="border-label">
+  <div class="border-label item-row">
     <span
       :class="{ 'is-setting': isBorderSetting(), 'set-border-style': true }"
       @click="openSetting(BORDER_PROPERTY.Border, $event)"
@@ -145,7 +145,7 @@
   </div>
   <div class="border-input">
     <div class="border-input-right">
-      <div class="border-row">
+      <div class="border-row item-row">
         <div class="border-label">
           <span
             :class="{ 'is-setting': isBorderColorSetting() }"
@@ -215,7 +215,6 @@
           </tiny-tooltip>
         </div>
       </div>
-      <div class="border-row"></div>
     </div>
   </div>
 
@@ -560,7 +559,6 @@ export default {
 <style lang="less" scoped>
 .border-row {
   display: flex;
-
   .border-col {
     flex: 1;
     display: flex;
@@ -579,22 +577,13 @@ export default {
     color: var(--ti-lowcode-toolbar-breadcrumb-color);
   }
 }
-
+.item-row {
+  margin-bottom: 8px;
+}
 .radius-row {
   display: flex;
   align-items: center;
-  padding-bottom: 8px;
   position: relative;
-  &.show-border::after {
-    content: '';
-    height: 1px;
-    width: calc(100% + 32px);
-    background: var(--ti-lowcode-toolbar-border-color);
-    position: absolute;
-    bottom: 0;
-    left: -16px;
-  }
-
   svg {
     color: var(--ti-lowcode-input-icon-color);
     font-size: 16px;
@@ -622,6 +611,7 @@ export default {
     .radius-content-svg {
       &:hover,
       &.selected {
+        color: var(--ti-lowcode-property-active-color);
         svg {
           color: var(--ti-lowcode-property-active-color);
         }
@@ -694,7 +684,6 @@ export default {
 
 .border-label {
   width: 100%;
-  margin: 10px 0 5px 0;
   color: var(--ti-lowcode-component-setting-panel-label-color);
   .set-border-style {
     line-height: 24px;
@@ -717,8 +706,6 @@ export default {
     }
   }
   .row-item {
-    padding: 5px;
-    border-radius: 3px;
     &:hover {
       svg {
         color: var(--ti-lowcode-toolbar-icon-color);
@@ -726,7 +713,7 @@ export default {
     }
 
     &.selected {
-      // background-color: var(--ti-lowcode-tabs-bg);
+      color: var(--ti-lowcode-property-active-color);
       svg {
         color: var(--ti-lowcode-property-active-color);
       }
@@ -747,8 +734,6 @@ export default {
     .border-row {
       display: flex;
       align-items: center;
-      margin: 5px 0;
-
       .border-label {
         flex: 0 0 40px;
       }
@@ -764,6 +749,7 @@ export default {
           justify-content: center;
           &.selected,
           &:hover {
+            color: var(--ti-lowcode-property-active-color);
             svg {
               color: var(--ti-lowcode-property-active-color);
             }
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index 25425368c..70630c262 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -475,7 +475,7 @@ const handleDeleteCurSelector = () => {
   ::-webkit-scrollbar {
     display: block;
   }
-  padding: 12px 8px 11px 12px;
+  padding: 12px 8px 12px 12px;
 }
 .title {
   margin: 0;
diff --git a/packages/settings/styles/src/components/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue
index c5d367eee..cba6a1b87 100644
--- a/packages/settings/styles/src/components/effects/EffectGroup.vue
+++ b/packages/settings/styles/src/components/effects/EffectGroup.vue
@@ -519,8 +519,10 @@ export default {
   gap: 8px;
   grid-template-columns: 44px auto;
   align-items: center;
-  padding: 8px 0;
-
+  margin-bottom: 8px;
+  &:last-child {
+    margin-bottom: 0;
+  }
   .opacity-label,
   .outline-label,
   .cursor-label {
diff --git a/packages/settings/styles/src/components/inputs/ImageSelect.vue b/packages/settings/styles/src/components/inputs/ImageSelect.vue
index eccc5803e..1dc9289dd 100644
--- a/packages/settings/styles/src/components/inputs/ImageSelect.vue
+++ b/packages/settings/styles/src/components/inputs/ImageSelect.vue
@@ -68,7 +68,6 @@ export default {
 <style lang="less" scoped>
 .background-image {
   width: 100%;
-
   .icon {
     font-size: 20px;
     color: var(--ti-lowcode-toolbar-breadcrumb-color);
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 6a0b8cfd7..0e16b4872 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -447,13 +447,14 @@ export default {
 <style lang="less" scoped>
 .size-row {
   display: flex;
-
+  margin-bottom: 8px;
+  &:last-child {
+    margin-bottom: 0;
+  }
   .size-col {
     flex: 1;
     display: flex;
     align-items: center;
-    padding: 5px 0;
-
     &:not(:last-child) {
       margin-right: 8px;
     }
@@ -471,7 +472,10 @@ export default {
 .overflow-row {
   display: flex;
   align-items: center;
-
+  margin-bottom: 8px;
+  &:last-child {
+    margin-bottom: 0;
+  }
   .overflow-label {
     flex: 0 0 54px;
     padding: 0 2px;
@@ -554,7 +558,10 @@ export default {
 .fit-row {
   display: flex;
   align-items: center;
-  padding: 5px 0;
+  margin-bottom: 8px;
+  &:last-child {
+    margin-bottom: 0;
+  }
   .fit-label {
     flex: 0 0 54px;
     padding: 0 2px;
diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index 071d8dca9..14cbfaebb 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -34,7 +34,7 @@
       </div>
     </div>
 
-    <div class="typography-row split line">
+    <div class="typography-row split">
       <div class="left typography-col">
         <label
           :class="['typography-label', { 'is-setting': getSettingFlag(TYPO_PROPERTY.LineHeight) }]"
@@ -474,19 +474,8 @@ export default {
     grid-template-columns: 15px 1fr;
     align-items: center;
     margin-bottom: 8px;
-
-    &.line {
-      position: relative;
-      padding-bottom: 10px;
-      &::after {
-        content: '';
-        height: 1px;
-        width: calc(100% + 32px);
-        background: var(--ti-lowcode-toolbar-border-color);
-        position: absolute;
-        bottom: 0;
-        left: -16px;
-      }
+    &:last-child {
+      margin-bottom: 0;
     }
 
     &.split {