diff --git a/src/components/detail/common.ts b/src/components/detail/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..709e1d1236df682559119283cf7b80feb3cb17e6
--- /dev/null
+++ b/src/components/detail/common.ts
@@ -0,0 +1,29 @@
+import { FormItemProps } from "antd";
+
+export function formItemLayout (layout: 'horizontal' | 'vertical' | 'inline', fieldType: string, label: string | undefined) {
+  const formItemLayout: FormItemProps = { labelAlign: 'left' }
+  if (layout === 'vertical') {
+    if (label) {
+      formItemLayout.labelCol = { span: 24 }
+      formItemLayout.wrapperCol = { span: 24 }
+    } else {
+      formItemLayout.wrapperCol = { span: 24 }
+    }
+  } else {
+    if (['form', 'group', 'object', 'import_subform', 'tabs'].includes(fieldType)) {
+      if (label) {
+        formItemLayout.labelCol = { span: 24 }
+      }
+      formItemLayout.wrapperCol = { span: 24 }
+    } else {
+      if (label) {
+        formItemLayout.labelCol = { span: 6 }
+        formItemLayout.wrapperCol = { span: 18 }
+      } else {
+        formItemLayout.wrapperCol = { span: 24 }
+      }
+    }
+  }
+
+  return formItemLayout
+}
\ No newline at end of file
diff --git a/src/components/detail/group/index.less b/src/components/detail/group/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f465c351b5faffeb873daefcf5d4b42118a528a0
--- /dev/null
+++ b/src/components/detail/group/index.less
@@ -0,0 +1,33 @@
+.ccms-antd-mini-form-import_subform, .ccms-antd-mini-form-group {
+  margin-bottom: 0 !important;
+
+  &>:global(.ant-form-item-label) {
+    width: calc(100% + 16px) !important;
+    max-width: calc(100% + 16px) !important;
+    margin-left: -8px !important;
+    padding: 2px 8px !important;
+    flex: 0 0 auto !important;
+    background-color: #00000008 !important;
+  }
+  &>:global(.ant-form-item-control) {
+    margin-left: -8px !important;
+    margin-right: -8px !important;
+    padding: 8px !important;
+    max-width: calc(100% + 16px) !important;
+    background-color: #00000004 !important;
+  }
+  &>:global(.ant-form-item-control):first-child {
+    padding-top: 0 !important;
+    background-color: #00000000 !important;
+  }
+}
+
+.ccms-antd-mini-form-form, .ccms-antd-mini-form-object {
+  &>:global(.ant-form-item-control) {
+    &>:global(.ant-form-item-control-input) {
+      &>:global(.ant-form-item-control-input-content) {
+        min-height: 24px !important;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/detail/group/index.tsx b/src/components/detail/group/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7a9c45b42c220c3fe888c758f52cc81703448811
--- /dev/null
+++ b/src/components/detail/group/index.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { DetailGroupField } from 'ccms';
+import { IGroupField, GroupFieldConfig } from "ccms/dist/src/components/detail/group";
+import { IDetailItem } from "ccms/dist/src/steps/detail";
+import { Form } from "antd"
+import getALLComponents from '../'
+import styles from './index.less'
+import { formItemLayout } from "../common";
+
+export const PropsType = (props: GroupFieldConfig) => { };
+
+export default class GroupFieldComponent extends DetailGroupField {
+  getALLComponents = (type: any) => getALLComponents[type]
+
+  renderComponent = (props: IGroupField) => {
+    const {
+      children
+    } = props
+    return (
+      <div>
+        {children}
+      </div>
+    )
+  }
+
+  renderItemComponent = (props: IDetailItem) => {
+    const {
+      layout,
+      label,
+      fieldType,
+      children
+    } = props
+
+    return (
+      <Form.Item
+        label={label}
+        {...formItemLayout(layout, fieldType, label)}
+        className={styles[`ccms-antd-mini-form-${fieldType}`]}
+      >
+        {children}
+      </Form.Item>
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/components/detail/index.tsx b/src/components/detail/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ff733d32a218fffea6d74e5dd5ef4b09975e8573
--- /dev/null
+++ b/src/components/detail/index.tsx
@@ -0,0 +1,7 @@
+import TextField from './text'
+import GroupField from './group'
+
+export default {
+  text: TextField,
+  group: GroupField,
+}
diff --git a/src/components/detail/text/index.tsx b/src/components/detail/text/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8a6d3911f904d5ff5c807b0b63c093bfdd9331de
--- /dev/null
+++ b/src/components/detail/text/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { DetailTextField } from 'ccms'
+import { ITextField, TextFieldConfig } from 'ccms/dist/src/components/detail/text'
+
+export const PropsType = (props: TextFieldConfig) => {}
+
+export default class TextFieldComponent extends DetailTextField {
+  renderComponent = (props: ITextField) => {
+    const {
+      value
+    } = props
+    return (
+      <div>{value}</div>
+    )
+  }
+}
diff --git a/src/components/formFields/group/index.tsx b/src/components/formFields/group/index.tsx
index b4e5f4d466f9eaba9400a2f71041022f75c8cfa0..6f22ec8e7d8b03d03d0c529312c18d72dc2152ea 100644
--- a/src/components/formFields/group/index.tsx
+++ b/src/components/formFields/group/index.tsx
@@ -25,6 +25,7 @@ export default class GroupFieldComponent extends GroupField {
 
   renderItemComponent = (props: IFormItem) => {
     const {
+      key,
       layout,
       label,
       visitable,
@@ -36,6 +37,7 @@ export default class GroupFieldComponent extends GroupField {
 
     return (
       <Form.Item
+        key={key}
         label={label}
         {...formItemLayout(layout, fieldType, label)}
         validateStatus={status === 'normal' ? undefined : status === 'error' ? 'error' : 'validating'}
diff --git a/src/index.tsx b/src/index.tsx
index 38888d4135143c68fed32d301755dcb48abd7b39..1b721d0770804e1f3b77d28928744c265e199f20 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -10,3 +10,6 @@ export { default as SelectMultipleField } from './components/formFields/select/m
 export { default as Table } from './steps/table'
 
 export { default as Fetch } from './steps/fetch'
+export { default as DetailStep } from './steps/detail'
+export { default as DetailGroupField } from './components/detail/group'
+export { default as DetailTextField } from './components/detail/text'
\ No newline at end of file
diff --git a/src/steps/detail/index.less b/src/steps/detail/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..99a62723fb15965c3743e825c3b58129fc7074ff
--- /dev/null
+++ b/src/steps/detail/index.less
@@ -0,0 +1,33 @@
+.ccms-antd-mini-form-import_subform, .ccms-antd-mini-form-group {
+  margin-bottom: 0 !important;
+
+  &>:global(.ant-form-item-label) {
+    width: calc(100% + 16px) !important;
+    max-width: calc(100% + 16px) !important;
+    margin-left: -8px !important;
+    padding: 2px 8px !important;
+    flex: 0 0 auto !important;
+    background-color: #00000008 !important;
+  }
+  &>:global(.ant-form-item-control) {
+    margin-left: -8px !important;
+    margin-right: -8px !important;
+    padding: 8px !important;
+    max-width: calc(100% + 16px) !important;
+    background-color: #00000004 !important;
+  }
+  &>:global(.ant-form-item-control):first-child {
+    padding-top: 0 !important;
+    background-color: #00000000 !important;
+  }
+}
+
+.ccms-antd-mini-form-form {
+  &>:global(.ant-form-item-control) {
+    &>:global(.ant-form-item-control-input) {
+      &>:global(.ant-form-item-control-input-content) {
+        min-height: 24px !important;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/steps/detail/index.tsx b/src/steps/detail/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1d34e290a593cc7f27ce3e39a778e0cc1e30e97f
--- /dev/null
+++ b/src/steps/detail/index.tsx
@@ -0,0 +1,76 @@
+import React from 'react'
+import { Button, Form, Space } from 'antd'
+import { FormProps } from 'antd/lib/form'
+import { DetailStep } from 'ccms'
+import { IDetail, IDetailItem, DetailConfig } from 'ccms/dist/src/steps/detail'
+
+import getALLComponents from '../../components/detail'
+import styles from "./index.less"
+import { formItemLayout } from '../../components/formFields/common'
+import newstyles from "../../main.less"
+
+export default class DetailStepComponent extends DetailStep {
+  getALLComponents = (type: any) => getALLComponents[type]
+
+  renderComponent = (props: IDetail) => {
+    const {
+      layout, // layout??
+      onBack,
+      backText,
+      children
+    } = props
+
+    const formItemLayout: FormProps | null =
+      layout === 'horizontal'
+        ? {
+          labelAlign: 'left',
+          labelCol: { span: 6 },
+          wrapperCol: { span: 18 }
+        }
+        : null
+
+    return (
+      <Form
+        {...formItemLayout}
+        layout={layout}
+        className={newstyles['content']}
+      >
+        {children}
+        {
+          onBack && <Form.Item>
+            <Space>
+              {<Button onClick={() => onBack()}>{backText || '返回'}</Button>}
+            </Space>
+          </Form.Item>
+        }
+      </Form>
+    )
+  }
+
+  renderItemComponent = (props: IDetailItem) => {
+    const {
+      key,
+      layout,
+      label,
+      // status,
+      fieldType,
+      children
+    } = props
+
+    return (
+      <Form.Item
+        key = {key}
+        label={label}
+        {...formItemLayout(layout, fieldType, label)}
+        className={styles[`ccms-antd-mini-form-${fieldType}`]}
+      >
+        {children}
+      </Form.Item>
+    )
+  }
+}
+// <FormConfig, IForm>
+export const PropsType = (props: IDetail) => {};
+
+export const PropsTypeFormConfig = (props: DetailConfig) => {};
+export const PropsTypeStep = (props: DetailStep) => {};
\ No newline at end of file
diff --git a/src/steps/form/index.tsx b/src/steps/form/index.tsx
index f8cd7ebaf4880a7b24377097260625dbd2cc15b0..3e90fda04d45544346772910de9d8deb5c1f0dfb 100644
--- a/src/steps/form/index.tsx
+++ b/src/steps/form/index.tsx
@@ -52,6 +52,7 @@ export default class FormStepComponent extends FormStep {
 
   renderItemComponent = (props: IFormItem) => {
     const {
+      key,
       visitable,
       layout,
       label,
@@ -63,6 +64,7 @@ export default class FormStepComponent extends FormStep {
 
     return (
       <Form.Item
+        key={key}
         label={label}
         {...formItemLayout(layout, fieldType, label)}
         validateStatus={status === 'normal' ? undefined : status === 'error' ? 'error' : 'validating'}
diff --git a/src/steps/index.tsx b/src/steps/index.tsx
index 9cae75db325f523496f1d5adff9c028098570834..16e4e41aae9157ccfe675afcc28f22ba4c4bef2e 100644
--- a/src/steps/index.tsx
+++ b/src/steps/index.tsx
@@ -3,11 +3,13 @@ import FormStep from './form'
 import SkipStep from './skip'
 import TableStep from './table'
 import FilterStep from './filter'
+import DetailStep from './detail'
 
 export default {
   fetch: FetchStep,
   form: FormStep,
   skip: SkipStep,
   table: TableStep,
-  filter: FilterStep
+  filter: FilterStep,
+  detail: DetailStep
 }