fix: collapse 样式问题 (#2927)

scss/_properties.scss

@@ -530,8 +530,13 @@
   --Collapse-header-padding: #{px2rem(18px)} 0 var(--gap-xs) 0;
   --Collapse-header-bg: transparent;
   --Collapse-header-onHover-bg: transparent;
-  --Collapse-header-collapsed-borderBottom: var(--borderWidth) solid
+  --Collapse-header-collapsed-border: var(--borderWidth) solid
     var(--Collapse-border-color);
+  --Collapse-header-collapsed-borderTop: none;
+  --Collapse-header-collapsed-borderBottom: var(
+    --Collapse-header-collapsed-border
+  );
+  --Collapse-header-wrapper-direction: row;
   --Collapse-content-padding: #{px2rem(18px)} 0;
   --Collapse-content-color: var(--body-color);
   --Collapse-content-fontSize: var(--body-size);

scss/components/_collapse.scss

@@ -12,6 +12,15 @@
     border-bottom: var(--borderWidth) solid var(--Collapse-border-color);
     background: var(--Collapse-header-bg);
 
+    &-wrapper {
+      display: inline-flex;
+      flex-direction: var(--Collapse-header-wrapper-direction);
+    }
+
+    &-tpl {
+      margin-right: px2rem(8px);
+    }
+
     &:hover {
       background: var(--Collapse-header-onHover-bg);
     }
@@ -48,7 +57,7 @@
     transform-origin: 0% 50%;
   }
   &.is-collapsed &-header {
-    border-bottom: var(--Collapse-header-collapsed-borderBottom);
+    border-bottom: var(--Collapse-header-collapsed-border);
   }
 
   &--collapsable &-header {
@@ -62,6 +71,12 @@
     color: var(--link-color);
     border-left: none;
     font-size: var(--fontSizeBase);
+    border-top: var(--Collapse-header-collapsed-borderTop);
+    border-bottom: var(--Collapse-header-collapsed-borderBottom);
+  }
+
+  &--title-bottom.is-collapsed &-header {
+    border-top: none;
   }
 
   &--title-bottom &-arrow:before {

scss/components/form/_fieldset.scss

@@ -41,10 +41,14 @@ fieldset.#{$ns}Collapse {
     margin: var(--gap-base) 0;
     padding: 0 0 0 14px;
     cursor: pointer;
-    border-bottom: 0;
+    border-bottom: none !important;
+    background: transparent;
     display: flex;
     flex-direction: row;
     // width: 100%;
+    &:hover {
+      background: transparent;
+    }
   }
 
   &--xs {

scss/themes/_cxd-variables.scss

@@ -236,7 +236,11 @@ $R8: 50%;
   --Collapse-header-padding: #{px2rem(16px)};
   --Collapse-header-bg: #{$G10};
   --Collapse-header-onHover-bg: #{$G9};
+  --Collapse-header-collapsed-border: none;
+  --Collapse-header-collapsed-borderTop: var(--borderWidth) solid
+    var(--Collapse-border-color);
   --Collapse-header-collapsed-borderBottom: none;
+  --Collapse-header-wrapper-direction: row-reverse;
   --Collapse-content-padding: #{px2rem(16px)};
   --Collapse-content-color: #{$G4};
   --Collapse-content-fontSize: #{$T2};

src/renderers/Collapse.tsx

@@ -176,8 +176,10 @@ export default class Collapse extends React.Component<
           onClick={this.toggleCollapsed}
           className={cx(`Collapse-header`, headingClassName)}
         >
-          {collapsable && <span className={cx('Collapse-arrow')} />}
-          {render('heading', finalTitle)}
+          <div className={cx('Collapse-header-wrapper')}>
+            {render('heading', finalTitle, {className: 'Collapse-header-tpl'})}
+            {collapsable && <span className={cx('Collapse-arrow')} />}
+          </div>
         </HeadingComponent>
       ) : null,