Merge branch 'style/setter-style-optimize' into 'release/0.9.0'

Style/setter style optimize

右侧属性面板样式优化、bug 修复

See merge request !891199

packages/editor-skeleton/src/components/field/index.less

@@ -1,8 +1,7 @@
-@x-gap: 10px;
+@x-gap: 12px;
 @y-gap: 8px;
 
 .lc-field {
-  // head
   .lc-field-head {
     display: flex;
     align-items: center;
@@ -61,23 +60,11 @@
       }
     }
     .lc-field-icon {
-      // margin-right: @x-gap;
       transform-origin: center;
       transition: transform 0.1s;
     }
   }
 
-  // &.lc-plain-field {
-  //   // for top-level style
-  //   // padding: 8px 10px;
-  //   > .lc-field-body {
-  //     flex: 1;
-  //     min-width: 0;
-  //     display: flex;
-  //     align-items: center;
-  //   }
-  // }
-
   &.lc-inline-field {
     display: flex;
     align-items: center;
@@ -111,29 +98,33 @@
 
   &.lc-block-field, &.lc-accordion-field {
     display: block;
-    &:not(:first-child) {
+    &:first-child {
-      border-top: 1px solid var(--color-line-normal);
+      > .lc-field-head {
+        border-top: none;
+      }
     }
     > .lc-field-head {
-      // padding-left: @x-gap;
       height: 32px;
       display: flex;
       align-items: center;
       font-weight: 500;
-      // background: var(--color-block-background-shallow, rgba(31,56,88,.06));
+      background: var(--color-block-background-shallow, rgba(31,56,88,.06));
-      // border-bottom: 1px solid var(--color-line-normal);
+      border-top: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
-      // color: var(--color-title);
+      border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
+      color: var(--color-title);
       padding: 0 16px;
-      background-color: #F7F9FC;
-      color: #8F9BB3;
       user-select: none;
+
+      > .lc-field-icon {
+        color: #8F9BB3;
+      }
     }
 
     > .lc-field-body {
       // padding: @y-gap @x-gap/2;
-      padding: 16px;
+      padding: 12px;
       .lc-inline-field{
-        margin-bottom: 16px;
+        margin-bottom: 12px;
         &:last-child{
           margin-bottom: 0;
         }
@@ -162,10 +153,15 @@
 
   &.lc-accordion-field {
     position: relative;
-    // collapsed
+    
-    &:last-child.lc-field-is-collapsed{
+    &.lc-field-is-collapsed {
-      border-bottom: 1px solid var(--color-line-normal);
+      margin-bottom: 6px;
     }
+
+    // collapsed
+    // &:last-child.lc-field-is-collapsed{
+    //   border-bottom: 1px solid var(--color-line-normal);
+    // }
     &.lc-field-is-collapsed {
       > .lc-field-head .lc-field-icon {
         transform: rotate(180deg);
@@ -200,14 +196,19 @@
 
     .lc-accordion-field, .lc-block-field {
       > .lc-field-head {
-        padding-left: @x-gap/2;
+        padding-left: @x-gap;
         background: var(--color-block-background-light);
-        border-bottom-color: var(--color-line-light, rgba(31, 56, 88, .1));
+        border-bottom: none;
+        border-top: none;
         > .lc-field-icon {
           // margin-right: @x-gap/2;
           margin-right: 0;
         }
       }
+
+      > .lc-field-body {
+        padding: 8px;
+      }
     }
 
     // 3rd level field title width should short

packages/editor-skeleton/src/components/mixed-setter/style.less

@@ -6,7 +6,7 @@
   position: relative;
   >.lc-setter-actions {
     position: absolute;
-    right: -2px;
+    right: -4px;
     top: 50%;
     transform: translate(100%, -50%);
     .lc-switch-trigger {
@@ -18,11 +18,19 @@
     }
     .lc-title {
       cursor: pointer;
+
+      .lc-title-icon svg {
+        fill: #8F9BB3;
+      }
     }
     .variable-binded {
       background: var(--color-brand, #006cff);
       color: #fff!important;
       border-radius: 3px;
+
+      .lc-title-icon svg {
+        fill: #fff;
+      }
     }
   }
   .next-input,.next-date-picker,.next-month-picker {
@@ -42,7 +50,7 @@
   margin-right: 0;
   >.lc-setter-actions {
     position: absolute;
-    right: 16px;
+    right: 12px;
     top: 0;
     height: 32px;
     transform: none;
@@ -56,8 +64,8 @@
   position: static;
   margin-right: 0;
   > .lc-setter-actions{
-    right: 32px;
+    right: 36px;
-    top: 6px;
+    top: 4px;
     transform: none;
   }
 }

packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx

@@ -42,22 +42,26 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> {
     const items = [];
     let l = 3;
     while (l-- > 0 && node) {
+      const _node = node;
       const props =
         l === 2
           ? {}
           : {
-            onMouseOver: hoverNode.bind(null, node, true),
+            onMouseOver: hoverNode.bind(null, _node, true),
-            onMouseOut: hoverNode.bind(null, node, false),
+            onMouseOut: hoverNode.bind(null, _node, false),
             onClick: () => {
-              selectNode.call(null, node);
+              if (!_node) {
-              const getName = (node) => {
+                return;
+              }
+              selectNode.call(null, _node);
+              const getName = (node: any) => {
                 const npm = node?.componentMeta?.npm;
                 return [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
                   node?.componentMeta?.componentName ||
                   '';
               };
               const selected = getName(current);
-              const target = getName(node);
+              const target = getName(_node);
               editor?.emit('skeleton.settingsPane.Breadcrumb', {
                 selected,
                 target,