diff --git a/src/components/detail/image/index.tsx b/src/components/detail/image/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2719b3282a0248c3daf724ac23679adb9feb3297
--- /dev/null
+++ b/src/components/detail/image/index.tsx
@@ -0,0 +1,20 @@
+
+import React from 'react'
+import { DetailImageField } from 'ccms'
+import { IImageDetail, ImageDetailConfig } from 'ccms/dist/src/components/detail/image'
+import { Image } from 'antd'
+export const PropsType = (props: ImageDetailConfig) => { }
+
+export default class ImageDetailComponent extends DetailImageField {
+  renderComponent = (props: IImageDetail) => {
+    const { value, width, height } = props
+    return (
+      value ?
+        <Image
+          width={width}
+          height={height}
+          src={value}
+        /> : <></>
+    )
+  }
+}
diff --git a/src/components/detail/index.tsx b/src/components/detail/index.tsx
index 7c5371a4fbe88bfda485ce74f5ee569c9310a469..ab04a761cac262f70d6c02ce40981fbe13b148db 100644
--- a/src/components/detail/index.tsx
+++ b/src/components/detail/index.tsx
@@ -4,6 +4,7 @@ import StatementDetail from './statement'
 import EnumDetailComponent from './enum'
 import ImportSubformField from './importSubform'
 import InfoDetail from './detailInfo'
+import ImageDetail from './image'
 import ColorDetail from './detailColor'
 import CustomFieldComponent from './custom'
 import TableFieldComponent from './table'
@@ -14,8 +15,9 @@ export default {
   statement: StatementDetail,
   detail_enum: EnumDetailComponent,
   import_subform: ImportSubformField,
+  custom: CustomFieldComponent,
+  table: TableFieldComponent,
   detail_info: InfoDetail,
   detail_color: ColorDetail,
-  custom: CustomFieldComponent,
-  table: TableFieldComponent
+  image: ImageDetail
 }
diff --git a/src/steps/table/index.less b/src/steps/table/index.less
index 6eb2abab27933a985d5de22128ba508fa5f981de..18589809a015d594a0d344d9e403d6220b8f0bb5 100644
--- a/src/steps/table/index.less
+++ b/src/steps/table/index.less
@@ -1,23 +1,35 @@
 .ccms-antd-table {
-    &>.ccms-antd-table-header {
-      display: flex;
-      justify-content: space-between;
+  &>.ccms-antd-table-button {
+    margin-right: 10px;
+  }
+
+  &>.ccms-antd-table-header {
+    display        : flex;
+    justify-content: space-between;
+    align-items    : center;
+    margin-bottom  : 16px;
+
+    &>.ccms-antd-table-left {
+      display    : flex;
       align-items: center;
-      margin-bottom: 16px;
+
       &>.ccms-antd-table-title {
-        color: #000000d9;
+        color      : #000000d9;
         font-weight: 500;
-        font-size: 16px;
-        display: flex;
-        &>.ccms-antd-table-title-explain {
-          margin-left: 16px;
-          font-size: 14px;
-          color: #abb7c4;
-          margin-top: 2px;
-        }
+        font-size  : 16px;
+        display    : flex;
       }
-      &>.ccms-antd-table-tableOperation {
+
+      &>.ccms-antd-table-title-explain {
         margin-left: 16px;
+        font-size  : 14px;
+        color      : #abb7c4;
+        margin-top : 2px;
       }
     }
+
+    &>.ccms-antd-table-tableOperation {
+      margin-left: 16px;
+    }
   }
+}
\ No newline at end of file
diff --git a/src/steps/table/index.tsx b/src/steps/table/index.tsx
index b85be601879b76a353d023e010b04139efe6acaa..3a036290746195db88304061f6d02cb9d0310e60 100644
--- a/src/steps/table/index.tsx
+++ b/src/steps/table/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { TableStep } from 'ccms'
-import { ITable, ITableColumn, ITableStepOperationConfirm, ITableStepOperationModal, ITableStepRowOperation, ITableStepRowOperationButton, ITableStepRowOperationGroup, ITableStepRowOperationGroupItem, ITableStepTableOperation, ITableStepTableOperationButton, ITableStepTableOperationGroup, ITableStepTableOperationGroupItem } from 'ccms/dist/src/steps/table'
+import { ITable, ITableColumn, ITableStepOperationConfirm, ITableStepOperationModal, ITableStepRowOperation, ITableStepRowOperationButton, ITableStepRowOperationGroup, ITableStepRowOperationGroupItem, ITableStepTableOperation, ITableStepTableOperationButton, ITableStepTableOperationGroup, ITableStepTableOperationGroupItem, DescriptionConfig } from 'ccms/dist/src/steps/table'
 import { Table, Button, Dropdown, Menu, Modal, Space, Tooltip } from 'antd'
 import { DownOutlined, InfoCircleOutlined } from '@ant-design/icons'
 import getALLComponents from '../../components/tableColumns'
@@ -25,10 +25,13 @@ export default class TableStepComponent extends TableStep {
     })
   }
 
