theme: 分栏组件支持新版外观配置

packages/amis-editor/src/plugin/Grid.tsx

@@ -367,10 +367,12 @@ export class GridPlugin extends BasePlugin {
           : {
               title: '外观',
               body: [
-                getSchemaTpl('className'),
-                getSchemaTpl('subFormItemMode'),
-                getSchemaTpl('subFormHorizontalMode'),
-                getSchemaTpl('subFormHorizontal')
+                getSchemaTpl('collapseGroup', [
+                  getSchemaTpl('subFormItemMode'),
+                  getSchemaTpl('subFormHorizontalMode'),
+                  getSchemaTpl('subFormHorizontal'),
+                  ...getSchemaTpl('theme:common', ['layout'])
+                ])
               ]
             }
       ])
@@ -546,12 +548,9 @@ export class GridPlugin extends BasePlugin {
           {
             title: '外观',
             body: [
-              this.panelWithOutOthers
-                ? null
-                : getSchemaTpl('className', {
-                    label: '栏 CSS 类名',
-                    name: 'columnClassName'
-                  })
+              getSchemaTpl('collapseGroup', [
+                ...getSchemaTpl('theme:common', ['layout'])
+              ])
             ]
           }
         ])

packages/amis/src/renderers/Grid.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormHorizontal, Renderer, RendererProps} from 'amis-core';
+import {FormHorizontal, Renderer, RendererProps, buildStyle} from 'amis-core';
 import pick from 'lodash/pick';
 import {BaseSchema, SchemaClassName, SchemaCollection} from '../Schema';
 
@@ -50,6 +50,11 @@ export type GridColumnObject = {
    * 列类名
    */
   columnClassName?: SchemaClassName;
+
+  /**
+   * 样式
+   */
+  style?: any;
 };
 
 export type GridColumn = GridColumnObject;
@@ -152,9 +157,10 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
       subFormHorizontal,
       formHorizontal,
       translate: __,
-      disabled
+      disabled,
+      data
     } = this.props;
-
+    const styleVar = buildStyle(column.style, data);
     return (
       <div
         key={key}
@@ -165,6 +171,7 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
             [`Grid-col--v${ucFirst(column.valign)}`]: column.valign
           }
         )}
+        style={styleVar}
       >
         {this.renderChild(`column/${key}`, (column as any).body || '', length, {
           disabled,
@@ -193,8 +200,10 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
       valign: vAlign,
       align: hAlign,
       loading = false,
-      loadingConfig
+      loadingConfig,
+      data
     } = this.props;
+    const styleVar = buildStyle(style, data);
     return (
       <div
         className={cx(
@@ -206,7 +215,7 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
           },
           className
         )}
-        style={style}
+        style={styleVar}
       >
         {this.renderColumns(this.props.columns)}
         <Spinner loadingConfig={loadingConfig} overlay show={loading} />