补充Schema

src/Schema.ts

@@ -44,6 +44,7 @@ import {VBoxSchema} from './renderers/VBox';
 import {VideoSchema} from './renderers/Video';
 import {WizardSchema} from './renderers/Wizard';
 import {WrapperSchema} from './renderers/Wrapper';
+import {TableSchema} from './renderers/Table';
 
 // 每加个类型，这补充一下。
 export type SchemaType =
@@ -95,6 +96,7 @@ export type SchemaType =
   | 'service'
   | 'status'
   | 'switch'
+  | 'table'
   | 'tabs'
   | 'tasks'
   | 'vbox'
@@ -143,6 +145,7 @@ export type SchemaObject =
   | ServiceSchema
   | StatusSchema
   | SwitchSchema
+  | TableSchema
   | TabsSchema
   | TasksSchema
   | VBoxSchema

src/renderers/Alert.tsx

@@ -4,7 +4,8 @@ import Alert, {AlertProps} from '../components/Alert2';
 import {BaseSchema, SchemaCollection} from '../Schema';
 
 /**
- * Alert 提示渲染器，文档：https://baidu.gitee.io/amis/docs/components/alert
+ * Alert 提示渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/alert
  */
 export interface AlertSchema extends BaseSchema {
   /**

src/renderers/Audio.tsx

@@ -8,7 +8,8 @@ import {filter} from '../utils/tpl';
 import {BaseSchema, SchemaUrlPath} from '../Schema';
 
 /**
- * Audio 音频渲染器，文档：https://baidu.gitee.io/amis/docs/components/audio
+ * Audio 音频渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/audio
  */
 export interface AudioSchema extends BaseSchema {
   /**

src/renderers/ButtonGroup.tsx

@@ -5,7 +5,8 @@ import {BaseSchema, SchemaClassName, SchemaExpression} from '../Schema';
 import {ActionSchema} from './Action';
 
 /**
- * Button Group 渲染器，文档：https://baidu.gitee.io/amis/docs/components/button-group
+ * Button Group 渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/button-group
  */
 export interface ButtonGroupSchema extends BaseSchema {
   /**

src/renderers/ButtonToolbar.tsx

@@ -4,7 +4,8 @@ import {BaseSchema} from '../Schema';
 import {ActionSchema} from './Action';
 
 /**
- * Button Toolar 渲染器，文档：https://baidu.gitee.io/amis/docs/components/button-toolbar
+ * Button Toolar 渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/button-toolbar
  */
 export interface ButtonToolbarSchema extends BaseSchema {
   /**

src/renderers/CRUD.tsx

@@ -49,6 +49,7 @@ import {
 import {ActionSchema} from './Action';
 import {CardsSchema} from './Cards';
 import {ListSchema} from './List';
+import {TableSchema} from './Table';
 
 export interface CRUDCommonSchema extends BaseSchema {
   /**
@@ -234,11 +235,15 @@ export type CRUDListSchema = CRUDCommonSchema & {
   mode: 'list';
 } & Omit<ListSchema, 'type'>;
 
+export type CRUDTableSchem = CRUDCommonSchema & {
+  mode?: 'table';
+} & Omit<TableSchema, 'type'>;
+
 /**
  * CRUD 增删改查渲染器。
  * 文档：https://baidu.gitee.io/amis/docs/components/crud
  */
-export type CRUDSchema = CRUDCardsSchema | CRUDListSchema; // todo
+export type CRUDSchema = CRUDCardsSchema | CRUDListSchema | CRUDTableSchem;
 
 export interface CRUDProps extends RendererProps, CRUDCommonSchema {
   store: ICRUDStore;

src/renderers/Card.tsx

@@ -8,10 +8,10 @@ import Checkbox from '../components/Checkbox';
 import {IItem} from '../store/list';
 import {padArr, isVisible, isDisabled, noop} from '../utils/helper';
 import {resolveVariable} from '../utils/tpl-builtin';
-import QuickEdit from './QuickEdit';
-import PopOver from './PopOver';
+import QuickEdit, {SchemaQuickEdit} from './QuickEdit';
+import PopOver, {SchemaPopOver} from './PopOver';
 import {TableCell} from './Table';
-import Copyable from './Copyable';
+import Copyable, {SchemaCopyable} from './Copyable';
 import {Icon} from '../components/icons';
 import {
   BaseSchema,
@@ -24,8 +24,36 @@ import {
 } from '../Schema';
 import {ActionSchema} from './Action';
 
+export type CardBodyField = BaseSchema & {
+  /**
+   * 列标题
+   */
+  label: string;
+
+  /**
+   * 绑定字段名
+   */
+  name?: string;
+
+  /**
+   * 配置查看详情功能
+   */
+  popOver?: SchemaPopOver;
+
+  /**
+   * 配置快速编辑功能
+   */
+  quickEdit?: SchemaQuickEdit;
+
+  /**
+   * 配置点击复制功能
+   */
+  copyable?: SchemaCopyable;
+};
+
 /**
- * Card 卡片渲染器，格式说明，文档：https://baidu.gitee.io/amis/docs/components/card
+ * Card 卡片渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/card
  */
 export interface CardSchema extends BaseSchema {
   /**
@@ -110,7 +138,7 @@ export interface CardSchema extends BaseSchema {
   /**
    * 内容区域
    */
-  body?: SchemaCollection; // todo 实际上应该只有固定的一些 field
+  body?: Array<CardBodyField>;
 
   /**
    * 底部按钮集合。

src/renderers/Cards.tsx

@@ -26,7 +26,8 @@ import {
 import {CardSchema} from './Card';
 
 /**
- * Cards 卡片集合渲染器，格式说明，文档：https://baidu.gitee.io/amis/docs/components/card
+ * Cards 卡片集合渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/card
  */
 export interface CardsSchema extends BaseSchema {
   /**

src/renderers/Carousel.tsx

@@ -16,7 +16,8 @@ import {Icon} from '../components/icons';
 import {BaseSchema, SchemaName, SchemaObject, SchemaTpl} from '../Schema';
 
 /**
- * Carousel 轮播图渲染器，格式说明，文档：https://baidu.gitee.io/amis/docs/components/carousel
+ * Carousel 轮播图渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/carousel
  */
 export interface CarouselSchema extends BaseSchema {
   /**

src/renderers/Chart.tsx

@@ -23,7 +23,8 @@ import {
 import {ActionSchema} from './Action';
 
 /**
- * Chart 图表渲染器，格式说明，文档：https://baidu.gitee.io/amis/docs/components/carousel
+ * Chart 图表渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/carousel
  */
 export interface ChartSchema extends BaseSchema {
   /**

src/renderers/Copyable.tsx

@@ -10,19 +10,26 @@ import hoistNonReactStatic from 'hoist-non-react-statics';
 import Button from '../components/Button';
 import {filter} from '../utils/tpl';
 import {Icon} from '../components/icons';
+import {SchemaIcon, SchemaTpl} from '../Schema';
 
-export interface CopyableConfig {}
+export interface SchemaCopyableObject {
+  /**
+   * 可以配置图标
+   */
+  icon?: SchemaIcon;
 
-export interface CopyableConfig {
-  icon?: string;
-  content?: string;
-  [propName: string]: any;
+  /**
+   * 配置复制时的内容模板。
+   */
+  content?: SchemaTpl;
 }
 
+export type SchemaCopyable = boolean | SchemaCopyableObject;
+
 export interface CopyableProps extends RendererProps {
   name?: string;
   label?: string;
-  copyable: boolean | CopyableConfig;
+  copyable: SchemaCopyable;
 }
 
 export const HocCopyable = () => (Component: React.ComponentType<any>): any => {
@@ -45,7 +52,8 @@ export const HocCopyable = () => (Component: React.ComponentType<any>): any => {
 
       if (copyable && !noHoc) {
         const content = filter(
-          (copyable as CopyableConfig).content || '${' + name + ' | raw }',
+          (copyable as SchemaCopyableObject).content ||
+            '${' + name + ' | raw }',
           data
         );
         if (content) {

src/renderers/Form/index.tsx

@@ -89,14 +89,9 @@ export type FormGroup = FormSchema & {
 export type FormGroupNode = FormGroup | FormGroupArray;
 export interface FormGroupArray extends Array<FormGroupNode> {}
 
-export interface FormHorizontal {
-  leftFixed?: boolean | string;
-  left: string | number;
-  right: string | number;
-  offset: string | number;
-}
+export type FormHorizontal = FormSchemaHorizontal;
 
-export interface FormProps extends RendererProps, FormSchema {
+export interface FormProps extends RendererProps, Omit<FormSchema, 'mode'> {
   data: any;
   store: IFormStore;
   wrapperComponent: React.ReactType;

src/renderers/List.tsx

@@ -17,11 +17,11 @@ import {
   noop
 } from '../utils/helper';
 import {resolveVariable} from '../utils/tpl-builtin';
-import QuickEdit from './QuickEdit';
-import PopOver from './PopOver';
+import QuickEdit, {SchemaQuickEdit} from './QuickEdit';
+import PopOver, {SchemaPopOver} from './PopOver';
 import Sortable from 'sortablejs';
 import {TableCell} from './Table';
-import Copyable from './Copyable';
+import Copyable, {SchemaCopyable} from './Copyable';
 import {Icon} from '../components/icons';
 import {
   BaseSchema,
@@ -36,6 +36,33 @@ import {
 import {ActionSchema} from './Action';
 import {SchemaRemark} from './Remark';
 
+export type ListBodyField = BaseSchema & {
+  /**
+   * 列标题
+   */
+  label: string;
+
+  /**
+   * 绑定字段名
+   */
+  name?: string;
+
+  /**
+   * 配置查看详情功能
+   */
+  popOver?: SchemaPopOver;
+
+  /**
+   * 配置快速编辑功能
+   */
+  quickEdit?: SchemaQuickEdit;
+
+  /**
+   * 配置点击复制功能
+   */
+  copyable?: SchemaCopyable;
+};
+
 export interface ListItemSchema extends Omit<BaseSchema, 'type'> {
   actions?: Array<ActionSchema>;
 
@@ -47,7 +74,7 @@ export interface ListItemSchema extends Omit<BaseSchema, 'type'> {
   /**
    * 内容区域
    */
-  body?: SchemaCollection; // todo 实际上应该只有固定的一些 field
+  body?: Array<ListBodyField>;
 
   /**
    * 描述

src/renderers/PopOver.tsx

@@ -12,13 +12,28 @@ import {RootCloseWrapper} from 'react-overlays';
 import PopOver, {Offset} from '../components/PopOver';
 import Overlay from '../components/Overlay';
 import {Icon} from '../components/icons';
+import {SchemaCollection} from '../Schema';
 
-export interface PopOverConfig {
-  saveImmediately?: boolean;
+export interface SchemaPopOverObject {
+  /**
+   * 类名
+   */
+  className?: string;
+
+  /**
+   * 弹出模式
+   */
   mode?: 'dialog' | 'drawer' | 'popOver';
-  title?: string;
+
+  /**
+   * 是弹窗形式的时候有用。
+   */
   size?: 'sm' | 'md' | 'lg' | 'xl';
-  position:
+
+  /**
+   * 弹出位置
+   */
+  position?:
     | 'center'
     | 'left-top'
     | 'right-top'
@@ -29,14 +44,29 @@ export interface PopOverConfig {
     | 'fixed-right-top'
     | 'fixed-left-bottom'
     | 'fixed-right-bottom';
-  offset?: Offset;
-  [propName: string]: any;
+
+  /**
+   * 偏移量
+   */
+  offset?: {
+    top?: number;
+    left?: number;
+  };
+
+  /**
+   * 标题
+   */
+  title?: string;
+
+  body?: SchemaCollection;
 }
 
+export type SchemaPopOver = boolean | SchemaPopOverObject;
+
 export interface PopOverProps extends RendererProps {
   name?: string;
   label?: string;
-  popOver: boolean | PopOverConfig;
+  popOver: boolean | SchemaPopOverObject;
   onPopOverOpened: (popover: any) => void;
   onPopOverClosed: (popover: any) => void;
 }
@@ -45,7 +75,7 @@ export interface PopOverState {
   isOpened: boolean;
 }
 
-export const HocPopOver = (config: Partial<PopOverConfig> = {}) => (
+export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
   Component: React.ComponentType<any>
 ): any => {
   class PopOverComponent extends React.Component<PopOverProps, PopOverState> {
@@ -136,8 +166,8 @@ export const HocPopOver = (config: Partial<PopOverConfig> = {}) => (
       } = this.props;
       if (
         popOver &&
-        ((popOver as PopOverConfig).mode === 'dialog' ||
-          (popOver as PopOverConfig).mode === 'drawer')
+        ((popOver as SchemaPopOverObject).mode === 'dialog' ||
+          (popOver as SchemaPopOverObject).mode === 'drawer')
       ) {
         return render('popover-detail', this.buildSchema(), {
           show: true,
@@ -147,14 +177,15 @@ export const HocPopOver = (config: Partial<PopOverConfig> = {}) => (
       }
 
       const content = render('popover-detail', this.buildSchema(), {
-        className: cx((popOver as PopOverConfig).className)
+        className: cx((popOver as SchemaPopOverObject).className)
       }) as JSX.Element;
 
       if (!popOverContainer) {
         popOverContainer = () => findDOMNode(this);
       }
 
-      const position = (popOver && (popOver as PopOverConfig).position) || '';
+      const position =
+        (popOver && (popOver as SchemaPopOverObject).position) || '';
       const isFixed = /^fixed\-/.test(position);
 
       return isFixed ? (
@@ -179,7 +210,7 @@ export const HocPopOver = (config: Partial<PopOverConfig> = {}) => (
           <PopOver
             classPrefix={ns}
             className={cx('PopOverAble-popover')}
-            offset={(popOver as PopOverConfig).offset}
+            offset={(popOver as SchemaPopOverObject).offset}
           >
             {content}
           </PopOver>

src/renderers/QuickEdit.tsx

@@ -18,8 +18,42 @@ import matches from 'dom-helpers/query/matches';
 import Overlay from '../components/Overlay';
 import PopOver from '../components/PopOver';
 import {Icon} from '../components/icons';
+import {FormControlSchema} from './Form/Item';
 
-export interface QuickEditConfig {}
+export type SchemaQuickEditObject =
+  /**
+   * 直接就是个表单项
+   */
+  | ({
+      /**
+       * 是否立即保存
+       */
+      saveImmediately?: boolean;
+
+      /**
+       * 是否直接内嵌
+       */
+      mode?: 'inline';
+    } & FormControlSchema)
+
+  /**
+   * 表单项集合
+   */
+  | {
+      /**
+       * 是否立即保存
+       */
+      saveImmediately?: boolean;
+
+      /**
+       * 是否直接内嵌
+       */
+      mode?: 'inline';
+
+      controls: Array<FormControlSchema>;
+    };
+
+export type SchemaQuickEdit = boolean | SchemaQuickEditObject;
 
 export interface QuickEditConfig {
   saveImmediately?: boolean;

src/renderers/Service.tsx

@@ -52,7 +52,7 @@ export interface ServiceSchema extends BaseSchema {
    *
    * @deprecated 改成 api 的 sendOn。
    */
-  initFetchOn?: boolean;
+  initFetchOn?: SchemaExpression;
 
   /**
    * 用来获取远程 Schema 的 api
@@ -93,6 +93,10 @@ export interface ServiceSchema extends BaseSchema {
 
 export interface ServiceProps extends RendererProps, ServiceSchema {
   store: IServiceStore;
+  messages: {
+    fetchSuccess?: string;
+    fetchFailed?: string;
+  };
 }
 export default class Service extends React.Component<ServiceProps> {
   timer: NodeJS.Timeout;
@@ -127,9 +131,7 @@ export default class Service extends React.Component<ServiceProps> {
     const props = this.props;
     const store = props.store;
 
-    const {
-      messages: {fetchSuccess, fetchFailed}
-    } = props;
+    const {fetchSuccess, fetchFailed} = props.messages!;
 
     isApiOutdated(prevProps.api, props.api, prevProps.data, props.data) &&
       store

src/renderers/Table/index.tsx

@@ -27,10 +27,148 @@ import {TableRow} from './TableRow';
 import {HeadCellFilterDropDown} from './HeadCellFilterDropdown';
 import {HeadCellSearchDropDown} from './HeadCellSearchDropdown';
 import {TableContent} from './TableContent';
+import {
+  BaseSchema,
+  SchemaClassName,
+  SchemaObject,
+  SchemaTokenizeableString
+} from '../../Schema';
+import {FormControlSchema, FormControlType} from '../Form/Item';
+import {SchemaPopOver} from '../PopOver';
+import {SchemaQuickEdit} from '../QuickEdit';
+import {SchemaCopyable} from '../Copyable';
 
-export interface Column {
-  type: string;
-  [propName: string]: any;
+export type TableColumn = BaseSchema & {
+  /**
+   * 列标题
+   */
+  label: string;
+
+  /**
+   * 配置是否固定当前列
+   */
+  fixed?: 'left' | 'right' | 'none';
+
+  /**
+   * 绑定字段名
+   */
+  name?: string;
+
+  /**
+   * 配置查看详情功能
+   */
+  popOver?: SchemaPopOver;
+
+  /**
+   * 配置快速编辑功能
+   */
+  quickEdit?: SchemaQuickEdit;
+
+  /**
+   * 配置点击复制功能
+   */
+  copyable?: SchemaCopyable;
+
+  /**
+   * 配置是否可以排序
+   */
+  sortable?: boolean;
+
+  /**
+   * 配置是否默认展示
+   */
+  toggled?: boolean;
+
+  /**
+   * 列宽度
+   */
+  width?: number | string;
+
+  /**
+   * 结合表格的 footable 一起使用。
+   * 填写 *、xs、sm、md、lg指定 footable 的触发条件，可以填写多个用空格隔开
+   */
+  breakpoint?: '*' | 'xs' | 'sm' | 'md' | 'lg';
+};
+
+/**
+ * Table 表格渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/table
+ */
+export interface TableSchema extends BaseSchema {
+  /**
+   * 指定为表格渲染器。
+   */
+  type: 'table';
+
+  /**
+   * 是否固定表头
+   */
+  affixHeader?: boolean;
+
+  /**
+   * 表格的列信息
+   */
+  columns: Array<TableColumn>;
+
+  /**
+   * 展示列显示开关，自动即：列数量大于或等于5个时自动开启
+   */
+  columnsTogglable?: boolean | 'auto';
+
+  /**
+   * 是否开启底部展示功能，适合移动端展示
+   */
+  footable?:
+    | boolean
+    | {
+        expand?: 'first' | 'all' | 'none';
+      };
+
+  /**
+   * 底部外层 CSS 类名
+   */
+  footerClassName?: SchemaClassName;
+
+  /**
+   * 顶部外层 CSS 类名
+   */
+  headerClassName?: SchemaClassName;
+
+  /**
+   * 占位符
+   */
+  placeholder?: string;
+
+  /**
+   * 是否显示底部
+   */
+  showFooter?: boolean;
+
+  /**
+   * 是否显示头部
+   */
+  showHeader?: boolean;
+
+  /**
+   * 数据源：绑定当前环境变量
+   */
+  source?: SchemaTokenizeableString;
+
+  /**
+   * 表格 CSS 类名
+   */
+  tableClassName?: SchemaClassName;
+
+  /**
+   * 标题
+   */
+  title?: string;
+
+  /**
+   * 工具栏 CSS 类名
+   */
+  toolbarClassName?: SchemaClassName;
 }
 
 export interface TableProps extends RendererProps {
@@ -42,7 +180,7 @@ export interface TableProps extends RendererProps {
   headerClassName?: string;
   footerClassName?: string;
   store: ITableStore;
-  columns?: Array<Column>;
+  columns?: Array<TableColumn>;
   headingClassName?: string;
   toolbarClassName?: string;
   headerToolbarClassName?: string;

src/renderers/Tabs.tsx

@@ -6,7 +6,12 @@ import {isVisible, autobind, isDisabled} from '../utils/helper';
 import findIndex from 'lodash/findIndex';
 import {Tabs as CTabs, Tab} from '../components/Tabs';
 import {ClassNamesFn} from '../theme';
-import {BaseSchema, SchemaClassName, SchemaIcon} from '../Schema';
+import {
+  BaseSchema,
+  SchemaClassName,
+  SchemaCollection,
+  SchemaIcon
+} from '../Schema';
 import {ActionSchema} from './Action';
 
 export interface TabSchema extends Omit<BaseSchema, 'type'> {
@@ -19,12 +24,12 @@ export interface TabSchema extends Omit<BaseSchema, 'type'> {
    * 内容
    * @deprecated 用 body 属性
    */
-  tab?: SchemaNode;
+  tab?: SchemaCollection;
 
   /**
    * 内容
    */
-  body?: SchemaNode;
+  body?: SchemaCollection;
 
   /**
    * 徽标