From af287e3fa24284a62fe58fc8b0b0a37b4f86ed8e Mon Sep 17 00:00:00 2001
From: fujianchao <fujianchao@baidu.com>
Date: Thu, 17 Oct 2024 16:08:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8A=98=E5=8F=A0=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=EF=BC=8C=E6=97=A0=E6=A0=87=E9=A2=98=E6=97=B6=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0=E7=AE=AD=E5=A4=B4=E3=80=82=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=AD=98=E5=9C=A8=E4=BA=8E=E8=A1=A8=E5=8D=95=E4=B8=AD=EF=BC=8C?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=96=B0=E5=A2=9E=E5=88=87=E6=8D=A2=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E6=96=B9=E5=BC=8F=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../amis-editor/src/plugin/CollapseGroup.tsx  | 10 ++-
 .../amis-ui/scss/components/_collapse.scss    |  4 ++
 packages/amis-ui/src/components/Collapse.tsx  | 69 +++++++++----------
 3 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/packages/amis-editor/src/plugin/CollapseGroup.tsx b/packages/amis-editor/src/plugin/CollapseGroup.tsx
index 26ff862903d..d1438050582 100644
--- a/packages/amis-editor/src/plugin/CollapseGroup.tsx
+++ b/packages/amis-editor/src/plugin/CollapseGroup.tsx
@@ -27,6 +27,7 @@ export class CollapseGroupPlugin extends BasePlugin {
   pluginIcon = 'collapse-plugin';
   scaffold = {
     type: 'collapse-group',
+    expandIconPosition: 'right',
     activeKey: ['1'],
     body: [
       {
@@ -101,6 +102,7 @@ export class CollapseGroupPlugin extends BasePlugin {
   panelJustify = true;
 
   panelBodyCreator = (context: BaseEventContext) => {
+    const isInForm = context.path.includes('/form/');
     const i18nEnabled = getI18nEnabled();
     return [
       getSchemaTpl('tabs', [
@@ -116,7 +118,7 @@ export class CollapseGroupPlugin extends BasePlugin {
                   label: '图标位置',
                   type: 'button-group-select',
 
-                  pipeIn: defaultValue('left'),
+                  pipeIn: defaultValue('right'),
                   options: [
                     {
                       label: '左边',
@@ -169,6 +171,12 @@ export class CollapseGroupPlugin extends BasePlugin {
                       : undefined;
                   }
                 },
+                getSchemaTpl('switch', {
+                  name: 'enableFieldSetStyle',
+                  label: '切换展示方式',
+                  value: true,
+                  visible: isInForm
+                }),
                 {
                   name: 'accordion',
                   label: tipedLabel(
diff --git a/packages/amis-ui/scss/components/_collapse.scss b/packages/amis-ui/scss/components/_collapse.scss
index 3bb2464ff60..2c4b2b56d8c 100644
--- a/packages/amis-ui/scss/components/_collapse.scss
+++ b/packages/amis-ui/scss/components/_collapse.scss
@@ -69,6 +69,10 @@
     align-items: center;
     margin-right: var(--collapse-icon-margin);
 
+    &.noTitle {
+      transform: translateY(-50%);
+    }
+
     svg {
       width: var(--collapse-icon-size);
       height: var(--collapse-icon-size);
diff --git a/packages/amis-ui/src/components/Collapse.tsx b/packages/amis-ui/src/components/Collapse.tsx
index a682d58f6c2..8ac8e2cbcbf 100644
--- a/packages/amis-ui/src/components/Collapse.tsx
+++ b/packages/amis-ui/src/components/Collapse.tsx
@@ -203,42 +203,41 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
       : collapseHeader || header;
 
     let dom = [
-      finalHeader ? (
-        <HeadingComponent
-          key="header"
-          onClick={this.toggleCollapsed}
-          className={cx(
-            `Collapse-header`,
-            {'is-mobile': mobileUI},
-            headingClassName
-          )}
-        >
-          {showArrow && collapsable ? (
-            expandIcon ? (
-              React.cloneElement(expandIcon, {
-                ...expandIcon.props,
-                className: cx(
-                  'Collapse-icon-tranform',
-                  expandIcon.props?.className
-                )
-              })
-            ) : (
-              <span className={cx('Collapse-arrow-wrap')}>
-                <Icon
-                  icon="right-arrow-bold"
-                  className={cx('Collapse-arrow', 'icon')}
-                  classNameProp={cx('Collapse-arrow')}
-                  iconContent="Collapse-arrow"
-                />
-              </span>
-            )
+      <HeadingComponent
+        key="header"
+        onClick={this.toggleCollapsed}
+        className={cx(
+          `Collapse-header`,
+          {'is-mobile': mobileUI},
+          headingClassName
+        )}
+      >
+        {showArrow && collapsable ? (
+          expandIcon ? (
+            React.cloneElement(expandIcon, {
+              ...expandIcon.props,
+              className: cx(
+                'Collapse-icon-tranform',
+                expandIcon.props?.className
+              )
+            })
           ) : (
-            ''
-          )}
-          {finalHeader}
-        </HeadingComponent>
-      ) : null,
-
+            <span
+              className={cx('Collapse-arrow-wrap', {noTitle: !finalHeader})}
+            >
+              <Icon
+                icon="right-arrow-bold"
+                className={cx('Collapse-arrow', 'icon')}
+                classNameProp={cx('Collapse-arrow')}
+                iconContent="Collapse-arrow"
+              />
+            </span>
+          )
+        ) : (
+          ''
+        )}
+        {finalHeader}
+      </HeadingComponent>,
       <Transition
         key="body"
         mountOnEnter={mountOnEnter}