From fe7ec86003a992f79f2ac4847f7dd7795027d5e4 Mon Sep 17 00:00:00 2001
From: ChenlingasMx <42308734@qq.com>
Date: Fri, 9 Jun 2023 17:40:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96antdp-base=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=A1=B5=E5=92=8C=E5=AE=9E=E4=BE=8B=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/antdp-base/.eslintignore             |   2 +
 examples/antdp-base/.eslintrc.js              |  14 ++
 examples/antdp-base/.prettierrc               |  11 -
 examples/antdp-base/.prettierrc.js            |   5 +
 examples/antdp-base/.stylelintrc.js           |   6 +
 examples/antdp-base/config/config.js          |   4 +-
 examples/antdp-base/config/router.json        |  56 ++---
 examples/antdp-base/mock/api.js               |  17 +-
 examples/antdp-base/mock/login.js             |   6 +-
 examples/antdp-base/package.json              |  26 +-
 examples/antdp-base/src/locales/en-US/menu.js |   4 +-
 examples/antdp-base/src/locales/zh-CN/menu.js |   4 +-
 examples/antdp-base/src/models/demo.js        |  20 --
 .../src/pages/Components/EditTable/demo1.jsx  | 108 --------
 .../src/pages/Components/EditTable/demo2.jsx  |  69 -----
 .../src/pages/Components/EditTable/demo3.jsx  |  69 -----
 .../src/pages/Components/EditTable/demo4.jsx  |  70 ------
 .../src/pages/Components/EditTable/demo5.jsx  |  67 -----
 .../src/pages/Components/EditTable/index.jsx  |  29 ---
 .../Components/EditableProTable/demo1.jsx     | 200 +++++++++++++++
 .../Components/EditableProTable/demo2.jsx     | 217 ++++++++++++++++
 .../Components/EditableProTable/demo3.jsx     | 137 ++++++++++
 .../Components/EditableProTable/demo4.jsx     | 236 ++++++++++++++++++
 .../Components/EditableProTable/index.jsx     |  22 ++
 .../src/pages/Components/FormDetail/index.jsx | 132 ----------
 .../Components/ProDescriptions/index.jsx      | 209 ++++++++++++++++
 .../{FormDetail => ProDescriptions}/item.js   |   0
 .../src/pages/Components/QuickForm/index.jsx  |  12 +-
 examples/antdp-base/src/pages/Demo/index.jsx  | 101 ++------
 examples/antdp-base/src/pages/Demo/item.jsx   | 200 +++++++++------
 .../antdp-base/src/pages/Demo/models/demo.js  |  11 +
 .../pages/Detail/AdvancedDetails/index.jsx    | 157 +++++++-----
 .../src/pages/Detail/AdvancedDetails/item.js  | 218 ++++++----------
 .../src/pages/Detail/BasicDetails/index.jsx   | 111 +++++++-
 34 files changed, 1542 insertions(+), 1008 deletions(-)
 create mode 100755 examples/antdp-base/.eslintignore
 create mode 100755 examples/antdp-base/.eslintrc.js
 delete mode 100644 examples/antdp-base/.prettierrc
 create mode 100644 examples/antdp-base/.prettierrc.js
 create mode 100644 examples/antdp-base/.stylelintrc.js
 delete mode 100644 examples/antdp-base/src/models/demo.js
 delete mode 100644 examples/antdp-base/src/pages/Components/EditTable/demo1.jsx
 delete mode 100644 examples/antdp-base/src/pages/Components/EditTable/demo2.jsx
 delete mode 100644 examples/antdp-base/src/pages/Components/EditTable/demo3.jsx
 delete mode 100644 examples/antdp-base/src/pages/Components/EditTable/demo4.jsx
 delete mode 100644 examples/antdp-base/src/pages/Components/EditTable/demo5.jsx
 delete mode 100644 examples/antdp-base/src/pages/Components/EditTable/index.jsx
 create mode 100644 examples/antdp-base/src/pages/Components/EditableProTable/demo1.jsx
 create mode 100644 examples/antdp-base/src/pages/Components/EditableProTable/demo2.jsx
 create mode 100644 examples/antdp-base/src/pages/Components/EditableProTable/demo3.jsx
 create mode 100644 examples/antdp-base/src/pages/Components/EditableProTable/demo4.jsx
 create mode 100644 examples/antdp-base/src/pages/Components/EditableProTable/index.jsx
 delete mode 100644 examples/antdp-base/src/pages/Components/FormDetail/index.jsx
 create mode 100644 examples/antdp-base/src/pages/Components/ProDescriptions/index.jsx
 rename examples/antdp-base/src/pages/Components/{FormDetail => ProDescriptions}/item.js (100%)
 create mode 100644 examples/antdp-base/src/pages/Demo/models/demo.js

diff --git a/examples/antdp-base/.eslintignore b/examples/antdp-base/.eslintignore
new file mode 100755
index 000000000..864659dcc
--- /dev/null
+++ b/examples/antdp-base/.eslintignore
@@ -0,0 +1,2 @@
+/config
+/src/pages/.umi/
\ No newline at end of file
diff --git a/examples/antdp-base/.eslintrc.js b/examples/antdp-base/.eslintrc.js
new file mode 100755
index 000000000..d26d222ce
--- /dev/null
+++ b/examples/antdp-base/.eslintrc.js
@@ -0,0 +1,14 @@
+module.exports = {
+  extends: [require.resolve('@umijs/fabric/dist/eslint'), 'eslint:recommended'],
+  // in antd-design-pro
+  globals: {
+    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
+    page: true,
+    REACT_APP_ENV: true,
+  },
+  plugins: ['prettier'],
+  rules: {
+    'prettier/prettier': 'error',
+    'no-unused-vars': 'error',
+  },
+};
diff --git a/examples/antdp-base/.prettierrc b/examples/antdp-base/.prettierrc
deleted file mode 100644
index 94beb1484..000000000
--- a/examples/antdp-base/.prettierrc
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 80,
-  "overrides": [
-    {
-      "files": ".prettierrc",
-      "options": { "parser": "json" }
-    }
-  ]
-}
diff --git a/examples/antdp-base/.prettierrc.js b/examples/antdp-base/.prettierrc.js
new file mode 100644
index 000000000..7b597d789
--- /dev/null
+++ b/examples/antdp-base/.prettierrc.js
@@ -0,0 +1,5 @@
+const fabric = require('@umijs/fabric');
+
+module.exports = {
+  ...fabric.prettier,
+};
diff --git a/examples/antdp-base/.stylelintrc.js b/examples/antdp-base/.stylelintrc.js
new file mode 100644
index 000000000..8e72b9933
--- /dev/null
+++ b/examples/antdp-base/.stylelintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: [require.resolve('@umijs/fabric/dist/stylelint')],
+  rules: {
+    // your rules
+  },
+};
diff --git a/examples/antdp-base/config/config.js b/examples/antdp-base/config/config.js
index 031e002fb..f598ad936 100644
--- a/examples/antdp-base/config/config.js
+++ b/examples/antdp-base/config/config.js
@@ -10,9 +10,9 @@ export default config(router, {
     // 是否显示 head头部
     // ANTD_HEAD_IS_SHOW: false,
     // 是否展示tab栏
-    ANTD_IS_TABS: true,
+    ANTD_IS_TABS: false,
     // 是否展示面包屑
-    ANTD_IS_BREADCRUMB: false,
+    ANTD_IS_BREADCRUMB: true,
     ANTD_AUTH_CONF: {
       auth_menu: 'authMenu',
       auth_btn: 'authBtn',
diff --git a/examples/antdp-base/config/router.json b/examples/antdp-base/config/router.json
index 8d11d6347..5f6878c49 100644
--- a/examples/antdp-base/config/router.json
+++ b/examples/antdp-base/config/router.json
@@ -37,28 +37,28 @@
         "icon": "form",
         "routes": [
           {
-            "path": "/components/quickform",
-            "name": "快速表单",
-            "locale": "quickform",
-            "component": "@/pages/Components/QuickForm"
+            "path": "/components/proform",
+            "name": "ProForm",
+            "locale": "proform",
+            "component": "@/pages/Components/ProForm"
           },
           {
-            "path": "/components/formdetail",
-            "name": "详情表单",
-            "locale": "formdetail",
-            "component": "@/pages/Components/FormDetail"
+            "path": "/components/proDescriptions",
+            "name": "ProDescriptions",
+            "locale": "proDescriptions",
+            "component": "@/pages/Components/ProDescriptions"
           },
           {
-            "path": "/components/edittable",
-            "name": "编辑表格",
-            "locale": "edittable",
-            "component": "@/pages/Components/EditTable"
+            "path": "/components/editableProTable",
+            "name": "EditableProTable",
+            "locale": "editableProTable",
+            "component": "@/pages/Components/EditableProTable"
           },
           {
-            "path": "/components/proform",
-            "name": "ProForm",
-            "locale": "proform",
-            "component": "@/pages/Components/ProForm"
+            "path": "/components/quickform",
+            "name": "快速表单",
+            "locale": "quickform",
+            "component": "@/pages/Components/QuickForm"
           }
         ]
       },
@@ -68,18 +68,6 @@
         "icon": "table",
         "locale": "list",
         "routes": [
-          {
-            "path": "/list/basiclist",
-            "name": "基础列表",
-            "locale": "basiclist",
-            "component": "@/pages/List/BasicList"
-          },
-          {
-            "path": "/list/cardlist",
-            "name": "卡片列表",
-            "locale": "cardlist",
-            "component": "@/pages/List/CardList"
-          },
           {
             "path": "/list/tablelist",
             "name": "ProTable",
@@ -91,6 +79,18 @@
             "name": "ProList",
             "locale": "prolist",
             "component": "@/pages/List/ProList"
+          },
+          {
+            "path": "/list/basiclist",
+            "name": "基础列表",
+            "locale": "basiclist",
+            "component": "@/pages/List/BasicList"
+          },
+          {
+            "path": "/list/cardlist",
+            "name": "卡片列表",
+            "locale": "cardlist",
+            "component": "@/pages/List/CardList"
           }
         ]
       },
diff --git a/examples/antdp-base/mock/api.js b/examples/antdp-base/mock/api.js
index 963547762..ff55cd601 100644
--- a/examples/antdp-base/mock/api.js
+++ b/examples/antdp-base/mock/api.js
@@ -41,7 +41,7 @@ export default {
       list[i] = {
         id: i,
         name: '霞仔',
-        title: '16',
+        age: '16',
         address: '上海市',
       };
     }
@@ -240,40 +240,35 @@ export default {
           avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel',
           title: 'Card title',
           descriptio: 'antdp 好用',
-          image:
-            'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
+          image: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
         },
         {
           id: 'trend-2',
           avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel',
           title: 'Card title',
           descriptio: 'antdp 好用',
-          image:
-            'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
+          image: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
         },
         {
           id: 'trend-3',
           avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel',
           title: 'Card title',
           descriptio: 'antdp 好用',
-          image:
-            'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
+          image: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
         },
         {
           id: 'trend-4',
           avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel',
           title: 'Card title',
           descriptio: 'antdp 好用',
-          image:
-            'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
+          image: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
         },
         {
           id: 'trend-5',
           avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel',
           title: 'Card title',
           descriptio: 'antdp 好用',
-          image:
-            'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
+          image: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
         },
       ],
     });
