feat: 折叠面板，无标题时显示折叠箭头。组件存在于表单中，面板新增切换展示方式按钮

baidu · Oct 17, 2024 · af287e3 · af287e3
1 parent d376610
commit af287e3
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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}