+
   renderComponent = (props: ITable) => {
     const {
       title,
+      width,
       tableOperations,
+      leftTableOperations,
       primary,
       columns,
       data,
@@ -38,37 +41,14 @@ export default class TableStepComponent extends TableStep {
 
     return (
       <div className={styles['ccms-antd-table']}>
-        {(title || (description && ((description.label !== undefined && description.label !== '') || description.showIcon)) || tableOperations) && (
+        {(title || (description && ((description.label !== undefined && description.label !== '') || description.showIcon)) || tableOperations || leftTableOperations) && (
           <div className={styles['ccms-antd-table-header']}>
-            <div className={styles['ccms-antd-table-title']}>{title}
+            <div className={styles['ccms-antd-table-left']}>
+              <div className={styles['ccms-antd-table-title']}>{title}</div>
               <div className={styles['ccms-antd-table-title-explain']}>
-                {(description && description.type === 'text' && ((description.label !== undefined && description.label !== "") || description.showIcon)) && 
-                  <span> {(description.showIcon) && (<InfoCircleOutlined style={{ marginRight: "5px" }}/>)} 
-                  {description.label} </span>
-                }
-                {(description && description.type === 'tooltip' && ((description.label !== undefined && description.label !== "") || description.showIcon)) &&
-                  <Tooltip
-                    overlayStyle={{ color: 'white' }}
-                    placement="topLeft"
-                    title={description.content} 
-                    getPopupContainer={(ele) => ele.parentElement || document.body}>
-                    {(description.showIcon) && (<InfoCircleOutlined style={{ marginRight: "5px" }}/>)} 
-                    {description.label}
-                  </Tooltip>
-                }
-                {(description && description.type === 'modal' && ((description.label !== undefined && description.label !== "") || description.showIcon)) &&
-                  <span style={{ cursor: 'pointer' }} onClick={()=>{
-                    Modal.info({
-                      getContainer: () => document.getElementById('ccms-antd') || document.body,
-                      content: (<div style={{ overflow: 'hidden' }}>{description.content}</div>),
-                      okText: '知道了'
-                    });
-                  }}>
-                  {(description.showIcon) && (<InfoCircleOutlined style={{ marginRight: "5px" }}/>)} 
-                  {description.label}
-                  </span>
-                }
+                {description && this.renderExplainComponent(description)}
               </div>
+              <div>{leftTableOperations}</div>
             </div>
             <div className={styles['ccms-antd-table-tableOperation']}>{tableOperations}</div>
           </div>
@@ -83,9 +63,9 @@ export default class TableStepComponent extends TableStep {
             render: (value: any, record: { [field: string]: any }, index: number) => column.render(value, record, index)
           }))}
           dataSource={data}
-          scroll={{ x: 1000 }}
+          scroll={{ x: width || 1000 }}
           size="middle"
-          pagination={ pagination === undefined ? false : {
+          pagination={pagination === undefined ? false : {
             current: pagination.current,
             pageSize: pagination.pageSize,
             total: pagination.total,
@@ -101,6 +81,37 @@ export default class TableStepComponent extends TableStep {
     )
   }
 
+  renderExplainComponent = (description: DescriptionConfig) => {
+    return <>
+      {(description && description.type === 'text' && ((description.label !== undefined && description.label !== "") || description.showIcon)) &&
+        <span> {(description.showIcon) && (<InfoCircleOutlined style={{ marginRight: "5px" }} />)}
+          {description.label} </span>
+      }
+      {(description && description.type === 'tooltip' && ((description.label !== undefined && description.label !== "") || description.showIcon)) &&
+        <Tooltip
+          overlayStyle={{ color: 'white' }}
+          placement="topLeft"
+          title={description.content}
+          getPopupContainer={(ele) => ele.parentElement || document.body}>
+          {(description.showIcon) && (<InfoCircleOutlined style={{ marginRight: "5px" }} />)}
+          {description.label}
+        </Tooltip>
+      }
+      {(description && description.type === 'modal' && ((description.label !== undefined && description.label !== "") || description.showIcon)) &&
+        <span style={{ cursor: 'pointer' }} onClick={() => {
+          Modal.info({
+            getContainer: () => document.getElementById('ccms-antd') || document.body,
+            content: (<div style={{ overflow: 'hidden' }}>{description.content}</div>),
+            okText: '知道了'
+          });
+        }}>
+          {(description.showIcon) && (<InfoCircleOutlined style={{ marginRight: "5px" }} />)}
+          {description.label}
+        </span>
+      }
+    </>
+  }
+
   renderRowOperationComponent = (props: ITableStepRowOperation) => {
     const {
       children
@@ -121,7 +132,7 @@ export default class TableStepComponent extends TableStep {
     return <a onClick={() => onClick()}>{label}</a>
   }
 
-  renderRowOperationGroupComponent = (props: ITableStepRowOperationGroup) => {
+  renderRowOperationDropdownComponent = (props: ITableStepRowOperationGroup) => {
     const {
       label,
       children
@@ -134,14 +145,13 @@ export default class TableStepComponent extends TableStep {
             {children}
           </Menu>
         )}
-
       >
         <a>{label}</a>
       </Dropdown>
     )
   }
 
-  renderRowOperationGroupItemComponent = (props: ITableStepRowOperationGroupItem) => {
+  renderRowOperationDropdownItemComponent = (props: ITableStepRowOperationGroupItem) => {
     const {
       label,
       disabled,
@@ -152,6 +162,27 @@ export default class TableStepComponent extends TableStep {
     )
   }
 
+  renderRowOperationGroupComponent = (props: ITableStepTableOperation) => {
+    const {
+      children
+    } = props
+    return (
+      <Button.Group>
+        {children}
+      </Button.Group>
+    )
+  }
+
+  renderRowOperationGroupItemComponent = (props: ITableStepRowOperationGroupItem) => {
+    const {
+      label,
+      disabled,
+      onClick
+    } = props
+    return (
+      <Menu.Item disabled={disabled} onClick={() => onClick()}>{label}</Menu.Item>
+    )
+  }
 
 
   renderTableOperationComponent = (props: ITableStepTableOperation) => {
@@ -159,12 +190,13 @@ export default class TableStepComponent extends TableStep {
       children
     } = props
     return (
-      <Button.Group>
+      <div>
         {children}
-      </Button.Group>
+      </div>
     )
   }
 
+
   renderTableOperationButtonComponent = (props: ITableStepTableOperationButton) => {
     const {
       label,
@@ -182,7 +214,7 @@ export default class TableStepComponent extends TableStep {
     return <Button {...button_props} onClick={() => onClick()}>{label}</Button>
   }
 
-  renderTableOperationGroupComponent = (props: ITableStepTableOperationGroup) => {
+  renderTableOperationDropdownComponent = (props: ITableStepTableOperationGroup) => {
     const {
       label,
       children
@@ -206,7 +238,7 @@ export default class TableStepComponent extends TableStep {
     )
   }
 
-  renderTableOperationGroupItemComponent = (props: ITableStepTableOperationGroupItem) => {
+  renderTableOperationDropdownItemComponent = (props: ITableStepTableOperationGroupItem) => {
     const {
       label,
       disabled,
@@ -217,6 +249,35 @@ export default class TableStepComponent extends TableStep {
     )
   }
 
+  renderTableOperationGroupComponent = (props: ITableStepTableOperationGroup) => {
+    const {
+      children
+    } = props
+
+    return (
+      <Button.Group>
+        {children}
+      </Button.Group>
+    )
+  }
+
+  renderTableOperationGroupItemComponent = (props: ITableStepTableOperationGroupItem) => {
+    const {
+      label,
+      level,
+      disabled,
+      onClick
+    } = props
+
+    const button_props: ButtonProps = { disabled }
+    if (level === 'primary') {
+      button_props.type = 'primary'
+    } else if (level === 'danger') {
+      button_props.danger = true
+    }
+    return <Button {...button_props} onClick={() => onClick()}>{label}</Button>
+  }
+
   renderOperationModal = (props: ITableStepOperationModal) => {
     const {
       title,