diff --git a/examples/antdp-base/mock/login.js b/examples/antdp-base/mock/login.js
index 1b4562520..5df673d90 100644
--- a/examples/antdp-base/mock/login.js
+++ b/examples/antdp-base/mock/login.js
@@ -4,10 +4,10 @@ const menus = [
   '/chart',
   '/dashboard',
   '/components',
-  '/components/quickform',
-  '/components/formdetail',
-  '/components/edittable',
   '/components/proform',
+  '/components/proDescriptions',
+  '/components/editableProTable',
+  '/components/quickform',
   '/list',
   '/list/basiclist',
   '/list/cardlist',
diff --git a/examples/antdp-base/package.json b/examples/antdp-base/package.json
index f408c9171..59ef10e97 100644
--- a/examples/antdp-base/package.json
+++ b/examples/antdp-base/package.json
@@ -5,31 +5,25 @@
     "start": "max dev",
     "build": "max build",
     "umiinstall": "max setup",
-    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "precommit": "npm run lint",
+    "lint-staged": "lint-staged"
   },
   "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": "eslint --fix",
     "*.{js,jsx,less,md,json}": [
       "prettier --write"
     ]
   },
   "dependencies": {
-    "@ant-design/pro-form": "1.74.7",
+    "@ant-design/pro-components": "^2.4.14",
     "@antdp/antdp-ui": "2.0.16",
-    "@antdp/edit-table": "2.0.16",
     "@antdp/authorized": "2.0.16",
     "@antdp/basic-layouts": "2.0.16",
     "@antdp/hooks": "2.0.16",
-    "@antdp/page-loading": "2.0.16",
     "@antdp/request": "2.0.16",
-    "@antdp/user-login": "2.0.16",
     "ahooks": "~3.7.2",
     "antd": "5.4.7",
-    "rc-field-form": "~1.27.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -44,9 +38,15 @@
   "devDependencies": {
     "@antdp/config": "2.0.16",
     "@antdp/dependencies": "2.0.16",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@umijs/fabric": "~2.14.1",
     "@umijs/max": "~4.0.47",
     "@umijs/plugin-model": "~2.6.2",
-    "lint-staged": "~13.0.4",
-    "prettier": "2.8.1"
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-prettier": "~4.2.1",
+    "eslint-plugin-unicorn": "^47.0.0",
+    "husky": "~8.0.3",
+    "lint-staged": "~13.2.2"
   }
 }
