fix(amis-editor): Form & CRUD2脚手架使用api数据源时无法新增字段问题 (#8402)

Author: lurunze1226

packages/amis-editor-core/scss/control/_crud2-control.scss

@@ -162,3 +162,13 @@
     --Spinner-color: #fff;
   }
 }
+
+.ae-FieldSetting-footer {
+  position: absolute;
+  right: 0;
+  bottom: 35px;
+
+  &--form {
+    bottom: 55px;
+  }
+}

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

@@ -346,15 +346,20 @@ export class FieldSetting extends React.Component<
     const scaffoldData = store?.data;
     const {initApi, listApi} = scaffoldData || {};
     const {loading} = this.state;
-    const fieldApi =
-      renderer === 'form' ? initApi : renderer === 'crud' ? listApi : '';
+    const isForm = renderer === 'form';
+    const isCRUD = renderer === 'crud';
+    const fieldApi = isForm ? initApi : isCRUD ? listApi : '';
     const isApiValid = isValidApi(normalizeApi(fieldApi)?.url);
     const showAutoGenBtn =
-      (renderer === 'form' && feat === 'Edit') ||
-      (renderer === 'crud' && feat === 'List' && ctx?.__step === 0);
+      (isForm && feat === 'Edit') ||
+      (isCRUD && feat === 'List' && ctx?.__step === 0);
 
     return showAutoGenBtn ? (
-      <div className={cx('ae-FieldSetting-footer', 'flex flex-row-reverse')}>
+      <div
+        className={cx('ae-FieldSetting-footer', {
+          ['ae-FieldSetting-footer--form']: isForm
+        })}
+      >
         <Button
           size="sm"
           level="link"
@@ -363,7 +368,7 @@ export class FieldSetting extends React.Component<
           disabledTip={{
             content: loading
               ? '数据处理中...'
-              : renderer === 'form'
+              : isForm
               ? '请先填写初始化接口'
               : '请先填写接口',
             tooltipTheme: 'dark'
@@ -401,8 +406,9 @@ export class FieldSetting extends React.Component<
               'ae-FieldSetting-Table',
               'mb-0'
             ) /** 底部有操作区，干掉默认的 margin-bottom */,
+            toolbarClassName: 'w-1/2',
             showIndex: true,
-            showFooterAddBtn: false,
+            showFooterAddBtn: true,
             addable: true,
             addBtnLabel: '新增',
             addBtnIcon: false,
@@ -426,6 +432,7 @@ export class FieldSetting extends React.Component<
               level: 'link',
               label: '添加字段'
             },
+            placeholder: '暂无字段',
             scaffold: this.scaffold,
             columns: [
               {

packages/amis/src/renderers/Form/InputTable.tsx

@@ -32,7 +32,7 @@ import {Button, Icon} from 'amis-ui';
 import omit from 'lodash/omit';
 import findIndex from 'lodash/findIndex';
 import {TableSchema} from '../Table';
-import {SchemaApi, SchemaCollection} from '../../Schema';
+import {SchemaApi, SchemaCollection, SchemaClassName} from '../../Schema';
 import find from 'lodash/find';
 import moment from 'moment';
 import merge from 'lodash/merge';
@@ -214,6 +214,11 @@ export interface TableControlSchema
    * 是否开启 static 状态切换
    */
   enableStaticTransform?: boolean;
+
+  /**
+   * 底部工具栏CSS样式类
+   */
+  toolbarClassName?: SchemaClassName;
 }
 
 export interface TableProps
@@ -283,7 +288,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     'deleteApi',
     'needConfirm',
     'canAccessSuperData',
-    'formStore'
+    'formStore',
+    'footerActions',
+    'toolbarClassName'
   ];
 
   entries: SimpleMap<any, number>;
@@ -1572,7 +1579,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       tableContentClassName,
       static: isStatic,
       showFooterAddBtn,
-      footerAddBtn
+      footerAddBtn,
+      toolbarClassName
     } = this.props;
     const maxLength = this.resolveVariableProps(this.props, 'maxLength');
 
@@ -1641,7 +1649,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
           showFooterAddBtn !== false &&
           (!maxLength || maxLength > items.length)) ||
         showPager ? (
-          <div className={cx('InputTable-toolbar')}>
+          <div className={cx('InputTable-toolbar', toolbarClassName)}>
             {addable && showFooterAddBtn !== false
               ? render(
                   'button',