chore: condition-builder 样式优化 (#5592)

packages/amis-ui/scss/components/_condition-builder.scss

@@ -37,6 +37,11 @@
       &.is-collapse {
         transform: rotate(180deg);
       }
+
+      &:hover {
+        background: #2468f2;
+        color: $white;
+      }
     }
 
     .#{$ns}Select {
@@ -52,7 +57,8 @@
       min-height: px2rem(28px);
 
       &:hover {
-        background: #d4e5ff;
+        color: $white;
+        background: #2468f2;
       }
 
       &-arrow {
@@ -89,27 +95,24 @@
     }
 
     &-collapse {
-      background: #f7f7f9;
       text-align: center;
       color: #84868c;
       display: flex;
       justify-content: center;
+      align-items: center;
 
       > span {
-        position: relative;
-        top: -8px;
-        background: #f7f7f9;
         padding: 0 10px;
         cursor: pointer;
       }
 
-      &::before {
+      &::before,
+      &::after {
         content: ' ';
         height: 1px;
         background: #e8e9eb;
-        position: absolute;
-        left: 32px;
-        right: 32px;
+        display: block;
+        flex: 1;
       }
     }
   }
@@ -249,9 +252,19 @@
       flex-direction: row;
       display: flex;
       align-items: center;
+      transition: all 0.2s ease;
+      padding-left: 10px;
+
       // margin-top: px2rem(16px);
-      > .is-hover {
+
+      &.is-hover {
         cursor: grab;
+        box-shadow: 0px 2px 14px 0px rgb(0 0 0 / 16%);
+        border-radius: 8px;
+        padding: 10px;
+        margin: -10px 0px;
+        background: $white;
+        z-index: 1;
       }
       > .#{$ns}CBGroupOrItem-dragbar {
         left: px2rem(-5px);
@@ -297,11 +310,13 @@
   }
 
   & > &-body > &-body-group > &-dragbar,
-  & > &-body > &-body-item > &-dragbar {
+  & > &-body > &-body-item > &-dragbar,
+  & > &-body > &-body-item > .#{$ns}CBDelete {
     opacity: 0;
   }
 
-  &:hover > &-body > &-body-item > &-dragbar {
+  &:hover > &-body > &-body-item > &-dragbar,
+  &:hover > &-body > &-body-item > .#{$ns}CBDelete {
     opacity: 1;
   }
 

packages/amis-ui/src/components/condition-builder/Group.tsx

@@ -46,6 +46,7 @@ export interface ConditionGroupProps extends ThemeProps, LocaleProps {
   popOverContainer?: any;
   renderEtrValue?: any;
   selectMode?: 'list' | 'tree';
+  isCollapsed?: boolean; // 是否折叠
 }
 
 export class ConditionGroup extends React.Component<
@@ -60,6 +61,15 @@ export class ConditionGroup extends React.Component<
     };
   }
 
+  componentDidUpdate(prevProps: Readonly<ConditionGroupProps>): void {
+    // 上层折叠的时候，内层也折叠，主要是为了处理，子节点中，第一项也是Group的折叠场景
+    if (prevProps.isCollapsed !== this.props.isCollapsed) {
+      this.setState({
+        isCollapsed: this.props.isCollapsed || false
+      });
+    }
+  }
+
   getValue() {
     return {
       id: guid(),
@@ -260,6 +270,7 @@ export class ConditionGroup extends React.Component<
                   popOverContainer={popOverContainer}
                   renderEtrValue={renderEtrValue}
                   selectMode={selectMode}
+                  isCollapsed={isCollapsed}
                 />
               ))
             ) : (

packages/amis-ui/src/components/condition-builder/GroupOrItem.tsx

@@ -33,6 +33,7 @@ export interface CBGroupOrItemProps extends ThemeProps {
   popOverContainer?: any;
   renderEtrValue?: any;
   selectMode?: 'list' | 'tree';
+  isCollapsed?: boolean;
 }
 
 export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
@@ -81,7 +82,8 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
       formula,
       popOverContainer,
       selectMode,
-      renderEtrValue
+      renderEtrValue,
+      isCollapsed
     } = this.props;
 
     return (
@@ -110,6 +112,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
                 </a>
               ) : null}
               <ConditionGroup
+                isCollapsed={isCollapsed}
                 draggable={draggable}
                 disabled={disabled}
                 searchable={searchable}