\ No newline at end of file
diff --git a/examples/antdp-base/src/locales/en-US/menu.js b/examples/antdp-base/src/locales/en-US/menu.js
index 9aec0bb8a..c90825076 100644
--- a/examples/antdp-base/src/locales/en-US/menu.js
+++ b/examples/antdp-base/src/locales/en-US/menu.js
@@ -4,8 +4,8 @@ export default {
   'menu.dashboard': 'dashboard',
   'menu.components': 'components pages',
   'menu.components.quickform': 'quickform',
-  'menu.components.formdetail': 'formdetail',
-  'menu.components.edittable': 'edittable',
+  'menu.components.proDescriptions': 'proDescriptions',
+  'menu.components.editableProTable': 'editableProTable',
   'menu.components.proform': 'proform',
   'menu.list': 'list pages',
   'menu.list.basiclist': 'basiclist',
diff --git a/examples/antdp-base/src/locales/zh-CN/menu.js b/examples/antdp-base/src/locales/zh-CN/menu.js
index 259496f07..fb57a8f22 100644
--- a/examples/antdp-base/src/locales/zh-CN/menu.js
+++ b/examples/antdp-base/src/locales/zh-CN/menu.js
@@ -4,8 +4,8 @@ export default {
   'menu.dashboard': '页面实例',
   'menu.components': '组件页',
   'menu.components.quickform': '快速表单',
-  'menu.components.formdetail': '详情表单',
-  'menu.components.edittable': '编辑表格',
+  'menu.components.proDescriptions': 'ProDescriptions',
+  'menu.components.editableProTable': 'EditableProTable',
   'menu.components.proform': 'ProForm',
   'menu.list': '列表页',
   'menu.list.basiclist': '基础列表',
diff --git a/examples/antdp-base/src/models/demo.js b/examples/antdp-base/src/models/demo.js
deleted file mode 100644
index 83990756a..000000000
--- a/examples/antdp-base/src/models/demo.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useState } from 'react';
-import { useBoolean } from 'ahooks';
-export default function useModelDemo() {
-  // 表单
-  const [queryInfo, setInfo] = useState({ time2: 123456, fileList: [] });
-  // isView=true查看 isView=false新增&编辑
-  const [isView, setIsView] = useState(false);
-  // drawer弹框
-  const [drawerVisible, { setFalse, setTrue }] = useBoolean(false);
-
-  return {
-    drawerVisible,
-    setTrue,
-    setFalse,
-    queryInfo,
-    setInfo,
-    isView,
-    setIsView,
-  };
-}
diff --git a/examples/antdp-base/src/pages/Components/EditTable/demo1.jsx b/examples/antdp-base/src/pages/Components/EditTable/demo1.jsx
deleted file mode 100644
index a4d39d591..000000000
--- a/examples/antdp-base/src/pages/Components/EditTable/demo1.jsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from 'react';
-import { Input, Col, InputNumber, Button, Select, Form, Card } from 'antd';
-import EditTable from '@antdp/edit-table';
-import 'antd/dist/reset.css';
-const originData = [];
-
-for (let i = 0; i < 5; i++) {
-  originData.push({
-    key: i.toString(),
-    name: `Edrward ${i}`,
-    age: 32,
-    address: `London Park no. ${i}`,
-  });
-}
-
-const Page = () => {
-  const [data, setData] = React.useState(originData);
-  const [tableProps, setTableProps] = React.useState({
-    isAdd: true,
-    isOpt: true,
-    optIsFirst: false,
-  });
-  const columns = [
-    {
-      title: 'name',
-      dataIndex: 'name',
-      width: '20%',
-      editable: true,
-      type: 'Input',
-    },
-    {
-      title: 'age',
-      dataIndex: 'age',
-      width: '15%',
-      editable: true,
-      type: 'Custom',
-      rules: [{ required: true, message: '请输入' }],
-      inputNode: <InputNumber />,
-    },
-    {
-      title: 'isList',
-      dataIndex: 'list',
-      width: '15%',
-      editable: true,
-      type: 'Custom',
-      isList: true,
-      render: (text) => {
-        return (
-          text &&
-          (text || [])
-            .filter((it) => it)
-            .map((ite) => ite.first)
-            .join(',')
-        );
-      },
-      inputNode: (fields, { add, remove }, { errors }) => (
-        <>
-          {fields.map(({ key, name, fieldKey, ...restField }, index) => (
-            <div style={{ marginBottom: 10 }}>
-              <EditTable.Item
-                key={key}
-                {...restField}
-                name={[name, 'first']}
-                fieldKey={[fieldKey, 'first']}
-                rules={[
-                  {
-                    required: true,
-                    whitespace: true,
-                    message: 'Missing first name',
-                  },
-                ]}
-              >
-                <Input placeholder="First Name" />
-              </EditTable.Item>
-            </div>
-          ))}
-          <Form.Item>
-            <Button type="dashed" onClick={() => add()}>
-              Add field
-            </Button>
-            <Form.ErrorList errors={errors} />
-          </Form.Item>
-        </>
-      ),
-    },
-    {
-      title: 'address',
-      dataIndex: 'address',
-      width: '30%',
-      editable: true,
-      type: 'Input',
-    },
-  ];
-  return (
-    <Card title="基本使用">
-      <EditTable
-        initValue={{ address: 2193 }}
-        onValuesChange={(list) => setData(list)}
-        rowKey="key"
-        dataSource={data}
-        columns={columns}
-        onSave={(list) => setData(list)}
-        {...tableProps}
-      />
-    </Card>
-  );
-};
-export default Page;
diff --git a/examples/antdp-base/src/pages/Components/EditTable/demo2.jsx b/examples/antdp-base/src/pages/Components/EditTable/demo2.jsx
deleted file mode 100644
index 54eadc8f9..000000000
--- a/examples/antdp-base/src/pages/Components/EditTable/demo2.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import { Input, Col, InputNumber, Button, Select, Form, Card } from 'antd';
-import EditTable from '@antdp/edit-table';
-import 'antd/dist/reset.css';
-const originData = [];
-
-for (let i = 0; i < 5; i++) {
-  originData.push({
-    key: i.toString(),
-    name: `Edrward ${i}`,
-    age: 32,
-    // address: `London Park no. ${i}`,
-  });
-}
-
-const EditableTable = () => {
-  const [data, setData] = React.useState(originData);
-  const [tableProps, setTableProps] = React.useState({
-    isAdd: true,
-    isOpt: true,
-    optIsFirst: true,
-  });
-  const columns = [
-    {
-      title: 'name',
-      dataIndex: 'name',
-      width: '20%',
-      editable: true,
-      type: 'Custom',
-      inputNode: (edit) => {
-        return <Input {...edit} />;
-      },
-    },
-    {
-      title: 'age',
-      dataIndex: 'age',
-      width: '15%',
-      editable: true,
-      type: 'Input',
-      // rules: [{ required: true, message: '请输入' }],
-      inputNode: (edit) => {
-        return <Input {...edit} />;
-      },
-    },
-    {
-      title: 'address',
-      dataIndex: 'address',
-      width: '30%',
-      editable: true,
-      type: 'Input',
-    },
-  ];
-  return (
-    <Card title="操作列在第一列">
-      <EditTable
-        initValue={{ address: 2193 }}
-        onValuesChange={(list) => setData(list)}
-        rowKey="key"
-        optIsFirst={true}
-        dataSource={data}
-        columns={columns}
-        onSave={(list) => setData(list)}
-        isAdd={true}
-        {...tableProps}
-      />
-    </Card>
-  );
-};
-export default EditableTable;
diff --git a/examples/antdp-base/src/pages/Components/EditTable/demo3.jsx b/examples/antdp-base/src/pages/Components/EditTable/demo3.jsx
deleted file mode 100644
index 9e3db535a..000000000
--- a/examples/antdp-base/src/pages/Components/EditTable/demo3.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import { Input, Col, InputNumber, Button, Select, Form, Card } from 'antd';
-import EditTable from '@antdp/edit-table';
-import 'antd/dist/reset.css';
-const originData = [];
-
-for (let i = 0; i < 5; i++) {
-  originData.push({
-    key: i.toString(),
-    name: `Edrward ${i}`,
-    age: 32,
-    // address: `London Park no. ${i}`,
-  });
-}
-
-const EditableTable = () => {
-  const [data, setData] = React.useState(originData);
-  const [tableProps, setTableProps] = React.useState({
-    isAdd: true,
-    isOpt: true,
-    isOptDelete: true,
-    optIsFirst: false,
-  });
-  const columns = [
-    {
-      title: 'name',
-      dataIndex: 'name',
-      width: '20%',
-      editable: true,
-      type: 'Custom',
-      inputNode: (edit) => {
-        return <Input {...edit} />;
-      },
-    },
-    {
-      title: 'age',
-      dataIndex: 'age',
-      width: '15%',
-      editable: true,
-      type: 'Custom',
-      rules: [{ required: true, message: '请输入' }],
-      inputNode: (edit) => {
-        return <Input {...edit} />;
-      },
-    },
-    {
-      title: 'address',
-      dataIndex: 'address',
-      width: '30%',
-      editable: true,
-      type: 'Input',
-    },
-  ];
-  return (
-    <Card title="显示删除按钮">
-      <EditTable
-        initValue={{ address: 2193 }}
-        onValuesChange={(list) => setData(list)}
-        rowKey="key"
-        dataSource={data}
-        columns={columns}
-        onSave={(list) => setData(list)}
-        isAdd={true}
-        {...tableProps}
-      />
-    </Card>
-  );
-};
-export default EditableTable;
diff --git a/examples/antdp-base/src/pages/Components/EditTable/demo4.jsx b/examples/antdp-base/src/pages/Components/EditTable/demo4.jsx
deleted file mode 100644
index 090c106aa..000000000
--- a/examples/antdp-base/src/pages/Components/EditTable/demo4.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import { Input, Col, InputNumber, Button, Select, Form, Card } from 'antd';
-import EditTable from '@antdp/edit-table';
-import 'antd/dist/reset.css';
-const originData = [];
-
-for (let i = 0; i < 5; i++) {
-  originData.push({
-    key: i.toString(),
-    name: `Edrward ${i}`,
-    age: 32,
-    // address: `London Park no. ${i}`,
-  });
-}
-
-const EditableTable = () => {
-  const [data, setData] = React.useState(originData);
-  const [tableProps, setTableProps] = React.useState({
-    isAdd: true,
-    isOpt: true,
-    isOptDelete: true,
-    optIsFirst: false,
-    multiple: true,
-  });
-  const columns = [
-    {
-      title: 'name',
-      dataIndex: 'name',
-      width: '20%',
-      editable: true,
-      type: 'Custom',
-      inputNode: (edit) => {
-        return <Input {...edit} />;
-      },
-    },
-    {
-      title: 'age',
-      dataIndex: 'age',
-      width: '15%',
-      editable: true,
-      type: 'Custom',
-      rules: [{ required: true, message: '请输入' }],
-      inputNode: (edit) => {
-        return <Input {...edit} />;
-      },
-    },
-    {
-      title: 'address',
-      dataIndex: 'address',
-      width: '30%',
-      editable: true,
-      type: 'Input',
-    },
-  ];
-  return (
-    <Card title="允许同时编辑多行">
-      <EditTable
-        initValue={{ address: 2193 }}
-        onValuesChange={(list) => setData(list)}
-        rowKey="key"
-        dataSource={data}
-        columns={columns}
-        onSave={(list) => setData(list)}
-        isAdd={true}
-        {...tableProps}
-      />
-    </Card>
-  );
-};
-export default EditableTable;
diff --git a/examples/antdp-base/src/pages/Components/EditTable/demo5.jsx b/examples/antdp-base/src/pages/Components/EditTable/demo5.jsx
deleted file mode 100644
index ab7271375..000000000
--- a/examples/antdp-base/src/pages/Components/EditTable/demo5.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import { Input, Col, InputNumber, Button, Select, Form, Card } from 'antd';
-import EditTable from '@antdp/edit-table';
-import 'antd/dist/reset.css';
-const originData = [];
-
-for (let i = 0; i < 5; i++) {
-  originData.push({
-    key: i.toString(),
-    name: `Edrward ${i}`,
-    age: 32,
-    // address: `London Park no. ${i}`,
-  });
-}
-
-const EditableTable = () => {
-  const [data, setData] = React.useState(originData);
-  const [tableProps, setTableProps] = React.useState({
-    isOpt: false,
-    isAdd: false,
-  });
-  const columns = [
-    {
-      title: 'name',
-      dataIndex: 'name',
-      width: '20%',
-      editable: true,
-      type: 'Custom',
-      inputNode: (edit) => {
-        return <Input {...edit} />;
-      },
-    },
-    {
-      title: 'age',
-      dataIndex: 'age',
-      width: '15%',
-      editable: true,
-      type: 'Custom',
-      rules: [{ required: true, message: '请输入' }],
-      inputNode: (edit) => {
-        return <Input {...edit} />;
-      },
-    },
-    {
-      title: 'address',
-      dataIndex: 'address',
-      width: '30%',
-      editable: true,
-      type: 'Input',
-    },
-  ];
-  return (
-    <Card title="无新增操作">
-      <EditTable
-        initValue={{ address: 2193 }}
-        onValuesChange={(list) => setData(list)}
-        rowKey="key"
-        dataSource={data}
-        columns={columns}
-        onSave={(list) => setData(list)}
-        isAdd={true}
-        {...tableProps}
-      />
-    </Card>
-  );
-};
-export default EditableTable;
diff --git a/examples/antdp-base/src/pages/Components/EditTable/index.jsx b/examples/antdp-base/src/pages/Components/EditTable/index.jsx
deleted file mode 100644
index a3372b8a3..000000000
--- a/examples/antdp-base/src/pages/Components/EditTable/index.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { Space } from 'antd';
-import CardDes from '@/components/CardDes';
-import Demo1 from './demo1';
-import Demo2 from './demo2';
-import Demo3 from './demo3';
-import Demo4 from './demo4';
-import Demo5 from './demo5';
-
-const Page = () => {
-  return (
-    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-      <CardDes
-        title="编辑表格"
-        description="@antdp/edit-table 多功能编辑表格"
-      />
-      <Demo1 />
-      <div style={{ marginTop: 24 }} />
-      <Demo2 />
-      <div style={{ marginTop: 24 }} />
-      <Demo3 />
-      <div style={{ marginTop: 24 }} />
-      <Demo4 />
-      <div style={{ marginTop: 24 }} />
-      <Demo5 />
-    </Space>
-  );
-};
-export default Page;
diff --git a/examples/antdp-base/src/pages/Components/EditableProTable/demo1.jsx b/examples/antdp-base/src/pages/Components/EditableProTable/demo1.jsx
new file mode 100644
index 000000000..3016792d4
--- /dev/null
+++ b/examples/antdp-base/src/pages/Components/EditableProTable/demo1.jsx
@@ -0,0 +1,200 @@
+import { EditableProTable, ProCard, ProFormField, ProFormRadio } from '@ant-design/pro-components';
+import { Card } from 'antd';
+import { useState } from 'react';
+
+const waitTime = (time = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+const defaultData = [
+  {
+    id: 624748504,
+    title: '活动名称一',
+    readonly: '活动名称一',
+    decs: '这个活动真好玩',
+    state: 'open',
+    created_at: '1590486176000',
+    update_at: '1590486176000',
+  },
+  {
+    id: 624691229,
+    title: '活动名称二',
+    readonly: '活动名称二',
+    decs: '这个活动真好玩',
+    state: 'closed',
+    created_at: '1590481162000',
+    update_at: '1590481162000',
+  },
+];
+
+export default () => {
+  const [editableKeys, setEditableRowKeys] = useState([]);
+  const [dataSource, setDataSource] = useState([]);
+  const [position, setPosition] = useState('bottom');
+
+  const columns = [
+    {
+      title: '活动名称',
+      dataIndex: 'title',
+      tooltip: '只读，使用form.getFieldValue获取不到值',
+      formItemProps: (form, { rowIndex }) => {
+        return {
+          rules: rowIndex > 1 ? [{ required: true, message: '此项为必填项' }] : [],
+        };
+      },
+      // 第一行不允许编辑
+      editable: (text, record, index) => {
+        return index !== 0;
+      },
+      width: '15%',
+    },
+    {
+      title: '活动名称二',
+      dataIndex: 'readonly',
+      tooltip: '只读，使用form.getFieldValue可以获取到值',
+      readonly: true,
+      width: '15%',
+    },
+    {
+      title: '状态',
+      key: 'state',
+      dataIndex: 'state',
+      valueType: 'select',
+      valueEnum: {
+        all: { text: '全部', status: 'Default' },
+        open: {
+          text: '未解决',
+          status: 'Error',
+        },
+        closed: {
+          text: '已解决',
+          status: 'Success',
+        },
+      },
+    },
+    {
+      title: '描述',
+      dataIndex: 'decs',
+      fieldProps: (form, { rowKey, rowIndex }) => {
+        if (form.getFieldValue([rowKey || '', 'title']) === '不好玩') {
+          return {
+            disabled: true,
+          };
+        }
+        if (rowIndex > 9) {
+          return {
+            disabled: true,
+          };
+        }
+        return {};
+      },
+    },
+    {
+      title: '活动时间',
+      dataIndex: 'created_at',
+      valueType: 'date',
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      width: 200,
+      render: (text, record, _, action) => [
+        <a
+          key="editable"
+          onClick={() => {
+            action?.startEditable?.(record.id);
+          }}
+        >
+          编辑
+        </a>,
+        <a
+          key="delete"
+          onClick={() => {
+            setDataSource(dataSource.filter((item) => item.id !== record.id));
+          }}
+        >
+          删除
+        </a>,
+      ],
+    },
+  ];
+
+  return (
+    <Card title="可编辑表格">
+      <EditableProTable
+        rowKey="id"
+        headerTitle="可编辑表格"
+        maxLength={5}
+        scroll={{
+          x: 960,
+        }}
+        recordCreatorProps={
+          position !== 'hidden'
+            ? {
+                position: position,
+                record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
+              }
+            : false
+        }
+        loading={false}
+        toolBarRender={() => [
+          <ProFormRadio.Group
+            key="render"
+            fieldProps={{
+              value: position,
+              onChange: (e) => setPosition(e.target.value),
+            }}
+            options={[
+              {
+                label: '添加到顶部',
+                value: 'top',
+              },
+              {
+                label: '添加到底部',
+                value: 'bottom',
+              },
+              {
+                label: '隐藏',
+                value: 'hidden',
+              },
+            ]}
+          />,
+        ]}
+        columns={columns}
+        request={async () => ({
+          data: defaultData,
+          total: 3,
+          success: true,
+        })}
+        value={dataSource}
+        onChange={setDataSource}
+        editable={{
+          type: 'multiple',
+          editableKeys,
+          onSave: async (rowKey, data, row) => {
+            console.log(rowKey, data, row);
+            await waitTime(2000);
+          },
+          onChange: setEditableRowKeys,
+        }}
+      />
+      <ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
+        <ProFormField
+          ignoreFormItem
+          fieldProps={{
+            style: {
+              width: '100%',
+            },
+          }}
+          mode="read"
+          valueType="jsonCode"
+          text={JSON.stringify(dataSource)}
+        />
+      </ProCard>
+    </Card>
+  );
+};
diff --git a/examples/antdp-base/src/pages/Components/EditableProTable/demo2.jsx b/examples/antdp-base/src/pages/Components/EditableProTable/demo2.jsx
new file mode 100644
index 000000000..7e8f4fb92
--- /dev/null
+++ b/examples/antdp-base/src/pages/Components/EditableProTable/demo2.jsx
@@ -0,0 +1,217 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { EditableProTable, ProCard, ProFormField } from '@ant-design/pro-components';
+import { Button, Card, Form, Input, Space, Tag } from 'antd';
+import { useRef, useState } from 'react';
+
+const waitTime = (time = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+const TagList = ({ value, onChange }) => {
+  const ref = useRef(null);
+  const [newTags, setNewTags] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleInputConfirm = () => {
+    let tempsTags = [...(value || [])];
+    if (inputValue && tempsTags.filter((tag) => tag.label === inputValue).length === 0) {
+      tempsTags = [...tempsTags, { key: `new-${tempsTags.length}`, label: inputValue }];
+    }
+    onChange?.(tempsTags);
+    setNewTags([]);
+    setInputValue('');
+  };
+
+  return (
+    <Space>
+      {(value || []).concat(newTags).map((item) => (
+        <Tag key={item.key}>{item.label}</Tag>
+      ))}
+      <Input
+        ref={ref}
+        type="text"
+        size="small"
+        style={{ width: 78 }}
+        value={inputValue}
+        onChange={handleInputChange}
+        onBlur={handleInputConfirm}
+        onPressEnter={handleInputConfirm}
+      />
+    </Space>
+  );
+};
+
+const defaultData = [
+  {
+    id: 624748504,
+    title: '活动名称一',
+    labels: [{ key: 'woman', label: '川妹子' }],
+    state: 'open',
+    created_at: '1590486176000',
+  },
+  {
+    id: 624691229,
+    title: '活动名称二',
+    labels: [{ key: 'man', label: '西北汉子' }],
+    state: 'closed',
+    created_at: '1590481162000',
+  },
+];
+
+const columns = [
+  {
+    title: '活动名称',
+    dataIndex: 'title',
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '此项为必填项',
+        },
+      ],
+    },
+    width: '30%',
+  },
+  {
+    title: '状态',
+    key: 'state',
+    dataIndex: 'state',
+    valueType: 'select',
+    valueEnum: {
+      all: { text: '全部', status: 'Default' },
+      open: {
+        text: '未解决',
+        status: 'Error',
+      },
+      closed: {
+        text: '已解决',
+        status: 'Success',
+      },
+    },
+  },
+  {
+    title: '标签',
+    dataIndex: 'labels',
+    width: '20%',
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '此项为必填项',
+        },
+      ],
+    },
+    renderFormItem: (_, { isEditable }) => {
+      return isEditable ? <TagList /> : <Input />;
+    },
+    render: (_, row) => row?.labels?.map((item) => <Tag key={item.key}>{item.label}</Tag>),
+  },
+  {
+    title: '操作',
+    valueType: 'option',
+    width: 250,
+    render: (text, record, _, action) => [
+      <a
+        key="editable"
+        onClick={() => {
+          action?.startEditable?.(record.id);
+        }}
+      >
+        编辑
+      </a>,
+      <EditableProTable.RecordCreator
+        key="copy"
+        record={{
+          ...record,
+          id: (Math.random() * 1000000).toFixed(0),
+        }}
+      >
+        <a>复制此行到末尾</a>
+      </EditableProTable.RecordCreator>,
+    ],
+  },
+];
+
+const EditableTable = () => {
+  const actionRef = useRef();
+  const [editableKeys, setEditableRowKeys] = useState([]);
+  const [dataSource, setDataSource] = useState([]);
+  const [form] = Form.useForm();
+  return (
+    <Card title="自定义可编辑表格">
+      <Space>
+        <Button
+          type="primary"
+          onClick={() => {
+            actionRef.current?.addEditRecord?.({
+              id: (Math.random() * 1000000).toFixed(0),
+              title: '新的一行',
+            });
+          }}
+          icon={<PlusOutlined />}
+        >
+          新建一行
+        </Button>
+        <Button
+          key="rest"
+          onClick={() => {
+            form.resetFields();
+          }}
+        >
+          重置表单
+        </Button>
+      </Space>
+
+      <EditableProTable
+        rowKey="id"
+        scroll={{
+          x: 960,
+        }}
+        actionRef={actionRef}
+        headerTitle="可编辑表格"
+        maxLength={5}
+        // 关闭默认的新建按钮
+        recordCreatorProps={false}
+        columns={columns}
+        request={async () => ({
+          data: defaultData,
+          total: 3,
+          success: true,
+        })}
+        value={dataSource}
+        onChange={setDataSource}
+        editable={{
+          form,
+          editableKeys,
+          onSave: async () => {
+            await waitTime(2000);
+          },
+          onChange: setEditableRowKeys,
+          actionRender: (row, config, dom) => [dom.save, dom.cancel],
+        }}
+      />
+      <ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
+        <ProFormField
+          ignoreFormItem
+          fieldProps={{
+            style: {
+              width: '100%',
+            },
+          }}
+          mode="read"
+          valueType="jsonCode"
+          text={JSON.stringify(dataSource)}
+        />
+      </ProCard>
+    </Card>
+  );
+};
+export default EditableTable;
diff --git a/examples/antdp-base/src/pages/Components/EditableProTable/demo3.jsx b/examples/antdp-base/src/pages/Components/EditableProTable/demo3.jsx
new file mode 100644
index 000000000..48b82a953
--- /dev/null
+++ b/examples/antdp-base/src/pages/Components/EditableProTable/demo3.jsx
@@ -0,0 +1,137 @@
+import { EditableProTable, ProCard, ProFormField } from '@ant-design/pro-components';
+import { Button, Card } from 'antd';
+import { useState } from 'react';
+
+const defaultData = new Array(20).fill(1).map((_, index) => {
+  return {
+    id: (Date.now() + index).toString(),
+    title: `活动名称${index}`,
+    decs: '这个活动真好玩',
+    state: 'open',
+    created_at: '1590486176000',
+  };
+});
+
+export default () => {
+  const [editableKeys, setEditableRowKeys] = useState(() => defaultData.map((item) => item.id));
+  const [dataSource, setDataSource] = useState(() => defaultData);
+
+  const columns = [
+    {
+      title: '活动名称',
+      dataIndex: 'title',
+      width: '30%',
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+            whitespace: true,
+            message: '此项是必填项',
+          },
+          {
+            message: '必须包含数字',
+            pattern: /[0-9]/,
+          },
+          {
+            max: 16,
+            whitespace: true,
+            message: '最长为 16 位',
+          },
+          {
+            min: 6,
+            whitespace: true,
+            message: '最小为 6 位',
+          },
+        ],
+      },
+    },
+    {
+      title: '状态',
+      key: 'state',
+      dataIndex: 'state',
+      valueType: 'select',
+      valueEnum: {
+        all: { text: '全部', status: 'Default' },
+        open: {
+          text: '未解决',
+          status: 'Error',
+        },
+        closed: {
+          text: '已解决',
+          status: 'Success',
+        },
+      },
+    },
+    {
+      title: '描述',
+      dataIndex: 'decs',
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      width: 250,
+      render: () => {
+        return null;
+      },
+    },
+  ];
+
+  return (
+    <Card title="实时保存的编辑表格">
+      <EditableProTable
+        headerTitle="可编辑表格"
+        columns={columns}
+        rowKey="id"
+        scroll={{
+          x: 960,
+        }}
+        value={dataSource}
+        onChange={setDataSource}
+        recordCreatorProps={{
+          newRecordType: 'dataSource',
+          record: () => ({
+            id: Date.now(),
+          }),
+        }}
+        toolBarRender={() => {
+          return [
+            <Button
+              type="primary"
+              key="save"
+              onClick={() => {
+                // dataSource 就是当前数据，可以调用 api 将其保存
+                console.log(dataSource);
+              }}
+            >
+              保存数据
+            </Button>,
+          ];
+        }}
+        editable={{
+          type: 'multiple',
+          editableKeys,
+          actionRender: (row, config, defaultDoms) => {
+            return [defaultDoms.delete];
+          },
+          onValuesChange: (record, recordList) => {
+            setDataSource(recordList);
+          },
+          onChange: setEditableRowKeys,
+        }}
+      />
+      <ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
+        <ProFormField
+          ignoreFormItem
+          fieldProps={{
+            style: {
+              width: '100%',
+            },
+          }}
+          mode="read"
+          valueType="jsonCode"
+          text={JSON.stringify(dataSource)}
+        />
+      </ProCard>
+    </Card>
+  );
+};
diff --git a/examples/antdp-base/src/pages/Components/EditableProTable/demo4.jsx b/examples/antdp-base/src/pages/Components/EditableProTable/demo4.jsx
new file mode 100644
index 000000000..05cc93215
--- /dev/null
+++ b/examples/antdp-base/src/pages/Components/EditableProTable/demo4.jsx
@@ -0,0 +1,236 @@
+import {
+  EditableProTable,
+  ProCard,
+  ProForm,
+  ProFormDependency,
+  ProFormDigit,
+} from '@ant-design/pro-components';
+import { useRef, useState } from 'react';
+
+const defaultData = [
+  {
+    id: 624748504,
+    associate: '题库名称一',
+    questionsNum: 10,
+    type: 'multiple',
+    scoringMethod: 'continuous',
+    fraction: 20,
+  },
+  {
+    id: 624691229,
+    associate: '题库名称二',
+    questionsNum: 10,
+    scoringMethod: 'continuous',
+    type: 'radio',
+    fraction: 20,
+  },
+  {
+    id: 624748503,
+    associate: '题库名称三',
+    questionsNum: 10,
+    type: 'judge',
+    scoringMethod: 'continuous',
+    fraction: 20,
+  },
+  {
+    id: 624691220,
+    associate: '题库名称四',
+    questionsNum: 10,
+    scoringMethod: 'continuous',
+    type: 'vacant',
+    fraction: 20,
+  },
+];
+
+export default () => {
+  const [editableKeys, setEditableRowKeys] = useState(() => []);
+  const formRef = useRef();
+  const actionRef = useRef();
+  const editableFormRef = useRef();
+  const columns = [
+    {
+      title: '关联题库',
+      dataIndex: 'associate',
+      valueType: 'text',
+      ellipsis: true,
+    },
+    {
+      title: '题型',
+      key: 'type',
+      dataIndex: 'type',
+      valueType: 'select',
+      valueEnum: {
+        multiple: { text: '多选题', status: 'Default' },
+        radio: { text: '单选题', status: 'Warning' },
+        vacant: {
+          text: '填空题',
+          status: 'Error',
+        },
+        judge: {
+          text: '判断题',
+          status: 'Success',
+        },
+      },
+    },
+    {
+      title: '题数',
+      dataIndex: 'questionsNum',
+      valueType: 'digit',
+    },
+    {
+      title: '计分方式',
+      dataIndex: 'scoringMethod',
+      valueType: 'select',
+      request: async () => [
+        {
+          value: 'discrete',
+          label: '离散型',
+        },
+        {
+          value: 'continuous',
+          label: '连续型',
+        },
+      ],
+      fieldProps: (_, { rowIndex }) => {
+        return {
+          onSelect: () => {
+            // 每次选中重置参数
+            editableFormRef.current?.setRowData?.(rowIndex, { fraction: [] });
+          },
+        };
+      },
+    },
+    {
+      title: '分值',
+      width: 150,
+      dataIndex: 'fraction',
+      valueType: (record) => {
+        const scoringMethod = record?.scoringMethod;
+        if (scoringMethod === 'discrete') return 'select';
+        return 'digit';
+      },
+      fieldProps: {
+        mode: 'multiple',
+      },
+      request: async () =>
+        ['A', 'B', 'D', 'E', 'F'].map((item, index) => ({
+          label: item,
+          value: index,
+        })),
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      render: (_, row) => [
+        <a
+          key="delete"
+          onClick={() => {
+            const tableDataSource = formRef.current?.getFieldValue('table');
+            formRef.current?.setFieldsValue({
+              table: tableDataSource.filter((item) => item.id !== row?.id),
+            });
+          }}
+        >
+          移除
+        </a>,
+        <a
+          key="edit"
+          onClick={() => {
+            actionRef.current?.startEditable(row.id);
+          }}
+        >
+          编辑
+        </a>,
+      ],
+    },
+  ];
+
+  return (
+    <ProCard title="与编辑表格外的内容联动">
+      <div
+        style={{
+          maxWidth: 800,
+          margin: 'auto',
+        }}
+      >
+        <ProForm
+          formRef={formRef}
+          initialValues={{
+            table: defaultData,
+          }}
+        >
+          <ProFormDependency name={['table']}>
+            {({ table }) => {
+              const info = table.reduce(
+                (pre, item) => {
+                  return {
+                    totalScore: pre.totalScore + parseInt((item?.fraction || 0).toString(), 10),
+                    questions: pre.questions + parseInt((item?.questionsNum || 0).toString(), 10),
+                  };
+                },
+                { totalScore: 0, questions: 0 },
+              );
+              return (
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 16,
+                    paddingBlockEnd: 16,
+                  }}
+                >
+                  <div style={{ flex: 1 }}>总分：{info.totalScore}</div>
+                  <div style={{ flex: 1 }}>题数：{info.questions}</div>
+                  <div style={{ flex: 2 }}>
+                    <ProFormDigit label="及格分" />
+                  </div>
+                  <div style={{ flex: 2 }}>
+                    <ProFormDigit label="考试时间(分钟)" />
+                  </div>
+                </div>
+              );
+            }}
+          </ProFormDependency>
+          <EditableProTable
+            rowKey="id"
+            scroll={{
+              x: true,
+            }}
+            editableFormRef={editableFormRef}
+            controlled
+            actionRef={actionRef}
+            formItemProps={{
+              label: '题库编辑',
+              rules: [
+                {
+                  validator: async (_, value) => {
+                    if (value.length < 1) {
+                      throw new Error('请至少添加一个题库');
+                    }
+
+                    if (value.length > 5) {
+                      throw new Error('最多可以设置五个题库');
+                    }
+                  },
+                },
+              ],
+            }}
+            maxLength={10}
+            name="table"
+            columns={columns}
+            recordCreatorProps={{
+              record: (index) => {
+                return { id: index + 1 };
+              },
+            }}
+            editable={{
+              type: 'multiple',
+              editableKeys,
+              onChange: setEditableRowKeys,
+            }}
+          />
+        </ProForm>
+      </div>
+    </ProCard>
+  );
+};
diff --git a/examples/antdp-base/src/pages/Components/EditableProTable/index.jsx b/examples/antdp-base/src/pages/Components/EditableProTable/index.jsx
new file mode 100644
index 000000000..6a6c132ed
--- /dev/null
+++ b/examples/antdp-base/src/pages/Components/EditableProTable/index.jsx
@@ -0,0 +1,22 @@
+import CardDes from '@/components/CardDes';
+import { Space } from 'antd';
+import Demo1 from './demo1';
+import Demo2 from './demo2';
+import Demo3 from './demo3';
+import Demo4 from './demo4';
+
+const Page = () => {
+  return (
+    <Space direction="vertical" style={{ display: 'flex', width: '100%' }}>
+      <CardDes
+        title="EditableProTable"
+        description="EditableProTable 可编辑表格 EditableProTable 与 ProTable 的功能基本相同，为了方便使用 EditableProTable 增加了一些预设，关掉了查询表单和操作栏，同时修改了 value 和 onChange 使其可以方便的继承到 antd 的 Form 中"
+      />
+      <Demo1 />
+      <Demo2 />
+      <Demo3 />
+      <Demo4 />
+    </Space>
+  );
+};
+export default Page;
diff --git a/examples/antdp-base/src/pages/Components/FormDetail/index.jsx b/examples/antdp-base/src/pages/Components/FormDetail/index.jsx
deleted file mode 100644
index 6c032980e..000000000
--- a/examples/antdp-base/src/pages/Components/FormDetail/index.jsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { FormDetail } from '@antdp/antdp-ui';
-import { Card, Space, Table, Steps } from 'antd';
-import CardDes from '@/components/CardDes';
-import 'antd/dist/reset.css';
-import { useMemo } from 'react';
-import { detailItems, userItems } from './item';
-
-const Page = () => {
-  const columns = [
-    {
-      title: '姓名',
-      dataIndex: 'name',
-      filters: [
-        {
-          text: 'Joe',
-          value: 'Joe',
-        },
-        {
-          text: 'Jim',
-          value: 'Jim',
-        },
-        {
-          text: 'Submenu',
-          value: 'Submenu',
-          children: [
-            {
-              text: 'Green',
-              value: 'Green',
-            },
-            {
-              text: 'Black',
-              value: 'Black',
-            },
-          ],
-        },
-      ],
-      onFilter: (value, record) => record.name.indexOf(value) === 0,
-      sorter: (a, b) => a.name.length - b.name.length,
-      sortDirections: ['descend'],
-    },
-    {
-      title: '年龄',
-      dataIndex: 'age',
-      defaultSortOrder: 'descend',
-      sorter: (a, b) => a.age - b.age,
-    },
-    {
-      title: '地址',
-      dataIndex: 'address',
-      filters: [
-        {
-          text: 'London',
-          value: 'London',
-        },
-        {
-          text: 'New York',
-          value: 'New York',
-        },
-      ],
-      onFilter: (value, record) => record.address.indexOf(value) === 0,
-    },
-  ];
-  const tableData = [
-    {
-      key: '1',
-      name: 'John Brown',
-      age: 32,
-      address: 'New York No. 1 Lake Park',
-    },
-    {
-      key: '2',
-      name: 'Jim Green',
-      age: 42,
-      address: 'London No. 1 Lake Park',
-    },
-    {
-      key: '3',
-      name: 'Joe Black',
-      age: 32,
-      address: 'Sydney No. 1 Lake Park',
-    },
-    {
-      key: '4',
-      name: 'Jim Red',
-      age: 32,
-      address: 'London No. 2 Lake Park',
-    },
-  ];
-
-  const description = 'antdp 超好用.';
-
-  return (
-    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-      <CardDes
-        title="详情表单"
-        description="@antdp/antdp-ui 超快速生成详情表单"
-      />
-      <Card>
-        <FormDetail isView={true} header="仓库管理" formDatas={detailItems} />
-      </Card>
-      <Card>
-        <FormDetail isView={true} header="任务管理" formDatas={userItems} />
-      </Card>
-      <Card>
-        <h3>用户列表</h3>
-        <Table columns={columns} dataSource={tableData} />
-      </Card>
-      <Card>
-        <h3>任务进度</h3>
-        <Steps
-          current={1}
-          items={[
-            {
-              title: '完成',
-              description,
-            },
-            {
-              title: '进行中',
-              description,
-              subTitle: '00:00:08',
-            },
-            {
-              title: '结束',
-              description,
-            },
-          ]}
-        />
-      </Card>
-    </Space>
-  );
-};
-export default Page;
diff --git a/examples/antdp-base/src/pages/Components/ProDescriptions/index.jsx b/examples/antdp-base/src/pages/Components/ProDescriptions/index.jsx
new file mode 100644
index 000000000..a3f90d8fe
--- /dev/null
+++ b/examples/antdp-base/src/pages/Components/ProDescriptions/index.jsx
@@ -0,0 +1,209 @@
+import CardDes from '@/components/CardDes';
+import { ProDescriptions } from '@ant-design/pro-components';
+import { Card, Space } from 'antd';
+import 'antd/dist/reset.css';
+
+const Page = () => {
+  return (
+    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+      <CardDes
+        title="ProDescriptions"
+        description="ProDescriptions 高级描述列表组件，提供一个更加方便快速的方案来构建描述列表"
+      />
+      <Card>
+        <ProDescriptions
+          title="用户信息"
+          request={async () => {
+            return Promise.resolve({
+              success: true,
+              data: {
+                id: '这是一段文本columns',
+                date: '20200809',
+                money: '1212100',
+                money2: -12345.33,
+                state: 'all',
+                switch: true,
+                state2: 'open',
+              },
+            });
+          }}
+          columns={[
+            {
+              title: '文本',
+              key: 'text',
+              dataIndex: 'id',
+            },
+            {
+              title: '状态',
+              key: 'state',
+              dataIndex: 'state',
+              valueType: 'select',
+              valueEnum: {
+                all: { text: '全部', status: 'Default' },
+                open: {
+                  text: '未解决',
+                  status: 'Error',
+                },
+                closed: {
+                  text: '已解决',
+                  status: 'Success',
+                },
+              },
+            },
+            {
+              title: '状态2',
+              key: 'state2',
+              dataIndex: 'state2',
+            },
+            {
+              title: '时间',
+              key: 'date',
+              dataIndex: 'date',
+              valueType: 'date',
+            },
+            {
+              title: '时间',
+              key: 'date',
+              dataIndex: 'date',
+              valueType: 'date',
+              fieldProps: {
+                format: 'DD.MM.YYYY',
+              },
+            },
+            {
+              title: '开关',
+              key: 'switch',
+              dataIndex: 'switch',
+              valueType: 'switch',
+            },
+            {
+              title: 'money',
+              key: 'money',
+              dataIndex: 'money',
+              valueType: 'money',
+              fieldProps: {
+                moneySymbol: '$',
+              },
+            },
+            {
+              title: 'money无符号',
+              key: 'money',
+              dataIndex: 'money',
+              valueType: 'money',
+              fieldProps: {
+                moneySymbol: false,
+              },
+            },
+            {
+              title: 'money负数无符号',
+              key: 'money2',
+              dataIndex: 'money2',
+              valueType: 'money',
+              fieldProps: {
+                moneySymbol: false,
+              },
+            },
+          ]}
+        />
+      </Card>
+
+      <Card>
+        <ProDescriptions
+          title="客户信息"
+          request={async () => {
+            return Promise.resolve({
+              success: true,
+              data: {
+                id: '这是一段文本columns',
+                date: '20200809',
+                money: '1212100',
+                money2: -12345.33,
+                state: 'all',
+                switch: true,
+                state2: 'open',
+              },
+            });
+          }}
+          columns={[
+            {
+              title: '文本',
+              key: 'text',
+              dataIndex: 'id',
+            },
+            {
+              title: '状态',
+              key: 'state',
+              dataIndex: 'state',
+              valueType: 'select',
+              valueEnum: {
+                all: { text: '全部', status: 'Default' },
+                open: {
+                  text: '未解决',
+                  status: 'Error',
+                },
+                closed: {
+                  text: '已解决',
+                  status: 'Success',
+                },
+              },
+            },
+            {
+              title: '状态2',
+              key: 'state2',
+              dataIndex: 'state2',
+            },
+            {
+              title: '时间',
+              key: 'date',
+              dataIndex: 'date',
+              valueType: 'date',
+            },
+            {
+              title: '时间',
+              key: 'date',
+              dataIndex: 'date',
+              valueType: 'date',
+              fieldProps: {
+                format: 'DD.MM.YYYY',
+              },
+            },
+            {
+              title: '开关',
+              key: 'switch',
+              dataIndex: 'switch',
+              valueType: 'switch',
+            },
+            {
+              title: 'money',
+              key: 'money',
+              dataIndex: 'money',
+              valueType: 'money',
+              fieldProps: {
+                moneySymbol: '$',
+              },
+            },
+            {
+              title: 'money无符号',
+              key: 'money',
+              dataIndex: 'money',
+              valueType: 'money',
+              fieldProps: {
+                moneySymbol: false,
+              },
+            },
+            {
+              title: 'money负数无符号',
+              key: 'money2',
+              dataIndex: 'money2',
+              valueType: 'money',
+              fieldProps: {
+                moneySymbol: false,
+              },
+            },
+          ]}
+        />
+      </Card>
+    </Space>
+  );
+};
+export default Page;
diff --git a/examples/antdp-base/src/pages/Components/FormDetail/item.js b/examples/antdp-base/src/pages/Components/ProDescriptions/item.js
similarity index 100%
rename from examples/antdp-base/src/pages/Components/FormDetail/item.js
rename to examples/antdp-base/src/pages/Components/ProDescriptions/item.js
diff --git a/examples/antdp-base/src/pages/Components/QuickForm/index.jsx b/examples/antdp-base/src/pages/Components/QuickForm/index.jsx
index fab2678b2..b163c3ab8 100644
--- a/examples/antdp-base/src/pages/Components/QuickForm/index.jsx
+++ b/examples/antdp-base/src/pages/Components/QuickForm/index.jsx
@@ -1,9 +1,8 @@
-import { useState } from 'react';
-import { QuickForm, ButtonGroupPro } from '@antdp/antdp-ui';
-import { Card, Space } from 'antd';
 import CardDes from '@/components/CardDes';
