fix(amis-editor): 弹性布局设置配置项优化

packages/amis-editor-core/scss/control/_flex-setting-control.scss

@@ -18,11 +18,18 @@
 
       > button {
         flex: 1 1 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
     }
 
-    svg {
+    svg.scaleX-180 {
-      vertical-align: middle;
+      transform: rotate(180deg);
+    }
+
+    svg.scaleX-90 {
+      transform: rotate(90deg);
     }
   }
 }

packages/amis-editor/src/icons/display/dcolumnReverse.svg

@@ -1 +1 @@
-<svg fill="currentColor" preserveAspectRatio="xMidYMid meet" width="20" height="20" viewBox="0 0 9 18"><g fillRule="evenodd"><path d="M0 6h9v5H0zm5 9v-3H4v3H2l2.5 3L7 15H5z"></path><path opacity=".4" d="M1 1h7v3H1z"></path><path d="M1 1v3h7V1H1zM0 0h9v5H0V0z"></path></g></svg>
+<svg fill="currentColor" preserveAspectRatio="xMidYMid meet" width="20" height="20" viewBox="0 0 9 18" class="ve-svgicon vs-style-reverse-v" style="vertical-align: middle;"><g fill-rule="evenodd"><path d="M0 6h9v5H0zm5 9v-3H4v3H2l2.5 3L7 15H5z"></path><path opacity=".4" d="M1 1h7v3H1z" data-spm-anchor-id="a2q5o.26736379.0.i51.35962a19sy6kFy"></path><path d="M1 1v3h7V1H1zM0 0h9v5H0V0z"></path></g></svg>

packages/amis-editor/src/renderer/ButtonGroupControl.tsx

@@ -2,17 +2,18 @@
  * @file icon按钮组
  */
 import React from 'react';
-import {FormItem, Button, Icon, ClassNamesFn} from 'amis';
+import {FormItem, Button, Icon, FormControlProps} from 'amis';
+import cx from 'classnames';
 
-export interface ButtonGroupControlProps {
+export interface ButtonGroupControlProps extends FormControlProps {
   options?: Array<{
     label: string;
     icon: string;
     value: string;
+    iconClassName?: string;
   }>;
   onChange: (value: string | number) => void;
   value?: string | number;
-  classnames?: ClassNamesFn;
 }
 
 export default class ButtonGroupControl extends React.Component<ButtonGroupControlProps> {
@@ -21,9 +22,10 @@ export default class ButtonGroupControl extends React.Component<ButtonGroupContr
   }
 
   render() {
-    const {options, value, onChange, classnames: cx} = this.props;
+    const {options, value, onChange, classnames} = this.props;
+    const cls = classnames || cx;
     return (
-      <div className={cx('ButtonGroup', 'icon-ButtonList')}>
+      <div className={cls('ButtonGroup', 'icon-ButtonList')}>
         {options &&
           options.map(item => (
             <Button
@@ -34,7 +36,10 @@ export default class ButtonGroupControl extends React.Component<ButtonGroupContr
               active={value === item.value}
             >
               {item.icon ? (
-                <Icon icon={item.icon} className="icon" />
+                <Icon
+                  icon={item.icon}
+                  className={cx('icon', item.iconClassName)}
+                />
               ) : (
                 item.label
               )}

packages/amis-editor/src/renderer/FlexSettingControl.tsx

@@ -17,6 +17,9 @@ interface FlexSettingControlProps extends FormControlProps {
 const getFlexItem = (props: FlexSettingControlProps) => {
   const {value, direction, justify, alignItems} = props;
   const curDirection = value?.flexDirection || direction;
+  const isColumn =
+    curDirection === 'column' || curDirection === 'column-reverse';
+
   // 主轴排列方向
   const directionItemOptions = [
     {
@@ -32,31 +35,35 @@ const getFlexItem = (props: FlexSettingControlProps) => {
     {
       label: '水平反向',
       value: 'row-reverse',
-      icon: 'drowReverse'
+      icon: 'drowReverse',
+      iconClassName: 'scaleX-180'
     },
     {
       label: '垂直反向',
       value: 'column-reverse',
-      icon: 'dcolumnReverse'
+      icon: 'dcolumnReverse',
+      iconClassName: 'scaleX-180'
     }
   ];
 
   // 交叉轴排列方式
   const alignItemsOptions = [
     {
-      label: '起点对齐',
+      label: isColumn ? '左对齐' : '顶部对齐',
       value: 'flex-start',
       icon: 'aFlexStart'
+      // iconClassName: isColumn ? 'scaleX-90' : '',
     },
     {
-      label: '垂直居中',
+      label: isColumn ? '水平居中' : '垂直居中',
       value: 'center',
       icon: 'aCenter'
     },
     {
-      label: '终点对齐',
+      label: isColumn ? '右对齐' : '底部对齐',
       value: 'flex-end',
       icon: 'aFlexEnd'
+      // iconClassName: isColumn ? 'scaleX-90' : '',
     },
     {
       label: '基线对齐',
@@ -64,28 +71,31 @@ const getFlexItem = (props: FlexSettingControlProps) => {
       icon: 'aBaseline'
     },
     {
-      label: '高度撑满',
+      label: isColumn ? '水平铺开' : '高度撑满',
       value: 'stretch',
-      icon: 'aStretch'
+      icon: 'aStretch',
+      iconClassName: isColumn ? 'scaleX-90' : ''
     }
   ];
 
   // 主轴排列方式
   const justifyItemsOptions = [
     {
-      label: '左对齐',
+      label: isColumn ? '顶部对齐' : '左对齐',
       value: 'flex-start',
       icon: 'jFlexStart'
+      // iconClassName: isColumn ? 'scaleX-90' : '',
     },
     {
-      label: '水平居中',
+      label: isColumn ? '垂直居中' : '水平居中',
       value: 'center',
       icon: 'jCenter'
     },
     {
-      label: '右对齐',
+      label: isColumn ? '底部对齐' : '右对齐',
       value: 'flex-end',
       icon: 'jFlexEnd'
+      // iconClassName: isColumn ? 'scaleX-90' : '',
     },
     {
       label: '两端对齐',
@@ -136,7 +146,7 @@ export default class FlexSettingControl extends React.Component<FlexSettingContr
   }
 
   render() {
-    const {value, label, classnames} = this.props;
+    const {value, label, ...rest} = this.props;
     const flexItems = getFlexItem(this.props);
 
     return (
@@ -148,10 +158,10 @@ export default class FlexSettingControl extends React.Component<FlexSettingContr
             key={item.field}
           >
             <ButtonGroup
+              {...rest}
               options={item.options}
               value={value?.[item.field] || item.default}
               onChange={this.setField(item.field)}
-              classnames={classnames}
             />
           </div>
         ))}