From 95fef868804541ba5a764d0a9d29aab946788d65 Mon Sep 17 00:00:00 2001
From: jack zhang <1098626505@qq.com>
Date: Tue, 30 Apr 2024 21:21:17 +0800
Subject: [PATCH] client components (#4216)

* docs: update docs components

* docs: add more component docs

* docs: add more docs

* fix: add more docs

* fix: build bug

* feat: docs

* fix: build error

* fix: docs

* fix: change x-read-pretty to x-patten

* fix: upgrade docs and types

* fix: build bug

* fix: add more docs

* fix: build bug

* fix: cascader component

* fix: bug

* fix: add more docs

* fix: add backend ci time

---------

Co-authored-by: katherinehhh <katherine_15995@163.com>
---
 .github/workflows/nocobase-test-backend.yml   |   8 +-
 packages/core/client/.dumirc.ts               | 212 ++++++++++++--
 .../core/data-block/data-block-provider.md    |   2 +-
 .../data-block-resource-provider.md           |   2 +-
 .../docs/en-US/core/request/demos/demo1.tsx   |  24 ++
 .../docs/en-US/core/request/demos/demo2.tsx   |  23 ++
 .../docs/en-US/core/request/demos/demo3.tsx   |  69 +++++
 .../client/docs/en-US/core/request/index.md   | 167 +++++++++++
 .../core/data-block/data-block-provider.md    |   2 +-
 .../data-block-resource-provider.md           |   2 +-
 .../docs/zh-CN/core/request/demos/demo1.tsx   |  24 ++
 .../docs/zh-CN/core/request/demos/demo2.tsx   |  23 ++
 .../docs/zh-CN/core/request/demos/demo3.tsx   |  69 +++++
 .../client/docs/zh-CN/core/request/index.md   | 167 +++++++++++
 packages/core/client/src/api-client/index.md  |   5 -
 .../__tests__/Application.test.tsx            |   2 +-
 .../components/defaultComponents.tsx          |   2 +-
 .../hoc/withDynamicSchemaProps.tsx            |   5 +-
 packages/core/client/src/index.ts             |   2 +-
 .../data-blocks/details-multi/hooks/index.ts  |   3 +
 .../blocks/data-blocks/details-multi/index.ts |   2 +
 .../data-blocks/details-single/hooks/index.ts |   2 +
 .../data-blocks/details-single/index.ts       |   1 +
 .../modules/blocks/data-blocks/table/index.ts |   1 +
 .../core/client/src/modules/blocks/index.ts   |   2 +
 .../antd/action/Action.Drawer.tsx             |   2 +-
 .../antd/action/Action.Modal.tsx              |   4 +-
 .../antd/action/Action.Popover.tsx            |   9 -
 .../schema-component/antd/action/Action.tsx   |   9 +-
 .../antd/action/ActionBar.tsx                 |  11 +-
 .../schema-component/antd/action/context.tsx  |  21 +-
 .../demos/new-demos/action-container.tsx      |  49 ++++
 .../action/demos/new-demos/action-context.tsx |  59 ++++
 .../action/demos/new-demos/action-link.tsx    |  17 ++
 .../action/demos/new-demos/action-modal.tsx   | 103 +++++++
 .../action/demos/new-demos/action-popover.tsx |  33 +++
 .../demos/new-demos/actionbar-one-column.tsx  |  77 +++++
 .../demos/new-demos/actionbar-two-columns.tsx |  81 ++++++
 .../antd/action/demos/new-demos/basic.tsx     |  23 ++
 .../antd/action/demos/new-demos/confirm.tsx   |  35 +++
 .../demos/new-demos/custom-component.tsx      |  38 +++
 .../action/demos/new-demos/drawer-basic.tsx   |  26 ++
 .../action/demos/new-demos/drawer-footer.tsx  |  79 +++++
 .../demos/new-demos/drawer-openSize.tsx       |  36 +++
 .../demos/new-demos/drawer-with-form.tsx      | 101 +++++++
 .../action/demos/new-demos/dynamic-props.tsx  |  68 +++++
 .../action/demos/new-demos/schema-toolbar.tsx |  64 +++++
 .../src/schema-component/antd/action/index.md | 220 ++++++++++++--
 .../schema-component/antd/action/index.tsx    |   1 +
 .../src/schema-component/antd/action/types.ts |  75 ++++-
 .../demos/new-demos/basic.tsx                 |  31 ++
 .../demos/new-demos/multiple.tsx              |  32 +++
 .../demos/new-demos/read-pretty.tsx           |  33 +++
 .../antd/association-select/index.md          |  39 ++-
 .../antd/auto-complete/AutoComplete.tsx       |  15 +-
 .../antd/auto-complete/demos/basic.tsx        |  38 +++
 .../antd/auto-complete/demos/read-pretty.tsx  |  22 ++
 .../antd/auto-complete/index.md               |  20 ++
 .../antd/block-item/BlockItem.tsx             |   8 +-
 .../antd/block-item/demos/new-demos/basic.tsx |  68 +++++
 .../schema-component/antd/block-item/index.md |  27 +-
 .../antd/card-item/CardItem.tsx               |  26 +-
 .../antd/card-item/demos/new-demos/basic.tsx  |  58 ++++
 .../card-item/demos/new-demos/lazy-render.tsx |  84 ++++++
 .../schema-component/antd/card-item/index.md  |  32 ++-
 .../antd/cascader/Cascader.tsx                | 201 +++++++------
 .../antd/cascader/ReadPretty.tsx              |  13 +-
 .../antd/cascader/demos/new-demos/basic.tsx   |  56 ++++
 .../demos/new-demos/changeOnSelectLast.tsx    |  59 ++++
 .../cascader/demos/new-demos/labelInValue.tsx |  59 ++++
 .../cascader/demos/new-demos/loadData.tsx     |  76 +++++
 .../cascader/demos/new-demos/read-pretty.tsx  |  58 ++++
 .../schema-component/antd/cascader/index.md   |  77 +++--
 .../antd/checkbox/Checkbox.tsx                |  27 +-
 .../antd/checkbox/demos/new-demos/basic.tsx   |  20 ++
 .../demos/new-demos/group-read-pretty.tsx     |  57 ++++
 .../antd/checkbox/demos/new-demos/group.tsx   |  34 +++
 .../checkbox/demos/new-demos/read-pretty.tsx  |  39 +++
 .../schema-component/antd/checkbox/index.md   |  51 +++-
 .../antd/collection-select/demos/basic.tsx    |  20 ++
 .../antd/collection-select/demos/multiple.tsx |  23 ++
 .../collection-select/demos/read-pretty.tsx   |  22 ++
 .../antd/collection-select/index.md           |  28 +-
 .../antd/color-picker/ColorPicker.tsx         |   8 +-
 .../color-picker/demos/new-demos/basic.tsx    |  20 ++
 .../demos/new-demos/read-pretty.tsx           |  22 ++
 .../antd/color-picker/index.md                |  21 +-
 .../antd/color-select/ColorSelect.tsx         |   8 +-
 .../color-select/demos/new-demos/basic.tsx    |  20 ++
 .../demos/new-demos/read-pretty.tsx           |  22 ++
 .../antd/color-select/index.md                |  27 +-
 .../src/schema-component/antd/cron/Cron.tsx   |  14 +-
 .../schema-component/antd/cron/CronSet.tsx    |   9 +-
 .../antd/cron/demos/new-demos/cron-basic.tsx  |  20 ++
 .../cron/demos/new-demos/cron-read-pretty.tsx |  22 ++
 .../cron/demos/new-demos/cronset-basic.tsx    |  40 +++
 .../demos/new-demos/cronset-read-pretty.tsx   |  34 +++
 .../src/schema-component/antd/cron/index.md   |  55 +++-
 .../antd/date-picker/DatePicker.tsx           |  29 +-
 .../antd/date-picker/ReadPretty.tsx           |  38 ++-
 .../demos/new-demos/date-basic.tsx            |  20 ++
 .../demos/new-demos/date-format.tsx           |  24 ++
 .../demos/new-demos/date-gmt-utc.tsx          |  37 +++
 .../date-picker/demos/new-demos/date-gmt.tsx  |  35 +++
 .../demos/new-demos/date-read-pretty.tsx      |  85 ++++++
 .../demos/new-demos/date-show-time.tsx        |  23 ++
 .../date-picker/demos/new-demos/date-utc.tsx  |  35 +++
 .../demos/new-demos/range-basic.tsx           |  20 ++
 .../demos/new-demos/range-format.tsx          |  24 ++
 .../demos/new-demos/range-gmt-utc.tsx         |  37 +++
 .../date-picker/demos/new-demos/range-gmt.tsx |  35 +++
 .../demos/new-demos/range-read-pretty.tsx     |  74 +++++
 .../date-picker/demos/new-demos/range-utc.tsx |  35 +++
 .../antd/date-picker/index.md                 | 102 +++++--
 .../schema-component/antd/details/Details.tsx |  20 +-
 .../antd/details/demos/new-demos/list.tsx     |  64 +++++
 .../antd/details/demos/new-demos/single.tsx   |  56 ++++
 .../schema-component/antd/details/index.md    |  29 +-
 .../error-fallback/demos/new-demos/basic.tsx  |  26 ++
 .../antd/error-fallback/index.md              |  11 +-
 .../schema-component/antd/filter/Filter.tsx   |  14 +-
 .../antd/filter/FilterAction.tsx              |  11 +-
 .../schema-component/antd/filter/context.ts   |   5 +-
 .../antd/filter/demos/new-demos/basic.tsx     |  68 +++++
 .../demos/new-demos/collection-fields.tsx     |  52 ++++
 .../filter/demos/new-demos/default-value.tsx  |  84 ++++++
 .../antd/filter/demos/new-demos/options.ts    |  65 +++++
 .../demos/new-demos/with-data-block.tsx       |  73 +++++
 .../src/schema-component/antd/filter/index.md |  41 +--
 .../antd/form-item/FormItem.tsx               |   6 +-
 .../antd/form-item/demos/new-demos/basic.tsx  |  44 +++
 .../schema-component/antd/form-item/index.md  |  15 +-
 .../schema-component/antd/form-v2/Form.tsx    |   7 +-
 .../antd/form-v2/demos/new-demos/basic.tsx    |  69 +++++
 .../demos/new-demos/collection-data.tsx       |  89 ++++++
 .../form-v2/demos/new-demos/collection.tsx    |  83 ++++++
 .../form-v2/demos/new-demos/default-value.tsx |  56 ++++
 .../demos/new-demos/extend-collection.tsx     | 109 +++++++
 .../form-v2/demos/new-demos/form-layout.tsx   |  42 +++
 .../antd/form-v2/demos/new-demos/grid.tsx     |  73 +++++
 .../antd/form-v2/demos/new-demos/linkage.tsx  |  31 ++
 .../form-v2/demos/new-demos/read-pretty.tsx   |  52 ++++
 .../schema-component/antd/form-v2/index.md    |  88 ++++--
 .../src/schema-component/antd/form/index.md   |   6 -
 .../src/schema-component/antd/g2plot/index.md |   8 +-
 .../antd/grid-card/GridCard.tsx               |  14 +-
 .../antd/grid-card/demos/basic.tsx            |  45 +++
 .../schema-component/antd/grid-card/index.md  |  29 +-
 .../src/schema-component/antd/grid/Grid.tsx   |  10 +-
 .../antd/grid/demos/new-demos/basic.tsx       | 105 +++++++
 .../src/schema-component/antd/grid/index.md   |  25 +-
 .../antd/icon-picker/IconPicker.tsx           |  17 +-
 .../icon-picker/demos/new-demos/basic.tsx     |  20 ++
 .../demos/new-demos/read-pretty.tsx           |  22 ++
 .../antd/icon-picker/index.md                 |  30 +-
 .../client/src/schema-component/antd/index.ts |   5 +-
 .../antd/input-number/InputNumber.tsx         |   8 +-
 .../antd/input-number/ReadPretty.tsx          |   9 +-
 .../new-demos/addonBefore-addonAfter.tsx      |  24 ++
 .../input-number/demos/new-demos/basic.tsx    |  20 ++
 .../demos/new-demos/format-style.tsx          |  25 ++
 .../demos/new-demos/read-pretty.tsx           |  26 ++
 .../demos/new-demos/separator.tsx             |  53 ++++
 .../demos/new-demos/unit-conversion.tsx       |  36 +++
 .../antd/input-number/index.md                |  60 +++-
 .../src/schema-component/antd/input/Input.tsx |  12 +-
 .../antd/input/ReadPretty.tsx                 |  79 ++++-
 .../demos/new-demos/input-read-pretty.tsx     |  37 +++
 .../antd/input/demos/new-demos/input.tsx      |  20 ++
 .../demos/new-demos/json-read-pretty.tsx      |  22 ++
 .../antd/input/demos/new-demos/json.tsx       |  20 ++
 .../demos/new-demos/textarea-read-pretty.tsx  |  51 ++++
 .../antd/input/demos/new-demos/textarea.tsx   |  20 ++
 .../input/demos/new-demos/url-read-pretty.tsx |  22 ++
 .../antd/input/demos/new-demos/url.tsx        |  20 ++
 .../src/schema-component/antd/input/index.md  | 119 ++++++--
 .../antd/list/demos/basic.tsx                 |  54 ++++
 .../antd/list/demos/view-or-edit-record.tsx   | 244 ++++++++++++++++
 .../antd/list/demos/with-action.tsx           | 105 +++++++
 .../src/schema-component/antd/list/index.md   |  29 +-
 .../antd/markdown/Markdown.Void.tsx           |  11 +-
 .../antd/markdown/demos/new-demos/basic.tsx   |  20 ++
 .../markdown/demos/new-demos/read-pretty.tsx  |  22 ++
 .../schema-component/antd/markdown/index.md   |  36 ++-
 .../src/schema-component/antd/menu/index.md   |   6 -
 .../NanoIDInput.tsx                           |   2 +-
 .../__tests__/NanoIDInput.test.tsx            |   0
 .../antd/nanoid-input/demos/basic.tsx         |  21 ++
 .../antd/nanoid-input/demos/read-pretty.tsx   |  22 ++
 .../antd/nanoid-input/index.md                |  19 ++
 .../{nanoIDInput => nanoid-input}/index.tsx   |   0
 .../src/schema-component/antd/page/index.md   |   6 -
 .../antd/pagination/demos/basic.tsx           |   6 +
 .../antd/pagination/demos/hide.tsx            |   6 +
 .../schema-component/antd/pagination/index.md |  18 ++
 .../antd/pagination/index.tsx                 |   8 +-
 .../antd/password/Password.tsx                |   8 +-
 .../antd/password/demos/new-demos/basic.tsx   |  20 ++
 .../demos/new-demos/checkStrength.tsx         |  23 ++
 .../password/demos/new-demos/read-pretty.tsx  |  22 ++
 .../schema-component/antd/password/index.md   |  32 ++-
 .../antd/percent/demos/new-demos/basic.tsx    |  20 ++
 .../percent/demos/new-demos/read-pretty.tsx   |  22 ++
 .../schema-component/antd/percent/index.md    |  23 +-
 .../antd/preview/demos/demo1.tsx              |   2 +-
 .../schema-component/antd/preview/index.md    |  17 +-
 .../antd/quick-edit/QuickEdit.tsx             |  14 +-
 .../quick-edit/__tests__/QuickEdit.test.tsx   |   2 +-
 .../antd/quick-edit/demos/basic.tsx           |  39 +++
 .../antd/quick-edit/demos/read-pretty.tsx     |  36 +++
 .../antd/quick-edit/demos/subtable.tsx        |  76 +++++
 .../schema-component/antd/quick-edit/index.md |  27 ++
 .../radio/demos/new-demos/group-basic.tsx     |  32 +++
 .../new-demos/group-read-pretty-color.tsx     |  35 +++
 .../demos/new-demos/group-read-pretty.tsx     |  34 +++
 .../radio/demos/new-demos/radio-basic.tsx     |  20 ++
 .../demos/new-demos/radio-read-pretty.tsx     |  29 ++
 .../src/schema-component/antd/radio/index.md  |  46 ++-
 .../antd/record-picker/index.md               |  10 +-
 .../antd/remote-select/ReadPretty.tsx         |   9 +-
 .../antd/remote-select/RemoteSelect.tsx       |  21 +-
 .../antd/remote-select/demos/demo1.tsx        |   1 -
 .../remote-select/demos/new-demos/basic.tsx   |  45 +++
 .../remote-select/demos/new-demos/manual.tsx  |  46 +++
 .../demos/new-demos/multiple.tsx              |  46 +++
 .../demos/new-demos/read-pretty.tsx           |  47 +++
 .../antd/remote-select/index.md               |  64 +++--
 .../antd/rich-text/demos/new-demos/basic.tsx  |  20 ++
 .../rich-text/demos/new-demos/read-pretty.tsx |  23 ++
 .../schema-component/antd/rich-text/index.md  |  28 +-
 .../antd/select/ReadPretty.tsx                |  15 +-
 .../schema-component/antd/select/Select.tsx   |  21 +-
 .../antd/select/demos/new-demos/basic.tsx     |  34 +++
 .../select/demos/new-demos/fieldNames.tsx     |  41 +++
 .../antd/select/demos/new-demos/multiple.tsx  |  37 +++
 .../select/demos/new-demos/object-value.tsx   |  37 +++
 .../select/demos/new-demos/read-pretty.tsx    |  86 ++++++
 .../src/schema-component/antd/select/index.md |  82 ++++--
 .../src/schema-component/antd/select/utils.ts |   8 +-
 .../schema-component/antd/table-v2/Table.tsx  |   2 +-
 .../demos/new-demos/action-toolbar.tsx        | 150 ++++++++++
 .../antd/table-v2/demos/new-demos/basic.tsx   |  53 ++++
 .../table-v2/demos/new-demos/collection.tsx   |  73 +++++
 .../demos/new-demos/extend-collection.tsx     | 159 ++++++++++
 .../antd/table-v2/demos/new-demos/record.tsx  | 272 ++++++++++++++++++
 .../schema-component/antd/table-v2/index.md   |  47 ++-
 .../src/schema-component/antd/table/index.md  |   6 -
 .../antd/tabs/demos/demo1.tsx                 |  10 +-
 .../src/schema-component/antd/tabs/index.md   |  11 +-
 .../antd/time-picker/ReadPretty.tsx           |  11 +-
 .../new-demos/time-range-read-pretty.tsx      |  22 ++
 .../demos/new-demos/time-range.tsx            |  20 ++
 .../demos/new-demos/time-read-pretty.tsx      |  22 ++
 .../antd/time-picker/demos/new-demos/time.tsx |  20 ++
 .../antd/time-picker/index.md                 |  50 +++-
 .../tree-select/demos/new-demos/basic.tsx     |  62 ++++
 .../demos/new-demos/read-pretty.tsx           |  64 +++++
 .../antd/tree-select/index.md                 |  20 +-
 .../UnixTimestamp.tsx                         |   8 +-
 .../__tests__/UnixTimestamp.test.tsx          |   0
 .../antd/unix-timestamp/demos/basic.tsx       |  20 ++
 .../antd/unix-timestamp/demos/read-pretty.tsx |  32 +++
 .../antd/unix-timestamp/demos/second.tsx      |  23 ++
 .../antd/unix-timestamp/index.md              |  20 ++
 .../index.tsx                                 |   0
 .../antd/upload/demos/new-demos/basic.tsx     |  43 +++
 .../antd/upload/demos/new-demos/multiple.tsx  |  44 +++
 .../upload/demos/new-demos/read-pretty.tsx    |  68 +++++
 .../src/schema-component/antd/upload/index.md |  33 ++-
 .../schema-component/antd/variable/Input.tsx  |  18 +-
 .../antd/variable/demos/demo1.tsx             |  11 -
 .../antd/variable/demos/demo2.tsx             |  11 -
 .../antd/variable/demos/demo3.tsx             |  11 -
 .../schema-component/antd/variable/index.md   |  27 +-
 .../common/dnd-context/index.md               |   6 -
 .../common/dnd-context/index.tsx              |   2 +
 .../common/sortable-item/index.md             |   6 -
 packages/core/test/src/client/utils/utils.ts  |   4 +-
 .../core/test/src/web/dataSourceMainData.json | 101 +++++++
 packages/core/test/src/web/index.tsx          |  51 +++-
 packages/core/utils/src/date.ts               |  23 +-
 .../src/client/calendar/index.md              |   6 -
 .../plugin-gantt/src/client/index.md          |   5 +-
 .../plugin-kanban/src/client/index.md         |   6 -
 .../src/client/__e2e__/schemaSettings.test.ts |   1 +
 285 files changed, 9613 insertions(+), 888 deletions(-)
 create mode 100644 packages/core/client/docs/en-US/core/request/demos/demo1.tsx
 create mode 100644 packages/core/client/docs/en-US/core/request/demos/demo2.tsx
 create mode 100644 packages/core/client/docs/en-US/core/request/demos/demo3.tsx
 create mode 100644 packages/core/client/docs/en-US/core/request/index.md
 create mode 100644 packages/core/client/docs/zh-CN/core/request/demos/demo1.tsx
 create mode 100644 packages/core/client/docs/zh-CN/core/request/demos/demo2.tsx
 create mode 100644 packages/core/client/docs/zh-CN/core/request/demos/demo3.tsx
 create mode 100644 packages/core/client/docs/zh-CN/core/request/index.md
 create mode 100644 packages/core/client/src/modules/blocks/data-blocks/details-multi/hooks/index.ts
 create mode 100644 packages/core/client/src/modules/blocks/data-blocks/details-multi/index.ts
 create mode 100644 packages/core/client/src/modules/blocks/data-blocks/details-single/hooks/index.ts
 create mode 100644 packages/core/client/src/modules/blocks/data-blocks/details-single/index.ts
 create mode 100644 packages/core/client/src/modules/blocks/index.ts
 delete mode 100644 packages/core/client/src/schema-component/antd/action/Action.Popover.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/action-container.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/action-context.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/action-link.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/action-modal.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/action-popover.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-one-column.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-two-columns.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/confirm.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/custom-component.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-footer.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-openSize.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-with-form.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/dynamic-props.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/action/demos/new-demos/schema-toolbar.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/association-select/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/association-select/demos/new-demos/multiple.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/association-select/demos/new-demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/auto-complete/demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/auto-complete/demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/auto-complete/index.md
 create mode 100644 packages/core/client/src/schema-component/antd/block-item/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/card-item/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/card-item/demos/new-demos/lazy-render.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/cascader/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/cascader/demos/new-demos/changeOnSelectLast.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/cascader/demos/new-demos/labelInValue.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/cascader/demos/new-demos/loadData.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/cascader/demos/new-demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group-read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/collection-select/demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/collection-select/demos/multiple.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/collection-select/demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/color-select/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/color-select/demos/new-demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-format.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt-utc.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-show-time.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-utc.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-format.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt-utc.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-utc.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/details/demos/new-demos/list.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/details/demos/new-demos/single.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/error-fallback/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/filter/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/filter/demos/new-demos/collection-fields.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/filter/demos/new-demos/default-value.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/filter/demos/new-demos/options.ts
 create mode 100644 packages/core/client/src/schema-component/antd/filter/demos/new-demos/with-data-block.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/form-item/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection-data.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/default-value.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/extend-collection.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/form-layout.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/grid.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/linkage.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/grid-card/demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/grid/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input-number/demos/new-demos/addonBefore-addonAfter.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input-number/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input-number/demos/new-demos/format-style.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input-number/demos/new-demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input-number/demos/new-demos/separator.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input-number/demos/new-demos/unit-conversion.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input/demos/new-demos/input-read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input/demos/new-demos/input.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input/demos/new-demos/json-read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input/demos/new-demos/json.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea-read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input/demos/new-demos/url-read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/input/demos/new-demos/url.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/list/demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/list/demos/view-or-edit-record.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/list/demos/with-action.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/markdown/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/markdown/demos/new-demos/read-pretty.tsx
 rename packages/core/client/src/schema-component/antd/{nanoIDInput => nanoid-input}/NanoIDInput.tsx (99%)
 rename packages/core/client/src/schema-component/antd/{nanoIDInput => nanoid-input}/__tests__/NanoIDInput.test.tsx (100%)
 create mode 100644 packages/core/client/src/schema-component/antd/nanoid-input/demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/nanoid-input/demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/nanoid-input/index.md
 rename packages/core/client/src/schema-component/antd/{nanoIDInput => nanoid-input}/index.tsx (100%)
 create mode 100644 packages/core/client/src/schema-component/antd/pagination/demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/pagination/demos/hide.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/pagination/index.md
 create mode 100644 packages/core/client/src/schema-component/antd/password/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/password/demos/new-demos/checkStrength.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/password/demos/new-demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/percent/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/percent/demos/new-demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/quick-edit/demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/quick-edit/demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/quick-edit/demos/subtable.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/quick-edit/index.md
 create mode 100644 packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty-color.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/manual.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/multiple.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/select/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/select/demos/new-demos/fieldNames.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/select/demos/new-demos/multiple.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/select/demos/new-demos/object-value.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/select/demos/new-demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/action-toolbar.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/collection.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/extend-collection.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/record.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range-read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/read-pretty.tsx
 rename packages/core/client/src/schema-component/antd/{unixTimestamp => unix-timestamp}/UnixTimestamp.tsx (90%)
 rename packages/core/client/src/schema-component/antd/{unixTimestamp => unix-timestamp}/__tests__/UnixTimestamp.test.tsx (100%)
 create mode 100644 packages/core/client/src/schema-component/antd/unix-timestamp/demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/unix-timestamp/demos/read-pretty.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/unix-timestamp/demos/second.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/unix-timestamp/index.md
 rename packages/core/client/src/schema-component/antd/{unixTimestamp => unix-timestamp}/index.tsx (100%)
 create mode 100644 packages/core/client/src/schema-component/antd/upload/demos/new-demos/basic.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/upload/demos/new-demos/multiple.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/upload/demos/new-demos/read-pretty.tsx

diff --git a/.github/workflows/nocobase-test-backend.yml b/.github/workflows/nocobase-test-backend.yml
index 0224ac2dd1..cb34991e22 100644
--- a/.github/workflows/nocobase-test-backend.yml
+++ b/.github/workflows/nocobase-test-backend.yml
@@ -68,7 +68,7 @@ jobs:
           DB_STORAGE: /tmp/db.sqlite
           DB_TEST_PREFIX: test_
           DB_UNDERSCORED: ${{ matrix.underscored }}
-    timeout-minutes: 40
+    timeout-minutes: 60
 
   postgres-test:
     strategy:
@@ -132,7 +132,7 @@ jobs:
           COLLECTION_MANAGER_SCHEMA: ${{ matrix.collection_schema }}
           DB_TEST_DISTRIBUTOR_PORT: 23450
           DB_TEST_PREFIX: test_
-    timeout-minutes: 40
+    timeout-minutes: 60
 
   mysql-test:
     strategy:
@@ -183,7 +183,7 @@ jobs:
           DB_UNDERSCORED: ${{ matrix.underscored }}
           DB_TEST_DISTRIBUTOR_PORT: 23450
           DB_TEST_PREFIX: test_
-    timeout-minutes: 40
+    timeout-minutes: 60
   mariadb-test:
     strategy:
       matrix:
@@ -233,4 +233,4 @@ jobs:
           DB_UNDERSCORED: ${{ matrix.underscored }}
           DB_TEST_DISTRIBUTOR_PORT: 23450
           DB_TEST_PREFIX: test_
-    timeout-minutes: 40
+    timeout-minutes: 60
diff --git a/packages/core/client/.dumirc.ts b/packages/core/client/.dumirc.ts
index ebb48d33a9..6c38d3e7fa 100644
--- a/packages/core/client/.dumirc.ts
+++ b/packages/core/client/.dumirc.ts
@@ -1,5 +1,3 @@
-import path from 'path';
-import glob from 'glob';
 import _ from 'lodash'
 import { getUmiConfig } from '@nocobase/devtools/umiConfig';
 import { defineConfig } from 'dumi';
@@ -11,19 +9,6 @@ const lang = process.env.DOC_LANG;
 
 console.log('process.env.DOC_LANG', lang);
 
-const componentsDir = 'src/schema-component/antd';
-
-function getComponentsMenu() {
-  const cwd = path.join(__dirname, componentsDir);
-  const ignores = ['table/index.md', 'form/index.md']; // 老版本，不需要展示
-  const files = glob.sync('*/index.md', { cwd, ignore: ignores });
-
-  return files.map((file) => ({
-    title: _.upperFirst(_.camelCase(file.replace('/index.md', ''))),
-    link: `/components/${file.replace('/index.md', '')}`,
-  }));
-}
-
 export default defineConfig({
   hash: true,
   alias: {
@@ -39,7 +24,7 @@ export default defineConfig({
   resolve: {
     docDirs: [`./docs/${lang}`],
     atomDirs: [
-      { type: 'component', dir: componentsDir },
+      { type: 'component', dir: 'src/schema-component/antd' },
     ],
   },
   locales: [
@@ -92,6 +77,10 @@ export default defineConfig({
               title: 'PluginSettingsManager',
               link: '/core/application/plugin-settings-manager',
             },
+            {
+              title: 'Request',
+              link: '/core/request',
+            },
           ],
         },
         {
@@ -225,7 +214,196 @@ export default defineConfig({
           ]
         }
       ],
-      '/components': getComponentsMenu(),
+      '/components': [
+        {
+          title: 'Action',
+          type: 'group',
+          children: [
+            {
+              "title": "Action",
+              "link": "/components/action"
+            },
+            {
+              "title": "Filter",
+              "link": "/components/filter"
+            },
+          ]
+        },
+        {
+          title: 'Field',
+          type: 'group',
+          children: [
+            {
+              "title": "Checkbox",
+              "link": "/components/checkbox"
+            },
+            {
+              "title": "Cascader",
+              "link": "/components/cascader"
+            },
+            {
+              "title": "ColorPicker",
+              "link": "/components/color-picker"
+            },
+            {
+              "title": "ColorSelect",
+              "link": "/components/color-select"
+            },
+            {
+              "title": "DatePicker",
+              "link": "/components/date-picker"
+            },
+            {
+              "title": "TimePicker",
+              "link": "/components/time-picker"
+            },
+            {
+              "title": "IconPicker",
+              "link": "/components/icon-picker"
+            },
+            {
+              "title": "InputNumber",
+              "link": "/components/input-number"
+            },
+            {
+              "title": "Input",
+              "link": "/components/input"
+            },
+            {
+              "title": "AutoComplete",
+              "link": "/components/auto-complete"
+            },
+            {
+              "title": "NanoIDInput",
+              "link": "/components/nanoid-input"
+            },
+            {
+              "title": "Password",
+              "link": "/components/password"
+            },
+            {
+              "title": "Percent",
+              "link": "/components/percent"
+            },
+            {
+              "title": "Radio",
+              "link": "/components/radio"
+            },
+            {
+              "title": "Select",
+              "link": "/components/select"
+            },
+            {
+              "title": "RemoteSelect",
+              "link": "/components/remote-select"
+            },
+            {
+              "title": "TreeSelect",
+              "link": "/components/tree-select"
+            },
+            {
+              "title": "Upload",
+              "link": "/components/upload"
+            },
+            {
+              "title": "CollectionSelect",
+              "link": "/components/collection-select"
+            },
+            {
+              "title": "Cron",
+              "link": "/components/cron"
+            },
+            {
+              "title": "Markdown",
+              "link": "/components/markdown"
+            },
+            {
+              "title": "Variable",
+              "link": "/components/variable"
+            },
+            {
+              "title": "QuickEdit",
+              "link": "/components/quick-edit"
+            },
+            {
+              "title": "RichText",
+              "link": "/components/rich-text"
+            }
+          ]
+        },
+        {
+          title: 'Block',
+          type: 'group',
+          children: [
+            {
+              "title": "BlockItem",
+              "link": "/components/block-item"
+            },
+            {
+              "title": "CardItem",
+              "link": "/components/card-item"
+            },
+            {
+              "title": "FormItem",
+              "link": "/components/form-item"
+            },
+            {
+              "title": "FormV2",
+              "link": "/components/form-v2"
+            },
+            {
+              "title": "TableV2",
+              "link": "/components/table-v2"
+            },
+            {
+              "title": "Details",
+              "link": "/components/details"
+            },
+            {
+              "title": "GridCard",
+              "link": "/components/grid-card"
+            },
+            {
+              "title": "Grid",
+              "link": "/components/grid"
+            },
+            {
+              "title": "List",
+              "link": "/components/list"
+            },
+          ]
+        },
+        {
+          title: 'Others',
+          type: 'group',
+          children: [
+            {
+              "title": "Tabs",
+              "link": "/components/tabs"
+            },
+            {
+              "title": "ErrorFallback",
+              "link": "/components/error-fallback"
+            },
+            {
+              "title": "G2Plot",
+              "link": "/components/g2plot"
+            },
+            {
+              "title": "Menu",
+              "link": "/components/menu"
+            },
+            {
+              "title": "Pagination",
+              "link": "/components/pagination"
+            },
+            {
+              "title": "Preview",
+              "link": "/components/preview"
+            },
+          ]
+        },
+      ]
       // '/ui-schema': [
       //   {
       //     title: 'Overview',
diff --git a/packages/core/client/docs/en-US/core/data-block/data-block-provider.md b/packages/core/client/docs/en-US/core/data-block/data-block-provider.md
index 6aeaec0492..1ffc718afd 100644
--- a/packages/core/client/docs/en-US/core/data-block/data-block-provider.md
+++ b/packages/core/client/docs/en-US/core/data-block/data-block-provider.md
@@ -37,7 +37,7 @@ Table 中的字段信息及列表数据，都是存储在数据库中的。
 
 - `DataBlockProvider`：封装了下面的所有组件，并提供了区块属性
   - [CollectionProvider](/core/data-source/collection-provider) / [AssociationProvider](/core/data-source/association-provider): 根据 `DataBlockProvider` 提供的上下文信息，查询对应数据表数据及关系字段信息并传递
-  - [BlockResourceProvider](/core/data-block/data-block-resource-provider): 根据 `DataBlockProvider` 提供的上下文信息，构建区块 [Resource](https://docs.nocobase.com/api/sdk#resource-action) API，用于区块数据的增删改查
+  - [BlockResourceProvider](/core/data-block/data-block-resource-provider): 根据 `DataBlockProvider` 提供的上下文信息，构建区块 [Resource](/core/request) API，用于区块数据的增删改查
   - [BlockRequestProvider](/core/data-block/data-block-request-provider): 根据 `DataBlockProvider` 提供的上下文信息，自动调用 `BlockResourceProvider` 提供的 `resource.get()` 或 `resource.list()` 发起请求，得到区块数据，并传递
     - [CollectionRecordProvider](/core/data-source/record-provider): 对于 `resource.get()` 场景，会自动嵌套 `CollectionRecordProvider` 并将 `resource.get()` 请求结果传递下去，`resource.list()` 场景则需要自行使用 `CollectionRecordProvider` 提供数据记录
 
diff --git a/packages/core/client/docs/en-US/core/data-block/data-block-resource-provider.md b/packages/core/client/docs/en-US/core/data-block/data-block-resource-provider.md
index e94246b6c7..50178dc86f 100644
--- a/packages/core/client/docs/en-US/core/data-block/data-block-resource-provider.md
+++ b/packages/core/client/docs/en-US/core/data-block/data-block-resource-provider.md
@@ -1,6 +1,6 @@
 # DataBlockResourceProvider
 
-根据 `DataBlockProvider` 中的 `collection`、`association`、`sourceId` 等属性，构建好 [resource](https://docs.nocobase.com/api/sdk#resource-action) 对象，方便子组件对区块数据的增删改查操作，其内置在 [DataBlockProvider](/core/data-block/data-block-provider) 中
+根据 `DataBlockProvider` 中的 `collection`、`association`、`sourceId` 等属性，构建好 [resource](/core/request) 对象，方便子组件对区块数据的增删改查操作，其内置在 [DataBlockProvider](/core/data-block/data-block-provider) 中
 
 
 ## useDataBlockResource
diff --git a/packages/core/client/docs/en-US/core/request/demos/demo1.tsx b/packages/core/client/docs/en-US/core/request/demos/demo1.tsx
new file mode 100644
index 0000000000..dbc18123d2
--- /dev/null
+++ b/packages/core/client/docs/en-US/core/request/demos/demo1.tsx
@@ -0,0 +1,24 @@
+import { APIClient, APIClientProvider, compose, useRequest } from '@nocobase/client';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+
+const apiClient = new APIClient();
+
+const mock = new MockAdapter(apiClient.axios);
+
+mock.onGet('/users:get').reply(200, {
+  data: { id: 1, name: 'John Smith' },
+});
+
+const providers = [[APIClientProvider, { apiClient }]];
+
+export default compose(...providers)(() => {
+  const { data } = useRequest<{
+    data: any;
+  }>({
+    resource: 'users',
+    action: 'get',
+    params: {},
+  });
+  return <div>{data?.data?.name}</div>;
+});
diff --git a/packages/core/client/docs/en-US/core/request/demos/demo2.tsx b/packages/core/client/docs/en-US/core/request/demos/demo2.tsx
new file mode 100644
index 0000000000..823a5dbb41
--- /dev/null
+++ b/packages/core/client/docs/en-US/core/request/demos/demo2.tsx
@@ -0,0 +1,23 @@
+import { APIClient, APIClientProvider, compose, useRequest } from '@nocobase/client';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+
+const apiClient = new APIClient();
+
+const mock = new MockAdapter(apiClient.axios);
+
+mock.onGet('/users:get').reply(200, {
+  data: { id: 1, name: 'John Smith' },
+});
+
+const providers = [[APIClientProvider, { apiClient }]];
+
+export default compose(...providers)(() => {
+  const { data } = useRequest<{
+    data: any;
+  }>({
+    url: 'users:get',
+    method: 'get',
+  });
+  return <div>{data?.data?.name}</div>;
+});
diff --git a/packages/core/client/docs/en-US/core/request/demos/demo3.tsx b/packages/core/client/docs/en-US/core/request/demos/demo3.tsx
new file mode 100644
index 0000000000..d27bf0470f
--- /dev/null
+++ b/packages/core/client/docs/en-US/core/request/demos/demo3.tsx
@@ -0,0 +1,69 @@
+import { uid } from '@formily/shared';
+import { APIClient, APIClientProvider, useAPIClient, useRequest } from '@nocobase/client';
+import { Button, Input, Space, Table } from 'antd';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+
+const apiClient = new APIClient();
+
+const mock = new MockAdapter(apiClient.axios);
+const sleep = (value: number) => new Promise((resolve) => setTimeout(resolve, value));
+
+mock.onGet('/users:list').reply(async () => {
+  await sleep(1000);
+  return [
+    200,
+    {
+      data: [
+        { id: 1, name: uid() },
+        { id: 2, name: uid() },
+      ],
+    },
+  ];
+});
+
+const ComponentA = () => {
+  console.log('ComponentA');
+  const { data, loading } = useRequest<{
+    data: any;
+  }>(
+    {
+      url: 'users:list',
+      method: 'get',
+    },
+    {
+      uid: 'test', // 当指定了 uid 的 useRequest 的结果，可以通过 api.service(uid) 获取
+    },
+  );
+  return (
+    <Table
+      pagination={false}
+      rowKey={'id'}
+      loading={loading}
+      dataSource={data?.data}
+      columns={[{ title: 'Name', dataIndex: 'name' }]}
+    />
+  );
+};
+
+const ComponentB = () => {
+  console.log('ComponentB');
+  const apiClient = useAPIClient();
+  return (
+    <Space>
+      <Input />
+      <Button onClick={() => apiClient.service('test')?.run()}>提交</Button>
+    </Space>
+  );
+};
+
+export default () => {
+  return (
+    <APIClientProvider apiClient={apiClient}>
+      <ComponentB />
+      <br />
+      <br />
+      <ComponentA />
+    </APIClientProvider>
+  );
+};
diff --git a/packages/core/client/docs/en-US/core/request/index.md b/packages/core/client/docs/en-US/core/request/index.md
new file mode 100644
index 0000000000..d442a20194
--- /dev/null
+++ b/packages/core/client/docs/en-US/core/request/index.md
@@ -0,0 +1,167 @@
+# APIClient
+
+## APIClient
+
+```ts
+class APIClient {
+  // axios 实例
+  axios: AxiosInstance;
+  // 缓存带 uid 的 useRequest({}, {uid}) 的结果，可供其他组件调用
+  services: Record<string, Result<any, any>>;
+  // 构造器
+  constructor(instance?: AxiosInstance | AxiosRequestConfig);
+  // 客户端请求，支持 AxiosRequestConfig 和 ResourceActionOptions
+  request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D> | ResourceActionOptions): Promise<R>;
+  // 获取资源
+  resource<R = IResource>(name: string, of?: any): R;
+}
+```
+
+示例
+
+```ts
+import axios from 'axios';
+
+// 不传参时，内部直接创建 axios 实例
+const apiClient = new APIClient();
+
+// 提供 AxiosRequestConfig 配置参数
+const apiClient = new APIClient({
+  baseURL: '',
+});
+
+// 提供 AxiosInstance
+const instance = axios.create({
+  baseURL: '',
+});
+const apiClient = new APIClient(instance);
+
+// 常规请求
+const response = await apiClient.request({ url });
+
+// NocoBase 特有的资源操作
+const response = await apiClient.resource('posts').list();
+
+// 请求共享
+const { data, loading, run } = apiClient.service('uid');
+```
+
+`api.service(uid)` 的例子，ComponentB 里刷新 ComponentA 的请求数据
+
+<code src="./demos/demo3.tsx"></code>
+
+## APIClientProvider
+
+提供 APIClient 实例的上下文。
+
+```tsx | pure
+const apiClient = new APIClient();
+
+<APIClientProvider apiClient={apiClient}></APIClientProvider>
+```
+
+## useAPIClient
+
+获取当前上下文的 APIClient 实例。
+
+```ts
+const apiClient = useAPIClient();
+```
+
+## useRequest
+
+```ts
+function useRequest<P>(
+  service: AxiosRequestConfig<P> | ResourceActionOptions<P> | FunctionService,
+  options?: Options<any, any>,
+);
+```
+
+支持 `axios.request(config)`，config 详情查看 [axios](https://github.com/axios/axios#request-config)
+
+```ts
+const { data, loading, refresh, run, params } = useRequest({ url: '/users' });
+
+// useRequest 里传的是 AxiosRequestConfig，所以 run 里传的也是 AxiosRequestConfig
+run({
+  params: {
+    pageSize: 20,
+  }
+});
+```
+
+例子如下：
+
+<code src="./demos/demo2.tsx"></code>
+
+或者是 NocoBase 的 resource & action 请求：
+
+```ts
+const { data, run } = useRequest({
+  resource: 'users',
+  action: 'list',
+  params: {
+    pageSize: 20,
+  },
+});
+
+// useRequest 传的是 ResourceActionOptions，所以 run 直接传 action params 就可以了。
+run({
+  pageSize: 50,
+});
+```
+
+例子如下：
+
+<code src="./demos/demo1.tsx"></code>
+
+也可以是自定义的异步函数：
+
+```ts
+const { data, loading, run, refresh, params } = useRequest((...params) => Promise.resolve({}));
+
+run(...params);
+```
+
+更多用法查看 ahooks 的 [useRequest()](https://ahooks.js.org/hooks/use-request/index)
+
+## useResource
+
+```ts
+function useResource(name: string, of?: string | number): IResource;
+```
+
+资源是 NocoBase 的核心概念，包括：
+
+- 独立资源，如 `posts`
+- 关系资源，如 `posts.tags` `posts.user` `posts.comments`
+
+资源 URI
+
+```bash
+# 独立资源，文章
+/api/posts
+# 关系资源，文章 ID=1 的评论
+/api/posts/1/comments
+```
+
+通过 APIClient 获取资源
+
+```ts
+const api = new APIClient();
+
+api.resource('posts');
+api.resource('posts.comments', 1);
+```
+
+useResource 用法：
+
+```ts
+const resource = useResource('posts');
+const resource = useResource('posts.comments', 1);
+```
+
+resource 的实际场景用例参见：
+
+- [useCollection()](collection-manager#usecollection)
+- [useCollectionField()](collection-manager#usecollectionfield)
diff --git a/packages/core/client/docs/zh-CN/core/data-block/data-block-provider.md b/packages/core/client/docs/zh-CN/core/data-block/data-block-provider.md
index 6aeaec0492..1ffc718afd 100644
--- a/packages/core/client/docs/zh-CN/core/data-block/data-block-provider.md
+++ b/packages/core/client/docs/zh-CN/core/data-block/data-block-provider.md
@@ -37,7 +37,7 @@ Table 中的字段信息及列表数据，都是存储在数据库中的。
 
 - `DataBlockProvider`：封装了下面的所有组件，并提供了区块属性
   - [CollectionProvider](/core/data-source/collection-provider) / [AssociationProvider](/core/data-source/association-provider): 根据 `DataBlockProvider` 提供的上下文信息，查询对应数据表数据及关系字段信息并传递
-  - [BlockResourceProvider](/core/data-block/data-block-resource-provider): 根据 `DataBlockProvider` 提供的上下文信息，构建区块 [Resource](https://docs.nocobase.com/api/sdk#resource-action) API，用于区块数据的增删改查
+  - [BlockResourceProvider](/core/data-block/data-block-resource-provider): 根据 `DataBlockProvider` 提供的上下文信息，构建区块 [Resource](/core/request) API，用于区块数据的增删改查
   - [BlockRequestProvider](/core/data-block/data-block-request-provider): 根据 `DataBlockProvider` 提供的上下文信息，自动调用 `BlockResourceProvider` 提供的 `resource.get()` 或 `resource.list()` 发起请求，得到区块数据，并传递
     - [CollectionRecordProvider](/core/data-source/record-provider): 对于 `resource.get()` 场景，会自动嵌套 `CollectionRecordProvider` 并将 `resource.get()` 请求结果传递下去，`resource.list()` 场景则需要自行使用 `CollectionRecordProvider` 提供数据记录
 
diff --git a/packages/core/client/docs/zh-CN/core/data-block/data-block-resource-provider.md b/packages/core/client/docs/zh-CN/core/data-block/data-block-resource-provider.md
index e94246b6c7..50178dc86f 100644
--- a/packages/core/client/docs/zh-CN/core/data-block/data-block-resource-provider.md
+++ b/packages/core/client/docs/zh-CN/core/data-block/data-block-resource-provider.md
@@ -1,6 +1,6 @@
 # DataBlockResourceProvider
 
-根据 `DataBlockProvider` 中的 `collection`、`association`、`sourceId` 等属性，构建好 [resource](https://docs.nocobase.com/api/sdk#resource-action) 对象，方便子组件对区块数据的增删改查操作，其内置在 [DataBlockProvider](/core/data-block/data-block-provider) 中
+根据 `DataBlockProvider` 中的 `collection`、`association`、`sourceId` 等属性，构建好 [resource](/core/request) 对象，方便子组件对区块数据的增删改查操作，其内置在 [DataBlockProvider](/core/data-block/data-block-provider) 中
 
 
 ## useDataBlockResource
diff --git a/packages/core/client/docs/zh-CN/core/request/demos/demo1.tsx b/packages/core/client/docs/zh-CN/core/request/demos/demo1.tsx
new file mode 100644
index 0000000000..dbc18123d2
--- /dev/null
+++ b/packages/core/client/docs/zh-CN/core/request/demos/demo1.tsx
@@ -0,0 +1,24 @@
+import { APIClient, APIClientProvider, compose, useRequest } from '@nocobase/client';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+
+const apiClient = new APIClient();
+
+const mock = new MockAdapter(apiClient.axios);
+
+mock.onGet('/users:get').reply(200, {
+  data: { id: 1, name: 'John Smith' },
+});
+
+const providers = [[APIClientProvider, { apiClient }]];
+
+export default compose(...providers)(() => {
+  const { data } = useRequest<{
+    data: any;
+  }>({
+    resource: 'users',
+    action: 'get',
+    params: {},
+  });
+  return <div>{data?.data?.name}</div>;
+});
diff --git a/packages/core/client/docs/zh-CN/core/request/demos/demo2.tsx b/packages/core/client/docs/zh-CN/core/request/demos/demo2.tsx
new file mode 100644
index 0000000000..823a5dbb41
--- /dev/null
+++ b/packages/core/client/docs/zh-CN/core/request/demos/demo2.tsx
@@ -0,0 +1,23 @@
+import { APIClient, APIClientProvider, compose, useRequest } from '@nocobase/client';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+
+const apiClient = new APIClient();
+
+const mock = new MockAdapter(apiClient.axios);
+
+mock.onGet('/users:get').reply(200, {
+  data: { id: 1, name: 'John Smith' },
+});
+
+const providers = [[APIClientProvider, { apiClient }]];
+
+export default compose(...providers)(() => {
+  const { data } = useRequest<{
+    data: any;
+  }>({
+    url: 'users:get',
+    method: 'get',
+  });
+  return <div>{data?.data?.name}</div>;
+});
diff --git a/packages/core/client/docs/zh-CN/core/request/demos/demo3.tsx b/packages/core/client/docs/zh-CN/core/request/demos/demo3.tsx
new file mode 100644
index 0000000000..d27bf0470f
--- /dev/null
+++ b/packages/core/client/docs/zh-CN/core/request/demos/demo3.tsx
@@ -0,0 +1,69 @@
+import { uid } from '@formily/shared';
+import { APIClient, APIClientProvider, useAPIClient, useRequest } from '@nocobase/client';
+import { Button, Input, Space, Table } from 'antd';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+
+const apiClient = new APIClient();
+
+const mock = new MockAdapter(apiClient.axios);
+const sleep = (value: number) => new Promise((resolve) => setTimeout(resolve, value));
+
+mock.onGet('/users:list').reply(async () => {
+  await sleep(1000);
+  return [
+    200,
+    {
+      data: [
+        { id: 1, name: uid() },
+        { id: 2, name: uid() },
+      ],
+    },
+  ];
+});
+
+const ComponentA = () => {
+  console.log('ComponentA');
+  const { data, loading } = useRequest<{
+    data: any;
+  }>(
+    {
+      url: 'users:list',
+      method: 'get',
+    },
+    {
+      uid: 'test', // 当指定了 uid 的 useRequest 的结果，可以通过 api.service(uid) 获取
+    },
+  );
+  return (
+    <Table
+      pagination={false}
+      rowKey={'id'}
+      loading={loading}
+      dataSource={data?.data}
+      columns={[{ title: 'Name', dataIndex: 'name' }]}
+    />
+  );
+};
+
+const ComponentB = () => {
+  console.log('ComponentB');
+  const apiClient = useAPIClient();
+  return (
+    <Space>
+      <Input />
+      <Button onClick={() => apiClient.service('test')?.run()}>提交</Button>
+    </Space>
+  );
+};
+
+export default () => {
+  return (
+    <APIClientProvider apiClient={apiClient}>
+      <ComponentB />
+      <br />
+      <br />
+      <ComponentA />
+    </APIClientProvider>
+  );
+};
diff --git a/packages/core/client/docs/zh-CN/core/request/index.md b/packages/core/client/docs/zh-CN/core/request/index.md
new file mode 100644
index 0000000000..d442a20194
--- /dev/null
+++ b/packages/core/client/docs/zh-CN/core/request/index.md
@@ -0,0 +1,167 @@
+# APIClient
+
+## APIClient
+
+```ts
+class APIClient {
+  // axios 实例
+  axios: AxiosInstance;
+  // 缓存带 uid 的 useRequest({}, {uid}) 的结果，可供其他组件调用
+  services: Record<string, Result<any, any>>;
+  // 构造器
+  constructor(instance?: AxiosInstance | AxiosRequestConfig);
+  // 客户端请求，支持 AxiosRequestConfig 和 ResourceActionOptions
+  request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D> | ResourceActionOptions): Promise<R>;
+  // 获取资源
+  resource<R = IResource>(name: string, of?: any): R;
+}
+```
+
+示例
+
+```ts
+import axios from 'axios';
+
+// 不传参时，内部直接创建 axios 实例
+const apiClient = new APIClient();
+
+// 提供 AxiosRequestConfig 配置参数
+const apiClient = new APIClient({
+  baseURL: '',
+});
+
+// 提供 AxiosInstance
+const instance = axios.create({
+  baseURL: '',
+});
+const apiClient = new APIClient(instance);
+
+// 常规请求
+const response = await apiClient.request({ url });
+
+// NocoBase 特有的资源操作
+const response = await apiClient.resource('posts').list();
+
+// 请求共享
+const { data, loading, run } = apiClient.service('uid');
+```
+
+`api.service(uid)` 的例子，ComponentB 里刷新 ComponentA 的请求数据
+
+<code src="./demos/demo3.tsx"></code>
+
+## APIClientProvider
+
+提供 APIClient 实例的上下文。
+
+```tsx | pure
+const apiClient = new APIClient();
+
+<APIClientProvider apiClient={apiClient}></APIClientProvider>
+```
+
+## useAPIClient
+
+获取当前上下文的 APIClient 实例。
+
+```ts
+const apiClient = useAPIClient();
+```
+
+## useRequest
+
+```ts
+function useRequest<P>(
+  service: AxiosRequestConfig<P> | ResourceActionOptions<P> | FunctionService,
+  options?: Options<any, any>,
+);
+```
+
+支持 `axios.request(config)`，config 详情查看 [axios](https://github.com/axios/axios#request-config)
+
+```ts
+const { data, loading, refresh, run, params } = useRequest({ url: '/users' });
+
+// useRequest 里传的是 AxiosRequestConfig，所以 run 里传的也是 AxiosRequestConfig
+run({
+  params: {
+    pageSize: 20,
+  }
+});
+```
+
+例子如下：
+
+<code src="./demos/demo2.tsx"></code>
+
+或者是 NocoBase 的 resource & action 请求：
+
+```ts
+const { data, run } = useRequest({
+  resource: 'users',
+  action: 'list',
+  params: {
+    pageSize: 20,
+  },
+});
+
+// useRequest 传的是 ResourceActionOptions，所以 run 直接传 action params 就可以了。
+run({
+  pageSize: 50,
+});
+```
+
+例子如下：
+
+<code src="./demos/demo1.tsx"></code>
+
+也可以是自定义的异步函数：
+
+```ts
+const { data, loading, run, refresh, params } = useRequest((...params) => Promise.resolve({}));
+
+run(...params);
+```
+
+更多用法查看 ahooks 的 [useRequest()](https://ahooks.js.org/hooks/use-request/index)
+
+## useResource
+
+```ts
+function useResource(name: string, of?: string | number): IResource;
+```
+
+资源是 NocoBase 的核心概念，包括：
+
+- 独立资源，如 `posts`
+- 关系资源，如 `posts.tags` `posts.user` `posts.comments`
+
+资源 URI
+
+```bash
+# 独立资源，文章
+/api/posts
+# 关系资源，文章 ID=1 的评论
+/api/posts/1/comments
+```
+
+通过 APIClient 获取资源
+
+```ts
+const api = new APIClient();
+
+api.resource('posts');
+api.resource('posts.comments', 1);
+```
+
+useResource 用法：
+
+```ts
+const resource = useResource('posts');
+const resource = useResource('posts.comments', 1);
+```
+
+resource 的实际场景用例参见：
+
+- [useCollection()](collection-manager#usecollection)
+- [useCollectionField()](collection-manager#usecollectionfield)
diff --git a/packages/core/client/src/api-client/index.md b/packages/core/client/src/api-client/index.md
index e4c67d46d3..1804df06b2 100644
--- a/packages/core/client/src/api-client/index.md
+++ b/packages/core/client/src/api-client/index.md
@@ -166,8 +166,3 @@ useResource 用法：
 const resource = useResource('posts');
 const resource = useResource('posts.comments', 1);
 ```
-
-resource 的实际场景用例参见：
-
-- [useCollection()](collection-manager#usecollection)
-- [useCollectionField()](collection-manager#usecollectionfield)
diff --git a/packages/core/client/src/application/__tests__/Application.test.tsx b/packages/core/client/src/application/__tests__/Application.test.tsx
index e44217888e..a45689fe44 100644
--- a/packages/core/client/src/application/__tests__/Application.test.tsx
+++ b/packages/core/client/src/application/__tests__/Application.test.tsx
@@ -386,7 +386,7 @@ describe('Application', () => {
       render(<Root />);
 
       await sleep(10);
-      expect(screen.getByText('Load Plugin Error')).toBeInTheDocument();
+      expect(screen.getByText('App Error')).toBeInTheDocument();
     });
 
     it('replace Component', async () => {
diff --git a/packages/core/client/src/application/components/defaultComponents.tsx b/packages/core/client/src/application/components/defaultComponents.tsx
index f011954c89..aeb2c475b9 100644
--- a/packages/core/client/src/application/components/defaultComponents.tsx
+++ b/packages/core/client/src/application/components/defaultComponents.tsx
@@ -14,7 +14,7 @@ const Loading: FC = () => <div>Loading...</div>;
 const AppError: FC<{ error: Error }> = ({ error }) => {
   return (
     <div>
-      <div>Load Plugin Error</div>
+      <div>App Error</div>
       {error?.message}
       {process.env.__TEST__ && error?.stack}
     </div>
diff --git a/packages/core/client/src/application/hoc/withDynamicSchemaProps.tsx b/packages/core/client/src/application/hoc/withDynamicSchemaProps.tsx
index 6c653e8c88..df68c317b7 100644
--- a/packages/core/client/src/application/hoc/withDynamicSchemaProps.tsx
+++ b/packages/core/client/src/application/hoc/withDynamicSchemaProps.tsx
@@ -18,7 +18,10 @@ interface WithSchemaHookOptions {
   displayName?: string;
 }
 
-export function withDynamicSchemaProps<T = any>(Component: any, options: WithSchemaHookOptions = {}) {
+export function withDynamicSchemaProps<T = any>(
+  Component: React.ComponentType<T>,
+  options: WithSchemaHookOptions = {},
+) {
   const displayName = options.displayName || Component.displayName || Component.name;
   const ComponentWithProps: ComponentType<T> = (props) => {
     const { dn, findComponent } = useDesignable();
diff --git a/packages/core/client/src/index.ts b/packages/core/client/src/index.ts
index e38c4978c2..b3c6b0c668 100644
--- a/packages/core/client/src/index.ts
+++ b/packages/core/client/src/index.ts
@@ -63,10 +63,10 @@ export * from './variables';
 export { withDynamicSchemaProps } from './application/hoc/withDynamicSchemaProps';
 
 export * from './modules/blocks/BlockSchemaToolbar';
-export * from './modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem';
 export * from './modules/blocks/data-blocks/form';
 export * from './modules/blocks/data-blocks/table';
 export * from './modules/blocks/data-blocks/table-selector';
 export * from './modules/blocks/useParentRecordCommon';
+export * from './modules/blocks/index';
 
 export { DeclareVariable } from './modules/variable/DeclareVariable';
diff --git a/packages/core/client/src/modules/blocks/data-blocks/details-multi/hooks/index.ts b/packages/core/client/src/modules/blocks/data-blocks/details-multi/hooks/index.ts
new file mode 100644
index 0000000000..8e61dbd187
--- /dev/null
+++ b/packages/core/client/src/modules/blocks/data-blocks/details-multi/hooks/index.ts
@@ -0,0 +1,3 @@
+export * from './useDetailsWithPaginationBlockParams';
+export * from './useDetailsWithPaginationProps';
+export * from './useDetailsWithPaginationDecoratorProps';
diff --git a/packages/core/client/src/modules/blocks/data-blocks/details-multi/index.ts b/packages/core/client/src/modules/blocks/data-blocks/details-multi/index.ts
new file mode 100644
index 0000000000..8f95a33778
--- /dev/null
+++ b/packages/core/client/src/modules/blocks/data-blocks/details-multi/index.ts
@@ -0,0 +1,2 @@
+export * from './hooks';
+export * from './setDataLoadingModeSettingsItem';
diff --git a/packages/core/client/src/modules/blocks/data-blocks/details-single/hooks/index.ts b/packages/core/client/src/modules/blocks/data-blocks/details-single/hooks/index.ts
new file mode 100644
index 0000000000..85a5c57245
--- /dev/null
+++ b/packages/core/client/src/modules/blocks/data-blocks/details-single/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './useDetailsDecoratorProps';
+export * from './useDetailsProps';
diff --git a/packages/core/client/src/modules/blocks/data-blocks/details-single/index.ts b/packages/core/client/src/modules/blocks/data-blocks/details-single/index.ts
new file mode 100644
index 0000000000..4cc90d02bd
--- /dev/null
+++ b/packages/core/client/src/modules/blocks/data-blocks/details-single/index.ts
@@ -0,0 +1 @@
+export * from './hooks';
diff --git a/packages/core/client/src/modules/blocks/data-blocks/table/index.ts b/packages/core/client/src/modules/blocks/data-blocks/table/index.ts
index 646b14e223..f0f4eb2f72 100644
--- a/packages/core/client/src/modules/blocks/data-blocks/table/index.ts
+++ b/packages/core/client/src/modules/blocks/data-blocks/table/index.ts
@@ -16,3 +16,4 @@ export * from './tableColumnSettings';
 export * from './TableColumnInitializers';
 export * from './createTableBlockUISchema';
 export * from './hooks/useTableBlockDecoratorProps';
+export * from './hooks/useTableBlockProps';
diff --git a/packages/core/client/src/modules/blocks/index.ts b/packages/core/client/src/modules/blocks/index.ts
new file mode 100644
index 0000000000..dece9dd13b
--- /dev/null
+++ b/packages/core/client/src/modules/blocks/index.ts
@@ -0,0 +1,2 @@
+export * from './data-blocks/details-multi';
+export * from './data-blocks/details-single';
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
index 50c851a633..c420af24d2 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
@@ -11,7 +11,7 @@ import { observer, RecursionField, useField, useFieldSchema } from '@formily/rea
 import { Drawer } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
-import { OpenSize } from './';
+import { OpenSize } from './types';
 import { useStyles } from './Action.Drawer.style';
 import { useActionContext } from './hooks';
 import { useSetAriaLabelForDrawer } from './hooks/useSetAriaLabelForDrawer';
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
index ac4ceb4575..14f2738062 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
@@ -12,10 +12,10 @@ import { observer, RecursionField, useField, useFieldSchema } from '@formily/rea
 import { Modal, ModalProps } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
-import { OpenSize, useActionContext } from '.';
 import { useToken } from '../../../style';
 import { useSetAriaLabelForModal } from './hooks/useSetAriaLabelForModal';
-import { ComposedActionDrawer } from './types';
+import { ComposedActionDrawer, OpenSize } from './types';
+import { useActionContext } from './hooks';
 
 const openSizeWidthMap = new Map<OpenSize, string>([
   ['small', '40%'],
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Popover.tsx b/packages/core/client/src/schema-component/antd/action/Action.Popover.tsx
deleted file mode 100644
index d3436f53a5..0000000000
--- a/packages/core/client/src/schema-component/antd/action/Action.Popover.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * This file is part of the NocoBase (R) project.
- * Copyright (c) 2020-2024 NocoBase Co., Ltd.
- * Authors: NocoBase Team.
- *
- * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
- * For more information, please refer to: https://www.nocobase.com/agreement.
- */
-
diff --git a/packages/core/client/src/schema-component/antd/action/Action.tsx b/packages/core/client/src/schema-component/antd/action/Action.tsx
index 52ff8ae02c..ff9768fac1 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.tsx
@@ -42,11 +42,11 @@ import useStyles from './Action.style';
 import { ActionContextProvider } from './context';
 import { useA } from './hooks';
 import { useGetAriaLabelOfAction } from './hooks/useGetAriaLabelOfAction';
-import { ComposedAction } from './types';
+import { ActionProps, ComposedAction } from './types';
 import { linkageAction, setInitialActionState } from './utils';
 
 export const Action: ComposedAction = withDynamicSchemaProps(
-  observer((props: any) => {
+  observer((props: ActionProps) => {
     const {
       popover,
       confirm,
@@ -59,6 +59,7 @@ export const Action: ComposedAction = withDynamicSchemaProps(
       title,
       onClick,
       style,
+      loading,
       openSize: os,
       disabled: propsDisabled,
       actionCallback,
@@ -180,14 +181,14 @@ export const Action: ComposedAction = withDynamicSchemaProps(
           aria-label={getAriaLabel()}
           {...others}
           onMouseEnter={handleMouseEnter}
-          loading={field?.data?.loading}
+          loading={field?.data?.loading || loading}
           icon={icon ? <Icon type={icon} /> : null}
           disabled={disabled}
           style={buttonStyle}
           onClick={handleButtonClick}
           component={tarComponent || Button}
           className={classnames(componentCls, hashId, className, 'nb-action')}
-          type={props.type === 'danger' ? undefined : props.type}
+          type={(props as any).type === 'danger' ? undefined : props.type}
         >
           {actionTitle}
           <Designer {...designerProps} />
diff --git a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx
index 610a7dca79..bf06ff2ba4 100644
--- a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx
+++ b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx
@@ -9,7 +9,7 @@
 
 import { cx } from '@emotion/css';
 import { RecursionField, observer, useFieldSchema } from '@formily/react';
-import { Space } from 'antd';
+import { Space, SpaceProps } from 'antd';
 import React, { CSSProperties, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import { DndContext } from '../../common';
@@ -17,10 +17,11 @@ import { useDesignable, useProps } from '../../hooks';
 import { useSchemaInitializerRender } from '../../../application';
 import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
 
-interface ActionBarContextForceProps {
-  layout?: 'one-column' | 'tow-columns';
+export interface ActionBarProps {
+  layout?: 'one-column' | 'two-columns';
   style?: CSSProperties;
   className?: string;
+  spaceProps?: SpaceProps;
 }
 
 export interface ActionBarContextValue {
@@ -28,7 +29,7 @@ export interface ActionBarContextValue {
   /**
    * override props
    */
-  forceProps?: ActionBarContextForceProps;
+  forceProps?: ActionBarProps;
   parentComponents?: string[];
 }
 
@@ -61,7 +62,7 @@ export const ActionBar = withDynamicSchemaProps(
     const { forceProps = {} } = useActionBarContext();
 
     // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
-    const { layout = 'tow-columns', style, spaceProps, ...others } = { ...useProps(props), ...forceProps } as any;
+    const { layout = 'two-columns', style, spaceProps, ...others } = { ...useProps(props), ...forceProps } as any;
 
     const fieldSchema = useFieldSchema();
     const { render } = useSchemaInitializerRender(fieldSchema['x-initializer'], fieldSchema['x-initializer-props']);
diff --git a/packages/core/client/src/schema-component/antd/action/context.tsx b/packages/core/client/src/schema-component/antd/action/context.tsx
index be51c5877f..cc7067521d 100644
--- a/packages/core/client/src/schema-component/antd/action/context.tsx
+++ b/packages/core/client/src/schema-component/antd/action/context.tsx
@@ -7,11 +7,10 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { Schema } from '@formily/react';
-import { DrawerProps, ModalProps } from 'antd';
 import React, { createContext, useEffect, useRef, useState } from 'react';
 import { useActionContext } from './hooks';
 import { useDataBlockRequest } from '../../../data-source';
+import { ActionContextProps } from './types';
 
 export const ActionContext = createContext<ActionContextProps>({});
 ActionContext.displayName = 'ActionContext';
@@ -46,21 +45,3 @@ export const ActionContextProvider: React.FC<ActionContextProps & { value?: Acti
     </ActionContext.Provider>
   );
 };
-
-export type OpenSize = 'small' | 'middle' | 'large';
-export interface ActionContextProps {
-  button?: any;
-  visible?: boolean;
-  setVisible?: (v: boolean) => void;
-  openMode?: 'drawer' | 'modal' | 'page';
-  snapshot?: boolean;
-  openSize?: OpenSize;
-  containerRefKey?: string;
-  formValueChanged?: boolean;
-  setFormValueChanged?: (v: boolean) => void;
-  fieldSchema?: Schema;
-  drawerProps?: DrawerProps;
-  modalProps?: ModalProps;
-  submitted?: boolean;
-  setSubmitted?: (v: boolean) => void;
-}
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-container.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-container.tsx
new file mode 100644
index 0000000000..71dc9d9279
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-container.tsx
@@ -0,0 +1,49 @@
+import { useActionContext } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'Action',
+        title: 'Open',
+        'x-component-props': {
+          openMode: 'drawer',
+        },
+        properties: {
+          drawer: {
+            type: 'void',
+            'x-component': 'Action.Container',
+            title: 'Title',
+            properties: {
+              footer: {
+                type: 'void',
+                'x-component': 'Action.Container.Footer',
+                properties: {
+                  close: {
+                    title: 'Close',
+                    'x-component': 'Action',
+                    'x-use-component-props': function useActionProps() {
+                      const { setVisible } = useActionContext();
+                      return {
+                        type: 'default',
+                        onClick() {
+                          setVisible(false);
+                        },
+                      };
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-context.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-context.tsx
new file mode 100644
index 0000000000..bec1655bbe
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-context.tsx
@@ -0,0 +1,59 @@
+import { ISchema, observer } from '@formily/react';
+import {
+  Action,
+  ActionContextProvider,
+  Form,
+  FormItem,
+  Input,
+  SchemaComponent,
+  SchemaComponentProvider,
+  useActionContext,
+} from '@nocobase/client';
+import React, { useState } from 'react';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    drawer1: {
+      'x-component': 'Action.Drawer',
+      type: 'void',
+      title: 'Drawer Title',
+      properties: {
+        hello1: {
+          'x-content': 'Hello',
+          title: 'T1',
+        },
+        footer1: {
+          'x-component': 'Action.Drawer.Footer',
+          type: 'void',
+          properties: {
+            close1: {
+              title: 'Close',
+              'x-component': 'Action',
+              'x-use-component-props': function useActionProps() {
+                const { setVisible } = useActionContext();
+                return {
+                  onClick() {
+                    setVisible(false);
+                  },
+                };
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export default observer(() => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <SchemaComponentProvider components={{ Form, Action, Input, FormItem }}>
+      <ActionContextProvider value={{ visible, setVisible }}>
+        <a onClick={() => setVisible(true)}>Open</a>
+        <SchemaComponent schema={schema} />
+      </ActionContextProvider>
+    </SchemaComponentProvider>
+  );
+});
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-link.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-link.tsx
new file mode 100644
index 0000000000..83ce03763c
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-link.tsx
@@ -0,0 +1,17 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'Action.Link',
+        title: 'Edit',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-modal.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-modal.tsx
new file mode 100644
index 0000000000..8aede324d1
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-modal.tsx
@@ -0,0 +1,103 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { Space, App as AntdApp } from 'antd';
+import { useAPIClient, useActionContext } from '@nocobase/client';
+import { useForm } from '@formily/react';
+
+const useCloseActionProps = () => {
+  const { setVisible } = useActionContext();
+  return {
+    type: 'default',
+    onClick() {
+      setVisible(false);
+    },
+  };
+};
+
+const useSubmitActionProps = () => {
+  const { setVisible } = useActionContext();
+  const api = useAPIClient();
+  const { message } = AntdApp.useApp();
+  const form = useForm();
+
+  return {
+    type: 'primary',
+    async onClick() {
+      // Submit the form
+      await form.submit();
+      const values = form.values;
+
+      console.log('values:', values);
+      const { data } = await api.request({ url: 'test', data: values, method: 'POST' });
+      if (data.data === 'ok') {
+        message.success('Submit success');
+        setVisible(false);
+        form.reset(); // 提交成功后重置表单
+      }
+    },
+  };
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-component': Space,
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'Action',
+        title: 'Open Modal',
+        'x-component-props': {
+          openSize: 'small',
+        },
+        properties: {
+          drawer: {
+            type: 'void',
+            'x-component': 'Action.Modal',
+            title: 'Modal Title',
+            'x-decorator': 'FormV2',
+            properties: {
+              username: {
+                type: 'string',
+                title: `Username`,
+                required: true,
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+              },
+              footer: {
+                type: 'void',
+                'x-component': 'Action.Modal.Footer',
+                properties: {
+                  close: {
+                    title: 'Close',
+                    'x-component': 'Action',
+                    'x-component-props': {
+                      type: 'default',
+                    },
+                    'x-use-component-props': 'useCloseActionProps',
+                  },
+                  submit: {
+                    title: 'Submit',
+                    'x-component': 'Action',
+                    'x-use-component-props': 'useSubmitActionProps',
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    scopes: {
+      useSubmitActionProps,
+      useCloseActionProps,
+    },
+  },
+  apis: {
+    test: { data: 'ok' },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-popover.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-popover.tsx
new file mode 100644
index 0000000000..89832901d7
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-popover.tsx
@@ -0,0 +1,33 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        'x-component': 'Action',
+        'x-component-props': {
+          type: 'primary',
+          popover: true,
+        },
+        type: 'void',
+        title: 'Open',
+        properties: {
+          popover: {
+            type: 'void',
+            'x-component': 'Action.Popover',
+            properties: {
+              hello: {
+                type: 'void',
+                'x-content': 'Hello',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-one-column.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-one-column.tsx
new file mode 100644
index 0000000000..89cb6e106d
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-one-column.tsx
@@ -0,0 +1,77 @@
+import { ActionInitializer, SchemaInitializer } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const addActionButton = new SchemaInitializer({
+  name: 'addActionButton',
+  designable: true,
+  title: 'Configure actions',
+  style: {
+    marginLeft: 8,
+  },
+  items: [
+    {
+      type: 'itemGroup',
+      title: 'Enable actions',
+      name: 'enableActions',
+      children: [
+        {
+          name: 'action1',
+          title: '{{t("Action 1")}}',
+          Component: 'ActionInitializer',
+          schema: {
+            title: 'Action 1',
+            'x-component': 'Action',
+            'x-action': 'a1', // unique identifier
+          },
+        },
+        {
+          name: 'action2',
+          title: '{{t("Action 2")}}',
+          Component: 'ActionInitializer',
+          schema: {
+            title: 'Action 2',
+            'x-component': 'Action',
+            'x-action': 'a2', // unique identifier
+          },
+        },
+      ],
+    },
+  ],
+});
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'ActionBar',
+        'x-initializer': 'addActionButton',
+        'x-component-props': {
+          layout: 'one-column',
+        },
+        properties: {
+          a1: {
+            title: 'Action 1',
+            'x-component': 'Action',
+            'x-action': 'a1',
+          },
+          a2: {
+            title: 'Action 2',
+            'x-component': 'Action',
+            'x-action': 'a2',
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    schemaInitializers: [addActionButton],
+    components: {
+      ActionInitializer,
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-two-columns.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-two-columns.tsx
new file mode 100644
index 0000000000..4dce2ac3a9
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-two-columns.tsx
@@ -0,0 +1,81 @@
+import { ActionInitializer, SchemaInitializer } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const addActionButton = new SchemaInitializer({
+  name: 'addActionButton',
+  designable: true,
+  title: 'Configure actions',
+  style: {
+    marginLeft: 8,
+  },
+  items: [
+    {
+      type: 'itemGroup',
+      title: 'Enable actions',
+      name: 'enableActions',
+      children: [
+        {
+          name: 'action1',
+          title: '{{t("Action 1")}}',
+          Component: 'ActionInitializer',
+          schema: {
+            title: 'Action 1',
+            'x-component': 'Action',
+            'x-action': 'a1',
+            'x-align': 'left',
+          },
+        },
+        {
+          name: 'action2',
+          title: '{{t("Action 2")}}',
+          Component: 'ActionInitializer',
+          schema: {
+            title: 'Action 2',
+            'x-component': 'Action',
+            'x-action': 'a2',
+            'x-align': 'right',
+          },
+        },
+      ],
+    },
+  ],
+});
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'ActionBar',
+        'x-initializer': 'addActionButton',
+        'x-component-props': {
+          layout: 'two-columns',
+        },
+        properties: {
+          a1: {
+            title: 'Action 1',
+            'x-component': 'Action',
+            'x-action': 'a1',
+            'x-align': 'left',
+          },
+          a2: {
+            title: 'Action 2',
+            'x-component': 'Action',
+            'x-action': 'a2',
+            'x-align': 'right',
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    schemaInitializers: [addActionButton],
+    components: {
+      ActionInitializer,
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..e2025dbfb5
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/basic.tsx
@@ -0,0 +1,23 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'Action',
+        'x-component-props': {
+          ghost: true, // ButtonProps
+          type: 'dashed', // ButtonProps
+          danger: true, // ButtonProps
+          title: 'Open', // title
+        },
+        // title: 'Open', // It's also possible here
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/confirm.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/confirm.tsx
new file mode 100644
index 0000000000..fb357752e4
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/confirm.tsx
@@ -0,0 +1,35 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { Space, App as AntdApp } from 'antd';
+import { ActionProps } from '@nocobase/client';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-component': Space,
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'Action',
+        title: 'Delete',
+        'x-use-component-props': function useActionProps(): ActionProps {
+          const { message } = AntdApp.useApp();
+
+          return {
+            confirm: {
+              // confirm props
+              title: 'Delete',
+              content: 'Are you sure you want to delete it?',
+            },
+            onClick() {
+              // after confirm ok
+              message.success('Deleted!');
+            },
+          };
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/custom-component.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/custom-component.tsx
new file mode 100644
index 0000000000..44576f6d20
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/custom-component.tsx
@@ -0,0 +1,38 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { Button, Space } from 'antd';
+import React from 'react';
+
+const ComponentButton = (props) => {
+  return <Button {...props}>Custom Component</Button>;
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-component': Space,
+    properties: {
+      test1: {
+        type: 'void',
+        'x-component': 'Action',
+        'x-component-props': {
+          component: 'ComponentButton', // string type
+        },
+      },
+      test2: {
+        type: 'void',
+        'x-component': 'Action',
+        'x-component-props': {
+          component: ComponentButton, // ComponentType type
+        },
+      },
+    },
+  },
+  appOptions: {
+    components: {
+      ComponentButton, // register custom component
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-basic.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-basic.tsx
new file mode 100644
index 0000000000..f56e96e94e
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-basic.tsx
@@ -0,0 +1,26 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { Space } from 'antd';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-component': Space,
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'Action',
+        title: 'Open Drawer',
+        properties: {
+          drawer: {
+            type: 'void',
+            'x-component': 'Action.Drawer',
+            title: 'Drawer Title',
+          },
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-footer.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-footer.tsx
new file mode 100644
index 0000000000..ec41e92455
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-footer.tsx
@@ -0,0 +1,79 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { Space } from 'antd';
+import { useActionContext } from '@nocobase/client';
+
+const useCloseActionProps = () => {
+  const { setVisible } = useActionContext();
+  return {
+    type: 'default',
+    onClick() {
+      setVisible(false);
+    },
+  };
+};
+
+const useSubmitActionProps = () => {
+  const { setVisible } = useActionContext();
+  return {
+    type: 'primary',
+    onClick() {
+      console.log('submit');
+      setVisible(false);
+    },
+  };
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-component': Space,
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'Action',
+        title: 'Open Drawer',
+        properties: {
+          drawer: {
+            type: 'void',
+            'x-component': 'Action.Drawer',
+            title: 'Drawer Title',
+            properties: {
+              content: {
+                type: 'void',
+                'x-content': 'Hello',
+              },
+              footer: {
+                type: 'void',
+                'x-component': 'Action.Drawer.Footer', // must be `Action.Drawer.Footer`
+                properties: {
+                  close: {
+                    title: 'Close',
+                    'x-component': 'Action',
+                    'x-use-component-props': 'useCloseActionProps',
+                  },
+                  submit: {
+                    title: 'Submit',
+                    'x-component': 'Action',
+                    'x-use-component-props': 'useSubmitActionProps',
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    scopes: {
+      useCloseActionProps,
+      useSubmitActionProps,
+    },
+  },
+  apis: {
+    test: { data: 'ok' },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-openSize.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-openSize.tsx
new file mode 100644
index 0000000000..7a1be043ab
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-openSize.tsx
@@ -0,0 +1,36 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { Space } from 'antd';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-component': Space,
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'Action',
+        title: 'Open Drawer',
+        'x-component-props': {
+          openSize: 'large', // open drawer size
+        },
+        properties: {
+          drawer: {
+            type: 'void',
+            title: 'Drawer Title',
+            'x-component': 'Action.Drawer',
+            properties: {
+              // Drawer content
+              hello: {
+                type: 'void',
+                'x-content': 'Hello',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-with-form.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-with-form.tsx
new file mode 100644
index 0000000000..aec8eade74
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-with-form.tsx
@@ -0,0 +1,101 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { Space, App as AntdApp } from 'antd';
+import { useAPIClient, useActionContext } from '@nocobase/client';
+import { useForm } from '@formily/react';
+
+const useCloseActionProps = () => {
+  const { setVisible } = useActionContext();
+  return {
+    type: 'default',
+    onClick() {
+      setVisible(false);
+    },
+  };
+};
+
+const useSubmitActionProps = () => {
+  const { setVisible } = useActionContext();
+  const api = useAPIClient();
+  const { message } = AntdApp.useApp();
+  const form = useForm();
+
+  return {
+    type: 'primary',
+    async onClick() {
+      // Submit the form
+      await form.submit();
+      const values = form.values;
+
+      console.log('values:', values);
+      const { data } = await api.request({ url: 'test', data: values, method: 'POST' });
+      if (data.data === 'ok') {
+        message.success('Submit success');
+        setVisible(false);
+        form.reset(); // 提交成功后重置表单
+      }
+    },
+  };
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-component': Space,
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'Action',
+        title: 'Open Drawer',
+        properties: {
+          drawer: {
+            type: 'void',
+            'x-component': 'Action.Drawer',
+            title: 'Drawer Title',
+            'x-decorator': 'FormV2', // This uses the `FormV2` component.
+            properties: {
+              username: {
+                // This is a form field.
+                type: 'string',
+                title: `Username`,
+                required: true,
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+              },
+              footer: {
+                type: 'void',
+                'x-component': 'Action.Drawer.Footer',
+                properties: {
+                  close: {
+                    title: 'Close',
+                    'x-component': 'Action',
+                    'x-component-props': {
+                      type: 'default',
+                    },
+                    'x-use-component-props': 'useCloseActionProps',
+                  },
+                  submit: {
+                    title: 'Submit',
+                    'x-component': 'Action',
+                    'x-use-component-props': 'useSubmitActionProps',
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    scopes: {
+      useSubmitActionProps,
+      useCloseActionProps,
+    },
+  },
+  apis: {
+    test: { data: 'ok' },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/dynamic-props.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/dynamic-props.tsx
new file mode 100644
index 0000000000..441fa8b77e
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/dynamic-props.tsx
@@ -0,0 +1,68 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { Space, App as AntdApp } from 'antd';
+import { useAPIClient, ActionProps } from '@nocobase/client';
+
+const useCustomActionProps = (): ActionProps => {
+  const api = useAPIClient();
+  const { message } = AntdApp.useApp();
+
+  return {
+    onClick: async () => {
+      const { data } = await api.request({ url: 'test' });
+      if (data.data.result === 'ok') {
+        message.success('Success!');
+      }
+    },
+  };
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-component': Space,
+    properties: {
+      test1: {
+        type: 'void',
+        'x-component': 'Action',
+        title: 'test1',
+        'x-use-component-props': useCustomActionProps, // function type
+      },
+      test2: {
+        type: 'void',
+        'x-component': 'Action',
+        title: 'test2',
+        'x-use-component-props': function useCustomActionProps(): ActionProps {
+          // inline function type
+          const api = useAPIClient();
+          const { message } = AntdApp.useApp();
+
+          return {
+            onClick: async () => {
+              const { data } = await api.request({ url: 'test' });
+              if (data.data.result === 'ok') {
+                message.success('Success!');
+              }
+            },
+          };
+        },
+      },
+      test3: {
+        type: 'void',
+        'x-component': 'Action',
+        title: 'test2',
+        'x-use-component-props': 'useCustomActionProps', // string type
+      },
+    },
+  },
+  appOptions: {
+    scopes: {
+      useCustomActionProps,
+    },
+  },
+  apis: {
+    test: { data: { result: 'ok' } },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/schema-toolbar.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/schema-toolbar.tsx
new file mode 100644
index 0000000000..17d65644d9
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/schema-toolbar.tsx
@@ -0,0 +1,64 @@
+import { SchemaSettings } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const myActionSettings = new SchemaSettings({
+  name: 'myActionSettings',
+  items: [
+    {
+      name: 'delete',
+      type: 'remove',
+    },
+  ],
+});
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'ActionBar',
+        'x-component-props': {
+          layout: 'two-columns',
+        },
+        properties: {
+          a1: {
+            title: 'Action 1',
+            'x-component': 'Action',
+            'x-action': 'a1',
+            'x-align': 'right',
+            'x-settings': 'myActionSettings',
+          },
+          a2: {
+            title: 'Action 2',
+            'x-component': 'Action',
+            'x-action': 'a2',
+            'x-align': 'right',
+            'x-settings': 'myActionSettings',
+          },
+          a3: {
+            title: 'Action 3',
+            'x-component': 'Action',
+            'x-action': 'a1',
+            'x-align': 'left',
+            'x-settings': 'myActionSettings',
+          },
+          a4: {
+            title: 'Action 4',
+            'x-component': 'Action',
+            'x-action': 'a2',
+            'x-align': 'left',
+            'x-settings': 'myActionSettings',
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    schemaSettings: [myActionSettings],
+  },
+  designable: true,
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/action/index.md b/packages/core/client/src/schema-component/antd/action/index.md
index 490c1339b2..d1c99547ed 100644
--- a/packages/core/client/src/schema-component/antd/action/index.md
+++ b/packages/core/client/src/schema-component/antd/action/index.md
@@ -1,46 +1,206 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Action
 
-## Nodes
+将按钮和各种操作结合在一起，提供了一种统一的方式来处理操作。
 
-- Action
-- Action.Drawer
-- Action.Drawer.Footer
-- Action.Modal
-- Action.Modal.Footer
-- Action.Drawer
-- Action.Drawer.Footer
-- Action.Container
-- Action.Container.Footer
-- ActionBar
+## Action
 
-## Examples
+操作的触发器，默认是 ant-design 的 `Button` 组件，并为后续的弹窗或者抽屉提供上下文。
 
-### Action + Action.Drawer
+```ts
+export interface ActionProps extends ButtonProps {
+  /**
+   * button title
+   */
+  title?: string;
 
-<code src="./demos/demo1.tsx"></code>
+  /**
+   * custom component, replace the default Button component
+   */
+  component?: string | ComponentType<any>;
 
-### ActionContext + Action.Drawer
+  /**
+   * Dynamic rendering of the opened content in conjunction with `Action.Container`.
+   */
+  openMode?: 'drawer' | 'modal' | 'page';
+  /**
+   * The size of the pop-up window, only valid when `openMode: 'modal'`
+   */
+  openSize?: 'small' | 'middle' | 'large';
+  /**
+   * Customize the position of the pop-up window
+   */
+  containerRefKey?: string;
 
-只配置 Action.Drawer，而不需要 Action，结合 ActionContext 自定义按钮。
+  /**
+   * Whether to display the popover, only valid when `openMode: 'popover'`
+   */
+  popover?: boolean;
 
-<code src="./demos/demo2.tsx"></code>
+  /**
+   * When the button is clicked, whether a pop-up confirmation is required
+   */
+  confirm?: false | {
+    title: string;
+    content: string;
+  };
+}
+```
 
-### 不同的打开方式
+### Basic Usage
 
-<code src="./demos/demo3.tsx"></code>
+- `ButtonProp`
+- title
 
-### Action + Action.Popover
+<code src="./demos/new-demos/basic.tsx"></code>
 
-<code src="./demos/demo4.tsx"></code>
+### Custom Component
 
-<code src="./demos/demo5.tsx"></code>
+- component
 
-### ActionBar
+<code src="./demos/new-demos/custom-component.tsx"></code>
 
-<code src="./demos/demo6.tsx"></code>
+### Dynamic Props
+
+这里使用了 `x-use-component-props` 的能力，具体可以查看 [x-use-component-props](https://docs.nocobase.com/development/client/ui-schema/what-is-ui-schema#x-component-props-%E5%92%8C-x-use-component-props)。
+
+<code src="./demos/new-demos/dynamic-props.tsx"></code>
+
+### Confirm
+
+- confirm
+
+<code src="./demos/new-demos/confirm.tsx"></code>
+
+## Action.Link
+
+将 `Button` 组件替换为 `a` 标签。
+
+<code src="./demos/new-demos/action-link.tsx"></code>
+
+## Action.Drawer
+
+主要用于在右侧弹出一个抽屉。
+
+```ts
+interface ActionDrawer extends DrawerProps {}
+```
+
+### Basic Usage
+
+- `DrawerProps`
+
+<code src="./demos/new-demos/drawer-basic.tsx"></code>
+
+### openSize
+
+<code src="./demos/new-demos/drawer-openSize.tsx"></code>
+
+### Footer
+
+Footer 可以放一些按钮，比如取消或者提交等。
+
+其 Schema `x-component` 必须为 `Action.Drawer.Footer` 组件。
+
+<code src="./demos/new-demos/drawer-footer.tsx"></code>
+
+### With Form
+
+<code src="./demos/new-demos/drawer-with-form.tsx"></code>
+
+## Action.Modal
+
+```ts
+interface ActionModal extends ModalProps {}
+```
+
+其用法和 `Action.Drawer` 类似，这里只举一个例子。
+
+<code src="./demos/new-demos/action-modal.tsx"></code>
+
+## Action.Popover
+
+注意，此时 Action 的 `popover` 属性必须为 `true`。
+
+<code src="./demos/new-demos/action-popover.tsx"></code>
+
+## Action.Container
+
+当根据需要动态渲染内容时，可以使用 `Action.Container` + Action `openMode` 属性动态决定。
+
+<code src="./demos/new-demos/action-container.tsx"></code>
+
+## ActionBar
+
+一般用于区块的顶部的操作按钮，其内部会自动处理布局和渲染 [schema-initializer](/core/ui-schema/schema-initializer)。
+
+```ts
+import { SpaceProps } from 'antd'
+
+interface ActionBarProps {
+  layout?: 'one-column' | 'two-columns';
+  style?: CSSProperties;
+  className?: string;
+  spaceProps?: SpaceProps;
+}
+```
+
+### one-column
+
+一列布局，全部靠左。
+
+Schema 中的 `x-action` 是按钮的唯一标识，不能和已有的重复，用于 `ActionInitializer` 的查找和删除。
+
+<code src="./demos/new-demos/actionbar-one-column.tsx"></code>
+
+### two-columns
+
+左右布局，通过 `x-align` 控制。
+
+<code src="./demos/new-demos/actionbar-two-columns.tsx"></code>
+
+## ActionContext
+
+封装在 `Action` 组件内部，用于传递上下文。
+
+```ts
+export type OpenSize = 'small' | 'middle' | 'large';
+export interface ActionContextProps {
+  button?: React.JSX.Element;
+  visible?: boolean;
+  setVisible?: (v: boolean) => void;
+  openMode?: 'drawer' | 'modal' | 'page';
+  snapshot?: boolean;
+  openSize?: OpenSize;
+  /**
+   * Customize the position of the pop-up window
+   */
+  containerRefKey?: string;
+  formValueChanged?: boolean;
+  setFormValueChanged?: (v: boolean) => void;
+  fieldSchema?: Schema;
+  drawerProps?: DrawerProps;
+  modalProps?: ModalProps;
+  submitted?: boolean;
+  setSubmitted?: (v: boolean) => void;
+}
+```
+
+假设 Action 组件无法满足需求，我们可以直接使用 ActionContext 组件进行自定义。
+
+<code src="./demos/new-demos/action-context.tsx"></code>
+
+## ActionSchemaToolbar
+
+用于单个按钮渲染 [SchemaToolbar](/core/ui-schema/schema-toolbar) 和 [SchemaSettings](/core/ui-schema/schema-settings)。
+
+<code src="./demos/new-demos/schema-toolbar.tsx"></code>
+
+## Hooks
+
+### useActionContext()
+
+获取 `ActionContext` 上下文。
+
+```ts
+const { visible, setVisible, fieldSchema } = useActionContext();
+```
diff --git a/packages/core/client/src/schema-component/antd/action/index.tsx b/packages/core/client/src/schema-component/antd/action/index.tsx
index b9f6ad3745..22db0e3b38 100644
--- a/packages/core/client/src/schema-component/antd/action/index.tsx
+++ b/packages/core/client/src/schema-component/antd/action/index.tsx
@@ -16,3 +16,4 @@ export * from './hooks/useGetAriaLabelOfDrawer';
 export * from './hooks/useGetAriaLabelOfModal';
 export * from './hooks/useGetAriaLabelOfPopover';
 export * from './Action.Designer';
+export * from './types';
diff --git a/packages/core/client/src/schema-component/antd/action/types.ts b/packages/core/client/src/schema-component/antd/action/types.ts
index 733026bf97..a03db6377a 100644
--- a/packages/core/client/src/schema-component/antd/action/types.ts
+++ b/packages/core/client/src/schema-component/antd/action/types.ts
@@ -8,14 +8,79 @@
  */
 
 import { ButtonProps, DrawerProps, ModalProps } from 'antd';
+import { ComponentType } from 'react';
+import { Schema } from '@formily/react';
 
-export type ActionProps = ButtonProps & {
-  component?: any;
-  useAction?: () => {
-    run(): Promise<void>;
-  };
+export type OpenSize = 'small' | 'middle' | 'large';
+export interface ActionContextProps {
+  button?: React.JSX.Element;
+  visible?: boolean;
+  setVisible?: (v: boolean) => void;
+  openMode?: 'drawer' | 'modal' | 'page';
+  snapshot?: boolean;
+  openSize?: OpenSize;
+  /**
+   * Customize the position of the pop-up window
+   */
+  containerRefKey?: string;
+  formValueChanged?: boolean;
+  setFormValueChanged?: (v: boolean) => void;
+  fieldSchema?: Schema;
+  drawerProps?: DrawerProps;
+  modalProps?: ModalProps;
+  submitted?: boolean;
+  setSubmitted?: (v: boolean) => void;
+}
+
+export type UseActionType = (callback?: () => void) => {
+  run: () => void | Promise<void>;
 };
 
+export interface ActionProps extends ButtonProps {
+  /**
+   * button title
+   */
+  title?: string;
+
+  /**
+   * custom component, replace the default Button component
+   */
+  component?: string | ComponentType<any>;
+
+  openMode?: ActionContextProps['openMode'];
+  openSize?: ActionContextProps['openSize'];
+  containerRefKey?: ActionContextProps['containerRefKey'];
+
+  /**
+   * Whether to display the popover, only valid when `openMode: 'popover'`
+   */
+  popover?: boolean;
+
+  /**
+   * When the button is clicked, whether a pop-up confirmation is required
+   */
+  confirm?:
+    | false
+    | {
+        title: string;
+        content: string;
+      };
+
+  /**
+   * @deprecated
+   */
+  useAction?: string | UseActionType;
+  /**
+   * @deprecated
+   */
+  actionCallback?: () => void;
+
+  /**
+   * @internal
+   */
+  addChild?: boolean;
+}
+
 export type ComposedAction = React.FC<ActionProps> & {
   Drawer?: ComposedActionDrawer;
   [key: string]: any;
diff --git a/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..bae26987f2
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/basic.tsx
@@ -0,0 +1,31 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'AssociationSelect',
+        'x-component-props': {
+          service: {
+            resource: 'roles', // roles 表
+            action: 'list', // 列表接口
+          },
+          fieldNames: {
+            label: 'title', // 显示的字段
+            value: 'name', // 值字段
+          },
+        },
+      },
+    },
+  },
+  delayResponse: 500,
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/multiple.tsx b/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/multiple.tsx
new file mode 100644
index 0000000000..da678a00b7
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/multiple.tsx
@@ -0,0 +1,32 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'array', // 数组类型
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'AssociationSelect',
+        'x-component-props': {
+          multiple: true, // 多选
+          service: {
+            resource: 'roles',
+            action: 'list',
+          },
+          fieldNames: {
+            label: 'title',
+            value: 'name',
+          },
+        },
+      },
+    },
+  },
+  delayResponse: 500,
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..39fedfdb6e
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,33 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        default: 'admin',
+        'x-decorator': 'FormItem',
+        'x-component': 'AssociationSelect',
+        'x-pattern': 'readPretty',
+        'x-component-props': {
+          service: {
+            resource: 'roles',
+            action: 'list',
+          },
+          fieldNames: {
+            label: 'title',
+            value: 'name',
+          },
+        },
+      },
+    },
+  },
+  delayResponse: 500,
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/association-select/index.md b/packages/core/client/src/schema-component/antd/association-select/index.md
index 3b63d043c3..6b425a6a9c 100644
--- a/packages/core/client/src/schema-component/antd/association-select/index.md
+++ b/packages/core/client/src/schema-component/antd/association-select/index.md
@@ -1,27 +1,24 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # AssociationSelect
 
-## Examples
-
-<code src="./demos/demo1.tsx"></code>
-
-## API
-
-基于 Ant Design 的 [Select](https://ant.design/components/select/#API)，相关扩展属性有：
-
-- `objectValue` 值为 object 类型
-- `fieldNames` 默认值有区别
+通过指定数据表和字段，获取数据表的数据。
 
 ```ts
-export const defaultFieldNames = {
-  label: 'label',
-  value: 'value',
-  color: 'color',
-  options: 'children',
+type AssociationSelectProps<P = any> = RemoteSelectProps<P> & {
+  action?: string;
+  multiple?: boolean;
 };
 ```
+
+## Basic Usage
+
+<code src="./demos/new-demos/basic.tsx"></code>
+
+## Multiple Selection
+
+`type` 需要改为 `array`，并且属性需要增加 `multiple: true`。
+
+<code src="./demos/new-demos/multiple.tsx"></code>
+
+## Read Pretty
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/auto-complete/AutoComplete.tsx b/packages/core/client/src/schema-component/antd/auto-complete/AutoComplete.tsx
index 282febaf58..f3737ae320 100644
--- a/packages/core/client/src/schema-component/antd/auto-complete/AutoComplete.tsx
+++ b/packages/core/client/src/schema-component/antd/auto-complete/AutoComplete.tsx
@@ -10,11 +10,14 @@
 import { connect, mapProps, mapReadPretty } from '@formily/react';
 import { AutoComplete as AntdAutoComplete } from 'antd';
 import { ReadPretty } from '../input';
+import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
 
-export const AutoComplete = connect(
-  AntdAutoComplete,
-  mapProps({
-    dataSource: 'options',
-  }),
-  mapReadPretty(ReadPretty.Input),
+export const AutoComplete = withDynamicSchemaProps(
+  connect(
+    AntdAutoComplete,
+    mapProps({
+      dataSource: 'options',
+    }),
+    mapReadPretty(ReadPretty.Input),
+  ),
 );
diff --git a/packages/core/client/src/schema-component/antd/auto-complete/demos/basic.tsx b/packages/core/client/src/schema-component/antd/auto-complete/demos/basic.tsx
new file mode 100644
index 0000000000..db3c0c89b0
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/auto-complete/demos/basic.tsx
@@ -0,0 +1,38 @@
+import { useField } from '@formily/react';
+import { getAppComponent } from '@nocobase/test/web';
+
+const mockVal = (str: string, repeat = 1) => ({
+  value: str.repeat(repeat),
+});
+const getPanelValue = (searchText: string) =>
+  !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
+
+function useAutoCompleteProps() {
+  const field = useField<any>();
+
+  return {
+    onSearch(text: string) {
+      field.dataSource = getPanelValue(text);
+    },
+  };
+}
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'AutoComplete',
+        'x-use-component-props': useAutoCompleteProps,
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/auto-complete/demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/auto-complete/demos/read-pretty.tsx
new file mode 100644
index 0000000000..758676a558
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/auto-complete/demos/read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        default: 'aaa',
+        'x-decorator': 'FormItem',
+        'x-component': 'AutoComplete',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/auto-complete/index.md b/packages/core/client/src/schema-component/antd/auto-complete/index.md
new file mode 100644
index 0000000000..ecf72084b0
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/auto-complete/index.md
@@ -0,0 +1,20 @@
+
+# AutoComplete
+
+自动完成输出框。其基于 ant-design [AutoComplete](https://ant.design/components/auto-complete) 组件封装。
+
+## Basic Usage
+
+```ts
+type AutoCompleteProps = AntdAutoCompleteProps;
+```
+
+<code src="./demos/basic.tsx"></code>
+
+## Read Pretty
+
+```ts
+type AutoCompleteReadPrettyProps = InputReadPrettyProps;
+```
+
+<code src="./demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx b/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
index 9c7bb0b18d..5c4c67b6e9 100644
--- a/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
+++ b/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
@@ -67,7 +67,13 @@ const useStyles = createStyles(({ css, token }: CustomCreateStylesUtils) => {
   `;
 });
 
-export const BlockItem: React.FC<any> = withDynamicSchemaProps(
+export interface BlockItemProps {
+  name?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const BlockItem: React.FC<BlockItemProps> = withDynamicSchemaProps(
   (props) => {
     // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
     const { className, children } = useProps(props);
diff --git a/packages/core/client/src/schema-component/antd/block-item/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/block-item/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..55a8937cf7
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/block-item/demos/new-demos/basic.tsx
@@ -0,0 +1,68 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { DragHandler, SchemaSettings } from '@nocobase/client';
+import { useFieldSchema } from '@formily/react';
+import { observer } from '@formily/reactive-react';
+import React from 'react';
+
+const simpleSettings = new SchemaSettings({
+  name: 'simpleSettings',
+  items: [
+    {
+      name: 'delete',
+      type: 'remove',
+    },
+  ],
+});
+
+const MyBlock = observer(
+  () => {
+    const fieldSchema = useFieldSchema();
+    return (
+      <div
+        className="nc-block-item"
+        style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}
+      >
+        {fieldSchema.name}
+        <DragHandler />
+      </div>
+    );
+  },
+  { displayName: 'MyBlock' },
+);
+
+const App = getAppComponent({
+  designable: true,
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-component': 'DndContext',
+    properties: {
+      block1: {
+        type: 'void',
+        'x-decorator': 'BlockItem',
+        'x-component': 'MyBlock',
+        'x-settings': 'simpleSettings',
+      },
+      block2: {
+        type: 'void',
+        'x-decorator': 'BlockItem',
+        'x-component': 'MyBlock',
+        'x-settings': 'simpleSettings',
+      },
+      block3: {
+        type: 'void',
+        'x-decorator': 'BlockItem',
+        'x-component': 'MyBlock',
+        'x-settings': 'simpleSettings',
+      },
+    },
+  },
+  appOptions: {
+    schemaSettings: [simpleSettings],
+    components: {
+      MyBlock,
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/block-item/index.md b/packages/core/client/src/schema-component/antd/block-item/index.md
index c2f97b4ffe..842def429d 100644
--- a/packages/core/client/src/schema-component/antd/block-item/index.md
+++ b/packages/core/client/src/schema-component/antd/block-item/index.md
@@ -1,11 +1,22 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # BlockItem
 
-普通的装饰器（Decorator）组件，无特殊 UI 效果，一般用在 x-decorator 中。用于提供区块的管理，如拖拽功能、当前节点的 SettingsForm。CardItem 和 FormItem 组件都是基于 BlockItem 实现，也具备以上相同功能。
+普通的装饰器（Decorator）组件，无 UI 效果，一般用在 `x-decorator` 中。
 
-<code src="./demos/demo1.tsx"></code>
+主要提供了以下 2 个能力：
+
+- 拖拽功能
+- [SchemaToolbar](/core/ui-schema/schema-toolbar) 和 [SchemaSettings](/core/ui-schema/schema-settings) 的渲染
+
+[CardItem](/components/card-item) 和 [FormItem](/components/form-item) 组件都是基于 BlockItem 实现，也具备以上相同功能。
+
+```ts
+interface BlockItemProps {
+  name?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+```
+
+注意拖拽功能需要配置 `DndContext` 组件。
+
+<code src="./demos/new-demos/basic.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx b/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx
index 980050f365..1537576a18 100644
--- a/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx
+++ b/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx
@@ -8,32 +8,38 @@
  */
 
 import { useFieldSchema } from '@formily/react';
-import { Skeleton } from 'antd';
-import React from 'react';
-import { useInView } from 'react-intersection-observer';
+import { Skeleton, CardProps } from 'antd';
+import React, { FC } from 'react';
+import { IntersectionOptions, useInView } from 'react-intersection-observer';
 import { useSchemaTemplate } from '../../../schema-templates';
 import { BlockItem } from '../block-item';
 import { BlockItemCard } from '../block-item/BlockItemCard';
 import { BlockItemError } from '../block-item/BlockItemError';
 import useStyles from './style';
 
-interface Props {
-  children?: React.ReactNode;
-  /** 区块标识 */
+interface CardItemProps extends CardProps {
   name?: string;
-  [key: string]: any;
+  children?: React.ReactNode;
+  /**
+   * lazy render options
+   * @default { threshold: 0, initialInView: true, triggerOnce: true }
+   * @see https://github.com/thebuilder/react-intersection-observer
+   */
+  lazyRender?: IntersectionOptions & { element?: React.JSX.Element };
 }
 
-export const CardItem = (props: Props) => {
-  const { children, name, ...restProps } = props;
+export const CardItem: FC<CardItemProps> = (props) => {
+  const { children, name, lazyRender = {}, ...restProps } = props;
   const template = useSchemaTemplate();
   const fieldSchema = useFieldSchema();
   const templateKey = fieldSchema?.['x-template-key'];
+  const { element: lazyRenderElement, ...resetLazyRenderOptions } = lazyRender;
   const { ref, inView } = useInView({
     threshold: 0,
     initialInView: true,
     triggerOnce: true,
     skip: !!process.env.__E2E__,
+    ...resetLazyRenderOptions,
   });
   const { wrapSSR, componentCls, hashId } = useStyles();
 
@@ -42,7 +48,7 @@ export const CardItem = (props: Props) => {
     <BlockItemError>
       <BlockItem name={name} className={`${componentCls} ${hashId} noco-card-item`}>
         <BlockItemCard ref={ref} {...restProps}>
-          {inView ? props.children : <Skeleton paragraph={{ rows: 4 }} />}
+          {inView ? props.children : lazyRenderElement ?? <Skeleton paragraph={{ rows: 4 }} />}
         </BlockItemCard>
       </BlockItem>
     </BlockItemError>,
diff --git a/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..0fcaaccba3
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/basic.tsx
@@ -0,0 +1,58 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { SchemaSettings } from '@nocobase/client';
+
+const simpleSettings = new SchemaSettings({
+  name: 'simpleSettings',
+  items: [
+    {
+      name: 'delete',
+      type: 'remove',
+    },
+  ],
+});
+
+const App = getAppComponent({
+  designable: true,
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-component': 'DndContext',
+    properties: {
+      block1: {
+        type: 'void',
+        'x-component': 'CardItem',
+        'x-component-props': {
+          title: 'Block 1',
+        },
+        'x-settings': 'simpleSettings',
+        properties: {
+          hello: {
+            type: 'void',
+            'x-component': 'div',
+            'x-content': 'Hello Card!',
+          },
+        },
+      },
+      block2: {
+        type: 'void',
+        'x-component': 'CardItem',
+        'x-settings': 'simpleSettings',
+        'x-component-props': {
+          title: 'Block 2',
+        },
+        properties: {
+          hello: {
+            type: 'void',
+            'x-component': 'div',
+            'x-content': 'Hello Card!',
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    schemaSettings: [simpleSettings],
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/lazy-render.tsx b/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/lazy-render.tsx
new file mode 100644
index 0000000000..e050ed3074
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/lazy-render.tsx
@@ -0,0 +1,84 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { SchemaSettings } from '@nocobase/client';
+
+const simpleSettings = new SchemaSettings({
+  name: 'simpleSettings',
+  items: [
+    {
+      name: 'delete',
+      type: 'remove',
+    },
+  ],
+});
+
+const App = getAppComponent({
+  designable: true,
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'DndContext',
+    'x-component': 'div',
+    'x-component-props': {
+      style: {
+        height: 300,
+        overflow: 'auto',
+        border: '1px solid #f0f0f0',
+      },
+    },
+    properties: {
+      block1: {
+        type: 'void',
+        'x-component': 'CardItem',
+        'x-component-props': {
+          title: 'Block 1',
+        },
+        'x-settings': 'simpleSettings',
+        properties: {
+          hello: {
+            type: 'void',
+            'x-component': 'div',
+            'x-content': 'Hello Card!',
+          },
+        },
+      },
+      block2: {
+        type: 'void',
+        'x-component': 'CardItem',
+        'x-settings': 'simpleSettings',
+        'x-component-props': {
+          title: 'Block 2',
+        },
+        properties: {
+          hello: {
+            type: 'void',
+            'x-component': 'div',
+            'x-content': 'Hello Card!',
+          },
+        },
+      },
+      block3: {
+        type: 'void',
+        'x-component': 'CardItem',
+        'x-settings': 'simpleSettings',
+        'x-component-props': {
+          title: 'Block 3',
+          lazyRender: {
+            threshold: 1,
+          },
+        },
+        properties: {
+          hello: {
+            type: 'void',
+            'x-component': 'div',
+            'x-content': 'Hello Card!',
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    schemaSettings: [simpleSettings],
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/card-item/index.md b/packages/core/client/src/schema-component/antd/card-item/index.md
index 29a0ec13e8..78b426912d 100644
--- a/packages/core/client/src/schema-component/antd/card-item/index.md
+++ b/packages/core/client/src/schema-component/antd/card-item/index.md
@@ -1,13 +1,27 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # CardItem
 
-卡片装饰器。除此之外，也继承了 BlockItem 的功能。
+卡片装饰器。主要功能为：
 
-## Example
+- 拖拽和 [SchemaToolbar](/core/ui-schema/schema-toolbar) 和 [SchemaSettings](/core/ui-schema/schema-settings) 的渲染，继承自[BlockItem](/components/block-item)
+- 懒渲染
 
-<code src="./demos/demo1.tsx" ></code>
+其基于 ant-design [Card](https://ant.design/components/card-cn/) 组件进行封装，懒加载基于 [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer) 实现。
+
+```ts
+interface CardItemProps extends CardProps {
+  name?: string;
+  /**
+   * lazy render options
+   * @see https://github.com/thebuilder/react-intersection-observer
+   */
+  lazyRender?: IntersectionOptions;
+}
+```
+
+## Basic
+
+<code src="./demos/new-demos/basic.tsx" ></code>
+
+## Custom lazy render
+
+<code src="./demos/new-demos/lazy-render.tsx" ></code>
diff --git a/packages/core/client/src/schema-component/antd/cascader/Cascader.tsx b/packages/core/client/src/schema-component/antd/cascader/Cascader.tsx
index 8ed483eaf9..1af4621609 100644
--- a/packages/core/client/src/schema-component/antd/cascader/Cascader.tsx
+++ b/packages/core/client/src/schema-component/antd/cascader/Cascader.tsx
@@ -11,107 +11,140 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { ArrayField } from '@formily/core';
 import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
 import { toArr } from '@formily/shared';
-import { Cascader as AntdCascader, Space } from 'antd';
+import { Cascader as AntdCascader, Space, CascaderProps as AntdCascaderProps } from 'antd';
 import { isBoolean, omit } from 'lodash';
 import React from 'react';
-import { useRequest } from '../../../api-client';
+import { UseRequestResult, useRequest } from '../../../api-client';
 import { ReadPretty } from './ReadPretty';
 import { defaultFieldNames } from './defaultFieldNames';
+import { BaseOptionType } from 'antd/es/select';
+import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
 
-const useDefDataSource = (options) => {
+const useDefDataSource = (options, props: any) => {
   const field = useField<ArrayField>();
-  return useRequest(() => Promise.resolve({ data: field.dataSource || [] }), options);
+  return useRequest(() => Promise.resolve({ data: field.dataSource || props.options || [] }), {
+    ...options,
+    refreshDeps: [field.dataSource, props.options],
+  });
 };
 
 const useDefLoadData = (props: any) => {
   return props?.loadData;
 };
 
-export const Cascader = connect(
-  (props: any) => {
-    const field = useField<ArrayField>();
-    const {
-      value,
-      onChange,
-      labelInValue,
-      // fieldNames = defaultFieldNames,
-      useDataSource = useDefDataSource,
-      useLoadData = useDefLoadData,
-      changeOnSelectLast,
-      changeOnSelect,
-      maxLevel,
-      ...others
-    } = props;
-    const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
-    const loadData = useLoadData(props);
-    const { loading, run } = useDataSource({
-      onSuccess(data) {
-        field.dataSource = data?.data || [];
-      },
-    });
-    // 兼容值为 object[] 的情况
-    const toValue = () => {
-      return toArr(value).map((item) => {
-        if (typeof item === 'object') {
-          return item[fieldNames.value];
-        }
-        return item;
-      });
-    };
-    const displayRender = (labels: string[], selectedOptions: any[]) => {
-      return (
-        <Space split={'/'}>
-          {labels.map((label, index) => {
-            if (selectedOptions[index]) {
-              return <span key={index}>{label}</span>;
-            }
-            const item = toArr(value)
-              .filter(Boolean)
-              .find((item) => item[fieldNames.value] === label);
-            return <span key={index}>{item?.[fieldNames.label] || label}</span>;
-          })}
-        </Space>
-      );
-    };
-    const handelDropDownVisible = (value) => {
-      if (value && !field.dataSource?.length) {
-        run();
-      }
-    };
+export type CascaderProps<DataNodeType extends BaseOptionType = any> = AntdCascaderProps<DataNodeType> & {
+  /**
+   * @deprecated use `x-use-component-props` instead
+   */
+  useLoadData: (props: CascaderProps) => AntdCascaderProps['loadData'];
+  /**
+   * @deprecated use `x-use-component-props` instead
+   */
+  useDataSource?: (options: any) => UseRequestResult<unknown>;
+  /**
+   * Whether to wrap the label of option into the value
+   */
+  labelInValue?: boolean;
+  /**
+   * must select the last level
+   */
+  changeOnSelectLast?: boolean;
+  onChange?: (value: any) => void;
+  maxLevel?: number;
+};
 
-    return (
-      <AntdCascader
-        loading={loading}
-        {...others}
-        options={field.dataSource}
-        loadData={loadData}
-        changeOnSelect={isBoolean(changeOnSelectLast) ? !changeOnSelectLast : changeOnSelect}
-        value={toValue()}
-        fieldNames={fieldNames}
-        displayRender={displayRender}
-        onDropdownVisibleChange={handelDropDownVisible}
-        onChange={(value, selectedOptions) => {
-          if (value && labelInValue) {
-            onChange(selectedOptions.map((option) => omit(option, [fieldNames.children])));
-          } else {
-            onChange(value);
+export const Cascader = withDynamicSchemaProps(
+  connect(
+    (props: CascaderProps) => {
+      const field = useField<ArrayField>();
+      const {
+        value,
+        onChange,
+        labelInValue,
+        options,
+        // fieldNames = defaultFieldNames,
+        useDataSource = useDefDataSource,
+        useLoadData = useDefLoadData,
+        changeOnSelectLast,
+        changeOnSelect,
+        maxLevel,
+        ...others
+      } = props;
+      const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
+      const loadData = useLoadData(props);
+      const { loading, run } = useDataSource(
+        {
+          onSuccess(data) {
+            field.dataSource = data?.data || [];
+          },
+        },
+        props,
+      );
+      // 兼容值为 object[] 的情况
+      const toValue = () => {
+        return toArr(value).map((item) => {
+          if (typeof item === 'object') {
+            return item[fieldNames.value];
           }
-        }}
-      />
-    );
-  },
-  mapProps(
-    {
-      dataSource: 'options',
-    },
-    (props, field) => {
-      return {
-        ...props,
-        suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffixIcon,
+          return item;
+        });
       };
+      const displayRender = (labels: string[], selectedOptions: any[]) => {
+        return (
+          <Space split={'/'}>
+            {labels.map((label, index) => {
+              if (selectedOptions[index]) {
+                return <span key={index}>{label}</span>;
+              }
+              const item = toArr(value)
+                .filter(Boolean)
+                .find((item) => item[fieldNames.value] === label);
+              return <span key={index}>{item?.[fieldNames.label] || label}</span>;
+            })}
+          </Space>
+        );
+      };
+      const handelDropDownVisible = (value) => {
+        if (value && !field.dataSource?.length) {
+          run();
+        }
+      };
+
+      return (
+        <AntdCascader
+          loading={loading}
+          {...others}
+          options={field.dataSource}
+          loadData={loadData}
+          changeOnSelect={isBoolean(changeOnSelectLast) ? !changeOnSelectLast : changeOnSelect}
+          value={toValue()}
+          fieldNames={fieldNames}
+          displayRender={displayRender}
+          onDropdownVisibleChange={handelDropDownVisible}
+          onChange={(value, selectedOptions: any) => {
+            if (value && labelInValue) {
+              onChange(selectedOptions.map((option) => omit(option, [fieldNames.children])));
+            } else {
+              onChange(value);
+            }
+          }}
+        />
+      );
     },
+    mapProps(
+      {
+        dataSource: 'options',
+      },
+      (props, field) => {
+        return {
+          ...props,
+          suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffixIcon,
+        };
+      },
+    ),
+    mapReadPretty(ReadPretty),
   ),
-  mapReadPretty(ReadPretty),
+  { displayName: 'Cascader' },
 );
 
 export default Cascader;
diff --git a/packages/core/client/src/schema-component/antd/cascader/ReadPretty.tsx b/packages/core/client/src/schema-component/antd/cascader/ReadPretty.tsx
index 4274ecafbf..8ef232548e 100644
--- a/packages/core/client/src/schema-component/antd/cascader/ReadPretty.tsx
+++ b/packages/core/client/src/schema-component/antd/cascader/ReadPretty.tsx
@@ -13,7 +13,18 @@ import { toArr } from '@formily/shared';
 import React from 'react';
 import { defaultFieldNames } from './defaultFieldNames';
 
-export const ReadPretty: React.FC<unknown> = (props: any) => {
+interface FieldNames {
+  label: string;
+  value: string;
+  children: string;
+}
+
+export interface CascaderReadPrettyProps {
+  fieldNames?: FieldNames;
+  value?: any;
+}
+
+export const ReadPretty: React.FC<CascaderReadPrettyProps> = (props) => {
   const { fieldNames = defaultFieldNames } = props;
   const values = toArr(props.value);
   const len = values.length;
diff --git a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..5b81588382
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/basic.tsx
@@ -0,0 +1,56 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        enum: options,
+        'x-component': 'Cascader',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/changeOnSelectLast.tsx b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/changeOnSelectLast.tsx
new file mode 100644
index 0000000000..158fbc6654
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/changeOnSelectLast.tsx
@@ -0,0 +1,59 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        enum: options,
+        'x-component': 'Cascader',
+        'x-component-props': {
+          changeOnSelectLast: false,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/labelInValue.tsx b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/labelInValue.tsx
new file mode 100644
index 0000000000..1d080b1745
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/labelInValue.tsx
@@ -0,0 +1,59 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        enum: options,
+        'x-component': 'Cascader',
+        'x-component-props': {
+          labelInValue: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/loadData.tsx b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/loadData.tsx
new file mode 100644
index 0000000000..195172f74c
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/loadData.tsx
@@ -0,0 +1,76 @@
+import { useField } from '@formily/react';
+import { getAppComponent } from '@nocobase/test/web';
+import React, { useState } from 'react';
+
+interface Option {
+  value?: string | number | null;
+  label: React.ReactNode;
+  children?: Option[];
+  isLeaf?: boolean;
+}
+
+const optionLists: Option[] = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    isLeaf: false,
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    isLeaf: false,
+  },
+];
+
+const useCustomCascaderProps = () => {
+  const field = useField<any>();
+  field.dataSource = optionLists;
+  const loadData = (selectedOptions: Option[]) => {
+    const targetOption = selectedOptions[selectedOptions.length - 1];
+
+    // load options lazily
+    setTimeout(() => {
+      targetOption.children = [
+        {
+          label: `${targetOption.label} Dynamic 1`,
+          value: 'dynamic1',
+        },
+        {
+          label: `${targetOption.label} Dynamic 2`,
+          value: 'dynamic2',
+        },
+      ];
+      field.dataSource = [...field.dataSource];
+    }, 1000);
+  };
+
+  return {
+    changeOnSelect: true,
+    loadData,
+  };
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Cascader',
+        'x-use-component-props': 'useCustomCascaderProps',
+      },
+    },
+  },
+  appOptions: {
+    scopes: {
+      useCustomCascaderProps,
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..b58e74d342
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,58 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        default: ['zhejiang', 'hangzhou', 'xihu'],
+        'x-decorator': 'FormItem',
+        enum: options,
+        'x-component': 'Cascader',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/cascader/index.md b/packages/core/client/src/schema-component/antd/cascader/index.md
index abaeae2274..78d63bd9c1 100644
--- a/packages/core/client/src/schema-component/antd/cascader/index.md
+++ b/packages/core/client/src/schema-component/antd/cascader/index.md
@@ -1,36 +1,53 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Cascader
 
-## Examples
-
-### Cascader
-
-<code src="./demos/demo1.tsx"></code>
-
-### Asynchronous Data Source
-
-<code src="./demos/demo2.tsx"></code>
-
-## API
-
-基于 antd 的 [Cascader](https://ant.design/components/cascader/#API) 附加的一些属性：
-
-- `labelInValue` 是否把每个选项的 label 包装到 value 中
-- `changeOnSelectLast` 必须选到最后一级
-- `useLoadData` 可调用 hook 的 loadData
+级联选择器，其基于 ant-design [Cascader](https://ant.design/components/cascader-cn/) 组件封装。
 
 ```ts
-{
-  useLoadData: (props) => {
-    // 这里可以写 hook
-    return function loadData(selectedOptions) {
-      // Cascader 的 loadData
-    }
-  }
+type CascaderProps<DataNodeType extends BaseOptionType = any> = AntdCascaderProps<DataNodeType> & {
+   /**
+   * Whether to wrap the label of option into the value
+   */
+  labelInValue?: boolean;
+  /**
+   * must select the last level
+   */
+  changeOnSelectLast?: boolean;
 }
 ```
+
+## Basic Usage
+
+<code src="./demos/new-demos/basic.tsx"></code>
+
+## Asynchronous Data Source
+
+<code src="./demos/new-demos/loadData.tsx"></code>
+
+## labelInValue
+
+如果设置 `labelInValue` 为 `true`，则选中的数据为 `{ label: string, value: string }` 格式，否则为 `string` 格式。
+
+<code src="./demos/new-demos/labelInValue.tsx"></code>
+
+## changeOnSelectLast
+
+如果设置 `changeOnSelectLast` 为 `true`，则必须选择最后一级，如果为 `false`，则可以选择任意级。
+
+<code src="./demos/new-demos/changeOnSelectLast.tsx"></code>
+
+## Read Pretty
+
+```ts
+interface FieldNames {
+  label: string;
+  value: string;
+  children: string;
+}
+
+export interface CascaderReadPrettyProps {
+  fieldNames?: FieldNames;
+  value?: any;
+}
+```
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/checkbox/Checkbox.tsx b/packages/core/client/src/schema-component/antd/checkbox/Checkbox.tsx
index f683d43b46..46dd9e77dd 100644
--- a/packages/core/client/src/schema-component/antd/checkbox/Checkbox.tsx
+++ b/packages/core/client/src/schema-component/antd/checkbox/Checkbox.tsx
@@ -11,21 +11,29 @@ import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
 import { isValid } from '@formily/shared';
 import { Checkbox as AntdCheckbox, Tag } from 'antd';
-import type { CheckboxGroupProps, CheckboxProps } from 'antd/es/checkbox';
+import type {
+  CheckboxGroupProps as AntdCheckboxGroupProps,
+  CheckboxProps as AntdCheckboxProps,
+} from 'antd/es/checkbox';
 import uniq from 'lodash/uniq';
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 import { useCollectionField } from '../../../data-source/collection-field/CollectionFieldProvider';
 import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip';
 
 type ComposedCheckbox = React.ForwardRefExoticComponent<
   Pick<Partial<any>, string | number | symbol> & React.RefAttributes<unknown>
 > & {
-  Group?: React.FC<CheckboxGroupProps>;
+  Group?: React.FC<AntdCheckboxGroupProps>;
   __ANT_CHECKBOX?: boolean;
-  ReadPretty?: React.FC<CheckboxProps>;
+  ReadPretty?: React.FC<CheckboxReadPrettyProps>;
 };
 
-const ReadPretty = (props) => {
+export interface CheckboxReadPrettyProps {
+  showUnchecked?: boolean;
+  value?: boolean;
+}
+
+const ReadPretty: FC<CheckboxReadPrettyProps> = (props) => {
   if (props.value) {
     return <CheckOutlined style={{ color: '#52c41a' }} />;
   }
@@ -33,7 +41,7 @@ const ReadPretty = (props) => {
 };
 
 export const Checkbox: ComposedCheckbox = connect(
-  (props: any) => {
+  (props: AntdCheckboxProps) => {
     const changeHandler = (val) => {
       props?.onChange(val);
     };
@@ -52,12 +60,17 @@ Checkbox.ReadPretty.displayName = 'Checkbox.ReadPretty';
 
 Checkbox.__ANT_CHECKBOX = true;
 
+export interface CheckboxGroupReadPrettyProps {
+  value?: any[];
+  ellipsis?: boolean;
+}
+
 Checkbox.Group = connect(
   AntdCheckbox.Group,
   mapProps({
     dataSource: 'options',
   }),
-  mapReadPretty((props) => {
+  mapReadPretty((props: CheckboxGroupReadPrettyProps) => {
     if (!isValid(props.value)) {
       return null;
     }
diff --git a/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..780323b173
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Checkbox',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group-read-pretty.tsx b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group-read-pretty.tsx
new file mode 100644
index 0000000000..1ed3d01edf
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group-read-pretty.tsx
@@ -0,0 +1,57 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    label: '选项1',
+    value: 1,
+    color: 'red',
+  },
+  {
+    label: '选项2',
+    value: 2,
+    color: 'blue',
+  },
+  {
+    label: '选项3',
+    value: 3,
+    color: 'yellow',
+  },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test1: {
+        type: 'array',
+        default: [1, 2],
+        title: 'Test1',
+        enum: options,
+        'x-decorator': 'FormItem',
+        'x-component': 'Checkbox.Group',
+      },
+      test2: {
+        type: 'array',
+        default: [1, 2, 3],
+        title: 'Test2',
+        enum: options,
+        'x-decorator': 'FormItem',
+        'x-component': 'Checkbox.Group',
+        'x-decorator-props': {
+          style: {
+            width: 100,
+          },
+        },
+        'x-component-props': {
+          ellipsis: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group.tsx b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group.tsx
new file mode 100644
index 0000000000..c1cfa50e6c
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group.tsx
@@ -0,0 +1,34 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    label: '选项1',
+    value: 1,
+    color: 'red',
+  },
+  {
+    label: '选项2',
+    value: 2,
+    color: 'blue',
+  },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'array',
+        title: 'Test',
+        enum: options,
+        'x-decorator': 'FormItem',
+        'x-component': 'Checkbox.Group',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..4b1348079c
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,39 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'boolean',
+        default: true,
+        title: 'Test1',
+        'x-decorator': 'FormItem',
+        'x-component': 'Checkbox',
+      },
+      test2: {
+        type: 'boolean',
+        default: false,
+        title: 'Test2',
+        'x-decorator': 'FormItem',
+        'x-component': 'Checkbox',
+      },
+      test3: {
+        type: 'boolean',
+        default: false,
+        title: 'Test3',
+        'x-decorator': 'FormItem',
+        'x-component': 'Checkbox',
+        'x-component-props': {
+          showUnchecked: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/checkbox/index.md b/packages/core/client/src/schema-component/antd/checkbox/index.md
index a24296c51c..57a25e1cff 100644
--- a/packages/core/client/src/schema-component/antd/checkbox/index.md
+++ b/packages/core/client/src/schema-component/antd/checkbox/index.md
@@ -1,17 +1,46 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Checkbox
 
-## Examples
+复选框，其基于 ant-design [Checkbox](https://ant.design/components/checkbox/) 组件封装。
 
-### 勾选
 
-<code src="./demos/checkbox.tsx"></code>
+## Basic Usage
 
-### 组
+```ts
+type CheckboxProps = AntdCheckboxProps;
+```
 
-<code src="./demos/checkbox.group.tsx"></code>
+<code src="./demos/new-demos/basic.tsx"></code>
+
+## Read Pretty
+
+```ts
+interface CheckboxReadPrettyProps {
+  showUnchecked?: boolean;
+  value?: boolean;
+}
+```
+
+如果值为 `false`，默认情况下不显示内容，可以通过 `showUnchecked` 属性来显示未选中的复选框。
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
+
+## Checkbox Group
+
+```ts
+type CheckboxGroupProps = CheckboxGroupProps;
+```
+
+注意 schema 的 type 属性为 `array`。
+
+<code src="./demos/new-demos/group.tsx"></code>
+
+## Checkbox Group Read Pretty
+
+```ts
+export interface CheckboxGroupReadPrettyProps {
+  value?: any[];
+  ellipsis?: boolean;
+}
+```
+
+<code src="./demos/new-demos/group-read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/collection-select/demos/basic.tsx b/packages/core/client/src/schema-component/antd/collection-select/demos/basic.tsx
new file mode 100644
index 0000000000..1d5c91f958
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/collection-select/demos/basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'CollectionSelect',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/collection-select/demos/multiple.tsx b/packages/core/client/src/schema-component/antd/collection-select/demos/multiple.tsx
new file mode 100644
index 0000000000..7049ebb9ae
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/collection-select/demos/multiple.tsx
@@ -0,0 +1,23 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'array',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'CollectionSelect',
+        'x-component-props': {
+          mode: 'multiple',
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/collection-select/demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/collection-select/demos/read-pretty.tsx
new file mode 100644
index 0000000000..851d59d3c2
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/collection-select/demos/read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-component': 'ShowFormData',
+    'x-decorator': 'FormV2',
+    'x-read-pretty': true,
+    properties: {
+      test: {
+        type: 'string',
+        default: 'users',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'CollectionSelect',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/collection-select/index.md b/packages/core/client/src/schema-component/antd/collection-select/index.md
index a1d9a0c005..28fd451655 100644
--- a/packages/core/client/src/schema-component/antd/collection-select/index.md
+++ b/packages/core/client/src/schema-component/antd/collection-select/index.md
@@ -1,8 +1,24 @@
----
-group:
-  title: Schema Components
----
-
 # CollectionSelect
 
-## Example
+用于选择当前数据源的数据表。
+
+```ts
+type CollectionSelectProps = SelectProps<any, any> & {
+  filter?: (item: any, index: number, array: any[]) => boolean;
+  isTableOid?: boolean;
+};
+```
+
+## Basic Usage
+
+<code src="./demos/basic.tsx"></code>
+
+## Multiple Selection
+
+`type` 需要改为 `array`，并且属性需要增加 `mode: 'multiple'`。
+
+<code src="./demos/multiple.tsx"></code>
+
+## Read Pretty
+
+<code src="./demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/color-picker/ColorPicker.tsx b/packages/core/client/src/schema-component/antd/color-picker/ColorPicker.tsx
index 33b99abf74..45a88c92f3 100644
--- a/packages/core/client/src/schema-component/antd/color-picker/ColorPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/color-picker/ColorPicker.tsx
@@ -10,12 +10,16 @@
 import { css } from '@emotion/css';
 import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
 import { connect, mapProps, mapReadPretty } from '@formily/react';
-import { ColorPicker as AntdColorPicker } from 'antd';
+import { ColorPicker as AntdColorPicker, ColorPickerProps as AntdColorPickerProps } from 'antd';
 import cls from 'classnames';
 import React from 'react';
 
+export interface ColorPickerProps extends Omit<AntdColorPickerProps, 'onChange'> {
+  onChange?: (color: string) => void;
+}
+
 export const ColorPicker = connect(
-  (props) => {
+  (props: ColorPickerProps) => {
     const { value, onChange, ...others } = props;
     return (
       <div role="button" aria-label="color-picker-normal" style={{ display: 'inline-block' }}>
diff --git a/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..f45203b915
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'ColorPicker',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..d666c4ac11
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'string',
+        default: '#8BBB11',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'ColorPicker',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/color-picker/index.md b/packages/core/client/src/schema-component/antd/color-picker/index.md
index f30325a471..9240492f54 100644
--- a/packages/core/client/src/schema-component/antd/color-picker/index.md
+++ b/packages/core/client/src/schema-component/antd/color-picker/index.md
@@ -1,18 +1,17 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # ColorPicker
 
-## Examples
-
-### Basic
-
-<code src="./demos/demo1.tsx"></code>
+颜色选择器，其基于 ant-design [ColorPicker](https://ant.design/components/color-picker/) 组件进行封装。
 
+```ts
+interface ColorPickerProps extends Omit<AntdColorPickerProps, 'onChange'> {
+  onChange?: (color: string) => void;
+}
+```
 
+## Basic Usage
 
+<code src="./demos/new-demos/basic.tsx"></code>
 
+## Read Pretty
 
+<code src="./demos/new-demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/color-select/ColorSelect.tsx b/packages/core/client/src/schema-component/antd/color-select/ColorSelect.tsx
index 3daf9d95b8..7324b4dae7 100644
--- a/packages/core/client/src/schema-component/antd/color-select/ColorSelect.tsx
+++ b/packages/core/client/src/schema-component/antd/color-select/ColorSelect.tsx
@@ -9,7 +9,7 @@
 
 import { LoadingOutlined } from '@ant-design/icons';
 import { connect, mapProps, mapReadPretty } from '@formily/react';
-import { Select, Tag } from 'antd';
+import { Select, SelectProps, Tag } from 'antd';
 import React from 'react';
 import { useCompile } from '../../hooks/useCompile';
 
@@ -28,8 +28,12 @@ const colors = {
   default: '{{t("Default")}}',
 };
 
+export interface ColorSelectProps extends SelectProps {
+  suffix?: React.ReactNode;
+}
+
 export const ColorSelect = connect(
-  (props) => {
+  (props: ColorSelectProps) => {
     const compile = useCompile();
     return (
       <Select {...props}>
diff --git a/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..2e53eb350e
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'ColorSelect',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..3882b97801
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'string',
+        default: 'red',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'ColorSelect',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/color-select/index.md b/packages/core/client/src/schema-component/antd/color-select/index.md
index 943cb62bd0..b5c653ea58 100644
--- a/packages/core/client/src/schema-component/antd/color-select/index.md
+++ b/packages/core/client/src/schema-component/antd/color-select/index.md
@@ -1,13 +1,22 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # ColorSelect
 
-## Examples
+颜色下拉选择器，其基于 ant-design [Select](https://ant.design/components/select/) 组件封装。
 
-### ColorSelect usage
+## Basic Usage
+
+```ts
+type ColorSelectProps = ColorSelectProps;
+```
+
+<code src="./demos/new-demos/basic.tsx"></code>
+
+## Read Pretty
+
+```ts
+interface ColorSelectReadPrettyProps {
+  value?: string;
+}
+```
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
 
-<code src="./demos/demo1.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/cron/Cron.tsx b/packages/core/client/src/schema-component/antd/cron/Cron.tsx
index ef20f45ccf..805a0d30dc 100644
--- a/packages/core/client/src/schema-component/antd/cron/Cron.tsx
+++ b/packages/core/client/src/schema-component/antd/cron/Cron.tsx
@@ -12,11 +12,15 @@ import { connect, mapReadPretty } from '@formily/react';
 import { error } from '@nocobase/utils/client';
 import cronstrue from 'cronstrue';
 import React, { useMemo } from 'react';
-import { CronProps, Cron as ReactCron } from 'react-js-cron';
+import { CronProps as ReactJsCronProps, Cron as ReactCron } from 'react-js-cron';
 import 'react-js-cron/dist/styles.css';
 import { useAPIClient } from '../../../api-client';
 
-const Input = (props: Omit<CronProps, 'setValue'> & { onChange: (value: string) => void }) => {
+export interface CronProps extends Omit<ReactJsCronProps, 'setValue'> {
+  onChange: (value: string) => void;
+}
+
+const Input = (props: CronProps) => {
   const { onChange, ...rest } = props;
   return (
     <fieldset
@@ -45,7 +49,11 @@ const Input = (props: Omit<CronProps, 'setValue'> & { onChange: (value: string)
   );
 };
 
-const ReadPretty = (props) => {
+interface CronReadPrettyProps {
+  value?: string;
+}
+
+const ReadPretty = (props: CronReadPrettyProps) => {
   const api = useAPIClient();
   const locale = api.auth.getLocale();
   const value = useMemo(() => {
diff --git a/packages/core/client/src/schema-component/antd/cron/CronSet.tsx b/packages/core/client/src/schema-component/antd/cron/CronSet.tsx
index f53200f08f..fd106a6bd4 100644
--- a/packages/core/client/src/schema-component/antd/cron/CronSet.tsx
+++ b/packages/core/client/src/schema-component/antd/cron/CronSet.tsx
@@ -15,7 +15,7 @@ import { useCompile } from '../../hooks';
 import { EllipsisWithTooltip } from '../input';
 import Cron from './Cron';
 
-interface CronSetProps extends SelectProps {
+export interface CronSetProps extends SelectProps {
   onChange: (v: string) => void;
 }
 
@@ -92,7 +92,12 @@ const CronSetInternal = (props: CronSetProps) => {
   );
 };
 
-const ReadPretty = (props: CronSetProps) => {
+export interface CronReadPrettyProps {
+  value?: string;
+  options?: SelectProps['options'];
+}
+
+const ReadPretty = (props: CronReadPrettyProps) => {
   const { value } = props;
   const compile = useCompile();
   const fieldSchema = useFieldSchema();
diff --git a/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-basic.tsx b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-basic.tsx
new file mode 100644
index 0000000000..48ff7061cc
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Cron',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-read-pretty.tsx b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-read-pretty.tsx
new file mode 100644
index 0000000000..1b223e5c4e
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'string',
+        default: '13 6 11 * *',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Cron',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-basic.tsx b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-basic.tsx
new file mode 100644
index 0000000000..c40d643766
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-basic.tsx
@@ -0,0 +1,40 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'CronSet',
+        'x-component-props': {
+          options: [
+            {
+              label: '{{t("Daily")}}',
+              value: '0 0 0 * * ?',
+            },
+            {
+              label: '{{t("Weekly")}}',
+              value: 'every_week',
+            },
+            {
+              label: '{{t("Monthly")}}',
+              value: 'every_month',
+            },
+            {
+              label: '{{t("Yearly")}}',
+              value: 'every_year',
+            },
+          ],
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-read-pretty.tsx b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-read-pretty.tsx
new file mode 100644
index 0000000000..b4870aca95
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-read-pretty.tsx
@@ -0,0 +1,34 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'string',
+        default: '0 0 0 * * ?',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'CronSet',
+        'x-component-props': {
+          options: [
+            {
+              label: '{{t("Daily")}}',
+              value: '0 0 0 * * ?',
+            },
+            {
+              label: '{{t("Weekly")}}',
+              value: '* * * * * ?',
+            },
+          ],
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/cron/index.md b/packages/core/client/src/schema-component/antd/cron/index.md
index 2492cccea9..151ddb2098 100644
--- a/packages/core/client/src/schema-component/antd/cron/index.md
+++ b/packages/core/client/src/schema-component/antd/cron/index.md
@@ -1,16 +1,53 @@
----
-group:
-  title: Schema Components
----
+
 
 # Cron
 
-## Example
+定时任务表达式组件，其基于 [react-js-cron](https://github.com/xrutayisire/react-js-cron) 封装。
 
-#### Cron
+## Cron
 
-<code src="./demos/demo1.tsx"></code>
+## Basic Usage
 
-#### CronSet
+```ts
+import { CronProps as ReactJsCronProps } from 'react-js-cron';
+
+interface CronProps extends Omit<ReactJsCronProps, 'setValue'> {
+  onChange: (value: string) => void
+}
+```
+
+<code src="./demos/new-demos/cron-basic.tsx"></code>
+
+## Read Pretty
+
+```ts
+interface CronReadPrettyProps {
+  value?: string;
+}
+```
+
+<code src="./demos/new-demos/cron-read-pretty.tsx"></code>
+
+## CronSet
+
+## Basic Usage
+
+```ts
+interface CronSetProps extends SelectProps {
+  onChange: (v: string) => void;
+}
+```
+
+<code src="./demos/new-demos/cronset-basic.tsx"></code>
+
+## Read Pretty
+
+```ts
+interface CronReadPrettyProps {
+  value?: string;
+  options?: SelectProps['options'];
+}
+```
+
+<code src="./demos/new-demos/cronset-read-pretty.tsx"></code>
 
-<code src="./demos/demo2.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx b/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx
index c4e0d9cea6..ff6d1a58b0 100644
--- a/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx
+++ b/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx
@@ -8,23 +8,24 @@
  */
 
 import { connect, mapProps, mapReadPretty } from '@formily/react';
-import { DatePicker as AntdDatePicker } from 'antd';
-import type {
-  DatePickerProps as AntdDatePickerProps,
-  RangePickerProps as AntdRangePickerProps,
-} from 'antd/es/date-picker';
-import React from 'react';
+import { DatePicker as AntdDatePicker, DatePickerProps as AntdDatePickerProps } from 'antd';
+import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ReadPretty } from './ReadPretty';
+import { ReadPretty, ReadPrettyComposed } from './ReadPretty';
 import { getDateRanges, mapDatePicker, mapRangePicker } from './util';
+import { RangePickerProps } from 'antd/es/date-picker';
 
 interface IDatePickerProps {
   utc?: boolean;
 }
 
 type ComposedDatePicker = React.FC<AntdDatePickerProps> & {
-  ReadPretty?: React.FC<AntdDatePickerProps>;
-  RangePicker?: React.FC<AntdRangePickerProps>;
+  ReadPretty?: ReadPrettyComposed['DatePicker'];
+  RangePicker?: ComposedRangePicker;
+};
+
+type ComposedRangePicker = React.FC<RangePickerProps> & {
+  ReadPretty?: ReadPrettyComposed['DateRangePicker'];
 };
 
 const DatePickerContext = React.createContext<IDatePickerProps>({ utc: true });
@@ -44,11 +45,11 @@ const InternalRangePicker = connect(
   mapReadPretty(ReadPretty.DateRangePicker),
 );
 
-export const DatePicker = (props) => {
+export const DatePicker: ComposedDatePicker = (props) => {
   const { utc = true } = useDatePickerContext();
   const value = Array.isArray(props.value) ? props.value[0] : props.value;
-  props = { utc, ...props };
-  return <InternalDatePicker {...props} value={value} />;
+  const newProps = { utc, ...props };
+  return <InternalDatePicker {...newProps} value={value} />;
 };
 
 DatePicker.ReadPretty = ReadPretty.DatePicker;
@@ -78,8 +79,8 @@ DatePicker.RangePicker = function RangePicker(props) {
     { label: t('Last 90 days'), value: rangesValue.last90Days },
     { label: t('Next 90 days'), value: rangesValue.next90Days },
   ];
-  props = { utc, presets, ...props };
-  return <InternalRangePicker {...props} />;
+  const newProps: any = { utc, presets, ...props };
+  return <InternalRangePicker {...newProps} />;
 };
 
 export default DatePicker;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/ReadPretty.tsx b/packages/core/client/src/schema-component/antd/date-picker/ReadPretty.tsx
index 91c20e0248..f05fc9c312 100644
--- a/packages/core/client/src/schema-component/antd/date-picker/ReadPretty.tsx
+++ b/packages/core/client/src/schema-component/antd/date-picker/ReadPretty.tsx
@@ -9,23 +9,32 @@
 
 import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
 import { isArr } from '@formily/shared';
-import { getDefaultFormat, str2moment } from '@nocobase/utils/client';
-import type {
-  DatePickerProps as AntdDatePickerProps,
-  RangePickerProps as AntdRangePickerProps,
-} from 'antd/es/date-picker';
+import {
+  GetDefaultFormatProps,
+  Str2momentOptions,
+  Str2momentValue,
+  getDefaultFormat,
+  str2moment,
+} from '@nocobase/utils/client';
 import cls from 'classnames';
 import dayjs from 'dayjs';
 import React from 'react';
 
-type Composed = {
-  DatePicker: React.FC<AntdDatePickerProps>;
-  DateRangePicker: React.FC<AntdRangePickerProps>;
+export type ReadPrettyComposed = {
+  DatePicker: React.FC<ReadPrettyDatePickerProps>;
+  DateRangePicker: React.FC<DateRangePickerReadPrettyProps>;
 };
 
-export const ReadPretty: Composed = () => null;
+export const ReadPretty: ReadPrettyComposed = () => null;
 
-ReadPretty.DatePicker = function DatePicker(props: any) {
+export interface ReadPrettyDatePickerProps extends Str2momentOptions, GetDefaultFormatProps {
+  value?: Str2momentValue;
+  className?: string;
+  prefixCls?: string;
+  showTime?: boolean;
+}
+
+ReadPretty.DatePicker = function DatePicker(props) {
   const prefixCls = usePrefixCls('description-date-picker', props);
 
   if (!props.value) {
@@ -41,7 +50,14 @@ ReadPretty.DatePicker = function DatePicker(props: any) {
   return <div className={cls(prefixCls, props.className)}>{getLabels()}</div>;
 };
 
-ReadPretty.DateRangePicker = function DateRangePicker(props: any) {
+export interface DateRangePickerReadPrettyProps extends Str2momentOptions, GetDefaultFormatProps {
+  value?: Str2momentValue;
+  className?: string;
+  prefixCls?: string;
+  style?: React.CSSProperties;
+}
+
+ReadPretty.DateRangePicker = function DateRangePicker(props: DateRangePickerReadPrettyProps) {
   const prefixCls = usePrefixCls('description-text', props);
   const format = getDefaultFormat(props);
   const getLabels = () => {
diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-basic.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-basic.tsx
new file mode 100644
index 0000000000..6bdf1773eb
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-format.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-format.tsx
new file mode 100644
index 0000000000..50257d4211
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-format.tsx
@@ -0,0 +1,24 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        default: '2024-01-01 10:10:10',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          format: 'YYYY/MM/DD',
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt-utc.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt-utc.tsx
new file mode 100644
index 0000000000..f436f6c050
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt-utc.tsx
@@ -0,0 +1,37 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test1: {
+        type: 'string',
+        title: 'Test',
+        default: '2024-01-01 10:10:10',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          utc: true,
+          gmt: true,
+        },
+      },
+      test2: {
+        type: 'string',
+        title: 'Test',
+        default: '2024-01-01 10:10:10',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          showTime: true,
+          utc: true,
+          gmt: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt.tsx
new file mode 100644
index 0000000000..810560577c
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt.tsx
@@ -0,0 +1,35 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test1: {
+        type: 'string',
+        default: '2024-01-01 10:10:10',
+        title: 'Test1',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          gmt: true,
+        },
+      },
+      test2: {
+        type: 'string',
+        default: '2024-01-01 10:10:10',
+        title: 'Test2',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          showTime: true,
+          gmt: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-read-pretty.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-read-pretty.tsx
new file mode 100644
index 0000000000..831bceb0dd
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-read-pretty.tsx
@@ -0,0 +1,85 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test1: {
+        type: 'string',
+        default: '2024-01-01 10:10:10',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+      },
+      test2: {
+        type: 'string',
+        default: '2024-01-01 10:10:10',
+        title: 'Test(format)',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          format: 'YYYY/MM/DD',
+        },
+      },
+      test21: {
+        type: 'string',
+        default: '2024-01-01 10:10:10',
+        title: 'Test(dateFormat)',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          dateFormat: 'YYYY/MM/DD',
+        },
+      },
+      // test22: {
+      //   type: 'string',
+      //   default: '2024-01-01 10:10:10',
+      //   title: 'Test(timeFormat)',
+      //   'x-decorator': 'FormItem',
+      //   'x-component': 'DatePicker',
+      //   'x-component-props': {
+      //     timeFormat: 'HH/mm/ss',
+      //     showTime: true,
+      //   },
+      // },
+      test3: {
+        type: 'string',
+        default: '2024-01-01 10:10:10',
+        title: 'Test(showTime)',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          showTime: true,
+        },
+      },
+      test4: {
+        type: 'string',
+        default: '2024-01-01 10:10:10',
+        title: 'Test(GMT)',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          showTime: true,
+          gmt: true,
+        },
+      },
+      test5: {
+        type: 'string',
+        default: '2024-01-01 10:10:10',
+        title: 'Test(UTC)',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          showTime: true,
+          utc: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-show-time.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-show-time.tsx
new file mode 100644
index 0000000000..8ea8b70cbc
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-show-time.tsx
@@ -0,0 +1,23 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          showTime: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-utc.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-utc.tsx
new file mode 100644
index 0000000000..8eaed02a13
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-utc.tsx
@@ -0,0 +1,35 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test1: {
+        type: 'string',
+        title: 'Test',
+        default: '2024-01-01 10:10:10',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          utc: true,
+        },
+      },
+      test2: {
+        type: 'string',
+        title: 'Test',
+        default: '2024-01-01 10:10:10',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          utc: true,
+          showTime: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-basic.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-basic.tsx
new file mode 100644
index 0000000000..f27f244151
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker.RangePicker',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-format.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-format.tsx
new file mode 100644
index 0000000000..7a372a361e
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-format.tsx
@@ -0,0 +1,24 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'],
+        'x-component': 'DatePicker.RangePicker',
+        'x-component-props': {
+          format: 'YYYY/MM/DD HH:mm:ss',
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt-utc.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt-utc.tsx
new file mode 100644
index 0000000000..f3e3f3a3c7
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt-utc.tsx
@@ -0,0 +1,37 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test1: {
+        type: 'string',
+        title: 'Test',
+        default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'],
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker.RangePicker',
+        'x-component-props': {
+          utc: true,
+          gmt: true,
+        },
+      },
+      test2: {
+        type: 'string',
+        title: 'Test',
+        default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'],
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker.RangePicker',
+        'x-component-props': {
+          showTime: true,
+          utc: true,
+          gmt: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt.tsx
new file mode 100644
index 0000000000..bc474478ab
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt.tsx
@@ -0,0 +1,35 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test1: {
+        type: 'string',
+        default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'],
+        title: 'Test1',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker.RangePicker',
+        'x-component-props': {
+          gmt: true,
+        },
+      },
+      test2: {
+        type: 'string',
+        default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'],
+        title: 'Test2',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker.RangePicker',
+        'x-component-props': {
+          showTime: true,
+          gmt: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-read-pretty.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-read-pretty.tsx
new file mode 100644
index 0000000000..531b91c228
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-read-pretty.tsx
@@ -0,0 +1,74 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test1: {
+        type: 'string',
+        default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'],
+        title: 'Test1',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker.RangePicker',
+      },
+      test2: {
+        type: 'string',
+        default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'],
+        title: 'Test(format)',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker.RangePicker',
+        'x-component-props': {
+          format: 'YYYY/MM/DD',
+        },
+      },
+      test3: {
+        type: 'string',
+        default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'],
+        title: 'Test(dateFormat)',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker.RangePicker',
+        'x-component-props': {
+          dateFormat: 'YYYY/MM/DD',
+        },
+      },
+      test4: {
+        type: 'string',
+        default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'],
+        title: 'Test(showTime)',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker.RangePicker',
+        'x-component-props': {
+          showTime: true,
+        },
+      },
+      test5: {
+        type: 'string',
+        default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'],
+        title: 'Test(GMT)',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker.RangePicker',
+        'x-component-props': {
+          showTime: true,
+          gmt: true,
+        },
+      },
+      test6: {
+        type: 'string',
+        default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'],
+        title: 'Test(UTC)',
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker.RangePicker',
+        'x-component-props': {
+          showTime: true,
+          utc: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-utc.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-utc.tsx
new file mode 100644
index 0000000000..49716d1b4a
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-utc.tsx
@@ -0,0 +1,35 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test1: {
+        type: 'string',
+        title: 'Test',
+        default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'],
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker.RangePicker',
+        'x-component-props': {
+          utc: true,
+        },
+      },
+      test2: {
+        type: 'string',
+        title: 'Test',
+        default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'],
+        'x-decorator': 'FormItem',
+        'x-component': 'DatePicker.RangePicker',
+        'x-component-props': {
+          utc: true,
+          showTime: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/date-picker/index.md b/packages/core/client/src/schema-component/antd/date-picker/index.md
index 223f14afa3..b66bd00170 100644
--- a/packages/core/client/src/schema-component/antd/date-picker/index.md
+++ b/packages/core/client/src/schema-component/antd/date-picker/index.md
@@ -1,51 +1,99 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # DatePicker
 
-## Examples
+级联选择器，其基于 ant-design [DatePicker](https://ant.design/components/date-picker/) 组件封装。
 
-### Basic
+## DatePicker
 
-<code src="./demos/demo1.tsx"></code>
+```ts
+type DatePickerProps = AntdDatePickerProps
+```
 
-### DatePicker (GMT)
+### Basic Usage
 
-<code src="./demos/demo2.tsx"></code>
+<code src="./demos/new-demos/date-basic.tsx"></code>
 
-### DatePicker (showTime=false,gmt=true,utc=true)
+### Format
 
-<code src="./demos/demo7.tsx"></code>
+<code src="./demos/new-demos/date-format.tsx"></code>
 
+### Show Time Picker
 
-### DatePicker (showTime=false,gmt=false,utc=true)
+<code src="./demos/new-demos/date-show-time.tsx"></code>
 
-<code src="./demos/demo8.tsx"></code>
+### Read Pretty
 
+```ts
+interface GetDefaultFormatProps {
+  format?: string;
+  dateFormat?: string;
+  timeFormat?: string;
+  picker?: 'year' | 'month' | 'week' | 'quarter';
+  showTime?: boolean;
+}
 
-### DatePicker (non-UTC)
+interface Str2momentOptions {
+  gmt?: boolean;
+  picker?: 'year' | 'month' | 'week' | 'quarter';
+  utcOffset?: number;
+  utc?: boolean;
+}
 
-<code src="./demos/demo3.tsx"></code>
+interface ReadPrettyDatePickerProps extends Str2momentOptions, GetDefaultFormatProps {
+  value?: Str2momentValue;
+  className?: string;
+  prefixCls?: string;
+}
+```
 
-### RangePicker (GMT)
+<code src="./demos/new-demos/date-read-pretty.tsx"></code>
 
-<code src="./demos/demo4.tsx"></code>
+<!-- ### GMT
 
-### RangePicker (non-GMT)
+<code src="./demos/new-demos/date-gmt.tsx"></code> -->
 
-<code src="./demos/demo5.tsx"></code>
+<!-- ### UTC
 
-### RangePicker (non-UTC)
+<code src="./demos/new-demos/date-utc.tsx"></code> -->
 
-<code src="./demos/demo6.tsx"></code>
+<!-- ### GMT and UTC
 
+<code src="./demos/new-demos/date-gmt-utc.tsx"></code> -->
 
-## API
+## RangePicker
 
-基于 antd 的 [DatePicker](https://ant.design/components/date-picker/#API)，新增了以下扩展属性，用于支持 NocoBase 的日期字段设置。
+```ts
+type DatePickerProps = AntdRangePickerProps
+```
 
-- `dateFormat` 设置日期格式
-- `timeFormat` 设置时间格式
+### Basic Usage
+
+<code src="./demos/new-demos/range-basic.tsx"></code>
+
+### Format
+
+<code src="./demos/new-demos/range-format.tsx"></code>
+
+### Read Pretty
+
+```ts
+interface DateRangePickerReadPrettyProps extends Str2momentOptions, GetDefaultFormatProps {
+  value?: Str2momentValue;
+  className?: string;
+  prefixCls?: string;
+  style?: React.CSSProperties;
+}
+```
+
+<code src="./demos/new-demos/range-read-pretty.tsx"></code>
+
+<!-- ### GMT
+
+<code src="./demos/new-demos/range-gmt.tsx"></code> -->
+
+<!-- ### UTC
+
+<code src="./demos/new-demos/range-utc.tsx"></code> -->
+
+<!-- ### GMT and UTC
+
+<code src="./demos/new-demos/range-gmt-utc.tsx"></code> -->
diff --git a/packages/core/client/src/schema-component/antd/details/Details.tsx b/packages/core/client/src/schema-component/antd/details/Details.tsx
index 12b8979f36..aa607e3788 100644
--- a/packages/core/client/src/schema-component/antd/details/Details.tsx
+++ b/packages/core/client/src/schema-component/antd/details/Details.tsx
@@ -13,13 +13,19 @@ import _ from 'lodash';
 import { Empty } from 'antd';
 import { useDataBlockRequest } from '../../../data-source';
 import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
+import { FormProps } from '../form-v2/Form';
 
-export const Details = withDynamicSchemaProps((props) => {
-  const request = useDataBlockRequest();
+export type DetailsProps = FormProps;
 
-  if (!request?.loading && _.isEmpty(request?.data?.data)) {
-    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
-  }
+export const Details = withDynamicSchemaProps(
+  (props: DetailsProps) => {
+    const request = useDataBlockRequest();
 
-  return <FormV2 {...props} />;
-});
+    if (!request?.loading && _.isEmpty(request?.data?.data)) {
+      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+    }
+
+    return <FormV2 {...props} />;
+  },
+  { displayName: 'Details' },
+);
diff --git a/packages/core/client/src/schema-component/antd/details/demos/new-demos/list.tsx b/packages/core/client/src/schema-component/antd/details/demos/new-demos/list.tsx
new file mode 100644
index 0000000000..9f5964822b
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/details/demos/new-demos/list.tsx
@@ -0,0 +1,64 @@
+import {
+  DetailsBlockProvider,
+  useDetailsPaginationProps,
+  useDetailsWithPaginationDecoratorProps,
+  useDetailsWithPaginationProps,
+} from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'DetailsBlockProvider',
+    'x-use-decorator-props': 'useDetailsWithPaginationDecoratorProps',
+    'x-decorator-props': {
+      collection: 'roles',
+      action: 'list',
+      params: {
+        pageSize: 1,
+      },
+    },
+    'x-component': 'CardItem',
+    properties: {
+      details: {
+        type: 'void',
+        'x-pattern': 'readPretty',
+        'x-component': 'Details',
+        'x-use-component-props': 'useDetailsWithPaginationProps',
+        properties: {
+          name: {
+            type: 'string',
+            'x-component': 'CollectionField',
+            'x-decorator': 'FormItem',
+            'x-index': 1,
+          },
+          title: {
+            type: 'string',
+            'x-component': 'CollectionField',
+            'x-decorator': 'FormItem',
+            'x-index': 2,
+          },
+          pagination: {
+            'x-component': 'Pagination',
+            'x-read-pretty': false,
+            'x-use-component-props': 'useDetailsPaginationProps',
+            'x-index': 3,
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    components: {
+      DetailsBlockProvider,
+    },
+    scopes: {
+      useDetailsWithPaginationDecoratorProps,
+      useDetailsWithPaginationProps,
+      useDetailsPaginationProps,
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/details/demos/new-demos/single.tsx b/packages/core/client/src/schema-component/antd/details/demos/new-demos/single.tsx
new file mode 100644
index 0000000000..f87af6a9c9
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/details/demos/new-demos/single.tsx
@@ -0,0 +1,56 @@
+import {
+  DetailsBlockProvider,
+  useDetailsPaginationProps,
+  useDetailsWithPaginationDecoratorProps,
+  useDetailsWithPaginationProps,
+} from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'DetailsBlockProvider',
+    'x-use-decorator-props': 'useDetailsWithPaginationDecoratorProps',
+    'x-decorator-props': {
+      collection: 'roles',
+      action: 'get',
+      filterByTK: 1,
+    },
+    'x-component': 'CardItem',
+    properties: {
+      details: {
+        type: 'void',
+        'x-pattern': 'readPretty',
+        'x-component': 'Details',
+        'x-use-component-props': 'useDetailsWithPaginationProps',
+        properties: {
+          name: {
+            type: 'string',
+            'x-component': 'CollectionField',
+            'x-decorator': 'FormItem',
+            'x-index': 1,
+          },
+          title: {
+            type: 'string',
+            'x-component': 'CollectionField',
+            'x-decorator': 'FormItem',
+            'x-index': 2,
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    components: {
+      DetailsBlockProvider,
+    },
+    scopes: {
+      useDetailsWithPaginationDecoratorProps,
+      useDetailsWithPaginationProps,
+      useDetailsPaginationProps,
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/details/index.md b/packages/core/client/src/schema-component/antd/details/index.md
index 558f3626dd..d0a42e6c60 100644
--- a/packages/core/client/src/schema-component/antd/details/index.md
+++ b/packages/core/client/src/schema-component/antd/details/index.md
@@ -1,10 +1,27 @@
----
-group:
-  title: Schema Components
----
+
 
 # Details
 
-## Example
+表单详情区块。
 
-<code src="./demos/demo1.tsx"></code>
+用于展示表单的详细信息。
+
+```ts
+import { FormProps } from '@nocobase/client';
+
+type DetailsProps = FormProps;
+```
+
+其要和 `DetailsBlockProvider` 配合使用， `DetailsBlockProvider` 是对 `DataBlockProvider` 的二次封装，其属性可以参考 [DataBlockProvider](/core/data-block/data-block-provider#属性详解)。
+
+关于 Form 更多的配置请参考 [Form](/components/form)。
+
+需要注意 `Details` 组件所在的 Schema 中需要设置 `'x-pattern': 'readPretty'`。
+
+## Single Form Data
+
+<code src="./demos/new-demos/single.tsx"></code>
+
+## List Form Data
+
+<code src="./demos/new-demos/list.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/error-fallback/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/error-fallback/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..0b7181ad6b
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/error-fallback/demos/new-demos/basic.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from '@nocobase/client';
+import { Button } from 'antd';
+
+const App = () => {
+  const [showError, setShowError] = React.useState(false);
+
+  if (showError) {
+    throw new Error('error message');
+  }
+
+  return (
+    <Button danger onClick={() => setShowError(true)}>
+      show error
+    </Button>
+  );
+};
+
+export default () => {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback} onError={console.error}>
+      <App />
+    </ErrorBoundary>
+  );
+};
diff --git a/packages/core/client/src/schema-component/antd/error-fallback/index.md b/packages/core/client/src/schema-component/antd/error-fallback/index.md
index 3e6f1cdc61..e0347d6210 100644
--- a/packages/core/client/src/schema-component/antd/error-fallback/index.md
+++ b/packages/core/client/src/schema-component/antd/error-fallback/index.md
@@ -1,10 +1,9 @@
----
-group:
-  title: Schema Components
----
+
 
 # ErrorFallback
 
-## Example
+当组件渲染出错时，显示的组件。
 
-<code src="./demos/demo1.tsx"></code>
+其基于 [react-error-boundary](https://github.com/bvaughn/react-error-boundary) 库。
+
+<code src="./demos/new-demos/basic.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/filter/Filter.tsx b/packages/core/client/src/schema-component/antd/filter/Filter.tsx
index 3bb4b14820..f754a96b87 100644
--- a/packages/core/client/src/schema-component/antd/filter/Filter.tsx
+++ b/packages/core/client/src/schema-component/antd/filter/Filter.tsx
@@ -10,20 +10,28 @@
 import { ObjectField as ObjectFieldModel } from '@formily/core';
 import { observer, useField, useFieldSchema } from '@formily/react';
 import React, { useEffect } from 'react';
-import { useRequest } from '../../../api-client';
+import { UseRequestOptions, useRequest } from '../../../api-client';
 import { useProps } from '../../hooks/useProps';
 import { FilterActionDesigner } from './Filter.Action.Designer';
 import { FilterAction } from './FilterAction';
 import { FilterGroup } from './FilterGroup';
 import { SaveDefaultValue } from './SaveDefaultValue';
-import { FilterContext } from './context';
+import { FilterContext, FilterContextProps } from './context';
 import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
 
-const useDef = (options) => {
+const useDef = (options: UseRequestOptions) => {
   const field = useField<ObjectFieldModel>();
   return useRequest(() => Promise.resolve({ data: field.dataSource }), options);
 };
 
+export interface FilterProps extends Omit<FilterContextProps, 'field' | 'fieldSchema'> {
+  /**
+   * @deprecated use `x-use-component-props` instead
+   */
+  useDataSource?: typeof useDef;
+  className?: string;
+}
+
 export const Filter: any = withDynamicSchemaProps(
   observer((props: any) => {
     const { useDataSource = useDef } = props;
diff --git a/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx b/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx
index 0aa69c023a..418f11cd7a 100644
--- a/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx
+++ b/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx
@@ -17,15 +17,22 @@ import { useTranslation } from 'react-i18next';
 import { FormProvider, SchemaComponent } from '../../core';
 import { useDesignable } from '../../hooks';
 import { useProps } from '../../hooks/useProps';
-import { Action } from '../action';
+import { Action, ActionProps } from '../action';
 import { StablePopover } from '../popover';
 import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
 
 export const FilterActionContext = createContext<any>(null);
 FilterActionContext.displayName = 'FilterActionContext';
 
+export type FilterActionProps<T = {}> = ActionProps & {
+  options?: any[];
+  form?: Form;
+  onSubmit?: (values: T) => void;
+  onReset?: (values: T) => void;
+};
+
 export const FilterAction = withDynamicSchemaProps(
-  observer((props: any) => {
+  observer((props: FilterActionProps) => {
     const { t } = useTranslation();
     const field = useField<Field>();
     const [visible, setVisible] = useState(false);
diff --git a/packages/core/client/src/schema-component/antd/filter/context.ts b/packages/core/client/src/schema-component/antd/filter/context.ts
index a9d5580d31..d8d3e1302b 100644
--- a/packages/core/client/src/schema-component/antd/filter/context.ts
+++ b/packages/core/client/src/schema-component/antd/filter/context.ts
@@ -9,12 +9,13 @@
 
 import { ObjectField } from '@formily/core';
 import { Schema } from '@formily/react';
-import { createContext } from 'react';
+import { ComponentType, createContext } from 'react';
+import { DynamicComponentProps } from './DynamicComponent';
 
 export interface FilterContextProps {
   field?: ObjectField & { collectionName?: string };
   fieldSchema?: Schema;
-  dynamicComponent?: any;
+  dynamicComponent?: ComponentType<DynamicComponentProps>;
   options?: any[];
   disabled?: boolean;
   collectionName?: string;
diff --git a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..cf928e9515
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/basic.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { useField, observer } from '@formily/react';
+import { FilterActionProps, useRequest } from '@nocobase/client';
+
+import { getAppComponent } from '@nocobase/test/web';
+
+import { filterOptions } from './options';
+
+const ShowFilterData = observer(({ children }) => {
+  const field = useField<any>();
+  return (
+    <>
+      <pre>{JSON.stringify(field.value, null, 2)}</pre>
+      {children}
+    </>
+  );
+});
+
+const useFilterActionProps = (): FilterActionProps => {
+  const field = useField<any>();
+  const { run } = useRequest({ url: 'test' }, { manual: true });
+
+  return {
+    options: filterOptions,
+    onSubmit: async (values) => {
+      console.log('onSubmit', values);
+
+      // request api
+      run(values);
+
+      field.setValue(values);
+    },
+    onReset: (values) => {
+      console.log('onReset', values);
+    },
+  };
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        name: 'filter',
+        type: 'object',
+        enum: filterOptions,
+        title: 'Filter',
+        'x-decorator': 'ShowFilterData',
+        'x-component': 'Filter.Action',
+        'x-use-component-props': useFilterActionProps,
+      },
+    },
+  },
+  appOptions: {
+    components: {
+      ShowFilterData,
+    },
+    scopes: {
+      useFilterActionProps,
+    },
+  },
+  apis: {
+    test: { data: { data: 'ok' } },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/collection-fields.tsx b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/collection-fields.tsx
new file mode 100644
index 0000000000..a1dd42af55
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/collection-fields.tsx
@@ -0,0 +1,52 @@
+import {
+  FilterActionProps,
+  useCollection,
+  useDataBlockRequest,
+  useFilterFieldOptions,
+  useFilterFieldProps,
+} from '@nocobase/client';
+
+import { getAppComponent } from '@nocobase/test/web';
+
+const useFilterActionProps = (): FilterActionProps => {
+  const service = useDataBlockRequest();
+  const collection = useCollection();
+  const options = useFilterFieldOptions(collection.fields);
+  return useFilterFieldProps({
+    options,
+    params: service.state?.params?.[0] || service.params,
+    service,
+  });
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'DataBlockProvider',
+    'x-decorator-props': {
+      collection: 'users',
+      action: 'list',
+    },
+    properties: {
+      test: {
+        name: 'filter',
+        type: 'object',
+        title: 'Filter',
+        'x-component': 'Filter.Action',
+        'x-use-component-props': useFilterActionProps,
+      },
+    },
+  },
+  appOptions: {
+    components: {},
+    scopes: {
+      useFilterActionProps,
+    },
+  },
+  apis: {
+    test: { data: { data: 'ok' } },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/default-value.tsx b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/default-value.tsx
new file mode 100644
index 0000000000..f6e846ae59
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/default-value.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { useField, observer } from '@formily/react';
+import { FilterActionProps, useRequest } from '@nocobase/client';
+
+import { getAppComponent } from '@nocobase/test/web';
+
+import { filterOptions } from './options';
+
+const ShowFilterData = observer(({ children }) => {
+  const field = useField<any>();
+  return (
+    <>
+      <pre>{JSON.stringify(field.value, null, 2)}</pre>
+      {children}
+    </>
+  );
+});
+
+const useFilterActionProps = (): FilterActionProps => {
+  const field = useField<any>();
+  const { run } = useRequest({ url: 'test' }, { manual: true });
+
+  return {
+    options: filterOptions,
+    onSubmit: async (values) => {
+      console.log('onSubmit', values);
+
+      // request api
+      run(values);
+
+      field.setValue(values);
+    },
+    onReset: (values) => {
+      console.log('onReset', values);
+    },
+  };
+};
+
+const defaultValue = {
+  $or: [
+    {
+      name: {
+        $ne: null,
+      },
+    },
+    {
+      'tags.title': {
+        $eq: 'aaa',
+      },
+    },
+  ],
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        name: 'filter',
+        type: 'object',
+        enum: filterOptions,
+        title: 'Filter',
+        'x-decorator': 'ShowFilterData',
+        'x-component': 'Filter.Action',
+        default: defaultValue,
+        'x-use-component-props': useFilterActionProps,
+      },
+    },
+  },
+  appOptions: {
+    components: {
+      ShowFilterData,
+    },
+    scopes: {
+      useFilterActionProps,
+    },
+  },
+  apis: {
+    test: { data: { data: 'ok' } },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/options.ts b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/options.ts
new file mode 100644
index 0000000000..b53d6db456
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/options.ts
@@ -0,0 +1,65 @@
+const filterOptions = [
+  {
+    name: 'name',
+    title: 'Name',
+    operators: [
+      { label: 'eq', value: '$eq' },
+      { label: 'ne', value: '$ne' },
+    ],
+    schema: {
+      type: 'string',
+      title: 'Name',
+      'x-component': 'Input',
+    },
+  },
+  {
+    name: 'age',
+    title: 'Age',
+    operators: [
+      { label: 'in', value: '$in' },
+      { label: 'not', value: '$not' },
+    ],
+    schema: {
+      type: 'string',
+      title: 'Age',
+      'x-component': 'InputNumber',
+    },
+  },
+  {
+    name: 'tags',
+    title: 'Tags',
+    schema: {
+      title: 'Tags',
+    },
+    children: [
+      {
+        name: 'slug',
+        title: 'Slug',
+        operators: [
+          { label: 'in', value: '$in' },
+          { label: 'not', value: '$not' },
+        ],
+        schema: {
+          title: 'Slug',
+          type: 'string',
+          'x-component': 'Input',
+        },
+      },
+      {
+        name: 'title',
+        title: 'Title',
+        operators: [
+          { label: 'eq', value: '$eq' },
+          { label: 'ne', value: '$ne' },
+        ],
+        schema: {
+          title: 'Title',
+          type: 'string',
+          'x-component': 'Input',
+        },
+      },
+    ],
+  },
+];
+
+export { filterOptions };
diff --git a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/with-data-block.tsx b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/with-data-block.tsx
new file mode 100644
index 0000000000..988f508418
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/with-data-block.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { useField, observer } from '@formily/react';
+import { FilterActionProps, useDataBlockRequest, useRequest } from '@nocobase/client';
+
+import { getAppComponent } from '@nocobase/test/web';
+
+import { filterOptions } from './options';
+
+const ShowFilterData = observer(({ children }) => {
+  const field = useField<any>();
+  return (
+    <>
+      <pre>{JSON.stringify(field.value, null, 2)}</pre>
+      {children}
+    </>
+  );
+});
+
+const useFilterActionProps = (): FilterActionProps => {
+  const field = useField<any>();
+  const { run } = useDataBlockRequest(); // replace `useRequest`
+
+  return {
+    options: filterOptions,
+    onSubmit: async (values) => {
+      console.log('onSubmit', values);
+
+      // request api
+      run(values);
+
+      field.setValue(values);
+    },
+    onReset: (values) => {
+      console.log('onReset', values);
+    },
+  };
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'DataBlockProvider',
+    'x-decorator-props': {
+      collection: 'users',
+      action: 'list',
+    },
+    properties: {
+      test: {
+        name: 'filter',
+        type: 'object',
+        enum: filterOptions,
+        title: 'Filter',
+        'x-decorator': 'ShowFilterData',
+        'x-component': 'Filter.Action',
+        'x-use-component-props': useFilterActionProps,
+      },
+    },
+  },
+  appOptions: {
+    components: {
+      ShowFilterData,
+    },
+    scopes: {
+      useFilterActionProps,
+    },
+  },
+  apis: {
+    test: { data: { data: 'ok' } },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/filter/index.md b/packages/core/client/src/schema-component/antd/filter/index.md
index 602d3c68c0..a5597f221c 100644
--- a/packages/core/client/src/schema-component/antd/filter/index.md
+++ b/packages/core/client/src/schema-component/antd/filter/index.md
@@ -1,29 +1,36 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Filter
 
-## Examples
+用于筛选数据的组件，常用于区块过滤数据。
 
-### Filter Action
+```ts
+type FilterActionProps<T = {}> = ActionProps & {
+  options?: any[];
+  form?: Form;
+  onSubmit?: (values: T) => void;
+  onReset?: (values: T) => void;
+}
+```
 
-<code src="./demos/demo3.tsx"></code>
+### Basic Usage
 
-### Filter Default Value
+我们可以结合 `useRequest()` 发起请求。
 
-<code src="./demos/demo2.tsx"></code>
+<code src="./demos/new-demos/basic.tsx"></code>
 
-### Custom Dynamic Component
+### Default Value
 
-<code src="./demos/demo4.tsx"></code>
+可以通过 `schema.default` 设置默认值。
 
-### FilterAction
+<code src="./demos/new-demos/default-value.tsx"></code>
 
-<code src="./demos/demo5.tsx"></code>
+### With Data Block
 
-### Dynamic options
+如果是在 [DataBlock](/core/data-block/data-block-provider) 区块中使用，我们可以使用 [useDataBlockResource()](/core/data-block/data-block-request-provider) 发起请求。
 
-<code src="./demos/demo6.tsx"></code>
+<code src="./demos/new-demos/with-data-block.tsx"></code>
+
+### with Collection fields
+
+可以使用 `useFilterFieldOptions(collection.fields)` 获取集合字段的选项。
+
+<code src="./demos/new-demos/collection-fields.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
index 63b4d5fcf7..c72ad4563f 100644
--- a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
+++ b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
@@ -8,10 +8,10 @@
  */
 
 import { css, cx } from '@emotion/css';
-import { FormItem as Item } from '@formily/antd-v5';
+import { IFormItemProps, FormItem as Item } from '@formily/antd-v5';
 import { Field } from '@formily/core';
 import { observer, useField, useFieldSchema } from '@formily/react';
-import React, { useEffect, useMemo } from 'react';
+import React, { FC, useEffect, useMemo } from 'react';
 import { ACLCollectionFieldProvider } from '../../../acl/ACLProvider';
 import { useApp } from '../../../application';
 import { useFormActiveFields } from '../../../block-provider/hooks/useFormActiveFields';
@@ -42,7 +42,7 @@ const formItemLabelCss = css`
 `;
 
 export const FormItem: any = observer(
-  (props: any) => {
+  (props: IFormItemProps) => {
     useEnsureOperatorsValid();
     const field = useField<Field>();
     const schema = useFieldSchema();
diff --git a/packages/core/client/src/schema-component/antd/form-item/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/form-item/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..6970c1d12e
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/form-item/demos/new-demos/basic.tsx
@@ -0,0 +1,44 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { SchemaSettings } from '@nocobase/client';
+
+const simpleSettings = new SchemaSettings({
+  name: 'simpleSettings',
+  items: [
+    {
+      name: 'delete',
+      type: 'remove',
+    },
+  ],
+});
+
+const App = getAppComponent({
+  designable: true,
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'DndContext',
+    'x-component': 'FormV2',
+    properties: {
+      username: {
+        type: 'string',
+        title: 'Username',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+        'x-settings': 'simpleSettings',
+        required: true,
+      },
+      nickname: {
+        type: 'string',
+        title: 'Nickname',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+        'x-settings': 'simpleSettings',
+      },
+    },
+  },
+  appOptions: {
+    schemaSettings: [simpleSettings],
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/form-item/index.md b/packages/core/client/src/schema-component/antd/form-item/index.md
index 4a0e8a1c90..b26f5e3695 100644
--- a/packages/core/client/src/schema-component/antd/form-item/index.md
+++ b/packages/core/client/src/schema-component/antd/form-item/index.md
@@ -1,13 +1,12 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # FormItem
 
-表单字段装饰器。除此之外，也继承了 BlockItem 的功能。
+表单字段装饰器。其继承了 [BlockItem](/components/block-item) 的拖拽和 [SchemaToolbar](/core/ui-schema/schema-toolbar) 和 [SchemaSettings](/core/ui-schema/schema-settings) 的渲染功能。
+
+```ts
+import { IFormItemProps } from '@formily/antd-v5';
+type FormItemProps = IFormItemProps
+```
 
 ## Example
 
-<code src="./demos/demo1.tsx"></code>
+<code src="./demos/new-demos/basic.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/form-v2/Form.tsx b/packages/core/client/src/schema-component/antd/form-v2/Form.tsx
index ae0f21614f..b6506fdba4 100644
--- a/packages/core/client/src/schema-component/antd/form-v2/Form.tsx
+++ b/packages/core/client/src/schema-component/antd/form-v2/Form.tsx
@@ -8,7 +8,7 @@
  */
 
 import { css } from '@emotion/css';
-import { FormLayout } from '@formily/antd-v5';
+import { FormLayout, IFormLayoutProps } from '@formily/antd-v5';
 import { createForm, Field, Form as FormilyForm, onFieldInit, onFormInputChange } from '@formily/core';
 import { FieldContext, FormContext, observer, RecursionField, useField, useFieldSchema } from '@formily/react';
 import { reaction } from '@formily/reactive';
@@ -30,8 +30,9 @@ import { collectFieldStateOfLinkageRules, getTempFieldState } from './utils';
 import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
 import { useTemplateBlockContext } from '../../../block-provider/TemplateBlockProvider';
 
-export interface FormProps {
-  [key: string]: any;
+export interface FormProps extends IFormLayoutProps {
+  form?: FormilyForm;
+  disabled?: boolean;
 }
 function hasInitialValues(obj, rule) {
   const type = Object.keys(rule.condition)[0] || '$and';
diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..b91106ec44
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/basic.tsx
@@ -0,0 +1,69 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { ActionProps, useAPIClient } from '@nocobase/client';
+import { useForm } from '@formily/react';
+import { App as AntdApp } from 'antd';
+
+function useSubmitActionProps(): ActionProps {
+  const form = useForm();
+  const api = useAPIClient();
+  const { message } = AntdApp.useApp();
+
+  return {
+    type: 'primary',
+    htmlType: 'submit',
+    async onClick() {
+      await form.submit();
+      const values = form.values;
+
+      const { data } = await api.request({ url: 'users:create', method: 'post', data: values });
+      if (data.result === 'ok') {
+        message.success('Submit success');
+      }
+    },
+  };
+}
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'FormV2',
+        properties: {
+          username: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            title: 'Username',
+            required: true,
+          },
+          nickname: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            title: 'Nickname',
+          },
+          password: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            title: 'Password',
+          },
+          button: {
+            type: 'void',
+            'x-component': 'Action',
+            title: 'Submit',
+            'x-use-component-props': useSubmitActionProps,
+          },
+        },
+      },
+    },
+  },
+  apis: {
+    'users:create': { result: 'ok' },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection-data.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection-data.tsx
new file mode 100644
index 0000000000..895fd0b53d
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection-data.tsx
@@ -0,0 +1,89 @@
+import { useForm } from '@formily/react';
+import {
+  ActionProps,
+  CollectionField,
+  FormBlockProvider,
+  useDataBlockResource,
+  useFormBlockProps,
+} from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+import { App as AntdApp } from 'antd';
+
+function useSubmitActionProps(): ActionProps {
+  const form = useForm();
+  const resource = useDataBlockResource();
+  const { message } = AntdApp.useApp();
+
+  return {
+    type: 'primary',
+    htmlType: 'submit',
+    async onClick() {
+      await form.submit();
+      const values = form.values;
+
+      const { data } = await resource.update(values);
+      if (data.result === 'ok') {
+        message.success('Submit success');
+        form.reset();
+      }
+    },
+  };
+}
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'FormBlockProvider',
+        'x-component-props': {
+          collection: 'users',
+          action: 'get', // 获取数据
+          filterByTk: 1, // 获取 id 为 1 的数据
+          dataSource: 'main',
+        },
+        properties: {
+          form: {
+            type: 'void',
+            'x-component': 'FormV2',
+            'x-use-component-props': 'useFormBlockProps',
+            properties: {
+              username: {
+                type: 'string',
+                'x-decorator': 'FormItem',
+                'x-component': 'CollectionField',
+              },
+              nickname: {
+                type: 'string',
+                'x-decorator': 'FormItem',
+                'x-component': 'CollectionField',
+              },
+              submit: {
+                type: 'void',
+                'x-component': 'Action',
+                title: 'Submit',
+                'x-use-component-props': useSubmitActionProps,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    scopes: {
+      useFormBlockProps,
+    },
+    components: {
+      FormBlockProvider,
+      CollectionField,
+    },
+  },
+  apis: {
+    'users:update': { result: 'ok' },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection.tsx
new file mode 100644
index 0000000000..373407ca6b
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection.tsx
@@ -0,0 +1,83 @@
+import { useForm } from '@formily/react';
+import { ActionProps, CollectionField, FormBlockProvider, useDataBlockResource } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+import { App as AntdApp } from 'antd';
+
+function useSubmitActionProps(): ActionProps {
+  const form = useForm();
+  // const api = useAPIClient();
+  const resource = useDataBlockResource(); // 使用 useDataBlockResource 代替 useAPIClient
+  const { message } = AntdApp.useApp();
+
+  return {
+    type: 'primary',
+    htmlType: 'submit',
+    async onClick() {
+      await form.submit();
+      const values = form.values;
+
+      // const { data } = await api.request({ url: 'users:create', method: 'post', data: values })
+      const { data } = await resource.create(values); // 使用 resource.create(values) 代替 api.request({ url: 'users:create', method: 'post', data: values })
+      if (data.result === 'ok') {
+        message.success('Submit success');
+        form.reset(); // 提交成功后重置表单
+      }
+    },
+  };
+}
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'FormBlockProvider',
+        'x-component-props': {
+          collection: 'users', // users 数据表
+          dataSource: 'main', // 多数据源标识，可以不写，默认为 main
+        },
+        properties: {
+          form: {
+            'x-component': 'FormV2',
+            properties: {
+              username: {
+                type: 'string',
+                'x-decorator': 'FormItem',
+                // 'x-component': 'Input',
+                // title: 'Username',
+                // required: true,
+                'x-component': 'CollectionField', // 这里替换为 CollectionField，会自动根据 users 数据表的配置生成对应的组件
+              },
+              nickname: {
+                type: 'string',
+                'x-decorator': 'FormItem',
+                // 'x-component': 'Input',
+                // title: 'Nickname',
+                'x-component': 'CollectionField', // 这里替换为 CollectionField，会自动根据 users 数据表的配置生成对应的组件
+              },
+              submit: {
+                type: 'void',
+                'x-component': 'Action',
+                title: 'Submit',
+                'x-use-component-props': useSubmitActionProps,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    components: {
+      FormBlockProvider,
+      CollectionField,
+    },
+  },
+  apis: {
+    'users:create': { result: 'ok' },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/default-value.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/default-value.tsx
new file mode 100644
index 0000000000..71057ff45e
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/default-value.tsx
@@ -0,0 +1,56 @@
+import { createForm } from '@formily/core';
+import { getAppComponent } from '@nocobase/test/web';
+import { useMemo } from 'react';
+
+const useCustomFormProps = () => {
+  const form = useMemo(
+    () =>
+      createForm({
+        initialValues: {
+          username: 'test',
+          nickname: 'test',
+        },
+      }),
+    [],
+  );
+
+  return {
+    form,
+  };
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'FormV2',
+        'x-use-component-props': 'useCustomFormProps',
+        properties: {
+          username: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            title: 'Username',
+            required: true,
+          },
+          nickname: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            title: 'Nickname',
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    scopes: {
+      useCustomFormProps,
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/extend-collection.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/extend-collection.tsx
new file mode 100644
index 0000000000..6331b0b310
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/extend-collection.tsx
@@ -0,0 +1,109 @@
+import { CollectionField, ExtendCollectionsProvider, FormBlockProvider } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const bookCollection = {
+  key: 'book',
+  name: 'book',
+  title: 'book',
+  fields: [
+    {
+      key: 'id',
+      name: 'id',
+      type: 'bigInt',
+      interface: 'integer',
+      collectionName: 'book',
+      autoIncrement: true,
+      uiSchema: {
+        type: 'number',
+        title: '{{t("ID")}}',
+        'x-component': 'InputNumber',
+        'x-pattern': 'readPretty',
+      },
+    },
+    {
+      key: 'name',
+      name: 'name',
+      type: 'string',
+      interface: 'input',
+      description: null,
+      collectionName: 'book',
+      uiSchema: {
+        type: 'string',
+        'x-component': 'Input',
+        title: 'name',
+      },
+    },
+    {
+      key: 'rlzyzn3rke7',
+      name: 'price',
+      type: 'double',
+      interface: 'number',
+      description: null,
+      collectionName: 'book',
+      uiSchema: {
+        'x-component-props': {
+          step: '1',
+          stringMode: true,
+        },
+        type: 'number',
+        'x-component': 'InputNumber',
+        title: 'price',
+      },
+    },
+  ],
+  logging: true,
+  autoGenId: true,
+  createdAt: true,
+  createdBy: true,
+  updatedAt: true,
+  updatedBy: true,
+  template: 'general',
+  view: false,
+  schema: 'public',
+  filterTargetKey: 'id',
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'FormBlockProvider',
+        'x-component-props': {
+          collection: 'book',
+        },
+        properties: {
+          form: {
+            'x-component': 'FormV2',
+            properties: {
+              name: {
+                'x-decorator': 'FormItem',
+                'x-component': 'CollectionField',
+              },
+              price: {
+                'x-decorator': 'FormItem',
+                'x-component': 'CollectionField',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    components: {
+      FormBlockProvider,
+      CollectionField,
+    },
+    providers: [
+      [ExtendCollectionsProvider, { collections: [bookCollection] }], // 添加 book 数据表
+    ],
+  },
+  apis: {
+    'users:create': { result: 'ok' },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/form-layout.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/form-layout.tsx
new file mode 100644
index 0000000000..b81216107d
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/form-layout.tsx
@@ -0,0 +1,42 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'FormV2',
+        'x-component-props': {
+          layout: 'horizontal', // 'vertical' | 'horizontal' | 'inline
+          labelCol: 6,
+          wrapperCol: 10,
+        },
+        properties: {
+          username: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            title: 'Username',
+            required: true,
+          },
+          nickname: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            title: 'Nickname',
+          },
+          password: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            title: 'Password',
+          },
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/grid.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/grid.tsx
new file mode 100644
index 0000000000..eb71bf691b
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/grid.tsx
@@ -0,0 +1,73 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'FormV2',
+        properties: {
+          grid: {
+            type: 'void',
+            'x-component': 'Grid',
+            properties: {
+              row1: {
+                type: 'void',
+                'x-component': 'Grid.Row',
+                properties: {
+                  col1: {
+                    type: 'void',
+                    'x-component': 'Grid.Col',
+                    properties: {
+                      username: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                        title: 'Username',
+                        required: true,
+                      },
+                    },
+                  },
+                  col2: {
+                    type: 'void',
+                    'x-component': 'Grid.Col',
+                    properties: {
+                      nickname: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                        title: 'Nickname',
+                      },
+                    },
+                  },
+                },
+              },
+              row2: {
+                type: 'void',
+                'x-component': 'Grid.Row',
+                properties: {
+                  col1: {
+                    type: 'void',
+                    'x-component': 'Grid.Col',
+                    properties: {
+                      password: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                        title: 'Password',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/linkage.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/linkage.tsx
new file mode 100644
index 0000000000..e733ad36e9
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/linkage.tsx
@@ -0,0 +1,31 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'FormV2',
+        properties: {
+          username: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            title: 'Username',
+            required: true,
+          },
+          nickname: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            title: 'Nickname',
+          },
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..7019dad4cb
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,52 @@
+import { CollectionField, FormBlockProvider, useFormBlockProps } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-component': 'FormBlockProvider',
+        'x-component-props': {
+          collection: 'users',
+          action: 'get',
+          filterByTk: 1,
+          dataSource: 'main',
+        },
+        properties: {
+          form: {
+            type: 'void',
+            'x-component': 'FormV2',
+            'x-use-component-props': 'useFormBlockProps',
+            'x-pattern': 'readPretty', // 增加 x-read-pretty 属性
+            properties: {
+              username: {
+                type: 'string',
+                'x-decorator': 'FormItem',
+                'x-component': 'CollectionField',
+              },
+              nickname: {
+                type: 'string',
+                'x-decorator': 'FormItem',
+                'x-component': 'CollectionField',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    scopes: {
+      useFormBlockProps,
+    },
+    components: {
+      FormBlockProvider,
+      CollectionField,
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/form-v2/index.md b/packages/core/client/src/schema-component/antd/form-v2/index.md
index d9759260cc..cf83309915 100644
--- a/packages/core/client/src/schema-component/antd/form-v2/index.md
+++ b/packages/core/client/src/schema-component/antd/form-v2/index.md
@@ -1,29 +1,81 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # FormV2
 
-## Examples
+```ts
+import {  Form as FormilyForm } from '@formily/core';
+import { IFormLayoutProps } from '@formily/antd-v5';
 
-### 基础用法
+interface FormProps extends IFormLayoutProps {
+  form?: FormilyForm;
+  disabled?: boolean;
+}
+```
 
-<code src="./demos/demo1.tsx"></code>
+## Basic Usage
 
-### Initial values
+<code src="./demos/new-demos/basic.tsx"></code>
 
-<code src="./demos/demo2.tsx"></code>
+其中关于 Action 组件的的配置请参考 [Action](/components/action)。
 
-### Read pretty
+## Default values
 
-<code src="./demos/demo3.tsx"></code>
+我们可以使用 `x-use-component-props`，通过 `form.setInitialValues()` 来设置默认值，更多 form 的实例方法请参考 [Form](https://core.formilyjs.org/api/models/form)。
 
-## API
+<code src="./demos/new-demos/default-value.tsx"></code>
 
-属性说明
+## FormLayout
 
-- `form` form 实例
-- `useProps` 动态 props
-- [FormLayout](https://antd.formilyjs.org/zh-CN/components/form-layout) 相关 props
+FormV2 内部封装了 FormLayout 组件，FormLayout 组件的 props 请参考 [FormLayout](https://antd.formilyjs.org/zh-CN/components/form-layout)。
+
+<code src="./demos/new-demos/form-layout.tsx"></code>
+
+## Grid Layout
+
+其中关于 Grid 组件的配置请参考 [Grid](/components/grid)。
+
+<code src="./demos/new-demos/grid.tsx"></code>
+
+## With Collection
+
+我们可以使用 `FormBlockProvider` 和 `CollectionField` 自动读取数据表的配置，并根据数据表配置渲染表单项。
+
+其中 `FormBlockProvider` 是对 `DataBlockProvider` 的二次封装，其属性可以参考 [DataBlockProvider](/core/data-block/data-block-provider#属性详解)，`CollectionField` 会自动根据 field.name 查找对应的数据表的配置，并渲染成对应的表单项，更多关于 `CollectionField` 的说明请参考 [CollectionField](/core/data-source/collection-field)。
+
+并且我们可以使用 `DataBlockProvider` 提供的 `resource` 上下文对资源进行增删改查。
+
+例如我们以 `users` 数据表为例。
+
+<code src="./demos/new-demos/collection.tsx"></code>
+
+## Extend Collection
+
+如果 Collection 不是通过数据源管理器创建，而是自定义扩展，可以查看 [ExtendCollectionsProvider](/core/data-source/extend-collections-provider)。
+
+<code src="./demos/new-demos/extend-collection.tsx"></code>
+
+## Get Collection Data
+
+当我们给 `FormBlockProvider` 传递 `action: 'get'` 且存在 `filterByTk` 属性时，`FormBlockProvider` 会自动根据 `filterByTk` 的值获取数据表数据。关于参数的说明请参考 [DataBlockProvider](/core/data-block/data-block-provider#属性详解)。
+
+然后通过 `useFormBlockProps()` 将请求到的数据赋值给 Form。
+
+一般用在更新数据场景。
+
+<code src="./demos/new-demos/collection-data.tsx"></code>
+
+## Read Pretty
+
+只需要在 Schema 中添加 `x-read-pretty: true` 即可。
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
+
+## Linkage
+
+表单项之间可以通过 `x-linkage-rules` 属性进行联动。
+
+TODO:
+
+<!-- <code src="./demos/new-demos/linkage.tsx"></code> -->
+
+更多联动规则的写法请参考：TODO
+
+## Hooks
diff --git a/packages/core/client/src/schema-component/antd/form/index.md b/packages/core/client/src/schema-component/antd/form/index.md
index 3e8de9e81e..f531f307fc 100644
--- a/packages/core/client/src/schema-component/antd/form/index.md
+++ b/packages/core/client/src/schema-component/antd/form/index.md
@@ -1,9 +1,3 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Form
 
 ## Examples
diff --git a/packages/core/client/src/schema-component/antd/g2plot/index.md b/packages/core/client/src/schema-component/antd/g2plot/index.md
index 14fe2efa9d..7850c43764 100644
--- a/packages/core/client/src/schema-component/antd/g2plot/index.md
+++ b/packages/core/client/src/schema-component/antd/g2plot/index.md
@@ -1,9 +1,5 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # G2Plot
 
+G2 图表。
+
 <code src="./demos/demo1.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx b/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx
index 18a528b562..c86e6b040b 100644
--- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx
+++ b/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx
@@ -65,7 +65,19 @@ const designerCss = css`
   }
 `;
 
-const InternalGridCard = (props) => {
+export interface GridCardProps {
+  columnCount?: {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    xxl?: number;
+  };
+  pagination?: PaginationProps;
+}
+
+const InternalGridCard = (props: GridCardProps) => {
   // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
   const { columnCount: columnCountProp, pagination } = useProps(props);
 
diff --git a/packages/core/client/src/schema-component/antd/grid-card/demos/basic.tsx b/packages/core/client/src/schema-component/antd/grid-card/demos/basic.tsx
new file mode 100644
index 0000000000..6bf5e6f6fe
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/grid-card/demos/basic.tsx
@@ -0,0 +1,45 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'GridCard.Decorator',
+    'x-use-decorator-props': 'useGridCardBlockDecoratorProps',
+    'x-decorator-props': {
+      collection: 'roles',
+      action: 'list',
+      params: {
+        pageSize: 2,
+      },
+    },
+    properties: {
+      list: {
+        type: 'array',
+        'x-component': 'GridCard',
+        properties: {
+          item: {
+            type: 'object',
+            'x-component': 'GridCard.Item',
+            'x-read-pretty': true,
+            'x-use-component-props': 'useGridCardItemProps',
+            properties: {
+              name: {
+                type: 'string',
+                'x-component': 'CollectionField',
+                'x-decorator': 'FormItem',
+              },
+              title: {
+                type: 'string',
+                'x-component': 'CollectionField',
+                'x-decorator': 'FormItem',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/grid-card/index.md b/packages/core/client/src/schema-component/antd/grid-card/index.md
index 08ee38ba39..ef7ff29078 100644
--- a/packages/core/client/src/schema-component/antd/grid-card/index.md
+++ b/packages/core/client/src/schema-component/antd/grid-card/index.md
@@ -1,6 +1,27 @@
----
-group:
-  title: Schema Components
----
+
 
 # GridCard
+
+以 Card 样式为基础的网格卡片组件。
+
+用于展示表单的详细信息。
+
+其要和 `GridCard.Decorator` 配合使用， `GridCard.Decorator` 是对 `DataBlockProvider` 的二次封装，其属性可以参考 [DataBlockProvider](/core/data-block/data-block-provider#属性详解)。
+
+更多区块文档可查看 [Details](/components/details)、[Form](/componets/form-v2) 和 [Table](componets/table-v2)。
+
+```ts
+interface GridCardProps {
+  columnCount?: {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    xxl?: number;
+  };
+  pagination?: PaginationProps;
+}
+```
+
+<code src="./demos/basic.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/grid/Grid.tsx b/packages/core/client/src/schema-component/antd/grid/Grid.tsx
index 34a3334eaf..f669abe5db 100644
--- a/packages/core/client/src/schema-component/antd/grid/Grid.tsx
+++ b/packages/core/client/src/schema-component/antd/grid/Grid.tsx
@@ -17,7 +17,7 @@ import React, { createContext, useCallback, useContext, useEffect, useMemo, useR
 import { SchemaComponent, useDesignable, useFormBlockContext, useSchemaInitializerRender } from '../../../';
 import { useFormBlockType } from '../../../block-provider';
 import { FilterBlockProvider } from '../../../filter-provider/FilterProvider';
-import { DndContext } from '../../common/dnd-context';
+import { DndContext, DndContextProps } from '../../common/dnd-context';
 import { useToken } from '../__builtins__';
 import useStyles from './Grid.style';
 
@@ -315,8 +315,14 @@ export const useGridRowContext = () => {
   return useContext(GridRowContext);
 };
 
+export interface GridProps {
+  distributed?: boolean;
+  showDivider?: boolean;
+  dndContext?: false | DndContextProps;
+}
+
 export const Grid: any = observer(
-  (props: any) => {
+  (props: GridProps) => {
     const { distributed, showDivider = true } = props;
     const gridRef = useRef(null);
     const field = useField();
diff --git a/packages/core/client/src/schema-component/antd/grid/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/grid/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..7de61f29d8
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/grid/demos/new-demos/basic.tsx
@@ -0,0 +1,105 @@
+import { useFieldSchema } from '@formily/react';
+import { observer } from '@formily/reactive-react';
+import { getAppComponent } from '@nocobase/test/web';
+import React from 'react';
+import { DragHandler } from '@nocobase/client';
+
+const MyBlock = observer(
+  () => {
+    const fieldSchema = useFieldSchema();
+    return (
+      <div
+        className="block-item"
+        style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}
+      >
+        {fieldSchema.title}
+        <DragHandler />
+      </div>
+    );
+  },
+  { displayName: 'MyBlock' },
+);
+
+const App = getAppComponent({
+  designable: true,
+  schema: {
+    type: 'void',
+    name: 'grid1',
+    'x-component': 'Grid',
+    properties: {
+      row1: {
+        type: 'void',
+        'x-component': 'Grid.Row',
+        properties: {
+          col1: {
+            type: 'void',
+            'x-component': 'Grid.Col',
+            properties: {
+              block1: {
+                type: 'void',
+                title: 'row1 - col1 - block1',
+                'x-decorator': 'BlockItem',
+                'x-component': 'MyBlock',
+              },
+              block2: {
+                type: 'void',
+                title: 'row1 - col1 - block2',
+                'x-decorator': 'BlockItem',
+                'x-component': 'MyBlock',
+              },
+            },
+          },
+          col2: {
+            type: 'void',
+            'x-component': 'Grid.Col',
+            properties: {
+              block1: {
+                type: 'void',
+                title: 'row1 - col2 - block1',
+                'x-decorator': 'BlockItem',
+                'x-component': 'MyBlock',
+              },
+            },
+          },
+        },
+      },
+      row2: {
+        type: 'void',
+        'x-component': 'Grid.Row',
+        properties: {
+          col1: {
+            type: 'void',
+            'x-component': 'Grid.Col',
+            properties: {
+              block4: {
+                type: 'void',
+                title: 'row2 - col1 - block1',
+                'x-decorator': 'BlockItem',
+                'x-component': 'MyBlock',
+              },
+            },
+          },
+          col2: {
+            type: 'void',
+            'x-component': 'Grid.Col',
+            properties: {
+              block1: {
+                type: 'void',
+                title: 'row2 - col2 - block1',
+                'x-decorator': 'BlockItem',
+                'x-component': 'MyBlock',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    components: {
+      MyBlock,
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/grid/index.md b/packages/core/client/src/schema-component/antd/grid/index.md
index b6ea8627e7..4fe4e179c6 100644
--- a/packages/core/client/src/schema-component/antd/grid/index.md
+++ b/packages/core/client/src/schema-component/antd/grid/index.md
@@ -1,13 +1,20 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Grid
 
-<code src="./demos/demo1.tsx"></code>
+Grid 布局组件。
 
-<code src="./demos/demo2.tsx"></code>
+```ts
+interface GridProps {
+  showDivider?: boolean;
+  dndContext?: false | DndContextProps;
+}
+```
 
-<code src="./demos/demo3.tsx"></code>
+`Grid` 组件需要配合 `Grid.Row`、`Grid.Col` 使用。
+
+## Basic Usage
+
+<code src="./demos/new-demos/basic.tsx"></code>
+
+## With Form
+
+Demo [GridLayout](/components/form-v2#grid-layout)
diff --git a/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx b/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx
index d34fda5e69..2f86c9f38f 100644
--- a/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx
@@ -17,7 +17,18 @@ import { useTranslation } from 'react-i18next';
 import { Icon, hasIcon, icons } from '../../../icon';
 import { StablePopover } from '../popover';
 
-function IconField(props: any) {
+export interface IconPickerProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  suffix?: React.ReactNode;
+}
+
+interface IconPickerReadPrettyProps {
+  value?: string;
+}
+
+function IconField(props: IconPickerProps) {
   const layout = useFormLayout();
   const { value, onChange, disabled } = props;
   const [visible, setVisible] = useState(false);
@@ -73,13 +84,13 @@ function IconField(props: any) {
 
 export const IconPicker = connect(
   IconField,
-  mapProps((props, field) => {
+  mapProps((props: IconPickerProps, field) => {
     return {
       ...props,
       suffix: <span>{field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffix}</span>,
     };
   }),
-  mapReadPretty((props) => {
+  mapReadPretty((props: IconPickerReadPrettyProps) => {
     if (!isValid(props.value)) {
       return <div></div>;
     }
diff --git a/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..0d41645293
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'IconPicker',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..02c670e920
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'string',
+        default: 'appstoreoutlined',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'IconPicker',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/icon-picker/index.md b/packages/core/client/src/schema-component/antd/icon-picker/index.md
index b60559c869..79606a7714 100644
--- a/packages/core/client/src/schema-component/antd/icon-picker/index.md
+++ b/packages/core/client/src/schema-component/antd/icon-picker/index.md
@@ -1,13 +1,25 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # IconPicker
 
-## Examples
+Icon 选择器。
 
-### IconPicker
+## Basic Usage
 
-<code src="./demos/icon-picker.tsx"></code>
+```ts
+interface IconPickerProps {
+  value?: string;
+  disabled?: boolean;
+  suffix?: React.ReactNode;
+}
+```
+
+<code src="./demos/new-demos/basic.tsx"></code>
+
+## Read Pretty
+
+```ts
+interface IconPickerReadPrettyProps {
+  value?: string;
+}
+```
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/index.ts b/packages/core/client/src/schema-component/antd/index.ts
index 74ae92ef9b..ba15dd74b3 100644
--- a/packages/core/client/src/schema-component/antd/index.ts
+++ b/packages/core/client/src/schema-component/antd/index.ts
@@ -59,7 +59,8 @@ export * from './time-picker';
 export * from './tree-select';
 export * from './upload';
 export * from './variable';
-export * from './unixTimestamp';
-export * from './nanoIDInput';
+export * from './unix-timestamp';
+export * from './nanoid-input';
+export * from './error-fallback';
 
 import './index.less';
diff --git a/packages/core/client/src/schema-component/antd/input-number/InputNumber.tsx b/packages/core/client/src/schema-component/antd/input-number/InputNumber.tsx
index 9e451e0a95..793514bdb2 100644
--- a/packages/core/client/src/schema-component/antd/input-number/InputNumber.tsx
+++ b/packages/core/client/src/schema-component/antd/input-number/InputNumber.tsx
@@ -8,15 +8,15 @@
  */
 
 import { connect, mapReadPretty } from '@formily/react';
-import { InputNumber as AntdNumber, InputNumberProps } from 'antd';
+import { InputNumber as AntdNumber, InputNumberProps as AntdInputNumberProps } from 'antd';
 import React from 'react';
-import { ReadPretty } from './ReadPretty';
+import { InputNumberReadPrettyProps, ReadPretty } from './ReadPretty';
 import BigNumber from 'bignumber.js';
 
 type ComposedInputNumber = React.ForwardRefExoticComponent<
   Pick<Partial<any>, string | number | symbol> & React.RefAttributes<unknown>
 > & {
-  ReadPretty?: React.FC<InputNumberProps>;
+  ReadPretty?: React.FC<InputNumberReadPrettyProps>;
 };
 function toSafeNumber(value) {
   if (!value) {
@@ -28,7 +28,7 @@ function toSafeNumber(value) {
     return Number(value);
   }
 }
-export const InputNumber: ComposedInputNumber = connect((props) => {
+export const InputNumber: ComposedInputNumber = connect((props: AntdInputNumberProps) => {
   const { onChange, ...others } = props;
   const handleChange = (v) => {
     if (Number.isNaN(v)) {
diff --git a/packages/core/client/src/schema-component/antd/input-number/ReadPretty.tsx b/packages/core/client/src/schema-component/antd/input-number/ReadPretty.tsx
index e86e18bd49..13e5bf34a4 100644
--- a/packages/core/client/src/schema-component/antd/input-number/ReadPretty.tsx
+++ b/packages/core/client/src/schema-component/antd/input-number/ReadPretty.tsx
@@ -9,7 +9,6 @@
 
 import { isValid } from '@formily/shared';
 import { toFixedByStep } from '@nocobase/utils/client';
-import type { InputNumberProps as AntdInputNumberProps } from 'antd/es/input-number';
 import { format } from 'd3-format';
 import * as math from 'mathjs';
 import React, { useMemo } from 'react';
@@ -116,7 +115,7 @@ export function formatNumber(props) {
   return result;
 }
 
-export interface InputNumberProps extends AntdInputNumberProps {
+export interface InputNumberReadPrettyProps {
   formatStyle?: 'normal' | 'scientifix';
   unitConversion?: number;
   /**
@@ -127,9 +126,13 @@ export interface InputNumberProps extends AntdInputNumberProps {
    * @default '0.00'
    */
   separator?: '0,0.00' | '0.0,00' | '0 0,00' | '0.00';
+  step?: number;
+  value?: any;
+  addonBefore?: React.ReactNode;
+  addonAfter?: React.ReactNode;
 }
 
-export const ReadPretty: React.FC<InputNumberProps> = (props) => {
+export const ReadPretty: React.FC<InputNumberReadPrettyProps> = (props) => {
   const { step, formatStyle, value, addonBefore, addonAfter, unitConversion, unitConversionType, separator } = props;
   const result = useMemo(() => {
     return formatNumber({ step, formatStyle, value, unitConversion, unitConversionType, separator });
diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/addonBefore-addonAfter.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/addonBefore-addonAfter.tsx
new file mode 100644
index 0000000000..a4b37aa761
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/addonBefore-addonAfter.tsx
@@ -0,0 +1,24 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'number',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'InputNumber',
+        'x-component-props': {
+          addonBefore: '¥',
+          addonAfter: '万元',
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..46f060c3ad
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'number',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'InputNumber',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/format-style.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/format-style.tsx
new file mode 100644
index 0000000000..b295e1e6f6
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/format-style.tsx
@@ -0,0 +1,25 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'number',
+        title: 'Test',
+        default: 11111111111,
+        'x-decorator': 'FormItem',
+        'x-component': 'InputNumber',
+        'x-component-props': {
+          formatStyle: 'scientifix',
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..b998a41b63
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,26 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'number',
+        default: '1.11',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'InputNumber',
+        'x-component-props': {
+          addonBefore: '¥',
+          addonAfter: '万元',
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/separator.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/separator.tsx
new file mode 100644
index 0000000000..d0765bc365
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/separator.tsx
@@ -0,0 +1,53 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test1: {
+        type: 'number',
+        title: 'Test1',
+        default: 1234567.89,
+        'x-decorator': 'FormItem',
+        'x-component': 'InputNumber',
+        'x-component-props': {},
+      },
+      test2: {
+        type: 'number',
+        title: 'Test2',
+        default: 1234567.89,
+        'x-decorator': 'FormItem',
+        'x-component': 'InputNumber',
+        'x-component-props': {
+          separator: '0,0.00',
+        },
+      },
+      test3: {
+        type: 'number',
+        title: 'Test3',
+        default: 1234567.89,
+        'x-decorator': 'FormItem',
+        'x-component': 'InputNumber',
+        'x-component-props': {
+          separator: '0.0,00',
+        },
+      },
+      test4: {
+        type: 'number',
+        title: 'Test4',
+        default: 1234567.89,
+        'x-decorator': 'FormItem',
+        'x-component': 'InputNumber',
+        'x-component-props': {
+          separator: '0 0,00',
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/unit-conversion.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/unit-conversion.tsx
new file mode 100644
index 0000000000..f29476060f
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/unit-conversion.tsx
@@ -0,0 +1,36 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test1: {
+        type: 'number',
+        title: 'Test1',
+        default: 100,
+        'x-decorator': 'FormItem',
+        'x-component': 'InputNumber',
+        'x-component-props': {
+          unitConversion: 10,
+        },
+      },
+      test2: {
+        type: 'number',
+        title: 'Test2',
+        default: 100,
+        'x-decorator': 'FormItem',
+        'x-component': 'InputNumber',
+        'x-component-props': {
+          unitConversion: 10,
+          unitConversionType: '/',
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input-number/index.md b/packages/core/client/src/schema-component/antd/input-number/index.md
index b8d4020fd9..158a9dfd7a 100644
--- a/packages/core/client/src/schema-component/antd/input-number/index.md
+++ b/packages/core/client/src/schema-component/antd/input-number/index.md
@@ -1,21 +1,55 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # InputNumber
 
-## Examples
+数字输入框。其基于 ant-design [InputNumber](https://ant.design/components/input-number/) 组件进行封装。
 
-### InputNumber
 
-<code src="./demos/inputNumber.tsx"></code>
+## Basic Usage
 
-### addonBefore/addonAfter
+```ts
+type InputNumberProps = AntdInputNumberProps;
+```
 
-<code src="./demos/addonBefore&addonAfter.tsx"></code>
+<code src="./demos/new-demos/basic.tsx"></code>
 
-### High precision decimals
+## addonBefore and addonAfter
 
-<code src="./demos/highPrecisionDecimals.tsx"></code>
+<code src="./demos/new-demos/addonBefore-addonAfter.tsx"></code>
+
+## Read Pretty
+
+```ts
+interface InputNumberReadPrettyProps {
+  formatStyle?: 'normal' | 'scientifix';
+  unitConversion?: number;
+  /**
+   * @default '*'
+   */
+  unitConversionType?: '*' | '/';
+  /**
+   * @default '0.00'
+   */
+  separator?: '0,0.00' | '0.0,00' | '0 0,00' | '0.00';
+  step?: number;
+  value?: any;
+  addonBefore?: React.ReactNode;
+  addonAfter?: React.ReactNode;
+}
+```
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
+
+## Format Style
+
+可以使用科学计数法。
+
+<code src="./demos/new-demos/format-style.tsx"></code>
+
+## Unit Conversion
+
+可以原来数字基础上进行乘法或除法运算。
+
+<code src="./demos/new-demos/unit-conversion.tsx"></code>
+
+## Separator
+
+<code src="./demos/new-demos/separator.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/input/Input.tsx b/packages/core/client/src/schema-component/antd/input/Input.tsx
index bb3175849c..6a6ea063ed 100644
--- a/packages/core/client/src/schema-component/antd/input/Input.tsx
+++ b/packages/core/client/src/schema-component/antd/input/Input.tsx
@@ -13,15 +13,15 @@ import { Input as AntdInput } from 'antd';
 import { InputProps, TextAreaProps } from 'antd/es/input';
 import React from 'react';
 import { JSONTextAreaProps, Json } from './Json';
-import { ReadPretty } from './ReadPretty';
+import { ReadPretty, InputReadPrettyComposed } from './ReadPretty';
 
 export { ReadPretty as InputReadPretty } from './ReadPretty';
 
 type ComposedInput = React.FC<InputProps> & {
-  ReadPretty: React.FC<InputProps | { ellipsis?: boolean }>;
-  TextArea: React.FC<TextAreaProps>;
-  URL: React.FC<InputProps>;
-  JSON: React.FC<JSONTextAreaProps>;
+  ReadPretty: InputReadPrettyComposed['Input'];
+  TextArea: React.FC<TextAreaProps> & { ReadPretty: InputReadPrettyComposed['TextArea'] };
+  URL: React.FC<InputProps> & { ReadPretty: InputReadPrettyComposed['URL'] };
+  JSON: React.FC<JSONTextAreaProps> & { ReadPretty: InputReadPrettyComposed['JSON'] };
 };
 
 export const Input: ComposedInput = Object.assign(
@@ -52,7 +52,7 @@ export const Input: ComposedInput = Object.assign(
     URL: connect(AntdInput, mapReadPretty(ReadPretty.URL)),
     JSON: connect(Json, mapReadPretty(ReadPretty.JSON)),
     ReadPretty: ReadPretty.Input,
-  },
+  } as unknown as ComposedInput,
 );
 
 Input.displayName = 'Input';
diff --git a/packages/core/client/src/schema-component/antd/input/ReadPretty.tsx b/packages/core/client/src/schema-component/antd/input/ReadPretty.tsx
index 644bc6a661..30bec6badd 100644
--- a/packages/core/client/src/schema-component/antd/input/ReadPretty.tsx
+++ b/packages/core/client/src/schema-component/antd/input/ReadPretty.tsx
@@ -10,26 +10,35 @@
 import { css, cx } from '@emotion/css';
 import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
 import { Typography } from 'antd';
-import { InputProps, TextAreaProps } from 'antd/es/input';
 import cls from 'classnames';
 import React from 'react';
-import { useCompile } from '../..';
 import { EllipsisWithTooltip } from './EllipsisWithTooltip';
 import { HTMLEncode } from './shared';
+import { useCompile } from '../../hooks';
 
-type Composed = {
-  Input: React.FC<InputProps & { ellipsis?: any }>;
-  URL: React.FC<InputProps>;
-  TextArea: React.FC<
-    TextAreaProps & { ellipsis?: any; text?: any; addonBefore?: any; suffix?: any; addonAfter?: any; autop?: boolean }
-  >;
-  Html: any;
-  JSON: React.FC<TextAreaProps & { space: number }>;
+export type InputReadPrettyComposed = {
+  Input: React.FC<InputReadPrettyProps>;
+  URL: React.FC<URLReadPrettyProps>;
+  TextArea: React.FC<TextAreaReadPrettyProps>;
+  Html: React.FC<HtmlReadPrettyProps>;
+  JSON: React.FC<JSONTextAreaReadPrettyProps>;
 };
 
-export const ReadPretty: Composed = () => null;
+export const ReadPretty: InputReadPrettyComposed = () => null;
 
-ReadPretty.Input = (props) => {
+export interface InputReadPrettyProps {
+  value?: any;
+  className?: string;
+  style?: React.CSSProperties;
+  addonBefore?: React.ReactNode;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  addonAfter?: React.ReactNode;
+  ellipsis?: boolean;
+  prefixCls?: string;
+}
+
+ReadPretty.Input = (props: InputReadPrettyProps) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const prefixCls = usePrefixCls('description-input', props);
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -45,6 +54,20 @@ ReadPretty.Input = (props) => {
   );
 };
 
+export interface TextAreaReadPrettyProps {
+  value?: any;
+  className?: string;
+  style?: React.CSSProperties;
+  addonBefore?: React.ReactNode;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  addonAfter?: React.ReactNode;
+  ellipsis?: boolean;
+  text?: boolean;
+  autop?: boolean;
+  prefixCls?: string;
+}
+
 ReadPretty.TextArea = (props) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const prefixCls = usePrefixCls('description-textarea', props);
@@ -88,6 +111,19 @@ function convertToText(html: string) {
   return text?.replace(/[\n\r]/g, '') || '';
 }
 
+export interface HtmlReadPrettyProps {
+  value?: any;
+  className?: string;
+  style?: React.CSSProperties;
+  addonBefore?: React.ReactNode;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  addonAfter?: React.ReactNode;
+  ellipsis?: boolean;
+  autop?: boolean;
+  prefixCls?: string;
+}
+
 ReadPretty.Html = (props) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const prefixCls = usePrefixCls('description-textarea', props);
@@ -120,6 +156,17 @@ ReadPretty.Html = (props) => {
   );
 };
 
+export interface URLReadPrettyProps {
+  value?: any;
+  className?: string;
+  style?: React.CSSProperties;
+  addonBefore?: React.ReactNode;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  addonAfter?: React.ReactNode;
+  prefixCls?: string;
+}
+
 ReadPretty.URL = (props) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const prefixCls = usePrefixCls('description-url', props);
@@ -139,6 +186,14 @@ ReadPretty.URL = (props) => {
   );
 };
 
+export interface JSONTextAreaReadPrettyProps {
+  value?: any;
+  className?: string;
+  style?: React.CSSProperties;
+  space?: number;
+  prefixCls?: string;
+}
+
 ReadPretty.JSON = (props) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const prefixCls = usePrefixCls('json', props);
diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/input-read-pretty.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/input-read-pretty.tsx
new file mode 100644
index 0000000000..a7087edb23
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/input-read-pretty.tsx
@@ -0,0 +1,37 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        default:
+          'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+      },
+      test2: {
+        type: 'string',
+        title: 'Test(ellipsis)',
+        default:
+          'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+        'x-component-props': {
+          ellipsis: true,
+          style: {
+            width: 100,
+          },
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/input.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/input.tsx
new file mode 100644
index 0000000000..7441519119
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/input.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/json-read-pretty.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/json-read-pretty.tsx
new file mode 100644
index 0000000000..40318fd2fd
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/json-read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-read-pretty': true,
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        default: { a: 1, b: 2 },
+        'x-decorator': 'FormItem',
+        'x-component': 'Input.JSON',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/json.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/json.tsx
new file mode 100644
index 0000000000..6d27963210
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/json.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input.JSON',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea-read-pretty.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea-read-pretty.tsx
new file mode 100644
index 0000000000..66104d7706
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea-read-pretty.tsx
@@ -0,0 +1,51 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-read-pretty': true,
+    properties: {
+      read1: {
+        interface: 'string',
+        type: 'string',
+        default:
+          'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.',
+        title: `Test`,
+        'x-decorator': 'FormItem',
+        'x-component': 'Input.TextArea',
+      },
+      read2: {
+        interface: 'string',
+        type: 'string',
+        title: `Test(ellipsis)`,
+        'x-decorator': 'FormItem',
+        default:
+          'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.',
+        'x-component': 'Input.TextArea',
+        'x-component-props': {
+          ellipsis: true,
+          style: {
+            width: '100px',
+          },
+        },
+      },
+      read3: {
+        interface: 'string',
+        type: 'string',
+        title: `Test(autop)`,
+        default:
+          'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input.TextArea',
+        'x-component-props': {
+          autop: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea.tsx
new file mode 100644
index 0000000000..193e817cae
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test1: {
+        type: 'string',
+        title: 'Test1',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input.TextArea',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/url-read-pretty.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/url-read-pretty.tsx
new file mode 100644
index 0000000000..3e9b99560c
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/url-read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-read-pretty': true,
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        default: 'https://www.nocobase.com',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input.URL',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/url.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/url.tsx
new file mode 100644
index 0000000000..4eb3e0513f
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/url.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input.URL',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/input/index.md b/packages/core/client/src/schema-component/antd/input/index.md
index 75535a787f..f6d9f49df6 100644
--- a/packages/core/client/src/schema-component/antd/input/index.md
+++ b/packages/core/client/src/schema-component/antd/input/index.md
@@ -1,31 +1,112 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Input
 
-## Nodes
+文本输入框。其基于 ant-design [Input](https://ant.design/components/input/) 组件进行封装。
 
-- Input
-- Input.TextArea
-- Input.URL
+## Input
 
-## Examples
+### Basic Usage
 
-### Input
+```ts
+type InputProps = AntdInputProps;
+```
 
-<code src="./demos/input.tsx"></code>
+<code src="./demos/new-demos/input.tsx"></code>
 
-### Textarea
+### ReadPretty
 
-<code src="./demos/textarea.tsx"></code>
+```ts
+interface InputReadPrettyProps {
+  value?: any;
+  className?: string;
+  style?: React.CSSProperties;
+  addonBefore?: React.ReactNode;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  addonAfter?: React.ReactNode;
+  ellipsis?: boolean;
+  prefixCls?: string;
+}
+```
 
-### URL
+<code src="./demos/new-demos/input-read-pretty.tsx"></code>
 
-<code src="./demos/url.tsx"></code>
+## Input.TextArea
 
-### JSON
+### Basic Usage
 
-<code src="./demos/json.tsx"></code>
+```ts
+type InputTextAreaProps = AntdTextAreaProps;
+```
+
+<code src="./demos/new-demos/textarea.tsx"></code>
+
+### ReadPretty
+
+```ts
+interface InputTextAreaReadPrettyProps {
+  value?: any;
+  className?: string;
+  style?: React.CSSProperties;
+  addonBefore?: React.ReactNode;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  addonAfter?: React.ReactNode;
+  ellipsis?: boolean;
+  text?: boolean;
+  autop?: boolean;
+  prefixCls?: string;
+}
+```
+
+<code src="./demos/new-demos/textarea-read-pretty.tsx"></code>
+
+## Input.URL
+
+### Basic Usage
+
+```ts
+type InputURLProps = InputProps;
+```
+
+<code src="./demos/new-demos/url.tsx"></code>
+
+### ReadPretty
+
+```ts
+interface URLReadPrettyProps {
+  value?: any;
+  className?: string;
+  style?: React.CSSProperties;
+  addonBefore?: React.ReactNode;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  addonAfter?: React.ReactNode;
+  prefixCls?: string;
+}
+```
+
+<code src="./demos/new-demos/url-read-pretty.tsx"></code>
+
+## Input.JSON
+
+### Basic Usage
+
+```ts
+type JSONTextAreaProps = AntdTextAreaProps & { value?: string; space?: number }
+```
+
+<code src="./demos/new-demos/json.tsx"></code>
+
+### ReadPretty
+
+```ts
+interface JSONTextAreaReadPrettyProps {
+  value?: any;
+  className?: string;
+  style?: React.CSSProperties;
+  space?: number;
+  prefixCls?: string;
+}
+```
+
+<code src="./demos/new-demos/json-read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/list/demos/basic.tsx b/packages/core/client/src/schema-component/antd/list/demos/basic.tsx
new file mode 100644
index 0000000000..4a7201ac8a
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/list/demos/basic.tsx
@@ -0,0 +1,54 @@
+import { BlockSchemaComponentPlugin } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  designable: true,
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'List.Decorator',
+    'x-use-decorator-props': 'useListBlockDecoratorProps',
+    'x-decorator-props': {
+      collection: 'roles',
+      dataSource: 'main',
+      action: 'list',
+      params: {
+        pageSize: 10,
+      },
+    },
+    'x-component': 'CardItem',
+    properties: {
+      list: {
+        type: 'array',
+        'x-component': 'List',
+        properties: {
+          item: {
+            type: 'object',
+            'x-component': 'List.Item',
+            'x-read-pretty': true,
+            'x-use-component-props': 'useListItemProps',
+            properties: {
+              name: {
+                type: 'string',
+                'x-component': 'CollectionField',
+                'x-decorator': 'FormItem',
+                'x-index': 1,
+              },
+              title: {
+                type: 'string',
+                'x-component': 'CollectionField',
+                'x-decorator': 'FormItem',
+                'x-index': 2,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    plugins: [BlockSchemaComponentPlugin],
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/list/demos/view-or-edit-record.tsx b/packages/core/client/src/schema-component/antd/list/demos/view-or-edit-record.tsx
new file mode 100644
index 0000000000..054b331613
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/list/demos/view-or-edit-record.tsx
@@ -0,0 +1,244 @@
+import { useForm } from '@formily/react';
+import {
+  BlockSchemaComponentPlugin,
+  UseDataBlockProps,
+  useActionContext,
+  useCollectionRecord,
+  useDataBlockRequest,
+  useDataBlockResource,
+} from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+import { App as AntdApp } from 'antd';
+
+const useCloseActionProps = () => {
+  const { setVisible } = useActionContext();
+  return {
+    type: 'default',
+    onClick() {
+      setVisible(false);
+    },
+  };
+};
+
+const useSubmitActionProps = () => {
+  const { setVisible } = useActionContext();
+  const { message } = AntdApp.useApp();
+  const form = useForm();
+
+  const resource = useDataBlockResource();
+  const { run } = useDataBlockRequest();
+  return {
+    type: 'primary',
+    async onClick() {
+      await form.submit();
+      const values = form.values;
+
+      const { data } = await resource.update(values);
+      if (data.data.result === 'ok') {
+        message.success('Submit success');
+        setVisible(false);
+        form.reset();
+
+        // 刷新列表
+        run();
+      }
+    },
+  };
+};
+
+const useFormBlockProviderProps: UseDataBlockProps<'CollectionGet'> = () => {
+  const record = useCollectionRecord<{ id: number }>();
+  return {
+    collection: 'users',
+    action: 'get',
+    filterByTk: record.data.id,
+  };
+};
+
+const App = getAppComponent({
+  designable: true,
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'List.Decorator',
+    'x-use-decorator-props': 'useListBlockDecoratorProps',
+    'x-decorator-props': {
+      collection: 'users',
+      dataSource: 'main',
+      action: 'list',
+      params: {
+        pageSize: 10,
+      },
+    },
+    'x-component': 'CardItem',
+    properties: {
+      list: {
+        type: 'array',
+        'x-component': 'List',
+        properties: {
+          item: {
+            type: 'object',
+            'x-component': 'List.Item',
+            'x-read-pretty': true,
+            'x-use-component-props': 'useListItemProps',
+            properties: {
+              username: {
+                type: 'string',
+                'x-component': 'CollectionField',
+                'x-decorator': 'FormItem',
+                'x-index': 1,
+              },
+              nickname: {
+                type: 'string',
+                'x-component': 'CollectionField',
+                'x-decorator': 'FormItem',
+                'x-index': 2,
+              },
+              actions: {
+                type: 'void',
+                'x-align': 'left',
+                'x-component': 'ActionBar',
+                'x-use-component-props': 'useListActionBarProps',
+                'x-component-props': {
+                  layout: 'one-column',
+                },
+                properties: {
+                  view: {
+                    type: 'void',
+                    title: 'View',
+                    'x-action': 'view',
+                    'x-component': 'Action.Link',
+                    'x-component-props': {
+                      openMode: 'drawer',
+                    },
+                    properties: {
+                      drawer: {
+                        type: 'void',
+                        title: 'View record',
+                        'x-component': 'Action.Drawer',
+                        'x-component-props': {
+                          className: 'nb-action-popup',
+                        },
+                        properties: {
+                          formContext: {
+                            type: 'void',
+                            'x-decorator': 'FormBlockProvider',
+                            'x-use-decorator-props': 'useFormBlockProviderProps',
+                            'x-component': 'CardItem',
+                            properties: {
+                              form: {
+                                type: 'void',
+                                'x-component': 'FormV2',
+                                'x-pattern': 'readPretty',
+                                'x-use-component-props': 'useFormBlockProps',
+                                properties: {
+                                  username: {
+                                    type: 'string',
+                                    'x-decorator': 'FormItem',
+                                    'x-component': 'Input',
+                                    title: 'Username',
+                                    required: true,
+                                  },
+                                  nickname: {
+                                    type: 'string',
+                                    'x-decorator': 'FormItem',
+                                    'x-component': 'Input',
+                                    title: 'Nickname',
+                                  },
+                                },
+                              },
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                  edit: {
+                    type: 'void',
+                    title: 'Edit',
+                    'x-action': 'update',
+                    'x-component': 'Action.Link',
+                    'x-component-props': {
+                      openMode: 'drawer',
+                      icon: 'EditOutlined',
+                    },
+                    properties: {
+                      drawer: {
+                        type: 'void',
+                        title: 'Edit record',
+                        'x-component': 'Action.Drawer',
+                        'x-component-props': {
+                          className: 'nb-action-popup',
+                        },
+                        properties: {
+                          formContext: {
+                            type: 'void',
+                            'x-decorator': 'FormBlockProvider',
+                            'x-use-decorator-props': 'useFormBlockProviderProps',
+                            'x-component': 'CardItem',
+                            properties: {
+                              form: {
+                                type: 'void',
+                                'x-component': 'FormV2',
+                                'x-use-component-props': 'useFormBlockProps',
+                                properties: {
+                                  username: {
+                                    type: 'string',
+                                    'x-decorator': 'FormItem',
+                                    'x-component': 'Input',
+                                    title: 'Username',
+                                    required: true,
+                                  },
+                                  nickname: {
+                                    type: 'string',
+                                    'x-decorator': 'FormItem',
+                                    'x-component': 'Input',
+                                    title: 'Nickname',
+                                  },
+                                },
+                              },
+                            },
+                          },
+                          footer: {
+                            type: 'void',
+                            'x-component': 'Action.Drawer.Footer',
+                            properties: {
+                              close: {
+                                title: 'Close',
+                                'x-component': 'Action',
+                                'x-component-props': {
+                                  type: 'default',
+                                },
+                                'x-use-component-props': 'useCloseActionProps',
+                              },
+                              submit: {
+                                title: 'Submit',
+                                'x-component': 'Action',
+                                'x-use-component-props': 'useSubmitActionProps',
+                              },
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    plugins: [BlockSchemaComponentPlugin],
+    components: {},
+    scopes: {
+      useSubmitActionProps,
+      useCloseActionProps,
+      useFormBlockProviderProps,
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/list/demos/with-action.tsx b/packages/core/client/src/schema-component/antd/list/demos/with-action.tsx
new file mode 100644
index 0000000000..5ad4225c3f
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/list/demos/with-action.tsx
@@ -0,0 +1,105 @@
+import { BlockSchemaComponentPlugin } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'List.Decorator',
+    'x-use-decorator-props': 'useListBlockDecoratorProps',
+    'x-decorator-props': {
+      collection: 'roles',
+      dataSource: 'main',
+      action: 'list',
+      params: {
+        pageSize: 10,
+      },
+    },
+    'x-component': 'CardItem',
+    properties: {
+      actions: {
+        type: 'void',
+        'x-component': 'ActionBar',
+        'x-pattern': 'editable',
+        'x-component-props': {
+          style: {
+            marginBottom: 20,
+          },
+        },
+        properties: {
+          filter: {
+            'x-component': 'Filter.Action',
+            'x-use-component-props': 'useFilterActionProps',
+            'x-component-props': {
+              icon: 'FilterOutlined',
+            },
+            'x-align': 'left',
+          },
+          refresh: {
+            title: 'Refresh',
+            'x-component': 'Action',
+            'x-align': 'left',
+            'x-use-component-props': 'useRefreshActionProps',
+          },
+          add: {
+            type: 'void',
+            'x-component': 'Action',
+            title: 'Add New',
+            'x-align': 'right',
+            'x-component-props': {
+              type: 'primary',
+            },
+            properties: {
+              drawer: {
+                type: 'void',
+                'x-component': 'Action.Drawer',
+                title: 'Drawer Title',
+                properties: {
+                  tip: {
+                    type: 'void',
+                    'x-component': 'Markdown.Void',
+                    'x-editable': false,
+                    'x-component-props': {
+                      content: '请查看 [Action.Drawer](/components/action) 组件的文档',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      list: {
+        type: 'array',
+        'x-component': 'List',
+        properties: {
+          item: {
+            type: 'object',
+            'x-component': 'List.Item',
+            'x-read-pretty': true,
+            'x-use-component-props': 'useListItemProps',
+            properties: {
+              name: {
+                type: 'string',
+                'x-component': 'CollectionField',
+                'x-decorator': 'FormItem',
+                'x-index': 1,
+              },
+              title: {
+                type: 'string',
+                'x-component': 'CollectionField',
+                'x-decorator': 'FormItem',
+                'x-index': 2,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    plugins: [BlockSchemaComponentPlugin],
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/list/index.md b/packages/core/client/src/schema-component/antd/list/index.md
index 6eec361621..fa43fbf851 100644
--- a/packages/core/client/src/schema-component/antd/list/index.md
+++ b/packages/core/client/src/schema-component/antd/list/index.md
@@ -1,8 +1,25 @@
----
-group:
-  title: Schema Components
----
-
 # List
 
-## Example
+列表区块组件。其基于 ant-design [List](https://ant.design/components/list/) 组件封装。
+
+其需要配合 `List.Decorator` 和 `List.Item` 使用，`List.Decorator` 是对 `DataBlockProvider` 的二次封装，其属性可以参考 [DataBlockProvider](/core/data-block/data-block-provider#属性详解)。
+
+```ts
+type ListProps = AntdListProps;
+```
+
+## Basic Usage
+
+<code src="./demos/basic.tsx"></code>
+
+## With ActionBar
+
+其原理同 Table [ActionBar](/components/table-v2#with-actiontoolbar)
+
+<code src="./demos/with-action.tsx"></code>
+
+## View Or Edit Record
+
+具体说明请参考 Table [View Or Edit Record](/components/table-v2#view-or-edit-record)
+
+<code src="./demos/view-or-edit-record.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/markdown/Markdown.Void.tsx b/packages/core/client/src/schema-component/antd/markdown/Markdown.Void.tsx
index 76798b9ca6..42135ddb4c 100644
--- a/packages/core/client/src/schema-component/antd/markdown/Markdown.Void.tsx
+++ b/packages/core/client/src/schema-component/antd/markdown/Markdown.Void.tsx
@@ -17,15 +17,22 @@ import { useDesignable } from '../../hooks/useDesignable';
 import { MarkdownVoidDesigner } from './Markdown.Void.Designer';
 import { useStyles } from './style';
 import { useParseMarkdown } from './util';
+import { TextAreaProps } from 'antd/es/input';
 
-const MarkdownEditor = (props: any) => {
+export interface MarkdownEditorProps extends Omit<TextAreaProps, 'onSubmit'> {
+  defaultValue?: string;
+  onSubmit?: (value: string) => void;
+  onCancel?: (e: React.MouseEvent) => void;
+}
+
+const MarkdownEditor = (props: MarkdownEditorProps) => {
   const { t } = useTranslation();
   const [value, setValue] = useState(props.defaultValue);
   return (
     <div className={'mb-markdown'} style={{ position: 'relative' }}>
       <AntdInput.TextArea
         autoSize={{ minRows: 3 }}
-        {...props}
+        {...(props as any)}
         value={value}
         onChange={(e) => {
           setValue(e.target.value);
diff --git a/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..c06e1d1025
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Markdown',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..8ab5f96949
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        default: '# Title\ncontent',
+        'x-decorator': 'FormItem',
+        'x-component': 'Markdown',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/markdown/index.md b/packages/core/client/src/schema-component/antd/markdown/index.md
index 7c4acfa0e7..a2308c8310 100644
--- a/packages/core/client/src/schema-component/antd/markdown/index.md
+++ b/packages/core/client/src/schema-component/antd/markdown/index.md
@@ -1,17 +1,33 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Markdown
 
-## Examples
+Markdown 编辑器。更多属性请参考 [TextArea](https://ant.design/components/input#inputtextarea)。
 
-### Markdown
+## Markdown
 
-<code src="./demos/demo1.tsx"></code>
+### Basic
 
-### Markdown. Void
+```ts
+interface MarkdownProps extends TextAreaProps {}
+```
+
+<code src="./demos/new-demos/basic.tsx"></code>
+
+### Read Pretty
+
+```ts
+interface MarkdownReadPrettyProps extends InputTextAreaReadPrettyProps  {}
+```
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
+
+## Markdown.Void
+
+```ts
+interface MarkdownVoidProps extends Omit<TextAreaProps, 'onSubmit'> {
+  defaultValue?: string;
+  onSubmit?: (value: string) => void;
+  onCancel?: (e: React.MouseEvent) => void;
+}
+```
 
 <code src="./demos/demo2.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/menu/index.md b/packages/core/client/src/schema-component/antd/menu/index.md
index 10bf6fbd8c..a12da5898b 100644
--- a/packages/core/client/src/schema-component/antd/menu/index.md
+++ b/packages/core/client/src/schema-component/antd/menu/index.md
@@ -1,9 +1,3 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Menu
 
 ## Nodes
diff --git a/packages/core/client/src/schema-component/antd/nanoIDInput/NanoIDInput.tsx b/packages/core/client/src/schema-component/antd/nanoid-input/NanoIDInput.tsx
similarity index 99%
rename from packages/core/client/src/schema-component/antd/nanoIDInput/NanoIDInput.tsx
rename to packages/core/client/src/schema-component/antd/nanoid-input/NanoIDInput.tsx
index 48b2e853af..b268154bb6 100644
--- a/packages/core/client/src/schema-component/antd/nanoIDInput/NanoIDInput.tsx
+++ b/packages/core/client/src/schema-component/antd/nanoid-input/NanoIDInput.tsx
@@ -20,7 +20,7 @@ export const NanoIDInput = Object.assign(
   connect(
     AntdInput,
     mapProps((props: any, field: any) => {
-      const { size, customAlphabet } = useCollectionField() || {};
+      const { size, customAlphabet } = useCollectionField() || { size: 21 };
       const { t } = useTranslation();
       const form = useForm();
       function isValidNanoid(value) {
diff --git a/packages/core/client/src/schema-component/antd/nanoIDInput/__tests__/NanoIDInput.test.tsx b/packages/core/client/src/schema-component/antd/nanoid-input/__tests__/NanoIDInput.test.tsx
similarity index 100%
rename from packages/core/client/src/schema-component/antd/nanoIDInput/__tests__/NanoIDInput.test.tsx
rename to packages/core/client/src/schema-component/antd/nanoid-input/__tests__/NanoIDInput.test.tsx
diff --git a/packages/core/client/src/schema-component/antd/nanoid-input/demos/basic.tsx b/packages/core/client/src/schema-component/antd/nanoid-input/demos/basic.tsx
new file mode 100644
index 0000000000..bcacd72e1c
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/nanoid-input/demos/basic.tsx
@@ -0,0 +1,21 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        default: 'rdQ1G9iPEtjR6BpIAPilZ',
+        'x-decorator': 'FormItem',
+        'x-component': 'NanoIDInput',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/nanoid-input/demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/nanoid-input/demos/read-pretty.tsx
new file mode 100644
index 0000000000..bfb06fa966
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/nanoid-input/demos/read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        default: 'rdQ1G9iPEtjR6BpIAPilZ',
+        'x-decorator': 'FormItem',
+        'x-component': 'NanoIDInput',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/nanoid-input/index.md b/packages/core/client/src/schema-component/antd/nanoid-input/index.md
new file mode 100644
index 0000000000..894cc42d9d
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/nanoid-input/index.md
@@ -0,0 +1,19 @@
+# NanoIDInput
+
+JavaScript 字符串ID生成器组件，其基于 [NanoID](https://github.com/ai/nanoid)。
+
+## Basic Usage
+
+```ts
+type NanoIDInputProps = AntdInputProps
+```
+
+<code src="./demos/basic.tsx"></code>
+
+## Read Pretty
+
+<code src="./demos/read-pretty.tsx"></code>
+
+```ts
+type NanoIDInputReadPrettyProps = InputReadPrettyProps
+```
diff --git a/packages/core/client/src/schema-component/antd/nanoIDInput/index.tsx b/packages/core/client/src/schema-component/antd/nanoid-input/index.tsx
similarity index 100%
rename from packages/core/client/src/schema-component/antd/nanoIDInput/index.tsx
rename to packages/core/client/src/schema-component/antd/nanoid-input/index.tsx
diff --git a/packages/core/client/src/schema-component/antd/page/index.md b/packages/core/client/src/schema-component/antd/page/index.md
index 163876dd8e..f505078b94 100644
--- a/packages/core/client/src/schema-component/antd/page/index.md
+++ b/packages/core/client/src/schema-component/antd/page/index.md
@@ -1,9 +1,3 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Page
 
 可以与 DocumentTitleProvider 搭配使用，将 page title 显示在 document.title 上。
diff --git a/packages/core/client/src/schema-component/antd/pagination/demos/basic.tsx b/packages/core/client/src/schema-component/antd/pagination/demos/basic.tsx
new file mode 100644
index 0000000000..0f5e3e9de4
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/pagination/demos/basic.tsx
@@ -0,0 +1,6 @@
+import { Pagination } from '@nocobase/client';
+import React from 'react';
+
+const App: React.FC = () => <Pagination defaultCurrent={1} total={50} />;
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/pagination/demos/hide.tsx b/packages/core/client/src/schema-component/antd/pagination/demos/hide.tsx
new file mode 100644
index 0000000000..0c551c6cab
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/pagination/demos/hide.tsx
@@ -0,0 +1,6 @@
+import { Pagination } from '@nocobase/client';
+import React from 'react';
+
+const App: React.FC = () => <Pagination hidden defaultCurrent={1} total={50} />;
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/pagination/index.md b/packages/core/client/src/schema-component/antd/pagination/index.md
new file mode 100644
index 0000000000..c37c5c0ba4
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/pagination/index.md
@@ -0,0 +1,18 @@
+
+# Pagination
+
+分页组件。其基于 ant-design [Pagination](https://ant.design/components/pagination/) 组件进行封装。
+
+```ts
+interface PaginationProps extends AntdPaginationProps {
+  hidden?: boolean;
+}
+```
+
+## Basic Usage
+
+<code src="./demos/basic.tsx"></code>
+
+## Hide
+
+<code src="./demos/hide.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/pagination/index.tsx b/packages/core/client/src/schema-component/antd/pagination/index.tsx
index 3c92020096..5c520439c5 100644
--- a/packages/core/client/src/schema-component/antd/pagination/index.tsx
+++ b/packages/core/client/src/schema-component/antd/pagination/index.tsx
@@ -8,14 +8,18 @@
  */
 
 import { observer } from '@formily/react';
-import { Pagination as AntdPagination } from 'antd';
+import { Pagination as AntdPagination, PaginationProps as AntdPaginationProps } from 'antd';
 import React, { KeyboardEventHandler } from 'react';
 import { useProps } from '../../hooks/useProps';
 import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
 
+export interface PaginationProps extends AntdPaginationProps {
+  hidden?: boolean;
+}
+
 export const Pagination = withDynamicSchemaProps(
   observer(
-    (props: any) => {
+    (props: PaginationProps) => {
       // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
       const { hidden, ...others } = useProps(props);
 
diff --git a/packages/core/client/src/schema-component/antd/password/Password.tsx b/packages/core/client/src/schema-component/antd/password/Password.tsx
index 3aebc22a53..d997699cea 100644
--- a/packages/core/client/src/schema-component/antd/password/Password.tsx
+++ b/packages/core/client/src/schema-component/antd/password/Password.tsx
@@ -9,16 +9,16 @@
 
 import { connect, mapReadPretty } from '@formily/react';
 import { Input } from 'antd';
-import { PasswordProps } from 'antd/es/input';
+import { PasswordProps as AntdPasswordProps } from 'antd/es/input';
 import React from 'react';
 import { PasswordStrength } from './PasswordStrength';
 
-export interface IPasswordProps extends PasswordProps {
-  checkStrength: boolean;
+export interface PasswordProps extends AntdPasswordProps {
+  checkStrength?: boolean;
 }
 
 export const Password = connect(
-  (props: IPasswordProps) => {
+  (props: PasswordProps) => {
     const { value, className, checkStrength, ...others } = props;
     const blockStyle: React.CSSProperties = {
       position: 'absolute',
diff --git a/packages/core/client/src/schema-component/antd/password/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/password/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..0e4c398d98
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/password/demos/new-demos/basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Password',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/password/demos/new-demos/checkStrength.tsx b/packages/core/client/src/schema-component/antd/password/demos/new-demos/checkStrength.tsx
new file mode 100644
index 0000000000..3757d92359
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/password/demos/new-demos/checkStrength.tsx
@@ -0,0 +1,23 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Password',
+        'x-component-props': {
+          checkStrength: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/password/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/password/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..dca55f4eba
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/password/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        default: '123',
+        'x-decorator': 'FormItem',
+        'x-component': 'Password',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/password/index.md b/packages/core/client/src/schema-component/antd/password/index.md
index 333dec45ba..fa4313480a 100644
--- a/packages/core/client/src/schema-component/antd/password/index.md
+++ b/packages/core/client/src/schema-component/antd/password/index.md
@@ -1,23 +1,27 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Password
 
-## Examples
+密码输入框。更多属性请参考 [antd 文档](https://ant.design/components/input#components-input-demo-password-input)
 
-### Password
+```ts
+interface PasswordProps extends AntdPasswordProps {
+  checkStrength?: boolean;
+}
+```
 
-<code src="./demos/demo1.tsx"></code>
+## Basic Usage
 
-### Check strength
+<code src="./demos/new-demos/basic.tsx"></code>
 
-<code src="./demos/demo2.tsx"></code>
+## Check strength
 
-## API
+<code src="./demos/new-demos/checkStrength.tsx"></code>
 
-基于 antd 的 Password，新增的属性：
+## Read Pretty
 
-- `checkStrength` 检测密码强度
+```ts
+interface PasswordReadPrettyProps  {
+  value?: string;
+}
+```
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/percent/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/percent/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..a3ce192732
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/percent/demos/new-demos/basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'number',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Percent',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/percent/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/percent/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..e8673bf421
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/percent/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'number',
+        title: 'Test',
+        default: 1.23,
+        'x-decorator': 'FormItem',
+        'x-component': 'Percent',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/percent/index.md b/packages/core/client/src/schema-component/antd/percent/index.md
index dca719487a..f817a25ca9 100644
--- a/packages/core/client/src/schema-component/antd/percent/index.md
+++ b/packages/core/client/src/schema-component/antd/percent/index.md
@@ -1,12 +1,21 @@
----
-group:
-  title: Schema Components
----
+
 
 # Percent
 
-## Examples
+百分比输入框。更多属性请参考 [InputNumber](https://ant.design/components/input-number/)。
 
-### Percent
+## Basic Usage
 
-<code src="./demos/percent.tsx"></code>
+```ts
+type PercentProps = AntdInputNumberProps;
+```
+
+<code src="./demos/new-demos/basic.tsx"></code>
+
+## Read Pretty
+
+```ts
+interface PercentReadPrettyProps extends InputNumberReadPrettyProps {}
+```
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/preview/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/preview/demos/demo1.tsx
index 0dd1052221..18ae06f67a 100644
--- a/packages/core/client/src/schema-component/antd/preview/demos/demo1.tsx
+++ b/packages/core/client/src/schema-component/antd/preview/demos/demo1.tsx
@@ -13,7 +13,7 @@
 import { FormItem } from '@formily/antd-v5';
 import { SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 import React from 'react';
-import Preview from '../Preview';
+import { Preview } from '@nocobase/client';
 
 const defaultValue = [
   {
diff --git a/packages/core/client/src/schema-component/antd/preview/index.md b/packages/core/client/src/schema-component/antd/preview/index.md
index 981e1a5e70..f32d28b4cb 100644
--- a/packages/core/client/src/schema-component/antd/preview/index.md
+++ b/packages/core/client/src/schema-component/antd/preview/index.md
@@ -1,13 +1,14 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Preview
 
-## Examples
+用于预览上传的文件。
 
-### Preview
+```ts
+type UploadProps = Omit<AntdUploadProps, 'onChange'> & {
+  onChange?: (fileList: UploadFile[]) => void;
+  serviceErrorMessage?: string;
+  value?: any;
+  size?: string;
+}
+```
 
 <code src="./demos/demo1.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx b/packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx
index ce639bbe6f..b48491dff3 100644
--- a/packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx
+++ b/packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx
@@ -15,9 +15,15 @@ import React, { useMemo, useRef } from 'react';
 import { useCollectionManager_deprecated } from '../../../collection-manager';
 import { StablePopover } from '../popover';
 import { FormItem } from '../form-item';
+import { IFormItemProps } from '@formily/antd-v5';
+import { useCollection } from '../../../data-source/collection/CollectionProvider';
+
+export interface QuickEditProps extends IFormItemProps {
+  children?: React.ReactNode;
+}
 
 export const Editable = observer(
-  (props) => {
+  (props: QuickEditProps) => {
     const field: any = useField();
     const containerRef = useRef(null);
     const fieldSchema = useFieldSchema();
@@ -81,11 +87,13 @@ export const Editable = observer(
 );
 
 export const QuickEdit = observer(
-  (props) => {
+  (props: QuickEditProps) => {
     const field = useField<Field>();
     const { getCollectionJoinField } = useCollectionManager_deprecated();
+    const collection = useCollection();
     const fieldSchema = useFieldSchema();
-    const collectionField = getCollectionJoinField(fieldSchema['x-collection-field']);
+    const collectionField =
+      getCollectionJoinField(fieldSchema['x-collection-field']) || collection?.getField(fieldSchema.name);
     if (!collectionField) {
       return null;
     }
diff --git a/packages/core/client/src/schema-component/antd/quick-edit/__tests__/QuickEdit.test.tsx b/packages/core/client/src/schema-component/antd/quick-edit/__tests__/QuickEdit.test.tsx
index 42201d187b..f412b3bd7a 100644
--- a/packages/core/client/src/schema-component/antd/quick-edit/__tests__/QuickEdit.test.tsx
+++ b/packages/core/client/src/schema-component/antd/quick-edit/__tests__/QuickEdit.test.tsx
@@ -8,7 +8,7 @@
  */
 
 import { BlockSchemaComponentPlugin } from '@nocobase/client';
-import { screen, renderApp, sleep, renderReadPrettyApp, userEvent, waitFor } from '@nocobase/test/client';
+import { screen, renderApp, sleep, userEvent, waitFor } from '@nocobase/test/client';
 
 describe('QuickEdit', () => {
   function getRenderOptions(readPretty = false) {
diff --git a/packages/core/client/src/schema-component/antd/quick-edit/demos/basic.tsx b/packages/core/client/src/schema-component/antd/quick-edit/demos/basic.tsx
new file mode 100644
index 0000000000..ff3e15cbd4
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/quick-edit/demos/basic.tsx
@@ -0,0 +1,39 @@
+import { BlockSchemaComponentPlugin } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  designable: true,
+  enableUserListDataBlock: true,
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormBlockProvider',
+    'x-use-decorator-props': 'useCreateFormBlockDecoratorProps',
+    'x-decorator-props': {
+      collection: 'users',
+    },
+    'x-component': 'FormV2',
+    'x-use-component-props': 'useCreateFormBlockProps',
+    properties: {
+      nickname: {
+        default: 'aaa',
+        'x-collection-field': 'roles.long-text',
+        'x-component': 'CollectionField',
+        'x-component-props': {
+          ellipsis: true,
+        },
+        'x-decorator': 'QuickEdit',
+        'x-decorator-props': {
+          labelStyle: {
+            display: 'none',
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    plugins: [BlockSchemaComponentPlugin],
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/quick-edit/demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/quick-edit/demos/read-pretty.tsx
new file mode 100644
index 0000000000..215982b477
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/quick-edit/demos/read-pretty.tsx
@@ -0,0 +1,36 @@
+import { BlockSchemaComponentPlugin } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  designable: true,
+  enableUserListDataBlock: true,
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormBlockProvider',
+    'x-use-decorator-props': 'useCreateFormBlockDecoratorProps',
+    'x-decorator-props': {
+      collection: 'users',
+    },
+    'x-component': 'FormV2',
+    'x-use-component-props': 'useCreateFormBlockProps',
+    properties: {
+      nickname: {
+        default: 'aaa',
+        'x-pattern': 'readPretty',
+        'x-component': 'CollectionField',
+        'x-decorator': 'QuickEdit',
+        'x-decorator-props': {
+          labelStyle: {
+            display: 'none',
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    plugins: [BlockSchemaComponentPlugin],
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/quick-edit/demos/subtable.tsx b/packages/core/client/src/schema-component/antd/quick-edit/demos/subtable.tsx
new file mode 100644
index 0000000000..5ff5c422e5
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/quick-edit/demos/subtable.tsx
@@ -0,0 +1,76 @@
+import { BlockSchemaComponentPlugin } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  designable: true,
+  enableUserListDataBlock: true,
+  schema: {
+    type: 'void',
+    'x-decorator': 'FormBlockProvider',
+    'x-use-decorator-props': 'useCreateFormBlockDecoratorProps',
+    'x-decorator-props': {
+      dataSource: 'main',
+      collection: 'users',
+    },
+    'x-component': 'div',
+    properties: {
+      '45i9guirvtz': {
+        type: 'void',
+        'x-component': 'FormV2',
+        'x-use-component-props': 'useCreateFormBlockProps',
+        properties: {
+          roles: {
+            type: 'string',
+            'x-component': 'CollectionField',
+            'x-decorator': 'FormItem',
+            'x-collection-field': 'users.roles',
+            'x-component-props': {
+              fieldNames: {
+                label: 'name',
+                value: 'name',
+              },
+              addMode: 'modalAdd',
+              mode: 'SubTable',
+            },
+            default: null,
+            properties: {
+              e2l1f5wo2st: {
+                type: 'void',
+                'x-component': 'AssociationField.SubTable',
+                properties: {
+                  '9x9jysv3hka': {
+                    type: 'void',
+                    'x-decorator': 'TableV2.Column.Decorator',
+                    'x-component': 'TableV2.Column',
+                    properties: {
+                      'long-text': {
+                        default: 'aaa',
+                        'x-collection-field': 'roles.long-text',
+                        'x-component': 'CollectionField',
+                        'x-component-props': {
+                          ellipsis: true,
+                        },
+                        'x-decorator': 'QuickEdit',
+                        'x-decorator-props': {
+                          labelStyle: {
+                            display: 'none',
+                          },
+                        },
+                        'x-disabled': false,
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    plugins: [BlockSchemaComponentPlugin],
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/quick-edit/index.md b/packages/core/client/src/schema-component/antd/quick-edit/index.md
new file mode 100644
index 0000000000..249cd45f7a
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/quick-edit/index.md
@@ -0,0 +1,27 @@
+# QuickEdit
+
+快速编辑器组件，用于快速编辑数据，可用在 Table cell 中。
+
+```ts
+import { IFormItemProps } from '@formily/antd-v5';
+
+interface QuickEditProps extends IFormItemProps {
+  children?: React.ReactNode;
+}
+```
+
+## Basic
+
+<code src="./demos/basic.tsx"></code>
+
+## Read Pretty
+
+` 'x-pattern': 'readPretty'` 下，只显示文本，点击时不会显示编辑器。
+
+<code src="./demos/read-pretty.tsx"></code>
+
+## SubTable
+
+在 `SubTable` 中使用。
+
+<code src="./demos/subtable.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-basic.tsx b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-basic.tsx
new file mode 100644
index 0000000000..0fc9463db4
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-basic.tsx
@@ -0,0 +1,32 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    label: '男',
+    value: 1,
+  },
+  {
+    label: '女',
+    value: 2,
+  },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'number',
+        title: 'Test',
+        enum: options,
+        'x-decorator': 'FormItem',
+        'x-component': 'Radio.Group',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty-color.tsx b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty-color.tsx
new file mode 100644
index 0000000000..d9a792fd59
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty-color.tsx
@@ -0,0 +1,35 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    label: '男',
+    value: 1,
+    color: 'blue',
+  },
+  {
+    label: '女',
+    value: 2,
+    color: 'red',
+  },
+];
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'number',
+        default: 2,
+        title: 'Test',
+        enum: options,
+        'x-decorator': 'FormItem',
+        'x-component': 'Radio.Group',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty.tsx b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty.tsx
new file mode 100644
index 0000000000..00a2124823
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty.tsx
@@ -0,0 +1,34 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    label: '男',
+    value: 1,
+  },
+  {
+    label: '女',
+    value: 2,
+  },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'number',
+        title: 'Test',
+        enum: options,
+        default: 1,
+        'x-decorator': 'FormItem',
+        'x-component': 'Radio.Group',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-basic.tsx b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-basic.tsx
new file mode 100644
index 0000000000..c6ed8d199f
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Radio',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-read-pretty.tsx b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-read-pretty.tsx
new file mode 100644
index 0000000000..9acb010ec0
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-read-pretty.tsx
@@ -0,0 +1,29 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test1: {
+        type: 'boolean',
+        title: 'Test1',
+        default: true,
+        'x-decorator': 'FormItem',
+        'x-component': 'Radio',
+      },
+      test2: {
+        type: 'boolean',
+        title: 'Test2',
+        default: false,
+        'x-decorator': 'FormItem',
+        'x-component': 'Radio',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/radio/index.md b/packages/core/client/src/schema-component/antd/radio/index.md
index 599a62d901..f3f5594148 100644
--- a/packages/core/client/src/schema-component/antd/radio/index.md
+++ b/packages/core/client/src/schema-component/antd/radio/index.md
@@ -1,21 +1,41 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Radio
 
-## Examples
+单选框。其基于 `antd` 的 [Radio](https://ant.design/components/radio/) 组件进行封装。
 
-### Basic
+## Radio
 
-<code src="./demos/demo1.tsx"></code>
+### Basic Usage
 
-### Radio Group
+```ts
+type RadioProps = AntdRadioProps;
+```
 
-<code src="./demos/demo2.tsx"></code>
+<code src="./demos/new-demos/radio-basic.tsx"></code>
 
-### Radio Group with color
+### Read Pretty
 
-<code src="./demos/demo3.tsx"></code>
+```ts
+interface RadioReadPrettyProps  {
+  value?: boolean;
+}
+```
+
+<code src="./demos/new-demos/radio-read-pretty.tsx"></code>
+
+## Radio Group
+
+```ts
+type RadioGroupProps = AntdRadioGroupProps;
+```
+
+### Basic Usage
+
+<code src="./demos/new-demos/group-basic.tsx"></code>
+
+### Read Pretty
+
+<code src="./demos/new-demos/group-read-pretty.tsx"></code>
+
+### Read Pretty with color
+
+<code src="./demos/new-demos/group-read-pretty-color.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/record-picker/index.md b/packages/core/client/src/schema-component/antd/record-picker/index.md
index 796bee0dbe..a147532aa9 100644
--- a/packages/core/client/src/schema-component/antd/record-picker/index.md
+++ b/packages/core/client/src/schema-component/antd/record-picker/index.md
@@ -1,11 +1,7 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # RecordPicker
 
+用于关联字段的选择。
+
 ## JSON Schema
 
 ### Examples
@@ -35,7 +31,7 @@ group:
 ```ts
 {
   type: 'array',
-  'x-read-pretty': true,
+  'x-pattern': 'readPretty',
   'x-component': 'RecordPicker',
   properties: {
     item: {
diff --git a/packages/core/client/src/schema-component/antd/remote-select/ReadPretty.tsx b/packages/core/client/src/schema-component/antd/remote-select/ReadPretty.tsx
index ee141fa24c..029de4b35e 100644
--- a/packages/core/client/src/schema-component/antd/remote-select/ReadPretty.tsx
+++ b/packages/core/client/src/schema-component/antd/remote-select/ReadPretty.tsx
@@ -9,11 +9,18 @@
 
 import { observer, useField, useFieldSchema } from '@formily/react';
 import React from 'react';
-import { useRequest } from '../../../api-client';
+import { ResourceActionOptions, useRequest } from '../../../api-client';
 import { useRecord } from '../../../record-provider';
 import { useActionContext } from '../action';
 import { Select, defaultFieldNames } from '../select';
 import { getValues } from './shared';
+import { SelectProps } from 'antd';
+import { SelectReadPrettyProps } from '../select/ReadPretty';
+
+export interface RemoteSelectReadPrettyProps extends SelectReadPrettyProps {
+  fieldNames?: SelectProps['fieldNames'];
+  service: ResourceActionOptions;
+}
 
 export const ReadPretty = observer(
   (props: any) => {
diff --git a/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx b/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx
index 0ac49ca95b..baacd15c7c 100644
--- a/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx
+++ b/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx
@@ -9,7 +9,7 @@
 
 import { LoadingOutlined } from '@ant-design/icons';
 import { connect, mapProps, mapReadPretty, useFieldSchema } from '@formily/react';
-import { Divider, SelectProps, Tag } from 'antd';
+import { Divider, Tag } from 'antd';
 import dayjs from 'dayjs';
 import { uniqBy } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -17,21 +17,30 @@ import { ResourceActionOptions, useRequest } from '../../../api-client';
 import { useCollection_deprecated, useCollectionManager_deprecated } from '../../../collection-manager';
 import { mergeFilter } from '../../../filter-provider/utils';
 import { useCompile } from '../../hooks';
-import { Select, defaultFieldNames } from '../select';
+import { FieldNames, Select, SelectProps, defaultFieldNames } from '../select';
 import { ReadPretty } from './ReadPretty';
 import { useDataSourceHeaders } from '../../../data-source/utils';
 import { useDataSourceKey } from '../../../data-source/data-source/DataSourceProvider';
 const EMPTY = 'N/A';
 
 export type RemoteSelectProps<P = any> = SelectProps<P, any> & {
-  objectValue?: boolean;
   onChange?: (v: any) => void;
-  target: string;
+  /**
+   * useRequest() `debounceWait` parameter
+   */
   wait?: number;
+  /**
+   * useRequest() `manual` parameter
+   * @default true
+   */
   manual?: boolean;
-  mapOptions?: (data: any) => RemoteSelectProps['fieldNames'];
   targetField?: any;
+  /**
+   * useRequest() `service` parameter
+   */
   service: ResourceActionOptions<P>;
+  target: string;
+  mapOptions?: (data: any) => SelectProps['fieldNames'];
   dataSource?: string;
   CustomDropdownRender?: (v: any) => any;
   optionFilter?: (option: any) => boolean;
@@ -40,7 +49,7 @@ export type RemoteSelectProps<P = any> = SelectProps<P, any> & {
 const InternalRemoteSelect = connect(
   (props: RemoteSelectProps) => {
     const {
-      fieldNames = {},
+      fieldNames = {} as FieldNames,
       service = {},
       wait = 300,
       value,
diff --git a/packages/core/client/src/schema-component/antd/remote-select/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/remote-select/demos/demo1.tsx
index 854587510a..f0ffcae1a9 100644
--- a/packages/core/client/src/schema-component/antd/remote-select/demos/demo1.tsx
+++ b/packages/core/client/src/schema-component/antd/remote-select/demos/demo1.tsx
@@ -32,7 +32,6 @@ mockRequest.onGet('/posts:list').reply(async () => {
   ];
 });
 
-// 写一个简单的 schema
 const schema = {
   type: 'object',
   properties: {
diff --git a/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..7ec0210bf3
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/basic.tsx
@@ -0,0 +1,45 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'RemoteSelect',
+        'x-component-props': {
+          fieldNames: {
+            label: 'title',
+            value: 'id',
+          },
+          service: {
+            resource: 'posts',
+            action: 'list',
+          },
+        },
+      },
+    },
+  },
+  apis: {
+    'posts:list': {
+      data: [
+        {
+          id: 1,
+          title: 'title1',
+        },
+        {
+          id: 2,
+          title: 'title2',
+        },
+      ],
+    },
+  },
+  delayResponse: 300,
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/manual.tsx b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/manual.tsx
new file mode 100644
index 0000000000..7f7c9ccf47
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/manual.tsx
@@ -0,0 +1,46 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'RemoteSelect',
+        'x-component-props': {
+          fieldNames: {
+            label: 'title',
+            value: 'id',
+          },
+          service: {
+            resource: 'posts',
+            action: 'list',
+          },
+          manual: false,
+        },
+      },
+    },
+  },
+  apis: {
+    'posts:list': {
+      data: [
+        {
+          id: 1,
+          title: 'title1',
+        },
+        {
+          id: 2,
+          title: 'title2',
+        },
+      ],
+    },
+  },
+  delayResponse: 300,
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/multiple.tsx b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/multiple.tsx
new file mode 100644
index 0000000000..3c1a20757a
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/multiple.tsx
@@ -0,0 +1,46 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'RemoteSelect',
+        'x-component-props': {
+          fieldNames: {
+            label: 'title',
+            value: 'id',
+          },
+          service: {
+            resource: 'posts',
+            action: 'list',
+          },
+          multiple: true,
+        },
+      },
+    },
+  },
+  apis: {
+    'posts:list': {
+      data: [
+        {
+          id: 1,
+          title: 'title1',
+        },
+        {
+          id: 2,
+          title: 'title2',
+        },
+      ],
+    },
+  },
+  delayResponse: 300,
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..c794a823ee
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,47 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        default: 1,
+        'x-decorator': 'FormItem',
+        'x-component': 'RemoteSelect',
+        'x-component-props': {
+          fieldNames: {
+            label: 'title',
+            value: 'id',
+          },
+          service: {
+            resource: 'posts',
+            action: 'list',
+          },
+        },
+      },
+    },
+  },
+  apis: {
+    'posts:list': {
+      data: [
+        {
+          id: 1,
+          title: 'title1',
+        },
+        {
+          id: 2,
+          title: 'title2',
+        },
+      ],
+    },
+  },
+  delayResponse: 300,
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/remote-select/index.md b/packages/core/client/src/schema-component/antd/remote-select/index.md
index 2388d62076..f898be4023 100644
--- a/packages/core/client/src/schema-component/antd/remote-select/index.md
+++ b/packages/core/client/src/schema-component/antd/remote-select/index.md
@@ -1,28 +1,50 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # RemoteSelect
 
-## Examples
-
-<code src="./demos/demo1.tsx"></code>
-
-## API
-
-基于 Ant Design 的 [Select](https://ant.design/components/select/#API)，相关扩展属性有：
-
-- `objectValue` 值为 object 类型
-- `fieldNames` 默认值有区别
+请求远程数据的 Select 组件。其基于 [Select](/components/select) 组件和 [useRequest()](/core/request)。
 
 ```ts
-export const defaultFieldNames = {
-  label: 'label',
-  value: 'value',
-  color: 'color',
-  options: 'children',
+type RemoteSelectProps<P = any> = SelectProps<P, any> & {
+  onChange?: (v: any) => void;
+  /**
+   * useRequest() 的 debounceWait 参数
+   */
+  wait?: number;
+  /**
+   * useRequest() 的 manual 参数
+   */
+  manual?: boolean;
+  targetField?: any;
+  /**
+   * useRequest() 的 service 参数
+   */
+  service: ResourceActionOptions<P>;
+  target: string;
+  mapOptions?: (data: any) => RemoteSelectProps['fieldNames'];
+  dataSource?: string;
+  CustomDropdownRender?: (v: any) => any;
+  optionFilter?: (option: any) => boolean;
 };
 ```
 
+## Basic usage
+
+<code src="./demos/new-demos/basic.tsx"></code>
+
+## Manual false
+
+<code src="./demos/new-demos/manual.tsx"></code>
+
+## Multiple
+
+<code src="./demos/new-demos/multiple.tsx"></code>
+
+## Read Pretty
+
+```ts
+interface RemoteSelectReadPrettyProps extends SelectReadPrettyProps {
+  fieldNames?: SelectProps['fieldNames'];
+  service: ResourceActionOptions;
+}
+```
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..e0a9a0f843
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'number',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'RichText',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..ad5c8240ab
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,23 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'number',
+        default:
+          '<p>Hello <a href="https://www.nocobase.com" rel="noopener noreferrer" target="_blank">NocoBase</a></p>',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'RichText',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/rich-text/index.md b/packages/core/client/src/schema-component/antd/rich-text/index.md
index 462e144a9f..2cdb21270b 100644
--- a/packages/core/client/src/schema-component/antd/rich-text/index.md
+++ b/packages/core/client/src/schema-component/antd/rich-text/index.md
@@ -1,11 +1,23 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Rich Text
 
-## Examples
+富文本编辑器。其基于 [react-quill](https://github.com/zenoamaro/react-quill) 封装。
 
-<code src="./demos/demo1.tsx"></code>
+## Basic Usage
+
+```ts
+interface RichTextProps {
+  value?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+}
+```
+
+<code src="./demos/new-demos/basic.tsx"></code>
+
+## Read Pretty
+
+```ts
+type RichTextReadPrettyProps = HtmlReadPrettyProps;
+```
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/select/ReadPretty.tsx b/packages/core/client/src/schema-component/antd/select/ReadPretty.tsx
index dfe5a6b9d4..28b5b45a8d 100644
--- a/packages/core/client/src/schema-component/antd/select/ReadPretty.tsx
+++ b/packages/core/client/src/schema-component/antd/select/ReadPretty.tsx
@@ -13,11 +13,22 @@ import { isValid } from '@formily/shared';
 import { Tag } from 'antd';
 import React from 'react';
 import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip';
-import { defaultFieldNames, getCurrentOptions } from './utils';
+import { FieldNames, defaultFieldNames, getCurrentOptions } from './utils';
 import { useCollectionField } from '../../../data-source/collection-field/CollectionFieldProvider';
 
+export interface SelectReadPrettyProps {
+  value: any;
+  options?: any[];
+  ellipsis?: boolean;
+  /**
+   * format options
+   * @default { label: 'label', value: 'value', color: 'color', children: 'children' }
+   */
+  fieldNames?: FieldNames;
+}
+
 export const ReadPretty = observer(
-  (props: any) => {
+  (props: SelectReadPrettyProps) => {
     const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
     const field = useField<any>();
 
diff --git a/packages/core/client/src/schema-component/antd/select/Select.tsx b/packages/core/client/src/schema-component/antd/select/Select.tsx
index 796a75dbdc..81f954c42d 100644
--- a/packages/core/client/src/schema-component/antd/select/Select.tsx
+++ b/packages/core/client/src/schema-component/antd/select/Select.tsx
@@ -11,23 +11,34 @@ import { CloseCircleFilled, CloseOutlined, LoadingOutlined } from '@ant-design/i
 import { connect, mapProps, mapReadPretty } from '@formily/react';
 import { isValid, toArr } from '@formily/shared';
 import { isPlainObject } from '@nocobase/utils/client';
-import type { SelectProps } from 'antd';
+import type { SelectProps as AntdSelectProps } from 'antd';
 import { Select as AntdSelect, Empty, Spin, Tag } from 'antd';
 import React from 'react';
 import { ReadPretty } from './ReadPretty';
 import { FieldNames, defaultFieldNames, getCurrentOptions } from './utils';
+import { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 
-type Props = SelectProps<any, any> & {
+export type SelectProps<
+  ValueType = any,
+  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+> = AntdSelectProps<ValueType, OptionType> & {
+  /**
+   * Whether it is an object value
+   */
   objectValue?: boolean;
   onChange?: (v: any) => void;
   multiple: boolean;
   rawOptions: any[];
-  fieldNames: FieldNames;
+  /**
+   * format options
+   * @default { label: 'label', value: 'value', color: 'color', options: 'children' }
+   */
+  fieldNames?: FieldNames;
 };
 
 const isEmptyObject = (val: any) => !isValid(val) || (typeof val === 'object' && Object.keys(val).length === 0);
 
-const ObjectSelect = (props: Props) => {
+const ObjectSelect = (props: SelectProps) => {
   const { value, options, onChange, fieldNames, mode, loading, rawOptions, defaultValue, ...others } = props;
   const toValue = (v: any) => {
     if (isEmptyObject(v)) {
@@ -106,7 +117,7 @@ const ObjectSelect = (props: Props) => {
 const filterOption = (input, option) => (option?.label ?? '').toLowerCase().includes((input || '').toLowerCase());
 
 const InternalSelect = connect(
-  (props: Props) => {
+  (props: SelectProps) => {
     const { objectValue, loading, value, rawOptions, defaultValue, ...others } = props;
     let mode: any = props.multiple ? 'multiple' : props.mode;
     if (mode && !['multiple', 'tags'].includes(mode)) {
diff --git a/packages/core/client/src/schema-component/antd/select/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/select/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..26dc95e345
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/select/demos/new-demos/basic.tsx
@@ -0,0 +1,34 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    label: '福建',
+    value: 'FuJian',
+    children: [
+      { label: '{{t("福州")}}', value: 'FZ' },
+      { label: '莆田', value: 'PT' },
+    ],
+  },
+  { label: '江苏', value: 'XZ' },
+  { label: '浙江', value: 'ZX' },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        enum: options,
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/select/demos/new-demos/fieldNames.tsx b/packages/core/client/src/schema-component/antd/select/demos/new-demos/fieldNames.tsx
new file mode 100644
index 0000000000..5c7f129f64
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/select/demos/new-demos/fieldNames.tsx
@@ -0,0 +1,41 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    name: '福建',
+    id: 'FuJian',
+    children: [
+      { name: '{{t("福州")}}', id: 'FZ' },
+      { name: '莆田', id: 'PT' },
+    ],
+  },
+  { name: '江苏', id: 'XZ' },
+  { name: '浙江', id: 'ZX' },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        enum: options,
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        'x-component-props': {
+          fieldNames: {
+            label: 'name',
+            value: 'id',
+            children: 'children',
+          },
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/select/demos/new-demos/multiple.tsx b/packages/core/client/src/schema-component/antd/select/demos/new-demos/multiple.tsx
new file mode 100644
index 0000000000..5cfdaf2c12
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/select/demos/new-demos/multiple.tsx
@@ -0,0 +1,37 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    label: '福建',
+    value: 'FuJian',
+    children: [
+      { label: '{{t("福州")}}', value: 'FZ' },
+      { label: '莆田', value: 'PT' },
+    ],
+  },
+  { label: '江苏', value: 'XZ' },
+  { label: '浙江', value: 'ZX' },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        enum: options,
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        'x-component-props': {
+          mode: 'multiple',
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/select/demos/new-demos/object-value.tsx b/packages/core/client/src/schema-component/antd/select/demos/new-demos/object-value.tsx
new file mode 100644
index 0000000000..d04c147378
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/select/demos/new-demos/object-value.tsx
@@ -0,0 +1,37 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    label: '福建',
+    value: 'FuJian',
+    children: [
+      { label: '{{t("福州")}}', value: 'FZ' },
+      { label: '莆田', value: 'PT' },
+    ],
+  },
+  { label: '江苏', value: 'XZ' },
+  { label: '浙江', value: 'ZX' },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        enum: options,
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        'x-component-props': {
+          objectValue: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/select/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/select/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..83ace062af
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/select/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,86 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const options = [
+  {
+    label: '福建',
+    value: 'FuJian',
+    children: [
+      { label: '{{t("福州")}}', value: 'FZ' },
+      { label: '莆田', value: 'PT' },
+    ],
+  },
+  { label: '江苏', value: 'XZ' },
+  { label: '浙江', value: 'ZX' },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test1: {
+        type: 'string',
+        title: 'Test',
+        enum: options,
+        default: 'XZ',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+      },
+      test4: {
+        type: 'string',
+        title: 'Test(fieldNames)',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        default: 'XZ',
+        enum: [
+          {
+            name: '福建',
+            id: 'FuJian',
+            children: [
+              { name: '{{t("福州")}}', id: 'FZ' },
+              { name: '莆田', id: 'PT' },
+            ],
+          },
+          { name: '江苏', id: 'XZ' },
+          { name: '浙江', id: 'ZX' },
+        ],
+        'x-component-props': {
+          fieldNames: {
+            label: 'name',
+            value: 'id',
+            children: 'children',
+          },
+        },
+      },
+      test2: {
+        type: 'string',
+        title: 'Test(multiple)',
+        default: ['XZ', 'ZX'],
+        enum: options,
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+      },
+      test3: {
+        type: 'string',
+        title: 'Test(ellipsis)',
+        default: ['XZ', 'ZX', 'FuJian', 'FZ'],
+        enum: options,
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        'x-decorator-props': {
+          style: {
+            width: 130,
+          },
+        },
+        'x-component-props': {
+          ellipsis: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/select/index.md b/packages/core/client/src/schema-component/antd/select/index.md
index 3bbba826d6..9271e4bceb 100644
--- a/packages/core/client/src/schema-component/antd/select/index.md
+++ b/packages/core/client/src/schema-component/antd/select/index.md
@@ -1,37 +1,57 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Select
 
-## Examples
-
-### 单选
-
-<code src="./demos/demo1.tsx"></code>
-
-### 多选
-
-<code src="./demos/demo2.tsx"></code>
-
-### 值为 Object 类型的 Select
-
-<code src="./demos/demo3.tsx"></code>
-
-## API
-
-基于 Ant Design 的 [Select](https://ant.design/components/select/#API)，相关扩展属性有：
-
-- `objectValue` 值为 object 类型
-- `fieldNames` 默认值有区别
+选择器。其基于 Ant Design 的 [Select](https://ant.design/components/select-cn/) 组件进行封装。
 
 ```ts
-export const defaultFieldNames = {
-  label: 'label',
-  value: 'value',
-  color: 'color',
-  options: 'children',
+interface FieldNames {
+  label?: string;
+  value?: string;
+  color?: string;
+  options?: string;
+}
+
+type SelectProps = AntdSelectProps<any, any> & {
+  /**
+   * Whether it is an object value
+   */
+  objectValue?: boolean;
+  /**
+   * format options
+   * @default { label: 'label', value: 'value', color: 'color', options: 'children' }
+   */
+  fieldNames: FieldNames;
 };
 ```
+
+## Basic Usage
+
+<code src="./demos/new-demos/basic.tsx"></code>
+
+## Multiple
+
+<code src="./demos/new-demos/multiple.tsx"></code>
+
+## ObjectValue
+
+<code src="./demos/new-demos/object-value.tsx"></code>
+
+## fieldNames
+
+<code src="./demos/new-demos/fieldNames.tsx"></code>
+
+## Read Pretty
+
+```ts
+interface SelectReadPrettyProps {
+  value: any;
+  options?: any[];
+  ellipsis?: boolean;
+  /**
+   * format options
+   * @default { label: 'label', value: 'value', color: 'color', options: 'children' }
+   */
+  fieldNames?: FieldNames;
+}
+```
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/select/utils.ts b/packages/core/client/src/schema-component/antd/select/utils.ts
index 1c19786644..44c8ecc541 100644
--- a/packages/core/client/src/schema-component/antd/select/utils.ts
+++ b/packages/core/client/src/schema-component/antd/select/utils.ts
@@ -11,10 +11,10 @@ import { isPlainObject } from '@nocobase/utils/client';
 import { castArray } from 'lodash';
 
 export interface FieldNames {
-  label: string;
-  value: string;
-  color: string;
-  options: string;
+  label?: string;
+  value?: string;
+  color?: string;
+  options?: string;
 }
 
 export const defaultFieldNames: FieldNames = {
diff --git a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
index bbaeb1fdd4..8c511df0d8 100644
--- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
@@ -79,7 +79,7 @@ const useTableColumns = (props: { showDel?: boolean; isSubTable?: boolean }) =>
     return buf;
   }, []);
 
-  const hasChangedColumns = useColumnsDeepMemoized(columnsSchema);
+  // const hasChangedColumns = useColumnsDeepMemoized(columnsSchema);
 
   const schemaToolbarBigger = useMemo(() => {
     return css`
diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/action-toolbar.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/action-toolbar.tsx
new file mode 100644
index 0000000000..ada9b8ac4b
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/action-toolbar.tsx
@@ -0,0 +1,150 @@
+import {
+  ActionProps,
+  TableBlockProvider,
+  useBulkDestroyActionProps,
+  useDataBlockRequest,
+  useFilterActionProps,
+  useRefreshActionProps,
+  useTableBlockProps,
+} from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-decorator': 'TableBlockProvider',
+        'x-decorator-props': {
+          collection: 'roles',
+          action: 'list',
+          params: {
+            pageSize: 2,
+          },
+          showIndex: true,
+          dragSort: false,
+        },
+        properties: {
+          // 添加按钮
+          actions: {
+            type: 'void',
+            'x-component': 'ActionBar',
+            'x-component-props': {
+              style: {
+                marginBottom: 20,
+              },
+            },
+            properties: {
+              filter: {
+                'x-component': 'Filter.Action',
+                'x-use-component-props': 'useFilterActionProps',
+                'x-component-props': {
+                  icon: 'FilterOutlined',
+                },
+                'x-align': 'left',
+              },
+              refresh: {
+                title: 'Refresh',
+                'x-component': 'Action',
+                'x-align': 'left',
+                'x-use-component-props': 'useRefreshActionProps',
+              },
+              add: {
+                type: 'void',
+                'x-component': 'Action',
+                title: 'Add New',
+                'x-align': 'right',
+                'x-component-props': {
+                  type: 'primary',
+                },
+                properties: {
+                  drawer: {
+                    type: 'void',
+                    'x-component': 'Action.Drawer',
+                    title: 'Drawer Title',
+                    properties: {
+                      tip: {
+                        type: 'void',
+                        'x-component': 'Markdown.Void',
+                        'x-editable': false,
+                        'x-component-props': {
+                          content: '请查看 [Action.Drawer](/components/action) 组件的文档',
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+              bucketDelete: {
+                title: 'Delete',
+                'x-action': 'destroy',
+                'x-component': 'Action',
+                'x-use-component-props': 'useBulkDestroyActionProps',
+                'x-component-props': {
+                  icon: 'DeleteOutlined',
+                  confirm: {
+                    title: "{{t('Delete record')}}",
+                    content: "{{t('Are you sure you want to delete it?')}}",
+                  },
+                },
+              },
+            },
+          },
+          table: {
+            type: 'array',
+            'x-component': 'TableV2',
+            'x-use-component-props': 'useTableBlockProps',
+            'x-component-props': {
+              rowKey: 'id',
+              rowSelection: {
+                type: 'checkbox',
+              },
+            },
+            properties: {
+              column1: {
+                type: 'void',
+                title: 'Username',
+                'x-component': 'TableV2.Column',
+                properties: {
+                  name: {
+                    type: 'string',
+                    'x-component': 'CollectionField',
+                    'x-pattern': 'readPretty',
+                  },
+                },
+              },
+              column2: {
+                type: 'void',
+                title: 'Nickname',
+                'x-component': 'TableV2.Column',
+                properties: {
+                  title: {
+                    type: 'string',
+                    'x-component': 'CollectionField',
+                    'x-pattern': 'readPretty',
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    components: {
+      TableBlockProvider,
+    },
+    scopes: {
+      useTableBlockProps,
+      useBulkDestroyActionProps,
+      useRefreshActionProps,
+      useFilterActionProps,
+    },
+  },
+  delayResponse: 500,
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..72decdf66a
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/basic.tsx
@@ -0,0 +1,53 @@
+import { getAppComponent } from '@nocobase/test/web';
+import { ActionProps, useAPIClient } from '@nocobase/client';
+import { useForm } from '@formily/react';
+import { App as AntdApp } from 'antd';
+
+function useMyTableProps() {
+  return {};
+}
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'array', // 这里需要是 array 类型
+        'x-component': 'TableV2',
+        'x-use-component-props': 'useMyTableProps',
+        properties: {
+          usernameColumn: {
+            type: 'void',
+            'x-component': 'TableV2.Column',
+            properties: {
+              username: {
+                type: 'string',
+                'x-component': 'Input',
+                title: 'Username',
+                'x-pattern': 'readPretty', // 这里需要设置为 true
+              },
+            },
+          },
+          nicknameColumn: {
+            type: 'void',
+            'x-component': 'TableV2.Column',
+            nickname: {
+              type: 'string',
+              'x-component': 'Input',
+              title: 'Nickname',
+              'x-pattern': 'readPretty', // 这里需要设置为 true
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    scopes: {
+      useMyTableProps,
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/collection.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/collection.tsx
new file mode 100644
index 0000000000..c944859026
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/collection.tsx
@@ -0,0 +1,73 @@
+import { TableBlockProvider, useTableBlockProps } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-decorator': 'TableBlockProvider',
+        'x-decorator-props': {
+          collection: 'roles', // roles 表
+          action: 'list', // 获取 roles 的列表
+          params: {
+            pageSize: 2,
+          },
+          showIndex: true,
+          dragSort: false,
+        },
+        properties: {
+          table: {
+            type: 'array',
+            'x-component': 'TableV2',
+            'x-use-component-props': 'useTableBlockProps', // 自动注入 Table 所需的 props
+            'x-component-props': {
+              rowKey: 'id',
+              rowSelection: {
+                type: 'checkbox',
+              },
+            },
+            properties: {
+              column1: {
+                type: 'void',
+                title: 'Role UID',
+                'x-component': 'TableV2.Column',
+                properties: {
+                  name: {
+                    type: 'string',
+                    'x-component': 'CollectionField',
+                    'x-pattern': 'readPretty', // 这里要设置为 true
+                  },
+                },
+              },
+              column2: {
+                type: 'void',
+                title: 'Role name',
+                'x-component': 'TableV2.Column',
+                properties: {
+                  title: {
+                    type: 'string',
+                    'x-component': 'CollectionField',
+                    'x-pattern': 'readPretty',
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    components: {
+      TableBlockProvider,
+    },
+    scopes: {
+      useTableBlockProps,
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/extend-collection.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/extend-collection.tsx
new file mode 100644
index 0000000000..09ff90e213
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/extend-collection.tsx
@@ -0,0 +1,159 @@
+import { ExtendCollectionsProvider, TableBlockProvider, useTableBlockProps } from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+
+const bookCollection = {
+  key: 'book',
+  name: 'book',
+  title: 'book',
+  fields: [
+    {
+      key: 'id',
+      name: 'id',
+      type: 'bigInt',
+      interface: 'integer',
+      collectionName: 'book',
+      autoIncrement: true,
+      uiSchema: {
+        type: 'number',
+        title: '{{t("ID")}}',
+        'x-component': 'InputNumber',
+        'x-pattern': 'readPretty',
+      },
+    },
+    {
+      key: 'name',
+      name: 'name',
+      type: 'string',
+      interface: 'input',
+      description: null,
+      collectionName: 'book',
+      uiSchema: {
+        type: 'string',
+        'x-component': 'Input',
+        title: 'name',
+      },
+    },
+    {
+      key: 'rlzyzn3rke7',
+      name: 'price',
+      type: 'double',
+      interface: 'number',
+      description: null,
+      collectionName: 'book',
+      uiSchema: {
+        'x-component-props': {
+          step: '1',
+          stringMode: true,
+        },
+        type: 'number',
+        'x-component': 'InputNumber',
+        title: 'price',
+      },
+    },
+  ],
+  logging: true,
+  autoGenId: true,
+  createdAt: true,
+  createdBy: true,
+  updatedAt: true,
+  updatedBy: true,
+  template: 'general',
+  view: false,
+  schema: 'public',
+  filterTargetKey: 'id',
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-decorator': 'TableBlockProvider',
+        'x-decorator-props': {
+          collection: 'book', // book 表
+          action: 'list', // 获取 book 的列表
+          params: {
+            pageSize: 2,
+          },
+          showIndex: true,
+          dragSort: false,
+        },
+        properties: {
+          table: {
+            type: 'array',
+            'x-component': 'TableV2',
+            'x-use-component-props': 'useTableBlockProps', // 自动注入 Table 所需的 props
+            'x-component-props': {
+              rowKey: 'id',
+              rowSelection: {
+                type: 'checkbox',
+              },
+            },
+            properties: {
+              column1: {
+                type: 'void',
+                title: 'Name',
+                'x-component': 'TableV2.Column',
+                properties: {
+                  name: {
+                    type: 'string',
+                    'x-component': 'CollectionField',
+                    'x-pattern': 'readPretty', // 这里要设置为 true
+                  },
+                },
+              },
+              column2: {
+                type: 'void',
+                title: 'Price',
+                'x-component': 'TableV2.Column',
+                properties: {
+                  price: {
+                    type: 'string',
+                    'x-component': 'CollectionField',
+                    'x-pattern': 'readPretty',
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    components: {
+      TableBlockProvider,
+    },
+    scopes: {
+      useTableBlockProps,
+    },
+    providers: [
+      [ExtendCollectionsProvider, { collections: [bookCollection] }], // 添加 book 数据表
+    ],
+  },
+  apis: {
+    'book:list': {
+      data: [
+        {
+          id: 1,
+          name: 'book1',
+          price: 35,
+        },
+        {
+          id: 2,
+          name: 'book2',
+          price: 28,
+        },
+      ],
+      meta: {
+        count: 1,
+        page: 1,
+        totalPage: 1,
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/record.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/record.tsx
new file mode 100644
index 0000000000..7b0b7efb1f
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/record.tsx
@@ -0,0 +1,272 @@
+import {
+  FormBlockProvider,
+  TableBlockProvider,
+  UseDataBlockProps,
+  useActionContext,
+  useCollectionRecord,
+  useDataBlockRequest,
+  useDataBlockResource,
+  useFormBlockProps,
+  useTableBlockProps,
+} from '@nocobase/client';
+import { getAppComponent } from '@nocobase/test/web';
+import { App as AntdApp } from 'antd';
+import { useForm } from '@formily/react';
+
+const useCloseActionProps = () => {
+  const { setVisible } = useActionContext();
+  return {
+    type: 'default',
+    onClick() {
+      setVisible(false);
+    },
+  };
+};
+
+const useSubmitActionProps = () => {
+  const { setVisible } = useActionContext();
+  const { message } = AntdApp.useApp();
+  const form = useForm();
+
+  const resource = useDataBlockResource();
+  const { run } = useDataBlockRequest();
+  return {
+    type: 'primary',
+    async onClick() {
+      await form.submit();
+      const values = form.values;
+
+      const { data } = await resource.update(values);
+      if (data.data.result === 'ok') {
+        message.success('Submit success');
+        setVisible(false);
+        form.reset();
+
+        // 刷新列表
+        run();
+      }
+    },
+  };
+};
+
+const useFormBlockProviderProps: UseDataBlockProps<'CollectionGet'> = () => {
+  const record = useCollectionRecord<{ id: number }>();
+  return {
+    collection: 'users',
+    action: 'get',
+    filterByTk: record.data.id,
+  };
+};
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    properties: {
+      test: {
+        type: 'void',
+        'x-decorator': 'TableBlockProvider',
+        'x-decorator-props': {
+          collection: 'users',
+          action: 'list',
+          params: {
+            pageSize: 2,
+          },
+          showIndex: true,
+          dragSort: false,
+        },
+        properties: {
+          table: {
+            type: 'array',
+            'x-component': 'TableV2',
+            'x-use-component-props': 'useTableBlockProps',
+            'x-component-props': {
+              rowKey: 'id',
+              rowSelection: {
+                type: 'checkbox',
+              },
+            },
+            properties: {
+              column1: {
+                type: 'void',
+                title: 'Username',
+                'x-component': 'TableV2.Column',
+                properties: {
+                  username: {
+                    type: 'string',
+                    'x-component': 'CollectionField',
+                    'x-pattern': 'readPretty',
+                  },
+                },
+              },
+              column2: {
+                type: 'void',
+                title: 'Nickname',
+                'x-component': 'TableV2.Column',
+                properties: {
+                  nickname: {
+                    type: 'string',
+                    'x-component': 'CollectionField',
+                    'x-pattern': 'readPretty',
+                  },
+                },
+              },
+              column3: {
+                type: 'void',
+                title: 'Actions',
+                'x-decorator': 'TableV2.Column.ActionBar',
+                'x-component': 'TableV2.Column',
+                properties: {
+                  actions: {
+                    type: 'void',
+                    'x-component': 'Space',
+                    'x-component-props': {
+                      split: '|',
+                    },
+                    properties: {
+                      view: {
+                        type: 'void',
+                        title: 'View',
+                        'x-action': 'view',
+                        'x-component': 'Action.Link',
+                        'x-component-props': {
+                          openMode: 'drawer',
+                        },
+                        properties: {
+                          drawer: {
+                            type: 'void',
+                            title: 'View record',
+                            'x-component': 'Action.Drawer',
+                            'x-component-props': {
+                              className: 'nb-action-popup',
+                            },
+                            properties: {
+                              formContext: {
+                                type: 'void',
+                                'x-decorator': 'FormBlockProvider',
+                                'x-use-decorator-props': 'useFormBlockProviderProps',
+                                'x-component': 'CardItem',
+                                properties: {
+                                  form: {
+                                    type: 'void',
+                                    'x-component': 'FormV2',
+                                    'x-pattern': 'readPretty',
+                                    'x-use-component-props': 'useFormBlockProps',
+                                    properties: {
+                                      username: {
+                                        type: 'string',
+                                        'x-decorator': 'FormItem',
+                                        'x-component': 'Input',
+                                        title: 'Username',
+                                        required: true,
+                                      },
+                                      nickname: {
+                                        type: 'string',
+                                        'x-decorator': 'FormItem',
+                                        'x-component': 'Input',
+                                        title: 'Nickname',
+                                      },
+                                    },
+                                  },
+                                },
+                              },
+                            },
+                          },
+                        },
+                      },
+                      edit: {
+                        type: 'void',
+                        title: 'Edit',
+                        'x-action': 'update',
+                        'x-component': 'Action.Link',
+                        'x-component-props': {
+                          openMode: 'drawer',
+                          icon: 'EditOutlined',
+                        },
+                        properties: {
+                          drawer: {
+                            type: 'void',
+                            title: 'Edit record',
+                            'x-component': 'Action.Drawer',
+                            'x-component-props': {
+                              className: 'nb-action-popup',
+                            },
+                            properties: {
+                              formContext: {
+                                type: 'void',
+                                'x-decorator': 'FormBlockProvider',
+                                'x-use-decorator-props': 'useFormBlockProviderProps',
+                                'x-component': 'CardItem',
+                                properties: {
+                                  form: {
+                                    type: 'void',
+                                    'x-component': 'FormV2',
+                                    'x-use-component-props': 'useFormBlockProps',
+                                    properties: {
+                                      username: {
+                                        type: 'string',
+                                        'x-decorator': 'FormItem',
+                                        'x-component': 'Input',
+                                        title: 'Username',
+                                        required: true,
+                                      },
+                                      nickname: {
+                                        type: 'string',
+                                        'x-decorator': 'FormItem',
+                                        'x-component': 'Input',
+                                        title: 'Nickname',
+                                      },
+                                    },
+                                  },
+                                },
+                              },
+                              footer: {
+                                type: 'void',
+                                'x-component': 'Action.Drawer.Footer',
+                                properties: {
+                                  close: {
+                                    title: 'Close',
+                                    'x-component': 'Action',
+                                    'x-component-props': {
+                                      type: 'default',
+                                    },
+                                    'x-use-component-props': 'useCloseActionProps',
+                                  },
+                                  submit: {
+                                    title: 'Submit',
+                                    'x-component': 'Action',
+                                    'x-use-component-props': 'useSubmitActionProps',
+                                  },
+                                },
+                              },
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  appOptions: {
+    components: {
+      TableBlockProvider,
+      FormBlockProvider,
+    },
+    scopes: {
+      useSubmitActionProps,
+      useCloseActionProps,
+      useTableBlockProps,
+      useFormBlockProps,
+      useFormBlockProviderProps,
+    },
+  },
+  delayResponse: 500,
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/table-v2/index.md b/packages/core/client/src/schema-component/antd/table-v2/index.md
index c8672b717d..9ff586d336 100644
--- a/packages/core/client/src/schema-component/antd/table-v2/index.md
+++ b/packages/core/client/src/schema-component/antd/table-v2/index.md
@@ -1,15 +1,42 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # TableV2
 
-## TableBlock
+`TableV2` 是一个基于 `antd` 的表格组件的封装。
 
-<code src="./demos/demo1.tsx"></code>
+## With Collection
 
-## Tree Table
+我们需要使用到 `TableBlockProvider` 将数据表的配置和数据向下传递，`useTableBlockProps` 将数据和 props 传递给 `Table`，column 中使用 `CollectionField` 动态读取数据表的配置，根据配置渲染表格列。
 
-<code src="./demos/demo2.tsx"></code>
+其中 `TableBlockProvider` 是对 `DataBlockProvider` 的二次封装，其属性可以参考 [DataBlockProvider](/core/data-block/data-block-provider#属性详解)，`CollectionField` 会自动根据 field.name 查找对应的数据表的配置，并渲染成对应的表格列，更多关于 `CollectionField` 的说明请参考 [CollectionField](/core/data-source/collection-field)。
+
+<code src="./demos/new-demos/collection.tsx"></code>
+
+## Extends Collection
+
+如果 Collection 不是通过数据源管理器创建，而是自定义扩展，可以查看 [ExtendCollectionsProvider](/core/data-source/extend-collections-provider)。
+
+<code src="./demos/new-demos/extend-collection.tsx"></code>
+
+## With ActionToolbar
+
+我们可以结合 [ActionToolbar](/components/action#actionbar) 来实现表格的操作栏，比如新增、刷新、筛选、批量删除等操作。
+
+- 更新按钮：可以直接使用内置的 `useRefreshActionProps()`
+- 批量删除按钮：可以使用内置的 `useBulkDestroyActionProps()`
+- 过滤按钮：可以直接使用 [Filter.Action](/components/filter) 和 `useFilterActionProps`
+- 新增按钮可以参考 [Action.Drawer](/components/action#与-form-结合) 的用法
+
+如果想自定义则可使用 [useDataBlockResource()](/core/data-block/data-block-resource-provider) 和 [useDataBlockRequest()](/core/data-block/data-block-request-provider#usedatablockrequest)，对数据进行操作。
+
+<code src="./demos/new-demos/action-toolbar.tsx"></code>
+
+## View Or Edit Record
+
+Table 会将当前行的数据通过 [CollectionRecordProvider](/core/data-block/collection-record-provider) 传递给下层组件，我们可以通过 [useCollectionRecord()](/core/data-block/collection-record-provider#usecollectionrecord) 获取当前行的数据。
+
+然后我们使用 `useFormBlockProviderProps()` 将数据表的配置和数据传递给 [FormBlockProvider](http://localhost:8000/components/form-v2#%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE%E8%A1%A8%E6%95%B0%E6%8D%AE) 组件，`FormBlockProvider` 会自动请求表单数据和配置。
+
+然后我们使用 `useFormBlockProps()` 将数据传递给 `Form` 组件。
+
+在编辑场景下，在通过 [useDataBlockResource()](/core/data-block/data-block-resource-provider) 和 [useDataBlockRequest()](/core/data-block/data-block-request-provider#usedatablockrequest) 对数据进行更新，以及对列表进行刷新。
+
+<code src="./demos/new-demos/record.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/table/index.md b/packages/core/client/src/schema-component/antd/table/index.md
index bccd176344..86ba92ee4d 100644
--- a/packages/core/client/src/schema-component/antd/table/index.md
+++ b/packages/core/client/src/schema-component/antd/table/index.md
@@ -1,9 +1,3 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Table
 
 表格有三个使用场景
diff --git a/packages/core/client/src/schema-component/antd/tabs/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/tabs/demos/demo1.tsx
index 9add593506..d53d21e707 100644
--- a/packages/core/client/src/schema-component/antd/tabs/demos/demo1.tsx
+++ b/packages/core/client/src/schema-component/antd/tabs/demos/demo1.tsx
@@ -11,9 +11,15 @@
  * title: Tabs
  */
 import { ISchema } from '@formily/react';
-import { Action, Application, SchemaComponent, SchemaComponentProvider, Tabs } from '@nocobase/client';
+import {
+  Action,
+  Application,
+  SchemaComponent,
+  SchemaComponentProvider,
+  Tabs,
+  AntdSchemaComponentProvider,
+} from '@nocobase/client';
 import React from 'react';
-import { AntdSchemaComponentProvider } from '../../AntdSchemaComponentProvider';
 
 const schema: ISchema = {
   type: 'object',
diff --git a/packages/core/client/src/schema-component/antd/tabs/index.md b/packages/core/client/src/schema-component/antd/tabs/index.md
index 04486c7b4d..cbd317c62a 100644
--- a/packages/core/client/src/schema-component/antd/tabs/index.md
+++ b/packages/core/client/src/schema-component/antd/tabs/index.md
@@ -1,14 +1,5 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Tabs
 
-- Tabs
-- Tabs.TabPane
-
-## Examples
+标签页。其基于 antd  [Tabs](https://ant.design/components/tabs/) 组件进行封装，需要 `Tabs` 和 `Tabs.TabPane` 两个组件配合使用。
 
 <code src="./demos/demo1.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/time-picker/ReadPretty.tsx b/packages/core/client/src/schema-component/antd/time-picker/ReadPretty.tsx
index b1c5e20bb0..c49f171ada 100644
--- a/packages/core/client/src/schema-component/antd/time-picker/ReadPretty.tsx
+++ b/packages/core/client/src/schema-component/antd/time-picker/ReadPretty.tsx
@@ -10,11 +10,18 @@
 import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
 import { toArr } from '@formily/shared';
 import dayjs from 'dayjs';
-import { TimeRangePickerProps } from 'antd/es/time-picker';
 import cls from 'classnames';
 import React from 'react';
 
-export const ReadPretty: React.FC<TimeRangePickerProps> = (props: any) => {
+export interface TimePickerReadPrettyProps {
+  format?: string;
+  style?: React.CSSProperties;
+  value: string | string[];
+  className?: string;
+  prefixCls?: string;
+}
+
+export const ReadPretty: React.FC<TimePickerReadPrettyProps> = (props) => {
   const { value, format = 'HH:mm:ss' } = props;
   const prefixCls = usePrefixCls('description-text', props);
   const values = toArr(value);
diff --git a/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range-read-pretty.tsx b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range-read-pretty.tsx
new file mode 100644
index 0000000000..9a0d04c7b8
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range-read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        default: ['17:02:18', '18:45:24'],
+        'x-decorator': 'FormItem',
+        'x-component': 'TimePicker.RangePicker',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range.tsx b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range.tsx
new file mode 100644
index 0000000000..3603180367
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'TimePicker.RangePicker',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-read-pretty.tsx b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-read-pretty.tsx
new file mode 100644
index 0000000000..b94901005f
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        default: '10:10:10',
+        'x-decorator': 'FormItem',
+        'x-component': 'TimePicker',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time.tsx b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time.tsx
new file mode 100644
index 0000000000..d8839ddfbf
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'string',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'TimePicker',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/time-picker/index.md b/packages/core/client/src/schema-component/antd/time-picker/index.md
index 5b3eb05e5a..f5fddecbdf 100644
--- a/packages/core/client/src/schema-component/antd/time-picker/index.md
+++ b/packages/core/client/src/schema-component/antd/time-picker/index.md
@@ -1,17 +1,45 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # TimePicker
 
-## Examples
+时间选择框。其基于 ant-design [TimePicker](https://ant.design/components/time-picker) 组件封装。
 
-### TimePicker
+## TimePicker
 
-<code src="./demos/demo1.tsx"></code>
+### Basic Usage
 
-### Time Range Picker
+```ts
+type TimePickerProps = AntdTimePickerProps
+```
 
-<code src="./demos/demo2.tsx"></code>
+<code src="./demos/new-demos/time.tsx"></code>
+
+### Read Pretty
+
+```ts
+interface TimePickerReadPrettyProps {
+  format?: string;
+  style?: React.CSSProperties;
+  value: string | string[];
+  className?: string;
+  prefixCls?: string;
+}
+```
+
+<code src="./demos/new-demos/time-read-pretty.tsx"></code>
+
+## Time Range Picker
+
+### Basic Usage
+
+```ts
+type TimeRangePickerProps = AntdTimePickerProps
+```
+
+<code src="./demos/new-demos/time-range.tsx"></code>
+
+### Read Pretty
+
+```ts
+type TimeRangePickerReadPrettyProps = TimePickerReadPrettyProps;
+```
+
+<code src="./demos/new-demos/time-range-read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..549bee75dd
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/basic.tsx
@@ -0,0 +1,62 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const dataSource = [
+  {
+    label: '选项1',
+    value: 1,
+    children: [
+      {
+        label: 'Child Node1',
+        value: '0-0-0',
+      },
+      {
+        label: 'Child Node2',
+        value: '0-0-1',
+      },
+      {
+        label: 'Child Node3',
+        value: '0-0-2',
+      },
+    ],
+  },
+  {
+    label: '选项2',
+    value: 2,
+    children: [
+      {
+        label: 'Child Node1',
+        value: '0-1-0',
+      },
+      {
+        label: 'Child Node2',
+        value: '0-1-1',
+      },
+      {
+        label: 'Child Node3',
+        value: '0-1-2',
+      },
+    ],
+  },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'TreeSelect',
+        'x-component-props': {
+          treeData: dataSource,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..0b89614d5d
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,64 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const dataSource = [
+  {
+    label: '选项1',
+    value: 1,
+    children: [
+      {
+        label: 'Child Node1',
+        value: '0-0-0',
+      },
+      {
+        label: 'Child Node2',
+        value: '0-0-1',
+      },
+      {
+        label: 'Child Node3',
+        value: '0-0-2',
+      },
+    ],
+  },
+  {
+    label: '选项2',
+    value: 2,
+    children: [
+      {
+        label: 'Child Node1',
+        value: '0-1-0',
+      },
+      {
+        label: 'Child Node2',
+        value: '0-1-1',
+      },
+      {
+        label: 'Child Node3',
+        value: '0-1-2',
+      },
+    ],
+  },
+];
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-pattern': 'readPretty',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        default: '0-0-1',
+        'x-decorator': 'FormItem',
+        'x-component': 'TreeSelect',
+        'x-component-props': {
+          treeData: dataSource,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/tree-select/index.md b/packages/core/client/src/schema-component/antd/tree-select/index.md
index 342e00f506..0935f30048 100644
--- a/packages/core/client/src/schema-component/antd/tree-select/index.md
+++ b/packages/core/client/src/schema-component/antd/tree-select/index.md
@@ -1,13 +1,15 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # TreeSelect
 
-## Examples
+树选择。其基于 ant-design [TreeSelect](https://ant.design/components/tree-select) 组件封装。
 
-### TreeSelect
+```ts
+type TreeSelectProps = AntdTreeSelectProps
+```
 
-<code src="./demos/demo1.tsx"></code>
+## Basic
+
+<code src="./demos/new-demos/basic.tsx"></code>
+
+## Read Pretty
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/unixTimestamp/UnixTimestamp.tsx b/packages/core/client/src/schema-component/antd/unix-timestamp/UnixTimestamp.tsx
similarity index 90%
rename from packages/core/client/src/schema-component/antd/unixTimestamp/UnixTimestamp.tsx
rename to packages/core/client/src/schema-component/antd/unix-timestamp/UnixTimestamp.tsx
index f2d9555b9a..db9b953c3f 100644
--- a/packages/core/client/src/schema-component/antd/unixTimestamp/UnixTimestamp.tsx
+++ b/packages/core/client/src/schema-component/antd/unix-timestamp/UnixTimestamp.tsx
@@ -34,8 +34,14 @@ function getTimestamp(date, accuracy = 'millisecond') {
   }
 }
 
+interface UnixTimestampProps {
+  value?: number;
+  accuracy?: 'millisecond' | 'second';
+  onChange?: (value: number) => void;
+}
+
 export const UnixTimestamp = connect(
-  (props) => {
+  (props: UnixTimestampProps) => {
     const { value, onChange, accuracy } = props;
     const v = useMemo(() => toValue(value, accuracy), [value]);
     return (
diff --git a/packages/core/client/src/schema-component/antd/unixTimestamp/__tests__/UnixTimestamp.test.tsx b/packages/core/client/src/schema-component/antd/unix-timestamp/__tests__/UnixTimestamp.test.tsx
similarity index 100%
rename from packages/core/client/src/schema-component/antd/unixTimestamp/__tests__/UnixTimestamp.test.tsx
rename to packages/core/client/src/schema-component/antd/unix-timestamp/__tests__/UnixTimestamp.test.tsx
diff --git a/packages/core/client/src/schema-component/antd/unix-timestamp/demos/basic.tsx b/packages/core/client/src/schema-component/antd/unix-timestamp/demos/basic.tsx
new file mode 100644
index 0000000000..00ba713884
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/unix-timestamp/demos/basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'number',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'UnixTimestamp',
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/unix-timestamp/demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/unix-timestamp/demos/read-pretty.tsx
new file mode 100644
index 0000000000..d493e2f19b
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/unix-timestamp/demos/read-pretty.tsx
@@ -0,0 +1,32 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'number',
+        title: 'Test',
+        default: 1712016000000,
+        'x-decorator': 'FormItem',
+        'x-component': 'UnixTimestamp',
+      },
+      test2: {
+        type: 'number',
+        title: 'Test(accuracy: second)',
+        'x-decorator': 'FormItem',
+        default: 1712016000,
+        'x-component': 'UnixTimestamp',
+        'x-component-props': {
+          accuracy: 'second',
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/unix-timestamp/demos/second.tsx b/packages/core/client/src/schema-component/antd/unix-timestamp/demos/second.tsx
new file mode 100644
index 0000000000..f1eb12da89
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/unix-timestamp/demos/second.tsx
@@ -0,0 +1,23 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'number',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'UnixTimestamp',
+        'x-component-props': {
+          accuracy: 'second',
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/unix-timestamp/index.md b/packages/core/client/src/schema-component/antd/unix-timestamp/index.md
new file mode 100644
index 0000000000..b3d9dc1c5d
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/unix-timestamp/index.md
@@ -0,0 +1,20 @@
+# UnixTimestamp
+
+```ts
+interface UnixTimestampProps {
+  value?: number;
+  accuracy?: 'millisecond' | 'second';
+}
+```
+
+## Basic Usage
+
+<code src="./demos/basic.tsx"></code>
+
+## accuracy: second
+
+<code src="./demos/second.tsx"></code>
+
+## Read Pretty
+
+<code src="./demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/unixTimestamp/index.tsx b/packages/core/client/src/schema-component/antd/unix-timestamp/index.tsx
similarity index 100%
rename from packages/core/client/src/schema-component/antd/unixTimestamp/index.tsx
rename to packages/core/client/src/schema-component/antd/unix-timestamp/index.tsx
diff --git a/packages/core/client/src/schema-component/antd/upload/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/upload/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..4a7f1168df
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/upload/demos/new-demos/basic.tsx
@@ -0,0 +1,43 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Upload.Attachment',
+        'x-component-props': {
+          action: 'attachments:create',
+        },
+      },
+    },
+  },
+  apis: {
+    'attachments:create': {
+      data: {
+        id: 1,
+        title: '20240131154451',
+        filename: '99726f173d5329f056c083f2ee0ccc08.png',
+        extname: '.png',
+        path: '',
+        size: 841380,
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        mimetype: 'image/png',
+        meta: {},
+        storageId: 1,
+        updatedAt: '2024-04-29T09:49:28.769Z',
+        createdAt: '2024-04-29T09:49:28.769Z',
+        createdById: 1,
+        updatedById: 1,
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/upload/demos/new-demos/multiple.tsx b/packages/core/client/src/schema-component/antd/upload/demos/new-demos/multiple.tsx
new file mode 100644
index 0000000000..8b57102a5e
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/upload/demos/new-demos/multiple.tsx
@@ -0,0 +1,44 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        'x-decorator': 'FormItem',
+        'x-component': 'Upload.Attachment',
+        'x-component-props': {
+          action: 'attachments:create',
+          multiple: true,
+        },
+      },
+    },
+  },
+  apis: {
+    'attachments:create': {
+      data: {
+        id: 1,
+        title: '20240131154451',
+        filename: '99726f173d5329f056c083f2ee0ccc08.png',
+        extname: '.png',
+        path: '',
+        size: 841380,
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        mimetype: 'image/png',
+        meta: {},
+        storageId: 1,
+        updatedAt: '2024-04-29T09:49:28.769Z',
+        createdAt: '2024-04-29T09:49:28.769Z',
+        createdById: 1,
+        updatedById: 1,
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/upload/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/upload/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..823ce1b597
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/upload/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,68 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+  schema: {
+    type: 'void',
+    name: 'root',
+    'x-decorator': 'FormV2',
+    'x-component': 'ShowFormData',
+    'x-pattern': 'readPretty',
+    properties: {
+      test: {
+        type: 'boolean',
+        title: 'Test',
+        default: [
+          {
+            id: 45,
+            title: 'img',
+            name: 's33766399',
+            filename: 'cd48dc833ab01aa3959ac39309fc39de.jpg',
+            extname: '.jpg',
+            size: null,
+            mimetype: 'image/jpeg',
+            path: '',
+            meta: {},
+            status: 'uploading',
+            percent: 60,
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+            created_at: '2021-08-13T15:00:17.423Z',
+            updated_at: '2021-08-13T15:00:17.423Z',
+            created_by_id: null,
+            updated_by_id: null,
+            storage_id: 2,
+          },
+          {
+            id: 7,
+            title: 'doc',
+            filename: 'd9f6ad6669902a9a8a1229d9f362235a.docx',
+            extname: '.docx',
+            size: null,
+            mimetype: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+            path: '',
+            meta: {},
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+            created_at: '2021-09-12T01:22:06.229Z',
+            updated_at: '2021-09-12T01:22:06.229Z',
+            created_by_id: null,
+            updated_by_id: 1,
+            storage_id: 2,
+            t_jh7a28dsfzi: {
+              createdAt: '2021-09-12T01:22:07.886Z',
+              updatedAt: '2021-09-12T01:22:07.886Z',
+              f_xg3mysbjfra: 1,
+              f_gc7ppj0b7n1: 7,
+            },
+          },
+        ],
+        'x-decorator': 'FormItem',
+        'x-component': 'Upload.Attachment',
+        'x-component-props': {
+          action: 'attachments:create',
+          multiple: true,
+        },
+      },
+    },
+  },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/upload/index.md b/packages/core/client/src/schema-component/antd/upload/index.md
index 48f50786be..e6d5443e87 100644
--- a/packages/core/client/src/schema-component/antd/upload/index.md
+++ b/packages/core/client/src/schema-component/antd/upload/index.md
@@ -1,15 +1,28 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Upload
 
-## Examples
+上传组件。其基于 ant-design [Upload](https://ant.design/components/upload) 组件封装。
 
-### Upload
+## Basic Usage
 
-<code src="./demos/demo1.tsx"></code>
+```ts
+type UploadProps = Omit<AntdUploadProps, 'onChange'> & {
+  onChange?: (fileList: UploadFile[]) => void;
+  serviceErrorMessage?: string;
+  value?: any;
+  size?: string;
+};
+```
 
-<code src="./demos/demo2.tsx"></code>
+<code src="./demos/new-demos/basic.tsx"></code>
+
+## Multiple
+
+<code src="./demos/new-demos/multiple.tsx"></code>
+
+## Read Pretty
+
+```ts
+type UploadReadPrettyProps = AntdUploadProps;
+```
+
+<code src="./demos/new-demos/read-pretty.tsx"></code>
diff --git a/packages/core/client/src/schema-component/antd/variable/Input.tsx b/packages/core/client/src/schema-component/antd/variable/Input.tsx
index 594530dc03..4ccc0a8b64 100644
--- a/packages/core/client/src/schema-component/antd/variable/Input.tsx
+++ b/packages/core/client/src/schema-component/antd/variable/Input.tsx
@@ -11,7 +11,7 @@ import { CloseCircleFilled } from '@ant-design/icons';
 import { css, cx } from '@emotion/css';
 import { useForm } from '@formily/react';
 import { error } from '@nocobase/utils/client';
-import { Input as AntInput, Cascader, DatePicker, InputNumber, Select, Space, Tag } from 'antd';
+import { Input as AntInput, Cascader, CascaderProps, DatePicker, InputNumber, Select, Space, Tag } from 'antd';
 import useAntdInputStyle from 'antd/es/input/style';
 import type { DefaultOptionType } from 'antd/lib/cascader';
 import classNames from 'classnames';
@@ -137,7 +137,21 @@ function getTypedConstantOption(type: string, types: true | string[], fieldNames
   };
 }
 
-export function Input(props) {
+export type VariableInputProps = {
+  value?: string;
+  scope?: Partial<DefaultOptionType>[] | (() => Partial<DefaultOptionType>[]);
+  onChange: (value: string, optionPath?: any[]) => void;
+  children?: any;
+  button?: React.ReactElement;
+  useTypedConstant?: true | string[];
+  changeOnSelect?: CascaderProps['changeOnSelect'];
+  fieldNames?: CascaderProps['fieldNames'];
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+export function Input(props: VariableInputProps) {
   const {
     value = '',
     onChange,
diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx
index b9f0c6b166..0bb09cb4be 100644
--- a/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx
+++ b/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx
@@ -7,9 +7,6 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-/**
- * title: Variable.Input
- */
 import { FormItem } from '@formily/antd-v5';
 import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
 import React from 'react';
@@ -30,14 +27,6 @@ const schema = {
       'x-component-props': {
         scope,
       },
-      // 'x-reactions': {
-      //   target: 'read',
-      //   fulfill: {
-      //     state: {
-      //       value: '{{$self.value}}',
-      //     },
-      //   },
-      // },
     },
   },
 };
diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx
index 46bdecdd53..df91d88333 100644
--- a/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx
+++ b/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx
@@ -7,9 +7,6 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-/**
- * title: Variable.Input
- */
 import { FormItem } from '@formily/antd-v5';
 import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
 import React from 'react';
@@ -30,14 +27,6 @@ const schema = {
       'x-component-props': {
         scope,
       },
-      // 'x-reactions': {
-      //   target: 'read',
-      //   fulfill: {
-      //     state: {
-      //       value: '{{$self.value}}',
-      //     },
-      //   },
-      // },
     },
   },
 };
diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx
index d2f0f595c0..2c28796153 100644
--- a/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx
+++ b/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx
@@ -7,9 +7,6 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-/**
- * title: Variable.Input
- */
 import { FormItem } from '@formily/antd-v5';
 import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
 import React from 'react';
@@ -30,14 +27,6 @@ const schema = {
       'x-component-props': {
         scope,
       },
-      // 'x-reactions': {
-      //   target: 'read',
-      //   fulfill: {
-      //     state: {
-      //       value: '{{$self.value}}',
-      //     },
-      //   },
-      // },
     },
   },
 };
diff --git a/packages/core/client/src/schema-component/antd/variable/index.md b/packages/core/client/src/schema-component/antd/variable/index.md
index 410102a544..1a0d0d8327 100644
--- a/packages/core/client/src/schema-component/antd/variable/index.md
+++ b/packages/core/client/src/schema-component/antd/variable/index.md
@@ -1,14 +1,25 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Variable
 
-## Examples
+变量选择器。
 
-### `Variable.Input`
+## `Variable.Input`
+
+```ts
+import type { DefaultOptionType } from 'antd/lib/cascader';
+ type VariableInputProps = {
+  value?: string;
+  scope?: DefaultOptionType[] | (() => DefaultOptionType[]);
+  onChange: (value: string, optionPath?: any[]) => void;
+  children?: any;
+  button?: React.ReactElement;
+  useTypedConstant?: true | string[];
+  changeOnSelect?: CascaderProps['changeOnSelect'];
+  fieldNames?: CascaderProps['fieldNames'];
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+```
 
 <code src="./demos/demo1.tsx"></code>
 
diff --git a/packages/core/client/src/schema-component/common/dnd-context/index.md b/packages/core/client/src/schema-component/common/dnd-context/index.md
index 5d9fdc3389..3fc5f17d2a 100644
--- a/packages/core/client/src/schema-component/common/dnd-context/index.md
+++ b/packages/core/client/src/schema-component/common/dnd-context/index.md
@@ -1,7 +1 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # DndContext
diff --git a/packages/core/client/src/schema-component/common/dnd-context/index.tsx b/packages/core/client/src/schema-component/common/dnd-context/index.tsx
index 2cd84e56b2..b4a1c9bc0c 100644
--- a/packages/core/client/src/schema-component/common/dnd-context/index.tsx
+++ b/packages/core/client/src/schema-component/common/dnd-context/index.tsx
@@ -75,6 +75,8 @@ const useDragEnd = (onDragEnd) => {
   );
 };
 
+export type DndContextProps = Props;
+
 export const DndContext = observer(
   (props: Props) => {
     const { t } = useTranslation();
diff --git a/packages/core/client/src/schema-component/common/sortable-item/index.md b/packages/core/client/src/schema-component/common/sortable-item/index.md
index e8dc556718..56cbc667f0 100644
--- a/packages/core/client/src/schema-component/common/sortable-item/index.md
+++ b/packages/core/client/src/schema-component/common/sortable-item/index.md
@@ -1,8 +1,2 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # SortableItem
 
diff --git a/packages/core/test/src/client/utils/utils.ts b/packages/core/test/src/client/utils/utils.ts
index d46a5d4729..67fe5c5a11 100644
--- a/packages/core/test/src/client/utils/utils.ts
+++ b/packages/core/test/src/client/utils/utils.ts
@@ -18,9 +18,9 @@ export const WaitApp = async () => {
     expectNoTsError(screen.queryByText('Loading...')).not.toBeInTheDocument();
   });
 
-  const loadError = screen.queryByText('Load Plugin Error');
+  const loadError = screen.queryByText('App Error');
   if (loadError) {
-    expectNoTsError(screen.queryByText('Load Plugin Error')).not.toBeInTheDocument();
+    expectNoTsError(screen.queryByText('App Error')).not.toBeInTheDocument();
   }
 
   const renderError = screen.queryByText('Render Failed');
diff --git a/packages/core/test/src/web/dataSourceMainData.json b/packages/core/test/src/web/dataSourceMainData.json
index 87d537a3b1..9eb7b57808 100644
--- a/packages/core/test/src/web/dataSourceMainData.json
+++ b/packages/core/test/src/web/dataSourceMainData.json
@@ -97,6 +97,91 @@
       }
     }
   },
+  "users:get": {
+    "data": {
+      "createdAt": "2024-04-07T06:50:37.797Z",
+      "updatedAt": "2024-04-07T06:50:37.797Z",
+      "appLang": null,
+      "createdById": null,
+      "email": "admin@nocobase.com",
+      "f_1gx8uyn3wva": 1,
+      "id": 1,
+      "nickname": "Super Admin",
+      "phone": null,
+      "systemSettings": {},
+      "updatedById": null,
+      "username": "nocobase",
+      "roles": [
+        {
+          "createdAt": "2024-04-07T06:50:37.700Z",
+          "updatedAt": "2024-04-07T06:50:37.700Z",
+          "allowConfigure": null,
+          "allowNewMenu": true,
+          "default": true,
+          "description": null,
+          "hidden": false,
+          "color": "#1677FF",
+          "name": "member",
+          "snippets": ["!pm", "!pm.*", "!ui.*"],
+          "strategy": {
+            "actions": ["view", "update:own", "destroy:own", "create"]
+          },
+          "title": "{{t(\"Member\")}}",
+          "rolesUsers": {
+            "createdAt": "2024-04-07T06:50:37.854Z",
+            "updatedAt": "2024-04-07T06:50:37.854Z",
+            "default": null,
+            "roleName": "member",
+            "userId": 1
+          }
+        },
+        {
+          "createdAt": "2024-04-07T06:50:37.622Z",
+          "updatedAt": "2024-04-07T06:50:37.622Z",
+          "allowConfigure": null,
+          "allowNewMenu": null,
+          "default": false,
+          "description": null,
+          "hidden": true,
+          "color": "#1677FF",
+          "name": "root",
+          "snippets": ["pm", "pm.*", "ui.*"],
+          "strategy": null,
+          "title": "{{t(\"Root\")}}",
+          "rolesUsers": {
+            "createdAt": "2024-04-07T06:50:38.152Z",
+            "updatedAt": "2024-04-07T06:50:38.186Z",
+            "default": true,
+            "roleName": "root",
+            "userId": 1
+          }
+        },
+        {
+          "createdAt": "2024-04-07T06:50:37.657Z",
+          "updatedAt": "2024-04-07T06:50:37.657Z",
+          "allowConfigure": true,
+          "allowNewMenu": true,
+          "default": false,
+          "description": null,
+          "hidden": false,
+          "name": "admin",
+          "color": "#1677FF",
+          "snippets": ["pm", "pm.*", "ui.*"],
+          "strategy": {
+            "actions": ["create", "view", "update", "destroy"]
+          },
+          "title": "{{t(\"Admin\")}}",
+          "rolesUsers": {
+            "createdAt": "2024-04-07T06:50:38.152Z",
+            "updatedAt": "2024-04-07T06:50:38.152Z",
+            "default": null,
+            "roleName": "admin",
+            "userId": 1
+          }
+        }
+      ]
+    }
+  },
   "roles:list": {
     "data": [
       {
@@ -158,6 +243,22 @@
       }
     }
   },
+  "roles:get": {
+    "data": {
+      "createdAt": "2024-04-07T06:50:37.622Z",
+      "updatedAt": "2024-04-07T06:50:37.622Z",
+      "allowConfigure": null,
+      "allowNewMenu": null,
+      "default": false,
+      "description": null,
+      "hidden": true,
+      "name": "root",
+      "color": "#1677FF",
+      "snippets": ["pm", "pm.*", "ui.*"],
+      "strategy": null,
+      "title": "{{t(\"Root\")}}"
+    }
+  },
   "tree:list": {
     "data": [
       {
diff --git a/packages/core/test/src/web/index.tsx b/packages/core/test/src/web/index.tsx
index bbcb7b4bd9..1f3ef85406 100644
--- a/packages/core/test/src/web/index.tsx
+++ b/packages/core/test/src/web/index.tsx
@@ -11,7 +11,7 @@ import React, { ComponentType } from 'react';
 import MockAdapter from 'axios-mock-adapter';
 import { AxiosInstance, AxiosRequestConfig } from 'axios';
 import { set, get, pick } from 'lodash';
-import { useFieldSchema, observer } from '@formily/react';
+import { useFieldSchema, observer, useForm } from '@formily/react';
 
 import {
   AntdSchemaComponentPlugin,
@@ -33,7 +33,10 @@ import _ from 'lodash';
 
 const defaultApis = {
   'uiSchemas:patch': { data: { result: 'ok' } },
+  'uiSchemas:batchPatch': { data: { result: 'ok' } },
   'uiSchemas:saveAsTemplate': { data: { result: 'ok' } },
+  'users:update': { data: { result: 'ok' } },
+  'roles:update': { data: { result: 'ok' } },
   ...dataSourceMainData,
 };
 
@@ -51,16 +54,28 @@ function getProcessMockData(apis: Record<string, any>, key: string) {
     if (config?.params?.pageSize || config?.params?.page) {
       const { data, meta } = apis[key];
 
-      const pageSize = config.params.pageSize || meta?.pageSize;
-      const page = config.params.page || meta?.page;
-      return [200, { data: data.slice(pageSize * (page - 1), pageSize), meta: { ...meta, page, pageSize } }];
+      const pageSize = config.params.pageSize || meta?.pageSize || 20;
+      const page = config.params.page || meta?.page || 1;
+      return [
+        200,
+        {
+          data: data.slice(pageSize * (page - 1), pageSize * page),
+          meta: {
+            ...meta,
+            page,
+            pageSize,
+            count: data.length,
+            totalPage: Math.ceil(data.length / pageSize),
+          },
+        },
+      ];
     }
     return [200, apis[key]];
   };
 }
 
-export const mockApi = (axiosInstance: AxiosInstance, apis: MockApis = {}) => {
-  const mock = new MockAdapter(axiosInstance);
+export const mockApi = (axiosInstance: AxiosInstance, apis: MockApis = {}, delayResponse?: number) => {
+  const mock = new MockAdapter(axiosInstance, { delayResponse });
   Object.keys(apis).forEach((key) => {
     mock.onAny(key).reply(getProcessMockData(apis, key));
   });
@@ -72,15 +87,30 @@ export const mockApi = (axiosInstance: AxiosInstance, apis: MockApis = {}) => {
   };
 };
 
-export const mockAppApi = (app: Application, apis: MockApis = {}) => {
-  const mock = mockApi(app.apiClient.axios, apis);
+export const mockAppApi = (app: Application, apis: MockApis = {}, delayResponse?: number) => {
+  const mock = mockApi(app.apiClient.axios, apis, delayResponse);
   return mock;
 };
 
+const ShowFormData = observer(({ children }) => {
+  const form = useForm();
+  return (
+    <>
+      {
+        <pre style={{ marginBottom: 20 }} data-testid="form-data">
+          {JSON.stringify(form.values, null, 2)}
+        </pre>
+      }
+      {children}
+    </>
+  );
+});
+
 export interface GetAppOptions {
   appOptions?: AppOrOptions;
   providers?: (ComponentType | [ComponentType, any])[];
   apis?: MockApis;
+  delayResponse?: number;
   designable?: boolean;
   schemaSettings?: SchemaSettings;
   disableAcl?: boolean;
@@ -96,6 +126,7 @@ export const getApp = (options: GetAppOptions) => {
     apis: optionsApis = {},
     enableMultipleDataSource,
     designable,
+    delayResponse,
   } = options;
   const app =
     appOptions instanceof Application
@@ -113,7 +144,7 @@ export const getApp = (options: GetAppOptions) => {
     app.schemaSettingsManager.add(schemaSettings);
   }
 
-  app.addComponents({ CommonSchemaComponent });
+  app.addComponents({ CommonSchemaComponent, ShowFormData });
 
   app.pluginManager.add(AntdSchemaComponentPlugin);
   app.pluginManager.add(SchemaSettingsPlugin);
@@ -127,7 +158,7 @@ export const getApp = (options: GetAppOptions) => {
     app.dataSourceManager.addDataSource(LocalDataSource, dataSource2 as any);
   }
 
-  mockAppApi(app, apis);
+  mockAppApi(app, apis, delayResponse);
 
   const App = app.getRootComponent();
 
diff --git a/packages/core/utils/src/date.ts b/packages/core/utils/src/date.ts
index 5aa3fe9eec..3a7bad0485 100644
--- a/packages/core/utils/src/date.ts
+++ b/packages/core/utils/src/date.ts
@@ -13,11 +13,21 @@ import { dayjs } from './dayjs';
 export interface Str2momentOptions {
   gmt?: boolean;
   picker?: 'year' | 'month' | 'week' | 'quarter';
-  utcOffset?: any;
+  utcOffset?: number;
   utc?: boolean;
 }
 
-export const getDefaultFormat = (props: any) => {
+export type Str2momentValue = string | string[] | dayjs.Dayjs | dayjs.Dayjs[];
+
+export interface GetDefaultFormatProps {
+  format?: string;
+  dateFormat?: string;
+  timeFormat?: string;
+  picker?: 'year' | 'month' | 'week' | 'quarter';
+  showTime?: boolean;
+}
+
+export const getDefaultFormat = (props: GetDefaultFormatProps) => {
   if (props.format) {
     return props.format;
   }
@@ -78,14 +88,17 @@ const toMoment = (val: any, options?: Str2momentOptions) => {
   return dayjs(val).utcOffset(offsetFromString(offset));
 };
 
-export const str2moment = (value?: string | string[], options: Str2momentOptions = {}): any => {
+export const str2moment = (
+  value?: string | string[] | dayjs.Dayjs | dayjs.Dayjs[],
+  options: Str2momentOptions = {},
+): any => {
   return Array.isArray(value)
     ? value.map((val) => {
         return toMoment(val, options);
       })
     : value
-    ? toMoment(value, options)
-    : value;
+      ? toMoment(value, options)
+      : value;
 };
 
 const toStringByPicker = (value, picker) => {
diff --git a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/index.md b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/index.md
index 73bc35708c..c358d943c6 100644
--- a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/index.md
+++ b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/index.md
@@ -1,9 +1,3 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # CalendarV2
 
 ## Examples
diff --git a/packages/plugins/@nocobase/plugin-gantt/src/client/index.md b/packages/plugins/@nocobase/plugin-gantt/src/client/index.md
index 9605b94321..10b91a0c8d 100644
--- a/packages/plugins/@nocobase/plugin-gantt/src/client/index.md
+++ b/packages/plugins/@nocobase/plugin-gantt/src/client/index.md
@@ -1,7 +1,4 @@
----
-group:
-  title: Schema Components
----
+
 
 # Gantt
 
diff --git a/packages/plugins/@nocobase/plugin-kanban/src/client/index.md b/packages/plugins/@nocobase/plugin-kanban/src/client/index.md
index 4562f2ae2c..8b8a59382b 100644
--- a/packages/plugins/@nocobase/plugin-kanban/src/client/index.md
+++ b/packages/plugins/@nocobase/plugin-kanban/src/client/index.md
@@ -1,9 +1,3 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
 # Kanban
 
 ## Example
diff --git a/packages/plugins/@nocobase/plugin-map/src/client/__e2e__/schemaSettings.test.ts b/packages/plugins/@nocobase/plugin-map/src/client/__e2e__/schemaSettings.test.ts
index 20e6efff85..17091d915e 100644
--- a/packages/plugins/@nocobase/plugin-map/src/client/__e2e__/schemaSettings.test.ts
+++ b/packages/plugins/@nocobase/plugin-map/src/client/__e2e__/schemaSettings.test.ts
@@ -17,6 +17,7 @@ test.beforeEach(async ({ page }) => {
   if (await page.getByRole('button', { name: 'Edit' }).first().isVisible()) {
     await page.getByRole('button', { name: 'Edit' }).first().click();
   }
+  await page.waitForTimeout(100);
   await page.getByLabel('Access key').fill('9717a70e44273882bcf5489f72b4e261');
   await page.getByLabel('securityJsCode or serviceHost').fill('6876ed2d3a6168b75c4fba852e16c99c');
   await page.getByRole('button', { name: 'Save' }).first().click();