+import { ButtonGroupPro, QuickForm } from '@antdp/antdp-ui';
+import { Card, Space } from 'antd';
 import 'antd/dist/reset.css';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { detailItems } from './item';
 
 const Page = () => {
@@ -18,7 +17,10 @@ const Page = () => {
 
   return (
     <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-      <CardDes title="快速表单" description="@antdp/antdp-ui 超快速生成表单" />
+      <CardDes
+        title="快速表单"
+        description="@antdp/antdp-ui 我们自己封装的业务表单控件，可超快速生成表单"
+      />
       <Card>
         <QuickForm header="表单一" formDatas={data} />
         <QuickForm header="表单二" formDatas={data} />
diff --git a/examples/antdp-base/src/pages/Demo/index.jsx b/examples/antdp-base/src/pages/Demo/index.jsx
index d52266881..b050145a2 100644
--- a/examples/antdp-base/src/pages/Demo/index.jsx
+++ b/examples/antdp-base/src/pages/Demo/index.jsx
@@ -1,34 +1,31 @@
-import { ButtonGroupPro, FormDetail } from '@antdp/antdp-ui';
-import { useModel } from '@umijs/max';
-import { Drawer } from 'antd';
-import 'antd/dist/reset.css';
-import { useMemo } from 'react';
-import { detailItems } from './item';
-import { ProTable } from '@ant-design/pro-components';
-import { columns } from './item';
 import { selectPage } from '@/services/api';
+import { BetaSchemaForm, ProTable } from '@ant-design/pro-components';
+import { Button } from 'antd';
+import 'antd/dist/reset.css';
+import { columns, schema } from './item';
 
-const Demo = () => {
-  const {
-    drawerVisible,
-    setTrue,
-    setFalse,
-    queryInfo,
-    setInfo,
-    isView,
-    setIsView,
-  } = useModel('demo', (model) => ({
-    ...model,
-  }));
-
-  const data = useMemo(() => {
-    return detailItems({
-      isView,
-      queryInfo,
-      setInfo,
-    });
-  }, [isView, queryInfo, setInfo]);
+const Edit = ({ queryData, label }) => {
+  return (
+    <BetaSchemaForm
+      title={label}
+      trigger={label === '新增' ? <Button type="primary">{label}</Button> : <a>{label}</a>}
+      modalProps={{
+        destroyOnClose: true,
+      }}
+      layoutType="ModalForm"
+      onFinish={async (values) => {
+        console.log(values);
+      }}
+      colProps={{
+        span: 12,
+      }}
+      grid={true}
+      columns={schema({ queryData })}
+    />
+  );
+};
 
+const Demo = () => {
   return (
     <div>
       <ProTable
@@ -37,42 +34,7 @@ const Demo = () => {
         search={{
           labelWidth: 'auto',
         }}
-        toolBarRender={() => (
-          <ButtonGroupPro
-            button={[
-              {
-                type: 'primary',
-                label: '新增',
-                onClick: () => {
-                  setTrue();
-                  setIsView(false);
-                },
-                path: '/demo/add1',
-              },
-              {
-                type: 'primary',
-                label: '详情',
-                onClick: () => {
-                  setTrue();
-                  setIsView(true);
-                },
-                path: '/demo/add2',
-              },
-              {
-                label: 'Menu',
-                type: 'primary',
-                menu: [
-                  {
-                    key: '1',
-                    label: '新增',
-                    onClick: () => {},
-                    path: '/demo/add3',
-                  },
-                ],
-              },
-            ]}
-          />
-        )}
+        toolBarRender={() => <Edit queryData={{}} label="新增" />}
         request={async (params = {}) => {
           const { code, data } = await selectPage(params);
           if (code && code === 200) {
@@ -93,18 +55,9 @@ const Demo = () => {
           },
         }}
         cardBordered
-        columns={columns}
+        columns={columns({ edit: <Edit /> })}
         rowKey="id"
       />
-      <Drawer
-        title="详情"
-        width={800}
-        closable={true}
-        onClose={() => setFalse()}
-        open={drawerVisible}
-      >
-        <FormDetail isView={isView} formDatas={data} />
-      </Drawer>
     </div>
   );
 };
diff --git a/examples/antdp-base/src/pages/Demo/item.jsx b/examples/antdp-base/src/pages/Demo/item.jsx
index b0705a8e8..b5343e4e0 100644
--- a/examples/antdp-base/src/pages/Demo/item.jsx
+++ b/examples/antdp-base/src/pages/Demo/item.jsx
@@ -1,17 +1,7 @@
-import moment from 'moment';
+import { DatePicker } from 'antd';
+import React from 'react';
 
-export const columns = [
-  {
-    title: '序号',
-    dataIndex: 'number',
-    fixed: 'left',
-    width: 90,
-    align: 'center',
-    hideInSearch: true,
-    render: (text, record, index) => {
-      return index + 1;
-    },
-  },
+export const columns = ({ edit }) => [
   {
     title: '姓名',
     dataIndex: 'name',
@@ -20,7 +10,7 @@ export const columns = [
   },
   {
     title: '年龄',
-    dataIndex: 'title',
+    dataIndex: 'age',
     align: 'center',
     width: 90,
   },
@@ -30,89 +20,141 @@ export const columns = [
     align: 'center',
     width: 90,
   },
+  {
+    title: '操作',
+    align: 'center',
+    width: 90,
+    render: (_, record) => {
+      return (
+        <span>
+          {React.cloneElement(edit, {
+            queryData: { ...record },
+            label: '编辑',
+          })}
+        </span>
+      );
+    },
+  },
 ];
 
-export const detailItems = ({ isView, queryInfo, setInfo }) => [
-  {
-    label: '备注',
-    name: 'remark',
-    type: 'input',
-    initialValue: 'zz爱ff',
+const valueEnum = {
+  all: { text: '全部', status: 'Default' },
+  open: {
+    text: '未解决',
+    status: 'Error',
   },
-  {
-    label: '水果',
-    name: 'fruit',
-    type: 'select',
-    options: [{ label: '苹果', value: 1 }],
-    initialValue: 1,
+  closed: {
+    text: '已解决',
+    status: 'Success',
+    disabled: true,
   },
+  processing: {
+    text: '解决中',
+    status: 'Processing',
+  },
+};
+
+export const schema = ({ queryData }) => [
   {
-    label: '城市',
-    name: 'citys',
-    type: 'treeSelect',
-    attributes: {
-      treeData: [
-        { label: '上海', value: 1, children: [{ label: '黄浦区', value: 11 }] },
-        { label: '北京', value: 2, children: [{ label: '西城区', value: 21 }] },
+    title: '姓名',
+    dataIndex: 'name',
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '此项为必填项',
+        },
       ],
-      allowClear: true,
-      dropdownStyle: { maxHeight: 400, overflow: 'auto' },
     },
-    initialValue: 21,
+    initialValue: queryData.name || '',
   },
   {
-    label: '蔬菜',
-    name: 'fruits',
-    type: 'radio',
-    options: [
-      { label: '青菜', value: 1 },
-      { label: '黄瓜', value: 2 },
-    ],
-    initialValue: 2,
+    title: '年龄',
+    dataIndex: 'age',
+    initialValue: queryData.age || '',
   },
   {
-    label: '蔬菜',
-    name: 'id',
-    type: 'checkbox',
-    options: [
-      { label: '黄瓜', value: 2 },
-      { label: '番茄', value: 3 },
-    ],
-    initialValue: [2, 3],
+    title: '状态',
+    dataIndex: 'state',
+    valueType: 'select',
+    valueEnum,
   },
   {
-    label: '上报时间',
-    name: 'time',
-    type: 'datePicker',
-    initialValue: moment(),
+    valueType: 'switch',
+    title: '开关',
+    dataIndex: 'Switch',
+    fieldProps: {
+      style: {
+        width: '200px',
+      },
+    },
   },
   {
-    label: '照片',
-    name: 'picture',
-    type: 'UploadGrid',
-    full: true,
-    onlyimg: true,
-    attributes: {
-      fileList: queryInfo?.fileList,
-      onChange: ({ fileList }) => setInfo({ ...queryInfo, fileList: fileList }),
-      onDownload: (file) => {
-        console.log('file', file);
-      },
-      action: '',
-      listType: 'picture-card',
-      showDownloadIcon: isView,
-      showRemoveIcon: !isView,
-      showPreviewIcon: true,
-      maxCount: 1,
+    title: '创建时间',
+    key: 'showTime',
+    colProps: {
+      span: 8,
+    },
+    dataIndex: 'createName',
+    renderFormItem: () => <DatePicker.RangePicker />,
+  },
+  {
+    title: '更新时间',
+    colProps: {
+      span: 8,
+    },
+    dataIndex: 'updateName',
+    renderFormItem: () => <DatePicker.RangePicker />,
+  },
+  {
+    title: '购买时间',
+    colProps: {
+      span: 8,
+    },
+    dataIndex: 'created_at',
+    valueType: 'dateRange',
+    transform: (value) => {
+      return {
+        startTime: value[0],
+        endTime: value[1],
+      };
     },
   },
   {
-    label: '验证码',
-    name: 'time2',
-    type: 'inputCount',
-    attributes: {
-      onChange: (e) => setInfo({ ...queryInfo, time2: e }),
+    title: '列表',
+    valueType: 'formList',
+    dataIndex: 'list',
+    colProps: {
+      span: 24,
     },
-    initialValue: queryInfo?.time2,
+    columns: [
+      {
+        title: '状态',
+        dataIndex: 'state',
+        valueType: 'select',
+        valueEnum,
+        formItemProps: {
+          rules: [
+            {
+              required: true,
+              message: '此项为必填项',
+            },
+          ],
+        },
+      },
+      {
+        title: '日期',
+        valueType: 'dateTime',
+        dataIndex: 'currentTime',
+        formItemProps: {
+          rules: [
+            {
+              required: true,
+              message: '此项为必填项',
+            },
+          ],
+        },
+      },
+    ],
   },
 ];
diff --git a/examples/antdp-base/src/pages/Demo/models/demo.js b/examples/antdp-base/src/pages/Demo/models/demo.js
new file mode 100644
index 000000000..88abde7af
--- /dev/null
+++ b/examples/antdp-base/src/pages/Demo/models/demo.js
@@ -0,0 +1,11 @@
+export default {
+  namespace: 'demo',
+  state: {},
+  reducers: {
+    update: (state, { payload }) => ({
+      ...state,
+      ...payload,
+    }),
+  },
+  effects: {},
+};
diff --git a/examples/antdp-base/src/pages/Detail/AdvancedDetails/index.jsx b/examples/antdp-base/src/pages/Detail/AdvancedDetails/index.jsx
index 38eacafa3..c3873bdd5 100644
--- a/examples/antdp-base/src/pages/Detail/AdvancedDetails/index.jsx
+++ b/examples/antdp-base/src/pages/Detail/AdvancedDetails/index.jsx
@@ -1,19 +1,8 @@
-import { FormDetail } from '@antdp/antdp-ui';
-import {
-  Card,
-  Space,
-  Table,
-  Steps,
-  Row,
-  Col,
-  Radio,
-  Popover,
-  Empty,
-  Tabs,
-} from 'antd';
 import CardDes from '@/components/CardDes';
+import { ProDescriptions } from '@ant-design/pro-components';
+import { Card, Col, Empty, Popover, Row, Space, Steps, Table, Tabs } from 'antd';
 import 'antd/dist/reset.css';
-import { detailItems, userItems, columns1, data1 } from './item';
+import { columns1, columns2, data1 } from './item';
 
 const Page = () => {
   const customDot = (dot, { status, index }) => (
@@ -29,12 +18,7 @@ const Page = () => {
   );
 
   const tables = (
-    <Table
-      columns={columns1}
-      dataSource={data1}
-      bordered={false}
-      pagination={false}
-    />
+    <Table columns={columns1} dataSource={data1} bordered={false} pagination={false} />
   );
 
   const items = [
@@ -56,44 +40,26 @@ const Page = () => {
   ];
   return (
     <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-      <CardDes
-        title="高级详情页"
-        description="@antdp/antdp-ui 超快速生成详情表单"
-      />
+      <CardDes title="高级详情页" description="@antdp/antdp-ui 超快速生成详情表单" />
       <Card>
-        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-          <div style={{ width: '80%' }}>
-            <FormDetail
-              isView={true}
-              header="单号：234231029431"
-              formDatas={detailItems}
-            />
-          </div>
-          <div style={{ width: '20%', textAlign: 'right' }}>
-            <div style={{ textAlign: 'right' }}>
-              <Radio.Group
-                value="top"
-                style={{
-                  marginBottom: 8,
-                }}
-              >
-                <Radio.Button>操作一</Radio.Button>
-                <Radio.Button>操作二</Radio.Button>
-                <Radio.Button>操作三</Radio.Button>
-              </Radio.Group>
-            </div>
-            <Row>
-              <Col style={{ marginRight: 12, textAlign: 'center' }}>
-                <div>状态</div>
-                <div style={{ fontSize: 24 }}>待审批</div>
-              </Col>
-              <Col style={{ textAlign: 'center' }}>
-                <div>订单金额</div>
-                <div style={{ fontSize: 24 }}>¥568.08</div>
-              </Col>
-            </Row>
-          </div>
-        </div>
+        <ProDescriptions
+          title="用户信息"
+          request={async () => {
+            return Promise.resolve({
+              success: true,
+              data: {
+                id: '这是一段文本columns',
+                date: '20200809',
+                money: '1212100',
+                money2: -12345.33,
+                state: 'all',
+                switch: true,
+                state2: 'open',
+              },
+            });
+          }}
+          columns={columns2}
+        />
       </Card>
       <Card title="流程进度">
         <Row style={{ padding: 20 }}>
@@ -123,12 +89,79 @@ const Page = () => {
         />
       </Card>
       <Card title="用户信息">
-        <FormDetail isView={true} formDatas={userItems} />
-        <h4>信息组</h4>
+        <ProDescriptions
+          title="基础信息"
+          request={async () => {
+            return Promise.resolve({
+              success: true,
+              data: {
+                id: '这是一段文本columns',
+                date: '20200809',
+                money: '1212100',
+                money2: -12345.33,
+                state: 'all',
+                switch: true,
+                state2: 'open',
+              },
+            });
+          }}
+          columns={columns2}
+        />
         <Card type="inner" title="多层级信息组" bordered={false}>
-          <FormDetail isView={true} header="组名称" formDatas={userItems} />
-          <FormDetail isView={true} header="组名称" formDatas={userItems} />
-          <FormDetail isView={true} header="组名称" formDatas={userItems} />
+          <ProDescriptions
+            title="嵌套信息1"
+            request={async () => {
+              return Promise.resolve({
+                success: true,
+                data: {
+                  id: '这是一段文本columns',
+                  date: '20200809',
+                  money: '1212100',
+                  money2: -12345.33,
+                  state: 'all',
+                  switch: true,
+                  state2: 'open',
+                },
+              });
+            }}
+            columns={columns2}
+          />
+          <ProDescriptions
+            title="嵌套信息2"
+            request={async () => {
+              return Promise.resolve({
+                success: true,
+                data: {
+                  id: '这是一段文本columns',
+                  date: '20200809',
+                  money: '1212100',
+                  money2: -12345.33,
+                  state: 'all',
+                  switch: true,
+                  state2: 'open',
+                },
+              });
+            }}
+            columns={columns2}
+          />
+          <ProDescriptions
+            title="嵌套信息3"
+            request={async () => {
+              return Promise.resolve({
+                success: true,
+                data: {
+                  id: '这是一段文本columns',
+                  date: '20200809',
+                  money: '1212100',
+                  money2: -12345.33,
+                  state: 'all',
+                  switch: true,
+                  state2: 'open',
+                },
+              });
+            }}
+            columns={columns2}
+          />
         </Card>
       </Card>
       <Card title="用户近半年来电记录">
diff --git a/examples/antdp-base/src/pages/Detail/AdvancedDetails/item.js b/examples/antdp-base/src/pages/Detail/AdvancedDetails/item.js
index ac22e0db9..1c923d351 100644
--- a/examples/antdp-base/src/pages/Detail/AdvancedDetails/item.js
+++ b/examples/antdp-base/src/pages/Detail/AdvancedDetails/item.js
@@ -1,140 +1,4 @@
 import { Badge } from 'antd';
-
-export const detailItems = [
-  {
-    label: '创建人',
-    name: 'remark',
-    type: 'input',
-    initialValue: 'uiw',
-  },
-  {
-    label: '订购产品',
-    name: 'remark',
-    type: 'input',
-    initialValue: 'XX 服务',
-  },
-  {
-    label: '创建时间',
-    name: 'remark',
-    type: 'input',
-    initialValue: '2017-07-07',
-  },
-  {
-    label: '关联单据',
-    name: 'remark',
-    type: 'input',
-    initialValue: '12421',
-  },
-  {
-    label: '生效日期',
-    name: 'remark',
-    type: 'input',
-    initialValue: '2017-07-07 ~ 2017-08-08',
-  },
-  {
-    label: '备注',
-    name: 'remark',
-    type: 'input',
-    initialValue: '请于两个工作日内确认',
-  },
-];
-
-export const userItems = [
-  {
-    label: '用户姓名',
-    name: 'remark',
-    type: 'input',
-    initialValue: 'uiw',
-  },
-  {
-    label: '联系电话',
-    name: 'remark',
-    type: 'input',
-    initialValue: '18888888888',
-  },
-  {
-    label: '常用快递',
-    name: 'remark',
-    type: 'input',
-    initialValue: 'nihao',
-  },
-  {
-    label: '取货地址',
-    name: 'remark',
-    type: 'input',
-    initialValue: 'xx',
-  },
-  {
-    label: '备注',
-    name: 'remark',
-    type: 'input',
-    initialValue: '无',
-  },
-];
-
-export const columns = [
-  {
-    title: '商品编号',
-    dataIndex: 'key',
-  },
-  {
-    title: '商品名称',
-    dataIndex: 'name',
-  },
-  {
-    title: '商品条码',
-    dataIndex: 'barCode',
-  },
-  {
-    title: '单价',
-    dataIndex: 'price',
-  },
-  {
-    title: '数量（件）',
-    className: 'num',
-    dataIndex: 'num',
-  },
-  {
-    title: '金额',
-    dataIndex: 'money',
-    align: 'right',
-  },
-];
-export const data = [
-  {
-    key: '1234561',
-    name: '矿泉水 550ml',
-    barCode: '12421432143214321',
-    price: '2.00	',
-    num: '1',
-    money: '￥2.00',
-  },
-  {
-    key: '1234562',
-    name: '凉茶 300ml',
-    barCode: '12421432143214322',
-    price: '3.00',
-    num: '2',
-    money: '￥6.00',
-  },
-  {
-    key: '1234563',
-    name: '好吃的薯片',
-    barCode: '12421432143214323',
-    price: '7.00	',
-    num: '4',
-    money: '￥28.00',
-  },
-  {
-    key: '1234564',
-    name: '特别好吃的蛋卷',
-    barCode: '12421432143214324',
-    price: '8.50	',
-    num: '3',
-    money: '￥25.50',
-  },
-];
-
 export const columns1 = [
   {
     title: '时间',
@@ -147,9 +11,7 @@ export const columns1 = [
   {
     title: '状态',
     dataIndex: 'barCode',
-    render: (text) => (
-      <Badge status={text === '成功' ? 'success' : 'processing'} text={text} />
-    ),
+    render: (text) => <Badge status={text === '成功' ? 'success' : 'processing'} text={text} />,
   },
   {
     title: '操作员ID',
@@ -198,3 +60,81 @@ export const data1 = [
     num: '5mins',
   },
 ];
+
+export const columns2 = [
+  {
+    title: '文本',
+    key: 'text',
+    dataIndex: 'id',
+  },
+  {
+    title: '状态',
+    key: 'state',
+    dataIndex: 'state',
+    valueType: 'select',
+    valueEnum: {
+      all: { text: '全部', status: 'Default' },
+      open: {
+        text: '未解决',
+        status: 'Error',
+      },
+      closed: {
+        text: '已解决',
+        status: 'Success',
+      },
+    },
+  },
+  {
+    title: '状态2',
+    key: 'state2',
+    dataIndex: 'state2',
+  },
+  {
+    title: '时间',
+    key: 'date',
+    dataIndex: 'date',
+    valueType: 'date',
+  },
+  {
+    title: '时间',
+    key: 'date',
+    dataIndex: 'date',
+    valueType: 'date',
+    fieldProps: {
+      format: 'DD.MM.YYYY',
+    },
+  },
+  {
+    title: '开关',
+    key: 'switch',
+    dataIndex: 'switch',
+    valueType: 'switch',
+  },
+  {
+    title: 'money',
+    key: 'money',
+    dataIndex: 'money',
+    valueType: 'money',
+    fieldProps: {
+      moneySymbol: '$',
+    },
+  },
+  {
+    title: 'money无符号',
+    key: 'money',
+    dataIndex: 'money',
+    valueType: 'money',
+    fieldProps: {
+      moneySymbol: false,
+    },
+  },
+  {
+    title: 'money负数无符号',
+    key: 'money2',
+    dataIndex: 'money2',
+    valueType: 'money',
+    fieldProps: {
+      moneySymbol: false,
+    },
+  },
+];
diff --git a/examples/antdp-base/src/pages/Detail/BasicDetails/index.jsx b/examples/antdp-base/src/pages/Detail/BasicDetails/index.jsx
index d0974fcef..f0d674f02 100644
--- a/examples/antdp-base/src/pages/Detail/BasicDetails/index.jsx
+++ b/examples/antdp-base/src/pages/Detail/BasicDetails/index.jsx
@@ -1,18 +1,108 @@
-import { FormDetail } from '@antdp/antdp-ui';
-import { Card, Space, Table, Steps } from 'antd';
 import CardDes from '@/components/CardDes';
+import { ProDescriptions } from '@ant-design/pro-components';
+import { Card, Space, Table } from 'antd';
 import 'antd/dist/reset.css';
-import { detailItems, userItems, columns, data, columns1, data1 } from './item';
+import { columns, columns1, data, data1 } from './item';
 
 const Page = () => {
   return (
     <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
       <CardDes title="基础详情页" description="常见于详情页的信息展示" />
       <Card>
-        <FormDetail isView={true} header="退款申请" formDatas={detailItems} />
-      </Card>
-      <Card>
-        <FormDetail isView={true} header="用户信息" formDatas={userItems} />
+        <ProDescriptions
+          title="用户信息"
+          request={async () => {
+            return Promise.resolve({
+              success: true,
+              data: {
+                id: '这是一段文本columns',
+                date: '20200809',
+                money: '1212100',
+                money2: -12345.33,
+                state: 'all',
+                switch: true,
+                state2: 'open',
+              },
+            });
+          }}
+          columns={[
+            {
+              title: '文本',
+              key: 'text',
+              dataIndex: 'id',
+            },
+            {
+              title: '状态',
+              key: 'state',
+              dataIndex: 'state',
+              valueType: 'select',
+              valueEnum: {
+                all: { text: '全部', status: 'Default' },
+                open: {
+                  text: '未解决',
+                  status: 'Error',
+                },
+                closed: {
+                  text: '已解决',
+                  status: 'Success',
+                },
+              },
+            },
+            {
+              title: '状态2',
+              key: 'state2',
+              dataIndex: 'state2',
+            },
+            {
+              title: '时间',
+              key: 'date',
+              dataIndex: 'date',
+              valueType: 'date',
+            },
+            {
+              title: '时间',
+              key: 'date',
+              dataIndex: 'date',
+              valueType: 'date',
+              fieldProps: {
+                format: 'DD.MM.YYYY',
+              },
+            },
+            {
+              title: '开关',
+              key: 'switch',
+              dataIndex: 'switch',
+              valueType: 'switch',
+            },
+            {
+              title: 'money',
+              key: 'money',
+              dataIndex: 'money',
+              valueType: 'money',
+              fieldProps: {
+                moneySymbol: '$',
+              },
+            },
+            {
+              title: 'money无符号',
+              key: 'money',
+              dataIndex: 'money',
+              valueType: 'money',
+              fieldProps: {
+                moneySymbol: false,
+              },
+            },
+            {
+              title: 'money负数无符号',
+              key: 'money2',
+              dataIndex: 'money2',
+              valueType: 'money',
+              fieldProps: {
+                moneySymbol: false,
+              },
+            },
+          ]}
+        />
       </Card>
       <Card>
         <h3>退货商品</h3>
@@ -37,12 +127,7 @@ const Page = () => {
       </Card>
       <Card>
         <h3>退货进度</h3>
-        <Table
-          columns={columns1}
-          dataSource={data1}
-          bordered={false}
-          pagination={false}
-        />
+        <Table columns={columns1} dataSource={data1} bordered={false} pagination={false} />
       </Card>
     </Space>
   );